diff --git a/.codespellrc b/.codespellrc
deleted file mode 100644
index ffe730b74..000000000
--- a/.codespellrc
+++ /dev/null
@@ -1,7 +0,0 @@
-[codespell]
-# Ref: https://github.com/codespell-project/codespell#using-a-config-file
-skip = .git*,*.svg,i18n,*-lock.yaml,*.css,.codespellrc,migrations,*.js,*.map,*.mjs
-check-hidden = true
-# ignore all CamelCase and camelCase
-ignore-regex = \b[A-Za-z][a-z]+[A-Z][a-zA-Z]+\b
-ignore-words-list = tread
diff --git a/.github/ISSUE_TEMPLATE/--bug-report.yaml b/.github/ISSUE_TEMPLATE/--bug-report.yaml
index ec0376929..277a3bdfa 100644
--- a/.github/ISSUE_TEMPLATE/--bug-report.yaml
+++ b/.github/ISSUE_TEMPLATE/--bug-report.yaml
@@ -1,7 +1,7 @@
 name: Bug report
 description: Create a bug report to help us improve Plane
 title: "[bug]: "
-labels: [🐛bug]
+labels: [🐛bug, plane]
 assignees: [vihar, pushya22]
 body:
 - type: markdown
diff --git a/.github/ISSUE_TEMPLATE/--feature-request.yaml b/.github/ISSUE_TEMPLATE/--feature-request.yaml
index 390c95aaa..c2bd609c0 100644
--- a/.github/ISSUE_TEMPLATE/--feature-request.yaml
+++ b/.github/ISSUE_TEMPLATE/--feature-request.yaml
@@ -1,7 +1,7 @@
 name: Feature request
 description: Suggest a feature to improve Plane
 title: "[feature]: "
-labels: [✨feature]
+labels: [✨feature, plane]
 assignees: [vihar, pushya22]
 body:
 - type: markdown
diff --git a/.github/ISSUE_TEMPLATE/config.yaml b/.github/ISSUE_TEMPLATE/config.yaml
index 29c267831..301080b75 100644
--- a/.github/ISSUE_TEMPLATE/config.yaml
+++ b/.github/ISSUE_TEMPLATE/config.yaml
@@ -1,6 +1,6 @@
 contact_links:
   - name: Help and support
-    about: Reach out to us on our Discord server or GitHub discussions.
+    about: Reach out to us on our Forum or GitHub discussions.
   - name: Dedicated support
     url: mailto:support@plane.so
     about: Write to us if you'd like dedicated support using Plane
diff --git a/.github/workflows/build-branch.yml b/.github/workflows/build-branch.yml
index 087a012d4..8ad71e7d6 100644
--- a/.github/workflows/build-branch.yml
+++ b/.github/workflows/build-branch.yml
@@ -134,7 +134,7 @@ jobs:
 
       - id: checkout_files
         name: Checkout Files
-        uses: actions/checkout@v4
+        uses: actions/checkout@v6
 
   branch_build_push_admin:
     name: Build-Push Admin Docker Image
@@ -142,7 +142,7 @@ jobs:
     needs: [branch_build_setup]
     steps:
       - name: Admin Build and Push
-        uses: makeplane/actions/build-push@v1.0.0
+        uses: makeplane/actions/build-push@v1.4.0
         with:
           build-release: ${{ needs.branch_build_setup.outputs.build_release }}
           build-prerelease: ${{ needs.branch_build_setup.outputs.build_prerelease }}
@@ -164,7 +164,7 @@ jobs:
     needs: [branch_build_setup]
     steps:
       - name: Web Build and Push
-        uses: makeplane/actions/build-push@v1.0.0
+        uses: makeplane/actions/build-push@v1.4.0
         with:
           build-release: ${{ needs.branch_build_setup.outputs.build_release }}
           build-prerelease: ${{ needs.branch_build_setup.outputs.build_prerelease }}
@@ -186,7 +186,7 @@ jobs:
     needs: [branch_build_setup]
     steps:
       - name: Space Build and Push
-        uses: makeplane/actions/build-push@v1.0.0
+        uses: makeplane/actions/build-push@v1.4.0
         with:
           build-release: ${{ needs.branch_build_setup.outputs.build_release }}
           build-prerelease: ${{ needs.branch_build_setup.outputs.build_prerelease }}
@@ -208,7 +208,7 @@ jobs:
     needs: [branch_build_setup]
     steps:
       - name: Live Build and Push
-        uses: makeplane/actions/build-push@v1.0.0
+        uses: makeplane/actions/build-push@v1.4.0
         with:
           build-release: ${{ needs.branch_build_setup.outputs.build_release }}
           build-prerelease: ${{ needs.branch_build_setup.outputs.build_prerelease }}
@@ -230,7 +230,7 @@ jobs:
     needs: [branch_build_setup]
     steps:
       - name: Backend Build and Push
-        uses: makeplane/actions/build-push@v1.0.0
+        uses: makeplane/actions/build-push@v1.4.0
         with:
           build-release: ${{ needs.branch_build_setup.outputs.build_release }}
           build-prerelease: ${{ needs.branch_build_setup.outputs.build_prerelease }}
@@ -252,7 +252,7 @@ jobs:
     needs: [branch_build_setup]
     steps:
       - name: Proxy Build and Push
-        uses: makeplane/actions/build-push@v1.0.0
+        uses: makeplane/actions/build-push@v1.4.0
         with:
           build-release: ${{ needs.branch_build_setup.outputs.build_release }}
           build-prerelease: ${{ needs.branch_build_setup.outputs.build_prerelease }}
@@ -282,7 +282,7 @@ jobs:
       - branch_build_push_proxy
     steps:
       - name: Checkout Files
-        uses: actions/checkout@v4
+        uses: actions/checkout@v6
 
       - name: Prepare AIO Assets
         id: prepare_aio_assets
@@ -298,13 +298,13 @@ jobs:
           echo "AIO_BUILD_VERSION=${aio_version}" >> $GITHUB_OUTPUT
 
       - name: Upload AIO Assets
-        uses: actions/upload-artifact@v4
+        uses: actions/upload-artifact@v7
         with:
           path: ./deployments/aio/community/dist
           name: aio-assets-dist
 
       - name: AIO Build and Push
-        uses: makeplane/actions/build-push@v1.1.0
+        uses: makeplane/actions/build-push@v1.4.0
         with:
           build-release: ${{ needs.branch_build_setup.outputs.build_release }}
           build-prerelease: ${{ needs.branch_build_setup.outputs.build_prerelease }}
@@ -337,7 +337,7 @@ jobs:
       - branch_build_push_proxy
     steps:
       - name: Checkout Files
-        uses: actions/checkout@v4
+        uses: actions/checkout@v6
 
       - name: Update Assets
         run: |
@@ -352,7 +352,7 @@ jobs:
           # sed -i 's/APP_RELEASE=stable/APP_RELEASE='${REL_VERSION}'/g' deployments/cli/community/variables.env
 
       - name: Upload Assets
-        uses: actions/upload-artifact@v4
+        uses: actions/upload-artifact@v7
         with:
           name: community-assets
           path: |
@@ -381,7 +381,7 @@ jobs:
       REL_VERSION: ${{ needs.branch_build_setup.outputs.release_version }}
     steps:
       - name: Checkout
-        uses: actions/checkout@v4
+        uses: actions/checkout@v6
 
       - name: Update Assets
         run: |
@@ -391,12 +391,13 @@ jobs:
 
       - name: Create Release
         id: create_release
-        uses: softprops/action-gh-release@v2.1.0
+        uses: softprops/action-gh-release@v2.6.1
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} # This token is provided by Actions, you do not need to create your own token
         with:
           tag_name: ${{ env.REL_VERSION }}
           name: ${{ env.REL_VERSION }}
+          target_commitish: ${{ github.sha }}
           draft: false
           prerelease: ${{ env.IS_PRERELEASE }}
           generate_release_notes: true
diff --git a/.github/workflows/check-version.yml b/.github/workflows/check-version.yml
index 855ee359f..e32581f2e 100644
--- a/.github/workflows/check-version.yml
+++ b/.github/workflows/check-version.yml
@@ -10,13 +10,13 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v4
+        uses: actions/checkout@v6
         with:
           ref: ${{ github.head_ref }}
           fetch-depth: 0
 
       - name: Setup Node.js
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v6
 
       - name: Get PR Branch version
         run: echo "PR_VERSION=$(node -p "require('./package.json').version")" >> $GITHUB_ENV
diff --git a/.github/workflows/codeql.yml b/.github/workflows/codeql.yml
index e3aba5cf1..a645c192f 100644
--- a/.github/workflows/codeql.yml
+++ b/.github/workflows/codeql.yml
@@ -20,43 +20,20 @@ jobs:
       fail-fast: false
       matrix:
         language: ["python", "javascript"]
-        # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python', 'ruby' ]
-        # Use only 'java' to analyze code written in Java, Kotlin or both
-        # Use only 'javascript' to analyze code written in JavaScript, TypeScript or both
-        # Learn more about CodeQL language support at https://aka.ms/codeql-docs/language-support
 
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v4
+        uses: actions/checkout@v6
 
-      # Initializes the CodeQL tools for scanning.
       - name: Initialize CodeQL
-        uses: github/codeql-action/init@v3
+        uses: github/codeql-action/init@v4
         with:
           languages: ${{ matrix.language }}
-          # If you wish to specify custom queries, you can do so here or in a config file.
-          # By default, queries listed here will override any specified in a config file.
-          # Prefix the list here with "+" to use these queries and those in the config file.
 
-          # For more details on CodeQL's query packs, refer to: https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/configuring-code-scanning#using-queries-in-ql-packs
-          # queries: security-extended,security-and-quality
-
-      # Autobuild attempts to build any compiled languages (C/C++, C#, Go, Java, or Swift).
-      # If this step fails, then you should remove it and run the build manually (see below)
       - name: Autobuild
-        uses: github/codeql-action/autobuild@v3
-
-      # ℹ️ Command-line programs to run using the OS shell.
-      # 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun
-
-      #   If the Autobuild fails above, remove it and uncomment the following three lines.
-      #   modify them (or add more) to build your code if your project, please refer to the EXAMPLE below for guidance.
-
-      # - run: |
-      #     echo "Run, Build Application using script"
-      #     ./location_of_script_within_repo/buildscript.sh
+        uses: github/codeql-action/autobuild@v4
 
       - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@v3
+        uses: github/codeql-action/analyze@v4
         with:
           category: "/language:${{matrix.language}}"
diff --git a/.github/workflows/codespell.yml b/.github/workflows/codespell.yml
deleted file mode 100644
index ca87dc934..000000000
--- a/.github/workflows/codespell.yml
+++ /dev/null
@@ -1,25 +0,0 @@
-# Codespell configuration is within .codespellrc
----
-name: Codespell
-
-on:
-  push:
-    branches: [preview]
-  pull_request:
-    branches: [preview]
-
-permissions:
-  contents: read
-
-jobs:
-  codespell:
-    name: Check for spelling errors
-    runs-on: ubuntu-latest
-
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-      - name: Annotate locations with typos
-        uses: codespell-project/codespell-problem-matcher@v1
-      - name: Codespell
-        uses: codespell-project/actions-codespell@v2
diff --git a/.github/workflows/copyright-check.yml b/.github/workflows/copyright-check.yml
new file mode 100644
index 000000000..b406833a8
--- /dev/null
+++ b/.github/workflows/copyright-check.yml
@@ -0,0 +1,45 @@
+name: Copy Right Check
+
+on:
+    workflow_dispatch:
+    pull_request:
+        branches:
+            - "preview"
+        types:
+            - "opened"
+            - "synchronize"
+            - "ready_for_review"
+            - "review_requested"
+            - "reopened"
+
+jobs:
+    license-check:
+        name: Copy Right Check
+        runs-on: ubuntu-latest
+        steps:
+            - name: Checkout repository
+              uses: actions/checkout@v6
+
+            - name: Set up Go
+              uses: actions/setup-go@v6
+              with:
+                  go-version: "1.22"
+
+            - name: Install addlicense
+              run: |
+                  go install github.com/google/addlicense@latest
+                  echo "$(go env GOPATH)/bin" >> $GITHUB_PATH
+
+            - name: Check Copyright For Python Files
+              run: |
+                  set -e
+                  echo "Running copyright check..."
+                  addlicense -check -f COPYRIGHT.txt -ignore "**/migrations/**" $(git ls-files '*.py')
+                  echo "Copyright check passed."
+
+            - name: Check Copyright For TypeScript Files
+              run: |
+                  set -e
+                  echo "Running copyright check..."
+                  addlicense -check -f COPYRIGHT.txt -ignore "**/*.config.ts" -ignore "**/*.d.ts" $(git ls-files '*.ts' '*.tsx')
+                  echo "Copyright check passed."
diff --git a/.github/workflows/feature-deployment.yml b/.github/workflows/feature-deployment.yml
index dad3489df..c0740c517 100644
--- a/.github/workflows/feature-deployment.yml
+++ b/.github/workflows/feature-deployment.yml
@@ -48,7 +48,7 @@ jobs:
 
       - id: checkout_files
         name: Checkout Files
-        uses: actions/checkout@v4
+        uses: actions/checkout@v6
 
   full_build_push:
     runs-on: ubuntu-22.04
@@ -63,23 +63,23 @@ jobs:
       BUILDX_ENDPOINT: ${{ needs.branch_build_setup.outputs.gh_buildx_endpoint }}
     steps:
       - name: Login to Docker Hub
-        uses: docker/login-action@v3
+        uses: docker/login-action@v4
         with:
           username: ${{ secrets.DOCKERHUB_USERNAME }}
           password: ${{ secrets.DOCKERHUB_TOKEN }}
 
       - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3
+        uses: docker/setup-buildx-action@v4
         with:
           driver: ${{ env.BUILDX_DRIVER }}
           version: ${{ env.BUILDX_VERSION }}
           endpoint: ${{ env.BUILDX_ENDPOINT }}
 
       - name: Check out the repo
-        uses: actions/checkout@v4
+        uses: actions/checkout@v6
 
       - name: Build and Push to Docker Hub
-        uses: docker/build-push-action@v6.9.0
+        uses: docker/build-push-action@v7.0.0
         with:
           context: .
           file: ./aio/Dockerfile-app
@@ -112,7 +112,7 @@ jobs:
           sudo apt-get install -y python3-pip
           pip3 install awscli
       - name: Tailscale
-        uses: tailscale/github-action@v2
+        uses: tailscale/github-action@v4
         with:
           oauth-client-id: ${{ secrets.TAILSCALE_OAUTH_CLIENT_ID }}
           oauth-secret: ${{ secrets.TAILSCALE_OAUTH_SECRET }}
diff --git a/.github/workflows/pull-request-build-lint-api.yml b/.github/workflows/pull-request-build-lint-api.yml
index 11612207b..28a623f8e 100644
--- a/.github/workflows/pull-request-build-lint-api.yml
+++ b/.github/workflows/pull-request-build-lint-api.yml
@@ -27,11 +27,13 @@ jobs:
       github.event.pull_request.draft == false &&
       github.event.pull_request.requested_reviewers != null
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v6
       - name: Set up Python
-        uses: actions/setup-python@v5
+        uses: actions/setup-python@v6
         with:
           python-version: "3.12.x"
+          cache: 'pip'
+          cache-dependency-path: 'apps/api/requirements.txt'
       - name: Install Pylint
         run: python -m pip install ruff
       - name: Install API Dependencies
diff --git a/.github/workflows/pull-request-build-lint-web-apps.yml b/.github/workflows/pull-request-build-lint-web-apps.yml
index 7ddaceb79..719f10118 100644
--- a/.github/workflows/pull-request-build-lint-web-apps.yml
+++ b/.github/workflows/pull-request-build-lint-web-apps.yml
@@ -8,8 +8,6 @@ on:
     types:
       - "opened"
       - "synchronize"
-      - "ready_for_review"
-      - "review_requested"
       - "reopened"
 
 concurrency:
@@ -17,10 +15,11 @@ concurrency:
   cancel-in-progress: true
 
 jobs:
-  build-and-lint:
-    name: Build and lint web apps
+  # Format check has no build dependencies - run immediately in parallel
+  check-format:
+    name: check:format
     runs-on: ubuntu-latest
-    timeout-minutes: 25
+    timeout-minutes: 10
     if: |
       github.event.pull_request.draft == false &&
       github.event.pull_request.requested_reviewers != null
@@ -29,28 +28,178 @@ jobs:
       TURBO_SCM_HEAD: ${{ github.sha }}
     steps:
       - name: Checkout code
-        uses: actions/checkout@v4
+        uses: actions/checkout@v6
         with:
           fetch-depth: 50
           filter: blob:none
 
       - name: Set up Node.js
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v6
 
       - name: Enable Corepack and pnpm
         run: corepack enable pnpm
 
+      - name: Get pnpm store directory
+        shell: bash
+        run: echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+
+      - name: Cache pnpm store
+        uses: actions/cache@v5
+        with:
+          path: ${{ env.STORE_PATH }}
+          key: pnpm-store-${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            pnpm-store-${{ runner.os }}-
+
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
 
-      - name: Build Affected
-        run: pnpm turbo run build --affected
-
-      - name: Lint Affected
-        run: pnpm turbo run check:lint --affected
-
-      - name: Check Affected format
+      - name: Check formatting
         run: pnpm turbo run check:format --affected
 
-      - name: Check Affected types
+  # Build packages - required for lint and type checks
+  build:
+    name: Build packages
+    runs-on: ubuntu-latest
+    timeout-minutes: 15
+    if: |
+      github.event.pull_request.draft == false &&
+      github.event.pull_request.requested_reviewers != null
+    env:
+      TURBO_SCM_BASE: ${{ github.event.pull_request.base.sha }}
+      TURBO_SCM_HEAD: ${{ github.sha }}
+      NODE_OPTIONS: "--max-old-space-size=4096"
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v6
+        with:
+          fetch-depth: 50
+          filter: blob:none
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v6
+
+      - name: Enable Corepack and pnpm
+        run: corepack enable pnpm
+
+      - name: Get pnpm store directory
+        shell: bash
+        run: echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+
+      - name: Cache pnpm store
+        uses: actions/cache@v5
+        with:
+          path: ${{ env.STORE_PATH }}
+          key: pnpm-store-${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            pnpm-store-${{ runner.os }}-
+
+      - name: Restore Turbo cache
+        uses: actions/cache/restore@v5
+        with:
+          path: .turbo
+          key: turbo-${{ runner.os }}-${{ github.event.pull_request.base.sha }}-${{ github.sha }}
+          restore-keys: |
+            turbo-${{ runner.os }}-${{ github.event.pull_request.base.sha }}-
+            turbo-${{ runner.os }}-
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Build packages
+        run: pnpm turbo run build --affected
+
+      - name: Save Turbo cache
+        uses: actions/cache/save@v5
+        with:
+          path: .turbo
+          key: turbo-${{ runner.os }}-${{ github.event.pull_request.base.sha }}-${{ github.sha }}
+
+  # Lint check - no build dependency, OxLint is a standalone Rust binary
+  check-lint:
+    name: check:lint
+    runs-on: ubuntu-latest
+    timeout-minutes: 10
+    if: |
+      github.event.pull_request.draft == false &&
+      github.event.pull_request.requested_reviewers != null
+    env:
+      TURBO_SCM_BASE: ${{ github.event.pull_request.base.sha }}
+      TURBO_SCM_HEAD: ${{ github.sha }}
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v6
+        with:
+          fetch-depth: 50
+          filter: blob:none
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v6
+
+      - name: Enable Corepack and pnpm
+        run: corepack enable pnpm
+
+      - name: Get pnpm store directory
+        shell: bash
+        run: echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+
+      - name: Cache pnpm store
+        uses: actions/cache@v5
+        with:
+          path: ${{ env.STORE_PATH }}
+          key: pnpm-store-${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            pnpm-store-${{ runner.os }}-
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Run check:lint
+        run: pnpm turbo run check:lint --affected
+
+  # Type check depends on build artifacts
+  check-types:
+    name: check:types
+    runs-on: ubuntu-latest
+    needs: build
+    timeout-minutes: 15
+    env:
+      TURBO_SCM_BASE: ${{ github.event.pull_request.base.sha }}
+      TURBO_SCM_HEAD: ${{ github.sha }}
+      NODE_OPTIONS: "--max-old-space-size=4096"
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v6
+        with:
+          fetch-depth: 50
+          filter: blob:none
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v6
+
+      - name: Enable Corepack and pnpm
+        run: corepack enable pnpm
+
+      - name: Get pnpm store directory
+        shell: bash
+        run: echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+
+      - name: Cache pnpm store
+        uses: actions/cache@v5
+        with:
+          path: ${{ env.STORE_PATH }}
+          key: pnpm-store-${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            pnpm-store-${{ runner.os }}-
+
+      - name: Restore Turbo cache
+        uses: actions/cache/restore@v5
+        with:
+          path: .turbo
+          key: turbo-${{ runner.os }}-${{ github.event.pull_request.base.sha }}-${{ github.sha }}
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Run check:types
         run: pnpm turbo run check:types --affected
diff --git a/.github/workflows/sync-repo-pr.yml b/.github/workflows/sync-repo-pr.yml
deleted file mode 100644
index 548ccbf42..000000000
--- a/.github/workflows/sync-repo-pr.yml
+++ /dev/null
@@ -1,52 +0,0 @@
-name: Create PR on Sync
-
-on:
-  workflow_dispatch:
-  push:
-    branches:
-      - "sync/**"
-
-env:
-  CURRENT_BRANCH: ${{ github.ref_name }}
-  TARGET_BRANCH: "preview" # The target branch that you would like to merge changes like develop
-  GITHUB_TOKEN: ${{ secrets.ACCESS_TOKEN }} # Personal access token required to modify contents and workflows
-  ACCOUNT_USER_NAME: ${{ vars.ACCOUNT_USER_NAME }}
-  ACCOUNT_USER_EMAIL: ${{ vars.ACCOUNT_USER_EMAIL }}
-
-jobs:
-  create_pull_request:
-    runs-on: ubuntu-latest
-    permissions:
-      pull-requests: write
-      contents: write
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v4
-        with:
-          fetch-depth: 0 # Fetch all history for all branches and tags
-
-      - name: Setup Git
-        run: |
-          git config user.name "$ACCOUNT_USER_NAME"
-          git config user.email "$ACCOUNT_USER_EMAIL"
-
-      - name: Setup GH CLI and Git Config
-        run: |
-          type -p curl >/dev/null || (sudo apt update && sudo apt install curl -y)
-          curl -fsSL https://cli.github.com/packages/githubcli-archive-keyring.gpg | sudo dd of=/usr/share/keyrings/githubcli-archive-keyring.gpg
-          sudo chmod go+r /usr/share/keyrings/githubcli-archive-keyring.gpg
-          echo "deb [arch=$(dpkg --print-architecture) signed-by=/usr/share/keyrings/githubcli-archive-keyring.gpg] https://cli.github.com/packages stable main" | sudo tee /etc/apt/sources.list.d/github-cli.list > /dev/null
-          sudo apt update
-          sudo apt install gh -y
-
-      - name: Create PR to Target Branch
-        run: |
-          # get all pull requests and check if there is already a PR
-          PR_EXISTS=$(gh pr list --base $TARGET_BRANCH --head $CURRENT_BRANCH --state open --json number | jq '.[] | .number')
-          if [ -n "$PR_EXISTS" ]; then
-            echo "Pull Request already exists: $PR_EXISTS"
-          else
-            echo "Creating new pull request"
-            PR_URL=$(gh pr create --base $TARGET_BRANCH --head $CURRENT_BRANCH --title "${{ vars.SYNC_PR_TITLE }}" --body "")
-            echo "Pull Request created: $PR_URL"
-          fi
diff --git a/.github/workflows/sync-repo.yml b/.github/workflows/sync-repo.yml
deleted file mode 100644
index 5d6c72cb7..000000000
--- a/.github/workflows/sync-repo.yml
+++ /dev/null
@@ -1,44 +0,0 @@
-name: Sync Repositories
-
-on:
-  workflow_dispatch:
-  push:
-    branches:
-      - preview
-
-env:
-  SOURCE_BRANCH_NAME: ${{ github.ref_name }}
-
-jobs:
-  sync_changes:
-    runs-on: ubuntu-22.04
-    permissions:
-      pull-requests: write
-      contents: read
-    steps:
-      - name: Checkout Code
-        uses: actions/checkout@v4
-        with:
-          persist-credentials: false
-          fetch-depth: 0
-
-      - name: Setup GH CLI
-        run: |
-          type -p curl >/dev/null || (sudo apt update && sudo apt install curl -y)
-          curl -fsSL https://cli.github.com/packages/githubcli-archive-keyring.gpg | sudo dd of=/usr/share/keyrings/githubcli-archive-keyring.gpg
-          sudo chmod go+r /usr/share/keyrings/githubcli-archive-keyring.gpg
-          echo "deb [arch=$(dpkg --print-architecture) signed-by=/usr/share/keyrings/githubcli-archive-keyring.gpg] https://cli.github.com/packages stable main" | sudo tee /etc/apt/sources.list.d/github-cli.list > /dev/null
-          sudo apt update
-          sudo apt install gh -y
-
-      - name: Push Changes to Target Repo
-        env:
-          GH_TOKEN: ${{ secrets.ACCESS_TOKEN }}
-        run: |
-          TARGET_REPO="${{ vars.SYNC_TARGET_REPO }}"
-          TARGET_BRANCH="${{ vars.SYNC_TARGET_BRANCH_NAME }}"
-          SOURCE_BRANCH="${{ env.SOURCE_BRANCH_NAME }}"
-
-          git checkout $SOURCE_BRANCH
-          git remote add target-origin-a "https://$GH_TOKEN@github.com/$TARGET_REPO.git"
-          git push target-origin-a $SOURCE_BRANCH:$TARGET_BRANCH
diff --git a/.gitignore b/.gitignore
index f0093a0e6..e2e6441ba 100644
--- a/.gitignore
+++ b/.gitignore
@@ -105,10 +105,8 @@ CLAUDE.md
 
 build/
 .react-router/
-AGENTS.md
 
 build/
 .react-router/
-AGENTS.md
 temp/
 scripts/
diff --git a/.prettierrc b/.oxfmtrc.json
similarity index 52%
rename from .prettierrc
rename to .oxfmtrc.json
index ef155d4a1..cf1c0efa7 100644
--- a/.prettierrc
+++ b/.oxfmtrc.json
@@ -1,5 +1,11 @@
 {
-  "$schema": "https://json.schemastore.org/prettierrc",
+  "printWidth": 120,
+  "tabWidth": 2,
+  "trailingComma": "es5",
+  "sortTailwindcss": {
+    "stylesheet": "packages/tailwind-config/index.css",
+    "functions": ["cn", "clsx", "cva"]
+  },
   "overrides": [
     {
       "files": ["packages/codemods/**/*"],
@@ -7,9 +13,5 @@
         "printWidth": 80
       }
     }
-  ],
-  "plugins": ["@prettier/plugin-oxc"],
-  "printWidth": 120,
-  "tabWidth": 2,
-  "trailingComma": "es5"
+  ]
 }
diff --git a/.oxlintrc.json b/.oxlintrc.json
new file mode 100644
index 000000000..83ab91d8e
--- /dev/null
+++ b/.oxlintrc.json
@@ -0,0 +1,53 @@
+{
+  "$schema": "./node_modules/oxlint/configuration_schema.json",
+  "plugins": ["react", "typescript", "jsx-a11y", "import", "promise", "unicorn", "oxc"],
+  "categories": {
+    "correctness": "warn",
+    "suspicious": "warn",
+    "perf": "warn"
+  },
+  "env": {
+    "browser": true,
+    "node": true,
+    "es2024": true
+  },
+  "settings": {
+    "react": {
+      "version": "18.3"
+    },
+    "jsx-a11y": {
+      "polymorphicPropName": "as"
+    }
+  },
+  "ignorePatterns": [
+    ".cache/**",
+    ".next/**",
+    ".react-router/**",
+    ".storybook/**",
+    ".turbo/**",
+    ".vite/**",
+    "*.config.{js,mjs,cjs,ts}",
+    "build/**",
+    "coverage/**",
+    "dist/**",
+    "**/public/**",
+    "storybook-static/**"
+  ],
+  "rules": {
+    "react/react-in-jsx-scope": "off",
+    "react/prop-types": "off",
+    "unicorn/filename-case": "off",
+    "unicorn/no-null": "off",
+    "unicorn/prevent-abbreviations": "off",
+    "no-unused-vars": [
+      "warn",
+      {
+        "argsIgnorePattern": "^_",
+        "varsIgnorePattern": "^_",
+        "caughtErrorsIgnorePattern": "^_",
+        "destructuredArrayIgnorePattern": "^_",
+        "ignoreRestSiblings": true
+      }
+    ]
+  }
+}
diff --git a/AGENTS.md b/AGENTS.md
new file mode 100644
index 000000000..3de0b8037
--- /dev/null
+++ b/AGENTS.md
@@ -0,0 +1,24 @@
+# Agent Development Guide
+
+## Commands
+
+- `pnpm dev` - Start all dev servers (web:3000, admin:3001)
+- `pnpm build` - Build all packages and apps
+- `pnpm check` - Run all checks (format, lint, types)
+- `pnpm check:lint` - OxLint across all packages
+- `pnpm check:types` - TypeScript type checking
+- `pnpm fix` - Auto-fix format and lint issues
+- `pnpm turbo run <command> --filter=<package>` - Target specific package/app
+- `pnpm --filter=@plane/ui storybook` - Start Storybook on port 6006
+
+## Code Style
+
+- **Imports**: Use `workspace:*` for internal packages, `catalog:` for external deps
+- **TypeScript**: Strict mode enabled, all files must be typed
+- **Formatting**: oxfmt, run `pnpm fix:format`
+- **Linting**: OxLint with shared `.oxlintrc.json` config
+- **Naming**: camelCase for variables/functions, PascalCase for components/types
+- **Error Handling**: Use try-catch with proper error types, log errors appropriately
+- **State Management**: MobX stores in `packages/shared-state`, reactive patterns
+- **Testing**: All features require unit tests, use existing test framework per package
+- **Components**: Build in `@plane/ui` with Storybook for isolated development
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 49c61547d..d0f3d75d2 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -91,7 +91,7 @@ If you would like to _implement_ it, an issue with your proposal must be submitt
 To ensure consistency throughout the source code, please keep these rules in mind as you are working:
 
 - All features or bug fixes must be tested by one or more specs (unit-tests).
-- We lint with [ESLint 9](https://eslint.org/docs/latest/) using the shared `eslint.config.mjs` (type-aware via `typescript-eslint`) and format with [Prettier](https://prettier.io/) using `prettier.config.cjs`.
+- We lint with [OxLint](https://oxc.rs/docs/guide/usage/linter) using the shared `.oxlintrc.json` and format with [oxfmt](https://oxc.rs/docs/guide/usage/formatter) using `.oxfmtrc.json`.
 
 ## Ways to contribute
 
@@ -244,4 +244,4 @@ Happy translating! 🌍✨
 
 ## Need help? Questions and suggestions
 
-Questions, suggestions, and thoughts are most welcome. We can also be reached in our [Discord Server](https://discord.com/invite/A92xrEGCge).
+Questions, suggestions, and thoughts are most welcome. We can also be reached in our [Forum](https://forum.plane.so).
diff --git a/COPYRIGHT.txt b/COPYRIGHT.txt
new file mode 100644
index 000000000..2a6fd91ff
--- /dev/null
+++ b/COPYRIGHT.txt
@@ -0,0 +1,3 @@
+Copyright (c) 2023-present Plane Software, Inc. and contributors
+SPDX-License-Identifier: AGPL-3.0-only
+See the LICENSE file for details.
\ No newline at end of file
diff --git a/COPYRIGHT_CHECK.md b/COPYRIGHT_CHECK.md
new file mode 100644
index 000000000..a72b11a24
--- /dev/null
+++ b/COPYRIGHT_CHECK.md
@@ -0,0 +1,34 @@
+## Copyright check
+
+To verify that all tracked Python files contain the correct copyright header for **Plane Software Inc.** for the year **2023**, run this command from the repository root:
+
+```bash
+addlicense --check -f COPYRIGHT.txt -ignore "**/migrations/**" $(git ls-files '*.py')
+```
+
+#### To Apply Changes
+
+python files
+
+```bash
+addlicense -v -f COPYRIGHT.txt -ignore "**/migrations/**" $(git ls-files '*.py')
+```
+
+ts and tsx files in a specific app
+
+```bash
+addlicense -v -f COPYRIGHT.txt \
+  -ignore "**/*.config.ts" \
+  -ignore "**/*.d.ts" \
+  $(git ls-files 'packages/*.ts')
+```
+
+Note: Please make sure ts command is running on specific folder, running it for the whole mono repo is crashing os processes.
+
+#### Other Options
+
+- **`addlicense -check`**: runs in check-only mode and fails if any file is missing or has an incorrect header.
+- **`-c "Plane Software Inc."`**: sets the copyright holder.
+- **`-f LICENSE.txt`**: uses the contents and format defined in `LICENSE.txt` as the header template.
+- **`-y 2023`**: sets the year in the header.
+- **`$(git ls-files '*.py')`**: restricts the check to Python files tracked in git.
diff --git a/README.md b/README.md
index f6b364bef..d2117149d 100644
--- a/README.md
+++ b/README.md
@@ -7,16 +7,9 @@
 </p>
 <p align="center"><b>Modern project management for all teams</b></p>
 
-<p align="center">
-<a href="https://discord.com/invite/A92xrEGCge">
-<img alt="Discord online members" src="https://img.shields.io/discord/1031547764020084846?color=5865F2&label=Discord&style=for-the-badge" />
-</a>
-<img alt="Commit activity per month" src="https://img.shields.io/github/commit-activity/m/makeplane/plane?style=for-the-badge" />
-</p>
-
 <p align="center">
     <a href="https://plane.so/"><b>Website</b></a> •
-    <a href="https://github.com/makeplane/plane/releases"><b>Releases</b></a> •
+    <a href="https://forum.plane.so"><b>Forum</b></a> •
     <a href="https://twitter.com/planepowers"><b>Twitter</b></a> •
     <a href="https://docs.plane.so/"><b>Documentation</b></a>
 </p>
@@ -33,7 +26,7 @@
 
 Meet [Plane](https://plane.so/), an open-source project management tool to track issues, run ~sprints~ cycles, and manage product roadmaps without the chaos of managing the tool itself. 🧘‍♀️
 
-> Plane is evolving every day. Your suggestions, ideas, and reported bugs help us immensely. Do not hesitate to join in the conversation on [Discord](https://discord.com/invite/A92xrEGCge) or raise a GitHub issue. We read everything and respond to most.
+> Plane is evolving every day. Your suggestions, ideas, and reported bugs help us immensely. Do not hesitate to join in the conversation on [Forum](https://forum.plane.so) or raise a GitHub issue. We read everything and respond to most.
 
 ## 🚀 Installation
 
@@ -54,7 +47,7 @@ Getting started with Plane is simple. Choose the setup that works best for you:
 
 ## 🌟 Features
 
-- **Issues**
+- **Work Items**
   Efficiently create and manage tasks with a robust rich text editor that supports file uploads. Enhance organization and tracking by adding sub-properties and referencing related issues.
 
 - **Cycles**
@@ -72,15 +65,13 @@ Getting started with Plane is simple. Choose the setup that works best for you:
 - **Analytics**
   Access real-time insights across all your Plane data. Visualize trends, remove blockers, and keep your projects moving forward.
 
-- **Drive** (_coming soon_): The drive helps you share documents, images, videos, or any other files that make sense to you or your team and align on the problem/solution.
-
 ## 🛠️ Local development
 
 See [CONTRIBUTING](./CONTRIBUTING.md)
 
 ## ⚙️ Built with
 
-[![Next JS](https://img.shields.io/badge/next.js-000000?style=for-the-badge&logo=nextdotjs&logoColor=white)](https://nextjs.org/)
+[![React Router](https://img.shields.io/badge/-React%20Router-CA4245?logo=react-router&style=for-the-badge&logoColor=white)](https://reactrouter.com/)
 [![Django](https://img.shields.io/badge/Django-092E20?style=for-the-badge&logo=django&logoColor=green)](https://www.djangoproject.com/)
 [![Node JS](https://img.shields.io/badge/node.js-339933?style=for-the-badge&logo=Node.js&logoColor=white)](https://nodejs.org/en)
 
@@ -138,7 +129,7 @@ Explore Plane's [product documentation](https://docs.plane.so/) and [developer d
 
 ## ❤️ Community
 
-Join the Plane community on [GitHub Discussions](https://github.com/orgs/makeplane/discussions) and our [Discord server](https://discord.com/invite/A92xrEGCge). We follow a [Code of conduct](https://github.com/makeplane/plane/blob/master/CODE_OF_CONDUCT.md) in all our community channels.
+Join the Plane community on [GitHub Discussions](https://github.com/orgs/makeplane/discussions) and our [Forum](https://forum.plane.so). We follow a [Code of conduct](https://github.com/makeplane/plane/blob/master/CODE_OF_CONDUCT.md) in all our community channels.
 
 Feel free to ask questions, report bugs, participate in discussions, share ideas, request features, or showcase your projects. We’d love to hear from you!
 
@@ -154,7 +145,7 @@ There are many ways you can contribute to Plane:
 
 - Report [bugs](https://github.com/makeplane/plane/issues/new?assignees=srinivaspendem%2Cpushya22&labels=%F0%9F%90%9Bbug&projects=&template=--bug-report.yaml&title=%5Bbug%5D%3A+) or submit [feature requests](https://github.com/makeplane/plane/issues/new?assignees=srinivaspendem%2Cpushya22&labels=%E2%9C%A8feature&projects=&template=--feature-request.yaml&title=%5Bfeature%5D%3A+).
 - Review the [documentation](https://docs.plane.so/) and submit [pull requests](https://github.com/makeplane/docs) to improve it—whether it's fixing typos or adding new content.
-- Talk or write about Plane or any other ecosystem integration and [let us know](https://discord.com/invite/A92xrEGCge)!
+- Talk or write about Plane or any other ecosystem integration and [let us know](https://forum.plane.so)!
 - Show your support by upvoting [popular feature requests](https://github.com/makeplane/plane/issues).
 
 Please read [CONTRIBUTING.md](https://github.com/makeplane/plane/blob/master/CONTRIBUTING.md) for details on the process for submitting pull requests to us.
diff --git a/apps/admin/Dockerfile.admin b/apps/admin/Dockerfile.admin
index 458d00a2e..19ad2c392 100644
--- a/apps/admin/Dockerfile.admin
+++ b/apps/admin/Dockerfile.admin
@@ -13,7 +13,7 @@ RUN corepack enable pnpm
 
 FROM base AS builder
 
-RUN pnpm add -g turbo@2.6.3
+RUN pnpm add -g turbo@2.9.4
 
 COPY . .
 
diff --git a/apps/admin/app/(all)/(dashboard)/ai/form.tsx b/apps/admin/app/(all)/(dashboard)/ai/form.tsx
index 568289033..affbda480 100644
--- a/apps/admin/app/(all)/(dashboard)/ai/form.tsx
+++ b/apps/admin/app/(all)/(dashboard)/ai/form.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useForm } from "react-hook-form";
 import { Lightbulb } from "lucide-react";
 import { Button } from "@plane/propel/button";
@@ -42,7 +48,7 @@ export function InstanceAIForm(props: IInstanceAIForm) {
           <a
             href="https://platform.openai.com/docs/models/overview"
             target="_blank"
-            className="text-custom-primary-100 hover:underline"
+            className="text-accent-primary hover:underline"
             rel="noreferrer"
           >
             Learn more
@@ -63,7 +69,7 @@ export function InstanceAIForm(props: IInstanceAIForm) {
           <a
             href="https://platform.openai.com/api-keys"
             target="_blank"
-            className="text-custom-primary-100 hover:underline"
+            className="text-accent-primary hover:underline"
             rel="noreferrer"
           >
             here.
@@ -94,8 +100,8 @@ export function InstanceAIForm(props: IInstanceAIForm) {
     <div className="space-y-8">
       <div className="space-y-3">
         <div>
-          <div className="pb-1 text-xl font-medium text-custom-text-100">OpenAI</div>
-          <div className="text-sm font-normal text-custom-text-300">If you use ChatGPT, this is for you.</div>
+          <div className="pb-1 text-18 font-medium text-primary">OpenAI</div>
+          <div className="text-13 font-regular text-tertiary">If you use ChatGPT, this is for you.</div>
         </div>
         <div className="grid-col grid w-full grid-cols-1 items-center justify-between gap-x-12 gap-y-8 lg:grid-cols-3">
           {aiFormFields.map((field) => (
@@ -114,16 +120,16 @@ export function InstanceAIForm(props: IInstanceAIForm) {
         </div>
       </div>
 
-      <div className="space-y-4">
-        <Button variant="primary" onClick={handleSubmit(onSubmit)} loading={isSubmitting}>
-          {isSubmitting ? "Saving..." : "Save changes"}
+      <div className="flex flex-col items-start gap-4">
+        <Button variant="primary" size="lg" onClick={handleSubmit(onSubmit)} loading={isSubmitting}>
+          {isSubmitting ? "Saving" : "Save changes"}
         </Button>
 
-        <div className="relative inline-flex items-center gap-2 rounded border border-custom-primary-100/20 bg-custom-primary-100/10 px-4 py-2 text-xs text-custom-primary-200">
-          <Lightbulb height="14" width="14" />
+        <div className="relative inline-flex items-center gap-1.5 rounded-sm border border-accent-subtle bg-accent-subtle px-4 py-2 text-caption-sm-regular text-accent-secondary">
+          <Lightbulb className="size-4" />
           <div>
             If you have a preferred AI models vendor, please get in{" "}
-            <a className="underline font-medium" href="https://plane.so/contact">
+            <a className="font-medium underline" href="https://plane.so/contact">
               touch with us.
             </a>
           </div>
diff --git a/apps/admin/app/(all)/(dashboard)/ai/page.tsx b/apps/admin/app/(all)/(dashboard)/ai/page.tsx
index ebdf40528..dec320098 100644
--- a/apps/admin/app/(all)/(dashboard)/ai/page.tsx
+++ b/apps/admin/app/(all)/(dashboard)/ai/page.tsx
@@ -1,10 +1,19 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import useSWR from "swr";
 import { Loader } from "@plane/ui";
+// components
+import { PageWrapper } from "@/components/common/page-wrapper";
 // hooks
 import { useInstance } from "@/hooks/store";
-// components
+// types
 import type { Route } from "./+types/page";
+// local
 import { InstanceAIForm } from "./form";
 
 const InstanceAIPage = observer(function InstanceAIPage(_props: Route.ComponentProps) {
@@ -14,30 +23,25 @@ const InstanceAIPage = observer(function InstanceAIPage(_props: Route.ComponentP
   useSWR("INSTANCE_CONFIGURATIONS", () => fetchInstanceConfigurations());
 
   return (
-    <>
-      <div className="relative container mx-auto w-full h-full p-4 py-4 space-y-6 flex flex-col">
-        <div className="border-b border-custom-border-100 mx-4 py-4 space-y-1 flex-shrink-0">
-          <div className="text-xl font-medium text-custom-text-100">AI features for all your workspaces</div>
-          <div className="text-sm font-normal text-custom-text-300">
-            Configure your AI API credentials so Plane AI features are turned on for all your workspaces.
+    <PageWrapper
+      header={{
+        title: "AI features for all your workspaces",
+        description: "Configure your AI API credentials so Plane AI features are turned on for all your workspaces.",
+      }}
+    >
+      {formattedConfig ? (
+        <InstanceAIForm config={formattedConfig} />
+      ) : (
+        <Loader className="space-y-8">
+          <Loader.Item height="50px" width="40%" />
+          <div className="grid w-2/3 grid-cols-2 gap-x-8 gap-y-4">
+            <Loader.Item height="50px" />
+            <Loader.Item height="50px" />
           </div>
-        </div>
-        <div className="flex-grow overflow-hidden overflow-y-scroll vertical-scrollbar scrollbar-md px-4">
-          {formattedConfig ? (
-            <InstanceAIForm config={formattedConfig} />
-          ) : (
-            <Loader className="space-y-8">
-              <Loader.Item height="50px" width="40%" />
-              <div className="w-2/3 grid grid-cols-2 gap-x-8 gap-y-4">
-                <Loader.Item height="50px" />
-                <Loader.Item height="50px" />
-              </div>
-              <Loader.Item height="50px" width="20%" />
-            </Loader>
-          )}
-        </div>
-      </div>
-    </>
+          <Loader.Item height="50px" width="20%" />
+        </Loader>
+      )}
+    </PageWrapper>
   );
 });
 
diff --git a/apps/admin/app/(all)/(dashboard)/authentication/gitea/form.tsx b/apps/admin/app/(all)/(dashboard)/authentication/gitea/form.tsx
index 15b97b588..f05464a41 100644
--- a/apps/admin/app/(all)/(dashboard)/authentication/gitea/form.tsx
+++ b/apps/admin/app/(all)/(dashboard)/authentication/gitea/form.tsx
@@ -1,18 +1,25 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useState } from "react";
 import { isEmpty } from "lodash-es";
 import Link from "next/link";
 import { useForm } from "react-hook-form";
 // plane internal packages
 import { API_BASE_URL } from "@plane/constants";
+import { Button, getButtonStyling } from "@plane/propel/button";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { IFormattedInstanceConfiguration, TInstanceGiteaAuthenticationConfigurationKeys } from "@plane/types";
-import { Button, getButtonStyling } from "@plane/ui";
-import { cn } from "@plane/utils";
 // components
 import { CodeBlock } from "@/components/common/code-block";
 import { ConfirmDiscardModal } from "@/components/common/confirm-discard-modal";
 import type { TControllerInputFormField } from "@/components/common/controller-input";
 import { ControllerInput } from "@/components/common/controller-input";
+import type { TControllerSwitchFormField } from "@/components/common/controller-switch";
+import { ControllerSwitch } from "@/components/common/controller-switch";
 import type { TCopyField } from "@/components/common/copy-field";
 import { CopyField } from "@/components/common/copy-field";
 // hooks
@@ -41,6 +48,7 @@ export function InstanceGiteaConfigForm(props: Props) {
       GITEA_HOST: config["GITEA_HOST"] || "https://gitea.com",
       GITEA_CLIENT_ID: config["GITEA_CLIENT_ID"],
       GITEA_CLIENT_SECRET: config["GITEA_CLIENT_SECRET"],
+      ENABLE_GITEA_SYNC: config["ENABLE_GITEA_SYNC"] || "0",
     },
   });
 
@@ -69,7 +77,7 @@ export function InstanceGiteaConfigForm(props: Props) {
             tabIndex={-1}
             href="https://gitea.com/user/settings/applications"
             target="_blank"
-            className="text-custom-primary-100 hover:underline"
+            className="text-accent-primary hover:underline"
             rel="noreferrer"
           >
             Gitea OAuth application settings.
@@ -91,7 +99,7 @@ export function InstanceGiteaConfigForm(props: Props) {
             tabIndex={-1}
             href="https://gitea.com/user/settings/applications"
             target="_blank"
-            className="text-custom-primary-100 hover:underline"
+            className="text-accent-primary hover:underline"
             rel="noreferrer"
           >
             Gitea OAuth application settings.
@@ -104,6 +112,11 @@ export function InstanceGiteaConfigForm(props: Props) {
     },
   ];
 
+  const GITEA_FORM_SWITCH_FIELD: TControllerSwitchFormField<GiteaConfigFormValues> = {
+    name: "ENABLE_GITEA_SYNC",
+    label: "Gitea",
+  };
+
   const GITEA_SERVICE_FIELD: TCopyField[] = [
     {
       key: "Callback_URI",
@@ -117,7 +130,7 @@ export function InstanceGiteaConfigForm(props: Props) {
             tabIndex={-1}
             href={`${control._formValues.GITEA_HOST || "https://gitea.com"}/user/settings/applications`}
             target="_blank"
-            className="text-custom-primary-100 hover:underline"
+            className="text-accent-primary hover:underline"
             rel="noreferrer"
           >
             here.
@@ -130,20 +143,22 @@ export function InstanceGiteaConfigForm(props: Props) {
   const onSubmit = async (formData: GiteaConfigFormValues) => {
     const payload: Partial<GiteaConfigFormValues> = { ...formData };
 
-    await updateInstanceConfigurations(payload)
-      .then((response = []) => {
-        setToast({
-          type: TOAST_TYPE.SUCCESS,
-          title: "Done!",
-          message: "Your Gitea authentication is configured. You should test it now.",
-        });
-        reset({
-          GITEA_HOST: response.find((item) => item.key === "GITEA_HOST")?.value,
-          GITEA_CLIENT_ID: response.find((item) => item.key === "GITEA_CLIENT_ID")?.value,
-          GITEA_CLIENT_SECRET: response.find((item) => item.key === "GITEA_CLIENT_SECRET")?.value,
-        });
-      })
-      .catch((err) => console.error(err));
+    try {
+      const response = await updateInstanceConfigurations(payload);
+      setToast({
+        type: TOAST_TYPE.SUCCESS,
+        title: "Done!",
+        message: "Your Gitea authentication is configured. You should test it now.",
+      });
+      reset({
+        GITEA_HOST: response.find((item) => item.key === "GITEA_HOST")?.value,
+        GITEA_CLIENT_ID: response.find((item) => item.key === "GITEA_CLIENT_ID")?.value,
+        GITEA_CLIENT_SECRET: response.find((item) => item.key === "GITEA_CLIENT_SECRET")?.value,
+        ENABLE_GITEA_SYNC: response.find((item) => item.key === "ENABLE_GITEA_SYNC")?.value,
+      });
+    } catch (err) {
+      console.error(err);
+    }
   };
 
   const handleGoBack = (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
@@ -161,9 +176,9 @@ export function InstanceGiteaConfigForm(props: Props) {
         handleClose={() => setIsDiscardChangesModalOpen(false)}
       />
       <div className="flex flex-col gap-8">
-        <div className="grid grid-cols-2 gap-x-12 gap-y-8 w-full">
-          <div className="flex flex-col gap-y-4 col-span-2 md:col-span-1 pt-1">
-            <div className="pt-2.5 text-xl font-medium">Gitea-provided details for Plane</div>
+        <div className="grid w-full grid-cols-2 gap-x-12 gap-y-8">
+          <div className="col-span-2 flex flex-col gap-y-4 pt-1 md:col-span-1">
+            <div className="pt-2.5 text-18 font-medium">Gitea-provided details for Plane</div>
             {GITEA_FORM_FIELDS.map((field) => (
               <ControllerInput
                 key={field.key}
@@ -177,24 +192,27 @@ export function InstanceGiteaConfigForm(props: Props) {
                 required={field.required}
               />
             ))}
+            <ControllerSwitch control={control} field={GITEA_FORM_SWITCH_FIELD} />
             <div className="flex flex-col gap-1 pt-4">
               <div className="flex items-center gap-4">
-                <Button variant="primary" onClick={handleSubmit(onSubmit)} loading={isSubmitting} disabled={!isDirty}>
-                  {isSubmitting ? "Saving..." : "Save changes"}
-                </Button>
-                <Link
-                  href="/authentication"
-                  className={cn(getButtonStyling("neutral-primary", "md"), "font-medium")}
-                  onClick={handleGoBack}
+                <Button
+                  variant="primary"
+                  size="lg"
+                  onClick={(e) => void handleSubmit(onSubmit)(e)}
+                  loading={isSubmitting}
+                  disabled={!isDirty}
                 >
+                  {isSubmitting ? "Saving" : "Save changes"}
+                </Button>
+                <Link href="/authentication" className={getButtonStyling("secondary", "lg")} onClick={handleGoBack}>
                   Go back
                 </Link>
               </div>
             </div>
           </div>
           <div className="col-span-2 md:col-span-1">
-            <div className="flex flex-col gap-y-4 px-6 pt-1.5 pb-4 bg-custom-background-80/60 rounded-lg">
-              <div className="pt-2 text-xl font-medium">Plane-provided details for Gitea</div>
+            <div className="flex flex-col gap-y-4 rounded-lg bg-layer-1 px-6 pt-1.5 pb-4">
+              <div className="pt-2 text-18 font-medium">Plane-provided details for Gitea</div>
               {GITEA_SERVICE_FIELD.map((field) => (
                 <CopyField key={field.key} label={field.label} url={field.url} description={field.description} />
               ))}
diff --git a/apps/admin/app/(all)/(dashboard)/authentication/gitea/page.tsx b/apps/admin/app/(all)/(dashboard)/authentication/gitea/page.tsx
index 1838cd5b8..fe8eae4c6 100644
--- a/apps/admin/app/(all)/(dashboard)/authentication/gitea/page.tsx
+++ b/apps/admin/app/(all)/(dashboard)/authentication/gitea/page.tsx
@@ -1,16 +1,25 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useState } from "react";
 import { observer } from "mobx-react";
 import useSWR from "swr";
 // plane internal packages
 import { setPromiseToast } from "@plane/propel/toast";
 import { Loader, ToggleSwitch } from "@plane/ui";
-// components
+// assets
 import giteaLogo from "@/app/assets/logos/gitea-logo.svg?url";
+// components
 import { AuthenticationMethodCard } from "@/components/authentication/authentication-method-card";
+import { PageWrapper } from "@/components/common/page-wrapper";
 // hooks
 import { useInstance } from "@/hooks/store";
-//local components
+// types
 import type { Route } from "./+types/page";
+// local
 import { InstanceGiteaConfigForm } from "./form";
 
 const InstanceGiteaAuthenticationPage = observer(function InstanceGiteaAuthenticationPage() {
@@ -32,7 +41,7 @@ const InstanceGiteaAuthenticationPage = observer(function InstanceGiteaAuthentic
     const updateConfigPromise = updateInstanceConfigurations(payload);
 
     setPromiseToast(updateConfigPromise, {
-      loading: "Saving Configuration...",
+      loading: "Saving Configuration",
       success: {
         title: "Configuration saved",
         message: () => `Gitea authentication is now ${value === "1" ? "active" : "disabled"}.`,
@@ -56,42 +65,39 @@ const InstanceGiteaAuthenticationPage = observer(function InstanceGiteaAuthentic
   const isGiteaEnabled = enableGiteaConfig === "1";
 
   return (
-    <>
-      <div className="relative container mx-auto w-full h-full p-4 py-4 space-y-6 flex flex-col">
-        <div className="border-b border-custom-border-100 mx-4 py-4 space-y-1 flex-shrink-0">
-          <AuthenticationMethodCard
-            name="Gitea"
-            description="Allow members to login or sign up to plane with their Gitea accounts."
-            icon={<img src={giteaLogo} height={24} width={24} alt="Gitea Logo" />}
-            config={
-              <ToggleSwitch
-                value={isGiteaEnabled}
-                onChange={() => {
-                  updateConfig("IS_GITEA_ENABLED", isGiteaEnabled ? "0" : "1");
-                }}
-                size="sm"
-                disabled={isSubmitting || !formattedConfig}
-              />
-            }
-            disabled={isSubmitting || !formattedConfig}
-            withBorder={false}
-          />
-        </div>
-        <div className="flex-grow overflow-hidden overflow-y-scroll vertical-scrollbar scrollbar-md px-4">
-          {formattedConfig ? (
-            <InstanceGiteaConfigForm config={formattedConfig} />
-          ) : (
-            <Loader className="space-y-8">
-              <Loader.Item height="50px" width="25%" />
-              <Loader.Item height="50px" />
-              <Loader.Item height="50px" />
-              <Loader.Item height="50px" />
-              <Loader.Item height="50px" width="50%" />
-            </Loader>
-          )}
-        </div>
-      </div>
-    </>
+    <PageWrapper
+      customHeader={
+        <AuthenticationMethodCard
+          name="Gitea"
+          description="Allow members to login or sign up to plane with their Gitea accounts."
+          icon={<img src={giteaLogo} height={24} width={24} alt="Gitea Logo" />}
+          config={
+            <ToggleSwitch
+              value={isGiteaEnabled}
+              onChange={() => {
+                updateConfig("IS_GITEA_ENABLED", isGiteaEnabled ? "0" : "1");
+              }}
+              size="sm"
+              disabled={isSubmitting || !formattedConfig}
+            />
+          }
+          disabled={isSubmitting || !formattedConfig}
+          withBorder={false}
+        />
+      }
+    >
+      {formattedConfig ? (
+        <InstanceGiteaConfigForm config={formattedConfig} />
+      ) : (
+        <Loader className="space-y-8">
+          <Loader.Item height="50px" width="25%" />
+          <Loader.Item height="50px" />
+          <Loader.Item height="50px" />
+          <Loader.Item height="50px" />
+          <Loader.Item height="50px" width="50%" />
+        </Loader>
+      )}
+    </PageWrapper>
   );
 });
 export const meta: Route.MetaFunction = () => [{ title: "Gitea Authentication - God Mode" }];
diff --git a/apps/admin/app/(all)/(dashboard)/authentication/github/form.tsx b/apps/admin/app/(all)/(dashboard)/authentication/github/form.tsx
index a93ffdb9e..2425216b3 100644
--- a/apps/admin/app/(all)/(dashboard)/authentication/github/form.tsx
+++ b/apps/admin/app/(all)/(dashboard)/authentication/github/form.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useState } from "react";
 import { isEmpty } from "lodash-es";
 import Link from "next/link";
@@ -8,12 +14,12 @@ import { API_BASE_URL } from "@plane/constants";
 import { Button, getButtonStyling } from "@plane/propel/button";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { IFormattedInstanceConfiguration, TInstanceGithubAuthenticationConfigurationKeys } from "@plane/types";
-
-import { cn } from "@plane/utils";
 // components
 import { CodeBlock } from "@/components/common/code-block";
 import { ConfirmDiscardModal } from "@/components/common/confirm-discard-modal";
 import type { TControllerInputFormField } from "@/components/common/controller-input";
+import type { TControllerSwitchFormField } from "@/components/common/controller-switch";
+import { ControllerSwitch } from "@/components/common/controller-switch";
 import { ControllerInput } from "@/components/common/controller-input";
 import type { TCopyField } from "@/components/common/copy-field";
 import { CopyField } from "@/components/common/copy-field";
@@ -43,6 +49,7 @@ export function InstanceGithubConfigForm(props: Props) {
       GITHUB_CLIENT_ID: config["GITHUB_CLIENT_ID"],
       GITHUB_CLIENT_SECRET: config["GITHUB_CLIENT_SECRET"],
       GITHUB_ORGANIZATION_ID: config["GITHUB_ORGANIZATION_ID"],
+      ENABLE_GITHUB_SYNC: config["ENABLE_GITHUB_SYNC"] || "0",
     },
   });
 
@@ -60,7 +67,7 @@ export function InstanceGithubConfigForm(props: Props) {
             tabIndex={-1}
             href="https://github.com/settings/applications/new"
             target="_blank"
-            className="text-custom-primary-100 hover:underline"
+            className="text-accent-primary hover:underline"
             rel="noreferrer"
           >
             GitHub OAuth application settings.
@@ -82,7 +89,7 @@ export function InstanceGithubConfigForm(props: Props) {
             tabIndex={-1}
             href="https://github.com/settings/applications/new"
             target="_blank"
-            className="text-custom-primary-100 hover:underline"
+            className="text-accent-primary hover:underline"
             rel="noreferrer"
           >
             GitHub OAuth application settings.
@@ -104,6 +111,11 @@ export function InstanceGithubConfigForm(props: Props) {
     },
   ];
 
+  const GITHUB_FORM_SWITCH_FIELD: TControllerSwitchFormField<GithubConfigFormValues> = {
+    name: "ENABLE_GITHUB_SYNC",
+    label: "GitHub",
+  };
+
   const GITHUB_COMMON_SERVICE_DETAILS: TCopyField[] = [
     {
       key: "Origin_URL",
@@ -116,7 +128,7 @@ export function InstanceGithubConfigForm(props: Props) {
             tabIndex={-1}
             href="https://github.com/settings/applications/new"
             target="_blank"
-            className="text-custom-primary-100 hover:underline"
+            className="text-accent-primary hover:underline"
             rel="noreferrer"
           >
             here.
@@ -139,7 +151,7 @@ export function InstanceGithubConfigForm(props: Props) {
             tabIndex={-1}
             href="https://github.com/settings/applications/new"
             target="_blank"
-            className="text-custom-primary-100 hover:underline"
+            className="text-accent-primary hover:underline"
             rel="noreferrer"
           >
             here.
@@ -152,20 +164,22 @@ export function InstanceGithubConfigForm(props: Props) {
   const onSubmit = async (formData: GithubConfigFormValues) => {
     const payload: Partial<GithubConfigFormValues> = { ...formData };
 
-    await updateInstanceConfigurations(payload)
-      .then((response = []) => {
-        setToast({
-          type: TOAST_TYPE.SUCCESS,
-          title: "Done!",
-          message: "Your GitHub authentication is configured. You should test it now.",
-        });
-        reset({
-          GITHUB_CLIENT_ID: response.find((item) => item.key === "GITHUB_CLIENT_ID")?.value,
-          GITHUB_CLIENT_SECRET: response.find((item) => item.key === "GITHUB_CLIENT_SECRET")?.value,
-          GITHUB_ORGANIZATION_ID: response.find((item) => item.key === "GITHUB_ORGANIZATION_ID")?.value,
-        });
-      })
-      .catch((err) => console.error(err));
+    try {
+      const response = await updateInstanceConfigurations(payload);
+      setToast({
+        type: TOAST_TYPE.SUCCESS,
+        title: "Done!",
+        message: "Your GitHub authentication is configured. You should test it now.",
+      });
+      reset({
+        GITHUB_CLIENT_ID: response.find((item) => item.key === "GITHUB_CLIENT_ID")?.value,
+        GITHUB_CLIENT_SECRET: response.find((item) => item.key === "GITHUB_CLIENT_SECRET")?.value,
+        GITHUB_ORGANIZATION_ID: response.find((item) => item.key === "GITHUB_ORGANIZATION_ID")?.value,
+        ENABLE_GITHUB_SYNC: response.find((item) => item.key === "ENABLE_GITHUB_SYNC")?.value,
+      });
+    } catch (err) {
+      console.error(err);
+    }
   };
 
   const handleGoBack = (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
@@ -183,9 +197,9 @@ export function InstanceGithubConfigForm(props: Props) {
         handleClose={() => setIsDiscardChangesModalOpen(false)}
       />
       <div className="flex flex-col gap-8">
-        <div className="grid grid-cols-2 gap-x-12 gap-y-8 w-full">
-          <div className="flex flex-col gap-y-4 col-span-2 md:col-span-1 pt-1">
-            <div className="pt-2.5 text-xl font-medium">GitHub-provided details for Plane</div>
+        <div className="grid w-full grid-cols-2 gap-x-12 gap-y-8">
+          <div className="col-span-2 flex flex-col gap-y-4 pt-1 md:col-span-1">
+            <div className="pt-2.5 text-18 font-medium">GitHub-provided details for Plane</div>
             {GITHUB_FORM_FIELDS.map((field) => (
               <ControllerInput
                 key={field.key}
@@ -199,39 +213,42 @@ export function InstanceGithubConfigForm(props: Props) {
                 required={field.required}
               />
             ))}
+            <ControllerSwitch control={control} field={GITHUB_FORM_SWITCH_FIELD} />
             <div className="flex flex-col gap-1 pt-4">
               <div className="flex items-center gap-4">
-                <Button variant="primary" onClick={handleSubmit(onSubmit)} loading={isSubmitting} disabled={!isDirty}>
-                  {isSubmitting ? "Saving..." : "Save changes"}
-                </Button>
-                <Link
-                  href="/authentication"
-                  className={cn(getButtonStyling("neutral-primary", "md"), "font-medium")}
-                  onClick={handleGoBack}
+                <Button
+                  variant="primary"
+                  size="lg"
+                  onClick={(e) => void handleSubmit(onSubmit)(e)}
+                  loading={isSubmitting}
+                  disabled={!isDirty}
                 >
+                  {isSubmitting ? "Saving" : "Save changes"}
+                </Button>
+                <Link href="/authentication" className={getButtonStyling("secondary", "lg")} onClick={handleGoBack}>
                   Go back
                 </Link>
               </div>
             </div>
           </div>
-          <div className="col-span-2 md:col-span-1 flex flex-col gap-y-6">
-            <div className="pt-2 text-xl font-medium">Plane-provided details for GitHub</div>
+          <div className="col-span-2 flex flex-col gap-y-6 md:col-span-1">
+            <div className="pt-2 text-18 font-medium">Plane-provided details for GitHub</div>
 
             <div className="flex flex-col gap-y-4">
               {/* common service details */}
-              <div className="flex flex-col gap-y-4 px-6 py-4 bg-custom-background-80 rounded-lg">
+              <div className="flex flex-col gap-y-4 rounded-lg bg-layer-1 px-6 py-4">
                 {GITHUB_COMMON_SERVICE_DETAILS.map((field) => (
                   <CopyField key={field.key} label={field.label} url={field.url} description={field.description} />
                 ))}
               </div>
 
               {/* web service details */}
-              <div className="flex flex-col rounded-lg overflow-hidden">
-                <div className="px-6 py-3 bg-custom-background-80/60 font-medium text-xs uppercase flex items-center gap-x-3 text-custom-text-200">
-                  <Monitor className="w-3 h-3" />
+              <div className="flex flex-col overflow-hidden rounded-lg">
+                <div className="flex items-center gap-x-3 bg-layer-3 px-6 py-3 text-11 font-medium text-secondary uppercase">
+                  <Monitor className="h-3 w-3" />
                   Web
                 </div>
-                <div className="px-6 py-4 flex flex-col gap-y-4 bg-custom-background-80">
+                <div className="flex flex-col gap-y-4 bg-layer-1 px-6 py-4">
                   {GITHUB_SERVICE_DETAILS.map((field) => (
                     <CopyField key={field.key} label={field.label} url={field.url} description={field.description} />
                   ))}
diff --git a/apps/admin/app/(all)/(dashboard)/authentication/github/page.tsx b/apps/admin/app/(all)/(dashboard)/authentication/github/page.tsx
index 4fe3c4611..a7a29cf9d 100644
--- a/apps/admin/app/(all)/(dashboard)/authentication/github/page.tsx
+++ b/apps/admin/app/(all)/(dashboard)/authentication/github/page.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useState } from "react";
 import { observer } from "mobx-react";
 import { useTheme } from "next-themes";
@@ -6,15 +12,17 @@ import useSWR from "swr";
 import { setPromiseToast } from "@plane/propel/toast";
 import { Loader, ToggleSwitch } from "@plane/ui";
 import { resolveGeneralTheme } from "@plane/utils";
-// components
+// assets
 import githubLightModeImage from "@/app/assets/logos/github-black.png?url";
 import githubDarkModeImage from "@/app/assets/logos/github-white.png?url";
+// components
 import { AuthenticationMethodCard } from "@/components/authentication/authentication-method-card";
+import { PageWrapper } from "@/components/common/page-wrapper";
 // hooks
 import { useInstance } from "@/hooks/store";
-// icons
-// local components
+// types
 import type { Route } from "./+types/page";
+// local
 import { InstanceGithubConfigForm } from "./form";
 
 const InstanceGithubAuthenticationPage = observer(function InstanceGithubAuthenticationPage(
@@ -41,7 +49,7 @@ const InstanceGithubAuthenticationPage = observer(function InstanceGithubAuthent
     const updateConfigPromise = updateInstanceConfigurations(payload);
 
     setPromiseToast(updateConfigPromise, {
-      loading: "Saving Configuration...",
+      loading: "Saving Configuration",
       success: {
         title: "Configuration saved",
         message: () => `GitHub authentication is now ${value === "1" ? "active" : "disabled"}.`,
@@ -65,49 +73,46 @@ const InstanceGithubAuthenticationPage = observer(function InstanceGithubAuthent
   const isGithubEnabled = enableGithubConfig === "1";
 
   return (
-    <>
-      <div className="relative container mx-auto w-full h-full p-4 py-4 space-y-6 flex flex-col">
-        <div className="border-b border-custom-border-100 mx-4 py-4 space-y-1 flex-shrink-0">
-          <AuthenticationMethodCard
-            name="GitHub"
-            description="Allow members to login or sign up to plane with their GitHub accounts."
-            icon={
-              <img
-                src={resolveGeneralTheme(resolvedTheme) === "dark" ? githubDarkModeImage : githubLightModeImage}
-                height={24}
-                width={24}
-                alt="GitHub Logo"
-              />
-            }
-            config={
-              <ToggleSwitch
-                value={isGithubEnabled}
-                onChange={() => {
-                  updateConfig("IS_GITHUB_ENABLED", isGithubEnabled ? "0" : "1");
-                }}
-                size="sm"
-                disabled={isSubmitting || !formattedConfig}
-              />
-            }
-            disabled={isSubmitting || !formattedConfig}
-            withBorder={false}
-          />
-        </div>
-        <div className="flex-grow overflow-hidden overflow-y-scroll vertical-scrollbar scrollbar-md px-4">
-          {formattedConfig ? (
-            <InstanceGithubConfigForm config={formattedConfig} />
-          ) : (
-            <Loader className="space-y-8">
-              <Loader.Item height="50px" width="25%" />
-              <Loader.Item height="50px" />
-              <Loader.Item height="50px" />
-              <Loader.Item height="50px" />
-              <Loader.Item height="50px" width="50%" />
-            </Loader>
-          )}
-        </div>
-      </div>
-    </>
+    <PageWrapper
+      customHeader={
+        <AuthenticationMethodCard
+          name="GitHub"
+          description="Allow members to login or sign up to plane with their GitHub accounts."
+          icon={
+            <img
+              src={resolveGeneralTheme(resolvedTheme) === "dark" ? githubDarkModeImage : githubLightModeImage}
+              height={24}
+              width={24}
+              alt="GitHub Logo"
+            />
+          }
+          config={
+            <ToggleSwitch
+              value={isGithubEnabled}
+              onChange={() => {
+                updateConfig("IS_GITHUB_ENABLED", isGithubEnabled ? "0" : "1");
+              }}
+              size="sm"
+              disabled={isSubmitting || !formattedConfig}
+            />
+          }
+          disabled={isSubmitting || !formattedConfig}
+          withBorder={false}
+        />
+      }
+    >
+      {formattedConfig ? (
+        <InstanceGithubConfigForm config={formattedConfig} />
+      ) : (
+        <Loader className="space-y-8">
+          <Loader.Item height="50px" width="25%" />
+          <Loader.Item height="50px" />
+          <Loader.Item height="50px" />
+          <Loader.Item height="50px" />
+          <Loader.Item height="50px" width="50%" />
+        </Loader>
+      )}
+    </PageWrapper>
   );
 });
 
diff --git a/apps/admin/app/(all)/(dashboard)/authentication/gitlab/form.tsx b/apps/admin/app/(all)/(dashboard)/authentication/gitlab/form.tsx
index 65f2b776c..7df6faf17 100644
--- a/apps/admin/app/(all)/(dashboard)/authentication/gitlab/form.tsx
+++ b/apps/admin/app/(all)/(dashboard)/authentication/gitlab/form.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useState } from "react";
 import { isEmpty } from "lodash-es";
 import Link from "next/link";
@@ -7,11 +13,12 @@ import { API_BASE_URL } from "@plane/constants";
 import { Button, getButtonStyling } from "@plane/propel/button";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { IFormattedInstanceConfiguration, TInstanceGitlabAuthenticationConfigurationKeys } from "@plane/types";
-import { cn } from "@plane/utils";
 // components
 import { CodeBlock } from "@/components/common/code-block";
 import { ConfirmDiscardModal } from "@/components/common/confirm-discard-modal";
 import type { TControllerInputFormField } from "@/components/common/controller-input";
+import type { TControllerSwitchFormField } from "@/components/common/controller-switch";
+import { ControllerSwitch } from "@/components/common/controller-switch";
 import { ControllerInput } from "@/components/common/controller-input";
 import type { TCopyField } from "@/components/common/copy-field";
 import { CopyField } from "@/components/common/copy-field";
@@ -41,6 +48,7 @@ export function InstanceGitlabConfigForm(props: Props) {
       GITLAB_HOST: config["GITLAB_HOST"],
       GITLAB_CLIENT_ID: config["GITLAB_CLIENT_ID"],
       GITLAB_CLIENT_SECRET: config["GITLAB_CLIENT_SECRET"],
+      ENABLE_GITLAB_SYNC: config["ENABLE_GITLAB_SYNC"] || "0",
     },
   });
 
@@ -71,7 +79,7 @@ export function InstanceGitlabConfigForm(props: Props) {
             tabIndex={-1}
             href="https://docs.gitlab.com/ee/integration/oauth_provider.html"
             target="_blank"
-            className="text-custom-primary-100 hover:underline"
+            className="text-accent-primary hover:underline"
             rel="noreferrer"
           >
             GitLab OAuth application settings
@@ -94,7 +102,7 @@ export function InstanceGitlabConfigForm(props: Props) {
             tabIndex={-1}
             href="https://docs.gitlab.com/ee/integration/oauth_provider.html"
             target="_blank"
-            className="text-custom-primary-100 hover:underline"
+            className="text-accent-primary hover:underline"
             rel="noreferrer"
           >
             GitLab OAuth application settings
@@ -108,6 +116,11 @@ export function InstanceGitlabConfigForm(props: Props) {
     },
   ];
 
+  const GITLAB_FORM_SWITCH_FIELD: TControllerSwitchFormField<GitlabConfigFormValues> = {
+    name: "ENABLE_GITLAB_SYNC",
+    label: "GitLab",
+  };
+
   const GITLAB_SERVICE_FIELD: TCopyField[] = [
     {
       key: "Callback_URL",
@@ -120,7 +133,7 @@ export function InstanceGitlabConfigForm(props: Props) {
             tabIndex={-1}
             href="https://docs.gitlab.com/ee/integration/oauth_provider.html"
             target="_blank"
-            className="text-custom-primary-100 hover:underline"
+            className="text-accent-primary hover:underline"
             rel="noreferrer"
           >
             GitLab OAuth application
@@ -134,20 +147,22 @@ export function InstanceGitlabConfigForm(props: Props) {
   const onSubmit = async (formData: GitlabConfigFormValues) => {
     const payload: Partial<GitlabConfigFormValues> = { ...formData };
 
-    await updateInstanceConfigurations(payload)
-      .then((response = []) => {
-        setToast({
-          type: TOAST_TYPE.SUCCESS,
-          title: "Done!",
-          message: "Your GitLab authentication is configured. You should test it now.",
-        });
-        reset({
-          GITLAB_HOST: response.find((item) => item.key === "GITLAB_HOST")?.value,
-          GITLAB_CLIENT_ID: response.find((item) => item.key === "GITLAB_CLIENT_ID")?.value,
-          GITLAB_CLIENT_SECRET: response.find((item) => item.key === "GITLAB_CLIENT_SECRET")?.value,
-        });
-      })
-      .catch((err) => console.error(err));
+    try {
+      const response = await updateInstanceConfigurations(payload);
+      setToast({
+        type: TOAST_TYPE.SUCCESS,
+        title: "Done!",
+        message: "Your GitLab authentication is configured. You should test it now.",
+      });
+      reset({
+        GITLAB_HOST: response.find((item) => item.key === "GITLAB_HOST")?.value,
+        GITLAB_CLIENT_ID: response.find((item) => item.key === "GITLAB_CLIENT_ID")?.value,
+        GITLAB_CLIENT_SECRET: response.find((item) => item.key === "GITLAB_CLIENT_SECRET")?.value,
+        ENABLE_GITLAB_SYNC: response.find((item) => item.key === "ENABLE_GITLAB_SYNC")?.value,
+      });
+    } catch (err) {
+      console.error(err);
+    }
   };
 
   const handleGoBack = (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
@@ -165,9 +180,9 @@ export function InstanceGitlabConfigForm(props: Props) {
         handleClose={() => setIsDiscardChangesModalOpen(false)}
       />
       <div className="flex flex-col gap-8">
-        <div className="grid grid-cols-2 gap-x-12 gap-y-8 w-full">
-          <div className="flex flex-col gap-y-4 col-span-2 md:col-span-1 pt-1">
-            <div className="pt-2.5 text-xl font-medium">GitLab-provided details for Plane</div>
+        <div className="grid w-full grid-cols-2 gap-x-12 gap-y-8">
+          <div className="col-span-2 flex flex-col gap-y-4 pt-1 md:col-span-1">
+            <div className="pt-2.5 text-18 font-medium">GitLab-provided details for Plane</div>
             {GITLAB_FORM_FIELDS.map((field) => (
               <ControllerInput
                 key={field.key}
@@ -181,24 +196,27 @@ export function InstanceGitlabConfigForm(props: Props) {
                 required={field.required}
               />
             ))}
+            <ControllerSwitch control={control} field={GITLAB_FORM_SWITCH_FIELD} />
             <div className="flex flex-col gap-1 pt-4">
               <div className="flex items-center gap-4">
-                <Button variant="primary" onClick={handleSubmit(onSubmit)} loading={isSubmitting} disabled={!isDirty}>
-                  {isSubmitting ? "Saving..." : "Save changes"}
-                </Button>
-                <Link
-                  href="/authentication"
-                  className={cn(getButtonStyling("neutral-primary", "md"), "font-medium")}
-                  onClick={handleGoBack}
+                <Button
+                  variant="primary"
+                  size="lg"
+                  onClick={(e) => void handleSubmit(onSubmit)(e)}
+                  loading={isSubmitting}
+                  disabled={!isDirty}
                 >
+                  {isSubmitting ? "Saving" : "Save changes"}
+                </Button>
+                <Link href="/authentication" className={getButtonStyling("secondary", "lg")} onClick={handleGoBack}>
                   Go back
                 </Link>
               </div>
             </div>
           </div>
           <div className="col-span-2 md:col-span-1">
-            <div className="flex flex-col gap-y-4 px-6 pt-1.5 pb-4 bg-custom-background-80/60 rounded-lg">
-              <div className="pt-2 text-xl font-medium">Plane-provided details for GitLab</div>
+            <div className="flex flex-col gap-y-4 rounded-lg bg-layer-3 px-6 pt-1.5 pb-4">
+              <div className="pt-2 text-18 font-medium">Plane-provided details for GitLab</div>
               {GITLAB_SERVICE_FIELD.map((field) => (
                 <CopyField key={field.key} label={field.label} url={field.url} description={field.description} />
               ))}
diff --git a/apps/admin/app/(all)/(dashboard)/authentication/gitlab/page.tsx b/apps/admin/app/(all)/(dashboard)/authentication/gitlab/page.tsx
index ba421e04c..5bcaef726 100644
--- a/apps/admin/app/(all)/(dashboard)/authentication/gitlab/page.tsx
+++ b/apps/admin/app/(all)/(dashboard)/authentication/gitlab/page.tsx
@@ -1,16 +1,24 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useState } from "react";
 import { observer } from "mobx-react";
 import useSWR from "swr";
 import { setPromiseToast } from "@plane/propel/toast";
 import { Loader, ToggleSwitch } from "@plane/ui";
-// components
+// assets
 import GitlabLogo from "@/app/assets/logos/gitlab-logo.svg?url";
+// components
 import { AuthenticationMethodCard } from "@/components/authentication/authentication-method-card";
+import { PageWrapper } from "@/components/common/page-wrapper";
 // hooks
 import { useInstance } from "@/hooks/store";
-// icons
-// local components
+// types
 import type { Route } from "./+types/page";
+// local
 import { InstanceGitlabConfigForm } from "./form";
 
 const InstanceGitlabAuthenticationPage = observer(function InstanceGitlabAuthenticationPage(
@@ -35,7 +43,7 @@ const InstanceGitlabAuthenticationPage = observer(function InstanceGitlabAuthent
     const updateConfigPromise = updateInstanceConfigurations(payload);
 
     setPromiseToast(updateConfigPromise, {
-      loading: "Saving Configuration...",
+      loading: "Saving Configuration",
       success: {
         title: "Configuration saved",
         message: () => `GitLab authentication is now ${value === "1" ? "active" : "disabled"}.`,
@@ -56,46 +64,43 @@ const InstanceGitlabAuthenticationPage = observer(function InstanceGitlabAuthent
       });
   };
   return (
-    <>
-      <div className="relative container mx-auto w-full h-full p-4 py-4 space-y-6 flex flex-col">
-        <div className="border-b border-custom-border-100 mx-4 py-4 space-y-1 flex-shrink-0">
-          <AuthenticationMethodCard
-            name="GitLab"
-            description="Allow members to login or sign up to plane with their GitLab accounts."
-            icon={<img src={GitlabLogo} height={24} width={24} alt="GitLab Logo" />}
-            config={
-              <ToggleSwitch
-                value={Boolean(parseInt(enableGitlabConfig))}
-                onChange={() => {
-                  if (Boolean(parseInt(enableGitlabConfig)) === true) {
-                    updateConfig("IS_GITLAB_ENABLED", "0");
-                  } else {
-                    updateConfig("IS_GITLAB_ENABLED", "1");
-                  }
-                }}
-                size="sm"
-                disabled={isSubmitting || !formattedConfig}
-              />
-            }
-            disabled={isSubmitting || !formattedConfig}
-            withBorder={false}
-          />
-        </div>
-        <div className="flex-grow overflow-hidden overflow-y-scroll vertical-scrollbar scrollbar-md px-4">
-          {formattedConfig ? (
-            <InstanceGitlabConfigForm config={formattedConfig} />
-          ) : (
-            <Loader className="space-y-8">
-              <Loader.Item height="50px" width="25%" />
-              <Loader.Item height="50px" />
-              <Loader.Item height="50px" />
-              <Loader.Item height="50px" />
-              <Loader.Item height="50px" width="50%" />
-            </Loader>
-          )}
-        </div>
-      </div>
-    </>
+    <PageWrapper
+      customHeader={
+        <AuthenticationMethodCard
+          name="GitLab"
+          description="Allow members to login or sign up to plane with their GitLab accounts."
+          icon={<img src={GitlabLogo} height={24} width={24} alt="GitLab Logo" />}
+          config={
+            <ToggleSwitch
+              value={Boolean(parseInt(enableGitlabConfig))}
+              onChange={() => {
+                if (Boolean(parseInt(enableGitlabConfig)) === true) {
+                  updateConfig("IS_GITLAB_ENABLED", "0");
+                } else {
+                  updateConfig("IS_GITLAB_ENABLED", "1");
+                }
+              }}
+              size="sm"
+              disabled={isSubmitting || !formattedConfig}
+            />
+          }
+          disabled={isSubmitting || !formattedConfig}
+          withBorder={false}
+        />
+      }
+    >
+      {formattedConfig ? (
+        <InstanceGitlabConfigForm config={formattedConfig} />
+      ) : (
+        <Loader className="space-y-8">
+          <Loader.Item height="50px" width="25%" />
+          <Loader.Item height="50px" />
+          <Loader.Item height="50px" />
+          <Loader.Item height="50px" />
+          <Loader.Item height="50px" width="50%" />
+        </Loader>
+      )}
+    </PageWrapper>
   );
 });
 
diff --git a/apps/admin/app/(all)/(dashboard)/authentication/google/form.tsx b/apps/admin/app/(all)/(dashboard)/authentication/google/form.tsx
index f8cda5c0b..698ff34e9 100644
--- a/apps/admin/app/(all)/(dashboard)/authentication/google/form.tsx
+++ b/apps/admin/app/(all)/(dashboard)/authentication/google/form.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useState } from "react";
 import { isEmpty } from "lodash-es";
 import Link from "next/link";
@@ -8,11 +14,12 @@ import { API_BASE_URL } from "@plane/constants";
 import { Button, getButtonStyling } from "@plane/propel/button";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { IFormattedInstanceConfiguration, TInstanceGoogleAuthenticationConfigurationKeys } from "@plane/types";
-import { cn } from "@plane/utils";
 // components
 import { CodeBlock } from "@/components/common/code-block";
 import { ConfirmDiscardModal } from "@/components/common/confirm-discard-modal";
 import type { TControllerInputFormField } from "@/components/common/controller-input";
+import type { TControllerSwitchFormField } from "@/components/common/controller-switch";
+import { ControllerSwitch } from "@/components/common/controller-switch";
 import { ControllerInput } from "@/components/common/controller-input";
 import type { TCopyField } from "@/components/common/copy-field";
 import { CopyField } from "@/components/common/copy-field";
@@ -41,6 +48,7 @@ export function InstanceGoogleConfigForm(props: Props) {
     defaultValues: {
       GOOGLE_CLIENT_ID: config["GOOGLE_CLIENT_ID"],
       GOOGLE_CLIENT_SECRET: config["GOOGLE_CLIENT_SECRET"],
+      ENABLE_GOOGLE_SYNC: config["ENABLE_GOOGLE_SYNC"] || "0",
     },
   });
 
@@ -58,7 +66,7 @@ export function InstanceGoogleConfigForm(props: Props) {
             tabIndex={-1}
             href="https://developers.google.com/identity/protocols/oauth2/javascript-implicit-flow#creatingcred"
             target="_blank"
-            className="text-custom-primary-100 hover:underline"
+            className="text-accent-primary hover:underline"
             rel="noreferrer"
           >
             Learn more
@@ -80,7 +88,7 @@ export function InstanceGoogleConfigForm(props: Props) {
             tabIndex={-1}
             href="https://developers.google.com/identity/oauth2/web/guides/get-google-api-clientid"
             target="_blank"
-            className="text-custom-primary-100 hover:underline"
+            className="text-accent-primary hover:underline"
             rel="noreferrer"
           >
             Learn more
@@ -93,6 +101,11 @@ export function InstanceGoogleConfigForm(props: Props) {
     },
   ];
 
+  const GOOGLE_FORM_SWITCH_FIELD: TControllerSwitchFormField<GoogleConfigFormValues> = {
+    name: "ENABLE_GOOGLE_SYNC",
+    label: "Google",
+  };
+
   const GOOGLE_COMMON_SERVICE_DETAILS: TCopyField[] = [
     {
       key: "Origin_URL",
@@ -105,7 +118,7 @@ export function InstanceGoogleConfigForm(props: Props) {
           <a
             href="https://console.cloud.google.com/apis/credentials/oauthclient"
             target="_blank"
-            className="text-custom-primary-100 hover:underline"
+            className="text-accent-primary hover:underline"
             rel="noreferrer"
           >
             here.
@@ -127,7 +140,7 @@ export function InstanceGoogleConfigForm(props: Props) {
           <a
             href="https://console.cloud.google.com/apis/credentials/oauthclient"
             target="_blank"
-            className="text-custom-primary-100 hover:underline"
+            className="text-accent-primary hover:underline"
             rel="noreferrer"
           >
             here.
@@ -140,19 +153,21 @@ export function InstanceGoogleConfigForm(props: Props) {
   const onSubmit = async (formData: GoogleConfigFormValues) => {
     const payload: Partial<GoogleConfigFormValues> = { ...formData };
 
-    await updateInstanceConfigurations(payload)
-      .then((response = []) => {
-        setToast({
-          type: TOAST_TYPE.SUCCESS,
-          title: "Done!",
-          message: "Your Google authentication is configured. You should test it now.",
-        });
-        reset({
-          GOOGLE_CLIENT_ID: response.find((item) => item.key === "GOOGLE_CLIENT_ID")?.value,
-          GOOGLE_CLIENT_SECRET: response.find((item) => item.key === "GOOGLE_CLIENT_SECRET")?.value,
-        });
-      })
-      .catch((err) => console.error(err));
+    try {
+      const response = await updateInstanceConfigurations(payload);
+      setToast({
+        type: TOAST_TYPE.SUCCESS,
+        title: "Done!",
+        message: "Your Google authentication is configured. You should test it now.",
+      });
+      reset({
+        GOOGLE_CLIENT_ID: response.find((item) => item.key === "GOOGLE_CLIENT_ID")?.value,
+        GOOGLE_CLIENT_SECRET: response.find((item) => item.key === "GOOGLE_CLIENT_SECRET")?.value,
+        ENABLE_GOOGLE_SYNC: response.find((item) => item.key === "ENABLE_GOOGLE_SYNC")?.value,
+      });
+    } catch (err) {
+      console.error(err);
+    }
   };
 
   const handleGoBack = (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
@@ -170,9 +185,9 @@ export function InstanceGoogleConfigForm(props: Props) {
         handleClose={() => setIsDiscardChangesModalOpen(false)}
       />
       <div className="flex flex-col gap-8">
-        <div className="grid grid-cols-2 gap-x-12 gap-y-8 w-full">
-          <div className="flex flex-col gap-y-4 col-span-2 md:col-span-1 pt-1">
-            <div className="pt-2.5 text-xl font-medium">Google-provided details for Plane</div>
+        <div className="grid w-full grid-cols-2 gap-x-12 gap-y-8">
+          <div className="col-span-2 flex flex-col gap-y-4 pt-1 md:col-span-1">
+            <div className="pt-2.5 text-18 font-medium">Google-provided details for Plane</div>
             {GOOGLE_FORM_FIELDS.map((field) => (
               <ControllerInput
                 key={field.key}
@@ -186,39 +201,42 @@ export function InstanceGoogleConfigForm(props: Props) {
                 required={field.required}
               />
             ))}
+            <ControllerSwitch control={control} field={GOOGLE_FORM_SWITCH_FIELD} />
             <div className="flex flex-col gap-1 pt-4">
               <div className="flex items-center gap-4">
-                <Button variant="primary" onClick={handleSubmit(onSubmit)} loading={isSubmitting} disabled={!isDirty}>
-                  {isSubmitting ? "Saving..." : "Save changes"}
-                </Button>
-                <Link
-                  href="/authentication"
-                  className={cn(getButtonStyling("neutral-primary", "md"), "font-medium")}
-                  onClick={handleGoBack}
+                <Button
+                  variant="primary"
+                  size="lg"
+                  onClick={(e) => void handleSubmit(onSubmit)(e)}
+                  loading={isSubmitting}
+                  disabled={!isDirty}
                 >
+                  {isSubmitting ? "Saving" : "Save changes"}
+                </Button>
+                <Link href="/authentication" className={getButtonStyling("secondary", "lg")} onClick={handleGoBack}>
                   Go back
                 </Link>
               </div>
             </div>
           </div>
-          <div className="col-span-2 md:col-span-1 flex flex-col gap-y-6">
-            <div className="pt-2 text-xl font-medium">Plane-provided details for Google</div>
+          <div className="col-span-2 flex flex-col gap-y-6 md:col-span-1">
+            <div className="pt-2 text-18 font-medium">Plane-provided details for Google</div>
 
             <div className="flex flex-col gap-y-4">
               {/* common service details */}
-              <div className="flex flex-col gap-y-4 px-6 py-4 bg-custom-background-80 rounded-lg">
+              <div className="flex flex-col gap-y-4 rounded-lg bg-layer-1 px-6 py-4">
                 {GOOGLE_COMMON_SERVICE_DETAILS.map((field) => (
                   <CopyField key={field.key} label={field.label} url={field.url} description={field.description} />
                 ))}
               </div>
 
               {/* web service details */}
-              <div className="flex flex-col rounded-lg overflow-hidden">
-                <div className="px-6 py-3 bg-custom-background-80/60 font-medium text-xs uppercase flex items-center gap-x-3 text-custom-text-200">
-                  <Monitor className="w-3 h-3" />
+              <div className="flex flex-col overflow-hidden rounded-lg">
+                <div className="flex items-center gap-x-3 bg-layer-3 px-6 py-3 text-11 font-medium text-secondary uppercase">
+                  <Monitor className="h-3 w-3" />
                   Web
                 </div>
-                <div className="px-6 py-4 flex flex-col gap-y-4 bg-custom-background-80">
+                <div className="flex flex-col gap-y-4 bg-layer-1 px-6 py-4">
                   {GOOGLE_SERVICE_DETAILS.map((field) => (
                     <CopyField key={field.key} label={field.label} url={field.url} description={field.description} />
                   ))}
diff --git a/apps/admin/app/(all)/(dashboard)/authentication/google/page.tsx b/apps/admin/app/(all)/(dashboard)/authentication/google/page.tsx
index c99c59787..93a61497d 100644
--- a/apps/admin/app/(all)/(dashboard)/authentication/google/page.tsx
+++ b/apps/admin/app/(all)/(dashboard)/authentication/google/page.tsx
@@ -1,16 +1,24 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useState } from "react";
 import { observer } from "mobx-react";
 import useSWR from "swr";
 import { setPromiseToast } from "@plane/propel/toast";
 import { Loader, ToggleSwitch } from "@plane/ui";
-// components
+// assets
 import GoogleLogo from "@/app/assets/logos/google-logo.svg?url";
+// components
 import { AuthenticationMethodCard } from "@/components/authentication/authentication-method-card";
+import { PageWrapper } from "@/components/common/page-wrapper";
 // hooks
 import { useInstance } from "@/hooks/store";
-// icons
-// local components
+// types
 import type { Route } from "./+types/page";
+// local
 import { InstanceGoogleConfigForm } from "./form";
 
 const InstanceGoogleAuthenticationPage = observer(function InstanceGoogleAuthenticationPage(
@@ -35,7 +43,7 @@ const InstanceGoogleAuthenticationPage = observer(function InstanceGoogleAuthent
     const updateConfigPromise = updateInstanceConfigurations(payload);
 
     setPromiseToast(updateConfigPromise, {
-      loading: "Saving Configuration...",
+      loading: "Saving Configuration",
       success: {
         title: "Configuration saved",
         message: () => `Google authentication is now ${value === "1" ? "active" : "disabled"}.`,
@@ -56,47 +64,44 @@ const InstanceGoogleAuthenticationPage = observer(function InstanceGoogleAuthent
       });
   };
   return (
-    <>
-      <div className="relative container mx-auto w-full h-full p-4 py-4 space-y-6 flex flex-col">
-        <div className="border-b border-custom-border-100 mx-4 py-4 space-y-1 flex-shrink-0">
-          <AuthenticationMethodCard
-            name="Google"
-            description="Allow members to login or sign up to plane with their Google
+    <PageWrapper
+      customHeader={
+        <AuthenticationMethodCard
+          name="Google"
+          description="Allow members to login or sign up to plane with their Google
             accounts."
-            icon={<img src={GoogleLogo} height={24} width={24} alt="Google Logo" />}
-            config={
-              <ToggleSwitch
-                value={Boolean(parseInt(enableGoogleConfig))}
-                onChange={() => {
-                  if (Boolean(parseInt(enableGoogleConfig)) === true) {
-                    updateConfig("IS_GOOGLE_ENABLED", "0");
-                  } else {
-                    updateConfig("IS_GOOGLE_ENABLED", "1");
-                  }
-                }}
-                size="sm"
-                disabled={isSubmitting || !formattedConfig}
-              />
-            }
-            disabled={isSubmitting || !formattedConfig}
-            withBorder={false}
-          />
-        </div>
-        <div className="flex-grow overflow-hidden overflow-y-scroll vertical-scrollbar scrollbar-md px-4">
-          {formattedConfig ? (
-            <InstanceGoogleConfigForm config={formattedConfig} />
-          ) : (
-            <Loader className="space-y-8">
-              <Loader.Item height="50px" width="25%" />
-              <Loader.Item height="50px" />
-              <Loader.Item height="50px" />
-              <Loader.Item height="50px" />
-              <Loader.Item height="50px" width="50%" />
-            </Loader>
-          )}
-        </div>
-      </div>
-    </>
+          icon={<img src={GoogleLogo} height={24} width={24} alt="Google Logo" />}
+          config={
+            <ToggleSwitch
+              value={Boolean(parseInt(enableGoogleConfig))}
+              onChange={() => {
+                if (Boolean(parseInt(enableGoogleConfig)) === true) {
+                  updateConfig("IS_GOOGLE_ENABLED", "0");
+                } else {
+                  updateConfig("IS_GOOGLE_ENABLED", "1");
+                }
+              }}
+              size="sm"
+              disabled={isSubmitting || !formattedConfig}
+            />
+          }
+          disabled={isSubmitting || !formattedConfig}
+          withBorder={false}
+        />
+      }
+    >
+      {formattedConfig ? (
+        <InstanceGoogleConfigForm config={formattedConfig} />
+      ) : (
+        <Loader className="space-y-8">
+          <Loader.Item height="50px" width="25%" />
+          <Loader.Item height="50px" />
+          <Loader.Item height="50px" />
+          <Loader.Item height="50px" />
+          <Loader.Item height="50px" width="50%" />
+        </Loader>
+      )}
+    </PageWrapper>
   );
 });
 
diff --git a/apps/admin/app/(all)/(dashboard)/authentication/page.tsx b/apps/admin/app/(all)/(dashboard)/authentication/page.tsx
index c4bdb727b..26e5fc56f 100644
--- a/apps/admin/app/(all)/(dashboard)/authentication/page.tsx
+++ b/apps/admin/app/(all)/(dashboard)/authentication/page.tsx
@@ -1,112 +1,171 @@
-import { useState } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useCallback, useRef, useState } from "react";
 import { observer } from "mobx-react";
+import { useTheme } from "next-themes";
 import useSWR from "swr";
 // plane internal packages
-import { setPromiseToast } from "@plane/propel/toast";
-import type { TInstanceConfigurationKeys } from "@plane/types";
+import { setPromiseToast, setToast, TOAST_TYPE } from "@plane/propel/toast";
+import type { TInstanceConfigurationKeys, TInstanceAuthenticationModes } from "@plane/types";
 import { Loader, ToggleSwitch } from "@plane/ui";
-import { cn } from "@plane/utils";
+import { cn, resolveGeneralTheme } from "@plane/utils";
+// components
+import { PageWrapper } from "@/components/common/page-wrapper";
+import { AuthenticationMethodCard } from "@/components/authentication/authentication-method-card";
+// helpers
+import { canDisableAuthMethod } from "@/helpers/authentication";
 // hooks
+import { useAuthenticationModes } from "@/hooks/oauth";
 import { useInstance } from "@/hooks/store";
-// plane admin components
-import { AuthenticationModes } from "@/plane-admin/components/authentication";
+// types
 import type { Route } from "./+types/page";
 
 const InstanceAuthenticationPage = observer(function InstanceAuthenticationPage(_props: Route.ComponentProps) {
-  // store
-  const { fetchInstanceConfigurations, formattedConfig, updateInstanceConfigurations } = useInstance();
-
-  useSWR("INSTANCE_CONFIGURATIONS", () => fetchInstanceConfigurations());
-
+  // theme
+  const { resolvedTheme: resolvedThemeAdmin } = useTheme();
+  const resolvedTheme = resolveGeneralTheme(resolvedThemeAdmin);
+  // Ref to store authentication modes for validation (avoids circular dependency)
+  const authenticationModesRef = useRef<TInstanceAuthenticationModes[]>([]);
   // state
   const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
+  // store hooks
+  const { fetchInstanceConfigurations, formattedConfig, updateInstanceConfigurations } = useInstance();
   // derived values
   const enableSignUpConfig = formattedConfig?.ENABLE_SIGNUP ?? "";
 
-  const updateConfig = async (key: TInstanceConfigurationKeys, value: string) => {
-    setIsSubmitting(true);
+  useSWR("INSTANCE_CONFIGURATIONS", () => fetchInstanceConfigurations());
 
-    const payload = {
-      [key]: value,
-    };
+  // Create updateConfig with validation - uses authenticationModesRef for current modes
+  const updateConfig = useCallback(
+    (key: TInstanceConfigurationKeys, value: string): void => {
+      // Check if trying to disable (value === "0")
+      if (value === "0") {
+        // Check if this key is an authentication method key
+        const currentAuthModes = authenticationModesRef.current;
+        const isAuthMethodKey = currentAuthModes.some((method) => method.enabledConfigKey === key);
 
-    const updateConfigPromise = updateInstanceConfigurations(payload);
+        // Only validate if this is an authentication method key
+        if (isAuthMethodKey) {
+          const canDisable = canDisableAuthMethod(key, currentAuthModes, formattedConfig);
 
-    setPromiseToast(updateConfigPromise, {
-      loading: "Saving configuration",
-      success: {
-        title: "Success",
-        message: () => "Configuration saved successfully",
-      },
-      error: {
-        title: "Error",
-        message: () => "Failed to save configuration",
-      },
-    });
+          if (!canDisable) {
+            setToast({
+              type: TOAST_TYPE.ERROR,
+              title: "Cannot disable authentication",
+              message:
+                "At least one authentication method must remain enabled. Please enable another method before disabling this one.",
+            });
+            return;
+          }
+        }
+      }
 
-    await updateConfigPromise
-      .then(() => {
-        setIsSubmitting(false);
-      })
-      .catch((err) => {
-        console.error(err);
-        setIsSubmitting(false);
+      // Proceed with the update
+      setIsSubmitting(true);
+
+      const payload = {
+        [key]: value,
+      };
+
+      const updateConfigPromise = updateInstanceConfigurations(payload);
+
+      setPromiseToast(updateConfigPromise, {
+        loading: "Saving configuration",
+        success: {
+          title: "Success",
+          message: () => "Configuration saved successfully",
+        },
+        error: {
+          title: "Error",
+          message: () => "Failed to save configuration",
+        },
       });
-  };
+
+      void updateConfigPromise
+        .then(() => {
+          setIsSubmitting(false);
+          return undefined;
+        })
+        .catch((err) => {
+          console.error(err);
+          setIsSubmitting(false);
+        });
+    },
+    [formattedConfig, updateInstanceConfigurations]
+  );
+
+  // Get authentication modes - this will use updateConfig which includes validation
+  const authenticationModes = useAuthenticationModes({
+    disabled: isSubmitting,
+    updateConfig,
+    resolvedTheme,
+  });
+
+  // Update ref with latest authentication modes
+  authenticationModesRef.current = authenticationModes;
 
   return (
-    <>
-      <div className="relative container mx-auto w-full h-full p-4 py-4 space-y-6 flex flex-col">
-        <div className="border-b border-custom-border-100 mx-4 py-4 space-y-1 flex-shrink-0">
-          <div className="text-xl font-medium text-custom-text-100">Manage authentication modes for your instance</div>
-          <div className="text-sm font-normal text-custom-text-300">
-            Configure authentication modes for your team and restrict sign-ups to be invite only.
-          </div>
-        </div>
-        <div className="flex-grow overflow-hidden overflow-y-scroll vertical-scrollbar scrollbar-md px-4">
-          {formattedConfig ? (
-            <div className="space-y-3">
-              <div className={cn("w-full flex items-center gap-14 rounded")}>
-                <div className="flex grow items-center gap-4">
-                  <div className="grow">
-                    <div className="text-lg font-medium pb-1">Allow anyone to sign up even without an invite</div>
-                    <div className={cn("font-normal leading-5 text-custom-text-300 text-xs")}>
-                      Toggling this off will only let users sign up when they are invited.
-                    </div>
-                  </div>
-                </div>
-                <div className={`shrink-0 pr-4 ${isSubmitting && "opacity-70"}`}>
-                  <div className="flex items-center gap-4">
-                    <ToggleSwitch
-                      value={Boolean(parseInt(enableSignUpConfig))}
-                      onChange={() => {
-                        if (Boolean(parseInt(enableSignUpConfig)) === true) {
-                          updateConfig("ENABLE_SIGNUP", "0");
-                        } else {
-                          updateConfig("ENABLE_SIGNUP", "1");
-                        }
-                      }}
-                      size="sm"
-                      disabled={isSubmitting}
-                    />
-                  </div>
+    <PageWrapper
+      header={{
+        title: "Manage authentication modes for your instance",
+        description: "Configure authentication modes for your team and restrict sign-ups to be invite only.",
+      }}
+    >
+      {formattedConfig ? (
+        <div className="space-y-3">
+          <div className={cn("flex w-full items-center gap-14 rounded-sm")}>
+            <div className="flex grow items-center gap-4">
+              <div className="grow">
+                <div className="pb-1 text-16 font-medium">Allow anyone to sign up even without an invite</div>
+                <div className={cn("text-11 leading-5 font-regular text-tertiary")}>
+                  Toggling this off will only let users sign up when they are invited.
                 </div>
               </div>
-              <div className="text-lg font-medium pt-6">Available authentication modes</div>
-              <AuthenticationModes disabled={isSubmitting} updateConfig={updateConfig} />
             </div>
-          ) : (
-            <Loader className="space-y-10">
-              <Loader.Item height="50px" width="75%" />
-              <Loader.Item height="50px" width="75%" />
-              <Loader.Item height="50px" width="40%" />
-              <Loader.Item height="50px" width="40%" />
-              <Loader.Item height="50px" width="20%" />
-            </Loader>
-          )}
+            <div className={`shrink-0 pr-4 ${isSubmitting && "opacity-70"}`}>
+              <div className="flex items-center gap-4">
+                <ToggleSwitch
+                  value={Boolean(parseInt(enableSignUpConfig))}
+                  onChange={() => {
+                    if (Boolean(parseInt(enableSignUpConfig)) === true) {
+                      updateConfig("ENABLE_SIGNUP", "0");
+                    } else {
+                      updateConfig("ENABLE_SIGNUP", "1");
+                    }
+                  }}
+                  size="sm"
+                  disabled={isSubmitting}
+                />
+              </div>
+            </div>
+          </div>
+          <div className="text-lg pt-6 font-medium">Available authentication modes</div>
+          {authenticationModes.map((method) => (
+            <AuthenticationMethodCard
+              key={method.key}
+              name={method.name}
+              description={method.description}
+              icon={method.icon}
+              config={method.config}
+              disabled={isSubmitting}
+              unavailable={method.unavailable}
+            />
+          ))}
         </div>
-      </div>
-    </>
+      ) : (
+        <Loader className="space-y-10">
+          <Loader.Item height="50px" width="75%" />
+          <Loader.Item height="50px" width="75%" />
+          <Loader.Item height="50px" width="40%" />
+          <Loader.Item height="50px" width="40%" />
+          <Loader.Item height="50px" width="20%" />
+        </Loader>
+      )}
+    </PageWrapper>
   );
 });
 
diff --git a/apps/admin/app/(all)/(dashboard)/email/email-config-form.tsx b/apps/admin/app/(all)/(dashboard)/email/email-config-form.tsx
index 014be3810..794d39a3a 100644
--- a/apps/admin/app/(all)/(dashboard)/email/email-config-form.tsx
+++ b/apps/admin/app/(all)/(dashboard)/email/email-config-form.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useMemo, useState } from "react";
 import { useForm } from "react-hook-form";
 // types
@@ -157,12 +163,12 @@ export function InstanceEmailForm(props: IInstanceEmailForm) {
             />
           ))}
           <div className="flex flex-col gap-1">
-            <h4 className="text-sm text-custom-text-300">Email security</h4>
+            <h4 className="text-13 text-tertiary">Email security</h4>
             <CustomSelect
               value={emailSecurityKey}
               label={EMAIL_SECURITY_OPTIONS[emailSecurityKey]}
               onChange={handleEmailSecurityChange}
-              buttonClassName="rounded-md border-custom-border-200"
+              buttonClassName="rounded-md border-subtle"
               input
             >
               {Object.entries(EMAIL_SECURITY_OPTIONS).map(([key, value]) => (
@@ -173,12 +179,12 @@ export function InstanceEmailForm(props: IInstanceEmailForm) {
             </CustomSelect>
           </div>
         </div>
-        <div className="flex flex-col gap-6 my-6 pt-4 border-t border-custom-border-100">
+        <div className="my-6 flex flex-col gap-6 border-t border-subtle pt-4">
           <div className="flex w-full max-w-xl flex-col gap-y-10 px-1">
             <div className="mr-8 flex items-center gap-10 pt-4">
               <div className="grow">
-                <div className="text-sm font-medium text-custom-text-100">Authentication</div>
-                <div className="text-xs font-normal text-custom-text-300">
+                <div className="text-13 font-medium text-primary">Authentication</div>
+                <div className="text-11 font-regular text-tertiary">
                   This is optional, but we recommend setting up a username and a password for your SMTP server.
                 </div>
               </div>
@@ -201,17 +207,19 @@ export function InstanceEmailForm(props: IInstanceEmailForm) {
           </div>
         </div>
       </div>
-      <div className="flex max-w-4xl items-center py-1 gap-4">
+      <div className="flex max-w-4xl items-center gap-4 py-1">
         <Button
           variant="primary"
+          size="lg"
           onClick={handleSubmit(onSubmit)}
           loading={isSubmitting}
           disabled={!isValid || !isDirty}
         >
-          {isSubmitting ? "Saving..." : "Save changes"}
+          {isSubmitting ? "Saving" : "Save changes"}
         </Button>
         <Button
-          variant="outline-primary"
+          variant="secondary"
+          size="lg"
           onClick={() => setIsSendTestEmailModalOpen(true)}
           loading={isSubmitting}
           disabled={!isValid}
diff --git a/apps/admin/app/(all)/(dashboard)/email/page.tsx b/apps/admin/app/(all)/(dashboard)/email/page.tsx
index 869636b6a..e74b34ba8 100644
--- a/apps/admin/app/(all)/(dashboard)/email/page.tsx
+++ b/apps/admin/app/(all)/(dashboard)/email/page.tsx
@@ -1,12 +1,21 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useEffect, useState } from "react";
 import { observer } from "mobx-react";
 import useSWR from "swr";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import { Loader, ToggleSwitch } from "@plane/ui";
+// components
+import { PageWrapper } from "@/components/common/page-wrapper";
 // hooks
 import { useInstance } from "@/hooks/store";
-// components
+// types
 import type { Route } from "./+types/page";
+// local
 import { InstanceEmailForm } from "./email-config-form";
 
 const InstanceEmailPage = observer(function InstanceEmailPage(_props: Route.ComponentProps) {
@@ -49,44 +58,43 @@ const InstanceEmailPage = observer(function InstanceEmailPage(_props: Route.Comp
   }, [formattedConfig]);
 
   return (
-    <>
-      <div className="relative container mx-auto w-full h-full p-4 py-4 space-y-6 flex flex-col">
-        <div className="flex items-center justify-between gap-4 border-b border-custom-border-100 mx-4 py-4 space-y-1 flex-shrink-0">
-          <div className="py-4 space-y-1 flex-shrink-0">
-            <div className="text-xl font-medium text-custom-text-100">Secure emails from your own instance</div>
-            <div className="text-sm font-normal text-custom-text-300">
-              Plane can send useful emails to you and your users from your own instance without talking to the Internet.
-              <div className="text-sm font-normal text-custom-text-300">
-                Set it up below and please test your settings before you save them.&nbsp;
-                <span className="text-red-400">Misconfigs can lead to email bounces and errors.</span>
-              </div>
+    <PageWrapper
+      header={{
+        title: "Secure emails from your own instance",
+        description: (
+          <>
+            Plane can send useful emails to you and your users from your own instance without talking to the Internet.
+            <div className="text-13 font-regular text-tertiary">
+              Set it up below and please test your settings before you save them.&nbsp;
+              <span className="text-danger-primary">Misconfigs can lead to email bounces and errors.</span>
             </div>
-          </div>
-          {isLoading ? (
-            <Loader>
-              <Loader.Item width="24px" height="16px" className="rounded-full" />
-            </Loader>
+          </>
+        ),
+        actions: isLoading ? (
+          <Loader>
+            <Loader.Item width="24px" height="16px" className="rounded-full" />
+          </Loader>
+        ) : (
+          <ToggleSwitch value={isSMTPEnabled} onChange={handleToggle} size="sm" disabled={isSubmitting} />
+        ),
+      }}
+    >
+      {isSMTPEnabled && !isLoading && (
+        <>
+          {formattedConfig ? (
+            <InstanceEmailForm config={formattedConfig} />
           ) : (
-            <ToggleSwitch value={isSMTPEnabled} onChange={handleToggle} size="sm" disabled={isSubmitting} />
+            <Loader className="space-y-10">
+              <Loader.Item height="50px" width="75%" />
+              <Loader.Item height="50px" width="75%" />
+              <Loader.Item height="50px" width="40%" />
+              <Loader.Item height="50px" width="40%" />
+              <Loader.Item height="50px" width="20%" />
+            </Loader>
           )}
-        </div>
-        {isSMTPEnabled && !isLoading && (
-          <div className="flex-grow overflow-hidden overflow-y-scroll vertical-scrollbar scrollbar-md px-4">
-            {formattedConfig ? (
-              <InstanceEmailForm config={formattedConfig} />
-            ) : (
-              <Loader className="space-y-10">
-                <Loader.Item height="50px" width="75%" />
-                <Loader.Item height="50px" width="75%" />
-                <Loader.Item height="50px" width="40%" />
-                <Loader.Item height="50px" width="40%" />
-                <Loader.Item height="50px" width="20%" />
-              </Loader>
-            )}
-          </div>
-        )}
-      </div>
-    </>
+        </>
+      )}
+    </PageWrapper>
   );
 });
 
diff --git a/apps/admin/app/(all)/(dashboard)/email/test-email-modal.tsx b/apps/admin/app/(all)/(dashboard)/email/test-email-modal.tsx
index 260b4fbaf..630b886b3 100644
--- a/apps/admin/app/(all)/(dashboard)/email/test-email-modal.tsx
+++ b/apps/admin/app/(all)/(dashboard)/email/test-email-modal.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useEffect, useState, Fragment } from "react";
 import { Dialog, Transition } from "@headlessui/react";
 // plane imports
@@ -72,7 +78,7 @@ export function SendTestEmailModal(props: Props) {
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
+          <div className="fixed inset-0 bg-backdrop transition-opacity" />
         </Transition.Child>
         <div className="fixed inset-0 z-20 overflow-y-auto">
           <div className="my-10 flex justify-center p-4 text-center sm:p-0 md:my-20">
@@ -85,8 +91,8 @@ export function SendTestEmailModal(props: Props) {
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform rounded-lg bg-custom-background-100 p-5 px-4 text-left shadow-custom-shadow-md transition-all w-full sm:max-w-xl">
-                <h3 className="text-lg font-medium leading-6 text-custom-text-100">
+              <Dialog.Panel className="relative w-full transform rounded-lg bg-surface-1 p-5 px-4 text-left shadow-raised-200 transition-all sm:max-w-xl">
+                <h3 className="text-16 leading-6 font-medium text-primary">
                   {sendEmailStep === ESendEmailSteps.SEND_EMAIL
                     ? "Send test email"
                     : sendEmailStep === ESendEmailSteps.SUCCESS
@@ -101,12 +107,12 @@ export function SendTestEmailModal(props: Props) {
                       value={receiverEmail}
                       onChange={(e) => setReceiverEmail(e.target.value)}
                       placeholder="Receiver email"
-                      className="w-full resize-none text-lg"
+                      className="w-full resize-none text-16"
                       tabIndex={1}
                     />
                   )}
                   {sendEmailStep === ESendEmailSteps.SUCCESS && (
-                    <div className="flex flex-col gap-y-4 text-sm">
+                    <div className="flex flex-col gap-y-4 text-13">
                       <p>
                         We have sent the test email to {receiverEmail}. Please check your spam folder if you cannot find
                         it.
@@ -114,14 +120,14 @@ export function SendTestEmailModal(props: Props) {
                       <p>If you still cannot find it, recheck your SMTP configuration and trigger a new test email.</p>
                     </div>
                   )}
-                  {sendEmailStep === ESendEmailSteps.FAILED && <div className="text-sm">{error}</div>}
-                  <div className="flex items-center gap-2 justify-end mt-5">
-                    <Button variant="neutral-primary" size="sm" onClick={handleClose} tabIndex={2}>
+                  {sendEmailStep === ESendEmailSteps.FAILED && <div className="text-13">{error}</div>}
+                  <div className="mt-5 flex items-center justify-end gap-2">
+                    <Button variant="secondary" size="lg" onClick={handleClose} tabIndex={2}>
                       {sendEmailStep === ESendEmailSteps.SEND_EMAIL ? "Cancel" : "Close"}
                     </Button>
                     {sendEmailStep === ESendEmailSteps.SEND_EMAIL && (
-                      <Button variant="primary" size="sm" loading={isLoading} onClick={handleSubmit} tabIndex={3}>
-                        {isLoading ? "Sending email..." : "Send email"}
+                      <Button variant="primary" size="lg" loading={isLoading} onClick={handleSubmit} tabIndex={3}>
+                        {isLoading ? "Sending email" : "Send email"}
                       </Button>
                     )}
                   </div>
diff --git a/apps/admin/app/(all)/(dashboard)/general/form.tsx b/apps/admin/app/(all)/(dashboard)/general/form.tsx
index db663f777..0b402b76c 100644
--- a/apps/admin/app/(all)/(dashboard)/general/form.tsx
+++ b/apps/admin/app/(all)/(dashboard)/general/form.tsx
@@ -1,17 +1,23 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import { Controller, useForm } from "react-hook-form";
 import { Telescope } from "lucide-react";
-// types
+// plane imports
 import { Button } from "@plane/propel/button";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { IInstance, IInstanceAdmin } from "@plane/types";
-// ui
 import { Input, ToggleSwitch } from "@plane/ui";
 // components
 import { ControllerInput } from "@/components/common/controller-input";
-import { useInstance } from "@/hooks/store";
-import { IntercomConfig } from "./intercom";
 // hooks
+import { useInstance } from "@/hooks/store";
+// components
+import { IntercomConfig } from "./intercom";
 
 export interface IGeneralConfigurationForm {
   instance: IInstance;
@@ -27,8 +33,8 @@ export const GeneralConfigurationForm = observer(function GeneralConfigurationFo
   const {
     handleSubmit,
     control,
-    watch,
     formState: { errors, isSubmitting },
+    watch,
   } = useForm<Partial<IInstance>>({
     defaultValues: {
       instance_name: instance?.instance_name,
@@ -63,8 +69,8 @@ export const GeneralConfigurationForm = observer(function GeneralConfigurationFo
 
   return (
     <div className="space-y-8">
-      <div className="space-y-3">
-        <div className="text-lg font-medium">Instance details</div>
+      <div className="space-y-4">
+        <div className="text-16 font-medium text-primary">Instance details</div>
         <div className="grid-col grid w-full grid-cols-1 items-center justify-between gap-8 md:grid-cols-2 lg:grid-cols-3">
           <ControllerInput
             key="instance_name"
@@ -78,54 +84,52 @@ export const GeneralConfigurationForm = observer(function GeneralConfigurationFo
           />
 
           <div className="flex flex-col gap-1">
-            <h4 className="text-sm text-custom-text-300">Email</h4>
+            <h4 className="text-13 text-tertiary">Email</h4>
             <Input
               id="email"
               name="email"
               type="email"
               value={instanceAdmins[0]?.user_detail?.email ?? ""}
               placeholder="Admin email"
-              className="w-full cursor-not-allowed !text-custom-text-400"
+              className="w-full cursor-not-allowed !text-placeholder"
               autoComplete="on"
               disabled
             />
           </div>
 
           <div className="flex flex-col gap-1">
-            <h4 className="text-sm text-custom-text-300">Instance ID</h4>
+            <h4 className="text-13 text-tertiary">Instance ID</h4>
             <Input
               id="instance_id"
               name="instance_id"
               type="text"
               value={instance.instance_id}
-              className="w-full cursor-not-allowed rounded-md font-medium !text-custom-text-400"
+              className="w-full cursor-not-allowed rounded-md font-medium !text-placeholder"
               disabled
             />
           </div>
         </div>
       </div>
 
-      <div className="space-y-3">
-        <div className="text-lg font-medium">Chat + telemetry</div>
+      <div className="space-y-6">
+        <div className="border-b border-subtle pb-1.5 text-16 font-medium text-primary">Chat + telemetry</div>
         <IntercomConfig isTelemetryEnabled={watch("is_telemetry_enabled") ?? false} />
-        <div className="flex items-center gap-14 px-4 py-3 border border-custom-border-200 rounded">
-          <div className="grow flex items-center gap-4">
+        <div className="flex items-center gap-14">
+          <div className="flex grow items-center gap-4">
             <div className="shrink-0">
-              <div className="flex items-center justify-center w-10 h-10 bg-custom-background-80 rounded-full">
-                <Telescope className="w-6 h-6 text-custom-text-300/80 p-0.5" />
+              <div className="flex size-11 items-center justify-center rounded-lg bg-layer-1">
+                <Telescope className="size-5 text-tertiary" />
               </div>
             </div>
             <div className="grow">
-              <div className="text-sm font-medium text-custom-text-100 leading-5">
-                Let Plane collect anonymous usage data
-              </div>
-              <div className="text-xs font-normal text-custom-text-300 leading-5">
+              <div className="text-13 leading-5 font-medium text-primary">Let Plane collect anonymous usage data</div>
+              <div className="text-11 leading-5 font-regular text-tertiary">
                 No PII is collected.This anonymized data is used to understand how you use Plane and build new features
                 in line with{" "}
                 <a
                   href="https://developers.plane.so/self-hosting/telemetry"
                   target="_blank"
-                  className="text-custom-primary-100 hover:underline"
+                  className="text-accent-primary hover:underline"
                   rel="noreferrer"
                 >
                   our Telemetry Policy.
@@ -146,8 +150,15 @@ export const GeneralConfigurationForm = observer(function GeneralConfigurationFo
       </div>
 
       <div>
-        <Button variant="primary" onClick={handleSubmit(onSubmit)} loading={isSubmitting}>
-          {isSubmitting ? "Saving..." : "Save changes"}
+        <Button
+          variant="primary"
+          size="lg"
+          onClick={() => {
+            void handleSubmit(onSubmit)();
+          }}
+          loading={isSubmitting}
+        >
+          {isSubmitting ? "Saving" : "Save changes"}
         </Button>
       </div>
     </div>
diff --git a/apps/admin/app/(all)/(dashboard)/general/intercom.tsx b/apps/admin/app/(all)/(dashboard)/general/intercom.tsx
index a7659f425..656e2d690 100644
--- a/apps/admin/app/(all)/(dashboard)/general/intercom.tsx
+++ b/apps/admin/app/(all)/(dashboard)/general/intercom.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useState } from "react";
 import { observer } from "mobx-react";
 import useSWR from "swr";
@@ -44,22 +50,22 @@ export const IntercomConfig = observer(function IntercomConfig(props: TIntercomC
   };
 
   const enableIntercomConfig = () => {
-    submitInstanceConfigurations({ IS_INTERCOM_ENABLED: isIntercomEnabled ? "0" : "1" });
+    void submitInstanceConfigurations({ IS_INTERCOM_ENABLED: isIntercomEnabled ? "0" : "1" });
   };
 
   return (
     <>
-      <div className="flex items-center gap-14 px-4 py-3 border border-custom-border-200 rounded">
-        <div className="grow flex items-center gap-4">
+      <div className="flex items-center gap-14">
+        <div className="flex grow items-center gap-4">
           <div className="shrink-0">
-            <div className="flex items-center justify-center w-10 h-10 bg-custom-background-80 rounded-full">
-              <MessageSquare className="w-6 h-6 text-custom-text-300/80 p-0.5" />
+            <div className="flex size-11 items-center justify-center rounded-lg bg-layer-1">
+              <MessageSquare className="size-5 p-0.5 text-tertiary" />
             </div>
           </div>
 
           <div className="grow">
-            <div className="text-sm font-medium text-custom-text-100 leading-5">Chat with us</div>
-            <div className="text-xs font-normal text-custom-text-300 leading-5">
+            <div className="text-13 leading-5 font-medium text-primary">Chat with us</div>
+            <div className="text-11 leading-5 font-regular text-tertiary">
               Let your users chat with us via Intercom or another service. Toggling Telemetry off turns this off
               automatically.
             </div>
diff --git a/apps/admin/app/(all)/(dashboard)/general/page.tsx b/apps/admin/app/(all)/(dashboard)/general/page.tsx
index 5a70e30aa..cb0a8c662 100644
--- a/apps/admin/app/(all)/(dashboard)/general/page.tsx
+++ b/apps/admin/app/(all)/(dashboard)/general/page.tsx
@@ -1,30 +1,32 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
+// components
+import { PageWrapper } from "@/components/common/page-wrapper";
 // hooks
 import { useInstance } from "@/hooks/store";
-// components
-import type { Route } from "./+types/page";
+// local imports
 import { GeneralConfigurationForm } from "./form";
+// types
+import type { Route } from "./+types/page";
 
 function GeneralPage() {
   const { instance, instanceAdmins } = useInstance();
 
   return (
-    <>
-      <div className="relative container mx-auto w-full h-full p-4 py-4 space-y-6 flex flex-col">
-        <div className="border-b border-custom-border-100 mx-4 py-4 space-y-1 flex-shrink-0">
-          <div className="text-xl font-medium text-custom-text-100">General settings</div>
-          <div className="text-sm font-normal text-custom-text-300">
-            Change the name of your instance and instance admin e-mail addresses. Enable or disable telemetry in your
-            instance.
-          </div>
-        </div>
-        <div className="flex-grow overflow-hidden overflow-y-scroll vertical-scrollbar scrollbar-md px-4">
-          {instance && instanceAdmins && (
-            <GeneralConfigurationForm instance={instance} instanceAdmins={instanceAdmins} />
-          )}
-        </div>
-      </div>
-    </>
+    <PageWrapper
+      header={{
+        title: "General settings",
+        description:
+          "Change the name of your instance and instance admin e-mail addresses. Enable or disable telemetry in your instance.",
+      }}
+    >
+      {instance && instanceAdmins && <GeneralConfigurationForm instance={instance} instanceAdmins={instanceAdmins} />}
+    </PageWrapper>
   );
 }
 
diff --git a/apps/admin/app/(all)/(dashboard)/image/form.tsx b/apps/admin/app/(all)/(dashboard)/image/form.tsx
index 9227a5ba9..72ab51339 100644
--- a/apps/admin/app/(all)/(dashboard)/image/form.tsx
+++ b/apps/admin/app/(all)/(dashboard)/image/form.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useForm } from "react-hook-form";
 import { Button } from "@plane/propel/button";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
@@ -56,7 +62,7 @@ export function InstanceImageConfigForm(props: IInstanceImageConfigForm) {
               <a
                 href="https://unsplash.com/documentation#creating-a-developer-account"
                 target="_blank"
-                className="text-custom-primary-100 hover:underline"
+                className="text-accent-primary hover:underline"
                 rel="noreferrer"
               >
                 Learn more.
@@ -70,8 +76,8 @@ export function InstanceImageConfigForm(props: IInstanceImageConfigForm) {
       </div>
 
       <div>
-        <Button variant="primary" onClick={handleSubmit(onSubmit)} loading={isSubmitting}>
-          {isSubmitting ? "Saving..." : "Save changes"}
+        <Button variant="primary" size="lg" onClick={handleSubmit(onSubmit)} loading={isSubmitting}>
+          {isSubmitting ? "Saving" : "Save changes"}
         </Button>
       </div>
     </div>
diff --git a/apps/admin/app/(all)/(dashboard)/image/page.tsx b/apps/admin/app/(all)/(dashboard)/image/page.tsx
index 57dd3a0fd..e410e87eb 100644
--- a/apps/admin/app/(all)/(dashboard)/image/page.tsx
+++ b/apps/admin/app/(all)/(dashboard)/image/page.tsx
@@ -1,10 +1,19 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import useSWR from "swr";
 import { Loader } from "@plane/ui";
+// components
+import { PageWrapper } from "@/components/common/page-wrapper";
 // hooks
 import { useInstance } from "@/hooks/store";
-// local
+// types
 import type { Route } from "./+types/page";
+// local
 import { InstanceImageConfigForm } from "./form";
 
 const InstanceImagePage = observer(function InstanceImagePage(_props: Route.ComponentProps) {
@@ -14,26 +23,21 @@ const InstanceImagePage = observer(function InstanceImagePage(_props: Route.Comp
   useSWR("INSTANCE_CONFIGURATIONS", () => fetchInstanceConfigurations());
 
   return (
-    <>
-      <div className="relative container mx-auto w-full h-full p-4 py-4 space-y-6 flex flex-col">
-        <div className="border-b border-custom-border-100 mx-4 py-4 space-y-1 flex-shrink-0">
-          <div className="text-xl font-medium text-custom-text-100">Third-party image libraries</div>
-          <div className="text-sm font-normal text-custom-text-300">
-            Let your users search and choose images from third-party libraries
-          </div>
-        </div>
-        <div className="flex-grow overflow-hidden overflow-y-scroll vertical-scrollbar scrollbar-md px-4">
-          {formattedConfig ? (
-            <InstanceImageConfigForm config={formattedConfig} />
-          ) : (
-            <Loader className="space-y-8">
-              <Loader.Item height="50px" width="50%" />
-              <Loader.Item height="50px" width="20%" />
-            </Loader>
-          )}
-        </div>
-      </div>
-    </>
+    <PageWrapper
+      header={{
+        title: "Third-party image libraries",
+        description: "Let your users search and choose images from third-party libraries",
+      }}
+    >
+      {formattedConfig ? (
+        <InstanceImageConfigForm config={formattedConfig} />
+      ) : (
+        <Loader className="space-y-8">
+          <Loader.Item height="50px" width="50%" />
+          <Loader.Item height="50px" width="20%" />
+        </Loader>
+      )}
+    </PageWrapper>
   );
 });
 
diff --git a/apps/admin/app/(all)/(dashboard)/layout.tsx b/apps/admin/app/(all)/(dashboard)/layout.tsx
index b0a766d2f..e56acf7f9 100644
--- a/apps/admin/app/(all)/(dashboard)/layout.tsx
+++ b/apps/admin/app/(all)/(dashboard)/layout.tsx
@@ -1,15 +1,21 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useEffect } from "react";
 import { observer } from "mobx-react";
 import { useRouter } from "next/navigation";
 import { Outlet } from "react-router";
 // components
+import { AdminHeader } from "@/components/common/header";
 import { LogoSpinner } from "@/components/common/logo-spinner";
-import { NewUserPopup } from "@/components/new-user-popup";
+import { NewUserPopup } from "@/components/common/new-user-popup";
 // hooks
 import { useUser } from "@/hooks/store";
 // local components
 import type { Route } from "./+types/layout";
-import { AdminHeader } from "./header";
 import { AdminSidebar } from "./sidebar";
 
 function AdminLayout(_props: Route.ComponentProps) {
@@ -34,9 +40,9 @@ function AdminLayout(_props: Route.ComponentProps) {
     return (
       <div className="relative flex h-screen w-screen overflow-hidden">
         <AdminSidebar />
-        <main className="relative flex h-full w-full flex-col overflow-hidden bg-custom-background-100">
+        <main className="relative flex h-full w-full flex-col overflow-hidden bg-surface-1">
           <AdminHeader />
-          <div className="h-full w-full overflow-hidden">
+          <div className="vertical-scrollbar scrollbar-md h-full w-full overflow-hidden overflow-y-scroll">
             <Outlet />
           </div>
         </main>
diff --git a/apps/admin/app/(all)/(dashboard)/sidebar-dropdown.tsx b/apps/admin/app/(all)/(dashboard)/sidebar-dropdown.tsx
index f2458f869..d1ddb1f5a 100644
--- a/apps/admin/app/(all)/(dashboard)/sidebar-dropdown.tsx
+++ b/apps/admin/app/(all)/(dashboard)/sidebar-dropdown.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { Fragment, useEffect, useState } from "react";
 import { observer } from "mobx-react";
 import { useTheme as useNextTheme } from "next-themes";
@@ -33,20 +39,20 @@ export const AdminSidebarDropdown = observer(function AdminSidebarDropdown() {
   const getSidebarMenuItems = () => (
     <Menu.Items
       className={cn(
-        "absolute left-0 z-20 mt-1.5 flex w-52 flex-col divide-y divide-custom-sidebar-border-100 rounded-md border border-custom-sidebar-border-200 bg-custom-sidebar-background-100 px-1 py-2 text-xs shadow-lg outline-none",
+        "shadow-lg absolute left-0 z-20 mt-1.5 flex w-52 flex-col divide-y divide-subtle rounded-md border border-subtle bg-surface-1 px-1 py-2 text-11 outline-none",
         {
           "left-4": isSidebarCollapsed,
         }
       )}
     >
       <div className="flex flex-col gap-2.5 pb-2">
-        <span className="px-2 text-custom-sidebar-text-200 truncate">{currentUser?.email}</span>
+        <span className="truncate px-2 text-secondary">{currentUser?.email}</span>
       </div>
       <div className="py-2">
         <Menu.Item
           as="button"
           type="button"
-          className="flex w-full items-center gap-2 rounded px-2 py-1 hover:bg-custom-sidebar-background-80"
+          className="flex w-full items-center gap-2 rounded-sm px-2 py-1 hover:bg-layer-1-hover"
           onClick={handleThemeSwitch}
         >
           <Palette className="h-4 w-4 stroke-[1.5]" />
@@ -59,7 +65,7 @@ export const AdminSidebarDropdown = observer(function AdminSidebarDropdown() {
           <Menu.Item
             as="button"
             type="submit"
-            className="flex w-full items-center gap-2 rounded px-2 py-1 hover:bg-custom-sidebar-background-80"
+            className="flex w-full items-center gap-2 rounded-sm px-2 py-1 hover:bg-layer-1-hover"
           >
             <LogOut className="h-4 w-4 stroke-[1.5]" />
             Sign out
@@ -71,14 +77,14 @@ export const AdminSidebarDropdown = observer(function AdminSidebarDropdown() {
 
   useEffect(() => {
     if (csrfToken === undefined)
-      authService.requestCSRFToken().then((data) => data?.csrf_token && setCsrfToken(data.csrf_token));
+      void authService.requestCSRFToken().then((data) => data?.csrf_token && setCsrfToken(data.csrf_token));
   }, [csrfToken]);
 
   return (
-    <div className="flex max-h-header items-center gap-x-5 gap-y-2 border-b border-custom-sidebar-border-200 px-4 py-3.5">
+    <div className="flex max-h-header items-center gap-x-5 gap-y-2 border-b border-subtle px-4 py-2.5">
       <div className="h-full w-full truncate">
         <div
-          className={`flex flex-grow items-center gap-x-2 truncate rounded py-1 ${
+          className={`flex flex-grow items-center gap-x-2 truncate rounded-sm ${
             isSidebarCollapsed ? "justify-center" : ""
           }`}
         >
@@ -88,8 +94,8 @@ export const AdminSidebarDropdown = observer(function AdminSidebarDropdown() {
                 "cursor-default": !isSidebarCollapsed,
               })}
             >
-              <div className="flex h-7 w-7 flex-shrink-0 items-center justify-center rounded bg-custom-sidebar-background-80">
-                <UserCog2 className="h-5 w-5 text-custom-text-200" />
+              <div className="flex size-8 flex-shrink-0 items-center justify-center rounded-sm bg-layer-1">
+                <UserCog2 className="size-5 text-primary" />
               </div>
             </Menu.Button>
             {isSidebarCollapsed && (
@@ -109,7 +115,7 @@ export const AdminSidebarDropdown = observer(function AdminSidebarDropdown() {
 
           {!isSidebarCollapsed && (
             <div className="flex w-full gap-2">
-              <h4 className="grow truncate text-base font-medium text-custom-text-200">Instance admin</h4>
+              <h4 className="grow truncate text-body-md-medium text-primary">Instance admin</h4>
             </div>
           )}
         </div>
@@ -123,7 +129,7 @@ export const AdminSidebarDropdown = observer(function AdminSidebarDropdown() {
               src={getFileURL(currentUser.avatar_url)}
               size={24}
               shape="square"
-              className="!text-base"
+              className="!text-body-sm-medium"
             />
           </Menu.Button>
 
diff --git a/apps/admin/app/(all)/(dashboard)/sidebar-help-section.tsx b/apps/admin/app/(all)/(dashboard)/sidebar-help-section.tsx
index da09ef348..51401f312 100644
--- a/apps/admin/app/(all)/(dashboard)/sidebar-help-section.tsx
+++ b/apps/admin/app/(all)/(dashboard)/sidebar-help-section.tsx
@@ -1,19 +1,23 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useState, useRef } from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
-import { ExternalLink, HelpCircle, MoveLeft } from "lucide-react";
+import { HelpCircle, MessageSquare, MoveLeft } from "lucide-react";
 import { Transition } from "@headlessui/react";
-// plane internal packages
 import { WEB_BASE_URL } from "@plane/constants";
-import { DiscordIcon, GithubIcon, PageIcon } from "@plane/propel/icons";
+// plane internal packages
+import { GithubIcon, NewTabIcon, PageIcon } from "@plane/propel/icons";
 import { Tooltip } from "@plane/propel/tooltip";
 import { cn } from "@plane/utils";
 // hooks
-import { useTheme } from "@/hooks/store";
+import { useInstance, useTheme } from "@/hooks/store";
 // assets
 
-import packageJson from "package.json";
-
 const helpOptions = [
   {
     name: "Documentation",
@@ -21,9 +25,9 @@ const helpOptions = [
     Icon: PageIcon,
   },
   {
-    name: "Join our Discord",
-    href: "https://discord.com/invite/A92xrEGCge",
-    Icon: DiscordIcon,
+    name: "Join our Forum",
+    href: "https://forum.plane.so",
+    Icon: MessageSquare,
   },
   {
     name: "Report a bug",
@@ -36,6 +40,7 @@ export const AdminSidebarHelpSection = observer(function AdminSidebarHelpSection
   // states
   const [isNeedHelpOpen, setIsNeedHelpOpen] = useState(false);
   // store
+  const { instance } = useInstance();
   const { isSidebarCollapsed, toggleSidebar } = useTheme();
   // refs
   const helpOptionsRef = useRef<HTMLDivElement | null>(null);
@@ -45,9 +50,9 @@ export const AdminSidebarHelpSection = observer(function AdminSidebarHelpSection
   return (
     <div
       className={cn(
-        "flex w-full items-center justify-between gap-1 self-baseline border-t border-custom-border-200 bg-custom-sidebar-background-100 px-4 h-14 flex-shrink-0",
+        "flex h-14 w-full flex-shrink-0 items-center justify-between gap-1 self-baseline border-t border-subtle bg-surface-1 px-4",
         {
-          "flex-col h-auto py-1.5": isSidebarCollapsed,
+          "h-auto flex-col py-1.5": isSidebarCollapsed,
         }
       )}
     >
@@ -55,32 +60,32 @@ export const AdminSidebarHelpSection = observer(function AdminSidebarHelpSection
         <Tooltip tooltipContent="Redirect to Plane" position="right" className="ml-4" disabled={!isSidebarCollapsed}>
           <a
             href={redirectionLink}
-            className={`relative px-2 py-1.5 flex items-center gap-2 font-medium rounded border border-custom-primary-100/20 bg-custom-primary-100/10 text-xs text-custom-primary-200 whitespace-nowrap`}
+            className={`relative flex items-center gap-1 rounded-sm bg-layer-1 px-2 py-1 text-body-xs-medium whitespace-nowrap text-secondary`}
           >
-            <ExternalLink size={14} />
+            <NewTabIcon width={14} height={14} />
             {!isSidebarCollapsed && "Redirect to Plane"}
           </a>
         </Tooltip>
         <Tooltip tooltipContent="Help" position={isSidebarCollapsed ? "right" : "top"} className="ml-4">
           <button
             type="button"
-            className={`ml-auto grid place-items-center rounded-md p-1.5 text-custom-text-200 outline-none hover:bg-custom-background-90 hover:text-custom-text-100 ${
+            className={`ml-auto grid place-items-center rounded-md p-1.5 text-secondary outline-none hover:bg-layer-1-hover hover:text-primary ${
               isSidebarCollapsed ? "w-full" : ""
             }`}
             onClick={() => setIsNeedHelpOpen((prev) => !prev)}
           >
-            <HelpCircle className="h-3.5 w-3.5" />
+            <HelpCircle className="size-4" />
           </button>
         </Tooltip>
         <Tooltip tooltipContent="Toggle sidebar" position={isSidebarCollapsed ? "right" : "top"} className="ml-4">
           <button
             type="button"
-            className={`grid place-items-center rounded-md p-1.5 text-custom-text-200 outline-none hover:bg-custom-background-90 hover:text-custom-text-100 ${
+            className={`grid place-items-center rounded-md p-1.5 text-secondary outline-none hover:bg-layer-1-hover hover:text-primary ${
               isSidebarCollapsed ? "w-full" : ""
             }`}
             onClick={() => toggleSidebar(!isSidebarCollapsed)}
           >
-            <MoveLeft className={`h-3.5 w-3.5 duration-300 ${isSidebarCollapsed ? "rotate-180" : ""}`} />
+            <MoveLeft className={`size-4 duration-300 ${isSidebarCollapsed ? "rotate-180" : ""}`} />
           </button>
         </Tooltip>
       </div>
@@ -96,9 +101,9 @@ export const AdminSidebarHelpSection = observer(function AdminSidebarHelpSection
           leaveTo="transform opacity-0 scale-95"
         >
           <div
-            className={`absolute bottom-2 min-w-[10rem] z-[15] ${
+            className={`absolute bottom-2 z-[15] min-w-[10rem] ${
               isSidebarCollapsed ? "left-full" : "-left-[75px]"
-            } divide-y divide-custom-border-200 whitespace-nowrap rounded bg-custom-background-100 p-1 shadow-custom-shadow-xs`}
+            } divide-y divide-subtle-1 rounded-sm bg-surface-1 p-1 whitespace-nowrap shadow-raised-100`}
             ref={helpOptionsRef}
           >
             <div className="space-y-1 pb-2">
@@ -106,11 +111,11 @@ export const AdminSidebarHelpSection = observer(function AdminSidebarHelpSection
                 if (href)
                   return (
                     <Link href={href} key={name} target="_blank">
-                      <div className="flex items-center gap-x-2 rounded px-2 py-1 text-xs hover:bg-custom-background-80">
+                      <div className="flex items-center gap-x-2 rounded-sm px-2 py-1 text-11 hover:bg-layer-1-hover">
                         <div className="grid flex-shrink-0 place-items-center">
-                          <Icon className="h-3.5 w-3.5 text-custom-text-200" width={14} height={14} />
+                          <Icon className="h-3.5 w-3.5 text-secondary" />
                         </div>
-                        <span className="text-xs">{name}</span>
+                        <span className="text-11">{name}</span>
                       </div>
                     </Link>
                   );
@@ -119,17 +124,17 @@ export const AdminSidebarHelpSection = observer(function AdminSidebarHelpSection
                     <button
                       key={name}
                       type="button"
-                      className="flex w-full items-center gap-x-2 rounded px-2 py-1 text-xs hover:bg-custom-background-80"
+                      className="flex w-full items-center gap-x-2 rounded-sm px-2 py-1 text-11 hover:bg-layer-1"
                     >
                       <div className="grid flex-shrink-0 place-items-center">
-                        <Icon className="h-3.5 w-3.5 text-custom-text-200" />
+                        <Icon className="h-3.5 w-3.5 text-secondary" />
                       </div>
-                      <span className="text-xs">{name}</span>
+                      <span className="text-11">{name}</span>
                     </button>
                   );
               })}
             </div>
-            <div className="px-2 pb-1 pt-2 text-[10px]">Version: v{packageJson.version}</div>
+            <div className="px-2 pt-2 pb-1 text-10">Version: v{instance?.current_version}</div>
           </div>
         </Transition>
       </div>
diff --git a/apps/admin/app/(all)/(dashboard)/sidebar-menu.tsx b/apps/admin/app/(all)/(dashboard)/sidebar-menu.tsx
index 4fe17e0bf..319cf0173 100644
--- a/apps/admin/app/(all)/(dashboard)/sidebar-menu.tsx
+++ b/apps/admin/app/(all)/(dashboard)/sidebar-menu.tsx
@@ -1,58 +1,26 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-import { Image, BrainCog, Cog, Lock, Mail } from "lucide-react";
 // plane internal packages
-import { WorkspaceIcon } from "@plane/propel/icons";
 import { Tooltip } from "@plane/propel/tooltip";
 import { cn } from "@plane/utils";
 // hooks
 import { useTheme } from "@/hooks/store";
-
-const INSTANCE_ADMIN_LINKS = [
-  {
-    Icon: Cog,
-    name: "General",
-    description: "Identify your instances and get key details.",
-    href: `/general/`,
-  },
-  {
-    Icon: WorkspaceIcon,
-    name: "Workspaces",
-    description: "Manage all workspaces on this instance.",
-    href: `/workspace/`,
-  },
-  {
-    Icon: Mail,
-    name: "Email",
-    description: "Configure your SMTP controls.",
-    href: `/email/`,
-  },
-  {
-    Icon: Lock,
-    name: "Authentication",
-    description: "Configure authentication modes.",
-    href: `/authentication/`,
-  },
-  {
-    Icon: BrainCog,
-    name: "Artificial intelligence",
-    description: "Configure your OpenAI creds.",
-    href: `/ai/`,
-  },
-  {
-    Icon: Image,
-    name: "Images in Plane",
-    description: "Allow third-party image libraries.",
-    href: `/image/`,
-  },
-];
+import { useSidebarMenu } from "@/hooks/use-sidebar-menu";
 
 export const AdminSidebarMenu = observer(function AdminSidebarMenu() {
-  // store hooks
-  const { isSidebarCollapsed, toggleSidebar } = useTheme();
   // router
   const pathName = usePathname();
+  // store hooks
+  const { isSidebarCollapsed, toggleSidebar } = useTheme();
+  // derived values
+  const sidebarMenu = useSidebarMenu();
 
   const handleItemClick = () => {
     if (window.innerWidth < 768) {
@@ -61,41 +29,28 @@ export const AdminSidebarMenu = observer(function AdminSidebarMenu() {
   };
 
   return (
-    <div className="flex h-full w-full flex-col gap-2.5 overflow-y-scroll vertical-scrollbar scrollbar-sm px-4 py-4">
-      {INSTANCE_ADMIN_LINKS.map((item, index) => {
-        const isActive = item.href === pathName || pathName.includes(item.href);
+    <div className="vertical-scrollbar flex scrollbar-sm h-full w-full flex-col gap-2.5 overflow-y-scroll px-4 py-4">
+      {sidebarMenu.map((item, index) => {
+        const isActive = item.href === pathName || pathName?.includes(item.href);
         return (
           <Link key={index} href={item.href} onClick={handleItemClick}>
             <div>
               <Tooltip tooltipContent={item.name} position="right" className="ml-2" disabled={!isSidebarCollapsed}>
                 <div
                   className={cn(
-                    `group flex w-full items-center gap-3 rounded-md px-3 py-2 outline-none transition-colors`,
-                    isActive
-                      ? "bg-custom-primary-100/10 text-custom-primary-100"
-                      : "text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80 focus:bg-custom-sidebar-background-80",
+                    "group flex w-full items-center gap-3 rounded-md px-3 py-2 transition-colors outline-none",
+                    {
+                      "!bg-layer-transparent-active text-primary": isActive,
+                      "text-secondary hover:bg-layer-transparent-hover active:bg-layer-transparent-active": !isActive,
+                    },
                     isSidebarCollapsed ? "justify-center" : "w-[260px]"
                   )}
                 >
                   {<item.Icon className="h-4 w-4 flex-shrink-0" />}
                   {!isSidebarCollapsed && (
-                    <div className="w-full ">
-                      <div
-                        className={cn(
-                          `text-sm font-medium transition-colors`,
-                          isActive ? "text-custom-primary-100" : "text-custom-sidebar-text-200"
-                        )}
-                      >
-                        {item.name}
-                      </div>
-                      <div
-                        className={cn(
-                          `text-[10px] transition-colors`,
-                          isActive ? "text-custom-primary-90" : "text-custom-sidebar-text-400"
-                        )}
-                      >
-                        {item.description}
-                      </div>
+                    <div className="w-full">
+                      <div className={cn(`text-body-xs-medium transition-colors`)}>{item.name}</div>
+                      <div className={cn(`text-caption-sm-regular transition-colors`)}>{item.description}</div>
                     </div>
                   )}
                 </div>
diff --git a/apps/admin/app/(all)/(dashboard)/sidebar.tsx b/apps/admin/app/(all)/(dashboard)/sidebar.tsx
index 7950879c1..6d9c970c2 100644
--- a/apps/admin/app/(all)/(dashboard)/sidebar.tsx
+++ b/apps/admin/app/(all)/(dashboard)/sidebar.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useEffect, useRef } from "react";
 import { observer } from "mobx-react";
 // plane helpers
@@ -38,13 +44,7 @@ export const AdminSidebar = observer(function AdminSidebar() {
 
   return (
     <div
-      className={`inset-y-0 z-20 flex h-full flex-shrink-0 flex-grow-0 flex-col border-r border-custom-sidebar-border-200 bg-custom-sidebar-background-100 duration-300
-        fixed md:relative
-        ${isSidebarCollapsed ? "-ml-[290px]" : ""}
-        sm:${isSidebarCollapsed ? "-ml-[290px]" : ""}
-        md:ml-0 ${isSidebarCollapsed ? "w-[70px]" : "w-[290px]"}
-        lg:ml-0 ${isSidebarCollapsed ? "w-[70px]" : "w-[290px]"}
-      `}
+      className={`fixed inset-y-0 z-20 flex h-full flex-shrink-0 flex-grow-0 flex-col border-r border-subtle bg-surface-1 duration-300 md:relative ${isSidebarCollapsed ? "-ml-[290px]" : ""} sm:${isSidebarCollapsed ? "-ml-[290px]" : ""} md:ml-0 ${isSidebarCollapsed ? "w-[70px]" : "w-[290px]"} lg:ml-0 ${isSidebarCollapsed ? "w-[70px]" : "w-[290px]"} `}
     >
       <div ref={ref} className="flex h-full w-full flex-1 flex-col">
         <AdminSidebarDropdown />
diff --git a/apps/admin/app/(all)/(dashboard)/workspace/create/form.tsx b/apps/admin/app/(all)/(dashboard)/workspace/create/form.tsx
index e4c7075aa..d250b7630 100644
--- a/apps/admin/app/(all)/(dashboard)/workspace/create/form.tsx
+++ b/apps/admin/app/(all)/(dashboard)/workspace/create/form.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useState, useEffect } from "react";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
@@ -8,6 +14,7 @@ import { Button, getButtonStyling } from "@plane/propel/button";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import { InstanceWorkspaceService } from "@plane/services";
 import type { IWorkspace } from "@plane/types";
+import { validateSlug, validateWorkspaceName } from "@plane/utils";
 // components
 import { CustomSelect, Input } from "@plane/ui";
 // hooks
@@ -84,20 +91,13 @@ export function WorkspaceCreateForm() {
     <div className="space-y-8">
       <div className="grid-col grid w-full max-w-4xl grid-cols-1 items-start justify-between gap-x-10 gap-y-6 lg:grid-cols-2">
         <div className="flex flex-col gap-1">
-          <h4 className="text-sm text-custom-text-300">Name your workspace</h4>
+          <h4 className="text-13 text-tertiary">Name your workspace</h4>
           <div className="flex flex-col gap-1">
             <Controller
               control={control}
               name="name"
               rules={{
-                required: "This is a required field.",
-                validate: (value) =>
-                  /^[\w\s-]*$/.test(value) ||
-                  `Workspaces names can contain only (" "), ( - ), ( _ ) and alphanumeric characters.`,
-                maxLength: {
-                  value: 80,
-                  message: "Limit your name to 80 characters.",
-                },
+                validate: (value) => validateWorkspaceName(value, true),
               }}
               render={({ field: { value, ref, onChange } }) => (
                 <Input
@@ -118,22 +118,18 @@ export function WorkspaceCreateForm() {
                 />
               )}
             />
-            <span className="text-xs text-red-500">{errors?.name?.message}</span>
+            <span className="text-11 text-danger-primary">{errors?.name?.message}</span>
           </div>
         </div>
         <div className="flex flex-col gap-1">
-          <h4 className="text-sm text-custom-text-300">Set your workspace&apos;s URL</h4>
-          <div className="flex gap-0.5 w-full items-center rounded-md border-[0.5px] border-custom-border-200 px-3">
-            <span className="whitespace-nowrap text-sm text-custom-text-200">{workspaceBaseURL}</span>
+          <h4 className="text-13 text-tertiary">Set your workspace&apos;s URL</h4>
+          <div className="flex w-full items-center gap-0.5 rounded-md border-[0.5px] border-subtle px-3">
+            <span className="text-13 whitespace-nowrap text-secondary">{workspaceBaseURL}</span>
             <Controller
               control={control}
               name="slug"
               rules={{
-                required: "The URL is a required field.",
-                maxLength: {
-                  value: 48,
-                  message: "Limit your URL to 48 characters.",
-                },
+                validate: (value) => validateSlug(value),
               }}
               render={({ field: { onChange, value, ref } }) => (
                 <Input
@@ -148,19 +144,19 @@ export function WorkspaceCreateForm() {
                   ref={ref}
                   hasError={Boolean(errors.slug)}
                   placeholder="workspace-name"
-                  className="block w-full rounded-md border-none bg-transparent !px-0 py-2 text-sm"
+                  className="block w-full rounded-md border-none bg-transparent !px-0 py-2 text-13"
                 />
               )}
             />
           </div>
-          {slugError && <p className="text-sm text-red-500">This URL is taken. Try something else.</p>}
+          {slugError && <p className="text-13 text-danger-primary">This URL is taken. Try something else.</p>}
           {invalidSlug && (
-            <p className="text-sm text-red-500">{`URLs can contain only ( - ), ( _ ) and alphanumeric characters.`}</p>
+            <p className="text-13 text-danger-primary">{`URLs can contain only ( - ), ( _ ) and alphanumeric characters.`}</p>
           )}
-          {errors.slug && <span className="text-xs text-red-500">{errors.slug.message}</span>}
+          {errors.slug && <span className="text-11 text-danger-primary">{errors.slug.message}</span>}
         </div>
         <div className="flex flex-col gap-1">
-          <h4 className="text-sm text-custom-text-300">How many people will use this workspace?</h4>
+          <h4 className="text-13 text-tertiary">How many people will use this workspace?</h4>
           <div className="w-full">
             <Controller
               name="organization_size"
@@ -172,10 +168,10 @@ export function WorkspaceCreateForm() {
                   onChange={onChange}
                   label={
                     ORGANIZATION_SIZE.find((c) => c === value) ?? (
-                      <span className="text-custom-text-400">Select a range</span>
+                      <span className="text-placeholder">Select a range</span>
                     )
                   }
-                  buttonClassName="!border-[0.5px] !border-custom-border-200 !shadow-none"
+                  buttonClassName="!border-[0.5px] !border-subtle !shadow-none"
                   input
                 >
                   {ORGANIZATION_SIZE.map((item) => (
@@ -187,22 +183,22 @@ export function WorkspaceCreateForm() {
               )}
             />
             {errors.organization_size && (
-              <span className="text-sm text-red-500">{errors.organization_size.message}</span>
+              <span className="text-13 text-danger-primary">{errors.organization_size.message}</span>
             )}
           </div>
         </div>
       </div>
-      <div className="flex max-w-4xl items-center py-1 gap-4">
+      <div className="flex max-w-4xl items-center gap-4 py-1">
         <Button
           variant="primary"
-          size="sm"
+          size="lg"
           onClick={handleSubmit(handleCreateWorkspace)}
           disabled={!isValid}
           loading={isSubmitting}
         >
           {isSubmitting ? "Creating workspace" : "Create workspace"}
         </Button>
-        <Link className={getButtonStyling("neutral-primary", "sm")} href="/workspace">
+        <Link className={getButtonStyling("secondary", "lg")} href="/workspace">
           Go back
         </Link>
       </div>
diff --git a/apps/admin/app/(all)/(dashboard)/workspace/create/page.tsx b/apps/admin/app/(all)/(dashboard)/workspace/create/page.tsx
index fe3fc033a..a31d03d13 100644
--- a/apps/admin/app/(all)/(dashboard)/workspace/create/page.tsx
+++ b/apps/admin/app/(all)/(dashboard)/workspace/create/page.tsx
@@ -1,21 +1,27 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 // components
+import { PageWrapper } from "@/components/common/page-wrapper";
+// types
 import type { Route } from "./+types/page";
+// local
 import { WorkspaceCreateForm } from "./form";
 
 const WorkspaceCreatePage = observer(function WorkspaceCreatePage(_props: Route.ComponentProps) {
   return (
-    <div className="relative container mx-auto w-full h-full p-4 py-4 space-y-6 flex flex-col">
-      <div className="border-b border-custom-border-100 mx-4 py-4 space-y-1 flex-shrink-0">
-        <div className="text-xl font-medium text-custom-text-100">Create a new workspace on this instance.</div>
-        <div className="text-sm font-normal text-custom-text-300">
-          You will need to invite users from Workspace Settings after you create this workspace.
-        </div>
-      </div>
-      <div className="flex-grow overflow-hidden overflow-y-scroll vertical-scrollbar scrollbar-md px-4">
-        <WorkspaceCreateForm />
-      </div>
-    </div>
+    <PageWrapper
+      header={{
+        title: "Create a new workspace on this instance.",
+        description: "You will need to invite users from Workspace Settings after you create this workspace.",
+      }}
+    >
+      <WorkspaceCreateForm />
+    </PageWrapper>
   );
 });
 
diff --git a/apps/admin/app/(all)/(dashboard)/workspace/page.tsx b/apps/admin/app/(all)/(dashboard)/workspace/page.tsx
index f5d8a678c..5816ac959 100644
--- a/apps/admin/app/(all)/(dashboard)/workspace/page.tsx
+++ b/apps/admin/app/(all)/(dashboard)/workspace/page.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useState } from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
@@ -8,12 +14,13 @@ import { Button, getButtonStyling } from "@plane/propel/button";
 import { setPromiseToast } from "@plane/propel/toast";
 import type { TInstanceConfigurationKeys } from "@plane/types";
 import { Loader, ToggleSwitch } from "@plane/ui";
-
 import { cn } from "@plane/utils";
 // components
+import { PageWrapper } from "@/components/common/page-wrapper";
 import { WorkspaceListItem } from "@/components/workspace/list-item";
 // hooks
 import { useInstance, useWorkspace } from "@/hooks/store";
+// types
 import type { Route } from "./+types/page";
 
 const WorkspaceManagementPage = observer(function WorkspaceManagementPage(_props: Route.ComponentProps) {
@@ -68,101 +75,95 @@ const WorkspaceManagementPage = observer(function WorkspaceManagementPage(_props
   };
 
   return (
-    <div className="relative container mx-auto w-full h-full p-4 py-4 space-y-6 flex flex-col">
-      <div className="flex items-center justify-between gap-4 border-b border-custom-border-100 mx-4 py-4 space-y-1 flex-shrink-0">
-        <div className="flex flex-col gap-1">
-          <div className="text-xl font-medium text-custom-text-100">Workspaces on this instance</div>
-          <div className="text-sm font-normal text-custom-text-300">
-            See all workspaces and control who can create them.
-          </div>
-        </div>
-      </div>
-      <div className="flex-grow overflow-hidden overflow-y-scroll vertical-scrollbar scrollbar-md px-4">
-        <div className="space-y-3">
-          {formattedConfig ? (
-            <div className={cn("w-full flex items-center gap-14 rounded")}>
-              <div className="flex grow items-center gap-4">
-                <div className="grow">
-                  <div className="text-lg font-medium pb-1">Prevent anyone else from creating a workspace.</div>
-                  <div className={cn("font-normal leading-5 text-custom-text-300 text-xs")}>
-                    Toggling this on will let only you create workspaces. You will have to invite users to new
-                    workspaces.
-                  </div>
-                </div>
-              </div>
-              <div className={`shrink-0 pr-4 ${isSubmitting && "opacity-70"}`}>
-                <div className="flex items-center gap-4">
-                  <ToggleSwitch
-                    value={Boolean(parseInt(disableWorkspaceCreation))}
-                    onChange={() => {
-                      if (Boolean(parseInt(disableWorkspaceCreation)) === true) {
-                        updateConfig("DISABLE_WORKSPACE_CREATION", "0");
-                      } else {
-                        updateConfig("DISABLE_WORKSPACE_CREATION", "1");
-                      }
-                    }}
-                    size="sm"
-                    disabled={isSubmitting}
-                  />
+    <PageWrapper
+      header={{
+        title: "Workspaces on this instance",
+        description: "See all workspaces and control who can create them.",
+      }}
+    >
+      <div className="space-y-3">
+        {formattedConfig ? (
+          <div className={cn("flex w-full items-center gap-14 rounded-sm")}>
+            <div className="flex grow items-center gap-4">
+              <div className="grow">
+                <div className="pb-1 text-16 font-medium">Prevent anyone else from creating a workspace.</div>
+                <div className={cn("text-11 leading-5 font-regular text-tertiary")}>
+                  Toggling this on will let only you create workspaces. You will have to invite users to new workspaces.
                 </div>
               </div>
             </div>
-          ) : (
-            <Loader>
-              <Loader.Item height="50px" width="100%" />
-            </Loader>
-          )}
-          {workspaceLoader !== "init-loader" ? (
-            <>
-              <div className="pt-6 flex items-center justify-between gap-2">
-                <div className="flex flex-col items-start gap-x-2">
-                  <div className="flex items-center gap-2 text-lg font-medium">
-                    All workspaces on this instance{" "}
-                    <span className="text-custom-text-300">• {workspaceIds.length}</span>
-                    {workspaceLoader && ["mutation", "pagination"].includes(workspaceLoader) && (
-                      <LoaderIcon className="w-4 h-4 animate-spin" />
-                    )}
-                  </div>
-                  <div className={cn("font-normal leading-5 text-custom-text-300 text-xs")}>
-                    You can&apos;t yet delete workspaces and you can only go to the workspace if you are an Admin or a
-                    Member.
-                  </div>
+            <div className={`shrink-0 pr-4 ${isSubmitting && "opacity-70"}`}>
+              <div className="flex items-center gap-4">
+                <ToggleSwitch
+                  value={Boolean(parseInt(disableWorkspaceCreation))}
+                  onChange={() => {
+                    if (Boolean(parseInt(disableWorkspaceCreation)) === true) {
+                      updateConfig("DISABLE_WORKSPACE_CREATION", "0");
+                    } else {
+                      updateConfig("DISABLE_WORKSPACE_CREATION", "1");
+                    }
+                  }}
+                  size="sm"
+                  disabled={isSubmitting}
+                />
+              </div>
+            </div>
+          </div>
+        ) : (
+          <Loader>
+            <Loader.Item height="50px" width="100%" />
+          </Loader>
+        )}
+        {workspaceLoader !== "init-loader" ? (
+          <>
+            <div className="flex items-center justify-between gap-2 pt-6">
+              <div className="flex flex-col items-start gap-x-2">
+                <div className="flex items-center gap-2 text-16 font-medium">
+                  All workspaces on this instance <span className="text-tertiary">• {workspaceIds.length}</span>
+                  {workspaceLoader && ["mutation", "pagination"].includes(workspaceLoader) && (
+                    <LoaderIcon className="h-4 w-4 animate-spin" />
+                  )}
                 </div>
-                <div className="flex items-center gap-2">
-                  <Link href="/workspace/create" className={getButtonStyling("primary", "sm")}>
-                    Create workspace
-                  </Link>
+                <div className={cn("text-11 leading-5 font-regular text-tertiary")}>
+                  You can&apos;t yet delete workspaces and you can only go to the workspace if you are an Admin or a
+                  Member.
                 </div>
               </div>
-              <div className="flex flex-col gap-4 py-2">
-                {workspaceIds.map((workspaceId) => (
-                  <WorkspaceListItem key={workspaceId} workspaceId={workspaceId} />
-                ))}
+              <div className="flex items-center gap-2">
+                <Link href="/workspace/create" className={getButtonStyling("primary", "base")}>
+                  Create workspace
+                </Link>
               </div>
-              {hasNextPage && (
-                <div className="flex justify-center">
-                  <Button
-                    variant="link-primary"
-                    onClick={() => fetchNextWorkspaces()}
-                    disabled={workspaceLoader === "pagination"}
-                  >
-                    Load more
-                    {workspaceLoader === "pagination" && <LoaderIcon className="w-3 h-3 animate-spin" />}
-                  </Button>
-                </div>
-              )}
-            </>
-          ) : (
-            <Loader className="space-y-10 py-8">
-              <Loader.Item height="24px" width="20%" />
-              <Loader.Item height="92px" width="100%" />
-              <Loader.Item height="92px" width="100%" />
-              <Loader.Item height="92px" width="100%" />
-            </Loader>
-          )}
-        </div>
+            </div>
+            <div className="flex flex-col gap-4 py-2">
+              {workspaceIds.map((workspaceId) => (
+                <WorkspaceListItem key={workspaceId} workspaceId={workspaceId} />
+              ))}
+            </div>
+            {hasNextPage && (
+              <div className="flex justify-center">
+                <Button
+                  variant="link"
+                  size="lg"
+                  onClick={() => fetchNextWorkspaces()}
+                  disabled={workspaceLoader === "pagination"}
+                >
+                  Load more
+                  {workspaceLoader === "pagination" && <LoaderIcon className="h-3 w-3 animate-spin" />}
+                </Button>
+              </div>
+            )}
+          </>
+        ) : (
+          <Loader className="space-y-10 py-8">
+            <Loader.Item height="24px" width="20%" />
+            <Loader.Item height="92px" width="100%" />
+            <Loader.Item height="92px" width="100%" />
+            <Loader.Item height="92px" width="100%" />
+          </Loader>
+        )}
       </div>
-    </div>
+    </PageWrapper>
   );
 });
 
diff --git a/apps/admin/app/(all)/(home)/auth-banner.tsx b/apps/admin/app/(all)/(home)/auth-banner.tsx
index 3b8fd5ce5..43df781bb 100644
--- a/apps/admin/app/(all)/(home)/auth-banner.tsx
+++ b/apps/admin/app/(all)/(home)/auth-banner.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { Info } from "lucide-react";
 // plane constants
 import type { TAdminAuthErrorInfo } from "@plane/constants";
@@ -14,16 +20,16 @@ export function AuthBanner(props: TAuthBanner) {
 
   if (!bannerData) return <></>;
   return (
-    <div className="relative flex items-center p-2 rounded-md gap-2 border border-custom-primary-100/50 bg-custom-primary-100/10">
-      <div className="w-4 h-4 flex-shrink-0 relative flex justify-center items-center">
-        <Info size={16} className="text-custom-primary-100" />
+    <div className="relative flex items-center gap-2 rounded-md border border-accent-strong/50 bg-accent-primary/10 p-2">
+      <div className="relative flex h-4 w-4 flex-shrink-0 items-center justify-center">
+        <Info size={16} className="text-accent-primary" />
       </div>
-      <div className="w-full text-sm font-medium text-custom-primary-100">{bannerData?.message}</div>
+      <div className="w-full text-13 font-medium text-accent-primary">{bannerData?.message}</div>
       <div
-        className="relative ml-auto w-6 h-6 rounded-sm flex justify-center items-center transition-all cursor-pointer hover:bg-custom-primary-100/20 text-custom-primary-100/80"
+        className="relative ml-auto flex h-6 w-6 cursor-pointer items-center justify-center rounded-xs text-accent-primary transition-all hover:bg-accent-primary/20"
         onClick={() => handleBannerData && handleBannerData(undefined)}
       >
-        <CloseIcon className="w-4 h-4 flex-shrink-0" />
+        <CloseIcon className="h-4 w-4 flex-shrink-0" />
       </div>
     </div>
   );
diff --git a/apps/admin/app/(all)/(home)/auth-header.tsx b/apps/admin/app/(all)/(home)/auth-header.tsx
index ca2196eda..ae94821af 100644
--- a/apps/admin/app/(all)/(home)/auth-header.tsx
+++ b/apps/admin/app/(all)/(home)/auth-header.tsx
@@ -1,11 +1,17 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import Link from "next/link";
 import { PlaneLockup } from "@plane/propel/icons";
 
 export function AuthHeader() {
   return (
-    <div className="flex items-center justify-between gap-6 w-full flex-shrink-0 sticky top-0">
+    <div className="sticky top-0 flex w-full flex-shrink-0 items-center justify-between gap-6">
       <Link href="/">
-        <PlaneLockup height={20} width={95} className="text-custom-text-100" />
+        <PlaneLockup height={20} width={95} className="text-primary" />
       </Link>
     </div>
   );
diff --git a/apps/admin/app/(all)/(home)/auth-helpers.tsx b/apps/admin/app/(all)/(home)/auth-helpers.tsx
index c079759a4..ea18dc995 100644
--- a/apps/admin/app/(all)/(home)/auth-helpers.tsx
+++ b/apps/admin/app/(all)/(home)/auth-helpers.tsx
@@ -1,21 +1,13 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import Link from "next/link";
-import { KeyRound, Mails } from "lucide-react";
 // plane packages
 import type { TAdminAuthErrorInfo } from "@plane/constants";
 import { SUPPORT_EMAIL, EAdminAuthErrorCodes } from "@plane/constants";
-import type { TGetBaseAuthenticationModeProps, TInstanceAuthenticationModes } from "@plane/types";
-import { resolveGeneralTheme } from "@plane/utils";
-// components
-import githubLightModeImage from "@/app/assets/logos/github-black.png?url";
-import githubDarkModeImage from "@/app/assets/logos/github-white.png?url";
-import GitlabLogo from "@/app/assets/logos/gitlab-logo.svg?url";
-import GoogleLogo from "@/app/assets/logos/google-logo.svg?url";
-import { EmailCodesConfiguration } from "@/components/authentication/email-config-switch";
-import { GithubConfiguration } from "@/components/authentication/github-config";
-import { GitlabConfiguration } from "@/components/authentication/gitlab-config";
-import { GoogleConfiguration } from "@/components/authentication/google-config";
-import { PasswordLoginConfiguration } from "@/components/authentication/password-config-switch";
-// images
 
 export enum EErrorAlertType {
   BANNER_ALERT = "BANNER_ALERT",
@@ -58,7 +50,7 @@ const errorCodeMessages: {
     message: () => (
       <div>
         Admin user already exists.&nbsp;
-        <Link className="underline underline-offset-4 font-medium hover:font-bold transition-all" href={`/admin`}>
+        <Link className="font-medium underline underline-offset-4 transition-all hover:font-bold" href={`/admin`}>
           Sign In
         </Link>
         &nbsp;now.
@@ -70,7 +62,7 @@ const errorCodeMessages: {
     message: () => (
       <div>
         Admin user does not exist.&nbsp;
-        <Link className="underline underline-offset-4 font-medium hover:font-bold transition-all" href={`/admin`}>
+        <Link className="font-medium underline underline-offset-4 transition-all hover:font-bold" href={`/admin`}>
           Sign In
         </Link>
         &nbsp;now.
@@ -106,53 +98,3 @@ export const authErrorHandler = (errorCode: EAdminAuthErrorCodes, email?: string
 
   return undefined;
 };
-
-export const getBaseAuthenticationModes: (props: TGetBaseAuthenticationModeProps) => TInstanceAuthenticationModes[] = ({
-  disabled,
-  updateConfig,
-  resolvedTheme,
-}) => [
-  {
-    key: "unique-codes",
-    name: "Unique codes",
-    description:
-      "Log in or sign up for Plane using codes sent via email. You need to have set up SMTP to use this method.",
-    icon: <Mails className="h-6 w-6 p-0.5 text-custom-text-300/80" />,
-    config: <EmailCodesConfiguration disabled={disabled} updateConfig={updateConfig} />,
-  },
-  {
-    key: "passwords-login",
-    name: "Passwords",
-    description: "Allow members to create accounts with passwords and use it with their email addresses to sign in.",
-    icon: <KeyRound className="h-6 w-6 p-0.5 text-custom-text-300/80" />,
-    config: <PasswordLoginConfiguration disabled={disabled} updateConfig={updateConfig} />,
-  },
-  {
-    key: "google",
-    name: "Google",
-    description: "Allow members to log in or sign up for Plane with their Google accounts.",
-    icon: <img src={GoogleLogo} height={20} width={20} alt="Google Logo" />,
-    config: <GoogleConfiguration disabled={disabled} updateConfig={updateConfig} />,
-  },
-  {
-    key: "github",
-    name: "GitHub",
-    description: "Allow members to log in or sign up for Plane with their GitHub accounts.",
-    icon: (
-      <img
-        src={resolveGeneralTheme(resolvedTheme) === "dark" ? githubDarkModeImage : githubLightModeImage}
-        height={20}
-        width={20}
-        alt="GitHub Logo"
-      />
-    ),
-    config: <GithubConfiguration disabled={disabled} updateConfig={updateConfig} />,
-  },
-  {
-    key: "gitlab",
-    name: "GitLab",
-    description: "Allow members to log in or sign up to plane with their GitLab accounts.",
-    icon: <img src={GitlabLogo} height={20} width={20} alt="GitLab Logo" />,
-    config: <GitlabConfiguration disabled={disabled} updateConfig={updateConfig} />,
-  },
-];
diff --git a/apps/admin/app/(all)/(home)/layout.tsx b/apps/admin/app/(all)/(home)/layout.tsx
index 658088ff8..a33453684 100644
--- a/apps/admin/app/(all)/(home)/layout.tsx
+++ b/apps/admin/app/(all)/(home)/layout.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useEffect } from "react";
 import { observer } from "mobx-react";
 import { useRouter } from "next/navigation";
@@ -16,7 +22,7 @@ function RootLayout() {
   }, [replace, isUserLoggedIn]);
 
   return (
-    <div className="relative z-10 flex flex-col items-center w-screen h-screen overflow-hidden overflow-y-auto pt-6 pb-10 px-8">
+    <div className="relative z-10 flex h-screen w-screen flex-col items-center overflow-hidden overflow-y-auto bg-surface-1 px-8 pt-6 pb-10">
       <Outlet />
     </div>
   );
diff --git a/apps/admin/app/(all)/(home)/page.tsx b/apps/admin/app/(all)/(home)/page.tsx
index 12f701c46..7947adcdc 100644
--- a/apps/admin/app/(all)/(home)/page.tsx
+++ b/apps/admin/app/(all)/(home)/page.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 // components
 import { LogoSpinner } from "@/components/common/logo-spinner";
@@ -16,7 +22,7 @@ function HomePage() {
   // if instance is not fetched, show loading
   if (!instance && !error) {
     return (
-      <div className="flex items-center justify-center h-screen w-full">
+      <div className="flex h-screen w-full items-center justify-center">
         <LogoSpinner />
       </div>
     );
diff --git a/apps/admin/app/(all)/(home)/sign-in-form.tsx b/apps/admin/app/(all)/(home)/sign-in-form.tsx
index 3d485ebce..4e0afb8ea 100644
--- a/apps/admin/app/(all)/(home)/sign-in-form.tsx
+++ b/apps/admin/app/(all)/(home)/sign-in-form.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useEffect, useMemo, useState } from "react";
 import { useSearchParams } from "next/navigation";
 import { Eye, EyeOff } from "lucide-react";
@@ -10,7 +16,7 @@ import { Input, Spinner } from "@plane/ui";
 // components
 import { Banner } from "@/components/common/banner";
 // local components
-import { FormHeader } from "../../../core/components/instance/form-header";
+import { FormHeader } from "@/components/instance/form-header";
 import { AuthBanner } from "./auth-banner";
 import { AuthHeader } from "./auth-header";
 import { authErrorHandler } from "./auth-helpers";
@@ -105,8 +111,8 @@ export function InstanceSignInForm() {
   return (
     <>
       <AuthHeader />
-      <div className="flex flex-col justify-center items-center flex-grow w-full py-6 mt-10">
-        <div className="relative flex flex-col gap-6 max-w-[22.5rem] w-full">
+      <div className="mt-10 flex w-full flex-grow flex-col items-center justify-center py-6">
+        <div className="relative flex w-full max-w-[22.5rem] flex-col gap-6">
           <FormHeader
             heading="Manage your Plane instance"
             subHeading="Configure instance-wide settings to secure your instance"
@@ -128,11 +134,11 @@ export function InstanceSignInForm() {
             <input type="hidden" name="csrfmiddlewaretoken" value={csrfToken} />
 
             <div className="w-full space-y-1">
-              <label className="text-sm text-custom-text-300 font-medium" htmlFor="email">
-                Email <span className="text-red-500">*</span>
+              <label className="text-13 font-medium text-tertiary" htmlFor="email">
+                Email <span className="text-danger-primary">*</span>
               </label>
               <Input
-                className="w-full border border-custom-border-100 !bg-custom-background-100 placeholder:text-custom-text-400"
+                className="w-full border border-subtle !bg-surface-1 placeholder:text-placeholder"
                 id="email"
                 name="email"
                 type="email"
@@ -140,18 +146,18 @@ export function InstanceSignInForm() {
                 placeholder="name@company.com"
                 value={formData.email}
                 onChange={(e) => handleFormChange("email", e.target.value)}
-                autoComplete="on"
+                autoComplete="off"
                 autoFocus
               />
             </div>
 
             <div className="w-full space-y-1">
-              <label className="text-sm text-custom-text-300 font-medium" htmlFor="password">
-                Password <span className="text-red-500">*</span>
+              <label className="text-13 font-medium text-tertiary" htmlFor="password">
+                Password <span className="text-danger-primary">*</span>
               </label>
               <div className="relative">
                 <Input
-                  className="w-full border border-custom-border-100 !bg-custom-background-100 placeholder:text-custom-text-400"
+                  className="w-full border border-subtle !bg-surface-1 placeholder:text-placeholder"
                   id="password"
                   name="password"
                   type={showPassword ? "text" : "password"}
@@ -159,12 +165,12 @@ export function InstanceSignInForm() {
                   placeholder="Enter your password"
                   value={formData.password}
                   onChange={(e) => handleFormChange("password", e.target.value)}
-                  autoComplete="on"
+                  autoComplete="off"
                 />
                 {showPassword ? (
                   <button
                     type="button"
-                    className="absolute right-3 top-3.5 flex items-center justify-center text-custom-text-400"
+                    className="absolute top-3.5 right-3 flex items-center justify-center text-placeholder"
                     onClick={() => setShowPassword(false)}
                   >
                     <EyeOff className="h-4 w-4" />
@@ -172,7 +178,7 @@ export function InstanceSignInForm() {
                 ) : (
                   <button
                     type="button"
-                    className="absolute right-3 top-3.5 flex items-center justify-center text-custom-text-400"
+                    className="absolute top-3.5 right-3 flex items-center justify-center text-placeholder"
                     onClick={() => setShowPassword(true)}
                   >
                     <Eye className="h-4 w-4" />
@@ -181,7 +187,7 @@ export function InstanceSignInForm() {
               </div>
             </div>
             <div className="py-2">
-              <Button type="submit" size="lg" className="w-full" disabled={isButtonDisabled}>
+              <Button type="submit" size="xl" className="w-full" disabled={isButtonDisabled}>
                 {isSubmitting ? <Spinner height="20px" width="20px" /> : "Sign in"}
               </Button>
             </div>
diff --git a/apps/admin/app/assets/logos/oidc-logo.svg b/apps/admin/app/assets/logos/oidc-logo.svg
deleted file mode 100644
index 68bc72d01..000000000
--- a/apps/admin/app/assets/logos/oidc-logo.svg
+++ /dev/null
@@ -1,11 +0,0 @@
-<svg width="92" height="84" viewBox="0 0 92 84" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_3695_11896)">
-<path d="M83.0398 32.6876C74.2901 27.2397 62.0735 23.8553 48.7013 23.8553C21.7918 23.8553 0 37.3101 0 53.9016C0 69.0898 18.1598 81.554 41.685 83.7001V74.9504C25.8364 72.9693 13.95 64.3022 13.95 53.9016C13.95 42.0977 29.4684 32.44 48.7013 32.44C58.2765 32.44 66.9436 34.8338 73.217 38.7134L64.3022 44.2439H92.1197V27.0746L83.0398 32.6876Z" fill="#CCCCCC"/>
-<path d="M41.6846 8.99736V74.9504V83.7002L55.6346 74.9504V0L41.6846 8.99736Z" fill="#FF6200"/>
-</g>
-<defs>
-<clipPath id="clip0_3695_11896">
-<rect width="92" height="84" fill="white"/>
-</clipPath>
-</defs>
-</svg>
diff --git a/apps/admin/app/assets/logos/saml-logo.svg b/apps/admin/app/assets/logos/saml-logo.svg
deleted file mode 100644
index 4cbb4f81d..000000000
--- a/apps/admin/app/assets/logos/saml-logo.svg
+++ /dev/null
@@ -1,17 +0,0 @@
-<svg width="700" height="650" viewBox="0 0 700 650" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_3262_5767)">
-<mask id="mask0_3262_5767" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="700" height="650">
-<path d="M700 0H0V650H700V0Z" fill="white"/>
-</mask>
-<g mask="url(#mask0_3262_5767)">
-<path d="M337.682 0L360.832 20.5C377.982 35.7 395.182 50.85 412.132 66.25C521.982 166 614.982 278.25 684.982 407.45C688.582 414.05 691.832 420.85 695.082 427.6L699.982 437.75L694.582 440.6L690.532 434.85L680.032 419.9L672.682 409.2C621.732 335.25 570.682 261.2 500.582 201.95C479.373 183.995 455.969 168.807 430.932 156.75C380.232 132.5 335.132 142.2 296.432 182C259.632 219.85 240.532 266.85 223.282 314.65C221.032 320.8 218.682 326.9 216.332 333L212.232 343.75L203.632 341C208.632 323.6 213.232 306.1 217.832 288.55C228.332 248.8 238.832 209.05 253.432 170.75C268.932 129.95 288.532 90.6 308.082 51.25C316.532 34.2 324.982 17.15 333.082 0H337.682Z" fill="#C22E33"/>
-<path d="M372.382 491.1C291.082 529.6 94.3829 569.3 1.08287 559.1C-14.1671 478.8 135.482 102.5 208.982 45.5L204.232 56.4C202.115 61.531 199.813 66.5842 197.332 71.55L194.032 78C156.032 151.1 118.082 224.3 98.6329 304.5C91.6287 332.124 87.8038 360.458 87.2328 388.95C86.7328 455.95 128.432 501.55 198.082 504.4C231.582 505.75 265.432 502.25 299.232 498.7C313.932 497.2 328.582 495.65 343.232 494.5C348.632 494.1 353.932 493.45 360.832 492.55L372.382 491.15V491.1Z" fill="#C22E33"/>
-<path d="M141.233 639.05C118.983 640.75 96.733 642.45 74.583 644.45C279.433 663.95 476.083 630.6 670.083 562.25C606.833 450.75 521.583 362.7 422.483 286.15C423.783 291.05 426.683 294.6 429.533 298.1L431.933 301.1C440.433 312.4 449.333 323.5 458.283 334.6C478.733 360.05 499.183 385.5 514.583 413.5C553.483 484.5 532.383 545.9 456.183 578.3C406.083 599.65 351.333 614.2 297.183 622.9C245.683 631.1 193.433 635.05 141.233 639.05Z" fill="#C22E33"/>
-</g>
-</g>
-<defs>
-<clipPath id="clip0_3262_5767">
-<rect width="700" height="650" fill="white"/>
-</clipPath>
-</defs>
-</svg>
diff --git a/apps/admin/app/compat/next/helper.ts b/apps/admin/app/compat/next/helper.ts
index c04699870..c4edf3d54 100644
--- a/apps/admin/app/compat/next/helper.ts
+++ b/apps/admin/app/compat/next/helper.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 /**
  * Ensures that a URL has a trailing slash while preserving query parameters and fragments
  * @param url - The URL to process
diff --git a/apps/admin/app/compat/next/image.tsx b/apps/admin/app/compat/next/image.tsx
index 062638de4..12a2bb21e 100644
--- a/apps/admin/app/compat/next/image.tsx
+++ b/apps/admin/app/compat/next/image.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 
 // Minimal shim so code using next/image compiles under React Router + Vite
diff --git a/apps/admin/app/compat/next/link.tsx b/apps/admin/app/compat/next/link.tsx
index b0bca4faf..85177560f 100644
--- a/apps/admin/app/compat/next/link.tsx
+++ b/apps/admin/app/compat/next/link.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 import { Link as RRLink } from "react-router";
 import { ensureTrailingSlash } from "./helper";
diff --git a/apps/admin/app/compat/next/navigation.ts b/apps/admin/app/compat/next/navigation.ts
index e0e6e9025..dc59a9a85 100644
--- a/apps/admin/app/compat/next/navigation.ts
+++ b/apps/admin/app/compat/next/navigation.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useMemo } from "react";
 import { useLocation, useNavigate, useSearchParams as useSearchParamsRR } from "react-router";
 import { ensureTrailingSlash } from "./helper";
diff --git a/apps/admin/app/components/404.tsx b/apps/admin/app/components/404.tsx
index 3851daa32..473dbb6e1 100644
--- a/apps/admin/app/components/404.tsx
+++ b/apps/admin/app/components/404.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 import { Link } from "react-router";
 // ui
@@ -7,22 +13,22 @@ import Image404 from "@/app/assets/images/404.svg?url";
 
 function PageNotFound() {
   return (
-    <div className={`h-screen w-full overflow-hidden bg-custom-background-100`}>
+    <div className={`h-screen w-full overflow-hidden bg-surface-1`}>
       <div className="grid h-full place-items-center p-4">
         <div className="space-y-8 text-center">
           <div className="relative mx-auto h-60 w-60 lg:h-80 lg:w-80">
             <img src={Image404} alt="404 - Page not found" className="h-full w-full object-contain" />
           </div>
           <div className="space-y-2">
-            <h3 className="text-lg font-semibold">Oops! Something went wrong.</h3>
-            <p className="text-sm text-custom-text-200">
+            <h3 className="text-16 font-semibold">Oops! Something went wrong.</h3>
+            <p className="text-13 text-secondary">
               Sorry, the page you are looking for cannot be found. It may have been removed, had its name changed, or is
               temporarily unavailable.
             </p>
           </div>
           <Link to="/general/">
             <span className="flex justify-center py-4">
-              <Button variant="neutral-primary" size="md">
+              <Button variant="secondary" size="lg">
                 Go to general settings
               </Button>
             </span>
diff --git a/apps/admin/app/entry.client.tsx b/apps/admin/app/entry.client.tsx
index 9cf1c32de..9c665ede0 100644
--- a/apps/admin/app/entry.client.tsx
+++ b/apps/admin/app/entry.client.tsx
@@ -1,28 +1,13 @@
-import * as Sentry from "@sentry/react-router";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { startTransition, StrictMode } from "react";
 import { hydrateRoot } from "react-dom/client";
 import { HydratedRouter } from "react-router/dom";
 
-Sentry.init({
-  dsn: process.env.VITE_SENTRY_DSN,
-  environment: process.env.VITE_SENTRY_ENVIRONMENT,
-  sendDefaultPii: process.env.VITE_SENTRY_SEND_DEFAULT_PII ? process.env.VITE_SENTRY_SEND_DEFAULT_PII === "1" : false,
-  release: process.env.VITE_APP_VERSION,
-  tracesSampleRate: process.env.VITE_SENTRY_TRACES_SAMPLE_RATE
-    ? parseFloat(process.env.VITE_SENTRY_TRACES_SAMPLE_RATE)
-    : 0.1,
-  profilesSampleRate: process.env.VITE_SENTRY_PROFILES_SAMPLE_RATE
-    ? parseFloat(process.env.VITE_SENTRY_PROFILES_SAMPLE_RATE)
-    : 0.1,
-  replaysSessionSampleRate: process.env.VITE_SENTRY_REPLAYS_SESSION_SAMPLE_RATE
-    ? parseFloat(process.env.VITE_SENTRY_REPLAYS_SESSION_SAMPLE_RATE)
-    : 0.1,
-  replaysOnErrorSampleRate: process.env.VITE_SENTRY_REPLAYS_ON_ERROR_SAMPLE_RATE
-    ? parseFloat(process.env.VITE_SENTRY_REPLAYS_ON_ERROR_SAMPLE_RATE)
-    : 1.0,
-  integrations: [],
-});
-
 startTransition(() => {
   hydrateRoot(
     document,
diff --git a/apps/admin/app/root.tsx b/apps/admin/app/root.tsx
index 89415106d..5d4eafb76 100644
--- a/apps/admin/app/root.tsx
+++ b/apps/admin/app/root.tsx
@@ -1,5 +1,10 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { ReactNode } from "react";
-import * as Sentry from "@sentry/react-router";
 import { Links, Meta, Outlet, Scripts } from "react-router";
 import type { LinksFunction } from "react-router";
 import appleTouchIcon from "@/app/assets/favicon/apple-touch-icon.png?url";
@@ -8,8 +13,13 @@ import favicon32 from "@/app/assets/favicon/favicon-32x32.png?url";
 import faviconIco from "@/app/assets/favicon/favicon.ico?url";
 import { LogoSpinner } from "@/components/common/logo-spinner";
 import globalStyles from "@/styles/globals.css?url";
+import { AppProviders } from "@/providers";
 import type { Route } from "./+types/root";
-import { AppProviders } from "./providers";
+// fonts
+import "@fontsource-variable/inter";
+import interVariableWoff2 from "@fontsource-variable/inter/files/inter-latin-wght-normal.woff2?url";
+import "@fontsource/material-symbols-rounded";
+import "@fontsource/ibm-plex-mono";
 
 const APP_TITLE = "Plane | Simple, extensible, open-source project management tool.";
 const APP_DESCRIPTION =
@@ -22,6 +32,13 @@ export const links: LinksFunction = () => [
   { rel: "shortcut icon", href: faviconIco },
   { rel: "manifest", href: `/site.webmanifest.json` },
   { rel: "stylesheet", href: globalStyles },
+  {
+    rel: "preload",
+    href: interVariableWoff2,
+    as: "font",
+    type: "font/woff2",
+    crossOrigin: "anonymous",
+  },
 ];
 
 export function Layout({ children }: { children: ReactNode }) {
@@ -56,7 +73,11 @@ export const meta: Route.MetaFunction = () => [
 ];
 
 export default function Root() {
-  return <Outlet />;
+  return (
+    <div className="min-h-screen bg-canvas">
+      <Outlet />
+    </div>
+  );
 }
 
 export function HydrateFallback() {
@@ -67,11 +88,7 @@ export function HydrateFallback() {
   );
 }
 
-export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
-  if (error) {
-    Sentry.captureException(error);
-  }
-
+export function ErrorBoundary({ error: _error }: Route.ErrorBoundaryProps) {
   return (
     <div>
       <p>Something went wrong.</p>
diff --git a/apps/admin/app/routes.ts b/apps/admin/app/routes.ts
index 0f7232439..184bed205 100644
--- a/apps/admin/app/routes.ts
+++ b/apps/admin/app/routes.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { index, layout, route } from "@react-router/dev/routes";
 import type { RouteConfig } from "@react-router/dev/routes";
 
diff --git a/apps/admin/ce/components/authentication/index.ts b/apps/admin/ce/components/authentication/index.ts
deleted file mode 100644
index d2aa74855..000000000
--- a/apps/admin/ce/components/authentication/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./authentication-modes";
diff --git a/apps/admin/ce/components/common/index.ts b/apps/admin/ce/components/common/index.ts
deleted file mode 100644
index c6a1da8b6..000000000
--- a/apps/admin/ce/components/common/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./upgrade-button";
diff --git a/apps/admin/ce/components/common/upgrade-button.tsx b/apps/admin/ce/components/common/upgrade-button.tsx
deleted file mode 100644
index 51b6eb6c4..000000000
--- a/apps/admin/ce/components/common/upgrade-button.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import React from "react";
-// icons
-import { SquareArrowOutUpRight } from "lucide-react";
-// plane internal packages
-import { getButtonStyling } from "@plane/propel/button";
-import { cn } from "@plane/utils";
-
-export function UpgradeButton() {
-  return (
-    <a
-      href="https://plane.so/pricing?mode=self-hosted"
-      target="_blank"
-      className={cn(getButtonStyling("primary", "sm"))}
-      rel="noreferrer"
-    >
-      Upgrade
-      <SquareArrowOutUpRight className="h-3.5 w-3.5 p-0.5" />
-    </a>
-  );
-}
diff --git a/apps/admin/ce/store/root.store.ts b/apps/admin/ce/store/root.store.ts
deleted file mode 100644
index 1be816f70..000000000
--- a/apps/admin/ce/store/root.store.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { enableStaticRendering } from "mobx-react";
-// stores
-import { CoreRootStore } from "@/store/root.store";
-
-enableStaticRendering(typeof window === "undefined");
-
-export class RootStore extends CoreRootStore {
-  constructor() {
-    super();
-  }
-
-  hydrate(initialData: any) {
-    super.hydrate(initialData);
-  }
-
-  resetOnSignOut() {
-    super.resetOnSignOut();
-  }
-}
diff --git a/apps/admin/core/components/authentication/authentication-method-card.tsx b/apps/admin/components/authentication/authentication-method-card.tsx
similarity index 61%
rename from apps/admin/core/components/authentication/authentication-method-card.tsx
rename to apps/admin/components/authentication/authentication-method-card.tsx
index c512e24d1..86934bbe7 100644
--- a/apps/admin/core/components/authentication/authentication-method-card.tsx
+++ b/apps/admin/components/authentication/authentication-method-card.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // helpers
 import { cn } from "@plane/utils";
 
@@ -16,8 +22,8 @@ export function AuthenticationMethodCard(props: Props) {
 
   return (
     <div
-      className={cn("w-full flex items-center gap-14 rounded", {
-        "px-4 py-3 border border-custom-border-200": withBorder,
+      className={cn("flex w-full items-center gap-14 rounded-lg bg-layer-2", {
+        "border border-subtle px-4 py-3": withBorder,
       })}
     >
       <div
@@ -26,21 +32,21 @@ export function AuthenticationMethodCard(props: Props) {
         })}
       >
         <div className="shrink-0">
-          <div className="flex h-10 w-10 items-center justify-center rounded-full bg-custom-background-80">{icon}</div>
+          <div className="flex h-10 w-10 items-center justify-center rounded-full bg-layer-1">{icon}</div>
         </div>
         <div className="grow">
           <div
-            className={cn("font-medium leading-5 text-custom-text-100", {
-              "text-sm": withBorder,
-              "text-xl": !withBorder,
+            className={cn("leading-5 font-medium text-primary", {
+              "text-13": withBorder,
+              "text-18": !withBorder,
             })}
           >
             {name}
           </div>
           <div
-            className={cn("font-normal leading-5 text-custom-text-300", {
-              "text-xs": withBorder,
-              "text-sm": !withBorder,
+            className={cn("leading-5 font-regular text-tertiary", {
+              "text-11": withBorder,
+              "text-13": !withBorder,
             })}
           >
             {description}
diff --git a/apps/admin/core/components/authentication/email-config-switch.tsx b/apps/admin/components/authentication/email-config-switch.tsx
similarity index 86%
rename from apps/admin/core/components/authentication/email-config-switch.tsx
rename to apps/admin/components/authentication/email-config-switch.tsx
index 2a53eac12..0f304335b 100644
--- a/apps/admin/core/components/authentication/email-config-switch.tsx
+++ b/apps/admin/components/authentication/email-config-switch.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 import { observer } from "mobx-react";
 // hooks
diff --git a/apps/admin/core/components/authentication/gitea-config.tsx b/apps/admin/components/authentication/gitea-config.tsx
similarity index 75%
rename from apps/admin/core/components/authentication/gitea-config.tsx
rename to apps/admin/components/authentication/gitea-config.tsx
index 22019979e..ef9d6db15 100644
--- a/apps/admin/core/components/authentication/gitea-config.tsx
+++ b/apps/admin/components/authentication/gitea-config.tsx
@@ -1,11 +1,17 @@
-import React from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import Link from "next/link";
 // icons
 import { Settings2 } from "lucide-react";
 // plane internal packages
+import { getButtonStyling } from "@plane/propel/button";
 import type { TInstanceAuthenticationMethodKeys } from "@plane/types";
-import { ToggleSwitch, getButtonStyling } from "@plane/ui";
+import { ToggleSwitch } from "@plane/ui";
 import { cn } from "@plane/utils";
 // hooks
 import { useInstance } from "@/hooks/store";
@@ -28,7 +34,7 @@ export const GiteaConfiguration = observer(function GiteaConfiguration(props: Pr
     <>
       {GiteaConfigured ? (
         <div className="flex items-center gap-4">
-          <Link href="/authentication/gitea" className={cn(getButtonStyling("link-primary", "md"), "font-medium")}>
+          <Link href="/authentication/gitea" className={cn(getButtonStyling("link", "base"), "font-medium")}>
             Edit
           </Link>
           <ToggleSwitch
@@ -43,11 +49,8 @@ export const GiteaConfiguration = observer(function GiteaConfiguration(props: Pr
           />
         </div>
       ) : (
-        <Link
-          href="/authentication/gitea"
-          className={cn(getButtonStyling("neutral-primary", "sm"), "text-custom-text-300")}
-        >
-          <Settings2 className="h-4 w-4 p-0.5 text-custom-text-300/80" />
+        <Link href="/authentication/gitea" className={cn(getButtonStyling("secondary", "base"), "text-tertiary")}>
+          <Settings2 className="h-4 w-4 p-0.5 text-tertiary" />
           Configure
         </Link>
       )}
diff --git a/apps/admin/core/components/authentication/github-config.tsx b/apps/admin/components/authentication/github-config.tsx
similarity index 80%
rename from apps/admin/core/components/authentication/github-config.tsx
rename to apps/admin/components/authentication/github-config.tsx
index b2db3e086..06443bf00 100644
--- a/apps/admin/core/components/authentication/github-config.tsx
+++ b/apps/admin/components/authentication/github-config.tsx
@@ -1,4 +1,9 @@
-import React from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import Link from "next/link";
 // icons
@@ -28,7 +33,7 @@ export const GithubConfiguration = observer(function GithubConfiguration(props:
     <>
       {isGithubConfigured ? (
         <div className="flex items-center gap-4">
-          <Link href="/authentication/github" className={cn(getButtonStyling("link-primary", "md"), "font-medium")}>
+          <Link href="/authentication/github" className={cn(getButtonStyling("link", "base"), "font-medium")}>
             Edit
           </Link>
           <ToggleSwitch
@@ -42,11 +47,8 @@ export const GithubConfiguration = observer(function GithubConfiguration(props:
           />
         </div>
       ) : (
-        <Link
-          href="/authentication/github"
-          className={cn(getButtonStyling("neutral-primary", "sm"), "text-custom-text-300")}
-        >
-          <Settings2 className="h-4 w-4 p-0.5 text-custom-text-300/80" />
+        <Link href="/authentication/github" className={cn(getButtonStyling("secondary", "base"), "text-tertiary")}>
+          <Settings2 className="h-4 w-4 p-0.5 text-tertiary" />
           Configure
         </Link>
       )}
diff --git a/apps/admin/core/components/authentication/gitlab-config.tsx b/apps/admin/components/authentication/gitlab-config.tsx
similarity index 80%
rename from apps/admin/core/components/authentication/gitlab-config.tsx
rename to apps/admin/components/authentication/gitlab-config.tsx
index 7e6ee1ddb..dcd3bed2e 100644
--- a/apps/admin/core/components/authentication/gitlab-config.tsx
+++ b/apps/admin/components/authentication/gitlab-config.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import Link from "next/link";
 // icons
@@ -27,7 +33,7 @@ export const GitlabConfiguration = observer(function GitlabConfiguration(props:
     <>
       {isGitlabConfigured ? (
         <div className="flex items-center gap-4">
-          <Link href="/authentication/gitlab" className={cn(getButtonStyling("link-primary", "md"), "font-medium")}>
+          <Link href="/authentication/gitlab" className={cn(getButtonStyling("link", "base"), "font-medium")}>
             Edit
           </Link>
           <ToggleSwitch
@@ -41,11 +47,8 @@ export const GitlabConfiguration = observer(function GitlabConfiguration(props:
           />
         </div>
       ) : (
-        <Link
-          href="/authentication/gitlab"
-          className={cn(getButtonStyling("neutral-primary", "sm"), "text-custom-text-300")}
-        >
-          <Settings2 className="h-4 w-4 p-0.5 text-custom-text-300/80" />
+        <Link href="/authentication/gitlab" className={cn(getButtonStyling("secondary", "base"), "text-tertiary")}>
+          <Settings2 className="h-4 w-4 p-0.5 text-tertiary" />
           Configure
         </Link>
       )}
diff --git a/apps/admin/core/components/authentication/google-config.tsx b/apps/admin/components/authentication/google-config.tsx
similarity index 80%
rename from apps/admin/core/components/authentication/google-config.tsx
rename to apps/admin/components/authentication/google-config.tsx
index d31b38dda..556dd5aa6 100644
--- a/apps/admin/core/components/authentication/google-config.tsx
+++ b/apps/admin/components/authentication/google-config.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import Link from "next/link";
 // icons
@@ -27,7 +33,7 @@ export const GoogleConfiguration = observer(function GoogleConfiguration(props:
     <>
       {isGoogleConfigured ? (
         <div className="flex items-center gap-4">
-          <Link href="/authentication/google" className={cn(getButtonStyling("link-primary", "md"), "font-medium")}>
+          <Link href="/authentication/google" className={cn(getButtonStyling("link", "base"), "font-medium")}>
             Edit
           </Link>
           <ToggleSwitch
@@ -41,11 +47,8 @@ export const GoogleConfiguration = observer(function GoogleConfiguration(props:
           />
         </div>
       ) : (
-        <Link
-          href="/authentication/google"
-          className={cn(getButtonStyling("neutral-primary", "sm"), "text-custom-text-300")}
-        >
-          <Settings2 className="h-4 w-4 p-0.5 text-custom-text-300/80" />
+        <Link href="/authentication/google" className={cn(getButtonStyling("secondary", "base"), "text-tertiary")}>
+          <Settings2 className="h-4 w-4 p-0.5 text-tertiary" />
           Configure
         </Link>
       )}
diff --git a/apps/admin/core/components/authentication/password-config-switch.tsx b/apps/admin/components/authentication/password-config-switch.tsx
similarity index 86%
rename from apps/admin/core/components/authentication/password-config-switch.tsx
rename to apps/admin/components/authentication/password-config-switch.tsx
index bdc9c4920..1b603980d 100644
--- a/apps/admin/core/components/authentication/password-config-switch.tsx
+++ b/apps/admin/components/authentication/password-config-switch.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 import { observer } from "mobx-react";
 // hooks
diff --git a/apps/admin/components/common/banner.tsx b/apps/admin/components/common/banner.tsx
new file mode 100644
index 000000000..1c56afa3c
--- /dev/null
+++ b/apps/admin/components/common/banner.tsx
@@ -0,0 +1,39 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { AlertCircle, CheckCircle2 } from "lucide-react";
+
+type TBanner = {
+  type: "success" | "error";
+  message: string;
+};
+
+export function Banner(props: TBanner) {
+  const { type, message } = props;
+
+  return (
+    <div
+      className={`w-full rounded-md border p-2 ${type === "error" ? "border-danger-strong bg-danger-subtle" : "border-success-strong bg-success-subtle"}`}
+    >
+      <div className="flex items-center justify-center">
+        <div className="flex-shrink-0">
+          {type === "error" ? (
+            <span className="flex h-6 w-6 items-center justify-center rounded-full">
+              <AlertCircle className="h-5 w-5 text-danger-primary" aria-hidden="true" />
+            </span>
+          ) : (
+            <CheckCircle2 className="h-5 w-5 text-success-primary" aria-hidden="true" />
+          )}
+        </div>
+        <div className="ml-1">
+          <p className={`text-13 font-medium ${type === "error" ? "text-danger-primary" : "text-success-primary"}`}>
+            {message}
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/admin/core/components/common/breadcrumb-link.tsx b/apps/admin/components/common/breadcrumb-link.tsx
similarity index 62%
rename from apps/admin/core/components/common/breadcrumb-link.tsx
rename to apps/admin/components/common/breadcrumb-link.tsx
index aa647e220..46d4fd1da 100644
--- a/apps/admin/core/components/common/breadcrumb-link.tsx
+++ b/apps/admin/components/common/breadcrumb-link.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import Link from "next/link";
 import { Tooltip } from "@plane/propel/tooltip";
 
@@ -14,19 +20,14 @@ export function BreadcrumbLink(props: Props) {
       <li className="flex items-center space-x-2" tabIndex={-1}>
         <div className="flex flex-wrap items-center gap-2.5">
           {href ? (
-            <Link
-              className="flex items-center gap-1 text-sm font-medium text-custom-text-300 hover:text-custom-text-100"
-              href={href}
-            >
-              {icon && (
-                <div className="flex h-5 w-5 items-center justify-center overflow-hidden !text-[1rem]">{icon}</div>
-              )}
-              <div className="relative line-clamp-1 block max-w-[150px] overflow-hidden truncate">{label}</div>
+            <Link className="flex items-center gap-1 text-13 font-medium text-tertiary hover:text-primary" href={href}>
+              {icon && <div className="flex h-5 w-5 items-center justify-center overflow-hidden !text-16">{icon}</div>}
+              <div className="relative line-clamp-1 block max-w-[150px] truncate overflow-hidden">{label}</div>
             </Link>
           ) : (
-            <div className="flex cursor-default items-center gap-1 text-sm font-medium text-custom-text-100">
+            <div className="flex cursor-default items-center gap-1 text-13 font-medium text-primary">
               {icon && <div className="flex h-5 w-5 items-center justify-center overflow-hidden">{icon}</div>}
-              <div className="relative line-clamp-1 block max-w-[150px] overflow-hidden truncate">{label}</div>
+              <div className="relative line-clamp-1 block max-w-[150px] truncate overflow-hidden">{label}</div>
             </div>
           )}
         </div>
diff --git a/apps/admin/core/components/common/code-block.tsx b/apps/admin/components/common/code-block.tsx
similarity index 51%
rename from apps/admin/core/components/common/code-block.tsx
rename to apps/admin/components/common/code-block.tsx
index ab4645949..02c44be22 100644
--- a/apps/admin/core/components/common/code-block.tsx
+++ b/apps/admin/components/common/code-block.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { cn } from "@plane/utils";
 
 type TProps = {
@@ -10,9 +16,9 @@ export function CodeBlock({ children, className, darkerShade }: TProps) {
   return (
     <span
       className={cn(
-        "px-0.5 text-xs text-custom-text-300 bg-custom-background-90 font-semibold rounded-md border border-custom-border-100",
+        "rounded-md border border-subtle bg-surface-2 px-0.5 text-11 font-semibold text-tertiary",
         {
-          "text-custom-text-200 bg-custom-background-80 border-custom-border-200": darkerShade,
+          "border-subtle bg-layer-1 text-secondary": darkerShade,
         },
         className
       )}
diff --git a/apps/admin/core/components/common/confirm-discard-modal.tsx b/apps/admin/components/common/confirm-discard-modal.tsx
similarity index 75%
rename from apps/admin/core/components/common/confirm-discard-modal.tsx
rename to apps/admin/components/common/confirm-discard-modal.tsx
index 2761324f6..7b4786d8c 100644
--- a/apps/admin/core/components/common/confirm-discard-modal.tsx
+++ b/apps/admin/components/common/confirm-discard-modal.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 import Link from "next/link";
 // headless ui
@@ -26,7 +32,7 @@ export function ConfirmDiscardModal(props: Props) {
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
+          <div className="fixed inset-0 bg-backdrop transition-opacity" />
         </Transition.Child>
         <div className="fixed inset-0 z-10 overflow-y-auto">
           <div className="my-10 flex items-center justify-center p-4 text-center sm:p-0 md:my-32">
@@ -39,26 +45,26 @@ export function ConfirmDiscardModal(props: Props) {
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-custom-background-100 text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-[30rem]">
-                <div className="px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-surface-1 text-left shadow-raised-200 transition-all sm:my-8 sm:w-[30rem]">
+                <div className="px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                   <div className="sm:flex sm:items-start">
                     <div className="mt-3 text-center sm:mt-0 sm:text-left">
-                      <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-custom-text-300">
+                      <Dialog.Title as="h3" className="text-16 leading-6 font-medium text-tertiary">
                         You have unsaved changes
                       </Dialog.Title>
                       <div className="mt-2">
-                        <p className="text-sm text-custom-text-400">
+                        <p className="text-13 text-placeholder">
                           Changes you made will be lost if you go back. Do you wish to go back?
                         </p>
                       </div>
                     </div>
                   </div>
                 </div>
-                <div className="flex justify-end items-center p-4 sm:px-6 gap-2">
-                  <Button variant="neutral-primary" size="sm" onClick={handleClose}>
+                <div className="flex items-center justify-end gap-2 p-4 sm:px-6">
+                  <Button variant="secondary" size="lg" onClick={handleClose}>
                     Keep editing
                   </Button>
-                  <Link href={onDiscardHref} className={getButtonStyling("primary", "sm")}>
+                  <Link href={onDiscardHref} className={getButtonStyling("primary", "base")}>
                     Go back
                   </Link>
                 </div>
diff --git a/apps/admin/core/components/common/controller-input.tsx b/apps/admin/components/common/controller-input.tsx
similarity index 81%
rename from apps/admin/core/components/common/controller-input.tsx
rename to apps/admin/components/common/controller-input.tsx
index 4d3534859..3d95b4484 100644
--- a/apps/admin/core/components/common/controller-input.tsx
+++ b/apps/admin/components/common/controller-input.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React, { useState } from "react";
 import type { Control } from "react-hook-form";
 import { Controller } from "react-hook-form";
@@ -35,7 +41,7 @@ export function ControllerInput(props: Props) {
 
   return (
     <div className="flex flex-col gap-1">
-      <h4 className="text-sm text-custom-text-300">{label}</h4>
+      <h4 className="text-13 text-tertiary">{label}</h4>
       <div className="relative">
         <Controller
           control={control}
@@ -61,7 +67,7 @@ export function ControllerInput(props: Props) {
           (showPassword ? (
             <button
               tabIndex={-1}
-              className="absolute right-3 top-2.5 flex items-center justify-center text-custom-text-400"
+              className="absolute top-2.5 right-3 flex items-center justify-center text-placeholder"
               onClick={() => setShowPassword(false)}
             >
               <EyeOff className="h-4 w-4" />
@@ -69,14 +75,14 @@ export function ControllerInput(props: Props) {
           ) : (
             <button
               tabIndex={-1}
-              className="absolute right-3 top-2.5 flex items-center justify-center text-custom-text-400"
+              className="absolute top-2.5 right-3 flex items-center justify-center text-placeholder"
               onClick={() => setShowPassword(true)}
             >
               <Eye className="h-4 w-4" />
             </button>
           ))}
       </div>
-      {description && <p className="pt-0.5 text-xs text-custom-text-300">{description}</p>}
+      {description && <p className="pt-0.5 text-11 text-tertiary">{description}</p>}
     </div>
   );
 }
diff --git a/apps/admin/components/common/controller-switch.tsx b/apps/admin/components/common/controller-switch.tsx
new file mode 100644
index 000000000..58681949d
--- /dev/null
+++ b/apps/admin/components/common/controller-switch.tsx
@@ -0,0 +1,44 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { Control, FieldPath, FieldValues } from "react-hook-form";
+import { Controller } from "react-hook-form";
+// plane internal packages
+import { ToggleSwitch } from "@plane/ui";
+
+type Props<T extends FieldValues = FieldValues> = {
+  control: Control<T>;
+  field: TControllerSwitchFormField<T>;
+};
+
+export type TControllerSwitchFormField<T extends FieldValues = FieldValues> = {
+  name: FieldPath<T>;
+  label: string;
+};
+
+export function ControllerSwitch<T extends FieldValues>(props: Props<T>) {
+  const {
+    control,
+    field: { name, label },
+  } = props;
+
+  return (
+    <div className="flex items-center justify-between gap-1">
+      <h4 className="text-sm text-custom-text-300">Refresh user attributes from {label} during sign in</h4>
+      <div className="relative">
+        <Controller
+          control={control}
+          name={name as FieldPath<T>}
+          render={({ field: { value, onChange } }) => {
+            const parsedValue = Number.parseInt(typeof value === "string" ? value : String(value ?? "0"), 10);
+            const isOn = !Number.isNaN(parsedValue) && parsedValue !== 0;
+            return <ToggleSwitch value={isOn} onChange={() => onChange(isOn ? "0" : "1")} size="sm" />;
+          }}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/apps/admin/core/components/common/copy-field.tsx b/apps/admin/components/common/copy-field.tsx
similarity index 64%
rename from apps/admin/core/components/common/copy-field.tsx
rename to apps/admin/components/common/copy-field.tsx
index 484cf7454..d161740df 100644
--- a/apps/admin/core/components/common/copy-field.tsx
+++ b/apps/admin/components/common/copy-field.tsx
@@ -1,7 +1,13 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 // ui
-import { Copy } from "lucide-react";
 import { Button } from "@plane/propel/button";
+import { CopyIcon } from "@plane/propel/icons";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 
 type Props = {
@@ -22,9 +28,10 @@ export function CopyField(props: Props) {
 
   return (
     <div className="flex flex-col gap-1">
-      <h4 className="text-sm text-custom-text-200">{label}</h4>
+      <h4 className="text-13 text-secondary">{label}</h4>
       <Button
-        variant="neutral-primary"
+        variant="secondary"
+        size="lg"
         className="flex items-center justify-between py-2"
         onClick={() => {
           navigator.clipboard.writeText(url);
@@ -35,10 +42,10 @@ export function CopyField(props: Props) {
           });
         }}
       >
-        <p className="text-sm font-medium">{url}</p>
-        <Copy size={18} color="#B9B9B9" />
+        <p className="text-13 font-medium">{url}</p>
+        <CopyIcon width={18} height={18} color="#B9B9B9" />
       </Button>
-      <div className="text-xs text-custom-text-300">{description}</div>
+      <div className="text-11 text-tertiary">{description}</div>
     </div>
   );
 }
diff --git a/apps/admin/core/components/common/empty-state.tsx b/apps/admin/components/common/empty-state.tsx
similarity index 76%
rename from apps/admin/core/components/common/empty-state.tsx
rename to apps/admin/components/common/empty-state.tsx
index f69b04179..0f33f13cc 100644
--- a/apps/admin/core/components/common/empty-state.tsx
+++ b/apps/admin/components/common/empty-state.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 import { Button } from "@plane/propel/button";
 
@@ -19,8 +25,8 @@ export function EmptyState({ title, description, image, primaryButton, secondary
     <div className={`flex h-full w-full items-center justify-center`}>
       <div className="flex w-full flex-col items-center text-center">
         {image && <img src={image} className="w-52 sm:w-60" alt={primaryButton?.text || "button image"} />}
-        <h6 className="mb-3 mt-6 text-xl font-semibold sm:mt-8">{title}</h6>
-        {description && <p className="mb-7 px-5 text-custom-text-300 sm:mb-8">{description}</p>}
+        <h6 className="mt-6 mb-3 text-18 font-semibold sm:mt-8">{title}</h6>
+        {description && <p className="mb-7 px-5 text-tertiary sm:mb-8">{description}</p>}
         <div className="flex items-center gap-4">
           {primaryButton && (
             <Button
@@ -28,6 +34,7 @@ export function EmptyState({ title, description, image, primaryButton, secondary
               prependIcon={primaryButton.icon}
               onClick={primaryButton.onClick}
               disabled={disabled}
+              size="lg"
             >
               {primaryButton.text}
             </Button>
diff --git a/apps/admin/components/common/header/core.ts b/apps/admin/components/common/header/core.ts
new file mode 100644
index 000000000..4cfc8ee71
--- /dev/null
+++ b/apps/admin/components/common/header/core.ts
@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export const CORE_HEADER_SEGMENT_LABELS: Record<string, string> = {
+  general: "General",
+  ai: "Artificial Intelligence",
+  email: "Email",
+  authentication: "Authentication",
+  image: "Image",
+  google: "Google",
+  github: "GitHub",
+  gitlab: "GitLab",
+  gitea: "Gitea",
+  workspace: "Workspace",
+  create: "Create",
+};
diff --git a/apps/admin/components/common/header/extended.ts b/apps/admin/components/common/header/extended.ts
new file mode 100644
index 000000000..b4c3e66d3
--- /dev/null
+++ b/apps/admin/components/common/header/extended.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export const EXTENDED_HEADER_SEGMENT_LABELS: Record<string, string> = {};
diff --git a/apps/admin/app/(all)/(dashboard)/header.tsx b/apps/admin/components/common/header/index.tsx
similarity index 60%
rename from apps/admin/app/(all)/(dashboard)/header.tsx
rename to apps/admin/components/common/header/index.tsx
index c2ccc6358..48b9ca78e 100644
--- a/apps/admin/app/(all)/(dashboard)/header.tsx
+++ b/apps/admin/components/common/header/index.tsx
@@ -1,57 +1,42 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import { usePathname } from "next/navigation";
 import { Menu, Settings } from "lucide-react";
 // icons
 import { Breadcrumbs } from "@plane/ui";
 // components
-import { BreadcrumbLink } from "@/components/common/breadcrumb-link";
+import { BreadcrumbLink } from "../breadcrumb-link";
 // hooks
 import { useTheme } from "@/hooks/store";
+// local imports
+import { CORE_HEADER_SEGMENT_LABELS } from "./core";
+import { EXTENDED_HEADER_SEGMENT_LABELS } from "./extended";
 
 export const HamburgerToggle = observer(function HamburgerToggle() {
   const { isSidebarCollapsed, toggleSidebar } = useTheme();
   return (
-    <div
-      className="w-7 h-7 rounded flex justify-center items-center bg-custom-background-80 transition-all hover:bg-custom-background-90 cursor-pointer group md:hidden"
+    <button
+      className="group flex size-7 cursor-pointer items-center justify-center rounded-sm bg-layer-1 transition-all hover:bg-layer-1-hover md:hidden"
       onClick={() => toggleSidebar(!isSidebarCollapsed)}
     >
-      <Menu size={14} className="text-custom-text-200 group-hover:text-custom-text-100 transition-all" />
-    </div>
+      <Menu size={14} className="text-secondary transition-all group-hover:text-primary" />
+    </button>
   );
 });
 
+const HEADER_SEGMENT_LABELS = {
+  ...CORE_HEADER_SEGMENT_LABELS,
+  ...EXTENDED_HEADER_SEGMENT_LABELS,
+};
+
 export const AdminHeader = observer(function AdminHeader() {
   const pathName = usePathname();
 
-  const getHeaderTitle = (pathName: string) => {
-    switch (pathName) {
-      case "general":
-        return "General";
-      case "ai":
-        return "Artificial Intelligence";
-      case "email":
-        return "Email";
-      case "authentication":
-        return "Authentication";
-      case "image":
-        return "Image";
-      case "google":
-        return "Google";
-      case "github":
-        return "GitHub";
-      case "gitlab":
-        return "GitLab";
-      case "gitea":
-        return "Gitea";
-      case "workspace":
-        return "Workspace";
-      case "create":
-        return "Create";
-      default:
-        return pathName.toUpperCase();
-    }
-  };
-
   // Function to dynamically generate breadcrumb items based on pathname
   const generateBreadcrumbItems = (pathname: string) => {
     const pathSegments = pathname.split("/").slice(1); // removing the first empty string.
@@ -61,17 +46,17 @@ export const AdminHeader = observer(function AdminHeader() {
     const breadcrumbItems = pathSegments.map((segment) => {
       currentUrl += "/" + segment;
       return {
-        title: getHeaderTitle(segment),
+        title: HEADER_SEGMENT_LABELS[segment] ?? segment.toUpperCase(),
         href: currentUrl,
       };
     });
     return breadcrumbItems;
   };
 
-  const breadcrumbItems = generateBreadcrumbItems(pathName);
+  const breadcrumbItems = generateBreadcrumbItems(pathName || "");
 
   return (
-    <div className="relative z-10 flex h-header w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-custom-sidebar-border-200 bg-custom-sidebar-background-100 p-4">
+    <div className="relative z-10 flex h-header w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-subtle bg-surface-1 p-4">
       <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
         <HamburgerToggle />
         {breadcrumbItems.length >= 0 && (
@@ -82,7 +67,7 @@ export const AdminHeader = observer(function AdminHeader() {
                   <BreadcrumbLink
                     href="/general/"
                     label="Settings"
-                    icon={<Settings className="h-4 w-4 text-custom-text-300" />}
+                    icon={<Settings className="h-4 w-4 text-tertiary" />}
                   />
                 }
               />
diff --git a/apps/admin/core/components/common/logo-spinner.tsx b/apps/admin/components/common/logo-spinner.tsx
similarity index 76%
rename from apps/admin/core/components/common/logo-spinner.tsx
rename to apps/admin/components/common/logo-spinner.tsx
index 4d06d2822..b74c38d70 100644
--- a/apps/admin/core/components/common/logo-spinner.tsx
+++ b/apps/admin/components/common/logo-spinner.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useTheme } from "next-themes";
 import LogoSpinnerDark from "@/app/assets/images/logo-spinner-dark.gif?url";
 import LogoSpinnerLight from "@/app/assets/images/logo-spinner-light.gif?url";
diff --git a/apps/admin/core/components/new-user-popup.tsx b/apps/admin/components/common/new-user-popup.tsx
similarity index 71%
rename from apps/admin/core/components/new-user-popup.tsx
rename to apps/admin/components/common/new-user-popup.tsx
index bd4c3ee46..30dda8d2d 100644
--- a/apps/admin/core/components/new-user-popup.tsx
+++ b/apps/admin/components/common/new-user-popup.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import Link from "next/link";
 import { useTheme as useNextTheme } from "next-themes";
@@ -18,24 +24,24 @@ export const NewUserPopup = observer(function NewUserPopup() {
 
   if (!isNewUserPopup) return <></>;
   return (
-    <div className="absolute bottom-8 right-8 p-6 w-96 border border-custom-border-100 shadow-md rounded-lg bg-custom-background-100">
+    <div className="shadow-md absolute right-8 bottom-8 w-96 rounded-lg border border-subtle bg-surface-1 p-6">
       <div className="flex gap-4">
         <div className="grow">
-          <div className="text-base font-semibold">Create workspace</div>
-          <div className="py-2 text-sm font-medium text-custom-text-300">
+          <div className="text-14 font-semibold">Create workspace</div>
+          <div className="py-2 text-13 font-medium text-tertiary">
             Instance setup done! Welcome to Plane instance portal. Start your journey with by creating your first
             workspace.
           </div>
           <div className="flex items-center gap-4 pt-2">
-            <Link href="/workspace/create" className={getButtonStyling("primary", "sm")}>
+            <Link href="/workspace/create" className={getButtonStyling("primary", "lg")}>
               Create workspace
             </Link>
-            <Button variant="neutral-primary" size="sm" onClick={toggleNewUserPopup}>
+            <Button variant="secondary" size="lg" onClick={toggleNewUserPopup}>
               Close
             </Button>
           </div>
         </div>
-        <div className="shrink-0 flex items-center justify-center">
+        <div className="flex shrink-0 items-center justify-center">
           <img
             src={resolveGeneralTheme(resolvedTheme) === "dark" ? TakeoffIconDark : TakeoffIconLight}
             height={80}
diff --git a/apps/admin/core/components/common/page-header.tsx b/apps/admin/components/common/page-header.tsx
similarity index 66%
rename from apps/admin/core/components/common/page-header.tsx
rename to apps/admin/components/common/page-header.tsx
index f0845fab3..eafc4e927 100644
--- a/apps/admin/core/components/common/page-header.tsx
+++ b/apps/admin/components/common/page-header.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 type TPageHeader = {
   title?: string;
   description?: string;
diff --git a/apps/admin/components/common/page-wrapper.tsx b/apps/admin/components/common/page-wrapper.tsx
new file mode 100644
index 000000000..b5a19e6c6
--- /dev/null
+++ b/apps/admin/components/common/page-wrapper.tsx
@@ -0,0 +1,50 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { ReactNode } from "react";
+// plane imports
+import { cn } from "@plane/utils";
+
+type TPageWrapperProps = {
+  children: ReactNode;
+  header?: {
+    title: string;
+    description: string | ReactNode;
+    actions?: ReactNode;
+  };
+  customHeader?: ReactNode;
+  size?: "lg" | "md";
+};
+
+export const PageWrapper = (props: TPageWrapperProps) => {
+  const { children, header, customHeader, size = "md" } = props;
+
+  return (
+    <div
+      className={cn("mx-auto h-full w-full space-y-6 py-4", {
+        "max-w-[1000px] md:px-4 2xl:max-w-[1200px]": size === "md",
+        "px-4 lg:px-12": size === "lg",
+      })}
+    >
+      {customHeader ? (
+        <div className="mx-4 shrink-0 space-y-1 border-b border-subtle py-4">{customHeader}</div>
+      ) : (
+        header && (
+          <div className="mx-4 flex shrink-0 items-center justify-between gap-4 space-y-1 border-b border-subtle py-4">
+            <div className={header.actions ? "flex flex-col gap-1" : "space-y-1"}>
+              <div className="text-h5-semibold text-primary">{header.title}</div>
+              <div className="text-body-sm-regular text-secondary">{header.description}</div>
+            </div>
+            {header.actions && <div className="shrink-0">{header.actions}</div>}
+          </div>
+        )
+      )}
+      <div className="vertical-scrollbar scrollbar-sm flex-grow overflow-hidden overflow-y-scroll px-4 pb-4">
+        {children}
+      </div>
+    </div>
+  );
+};
diff --git a/apps/admin/core/components/instance/failure.tsx b/apps/admin/components/instance/failure.tsx
similarity index 62%
rename from apps/admin/core/components/instance/failure.tsx
rename to apps/admin/components/instance/failure.tsx
index e31633dc9..1f1610fbe 100644
--- a/apps/admin/core/components/instance/failure.tsx
+++ b/apps/admin/components/instance/failure.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import { useTheme } from "next-themes";
 import { Button } from "@plane/propel/button";
@@ -18,17 +24,17 @@ export const InstanceFailureView = observer(function InstanceFailureView() {
   return (
     <>
       <AuthHeader />
-      <div className="flex flex-col justify-center items-center flex-grow w-full py-6 mt-10">
-        <div className="relative flex flex-col gap-6 max-w-[22.5rem] w-full">
-          <div className="relative flex flex-col justify-center items-center space-y-4">
+      <div className="mt-10 flex w-full flex-grow flex-col items-center justify-center py-6">
+        <div className="relative flex w-full max-w-[22.5rem] flex-col gap-6">
+          <div className="relative flex flex-col items-center justify-center space-y-4">
             <img src={instanceImage} alt="Instance failure illustration" />
-            <h3 className="font-medium text-2xl text-white text-center">Unable to fetch instance details.</h3>
-            <p className="font-medium text-base text-center">
+            <h3 className="text-center text-20 font-medium text-on-color">Unable to fetch instance details.</h3>
+            <p className="text-center text-14 font-medium">
               We were unable to fetch the details of the instance. Fret not, it might just be a connectivity issue.
             </p>
           </div>
           <div className="flex justify-center">
-            <Button size="md" onClick={handleRetry}>
+            <Button size="lg" onClick={handleRetry}>
               Retry
             </Button>
           </div>
diff --git a/apps/admin/components/instance/form-header.tsx b/apps/admin/components/instance/form-header.tsx
new file mode 100644
index 000000000..652b7d304
--- /dev/null
+++ b/apps/admin/components/instance/form-header.tsx
@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export function FormHeader({ heading, subHeading }: { heading: string; subHeading: string }) {
+  return (
+    <div className="flex flex-col gap-1">
+      <span className="text-20 leading-7 font-semibold text-primary">{heading}</span>
+      <span className="text-16 leading-7 font-semibold text-placeholder">{subHeading}</span>
+    </div>
+  );
+}
diff --git a/apps/admin/components/instance/instance-not-ready.tsx b/apps/admin/components/instance/instance-not-ready.tsx
new file mode 100644
index 000000000..4fa5e0670
--- /dev/null
+++ b/apps/admin/components/instance/instance-not-ready.tsx
@@ -0,0 +1,32 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import Link from "next/link";
+import { Button } from "@plane/propel/button";
+// assets
+import PlaneTakeOffImage from "@/app/assets/images/plane-takeoff.png?url";
+
+export function InstanceNotReady() {
+  return (
+    <div className="relative container mx-auto flex h-full w-full items-center justify-center px-5">
+      <div className="relative w-auto max-w-2xl space-y-8 py-10">
+        <div className="relative flex flex-col items-center justify-center space-y-4">
+          <h1 className="pb-3 text-24 font-bold">Welcome aboard Plane!</h1>
+          <img src={PlaneTakeOffImage} alt="Plane Logo" />
+          <p className="text-14 font-medium text-placeholder">Get started by setting up your instance and workspace</p>
+        </div>
+
+        <div>
+          <Link href={"/setup/?auth_enabled=0"}>
+            <Button size="xl" className="w-full">
+              Get started
+            </Button>
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/admin/core/components/instance/loading.tsx b/apps/admin/components/instance/loading.tsx
similarity index 76%
rename from apps/admin/core/components/instance/loading.tsx
rename to apps/admin/components/instance/loading.tsx
index 2b45deff2..293b44bdc 100644
--- a/apps/admin/core/components/instance/loading.tsx
+++ b/apps/admin/components/instance/loading.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useTheme } from "next-themes";
 // assets
 import LogoSpinnerDark from "@/app/assets/images/logo-spinner-dark.gif?url";
diff --git a/apps/admin/core/components/instance/setup-form.tsx b/apps/admin/components/instance/setup-form.tsx
similarity index 69%
rename from apps/admin/core/components/instance/setup-form.tsx
rename to apps/admin/components/instance/setup-form.tsx
index ab25b1a3e..74e80db45 100644
--- a/apps/admin/core/components/instance/setup-form.tsx
+++ b/apps/admin/components/instance/setup-form.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useEffect, useMemo, useState } from "react";
 import { useSearchParams } from "next/navigation";
 // icons
@@ -7,11 +13,11 @@ import { API_BASE_URL, E_PASSWORD_STRENGTH } from "@plane/constants";
 import { Button } from "@plane/propel/button";
 import { AuthService } from "@plane/services";
 import { Checkbox, Input, PasswordStrengthIndicator, Spinner } from "@plane/ui";
-import { getPasswordStrength } from "@plane/utils";
+import { getPasswordStrength, validatePersonName, validateCompanyName } from "@plane/utils";
 // components
 import { AuthHeader } from "@/app/(all)/(home)/auth-header";
-import { Banner } from "@/components/common/banner";
-import { FormHeader } from "@/components/instance/form-header";
+import { Banner } from "../common/banner";
+import { FormHeader } from "./form-header";
 
 // service initialization
 const authService = new AuthService();
@@ -54,13 +60,13 @@ const defaultFromData: TFormData = {
 export function InstanceSetupForm() {
   // search params
   const searchParams = useSearchParams();
-  const firstNameParam = searchParams.get("first_name") || undefined;
-  const lastNameParam = searchParams.get("last_name") || undefined;
-  const companyParam = searchParams.get("company") || undefined;
-  const emailParam = searchParams.get("email") || undefined;
-  const isTelemetryEnabledParam = (searchParams.get("is_telemetry_enabled") === "True" ? true : false) || true;
-  const errorCode = searchParams.get("error_code") || undefined;
-  const errorMessage = searchParams.get("error_message") || undefined;
+  const firstNameParam = searchParams?.get("first_name") || undefined;
+  const lastNameParam = searchParams?.get("last_name") || undefined;
+  const companyParam = searchParams?.get("company") || undefined;
+  const emailParam = searchParams?.get("email") || undefined;
+  const isTelemetryEnabledParam = (searchParams?.get("is_telemetry_enabled") === "True" ? true : false) || true;
+  const errorCode = searchParams?.get("error_code") || undefined;
+  const errorMessage = searchParams?.get("error_message") || undefined;
   // state
   const [showPassword, setShowPassword] = useState({
     password: false,
@@ -133,8 +139,8 @@ export function InstanceSetupForm() {
   return (
     <>
       <AuthHeader />
-      <div className="flex flex-col justify-center items-center flex-grow w-full py-6 mt-10">
-        <div className="relative flex flex-col gap-6 max-w-[22.5rem] w-full">
+      <div className="mt-10 flex w-full flex-grow flex-col items-center justify-center py-6">
+        <div className="relative flex w-full max-w-[22.5rem] flex-col gap-6">
           <FormHeader
             heading="Setup your Plane Instance"
             subHeading="Post setup you will be able to manage this Plane instance."
@@ -154,48 +160,60 @@ export function InstanceSetupForm() {
             <input type="hidden" name="csrfmiddlewaretoken" value={csrfToken} />
             <input type="hidden" name="is_telemetry_enabled" value={formData.is_telemetry_enabled ? "True" : "False"} />
 
-            <div className="flex flex-col sm:flex-row items-center gap-4">
+            <div className="flex flex-col items-center gap-4 sm:flex-row">
               <div className="w-full space-y-1">
-                <label className="text-sm text-custom-text-300 font-medium" htmlFor="first_name">
-                  First name <span className="text-red-500">*</span>
+                <label className="text-13 font-medium text-tertiary" htmlFor="first_name">
+                  First name <span className="text-danger-primary">*</span>
                 </label>
                 <Input
-                  className="w-full border border-custom-border-100 !bg-custom-background-100 placeholder:text-custom-text-400"
+                  className="w-full border border-subtle !bg-surface-1 placeholder:text-placeholder"
                   id="first_name"
                   name="first_name"
                   type="text"
                   inputSize="md"
                   placeholder="Wilber"
                   value={formData.first_name}
-                  onChange={(e) => handleFormChange("first_name", e.target.value)}
-                  autoComplete="on"
+                  onChange={(e) => {
+                    const validation = validatePersonName(e.target.value);
+                    if (validation === true || e.target.value === "") {
+                      handleFormChange("first_name", e.target.value);
+                    }
+                  }}
+                  autoComplete="off"
                   autoFocus
+                  maxLength={50}
                 />
               </div>
               <div className="w-full space-y-1">
-                <label className="text-sm text-custom-text-300 font-medium" htmlFor="last_name">
-                  Last name <span className="text-red-500">*</span>
+                <label className="text-13 font-medium text-tertiary" htmlFor="last_name">
+                  Last name <span className="text-danger-primary">*</span>
                 </label>
                 <Input
-                  className="w-full border border-custom-border-100 !bg-custom-background-100 placeholder:text-custom-text-400"
+                  className="w-full border border-subtle !bg-surface-1 placeholder:text-placeholder"
                   id="last_name"
                   name="last_name"
                   type="text"
                   inputSize="md"
                   placeholder="Wright"
                   value={formData.last_name}
-                  onChange={(e) => handleFormChange("last_name", e.target.value)}
-                  autoComplete="on"
+                  onChange={(e) => {
+                    const validation = validatePersonName(e.target.value);
+                    if (validation === true || e.target.value === "") {
+                      handleFormChange("last_name", e.target.value);
+                    }
+                  }}
+                  autoComplete="off"
+                  maxLength={50}
                 />
               </div>
             </div>
 
             <div className="w-full space-y-1">
-              <label className="text-sm text-custom-text-300 font-medium" htmlFor="email">
-                Email <span className="text-red-500">*</span>
+              <label className="text-13 font-medium text-tertiary" htmlFor="email">
+                Email <span className="text-danger-primary">*</span>
               </label>
               <Input
-                className="w-full border border-custom-border-100 !bg-custom-background-100 placeholder:text-custom-text-400"
+                className="w-full border border-subtle !bg-surface-1 placeholder:text-placeholder"
                 id="email"
                 name="email"
                 type="email"
@@ -204,53 +222,59 @@ export function InstanceSetupForm() {
                 value={formData.email}
                 onChange={(e) => handleFormChange("email", e.target.value)}
                 hasError={errorData.type && errorData.type === EErrorCodes.INVALID_EMAIL ? true : false}
-                autoComplete="on"
+                autoComplete="off"
               />
               {errorData.type && errorData.type === EErrorCodes.INVALID_EMAIL && errorData.message && (
-                <p className="px-1 text-xs text-red-500">{errorData.message}</p>
+                <p className="px-1 text-11 text-danger-primary">{errorData.message}</p>
               )}
             </div>
 
             <div className="w-full space-y-1">
-              <label className="text-sm text-custom-text-300 font-medium" htmlFor="company_name">
-                Company name <span className="text-red-500">*</span>
+              <label className="text-13 font-medium text-tertiary" htmlFor="company_name">
+                Company name <span className="text-danger-primary">*</span>
               </label>
               <Input
-                className="w-full border border-custom-border-100 !bg-custom-background-100 placeholder:text-custom-text-400"
+                className="w-full border border-subtle !bg-surface-1 placeholder:text-placeholder"
                 id="company_name"
                 name="company_name"
                 type="text"
                 inputSize="md"
                 placeholder="Company name"
                 value={formData.company_name}
-                onChange={(e) => handleFormChange("company_name", e.target.value)}
+                onChange={(e) => {
+                  const validation = validateCompanyName(e.target.value, false);
+                  if (validation === true || e.target.value === "") {
+                    handleFormChange("company_name", e.target.value);
+                  }
+                }}
+                maxLength={80}
               />
             </div>
 
             <div className="w-full space-y-1">
-              <label className="text-sm text-custom-text-300 font-medium" htmlFor="password">
-                Set a password <span className="text-red-500">*</span>
+              <label className="text-13 font-medium text-tertiary" htmlFor="password">
+                Set a password <span className="text-danger-primary">*</span>
               </label>
               <div className="relative">
                 <Input
-                  className="w-full border border-custom-border-100 !bg-custom-background-100 placeholder:text-custom-text-400"
+                  className="w-full border border-subtle !bg-surface-1 placeholder:text-placeholder"
                   id="password"
                   name="password"
                   type={showPassword.password ? "text" : "password"}
                   inputSize="md"
-                  placeholder="New password..."
+                  placeholder="New password"
                   value={formData.password}
                   onChange={(e) => handleFormChange("password", e.target.value)}
                   hasError={errorData.type && errorData.type === EErrorCodes.INVALID_PASSWORD ? true : false}
                   onFocus={() => setIsPasswordInputFocused(true)}
                   onBlur={() => setIsPasswordInputFocused(false)}
-                  autoComplete="on"
+                  autoComplete="new-password"
                 />
                 {showPassword.password ? (
                   <button
                     type="button"
                     tabIndex={-1}
-                    className="absolute right-3 top-3.5 flex items-center justify-center text-custom-text-400"
+                    className="absolute top-3.5 right-3 flex items-center justify-center text-placeholder"
                     onClick={() => handleShowPassword("password")}
                   >
                     <EyeOff className="h-4 w-4" />
@@ -259,7 +283,7 @@ export function InstanceSetupForm() {
                   <button
                     type="button"
                     tabIndex={-1}
-                    className="absolute right-3 top-3.5 flex items-center justify-center text-custom-text-400"
+                    className="absolute top-3.5 right-3 flex items-center justify-center text-placeholder"
                     onClick={() => handleShowPassword("password")}
                   >
                     <Eye className="h-4 w-4" />
@@ -267,14 +291,14 @@ export function InstanceSetupForm() {
                 )}
               </div>
               {errorData.type && errorData.type === EErrorCodes.INVALID_PASSWORD && errorData.message && (
-                <p className="px-1 text-xs text-red-500">{errorData.message}</p>
+                <p className="px-1 text-11 text-danger-primary">{errorData.message}</p>
               )}
               <PasswordStrengthIndicator password={formData.password} isFocused={isPasswordInputFocused} />
             </div>
 
             <div className="w-full space-y-1">
-              <label className="text-sm text-custom-text-300 font-medium" htmlFor="confirm_password">
-                Confirm password <span className="text-red-500">*</span>
+              <label className="text-13 font-medium text-tertiary" htmlFor="confirm_password">
+                Confirm password <span className="text-danger-primary">*</span>
               </label>
               <div className="relative">
                 <Input
@@ -285,15 +309,16 @@ export function InstanceSetupForm() {
                   value={formData.confirm_password}
                   onChange={(e) => handleFormChange("confirm_password", e.target.value)}
                   placeholder="Confirm password"
-                  className="w-full border border-custom-border-100 !bg-custom-background-100 pr-12 placeholder:text-custom-text-400"
+                  className="w-full border border-subtle !bg-surface-1 pr-12 placeholder:text-placeholder"
                   onFocus={() => setIsRetryPasswordInputFocused(true)}
                   onBlur={() => setIsRetryPasswordInputFocused(false)}
+                  autoComplete="new-password"
                 />
                 {showPassword.retypePassword ? (
                   <button
                     type="button"
                     tabIndex={-1}
-                    className="absolute right-3 top-3.5 flex items-center justify-center text-custom-text-400"
+                    className="absolute top-3.5 right-3 flex items-center justify-center text-placeholder"
                     onClick={() => handleShowPassword("retypePassword")}
                   >
                     <EyeOff className="h-4 w-4" />
@@ -302,7 +327,7 @@ export function InstanceSetupForm() {
                   <button
                     type="button"
                     tabIndex={-1}
-                    className="absolute right-3 top-3.5 flex items-center justify-center text-custom-text-400"
+                    className="absolute top-3.5 right-3 flex items-center justify-center text-placeholder"
                     onClick={() => handleShowPassword("retypePassword")}
                   >
                     <Eye className="h-4 w-4" />
@@ -311,27 +336,29 @@ export function InstanceSetupForm() {
               </div>
               {!!formData.confirm_password &&
                 formData.password !== formData.confirm_password &&
-                renderPasswordMatchError && <span className="text-sm text-red-500">Passwords don{"'"}t match</span>}
+                renderPasswordMatchError && (
+                  <span className="text-13 text-danger-primary">Passwords don{"'"}t match</span>
+                )}
             </div>
 
             <div className="relative flex gap-2">
               <div>
                 <Checkbox
-                  className="w-4 h-4"
+                  className="h-4 w-4"
                   iconClassName="w-3 h-3"
                   id="is_telemetry_enabled"
                   onChange={() => handleFormChange("is_telemetry_enabled", !formData.is_telemetry_enabled)}
                   checked={formData.is_telemetry_enabled}
                 />
               </div>
-              <label className="text-sm text-custom-text-300 font-medium cursor-pointer" htmlFor="is_telemetry_enabled">
+              <label className="cursor-pointer text-13 font-medium text-tertiary" htmlFor="is_telemetry_enabled">
                 Allow Plane to anonymously collect usage events.{" "}
                 <a
                   tabIndex={-1}
                   href="https://developers.plane.so/self-hosting/telemetry"
                   target="_blank"
                   rel="noopener noreferrer"
-                  className="text-sm font-medium text-blue-500 hover:text-blue-600 flex-shrink-0"
+                  className="text-blue-500 hover:text-blue-600 flex-shrink-0 text-13 font-medium"
                 >
                   See More
                 </a>
@@ -339,7 +366,7 @@ export function InstanceSetupForm() {
             </div>
 
             <div className="py-2">
-              <Button type="submit" size="lg" className="w-full" disabled={isButtonDisabled}>
+              <Button type="submit" size="xl" className="w-full" disabled={isButtonDisabled}>
                 {isSubmitting ? <Spinner height="20px" width="20px" /> : "Continue"}
               </Button>
             </div>
diff --git a/apps/admin/core/components/workspace/list-item.tsx b/apps/admin/components/workspace/list-item.tsx
similarity index 53%
rename from apps/admin/core/components/workspace/list-item.tsx
rename to apps/admin/components/workspace/list-item.tsx
index 01855eec8..9594d7f21 100644
--- a/apps/admin/core/components/workspace/list-item.tsx
+++ b/apps/admin/components/workspace/list-item.tsx
@@ -1,7 +1,14 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
-import { ExternalLink } from "lucide-react";
+
 // plane internal packages
 import { WEB_BASE_URL } from "@plane/constants";
+import { NewTabIcon } from "@plane/propel/icons";
 import { Tooltip } from "@plane/propel/tooltip";
 import { getFileURL } from "@plane/utils";
 // hooks
@@ -23,19 +30,19 @@ export const WorkspaceListItem = observer(function WorkspaceListItem({ workspace
       key={workspaceId}
       href={`${WEB_BASE_URL}/${encodeURIComponent(workspace.slug)}`}
       target="_blank"
-      className="group flex items-center justify-between p-4 gap-2.5 truncate border border-custom-border-200/70 hover:border-custom-border-200 hover:bg-custom-background-90 rounded-md"
+      className="group flex items-center justify-between gap-2.5 truncate rounded-lg border border-subtle bg-layer-1 p-3 hover:border-subtle-1 hover:bg-layer-1-hover hover:shadow-raised-100"
       rel="noreferrer"
     >
       <div className="flex items-start gap-4">
         <span
-          className={`relative flex h-8 w-8 flex-shrink-0 items-center justify-center p-2 mt-1 text-xs uppercase ${
-            !workspace?.logo_url && "rounded bg-custom-primary-500 text-white"
+          className={`relative mt-1 flex h-8 w-8 flex-shrink-0 items-center justify-center p-2 text-11 uppercase ${
+            !workspace?.logo_url && "rounded-lg bg-accent-primary text-on-color"
           }`}
         >
           {workspace?.logo_url && workspace.logo_url !== "" ? (
             <img
               src={getFileURL(workspace.logo_url)}
-              className="absolute left-0 top-0 h-full w-full rounded object-cover"
+              className="absolute top-0 left-0 h-full w-full rounded-sm object-cover"
               alt="Workspace Logo"
             />
           ) : (
@@ -43,31 +50,31 @@ export const WorkspaceListItem = observer(function WorkspaceListItem({ workspace
           )}
         </span>
         <div className="flex flex-col items-start gap-1">
-          <div className="flex flex-wrap w-full items-center gap-2.5">
-            <h3 className={`text-base font-medium capitalize`}>{workspace.name}</h3>/
+          <div className="flex w-full flex-wrap items-center gap-2.5">
+            <h3 className={`text-14 font-medium capitalize`}>{workspace.name}</h3>/
             <Tooltip tooltipContent="The unique URL of your workspace">
-              <h4 className="text-sm text-custom-text-300">[{workspace.slug}]</h4>
+              <h4 className="text-13 text-tertiary">[{workspace.slug}]</h4>
             </Tooltip>
           </div>
           {workspace.owner.email && (
-            <div className="flex items-center gap-1 text-xs">
-              <h3 className="text-custom-text-200 font-medium">Owned by:</h3>
-              <h4 className="text-custom-text-300">{workspace.owner.email}</h4>
+            <div className="flex items-center gap-1 text-11">
+              <h3 className="font-medium text-secondary">Owned by:</h3>
+              <h4 className="text-tertiary">{workspace.owner.email}</h4>
             </div>
           )}
-          <div className="flex items-center gap-2.5 text-xs">
+          <div className="flex items-center gap-2.5 text-11">
             {workspace.total_projects !== null && (
               <span className="flex items-center gap-1">
-                <h3 className="text-custom-text-200 font-medium">Total projects:</h3>
-                <h4 className="text-custom-text-300">{workspace.total_projects}</h4>
+                <h3 className="font-medium text-secondary">Total projects:</h3>
+                <h4 className="text-tertiary">{workspace.total_projects}</h4>
               </span>
             )}
             {workspace.total_members !== null && (
               <>
                 •
                 <span className="flex items-center gap-1">
-                  <h3 className="text-custom-text-200 font-medium">Total members:</h3>
-                  <h4 className="text-custom-text-300">{workspace.total_members}</h4>
+                  <h3 className="font-medium text-secondary">Total members:</h3>
+                  <h4 className="text-tertiary">{workspace.total_members}</h4>
                 </span>
               </>
             )}
@@ -75,7 +82,7 @@ export const WorkspaceListItem = observer(function WorkspaceListItem({ workspace
         </div>
       </div>
       <div className="flex-shrink-0">
-        <ExternalLink size={14} className="text-custom-text-400 group-hover:text-custom-text-200" />
+        <NewTabIcon width={14} height={16} className="text-placeholder group-hover:text-secondary" />
       </div>
     </a>
   );
diff --git a/apps/admin/core/components/common/banner.tsx b/apps/admin/core/components/common/banner.tsx
deleted file mode 100644
index df0818b34..000000000
--- a/apps/admin/core/components/common/banner.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import { AlertCircle, CheckCircle2 } from "lucide-react";
-
-type TBanner = {
-  type: "success" | "error";
-  message: string;
-};
-
-export function Banner(props: TBanner) {
-  const { type, message } = props;
-
-  return (
-    <div
-      className={`rounded-md p-2 w-full border ${type === "error" ? "bg-red-500/5 border-red-400" : "bg-green-500/5 border-green-400"}`}
-    >
-      <div className="flex items-center justify-center">
-        <div className="flex-shrink-0">
-          {type === "error" ? (
-            <span className="flex items-center justify-center h-6 w-6 rounded-full">
-              <AlertCircle className="h-5 w-5 text-red-600" aria-hidden="true" />
-            </span>
-          ) : (
-            <CheckCircle2 className="h-5 w-5 text-green-600" aria-hidden="true" />
-          )}
-        </div>
-        <div className="ml-1">
-          <p className={`text-sm font-medium ${type === "error" ? "text-red-600" : "text-green-600"}`}>{message}</p>
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/apps/admin/core/components/instance/form-header.tsx b/apps/admin/core/components/instance/form-header.tsx
deleted file mode 100644
index ead66b963..000000000
--- a/apps/admin/core/components/instance/form-header.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-export function FormHeader({ heading, subHeading }: { heading: string; subHeading: string }) {
-  return (
-    <div className="flex flex-col gap-1">
-      <span className="text-2xl font-semibold text-custom-text-100 leading-7">{heading}</span>
-      <span className="text-lg font-semibold text-custom-text-400 leading-7">{subHeading}</span>
-    </div>
-  );
-}
diff --git a/apps/admin/core/components/instance/instance-not-ready.tsx b/apps/admin/core/components/instance/instance-not-ready.tsx
deleted file mode 100644
index 0473effcd..000000000
--- a/apps/admin/core/components/instance/instance-not-ready.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import Link from "next/link";
-import { Button } from "@plane/propel/button";
-// assets
-import PlaneTakeOffImage from "@/app/assets/images/plane-takeoff.png?url";
-
-export function InstanceNotReady() {
-  return (
-    <div className="h-full w-full relative container px-5 mx-auto flex justify-center items-center">
-      <div className="w-auto max-w-2xl relative space-y-8 py-10">
-        <div className="relative flex flex-col justify-center items-center space-y-4">
-          <h1 className="text-3xl font-bold pb-3">Welcome aboard Plane!</h1>
-          <img src={PlaneTakeOffImage} alt="Plane Logo" />
-          <p className="font-medium text-base text-custom-text-400">
-            Get started by setting up your instance and workspace
-          </p>
-        </div>
-
-        <div>
-          <Link href={"/setup/?auth_enabled=0"}>
-            <Button size="lg" className="w-full">
-              Get started
-            </Button>
-          </Link>
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/apps/admin/core/hooks/store/index.ts b/apps/admin/core/hooks/store/index.ts
deleted file mode 100644
index ed1781299..000000000
--- a/apps/admin/core/hooks/store/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export * from "./use-theme";
-export * from "./use-instance";
-export * from "./use-user";
-export * from "./use-workspace";
diff --git a/apps/admin/core/lib/b-progress/index.tsx b/apps/admin/core/lib/b-progress/index.tsx
deleted file mode 100644
index 7b531da2b..000000000
--- a/apps/admin/core/lib/b-progress/index.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./AppProgressBar";
diff --git a/apps/admin/core/utils/public-asset.ts b/apps/admin/core/utils/public-asset.ts
deleted file mode 100644
index cb0ff5c3b..000000000
--- a/apps/admin/core/utils/public-asset.ts
+++ /dev/null
@@ -1 +0,0 @@
-export {};
diff --git a/apps/admin/ee/components/authentication/authentication-modes.tsx b/apps/admin/ee/components/authentication/authentication-modes.tsx
deleted file mode 100644
index 4e3b05a52..000000000
--- a/apps/admin/ee/components/authentication/authentication-modes.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export * from "ce/components/authentication/authentication-modes";
diff --git a/apps/admin/ee/components/authentication/index.ts b/apps/admin/ee/components/authentication/index.ts
deleted file mode 100644
index d2aa74855..000000000
--- a/apps/admin/ee/components/authentication/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./authentication-modes";
diff --git a/apps/admin/ee/components/common/index.ts b/apps/admin/ee/components/common/index.ts
deleted file mode 100644
index 60441ee25..000000000
--- a/apps/admin/ee/components/common/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "ce/components/common";
diff --git a/apps/admin/ee/store/root.store.ts b/apps/admin/ee/store/root.store.ts
deleted file mode 100644
index c514c4c25..000000000
--- a/apps/admin/ee/store/root.store.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "ce/store/root.store";
diff --git a/apps/admin/helpers/authentication.ts b/apps/admin/helpers/authentication.ts
new file mode 100644
index 000000000..22b5e3b4b
--- /dev/null
+++ b/apps/admin/helpers/authentication.ts
@@ -0,0 +1,36 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type {
+  IFormattedInstanceConfiguration,
+  TInstanceAuthenticationModes,
+  TInstanceConfigurationKeys,
+} from "@plane/types";
+
+/**
+ * Checks if a given authentication method can be disabled.
+ * @param configKey - The configuration key to check.
+ * @param authModes - The authentication modes to check.
+ * @param formattedConfig - The formatted configuration to check.
+ * @returns True if the authentication method can be disabled, false otherwise.
+ */
+export const canDisableAuthMethod = (
+  configKey: TInstanceConfigurationKeys,
+  authModes: TInstanceAuthenticationModes[],
+  formattedConfig: IFormattedInstanceConfiguration | undefined
+): boolean => {
+  // Count currently enabled methods
+  const enabledCount = authModes.reduce((count, method) => {
+    const enabledKey = method.enabledConfigKey;
+    if (!enabledKey || !formattedConfig) return count;
+    const isEnabled = Boolean(parseInt(formattedConfig[enabledKey] ?? "0"));
+    return isEnabled ? count + 1 : count;
+  }, 0);
+
+  // If trying to disable and only 1 method is enabled, prevent it
+  const isCurrentlyEnabled = Boolean(parseInt(formattedConfig?.[configKey] ?? "0"));
+  return !(isCurrentlyEnabled && enabledCount === 1);
+};
diff --git a/apps/admin/ce/components/authentication/authentication-modes.tsx b/apps/admin/hooks/oauth/core.tsx
similarity index 51%
rename from apps/admin/ce/components/authentication/authentication-modes.tsx
rename to apps/admin/hooks/oauth/core.tsx
index 7b0f658d8..9e6914e41 100644
--- a/apps/admin/ce/components/authentication/authentication-modes.tsx
+++ b/apps/admin/hooks/oauth/core.tsx
@@ -1,129 +1,92 @@
-import { observer } from "mobx-react";
-import { useTheme } from "next-themes";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { KeyRound, Mails } from "lucide-react";
 // types
 import type {
+  TCoreInstanceAuthenticationModeKeys,
   TGetBaseAuthenticationModeProps,
-  TInstanceAuthenticationMethodKeys,
   TInstanceAuthenticationModes,
 } from "@plane/types";
-import { resolveGeneralTheme } from "@plane/utils";
-// components
+// assets
 import giteaLogo from "@/app/assets/logos/gitea-logo.svg?url";
 import githubLightModeImage from "@/app/assets/logos/github-black.png?url";
 import githubDarkModeImage from "@/app/assets/logos/github-white.png?url";
-import GitlabLogo from "@/app/assets/logos/gitlab-logo.svg?url";
-import GoogleLogo from "@/app/assets/logos/google-logo.svg?url";
-import OIDCLogo from "@/app/assets/logos/oidc-logo.svg?url";
-import SAMLLogo from "@/app/assets/logos/saml-logo.svg?url";
-import { AuthenticationMethodCard } from "@/components/authentication/authentication-method-card";
+import gitlabLogo from "@/app/assets/logos/gitlab-logo.svg?url";
+import googleLogo from "@/app/assets/logos/google-logo.svg?url";
+// components
 import { EmailCodesConfiguration } from "@/components/authentication/email-config-switch";
 import { GiteaConfiguration } from "@/components/authentication/gitea-config";
 import { GithubConfiguration } from "@/components/authentication/github-config";
 import { GitlabConfiguration } from "@/components/authentication/gitlab-config";
 import { GoogleConfiguration } from "@/components/authentication/google-config";
 import { PasswordLoginConfiguration } from "@/components/authentication/password-config-switch";
-// plane admin components
-import { UpgradeButton } from "@/plane-admin/components/common";
-// assets
-
-export type TAuthenticationModeProps = {
-  disabled: boolean;
-  updateConfig: (key: TInstanceAuthenticationMethodKeys, value: string) => void;
-};
 
 // Authentication methods
-export const getAuthenticationModes: (props: TGetBaseAuthenticationModeProps) => TInstanceAuthenticationModes[] = ({
+export const getCoreAuthenticationModesMap: (
+  props: TGetBaseAuthenticationModeProps
+) => Record<TCoreInstanceAuthenticationModeKeys, TInstanceAuthenticationModes> = ({
   disabled,
   updateConfig,
   resolvedTheme,
-}) => [
-  {
+}) => ({
+  "unique-codes": {
     key: "unique-codes",
     name: "Unique codes",
     description:
       "Log in or sign up for Plane using codes sent via email. You need to have set up SMTP to use this method.",
-    icon: <Mails className="h-6 w-6 p-0.5 text-custom-text-300/80" />,
+    icon: <Mails className="h-6 w-6 p-0.5 text-tertiary" />,
     config: <EmailCodesConfiguration disabled={disabled} updateConfig={updateConfig} />,
+    enabledConfigKey: "ENABLE_MAGIC_LINK_LOGIN",
   },
-  {
+  "passwords-login": {
     key: "passwords-login",
     name: "Passwords",
     description: "Allow members to create accounts with passwords and use it with their email addresses to sign in.",
-    icon: <KeyRound className="h-6 w-6 p-0.5 text-custom-text-300/80" />,
+    icon: <KeyRound className="h-6 w-6 p-0.5 text-tertiary" />,
     config: <PasswordLoginConfiguration disabled={disabled} updateConfig={updateConfig} />,
+    enabledConfigKey: "ENABLE_EMAIL_PASSWORD",
   },
-  {
+  google: {
     key: "google",
     name: "Google",
     description: "Allow members to log in or sign up for Plane with their Google accounts.",
-    icon: <img src={GoogleLogo} height={20} width={20} alt="Google Logo" />,
+    icon: <img src={googleLogo} height={20} width={20} alt="Google Logo" />,
     config: <GoogleConfiguration disabled={disabled} updateConfig={updateConfig} />,
+    enabledConfigKey: "IS_GOOGLE_ENABLED",
   },
-  {
+  github: {
     key: "github",
     name: "GitHub",
     description: "Allow members to log in or sign up for Plane with their GitHub accounts.",
     icon: (
       <img
-        src={resolveGeneralTheme(resolvedTheme) === "dark" ? githubDarkModeImage : githubLightModeImage}
+        src={resolvedTheme === "dark" ? githubDarkModeImage : githubLightModeImage}
         height={20}
         width={20}
         alt="GitHub Logo"
       />
     ),
     config: <GithubConfiguration disabled={disabled} updateConfig={updateConfig} />,
+    enabledConfigKey: "IS_GITHUB_ENABLED",
   },
-  {
+  gitlab: {
     key: "gitlab",
     name: "GitLab",
     description: "Allow members to log in or sign up to plane with their GitLab accounts.",
-    icon: <img src={GitlabLogo} height={20} width={20} alt="GitLab Logo" />,
+    icon: <img src={gitlabLogo} height={20} width={20} alt="GitLab Logo" />,
     config: <GitlabConfiguration disabled={disabled} updateConfig={updateConfig} />,
+    enabledConfigKey: "IS_GITLAB_ENABLED",
   },
-  {
+  gitea: {
     key: "gitea",
     name: "Gitea",
     description: "Allow members to log in or sign up to plane with their Gitea accounts.",
     icon: <img src={giteaLogo} height={20} width={20} alt="Gitea Logo" />,
     config: <GiteaConfiguration disabled={disabled} updateConfig={updateConfig} />,
+    enabledConfigKey: "IS_GITEA_ENABLED",
   },
-  {
-    key: "oidc",
-    name: "OIDC",
-    description: "Authenticate your users via the OpenID Connect protocol.",
-    icon: <img src={OIDCLogo} height={22} width={22} alt="OIDC Logo" />,
-    config: <UpgradeButton />,
-    unavailable: true,
-  },
-  {
-    key: "saml",
-    name: "SAML",
-    description: "Authenticate your users via the Security Assertion Markup Language protocol.",
-    icon: <img src={SAMLLogo} height={22} width={22} alt="SAML Logo" className="pl-0.5" />,
-    config: <UpgradeButton />,
-    unavailable: true,
-  },
-];
-
-export const AuthenticationModes = observer(function AuthenticationModes(props: TAuthenticationModeProps) {
-  const { disabled, updateConfig } = props;
-  // next-themes
-  const { resolvedTheme } = useTheme();
-
-  return (
-    <>
-      {getAuthenticationModes({ disabled, updateConfig, resolvedTheme }).map((method) => (
-        <AuthenticationMethodCard
-          key={method.key}
-          name={method.name}
-          description={method.description}
-          icon={method.icon}
-          config={method.config}
-          disabled={disabled}
-          unavailable={method.unavailable}
-        />
-      ))}
-    </>
-  );
 });
diff --git a/apps/admin/hooks/oauth/index.ts b/apps/admin/hooks/oauth/index.ts
new file mode 100644
index 000000000..74c11e33f
--- /dev/null
+++ b/apps/admin/hooks/oauth/index.ts
@@ -0,0 +1,25 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { TInstanceAuthenticationModes } from "@plane/types";
+import { getCoreAuthenticationModesMap } from "./core";
+import type { TGetAuthenticationModeProps } from "./types";
+
+export const useAuthenticationModes = (props: TGetAuthenticationModeProps): TInstanceAuthenticationModes[] => {
+  // derived values
+  const authenticationModes = getCoreAuthenticationModesMap(props);
+
+  const availableAuthenticationModes: TInstanceAuthenticationModes[] = [
+    authenticationModes["unique-codes"],
+    authenticationModes["passwords-login"],
+    authenticationModes["google"],
+    authenticationModes["github"],
+    authenticationModes["gitlab"],
+    authenticationModes["gitea"],
+  ];
+
+  return availableAuthenticationModes;
+};
diff --git a/apps/admin/hooks/oauth/types.ts b/apps/admin/hooks/oauth/types.ts
new file mode 100644
index 000000000..3e89ad936
--- /dev/null
+++ b/apps/admin/hooks/oauth/types.ts
@@ -0,0 +1,13 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { TInstanceAuthenticationMethodKeys } from "@plane/types";
+
+export type TGetAuthenticationModeProps = {
+  disabled: boolean;
+  updateConfig: (key: TInstanceAuthenticationMethodKeys, value: string) => void;
+  resolvedTheme: string | undefined;
+};
diff --git a/apps/admin/hooks/store/index.ts b/apps/admin/hooks/store/index.ts
new file mode 100644
index 000000000..3b8df72f6
--- /dev/null
+++ b/apps/admin/hooks/store/index.ts
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./use-theme";
+export * from "./use-instance";
+export * from "./use-user";
+export * from "./use-workspace";
diff --git a/apps/admin/core/hooks/store/use-instance.tsx b/apps/admin/hooks/store/use-instance.tsx
similarity index 60%
rename from apps/admin/core/hooks/store/use-instance.tsx
rename to apps/admin/hooks/store/use-instance.tsx
index 5917df3fa..4ae991139 100644
--- a/apps/admin/core/hooks/store/use-instance.tsx
+++ b/apps/admin/hooks/store/use-instance.tsx
@@ -1,6 +1,12 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useContext } from "react";
 // store
-import { StoreContext } from "@/app/(all)/store.provider";
+import { StoreContext } from "@/providers/store.provider";
 import type { IInstanceStore } from "@/store/instance.store";
 
 export const useInstance = (): IInstanceStore => {
diff --git a/apps/admin/core/hooks/store/use-theme.tsx b/apps/admin/hooks/store/use-theme.tsx
similarity index 59%
rename from apps/admin/core/hooks/store/use-theme.tsx
rename to apps/admin/hooks/store/use-theme.tsx
index d5a1e820e..2348c2e43 100644
--- a/apps/admin/core/hooks/store/use-theme.tsx
+++ b/apps/admin/hooks/store/use-theme.tsx
@@ -1,6 +1,12 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useContext } from "react";
 // store
-import { StoreContext } from "@/app/(all)/store.provider";
+import { StoreContext } from "@/providers/store.provider";
 import type { IThemeStore } from "@/store/theme.store";
 
 export const useTheme = (): IThemeStore => {
diff --git a/apps/admin/core/hooks/store/use-user.tsx b/apps/admin/hooks/store/use-user.tsx
similarity index 58%
rename from apps/admin/core/hooks/store/use-user.tsx
rename to apps/admin/hooks/store/use-user.tsx
index 56b988eb8..5eba488d9 100644
--- a/apps/admin/core/hooks/store/use-user.tsx
+++ b/apps/admin/hooks/store/use-user.tsx
@@ -1,6 +1,12 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useContext } from "react";
 // store
-import { StoreContext } from "@/app/(all)/store.provider";
+import { StoreContext } from "@/providers/store.provider";
 import type { IUserStore } from "@/store/user.store";
 
 export const useUser = (): IUserStore => {
diff --git a/apps/admin/core/hooks/store/use-workspace.tsx b/apps/admin/hooks/store/use-workspace.tsx
similarity index 60%
rename from apps/admin/core/hooks/store/use-workspace.tsx
rename to apps/admin/hooks/store/use-workspace.tsx
index c4578c917..42a2bf7f7 100644
--- a/apps/admin/core/hooks/store/use-workspace.tsx
+++ b/apps/admin/hooks/store/use-workspace.tsx
@@ -1,6 +1,12 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useContext } from "react";
 // store
-import { StoreContext } from "@/app/(all)/store.provider";
+import { StoreContext } from "@/providers/store.provider";
 import type { IWorkspaceStore } from "@/store/workspace.store";
 
 export const useWorkspace = (): IWorkspaceStore => {
diff --git a/apps/admin/hooks/use-sidebar-menu/core.ts b/apps/admin/hooks/use-sidebar-menu/core.ts
new file mode 100644
index 000000000..9d4e449b3
--- /dev/null
+++ b/apps/admin/hooks/use-sidebar-menu/core.ts
@@ -0,0 +1,52 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { Image, BrainCog, Cog, Mail } from "lucide-react";
+// plane imports
+import { LockIcon, WorkspaceIcon } from "@plane/propel/icons";
+// types
+import type { TSidebarMenuItem } from "./types";
+
+export type TCoreSidebarMenuKey = "general" | "email" | "workspace" | "authentication" | "ai" | "image";
+
+export const coreSidebarMenuLinks: Record<TCoreSidebarMenuKey, TSidebarMenuItem> = {
+  general: {
+    Icon: Cog,
+    name: "General",
+    description: "Identify your instances and get key details.",
+    href: `/general/`,
+  },
+  email: {
+    Icon: Mail,
+    name: "Email",
+    description: "Configure your SMTP controls.",
+    href: `/email/`,
+  },
+  workspace: {
+    Icon: WorkspaceIcon,
+    name: "Workspaces",
+    description: "Manage all workspaces on this instance.",
+    href: `/workspace/`,
+  },
+  authentication: {
+    Icon: LockIcon,
+    name: "Authentication",
+    description: "Configure authentication modes.",
+    href: `/authentication/`,
+  },
+  ai: {
+    Icon: BrainCog,
+    name: "Artificial intelligence",
+    description: "Configure your OpenAI creds.",
+    href: `/ai/`,
+  },
+  image: {
+    Icon: Image,
+    name: "Images in Plane",
+    description: "Allow third-party image libraries.",
+    href: `/image/`,
+  },
+};
diff --git a/apps/admin/hooks/use-sidebar-menu/index.ts b/apps/admin/hooks/use-sidebar-menu/index.ts
new file mode 100644
index 000000000..cfc76f47e
--- /dev/null
+++ b/apps/admin/hooks/use-sidebar-menu/index.ts
@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// local imports
+import { coreSidebarMenuLinks } from "./core";
+import type { TSidebarMenuItem } from "./types";
+
+export function useSidebarMenu(): TSidebarMenuItem[] {
+  return [
+    coreSidebarMenuLinks.general,
+    coreSidebarMenuLinks.email,
+    coreSidebarMenuLinks.authentication,
+    coreSidebarMenuLinks.workspace,
+    coreSidebarMenuLinks.ai,
+    coreSidebarMenuLinks.image,
+  ];
+}
diff --git a/apps/admin/hooks/use-sidebar-menu/types.ts b/apps/admin/hooks/use-sidebar-menu/types.ts
new file mode 100644
index 000000000..dfe531bb2
--- /dev/null
+++ b/apps/admin/hooks/use-sidebar-menu/types.ts
@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { LucideIcon } from "lucide-react";
+
+export type TSidebarMenuItem = {
+  Icon: LucideIcon | React.ComponentType<{ className?: string }>;
+  name: string;
+  description: string;
+  href: string;
+};
diff --git a/apps/space/core/lib/b-progress/AppProgressBar.tsx b/apps/admin/lib/b-progress/AppProgressBar.tsx
similarity index 95%
rename from apps/space/core/lib/b-progress/AppProgressBar.tsx
rename to apps/admin/lib/b-progress/AppProgressBar.tsx
index 7ad93fc11..e4362581d 100644
--- a/apps/space/core/lib/b-progress/AppProgressBar.tsx
+++ b/apps/admin/lib/b-progress/AppProgressBar.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useEffect, useRef } from "react";
 import { BProgress } from "@bprogress/core";
 import { useNavigation } from "react-router";
diff --git a/apps/admin/lib/b-progress/index.tsx b/apps/admin/lib/b-progress/index.tsx
new file mode 100644
index 000000000..592017255
--- /dev/null
+++ b/apps/admin/lib/b-progress/index.tsx
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./AppProgressBar";
diff --git a/apps/admin/nginx/nginx.conf b/apps/admin/nginx/nginx.conf
index 243aebff5..0fd4a192a 100644
--- a/apps/admin/nginx/nginx.conf
+++ b/apps/admin/nginx/nginx.conf
@@ -20,6 +20,12 @@ http {
   server {
     listen 3000;
 
+    # Security headers
+    add_header X-Frame-Options "DENY" always;
+    add_header X-Content-Type-Options "nosniff" always;
+    add_header Strict-Transport-Security "max-age=31536000; includeSubDomains" always;
+    add_header X-XSS-Protection "1; mode=block" always;
+
     location / {
       root   /usr/share/nginx/html;
       index  index.html index.htm;
diff --git a/apps/admin/package.json b/apps/admin/package.json
index 573a3ddfe..8a492643a 100644
--- a/apps/admin/package.json
+++ b/apps/admin/package.json
@@ -1,9 +1,9 @@
 {
   "name": "admin",
-  "description": "Admin UI for Plane",
-  "version": "1.2.3",
-  "license": "AGPL-3.0",
+  "version": "1.3.0",
   "private": true,
+  "description": "Admin UI for Plane",
+  "license": "AGPL-3.0",
   "type": "module",
   "scripts": {
     "dev": "react-router dev --port 3001",
@@ -11,14 +11,17 @@
     "preview": "react-router build && serve -s build/client -l 3001",
     "start": "serve -s build/client -l 3001",
     "clean": "rm -rf .turbo && rm -rf .next && rm -rf node_modules && rm -rf dist && rm -rf build",
-    "check:lint": "eslint . --max-warnings=485",
+    "check:lint": "oxlint --max-warnings=759 .",
     "check:types": "react-router typegen && tsc --noEmit",
-    "check:format": "prettier --check .",
-    "fix:lint": "eslint . --fix --max-warnings=485",
-    "fix:format": "prettier --write ."
+    "check:format": "oxfmt --check .",
+    "fix:lint": "oxlint --fix .",
+    "fix:format": "oxfmt ."
   },
   "dependencies": {
     "@bprogress/core": "catalog:",
+    "@fontsource-variable/inter": "5.2.8",
+    "@fontsource/ibm-plex-mono": "5.2.7",
+    "@fontsource/material-symbols-rounded": "5.2.30",
     "@headlessui/react": "^1.7.19",
     "@plane/constants": "workspace:*",
     "@plane/hooks": "workspace:*",
@@ -28,7 +31,6 @@
     "@plane/ui": "workspace:*",
     "@plane/utils": "workspace:*",
     "@react-router/node": "catalog:",
-    "@sentry/react-router": "catalog:",
     "@tanstack/react-virtual": "^3.13.12",
     "@tanstack/virtual-core": "^3.13.12",
     "axios": "catalog:",
@@ -42,13 +44,11 @@
     "react-dom": "catalog:",
     "react-hook-form": "7.51.5",
     "react-router": "catalog:",
-    "react-router-dom": "catalog:",
     "serve": "14.2.5",
     "swr": "catalog:",
     "uuid": "catalog:"
   },
   "devDependencies": {
-    "@dotenvx/dotenvx": "catalog:",
     "@plane/tailwind-config": "workspace:*",
     "@plane/typescript-config": "workspace:*",
     "@react-router/dev": "catalog:",
@@ -56,6 +56,7 @@
     "@types/node": "catalog:",
     "@types/react": "catalog:",
     "@types/react-dom": "catalog:",
+    "dotenv": "catalog:",
     "typescript": "catalog:",
     "vite": "catalog:",
     "vite-tsconfig-paths": "^5.1.4"
diff --git a/apps/admin/postcss.config.cjs b/apps/admin/postcss.config.cjs
deleted file mode 100644
index 8a677108f..000000000
--- a/apps/admin/postcss.config.cjs
+++ /dev/null
@@ -1 +0,0 @@
-module.exports = require("@plane/tailwind-config/postcss.config.js");
diff --git a/apps/admin/postcss.config.js b/apps/admin/postcss.config.js
new file mode 100644
index 000000000..3ad28f15f
--- /dev/null
+++ b/apps/admin/postcss.config.js
@@ -0,0 +1,3 @@
+import postcssConfig from "@plane/tailwind-config/postcss.config.js";
+
+export default postcssConfig;
diff --git a/apps/admin/app/providers.tsx b/apps/admin/providers/core.tsx
similarity index 61%
rename from apps/admin/app/providers.tsx
rename to apps/admin/providers/core.tsx
index 0406cec09..3b22c7087 100644
--- a/apps/admin/app/providers.tsx
+++ b/apps/admin/providers/core.tsx
@@ -1,10 +1,17 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { ThemeProvider } from "next-themes";
 import { SWRConfig } from "swr";
 import { AppProgressBar } from "@/lib/b-progress";
-import { InstanceProvider } from "./(all)/instance.provider";
-import { StoreProvider } from "./(all)/store.provider";
-import { ToastWithTheme } from "./(all)/toast";
-import { UserProvider } from "./(all)/user.provider";
+// local imports
+import { ToastWithTheme } from "./toast";
+import { StoreProvider } from "./store.provider";
+import { InstanceProvider } from "./instance.provider";
+import { UserProvider } from "./user.provider";
 
 const DEFAULT_SWR_CONFIG = {
   refreshWhenHidden: false,
@@ -15,7 +22,7 @@ const DEFAULT_SWR_CONFIG = {
   errorRetryCount: 3,
 };
 
-export function AppProviders({ children }: { children: React.ReactNode }) {
+export function CoreProviders({ children }: { children: React.ReactNode }) {
   return (
     <ThemeProvider themes={["light", "dark"]} defaultTheme="system" enableSystem>
       <AppProgressBar />
diff --git a/apps/admin/providers/extended.tsx b/apps/admin/providers/extended.tsx
new file mode 100644
index 000000000..72023a79b
--- /dev/null
+++ b/apps/admin/providers/extended.tsx
@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export function ExtendedProviders({ children }: { children: React.ReactNode }) {
+  return <>{children}</>;
+}
diff --git a/apps/admin/providers/index.tsx b/apps/admin/providers/index.tsx
new file mode 100644
index 000000000..2ecd419b2
--- /dev/null
+++ b/apps/admin/providers/index.tsx
@@ -0,0 +1,16 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { CoreProviders } from "./core";
+import { ExtendedProviders } from "./extended";
+
+export function AppProviders({ children }: { children: React.ReactNode }) {
+  return (
+    <CoreProviders>
+      <ExtendedProviders>{children}</ExtendedProviders>
+    </CoreProviders>
+  );
+}
diff --git a/apps/admin/app/(all)/instance.provider.tsx b/apps/admin/providers/instance.provider.tsx
similarity index 77%
rename from apps/admin/app/(all)/instance.provider.tsx
rename to apps/admin/providers/instance.provider.tsx
index 5dcd3b6f5..50e669621 100644
--- a/apps/admin/app/(all)/instance.provider.tsx
+++ b/apps/admin/providers/instance.provider.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import useSWR from "swr";
 // hooks
diff --git a/apps/admin/app/(all)/store.provider.tsx b/apps/admin/providers/store.provider.tsx
similarity index 84%
rename from apps/admin/app/(all)/store.provider.tsx
rename to apps/admin/providers/store.provider.tsx
index 49e341b72..9ddb53b6b 100644
--- a/apps/admin/app/(all)/store.provider.tsx
+++ b/apps/admin/providers/store.provider.tsx
@@ -1,6 +1,12 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { createContext } from "react";
 // plane admin store
-import { RootStore } from "@/plane-admin/store/root.store";
+import { RootStore } from "../store/root.store";
 
 let rootStore = new RootStore();
 
diff --git a/apps/admin/app/(all)/toast.tsx b/apps/admin/providers/toast.tsx
similarity index 64%
rename from apps/admin/app/(all)/toast.tsx
rename to apps/admin/providers/toast.tsx
index 1e7e3a11e..541678efa 100644
--- a/apps/admin/app/(all)/toast.tsx
+++ b/apps/admin/providers/toast.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useTheme } from "next-themes";
 import { Toast } from "@plane/propel/toast";
 import { resolveGeneralTheme } from "@plane/utils";
diff --git a/apps/admin/app/(all)/user.provider.tsx b/apps/admin/providers/user.provider.tsx
similarity index 86%
rename from apps/admin/app/(all)/user.provider.tsx
rename to apps/admin/providers/user.provider.tsx
index 04242abc9..3a840c186 100644
--- a/apps/admin/app/(all)/user.provider.tsx
+++ b/apps/admin/providers/user.provider.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useEffect } from "react";
 import { observer } from "mobx-react";
 import useSWR from "swr";
diff --git a/apps/admin/core/store/instance.store.ts b/apps/admin/store/instance.store.ts
similarity index 96%
rename from apps/admin/core/store/instance.store.ts
rename to apps/admin/store/instance.store.ts
index ec8922920..ed92beae1 100644
--- a/apps/admin/core/store/instance.store.ts
+++ b/apps/admin/store/instance.store.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { set } from "lodash-es";
 import { observable, action, computed, makeObservable, runInAction } from "mobx";
 // plane internal packages
@@ -13,7 +19,7 @@ import type {
   IInstanceConfig,
 } from "@plane/types";
 // root store
-import type { CoreRootStore } from "@/store/root.store";
+import type { RootStore } from "@/store/root.store";
 
 export interface IInstanceStore {
   // issues
@@ -47,7 +53,7 @@ export class InstanceStore implements IInstanceStore {
   // service
   instanceService;
 
-  constructor(private store: CoreRootStore) {
+  constructor(private store: RootStore) {
     makeObservable(this, {
       // observable
       isLoading: observable.ref,
diff --git a/apps/admin/core/store/root.store.ts b/apps/admin/store/root.store.ts
similarity index 87%
rename from apps/admin/core/store/root.store.ts
rename to apps/admin/store/root.store.ts
index 68d11885b..42f0a63e5 100644
--- a/apps/admin/core/store/root.store.ts
+++ b/apps/admin/store/root.store.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { enableStaticRendering } from "mobx-react";
 // stores
 import type { IInstanceStore } from "./instance.store";
@@ -11,7 +17,7 @@ import { WorkspaceStore } from "./workspace.store";
 
 enableStaticRendering(typeof window === "undefined");
 
-export abstract class CoreRootStore {
+export class RootStore {
   theme: IThemeStore;
   instance: IInstanceStore;
   user: IUserStore;
diff --git a/apps/admin/core/store/theme.store.ts b/apps/admin/store/theme.store.ts
similarity index 88%
rename from apps/admin/core/store/theme.store.ts
rename to apps/admin/store/theme.store.ts
index 4512facd2..bb663804f 100644
--- a/apps/admin/core/store/theme.store.ts
+++ b/apps/admin/store/theme.store.ts
@@ -1,6 +1,12 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { action, observable, makeObservable } from "mobx";
 // root store
-import type { CoreRootStore } from "@/store/root.store";
+import type { RootStore } from "./root.store";
 
 type TTheme = "dark" | "light";
 export interface IThemeStore {
@@ -21,7 +27,7 @@ export class ThemeStore implements IThemeStore {
   isSidebarCollapsed: boolean | undefined = undefined;
   theme: string | undefined = undefined;
 
-  constructor(private store: CoreRootStore) {
+  constructor(private store: RootStore) {
     makeObservable(this, {
       // observables
       isNewUserPopup: observable.ref,
diff --git a/apps/admin/core/store/user.store.ts b/apps/admin/store/user.store.ts
similarity index 91%
rename from apps/admin/core/store/user.store.ts
rename to apps/admin/store/user.store.ts
index 1187355a0..c218eec0f 100644
--- a/apps/admin/core/store/user.store.ts
+++ b/apps/admin/store/user.store.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { action, observable, runInAction, makeObservable } from "mobx";
 // plane internal packages
 import type { TUserStatus } from "@plane/constants";
@@ -5,7 +11,7 @@ import { EUserStatus } from "@plane/constants";
 import { AuthService, UserService } from "@plane/services";
 import type { IUser } from "@plane/types";
 // root store
-import type { CoreRootStore } from "@/store/root.store";
+import type { RootStore } from "@/store/root.store";
 
 export interface IUserStore {
   // observables
@@ -30,7 +36,7 @@ export class UserStore implements IUserStore {
   userService;
   authService;
 
-  constructor(private store: CoreRootStore) {
+  constructor(private store: RootStore) {
     makeObservable(this, {
       // observables
       isLoading: observable.ref,
diff --git a/apps/admin/core/store/workspace.store.ts b/apps/admin/store/workspace.store.ts
similarity index 94%
rename from apps/admin/core/store/workspace.store.ts
rename to apps/admin/store/workspace.store.ts
index f9203ed40..7dbfaa1af 100644
--- a/apps/admin/core/store/workspace.store.ts
+++ b/apps/admin/store/workspace.store.ts
@@ -1,10 +1,16 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { set } from "lodash-es";
 import { action, observable, runInAction, makeObservable, computed } from "mobx";
 // plane imports
 import { InstanceWorkspaceService } from "@plane/services";
 import type { IWorkspace, TLoader, TPaginationInfo } from "@plane/types";
 // root store
-import type { CoreRootStore } from "@/store/root.store";
+import type { RootStore } from "@/store/root.store";
 
 export interface IWorkspaceStore {
   // observables
@@ -31,7 +37,7 @@ export class WorkspaceStore implements IWorkspaceStore {
   // services
   instanceWorkspaceService;
 
-  constructor(private store: CoreRootStore) {
+  constructor(private store: RootStore) {
     makeObservable(this, {
       // observables
       loader: observable,
diff --git a/apps/admin/styles/globals.css b/apps/admin/styles/globals.css
index 1b88a170e..7f7f2483a 100644
--- a/apps/admin/styles/globals.css
+++ b/apps/admin/styles/globals.css
@@ -1,373 +1,4 @@
-@import "@plane/propel/styles/fonts.css";
-
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer components {
-  .text-1\.5xl {
-    font-size: 1.375rem;
-    line-height: 1.875rem;
-  }
-
-  .text-2\.5xl {
-    font-size: 1.75rem;
-    line-height: 2.25rem;
-  }
-}
-
-@layer base {
-  html {
-    font-family: "Inter", sans-serif;
-  }
-
-  :root {
-    color-scheme: light !important;
-
-    --color-primary-10: 229, 243, 250;
-    --color-primary-20: 216, 237, 248;
-    --color-primary-30: 199, 229, 244;
-    --color-primary-40: 169, 214, 239;
-    --color-primary-50: 144, 202, 234;
-    --color-primary-60: 109, 186, 227;
-    --color-primary-70: 75, 170, 221;
-    --color-primary-80: 41, 154, 214;
-    --color-primary-90: 34, 129, 180;
-    --color-primary-100: 0, 99, 153;
-    --color-primary-200: 0, 92, 143;
-    --color-primary-300: 0, 86, 133;
-    --color-primary-400: 0, 77, 117;
-    --color-primary-500: 0, 66, 102;
-    --color-primary-600: 0, 53, 82;
-    --color-primary-700: 0, 43, 66;
-    --color-primary-800: 0, 33, 51;
-    --color-primary-900: 0, 23, 36;
-
-    --color-background-100: 255, 255, 255; /* primary bg */
-    --color-background-90: 247, 247, 247; /* secondary bg */
-    --color-background-80: 232, 232, 232; /* tertiary bg */
-
-    --color-text-100: 23, 23, 23; /* primary text */
-    --color-text-200: 58, 58, 58; /* secondary text */
-    --color-text-300: 82, 82, 82; /* tertiary text */
-    --color-text-400: 163, 163, 163; /* placeholder text */
-
-    --color-scrollbar: 163, 163, 163; /* scrollbar thumb */
-
-    --color-border-100: 245, 245, 245; /* subtle border= 1 */
-    --color-border-200: 229, 229, 229; /* subtle border- 2 */
-    --color-border-300: 212, 212, 212; /* strong border- 1 */
-    --color-border-400: 185, 185, 185; /* strong border- 2 */
-
-    --color-shadow-2xs:
-      0px 0px 1px 0px rgba(23, 23, 23, 0.06), 0px 1px 2px 0px rgba(23, 23, 23, 0.06),
-      0px 1px 2px 0px rgba(23, 23, 23, 0.14);
-    --color-shadow-xs:
-      0px 1px 2px 0px rgba(0, 0, 0, 0.16), 0px 2px 4px 0px rgba(16, 24, 40, 0.12),
-      0px 1px 8px -1px rgba(16, 24, 40, 0.1);
-    --color-shadow-sm:
-      0px 1px 4px 0px rgba(0, 0, 0, 0.01), 0px 4px 8px 0px rgba(0, 0, 0, 0.02), 0px 1px 12px 0px rgba(0, 0, 0, 0.12);
-    --color-shadow-rg:
-      0px 3px 6px 0px rgba(0, 0, 0, 0.1), 0px 4px 4px 0px rgba(16, 24, 40, 0.08),
-      0px 1px 12px 0px rgba(16, 24, 40, 0.04);
-    --color-shadow-md:
-      0px 4px 8px 0px rgba(0, 0, 0, 0.12), 0px 6px 12px 0px rgba(16, 24, 40, 0.12),
-      0px 1px 16px 0px rgba(16, 24, 40, 0.12);
-    --color-shadow-lg:
-      0px 6px 12px 0px rgba(0, 0, 0, 0.12), 0px 8px 16px 0px rgba(0, 0, 0, 0.12),
-      0px 1px 24px 0px rgba(16, 24, 40, 0.12);
-    --color-shadow-xl:
-      0px 0px 18px 0px rgba(0, 0, 0, 0.16), 0px 0px 24px 0px rgba(16, 24, 40, 0.16),
-      0px 0px 52px 0px rgba(16, 24, 40, 0.16);
-    --color-shadow-2xl:
-      0px 8px 16px 0px rgba(0, 0, 0, 0.12), 0px 12px 24px 0px rgba(16, 24, 40, 0.12),
-      0px 1px 32px 0px rgba(16, 24, 40, 0.12);
-    --color-shadow-3xl:
-      0px 12px 24px 0px rgba(0, 0, 0, 0.12), 0px 16px 32px 0px rgba(0, 0, 0, 0.12),
-      0px 1px 48px 0px rgba(16, 24, 40, 0.12);
-    --color-shadow-4xl: 0px 8px 40px 0px rgba(0, 0, 61, 0.05), 0px 12px 32px -16px rgba(0, 0, 0, 0.05);
-
-    --color-sidebar-background-100: var(--color-background-100); /* primary sidebar bg */
-    --color-sidebar-background-90: var(--color-background-90); /* secondary sidebar bg */
-    --color-sidebar-background-80: var(--color-background-80); /* tertiary sidebar bg */
-
-    --color-sidebar-text-100: var(--color-text-100); /* primary sidebar text */
-    --color-sidebar-text-200: var(--color-text-200); /* secondary sidebar text */
-    --color-sidebar-text-300: var(--color-text-300); /* tertiary sidebar text */
-    --color-sidebar-text-400: var(--color-text-400); /* sidebar placeholder text */
-
-    --color-sidebar-border-100: var(--color-border-100); /* subtle sidebar border= 1 */
-    --color-sidebar-border-200: var(--color-border-100); /* subtle sidebar border- 2 */
-    --color-sidebar-border-300: var(--color-border-100); /* strong sidebar border- 1 */
-    --color-sidebar-border-400: var(--color-border-100); /* strong sidebar border- 2 */
-
-    --color-sidebar-shadow-2xs: var(--color-shadow-2xs);
-    --color-sidebar-shadow-xs: var(--color-shadow-xs);
-    --color-sidebar-shadow-sm: var(--color-shadow-sm);
-    --color-sidebar-shadow-rg: var(--color-shadow-rg);
-    --color-sidebar-shadow-md: var(--color-shadow-md);
-    --color-sidebar-shadow-lg: var(--color-shadow-lg);
-    --color-sidebar-shadow-xl: var(--color-shadow-xl);
-    --color-sidebar-shadow-2xl: var(--color-shadow-2xl);
-    --color-sidebar-shadow-3xl: var(--color-shadow-3xl);
-    --color-sidebar-shadow-4xl: var(--color-shadow-4xl);
-
-    /* toast theme */
-    --color-toast-success-text: 178, 221, 181;
-    --color-toast-error-text: 206, 44, 49;
-    --color-toast-warning-text: 255, 186, 24;
-    --color-toast-info-text: 141, 164, 239;
-    --color-toast-loading-text: 255, 255, 255;
-    --color-toast-secondary-text: 185, 187, 198;
-    --color-toast-tertiary-text: 139, 141, 152;
-
-    --color-toast-success-background: 46, 46, 46;
-    --color-toast-error-background: 46, 46, 46;
-    --color-toast-warning-background: 46, 46, 46;
-    --color-toast-info-background: 46, 46, 46;
-    --color-toast-loading-background: 46, 46, 46;
-
-    --color-toast-success-border: 42, 126, 59;
-    --color-toast-error-border: 100, 23, 35;
-    --color-toast-warning-border: 79, 52, 34;
-    --color-toast-info-border: 58, 91, 199;
-    --color-toast-loading-border: 96, 100, 108;
-  }
-
-  [data-theme="light"],
-  [data-theme="light-contrast"] {
-    color-scheme: light !important;
-
-    --color-background-100: 255, 255, 255; /* primary bg */
-    --color-background-90: 247, 247, 247; /* secondary bg */
-    --color-background-80: 232, 232, 232; /* tertiary bg */
-  }
-
-  [data-theme="light"] {
-    --color-text-100: 23, 23, 23; /* primary text */
-    --color-text-200: 58, 58, 58; /* secondary text */
-    --color-text-300: 82, 82, 82; /* tertiary text */
-    --color-text-400: 163, 163, 163; /* placeholder text */
-
-    --color-scrollbar: 163, 163, 163; /* scrollbar thumb */
-
-    --color-border-100: 245, 245, 245; /* subtle border= 1 */
-    --color-border-200: 229, 229, 229; /* subtle border- 2 */
-    --color-border-300: 212, 212, 212; /* strong border- 1 */
-    --color-border-400: 185, 185, 185; /* strong border- 2 */
-
-    /* toast theme */
-    --color-toast-success-text: 62, 155, 79;
-    --color-toast-error-text: 220, 62, 66;
-    --color-toast-warning-text: 255, 186, 24;
-    --color-toast-info-text: 51, 88, 212;
-    --color-toast-loading-text: 28, 32, 36;
-    --color-toast-secondary-text: 128, 131, 141;
-    --color-toast-tertiary-text: 96, 100, 108;
-
-    --color-toast-success-background: 253, 253, 254;
-    --color-toast-error-background: 255, 252, 252;
-    --color-toast-warning-background: 254, 253, 251;
-    --color-toast-info-background: 253, 253, 254;
-    --color-toast-loading-background: 253, 253, 254;
-
-    --color-toast-success-border: 218, 241, 219;
-    --color-toast-error-border: 255, 219, 220;
-    --color-toast-warning-border: 255, 247, 194;
-    --color-toast-info-border: 210, 222, 255;
-    --color-toast-loading-border: 224, 225, 230;
-  }
-
-  [data-theme="light-contrast"] {
-    --color-text-100: 11, 11, 11; /* primary text */
-    --color-text-200: 38, 38, 38; /* secondary text */
-    --color-text-300: 58, 58, 58; /* tertiary text */
-    --color-text-400: 115, 115, 115; /* placeholder text */
-
-    --color-scrollbar: 115, 115, 115; /* scrollbar thumb */
-
-    --color-border-100: 34, 34, 34; /* subtle border= 1 */
-    --color-border-200: 38, 38, 38; /* subtle border- 2 */
-    --color-border-300: 46, 46, 46; /* strong border- 1 */
-    --color-border-400: 58, 58, 58; /* strong border- 2 */
-  }
-
-  [data-theme="dark"],
-  [data-theme="dark-contrast"] {
-    color-scheme: dark !important;
-
-    --color-primary-10: 8, 31, 43;
-    --color-primary-20: 10, 37, 51;
-    --color-primary-30: 13, 49, 69;
-    --color-primary-40: 16, 58, 81;
-    --color-primary-50: 18, 68, 94;
-    --color-primary-60: 23, 86, 120;
-    --color-primary-70: 28, 104, 146;
-    --color-primary-80: 31, 116, 163;
-    --color-primary-90: 34, 129, 180;
-    --color-primary-100: 40, 146, 204;
-    --color-primary-200: 41, 154, 214;
-    --color-primary-300: 75, 170, 221;
-    --color-primary-400: 109, 186, 227;
-    --color-primary-500: 144, 202, 234;
-    --color-primary-600: 169, 214, 239;
-    --color-primary-700: 199, 229, 244;
-    --color-primary-800: 216, 237, 248;
-    --color-primary-900: 229, 243, 250;
-
-    --color-background-100: 25, 25, 25; /* primary bg */
-    --color-background-90: 32, 32, 32; /* secondary bg */
-    --color-background-80: 44, 44, 44; /* tertiary bg */
-
-    --color-shadow-2xs: 0px 0px 1px 0px rgba(0, 0, 0, 0.15), 0px 1px 3px 0px rgba(0, 0, 0, 0.5);
-    --color-shadow-xs: 0px 0px 2px 0px rgba(0, 0, 0, 0.2), 0px 2px 4px 0px rgba(0, 0, 0, 0.5);
-    --color-shadow-sm: 0px 0px 4px 0px rgba(0, 0, 0, 0.2), 0px 2px 6px 0px rgba(0, 0, 0, 0.5);
-    --color-shadow-rg: 0px 0px 6px 0px rgba(0, 0, 0, 0.2), 0px 4px 6px 0px rgba(0, 0, 0, 0.5);
-    --color-shadow-md: 0px 2px 8px 0px rgba(0, 0, 0, 0.2), 0px 4px 8px 0px rgba(0, 0, 0, 0.5);
-    --color-shadow-lg: 0px 4px 12px 0px rgba(0, 0, 0, 0.25), 0px 4px 10px 0px rgba(0, 0, 0, 0.55);
-    --color-shadow-xl: 0px 0px 14px 0px rgba(0, 0, 0, 0.25), 0px 6px 10px 0px rgba(0, 0, 0, 0.55);
-    --color-shadow-2xl: 0px 0px 18px 0px rgba(0, 0, 0, 0.25), 0px 8px 12px 0px rgba(0, 0, 0, 0.6);
-    --color-shadow-3xl: 0px 4px 24px 0px rgba(0, 0, 0, 0.3), 0px 12px 40px 0px rgba(0, 0, 0, 0.65);
-  }
-
-  [data-theme="dark"] {
-    --color-text-100: 229, 229, 229; /* primary text */
-    --color-text-200: 163, 163, 163; /* secondary text */
-    --color-text-300: 115, 115, 115; /* tertiary text */
-    --color-text-400: 82, 82, 82; /* placeholder text */
-
-    --color-scrollbar: 82, 82, 82; /* scrollbar thumb */
-
-    --color-border-100: 34, 34, 34; /* subtle border= 1 */
-    --color-border-200: 38, 38, 38; /* subtle border- 2 */
-    --color-border-300: 46, 46, 46; /* strong border- 1 */
-    --color-border-400: 58, 58, 58; /* strong border- 2 */
-  }
-
-  [data-theme="dark-contrast"] {
-    --color-text-100: 250, 250, 250; /* primary text */
-    --color-text-200: 241, 241, 241; /* secondary text */
-    --color-text-300: 212, 212, 212; /* tertiary text */
-    --color-text-400: 115, 115, 115; /* placeholder text */
-
-    --color-scrollbar: 115, 115, 115; /* scrollbar thumb */
-
-    --color-border-100: 245, 245, 245; /* subtle border= 1 */
-    --color-border-200: 229, 229, 229; /* subtle border- 2 */
-    --color-border-300: 212, 212, 212; /* strong border- 1 */
-    --color-border-400: 185, 185, 185; /* strong border- 2 */
-  }
-
-  [data-theme="light"],
-  [data-theme="dark"],
-  [data-theme="light-contrast"],
-  [data-theme="dark-contrast"] {
-    --color-sidebar-background-100: var(--color-background-100); /* primary sidebar bg */
-    --color-sidebar-background-90: var(--color-background-90); /* secondary sidebar bg */
-    --color-sidebar-background-80: var(--color-background-80); /* tertiary sidebar bg */
-
-    --color-sidebar-text-100: var(--color-text-100); /* primary sidebar text */
-    --color-sidebar-text-200: var(--color-text-200); /* secondary sidebar text */
-    --color-sidebar-text-300: var(--color-text-300); /* tertiary sidebar text */
-    --color-sidebar-text-400: var(--color-text-400); /* sidebar placeholder text */
-
-    --color-sidebar-border-100: var(--color-border-100); /* subtle sidebar border= 1 */
-    --color-sidebar-border-200: var(--color-border-200); /* subtle sidebar border- 2 */
-    --color-sidebar-border-300: var(--color-border-300); /* strong sidebar border- 1 */
-    --color-sidebar-border-400: var(--color-border-400); /* strong sidebar border- 2 */
-  }
-}
-
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-  -webkit-text-size-adjust: 100%;
-  -ms-text-size-adjust: 100%;
-  font-variant-ligatures: none;
-  -webkit-font-variant-ligatures: none;
-  text-rendering: optimizeLegibility;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
-}
-
-body {
-  color: rgba(var(--color-text-100));
-}
-
-/* scrollbar style */
-::-webkit-scrollbar {
-  display: none;
-}
-
-@-moz-document url-prefix() {
-  * {
-    scrollbar-width: none;
-  }
-  .vertical-scrollbar,
-  .horizontal-scrollbar {
-    scrollbar-width: initial;
-    scrollbar-color: rgba(96, 100, 108, 0.1) transparent;
-  }
-  .vertical-scrollbar:hover,
-  .horizontal-scrollbar:hover {
-    scrollbar-color: rgba(96, 100, 108, 0.25) transparent;
-  }
-  .vertical-scrollbar:active,
-  .horizontal-scrollbar:active {
-    scrollbar-color: rgba(96, 100, 108, 0.7) transparent;
-  }
-}
-
-.vertical-scrollbar {
-  overflow-y: auto;
-}
-.horizontal-scrollbar {
-  overflow-x: auto;
-}
-.vertical-scrollbar::-webkit-scrollbar,
-.horizontal-scrollbar::-webkit-scrollbar {
-  display: block;
-}
-.vertical-scrollbar::-webkit-scrollbar-track,
-.horizontal-scrollbar::-webkit-scrollbar-track {
-  background-color: transparent;
-  border-radius: 9999px;
-}
-.vertical-scrollbar::-webkit-scrollbar-thumb,
-.horizontal-scrollbar::-webkit-scrollbar-thumb {
-  background-clip: padding-box;
-  background-color: rgba(96, 100, 108, 0.1);
-  border-radius: 9999px;
-}
-.vertical-scrollbar:hover::-webkit-scrollbar-thumb,
-.horizontal-scrollbar:hover::-webkit-scrollbar-thumb {
-  background-color: rgba(96, 100, 108, 0.25);
-}
-.vertical-scrollbar::-webkit-scrollbar-thumb:hover,
-.horizontal-scrollbar::-webkit-scrollbar-thumb:hover {
-  background-color: rgba(96, 100, 108, 0.5);
-}
-.vertical-scrollbar::-webkit-scrollbar-thumb:active,
-.horizontal-scrollbar::-webkit-scrollbar-thumb:active {
-  background-color: rgba(96, 100, 108, 0.7);
-}
-.vertical-scrollbar::-webkit-scrollbar-corner,
-.horizontal-scrollbar::-webkit-scrollbar-corner {
-  background-color: transparent;
-}
-.vertical-scrollbar-margin-top-md::-webkit-scrollbar-track {
-  margin-top: 44px;
-}
-
-/* scrollbar xs size */
-.scrollbar-xs::-webkit-scrollbar {
-  height: 10px;
-  width: 10px;
-}
-.scrollbar-xs::-webkit-scrollbar-thumb {
-  border: 3px solid rgba(0, 0, 0, 0);
-}
+@import "@plane/tailwind-config/index.css";
 
 .shadow-custom {
   box-shadow: 2px 2px 8px 2px rgba(234, 231, 250, 0.3); /* Convert #EAE7FA4D to rgba */
@@ -377,48 +8,15 @@ body {
   @apply backdrop-filter blur-[9px];
 }
 
-/* scrollbar sm size */
-.scrollbar-sm::-webkit-scrollbar {
-  height: 12px;
-  width: 12px;
-}
-.scrollbar-sm::-webkit-scrollbar-thumb {
-  border: 3px solid rgba(0, 0, 0, 0);
-}
-/* scrollbar md size */
-.scrollbar-md::-webkit-scrollbar {
-  height: 14px;
-  width: 14px;
-}
-.scrollbar-md::-webkit-scrollbar-thumb {
-  border: 3px solid rgba(0, 0, 0, 0);
-}
-/* scrollbar lg size */
-
-.scrollbar-lg::-webkit-scrollbar {
-  height: 16px;
-  width: 16px;
-}
-.scrollbar-lg::-webkit-scrollbar-thumb {
-  border: 4px solid rgba(0, 0, 0, 0);
-}
-/* end scrollbar style */
-
 /* progress bar */
 .progress-bar {
   fill: currentColor;
-  color: rgba(var(--color-sidebar-background-100));
-}
-
-::-webkit-input-placeholder,
-::placeholder,
-:-ms-input-placeholder {
-  color: rgb(var(--color-text-400));
+  color: var(--background-color-surface-1);
 }
 
 /* Progress Bar Styles */
 :root {
-  --bprogress-color: rgb(var(--color-primary-100)) !important;
+  --bprogress-color: var(--background-color-accent-primary);
   --bprogress-height: 2.5px !important;
 }
 
@@ -429,8 +27,8 @@ body {
 .bprogress .bar {
   background: linear-gradient(
     90deg,
-    rgba(var(--color-primary-100), 0.8) 0%,
-    rgba(var(--color-primary-100), 1) 100%
+    --alpha(var(--background-color-accent-primary) / 80%) 0%,
+    --alpha(var(--background-color-accent-primary) / 100%) 100%
   ) !important;
   will-change: width, opacity;
 }
@@ -438,7 +36,7 @@ body {
 .bprogress .peg {
   display: block;
   box-shadow:
-    0 0 8px rgba(var(--color-primary-100), 0.6),
-    0 0 4px rgba(var(--color-primary-100), 0.4) !important;
+    0 0 8px --alpha(var(--background-color-accent-primary) / 60%),
+    0 0 4px --alpha(var(--background-color-accent-primary) / 40%) !important;
   will-change: transform, opacity;
 }
diff --git a/apps/admin/tailwind.config.cjs b/apps/admin/tailwind.config.cjs
deleted file mode 100644
index 9bc917eb4..000000000
--- a/apps/admin/tailwind.config.cjs
+++ /dev/null
@@ -1,5 +0,0 @@
-const sharedConfig = require("@plane/tailwind-config/tailwind.config.js");
-
-module.exports = {
-  presets: [sharedConfig],
-};
diff --git a/apps/admin/tsconfig.json b/apps/admin/tsconfig.json
index 90dedb762..2d04cbe81 100644
--- a/apps/admin/tsconfig.json
+++ b/apps/admin/tsconfig.json
@@ -9,12 +9,7 @@
     "types": ["vite/client"],
     "paths": {
       "package.json": ["./package.json"],
-      "ce/*": ["./ce/*"],
-      "@/app/*": ["./app/*"],
-      "@/*": ["./core/*"],
-      "@/plane-admin/*": ["./ce/*"],
-      "@/ce/*": ["./ce/*"],
-      "@/styles/*": ["./styles/*"]
+      "@/*": ["./*"]
     }
   },
   "include": ["**/*", "**/.server/**/*", "**/.client/**/*", ".react-router/types/**/*"],
diff --git a/apps/admin/utils/public-asset.ts b/apps/admin/utils/public-asset.ts
new file mode 100644
index 000000000..382ca5fe3
--- /dev/null
+++ b/apps/admin/utils/public-asset.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export {};
diff --git a/apps/admin/vite.config.ts b/apps/admin/vite.config.ts
index c9d97157f..f61d9b49e 100644
--- a/apps/admin/vite.config.ts
+++ b/apps/admin/vite.config.ts
@@ -1,5 +1,5 @@
 import path from "node:path";
-import * as dotenv from "@dotenvx/dotenvx";
+import * as dotenv from "dotenv";
 import { reactRouter } from "@react-router/dev/vite";
 import { defineConfig } from "vite";
 import tsconfigPaths from "vite-tsconfig-paths";
diff --git a/apps/api/bin/docker-entrypoint-api.sh b/apps/api/bin/docker-entrypoint-api.sh
index 5a1da1570..7a6402864 100755
--- a/apps/api/bin/docker-entrypoint-api.sh
+++ b/apps/api/bin/docker-entrypoint-api.sh
@@ -32,4 +32,7 @@ python manage.py create_bucket
 # Clear Cache before starting to remove stale values
 python manage.py clear_cache
 
+# Collect static files
+python manage.py collectstatic --noinput
+
 exec gunicorn -w "$GUNICORN_WORKERS" -k uvicorn.workers.UvicornWorker plane.asgi:application --bind 0.0.0.0:"${PORT:-8000}" --max-requests 1200 --max-requests-jitter 1000 --access-logfile -
diff --git a/apps/api/manage.py b/apps/api/manage.py
index 972869462..a79268b37 100644
--- a/apps/api/manage.py
+++ b/apps/api/manage.py
@@ -1,4 +1,8 @@
 #!/usr/bin/env python
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 import os
 import sys
 
diff --git a/apps/api/package.json b/apps/api/package.json
index 9f4b7879c..99f5de987 100644
--- a/apps/api/package.json
+++ b/apps/api/package.json
@@ -1,7 +1,7 @@
 {
   "name": "plane-api",
-  "version": "1.2.3",
-  "license": "AGPL-3.0",
+  "version": "1.3.0",
   "private": true,
-  "description": "API server powering Plane's backend"
+  "description": "API server powering Plane's backend",
+  "license": "AGPL-3.0"
 }
diff --git a/apps/api/plane/__init__.py b/apps/api/plane/__init__.py
index 53f4ccb1d..f561e3e63 100644
--- a/apps/api/plane/__init__.py
+++ b/apps/api/plane/__init__.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 from .celery import app as celery_app
 
 __all__ = ("celery_app",)
diff --git a/apps/api/plane/analytics/__init__.py b/apps/api/plane/analytics/__init__.py
index e69de29bb..917e26db4 100644
--- a/apps/api/plane/analytics/__init__.py
+++ b/apps/api/plane/analytics/__init__.py
@@ -0,0 +1,4 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
diff --git a/apps/api/plane/analytics/apps.py b/apps/api/plane/analytics/apps.py
index 52a59f313..b11b7bfc9 100644
--- a/apps/api/plane/analytics/apps.py
+++ b/apps/api/plane/analytics/apps.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 from django.apps import AppConfig
 
 
diff --git a/apps/api/plane/api/__init__.py b/apps/api/plane/api/__init__.py
index e69de29bb..917e26db4 100644
--- a/apps/api/plane/api/__init__.py
+++ b/apps/api/plane/api/__init__.py
@@ -0,0 +1,4 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
diff --git a/apps/api/plane/api/apps.py b/apps/api/plane/api/apps.py
index f1f531118..90688c130 100644
--- a/apps/api/plane/api/apps.py
+++ b/apps/api/plane/api/apps.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 from django.apps import AppConfig
 
 
diff --git a/apps/api/plane/api/middleware/__init__.py b/apps/api/plane/api/middleware/__init__.py
index e69de29bb..917e26db4 100644
--- a/apps/api/plane/api/middleware/__init__.py
+++ b/apps/api/plane/api/middleware/__init__.py
@@ -0,0 +1,4 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
diff --git a/apps/api/plane/api/middleware/api_authentication.py b/apps/api/plane/api/middleware/api_authentication.py
index ddabb4132..abd813985 100644
--- a/apps/api/plane/api/middleware/api_authentication.py
+++ b/apps/api/plane/api/middleware/api_authentication.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Django imports
 from django.utils import timezone
 from django.db.models import Q
diff --git a/apps/api/plane/api/rate_limit.py b/apps/api/plane/api/rate_limit.py
index 0d266e98b..33df895cb 100644
--- a/apps/api/plane/api/rate_limit.py
+++ b/apps/api/plane/api/rate_limit.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # python imports
 import os
 
diff --git a/apps/api/plane/api/serializers/__init__.py b/apps/api/plane/api/serializers/__init__.py
index 6525ddce6..2ab639d54 100644
--- a/apps/api/plane/api/serializers/__init__.py
+++ b/apps/api/plane/api/serializers/__init__.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 from .user import UserLiteSerializer
 from .workspace import WorkspaceLiteSerializer
 from .project import (
@@ -21,6 +25,10 @@ from .issue import (
     IssueCommentCreateSerializer,
     IssueLinkCreateSerializer,
     IssueLinkUpdateSerializer,
+    IssueRelationCreateSerializer,
+    IssueRelationResponseSerializer,
+    IssueRelationSerializer,
+    RelatedIssueSerializer,
 )
 from .state import StateLiteSerializer, StateSerializer
 from .cycle import (
@@ -45,7 +53,7 @@ from .intake import (
     IntakeIssueCreateSerializer,
     IntakeIssueUpdateSerializer,
 )
-from .estimate import EstimatePointSerializer
+from .estimate import EstimateSerializer, EstimatePointSerializer
 from .asset import (
     UserAssetUploadSerializer,
     AssetUpdateSerializer,
@@ -55,4 +63,4 @@ from .asset import (
 )
 from .invite import WorkspaceInviteSerializer
 from .member import ProjectMemberSerializer
-from .sticky import StickySerializer
\ No newline at end of file
+from .sticky import StickySerializer
diff --git a/apps/api/plane/api/serializers/asset.py b/apps/api/plane/api/serializers/asset.py
index 6b74b3757..363b5eb84 100644
--- a/apps/api/plane/api/serializers/asset.py
+++ b/apps/api/plane/api/serializers/asset.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Third party imports
 from rest_framework import serializers
 
diff --git a/apps/api/plane/api/serializers/base.py b/apps/api/plane/api/serializers/base.py
index bc790f2cd..2e39a01fd 100644
--- a/apps/api/plane/api/serializers/base.py
+++ b/apps/api/plane/api/serializers/base.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Third party imports
 from rest_framework import serializers
 
diff --git a/apps/api/plane/api/serializers/cycle.py b/apps/api/plane/api/serializers/cycle.py
index f2724231a..9b6aed516 100644
--- a/apps/api/plane/api/serializers/cycle.py
+++ b/apps/api/plane/api/serializers/cycle.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Third party imports
 import pytz
 from rest_framework import serializers
diff --git a/apps/api/plane/api/serializers/estimate.py b/apps/api/plane/api/serializers/estimate.py
index b670006d5..978003240 100644
--- a/apps/api/plane/api/serializers/estimate.py
+++ b/apps/api/plane/api/serializers/estimate.py
@@ -1,17 +1,37 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
+# Third party imports
+from rest_framework import serializers
+
 # Module imports
-from plane.db.models import EstimatePoint
+from plane.db.models import Estimate, EstimatePoint
 from .base import BaseSerializer
 
 
-class EstimatePointSerializer(BaseSerializer):
-    """
-    Serializer for project estimation points and story point values.
+class EstimateSerializer(BaseSerializer):
+    class Meta:
+        model = Estimate
+        fields = "__all__"
+        read_only_fields = ["workspace", "project", "deleted_at"]
 
-    Handles numeric estimation data for work item sizing and sprint planning,
-    providing standardized point values for project velocity calculations.
-    """
+    def create(self, validated_data):
+        validated_data["workspace"] = self.context["workspace"]
+        validated_data["project"] = self.context["project"]
+        return super().create(validated_data)
+
+
+class EstimatePointSerializer(BaseSerializer):
+    def validate(self, data):
+        if not data:
+            raise serializers.ValidationError("Estimate points are required")
+        value = data.get("value")
+        if value and len(value) > 20:
+            raise serializers.ValidationError("Value can't be more than 20 characters")
+        return data
 
     class Meta:
         model = EstimatePoint
-        fields = ["id", "value"]
-        read_only_fields = fields
+        fields = "__all__"
+        read_only_fields = ["estimate", "workspace", "project"]
diff --git a/apps/api/plane/api/serializers/intake.py b/apps/api/plane/api/serializers/intake.py
index 40cbba38b..12bbd4572 100644
--- a/apps/api/plane/api/serializers/intake.py
+++ b/apps/api/plane/api/serializers/intake.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Module imports
 from .base import BaseSerializer
 from .issue import IssueExpandSerializer
@@ -13,11 +17,14 @@ class IssueForIntakeSerializer(BaseSerializer):
     content validation and priority assignment for triage workflows.
     """
 
+    description = serializers.JSONField(source="description_json", required=False, allow_null=True)
+
     class Meta:
         model = Issue
         fields = [
             "name",
-            "description",
+            "description",  # Deprecated
+            "description_json",
             "description_html",
             "priority",
         ]
diff --git a/apps/api/plane/api/serializers/invite.py b/apps/api/plane/api/serializers/invite.py
index 5b52dc03c..18c1c0206 100644
--- a/apps/api/plane/api/serializers/invite.py
+++ b/apps/api/plane/api/serializers/invite.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Django imports
 from django.core.exceptions import ValidationError
 from django.core.validators import validate_email
diff --git a/apps/api/plane/api/serializers/issue.py b/apps/api/plane/api/serializers/issue.py
index d86dfa6b6..6468ddbc8 100644
--- a/apps/api/plane/api/serializers/issue.py
+++ b/apps/api/plane/api/serializers/issue.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Django imports
 from django.utils import timezone
 from lxml import html
@@ -16,6 +20,7 @@ from plane.db.models import (
     IssueComment,
     IssueLabel,
     IssueLink,
+    IssueRelation,
     Label,
     ProjectMember,
     State,
@@ -65,7 +70,7 @@ class IssueSerializer(BaseSerializer):
     class Meta:
         model = Issue
         read_only_fields = ["id", "workspace", "project", "updated_by", "updated_at"]
-        exclude = ["description", "description_stripped"]
+        exclude = ["description_json", "description_stripped"]
 
     def validate(self, data):
         if (
@@ -475,6 +480,184 @@ class IssueLinkSerializer(BaseSerializer):
         ]
 
 
+class IssueRelationResponseSerializer(serializers.Serializer):
+    """
+    Serializer for issue relations response showing grouped relation types.
+
+    Returns issue IDs organized by relation type for efficient client-side processing.
+    """
+
+    blocking = serializers.ListField(
+        child=serializers.UUIDField(),
+        help_text="List of issue IDs that are blocking this issue",
+    )
+    blocked_by = serializers.ListField(
+        child=serializers.UUIDField(),
+        help_text="List of issue IDs that this issue is blocked by",
+    )
+    duplicate = serializers.ListField(
+        child=serializers.UUIDField(),
+        help_text="List of issue IDs that are duplicates of this issue",
+    )
+    relates_to = serializers.ListField(
+        child=serializers.UUIDField(),
+        help_text="List of issue IDs that relate to this issue",
+    )
+    start_after = serializers.ListField(
+        child=serializers.UUIDField(),
+        help_text="List of issue IDs that start after this issue",
+    )
+    start_before = serializers.ListField(
+        child=serializers.UUIDField(),
+        help_text="List of issue IDs that start before this issue",
+    )
+    finish_after = serializers.ListField(
+        child=serializers.UUIDField(),
+        help_text="List of issue IDs that finish after this issue",
+    )
+    finish_before = serializers.ListField(
+        child=serializers.UUIDField(),
+        help_text="List of issue IDs that finish before this issue",
+    )
+
+
+class IssueRelationCreateSerializer(serializers.Serializer):
+    """
+    Serializer for creating issue relations.
+
+    Creates issue relations with the specified relation type and issues.
+    Validates relation types and ensures proper issue ID format.
+    """
+
+    RELATION_TYPE_CHOICES = [
+        ("blocking", "Blocking"),
+        ("blocked_by", "Blocked By"),
+        ("duplicate", "Duplicate"),
+        ("relates_to", "Relates To"),
+        ("start_before", "Start Before"),
+        ("start_after", "Start After"),
+        ("finish_before", "Finish Before"),
+        ("finish_after", "Finish After"),
+    ]
+
+    relation_type = serializers.ChoiceField(
+        choices=RELATION_TYPE_CHOICES,
+        required=True,
+        help_text="Type of relationship between work items",
+    )
+    issues = serializers.ListField(
+        child=serializers.UUIDField(),
+        required=True,
+        min_length=1,
+        help_text="Array of work item IDs to create relations with",
+    )
+
+    def validate_issues(self, value):
+        """Validate that issues list is not empty and contains valid UUIDs."""
+        if not value:
+            raise serializers.ValidationError("At least one issue ID is required.")
+        return value
+
+
+class IssueRelationRemoveSerializer(serializers.Serializer):
+    """
+    Serializer for removing issue relations.
+
+    Removes existing relationships between work items by specifying
+    the related issue ID.
+    """
+
+    related_issue = serializers.UUIDField(
+        required=True, help_text="ID of the related work item to remove relation with"
+    )
+
+
+class IssueRelationSerializer(BaseSerializer):
+    """
+    Serializer for issue relationships showing related issue details.
+
+    Provides comprehensive information about related issues including
+    project context, sequence ID, and relationship type.
+    """
+
+    id = serializers.UUIDField(source="related_issue.id", read_only=True)
+    project_id = serializers.UUIDField(source="related_issue.project_id", read_only=True)
+    sequence_id = serializers.IntegerField(source="related_issue.sequence_id", read_only=True)
+    name = serializers.CharField(source="related_issue.name", read_only=True)
+    relation_type = serializers.CharField(read_only=True)
+    state_id = serializers.UUIDField(source="related_issue.state.id", read_only=True)
+    priority = serializers.CharField(source="related_issue.priority", read_only=True)
+
+    class Meta:
+        model = IssueRelation
+        fields = [
+            "id",
+            "project_id",
+            "sequence_id",
+            "relation_type",
+            "name",
+            "state_id",
+            "priority",
+            "created_by",
+            "created_at",
+            "updated_at",
+            "updated_by",
+        ]
+        read_only_fields = [
+            "workspace",
+            "project",
+            "created_by",
+            "created_at",
+            "updated_by",
+            "updated_at",
+        ]
+
+
+class RelatedIssueSerializer(BaseSerializer):
+    """
+    Serializer for reverse issue relationships showing issue details.
+
+    Provides comprehensive information about the source issue in a relationship
+    including project context, sequence ID, and relationship type.
+    """
+
+    id = serializers.UUIDField(source="issue.id", read_only=True)
+    project_id = serializers.PrimaryKeyRelatedField(source="issue.project_id", read_only=True)
+    sequence_id = serializers.IntegerField(source="issue.sequence_id", read_only=True)
+    name = serializers.CharField(source="issue.name", read_only=True)
+    type_id = serializers.UUIDField(source="issue.type.id", read_only=True)
+    relation_type = serializers.CharField(read_only=True)
+    is_epic = serializers.BooleanField(source="issue.type.is_epic", read_only=True)
+    state_id = serializers.UUIDField(source="issue.state.id", read_only=True)
+    priority = serializers.CharField(source="issue.priority", read_only=True)
+
+    class Meta:
+        model = IssueRelation
+        fields = [
+            "id",
+            "project_id",
+            "sequence_id",
+            "relation_type",
+            "name",
+            "type_id",
+            "is_epic",
+            "state_id",
+            "priority",
+            "created_by",
+            "created_at",
+            "updated_by",
+            "updated_at",
+        ]
+        read_only_fields = [
+            "workspace",
+            "project",
+            "created_by",
+            "created_at",
+            "updated_by",
+            "updated_at",
+        ]
+
+
 class IssueAttachmentSerializer(BaseSerializer):
     """
     Serializer for work item file attachments.
@@ -633,6 +816,7 @@ class IssueExpandSerializer(BaseSerializer):
     labels = serializers.SerializerMethodField()
     assignees = serializers.SerializerMethodField()
     state = StateLiteSerializer(read_only=True)
+    description = serializers.JSONField(source="description_json", read_only=True)
 
     def get_labels(self, obj):
         expand = self.context.get("expand", [])
diff --git a/apps/api/plane/api/serializers/member.py b/apps/api/plane/api/serializers/member.py
index 3aa9644b4..266a4cfe1 100644
--- a/apps/api/plane/api/serializers/member.py
+++ b/apps/api/plane/api/serializers/member.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Third party imports
 from rest_framework import serializers
 
diff --git a/apps/api/plane/api/serializers/module.py b/apps/api/plane/api/serializers/module.py
index d1e3b0d81..8ab73a33e 100644
--- a/apps/api/plane/api/serializers/module.py
+++ b/apps/api/plane/api/serializers/module.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Third party imports
 from rest_framework import serializers
 
diff --git a/apps/api/plane/api/serializers/project.py b/apps/api/plane/api/serializers/project.py
index 770957e08..644b5ba10 100644
--- a/apps/api/plane/api/serializers/project.py
+++ b/apps/api/plane/api/serializers/project.py
@@ -1,15 +1,17 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Third party imports
 import random
 from rest_framework import serializers
 
+
+# Python imports
+import re
+
 # Module imports
-from plane.db.models import (
-    Project,
-    ProjectIdentifier,
-    WorkspaceMember,
-    State,
-    Estimate,
-)
+from plane.db.models import Project, ProjectIdentifier, WorkspaceMember, State, Estimate
 
 from plane.utils.content_validator import (
     validate_html_content,
@@ -17,7 +19,7 @@ from plane.utils.content_validator import (
 from .base import BaseSerializer
 
 
-class  ProjectCreateSerializer(BaseSerializer):
+class ProjectCreateSerializer(BaseSerializer):
     """
     Serializer for creating projects with workspace validation.
 
@@ -103,6 +105,15 @@ class  ProjectCreateSerializer(BaseSerializer):
         ]
 
     def validate(self, data):
+        project_name = data.get("name", None)
+        project_identifier = data.get("identifier", None)
+
+        if project_name is not None and re.match(Project.FORBIDDEN_IDENTIFIER_CHARS_PATTERN, project_name):
+            raise serializers.ValidationError("Project name cannot contain special characters.")
+
+        if project_identifier is not None and re.match(Project.FORBIDDEN_IDENTIFIER_CHARS_PATTERN, project_identifier):
+            raise serializers.ValidationError("Project identifier cannot contain special characters.")
+
         if data.get("project_lead", None) is not None:
             # Check if the project lead is a member of the workspace
             if not WorkspaceMember.objects.filter(
@@ -123,6 +134,7 @@ class  ProjectCreateSerializer(BaseSerializer):
 
     def create(self, validated_data):
         identifier = validated_data.get("identifier", "").strip().upper()
+
         if identifier == "":
             raise serializers.ValidationError(detail="Project Identifier is required")
 
@@ -161,6 +173,15 @@ class ProjectUpdateSerializer(ProjectCreateSerializer):
         read_only_fields = ProjectCreateSerializer.Meta.read_only_fields
 
     def update(self, instance, validated_data):
+        project_name = validated_data.get("name", None)
+        project_identifier = validated_data.get("identifier", None)
+
+        if project_name is not None and re.match(Project.FORBIDDEN_IDENTIFIER_CHARS_PATTERN, project_name):
+            raise serializers.ValidationError("Project name cannot contain special characters.")
+
+        if project_identifier is not None and re.match(Project.FORBIDDEN_IDENTIFIER_CHARS_PATTERN, project_identifier):
+            raise serializers.ValidationError("Project identifier cannot contain special characters.")
+
         """Update a project"""
         if (
             validated_data.get("default_state", None) is not None
@@ -211,6 +232,15 @@ class ProjectSerializer(BaseSerializer):
         ]
 
     def validate(self, data):
+        project_name = data.get("name", None)
+        project_identifier = data.get("identifier", None)
+
+        if project_name is not None and re.match(Project.FORBIDDEN_IDENTIFIER_CHARS_PATTERN, project_name):
+            raise serializers.ValidationError("Project name cannot contain special characters.")
+
+        if project_identifier is not None and re.match(Project.FORBIDDEN_IDENTIFIER_CHARS_PATTERN, project_identifier):
+            raise serializers.ValidationError("Project identifier cannot contain special characters.")
+
         # Check project lead should be a member of the workspace
         if (
             data.get("project_lead", None) is not None
diff --git a/apps/api/plane/api/serializers/state.py b/apps/api/plane/api/serializers/state.py
index c279529b8..c07fe78bb 100644
--- a/apps/api/plane/api/serializers/state.py
+++ b/apps/api/plane/api/serializers/state.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Module imports
 from .base import BaseSerializer
 from plane.db.models import State, StateGroup
diff --git a/apps/api/plane/api/serializers/sticky.py b/apps/api/plane/api/serializers/sticky.py
index 067fc1b89..e2ffee8a9 100644
--- a/apps/api/plane/api/serializers/sticky.py
+++ b/apps/api/plane/api/serializers/sticky.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 from rest_framework import serializers
 
 from .base import BaseSerializer
diff --git a/apps/api/plane/api/serializers/user.py b/apps/api/plane/api/serializers/user.py
index 805eb9fe1..24bb6b902 100644
--- a/apps/api/plane/api/serializers/user.py
+++ b/apps/api/plane/api/serializers/user.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 from rest_framework import serializers
 
 # Module imports
diff --git a/apps/api/plane/api/serializers/workspace.py b/apps/api/plane/api/serializers/workspace.py
index e98683c2f..6b85fcabc 100644
--- a/apps/api/plane/api/serializers/workspace.py
+++ b/apps/api/plane/api/serializers/workspace.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Module imports
 from plane.db.models import Workspace
 from .base import BaseSerializer
diff --git a/apps/api/plane/api/urls/__init__.py b/apps/api/plane/api/urls/__init__.py
index 593501939..4a202431b 100644
--- a/apps/api/plane/api/urls/__init__.py
+++ b/apps/api/plane/api/urls/__init__.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 from .asset import urlpatterns as asset_patterns
 from .cycle import urlpatterns as cycle_patterns
 from .intake import urlpatterns as intake_patterns
diff --git a/apps/api/plane/api/urls/asset.py b/apps/api/plane/api/urls/asset.py
index 5bdd4d914..abd160242 100644
--- a/apps/api/plane/api/urls/asset.py
+++ b/apps/api/plane/api/urls/asset.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 from django.urls import path
 
 from plane.api.views import (
diff --git a/apps/api/plane/api/urls/cycle.py b/apps/api/plane/api/urls/cycle.py
index a2cab1fe6..6d582784e 100644
--- a/apps/api/plane/api/urls/cycle.py
+++ b/apps/api/plane/api/urls/cycle.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 from django.urls import path
 
 from plane.api.views.cycle import (
diff --git a/apps/api/plane/api/urls/estimate.py b/apps/api/plane/api/urls/estimate.py
new file mode 100644
index 000000000..3fe5d3b7b
--- /dev/null
+++ b/apps/api/plane/api/urls/estimate.py
@@ -0,0 +1,29 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
+from django.urls import path
+
+from plane.api.views.estimate import (
+    ProjectEstimateAPIEndpoint,
+    EstimatePointListCreateAPIEndpoint,
+    EstimatePointDetailAPIEndpoint,
+)
+
+urlpatterns = [
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/estimates/",
+        ProjectEstimateAPIEndpoint.as_view(http_method_names=["get", "post", "patch", "delete"]),
+        name="project-estimate",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/estimates/<uuid:estimate_id>/estimate-points/",
+        EstimatePointListCreateAPIEndpoint.as_view(http_method_names=["get", "post"]),
+        name="estimate-point-list-create",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/estimates/<uuid:estimate_id>/estimate-points/<uuid:estimate_point_id>/",
+        EstimatePointDetailAPIEndpoint.as_view(http_method_names=["patch", "delete"]),
+        name="estimate-point-detail",
+    ),
+]
diff --git a/apps/api/plane/api/urls/intake.py b/apps/api/plane/api/urls/intake.py
index 5538467aa..6a5480459 100644
--- a/apps/api/plane/api/urls/intake.py
+++ b/apps/api/plane/api/urls/intake.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 from django.urls import path
 
 from plane.api.views import (
diff --git a/apps/api/plane/api/urls/invite.py b/apps/api/plane/api/urls/invite.py
index 9d73cb6ef..7c1ce5e6a 100644
--- a/apps/api/plane/api/urls/invite.py
+++ b/apps/api/plane/api/urls/invite.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Django imports
 from django.urls import path, include
 
@@ -15,4 +19,4 @@ router.register(r"invitations", WorkspaceInvitationsViewset, basename="workspace
 # Wrap the router URLs with the workspace slug path
 urlpatterns = [
     path("workspaces/<str:slug>/", include(router.urls)),
-]
\ No newline at end of file
+]
diff --git a/apps/api/plane/api/urls/label.py b/apps/api/plane/api/urls/label.py
index f7ee57b17..358806fb7 100644
--- a/apps/api/plane/api/urls/label.py
+++ b/apps/api/plane/api/urls/label.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 from django.urls import path
 
 from plane.api.views import LabelListCreateAPIEndpoint, LabelDetailAPIEndpoint
diff --git a/apps/api/plane/api/urls/member.py b/apps/api/plane/api/urls/member.py
index 83c9dfbe5..4f2b03230 100644
--- a/apps/api/plane/api/urls/member.py
+++ b/apps/api/plane/api/urls/member.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 from django.urls import path
 
 from plane.api.views import (
diff --git a/apps/api/plane/api/urls/module.py b/apps/api/plane/api/urls/module.py
index 578f5c860..a0924100d 100644
--- a/apps/api/plane/api/urls/module.py
+++ b/apps/api/plane/api/urls/module.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 from django.urls import path
 
 from plane.api.views import (
diff --git a/apps/api/plane/api/urls/project.py b/apps/api/plane/api/urls/project.py
index 9cf9291aa..eb22249e0 100644
--- a/apps/api/plane/api/urls/project.py
+++ b/apps/api/plane/api/urls/project.py
@@ -1,9 +1,14 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 from django.urls import path
 
 from plane.api.views import (
     ProjectListCreateAPIEndpoint,
     ProjectDetailAPIEndpoint,
     ProjectArchiveUnarchiveAPIEndpoint,
+    ProjectSummaryAPIEndpoint,
 )
 
 urlpatterns = [
@@ -22,4 +27,9 @@ urlpatterns = [
         ProjectArchiveUnarchiveAPIEndpoint.as_view(http_method_names=["post", "delete"]),
         name="project-archive-unarchive",
     ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/summary/",
+        ProjectSummaryAPIEndpoint.as_view(http_method_names=["get"]),
+        name="project-summary",
+    ),
 ]
diff --git a/apps/api/plane/api/urls/schema.py b/apps/api/plane/api/urls/schema.py
index 781dbe9de..9511ca02b 100644
--- a/apps/api/plane/api/urls/schema.py
+++ b/apps/api/plane/api/urls/schema.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 from drf_spectacular.views import (
     SpectacularAPIView,
     SpectacularRedocView,
diff --git a/apps/api/plane/api/urls/state.py b/apps/api/plane/api/urls/state.py
index e35012a20..8b84abfbe 100644
--- a/apps/api/plane/api/urls/state.py
+++ b/apps/api/plane/api/urls/state.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 from django.urls import path
 
 from plane.api.views import (
diff --git a/apps/api/plane/api/urls/sticky.py b/apps/api/plane/api/urls/sticky.py
index 0066e77ea..0df9c49c3 100644
--- a/apps/api/plane/api/urls/sticky.py
+++ b/apps/api/plane/api/urls/sticky.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 from django.urls import path, include
 from rest_framework.routers import DefaultRouter
 
diff --git a/apps/api/plane/api/urls/user.py b/apps/api/plane/api/urls/user.py
index 461b08333..33769b7c0 100644
--- a/apps/api/plane/api/urls/user.py
+++ b/apps/api/plane/api/urls/user.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 from django.urls import path
 
 from plane.api.views import UserEndpoint
diff --git a/apps/api/plane/api/urls/work_item.py b/apps/api/plane/api/urls/work_item.py
index 7207df957..1a1704f27 100644
--- a/apps/api/plane/api/urls/work_item.py
+++ b/apps/api/plane/api/urls/work_item.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 from django.urls import path
 
 from plane.api.views import (
@@ -13,6 +17,7 @@ from plane.api.views import (
     IssueAttachmentDetailAPIEndpoint,
     WorkspaceIssueAPIEndpoint,
     IssueSearchEndpoint,
+    IssueRelationListCreateAPIEndpoint,
 )
 
 # Deprecated url patterns
@@ -141,6 +146,11 @@ new_url_patterns = [
         IssueAttachmentDetailAPIEndpoint.as_view(http_method_names=["get", "patch", "delete"]),
         name="work-item-attachment-detail",
     ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/work-items/<uuid:issue_id>/relations/",
+        IssueRelationListCreateAPIEndpoint.as_view(http_method_names=["get", "post"]),
+        name="work-item-relation-list",
+    ),
 ]
 
 urlpatterns = old_url_patterns + new_url_patterns
diff --git a/apps/api/plane/api/views/__init__.py b/apps/api/plane/api/views/__init__.py
index 75b1b17c4..e8549afb4 100644
--- a/apps/api/plane/api/views/__init__.py
+++ b/apps/api/plane/api/views/__init__.py
@@ -1,7 +1,12 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 from .project import (
     ProjectListCreateAPIEndpoint,
     ProjectDetailAPIEndpoint,
     ProjectArchiveUnarchiveAPIEndpoint,
+    ProjectSummaryAPIEndpoint,
 )
 
 from .state import (
@@ -24,6 +29,7 @@ from .issue import (
     IssueAttachmentListCreateAPIEndpoint,
     IssueAttachmentDetailAPIEndpoint,
     IssueSearchEndpoint,
+    IssueRelationListCreateAPIEndpoint,
 )
 
 from .cycle import (
diff --git a/apps/api/plane/api/views/asset.py b/apps/api/plane/api/views/asset.py
index a91ebc883..88c34c37c 100644
--- a/apps/api/plane/api/views/asset.py
+++ b/apps/api/plane/api/views/asset.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Python Imports
 import uuid
 
diff --git a/apps/api/plane/api/views/base.py b/apps/api/plane/api/views/base.py
index 2e6584430..fc65e7abd 100644
--- a/apps/api/plane/api/views/base.py
+++ b/apps/api/plane/api/views/base.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Python imports
 import zoneinfo
 import logging
diff --git a/apps/api/plane/api/views/cycle.py b/apps/api/plane/api/views/cycle.py
index c92b27f59..30b04ed46 100644
--- a/apps/api/plane/api/views/cycle.py
+++ b/apps/api/plane/api/views/cycle.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Python imports
 import json
 
@@ -195,9 +199,7 @@ class CycleListCreateAPIEndpoint(BaseAPIView):
 
         # Current Cycle
         if cycle_view == "current":
-            queryset = queryset.filter(
-                start_date__lte=timezone.now(), end_date__gte=timezone.now()
-            )
+            queryset = queryset.filter(start_date__lte=timezone.now(), end_date__gte=timezone.now())
             data = CycleSerializer(
                 queryset,
                 many=True,
@@ -254,9 +256,7 @@ class CycleListCreateAPIEndpoint(BaseAPIView):
 
         # Incomplete Cycles
         if cycle_view == "incomplete":
-            queryset = queryset.filter(
-                Q(end_date__gte=timezone.now()) | Q(end_date__isnull=True)
-            )
+            queryset = queryset.filter(Q(end_date__gte=timezone.now()) | Q(end_date__isnull=True))
             return self.paginate(
                 request=request,
                 queryset=(queryset),
@@ -302,17 +302,10 @@ class CycleListCreateAPIEndpoint(BaseAPIView):
         Create a new development cycle with specified name, description, and date range.
         Supports external ID tracking for integration purposes.
         """
-        if (
-            request.data.get("start_date", None) is None
-            and request.data.get("end_date", None) is None
-        ) or (
-            request.data.get("start_date", None) is not None
-            and request.data.get("end_date", None) is not None
+        if (request.data.get("start_date", None) is None and request.data.get("end_date", None) is None) or (
+            request.data.get("start_date", None) is not None and request.data.get("end_date", None) is not None
         ):
-
-            serializer = CycleCreateSerializer(
-                data=request.data, context={"request": request}
-            )
+            serializer = CycleCreateSerializer(data=request.data, context={"request": request})
             if serializer.is_valid():
                 if (
                     request.data.get("external_id")
@@ -355,9 +348,7 @@ class CycleListCreateAPIEndpoint(BaseAPIView):
             return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
         else:
             return Response(
-                {
-                    "error": "Both start date and end date are either required or are to be null"
-                },
+                {"error": "Both start date and end date are either required or are to be null"},
                 status=status.HTTP_400_BAD_REQUEST,
             )
 
@@ -505,9 +496,7 @@ class CycleDetailAPIEndpoint(BaseAPIView):
         """
         cycle = Cycle.objects.get(workspace__slug=slug, project_id=project_id, pk=pk)
 
-        current_instance = json.dumps(
-            CycleSerializer(cycle).data, cls=DjangoJSONEncoder
-        )
+        current_instance = json.dumps(CycleSerializer(cycle).data, cls=DjangoJSONEncoder)
 
         if cycle.archived_at:
             return Response(
@@ -520,20 +509,14 @@ class CycleDetailAPIEndpoint(BaseAPIView):
         if cycle.end_date is not None and cycle.end_date < timezone.now():
             if "sort_order" in request_data:
                 # Can only change sort order
-                request_data = {
-                    "sort_order": request_data.get("sort_order", cycle.sort_order)
-                }
+                request_data = {"sort_order": request_data.get("sort_order", cycle.sort_order)}
             else:
                 return Response(
-                    {
-                        "error": "The Cycle has already been completed so it cannot be edited"
-                    },
+                    {"error": "The Cycle has already been completed so it cannot be edited"},
                     status=status.HTTP_400_BAD_REQUEST,
                 )
 
-        serializer = CycleUpdateSerializer(
-            cycle, data=request.data, partial=True, context={"request": request}
-        )
+        serializer = CycleUpdateSerializer(cycle, data=request.data, partial=True, context={"request": request})
         if serializer.is_valid():
             if (
                 request.data.get("external_id")
@@ -541,9 +524,7 @@ class CycleDetailAPIEndpoint(BaseAPIView):
                 and Cycle.objects.filter(
                     project_id=project_id,
                     workspace__slug=slug,
-                    external_source=request.data.get(
-                        "external_source", cycle.external_source
-                    ),
+                    external_source=request.data.get("external_source", cycle.external_source),
                     external_id=request.data.get("external_id"),
                 ).exists()
             ):
@@ -600,11 +581,7 @@ class CycleDetailAPIEndpoint(BaseAPIView):
                 status=status.HTTP_403_FORBIDDEN,
             )
 
-        cycle_issues = list(
-            CycleIssue.objects.filter(cycle_id=self.kwargs.get("pk")).values_list(
-                "issue", flat=True
-            )
-        )
+        cycle_issues = list(CycleIssue.objects.filter(cycle_id=self.kwargs.get("pk")).values_list("issue", flat=True))
 
         issue_activity.delay(
             type="cycle.activity.deleted",
@@ -624,9 +601,7 @@ class CycleDetailAPIEndpoint(BaseAPIView):
         # Delete the cycle
         cycle.delete()
         # Delete the user favorite cycle
-        UserFavorite.objects.filter(
-            entity_type="cycle", entity_identifier=pk, project_id=project_id
-        ).delete()
+        UserFavorite.objects.filter(entity_type="cycle", entity_identifier=pk, project_id=project_id).delete()
         return Response(status=status.HTTP_204_NO_CONTENT)
 
 
@@ -764,9 +739,7 @@ class CycleArchiveUnarchiveAPIEndpoint(BaseAPIView):
         return self.paginate(
             request=request,
             queryset=(self.get_queryset()),
-            on_results=lambda cycles: CycleSerializer(
-                cycles, many=True, fields=self.fields, expand=self.expand
-            ).data,
+            on_results=lambda cycles: CycleSerializer(cycles, many=True, fields=self.fields, expand=self.expand).data,
         )
 
     @cycle_docs(
@@ -785,9 +758,7 @@ class CycleArchiveUnarchiveAPIEndpoint(BaseAPIView):
         Move a completed cycle to archived status for historical tracking.
         Only cycles that have ended can be archived.
         """
-        cycle = Cycle.objects.get(
-            pk=cycle_id, project_id=project_id, workspace__slug=slug
-        )
+        cycle = Cycle.objects.get(pk=cycle_id, project_id=project_id, workspace__slug=slug)
         if cycle.end_date >= timezone.now():
             return Response(
                 {"error": "Only completed cycles can be archived"},
@@ -818,9 +789,7 @@ class CycleArchiveUnarchiveAPIEndpoint(BaseAPIView):
         Restore an archived cycle to active status, making it available for regular use.
         The cycle will reappear in active cycle lists.
         """
-        cycle = Cycle.objects.get(
-            pk=cycle_id, project_id=project_id, workspace__slug=slug
-        )
+        cycle = Cycle.objects.get(pk=cycle_id, project_id=project_id, workspace__slug=slug)
         cycle.archived_at = None
         cycle.save()
         return Response(status=status.HTTP_204_NO_CONTENT)
@@ -883,9 +852,7 @@ class CycleIssueListCreateAPIEndpoint(BaseAPIView):
         # List
         order_by = request.GET.get("order_by", "created_at")
         issues = (
-            Issue.issue_objects.filter(
-                issue_cycle__cycle_id=cycle_id, issue_cycle__deleted_at__isnull=True
-            )
+            Issue.issue_objects.filter(issue_cycle__cycle_id=cycle_id, issue_cycle__deleted_at__isnull=True)
             .annotate(
                 sub_issues_count=Issue.issue_objects.filter(parent=OuterRef("id"))
                 .order_by()
@@ -922,9 +889,7 @@ class CycleIssueListCreateAPIEndpoint(BaseAPIView):
         return self.paginate(
             request=request,
             queryset=(issues),
-            on_results=lambda issues: IssueSerializer(
-                issues, many=True, fields=self.fields, expand=self.expand
-            ).data,
+            on_results=lambda issues: IssueSerializer(issues, many=True, fields=self.fields, expand=self.expand).data,
         )
 
     @cycle_docs(
@@ -958,9 +923,7 @@ class CycleIssueListCreateAPIEndpoint(BaseAPIView):
                 status=status.HTTP_400_BAD_REQUEST,
             )
 
-        cycle = Cycle.objects.get(
-            workspace__slug=slug, project_id=project_id, pk=cycle_id
-        )
+        cycle = Cycle.objects.get(workspace__slug=slug, project_id=project_id, pk=cycle_id)
 
         if cycle.end_date is not None and cycle.end_date < timezone.now():
             return Response(
@@ -972,13 +935,9 @@ class CycleIssueListCreateAPIEndpoint(BaseAPIView):
             )
 
         # Get all CycleWorkItems already created
-        cycle_issues = list(
-            CycleIssue.objects.filter(~Q(cycle_id=cycle_id), issue_id__in=issues)
-        )
+        cycle_issues = list(CycleIssue.objects.filter(~Q(cycle_id=cycle_id), issue_id__in=issues))
         existing_issues = [
-            str(cycle_issue.issue_id)
-            for cycle_issue in cycle_issues
-            if str(cycle_issue.issue_id) in issues
+            str(cycle_issue.issue_id) for cycle_issue in cycle_issues if str(cycle_issue.issue_id) in issues
         ]
         new_issues = list(set(issues) - set(existing_issues))
 
@@ -1029,9 +988,7 @@ class CycleIssueListCreateAPIEndpoint(BaseAPIView):
             current_instance=json.dumps(
                 {
                     "updated_cycle_issues": update_cycle_issue_activity,
-                    "created_cycle_issues": serializers.serialize(
-                        "json", created_records
-                    ),
+                    "created_cycle_issues": serializers.serialize("json", created_records),
                 }
             ),
             epoch=int(timezone.now().timestamp()),
@@ -1107,9 +1064,7 @@ class CycleIssueDetailAPIEndpoint(BaseAPIView):
             cycle_id=cycle_id,
             issue_id=issue_id,
         )
-        serializer = CycleIssueSerializer(
-            cycle_issue, fields=self.fields, expand=self.expand
-        )
+        serializer = CycleIssueSerializer(cycle_issue, fields=self.fields, expand=self.expand)
         return Response(serializer.data, status=status.HTTP_200_OK)
 
     @cycle_docs(
@@ -1214,7 +1169,7 @@ class TransferCycleIssueAPIEndpoint(BaseAPIView):
                 {"error": "New Cycle Id is required"},
                 status=status.HTTP_400_BAD_REQUEST,
             )
-        
+
         old_cycle = Cycle.objects.get(
             workspace__slug=slug,
             project_id=project_id,
diff --git a/apps/api/plane/api/views/estimate.py b/apps/api/plane/api/views/estimate.py
new file mode 100644
index 000000000..915cc8e5c
--- /dev/null
+++ b/apps/api/plane/api/views/estimate.py
@@ -0,0 +1,291 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
+# Third party imports
+from rest_framework.response import Response
+from rest_framework import status
+from drf_spectacular.utils import OpenApiRequest, OpenApiResponse
+
+# Module imports
+from plane.app.permissions.project import ProjectEntityPermission
+from plane.api.views.base import BaseAPIView
+from plane.db.models import Estimate, EstimatePoint, Project, Workspace
+from plane.api.serializers import EstimateSerializer, EstimatePointSerializer
+from plane.utils.openapi.decorators import estimate_docs, estimate_point_docs
+from plane.utils.openapi import (
+    ESTIMATE_CREATE_EXAMPLE,
+    ESTIMATE_UPDATE_EXAMPLE,
+    ESTIMATE_POINT_CREATE_EXAMPLE,
+    ESTIMATE_POINT_UPDATE_EXAMPLE,
+    ESTIMATE_EXAMPLE,
+    ESTIMATE_POINT_EXAMPLE,
+    DELETED_RESPONSE,
+    WORKSPACE_SLUG_PARAMETER,
+    PROJECT_ID_PARAMETER,
+    ESTIMATE_ID_PARAMETER,
+)
+
+
+class ProjectEstimateAPIEndpoint(BaseAPIView):
+    permission_classes = [ProjectEntityPermission]
+    model = Estimate
+    serializer_class = EstimateSerializer
+
+    def get_queryset(self):
+        return self.model.objects.filter(workspace__slug=self.workspace_slug, project_id=self.project_id)
+
+    @estimate_docs(
+        operation_id="create_estimate",
+        summary="Create an estimate",
+        description="Create an estimate for a project",
+        request=OpenApiRequest(
+            request=EstimateSerializer,
+            examples=[ESTIMATE_CREATE_EXAMPLE],
+        ),
+    )
+    def post(self, request, slug, project_id):
+        project = Project.objects.filter(id=project_id, workspace__slug=slug).first()
+        if not project:
+            return Response(status=status.HTTP_404_NOT_FOUND, data={"error": "Project not found"})
+
+        workspace = Workspace.objects.filter(slug=slug).first()
+        if not workspace:
+            return Response(status=status.HTTP_404_NOT_FOUND, data={"error": "Workspace not found"})
+
+        project_estimate = self.get_queryset().first()
+        if project_estimate:
+            # return 409 if the project estimate already exists
+            return Response(
+                status=status.HTTP_409_CONFLICT,
+                data={"error": "An estimate already exists for this project", "id": str(project_estimate.id)},
+            )
+        # create the project estimate
+        serializer = self.serializer_class(data=request.data, context={"workspace": workspace, "project": project})
+        if not serializer.is_valid():
+            return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
+
+        serializer.save()
+        return Response(serializer.data, status=status.HTTP_201_CREATED)
+
+    @estimate_docs(
+        operation_id="get_estimate",
+        summary="Get an estimate",
+        description="Get an estimate for a project",
+        responses={
+            200: OpenApiResponse(
+                description="Estimate",
+                response=EstimateSerializer,
+                examples=[ESTIMATE_EXAMPLE],
+            ),
+        },
+    )
+    def get(self, request, slug, project_id):
+        estimate = self.get_queryset().first()
+        if not estimate:
+            return Response(status=status.HTTP_404_NOT_FOUND, data={"error": "Estimate not found"})
+        serializer = self.serializer_class(estimate)
+        return Response(serializer.data, status=status.HTTP_200_OK)
+
+    @estimate_docs(
+        operation_id="update_estimate",
+        summary="Update an estimate",
+        description="Update an estimate for a project",
+        request=OpenApiRequest(
+            request=EstimateSerializer,
+            examples=[ESTIMATE_UPDATE_EXAMPLE],
+        ),
+        responses={
+            200: OpenApiResponse(
+                description="Estimate",
+                response=EstimateSerializer,
+                examples=[ESTIMATE_EXAMPLE],
+            ),
+        },
+    )
+    def patch(self, request, slug, project_id):
+        ALLOWED_FIELDS = ["name", "description"]
+        estimate = self.get_queryset().first()
+        if not estimate:
+            return Response(status=status.HTTP_404_NOT_FOUND, data={"error": "Estimate not found"})
+        filtered_data = {k: v for k, v in request.data.items() if k in ALLOWED_FIELDS}
+        if not filtered_data:
+            serializer = self.serializer_class(estimate)
+            return Response(serializer.data, status=status.HTTP_200_OK)
+        serializer = self.serializer_class(estimate, data=filtered_data, partial=True)
+        if not serializer.is_valid():
+            return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
+        serializer.save()
+        return Response(serializer.data, status=status.HTTP_200_OK)
+
+    @estimate_docs(
+        operation_id="delete_estimate",
+        summary="Delete an estimate",
+        description="Delete an estimate for a project",
+        responses={
+            204: DELETED_RESPONSE,
+        },
+    )
+    def delete(self, request, slug, project_id):
+        estimate = self.get_queryset().first()
+        if not estimate:
+            return Response(status=status.HTTP_404_NOT_FOUND, data={"error": "Estimate not found"})
+        estimate.delete()
+        return Response(status=status.HTTP_204_NO_CONTENT)
+
+
+class EstimatePointListCreateAPIEndpoint(BaseAPIView):
+    """List and bulk create estimate points for an estimate."""
+
+    permission_classes = [ProjectEntityPermission]
+    model = EstimatePoint
+    serializer_class = EstimatePointSerializer
+
+    def get_queryset(self):
+        return self.model.objects.filter(
+            estimate_id=self.kwargs["estimate_id"],
+            workspace__slug=self.kwargs["slug"],
+            project_id=self.kwargs["project_id"],
+        ).select_related("estimate", "workspace", "project")
+
+    @estimate_point_docs(
+        operation_id="get_estimate_points",
+        summary="Get estimate points",
+        description="Get estimate points for an estimate",
+        parameters=[
+            WORKSPACE_SLUG_PARAMETER,
+            PROJECT_ID_PARAMETER,
+            ESTIMATE_ID_PARAMETER,
+        ],
+        responses={
+            200: OpenApiResponse(
+                description="Estimate points",
+                response=EstimatePointSerializer(many=True),
+                examples=[ESTIMATE_POINT_EXAMPLE],
+            ),
+        },
+    )
+    def get(self, request, slug, project_id, estimate_id):
+        estimate = Estimate.objects.filter(
+            id=estimate_id,
+            workspace__slug=slug,
+            project_id=project_id,
+        ).first()
+        if not estimate:
+            return Response(status=status.HTTP_404_NOT_FOUND, data={"error": "Estimate not found"})
+        estimate_points = self.get_queryset()
+        serializer = self.serializer_class(estimate_points, many=True)
+        return Response(serializer.data, status=status.HTTP_200_OK)
+
+    @estimate_point_docs(
+        operation_id="create_estimate_points",
+        summary="Create estimate points",
+        description="Create estimate points for an estimate",
+        request=OpenApiRequest(
+            request=EstimatePointSerializer,
+            examples=[ESTIMATE_POINT_CREATE_EXAMPLE],
+        ),
+        responses={
+            201: OpenApiResponse(
+                description="Estimate points",
+                response=EstimatePointSerializer(many=True),
+                examples=[ESTIMATE_POINT_EXAMPLE],
+            ),
+        },
+    )
+    def post(self, request, slug, project_id, estimate_id):
+        estimate = Estimate.objects.filter(
+            id=estimate_id,
+            workspace__slug=slug,
+            project_id=project_id,
+        ).first()
+        if not estimate:
+            return Response(status=status.HTTP_404_NOT_FOUND, data={"error": "Estimate not found"})
+
+        estimate_points_data = (
+            request.data if isinstance(request.data, list) else request.data.get("estimate_points", [])
+        )
+        if not estimate_points_data:
+            return Response(
+                status=status.HTTP_400_BAD_REQUEST,
+                data={"error": "Estimate points are required"},
+            )
+
+        serializer = self.serializer_class(data=estimate_points_data, many=True)
+        if not serializer.is_valid():
+            return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
+
+        estimate_points = [
+            EstimatePoint(
+                estimate=estimate,
+                workspace=estimate.workspace,
+                project=estimate.project,
+                **item,
+            )
+            for item in serializer.validated_data
+        ]
+        created = EstimatePoint.objects.bulk_create(estimate_points)
+        return Response(
+            self.serializer_class(created, many=True).data,
+            status=status.HTTP_201_CREATED,
+        )
+
+
+class EstimatePointDetailAPIEndpoint(BaseAPIView):
+    """Update and delete a single estimate point."""
+
+    permission_classes = [ProjectEntityPermission]
+    model = EstimatePoint
+    serializer_class = EstimatePointSerializer
+
+    def get_queryset(self):
+        return self.model.objects.filter(
+            estimate_id=self.kwargs["estimate_id"],
+            workspace__slug=self.kwargs["slug"],
+            project_id=self.kwargs["project_id"],
+        )
+
+    @estimate_point_docs(
+        operation_id="update_estimate_point",
+        summary="Update an estimate point",
+        description="Update an estimate point for an estimate",
+        request=OpenApiRequest(
+            request=EstimatePointSerializer,
+            examples=[ESTIMATE_POINT_UPDATE_EXAMPLE],
+        ),
+        responses={
+            200: OpenApiResponse(
+                description="Estimate point",
+                response=EstimatePointSerializer,
+                examples=[ESTIMATE_POINT_EXAMPLE],
+            ),
+        },
+    )
+    def patch(self, request, slug, project_id, estimate_id, estimate_point_id):
+        estimate_point = self.get_queryset().filter(id=estimate_point_id).first()
+        if not estimate_point:
+            return Response(status=status.HTTP_404_NOT_FOUND, data={"error": "Estimate point not found"})
+        ALLOWED_FIELDS = ["key", "value", "description"]
+        filtered_data = {k: v for k, v in request.data.items() if k in ALLOWED_FIELDS}
+        if not filtered_data:
+            return Response(self.serializer_class(estimate_point).data, status=status.HTTP_200_OK)
+        serializer = self.serializer_class(estimate_point, data=filtered_data, partial=True)
+        if not serializer.is_valid():
+            return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
+        serializer.save()
+        return Response(serializer.data, status=status.HTTP_200_OK)
+
+    @estimate_point_docs(
+        operation_id="delete_estimate_point",
+        summary="Delete an estimate point",
+        description="Delete an estimate point for an estimate",
+        responses={
+            204: DELETED_RESPONSE,
+        },
+    )
+    def delete(self, request, slug, project_id, estimate_id, estimate_point_id):
+        estimate_point = self.get_queryset().filter(id=estimate_point_id).first()
+        if not estimate_point:
+            return Response(status=status.HTTP_404_NOT_FOUND, data={"error": "Estimate point not found"})
+        estimate_point.delete()
+        return Response(status=status.HTTP_204_NO_CONTENT)
diff --git a/apps/api/plane/api/views/intake.py b/apps/api/plane/api/views/intake.py
index 216b27afc..2df2d3069 100644
--- a/apps/api/plane/api/views/intake.py
+++ b/apps/api/plane/api/views/intake.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Python imports
 import json
 
@@ -180,11 +184,14 @@ class IntakeIssueListCreateAPIEndpoint(BaseAPIView):
             )
 
         # create an issue
+        issue_data = request.data.get("issue", {})
+        # Accept both "description" and "description_json" keys for the description_json field
+        description_json = issue_data.get("description") or issue_data.get("description_json") or {}
         issue = Issue.objects.create(
-            name=request.data.get("issue", {}).get("name"),
-            description=request.data.get("issue", {}).get("description", {}),
-            description_html=request.data.get("issue", {}).get("description_html", "<p></p>"),
-            priority=request.data.get("issue", {}).get("priority", "none"),
+            name=issue_data.get("name"),
+            description_json=description_json,
+            description_html=issue_data.get("description_html", "<p></p>"),
+            priority=issue_data.get("priority", "none"),
             project_id=project_id,
             state_id=triage_state.id,
         )
@@ -365,10 +372,11 @@ class IntakeIssueDetailAPIEndpoint(BaseAPIView):
 
             # Only allow guests to edit name and description
             if project_member.role <= 5:
+                description_json = issue_data.get("description") or issue_data.get("description_json") or {}
                 issue_data = {
                     "name": issue_data.get("name", issue.name),
                     "description_html": issue_data.get("description_html", issue.description_html),
-                    "description": issue_data.get("description", issue.description),
+                    "description_json": description_json,
                 }
 
             issue_serializer = IssueSerializer(issue, data=issue_data, partial=True)
diff --git a/apps/api/plane/api/views/invite.py b/apps/api/plane/api/views/invite.py
index f1263b009..f1dd6af25 100644
--- a/apps/api/plane/api/views/invite.py
+++ b/apps/api/plane/api/views/invite.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Third party imports
 from rest_framework.response import Response
 from rest_framework import status
diff --git a/apps/api/plane/api/views/issue.py b/apps/api/plane/api/views/issue.py
index fe32fe3fd..97e8e7cee 100644
--- a/apps/api/plane/api/views/issue.py
+++ b/apps/api/plane/api/views/issue.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Python imports
 import json
 import uuid
@@ -19,7 +23,11 @@ from django.db.models import (
     Value,
     When,
     Subquery,
+    UUIDField,
 )
+from django.db.models.functions import Coalesce
+from django.contrib.postgres.aggregates import ArrayAgg
+from django.contrib.postgres.fields import ArrayField
 from django.utils import timezone
 from django.conf import settings
 
@@ -41,6 +49,9 @@ from plane.api.serializers import (
     IssueActivitySerializer,
     IssueCommentSerializer,
     IssueLinkSerializer,
+    IssueRelationCreateSerializer,
+    IssueRelationResponseSerializer,
+    IssueRelationSerializer,
     IssueSerializer,
     LabelSerializer,
     IssueAttachmentUploadSerializer,
@@ -49,6 +60,7 @@ from plane.api.serializers import (
     IssueLinkCreateSerializer,
     IssueLinkUpdateSerializer,
     LabelCreateUpdateSerializer,
+    RelatedIssueSerializer,
 )
 from plane.app.permissions import (
     ProjectEntityPermission,
@@ -62,6 +74,7 @@ from plane.db.models import (
     FileAsset,
     IssueComment,
     IssueLink,
+    IssueRelation,
     Label,
     Project,
     ProjectMember,
@@ -72,10 +85,12 @@ from plane.settings.storage import S3Storage
 from plane.bgtasks.storage_metadata_task import get_asset_object_metadata
 from .base import BaseAPIView
 from plane.utils.host import base_host
+from plane.utils.issue_relation_mapper import get_actual_relation
 from plane.bgtasks.webhook_task import model_activity
 from plane.app.permissions import ROLE
 from plane.utils.openapi import (
     work_item_docs,
+    work_item_relation_docs,
     label_docs,
     issue_link_docs,
     issue_comment_docs,
@@ -625,6 +640,16 @@ class IssueDetailAPIEndpoint(BaseAPIView):
                         current_instance=current_instance,
                         epoch=int(timezone.now().timestamp()),
                     )
+                    # Send the model activity for webhook dispatch
+                    model_activity.delay(
+                        model_name="issue",
+                        model_id=str(issue.id),
+                        requested_data=request.data,
+                        current_instance=current_instance,
+                        actor_id=request.user.id,
+                        slug=slug,
+                        origin=base_host(request=request, is_app=True),
+                    )
                     return Response(serializer.data, status=status.HTTP_200_OK)
                 return Response(
                     # If the serializer is not valid, respond with 400 bad
@@ -673,6 +698,16 @@ class IssueDetailAPIEndpoint(BaseAPIView):
                         current_instance=None,
                         epoch=int(timezone.now().timestamp()),
                     )
+                    # Send the model activity for webhook dispatch
+                    model_activity.delay(
+                        model_name="issue",
+                        model_id=str(serializer.data["id"]),
+                        requested_data=request.data,
+                        current_instance=None,
+                        actor_id=request.user.id,
+                        slug=slug,
+                        origin=base_host(request=request, is_app=True),
+                    )
                     return Response(serializer.data, status=status.HTTP_201_CREATED)
                 return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
         else:
@@ -748,6 +783,16 @@ class IssueDetailAPIEndpoint(BaseAPIView):
                 current_instance=current_instance,
                 epoch=int(timezone.now().timestamp()),
             )
+            # Send the model activity for webhook dispatch
+            model_activity.delay(
+                model_name="issue",
+                model_id=str(pk),
+                requested_data=request.data,
+                current_instance=current_instance,
+                actor_id=request.user.id,
+                slug=slug,
+                origin=base_host(request=request, is_app=True),
+            )
             return Response(serializer.data, status=status.HTTP_200_OK)
         return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
 
@@ -1085,9 +1130,9 @@ class IssueLinkListCreateAPIEndpoint(BaseAPIView):
         return self.paginate(
             request=request,
             queryset=(self.get_queryset()),
-            on_results=lambda issue_links: IssueLinkSerializer(
-                issue_links, many=True, fields=self.fields, expand=self.expand
-            ).data,
+            on_results=lambda issue_links: (
+                IssueLinkSerializer(issue_links, many=True, fields=self.fields, expand=self.expand).data
+            ),
         )
 
     @issue_link_docs(
@@ -1192,9 +1237,9 @@ class IssueLinkDetailAPIEndpoint(BaseAPIView):
             return self.paginate(
                 request=request,
                 queryset=(self.get_queryset()),
-                on_results=lambda issue_links: IssueLinkSerializer(
-                    issue_links, many=True, fields=self.fields, expand=self.expand
-                ).data,
+                on_results=lambda issue_links: (
+                    IssueLinkSerializer(issue_links, many=True, fields=self.fields, expand=self.expand).data
+                ),
             )
         issue_link = self.get_queryset().get(pk=pk)
         serializer = IssueLinkSerializer(issue_link, fields=self.fields, expand=self.expand)
@@ -1343,9 +1388,9 @@ class IssueCommentListCreateAPIEndpoint(BaseAPIView):
         return self.paginate(
             request=request,
             queryset=(self.get_queryset()),
-            on_results=lambda issue_comments: IssueCommentSerializer(
-                issue_comments, many=True, fields=self.fields, expand=self.expand
-            ).data,
+            on_results=lambda issue_comments: (
+                IssueCommentSerializer(issue_comments, many=True, fields=self.fields, expand=self.expand).data
+            ),
         )
 
     @issue_comment_docs(
@@ -1654,9 +1699,9 @@ class IssueActivityListAPIEndpoint(BaseAPIView):
         return self.paginate(
             request=request,
             queryset=(issue_activities),
-            on_results=lambda issue_activity: IssueActivitySerializer(
-                issue_activity, many=True, fields=self.fields, expand=self.expand
-            ).data,
+            on_results=lambda issue_activity: (
+                IssueActivitySerializer(issue_activity, many=True, fields=self.fields, expand=self.expand).data
+            ),
         )
 
 
@@ -2216,3 +2261,224 @@ class IssueSearchEndpoint(BaseAPIView):
         )[: int(limit)]
 
         return Response({"issues": issue_results}, status=status.HTTP_200_OK)
+
+
+class IssueRelationListCreateAPIEndpoint(BaseAPIView):
+    """Issue Relation List and Create Endpoint"""
+
+    serializer_class = IssueRelationSerializer
+    model = IssueRelation
+    permission_classes = [ProjectEntityPermission]
+    use_read_replica = True
+
+    @work_item_relation_docs(
+        operation_id="list_work_item_relations",
+        summary="List work item relations",
+        description="Retrieve all relationships for a work item including blocking, blocked_by, duplicate, relates_to, start_before, start_after, finish_before, and finish_after relations.",  # noqa E501
+        parameters=[
+            ISSUE_ID_PARAMETER,
+            CURSOR_PARAMETER,
+            PER_PAGE_PARAMETER,
+            ORDER_BY_PARAMETER,
+            FIELDS_PARAMETER,
+            EXPAND_PARAMETER,
+        ],
+        responses={
+            200: OpenApiResponse(
+                description="Work item relations grouped by relation type",
+                response=IssueRelationResponseSerializer,
+                examples=[
+                    OpenApiExample(
+                        name="Work Item Relations Response",
+                        value={
+                            "blocking": [
+                                "550e8400-e29b-41d4-a716-446655440000",
+                                "550e8400-e29b-41d4-a716-446655440001",
+                            ],
+                            "blocked_by": ["550e8400-e29b-41d4-a716-446655440002"],
+                            "duplicate": [],
+                            "relates_to": ["550e8400-e29b-41d4-a716-446655440003"],
+                            "start_after": [],
+                            "start_before": ["550e8400-e29b-41d4-a716-446655440004"],
+                            "finish_after": [],
+                            "finish_before": [],
+                        },
+                    )
+                ],
+            ),
+            400: INVALID_REQUEST_RESPONSE,
+            404: ISSUE_NOT_FOUND_RESPONSE,
+        },
+    )
+    def get(self, request, slug, project_id, issue_id):
+        """List work item relations
+
+        Retrieve all relationships for a work item organized by relation type.
+        Returns a structured response with relations grouped by type.
+        """
+        empty_uuid_array = Value([], output_field=ArrayField(UUIDField()))
+
+        def _agg_ids(field, **filter_kwargs):
+            return Coalesce(
+                ArrayAgg(field, filter=Q(**filter_kwargs), distinct=True),
+                empty_uuid_array,
+            )
+
+        issue_relation_qs = IssueRelation.objects.filter(
+            Q(issue_id=issue_id) | Q(related_issue_id=issue_id),
+            workspace__slug=slug,
+        )
+
+        relation_ids = issue_relation_qs.aggregate(
+            blocking_ids=_agg_ids("issue_id", relation_type="blocked_by", related_issue_id=issue_id),
+            blocked_by_ids=_agg_ids("related_issue_id", relation_type="blocked_by", issue_id=issue_id),
+            duplicate_ids=_agg_ids("related_issue_id", relation_type="duplicate", issue_id=issue_id),
+            duplicate_ids_related=_agg_ids("issue_id", relation_type="duplicate", related_issue_id=issue_id),
+            relates_to_ids=_agg_ids("related_issue_id", relation_type="relates_to", issue_id=issue_id),
+            relates_to_ids_related=_agg_ids("issue_id", relation_type="relates_to", related_issue_id=issue_id),
+            start_after_ids=_agg_ids("issue_id", relation_type="start_before", related_issue_id=issue_id),
+            start_before_ids=_agg_ids("related_issue_id", relation_type="start_before", issue_id=issue_id),
+            finish_after_ids=_agg_ids("issue_id", relation_type="finish_before", related_issue_id=issue_id),
+            finish_before_ids=_agg_ids("related_issue_id", relation_type="finish_before", issue_id=issue_id),
+        )
+
+        response_data = {
+            "blocking": relation_ids["blocking_ids"],
+            "blocked_by": relation_ids["blocked_by_ids"],
+            "duplicate": list(set(relation_ids["duplicate_ids"] + relation_ids["duplicate_ids_related"])),
+            "relates_to": list(set(relation_ids["relates_to_ids"] + relation_ids["relates_to_ids_related"])),
+            "start_after": relation_ids["start_after_ids"],
+            "start_before": relation_ids["start_before_ids"],
+            "finish_after": relation_ids["finish_after_ids"],
+            "finish_before": relation_ids["finish_before_ids"],
+        }
+
+        return Response(response_data, status=status.HTTP_200_OK)
+
+    @work_item_relation_docs(
+        operation_id="create_work_item_relation",
+        summary="Create work item relation",
+        description="Create relationships between work items. Supports various relation types including blocking, blocked_by, duplicate, relates_to, start_before, start_after, finish_before, and finish_after.",  # noqa E501
+        parameters=[
+            ISSUE_ID_PARAMETER,
+        ],
+        request=OpenApiRequest(
+            request=IssueRelationCreateSerializer,
+            examples=[
+                OpenApiExample(
+                    name="Create blocking relation",
+                    value={
+                        "relation_type": "blocking",
+                        "issues": [
+                            "550e8400-e29b-41d4-a716-446655440000",
+                            "550e8400-e29b-41d4-a716-446655440001",
+                        ],
+                    },
+                )
+            ],
+        ),
+        responses={
+            201: OpenApiResponse(
+                description="Work item relations created successfully",
+                response=IssueRelationSerializer(many=True),
+                examples=[
+                    OpenApiExample(
+                        name="Relations created",
+                        value=[
+                            {
+                                "id": "550e8400-e29b-41d4-a716-446655440000",
+                                "name": "Fix authentication bug",
+                                "sequence_id": 42,
+                                "project_id": "550e8400-e29b-41d4-a716-446655440001",
+                                "relation_type": "blocked_by",
+                                "state_id": "550e8400-e29b-41d4-a716-446655440002",
+                                "priority": "high",
+                                "created_at": "2024-01-15T10:00:00Z",
+                                "updated_at": "2024-01-15T10:00:00Z",
+                                "created_by": "550e8400-e29b-41d4-a716-446655440004",
+                                "updated_by": "550e8400-e29b-41d4-a716-446655440004",
+                            }
+                        ],
+                    )
+                ],
+            ),
+            400: INVALID_REQUEST_RESPONSE,
+            404: ISSUE_NOT_FOUND_RESPONSE,
+        },
+    )
+    def post(self, request, slug, project_id, issue_id):
+        """Create work item relation
+
+        Create relationships between work items with specified relation type.
+        Automatically tracks relation creation activity.
+        """
+        # Validate request data using serializer
+        serializer = IssueRelationCreateSerializer(data=request.data)
+        if not serializer.is_valid():
+            return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
+
+        relation_type = serializer.validated_data["relation_type"]
+        issues = serializer.validated_data["issues"]
+        project = Project.objects.get(pk=project_id, workspace__slug=slug)
+
+        actual_relation = get_actual_relation(relation_type)
+        is_reverse = relation_type in ["blocking", "start_after", "finish_after"]
+
+        IssueRelation.objects.bulk_create(
+            [
+                IssueRelation(
+                    issue_id=(issue if is_reverse else issue_id),
+                    related_issue_id=(issue_id if is_reverse else issue),
+                    relation_type=actual_relation,
+                    project_id=project_id,
+                    workspace_id=project.workspace_id,
+                    created_by=request.user,
+                    updated_by=request.user,
+                )
+                for issue in issues
+            ],
+            batch_size=10,
+            ignore_conflicts=True,
+        )
+
+        issue_activity.delay(
+            type="issue_relation.activity.created",
+            requested_data=json.dumps(request.data, cls=DjangoJSONEncoder),
+            actor_id=str(request.user.id),
+            issue_id=str(issue_id),
+            project_id=str(project_id),
+            current_instance=None,
+            epoch=int(timezone.now().timestamp()),
+            notification=True,
+            origin=base_host(request=request, is_app=True),
+        )
+
+        # Re-fetch with select_related to avoid N+1 queries in serializers.
+        # bulk_create with ignore_conflicts=True may not return PKs,
+        # so query by the issue/related_issue pairs and relation type.
+        if is_reverse:
+            refetch_filter = Q(
+                issue_id__in=issues,
+                related_issue_id=issue_id,
+                relation_type=actual_relation,
+            )
+        else:
+            refetch_filter = Q(
+                issue_id=issue_id,
+                related_issue_id__in=issues,
+                relation_type=actual_relation,
+            )
+
+        refetched_relations = IssueRelation.objects.filter(
+            refetch_filter,
+            workspace__slug=slug,
+        ).select_related(
+            "issue__state",
+            "related_issue__state",
+        )
+
+        serializer_class = RelatedIssueSerializer if is_reverse else IssueRelationSerializer
+        return Response(
+            serializer_class(refetched_relations, many=True).data,
+            status=status.HTTP_201_CREATED,
+        )
diff --git a/apps/api/plane/api/views/member.py b/apps/api/plane/api/views/member.py
index 854bc7ae6..adb28be00 100644
--- a/apps/api/plane/api/views/member.py
+++ b/apps/api/plane/api/views/member.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Third Party imports
 from rest_framework.response import Response
 from rest_framework import status
@@ -154,7 +158,6 @@ class ProjectMemberListCreateAPIEndpoint(BaseAPIView):
 
 # API endpoint to get and update a project member
 class ProjectMemberDetailAPIEndpoint(ProjectMemberListCreateAPIEndpoint):
-
     @extend_schema(
         operation_id="get_project_member",
         summary="Get project member",
diff --git a/apps/api/plane/api/views/module.py b/apps/api/plane/api/views/module.py
index a4e0f3fe8..61e198b48 100644
--- a/apps/api/plane/api/views/module.py
+++ b/apps/api/plane/api/views/module.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Python imports
 import json
 
@@ -410,7 +414,7 @@ class ModuleDetailAPIEndpoint(BaseAPIView):
                 {"error": "Archived module cannot be edited"},
                 status=status.HTTP_400_BAD_REQUEST,
             )
-        serializer = ModuleSerializer(module, data=request.data, context={"project_id": project_id}, partial=True)
+        serializer = ModuleUpdateSerializer(module, data=request.data, context={"project_id": project_id}, partial=True)
         if serializer.is_valid():
             if (
                 request.data.get("external_id")
diff --git a/apps/api/plane/api/views/project.py b/apps/api/plane/api/views/project.py
index fa735f557..5ab0fd1c1 100644
--- a/apps/api/plane/api/views/project.py
+++ b/apps/api/plane/api/views/project.py
@@ -1,9 +1,14 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Python imports
 import json
 
 # Django imports
 from django.db import IntegrityError
-from django.db.models import Exists, F, Func, OuterRef, Prefetch, Q, Subquery
+from django.db.models import Exists, F, Func, OuterRef, Prefetch, Q, Subquery, Count
+from django.db.models.functions import Coalesce
 from django.utils import timezone
 from django.core.serializers.json import DjangoJSONEncoder
 
@@ -18,7 +23,6 @@ from drf_spectacular.utils import OpenApiResponse, OpenApiRequest
 from plane.db.models import (
     Cycle,
     Intake,
-    IssueUserProperty,
     Module,
     Project,
     DeployBoard,
@@ -27,6 +31,11 @@ from plane.db.models import (
     DEFAULT_STATES,
     Workspace,
     UserFavorite,
+    Label,
+    Issue,
+    StateGroup,
+    IntakeIssue,
+    ProjectPage,
 )
 from plane.bgtasks.webhook_task import model_activity, webhook_activity
 from .base import BaseAPIView
@@ -36,7 +45,7 @@ from plane.api.serializers import (
     ProjectCreateSerializer,
     ProjectUpdateSerializer,
 )
-from plane.app.permissions import ProjectBasePermission
+from plane.app.permissions import ProjectBasePermission, WorkSpaceAdminPermission
 from plane.utils.openapi import (
     project_docs,
     PROJECT_ID_PARAMETER,
@@ -179,9 +188,9 @@ class ProjectListCreateAPIEndpoint(BaseAPIView):
         return self.paginate(
             request=request,
             queryset=(projects),
-            on_results=lambda projects: ProjectSerializer(
-                projects, many=True, fields=self.fields, expand=self.expand
-            ).data,
+            on_results=lambda projects: (
+                ProjectSerializer(projects, many=True, fields=self.fields, expand=self.expand).data
+            ),
         )
 
     @project_docs(
@@ -210,14 +219,14 @@ class ProjectListCreateAPIEndpoint(BaseAPIView):
         """
         try:
             workspace = Workspace.objects.get(slug=slug)
+
             serializer = ProjectCreateSerializer(data={**request.data}, context={"workspace_id": workspace.id})
+
             if serializer.is_valid():
                 serializer.save()
 
                 # Add the user as Administrator to the project
                 _ = ProjectMember.objects.create(project_id=serializer.instance.id, member=request.user, role=20)
-                # Also create the issue property for the user
-                _ = IssueUserProperty.objects.create(project_id=serializer.instance.id, user=request.user)
 
                 if serializer.instance.project_lead is not None and str(serializer.instance.project_lead) != str(
                     request.user.id
@@ -227,11 +236,6 @@ class ProjectListCreateAPIEndpoint(BaseAPIView):
                         member_id=serializer.instance.project_lead,
                         role=20,
                     )
-                    # Also create the issue property for the user
-                    IssueUserProperty.objects.create(
-                        project_id=serializer.instance.id,
-                        user_id=serializer.instance.project_lead,
-                    )
 
                 State.objects.bulk_create(
                     [
@@ -550,3 +554,119 @@ class ProjectArchiveUnarchiveAPIEndpoint(BaseAPIView):
         project.archived_at = None
         project.save()
         return Response(status=status.HTTP_204_NO_CONTENT)
+
+
+ALLOWED_PROJECT_SUMMARY_FIELDS = [
+    "members",
+    "states",
+    "labels",
+    "cycles",
+    "modules",
+    "issues",
+    "intakes",
+    "pages",
+]
+
+
+class ProjectSummaryAPIEndpoint(BaseAPIView):
+    permission_classes = [WorkSpaceAdminPermission]
+    use_read_replica = True
+
+    def get(self, request, slug, project_id):
+        """Get project summary
+
+        Get the summary of a project
+        """
+        project = Project.objects.filter(pk=project_id, workspace__slug=slug).first()
+        if not project:
+            return Response({"error": "Project not found"}, status=status.HTTP_404_NOT_FOUND)
+        fields = request.GET.get("fields", "").split(",")
+        requested_fields = set(filter(None, (f.strip() for f in fields))) & set(ALLOWED_PROJECT_SUMMARY_FIELDS)
+        if not requested_fields:
+            requested_fields = set(ALLOWED_PROJECT_SUMMARY_FIELDS)
+
+        # Single DB round-trip with only requested count subqueries
+        counts = self._get_all_summary_counts(project_id, requested_fields)
+        counts_dict = {field: counts[field] for field in requested_fields}
+        summary = {
+            "id": project.id,
+            "name": project.name,
+            "identifier": project.identifier,
+            "counts": counts_dict,
+        }
+        return Response(summary, status=status.HTTP_200_OK)
+
+    # Getting all summary counts in one ORM query; only runs subqueries for requested fields.
+    def _get_all_summary_counts(self, project_id, requested_fields):
+        """Return requested summary counts in one ORM query; only runs subqueries for requested fields."""
+
+        # Using a different annotation name for 'pages' to avoid conflict with Project.pages (M2M from Page)
+        def _annotation_name(field):
+            return "pages_count" if field == "pages" else field
+
+        subquery_builders = {
+            "members": lambda: (
+                ProjectMember.objects.filter(project_id=OuterRef("pk"), is_active=True)
+                .values("project_id")
+                .annotate(count=Count("*"))
+                .values("count")
+            ),
+            "states": lambda: (
+                State.objects.filter(project_id=OuterRef("pk"))
+                .values("project_id")
+                .annotate(count=Count("*"))
+                .values("count")
+            ),
+            "labels": lambda: (
+                Label.objects.filter(project_id=OuterRef("pk"))
+                .values("project_id")
+                .annotate(count=Count("*"))
+                .values("count")
+            ),
+            "cycles": lambda: (
+                Cycle.objects.filter(project_id=OuterRef("pk"))
+                .values("project_id")
+                .annotate(count=Count("*"))
+                .values("count")
+            ),
+            "modules": lambda: (
+                Module.objects.filter(project_id=OuterRef("pk"))
+                .values("project_id")
+                .annotate(count=Count("*"))
+                .values("count")
+            ),
+            "issues": lambda: (
+                Issue.objects.filter(project_id=OuterRef("pk"))
+                .exclude(state__group=StateGroup.TRIAGE.value)
+                .values("project_id")
+                .annotate(count=Count("*"))
+                .values("count")
+            ),
+            "intakes": lambda: (
+                IntakeIssue.objects.filter(project_id=OuterRef("pk"))
+                .values("project_id")
+                .annotate(count=Count("*"))
+                .values("count")
+            ),
+            "pages": lambda: (
+                ProjectPage.objects.filter(project_id=OuterRef("pk"))
+                .values("project_id")
+                .annotate(count=Count("*"))
+                .values("count")
+            ),
+        }
+
+        # Build annotations dictionary for the requested fields
+        annotations = {
+            _annotation_name(field): Coalesce(Subquery(subquery_builders[field]()), 0) for field in requested_fields
+        }
+
+        # Prepare values list for the annotation names
+        fields_list = sorted(requested_fields)
+        values_list = [_annotation_name(f) for f in fields_list]
+        # Execute the query and get the result
+        query_result = Project.objects.filter(pk=project_id).annotate(**annotations).values(*values_list).first()
+        if not query_result:
+            return {field: 0 for field in requested_fields}
+        # Return the result as a dictionary
+        return {field: query_result[_annotation_name(field)] for field in requested_fields}
diff --git a/apps/api/plane/api/views/state.py b/apps/api/plane/api/views/state.py
index 8d2633e67..eac0ee258 100644
--- a/apps/api/plane/api/views/state.py
+++ b/apps/api/plane/api/views/state.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Django imports
 from django.db import IntegrityError
 
diff --git a/apps/api/plane/api/views/sticky.py b/apps/api/plane/api/views/sticky.py
index a5173edc7..f6b4298f6 100644
--- a/apps/api/plane/api/views/sticky.py
+++ b/apps/api/plane/api/views/sticky.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 from rest_framework.response import Response
 from rest_framework import status
 
diff --git a/apps/api/plane/api/views/user.py b/apps/api/plane/api/views/user.py
index b874cec18..02d29d118 100644
--- a/apps/api/plane/api/views/user.py
+++ b/apps/api/plane/api/views/user.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Third party imports
 from rest_framework import status
 from rest_framework.response import Response
diff --git a/apps/api/plane/app/__init__.py b/apps/api/plane/app/__init__.py
index e69de29bb..917e26db4 100644
--- a/apps/api/plane/app/__init__.py
+++ b/apps/api/plane/app/__init__.py
@@ -0,0 +1,4 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
diff --git a/apps/api/plane/app/apps.py b/apps/api/plane/app/apps.py
index e3277fc4d..1dcf0d849 100644
--- a/apps/api/plane/app/apps.py
+++ b/apps/api/plane/app/apps.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 from django.apps import AppConfig
 
 
diff --git a/apps/api/plane/app/middleware/__init__.py b/apps/api/plane/app/middleware/__init__.py
index e69de29bb..917e26db4 100644
--- a/apps/api/plane/app/middleware/__init__.py
+++ b/apps/api/plane/app/middleware/__init__.py
@@ -0,0 +1,4 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
diff --git a/apps/api/plane/app/middleware/api_authentication.py b/apps/api/plane/app/middleware/api_authentication.py
index ddabb4132..abd813985 100644
--- a/apps/api/plane/app/middleware/api_authentication.py
+++ b/apps/api/plane/app/middleware/api_authentication.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Django imports
 from django.utils import timezone
 from django.db.models import Q
diff --git a/apps/api/plane/app/permissions/__init__.py b/apps/api/plane/app/permissions/__init__.py
index 849f7ba3e..22d27694e 100644
--- a/apps/api/plane/app/permissions/__init__.py
+++ b/apps/api/plane/app/permissions/__init__.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 from .workspace import (
     WorkSpaceBasePermission,
     WorkspaceOwnerPermission,
diff --git a/apps/api/plane/app/permissions/base.py b/apps/api/plane/app/permissions/base.py
index a2b1a18ff..9c451ed86 100644
--- a/apps/api/plane/app/permissions/base.py
+++ b/apps/api/plane/app/permissions/base.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 from plane.db.models import WorkspaceMember, ProjectMember
 from functools import wraps
 from rest_framework.response import Response
@@ -18,6 +22,17 @@ def allow_permission(allowed_roles, level="PROJECT", creator=False, model=None):
         def _wrapped_view(instance, request, *args, **kwargs):
             # Check for creator if required
             if creator and model:
+                # check if the user is part of the workspace or not
+                if not WorkspaceMember.objects.filter(
+                    member=request.user,
+                    workspace__slug=kwargs["slug"],
+                    is_active=True,
+                ).exists():
+                    return Response(
+                        {"error": "You don't have the required permissions."},
+                        status=status.HTTP_403_FORBIDDEN,
+                    )
+
                 obj = model.objects.filter(id=kwargs["pk"], created_by=request.user).exists()
                 if obj:
                     return view_func(instance, request, *args, **kwargs)
diff --git a/apps/api/plane/app/permissions/page.py b/apps/api/plane/app/permissions/page.py
index bea878f4c..844ff4daf 100644
--- a/apps/api/plane/app/permissions/page.py
+++ b/apps/api/plane/app/permissions/page.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 from plane.db.models import ProjectMember, Page
 from plane.app.permissions import ROLE
 
diff --git a/apps/api/plane/app/permissions/project.py b/apps/api/plane/app/permissions/project.py
index a8c0f92a2..55550b27a 100644
--- a/apps/api/plane/app/permissions/project.py
+++ b/apps/api/plane/app/permissions/project.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Third Party imports
 from rest_framework.permissions import SAFE_METHODS, BasePermission
 
diff --git a/apps/api/plane/app/permissions/workspace.py b/apps/api/plane/app/permissions/workspace.py
index 8dc791c0c..ada16ec3b 100644
--- a/apps/api/plane/app/permissions/workspace.py
+++ b/apps/api/plane/app/permissions/workspace.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Third Party imports
 from rest_framework.permissions import BasePermission, SAFE_METHODS
 
diff --git a/apps/api/plane/app/serializers/__init__.py b/apps/api/plane/app/serializers/__init__.py
index 759f27ed6..e8a4007ea 100644
--- a/apps/api/plane/app/serializers/__init__.py
+++ b/apps/api/plane/app/serializers/__init__.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 from .base import BaseSerializer
 from .user import (
     UserSerializer,
@@ -52,7 +56,7 @@ from .issue import (
     IssueCreateSerializer,
     IssueActivitySerializer,
     IssueCommentSerializer,
-    IssueUserPropertySerializer,
+    ProjectUserPropertySerializer,
     IssueAssigneeSerializer,
     LabelSerializer,
     IssueSerializer,
diff --git a/apps/api/plane/app/serializers/analytic.py b/apps/api/plane/app/serializers/analytic.py
index 13b24d14d..ca86e569f 100644
--- a/apps/api/plane/app/serializers/analytic.py
+++ b/apps/api/plane/app/serializers/analytic.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 from .base import BaseSerializer
 from plane.db.models import AnalyticView
 from plane.utils.issue_filters import issue_filters
diff --git a/apps/api/plane/app/serializers/api.py b/apps/api/plane/app/serializers/api.py
index d14dcacff..05c6198f5 100644
--- a/apps/api/plane/app/serializers/api.py
+++ b/apps/api/plane/app/serializers/api.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 from .base import BaseSerializer
 from plane.db.models import APIToken, APIActivityLog
 from rest_framework import serializers
diff --git a/apps/api/plane/app/serializers/asset.py b/apps/api/plane/app/serializers/asset.py
index 560cd3538..1de596101 100644
--- a/apps/api/plane/app/serializers/asset.py
+++ b/apps/api/plane/app/serializers/asset.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 from .base import BaseSerializer
 from plane.db.models import FileAsset
 
diff --git a/apps/api/plane/app/serializers/base.py b/apps/api/plane/app/serializers/base.py
index 0d8c855c9..6457eec50 100644
--- a/apps/api/plane/app/serializers/base.py
+++ b/apps/api/plane/app/serializers/base.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 from rest_framework import serializers
 
 
diff --git a/apps/api/plane/app/serializers/cycle.py b/apps/api/plane/app/serializers/cycle.py
index 89a5efc06..afdc58116 100644
--- a/apps/api/plane/app/serializers/cycle.py
+++ b/apps/api/plane/app/serializers/cycle.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Third party imports
 from rest_framework import serializers
 
diff --git a/apps/api/plane/app/serializers/draft.py b/apps/api/plane/app/serializers/draft.py
index b017a03ba..da6eae6e2 100644
--- a/apps/api/plane/app/serializers/draft.py
+++ b/apps/api/plane/app/serializers/draft.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Django imports
 from django.utils import timezone
 
diff --git a/apps/api/plane/app/serializers/estimate.py b/apps/api/plane/app/serializers/estimate.py
index b2d65ef8c..d3343fbe8 100644
--- a/apps/api/plane/app/serializers/estimate.py
+++ b/apps/api/plane/app/serializers/estimate.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Module imports
 from .base import BaseSerializer
 
diff --git a/apps/api/plane/app/serializers/exporter.py b/apps/api/plane/app/serializers/exporter.py
index 5c78cfa69..f8efcfce1 100644
--- a/apps/api/plane/app/serializers/exporter.py
+++ b/apps/api/plane/app/serializers/exporter.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Module imports
 from .base import BaseSerializer
 from plane.db.models import ExporterHistory
diff --git a/apps/api/plane/app/serializers/favorite.py b/apps/api/plane/app/serializers/favorite.py
index 246461f8f..023c7d5d5 100644
--- a/apps/api/plane/app/serializers/favorite.py
+++ b/apps/api/plane/app/serializers/favorite.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 from rest_framework import serializers
 
 from plane.db.models import UserFavorite, Cycle, Module, Issue, IssueView, Page, Project
diff --git a/apps/api/plane/app/serializers/importer.py b/apps/api/plane/app/serializers/importer.py
index 8997f6392..2dc4e8e72 100644
--- a/apps/api/plane/app/serializers/importer.py
+++ b/apps/api/plane/app/serializers/importer.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Module imports
 from .base import BaseSerializer
 from .user import UserLiteSerializer
diff --git a/apps/api/plane/app/serializers/intake.py b/apps/api/plane/app/serializers/intake.py
index bc75a0ce5..4037dfe1c 100644
--- a/apps/api/plane/app/serializers/intake.py
+++ b/apps/api/plane/app/serializers/intake.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Third party frameworks
 from rest_framework import serializers
 
diff --git a/apps/api/plane/app/serializers/issue.py b/apps/api/plane/app/serializers/issue.py
index 5e3b93ab6..c5af9b9ff 100644
--- a/apps/api/plane/app/serializers/issue.py
+++ b/apps/api/plane/app/serializers/issue.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Django imports
 from django.utils import timezone
 from django.core.validators import URLValidator
@@ -18,7 +22,7 @@ from plane.db.models import (
     Issue,
     IssueActivity,
     IssueComment,
-    IssueUserProperty,
+    ProjectUserProperty,
     IssueAssignee,
     IssueSubscriber,
     IssueLabel,
@@ -53,7 +57,7 @@ class IssueFlatSerializer(BaseSerializer):
         fields = [
             "id",
             "name",
-            "description",
+            "description_json",
             "description_html",
             "priority",
             "start_date",
@@ -346,9 +350,9 @@ class IssueActivitySerializer(BaseSerializer):
         fields = "__all__"
 
 
-class IssueUserPropertySerializer(BaseSerializer):
+class ProjectUserPropertySerializer(BaseSerializer):
     class Meta:
-        model = IssueUserProperty
+        model = ProjectUserProperty
         fields = "__all__"
         read_only_fields = ["user", "workspace", "project"]
 
diff --git a/apps/api/plane/app/serializers/module.py b/apps/api/plane/app/serializers/module.py
index b5e2953cc..7d01284e3 100644
--- a/apps/api/plane/app/serializers/module.py
+++ b/apps/api/plane/app/serializers/module.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Third Party imports
 from rest_framework import serializers
 
diff --git a/apps/api/plane/app/serializers/notification.py b/apps/api/plane/app/serializers/notification.py
index 58007ec26..b4eb4eac5 100644
--- a/apps/api/plane/app/serializers/notification.py
+++ b/apps/api/plane/app/serializers/notification.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Module imports
 from .base import BaseSerializer
 from .user import UserLiteSerializer
diff --git a/apps/api/plane/app/serializers/page.py b/apps/api/plane/app/serializers/page.py
index 3aecbafda..a9251129c 100644
--- a/apps/api/plane/app/serializers/page.py
+++ b/apps/api/plane/app/serializers/page.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Third party imports
 from rest_framework import serializers
 import base64
@@ -58,7 +62,7 @@ class PageSerializer(BaseSerializer):
         labels = validated_data.pop("labels", None)
         project_id = self.context["project_id"]
         owned_by_id = self.context["owned_by_id"]
-        description = self.context["description"]
+        description_json = self.context["description_json"]
         description_binary = self.context["description_binary"]
         description_html = self.context["description_html"]
 
@@ -68,7 +72,7 @@ class PageSerializer(BaseSerializer):
         # Create the page
         page = Page.objects.create(
             **validated_data,
-            description=description,
+            description_json=description_json,
             description_binary=description_binary,
             description_html=description_html,
             owned_by_id=owned_by_id,
@@ -171,7 +175,7 @@ class PageBinaryUpdateSerializer(serializers.Serializer):
 
     description_binary = serializers.CharField(required=False, allow_blank=True)
     description_html = serializers.CharField(required=False, allow_blank=True)
-    description = serializers.JSONField(required=False, allow_null=True)
+    description_json = serializers.JSONField(required=False, allow_null=True)
 
     def validate_description_binary(self, value):
         """Validate the base64-encoded binary data"""
@@ -214,8 +218,8 @@ class PageBinaryUpdateSerializer(serializers.Serializer):
         if "description_html" in validated_data:
             instance.description_html = validated_data.get("description_html")
 
-        if "description" in validated_data:
-            instance.description = validated_data.get("description")
+        if "description_json" in validated_data:
+            instance.description_json = validated_data.get("description_json")
 
         instance.save()
         return instance
diff --git a/apps/api/plane/app/serializers/project.py b/apps/api/plane/app/serializers/project.py
index 01569cbc9..924c48fcf 100644
--- a/apps/api/plane/app/serializers/project.py
+++ b/apps/api/plane/app/serializers/project.py
@@ -1,8 +1,16 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Third party imports
 from rest_framework import serializers
 
+# Python imports
+import re
+
 # Module imports
 from .base import BaseSerializer, DynamicBaseSerializer
+from django.db.models import Max
 from plane.app.serializers.workspace import WorkspaceLiteSerializer
 from plane.app.serializers.user import UserLiteSerializer, UserAdminLiteSerializer
 from plane.db.models import (
@@ -12,6 +20,7 @@ from plane.db.models import (
     ProjectIdentifier,
     DeployBoard,
     ProjectPublicMember,
+    IssueSequence,
 )
 from plane.utils.content_validator import (
     validate_html_content,
@@ -31,6 +40,9 @@ class ProjectSerializer(BaseSerializer):
         project_id = self.instance.id if self.instance else None
         workspace_id = self.context["workspace_id"]
 
+        if re.match(Project.FORBIDDEN_IDENTIFIER_CHARS_PATTERN, name):
+            raise serializers.ValidationError(detail="PROJECT_NAME_CANNOT_CONTAIN_SPECIAL_CHARACTERS")
+
         project = Project.objects.filter(name=name, workspace_id=workspace_id)
 
         if project_id:
@@ -47,6 +59,9 @@ class ProjectSerializer(BaseSerializer):
         project_id = self.instance.id if self.instance else None
         workspace_id = self.context["workspace_id"]
 
+        if re.match(Project.FORBIDDEN_IDENTIFIER_CHARS_PATTERN, identifier):
+            raise serializers.ValidationError(detail="PROJECT_IDENTIFIER_CANNOT_CONTAIN_SPECIAL_CHARACTERS")
+
         project = Project.objects.filter(identifier=identifier, workspace_id=workspace_id)
 
         if project_id:
@@ -105,6 +120,7 @@ class ProjectListSerializer(DynamicBaseSerializer):
     members = serializers.SerializerMethodField()
     cover_image_url = serializers.CharField(read_only=True)
     inbox_view = serializers.BooleanField(read_only=True, source="intake_view")
+    next_work_item_sequence = serializers.SerializerMethodField()
 
     def get_members(self, obj):
         project_members = getattr(obj, "members_list", None)
@@ -113,6 +129,11 @@ class ProjectListSerializer(DynamicBaseSerializer):
             return [member.member_id for member in project_members if member.is_active and not member.member.is_bot]
         return []
 
+    def get_next_work_item_sequence(self, obj):
+        """Get the next sequence ID that will be assigned to a new issue"""
+        max_sequence = IssueSequence.objects.filter(project_id=obj.id).aggregate(max_seq=Max("sequence"))["max_seq"]
+        return (max_sequence + 1) if max_sequence else 1
+
     class Meta:
         model = Project
         fields = "__all__"
diff --git a/apps/api/plane/app/serializers/state.py b/apps/api/plane/app/serializers/state.py
index cb56cfbe9..0e333a80b 100644
--- a/apps/api/plane/app/serializers/state.py
+++ b/apps/api/plane/app/serializers/state.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Module imports
 from .base import BaseSerializer
 from rest_framework import serializers
diff --git a/apps/api/plane/app/serializers/user.py b/apps/api/plane/app/serializers/user.py
index 670667a85..aeef4ee28 100644
--- a/apps/api/plane/app/serializers/user.py
+++ b/apps/api/plane/app/serializers/user.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Third party imports
 from rest_framework import serializers
 
@@ -78,6 +82,7 @@ class UserMeSerializer(BaseSerializer):
             "is_password_autoset",
             "is_email_verified",
             "last_login_medium",
+            "last_login_time",
         ]
         read_only_fields = fields
 
diff --git a/apps/api/plane/app/serializers/view.py b/apps/api/plane/app/serializers/view.py
index bf7ff9727..72f72ff71 100644
--- a/apps/api/plane/app/serializers/view.py
+++ b/apps/api/plane/app/serializers/view.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Third party imports
 from rest_framework import serializers
 
diff --git a/apps/api/plane/app/serializers/webhook.py b/apps/api/plane/app/serializers/webhook.py
index 2aecebcde..74ebde892 100644
--- a/apps/api/plane/app/serializers/webhook.py
+++ b/apps/api/plane/app/serializers/webhook.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Python imports
 import socket
 import ipaddress
diff --git a/apps/api/plane/app/serializers/workspace.py b/apps/api/plane/app/serializers/workspace.py
index ba59f2429..608cdad85 100644
--- a/apps/api/plane/app/serializers/workspace.py
+++ b/apps/api/plane/app/serializers/workspace.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Third party imports
 from rest_framework import serializers
 
@@ -107,7 +111,7 @@ class WorkSpaceMemberInviteSerializer(BaseSerializer):
     invite_link = serializers.SerializerMethodField()
 
     def get_invite_link(self, obj):
-        return f"/workspace-invitations/?invitation_id={obj.id}&email={obj.email}&slug={obj.workspace.slug}"
+        return f"/workspace-invitations/?invitation_id={obj.id}&slug={obj.workspace.slug}&token={obj.token}"
 
     class Meta:
         model = WorkspaceMemberInvite
diff --git a/apps/api/plane/app/urls/__init__.py b/apps/api/plane/app/urls/__init__.py
index 3feab4cb5..3fa850b6a 100644
--- a/apps/api/plane/app/urls/__init__.py
+++ b/apps/api/plane/app/urls/__init__.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 from .analytic import urlpatterns as analytic_urls
 from .api import urlpatterns as api_urls
 from .asset import urlpatterns as asset_urls
diff --git a/apps/api/plane/app/urls/analytic.py b/apps/api/plane/app/urls/analytic.py
index df6ad2498..2b3194186 100644
--- a/apps/api/plane/app/urls/analytic.py
+++ b/apps/api/plane/app/urls/analytic.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 from django.urls import path
 
 
diff --git a/apps/api/plane/app/urls/api.py b/apps/api/plane/app/urls/api.py
index c74aeddbf..145cfdd65 100644
--- a/apps/api/plane/app/urls/api.py
+++ b/apps/api/plane/app/urls/api.py
@@ -1,5 +1,9 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 from django.urls import path
-from plane.app.views import ApiTokenEndpoint, ServiceApiTokenEndpoint
+from plane.app.views import ApiTokenEndpoint
 
 urlpatterns = [
     # API Tokens
@@ -13,10 +17,5 @@ urlpatterns = [
         ApiTokenEndpoint.as_view(),
         name="api-tokens-details",
     ),
-    path(
-        "workspaces/<str:slug>/service-api-tokens/",
-        ServiceApiTokenEndpoint.as_view(),
-        name="service-api-tokens",
-    ),
     ## End API Tokens
 ]
diff --git a/apps/api/plane/app/urls/asset.py b/apps/api/plane/app/urls/asset.py
index 4b7e2b220..fd8d20073 100644
--- a/apps/api/plane/app/urls/asset.py
+++ b/apps/api/plane/app/urls/asset.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 from django.urls import path
 
 
diff --git a/apps/api/plane/app/urls/cycle.py b/apps/api/plane/app/urls/cycle.py
index f188d0872..2560a3edb 100644
--- a/apps/api/plane/app/urls/cycle.py
+++ b/apps/api/plane/app/urls/cycle.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 from django.urls import path
 
 
diff --git a/apps/api/plane/app/urls/estimate.py b/apps/api/plane/app/urls/estimate.py
index c77a5b6b6..4378164f1 100644
--- a/apps/api/plane/app/urls/estimate.py
+++ b/apps/api/plane/app/urls/estimate.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 from django.urls import path
 
 
diff --git a/apps/api/plane/app/urls/exporter.py b/apps/api/plane/app/urls/exporter.py
index 0bcb4621b..c7acf5343 100644
--- a/apps/api/plane/app/urls/exporter.py
+++ b/apps/api/plane/app/urls/exporter.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 from django.urls import path
 
 from plane.app.views import ExportIssuesEndpoint
@@ -9,4 +13,4 @@ urlpatterns = [
         ExportIssuesEndpoint.as_view(),
         name="export-issues",
     ),
-]
\ No newline at end of file
+]
diff --git a/apps/api/plane/app/urls/external.py b/apps/api/plane/app/urls/external.py
index 4972962d8..1255ac08a 100644
--- a/apps/api/plane/app/urls/external.py
+++ b/apps/api/plane/app/urls/external.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 from django.urls import path
 
 
diff --git a/apps/api/plane/app/urls/intake.py b/apps/api/plane/app/urls/intake.py
index dd1efc872..970e763d6 100644
--- a/apps/api/plane/app/urls/intake.py
+++ b/apps/api/plane/app/urls/intake.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 from django.urls import path
 
 
diff --git a/apps/api/plane/app/urls/issue.py b/apps/api/plane/app/urls/issue.py
index 1d809e248..436d22770 100644
--- a/apps/api/plane/app/urls/issue.py
+++ b/apps/api/plane/app/urls/issue.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 from django.urls import path
 
 from plane.app.views import (
@@ -14,7 +18,7 @@ from plane.app.views import (
     IssueReactionViewSet,
     IssueRelationViewSet,
     IssueSubscriberViewSet,
-    IssueUserDisplayPropertyEndpoint,
+    ProjectUserDisplayPropertyEndpoint,
     IssueViewSet,
     LabelViewSet,
     BulkArchiveIssuesEndpoint,
@@ -208,13 +212,13 @@ urlpatterns = [
         name="project-issue-comment-reactions",
     ),
     ## End Comment Reactions
-    ## IssueUserProperty
+    ## ProjectUserProperty
     path(
         "workspaces/<str:slug>/projects/<uuid:project_id>/user-properties/",
-        IssueUserDisplayPropertyEndpoint.as_view(),
+        ProjectUserDisplayPropertyEndpoint.as_view(),
         name="project-issue-display-properties",
     ),
-    ## IssueUserProperty End
+    ## ProjectUserProperty End
     ## Issue Archives
     path(
         "workspaces/<str:slug>/projects/<uuid:project_id>/archived-issues/",
diff --git a/apps/api/plane/app/urls/module.py b/apps/api/plane/app/urls/module.py
index 75cbb14d6..255f8211c 100644
--- a/apps/api/plane/app/urls/module.py
+++ b/apps/api/plane/app/urls/module.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 from django.urls import path
 
 
diff --git a/apps/api/plane/app/urls/notification.py b/apps/api/plane/app/urls/notification.py
index 0c992d49e..cd2b3c5a4 100644
--- a/apps/api/plane/app/urls/notification.py
+++ b/apps/api/plane/app/urls/notification.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 from django.urls import path
 
 
diff --git a/apps/api/plane/app/urls/page.py b/apps/api/plane/app/urls/page.py
index 8cac22a2f..dd4395c18 100644
--- a/apps/api/plane/app/urls/page.py
+++ b/apps/api/plane/app/urls/page.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 from django.urls import path
 
 
diff --git a/apps/api/plane/app/urls/project.py b/apps/api/plane/app/urls/project.py
index a6dd8d8a8..ee850af1d 100644
--- a/apps/api/plane/app/urls/project.py
+++ b/apps/api/plane/app/urls/project.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 from django.urls import path
 
 from plane.app.views import (
diff --git a/apps/api/plane/app/urls/search.py b/apps/api/plane/app/urls/search.py
index 0bbbd9cf7..9d94aa273 100644
--- a/apps/api/plane/app/urls/search.py
+++ b/apps/api/plane/app/urls/search.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 from django.urls import path
 
 
diff --git a/apps/api/plane/app/urls/state.py b/apps/api/plane/app/urls/state.py
index b6135ca95..902b583cb 100644
--- a/apps/api/plane/app/urls/state.py
+++ b/apps/api/plane/app/urls/state.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 from django.urls import path
 
 
diff --git a/apps/api/plane/app/urls/timezone.py b/apps/api/plane/app/urls/timezone.py
index ff14d029f..9fc17f79a 100644
--- a/apps/api/plane/app/urls/timezone.py
+++ b/apps/api/plane/app/urls/timezone.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 from django.urls import path
 
 from plane.app.views import TimezoneEndpoint
diff --git a/apps/api/plane/app/urls/user.py b/apps/api/plane/app/urls/user.py
index 373d4a70d..bc110a28d 100644
--- a/apps/api/plane/app/urls/user.py
+++ b/apps/api/plane/app/urls/user.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 from django.urls import path
 
 from plane.app.views import (
diff --git a/apps/api/plane/app/urls/views.py b/apps/api/plane/app/urls/views.py
index 063e39c3d..f3e4ee1de 100644
--- a/apps/api/plane/app/urls/views.py
+++ b/apps/api/plane/app/urls/views.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 from django.urls import path
 
 
diff --git a/apps/api/plane/app/urls/webhook.py b/apps/api/plane/app/urls/webhook.py
index e21ec7261..22ac4bc6f 100644
--- a/apps/api/plane/app/urls/webhook.py
+++ b/apps/api/plane/app/urls/webhook.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 from django.urls import path
 
 from plane.app.views import (
diff --git a/apps/api/plane/app/urls/workspace.py b/apps/api/plane/app/urls/workspace.py
index 5f781efa7..d79d5a745 100644
--- a/apps/api/plane/app/urls/workspace.py
+++ b/apps/api/plane/app/urls/workspace.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 from django.urls import path
 
 
diff --git a/apps/api/plane/app/views/__init__.py b/apps/api/plane/app/views/__init__.py
index 7a0e5cb3a..84f7872ec 100644
--- a/apps/api/plane/app/views/__init__.py
+++ b/apps/api/plane/app/views/__init__.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 from .project.base import (
     ProjectViewSet,
     ProjectIdentifierEndpoint,
@@ -114,7 +118,7 @@ from .asset.v2 import (
 from .issue.base import (
     IssueListEndpoint,
     IssueViewSet,
-    IssueUserDisplayPropertyEndpoint,
+    ProjectUserDisplayPropertyEndpoint,
     BulkDeleteIssuesEndpoint,
     DeletedIssuesListViewSet,
     IssuePaginatedViewSet,
@@ -161,7 +165,7 @@ from .module.issue import ModuleIssueViewSet
 
 from .module.archive import ModuleArchiveUnarchiveEndpoint
 
-from .api import ApiTokenEndpoint, ServiceApiTokenEndpoint
+from .api import ApiTokenEndpoint
 
 from .page.base import (
     PageViewSet,
diff --git a/apps/api/plane/app/views/analytic/advance.py b/apps/api/plane/app/views/analytic/advance.py
index 1a5b1b34c..5ba9a439b 100644
--- a/apps/api/plane/app/views/analytic/advance.py
+++ b/apps/api/plane/app/views/analytic/advance.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 from rest_framework.response import Response
 from rest_framework import status
 from typing import Dict, List, Any
diff --git a/apps/api/plane/app/views/analytic/base.py b/apps/api/plane/app/views/analytic/base.py
index 6e9311a18..2f3f8b573 100644
--- a/apps/api/plane/app/views/analytic/base.py
+++ b/apps/api/plane/app/views/analytic/base.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Django imports
 from django.db.models import Count, F, Sum, Q
 from django.db.models.functions import ExtractMonth
diff --git a/apps/api/plane/app/views/analytic/project_analytics.py b/apps/api/plane/app/views/analytic/project_analytics.py
index 2529900b0..c8e896716 100644
--- a/apps/api/plane/app/views/analytic/project_analytics.py
+++ b/apps/api/plane/app/views/analytic/project_analytics.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 from rest_framework.response import Response
 from rest_framework import status
 from typing import Dict, Any
diff --git a/apps/api/plane/app/views/api.py b/apps/api/plane/app/views/api.py
index 419859902..f3163c331 100644
--- a/apps/api/plane/app/views/api.py
+++ b/apps/api/plane/app/views/api.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Python import
 from uuid import uuid4
 from typing import Optional
@@ -9,9 +13,8 @@ from rest_framework import status
 
 # Module import
 from .base import BaseAPIView
-from plane.db.models import APIToken, Workspace
+from plane.db.models import APIToken
 from plane.app.serializers import APITokenSerializer, APITokenReadSerializer
-from plane.app.permissions import WorkspaceEntityPermission
 
 
 class ApiTokenEndpoint(BaseAPIView):
@@ -57,28 +60,3 @@ class ApiTokenEndpoint(BaseAPIView):
             serializer.save()
             return Response(serializer.data, status=status.HTTP_200_OK)
         return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
-
-
-class ServiceApiTokenEndpoint(BaseAPIView):
-    permission_classes = [WorkspaceEntityPermission]
-
-    def post(self, request: Request, slug: str) -> Response:
-        workspace = Workspace.objects.get(slug=slug)
-
-        api_token = APIToken.objects.filter(workspace=workspace, is_service=True).first()
-
-        if api_token:
-            return Response({"token": str(api_token.token)}, status=status.HTTP_200_OK)
-        else:
-            # Check the user type
-            user_type = 1 if request.user.is_bot else 0
-
-            api_token = APIToken.objects.create(
-                label=str(uuid4().hex),
-                description="Service Token",
-                user=request.user,
-                workspace=workspace,
-                user_type=user_type,
-                is_service=True,
-            )
-            return Response({"token": str(api_token.token)}, status=status.HTTP_201_CREATED)
diff --git a/apps/api/plane/app/views/asset/base.py b/apps/api/plane/app/views/asset/base.py
index 522d4af75..5b55a76a6 100644
--- a/apps/api/plane/app/views/asset/base.py
+++ b/apps/api/plane/app/views/asset/base.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Third party imports
 from rest_framework import status
 from rest_framework.response import Response
diff --git a/apps/api/plane/app/views/asset/v2.py b/apps/api/plane/app/views/asset/v2.py
index 3677537bb..62c5f84a2 100644
--- a/apps/api/plane/app/views/asset/v2.py
+++ b/apps/api/plane/app/views/asset/v2.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Python imports
 import uuid
 
@@ -45,9 +49,7 @@ class UserAssetsV2Endpoint(BaseAPIView):
             # Save the new avatar
             user.avatar_asset_id = asset_id
             user.save()
-            invalidate_cache_directly(
-                path="/api/users/me/", url_params=False, user=True, request=request
-            )
+            invalidate_cache_directly(path="/api/users/me/", url_params=False, user=True, request=request)
             invalidate_cache_directly(
                 path="/api/users/me/settings/",
                 url_params=False,
@@ -65,9 +67,7 @@ class UserAssetsV2Endpoint(BaseAPIView):
             # Save the new cover image
             user.cover_image_asset_id = asset_id
             user.save()
-            invalidate_cache_directly(
-                path="/api/users/me/", url_params=False, user=True, request=request
-            )
+            invalidate_cache_directly(path="/api/users/me/", url_params=False, user=True, request=request)
             invalidate_cache_directly(
                 path="/api/users/me/settings/",
                 url_params=False,
@@ -83,9 +83,7 @@ class UserAssetsV2Endpoint(BaseAPIView):
             user = User.objects.get(id=asset.user_id)
             user.avatar_asset_id = None
             user.save()
-            invalidate_cache_directly(
-                path="/api/users/me/", url_params=False, user=True, request=request
-            )
+            invalidate_cache_directly(path="/api/users/me/", url_params=False, user=True, request=request)
             invalidate_cache_directly(
                 path="/api/users/me/settings/",
                 url_params=False,
@@ -98,9 +96,7 @@ class UserAssetsV2Endpoint(BaseAPIView):
             user = User.objects.get(id=asset.user_id)
             user.cover_image_asset_id = None
             user.save()
-            invalidate_cache_directly(
-                path="/api/users/me/", url_params=False, user=True, request=request
-            )
+            invalidate_cache_directly(path="/api/users/me/", url_params=False, user=True, request=request)
             invalidate_cache_directly(
                 path="/api/users/me/settings/",
                 url_params=False,
@@ -160,9 +156,7 @@ class UserAssetsV2Endpoint(BaseAPIView):
         # Get the presigned URL
         storage = S3Storage(request=request)
         # Generate a presigned URL to share an S3 object
-        presigned_url = storage.generate_presigned_post(
-            object_name=asset_key, file_type=type, file_size=size_limit
-        )
+        presigned_url = storage.generate_presigned_post(object_name=asset_key, file_type=type, file_size=size_limit)
         # Return the presigned URL
         return Response(
             {
@@ -199,9 +193,7 @@ class UserAssetsV2Endpoint(BaseAPIView):
         asset.is_deleted = True
         asset.deleted_at = timezone.now()
         # get the entity and save the asset id for the request field
-        self.entity_asset_delete(
-            entity_type=asset.entity_type, asset=asset, request=request
-        )
+        self.entity_asset_delete(entity_type=asset.entity_type, asset=asset, request=request)
         asset.save(update_fields=["is_deleted", "deleted_at"])
         return Response(status=status.HTTP_204_NO_CONTENT)
 
@@ -265,18 +257,14 @@ class WorkspaceFileAssetEndpoint(BaseAPIView):
             workspace.logo = ""
             workspace.logo_asset_id = asset_id
             workspace.save()
-            invalidate_cache_directly(
-                path="/api/workspaces/", url_params=False, user=False, request=request
-            )
+            invalidate_cache_directly(path="/api/workspaces/", url_params=False, user=False, request=request)
             invalidate_cache_directly(
                 path="/api/users/me/workspaces/",
                 url_params=False,
                 user=True,
                 request=request,
             )
-            invalidate_cache_directly(
-                path="/api/instances/", url_params=False, user=False, request=request
-            )
+            invalidate_cache_directly(path="/api/instances/", url_params=False, user=False, request=request)
             return
 
         # Project Cover
@@ -303,18 +291,14 @@ class WorkspaceFileAssetEndpoint(BaseAPIView):
                 return
             workspace.logo_asset_id = None
             workspace.save()
-            invalidate_cache_directly(
-                path="/api/workspaces/", url_params=False, user=False, request=request
-            )
+            invalidate_cache_directly(path="/api/workspaces/", url_params=False, user=False, request=request)
             invalidate_cache_directly(
                 path="/api/users/me/workspaces/",
                 url_params=False,
                 user=True,
                 request=request,
             )
-            invalidate_cache_directly(
-                path="/api/instances/", url_params=False, user=False, request=request
-            )
+            invalidate_cache_directly(path="/api/instances/", url_params=False, user=False, request=request)
             return
         # Project Cover
         elif entity_type == FileAsset.EntityTypeContext.PROJECT_COVER:
@@ -375,17 +359,13 @@ class WorkspaceFileAssetEndpoint(BaseAPIView):
             workspace=workspace,
             created_by=request.user,
             entity_type=entity_type,
-            **self.get_entity_id_field(
-                entity_type=entity_type, entity_id=entity_identifier
-            ),
+            **self.get_entity_id_field(entity_type=entity_type, entity_id=entity_identifier),
         )
 
         # Get the presigned URL
         storage = S3Storage(request=request)
         # Generate a presigned URL to share an S3 object
-        presigned_url = storage.generate_presigned_post(
-            object_name=asset_key, file_type=type, file_size=size_limit
-        )
+        presigned_url = storage.generate_presigned_post(object_name=asset_key, file_type=type, file_size=size_limit)
         # Return the presigned URL
         return Response(
             {
@@ -422,9 +402,7 @@ class WorkspaceFileAssetEndpoint(BaseAPIView):
         asset.is_deleted = True
         asset.deleted_at = timezone.now()
         # get the entity and save the asset id for the request field
-        self.entity_asset_delete(
-            entity_type=asset.entity_type, asset=asset, request=request
-        )
+        self.entity_asset_delete(entity_type=asset.entity_type, asset=asset, request=request)
         asset.save(update_fields=["is_deleted", "deleted_at"])
         return Response(status=status.HTTP_204_NO_CONTENT)
 
@@ -587,9 +565,7 @@ class ProjectAssetEndpoint(BaseAPIView):
         # Get the presigned URL
         storage = S3Storage(request=request)
         # Generate a presigned URL to share an S3 object
-        presigned_url = storage.generate_presigned_post(
-            object_name=asset_key, file_type=type, file_size=size_limit
-        )
+        presigned_url = storage.generate_presigned_post(object_name=asset_key, file_type=type, file_size=size_limit)
         # Return the presigned URL
         return Response(
             {
@@ -619,9 +595,7 @@ class ProjectAssetEndpoint(BaseAPIView):
     @allow_permission([ROLE.ADMIN, ROLE.MEMBER, ROLE.GUEST])
     def delete(self, request, slug, project_id, pk):
         # Get the asset
-        asset = FileAsset.objects.get(
-            id=pk, workspace__slug=slug, project_id=project_id
-        )
+        asset = FileAsset.objects.get(id=pk, workspace__slug=slug, project_id=project_id)
         # Check deleted assets
         asset.is_deleted = True
         asset.deleted_at = timezone.now()
@@ -632,9 +606,7 @@ class ProjectAssetEndpoint(BaseAPIView):
     @allow_permission([ROLE.ADMIN, ROLE.MEMBER, ROLE.GUEST])
     def get(self, request, slug, project_id, pk):
         # get the asset id
-        asset = FileAsset.objects.get(
-            workspace__slug=slug, project_id=project_id, pk=pk
-        )
+        asset = FileAsset.objects.get(workspace__slug=slug, project_id=project_id, pk=pk)
 
         # Check if the asset is uploaded
         if not asset.is_uploaded:
@@ -667,9 +639,7 @@ class ProjectBulkAssetEndpoint(BaseAPIView):
 
         # Check if the asset ids are provided
         if not asset_ids:
-            return Response(
-                {"error": "No asset ids provided."}, status=status.HTTP_400_BAD_REQUEST
-            )
+            return Response({"error": "No asset ids provided."}, status=status.HTTP_400_BAD_REQUEST)
 
         # get the asset id
         assets = FileAsset.objects.filter(id__in=asset_ids, workspace__slug=slug)
@@ -723,14 +693,11 @@ class AssetCheckEndpoint(BaseAPIView):
 
     @allow_permission([ROLE.ADMIN, ROLE.MEMBER, ROLE.GUEST], level="WORKSPACE")
     def get(self, request, slug, asset_id):
-        asset = FileAsset.all_objects.filter(
-            id=asset_id, workspace__slug=slug, deleted_at__isnull=True
-        ).exists()
+        asset = FileAsset.all_objects.filter(id=asset_id, workspace__slug=slug, deleted_at__isnull=True).exists()
         return Response({"exists": asset}, status=status.HTTP_200_OK)
 
 
 class DuplicateAssetEndpoint(BaseAPIView):
-
     throttle_classes = [AssetRateThrottle]
 
     def get_entity_id_field(self, entity_type, entity_id):
@@ -766,17 +733,13 @@ class DuplicateAssetEndpoint(BaseAPIView):
 
         return {}
 
-    @allow_permission([ROLE.ADMIN, ROLE.MEMBER], level="WORKSPACE")
+    @allow_permission([ROLE.ADMIN, ROLE.MEMBER, ROLE.GUEST], level="WORKSPACE")
     def post(self, request, slug, asset_id):
         project_id = request.data.get("project_id", None)
         entity_id = request.data.get("entity_id", None)
         entity_type = request.data.get("entity_type", None)
 
-
-        if (
-            not entity_type
-            or entity_type not in FileAsset.EntityTypeContext.values
-        ):
+        if not entity_type or entity_type not in FileAsset.EntityTypeContext.values:
             return Response(
                 {"error": "Invalid entity type or entity id"},
                 status=status.HTTP_400_BAD_REQUEST,
@@ -786,23 +749,15 @@ class DuplicateAssetEndpoint(BaseAPIView):
         if project_id:
             # check if project exists in the workspace
             if not Project.objects.filter(id=project_id, workspace=workspace).exists():
-                return Response(
-                    {"error": "Project not found"}, status=status.HTTP_404_NOT_FOUND
-                )
+                return Response({"error": "Project not found"}, status=status.HTTP_404_NOT_FOUND)
 
         storage = S3Storage(request=request)
-        original_asset = FileAsset.objects.filter(
-            workspace=workspace, id=asset_id, is_uploaded=True
-        ).first()
+        original_asset = FileAsset.objects.filter(id=asset_id, is_uploaded=True).first()
 
         if not original_asset:
-            return Response(
-                {"error": "Asset not found"}, status=status.HTTP_404_NOT_FOUND
-            )
+            return Response({"error": "Asset not found"}, status=status.HTTP_404_NOT_FOUND)
 
-        destination_key = (
-            f"{workspace.id}/{uuid.uuid4().hex}-{original_asset.attributes.get('name')}"
-        )
+        destination_key = f"{workspace.id}/{uuid.uuid4().hex}-{original_asset.attributes.get('name')}"
         duplicated_asset = FileAsset.objects.create(
             attributes={
                 "name": original_asset.attributes.get("name"),
@@ -822,9 +777,7 @@ class DuplicateAssetEndpoint(BaseAPIView):
         # Update the is_uploaded field for all newly created assets
         FileAsset.objects.filter(id=duplicated_asset.id).update(is_uploaded=True)
 
-        return Response(
-            {"asset_id": str(duplicated_asset.id)}, status=status.HTTP_200_OK
-        )
+        return Response({"asset_id": str(duplicated_asset.id)}, status=status.HTTP_200_OK)
 
 
 class WorkspaceAssetDownloadEndpoint(BaseAPIView):
diff --git a/apps/api/plane/app/views/base.py b/apps/api/plane/app/views/base.py
index 0323302c5..db5469de5 100644
--- a/apps/api/plane/app/views/base.py
+++ b/apps/api/plane/app/views/base.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Python imports
 import traceback
 
diff --git a/apps/api/plane/app/views/cycle/archive.py b/apps/api/plane/app/views/cycle/archive.py
index a2f89d53f..3738b3367 100644
--- a/apps/api/plane/app/views/cycle/archive.py
+++ b/apps/api/plane/app/views/cycle/archive.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Django imports
 from django.contrib.postgres.aggregates import ArrayAgg
 from django.contrib.postgres.fields import ArrayField
diff --git a/apps/api/plane/app/views/cycle/base.py b/apps/api/plane/app/views/cycle/base.py
index 712d71754..30a5732ce 100644
--- a/apps/api/plane/app/views/cycle/base.py
+++ b/apps/api/plane/app/views/cycle/base.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Python imports
 import json
 import pytz
@@ -97,9 +101,7 @@ class CycleViewSet(BaseViewSet):
             .prefetch_related(
                 Prefetch(
                     "issue_cycle__issue__assignees",
-                    queryset=User.objects.only(
-                        "avatar_asset", "first_name", "id"
-                    ).distinct(),
+                    queryset=User.objects.only("avatar_asset", "first_name", "id").distinct(),
                 )
             )
             .prefetch_related(
@@ -150,8 +152,7 @@ class CycleViewSet(BaseViewSet):
             .annotate(
                 status=Case(
                     When(
-                        Q(start_date__lte=current_time_in_utc)
-                        & Q(end_date__gte=current_time_in_utc),
+                        Q(start_date__lte=current_time_in_utc) & Q(end_date__gte=current_time_in_utc),
                         then=Value("CURRENT"),
                     ),
                     When(start_date__gt=current_time_in_utc, then=Value("UPCOMING")),
@@ -170,11 +171,7 @@ class CycleViewSet(BaseViewSet):
                         "issue_cycle__issue__assignees__id",
                         distinct=True,
                         filter=~Q(issue_cycle__issue__assignees__id__isnull=True)
-                        & (
-                            Q(
-                                issue_cycle__issue__issue_assignee__deleted_at__isnull=True
-                            )
-                        ),
+                        & (Q(issue_cycle__issue__issue_assignee__deleted_at__isnull=True)),
                     ),
                     Value([], output_field=ArrayField(UUIDField())),
                 )
@@ -205,9 +202,7 @@ class CycleViewSet(BaseViewSet):
 
         # Current Cycle
         if cycle_view == "current":
-            queryset = queryset.filter(
-                start_date__lte=current_time_in_utc, end_date__gte=current_time_in_utc
-            )
+            queryset = queryset.filter(start_date__lte=current_time_in_utc, end_date__gte=current_time_in_utc)
 
             data = queryset.values(
                 # necessary fields
@@ -274,16 +269,10 @@ class CycleViewSet(BaseViewSet):
 
     @allow_permission([ROLE.ADMIN, ROLE.MEMBER])
     def create(self, request, slug, project_id):
-        if (
-            request.data.get("start_date", None) is None
-            and request.data.get("end_date", None) is None
-        ) or (
-            request.data.get("start_date", None) is not None
-            and request.data.get("end_date", None) is not None
+        if (request.data.get("start_date", None) is None and request.data.get("end_date", None) is None) or (
+            request.data.get("start_date", None) is not None and request.data.get("end_date", None) is not None
         ):
-            serializer = CycleWriteSerializer(
-                data=request.data, context={"project_id": project_id}
-            )
+            serializer = CycleWriteSerializer(data=request.data, context={"project_id": project_id})
             if serializer.is_valid():
                 serializer.save(project_id=project_id, owned_by=request.user)
                 cycle = (
@@ -323,9 +312,7 @@ class CycleViewSet(BaseViewSet):
                 project_timezone = project.timezone
 
                 datetime_fields = ["start_date", "end_date"]
-                cycle = user_timezone_converter(
-                    cycle, datetime_fields, project_timezone
-                )
+                cycle = user_timezone_converter(cycle, datetime_fields, project_timezone)
 
                 # Send the model activity
                 model_activity.delay(
@@ -341,17 +328,13 @@ class CycleViewSet(BaseViewSet):
             return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
         else:
             return Response(
-                {
-                    "error": "Both start date and end date are either required or are to be null"
-                },
+                {"error": "Both start date and end date are either required or are to be null"},
                 status=status.HTTP_400_BAD_REQUEST,
             )
 
     @allow_permission([ROLE.ADMIN, ROLE.MEMBER])
     def partial_update(self, request, slug, project_id, pk):
-        queryset = self.get_queryset().filter(
-            workspace__slug=slug, project_id=project_id, pk=pk
-        )
+        queryset = self.get_queryset().filter(workspace__slug=slug, project_id=project_id, pk=pk)
         cycle = queryset.first()
         if cycle.archived_at:
             return Response(
@@ -359,29 +342,21 @@ class CycleViewSet(BaseViewSet):
                 status=status.HTTP_400_BAD_REQUEST,
             )
 
-        current_instance = json.dumps(
-            CycleSerializer(cycle).data, cls=DjangoJSONEncoder
-        )
+        current_instance = json.dumps(CycleSerializer(cycle).data, cls=DjangoJSONEncoder)
 
         request_data = request.data
 
         if cycle.end_date is not None and cycle.end_date < timezone.now():
             if "sort_order" in request_data:
                 # Can only change sort order for a completed cycle``
-                request_data = {
-                    "sort_order": request_data.get("sort_order", cycle.sort_order)
-                }
+                request_data = {"sort_order": request_data.get("sort_order", cycle.sort_order)}
             else:
                 return Response(
-                    {
-                        "error": "The Cycle has already been completed so it cannot be edited"
-                    },
+                    {"error": "The Cycle has already been completed so it cannot be edited"},
                     status=status.HTTP_400_BAD_REQUEST,
                 )
 
-        serializer = CycleWriteSerializer(
-            cycle, data=request.data, partial=True, context={"project_id": project_id}
-        )
+        serializer = CycleWriteSerializer(cycle, data=request.data, partial=True, context={"project_id": project_id})
         if serializer.is_valid():
             serializer.save()
             cycle = queryset.values(
@@ -481,9 +456,7 @@ class CycleViewSet(BaseViewSet):
         )
 
         if data is None:
-            return Response(
-                {"error": "Cycle not found"}, status=status.HTTP_404_NOT_FOUND
-            )
+            return Response({"error": "Cycle not found"}, status=status.HTTP_404_NOT_FOUND)
 
         queryset = queryset.first()
         # Fetch the project timezone
@@ -505,11 +478,7 @@ class CycleViewSet(BaseViewSet):
     def destroy(self, request, slug, project_id, pk):
         cycle = Cycle.objects.get(workspace__slug=slug, project_id=project_id, pk=pk)
 
-        cycle_issues = list(
-            CycleIssue.objects.filter(cycle_id=self.kwargs.get("pk")).values_list(
-                "issue", flat=True
-            )
-        )
+        cycle_issues = list(CycleIssue.objects.filter(cycle_id=self.kwargs.get("pk")).values_list("issue", flat=True))
 
         issue_activity.delay(
             type="cycle.activity.deleted",
@@ -560,9 +529,7 @@ class CycleDateCheckEndpoint(BaseAPIView):
                 status=status.HTTP_400_BAD_REQUEST,
             )
 
-        start_date = convert_to_utc(
-            date=str(start_date), project_id=project_id, is_start_date=True
-        )
+        start_date = convert_to_utc(date=str(start_date), project_id=project_id, is_start_date=True)
         end_date = convert_to_utc(
             date=str(end_date),
             project_id=project_id,
@@ -666,12 +633,8 @@ class CycleUserPropertiesEndpoint(BaseAPIView):
         )
 
         cycle_properties.filters = request.data.get("filters", cycle_properties.filters)
-        cycle_properties.rich_filters = request.data.get(
-            "rich_filters", cycle_properties.rich_filters
-        )
-        cycle_properties.display_filters = request.data.get(
-            "display_filters", cycle_properties.display_filters
-        )
+        cycle_properties.rich_filters = request.data.get("rich_filters", cycle_properties.rich_filters)
+        cycle_properties.display_filters = request.data.get("display_filters", cycle_properties.display_filters)
         cycle_properties.display_properties = request.data.get(
             "display_properties", cycle_properties.display_properties
         )
@@ -695,13 +658,9 @@ class CycleUserPropertiesEndpoint(BaseAPIView):
 class CycleProgressEndpoint(BaseAPIView):
     @allow_permission([ROLE.ADMIN, ROLE.MEMBER, ROLE.GUEST])
     def get(self, request, slug, project_id, cycle_id):
-        cycle = Cycle.objects.filter(
-            workspace__slug=slug, project_id=project_id, id=cycle_id
-        ).first()
+        cycle = Cycle.objects.filter(workspace__slug=slug, project_id=project_id, id=cycle_id).first()
         if not cycle:
-            return Response(
-                {"error": "Cycle not found"}, status=status.HTTP_404_NOT_FOUND
-            )
+            return Response({"error": "Cycle not found"}, status=status.HTTP_404_NOT_FOUND)
         aggregate_estimates = (
             Issue.issue_objects.filter(
                 estimate_point__estimate__type="points",
@@ -747,9 +706,7 @@ class CycleProgressEndpoint(BaseAPIView):
                         output_field=FloatField(),
                     )
                 ),
-                total_estimate_points=Sum(
-                    "value_as_float", default=Value(0), output_field=FloatField()
-                ),
+                total_estimate_points=Sum("value_as_float", default=Value(0), output_field=FloatField()),
             )
         )
         if cycle.progress_snapshot:
@@ -809,22 +766,11 @@ class CycleProgressEndpoint(BaseAPIView):
 
         return Response(
             {
-                "backlog_estimate_points": aggregate_estimates["backlog_estimate_point"]
-                or 0,
-                "unstarted_estimate_points": aggregate_estimates[
-                    "unstarted_estimate_point"
-                ]
-                or 0,
-                "started_estimate_points": aggregate_estimates["started_estimate_point"]
-                or 0,
-                "cancelled_estimate_points": aggregate_estimates[
-                    "cancelled_estimate_point"
-                ]
-                or 0,
-                "completed_estimate_points": aggregate_estimates[
-                    "completed_estimate_points"
-                ]
-                or 0,
+                "backlog_estimate_points": aggregate_estimates["backlog_estimate_point"] or 0,
+                "unstarted_estimate_points": aggregate_estimates["unstarted_estimate_point"] or 0,
+                "started_estimate_points": aggregate_estimates["started_estimate_point"] or 0,
+                "cancelled_estimate_points": aggregate_estimates["cancelled_estimate_point"] or 0,
+                "completed_estimate_points": aggregate_estimates["completed_estimate_points"] or 0,
                 "total_estimate_points": aggregate_estimates["total_estimate_points"],
                 "backlog_issues": backlog_issues,
                 "total_issues": total_issues,
@@ -842,9 +788,7 @@ class CycleAnalyticsEndpoint(BaseAPIView):
     def get(self, request, slug, project_id, cycle_id):
         analytic_type = request.GET.get("type", "issues")
         cycle = (
-            Cycle.objects.filter(
-                workspace__slug=slug, project_id=project_id, id=cycle_id
-            )
+            Cycle.objects.filter(workspace__slug=slug, project_id=project_id, id=cycle_id)
             .annotate(
                 total_issues=Count(
                     "issue_cycle__issue__id",
@@ -927,9 +871,7 @@ class CycleAnalyticsEndpoint(BaseAPIView):
                     )
                 )
                 .values("display_name", "assignee_id", "avatar_url")
-                .annotate(
-                    total_estimates=Sum(Cast("estimate_point__value", FloatField()))
-                )
+                .annotate(total_estimates=Sum(Cast("estimate_point__value", FloatField())))
                 .annotate(
                     completed_estimates=Sum(
                         Cast("estimate_point__value", FloatField()),
@@ -964,9 +906,7 @@ class CycleAnalyticsEndpoint(BaseAPIView):
                 .annotate(color=F("labels__color"))
                 .annotate(label_id=F("labels__id"))
                 .values("label_name", "color", "label_id")
-                .annotate(
-                    total_estimates=Sum(Cast("estimate_point__value", FloatField()))
-                )
+                .annotate(total_estimates=Sum(Cast("estimate_point__value", FloatField())))
                 .annotate(
                     completed_estimates=Sum(
                         Cast("estimate_point__value", FloatField()),
@@ -1068,11 +1008,7 @@ class CycleAnalyticsEndpoint(BaseAPIView):
                 .annotate(color=F("labels__color"))
                 .annotate(label_id=F("labels__id"))
                 .values("label_name", "color", "label_id")
-                .annotate(
-                    total_issues=Count(
-                        "label_id", filter=Q(archived_at__isnull=True, is_draft=False)
-                    )
-                )
+                .annotate(total_issues=Count("label_id", filter=Q(archived_at__isnull=True, is_draft=False)))
                 .annotate(
                     completed_issues=Count(
                         "label_id",
diff --git a/apps/api/plane/app/views/cycle/issue.py b/apps/api/plane/app/views/cycle/issue.py
index ad3923b17..609967845 100644
--- a/apps/api/plane/app/views/cycle/issue.py
+++ b/apps/api/plane/app/views/cycle/issue.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Python imports
 import copy
 import json
diff --git a/apps/api/plane/app/views/error_404.py b/apps/api/plane/app/views/error_404.py
index 97c3c59f7..b7ec4dcf3 100644
--- a/apps/api/plane/app/views/error_404.py
+++ b/apps/api/plane/app/views/error_404.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # views.py
 from django.http import JsonResponse
 
diff --git a/apps/api/plane/app/views/estimate/base.py b/apps/api/plane/app/views/estimate/base.py
index f54115a4f..4bdc86633 100644
--- a/apps/api/plane/app/views/estimate/base.py
+++ b/apps/api/plane/app/views/estimate/base.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 import random
 import string
 import json
diff --git a/apps/api/plane/app/views/exporter/base.py b/apps/api/plane/app/views/exporter/base.py
index 5f446ff94..64364ecf4 100644
--- a/apps/api/plane/app/views/exporter/base.py
+++ b/apps/api/plane/app/views/exporter/base.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Third Party imports
 from rest_framework import status
 from rest_framework.response import Response
diff --git a/apps/api/plane/app/views/external/base.py b/apps/api/plane/app/views/external/base.py
index 2c554bbc8..013bad2db 100644
--- a/apps/api/plane/app/views/external/base.py
+++ b/apps/api/plane/app/views/external/base.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Python import
 import os
 from typing import List, Dict, Tuple
diff --git a/apps/api/plane/app/views/intake/base.py b/apps/api/plane/app/views/intake/base.py
index 7dd7828cb..d4049aa3c 100644
--- a/apps/api/plane/app/views/intake/base.py
+++ b/apps/api/plane/app/views/intake/base.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Python imports
 import json
 
@@ -394,7 +398,7 @@ class IntakeIssueViewSet(BaseViewSet):
                 issue_data = {
                     "name": issue_data.get("name", issue.name),
                     "description_html": issue_data.get("description_html", issue.description_html),
-                    "description": issue_data.get("description", issue.description),
+                    "description_json": issue_data.get("description_json", issue.description_json),
                 }
 
             issue_current_instance = json.dumps(IssueDetailSerializer(issue).data, cls=DjangoJSONEncoder)
diff --git a/apps/api/plane/app/views/issue/activity.py b/apps/api/plane/app/views/issue/activity.py
index fdfcd129a..8f6295640 100644
--- a/apps/api/plane/app/views/issue/activity.py
+++ b/apps/api/plane/app/views/issue/activity.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Python imports
 from itertools import chain
 
diff --git a/apps/api/plane/app/views/issue/archive.py b/apps/api/plane/app/views/issue/archive.py
index b8f858969..1ac808cf9 100644
--- a/apps/api/plane/app/views/issue/archive.py
+++ b/apps/api/plane/app/views/issue/archive.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Python imports
 import copy
 import json
diff --git a/apps/api/plane/app/views/issue/attachment.py b/apps/api/plane/app/views/issue/attachment.py
index 2207d2419..df027c413 100644
--- a/apps/api/plane/app/views/issue/attachment.py
+++ b/apps/api/plane/app/views/issue/attachment.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Python imports
 import json
 import uuid
diff --git a/apps/api/plane/app/views/issue/base.py b/apps/api/plane/app/views/issue/base.py
index 7a5e7dddf..bb331802c 100644
--- a/apps/api/plane/app/views/issue/base.py
+++ b/apps/api/plane/app/views/issue/base.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Python imports
 import copy
 import json
@@ -34,7 +38,7 @@ from plane.app.serializers import (
     IssueDetailSerializer,
     IssueListDetailSerializer,
     IssueSerializer,
-    IssueUserPropertySerializer,
+    ProjectUserPropertySerializer,
 )
 from plane.bgtasks.issue_activities_task import issue_activity
 from plane.bgtasks.issue_description_version_task import issue_description_version_task
@@ -51,7 +55,7 @@ from plane.db.models import (
     IssueReaction,
     IssueRelation,
     IssueSubscriber,
-    IssueUserProperty,
+    ProjectUserProperty,
     ModuleIssue,
     Project,
     ProjectMember,
@@ -723,23 +727,33 @@ class IssueViewSet(BaseViewSet):
         return Response(status=status.HTTP_204_NO_CONTENT)
 
 
-class IssueUserDisplayPropertyEndpoint(BaseAPIView):
+class ProjectUserDisplayPropertyEndpoint(BaseAPIView):
     @allow_permission([ROLE.ADMIN, ROLE.MEMBER, ROLE.GUEST])
     def patch(self, request, slug, project_id):
-        issue_property = IssueUserProperty.objects.get(user=request.user, project_id=project_id)
+        try:
+            issue_property = ProjectUserProperty.objects.get(
+                user=request.user, 
+                project_id=project_id
+            )
+        except ProjectUserProperty.DoesNotExist:
+            issue_property = ProjectUserProperty.objects.create(
+                user=request.user, 
+                project_id=project_id
+            )
 
-        issue_property.rich_filters = request.data.get("rich_filters", issue_property.rich_filters)
-        issue_property.filters = request.data.get("filters", issue_property.filters)
-        issue_property.display_filters = request.data.get("display_filters", issue_property.display_filters)
-        issue_property.display_properties = request.data.get("display_properties", issue_property.display_properties)
-        issue_property.save()
-        serializer = IssueUserPropertySerializer(issue_property)
-        return Response(serializer.data, status=status.HTTP_201_CREATED)
+        serializer = ProjectUserPropertySerializer(
+            issue_property, 
+            data=request.data,
+            partial=True
+        )
+        serializer.is_valid(raise_exception=True)
+        serializer.save()
+        return Response(serializer.data, status=status.HTTP_200_OK)
 
     @allow_permission([ROLE.ADMIN, ROLE.MEMBER, ROLE.GUEST])
     def get(self, request, slug, project_id):
-        issue_property, _ = IssueUserProperty.objects.get_or_create(user=request.user, project_id=project_id)
-        serializer = IssueUserPropertySerializer(issue_property)
+        issue_property, _ = ProjectUserProperty.objects.get_or_create(user=request.user, project_id=project_id)
+        serializer = ProjectUserPropertySerializer(issue_property)
         return Response(serializer.data, status=status.HTTP_200_OK)
 
 
@@ -1104,7 +1118,7 @@ class IssueBulkUpdateDateEndpoint(BaseAPIView):
         epoch = int(timezone.now().timestamp())
 
         # Fetch all relevant issues in a single query
-        issues = list(Issue.objects.filter(id__in=issue_ids))
+        issues = list(Issue.objects.filter(id__in=issue_ids, workspace__slug=slug, project_id=project_id))
         issues_dict = {str(issue.id): issue for issue in issues}
         issues_to_update = []
 
diff --git a/apps/api/plane/app/views/issue/comment.py b/apps/api/plane/app/views/issue/comment.py
index 72a986fea..34fe0f9e4 100644
--- a/apps/api/plane/app/views/issue/comment.py
+++ b/apps/api/plane/app/views/issue/comment.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Python imports
 import json
 
diff --git a/apps/api/plane/app/views/issue/label.py b/apps/api/plane/app/views/issue/label.py
index ad0a29080..05033593e 100644
--- a/apps/api/plane/app/views/issue/label.py
+++ b/apps/api/plane/app/views/issue/label.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Python imports
 import random
 
@@ -39,9 +43,7 @@ class LabelViewSet(BaseViewSet):
     @allow_permission([ROLE.ADMIN])
     def create(self, request, slug, project_id):
         try:
-            serializer = LabelSerializer(
-                data=request.data, context={"project_id": project_id}
-            )
+            serializer = LabelSerializer(data=request.data, context={"project_id": project_id})
             if serializer.is_valid():
                 serializer.save(project_id=project_id)
                 return Response(serializer.data, status=status.HTTP_201_CREATED)
diff --git a/apps/api/plane/app/views/issue/link.py b/apps/api/plane/app/views/issue/link.py
index ee209f9fa..549021230 100644
--- a/apps/api/plane/app/views/issue/link.py
+++ b/apps/api/plane/app/views/issue/link.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Python imports
 import json
 
diff --git a/apps/api/plane/app/views/issue/reaction.py b/apps/api/plane/app/views/issue/reaction.py
index fe8a63b13..c09e1e924 100644
--- a/apps/api/plane/app/views/issue/reaction.py
+++ b/apps/api/plane/app/views/issue/reaction.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Python imports
 import json
 
diff --git a/apps/api/plane/app/views/issue/relation.py b/apps/api/plane/app/views/issue/relation.py
index 0dfd686d2..e91ddffec 100644
--- a/apps/api/plane/app/views/issue/relation.py
+++ b/apps/api/plane/app/views/issue/relation.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Python imports
 import json
 
diff --git a/apps/api/plane/app/views/issue/sub_issue.py b/apps/api/plane/app/views/issue/sub_issue.py
index 2fa244dcf..b52e07564 100644
--- a/apps/api/plane/app/views/issue/sub_issue.py
+++ b/apps/api/plane/app/views/issue/sub_issue.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Python imports
 import json
 
diff --git a/apps/api/plane/app/views/issue/subscriber.py b/apps/api/plane/app/views/issue/subscriber.py
index 58f3ba4c7..c9a1a29b6 100644
--- a/apps/api/plane/app/views/issue/subscriber.py
+++ b/apps/api/plane/app/views/issue/subscriber.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Third Party imports
 from rest_framework.response import Response
 from rest_framework import status
diff --git a/apps/api/plane/app/views/issue/version.py b/apps/api/plane/app/views/issue/version.py
index 358271ac8..540c7d6d5 100644
--- a/apps/api/plane/app/views/issue/version.py
+++ b/apps/api/plane/app/views/issue/version.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Third party imports
 from rest_framework import status
 from rest_framework.response import Response
diff --git a/apps/api/plane/app/views/module/archive.py b/apps/api/plane/app/views/module/archive.py
index 129ff0dac..1f234d791 100644
--- a/apps/api/plane/app/views/module/archive.py
+++ b/apps/api/plane/app/views/module/archive.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 from django.contrib.postgres.aggregates import ArrayAgg
 from django.contrib.postgres.fields import ArrayField
 from django.db.models import (
diff --git a/apps/api/plane/app/views/module/base.py b/apps/api/plane/app/views/module/base.py
index ae429e750..97e683f75 100644
--- a/apps/api/plane/app/views/module/base.py
+++ b/apps/api/plane/app/views/module/base.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Python imports
 import json
 
diff --git a/apps/api/plane/app/views/module/issue.py b/apps/api/plane/app/views/module/issue.py
index 672bf4e1a..4707d683a 100644
--- a/apps/api/plane/app/views/module/issue.py
+++ b/apps/api/plane/app/views/module/issue.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Python imports
 import copy
 import json
diff --git a/apps/api/plane/app/views/notification/base.py b/apps/api/plane/app/views/notification/base.py
index a11c12d16..0b7dc27a8 100644
--- a/apps/api/plane/app/views/notification/base.py
+++ b/apps/api/plane/app/views/notification/base.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Django imports
 from django.db.models import Exists, OuterRef, Q, Case, When, BooleanField
 from django.utils import timezone
diff --git a/apps/api/plane/app/views/page/base.py b/apps/api/plane/app/views/page/base.py
index 50daf440a..ec391afc1 100644
--- a/apps/api/plane/app/views/page/base.py
+++ b/apps/api/plane/app/views/page/base.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Python imports
 import json
 from datetime import datetime
@@ -46,7 +50,7 @@ from plane.utils.error_codes import ERROR_CODES
 # Local imports
 from ..base import BaseAPIView, BaseViewSet
 from plane.bgtasks.page_transaction_task import page_transaction
-from plane.bgtasks.page_version_task import page_version
+from plane.bgtasks.page_version_task import track_page_version
 from plane.bgtasks.recent_visited_task import recent_visited_task
 from plane.bgtasks.copy_s3_object import copy_s3_objects_of_description_and_assets
 from plane.app.permissions import ProjectPagePermission
@@ -128,7 +132,7 @@ class PageViewSet(BaseViewSet):
             context={
                 "project_id": project_id,
                 "owned_by_id": request.user.id,
-                "description": request.data.get("description", {}),
+                "description_json": request.data.get("description_json", {}),
                 "description_binary": request.data.get("description_binary", None),
                 "description_html": request.data.get("description_html", "<p></p>"),
             },
@@ -495,14 +499,12 @@ class PagesDescriptionViewSet(BaseViewSet):
     permission_classes = [ProjectPagePermission]
 
     def retrieve(self, request, slug, project_id, page_id):
-        page = (
-            Page.objects.get(
-                Q(owned_by=self.request.user) | Q(access=0),
-                pk=page_id,
-                workspace__slug=slug,
-                projects__id=project_id,
-                project_pages__deleted_at__isnull=True,
-            )
+        page = Page.objects.get(
+            Q(owned_by=self.request.user) | Q(access=0),
+            pk=page_id,
+            workspace__slug=slug,
+            projects__id=project_id,
+            project_pages__deleted_at__isnull=True,
         )
         binary_data = page.description_binary
 
@@ -517,14 +519,12 @@ class PagesDescriptionViewSet(BaseViewSet):
         return response
 
     def partial_update(self, request, slug, project_id, page_id):
-        page = (
-            Page.objects.get(
-                Q(owned_by=self.request.user) | Q(access=0),
-                pk=page_id,
-                workspace__slug=slug,
-                projects__id=project_id,
-                project_pages__deleted_at__isnull=True,
-            )
+        page = Page.objects.get(
+            Q(owned_by=self.request.user) | Q(access=0),
+            pk=page_id,
+            workspace__slug=slug,
+            projects__id=project_id,
+            project_pages__deleted_at__isnull=True,
         )
 
         if page.is_locked:
@@ -545,26 +545,28 @@ class PagesDescriptionViewSet(BaseViewSet):
                 status=status.HTTP_400_BAD_REQUEST,
             )
 
+        # Store the old description_html before saving (needed for both tasks)
+        old_description_html = page.description_html
+
         # Serialize the existing instance
-        existing_instance = json.dumps({"description_html": page.description_html}, cls=DjangoJSONEncoder)
+        existing_instance = json.dumps({"description_html": old_description_html}, cls=DjangoJSONEncoder)
 
         # Use serializer for validation and update
         serializer = PageBinaryUpdateSerializer(page, data=request.data, partial=True)
         if serializer.is_valid():
+            serializer.save()
+
             # Capture the page transaction
             if request.data.get("description_html"):
                 page_transaction.delay(
                     new_description_html=request.data.get("description_html", "<p></p>"),
-                    old_description_html=page.description_html,
+                    old_description_html=old_description_html,
                     page_id=page_id,
                 )
 
-            # Update the page using serializer
-            updated_page = serializer.save()
-
             # Run background tasks
-            page_version.delay(
-                page_id=updated_page.id,
+            track_page_version.delay(
+                page_id=page_id,
                 existing_instance=existing_instance,
                 user_id=request.user.id,
             )
diff --git a/apps/api/plane/app/views/page/version.py b/apps/api/plane/app/views/page/version.py
index 1b285c966..e102bf1d0 100644
--- a/apps/api/plane/app/views/page/version.py
+++ b/apps/api/plane/app/views/page/version.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Third party imports
 from rest_framework import status
 from rest_framework.response import Response
diff --git a/apps/api/plane/app/views/project/base.py b/apps/api/plane/app/views/project/base.py
index 3dd1e3db4..0a7378c07 100644
--- a/apps/api/plane/app/views/project/base.py
+++ b/apps/api/plane/app/views/project/base.py
@@ -1,17 +1,18 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Python imports
 import json
 
-import boto3
 
 # Django imports
-from django.conf import settings
 from django.core.serializers.json import DjangoJSONEncoder
-from django.db.models import Exists, F, OuterRef, Prefetch, Q, Subquery
+from django.db.models import Exists, F, OuterRef, Prefetch, Q, Subquery, Count
 from django.utils import timezone
 
 # Third Party imports
 from rest_framework import status
-from rest_framework.permissions import AllowAny
 from rest_framework.response import Response
 
 # Module imports
@@ -28,18 +29,17 @@ from plane.db.models import (
     UserFavorite,
     DeployBoard,
     Intake,
-    IssueUserProperty,
     Project,
     ProjectIdentifier,
     ProjectMember,
     ProjectNetwork,
+    ProjectUserProperty,
     State,
     DEFAULT_STATES,
     Workspace,
     WorkspaceMember,
 )
-from plane.utils.cache import cache_response
-from plane.utils.exception_logger import log_exception
+from plane.db.models.intake import IntakeIssueStatus
 from plane.utils.host import base_host
 
 
@@ -50,11 +50,10 @@ class ProjectViewSet(BaseViewSet):
     use_read_replica = True
 
     def get_queryset(self):
-        sort_order = ProjectMember.objects.filter(
-            member=self.request.user,
+        sort_order = ProjectUserProperty.objects.filter(
+            user=self.request.user,
             project_id=OuterRef("pk"),
             workspace__slug=self.kwargs.get("slug"),
-            is_active=True,
         ).values("sort_order")
         return self.filter_queryset(
             super()
@@ -140,11 +139,10 @@ class ProjectViewSet(BaseViewSet):
 
     @allow_permission(allowed_roles=[ROLE.ADMIN, ROLE.MEMBER, ROLE.GUEST], level="WORKSPACE")
     def list(self, request, slug):
-        sort_order = ProjectMember.objects.filter(
-            member=self.request.user,
+        sort_order = ProjectUserProperty.objects.filter(
+            user=self.request.user,
             project_id=OuterRef("pk"),
             workspace__slug=self.kwargs.get("slug"),
-            is_active=True,
         ).values("sort_order")
 
         projects = (
@@ -157,6 +155,15 @@ class ProjectViewSet(BaseViewSet):
                     is_active=True,
                 ).values("role")
             )
+            .annotate(
+                intake_count=Count(
+                    "project_intakeissue",
+                    filter=Q(
+                        project_intakeissue__status=IntakeIssueStatus.PENDING.value,
+                        project_intakeissue__deleted_at__isnull=True,
+                    ),
+                )
+            )
             .annotate(inbox_view=F("intake_view"))
             .annotate(sort_order=Subquery(sort_order))
             .distinct()
@@ -167,6 +174,7 @@ class ProjectViewSet(BaseViewSet):
             "sort_order",
             "logo_props",
             "member_role",
+            "intake_count",
             "archived_at",
             "workspace",
             "cycle_view",
@@ -255,8 +263,6 @@ class ProjectViewSet(BaseViewSet):
                 member=request.user,
                 role=ROLE.ADMIN.value,
             )
-            # Also create the issue property for the user
-            _ = IssueUserProperty.objects.create(project_id=serializer.data["id"], user=request.user)
 
             if serializer.data["project_lead"] is not None and str(serializer.data["project_lead"]) != str(
                 request.user.id
@@ -266,11 +272,6 @@ class ProjectViewSet(BaseViewSet):
                     member_id=serializer.data["project_lead"],
                     role=ROLE.ADMIN.value,
                 )
-                # Also create the issue property for the user
-                IssueUserProperty.objects.create(
-                    project_id=serializer.data["id"],
-                    user_id=serializer.data["project_lead"],
-                )
 
             State.objects.bulk_create(
                 [
diff --git a/apps/api/plane/app/views/project/invite.py b/apps/api/plane/app/views/project/invite.py
index cc5b3f4b5..19d8c36bc 100644
--- a/apps/api/plane/app/views/project/invite.py
+++ b/apps/api/plane/app/views/project/invite.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Python imports
 import jwt
 from datetime import datetime
@@ -24,7 +28,7 @@ from plane.db.models import (
     User,
     WorkspaceMember,
     Project,
-    IssueUserProperty,
+    ProjectUserProperty,
 )
 from plane.db.models.project import ProjectNetwork
 from plane.utils.host import base_host
@@ -160,9 +164,9 @@ class UserProjectInvitationsViewset(BaseViewSet):
             ignore_conflicts=True,
         )
 
-        IssueUserProperty.objects.bulk_create(
+        ProjectUserProperty.objects.bulk_create(
             [
-                IssueUserProperty(
+                ProjectUserProperty(
                     project_id=project_id,
                     user=request.user,
                     workspace=workspace,
@@ -220,7 +224,7 @@ class ProjectJoinEndpoint(BaseAPIView):
                 if project_member is None:
                     # Create a Project Member
                     _ = ProjectMember.objects.create(
-                        workspace_id=project_invite.workspace_id,
+                        project_id=project_id,
                         member=user,
                         role=project_invite.role,
                     )
diff --git a/apps/api/plane/app/views/project/member.py b/apps/api/plane/app/views/project/member.py
index 3ab7061e1..7dfe70900 100644
--- a/apps/api/plane/app/views/project/member.py
+++ b/apps/api/plane/app/views/project/member.py
@@ -1,6 +1,11 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Third Party imports
 from rest_framework.response import Response
 from rest_framework import status
+from django.db.models import Min
 
 # Module imports
 from .base import BaseViewSet, BaseAPIView
@@ -13,7 +18,7 @@ from plane.app.serializers import (
 
 from plane.app.permissions import WorkspaceUserPermission
 
-from plane.db.models import Project, ProjectMember, IssueUserProperty, WorkspaceMember
+from plane.db.models import Project, ProjectMember, ProjectUserProperty, WorkspaceMember
 from plane.bgtasks.project_add_user_email_task import project_add_user_email
 from plane.utils.host import base_host
 from plane.app.permissions.base import allow_permission, ROLE
@@ -89,24 +94,23 @@ class ProjectMemberViewSet(BaseViewSet):
         # Update the roles of the existing members
         ProjectMember.objects.bulk_update(bulk_project_members, ["is_active", "role"], batch_size=100)
 
-        # Get the list of project members of the requested workspace with the given slug
-        project_members = (
-            ProjectMember.objects.filter(
+        # Get the minimum sort_order for each member in the workspace
+        member_sort_orders = (
+            ProjectUserProperty.objects.filter(
                 workspace__slug=slug,
-                member_id__in=[member.get("member_id") for member in members],
+                user_id__in=[member.get("member_id") for member in members],
             )
-            .values("member_id", "sort_order")
-            .order_by("sort_order")
+            .values("user_id")
+            .annotate(min_sort_order=Min("sort_order"))
         )
+        # Convert to dictionary for easy lookup: {user_id: min_sort_order}
+        sort_order_map = {str(item["user_id"]): item["min_sort_order"] for item in member_sort_orders}
 
         # Loop through requested members
         for member in members:
-            # Get the sort orders of the member
-            sort_order = [
-                project_member.get("sort_order")
-                for project_member in project_members
-                if str(project_member.get("member_id")) == str(member.get("member_id"))
-            ]
+            member_id = str(member.get("member_id"))
+            # Get the minimum sort_order for this member, or use default
+            min_sort_order = sort_order_map.get(member_id)
             # Create a new project member
             bulk_project_members.append(
                 ProjectMember(
@@ -114,22 +118,22 @@ class ProjectMemberViewSet(BaseViewSet):
                     role=member.get("role", 5),
                     project_id=project_id,
                     workspace_id=project.workspace_id,
-                    sort_order=(sort_order[0] - 10000 if len(sort_order) else 65535),
                 )
             )
             # Create a new issue property
             bulk_issue_props.append(
-                IssueUserProperty(
+                ProjectUserProperty(
                     user_id=member.get("member_id"),
                     project_id=project_id,
                     workspace_id=project.workspace_id,
+                    sort_order=(min_sort_order - 10000 if min_sort_order is not None else 65535),
                 )
             )
 
         # Bulk create the project members and issue properties
         project_members = ProjectMember.objects.bulk_create(bulk_project_members, batch_size=10, ignore_conflicts=True)
 
-        _ = IssueUserProperty.objects.bulk_create(bulk_issue_props, batch_size=10, ignore_conflicts=True)
+        _ = ProjectUserProperty.objects.bulk_create(bulk_issue_props, batch_size=10, ignore_conflicts=True)
 
         project_members = ProjectMember.objects.filter(
             project_id=project_id,
@@ -222,21 +226,36 @@ class ProjectMemberViewSet(BaseViewSet):
             is_active=True,
         )
 
-        if workspace_role in [5] and int(request.data.get("role", project_member.role)) in [15, 20]:
-            return Response(
-                {"error": "You cannot add a user with role higher than the workspace role"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        if "role" in request.data:
+            # Only Admins can modify roles
+            if requested_project_member.role < ROLE.ADMIN.value and not is_workspace_admin:
+                return Response(
+                    {"error": "You do not have permission to update roles"},
+                    status=status.HTTP_403_FORBIDDEN,
+                )
 
-        if (
-            "role" in request.data
-            and int(request.data.get("role", project_member.role)) > requested_project_member.role
-            and not is_workspace_admin
-        ):
-            return Response(
-                {"error": "You cannot update a role that is higher than your own role"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+            # Cannot modify a member whose role is equal to or higher than your own
+            if project_member.role >= requested_project_member.role and not is_workspace_admin:
+                return Response(
+                    {"error": "You cannot update the role of a member with a role equal to or higher than your own"},
+                    status=status.HTTP_403_FORBIDDEN,
+                )
+
+            new_role = int(request.data.get("role"))
+
+            # Cannot assign a role equal to or higher than your own
+            if new_role >= requested_project_member.role and not is_workspace_admin:
+                return Response(
+                    {"error": "You cannot assign a role equal to or higher than your own"},
+                    status=status.HTTP_403_FORBIDDEN,
+                )
+
+            # Cannot assign a role higher than the target's workspace role
+            if workspace_role in [5] and new_role in [15, 20]:
+                return Response(
+                    {"error": "You cannot add a user with role higher than the workspace role"},
+                    status=status.HTTP_400_BAD_REQUEST,
+                )
 
         serializer = ProjectMemberSerializer(project_member, data=request.data, partial=True)
 
diff --git a/apps/api/plane/app/views/search/base.py b/apps/api/plane/app/views/search/base.py
index f1e692653..3bfbecaaf 100644
--- a/apps/api/plane/app/views/search/base.py
+++ b/apps/api/plane/app/views/search/base.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Python imports
 import re
 
diff --git a/apps/api/plane/app/views/search/issue.py b/apps/api/plane/app/views/search/issue.py
index ac9d783a9..737fe6410 100644
--- a/apps/api/plane/app/views/search/issue.py
+++ b/apps/api/plane/app/views/search/issue.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Django imports
 from django.db.models import Q, QuerySet
 
diff --git a/apps/api/plane/app/views/state/base.py b/apps/api/plane/app/views/state/base.py
index ce1597a68..55c232fdf 100644
--- a/apps/api/plane/app/views/state/base.py
+++ b/apps/api/plane/app/views/state/base.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Python imports
 from itertools import groupby
 from collections import defaultdict
diff --git a/apps/api/plane/app/views/timezone/base.py b/apps/api/plane/app/views/timezone/base.py
index fc0121179..9644ceee3 100644
--- a/apps/api/plane/app/views/timezone/base.py
+++ b/apps/api/plane/app/views/timezone/base.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Python imports
 import pytz
 from datetime import datetime
diff --git a/apps/api/plane/app/views/user/base.py b/apps/api/plane/app/views/user/base.py
index 72d42010c..914dffb3b 100644
--- a/apps/api/plane/app/views/user/base.py
+++ b/apps/api/plane/app/views/user/base.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Python imports
 import uuid
 import json
diff --git a/apps/api/plane/app/views/view/base.py b/apps/api/plane/app/views/view/base.py
index 98fe04c62..5ca7aac42 100644
--- a/apps/api/plane/app/views/view/base.py
+++ b/apps/api/plane/app/views/view/base.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 import copy
 
 # Django imports
diff --git a/apps/api/plane/app/views/webhook/base.py b/apps/api/plane/app/views/webhook/base.py
index e857c3e08..c874f0a42 100644
--- a/apps/api/plane/app/views/webhook/base.py
+++ b/apps/api/plane/app/views/webhook/base.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Django imports
 from django.db import IntegrityError
 
diff --git a/apps/api/plane/app/views/workspace/base.py b/apps/api/plane/app/views/workspace/base.py
index c27b7adbb..be43eace2 100644
--- a/apps/api/plane/app/views/workspace/base.py
+++ b/apps/api/plane/app/views/workspace/base.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Python imports
 import csv
 import io
@@ -42,7 +46,10 @@ from plane.app.permissions import ROLE, allow_permission
 from plane.utils.constants import RESTRICTED_WORKSPACE_SLUGS
 from plane.license.utils.instance_value import get_configuration_value
 from plane.bgtasks.workspace_seed_task import workspace_seed
+from plane.bgtasks.event_tracking_task import track_event
 from plane.utils.url import contains_url
+from plane.utils.analytics_events import WORKSPACE_CREATED, WORKSPACE_DELETED
+from plane.utils.csv_utils import sanitize_csv_row
 
 
 class WorkSpaceViewSet(BaseViewSet):
@@ -131,6 +138,20 @@ class WorkSpaceViewSet(BaseViewSet):
 
                 workspace_seed.delay(serializer.data["id"])
 
+                track_event.delay(
+                    user_id=request.user.id,
+                    event_name=WORKSPACE_CREATED,
+                    slug=data["slug"],
+                    event_properties={
+                        "user_id": request.user.id,
+                        "workspace_id": data["id"],
+                        "workspace_slug": data["slug"],
+                        "role": "owner",
+                        "workspace_name": data["name"],
+                        "created_at": data["created_at"],
+                    },
+                )
+
                 return Response(data, status=status.HTTP_201_CREATED)
             return Response(
                 [serializer.errors[error][0] for error in serializer.errors],
@@ -164,6 +185,19 @@ class WorkSpaceViewSet(BaseViewSet):
         # Get the workspace
         workspace = self.get_object()
         self.remove_last_workspace_ids_from_user_settings(workspace.id)
+        track_event.delay(
+            user_id=request.user.id,
+            event_name=WORKSPACE_DELETED,
+            slug=workspace.slug,
+            event_properties={
+                "user_id": request.user.id,
+                "workspace_id": workspace.id,
+                "workspace_slug": workspace.slug,
+                "role": "owner",
+                "workspace_name": workspace.name,
+                "deleted_at": str(timezone.now().isoformat()),
+            },
+        )
         return super().destroy(request, *args, **kwargs)
 
 
@@ -338,7 +372,7 @@ class ExportWorkspaceUserActivityEndpoint(BaseAPIView):
         """Generate CSV buffer from rows."""
         csv_buffer = io.StringIO()
         writer = csv.writer(csv_buffer, delimiter=",", quoting=csv.QUOTE_ALL)
-        [writer.writerow(row) for row in rows]
+        [writer.writerow(sanitize_csv_row(row)) for row in rows]
         csv_buffer.seek(0)
         return csv_buffer
 
diff --git a/apps/api/plane/app/views/workspace/cycle.py b/apps/api/plane/app/views/workspace/cycle.py
index 73deca059..deb86c5c4 100644
--- a/apps/api/plane/app/views/workspace/cycle.py
+++ b/apps/api/plane/app/views/workspace/cycle.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Django imports
 from django.db.models import Q, Count
 
diff --git a/apps/api/plane/app/views/workspace/draft.py b/apps/api/plane/app/views/workspace/draft.py
index c89fe4a73..aa228ded3 100644
--- a/apps/api/plane/app/views/workspace/draft.py
+++ b/apps/api/plane/app/views/workspace/draft.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Python imports
 import json
 
diff --git a/apps/api/plane/app/views/workspace/estimate.py b/apps/api/plane/app/views/workspace/estimate.py
index 8cba3d170..7f5bb66f6 100644
--- a/apps/api/plane/app/views/workspace/estimate.py
+++ b/apps/api/plane/app/views/workspace/estimate.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Third party modules
 from rest_framework import status
 from rest_framework.response import Response
diff --git a/apps/api/plane/app/views/workspace/favorite.py b/apps/api/plane/app/views/workspace/favorite.py
index 8a8bfed6c..8217f0fb0 100644
--- a/apps/api/plane/app/views/workspace/favorite.py
+++ b/apps/api/plane/app/views/workspace/favorite.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Third party modules
 from rest_framework import status
 from rest_framework.response import Response
diff --git a/apps/api/plane/app/views/workspace/home.py b/apps/api/plane/app/views/workspace/home.py
index 731164eb1..ec35aaf4e 100644
--- a/apps/api/plane/app/views/workspace/home.py
+++ b/apps/api/plane/app/views/workspace/home.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Module imports
 from ..base import BaseAPIView
 from plane.db.models.workspace import WorkspaceHomePreference
diff --git a/apps/api/plane/app/views/workspace/invite.py b/apps/api/plane/app/views/workspace/invite.py
index 48bcf7eba..cf2ab795a 100644
--- a/apps/api/plane/app/views/workspace/invite.py
+++ b/apps/api/plane/app/views/workspace/invite.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Python imports
 from datetime import datetime
 
@@ -21,12 +25,12 @@ from plane.app.serializers import (
     WorkSpaceMemberSerializer,
 )
 from plane.app.views.base import BaseAPIView
-from plane.bgtasks.event_tracking_task import workspace_invite_event
+from plane.bgtasks.event_tracking_task import track_event
 from plane.bgtasks.workspace_invitation_task import workspace_invitation
 from plane.db.models import User, Workspace, WorkspaceMember, WorkspaceMemberInvite
 from plane.utils.cache import invalidate_cache, invalidate_cache_directly
 from plane.utils.host import base_host
-from plane.utils.ip_address import get_client_ip
+from plane.utils.analytics_events import USER_JOINED_WORKSPACE, USER_INVITED_TO_WORKSPACE
 from .. import BaseViewSet
 
 
@@ -121,6 +125,19 @@ class WorkspaceInvitationsViewset(BaseViewSet):
                 current_site,
                 request.user.email,
             )
+            track_event.delay(
+                user_id=request.user.id,
+                event_name=USER_INVITED_TO_WORKSPACE,
+                slug=slug,
+                event_properties={
+                    "user_id": request.user.id,
+                    "workspace_id": workspace.id,
+                    "workspace_slug": workspace.slug,
+                    "invitee_role": invitation.role,
+                    "invited_at": str(timezone.now()),
+                    "invitee_email": invitation.email,
+                },
+            )
 
         return Response({"message": "Emails sent successfully"}, status=status.HTTP_200_OK)
 
@@ -146,10 +163,10 @@ class WorkspaceJoinEndpoint(BaseAPIView):
     def post(self, request, slug, pk):
         workspace_invite = WorkspaceMemberInvite.objects.get(pk=pk, workspace__slug=slug)
 
-        email = request.data.get("email", "")
+        token = request.data.get("token", "")
 
-        # Check the email
-        if email == "" or workspace_invite.email != email:
+        # Validate the token to verify the user received the invitation email
+        if not token or workspace_invite.token != token:
             return Response(
                 {"error": "You do not have permission to join the workspace"},
                 status=status.HTTP_403_FORBIDDEN,
@@ -163,7 +180,7 @@ class WorkspaceJoinEndpoint(BaseAPIView):
 
             if workspace_invite.accepted:
                 # Check if the user created account after invitation
-                user = User.objects.filter(email=email).first()
+                user = User.objects.filter(email=workspace_invite.email).first()
 
                 # If the user is present then create the workspace member
                 if user is not None:
@@ -186,20 +203,22 @@ class WorkspaceJoinEndpoint(BaseAPIView):
                     # Set the user last_workspace_id to the accepted workspace
                     user.last_workspace_id = workspace_invite.workspace.id
                     user.save()
+                    track_event.delay(
+                        user_id=user.id,
+                        event_name=USER_JOINED_WORKSPACE,
+                        slug=slug,
+                        event_properties={
+                            "user_id": user.id,
+                            "workspace_id": workspace_invite.workspace.id,
+                            "workspace_slug": workspace_invite.workspace.slug,
+                            "role": workspace_invite.role,
+                            "joined_at": str(timezone.now()),
+                        },
+                    )
 
                     # Delete the invitation
                     workspace_invite.delete()
 
-                # Send event
-                workspace_invite_event.delay(
-                    user=user.id if user is not None else None,
-                    email=email,
-                    user_agent=request.META.get("HTTP_USER_AGENT"),
-                    ip=get_client_ip(request=request),
-                    event_name="MEMBER_ACCEPTED",
-                    accepted_from="EMAIL",
-                )
-
                 return Response(
                     {"message": "Workspace Invitation Accepted"},
                     status=status.HTTP_200_OK,
@@ -252,6 +271,20 @@ class UserWorkspaceInvitationsViewSet(BaseViewSet):
                 is_active=True, role=invitation.role
             )
 
+            # Track event
+            track_event.delay(
+                user_id=request.user.id,
+                event_name=USER_JOINED_WORKSPACE,
+                slug=invitation.workspace.slug,
+                event_properties={
+                    "user_id": request.user.id,
+                    "workspace_id": invitation.workspace.id,
+                    "workspace_slug": invitation.workspace.slug,
+                    "role": invitation.role,
+                    "joined_at": str(timezone.now()),
+                },
+            )
+
         # Bulk create the user for all the workspaces
         WorkspaceMember.objects.bulk_create(
             [
diff --git a/apps/api/plane/app/views/workspace/label.py b/apps/api/plane/app/views/workspace/label.py
index 11ca6b913..926a504a3 100644
--- a/apps/api/plane/app/views/workspace/label.py
+++ b/apps/api/plane/app/views/workspace/label.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Third party modules
 from rest_framework import status
 from rest_framework.response import Response
diff --git a/apps/api/plane/app/views/workspace/member.py b/apps/api/plane/app/views/workspace/member.py
index 3394cb253..67c7637a8 100644
--- a/apps/api/plane/app/views/workspace/member.py
+++ b/apps/api/plane/app/views/workspace/member.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Django imports
 from django.db.models import Count, Q, OuterRef, Subquery, IntegerField
 from django.utils import timezone
diff --git a/apps/api/plane/app/views/workspace/module.py b/apps/api/plane/app/views/workspace/module.py
index e61fc70e7..b04848140 100644
--- a/apps/api/plane/app/views/workspace/module.py
+++ b/apps/api/plane/app/views/workspace/module.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Django imports
 from django.db.models import Prefetch, Q, Count
 
@@ -42,7 +46,7 @@ class WorkspaceModulesEndpoint(BaseAPIView):
             )
             .annotate(
                 completed_issues=Count(
-                    "issue_module__issue__state__group",
+                    "issue_module",
                     filter=Q(
                         issue_module__issue__state__group="completed",
                         issue_module__issue__archived_at__isnull=True,
@@ -54,7 +58,7 @@ class WorkspaceModulesEndpoint(BaseAPIView):
             )
             .annotate(
                 cancelled_issues=Count(
-                    "issue_module__issue__state__group",
+                    "issue_module",
                     filter=Q(
                         issue_module__issue__state__group="cancelled",
                         issue_module__issue__archived_at__isnull=True,
@@ -66,7 +70,7 @@ class WorkspaceModulesEndpoint(BaseAPIView):
             )
             .annotate(
                 started_issues=Count(
-                    "issue_module__issue__state__group",
+                    "issue_module",
                     filter=Q(
                         issue_module__issue__state__group="started",
                         issue_module__issue__archived_at__isnull=True,
@@ -78,7 +82,7 @@ class WorkspaceModulesEndpoint(BaseAPIView):
             )
             .annotate(
                 unstarted_issues=Count(
-                    "issue_module__issue__state__group",
+                    "issue_module",
                     filter=Q(
                         issue_module__issue__state__group="unstarted",
                         issue_module__issue__archived_at__isnull=True,
@@ -90,7 +94,7 @@ class WorkspaceModulesEndpoint(BaseAPIView):
             )
             .annotate(
                 backlog_issues=Count(
-                    "issue_module__issue__state__group",
+                    "issue_module",
                     filter=Q(
                         issue_module__issue__state__group="backlog",
                         issue_module__issue__archived_at__isnull=True,
diff --git a/apps/api/plane/app/views/workspace/quick_link.py b/apps/api/plane/app/views/workspace/quick_link.py
index 82c104573..ba971c54f 100644
--- a/apps/api/plane/app/views/workspace/quick_link.py
+++ b/apps/api/plane/app/views/workspace/quick_link.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Third party imports
 from rest_framework import status
 from rest_framework.response import Response
diff --git a/apps/api/plane/app/views/workspace/recent_visit.py b/apps/api/plane/app/views/workspace/recent_visit.py
index 0d9c1ef9b..a9394766a 100644
--- a/apps/api/plane/app/views/workspace/recent_visit.py
+++ b/apps/api/plane/app/views/workspace/recent_visit.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Third party imports
 from rest_framework import status
 from rest_framework.response import Response
diff --git a/apps/api/plane/app/views/workspace/state.py b/apps/api/plane/app/views/workspace/state.py
index 3bfc8d22d..a8c5b368d 100644
--- a/apps/api/plane/app/views/workspace/state.py
+++ b/apps/api/plane/app/views/workspace/state.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Third party modules
 from rest_framework import status
 from rest_framework.response import Response
diff --git a/apps/api/plane/app/views/workspace/sticky.py b/apps/api/plane/app/views/workspace/sticky.py
index 8ab6c5c98..9cf153225 100644
--- a/apps/api/plane/app/views/workspace/sticky.py
+++ b/apps/api/plane/app/views/workspace/sticky.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Third party imports
 from rest_framework.response import Response
 from rest_framework import status
diff --git a/apps/api/plane/app/views/workspace/user.py b/apps/api/plane/app/views/workspace/user.py
index b45c6e410..b60ae5e15 100644
--- a/apps/api/plane/app/views/workspace/user.py
+++ b/apps/api/plane/app/views/workspace/user.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Python imports
 import copy
 from datetime import date
diff --git a/apps/api/plane/app/views/workspace/user_preference.py b/apps/api/plane/app/views/workspace/user_preference.py
index 253f715b3..83e380b9e 100644
--- a/apps/api/plane/app/views/workspace/user_preference.py
+++ b/apps/api/plane/app/views/workspace/user_preference.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Module imports
 from ..base import BaseAPIView
 from plane.db.models.workspace import WorkspaceUserPreference
diff --git a/apps/api/plane/asgi.py b/apps/api/plane/asgi.py
index 2dd703ffe..9d3bd6b07 100644
--- a/apps/api/plane/asgi.py
+++ b/apps/api/plane/asgi.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 import os
 
 from channels.routing import ProtocolTypeRouter
diff --git a/apps/api/plane/authentication/__init__.py b/apps/api/plane/authentication/__init__.py
index e69de29bb..917e26db4 100644
--- a/apps/api/plane/authentication/__init__.py
+++ b/apps/api/plane/authentication/__init__.py
@@ -0,0 +1,4 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
diff --git a/apps/api/plane/authentication/adapter/__init__.py b/apps/api/plane/authentication/adapter/__init__.py
index e69de29bb..917e26db4 100644
--- a/apps/api/plane/authentication/adapter/__init__.py
+++ b/apps/api/plane/authentication/adapter/__init__.py
@@ -0,0 +1,4 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
diff --git a/apps/api/plane/authentication/adapter/base.py b/apps/api/plane/authentication/adapter/base.py
index b80555fe1..b80dfa500 100644
--- a/apps/api/plane/authentication/adapter/base.py
+++ b/apps/api/plane/authentication/adapter/base.py
@@ -1,26 +1,35 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Python imports
+import logging
 import os
 import uuid
-import requests
 from io import BytesIO
 
+import requests
+from django.conf import settings
+from django.core.exceptions import ValidationError
+from django.core.validators import validate_email
+
 # Django imports
 from django.utils import timezone
-from django.core.validators import validate_email
-from django.core.exceptions import ValidationError
-from django.conf import settings
 
 # Third party imports
 from zxcvbn import zxcvbn
 
-# Module imports
-from plane.db.models import Profile, User, WorkspaceMemberInvite, FileAsset
-from plane.license.utils.instance_value import get_configuration_value
-from .error import AuthenticationException, AUTHENTICATION_ERROR_CODES
 from plane.bgtasks.user_activation_email_task import user_activation_email
+
+# Module imports
+from plane.db.models import FileAsset, Profile, User, WorkspaceMemberInvite
+from plane.license.utils.instance_value import get_configuration_value
+from plane.settings.storage import S3Storage
+from plane.utils.exception_logger import log_exception
 from plane.utils.host import base_host
 from plane.utils.ip_address import get_client_ip
-from plane.utils.exception_logger import log_exception
+
+from .error import AUTHENTICATION_ERROR_CODES, AuthenticationException
 
 
 class Adapter:
@@ -32,6 +41,7 @@ class Adapter:
         self.callback = callback
         self.token_data = None
         self.user_data = None
+        self.logger = logging.getLogger("plane.authentication")
 
     def get_user_token(self, data, headers=None):
         raise NotImplementedError
@@ -54,6 +64,7 @@ class Adapter:
     def sanitize_email(self, email):
         # Check if email is present
         if not email:
+            self.logger.error("Email is not present")
             raise AuthenticationException(
                 error_code=AUTHENTICATION_ERROR_CODES["INVALID_EMAIL"],
                 error_message="INVALID_EMAIL",
@@ -67,6 +78,7 @@ class Adapter:
         try:
             validate_email(email)
         except ValidationError:
+            self.logger.warning(f"Email is not valid: {email}")
             raise AuthenticationException(
                 error_code=AUTHENTICATION_ERROR_CODES["INVALID_EMAIL"],
                 error_message="INVALID_EMAIL",
@@ -79,9 +91,10 @@ class Adapter:
         """Validate password strength"""
         results = zxcvbn(self.code)
         if results["score"] < 3:
+            self.logger.warning("Password is not strong enough")
             raise AuthenticationException(
-                error_code=AUTHENTICATION_ERROR_CODES["INVALID_PASSWORD"],
-                error_message="INVALID_PASSWORD",
+                error_code=AUTHENTICATION_ERROR_CODES["PASSWORD_TOO_WEAK"],
+                error_message="PASSWORD_TOO_WEAK",
                 payload={"email": email},
             )
         return
@@ -96,6 +109,7 @@ class Adapter:
 
         # Check if sign up is disabled and invite is present or not
         if ENABLE_SIGNUP == "0" and not WorkspaceMemberInvite.objects.filter(email=email).exists():
+            self.logger.warning("Sign up is disabled and invite is not present")
             # Raise exception
             raise AuthenticationException(
                 error_code=AUTHENTICATION_ERROR_CODES["SIGNUP_DISABLED"],
@@ -108,6 +122,20 @@ class Adapter:
     def get_avatar_download_headers(self):
         return {}
 
+    def check_sync_enabled(self):
+        """Check if sync is enabled for the provider"""
+        provider_config_map = {
+            "google": "ENABLE_GOOGLE_SYNC",
+            "github": "ENABLE_GITHUB_SYNC",
+            "gitlab": "ENABLE_GITLAB_SYNC",
+            "gitea": "ENABLE_GITEA_SYNC",
+        }
+        config_key = provider_config_map.get(self.provider)
+        if config_key:
+            (enabled,) = get_configuration_value([{"key": config_key, "default": os.environ.get(config_key, "0")}])
+            return enabled == "1"
+        return False
+
     def download_and_upload_avatar(self, avatar_url, user):
         """
         Downloads avatar from OAuth provider and uploads to our storage.
@@ -156,9 +184,6 @@ class Adapter:
             # Generate unique filename
             filename = f"{uuid.uuid4().hex}-user-avatar.{extension}"
 
-            # Upload to S3/MinIO storage
-            from plane.settings.storage import S3Storage
-
             storage = S3Storage(request=self.request)
 
             # Create file-like object
@@ -208,6 +233,59 @@ class Adapter:
         user.save()
         return user
 
+    def delete_old_avatar(self, user):
+        """Delete the old avatar if it exists"""
+        try:
+            if user.avatar_asset:
+                asset = FileAsset.objects.get(pk=user.avatar_asset_id)
+                storage = S3Storage(request=self.request)
+                storage.delete_files(object_names=[asset.asset.name])
+
+                # Delete the user avatar
+                asset.delete()
+                user.avatar_asset = None
+                user.avatar = ""
+                user.save()
+            return
+        except FileAsset.DoesNotExist:
+            pass
+        except Exception as e:
+            log_exception(e)
+            return
+
+    def sync_user_data(self, user):
+        # Update user details
+        first_name = self.user_data.get("user", {}).get("first_name", "")
+        last_name = self.user_data.get("user", {}).get("last_name", "")
+        user.first_name = first_name if first_name else ""
+        user.last_name = last_name if last_name else ""
+
+        # Get email
+        email = self.user_data.get("email")
+
+        # Get display name
+        display_name = self.user_data.get("user", {}).get("display_name")
+        # If display name is not provided, generate a random display name
+        if not display_name:
+            display_name = User.get_display_name(email)
+
+        # Set display name
+        user.display_name = display_name
+
+        # Download and upload avatar only if the avatar is different from the one in the storage
+        avatar = self.user_data.get("user", {}).get("avatar", "")
+        # Delete the old avatar if it exists
+        self.delete_old_avatar(user=user)
+        avatar_asset = self.download_and_upload_avatar(avatar_url=avatar, user=user)
+        if avatar_asset:
+            user.avatar_asset = avatar_asset
+        # If avatar upload fails, set the avatar to the original URL
+        else:
+            user.avatar = avatar
+
+        user.save()
+        return user
+
     def complete_login_or_signup(self):
         # Get email
         email = self.user_data.get("email")
@@ -255,6 +333,7 @@ class Adapter:
                 avatar_asset = self.download_and_upload_avatar(avatar_url=avatar, user=user)
                 if avatar_asset:
                     user.avatar_asset = avatar_asset
+                    user.avatar = avatar
                 # If avatar upload fails, set the avatar to the original URL
                 else:
                     user.avatar = avatar
@@ -262,6 +341,10 @@ class Adapter:
             # Create profile
             Profile.objects.create(user=user)
 
+        # Check if IDP sync is enabled and user is not signing up
+        if self.check_sync_enabled() and not is_signup:
+            user = self.sync_user_data(user=user)
+
         # Save user data
         user = self.save_user_data(user=user)
 
diff --git a/apps/api/plane/authentication/adapter/credential.py b/apps/api/plane/authentication/adapter/credential.py
index 0327289ca..eee6ea97f 100644
--- a/apps/api/plane/authentication/adapter/credential.py
+++ b/apps/api/plane/authentication/adapter/credential.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 from plane.authentication.adapter.base import Adapter
 
 
diff --git a/apps/api/plane/authentication/adapter/error.py b/apps/api/plane/authentication/adapter/error.py
index 25a7cf567..f91565df2 100644
--- a/apps/api/plane/authentication/adapter/error.py
+++ b/apps/api/plane/authentication/adapter/error.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 AUTHENTICATION_ERROR_CODES = {
     # Global
     "INSTANCE_NOT_CONFIGURED": 5000,
@@ -9,6 +13,7 @@ AUTHENTICATION_ERROR_CODES = {
     "USER_ACCOUNT_DEACTIVATED": 5019,
     # Password strength
     "INVALID_PASSWORD": 5020,
+    "PASSWORD_TOO_WEAK": 5021,
     "SMTP_NOT_CONFIGURED": 5025,
     # Sign Up
     "USER_ALREADY_EXIST": 5030,
diff --git a/apps/api/plane/authentication/adapter/exception.py b/apps/api/plane/authentication/adapter/exception.py
index e906c5a50..c8d28762a 100644
--- a/apps/api/plane/authentication/adapter/exception.py
+++ b/apps/api/plane/authentication/adapter/exception.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Third party imports
 from rest_framework.views import exception_handler
 from rest_framework.exceptions import NotAuthenticated
diff --git a/apps/api/plane/authentication/adapter/oauth.py b/apps/api/plane/authentication/adapter/oauth.py
index d8e423d0e..0bef76b24 100644
--- a/apps/api/plane/authentication/adapter/oauth.py
+++ b/apps/api/plane/authentication/adapter/oauth.py
@@ -1,19 +1,24 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Python imports
 import requests
+from django.db import DatabaseError, IntegrityError
 
 # Django imports
 from django.utils import timezone
-from django.db import DatabaseError, IntegrityError
+
+from plane.authentication.adapter.error import (
+    AUTHENTICATION_ERROR_CODES,
+    AuthenticationException,
+)
 
 # Module imports
 from plane.db.models import Account
+from plane.utils.exception_logger import log_exception
 
 from .base import Adapter
-from plane.authentication.adapter.error import (
-    AuthenticationException,
-    AUTHENTICATION_ERROR_CODES,
-)
-from plane.utils.exception_logger import log_exception
 
 
 class OauthAdapter(Adapter):
@@ -74,6 +79,7 @@ class OauthAdapter(Adapter):
             response.raise_for_status()
             return response.json()
         except requests.RequestException:
+            self.logger.warning("Error getting user token")
             code = self.authentication_error_code()
             raise AuthenticationException(error_code=AUTHENTICATION_ERROR_CODES[code], error_message=str(code))
 
@@ -84,6 +90,12 @@ class OauthAdapter(Adapter):
             response.raise_for_status()
             return response.json()
         except requests.RequestException:
+            self.logger.warning(
+                "Error getting user response",
+                extra={
+                    "headers": headers,
+                },
+            )
             code = self.authentication_error_code()
             raise AuthenticationException(error_code=AUTHENTICATION_ERROR_CODES[code], error_message=str(code))
 
diff --git a/apps/api/plane/authentication/apps.py b/apps/api/plane/authentication/apps.py
index cf5cdca1c..5a612eaa9 100644
--- a/apps/api/plane/authentication/apps.py
+++ b/apps/api/plane/authentication/apps.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 from django.apps import AppConfig
 
 
diff --git a/apps/api/plane/authentication/middleware/__init__.py b/apps/api/plane/authentication/middleware/__init__.py
index e69de29bb..917e26db4 100644
--- a/apps/api/plane/authentication/middleware/__init__.py
+++ b/apps/api/plane/authentication/middleware/__init__.py
@@ -0,0 +1,4 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
diff --git a/apps/api/plane/authentication/middleware/session.py b/apps/api/plane/authentication/middleware/session.py
index c367a15d3..817f898fd 100644
--- a/apps/api/plane/authentication/middleware/session.py
+++ b/apps/api/plane/authentication/middleware/session.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 import time
 from importlib import import_module
 
diff --git a/apps/api/plane/authentication/provider/__init__.py b/apps/api/plane/authentication/provider/__init__.py
index e69de29bb..917e26db4 100644
--- a/apps/api/plane/authentication/provider/__init__.py
+++ b/apps/api/plane/authentication/provider/__init__.py
@@ -0,0 +1,4 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
diff --git a/apps/api/plane/authentication/provider/credentials/__init__.py b/apps/api/plane/authentication/provider/credentials/__init__.py
index e69de29bb..917e26db4 100644
--- a/apps/api/plane/authentication/provider/credentials/__init__.py
+++ b/apps/api/plane/authentication/provider/credentials/__init__.py
@@ -0,0 +1,4 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
diff --git a/apps/api/plane/authentication/provider/credentials/email.py b/apps/api/plane/authentication/provider/credentials/email.py
index c3d19a80e..e2c424588 100644
--- a/apps/api/plane/authentication/provider/credentials/email.py
+++ b/apps/api/plane/authentication/provider/credentials/email.py
@@ -1,13 +1,17 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Python imports
 import os
 
 # Module imports
 from plane.authentication.adapter.credential import CredentialAdapter
-from plane.db.models import User
 from plane.authentication.adapter.error import (
     AUTHENTICATION_ERROR_CODES,
     AuthenticationException,
 )
+from plane.db.models import User
 from plane.license.utils.instance_value import get_configuration_value
 
 
@@ -20,14 +24,12 @@ class EmailProvider(CredentialAdapter):
         self.code = code
         self.is_signup = is_signup
 
-        (ENABLE_EMAIL_PASSWORD,) = get_configuration_value(
-            [
-                {
-                    "key": "ENABLE_EMAIL_PASSWORD",
-                    "default": os.environ.get("ENABLE_EMAIL_PASSWORD"),
-                }
-            ]
-        )
+        (ENABLE_EMAIL_PASSWORD,) = get_configuration_value([
+            {
+                "key": "ENABLE_EMAIL_PASSWORD",
+                "default": os.environ.get("ENABLE_EMAIL_PASSWORD"),
+            }
+        ])
 
         if ENABLE_EMAIL_PASSWORD == "0":
             raise AuthenticationException(
@@ -39,29 +41,29 @@ class EmailProvider(CredentialAdapter):
         if self.is_signup:
             # Check if the user already exists
             if User.objects.filter(email=self.key).exists():
+                self.logger.warning("User already exists")
                 raise AuthenticationException(
                     error_message="USER_ALREADY_EXIST",
                     error_code=AUTHENTICATION_ERROR_CODES["USER_ALREADY_EXIST"],
                 )
 
-            super().set_user_data(
-                {
-                    "email": self.key,
-                    "user": {
-                        "avatar": "",
-                        "first_name": "",
-                        "last_name": "",
-                        "provider_id": "",
-                        "is_password_autoset": False,
-                    },
-                }
-            )
+            super().set_user_data({
+                "email": self.key,
+                "user": {
+                    "avatar": "",
+                    "first_name": "",
+                    "last_name": "",
+                    "provider_id": "",
+                    "is_password_autoset": False,
+                },
+            })
             return
         else:
             user = User.objects.filter(email=self.key).first()
 
             # User does not exists
             if not user:
+                self.logger.warning("User does not exist")
                 raise AuthenticationException(
                     error_message="USER_DOES_NOT_EXIST",
                     error_code=AUTHENTICATION_ERROR_CODES["USER_DOES_NOT_EXIST"],
@@ -70,6 +72,7 @@ class EmailProvider(CredentialAdapter):
 
             # Check user password
             if not user.check_password(self.code):
+                self.logger.warning("Authentication failed - invalid credentials")
                 raise AuthenticationException(
                     error_message=(
                         "AUTHENTICATION_FAILED_SIGN_UP" if self.is_signup else "AUTHENTICATION_FAILED_SIGN_IN"
@@ -80,16 +83,14 @@ class EmailProvider(CredentialAdapter):
                     payload={"email": self.key},
                 )
 
-            super().set_user_data(
-                {
-                    "email": self.key,
-                    "user": {
-                        "avatar": "",
-                        "first_name": "",
-                        "last_name": "",
-                        "provider_id": "",
-                        "is_password_autoset": False,
-                    },
-                }
-            )
+            super().set_user_data({
+                "email": self.key,
+                "user": {
+                    "avatar": "",
+                    "first_name": "",
+                    "last_name": "",
+                    "provider_id": "",
+                    "is_password_autoset": False,
+                },
+            })
             return
diff --git a/apps/api/plane/authentication/provider/credentials/magic_code.py b/apps/api/plane/authentication/provider/credentials/magic_code.py
index e7c5cfff9..a6c9883d6 100644
--- a/apps/api/plane/authentication/provider/credentials/magic_code.py
+++ b/apps/api/plane/authentication/provider/credentials/magic_code.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Python imports
 import json
 import os
diff --git a/apps/api/plane/authentication/provider/oauth/__init__.py b/apps/api/plane/authentication/provider/oauth/__init__.py
index e69de29bb..917e26db4 100644
--- a/apps/api/plane/authentication/provider/oauth/__init__.py
+++ b/apps/api/plane/authentication/provider/oauth/__init__.py
@@ -0,0 +1,4 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
diff --git a/apps/api/plane/authentication/provider/oauth/gitea.py b/apps/api/plane/authentication/provider/oauth/gitea.py
index ba7d3d16b..8c0c3a5db 100644
--- a/apps/api/plane/authentication/provider/oauth/gitea.py
+++ b/apps/api/plane/authentication/provider/oauth/gitea.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 import os
 from datetime import datetime, timedelta
 from urllib.parse import urlencode, urlparse
@@ -101,9 +105,7 @@ class GiteaOAuthProvider(OauthAdapter):
                     else None
                 ),
                 "refresh_token_expired_at": (
-                    datetime.fromtimestamp(
-                        token_response.get("refresh_token_expired_at"), tz=pytz.utc
-                    )
+                    datetime.fromtimestamp(token_response.get("refresh_token_expired_at"), tz=pytz.utc)
                     if token_response.get("refresh_token_expired_at")
                     else None
                 ),
@@ -168,4 +170,4 @@ class GiteaOAuthProvider(OauthAdapter):
                     "is_password_autoset": True,
                 },
             }
-        )
\ No newline at end of file
+        )
diff --git a/apps/api/plane/authentication/provider/oauth/github.py b/apps/api/plane/authentication/provider/oauth/github.py
index 54c48018e..363cd722e 100644
--- a/apps/api/plane/authentication/provider/oauth/github.py
+++ b/apps/api/plane/authentication/provider/oauth/github.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Python imports
 import os
 from datetime import datetime
@@ -6,13 +10,14 @@ from urllib.parse import urlencode
 import pytz
 import requests
 
+from plane.authentication.adapter.error import (
+    AUTHENTICATION_ERROR_CODES,
+    AuthenticationException,
+)
+
 # Module imports
 from plane.authentication.adapter.oauth import OauthAdapter
 from plane.license.utils.instance_value import get_configuration_value
-from plane.authentication.adapter.error import (
-    AuthenticationException,
-    AUTHENTICATION_ERROR_CODES,
-)
 
 
 class GitHubOAuthProvider(OauthAdapter):
@@ -26,22 +31,20 @@ class GitHubOAuthProvider(OauthAdapter):
     organization_scope = "read:org"
 
     def __init__(self, request, code=None, state=None, callback=None):
-        GITHUB_CLIENT_ID, GITHUB_CLIENT_SECRET, GITHUB_ORGANIZATION_ID = get_configuration_value(
-            [
-                {
-                    "key": "GITHUB_CLIENT_ID",
-                    "default": os.environ.get("GITHUB_CLIENT_ID"),
-                },
-                {
-                    "key": "GITHUB_CLIENT_SECRET",
-                    "default": os.environ.get("GITHUB_CLIENT_SECRET"),
-                },
-                {
-                    "key": "GITHUB_ORGANIZATION_ID",
-                    "default": os.environ.get("GITHUB_ORGANIZATION_ID"),
-                },
-            ]
-        )
+        GITHUB_CLIENT_ID, GITHUB_CLIENT_SECRET, GITHUB_ORGANIZATION_ID = get_configuration_value([
+            {
+                "key": "GITHUB_CLIENT_ID",
+                "default": os.environ.get("GITHUB_CLIENT_ID"),
+            },
+            {
+                "key": "GITHUB_CLIENT_SECRET",
+                "default": os.environ.get("GITHUB_CLIENT_SECRET"),
+            },
+            {
+                "key": "GITHUB_ORGANIZATION_ID",
+                "default": os.environ.get("GITHUB_ORGANIZATION_ID"),
+            },
+        ])
 
         if not (GITHUB_CLIENT_ID and GITHUB_CLIENT_SECRET):
             raise AuthenticationException(
@@ -86,32 +89,46 @@ class GitHubOAuthProvider(OauthAdapter):
             "redirect_uri": self.redirect_uri,
         }
         token_response = self.get_user_token(data=data, headers={"Accept": "application/json"})
-        super().set_token_data(
-            {
-                "access_token": token_response.get("access_token"),
-                "refresh_token": token_response.get("refresh_token", None),
-                "access_token_expired_at": (
-                    datetime.fromtimestamp(token_response.get("expires_in"), tz=pytz.utc)
-                    if token_response.get("expires_in")
-                    else None
-                ),
-                "refresh_token_expired_at": (
-                    datetime.fromtimestamp(token_response.get("refresh_token_expired_at"), tz=pytz.utc)
-                    if token_response.get("refresh_token_expired_at")
-                    else None
-                ),
-                "id_token": token_response.get("id_token", ""),
-            }
-        )
+        super().set_token_data({
+            "access_token": token_response.get("access_token"),
+            "refresh_token": token_response.get("refresh_token", None),
+            "access_token_expired_at": (
+                datetime.fromtimestamp(token_response.get("expires_in"), tz=pytz.utc)
+                if token_response.get("expires_in")
+                else None
+            ),
+            "refresh_token_expired_at": (
+                datetime.fromtimestamp(token_response.get("refresh_token_expired_at"), tz=pytz.utc)
+                if token_response.get("refresh_token_expired_at")
+                else None
+            ),
+            "id_token": token_response.get("id_token", ""),
+        })
 
     def __get_email(self, headers):
         try:
             # Github does not provide email in user response
             emails_url = "https://api.github.com/user/emails"
             emails_response = requests.get(emails_url, headers=headers).json()
+            # Ensure the response is a list before iterating
+            if not isinstance(emails_response, list):
+                self.logger.error("Unexpected response format from GitHub emails API")
+                raise AuthenticationException(
+                    error_code=AUTHENTICATION_ERROR_CODES["GITHUB_OAUTH_PROVIDER_ERROR"],
+                    error_message="GITHUB_OAUTH_PROVIDER_ERROR",
+                )
             email = next((email["email"] for email in emails_response if email["primary"]), None)
+            if not email:
+                self.logger.error("No primary email found for user")
+                raise AuthenticationException(
+                    error_code=AUTHENTICATION_ERROR_CODES["GITHUB_OAUTH_PROVIDER_ERROR"],
+                    error_message="GITHUB_OAUTH_PROVIDER_ERROR",
+                )
             return email
         except requests.RequestException:
+            self.logger.warning(
+                "Error getting email from GitHub",
+            )
             raise AuthenticationException(
                 error_code=AUTHENTICATION_ERROR_CODES["GITHUB_OAUTH_PROVIDER_ERROR"],
                 error_message="GITHUB_OAUTH_PROVIDER_ERROR",
@@ -134,22 +151,33 @@ class GitHubOAuthProvider(OauthAdapter):
 
         if self.organization_id:
             if not self.is_user_in_organization(user_info_response.get("login")):
+                self.logger.warning(
+                    "User is not in organization",
+                    extra={
+                        "organization_id": self.organization_id,
+                        "user_login": user_info_response.get("login"),
+                    },
+                )
                 raise AuthenticationException(
                     error_code=AUTHENTICATION_ERROR_CODES["GITHUB_USER_NOT_IN_ORG"],
                     error_message="GITHUB_USER_NOT_IN_ORG",
                 )
 
         email = self.__get_email(headers=headers)
-        super().set_user_data(
-            {
+        self.logger.debug(
+            "Email found",
+            extra={
                 "email": email,
-                "user": {
-                    "provider_id": user_info_response.get("id"),
-                    "email": email,
-                    "avatar": user_info_response.get("avatar_url"),
-                    "first_name": user_info_response.get("name"),
-                    "last_name": user_info_response.get("family_name"),
-                    "is_password_autoset": True,
-                },
-            }
+            },
         )
+        super().set_user_data({
+            "email": email,
+            "user": {
+                "provider_id": user_info_response.get("id"),
+                "email": email,
+                "avatar": user_info_response.get("avatar_url"),
+                "first_name": user_info_response.get("name"),
+                "last_name": user_info_response.get("family_name"),
+                "is_password_autoset": True,
+            },
+        })
diff --git a/apps/api/plane/authentication/provider/oauth/gitlab.py b/apps/api/plane/authentication/provider/oauth/gitlab.py
index de4a3515e..088987c23 100644
--- a/apps/api/plane/authentication/provider/oauth/gitlab.py
+++ b/apps/api/plane/authentication/provider/oauth/gitlab.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Python imports
 import os
 from datetime import datetime
diff --git a/apps/api/plane/authentication/provider/oauth/google.py b/apps/api/plane/authentication/provider/oauth/google.py
index 41293782f..b02eda87d 100644
--- a/apps/api/plane/authentication/provider/oauth/google.py
+++ b/apps/api/plane/authentication/provider/oauth/google.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Python imports
 import os
 from datetime import datetime
diff --git a/apps/api/plane/authentication/rate_limit.py b/apps/api/plane/authentication/rate_limit.py
index d245d50b3..f939ef25c 100644
--- a/apps/api/plane/authentication/rate_limit.py
+++ b/apps/api/plane/authentication/rate_limit.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Third party imports
 from rest_framework.throttling import AnonRateThrottle, UserRateThrottle
 from rest_framework import status
diff --git a/apps/api/plane/authentication/session.py b/apps/api/plane/authentication/session.py
index 862a63c13..fe2aa0c35 100644
--- a/apps/api/plane/authentication/session.py
+++ b/apps/api/plane/authentication/session.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 from rest_framework.authentication import SessionAuthentication
 
 
diff --git a/apps/api/plane/authentication/urls.py b/apps/api/plane/authentication/urls.py
index 64b8e654c..4bec07db0 100644
--- a/apps/api/plane/authentication/urls.py
+++ b/apps/api/plane/authentication/urls.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 from django.urls import path
 
 from .views import (
diff --git a/apps/api/plane/authentication/utils/host.py b/apps/api/plane/authentication/utils/host.py
index 415791a87..d79d54e8a 100644
--- a/apps/api/plane/authentication/utils/host.py
+++ b/apps/api/plane/authentication/utils/host.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Django imports
 from django.conf import settings
 from django.http import HttpRequest
diff --git a/apps/api/plane/authentication/utils/login.py b/apps/api/plane/authentication/utils/login.py
index fe6fdad93..d57333551 100644
--- a/apps/api/plane/authentication/utils/login.py
+++ b/apps/api/plane/authentication/utils/login.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Django imports
 from django.contrib.auth import login
 from django.conf import settings
diff --git a/apps/api/plane/authentication/utils/redirection_path.py b/apps/api/plane/authentication/utils/redirection_path.py
index 82139b821..59d4b7d50 100644
--- a/apps/api/plane/authentication/utils/redirection_path.py
+++ b/apps/api/plane/authentication/utils/redirection_path.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 from plane.db.models import Profile, Workspace, WorkspaceMemberInvite
 
 
diff --git a/apps/api/plane/authentication/utils/user_auth_workflow.py b/apps/api/plane/authentication/utils/user_auth_workflow.py
index 13de4c287..4641f332c 100644
--- a/apps/api/plane/authentication/utils/user_auth_workflow.py
+++ b/apps/api/plane/authentication/utils/user_auth_workflow.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 from .workspace_project_join import process_workspace_project_invitations
 
 
diff --git a/apps/api/plane/authentication/utils/workspace_project_join.py b/apps/api/plane/authentication/utils/workspace_project_join.py
index bd5ad8501..9222791a8 100644
--- a/apps/api/plane/authentication/utils/workspace_project_join.py
+++ b/apps/api/plane/authentication/utils/workspace_project_join.py
@@ -1,3 +1,11 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
+# Django imports
+from django.utils import timezone
+
+# Module imports
 from plane.db.models import (
     ProjectMember,
     ProjectMemberInvite,
@@ -5,6 +13,8 @@ from plane.db.models import (
     WorkspaceMemberInvite,
 )
 from plane.utils.cache import invalidate_cache_directly
+from plane.bgtasks.event_tracking_task import track_event
+from plane.utils.analytics_events import USER_JOINED_WORKSPACE
 
 
 def process_workspace_project_invitations(user):
@@ -25,15 +35,25 @@ def process_workspace_project_invitations(user):
         ignore_conflicts=True,
     )
 
-    [
+    for workspace_member_invite in workspace_member_invites:
         invalidate_cache_directly(
             path=f"/api/workspaces/{str(workspace_member_invite.workspace.slug)}/members/",
             url_params=False,
             user=False,
             multiple=True,
         )
-        for workspace_member_invite in workspace_member_invites
-    ]
+        track_event.delay(
+            user_id=user.id,
+            event_name=USER_JOINED_WORKSPACE,
+            slug=workspace_member_invite.workspace.slug,
+            event_properties={
+                "user_id": user.id,
+                "workspace_id": workspace_member_invite.workspace.id,
+                "workspace_slug": workspace_member_invite.workspace.slug,
+                "role": workspace_member_invite.role,
+                "joined_at": str(timezone.now().isoformat()),
+            },
+        )
 
     # Check if user has any project invites
     project_member_invites = ProjectMemberInvite.objects.filter(email=user.email, accepted=True)
diff --git a/apps/api/plane/authentication/views/__init__.py b/apps/api/plane/authentication/views/__init__.py
index 2595d2e75..a9c816ae9 100644
--- a/apps/api/plane/authentication/views/__init__.py
+++ b/apps/api/plane/authentication/views/__init__.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 from .common import ChangePasswordEndpoint, CSRFTokenEndpoint, SetUserPasswordEndpoint
 
 from .app.check import EmailCheckEndpoint
diff --git a/apps/api/plane/authentication/views/app/check.py b/apps/api/plane/authentication/views/app/check.py
index 10457b45a..97ab24def 100644
--- a/apps/api/plane/authentication/views/app/check.py
+++ b/apps/api/plane/authentication/views/app/check.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Python imports
 import os
 
diff --git a/apps/api/plane/authentication/views/app/email.py b/apps/api/plane/authentication/views/app/email.py
index 864ff102b..3d1954875 100644
--- a/apps/api/plane/authentication/views/app/email.py
+++ b/apps/api/plane/authentication/views/app/email.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Django imports
 from django.core.exceptions import ValidationError
 from django.core.validators import validate_email
diff --git a/apps/api/plane/authentication/views/app/gitea.py b/apps/api/plane/authentication/views/app/gitea.py
index fd12f8b33..67d25e1ab 100644
--- a/apps/api/plane/authentication/views/app/gitea.py
+++ b/apps/api/plane/authentication/views/app/gitea.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 import uuid
 from urllib.parse import urlencode, urljoin
 
@@ -37,9 +41,7 @@ class GiteaOauthInitiateEndpoint(View):
             params = exc.get_error_dict()
             if next_path:
                 params["next_path"] = str(validate_next_path(next_path))
-            url = urljoin(
-                base_host(request=request, is_app=True), "?" + urlencode(params)
-            )
+            url = urljoin(base_host(request=request, is_app=True), "?" + urlencode(params))
             return HttpResponseRedirect(url)
         try:
             state = uuid.uuid4().hex
@@ -51,9 +53,7 @@ class GiteaOauthInitiateEndpoint(View):
             params = e.get_error_dict()
             if next_path:
                 params["next_path"] = str(validate_next_path(next_path))
-            url = urljoin(
-                base_host(request=request, is_app=True), "?" + urlencode(params)
-            )
+            url = urljoin(base_host(request=request, is_app=True), "?" + urlencode(params))
             return HttpResponseRedirect(url)
 
 
@@ -87,9 +87,7 @@ class GiteaCallbackEndpoint(View):
             return HttpResponseRedirect(url)
 
         try:
-            provider = GiteaOAuthProvider(
-                request=request, code=code, callback=post_user_auth_workflow
-            )
+            provider = GiteaOAuthProvider(request=request, code=code, callback=post_user_auth_workflow)
             user = provider.authenticate()
             # Login the user and record his device info
             user_login(request=request, user=user, is_app=True)
diff --git a/apps/api/plane/authentication/views/app/github.py b/apps/api/plane/authentication/views/app/github.py
index 4720fc7da..82d5f4a05 100644
--- a/apps/api/plane/authentication/views/app/github.py
+++ b/apps/api/plane/authentication/views/app/github.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Python imports
 import uuid
 
diff --git a/apps/api/plane/authentication/views/app/gitlab.py b/apps/api/plane/authentication/views/app/gitlab.py
index 665af00c1..5b0435250 100644
--- a/apps/api/plane/authentication/views/app/gitlab.py
+++ b/apps/api/plane/authentication/views/app/gitlab.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Python imports
 import uuid
 
diff --git a/apps/api/plane/authentication/views/app/google.py b/apps/api/plane/authentication/views/app/google.py
index 0ee81c768..3dad1385a 100644
--- a/apps/api/plane/authentication/views/app/google.py
+++ b/apps/api/plane/authentication/views/app/google.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Python imports
 import uuid
 
diff --git a/apps/api/plane/authentication/views/app/magic.py b/apps/api/plane/authentication/views/app/magic.py
index 518a5cdea..9104311a6 100644
--- a/apps/api/plane/authentication/views/app/magic.py
+++ b/apps/api/plane/authentication/views/app/magic.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Django imports
 from django.core.validators import validate_email
 from django.http import HttpResponseRedirect
diff --git a/apps/api/plane/authentication/views/app/password_management.py b/apps/api/plane/authentication/views/app/password_management.py
index de0baa71b..48b54dccc 100644
--- a/apps/api/plane/authentication/views/app/password_management.py
+++ b/apps/api/plane/authentication/views/app/password_management.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Python imports
 import os
 from urllib.parse import urlencode, urljoin
@@ -141,8 +145,8 @@ class ResetPasswordEndpoint(View):
             results = zxcvbn(password)
             if results["score"] < 3:
                 exc = AuthenticationException(
-                    error_code=AUTHENTICATION_ERROR_CODES["INVALID_PASSWORD"],
-                    error_message="INVALID_PASSWORD",
+                    error_code=AUTHENTICATION_ERROR_CODES["PASSWORD_TOO_WEAK"],
+                    error_message="PASSWORD_TOO_WEAK",
                 )
                 url = urljoin(
                     base_host(request=request, is_app=True),
diff --git a/apps/api/plane/authentication/views/app/signout.py b/apps/api/plane/authentication/views/app/signout.py
index b8019dac1..9941da3c9 100644
--- a/apps/api/plane/authentication/views/app/signout.py
+++ b/apps/api/plane/authentication/views/app/signout.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Django imports
 from django.views import View
 from django.contrib.auth import logout
diff --git a/apps/api/plane/authentication/views/common.py b/apps/api/plane/authentication/views/common.py
index c5dd1714c..086d6b0d3 100644
--- a/apps/api/plane/authentication/views/common.py
+++ b/apps/api/plane/authentication/views/common.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Django imports
 from django.shortcuts import render
 
@@ -79,8 +83,8 @@ class ChangePasswordEndpoint(APIView):
         results = zxcvbn(new_password)
         if results["score"] < 3:
             exc = AuthenticationException(
-                error_code=AUTHENTICATION_ERROR_CODES["INVALID_NEW_PASSWORD"],
-                error_message="INVALID_NEW_PASSWORD",
+                error_code=AUTHENTICATION_ERROR_CODES["PASSWORD_TOO_WEAK"],
+                error_message="PASSWORD_TOO_WEAK",
             )
             return Response(exc.get_error_dict(), status=status.HTTP_400_BAD_REQUEST)
 
diff --git a/apps/api/plane/authentication/views/space/check.py b/apps/api/plane/authentication/views/space/check.py
index 95a5e68df..371fadf36 100644
--- a/apps/api/plane/authentication/views/space/check.py
+++ b/apps/api/plane/authentication/views/space/check.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Python imports
 import os
 
diff --git a/apps/api/plane/authentication/views/space/email.py b/apps/api/plane/authentication/views/space/email.py
index 3d092591a..827348cef 100644
--- a/apps/api/plane/authentication/views/space/email.py
+++ b/apps/api/plane/authentication/views/space/email.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Django imports
 from django.core.exceptions import ValidationError
 from django.core.validators import validate_email
diff --git a/apps/api/plane/authentication/views/space/gitea.py b/apps/api/plane/authentication/views/space/gitea.py
index 497a1ecc0..04c21678f 100644
--- a/apps/api/plane/authentication/views/space/gitea.py
+++ b/apps/api/plane/authentication/views/space/gitea.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Python imports
 import uuid
 from urllib.parse import urlencode
diff --git a/apps/api/plane/authentication/views/space/github.py b/apps/api/plane/authentication/views/space/github.py
index f12498d3b..1df6a8c61 100644
--- a/apps/api/plane/authentication/views/space/github.py
+++ b/apps/api/plane/authentication/views/space/github.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Python imports
 import uuid
 
diff --git a/apps/api/plane/authentication/views/space/gitlab.py b/apps/api/plane/authentication/views/space/gitlab.py
index 498916b34..19c057a06 100644
--- a/apps/api/plane/authentication/views/space/gitlab.py
+++ b/apps/api/plane/authentication/views/space/gitlab.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Python imports
 import uuid
 
diff --git a/apps/api/plane/authentication/views/space/google.py b/apps/api/plane/authentication/views/space/google.py
index 0f02c1f93..daa1b48a6 100644
--- a/apps/api/plane/authentication/views/space/google.py
+++ b/apps/api/plane/authentication/views/space/google.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Python imports
 import uuid
 
diff --git a/apps/api/plane/authentication/views/space/magic.py b/apps/api/plane/authentication/views/space/magic.py
index df940b327..37683d9ac 100644
--- a/apps/api/plane/authentication/views/space/magic.py
+++ b/apps/api/plane/authentication/views/space/magic.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Django imports
 from django.core.validators import validate_email
 from django.http import HttpResponseRedirect
diff --git a/apps/api/plane/authentication/views/space/password_management.py b/apps/api/plane/authentication/views/space/password_management.py
index 12cc88f63..ed6682d74 100644
--- a/apps/api/plane/authentication/views/space/password_management.py
+++ b/apps/api/plane/authentication/views/space/password_management.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Python imports
 import os
 from urllib.parse import urlencode
@@ -135,8 +139,8 @@ class ResetPasswordSpaceEndpoint(View):
             results = zxcvbn(password)
             if results["score"] < 3:
                 exc = AuthenticationException(
-                    error_code=AUTHENTICATION_ERROR_CODES["INVALID_PASSWORD"],
-                    error_message="INVALID_PASSWORD",
+                    error_code=AUTHENTICATION_ERROR_CODES["PASSWORD_TOO_WEAK"],
+                    error_message="PASSWORD_TOO_WEAK",
                 )
                 url = f"{base_host(request=request, is_space=True)}/accounts/reset-password/?{urlencode(exc.get_error_dict())}"  # noqa: E501
                 return HttpResponseRedirect(url)
diff --git a/apps/api/plane/authentication/views/space/signout.py b/apps/api/plane/authentication/views/space/signout.py
index aa890f978..164c6409b 100644
--- a/apps/api/plane/authentication/views/space/signout.py
+++ b/apps/api/plane/authentication/views/space/signout.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Django imports
 from django.views import View
 from django.contrib.auth import logout
diff --git a/apps/api/plane/bgtasks/__init__.py b/apps/api/plane/bgtasks/__init__.py
index e69de29bb..917e26db4 100644
--- a/apps/api/plane/bgtasks/__init__.py
+++ b/apps/api/plane/bgtasks/__init__.py
@@ -0,0 +1,4 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
diff --git a/apps/api/plane/bgtasks/analytic_plot_export.py b/apps/api/plane/bgtasks/analytic_plot_export.py
index 845fb50dd..4b0983138 100644
--- a/apps/api/plane/bgtasks/analytic_plot_export.py
+++ b/apps/api/plane/bgtasks/analytic_plot_export.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Python imports
 import csv
 import io
@@ -9,7 +13,6 @@ from celery import shared_task
 # Django imports
 from django.core.mail import EmailMultiAlternatives, get_connection
 from django.template.loader import render_to_string
-from django.utils.html import strip_tags
 from django.db.models import Q, Case, Value, When
 from django.db import models
 from django.db.models.functions import Concat
@@ -18,8 +21,10 @@ from django.db.models.functions import Concat
 from plane.db.models import Issue
 from plane.license.utils.instance_value import get_email_configuration
 from plane.utils.analytics_plot import build_graph_plot
+from plane.utils.email import generate_plain_text_from_html
 from plane.utils.exception_logger import log_exception
 from plane.utils.issue_filters import issue_filters
+from plane.utils.csv_utils import sanitize_csv_row
 
 row_mapping = {
     "state__name": "State",
@@ -48,7 +53,7 @@ def send_export_email(email, slug, csv_buffer, rows):
     """Helper function to send export email."""
     subject = "Your Export is ready"
     html_content = render_to_string("emails/exports/analytics.html", {})
-    text_content = strip_tags(html_content)
+    text_content = generate_plain_text_from_html(html_content)
 
     csv_buffer.seek(0)
 
@@ -176,7 +181,7 @@ def generate_csv_from_rows(rows):
     """Generate CSV buffer from rows."""
     csv_buffer = io.StringIO()
     writer = csv.writer(csv_buffer, delimiter=",", quoting=csv.QUOTE_ALL)
-    [writer.writerow(row) for row in rows]
+    [writer.writerow(sanitize_csv_row(row)) for row in rows]
     return csv_buffer
 
 
diff --git a/apps/api/plane/bgtasks/apps.py b/apps/api/plane/bgtasks/apps.py
index 7f6ca38f0..e5fb0aa54 100644
--- a/apps/api/plane/bgtasks/apps.py
+++ b/apps/api/plane/bgtasks/apps.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 from django.apps import AppConfig
 
 
diff --git a/apps/api/plane/bgtasks/cleanup_task.py b/apps/api/plane/bgtasks/cleanup_task.py
index 6b23f2571..407a67ca6 100644
--- a/apps/api/plane/bgtasks/cleanup_task.py
+++ b/apps/api/plane/bgtasks/cleanup_task.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Python imports
 from datetime import timedelta
 import logging
diff --git a/apps/api/plane/bgtasks/copy_s3_object.py b/apps/api/plane/bgtasks/copy_s3_object.py
index e7ef09e35..742966a6f 100644
--- a/apps/api/plane/bgtasks/copy_s3_object.py
+++ b/apps/api/plane/bgtasks/copy_s3_object.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Python imports
 import uuid
 import base64
@@ -141,7 +145,7 @@ def copy_s3_objects_of_description_and_assets(entity_name, entity_identifier, pr
         external_data = sync_with_external_service(entity_name, updated_html)
 
         if external_data:
-            entity.description = external_data.get("description")
+            entity.description_json = external_data.get("description_json")
             entity.description_binary = base64.b64decode(external_data.get("description_binary"))
             entity.save()
 
diff --git a/apps/api/plane/bgtasks/deletion_task.py b/apps/api/plane/bgtasks/deletion_task.py
index 932a1fce0..11d904160 100644
--- a/apps/api/plane/bgtasks/deletion_task.py
+++ b/apps/api/plane/bgtasks/deletion_task.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Django imports
 from django.utils import timezone
 from django.apps import apps
diff --git a/apps/api/plane/bgtasks/dummy_data_task.py b/apps/api/plane/bgtasks/dummy_data_task.py
index 390bc160b..6740495d8 100644
--- a/apps/api/plane/bgtasks/dummy_data_task.py
+++ b/apps/api/plane/bgtasks/dummy_data_task.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Python imports
 import uuid
 import random
diff --git a/apps/api/plane/bgtasks/email_notification_task.py b/apps/api/plane/bgtasks/email_notification_task.py
index 1402adc41..5cf1d52af 100644
--- a/apps/api/plane/bgtasks/email_notification_task.py
+++ b/apps/api/plane/bgtasks/email_notification_task.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 import logging
 import re
 from datetime import datetime
@@ -11,12 +15,12 @@ from django.template.loader import render_to_string
 
 # Django imports
 from django.utils import timezone
-from django.utils.html import strip_tags
 
 # Module imports
 from plane.db.models import EmailNotificationLog, Issue, User
 from plane.license.utils.instance_value import get_email_configuration
 from plane.settings.redis import redis_instance
+from plane.utils.email import generate_plain_text_from_html
 from plane.utils.exception_logger import log_exception
 
 
@@ -256,7 +260,7 @@ def send_email_notification(issue_id, notification_data, receiver_id, email_noti
                 "entity_type": "issue",
             }
             html_content = render_to_string("emails/notifications/issue-updates.html", context)
-            text_content = strip_tags(html_content)
+            text_content = generate_plain_text_from_html(html_content)
 
             try:
                 connection = get_connection(
diff --git a/apps/api/plane/bgtasks/event_tracking_task.py b/apps/api/plane/bgtasks/event_tracking_task.py
index 0629db93a..e8f453e9f 100644
--- a/apps/api/plane/bgtasks/event_tracking_task.py
+++ b/apps/api/plane/bgtasks/event_tracking_task.py
@@ -1,5 +1,11 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
+import logging
 import os
 import uuid
+from typing import Dict, Any
 
 # third party imports
 from celery import shared_task
@@ -8,6 +14,11 @@ from posthog import Posthog
 # module imports
 from plane.license.utils.instance_value import get_configuration_value
 from plane.utils.exception_logger import log_exception
+from plane.db.models import Workspace
+from plane.utils.analytics_events import USER_INVITED_TO_WORKSPACE, WORKSPACE_DELETED
+
+
+logger = logging.getLogger("plane.worker")
 
 
 def posthogConfiguration():
@@ -17,7 +28,10 @@ def posthogConfiguration():
                 "key": "POSTHOG_API_KEY",
                 "default": os.environ.get("POSTHOG_API_KEY", None),
             },
-            {"key": "POSTHOG_HOST", "default": os.environ.get("POSTHOG_HOST", None)},
+            {
+                "key": "POSTHOG_HOST",
+                "default": os.environ.get("POSTHOG_HOST", None),
+            },
         ]
     )
     if POSTHOG_API_KEY and POSTHOG_HOST:
@@ -26,46 +40,42 @@ def posthogConfiguration():
         return None, None
 
 
-@shared_task
-def auth_events(user, email, user_agent, ip, event_name, medium, first_time):
-    try:
-        POSTHOG_API_KEY, POSTHOG_HOST = posthogConfiguration()
+def preprocess_data_properties(
+    user_id: uuid.UUID, event_name: str, slug: str, data_properties: Dict[str, Any]
+) -> Dict[str, Any]:
+    if event_name == USER_INVITED_TO_WORKSPACE or event_name == WORKSPACE_DELETED:
+        try:
+            # Check if the current user is the workspace owner
+            workspace = Workspace.objects.get(slug=slug)
+            if str(workspace.owner_id) == str(user_id):
+                data_properties["role"] = "owner"
+            else:
+                data_properties["role"] = "admin"
+        except Workspace.DoesNotExist:
+            logger.warning(f"Workspace {slug} does not exist while sending event {event_name} for user {user_id}")
+            data_properties["role"] = "unknown"
 
-        if POSTHOG_API_KEY and POSTHOG_HOST:
-            posthog = Posthog(POSTHOG_API_KEY, host=POSTHOG_HOST)
-            posthog.capture(
-                email,
-                event=event_name,
-                properties={
-                    "event_id": uuid.uuid4().hex,
-                    "user": {"email": email, "id": str(user)},
-                    "device_ctx": {"ip": ip, "user_agent": user_agent},
-                    "medium": medium,
-                    "first_time": first_time,
-                },
-            )
-    except Exception as e:
-        log_exception(e)
-        return
+    return data_properties
 
 
 @shared_task
-def workspace_invite_event(user, email, user_agent, ip, event_name, accepted_from):
-    try:
-        POSTHOG_API_KEY, POSTHOG_HOST = posthogConfiguration()
+def track_event(user_id: uuid.UUID, event_name: str, slug: str, event_properties: Dict[str, Any]):
+    POSTHOG_API_KEY, POSTHOG_HOST = posthogConfiguration()
 
-        if POSTHOG_API_KEY and POSTHOG_HOST:
-            posthog = Posthog(POSTHOG_API_KEY, host=POSTHOG_HOST)
-            posthog.capture(
-                email,
-                event=event_name,
-                properties={
-                    "event_id": uuid.uuid4().hex,
-                    "user": {"email": email, "id": str(user)},
-                    "device_ctx": {"ip": ip, "user_agent": user_agent},
-                    "accepted_from": accepted_from,
-                },
-            )
+    if not (POSTHOG_API_KEY and POSTHOG_HOST):
+        logger.warning("Event tracking is not configured")
+        return
+
+    try:
+        # preprocess the data properties for massaging the payload
+        # in the correct format for posthog
+        data_properties = preprocess_data_properties(user_id, event_name, slug, event_properties)
+        groups = {
+            "workspace": slug,
+        }
+        # track the event using posthog
+        posthog = Posthog(POSTHOG_API_KEY, host=POSTHOG_HOST)
+        posthog.capture(distinct_id=str(user_id), event=event_name, properties=data_properties, groups=groups)
     except Exception as e:
         log_exception(e)
-        return
+        return False
diff --git a/apps/api/plane/bgtasks/export_task.py b/apps/api/plane/bgtasks/export_task.py
index 75b5f2265..24486999d 100644
--- a/apps/api/plane/bgtasks/export_task.py
+++ b/apps/api/plane/bgtasks/export_task.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Python imports
 import io
 import zipfile
@@ -15,9 +19,10 @@ from django.utils import timezone
 from django.db.models import Prefetch
 
 # Module imports
-from plane.db.models import ExporterHistory, Issue, IssueRelation
+from plane.db.models import ExporterHistory, Issue, IssueComment, IssueRelation, IssueSubscriber
 from plane.utils.exception_logger import log_exception
-from plane.utils.exporters import Exporter, IssueExportSchema
+from plane.utils.porters.exporter import DataExporter
+from plane.utils.porters.serializers.issue import IssueExportSerializer
 
 
 def create_zip_file(files: List[tuple[str, str | bytes]]) -> io.BytesIO:
@@ -159,10 +164,16 @@ def issue_export_task(
                 "labels",
                 "issue_cycle__cycle",
                 "issue_module__module",
-                "issue_comments",
                 "assignees",
-                "issue_subscribers",
                 "issue_link",
+                Prefetch(
+                    "issue_subscribers",
+                    queryset=IssueSubscriber.objects.select_related("subscriber"),
+                ),
+                Prefetch(
+                    "issue_comments",
+                    queryset=IssueComment.objects.select_related("actor").order_by("created_at"),
+                ),
                 Prefetch(
                     "issue_relation",
                     queryset=IssueRelation.objects.select_related("related_issue", "related_issue__project"),
@@ -180,11 +191,7 @@ def issue_export_task(
 
         # Create exporter for the specified format
         try:
-            exporter = Exporter(
-                format_type=provider,
-                schema_class=IssueExportSchema,
-                options={"list_joiner": ", "},
-            )
+            exporter = DataExporter(IssueExportSerializer, format_type=provider)
         except ValueError as e:
             # Invalid format type
             exporter_instance = ExporterHistory.objects.get(token=token_id)
diff --git a/apps/api/plane/bgtasks/exporter_expired_task.py b/apps/api/plane/bgtasks/exporter_expired_task.py
index 30b638c84..9ec2a0102 100644
--- a/apps/api/plane/bgtasks/exporter_expired_task.py
+++ b/apps/api/plane/bgtasks/exporter_expired_task.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Python imports
 import boto3
 from datetime import timedelta
diff --git a/apps/api/plane/bgtasks/file_asset_task.py b/apps/api/plane/bgtasks/file_asset_task.py
index d6eccf735..e54a754c9 100644
--- a/apps/api/plane/bgtasks/file_asset_task.py
+++ b/apps/api/plane/bgtasks/file_asset_task.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Python imports
 import os
 from datetime import timedelta
diff --git a/apps/api/plane/bgtasks/forgot_password_task.py b/apps/api/plane/bgtasks/forgot_password_task.py
index ffaba9937..9ca0548de 100644
--- a/apps/api/plane/bgtasks/forgot_password_task.py
+++ b/apps/api/plane/bgtasks/forgot_password_task.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Python imports
 import logging
 
@@ -8,10 +12,10 @@ from celery import shared_task
 # Third party imports
 from django.core.mail import EmailMultiAlternatives, get_connection
 from django.template.loader import render_to_string
-from django.utils.html import strip_tags
 
 # Module imports
 from plane.license.utils.instance_value import get_email_configuration
+from plane.utils.email import generate_plain_text_from_html
 from plane.utils.exception_logger import log_exception
 
 
@@ -41,7 +45,7 @@ def forgot_password(first_name, email, uidb64, token, current_site):
 
         html_content = render_to_string("emails/auth/forgot_password.html", context)
 
-        text_content = strip_tags(html_content)
+        text_content = generate_plain_text_from_html(html_content)
 
         connection = get_connection(
             host=EMAIL_HOST,
diff --git a/apps/api/plane/bgtasks/issue_activities_task.py b/apps/api/plane/bgtasks/issue_activities_task.py
index a886305fd..032feb02a 100644
--- a/apps/api/plane/bgtasks/issue_activities_task.py
+++ b/apps/api/plane/bgtasks/issue_activities_task.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Python imports
 import json
 
diff --git a/apps/api/plane/bgtasks/issue_automation_task.py b/apps/api/plane/bgtasks/issue_automation_task.py
index 1cc303b57..83a2f72d1 100644
--- a/apps/api/plane/bgtasks/issue_automation_task.py
+++ b/apps/api/plane/bgtasks/issue_automation_task.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Python imports
 import json
 from datetime import timedelta
diff --git a/apps/api/plane/bgtasks/issue_description_version_sync.py b/apps/api/plane/bgtasks/issue_description_version_sync.py
index d10ebfcba..795d5e7ef 100644
--- a/apps/api/plane/bgtasks/issue_description_version_sync.py
+++ b/apps/api/plane/bgtasks/issue_description_version_sync.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Python imports
 from typing import Optional
 import logging
@@ -59,7 +63,7 @@ def sync_issue_description_version(batch_size=5000, offset=0, countdown=300):
                     "description_binary",
                     "description_html",
                     "description_stripped",
-                    "description",
+                    "description_json",
                 )[offset:end_offset]
             )
 
@@ -92,7 +96,7 @@ def sync_issue_description_version(batch_size=5000, offset=0, countdown=300):
                         description_binary=issue.description_binary,
                         description_html=issue.description_html,
                         description_stripped=issue.description_stripped,
-                        description_json=issue.description,
+                        description_json=issue.description_json,
                     )
                 )
 
diff --git a/apps/api/plane/bgtasks/issue_description_version_task.py b/apps/api/plane/bgtasks/issue_description_version_task.py
index 06d15705a..49689e815 100644
--- a/apps/api/plane/bgtasks/issue_description_version_task.py
+++ b/apps/api/plane/bgtasks/issue_description_version_task.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 from celery import shared_task
 from django.db import transaction
 from django.utils import timezone
@@ -19,7 +23,7 @@ def should_update_existing_version(
 
 
 def update_existing_version(version: IssueDescriptionVersion, issue) -> None:
-    version.description_json = issue.description
+    version.description_json = issue.description_json
     version.description_html = issue.description_html
     version.description_binary = issue.description_binary
     version.description_stripped = issue.description_stripped
diff --git a/apps/api/plane/bgtasks/issue_version_sync.py b/apps/api/plane/bgtasks/issue_version_sync.py
index 761c26bc2..221a5a417 100644
--- a/apps/api/plane/bgtasks/issue_version_sync.py
+++ b/apps/api/plane/bgtasks/issue_version_sync.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Python imports
 import json
 from typing import Optional, List, Dict
diff --git a/apps/api/plane/bgtasks/logger_task.py b/apps/api/plane/bgtasks/logger_task.py
new file mode 100644
index 000000000..4a74e54bc
--- /dev/null
+++ b/apps/api/plane/bgtasks/logger_task.py
@@ -0,0 +1,100 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
+# Python imports
+import logging
+from typing import Optional, Dict, Any
+
+# Third party imports
+from pymongo.collection import Collection
+from celery import shared_task
+
+# Django imports
+from plane.settings.mongo import MongoConnection
+from plane.utils.exception_logger import log_exception
+from plane.db.models import APIActivityLog
+
+
+logger = logging.getLogger("plane.worker")
+
+
+def get_mongo_collection() -> Optional[Collection]:
+    """
+    Returns the MongoDB collection for external API activity logs.
+    """
+    if not MongoConnection.is_configured():
+        logger.info("MongoDB not configured")
+        return None
+
+    try:
+        return MongoConnection.get_collection("api_activity_logs")
+    except Exception as e:
+        logger.error(f"Error getting MongoDB collection: {str(e)}")
+        log_exception(e)
+        return None
+
+
+def safe_decode_body(content: bytes) -> Optional[str]:
+    """
+    Safely decodes request/response body content, handling binary data.
+    Returns "[Binary Content]" if the content is binary, or a string representation of the content.
+    Returns None if the content is None or empty.
+    """
+    # If the content is None, return None
+    if content is None:
+        return None
+
+    # If the content is an empty bytes object, return None
+    if content == b"":
+        return None
+
+    # Check if content is binary by looking for common binary file signatures
+    if content.startswith(b"\x89PNG") or content.startswith(b"\xff\xd8\xff") or content.startswith(b"%PDF"):
+        return "[Binary Content]"
+
+    try:
+        return content.decode("utf-8")
+    except UnicodeDecodeError:
+        return "[Could not decode content]"
+
+
+def log_to_mongo(log_document: Dict[str, Any]) -> bool:
+    """
+    Logs the request to MongoDB if available.
+    """
+    mongo_collection = get_mongo_collection()
+    if mongo_collection is None:
+        logger.error("MongoDB not configured")
+        return False
+
+    try:
+        mongo_collection.insert_one(log_document)
+        return True
+    except Exception as e:
+        log_exception(e)
+        return False
+
+
+def log_to_postgres(log_data: Dict[str, Any]) -> bool:
+    """
+    Fallback to logging to PostgreSQL if MongoDB is unavailable.
+    """
+    try:
+        APIActivityLog.objects.create(**log_data)
+        return True
+    except Exception as e:
+        log_exception(e)
+        return False
+
+
+@shared_task
+def process_logs(log_data: Dict[str, Any], mongo_log: Dict[str, Any]) -> None:
+    """
+    Process logs to save to MongoDB or Postgres based on the configuration
+    """
+
+    if MongoConnection.is_configured():
+        log_to_mongo(mongo_log)
+    else:
+        log_to_postgres(log_data)
diff --git a/apps/api/plane/bgtasks/magic_link_code_task.py b/apps/api/plane/bgtasks/magic_link_code_task.py
index d8267e697..eef7adea0 100644
--- a/apps/api/plane/bgtasks/magic_link_code_task.py
+++ b/apps/api/plane/bgtasks/magic_link_code_task.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Python imports
 import logging
 
@@ -8,10 +12,10 @@ from celery import shared_task
 # Third party imports
 from django.core.mail import EmailMultiAlternatives, get_connection
 from django.template.loader import render_to_string
-from django.utils.html import strip_tags
 
 # Module imports
 from plane.license.utils.instance_value import get_email_configuration
+from plane.utils.email import generate_plain_text_from_html
 from plane.utils.exception_logger import log_exception
 
 
@@ -33,7 +37,7 @@ def magic_link(email, key, token):
         context = {"code": token, "email": email}
 
         html_content = render_to_string("emails/auth/magic_signin.html", context)
-        text_content = strip_tags(html_content)
+        text_content = generate_plain_text_from_html(html_content)
 
         connection = get_connection(
             host=EMAIL_HOST,
diff --git a/apps/api/plane/bgtasks/notification_task.py b/apps/api/plane/bgtasks/notification_task.py
index 6e571c0b1..bfb72afa3 100644
--- a/apps/api/plane/bgtasks/notification_task.py
+++ b/apps/api/plane/bgtasks/notification_task.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Python imports
 import json
 import uuid
diff --git a/apps/api/plane/bgtasks/page_transaction_task.py b/apps/api/plane/bgtasks/page_transaction_task.py
index 402d0a3ee..8c2cfe7a0 100644
--- a/apps/api/plane/bgtasks/page_transaction_task.py
+++ b/apps/api/plane/bgtasks/page_transaction_task.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Python imports
 import logging
 
@@ -88,7 +92,6 @@ def page_transaction(new_description_html, old_description_html, page_id):
 
         has_existing_logs = PageLog.objects.filter(page_id=page_id).exists()
 
-
         # Extract all components in a single pass (optimized)
         old_components = extract_all_components(old_description_html)
         new_components = extract_all_components(new_description_html)
@@ -125,12 +128,9 @@ def page_transaction(new_description_html, old_description_html, page_id):
                     )
                 )
 
-
         # Bulk insert and cleanup
         if new_transactions:
-            PageLog.objects.bulk_create(
-                new_transactions, batch_size=50, ignore_conflicts=True
-            )
+            PageLog.objects.bulk_create(new_transactions, batch_size=50, ignore_conflicts=True)
 
         if deleted_transaction_ids:
             PageLog.objects.filter(transaction__in=deleted_transaction_ids).delete()
diff --git a/apps/api/plane/bgtasks/page_version_task.py b/apps/api/plane/bgtasks/page_version_task.py
index 4de2387be..7b41e3c44 100644
--- a/apps/api/plane/bgtasks/page_version_task.py
+++ b/apps/api/plane/bgtasks/page_version_task.py
@@ -1,37 +1,73 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Python imports
 import json
 
+
 # Third party imports
 from celery import shared_task
 
+# Django imports
+from django.utils import timezone
+
 # Module imports
 from plane.db.models import Page, PageVersion
 from plane.utils.exception_logger import log_exception
 
+PAGE_VERSION_TASK_TIMEOUT = 600
 
 @shared_task
-def page_version(page_id, existing_instance, user_id):
+def track_page_version(page_id, existing_instance, user_id):
     try:
         # Get the page
         page = Page.objects.get(id=page_id)
 
         # Get the current instance
         current_instance = json.loads(existing_instance) if existing_instance is not None else {}
+        sub_pages = {}
+
 
         # Create a version if description_html is updated
         if current_instance.get("description_html") != page.description_html:
-            # Create a new page version
-            PageVersion.objects.create(
-                page_id=page_id,
-                workspace_id=page.workspace_id,
-                description_html=page.description_html,
-                description_binary=page.description_binary,
-                owned_by_id=user_id,
-                last_saved_at=page.updated_at,
-                description_json=page.description,
-                description_stripped=page.description_stripped,
-            )
+            # Fetch the latest page version
+            page_version = PageVersion.objects.filter(page_id=page_id).order_by("-last_saved_at").first()
 
+            # Get the latest page version if it exists and is owned by the user
+            if (
+                page_version
+                and str(page_version.owned_by_id) == str(user_id)
+                and (timezone.now() - page_version.last_saved_at).total_seconds() <= PAGE_VERSION_TASK_TIMEOUT
+            ):
+                page_version.description_html = page.description_html
+                page_version.description_binary = page.description_binary
+                page_version.description_json = page.description
+                page_version.description_stripped = page.description_stripped
+                page_version.sub_pages_data = sub_pages
+                page_version.save(
+                    update_fields=[
+                        "description_html",
+                        "description_binary",
+                        "description_json",
+                        "description_stripped",
+                        "sub_pages_data",
+                        "updated_at"
+                    ]
+                )
+            else:
+                # Create a new page version
+                PageVersion.objects.create(
+                    page_id=page_id,
+                    workspace_id=page.workspace_id,
+                    description_json=page.description,
+                    description_html=page.description_html,
+                    description_binary=page.description_binary,
+                    description_stripped=page.description_stripped,
+                    owned_by_id=user_id,
+                    last_saved_at=timezone.now(),
+                    sub_pages_data=sub_pages,
+                )
             # If page versions are greater than 20 delete the oldest one
             if PageVersion.objects.filter(page_id=page_id).count() > 20:
                 # Delete the old page version
diff --git a/apps/api/plane/bgtasks/project_add_user_email_task.py b/apps/api/plane/bgtasks/project_add_user_email_task.py
index af6014695..1efe6bc46 100644
--- a/apps/api/plane/bgtasks/project_add_user_email_task.py
+++ b/apps/api/plane/bgtasks/project_add_user_email_task.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Python imports
 import logging
 
@@ -7,11 +11,11 @@ from celery import shared_task
 # Third party imports
 from django.core.mail import EmailMultiAlternatives, get_connection
 from django.template.loader import render_to_string
-from django.utils.html import strip_tags
 
 
 # Module imports
 from plane.license.utils.instance_value import get_email_configuration
+from plane.utils.email import generate_plain_text_from_html
 from plane.utils.exception_logger import log_exception
 from plane.db.models import ProjectMember
 from plane.db.models import User
@@ -55,7 +59,7 @@ def project_add_user_email(current_site, project_member_id, invitor_id):
 
         # Render the email template
         html_content = render_to_string("emails/notifications/project_addition.html", context)
-        text_content = strip_tags(html_content)
+        text_content = generate_plain_text_from_html(html_content)
         # Initialize the connection
         connection = get_connection(
             host=EMAIL_HOST,
diff --git a/apps/api/plane/bgtasks/project_invitation_task.py b/apps/api/plane/bgtasks/project_invitation_task.py
index b8eed5e45..86c10e90c 100644
--- a/apps/api/plane/bgtasks/project_invitation_task.py
+++ b/apps/api/plane/bgtasks/project_invitation_task.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Python imports
 import logging
 
@@ -8,11 +12,11 @@ from celery import shared_task
 # Third party imports
 from django.core.mail import EmailMultiAlternatives, get_connection
 from django.template.loader import render_to_string
-from django.utils.html import strip_tags
 
 # Module imports
 from plane.db.models import Project, ProjectMemberInvite, User
 from plane.license.utils.instance_value import get_email_configuration
+from plane.utils.email import generate_plain_text_from_html
 from plane.utils.exception_logger import log_exception
 
 
@@ -33,11 +37,12 @@ def project_invitation(email, project_id, token, current_site, invitor):
             "first_name": user.first_name,
             "project_name": project.name,
             "invitation_url": abs_url,
+            "current_site": current_site,
         }
 
         html_content = render_to_string("emails/invitations/project_invitation.html", context)
 
-        text_content = strip_tags(html_content)
+        text_content = generate_plain_text_from_html(html_content)
 
         project_member_invite.message = text_content
         project_member_invite.save()
diff --git a/apps/api/plane/bgtasks/recent_visited_task.py b/apps/api/plane/bgtasks/recent_visited_task.py
index eda297ce4..3d4f9e6e9 100644
--- a/apps/api/plane/bgtasks/recent_visited_task.py
+++ b/apps/api/plane/bgtasks/recent_visited_task.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Python imports
 from django.utils import timezone
 from django.db import DatabaseError
diff --git a/apps/api/plane/bgtasks/storage_metadata_task.py b/apps/api/plane/bgtasks/storage_metadata_task.py
index ea745053f..77f99e916 100644
--- a/apps/api/plane/bgtasks/storage_metadata_task.py
+++ b/apps/api/plane/bgtasks/storage_metadata_task.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Third party imports
 from celery import shared_task
 
diff --git a/apps/api/plane/bgtasks/user_activation_email_task.py b/apps/api/plane/bgtasks/user_activation_email_task.py
index 492564b3c..f7a2d3999 100644
--- a/apps/api/plane/bgtasks/user_activation_email_task.py
+++ b/apps/api/plane/bgtasks/user_activation_email_task.py
@@ -1,10 +1,13 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Python imports
 import logging
 
 # Django imports
 from django.core.mail import EmailMultiAlternatives, get_connection
 from django.template.loader import render_to_string
-from django.utils.html import strip_tags
 
 # Third party imports
 from celery import shared_task
@@ -12,6 +15,7 @@ from celery import shared_task
 # Module imports
 from plane.db.models import User
 from plane.license.utils.instance_value import get_email_configuration
+from plane.utils.email import generate_plain_text_from_html
 from plane.utils.exception_logger import log_exception
 
 
@@ -27,7 +31,7 @@ def user_activation_email(current_site, user_id):
         # Send email to user
         html_content = render_to_string("emails/user/user_activation.html", context)
 
-        text_content = strip_tags(html_content)
+        text_content = generate_plain_text_from_html(html_content)
         # Configure email connection from the database
         (
             EMAIL_HOST,
diff --git a/apps/api/plane/bgtasks/user_deactivation_email_task.py b/apps/api/plane/bgtasks/user_deactivation_email_task.py
index 2595d8055..81419606a 100644
--- a/apps/api/plane/bgtasks/user_deactivation_email_task.py
+++ b/apps/api/plane/bgtasks/user_deactivation_email_task.py
@@ -1,10 +1,13 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Python imports
 import logging
 
 # Django imports
 from django.core.mail import EmailMultiAlternatives, get_connection
 from django.template.loader import render_to_string
-from django.utils.html import strip_tags
 
 # Third party imports
 from celery import shared_task
@@ -12,6 +15,7 @@ from celery import shared_task
 # Module imports
 from plane.db.models import User
 from plane.license.utils.instance_value import get_email_configuration
+from plane.utils.email import generate_plain_text_from_html
 from plane.utils.exception_logger import log_exception
 
 
@@ -27,7 +31,7 @@ def user_deactivation_email(current_site, user_id):
         # Send email to user
         html_content = render_to_string("emails/user/user_deactivation.html", context)
 
-        text_content = strip_tags(html_content)
+        text_content = generate_plain_text_from_html(html_content)
         # Configure email connection from the database
         (
             EMAIL_HOST,
diff --git a/apps/api/plane/bgtasks/user_email_update_task.py b/apps/api/plane/bgtasks/user_email_update_task.py
index 667de368c..48b9c02db 100644
--- a/apps/api/plane/bgtasks/user_email_update_task.py
+++ b/apps/api/plane/bgtasks/user_email_update_task.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Python imports
 import logging
 
@@ -7,10 +11,10 @@ from celery import shared_task
 # Django imports
 from django.core.mail import EmailMultiAlternatives, get_connection
 from django.template.loader import render_to_string
-from django.utils.html import strip_tags
 
 # Module imports
 from plane.license.utils.instance_value import get_email_configuration
+from plane.utils.email import generate_plain_text_from_html
 from plane.utils.exception_logger import log_exception
 
 
@@ -32,7 +36,7 @@ def send_email_update_magic_code(email, token):
         context = {"code": token, "email": email}
 
         html_content = render_to_string("emails/auth/magic_signin.html", context)
-        text_content = strip_tags(html_content)
+        text_content = generate_plain_text_from_html(html_content)
 
         connection = get_connection(
             host=EMAIL_HOST,
@@ -83,7 +87,7 @@ def send_email_update_confirmation(email):
         context = {"email": email}
 
         html_content = render_to_string("emails/user/email_updated.html", context)
-        text_content = strip_tags(html_content)
+        text_content = generate_plain_text_from_html(html_content)
 
         connection = get_connection(
             host=EMAIL_HOST,
diff --git a/apps/api/plane/bgtasks/webhook_task.py b/apps/api/plane/bgtasks/webhook_task.py
index 3d04a65b7..6543c3845 100644
--- a/apps/api/plane/bgtasks/webhook_task.py
+++ b/apps/api/plane/bgtasks/webhook_task.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 import hashlib
 import hmac
 import json
@@ -16,7 +20,6 @@ from django.db.models import Prefetch
 from django.core.mail import EmailMultiAlternatives, get_connection
 from django.core.serializers.json import DjangoJSONEncoder
 from django.template.loader import render_to_string
-from django.utils.html import strip_tags
 from django.core.exceptions import ObjectDoesNotExist
 
 # Module imports
@@ -47,6 +50,7 @@ from plane.db.models import (
     IssueAssignee,
 )
 from plane.license.utils.instance_value import get_email_configuration
+from plane.utils.email import generate_plain_text_from_html
 from plane.utils.exception_logger import log_exception
 from plane.settings.mongo import MongoConnection
 
@@ -218,7 +222,7 @@ def send_webhook_deactivation_email(webhook_id: str, receiver_id: str, current_s
             "webhook_url": f"{current_site}/{str(webhook.workspace.slug)}/settings/webhooks/{str(webhook.id)}",
         }
         html_content = render_to_string("emails/notifications/webhook-deactivate.html", context)
-        text_content = strip_tags(html_content)
+        text_content = generate_plain_text_from_html(html_content)
 
         # Set the email connection
         connection = get_connection(
diff --git a/apps/api/plane/bgtasks/work_item_link_task.py b/apps/api/plane/bgtasks/work_item_link_task.py
index 442396c7f..5cf0fbb19 100644
--- a/apps/api/plane/bgtasks/work_item_link_task.py
+++ b/apps/api/plane/bgtasks/work_item_link_task.py
@@ -13,7 +13,7 @@ from bs4 import BeautifulSoup
 from urllib.parse import urlparse, urljoin
 import base64
 import ipaddress
-from typing import Dict, Any
+from typing import Dict, Any, Tuple
 from typing import Optional
 from plane.db.models import IssueLink
 from plane.utils.exception_logger import log_exception
@@ -66,6 +66,52 @@ def validate_url_ip(url: str) -> None:
 MAX_REDIRECTS = 5
 
 
+def safe_get(
+    url: str,
+    headers: Optional[Dict[str, str]] = None,
+    timeout: int = 1,
+) -> Tuple[requests.Response, str]:
+    """
+    Perform a GET request that validates every redirect hop against private IPs.
+    Prevents SSRF by ensuring no redirect lands on a private/internal address.
+
+    Args:
+        url: The URL to fetch
+        headers: Optional request headers
+        timeout: Request timeout in seconds
+
+    Returns:
+        A tuple of (final Response object, final URL after redirects)
+
+    Raises:
+        ValueError: If any URL in the redirect chain points to a private IP
+        requests.RequestException: On network errors
+        RuntimeError: If max redirects exceeded
+    """
+    validate_url_ip(url)
+
+    current_url = url
+    response = requests.get(
+        current_url, headers=headers, timeout=timeout, allow_redirects=False
+    )
+
+    redirect_count = 0
+    while response.is_redirect:
+        if redirect_count >= MAX_REDIRECTS:
+            raise RuntimeError(f"Too many redirects for URL: {url}")
+        redirect_url = response.headers.get("Location")
+        if not redirect_url:
+            break
+        current_url = urljoin(current_url, redirect_url)
+        validate_url_ip(current_url)
+        redirect_count += 1
+        response = requests.get(
+            current_url, headers=headers, timeout=timeout, allow_redirects=False
+        )
+
+    return response, current_url
+
+
 def crawl_work_item_link_title_and_favicon(url: str) -> Dict[str, Any]:
     """
     Crawls a URL to extract the title and favicon.
@@ -86,26 +132,8 @@ def crawl_work_item_link_title_and_favicon(url: str) -> Dict[str, Any]:
         title = None
         final_url = url
 
-        validate_url_ip(final_url)
-
         try:
-            # Manually follow redirects to validate each URL before requesting
-            redirect_count = 0
-            response = requests.get(final_url, headers=headers, timeout=1, allow_redirects=False)
-
-            while response.is_redirect and redirect_count < MAX_REDIRECTS:
-                redirect_url = response.headers.get("Location")
-                if not redirect_url:
-                    break
-                # Resolve relative redirects against current URL
-                final_url = urljoin(final_url, redirect_url)
-                # Validate the redirect target BEFORE making the request
-                validate_url_ip(final_url)
-                redirect_count += 1
-                response = requests.get(final_url, headers=headers, timeout=1, allow_redirects=False)
-
-            if redirect_count >= MAX_REDIRECTS:
-                logger.warning(f"Too many redirects for URL: {url}")
+            response, final_url = safe_get(url, headers=headers)
 
             soup = BeautifulSoup(response.content, "html.parser")
             title_tag = soup.find("title")
@@ -113,8 +141,10 @@ def crawl_work_item_link_title_and_favicon(url: str) -> Dict[str, Any]:
 
         except requests.RequestException as e:
             logger.warning(f"Failed to fetch HTML for title: {str(e)}")
+        except (ValueError, RuntimeError) as e:
+            logger.warning(f"URL validation failed: {str(e)}")
 
-        # Fetch and encode favicon using final URL (after redirects)
+        # Fetch and encode favicon using final URL (after redirects) for correct relative href resolution
         favicon_base64 = fetch_and_encode_favicon(headers, soup, final_url)
 
         # Prepare result
@@ -204,9 +234,7 @@ def fetch_and_encode_favicon(
                 "favicon_base64": f"data:image/svg+xml;base64,{DEFAULT_FAVICON}",
             }
 
-        validate_url_ip(favicon_url)
-
-        response = requests.get(favicon_url, headers=headers, timeout=1)
+        response, _ = safe_get(favicon_url, headers=headers)
 
         # Get content type
         content_type = response.headers.get("content-type", "image/x-icon")
diff --git a/apps/api/plane/bgtasks/workspace_invitation_task.py b/apps/api/plane/bgtasks/workspace_invitation_task.py
index f7480b36a..f293cc16f 100644
--- a/apps/api/plane/bgtasks/workspace_invitation_task.py
+++ b/apps/api/plane/bgtasks/workspace_invitation_task.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Python imports
 import logging
 
@@ -7,11 +11,11 @@ from celery import shared_task
 # Django imports
 from django.core.mail import EmailMultiAlternatives, get_connection
 from django.template.loader import render_to_string
-from django.utils.html import strip_tags
 
 # Module imports
 from plane.db.models import User, Workspace, WorkspaceMemberInvite
 from plane.license.utils.instance_value import get_email_configuration
+from plane.utils.email import generate_plain_text_from_html
 from plane.utils.exception_logger import log_exception
 
 
@@ -25,7 +29,7 @@ def workspace_invitation(email, workspace_id, token, current_site, inviter):
 
         # Relative link
         relative_link = (
-            f"/workspace-invitations/?invitation_id={workspace_member_invite.id}&email={email}&slug={workspace.slug}"  # noqa: E501
+            f"/workspace-invitations/?invitation_id={workspace_member_invite.id}&slug={workspace.slug}&token={token}"  # noqa: E501
         )
 
         # The complete url including the domain
@@ -53,7 +57,7 @@ def workspace_invitation(email, workspace_id, token, current_site, inviter):
 
         html_content = render_to_string("emails/invitations/workspace_invitation.html", context)
 
-        text_content = strip_tags(html_content)
+        text_content = generate_plain_text_from_html(html_content)
 
         workspace_member_invite.message = text_content
         workspace_member_invite.save()
diff --git a/apps/api/plane/bgtasks/workspace_seed_task.py b/apps/api/plane/bgtasks/workspace_seed_task.py
index 57ac02ec1..218ba2a71 100644
--- a/apps/api/plane/bgtasks/workspace_seed_task.py
+++ b/apps/api/plane/bgtasks/workspace_seed_task.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Python imports
 import os
 import json
@@ -21,7 +25,7 @@ from plane.db.models import (
     WorkspaceMember,
     Project,
     ProjectMember,
-    IssueUserProperty,
+    ProjectUserProperty,
     State,
     Label,
     Issue,
@@ -94,7 +98,7 @@ def create_project_and_member(workspace: Workspace, bot_user: User) -> Dict[int,
         project_seed.pop("name", None)
         project_seed.pop("identifier", None)
 
-        project = Project.objects.create(
+        project = Project(
             **project_seed,
             workspace=workspace,
             name=workspace.name,  # Use workspace name
@@ -105,58 +109,63 @@ def create_project_and_member(workspace: Workspace, bot_user: User) -> Dict[int,
             module_view=True,
             issue_views_view=True,
         )
+        project.save(created_by_id=bot_user.id, disable_auto_set_user=True)
 
         # Create project members
-        ProjectMember.objects.bulk_create([
-            ProjectMember(
-                project=project,
-                member_id=workspace_member["member_id"],
-                role=workspace_member["role"],
-                workspace_id=workspace.id,
-                created_by_id=bot_user.id,
-            )
-            for workspace_member in workspace_members
-        ])
+        ProjectMember.objects.bulk_create(
+            [
+                ProjectMember(
+                    project=project,
+                    member_id=workspace_member["member_id"],
+                    role=workspace_member["role"],
+                    workspace_id=workspace.id,
+                    created_by_id=bot_user.id,
+                )
+                for workspace_member in workspace_members
+            ]
+        )
 
         # Create issue user properties
-        IssueUserProperty.objects.bulk_create([
-            IssueUserProperty(
-                project=project,
-                user_id=workspace_member["member_id"],
-                workspace_id=workspace.id,
-                display_filters={
-                    "layout": "list",
-                    "calendar": {"layout": "month", "show_weekends": False},
-                    "group_by": "state",
-                    "order_by": "sort_order",
-                    "sub_issue": True,
-                    "sub_group_by": None,
-                    "show_empty_groups": True,
-                },
-                display_properties={
-                    "key": True,
-                    "link": True,
-                    "cycle": False,
-                    "state": True,
-                    "labels": False,
-                    "modules": False,
-                    "assignee": True,
-                    "due_date": False,
-                    "estimate": True,
-                    "priority": True,
-                    "created_on": True,
-                    "issue_type": True,
-                    "start_date": False,
-                    "updated_on": True,
-                    "customer_count": True,
-                    "sub_issue_count": False,
-                    "attachment_count": False,
-                    "customer_request_count": True,
-                },
-                created_by_id=bot_user.id,
-            )
-            for workspace_member in workspace_members
-        ])
+        ProjectUserProperty.objects.bulk_create(
+            [
+                ProjectUserProperty(
+                    project=project,
+                    user_id=workspace_member["member_id"],
+                    workspace_id=workspace.id,
+                    display_filters={
+                        "layout": "list",
+                        "calendar": {"layout": "month", "show_weekends": False},
+                        "group_by": "state",
+                        "order_by": "sort_order",
+                        "sub_issue": True,
+                        "sub_group_by": None,
+                        "show_empty_groups": True,
+                    },
+                    display_properties={
+                        "key": True,
+                        "link": True,
+                        "cycle": False,
+                        "state": True,
+                        "labels": False,
+                        "modules": False,
+                        "assignee": True,
+                        "due_date": False,
+                        "estimate": True,
+                        "priority": True,
+                        "created_on": True,
+                        "issue_type": True,
+                        "start_date": False,
+                        "updated_on": True,
+                        "customer_count": True,
+                        "sub_issue_count": False,
+                        "attachment_count": False,
+                        "customer_request_count": True,
+                    },
+                    created_by_id=bot_user.id,
+                )
+                for workspace_member in workspace_members
+            ]
+        )
         # update map
         projects_map[project_id] = project.id
         logger.info(f"Task: workspace_seed_task -> Project {project_id} created")
@@ -187,13 +196,13 @@ def create_project_states(
         state_id = state_seed.pop("id")
         project_id = state_seed.pop("project_id")
 
-        state = State.objects.create(
+        state = State(
             **state_seed,
             project_id=project_map[project_id],
             workspace=workspace,
             created_by_id=bot_user.id,
         )
-
+        state.save(created_by_id=bot_user.id, disable_auto_set_user=True)
         state_map[state_id] = state.id
         logger.info(f"Task: workspace_seed_task -> State {state_id} created")
     return state_map
@@ -220,12 +229,13 @@ def create_project_labels(
     for label_seed in label_seeds:
         label_id = label_seed.pop("id")
         project_id = label_seed.pop("project_id")
-        label = Label.objects.create(
+        label = Label(
             **label_seed,
             project_id=project_map[project_id],
             workspace=workspace,
             created_by_id=bot_user.id,
         )
+        label.save(created_by_id=bot_user.id, disable_auto_set_user=True)
         label_map[label_id] = label.id
 
         logger.info(f"Task: workspace_seed_task -> Label {label_id} created")
@@ -272,13 +282,14 @@ def create_project_issues(
         cycle_id = issue_seed.pop("cycle_id")
         module_ids = issue_seed.pop("module_ids")
 
-        issue = Issue.objects.create(
+        issue = Issue(
             **issue_seed,
             state_id=states_map[state_id],
             project_id=project_map[project_id],
             workspace=workspace,
             created_by_id=bot_user.id,
         )
+        issue.save(created_by_id=bot_user.id, disable_auto_set_user=True)
         IssueSequence.objects.create(
             issue=issue,
             project_id=project_map[project_id],
@@ -347,12 +358,12 @@ def create_pages(workspace: Workspace, project_map: Dict[int, uuid.UUID], bot_us
     for page_seed in page_seeds:
         page_id = page_seed.pop("id")
 
-        page = Page.objects.create(
+        page = Page(
             workspace_id=workspace.id,
             is_global=False,
             access=page_seed.get("access", Page.PUBLIC_ACCESS),
             name=page_seed.get("name"),
-            description=page_seed.get("description", {}),
+            description_json=page_seed.get("description_json", {}),
             description_html=page_seed.get("description_html", "<p></p>"),
             description_binary=page_seed.get("description_binary", None),
             description_stripped=page_seed.get("description_stripped", None),
@@ -361,16 +372,18 @@ def create_pages(workspace: Workspace, project_map: Dict[int, uuid.UUID], bot_us
             owned_by_id=bot_user.id,
         )
 
+        page.save(created_by_id=bot_user.id, disable_auto_set_user=True)
+
         logger.info(f"Task: workspace_seed_task -> Page {page_id} created")
         if page_seed.get("project_id") and page_seed.get("type") == "PROJECT":
-            ProjectPage.objects.create(
+            project_page = ProjectPage(
                 workspace_id=workspace.id,
                 project_id=project_map[page_seed.get("project_id")],
                 page_id=page.id,
                 created_by_id=bot_user.id,
                 updated_by_id=bot_user.id,
             )
-
+            project_page.save(created_by_id=bot_user.id, disable_auto_set_user=True)
             logger.info(f"Task: workspace_seed_task -> Project Page {page_id} created")
     return
 
@@ -410,7 +423,7 @@ def create_cycles(workspace: Workspace, project_map: Dict[int, uuid.UUID], bot_u
                 start_date = timezone.now() + timedelta(days=14)
                 end_date = start_date + timedelta(days=14)
 
-        cycle = Cycle.objects.create(
+        cycle = Cycle(
             **cycle_seed,
             start_date=start_date,
             end_date=end_date,
@@ -419,6 +432,7 @@ def create_cycles(workspace: Workspace, project_map: Dict[int, uuid.UUID], bot_u
             created_by_id=bot_user.id,
             owned_by_id=bot_user.id,
         )
+        cycle.save(created_by_id=bot_user.id, disable_auto_set_user=True)
 
         cycle_map[cycle_id] = cycle.id
         logger.info(f"Task: workspace_seed_task -> Cycle {cycle_id} created")
@@ -446,7 +460,7 @@ def create_modules(workspace: Workspace, project_map: Dict[int, uuid.UUID], bot_
         start_date = timezone.now() + timedelta(days=index * 2)
         end_date = start_date + timedelta(days=14)
 
-        module = Module.objects.create(
+        module = Module(
             **module_seed,
             start_date=start_date,
             target_date=end_date,
@@ -454,6 +468,7 @@ def create_modules(workspace: Workspace, project_map: Dict[int, uuid.UUID], bot_
             workspace=workspace,
             created_by_id=bot_user.id,
         )
+        module.save(created_by_id=bot_user.id, disable_auto_set_user=True)
         module_map[module_id] = module.id
         logger.info(f"Task: workspace_seed_task -> Module {module_id} created")
     return module_map
@@ -474,13 +489,15 @@ def create_views(workspace: Workspace, project_map: Dict[int, uuid.UUID], bot_us
 
     for view_seed in view_seeds:
         project_id = view_seed.pop("project_id")
-        IssueView.objects.create(
+        view_seed.pop("id")
+        issue_view = IssueView(
             **view_seed,
             project_id=project_map[project_id],
             workspace=workspace,
             created_by_id=bot_user.id,
             owned_by_id=bot_user.id,
         )
+        issue_view.save(created_by_id=bot_user.id, disable_auto_set_user=True)
 
 
 @shared_task
@@ -514,6 +531,14 @@ def workspace_seed(workspace_id: uuid.UUID) -> None:
             is_password_autoset=True,
         )
 
+        # Add bot user to workspace as member
+        WorkspaceMember.objects.create(
+            workspace=workspace,
+            member=bot_user,
+            role=20,
+            company_role="",
+        )
+
         # Create a project with the same name as workspace
         project_map = create_project_and_member(workspace, bot_user)
 
diff --git a/apps/api/plane/celery.py b/apps/api/plane/celery.py
index 828f4a6d5..562d04856 100644
--- a/apps/api/plane/celery.py
+++ b/apps/api/plane/celery.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Python imports
 import os
 import logging
diff --git a/apps/api/plane/db/__init__.py b/apps/api/plane/db/__init__.py
index e69de29bb..917e26db4 100644
--- a/apps/api/plane/db/__init__.py
+++ b/apps/api/plane/db/__init__.py
@@ -0,0 +1,4 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
diff --git a/apps/api/plane/db/apps.py b/apps/api/plane/db/apps.py
index 7d4919d08..92c55908e 100644
--- a/apps/api/plane/db/apps.py
+++ b/apps/api/plane/db/apps.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 from django.apps import AppConfig
 
 
diff --git a/apps/api/plane/db/management/__init__.py b/apps/api/plane/db/management/__init__.py
index e69de29bb..917e26db4 100644
--- a/apps/api/plane/db/management/__init__.py
+++ b/apps/api/plane/db/management/__init__.py
@@ -0,0 +1,4 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
diff --git a/apps/api/plane/db/management/commands/__init__.py b/apps/api/plane/db/management/commands/__init__.py
index e69de29bb..917e26db4 100644
--- a/apps/api/plane/db/management/commands/__init__.py
+++ b/apps/api/plane/db/management/commands/__init__.py
@@ -0,0 +1,4 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
diff --git a/apps/api/plane/db/management/commands/activate_user.py b/apps/api/plane/db/management/commands/activate_user.py
index 5ebe8b740..3488a9865 100644
--- a/apps/api/plane/db/management/commands/activate_user.py
+++ b/apps/api/plane/db/management/commands/activate_user.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Django imports
 from django.core.management import BaseCommand, CommandError
 
diff --git a/apps/api/plane/db/management/commands/clear_cache.py b/apps/api/plane/db/management/commands/clear_cache.py
index 1c66b3eaf..502778f1c 100644
--- a/apps/api/plane/db/management/commands/clear_cache.py
+++ b/apps/api/plane/db/management/commands/clear_cache.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Django imports
 from django.core.cache import cache
 from django.core.management import BaseCommand
diff --git a/apps/api/plane/db/management/commands/copy_issue_comment_to_description.py b/apps/api/plane/db/management/commands/copy_issue_comment_to_description.py
index 8813f34db..ec106795b 100644
--- a/apps/api/plane/db/management/commands/copy_issue_comment_to_description.py
+++ b/apps/api/plane/db/management/commands/copy_issue_comment_to_description.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Django imports
 from django.core.management.base import BaseCommand
 from django.db import transaction
diff --git a/apps/api/plane/db/management/commands/create_bucket.py b/apps/api/plane/db/management/commands/create_bucket.py
index 555fe0aa8..7a39a3a7f 100644
--- a/apps/api/plane/db/management/commands/create_bucket.py
+++ b/apps/api/plane/db/management/commands/create_bucket.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Python imports
 import os
 import boto3
diff --git a/apps/api/plane/db/management/commands/create_dummy_data.py b/apps/api/plane/db/management/commands/create_dummy_data.py
index 220576b8f..c85c1e017 100644
--- a/apps/api/plane/db/management/commands/create_dummy_data.py
+++ b/apps/api/plane/db/management/commands/create_dummy_data.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Django imports
 from typing import Any
 from django.core.management.base import BaseCommand, CommandError
diff --git a/apps/api/plane/db/management/commands/create_instance_admin.py b/apps/api/plane/db/management/commands/create_instance_admin.py
index 8d5a912e0..3834918d4 100644
--- a/apps/api/plane/db/management/commands/create_instance_admin.py
+++ b/apps/api/plane/db/management/commands/create_instance_admin.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Django imports
 from django.core.management.base import BaseCommand, CommandError
 
diff --git a/apps/api/plane/db/management/commands/create_project_member.py b/apps/api/plane/db/management/commands/create_project_member.py
index d9b46524c..2bd975578 100644
--- a/apps/api/plane/db/management/commands/create_project_member.py
+++ b/apps/api/plane/db/management/commands/create_project_member.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Django imports
 from typing import Any
 from django.core.management import BaseCommand, CommandError
@@ -8,7 +12,7 @@ from plane.db.models import (
     WorkspaceMember,
     ProjectMember,
     Project,
-    IssueUserProperty,
+    ProjectUserProperty,
 )
 
 
@@ -47,27 +51,18 @@ class Command(BaseCommand):
             if not WorkspaceMember.objects.filter(workspace=project.workspace, member=user, is_active=True).exists():
                 raise CommandError("User not member in workspace")
 
-            # Get the smallest sort order
-            smallest_sort_order = (
-                ProjectMember.objects.filter(workspace_id=project.workspace_id).order_by("sort_order").first()
-            )
-
-            if smallest_sort_order:
-                sort_order = smallest_sort_order.sort_order - 1000
-            else:
-                sort_order = 65535
 
             if ProjectMember.objects.filter(project=project, member=user).exists():
                 # Update the project member
                 ProjectMember.objects.filter(project=project, member=user).update(
-                    is_active=True, sort_order=sort_order, role=role
+                    is_active=True, role=role
                 )
             else:
                 # Create the project member
-                ProjectMember.objects.create(project=project, member=user, role=role, sort_order=sort_order)
+                ProjectMember.objects.create(project=project, member=user, role=role)
 
             # Issue Property
-            IssueUserProperty.objects.get_or_create(user=user, project=project)
+            ProjectUserProperty.objects.get_or_create(user=user, project=project)
 
             # Success message
             self.stdout.write(self.style.SUCCESS(f"User {user_email} added to project {project_id}"))
diff --git a/apps/api/plane/db/management/commands/fix_duplicate_sequences.py b/apps/api/plane/db/management/commands/fix_duplicate_sequences.py
index 2b262606a..70624fbc2 100644
--- a/apps/api/plane/db/management/commands/fix_duplicate_sequences.py
+++ b/apps/api/plane/db/management/commands/fix_duplicate_sequences.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Django imports
 from django.core.management.base import BaseCommand, CommandError
 from django.db.models import Max
diff --git a/apps/api/plane/db/management/commands/reset_password.py b/apps/api/plane/db/management/commands/reset_password.py
index 9e483f51e..5da607c6c 100644
--- a/apps/api/plane/db/management/commands/reset_password.py
+++ b/apps/api/plane/db/management/commands/reset_password.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Python imports
 import getpass
 
diff --git a/apps/api/plane/db/management/commands/sync_issue_description_version.py b/apps/api/plane/db/management/commands/sync_issue_description_version.py
index 04e608a3c..0aac4bb15 100644
--- a/apps/api/plane/db/management/commands/sync_issue_description_version.py
+++ b/apps/api/plane/db/management/commands/sync_issue_description_version.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Django imports
 from django.core.management.base import BaseCommand
 
diff --git a/apps/api/plane/db/management/commands/sync_issue_version.py b/apps/api/plane/db/management/commands/sync_issue_version.py
index 6c9a2cdac..a7ee98fa7 100644
--- a/apps/api/plane/db/management/commands/sync_issue_version.py
+++ b/apps/api/plane/db/management/commands/sync_issue_version.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Django imports
 from django.core.management.base import BaseCommand
 
diff --git a/apps/api/plane/db/management/commands/test_email.py b/apps/api/plane/db/management/commands/test_email.py
index 22841a671..103b239b1 100644
--- a/apps/api/plane/db/management/commands/test_email.py
+++ b/apps/api/plane/db/management/commands/test_email.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 from django.core.mail import EmailMultiAlternatives, get_connection
 from django.core.management import BaseCommand, CommandError
 from django.template.loader import render_to_string
diff --git a/apps/api/plane/db/management/commands/update_bucket.py b/apps/api/plane/db/management/commands/update_bucket.py
index 47c28ff73..79f7eab4e 100644
--- a/apps/api/plane/db/management/commands/update_bucket.py
+++ b/apps/api/plane/db/management/commands/update_bucket.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Python imports
 import os
 import boto3
diff --git a/apps/api/plane/db/management/commands/update_deleted_workspace_slug.py b/apps/api/plane/db/management/commands/update_deleted_workspace_slug.py
index 838325354..067afe231 100644
--- a/apps/api/plane/db/management/commands/update_deleted_workspace_slug.py
+++ b/apps/api/plane/db/management/commands/update_deleted_workspace_slug.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 from django.core.management.base import BaseCommand
 from django.db import transaction
 from plane.db.models import Workspace
diff --git a/apps/api/plane/db/management/commands/wait_for_db.py b/apps/api/plane/db/management/commands/wait_for_db.py
index ec971f83a..8a9fdbc3d 100644
--- a/apps/api/plane/db/management/commands/wait_for_db.py
+++ b/apps/api/plane/db/management/commands/wait_for_db.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 import time
 from django.db import connections
 from django.db.utils import OperationalError
diff --git a/apps/api/plane/db/management/commands/wait_for_migrations.py b/apps/api/plane/db/management/commands/wait_for_migrations.py
index 13b251de5..b61d011b2 100644
--- a/apps/api/plane/db/management/commands/wait_for_migrations.py
+++ b/apps/api/plane/db/management/commands/wait_for_migrations.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # wait_for_migrations.py
 import time
 from django.core.management.base import BaseCommand
diff --git a/apps/api/plane/db/migrations/0113_webhook_version.py b/apps/api/plane/db/migrations/0113_webhook_version.py
new file mode 100644
index 000000000..4ffbf3bb7
--- /dev/null
+++ b/apps/api/plane/db/migrations/0113_webhook_version.py
@@ -0,0 +1,66 @@
+# Generated by Django 4.2.26 on 2025-12-15 10:29
+
+from django.db import migrations, models
+import plane.db.models.workspace
+
+
+def set_default_product_tour_to_false():
+    return {
+        "work_items": False,
+        "cycles": False,
+        "modules": False,
+        "intake": False,
+        "pages": False,
+    }
+
+def get_default_product_tour():
+    return {
+        "work_items": True,
+        "cycles": True,
+        "modules": True,
+        "intake": True,
+        "pages": True,
+    }
+
+
+def populate_product_tour(apps, _schema_editor):
+    WorkspaceUserProperties = apps.get_model('db', 'WorkspaceUserProperties')
+    default_value = get_default_product_tour()
+    # Use bulk update for better performance
+    WorkspaceUserProperties.objects.all().update(product_tour=default_value)
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('db', '0112_auto_20251124_0603'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='webhook',
+            name='version',
+            field=models.CharField(default='v1', max_length=50),
+        ),
+        migrations.AddField(
+            model_name='profile',
+            name='is_navigation_tour_completed',
+            field=models.BooleanField(default=False),
+        ),
+        migrations.AddField(
+            model_name='workspaceuserproperties',
+            name='product_tour',
+            field=models.JSONField(default=set_default_product_tour_to_false),
+        ),
+         migrations.AddField(
+            model_name='apitoken',
+            name='allowed_rate_limit',
+            field=models.CharField(default='60/min', max_length=255),
+        ),
+         migrations.AddField(
+            model_name='profile',
+            name='is_subscribed_to_changelog',
+            field=models.BooleanField(default=False),
+        ),
+        migrations.RunPython(populate_product_tour, reverse_code=migrations.RunPython.noop),
+    ]
diff --git a/apps/api/plane/db/migrations/0114_projectuserproperty_delete_issueuserproperty_and_more.py b/apps/api/plane/db/migrations/0114_projectuserproperty_delete_issueuserproperty_and_more.py
new file mode 100644
index 000000000..9a18fbafc
--- /dev/null
+++ b/apps/api/plane/db/migrations/0114_projectuserproperty_delete_issueuserproperty_and_more.py
@@ -0,0 +1,50 @@
+# Generated by Django 4.2.22 on 2026-01-05 08:35
+
+from django.db import migrations, models
+import plane.db.models.project
+import django.db.models.deletion
+from django.conf import settings
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('db', '0113_webhook_version'),
+    ]
+
+    operations = [
+        migrations.AlterModelTable(
+            name='issueuserproperty',
+            table='project_user_properties',
+        ),
+        migrations.RenameModel(
+            old_name='IssueUserProperty',
+            new_name='ProjectUserProperty',
+        ),
+        migrations.AddField(
+            model_name='projectuserproperty',
+            name='preferences',
+            field=models.JSONField(default=plane.db.models.project.get_default_preferences),
+        ),
+        migrations.AddField(
+            model_name='projectuserproperty',
+            name='sort_order',
+            field=models.FloatField(default=65535),
+        ),        
+        migrations.AlterModelOptions(
+            name='projectuserproperty',
+            options={'ordering': ('-created_at',), 'verbose_name': 'Project User Property', 'verbose_name_plural': 'Project User Properties'},
+        ),
+        migrations.RemoveConstraint(
+            model_name='projectuserproperty',
+            name='issue_user_property_unique_user_project_when_deleted_at_null',
+        ),
+        migrations.AlterField(
+            model_name='projectuserproperty',
+            name='user',
+            field=models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='project_property_user', to=settings.AUTH_USER_MODEL),
+        ),
+        migrations.AddConstraint(
+            model_name='projectuserproperty',
+            constraint=models.UniqueConstraint(condition=models.Q(('deleted_at__isnull', True)), fields=('user', 'project'), name='project_user_property_unique_user_project_when_deleted_at_null'),
+        ),
+    ]
\ No newline at end of file
diff --git a/apps/api/plane/db/migrations/0115_auto_20260105_1406.py b/apps/api/plane/db/migrations/0115_auto_20260105_1406.py
new file mode 100644
index 000000000..b9ac71d47
--- /dev/null
+++ b/apps/api/plane/db/migrations/0115_auto_20260105_1406.py
@@ -0,0 +1,51 @@
+# Generated by Django 4.2.22 on 2026-01-05 08:36
+
+from django.db import migrations
+
+def move_issue_user_properties_to_project_user_properties(apps, schema_editor):
+    ProjectMember = apps.get_model('db', 'ProjectMember')
+    ProjectUserProperty = apps.get_model('db', 'ProjectUserProperty')
+
+    # Get all project members
+    project_members = ProjectMember.objects.filter(deleted_at__isnull=True).values('member_id', 'project_id', 'preferences', 'sort_order')
+
+    # create a mapping with consistent ordering 
+    pm_dict = {
+        (pm['member_id'], pm['project_id']): pm
+        for pm in project_members
+    }
+    
+    # Get all project user properties
+    properties_to_update = []
+    for projectuserproperty in ProjectUserProperty.objects.filter(deleted_at__isnull=True):
+        pm = pm_dict.get((projectuserproperty.user_id, projectuserproperty.project_id))
+        if pm:
+            projectuserproperty.preferences = pm['preferences']
+            projectuserproperty.sort_order = pm['sort_order']
+            properties_to_update.append(projectuserproperty)
+
+    ProjectUserProperty.objects.bulk_update(properties_to_update, ['preferences', 'sort_order'], batch_size=2000)
+
+
+
+def migrate_existing_api_tokens(apps, schema_editor):
+    APIToken = apps.get_model('db', 'APIToken')
+    
+    # Update all the existing non-service api tokens to not have a workspace
+    APIToken.objects.filter(is_service=False, user__is_bot=False).update(
+        workspace_id=None,
+
+    )
+    return
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('db', '0114_projectuserproperty_delete_issueuserproperty_and_more'),
+    ]
+
+    operations = [
+        migrations.RunPython(move_issue_user_properties_to_project_user_properties, reverse_code=migrations.RunPython.noop),
+        migrations.RunPython(migrate_existing_api_tokens, reverse_code=migrations.RunPython.noop),
+    ]
diff --git a/apps/api/plane/db/migrations/0116_workspacemember_explored_features_and_more.py b/apps/api/plane/db/migrations/0116_workspacemember_explored_features_and_more.py
new file mode 100644
index 000000000..38e231e0e
--- /dev/null
+++ b/apps/api/plane/db/migrations/0116_workspacemember_explored_features_and_more.py
@@ -0,0 +1,38 @@
+# Generated by Django 4.2.27 on 2026-01-13 10:38
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('db', '0115_auto_20260105_1406'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='profile',
+            name='notification_view_mode',
+            field=models.CharField(choices=[('full', 'Full'), ('compact', 'Compact')], default='full', max_length=255),
+        ),
+        migrations.AddField(
+            model_name='user',
+            name='is_password_reset_required',
+            field=models.BooleanField(default=False),
+        ),
+        migrations.AddField(
+            model_name='workspacemember',
+            name='explored_features',
+            field=models.JSONField(default=dict),
+        ),
+        migrations.AddField(
+            model_name='workspacemember',
+            name='getting_started_checklist',
+            field=models.JSONField(default=dict),
+        ),
+        migrations.AddField(
+            model_name='workspacemember',
+            name='tips',
+            field=models.JSONField(default=dict),
+        ),
+    ]
diff --git a/apps/api/plane/db/migrations/0117_rename_description_draftissue_description_json_and_more.py b/apps/api/plane/db/migrations/0117_rename_description_draftissue_description_json_and_more.py
new file mode 100644
index 000000000..2317a4cdd
--- /dev/null
+++ b/apps/api/plane/db/migrations/0117_rename_description_draftissue_description_json_and_more.py
@@ -0,0 +1,28 @@
+# Generated by Django 4.2.22 on 2026-01-15 09:02
+
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('db', '0116_workspacemember_explored_features_and_more'),
+    ]
+
+    operations = [
+        migrations.RenameField(
+            model_name='draftissue',
+            old_name='description',
+            new_name='description_json',
+        ),
+        migrations.RenameField(
+            model_name='issue',
+            old_name='description',
+            new_name='description_json',
+        ),
+        migrations.RenameField(
+            model_name='page',
+            old_name='description',
+            new_name='description_json',
+        ),
+    ]
diff --git a/apps/api/plane/db/migrations/0118_remove_workspaceuserproperties_product_tour_and_more.py b/apps/api/plane/db/migrations/0118_remove_workspaceuserproperties_product_tour_and_more.py
new file mode 100644
index 000000000..9a2b39edf
--- /dev/null
+++ b/apps/api/plane/db/migrations/0118_remove_workspaceuserproperties_product_tour_and_more.py
@@ -0,0 +1,71 @@
+# Generated by Django 4.2.27 on 2026-01-23 09:27
+
+from django.db import migrations, models
+import plane.db.models.user
+
+def set_getting_started_checklist():
+ return {
+        "project_created": True,
+        "project_joined": True,
+        "work_item_created": True,
+        "team_members_invited": True,
+        "page_created": True,
+        "ai_chat_tried": True,
+        "integration_linked": True,
+        "view_created": True,
+        "sticky_created": True,
+    }
+    
+def set_default_tips():
+    return {"mobile_app_download": True}
+
+
+def set_default_explored_features():
+    return {"github_integrated": True, "slack_integrated": True, "ai_chat_tried": True}
+
+
+def set_default_product_tour():
+    return {
+        "work_items": True,
+        "cycles": True,
+        "modules": True,
+        "intake": True,
+        "pages": True,
+    }
+
+
+def migrate_all_the_product_tour_to_true(apps, _schema_editor):
+    Profile = apps.get_model('db', 'Profile')
+    WorkspaceMember = apps.get_model('db', 'WorkspaceMember')
+    
+    default_checklist_values = set_getting_started_checklist()
+    default_tips_values = set_default_tips()        
+    default_explored_features = set_default_explored_features()
+    default_product_tour = set_default_product_tour()
+
+    Profile.objects.all().update(is_navigation_tour_completed=True)
+    WorkspaceMember.objects.all().update(getting_started_checklist=default_checklist_values)
+    WorkspaceMember.objects.all().update(tips=default_tips_values)
+    WorkspaceMember.objects.all().update(explored_features=default_explored_features)
+    Profile.objects.all().update(product_tour=default_product_tour)
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('db', '0117_rename_description_draftissue_description_json_and_more'),
+    ]
+
+    operations = [
+        migrations.RemoveField(
+            model_name='workspaceuserproperties',
+            name='product_tour',
+        ),
+        migrations.AddField(
+            model_name='profile',
+            name='product_tour',
+            field=models.JSONField(default=plane.db.models.user.get_default_product_tour),
+        ),
+        migrations.RunPython(migrate_all_the_product_tour_to_true, reverse_code=migrations.RunPython.noop)
+
+    ]
diff --git a/apps/api/plane/db/migrations/0119_alter_estimatepoint_key.py b/apps/api/plane/db/migrations/0119_alter_estimatepoint_key.py
new file mode 100644
index 000000000..a730808a1
--- /dev/null
+++ b/apps/api/plane/db/migrations/0119_alter_estimatepoint_key.py
@@ -0,0 +1,19 @@
+# Generated by Django 4.2.27 on 2026-02-09 09:37
+
+import django.core.validators
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('db', '0118_remove_workspaceuserproperties_product_tour_and_more'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='estimatepoint',
+            name='key',
+            field=models.IntegerField(default=0, validators=[django.core.validators.MinValueValidator(0)]),
+        ),
+    ]
diff --git a/apps/api/plane/db/migrations/0120_issueview_archived_at.py b/apps/api/plane/db/migrations/0120_issueview_archived_at.py
new file mode 100644
index 000000000..4357766d4
--- /dev/null
+++ b/apps/api/plane/db/migrations/0120_issueview_archived_at.py
@@ -0,0 +1,18 @@
+# Generated by Django 4.2.28 on 2026-02-17 10:47
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('db', '0119_alter_estimatepoint_key'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='issueview',
+            name='archived_at',
+            field=models.DateTimeField(null=True),
+        ),
+    ]
diff --git a/apps/api/plane/db/migrations/0121_alter_estimate_type.py b/apps/api/plane/db/migrations/0121_alter_estimate_type.py
new file mode 100644
index 000000000..73b75123f
--- /dev/null
+++ b/apps/api/plane/db/migrations/0121_alter_estimate_type.py
@@ -0,0 +1,18 @@
+# Generated by Django 4.2.28 on 2026-02-26 14:37
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('db', '0120_issueview_archived_at'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='estimate',
+            name='type',
+            field=models.CharField(choices=[('categories', 'Categories'), ('points', 'Points')], default='categories', max_length=255),
+        ),
+    ]
diff --git a/apps/api/plane/db/mixins.py b/apps/api/plane/db/mixins.py
index be5613b61..b36269959 100644
--- a/apps/api/plane/db/mixins.py
+++ b/apps/api/plane/db/mixins.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Type imports
 from typing import Any
 
@@ -188,3 +192,30 @@ class ChangeTrackerMixin:
                   all non-deferred fields).
         """
         return self._original_values
+
+    def save(self, *args: Any, **kwargs: Any) -> None:
+        """
+        Override save to automatically capture changed fields and reset tracking.
+
+        Before saving, the current changed_fields are captured and stored in
+        _changes_on_save. After saving, the tracked fields are reset so
+        that subsequent saves correctly detect changes relative to the last
+        saved state, not the original load-time state.
+
+        Models that need to access the changed fields after save (e.g., for
+        syncing related models) can use self._changes_on_save.
+        """
+        self._changes_on_save = self.changed_fields
+        super().save(*args, **kwargs)
+        self._reset_tracked_fields()
+
+    def _reset_tracked_fields(self) -> None:
+        """
+        Reset the tracked field values to the current state.
+
+        This is called automatically after save() to ensure that subsequent
+        saves correctly detect changes relative to the last saved state,
+        rather than the original load-time state.
+        """
+        self._original_values = {}
+        self._track_fields()
diff --git a/apps/api/plane/db/models/__init__.py b/apps/api/plane/db/models/__init__.py
index 41fd32bd5..5cf9dec2a 100644
--- a/apps/api/plane/db/models/__init__.py
+++ b/apps/api/plane/db/models/__init__.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 from .analytic import AnalyticView
 from .api import APIActivityLog, APIToken
 from .asset import FileAsset
@@ -34,7 +38,6 @@ from .issue import (
     IssueLabel,
     IssueLink,
     IssueMention,
-    IssueUserProperty,
     IssueReaction,
     IssueRelation,
     IssueSequence,
@@ -54,6 +57,7 @@ from .project import (
     ProjectMemberInvite,
     ProjectNetwork,
     ProjectPublicMember,
+    ProjectUserProperty,
 )
 from .session import Session
 from .social_connection import SocialLoginConnection
diff --git a/apps/api/plane/db/models/analytic.py b/apps/api/plane/db/models/analytic.py
index 0efcb957f..601ef9ea5 100644
--- a/apps/api/plane/db/models/analytic.py
+++ b/apps/api/plane/db/models/analytic.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Django models
 from django.db import models
 
diff --git a/apps/api/plane/db/models/api.py b/apps/api/plane/db/models/api.py
index 7d040ebc2..c545860c0 100644
--- a/apps/api/plane/db/models/api.py
+++ b/apps/api/plane/db/models/api.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Python imports
 from uuid import uuid4
 
@@ -32,6 +36,7 @@ class APIToken(BaseModel):
     workspace = models.ForeignKey("db.Workspace", related_name="api_tokens", on_delete=models.CASCADE, null=True)
     expired_at = models.DateTimeField(blank=True, null=True)
     is_service = models.BooleanField(default=False)
+    allowed_rate_limit = models.CharField(max_length=255, default="60/min")
 
     class Meta:
         verbose_name = "API Token"
diff --git a/apps/api/plane/db/models/asset.py b/apps/api/plane/db/models/asset.py
index ed9879a73..d309135bc 100644
--- a/apps/api/plane/db/models/asset.py
+++ b/apps/api/plane/db/models/asset.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Python imports
 from uuid import uuid4
 
diff --git a/apps/api/plane/db/models/base.py b/apps/api/plane/db/models/base.py
index 468af8261..482dc9063 100644
--- a/apps/api/plane/db/models/base.py
+++ b/apps/api/plane/db/models/base.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 import uuid
 
 # Django imports
diff --git a/apps/api/plane/db/models/cycle.py b/apps/api/plane/db/models/cycle.py
index bdffd283d..78ea977d9 100644
--- a/apps/api/plane/db/models/cycle.py
+++ b/apps/api/plane/db/models/cycle.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Python imports
 import pytz
 
diff --git a/apps/api/plane/db/models/deploy_board.py b/apps/api/plane/db/models/deploy_board.py
index da9c0d698..b9d8778e0 100644
--- a/apps/api/plane/db/models/deploy_board.py
+++ b/apps/api/plane/db/models/deploy_board.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Python imports
 from uuid import uuid4
 
diff --git a/apps/api/plane/db/models/description.py b/apps/api/plane/db/models/description.py
index 6c298546a..0e8de3ce7 100644
--- a/apps/api/plane/db/models/description.py
+++ b/apps/api/plane/db/models/description.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 from django.db import models
 from django.utils.html import strip_tags
 from .workspace import WorkspaceBaseModel
diff --git a/apps/api/plane/db/models/device.py b/apps/api/plane/db/models/device.py
index adcf7974a..9254a21ff 100644
--- a/apps/api/plane/db/models/device.py
+++ b/apps/api/plane/db/models/device.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # models.py
 from django.db import models
 from django.conf import settings
diff --git a/apps/api/plane/db/models/draft.py b/apps/api/plane/db/models/draft.py
index 55dbb61df..2d126da22 100644
--- a/apps/api/plane/db/models/draft.py
+++ b/apps/api/plane/db/models/draft.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Django imports
 from django.conf import settings
 from django.db import models
@@ -39,7 +43,7 @@ class DraftIssue(WorkspaceBaseModel):
         blank=True,
     )
     name = models.CharField(max_length=255, verbose_name="Issue Name", blank=True, null=True)
-    description = models.JSONField(blank=True, default=dict)
+    description_json = models.JSONField(blank=True, default=dict)
     description_html = models.TextField(blank=True, default="<p></p>")
     description_stripped = models.TextField(blank=True, null=True)
     description_binary = models.BinaryField(null=True)
diff --git a/apps/api/plane/db/models/estimate.py b/apps/api/plane/db/models/estimate.py
index 9373fb320..fb472a69b 100644
--- a/apps/api/plane/db/models/estimate.py
+++ b/apps/api/plane/db/models/estimate.py
@@ -1,16 +1,24 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Django imports
-from django.core.validators import MaxValueValidator, MinValueValidator
+from django.core.validators import MinValueValidator
 from django.db import models
 from django.db.models import Q
 
 # Module imports
 from .project import ProjectBaseModel
 
+class EstimateType(models.TextChoices):
+    CATEGORIES = "categories", "Categories"
+    POINTS = "points", "Points"
+
 
 class Estimate(ProjectBaseModel):
     name = models.CharField(max_length=255)
     description = models.TextField(verbose_name="Estimate Description", blank=True)
-    type = models.CharField(max_length=255, default="categories")
+    type = models.CharField(max_length=255, choices=EstimateType.choices, default=EstimateType.CATEGORIES)
     last_used = models.BooleanField(default=False)
 
     def __str__(self):
@@ -34,7 +42,7 @@ class Estimate(ProjectBaseModel):
 
 class EstimatePoint(ProjectBaseModel):
     estimate = models.ForeignKey("db.Estimate", on_delete=models.CASCADE, related_name="points")
-    key = models.IntegerField(default=0, validators=[MinValueValidator(0), MaxValueValidator(12)])
+    key = models.IntegerField(default=0, validators=[MinValueValidator(0)])
     description = models.TextField(blank=True)
     value = models.CharField(max_length=255)
 
diff --git a/apps/api/plane/db/models/exporter.py b/apps/api/plane/db/models/exporter.py
index 8ad9daad7..7abfe63af 100644
--- a/apps/api/plane/db/models/exporter.py
+++ b/apps/api/plane/db/models/exporter.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 import uuid
 
 # Python imports
diff --git a/apps/api/plane/db/models/favorite.py b/apps/api/plane/db/models/favorite.py
index de2b101a0..1ce29da87 100644
--- a/apps/api/plane/db/models/favorite.py
+++ b/apps/api/plane/db/models/favorite.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 from django.conf import settings
 
 # Django imports
diff --git a/apps/api/plane/db/models/importer.py b/apps/api/plane/db/models/importer.py
index 9bcea8cf0..24d987bb7 100644
--- a/apps/api/plane/db/models/importer.py
+++ b/apps/api/plane/db/models/importer.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Django imports
 from django.conf import settings
 from django.db import models
diff --git a/apps/api/plane/db/models/intake.py b/apps/api/plane/db/models/intake.py
index c3369ae1d..700d5d8cf 100644
--- a/apps/api/plane/db/models/intake.py
+++ b/apps/api/plane/db/models/intake.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Django imports
 from django.db import models
 
diff --git a/apps/api/plane/db/models/integration/__init__.py b/apps/api/plane/db/models/integration/__init__.py
index 34b40e57d..2242b4ddd 100644
--- a/apps/api/plane/db/models/integration/__init__.py
+++ b/apps/api/plane/db/models/integration/__init__.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 from .base import Integration, WorkspaceIntegration
 from .github import (
     GithubRepository,
diff --git a/apps/api/plane/db/models/integration/base.py b/apps/api/plane/db/models/integration/base.py
index 296c3cf6d..d98aa292d 100644
--- a/apps/api/plane/db/models/integration/base.py
+++ b/apps/api/plane/db/models/integration/base.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Python imports
 import uuid
 
diff --git a/apps/api/plane/db/models/integration/github.py b/apps/api/plane/db/models/integration/github.py
index ba278497e..8d84dbe3e 100644
--- a/apps/api/plane/db/models/integration/github.py
+++ b/apps/api/plane/db/models/integration/github.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Python imports
 
 # Django imports
diff --git a/apps/api/plane/db/models/integration/slack.py b/apps/api/plane/db/models/integration/slack.py
index 1e8ea469b..f1c33f5c2 100644
--- a/apps/api/plane/db/models/integration/slack.py
+++ b/apps/api/plane/db/models/integration/slack.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Python imports
 
 # Django imports
diff --git a/apps/api/plane/db/models/issue.py b/apps/api/plane/db/models/issue.py
index d3377f0ad..d24efc8a2 100644
--- a/apps/api/plane/db/models/issue.py
+++ b/apps/api/plane/db/models/issue.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Python import
 from uuid import uuid4
 
@@ -90,14 +94,6 @@ class IssueManager(SoftDeletionManager):
         return (
             super()
             .get_queryset()
-            .filter(
-                models.Q(issue_intake__status=1)
-                | models.Q(issue_intake__status=-1)
-                | models.Q(issue_intake__status=2)
-                | models.Q(issue_intake__isnull=True)
-            )
-            .filter(deleted_at__isnull=True)
-            .filter(state__is_triage=False)
             .exclude(state__group=StateGroup.TRIAGE.value)
             .exclude(archived_at__isnull=False)
             .exclude(project__archived_at__isnull=False)
@@ -136,7 +132,7 @@ class Issue(ProjectBaseModel):
         blank=True,
     )
     name = models.CharField(max_length=255, verbose_name="Issue Name")
-    description = models.JSONField(blank=True, default=dict)
+    description_json = models.JSONField(blank=True, default=dict)
     description_html = models.TextField(blank=True, default="<p></p>")
     description_stripped = models.TextField(blank=True, null=True)
     description_binary = models.BinaryField(null=True)
@@ -207,39 +203,35 @@ class Issue(ProjectBaseModel):
 
         if self._state.adding:
             with transaction.atomic():
-                # Create a lock for this specific project using an advisory lock
+                # Create a lock for this specific project using a transaction-level advisory lock
                 # This ensures only one transaction per project can execute this code at a time
+                # The lock is automatically released when the transaction ends
                 lock_key = convert_uuid_to_integer(self.project.id)
 
                 with connection.cursor() as cursor:
-                    # Get an exclusive lock using the project ID as the lock key
-                    cursor.execute("SELECT pg_advisory_lock(%s)", [lock_key])
+                    # Get an exclusive transaction-level lock using the project ID as the lock key
+                    cursor.execute("SELECT pg_advisory_xact_lock(%s)", [lock_key])
 
-                try:
-                    # Get the last sequence for the project
-                    last_sequence = IssueSequence.objects.filter(project=self.project).aggregate(
-                        largest=models.Max("sequence")
-                    )["largest"]
-                    self.sequence_id = last_sequence + 1 if last_sequence else 1
-                    # Strip the html tags using html parser
-                    self.description_stripped = (
-                        None
-                        if (self.description_html == "" or self.description_html is None)
-                        else strip_tags(self.description_html)
-                    )
-                    largest_sort_order = Issue.objects.filter(project=self.project, state=self.state).aggregate(
-                        largest=models.Max("sort_order")
-                    )["largest"]
-                    if largest_sort_order is not None:
-                        self.sort_order = largest_sort_order + 10000
+                # Get the last sequence for the project
+                last_sequence = IssueSequence.objects.filter(project=self.project).aggregate(
+                    largest=models.Max("sequence")
+                )["largest"]
+                self.sequence_id = last_sequence + 1 if last_sequence else 1
+                # Strip the html tags using html parser
+                self.description_stripped = (
+                    None
+                    if (self.description_html == "" or self.description_html is None)
+                    else strip_tags(self.description_html)
+                )
+                largest_sort_order = Issue.objects.filter(project=self.project, state=self.state).aggregate(
+                    largest=models.Max("sort_order")
+                )["largest"]
+                if largest_sort_order is not None:
+                    self.sort_order = largest_sort_order + 10000
 
-                    super(Issue, self).save(*args, **kwargs)
+                super(Issue, self).save(*args, **kwargs)
 
-                    IssueSequence.objects.create(issue=self, sequence=self.sequence_id, project=self.project)
-                finally:
-                    # Release the lock
-                    with connection.cursor() as cursor:
-                        cursor.execute("SELECT pg_advisory_unlock(%s)", [lock_key])
+                IssueSequence.objects.create(issue=self, sequence=self.sequence_id, project=self.project)
         else:
             # Strip the html tags using html parser
             self.description_stripped = (
@@ -513,10 +505,12 @@ class IssueComment(ChangeTrackerMixin, ProjectBaseModel):
                     "comment_json": "description_json",
                 }
 
+                # Use _changes_on_save which is captured by ChangeTrackerMixin.save()
+                # before the tracked fields are reset
                 changed_fields = {
                     desc_field: getattr(self, comment_field)
                     for comment_field, desc_field in field_mapping.items()
-                    if self.has_changed(comment_field)
+                    if comment_field in self._changes_on_save
                 }
 
                 # Update description only if comment fields changed
@@ -536,36 +530,6 @@ class IssueComment(ChangeTrackerMixin, ProjectBaseModel):
         return str(self.issue)
 
 
-class IssueUserProperty(ProjectBaseModel):
-    user = models.ForeignKey(
-        settings.AUTH_USER_MODEL,
-        on_delete=models.CASCADE,
-        related_name="issue_property_user",
-    )
-    filters = models.JSONField(default=get_default_filters)
-    display_filters = models.JSONField(default=get_default_display_filters)
-    display_properties = models.JSONField(default=get_default_display_properties)
-    rich_filters = models.JSONField(default=dict)
-
-    class Meta:
-        verbose_name = "Issue User Property"
-        verbose_name_plural = "Issue User Properties"
-        db_table = "issue_user_properties"
-        ordering = ("-created_at",)
-        unique_together = ["user", "project", "deleted_at"]
-        constraints = [
-            models.UniqueConstraint(
-                fields=["user", "project"],
-                condition=Q(deleted_at__isnull=True),
-                name="issue_user_property_unique_user_project_when_deleted_at_null",
-            )
-        ]
-
-    def __str__(self):
-        """Return properties status of the issue"""
-        return str(self.user)
-
-
 class IssueLabel(ProjectBaseModel):
     issue = models.ForeignKey("db.Issue", on_delete=models.CASCADE, related_name="label_issue")
     label = models.ForeignKey("db.Label", on_delete=models.CASCADE, related_name="label_issue")
@@ -840,7 +804,7 @@ class IssueDescriptionVersion(ProjectBaseModel):
                 description_binary=issue.description_binary,
                 description_html=issue.description_html,
                 description_stripped=issue.description_stripped,
-                description_json=issue.description,
+                description_json=issue.description_json,
             )
             return True
         except Exception as e:
diff --git a/apps/api/plane/db/models/issue_type.py b/apps/api/plane/db/models/issue_type.py
index 4f3dc08de..94eaf50bf 100644
--- a/apps/api/plane/db/models/issue_type.py
+++ b/apps/api/plane/db/models/issue_type.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Django imports
 from django.db import models
 from django.db.models import Q
diff --git a/apps/api/plane/db/models/label.py b/apps/api/plane/db/models/label.py
index 76ecf10e6..9435e01c6 100644
--- a/apps/api/plane/db/models/label.py
+++ b/apps/api/plane/db/models/label.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 from django.db import models
 from django.db.models import Q
 
diff --git a/apps/api/plane/db/models/module.py b/apps/api/plane/db/models/module.py
index ab62f2df5..d660116fa 100644
--- a/apps/api/plane/db/models/module.py
+++ b/apps/api/plane/db/models/module.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Django imports
 from django.conf import settings
 from django.db import models
diff --git a/apps/api/plane/db/models/notification.py b/apps/api/plane/db/models/notification.py
index fd97a3c96..c24135854 100644
--- a/apps/api/plane/db/models/notification.py
+++ b/apps/api/plane/db/models/notification.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Django imports
 from django.conf import settings
 from django.db import models
diff --git a/apps/api/plane/db/models/page.py b/apps/api/plane/db/models/page.py
index 213954d14..2c82c5f44 100644
--- a/apps/api/plane/db/models/page.py
+++ b/apps/api/plane/db/models/page.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 import uuid
 
 from django.conf import settings
@@ -25,7 +29,7 @@ class Page(BaseModel):
 
     workspace = models.ForeignKey("db.Workspace", on_delete=models.CASCADE, related_name="pages")
     name = models.TextField(blank=True)
-    description = models.JSONField(default=dict, blank=True)
+    description_json = models.JSONField(default=dict, blank=True)
     description_binary = models.BinaryField(null=True)
     description_html = models.TextField(blank=True, default="<p></p>")
     description_stripped = models.TextField(blank=True, null=True)
diff --git a/apps/api/plane/db/models/project.py b/apps/api/plane/db/models/project.py
index 8495ac9df..4039b1d29 100644
--- a/apps/api/plane/db/models/project.py
+++ b/apps/api/plane/db/models/project.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Python imports
 import pytz
 from uuid import uuid4
@@ -12,7 +16,6 @@ from django.db.models import Q
 # Module imports
 from plane.db.mixins import AuditModel
 
-# Module imports
 from .base import BaseModel
 
 ROLE_CHOICES = ((20, "Admin"), (15, "Member"), (5, "Guest"))
@@ -116,6 +119,11 @@ class Project(BaseModel):
     external_source = models.CharField(max_length=255, null=True, blank=True)
     external_id = models.CharField(max_length=255, blank=True, null=True)
 
+    def __init__(self, *args, **kwargs):
+        # Track if timezone is provided, if so, don't override it with the workspace timezone when saving
+        self.is_timezone_provided = kwargs.get("timezone") is not None
+        super().__init__(*args, **kwargs)
+
     @property
     def cover_image_url(self):
         # Return cover image url
@@ -132,6 +140,8 @@ class Project(BaseModel):
         """Return name of the project"""
         return f"{self.name} <{self.workspace.name}>"
 
+    FORBIDDEN_IDENTIFIER_CHARS_PATTERN = r"^.*[&+,:;$^}{*=?@#|'<>.()%!-].*$"
+
     class Meta:
         unique_together = [
             ["identifier", "workspace", "deleted_at"],
@@ -155,7 +165,15 @@ class Project(BaseModel):
         ordering = ("-created_at",)
 
     def save(self, *args, **kwargs):
+        from plane.db.models import Workspace
+
         self.identifier = self.identifier.strip().upper()
+        is_creating = self._state.adding
+
+        if is_creating and not self.is_timezone_provided:
+            workspace = Workspace.objects.get(id=self.workspace_id)
+            self.timezone = workspace.timezone
+
         return super().save(*args, **kwargs)
 
 
@@ -206,14 +224,20 @@ class ProjectMember(ProjectBaseModel):
     is_active = models.BooleanField(default=True)
 
     def save(self, *args, **kwargs):
-        if self._state.adding:
-            smallest_sort_order = ProjectMember.objects.filter(
-                workspace_id=self.project.workspace_id, member=self.member
-            ).aggregate(smallest=models.Min("sort_order"))["smallest"]
+        if self._state.adding and self.member:
+            # Get the minimum sort_order for this member in the workspace
+            min_sort_order_result = ProjectUserProperty.objects.filter(
+                workspace_id=self.project.workspace_id, user=self.member
+            ).aggregate(min_sort_order=models.Min("sort_order"))
+            min_sort_order = min_sort_order_result.get("min_sort_order")
 
-            # Project ordering
-            if smallest_sort_order is not None:
-                self.sort_order = smallest_sort_order - 10000
+            # create project user property with project sort order
+            ProjectUserProperty.objects.create(
+                workspace_id=self.project.workspace_id,
+                project=self.project,
+                user=self.member,
+                sort_order=(min_sort_order - 10000 if min_sort_order is not None else 65535),
+            )
 
         super(ProjectMember, self).save(*args, **kwargs)
 
@@ -313,3 +337,37 @@ class ProjectPublicMember(ProjectBaseModel):
         verbose_name_plural = "Project Public Members"
         db_table = "project_public_members"
         ordering = ("-created_at",)
+
+
+class ProjectUserProperty(ProjectBaseModel):
+    from .issue import get_default_filters, get_default_display_filters, get_default_display_properties
+
+    user = models.ForeignKey(
+        settings.AUTH_USER_MODEL,
+        on_delete=models.CASCADE,
+        related_name="project_property_user",
+    )
+    filters = models.JSONField(default=get_default_filters)
+    display_filters = models.JSONField(default=get_default_display_filters)
+    display_properties = models.JSONField(default=get_default_display_properties)
+    rich_filters = models.JSONField(default=dict)
+    preferences = models.JSONField(default=get_default_preferences)
+    sort_order = models.FloatField(default=65535)
+
+    class Meta:
+        verbose_name = "Project User Property"
+        verbose_name_plural = "Project User Properties"
+        db_table = "project_user_properties"
+        ordering = ("-created_at",)
+        unique_together = ["user", "project", "deleted_at"]
+        constraints = [
+            models.UniqueConstraint(
+                fields=["user", "project"],
+                condition=Q(deleted_at__isnull=True),
+                name="project_user_property_unique_user_project_when_deleted_at_null",
+            )
+        ]
+
+    def __str__(self):
+        """Return properties status of the project"""
+        return str(self.user)
diff --git a/apps/api/plane/db/models/recent_visit.py b/apps/api/plane/db/models/recent_visit.py
index 42855081b..fb368fa12 100644
--- a/apps/api/plane/db/models/recent_visit.py
+++ b/apps/api/plane/db/models/recent_visit.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Django imports
 from django.db import models
 from django.conf import settings
diff --git a/apps/api/plane/db/models/session.py b/apps/api/plane/db/models/session.py
index e884498bf..52b885ee9 100644
--- a/apps/api/plane/db/models/session.py
+++ b/apps/api/plane/db/models/session.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Python imports
 import string
 
diff --git a/apps/api/plane/db/models/social_connection.py b/apps/api/plane/db/models/social_connection.py
index 9a85a320d..7e8ee8c2c 100644
--- a/apps/api/plane/db/models/social_connection.py
+++ b/apps/api/plane/db/models/social_connection.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Django imports
 from django.conf import settings
 from django.db import models
diff --git a/apps/api/plane/db/models/state.py b/apps/api/plane/db/models/state.py
index aeb08b8b2..fa56900c3 100644
--- a/apps/api/plane/db/models/state.py
+++ b/apps/api/plane/db/models/state.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Django imports
 from django.db import models
 from django.template.defaultfilters import slugify
@@ -5,7 +9,7 @@ from django.db.models import Q
 
 # Module imports
 from .project import ProjectBaseModel
-
+from plane.db.mixins import SoftDeletionManager
 
 class StateGroup(models.TextChoices):
     BACKLOG = "backlog", "Backlog"
@@ -58,14 +62,14 @@ DEFAULT_STATES = [
 ]
 
 
-class StateManager(models.Manager):
+class StateManager(SoftDeletionManager):
     """Default manager - excludes triage states"""
 
     def get_queryset(self):
         return super().get_queryset().exclude(group=StateGroup.TRIAGE.value)
 
 
-class TriageStateManager(models.Manager):
+class TriageStateManager(SoftDeletionManager):
     """Manager for triage states only"""
 
     def get_queryset(self):
diff --git a/apps/api/plane/db/models/sticky.py b/apps/api/plane/db/models/sticky.py
index 157077eb8..757cb8ea1 100644
--- a/apps/api/plane/db/models/sticky.py
+++ b/apps/api/plane/db/models/sticky.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Django imports
 from django.conf import settings
 from django.db import models
diff --git a/apps/api/plane/db/models/user.py b/apps/api/plane/db/models/user.py
index ee70032cf..7f1ab162d 100644
--- a/apps/api/plane/db/models/user.py
+++ b/apps/api/plane/db/models/user.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Python imports
 import random
 import string
@@ -35,6 +39,16 @@ def get_mobile_default_onboarding():
     }
 
 
+def get_default_product_tour():
+    return {
+        "work_items": False,
+        "cycles": False,
+        "modules": False,
+        "intake": False,
+        "pages": False,
+    }
+
+
 class BotTypeEnum(models.TextChoices):
     WORKSPACE_SEED = "WORKSPACE_SEED", "Workspace Seed"
 
@@ -84,7 +98,7 @@ class User(AbstractBaseUser, PermissionsMixin):
     is_staff = models.BooleanField(default=False)
     is_email_verified = models.BooleanField(default=False)
     is_password_autoset = models.BooleanField(default=False)
-
+    is_password_reset_required = models.BooleanField(default=False)
     # random token generated
     token = models.CharField(max_length=64, blank=True)
 
@@ -147,6 +161,11 @@ class User(AbstractBaseUser, PermissionsMixin):
             return self.cover_image
         return None
 
+    @property
+    def full_name(self):
+        """Return user's full name (first + last)."""
+        return f"{self.first_name} {self.last_name}".strip()
+
     def save(self, *args, **kwargs):
         self.email = self.email.lower().strip()
         self.mobile_number = self.mobile_number
@@ -167,6 +186,16 @@ class User(AbstractBaseUser, PermissionsMixin):
 
         super(User, self).save(*args, **kwargs)
 
+    @classmethod
+    def get_display_name(cls, email):
+        if not email:
+            return "".join(random.choice(string.ascii_letters) for _ in range(6))
+        return (
+            email.split("@")[0]
+            if len(email.split("@")) == 2
+            else "".join(random.choice(string.ascii_letters) for _ in range(6))
+        )
+
 
 class Profile(TimeAuditModel):
     SUNDAY = 0
@@ -177,6 +206,10 @@ class Profile(TimeAuditModel):
     FRIDAY = 5
     SATURDAY = 6
 
+    class NotificationViewMode(models.TextChoices):
+        FULL = "full", "Full"
+        COMPACT = "compact", "Compact"
+
     START_OF_THE_WEEK_CHOICES = (
         (SUNDAY, "Sunday"),
         (MONDAY, "Monday"),
@@ -206,7 +239,9 @@ class Profile(TimeAuditModel):
     billing_address = models.JSONField(null=True)
     has_billing_address = models.BooleanField(default=False)
     company_name = models.CharField(max_length=255, blank=True)
-
+    notification_view_mode = models.CharField(
+        max_length=255, choices=NotificationViewMode.choices, default=NotificationViewMode.FULL
+    )
     is_smooth_cursor_enabled = models.BooleanField(default=False)
     # mobile
     is_mobile_onboarded = models.BooleanField(default=False)
@@ -218,8 +253,13 @@ class Profile(TimeAuditModel):
     goals = models.JSONField(default=dict)
     background_color = models.CharField(max_length=255, default=get_random_color)
 
+    # navigation tour
+    is_navigation_tour_completed = models.BooleanField(default=False)
+
     # marketing
     has_marketing_email_consent = models.BooleanField(default=False)
+    is_subscribed_to_changelog = models.BooleanField(default=False)
+    product_tour = models.JSONField(default=get_default_product_tour)
 
     class Meta:
         verbose_name = "Profile"
diff --git a/apps/api/plane/db/models/view.py b/apps/api/plane/db/models/view.py
index d430cd5f9..a02b768a3 100644
--- a/apps/api/plane/db/models/view.py
+++ b/apps/api/plane/db/models/view.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Django imports
 from django.conf import settings
 from django.db import models
@@ -64,6 +68,7 @@ class IssueView(WorkspaceBaseModel):
     logo_props = models.JSONField(default=dict)
     owned_by = models.ForeignKey(settings.AUTH_USER_MODEL, on_delete=models.CASCADE, related_name="views")
     is_locked = models.BooleanField(default=False)
+    archived_at = models.DateTimeField(null=True)
 
     class Meta:
         verbose_name = "Issue View"
diff --git a/apps/api/plane/db/models/webhook.py b/apps/api/plane/db/models/webhook.py
index 8872d0bb2..99431ed42 100644
--- a/apps/api/plane/db/models/webhook.py
+++ b/apps/api/plane/db/models/webhook.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Python imports
 from uuid import uuid4
 from urllib.parse import urlparse
@@ -38,6 +42,7 @@ class Webhook(BaseModel):
     cycle = models.BooleanField(default=False)
     issue_comment = models.BooleanField(default=False)
     is_internal = models.BooleanField(default=False)
+    version = models.CharField(default="v1", max_length=50)
 
     def __str__(self):
         return f"{self.workspace.slug} {self.url}"
diff --git a/apps/api/plane/db/models/workspace.py b/apps/api/plane/db/models/workspace.py
index d3470d531..80a3e3e3e 100644
--- a/apps/api/plane/db/models/workspace.py
+++ b/apps/api/plane/db/models/workspace.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Python imports
 import pytz
 from typing import Optional, Any
@@ -204,6 +208,9 @@ class WorkspaceMember(BaseModel):
     default_props = models.JSONField(default=get_default_props)
     issue_props = models.JSONField(default=get_issue_props)
     is_active = models.BooleanField(default=True)
+    getting_started_checklist = models.JSONField(default=dict)
+    tips = models.JSONField(default=dict)
+    explored_features = models.JSONField(default=dict)
 
     class Meta:
         unique_together = ["workspace", "member", "deleted_at"]
diff --git a/apps/api/plane/license/__init__.py b/apps/api/plane/license/__init__.py
index e69de29bb..917e26db4 100644
--- a/apps/api/plane/license/__init__.py
+++ b/apps/api/plane/license/__init__.py
@@ -0,0 +1,4 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
diff --git a/apps/api/plane/license/api/__init__.py b/apps/api/plane/license/api/__init__.py
index e69de29bb..917e26db4 100644
--- a/apps/api/plane/license/api/__init__.py
+++ b/apps/api/plane/license/api/__init__.py
@@ -0,0 +1,4 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
diff --git a/apps/api/plane/license/api/permissions/__init__.py b/apps/api/plane/license/api/permissions/__init__.py
index d5bedc4c0..8878e2aaf 100644
--- a/apps/api/plane/license/api/permissions/__init__.py
+++ b/apps/api/plane/license/api/permissions/__init__.py
@@ -1 +1,5 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 from .instance import InstanceAdminPermission
diff --git a/apps/api/plane/license/api/permissions/instance.py b/apps/api/plane/license/api/permissions/instance.py
index a430b688b..819757375 100644
--- a/apps/api/plane/license/api/permissions/instance.py
+++ b/apps/api/plane/license/api/permissions/instance.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Third party imports
 from rest_framework.permissions import BasePermission
 
diff --git a/apps/api/plane/license/api/serializers/__init__.py b/apps/api/plane/license/api/serializers/__init__.py
index 6e0a5941c..b4a39adce 100644
--- a/apps/api/plane/license/api/serializers/__init__.py
+++ b/apps/api/plane/license/api/serializers/__init__.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 from .instance import InstanceSerializer
 
 from .configuration import InstanceConfigurationSerializer
diff --git a/apps/api/plane/license/api/serializers/admin.py b/apps/api/plane/license/api/serializers/admin.py
index 4df6901ca..ebca0e562 100644
--- a/apps/api/plane/license/api/serializers/admin.py
+++ b/apps/api/plane/license/api/serializers/admin.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Module imports
 from .base import BaseSerializer
 from plane.db.models import User
diff --git a/apps/api/plane/license/api/serializers/base.py b/apps/api/plane/license/api/serializers/base.py
index 0c6bba468..63c173e6d 100644
--- a/apps/api/plane/license/api/serializers/base.py
+++ b/apps/api/plane/license/api/serializers/base.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 from rest_framework import serializers
 
 
diff --git a/apps/api/plane/license/api/serializers/configuration.py b/apps/api/plane/license/api/serializers/configuration.py
index 1766f2113..21abc7013 100644
--- a/apps/api/plane/license/api/serializers/configuration.py
+++ b/apps/api/plane/license/api/serializers/configuration.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 from .base import BaseSerializer
 from plane.license.models import InstanceConfiguration
 from plane.license.utils.encryption import decrypt_data
diff --git a/apps/api/plane/license/api/serializers/instance.py b/apps/api/plane/license/api/serializers/instance.py
index c75c62e50..1598b3fb6 100644
--- a/apps/api/plane/license/api/serializers/instance.py
+++ b/apps/api/plane/license/api/serializers/instance.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Module imports
 from plane.license.models import Instance
 from plane.app.serializers import BaseSerializer
diff --git a/apps/api/plane/license/api/serializers/user.py b/apps/api/plane/license/api/serializers/user.py
index c53b4a484..b5e35ac72 100644
--- a/apps/api/plane/license/api/serializers/user.py
+++ b/apps/api/plane/license/api/serializers/user.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 from .base import BaseSerializer
 from plane.db.models import User
 
diff --git a/apps/api/plane/license/api/serializers/workspace.py b/apps/api/plane/license/api/serializers/workspace.py
index 75dd938e4..d12473e20 100644
--- a/apps/api/plane/license/api/serializers/workspace.py
+++ b/apps/api/plane/license/api/serializers/workspace.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Third Party Imports
 from rest_framework import serializers
 
diff --git a/apps/api/plane/license/api/views/__init__.py b/apps/api/plane/license/api/views/__init__.py
index 7f30d53fe..e25276495 100644
--- a/apps/api/plane/license/api/views/__init__.py
+++ b/apps/api/plane/license/api/views/__init__.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 from .instance import InstanceEndpoint, SignUpScreenVisitedEndpoint
 
 
diff --git a/apps/api/plane/license/api/views/admin.py b/apps/api/plane/license/api/views/admin.py
index 5b70beab9..6217cc87f 100644
--- a/apps/api/plane/license/api/views/admin.py
+++ b/apps/api/plane/license/api/views/admin.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Python imports
 from urllib.parse import urlencode, urljoin
 import uuid
@@ -134,8 +138,10 @@ class InstanceAdminSignUpEndpoint(View):
                 },
             )
             url = urljoin(
-                base_host(request=request, is_admin=True, ),
-                
+                base_host(
+                    request=request,
+                    is_admin=True,
+                ),
                 "?" + urlencode(exc.get_error_dict()),
             )
             return HttpResponseRedirect(url)
@@ -185,8 +191,8 @@ class InstanceAdminSignUpEndpoint(View):
             results = zxcvbn(password)
             if results["score"] < 3:
                 exc = AuthenticationException(
-                    error_code=AUTHENTICATION_ERROR_CODES["INVALID_ADMIN_PASSWORD"],
-                    error_message="INVALID_ADMIN_PASSWORD",
+                    error_code=AUTHENTICATION_ERROR_CODES["PASSWORD_TOO_WEAK"],
+                    error_message="PASSWORD_TOO_WEAK",
                     payload={
                         "email": email,
                         "first_name": first_name,
diff --git a/apps/api/plane/license/api/views/base.py b/apps/api/plane/license/api/views/base.py
index d209bd6bf..8d0d39ac3 100644
--- a/apps/api/plane/license/api/views/base.py
+++ b/apps/api/plane/license/api/views/base.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Python imports
 import zoneinfo
 from django.conf import settings
diff --git a/apps/api/plane/license/api/views/configuration.py b/apps/api/plane/license/api/views/configuration.py
index 8bb953565..bb9a9e00e 100644
--- a/apps/api/plane/license/api/views/configuration.py
+++ b/apps/api/plane/license/api/views/configuration.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Python imports
 from smtplib import (
     SMTPAuthenticationError,
diff --git a/apps/api/plane/license/api/views/instance.py b/apps/api/plane/license/api/views/instance.py
index fed0c5e17..a0d52d491 100644
--- a/apps/api/plane/license/api/views/instance.py
+++ b/apps/api/plane/license/api/views/instance.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Python imports
 import os
 
diff --git a/apps/api/plane/license/api/views/workspace.py b/apps/api/plane/license/api/views/workspace.py
index 5d1a2f24b..966b3b3e8 100644
--- a/apps/api/plane/license/api/views/workspace.py
+++ b/apps/api/plane/license/api/views/workspace.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Third party imports
 from rest_framework.response import Response
 from rest_framework import status
diff --git a/apps/api/plane/license/apps.py b/apps/api/plane/license/apps.py
index 400e98155..0cd4aba3b 100644
--- a/apps/api/plane/license/apps.py
+++ b/apps/api/plane/license/apps.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 from django.apps import AppConfig
 
 
diff --git a/apps/api/plane/license/bgtasks/__init__.py b/apps/api/plane/license/bgtasks/__init__.py
index e69de29bb..917e26db4 100644
--- a/apps/api/plane/license/bgtasks/__init__.py
+++ b/apps/api/plane/license/bgtasks/__init__.py
@@ -0,0 +1,4 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
diff --git a/apps/api/plane/license/bgtasks/tracer.py b/apps/api/plane/license/bgtasks/tracer.py
index 055c45d6c..f7c04b2a4 100644
--- a/apps/api/plane/license/bgtasks/tracer.py
+++ b/apps/api/plane/license/bgtasks/tracer.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Third party imports
 from celery import shared_task
 from opentelemetry import trace
diff --git a/apps/api/plane/license/management/__init__.py b/apps/api/plane/license/management/__init__.py
index e69de29bb..917e26db4 100644
--- a/apps/api/plane/license/management/__init__.py
+++ b/apps/api/plane/license/management/__init__.py
@@ -0,0 +1,4 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
diff --git a/apps/api/plane/license/management/commands/__init__.py b/apps/api/plane/license/management/commands/__init__.py
index e69de29bb..917e26db4 100644
--- a/apps/api/plane/license/management/commands/__init__.py
+++ b/apps/api/plane/license/management/commands/__init__.py
@@ -0,0 +1,4 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
diff --git a/apps/api/plane/license/management/commands/configure_instance.py b/apps/api/plane/license/management/commands/configure_instance.py
index b3e84dd82..43026a455 100644
--- a/apps/api/plane/license/management/commands/configure_instance.py
+++ b/apps/api/plane/license/management/commands/configure_instance.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Python imports
 import os
 
diff --git a/apps/api/plane/license/management/commands/register_instance.py b/apps/api/plane/license/management/commands/register_instance.py
index 6717cafd1..5ad6f7d20 100644
--- a/apps/api/plane/license/management/commands/register_instance.py
+++ b/apps/api/plane/license/management/commands/register_instance.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Python imports
 import json
 import secrets
diff --git a/apps/api/plane/license/models/__init__.py b/apps/api/plane/license/models/__init__.py
index d49524024..b1a84d846 100644
--- a/apps/api/plane/license/models/__init__.py
+++ b/apps/api/plane/license/models/__init__.py
@@ -1 +1,5 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 from .instance import Instance, InstanceAdmin, InstanceConfiguration, InstanceEdition
diff --git a/apps/api/plane/license/models/instance.py b/apps/api/plane/license/models/instance.py
index 1767d8c22..ff9ebc6b4 100644
--- a/apps/api/plane/license/models/instance.py
+++ b/apps/api/plane/license/models/instance.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Python imports
 from enum import Enum
 
diff --git a/apps/api/plane/license/urls.py b/apps/api/plane/license/urls.py
index 4d306924e..844a9e181 100644
--- a/apps/api/plane/license/urls.py
+++ b/apps/api/plane/license/urls.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 from django.urls import path
 
 from plane.license.api.views import (
diff --git a/apps/api/plane/license/utils/__init__.py b/apps/api/plane/license/utils/__init__.py
index e69de29bb..917e26db4 100644
--- a/apps/api/plane/license/utils/__init__.py
+++ b/apps/api/plane/license/utils/__init__.py
@@ -0,0 +1,4 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
diff --git a/apps/api/plane/license/utils/encryption.py b/apps/api/plane/license/utils/encryption.py
index d56766d1e..8f43167c1 100644
--- a/apps/api/plane/license/utils/encryption.py
+++ b/apps/api/plane/license/utils/encryption.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 import base64
 import hashlib
 from django.conf import settings
diff --git a/apps/api/plane/license/utils/instance_value.py b/apps/api/plane/license/utils/instance_value.py
index 8901bc814..279eb2177 100644
--- a/apps/api/plane/license/utils/instance_value.py
+++ b/apps/api/plane/license/utils/instance_value.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Python imports
 import os
 
diff --git a/apps/api/plane/middleware/__init__.py b/apps/api/plane/middleware/__init__.py
index e69de29bb..917e26db4 100644
--- a/apps/api/plane/middleware/__init__.py
+++ b/apps/api/plane/middleware/__init__.py
@@ -0,0 +1,4 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
diff --git a/apps/api/plane/middleware/apps.py b/apps/api/plane/middleware/apps.py
index 9deac8091..2037b6aa0 100644
--- a/apps/api/plane/middleware/apps.py
+++ b/apps/api/plane/middleware/apps.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 from django.apps import AppConfig
 
 
diff --git a/apps/api/plane/middleware/db_routing.py b/apps/api/plane/middleware/db_routing.py
index 68b5c4491..7aa045a69 100644
--- a/apps/api/plane/middleware/db_routing.py
+++ b/apps/api/plane/middleware/db_routing.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 """
 Database routing middleware for read replica selection.
 This middleware determines whether database queries should be routed to
diff --git a/apps/api/plane/middleware/logger.py b/apps/api/plane/middleware/logger.py
index d513ee3e3..b8cf6f9c0 100644
--- a/apps/api/plane/middleware/logger.py
+++ b/apps/api/plane/middleware/logger.py
@@ -1,16 +1,22 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Python imports
 import logging
 import time
 
 # Django imports
 from django.http import HttpRequest
+from django.utils import timezone
 
 # Third party imports
 from rest_framework.request import Request
 
 # Module imports
 from plane.utils.ip_address import get_client_ip
-from plane.db.models import APIActivityLog
+from plane.utils.exception_logger import log_exception
+from plane.bgtasks.logger_task import process_logs
 
 api_logger = logging.getLogger("plane.api.request")
 
@@ -70,6 +76,10 @@ class RequestLoggerMiddleware:
 
 
 class APITokenLogMiddleware:
+    """
+    Middleware to log External API requests to MongoDB or PostgreSQL.
+    """
+
     def __init__(self, get_response):
         self.get_response = get_response
 
@@ -104,24 +114,41 @@ class APITokenLogMiddleware:
     def process_request(self, request, response, request_body):
         api_key_header = "X-Api-Key"
         api_key = request.headers.get(api_key_header)
-        # If the API key is present, log the request
-        if api_key:
-            try:
-                APIActivityLog.objects.create(
-                    token_identifier=api_key,
-                    path=request.path,
-                    method=request.method,
-                    query_params=request.META.get("QUERY_STRING", ""),
-                    headers=str(request.headers),
-                    body=(self._safe_decode_body(request_body) if request_body else None),
-                    response_body=(self._safe_decode_body(response.content) if response.content else None),
-                    response_code=response.status_code,
-                    ip_address=get_client_ip(request=request),
-                    user_agent=request.META.get("HTTP_USER_AGENT", None),
-                )
 
-            except Exception as e:
-                api_logger.exception(e)
-                # If the token does not exist, you can decide whether to log this as an invalid attempt
+        # If the API key is not present, return
+        if not api_key:
+            return
+
+        try:
+            log_data = {
+                "token_identifier": api_key,
+                "path": request.path,
+                "method": request.method,
+                "query_params": request.META.get("QUERY_STRING", ""),
+                "headers": str(request.headers),
+                "body": self._safe_decode_body(request_body) if request_body else None,
+                "response_body": self._safe_decode_body(response.content) if response.content else None,
+                "response_code": response.status_code,
+                "ip_address": get_client_ip(request=request),
+                "user_agent": request.META.get("HTTP_USER_AGENT", None),
+            }
+            user_id = (
+                str(request.user.id)
+                if getattr(request, "user") and getattr(request.user, "is_authenticated", False)
+                else None
+            )
+            # Additional fields for MongoDB
+            mongo_log = {
+                **log_data,
+                "created_at": timezone.now(),
+                "updated_at": timezone.now(),
+                "created_by": user_id,
+                "updated_by": user_id,
+            }
+
+            process_logs.delay(log_data=log_data, mongo_log=mongo_log)
+
+        except Exception as e:
+            log_exception(e)
 
         return None
diff --git a/apps/api/plane/middleware/request_body_size.py b/apps/api/plane/middleware/request_body_size.py
index 9807c5715..c4e014df6 100644
--- a/apps/api/plane/middleware/request_body_size.py
+++ b/apps/api/plane/middleware/request_body_size.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 from django.core.exceptions import RequestDataTooBig
 from django.http import JsonResponse
 
diff --git a/apps/api/plane/seeds/data/issues.json b/apps/api/plane/seeds/data/issues.json
index badd0e611..be966e723 100644
--- a/apps/api/plane/seeds/data/issues.json
+++ b/apps/api/plane/seeds/data/issues.json
@@ -3,7 +3,7 @@
     "id": 1,
     "name": "Welcome to Plane 👋",
     "sequence_id": 1,
-    "description_html": "<p class=\"editor-paragraph-block\">Hey there! This demo project is your playground to get hands-on with Plane. We've set this up so you can click around and see how everything works without worrying about breaking anything.</p><p class=\"editor-paragraph-block\">Each work item is designed to make you familiar with the basics of using Plane. Just follow along card by card at your own pace.</p><p class=\"editor-paragraph-block\">First thing to try</p><ol class=\"list-decimal pl-7 space-y-[--list-spacing-y] tight\" data-tight=\"true\"><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Look in the <strong>Properties</strong> section below where it says <strong>State: Todo</strong>.</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Click on it and change it to <strong>Done</strong> from the dropdown. Alternatively, you can drag and drop the card to the Done column.</p></li></ol>",
+    "description_html": "<p class=\"editor-paragraph-block\">Hey there! This demo project is your playground to get hands-on with Plane. We've set this up so you can click around and see how everything works without worrying about breaking anything.</p><p class=\"editor-paragraph-block\">Each work item is designed to make you familiar with the basics of using Plane. Just follow along card by card at your own pace.</p><p class=\"editor-paragraph-block\">First thing to try</p><ol class=\"list-decimal pl-7 space-y-(--list-spacing-y) tight\" data-tight=\"true\"><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Look in the <strong>Properties</strong> section below where it says <strong>State: Todo</strong>.</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Click on it and change it to <strong>Done</strong> from the dropdown. Alternatively, you can drag and drop the card to the Done column.</p></li></ol>",
     "description_stripped": "Hey there! This demo project is your playground to get hands-on with Plane. We've set this up so you can click around and see how everything works without worrying about breaking anything.Each work item is designed to make you familiar with the basics of using Plane. Just follow along card by card at your own pace.First thing to tryLook in the Properties section below where it says State: Todo.Click on it and change it to Done from the dropdown. Alternatively, you can drag and drop the card to the Done column.",
     "sort_order": 1000,
     "state_id": 4,
@@ -17,7 +17,7 @@
     "id": 2,
     "name": "1. Create Projects 🎯",
     "sequence_id": 2,
-    "description_html": "<p class=\"editor-paragraph-block\"><br>A Project in Plane is where all your work comes together. Think of it as a base that organizes your work items and everything else your team needs to get things done.</p><div data-emoji-unicode=\"128204\" data-emoji-url=\"https://cdn.jsdelivr.net/npm/emoji-datasource-apple/img/apple/64/1f4cc.png\" data-logo-in-use=\"emoji\" data-background=\"light-blue\" data-block-type=\"callout-component\"><p class=\"editor-paragraph-block\"><strong>Note: </strong>This tutorial is already set up as a Project, and these cards you're reading are work items within it!</p><p class=\"editor-paragraph-block\">We're showing you how to create a new project just so you'll know exactly what to do when you're ready to start your own real one.</p></div><ol class=\"list-decimal pl-7 space-y-[--list-spacing-y] tight\" data-tight=\"true\"><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Look over at the left sidebar and find where it says <strong>Projects.</strong></p><image-component src=\"https://media.docs.plane.so/seed_assets/21.png\" width=\"395px\" height=\"362px\" id=\"7cb0d276-8686-4c8e-9f00-06a18140964d\" aspectratio=\"1.0900243309002433\"></image-component></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Hover your mouse there and you'll see a little <strong>+</strong> icon pop up - go ahead and click it!</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">A modal opens where you can give your project a name and other details.</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Notice the Access type<strong> </strong>options? <strong>Public</strong> means anyone (except Guest users) can see and join it, while <strong>Private</strong> keeps it just for those you invite.</p><div data-icon-color=\"#6d7b8a\" data-icon-name=\"Info\" data-emoji-unicode=\"128161\" data-emoji-url=\"https://cdn.jsdelivr.net/npm/emoji-datasource-apple/img/apple/64/1f4a1.png\" data-logo-in-use=\"emoji\" data-background=\"green\" data-block-type=\"callout-component\"><p class=\"editor-paragraph-block\"><strong>Tip:</strong> You can also quickly create a new project by using the keyboard shortcut <strong>P</strong> from anywhere in Plane!</p></div></li></ol>",
+    "description_html": "<p class=\"editor-paragraph-block\"><br>A Project in Plane is where all your work comes together. Think of it as a base that organizes your work items and everything else your team needs to get things done.</p><div data-emoji-unicode=\"128204\" data-emoji-url=\"https://cdn.jsdelivr.net/npm/emoji-datasource-apple/img/apple/64/1f4cc.png\" data-logo-in-use=\"emoji\" data-background=\"light-blue\" data-block-type=\"callout-component\"><p class=\"editor-paragraph-block\"><strong>Note: </strong>This tutorial is already set up as a Project, and these cards you're reading are work items within it!</p><p class=\"editor-paragraph-block\">We're showing you how to create a new project just so you'll know exactly what to do when you're ready to start your own real one.</p></div><ol class=\"list-decimal pl-7 space-y-(--list-spacing-y) tight\" data-tight=\"true\"><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Look over at the left sidebar and find where it says <strong>Projects.</strong></p><image-component src=\"https://media.docs.plane.so/seed_assets/21.png\" width=\"395px\" height=\"362px\" id=\"7cb0d276-8686-4c8e-9f00-06a18140964d\" aspectratio=\"1.0900243309002433\"></image-component></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Hover your mouse there and you'll see a little <strong>+</strong> icon pop up - go ahead and click it!</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">A modal opens where you can give your project a name and other details.</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Notice the Access type<strong> </strong>options? <strong>Public</strong> means anyone (except Guest users) can see and join it, while <strong>Private</strong> keeps it just for those you invite.</p><div data-icon-color=\"#6d7b8a\" data-icon-name=\"Info\" data-emoji-unicode=\"128161\" data-emoji-url=\"https://cdn.jsdelivr.net/npm/emoji-datasource-apple/img/apple/64/1f4a1.png\" data-logo-in-use=\"emoji\" data-background=\"green\" data-block-type=\"callout-component\"><p class=\"editor-paragraph-block\"><strong>Tip:</strong> You can also quickly create a new project by using the keyboard shortcut <strong>P</strong> from anywhere in Plane!</p></div></li></ol>",
     "sort_order": 2000,
     "state_id": 2,
     "labels": [2],
@@ -30,7 +30,7 @@
     "id": 3,
     "name": "2. Invite your team 🤜🤛",
     "sequence_id": 3,
-    "description_html": "<p class=\"editor-paragraph-block\">Let's get your teammates on board!</p><p class=\"editor-paragraph-block\">First, you'll need to invite them to your workspace before they can join specific projects:</p><ol class=\"list-decimal pl-7 space-y-[--list-spacing-y] tight\" data-tight=\"true\"><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Click on your workspace name in the top-left corner, then select <strong>Settings</strong> from the dropdown.<br></p><image-component src=\"https://media.docs.plane.so/seed_assets/31.png\" width=\"395px\" height=\"367px\" id=\"26b0f613-b9d8-48b8-a10d-1a75501f19e0\" aspectratio=\"1.074766355140187\"></image-component></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Head over to the <strong>Members</strong> tab - this is your user management hub. Click <strong>Add member</strong> on the top right.<br></p><image-component src=\"https://media.docs.plane.so/seed_assets/32.png\" width=\"1144.380859375px\" height=\"206.3244316692872px\" id=\"7c64e9b0-4f6d-4958-917d-f77119cd48bd\" aspectratio=\"5.546511627906977\"></image-component></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Enter your teammate's email address. Select a role for them (Admin, Member or Guest) that determines what they can do in the workspace.</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Your team member will get an email invite. Once they've joined your workspace, you can add them to specific projects.</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">To do this, go to your project's <strong>Settings</strong> page.</p><image-component src=\"https://media.docs.plane.so/seed_assets/33.png\" width=\"1119.380859375px\" height=\"329.9601265352615px\" id=\"3029c693-19fc-458e-9f5c-fdf3511dd2b6\" aspectratio=\"3.39247311827957\"></image-component></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Find the <strong>Members</strong> section, select your teammate, and assign them a project role - this controls what they can do within just this project.</p></li></ol><p class=\"editor-paragraph-block\"><br>That's it!</p><div class=\"py-4 border-custom-border-400\" data-type=\"horizontalRule\"><div></div></div><p class=\"editor-paragraph-block\">To learn more about user management, see <a target=\"_blank\" rel=\"noopener noreferrer nofollow\" class=\"text-custom-primary-300 underline underline-offset-[3px] hover:text-custom-primary-500 transition-colors cursor-pointer\" href=\"https://docs.plane.so/core-concepts/workspaces/members\">Manage users and roles</a>.</p>",
+    "description_html": "<p class=\"editor-paragraph-block\">Let's get your teammates on board!</p><p class=\"editor-paragraph-block\">First, you'll need to invite them to your workspace before they can join specific projects:</p><ol class=\"list-decimal pl-7 space-y-(--list-spacing-y) tight\" data-tight=\"true\"><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Click on your workspace name in the top-left corner, then select <strong>Settings</strong> from the dropdown.<br></p><image-component src=\"https://media.docs.plane.so/seed_assets/31.png\" width=\"395px\" height=\"367px\" id=\"26b0f613-b9d8-48b8-a10d-1a75501f19e0\" aspectratio=\"1.074766355140187\"></image-component></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Head over to the <strong>Members</strong> tab - this is your user management hub. Click <strong>Add member</strong> on the top right.<br></p><image-component src=\"https://media.docs.plane.so/seed_assets/32.png\" width=\"1144.380859375px\" height=\"206.3244316692872px\" id=\"7c64e9b0-4f6d-4958-917d-f77119cd48bd\" aspectratio=\"5.546511627906977\"></image-component></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Enter your teammate's email address. Select a role for them (Admin, Member or Guest) that determines what they can do in the workspace.</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Your team member will get an email invite. Once they've joined your workspace, you can add them to specific projects.</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">To do this, go to your project's <strong>Settings</strong> page.</p><image-component src=\"https://media.docs.plane.so/seed_assets/33.png\" width=\"1119.380859375px\" height=\"329.9601265352615px\" id=\"3029c693-19fc-458e-9f5c-fdf3511dd2b6\" aspectratio=\"3.39247311827957\"></image-component></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Find the <strong>Members</strong> section, select your teammate, and assign them a project role - this controls what they can do within just this project.</p></li></ol><p class=\"editor-paragraph-block\"><br>That's it!</p><div class=\"py-4 border-strong-1\" data-type=\"horizontalRule\"><div></div></div><p class=\"editor-paragraph-block\">To learn more about user management, see <a target=\"_blank\" rel=\"noopener noreferrer nofollow\" class=\"text-custom-primary-300 underline underline-offset-[3px] hover:text-custom-primary-500 transition-colors cursor-pointer\" href=\"https://docs.plane.so/core-concepts/workspaces/members\">Manage users and roles</a>.</p>",
     "description_stripped": "Let's get your teammates on board!First, you'll need to invite them to your workspace before they can join specific projects:Click on your workspace name in the top-left corner, then select Settings from the dropdown.Head over to the Members tab - this is your user management hub. Click Add member on the top right.Enter your teammate's email address. Select a role for them (Admin, Member or Guest) that determines what they can do in the workspace.Your team member will get an email invite. Once they've joined your workspace, you can add them to specific projects.To do this, go to your project's Settings page.Find the Members section, select your teammate, and assign them a project role - this controls what they can do within just this project.That's it!To learn more about user management, see Manage users and roles.",
     "sort_order": 3000,
     "state_id": 1,
@@ -44,7 +44,7 @@
     "id": 4,
     "name": "3. Create and assign Work Items ✏️",
     "sequence_id": 4,
-    "description_html": "<p class=\"editor-paragraph-block\">A work item is the fundamental building block of your project. Think of these as the actionable tasks that move your project forward.</p><p class=\"editor-paragraph-block\">Ready to add something to your project's to-do list? Here's how:</p><ol class=\"list-decimal pl-7 space-y-[--list-spacing-y] tight\" data-tight=\"true\"><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Click the <strong>Add work item</strong> button in the top-right corner of the Work Items page.</p><image-component src=\"https://media.docs.plane.so/seed_assets/41.png\" width=\"1085.380859375px\" height=\"482.53758375605696px\" id=\"ba055bc3-4162-4750-9ad4-9434fc0e7121\" aspectratio=\"2.249318801089918\"></image-component></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Give your task a clear title and add any details in the description.</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Set up the essentials:</p><ul class=\"list-disc pl-7 space-y-[--list-spacing-y] tight\" data-tight=\"true\"><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Assign it to a team member (or yourself!)</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Choose a priority level</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Add start and due dates if there's a timeline</p></li></ul></li></ol><div data-emoji-unicode=\"128161\" data-emoji-url=\"https://cdn.jsdelivr.net/npm/emoji-datasource-apple/img/apple/64/1f4a1.png\" data-logo-in-use=\"emoji\" data-background=\"green\" data-block-type=\"callout-component\"><p class=\"editor-paragraph-block\"><strong>Tip:</strong> Save time by using the keyboard shortcut <strong>C</strong> from anywhere in your project to quickly create a new work item!</p></div><div class=\"py-4 border-custom-border-400\" data-type=\"horizontalRule\"><div></div></div><p class=\"editor-paragraph-block\">Want to dive deeper into all the things you can do with work items? Check out our <a target=\"_blank\" rel=\"noopener noreferrer nofollow\" class=\"text-custom-primary-300 underline underline-offset-[3px] hover:text-custom-primary-500 transition-colors cursor-pointer\" href=\"https://docs.plane.so/core-concepts/issues/overview\">documentation</a>.</p>",
+    "description_html": "<p class=\"editor-paragraph-block\">A work item is the fundamental building block of your project. Think of these as the actionable tasks that move your project forward.</p><p class=\"editor-paragraph-block\">Ready to add something to your project's to-do list? Here's how:</p><ol class=\"list-decimal pl-7 space-y-(--list-spacing-y) tight\" data-tight=\"true\"><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Click the <strong>Add work item</strong> button in the top-right corner of the Work Items page.</p><image-component src=\"https://media.docs.plane.so/seed_assets/41.png\" width=\"1085.380859375px\" height=\"482.53758375605696px\" id=\"ba055bc3-4162-4750-9ad4-9434fc0e7121\" aspectratio=\"2.249318801089918\"></image-component></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Give your task a clear title and add any details in the description.</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Set up the essentials:</p><ul class=\"list-disc pl-7 space-y-(--list-spacing-y) tight\" data-tight=\"true\"><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Assign it to a team member (or yourself!)</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Choose a priority level</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Add start and due dates if there's a timeline</p></li></ul></li></ol><div data-emoji-unicode=\"128161\" data-emoji-url=\"https://cdn.jsdelivr.net/npm/emoji-datasource-apple/img/apple/64/1f4a1.png\" data-logo-in-use=\"emoji\" data-background=\"green\" data-block-type=\"callout-component\"><p class=\"editor-paragraph-block\"><strong>Tip:</strong> Save time by using the keyboard shortcut <strong>C</strong> from anywhere in your project to quickly create a new work item!</p></div><div class=\"py-4 border-strong-1\" data-type=\"horizontalRule\"><div></div></div><p class=\"editor-paragraph-block\">Want to dive deeper into all the things you can do with work items? Check out our <a target=\"_blank\" rel=\"noopener noreferrer nofollow\" class=\"text-custom-primary-300 underline underline-offset-[3px] hover:text-custom-primary-500 transition-colors cursor-pointer\" href=\"https://docs.plane.so/core-concepts/issues/overview\">documentation</a>.</p>",
     "description_stripped": "A work item is the fundamental building block of your project. Think of these as the actionable tasks that move your project forward.Ready to add something to your project's to-do list? Here's how:Click the Add work item button in the top-right corner of the Work Items page.Give your task a clear title and add any details in the description.Set up the essentials:Assign it to a team member (or yourself!)Choose a priority levelAdd start and due dates if there's a timelineTip: Save time by using the keyboard shortcut C from anywhere in your project to quickly create a new work item!Want to dive deeper into all the things you can do with work items? Check out our documentation.",
     "sort_order": 4000,
     "state_id": 3,
@@ -58,7 +58,7 @@
     "id": 5,
     "name": "4. Visualize your work 🔮",
     "sequence_id": 5,
-    "description_html": "<p class=\"editor-paragraph-block\">Plane offers multiple ways to look at your work items depending on what you need to see. Let's explore how to change views and customize them!</p><image-component src=\"https://media.docs.plane.so/seed_assets/51.png\" aspectratio=\"4.489130434782608\"></image-component><h2 class=\"editor-heading-block\">Switch between layouts</h2><ol class=\"list-decimal pl-7 space-y-[--list-spacing-y] tight\" data-tight=\"true\"><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Look at the top toolbar in your project. You'll see several layout icons.</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Click any of these icons to instantly switch between layouts.</p></li></ol><div data-emoji-unicode=\"128161\" data-emoji-url=\"https://cdn.jsdelivr.net/npm/emoji-datasource-apple/img/apple/64/1f4a1.png\" data-logo-in-use=\"emoji\" data-background=\"green\" data-block-type=\"callout-component\"><p class=\"editor-paragraph-block\"><strong>Tip:</strong> Different layouts work best for different needs. Try Board view for tracking progress, Calendar for deadline management, and Gantt for timeline planning! See <a target=\"_blank\" rel=\"noopener noreferrer nofollow\" class=\"text-custom-primary-300 underline underline-offset-[3px] hover:text-custom-primary-500 transition-colors cursor-pointer\" href=\"https://docs.plane.so/core-concepts/issues/layouts\"><strong>Layouts</strong></a> for more info.</p></div><h2 class=\"editor-heading-block\">Filter and display options</h2><p class=\"editor-paragraph-block\">Need to focus on specific work?</p><ol class=\"list-decimal pl-7 space-y-[--list-spacing-y] tight\" data-tight=\"true\"><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Click the <strong>Filters</strong> dropdown in the toolbar. Select criteria and choose which items to show.</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Click the <strong>Display</strong> dropdown to tailor how the information appears in your layout</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Created the perfect setup? Save it for later by clicking the the <strong>Save View</strong> button.</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Access saved views anytime from the <strong>Views</strong> section in your sidebar.</p></li></ol>",
+    "description_html": "<p class=\"editor-paragraph-block\">Plane offers multiple ways to look at your work items depending on what you need to see. Let's explore how to change views and customize them!</p><image-component src=\"https://media.docs.plane.so/seed_assets/51.png\" aspectratio=\"4.489130434782608\"></image-component><h2 class=\"editor-heading-block\">Switch between layouts</h2><ol class=\"list-decimal pl-7 space-y-(--list-spacing-y) tight\" data-tight=\"true\"><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Look at the top toolbar in your project. You'll see several layout icons.</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Click any of these icons to instantly switch between layouts.</p></li></ol><div data-emoji-unicode=\"128161\" data-emoji-url=\"https://cdn.jsdelivr.net/npm/emoji-datasource-apple/img/apple/64/1f4a1.png\" data-logo-in-use=\"emoji\" data-background=\"green\" data-block-type=\"callout-component\"><p class=\"editor-paragraph-block\"><strong>Tip:</strong> Different layouts work best for different needs. Try Board view for tracking progress, Calendar for deadline management, and Gantt for timeline planning! See <a target=\"_blank\" rel=\"noopener noreferrer nofollow\" class=\"text-custom-primary-300 underline underline-offset-[3px] hover:text-custom-primary-500 transition-colors cursor-pointer\" href=\"https://docs.plane.so/core-concepts/issues/layouts\"><strong>Layouts</strong></a> for more info.</p></div><h2 class=\"editor-heading-block\">Filter and display options</h2><p class=\"editor-paragraph-block\">Need to focus on specific work?</p><ol class=\"list-decimal pl-7 space-y-(--list-spacing-y) tight\" data-tight=\"true\"><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Click the <strong>Filters</strong> dropdown in the toolbar. Select criteria and choose which items to show.</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Click the <strong>Display</strong> dropdown to tailor how the information appears in your layout</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Created the perfect setup? Save it for later by clicking the the <strong>Save View</strong> button.</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Access saved views anytime from the <strong>Views</strong> section in your sidebar.</p></li></ol>",
     "description_stripped": "Plane offers multiple ways to look at your work items depending on what you need to see. Let's explore how to change views and customize them!Switch between layoutsLook at the top toolbar in your project. You'll see several layout icons.Click any of these icons to instantly switch between layouts.Tip: Different layouts work best for different needs. Try Board view for tracking progress, Calendar for deadline management, and Gantt for timeline planning! See Layouts for more info.Filter and display optionsNeed to focus on specific work?Click the Filters dropdown in the toolbar. Select criteria and choose which items to show.Click the Display dropdown to tailor how the information appears in your layoutCreated the perfect setup? Save it for later by clicking the the Save View button.Access saved views anytime from the Views section in your sidebar.",
     "sort_order": 5000,
     "state_id": 3,
@@ -72,7 +72,7 @@
     "id": 6,
     "name": "5. Use Cycles to time box tasks 🗓️",
     "sequence_id": 6,
-    "description_html": "<p class=\"editor-paragraph-block\">A Cycle in Plane is like a sprint - a dedicated timeframe where your team focuses on completing specific work items. It helps you break down your project into manageable chunks with clear start and end dates so everyone knows what to work on and when it needs to be done.</p><h2 class=\"editor-heading-block\"><strong>Setup Cycles</strong></h2><ol class=\"list-decimal pl-7 space-y-[--list-spacing-y] tight\" data-tight=\"true\"><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Go to the <strong>Cycles</strong> section in your project (you can find it in the left sidebar)</p><image-component src=\"https://media.docs.plane.so/seed_assets/61.png\" width=\"1144.380859375px\" height=\"341.8747850334119px\" id=\"9c3aea94-703a-4d4c-8c39-4201e994711d\" aspectratio=\"3.3473684210526318\"></image-component></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Click the <strong>Add cycle </strong>button in the top-right corner</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Enter details and set the start and end dates for your cycle.</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Click <strong>Create cycle</strong> and you're ready to go!</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Add existing work items to the Cycle or create new ones.</p></li></ol><div data-emoji-unicode=\"128161\" data-emoji-url=\"https://cdn.jsdelivr.net/npm/emoji-datasource-apple/img/apple/64/1f4a1.png\" data-logo-in-use=\"emoji\" data-background=\"green\" data-block-type=\"callout-component\"><p class=\"editor-paragraph-block\"><strong>Tip:</strong> To create a new Cycle quickly, just press <code class=\"rounded bg-custom-background-80 px-[6px] py-[1.5px] font-mono font-medium text-orange-500 border-[0.5px] border-custom-border-200\" spellcheck=\"false\">Q</code> from anywhere in your project!</p></div><div class=\"py-4 border-custom-border-400\" data-type=\"horizontalRule\"><div></div></div><p class=\"editor-paragraph-block\">Want to learn more?</p><ul class=\"list-disc pl-7 space-y-[--list-spacing-y] tight\" data-tight=\"true\"><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Starting and stopping cycles</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Transferring work items between cycles</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Tracking progress with charts</p></li></ul><p class=\"editor-paragraph-block\">Check out our <a target=\"_blank\" rel=\"noopener noreferrer nofollow\" class=\"text-custom-primary-300 underline underline-offset-[3px] hover:text-custom-primary-500 transition-colors cursor-pointer\" href=\"https://docs.plane.so/core-concepts/cycles\">detailed documentation</a> for everything you need to know!</p>",
+    "description_html": "<p class=\"editor-paragraph-block\">A Cycle in Plane is like a sprint - a dedicated timeframe where your team focuses on completing specific work items. It helps you break down your project into manageable chunks with clear start and end dates so everyone knows what to work on and when it needs to be done.</p><h2 class=\"editor-heading-block\"><strong>Setup Cycles</strong></h2><ol class=\"list-decimal pl-7 space-y-(--list-spacing-y) tight\" data-tight=\"true\"><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Go to the <strong>Cycles</strong> section in your project (you can find it in the left sidebar)</p><image-component src=\"https://media.docs.plane.so/seed_assets/61.png\" width=\"1144.380859375px\" height=\"341.8747850334119px\" id=\"9c3aea94-703a-4d4c-8c39-4201e994711d\" aspectratio=\"3.3473684210526318\"></image-component></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Click the <strong>Add cycle </strong>button in the top-right corner</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Enter details and set the start and end dates for your cycle.</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Click <strong>Create cycle</strong> and you're ready to go!</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Add existing work items to the Cycle or create new ones.</p></li></ol><div data-emoji-unicode=\"128161\" data-emoji-url=\"https://cdn.jsdelivr.net/npm/emoji-datasource-apple/img/apple/64/1f4a1.png\" data-logo-in-use=\"emoji\" data-background=\"green\" data-block-type=\"callout-component\"><p class=\"editor-paragraph-block\"><strong>Tip:</strong> To create a new Cycle quickly, just press <code class=\"rounded bg-layer-1 px-[6px] py-[1.5px] font-mono font-medium text-orange-500 border-[0.5px] border-subtle-1\" spellcheck=\"false\">Q</code> from anywhere in your project!</p></div><div class=\"py-4 border-strong-1\" data-type=\"horizontalRule\"><div></div></div><p class=\"editor-paragraph-block\">Want to learn more?</p><ul class=\"list-disc pl-7 space-y-(--list-spacing-y) tight\" data-tight=\"true\"><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Starting and stopping cycles</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Transferring work items between cycles</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Tracking progress with charts</p></li></ul><p class=\"editor-paragraph-block\">Check out our <a target=\"_blank\" rel=\"noopener noreferrer nofollow\" class=\"text-custom-primary-300 underline underline-offset-[3px] hover:text-custom-primary-500 transition-colors cursor-pointer\" href=\"https://docs.plane.so/core-concepts/cycles\">detailed documentation</a> for everything you need to know!</p>",
     "description_stripped": "A Cycle in Plane is like a sprint - a dedicated timeframe where your team focuses on completing specific work items. It helps you break down your project into manageable chunks with clear start and end dates so everyone knows what to work on and when it needs to be done.Setup CyclesGo to the Cycles section in your project (you can find it in the left sidebar)Click the Add cycle button in the top-right cornerEnter details and set the start and end dates for your cycle.Click Create cycle and you're ready to go!Add existing work items to the Cycle or create new ones.Tip: To create a new Cycle quickly, just press Q from anywhere in your project!Want to learn more?Starting and stopping cyclesTransferring work items between cyclesTracking progress with chartsCheck out our detailed documentation for everything you need to know!",
     "sort_order": 6000,
     "state_id": 1,
@@ -86,7 +86,7 @@
     "id": 7,
     "name": "6. Customize your settings ⚙️",
     "sequence_id": 7,
-    "description_html": "<p class=\"editor-paragraph-block\">Now that you're getting familiar with Plane, let's explore how you can customize settings to make it work just right for you and your team!</p><h2 class=\"editor-heading-block\">Workspace settings</h2><p class=\"editor-paragraph-block\">Remember those workspace settings we mentioned when inviting team members? There's a lot more you can do there:</p><ul class=\"list-disc pl-7 space-y-[--list-spacing-y] tight\" data-tight=\"true\"><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Invite and manage workspace members</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Upgrade plans and manage billing</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Import data from other tools</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Export your data</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Manage integrations</p></li></ul><h2 class=\"editor-heading-block\">Project Settings</h2><p class=\"editor-paragraph-block\">Each project has its own settings where you can:</p><ul class=\"list-disc pl-7 space-y-[--list-spacing-y] tight\" data-tight=\"true\"><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Change project details and visibility</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Invite specific members to just this project</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Customize your workflow States (like adding a \"Testing\" state)</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Create and organize Labels</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Enable or disable features you need (or don't need)</p></li></ul><h2 class=\"editor-heading-block\">Your Profile Settings</h2><p class=\"editor-paragraph-block\">You can also customize your own personal experience! Click on your profile icon in the top-right corner to find:</p><ul class=\"list-disc pl-7 space-y-[--list-spacing-y] tight\" data-tight=\"true\"><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Profile settings (update your name, photo, etc.)</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Choose your timezone and preferred language for the interface</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Email notification preferences (what you want to be alerted about)</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Appearance settings (light/dark mode)<br></p></li></ul><p class=\"editor-paragraph-block\">Taking a few minutes to set things up just the way you like will make your everyday Plane experience much smoother!</p><div data-emoji-unicode=\"128278\" data-emoji-url=\"https://cdn.jsdelivr.net/npm/emoji-datasource-apple/img/apple/64/1f516.png\" data-logo-in-use=\"emoji\" data-background=\"green\" data-block-type=\"callout-component\"><p class=\"editor-paragraph-block\"><strong>Note:</strong> Some settings are only available to workspace or project admins. If you don't see certain options, you might need admin access.</p></div><p class=\"editor-paragraph-block\"></p><div class=\"py-4 border-custom-border-400\" data-type=\"horizontalRule\"><div></div></div><p class=\"editor-paragraph-block\"></p>",
+    "description_html": "<p class=\"editor-paragraph-block\">Now that you're getting familiar with Plane, let's explore how you can customize settings to make it work just right for you and your team!</p><h2 class=\"editor-heading-block\">Workspace settings</h2><p class=\"editor-paragraph-block\">Remember those workspace settings we mentioned when inviting team members? There's a lot more you can do there:</p><ul class=\"list-disc pl-7 space-y-(--list-spacing-y) tight\" data-tight=\"true\"><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Invite and manage workspace members</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Upgrade plans and manage billing</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Import data from other tools</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Export your data</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Manage integrations</p></li></ul><h2 class=\"editor-heading-block\">Project Settings</h2><p class=\"editor-paragraph-block\">Each project has its own settings where you can:</p><ul class=\"list-disc pl-7 space-y-(--list-spacing-y) tight\" data-tight=\"true\"><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Change project details and visibility</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Invite specific members to just this project</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Customize your workflow States (like adding a \"Testing\" state)</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Create and organize Labels</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Enable or disable features you need (or don't need)</p></li></ul><h2 class=\"editor-heading-block\">Your Profile Settings</h2><p class=\"editor-paragraph-block\">You can also customize your own personal experience! Click on your profile icon in the top-right corner to find:</p><ul class=\"list-disc pl-7 space-y-(--list-spacing-y) tight\" data-tight=\"true\"><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Profile settings (update your name, photo, etc.)</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Choose your timezone and preferred language for the interface</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Email notification preferences (what you want to be alerted about)</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Appearance settings (light/dark mode)<br></p></li></ul><p class=\"editor-paragraph-block\">Taking a few minutes to set things up just the way you like will make your everyday Plane experience much smoother!</p><div data-emoji-unicode=\"128278\" data-emoji-url=\"https://cdn.jsdelivr.net/npm/emoji-datasource-apple/img/apple/64/1f516.png\" data-logo-in-use=\"emoji\" data-background=\"green\" data-block-type=\"callout-component\"><p class=\"editor-paragraph-block\"><strong>Note:</strong> Some settings are only available to workspace or project admins. If you don't see certain options, you might need admin access.</p></div><p class=\"editor-paragraph-block\"></p><div class=\"py-4 border-strong-1\" data-type=\"horizontalRule\"><div></div></div><p class=\"editor-paragraph-block\"></p>",
     "description_stripped": "Now that you're getting familiar with Plane, let's explore how you can customize settings to make it work just right for you and your team!Workspace settingsRemember those workspace settings we mentioned when inviting team members? There's a lot more you can do there:Invite and manage workspace membersUpgrade plans and manage billingImport data from other toolsExport your dataManage integrationsProject SettingsEach project has its own settings where you can:Change project details and visibilityInvite specific members to just this projectCustomize your workflow States (like adding a \"Testing\" state)Create and organize LabelsEnable or disable features you need (or don't need)Your Profile SettingsYou can also customize your own personal experience! Click on your profile icon in the top-right corner to find:Profile settings (update your name, photo, etc.)Choose your timezone and preferred language for the interfaceEmail notification preferences (what you want to be alerted about)Appearance settings (light/dark mode)Taking a few minutes to set things up just the way you like will make your everyday Plane experience much smoother!Note: Some settings are only available to workspace or project admins. If you don't see certain options, you might need admin access.",
     "sort_order": 7000,
     "state_id": 1,
diff --git a/apps/api/plane/seeds/data/pages.json b/apps/api/plane/seeds/data/pages.json
index d719220bf..00c5c91ef 100644
--- a/apps/api/plane/seeds/data/pages.json
+++ b/apps/api/plane/seeds/data/pages.json
@@ -1,30 +1,30 @@
 [
-    {
-        "id": 1,
-        "name": "Project Design Spec",
-        "project_id": 1,
-        "description_html": "<p xmlns=\"http://www.w3.org/1999/xhtml\" class=\"editor-paragraph-block\">Welcome to your <strong>Project Pages</strong> — the documentation hub for this specific project.<br />Each project in Plane can have its own Wiki space where you track <strong>plans, specs, updates, and learnings</strong> — all connected to your issues and modules.</p><div xmlns=\"http://www.w3.org/1999/xhtml\" class=\"py-4 border-custom-border-400\" data-type=\"horizontalRule\"><div></div></div><h2 xmlns=\"http://www.w3.org/1999/xhtml\" class=\"editor-heading-block\"><span data-name=\"compass\" data-type=\"emoji\">🧭</span> Project Summary</h2><table xmlns=\"http://www.w3.org/1999/xhtml\"><tbody><tr style=\"\"><th colspan=\"1\" rowspan=\"1\" colwidth=\"150\" background=\"none\" hidecontent=\"false\" class=\"\" style=\"background-color: none;\"><p class=\"editor-paragraph-block\">Field</p></th><th colspan=\"1\" rowspan=\"1\" colwidth=\"666\" background=\"none\" hidecontent=\"false\" class=\"\" style=\"background-color: none;\"><p class=\"editor-paragraph-block\">Details</p></th></tr><tr style=\"\"><td colspan=\"1\" rowspan=\"1\" colwidth=\"150\" hidecontent=\"false\" class=\"\" style=\"\"><p class=\"editor-paragraph-block\"><strong>Project Name</strong></p></td><td colspan=\"1\" rowspan=\"1\" colwidth=\"666\" hidecontent=\"false\" class=\"\" style=\"\"><p class=\"editor-paragraph-block\"><span data-name=\"pencil\" data-type=\"emoji\">✏</span> Add your project name</p></td></tr><tr style=\"\"><td colspan=\"1\" rowspan=\"1\" colwidth=\"150\" hidecontent=\"false\" class=\"\" style=\"\"><p class=\"editor-paragraph-block\"><strong>Owner</strong></p></td><td colspan=\"1\" rowspan=\"1\" colwidth=\"666\" hidecontent=\"false\" class=\"\" style=\"\"><p class=\"editor-paragraph-block\">Add project owner(s)</p></td></tr><tr style=\"\"><td colspan=\"1\" rowspan=\"1\" colwidth=\"150\" hidecontent=\"false\" class=\"\" style=\"\"><p class=\"editor-paragraph-block\"><strong>Status</strong></p></td><td colspan=\"1\" rowspan=\"1\" colwidth=\"666\" hidecontent=\"false\" class=\"\" style=\"\"><p class=\"editor-paragraph-block\"><span data-name=\"green_circle\" data-type=\"emoji\">🟢</span> Active / <span data-name=\"yellow_circle\" data-type=\"emoji\">🟡</span> In Progress / <span data-name=\"red_circle\" data-type=\"emoji\">🔴</span> Blocked</p></td></tr><tr style=\"\"><td colspan=\"1\" rowspan=\"1\" colwidth=\"150\" hidecontent=\"false\" class=\"\" style=\"\"><p class=\"editor-paragraph-block\"><strong>Start Date</strong></p></td><td colspan=\"1\" rowspan=\"1\" colwidth=\"666\" hidecontent=\"false\" class=\"\" style=\"\"><p class=\"editor-paragraph-block\">—</p></td></tr><tr style=\"\"><td colspan=\"1\" rowspan=\"1\" colwidth=\"150\" hidecontent=\"false\" class=\"\" style=\"\"><p class=\"editor-paragraph-block\"><strong>Target Release</strong></p></td><td colspan=\"1\" rowspan=\"1\" colwidth=\"666\" hidecontent=\"false\" class=\"\" style=\"\"><p class=\"editor-paragraph-block\">—</p></td></tr><tr style=\"\"><td colspan=\"1\" rowspan=\"1\" colwidth=\"150\" hidecontent=\"false\" class=\"\" style=\"\"><p class=\"editor-paragraph-block\"><strong>Linked Modules</strong></p></td><td colspan=\"1\" rowspan=\"1\" colwidth=\"666\" hidecontent=\"false\" class=\"\" style=\"\"><p class=\"editor-paragraph-block\">Engineering, Security</p></td></tr><tr style=\"\"><td colspan=\"1\" rowspan=\"1\" colwidth=\"150\" hidecontent=\"false\" class=\"\" style=\"\"><p class=\"editor-paragraph-block\"><strong>Cycle(s)</strong></p></td><td colspan=\"1\" rowspan=\"1\" colwidth=\"666\" hidecontent=\"false\" class=\"\" style=\"\"><p class=\"editor-paragraph-block\">Cycle 1, Cycle 2</p></td></tr></tbody></table><blockquote xmlns=\"http://www.w3.org/1999/xhtml\"><p class=\"editor-paragraph-block\"><span data-name=\"jigsaw\" data-type=\"emoji\">🧩</span> Use tables to summarize key project metadata or links.</p></blockquote><div xmlns=\"http://www.w3.org/1999/xhtml\" class=\"py-4 border-custom-border-400\" data-type=\"horizontalRule\"><div></div></div><h2 xmlns=\"http://www.w3.org/1999/xhtml\" class=\"editor-heading-block\"><span data-name=\"bullseye\" data-type=\"emoji\">🎯</span> Goals &amp; Objectives</h2><h3 xmlns=\"http://www.w3.org/1999/xhtml\" class=\"editor-heading-block\"><span data-name=\"bullseye\" data-type=\"emoji\">🎯</span> Primary Goals</h3><ul xmlns=\"http://www.w3.org/1999/xhtml\" class=\"list-disc pl-7 space-y-[--list-spacing-y]\"><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Deliver MVP with all core features</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Validate feature adoption with early users</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Prepare launch plan for v1 release</p></li></ul><h3 xmlns=\"http://www.w3.org/1999/xhtml\" class=\"editor-heading-block\"><span data-name=\"gear\" data-type=\"emoji\">⚙</span> Success Metrics</h3><table xmlns=\"http://www.w3.org/1999/xhtml\"><tbody><tr style=\"\"><th colspan=\"1\" rowspan=\"1\" colwidth=\"150\" background=\"none\" hidecontent=\"false\" class=\"\" style=\"background-color: none;\"><p class=\"editor-paragraph-block\">Metric</p></th><th colspan=\"1\" rowspan=\"1\" colwidth=\"150\" background=\"none\" hidecontent=\"false\" class=\"\" style=\"background-color: none;\"><p class=\"editor-paragraph-block\">Target</p></th><th colspan=\"1\" rowspan=\"1\" colwidth=\"150\" background=\"none\" hidecontent=\"false\" class=\"\" style=\"background-color: none;\"><p class=\"editor-paragraph-block\">Owner</p></th></tr><tr style=\"\"><td colspan=\"1\" rowspan=\"1\" colwidth=\"150\" hidecontent=\"false\" class=\"\" style=\"\"><p class=\"editor-paragraph-block\">User adoption</p></td><td colspan=\"1\" rowspan=\"1\" colwidth=\"150\" hidecontent=\"false\" class=\"\" style=\"\"><p class=\"editor-paragraph-block\">100 active users</p></td><td colspan=\"1\" rowspan=\"1\" colwidth=\"150\" hidecontent=\"false\" class=\"\" style=\"\"><p class=\"editor-paragraph-block\">Growth</p></td></tr><tr style=\"\"><td colspan=\"1\" rowspan=\"1\" colwidth=\"150\" hidecontent=\"false\" class=\"\" style=\"\"><p class=\"editor-paragraph-block\">Performance</p></td><td colspan=\"1\" rowspan=\"1\" colwidth=\"150\" hidecontent=\"false\" class=\"\" style=\"\"><p class=\"editor-paragraph-block\">&lt; 200ms latency</p></td><td colspan=\"1\" rowspan=\"1\" colwidth=\"150\" hidecontent=\"false\" class=\"\" style=\"\"><p class=\"editor-paragraph-block\">Backend</p></td></tr><tr style=\"\"><td colspan=\"1\" rowspan=\"1\" colwidth=\"150\" hidecontent=\"false\" class=\"\" style=\"\"><p class=\"editor-paragraph-block\">Design feedback</p></td><td colspan=\"1\" rowspan=\"1\" colwidth=\"150\" hidecontent=\"false\" class=\"\" style=\"\"><p class=\"editor-paragraph-block\">≥ 8/10 average rating</p></td><td colspan=\"1\" rowspan=\"1\" colwidth=\"150\" hidecontent=\"false\" class=\"\" style=\"\"><p class=\"editor-paragraph-block\">Design</p></td></tr></tbody></table><blockquote xmlns=\"http://www.w3.org/1999/xhtml\"><p class=\"editor-paragraph-block\"><span data-name=\"chart_increasing\" data-type=\"emoji\">📈</span> Define measurable outcomes and track progress alongside issues.</p></blockquote><div xmlns=\"http://www.w3.org/1999/xhtml\" class=\"py-4 border-custom-border-400\" data-type=\"horizontalRule\"><div></div></div><h2 xmlns=\"http://www.w3.org/1999/xhtml\" class=\"editor-heading-block\"><span data-name=\"jigsaw\" data-type=\"emoji\">🧩</span> Scope &amp; Deliverables</h2><table xmlns=\"http://www.w3.org/1999/xhtml\"><tbody><tr style=\"\"><th colspan=\"1\" rowspan=\"1\" colwidth=\"150\" background=\"none\" hidecontent=\"false\" class=\"\" style=\"background-color: none;\"><p class=\"editor-paragraph-block\">Deliverable</p></th><th colspan=\"1\" rowspan=\"1\" colwidth=\"150\" background=\"none\" hidecontent=\"false\" class=\"\" style=\"background-color: none;\"><p class=\"editor-paragraph-block\">Owner</p></th><th colspan=\"1\" rowspan=\"1\" colwidth=\"150\" background=\"none\" hidecontent=\"false\" class=\"\" style=\"background-color: none;\"><p class=\"editor-paragraph-block\">Status</p></th></tr><tr style=\"\"><td colspan=\"1\" rowspan=\"1\" colwidth=\"150\" hidecontent=\"false\" class=\"\" style=\"\"><p class=\"editor-paragraph-block\">Authentication flow</p></td><td colspan=\"1\" rowspan=\"1\" colwidth=\"150\" hidecontent=\"false\" class=\"\" style=\"\"><p class=\"editor-paragraph-block\">Backend</p></td><td colspan=\"1\" rowspan=\"1\" colwidth=\"150\" hidecontent=\"false\" class=\"\" style=\"\"><p class=\"editor-paragraph-block\"><span data-name=\"check_mark_button\" data-type=\"emoji\">✅</span> Done</p></td></tr><tr style=\"\"><td colspan=\"1\" rowspan=\"1\" colwidth=\"150\" hidecontent=\"false\" class=\"\" style=\"\"><p class=\"editor-paragraph-block\">Issue board UI</p></td><td colspan=\"1\" rowspan=\"1\" colwidth=\"150\" hidecontent=\"false\" class=\"\" style=\"\"><p class=\"editor-paragraph-block\">Frontend</p></td><td colspan=\"1\" rowspan=\"1\" colwidth=\"150\" hidecontent=\"false\" class=\"\" style=\"\"><p class=\"editor-paragraph-block\"><span data-name=\"building_construction\" data-type=\"emoji\">🏗</span> In Progress</p></td></tr><tr style=\"\"><td colspan=\"1\" rowspan=\"1\" colwidth=\"150\" hidecontent=\"false\" class=\"\" style=\"\"><p class=\"editor-paragraph-block\">API integration</p></td><td colspan=\"1\" rowspan=\"1\" colwidth=\"150\" hidecontent=\"false\" class=\"\" style=\"\"><p class=\"editor-paragraph-block\">Backend</p></td><td colspan=\"1\" rowspan=\"1\" colwidth=\"150\" hidecontent=\"false\" class=\"\" style=\"\"><p class=\"editor-paragraph-block\"><span data-name=\"hourglass_flowing_sand\" data-type=\"emoji\">⏳</span> Pending</p></td></tr><tr style=\"\"><td colspan=\"1\" rowspan=\"1\" colwidth=\"150\" hidecontent=\"false\" class=\"\" style=\"\"><p class=\"editor-paragraph-block\">Documentation</p></td><td colspan=\"1\" rowspan=\"1\" colwidth=\"150\" hidecontent=\"false\" class=\"\" style=\"\"><p class=\"editor-paragraph-block\">PM</p></td><td colspan=\"1\" rowspan=\"1\" colwidth=\"150\" hidecontent=\"false\" class=\"\" style=\"\"><p class=\"editor-paragraph-block\"><span data-name=\"memo\" data-type=\"emoji\">📝</span> Drafting</p></td></tr></tbody></table><blockquote xmlns=\"http://www.w3.org/1999/xhtml\"><p class=\"editor-paragraph-block\"><span data-name=\"jigsaw\" data-type=\"emoji\">🧩</span> Use tables or checklists to track scope and ownership.</p></blockquote><div xmlns=\"http://www.w3.org/1999/xhtml\" class=\"py-4 border-custom-border-400\" data-type=\"horizontalRule\"><div></div></div><h2 xmlns=\"http://www.w3.org/1999/xhtml\" class=\"editor-heading-block\"><span data-name=\"bricks\" data-type=\"emoji\">🧱</span> Architecture or System Design</h2><p xmlns=\"http://www.w3.org/1999/xhtml\" class=\"editor-paragraph-block\">Use this section for <strong>technical deep dives</strong> or diagrams.</p><pre xmlns=\"http://www.w3.org/1999/xhtml\"><code class=\"language-bash\">Frontend → GraphQL → Backend → PostgreSQL\nRedis for caching | RabbitMQ for background jobs</code></pre><p xmlns=\"http://www.w3.org/1999/xhtml\" class=\"editor-paragraph-block\"></p>",
-        "description": "{\"type\": \"doc\", \"content\": [{\"type\": \"paragraph\", \"attrs\": {\"textAlign\": null}, \"content\": [{\"text\": \"Welcome to your \", \"type\": \"text\"}, {\"text\": \"Project Pages\", \"type\": \"text\", \"marks\": [{\"type\": \"bold\"}]}, {\"text\": \" — the documentation hub for this specific project.\", \"type\": \"text\"}, {\"type\": \"hardBreak\"}, {\"text\": \"Each project in Plane can have its own Wiki space where you track \", \"type\": \"text\"}, {\"text\": \"plans, specs, updates, and learnings\", \"type\": \"text\", \"marks\": [{\"type\": \"bold\"}]}, {\"text\": \" — all connected to your issues and modules.\", \"type\": \"text\"}]}, {\"type\": \"horizontalRule\"}, {\"type\": \"heading\", \"attrs\": {\"level\": 2, \"textAlign\": null}, \"content\": [{\"type\": \"emoji\", \"attrs\": {\"name\": \"compass\"}}, {\"text\": \" Project Summary\", \"type\": \"text\"}]}, {\"type\": \"table\", \"content\": [{\"type\": \"tableRow\", \"attrs\": {\"textColor\": null, \"background\": null}, \"content\": [{\"type\": \"tableHeader\", \"attrs\": {\"colspan\": 1, \"rowspan\": 1, \"colwidth\": [150], \"background\": \"none\", \"hideContent\": false}, \"content\": [{\"type\": \"paragraph\", \"attrs\": {\"textAlign\": null}, \"content\": [{\"text\": \"Field\", \"type\": \"text\"}]}]}, {\"type\": \"tableHeader\", \"attrs\": {\"colspan\": 1, \"rowspan\": 1, \"colwidth\": [666], \"background\": \"none\", \"hideContent\": false}, \"content\": [{\"type\": \"paragraph\", \"attrs\": {\"textAlign\": null}, \"content\": [{\"text\": \"Details\", \"type\": \"text\"}]}]}]}, {\"type\": \"tableRow\", \"attrs\": {\"textColor\": null, \"background\": null}, \"content\": [{\"type\": \"tableCell\", \"attrs\": {\"colspan\": 1, \"rowspan\": 1, \"colwidth\": [150], \"textColor\": null, \"background\": null, \"hideContent\": false}, \"content\": [{\"type\": \"paragraph\", \"attrs\": {\"textAlign\": null}, \"content\": [{\"text\": \"Project Name\", \"type\": \"text\", \"marks\": [{\"type\": \"bold\"}]}]}]}, {\"type\": \"tableCell\", \"attrs\": {\"colspan\": 1, \"rowspan\": 1, \"colwidth\": [666], \"textColor\": null, \"background\": null, \"hideContent\": false}, \"content\": [{\"type\": \"paragraph\", \"attrs\": {\"textAlign\": null}, \"content\": [{\"type\": \"emoji\", \"attrs\": {\"name\": \"pencil\"}}, {\"text\": \" Add your project name\", \"type\": \"text\"}]}]}]}, {\"type\": \"tableRow\", \"attrs\": {\"textColor\": null, \"background\": null}, \"content\": [{\"type\": \"tableCell\", \"attrs\": {\"colspan\": 1, \"rowspan\": 1, \"colwidth\": [150], \"textColor\": null, \"background\": null, \"hideContent\": false}, \"content\": [{\"type\": \"paragraph\", \"attrs\": {\"textAlign\": null}, \"content\": [{\"text\": \"Owner\", \"type\": \"text\", \"marks\": [{\"type\": \"bold\"}]}]}]}, {\"type\": \"tableCell\", \"attrs\": {\"colspan\": 1, \"rowspan\": 1, \"colwidth\": [666], \"textColor\": null, \"background\": null, \"hideContent\": false}, \"content\": [{\"type\": \"paragraph\", \"attrs\": {\"textAlign\": null}, \"content\": [{\"text\": \"Add project owner(s)\", \"type\": \"text\"}]}]}]}, {\"type\": \"tableRow\", \"attrs\": {\"textColor\": null, \"background\": null}, \"content\": [{\"type\": \"tableCell\", \"attrs\": {\"colspan\": 1, \"rowspan\": 1, \"colwidth\": [150], \"textColor\": null, \"background\": null, \"hideContent\": false}, \"content\": [{\"type\": \"paragraph\", \"attrs\": {\"textAlign\": null}, \"content\": [{\"text\": \"Status\", \"type\": \"text\", \"marks\": [{\"type\": \"bold\"}]}]}]}, {\"type\": \"tableCell\", \"attrs\": {\"colspan\": 1, \"rowspan\": 1, \"colwidth\": [666], \"textColor\": null, \"background\": null, \"hideContent\": false}, \"content\": [{\"type\": \"paragraph\", \"attrs\": {\"textAlign\": null}, \"content\": [{\"type\": \"emoji\", \"attrs\": {\"name\": \"green_circle\"}}, {\"text\": \" Active / \", \"type\": \"text\"}, {\"type\": \"emoji\", \"attrs\": {\"name\": \"yellow_circle\"}}, {\"text\": \" In Progress / \", \"type\": \"text\"}, {\"type\": \"emoji\", \"attrs\": {\"name\": \"red_circle\"}}, {\"text\": \" Blocked\", \"type\": \"text\"}]}]}]}, {\"type\": \"tableRow\", \"attrs\": {\"textColor\": null, \"background\": null}, \"content\": [{\"type\": \"tableCell\", \"attrs\": {\"colspan\": 1, \"rowspan\": 1, \"colwidth\": [150], \"textColor\": null, \"background\": null, \"hideContent\": false}, \"content\": [{\"type\": \"paragraph\", \"attrs\": {\"textAlign\": null}, \"content\": [{\"text\": \"Start Date\", \"type\": \"text\", \"marks\": [{\"type\": \"bold\"}]}]}]}, {\"type\": \"tableCell\", \"attrs\": {\"colspan\": 1, \"rowspan\": 1, \"colwidth\": [666], \"textColor\": null, \"background\": null, \"hideContent\": false}, \"content\": [{\"type\": \"paragraph\", \"attrs\": {\"textAlign\": null}, \"content\": [{\"text\": \"—\", \"type\": \"text\"}]}]}]}, {\"type\": \"tableRow\", \"attrs\": {\"textColor\": null, \"background\": null}, \"content\": [{\"type\": \"tableCell\", \"attrs\": {\"colspan\": 1, \"rowspan\": 1, \"colwidth\": [150], \"textColor\": null, \"background\": null, \"hideContent\": false}, \"content\": [{\"type\": \"paragraph\", \"attrs\": {\"textAlign\": null}, \"content\": [{\"text\": \"Target Release\", \"type\": \"text\", \"marks\": [{\"type\": \"bold\"}]}]}]}, {\"type\": \"tableCell\", \"attrs\": {\"colspan\": 1, \"rowspan\": 1, \"colwidth\": [666], \"textColor\": null, \"background\": null, \"hideContent\": false}, \"content\": [{\"type\": \"paragraph\", \"attrs\": {\"textAlign\": null}, \"content\": [{\"text\": \"—\", \"type\": \"text\"}]}]}]}, {\"type\": \"tableRow\", \"attrs\": {\"textColor\": null, \"background\": null}, \"content\": [{\"type\": \"tableCell\", \"attrs\": {\"colspan\": 1, \"rowspan\": 1, \"colwidth\": [150], \"textColor\": null, \"background\": null, \"hideContent\": false}, \"content\": [{\"type\": \"paragraph\", \"attrs\": {\"textAlign\": null}, \"content\": [{\"text\": \"Linked Modules\", \"type\": \"text\", \"marks\": [{\"type\": \"bold\"}]}]}]}, {\"type\": \"tableCell\", \"attrs\": {\"colspan\": 1, \"rowspan\": 1, \"colwidth\": [666], \"textColor\": null, \"background\": null, \"hideContent\": false}, \"content\": [{\"type\": \"paragraph\", \"attrs\": {\"textAlign\": null}, \"content\": [{\"text\": \"Engineering, Security\", \"type\": \"text\"}]}]}]}, {\"type\": \"tableRow\", \"attrs\": {\"textColor\": null, \"background\": null}, \"content\": [{\"type\": \"tableCell\", \"attrs\": {\"colspan\": 1, \"rowspan\": 1, \"colwidth\": [150], \"textColor\": null, \"background\": null, \"hideContent\": false}, \"content\": [{\"type\": \"paragraph\", \"attrs\": {\"textAlign\": null}, \"content\": [{\"text\": \"Cycle(s)\", \"type\": \"text\", \"marks\": [{\"type\": \"bold\"}]}]}]}, {\"type\": \"tableCell\", \"attrs\": {\"colspan\": 1, \"rowspan\": 1, \"colwidth\": [666], \"textColor\": null, \"background\": null, \"hideContent\": false}, \"content\": [{\"type\": \"paragraph\", \"attrs\": {\"textAlign\": null}, \"content\": [{\"text\": \"Cycle 1, Cycle 2\", \"type\": \"text\"}]}]}]}]}, {\"type\": \"blockquote\", \"content\": [{\"type\": \"paragraph\", \"attrs\": {\"textAlign\": null}, \"content\": [{\"type\": \"emoji\", \"attrs\": {\"name\": \"jigsaw\"}}, {\"text\": \" Use tables to summarize key project metadata or links.\", \"type\": \"text\"}]}]}, {\"type\": \"horizontalRule\"}, {\"type\": \"heading\", \"attrs\": {\"level\": 2, \"textAlign\": null}, \"content\": [{\"type\": \"emoji\", \"attrs\": {\"name\": \"bullseye\"}}, {\"text\": \" Goals & Objectives\", \"type\": \"text\"}]}, {\"type\": \"heading\", \"attrs\": {\"level\": 3, \"textAlign\": null}, \"content\": [{\"type\": \"emoji\", \"attrs\": {\"name\": \"bullseye\"}}, {\"text\": \" Primary Goals\", \"type\": \"text\"}]}, {\"type\": \"bulletList\", \"content\": [{\"type\": \"listItem\", \"content\": [{\"type\": \"paragraph\", \"attrs\": {\"textAlign\": null}, \"content\": [{\"text\": \"Deliver MVP with all core features\", \"type\": \"text\"}]}]}, {\"type\": \"listItem\", \"content\": [{\"type\": \"paragraph\", \"attrs\": {\"textAlign\": null}, \"content\": [{\"text\": \"Validate feature adoption with early users\", \"type\": \"text\"}]}]}, {\"type\": \"listItem\", \"content\": [{\"type\": \"paragraph\", \"attrs\": {\"textAlign\": null}, \"content\": [{\"text\": \"Prepare launch plan for v1 release\", \"type\": \"text\"}]}]}]}, {\"type\": \"heading\", \"attrs\": {\"level\": 3, \"textAlign\": null}, \"content\": [{\"type\": \"emoji\", \"attrs\": {\"name\": \"gear\"}}, {\"text\": \" Success Metrics\", \"type\": \"text\"}]}, {\"type\": \"table\", \"content\": [{\"type\": \"tableRow\", \"attrs\": {\"textColor\": null, \"background\": null}, \"content\": [{\"type\": \"tableHeader\", \"attrs\": {\"colspan\": 1, \"rowspan\": 1, \"colwidth\": [150], \"background\": \"none\", \"hideContent\": false}, \"content\": [{\"type\": \"paragraph\", \"attrs\": {\"textAlign\": null}, \"content\": [{\"text\": \"Metric\", \"type\": \"text\"}]}]}, {\"type\": \"tableHeader\", \"attrs\": {\"colspan\": 1, \"rowspan\": 1, \"colwidth\": [150], \"background\": \"none\", \"hideContent\": false}, \"content\": [{\"type\": \"paragraph\", \"attrs\": {\"textAlign\": null}, \"content\": [{\"text\": \"Target\", \"type\": \"text\"}]}]}, {\"type\": \"tableHeader\", \"attrs\": {\"colspan\": 1, \"rowspan\": 1, \"colwidth\": [150], \"background\": \"none\", \"hideContent\": false}, \"content\": [{\"type\": \"paragraph\", \"attrs\": {\"textAlign\": null}, \"content\": [{\"text\": \"Owner\", \"type\": \"text\"}]}]}]}, {\"type\": \"tableRow\", \"attrs\": {\"textColor\": null, \"background\": null}, \"content\": [{\"type\": \"tableCell\", \"attrs\": {\"colspan\": 1, \"rowspan\": 1, \"colwidth\": [150], \"textColor\": null, \"background\": null, \"hideContent\": false}, \"content\": [{\"type\": \"paragraph\", \"attrs\": {\"textAlign\": null}, \"content\": [{\"text\": \"User adoption\", \"type\": \"text\"}]}]}, {\"type\": \"tableCell\", \"attrs\": {\"colspan\": 1, \"rowspan\": 1, \"colwidth\": [150], \"textColor\": null, \"background\": null, \"hideContent\": false}, \"content\": [{\"type\": \"paragraph\", \"attrs\": {\"textAlign\": null}, \"content\": [{\"text\": \"100 active users\", \"type\": \"text\"}]}]}, {\"type\": \"tableCell\", \"attrs\": {\"colspan\": 1, \"rowspan\": 1, \"colwidth\": [150], \"textColor\": null, \"background\": null, \"hideContent\": false}, \"content\": [{\"type\": \"paragraph\", \"attrs\": {\"textAlign\": null}, \"content\": [{\"text\": \"Growth\", \"type\": \"text\"}]}]}]}, {\"type\": \"tableRow\", \"attrs\": {\"textColor\": null, \"background\": null}, \"content\": [{\"type\": \"tableCell\", \"attrs\": {\"colspan\": 1, \"rowspan\": 1, \"colwidth\": [150], \"textColor\": null, \"background\": null, \"hideContent\": false}, \"content\": [{\"type\": \"paragraph\", \"attrs\": {\"textAlign\": null}, \"content\": [{\"text\": \"Performance\", \"type\": \"text\"}]}]}, {\"type\": \"tableCell\", \"attrs\": {\"colspan\": 1, \"rowspan\": 1, \"colwidth\": [150], \"textColor\": null, \"background\": null, \"hideContent\": false}, \"content\": [{\"type\": \"paragraph\", \"attrs\": {\"textAlign\": null}, \"content\": [{\"text\": \"< 200ms latency\", \"type\": \"text\"}]}]}, {\"type\": \"tableCell\", \"attrs\": {\"colspan\": 1, \"rowspan\": 1, \"colwidth\": [150], \"textColor\": null, \"background\": null, \"hideContent\": false}, \"content\": [{\"type\": \"paragraph\", \"attrs\": {\"textAlign\": null}, \"content\": [{\"text\": \"Backend\", \"type\": \"text\"}]}]}]}, {\"type\": \"tableRow\", \"attrs\": {\"textColor\": null, \"background\": null}, \"content\": [{\"type\": \"tableCell\", \"attrs\": {\"colspan\": 1, \"rowspan\": 1, \"colwidth\": [150], \"textColor\": null, \"background\": null, \"hideContent\": false}, \"content\": [{\"type\": \"paragraph\", \"attrs\": {\"textAlign\": null}, \"content\": [{\"text\": \"Design feedback\", \"type\": \"text\"}]}]}, {\"type\": \"tableCell\", \"attrs\": {\"colspan\": 1, \"rowspan\": 1, \"colwidth\": [150], \"textColor\": null, \"background\": null, \"hideContent\": false}, \"content\": [{\"type\": \"paragraph\", \"attrs\": {\"textAlign\": null}, \"content\": [{\"text\": \"≥ 8/10 average rating\", \"type\": \"text\"}]}]}, {\"type\": \"tableCell\", \"attrs\": {\"colspan\": 1, \"rowspan\": 1, \"colwidth\": [150], \"textColor\": null, \"background\": null, \"hideContent\": false}, \"content\": [{\"type\": \"paragraph\", \"attrs\": {\"textAlign\": null}, \"content\": [{\"text\": \"Design\", \"type\": \"text\"}]}]}]}]}, {\"type\": \"blockquote\", \"content\": [{\"type\": \"paragraph\", \"attrs\": {\"textAlign\": null}, \"content\": [{\"type\": \"emoji\", \"attrs\": {\"name\": \"chart_increasing\"}}, {\"text\": \" Define measurable outcomes and track progress alongside issues.\", \"type\": \"text\"}]}]}, {\"type\": \"horizontalRule\"}, {\"type\": \"heading\", \"attrs\": {\"level\": 2, \"textAlign\": null}, \"content\": [{\"type\": \"emoji\", \"attrs\": {\"name\": \"jigsaw\"}}, {\"text\": \" Scope & Deliverables\", \"type\": \"text\"}]}, {\"type\": \"table\", \"content\": [{\"type\": \"tableRow\", \"attrs\": {\"textColor\": null, \"background\": null}, \"content\": [{\"type\": \"tableHeader\", \"attrs\": {\"colspan\": 1, \"rowspan\": 1, \"colwidth\": [150], \"background\": \"none\", \"hideContent\": false}, \"content\": [{\"type\": \"paragraph\", \"attrs\": {\"textAlign\": null}, \"content\": [{\"text\": \"Deliverable\", \"type\": \"text\"}]}]}, {\"type\": \"tableHeader\", \"attrs\": {\"colspan\": 1, \"rowspan\": 1, \"colwidth\": [150], \"background\": \"none\", \"hideContent\": false}, \"content\": [{\"type\": \"paragraph\", \"attrs\": {\"textAlign\": null}, \"content\": [{\"text\": \"Owner\", \"type\": \"text\"}]}]}, {\"type\": \"tableHeader\", \"attrs\": {\"colspan\": 1, \"rowspan\": 1, \"colwidth\": [150], \"background\": \"none\", \"hideContent\": false}, \"content\": [{\"type\": \"paragraph\", \"attrs\": {\"textAlign\": null}, \"content\": [{\"text\": \"Status\", \"type\": \"text\"}]}]}]}, {\"type\": \"tableRow\", \"attrs\": {\"textColor\": null, \"background\": null}, \"content\": [{\"type\": \"tableCell\", \"attrs\": {\"colspan\": 1, \"rowspan\": 1, \"colwidth\": [150], \"textColor\": null, \"background\": null, \"hideContent\": false}, \"content\": [{\"type\": \"paragraph\", \"attrs\": {\"textAlign\": null}, \"content\": [{\"text\": \"Authentication flow\", \"type\": \"text\"}]}]}, {\"type\": \"tableCell\", \"attrs\": {\"colspan\": 1, \"rowspan\": 1, \"colwidth\": [150], \"textColor\": null, \"background\": null, \"hideContent\": false}, \"content\": [{\"type\": \"paragraph\", \"attrs\": {\"textAlign\": null}, \"content\": [{\"text\": \"Backend\", \"type\": \"text\"}]}]}, {\"type\": \"tableCell\", \"attrs\": {\"colspan\": 1, \"rowspan\": 1, \"colwidth\": [150], \"textColor\": null, \"background\": null, \"hideContent\": false}, \"content\": [{\"type\": \"paragraph\", \"attrs\": {\"textAlign\": null}, \"content\": [{\"type\": \"emoji\", \"attrs\": {\"name\": \"check_mark_button\"}}, {\"text\": \" Done\", \"type\": \"text\"}]}]}]}, {\"type\": \"tableRow\", \"attrs\": {\"textColor\": null, \"background\": null}, \"content\": [{\"type\": \"tableCell\", \"attrs\": {\"colspan\": 1, \"rowspan\": 1, \"colwidth\": [150], \"textColor\": null, \"background\": null, \"hideContent\": false}, \"content\": [{\"type\": \"paragraph\", \"attrs\": {\"textAlign\": null}, \"content\": [{\"text\": \"Issue board UI\", \"type\": \"text\"}]}]}, {\"type\": \"tableCell\", \"attrs\": {\"colspan\": 1, \"rowspan\": 1, \"colwidth\": [150], \"textColor\": null, \"background\": null, \"hideContent\": false}, \"content\": [{\"type\": \"paragraph\", \"attrs\": {\"textAlign\": null}, \"content\": [{\"text\": \"Frontend\", \"type\": \"text\"}]}]}, {\"type\": \"tableCell\", \"attrs\": {\"colspan\": 1, \"rowspan\": 1, \"colwidth\": [150], \"textColor\": null, \"background\": null, \"hideContent\": false}, \"content\": [{\"type\": \"paragraph\", \"attrs\": {\"textAlign\": null}, \"content\": [{\"type\": \"emoji\", \"attrs\": {\"name\": \"building_construction\"}}, {\"text\": \" In Progress\", \"type\": \"text\"}]}]}]}, {\"type\": \"tableRow\", \"attrs\": {\"textColor\": null, \"background\": null}, \"content\": [{\"type\": \"tableCell\", \"attrs\": {\"colspan\": 1, \"rowspan\": 1, \"colwidth\": [150], \"textColor\": null, \"background\": null, \"hideContent\": false}, \"content\": [{\"type\": \"paragraph\", \"attrs\": {\"textAlign\": null}, \"content\": [{\"text\": \"API integration\", \"type\": \"text\"}]}]}, {\"type\": \"tableCell\", \"attrs\": {\"colspan\": 1, \"rowspan\": 1, \"colwidth\": [150], \"textColor\": null, \"background\": null, \"hideContent\": false}, \"content\": [{\"type\": \"paragraph\", \"attrs\": {\"textAlign\": null}, \"content\": [{\"text\": \"Backend\", \"type\": \"text\"}]}]}, {\"type\": \"tableCell\", \"attrs\": {\"colspan\": 1, \"rowspan\": 1, \"colwidth\": [150], \"textColor\": null, \"background\": null, \"hideContent\": false}, \"content\": [{\"type\": \"paragraph\", \"attrs\": {\"textAlign\": null}, \"content\": [{\"type\": \"emoji\", \"attrs\": {\"name\": \"hourglass_flowing_sand\"}}, {\"text\": \" Pending\", \"type\": \"text\"}]}]}]}, {\"type\": \"tableRow\", \"attrs\": {\"textColor\": null, \"background\": null}, \"content\": [{\"type\": \"tableCell\", \"attrs\": {\"colspan\": 1, \"rowspan\": 1, \"colwidth\": [150], \"textColor\": null, \"background\": null, \"hideContent\": false}, \"content\": [{\"type\": \"paragraph\", \"attrs\": {\"textAlign\": null}, \"content\": [{\"text\": \"Documentation\", \"type\": \"text\"}]}]}, {\"type\": \"tableCell\", \"attrs\": {\"colspan\": 1, \"rowspan\": 1, \"colwidth\": [150], \"textColor\": null, \"background\": null, \"hideContent\": false}, \"content\": [{\"type\": \"paragraph\", \"attrs\": {\"textAlign\": null}, \"content\": [{\"text\": \"PM\", \"type\": \"text\"}]}]}, {\"type\": \"tableCell\", \"attrs\": {\"colspan\": 1, \"rowspan\": 1, \"colwidth\": [150], \"textColor\": null, \"background\": null, \"hideContent\": false}, \"content\": [{\"type\": \"paragraph\", \"attrs\": {\"textAlign\": null}, \"content\": [{\"type\": \"emoji\", \"attrs\": {\"name\": \"memo\"}}, {\"text\": \" Drafting\", \"type\": \"text\"}]}]}]}]}, {\"type\": \"blockquote\", \"content\": [{\"type\": \"paragraph\", \"attrs\": {\"textAlign\": null}, \"content\": [{\"type\": \"emoji\", \"attrs\": {\"name\": \"jigsaw\"}}, {\"text\": \" Use tables or checklists to track scope and ownership.\", \"type\": \"text\"}]}]}, {\"type\": \"horizontalRule\"}, {\"type\": \"heading\", \"attrs\": {\"level\": 2, \"textAlign\": null}, \"content\": [{\"type\": \"emoji\", \"attrs\": {\"name\": \"bricks\"}}, {\"text\": \" Architecture or System Design\", \"type\": \"text\"}]}, {\"type\": \"paragraph\", \"attrs\": {\"textAlign\": null}, \"content\": [{\"text\": \"Use this section for \", \"type\": \"text\"}, {\"text\": \"technical deep dives\", \"type\": \"text\", \"marks\": [{\"type\": \"bold\"}]}, {\"text\": \" or diagrams.\", \"type\": \"text\"}]}, {\"type\": \"codeBlock\", \"attrs\": {\"language\": \"bash\"}, \"content\": [{\"text\": \"Frontend → GraphQL → Backend → PostgreSQL\\nRedis for caching | RabbitMQ for background jobs\", \"type\": \"text\"}]}, {\"type\": \"paragraph\", \"attrs\": {\"textAlign\": null}}]}",
-        "description_stripped": "Welcome to your Project Pages — the documentation hub for this specific project.Each project in Plane can have its own Wiki space where you track plans, specs, updates, and learnings — all connected to your issues and modules.🧭 Project SummaryFieldDetailsProject Name✏ Add your project nameOwnerAdd project owner(s)Status🟢 Active / 🟡 In Progress / 🔴 BlockedStart Date—Target Release—Linked ModulesEngineering, SecurityCycle(s)Cycle 1, Cycle 2🧩 Use tables to summarize key project metadata or links.🎯 Goals & Objectives🎯 Primary GoalsDeliver MVP with all core featuresValidate feature adoption with early usersPrepare launch plan for v1 release⚙ Success MetricsMetricTargetOwnerUser adoption100 active usersGrowthPerformance< 200ms latencyBackendDesign feedback≥ 8/10 average ratingDesign📈 Define measurable outcomes and track progress alongside issues.🧩 Scope & DeliverablesDeliverableOwnerStatusAuthentication flowBackend✅ DoneIssue board UIFrontend🏗 In ProgressAPI integrationBackend⏳ PendingDocumentationPM📝 Drafting🧩 Use tables or checklists to track scope and ownership.🧱 Architecture or System DesignUse this section for technical deep dives or diagrams.Frontend → GraphQL → Backend → PostgreSQL\nRedis for caching | RabbitMQ for background jobs",
-        "type": "PROJECT",
-        "access": 0,
-        "logo_props": {
-            "emoji": {
-                "url": "https://cdn.jsdelivr.net/npm/emoji-datasource-apple/img/apple/64/1f680.png",
-                "value": "128640"
-            },
-            "in_use": "emoji"
-        }
-    },
-    {
-        "id": 2,
-        "name": "Project Draft proposal",
-        "project_id": 1,
-        "description": "{\"type\": \"doc\", \"content\": [{\"type\": \"paragraph\", \"attrs\": {\"textAlign\": null}, \"content\": [{\"text\": \"This is your \", \"type\": \"text\"}, {\"text\": \"Project Draft area\", \"type\": \"text\", \"marks\": [{\"type\": \"bold\"}]}, {\"text\": \" — a private space inside the project where you can experiment, outline ideas, or prepare content before sharing it on the public Project Page.\", \"type\": \"text\"}]}, {\"type\": \"paragraph\", \"attrs\": {\"textAlign\": null}, \"content\": [{\"text\": \"It’s visible only to you (and collaborators you explicitly share with).\", \"type\": \"text\"}]}, {\"type\": \"horizontalRule\"}, {\"type\": \"heading\", \"attrs\": {\"level\": 2, \"textAlign\": null}, \"content\": [{\"type\": \"emoji\", \"attrs\": {\"name\": \"writing_hand\"}}, {\"text\": \" Current Work in Progress\", \"type\": \"text\"}]}, {\"type\": \"paragraph\", \"attrs\": {\"textAlign\": null}}, {\"type\": \"blockquote\", \"content\": [{\"type\": \"paragraph\", \"attrs\": {\"textAlign\": null}, \"content\": [{\"type\": \"emoji\", \"attrs\": {\"name\": \"speech_balloon\"}}, {\"text\": \" Use this section to jot down raw ideas, rough notes, or specs that aren’t ready yet.\", \"type\": \"text\"}]}]}, {\"type\": \"taskList\", \"content\": [{\"type\": \"taskItem\", \"attrs\": {\"checked\": false}, \"content\": [{\"type\": \"paragraph\", \"attrs\": {\"textAlign\": null}, \"content\": [{\"text\": \" Outline project summary and goals\", \"type\": \"text\"}]}]}, {\"type\": \"taskItem\", \"attrs\": {\"checked\": false}, \"content\": [{\"type\": \"paragraph\", \"attrs\": {\"textAlign\": null}, \"content\": [{\"text\": \" Draft new feature spec\", \"type\": \"text\"}]}]}, {\"type\": \"taskItem\", \"attrs\": {\"checked\": false}, \"content\": [{\"type\": \"paragraph\", \"attrs\": {\"textAlign\": null}, \"content\": [{\"text\": \" Review dependency list\", \"type\": \"text\"}]}]}, {\"type\": \"taskItem\", \"attrs\": {\"checked\": false}, \"content\": [{\"type\": \"paragraph\", \"attrs\": {\"textAlign\": null}, \"content\": [{\"text\": \" Collect team feedback for next iteration\", \"type\": \"text\"}]}]}]}, {\"type\": \"blockquote\", \"content\": [{\"type\": \"paragraph\", \"attrs\": {\"textAlign\": null}, \"content\": [{\"type\": \"emoji\", \"attrs\": {\"name\": \"check_mark_button\"}}, {\"text\": \" Tip: Turn these items into actionable issues when finalized.\", \"type\": \"text\"}]}]}, {\"type\": \"horizontalRule\"}, {\"type\": \"heading\", \"attrs\": {\"level\": 2, \"textAlign\": null}, \"content\": [{\"type\": \"emoji\", \"attrs\": {\"name\": \"bricks\"}}, {\"text\": \" Prototype Commands (if technical)\", \"type\": \"text\"}]}, {\"type\": \"paragraph\", \"attrs\": {\"textAlign\": null}, \"content\": [{\"text\": \"You can also use \", \"type\": \"text\"}, {\"text\": \"code blocks\", \"type\": \"text\", \"marks\": [{\"type\": \"bold\"}]}, {\"text\": \" to store snippets, scripts, or notes:\", \"type\": \"text\"}]}, {\"type\": \"codeBlock\", \"attrs\": {\"language\": \"bash\"}, \"content\": [{\"text\": \"# Rebuild Docker containers\\ndocker compose build backend frontend\", \"type\": \"text\"}]}, {\"type\": \"paragraph\", \"attrs\": {\"textAlign\": null}}]}",
-        "description_html": "<p xmlns=\"http://www.w3.org/1999/xhtml\" class=\"editor-paragraph-block\">This is your <strong>Project Draft area</strong> — a private space inside the project where you can experiment, outline ideas, or prepare content before sharing it on the public Project Page.</p><p xmlns=\"http://www.w3.org/1999/xhtml\" class=\"editor-paragraph-block\">It’s visible only to you (and collaborators you explicitly share with).</p><div xmlns=\"http://www.w3.org/1999/xhtml\" class=\"py-4 border-custom-border-400\" data-type=\"horizontalRule\"><div></div></div><h2 xmlns=\"http://www.w3.org/1999/xhtml\" class=\"editor-heading-block\"><span data-name=\"writing_hand\" data-type=\"emoji\">✍</span> Current Work in Progress</h2><p xmlns=\"http://www.w3.org/1999/xhtml\" class=\"editor-paragraph-block\"></p><blockquote xmlns=\"http://www.w3.org/1999/xhtml\"><p class=\"editor-paragraph-block\"><span data-name=\"speech_balloon\" data-type=\"emoji\">💬</span> Use this section to jot down raw ideas, rough notes, or specs that aren’t ready yet.</p></blockquote><ul xmlns=\"http://www.w3.org/1999/xhtml\" class=\"not-prose pl-2 space-y-2\" data-type=\"taskList\"><li class=\"flex\" data-checked=\"false\" data-type=\"taskItem\"><label><input type=\"checkbox\" /><span></span></label><div><p class=\"editor-paragraph-block\"> Outline project summary and goals</p></div></li><li class=\"flex\" data-checked=\"false\" data-type=\"taskItem\"><label><input type=\"checkbox\" /><span></span></label><div><p class=\"editor-paragraph-block\"> Draft new feature spec</p></div></li><li class=\"flex\" data-checked=\"false\" data-type=\"taskItem\"><label><input type=\"checkbox\" /><span></span></label><div><p class=\"editor-paragraph-block\"> Review dependency list</p></div></li><li class=\"flex\" data-checked=\"false\" data-type=\"taskItem\"><label><input type=\"checkbox\" /><span></span></label><div><p class=\"editor-paragraph-block\"> Collect team feedback for next iteration</p></div></li></ul><blockquote xmlns=\"http://www.w3.org/1999/xhtml\"><p class=\"editor-paragraph-block\"><span data-name=\"check_mark_button\" data-type=\"emoji\">✅</span> Tip: Turn these items into actionable issues when finalized.</p></blockquote><div xmlns=\"http://www.w3.org/1999/xhtml\" class=\"py-4 border-custom-border-400\" data-type=\"horizontalRule\"><div></div></div><h2 xmlns=\"http://www.w3.org/1999/xhtml\" class=\"editor-heading-block\"><span data-name=\"bricks\" data-type=\"emoji\">🧱</span> Prototype Commands (if technical)</h2><p xmlns=\"http://www.w3.org/1999/xhtml\" class=\"editor-paragraph-block\">You can also use <strong>code blocks</strong> to store snippets, scripts, or notes:</p><pre xmlns=\"http://www.w3.org/1999/xhtml\"><code class=\"language-bash\"># Rebuild Docker containers\ndocker compose build backend frontend</code></pre><p xmlns=\"http://www.w3.org/1999/xhtml\" class=\"editor-paragraph-block\"></p>",
-        "description_stripped": "This is your Project Draft area — a private space inside the project where you can experiment, outline ideas, or prepare content before sharing it on the public Project Page.It’s visible only to you (and collaborators you explicitly share with).✍ Current Work in Progress💬 Use this section to jot down raw ideas, rough notes, or specs that aren’t ready yet. Outline project summary and goals Draft new feature spec Review dependency list Collect team feedback for next iteration✅ Tip: Turn these items into actionable issues when finalized.🧱 Prototype Commands (if technical)You can also use code blocks to store snippets, scripts, or notes:# Rebuild Docker containers\ndocker compose build backend frontend",
-        "type": "PROJECT",
-        "access": 1,
-        "logo_props": "{\"emoji\": {\"url\": \"https://cdn.jsdelivr.net/npm/emoji-datasource-apple/img/apple/64/1f9f1.png\", \"value\": \"129521\"}, \"in_use\": \"emoji\"}"
+  {
+    "id": 1,
+    "name": "Project Design Spec",
+    "project_id": 1,
+    "description_html": "<p xmlns=\"http://www.w3.org/1999/xhtml\" class=\"editor-paragraph-block\">Welcome to your <strong>Project Pages</strong> — the documentation hub for this specific project.<br />Each project in Plane can have its own Wiki space where you track <strong>plans, specs, updates, and learnings</strong> — all connected to your issues and modules.</p><div xmlns=\"http://www.w3.org/1999/xhtml\" class=\"py-4 border-strong-1\" data-type=\"horizontalRule\"><div></div></div><h2 xmlns=\"http://www.w3.org/1999/xhtml\" class=\"editor-heading-block\"><span data-name=\"compass\" data-type=\"emoji\">🧭</span> Project Summary</h2><table xmlns=\"http://www.w3.org/1999/xhtml\"><tbody><tr style=\"\"><th colspan=\"1\" rowspan=\"1\" colwidth=\"150\" background=\"none\" hidecontent=\"false\" class=\"\" style=\"background-color: none;\"><p class=\"editor-paragraph-block\">Field</p></th><th colspan=\"1\" rowspan=\"1\" colwidth=\"666\" background=\"none\" hidecontent=\"false\" class=\"\" style=\"background-color: none;\"><p class=\"editor-paragraph-block\">Details</p></th></tr><tr style=\"\"><td colspan=\"1\" rowspan=\"1\" colwidth=\"150\" hidecontent=\"false\" class=\"\" style=\"\"><p class=\"editor-paragraph-block\"><strong>Project Name</strong></p></td><td colspan=\"1\" rowspan=\"1\" colwidth=\"666\" hidecontent=\"false\" class=\"\" style=\"\"><p class=\"editor-paragraph-block\"><span data-name=\"pencil\" data-type=\"emoji\">✏</span> Add your project name</p></td></tr><tr style=\"\"><td colspan=\"1\" rowspan=\"1\" colwidth=\"150\" hidecontent=\"false\" class=\"\" style=\"\"><p class=\"editor-paragraph-block\"><strong>Owner</strong></p></td><td colspan=\"1\" rowspan=\"1\" colwidth=\"666\" hidecontent=\"false\" class=\"\" style=\"\"><p class=\"editor-paragraph-block\">Add project owner(s)</p></td></tr><tr style=\"\"><td colspan=\"1\" rowspan=\"1\" colwidth=\"150\" hidecontent=\"false\" class=\"\" style=\"\"><p class=\"editor-paragraph-block\"><strong>Status</strong></p></td><td colspan=\"1\" rowspan=\"1\" colwidth=\"666\" hidecontent=\"false\" class=\"\" style=\"\"><p class=\"editor-paragraph-block\"><span data-name=\"green_circle\" data-type=\"emoji\">🟢</span> Active / <span data-name=\"yellow_circle\" data-type=\"emoji\">🟡</span> In Progress / <span data-name=\"red_circle\" data-type=\"emoji\">🔴</span> Blocked</p></td></tr><tr style=\"\"><td colspan=\"1\" rowspan=\"1\" colwidth=\"150\" hidecontent=\"false\" class=\"\" style=\"\"><p class=\"editor-paragraph-block\"><strong>Start Date</strong></p></td><td colspan=\"1\" rowspan=\"1\" colwidth=\"666\" hidecontent=\"false\" class=\"\" style=\"\"><p class=\"editor-paragraph-block\">—</p></td></tr><tr style=\"\"><td colspan=\"1\" rowspan=\"1\" colwidth=\"150\" hidecontent=\"false\" class=\"\" style=\"\"><p class=\"editor-paragraph-block\"><strong>Target Release</strong></p></td><td colspan=\"1\" rowspan=\"1\" colwidth=\"666\" hidecontent=\"false\" class=\"\" style=\"\"><p class=\"editor-paragraph-block\">—</p></td></tr><tr style=\"\"><td colspan=\"1\" rowspan=\"1\" colwidth=\"150\" hidecontent=\"false\" class=\"\" style=\"\"><p class=\"editor-paragraph-block\"><strong>Linked Modules</strong></p></td><td colspan=\"1\" rowspan=\"1\" colwidth=\"666\" hidecontent=\"false\" class=\"\" style=\"\"><p class=\"editor-paragraph-block\">Engineering, Security</p></td></tr><tr style=\"\"><td colspan=\"1\" rowspan=\"1\" colwidth=\"150\" hidecontent=\"false\" class=\"\" style=\"\"><p class=\"editor-paragraph-block\"><strong>Cycle(s)</strong></p></td><td colspan=\"1\" rowspan=\"1\" colwidth=\"666\" hidecontent=\"false\" class=\"\" style=\"\"><p class=\"editor-paragraph-block\">Cycle 1, Cycle 2</p></td></tr></tbody></table><blockquote xmlns=\"http://www.w3.org/1999/xhtml\"><p class=\"editor-paragraph-block\"><span data-name=\"jigsaw\" data-type=\"emoji\">🧩</span> Use tables to summarize key project metadata or links.</p></blockquote><div xmlns=\"http://www.w3.org/1999/xhtml\" class=\"py-4 border-strong-1\" data-type=\"horizontalRule\"><div></div></div><h2 xmlns=\"http://www.w3.org/1999/xhtml\" class=\"editor-heading-block\"><span data-name=\"bullseye\" data-type=\"emoji\">🎯</span> Goals &amp; Objectives</h2><h3 xmlns=\"http://www.w3.org/1999/xhtml\" class=\"editor-heading-block\"><span data-name=\"bullseye\" data-type=\"emoji\">🎯</span> Primary Goals</h3><ul xmlns=\"http://www.w3.org/1999/xhtml\" class=\"list-disc pl-7 space-y-(--list-spacing-y)\"><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Deliver MVP with all core features</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Validate feature adoption with early users</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Prepare launch plan for v1 release</p></li></ul><h3 xmlns=\"http://www.w3.org/1999/xhtml\" class=\"editor-heading-block\"><span data-name=\"gear\" data-type=\"emoji\">⚙</span> Success Metrics</h3><table xmlns=\"http://www.w3.org/1999/xhtml\"><tbody><tr style=\"\"><th colspan=\"1\" rowspan=\"1\" colwidth=\"150\" background=\"none\" hidecontent=\"false\" class=\"\" style=\"background-color: none;\"><p class=\"editor-paragraph-block\">Metric</p></th><th colspan=\"1\" rowspan=\"1\" colwidth=\"150\" background=\"none\" hidecontent=\"false\" class=\"\" style=\"background-color: none;\"><p class=\"editor-paragraph-block\">Target</p></th><th colspan=\"1\" rowspan=\"1\" colwidth=\"150\" background=\"none\" hidecontent=\"false\" class=\"\" style=\"background-color: none;\"><p class=\"editor-paragraph-block\">Owner</p></th></tr><tr style=\"\"><td colspan=\"1\" rowspan=\"1\" colwidth=\"150\" hidecontent=\"false\" class=\"\" style=\"\"><p class=\"editor-paragraph-block\">User adoption</p></td><td colspan=\"1\" rowspan=\"1\" colwidth=\"150\" hidecontent=\"false\" class=\"\" style=\"\"><p class=\"editor-paragraph-block\">100 active users</p></td><td colspan=\"1\" rowspan=\"1\" colwidth=\"150\" hidecontent=\"false\" class=\"\" style=\"\"><p class=\"editor-paragraph-block\">Growth</p></td></tr><tr style=\"\"><td colspan=\"1\" rowspan=\"1\" colwidth=\"150\" hidecontent=\"false\" class=\"\" style=\"\"><p class=\"editor-paragraph-block\">Performance</p></td><td colspan=\"1\" rowspan=\"1\" colwidth=\"150\" hidecontent=\"false\" class=\"\" style=\"\"><p class=\"editor-paragraph-block\">&lt; 200ms latency</p></td><td colspan=\"1\" rowspan=\"1\" colwidth=\"150\" hidecontent=\"false\" class=\"\" style=\"\"><p class=\"editor-paragraph-block\">Backend</p></td></tr><tr style=\"\"><td colspan=\"1\" rowspan=\"1\" colwidth=\"150\" hidecontent=\"false\" class=\"\" style=\"\"><p class=\"editor-paragraph-block\">Design feedback</p></td><td colspan=\"1\" rowspan=\"1\" colwidth=\"150\" hidecontent=\"false\" class=\"\" style=\"\"><p class=\"editor-paragraph-block\">≥ 8/10 average rating</p></td><td colspan=\"1\" rowspan=\"1\" colwidth=\"150\" hidecontent=\"false\" class=\"\" style=\"\"><p class=\"editor-paragraph-block\">Design</p></td></tr></tbody></table><blockquote xmlns=\"http://www.w3.org/1999/xhtml\"><p class=\"editor-paragraph-block\"><span data-name=\"chart_increasing\" data-type=\"emoji\">📈</span> Define measurable outcomes and track progress alongside issues.</p></blockquote><div xmlns=\"http://www.w3.org/1999/xhtml\" class=\"py-4 border-strong-1\" data-type=\"horizontalRule\"><div></div></div><h2 xmlns=\"http://www.w3.org/1999/xhtml\" class=\"editor-heading-block\"><span data-name=\"jigsaw\" data-type=\"emoji\">🧩</span> Scope &amp; Deliverables</h2><table xmlns=\"http://www.w3.org/1999/xhtml\"><tbody><tr style=\"\"><th colspan=\"1\" rowspan=\"1\" colwidth=\"150\" background=\"none\" hidecontent=\"false\" class=\"\" style=\"background-color: none;\"><p class=\"editor-paragraph-block\">Deliverable</p></th><th colspan=\"1\" rowspan=\"1\" colwidth=\"150\" background=\"none\" hidecontent=\"false\" class=\"\" style=\"background-color: none;\"><p class=\"editor-paragraph-block\">Owner</p></th><th colspan=\"1\" rowspan=\"1\" colwidth=\"150\" background=\"none\" hidecontent=\"false\" class=\"\" style=\"background-color: none;\"><p class=\"editor-paragraph-block\">Status</p></th></tr><tr style=\"\"><td colspan=\"1\" rowspan=\"1\" colwidth=\"150\" hidecontent=\"false\" class=\"\" style=\"\"><p class=\"editor-paragraph-block\">Authentication flow</p></td><td colspan=\"1\" rowspan=\"1\" colwidth=\"150\" hidecontent=\"false\" class=\"\" style=\"\"><p class=\"editor-paragraph-block\">Backend</p></td><td colspan=\"1\" rowspan=\"1\" colwidth=\"150\" hidecontent=\"false\" class=\"\" style=\"\"><p class=\"editor-paragraph-block\"><span data-name=\"check_mark_button\" data-type=\"emoji\">✅</span> Done</p></td></tr><tr style=\"\"><td colspan=\"1\" rowspan=\"1\" colwidth=\"150\" hidecontent=\"false\" class=\"\" style=\"\"><p class=\"editor-paragraph-block\">Issue board UI</p></td><td colspan=\"1\" rowspan=\"1\" colwidth=\"150\" hidecontent=\"false\" class=\"\" style=\"\"><p class=\"editor-paragraph-block\">Frontend</p></td><td colspan=\"1\" rowspan=\"1\" colwidth=\"150\" hidecontent=\"false\" class=\"\" style=\"\"><p class=\"editor-paragraph-block\"><span data-name=\"building_construction\" data-type=\"emoji\">🏗</span> In Progress</p></td></tr><tr style=\"\"><td colspan=\"1\" rowspan=\"1\" colwidth=\"150\" hidecontent=\"false\" class=\"\" style=\"\"><p class=\"editor-paragraph-block\">API integration</p></td><td colspan=\"1\" rowspan=\"1\" colwidth=\"150\" hidecontent=\"false\" class=\"\" style=\"\"><p class=\"editor-paragraph-block\">Backend</p></td><td colspan=\"1\" rowspan=\"1\" colwidth=\"150\" hidecontent=\"false\" class=\"\" style=\"\"><p class=\"editor-paragraph-block\"><span data-name=\"hourglass_flowing_sand\" data-type=\"emoji\">⏳</span> Pending</p></td></tr><tr style=\"\"><td colspan=\"1\" rowspan=\"1\" colwidth=\"150\" hidecontent=\"false\" class=\"\" style=\"\"><p class=\"editor-paragraph-block\">Documentation</p></td><td colspan=\"1\" rowspan=\"1\" colwidth=\"150\" hidecontent=\"false\" class=\"\" style=\"\"><p class=\"editor-paragraph-block\">PM</p></td><td colspan=\"1\" rowspan=\"1\" colwidth=\"150\" hidecontent=\"false\" class=\"\" style=\"\"><p class=\"editor-paragraph-block\"><span data-name=\"memo\" data-type=\"emoji\">📝</span> Drafting</p></td></tr></tbody></table><blockquote xmlns=\"http://www.w3.org/1999/xhtml\"><p class=\"editor-paragraph-block\"><span data-name=\"jigsaw\" data-type=\"emoji\">🧩</span> Use tables or checklists to track scope and ownership.</p></blockquote><div xmlns=\"http://www.w3.org/1999/xhtml\" class=\"py-4 border-strong-1\" data-type=\"horizontalRule\"><div></div></div><h2 xmlns=\"http://www.w3.org/1999/xhtml\" class=\"editor-heading-block\"><span data-name=\"bricks\" data-type=\"emoji\">🧱</span> Architecture or System Design</h2><p xmlns=\"http://www.w3.org/1999/xhtml\" class=\"editor-paragraph-block\">Use this section for <strong>technical deep dives</strong> or diagrams.</p><pre xmlns=\"http://www.w3.org/1999/xhtml\"><code class=\"language-bash\">Frontend → GraphQL → Backend → PostgreSQL\nRedis for caching | RabbitMQ for background jobs</code></pre><p xmlns=\"http://www.w3.org/1999/xhtml\" class=\"editor-paragraph-block\"></p>",
+    "description": "{\"type\": \"doc\", \"content\": [{\"type\": \"paragraph\", \"attrs\": {\"textAlign\": null}, \"content\": [{\"text\": \"Welcome to your \", \"type\": \"text\"}, {\"text\": \"Project Pages\", \"type\": \"text\", \"marks\": [{\"type\": \"bold\"}]}, {\"text\": \" — the documentation hub for this specific project.\", \"type\": \"text\"}, {\"type\": \"hardBreak\"}, {\"text\": \"Each project in Plane can have its own Wiki space where you track \", \"type\": \"text\"}, {\"text\": \"plans, specs, updates, and learnings\", \"type\": \"text\", \"marks\": [{\"type\": \"bold\"}]}, {\"text\": \" — all connected to your issues and modules.\", \"type\": \"text\"}]}, {\"type\": \"horizontalRule\"}, {\"type\": \"heading\", \"attrs\": {\"level\": 2, \"textAlign\": null}, \"content\": [{\"type\": \"emoji\", \"attrs\": {\"name\": \"compass\"}}, {\"text\": \" Project Summary\", \"type\": \"text\"}]}, {\"type\": \"table\", \"content\": [{\"type\": \"tableRow\", \"attrs\": {\"textColor\": null, \"background\": null}, \"content\": [{\"type\": \"tableHeader\", \"attrs\": {\"colspan\": 1, \"rowspan\": 1, \"colwidth\": [150], \"background\": \"none\", \"hideContent\": false}, \"content\": [{\"type\": \"paragraph\", \"attrs\": {\"textAlign\": null}, \"content\": [{\"text\": \"Field\", \"type\": \"text\"}]}]}, {\"type\": \"tableHeader\", \"attrs\": {\"colspan\": 1, \"rowspan\": 1, \"colwidth\": [666], \"background\": \"none\", \"hideContent\": false}, \"content\": [{\"type\": \"paragraph\", \"attrs\": {\"textAlign\": null}, \"content\": [{\"text\": \"Details\", \"type\": \"text\"}]}]}]}, {\"type\": \"tableRow\", \"attrs\": {\"textColor\": null, \"background\": null}, \"content\": [{\"type\": \"tableCell\", \"attrs\": {\"colspan\": 1, \"rowspan\": 1, \"colwidth\": [150], \"textColor\": null, \"background\": null, \"hideContent\": false}, \"content\": [{\"type\": \"paragraph\", \"attrs\": {\"textAlign\": null}, \"content\": [{\"text\": \"Project Name\", \"type\": \"text\", \"marks\": [{\"type\": \"bold\"}]}]}]}, {\"type\": \"tableCell\", \"attrs\": {\"colspan\": 1, \"rowspan\": 1, \"colwidth\": [666], \"textColor\": null, \"background\": null, \"hideContent\": false}, \"content\": [{\"type\": \"paragraph\", \"attrs\": {\"textAlign\": null}, \"content\": [{\"type\": \"emoji\", \"attrs\": {\"name\": \"pencil\"}}, {\"text\": \" Add your project name\", \"type\": \"text\"}]}]}]}, {\"type\": \"tableRow\", \"attrs\": {\"textColor\": null, \"background\": null}, \"content\": [{\"type\": \"tableCell\", \"attrs\": {\"colspan\": 1, \"rowspan\": 1, \"colwidth\": [150], \"textColor\": null, \"background\": null, \"hideContent\": false}, \"content\": [{\"type\": \"paragraph\", \"attrs\": {\"textAlign\": null}, \"content\": [{\"text\": \"Owner\", \"type\": \"text\", \"marks\": [{\"type\": \"bold\"}]}]}]}, {\"type\": \"tableCell\", \"attrs\": {\"colspan\": 1, \"rowspan\": 1, \"colwidth\": [666], \"textColor\": null, \"background\": null, \"hideContent\": false}, \"content\": [{\"type\": \"paragraph\", \"attrs\": {\"textAlign\": null}, \"content\": [{\"text\": \"Add project owner(s)\", \"type\": \"text\"}]}]}]}, {\"type\": \"tableRow\", \"attrs\": {\"textColor\": null, \"background\": null}, \"content\": [{\"type\": \"tableCell\", \"attrs\": {\"colspan\": 1, \"rowspan\": 1, \"colwidth\": [150], \"textColor\": null, \"background\": null, \"hideContent\": false}, \"content\": [{\"type\": \"paragraph\", \"attrs\": {\"textAlign\": null}, \"content\": [{\"text\": \"Status\", \"type\": \"text\", \"marks\": [{\"type\": \"bold\"}]}]}]}, {\"type\": \"tableCell\", \"attrs\": {\"colspan\": 1, \"rowspan\": 1, \"colwidth\": [666], \"textColor\": null, \"background\": null, \"hideContent\": false}, \"content\": [{\"type\": \"paragraph\", \"attrs\": {\"textAlign\": null}, \"content\": [{\"type\": \"emoji\", \"attrs\": {\"name\": \"green_circle\"}}, {\"text\": \" Active / \", \"type\": \"text\"}, {\"type\": \"emoji\", \"attrs\": {\"name\": \"yellow_circle\"}}, {\"text\": \" In Progress / \", \"type\": \"text\"}, {\"type\": \"emoji\", \"attrs\": {\"name\": \"red_circle\"}}, {\"text\": \" Blocked\", \"type\": \"text\"}]}]}]}, {\"type\": \"tableRow\", \"attrs\": {\"textColor\": null, \"background\": null}, \"content\": [{\"type\": \"tableCell\", \"attrs\": {\"colspan\": 1, \"rowspan\": 1, \"colwidth\": [150], \"textColor\": null, \"background\": null, \"hideContent\": false}, \"content\": [{\"type\": \"paragraph\", \"attrs\": {\"textAlign\": null}, \"content\": [{\"text\": \"Start Date\", \"type\": \"text\", \"marks\": [{\"type\": \"bold\"}]}]}]}, {\"type\": \"tableCell\", \"attrs\": {\"colspan\": 1, \"rowspan\": 1, \"colwidth\": [666], \"textColor\": null, \"background\": null, \"hideContent\": false}, \"content\": [{\"type\": \"paragraph\", \"attrs\": {\"textAlign\": null}, \"content\": [{\"text\": \"—\", \"type\": \"text\"}]}]}]}, {\"type\": \"tableRow\", \"attrs\": {\"textColor\": null, \"background\": null}, \"content\": [{\"type\": \"tableCell\", \"attrs\": {\"colspan\": 1, \"rowspan\": 1, \"colwidth\": [150], \"textColor\": null, \"background\": null, \"hideContent\": false}, \"content\": [{\"type\": \"paragraph\", \"attrs\": {\"textAlign\": null}, \"content\": [{\"text\": \"Target Release\", \"type\": \"text\", \"marks\": [{\"type\": \"bold\"}]}]}]}, {\"type\": \"tableCell\", \"attrs\": {\"colspan\": 1, \"rowspan\": 1, \"colwidth\": [666], \"textColor\": null, \"background\": null, \"hideContent\": false}, \"content\": [{\"type\": \"paragraph\", \"attrs\": {\"textAlign\": null}, \"content\": [{\"text\": \"—\", \"type\": \"text\"}]}]}]}, {\"type\": \"tableRow\", \"attrs\": {\"textColor\": null, \"background\": null}, \"content\": [{\"type\": \"tableCell\", \"attrs\": {\"colspan\": 1, \"rowspan\": 1, \"colwidth\": [150], \"textColor\": null, \"background\": null, \"hideContent\": false}, \"content\": [{\"type\": \"paragraph\", \"attrs\": {\"textAlign\": null}, \"content\": [{\"text\": \"Linked Modules\", \"type\": \"text\", \"marks\": [{\"type\": \"bold\"}]}]}]}, {\"type\": \"tableCell\", \"attrs\": {\"colspan\": 1, \"rowspan\": 1, \"colwidth\": [666], \"textColor\": null, \"background\": null, \"hideContent\": false}, \"content\": [{\"type\": \"paragraph\", \"attrs\": {\"textAlign\": null}, \"content\": [{\"text\": \"Engineering, Security\", \"type\": \"text\"}]}]}]}, {\"type\": \"tableRow\", \"attrs\": {\"textColor\": null, \"background\": null}, \"content\": [{\"type\": \"tableCell\", \"attrs\": {\"colspan\": 1, \"rowspan\": 1, \"colwidth\": [150], \"textColor\": null, \"background\": null, \"hideContent\": false}, \"content\": [{\"type\": \"paragraph\", \"attrs\": {\"textAlign\": null}, \"content\": [{\"text\": \"Cycle(s)\", \"type\": \"text\", \"marks\": [{\"type\": \"bold\"}]}]}]}, {\"type\": \"tableCell\", \"attrs\": {\"colspan\": 1, \"rowspan\": 1, \"colwidth\": [666], \"textColor\": null, \"background\": null, \"hideContent\": false}, \"content\": [{\"type\": \"paragraph\", \"attrs\": {\"textAlign\": null}, \"content\": [{\"text\": \"Cycle 1, Cycle 2\", \"type\": \"text\"}]}]}]}]}, {\"type\": \"blockquote\", \"content\": [{\"type\": \"paragraph\", \"attrs\": {\"textAlign\": null}, \"content\": [{\"type\": \"emoji\", \"attrs\": {\"name\": \"jigsaw\"}}, {\"text\": \" Use tables to summarize key project metadata or links.\", \"type\": \"text\"}]}]}, {\"type\": \"horizontalRule\"}, {\"type\": \"heading\", \"attrs\": {\"level\": 2, \"textAlign\": null}, \"content\": [{\"type\": \"emoji\", \"attrs\": {\"name\": \"bullseye\"}}, {\"text\": \" Goals & Objectives\", \"type\": \"text\"}]}, {\"type\": \"heading\", \"attrs\": {\"level\": 3, \"textAlign\": null}, \"content\": [{\"type\": \"emoji\", \"attrs\": {\"name\": \"bullseye\"}}, {\"text\": \" Primary Goals\", \"type\": \"text\"}]}, {\"type\": \"bulletList\", \"content\": [{\"type\": \"listItem\", \"content\": [{\"type\": \"paragraph\", \"attrs\": {\"textAlign\": null}, \"content\": [{\"text\": \"Deliver MVP with all core features\", \"type\": \"text\"}]}]}, {\"type\": \"listItem\", \"content\": [{\"type\": \"paragraph\", \"attrs\": {\"textAlign\": null}, \"content\": [{\"text\": \"Validate feature adoption with early users\", \"type\": \"text\"}]}]}, {\"type\": \"listItem\", \"content\": [{\"type\": \"paragraph\", \"attrs\": {\"textAlign\": null}, \"content\": [{\"text\": \"Prepare launch plan for v1 release\", \"type\": \"text\"}]}]}]}, {\"type\": \"heading\", \"attrs\": {\"level\": 3, \"textAlign\": null}, \"content\": [{\"type\": \"emoji\", \"attrs\": {\"name\": \"gear\"}}, {\"text\": \" Success Metrics\", \"type\": \"text\"}]}, {\"type\": \"table\", \"content\": [{\"type\": \"tableRow\", \"attrs\": {\"textColor\": null, \"background\": null}, \"content\": [{\"type\": \"tableHeader\", \"attrs\": {\"colspan\": 1, \"rowspan\": 1, \"colwidth\": [150], \"background\": \"none\", \"hideContent\": false}, \"content\": [{\"type\": \"paragraph\", \"attrs\": {\"textAlign\": null}, \"content\": [{\"text\": \"Metric\", \"type\": \"text\"}]}]}, {\"type\": \"tableHeader\", \"attrs\": {\"colspan\": 1, \"rowspan\": 1, \"colwidth\": [150], \"background\": \"none\", \"hideContent\": false}, \"content\": [{\"type\": \"paragraph\", \"attrs\": {\"textAlign\": null}, \"content\": [{\"text\": \"Target\", \"type\": \"text\"}]}]}, {\"type\": \"tableHeader\", \"attrs\": {\"colspan\": 1, \"rowspan\": 1, \"colwidth\": [150], \"background\": \"none\", \"hideContent\": false}, \"content\": [{\"type\": \"paragraph\", \"attrs\": {\"textAlign\": null}, \"content\": [{\"text\": \"Owner\", \"type\": \"text\"}]}]}]}, {\"type\": \"tableRow\", \"attrs\": {\"textColor\": null, \"background\": null}, \"content\": [{\"type\": \"tableCell\", \"attrs\": {\"colspan\": 1, \"rowspan\": 1, \"colwidth\": [150], \"textColor\": null, \"background\": null, \"hideContent\": false}, \"content\": [{\"type\": \"paragraph\", \"attrs\": {\"textAlign\": null}, \"content\": [{\"text\": \"User adoption\", \"type\": \"text\"}]}]}, {\"type\": \"tableCell\", \"attrs\": {\"colspan\": 1, \"rowspan\": 1, \"colwidth\": [150], \"textColor\": null, \"background\": null, \"hideContent\": false}, \"content\": [{\"type\": \"paragraph\", \"attrs\": {\"textAlign\": null}, \"content\": [{\"text\": \"100 active users\", \"type\": \"text\"}]}]}, {\"type\": \"tableCell\", \"attrs\": {\"colspan\": 1, \"rowspan\": 1, \"colwidth\": [150], \"textColor\": null, \"background\": null, \"hideContent\": false}, \"content\": [{\"type\": \"paragraph\", \"attrs\": {\"textAlign\": null}, \"content\": [{\"text\": \"Growth\", \"type\": \"text\"}]}]}]}, {\"type\": \"tableRow\", \"attrs\": {\"textColor\": null, \"background\": null}, \"content\": [{\"type\": \"tableCell\", \"attrs\": {\"colspan\": 1, \"rowspan\": 1, \"colwidth\": [150], \"textColor\": null, \"background\": null, \"hideContent\": false}, \"content\": [{\"type\": \"paragraph\", \"attrs\": {\"textAlign\": null}, \"content\": [{\"text\": \"Performance\", \"type\": \"text\"}]}]}, {\"type\": \"tableCell\", \"attrs\": {\"colspan\": 1, \"rowspan\": 1, \"colwidth\": [150], \"textColor\": null, \"background\": null, \"hideContent\": false}, \"content\": [{\"type\": \"paragraph\", \"attrs\": {\"textAlign\": null}, \"content\": [{\"text\": \"< 200ms latency\", \"type\": \"text\"}]}]}, {\"type\": \"tableCell\", \"attrs\": {\"colspan\": 1, \"rowspan\": 1, \"colwidth\": [150], \"textColor\": null, \"background\": null, \"hideContent\": false}, \"content\": [{\"type\": \"paragraph\", \"attrs\": {\"textAlign\": null}, \"content\": [{\"text\": \"Backend\", \"type\": \"text\"}]}]}]}, {\"type\": \"tableRow\", \"attrs\": {\"textColor\": null, \"background\": null}, \"content\": [{\"type\": \"tableCell\", \"attrs\": {\"colspan\": 1, \"rowspan\": 1, \"colwidth\": [150], \"textColor\": null, \"background\": null, \"hideContent\": false}, \"content\": [{\"type\": \"paragraph\", \"attrs\": {\"textAlign\": null}, \"content\": [{\"text\": \"Design feedback\", \"type\": \"text\"}]}]}, {\"type\": \"tableCell\", \"attrs\": {\"colspan\": 1, \"rowspan\": 1, \"colwidth\": [150], \"textColor\": null, \"background\": null, \"hideContent\": false}, \"content\": [{\"type\": \"paragraph\", \"attrs\": {\"textAlign\": null}, \"content\": [{\"text\": \"≥ 8/10 average rating\", \"type\": \"text\"}]}]}, {\"type\": \"tableCell\", \"attrs\": {\"colspan\": 1, \"rowspan\": 1, \"colwidth\": [150], \"textColor\": null, \"background\": null, \"hideContent\": false}, \"content\": [{\"type\": \"paragraph\", \"attrs\": {\"textAlign\": null}, \"content\": [{\"text\": \"Design\", \"type\": \"text\"}]}]}]}]}, {\"type\": \"blockquote\", \"content\": [{\"type\": \"paragraph\", \"attrs\": {\"textAlign\": null}, \"content\": [{\"type\": \"emoji\", \"attrs\": {\"name\": \"chart_increasing\"}}, {\"text\": \" Define measurable outcomes and track progress alongside issues.\", \"type\": \"text\"}]}]}, {\"type\": \"horizontalRule\"}, {\"type\": \"heading\", \"attrs\": {\"level\": 2, \"textAlign\": null}, \"content\": [{\"type\": \"emoji\", \"attrs\": {\"name\": \"jigsaw\"}}, {\"text\": \" Scope & Deliverables\", \"type\": \"text\"}]}, {\"type\": \"table\", \"content\": [{\"type\": \"tableRow\", \"attrs\": {\"textColor\": null, \"background\": null}, \"content\": [{\"type\": \"tableHeader\", \"attrs\": {\"colspan\": 1, \"rowspan\": 1, \"colwidth\": [150], \"background\": \"none\", \"hideContent\": false}, \"content\": [{\"type\": \"paragraph\", \"attrs\": {\"textAlign\": null}, \"content\": [{\"text\": \"Deliverable\", \"type\": \"text\"}]}]}, {\"type\": \"tableHeader\", \"attrs\": {\"colspan\": 1, \"rowspan\": 1, \"colwidth\": [150], \"background\": \"none\", \"hideContent\": false}, \"content\": [{\"type\": \"paragraph\", \"attrs\": {\"textAlign\": null}, \"content\": [{\"text\": \"Owner\", \"type\": \"text\"}]}]}, {\"type\": \"tableHeader\", \"attrs\": {\"colspan\": 1, \"rowspan\": 1, \"colwidth\": [150], \"background\": \"none\", \"hideContent\": false}, \"content\": [{\"type\": \"paragraph\", \"attrs\": {\"textAlign\": null}, \"content\": [{\"text\": \"Status\", \"type\": \"text\"}]}]}]}, {\"type\": \"tableRow\", \"attrs\": {\"textColor\": null, \"background\": null}, \"content\": [{\"type\": \"tableCell\", \"attrs\": {\"colspan\": 1, \"rowspan\": 1, \"colwidth\": [150], \"textColor\": null, \"background\": null, \"hideContent\": false}, \"content\": [{\"type\": \"paragraph\", \"attrs\": {\"textAlign\": null}, \"content\": [{\"text\": \"Authentication flow\", \"type\": \"text\"}]}]}, {\"type\": \"tableCell\", \"attrs\": {\"colspan\": 1, \"rowspan\": 1, \"colwidth\": [150], \"textColor\": null, \"background\": null, \"hideContent\": false}, \"content\": [{\"type\": \"paragraph\", \"attrs\": {\"textAlign\": null}, \"content\": [{\"text\": \"Backend\", \"type\": \"text\"}]}]}, {\"type\": \"tableCell\", \"attrs\": {\"colspan\": 1, \"rowspan\": 1, \"colwidth\": [150], \"textColor\": null, \"background\": null, \"hideContent\": false}, \"content\": [{\"type\": \"paragraph\", \"attrs\": {\"textAlign\": null}, \"content\": [{\"type\": \"emoji\", \"attrs\": {\"name\": \"check_mark_button\"}}, {\"text\": \" Done\", \"type\": \"text\"}]}]}]}, {\"type\": \"tableRow\", \"attrs\": {\"textColor\": null, \"background\": null}, \"content\": [{\"type\": \"tableCell\", \"attrs\": {\"colspan\": 1, \"rowspan\": 1, \"colwidth\": [150], \"textColor\": null, \"background\": null, \"hideContent\": false}, \"content\": [{\"type\": \"paragraph\", \"attrs\": {\"textAlign\": null}, \"content\": [{\"text\": \"Issue board UI\", \"type\": \"text\"}]}]}, {\"type\": \"tableCell\", \"attrs\": {\"colspan\": 1, \"rowspan\": 1, \"colwidth\": [150], \"textColor\": null, \"background\": null, \"hideContent\": false}, \"content\": [{\"type\": \"paragraph\", \"attrs\": {\"textAlign\": null}, \"content\": [{\"text\": \"Frontend\", \"type\": \"text\"}]}]}, {\"type\": \"tableCell\", \"attrs\": {\"colspan\": 1, \"rowspan\": 1, \"colwidth\": [150], \"textColor\": null, \"background\": null, \"hideContent\": false}, \"content\": [{\"type\": \"paragraph\", \"attrs\": {\"textAlign\": null}, \"content\": [{\"type\": \"emoji\", \"attrs\": {\"name\": \"building_construction\"}}, {\"text\": \" In Progress\", \"type\": \"text\"}]}]}]}, {\"type\": \"tableRow\", \"attrs\": {\"textColor\": null, \"background\": null}, \"content\": [{\"type\": \"tableCell\", \"attrs\": {\"colspan\": 1, \"rowspan\": 1, \"colwidth\": [150], \"textColor\": null, \"background\": null, \"hideContent\": false}, \"content\": [{\"type\": \"paragraph\", \"attrs\": {\"textAlign\": null}, \"content\": [{\"text\": \"API integration\", \"type\": \"text\"}]}]}, {\"type\": \"tableCell\", \"attrs\": {\"colspan\": 1, \"rowspan\": 1, \"colwidth\": [150], \"textColor\": null, \"background\": null, \"hideContent\": false}, \"content\": [{\"type\": \"paragraph\", \"attrs\": {\"textAlign\": null}, \"content\": [{\"text\": \"Backend\", \"type\": \"text\"}]}]}, {\"type\": \"tableCell\", \"attrs\": {\"colspan\": 1, \"rowspan\": 1, \"colwidth\": [150], \"textColor\": null, \"background\": null, \"hideContent\": false}, \"content\": [{\"type\": \"paragraph\", \"attrs\": {\"textAlign\": null}, \"content\": [{\"type\": \"emoji\", \"attrs\": {\"name\": \"hourglass_flowing_sand\"}}, {\"text\": \" Pending\", \"type\": \"text\"}]}]}]}, {\"type\": \"tableRow\", \"attrs\": {\"textColor\": null, \"background\": null}, \"content\": [{\"type\": \"tableCell\", \"attrs\": {\"colspan\": 1, \"rowspan\": 1, \"colwidth\": [150], \"textColor\": null, \"background\": null, \"hideContent\": false}, \"content\": [{\"type\": \"paragraph\", \"attrs\": {\"textAlign\": null}, \"content\": [{\"text\": \"Documentation\", \"type\": \"text\"}]}]}, {\"type\": \"tableCell\", \"attrs\": {\"colspan\": 1, \"rowspan\": 1, \"colwidth\": [150], \"textColor\": null, \"background\": null, \"hideContent\": false}, \"content\": [{\"type\": \"paragraph\", \"attrs\": {\"textAlign\": null}, \"content\": [{\"text\": \"PM\", \"type\": \"text\"}]}]}, {\"type\": \"tableCell\", \"attrs\": {\"colspan\": 1, \"rowspan\": 1, \"colwidth\": [150], \"textColor\": null, \"background\": null, \"hideContent\": false}, \"content\": [{\"type\": \"paragraph\", \"attrs\": {\"textAlign\": null}, \"content\": [{\"type\": \"emoji\", \"attrs\": {\"name\": \"memo\"}}, {\"text\": \" Drafting\", \"type\": \"text\"}]}]}]}]}, {\"type\": \"blockquote\", \"content\": [{\"type\": \"paragraph\", \"attrs\": {\"textAlign\": null}, \"content\": [{\"type\": \"emoji\", \"attrs\": {\"name\": \"jigsaw\"}}, {\"text\": \" Use tables or checklists to track scope and ownership.\", \"type\": \"text\"}]}]}, {\"type\": \"horizontalRule\"}, {\"type\": \"heading\", \"attrs\": {\"level\": 2, \"textAlign\": null}, \"content\": [{\"type\": \"emoji\", \"attrs\": {\"name\": \"bricks\"}}, {\"text\": \" Architecture or System Design\", \"type\": \"text\"}]}, {\"type\": \"paragraph\", \"attrs\": {\"textAlign\": null}, \"content\": [{\"text\": \"Use this section for \", \"type\": \"text\"}, {\"text\": \"technical deep dives\", \"type\": \"text\", \"marks\": [{\"type\": \"bold\"}]}, {\"text\": \" or diagrams.\", \"type\": \"text\"}]}, {\"type\": \"codeBlock\", \"attrs\": {\"language\": \"bash\"}, \"content\": [{\"text\": \"Frontend → GraphQL → Backend → PostgreSQL\\nRedis for caching | RabbitMQ for background jobs\", \"type\": \"text\"}]}, {\"type\": \"paragraph\", \"attrs\": {\"textAlign\": null}}]}",
+    "description_stripped": "Welcome to your Project Pages — the documentation hub for this specific project.Each project in Plane can have its own Wiki space where you track plans, specs, updates, and learnings — all connected to your issues and modules.🧭 Project SummaryFieldDetailsProject Name✏ Add your project nameOwnerAdd project owner(s)Status🟢 Active / 🟡 In Progress / 🔴 BlockedStart Date—Target Release—Linked ModulesEngineering, SecurityCycle(s)Cycle 1, Cycle 2🧩 Use tables to summarize key project metadata or links.🎯 Goals & Objectives🎯 Primary GoalsDeliver MVP with all core featuresValidate feature adoption with early usersPrepare launch plan for v1 release⚙ Success MetricsMetricTargetOwnerUser adoption100 active usersGrowthPerformance< 200ms latencyBackendDesign feedback≥ 8/10 average ratingDesign📈 Define measurable outcomes and track progress alongside issues.🧩 Scope & DeliverablesDeliverableOwnerStatusAuthentication flowBackend✅ DoneIssue board UIFrontend🏗 In ProgressAPI integrationBackend⏳ PendingDocumentationPM📝 Drafting🧩 Use tables or checklists to track scope and ownership.🧱 Architecture or System DesignUse this section for technical deep dives or diagrams.Frontend → GraphQL → Backend → PostgreSQL\nRedis for caching | RabbitMQ for background jobs",
+    "type": "PROJECT",
+    "access": 0,
+    "logo_props": {
+      "emoji": {
+        "url": "https://cdn.jsdelivr.net/npm/emoji-datasource-apple/img/apple/64/1f680.png",
+        "value": "128640"
+      },
+      "in_use": "emoji"
     }
-]
\ No newline at end of file
+  },
+  {
+    "id": 2,
+    "name": "Project Draft proposal",
+    "project_id": 1,
+    "description": "{\"type\": \"doc\", \"content\": [{\"type\": \"paragraph\", \"attrs\": {\"textAlign\": null}, \"content\": [{\"text\": \"This is your \", \"type\": \"text\"}, {\"text\": \"Project Draft area\", \"type\": \"text\", \"marks\": [{\"type\": \"bold\"}]}, {\"text\": \" — a private space inside the project where you can experiment, outline ideas, or prepare content before sharing it on the public Project Page.\", \"type\": \"text\"}]}, {\"type\": \"paragraph\", \"attrs\": {\"textAlign\": null}, \"content\": [{\"text\": \"It’s visible only to you (and collaborators you explicitly share with).\", \"type\": \"text\"}]}, {\"type\": \"horizontalRule\"}, {\"type\": \"heading\", \"attrs\": {\"level\": 2, \"textAlign\": null}, \"content\": [{\"type\": \"emoji\", \"attrs\": {\"name\": \"writing_hand\"}}, {\"text\": \" Current Work in Progress\", \"type\": \"text\"}]}, {\"type\": \"paragraph\", \"attrs\": {\"textAlign\": null}}, {\"type\": \"blockquote\", \"content\": [{\"type\": \"paragraph\", \"attrs\": {\"textAlign\": null}, \"content\": [{\"type\": \"emoji\", \"attrs\": {\"name\": \"speech_balloon\"}}, {\"text\": \" Use this section to jot down raw ideas, rough notes, or specs that aren’t ready yet.\", \"type\": \"text\"}]}]}, {\"type\": \"taskList\", \"content\": [{\"type\": \"taskItem\", \"attrs\": {\"checked\": false}, \"content\": [{\"type\": \"paragraph\", \"attrs\": {\"textAlign\": null}, \"content\": [{\"text\": \" Outline project summary and goals\", \"type\": \"text\"}]}]}, {\"type\": \"taskItem\", \"attrs\": {\"checked\": false}, \"content\": [{\"type\": \"paragraph\", \"attrs\": {\"textAlign\": null}, \"content\": [{\"text\": \" Draft new feature spec\", \"type\": \"text\"}]}]}, {\"type\": \"taskItem\", \"attrs\": {\"checked\": false}, \"content\": [{\"type\": \"paragraph\", \"attrs\": {\"textAlign\": null}, \"content\": [{\"text\": \" Review dependency list\", \"type\": \"text\"}]}]}, {\"type\": \"taskItem\", \"attrs\": {\"checked\": false}, \"content\": [{\"type\": \"paragraph\", \"attrs\": {\"textAlign\": null}, \"content\": [{\"text\": \" Collect team feedback for next iteration\", \"type\": \"text\"}]}]}]}, {\"type\": \"blockquote\", \"content\": [{\"type\": \"paragraph\", \"attrs\": {\"textAlign\": null}, \"content\": [{\"type\": \"emoji\", \"attrs\": {\"name\": \"check_mark_button\"}}, {\"text\": \" Tip: Turn these items into actionable issues when finalized.\", \"type\": \"text\"}]}]}, {\"type\": \"horizontalRule\"}, {\"type\": \"heading\", \"attrs\": {\"level\": 2, \"textAlign\": null}, \"content\": [{\"type\": \"emoji\", \"attrs\": {\"name\": \"bricks\"}}, {\"text\": \" Prototype Commands (if technical)\", \"type\": \"text\"}]}, {\"type\": \"paragraph\", \"attrs\": {\"textAlign\": null}, \"content\": [{\"text\": \"You can also use \", \"type\": \"text\"}, {\"text\": \"code blocks\", \"type\": \"text\", \"marks\": [{\"type\": \"bold\"}]}, {\"text\": \" to store snippets, scripts, or notes:\", \"type\": \"text\"}]}, {\"type\": \"codeBlock\", \"attrs\": {\"language\": \"bash\"}, \"content\": [{\"text\": \"# Rebuild Docker containers\\ndocker compose build backend frontend\", \"type\": \"text\"}]}, {\"type\": \"paragraph\", \"attrs\": {\"textAlign\": null}}]}",
+    "description_html": "<p xmlns=\"http://www.w3.org/1999/xhtml\" class=\"editor-paragraph-block\">This is your <strong>Project Draft area</strong> — a private space inside the project where you can experiment, outline ideas, or prepare content before sharing it on the public Project Page.</p><p xmlns=\"http://www.w3.org/1999/xhtml\" class=\"editor-paragraph-block\">It’s visible only to you (and collaborators you explicitly share with).</p><div xmlns=\"http://www.w3.org/1999/xhtml\" class=\"py-4 border-strong-1\" data-type=\"horizontalRule\"><div></div></div><h2 xmlns=\"http://www.w3.org/1999/xhtml\" class=\"editor-heading-block\"><span data-name=\"writing_hand\" data-type=\"emoji\">✍</span> Current Work in Progress</h2><p xmlns=\"http://www.w3.org/1999/xhtml\" class=\"editor-paragraph-block\"></p><blockquote xmlns=\"http://www.w3.org/1999/xhtml\"><p class=\"editor-paragraph-block\"><span data-name=\"speech_balloon\" data-type=\"emoji\">💬</span> Use this section to jot down raw ideas, rough notes, or specs that aren’t ready yet.</p></blockquote><ul xmlns=\"http://www.w3.org/1999/xhtml\" class=\"not-prose pl-2 space-y-2\" data-type=\"taskList\"><li class=\"flex\" data-checked=\"false\" data-type=\"taskItem\"><label><input type=\"checkbox\" /><span></span></label><div><p class=\"editor-paragraph-block\"> Outline project summary and goals</p></div></li><li class=\"flex\" data-checked=\"false\" data-type=\"taskItem\"><label><input type=\"checkbox\" /><span></span></label><div><p class=\"editor-paragraph-block\"> Draft new feature spec</p></div></li><li class=\"flex\" data-checked=\"false\" data-type=\"taskItem\"><label><input type=\"checkbox\" /><span></span></label><div><p class=\"editor-paragraph-block\"> Review dependency list</p></div></li><li class=\"flex\" data-checked=\"false\" data-type=\"taskItem\"><label><input type=\"checkbox\" /><span></span></label><div><p class=\"editor-paragraph-block\"> Collect team feedback for next iteration</p></div></li></ul><blockquote xmlns=\"http://www.w3.org/1999/xhtml\"><p class=\"editor-paragraph-block\"><span data-name=\"check_mark_button\" data-type=\"emoji\">✅</span> Tip: Turn these items into actionable issues when finalized.</p></blockquote><div xmlns=\"http://www.w3.org/1999/xhtml\" class=\"py-4 border-strong-1\" data-type=\"horizontalRule\"><div></div></div><h2 xmlns=\"http://www.w3.org/1999/xhtml\" class=\"editor-heading-block\"><span data-name=\"bricks\" data-type=\"emoji\">🧱</span> Prototype Commands (if technical)</h2><p xmlns=\"http://www.w3.org/1999/xhtml\" class=\"editor-paragraph-block\">You can also use <strong>code blocks</strong> to store snippets, scripts, or notes:</p><pre xmlns=\"http://www.w3.org/1999/xhtml\"><code class=\"language-bash\"># Rebuild Docker containers\ndocker compose build backend frontend</code></pre><p xmlns=\"http://www.w3.org/1999/xhtml\" class=\"editor-paragraph-block\"></p>",
+    "description_stripped": "This is your Project Draft area — a private space inside the project where you can experiment, outline ideas, or prepare content before sharing it on the public Project Page.It’s visible only to you (and collaborators you explicitly share with).✍ Current Work in Progress💬 Use this section to jot down raw ideas, rough notes, or specs that aren’t ready yet. Outline project summary and goals Draft new feature spec Review dependency list Collect team feedback for next iteration✅ Tip: Turn these items into actionable issues when finalized.🧱 Prototype Commands (if technical)You can also use code blocks to store snippets, scripts, or notes:# Rebuild Docker containers\ndocker compose build backend frontend",
+    "type": "PROJECT",
+    "access": 1,
+    "logo_props": "{\"emoji\": {\"url\": \"https://cdn.jsdelivr.net/npm/emoji-datasource-apple/img/apple/64/1f9f1.png\", \"value\": \"129521\"}, \"in_use\": \"emoji\"}"
+  }
+]
diff --git a/apps/api/plane/settings/__init__.py b/apps/api/plane/settings/__init__.py
index e69de29bb..917e26db4 100644
--- a/apps/api/plane/settings/__init__.py
+++ b/apps/api/plane/settings/__init__.py
@@ -0,0 +1,4 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
diff --git a/apps/api/plane/settings/common.py b/apps/api/plane/settings/common.py
index a9e9925c2..9d651bd1b 100644
--- a/apps/api/plane/settings/common.py
+++ b/apps/api/plane/settings/common.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 """Global Settings"""
 
 # Python imports
@@ -36,6 +40,7 @@ INSTALLED_APPS = [
     "django.contrib.auth",
     "django.contrib.contenttypes",
     "django.contrib.sessions",
+    "django.contrib.staticfiles",
     # Inhouse apps
     "plane.analytics",
     "plane.app",
@@ -58,6 +63,7 @@ INSTALLED_APPS = [
 MIDDLEWARE = [
     "corsheaders.middleware.CorsMiddleware",
     "django.middleware.security.SecurityMiddleware",
+    "whitenoise.middleware.WhiteNoiseMiddleware",
     "plane.authentication.middleware.session.SessionMiddleware",
     "django.middleware.common.CommonMiddleware",
     "django.middleware.csrf.CsrfViewMiddleware",
@@ -378,6 +384,7 @@ ATTACHMENT_MIME_TYPES = [
     "application/vnd.ms-powerpoint",
     "application/vnd.openxmlformats-officedocument.presentationml.presentation",
     "text/plain",
+    "text/markdown",
     "application/rtf",
     "application/vnd.oasis.opendocument.spreadsheet",
     "application/vnd.oasis.opendocument.text",
@@ -445,6 +452,8 @@ ATTACHMENT_MIME_TYPES = [
     "application/x-sql",
     # Gzip
     "application/x-gzip",
+    # Markdown
+    "text/markdown",
 ]
 
 # Seed directory path
diff --git a/apps/api/plane/settings/local.py b/apps/api/plane/settings/local.py
index 15f05aa3d..dc4135bc1 100644
--- a/apps/api/plane/settings/local.py
+++ b/apps/api/plane/settings/local.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 """Development settings"""
 
 import os
@@ -76,6 +80,11 @@ LOGGING = {
             "handlers": ["console"],
             "propagate": False,
         },
+        "plane.authentication": {
+            "level": "INFO",
+            "handlers": ["console"],
+            "propagate": False,
+        },
         "plane.migrations": {
             "level": "INFO",
             "handlers": ["console"],
diff --git a/apps/api/plane/settings/mongo.py b/apps/api/plane/settings/mongo.py
index 879d0c436..7855a52d5 100644
--- a/apps/api/plane/settings/mongo.py
+++ b/apps/api/plane/settings/mongo.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Django imports
 from django.conf import settings
 import logging
diff --git a/apps/api/plane/settings/openapi.py b/apps/api/plane/settings/openapi.py
index b79daeecf..a1961a0c5 100644
--- a/apps/api/plane/settings/openapi.py
+++ b/apps/api/plane/settings/openapi.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 """
 OpenAPI/Swagger configuration for drf-spectacular.
 
diff --git a/apps/api/plane/settings/production.py b/apps/api/plane/settings/production.py
index 8df7ae906..7f3f90d65 100644
--- a/apps/api/plane/settings/production.py
+++ b/apps/api/plane/settings/production.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 """Production settings"""
 
 import os
@@ -86,6 +90,11 @@ LOGGING = {
             "handlers": ["console"],
             "propagate": False,
         },
+        "plane.authentication": {
+            "level": "DEBUG" if DEBUG else "INFO",
+            "handlers": ["console"],
+            "propagate": False,
+        },
         "plane.migrations": {
             "level": "DEBUG" if DEBUG else "INFO",
             "handlers": ["console"],
diff --git a/apps/api/plane/settings/redis.py b/apps/api/plane/settings/redis.py
index 628a3d8e6..6c7e613f0 100644
--- a/apps/api/plane/settings/redis.py
+++ b/apps/api/plane/settings/redis.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 import redis
 from django.conf import settings
 from urllib.parse import urlparse
diff --git a/apps/api/plane/settings/storage.py b/apps/api/plane/settings/storage.py
index 01afa6237..e4a978bd2 100644
--- a/apps/api/plane/settings/storage.py
+++ b/apps/api/plane/settings/storage.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Python imports
 import os
 import uuid
@@ -187,3 +191,15 @@ class S3Storage(S3Boto3Storage):
         except ClientError as e:
             log_exception(e)
             return False
+
+    def delete_files(self, object_names):
+        """Delete an S3 object"""
+        try:
+            self.s3_client.delete_objects(
+                Bucket=self.aws_storage_bucket_name,
+                Delete={"Objects": [{"Key": object_name} for object_name in object_names]},
+            )
+            return True
+        except ClientError as e:
+            log_exception(e)
+            return False
diff --git a/apps/api/plane/settings/test.py b/apps/api/plane/settings/test.py
index 6a75f7904..a8e431338 100644
--- a/apps/api/plane/settings/test.py
+++ b/apps/api/plane/settings/test.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 """Test Settings"""
 
 from .common import *  # noqa
diff --git a/apps/api/plane/space/__init__.py b/apps/api/plane/space/__init__.py
index e69de29bb..917e26db4 100644
--- a/apps/api/plane/space/__init__.py
+++ b/apps/api/plane/space/__init__.py
@@ -0,0 +1,4 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
diff --git a/apps/api/plane/space/apps.py b/apps/api/plane/space/apps.py
index 6f1e76c51..dd178e334 100644
--- a/apps/api/plane/space/apps.py
+++ b/apps/api/plane/space/apps.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 from django.apps import AppConfig
 
 
diff --git a/apps/api/plane/space/serializer/__init__.py b/apps/api/plane/space/serializer/__init__.py
index a3fe1029f..e571ac011 100644
--- a/apps/api/plane/space/serializer/__init__.py
+++ b/apps/api/plane/space/serializer/__init__.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 from .user import UserLiteSerializer
 
 from .issue import LabelLiteSerializer, IssuePublicSerializer
diff --git a/apps/api/plane/space/serializer/base.py b/apps/api/plane/space/serializer/base.py
index 4b92b06fc..9f30a7a83 100644
--- a/apps/api/plane/space/serializer/base.py
+++ b/apps/api/plane/space/serializer/base.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 from rest_framework import serializers
 
 
diff --git a/apps/api/plane/space/serializer/cycle.py b/apps/api/plane/space/serializer/cycle.py
index afa760a59..617ac0842 100644
--- a/apps/api/plane/space/serializer/cycle.py
+++ b/apps/api/plane/space/serializer/cycle.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Module imports
 from .base import BaseSerializer
 from plane.db.models import Cycle
diff --git a/apps/api/plane/space/serializer/intake.py b/apps/api/plane/space/serializer/intake.py
index 444c20d42..cf22cebbb 100644
--- a/apps/api/plane/space/serializer/intake.py
+++ b/apps/api/plane/space/serializer/intake.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Third Party imports
 from rest_framework import serializers
 
diff --git a/apps/api/plane/space/serializer/issue.py b/apps/api/plane/space/serializer/issue.py
index a89846cfc..51dd1f41d 100644
--- a/apps/api/plane/space/serializer/issue.py
+++ b/apps/api/plane/space/serializer/issue.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Django imports
 from django.utils import timezone
 
@@ -193,7 +197,7 @@ class IssueFlatSerializer(BaseSerializer):
         fields = [
             "id",
             "name",
-            "description",
+            "description_json",
             "description_html",
             "priority",
             "start_date",
diff --git a/apps/api/plane/space/serializer/module.py b/apps/api/plane/space/serializer/module.py
index 53840f078..81ba93c13 100644
--- a/apps/api/plane/space/serializer/module.py
+++ b/apps/api/plane/space/serializer/module.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Module imports
 from .base import BaseSerializer
 from plane.db.models import Module
diff --git a/apps/api/plane/space/serializer/project.py b/apps/api/plane/space/serializer/project.py
index f79eef686..62be19f4f 100644
--- a/apps/api/plane/space/serializer/project.py
+++ b/apps/api/plane/space/serializer/project.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Module imports
 from .base import BaseSerializer
 from plane.db.models import Project
diff --git a/apps/api/plane/space/serializer/state.py b/apps/api/plane/space/serializer/state.py
index 184f48b40..410b408f0 100644
--- a/apps/api/plane/space/serializer/state.py
+++ b/apps/api/plane/space/serializer/state.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Module imports
 from .base import BaseSerializer
 from plane.db.models import State
diff --git a/apps/api/plane/space/serializer/user.py b/apps/api/plane/space/serializer/user.py
index 9b707a343..4ecbad80e 100644
--- a/apps/api/plane/space/serializer/user.py
+++ b/apps/api/plane/space/serializer/user.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Module imports
 from .base import BaseSerializer
 from plane.db.models import User
diff --git a/apps/api/plane/space/serializer/workspace.py b/apps/api/plane/space/serializer/workspace.py
index 4945af96a..c63dfe2a5 100644
--- a/apps/api/plane/space/serializer/workspace.py
+++ b/apps/api/plane/space/serializer/workspace.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Module imports
 from .base import BaseSerializer
 from plane.db.models import Workspace
diff --git a/apps/api/plane/space/urls/__init__.py b/apps/api/plane/space/urls/__init__.py
index d9a1f6ec3..06d3a117a 100644
--- a/apps/api/plane/space/urls/__init__.py
+++ b/apps/api/plane/space/urls/__init__.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 from .intake import urlpatterns as intake_urls
 from .issue import urlpatterns as issue_urls
 from .project import urlpatterns as project_urls
diff --git a/apps/api/plane/space/urls/asset.py b/apps/api/plane/space/urls/asset.py
index 2a5c30a22..050aeb4ab 100644
--- a/apps/api/plane/space/urls/asset.py
+++ b/apps/api/plane/space/urls/asset.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Django imports
 from django.urls import path
 
diff --git a/apps/api/plane/space/urls/intake.py b/apps/api/plane/space/urls/intake.py
index 59fda12e2..470f7f7b7 100644
--- a/apps/api/plane/space/urls/intake.py
+++ b/apps/api/plane/space/urls/intake.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 from django.urls import path
 
 
diff --git a/apps/api/plane/space/urls/issue.py b/apps/api/plane/space/urls/issue.py
index bb63e6695..5ea7671c2 100644
--- a/apps/api/plane/space/urls/issue.py
+++ b/apps/api/plane/space/urls/issue.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 from django.urls import path
 
 
diff --git a/apps/api/plane/space/urls/project.py b/apps/api/plane/space/urls/project.py
index 068b8c5c1..1d58aba42 100644
--- a/apps/api/plane/space/urls/project.py
+++ b/apps/api/plane/space/urls/project.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 from django.urls import path
 
 
diff --git a/apps/api/plane/space/utils/grouper.py b/apps/api/plane/space/utils/grouper.py
index f8e2c50a4..e5f893bd5 100644
--- a/apps/api/plane/space/utils/grouper.py
+++ b/apps/api/plane/space/utils/grouper.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Django imports
 from django.contrib.postgres.aggregates import ArrayAgg
 from django.contrib.postgres.fields import ArrayField
diff --git a/apps/api/plane/space/views/__init__.py b/apps/api/plane/space/views/__init__.py
index 22acfd15b..f70d094de 100644
--- a/apps/api/plane/space/views/__init__.py
+++ b/apps/api/plane/space/views/__init__.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 from .project import (
     ProjectDeployBoardPublicSettingsEndpoint,
     WorkspaceProjectDeployBoardEndpoint,
diff --git a/apps/api/plane/space/views/asset.py b/apps/api/plane/space/views/asset.py
index faabd97ab..1749a8fd4 100644
--- a/apps/api/plane/space/views/asset.py
+++ b/apps/api/plane/space/views/asset.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Python imports
 import uuid
 
diff --git a/apps/api/plane/space/views/base.py b/apps/api/plane/space/views/base.py
index 9be6a2e10..cf8cdbdc5 100644
--- a/apps/api/plane/space/views/base.py
+++ b/apps/api/plane/space/views/base.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Python imports
 import zoneinfo
 from django.conf import settings
diff --git a/apps/api/plane/space/views/cycle.py b/apps/api/plane/space/views/cycle.py
index 505c17ba4..72bec3064 100644
--- a/apps/api/plane/space/views/cycle.py
+++ b/apps/api/plane/space/views/cycle.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Third Party imports
 from rest_framework import status
 from rest_framework.permissions import AllowAny
diff --git a/apps/api/plane/space/views/intake.py b/apps/api/plane/space/views/intake.py
index 7ea2dee91..4d9913193 100644
--- a/apps/api/plane/space/views/intake.py
+++ b/apps/api/plane/space/views/intake.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Python imports
 import json
 
@@ -140,7 +144,7 @@ class IntakeIssuePublicViewSet(BaseViewSet):
         # create an issue
         issue = Issue.objects.create(
             name=request.data.get("issue", {}).get("name"),
-            description=request.data.get("issue", {}).get("description", {}),
+            description_json=request.data.get("issue", {}).get("description_json", {}),
             description_html=request.data.get("issue", {}).get("description_html", "<p></p>"),
             priority=request.data.get("issue", {}).get("priority", "low"),
             project_id=project_deploy_board.project_id,
@@ -201,7 +205,7 @@ class IntakeIssuePublicViewSet(BaseViewSet):
         issue_data = {
             "name": issue_data.get("name", issue.name),
             "description_html": issue_data.get("description_html", issue.description_html),
-            "description": issue_data.get("description", issue.description),
+            "description_json": issue_data.get("description_json", issue.description_json),
         }
 
         issue_serializer = IssueCreateSerializer(
diff --git a/apps/api/plane/space/views/issue.py b/apps/api/plane/space/views/issue.py
index 220fc1307..9e2187466 100644
--- a/apps/api/plane/space/views/issue.py
+++ b/apps/api/plane/space/views/issue.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Python imports
 import json
 
@@ -744,7 +748,7 @@ class IssueRetrievePublicEndpoint(BaseAPIView):
                 "name",
                 "state_id",
                 "sort_order",
-                "description",
+                "description_json",
                 "description_html",
                 "description_stripped",
                 "description_binary",
diff --git a/apps/api/plane/space/views/label.py b/apps/api/plane/space/views/label.py
index 51ddb832e..f7cde57eb 100644
--- a/apps/api/plane/space/views/label.py
+++ b/apps/api/plane/space/views/label.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Third Party imports
 from rest_framework.response import Response
 from rest_framework import status
diff --git a/apps/api/plane/space/views/meta.py b/apps/api/plane/space/views/meta.py
index be612db70..740bed19f 100644
--- a/apps/api/plane/space/views/meta.py
+++ b/apps/api/plane/space/views/meta.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # third party
 from rest_framework.permissions import AllowAny
 from rest_framework import status
diff --git a/apps/api/plane/space/views/module.py b/apps/api/plane/space/views/module.py
index 7c4628f64..2df0166ac 100644
--- a/apps/api/plane/space/views/module.py
+++ b/apps/api/plane/space/views/module.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Third Party imports
 from rest_framework import status
 from rest_framework.permissions import AllowAny
diff --git a/apps/api/plane/space/views/project.py b/apps/api/plane/space/views/project.py
index 0e19085a0..168c42624 100644
--- a/apps/api/plane/space/views/project.py
+++ b/apps/api/plane/space/views/project.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Django imports
 from django.db.models import Exists, OuterRef
 
diff --git a/apps/api/plane/space/views/state.py b/apps/api/plane/space/views/state.py
index c13186600..05b791475 100644
--- a/apps/api/plane/space/views/state.py
+++ b/apps/api/plane/space/views/state.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Django imports
 from django.db.models import Q
 
diff --git a/apps/api/plane/static/logos/Logo.png b/apps/api/plane/static/logos/Logo.png
new file mode 100644
index 000000000..385ed57aa
Binary files /dev/null and b/apps/api/plane/static/logos/Logo.png differ
diff --git a/apps/api/plane/static/logos/github_32px.png b/apps/api/plane/static/logos/github_32px.png
new file mode 100644
index 000000000..4a9e5ab8c
Binary files /dev/null and b/apps/api/plane/static/logos/github_32px.png differ
diff --git a/apps/api/plane/static/logos/linkedin_32px.png b/apps/api/plane/static/logos/linkedin_32px.png
new file mode 100644
index 000000000..396e9327d
Binary files /dev/null and b/apps/api/plane/static/logos/linkedin_32px.png differ
diff --git a/apps/api/plane/static/logos/twitter_32px.png b/apps/api/plane/static/logos/twitter_32px.png
new file mode 100644
index 000000000..537562ea7
Binary files /dev/null and b/apps/api/plane/static/logos/twitter_32px.png differ
diff --git a/apps/api/plane/static/logos/website_32px.png b/apps/api/plane/static/logos/website_32px.png
new file mode 100644
index 000000000..970a13f1c
Binary files /dev/null and b/apps/api/plane/static/logos/website_32px.png differ
diff --git a/apps/api/plane/tests/__init__.py b/apps/api/plane/tests/__init__.py
index 73d90cd21..5f9223043 100644
--- a/apps/api/plane/tests/__init__.py
+++ b/apps/api/plane/tests/__init__.py
@@ -1 +1,5 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Test package initialization
diff --git a/apps/api/plane/tests/apps.py b/apps/api/plane/tests/apps.py
index 577414e63..966986969 100644
--- a/apps/api/plane/tests/apps.py
+++ b/apps/api/plane/tests/apps.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 from django.apps import AppConfig
 
 
diff --git a/apps/api/plane/tests/conftest.py b/apps/api/plane/tests/conftest.py
index abfede197..870779c42 100644
--- a/apps/api/plane/tests/conftest.py
+++ b/apps/api/plane/tests/conftest.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 import pytest
 from rest_framework.test import APIClient
 from pytest_django.fixtures import django_db_setup
diff --git a/apps/api/plane/tests/conftest_external.py b/apps/api/plane/tests/conftest_external.py
index cebb768ca..cd5469caa 100644
--- a/apps/api/plane/tests/conftest_external.py
+++ b/apps/api/plane/tests/conftest_external.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 import pytest
 from unittest.mock import MagicMock, patch
 
diff --git a/apps/api/plane/tests/contract/__init__.py b/apps/api/plane/tests/contract/__init__.py
index e69de29bb..917e26db4 100644
--- a/apps/api/plane/tests/contract/__init__.py
+++ b/apps/api/plane/tests/contract/__init__.py
@@ -0,0 +1,4 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
diff --git a/apps/api/plane/tests/contract/api/__init__.py b/apps/api/plane/tests/contract/api/__init__.py
index e69de29bb..917e26db4 100644
--- a/apps/api/plane/tests/contract/api/__init__.py
+++ b/apps/api/plane/tests/contract/api/__init__.py
@@ -0,0 +1,4 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
diff --git a/apps/api/plane/tests/contract/api/test_cycles.py b/apps/api/plane/tests/contract/api/test_cycles.py
index 644fe2bef..d0138de8b 100644
--- a/apps/api/plane/tests/contract/api/test_cycles.py
+++ b/apps/api/plane/tests/contract/api/test_cycles.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 import pytest
 from rest_framework import status
 from django.utils import timezone
diff --git a/apps/api/plane/tests/contract/api/test_labels.py b/apps/api/plane/tests/contract/api/test_labels.py
index a3a43d90a..db5340dfd 100644
--- a/apps/api/plane/tests/contract/api/test_labels.py
+++ b/apps/api/plane/tests/contract/api/test_labels.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 import pytest
 from rest_framework import status
 from uuid import uuid4
diff --git a/apps/api/plane/tests/contract/app/__init__.py b/apps/api/plane/tests/contract/app/__init__.py
index e69de29bb..917e26db4 100644
--- a/apps/api/plane/tests/contract/app/__init__.py
+++ b/apps/api/plane/tests/contract/app/__init__.py
@@ -0,0 +1,4 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
diff --git a/apps/api/plane/tests/contract/app/test_api_token.py b/apps/api/plane/tests/contract/app/test_api_token.py
index 24fac7bb4..ed071b98c 100644
--- a/apps/api/plane/tests/contract/app/test_api_token.py
+++ b/apps/api/plane/tests/contract/app/test_api_token.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 import pytest
 from datetime import timedelta
 from uuid import uuid4
diff --git a/apps/api/plane/tests/contract/app/test_authentication.py b/apps/api/plane/tests/contract/app/test_authentication.py
index 1c044f192..808416b02 100644
--- a/apps/api/plane/tests/contract/app/test_authentication.py
+++ b/apps/api/plane/tests/contract/app/test_authentication.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 import json
 import uuid
 import pytest
diff --git a/apps/api/plane/tests/contract/app/test_project_app.py b/apps/api/plane/tests/contract/app/test_project_app.py
index 38b0f51f3..979c5e805 100644
--- a/apps/api/plane/tests/contract/app/test_project_app.py
+++ b/apps/api/plane/tests/contract/app/test_project_app.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 import pytest
 from rest_framework import status
 import uuid
@@ -6,7 +10,7 @@ from django.utils import timezone
 from plane.db.models import (
     Project,
     ProjectMember,
-    IssueUserProperty,
+    ProjectUserProperty,
     State,
     WorkspaceMember,
     User,
@@ -82,8 +86,8 @@ class TestProjectAPIPost(TestProjectBase):
         assert project_member.role == 20  # Administrator
         assert project_member.is_active is True
 
-        # Verify IssueUserProperty was created
-        assert IssueUserProperty.objects.filter(project=project, user=user).exists()
+        # Verify ProjectUserProperty was created
+        assert ProjectUserProperty.objects.filter(project=project, user=user).exists()
 
         # Verify default states were created
         states = State.objects.filter(project=project)
@@ -116,8 +120,8 @@ class TestProjectAPIPost(TestProjectBase):
         project = Project.objects.get(name=project_data["name"])
         assert ProjectMember.objects.filter(project=project, role=20).count() == 2
 
-        # Verify both have IssueUserProperty
-        assert IssueUserProperty.objects.filter(project=project).count() == 2
+        # Verify both have ProjectUserProperty
+        assert ProjectUserProperty.objects.filter(project=project).count() == 2
 
     @pytest.mark.django_db
     def test_create_project_guest_forbidden(self, session_client, workspace):
diff --git a/apps/api/plane/tests/contract/app/test_workspace_app.py b/apps/api/plane/tests/contract/app/test_workspace_app.py
index 47b049795..427bad60b 100644
--- a/apps/api/plane/tests/contract/app/test_workspace_app.py
+++ b/apps/api/plane/tests/contract/app/test_workspace_app.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 import pytest
 from django.urls import reverse
 from rest_framework import status
diff --git a/apps/api/plane/tests/factories.py b/apps/api/plane/tests/factories.py
index b8cd78361..4d39d832f 100644
--- a/apps/api/plane/tests/factories.py
+++ b/apps/api/plane/tests/factories.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 import factory
 from uuid import uuid4
 from django.utils import timezone
diff --git a/apps/api/plane/tests/smoke/__init__.py b/apps/api/plane/tests/smoke/__init__.py
index e69de29bb..917e26db4 100644
--- a/apps/api/plane/tests/smoke/__init__.py
+++ b/apps/api/plane/tests/smoke/__init__.py
@@ -0,0 +1,4 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
diff --git a/apps/api/plane/tests/smoke/test_auth_smoke.py b/apps/api/plane/tests/smoke/test_auth_smoke.py
index c5a671e9a..1537db79f 100644
--- a/apps/api/plane/tests/smoke/test_auth_smoke.py
+++ b/apps/api/plane/tests/smoke/test_auth_smoke.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 import pytest
 import requests
 from django.urls import reverse
diff --git a/apps/api/plane/tests/unit/__init__.py b/apps/api/plane/tests/unit/__init__.py
index e69de29bb..917e26db4 100644
--- a/apps/api/plane/tests/unit/__init__.py
+++ b/apps/api/plane/tests/unit/__init__.py
@@ -0,0 +1,4 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
diff --git a/apps/api/plane/tests/unit/bg_tasks/test_copy_s3_objects.py b/apps/api/plane/tests/unit/bg_tasks/test_copy_s3_objects.py
index 988603659..c153703ba 100644
--- a/apps/api/plane/tests/unit/bg_tasks/test_copy_s3_objects.py
+++ b/apps/api/plane/tests/unit/bg_tasks/test_copy_s3_objects.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 import pytest
 from plane.db.models import Project, ProjectMember, Issue, FileAsset
 from unittest.mock import patch, MagicMock
diff --git a/apps/api/plane/tests/unit/bg_tasks/test_work_item_link_task.py b/apps/api/plane/tests/unit/bg_tasks/test_work_item_link_task.py
new file mode 100644
index 000000000..2838260e8
--- /dev/null
+++ b/apps/api/plane/tests/unit/bg_tasks/test_work_item_link_task.py
@@ -0,0 +1,126 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
+import pytest
+from unittest.mock import patch, MagicMock
+from plane.bgtasks.work_item_link_task import safe_get, validate_url_ip
+
+
+def _make_response(status_code=200, headers=None, is_redirect=False, content=b""):
+    """Create a mock requests.Response."""
+    resp = MagicMock()
+    resp.status_code = status_code
+    resp.is_redirect = is_redirect
+    resp.headers = headers or {}
+    resp.content = content
+    return resp
+
+
+@pytest.mark.unit
+class TestValidateUrlIp:
+    """Test validate_url_ip blocks private/internal IPs."""
+
+    def test_rejects_private_ip(self):
+        with patch("plane.bgtasks.work_item_link_task.socket.getaddrinfo") as mock_dns:
+            mock_dns.return_value = [(None, None, None, None, ("192.168.1.1", 0))]
+            with pytest.raises(ValueError, match="private/internal"):
+                validate_url_ip("http://example.com")
+
+    def test_rejects_loopback(self):
+        with patch("plane.bgtasks.work_item_link_task.socket.getaddrinfo") as mock_dns:
+            mock_dns.return_value = [(None, None, None, None, ("127.0.0.1", 0))]
+            with pytest.raises(ValueError, match="private/internal"):
+                validate_url_ip("http://example.com")
+
+    def test_rejects_non_http_scheme(self):
+        with pytest.raises(ValueError, match="Only HTTP and HTTPS"):
+            validate_url_ip("file:///etc/passwd")
+
+    def test_allows_public_ip(self):
+        with patch("plane.bgtasks.work_item_link_task.socket.getaddrinfo") as mock_dns:
+            mock_dns.return_value = [(None, None, None, None, ("93.184.216.34", 0))]
+            validate_url_ip("https://example.com")  # Should not raise
+
+
+@pytest.mark.unit
+class TestSafeGet:
+    """Test safe_get follows redirects safely and blocks SSRF."""
+
+    @patch("plane.bgtasks.work_item_link_task.requests.get")
+    @patch("plane.bgtasks.work_item_link_task.validate_url_ip")
+    def test_returns_response_for_non_redirect(self, mock_validate, mock_get):
+        final_resp = _make_response(status_code=200, content=b"OK")
+        mock_get.return_value = final_resp
+
+        response, final_url = safe_get("https://example.com")
+
+        assert response is final_resp
+        assert final_url == "https://example.com"
+        mock_validate.assert_called_once_with("https://example.com")
+
+    @patch("plane.bgtasks.work_item_link_task.requests.get")
+    @patch("plane.bgtasks.work_item_link_task.validate_url_ip")
+    def test_follows_redirect_and_validates_each_hop(self, mock_validate, mock_get):
+        redirect_resp = _make_response(
+            status_code=301,
+            is_redirect=True,
+            headers={"Location": "https://other.com/page"},
+        )
+        final_resp = _make_response(status_code=200, content=b"OK")
+        mock_get.side_effect = [redirect_resp, final_resp]
+
+        response, final_url = safe_get("https://example.com")
+
+        assert response is final_resp
+        assert final_url == "https://other.com/page"
+        # Should validate both the initial URL and the redirect target
+        assert mock_validate.call_count == 2
+        mock_validate.assert_any_call("https://example.com")
+        mock_validate.assert_any_call("https://other.com/page")
+
+    @patch("plane.bgtasks.work_item_link_task.requests.get")
+    @patch("plane.bgtasks.work_item_link_task.validate_url_ip")
+    def test_blocks_redirect_to_private_ip(self, mock_validate, mock_get):
+        redirect_resp = _make_response(
+            status_code=302,
+            is_redirect=True,
+            headers={"Location": "http://192.168.1.1:8080"},
+        )
+        mock_get.return_value = redirect_resp
+        # First call (initial URL) succeeds, second call (redirect target) fails
+        mock_validate.side_effect = [None, ValueError("Access to private/internal networks is not allowed")]
+
+        with pytest.raises(ValueError, match="private/internal"):
+            safe_get("https://evil.com/redirect")
+
+    @patch("plane.bgtasks.work_item_link_task.requests.get")
+    @patch("plane.bgtasks.work_item_link_task.validate_url_ip")
+    def test_raises_on_too_many_redirects(self, mock_validate, mock_get):
+        redirect_resp = _make_response(
+            status_code=302,
+            is_redirect=True,
+            headers={"Location": "https://example.com/loop"},
+        )
+        mock_get.return_value = redirect_resp
+
+        with pytest.raises(RuntimeError, match="Too many redirects"):
+            safe_get("https://example.com/start")
+
+    @patch("plane.bgtasks.work_item_link_task.requests.get")
+    @patch("plane.bgtasks.work_item_link_task.validate_url_ip")
+    def test_succeeds_at_exact_max_redirects(self, mock_validate, mock_get):
+        """After exactly MAX_REDIRECTS hops, if the final response is 200, it should succeed."""
+        redirect_resp = _make_response(
+            status_code=302,
+            is_redirect=True,
+            headers={"Location": "https://example.com/next"},
+        )
+        final_resp = _make_response(status_code=200, content=b"OK")
+        # 5 redirects then a 200
+        mock_get.side_effect = [redirect_resp] * 5 + [final_resp]
+
+        response, final_url = safe_get("https://example.com/start")
+
+        assert response is final_resp
+        assert not response.is_redirect
diff --git a/apps/api/plane/tests/unit/middleware/__init__.py b/apps/api/plane/tests/unit/middleware/__init__.py
index e69de29bb..917e26db4 100644
--- a/apps/api/plane/tests/unit/middleware/__init__.py
+++ b/apps/api/plane/tests/unit/middleware/__init__.py
@@ -0,0 +1,4 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
diff --git a/apps/api/plane/tests/unit/middleware/test_db_routing.py b/apps/api/plane/tests/unit/middleware/test_db_routing.py
index 5ac71696a..9f5439e75 100644
--- a/apps/api/plane/tests/unit/middleware/test_db_routing.py
+++ b/apps/api/plane/tests/unit/middleware/test_db_routing.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 """
 Unit tests for ReadReplicaRoutingMiddleware.
 This module contains comprehensive tests for the ReadReplicaRoutingMiddleware
diff --git a/apps/api/plane/tests/unit/models/__init__.py b/apps/api/plane/tests/unit/models/__init__.py
index e69de29bb..917e26db4 100644
--- a/apps/api/plane/tests/unit/models/__init__.py
+++ b/apps/api/plane/tests/unit/models/__init__.py
@@ -0,0 +1,4 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
diff --git a/apps/api/plane/tests/unit/models/test_issue_comment_modal.py b/apps/api/plane/tests/unit/models/test_issue_comment_modal.py
index 98a0b05b2..37f743d76 100644
--- a/apps/api/plane/tests/unit/models/test_issue_comment_modal.py
+++ b/apps/api/plane/tests/unit/models/test_issue_comment_modal.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 import pytest
 
 from plane.db.models import IssueComment, Description, Project, Issue, Workspace, State
diff --git a/apps/api/plane/tests/unit/models/test_workspace_model.py b/apps/api/plane/tests/unit/models/test_workspace_model.py
index 26a797512..405538cfb 100644
--- a/apps/api/plane/tests/unit/models/test_workspace_model.py
+++ b/apps/api/plane/tests/unit/models/test_workspace_model.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 import pytest
 from uuid import uuid4
 
diff --git a/apps/api/plane/tests/unit/serializers/__init__.py b/apps/api/plane/tests/unit/serializers/__init__.py
index e69de29bb..917e26db4 100644
--- a/apps/api/plane/tests/unit/serializers/__init__.py
+++ b/apps/api/plane/tests/unit/serializers/__init__.py
@@ -0,0 +1,4 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
diff --git a/apps/api/plane/tests/unit/serializers/test_issue_recent_visit.py b/apps/api/plane/tests/unit/serializers/test_issue_recent_visit.py
index eac92384b..59a909eeb 100644
--- a/apps/api/plane/tests/unit/serializers/test_issue_recent_visit.py
+++ b/apps/api/plane/tests/unit/serializers/test_issue_recent_visit.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 import pytest
 
 from plane.db.models import (
diff --git a/apps/api/plane/tests/unit/serializers/test_label.py b/apps/api/plane/tests/unit/serializers/test_label.py
index 91cde1c4a..a4ebc8875 100644
--- a/apps/api/plane/tests/unit/serializers/test_label.py
+++ b/apps/api/plane/tests/unit/serializers/test_label.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 import pytest
 from plane.app.serializers import LabelSerializer
 from plane.db.models import Project, Label
@@ -10,9 +14,7 @@ class TestLabelSerializer:
     @pytest.mark.django_db
     def test_label_serializer_create_valid_data(self, db, workspace):
         """Test creating a label with valid data"""
-        project = Project.objects.create(
-            name="Test Project", identifier="TEST", workspace=workspace
-        )
+        project = Project.objects.create(name="Test Project", identifier="TEST", workspace=workspace)
 
         serializer = LabelSerializer(
             data={"name": "Test Label"},
@@ -30,14 +32,10 @@ class TestLabelSerializer:
     @pytest.mark.django_db
     def test_label_serializer_create_duplicate_name(self, db, workspace):
         """Test creating a label with a duplicate name"""
-        project = Project.objects.create(
-            name="Test Project", identifier="TEST", workspace=workspace
-        )
+        project = Project.objects.create(name="Test Project", identifier="TEST", workspace=workspace)
 
         Label.objects.create(name="Test Label", project=project)
 
-        serializer = LabelSerializer(
-            data={"name": "Test Label"}, context={"project_id": project.id}
-        )
+        serializer = LabelSerializer(data={"name": "Test Label"}, context={"project_id": project.id})
         assert not serializer.is_valid()
         assert serializer.errors == {"name": ["LABEL_NAME_ALREADY_EXISTS"]}
diff --git a/apps/api/plane/tests/unit/serializers/test_workspace.py b/apps/api/plane/tests/unit/serializers/test_workspace.py
index 21844c714..f59667f70 100644
--- a/apps/api/plane/tests/unit/serializers/test_workspace.py
+++ b/apps/api/plane/tests/unit/serializers/test_workspace.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 import pytest
 from uuid import uuid4
 
diff --git a/apps/api/plane/tests/unit/settings/__init__.py b/apps/api/plane/tests/unit/settings/__init__.py
index e69de29bb..917e26db4 100644
--- a/apps/api/plane/tests/unit/settings/__init__.py
+++ b/apps/api/plane/tests/unit/settings/__init__.py
@@ -0,0 +1,4 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
diff --git a/apps/api/plane/tests/unit/settings/test_storage.py b/apps/api/plane/tests/unit/settings/test_storage.py
index fe8cf43f8..00856aeec 100644
--- a/apps/api/plane/tests/unit/settings/test_storage.py
+++ b/apps/api/plane/tests/unit/settings/test_storage.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 import os
 from unittest.mock import Mock, patch
 import pytest
diff --git a/apps/api/plane/tests/unit/utils/__init__.py b/apps/api/plane/tests/unit/utils/__init__.py
index e69de29bb..917e26db4 100644
--- a/apps/api/plane/tests/unit/utils/__init__.py
+++ b/apps/api/plane/tests/unit/utils/__init__.py
@@ -0,0 +1,4 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
diff --git a/apps/api/plane/tests/unit/utils/test_url.py b/apps/api/plane/tests/unit/utils/test_url.py
index 465cb3023..82b5b106d 100644
--- a/apps/api/plane/tests/unit/utils/test_url.py
+++ b/apps/api/plane/tests/unit/utils/test_url.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 import pytest
 from plane.utils.url import (
     contains_url,
diff --git a/apps/api/plane/tests/unit/utils/test_uuid.py b/apps/api/plane/tests/unit/utils/test_uuid.py
index d47e59c4b..33ddebb92 100644
--- a/apps/api/plane/tests/unit/utils/test_uuid.py
+++ b/apps/api/plane/tests/unit/utils/test_uuid.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 import uuid
 import pytest
 from plane.utils.uuid import is_valid_uuid, convert_uuid_to_integer
diff --git a/apps/api/plane/throttles/asset.py b/apps/api/plane/throttles/asset.py
index 484650049..bdc3be799 100644
--- a/apps/api/plane/throttles/asset.py
+++ b/apps/api/plane/throttles/asset.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 from rest_framework.throttling import SimpleRateThrottle
 
 
diff --git a/apps/api/plane/urls.py b/apps/api/plane/urls.py
index 4b1062559..f5e43408c 100644
--- a/apps/api/plane/urls.py
+++ b/apps/api/plane/urls.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 """plane URL Configuration"""
 
 from django.conf import settings
diff --git a/apps/api/plane/utils/__init__.py b/apps/api/plane/utils/__init__.py
index e69de29bb..917e26db4 100644
--- a/apps/api/plane/utils/__init__.py
+++ b/apps/api/plane/utils/__init__.py
@@ -0,0 +1,4 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
diff --git a/apps/api/plane/utils/analytics_events.py b/apps/api/plane/utils/analytics_events.py
new file mode 100644
index 000000000..ce06ba92e
--- /dev/null
+++ b/apps/api/plane/utils/analytics_events.py
@@ -0,0 +1,8 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
+USER_JOINED_WORKSPACE = "user_joined_workspace"
+USER_INVITED_TO_WORKSPACE = "user_invited_to_workspace"
+WORKSPACE_CREATED = "workspace_created"
+WORKSPACE_DELETED = "workspace_deleted"
diff --git a/apps/api/plane/utils/analytics_plot.py b/apps/api/plane/utils/analytics_plot.py
index 12fa39cc0..acd86aca8 100644
--- a/apps/api/plane/utils/analytics_plot.py
+++ b/apps/api/plane/utils/analytics_plot.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Python imports
 from datetime import timedelta
 from itertools import groupby
diff --git a/apps/api/plane/utils/build_chart.py b/apps/api/plane/utils/build_chart.py
index 9a2d9c3a0..bf4d1cf2b 100644
--- a/apps/api/plane/utils/build_chart.py
+++ b/apps/api/plane/utils/build_chart.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 from typing import Dict, Any, Tuple, Optional, List, Union
 
 
@@ -51,7 +55,7 @@ def get_x_axis_field() -> Dict[str, Tuple[str, str, Optional[Dict[str, Any]]]]:
             "assignees__display_name",
             {"issue_assignee__deleted_at__isnull": True},
         ),
-        "ESTIMATE_POINTS": ("estimate_point__value", "estimate_point__key", None),
+        "ESTIMATE_POINTS": ("estimate_point__key", "estimate_point__value", None),
         "CYCLES": (
             "issue_cycle__cycle_id",
             "issue_cycle__cycle__name",
diff --git a/apps/api/plane/utils/cache.py b/apps/api/plane/utils/cache.py
index da3fd4517..9ff5db6d9 100644
--- a/apps/api/plane/utils/cache.py
+++ b/apps/api/plane/utils/cache.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Python imports
 from functools import wraps
 
diff --git a/apps/api/plane/utils/color.py b/apps/api/plane/utils/color.py
index 8c45389bd..61a572dc0 100644
--- a/apps/api/plane/utils/color.py
+++ b/apps/api/plane/utils/color.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 import random
 import string
 
diff --git a/apps/api/plane/utils/constants.py b/apps/api/plane/utils/constants.py
index 0d5e64a20..1ccc501dd 100644
--- a/apps/api/plane/utils/constants.py
+++ b/apps/api/plane/utils/constants.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 RESTRICTED_WORKSPACE_SLUGS = [
     "404",
     "accounts",
diff --git a/apps/api/plane/utils/content_validator.py b/apps/api/plane/utils/content_validator.py
index 10e83b85d..1b4ede262 100644
--- a/apps/api/plane/utils/content_validator.py
+++ b/apps/api/plane/utils/content_validator.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Python imports
 import base64
 import nh3
@@ -56,9 +60,7 @@ def validate_binary_data(data):
     # Check for suspicious text patterns (HTML/JS)
     try:
         decoded_text = binary_data.decode("utf-8", errors="ignore")[:200]
-        if any(
-            pattern in decoded_text.lower() for pattern in SUSPICIOUS_BINARY_PATTERNS
-        ):
+        if any(pattern in decoded_text.lower() for pattern in SUSPICIOUS_BINARY_PATTERNS):
             return False, "Binary data contains suspicious content patterns"
     except Exception:
         pass  # Binary data might not be decodable as text, which is fine
@@ -137,8 +139,6 @@ ATTRIBUTES = {
         "rowspan",
         "colwidth",
         "background",
-        "hideContent",
-        "hidecontent",
         "style",
     },
     "td": {
@@ -148,8 +148,6 @@ ATTRIBUTES = {
         "background",
         "textColor",
         "textcolor",
-        "hideContent",
-        "hidecontent",
         "style",
     },
     "tr": {"background", "textColor", "textcolor", "style"},
diff --git a/apps/api/plane/utils/core/__init__.py b/apps/api/plane/utils/core/__init__.py
index 37c6e3741..7f119b62f 100644
--- a/apps/api/plane/utils/core/__init__.py
+++ b/apps/api/plane/utils/core/__init__.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 """
 Core utilities for Plane database routing and request scoping.
 This package contains essential components for managing read replica routing
diff --git a/apps/api/plane/utils/core/dbrouters.py b/apps/api/plane/utils/core/dbrouters.py
index e17568331..fdd00cca2 100644
--- a/apps/api/plane/utils/core/dbrouters.py
+++ b/apps/api/plane/utils/core/dbrouters.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 """
 Database router for read replica selection.
 This router determines which database to use for read/write operations
diff --git a/apps/api/plane/utils/core/mixins/__init__.py b/apps/api/plane/utils/core/mixins/__init__.py
index cedd9d455..73fe2ccc9 100644
--- a/apps/api/plane/utils/core/mixins/__init__.py
+++ b/apps/api/plane/utils/core/mixins/__init__.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 """
 Core mixins for read replica functionality.
 This package provides mixins for different aspects of read replica management
diff --git a/apps/api/plane/utils/core/mixins/view.py b/apps/api/plane/utils/core/mixins/view.py
index e15ec6771..4d923e1c1 100644
--- a/apps/api/plane/utils/core/mixins/view.py
+++ b/apps/api/plane/utils/core/mixins/view.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 """
 Mixins for Django REST Framework views.
 """
diff --git a/apps/api/plane/utils/core/request_scope.py b/apps/api/plane/utils/core/request_scope.py
index b09e77101..b8b137120 100644
--- a/apps/api/plane/utils/core/request_scope.py
+++ b/apps/api/plane/utils/core/request_scope.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 """
 Database routing utilities for read replica selection.
 This module provides request-scoped context management for database routing,
diff --git a/apps/api/plane/utils/csv_utils.py b/apps/api/plane/utils/csv_utils.py
new file mode 100644
index 000000000..26c6e8937
--- /dev/null
+++ b/apps/api/plane/utils/csv_utils.py
@@ -0,0 +1,26 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
+# CSV utility functions for safe export
+# Characters that trigger formula evaluation in spreadsheet applications
+_CSV_FORMULA_TRIGGERS = frozenset(("=", "+", "-", "@", "\t", "\r", "\n"))
+
+
+def sanitize_csv_value(value):
+    """Sanitize a value for CSV export to prevent formula injection.
+
+    Prefixes string values starting with formula-triggering characters
+    with a single quote so spreadsheet applications treat them as text
+    instead of evaluating them as formulas.
+
+    See: https://owasp.org/www-community/attacks/CSV_Injection
+    """
+    if isinstance(value, str) and value and value[0] in _CSV_FORMULA_TRIGGERS:
+        return "'" + value
+    return value
+
+
+def sanitize_csv_row(row):
+    """Sanitize all values in a CSV row."""
+    return [sanitize_csv_value(v) for v in row]
diff --git a/apps/api/plane/utils/cycle_transfer_issues.py b/apps/api/plane/utils/cycle_transfer_issues.py
index ec934e889..796340138 100644
--- a/apps/api/plane/utils/cycle_transfer_issues.py
+++ b/apps/api/plane/utils/cycle_transfer_issues.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Python imports
 import json
 
@@ -51,9 +55,7 @@ def transfer_cycle_issues(
         dict: Response data with success or error message
     """
     # Get the new cycle
-    new_cycle = Cycle.objects.filter(
-        workspace__slug=slug, project_id=project_id, pk=new_cycle_id
-    ).first()
+    new_cycle = Cycle.objects.filter(workspace__slug=slug, project_id=project_id, pk=new_cycle_id).first()
 
     # Check if new cycle is already completed
     if new_cycle.end_date is not None and new_cycle.end_date < timezone.now():
@@ -216,9 +218,7 @@ def transfer_cycle_issues(
         assignee_estimate_distribution = [
             {
                 "display_name": item["display_name"],
-                "assignee_id": (
-                    str(item["assignee_id"]) if item["assignee_id"] else None
-                ),
+                "assignee_id": (str(item["assignee_id"]) if item["assignee_id"] else None),
                 "avatar_url": item.get("avatar_url"),
                 "total_estimates": item["total_estimates"],
                 "completed_estimates": item["completed_estimates"],
@@ -310,9 +310,7 @@ def transfer_cycle_issues(
             )
         )
         .values("display_name", "assignee_id", "avatar_url")
-        .annotate(
-            total_issues=Count("id", filter=Q(archived_at__isnull=True, is_draft=False))
-        )
+        .annotate(total_issues=Count("id", filter=Q(archived_at__isnull=True, is_draft=False)))
         .annotate(
             completed_issues=Count(
                 "id",
@@ -360,9 +358,7 @@ def transfer_cycle_issues(
         .annotate(color=F("labels__color"))
         .annotate(label_id=F("labels__id"))
         .values("label_name", "color", "label_id")
-        .annotate(
-            total_issues=Count("id", filter=Q(archived_at__isnull=True, is_draft=False))
-        )
+        .annotate(total_issues=Count("id", filter=Q(archived_at__isnull=True, is_draft=False)))
         .annotate(
             completed_issues=Count(
                 "id",
@@ -409,9 +405,7 @@ def transfer_cycle_issues(
     )
 
     # Get the current cycle and save progress snapshot
-    current_cycle = Cycle.objects.filter(
-        workspace__slug=slug, project_id=project_id, pk=cycle_id
-    ).first()
+    current_cycle = Cycle.objects.filter(workspace__slug=slug, project_id=project_id, pk=cycle_id).first()
 
     current_cycle.progress_snapshot = {
         "total_issues": old_cycle.total_issues,
@@ -461,9 +455,7 @@ def transfer_cycle_issues(
         )
 
     # Bulk update cycle issues
-    cycle_issues = CycleIssue.objects.bulk_update(
-        updated_cycles, ["cycle_id"], batch_size=100
-    )
+    cycle_issues = CycleIssue.objects.bulk_update(updated_cycles, ["cycle_id"], batch_size=100)
 
     # Capture Issue Activity
     issue_activity.delay(
diff --git a/apps/api/plane/utils/date_utils.py b/apps/api/plane/utils/date_utils.py
index f15e7f119..d25d5b1ec 100644
--- a/apps/api/plane/utils/date_utils.py
+++ b/apps/api/plane/utils/date_utils.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 from datetime import datetime, timedelta, date
 from django.utils import timezone
 from typing import Dict, Optional, List, Union, Tuple, Any
diff --git a/apps/api/plane/utils/email.py b/apps/api/plane/utils/email.py
new file mode 100644
index 000000000..f950e9451
--- /dev/null
+++ b/apps/api/plane/utils/email.py
@@ -0,0 +1,42 @@
+# SPDX-FileCopyrightText: 2023-present Plane Software, Inc.
+# SPDX-License-Identifier: LicenseRef-Plane-Commercial
+#
+# Licensed under the Plane Commercial License (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+# https://plane.so/legals/eula
+#
+# DO NOT remove or modify this notice.
+# NOTICE: Proprietary and confidential. Unauthorized use or distribution is prohibited.
+
+# Python imports
+import re
+
+# Django imports
+from django.utils.html import strip_tags
+
+
+def generate_plain_text_from_html(html_content):
+    """
+    Generate clean plain text from HTML email template.
+    Removes all HTML tags, CSS styles, and excessive whitespace.
+
+    Args:
+        html_content (str): The HTML content to convert to plain text
+
+    Returns:
+        str: Clean plain text without HTML tags, styles, or excessive whitespace
+    """
+    # Remove style tags and their content
+    html_content = re.sub(r"<style[^>]*>.*?</style>", "", html_content, flags=re.DOTALL | re.IGNORECASE)
+
+    # Strip HTML tags
+    text_content = strip_tags(html_content)
+
+    # Remove excessive empty lines
+    text_content = re.sub(r"\n\s*\n\s*\n+", "\n\n", text_content)
+
+    # Ensure there's a leading and trailing whitespace
+    text_content = "\n\n" + text_content.lstrip().rstrip() + "\n\n"
+
+    return text_content
diff --git a/apps/api/plane/utils/error_codes.py b/apps/api/plane/utils/error_codes.py
index 15d38f6bf..571f9d368 100644
--- a/apps/api/plane/utils/error_codes.py
+++ b/apps/api/plane/utils/error_codes.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 ERROR_CODES = {
     # issues
     "INVALID_ARCHIVE_STATE_GROUP": 4091,
diff --git a/apps/api/plane/utils/exception_logger.py b/apps/api/plane/utils/exception_logger.py
index b0a6f8c38..657afeb5c 100644
--- a/apps/api/plane/utils/exception_logger.py
+++ b/apps/api/plane/utils/exception_logger.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Python imports
 import logging
 import traceback
diff --git a/apps/api/plane/utils/exporters/__init__.py b/apps/api/plane/utils/exporters/__init__.py
index 9e7b1a9d5..632452a31 100644
--- a/apps/api/plane/utils/exporters/__init__.py
+++ b/apps/api/plane/utils/exporters/__init__.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 """Export utilities for various data formats."""
 
 from .exporter import Exporter
diff --git a/apps/api/plane/utils/exporters/exporter.py b/apps/api/plane/utils/exporters/exporter.py
index 75b396cb4..ff4df46c7 100644
--- a/apps/api/plane/utils/exporters/exporter.py
+++ b/apps/api/plane/utils/exporters/exporter.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 from typing import Any, Dict, List, Type, Union
 
 from django.db.models import QuerySet
diff --git a/apps/api/plane/utils/exporters/formatters.py b/apps/api/plane/utils/exporters/formatters.py
index fc7c23528..611a60fca 100644
--- a/apps/api/plane/utils/exporters/formatters.py
+++ b/apps/api/plane/utils/exporters/formatters.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 import csv
 import io
 import json
@@ -5,6 +9,9 @@ from typing import Any, Dict, List, Type
 
 from openpyxl import Workbook
 
+# Module imports
+from plane.utils.csv_utils import sanitize_csv_row
+
 
 class BaseFormatter:
     """Base class for export formatters."""
@@ -80,7 +87,7 @@ class CSVFormatter(BaseFormatter):
         buf = io.StringIO()
         writer = csv.writer(buf, delimiter=",", quoting=csv.QUOTE_ALL)
         for row in data:
-            writer.writerow(row)
+            writer.writerow(sanitize_csv_row(row))
         buf.seek(0)
         return buf.getvalue()
 
diff --git a/apps/api/plane/utils/exporters/schemas/__init__.py b/apps/api/plane/utils/exporters/schemas/__init__.py
index 98b2623ae..e792b3c6f 100644
--- a/apps/api/plane/utils/exporters/schemas/__init__.py
+++ b/apps/api/plane/utils/exporters/schemas/__init__.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 """Export schemas for various data types."""
 
 from .base import (
diff --git a/apps/api/plane/utils/exporters/schemas/base.py b/apps/api/plane/utils/exporters/schemas/base.py
index 4e67c6980..eacee3741 100644
--- a/apps/api/plane/utils/exporters/schemas/base.py
+++ b/apps/api/plane/utils/exporters/schemas/base.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 from dataclasses import dataclass, field
 from typing import Any, Dict, List, Optional
 
diff --git a/apps/api/plane/utils/exporters/schemas/issue.py b/apps/api/plane/utils/exporters/schemas/issue.py
index 744e33052..a3bda90b7 100644
--- a/apps/api/plane/utils/exporters/schemas/issue.py
+++ b/apps/api/plane/utils/exporters/schemas/issue.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 from collections import defaultdict
 from typing import Any, Dict, List, Optional
 
diff --git a/apps/api/plane/utils/filters/__init__.py b/apps/api/plane/utils/filters/__init__.py
index 76a96c82c..cdcf8ac6e 100644
--- a/apps/api/plane/utils/filters/__init__.py
+++ b/apps/api/plane/utils/filters/__init__.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Filters module for handling complex filtering operations
 
 # Import all utilities from base modules
diff --git a/apps/api/plane/utils/filters/converters.py b/apps/api/plane/utils/filters/converters.py
index f7693b40e..4d37c2b0b 100644
--- a/apps/api/plane/utils/filters/converters.py
+++ b/apps/api/plane/utils/filters/converters.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 import re
 import uuid
 from datetime import datetime
diff --git a/apps/api/plane/utils/filters/filter_backend.py b/apps/api/plane/utils/filters/filter_backend.py
index 11ed48f71..c21560f70 100644
--- a/apps/api/plane/utils/filters/filter_backend.py
+++ b/apps/api/plane/utils/filters/filter_backend.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Python imports
 import json
 
diff --git a/apps/api/plane/utils/filters/filter_migrations.py b/apps/api/plane/utils/filters/filter_migrations.py
index 3e424b6e6..555793dc2 100644
--- a/apps/api/plane/utils/filters/filter_migrations.py
+++ b/apps/api/plane/utils/filters/filter_migrations.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 """
 Utilities for migrating legacy filters to rich filters format.
 
diff --git a/apps/api/plane/utils/filters/filterset.py b/apps/api/plane/utils/filters/filterset.py
index 0099b83d0..721bf4c7a 100644
--- a/apps/api/plane/utils/filters/filterset.py
+++ b/apps/api/plane/utils/filters/filterset.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 import copy
 
 from django.db import models
diff --git a/apps/api/plane/utils/global_paginator.py b/apps/api/plane/utils/global_paginator.py
index 1b7f908c5..e9b68ba76 100644
--- a/apps/api/plane/utils/global_paginator.py
+++ b/apps/api/plane/utils/global_paginator.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # python imports
 from math import ceil
 
diff --git a/apps/api/plane/utils/grouper.py b/apps/api/plane/utils/grouper.py
index 1ec004e95..ab0087967 100644
--- a/apps/api/plane/utils/grouper.py
+++ b/apps/api/plane/utils/grouper.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Django imports
 from django.contrib.postgres.aggregates import ArrayAgg
 from django.contrib.postgres.fields import ArrayField
diff --git a/apps/api/plane/utils/host.py b/apps/api/plane/utils/host.py
index 860e19e0e..dafd19179 100644
--- a/apps/api/plane/utils/host.py
+++ b/apps/api/plane/utils/host.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Django imports
 from django.conf import settings
 from django.core.exceptions import ImproperlyConfigured
diff --git a/apps/api/plane/utils/html_processor.py b/apps/api/plane/utils/html_processor.py
index 18d103b64..a26f6fe13 100644
--- a/apps/api/plane/utils/html_processor.py
+++ b/apps/api/plane/utils/html_processor.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 from io import StringIO
 from html.parser import HTMLParser
 
diff --git a/apps/api/plane/utils/imports.py b/apps/api/plane/utils/imports.py
index 81de0203b..af86c31e7 100644
--- a/apps/api/plane/utils/imports.py
+++ b/apps/api/plane/utils/imports.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 import pkgutil
 import six
 
diff --git a/apps/api/plane/utils/instance_config_variables/__init__.py b/apps/api/plane/utils/instance_config_variables/__init__.py
index 6818ca9bf..09882ae11 100644
--- a/apps/api/plane/utils/instance_config_variables/__init__.py
+++ b/apps/api/plane/utils/instance_config_variables/__init__.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 from .core import core_config_variables
 from .extended import extended_config_variables
 
diff --git a/apps/api/plane/utils/instance_config_variables/core.py b/apps/api/plane/utils/instance_config_variables/core.py
index cf8d8d41f..274c6539a 100644
--- a/apps/api/plane/utils/instance_config_variables/core.py
+++ b/apps/api/plane/utils/instance_config_variables/core.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Python imports
 import os
 
@@ -44,6 +48,12 @@ google_config_variables = [
         "category": "GOOGLE",
         "is_encrypted": True,
     },
+    {
+        "key": "ENABLE_GOOGLE_SYNC",
+        "value": os.environ.get("ENABLE_GOOGLE_SYNC", "0"),
+        "category": "GOOGLE",
+        "is_encrypted": False,
+    },
 ]
 
 github_config_variables = [
@@ -65,6 +75,12 @@ github_config_variables = [
         "category": "GITHUB",
         "is_encrypted": False,
     },
+    {
+        "key": "ENABLE_GITHUB_SYNC",
+        "value": os.environ.get("ENABLE_GITHUB_SYNC", "0"),
+        "category": "GITHUB",
+        "is_encrypted": False,
+    },
 ]
 
 
@@ -87,6 +103,12 @@ gitlab_config_variables = [
         "category": "GITLAB",
         "is_encrypted": True,
     },
+    {
+        "key": "ENABLE_GITLAB_SYNC",
+        "value": os.environ.get("ENABLE_GITLAB_SYNC", "0"),
+        "category": "GITLAB",
+        "is_encrypted": False,
+    },
 ]
 
 gitea_config_variables = [
@@ -114,6 +136,12 @@ gitea_config_variables = [
         "category": "GITEA",
         "is_encrypted": True,
     },
+    {
+        "key": "ENABLE_GITEA_SYNC",
+        "value": os.environ.get("ENABLE_GITEA_SYNC", "0"),
+        "category": "GITEA",
+        "is_encrypted": False,
+    },
 ]
 
 smtp_config_variables = [
diff --git a/apps/api/plane/utils/instance_config_variables/extended.py b/apps/api/plane/utils/instance_config_variables/extended.py
index 24c6fefda..cf267aca2 100644
--- a/apps/api/plane/utils/instance_config_variables/extended.py
+++ b/apps/api/plane/utils/instance_config_variables/extended.py
@@ -1 +1,5 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 extended_config_variables = []
diff --git a/apps/api/plane/utils/ip_address.py b/apps/api/plane/utils/ip_address.py
index 01789c431..3a0f171d7 100644
--- a/apps/api/plane/utils/ip_address.py
+++ b/apps/api/plane/utils/ip_address.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 def get_client_ip(request):
     x_forwarded_for = request.META.get("HTTP_X_FORWARDED_FOR")
     if x_forwarded_for:
diff --git a/apps/api/plane/utils/issue_filters.py b/apps/api/plane/utils/issue_filters.py
index 8d56bc389..ea31a529b 100644
--- a/apps/api/plane/utils/issue_filters.py
+++ b/apps/api/plane/utils/issue_filters.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 import re
 import uuid
 from datetime import timedelta
diff --git a/apps/api/plane/utils/issue_relation_mapper.py b/apps/api/plane/utils/issue_relation_mapper.py
index 19d65c111..ecce5a2d1 100644
--- a/apps/api/plane/utils/issue_relation_mapper.py
+++ b/apps/api/plane/utils/issue_relation_mapper.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 def get_inverse_relation(relation_type):
     relation_mapping = {
         "start_after": "start_before",
diff --git a/apps/api/plane/utils/issue_search.py b/apps/api/plane/utils/issue_search.py
index 1e7543d88..7e5fab8fe 100644
--- a/apps/api/plane/utils/issue_search.py
+++ b/apps/api/plane/utils/issue_search.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Python imports
 import re
 
diff --git a/apps/api/plane/utils/logging.py b/apps/api/plane/utils/logging.py
index 083132f16..61312448d 100644
--- a/apps/api/plane/utils/logging.py
+++ b/apps/api/plane/utils/logging.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 import logging.handlers as handlers
 import time
 
diff --git a/apps/api/plane/utils/markdown.py b/apps/api/plane/utils/markdown.py
index 188c54fec..643dd7788 100644
--- a/apps/api/plane/utils/markdown.py
+++ b/apps/api/plane/utils/markdown.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 import mistune
 
 markdown = mistune.Markdown()
diff --git a/apps/api/plane/utils/openapi/__init__.py b/apps/api/plane/utils/openapi/__init__.py
index b2c9ba6b0..090d076ec 100644
--- a/apps/api/plane/utils/openapi/__init__.py
+++ b/apps/api/plane/utils/openapi/__init__.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 """
 OpenAPI utilities for drf-spectacular integration.
 
@@ -43,6 +47,7 @@ from .parameters import (
     CYCLE_VIEW_PARAMETER,
     FIELDS_PARAMETER,
     EXPAND_PARAMETER,
+    ESTIMATE_ID_PARAMETER,
 )
 
 # Responses
@@ -122,6 +127,10 @@ from .examples import (
     STATE_UPDATE_EXAMPLE,
     INTAKE_ISSUE_CREATE_EXAMPLE,
     INTAKE_ISSUE_UPDATE_EXAMPLE,
+    ESTIMATE_CREATE_EXAMPLE,
+    ESTIMATE_UPDATE_EXAMPLE,
+    ESTIMATE_POINT_CREATE_EXAMPLE,
+    ESTIMATE_POINT_UPDATE_EXAMPLE,
     # Response Examples
     CYCLE_EXAMPLE,
     TRANSFER_CYCLE_ISSUE_SUCCESS_EXAMPLE,
@@ -141,6 +150,8 @@ from .examples import (
     PROJECT_MEMBER_EXAMPLE,
     CYCLE_ISSUE_EXAMPLE,
     STICKY_EXAMPLE,
+    ESTIMATE_EXAMPLE,
+    ESTIMATE_POINT_EXAMPLE,
 )
 
 # Helper decorators
@@ -153,6 +164,7 @@ from .decorators import (
     user_docs,
     cycle_docs,
     work_item_docs,
+    work_item_relation_docs,
     label_docs,
     issue_link_docs,
     issue_comment_docs,
@@ -161,6 +173,8 @@ from .decorators import (
     module_docs,
     module_issue_docs,
     state_docs,
+    estimate_docs,
+    estimate_point_docs,
 )
 
 # Schema processing hooks
@@ -202,6 +216,7 @@ __all__ = [
     "CYCLE_VIEW_PARAMETER",
     "FIELDS_PARAMETER",
     "EXPAND_PARAMETER",
+    "ESTIMATE_ID_PARAMETER",
     # Responses
     "UNAUTHORIZED_RESPONSE",
     "FORBIDDEN_RESPONSE",
@@ -275,6 +290,10 @@ __all__ = [
     "STATE_UPDATE_EXAMPLE",
     "INTAKE_ISSUE_CREATE_EXAMPLE",
     "INTAKE_ISSUE_UPDATE_EXAMPLE",
+    "ESTIMATE_CREATE_EXAMPLE",
+    "ESTIMATE_UPDATE_EXAMPLE",
+    "ESTIMATE_POINT_CREATE_EXAMPLE",
+    "ESTIMATE_POINT_UPDATE_EXAMPLE",
     # Response Examples
     "CYCLE_EXAMPLE",
     "TRANSFER_CYCLE_ISSUE_SUCCESS_EXAMPLE",
@@ -294,6 +313,8 @@ __all__ = [
     "PROJECT_MEMBER_EXAMPLE",
     "CYCLE_ISSUE_EXAMPLE",
     "STICKY_EXAMPLE",
+    "ESTIMATE_EXAMPLE",
+    "ESTIMATE_POINT_EXAMPLE",
     # Decorators
     "workspace_docs",
     "project_docs",
@@ -303,6 +324,7 @@ __all__ = [
     "user_docs",
     "cycle_docs",
     "work_item_docs",
+    "work_item_relation_docs",
     "label_docs",
     "issue_link_docs",
     "issue_comment_docs",
@@ -311,6 +333,8 @@ __all__ = [
     "module_docs",
     "module_issue_docs",
     "state_docs",
+    "estimate_docs",
+    "estimate_point_docs",
     # Hooks
     "preprocess_filter_api_v1_paths",
     "generate_operation_summary",
diff --git a/apps/api/plane/utils/openapi/auth.py b/apps/api/plane/utils/openapi/auth.py
index 9434956fe..6f7459ea2 100644
--- a/apps/api/plane/utils/openapi/auth.py
+++ b/apps/api/plane/utils/openapi/auth.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 """
 OpenAPI authentication extensions for drf-spectacular.
 
diff --git a/apps/api/plane/utils/openapi/decorators.py b/apps/api/plane/utils/openapi/decorators.py
index c1ba9612e..7ded9fb10 100644
--- a/apps/api/plane/utils/openapi/decorators.py
+++ b/apps/api/plane/utils/openapi/decorators.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 """
 Helper decorators for drf-spectacular OpenAPI documentation.
 
@@ -219,6 +223,21 @@ def issue_attachment_docs(**kwargs):
     return extend_schema(**_merge_schema_options(defaults, kwargs))
 
 
+def work_item_relation_docs(**kwargs):
+    """Decorator for work item relation endpoints"""
+    defaults = {
+        "tags": ["Work Item Relations"],
+        "parameters": [WORKSPACE_SLUG_PARAMETER, PROJECT_ID_PARAMETER],
+        "responses": {
+            401: UNAUTHORIZED_RESPONSE,
+            403: FORBIDDEN_RESPONSE,
+            404: NOT_FOUND_RESPONSE,
+        },
+    }
+
+    return extend_schema(**_merge_schema_options(defaults, kwargs))
+
+
 def module_docs(**kwargs):
     """Decorator for module management endpoints"""
     defaults = {
@@ -263,6 +282,7 @@ def state_docs(**kwargs):
 
     return extend_schema(**_merge_schema_options(defaults, kwargs))
 
+
 def sticky_docs(**kwargs):
     """Decorator for sticky management endpoints"""
     defaults = {
@@ -276,4 +296,30 @@ def sticky_docs(**kwargs):
         },
     }
 
+    return extend_schema(**_merge_schema_options(defaults, kwargs))
+
+def estimate_docs(**kwargs):
+    """Decorator for estimate-related endpoints"""
+    defaults = {
+        "tags": ["Estimates"],
+        "parameters": [WORKSPACE_SLUG_PARAMETER, PROJECT_ID_PARAMETER],
+        "responses": {
+            401: UNAUTHORIZED_RESPONSE,
+            403: FORBIDDEN_RESPONSE,
+            404: NOT_FOUND_RESPONSE,
+        },
+    }
+    return extend_schema(**_merge_schema_options(defaults, kwargs))
+
+def estimate_point_docs(**kwargs):
+    """Decorator for estimate point-related endpoints"""
+    defaults = {
+        "tags": ["Estimate Points"],
+        "parameters": [WORKSPACE_SLUG_PARAMETER, PROJECT_ID_PARAMETER],
+        "responses": {
+            401: UNAUTHORIZED_RESPONSE,
+            403: FORBIDDEN_RESPONSE,
+            404: NOT_FOUND_RESPONSE,
+        },
+    }
     return extend_schema(**_merge_schema_options(defaults, kwargs))
\ No newline at end of file
diff --git a/apps/api/plane/utils/openapi/examples.py b/apps/api/plane/utils/openapi/examples.py
index f41bdddbc..20aff1895 100644
--- a/apps/api/plane/utils/openapi/examples.py
+++ b/apps/api/plane/utils/openapi/examples.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 """
 Common OpenAPI examples for drf-spectacular.
 
@@ -682,6 +686,69 @@ STICKY_EXAMPLE = OpenApiExample(
     },
 )
 
+# Estimate Examples
+ESTIMATE_EXAMPLE = OpenApiExample(
+    name="Estimate",
+    value={
+        "id": "550e8400-e29b-41d4-a716-446655440000",
+        "name": "Estimate 1",
+        "description": "Estimate 1 description",
+    },
+    description="Example response for an estimate",
+)
+
+ESTIMATE_POINT_EXAMPLE = OpenApiExample(
+    name="EstimatePoint",
+    value={
+        "id": "550e8400-e29b-41d4-a716-446655440000",
+        "estimate": "550e8400-e29b-41d4-a716-446655440001",
+        "key": 1,
+        "value": "1",
+    },
+    description="Example response for an estimate point",
+)
+ESTIMATE_CREATE_EXAMPLE = OpenApiExample(
+    name="EstimateCreateSerializer",
+    value={
+        "name": "Estimate 1",
+        "description": "Estimate 1 description",
+    },
+    description="Example request for creating an estimate",
+)
+ESTIMATE_UPDATE_EXAMPLE = OpenApiExample(
+    name="EstimateUpdateSerializer",
+    value={
+        "name": "Estimate 1",
+        "description": "Estimate 1 description",
+    },
+    description="Example request for updating an estimate",
+)
+
+# Estimate Point Examples
+ESTIMATE_POINT_CREATE_EXAMPLE = OpenApiExample(
+    name="EstimatePointCreateSerializer",
+    value=[
+        {
+            "value": "1",
+            "description": "Estimate Point 1 description",
+        },
+        {
+            "value": "2",
+            "description": "Estimate Point 2 description",
+        },
+    ],
+    description="Example request for creating an estimate point",
+)
+ESTIMATE_POINT_UPDATE_EXAMPLE = OpenApiExample(
+    name="EstimatePointUpdateSerializer",
+    value={
+        "value": "1",
+        "description": "Estimate Point 1 description",
+    },
+    description="Example request for updating an estimate point",
+)
+
+
 # Sample data for different entity types
 SAMPLE_ISSUE = {
     "id": "550e8400-e29b-41d4-a716-446655440000",
@@ -797,6 +864,24 @@ SAMPLE_STICKY = {
     "created_at": "2024-01-01T10:30:00Z",
 }
 
+SAMPLE_ESTIMATE = {
+    "id": "550e8400-e29b-41d4-a716-446655440000",
+    "name": "Estimate 1",
+    "description": "Estimate 1 description",
+    "type": "categories",
+    "last_used": False,
+    "created_at": "2024-01-01T10:30:00Z",
+}
+
+SAMPLE_ESTIMATE_POINT = {
+    "id": "550e8400-e29b-41d4-a716-446655440000",
+    "estimate": "550e8400-e29b-41d4-a716-446655440001",
+    "key": 1,
+    "value": "1",
+    "description": "Estimate Point 1 description",
+    "created_at": "2024-01-01T10:30:00Z",
+}
+
 # Mapping of schema types to sample data
 SCHEMA_EXAMPLES = {
     "Issue": SAMPLE_ISSUE,
@@ -812,6 +897,8 @@ SCHEMA_EXAMPLES = {
     "Intake": SAMPLE_INTAKE,
     "CycleIssue": SAMPLE_CYCLE_ISSUE,
     "Sticky": SAMPLE_STICKY,
+    "Estimate": SAMPLE_ESTIMATE,
+    "EstimatePoint": SAMPLE_ESTIMATE_POINT,
 }
 
 
diff --git a/apps/api/plane/utils/openapi/hooks.py b/apps/api/plane/utils/openapi/hooks.py
index f136324c0..20319285b 100644
--- a/apps/api/plane/utils/openapi/hooks.py
+++ b/apps/api/plane/utils/openapi/hooks.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 """
 Schema processing hooks for drf-spectacular OpenAPI generation.
 
diff --git a/apps/api/plane/utils/openapi/parameters.py b/apps/api/plane/utils/openapi/parameters.py
index 47db747ac..2812892ec 100644
--- a/apps/api/plane/utils/openapi/parameters.py
+++ b/apps/api/plane/utils/openapi/parameters.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 """
 Common OpenAPI parameters for drf-spectacular.
 
@@ -491,3 +495,11 @@ EXPAND_PARAMETER = OpenApiParameter(
         ),
     ],
 )
+
+ESTIMATE_ID_PARAMETER = OpenApiParameter(
+    name="estimate_id",
+    description="Estimate ID",
+    required=True,
+    type=OpenApiTypes.UUID,
+    location=OpenApiParameter.PATH,
+)
diff --git a/apps/api/plane/utils/openapi/responses.py b/apps/api/plane/utils/openapi/responses.py
index 2a569e377..cb0f81dce 100644
--- a/apps/api/plane/utils/openapi/responses.py
+++ b/apps/api/plane/utils/openapi/responses.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 """
 Common OpenAPI responses for drf-spectacular.
 
diff --git a/apps/api/plane/utils/order_queryset.py b/apps/api/plane/utils/order_queryset.py
index 167cd0693..abc0bbca0 100644
--- a/apps/api/plane/utils/order_queryset.py
+++ b/apps/api/plane/utils/order_queryset.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 from django.db.models import Case, CharField, Min, Value, When
 
 # Custom ordering for priority and state
diff --git a/apps/api/plane/utils/paginator.py b/apps/api/plane/utils/paginator.py
index f3a794756..5ae4d3815 100644
--- a/apps/api/plane/utils/paginator.py
+++ b/apps/api/plane/utils/paginator.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Python imports
 import math
 from collections import defaultdict
diff --git a/apps/api/plane/utils/path_validator.py b/apps/api/plane/utils/path_validator.py
index ede3f1161..f15fb4ca9 100644
--- a/apps/api/plane/utils/path_validator.py
+++ b/apps/api/plane/utils/path_validator.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Django imports
 from django.utils.http import url_has_allowed_host_and_scheme
 from django.conf import settings
diff --git a/apps/api/plane/utils/permissions/__init__.py b/apps/api/plane/utils/permissions/__init__.py
index 849f7ba3e..22d27694e 100644
--- a/apps/api/plane/utils/permissions/__init__.py
+++ b/apps/api/plane/utils/permissions/__init__.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 from .workspace import (
     WorkSpaceBasePermission,
     WorkspaceOwnerPermission,
diff --git a/apps/api/plane/utils/permissions/base.py b/apps/api/plane/utils/permissions/base.py
index a2b1a18ff..7b243cbb7 100644
--- a/apps/api/plane/utils/permissions/base.py
+++ b/apps/api/plane/utils/permissions/base.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 from plane.db.models import WorkspaceMember, ProjectMember
 from functools import wraps
 from rest_framework.response import Response
diff --git a/apps/api/plane/utils/permissions/page.py b/apps/api/plane/utils/permissions/page.py
index bea878f4c..844ff4daf 100644
--- a/apps/api/plane/utils/permissions/page.py
+++ b/apps/api/plane/utils/permissions/page.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 from plane.db.models import ProjectMember, Page
 from plane.app.permissions import ROLE
 
diff --git a/apps/api/plane/utils/permissions/project.py b/apps/api/plane/utils/permissions/project.py
index a8c0f92a2..55550b27a 100644
--- a/apps/api/plane/utils/permissions/project.py
+++ b/apps/api/plane/utils/permissions/project.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Third Party imports
 from rest_framework.permissions import SAFE_METHODS, BasePermission
 
diff --git a/apps/api/plane/utils/permissions/workspace.py b/apps/api/plane/utils/permissions/workspace.py
index 8dc791c0c..ada16ec3b 100644
--- a/apps/api/plane/utils/permissions/workspace.py
+++ b/apps/api/plane/utils/permissions/workspace.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Third Party imports
 from rest_framework.permissions import BasePermission, SAFE_METHODS
 
diff --git a/apps/api/plane/utils/porters/__init__.py b/apps/api/plane/utils/porters/__init__.py
new file mode 100644
index 000000000..5e2cf79e8
--- /dev/null
+++ b/apps/api/plane/utils/porters/__init__.py
@@ -0,0 +1,19 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
+from .formatters import BaseFormatter, CSVFormatter, JSONFormatter, XLSXFormatter
+from .exporter import DataExporter
+from .serializers import IssueExportSerializer
+
+__all__ = [
+    # Formatters
+    "BaseFormatter",
+    "CSVFormatter",
+    "JSONFormatter",
+    "XLSXFormatter",
+    # Exporters
+    "DataExporter",
+    # Export Serializers
+    "IssueExportSerializer",
+]
diff --git a/apps/api/plane/utils/porters/exporter.py b/apps/api/plane/utils/porters/exporter.py
new file mode 100644
index 000000000..394a2bb0f
--- /dev/null
+++ b/apps/api/plane/utils/porters/exporter.py
@@ -0,0 +1,107 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
+from typing import Dict, List, Union
+from .formatters import BaseFormatter, CSVFormatter, JSONFormatter, XLSXFormatter
+
+
+class DataExporter:
+    """
+    Export data using DRF serializers with built-in format support.
+
+    Usage:
+        # New simplified interface
+        exporter = DataExporter(BookSerializer, format_type='csv')
+        filename, content = exporter.export('books_export', queryset)
+
+        # Legacy interface (still supported)
+        exporter = DataExporter(BookSerializer)
+        csv_string = exporter.to_string(queryset, CSVFormatter())
+    """
+
+    # Available formatters
+    FORMATTERS = {
+        "csv": CSVFormatter,
+        "json": JSONFormatter,
+        "xlsx": XLSXFormatter,
+    }
+
+    def __init__(self, serializer_class, format_type: str = None, **serializer_kwargs):
+        """
+        Initialize exporter with serializer and optional format type.
+
+        Args:
+            serializer_class: DRF serializer class to use for data serialization
+            format_type: Optional format type (csv, json, xlsx). If provided, enables export() method.
+            **serializer_kwargs: Additional kwargs to pass to serializer
+        """
+        self.serializer_class = serializer_class
+        self.serializer_kwargs = serializer_kwargs
+        self.format_type = format_type
+        self.formatter = None
+
+        if format_type:
+            if format_type not in self.FORMATTERS:
+                raise ValueError(f"Unsupported format: {format_type}. Available: {list(self.FORMATTERS.keys())}")
+            # Create formatter with default options
+            self.formatter = self._create_formatter(format_type)
+
+    def _create_formatter(self, format_type: str) -> BaseFormatter:
+        """Create formatter instance with appropriate options."""
+        formatter_class = self.FORMATTERS[format_type]
+
+        # Apply format-specific options
+        if format_type == "xlsx":
+            return formatter_class(list_joiner=", ")
+        else:
+            return formatter_class()
+
+    def serialize(self, queryset) -> List[Dict]:
+        """QuerySet → list of dicts"""
+        serializer = self.serializer_class(
+            queryset,
+            many=True,
+            **self.serializer_kwargs
+        )
+        return serializer.data
+
+    def export(self, filename: str, queryset) -> tuple[str, Union[str, bytes]]:
+        """
+        Export queryset to file with configured format.
+
+        Args:
+            filename: Base filename (without extension)
+            queryset: Django QuerySet to export
+
+        Returns:
+            Tuple of (filename_with_extension, content)
+
+        Raises:
+            ValueError: If format_type was not provided during initialization
+        """
+        if not self.formatter:
+            raise ValueError("format_type must be provided during initialization to use export() method")
+
+        data = self.serialize(queryset)
+        content = self.formatter.encode(data)
+        full_filename = f"{filename}.{self.formatter.extension}"
+
+        return full_filename, content
+
+    def to_string(self, queryset, formatter: BaseFormatter) -> Union[str, bytes]:
+        """Export to formatted string (legacy interface)"""
+        data = self.serialize(queryset)
+        return formatter.encode(data)
+
+    def to_file(self, queryset, filepath: str, formatter: BaseFormatter) -> str:
+        """Export to file (legacy interface)"""
+        content = self.to_string(queryset, formatter)
+        with open(filepath, 'w', encoding='utf-8') as f:
+            f.write(content)
+        return filepath
+
+    @classmethod
+    def get_available_formats(cls) -> List[str]:
+        """Get list of available export formats."""
+        return list(cls.FORMATTERS.keys())
diff --git a/apps/api/plane/utils/porters/formatters.py b/apps/api/plane/utils/porters/formatters.py
new file mode 100644
index 000000000..461a6a5e4
--- /dev/null
+++ b/apps/api/plane/utils/porters/formatters.py
@@ -0,0 +1,274 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
+"""
+Import/Export System with Pluggable Formatters
+
+Exporter: QuerySet → Serializer → Formatter → File/String
+Importer: File/String → Formatter → Serializer → Models
+"""
+
+import csv
+import json
+from abc import ABC, abstractmethod
+from io import BytesIO, StringIO
+from typing import Any, Dict, List, Union
+
+from openpyxl import Workbook, load_workbook
+
+
+# Module imports
+from plane.utils.csv_utils import sanitize_csv_row, sanitize_csv_value
+
+
+class BaseFormatter(ABC):
+    @abstractmethod
+    def encode(self, data: List[Dict]) -> Union[str, bytes]:
+        """Data → formatted string/bytes"""
+        pass
+
+    @abstractmethod
+    def decode(self, content: Union[str, bytes]) -> List[Dict]:
+        """Formatted string/bytes → data"""
+        pass
+
+    @property
+    @abstractmethod
+    def extension(self) -> str:
+        pass
+
+
+class JSONFormatter(BaseFormatter):
+    def __init__(self, indent: int = 2):
+        self.indent = indent
+
+    def encode(self, data: List[Dict]) -> str:
+        return json.dumps(data, indent=self.indent, default=str)
+
+    def decode(self, content: str) -> List[Dict]:
+        return json.loads(content)
+
+    @property
+    def extension(self) -> str:
+        return "json"
+
+
+class CSVFormatter(BaseFormatter):
+    def __init__(self, flatten: bool = True, delimiter: str = ",", prettify_headers: bool = True):
+        """
+        Args:
+            flatten: Whether to flatten nested dicts.
+            delimiter: CSV delimiter character.
+            prettify_headers: If True, transforms 'created_by_name' → 'Created By Name'.
+        """
+        self.flatten = flatten
+        self.delimiter = delimiter
+        self.prettify_headers = prettify_headers
+
+    def _prettify_header(self, header: str) -> str:
+        """Transform 'created_by_name' → 'Created By Name'"""
+        return header.replace("_", " ").title()
+
+    def _normalize_header(self, header: str) -> str:
+        """Transform 'Display Name' → 'display_name' (reverse of prettify)"""
+        return header.strip().lower().replace(" ", "_")
+
+    def _flatten(self, row: Dict, parent_key: str = "") -> Dict:
+        items = {}
+        for key, value in row.items():
+            new_key = f"{parent_key}__{key}" if parent_key else key
+            if isinstance(value, dict):
+                items.update(self._flatten(value, new_key))
+            elif isinstance(value, list):
+                items[new_key] = json.dumps(value)
+            else:
+                items[new_key] = value
+        return items
+
+    def _unflatten(self, row: Dict) -> Dict:
+        result = {}
+        for key, value in row.items():
+            parts = key.split("__")
+            current = result
+            for part in parts[:-1]:
+                current = current.setdefault(part, {})
+
+            if isinstance(value, str):
+                try:
+                    parsed = json.loads(value)
+                    if isinstance(parsed, (list, dict)):
+                        value = parsed
+                except (json.JSONDecodeError, TypeError):
+                    pass
+
+            current[parts[-1]] = value
+        return result
+
+    def encode(self, data: List[Dict]) -> str:
+        if not data:
+            return ""
+
+        if self.flatten:
+            data = [self._flatten(row) for row in data]
+
+        # Collect all unique field names in order
+        fieldnames = []
+        for row in data:
+            for key in row.keys():
+                if key not in fieldnames:
+                    fieldnames.append(key)
+
+        output = StringIO()
+
+        if self.prettify_headers:
+            # Create header mapping: original_key → Pretty Header
+            header_map = {key: self._prettify_header(key) for key in fieldnames}
+            pretty_headers = [header_map[key] for key in fieldnames]
+
+            # Write pretty headers manually, then write data rows
+            writer = csv.writer(output, delimiter=self.delimiter)
+            writer.writerow(pretty_headers)
+
+            # Write data rows in the same field order
+            for row in data:
+                writer.writerow(sanitize_csv_row([row.get(key, "") for key in fieldnames]))
+        else:
+            writer = csv.DictWriter(output, fieldnames=fieldnames, delimiter=self.delimiter)
+            writer.writeheader()
+            for row in data:
+                writer.writerow({k: sanitize_csv_value(row.get(k, "")) for k in fieldnames})
+
+        return output.getvalue()
+
+    def decode(self, content: str, normalize_headers: bool = True) -> List[Dict]:
+        """
+        Decode CSV content to list of dicts.
+
+        Args:
+            content: CSV string
+            normalize_headers: If True, converts 'Display Name' → 'display_name'
+        """
+        rows = list(csv.DictReader(StringIO(content), delimiter=self.delimiter))
+
+        # Normalize headers: 'Email' → 'email', 'Display Name' → 'display_name'
+        if normalize_headers:
+            rows = [{self._normalize_header(k): v for k, v in row.items()} for row in rows]
+
+        if self.flatten:
+            rows = [self._unflatten(row) for row in rows]
+
+        return rows
+
+    @property
+    def extension(self) -> str:
+        return "csv"
+
+
+class XLSXFormatter(BaseFormatter):
+    """Formatter for XLSX (Excel) files using openpyxl."""
+
+    def __init__(self, prettify_headers: bool = True, list_joiner: str = ", "):
+        """
+        Args:
+            prettify_headers: If True, transforms 'created_by_name' → 'Created By Name'.
+            list_joiner: String to join list values (default: ", ").
+        """
+        self.prettify_headers = prettify_headers
+        self.list_joiner = list_joiner
+
+    def _prettify_header(self, header: str) -> str:
+        """Transform 'created_by_name' → 'Created By Name'"""
+        return header.replace("_", " ").title()
+
+    def _normalize_header(self, header: str) -> str:
+        """Transform 'Display Name' → 'display_name' (reverse of prettify)"""
+        return header.strip().lower().replace(" ", "_")
+
+    def _format_value(self, value: Any) -> Any:
+        """Format a value for XLSX cell."""
+        if value is None:
+            return ""
+        if isinstance(value, list):
+            return self.list_joiner.join(str(v) for v in value)
+        if isinstance(value, dict):
+            return json.dumps(value)
+        return value
+
+    def encode(self, data: List[Dict]) -> bytes:
+        """Encode data to XLSX bytes."""
+        wb = Workbook()
+        ws = wb.active
+
+        if not data:
+            # Return empty workbook
+            output = BytesIO()
+            wb.save(output)
+            output.seek(0)
+            return output.getvalue()
+
+        # Collect all unique field names in order
+        fieldnames = []
+        for row in data:
+            for key in row.keys():
+                if key not in fieldnames:
+                    fieldnames.append(key)
+
+        # Write header row
+        if self.prettify_headers:
+            headers = [self._prettify_header(key) for key in fieldnames]
+        else:
+            headers = fieldnames
+        ws.append(headers)
+
+        # Write data rows
+        for row in data:
+            ws.append([self._format_value(row.get(key, "")) for key in fieldnames])
+
+        output = BytesIO()
+        wb.save(output)
+        output.seek(0)
+        return output.getvalue()
+
+    def decode(self, content: bytes, normalize_headers: bool = True) -> List[Dict]:
+        """
+        Decode XLSX bytes to list of dicts.
+
+        Args:
+            content: XLSX file bytes
+            normalize_headers: If True, converts 'Display Name' → 'display_name'
+        """
+        wb = load_workbook(filename=BytesIO(content), read_only=True, data_only=True)
+        ws = wb.active
+
+        rows = list(ws.iter_rows(values_only=True))
+        if not rows:
+            return []
+
+        # First row is headers
+        headers = list(rows[0])
+        if normalize_headers:
+            headers = [self._normalize_header(str(h)) if h else "" for h in headers]
+
+        # Convert remaining rows to dicts
+        result = []
+        for row in rows[1:]:
+            row_dict = {}
+            for i, value in enumerate(row):
+                if i < len(headers) and headers[i]:
+                    # Try to parse JSON strings back to lists/dicts
+                    if isinstance(value, str):
+                        try:
+                            parsed = json.loads(value)
+                            if isinstance(parsed, (list, dict)):
+                                value = parsed
+                        except (json.JSONDecodeError, TypeError):
+                            pass
+                    row_dict[headers[i]] = value
+            result.append(row_dict)
+
+        return result
+
+    @property
+    def extension(self) -> str:
+        return "xlsx"
diff --git a/apps/api/plane/utils/porters/serializers/__init__.py b/apps/api/plane/utils/porters/serializers/__init__.py
new file mode 100644
index 000000000..e4e4bb762
--- /dev/null
+++ b/apps/api/plane/utils/porters/serializers/__init__.py
@@ -0,0 +1,10 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
+from .issue import IssueExportSerializer
+
+__all__ = [
+    # Export Serializers
+    "IssueExportSerializer",
+]
diff --git a/apps/api/plane/utils/porters/serializers/issue.py b/apps/api/plane/utils/porters/serializers/issue.py
new file mode 100644
index 000000000..31be812cc
--- /dev/null
+++ b/apps/api/plane/utils/porters/serializers/issue.py
@@ -0,0 +1,145 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
+# Third party imports
+from rest_framework import serializers
+
+# Module imports
+from plane.app.serializers import IssueSerializer
+
+
+class IssueExportSerializer(IssueSerializer):
+    """
+    Export-optimized serializer that extends IssueSerializer with human-readable fields.
+
+    Converts UUIDs to readable values for CSV/JSON export.
+    """
+
+    identifier = serializers.SerializerMethodField()
+    project_name = serializers.CharField(source='project.name', read_only=True, default="")
+    project_identifier = serializers.CharField(source='project.identifier', read_only=True, default="")
+    state_name = serializers.CharField(source='state.name', read_only=True, default="")
+    created_by_name = serializers.CharField(source='created_by.full_name', read_only=True, default="")
+
+    assignees = serializers.SerializerMethodField()
+    parent = serializers.SerializerMethodField()
+    labels = serializers.SerializerMethodField()
+    cycles = serializers.SerializerMethodField()
+    modules = serializers.SerializerMethodField()
+    comments = serializers.SerializerMethodField()
+    estimate = serializers.SerializerMethodField()
+    links = serializers.SerializerMethodField()
+    relations = serializers.SerializerMethodField()
+    subscribers = serializers.SerializerMethodField()
+
+    class Meta(IssueSerializer.Meta):
+        fields = [
+            "project_name",
+            "project_identifier",
+            "parent",
+            "identifier",
+            "sequence_id",
+            "name",
+            "state_name",
+            "priority",
+            "assignees",
+            "subscribers",
+            "created_by_name",
+            "start_date",
+            "target_date",
+            "completed_at",
+            "created_at",
+            "updated_at",
+            "archived_at",
+            "estimate",
+            "labels",
+            "cycles",
+            "modules",
+            "links",
+            "relations",
+            "comments",
+            "sub_issues_count",
+            "link_count",
+            "attachment_count",
+            "is_draft",
+        ]
+
+    def get_identifier(self, obj):
+        return f"{obj.project.identifier}-{obj.sequence_id}"
+
+    def get_assignees(self, obj):
+        return [u.full_name for u in obj.assignees.all() if u.is_active]
+
+    def get_subscribers(self, obj):
+        """Return list of subscriber names."""
+        return [sub.subscriber.full_name for sub in obj.issue_subscribers.all() if sub.subscriber]
+
+    def get_parent(self, obj):
+        if not obj.parent:
+            return ""
+        return f"{obj.parent.project.identifier}-{obj.parent.sequence_id}"
+
+    def get_labels(self, obj):
+        return [
+            il.label.name
+            for il in obj.label_issue.all()
+            if il.deleted_at is None
+        ]
+
+    def get_cycles(self, obj):
+        return [ic.cycle.name for ic in obj.issue_cycle.all()]
+
+    def get_modules(self, obj):
+        return [im.module.name for im in obj.issue_module.all()]
+
+    def get_estimate(self, obj):
+        """Return estimate point value."""
+        if obj.estimate_point:
+            return obj.estimate_point.value if hasattr(obj.estimate_point, 'value') else str(obj.estimate_point)
+        return ""
+
+    def get_links(self, obj):
+        """Return list of issue links with titles."""
+        return [
+            {
+                "url": link.url,
+                "title": link.title if link.title else link.url,
+            }
+            for link in obj.issue_link.all()
+        ]
+
+    def get_relations(self, obj):
+        """Return list of related issues."""
+        relations = []
+
+        # Outgoing relations (this issue relates to others)
+        for rel in obj.issue_relation.all():
+            if rel.related_issue:
+                relations.append({
+                    "type": rel.relation_type if hasattr(rel, 'relation_type') else "related",
+                    "issue": f"{rel.related_issue.project.identifier}-{rel.related_issue.sequence_id}",
+                    "direction": "outgoing"
+                })
+
+        # Incoming relations (other issues relate to this one)
+        for rel in obj.issue_related.all():
+            if rel.issue:
+                relations.append({
+                    "type": rel.relation_type if hasattr(rel, 'relation_type') else "related",
+                    "issue": f"{rel.issue.project.identifier}-{rel.issue.sequence_id}",
+                    "direction": "incoming"
+                })
+
+        return relations
+
+    def get_comments(self, obj):
+        """Return list of comments with author and timestamp."""
+        return [
+            {
+                "comment": comment.comment_stripped if hasattr(comment, 'comment_stripped') else comment.comment_html,
+                "created_by": comment.actor.full_name if comment.actor else "",
+                "created_at": comment.created_at.strftime("%Y-%m-%d %H:%M:%S") if comment.created_at else "",
+            }
+            for comment in obj.issue_comments.all()
+        ]
diff --git a/apps/api/plane/utils/telemetry.py b/apps/api/plane/utils/telemetry.py
index bec3d240d..e3646eaba 100644
--- a/apps/api/plane/utils/telemetry.py
+++ b/apps/api/plane/utils/telemetry.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Python imports
 import os
 import atexit
diff --git a/apps/api/plane/utils/timezone_converter.py b/apps/api/plane/utils/timezone_converter.py
index 9a66742ed..81aa3692d 100644
--- a/apps/api/plane/utils/timezone_converter.py
+++ b/apps/api/plane/utils/timezone_converter.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Python imports
 import pytz
 from datetime import datetime, time
diff --git a/apps/api/plane/utils/url.py b/apps/api/plane/utils/url.py
index 773608bd3..8381d65f9 100644
--- a/apps/api/plane/utils/url.py
+++ b/apps/api/plane/utils/url.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Python imports
 import re
 from typing import Optional
diff --git a/apps/api/plane/utils/uuid.py b/apps/api/plane/utils/uuid.py
index 03f695fdb..2d95d5906 100644
--- a/apps/api/plane/utils/uuid.py
+++ b/apps/api/plane/utils/uuid.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 # Python imports
 import uuid
 import hashlib
diff --git a/apps/api/plane/web/__init__.py b/apps/api/plane/web/__init__.py
index e69de29bb..917e26db4 100644
--- a/apps/api/plane/web/__init__.py
+++ b/apps/api/plane/web/__init__.py
@@ -0,0 +1,4 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
diff --git a/apps/api/plane/web/apps.py b/apps/api/plane/web/apps.py
index a5861f9b5..1193cd6ae 100644
--- a/apps/api/plane/web/apps.py
+++ b/apps/api/plane/web/apps.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 from django.apps import AppConfig
 
 
diff --git a/apps/api/plane/web/urls.py b/apps/api/plane/web/urls.py
index 28734ad91..fe1f8951a 100644
--- a/apps/api/plane/web/urls.py
+++ b/apps/api/plane/web/urls.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 from django.urls import path
 from plane.web.views import robots_txt, health_check
 
diff --git a/apps/api/plane/web/views.py b/apps/api/plane/web/views.py
index 8acb70a77..c2c42710e 100644
--- a/apps/api/plane/web/views.py
+++ b/apps/api/plane/web/views.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 from django.http import HttpResponse, JsonResponse
 
 
diff --git a/apps/api/plane/wsgi.py b/apps/api/plane/wsgi.py
index b3051f9ff..4c8a79163 100644
--- a/apps/api/plane/wsgi.py
+++ b/apps/api/plane/wsgi.py
@@ -1,3 +1,7 @@
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 """
 WSGI config for plane project.
 
diff --git a/apps/api/requirements/base.txt b/apps/api/requirements/base.txt
index b0ffb54e8..865590cb2 100644
--- a/apps/api/requirements/base.txt
+++ b/apps/api/requirements/base.txt
@@ -1,7 +1,7 @@
 # base requirements
 
 # django
-Django==4.2.28
+Django==4.2.29
 # rest framework
 djangorestframework==3.15.2
 # postgres
@@ -21,7 +21,7 @@ celery==5.4.0
 django_celery_beat==2.6.0
 django-celery-results==2.5.1
 # file serve
-whitenoise==6.6.0
+whitenoise==6.11.0
 # fake data
 faker==25.0.0
 # filters
@@ -45,13 +45,13 @@ scout-apm==3.1.0
 # xlsx generation
 openpyxl==3.1.2
 # logging
-python-json-logger==3.3.0
+python-json-logger==4.0.0
 # html parser
 beautifulsoup4==4.12.3
 # analytics
 posthog==3.5.0
 # crypto
-cryptography==46.0.5
+cryptography==46.0.6
 # html validator
 lxml==6.0.0
 # s3
@@ -61,7 +61,7 @@ zxcvbn==4.4.28
 # timezone
 pytz==2024.1
 # jwt
-PyJWT==2.8.0
+PyJWT==2.12.0
 # OpenTelemetry
 opentelemetry-api==1.28.1
 opentelemetry-sdk==1.28.1
diff --git a/apps/api/requirements/test.txt b/apps/api/requirements/test.txt
index 66a1ff163..c31497535 100644
--- a/apps/api/requirements/test.txt
+++ b/apps/api/requirements/test.txt
@@ -1,6 +1,6 @@
 -r base.txt
 # test framework
-pytest==7.4.0
+pytest==9.0.2
 pytest-django==4.5.2
 pytest-cov==4.1.0
 pytest-xdist==3.3.1
@@ -9,4 +9,4 @@ factory-boy==3.3.0
 freezegun==1.2.2
 coverage==7.2.7
 httpx==0.24.1
-requests==2.32.4
\ No newline at end of file
+requests==2.33.0
\ No newline at end of file
diff --git a/apps/api/run_tests.py b/apps/api/run_tests.py
index b92f9fe5b..886e8a041 100755
--- a/apps/api/run_tests.py
+++ b/apps/api/run_tests.py
@@ -1,4 +1,8 @@
 #!/usr/bin/env python
+# Copyright (c) 2023-present Plane Software, Inc. and contributors
+# SPDX-License-Identifier: AGPL-3.0-only
+# See the LICENSE file for details.
+
 import argparse
 import subprocess
 import sys
diff --git a/apps/api/templates/emails/auth/forgot_password.html b/apps/api/templates/emails/auth/forgot_password.html
index f673c1e63..29c9b4663 100644
--- a/apps/api/templates/emails/auth/forgot_password.html
+++ b/apps/api/templates/emails/auth/forgot_password.html
@@ -1,330 +1,306 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
-<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" >
+<!DOCTYPE html>
+<html lang="en">
   <head>
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="format-detection" content="telephone=no" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Set a new password to your Plane account</title>
-    <style type="text/css" emogrify="no"> #outlook a { padding: 0; } .ExternalClass { width: 100%; } .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div { line-height: 100%; } table td { border-collapse: collapse; mso-line-height-rule: exactly; } .editable.image { font-size: 0 !important; line-height: 0 !important; } .nl2go_preheader { display: none !important; mso-hide: all !important; mso-line-height-rule: exactly; visibility: hidden !important; line-height: 0px !important; font-size: 0px !important; } body { width: 100% !important; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; margin: 0; padding: 0; } img { outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; } a img { border: none; } table { border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; } th { font-weight: normal; text-align: left; } *[class="gmail-fix"] { display: none !important; } </style>
-    <style type="text/css" emogrify="no"> @media (max-width: 600px) { .gmx-killpill { content: " \03D1"; } } </style>
-    <style type="text/css" emogrify="no"> @media (max-width: 600px) { .gmx-killpill { content: " \03D1"; } .r0-o { border-style: solid !important; margin: 0 auto 0 auto !important; width: 320px !important; } .r1-i { background-color: #ffffff !important; } .r2-c { box-sizing: border-box !important; text-align: center !important; valign: top !important; width: 100% !important; } .r3-o { border-style: solid !important; margin: 0 auto 0 auto !important; width: 100% !important; } .r4-i { padding-bottom: 20px !important; padding-left: 15px !important; padding-right: 15px !important; padding-top: 20px !important; } .r5-c { box-sizing: border-box !important; display: block !important; valign: top !important; width: 100% !important; } .r6-o { border-style: solid !important; width: 100% !important; } .r7-i { padding-left: 0px !important; padding-right: 0px !important; } .r8-c { box-sizing: border-box !important; text-align: left !important; valign: top !important; width: 100% !important; } .r9-o { border-style: solid !important; margin: 0 auto 0 0 !important; width: 100% !important; } .r10-i { padding-bottom: 10px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 10px !important; } .r11-i { padding-bottom: 15px !important; padding-top: 15px !important; text-align: left !important; } .r12-i { background-color: #ffffff !important; padding-bottom: 15px !important; padding-top: 15px !important; text-align: left !important; } .r13-c { box-sizing: border-box !important; padding: 0 !important; text-align: center !important; valign: top !important; width: 100% !important; } .r14-o { border-style: solid !important; margin: 0 auto 0 auto !important; margin-bottom: 15px !important; margin-top: 15px !important; width: 100% !important; } .r15-i { padding: 0 !important; text-align: center !important; } .r16-r { background-color: #006399 !important; border-radius: 4px !important; border-width: 0px !important; box-sizing: border-box; height: initial !important; padding: 0 !important; padding-bottom: 12px !important; padding-top: 12px !important; text-align: center !important; width: 100% !important; } .r17-i { padding-bottom: 0px !important; padding-left: 15px !important; padding-right: 15px !important; padding-top: 0px !important; } .r18-c { box-sizing: border-box !important; text-align: center !important; width: 100% !important; } .r19-i { padding-bottom: 5px !important; padding-top: 5px !important; } .r20-i { padding-bottom: 15px !important; padding-left: 15px !important; padding-right: 15px !important; padding-top: 15px !important; } .r21-o { border-bottom-color: #efefef !important; border-bottom-width: 2px !important; border-left-color: #efefef !important; border-left-width: 2px !important; border-right-color: #efefef !important; border-right-width: 2px !important; border-style: solid !important; border-top-color: #efefef !important; border-top-width: 2px !important; margin: 0 auto 0 0 !important; width: 100% !important; } .r22-i { padding-bottom: 5px !important; padding-left: 5px !important; padding-right: 5px !important; padding-top: 5px !important; text-align: left !important; } .r23-i { padding-bottom: 5px !important; padding-left: 15px !important; padding-right: 15px !important; padding-top: 5px !important; } .r24-c { box-sizing: border-box !important; width: 100% !important; } .r25-i { font-size: 0px !important; padding-bottom: 10px !important; padding-left: 65px !important; padding-right: 65px !important; padding-top: 10px !important; } .r26-c { box-sizing: border-box !important; width: 32px !important; } .r27-o { border-style: solid !important; margin-right: 8px !important; width: 32px !important; } .r28-o { border-style: solid !important; margin-right: 0px !important; width: 32px !important; } .r29-i { padding-bottom: 0px !important; padding-top: 5px !important; text-align: center !important; } body { -webkit-text-size-adjust: none; } .nl2go-responsive-hide { display: none; } .nl2go-body-table { min-width: unset !important; } .mobshow { height: auto !important; overflow: visible !important; max-height: unset !important; visibility: visible !important; border: none !important; } .resp-table { display: inline-table !important; } .magic-resp { display: table-cell !important; } } </style>
-    <style type="text/css"> p, h1, h2, h3, h4, ol, ul { margin: 0; } a, a:link { color: #006399; text-decoration: underline; } .nl2go-default-textstyle { color: #3b3f44; font-family: georgia, serif; font-size: 16px; line-height: 1.5; word-break: break-word; } .default-button { color: #ffffff; font-family: georgia, serif; font-size: 16px; font-style: normal; font-weight: normal; line-height: 1.15; text-decoration: none; word-break: break-word; } .default-heading1 { color: #1f2d3d; font-family: arial, helvetica, sans-serif; font-size: 36px; word-break: break-word; } .default-heading2 { color: #1f2d3d; font-family: arial, helvetica, sans-serif; font-size: 32px; word-break: break-word; } .default-heading3 { color: #1f2d3d; font-family: arial, helvetica, sans-serif; font-size: 24px; word-break: break-word; } .default-heading4 { color: #1f2d3d; font-family: arial, helvetica, sans-serif; font-size: 18px; word-break: break-word; } a[x-apple-data-detectors] { color: inherit !important; text-decoration: inherit !important; font-size: inherit !important; font-family: inherit !important; font-weight: inherit !important; line-height: inherit !important; } .no-show-for-you { border: none; display: none; float: none; font-size: 0; height: 0; line-height: 0; max-height: 0; mso-hide: all; overflow: hidden; table-layout: fixed; visibility: hidden; width: 0; } </style>
-    <!--[if mso ]>
-    <xml>
-      <o:OfficeDocumentSettings>
-        <o:AllowPNG />
-        <o:PixelsPerInch>96</o:PixelsPerInch>
-      </o:OfficeDocumentSettings>
-    </xml>
-    <! [endif]--> 
-    <style type="text/css"> a:link { color: #006399; text-decoration: underline; } </style>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <title>Reset your Plane password</title>
+
+    <style>
+      /* Basic resets for email clients */
+      body,
+      table,
+      td,
+      p {
+        margin: 0;
+        padding: 0;
+      }
+
+      img {
+        border: 0;
+        line-height: 100%;
+        text-decoration: none;
+        -ms-interpolation-mode: bicubic;
+      }
+
+      table {
+        border-collapse: collapse;
+      }
+
+      /* Mobile adjustments */
+      @media only screen and (max-width: 600px) {
+        .email-container {
+          width: 100% !important;
+        }
+
+        .email-content {
+          padding: 24px 20px !important;
+        }
+
+        .email-footer {
+          padding: 0 20px 16px 20px !important;
+        }
+      }
+    </style>
   </head>
-  <body bgcolor="#ffffff" text="#3b3f44" link="#006399" yahoo="fix" style="background-color: #ffffff" >
-    <table cellspacing="0" cellpadding="0" border="0" role="presentation" class="nl2go-body-table" width="100%" style="background-color: #ffffff; width: 100%" >
-      <tr>
-        <td>
-          <table cellspacing="0" cellpadding="0" border="0" role="presentation" width="600" align="center" class="r0-o" style="table-layout: fixed; width: 600px" >
-            <tr>
-              <td valign="top" class="r1-i" style="background-color: #ffffff">
-                <table cellspacing="0" cellpadding="0" border="0" role="presentation" width="100%" align="center" class="r3-o" style="table-layout: fixed; width: 100%" >
-                  <tr>
-                    <td class="r4-i" style="padding-bottom: 20px; padding-top: 20px" >
-                      <table width="100%" cellspacing="0" cellpadding="0" border="0" role="presentation" >
-                        <tr>
-                          <th width="100%" valign="top" class="r5-c" style="font-weight: normal" >
-                            <table cellspacing="0" cellpadding="0" border="0" role="presentation" width="100%" class="r6-o" style="table-layout: fixed; width: 100%" >
-                              <tr>
-                                <td valign="top" class="r7-i" style=" padding-left: 10px; padding-right: 10px; " >
-                                  <table width="100%" cellspacing="0" cellpadding="0" border="0" role="presentation" >
-                                    <tr>
-                                      <td class="r8-c" align="left">
-                                        <table cellspacing="0" cellpadding="0" border="0" role="presentation" width="150" class="r9-o" style=" table-layout: fixed; width: 150px; " >
-                                          <tr>
-                                            <td style=" font-size: 0px; line-height: 0px; " > <img src="https://media.docs.plane.so/logo/new-logo-white.png" width="150" border="0" style=" display: block; width: 100%; " /> </td>
-                                          </tr>
-                                        </table>
-                                      </td>
-                                    </tr>
-                                  </table>
-                                </td>
-                              </tr>
-                            </table>
-                          </th>
-                        </tr>
-                      </table>
-                    </td>
-                  </tr>
-                </table>
-                <table cellspacing="0" cellpadding="0" border="0" role="presentation" width="100%" align="center" class="r3-o" style="table-layout: fixed; width: 100%" >
-                  <tr>
-                    <td class="r10-i" style="padding-bottom: 10px; padding-top: 10px" >
-                      <table width="100%" cellspacing="0" cellpadding="0" border="0" role="presentation" >
-                        <tr>
-                          <th width="100%" valign="top" class="r5-c" style="font-weight: normal" >
-                            <table cellspacing="0" cellpadding="0" border="0" role="presentation" width="100%" class="r6-o" style="table-layout: fixed; width: 100%" >
-                              <tr>
-                                <td valign="top" class="r7-i" style=" padding-left: 15px; padding-right: 15px; " >
-                                  <table width="100%" cellspacing="0" cellpadding="0" border="0" role="presentation" >
-                                    <tr>
-                                      <td class="r8-c" align="left">
-                                        <table cellspacing="0" cellpadding="0" border="0" role="presentation" width="100%" class="r9-o" style=" table-layout: fixed; width: 100%; " >
-                                          <tr>
-                                            <td align="left" valign="top" class="r11-i nl2go-default-textstyle" style=" color: #3b3f44; font-family: georgia, serif; font-size: 16px; word-break: break-word; line-height: 1.5; padding-bottom: 15px; padding-top: 15px; text-align: left; " >
-                                              <div>
-                                                <p style="margin: 0"> <span style=" font-family: Arial, helvetica, sans-serif; font-size: 32px; " ><strong >Reset your Plane account's password</strong ></span > </p>
-                                              </div>
-                                            </td>
-                                          </tr>
-                                        </table>
-                                      </td>
-                                    </tr>
-                                    <tr>
-                                      <td class="r8-c" align="left">
-                                        <table cellspacing="0" cellpadding="0" border="0" role="presentation" width="100%" class="r9-o" style=" table-layout: fixed; width: 100%; " >
-                                          <tr>
-                                            <td align="left" valign="top" class="r12-i nl2go-default-textstyle" style=" color: #3b3f44; font-family: arial, helvetica, sans-serif; font-size: 16px; line-height: 1.5; word-break: break-word; background-color: #ffffff; padding-bottom: 15px; padding-top: 15px; text-align: left; " >
-                                              <div>
-                                                <p style="margin: 0"> <span style="font-size: 17px" >Someone, hopefully you, has requested a new password be set to your Plane account. If it was you, please click the button below to reset your password.</span > </p>
-                                              </div>
-                                            </td>
-                                          </tr>
-                                        </table>
-                                      </td>
-                                    </tr>
-                                    <tr>
-                                      <td class="r13-c" align="center" style=" align: center; padding-bottom: 15px; padding-top: 15px; valign: top; " >
-                                        <table cellspacing="0" cellpadding="0" border="0" role="presentation" width="285" class="r14-o" style=" background-color: #006399; border-collapse: separate; border-color: #006399; border-radius: 4px; border-style: solid; border-width: 0px; table-layout: fixed; width: 285px; " >
-                                          <tr>
-                                            <td height="18" align="center" valign="top" class="r15-i nl2go-default-textstyle" style=" word-break: break-word; background-color: #006399; border-radius: 4px; color: #ffffff; font-family: georgia, serif; font-size: 16px; font-style: normal; line-height: 1.15; padding-bottom: 12px; padding-top: 12px; text-align: center; " > <a href="{{forgot_password_url}}" class="r16-r default-button" target="_blank" data-btn="1" style=" font-style: normal; font-weight: normal; line-height: 1.15; text-decoration: none; word-break: break-word; word-wrap: break-word; display: block; -webkit-text-size-adjust: none; color: #ffffff; font-family: arial, helvetica, sans-serif; font-size: 16px; " > <span>Reset password</span></a > </td>
-                                          </tr>
-                                        </table>
-                                      </td>
-                                    </tr>
-                                    <tr>
-                                      <td class="r8-c" align="left">
-                                        <table cellspacing="0" cellpadding="0" border="0" role="presentation" width="100%" class="r9-o" style=" table-layout: fixed; width: 100%; " >
-                                          <tr>
-                                            <td align="left" valign="top" class="r11-i nl2go-default-textstyle" style=" color: #3b3f44; font-family: arial, helvetica, sans-serif; font-size: 16px; line-height: 1.5; word-break: break-word; padding-bottom: 15px; padding-top: 15px; text-align: left; " >
-                                              <div>
-                                                <p style="margin: 0"> <span style="font-size: 17px" >Ignore this if you didn't ask for a new link.</span > </p>
-                                              </div>
-                                            </td>
-                                          </tr>
-                                        </table>
-                                      </td>
-                                    </tr>
-                                  </table>
-                                </td>
-                              </tr>
-                            </table>
-                          </th>
-                        </tr>
-                      </table>
-                    </td>
-                  </tr>
-                </table>
-                <table cellspacing="0" cellpadding="0" border="0" role="presentation" width="100%" align="center" class="r3-o" style="table-layout: fixed; width: 100%" >
-                  <tr>
-                    <td class="r17-i">
-                      <table width="100%" cellspacing="0" cellpadding="0" border="0" role="presentation" >
-                        <tr>
-                          <th width="100%" valign="top" class="r5-c" style="font-weight: normal" >
-                            <table cellspacing="0" cellpadding="0" border="0" role="presentation" width="100%" class="r6-o" style="table-layout: fixed; width: 100%" >
-                              <tr>
-                                <td valign="top" class="r7-i" style=" padding-left: 15px; padding-right: 15px; " >
-                                  <table width="100%" cellspacing="0" cellpadding="0" border="0" role="presentation" >
-                                    <tr>
-                                      <td class="r18-c" align="center">
-                                        <table cellspacing="0" cellpadding="0" border="0" role="presentation" width="570" class="r3-o" style="table-layout: fixed" >
-                                          <tr>
-                                            <td class="r19-i" style=" padding-bottom: 5px; padding-top: 5px; height: 1px; " >
-                                              <table width="100%" cellspacing="0" cellpadding="0" border="0" role="presentation" >
-                                                <tr>
-                                                  <td>
-                                                    <table width="100%" cellspacing="0" cellpadding="0" border="0" role="presentation" valign="" class="r19-i" height="1" style=" border-top-style: solid; background-clip: border-box; border-top-color: #efefef; border-top-width: 1px; font-size: 1px; line-height: 1px; " >
-                                                      <tr>
-                                                        <td height="0" style=" font-size: 0px; line-height: 0px; " > ­ </td>
-                                                      </tr>
-                                                    </table>
-                                                  </td>
-                                                </tr>
-                                              </table>
-                                            </td>
-                                          </tr>
-                                        </table>
-                                      </td>
-                                    </tr>
-                                  </table>
-                                </td>
-                              </tr>
-                            </table>
-                          </th>
-                        </tr>
-                      </table>
-                    </td>
-                  </tr>
-                </table>
-                <table cellspacing="0" cellpadding="0" border="0" role="presentation" width="100%" align="center" class="r3-o" style="table-layout: fixed; width: 100%" >
-                  <tr>
-                    <td class="r20-i" style="padding-bottom: 15px; padding-top: 15px" >
-                      <table width="100%" cellspacing="0" cellpadding="0" border="0" role="presentation" >
-                        <tr>
-                          <th width="100%" valign="top" class="r5-c" style="font-weight: normal" >
-                            <table cellspacing="0" cellpadding="0" border="0" role="presentation" width="100%" class="r6-o" style="table-layout: fixed; width: 100%" >
-                              <tr>
-                                <td valign="top" class="r7-i" style=" padding-left: 15px; padding-right: 15px; " >
-                                  <table width="100%" cellspacing="0" cellpadding="0" border="0" role="presentation" >
-                                    <tr>
-                                      <td class="r8-c" align="left">
-                                        <table cellspacing="0" cellpadding="0" border="0" role="presentation" width="100%" class="r21-o" style=" table-layout: fixed; width: 100%; " >
-                                          <tr class="nl2go-responsive-hide">
-                                            <td height="2" width="2" style=" font-size: 2px; line-height: 2px; background-color: #efefef; " > ­ </td>
-                                            <td height="2" style=" font-size: 2px; line-height: 2px; background-color: #efefef; " > ­ </td>
-                                            <td height="2" width="2" style=" font-size: 2px; line-height: 2px; background-color: #efefef; " > ­ </td>
-                                          </tr>
-                                          <tr>
-                                            <td class="nl2go-responsive-hide" width="2" style=" font-size: 0px; line-height: 1px; background-color: #efefef; " > ­ </td>
-                                            <td align="left" valign="top" class="r22-i nl2go-default-textstyle" style=" color: #3b3f44; font-family: georgia, serif; font-size: 16px; word-break: break-word; line-height: 1.5; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; padding-top: 5px; text-align: left; " >
-                                              <div>
-                                                <p style="margin: 0"> <span style="font-size: 13px" >Despite our popularity, we are humbly early-stage. We are shipping fast, so please reach out to us with feature requests, major and minor nits, and anything else you find missing. We read every </span ><a href="https://discord.com/channels/1031547764020084846/1094927053867995176" title="Plane Support on Discod" target="_blank" style=" color: #006399; text-decoration: underline; " ><span style="font-size: 13px" >message</span ></a ><span style="font-size: 13px" >, </span ><a href="http://twitter.com/planepowers" title="@planepowers" target="_blank" style=" color: #006399; text-decoration: underline; " ><span style="font-size: 13px" >tweet</span ></a ><span style="font-size: 13px" >, and </span ><a href="https://github.com/makeplane/plane/issues" title="Plane's GitHub conversations" target="_blank" style=" color: #006399; text-decoration: underline; " ><span style="font-size: 13px" >conversation</span ></a ><span style="font-size: 13px" > and update </span ><a href="https://plane.sh/plane/0b170a1c-0e55-47cb-9307-ea49a05672b5?board=kanban" title="Plane's roadmap" target="_blank" style=" color: #006399; text-decoration: underline; " ><span style="font-size: 13px" >our public roadmap</span ></a ><span style="font-size: 13px" >.</span > </p>
-                                              </div>
-                                            </td>
-                                            <td class="nl2go-responsive-hide" width="2" style=" font-size: 0px; line-height: 1px; background-color: #efefef; " > ­ </td>
-                                          </tr>
-                                          <tr class="nl2go-responsive-hide">
-                                            <td height="2" width="2" style=" font-size: 2px; line-height: 2px; background-color: #efefef; " > ­ </td>
-                                            <td height="2" style=" font-size: 2px; line-height: 2px; background-color: #efefef; " > ­ </td>
-                                            <td height="2" width="2" style=" font-size: 2px; line-height: 2px; background-color: #efefef; " > ­ </td>
-                                          </tr>
-                                        </table>
-                                      </td>
-                                    </tr>
-                                  </table>
-                                </td>
-                              </tr>
-                            </table>
-                          </th>
-                        </tr>
-                      </table>
-                    </td>
-                  </tr>
-                </table>
-                <table cellspacing="0" cellpadding="0" border="0" role="presentation" width="100%" align="center" class="r3-o" style="table-layout: fixed; width: 100%" >
-                  <tr>
-                    <td class="r23-i" style="padding-bottom: 5px; padding-top: 5px" >
-                      <table width="100%" cellspacing="0" cellpadding="0" border="0" role="presentation" >
-                        <tr>
-                          <th width="100%" valign="top" class="r5-c" style="font-weight: normal" >
-                            <table cellspacing="0" cellpadding="0" border="0" role="presentation" width="100%" class="r6-o" style="table-layout: fixed; width: 100%" >
-                              <tr>
-                                <td valign="top" class="r7-i" style=" padding-left: 15px; padding-right: 15px; " >
-                                  <table width="100%" cellspacing="0" cellpadding="0" border="0" role="presentation" >
-                                    <tr>
-                                      <td class="r18-c" align="center">
-                                        <table cellspacing="0" cellpadding="0" border="0" role="presentation" width="570" align="center" class="r3-o" style=" table-layout: fixed; width: 570px; " >
-                                          <tr>
-                                            <td valign="top">
-                                              <table width="100%" cellspacing="0" cellpadding="0" border="0" role="presentation" >
-                                                <tr>
-                                                  <td class="r24-c" style=" display: inline-block; " >
-                                                    <table cellspacing="0" cellpadding="0" border="0" role="presentation" width="570" class="r6-o" style=" table-layout: fixed; width: 570px; " >
-                                                      <tr>
-                                                        <td class="r25-i" style=" padding-bottom: 10px; padding-left: 209px; padding-right: 209px; padding-top: 10px; " >
-                                                          <table width="100%" cellspacing="0" cellpadding="0" border="0" role="presentation" >
-                                                            <tr>
-                                                              <th width="40" class="r26-c mobshow resp-table" style=" font-weight: normal; " >
-                                                                <table cellspacing="0" cellpadding="0" border="0" role="presentation" width="100%" class="r27-o" style=" table-layout: fixed; width: 100%; " >
-                                                                  <tr>
-                                                                    <td class="r19-i" style=" font-size: 0px; line-height: 0px; padding-bottom: 5px; padding-top: 5px; " > <a href="https://github.com/makeplane" target="_blank" style=" color: #006399; text-decoration: underline; " > <img src="https://creative-assets.mailinblue.com/editor/social-icons/rounded_colored/github_32px.png" width="32" border="0" style=" display: block; width: 100%; " /></a> </td>
-                                                                    <td class="nl2go-responsive-hide" width="8" style=" font-size: 0px; line-height: 1px; " > ­ </td>
-                                                                  </tr>
-                                                                </table>
-                                                              </th>
-                                                              <th width="40" class="r26-c mobshow resp-table" style=" font-weight: normal; " >
-                                                                <table cellspacing="0" cellpadding="0" border="0" role="presentation" width="100%" class="r27-o" style=" table-layout: fixed; width: 100%; " >
-                                                                  <tr>
-                                                                    <td class="r19-i" style=" font-size: 0px; line-height: 0px; padding-bottom: 5px; padding-top: 5px; " > <a href="https://www.linkedin.com/company/planepowers/" target="_blank" style=" color: #006399; text-decoration: underline; " > <img src="https://creative-assets.mailinblue.com/editor/social-icons/rounded_colored/linkedin_32px.png" width="32" border="0" style=" display: block; width: 100%; " /></a> </td>
-                                                                    <td class="nl2go-responsive-hide" width="8" style=" font-size: 0px; line-height: 1px; " > ­ </td>
-                                                                  </tr>
-                                                                </table>
-                                                              </th>
-                                                              <th width="40" class="r26-c mobshow resp-table" style=" font-weight: normal; " >
-                                                                <table cellspacing="0" cellpadding="0" border="0" role="presentation" width="100%" class="r27-o" style=" table-layout: fixed; width: 100%; " >
-                                                                  <tr>
-                                                                    <td class="r19-i" style=" font-size: 0px; line-height: 0px; padding-bottom: 5px; padding-top: 5px; " > <a href="https://twitter.com/planepowers" target="_blank" style=" color: #006399; text-decoration: underline; " > <img src="https://creative-assets.mailinblue.com/editor/social-icons/rounded_colored/twitter_32px.png" width="32" border="0" style=" display: block; width: 100%; " /></a> </td>
-                                                                    <td class="nl2go-responsive-hide" width="8" style=" font-size: 0px; line-height: 1px; " > ­ </td>
-                                                                  </tr>
-                                                                </table>
-                                                              </th>
-                                                              <th width="32" class="r26-c mobshow resp-table" style=" font-weight: normal; " >
-                                                                <table cellspacing="0" cellpadding="0" border="0" role="presentation" width="100%" class="r28-o" style=" table-layout: fixed; width: 100%; " >
-                                                                  <tr>
-                                                                    <td class="r19-i" style=" font-size: 0px; line-height: 0px; padding-bottom: 5px; padding-top: 5px; " > <a href="https://plane.so/" target="_blank" style=" color: #006399; text-decoration: underline; " > <img src="https://creative-assets.mailinblue.com/editor/social-icons/rounded_colored/website_32px.png" width="32" border="0" style=" display: block; width: 100%; " /></a> </td>
-                                                                  </tr>
-                                                                </table>
-                                                              </th>
-                                                            </tr>
-                                                          </table>
-                                                        </td>
-                                                      </tr>
-                                                    </table>
-                                                  </td>
-                                                </tr>
-                                              </table>
-                                            </td>
-                                          </tr>
-                                        </table>
-                                      </td>
-                                    </tr>
-                                  </table>
-                                </td>
-                              </tr>
-                            </table>
-                          </th>
-                        </tr>
-                      </table>
-                    </td>
-                  </tr>
-                </table>
-                <table cellspacing="0" cellpadding="0" border="0" role="presentation" width="100%" align="center" class="r3-o" style="table-layout: fixed; width: 100%" >
-                  <tr>
-                    <td class="r23-i" style="padding-bottom: 5px; padding-top: 5px" >
-                      <table width="100%" cellspacing="0" cellpadding="0" border="0" role="presentation" >
-                        <tr>
-                          <th width="100%" valign="top" class="r5-c" style="font-weight: normal" >
-                            <table cellspacing="0" cellpadding="0" border="0" role="presentation" width="100%" class="r6-o" style="table-layout: fixed; width: 100%" >
-                              <tr>
-                                <td valign="top" class="r7-i" style=" padding-left: 15px; padding-right: 15px; " >
-                                  <table width="100%" cellspacing="0" cellpadding="0" border="0" role="presentation" >
-                                    <tr>
-                                      <td class="r8-c" align="left">
-                                        <table cellspacing="0" cellpadding="0" border="0" role="presentation" width="100%" class="r9-o" style=" table-layout: fixed; width: 100%; " >
-                                          <tr>
-                                            <td align="center" valign="top" class="r29-i nl2go-default-textstyle" style=" color: #3b3f44; font-family: georgia, serif; word-break: break-word; font-size: 18px; line-height: 1.5; padding-top: 5px; text-align: center; " >
-                                              <div>
-                                                <p style=" margin: 0; font-size: 14px; " > <span style="font-size: 12px" >This email was sent to {{email}}. Please delete if you aren't the intended recipient.</span > </p>
-                                              </div>
-                                            </td>
-                                          </tr>
-                                        </table>
-                                      </td>
-                                    </tr>
-                                  </table>
-                                </td>
-                              </tr>
-                            </table>
-                          </th>
-                        </tr>
-                      </table>
-                    </td>
-                  </tr>
-                </table>
-              </td>
-            </tr>
-          </table>
-        </td>
-      </tr>
-    </table>
+
+  <body
+    bgcolor="#f9f9f9"
+    style="
+      margin: 0;
+      padding: 0;
+      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
+        sans-serif;
+      font-weight: 400;
+      color: #474747;
+      -webkit-font-smoothing: antialiased;
+      -webkit-text-size-adjust: none;
+      background-color: #f9f9f9;
+    "
+  >
+    <!-- Preheader (hidden) -->
+    <span
+      class="preheader"
+      style="
+        display: none;
+        font-size: 1px;
+        color: transparent;
+        line-height: 1px;
+        max-height: 0;
+        max-width: 0;
+        opacity: 0;
+        overflow: hidden;
+        mso-hide: all;
+        visibility: hidden;
+      "
+    >
+      Reset your Plane password with this secure link.
+    </span>
+
+    <!-- Outer Wrapper -->
+    <center
+      class="email-body"
+      style="width: 100%; background-color: #f9f9f9; padding: 40px 0;"
+    >
+      <!-- HEADER -->
+      <table role="presentation" width="100%">
+        <tr>
+          <td></td>
+
+          <td
+            class="email-container"
+            width="620"
+            style="width: 620px; max-width: 620px; margin: 0 auto;"
+          >
+            <table
+              role="presentation"
+              width="100%"
+              style="background-color: #000000;"
+            >
+              <tr>
+                <td style="padding: 24px 40px; text-align: center;">
+                  <img
+                    src="https://media.docs.plane.so/logo/new-logo-dark.png"
+                    width="120"
+                    alt="Plane"
+                    style="height: auto; display: block; margin: 0 auto;"
+                  />
+                </td>
+              </tr>
+            </table>
+          </td>
+
+          <td></td>
+        </tr>
+      </table>
+
+      <!-- BODY (card under header) -->
+      <table role="presentation" width="100%">
+        <tr>
+          <td></td>
+
+          <td
+            class="email-container"
+            width="620"
+            style="width: 620px; max-width: 620px; margin: 0 auto;"
+          >
+            <table
+              role="presentation"
+              width="100%"
+              class="email-content"
+              style="background-color: #ffffff; padding: 32px 40px 32px 40px;"
+            >
+              <tr>
+                <td
+                  style="
+                    font-size: 16px;
+                    line-height: 1.5;
+                    color: #474747;
+                    padding: 24px;
+                  "
+                >
+                  <!-- ========================================= -->
+                  <!--        PLANE RESET PASSWORD EMAIL         -->
+                  <!-- ========================================= -->
+
+                  <!-- Heading -->
+                  <h1
+                    style="
+                      margin: 0 0 12px;
+                      font-size: 22px;
+                      line-height: 1.35;
+                      font-weight: 600;
+                      color: #111111;
+                    "
+                  >
+                    Reset your Plane password
+                  </h1>
+
+                  <!-- Intro copy -->
+                  <p style="margin: 0 0 16px;">
+                    We received a request to reset your Plane password. To reset
+                    your password, click the button below.
+                  </p>
+
+                  <!-- Primary button -->
+                  <table
+                    role="presentation"
+                    cellspacing="0"
+                    cellpadding="0"
+                    border="0"
+                    style="margin: 0 0 24px;"
+                  >
+                    <tr>
+                      <td>
+                        <a
+                          href="{{forgot_password_url}}"
+                          target="_blank"
+                          style="
+                            background-color: #1080bc;
+                            border-radius: 6px;
+                            color: #ffffff;
+                            padding: 12px 24px;
+                            text-align: center;
+                            text-decoration: none;
+                            display: inline-block;
+                            font-size: 16px;
+                            font-weight: 500;
+                            white-space: nowrap;
+                          "
+                        >
+                          Reset password
+                        </a>
+                      </td>
+                    </tr>
+                  </table>
+
+                  <!-- Fallback link -->
+                  <p
+                    style="
+                      margin: 0;
+                      font-size: 13px;
+                      line-height: 1.6;
+                      color: #5f5e5e;
+                    "
+                  >
+                    If the button doesn’t work, copy and paste this link into
+                    your browser:
+                  </p>
+
+                  <p
+                    style="
+                      margin: 6px 0 0;
+                      font-size: 13px;
+                      line-height: 1.6;
+                      color: #5f5e5e;
+                    "
+                  >
+                    <span
+                      style="
+                        display: inline-block;
+                        font-family: 'Courier New', Courier, monospace;
+                        font-size: 12px;
+                        background-color: #f3f3f3;
+                        padding: 4px 6px;
+                        border-radius: 3px;
+                        border: 1px solid #e9e9e9;
+                        word-break: break-all;
+                      "
+                      >{{forgot_password_url}}</span
+                    >
+                  </p>
+
+                  <!-- Note -->
+                  <p
+                    style="
+                      margin: 16px 0 0;
+                      font-size: 13px;
+                      line-height: 1.6;
+                      color: #5f5e5e;
+                    "
+                  >
+                    Note: This email was sent to
+                    <span
+                      style="
+                        font-family: 'Courier New', Courier, monospace;
+                        font-size: 12px;
+                        background-color: #f3f3f3;
+                        padding: 2px 4px;
+                        border-radius: 3px;
+                        border: 1px solid #e9e9e9;
+                      "
+                      >{{email}}</span
+                    >. If you weren’t expecting a password reset, you can safely
+                    ignore this email.
+                  </p>
+                </td>
+              </tr>
+            </table>
+          </td>
+
+          <td></td>
+        </tr>
+      </table>
+
+      <!-- FOOTER (simple, aligned with body) -->
+      <table role="presentation" width="100%">
+        <tr>
+          <td></td>
+
+          <td
+            class="email-container"
+            width="620"
+            style="width: 620px; max-width: 620px; margin: 0 auto;"
+          >
+            <table
+              role="presentation"
+              width="100%"
+              class="email-footer"
+              style="background-color: #ffffff; padding: 0 40px 16px 40px;"
+            >
+              <tr>
+                <td
+                  style="
+                    border-top: 1px solid #e9e9e9;
+                    padding: 24px;
+                    font-size: 12px;
+                    line-height: 1.6;
+                    color: #979797;
+                    text-align: left;
+                  "
+                >
+                  <p style="margin: 0;">
+                    Plane Software, Inc.
+                  </p>
+                </td>
+              </tr>
+            </table>
+          </td>
+
+          <td></td>
+        </tr>
+      </table>
+    </center>
+
+    <base target="_blank" />
   </body>
 </html>
\ No newline at end of file
diff --git a/apps/api/templates/emails/auth/magic_signin.html b/apps/api/templates/emails/auth/magic_signin.html
index c32b399fb..a52700fa2 100644
--- a/apps/api/templates/emails/auth/magic_signin.html
+++ b/apps/api/templates/emails/auth/magic_signin.html
@@ -1,288 +1,265 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
-<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" >
+<!DOCTYPE html>
+<html lang="en">
   <head>
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="format-detection" content="telephone=no" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Your unique Plane login code is code</title>
-    <style type="text/css" emogrify="no"> #outlook a { padding: 0; } .ExternalClass { width: 100%; } .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div { line-height: 100%; } table td { border-collapse: collapse; mso-line-height-rule: exactly; } .editable.image { font-size: 0 !important; line-height: 0 !important; } .nl2go_preheader { display: none !important; mso-hide: all !important; mso-line-height-rule: exactly; visibility: hidden !important; line-height: 0px !important; font-size: 0px !important; } body { width: 100% !important; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; margin: 0; padding: 0; } img { outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; } a img { border: none; } table { border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; } th { font-weight: normal; text-align: left; } *[class="gmail-fix"] { display: none !important; } </style>
-    <style type="text/css" emogrify="no"> @media (max-width: 600px) { .gmx-killpill { content: " \03D1"; } } </style>
-    <style type="text/css" emogrify="no"> @media (max-width: 600px) { .gmx-killpill { content: " \03D1"; } .r0-o { border-style: solid !important; margin: 0 auto 0 auto !important; width: 320px !important; } .r1-i { background-color: #ffffff !important; } .r2-c { box-sizing: border-box !important; text-align: center !important; valign: top !important; width: 100% !important; } .r3-o { border-style: solid !important; margin: 0 auto 0 auto !important; width: 100% !important; } .r4-i { padding-bottom: 20px !important; padding-left: 15px !important; padding-right: 15px !important; padding-top: 20px !important; } .r5-c { box-sizing: border-box !important; display: block !important; valign: top !important; width: 100% !important; } .r6-o { border-style: solid !important; width: 100% !important; } .r7-i { padding-left: 0px !important; padding-right: 0px !important; } .r8-c { box-sizing: border-box !important; text-align: left !important; valign: top !important; width: 100% !important; } .r9-o { border-style: solid !important; margin: 0 auto 0 0 !important; width: 100% !important; } .r10-i { padding-bottom: 15px !important; padding-left: 15px !important; padding-right: 15px !important; padding-top: 15px !important; } .r11-i { padding-bottom: 10px !important; padding-top: 10px !important; text-align: left !important; } .r12-i { padding-bottom: 10px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 10px !important; } .r13-o { border-bottom-color: #d9e4ff !important; border-bottom-width: 1px !important; border-left-color: #d9e4ff !important; border-left-width: 1px !important; border-right-color: #d9e4ff !important; border-right-width: 1px !important; border-style: solid !important; border-top-color: #d9e4ff !important; border-top-width: 1px !important; margin: 0 auto 0 0 !important; width: 100% !important; } .r14-i { background-color: #ecf1ff !important; padding-bottom: 10px !important; padding-left: 10px !important; padding-right: 10px !important; padding-top: 10px !important; text-align: left !important; } .r15-o { border-bottom-color: #efefef !important; border-bottom-width: 2px !important; border-left-color: #efefef !important; border-left-width: 2px !important; border-right-color: #efefef !important; border-right-width: 2px !important; border-style: solid !important; border-top-color: #efefef !important; border-top-width: 2px !important; margin: 0 auto 0 0 !important; width: 100% !important; } .r16-i { padding-bottom: 5px !important; padding-left: 5px !important; padding-right: 5px !important; padding-top: 5px !important; text-align: left !important; } .r17-i { padding-bottom: 5px !important; padding-left: 15px !important; padding-right: 15px !important; padding-top: 5px !important; } .r18-c { box-sizing: border-box !important; text-align: center !important; width: 100% !important; } .r19-c { box-sizing: border-box !important; width: 100% !important; } .r20-i { font-size: 0px !important; padding-bottom: 10px !important; padding-left: 65px !important; padding-right: 65px !important; padding-top: 10px !important; } .r21-c { box-sizing: border-box !important; width: 32px !important; } .r22-o { border-style: solid !important; margin-right: 8px !important; width: 32px !important; } .r23-i { padding-bottom: 5px !important; padding-top: 5px !important; } .r24-o { border-style: solid !important; margin-right: 0px !important; width: 32px !important; } .r25-i { padding-bottom: 0px !important; padding-top: 5px !important; text-align: center !important; } body { -webkit-text-size-adjust: none; } .nl2go-responsive-hide { display: none; } .nl2go-body-table { min-width: unset !important; } .mobshow { height: auto !important; overflow: visible !important; max-height: unset !important; visibility: visible !important; border: none !important; } .resp-table { display: inline-table !important; } .magic-resp { display: table-cell !important; } } </style>
-    <style type="text/css"> p, h1, h2, h3, h4, ol, ul { margin: 0; } a, a:link { color: #006399; text-decoration: underline; } .nl2go-default-textstyle { color: #3b3f44; font-family: georgia, serif; font-size: 16px; line-height: 1.5; word-break: break-word; } .default-button { color: #ffffff; font-family: georgia, serif; font-size: 16px; font-style: normal; font-weight: normal; line-height: 1.15; text-decoration: none; word-break: break-word; } .default-heading1 { color: #1f2d3d; font-family: arial, helvetica, sans-serif; font-size: 36px; word-break: break-word; } .default-heading2 { color: #1f2d3d; font-family: arial, helvetica, sans-serif; font-size: 32px; word-break: break-word; } .default-heading3 { color: #1f2d3d; font-family: arial, helvetica, sans-serif; font-size: 24px; word-break: break-word; } .default-heading4 { color: #1f2d3d; font-family: arial, helvetica, sans-serif; font-size: 18px; word-break: break-word; } a[x-apple-data-detectors] { color: inherit !important; text-decoration: inherit !important; font-size: inherit !important; font-family: inherit !important; font-weight: inherit !important; line-height: inherit !important; } .no-show-for-you { border: none; display: none; float: none; font-size: 0; height: 0; line-height: 0; max-height: 0; mso-hide: all; overflow: hidden; table-layout: fixed; visibility: hidden; width: 0; } </style>
-    <!--[if mso ]>
-    <xml>
-      <o:OfficeDocumentSettings>
-        <o:AllowPNG />
-        <o:PixelsPerInch>96</o:PixelsPerInch>
-      </o:OfficeDocumentSettings>
-    </xml>
-    <! [endif]--> 
-    <style type="text/css"> a:link { color: #006399; text-decoration: underline; } </style>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <title>Your Plane login code</title>
+
+    <style>
+      /* Basic resets for email clients */
+      body,
+      table,
+      td,
+      p {
+        margin: 0;
+        padding: 0;
+      }
+
+      img {
+        border: 0;
+        line-height: 100%;
+        text-decoration: none;
+        -ms-interpolation-mode: bicubic;
+      }
+
+      table {
+        border-collapse: collapse;
+      }
+
+      /* Mobile adjustments */
+      @media only screen and (max-width: 600px) {
+        .email-container {
+          width: 100% !important;
+        }
+
+        .email-content {
+          padding: 24px 20px !important;
+        }
+
+        .email-footer {
+          padding: 0 20px 16px 20px !important;
+        }
+      }
+    </style>
   </head>
-  <body bgcolor="#ffffff" text="#3b3f44" link="#006399" yahoo="fix" style="background-color: #ffffff" >
-    <table cellspacing="0" cellpadding="0" border="0" role="presentation" class="nl2go-body-table" width="100%" style="background-color: #ffffff; width: 100%" >
-      <tr>
-        <td>
-          <table cellspacing="0" cellpadding="0" border="0" role="presentation" width="600" align="center" class="r0-o" style="table-layout: fixed; width: 600px" >
-            <tr>
-              <td valign="top" class="r1-i" style="background-color: #ffffff">
-                <table cellspacing="0" cellpadding="0" border="0" role="presentation" width="100%" align="center" class="r3-o" style="table-layout: fixed; width: 100%" >
-                  <tr>
-                    <td class="r4-i" style="padding-bottom: 20px; padding-top: 20px" >
-                      <table width="100%" cellspacing="0" cellpadding="0" border="0" role="presentation" >
-                        <tr>
-                          <th width="100%" valign="top" class="r5-c" style="font-weight: normal" >
-                            <table cellspacing="0" cellpadding="0" border="0" role="presentation" width="100%" class="r6-o" style="table-layout: fixed; width: 100%" >
-                              <tr>
-                                <td valign="top" class="r7-i" style=" padding-left: 10px; padding-right: 10px; " >
-                                  <table width="100%" cellspacing="0" cellpadding="0" border="0" role="presentation" >
-                                    <tr>
-                                      <td class="r8-c" align="left">
-                                        <table cellspacing="0" cellpadding="0" border="0" role="presentation" width="150" class="r9-o" style=" table-layout: fixed; width: 150px; " >
-                                          <tr>
-                                            <td style=" font-size: 0px; line-height: 0px; " > <img src="https://media.docs.plane.so/logo/new-logo-white.png" width="150" border="0" style=" display: block; width: 100%; " /> </td>
-                                          </tr>
-                                        </table>
-                                      </td>
-                                    </tr>
-                                  </table>
-                                </td>
-                              </tr>
-                            </table>
-                          </th>
-                        </tr>
-                      </table>
-                    </td>
-                  </tr>
-                </table>
-                <table cellspacing="0" cellpadding="0" border="0" role="presentation" width="100%" align="center" class="r3-o" style="table-layout: fixed; width: 100%" >
-                  <tr>
-                    <td class="r10-i" style="padding-bottom: 15px; padding-top: 15px" >
-                      <table width="100%" cellspacing="0" cellpadding="0" border="0" role="presentation" >
-                        <tr>
-                          <th width="100%" valign="top" class="r5-c" style="font-weight: normal" >
-                            <table cellspacing="0" cellpadding="0" border="0" role="presentation" width="100%" class="r6-o" style="table-layout: fixed; width: 100%" >
-                              <tr>
-                                <td valign="top" class="r7-i" style=" padding-left: 15px; padding-right: 15px; " >
-                                  <table width="100%" cellspacing="0" cellpadding="0" border="0" role="presentation" >
-                                    <tr>
-                                      <td class="r8-c" align="left">
-                                        <table cellspacing="0" cellpadding="0" border="0" role="presentation" width="100%" class="r9-o" style=" table-layout: fixed; width: 100%; " >
-                                          <tr>
-                                            <td align="left" valign="top" class="r11-i nl2go-default-textstyle" style=" color: #3b3f44; font-family: georgia, serif; font-size: 16px; line-height: 1.5; word-break: break-word; padding-bottom: 10px; padding-top: 10px; text-align: left; " >
-                                              <div>
-                                                <h2 class="default-heading2" style=" margin: 0; color: #1f2d3d; font-family: arial, helvetica, sans-serif; font-size: 32px; word-break: break-word; " > The code below is only valid for 10 minutes. </h2>
-                                              </div>
-                                            </td>
-                                          </tr>
-                                        </table>
-                                      </td>
-                                    </tr>
-                                  </table>
-                              </td>
-                              </tr>
-                            </table>
-                          </th>
-                        </tr>
-                      </table>
-                    </td>
-                  </tr>
-                </table>
-                <table cellspacing="0" cellpadding="0" border="0" role="presentation" width="100%" align="center" class="r3-o" style="table-layout: fixed; width: 100%" >
-                  <tr>
-                    <td class="r12-i" style="padding-bottom: 10px; padding-top: 10px" >
-                      <table width="100%" cellspacing="0" cellpadding="0" border="0" role="presentation" >
-                        <tr>
-                          <th width="100%" valign="top" class="r5-c" style="font-weight: normal" >
-                            <table cellspacing="0" cellpadding="0" border="0" role="presentation" width="100%" class="r6-o" style="table-layout: fixed; width: 100%" >
-                              <tr>
-                                <td valign="top" class="r7-i" style=" padding-left: 15px; padding-right: 15px; " >
-                                  <table width="100%" cellspacing="0" cellpadding="0" border="0" role="presentation" >
-                                    <tr>
-                                      <td class="r8-c" align="left">
-                                        <table cellspacing="0" cellpadding="0" border="0" role="presentation" width="100%" class="r13-o" style=" background-color: #ecf1ff; border-bottom-color: #d9e4ff; border-bottom-width: 1px; border-collapse: separate; border-left-color: #d9e4ff; border-left-width: 1px; border-radius: 5px; border-right-color: #d9e4ff; border-right-width: 1px; border-style: solid; border-top-color: #d9e4ff; border-top-width: 1px; table-layout: fixed; width: 100%; " >
-                                          <tr>
-                                            <td align="left" valign="top" class="r14-i nl2go-default-textstyle" style=" color: #3b3f44; font-family: georgia, serif; font-size: 16px; word-break: break-word; background-color: #ecf1ff; border-radius: 4px; line-height: 3; padding-bottom: 10px; padding-left: 10px; padding-right: 10px; padding-top: 10px; text-align: left; " >
-                                              <div>
-                                                <p style="margin: 0"> <span style=" font-family: Arial, helvetica, sans-serif; font-size: 24px; " >{{code}}</span > </p>
-                                                <p style="margin: 0"> <span style=" color: #5f5e5e; font-family: Arial, helvetica, sans-serif; font-size: 14px; " >Please copy and paste this on the screen where you requested this from.</span > </p>
-                                              </div>
-                                            </td>
-                                          </tr>
-                                        </table>
-                                      </td>
-                                    </tr>
-                                  </table>
-                                </td>
-                              </tr>
-                            </table>
-                          </th>
-                        </tr>
-                      </table>
-                    </td>
-                  </tr>
-                </table>
-                <table cellspacing="0" cellpadding="0" border="0" role="presentation" width="100%" align="center" class="r3-o" style="table-layout: fixed; width: 100%" >
-                  <tr>
-                    <td class="r10-i" style="padding-bottom: 15px; padding-top: 15px" >
-                      <table width="100%" cellspacing="0" cellpadding="0" border="0" role="presentation" >
-                        <tr>
-                          <th width="100%" valign="top" class="r5-c" style="font-weight: normal" >
-                            <table cellspacing="0" cellpadding="0" border="0" role="presentation" width="100%" class="r6-o" style="table-layout: fixed; width: 100%" >
-                              <tr>
-                                <td valign="top" class="r7-i" style=" padding-left: 15px; padding-right: 15px; " >
-                                  <table width="100%" cellspacing="0" cellpadding="0" border="0" role="presentation" >
-                                    <tr>
-                                      <td class="r8-c" align="left">
-                                        <table cellspacing="0" cellpadding="0" border="0" role="presentation" width="100%" class="r15-o" style=" table-layout: fixed; width: 100%; " >
-                                          <tr class="nl2go-responsive-hide">
-                                            <td height="2" width="2" style=" font-size: 2px; line-height: 2px; background-color: #efefef; " > ­ </td>
-                                            <td height="2" style=" font-size: 2px; line-height: 2px; background-color: #efefef; " > ­ </td>
-                                            <td height="2" width="2" style=" font-size: 2px; line-height: 2px; background-color: #efefef; " > ­ </td>
-                                          </tr>
-                                          <tr>
-                                            <td class="nl2go-responsive-hide" width="2" style=" font-size: 0px; line-height: 1px; background-color: #efefef; " > ­ </td>
-                                            <td align="left" valign="top" class="r16-i nl2go-default-textstyle" style=" color: #3b3f44; font-family: georgia, serif; font-size: 16px; word-break: break-word; line-height: 1.5; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; padding-top: 5px; text-align: left; " >
-                                              <div>
-                                                <p style="margin: 0"> <span style="font-size: 13px" >Despite our popularity, we are humbly early-stage. We are shipping fast, so please reach out to us with feature requests, major and minor nits, and anything else you find missing. We read every </span ><a href="https://discord.com/channels/1031547764020084846/1094927053867995176" title="Plane Support on Discod" target="_blank" style=" color: #006399; text-decoration: underline; " ><span style="font-size: 13px" >message</span ></a ><span style="font-size: 13px" >, </span ><a href="http://twitter.com/planepowers" title="@planepowers" target="_blank" style=" color: #006399; text-decoration: underline; " ><span style="font-size: 13px" >tweet</span ></a ><span style="font-size: 13px" >, and </span ><a href="https://github.com/makeplane/plane/issues" title="Plane's GitHub conversations" target="_blank" style=" color: #006399; text-decoration: underline; " ><span style="font-size: 13px" >conversation</span ></a ><span style="font-size: 13px" > and update </span ><a href="https://plane.sh/plane/0b170a1c-0e55-47cb-9307-ea49a05672b5?board=kanban" title="Plane's roadmap" target="_blank" style=" color: #006399; text-decoration: underline; " ><span style="font-size: 13px" >our public roadmap</span ></a ><span style="font-size: 13px" >.</span > </p>
-                                              </div>
-                                            </td>
-                                            <td class="nl2go-responsive-hide" width="2" style=" font-size: 0px; line-height: 1px; background-color: #efefef; " > ­ </td>
-                                          </tr>
-                                          <tr class="nl2go-responsive-hide">
-                                            <td height="2" width="2" style=" font-size: 2px; line-height: 2px; background-color: #efefef; " > ­ </td>
-                                            <td height="2" style=" font-size: 2px; line-height: 2px; background-color: #efefef; " > ­ </td>
-                                            <td height="2" width="2" style=" font-size: 2px; line-height: 2px; background-color: #efefef; " > ­ </td>
-                                          </tr>
-                                        </table>
-                                      </td>
-                                    </tr>
-                                  </table>
-                                </td>
-                              </tr>
-                            </table>
-                          </th>
-                        </tr>
-                      </table>
-                    </td>
-                  </tr>
-                </table>
-                <table cellspacing="0" cellpadding="0" border="0" role="presentation" width="100%" align="center" class="r3-o" style="table-layout: fixed; width: 100%" >
-                  <tr>
-                    <td class="r17-i" style="padding-bottom: 5px; padding-top: 5px" >
-                      <table width="100%" cellspacing="0" cellpadding="0" border="0" role="presentation" >
-                        <tr>
-                          <th width="100%" valign="top" class="r5-c" style="font-weight: normal" >
-                            <table cellspacing="0" cellpadding="0" border="0" role="presentation" width="100%" class="r6-o" style="table-layout: fixed; width: 100%" >
-                              <tr>
-                                <td valign="top" class="r7-i" style=" padding-left: 15px; padding-right: 15px; " >
-                                  <table width="100%" cellspacing="0" cellpadding="0" border="0" role="presentation" >
-                                    <tr>
-                                      <td class="r18-c" align="center">
-                                        <table cellspacing="0" cellpadding="0" border="0" role="presentation" width="570" align="center" class="r3-o" style=" table-layout: fixed; width: 570px; " >
-                                          <tr>
-                                            <td valign="top">
-                                              <table width="100%" cellspacing="0" cellpadding="0" border="0" role="presentation" >
-                                                <tr>
-                                                  <td class="r19-c" style=" display: inline-block; " >
-                                                    <table cellspacing="0" cellpadding="0" border="0" role="presentation" width="570" class="r6-o" style=" table-layout: fixed; width: 570px; " >
-                                                      <tr>
-                                                        <td class="r20-i" style=" padding-bottom: 10px; padding-left: 209px; padding-right: 209px; padding-top: 10px; " >
-                                                          <table width="100%" cellspacing="0" cellpadding="0" border="0" role="presentation" >
-                                                            <tr>
-                                                              <th width="40" class="r21-c mobshow resp-table" style=" font-weight: normal; " >
-                                                                <table cellspacing="0" cellpadding="0" border="0" role="presentation" width="100%" class="r22-o" style=" table-layout: fixed; width: 100%; " >
-                                                                  <tr>
-                                                                    <td class="r23-i" style=" font-size: 0px; line-height: 0px; padding-bottom: 5px; padding-top: 5px; " > <a href="https://github.com/makeplane" target="_blank" style=" color: #006399; text-decoration: underline; " > <img src="https://creative-assets.mailinblue.com/editor/social-icons/rounded_colored/github_32px.png" width="32" border="0" style=" display: block; width: 100%; " /></a> </td>
-                                                                    <td class="nl2go-responsive-hide" width="8" style=" font-size: 0px; line-height: 1px; " > ­ </td>
-                                                                  </tr>
-                                                                </table>
-                                                              </th>
-                                                              <th width="40" class="r21-c mobshow resp-table" style=" font-weight: normal; " >
-                                                                <table cellspacing="0" cellpadding="0" border="0" role="presentation" width="100%" class="r22-o" style=" table-layout: fixed; width: 100%; " >
-                                                                  <tr>
-                                                                    <td class="r23-i" style=" font-size: 0px; line-height: 0px; padding-bottom: 5px; padding-top: 5px; " > <a href="https://www.linkedin.com/company/planepowers/" target="_blank" style=" color: #006399; text-decoration: underline; " > <img src="https://creative-assets.mailinblue.com/editor/social-icons/rounded_colored/linkedin_32px.png" width="32" border="0" style=" display: block; width: 100%; " /></a> </td>
-                                                                    <td class="nl2go-responsive-hide" width="8" style=" font-size: 0px; line-height: 1px; " > ­ </td>
-                                                                  </tr>
-                                                                </table>
-                                                              </th>
-                                                              <th width="40" class="r21-c mobshow resp-table" style=" font-weight: normal; " >
-                                                                <table cellspacing="0" cellpadding="0" border="0" role="presentation" width="100%" class="r22-o" style=" table-layout: fixed; width: 100%; " >
-                                                                  <tr>
-                                                                    <td class="r23-i" style=" font-size: 0px; line-height: 0px; padding-bottom: 5px; padding-top: 5px; " > <a href="https://twitter.com/planepowers" target="_blank" style=" color: #006399; text-decoration: underline; " > <img src="https://creative-assets.mailinblue.com/editor/social-icons/rounded_colored/twitter_32px.png" width="32" border="0" style=" display: block; width: 100%; " /></a> </td>
-                                                                    <td class="nl2go-responsive-hide" width="8" style=" font-size: 0px; line-height: 1px; " > ­ </td>
-                                                                  </tr>
-                                                                </table>
-                                                              </th>
-                                                              <th width="32" class="r21-c mobshow resp-table" style=" font-weight: normal; " >
-                                                                <table cellspacing="0" cellpadding="0" border="0" role="presentation" width="100%" class="r24-o" style=" table-layout: fixed; width: 100%; " >
-                                                                  <tr>
-                                                                    <td class="r23-i" style=" font-size: 0px; line-height: 0px; padding-bottom: 5px; padding-top: 5px; " > <a href="https://plane.so/" target="_blank" style=" color: #006399; text-decoration: underline; " > <img src="https://creative-assets.mailinblue.com/editor/social-icons/rounded_colored/website_32px.png" width="32" border="0" style=" display: block; width: 100%; " /></a> </td>
-                                                                  </tr>
-                                                                </table>
-                                                              </th>
-                                                            </tr>
-                                                          </table>
-                                                        </td>
-                                                      </tr>
-                                                    </table>
-                                                  </td>
-                                                </tr>
-                                              </table>
-                                            </td>
-                                          </tr>
-                                        </table>
-                                      </td>
-                                    </tr>
-                                  </table>
-                                </td>
-                              </tr>
-                            </table>
-                          </th>
-                        </tr>
-                      </table>
-                    </td>
-                  </tr>
-                </table>
-                <table cellspacing="0" cellpadding="0" border="0" role="presentation" width="100%" align="center" class="r3-o" style="table-layout: fixed; width: 100%" >
-                  <tr>
-                    <td class="r17-i" style="padding-bottom: 5px; padding-top: 5px" >
-                      <table width="100%" cellspacing="0" cellpadding="0" border="0" role="presentation" >
-                        <tr>
-                          <th width="100%" valign="top" class="r5-c" style="font-weight: normal" >
-                            <table cellspacing="0" cellpadding="0" border="0" role="presentation" width="100%" class="r6-o" style="table-layout: fixed; width: 100%" >
-                              <tr>
-                                <td valign="top" class="r7-i" style=" padding-left: 15px; padding-right: 15px; " >
-                                  <table width="100%" cellspacing="0" cellpadding="0" border="0" role="presentation" >
-                                    <tr>
-                                      <td class="r8-c" align="left">
-                                        <table cellspacing="0" cellpadding="0" border="0" role="presentation" width="100%" class="r9-o" style=" table-layout: fixed; width: 100%; " >
-                                          <tr>
-                                            <td align="center" valign="top" class="r25-i nl2go-default-textstyle" style=" color: #3b3f44; font-family: georgia, serif; word-break: break-word; font-size: 18px; line-height: 1.5; padding-top: 5px; text-align: center; " >
-                                              <div>
-                                                <p style=" margin: 0; font-size: 14px; " > <span style="font-size: 12px" >This email was sent to {{email}}. Please delete if you aren't the intended recipient.</span > </p>
-                                              </div>
-                                            </td>
-                                          </tr>
-                                        </table>
-                                      </td>
-                                    </tr>
-                                  </table>
-                                </td>
-                              </tr>
-                            </table>
-                          </th>
-                        </tr>
-                      </table>
-                    </td>
-                  </tr>
-                </table>
-              </td>
-            </tr>
-          </table>
-        </td>
-      </tr>
-    </table>
+
+  <body
+    bgcolor="#f9f9f9"
+    style="
+      margin: 0;
+      padding: 0;
+      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
+        sans-serif;
+      font-weight: 400;
+      color: #474747;
+      -webkit-font-smoothing: antialiased;
+      -webkit-text-size-adjust: none;
+      background-color: #f9f9f9;
+    "
+  >
+    <!-- Preheader (hidden) -->
+    <span
+      class="preheader"
+      style="
+        display: none;
+        font-size: 1px;
+        color: transparent;
+        line-height: 1px;
+        max-height: 0;
+        max-width: 0;
+        opacity: 0;
+        overflow: hidden;
+        mso-hide: all;
+        visibility: hidden;
+      "
+    >
+      Your Plane login code {{code}} is valid for 10 minutes.
+    </span>
+
+    <!-- Outer Wrapper -->
+    <center
+      class="email-body"
+      style="width: 100%; background-color: #f9f9f9; padding: 40px 0;"
+    >
+      <!-- HEADER -->
+      <table role="presentation" width="100%">
+        <tr>
+          <td></td>
+
+          <td
+            class="email-container"
+            width="620"
+            style="width: 620px; max-width: 620px; margin: 0 auto;"
+          >
+            <table
+              role="presentation"
+              width="100%"
+              style="background-color: #000000;"
+            >
+              <tr>
+                <td style="padding: 24px 40px; text-align: center;">
+                  <img
+                    src="https://media.docs.plane.so/logo/new-logo-dark.png"
+                    width="120"
+                    alt="Plane"
+                    style="height: auto; display: block; margin: 0 auto;"
+                  />
+                </td>
+              </tr>
+            </table>
+          </td>
+
+          <td></td>
+        </tr>
+      </table>
+
+      <!-- BODY (card under header) -->
+      <table role="presentation" width="100%">
+        <tr>
+          <td></td>
+
+          <td
+            class="email-container"
+            width="620"
+            style="width: 620px; max-width: 620px; margin: 0 auto;"
+          >
+            <table
+              role="presentation"
+              width="100%"
+              class="email-content"
+              style="background-color: #ffffff; padding: 32px 40px 32px 40px;"
+            >
+              <tr>
+                <td
+                  style="
+                    font-size: 16px;
+                    line-height: 1.5;
+                    color: #474747;
+                    padding: 24px;
+                  "
+                >
+                  <!-- ========================================= -->
+                  <!--           PLANE LOGIN CODE EMAIL          -->
+                  <!-- ========================================= -->
+
+                  <!-- Heading -->
+                  <h1
+                    style="
+                      margin: 0 0 12px;
+                      font-size: 22px;
+                      line-height: 1.35;
+                      font-weight: 600;
+                      color: #111111;
+                    "
+                  >
+                    Your login code for Plane
+                  </h1>
+
+                  <!-- Code chip -->
+                  <p style="margin: 12px 0 24px;">
+                    <span
+                      style="
+                        display: inline-block;
+                        padding: 8px 14px;
+                        background-color: #e4e5e7;
+                        border-radius: 6px;
+                        font-family: 'SF Mono', Menlo, Monaco, Consolas,
+                          'Liberation Mono', 'Courier New', monospace;
+                        font-size: 15px;
+                        letter-spacing: 0.14em;
+                        text-transform: uppercase;
+                        color: #111111;
+                      "
+                    >
+                      {{code}}
+                    </span>
+                  </p>
+
+                  <!-- Main info -->
+                  <p
+                    style="
+                      margin: 0;
+                      font-size: 13px;
+                      line-height: 1.6;
+                      color: #5f5e5e;
+                    "
+                  >
+                    This code is valid for the next 10 minutes. Enter it on the
+                    sign-in page to complete your login.
+                  </p>
+
+                  <!-- Secondary info -->
+                  <p
+                    style="
+                      margin: 16px 0 0;
+                      font-size: 13px;
+                      line-height: 1.6;
+                      color: #5f5e5e;
+                    "
+                  >
+                    Note: This email was sent to
+                    <span
+                      style="
+                        font-family: 'Courier New', Courier, monospace;
+                        font-size: 12px;
+                        background-color: #f3f3f3;
+                        padding: 2px 4px;
+                        border-radius: 3px;
+                        border: 1px solid #e9e9e9;
+                      "
+                      >{{email}}</span
+                    >. If you were not expecting a sign-in code, you can safely
+                    ignore this message.
+                  </p>
+                </td>
+              </tr>
+            </table>
+          </td>
+
+          <td></td>
+        </tr>
+      </table>
+
+      <!-- FOOTER (simple, aligned with body) -->
+      <table role="presentation" width="100%">
+        <tr>
+          <td></td>
+
+          <td
+            class="email-container"
+            width="620"
+            style="width: 620px; max-width: 620px; margin: 0 auto;"
+          >
+            <table
+              role="presentation"
+              width="100%"
+              class="email-footer"
+              style="background-color: #ffffff; padding: 0 40px 16px 40px;"
+            >
+              <tr>
+                <td
+                  style="
+                    border-top: 1px solid #e9e9e9;
+                    padding: 24px;
+                    font-size: 12px;
+                    line-height: 1.6;
+                    color: #979797;
+                    text-align: left;
+                  "
+                >
+                  <p style="margin: 0;">
+                    Plane Software, Inc.
+                  </p>
+                </td>
+              </tr>
+            </table>
+          </td>
+
+          <td></td>
+        </tr>
+      </table>
+    </center>
+
+    <base target="_blank" />
   </body>
 </html>
\ No newline at end of file
diff --git a/apps/api/templates/emails/exports/analytics.html b/apps/api/templates/emails/exports/analytics.html
index d2caa9d7a..f9a250d36 100644
--- a/apps/api/templates/emails/exports/analytics.html
+++ b/apps/api/templates/emails/exports/analytics.html
@@ -1,2 +1,215 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
-<html> Hey there,<br/> Your requested data export from Plane Analytics is now ready. The information has been compiled into a CSV format for your convenience.<br/> Please find the attachment and download the CSV file. This file can easily be imported into any spreadsheet program for further analysis.<br/> If you require any assistance or have any questions, please do not hesitate to contact us.<br/> Thank you </html>
\ No newline at end of file
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <title>Your Plane Analytics export is ready</title>
+
+    <style>
+      /* Basic resets for email clients */
+      body,
+      table,
+      td,
+      p {
+        margin: 0;
+        padding: 0;
+      }
+
+      img {
+        border: 0;
+        line-height: 100%;
+        text-decoration: none;
+        -ms-interpolation-mode: bicubic;
+      }
+
+      table {
+        border-collapse: collapse;
+      }
+
+      /* Mobile adjustments */
+      @media only screen and (max-width: 600px) {
+        .email-container {
+          width: 100% !important;
+        }
+
+        .email-content {
+          padding: 24px 20px !important;
+        }
+
+        .email-footer {
+          padding: 0 20px 16px 20px !important;
+        }
+      }
+    </style>
+  </head>
+
+  <body
+    bgcolor="#f9f9f9"
+    style="
+      margin: 0;
+      padding: 0;
+      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
+        sans-serif;
+      font-weight: 400;
+      color: #474747;
+      -webkit-font-smoothing: antialiased;
+      -webkit-text-size-adjust: none;
+      background-color: #f9f9f9;
+    "
+  >
+    <!-- Preheader (hidden) -->
+    <span
+      class="preheader"
+      style="
+        display: none;
+        font-size: 1px;
+        color: transparent;
+        line-height: 1px;
+        max-height: 0;
+        max-width: 0;
+        opacity: 0;
+        overflow: hidden;
+        mso-hide: all;
+        visibility: hidden;
+      "
+    >
+      Your requested Plane Analytics data export is attached as a CSV file.
+    </span>
+
+    <!-- Outer Wrapper -->
+    <center
+      class="email-body"
+      style="width: 100%; background-color: #f9f9f9; padding: 40px 0;"
+    >
+      <!-- HEADER -->
+      <table role="presentation" width="100%">
+        <tr>
+          <td></td>
+          <td
+            class="email-container"
+            width="620"
+            style="width: 620px; max-width: 620px; margin: 0 auto;"
+          >
+            <table role="presentation" width="100%" style="background-color: #000000;">
+              <tr>
+                <td style="padding: 24px 40px; text-align: center;">
+                  <img
+                    src="https://media.docs.plane.so/logo/new-logo-dark.png"
+                    width="120"
+                    alt="Plane"
+                    style="height: auto; display: block; margin: 0 auto;"
+                  />
+                </td>
+              </tr>
+            </table>
+          </td>
+          <td></td>
+        </tr>
+      </table>
+
+      <!-- BODY (card under header) -->
+      <table role="presentation" width="100%">
+        <tr>
+          <td></td>
+          <td
+            class="email-container"
+            width="620"
+            style="width: 620px; max-width: 620px; margin: 0 auto;"
+          >
+            <table
+              role="presentation"
+              width="100%"
+              class="email-content"
+              style="background-color: #ffffff; padding: 32px 40px 32px 40px;"
+            >
+              <tr>
+                <td
+                  style="
+                    font-size: 16px;
+                    line-height: 1.5;
+                    color: #474747;
+                    padding: 24px;
+                  "
+                >
+                  <!-- ========================================= -->
+                  <!--     PLANE ANALYTICS DATA EXPORT EMAIL     -->
+                  <!-- ========================================= -->
+
+                  <!-- Heading -->
+                  <h1
+                    style="
+                      margin: 0 0 12px;
+                      font-size: 22px;
+                      line-height: 1.35;
+                      font-weight: 600;
+                      color: #111111;
+                    "
+                  >
+                    Your Plane Analytics export is ready
+                  </h1>
+
+                  <!-- Body copy -->
+                  <p style="margin: 0 0 16px;">
+                    Your requested data export from Plane Analytics is ready. We’ve attached it as a CSV file for your convenience.
+                  </p>
+
+                  <!-- Small-note styled paragraphs -->
+                  <p
+                    style="
+                      margin: 0 0 12px;
+                      font-size: 13px;
+                      line-height: 1.6;
+                      color: #5f5e5e;
+                    "
+                  >
+                    You can open the CSV in any spreadsheet or BI tool to analyze the data, build reports, or share insights with your team.
+                  </p>
+                </td>
+              </tr>
+            </table>
+          </td>
+          <td></td>
+        </tr>
+      </table>
+
+      <!-- FOOTER -->
+      <table role="presentation" width="100%">
+        <tr>
+          <td></td>
+          <td
+            class="email-container"
+            width="620"
+            style="width: 620px; max-width: 620px; margin: 0 auto;"
+          >
+            <table
+              role="presentation"
+              width="100%"
+              class="email-footer"
+              style="background-color: #ffffff; padding: 0 40px 16px 40px;"
+            >
+              <tr>
+                <td
+                  style="
+                    border-top: 1px solid #e9e9e9;
+                    padding: 24px;
+                    font-size: 12px;
+                    line-height: 1.6;
+                    color: #979797;
+                    text-align: left;
+                  "
+                >
+                  <p style="margin: 0;">
+                    Plane Software, Inc.
+                  </p>
+                </td>
+              </tr>
+            </table>
+          </td>
+          <td></td>
+        </tr>
+      </table>
+    </center>
+
+    <base target="_blank" />
+  </body>
+</html>
\ No newline at end of file
diff --git a/apps/api/templates/emails/invitations/project_invitation.html b/apps/api/templates/emails/invitations/project_invitation.html
index 254408ac5..36aecd60d 100644
--- a/apps/api/templates/emails/invitations/project_invitation.html
+++ b/apps/api/templates/emails/invitations/project_invitation.html
@@ -124,7 +124,7 @@
                                                   <td class="nl2go-responsive-hide" width="20" style=" font-size: 0px; line-height: 1px; " > ­ </td>
                                                   <td align="left" valign="top" class="r17-i nl2go-default-textstyle" style=" color: #3b3f44; font-family: arial, helvetica, sans-serif; font-size: 16px; line-height: 1.5; text-align: left; " >
                                                     <div>
-                                                      <p style="margin: 0"> <span style=" font-size: 12px; " >Note: Plane is still in its early days, not everything will be perfect yet, and hiccups may happen. Please let us know of any suggestions, ideas, or bugs that you encounter on our </span ><a href="https://discord.gg/A92xrEGCge" target="_blank" style=" color: #0092ff; text-decoration: underline; " ><span style=" font-size: 12px; " >Discord</span ></a ><span style=" font-size: 12px; " > or </span ><a href="https://github.com/makeplane/plane" target="_blank" style=" color: #0092ff; text-decoration: underline; " ><span style=" font-size: 12px; " >GitHub</span ></a ><span style=" font-size: 12px; " >, and we will use your feedback to improve on our upcoming releases.</span > </p>
+                                                      <p style="margin: 0"> <span style=" font-size: 12px; " >Note: Plane is still in its early days, not everything will be perfect yet, and hiccups may happen. Please let us know of any suggestions, ideas, or bugs that you encounter on our </span ><a href="https://forum.plane.so" target="_blank" style=" color: #0092ff; text-decoration: underline; " ><span style=" font-size: 12px; " >Forum</span ></a ><span style=" font-size: 12px; " > or </span ><a href="https://github.com/makeplane/plane" target="_blank" style=" color: #0092ff; text-decoration: underline; " ><span style=" font-size: 12px; " >GitHub</span ></a ><span style=" font-size: 12px; " >, and we will use your feedback to improve on our upcoming releases.</span > </p>
                                                     </div>
                                                   </td>
                                                   <td class="nl2go-responsive-hide" width="20" style=" font-size: 0px; line-height: 1px; " > ­ </td>
@@ -227,7 +227,7 @@
                                                                           <td height="5" width="8" style=" font-size: 5px; line-height: 5px; " > ­ </td>
                                                                         </tr>
                                                                         <tr>
-                                                                          <td class="r26-i" style=" font-size: 0px; line-height: 0px; " > <a href="https://github.com/makeplane/plane" target="_blank" style=" color: #0092ff; text-decoration: underline; " > <img src="https://sendinblue-templates.s3.eu-west-3.amazonaws.com/icons/rounded_colored/github_32px.png" width="32" border="0" class="" style=" display: block; width: 100%; " /></a> </td>
+                                                                          <td class="r26-i" style=" font-size: 0px; line-height: 0px; " > <a href="https://github.com/makeplane/plane" target="_blank" style=" color: #0092ff; text-decoration: underline; " > <img src="{{ current_site }}/static/logos/github_32px.png" width="32" border="0" class="" style=" display: block; width: 100%; " /></a> </td>
                                                                           <td class="nl2go-responsive-hide" width="8" style=" font-size: 0px; line-height: 1px; " > ­ </td>
                                                                         </tr>
                                                                         <tr class="nl2go-responsive-hide" >
@@ -244,7 +244,7 @@
                                                                           <td height="5" width="8" style=" font-size: 5px; line-height: 5px; " > ­ </td>
                                                                         </tr>
                                                                         <tr>
-                                                                          <td class="r26-i" style=" font-size: 0px; line-height: 0px; " > <a href="https://discord.gg/A92xrEGCge" target="_blank" style=" color: #0092ff; text-decoration: underline; " > <img src="https://sendinblue-templates.s3.eu-west-3.amazonaws.com/icons/rounded_colored/discord_32px.png" width="32" border="0" class="" style=" display: block; width: 100%; " /></a> </td>
+                                                                          <td class="r26-i" style=" font-size: 0px; line-height: 0px; " > <a href="https://forum.plane.so" target="_blank" style=" color: #0092ff; text-decoration: underline; " > <img src="{{ current_site }}/static/logos/website_32px.png" width="32" border="0" class="" style=" display: block; width: 100%; " /></a> </td>
                                                                           <td class="nl2go-responsive-hide" width="8" style=" font-size: 0px; line-height: 1px; " > ­ </td>
                                                                         </tr>
                                                                         <tr class="nl2go-responsive-hide" >
@@ -261,7 +261,7 @@
                                                                           <td height="5" width="8" style=" font-size: 5px; line-height: 5px; " > ­ </td>
                                                                         </tr>
                                                                         <tr>
-                                                                          <td class="r26-i" style=" font-size: 0px; line-height: 0px; " > <a href="https://twitter.com/planepowers" target="_blank" style=" color: #0092ff; text-decoration: underline; " > <img src="https://sendinblue-templates.s3.eu-west-3.amazonaws.com/icons/rounded_colored/twitter_32px.png" width="32" border="0" class="" style=" display: block; width: 100%; " /></a> </td>
+                                                                          <td class="r26-i" style=" font-size: 0px; line-height: 0px; " > <a href="https://twitter.com/planepowers" target="_blank" style=" color: #0092ff; text-decoration: underline; " > <img src="{{ current_site }}/static/logos/twitter_32px.png" width="32" border="0" class="" style=" display: block; width: 100%; " /></a> </td>
                                                                           <td class="nl2go-responsive-hide" width="8" style=" font-size: 0px; line-height: 1px; " > ­ </td>
                                                                         </tr>
                                                                         <tr class="nl2go-responsive-hide" >
@@ -277,7 +277,7 @@
                                                                           <td height="5" style=" font-size: 5px; line-height: 5px; " > ­ </td>
                                                                         </tr>
                                                                         <tr>
-                                                                          <td class="r26-i" style=" font-size: 0px; line-height: 0px; " > <a href="https://www.linkedin.com/company/planepowers/" target="_blank" style=" color: #0092ff; text-decoration: underline; " > <img src="https://sendinblue-templates.s3.eu-west-3.amazonaws.com/icons/rounded_colored/linkedin_32px.png" width="32" border="0" class="" style=" display: block; width: 100%; " /></a> </td>
+                                                                          <td class="r26-i" style=" font-size: 0px; line-height: 0px; " > <a href="https://www.linkedin.com/company/planepowers/" target="_blank" style=" color: #0092ff; text-decoration: underline; " > <img src="{{ current_site }}/static/logos/linkedin_32px.png" width="32" border="0" class="" style=" display: block; width: 100%; " /></a> </td>
                                                                         </tr>
                                                                         <tr class="nl2go-responsive-hide" >
                                                                           <td height="5" style=" font-size: 5px; line-height: 5px; " > ­ </td>
@@ -346,4 +346,4 @@
       </tr>
     </table>
   </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/apps/api/templates/emails/invitations/workspace_invitation.html b/apps/api/templates/emails/invitations/workspace_invitation.html
index 619f03992..84ba654c1 100644
--- a/apps/api/templates/emails/invitations/workspace_invitation.html
+++ b/apps/api/templates/emails/invitations/workspace_invitation.html
@@ -1,219 +1,306 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
+<!DOCTYPE html>
+<html lang="en">
   <head>
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="format-detection" content="telephone=no">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>{{first_name}} has invited you to join them in {{workspace_name}} on Plane.</title>
-    <style type="text/css" emogrify="no">#outlook a { padding:0; } .ExternalClass { width:100%; } .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div { line-height: 100%; } table td { border-collapse: collapse; mso-line-height-rule: exactly; } .editable.image { font-size: 0 !important; line-height: 0 !important; } .nl2go_preheader { display: none !important; mso-hide:all !important; mso-line-height-rule: exactly; visibility: hidden !important; line-height: 0px !important; font-size: 0px !important; } body { width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0; } img { outline:none; text-decoration:none; -ms-interpolation-mode: bicubic; } a img { border:none; } table { border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; } th { font-weight: normal; text-align: left; } *[class="gmail-fix"] { display: none !important; } </style>
-    <style type="text/css" emogrify="no"> @media (max-width: 600px) { .gmx-killpill { content: ' \03D1';} } </style>
-    <style type="text/css" emogrify="no">@media (max-width: 600px) { .gmx-killpill { content: ' \03D1';} .r0-o { border-style: solid !important; margin: 0 auto 0 auto !important; width: 320px !important } .r1-i { background-color: #ffffff !important } .r2-c { box-sizing: border-box !important; text-align: center !important; valign: top !important; width: 100% !important } .r3-o { border-style: solid !important; margin: 0 auto 0 auto !important; width: 100% !important } .r4-i { padding-bottom: 20px !important; padding-left: 15px !important; padding-right: 15px !important; padding-top: 20px !important } .r5-c { box-sizing: border-box !important; display: block !important; valign: top !important; width: 100% !important } .r6-o { border-style: solid !important; width: 100% !important } .r7-i { padding-left: 0px !important; padding-right: 0px !important } .r8-i { padding-bottom: 20px !important; padding-left: 10px !important; padding-right: 10px !important; padding-top: 20px !important } .r9-c { box-sizing: border-box !important; text-align: left !important; valign: top !important; width: 100% !important } .r10-o { border-style: solid !important; margin: 0 auto 0 0 !important; width: 100% !important } .r11-i { padding-top: 15px !important; text-align: center !important } .r12-c { box-sizing: border-box !important; padding-bottom: 15px !important; padding-top: 15px !important; text-align: left !important; valign: top !important; width: 100% !important } .r13-c { box-sizing: border-box !important; padding: 0 !important; text-align: center !important; valign: top !important; width: 100% !important } .r14-o { border-style: solid !important; margin: 0 auto 0 auto !important; margin-bottom: 15px !important; margin-top: 15px !important; width: 100% !important } .r15-i { padding: 0 !important; text-align: center !important } .r16-r { background-color: #006399 !important; border-radius: 4px !important; border-width: 0px !important; box-sizing: border-box; height: initial !important; padding: 0 !important; padding-bottom: 12px !important; padding-left: 5px !important; padding-right: 5px !important; padding-top: 12px !important; text-align: center !important; width: 100% !important } .r17-c { box-sizing: border-box !important; text-align: center !important; width: 100% !important } .r18-c { box-sizing: border-box !important; width: 100% !important } .r19-i { font-size: 0px !important; padding-bottom: 15px !important; padding-left: 65px !important; padding-right: 65px !important; padding-top: 15px !important } .r20-c { box-sizing: border-box !important; width: 32px !important } .r21-o { border-style: solid !important; margin-right: 8px !important; width: 32px !important } .r22-i { padding-bottom: 5px !important; padding-top: 5px !important } .r23-o { border-style: solid !important; margin-right: 0px !important; width: 32px !important } body { -webkit-text-size-adjust: none } .nl2go-responsive-hide { display: none } .nl2go-body-table { min-width: unset !important } .mobshow { height: auto !important; overflow: visible !important; max-height: unset !important; visibility: visible !important; border: none !important } .resp-table { display: inline-table !important } .magic-resp { display: table-cell !important } } </style>
-    <style type="text/css">p, h1, h2, h3, h4, ol, ul, li { margin: 0; } a, a:link { color: #006399; text-decoration: underline } .nl2go-default-textstyle { color: #3b3f44; font-family: georgia, serif; font-size: 18px; line-height: 1.5; word-break: break-word } .default-button { color: #ffffff; font-family: georgia, serif; font-size: 16px; font-style: normal; font-weight: bold; line-height: 1.15; text-decoration: none; word-break: break-word } .default-heading1 { color: #1F2D3D; font-family: arial,helvetica,sans-serif; font-size: 36px; word-break: break-word } .default-heading2 { color: #1F2D3D; font-family: arial,helvetica,sans-serif; font-size: 32px; word-break: break-word } .default-heading3 { color: #1F2D3D; font-family: arial,helvetica,sans-serif; font-size: 24px; word-break: break-word } .default-heading4 { color: #1F2D3D; font-family: arial,helvetica,sans-serif; font-size: 18px; word-break: break-word } a[x-apple-data-detectors] { color: inherit !important; text-decoration: inherit !important; font-size: inherit !important; font-family: inherit !important; font-weight: inherit !important; line-height: inherit !important; } .no-show-for-you { border: none; display: none; float: none; font-size: 0; height: 0; line-height: 0; max-height: 0; mso-hide: all; overflow: hidden; table-layout: fixed; visibility: hidden; width: 0; } </style>
-    <!--[if mso]>
-    <xml>
-      <o:OfficeDocumentSettings>
-        <o:AllowPNG/>
-        <o:PixelsPerInch>96</o:PixelsPerInch>
-      </o:OfficeDocumentSettings>
-    </xml>
-    <![endif]-->
-    <style type="text/css">a:link{color: #006399; text-decoration: underline;}</style>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <title>{{first_name}} invited you to {{workspace_name}} on Plane</title>
+
+    <style>
+      /* Basic resets for email clients */
+      body,
+      table,
+      td,
+      p {
+        margin: 0;
+        padding: 0;
+      }
+
+      img {
+        border: 0;
+        line-height: 100%;
+        text-decoration: none;
+        -ms-interpolation-mode: bicubic;
+      }
+
+      table {
+        border-collapse: collapse;
+      }
+
+      /* Mobile adjustments */
+      @media only screen and (max-width: 600px) {
+        .email-container {
+          width: 100% !important;
+        }
+
+        .email-content {
+          padding: 24px 20px !important;
+        }
+
+        .email-footer {
+          padding: 0 20px 16px 20px !important;
+        }
+      }
+    </style>
   </head>
-  <body bgcolor="#ffffff" text="#3b3f44" link="#006399" yahoo="fix" style="background-color: #ffffff;">
-    <table cellspacing="0" cellpadding="0" border="0" role="presentation" class="nl2go-body-table" width="100%" style="background-color: #ffffff; width: 100%;">
-      <tr>
-        <td>
-          <table cellspacing="0" cellpadding="0" border="0" role="presentation" width="600" align="center" class="r0-o" style="table-layout: fixed; width: 600px;">
-            <tr>
-              <td valign="top" class="r1-i" style="background-color: #ffffff;">
-                <table cellspacing="0" cellpadding="0" border="0" role="presentation" width="100%" align="center" class="r3-o" style="table-layout: fixed; width: 100%;">
-                  <tr>
-                    <td class="r4-i" style="padding-bottom: 20px; padding-top: 20px;">
-                      <table width="100%" cellspacing="0" cellpadding="0" border="0" role="presentation">
-                        <tr>
-                          <th width="100%" valign="top" class="r5-c" style="font-weight: normal;">
-                            <table cellspacing="0" cellpadding="0" border="0" role="presentation" width="100%" class="r6-o" style="table-layout: fixed; width: 100%;">
-                              <tr>
-                                <td valign="top" class="r7-i" style="padding-left: 10px; padding-right: 10px;">
-                                  <table width="100%" cellspacing="0" cellpadding="0" border="0" role="presentation">
-                                    <tr>
-                                      <td class="r2-c" align="center">
-                                        <table cellspacing="0" cellpadding="0" border="0" role="presentation" width="200" class="r3-o" style="table-layout: fixed; width: 200px;">
-                                          <tr>
-                                            <td style="font-size: 0px; line-height: 0px;"> <img src="https://media.docs.plane.so/logo/new-logo-white.png" width="200" border="0" style="display: block; width: 100%;"></td>
-                                          </tr>
-                                        </table>
-                                      </td>
-                                    </tr>
-                                  </table>
-                                </td>
-                              </tr>
-                            </table>
-                          </th>
-                        </tr>
-                      </table>
-                    </td>
-                  </tr>
-                </table>
-                <table cellspacing="0" cellpadding="0" border="0" role="presentation" width="100%" align="center" class="r3-o" style="table-layout: fixed; width: 100%;">
-                  <tr>
-                    <td class="r8-i" style="padding-bottom: 20px; padding-top: 20px;">
-                      <table width="100%" cellspacing="0" cellpadding="0" border="0" role="presentation">
-                        <tr>
-                          <th width="100%" valign="top" class="r5-c" style="font-weight: normal;">
-                            <table cellspacing="0" cellpadding="0" border="0" role="presentation" width="100%" class="r6-o" style="table-layout: fixed; width: 100%;">
-                              <tr>
-                                <td valign="top" class="r7-i">
-                                  <table width="100%" cellspacing="0" cellpadding="0" border="0" role="presentation">
-                                    <tr>
-                                      <td class="r9-c" align="left">
-                                        <table cellspacing="0" cellpadding="0" border="0" role="presentation" width="100%" class="r10-o" style="table-layout: fixed; width: 100%;">
-                                          <tr>
-                                            <td align="center" valign="top" class="r11-i nl2go-default-textstyle" style="color: #3b3f44; font-family: georgia,serif; font-size: 18px; word-break: break-word; line-height: 1.5; padding-top: 15px; text-align: center;">
-                                              <div>
-                                                <h1 class="default-heading1" style="margin: 0; color: #1f2d3d; font-family: arial,helvetica,sans-serif; font-size: 36px; word-break: break-word;">You are a celebrated colleague!</h1>
-                                              </div>
-                                            </td>
-                                          </tr>
-                                        </table>
-                                      </td>
-                                    </tr>
-                                    <tr>
-                                      <td class="r12-c nl2go-default-textstyle" align="left" style="color: #3b3f44; font-family: georgia,serif; font-size: 18px; line-height: 1.5; word-break: break-word; padding-bottom: 15px; padding-top: 15px; text-align: left; valign: top;">
-                                        <div>
-                                          <p style="margin: 0;">{{first_name}} has invited you to join them in {{workspace_name}}, a workspace for projects and progress, on Plane. Some of our users have told us it's a privilege, but we will let you be the judge of that.</p>
-                                        </div>
-                                      </td>
-                                    </tr>
-                                    <tr>
-                                      <td class="r13-c" align="center" style="align: center; padding-bottom: 15px; padding-top: 15px; valign: top;">
-                                        <table cellspacing="0" cellpadding="0" border="0" role="presentation" width="300" class="r14-o" style="background-color: #006399; border-collapse: separate; border-color: #006399; border-radius: 4px; border-style: solid; border-width: 0px; table-layout: fixed; width: 300px;">
-                                          <tr>
-                                            <td height="18" align="center" valign="top" class="r15-i nl2go-default-textstyle" style="word-break: break-word; background-color: #006399; border-radius: 4px; color: #ffffff; font-family: georgia, serif; font-size: 16px; font-style: normal; line-height: 1.15; padding-bottom: 12px; padding-left: 5px; padding-right: 5px; padding-top: 12px; text-align: center;"> <a href="{{abs_url}}" class="r16-r default-button" target="_blank" data-btn="1" style="font-style: normal; font-weight: bold; line-height: 1.15; text-decoration: none; word-break: break-word; word-wrap: break-word; display: block; -webkit-text-size-adjust: none; color: #ffffff; font-family: georgia, serif; font-size: 16px;"> <span><span style="font-family: Arial, helvetica, sans-serif;">Join them on Plane</span></span></a> </td>
-                                          </tr>
-                                        </table>
-                                      </td>
-                                    </tr>
-                                  </table>
-                                </td>
-                              </tr>
-                            </table>
-                          </th>
-                        </tr>
-                      </table>
-                    </td>
-                  </tr>
-                </table>
-                <table cellspacing="0" cellpadding="0" border="0" role="presentation" width="100%" align="center" class="r3-o" style="table-layout: fixed; width: 100%;">
-                  <tr>
-                    <td class="r4-i" style="padding-bottom: 20px; padding-top: 20px;">
-                      <table width="100%" cellspacing="0" cellpadding="0" border="0" role="presentation">
-                        <tr>
-                          <th width="100%" valign="top" class="r5-c" style="font-weight: normal;">
-                            <table cellspacing="0" cellpadding="0" border="0" role="presentation" width="100%" class="r6-o" style="table-layout: fixed; width: 100%;">
-                              <tr>
-                                <td valign="top" class="r7-i" style="padding-left: 15px; padding-right: 15px;">
-                                  <table width="100%" cellspacing="0" cellpadding="0" border="0" role="presentation">
-                                    <tr>
-                                      <td class="r17-c" align="center">
-                                        <table cellspacing="0" cellpadding="0" border="0" role="presentation" width="570" align="center" class="r3-o" style="table-layout: fixed; width: 570px;">
-                                          <tr>
-                                            <td valign="top">
-                                              <table width="100%" cellspacing="0" cellpadding="0" border="0" role="presentation">
-                                                <tr>
-                                                  <td class="r18-c" style="display: inline-block;">
-                                                    <table cellspacing="0" cellpadding="0" border="0" role="presentation" width="570" class="r6-o" style="table-layout: fixed; width: 570px;">
-                                                      <tr>
-                                                        <td class="r19-i" style="padding-bottom: 15px; padding-left: 209px; padding-right: 209px; padding-top: 15px;">
-                                                          <table width="100%" cellspacing="0" cellpadding="0" border="0" role="presentation">
-                                                            <tr>
-                                                              <th width="40" class="r20-c mobshow resp-table" style="font-weight: normal;">
-                                                                <table cellspacing="0" cellpadding="0" border="0" role="presentation" width="100%" class="r21-o" style="table-layout: fixed; width: 100%;">
-                                                                  <tr>
-                                                                    <td class="r22-i" style="font-size: 0px; line-height: 0px; padding-bottom: 5px; padding-top: 5px;"> <a href="https://github.com/makeplane" target="_blank" style="color: #006399; text-decoration: underline;"> <img src="https://creative-assets.mailinblue.com/editor/social-icons/rounded_colored/github_32px.png" width="32" border="0" style="display: block; width: 100%;"></a> </td>
-                                                                    <td class="nl2go-responsive-hide" width="8" style="font-size: 0px; line-height: 1px;">­ </td>
-                                                                  </tr>
-                                                                </table>
-                                                              </th>
-                                                              <th width="40" class="r20-c mobshow resp-table" style="font-weight: normal;">
-                                                                <table cellspacing="0" cellpadding="0" border="0" role="presentation" width="100%" class="r21-o" style="table-layout: fixed; width: 100%;">
-                                                                  <tr>
-                                                                    <td class="r22-i" style="font-size: 0px; line-height: 0px; padding-bottom: 5px; padding-top: 5px;"> <a href="https://www.linkedin.com/company/planepowers/" target="_blank" style="color: #006399; text-decoration: underline;"> <img src="https://creative-assets.mailinblue.com/editor/social-icons/rounded_colored/linkedin_32px.png" width="32" border="0" style="display: block; width: 100%;"></a> </td>
-                                                                    <td class="nl2go-responsive-hide" width="8" style="font-size: 0px; line-height: 1px;">­ </td>
-                                                                  </tr>
-                                                                </table>
-                                                              </th>
-                                                              <th width="40" class="r20-c mobshow resp-table" style="font-weight: normal;">
-                                                                <table cellspacing="0" cellpadding="0" border="0" role="presentation" width="100%" class="r21-o" style="table-layout: fixed; width: 100%;">
-                                                                  <tr>
-                                                                    <td class="r22-i" style="font-size: 0px; line-height: 0px; padding-bottom: 5px; padding-top: 5px;"> <a href="https://twitter.com/planepowers" target="_blank" style="color: #006399; text-decoration: underline;"> <img src="https://creative-assets.mailinblue.com/editor/social-icons/rounded_colored/twitter_32px.png" width="32" border="0" style="display: block; width: 100%;"></a> </td>
-                                                                    <td class="nl2go-responsive-hide" width="8" style="font-size: 0px; line-height: 1px;">­ </td>
-                                                                  </tr>
-                                                                </table>
-                                                              </th>
-                                                              <th width="32" class="r20-c mobshow resp-table" style="font-weight: normal;">
-                                                                <table cellspacing="0" cellpadding="0" border="0" role="presentation" width="100%" class="r23-o" style="table-layout: fixed; width: 100%;">
-                                                                  <tr>
-                                                                    <td class="r22-i" style="font-size: 0px; line-height: 0px; padding-bottom: 5px; padding-top: 5px;"> <a href="https://plane.so/" target="_blank" style="color: #006399; text-decoration: underline;"> <img src="https://creative-assets.mailinblue.com/editor/social-icons/rounded_colored/website_32px.png" width="32" border="0" style="display: block; width: 100%;"></a> </td>
-                                                                  </tr>
-                                                                </table>
-                                                              </th>
-                                                            </tr>
-                                                          </table>
-                                                        </td>
-                                                      </tr>
-                                                    </table>
-                                                  </td>
-                                                </tr>
-                                              </table>
-                                            </td>
-                                          </tr>
-                                        </table>
-                                      </td>
-                                    </tr>
-                                  </table>
-                                </td>
-                              </tr>
-                            </table>
-                          </th>
-                        </tr>
-                      </table>
-                    </td>
-                  </tr>
-                </table>
-                <table cellspacing="0" cellpadding="0" border="0" role="presentation" width="100%" align="center" class="r3-o" style="table-layout: fixed; width: 100%;">
-                  <tr>
-                    <td class="r4-i" style="padding-bottom: 20px; padding-top: 20px;">
-                      <table width="100%" cellspacing="0" cellpadding="0" border="0" role="presentation">
-                        <tr>
-                          <th width="100%" valign="top" class="r5-c" style="font-weight: normal;">
-                            <table cellspacing="0" cellpadding="0" border="0" role="presentation" width="100%" class="r6-o" style="table-layout: fixed; width: 100%;">
-                              <tr>
-                                <td valign="top" class="r7-i" style="padding-left: 15px; padding-right: 15px;">
-                                  <table width="100%" cellspacing="0" cellpadding="0" border="0" role="presentation">
-                                    <tr>
-                                      <td class="r12-c nl2go-default-textstyle" align="left" style="color: #3b3f44; font-family: georgia,serif; font-size: 18px; line-height: 1.5; word-break: break-word; padding-bottom: 15px; padding-top: 15px; text-align: left; valign: top;">
-                                        <div>
-                                          <p style="margin: 0; text-align: center;"><span style="font-family: Georgia, serif; font-size: 12px;">This email was sent to {{email}}. Please delete if you are not the intended recipient.</span></p>
-                                        </div>
-                                      </td>
-                                    </tr>
-                                  </table>
-                                </td>
-                              </tr>
-                            </table>
-                          </th>
-                        </tr>
-                      </table>
-                    </td>
-                  </tr>
-                </table>
-              </td>
-            </tr>
-          </table>
-        </td>
-      </tr>
-    </table>
+
+  <body
+    bgcolor="#f9f9f9"
+    style="
+      margin: 0;
+      padding: 0;
+      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
+        sans-serif;
+      font-weight: 400;
+      color: #474747;
+      -webkit-font-smoothing: antialiased;
+      -webkit-text-size-adjust: none;
+      background-color: #f9f9f9;
+    "
+  >
+    <!-- Preheader (hidden) -->
+    <span
+      class="preheader"
+      style="
+        display: none;
+        font-size: 1px;
+        color: transparent;
+        line-height: 1px;
+        max-height: 0;
+        max-width: 0;
+        opacity: 0;
+        overflow: hidden;
+        mso-hide: all;
+        visibility: hidden;
+      "
+    >
+      {{first_name}} has invited you to join {{workspace_name}} on Plane.
+    </span>
+
+    <!-- Outer Wrapper -->
+    <center
+      class="email-body"
+      style="width: 100%; background-color: #f9f9f9; padding: 40px 0;"
+    >
+      <!-- HEADER -->
+      <table role="presentation" width="100%">
+        <tr>
+          <td></td>
+
+          <td
+            class="email-container"
+            width="620"
+            style="width: 620px; max-width: 620px; margin: 0 auto;"
+          >
+            <table
+              role="presentation"
+              width="100%"
+              style="background-color: #000000;"
+            >
+              <tr>
+                <td style="padding: 24px 40px; text-align: center;">
+                  <img
+                    src="https://media.docs.plane.so/logo/new-logo-dark.png"
+                    width="120"
+                    alt="Plane"
+                    style="height: auto; display: block; margin: 0 auto;"
+                  />
+                </td>
+              </tr>
+            </table>
+          </td>
+
+          <td></td>
+        </tr>
+      </table>
+
+      <!-- BODY (card under header) -->
+      <table role="presentation" width="100%">
+        <tr>
+          <td></td>
+
+          <td
+            class="email-container"
+            width="620"
+            style="width: 620px; max-width: 620px; margin: 0 auto;"
+          >
+            <table
+              role="presentation"
+              width="100%"
+              class="email-content"
+              style="background-color: #ffffff; padding: 32px 40px 32px 40px;"
+            >
+              <tr>
+                <td
+                  style="
+                    font-size: 16px;
+                    line-height: 1.5;
+                    color: #474747;
+                    padding: 24px;
+                  "
+                >
+                  <!-- ========================================= -->
+                  <!--        PLANE WORKSPACE INVITE EMAIL       -->
+                  <!-- ========================================= -->
+
+                  <!-- Heading -->
+                  <h1
+                    style="
+                      margin: 0 0 12px;
+                      font-size: 22px;
+                      line-height: 1.35;
+                      font-weight: 600;
+                      color: #111111;
+                    "
+                  >
+                    Join {{workspace_name}} on Plane
+                  </h1>
+
+                  <!-- Intro copy -->
+                  <p style="margin: 0 0 12px;">
+                    {{first_name}} has invited you to collaborate with them in
+                    <strong>{{workspace_name}}</strong> workspace on Plane.
+                  </p>
+
+                  <!-- Primary button -->
+                  <table
+                    role="presentation"
+                    cellspacing="0"
+                    cellpadding="0"
+                    border="0"
+                    style="margin: 0 0 24px;"
+                  >
+                    <tr>
+                      <td>
+                        <a
+                          href="{{abs_url}}"
+                          target="_blank"
+                          style="
+                            background-color: #1080bc;
+                            border-radius: 6px;
+                            color: #ffffff;
+                            padding: 12px 24px;
+                            text-align: center;
+                            text-decoration: none;
+                            display: inline-block;
+                            font-size: 16px;
+                            font-weight: 500;
+                            white-space: nowrap;
+                          "
+                        >
+                          Accept invite
+                        </a>
+                      </td>
+                    </tr>
+                  </table>
+
+                  <!-- Secondary info -->
+                  <p
+                    style="
+                      margin: 0;
+                      font-size: 13px;
+                      line-height: 1.6;
+                      color: #5f5e5e;
+                    "
+                  >
+                    If the button doesn’t work, copy and paste this link into
+                    your browser:
+                  </p>
+
+                  <p
+                    style="
+                      margin: 6px 0 0;
+                      font-size: 13px;
+                      line-height: 1.6;
+                      color: #5f5e5e;
+                    "
+                  >
+                    <span
+                      style="
+                        display: inline-block;
+                        font-family: 'Courier New', Courier, monospace;
+                        font-size: 12px;
+                        background-color: #f3f3f3;
+                        padding: 4px 6px;
+                        border-radius: 3px;
+                        border: 1px solid #e9e9e9;
+                        word-break: break-all;
+                      "
+                      >{{abs_url}}</span
+                    >
+                  </p>
+
+                  <!-- Note -->
+                  <p
+                    style="
+                      margin: 16px 0 0;
+                      font-size: 13px;
+                      line-height: 1.6;
+                      color: #5f5e5e;
+                    "
+                  >
+                    Note: This invitation was intended for
+                    <span
+                      style="
+                        font-family: 'Courier New', Courier, monospace;
+                        font-size: 12px;
+                        background-color: #f3f3f3;
+                        padding: 2px 4px;
+                        border-radius: 3px;
+                        border: 1px solid #e9e9e9;
+                      "
+                      >{{email}}</span
+                    >. If you were not expecting this invitation, you can ignore
+                    this email.
+                  </p>
+                </td>
+              </tr>
+            </table>
+          </td>
+
+          <td></td>
+        </tr>
+      </table>
+
+      <!-- FOOTER (simple, aligned with body) -->
+      <table role="presentation" width="100%">
+        <tr>
+          <td></td>
+
+          <td
+            class="email-container"
+            width="620"
+            style="width: 620px; max-width: 620px; margin: 0 auto;"
+          >
+            <table
+              role="presentation"
+              width="100%"
+              class="email-footer"
+              style="background-color: #ffffff; padding: 0 40px 16px 40px;"
+            >
+              <tr>
+                <td
+                  style="
+                    border-top: 1px solid #e9e9e9;
+                    padding: 24px;
+                    font-size: 12px;
+                    line-height: 1.6;
+                    color: #979797;
+                    text-align: left;
+                  "
+                >
+                  <p style="margin: 0;">
+                    Plane Software, Inc.
+                  </p>
+                </td>
+              </tr>
+            </table>
+          </td>
+
+          <td></td>
+        </tr>
+      </table>
+    </center>
+
+    <base target="_blank" />
   </body>
 </html>
\ No newline at end of file
diff --git a/apps/api/templates/emails/notifications/project_addition.html b/apps/api/templates/emails/notifications/project_addition.html
index 59c7e0e4d..bc779f5ac 100644
--- a/apps/api/templates/emails/notifications/project_addition.html
+++ b/apps/api/templates/emails/notifications/project_addition.html
@@ -1,1591 +1,307 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html
-  xmlns="http://www.w3.org/1999/xhtml"
-  xmlns:v="urn:schemas-microsoft-com:vml"
-  xmlns:o="urn:schemas-microsoft-com:office:office"
->
+<!DOCTYPE html>
+<html lang="en">
   <head>
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="format-detection" content="telephone=no" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>You are have been invited to a Plane project</title>
-    <style type="text/css" emogrify="no">
-      #outlook a {
-        padding: 0;
-      }
-      .ExternalClass {
-        width: 100%;
-      }
-      .ExternalClass,
-      .ExternalClass p,
-      .ExternalClass span,
-      .ExternalClass font,
-      .ExternalClass td,
-      .ExternalClass div {
-        line-height: 100%;
-      }
-      table td {
-        border-collapse: collapse;
-        mso-line-height-rule: exactly;
-      }
-      .editable.image {
-        font-size: 0 !important;
-        line-height: 0 !important;
-      }
-      .nl2go_preheader {
-        display: none !important;
-        mso-hide: all !important;
-        mso-line-height-rule: exactly;
-        visibility: hidden !important;
-        line-height: 0px !important;
-        font-size: 0px !important;
-      }
-      body {
-        width: 100% !important;
-        -webkit-text-size-adjust: 100%;
-        -ms-text-size-adjust: 100%;
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <title>{{inviter_first_name}} invited you to {{project_name}} on Plane</title>
+
+    <style>
+      /* Basic resets for email clients */
+      body,
+      table,
+      td,
+      p {
         margin: 0;
         padding: 0;
       }
+
       img {
-        outline: none;
+        border: 0;
+        line-height: 100%;
         text-decoration: none;
         -ms-interpolation-mode: bicubic;
       }
-      a img {
-        border: none;
-      }
+
       table {
         border-collapse: collapse;
-        mso-table-lspace: 0pt;
-        mso-table-rspace: 0pt;
       }
-      th {
-        font-weight: normal;
-        text-align: left;
+
+      /* Mobile adjustments */
+      @media only screen and (max-width: 600px) {
+        .email-container {
+          width: 100% !important;
+        }
+
+        .email-content {
+          padding: 24px 20px !important;
+        }
+
+        .email-footer {
+          padding: 0 20px 16px 20px !important;
+        }
       }
+
       *[class="gmail-fix"] {
         display: none !important;
       }
     </style>
-    <style type="text/css" emogrify="no">
-      @media (max-width: 600px) {
-        .gmx-killpill {
-          content: " \03D1";
-        }
-      }
-    </style>
-    <style type="text/css" emogrify="no">
-      @media (max-width: 600px) {
-        .gmx-killpill {
-          content: " \03D1";
-        }
-        .r0-o {
-          border-style: solid !important;
-          margin: 0 auto 0 auto !important;
-          width: 320px !important;
-        }
-        .r1-i {
-          background-color: #ffffff !important;
-        }
-        .r2-c {
-          box-sizing: border-box !important;
-          text-align: center !important;
-          valign: top !important;
-          width: 100% !important;
-        }
-        .r3-o {
-          border-style: solid !important;
-          margin: 0 auto 0 auto !important;
-          width: 100% !important;
-        }
-        .r4-i {
-          padding-bottom: 20px !important;
-          padding-left: 15px !important;
-          padding-right: 15px !important;
-          padding-top: 20px !important;
-        }
-        .r5-c {
-          box-sizing: border-box !important;
-          display: block !important;
-          valign: top !important;
-          width: 100% !important;
-        }
-        .r6-o {
-          border-style: solid !important;
-          width: 100% !important;
-        }
-        .r7-i {
-          padding-left: 0px !important;
-          padding-right: 0px !important;
-        }
-        .r8-c {
-          box-sizing: border-box !important;
-          text-align: left !important;
-          valign: top !important;
-          width: 100% !important;
-        }
-        .r9-o {
-          border-style: solid !important;
-          margin: 0 auto 0 0 !important;
-          width: 100% !important;
-        }
-        .r10-i {
-          padding-bottom: 10px !important;
-          padding-left: 0px !important;
-          padding-right: 0px !important;
-          padding-top: 10px !important;
-        }
-        .r11-c {
-          box-sizing: border-box !important;
-          padding-bottom: 15px !important;
-          padding-top: 15px !important;
-          text-align: left !important;
-          valign: top !important;
-          width: 100% !important;
-        }
-        .r12-c {
-          box-sizing: border-box !important;
-          padding: 0 !important;
-          text-align: center !important;
-          valign: top !important;
-          width: 100% !important;
-        }
-        .r13-o {
-          border-style: solid !important;
-          margin: 0 auto 0 auto !important;
-          margin-bottom: 15px !important;
-          margin-top: 15px !important;
-          width: 100% !important;
-        }
-        .r14-i {
-          padding: 0 !important;
-          text-align: center !important;
-        }
-        .r15-r {
-          background-color: #006399 !important;
-          border-radius: 4px !important;
-          border-width: 0px !important;
-          box-sizing: border-box;
-          height: initial !important;
-          padding: 0 !important;
-          padding-bottom: 12px !important;
-          padding-top: 12px !important;
-          text-align: center !important;
-          width: 100% !important;
-        }
-        .r16-i {
-          padding-bottom: 0px !important;
-          padding-left: 15px !important;
-          padding-right: 15px !important;
-          padding-top: 0px !important;
-        }
-        .r17-c {
-          box-sizing: border-box !important;
-          padding-bottom: 5px !important;
-          padding-top: 5px !important;
-          text-align: center !important;
-          width: 100% !important;
-        }
-        .r18-i {
-          padding-bottom: 15px !important;
-          padding-left: 15px !important;
-          padding-right: 15px !important;
-          padding-top: 15px !important;
-        }
-        .r19-o {
-          border-bottom-color: #efefef !important;
-          border-bottom-width: 2px !important;
-          border-left-color: #efefef !important;
-          border-left-width: 2px !important;
-          border-right-color: #efefef !important;
-          border-right-width: 2px !important;
-          border-style: solid !important;
-          border-top-color: #efefef !important;
-          border-top-width: 2px !important;
-          margin: 0 auto 0 0 !important;
-          width: 100% !important;
-        }
-        .r20-i {
-          padding-bottom: 5px !important;
-          padding-left: 5px !important;
-          padding-right: 5px !important;
-          padding-top: 5px !important;
-          text-align: left !important;
-        }
-        .r21-i {
-          padding-bottom: 5px !important;
-          padding-left: 15px !important;
-          padding-right: 15px !important;
-          padding-top: 5px !important;
-        }
-        .r22-c {
-          box-sizing: border-box !important;
-          text-align: center !important;
-          width: 100% !important;
-        }
-        .r23-c {
-          box-sizing: border-box !important;
-          width: 100% !important;
-        }
-        .r24-i {
-          font-size: 0px !important;
-          padding-bottom: 10px !important;
-          padding-left: 65px !important;
-          padding-right: 65px !important;
-          padding-top: 10px !important;
-        }
-        .r25-c {
-          box-sizing: border-box !important;
-          width: 32px !important;
-        }
-        .r26-o {
-          border-style: solid !important;
-          margin-right: 8px !important;
-          width: 32px !important;
-        }
-        .r27-i {
-          padding-bottom: 5px !important;
-          padding-top: 5px !important;
-        }
-        .r28-o {
-          border-style: solid !important;
-          margin-right: 0px !important;
-          width: 32px !important;
-        }
-        .r29-i {
-          padding-bottom: 0px !important;
-          padding-top: 5px !important;
-          text-align: center !important;
-        }
-        body {
-          -webkit-text-size-adjust: none;
-        }
-        .nl2go-responsive-hide {
-          display: none;
-        }
-        .nl2go-body-table {
-          min-width: unset !important;
-        }
-        .mobshow {
-          height: auto !important;
-          overflow: visible !important;
-          max-height: unset !important;
-          visibility: visible !important;
-          border: none !important;
-        }
-        .resp-table {
-          display: inline-table !important;
-        }
-        .magic-resp {
-          display: table-cell !important;
-        }
-      }
-    </style>
-    <style type="text/css">
-      p,
-      h1,
-      h2,
-      h3,
-      h4,
-      ol,
-      ul,
-      li {
-        margin: 0;
-      }
-      a,
-      a:link {
-        color: #006399;
-        text-decoration: underline;
-      }
-      .nl2go-default-textstyle {
-        color: #3b3f44;
-        font-family: georgia, serif;
-        font-size: 16px;
-        line-height: 1.5;
-        word-break: break-word;
-      }
-      .default-button {
-        color: #ffffff;
-        font-family: georgia, serif;
-        font-size: 16px;
-        font-style: normal;
-        font-weight: normal;
-        line-height: 1.15;
-        text-decoration: none;
-        word-break: break-word;
-      }
-      .default-heading1 {
-        color: #1f2d3d;
-        font-family: arial, helvetica, sans-serif;
-        font-size: 36px;
-        word-break: break-word;
-      }
-      .default-heading2 {
-        color: #1f2d3d;
-        font-family: arial, helvetica, sans-serif;
-        font-size: 32px;
-        word-break: break-word;
-      }
-      .default-heading3 {
-        color: #1f2d3d;
-        font-family: arial, helvetica, sans-serif;
-        font-size: 24px;
-        word-break: break-word;
-      }
-      .default-heading4 {
-        color: #1f2d3d;
-        font-family: arial, helvetica, sans-serif;
-        font-size: 18px;
-        word-break: break-word;
-      }
-      a[x-apple-data-detectors] {
-        color: inherit !important;
-        text-decoration: inherit !important;
-        font-size: inherit !important;
-        font-family: inherit !important;
-        font-weight: inherit !important;
-        line-height: inherit !important;
-      }
-      .no-show-for-you {
-        border: none;
-        display: none;
-        float: none;
-        font-size: 0;
-        height: 0;
-        line-height: 0;
-        max-height: 0;
-        mso-hide: all;
-        overflow: hidden;
-        table-layout: fixed;
-        visibility: hidden;
-        width: 0;
-      }
-    </style>
-    <!--[if mso
-      ]><xml>
-        <o:OfficeDocumentSettings>
-          <o:AllowPNG /> <o:PixelsPerInch>96</o:PixelsPerInch>
-        </o:OfficeDocumentSettings>
-      </xml><!
-    [endif]-->
-    <style type="text/css">
-      a:link {
-        color: #006399;
-        text-decoration: underline;
-      }
-    </style>
   </head>
+
   <body
-    bgcolor="#ffffff"
-    text="#3b3f44"
-    link="#006399"
-    yahoo="fix"
-    style="background-color: #ffffff"
+    bgcolor="#f9f9f9"
+    style="
+      margin: 0;
+      padding: 0;
+      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
+        sans-serif;
+      font-weight: 400;
+      color: #474747;
+      -webkit-font-smoothing: antialiased;
+      -webkit-text-size-adjust: none;
+      background-color: #f9f9f9;
+    "
   >
-    <table
-      cellspacing="0"
-      cellpadding="0"
-      border="0"
-      role="presentation"
-      class="nl2go-body-table"
-      width="100%"
-      style="background-color: #ffffff; width: 100%"
+    <!-- Preheader (hidden) -->
+    <span
+      class="preheader"
+      style="
+        display: none;
+        font-size: 1px;
+        color: transparent;
+        line-height: 1px;
+        max-height: 0;
+        max-width: 0;
+        opacity: 0;
+        overflow: hidden;
+        mso-hide: all;
+        visibility: hidden;
+      "
     >
-      <tr>
-        <td>
-          <table
-            cellspacing="0"
-            cellpadding="0"
-            border="0"
-            role="presentation"
-            width="600"
-            align="center"
-            class="r0-o"
-            style="table-layout: fixed; width: 600px"
+      {{inviter_first_name}} has invited you to the {{project_name}} project in
+      {{workspace_name}} on Plane.
+    </span>
+
+    <!-- Outer Wrapper -->
+    <center
+      class="email-body"
+      style="width: 100%; background-color: #f9f9f9; padding: 40px 0;"
+    >
+      <!-- HEADER -->
+      <table role="presentation" width="100%">
+        <tr>
+          <td></td>
+          <td
+            class="email-container"
+            width="620"
+            style="width: 620px; max-width: 620px; margin: 0 auto;"
           >
-            <tr>
-              <td valign="top" class="r1-i" style="background-color: #ffffff">
-                <table
-                  cellspacing="0"
-                  cellpadding="0"
-                  border="0"
-                  role="presentation"
-                  width="100%"
-                  align="center"
-                  class="r3-o"
-                  style="table-layout: fixed; width: 100%"
+            <table
+              role="presentation"
+              width="100%"
+              style="background-color: #000000;"
+            >
+              <tr>
+                <td style="padding: 24px 40px; text-align: center;">
+                  <img
+                    src="https://media.docs.plane.so/logo/new-logo-dark.png"
+                    width="120"
+                    alt="Plane"
+                    style="height: auto; display: block; margin: 0 auto;"
+                  />
+                </td>
+              </tr>
+            </table>
+          </td>
+          <td></td>
+        </tr>
+      </table>
+
+      <!-- BODY -->
+      <table role="presentation" width="100%">
+        <tr>
+          <td></td>
+          <td
+            class="email-container"
+            width="620"
+            style="width: 620px; max-width: 620px; margin: 0 auto;"
+          >
+            <table
+              role="presentation"
+              width="100%"
+              class="email-content"
+              style="background-color: #ffffff; padding: 32px 40px 32px 40px;"
+            >
+              <tr>
+                <td
+                  style="
+                    padding: 24px;
+                    font-size: 16px;
+                    line-height: 1.5;
+                    color: #474747;
+                  "
                 >
-                  <tr>
-                    <td
-                      class="r4-i"
-                      style="padding-bottom: 20px; padding-top: 20px"
+                  <!-- ========================================= -->
+                  <!--     PLANE PROJECT INVITE – MAIN COPY      -->
+                  <!-- ========================================= -->
+
+                  <!-- Heading -->
+                  <h1
+                    style="
+                      margin: 0 0 12px;
+                      font-size: 22px;
+                      line-height: 1.35;
+                      font-weight: 600;
+                      color: #111111;
+                    "
+                  >
+                    You've been invited to the {{project_name}} project on Plane
+                  </h1>
+
+                  <!-- Intro text -->
+                  <p style="margin: 0 0 12px;">
+                    {{inviter_first_name}} has invited you to work with them in
+                    <strong>{{project_name}}</strong> in the workspace
+                    <strong>{{workspace_name}}</strong> on Plane.
+                  </p>
+
+                  <!-- CTA button -->
+                  <table
+                    role="presentation"
+                    cellspacing="0"
+                    cellpadding="0"
+                    border="0"
+                    style="margin: 16px 0 24px;"
+                  >
+                    <tr>
+                      <td>
+                        <a
+                          href="{{project_url}}"
+                          target="_blank"
+                          style="
+                            background-color: #1080bc;
+                            border-radius: 6px;
+                            color: #ffffff;
+                            padding: 12px 24px;
+                            text-align: center;
+                            text-decoration: none;
+                            display: inline-block;
+                            font-size: 16px;
+                            font-weight: 500;
+                            white-space: nowrap;
+                          "
+                        >
+                          Go to project
+                        </a>
+                      </td>
+                    </tr>
+                  </table>
+
+                  <!-- Fallback link -->
+                  <p
+                    style="
+                      margin: 0;
+                      font-size: 13px;
+                      line-height: 1.6;
+                      color: #5f5e5e;
+                    "
+                  >
+                    If the button doesn’t work, copy and paste this link into
+                    your browser:
+                  </p>
+
+                  <p
+                    style="
+                      margin: 6px 0 0;
+                      font-size: 13px;
+                      line-height: 1.6;
+                      color: #5f5e5e;
+                    "
+                  >
+                    <span
+                      style="
+                        display: inline-block;
+                        font-family: 'Courier New', Courier, monospace;
+                        font-size: 12px;
+                        background-color: #f3f3f3;
+                        padding: 4px 6px;
+                        border-radius: 3px;
+                        border: 1px solid #e9e9e9;
+                        word-break: break-all;
+                      "
                     >
-                      <table
-                        width="100%"
-                        cellspacing="0"
-                        cellpadding="0"
-                        border="0"
-                        role="presentation"
-                      >
-                        <tr>
-                          <th
-                            width="100%"
-                            valign="top"
-                            class="r5-c"
-                            style="font-weight: normal"
-                          >
-                            <table
-                              cellspacing="0"
-                              cellpadding="0"
-                              border="0"
-                              role="presentation"
-                              width="100%"
-                              class="r6-o"
-                              style="table-layout: fixed; width: 100%"
-                            >
-                              <tr>
-                                <td
-                                  valign="top"
-                                  class="r7-i"
-                                  style="
-                                    padding-left: 10px;
-                                    padding-right: 10px;
-                                  "
-                                >
-                                  <table
-                                    width="100%"
-                                    cellspacing="0"
-                                    cellpadding="0"
-                                    border="0"
-                                    role="presentation"
-                                  >
-                                    <tr>
-                                      <td class="r8-c" align="left">
-                                        <table
-                                          cellspacing="0"
-                                          cellpadding="0"
-                                          border="0"
-                                          role="presentation"
-                                          width="150"
-                                          class="r9-o"
-                                          style="
-                                            table-layout: fixed;
-                                            width: 150px;
-                                          "
-                                        >
-                                          <tr>
-                                            <td
-                                              style="
-                                                font-size: 0px;
-                                                line-height: 0px;
-                                              "
-                                            >
-                                              <img
-                                                src="https://media.docs.plane.so/logo/new-logo-white.png"
-                                                width="150"
-                                                border="0"
-                                                style="
-                                                  display: block;
-                                                  width: 100%;
-                                                "
-                                              />
-                                            </td>
-                                          </tr>
-                                        </table>
-                                      </td>
-                                    </tr>
-                                  </table>
-                                </td>
-                              </tr>
-                            </table>
-                          </th>
-                        </tr>
-                      </table>
-                    </td>
-                  </tr>
-                </table>
-                <table
-                  cellspacing="0"
-                  cellpadding="0"
-                  border="0"
-                  role="presentation"
-                  width="100%"
-                  align="center"
-                  class="r3-o"
-                  style="table-layout: fixed; width: 100%"
-                >
-                  <tr>
-                    <td
-                      class="r10-i"
-                      style="padding-bottom: 10px; padding-top: 10px"
+                      {{project_url}}
+                    </span>
+                  </p>
+
+                  <!-- Note -->
+                  <p
+                    style="
+                      margin: 16px 0 0;
+                      font-size: 13px;
+                      line-height: 1.6;
+                      color: #5f5e5e;
+                    "
+                  >
+                    Note: This email was sent to
+                    <span
+                      style="
+                        font-family: 'Courier New', Courier, monospace;
+                        font-size: 12px;
+                        background-color: #f3f3f3;
+                        padding: 2px 4px;
+                        border-radius: 3px;
+                        border: 1px solid #e9e9e9;
+                      "
                     >
-                      <table
-                        width="100%"
-                        cellspacing="0"
-                        cellpadding="0"
-                        border="0"
-                        role="presentation"
-                      >
-                        <tr>
-                          <th
-                            width="100%"
-                            valign="top"
-                            class="r5-c"
-                            style="font-weight: normal"
-                          >
-                            <table
-                              cellspacing="0"
-                              cellpadding="0"
-                              border="0"
-                              role="presentation"
-                              width="100%"
-                              class="r6-o"
-                              style="table-layout: fixed; width: 100%"
-                            >
-                              <tr>
-                                <td
-                                  valign="top"
-                                  class="r7-i"
-                                  style="
-                                    padding-left: 15px;
-                                    padding-right: 15px;
-                                  "
-                                >
-                                  <table
-                                    width="100%"
-                                    cellspacing="0"
-                                    cellpadding="0"
-                                    border="0"
-                                    role="presentation"
-                                  >
-                                    <tr>
-                                      <td
-                                        class="r11-c nl2go-default-textstyle"
-                                        align="left"
-                                        style="
-                                          color: #3b3f44;
-                                          font-family: georgia, serif;
-                                          font-size: 16px;
-                                          word-break: break-word;
-                                          line-height: 1.5;
-                                          padding-bottom: 15px;
-                                          padding-top: 15px;
-                                          text-align: left;
-                                          valign: top;
-                                        "
-                                      >
-                                        <div>
-                                          <h2
-                                            class="default-heading2"
-                                            style="
-                                              color: #1f2d3d;
-                                              font-family: arial, helvetica,
-                                                sans-serif;
-                                              font-size: 32px;
-                                              -webkit-text-stroke-width: 0px;
-                                              font-style: normal;
-                                              letter-spacing: normal;
-                                              margin: 0px;
-                                              orphans: 2;
-                                              text-decoration-style: initial;
-                                              text-decoration-thickness: initial;
-                                              text-indent: 0px;
-                                              text-transform: none;
-                                              white-space: normal;
-                                              widows: 2;
-                                              word-break: break-word;
-                                              word-spacing: 0px;
-                                            "
-                                          >
-                                            You've been invited to a Plane
-                                            project.
-                                          </h2>
-                                        </div>
-                                      </td>
-                                    </tr>
-                                    <tr>
-                                      <td
-                                        class="r11-c nl2go-default-textstyle"
-                                        align="left"
-                                        style="
-                                          color: #3b3f44;
-                                          font-family: georgia, serif;
-                                          font-size: 16px;
-                                          line-height: 1.5;
-                                          word-break: break-word;
-                                          padding-bottom: 15px;
-                                          padding-top: 15px;
-                                          text-align: left;
-                                          valign: top;
-                                        "
-                                      >
-                                        <div>
-                                          <p
-                                            style="
-                                              -webkit-text-stroke-width: 0px;
-                                              font-style: normal;
-                                              letter-spacing: normal;
-                                              margin: 0px;
-                                              orphans: 2;
-                                              text-decoration-style: initial;
-                                              text-decoration-thickness: initial;
-                                              text-indent: 0px;
-                                              text-transform: none;
-                                              white-space: normal;
-                                              widows: 2;
-                                              word-break: break-word;
-                                              word-spacing: 0px;
-                                            "
-                                          >
-                                            <span
-                                              style="
-                                                font-family: Georgia;
-                                                font-size: 17px;
-                                              "
-                                              >{{inviter_first_name}} has
-                                              invited you to work with them in
-                                               {{project_name}} in the workspace
-                                              {{workspace_name}} on Plane.</span
-                                            >
-                                          </p>
-                                        </div>
-                                      </td>
-                                    </tr>
-                                    <tr>
-                                      <td
-                                        class="r12-c"
-                                        align="center"
-                                        style="
-                                          align: center;
-                                          padding-bottom: 15px;
-                                          padding-top: 15px;
-                                          valign: top;
-                                        "
-                                      >
-                                        <table
-                                          cellspacing="0"
-                                          cellpadding="0"
-                                          border="0"
-                                          role="presentation"
-                                          width="285"
-                                          class="r13-o"
-                                          style="
-                                            background-color: #006399;
-                                            border-collapse: separate;
-                                            border-color: #006399;
-                                            border-radius: 4px;
-                                            border-style: solid;
-                                            border-width: 0px;
-                                            table-layout: fixed;
-                                            width: 285px;
-                                          "
-                                        >
-                                          <tr>
-                                            <td
-                                              height="18"
-                                              align="center"
-                                              valign="top"
-                                              class="r14-i nl2go-default-textstyle"
-                                              style="
-                                                word-break: break-word;
-                                                background-color: #006399;
-                                                border-radius: 4px;
-                                                color: #ffffff;
-                                                font-family: georgia, serif;
-                                                font-size: 16px;
-                                                font-style: normal;
-                                                line-height: 1.15;
-                                                padding-bottom: 12px;
-                                                padding-top: 12px;
-                                                text-align: center;
-                                              "
-                                            >
-                                              <a
-                                                href="{{project_url}}"
-                                                class="r15-r default-button"
-                                                target="_blank"
-                                                data-btn="1"
-                                                style="
-                                                  font-style: normal;
-                                                  font-weight: normal;
-                                                  line-height: 1.15;
-                                                  text-decoration: none;
-                                                  word-break: break-word;
-                                                  word-wrap: break-word;
-                                                  display: block;
-                                                  -webkit-text-size-adjust: none;
-                                                  color: #ffffff;
-                                                  font-family: georgia, serif;
-                                                  font-size: 16px;
-                                                "
-                                              >
-                                                <span>Go to project</span></a
-                                              >
-                                            </td>
-                                          </tr>
-                                        </table>
-                                      </td>
-                                    </tr>
-                                  </table>
-                                </td>
-                              </tr>
-                            </table>
-                          </th>
-                        </tr>
-                      </table>
-                    </td>
-                  </tr>
-                </table>
-                <table
-                  cellspacing="0"
-                  cellpadding="0"
-                  border="0"
-                  role="presentation"
-                  width="100%"
-                  align="center"
-                  class="r3-o"
-                  style="table-layout: fixed; width: 100%"
+                      {{email}}
+                    </span>.
+                    If you weren’t expecting this invitation, you can safely
+                    ignore this email.
+                  </p>
+                </td>
+              </tr>
+            </table>
+          </td>
+          <td></td>
+        </tr>
+      </table>
+
+      <!-- FOOTER -->
+      <table role="presentation" width="100%">
+        <tr>
+          <td></td>
+          <td
+            class="email-container"
+            width="620"
+            style="width: 620px; max-width: 620px; margin: 0 auto;"
+          >
+            <table
+              role="presentation"
+              width="100%"
+              class="email-footer"
+              style="background-color: #ffffff; padding: 0 40px 16px 40px;"
+            >
+              <tr>
+                <td
+                  style="
+                    border-top: 1px solid #e9e9e9;
+                    padding: 24px;
+                    font-size: 12px;
+                    line-height: 1.6;
+                    color: #979797;
+                    text-align: left;
+                  "
                 >
-                  <tr>
-                    <td class="r16-i">
-                      <table
-                        width="100%"
-                        cellspacing="0"
-                        cellpadding="0"
-                        border="0"
-                        role="presentation"
-                      >
-                        <tr>
-                          <th
-                            width="100%"
-                            valign="top"
-                            class="r5-c"
-                            style="font-weight: normal"
-                          >
-                            <table
-                              cellspacing="0"
-                              cellpadding="0"
-                              border="0"
-                              role="presentation"
-                              width="100%"
-                              class="r6-o"
-                              style="table-layout: fixed; width: 100%"
-                            >
-                              <tr>
-                                <td
-                                  valign="top"
-                                  class="r7-i"
-                                  style="
-                                    padding-left: 15px;
-                                    padding-right: 15px;
-                                  "
-                                >
-                                  <table
-                                    width="100%"
-                                    cellspacing="0"
-                                    cellpadding="0"
-                                    border="0"
-                                    role="presentation"
-                                  >
-                                    <tr>
-                                      <td
-                                        class="r17-c"
-                                        align="center"
-                                        style="
-                                          padding-bottom: 5px;
-                                          padding-top: 5px;
-                                        "
-                                      >
-                                        <table
-                                          width="100%"
-                                          cellspacing="0"
-                                          cellpadding="0"
-                                          border="0"
-                                          role="presentation"
-                                          height="1"
-                                          style="
-                                            border-top-style: solid;
-                                            background-clip: border-box;
-                                            border-top-color: #efefef;
-                                            border-top-width: 1px;
-                                            font-size: 1px;
-                                            line-height: 1px;
-                                          "
-                                        >
-                                          <tr>
-                                            <td
-                                              height="0"
-                                              style="
-                                                font-size: 0px;
-                                                line-height: 0px;
-                                              "
-                                            >
-                                              ­
-                                            </td>
-                                          </tr>
-                                        </table>
-                                      </td>
-                                    </tr>
-                                  </table>
-                                </td>
-                              </tr>
-                            </table>
-                          </th>
-                        </tr>
-                      </table>
-                    </td>
-                  </tr>
-                </table>
-                <table
-                  cellspacing="0"
-                  cellpadding="0"
-                  border="0"
-                  role="presentation"
-                  width="100%"
-                  align="center"
-                  class="r3-o"
-                  style="table-layout: fixed; width: 100%"
-                >
-                  <tr>
-                    <td
-                      class="r18-i"
-                      style="padding-bottom: 15px; padding-top: 15px"
-                    >
-                      <table
-                        width="100%"
-                        cellspacing="0"
-                        cellpadding="0"
-                        border="0"
-                        role="presentation"
-                      >
-                        <tr>
-                          <th
-                            width="100%"
-                            valign="top"
-                            class="r5-c"
-                            style="font-weight: normal"
-                          >
-                            <table
-                              cellspacing="0"
-                              cellpadding="0"
-                              border="0"
-                              role="presentation"
-                              width="100%"
-                              class="r6-o"
-                              style="table-layout: fixed; width: 100%"
-                            >
-                              <tr>
-                                <td
-                                  valign="top"
-                                  class="r7-i"
-                                  style="
-                                    padding-left: 15px;
-                                    padding-right: 15px;
-                                  "
-                                >
-                                  <table
-                                    width="100%"
-                                    cellspacing="0"
-                                    cellpadding="0"
-                                    border="0"
-                                    role="presentation"
-                                  >
-                                    <tr>
-                                      <td class="r8-c" align="left">
-                                        <table
-                                          cellspacing="0"
-                                          cellpadding="0"
-                                          border="0"
-                                          role="presentation"
-                                          width="100%"
-                                          class="r19-o"
-                                          style="
-                                            table-layout: fixed;
-                                            width: 100%;
-                                          "
-                                        >
-                                          <tr class="nl2go-responsive-hide">
-                                            <td
-                                              height="2"
-                                              width="2"
-                                              style="
-                                                font-size: 2px;
-                                                line-height: 2px;
-                                                background-color: #efefef;
-                                              "
-                                            >
-                                              ­
-                                            </td>
-                                            <td
-                                              height="2"
-                                              style="
-                                                font-size: 2px;
-                                                line-height: 2px;
-                                                background-color: #efefef;
-                                              "
-                                            >
-                                              ­
-                                            </td>
-                                            <td
-                                              height="2"
-                                              width="2"
-                                              style="
-                                                font-size: 2px;
-                                                line-height: 2px;
-                                                background-color: #efefef;
-                                              "
-                                            >
-                                              ­
-                                            </td>
-                                          </tr>
-                                          <tr>
-                                            <td
-                                              class="nl2go-responsive-hide"
-                                              width="2"
-                                              style="
-                                                font-size: 0px;
-                                                line-height: 1px;
-                                                background-color: #efefef;
-                                              "
-                                            >
-                                              ­
-                                            </td>
-                                            <td
-                                              align="left"
-                                              valign="top"
-                                              class="r20-i nl2go-default-textstyle"
-                                              style="
-                                                color: #3b3f44;
-                                                font-family: georgia, serif;
-                                                font-size: 16px;
-                                                word-break: break-word;
-                                                line-height: 1.5;
-                                                padding-bottom: 5px;
-                                                padding-left: 5px;
-                                                padding-right: 5px;
-                                                padding-top: 5px;
-                                                text-align: left;
-                                              "
-                                            >
-                                              <div>
-                                                <p style="margin: 0">
-                                                  <span style="font-size: 13px"
-                                                    >Despite our popularity, we
-                                                    are humbly early-stage. We
-                                                    are shipping fast, so please
-                                                    reach out to us with feature
-                                                    requests, major and minor
-                                                    nits, and anything else you
-                                                    find missing. We read every </span
-                                                  ><a
-                                                    href="https://discord.com/channels/1031547764020084846/1094927053867995176"
-                                                    title="Plane Support on Discod"
-                                                    target="_blank"
-                                                    style="
-                                                      color: #006399;
-                                                      text-decoration: underline;
-                                                    "
-                                                    ><span
-                                                      style="font-size: 13px"
-                                                      >message</span
-                                                    ></a
-                                                  ><span style="font-size: 13px"
-                                                    >, </span
-                                                  ><a
-                                                    href="http://twitter.com/planepowers"
-                                                    title="@planepowers"
-                                                    target="_blank"
-                                                    style="
-                                                      color: #006399;
-                                                      text-decoration: underline;
-                                                    "
-                                                    ><span
-                                                      style="font-size: 13px"
-                                                      >tweet</span
-                                                    ></a
-                                                  ><span style="font-size: 13px"
-                                                    >, and </span
-                                                  ><a
-                                                    href="https://github.com/makeplane/plane/pulls"
-                                                    title="Plane's GitHub conversations"
-                                                    target="_blank"
-                                                    style="
-                                                      color: #006399;
-                                                      text-decoration: underline;
-                                                    "
-                                                    ><span
-                                                      style="font-size: 13px"
-                                                      >conversation</span
-                                                    ></a
-                                                  ><span
-                                                    style="font-size: 13px"
-                                                  >
-                                                    and update </span
-                                                  ><a
-                                                    href="https://plane.sh/plane/0b170a1c-0e55-47cb-9307-ea49a05672b5?board=kanban"
-                                                    title="Plane's roadmap"
-                                                    target="_blank"
-                                                    style="
-                                                      color: #006399;
-                                                      text-decoration: underline;
-                                                    "
-                                                    ><span
-                                                      style="font-size: 13px"
-                                                      >our public roadmap</span
-                                                    ></a
-                                                  ><span style="font-size: 13px"
-                                                    >.</span
-                                                  >
-                                                </p>
-                                              </div>
-                                            </td>
-                                            <td
-                                              class="nl2go-responsive-hide"
-                                              width="2"
-                                              style="
-                                                font-size: 0px;
-                                                line-height: 1px;
-                                                background-color: #efefef;
-                                              "
-                                            >
-                                              ­
-                                            </td>
-                                          </tr>
-                                          <tr class="nl2go-responsive-hide">
-                                            <td
-                                              height="2"
-                                              width="2"
-                                              style="
-                                                font-size: 2px;
-                                                line-height: 2px;
-                                                background-color: #efefef;
-                                              "
-                                            >
-                                              ­
-                                            </td>
-                                            <td
-                                              height="2"
-                                              style="
-                                                font-size: 2px;
-                                                line-height: 2px;
-                                                background-color: #efefef;
-                                              "
-                                            >
-                                              ­
-                                            </td>
-                                            <td
-                                              height="2"
-                                              width="2"
-                                              style="
-                                                font-size: 2px;
-                                                line-height: 2px;
-                                                background-color: #efefef;
-                                              "
-                                            >
-                                              ­
-                                            </td>
-                                          </tr>
-                                        </table>
-                                      </td>
-                                    </tr>
-                                  </table>
-                                </td>
-                              </tr>
-                            </table>
-                          </th>
-                        </tr>
-                      </table>
-                    </td>
-                  </tr>
-                </table>
-                <table
-                  cellspacing="0"
-                  cellpadding="0"
-                  border="0"
-                  role="presentation"
-                  width="100%"
-                  align="center"
-                  class="r3-o"
-                  style="table-layout: fixed; width: 100%"
-                >
-                  <tr>
-                    <td
-                      class="r21-i"
-                      style="padding-bottom: 5px; padding-top: 5px"
-                    >
-                      <table
-                        width="100%"
-                        cellspacing="0"
-                        cellpadding="0"
-                        border="0"
-                        role="presentation"
-                      >
-                        <tr>
-                          <th
-                            width="100%"
-                            valign="top"
-                            class="r5-c"
-                            style="font-weight: normal"
-                          >
-                            <table
-                              cellspacing="0"
-                              cellpadding="0"
-                              border="0"
-                              role="presentation"
-                              width="100%"
-                              class="r6-o"
-                              style="table-layout: fixed; width: 100%"
-                            >
-                              <tr>
-                                <td
-                                  valign="top"
-                                  class="r7-i"
-                                  style="
-                                    padding-left: 15px;
-                                    padding-right: 15px;
-                                  "
-                                >
-                                  <table
-                                    width="100%"
-                                    cellspacing="0"
-                                    cellpadding="0"
-                                    border="0"
-                                    role="presentation"
-                                  >
-                                    <tr>
-                                      <td class="r22-c" align="center">
-                                        <table
-                                          cellspacing="0"
-                                          cellpadding="0"
-                                          border="0"
-                                          role="presentation"
-                                          width="570"
-                                          align="center"
-                                          class="r3-o"
-                                          style="
-                                            table-layout: fixed;
-                                            width: 570px;
-                                          "
-                                        >
-                                          <tr>
-                                            <td valign="top">
-                                              <table
-                                                width="100%"
-                                                cellspacing="0"
-                                                cellpadding="0"
-                                                border="0"
-                                                role="presentation"
-                                              >
-                                                <tr>
-                                                  <td
-                                                    class="r23-c"
-                                                    style="
-                                                      display: inline-block;
-                                                    "
-                                                  >
-                                                    <table
-                                                      cellspacing="0"
-                                                      cellpadding="0"
-                                                      border="0"
-                                                      role="presentation"
-                                                      width="570"
-                                                      class="r6-o"
-                                                      style="
-                                                        table-layout: fixed;
-                                                        width: 570px;
-                                                      "
-                                                    >
-                                                      <tr>
-                                                        <td
-                                                          class="r24-i"
-                                                          style="
-                                                            padding-bottom: 10px;
-                                                            padding-left: 209px;
-                                                            padding-right: 209px;
-                                                            padding-top: 10px;
-                                                          "
-                                                        >
-                                                          <table
-                                                            width="100%"
-                                                            cellspacing="0"
-                                                            cellpadding="0"
-                                                            border="0"
-                                                            role="presentation"
-                                                          >
-                                                            <tr>
-                                                              <th
-                                                                width="40"
-                                                                class="r25-c mobshow resp-table"
-                                                                style="
-                                                                  font-weight: normal;
-                                                                "
-                                                              >
-                                                                <table
-                                                                  cellspacing="0"
-                                                                  cellpadding="0"
-                                                                  border="0"
-                                                                  role="presentation"
-                                                                  width="100%"
-                                                                  class="r26-o"
-                                                                  style="
-                                                                    table-layout: fixed;
-                                                                    width: 100%;
-                                                                  "
-                                                                >
-                                                                  <tr>
-                                                                    <td
-                                                                      class="r27-i"
-                                                                      style="
-                                                                        font-size: 0px;
-                                                                        line-height: 0px;
-                                                                        padding-bottom: 5px;
-                                                                        padding-top: 5px;
-                                                                      "
-                                                                    >
-                                                                      <a
-                                                                        href="https://github.com/makeplane"
-                                                                        target="_blank"
-                                                                        style="
-                                                                          color: #006399;
-                                                                          text-decoration: underline;
-                                                                        "
-                                                                      >
-                                                                        <img
-                                                                          src="https://creative-assets.mailinblue.com/editor/social-icons/rounded_colored/github_32px.png"
-                                                                          width="32"
-                                                                          border="0"
-                                                                          style="
-                                                                            display: block;
-                                                                            width: 100%;
-                                                                          "
-                                                                      /></a>
-                                                                    </td>
-                                                                    <td
-                                                                      class="nl2go-responsive-hide"
-                                                                      width="8"
-                                                                      style="
-                                                                        font-size: 0px;
-                                                                        line-height: 1px;
-                                                                      "
-                                                                    >
-                                                                      ­
-                                                                    </td>
-                                                                  </tr>
-                                                                </table>
-                                                              </th>
-                                                              <th
-                                                                width="40"
-                                                                class="r25-c mobshow resp-table"
-                                                                style="
-                                                                  font-weight: normal;
-                                                                "
-                                                              >
-                                                                <table
-                                                                  cellspacing="0"
-                                                                  cellpadding="0"
-                                                                  border="0"
-                                                                  role="presentation"
-                                                                  width="100%"
-                                                                  class="r26-o"
-                                                                  style="
-                                                                    table-layout: fixed;
-                                                                    width: 100%;
-                                                                  "
-                                                                >
-                                                                  <tr>
-                                                                    <td
-                                                                      class="r27-i"
-                                                                      style="
-                                                                        font-size: 0px;
-                                                                        line-height: 0px;
-                                                                        padding-bottom: 5px;
-                                                                        padding-top: 5px;
-                                                                      "
-                                                                    >
-                                                                      <a
-                                                                        href="https://www.linkedin.com/company/planepowers/"
-                                                                        target="_blank"
-                                                                        style="
-                                                                          color: #006399;
-                                                                          text-decoration: underline;
-                                                                        "
-                                                                      >
-                                                                        <img
-                                                                          src="https://creative-assets.mailinblue.com/editor/social-icons/rounded_colored/linkedin_32px.png"
-                                                                          width="32"
-                                                                          border="0"
-                                                                          style="
-                                                                            display: block;
-                                                                            width: 100%;
-                                                                          "
-                                                                      /></a>
-                                                                    </td>
-                                                                    <td
-                                                                      class="nl2go-responsive-hide"
-                                                                      width="8"
-                                                                      style="
-                                                                        font-size: 0px;
-                                                                        line-height: 1px;
-                                                                      "
-                                                                    >
-                                                                      ­
-                                                                    </td>
-                                                                  </tr>
-                                                                </table>
-                                                              </th>
-                                                              <th
-                                                                width="40"
-                                                                class="r25-c mobshow resp-table"
-                                                                style="
-                                                                  font-weight: normal;
-                                                                "
-                                                              >
-                                                                <table
-                                                                  cellspacing="0"
-                                                                  cellpadding="0"
-                                                                  border="0"
-                                                                  role="presentation"
-                                                                  width="100%"
-                                                                  class="r26-o"
-                                                                  style="
-                                                                    table-layout: fixed;
-                                                                    width: 100%;
-                                                                  "
-                                                                >
-                                                                  <tr>
-                                                                    <td
-                                                                      class="r27-i"
-                                                                      style="
-                                                                        font-size: 0px;
-                                                                        line-height: 0px;
-                                                                        padding-bottom: 5px;
-                                                                        padding-top: 5px;
-                                                                      "
-                                                                    >
-                                                                      <a
-                                                                        href="https://twitter.com/planepowers"
-                                                                        target="_blank"
-                                                                        style="
-                                                                          color: #006399;
-                                                                          text-decoration: underline;
-                                                                        "
-                                                                      >
-                                                                        <img
-                                                                          src="https://creative-assets.mailinblue.com/editor/social-icons/rounded_colored/twitter_32px.png"
-                                                                          width="32"
-                                                                          border="0"
-                                                                          style="
-                                                                            display: block;
-                                                                            width: 100%;
-                                                                          "
-                                                                      /></a>
-                                                                    </td>
-                                                                    <td
-                                                                      class="nl2go-responsive-hide"
-                                                                      width="8"
-                                                                      style="
-                                                                        font-size: 0px;
-                                                                        line-height: 1px;
-                                                                      "
-                                                                    >
-                                                                      ­
-                                                                    </td>
-                                                                  </tr>
-                                                                </table>
-                                                              </th>
-                                                              <th
-                                                                width="32"
-                                                                class="r25-c mobshow resp-table"
-                                                                style="
-                                                                  font-weight: normal;
-                                                                "
-                                                              >
-                                                                <table
-                                                                  cellspacing="0"
-                                                                  cellpadding="0"
-                                                                  border="0"
-                                                                  role="presentation"
-                                                                  width="100%"
-                                                                  class="r28-o"
-                                                                  style="
-                                                                    table-layout: fixed;
-                                                                    width: 100%;
-                                                                  "
-                                                                >
-                                                                  <tr>
-                                                                    <td
-                                                                      class="r27-i"
-                                                                      style="
-                                                                        font-size: 0px;
-                                                                        line-height: 0px;
-                                                                        padding-bottom: 5px;
-                                                                        padding-top: 5px;
-                                                                      "
-                                                                    >
-                                                                      <a
-                                                                        href="https://plane.so/"
-                                                                        target="_blank"
-                                                                        style="
-                                                                          color: #006399;
-                                                                          text-decoration: underline;
-                                                                        "
-                                                                      >
-                                                                        <img
-                                                                          src="https://creative-assets.mailinblue.com/editor/social-icons/rounded_colored/website_32px.png"
-                                                                          width="32"
-                                                                          border="0"
-                                                                          style="
-                                                                            display: block;
-                                                                            width: 100%;
-                                                                          "
-                                                                      /></a>
-                                                                    </td>
-                                                                  </tr>
-                                                                </table>
-                                                              </th>
-                                                            </tr>
-                                                          </table>
-                                                        </td>
-                                                      </tr>
-                                                    </table>
-                                                  </td>
-                                                </tr>
-                                              </table>
-                                            </td>
-                                          </tr>
-                                        </table>
-                                      </td>
-                                    </tr>
-                                  </table>
-                                </td>
-                              </tr>
-                            </table>
-                          </th>
-                        </tr>
-                      </table>
-                    </td>
-                  </tr>
-                </table>
-                <table
-                  cellspacing="0"
-                  cellpadding="0"
-                  border="0"
-                  role="presentation"
-                  width="100%"
-                  align="center"
-                  class="r3-o"
-                  style="table-layout: fixed; width: 100%"
-                >
-                  <tr>
-                    <td
-                      class="r21-i"
-                      style="padding-bottom: 5px; padding-top: 5px"
-                    >
-                      <table
-                        width="100%"
-                        cellspacing="0"
-                        cellpadding="0"
-                        border="0"
-                        role="presentation"
-                      >
-                        <tr>
-                          <th
-                            width="100%"
-                            valign="top"
-                            class="r5-c"
-                            style="font-weight: normal"
-                          >
-                            <table
-                              cellspacing="0"
-                              cellpadding="0"
-                              border="0"
-                              role="presentation"
-                              width="100%"
-                              class="r6-o"
-                              style="table-layout: fixed; width: 100%"
-                            >
-                              <tr>
-                                <td
-                                  valign="top"
-                                  class="r7-i"
-                                  style="
-                                    padding-left: 15px;
-                                    padding-right: 15px;
-                                  "
-                                >
-                                  <table
-                                    width="100%"
-                                    cellspacing="0"
-                                    cellpadding="0"
-                                    border="0"
-                                    role="presentation"
-                                  >
-                                    <tr>
-                                      <td class="r8-c" align="left">
-                                        <table
-                                          cellspacing="0"
-                                          cellpadding="0"
-                                          border="0"
-                                          role="presentation"
-                                          width="100%"
-                                          class="r9-o"
-                                          style="
-                                            table-layout: fixed;
-                                            width: 100%;
-                                          "
-                                        >
-                                          <tr>
-                                            <td
-                                              align="center"
-                                              valign="top"
-                                              class="r29-i nl2go-default-textstyle"
-                                              style="
-                                                color: #3b3f44;
-                                                font-family: georgia, serif;
-                                                word-break: break-word;
-                                                font-size: 18px;
-                                                line-height: 1.5;
-                                                padding-top: 5px;
-                                                text-align: center;
-                                              "
-                                            >
-                                              <div>
-                                                <p
-                                                  style="
-                                                    margin: 0;
-                                                    font-size: 14px;
-                                                  "
-                                                >
-                                                  <span style="font-size: 12px"
-                                                    >This email was sent
-                                                    to {{email }}. Please delete
-                                                    if you aren't the intended
-                                                    recipient.</span
-                                                  >
-                                                </p>
-                                              </div>
-                                            </td>
-                                          </tr>
-                                        </table>
-                                      </td>
-                                    </tr>
-                                  </table>
-                                </td>
-                              </tr>
-                            </table>
-                          </th>
-                        </tr>
-                      </table>
-                    </td>
-                  </tr>
-                </table>
-              </td>
-            </tr>
-          </table>
-        </td>
-      </tr>
-    </table>
+                  <p style="margin: 0;">Plane Software, Inc.</p>
+                </td>
+              </tr>
+            </table>
+          </td>
+          <td></td>
+        </tr>
+      </table>
+    </center>
+
+    <base target="_blank" />
   </body>
 </html>
diff --git a/apps/api/templates/emails/notifications/webhook-deactivate.html b/apps/api/templates/emails/notifications/webhook-deactivate.html
index 272271f96..44aca6720 100644
--- a/apps/api/templates/emails/notifications/webhook-deactivate.html
+++ b/apps/api/templates/emails/notifications/webhook-deactivate.html
@@ -155,7 +155,7 @@
                                             <td class="nl2go-responsive-hide" width="2" style=" font-size: 0px; line-height: 1px; background-color: #efefef; " > ­ </td>
                                             <td align="left" valign="top" class="r21-i nl2go-default-textstyle" style=" color: #3b3f44; font-family: georgia, serif; font-size: 16px; word-break: break-word; line-height: 1.5; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; padding-top: 5px; text-align: left; " >
                                               <div>
-                                                <p style="margin: 0"> <span style="font-size: 13px" >Despite our popularity, we are humbly early-stage. We are shipping fast, so please reach out to us with feature requests, major and minor nits, and anything else you find missing. We read every </span ><a href="https://discord.com/channels/1031547764020084846/1094927053867995176" title="Plane Support on Discod" target="_blank" style=" color: #006399; text-decoration: underline; " ><span style="font-size: 13px" >message</span ></a ><span style="font-size: 13px" >, </span ><a href="http://twitter.com/planepowers" title="@planepowers" target="_blank" style=" color: #006399; text-decoration: underline; " ><span style="font-size: 13px" >tweet</span ></a ><span style="font-size: 13px" >, and </span ><a href="https://github.com/makeplane/plane/issues" title="Plane's GitHub conversations" target="_blank" style=" color: #006399; text-decoration: underline; " ><span style="font-size: 13px" >conversation</span ></a ><span style="font-size: 13px" > and update </span ><a href="https://plane.sh/plane/0b170a1c-0e55-47cb-9307-ea49a05672b5?board=kanban" title="Plane's roadmap" target="_blank" style=" color: #006399; text-decoration: underline; " ><span style="font-size: 13px" >our public roadmap</span ></a ><span style="font-size: 13px" >.</span > </p>
+                                                <p style="margin: 0"> <span style="font-size: 13px" >Despite our popularity, we are humbly early-stage. We are shipping fast, so please reach out to us with feature requests, major and minor nits, and anything else you find missing. We read every </span ><a href="https://forum.plane.so" title="Plane Forum" target="_blank" style=" color: #006399; text-decoration: underline; " ><span style="font-size: 13px" >message</span ></a ><span style="font-size: 13px" >, </span ><a href="http://twitter.com/planepowers" title="@planepowers" target="_blank" style=" color: #006399; text-decoration: underline; " ><span style="font-size: 13px" >tweet</span ></a ><span style="font-size: 13px" >, and </span ><a href="https://github.com/makeplane/plane/issues" title="Plane's GitHub conversations" target="_blank" style=" color: #006399; text-decoration: underline; " ><span style="font-size: 13px" >conversation</span ></a ><span style="font-size: 13px" > and update </span ><a href="https://plane.sh/plane/0b170a1c-0e55-47cb-9307-ea49a05672b5?board=kanban" title="Plane's roadmap" target="_blank" style=" color: #006399; text-decoration: underline; " ><span style="font-size: 13px" >our public roadmap</span ></a ><span style="font-size: 13px" >.</span > </p>
                                               </div>
                                             </td>
                                             <td class="nl2go-responsive-hide" width="2" style=" font-size: 0px; line-height: 1px; background-color: #efefef; " > ­ </td>
diff --git a/apps/api/templates/emails/user/user_activation.html b/apps/api/templates/emails/user/user_activation.html
index a454d0a3c..8e0a692ad 100644
--- a/apps/api/templates/emails/user/user_activation.html
+++ b/apps/api/templates/emails/user/user_activation.html
@@ -959,8 +959,8 @@
                                                     nits, and anything else you
                                                     find missing. We read every </span
                                                   ><a
-                                                    href="https://discord.com/channels/1031547764020084846/1094927053867995176"
-                                                    title="Plane Support on Discod"
+                                                    href="https://forum.plane.so"
+                                                    title="Plane Forum"
                                                     target="_blank"
                                                     style="
                                                       color: #006399;
diff --git a/apps/api/templates/emails/user/user_deactivation.html b/apps/api/templates/emails/user/user_deactivation.html
index 8a0c097a7..f5e871854 100644
--- a/apps/api/templates/emails/user/user_deactivation.html
+++ b/apps/api/templates/emails/user/user_deactivation.html
@@ -960,8 +960,8 @@
                                                     nits, and anything else you
                                                     find missing. We read every </span
                                                   ><a
-                                                    href="https://discord.com/channels/1031547764020084846/1094927053867995176"
-                                                    title="Plane Support on Discod"
+                                                    href="https://forum.plane.so"
+                                                    title="Plane Forum"
                                                     target="_blank"
                                                     style="
                                                       color: #006399;
diff --git a/apps/live/Dockerfile.live b/apps/live/Dockerfile.live
index 8349c69fe..801afca67 100644
--- a/apps/live/Dockerfile.live
+++ b/apps/live/Dockerfile.live
@@ -15,7 +15,7 @@ RUN apk update
 RUN apk add --no-cache libc6-compat
 # Set working directory
 WORKDIR /app
-ARG TURBO_VERSION=2.6.3
+ARG TURBO_VERSION=2.9.4
 RUN corepack enable pnpm && pnpm add -g turbo@${TURBO_VERSION}
 COPY . .
 RUN turbo prune --scope=live --docker
diff --git a/apps/live/package.json b/apps/live/package.json
index 2130f9d86..1570ed9d7 100644
--- a/apps/live/package.json
+++ b/apps/live/package.json
@@ -1,30 +1,35 @@
 {
   "name": "live",
-  "version": "1.2.3",
-  "license": "AGPL-3.0",
+  "version": "1.3.0",
+  "private": true,
   "description": "A realtime collaborative server powers Plane's rich text editor",
+  "license": "AGPL-3.0",
+  "author": "Plane Software Inc.",
+  "type": "module",
   "main": "./dist/start.mjs",
   "module": "./dist/start.mjs",
   "exports": {
     ".": "./dist/start.mjs",
     "./package.json": "./package.json"
   },
-  "private": true,
-  "type": "module",
   "scripts": {
     "build": "tsc --noEmit && tsdown",
-    "dev": "tsdown --watch --onSuccess \"node --env-file=.env .\"",
+    "dev": "tsdown --watch --no-clean --onSuccess \"node --env-file=.env .\"",
     "start": "node --env-file=.env .",
-    "check:lint": "eslint . --max-warnings=160",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage",
+    "check:lint": "oxlint --max-warnings=119 .",
     "check:types": "tsc --noEmit",
-    "check:format": "prettier --check .",
-    "fix:lint": "eslint . --fix --max-warnings=160",
-    "fix:format": "prettier --write .",
+    "check:format": "oxfmt --check .",
+    "fix:lint": "oxlint --fix .",
+    "fix:format": "oxfmt .",
     "clean": "rm -rf .turbo && rm -rf .next && rm -rf node_modules && rm -rf dist"
   },
-  "author": "Plane Software Inc.",
   "dependencies": {
-    "@dotenvx/dotenvx": "catalog:",
+    "@effect/platform": "^0.94.0",
+    "@effect/platform-node": "^0.104.0",
+    "@fontsource/inter": "5.2.8",
     "@hocuspocus/extension-database": "2.15.2",
     "@hocuspocus/extension-logger": "2.15.2",
     "@hocuspocus/extension-redis": "2.15.2",
@@ -34,17 +39,21 @@
     "@plane/editor": "workspace:*",
     "@plane/logger": "workspace:*",
     "@plane/types": "workspace:*",
-    "@sentry/node": "catalog:",
-    "@sentry/profiling-node": "catalog:",
+    "@react-pdf/renderer": "^4.3.0",
+    "@react-pdf/types": "^2.9.2",
     "@tiptap/core": "catalog:",
     "@tiptap/html": "catalog:",
     "axios": "catalog:",
     "compression": "1.8.1",
     "cors": "^2.8.5",
+    "dotenv": "catalog:",
+    "effect": "3.20.0",
     "express": "catalog:",
     "express-ws": "^5.0.2",
     "helmet": "^7.1.0",
     "ioredis": "5.7.0",
+    "react": "catalog:",
+    "sharp": "^0.34.3",
     "uuid": "catalog:",
     "ws": "^8.18.3",
     "y-prosemirror": "^1.3.7",
@@ -59,8 +68,13 @@
     "@types/express": "4.17.23",
     "@types/express-ws": "^3.0.5",
     "@types/node": "catalog:",
+    "@types/pdf-parse": "^1.1.5",
+    "@types/react": "catalog:",
     "@types/ws": "^8.18.1",
+    "@vitest/coverage-v8": "^4.0.8",
+    "pdf-parse": "^2.4.5",
     "tsdown": "catalog:",
-    "typescript": "catalog:"
+    "typescript": "catalog:",
+    "vitest": "^4.0.8"
   }
 }
diff --git a/apps/live/src/controllers/collaboration.controller.ts b/apps/live/src/controllers/collaboration.controller.ts
index 59bfe7b0c..92ead80d2 100644
--- a/apps/live/src/controllers/collaboration.controller.ts
+++ b/apps/live/src/controllers/collaboration.controller.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { Hocuspocus } from "@hocuspocus/server";
 import type { Request } from "express";
 import type WebSocket from "ws";
diff --git a/apps/live/src/controllers/document.controller.ts b/apps/live/src/controllers/document.controller.ts
index 832045766..3a0282f90 100644
--- a/apps/live/src/controllers/document.controller.ts
+++ b/apps/live/src/controllers/document.controller.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { Request, Response } from "express";
 import { z } from "zod";
 // helpers
@@ -27,14 +33,14 @@ export class DocumentController {
       const { description_html, variant } = validatedData;
 
       // Process document conversion
-      const { description, description_binary } = convertHTMLDocumentToAllFormats({
+      const { description_json, description_binary } = convertHTMLDocumentToAllFormats({
         document_html: description_html,
         variant,
       });
 
       // Return successful response
       res.status(200).json({
-        description,
+        description_json,
         description_binary,
       });
     } catch (error) {
diff --git a/apps/live/src/controllers/health.controller.ts b/apps/live/src/controllers/health.controller.ts
index 34026c04b..463d98672 100644
--- a/apps/live/src/controllers/health.controller.ts
+++ b/apps/live/src/controllers/health.controller.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { Request, Response } from "express";
 import { Controller, Get } from "@plane/decorators";
 import { env } from "@/env";
diff --git a/apps/live/src/controllers/index.ts b/apps/live/src/controllers/index.ts
index 3b45cb1ed..2ae3bcea0 100644
--- a/apps/live/src/controllers/index.ts
+++ b/apps/live/src/controllers/index.ts
@@ -1,5 +1,12 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { CollaborationController } from "./collaboration.controller";
 import { DocumentController } from "./document.controller";
 import { HealthController } from "./health.controller";
+import { PdfExportController } from "./pdf-export.controller";
 
-export const CONTROLLERS = [CollaborationController, DocumentController, HealthController];
+export const CONTROLLERS = [CollaborationController, DocumentController, HealthController, PdfExportController];
diff --git a/apps/live/src/controllers/pdf-export.controller.ts b/apps/live/src/controllers/pdf-export.controller.ts
new file mode 100644
index 000000000..34c03d217
--- /dev/null
+++ b/apps/live/src/controllers/pdf-export.controller.ts
@@ -0,0 +1,142 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { Request, Response } from "express";
+import { Effect, Schema, Cause } from "effect";
+import { Controller, Post } from "@plane/decorators";
+import { logger } from "@plane/logger";
+import { AppError } from "@/lib/errors";
+import { PdfExportRequestBody, PdfValidationError, PdfAuthenticationError } from "@/schema/pdf-export";
+import { PdfExportService, exportToPdf } from "@/services/pdf-export";
+import type { PdfExportInput } from "@/services/pdf-export";
+
+@Controller("/pdf-export")
+export class PdfExportController {
+  /**
+   * Parses and validates the request, returning a typed input object
+   */
+  private parseRequest(
+    req: Request,
+    requestId: string
+  ): Effect.Effect<PdfExportInput, PdfValidationError | PdfAuthenticationError> {
+    return Effect.gen(function* () {
+      const cookie = req.headers.cookie || "";
+      if (!cookie) {
+        return yield* Effect.fail(
+          new PdfAuthenticationError({
+            message: "Authentication required",
+          })
+        );
+      }
+
+      const body = yield* Schema.decodeUnknown(PdfExportRequestBody)(req.body).pipe(
+        Effect.mapError(
+          (cause) =>
+            new PdfValidationError({
+              message: "Invalid request body",
+              cause,
+            })
+        )
+      );
+
+      return {
+        pageId: body.pageId,
+        workspaceSlug: body.workspaceSlug,
+        projectId: body.projectId,
+        title: body.title,
+        author: body.author,
+        subject: body.subject,
+        pageSize: body.pageSize,
+        pageOrientation: body.pageOrientation,
+        fileName: body.fileName,
+        noAssets: body.noAssets,
+        cookie,
+        requestId,
+      };
+    });
+  }
+
+  /**
+   * Maps domain errors to HTTP responses
+   */
+  private mapErrorToHttpResponse(error: unknown): { status: number; error: string } {
+    if (error && typeof error === "object" && "_tag" in error) {
+      const tag = (error as { _tag: string })._tag;
+      const message = (error as { message?: string }).message || "Unknown error";
+
+      switch (tag) {
+        case "PdfValidationError":
+          return { status: 400, error: message };
+        case "PdfAuthenticationError":
+          return { status: 401, error: message };
+        case "PdfContentFetchError":
+          return {
+            status: message.includes("not found") ? 404 : 502,
+            error: message,
+          };
+        case "PdfTimeoutError":
+          return { status: 504, error: message };
+        case "PdfGenerationError":
+          return { status: 500, error: message };
+        case "PdfMetadataFetchError":
+        case "PdfImageProcessingError":
+          return { status: 502, error: message };
+        default:
+          return { status: 500, error: message };
+      }
+    }
+    return { status: 500, error: "Failed to generate PDF" };
+  }
+
+  @Post("/")
+  async exportToPdf(req: Request, res: Response) {
+    const requestId = crypto.randomUUID();
+
+    const effect = Effect.gen(this, function* () {
+      // Parse request
+      const input = yield* this.parseRequest(req, requestId);
+
+      // Delegate to service
+      return yield* exportToPdf(input);
+    }).pipe(
+      // Log errors before catching them
+      Effect.tapError((error) => Effect.logError("PDF_EXPORT: Export failed", { requestId, error })),
+      // Map all tagged errors to HTTP responses
+      Effect.catchAll((error) => Effect.succeed(this.mapErrorToHttpResponse(error))),
+      // Handle unexpected defects
+      Effect.catchAllDefect((defect) => {
+        const appError = new AppError(Cause.pretty(Cause.die(defect)), {
+          context: { requestId, operation: "exportToPdf" },
+        });
+        logger.error("PDF_EXPORT: Unexpected failure", appError);
+        return Effect.succeed({ status: 500, error: "Failed to generate PDF" });
+      })
+    );
+
+    const result = await Effect.runPromise(Effect.provide(effect, PdfExportService.Default));
+
+    // Check if result is an error response
+    if ("error" in result && "status" in result) {
+      return res.status(result.status).json({ message: result.error });
+    }
+
+    // Success - send PDF
+    const { pdfBuffer, outputFileName } = result;
+
+    // Sanitize filename for Content-Disposition header to prevent header injection
+    const sanitizedFileName = outputFileName
+      .replace(/["\\\r\n]/g, "") // Remove quotes, backslashes, and CRLF
+      .replace(/[^\x20-\x7E]/g, "_"); // Replace non-ASCII with underscore
+
+    res.setHeader("Content-Type", "application/pdf");
+    res.setHeader(
+      "Content-Disposition",
+      `attachment; filename="${sanitizedFileName}"; filename*=UTF-8''${encodeURIComponent(outputFileName)}`
+    );
+    res.setHeader("Content-Length", pdfBuffer.length);
+    return res.send(pdfBuffer);
+  }
+}
diff --git a/apps/live/src/env.ts b/apps/live/src/env.ts
index 3c1a91ec9..c9b61bd43 100644
--- a/apps/live/src/env.ts
+++ b/apps/live/src/env.ts
@@ -1,4 +1,10 @@
-import * as dotenv from "@dotenvx/dotenvx";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as dotenv from "dotenv";
 import { z } from "zod";
 
 dotenv.config();
diff --git a/apps/live/src/extensions/database.ts b/apps/live/src/extensions/database.ts
index 5c496f52c..becefc8e1 100644
--- a/apps/live/src/extensions/database.ts
+++ b/apps/live/src/extensions/database.ts
@@ -1,11 +1,18 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { Database as HocuspocusDatabase } from "@hocuspocus/extension-database";
-// utils
+// plane imports
 import {
   getAllDocumentFormatsFromDocumentEditorBinaryData,
   getBinaryDataFromDocumentEditorHTMLString,
 } from "@plane/editor";
-// logger
+import type { TDocumentPayload } from "@plane/types";
 import { logger } from "@plane/logger";
+// lib
 import { AppError } from "@/lib/errors";
 // services
 import { getPageService } from "@/services/page/handler";
@@ -36,15 +43,15 @@ const fetchDocument = async ({ context, documentName: pageId, instance }: FetchP
             convertedBinaryData,
             true
           );
-          const payload = {
+          const payload: TDocumentPayload = {
             description_binary: contentBinaryEncoded,
             description_html: contentHTML,
-            description: contentJSON,
+            description_json: contentJSON,
           };
           await service.updateDescriptionBinary(pageId, payload);
         } catch (e) {
           const error = new AppError(e);
-          logger.error("Failed to save binary after first convertion from html:", error);
+          logger.error("Failed to save binary after first conversion from html:", error);
         }
         return convertedBinaryData;
       }
@@ -76,10 +83,10 @@ const storeDocument = async ({
       true
     );
     // create payload
-    const payload = {
+    const payload: TDocumentPayload = {
       description_binary: contentBinaryEncoded,
       description_html: contentHTML,
-      description: contentJSON,
+      description_json: contentJSON,
     };
     await service.updateDescriptionBinary(pageId, payload);
   } catch (error) {
diff --git a/apps/live/src/extensions/force-close-handler.ts b/apps/live/src/extensions/force-close-handler.ts
index 19c06fe17..b13e08e84 100644
--- a/apps/live/src/extensions/force-close-handler.ts
+++ b/apps/live/src/extensions/force-close-handler.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { Connection, Extension, Hocuspocus, onConfigurePayload } from "@hocuspocus/server";
 import { logger } from "@plane/logger";
 import { Redis } from "@/extensions/redis";
diff --git a/apps/live/src/extensions/index.ts b/apps/live/src/extensions/index.ts
index fb53ab790..d55ca6e8e 100644
--- a/apps/live/src/extensions/index.ts
+++ b/apps/live/src/extensions/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { Database } from "./database";
 import { ForceCloseHandler } from "./force-close-handler";
 import { Logger } from "./logger";
diff --git a/apps/live/src/extensions/logger.ts b/apps/live/src/extensions/logger.ts
index 34a4f6a41..f670b66c1 100644
--- a/apps/live/src/extensions/logger.ts
+++ b/apps/live/src/extensions/logger.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { Logger as HocuspocusLogger } from "@hocuspocus/extension-logger";
 import { logger } from "@plane/logger";
 
diff --git a/apps/live/src/extensions/redis.ts b/apps/live/src/extensions/redis.ts
index ece29671b..900a00137 100644
--- a/apps/live/src/extensions/redis.ts
+++ b/apps/live/src/extensions/redis.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { Redis as HocuspocusRedis } from "@hocuspocus/extension-redis";
 import { OutgoingMessage } from "@hocuspocus/server";
 import type { onConfigurePayload } from "@hocuspocus/server";
diff --git a/apps/live/src/extensions/title-sync.ts b/apps/live/src/extensions/title-sync.ts
index ca3783f14..c86b74986 100644
--- a/apps/live/src/extensions/title-sync.ts
+++ b/apps/live/src/extensions/title-sync.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // hocuspocus
 import type { Extension, Hocuspocus, Document } from "@hocuspocus/server";
 import { TiptapTransformer } from "@hocuspocus/transformer";
diff --git a/apps/live/src/extensions/title-update/debounce.ts b/apps/live/src/extensions/title-update/debounce.ts
index e9adeb4a4..9de1ba44c 100644
--- a/apps/live/src/extensions/title-update/debounce.ts
+++ b/apps/live/src/extensions/title-update/debounce.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { logger } from "@plane/logger";
 
 /**
diff --git a/apps/live/src/extensions/title-update/title-update-manager.ts b/apps/live/src/extensions/title-update/title-update-manager.ts
index 8469ad4eb..5521c10ff 100644
--- a/apps/live/src/extensions/title-update/title-update-manager.ts
+++ b/apps/live/src/extensions/title-update/title-update-manager.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { logger } from "@plane/logger";
 import { AppError } from "@/lib/errors";
 import { getPageService } from "@/services/page/handler";
diff --git a/apps/live/src/extensions/title-update/title-utils.ts b/apps/live/src/extensions/title-update/title-utils.ts
new file mode 100644
index 000000000..ac2394865
--- /dev/null
+++ b/apps/live/src/extensions/title-update/title-utils.ts
@@ -0,0 +1,17 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { sanitizeHTML } from "@plane/utils";
+
+/**
+ * Utility function to extract text from HTML content
+ */
+export const extractTextFromHTML = (html: string): string => {
+  // Use sanitizeHTML to safely extract text and remove all HTML tags
+  // This is more secure than regex as it handles edge cases and prevents injection
+  // Note: sanitizeHTML trims whitespace, which is acceptable for title extraction
+  return sanitizeHTML(html) || "";
+};
diff --git a/apps/live/src/hocuspocus.ts b/apps/live/src/hocuspocus.ts
index 1b3b07a7a..93ebf725e 100644
--- a/apps/live/src/hocuspocus.ts
+++ b/apps/live/src/hocuspocus.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { Hocuspocus } from "@hocuspocus/server";
 import { v4 as uuidv4 } from "uuid";
 // env
diff --git a/apps/live/src/instrument.ts b/apps/live/src/instrument.ts
deleted file mode 100644
index a49016eb1..000000000
--- a/apps/live/src/instrument.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import * as Sentry from "@sentry/node";
-import { nodeProfilingIntegration } from "@sentry/profiling-node";
-
-export const setupSentry = () => {
-  if (process.env.SENTRY_DSN) {
-    Sentry.init({
-      dsn: process.env.SENTRY_DSN,
-      integrations: [Sentry.httpIntegration(), Sentry.expressIntegration(), nodeProfilingIntegration()],
-      tracesSampleRate: process.env.SENTRY_TRACES_SAMPLE_RATE ? parseFloat(process.env.SENTRY_TRACES_SAMPLE_RATE) : 0.5,
-      environment: process.env.SENTRY_ENVIRONMENT || "development",
-      release: process.env.APP_VERSION || "v1.0.0",
-      sendDefaultPii: true,
-    });
-  }
-};
diff --git a/apps/live/src/lib/auth-middleware.ts b/apps/live/src/lib/auth-middleware.ts
index 8cdfc1b32..fcf06f82d 100644
--- a/apps/live/src/lib/auth-middleware.ts
+++ b/apps/live/src/lib/auth-middleware.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { Request, Response, NextFunction } from "express";
 import { logger } from "@plane/logger";
 import { env } from "@/env";
diff --git a/apps/live/src/lib/auth.ts b/apps/live/src/lib/auth.ts
index a1e82314a..02aa69ca4 100644
--- a/apps/live/src/lib/auth.ts
+++ b/apps/live/src/lib/auth.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // plane imports
 import type { IncomingHttpHeaders } from "http";
 import type { TUserDetails } from "@plane/editor";
diff --git a/apps/live/src/lib/errors.ts b/apps/live/src/lib/errors.ts
index a8b8270dc..4e2bc264c 100644
--- a/apps/live/src/lib/errors.ts
+++ b/apps/live/src/lib/errors.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { AxiosError } from "axios";
 
 /**
diff --git a/apps/live/src/lib/pdf/colors.ts b/apps/live/src/lib/pdf/colors.ts
new file mode 100644
index 000000000..1b220d723
--- /dev/null
+++ b/apps/live/src/lib/pdf/colors.ts
@@ -0,0 +1,231 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+/**
+ * PDF Export Color Constants
+ *
+ * These colors are mapped from the editor CSS variables and tailwind-config tokens
+ * to ensure PDF exports match the editor's appearance.
+ *
+ * Source mappings:
+ * - Editor colors: packages/editor/src/styles/variables.css
+ * - Tailwind tokens: packages/tailwind-config/variables.css
+ */
+
+// Editor text colors (from variables.css :root)
+export const EDITOR_TEXT_COLORS = {
+  gray: "#5c5e63",
+  peach: "#ff5b59",
+  pink: "#f65385",
+  orange: "#fd9038",
+  green: "#0fc27b",
+  "light-blue": "#17bee9",
+  "dark-blue": "#266df0",
+  purple: "#9162f9",
+} as const;
+
+// Editor background colors - Light theme (from variables.css [data-theme*="light"])
+export const EDITOR_BACKGROUND_COLORS_LIGHT = {
+  gray: "#d6d6d8",
+  peach: "#ffd5d7",
+  pink: "#fdd4e3",
+  orange: "#ffe3cd",
+  green: "#c3f0de",
+  "light-blue": "#c5eff9",
+  "dark-blue": "#c9dafb",
+  purple: "#e3d8fd",
+} as const;
+
+// Editor background colors - Dark theme (from variables.css [data-theme*="dark"])
+export const EDITOR_BACKGROUND_COLORS_DARK = {
+  gray: "#404144",
+  peach: "#593032",
+  pink: "#562e3d",
+  orange: "#583e2a",
+  green: "#1d4a3b",
+  "light-blue": "#1f495c",
+  "dark-blue": "#223558",
+  purple: "#3d325a",
+} as const;
+
+// Use light theme colors by default for PDF exports
+export const EDITOR_BACKGROUND_COLORS = EDITOR_BACKGROUND_COLORS_LIGHT;
+
+// Color key type
+export type EditorColorKey = keyof typeof EDITOR_TEXT_COLORS;
+
+/**
+ * Maps a color key to its text color hex value
+ */
+export const getTextColorHex = (colorKey: string): string | null => {
+  if (colorKey in EDITOR_TEXT_COLORS) {
+    return EDITOR_TEXT_COLORS[colorKey as EditorColorKey];
+  }
+  return null;
+};
+
+/**
+ * Maps a color key to its background color hex value
+ */
+export const getBackgroundColorHex = (colorKey: string): string | null => {
+  if (colorKey in EDITOR_BACKGROUND_COLORS) {
+    return EDITOR_BACKGROUND_COLORS[colorKey as EditorColorKey];
+  }
+  return null;
+};
+
+/**
+ * Checks if a value is a CSS variable reference (e.g., "var(--editor-colors-gray-text)")
+ */
+export const isCssVariable = (value: string): boolean => {
+  return value.startsWith("var(");
+};
+
+/**
+ * Extracts the color key from a CSS variable reference
+ * e.g., "var(--editor-colors-gray-text)" -> "gray"
+ * e.g., "var(--editor-colors-light-blue-background)" -> "light-blue"
+ */
+export const extractColorKeyFromCssVariable = (cssVar: string): string | null => {
+  // Match patterns like: var(--editor-colors-{color}-text) or var(--editor-colors-{color}-background)
+  const match = cssVar.match(/var\(--editor-colors-([\w-]+)-(text|background)\)/);
+  if (match) {
+    return match[1];
+  }
+  return null;
+};
+
+/**
+ * Resolves a color value to a hex color for PDF rendering
+ * Handles both direct hex values and CSS variable references
+ */
+export const resolveColorForPdf = (value: string | null | undefined, type: "text" | "background"): string | null => {
+  if (!value) return null;
+
+  // If it's already a hex color, return it
+  if (value.startsWith("#")) {
+    return value;
+  }
+
+  // If it's a CSS variable, extract the key and get the hex value
+  if (isCssVariable(value)) {
+    const colorKey = extractColorKeyFromCssVariable(value);
+    if (colorKey) {
+      return type === "text" ? getTextColorHex(colorKey) : getBackgroundColorHex(colorKey);
+    }
+  }
+
+  // If it's just a color key (e.g., "gray", "peach"), get the hex value
+  if (type === "text") {
+    return getTextColorHex(value);
+  }
+  return getBackgroundColorHex(value);
+};
+
+// Semantic colors from tailwind-config (light theme)
+// These are derived from the CSS variables in packages/tailwind-config/variables.css
+
+// Neutral colors (light theme)
+export const NEUTRAL_COLORS = {
+  white: "#ffffff",
+  100: "#fafafa", // oklch(0.9848 0.0003 230.66) ≈ #fafafa
+  200: "#f5f5f5", // oklch(0.9696 0.0007 230.67) ≈ #f5f5f5
+  300: "#f0f0f0", // oklch(0.9543 0.001 230.67) ≈ #f0f0f0
+  400: "#ebebeb", // oklch(0.9389 0.0014 230.68) ≈ #ebebeb
+  500: "#e5e5e5", // oklch(0.9235 0.001733 230.6853) ≈ #e5e5e5
+  600: "#d9d9d9", // oklch(0.8925 0.0024 230.7) ≈ #d9d9d9
+  700: "#cccccc", // oklch(0.8612 0.0032 230.71) ≈ #cccccc
+  800: "#8c8c8c", // oklch(0.6668 0.0079 230.82) ≈ #8c8c8c
+  900: "#7a7a7a", // oklch(0.6161 0.009153 230.867) ≈ #7a7a7a
+  1000: "#636363", // oklch(0.5288 0.0083 230.88) ≈ #636363
+  1100: "#4d4d4d", // oklch(0.4377 0.0066 230.87) ≈ #4d4d4d
+  1200: "#1f1f1f", // oklch(0.2378 0.0029 230.83) ≈ #1f1f1f
+  black: "#0f0f0f", // oklch(0.1472 0.0034 230.83) ≈ #0f0f0f
+} as const;
+
+// Brand colors (light theme accent)
+export const BRAND_COLORS = {
+  default: "#3f76ff", // oklch(0.4799 0.1158 242.91) - primary accent blue
+  100: "#f5f8ff",
+  200: "#e8f0ff",
+  300: "#d1e1ff",
+  400: "#b3d0ff",
+  500: "#8ab8ff",
+  600: "#5c9aff",
+  700: "#3f76ff",
+  900: "#2952b3",
+  1000: "#1e3d80",
+  1100: "#142b5c",
+  1200: "#0d1f40",
+} as const;
+
+// Semantic text colors
+export const TEXT_COLORS = {
+  primary: NEUTRAL_COLORS[1200], // --txt-primary
+  secondary: NEUTRAL_COLORS[1100], // --txt-secondary
+  tertiary: NEUTRAL_COLORS[1000], // --txt-tertiary
+  placeholder: NEUTRAL_COLORS[900], // --txt-placeholder
+  disabled: NEUTRAL_COLORS[800], // --txt-disabled
+  accentPrimary: BRAND_COLORS.default, // --txt-accent-primary
+  linkPrimary: BRAND_COLORS.default, // --txt-link-primary
+} as const;
+
+// Semantic background colors
+export const BACKGROUND_COLORS = {
+  canvas: NEUTRAL_COLORS[300], // --bg-canvas
+  surface1: NEUTRAL_COLORS.white, // --bg-surface-1
+  surface2: NEUTRAL_COLORS[100], // --bg-surface-2
+  layer1: NEUTRAL_COLORS[200], // --bg-layer-1
+  layer2: NEUTRAL_COLORS.white, // --bg-layer-2
+  layer3: NEUTRAL_COLORS[300], // --bg-layer-3
+  accentSubtle: "#f5f8ff", // --bg-accent-subtle (brand-100)
+} as const;
+
+// Semantic border colors
+export const BORDER_COLORS = {
+  subtle: NEUTRAL_COLORS[400], // --border-subtle
+  subtle1: NEUTRAL_COLORS[500], // --border-subtle-1
+  strong: NEUTRAL_COLORS[600], // --border-strong
+  strong1: NEUTRAL_COLORS[700], // --border-strong-1
+  accentStrong: BRAND_COLORS.default, // --border-accent-strong
+} as const;
+
+// Code/inline code colors
+export const CODE_COLORS = {
+  background: NEUTRAL_COLORS[200], // Similar to bg-layer-1
+  text: "#dc2626", // Red for inline code text (matches editor)
+  blockText: NEUTRAL_COLORS[1200], // Regular text for code blocks
+} as const;
+
+// Link colors
+export const LINK_COLORS = {
+  primary: BRAND_COLORS.default,
+  hover: BRAND_COLORS[900],
+} as const;
+
+// Mention colors (from pi-chat-editor mention styles: bg-accent-primary/20 text-accent-primary)
+export const MENTION_COLORS = {
+  background: "#e0e9ff", // accent-primary with ~20% opacity on white
+  text: BRAND_COLORS.default,
+} as const;
+
+// Success/Green colors
+export const SUCCESS_COLORS = {
+  primary: "#10b981",
+  subtle: "#d1fae5",
+} as const;
+
+// Warning/Amber colors
+export const WARNING_COLORS = {
+  primary: "#f59e0b",
+  subtle: "#fef3c7",
+} as const;
+
+// Danger/Red colors
+export const DANGER_COLORS = {
+  primary: "#ef4444",
+  subtle: "#fee2e2",
+} as const;
diff --git a/apps/live/src/lib/pdf/icons.tsx b/apps/live/src/lib/pdf/icons.tsx
new file mode 100644
index 000000000..92621f3a8
--- /dev/null
+++ b/apps/live/src/lib/pdf/icons.tsx
@@ -0,0 +1,232 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { Circle, Path, Rect, Svg } from "@react-pdf/renderer";
+
+type IconProps = {
+  size?: number;
+  color?: string;
+};
+
+// Lightbulb icon for callouts (default)
+export const LightbulbIcon = ({ size = 16, color = "#ffffff" }: IconProps) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24">
+    <Path
+      d="M9 21h6M12 3a6 6 0 0 0-6 6c0 2.22 1.21 4.16 3 5.19V17a1 1 0 0 0 1 1h4a1 1 0 0 0 1-1v-2.81c1.79-1.03 3-2.97 3-5.19a6 6 0 0 0-6-6z"
+      fill="none"
+      stroke={color}
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </Svg>
+);
+
+// Document/file icon for page embeds
+export const DocumentIcon = ({ size = 12, color = "#1e40af" }: IconProps) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24">
+    <Path
+      d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"
+      fill="none"
+      stroke={color}
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <Path d="M14 2v6h6" fill="none" stroke={color} strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" />
+    <Path d="M16 13H8M16 17H8M10 9H8" fill="none" stroke={color} strokeWidth={2} strokeLinecap="round" />
+  </Svg>
+);
+
+// Link icon for page links and external links
+export const LinkIcon = ({ size = 12, color = "#2563eb" }: IconProps) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24">
+    <Path
+      d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"
+      fill="none"
+      stroke={color}
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <Path
+      d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"
+      fill="none"
+      stroke={color}
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </Svg>
+);
+
+// Paperclip icon for attachments (default)
+export const PaperclipIcon = ({ size = 16, color = "#374151" }: IconProps) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24">
+    <Path
+      d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"
+      fill="none"
+      stroke={color}
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </Svg>
+);
+
+// Image icon for image attachments
+export const ImageIcon = ({ size = 16, color = "#374151" }: IconProps) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24">
+    <Rect x={3} y={3} width={18} height={18} rx={2} ry={2} fill="none" stroke={color} strokeWidth={2} />
+    <Circle cx={8.5} cy={8.5} r={1.5} fill={color} />
+    <Path d="M21 15l-5-5L5 21" fill="none" stroke={color} strokeWidth={2} strokeLinecap="round" />
+  </Svg>
+);
+
+// Video icon for video attachments
+export const VideoIcon = ({ size = 16, color = "#374151" }: IconProps) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24">
+    <Rect x={2} y={4} width={15} height={16} rx={2} ry={2} fill="none" stroke={color} strokeWidth={2} />
+    <Path d="M17 10l5-3v10l-5-3z" fill="none" stroke={color} strokeWidth={2} strokeLinecap="round" />
+  </Svg>
+);
+
+// Music/audio icon
+export const MusicIcon = ({ size = 16, color = "#374151" }: IconProps) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24">
+    <Path d="M9 18V5l12-2v13" fill="none" stroke={color} strokeWidth={2} strokeLinecap="round" />
+    <Circle cx={6} cy={18} r={3} fill="none" stroke={color} strokeWidth={2} />
+    <Circle cx={18} cy={16} r={3} fill="none" stroke={color} strokeWidth={2} />
+  </Svg>
+);
+
+// File-text icon for PDFs and documents
+export const FileTextIcon = ({ size = 16, color = "#374151" }: IconProps) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24">
+    <Path
+      d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"
+      fill="none"
+      stroke={color}
+      strokeWidth={2}
+      strokeLinecap="round"
+    />
+    <Path d="M14 2v6h6M16 13H8M16 17H8M10 9H8" fill="none" stroke={color} strokeWidth={2} strokeLinecap="round" />
+  </Svg>
+);
+
+// Table/spreadsheet icon
+export const TableIcon = ({ size = 16, color = "#374151" }: IconProps) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24">
+    <Rect x={3} y={3} width={18} height={18} rx={2} fill="none" stroke={color} strokeWidth={2} />
+    <Path d="M3 9h18M3 15h18M9 3v18M15 3v18" fill="none" stroke={color} strokeWidth={2} />
+  </Svg>
+);
+
+// Presentation icon
+export const PresentationIcon = ({ size = 16, color = "#374151" }: IconProps) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24">
+    <Rect x={2} y={3} width={20} height={14} rx={2} fill="none" stroke={color} strokeWidth={2} />
+    <Path d="M8 21l4-4 4 4M12 17v-4" fill="none" stroke={color} strokeWidth={2} strokeLinecap="round" />
+  </Svg>
+);
+
+// Archive/zip icon
+export const ArchiveIcon = ({ size = 16, color = "#374151" }: IconProps) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24">
+    <Path
+      d="M21 8v13a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V8"
+      fill="none"
+      stroke={color}
+      strokeWidth={2}
+      strokeLinecap="round"
+    />
+    <Path
+      d="M23 3H1v5h22V3zM10 12h4"
+      fill="none"
+      stroke={color}
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </Svg>
+);
+
+// Globe icon for external embeds (rich cards)
+export const GlobeIcon = ({ size = 12, color = "#374151" }: IconProps) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24">
+    <Circle cx={12} cy={12} r={10} fill="none" stroke={color} strokeWidth={2} />
+    <Path
+      d="M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"
+      fill="none"
+      stroke={color}
+      strokeWidth={2}
+    />
+  </Svg>
+);
+
+// Clipboard icon for whiteboards
+export const ClipboardIcon = ({ size = 12, color = "#6b7280" }: IconProps) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24">
+    <Path
+      d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"
+      fill="none"
+      stroke={color}
+      strokeWidth={2}
+      strokeLinecap="round"
+    />
+    <Rect x={8} y={2} width={8} height={4} rx={1} fill="none" stroke={color} strokeWidth={2} />
+  </Svg>
+);
+
+// Ruler/diagram icon for diagrams
+export const DiagramIcon = ({ size = 12, color = "#6b7280" }: IconProps) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24">
+    <Path
+      d="M14 3v4a1 1 0 0 0 1 1h4"
+      fill="none"
+      stroke={color}
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <Path
+      d="M17 21H7a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7l5 5v11a2 2 0 0 1-2 2z"
+      fill="none"
+      stroke={color}
+      strokeWidth={2}
+    />
+    <Path d="M9 9h1M9 13h6M9 17h6" fill="none" stroke={color} strokeWidth={2} strokeLinecap="round" />
+  </Svg>
+);
+
+// Work item / task icon
+export const TaskIcon = ({ size = 14, color = "#374151" }: IconProps) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24">
+    <Rect x={3} y={3} width={18} height={18} rx={2} fill="none" stroke={color} strokeWidth={2} />
+    <Path d="M9 12l2 2 4-4" fill="none" stroke={color} strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" />
+  </Svg>
+);
+
+// Checkmark icon for checked task items
+export const CheckIcon = ({ size = 10, color = "#ffffff" }: IconProps) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24">
+    <Path d="M20 6L9 17l-5-5" fill="none" stroke={color} strokeWidth={3} strokeLinecap="round" strokeLinejoin="round" />
+  </Svg>
+);
+
+// Helper to get file icon component based on file type
+export const getFileIcon = (fileType: string, size = 16, color = "#374151") => {
+  if (fileType.startsWith("image/")) return <ImageIcon size={size} color={color} />;
+  if (fileType.startsWith("video/")) return <VideoIcon size={size} color={color} />;
+  if (fileType.startsWith("audio/")) return <MusicIcon size={size} color={color} />;
+  if (fileType.includes("pdf")) return <FileTextIcon size={size} color="#dc2626" />;
+  if (fileType.includes("spreadsheet") || fileType.includes("excel")) return <TableIcon size={size} color="#16a34a" />;
+  if (fileType.includes("document") || fileType.includes("word")) return <FileTextIcon size={size} color="#2563eb" />;
+  if (fileType.includes("presentation") || fileType.includes("powerpoint"))
+    return <PresentationIcon size={size} color="#ea580c" />;
+  if (fileType.includes("zip") || fileType.includes("archive")) return <ArchiveIcon size={size} color={color} />;
+  return <PaperclipIcon size={size} color={color} />;
+};
diff --git a/apps/live/src/lib/pdf/index.ts b/apps/live/src/lib/pdf/index.ts
new file mode 100644
index 000000000..f3fe47831
--- /dev/null
+++ b/apps/live/src/lib/pdf/index.ts
@@ -0,0 +1,24 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export { createPdfDocument, renderPlaneDocToPdfBlob, renderPlaneDocToPdfBuffer } from "./plane-pdf-exporter";
+export { createKeyGenerator, nodeRenderers, renderNode } from "./node-renderers";
+export { markRenderers, applyMarks } from "./mark-renderers";
+export { pdfStyles } from "./styles";
+export type {
+  KeyGenerator,
+  MarkRendererRegistry,
+  NodeRendererRegistry,
+  PDFExportMetadata,
+  PDFExportOptions,
+  PDFMarkRenderer,
+  PDFNodeRenderer,
+  PDFRenderContext,
+  PDFUserMention,
+  TipTapDocument,
+  TipTapMark,
+  TipTapNode,
+} from "./types";
diff --git a/apps/live/src/lib/pdf/mark-renderers.ts b/apps/live/src/lib/pdf/mark-renderers.ts
new file mode 100644
index 000000000..1f40c4e35
--- /dev/null
+++ b/apps/live/src/lib/pdf/mark-renderers.ts
@@ -0,0 +1,144 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { Style } from "@react-pdf/types";
+import {
+  BACKGROUND_COLORS,
+  CODE_COLORS,
+  EDITOR_BACKGROUND_COLORS,
+  EDITOR_TEXT_COLORS,
+  LINK_COLORS,
+  resolveColorForPdf,
+} from "./colors";
+import type { MarkRendererRegistry, TipTapMark } from "./types";
+
+export const markRenderers: MarkRendererRegistry = {
+  bold: (_mark: TipTapMark, style: Style): Style => ({
+    ...style,
+    fontWeight: "bold",
+  }),
+
+  italic: (_mark: TipTapMark, style: Style): Style => ({
+    ...style,
+    fontStyle: "italic",
+  }),
+
+  underline: (_mark: TipTapMark, style: Style): Style => ({
+    ...style,
+    textDecoration: "underline",
+  }),
+
+  strike: (_mark: TipTapMark, style: Style): Style => ({
+    ...style,
+    textDecoration: "line-through",
+  }),
+
+  code: (_mark: TipTapMark, style: Style): Style => ({
+    ...style,
+    fontFamily: "Courier",
+    fontSize: 10,
+    backgroundColor: BACKGROUND_COLORS.layer1,
+    color: CODE_COLORS.text,
+  }),
+
+  link: (_mark: TipTapMark, style: Style): Style => ({
+    ...style,
+    color: LINK_COLORS.primary,
+    textDecoration: "underline",
+  }),
+
+  textStyle: (mark: TipTapMark, style: Style): Style => {
+    const attrs = mark.attrs || {};
+    const newStyle: Style = { ...style };
+
+    if (attrs.color && typeof attrs.color === "string") {
+      newStyle.color = attrs.color;
+    }
+
+    if (attrs.backgroundColor && typeof attrs.backgroundColor === "string") {
+      newStyle.backgroundColor = attrs.backgroundColor;
+    }
+
+    return newStyle;
+  },
+
+  highlight: (mark: TipTapMark, style: Style): Style => {
+    const attrs = mark.attrs || {};
+    return {
+      ...style,
+      backgroundColor: (attrs.color as string) || EDITOR_BACKGROUND_COLORS.purple,
+    };
+  },
+
+  subscript: (_mark: TipTapMark, style: Style): Style => ({
+    ...style,
+    fontSize: 8,
+  }),
+
+  superscript: (_mark: TipTapMark, style: Style): Style => ({
+    ...style,
+    fontSize: 8,
+  }),
+
+  /**
+   * Custom color mark handler
+   * Handles the customColor extension which stores colors as data-text-color and data-background-color attributes
+   * The colors can be either:
+   * 1. Color keys like "gray", "peach", "pink", etc. (from COLORS_LIST)
+   * 2. Direct hex values for custom colors
+   * 3. CSS variable references like "var(--editor-colors-gray-text)"
+   */
+  customColor: (mark: TipTapMark, style: Style): Style => {
+    const attrs = mark.attrs || {};
+    const newStyle: Style = { ...style };
+
+    // Handle text color (stored in 'color' attribute)
+    const textColor = attrs.color as string | undefined;
+    if (textColor) {
+      const resolvedColor = resolveColorForPdf(textColor, "text");
+      if (resolvedColor) {
+        newStyle.color = resolvedColor;
+      } else if (textColor.startsWith("#") || textColor.startsWith("rgb")) {
+        // Direct color value
+        newStyle.color = textColor;
+      } else if (textColor in EDITOR_TEXT_COLORS) {
+        // Color key lookup
+        newStyle.color = EDITOR_TEXT_COLORS[textColor as keyof typeof EDITOR_TEXT_COLORS];
+      }
+    }
+
+    // Handle background color (stored in 'backgroundColor' attribute)
+    const backgroundColor = attrs.backgroundColor as string | undefined;
+    if (backgroundColor) {
+      const resolvedColor = resolveColorForPdf(backgroundColor, "background");
+      if (resolvedColor) {
+        newStyle.backgroundColor = resolvedColor;
+      } else if (backgroundColor.startsWith("#") || backgroundColor.startsWith("rgb")) {
+        // Direct color value
+        newStyle.backgroundColor = backgroundColor;
+      } else if (backgroundColor in EDITOR_BACKGROUND_COLORS) {
+        // Color key lookup
+        newStyle.backgroundColor = EDITOR_BACKGROUND_COLORS[backgroundColor as keyof typeof EDITOR_BACKGROUND_COLORS];
+      }
+    }
+
+    return newStyle;
+  },
+};
+
+export const applyMarks = (marks: TipTapMark[] | undefined, baseStyle: Style = {}): Style => {
+  if (!marks || marks.length === 0) {
+    return baseStyle;
+  }
+
+  return marks.reduce((style, mark) => {
+    const renderer = markRenderers[mark.type];
+    if (renderer) {
+      return renderer(mark, style);
+    }
+    return style;
+  }, baseStyle);
+};
diff --git a/apps/live/src/lib/pdf/node-renderers.tsx b/apps/live/src/lib/pdf/node-renderers.tsx
new file mode 100644
index 000000000..003d21f55
--- /dev/null
+++ b/apps/live/src/lib/pdf/node-renderers.tsx
@@ -0,0 +1,444 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { Image, Link, Text, View } from "@react-pdf/renderer";
+import type { Style } from "@react-pdf/types";
+import type { ReactElement } from "react";
+import { CORE_EXTENSIONS } from "@plane/editor";
+import { BACKGROUND_COLORS, EDITOR_BACKGROUND_COLORS, resolveColorForPdf, TEXT_COLORS } from "./colors";
+import { CheckIcon, ClipboardIcon, DocumentIcon, GlobeIcon, LightbulbIcon, LinkIcon } from "./icons";
+import { applyMarks } from "./mark-renderers";
+import { pdfStyles } from "./styles";
+import type { KeyGenerator, NodeRendererRegistry, PDFExportMetadata, PDFRenderContext, TipTapNode } from "./types";
+
+const getCalloutIcon = (node: TipTapNode, color: string): ReactElement => {
+  const logoInUse = node.attrs?.["data-logo-in-use"] as string | undefined;
+  const iconName = node.attrs?.["data-icon-name"] as string | undefined;
+  const iconColor = (node.attrs?.["data-icon-color"] as string) || color;
+
+  if (logoInUse === "emoji") {
+    const emojiUnicode = node.attrs?.["data-emoji-unicode"] as string | undefined;
+    if (emojiUnicode) {
+      return <Text style={{ fontSize: 14 }}>{emojiUnicode}</Text>;
+    }
+  }
+
+  if (iconName) {
+    switch (iconName) {
+      case "FileText":
+      case "File":
+        return <DocumentIcon size={16} color={iconColor} />;
+      case "Link":
+        return <LinkIcon size={16} color={iconColor} />;
+      case "Globe":
+        return <GlobeIcon size={16} color={iconColor} />;
+      case "Clipboard":
+        return <ClipboardIcon size={16} color={iconColor} />;
+      case "CheckSquare":
+      case "Check":
+        return <CheckIcon size={16} color={iconColor} />;
+      case "Lightbulb":
+      default:
+        return <LightbulbIcon size={16} color={iconColor} />;
+    }
+  }
+
+  return <LightbulbIcon size={16} color={color} />;
+};
+
+export const createKeyGenerator = (): KeyGenerator => {
+  let counter = 0;
+  return () => `node-${counter++}`;
+};
+
+const renderTextWithMarks = (node: TipTapNode, getKey: KeyGenerator): ReactElement => {
+  const style = applyMarks(node.marks, {});
+  const hasLink = node.marks?.find((m) => m.type === "link");
+
+  if (hasLink) {
+    const href = (hasLink.attrs?.href as string) || "#";
+    return (
+      <Link key={getKey()} src={href} style={{ ...pdfStyles.link, ...style }}>
+        {node.text || ""}
+      </Link>
+    );
+  }
+
+  return (
+    <Text key={getKey()} style={style}>
+      {node.text || ""}
+    </Text>
+  );
+};
+
+const getTextAlignStyle = (textAlign: string | null | undefined): Style => {
+  if (!textAlign) return {};
+  return {
+    textAlign: textAlign as "left" | "right" | "center" | "justify",
+  };
+};
+
+const getFlexAlignStyle = (textAlign: string | null | undefined): Style => {
+  if (!textAlign) return {};
+  if (textAlign === "right") return { alignItems: "flex-end" };
+  if (textAlign === "center") return { alignItems: "center" };
+  return {};
+};
+
+export const nodeRenderers: NodeRendererRegistry = {
+  doc: (_node: TipTapNode, children: ReactElement[], ctx: PDFRenderContext): ReactElement => (
+    <View key={ctx.getKey()}>{children}</View>
+  ),
+
+  text: (node: TipTapNode, _children: ReactElement[], ctx: PDFRenderContext): ReactElement =>
+    renderTextWithMarks(node, ctx.getKey),
+
+  paragraph: (node: TipTapNode, children: ReactElement[], ctx: PDFRenderContext): ReactElement => {
+    const textAlign = node.attrs?.textAlign as string | null;
+    const background = node.attrs?.backgroundColor as string | undefined;
+    const alignStyle = getTextAlignStyle(textAlign);
+    const flexStyle = getFlexAlignStyle(textAlign);
+    const resolvedBgColor =
+      background && background !== "default" ? resolveColorForPdf(background, "background") : null;
+    const bgStyle = resolvedBgColor ? { backgroundColor: resolvedBgColor } : {};
+
+    return (
+      <View key={ctx.getKey()} style={[pdfStyles.paragraphWrapper, flexStyle, bgStyle]}>
+        <Text style={[pdfStyles.paragraph, alignStyle, bgStyle]}>{children}</Text>
+      </View>
+    );
+  },
+
+  heading: (node: TipTapNode, children: ReactElement[], ctx: PDFRenderContext): ReactElement => {
+    const level = (node.attrs?.level as number) || 1;
+    const styleKey = `heading${level}` as keyof typeof pdfStyles;
+    const style = pdfStyles[styleKey] || pdfStyles.heading1;
+    const textAlign = node.attrs?.textAlign as string | null;
+    const alignStyle = getTextAlignStyle(textAlign);
+    const flexStyle = getFlexAlignStyle(textAlign);
+
+    return (
+      <View key={ctx.getKey()} style={flexStyle}>
+        <Text style={[style, alignStyle]}>{children}</Text>
+      </View>
+    );
+  },
+
+  blockquote: (_node: TipTapNode, children: ReactElement[], ctx: PDFRenderContext): ReactElement => (
+    <View key={ctx.getKey()} style={pdfStyles.blockquote} wrap={false}>
+      {children}
+    </View>
+  ),
+
+  codeBlock: (node: TipTapNode, _children: ReactElement[], ctx: PDFRenderContext): ReactElement => {
+    const codeContent = node.content?.map((c) => c.text || "").join("") || "";
+    return (
+      <View key={ctx.getKey()} style={pdfStyles.codeBlock} wrap={false}>
+        <Text>{codeContent}</Text>
+      </View>
+    );
+  },
+
+  bulletList: (node: TipTapNode, children: ReactElement[], ctx: PDFRenderContext): ReactElement => {
+    const nestingLevel = (node.attrs?._nestingLevel as number) || 0;
+    const indentStyle = nestingLevel > 0 ? { marginLeft: 18 } : {};
+    return (
+      <View key={ctx.getKey()} style={[pdfStyles.bulletList, indentStyle]}>
+        {children}
+      </View>
+    );
+  },
+
+  orderedList: (node: TipTapNode, children: ReactElement[], ctx: PDFRenderContext): ReactElement => {
+    const nestingLevel = (node.attrs?._nestingLevel as number) || 0;
+    const indentStyle = nestingLevel > 0 ? { marginLeft: 18 } : {};
+    return (
+      <View key={ctx.getKey()} style={[pdfStyles.orderedList, indentStyle]}>
+        {children}
+      </View>
+    );
+  },
+
+  listItem: (node: TipTapNode, children: ReactElement[], ctx: PDFRenderContext): ReactElement => {
+    const isOrdered = node.attrs?._parentType === "orderedList";
+    const index = (node.attrs?._listItemIndex as number) || 0;
+
+    const bullet = isOrdered ? `${index}.` : "•";
+
+    const textAlign = node.attrs?._textAlign as string | null;
+    const flexStyle = getFlexAlignStyle(textAlign);
+
+    return (
+      <View key={ctx.getKey()} style={[pdfStyles.listItem, flexStyle]} wrap={false}>
+        <View style={pdfStyles.listItemBullet}>
+          <Text>{bullet}</Text>
+        </View>
+        <View style={pdfStyles.listItemContent}>{children}</View>
+      </View>
+    );
+  },
+
+  taskList: (_node: TipTapNode, children: ReactElement[], ctx: PDFRenderContext): ReactElement => (
+    <View key={ctx.getKey()} style={pdfStyles.taskList}>
+      {children}
+    </View>
+  ),
+
+  taskItem: (node: TipTapNode, children: ReactElement[], ctx: PDFRenderContext): ReactElement => {
+    const checked = node.attrs?.checked === true;
+    return (
+      <View key={ctx.getKey()} style={pdfStyles.taskItem} wrap={false}>
+        <View style={checked ? [pdfStyles.taskCheckbox, pdfStyles.taskCheckboxChecked] : pdfStyles.taskCheckbox}>
+          {checked && <CheckIcon size={8} color="#ffffff" />}
+        </View>
+        <View style={pdfStyles.listItemContent}>{children}</View>
+      </View>
+    );
+  },
+
+  table: (_node: TipTapNode, children: ReactElement[], ctx: PDFRenderContext): ReactElement => (
+    <View key={ctx.getKey()} style={pdfStyles.table}>
+      {children}
+    </View>
+  ),
+
+  tableRow: (node: TipTapNode, children: ReactElement[], ctx: PDFRenderContext): ReactElement => {
+    const isHeader = node.attrs?._isHeader === true;
+    return (
+      <View key={ctx.getKey()} style={isHeader ? pdfStyles.tableHeaderRow : pdfStyles.tableRow} wrap={false}>
+        {children}
+      </View>
+    );
+  },
+
+  tableHeader: (node: TipTapNode, children: ReactElement[], ctx: PDFRenderContext): ReactElement => {
+    const colwidth = node.attrs?.colwidth as number[] | undefined;
+    const background = node.attrs?.background as string | undefined;
+    const width = colwidth?.[0];
+    const widthStyle = width ? { width, flex: undefined } : {};
+    const resolvedBgColor = background ? resolveColorForPdf(background, "background") : null;
+    const bgStyle = resolvedBgColor ? { backgroundColor: resolvedBgColor } : {};
+
+    return (
+      <View key={ctx.getKey()} style={[pdfStyles.tableHeaderCell, widthStyle, bgStyle]}>
+        {children}
+      </View>
+    );
+  },
+
+  tableCell: (node: TipTapNode, children: ReactElement[], ctx: PDFRenderContext): ReactElement => {
+    const colwidth = node.attrs?.colwidth as number[] | undefined;
+    const background = node.attrs?.background as string | undefined;
+    const width = colwidth?.[0];
+    const widthStyle = width ? { width, flex: undefined } : {};
+    const resolvedBgColor = background ? resolveColorForPdf(background, "background") : null;
+    const bgStyle = resolvedBgColor ? { backgroundColor: resolvedBgColor } : {};
+
+    return (
+      <View key={ctx.getKey()} style={[pdfStyles.tableCell, widthStyle, bgStyle]}>
+        {children}
+      </View>
+    );
+  },
+
+  horizontalRule: (_node: TipTapNode, _children: ReactElement[], ctx: PDFRenderContext): ReactElement => (
+    <View key={ctx.getKey()} style={pdfStyles.horizontalRule} />
+  ),
+
+  hardBreak: (_node: TipTapNode, _children: ReactElement[], ctx: PDFRenderContext): ReactElement => (
+    <Text key={ctx.getKey()}>{"\n"}</Text>
+  ),
+
+  image: (node: TipTapNode, _children: ReactElement[], ctx: PDFRenderContext): ReactElement => {
+    if (ctx.metadata?.noAssets) {
+      return <View key={ctx.getKey()} />;
+    }
+
+    const src = (node.attrs?.src as string) || "";
+    const width = node.attrs?.width as number | undefined;
+    const alignment = (node.attrs?.alignment as string) || "left";
+
+    if (!src) {
+      return <View key={ctx.getKey()} />;
+    }
+
+    const alignmentStyle =
+      alignment === "center"
+        ? { alignItems: "center" as const }
+        : alignment === "right"
+          ? { alignItems: "flex-end" as const }
+          : { alignItems: "flex-start" as const };
+
+    return (
+      <View key={ctx.getKey()} style={[{ width: "100%" }, alignmentStyle]}>
+        <Image
+          src={src}
+          style={[pdfStyles.image, width ? { width, maxHeight: 500 } : { maxWidth: 400, maxHeight: 500 }]}
+        />
+      </View>
+    );
+  },
+
+  imageComponent: (node: TipTapNode, _children: ReactElement[], ctx: PDFRenderContext): ReactElement => {
+    if (ctx.metadata?.noAssets) {
+      return <View key={ctx.getKey()} />;
+    }
+
+    const assetId = (node.attrs?.src as string) || "";
+    const rawWidth = node.attrs?.width;
+    const width = typeof rawWidth === "string" ? parseInt(rawWidth, 10) : (rawWidth as number | undefined);
+    const alignment = (node.attrs?.alignment as string) || "left";
+
+    if (!assetId) {
+      return <View key={ctx.getKey()} />;
+    }
+
+    let resolvedSrc = assetId;
+    if (ctx.metadata?.resolvedImageUrls && ctx.metadata.resolvedImageUrls[assetId]) {
+      resolvedSrc = ctx.metadata.resolvedImageUrls[assetId];
+    }
+
+    const alignmentStyle =
+      alignment === "center"
+        ? { alignItems: "center" as const }
+        : alignment === "right"
+          ? { alignItems: "flex-end" as const }
+          : { alignItems: "flex-start" as const };
+
+    if (!resolvedSrc.startsWith("http") && !resolvedSrc.startsWith("data:")) {
+      return (
+        <View key={ctx.getKey()} style={[pdfStyles.imagePlaceholder, alignmentStyle]}>
+          <Text style={pdfStyles.imagePlaceholderText}>[Image: {assetId.slice(0, 8)}...]</Text>
+        </View>
+      );
+    }
+
+    const imageStyle = width && !isNaN(width) ? { width, maxHeight: 500 } : { maxWidth: 400, maxHeight: 500 };
+
+    return (
+      <View key={ctx.getKey()} style={[{ width: "100%" }, alignmentStyle]}>
+        <Image src={resolvedSrc} style={[pdfStyles.image, imageStyle]} />
+      </View>
+    );
+  },
+
+  calloutComponent: (node: TipTapNode, children: ReactElement[], ctx: PDFRenderContext): ReactElement => {
+    const backgroundKey = (node.attrs?.["data-background"] as string) || "gray";
+    const backgroundColor =
+      EDITOR_BACKGROUND_COLORS[backgroundKey as keyof typeof EDITOR_BACKGROUND_COLORS] || BACKGROUND_COLORS.layer3;
+
+    return (
+      <View key={ctx.getKey()} style={[pdfStyles.callout, { backgroundColor }]}>
+        <View style={pdfStyles.calloutIconContainer}>{getCalloutIcon(node, TEXT_COLORS.primary)}</View>
+        <View style={[pdfStyles.calloutContent, { color: TEXT_COLORS.primary }]}>{children}</View>
+      </View>
+    );
+  },
+
+  mention: (node: TipTapNode, _children: ReactElement[], ctx: PDFRenderContext): ReactElement => {
+    const id = (node.attrs?.id as string) || "";
+    const entityIdentifier = (node.attrs?.entity_identifier as string) || "";
+    const entityName = (node.attrs?.entity_name as string) || "";
+
+    let displayText = entityName || id || entityIdentifier;
+
+    if (ctx.metadata && (entityName === "user_mention" || entityName === "user")) {
+      const userMention = ctx.metadata.userMentions?.find((u) => u.id === entityIdentifier || u.id === id);
+      if (userMention) {
+        displayText = userMention.display_name;
+      }
+    }
+
+    return (
+      <Text key={ctx.getKey()} style={pdfStyles.mention}>
+        @{displayText}
+      </Text>
+    );
+  },
+};
+
+type InternalRenderContext = {
+  parentType?: string;
+  nestingLevel: number;
+  listItemIndex: number;
+  textAlign?: string | null;
+  pdfContext: PDFRenderContext;
+};
+
+const renderNodeWithContext = (node: TipTapNode, context: InternalRenderContext): ReactElement => {
+  const { parentType, nestingLevel, listItemIndex, textAlign, pdfContext } = context;
+
+  const isListContainer = node.type === CORE_EXTENSIONS.BULLET_LIST || node.type === CORE_EXTENSIONS.ORDERED_LIST;
+
+  let childTextAlign = textAlign;
+  if (node.type === CORE_EXTENSIONS.PARAGRAPH && node.attrs?.textAlign) {
+    childTextAlign = node.attrs.textAlign as string;
+  }
+
+  const nodeWithContext = {
+    ...node,
+    attrs: {
+      ...node.attrs,
+      _parentType: parentType,
+      _nestingLevel: nestingLevel,
+      _listItemIndex: listItemIndex,
+      _textAlign: childTextAlign,
+      _isHeader: node.content?.some((child) => child.type === CORE_EXTENSIONS.TABLE_HEADER),
+    },
+  };
+
+  let childNestingLevel = nestingLevel;
+  if (isListContainer && parentType === CORE_EXTENSIONS.LIST_ITEM) {
+    childNestingLevel = nestingLevel + 1;
+  }
+
+  let currentListItemIndex = 0;
+  const children: ReactElement[] =
+    node.content?.map((child) => {
+      const childContext: InternalRenderContext = {
+        parentType: node.type,
+        nestingLevel: childNestingLevel,
+        listItemIndex: 0,
+        textAlign: childTextAlign,
+        pdfContext,
+      };
+
+      if (isListContainer && child.type === CORE_EXTENSIONS.LIST_ITEM) {
+        currentListItemIndex++;
+        childContext.listItemIndex = currentListItemIndex;
+      }
+
+      return renderNodeWithContext(child, childContext);
+    }) || [];
+
+  const renderer = nodeRenderers[node.type];
+  if (renderer) {
+    return renderer(nodeWithContext, children, pdfContext);
+  }
+
+  if (children.length > 0) {
+    return <View key={pdfContext.getKey()}>{children}</View>;
+  }
+
+  return <View key={pdfContext.getKey()} />;
+};
+
+export const renderNode = (
+  node: TipTapNode,
+  parentType?: string,
+  _index?: number,
+  metadata?: PDFExportMetadata,
+  getKey?: KeyGenerator
+): ReactElement => {
+  const keyGen = getKey ?? createKeyGenerator();
+
+  return renderNodeWithContext(node, {
+    parentType,
+    nestingLevel: 0,
+    listItemIndex: 0,
+    pdfContext: { getKey: keyGen, metadata },
+  });
+};
diff --git a/apps/live/src/lib/pdf/plane-pdf-exporter.tsx b/apps/live/src/lib/pdf/plane-pdf-exporter.tsx
new file mode 100644
index 000000000..f6c6b599c
--- /dev/null
+++ b/apps/live/src/lib/pdf/plane-pdf-exporter.tsx
@@ -0,0 +1,88 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { createRequire } from "module";
+import path from "path";
+import { Document, Font, Page, pdf, Text } from "@react-pdf/renderer";
+import { createKeyGenerator, renderNode } from "./node-renderers";
+import { pdfStyles } from "./styles";
+import type { PDFExportOptions, TipTapDocument } from "./types";
+
+// Use createRequire for ESM compatibility to resolve font file paths
+const require = createRequire(import.meta.url);
+
+// Resolve local font file paths from @fontsource/inter package
+const interFontDir = path.dirname(require.resolve("@fontsource/inter/package.json"));
+
+Font.register({
+  family: "Inter",
+  fonts: [
+    {
+      src: path.join(interFontDir, "files/inter-latin-400-normal.woff"),
+      fontWeight: 400,
+    },
+    {
+      src: path.join(interFontDir, "files/inter-latin-400-italic.woff"),
+      fontWeight: 400,
+      fontStyle: "italic",
+    },
+    {
+      src: path.join(interFontDir, "files/inter-latin-600-normal.woff"),
+      fontWeight: 600,
+    },
+    {
+      src: path.join(interFontDir, "files/inter-latin-600-italic.woff"),
+      fontWeight: 600,
+      fontStyle: "italic",
+    },
+    {
+      src: path.join(interFontDir, "files/inter-latin-700-normal.woff"),
+      fontWeight: 700,
+    },
+    {
+      src: path.join(interFontDir, "files/inter-latin-700-italic.woff"),
+      fontWeight: 700,
+      fontStyle: "italic",
+    },
+  ],
+});
+
+export const createPdfDocument = (doc: TipTapDocument, options: PDFExportOptions = {}) => {
+  const { title, author, subject, pageSize = "A4", pageOrientation = "portrait", metadata, noAssets } = options;
+
+  // Merge noAssets into metadata for use in node renderers
+  const mergedMetadata = { ...metadata, noAssets };
+
+  const content = doc.content || [];
+  const getKey = createKeyGenerator();
+  const renderedContent = content.map((node, index) => renderNode(node, "doc", index, mergedMetadata, getKey));
+
+  return (
+    <Document title={title} author={author} subject={subject}>
+      <Page size={pageSize} orientation={pageOrientation} style={pdfStyles.page}>
+        {title && <Text style={pdfStyles.title}>{title}</Text>}
+        {renderedContent}
+      </Page>
+    </Document>
+  );
+};
+
+export const renderPlaneDocToPdfBuffer = async (
+  doc: TipTapDocument,
+  options: PDFExportOptions = {}
+): Promise<Buffer> => {
+  const pdfDocument = createPdfDocument(doc, options);
+  const pdfInstance = pdf(pdfDocument);
+  const blob = await pdfInstance.toBlob();
+  const arrayBuffer = await blob.arrayBuffer();
+  return Buffer.from(arrayBuffer);
+};
+
+export const renderPlaneDocToPdfBlob = async (doc: TipTapDocument, options: PDFExportOptions = {}): Promise<Blob> => {
+  const pdfDocument = createPdfDocument(doc, options);
+  const pdfInstance = pdf(pdfDocument);
+  return await pdfInstance.toBlob();
+};
diff --git a/apps/live/src/lib/pdf/styles.ts b/apps/live/src/lib/pdf/styles.ts
new file mode 100644
index 000000000..b55a156d0
--- /dev/null
+++ b/apps/live/src/lib/pdf/styles.ts
@@ -0,0 +1,250 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { StyleSheet } from "@react-pdf/renderer";
+import {
+  BACKGROUND_COLORS,
+  BORDER_COLORS,
+  BRAND_COLORS,
+  CODE_COLORS,
+  LINK_COLORS,
+  MENTION_COLORS,
+  TEXT_COLORS,
+} from "./colors";
+
+export const pdfStyles = StyleSheet.create({
+  page: {
+    padding: 40,
+    fontFamily: "Inter",
+    fontSize: 11,
+    lineHeight: 1.6,
+    color: TEXT_COLORS.primary,
+  },
+  title: {
+    fontSize: 24,
+    fontWeight: 600,
+    marginBottom: 20,
+    color: TEXT_COLORS.primary,
+  },
+  heading1: {
+    fontSize: 20,
+    fontWeight: 600,
+    marginTop: 16,
+    marginBottom: 8,
+    color: TEXT_COLORS.primary,
+  },
+  heading2: {
+    fontSize: 16,
+    fontWeight: 600,
+    marginTop: 14,
+    marginBottom: 6,
+    color: TEXT_COLORS.primary,
+  },
+  heading3: {
+    fontSize: 14,
+    fontWeight: 600,
+    marginTop: 12,
+    marginBottom: 4,
+    color: TEXT_COLORS.primary,
+  },
+  heading4: {
+    fontSize: 12,
+    fontWeight: 600,
+    marginTop: 10,
+    marginBottom: 4,
+    color: TEXT_COLORS.secondary,
+  },
+  heading5: {
+    fontSize: 11,
+    fontWeight: 600,
+    marginTop: 8,
+    marginBottom: 4,
+    color: TEXT_COLORS.secondary,
+  },
+  heading6: {
+    fontSize: 10,
+    fontWeight: 600,
+    marginTop: 6,
+    marginBottom: 4,
+    color: TEXT_COLORS.tertiary,
+  },
+  paragraph: {
+    marginBottom: 0,
+  },
+  paragraphWrapper: {
+    marginBottom: 8,
+  },
+  blockquote: {
+    borderLeftWidth: 3,
+    borderLeftColor: BORDER_COLORS.strong, // Matches .ProseMirror blockquote border-strong
+    paddingLeft: 12,
+    marginLeft: 0,
+    marginVertical: 8,
+    fontStyle: "normal", // Matches editor: font-style: normal
+    fontWeight: 400, // Matches editor: font-weight: 400
+    color: TEXT_COLORS.primary,
+    breakInside: "avoid",
+  },
+  codeBlock: {
+    backgroundColor: BACKGROUND_COLORS.layer1, // bg-layer-1 equivalent
+    padding: 12,
+    borderRadius: 4,
+    fontFamily: "Courier",
+    fontSize: 10,
+    marginVertical: 8,
+    color: TEXT_COLORS.primary,
+    breakInside: "avoid",
+  },
+  codeInline: {
+    backgroundColor: BACKGROUND_COLORS.layer1,
+    padding: 2,
+    paddingHorizontal: 4,
+    borderRadius: 2,
+    fontFamily: "Courier",
+    fontSize: 10,
+    color: CODE_COLORS.text, // Red for inline code
+  },
+  bulletList: {
+    marginVertical: 8,
+    paddingLeft: 0,
+  },
+  orderedList: {
+    marginVertical: 8,
+    paddingLeft: 0,
+  },
+  listItem: {
+    display: "flex",
+    flexDirection: "row",
+    gap: 6,
+    marginBottom: 4,
+    paddingRight: 10,
+    breakInside: "avoid",
+  },
+  listItemBullet: {},
+  listItemContent: {
+    flex: 1,
+  },
+  taskList: {
+    marginVertical: 8,
+  },
+  taskItem: {
+    display: "flex",
+    flexDirection: "row",
+    gap: 6,
+    marginBottom: 4,
+    alignItems: "flex-start",
+    paddingRight: 10,
+    breakInside: "avoid",
+  },
+  taskCheckbox: {
+    width: 12,
+    height: 12,
+    borderWidth: 1,
+    borderColor: BORDER_COLORS.strong, // Matches editor: border-strong
+    borderRadius: 2,
+    marginTop: 2,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  taskCheckboxChecked: {
+    backgroundColor: BRAND_COLORS.default, // --background-color-accent-primary
+    borderColor: BRAND_COLORS.default, // --border-color-accent-strong
+  },
+  table: {
+    marginVertical: 8,
+    borderWidth: 1,
+    borderColor: BORDER_COLORS.subtle1, // border-subtle-1
+  },
+  tableRow: {
+    flexDirection: "row",
+    borderBottomWidth: 1,
+    borderBottomColor: BORDER_COLORS.subtle1,
+    breakInside: "avoid",
+  },
+  tableHeaderRow: {
+    backgroundColor: BACKGROUND_COLORS.surface2, // Slightly different from white
+    flexDirection: "row",
+    borderBottomWidth: 1,
+    borderBottomColor: BORDER_COLORS.subtle1,
+  },
+  tableCell: {
+    padding: 8,
+    borderRightWidth: 1,
+    borderRightColor: BORDER_COLORS.subtle1,
+    flex: 1,
+  },
+  tableHeaderCell: {
+    padding: 8,
+    borderRightWidth: 1,
+    borderRightColor: BORDER_COLORS.subtle1,
+    flex: 1,
+    fontWeight: "bold",
+  },
+  horizontalRule: {
+    borderBottomWidth: 1,
+    borderBottomColor: BORDER_COLORS.subtle1, // Matches div[data-type="horizontalRule"] border-subtle-1
+    marginVertical: 16,
+  },
+  image: {
+    maxWidth: "100%",
+    marginVertical: 8,
+  },
+  imagePlaceholder: {
+    backgroundColor: BACKGROUND_COLORS.layer1,
+    padding: 16,
+    borderRadius: 4,
+    marginVertical: 8,
+    alignItems: "center",
+    justifyContent: "center",
+    borderWidth: 1,
+    borderColor: BORDER_COLORS.subtle,
+    borderStyle: "dashed",
+  },
+  imagePlaceholderText: {
+    color: TEXT_COLORS.tertiary,
+    fontSize: 10,
+  },
+  callout: {
+    backgroundColor: BACKGROUND_COLORS.layer3, // bg-layer-3 (default callout background)
+    padding: 12,
+    borderRadius: 6,
+    marginVertical: 8,
+    flexDirection: "row",
+    alignItems: "flex-start",
+    breakInside: "avoid",
+  },
+  calloutIconContainer: {
+    marginRight: 10,
+    marginTop: 2,
+  },
+  calloutContent: {
+    flex: 1,
+    color: TEXT_COLORS.primary, // text-primary
+  },
+  mention: {
+    backgroundColor: MENTION_COLORS.background, // bg-accent-primary/20 equivalent
+    color: MENTION_COLORS.text, // text-accent-primary
+    padding: 2,
+    paddingHorizontal: 4,
+    borderRadius: 2,
+  },
+  link: {
+    color: LINK_COLORS.primary, // --txt-link-primary
+    textDecoration: "underline",
+  },
+  bold: {
+    fontWeight: "bold",
+  },
+  italic: {
+    fontStyle: "italic",
+  },
+  underline: {
+    textDecoration: "underline",
+  },
+  strike: {
+    textDecoration: "line-through",
+  },
+});
diff --git a/apps/live/src/lib/pdf/types.ts b/apps/live/src/lib/pdf/types.ts
new file mode 100644
index 000000000..0578a49c5
--- /dev/null
+++ b/apps/live/src/lib/pdf/types.ts
@@ -0,0 +1,73 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { Style } from "@react-pdf/types";
+
+export type TipTapMark = {
+  type: string;
+  attrs?: Record<string, unknown>;
+};
+
+export type TipTapNode = {
+  type: string;
+  attrs?: Record<string, unknown>;
+  content?: TipTapNode[];
+  text?: string;
+  marks?: TipTapMark[];
+};
+
+export type TipTapDocument = {
+  type: "doc";
+  content?: TipTapNode[];
+};
+
+export type KeyGenerator = () => string;
+
+export type PDFRenderContext = {
+  getKey: KeyGenerator;
+  metadata?: PDFExportMetadata;
+};
+
+export type PDFNodeRenderer = (
+  node: TipTapNode,
+  children: React.ReactElement[],
+  context: PDFRenderContext
+) => React.ReactElement;
+
+export type PDFMarkRenderer = (mark: TipTapMark, currentStyle: Style) => Style;
+
+export type NodeRendererRegistry = Record<string, PDFNodeRenderer>;
+
+export type MarkRendererRegistry = Record<string, PDFMarkRenderer>;
+
+export type PDFExportOptions = {
+  title?: string;
+  author?: string;
+  subject?: string;
+  pageSize?: "A4" | "A3" | "A2" | "LETTER" | "LEGAL" | "TABLOID";
+  pageOrientation?: "portrait" | "landscape";
+  metadata?: PDFExportMetadata;
+  /** When true, images and other assets are excluded from the PDF */
+  noAssets?: boolean;
+};
+
+/**
+ * Metadata for resolving entity references in PDF export
+ */
+export type PDFExportMetadata = {
+  /** User mentions (user_mention in mention node) */
+  userMentions?: PDFUserMention[];
+  /** Resolved image URLs: Map of asset ID to presigned URL */
+  resolvedImageUrls?: Record<string, string>;
+  /** When true, images and other assets are excluded from the PDF */
+  noAssets?: boolean;
+};
+
+export type PDFUserMention = {
+  id: string;
+  display_name: string;
+  avatar_url?: string;
+};
diff --git a/apps/live/src/lib/stateless.ts b/apps/live/src/lib/stateless.ts
index 1692164d2..d59f8fe99 100644
--- a/apps/live/src/lib/stateless.ts
+++ b/apps/live/src/lib/stateless.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { onStatelessPayload } from "@hocuspocus/server";
 import { DocumentCollaborativeEvents } from "@plane/editor/lib";
 import type { TDocumentEventsServer } from "@plane/editor/lib";
diff --git a/apps/live/src/redis.ts b/apps/live/src/redis.ts
index aac0eb712..f23374a79 100644
--- a/apps/live/src/redis.ts
+++ b/apps/live/src/redis.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import Redis from "ioredis";
 import { logger } from "@plane/logger";
 import { env } from "./env";
diff --git a/apps/live/src/schema/pdf-export.ts b/apps/live/src/schema/pdf-export.ts
new file mode 100644
index 000000000..e3085eefa
--- /dev/null
+++ b/apps/live/src/schema/pdf-export.ts
@@ -0,0 +1,67 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { Schema } from "effect";
+
+export const PdfExportRequestBody = Schema.Struct({
+  pageId: Schema.NonEmptyTrimmedString,
+  workspaceSlug: Schema.NonEmptyTrimmedString,
+  projectId: Schema.optional(Schema.NonEmptyTrimmedString),
+  title: Schema.optional(Schema.String),
+  author: Schema.optional(Schema.String),
+  subject: Schema.optional(Schema.String),
+  pageSize: Schema.optional(Schema.Literal("A4", "A3", "A2", "LETTER", "LEGAL", "TABLOID")),
+  pageOrientation: Schema.optional(Schema.Literal("portrait", "landscape")),
+  fileName: Schema.optional(Schema.String),
+  noAssets: Schema.optional(Schema.Boolean),
+});
+
+export type TPdfExportRequestBody = Schema.Schema.Type<typeof PdfExportRequestBody>;
+
+export class PdfValidationError extends Schema.TaggedError<PdfValidationError>()("PdfValidationError", {
+  message: Schema.NonEmptyTrimmedString,
+  cause: Schema.optional(Schema.Unknown),
+}) {}
+
+export class PdfAuthenticationError extends Schema.TaggedError<PdfAuthenticationError>()("PdfAuthenticationError", {
+  message: Schema.NonEmptyTrimmedString,
+}) {}
+
+export class PdfContentFetchError extends Schema.TaggedError<PdfContentFetchError>()("PdfContentFetchError", {
+  message: Schema.NonEmptyTrimmedString,
+  cause: Schema.optional(Schema.Unknown),
+}) {}
+
+export class PdfMetadataFetchError extends Schema.TaggedError<PdfMetadataFetchError>()("PdfMetadataFetchError", {
+  message: Schema.NonEmptyTrimmedString,
+  source: Schema.Literal("user-mentions"),
+  cause: Schema.optional(Schema.Unknown),
+}) {}
+
+export class PdfImageProcessingError extends Schema.TaggedError<PdfImageProcessingError>()("PdfImageProcessingError", {
+  message: Schema.NonEmptyTrimmedString,
+  assetId: Schema.NonEmptyTrimmedString,
+  cause: Schema.optional(Schema.Unknown),
+}) {}
+
+export class PdfGenerationError extends Schema.TaggedError<PdfGenerationError>()("PdfGenerationError", {
+  message: Schema.NonEmptyTrimmedString,
+  cause: Schema.optional(Schema.Unknown),
+}) {}
+
+export class PdfTimeoutError extends Schema.TaggedError<PdfTimeoutError>()("PdfTimeoutError", {
+  message: Schema.NonEmptyTrimmedString,
+  operation: Schema.NonEmptyTrimmedString,
+}) {}
+
+export type PdfExportError =
+  | PdfValidationError
+  | PdfAuthenticationError
+  | PdfContentFetchError
+  | PdfMetadataFetchError
+  | PdfImageProcessingError
+  | PdfGenerationError
+  | PdfTimeoutError;
diff --git a/apps/live/src/server.ts b/apps/live/src/server.ts
index 59e5ec01b..9a3906bf7 100644
--- a/apps/live/src/server.ts
+++ b/apps/live/src/server.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { Server as HttpServer } from "http";
 import type { Hocuspocus } from "@hocuspocus/server";
 import compression from "compression";
diff --git a/apps/live/src/services/api.service.ts b/apps/live/src/services/api.service.ts
index 68eb52b38..3834bbd6b 100644
--- a/apps/live/src/services/api.service.ts
+++ b/apps/live/src/services/api.service.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { AxiosInstance } from "axios";
 import axios from "axios";
 import { env } from "@/env";
diff --git a/apps/live/src/services/page/core.service.ts b/apps/live/src/services/page/core.service.ts
index 04a064091..c3f3242cf 100644
--- a/apps/live/src/services/page/core.service.ts
+++ b/apps/live/src/services/page/core.service.ts
@@ -1,13 +1,19 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { logger } from "@plane/logger";
-import type { TPage } from "@plane/types";
+import type { TDocumentPayload, TPage } from "@plane/types";
 // services
 import { AppError } from "@/lib/errors";
 import { APIService } from "../api.service";
 
-export type TPageDescriptionPayload = {
-  description_binary: string;
-  description_html: string;
-  description: object;
+export type TUserMention = {
+  id: string;
+  display_name: string;
+  avatar_url?: string;
 };
 
 export abstract class PageCoreService extends APIService {
@@ -18,35 +24,41 @@ export abstract class PageCoreService extends APIService {
   }
 
   async fetchDetails(pageId: string): Promise<TPage> {
-    return this.get(`${this.basePath}/pages/${pageId}/`, {
-      headers: this.getHeader(),
-    })
-      .then((response) => response?.data)
-      .catch((error) => {
-        const appError = new AppError(error, {
-          context: { operation: "fetchDetails", pageId },
-        });
-        logger.error("Failed to fetch page details", appError);
-        throw appError;
+    try {
+      const response = await this.get(`${this.basePath}/pages/${pageId}/`, {
+        headers: this.getHeader(),
       });
+      return response?.data as TPage;
+    } catch (error) {
+      const appError = new AppError(error, {
+        context: { operation: "fetchDetails", pageId },
+      });
+      logger.error("Failed to fetch page details", appError);
+      throw appError;
+    }
   }
 
-  async fetchDescriptionBinary(pageId: string): Promise<any> {
-    return this.get(`${this.basePath}/pages/${pageId}/description/`, {
-      headers: {
-        ...this.getHeader(),
-        "Content-Type": "application/octet-stream",
-      },
-      responseType: "arraybuffer",
-    })
-      .then((response) => response?.data)
-      .catch((error) => {
-        const appError = new AppError(error, {
-          context: { operation: "fetchDescriptionBinary", pageId },
-        });
-        logger.error("Failed to fetch page description binary", appError);
-        throw appError;
+  async fetchDescriptionBinary(pageId: string): Promise<Buffer> {
+    try {
+      const response = await this.get(`${this.basePath}/pages/${pageId}/description/`, {
+        headers: {
+          ...this.getHeader(),
+          "Content-Type": "application/octet-stream",
+        },
+        responseType: "arraybuffer",
       });
+      const data = response?.data;
+      if (!Buffer.isBuffer(data)) {
+        throw new Error("Expected response to be a Buffer");
+      }
+      return data;
+    } catch (error) {
+      const appError = new AppError(error, {
+        context: { operation: "fetchDescriptionBinary", pageId },
+      });
+      logger.error("Failed to fetch page description binary", appError);
+      throw appError;
+    }
   }
 
   /**
@@ -103,17 +115,113 @@ export abstract class PageCoreService extends APIService {
     }
   }
 
-  async updateDescriptionBinary(pageId: string, data: TPageDescriptionPayload): Promise<any> {
-    return this.patch(`${this.basePath}/pages/${pageId}/description/`, data, {
-      headers: this.getHeader(),
-    })
-      .then((response) => response?.data)
-      .catch((error) => {
-        const appError = new AppError(error, {
-          context: { operation: "updateDescriptionBinary", pageId },
-        });
-        logger.error("Failed to update page description binary", appError);
-        throw appError;
+  async updateDescriptionBinary(pageId: string, data: TDocumentPayload): Promise<any> {
+    try {
+      const response = await this.patch(`${this.basePath}/pages/${pageId}/description/`, data, {
+        headers: this.getHeader(),
       });
+      return response?.data as unknown;
+    } catch (error) {
+      const appError = new AppError(error, {
+        context: { operation: "updateDescriptionBinary", pageId },
+      });
+      logger.error("Failed to update page description binary", appError);
+      throw appError;
+    }
+  }
+
+  /**
+   * Fetches user mentions for a page
+   * @param pageId - The page ID
+   * @returns Array of user mentions
+   */
+  async fetchUserMentions(pageId: string): Promise<TUserMention[]> {
+    try {
+      const response = await this.get(`${this.basePath}/pages/${pageId}/mentions/`, {
+        headers: this.getHeader(),
+        params: {
+          mention_type: "user_mention",
+        },
+      });
+      return (response?.data as TUserMention[]) ?? [];
+    } catch (error) {
+      const appError = new AppError(error, {
+        context: { operation: "fetchUserMentions", pageId },
+      });
+      logger.error("Failed to fetch user mentions", appError);
+      throw appError;
+    }
+  }
+
+  /**
+   * Resolves an image asset ID to its actual URL by following the 302 redirect
+   * @param workspaceSlug - The workspace slug
+   * @param assetId - The asset UUID
+   * @param projectId - Optional project ID for project-specific assets
+   * @returns The resolved image URL (presigned S3 URL)
+   */
+  async resolveImageAssetUrl(
+    workspaceSlug: string,
+    assetId: string,
+    projectId?: string | null
+  ): Promise<string | null> {
+    const path = projectId
+      ? `/api/assets/v2/workspaces/${workspaceSlug}/projects/${projectId}/${assetId}/?disposition=inline`
+      : `/api/assets/v2/workspaces/${workspaceSlug}/${assetId}/?disposition=inline`;
+
+    try {
+      const response = await this.get(path, {
+        headers: this.getHeader(),
+        maxRedirects: 0,
+        validateStatus: (status: number) => status >= 200 && status < 400,
+      });
+      // If we get a 302, the Location header contains the presigned URL
+      if (response.status === 302 || response.status === 301) {
+        return response.headers?.location || null;
+      }
+      return null;
+    } catch (error) {
+      // Axios throws on 3xx when maxRedirects is 0, so we need to handle the redirect from the error
+      if ((error as any).response?.status === 302 || (error as any).response?.status === 301) {
+        return (error as any).response.headers?.location || null;
+      }
+      logger.error("Failed to resolve image asset URL", {
+        assetId,
+        workspaceSlug,
+        error: (error as any).message,
+      });
+      return null;
+    }
+  }
+
+  /**
+   * Resolves multiple image asset IDs to their actual URLs
+   * @param workspaceSlug - The workspace slug
+   * @param assetIds - Array of asset UUIDs
+   * @param projectId - Optional project ID for project-specific assets
+   * @returns Map of assetId to resolved URL
+   */
+  async resolveImageAssetUrls(
+    workspaceSlug: string,
+    assetIds: string[],
+    projectId?: string | null
+  ): Promise<Map<string, string>> {
+    const urlMap = new Map<string, string>();
+
+    // Resolve all asset URLs in parallel
+    const results = await Promise.allSettled(
+      assetIds.map(async (assetId) => {
+        const url = await this.resolveImageAssetUrl(workspaceSlug, assetId, projectId);
+        return { assetId, url };
+      })
+    );
+
+    for (const result of results) {
+      if (result.status === "fulfilled" && result.value.url) {
+        urlMap.set(result.value.assetId, result.value.url);
+      }
+    }
+
+    return urlMap;
   }
 }
diff --git a/apps/live/src/services/page/extended.service.ts b/apps/live/src/services/page/extended.service.ts
index 29ef316db..2b076efac 100644
--- a/apps/live/src/services/page/extended.service.ts
+++ b/apps/live/src/services/page/extended.service.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { PageCoreService } from "./core.service";
 
 /**
diff --git a/apps/live/src/services/page/handler.ts b/apps/live/src/services/page/handler.ts
index 9b2f5adac..2bfd0b1dd 100644
--- a/apps/live/src/services/page/handler.ts
+++ b/apps/live/src/services/page/handler.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { AppError } from "@/lib/errors";
 import type { HocusPocusServerContext, TDocumentTypes } from "@/types";
 // services
diff --git a/apps/live/src/services/page/project-page.service.ts b/apps/live/src/services/page/project-page.service.ts
index 89a115627..d89ab0aa7 100644
--- a/apps/live/src/services/page/project-page.service.ts
+++ b/apps/live/src/services/page/project-page.service.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { AppError } from "@/lib/errors";
 import { PageService } from "./extended.service";
 
diff --git a/apps/live/src/services/pdf-export/effect-utils.ts b/apps/live/src/services/pdf-export/effect-utils.ts
new file mode 100644
index 000000000..18f40b089
--- /dev/null
+++ b/apps/live/src/services/pdf-export/effect-utils.ts
@@ -0,0 +1,56 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { Effect, Duration, Schedule, pipe } from "effect";
+import { PdfTimeoutError } from "@/schema/pdf-export";
+
+/**
+ * Wraps an effect with timeout and exponential backoff retry logic.
+ * Preserves the environment type R for proper dependency injection.
+ */
+export const withTimeoutAndRetry =
+  (operation: string, { timeoutMs = 5000, maxRetries = 2 }: { timeoutMs?: number; maxRetries?: number } = {}) =>
+  <A, E, R>(effect: Effect.Effect<A, E, R>): Effect.Effect<A, E | PdfTimeoutError, R> =>
+    effect.pipe(
+      Effect.timeoutFail({
+        duration: Duration.millis(timeoutMs),
+        onTimeout: () =>
+          new PdfTimeoutError({
+            message: `Operation "${operation}" timed out after ${timeoutMs}ms`,
+            operation,
+          }),
+      }),
+      Effect.retry(
+        pipe(
+          Schedule.exponential(Duration.millis(200)),
+          Schedule.compose(Schedule.recurs(maxRetries)),
+          Schedule.tapInput((error: E | PdfTimeoutError) =>
+            Effect.logWarning("PDF_EXPORT: Retrying operation", { operation, error })
+          )
+        )
+      )
+    );
+
+/**
+ * Recovers from any error with a default fallback value.
+ * Logs the error before recovering.
+ */
+export const recoverWithDefault =
+  <A>(fallback: A) =>
+  <E, R>(effect: Effect.Effect<A, E, R>): Effect.Effect<A, never, R> =>
+    effect.pipe(
+      Effect.tapError((error) => Effect.logWarning("PDF_EXPORT: Operation failed, using fallback", { error })),
+      Effect.catchAll(() => Effect.succeed(fallback))
+    );
+
+/**
+ * Wraps a promise-returning function with proper Effect error handling
+ */
+export const tryAsync = <A, E>(fn: () => Promise<A>, onError: (cause: unknown) => E): Effect.Effect<A, E> =>
+  Effect.tryPromise({
+    try: fn,
+    catch: onError,
+  });
diff --git a/apps/live/src/services/pdf-export/index.ts b/apps/live/src/services/pdf-export/index.ts
new file mode 100644
index 000000000..fa2a7c68d
--- /dev/null
+++ b/apps/live/src/services/pdf-export/index.ts
@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export { PdfExportService, exportToPdf } from "./pdf-export.service";
+export * from "./effect-utils";
+export * from "./types";
diff --git a/apps/live/src/services/pdf-export/pdf-export.service.ts b/apps/live/src/services/pdf-export/pdf-export.service.ts
new file mode 100644
index 000000000..e9c67fc36
--- /dev/null
+++ b/apps/live/src/services/pdf-export/pdf-export.service.ts
@@ -0,0 +1,379 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { Effect } from "effect";
+import sharp from "sharp";
+import { getAllDocumentFormatsFromDocumentEditorBinaryData } from "@plane/editor/lib";
+import type { PDFExportMetadata, TipTapDocument } from "@/lib/pdf";
+import { renderPlaneDocToPdfBuffer } from "@/lib/pdf";
+import { getPageService } from "@/services/page/handler";
+import type { TDocumentTypes } from "@/types";
+import {
+  PdfContentFetchError,
+  PdfGenerationError,
+  PdfImageProcessingError,
+  PdfTimeoutError,
+} from "@/schema/pdf-export";
+import { withTimeoutAndRetry, recoverWithDefault, tryAsync } from "./effect-utils";
+import type { PdfExportInput, PdfExportResult, PageContent, MetadataResult } from "./types";
+
+const IMAGE_CONCURRENCY = 4;
+const IMAGE_TIMEOUT_MS = 8000;
+const CONTENT_FETCH_TIMEOUT_MS = 7000;
+const PDF_RENDER_TIMEOUT_MS = 15000;
+const IMAGE_MAX_DIMENSION = 1200;
+
+type TipTapNode = {
+  type: string;
+  attrs?: Record<string, unknown>;
+  content?: TipTapNode[];
+};
+
+/**
+ * PDF Export Service
+ */
+export class PdfExportService extends Effect.Service<PdfExportService>()("PdfExportService", {
+  sync: () => ({
+    /**
+     * Determines document type
+     */
+    getDocumentType: (_input: PdfExportInput): TDocumentTypes => {
+      return "project_page";
+    },
+
+    /**
+     * Extracts image asset IDs from document content
+     */
+    extractImageAssetIds: (doc: TipTapNode): string[] => {
+      const assetIds: string[] = [];
+
+      const traverse = (node: TipTapNode) => {
+        if ((node.type === "imageComponent" || node.type === "image") && node.attrs?.src) {
+          const src = node.attrs.src as string;
+          if (src && !src.startsWith("http") && !src.startsWith("data:")) {
+            assetIds.push(src);
+          }
+        }
+        if (node.content) {
+          for (const child of node.content) {
+            traverse(child);
+          }
+        }
+      };
+
+      traverse(doc);
+      return [...new Set(assetIds)];
+    },
+
+    /**
+     * Fetches page content (description binary) and parses it
+     */
+    fetchPageContent: (
+      pageService: ReturnType<typeof getPageService>,
+      pageId: string,
+      requestId: string
+    ): Effect.Effect<PageContent, PdfContentFetchError | PdfTimeoutError> =>
+      Effect.gen(function* () {
+        yield* Effect.logDebug("PDF_EXPORT: Fetching page content", { requestId, pageId });
+
+        const descriptionBinary = yield* tryAsync(
+          () => pageService.fetchDescriptionBinary(pageId),
+          (cause) =>
+            new PdfContentFetchError({
+              message: "Failed to fetch page content",
+              cause,
+            })
+        ).pipe(
+          withTimeoutAndRetry("fetch page content", {
+            timeoutMs: CONTENT_FETCH_TIMEOUT_MS,
+            maxRetries: 3,
+          })
+        );
+
+        if (!descriptionBinary) {
+          return yield* Effect.fail(
+            new PdfContentFetchError({
+              message: "Page content not found",
+            })
+          );
+        }
+
+        const binaryData = new Uint8Array(descriptionBinary);
+        const { contentJSON, titleHTML } = getAllDocumentFormatsFromDocumentEditorBinaryData(binaryData, true);
+
+        return {
+          contentJSON: contentJSON as TipTapDocument,
+          titleHTML: titleHTML || null,
+          descriptionBinary,
+        };
+      }),
+
+    /**
+     * Fetches user mentions for the page
+     */
+    fetchUserMentions: (
+      pageService: ReturnType<typeof getPageService>,
+      pageId: string,
+      requestId: string
+    ): Effect.Effect<MetadataResult> =>
+      Effect.gen(function* () {
+        yield* Effect.logDebug("PDF_EXPORT: Fetching user mentions", { requestId });
+
+        const userMentionsRaw = yield* tryAsync(
+          async () => {
+            if (pageService.fetchUserMentions) {
+              return await pageService.fetchUserMentions(pageId);
+            }
+            return [];
+          },
+          () => []
+        ).pipe(recoverWithDefault([] as Array<{ id: string; display_name: string; avatar_url?: string }>));
+
+        return {
+          userMentions: userMentionsRaw.map((u) => ({
+            id: u.id,
+            display_name: u.display_name,
+            avatar_url: u.avatar_url,
+          })),
+        };
+      }),
+
+    /**
+     * Resolves and processes images for PDF embedding
+     */
+    processImages: (
+      pageService: ReturnType<typeof getPageService>,
+      workspaceSlug: string,
+      projectId: string | undefined,
+      assetIds: string[],
+      requestId: string
+    ): Effect.Effect<Record<string, string>> =>
+      Effect.gen(function* () {
+        if (assetIds.length === 0) {
+          return {};
+        }
+
+        yield* Effect.logDebug("PDF_EXPORT: Processing images", {
+          requestId,
+          count: assetIds.length,
+        });
+
+        // Resolve URLs first
+        const resolvedUrlMap = yield* tryAsync(
+          async () => {
+            const urlMap = new Map<string, string>();
+            for (const assetId of assetIds) {
+              const url = await pageService.resolveImageAssetUrl?.(workspaceSlug, assetId, projectId);
+              if (url) urlMap.set(assetId, url);
+            }
+            return urlMap;
+          },
+          () => new Map<string, string>()
+        ).pipe(recoverWithDefault(new Map<string, string>()));
+
+        if (resolvedUrlMap.size === 0) {
+          return {};
+        }
+
+        // Process each image
+        const processSingleImage = ([assetId, url]: [string, string]) =>
+          Effect.gen(function* () {
+            const response = yield* tryAsync(
+              () => fetch(url),
+              (cause) =>
+                new PdfImageProcessingError({
+                  message: "Failed to fetch image",
+                  assetId,
+                  cause,
+                })
+            );
+
+            if (!response.ok) {
+              return yield* Effect.fail(
+                new PdfImageProcessingError({
+                  message: `Image fetch returned ${response.status}`,
+                  assetId,
+                })
+              );
+            }
+
+            const arrayBuffer = yield* tryAsync(
+              () => response.arrayBuffer(),
+              (cause) =>
+                new PdfImageProcessingError({
+                  message: "Failed to read image body",
+                  assetId,
+                  cause,
+                })
+            );
+
+            const processedBuffer = yield* tryAsync(
+              () =>
+                sharp(Buffer.from(arrayBuffer))
+                  .rotate()
+                  .flatten({ background: { r: 255, g: 255, b: 255 } })
+                  .resize(IMAGE_MAX_DIMENSION, IMAGE_MAX_DIMENSION, { fit: "inside", withoutEnlargement: true })
+                  .jpeg({ quality: 85 })
+                  .toBuffer(),
+              (cause) =>
+                new PdfImageProcessingError({
+                  message: "Failed to process image",
+                  assetId,
+                  cause,
+                })
+            );
+
+            const base64 = processedBuffer.toString("base64");
+            return [assetId, `data:image/jpeg;base64,${base64}`] as const;
+          }).pipe(
+            withTimeoutAndRetry(`process image ${assetId}`, {
+              timeoutMs: IMAGE_TIMEOUT_MS,
+              maxRetries: 1,
+            }),
+            Effect.tapError((error) =>
+              Effect.logWarning("PDF_EXPORT: Image processing failed", {
+                requestId,
+                assetId,
+                error,
+              })
+            ),
+            Effect.catchAll(() => Effect.succeed(null as readonly [string, string] | null))
+          );
+
+        const entries = Array.from(resolvedUrlMap.entries());
+        const pairs = yield* Effect.forEach(entries, processSingleImage, {
+          concurrency: IMAGE_CONCURRENCY,
+        });
+
+        const filtered = pairs.filter((p): p is readonly [string, string] => p !== null);
+        return Object.fromEntries(filtered);
+      }),
+
+    /**
+     * Renders document to PDF buffer
+     */
+    renderPdf: (
+      contentJSON: TipTapDocument,
+      metadata: PDFExportMetadata,
+      options: {
+        title?: string;
+        author?: string;
+        subject?: string;
+        pageSize?: "A4" | "A3" | "A2" | "LETTER" | "LEGAL" | "TABLOID";
+        pageOrientation?: "portrait" | "landscape";
+        noAssets?: boolean;
+      },
+      requestId: string
+    ): Effect.Effect<Buffer, PdfGenerationError | PdfTimeoutError> =>
+      Effect.gen(function* () {
+        yield* Effect.logDebug("PDF_EXPORT: Rendering PDF", { requestId });
+
+        const pdfBuffer = yield* tryAsync(
+          () =>
+            renderPlaneDocToPdfBuffer(contentJSON, {
+              title: options.title,
+              author: options.author,
+              subject: options.subject,
+              pageSize: options.pageSize,
+              pageOrientation: options.pageOrientation,
+              metadata,
+              noAssets: options.noAssets,
+            }),
+          (cause) =>
+            new PdfGenerationError({
+              message: "Failed to render PDF",
+              cause,
+            })
+        ).pipe(withTimeoutAndRetry("render PDF", { timeoutMs: PDF_RENDER_TIMEOUT_MS, maxRetries: 0 }));
+
+        yield* Effect.logInfo("PDF_EXPORT: PDF rendered successfully", {
+          requestId,
+          size: pdfBuffer.length,
+        });
+
+        return pdfBuffer;
+      }),
+  }),
+}) {}
+
+/**
+ * Main export pipeline - orchestrates the entire PDF export process
+ * Separate function to avoid circular dependency in service definition
+ */
+export const exportToPdf = (
+  input: PdfExportInput
+): Effect.Effect<PdfExportResult, PdfContentFetchError | PdfGenerationError | PdfTimeoutError, PdfExportService> =>
+  Effect.gen(function* () {
+    const service = yield* PdfExportService;
+    const { requestId, pageId, workspaceSlug, projectId, noAssets } = input;
+
+    yield* Effect.logInfo("PDF_EXPORT: Starting export", { requestId, pageId, workspaceSlug });
+
+    // Create page service
+    const documentType = service.getDocumentType(input);
+    const pageService = getPageService(documentType, {
+      workspaceSlug,
+      projectId: projectId || null,
+      cookie: input.cookie,
+      documentType,
+      userId: "",
+    });
+
+    // Fetch content
+    const content = yield* service.fetchPageContent(pageService, pageId, requestId);
+
+    // Extract image asset IDs
+    const imageAssetIds = service.extractImageAssetIds(content.contentJSON as TipTapNode);
+
+    // Fetch user mentions
+    let metadata = yield* service.fetchUserMentions(pageService, pageId, requestId);
+
+    // Process images if needed
+    if (!noAssets && imageAssetIds.length > 0) {
+      const resolvedImages = yield* service.processImages(
+        pageService,
+        workspaceSlug,
+        projectId,
+        imageAssetIds,
+        requestId
+      );
+      metadata = { ...metadata, resolvedImageUrls: resolvedImages };
+    }
+
+    yield* Effect.logDebug("PDF_EXPORT: Metadata prepared", {
+      requestId,
+      userMentions: metadata.userMentions?.length ?? 0,
+      resolvedImages: Object.keys(metadata.resolvedImageUrls ?? {}).length,
+    });
+
+    // Render PDF
+    const documentTitle = input.title || content.titleHTML || undefined;
+    const pdfBuffer = yield* service.renderPdf(
+      content.contentJSON,
+      metadata,
+      {
+        title: documentTitle,
+        author: input.author,
+        subject: input.subject,
+        pageSize: input.pageSize,
+        pageOrientation: input.pageOrientation,
+        noAssets,
+      },
+      requestId
+    );
+
+    yield* Effect.logInfo("PDF_EXPORT: Export complete", {
+      requestId,
+      pageId,
+      size: pdfBuffer.length,
+    });
+
+    return {
+      pdfBuffer,
+      outputFileName: input.fileName || `page-${pageId}.pdf`,
+      pageId,
+    };
+  });
diff --git a/apps/live/src/services/pdf-export/types.ts b/apps/live/src/services/pdf-export/types.ts
new file mode 100644
index 000000000..1a95b0ece
--- /dev/null
+++ b/apps/live/src/services/pdf-export/types.ts
@@ -0,0 +1,42 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { TipTapDocument, PDFUserMention } from "@/lib/pdf";
+
+export interface PdfExportInput {
+  readonly pageId: string;
+  readonly workspaceSlug: string;
+  readonly projectId?: string;
+  readonly title?: string;
+  readonly author?: string;
+  readonly subject?: string;
+  readonly pageSize?: "A4" | "A3" | "A2" | "LETTER" | "LEGAL" | "TABLOID";
+  readonly pageOrientation?: "portrait" | "landscape";
+  readonly fileName?: string;
+  readonly noAssets?: boolean;
+  readonly cookie: string;
+  readonly requestId: string;
+}
+
+export interface PdfExportResult {
+  readonly pdfBuffer: Buffer;
+  readonly outputFileName: string;
+  readonly pageId: string;
+}
+
+export interface PageContent {
+  readonly contentJSON: TipTapDocument;
+  readonly titleHTML: string | null;
+  readonly descriptionBinary: Buffer;
+}
+
+/**
+ * Metadata - includes user mentions
+ */
+export interface MetadataResult {
+  readonly userMentions: PDFUserMention[];
+  readonly resolvedImageUrls?: Record<string, string>;
+}
diff --git a/apps/live/src/services/user.service.ts b/apps/live/src/services/user.service.ts
index 272d7543c..b4c285921 100644
--- a/apps/live/src/services/user.service.ts
+++ b/apps/live/src/services/user.service.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // types
 import { logger } from "@plane/logger";
 import type { IUser } from "@plane/types";
diff --git a/apps/live/src/start.ts b/apps/live/src/start.ts
index ced70a209..705eb12f3 100644
--- a/apps/live/src/start.ts
+++ b/apps/live/src/start.ts
@@ -1,5 +1,8 @@
-import { setupSentry } from "./instrument";
-setupSentry();
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
 
 import { logger } from "@plane/logger";
 import { AppError } from "@/lib/errors";
diff --git a/apps/live/src/types/admin-commands.ts b/apps/live/src/types/admin-commands.ts
index bd8e5cd59..1cbe7a537 100644
--- a/apps/live/src/types/admin-commands.ts
+++ b/apps/live/src/types/admin-commands.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 /**
  * Type-safe admin commands for server-to-server communication
  */
diff --git a/apps/live/src/types/index.ts b/apps/live/src/types/index.ts
index 6c05fb835..39c941d09 100644
--- a/apps/live/src/types/index.ts
+++ b/apps/live/src/types/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { fetchPayload, onLoadDocumentPayload, storePayload } from "@hocuspocus/server";
 
 export type TConvertDocumentRequestBody = {
diff --git a/apps/live/src/utils/broadcast-error.ts b/apps/live/src/utils/broadcast-error.ts
index d9dbbc485..4d1077c9f 100644
--- a/apps/live/src/utils/broadcast-error.ts
+++ b/apps/live/src/utils/broadcast-error.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { Hocuspocus } from "@hocuspocus/server";
 import { createRealtimeEvent } from "@plane/editor";
 import { logger } from "@plane/logger";
diff --git a/apps/live/src/utils/broadcast-message.ts b/apps/live/src/utils/broadcast-message.ts
index c60ce9ac7..473a3c731 100644
--- a/apps/live/src/utils/broadcast-message.ts
+++ b/apps/live/src/utils/broadcast-message.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { Hocuspocus } from "@hocuspocus/server";
 import type { BroadcastedEvent } from "@plane/editor";
 import { logger } from "@plane/logger";
diff --git a/apps/live/tests/lib/pdf/pdf-rendering.test.ts b/apps/live/tests/lib/pdf/pdf-rendering.test.ts
new file mode 100644
index 000000000..507c6f900
--- /dev/null
+++ b/apps/live/tests/lib/pdf/pdf-rendering.test.ts
@@ -0,0 +1,732 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { describe, it, expect } from "vitest";
+import { PDFParse } from "pdf-parse";
+import { renderPlaneDocToPdfBuffer } from "@/lib/pdf";
+import type { TipTapDocument, PDFExportMetadata } from "@/lib/pdf";
+
+const PDF_HEADER = "%PDF-";
+
+/**
+ * Helper to extract text content from a PDF buffer
+ */
+async function extractPdfText(buffer: Buffer): Promise<string> {
+  const uint8 = new Uint8Array(buffer);
+  const parser = new PDFParse(uint8);
+  const result = await parser.getText();
+  return result.pages.map((p) => p.text).join("\n");
+}
+
+describe("PDF Rendering Integration", () => {
+  describe("renderPlaneDocToPdfBuffer", () => {
+    it("should render empty document to valid PDF", async () => {
+      const doc: TipTapDocument = {
+        type: "doc",
+        content: [],
+      };
+
+      const buffer = await renderPlaneDocToPdfBuffer(doc);
+
+      expect(buffer).toBeInstanceOf(Buffer);
+      expect(buffer.length).toBeGreaterThan(0);
+      expect(buffer.toString("ascii", 0, 5)).toBe(PDF_HEADER);
+    });
+
+    it("should render document with title and verify content", async () => {
+      const doc: TipTapDocument = {
+        type: "doc",
+        content: [
+          {
+            type: "paragraph",
+            content: [{ type: "text", text: "Hello World" }],
+          },
+        ],
+      };
+
+      const buffer = await renderPlaneDocToPdfBuffer(doc, {
+        title: "Test Document",
+      });
+
+      expect(buffer).toBeInstanceOf(Buffer);
+      expect(buffer.toString("ascii", 0, 5)).toBe(PDF_HEADER);
+
+      const text = await extractPdfText(buffer);
+      expect(text).toContain("Hello World");
+      // Title is rendered in PDF content when provided
+      expect(text).toContain("Test Document");
+    });
+
+    it("should render heading nodes and verify text", async () => {
+      const doc: TipTapDocument = {
+        type: "doc",
+        content: [
+          {
+            type: "heading",
+            attrs: { level: 1 },
+            content: [{ type: "text", text: "Main Heading" }],
+          },
+          {
+            type: "heading",
+            attrs: { level: 2 },
+            content: [{ type: "text", text: "Subheading" }],
+          },
+        ],
+      };
+
+      const buffer = await renderPlaneDocToPdfBuffer(doc);
+      const text = await extractPdfText(buffer);
+
+      expect(text).toContain("Main Heading");
+      expect(text).toContain("Subheading");
+    });
+
+    it("should render paragraph with text and verify content", async () => {
+      const doc: TipTapDocument = {
+        type: "doc",
+        content: [
+          {
+            type: "paragraph",
+            content: [{ type: "text", text: "This is a test paragraph with some content." }],
+          },
+        ],
+      };
+
+      const buffer = await renderPlaneDocToPdfBuffer(doc);
+      const text = await extractPdfText(buffer);
+
+      expect(text).toContain("This is a test paragraph with some content.");
+    });
+
+    it("should render bullet list with all items", async () => {
+      const doc: TipTapDocument = {
+        type: "doc",
+        content: [
+          {
+            type: "bulletList",
+            content: [
+              {
+                type: "listItem",
+                content: [
+                  {
+                    type: "paragraph",
+                    content: [{ type: "text", text: "First item" }],
+                  },
+                ],
+              },
+              {
+                type: "listItem",
+                content: [
+                  {
+                    type: "paragraph",
+                    content: [{ type: "text", text: "Second item" }],
+                  },
+                ],
+              },
+              {
+                type: "listItem",
+                content: [
+                  {
+                    type: "paragraph",
+                    content: [{ type: "text", text: "Third item" }],
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      };
+
+      const buffer = await renderPlaneDocToPdfBuffer(doc);
+      const text = await extractPdfText(buffer);
+
+      expect(text).toContain("First item");
+      expect(text).toContain("Second item");
+      expect(text).toContain("Third item");
+      // Bullet points should be present
+      expect(text).toContain("•");
+    });
+
+    it("should render ordered list with numbers", async () => {
+      const doc: TipTapDocument = {
+        type: "doc",
+        content: [
+          {
+            type: "orderedList",
+            content: [
+              {
+                type: "listItem",
+                content: [
+                  {
+                    type: "paragraph",
+                    content: [{ type: "text", text: "Step one" }],
+                  },
+                ],
+              },
+              {
+                type: "listItem",
+                content: [
+                  {
+                    type: "paragraph",
+                    content: [{ type: "text", text: "Step two" }],
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      };
+
+      const buffer = await renderPlaneDocToPdfBuffer(doc);
+      const text = await extractPdfText(buffer);
+
+      expect(text).toContain("Step one");
+      expect(text).toContain("Step two");
+      // Numbers should be present
+      expect(text).toMatch(/1\./);
+      expect(text).toMatch(/2\./);
+    });
+
+    it("should render task list with task text", async () => {
+      const doc: TipTapDocument = {
+        type: "doc",
+        content: [
+          {
+            type: "taskList",
+            content: [
+              {
+                type: "taskItem",
+                attrs: { checked: true },
+                content: [
+                  {
+                    type: "paragraph",
+                    content: [{ type: "text", text: "Completed task" }],
+                  },
+                ],
+              },
+              {
+                type: "taskItem",
+                attrs: { checked: false },
+                content: [
+                  {
+                    type: "paragraph",
+                    content: [{ type: "text", text: "Pending task" }],
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      };
+
+      const buffer = await renderPlaneDocToPdfBuffer(doc);
+      const text = await extractPdfText(buffer);
+
+      expect(text).toContain("Completed task");
+      expect(text).toContain("Pending task");
+    });
+
+    it("should render code block with code content", async () => {
+      const doc: TipTapDocument = {
+        type: "doc",
+        content: [
+          {
+            type: "codeBlock",
+            content: [
+              { type: "text", text: "const greeting = 'Hello';\n" },
+              { type: "text", text: "console.log(greeting);" },
+            ],
+          },
+        ],
+      };
+
+      const buffer = await renderPlaneDocToPdfBuffer(doc);
+      const text = await extractPdfText(buffer);
+
+      expect(text).toContain("const greeting");
+      expect(text).toContain("console.log");
+    });
+
+    it("should render blockquote with quoted text", async () => {
+      const doc: TipTapDocument = {
+        type: "doc",
+        content: [
+          {
+            type: "blockquote",
+            content: [
+              {
+                type: "paragraph",
+                content: [{ type: "text", text: "This is a quoted text." }],
+              },
+            ],
+          },
+        ],
+      };
+
+      const buffer = await renderPlaneDocToPdfBuffer(doc);
+      const text = await extractPdfText(buffer);
+
+      expect(text).toContain("This is a quoted text.");
+    });
+
+    it("should render table with all cell content", async () => {
+      const doc: TipTapDocument = {
+        type: "doc",
+        content: [
+          {
+            type: "table",
+            content: [
+              {
+                type: "tableRow",
+                content: [
+                  {
+                    type: "tableHeader",
+                    content: [
+                      {
+                        type: "paragraph",
+                        content: [{ type: "text", text: "Header 1" }],
+                      },
+                    ],
+                  },
+                  {
+                    type: "tableHeader",
+                    content: [
+                      {
+                        type: "paragraph",
+                        content: [{ type: "text", text: "Header 2" }],
+                      },
+                    ],
+                  },
+                ],
+              },
+              {
+                type: "tableRow",
+                content: [
+                  {
+                    type: "tableCell",
+                    content: [
+                      {
+                        type: "paragraph",
+                        content: [{ type: "text", text: "Cell 1" }],
+                      },
+                    ],
+                  },
+                  {
+                    type: "tableCell",
+                    content: [
+                      {
+                        type: "paragraph",
+                        content: [{ type: "text", text: "Cell 2" }],
+                      },
+                    ],
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      };
+
+      const buffer = await renderPlaneDocToPdfBuffer(doc);
+      const text = await extractPdfText(buffer);
+
+      expect(text).toContain("Header 1");
+      expect(text).toContain("Header 2");
+      expect(text).toContain("Cell 1");
+      expect(text).toContain("Cell 2");
+    });
+
+    it("should render horizontal rule with surrounding text", async () => {
+      const doc: TipTapDocument = {
+        type: "doc",
+        content: [
+          {
+            type: "paragraph",
+            content: [{ type: "text", text: "Before rule" }],
+          },
+          { type: "horizontalRule" },
+          {
+            type: "paragraph",
+            content: [{ type: "text", text: "After rule" }],
+          },
+        ],
+      };
+
+      const buffer = await renderPlaneDocToPdfBuffer(doc);
+      const text = await extractPdfText(buffer);
+
+      expect(text).toContain("Before rule");
+      expect(text).toContain("After rule");
+    });
+
+    it("should render text with marks (bold, italic) preserving content", async () => {
+      const doc: TipTapDocument = {
+        type: "doc",
+        content: [
+          {
+            type: "paragraph",
+            content: [
+              { type: "text", text: "Normal " },
+              {
+                type: "text",
+                text: "bold",
+                marks: [{ type: "bold" }],
+              },
+              { type: "text", text: " and " },
+              {
+                type: "text",
+                text: "italic",
+                marks: [{ type: "italic" }],
+              },
+              { type: "text", text: " text." },
+            ],
+          },
+        ],
+      };
+
+      const buffer = await renderPlaneDocToPdfBuffer(doc);
+      const text = await extractPdfText(buffer);
+
+      expect(text).toContain("Normal");
+      expect(text).toContain("bold");
+      expect(text).toContain("italic");
+      expect(text).toContain("text.");
+    });
+
+    it("should render link marks with link text", async () => {
+      const doc: TipTapDocument = {
+        type: "doc",
+        content: [
+          {
+            type: "paragraph",
+            content: [
+              { type: "text", text: "Click " },
+              {
+                type: "text",
+                text: "here",
+                marks: [{ type: "link", attrs: { href: "https://example.com" } }],
+              },
+              { type: "text", text: " to visit." },
+            ],
+          },
+        ],
+      };
+
+      const buffer = await renderPlaneDocToPdfBuffer(doc);
+      const text = await extractPdfText(buffer);
+
+      expect(text).toContain("Click");
+      expect(text).toContain("here");
+      expect(text).toContain("to visit");
+    });
+  });
+
+  describe("page options", () => {
+    it("should support different page sizes and verify content renders", async () => {
+      const doc: TipTapDocument = {
+        type: "doc",
+        content: [
+          {
+            type: "paragraph",
+            content: [{ type: "text", text: "Page size test content" }],
+          },
+        ],
+      };
+
+      const a4Buffer = await renderPlaneDocToPdfBuffer(doc, { pageSize: "A4" });
+      const letterBuffer = await renderPlaneDocToPdfBuffer(doc, { pageSize: "LETTER" });
+
+      const a4Text = await extractPdfText(a4Buffer);
+      const letterText = await extractPdfText(letterBuffer);
+
+      expect(a4Text).toContain("Page size test content");
+      expect(letterText).toContain("Page size test content");
+      // Different page sizes should produce different PDF sizes
+      expect(a4Buffer.length).not.toBe(letterBuffer.length);
+    });
+
+    it("should support landscape orientation and verify content", async () => {
+      const doc: TipTapDocument = {
+        type: "doc",
+        content: [
+          {
+            type: "paragraph",
+            content: [{ type: "text", text: "Landscape content here" }],
+          },
+        ],
+      };
+
+      const portraitBuffer = await renderPlaneDocToPdfBuffer(doc, { pageOrientation: "portrait" });
+      const landscapeBuffer = await renderPlaneDocToPdfBuffer(doc, { pageOrientation: "landscape" });
+
+      const portraitText = await extractPdfText(portraitBuffer);
+      const landscapeText = await extractPdfText(landscapeBuffer);
+
+      expect(portraitText).toContain("Landscape content here");
+      expect(landscapeText).toContain("Landscape content here");
+      expect(portraitBuffer.length).not.toBe(landscapeBuffer.length);
+    });
+
+    it("should include author metadata in PDF", async () => {
+      const doc: TipTapDocument = {
+        type: "doc",
+        content: [
+          {
+            type: "paragraph",
+            content: [{ type: "text", text: "Document content" }],
+          },
+        ],
+      };
+
+      const buffer = await renderPlaneDocToPdfBuffer(doc, {
+        author: "Test Author",
+      });
+
+      // Verify PDF is valid and contains content
+      expect(buffer).toBeInstanceOf(Buffer);
+      expect(buffer.toString("ascii", 0, 5)).toBe(PDF_HEADER);
+      // Author metadata is embedded in PDF info dict (checked via raw bytes)
+      const pdfString = buffer.toString("latin1");
+      expect(pdfString).toContain("/Author");
+    });
+
+    it("should include subject metadata in PDF", async () => {
+      const doc: TipTapDocument = {
+        type: "doc",
+        content: [
+          {
+            type: "paragraph",
+            content: [{ type: "text", text: "Document content" }],
+          },
+        ],
+      };
+
+      const buffer = await renderPlaneDocToPdfBuffer(doc, {
+        subject: "Technical Documentation",
+      });
+
+      // Verify PDF is valid
+      expect(buffer).toBeInstanceOf(Buffer);
+      expect(buffer.toString("ascii", 0, 5)).toBe(PDF_HEADER);
+      // Subject metadata is embedded in PDF info dict
+      const pdfString = buffer.toString("latin1");
+      expect(pdfString).toContain("/Subject");
+    });
+  });
+
+  describe("metadata rendering", () => {
+    it("should render user mentions with resolved display name", async () => {
+      const metadata: PDFExportMetadata = {
+        userMentions: [{ id: "user-123", display_name: "John Doe" }],
+      };
+
+      const doc: TipTapDocument = {
+        type: "doc",
+        content: [
+          {
+            type: "paragraph",
+            content: [
+              { type: "text", text: "Hello " },
+              {
+                type: "mention",
+                attrs: {
+                  entity_name: "user_mention",
+                  entity_identifier: "user-123",
+                },
+              },
+            ],
+          },
+        ],
+      };
+
+      const buffer = await renderPlaneDocToPdfBuffer(doc, { metadata });
+      const text = await extractPdfText(buffer);
+
+      expect(text).toContain("Hello");
+      expect(text).toContain("John Doe");
+    });
+  });
+
+  describe("complex documents", () => {
+    it("should render a full document with mixed content and verify all sections", async () => {
+      const doc: TipTapDocument = {
+        type: "doc",
+        content: [
+          {
+            type: "heading",
+            attrs: { level: 1 },
+            content: [{ type: "text", text: "Project Overview" }],
+          },
+          {
+            type: "paragraph",
+            content: [
+              { type: "text", text: "This document describes the " },
+              { type: "text", text: "key features", marks: [{ type: "bold" }] },
+              { type: "text", text: " of the project." },
+            ],
+          },
+          {
+            type: "heading",
+            attrs: { level: 2 },
+            content: [{ type: "text", text: "Features" }],
+          },
+          {
+            type: "bulletList",
+            content: [
+              {
+                type: "listItem",
+                content: [
+                  {
+                    type: "paragraph",
+                    content: [{ type: "text", text: "Feature A - Core functionality" }],
+                  },
+                ],
+              },
+              {
+                type: "listItem",
+                content: [
+                  {
+                    type: "paragraph",
+                    content: [{ type: "text", text: "Feature B - Advanced options" }],
+                  },
+                ],
+              },
+            ],
+          },
+          {
+            type: "heading",
+            attrs: { level: 2 },
+            content: [{ type: "text", text: "Code Example" }],
+          },
+          {
+            type: "codeBlock",
+            content: [{ type: "text", text: "function hello() {\n  return 'world';\n}" }],
+          },
+          {
+            type: "blockquote",
+            content: [
+              {
+                type: "paragraph",
+                content: [{ type: "text", text: "Important: Review before deployment." }],
+              },
+            ],
+          },
+          { type: "horizontalRule" },
+          {
+            type: "paragraph",
+            content: [{ type: "text", text: "End of document." }],
+          },
+        ],
+      };
+
+      const buffer = await renderPlaneDocToPdfBuffer(doc, {
+        title: "Project Overview",
+        author: "Development Team",
+        subject: "Technical Documentation",
+      });
+
+      const text = await extractPdfText(buffer);
+
+      // Verify metadata is embedded in PDF
+      const pdfString = buffer.toString("latin1");
+      expect(pdfString).toContain("/Title");
+      expect(pdfString).toContain("/Author");
+      expect(pdfString).toContain("/Subject");
+
+      // Verify all content sections are present
+      expect(text).toContain("Project Overview");
+      expect(text).toContain("This document describes the");
+      expect(text).toContain("key features");
+      expect(text).toContain("Features");
+      expect(text).toContain("Feature A - Core functionality");
+      expect(text).toContain("Feature B - Advanced options");
+      expect(text).toContain("Code Example");
+      expect(text).toContain("function hello");
+      expect(text).toContain("Important: Review before deployment");
+      expect(text).toContain("End of document");
+    });
+
+    it("should render deeply nested lists with all levels", async () => {
+      const doc: TipTapDocument = {
+        type: "doc",
+        content: [
+          {
+            type: "bulletList",
+            content: [
+              {
+                type: "listItem",
+                content: [
+                  {
+                    type: "paragraph",
+                    content: [{ type: "text", text: "Level 1" }],
+                  },
+                  {
+                    type: "bulletList",
+                    content: [
+                      {
+                        type: "listItem",
+                        content: [
+                          {
+                            type: "paragraph",
+                            content: [{ type: "text", text: "Level 2" }],
+                          },
+                          {
+                            type: "bulletList",
+                            content: [
+                              {
+                                type: "listItem",
+                                content: [
+                                  {
+                                    type: "paragraph",
+                                    content: [{ type: "text", text: "Level 3" }],
+                                  },
+                                ],
+                              },
+                            ],
+                          },
+                        ],
+                      },
+                    ],
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      };
+
+      const buffer = await renderPlaneDocToPdfBuffer(doc);
+      const text = await extractPdfText(buffer);
+
+      expect(text).toContain("Level 1");
+      expect(text).toContain("Level 2");
+      expect(text).toContain("Level 3");
+    });
+  });
+
+  describe("noAssets option", () => {
+    it("should render text but skip images when noAssets is true", async () => {
+      const doc: TipTapDocument = {
+        type: "doc",
+        content: [
+          {
+            type: "image",
+            attrs: { src: "https://example.com/image.png" },
+          },
+          {
+            type: "paragraph",
+            content: [{ type: "text", text: "Text after image" }],
+          },
+        ],
+      };
+
+      const buffer = await renderPlaneDocToPdfBuffer(doc, { noAssets: true });
+      const text = await extractPdfText(buffer);
+
+      expect(text).toContain("Text after image");
+    });
+  });
+});
diff --git a/apps/live/tests/services/pdf-export/effect-utils.test.ts b/apps/live/tests/services/pdf-export/effect-utils.test.ts
new file mode 100644
index 000000000..44ff35e67
--- /dev/null
+++ b/apps/live/tests/services/pdf-export/effect-utils.test.ts
@@ -0,0 +1,155 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { describe, it, expect, assert } from "vitest";
+import { Effect, Duration, Either } from "effect";
+import { withTimeoutAndRetry, recoverWithDefault, tryAsync } from "@/services/pdf-export/effect-utils";
+import { PdfTimeoutError } from "@/schema/pdf-export";
+
+describe("effect-utils", () => {
+  describe("withTimeoutAndRetry", () => {
+    it("should succeed when effect completes within timeout", async () => {
+      const effect = Effect.succeed("success");
+      const wrapped = withTimeoutAndRetry("test-operation")(effect);
+
+      const result = await Effect.runPromise(wrapped);
+      expect(result).toBe("success");
+    });
+
+    it("should fail with PdfTimeoutError when effect exceeds timeout", async () => {
+      const slowEffect = Effect.gen(function* () {
+        yield* Effect.sleep(Duration.millis(500));
+        return "success";
+      });
+
+      const wrapped = withTimeoutAndRetry("test-operation", {
+        timeoutMs: 50,
+        maxRetries: 0,
+      })(slowEffect);
+
+      const result = await Effect.runPromise(Effect.either(wrapped));
+
+      assert(Either.isLeft(result), "Expected Left but got Right");
+      expect(result.left).toBeInstanceOf(PdfTimeoutError);
+      expect((result.left as PdfTimeoutError).operation).toBe("test-operation");
+    });
+
+    it("should retry on failure up to maxRetries times", async () => {
+      const attemptCounter = { count: 0 };
+
+      const flakyEffect = Effect.gen(function* () {
+        attemptCounter.count++;
+        if (attemptCounter.count < 3) {
+          return yield* Effect.fail(new Error("transient failure"));
+        }
+        return "success";
+      });
+
+      const wrapped = withTimeoutAndRetry("test-operation", {
+        timeoutMs: 5000,
+        maxRetries: 3,
+      })(flakyEffect);
+
+      const result = await Effect.runPromise(wrapped);
+
+      expect(result).toBe("success");
+      expect(attemptCounter.count).toBe(3);
+    });
+
+    it("should fail after exhausting retries", async () => {
+      const effect = Effect.fail(new Error("permanent failure"));
+
+      const wrapped = withTimeoutAndRetry("test-operation", {
+        timeoutMs: 5000,
+        maxRetries: 2,
+      })(effect);
+
+      const result = await Effect.runPromise(Effect.either(wrapped));
+
+      expect(result._tag).toBe("Left");
+    });
+  });
+
+  describe("recoverWithDefault", () => {
+    it("should return success value when effect succeeds", async () => {
+      const effect = Effect.succeed("success");
+      const wrapped = recoverWithDefault("fallback")(effect);
+
+      const result = await Effect.runPromise(wrapped);
+      expect(result).toBe("success");
+    });
+
+    it("should return fallback value when effect fails", async () => {
+      const effect = Effect.fail(new Error("failure"));
+      const wrapped = recoverWithDefault("fallback")(effect);
+
+      const result = await Effect.runPromise(wrapped);
+      expect(result).toBe("fallback");
+    });
+
+    it("should log warning when recovering from error", async () => {
+      const logs: string[] = [];
+
+      const effect = Effect.fail(new Error("test error")).pipe(
+        recoverWithDefault("fallback"),
+        Effect.tap(() => Effect.sync(() => logs.push("after recovery")))
+      );
+
+      const result = await Effect.runPromise(effect);
+
+      expect(result).toBe("fallback");
+      expect(logs).toContain("after recovery");
+    });
+
+    it("should work with complex fallback objects", async () => {
+      const fallback = { items: [], count: 0, metadata: { version: 1 } };
+
+      const effect = Effect.fail(new Error("failure"));
+      const wrapped = recoverWithDefault(fallback)(effect);
+
+      const result = await Effect.runPromise(wrapped);
+      expect(result).toEqual(fallback);
+    });
+  });
+
+  describe("tryAsync", () => {
+    it("should wrap successful promise", async () => {
+      const effect = tryAsync(
+        () => Promise.resolve("success"),
+        (err) => new Error(`wrapped: ${err}`)
+      );
+
+      const result = await Effect.runPromise(effect);
+      expect(result).toBe("success");
+    });
+
+    it("should wrap rejected promise with custom error", async () => {
+      const effect = tryAsync(
+        () => Promise.reject(new Error("original")),
+        (err) => new Error(`wrapped: ${(err as Error).message}`)
+      );
+
+      const result = await Effect.runPromise(Effect.either(effect));
+
+      assert(Either.isLeft(result), "Expected Left but got Right");
+      expect(result.left.message).toBe("wrapped: original");
+    });
+
+    it("should handle synchronous throws", async () => {
+      const effect = tryAsync(
+        () => {
+          throw new Error("sync error");
+        },
+        (err) => new Error(`caught: ${(err as Error).message}`)
+      );
+
+      const result = await Effect.runPromise(Effect.either(effect));
+
+      assert(Either.isLeft(result), "Expected Left but got Right");
+      expect(result.left.message).toBe("caught: sync error");
+    });
+  });
+});
diff --git a/apps/live/tsconfig.json b/apps/live/tsconfig.json
index a3a901c9c..9d49437c0 100644
--- a/apps/live/tsconfig.json
+++ b/apps/live/tsconfig.json
@@ -6,6 +6,7 @@
     "noImplicitOverride": false,
     "noImplicitReturns": false,
     "noUnusedLocals": false,
+    "jsx": "react-jsx",
 
     "paths": {
       "@/*": ["./src/*"],
@@ -14,6 +15,6 @@
     "experimentalDecorators": true,
     "emitDecoratorMetadata": true
   },
-  "include": ["src"],
+  "include": ["src", "tests"],
   "exclude": ["node_modules", "dist"]
 }
diff --git a/apps/live/vitest.config.ts b/apps/live/vitest.config.ts
new file mode 100644
index 000000000..d9a1624cd
--- /dev/null
+++ b/apps/live/vitest.config.ts
@@ -0,0 +1,21 @@
+import { defineConfig } from "vitest/config";
+import path from "path";
+
+export default defineConfig({
+  test: {
+    environment: "node",
+    globals: true,
+    include: ["tests/**/*.test.ts", "tests/**/*.spec.ts"],
+    coverage: {
+      provider: "v8",
+      reporter: ["text", "json", "html"],
+      include: ["src/**/*.ts"],
+      exclude: ["src/**/*.d.ts", "src/**/types.ts"],
+    },
+  },
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "./src"),
+    },
+  },
+});
diff --git a/apps/proxy/Caddyfile.ce b/apps/proxy/Caddyfile.ce
index 9b9acc7b0..14559f272 100644
--- a/apps/proxy/Caddyfile.ce
+++ b/apps/proxy/Caddyfile.ce
@@ -15,6 +15,8 @@
 
 	reverse_proxy /auth/* api:8000
 
+	reverse_proxy /static/* api:8000
+
 	reverse_proxy /{$BUCKET_NAME}/* plane-minio:9000
 	reverse_proxy /{$BUCKET_NAME} plane-minio:9000
 
diff --git a/apps/space/Dockerfile.space b/apps/space/Dockerfile.space
index 4c121fa74..60d4a155a 100644
--- a/apps/space/Dockerfile.space
+++ b/apps/space/Dockerfile.space
@@ -13,7 +13,7 @@ RUN corepack enable pnpm
 
 FROM base AS builder
 
-RUN pnpm add -g turbo@2.6.3
+RUN pnpm add -g turbo@2.9.4
 
 COPY . .
 
@@ -86,7 +86,8 @@ WORKDIR /app/apps/space
 
 EXPOSE 3000
 
+RUN apk add --no-cache curl
 HEALTHCHECK --interval=30s --timeout=5s --start-period=10s --retries=3 \
-  CMD curl -fsS http://127.0.0.1:3000/ >/dev/null || exit 1
+  CMD curl -fsS http://127.0.0.1:3000/spaces/ >/dev/null || exit 1
 
 CMD ["npx", "react-router-serve", "./build/server/index.js"]
diff --git a/apps/space/app/[workspaceSlug]/[projectId]/page.tsx b/apps/space/app/[workspaceSlug]/[projectId]/page.tsx
index 013e7f8c1..b14ec17c0 100644
--- a/apps/space/app/[workspaceSlug]/[projectId]/page.tsx
+++ b/apps/space/app/[workspaceSlug]/[projectId]/page.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { redirect } from "react-router";
 // plane imports
 import { SitesProjectPublishService } from "@plane/services";
@@ -44,7 +50,7 @@ export const clientLoader = async ({ params, request }: Route.ClientLoaderArgs)
 
 export default function IssuesPage() {
   return (
-    <div className="flex h-screen min-h-[500px] w-full justify-center items-center">
+    <div className="flex h-screen min-h-[500px] w-full items-center justify-center">
       <LogoSpinner />
     </div>
   );
diff --git a/apps/space/app/compat/next/helper.ts b/apps/space/app/compat/next/helper.ts
index c04699870..c4edf3d54 100644
--- a/apps/space/app/compat/next/helper.ts
+++ b/apps/space/app/compat/next/helper.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 /**
  * Ensures that a URL has a trailing slash while preserving query parameters and fragments
  * @param url - The URL to process
diff --git a/apps/space/app/compat/next/image.tsx b/apps/space/app/compat/next/image.tsx
deleted file mode 100644
index 062638de4..000000000
--- a/apps/space/app/compat/next/image.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from "react";
-
-// Minimal shim so code using next/image compiles under React Router + Vite
-// without changing call sites. It just renders a native img.
-
-type NextImageProps = React.ImgHTMLAttributes<HTMLImageElement> & {
-  src: string;
-};
-
-function Image({ src, alt = "", ...rest }: NextImageProps) {
-  return <img src={src} alt={alt} {...rest} />;
-}
-
-export default Image;
diff --git a/apps/space/app/compat/next/link.tsx b/apps/space/app/compat/next/link.tsx
deleted file mode 100644
index b0bca4faf..000000000
--- a/apps/space/app/compat/next/link.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from "react";
-import { Link as RRLink } from "react-router";
-import { ensureTrailingSlash } from "./helper";
-
-type NextLinkProps = React.ComponentProps<"a"> & {
-  href: string;
-  replace?: boolean;
-  prefetch?: boolean; // next.js prop, ignored
-  scroll?: boolean; // next.js prop, ignored
-  shallow?: boolean; // next.js prop, ignored
-};
-
-function Link({ href, replace, prefetch: _prefetch, scroll: _scroll, shallow: _shallow, ...rest }: NextLinkProps) {
-  return <RRLink to={ensureTrailingSlash(href)} replace={replace} {...rest} />;
-}
-
-export default Link;
diff --git a/apps/space/app/compat/next/navigation.ts b/apps/space/app/compat/next/navigation.ts
index a825b1e65..0aa9254bc 100644
--- a/apps/space/app/compat/next/navigation.ts
+++ b/apps/space/app/compat/next/navigation.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useMemo } from "react";
 import { useLocation, useNavigate, useParams as useParamsRR, useSearchParams as useSearchParamsRR } from "react-router";
 import { ensureTrailingSlash } from "./helper";
diff --git a/apps/space/app/entry.client.tsx b/apps/space/app/entry.client.tsx
index 9cf1c32de..9c665ede0 100644
--- a/apps/space/app/entry.client.tsx
+++ b/apps/space/app/entry.client.tsx
@@ -1,28 +1,13 @@
-import * as Sentry from "@sentry/react-router";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { startTransition, StrictMode } from "react";
 import { hydrateRoot } from "react-dom/client";
 import { HydratedRouter } from "react-router/dom";
 
-Sentry.init({
-  dsn: process.env.VITE_SENTRY_DSN,
-  environment: process.env.VITE_SENTRY_ENVIRONMENT,
-  sendDefaultPii: process.env.VITE_SENTRY_SEND_DEFAULT_PII ? process.env.VITE_SENTRY_SEND_DEFAULT_PII === "1" : false,
-  release: process.env.VITE_APP_VERSION,
-  tracesSampleRate: process.env.VITE_SENTRY_TRACES_SAMPLE_RATE
-    ? parseFloat(process.env.VITE_SENTRY_TRACES_SAMPLE_RATE)
-    : 0.1,
-  profilesSampleRate: process.env.VITE_SENTRY_PROFILES_SAMPLE_RATE
-    ? parseFloat(process.env.VITE_SENTRY_PROFILES_SAMPLE_RATE)
-    : 0.1,
-  replaysSessionSampleRate: process.env.VITE_SENTRY_REPLAYS_SESSION_SAMPLE_RATE
-    ? parseFloat(process.env.VITE_SENTRY_REPLAYS_SESSION_SAMPLE_RATE)
-    : 0.1,
-  replaysOnErrorSampleRate: process.env.VITE_SENTRY_REPLAYS_ON_ERROR_SAMPLE_RATE
-    ? parseFloat(process.env.VITE_SENTRY_REPLAYS_ON_ERROR_SAMPLE_RATE)
-    : 1.0,
-  integrations: [],
-});
-
 startTransition(() => {
   hydrateRoot(
     document,
diff --git a/apps/space/app/error.tsx b/apps/space/app/error.tsx
index 2330b9033..87aa8dc19 100644
--- a/apps/space/app/error.tsx
+++ b/apps/space/app/error.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // ui
 import { Button } from "@plane/propel/button";
 
@@ -7,33 +13,28 @@ function ErrorPage() {
   };
 
   return (
-    <div className="grid h-screen place-items-center p-4">
+    <div className="grid h-screen place-items-center bg-surface-1 p-4">
       <div className="space-y-8 text-center">
         <div className="space-y-2">
-          <h3 className="text-lg font-semibold">Yikes! That doesn{"'"}t look good.</h3>
-          <p className="mx-auto md:w-1/2 text-sm text-custom-text-200">
+          <h3 className="text-16 font-semibold">Yikes! That doesn{"'"}t look good.</h3>
+          <p className="mx-auto text-13 text-secondary md:w-1/2">
             That crashed Plane, pun intended. No worries, though. Our engineers have been notified. If you have more
             details, please write to{" "}
-            <a href="mailto:support@plane.so" className="text-custom-primary">
+            <a href="mailto:support@plane.so" className="text-accent-primary">
               support@plane.so
             </a>{" "}
             or on our{" "}
-            <a
-              href="https://discord.com/invite/A92xrEGCge"
-              target="_blank"
-              className="text-custom-primary"
-              rel="noopener noreferrer"
-            >
-              Discord
+            <a href="https://forum.plane.so" target="_blank" className="text-accent-primary" rel="noopener noreferrer">
+              Forum
             </a>
             .
           </p>
         </div>
         <div className="flex items-center justify-center gap-2">
-          <Button variant="primary" size="md" onClick={handleRetry}>
+          <Button variant="primary" size="lg" onClick={handleRetry}>
             Refresh
           </Button>
-          {/* <Button variant="neutral-primary" size="md" onClick={() => {}}>
+          {/* <Button variant="secondary" size="lg" onClick={() => {}}>
             Sign out
           </Button> */}
         </div>
diff --git a/apps/space/app/issues/[anchor]/layout.tsx b/apps/space/app/issues/[anchor]/layout.tsx
index 60a171bcf..6dbc2e711 100644
--- a/apps/space/app/issues/[anchor]/layout.tsx
+++ b/apps/space/app/issues/[anchor]/layout.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import { Outlet } from "react-router";
 import type { ShouldRevalidateFunctionArgs } from "react-router";
@@ -114,7 +120,7 @@ function IssuesLayout(props: Route.ComponentProps) {
 
   if (!publishSettings && !error) {
     return (
-      <div className="flex items-center justify-center h-screen w-full">
+      <div className="flex h-screen w-full items-center justify-center bg-surface-1">
         <LogoSpinner />
       </div>
     );
@@ -127,10 +133,10 @@ function IssuesLayout(props: Route.ComponentProps) {
   return (
     <>
       <div className="relative flex h-screen min-h-[500px] w-screen flex-col overflow-hidden">
-        <div className="relative flex h-[60px] flex-shrink-0 select-none items-center border-b border-custom-border-300 bg-custom-sidebar-background-100">
+        <div className="relative flex h-[60px] shrink-0 items-center border-b border-subtle-1 bg-surface-1 select-none">
           <IssuesNavbarRoot publishSettings={publishSettings} />
         </div>
-        <div className="relative h-full w-full overflow-hidden bg-custom-background-90">
+        <div className="relative size-full overflow-hidden bg-surface-2">
           <Outlet />
         </div>
       </div>
diff --git a/apps/space/app/issues/[anchor]/page.tsx b/apps/space/app/issues/[anchor]/page.tsx
index 32cdcad86..cd19bda4b 100644
--- a/apps/space/app/issues/[anchor]/page.tsx
+++ b/apps/space/app/issues/[anchor]/page.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import { useParams, useSearchParams } from "next/navigation";
 import useSWR from "swr";
diff --git a/apps/space/app/not-found.tsx b/apps/space/app/not-found.tsx
index 9fcfd8a74..e137fdd87 100644
--- a/apps/space/app/not-found.tsx
+++ b/apps/space/app/not-found.tsx
@@ -1,17 +1,23 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // assets
 import SomethingWentWrongImage from "@/app/assets/something-went-wrong.svg?url";
 
 function NotFound() {
   return (
-    <div className="h-screen w-screen grid place-items-center">
+    <div className="grid h-screen w-screen place-items-center bg-surface-1">
       <div className="text-center">
-        <div className="mx-auto size-32 md:size-52 grid place-items-center rounded-full bg-custom-background-80">
-          <div className="size-16 md:size-32 grid place-items-center">
+        <div className="mx-auto grid size-32 place-items-center rounded-full md:size-52">
+          <div className="grid size-16 place-items-center md:size-32">
             <img src={SomethingWentWrongImage} alt="Something went wrong" width={128} height={128} />
           </div>
         </div>
-        <h1 className="mt-8 md:mt-12 text-xl md:text-3xl font-semibold">That didn{"'"}t work</h1>
-        <p className="mt-2 md:mt-4 text-sm md:text-base">
+        <h1 className="mt-8 text-18 font-semibold md:mt-12 md:text-24">That didn{"'"}t work</h1>
+        <p className="mt-2 text-13 md:mt-4 md:text-14">
           Check the URL you are entering in the browser{"'"}s address bar and try again.
         </p>
       </div>
diff --git a/apps/space/app/page.tsx b/apps/space/app/page.tsx
index 4b473b566..02a9a5649 100644
--- a/apps/space/app/page.tsx
+++ b/apps/space/app/page.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useEffect } from "react";
 import { observer } from "mobx-react";
 import { useSearchParams, useRouter } from "next/navigation";
@@ -29,7 +35,7 @@ const HomePage = observer(function HomePage() {
 
   if (isInitializing)
     return (
-      <div className="flex h-screen min-h-[500px] w-full justify-center items-center">
+      <div className="flex h-screen min-h-[500px] w-full items-center justify-center bg-surface-1">
         <LogoSpinner />
       </div>
     );
@@ -37,7 +43,7 @@ const HomePage = observer(function HomePage() {
   if (currentUser && isAuthenticated) {
     if (nextPath && isValidNextPath(nextPath)) {
       return (
-        <div className="flex h-screen min-h-[500px] w-full justify-center items-center">
+        <div className="flex h-screen min-h-[500px] w-full items-center justify-center bg-surface-1">
           <LogoSpinner />
         </div>
       );
diff --git a/apps/space/app/providers.tsx b/apps/space/app/providers.tsx
index 981270cc3..463770ec5 100644
--- a/apps/space/app/providers.tsx
+++ b/apps/space/app/providers.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { ThemeProvider } from "next-themes";
 // components
 import { TranslationProvider } from "@plane/i18n";
diff --git a/apps/space/app/root.tsx b/apps/space/app/root.tsx
index a7f04af7d..fe504b1ed 100644
--- a/apps/space/app/root.tsx
+++ b/apps/space/app/root.tsx
@@ -1,4 +1,9 @@
-import * as Sentry from "@sentry/react-router";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { Links, Meta, Outlet, Scripts } from "react-router";
 // assets
 import appleTouchIcon from "@/app/assets/favicon/apple-touch-icon.png?url";
@@ -13,6 +18,11 @@ import type { Route } from "./+types/root";
 // local imports
 import ErrorPage from "./error";
 import { AppProviders } from "./providers";
+// fonts
+import "@fontsource-variable/inter";
+import interVariableWoff2 from "@fontsource-variable/inter/files/inter-latin-wght-normal.woff2?url";
+import "@fontsource/material-symbols-rounded";
+import "@fontsource/ibm-plex-mono";
 
 const APP_TITLE = "Plane Publish | Make your Plane boards public with one-click";
 const APP_DESCRIPTION = "Plane Publish is a customer feedback management tool built on top of plane.so";
@@ -24,6 +34,13 @@ export const links: Route.LinksFunction = () => [
   { rel: "shortcut icon", href: faviconIco },
   { rel: "manifest", href: siteWebmanifest },
   { rel: "stylesheet", href: globalStyles },
+  {
+    rel: "preload",
+    href: interVariableWoff2,
+    as: "font",
+    type: "font/woff2",
+    crossOrigin: "anonymous",
+  },
 ];
 
 export const headers: Route.HeadersFunction = () => ({
@@ -72,16 +89,12 @@ export default function Root() {
 
 export function HydrateFallback() {
   return (
-    <div className="relative flex h-screen w-full items-center justify-center">
+    <div className="relative flex h-screen w-full items-center justify-center bg-surface-1">
       <LogoSpinner />
     </div>
   );
 }
 
-export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
-  if (error) {
-    Sentry.captureException(error);
-  }
-
+export function ErrorBoundary({ error: _error }: Route.ErrorBoundaryProps) {
   return <ErrorPage />;
 }
diff --git a/apps/space/app/routes.ts b/apps/space/app/routes.ts
index 36c3d20fa..1a94ca0f7 100644
--- a/apps/space/app/routes.ts
+++ b/apps/space/app/routes.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { RouteConfig } from "@react-router/dev/routes";
 import { index, layout, route } from "@react-router/dev/routes";
 
diff --git a/apps/space/ce/components/editor/embeds/mentions/index.ts b/apps/space/ce/components/editor/embeds/mentions/index.ts
deleted file mode 100644
index 1efe34c51..000000000
--- a/apps/space/ce/components/editor/embeds/mentions/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./root";
diff --git a/apps/space/ce/components/editor/embeds/mentions/root.tsx b/apps/space/ce/components/editor/embeds/mentions/root.tsx
deleted file mode 100644
index 6fc36cc74..000000000
--- a/apps/space/ce/components/editor/embeds/mentions/root.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-// plane editor
-import type { TCallbackMentionComponentProps } from "@plane/editor";
-
-export type TEditorMentionComponentProps = TCallbackMentionComponentProps;
-
-export function EditorAdditionalMentionsRoot(_props: TEditorMentionComponentProps) {
-  return null;
-}
diff --git a/apps/space/ce/components/issue-layouts/root.tsx b/apps/space/ce/components/issue-layouts/root.tsx
deleted file mode 100644
index 95d58029d..000000000
--- a/apps/space/ce/components/issue-layouts/root.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { PageNotFound } from "@/components/ui/not-found";
-import type { PublishStore } from "@/store/publish/publish.store";
-
-type Props = {
-  peekId: string | undefined;
-  publishSettings: PublishStore;
-};
-
-export function ViewLayoutsRoot(_props: Props) {
-  return <PageNotFound />;
-}
diff --git a/apps/space/ce/components/navbar/index.tsx b/apps/space/ce/components/navbar/index.tsx
deleted file mode 100644
index e91b2d47e..000000000
--- a/apps/space/ce/components/navbar/index.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import type { PublishStore } from "@/store/publish/publish.store";
-
-type Props = {
-  publishSettings: PublishStore;
-};
-
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-export function ViewNavbarRoot(props: Props) {
-  return <></>;
-}
diff --git a/apps/space/ce/hooks/store/index.ts b/apps/space/ce/hooks/store/index.ts
deleted file mode 100644
index a5fc99eef..000000000
--- a/apps/space/ce/hooks/store/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./use-published-view";
diff --git a/apps/space/ce/hooks/store/use-published-view.ts b/apps/space/ce/hooks/store/use-published-view.ts
deleted file mode 100644
index 170d934da..000000000
--- a/apps/space/ce/hooks/store/use-published-view.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export const useView = () => ({
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  fetchViewDetails: (anchor: string) => {},
-  viewData: {},
-});
diff --git a/apps/space/ce/store/root.store.ts b/apps/space/ce/store/root.store.ts
deleted file mode 100644
index 710462e13..000000000
--- a/apps/space/ce/store/root.store.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-// store
-import { CoreRootStore } from "@/store/root.store";
-
-export class RootStore extends CoreRootStore {
-  constructor() {
-    super();
-  }
-}
diff --git a/apps/space/components/account/auth-forms/auth-banner.tsx b/apps/space/components/account/auth-forms/auth-banner.tsx
new file mode 100644
index 000000000..4a9c517b7
--- /dev/null
+++ b/apps/space/components/account/auth-forms/auth-banner.tsx
@@ -0,0 +1,35 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { Info } from "lucide-react";
+import { CloseIcon } from "@plane/propel/icons";
+// helpers
+import type { TAuthErrorInfo } from "@/helpers/authentication.helper";
+
+type TAuthBanner = {
+  bannerData: TAuthErrorInfo | undefined;
+  handleBannerData?: (bannerData: TAuthErrorInfo | undefined) => void;
+};
+
+export function AuthBanner(props: TAuthBanner) {
+  const { bannerData, handleBannerData } = props;
+
+  if (!bannerData) return <></>;
+  return (
+    <div className="relative flex items-center gap-2 rounded-md border border-accent-strong/50 bg-accent-primary/10 p-2">
+      <div className="relative flex h-4 w-4 flex-shrink-0 items-center justify-center">
+        <Info size={16} className="text-accent-primary" />
+      </div>
+      <div className="w-full text-13 font-medium text-accent-primary">{bannerData?.message}</div>
+      <div
+        className="relative ml-auto flex h-6 w-6 cursor-pointer items-center justify-center rounded-xs text-accent-primary/80 transition-all hover:bg-accent-primary/20"
+        onClick={() => handleBannerData && handleBannerData(undefined)}
+      >
+        <CloseIcon className="h-4 w-4 flex-shrink-0" />
+      </div>
+    </div>
+  );
+}
diff --git a/apps/space/core/components/account/auth-forms/auth-header.tsx b/apps/space/components/account/auth-forms/auth-header.tsx
similarity index 76%
rename from apps/space/core/components/account/auth-forms/auth-header.tsx
rename to apps/space/components/account/auth-forms/auth-header.tsx
index 9b0c95c3e..a2063fe73 100644
--- a/apps/space/core/components/account/auth-forms/auth-header.tsx
+++ b/apps/space/components/account/auth-forms/auth-header.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // helpers
 import { EAuthModes } from "@/types/auth";
 
@@ -44,8 +50,8 @@ export function AuthHeader(props: TAuthHeader) {
   return (
     <>
       <div className="flex flex-col gap-1">
-        <span className="text-2xl font-semibold text-custom-text-100 leading-7">{header}</span>
-        <span className="text-2xl font-semibold text-custom-text-400 leading-7">{subHeader}</span>
+        <span className="text-20 leading-7 font-semibold text-primary">{header}</span>
+        <span className="text-20 leading-7 font-semibold text-placeholder">{subHeader}</span>
       </div>
     </>
   );
diff --git a/apps/space/core/components/account/auth-forms/auth-root.tsx b/apps/space/components/account/auth-forms/auth-root.tsx
similarity index 71%
rename from apps/space/core/components/account/auth-forms/auth-root.tsx
rename to apps/space/components/account/auth-forms/auth-root.tsx
index 0308471ec..d31649f78 100644
--- a/apps/space/core/components/account/auth-forms/auth-root.tsx
+++ b/apps/space/components/account/auth-forms/auth-root.tsx
@@ -1,22 +1,21 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useEffect, useState } from "react";
 import { observer } from "mobx-react";
 import { useSearchParams } from "next/navigation";
-import { useTheme } from "next-themes";
 // plane imports
-import { API_BASE_URL } from "@plane/constants";
 import { SitesAuthService } from "@plane/services";
 import type { IEmailCheckData } from "@plane/types";
 import { OAuthOptions } from "@plane/ui";
-// assets
-import GiteaLogo from "@/app/assets/logos/gitea-logo.svg?url";
-import GithubLightLogo from "@/app/assets/logos/github-black.png?url";
-import GithubDarkLogo from "@/app/assets/logos/github-dark.svg?url";
-import GitlabLogo from "@/app/assets/logos/gitlab-logo.svg?url";
-import GoogleLogo from "@/app/assets/logos/google-logo.svg?url";
 // helpers
 import type { TAuthErrorInfo } from "@/helpers/authentication.helper";
 import { EErrorAlertType, authErrorHandler, EAuthenticationErrorCodes } from "@/helpers/authentication.helper";
 // hooks
+import { useOAuthConfig } from "@/hooks/oauth";
 import { useInstance } from "@/hooks/store/use-instance";
 // types
 import { EAuthModes, EAuthSteps } from "@/types/auth";
@@ -36,7 +35,6 @@ export const AuthRoot = observer(function AuthRoot() {
   const emailParam = searchParams.get("email") || undefined;
   const error_code = searchParams.get("error_code") || undefined;
   const nextPath = searchParams.get("next_path") || undefined;
-  const next_path = searchParams.get("next_path");
   // states
   const [authMode, setAuthMode] = useState<EAuthModes>(EAuthModes.SIGN_UP);
   const [authStep, setAuthStep] = useState<EAuthSteps>(EAuthSteps.EMAIL);
@@ -44,7 +42,6 @@ export const AuthRoot = observer(function AuthRoot() {
   const [errorInfo, setErrorInfo] = useState<TAuthErrorInfo | undefined>(undefined);
   const [isPasswordAutoset, setIsPasswordAutoset] = useState(true);
   // hooks
-  const { resolvedTheme } = useTheme();
   const { config } = useInstance();
 
   useEffect(() => {
@@ -87,13 +84,8 @@ export const AuthRoot = observer(function AuthRoot() {
   const isSMTPConfigured = config?.is_smtp_configured || false;
   const isMagicLoginEnabled = config?.is_magic_login_enabled || false;
   const isEmailPasswordEnabled = config?.is_email_password_enabled || false;
-  const isOAuthEnabled =
-    (config &&
-      (config?.is_google_enabled ||
-        config?.is_github_enabled ||
-        config?.is_gitlab_enabled ||
-        config?.is_gitea_enabled)) ||
-    false;
+  const oAuthActionText = authMode === EAuthModes.SIGN_UP ? "Sign up" : "Sign in";
+  const { isOAuthEnabled, oAuthOptions } = useOAuthConfig(oAuthActionText);
 
   // submit handler- email verification
   const handleEmailVerification = async (data: IEmailCheckData) => {
@@ -112,7 +104,7 @@ export const AuthRoot = observer(function AuthRoot() {
         }
 
         if (currentAuthMode === EAuthModes.SIGN_IN) {
-          if (response.is_password_autoset && isSMTPConfigured && isMagicLoginEnabled) {
+          if (isSMTPConfigured && isMagicLoginEnabled && response.status === "MAGIC_CODE") {
             setAuthStep(EAuthSteps.UNIQUE_CODE);
             generateEmailUniqueCode(data.email);
           } else if (isEmailPasswordEnabled) {
@@ -123,7 +115,7 @@ export const AuthRoot = observer(function AuthRoot() {
             setErrorInfo(errorhandler);
           }
         } else {
-          if (isSMTPConfigured && isMagicLoginEnabled) {
+          if (isSMTPConfigured && isMagicLoginEnabled && response.status === "MAGIC_CODE") {
             setAuthStep(EAuthSteps.UNIQUE_CODE);
             generateEmailUniqueCode(data.email);
           } else if (isEmailPasswordEnabled) {
@@ -133,6 +125,7 @@ export const AuthRoot = observer(function AuthRoot() {
             setErrorInfo(errorhandler);
           }
         }
+        return;
       })
       .catch((error) => {
         const errorhandler = authErrorHandler(error?.error_code?.toString(), data?.email || undefined);
@@ -153,62 +146,14 @@ export const AuthRoot = observer(function AuthRoot() {
       });
   };
 
-  const content = authMode === EAuthModes.SIGN_UP ? "Sign up" : "Sign in";
-
-  const OAuthConfig = [
-    {
-      id: "google",
-      text: `${content} with Google`,
-      icon: <img src={GoogleLogo} height={18} width={18} alt="Google Logo" />,
-      onClick: () => {
-        window.location.assign(`${API_BASE_URL}/auth/google/${next_path ? `?next_path=${next_path}` : ``}`);
-      },
-      enabled: config?.is_google_enabled,
-    },
-    {
-      id: "github",
-      text: `${content} with GitHub`,
-      icon: (
-        <img
-          src={resolvedTheme === "dark" ? GithubLightLogo : GithubDarkLogo}
-          height={18}
-          width={18}
-          alt="GitHub Logo"
-        />
-      ),
-      onClick: () => {
-        window.location.assign(`${API_BASE_URL}/auth/github/${next_path ? `?next_path=${next_path}` : ``}`);
-      },
-      enabled: config?.is_github_enabled,
-    },
-    {
-      id: "gitlab",
-      text: `${content} with GitLab`,
-      icon: <img src={GitlabLogo} height={18} width={18} alt="GitLab Logo" />,
-      onClick: () => {
-        window.location.assign(`${API_BASE_URL}/auth/gitlab/${next_path ? `?next_path=${next_path}` : ``}`);
-      },
-      enabled: config?.is_gitlab_enabled,
-    },
-    {
-      id: "gitea",
-      text: `${content} with Gitea`,
-      icon: <img src={GiteaLogo} height={18} width={18} alt="Gitea Logo" />,
-      onClick: () => {
-        window.location.assign(`${API_BASE_URL}/auth/gitea/${next_path ? `?next_path=${next_path}` : ``}`);
-      },
-      enabled: config?.is_gitea_enabled,
-    },
-  ];
-
   return (
-    <div className="flex flex-col justify-center items-center flex-grow w-full py-6 mt-10">
-      <div className="relative flex flex-col gap-6 max-w-[22.5rem] w-full">
+    <div className="mt-10 flex w-full flex-grow flex-col items-center justify-center py-6">
+      <div className="relative flex w-full max-w-[22.5rem] flex-col gap-6">
         {errorInfo && errorInfo?.type === EErrorAlertType.BANNER_ALERT && (
           <AuthBanner bannerData={errorInfo} handleBannerData={(value) => setErrorInfo(value)} />
         )}
         <AuthHeader authMode={authMode} />
-        {isOAuthEnabled && <OAuthOptions options={OAuthConfig} compact={authStep === EAuthSteps.PASSWORD} />}
+        {isOAuthEnabled && <OAuthOptions options={oAuthOptions} compact={authStep === EAuthSteps.PASSWORD} />}
 
         {authStep === EAuthSteps.EMAIL && <AuthEmailForm defaultEmail={email} onSubmit={handleEmailVerification} />}
         {authStep === EAuthSteps.UNIQUE_CODE && (
diff --git a/apps/space/core/components/account/auth-forms/email.tsx b/apps/space/components/account/auth-forms/email.tsx
similarity index 76%
rename from apps/space/core/components/account/auth-forms/email.tsx
rename to apps/space/components/account/auth-forms/email.tsx
index 9ed44db83..303f9038e 100644
--- a/apps/space/core/components/account/auth-forms/email.tsx
+++ b/apps/space/components/account/auth-forms/email.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { FormEvent } from "react";
 import { useMemo, useRef, useState } from "react";
 import { observer } from "mobx-react";
@@ -46,13 +52,13 @@ export const AuthEmailForm = observer(function AuthEmailForm(props: TAuthEmailFo
   return (
     <form onSubmit={handleFormSubmit} className="mt-5 space-y-4">
       <div className="space-y-1">
-        <label className="text-sm text-custom-text-300 font-medium" htmlFor="email">
+        <label className="text-13 font-medium text-tertiary" htmlFor="email">
           Email
         </label>
         <div
           className={cn(
-            `relative flex items-center rounded-md bg-custom-background-100 border`,
-            !isFocused && Boolean(emailError?.email) ? `border-red-500` : `border-custom-border-100`
+            `relative flex items-center rounded-md border bg-surface-1`,
+            !isFocused && Boolean(emailError?.email) ? `border-danger-strong` : `border-subtle`
           )}
           onFocus={() => {
             setIsFocused(true);
@@ -68,8 +74,8 @@ export const AuthEmailForm = observer(function AuthEmailForm(props: TAuthEmailFo
             value={email}
             onChange={(e) => setEmail(e.target.value)}
             placeholder="name@company.com"
-            className={`disable-autofill-style h-10 w-full placeholder:text-custom-text-400 autofill:bg-red-500 border-0 focus:bg-none active:bg-transparent`}
-            autoComplete="on"
+            className={`h-10 w-full border-0 disable-autofill-style placeholder:text-placeholder autofill:bg-danger-subtle focus:bg-none active:bg-transparent`}
+            autoComplete="off"
             autoFocus
             ref={inputRef}
           />
@@ -83,18 +89,18 @@ export const AuthEmailForm = observer(function AuthEmailForm(props: TAuthEmailFo
               }}
               tabIndex={-1}
             >
-              <XCircle className="h-10 w-11 px-3 stroke-custom-text-400 hover:cursor-pointer text-xs" />
+              <XCircle className="h-10 w-11 stroke-placeholder px-3 text-11 hover:cursor-pointer" />
             </button>
           )}
         </div>
         {emailError?.email && !isFocused && (
-          <p className="flex items-center gap-1 text-xs text-red-600 px-0.5">
+          <p className="flex items-center gap-1 px-0.5 text-11 text-danger-primary">
             <CircleAlert height={12} width={12} />
             {emailError.email}
           </p>
         )}
       </div>
-      <Button type="submit" variant="primary" className="w-full" size="lg" disabled={isButtonDisabled}>
+      <Button type="submit" variant="primary" className="w-full" size="xl" disabled={isButtonDisabled}>
         {isSubmitting ? <Spinner height="20px" width="20px" /> : "Continue"}
       </Button>
     </form>
diff --git a/apps/space/components/account/auth-forms/index.ts b/apps/space/components/account/auth-forms/index.ts
new file mode 100644
index 000000000..125f6699c
--- /dev/null
+++ b/apps/space/components/account/auth-forms/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./auth-root";
diff --git a/apps/space/core/components/account/auth-forms/password.tsx b/apps/space/components/account/auth-forms/password.tsx
similarity index 82%
rename from apps/space/core/components/account/auth-forms/password.tsx
rename to apps/space/components/account/auth-forms/password.tsx
index 5b99cda2e..7bf8971fa 100644
--- a/apps/space/core/components/account/auth-forms/password.tsx
+++ b/apps/space/components/account/auth-forms/password.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React, { useEffect, useMemo, useRef, useState } from "react";
 import { observer } from "mobx-react";
 import { Eye, EyeOff, XCircle } from "lucide-react";
@@ -116,12 +122,10 @@ export const AuthPasswordForm = observer(function AuthPasswordForm(props: Props)
       <input type="hidden" value={passwordFormData.email} name="email" />
       <input type="hidden" value={nextPath} name="next_path" />
       <div className="space-y-1">
-        <label className="text-sm font-medium text-custom-text-300" htmlFor="email">
+        <label className="text-13 font-medium text-tertiary" htmlFor="email">
           Email
         </label>
-        <div
-          className={`relative flex items-center rounded-md bg-custom-background-100 border border-custom-border-100`}
-        >
+        <div className={`relative flex items-center rounded-md border border-subtle bg-surface-1`}>
           <Input
             id="email"
             name="email"
@@ -129,12 +133,12 @@ export const AuthPasswordForm = observer(function AuthPasswordForm(props: Props)
             value={passwordFormData.email}
             onChange={(e) => handleFormChange("email", e.target.value)}
             placeholder="name@company.com"
-            className={`disable-autofill-style h-10 w-full placeholder:text-custom-text-400 border-0`}
+            className={`h-10 w-full border-0 disable-autofill-style placeholder:text-placeholder`}
             disabled
           />
           {passwordFormData.email.length > 0 && (
             <XCircle
-              className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
+              className="absolute right-3 h-5 w-5 stroke-placeholder hover:cursor-pointer"
               onClick={handleEmailClear}
             />
           )}
@@ -142,30 +146,30 @@ export const AuthPasswordForm = observer(function AuthPasswordForm(props: Props)
       </div>
 
       <div className="space-y-1">
-        <label className="text-sm text-custom-text-300 font-medium" htmlFor="password">
+        <label className="text-13 font-medium text-tertiary" htmlFor="password">
           {mode === EAuthModes.SIGN_IN ? "Password" : "Set a password"}
         </label>
-        <div className="relative flex items-center rounded-md bg-custom-background-100">
+        <div className="relative flex items-center rounded-md bg-surface-1">
           <Input
             type={showPassword?.password ? "text" : "password"}
             name="password"
             value={passwordFormData.password}
             onChange={(e) => handleFormChange("password", e.target.value)}
             placeholder="Enter password"
-            className="disable-autofill-style h-10 w-full border border-custom-border-100 !bg-custom-background-100 pr-12 placeholder:text-custom-text-400"
+            className="h-10 w-full border border-subtle !bg-surface-1 pr-12 disable-autofill-style placeholder:text-placeholder"
             onFocus={() => setIsPasswordInputFocused(true)}
             onBlur={() => setIsPasswordInputFocused(false)}
-            autoComplete="on"
+            autoComplete="off"
             autoFocus
           />
           {showPassword?.password ? (
             <EyeOff
-              className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
+              className="absolute right-3 h-5 w-5 stroke-placeholder hover:cursor-pointer"
               onClick={() => handleShowPassword("password")}
             />
           ) : (
             <Eye
-              className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
+              className="absolute right-3 h-5 w-5 stroke-placeholder hover:cursor-pointer"
               onClick={() => handleShowPassword("password")}
             />
           )}
@@ -175,42 +179,43 @@ export const AuthPasswordForm = observer(function AuthPasswordForm(props: Props)
 
       {mode === EAuthModes.SIGN_UP && (
         <div className="space-y-1">
-          <label className="text-sm text-custom-text-300 font-medium" htmlFor="confirm_password">
+          <label className="text-13 font-medium text-tertiary" htmlFor="confirm_password">
             Confirm password
           </label>
-          <div className="relative flex items-center rounded-md bg-custom-background-100">
+          <div className="relative flex items-center rounded-md bg-surface-1">
             <Input
               type={showPassword?.retypePassword ? "text" : "password"}
               name="confirm_password"
               value={passwordFormData.confirm_password}
               onChange={(e) => handleFormChange("confirm_password", e.target.value)}
               placeholder="Confirm password"
-              className="disable-autofill-style h-10 w-full border border-custom-border-100 !bg-custom-background-100 pr-12 placeholder:text-custom-text-400"
+              className="h-10 w-full border border-subtle !bg-surface-1 pr-12 disable-autofill-style placeholder:text-placeholder"
               onFocus={() => setIsRetryPasswordInputFocused(true)}
               onBlur={() => setIsRetryPasswordInputFocused(false)}
+              autoComplete="off"
             />
             {showPassword?.retypePassword ? (
               <EyeOff
-                className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
+                className="absolute right-3 h-5 w-5 stroke-placeholder hover:cursor-pointer"
                 onClick={() => handleShowPassword("retypePassword")}
               />
             ) : (
               <Eye
-                className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
+                className="absolute right-3 h-5 w-5 stroke-placeholder hover:cursor-pointer"
                 onClick={() => handleShowPassword("retypePassword")}
               />
             )}
           </div>
           {!!passwordFormData.confirm_password &&
             passwordFormData.password !== passwordFormData.confirm_password &&
-            renderPasswordMatchError && <span className="text-sm text-red-500">Passwords don{"'"}t match</span>}
+            renderPasswordMatchError && <span className="text-13 text-danger-primary">Passwords don{"'"}t match</span>}
         </div>
       )}
 
       <div className="space-y-2.5">
         {mode === EAuthModes.SIGN_IN ? (
           <>
-            <Button type="submit" variant="primary" className="w-full" size="lg" disabled={isButtonDisabled}>
+            <Button type="submit" variant="primary" className="w-full" size="xl" disabled={isButtonDisabled}>
               {isSubmitting ? (
                 <Spinner height="20px" width="20px" />
               ) : isSMTPConfigured ? (
@@ -223,16 +228,16 @@ export const AuthPasswordForm = observer(function AuthPasswordForm(props: Props)
               <Button
                 type="button"
                 onClick={redirectToUniqueCodeSignIn}
-                variant="outline-primary"
+                variant="secondary"
                 className="w-full"
-                size="lg"
+                size="xl"
               >
                 Sign in with unique code
               </Button>
             )}
           </>
         ) : (
-          <Button type="submit" variant="primary" className="w-full" size="lg" disabled={isButtonDisabled}>
+          <Button type="submit" variant="primary" className="w-full" size="xl" disabled={isButtonDisabled}>
             {isSubmitting ? <Spinner height="20px" width="20px" /> : "Create account"}
           </Button>
         )}
diff --git a/apps/space/core/components/account/auth-forms/unique-code.tsx b/apps/space/components/account/auth-forms/unique-code.tsx
similarity index 82%
rename from apps/space/core/components/account/auth-forms/unique-code.tsx
rename to apps/space/components/account/auth-forms/unique-code.tsx
index fff033837..c1dd21278 100644
--- a/apps/space/core/components/account/auth-forms/unique-code.tsx
+++ b/apps/space/components/account/auth-forms/unique-code.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React, { useEffect, useState } from "react";
 import { CircleCheck, XCircle } from "lucide-react";
 // plane imports
@@ -80,12 +86,10 @@ export function AuthUniqueCodeForm(props: TAuthUniqueCodeForm) {
       <input type="hidden" value={uniqueCodeFormData.email} name="email" />
       <input type="hidden" value={nextPath} name="next_path" />
       <div className="space-y-1">
-        <label className="text-sm font-medium text-custom-text-300" htmlFor="email">
+        <label className="text-13 font-medium text-tertiary" htmlFor="email">
           Email
         </label>
-        <div
-          className={`relative flex items-center rounded-md bg-custom-background-100 border border-custom-border-100`}
-        >
+        <div className={`relative flex items-center rounded-md border border-subtle bg-surface-1`}>
           <Input
             id="email"
             name="email"
@@ -93,12 +97,13 @@ export function AuthUniqueCodeForm(props: TAuthUniqueCodeForm) {
             value={uniqueCodeFormData.email}
             onChange={(e) => handleFormChange("email", e.target.value)}
             placeholder="name@company.com"
-            className={`disable-autofill-style h-10 w-full placeholder:text-custom-text-400 border-0`}
+            className={`h-10 w-full border-0 disable-autofill-style placeholder:text-placeholder`}
+            autoComplete="off"
             disabled
           />
           {uniqueCodeFormData.email.length > 0 && (
             <XCircle
-              className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
+              className="absolute right-3 h-5 w-5 stroke-placeholder hover:cursor-pointer"
               onClick={handleEmailClear}
             />
           )}
@@ -106,7 +111,7 @@ export function AuthUniqueCodeForm(props: TAuthUniqueCodeForm) {
       </div>
 
       <div className="space-y-1">
-        <label className="text-sm font-medium text-custom-text-300" htmlFor="code">
+        <label className="text-13 font-medium text-tertiary" htmlFor="code">
           Unique code
         </label>
         <Input
@@ -114,11 +119,12 @@ export function AuthUniqueCodeForm(props: TAuthUniqueCodeForm) {
           value={uniqueCodeFormData.code}
           onChange={(e) => handleFormChange("code", e.target.value)}
           placeholder="123456"
-          className="disable-autofill-style h-10 w-full border border-custom-border-100 !bg-custom-background-100 pr-12 placeholder:text-custom-text-400"
+          className="h-10 w-full border border-subtle !bg-surface-1 pr-12 disable-autofill-style placeholder:text-placeholder"
+          autoComplete="off"
           autoFocus
         />
-        <div className="flex w-full items-center justify-between px-1 text-xs pt-1">
-          <p className="flex items-center gap-1 font-medium text-green-700">
+        <div className="flex w-full items-center justify-between px-1 pt-1 text-11">
+          <p className="flex items-center gap-1 font-medium text-success-primary">
             <CircleCheck height={12} width={12} />
             Paste the code sent to your email
           </p>
@@ -127,8 +133,8 @@ export function AuthUniqueCodeForm(props: TAuthUniqueCodeForm) {
             onClick={() => generateNewCode(uniqueCodeFormData.email)}
             className={`${
               isRequestNewCodeDisabled
-                ? "text-custom-text-400"
-                : "font-medium text-custom-primary-300 hover:text-custom-primary-200"
+                ? "text-placeholder"
+                : "font-medium text-accent-secondary hover:text-accent-secondary"
             }`}
             disabled={isRequestNewCodeDisabled}
           >
@@ -142,7 +148,7 @@ export function AuthUniqueCodeForm(props: TAuthUniqueCodeForm) {
       </div>
 
       <div className="space-y-2.5">
-        <Button type="submit" variant="primary" className="w-full" size="lg" disabled={isButtonDisabled}>
+        <Button type="submit" variant="primary" className="w-full" size="xl" disabled={isButtonDisabled}>
           {isRequestingNewCode ? "Sending code" : isSubmitting ? <Spinner height="20px" width="20px" /> : "Continue"}
         </Button>
       </div>
diff --git a/apps/space/components/account/terms-and-conditions.tsx b/apps/space/components/account/terms-and-conditions.tsx
new file mode 100644
index 000000000..1e9a71a6e
--- /dev/null
+++ b/apps/space/components/account/terms-and-conditions.tsx
@@ -0,0 +1,28 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+type Props = {
+  isSignUp?: boolean;
+};
+
+export function TermsAndConditions(props: Props) {
+  const { isSignUp = false } = props;
+  return (
+    <span className="flex items-center justify-center py-6">
+      <p className="text-center text-13 whitespace-pre-line text-secondary">
+        {isSignUp ? "By creating an account" : "By signing in"}, you agree to our{" \n"}
+        <a href="https://plane.so/legals/terms-and-conditions" target="_blank" rel="noopener noreferrer">
+          <span className="text-13 font-medium underline hover:cursor-pointer">Terms of Service</span>
+        </a>{" "}
+        and{" "}
+        <a href="https://plane.so/legals/privacy-policy" target="_blank" rel="noopener noreferrer">
+          <span className="text-13 font-medium underline hover:cursor-pointer">Privacy Policy</span>
+        </a>
+        {"."}
+      </p>
+    </span>
+  );
+}
diff --git a/apps/space/core/components/account/user-logged-in.tsx b/apps/space/components/account/user-logged-in.tsx
similarity index 56%
rename from apps/space/core/components/account/user-logged-in.tsx
rename to apps/space/components/account/user-logged-in.tsx
index 0e47d6e17..42815b013 100644
--- a/apps/space/core/components/account/user-logged-in.tsx
+++ b/apps/space/components/account/user-logged-in.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import { PlaneLockup } from "@plane/propel/icons";
 // assets
@@ -15,21 +21,21 @@ export const UserLoggedIn = observer(function UserLoggedIn() {
   if (!user) return null;
 
   return (
-    <div className="flex flex-col h-screen w-screen">
-      <div className="relative flex w-full items-center justify-between gap-4 border-b border-custom-border-200 px-6 py-5">
-        <PlaneLockup className="h-6 w-auto text-custom-text-100" />
+    <div className="flex h-screen w-screen flex-col">
+      <div className="relative flex w-full items-center justify-between gap-4 border-b border-subtle px-6 py-5">
+        <PlaneLockup className="h-6 w-auto text-primary" />
         <UserAvatar />
       </div>
 
-      <div className="size-full grid place-items-center p-6">
+      <div className="grid size-full place-items-center p-6">
         <div className="text-center">
-          <div className="mx-auto size-32 md:size-52 grid place-items-center rounded-full bg-custom-background-80">
-            <div className="size-16 md:size-32 grid place-items-center">
-              <img src={UserLoggedInImage} alt="User already logged in" className="w-full h-full object-cover" />
+          <div className="mx-auto grid size-32 place-items-center rounded-full bg-layer-1 md:size-52">
+            <div className="grid size-16 place-items-center md:size-32">
+              <img src={UserLoggedInImage} alt="User already logged in" className="h-full w-full object-cover" />
             </div>
           </div>
-          <h1 className="mt-8 md:mt-12 text-xl md:text-3xl font-semibold">Nice! Just one more step.</h1>
-          <p className="mt-2 md:mt-4 text-sm md:text-base">
+          <h1 className="mt-8 text-18 font-semibold md:mt-12 md:text-24">Nice! Just one more step.</h1>
+          <p className="mt-2 text-13 md:mt-4 md:text-14">
             Enter the public-share URL or link of the view or Page you are trying to see in the browser{"'"}s address
             bar.
           </p>
diff --git a/apps/space/core/components/common/logo-spinner.tsx b/apps/space/components/common/logo-spinner.tsx
similarity index 76%
rename from apps/space/core/components/common/logo-spinner.tsx
rename to apps/space/components/common/logo-spinner.tsx
index 69a4b602b..3f0f17938 100644
--- a/apps/space/core/components/common/logo-spinner.tsx
+++ b/apps/space/components/common/logo-spinner.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useTheme } from "next-themes";
 // assets
 import LogoSpinnerDark from "@/app/assets/images/logo-spinner-dark.gif?url";
diff --git a/apps/space/core/components/common/powered-by.tsx b/apps/space/components/common/powered-by.tsx
similarity index 55%
rename from apps/space/core/components/common/powered-by.tsx
rename to apps/space/components/common/powered-by.tsx
index 116c4c40f..05da51210 100644
--- a/apps/space/core/components/common/powered-by.tsx
+++ b/apps/space/components/common/powered-by.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { WEBSITE_URL } from "@plane/constants";
 // assets
 import { PlaneLogo } from "@plane/propel/icons";
@@ -15,12 +21,12 @@ export function PoweredBy(props: TPoweredBy) {
   return (
     <a
       href={WEBSITE_URL}
-      className="fixed bottom-2.5 right-5 !z-[999999] flex items-center gap-1 rounded border border-custom-border-200 bg-custom-background-100 px-2 py-1 shadow-custom-shadow-2xs"
+      className="fixed right-5 bottom-2.5 !z-[999999] flex items-center gap-1 rounded-sm border border-subtle bg-layer-3 px-2 py-1 shadow-raised-100"
       target="_blank"
       rel="noreferrer noopener"
     >
-      <PlaneLogo className="h-3 w-auto text-custom-text-100" />
-      <div className="text-xs">
+      <PlaneLogo className="h-3 w-auto text-primary" />
+      <div className="text-11">
         Powered by <span className="font-semibold">Plane Publish</span>
       </div>
     </a>
diff --git a/apps/space/core/components/common/project-logo.tsx b/apps/space/components/common/project-logo.tsx
similarity index 69%
rename from apps/space/core/components/common/project-logo.tsx
rename to apps/space/components/common/project-logo.tsx
index 5f7869afe..b9540c0a0 100644
--- a/apps/space/core/components/common/project-logo.tsx
+++ b/apps/space/components/common/project-logo.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // types
 import type { TLogoProps } from "@plane/types";
 // helpers
@@ -17,7 +23,7 @@ export function ProjectLogo(props: Props) {
         style={{
           color: logo.icon.color,
         }}
-        className={cn("material-symbols-rounded text-base", className)}
+        className={cn("material-symbols-rounded text-14", className)}
       >
         {logo.icon.name}
       </span>
@@ -25,7 +31,7 @@ export function ProjectLogo(props: Props) {
 
   if (logo.in_use === "emoji" && logo.emoji)
     return (
-      <span className={cn("text-base", className)}>
+      <span className={cn("text-14", className)}>
         {logo.emoji.value?.split("-").map((emoji) => String.fromCodePoint(parseInt(emoji, 10)))}
       </span>
     );
diff --git a/apps/space/components/editor/embeds/mentions/index.ts b/apps/space/components/editor/embeds/mentions/index.ts
new file mode 100644
index 000000000..d98033459
--- /dev/null
+++ b/apps/space/components/editor/embeds/mentions/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./root";
diff --git a/apps/space/components/editor/embeds/mentions/root.tsx b/apps/space/components/editor/embeds/mentions/root.tsx
new file mode 100644
index 000000000..2c6914a29
--- /dev/null
+++ b/apps/space/components/editor/embeds/mentions/root.tsx
@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { TCallbackMentionComponentProps } from "@plane/editor";
+// local components
+import { EditorUserMention } from "./user";
+
+export function EditorMentionsRoot(props: TCallbackMentionComponentProps) {
+  const { entity_identifier, entity_name } = props;
+
+  switch (entity_name) {
+    case "user_mention":
+      return <EditorUserMention id={entity_identifier} />;
+    default:
+      return null;
+  }
+}
diff --git a/apps/space/core/components/editor/embeds/mentions/user.tsx b/apps/space/components/editor/embeds/mentions/user.tsx
similarity index 59%
rename from apps/space/core/components/editor/embeds/mentions/user.tsx
rename to apps/space/components/editor/embeds/mentions/user.tsx
index bb3cc3756..24c817df4 100644
--- a/apps/space/core/components/editor/embeds/mentions/user.tsx
+++ b/apps/space/components/editor/embeds/mentions/user.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 // helpers
 import { cn } from "@plane/utils";
@@ -19,7 +25,7 @@ export const EditorUserMention = observer(function EditorUserMention(props: Prop
 
   if (!userDetails) {
     return (
-      <div className="not-prose inline px-1 py-0.5 rounded bg-custom-background-80 text-custom-text-300 no-underline">
+      <div className="not-prose inline rounded-sm bg-layer-1 px-1 py-0.5 text-tertiary no-underline">
         @deactivated user
       </div>
     );
@@ -27,12 +33,9 @@ export const EditorUserMention = observer(function EditorUserMention(props: Prop
 
   return (
     <div
-      className={cn(
-        "not-prose inline px-1 py-0.5 rounded bg-custom-primary-100/20 text-custom-primary-100 no-underline",
-        {
-          "bg-yellow-500/20 text-yellow-500": id === currentUser?.id,
-        }
-      )}
+      className={cn("not-prose inline rounded-sm bg-accent-primary/20 px-1 py-0.5 text-accent-primary no-underline", {
+        "bg-yellow-500/20 text-yellow-500": id === currentUser?.id,
+      })}
     >
       @{userDetails?.member__display_name}
     </div>
diff --git a/apps/space/core/components/editor/lite-text-editor.tsx b/apps/space/components/editor/lite-text-editor.tsx
similarity index 91%
rename from apps/space/core/components/editor/lite-text-editor.tsx
rename to apps/space/components/editor/lite-text-editor.tsx
index d6d487dd7..ecd08da70 100644
--- a/apps/space/core/components/editor/lite-text-editor.tsx
+++ b/apps/space/components/editor/lite-text-editor.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 // plane imports
 import { LiteTextEditorWithRef } from "@plane/editor";
@@ -9,7 +15,7 @@ import { getEditorFileHandlers } from "@/helpers/editor.helper";
 // hooks
 import { useParseEditorContent } from "@/hooks/use-parse-editor-content";
 // plane web imports
-import { useEditorFlagging } from "@/plane-web/hooks/use-editor-flagging";
+import { useEditorFlagging } from "@/hooks/use-editor-flagging";
 // local imports
 import { EditorMentionsRoot } from "./embeds/mentions";
 import { IssueCommentToolbar } from "./toolbar";
@@ -59,7 +65,7 @@ export const LiteTextEditor = React.forwardRef(function LiteTextEditor(
   });
 
   return (
-    <div className="border border-custom-border-200 rounded p-3 space-y-3">
+    <div className="space-y-3 rounded-sm border border-subtle p-3">
       <LiteTextEditorWithRef
         ref={ref}
         disabledExtensions={[...liteTextEditorExtensions.disabled, ...additionalDisabledExtensions]}
diff --git a/apps/space/core/components/editor/rich-text-editor.tsx b/apps/space/components/editor/rich-text-editor.tsx
similarity index 91%
rename from apps/space/core/components/editor/rich-text-editor.tsx
rename to apps/space/components/editor/rich-text-editor.tsx
index d1273dd2b..b7846e408 100644
--- a/apps/space/core/components/editor/rich-text-editor.tsx
+++ b/apps/space/components/editor/rich-text-editor.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { forwardRef } from "react";
 // plane imports
 import { RichTextEditorWithRef } from "@plane/editor";
@@ -9,7 +15,7 @@ import { getEditorFileHandlers } from "@/helpers/editor.helper";
 import { useMember } from "@/hooks/store/use-member";
 import { useParseEditorContent } from "@/hooks/use-parse-editor-content";
 // plane web imports
-import { useEditorFlagging } from "@/plane-web/hooks/use-editor-flagging";
+import { useEditorFlagging } from "@/hooks/use-editor-flagging";
 // local imports
 import { EditorMentionsRoot } from "./embeds/mentions";
 
diff --git a/apps/space/core/components/editor/toolbar.tsx b/apps/space/components/editor/toolbar.tsx
similarity index 83%
rename from apps/space/core/components/editor/toolbar.tsx
rename to apps/space/components/editor/toolbar.tsx
index 8a2f33dfe..ce2a0a2c6 100644
--- a/apps/space/core/components/editor/toolbar.tsx
+++ b/apps/space/components/editor/toolbar.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React, { useEffect, useState, useCallback } from "react";
 // plane imports
 import { TOOLBAR_ITEMS } from "@plane/editor";
@@ -48,13 +54,13 @@ export function IssueCommentToolbar(props: Props) {
   }, [editorRef, updateActiveStates]);
 
   return (
-    <div className="flex h-9 w-full items-stretch gap-1.5 bg-custom-background-90 overflow-x-scroll">
-      <div className="flex w-full items-stretch justify-between gap-2 rounded border-[0.5px] border-custom-border-200 p-1">
+    <div className="flex h-9 w-full items-stretch gap-1.5 overflow-x-scroll">
+      <div className="flex w-full items-stretch justify-between gap-2 rounded-sm border-[0.5px] border-subtle p-1">
         <div className="flex items-stretch">
           {Object.keys(toolbarItems).map((key, index) => (
             <div
               key={key}
-              className={cn("flex items-stretch gap-0.5 border-r border-custom-border-200 px-2.5", {
+              className={cn("flex items-stretch gap-0.5 border-r border-subtle px-2.5", {
                 "pl-0": index === 0,
               })}
             >
@@ -65,9 +71,9 @@ export function IssueCommentToolbar(props: Props) {
                   <Tooltip
                     key={item.renderKey}
                     tooltipContent={
-                      <p className="flex flex-col gap-1 text-center text-xs">
+                      <p className="flex flex-col gap-1 text-center text-11">
                         <span className="font-medium">{item.name}</span>
-                        {item.shortcut && <kbd className="text-custom-text-400">{item.shortcut.join(" + ")}</kbd>}
+                        {item.shortcut && <kbd className="text-placeholder">{item.shortcut.join(" + ")}</kbd>}
                       </p>
                     }
                   >
@@ -75,15 +81,15 @@ export function IssueCommentToolbar(props: Props) {
                       type="button"
                       onClick={() => executeCommand(item)}
                       className={cn(
-                        "grid place-items-center aspect-square rounded-sm p-0.5 text-custom-text-400 hover:bg-custom-background-80",
+                        "grid aspect-square place-items-center rounded-xs p-0.5 text-placeholder hover:bg-layer-transparent-hover",
                         {
-                          "bg-custom-background-80 text-custom-text-100": isItemActive,
+                          "bg-layer-transparent-hover text-primary": isItemActive,
                         }
                       )}
                     >
                       <item.icon
                         className={cn("h-3.5 w-3.5", {
-                          "text-custom-text-100": isItemActive,
+                          "text-primary": isItemActive,
                         })}
                         strokeWidth={2.5}
                       />
@@ -99,7 +105,6 @@ export function IssueCommentToolbar(props: Props) {
             <Button
               type="button"
               variant="primary"
-              className="px-2.5 py-1.5 text-xs"
               onClick={handleSubmit}
               disabled={isCommentEmpty}
               loading={isSubmitting}
diff --git a/apps/space/core/components/instance/instance-failure-view.tsx b/apps/space/components/instance/instance-failure-view.tsx
similarity index 58%
rename from apps/space/core/components/instance/instance-failure-view.tsx
rename to apps/space/components/instance/instance-failure-view.tsx
index 45b616cf5..2bf810e9d 100644
--- a/apps/space/core/components/instance/instance-failure-view.tsx
+++ b/apps/space/components/instance/instance-failure-view.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useTheme } from "next-themes";
 import { Button } from "@plane/propel/button";
 // assets
@@ -14,18 +20,18 @@ export function InstanceFailureView() {
   };
 
   return (
-    <div className="relative h-screen overflow-x-hidden overflow-y-auto container px-5 mx-auto flex justify-center items-center">
-      <div className="w-auto max-w-2xl relative space-y-8 py-10">
-        <div className="relative flex flex-col justify-center items-center space-y-4">
+    <div className="relative container mx-auto flex h-screen items-center justify-center overflow-x-hidden overflow-y-auto px-5">
+      <div className="relative w-auto max-w-2xl space-y-8 py-10">
+        <div className="relative flex flex-col items-center justify-center space-y-4">
           <img src={instanceImage} alt="Plane instance failure image" />
-          <h3 className="font-medium text-2xl text-white ">Unable to fetch instance details.</h3>
-          <p className="font-medium text-base text-center">
+          <h3 className="text-20 font-medium text-on-color">Unable to fetch instance details.</h3>
+          <p className="text-center text-14 font-medium">
             We were unable to fetch the details of the instance. <br />
             Fret not, it might just be a connectivity work items.
           </p>
         </div>
         <div className="flex justify-center">
-          <Button size="md" onClick={handleRetry}>
+          <Button size="lg" onClick={handleRetry}>
             Retry
           </Button>
         </div>
diff --git a/apps/space/core/components/issues/filters/applied-filters/filters-list.tsx b/apps/space/components/issues/filters/applied-filters/filters-list.tsx
similarity index 83%
rename from apps/space/core/components/issues/filters/applied-filters/filters-list.tsx
rename to apps/space/components/issues/filters/applied-filters/filters-list.tsx
index 6fd9352ef..6c64e1e39 100644
--- a/apps/space/core/components/issues/filters/applied-filters/filters-list.tsx
+++ b/apps/space/components/issues/filters/applied-filters/filters-list.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import { useTranslation } from "@plane/i18n";
 import { CloseIcon } from "@plane/propel/icons";
@@ -30,9 +36,9 @@ export const AppliedFiltersList = observer(function AppliedFiltersList(props: Pr
         return (
           <div
             key={filterKey}
-            className="flex flex-wrap items-center gap-2 rounded-md border border-custom-border-200 px-2 py-1 capitalize"
+            className="flex flex-wrap items-center gap-2 rounded-md border border-subtle px-2 py-1 capitalize"
           >
-            <span className="text-xs text-custom-text-300">{replaceUnderscoreIfSnakeCase(filterKey)}</span>
+            <span className="text-11 text-tertiary">{replaceUnderscoreIfSnakeCase(filterKey)}</span>
             <div className="flex flex-wrap items-center gap-1">
               {filterKey === "priority" && (
                 <AppliedPriorityFilters
@@ -50,7 +56,7 @@ export const AppliedFiltersList = observer(function AppliedFiltersList(props: Pr
 
               <button
                 type="button"
-                className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
+                className="grid place-items-center text-tertiary hover:text-secondary"
                 onClick={() => handleRemoveFilter(filterKey, null)}
               >
                 <CloseIcon height={12} width={12} strokeWidth={2} />
@@ -62,7 +68,7 @@ export const AppliedFiltersList = observer(function AppliedFiltersList(props: Pr
       <button
         type="button"
         onClick={handleRemoveAllFilters}
-        className="flex items-center gap-2 rounded-md border border-custom-border-200 px-2 py-1 text-xs text-custom-text-300 hover:text-custom-text-200"
+        className="flex items-center gap-2 rounded-md border border-subtle px-2 py-1 text-11 text-tertiary hover:text-secondary"
       >
         {t("common.clear_all")}
         <CloseIcon height={12} width={12} strokeWidth={2} />
diff --git a/apps/space/core/components/issues/filters/applied-filters/label.tsx b/apps/space/components/issues/filters/applied-filters/label.tsx
similarity index 79%
rename from apps/space/core/components/issues/filters/applied-filters/label.tsx
rename to apps/space/components/issues/filters/applied-filters/label.tsx
index 95aeff26b..fce3799e5 100644
--- a/apps/space/core/components/issues/filters/applied-filters/label.tsx
+++ b/apps/space/components/issues/filters/applied-filters/label.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { CloseIcon } from "@plane/propel/icons";
 // types
 import type { IIssueLabel } from "@/types/issue";
@@ -19,7 +25,7 @@ export function AppliedLabelsFilters(props: Props) {
         if (!labelDetails) return null;
 
         return (
-          <div key={labelId} className="flex items-center gap-1 rounded bg-custom-background-80 p-1 text-xs">
+          <div key={labelId} className="flex items-center gap-1 rounded-sm bg-layer-1 p-1 text-11">
             <span
               className="h-1.5 w-1.5 rounded-full"
               style={{
@@ -29,7 +35,7 @@ export function AppliedLabelsFilters(props: Props) {
             <span className="normal-case">{labelDetails.name}</span>
             <button
               type="button"
-              className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
+              className="grid place-items-center text-tertiary hover:text-secondary"
               onClick={() => handleRemove(labelId)}
             >
               <CloseIcon height={10} width={10} strokeWidth={2} />
diff --git a/apps/space/components/issues/filters/applied-filters/priority.tsx b/apps/space/components/issues/filters/applied-filters/priority.tsx
new file mode 100644
index 000000000..e28be1262
--- /dev/null
+++ b/apps/space/components/issues/filters/applied-filters/priority.tsx
@@ -0,0 +1,35 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { CloseIcon, PriorityIcon } from "@plane/propel/icons";
+import type { TIssuePriorities } from "@plane/propel/icons";
+
+type Props = {
+  handleRemove: (val: string) => void;
+  values: TIssuePriorities[];
+};
+
+export function AppliedPriorityFilters(props: Props) {
+  const { handleRemove, values } = props;
+
+  return (
+    <>
+      {values?.map((priority) => (
+        <div key={priority} className="flex items-center gap-1 rounded-sm bg-layer-3 p-1 text-11">
+          <PriorityIcon priority={priority} className={`h-3 w-3`} />
+          {priority}
+          <button
+            type="button"
+            className="grid place-items-center text-tertiary hover:text-secondary"
+            onClick={() => handleRemove(priority)}
+          >
+            <CloseIcon height={10} width={10} strokeWidth={2} />
+          </button>
+        </div>
+      ))}
+    </>
+  );
+}
diff --git a/apps/space/core/components/issues/filters/applied-filters/root.tsx b/apps/space/components/issues/filters/applied-filters/root.tsx
similarity index 93%
rename from apps/space/core/components/issues/filters/applied-filters/root.tsx
rename to apps/space/components/issues/filters/applied-filters/root.tsx
index 2571edada..58ae48100 100644
--- a/apps/space/core/components/issues/filters/applied-filters/root.tsx
+++ b/apps/space/components/issues/filters/applied-filters/root.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useCallback } from "react";
 import { cloneDeep } from "lodash-es";
 import { observer } from "mobx-react";
@@ -89,7 +95,7 @@ export const IssueAppliedFilters = observer(function IssueAppliedFilters(props:
   if (Object.keys(appliedFilters).length === 0) return null;
 
   return (
-    <div className="border-b border-custom-border-200 bg-custom-background-100 p-4">
+    <div className="border-b border-subtle bg-surface-1 p-4">
       <AppliedFiltersList
         appliedFilters={appliedFilters || {}}
         handleRemoveFilter={handleFilters as any}
diff --git a/apps/space/core/components/issues/filters/applied-filters/state.tsx b/apps/space/components/issues/filters/applied-filters/state.tsx
similarity index 80%
rename from apps/space/core/components/issues/filters/applied-filters/state.tsx
rename to apps/space/components/issues/filters/applied-filters/state.tsx
index 0e325a91c..4acadbac3 100644
--- a/apps/space/core/components/issues/filters/applied-filters/state.tsx
+++ b/apps/space/components/issues/filters/applied-filters/state.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 // plane imports
 import { EIconSize } from "@plane/constants";
@@ -23,12 +29,12 @@ export const AppliedStateFilters = observer(function AppliedStateFilters(props:
         if (!stateDetails) return null;
 
         return (
-          <div key={stateId} className="flex items-center gap-1 rounded bg-custom-background-80 p-1 text-xs">
+          <div key={stateId} className="flex items-center gap-1 rounded-sm bg-layer-3 p-1 text-11">
             <StateGroupIcon color={stateDetails.color} stateGroup={stateDetails.group} size={EIconSize.SM} />
             {stateDetails.name}
             <button
               type="button"
-              className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
+              className="grid place-items-center text-tertiary hover:text-secondary"
               onClick={() => handleRemove(stateId)}
             >
               <CloseIcon height={10} width={10} strokeWidth={2} />
diff --git a/apps/space/core/components/issues/filters/helpers/dropdown.tsx b/apps/space/components/issues/filters/helpers/dropdown.tsx
similarity index 81%
rename from apps/space/core/components/issues/filters/helpers/dropdown.tsx
rename to apps/space/components/issues/filters/helpers/dropdown.tsx
index c9d672f7f..17f7ca66b 100644
--- a/apps/space/core/components/issues/filters/helpers/dropdown.tsx
+++ b/apps/space/components/issues/filters/helpers/dropdown.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React, { Fragment, useState } from "react";
 import type { Placement } from "@popperjs/core";
 import { usePopper } from "react-popper";
@@ -29,8 +35,8 @@ export function FiltersDropdown(props: Props) {
         return (
           <>
             <Popover.Button as={React.Fragment}>
-              <Button ref={setReferenceElement} variant="neutral-primary" size="sm">
-                <div className={`${open ? "text-custom-text-100" : "text-custom-text-200"}`}>
+              <Button ref={setReferenceElement} variant="secondary">
+                <div className={`${open ? "text-primary" : "text-secondary"}`}>
                   <span>{title}</span>
                 </div>
               </Button>
@@ -46,7 +52,7 @@ export function FiltersDropdown(props: Props) {
             >
               <Popover.Panel>
                 <div
-                  className="z-10 overflow-hidden rounded border border-custom-border-200 bg-custom-background-100 shadow-custom-shadow-rg"
+                  className="z-10 overflow-hidden rounded-sm border border-subtle bg-surface-1 shadow-raised-200"
                   ref={setPopperElement}
                   style={styles.popper}
                   {...attributes.popper}
diff --git a/apps/space/core/components/issues/filters/helpers/filter-header.tsx b/apps/space/components/issues/filters/helpers/filter-header.tsx
similarity index 63%
rename from apps/space/core/components/issues/filters/helpers/filter-header.tsx
rename to apps/space/components/issues/filters/helpers/filter-header.tsx
index e601cff8f..72ed8395a 100644
--- a/apps/space/core/components/issues/filters/helpers/filter-header.tsx
+++ b/apps/space/components/issues/filters/helpers/filter-header.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 // icons
 import { ChevronDownIcon, ChevronUpIcon } from "@plane/propel/icons";
@@ -10,11 +16,11 @@ interface IFilterHeader {
 
 export function FilterHeader({ title, isPreviewEnabled, handleIsPreviewEnabled }: IFilterHeader) {
   return (
-    <div className="sticky top-0 flex items-center justify-between gap-2 bg-custom-background-100">
-      <div className="flex-grow truncate text-xs font-medium text-custom-text-300">{title}</div>
+    <div className="sticky top-0 flex items-center justify-between gap-2">
+      <div className="grow truncate text-11 font-medium text-tertiary">{title}</div>
       <button
         type="button"
-        className="grid h-5 w-5 flex-shrink-0 place-items-center rounded hover:bg-custom-background-80"
+        className="grid h-5 w-5 shrink-0 place-items-center rounded-sm hover:bg-layer-transparent-hover"
         onClick={handleIsPreviewEnabled}
       >
         {isPreviewEnabled ? <ChevronUpIcon height={14} width={14} /> : <ChevronDownIcon height={14} width={14} />}
diff --git a/apps/space/components/issues/filters/helpers/filter-option.tsx b/apps/space/components/issues/filters/helpers/filter-option.tsx
new file mode 100644
index 000000000..b16948f4c
--- /dev/null
+++ b/apps/space/components/issues/filters/helpers/filter-option.tsx
@@ -0,0 +1,41 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+// plane imports
+import { CheckIcon } from "@plane/propel/icons";
+
+type Props = {
+  icon?: React.ReactNode;
+  isChecked: boolean;
+  title: React.ReactNode;
+  onClick?: () => void;
+  multiple?: boolean;
+};
+
+export function FilterOption(props: Props) {
+  const { icon, isChecked, multiple = true, onClick, title } = props;
+
+  return (
+    <button
+      type="button"
+      className="flex w-full items-center gap-2 rounded-sm p-1.5 hover:bg-layer-transparent-hover"
+      onClick={onClick}
+    >
+      <div
+        className={`grid h-3 w-3 shrink-0 place-items-center border ${
+          isChecked ? "border-accent-strong bg-accent-primary text-on-color" : "border-strong"
+        } ${multiple ? "rounded-xs" : "rounded-full"}`}
+      >
+        {isChecked && <CheckIcon width={10} height={10} strokeWidth={3} />}
+      </div>
+      <div className="flex items-center gap-2 truncate">
+        {icon && <div className="grid w-5 shrink-0 place-items-center">{icon}</div>}
+        <div className="grow truncate text-11 text-secondary">{title}</div>
+      </div>
+    </button>
+  );
+}
diff --git a/apps/space/components/issues/filters/index.ts b/apps/space/components/issues/filters/index.ts
new file mode 100644
index 000000000..d98033459
--- /dev/null
+++ b/apps/space/components/issues/filters/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./root";
diff --git a/apps/space/core/components/issues/filters/labels.tsx b/apps/space/components/issues/filters/labels.tsx
similarity index 89%
rename from apps/space/core/components/issues/filters/labels.tsx
rename to apps/space/components/issues/filters/labels.tsx
index fde7df951..db235c5b7 100644
--- a/apps/space/core/components/issues/filters/labels.tsx
+++ b/apps/space/components/issues/filters/labels.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React, { useState } from "react";
 // plane imports
 import { Loader } from "@plane/ui";
@@ -59,7 +65,7 @@ export function FilterLabels(props: Props) {
                 {filteredOptions.length > 5 && (
                   <button
                     type="button"
-                    className="ml-8 text-xs font-medium text-custom-primary-100"
+                    className="ml-8 text-11 font-medium text-accent-primary"
                     onClick={handleViewToggle}
                   >
                     {itemsToRender === filteredOptions.length ? "View less" : "View all"}
@@ -67,7 +73,7 @@ export function FilterLabels(props: Props) {
                 )}
               </>
             ) : (
-              <p className="text-xs italic text-custom-text-400">No matches found</p>
+              <p className="text-11 text-placeholder italic">No matches found</p>
             )
           ) : (
             <Loader className="space-y-2">
diff --git a/apps/space/core/components/issues/filters/priority.tsx b/apps/space/components/issues/filters/priority.tsx
similarity index 87%
rename from apps/space/core/components/issues/filters/priority.tsx
rename to apps/space/components/issues/filters/priority.tsx
index ad66f4a7c..06e4a532a 100644
--- a/apps/space/core/components/issues/filters/priority.tsx
+++ b/apps/space/components/issues/filters/priority.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React, { useState } from "react";
 import { observer } from "mobx-react";
 // plane imports
@@ -46,7 +52,7 @@ export const FilterPriority = observer(function FilterPriority(props: Props) {
               />
             ))
           ) : (
-            <p className="text-xs italic text-custom-text-400">{t("common.search.no_matches_found")}</p>
+            <p className="text-11 text-placeholder italic">{t("common.search.no_matches_found")}</p>
           )}
         </div>
       )}
diff --git a/apps/space/core/components/issues/filters/root.tsx b/apps/space/components/issues/filters/root.tsx
similarity index 93%
rename from apps/space/core/components/issues/filters/root.tsx
rename to apps/space/components/issues/filters/root.tsx
index 8274702db..983f00ad4 100644
--- a/apps/space/core/components/issues/filters/root.tsx
+++ b/apps/space/components/issues/filters/root.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useCallback } from "react";
 import { cloneDeep } from "lodash-es";
 import { observer } from "mobx-react";
@@ -56,7 +62,7 @@ export const IssueFiltersDropdown = observer(function IssueFiltersDropdown(props
   );
 
   return (
-    <div className="z-10 flex h-full w-full flex-col">
+    <div className="relative">
       <FiltersDropdown title="Filters" placement="bottom-end">
         <FilterSelection
           filters={issueFilters?.filters ?? {}}
diff --git a/apps/space/core/components/issues/filters/selection.tsx b/apps/space/components/issues/filters/selection.tsx
similarity index 76%
rename from apps/space/core/components/issues/filters/selection.tsx
rename to apps/space/components/issues/filters/selection.tsx
index 27cd709ec..c8f7e4e21 100644
--- a/apps/space/core/components/issues/filters/selection.tsx
+++ b/apps/space/components/issues/filters/selection.tsx
@@ -1,7 +1,12 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React, { useState } from "react";
 import { observer } from "mobx-react";
-import { Search } from "lucide-react";
-import { CloseIcon } from "@plane/propel/icons";
+import { SearchIcon, CloseIcon } from "@plane/propel/icons";
 // types
 import type { IIssueFilterOptions, TIssueFilterKeys } from "@/types/issue";
 // local imports
@@ -23,12 +28,12 @@ export const FilterSelection = observer(function FilterSelection(props: Props) {
 
   return (
     <div className="flex h-full w-full flex-col overflow-hidden">
-      <div className="bg-custom-background-100 p-2.5 pb-0">
-        <div className="flex items-center gap-1.5 rounded border-[0.5px] border-custom-border-200 bg-custom-background-90 px-1.5 py-1 text-xs">
-          <Search className="text-custom-text-400" size={12} strokeWidth={2} />
+      <div className="p-2.5 pb-0">
+        <div className="flex items-center gap-1.5 rounded-sm border-[0.5px] border-subtle bg-surface-2 px-1.5 py-1 text-11">
+          <SearchIcon className="text-placeholder" width={12} height={12} strokeWidth={2} />
           <input
             type="text"
-            className="w-full bg-custom-background-90 outline-none placeholder:text-custom-text-400"
+            className="w-full bg-surface-2 outline-none placeholder:text-placeholder"
             placeholder="Search"
             value={filtersSearchQuery}
             onChange={(e) => setFiltersSearchQuery(e.target.value)}
@@ -36,12 +41,12 @@ export const FilterSelection = observer(function FilterSelection(props: Props) {
           />
           {filtersSearchQuery !== "" && (
             <button type="button" className="grid place-items-center" onClick={() => setFiltersSearchQuery("")}>
-              <CloseIcon className="text-custom-text-300" height={12} width={12} strokeWidth={2} />
+              <CloseIcon className="text-tertiary" height={12} width={12} strokeWidth={2} />
             </button>
           )}
         </div>
       </div>
-      <div className="h-full w-full divide-y divide-custom-border-200 overflow-y-auto px-2.5">
+      <div className="h-full w-full divide-y divide-subtle-1 overflow-y-auto px-2.5">
         {/* priority */}
         {isFilterEnabled("priority") && (
           <div className="py-2">
diff --git a/apps/space/core/components/issues/filters/state.tsx b/apps/space/components/issues/filters/state.tsx
similarity index 89%
rename from apps/space/core/components/issues/filters/state.tsx
rename to apps/space/components/issues/filters/state.tsx
index 5cad51804..f9275a2d2 100644
--- a/apps/space/core/components/issues/filters/state.tsx
+++ b/apps/space/components/issues/filters/state.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React, { useState } from "react";
 import { observer } from "mobx-react";
 // ui
@@ -59,7 +65,7 @@ export const FilterState = observer(function FilterState(props: Props) {
                 {filteredOptions.length > 5 && (
                   <button
                     type="button"
-                    className="ml-8 text-xs font-medium text-custom-primary-100"
+                    className="ml-8 text-11 font-medium text-accent-primary"
                     onClick={handleViewToggle}
                   >
                     {itemsToRender === filteredOptions.length ? "View less" : "View all"}
@@ -67,7 +73,7 @@ export const FilterState = observer(function FilterState(props: Props) {
                 )}
               </>
             ) : (
-              <p className="text-xs italic text-custom-text-400">No matches found</p>
+              <p className="text-11 text-placeholder italic">No matches found</p>
             )
           ) : (
             <Loader className="space-y-2">
diff --git a/apps/space/core/components/issues/issue-layouts/error.tsx b/apps/space/components/issues/issue-layouts/error.tsx
similarity index 56%
rename from apps/space/core/components/issues/issue-layouts/error.tsx
rename to apps/space/components/issues/issue-layouts/error.tsx
index ec5e4761c..40e4f5540 100644
--- a/apps/space/core/components/issues/issue-layouts/error.tsx
+++ b/apps/space/components/issues/issue-layouts/error.tsx
@@ -1,21 +1,27 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // assets
 import SomethingWentWrongImage from "@/app/assets/something-went-wrong.svg?url";
 
 export function SomethingWentWrongError() {
   return (
-    <div className="grid min-h-screen w-full place-items-center p-6">
+    <div className="grid min-h-screen w-full place-items-center bg-surface-1 p-6">
       <div className="text-center">
-        <div className="mx-auto grid h-52 w-52 place-items-center rounded-full bg-custom-background-80">
+        <div className="mx-auto grid h-52 w-52 place-items-center rounded-full">
           <div className="grid h-32 w-32 place-items-center">
             <img
               src={SomethingWentWrongImage}
               alt="Oops! Something went wrong"
-              className="w-full h-full object-contain"
+              className="h-full w-full object-contain"
             />
           </div>
         </div>
-        <h1 className="mt-12 text-3xl font-semibold">Oops! Something went wrong.</h1>
-        <p className="mt-4 text-custom-text-300">The public board does not exist. Please check the URL.</p>
+        <h1 className="mt-12 text-24 font-semibold">Oops! Something went wrong.</h1>
+        <p className="mt-4 text-tertiary">The public board does not exist. Please check the URL.</p>
       </div>
     </div>
   );
diff --git a/apps/space/components/issues/issue-layouts/index.ts b/apps/space/components/issues/issue-layouts/index.ts
new file mode 100644
index 000000000..d98033459
--- /dev/null
+++ b/apps/space/components/issues/issue-layouts/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./root";
diff --git a/apps/space/core/components/issues/issue-layouts/issue-layout-HOC.tsx b/apps/space/components/issues/issue-layouts/issue-layout-HOC.tsx
similarity index 73%
rename from apps/space/core/components/issues/issue-layouts/issue-layout-HOC.tsx
rename to apps/space/components/issues/issue-layouts/issue-layout-HOC.tsx
index 629478606..6a9a719bc 100644
--- a/apps/space/core/components/issues/issue-layouts/issue-layout-HOC.tsx
+++ b/apps/space/components/issues/issue-layouts/issue-layout-HOC.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 // plane imports
 import type { TLoader } from "@plane/types";
@@ -21,14 +27,14 @@ export const IssueLayoutHOC = observer(function IssueLayoutHOC(props: Props) {
 
   if (getIssueLoader() === "init-loader" || issueCount === undefined) {
     return (
-      <div className="relative flex h-screen w-full items-center justify-center">
+      <div className="relative grid size-full place-items-center">
         <LogoSpinner />
       </div>
     );
   }
 
   if (getGroupIssueCount(undefined, undefined, false) === 0) {
-    return <div className="flex w-full h-full items-center justify-center">No work items Found</div>;
+    return <div className="grid size-full place-items-center text-secondary">No work items found</div>;
   }
 
   return <>{props.children}</>;
diff --git a/apps/space/core/components/issues/issue-layouts/kanban/base-kanban-root.tsx b/apps/space/components/issues/issue-layouts/kanban/base-kanban-root.tsx
similarity index 87%
rename from apps/space/core/components/issues/issue-layouts/kanban/base-kanban-root.tsx
rename to apps/space/components/issues/issue-layouts/kanban/base-kanban-root.tsx
index 87f3e9724..6da0ce2e2 100644
--- a/apps/space/core/components/issues/issue-layouts/kanban/base-kanban-root.tsx
+++ b/apps/space/components/issues/issue-layouts/kanban/base-kanban-root.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useCallback, useMemo, useRef } from "react";
 import { debounce } from "lodash-es";
 import { observer } from "mobx-react";
@@ -49,10 +55,10 @@ export const IssueKanbanLayoutRoot = observer(function IssueKanbanLayoutRoot(pro
   return (
     <IssueLayoutHOC getGroupIssueCount={getGroupIssueCount} getIssueLoader={getIssueLoader}>
       <div
-        className={`horizontal-scrollbar scrollbar-lg relative flex h-full w-full bg-custom-background-90 overflow-x-auto overflow-y-hidden`}
+        className="horizontal-scrollbar relative flex scrollbar-lg size-full overflow-x-auto overflow-y-hidden"
         ref={scrollableContainerRef}
       >
-        <div className="relative h-full w-max min-w-full bg-custom-background-90">
+        <div className="relative h-full w-max min-w-full">
           <div className="h-full w-max">
             <KanBan
               groupedIssueIds={groupedIssueIds ?? {}}
diff --git a/apps/space/core/components/issues/issue-layouts/kanban/block-reactions.tsx b/apps/space/components/issues/issue-layouts/kanban/block-reactions.tsx
similarity index 74%
rename from apps/space/core/components/issues/issue-layouts/kanban/block-reactions.tsx
rename to apps/space/components/issues/issue-layouts/kanban/block-reactions.tsx
index abc5ad534..78e16a43c 100644
--- a/apps/space/core/components/issues/issue-layouts/kanban/block-reactions.tsx
+++ b/apps/space/components/issues/issue-layouts/kanban/block-reactions.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // plane utils
@@ -20,16 +26,12 @@ export const BlockReactions = observer(function BlockReactions(props: Props) {
   if (!canVote && !canReact) return <></>;
 
   return (
-    <div
-      className={cn(
-        "flex flex-wrap border-t-[1px] outline-transparent w-full border-t-custom-border-200 bg-custom-background-90 rounded-b"
-      )}
-    >
-      <div className="py-2 px-3 flex flex-wrap items-center gap-2">
+    <div className="flex w-full flex-wrap rounded-b-lg border-t-[1px] border-t-subtle-1 bg-surface-2 outline-transparent">
+      <div className="flex flex-wrap items-center gap-2 px-3 py-2">
         {canVote && (
           <div
             className={cn(`flex items-center gap-2 pr-1`, {
-              "after:h-6 after:ml-1 after:w-[1px] after:bg-custom-border-200": canReact,
+              "after:ml-1 after:h-6 after:w-[1px] after:bg-layer-3": canReact,
             })}
           >
             <IssueVotes anchor={anchor.toString()} issueIdFromProps={issueId} size="sm" />
diff --git a/apps/space/core/components/issues/issue-layouts/kanban/block.tsx b/apps/space/components/issues/issue-layouts/kanban/block.tsx
similarity index 81%
rename from apps/space/core/components/issues/issue-layouts/kanban/block.tsx
rename to apps/space/components/issues/issue-layouts/kanban/block.tsx
index 8e5a757aa..3ad4c7191 100644
--- a/apps/space/core/components/issues/issue-layouts/kanban/block.tsx
+++ b/apps/space/components/issues/issue-layouts/kanban/block.tsx
@@ -1,6 +1,12 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { MutableRefObject } from "react";
 import { observer } from "mobx-react";
-import Link from "next/link";
+import { Link } from "react-router";
 import { useParams, useSearchParams } from "next/navigation";
 // plane types
 import { Tooltip } from "@plane/propel/tooltip";
@@ -44,20 +50,20 @@ const KanbanIssueDetailsBlock = observer(function KanbanIssueDetailsBlock(props:
     <div className="space-y-2 px-3 py-2">
       <WithDisplayPropertiesHOC displayProperties={displayProperties || {}} displayPropertyKey="key">
         <div className="relative">
-          <div className="line-clamp-1 text-xs text-custom-text-300">
+          <div className="line-clamp-1 text-11 text-tertiary">
             {project_details?.identifier}-{issue.sequence_id}
           </div>
         </div>
       </WithDisplayPropertiesHOC>
 
-      <div className="w-full line-clamp-1 text-sm text-custom-text-100 mb-1.5">
+      <div className="mb-1.5 line-clamp-1 w-full text-13 text-primary">
         <Tooltip tooltipContent={issue.name}>
           <span>{issue.name}</span>
         </Tooltip>
       </div>
 
       <IssueProperties
-        className="flex flex-wrap items-center gap-2 whitespace-nowrap text-custom-text-300 pt-1.5"
+        className="flex flex-wrap items-center gap-2 pt-1.5 whitespace-nowrap text-tertiary"
         issue={issue}
         displayProperties={displayProperties}
       />
@@ -87,14 +93,16 @@ export const KanbanIssueBlock = observer(function KanbanIssueBlock(props: IssueB
     <div className={cn("group/kanban-block relative p-1.5")}>
       <div
         className={cn(
-          "relative block rounded border-[1px] outline-[0.5px] outline-transparent w-full border-custom-border-200 bg-custom-background-100 text-sm transition-all hover:border-custom-border-400",
-          { "border border-custom-primary-70 hover:border-custom-primary-70": getIsIssuePeeked(issue.id) }
+          "relative block w-full rounded-lg border border-subtle bg-layer-2 text-13 transition-all hover:bg-layer-2-hover",
+          {
+            "border-accent-strong hover:border-accent-strong": getIsIssuePeeked(issue.id),
+          }
         )}
       >
         <Link
           id={getIssueBlockId(issueId, groupId, subGroupId)}
           className="w-full"
-          href={`?${queryParam}`}
+          to={`?${queryParam}`}
           onClick={handleIssuePeekOverview}
         >
           <KanbanIssueDetailsBlock issue={issue} displayProperties={displayProperties} />
diff --git a/apps/space/core/components/issues/issue-layouts/kanban/blocks-list.tsx b/apps/space/components/issues/issue-layouts/kanban/blocks-list.tsx
similarity index 82%
rename from apps/space/core/components/issues/issue-layouts/kanban/blocks-list.tsx
rename to apps/space/components/issues/issue-layouts/kanban/blocks-list.tsx
index b4aac0674..319bdf741 100644
--- a/apps/space/core/components/issues/issue-layouts/kanban/blocks-list.tsx
+++ b/apps/space/components/issues/issue-layouts/kanban/blocks-list.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { MutableRefObject } from "react";
 import { observer } from "mobx-react";
 //types
@@ -18,9 +24,8 @@ export const KanbanIssueBlocksList = observer(function KanbanIssueBlocksList(pro
 
   return (
     <>
-      {issueIds && issueIds.length > 0 ? (
-        <>
-          {issueIds.map((issueId) => {
+      {issueIds && issueIds.length > 0
+        ? issueIds.map((issueId) => {
             if (!issueId) return null;
 
             let draggableId = issueId;
@@ -37,9 +42,8 @@ export const KanbanIssueBlocksList = observer(function KanbanIssueBlocksList(pro
                 scrollableContainerRef={scrollableContainerRef}
               />
             );
-          })}
-        </>
-      ) : null}
+          })
+        : null}
     </>
   );
 });
diff --git a/apps/space/core/components/issues/issue-layouts/kanban/default.tsx b/apps/space/components/issues/issue-layouts/kanban/default.tsx
similarity index 60%
rename from apps/space/core/components/issues/issue-layouts/kanban/default.tsx
rename to apps/space/components/issues/issue-layouts/kanban/default.tsx
index d0ca2a7b9..fa934aeb9 100644
--- a/apps/space/core/components/issues/issue-layouts/kanban/default.tsx
+++ b/apps/space/components/issues/issue-layouts/kanban/default.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { MutableRefObject } from "react";
 import { isNil } from "lodash-es";
 import { observer } from "mobx-react";
@@ -80,48 +86,46 @@ export const KanBan = observer(function KanBan(props: IKanBan) {
   };
 
   return (
-    <div className={`relative w-full flex gap-2 px-2 ${subGroupBy ? "h-full" : "h-full"}`}>
-      {groupList &&
-        groupList.length > 0 &&
-        groupList.map((subList: IGroupByColumn) => {
-          const groupByVisibilityToggle = visibilityGroupBy(subList);
+    <div className="relative flex size-full gap-2 px-2">
+      {groupList?.map((subList) => {
+        const groupByVisibilityToggle = visibilityGroupBy(subList);
 
-          if (groupByVisibilityToggle.showGroup === false) return <></>;
-          return (
-            <div
-              key={subList.id}
-              className={`group relative flex flex-shrink-0 flex-col ${
-                groupByVisibilityToggle.showIssues ? `w-[350px]` : ``
-              } `}
-            >
-              {isNil(subGroupBy) && (
-                <div className="sticky top-0 z-[2] w-full flex-shrink-0 bg-custom-background-90 py-1">
-                  <HeaderGroupByCard
-                    groupBy={groupBy}
-                    icon={subList.icon as any}
-                    title={subList.name}
-                    count={getGroupIssueCount(subList.id, undefined, false) ?? 0}
-                  />
-                </div>
-              )}
-
-              {groupByVisibilityToggle.showIssues && (
-                <KanbanGroup
-                  groupId={subList.id}
-                  groupedIssueIds={groupedIssueIds}
-                  displayProperties={displayProperties}
-                  subGroupBy={subGroupBy}
-                  subGroupId={subGroupId}
-                  scrollableContainerRef={scrollableContainerRef}
-                  loadMoreIssues={loadMoreIssues}
-                  getGroupIssueCount={getGroupIssueCount}
-                  getPaginationData={getPaginationData}
-                  getIssueLoader={getIssueLoader}
+        if (groupByVisibilityToggle.showGroup === false) return <></>;
+        return (
+          <div
+            key={subList.id}
+            className={`group relative flex shrink-0 flex-col ${
+              groupByVisibilityToggle.showIssues ? `w-[350px]` : ``
+            } `}
+          >
+            {isNil(subGroupBy) && (
+              <div className="sticky top-0 z-2 w-full shrink-0 py-1">
+                <HeaderGroupByCard
+                  groupBy={groupBy}
+                  icon={subList.icon as any}
+                  title={subList.name}
+                  count={getGroupIssueCount(subList.id, undefined, false) ?? 0}
                 />
-              )}
-            </div>
-          );
-        })}
+              </div>
+            )}
+
+            {groupByVisibilityToggle.showIssues && (
+              <KanbanGroup
+                groupId={subList.id}
+                groupedIssueIds={groupedIssueIds}
+                displayProperties={displayProperties}
+                subGroupBy={subGroupBy}
+                subGroupId={subGroupId}
+                scrollableContainerRef={scrollableContainerRef}
+                loadMoreIssues={loadMoreIssues}
+                getGroupIssueCount={getGroupIssueCount}
+                getPaginationData={getPaginationData}
+                getIssueLoader={getIssueLoader}
+              />
+            )}
+          </div>
+        );
+      })}
     </div>
   );
 });
diff --git a/apps/space/components/issues/issue-layouts/kanban/headers/group-by-card.tsx b/apps/space/components/issues/issue-layouts/kanban/headers/group-by-card.tsx
new file mode 100644
index 000000000..b66127ca4
--- /dev/null
+++ b/apps/space/components/issues/issue-layouts/kanban/headers/group-by-card.tsx
@@ -0,0 +1,35 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import { Circle } from "lucide-react";
+// types
+import type { TIssueGroupByOptions } from "@plane/types";
+
+interface IHeaderGroupByCard {
+  groupBy: TIssueGroupByOptions | undefined;
+  icon?: React.ReactNode;
+  title: string;
+  count: number;
+}
+
+export const HeaderGroupByCard = observer(function HeaderGroupByCard(props: IHeaderGroupByCard) {
+  const { icon, title, count } = props;
+
+  return (
+    <>
+      <div className="relative flex w-full shrink-0 flex-row items-center gap-2 p-1.5">
+        <div className="flex size-5 shrink-0 items-center justify-center overflow-hidden rounded-xs">
+          {icon ? icon : <Circle width={14} strokeWidth={2} />}
+        </div>
+        <div className="relative flex w-full flex-row items-center gap-1 overflow-hidden">
+          <div className="line-clamp-1 inline-block truncate overflow-hidden font-medium text-primary">{title}</div>
+          <div className="shrink-0 pl-2 text-13 font-medium text-tertiary">{count || 0}</div>
+        </div>
+      </div>
+    </>
+  );
+});
diff --git a/apps/space/core/components/issues/issue-layouts/kanban/headers/sub-group-by-card.tsx b/apps/space/components/issues/issue-layouts/kanban/headers/sub-group-by-card.tsx
similarity index 63%
rename from apps/space/core/components/issues/issue-layouts/kanban/headers/sub-group-by-card.tsx
rename to apps/space/components/issues/issue-layouts/kanban/headers/sub-group-by-card.tsx
index 591a6f054..6f429aeb8 100644
--- a/apps/space/core/components/issues/issue-layouts/kanban/headers/sub-group-by-card.tsx
+++ b/apps/space/components/issues/issue-layouts/kanban/headers/sub-group-by-card.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import { Circle } from "lucide-react";
 import { ChevronDownIcon, ChevronUpIcon } from "@plane/propel/icons";
@@ -15,20 +21,20 @@ export const HeaderSubGroupByCard = observer(function HeaderSubGroupByCard(props
   const { icon, title, count, isExpanded, toggleExpanded } = props;
   return (
     <div
-      className={`relative flex w-full flex-shrink-0 flex-row items-center gap-2 rounded-sm p-1.5 cursor-pointer`}
+      className={`relative flex w-full flex-shrink-0 cursor-pointer flex-row items-center gap-2 rounded-xs p-1.5`}
       onClick={() => toggleExpanded()}
     >
-      <div className="flex h-[20px] w-[20px] flex-shrink-0 items-center justify-center overflow-hidden rounded-sm transition-all hover:bg-custom-background-80">
+      <div className="flex h-[20px] w-[20px] flex-shrink-0 items-center justify-center overflow-hidden rounded-xs transition-all hover:bg-layer-1">
         {isExpanded ? <ChevronUpIcon width={14} strokeWidth={2} /> : <ChevronDownIcon width={14} strokeWidth={2} />}
       </div>
 
-      <div className="flex h-[20px] w-[20px] flex-shrink-0 items-center justify-center overflow-hidden rounded-sm">
+      <div className="flex h-[20px] w-[20px] flex-shrink-0 items-center justify-center overflow-hidden rounded-xs">
         {icon ? icon : <Circle width={14} strokeWidth={2} />}
       </div>
 
-      <div className="flex flex-shrink-0 items-center gap-1 text-sm">
-        <div className="line-clamp-1 text-custom-text-100">{title}</div>
-        <div className="pl-2 text-sm font-medium text-custom-text-300">{count || 0}</div>
+      <div className="flex flex-shrink-0 items-center gap-1 text-13">
+        <div className="line-clamp-1 text-primary">{title}</div>
+        <div className="pl-2 text-13 font-medium text-tertiary">{count || 0}</div>
       </div>
     </div>
   );
diff --git a/apps/space/core/components/issues/issue-layouts/kanban/kanban-group.tsx b/apps/space/components/issues/issue-layouts/kanban/kanban-group.tsx
similarity index 78%
rename from apps/space/core/components/issues/issue-layouts/kanban/kanban-group.tsx
rename to apps/space/components/issues/issue-layouts/kanban/kanban-group.tsx
index e7c770afd..360b5e901 100644
--- a/apps/space/core/components/issues/issue-layouts/kanban/kanban-group.tsx
+++ b/apps/space/components/issues/issue-layouts/kanban/kanban-group.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { MutableRefObject } from "react";
 import { forwardRef, useCallback, useRef, useState } from "react";
 import { observer } from "mobx-react";
@@ -38,7 +44,9 @@ const KanbanIssueBlockLoader = forwardRef(function KanbanIssueBlockLoader(
   props: Record<string, unknown>,
   ref: React.ForwardedRef<HTMLSpanElement>
 ) {
-  return <span ref={ref} className="block h-28 m-1.5 animate-pulse bg-custom-background-80 rounded" />;
+  return (
+    <span ref={ref} className="m-1.5 block h-28 animate-pulse rounded-sm bg-[var(--illustration-fill-quaternary)]" />
+  );
 });
 KanbanIssueBlockLoader.displayName = "KanbanIssueBlockLoader";
 
@@ -88,8 +96,9 @@ export const KanbanGroup = observer(function KanbanGroup(props: IKanbanGroup) {
     <KanbanIssueBlockLoader />
   ) : (
     <div
-      className="w-full p-3 text-sm font-medium text-custom-primary-100 hover:text-custom-primary-200 hover:underline cursor-pointer"
+      className="w-full cursor-pointer p-3 text-13 font-medium text-accent-primary hover:text-accent-secondary hover:underline"
       onClick={loadMoreIssuesInThisGroup}
+      role="button"
     >
       {" "}
       Load More &darr;
@@ -101,7 +110,7 @@ export const KanbanGroup = observer(function KanbanGroup(props: IKanbanGroup) {
   return (
     <div
       id={`${groupId}__${subGroupId}`}
-      className={cn("relative h-full transition-all min-h-[120px]", { "vertical-scrollbar scrollbar-md": !subGroupBy })}
+      className={cn("relative h-full min-h-[120px] transition-all", { "vertical-scrollbar scrollbar-md": !subGroupBy })}
       ref={columnRef}
     >
       <KanbanIssueBlocksList
@@ -112,7 +121,17 @@ export const KanbanGroup = observer(function KanbanGroup(props: IKanbanGroup) {
         scrollableContainerRef={scrollableContainerRef}
       />
 
-      {shouldLoadMore && (isSubGroup ? <>{loadMore}</> : <KanbanIssueBlockLoader ref={setIntersectionElement} />)}
+      {shouldLoadMore &&
+        (isSubGroup ? (
+          <>{loadMore}</>
+        ) : (
+          <div className="flex flex-col gap-2">
+            {Array.from({ length: 2 }).map((_, index) => (
+              <KanbanIssueBlockLoader key={index} />
+            ))}
+            <KanbanIssueBlockLoader ref={setIntersectionElement} />
+          </div>
+        ))}
     </div>
   );
 });
diff --git a/apps/space/core/components/issues/issue-layouts/kanban/swimlanes.tsx b/apps/space/components/issues/issue-layouts/kanban/swimlanes.tsx
similarity index 96%
rename from apps/space/core/components/issues/issue-layouts/kanban/swimlanes.tsx
rename to apps/space/components/issues/issue-layouts/kanban/swimlanes.tsx
index 5ff8634c5..977bf5bb0 100644
--- a/apps/space/core/components/issues/issue-layouts/kanban/swimlanes.tsx
+++ b/apps/space/components/issues/issue-layouts/kanban/swimlanes.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { MutableRefObject } from "react";
 import { useState } from "react";
 import { observer } from "mobx-react";
@@ -71,7 +77,7 @@ export const KanBanSwimLanes = observer(function KanBanSwimLanes(props: IKanBanS
 
   return (
     <div className="relative">
-      <div className="sticky top-0 z-[4] h-[50px] bg-custom-background-90 px-2">
+      <div className="sticky top-0 z-4 h-[50px] px-2">
         <SubGroupSwimlaneHeader
           groupBy={groupBy}
           subGroupBy={subGroupBy}
@@ -269,7 +275,7 @@ const SubGroup = observer(function SubGroup(props: ISubGroup) {
   return (
     <>
       <div className="flex flex-shrink-0 flex-col">
-        <div className="sticky top-[50px] z-[3] py-1 flex w-full items-center bg-custom-background-100 border-y-[0.5px] border-custom-border-200">
+        <div className="sticky top-[50px] z-[3] flex w-full items-center border-y-[0.5px] border-subtle bg-layer-1 py-1">
           <div className="sticky left-0 flex-shrink-0">
             <HeaderSubGroupByCard
               icon={group.icon as any}
diff --git a/apps/space/core/components/issues/issue-layouts/list/base-list-root.tsx b/apps/space/components/issues/issue-layouts/list/base-list-root.tsx
similarity index 89%
rename from apps/space/core/components/issues/issue-layouts/list/base-list-root.tsx
rename to apps/space/components/issues/issue-layouts/list/base-list-root.tsx
index f638d6f35..fbc1347ae 100644
--- a/apps/space/core/components/issues/issue-layouts/list/base-list-root.tsx
+++ b/apps/space/components/issues/issue-layouts/list/base-list-root.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useCallback, useMemo } from "react";
 import { observer } from "mobx-react";
 // types
@@ -46,7 +52,7 @@ export const IssuesListLayoutRoot = observer(function IssuesListLayoutRoot(props
 
   return (
     <IssueLayoutHOC getGroupIssueCount={getGroupIssueCount} getIssueLoader={getIssueLoader}>
-      <div className={`relative size-full bg-custom-background-90`}>
+      <div className="relative size-full">
         <List
           displayProperties={displayProperties}
           groupBy={"state"}
diff --git a/apps/space/core/components/issues/issue-layouts/list/block.tsx b/apps/space/components/issues/issue-layouts/list/block.tsx
similarity index 73%
rename from apps/space/core/components/issues/issue-layouts/list/block.tsx
rename to apps/space/components/issues/issue-layouts/list/block.tsx
index 162fe842a..24fc5f27e 100644
--- a/apps/space/core/components/issues/issue-layouts/list/block.tsx
+++ b/apps/space/components/issues/issue-layouts/list/block.tsx
@@ -1,6 +1,12 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useRef } from "react";
 import { observer } from "mobx-react";
-import Link from "next/link";
+import { Link } from "react-router";
 import { useParams, useSearchParams } from "next/navigation";
 // plane types
 import { Tooltip } from "@plane/propel/tooltip";
@@ -50,18 +56,18 @@ export const IssueBlock = observer(function IssueBlock(props: IssueBlockProps) {
     <div
       ref={issueRef}
       className={cn(
-        "group/list-block min-h-11 relative flex flex-col md:flex-row md:items-center gap-3 bg-custom-background-100 hover:bg-custom-background-90 p-3 pl-1.5 text-sm transition-colors border-b border-b-custom-border-200",
+        "group/list-block relative flex min-h-11 flex-col gap-3 border border-transparent border-b-subtle p-3 pl-1.5 text-13 transition-colors hover:bg-layer-transparent-hover md:flex-row md:items-center",
         {
-          "border-custom-primary-70": getIsIssuePeeked(issue.id),
+          "border-accent-strong!": getIsIssuePeeked(issue.id),
           "last:border-b-transparent": !getIsIssuePeeked(issue.id),
         }
       )}
     >
       <div className="flex w-full truncate">
-        <div className="flex flex-grow items-center gap-0.5 truncate">
+        <div className="flex grow items-center gap-0.5 truncate">
           <div className="flex items-center gap-1">
             {displayProperties && displayProperties?.key && (
-              <div className="flex-shrink-0 text-xs font-medium text-custom-text-300 px-4">
+              <div className="shrink-0 px-4 text-11 font-medium text-tertiary">
                 {projectIdentifier}-{issue.sequence_id}
               </div>
             )}
@@ -69,9 +75,9 @@ export const IssueBlock = observer(function IssueBlock(props: IssueBlockProps) {
 
           <Link
             id={`issue-${issue.id}`}
-            href={`?${queryParam}`}
+            to={`?${queryParam}`}
             onClick={handleIssuePeekOverview}
-            className="w-full truncate cursor-pointer text-sm text-custom-text-100"
+            className="w-full cursor-pointer truncate text-13 text-primary"
           >
             <Tooltip tooltipContent={issue.name} position="top-start">
               <p className="truncate">{issue.name}</p>
@@ -79,9 +85,9 @@ export const IssueBlock = observer(function IssueBlock(props: IssueBlockProps) {
           </Link>
         </div>
       </div>
-      <div className="flex flex-shrink-0 items-center gap-2">
+      <div className="flex shrink-0 items-center gap-2">
         <IssueProperties
-          className="relative flex flex-wrap md:flex-grow md:flex-shrink-0 items-center gap-2 whitespace-nowrap"
+          className="relative flex flex-wrap items-center gap-2 whitespace-nowrap md:shrink-0 md:grow"
           issue={issue}
           displayProperties={displayProperties}
         />
diff --git a/apps/space/core/components/issues/issue-layouts/list/blocks-list.tsx b/apps/space/components/issues/issue-layouts/list/blocks-list.tsx
similarity index 57%
rename from apps/space/core/components/issues/issue-layouts/list/blocks-list.tsx
rename to apps/space/components/issues/issue-layouts/list/blocks-list.tsx
index 6a0b41dd6..2580afbfd 100644
--- a/apps/space/core/components/issues/issue-layouts/list/blocks-list.tsx
+++ b/apps/space/components/issues/issue-layouts/list/blocks-list.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { MutableRefObject } from "react";
 // types
 import type { IIssueDisplayProperties } from "@plane/types";
@@ -14,12 +20,10 @@ export function IssueBlocksList(props: Props) {
   const { issueIds = [], groupId, displayProperties } = props;
 
   return (
-    <div className="relative h-full w-full">
-      {issueIds &&
-        issueIds?.length > 0 &&
-        issueIds.map((issueId: string) => (
-          <IssueBlock key={issueId} issueId={issueId} displayProperties={displayProperties} groupId={groupId} />
-        ))}
+    <div className="relative size-full">
+      {issueIds?.map((issueId) => (
+        <IssueBlock key={issueId} issueId={issueId} displayProperties={displayProperties} groupId={groupId} />
+      ))}
     </div>
   );
 }
diff --git a/apps/space/core/components/issues/issue-layouts/list/default.tsx b/apps/space/components/issues/issue-layouts/list/default.tsx
similarity index 87%
rename from apps/space/core/components/issues/issue-layouts/list/default.tsx
rename to apps/space/components/issues/issue-layouts/list/default.tsx
index 5ca48216f..f8f545b47 100644
--- a/apps/space/core/components/issues/issue-layouts/list/default.tsx
+++ b/apps/space/components/issues/issue-layouts/list/default.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useRef } from "react";
 import { observer } from "mobx-react";
 // types
@@ -6,7 +12,6 @@ import type {
   TGroupedIssues,
   IIssueDisplayProperties,
   TIssueGroupByOptions,
-  IGroupByColumn,
   TPaginationData,
   TLoader,
 } from "@plane/types";
@@ -60,14 +65,14 @@ export const List = observer(function List(props: IList) {
   if (!groupList) return null;
 
   return (
-    <div className="relative size-full flex flex-col">
+    <div className="relative flex size-full flex-col">
       {groupList && (
         <>
           <div
             ref={containerRef}
-            className="size-full vertical-scrollbar scrollbar-lg relative overflow-auto vertical-scrollbar-margin-top-md"
+            className="vertical-scrollbar vertical-scrollbar-margin-top-md relative scrollbar-lg size-full overflow-auto"
           >
-            {groupList.map((group: IGroupByColumn) => (
+            {groupList.map((group) => (
               <ListGroup
                 key={group.id}
                 groupIssueIds={groupedIssueIds?.[group.id]}
diff --git a/apps/space/components/issues/issue-layouts/list/headers/group-by-card.tsx b/apps/space/components/issues/issue-layouts/list/headers/group-by-card.tsx
new file mode 100644
index 000000000..5f37484fa
--- /dev/null
+++ b/apps/space/components/issues/issue-layouts/list/headers/group-by-card.tsx
@@ -0,0 +1,39 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import { CircleDashed } from "lucide-react";
+
+interface IHeaderGroupByCard {
+  groupID: string;
+  icon?: React.ReactNode;
+  title: string;
+  count: number;
+  toggleListGroup: (id: string) => void;
+}
+
+export const HeaderGroupByCard = observer(function HeaderGroupByCard(props: IHeaderGroupByCard) {
+  const { groupID, icon, title, count, toggleListGroup } = props;
+
+  return (
+    <>
+      <div
+        className="group/list-header relative flex w-full shrink-0 items-center gap-2 px-2 py-1 py-1.5 hover:bg-layer-transparent-hover"
+        onClick={() => toggleListGroup(groupID)}
+        role="button"
+      >
+        <div className="grid size-3.5 shrink-0 place-items-center overflow-hidden">
+          {icon ?? <CircleDashed className="size-3.5" strokeWidth={2} />}
+        </div>
+
+        <div className="relative flex w-full cursor-pointer items-center gap-1 overflow-hidden">
+          <div className="line-clamp-1 inline-block truncate font-medium text-primary">{title}</div>
+          <div className="pl-2 text-13 font-medium text-tertiary">{count || 0}</div>
+        </div>
+      </div>
+    </>
+  );
+});
diff --git a/apps/space/core/components/issues/issue-layouts/list/list-group.tsx b/apps/space/components/issues/issue-layouts/list/list-group.tsx
similarity index 81%
rename from apps/space/core/components/issues/issue-layouts/list/list-group.tsx
rename to apps/space/components/issues/issue-layouts/list/list-group.tsx
index 36b61e3da..26bc49935 100644
--- a/apps/space/core/components/issues/issue-layouts/list/list-group.tsx
+++ b/apps/space/components/issues/issue-layouts/list/list-group.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { MutableRefObject } from "react";
 import { Fragment, forwardRef, useRef, useState } from "react";
 import { observer } from "mobx-react";
@@ -41,15 +47,15 @@ const ListLoaderItemRow = forwardRef(function ListLoaderItemRow(
   ref: React.ForwardedRef<HTMLDivElement>
 ) {
   return (
-    <div ref={ref} className="flex items-center justify-between h-11 p-3 border-b border-custom-border-200">
+    <div ref={ref} className="flex h-11 items-center justify-between border-b border-subtle p-3">
       <div className="flex items-center gap-3">
-        <span className="h-5 w-10 bg-custom-background-80 rounded animate-pulse" />
-        <span className={`h-5 w-52 bg-custom-background-80 rounded animate-pulse`} />
+        <span className="h-5 w-10 animate-pulse rounded-sm bg-layer-1" />
+        <span className={`h-5 w-52 animate-pulse rounded-sm bg-layer-1`} />
       </div>
       <div className="flex items-center gap-2">
         {[...Array(6)].map((_, index) => (
           <Fragment key={index}>
-            <span key={index} className="h-5 w-5 bg-custom-background-80 rounded animate-pulse" />
+            <span key={index} className="h-5 w-5 animate-pulse rounded-sm bg-layer-1" />
           </Fragment>
         ))}
       </div>
@@ -94,9 +100,10 @@ export const ListGroup = observer(function ListGroup(props: Props) {
   ) : (
     <div
       className={
-        "h-11 relative flex items-center gap-3 bg-custom-background-100 border border-transparent border-t-custom-border-200 pl-6 p-3 text-sm font-medium text-custom-primary-100 hover:text-custom-primary-200 hover:underline cursor-pointer"
+        "relative flex h-11 cursor-pointer items-center gap-3 border border-transparent border-t-subtle-1 bg-surface-1 p-3 pl-6 text-13 font-medium text-accent-primary hover:text-accent-secondary hover:underline"
       }
       onClick={() => loadMoreIssues(group.id)}
+      role="button"
     >
       {t("common.load_more")} &darr;
     </div>
@@ -114,8 +121,8 @@ export const ListGroup = observer(function ListGroup(props: Props) {
   const shouldExpand = (!!groupIssueCount && isExpanded) || !groupBy;
 
   return validateEmptyIssueGroups(groupIssueCount) ? (
-    <div ref={groupRef} className={cn(`relative flex flex-shrink-0 flex-col border-[1px] border-transparent`)}>
-      <div className="sticky top-0 z-[2] w-full flex-shrink-0 border-b border-custom-border-200 bg-custom-background-90 pl-2 pr-3 py-1">
+    <div ref={groupRef} className={cn(`relative flex shrink-0 flex-col border-[1px] border-transparent`)}>
+      <div className="sticky top-0 z-2 w-full shrink-0 border-b border-subtle">
         <HeaderGroupByCard
           groupID={group.id}
           icon={group.icon}
diff --git a/apps/space/core/components/issues/issue-layouts/properties/all-properties.tsx b/apps/space/components/issues/issue-layouts/properties/all-properties.tsx
similarity index 87%
rename from apps/space/core/components/issues/issue-layouts/properties/all-properties.tsx
rename to apps/space/components/issues/issue-layouts/properties/all-properties.tsx
index 07e00f587..9d9c9dace 100644
--- a/apps/space/core/components/issues/issue-layouts/properties/all-properties.tsx
+++ b/apps/space/components/issues/issue-layouts/properties/all-properties.tsx
@@ -1,6 +1,12 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
-import { Link, Paperclip } from "lucide-react";
-import { ViewsIcon } from "@plane/propel/icons";
+import { Paperclip } from "lucide-react";
+import { LinkIcon, ViewsIcon } from "@plane/propel/icons";
 // plane imports
 import { Tooltip } from "@plane/propel/tooltip";
 import type { IIssueDisplayProperties } from "@plane/types";
@@ -135,14 +141,14 @@ export const IssueProperties = observer(function IssueProperties(props: IIssuePr
         <Tooltip tooltipHeading="Sub-work items" tooltipContent={`${issue.sub_issues_count}`}>
           <div
             className={cn(
-              "flex h-5 flex-shrink-0 items-center justify-center gap-2 overflow-hidden rounded border-[0.5px] border-custom-border-300 px-2.5 py-1",
+              "flex h-5 flex-shrink-0 items-center justify-center gap-2 overflow-hidden rounded-sm border-[0.5px] border-strong px-2.5 py-1",
               {
-                "hover:bg-custom-background-80 cursor-pointer": issue.sub_issues_count,
+                "cursor-pointer hover:bg-layer-1": issue.sub_issues_count,
               }
             )}
           >
             <ViewsIcon className="h-3 w-3 flex-shrink-0" strokeWidth={2} />
-            <div className="text-xs">{issue.sub_issues_count}</div>
+            <div className="text-11">{issue.sub_issues_count}</div>
           </div>
         </Tooltip>
       </WithDisplayPropertiesHOC>
@@ -154,9 +160,9 @@ export const IssueProperties = observer(function IssueProperties(props: IIssuePr
         shouldRenderProperty={(properties) => !!properties.attachment_count && !!issue.attachment_count}
       >
         <Tooltip tooltipHeading="Attachments" tooltipContent={`${issue.attachment_count}`}>
-          <div className="flex h-5 flex-shrink-0 items-center justify-center gap-2 overflow-hidden rounded border-[0.5px] border-custom-border-300 px-2.5 py-1">
+          <div className="flex h-5 flex-shrink-0 items-center justify-center gap-2 overflow-hidden rounded-sm border-[0.5px] border-strong px-2.5 py-1">
             <Paperclip className="h-3 w-3 flex-shrink-0" strokeWidth={2} />
-            <div className="text-xs">{issue.attachment_count}</div>
+            <div className="text-11">{issue.attachment_count}</div>
           </div>
         </Tooltip>
       </WithDisplayPropertiesHOC>
@@ -168,9 +174,9 @@ export const IssueProperties = observer(function IssueProperties(props: IIssuePr
         shouldRenderProperty={(properties) => !!properties.link && !!issue.link_count}
       >
         <Tooltip tooltipHeading="Links" tooltipContent={`${issue.link_count}`}>
-          <div className="flex h-5 flex-shrink-0 items-center justify-center gap-2 overflow-hidden rounded border-[0.5px] border-custom-border-300 px-2.5 py-1">
-            <Link className="h-3 w-3 flex-shrink-0" strokeWidth={2} />
-            <div className="text-xs">{issue.link_count}</div>
+          <div className="flex h-5 flex-shrink-0 items-center justify-center gap-2 overflow-hidden rounded-sm border-[0.5px] border-strong px-2.5 py-1">
+            <LinkIcon className="h-3 w-3 flex-shrink-0" strokeWidth={2} />
+            <div className="text-11">{issue.link_count}</div>
           </div>
         </Tooltip>
       </WithDisplayPropertiesHOC>
diff --git a/apps/space/core/components/issues/issue-layouts/properties/cycle.tsx b/apps/space/components/issues/issue-layouts/properties/cycle.tsx
similarity index 66%
rename from apps/space/core/components/issues/issue-layouts/properties/cycle.tsx
rename to apps/space/components/issues/issue-layouts/properties/cycle.tsx
index 9fdb1dbaa..4f70bac2a 100644
--- a/apps/space/core/components/issues/issue-layouts/properties/cycle.tsx
+++ b/apps/space/components/issues/issue-layouts/properties/cycle.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 // plane ui
 import { CycleIcon } from "@plane/propel/icons";
@@ -21,13 +27,13 @@ export const IssueBlockCycle = observer(function IssueBlockCycle({ cycleId, shou
     <Tooltip tooltipHeading="Cycle" tooltipContent={cycle?.name ?? "No Cycle"}>
       <div
         className={cn(
-          "flex h-full w-full items-center justify-between gap-1 rounded px-2.5 py-1 text-xs  duration-300 focus:outline-none",
-          { "border-[0.5px] border-custom-border-300": shouldShowBorder }
+          "flex h-full w-full items-center justify-between gap-1 rounded-sm px-2.5 py-1 text-11 duration-300 focus:outline-none",
+          { "border-[0.5px] border-strong": shouldShowBorder }
         )}
       >
-        <div className="flex w-full items-center text-xs gap-1.5">
+        <div className="flex w-full items-center gap-1.5 text-11">
           <CycleIcon className="h-3 w-3 flex-shrink-0" />
-          <div className="max-w-40 flex-grow truncate ">{cycle?.name ?? "No Cycle"}</div>
+          <div className="max-w-40 truncate">{cycle?.name ?? "No Cycle"}</div>
         </div>
       </div>
     </Tooltip>
diff --git a/apps/space/core/components/issues/issue-layouts/properties/due-date.tsx b/apps/space/components/issues/issue-layouts/properties/due-date.tsx
similarity index 71%
rename from apps/space/core/components/issues/issue-layouts/properties/due-date.tsx
rename to apps/space/components/issues/issue-layouts/properties/due-date.tsx
index 080ff1f3b..7fa853b44 100644
--- a/apps/space/core/components/issues/issue-layouts/properties/due-date.tsx
+++ b/apps/space/components/issues/issue-layouts/properties/due-date.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import { DueDatePropertyIcon } from "@plane/propel/icons";
 import { Tooltip } from "@plane/propel/tooltip";
@@ -26,9 +32,9 @@ export const IssueBlockDate = observer(function IssueBlockDate(props: Props) {
   return (
     <Tooltip tooltipHeading="Due Date" tooltipContent={formattedDate}>
       <div
-        className={cn("flex h-full items-center gap-1 rounded px-2.5 py-1 text-xs text-custom-text-100", {
-          "text-red-500": shouldHighLight && due_date && shouldHighlightIssueDueDate(due_date, state?.group),
-          "border-[0.5px] border-custom-border-300": shouldShowBorder,
+        className={cn("flex h-full items-center gap-1 rounded-sm px-2.5 py-1 text-11 text-primary", {
+          "text-danger-primary": shouldHighLight && due_date && shouldHighlightIssueDueDate(due_date, state?.group),
+          "border-[0.5px] border-strong": shouldShowBorder,
         })}
       >
         <DueDatePropertyIcon className="size-3 flex-shrink-0" />
diff --git a/apps/space/core/components/issues/issue-layouts/properties/labels.tsx b/apps/space/components/issues/issue-layouts/properties/labels.tsx
similarity index 78%
rename from apps/space/core/components/issues/issue-layouts/properties/labels.tsx
rename to apps/space/components/issues/issue-layouts/properties/labels.tsx
index fa8b906c5..4a6d1ab0a 100644
--- a/apps/space/core/components/issues/issue-layouts/properties/labels.tsx
+++ b/apps/space/components/issues/issue-layouts/properties/labels.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import { LabelPropertyIcon } from "@plane/propel/icons";
 // plane imports
@@ -21,7 +27,7 @@ export const IssueBlockLabels = observer(function IssueBlockLabels({ labelIds, s
     return (
       <Tooltip position="top" tooltipHeading="Labels" tooltipContent="None">
         <div
-          className={`flex h-full items-center justify-center gap-2 rounded px-2.5 py-1 text-xs border-[0.5px] border-custom-border-300`}
+          className={`flex h-full items-center justify-center gap-2 rounded-sm border-[0.5px] border-strong px-2.5 py-1 text-11`}
         >
           <LabelPropertyIcon className="h-3.5 w-3.5" strokeWidth={2} />
           {shouldShowLabel && <span>No Labels</span>}
@@ -37,9 +43,9 @@ export const IssueBlockLabels = observer(function IssueBlockLabels({ labelIds, s
             <Tooltip key={label.id} position="top" tooltipHeading="Labels" tooltipContent={label?.name ?? ""}>
               <div
                 key={label?.id}
-                className={`flex overflow-hidden h-full max-w-full flex-shrink-0 items-center rounded border-[0.5px] border-custom-border-300 px-2.5 py-1 text-xs`}
+                className={`flex h-full max-w-full flex-shrink-0 items-center overflow-hidden rounded-sm border-[0.5px] border-strong px-2.5 py-1 text-11`}
               >
-                <div className="flex max-w-full items-center gap-1.5 overflow-hidden text-custom-text-200">
+                <div className="flex max-w-full items-center gap-1.5 overflow-hidden text-secondary">
                   <span
                     className="h-2 w-2 flex-shrink-0 rounded-full"
                     style={{
@@ -54,12 +60,11 @@ export const IssueBlockLabels = observer(function IssueBlockLabels({ labelIds, s
         </>
       ) : (
         <div
-          className={`flex h-full flex-shrink-0 items-center rounded border-[0.5px] border-custom-border-300 px-2.5 py-1 text-xs cursor-not-allowed"
-            `}
+          className={`cursor-not-allowed" flex h-full flex-shrink-0 items-center rounded-sm border-[0.5px] border-strong px-2.5 py-1 text-11`}
         >
           <Tooltip position="top" tooltipHeading="Labels" tooltipContent={labelsString}>
-            <div className="flex h-full items-center gap-1.5 text-custom-text-200">
-              <span className="h-2 w-2 flex-shrink-0 rounded-full bg-custom-primary" />
+            <div className="flex h-full items-center gap-1.5 text-secondary">
+              <span className="h-2 w-2 flex-shrink-0 rounded-full bg-accent-primary" />
               {`${labels.length} Labels`}
             </div>
           </Tooltip>
diff --git a/apps/space/core/components/issues/issue-layouts/properties/member.tsx b/apps/space/components/issues/issue-layouts/properties/member.tsx
similarity index 80%
rename from apps/space/core/components/issues/issue-layouts/properties/member.tsx
rename to apps/space/components/issues/issue-layouts/properties/member.tsx
index 581497580..c24f11593 100644
--- a/apps/space/core/components/issues/issue-layouts/properties/member.tsx
+++ b/apps/space/components/issues/issue-layouts/properties/member.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 // icons
 import type { LucideIcon } from "lucide-react";
@@ -50,7 +56,7 @@ export const ButtonAvatars = observer(function ButtonAvatars(props: AvatarProps)
   return Icon ? (
     <Icon className="h-3 w-3 flex-shrink-0" />
   ) : (
-    <MembersPropertyIcon className="h-3 w-3 mx-[4px] flex-shrink-0" />
+    <MembersPropertyIcon className="mx-[4px] h-3 w-3 flex-shrink-0" />
   );
 });
 
@@ -60,13 +66,13 @@ export const IssueBlockMembers = observer(function IssueBlockMembers({ memberIds
   const members = getMembersByIds(memberIds);
 
   return (
-    <div className="relative h-full flex flex-wrap items-center gap-1">
+    <div className="relative flex h-full flex-wrap items-center gap-1">
       <div
-        className={cn("flex flex-shrink-0 cursor-default items-center rounded-md text-xs", {
-          "border-[0.5px] border-custom-border-300 px-2.5 py-1": shouldShowBorder && !members?.length,
+        className={cn("flex flex-shrink-0 cursor-default items-center rounded-md text-11", {
+          "border-[0.5px] border-strong px-2.5 py-1": shouldShowBorder && !members?.length,
         })}
       >
-        <div className="flex items-center gap-1.5 text-custom-text-200">
+        <div className="flex items-center gap-1.5 text-secondary">
           <ButtonAvatars members={members} showTooltip={false} />
           {!shouldShowBorder && members.length <= 1 && (
             <span>{members?.[0]?.member__display_name ?? "No Assignees"}</span>
diff --git a/apps/space/core/components/issues/issue-layouts/properties/modules.tsx b/apps/space/components/issues/issue-layouts/properties/modules.tsx
similarity index 67%
rename from apps/space/core/components/issues/issue-layouts/properties/modules.tsx
rename to apps/space/components/issues/issue-layouts/properties/modules.tsx
index 7a4c2b8bf..5e8022206 100644
--- a/apps/space/core/components/issues/issue-layouts/properties/modules.tsx
+++ b/apps/space/components/issues/issue-layouts/properties/modules.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 // plane ui
 import { ModuleIcon } from "@plane/propel/icons";
@@ -25,19 +31,19 @@ export const IssueBlockModules = observer(function IssueBlockModules({ moduleIds
         {modules.length <= 1 ? (
           <div
             key={modules?.[0]?.id}
-            className={cn("flex h-full flex-shrink-0 cursor-default items-center rounded-md px-2.5 py-1 text-xs", {
-              "border-[0.5px] border-custom-border-300": shouldShowBorder,
+            className={cn("flex h-full flex-shrink-0 cursor-default items-center rounded-md px-2.5 py-1 text-11", {
+              "border-[0.5px] border-strong": shouldShowBorder,
             })}
           >
-            <div className="flex items-center gap-1.5 text-custom-text-200">
+            <div className="flex items-center gap-1.5 text-secondary">
               <ModuleIcon className="h-3 w-3 flex-shrink-0" />
-              <div className="text-xs">{modules?.[0]?.name ?? "No Modules"}</div>
+              <div className="text-11">{modules?.[0]?.name ?? "No Modules"}</div>
             </div>
           </div>
         ) : (
-          <div className="flex h-full flex-shrink-0 cursor-default items-center rounded-md border border-custom-border-300 px-2.5 py-1 text-xs">
-            <div className="flex items-center gap-1.5 text-custom-text-200">
-              <div className="text-xs">{modules.length} Modules</div>
+          <div className="flex h-full flex-shrink-0 cursor-default items-center rounded-md border border-strong px-2.5 py-1 text-11">
+            <div className="flex items-center gap-1.5 text-secondary">
+              <div className="text-11">{modules.length} Modules</div>
             </div>
           </div>
         )}
diff --git a/apps/space/core/components/issues/issue-layouts/properties/priority.tsx b/apps/space/components/issues/issue-layouts/properties/priority.tsx
similarity index 72%
rename from apps/space/core/components/issues/issue-layouts/properties/priority.tsx
rename to apps/space/components/issues/issue-layouts/properties/priority.tsx
index 8fb52a154..9b4dc3d01 100644
--- a/apps/space/core/components/issues/issue-layouts/properties/priority.tsx
+++ b/apps/space/components/issues/issue-layouts/properties/priority.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { SignalHigh } from "lucide-react";
 import { useTranslation } from "@plane/i18n";
 // types
@@ -19,11 +25,11 @@ export function IssueBlockPriority({
   const priority_detail = priority != null ? getIssuePriorityFilters(priority) : null;
 
   const priorityClasses = {
-    urgent: "bg-red-600/10 text-red-600 border-red-600 px-1",
-    high: "bg-orange-500/20 text-orange-950 border-orange-500",
-    medium: "bg-yellow-500/20 text-yellow-950 border-yellow-500",
-    low: "bg-custom-primary-100/20 text-custom-primary-950 border-custom-primary-100",
-    none: "hover:bg-custom-background-80 border-custom-border-300",
+    urgent: "bg-layer-2 text-priority-urgent border-priority-urgent px-1",
+    high: "bg-layer-2 text-priority-high border-priority-high",
+    medium: "bg-layer-2 text-priority-medium border-priority-medium",
+    low: "bg-layer-2 text-priority-low border-priority-low",
+    none: "bg-layer-2 text-priority-none border-priority-none",
   };
 
   if (priority_detail === null) return <></>;
@@ -32,13 +38,13 @@ export function IssueBlockPriority({
     <Tooltip tooltipHeading="Priority" tooltipContent={t(priority_detail?.titleTranslationKey || "")}>
       <div
         className={cn(
-          "h-full flex items-center gap-1.5 border-[0.5px] rounded text-xs px-2 py-0.5",
+          "flex h-full items-center gap-1.5 rounded-sm border-[0.5px] px-2 py-0.5 text-11",
           priorityClasses[priority ?? "none"],
           {
             // compact the icons if text is hidden
             "px-0.5": !shouldShowName,
             // highlight the whole button if text is hidden and priority is urgent
-            "bg-red-600/10 border-red-600": priority === "urgent" && shouldShowName,
+            "border-priority-urgent": priority === "urgent" && shouldShowName,
           }
         )}
       >
@@ -59,7 +65,7 @@ export function IssueBlockPriority({
         ) : (
           <SignalHigh className="size-3" />
         )}
-        {shouldShowName && <span className="pl-2 text-sm">{t(priority_detail?.titleTranslationKey || "")}</span>}
+        {shouldShowName && <span className="pl-2 text-13">{t(priority_detail?.titleTranslationKey || "")}</span>}
       </div>
     </Tooltip>
   );
diff --git a/apps/space/core/components/issues/issue-layouts/properties/state.tsx b/apps/space/components/issues/issue-layouts/properties/state.tsx
similarity index 78%
rename from apps/space/core/components/issues/issue-layouts/properties/state.tsx
rename to apps/space/components/issues/issue-layouts/properties/state.tsx
index c88ecff58..de1596979 100644
--- a/apps/space/core/components/issues/issue-layouts/properties/state.tsx
+++ b/apps/space/components/issues/issue-layouts/properties/state.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 // plane ui
 import { StateGroupIcon } from "@plane/propel/icons";
@@ -33,13 +39,13 @@ export const IssueBlockState = observer(function IssueBlockState(props: Props) {
   return (
     <Tooltip tooltipHeading="State" tooltipContent={state.name}>
       <div
-        className={cn("flex h-full w-full items-center justify-between gap-1 rounded px-2.5 py-1 text-xs", {
-          "border-[0.5px] border-custom-border-300": shouldShowBorder,
+        className={cn("flex h-full w-full items-center justify-between gap-1 rounded-sm px-2.5 py-1 text-11", {
+          "border-[0.5px] border-strong": shouldShowBorder,
         })}
       >
         <div className="flex w-full items-center gap-1.5">
           <StateGroupIcon stateGroup={state.group} />
-          <div className="text-xs">{state.name}</div>
+          <div className="text-11">{state.name}</div>
         </div>
       </div>
     </Tooltip>
diff --git a/apps/space/core/components/issues/issue-layouts/root.tsx b/apps/space/components/issues/issue-layouts/root.tsx
similarity index 84%
rename from apps/space/core/components/issues/issue-layouts/root.tsx
rename to apps/space/components/issues/issue-layouts/root.tsx
index e0831fa8c..1b8f98524 100644
--- a/apps/space/core/components/issues/issue-layouts/root.tsx
+++ b/apps/space/components/issues/issue-layouts/root.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useEffect } from "react";
 import { observer } from "mobx-react";
 import useSWR from "swr";
@@ -51,20 +57,20 @@ export const IssuesLayoutsRoot = observer(function IssuesLayoutsRoot(props: Prop
   if (error) return <SomethingWentWrongError />;
 
   return (
-    <div className="relative h-full w-full overflow-hidden">
+    <div className="relative size-full overflow-hidden">
       {peekId && <IssuePeekOverview anchor={anchor} peekId={peekId} />}
       {activeLayout && (
-        <div className="relative flex h-full w-full flex-col overflow-hidden">
+        <div className="relative flex size-full flex-col overflow-hidden">
           {/* applied filters */}
           <IssueAppliedFilters anchor={anchor} />
 
           {activeLayout === "list" && (
-            <div className="relative h-full w-full overflow-y-auto">
+            <div className="relative size-full overflow-y-auto">
               <IssuesListLayoutRoot anchor={anchor} />
             </div>
           )}
           {activeLayout === "kanban" && (
-            <div className="relative mx-auto h-full w-full p-5">
+            <div className="relative mx-auto size-full p-5">
               <IssueKanbanLayoutRoot anchor={anchor} />
             </div>
           )}
diff --git a/apps/space/core/components/issues/issue-layouts/utils.tsx b/apps/space/components/issues/issue-layouts/utils.tsx
similarity index 96%
rename from apps/space/core/components/issues/issue-layouts/utils.tsx
rename to apps/space/components/issues/issue-layouts/utils.tsx
index e8e2a6c69..14d61c6fb 100644
--- a/apps/space/core/components/issues/issue-layouts/utils.tsx
+++ b/apps/space/components/issues/issue-layouts/utils.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { isNil } from "lodash-es";
 // types
 import { EIconSize, ISSUE_PRIORITIES } from "@plane/constants";
@@ -218,7 +224,7 @@ export const removeNillKeys = <T,>(obj: T) =>
   Object.fromEntries(Object.entries(obj ?? {}).filter(([key, value]) => key && !isNil(value)));
 
 /**
- * This Method returns if the the grouped values are subGrouped
+ * This Method returns if the grouped values are subGrouped
  * @param groupedIssueIds
  * @returns
  */
diff --git a/apps/space/core/components/issues/issue-layouts/with-display-properties-HOC.tsx b/apps/space/components/issues/issue-layouts/with-display-properties-HOC.tsx
similarity index 87%
rename from apps/space/core/components/issues/issue-layouts/with-display-properties-HOC.tsx
rename to apps/space/components/issues/issue-layouts/with-display-properties-HOC.tsx
index 40593cde7..bd6a66579 100644
--- a/apps/space/core/components/issues/issue-layouts/with-display-properties-HOC.tsx
+++ b/apps/space/components/issues/issue-layouts/with-display-properties-HOC.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 // plane imports
 import type { IIssueDisplayProperties } from "@plane/types";
diff --git a/apps/space/core/components/issues/navbar/controls.tsx b/apps/space/components/issues/navbar/controls.tsx
similarity index 93%
rename from apps/space/core/components/issues/navbar/controls.tsx
rename to apps/space/components/issues/navbar/controls.tsx
index e1c25cf2d..f5902dda0 100644
--- a/apps/space/core/components/issues/navbar/controls.tsx
+++ b/apps/space/components/issues/navbar/controls.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useEffect } from "react";
 import { observer } from "mobx-react";
 import { useRouter, useSearchParams } from "next/navigation";
@@ -104,17 +110,17 @@ export const NavbarControls = observer(function NavbarControls(props: NavbarCont
   return (
     <>
       {/* issue views */}
-      <div className="relative flex flex-shrink-0 items-center gap-1 transition-all delay-150 ease-in-out">
+      <div className="shrink-0">
         <IssuesLayoutSelection anchor={anchor} />
       </div>
 
       {/* issue filters */}
-      <div className="relative flex flex-shrink-0 items-center gap-1 transition-all delay-150 ease-in-out">
+      <div className="shrink-0">
         <IssueFiltersDropdown anchor={anchor} />
       </div>
 
       {/* theming */}
-      <div className="relative flex-shrink-0">
+      <div className="shrink-0">
         <NavbarTheme />
       </div>
 
diff --git a/apps/space/components/issues/navbar/index.ts b/apps/space/components/issues/navbar/index.ts
new file mode 100644
index 000000000..d98033459
--- /dev/null
+++ b/apps/space/components/issues/navbar/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./root";
diff --git a/apps/space/core/components/issues/navbar/layout-icon.tsx b/apps/space/components/issues/navbar/layout-icon.tsx
similarity index 79%
rename from apps/space/core/components/issues/navbar/layout-icon.tsx
rename to apps/space/components/issues/navbar/layout-icon.tsx
index e5dc3d0a7..79f8f39e6 100644
--- a/apps/space/core/components/issues/navbar/layout-icon.tsx
+++ b/apps/space/components/issues/navbar/layout-icon.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { TIssueLayout } from "@plane/constants";
 import { ListLayoutIcon, BoardLayoutIcon } from "@plane/propel/icons";
 import type { ISvgIcons } from "@plane/propel/icons";
diff --git a/apps/space/core/components/issues/navbar/layout-selection.tsx b/apps/space/components/issues/navbar/layout-selection.tsx
similarity index 81%
rename from apps/space/core/components/issues/navbar/layout-selection.tsx
rename to apps/space/components/issues/navbar/layout-selection.tsx
index 201bd1513..927fd7d13 100644
--- a/apps/space/core/components/issues/navbar/layout-selection.tsx
+++ b/apps/space/components/issues/navbar/layout-selection.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import { useRouter, useSearchParams } from "next/navigation";
 // ui
@@ -42,7 +48,7 @@ export const IssuesLayoutSelection = observer(function IssuesLayoutSelection(pro
   };
 
   return (
-    <div className="flex items-center gap-1 rounded bg-custom-background-80 p-1">
+    <div className="flex items-center gap-1 rounded-sm bg-layer-2 p-1">
       {SITES_ISSUE_LAYOUTS.map((layout) => {
         if (!layoutOptions[layout.key]) return;
 
@@ -50,14 +56,14 @@ export const IssuesLayoutSelection = observer(function IssuesLayoutSelection(pro
           <Tooltip key={layout.key} tooltipContent={t(layout.titleTranslationKey)}>
             <button
               type="button"
-              className={`group grid h-[22px] w-7 place-items-center overflow-hidden rounded transition-all hover:bg-custom-background-100 ${
-                activeLayout == layout.key ? "bg-custom-background-100 shadow-custom-shadow-2xs" : ""
+              className={`group grid h-[22px] w-7 place-items-center overflow-hidden rounded-sm bg-layer-transparent transition-all hover:bg-layer-transparent-hover ${
+                activeLayout == layout.key ? "bg-layer-transparent-active hover:bg-layer-transparent-selected" : ""
               }`}
               onClick={() => handleCurrentBoardView(layout.key)}
             >
               <IssueLayoutIcon
                 layout={layout.key}
-                className={`size-3.5 ${activeLayout == layout.key ? "text-custom-text-100" : "text-custom-text-200"}`}
+                className={`size-3.5 ${activeLayout == layout.key ? "text-primary" : "text-secondary"}`}
               />
             </button>
           </Tooltip>
diff --git a/apps/space/core/components/issues/navbar/root.tsx b/apps/space/components/issues/navbar/root.tsx
similarity index 62%
rename from apps/space/core/components/issues/navbar/root.tsx
rename to apps/space/components/issues/navbar/root.tsx
index 195065b4b..7f5221f64 100644
--- a/apps/space/core/components/issues/navbar/root.tsx
+++ b/apps/space/components/issues/navbar/root.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import { ProjectIcon } from "@plane/propel/icons";
 // components
@@ -17,24 +23,23 @@ export const IssuesNavbarRoot = observer(function IssuesNavbarRoot(props: Props)
   const { project_details } = publishSettings;
 
   return (
-    <div className="relative flex justify-between w-full gap-4 px-5">
+    <div className="relative flex w-full justify-between gap-4 px-5">
       {/* project detail */}
-      <div className="flex flex-shrink-0 items-center gap-2">
+      <div className="flex shrink-0 items-center gap-2">
         {project_details ? (
-          <span className="h-7 w-7 flex-shrink-0 grid place-items-center">
-            <ProjectLogo logo={project_details.logo_props} className="text-lg" />
+          <span className="grid size-7 shrink-0 place-items-center">
+            <ProjectLogo logo={project_details.logo_props} className="text-16" />
           </span>
         ) : (
-          <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded uppercase">
-            <ProjectIcon className="h-4 w-4" />
+          <span className="grid size-7 shrink-0 place-items-center rounded-sm uppercase">
+            <ProjectIcon className="size-4" />
           </span>
         )}
-        <div className="line-clamp-1 max-w-[300px] overflow-hidden text-lg font-medium">
+        <div className="line-clamp-1 max-w-[300px] overflow-hidden text-16 font-medium">
           {project_details?.name || `...`}
         </div>
       </div>
-
-      <div className="flex flex-shrink-0 items-center gap-2">
+      <div className="flex shrink-0 items-center gap-2">
         <NavbarControls publishSettings={publishSettings} />
       </div>
     </div>
diff --git a/apps/space/core/components/issues/navbar/theme.tsx b/apps/space/components/issues/navbar/theme.tsx
similarity index 54%
rename from apps/space/core/components/issues/navbar/theme.tsx
rename to apps/space/components/issues/navbar/theme.tsx
index 734e29142..63c85e3cd 100644
--- a/apps/space/core/components/issues/navbar/theme.tsx
+++ b/apps/space/components/issues/navbar/theme.tsx
@@ -1,13 +1,18 @@
-// next theme
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useEffect, useState } from "react";
 import { observer } from "mobx-react";
 import { useTheme } from "next-themes";
-
-// mobx react lite
+import { Moon, Sun } from "lucide-react";
 
 export const NavbarTheme = observer(function NavbarTheme() {
+  // states
   const [appTheme, setAppTheme] = useState("light");
-
+  // theme
   const { setTheme, theme } = useTheme();
 
   const handleTheme = () => {
@@ -23,9 +28,9 @@ export const NavbarTheme = observer(function NavbarTheme() {
     <button
       type="button"
       onClick={handleTheme}
-      className="relative grid h-7 w-7 place-items-center rounded bg-custom-background-100 text-custom-text-100 hover:bg-custom-background-80"
+      className="relative grid size-7 place-items-center rounded-sm bg-layer-transparent text-primary hover:bg-layer-transparent-hover"
     >
-      <span className="material-symbols-rounded text-sm">{appTheme === "light" ? "dark_mode" : "light_mode"}</span>
+      {appTheme === "light" ? <Moon className="size-3.5 shrink-0" /> : <Sun className="size-3.5 shrink-0" />}
     </button>
   );
 });
diff --git a/apps/space/core/components/issues/navbar/user-avatar.tsx b/apps/space/components/issues/navbar/user-avatar.tsx
similarity index 82%
rename from apps/space/core/components/issues/navbar/user-avatar.tsx
rename to apps/space/components/issues/navbar/user-avatar.tsx
index c8566a981..595fe570d 100644
--- a/apps/space/core/components/issues/navbar/user-avatar.tsx
+++ b/apps/space/components/issues/navbar/user-avatar.tsx
@@ -1,6 +1,12 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { Fragment, useEffect, useState } from "react";
 import { observer } from "mobx-react";
-import Link from "next/link";
+import { Link } from "react-router";
 import { usePathname, useSearchParams } from "next/navigation";
 import { usePopper } from "react-popper";
 import { LogOut } from "lucide-react";
@@ -60,10 +66,7 @@ export const UserAvatar = observer(function UserAvatar() {
         <div>
           <Popover as="div">
             <Popover.Button as={Fragment}>
-              <button
-                ref={setReferenceElement}
-                className="flex items-center gap-2 rounded border border-custom-border-200 p-2"
-              >
+              <button ref={setReferenceElement} className="flex items-center gap-2 rounded-sm border border-subtle p-2">
                 <Avatar
                   name={currentUser?.display_name}
                   src={getFileURL(currentUser?.avatar_url)}
@@ -71,7 +74,7 @@ export const UserAvatar = observer(function UserAvatar() {
                   size="sm"
                   showTooltip={false}
                 />
-                <h6 className="text-xs font-medium">
+                <h6 className="text-11 font-medium text-secondary">
                   {currentUser?.display_name ||
                     `${currentUser?.first_name} ${currentUser?.first_name}` ||
                     currentUser?.email ||
@@ -90,7 +93,7 @@ export const UserAvatar = observer(function UserAvatar() {
             >
               <Popover.Panel>
                 <div
-                  className="z-10 overflow-hidden rounded border border-custom-border-200 bg-custom-background-100 shadow-custom-shadow-rg p-1"
+                  className="z-10 overflow-hidden rounded-sm border border-subtle bg-surface-1 p-1 shadow-raised-200"
                   ref={setPopperElement}
                   style={styles.popper}
                   {...attributes.popper}
@@ -101,9 +104,9 @@ export const UserAvatar = observer(function UserAvatar() {
                       <input type="hidden" name="next_path" value={`${pathName}?${queryParam}`} />
                       <button
                         type="submit"
-                        className="flex items-center gap-2 rounded p-2 whitespace-nowrap hover:bg-custom-background-80 text-sm min-w-36 cursor-pointer"
+                        className="flex min-w-36 cursor-pointer items-center gap-2 rounded-sm p-2 text-13 whitespace-nowrap hover:bg-layer-transparent-hover"
                       >
-                        <LogOut size={12} className="flex-shrink-0 text-red-500" />
+                        <LogOut size={12} className="shrink-0 text-danger-primary" />
                         <div>Sign out</div>
                       </button>
                     </form>
@@ -115,8 +118,8 @@ export const UserAvatar = observer(function UserAvatar() {
         </div>
       ) : (
         <div className="flex-shrink-0">
-          <Link href={`/?next_path=${pathName}?${queryParam}`}>
-            <Button variant="outline-primary">Sign in</Button>
+          <Link to={`/?next_path=${pathName}?${queryParam}`}>
+            <Button variant="secondary">Sign in</Button>
           </Link>
         </div>
       )}
diff --git a/apps/space/core/components/issues/peek-overview/comment/add-comment.tsx b/apps/space/components/issues/peek-overview/comment/add-comment.tsx
similarity index 95%
rename from apps/space/core/components/issues/peek-overview/comment/add-comment.tsx
rename to apps/space/components/issues/peek-overview/comment/add-comment.tsx
index f0e91d8b4..acd86cdd5 100644
--- a/apps/space/core/components/issues/peek-overview/comment/add-comment.tsx
+++ b/apps/space/components/issues/peek-overview/comment/add-comment.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React, { useRef, useState } from "react";
 import { observer } from "mobx-react";
 import { useForm, Controller } from "react-hook-form";
diff --git a/apps/space/core/components/issues/peek-overview/comment/comment-detail-card.tsx b/apps/space/components/issues/peek-overview/comment/comment-detail-card.tsx
similarity index 77%
rename from apps/space/core/components/issues/peek-overview/comment/comment-detail-card.tsx
rename to apps/space/components/issues/peek-overview/comment/comment-detail-card.tsx
index bee899347..27506d837 100644
--- a/apps/space/core/components/issues/peek-overview/comment/comment-detail-card.tsx
+++ b/apps/space/components/issues/peek-overview/comment/comment-detail-card.tsx
@@ -1,11 +1,17 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React, { useRef, useState } from "react";
 import { observer } from "mobx-react";
 import { Controller, useForm } from "react-hook-form";
-import { Check, MessageSquare, MoreVertical } from "lucide-react";
+import { MessageSquare, MoreVertical } from "lucide-react";
 import { Menu, Transition } from "@headlessui/react";
 // plane imports
 import type { EditorRefApi } from "@plane/editor";
-import { CloseIcon } from "@plane/propel/icons";
+import { CheckIcon, CloseIcon } from "@plane/propel/icons";
 import type { TIssuePublicComment } from "@plane/types";
 import { getFileURL } from "@plane/utils";
 // components
@@ -70,26 +76,28 @@ export const CommentCard = observer(function CommentCard(props: Props) {
             }
             height={30}
             width={30}
-            className="grid h-7 w-7 place-items-center rounded-full border-2 border-custom-border-200"
+            className="grid size-7 place-items-center rounded-full border-2 border-strong-1"
           />
         ) : (
-          <div className={`grid h-7 w-7 place-items-center rounded-full border-2 border-white bg-gray-500 text-white`}>
+          <div
+            className={`bg-gray-500 grid size-7 place-items-center rounded-full border-2 border-strong-1 text-on-color`}
+          >
             {comment.actor_detail.is_bot
               ? comment?.actor_detail?.first_name?.charAt(0)
               : comment?.actor_detail?.display_name?.charAt(0)}
           </div>
         )}
 
-        <span className="absolute -bottom-0.5 -right-1 rounded-tl bg-custom-background-80 px-0.5 py-px">
-          <MessageSquare className="h-3 w-3 text-custom-text-200" aria-hidden="true" strokeWidth={2} />
+        <span className="absolute -right-1 -bottom-0.5 rounded-tl-sm bg-layer-1 px-0.5 py-px">
+          <MessageSquare className="size-3 text-secondary" aria-hidden="true" strokeWidth={2} />
         </span>
       </div>
       <div className="min-w-0 flex-1">
         <div>
-          <div className="text-xs">
+          <div className="text-11">
             {comment.actor_detail.is_bot ? comment.actor_detail.first_name + " Bot" : comment.actor_detail.display_name}
           </div>
-          <p className="mt-0.5 text-xs text-custom-text-200">
+          <p className="mt-0.5 text-11 text-secondary">
             <>commented {timeAgo(comment.created_at)}</>
           </p>
         </div>
@@ -130,16 +138,16 @@ export const CommentCard = observer(function CommentCard(props: Props) {
               <button
                 type="submit"
                 disabled={isSubmitting}
-                className="group rounded border border-green-500 bg-green-500/20 p-2 shadow-md duration-300 hover:bg-green-500"
+                className="group shadow-md rounded-sm border border-success-strong bg-success-primary p-2 duration-300 hover:bg-success-primary"
               >
-                <Check className="h-3 w-3 text-green-500 duration-300 group-hover:text-white" strokeWidth={2} />
+                <CheckIcon className="h-3 w-3 text-on-color" strokeWidth={2} />
               </button>
               <button
                 type="button"
-                className="group rounded border border-red-500 bg-red-500/20 p-2 shadow-md duration-300 hover:bg-red-500"
+                className="group shadow-md rounded-sm border border-danger-strong bg-danger-primary p-2 duration-300 hover:bg-danger-primary-hover"
                 onClick={() => setIsEditing(false)}
               >
-                <CloseIcon className="h-3 w-3 text-red-500 duration-300 group-hover:text-white" strokeWidth={2} />
+                <CloseIcon className="h-3 w-3 text-on-color" strokeWidth={2} />
               </button>
             </div>
           </form>
@@ -164,9 +172,9 @@ export const CommentCard = observer(function CommentCard(props: Props) {
           <Menu.Button
             type="button"
             onClick={() => {}}
-            className="relative grid cursor-pointer place-items-center rounded p-1 text-custom-text-200 outline-none hover:bg-custom-background-80 hover:text-custom-text-100"
+            className="relative grid cursor-pointer place-items-center rounded-sm p-1 text-tertiary outline-none hover:bg-layer-transparent-hover"
           >
-            <MoreVertical className="h-4 w-4 text-custom-text-200 duration-300" strokeWidth={2} />
+            <MoreVertical className="size-4" strokeWidth={2} />
           </Menu.Button>
 
           <Transition
@@ -178,7 +186,7 @@ export const CommentCard = observer(function CommentCard(props: Props) {
             leaveFrom="transform opacity-100 scale-100"
             leaveTo="transform opacity-0 scale-95"
           >
-            <Menu.Items className="absolute right-0 z-10 mt-1 max-h-36 min-w-[8rem] origin-top-right overflow-auto overflow-y-scroll whitespace-nowrap rounded-md border border-custom-border-300 bg-custom-background-90 p-1 text-xs shadow-lg focus:outline-none">
+            <Menu.Items className="shadow-lg absolute right-0 z-10 mt-1 max-h-36 min-w-[8rem] origin-top-right overflow-auto overflow-y-scroll rounded-md border border-strong bg-surface-1 p-1 text-11 whitespace-nowrap focus:outline-none">
               <Menu.Item>
                 {({ active }) => (
                   <div className="py-1">
@@ -187,8 +195,8 @@ export const CommentCard = observer(function CommentCard(props: Props) {
                       onClick={() => {
                         setIsEditing(true);
                       }}
-                      className={`w-full select-none truncate rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-custom-background-80 ${
-                        active ? "bg-custom-background-80" : ""
+                      className={`w-full truncate rounded-sm px-1 py-1.5 text-left text-secondary select-none hover:bg-layer-transparent-hover ${
+                        active ? "bg-layer-transparent-hover" : ""
                       }`}
                     >
                       Edit
@@ -202,8 +210,8 @@ export const CommentCard = observer(function CommentCard(props: Props) {
                     <button
                       type="button"
                       onClick={handleDelete}
-                      className={`w-full select-none truncate rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-custom-background-80 ${
-                        active ? "bg-custom-background-80" : ""
+                      className={`w-full truncate rounded-sm px-1 py-1.5 text-left text-secondary select-none hover:bg-layer-transparent-hover ${
+                        active ? "bg-layer-transparent-hover" : ""
                       }`}
                     >
                       Delete
diff --git a/apps/space/core/components/issues/peek-overview/comment/comment-reactions.tsx b/apps/space/components/issues/peek-overview/comment/comment-reactions.tsx
similarity index 96%
rename from apps/space/core/components/issues/peek-overview/comment/comment-reactions.tsx
rename to apps/space/components/issues/peek-overview/comment/comment-reactions.tsx
index 7a73fb4a0..be6a6fb48 100644
--- a/apps/space/core/components/issues/peek-overview/comment/comment-reactions.tsx
+++ b/apps/space/components/issues/peek-overview/comment/comment-reactions.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React, { useMemo, useState } from "react";
 import { observer } from "mobx-react";
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
diff --git a/apps/space/core/components/issues/peek-overview/full-screen-peek-view.tsx b/apps/space/components/issues/peek-overview/full-screen-peek-view.tsx
similarity index 90%
rename from apps/space/core/components/issues/peek-overview/full-screen-peek-view.tsx
rename to apps/space/components/issues/peek-overview/full-screen-peek-view.tsx
index daca2d858..4cf425ba8 100644
--- a/apps/space/core/components/issues/peek-overview/full-screen-peek-view.tsx
+++ b/apps/space/components/issues/peek-overview/full-screen-peek-view.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 // plane imports
 import { Loader } from "@plane/ui";
@@ -19,7 +25,7 @@ export const FullScreenPeekView = observer(function FullScreenPeekView(props: Pr
   const { anchor, handleClose, issueDetails } = props;
 
   return (
-    <div className="grid h-full w-full grid-cols-10 divide-x divide-custom-border-200 overflow-hidden">
+    <div className="grid h-full w-full grid-cols-10 divide-x divide-subtle-1 overflow-hidden">
       <div className="col-span-7 flex h-full w-full flex-col overflow-hidden">
         <div className="w-full p-5">
           <PeekOverviewHeader handleClose={handleClose} issueDetails={issueDetails} />
@@ -31,7 +37,7 @@ export const FullScreenPeekView = observer(function FullScreenPeekView(props: Pr
               <PeekOverviewIssueDetails anchor={anchor} issueDetails={issueDetails} />
             </div>
             {/* divider */}
-            <div className="my-5 h-[1] w-full border-t border-custom-border-200" />
+            <div className="my-5 h-[1] w-full border-t border-subtle" />
             {/* issue activity/comments */}
             <div className="w-full pb-5">
               <PeekOverviewIssueActivity anchor={anchor} issueDetails={issueDetails} />
diff --git a/apps/space/core/components/issues/peek-overview/header.tsx b/apps/space/components/issues/peek-overview/header.tsx
similarity index 70%
rename from apps/space/core/components/issues/peek-overview/header.tsx
rename to apps/space/components/issues/peek-overview/header.tsx
index a7459fb1d..764ac4ebf 100644
--- a/apps/space/core/components/issues/peek-overview/header.tsx
+++ b/apps/space/components/issues/peek-overview/header.tsx
@@ -1,9 +1,15 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 import { observer } from "mobx-react";
-import { Link2, MoveRight } from "lucide-react";
+import { MoveRight } from "lucide-react";
 import { Listbox, Transition } from "@headlessui/react";
 // ui
-import { CenterPanelIcon, FullScreenPanelIcon, SidePanelIcon } from "@plane/propel/icons";
+import { LinkIcon, CenterPanelIcon, FullScreenPanelIcon, SidePanelIcon } from "@plane/propel/icons";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 // helpers
 import { copyTextToClipboard } from "@/helpers/string.helper";
@@ -61,7 +67,7 @@ export const PeekOverviewHeader = observer(function PeekOverviewHeader(props: Pr
       <div className="flex items-center justify-between">
         <div className="flex items-center gap-4">
           {peekMode === "side" && (
-            <button type="button" onClick={handleClose} className="text-custom-text-300 hover:text-custom-text-200">
+            <button type="button" onClick={handleClose} className="text-tertiary hover:text-secondary">
               <MoveRight className="size-4" />
             </button>
           )}
@@ -69,12 +75,12 @@ export const PeekOverviewHeader = observer(function PeekOverviewHeader(props: Pr
             as="div"
             value={peekMode}
             onChange={(val) => setPeekMode(val)}
-            className="relative flex-shrink-0 text-left"
+            className="relative shrink-0 text-left"
           >
             <Listbox.Button
-              className={`grid place-items-center text-custom-text-300 hover:text-custom-text-200 ${peekMode === "full" ? "rotate-45" : ""}`}
+              className={`grid place-items-center text-tertiary hover:text-secondary ${peekMode === "full" ? "rotate-45" : ""}`}
             >
-              <Icon className="h-4 w-4 text-custom-text-300 hover:text-custom-text-200" />
+              <Icon className="h-4 w-4 text-tertiary hover:text-secondary" />
             </Listbox.Button>
 
             <Transition
@@ -86,16 +92,16 @@ export const PeekOverviewHeader = observer(function PeekOverviewHeader(props: Pr
               leaveFrom="transform opacity-100 scale-100"
               leaveTo="transform opacity-0 scale-95"
             >
-              <Listbox.Options className="absolute left-0 z-10 mt-1 min-w-[12rem] origin-top-left overflow-y-auto whitespace-nowrap rounded-md border border-custom-border-300 bg-custom-background-90 text-xs shadow-lg focus:outline-none">
+              <Listbox.Options className="shadow-lg absolute left-0 z-10 mt-1 min-w-[12rem] origin-top-left overflow-y-auto rounded-md border border-strong bg-surface-2 text-11 whitespace-nowrap focus:outline-none">
                 <div className="space-y-1 p-2">
                   {PEEK_MODES.map((mode) => (
                     <Listbox.Option
                       key={mode.key}
                       value={mode.key}
                       className={({ active, selected }) =>
-                        `cursor-pointer select-none truncate rounded px-1 py-1.5 ${
-                          active ? "bg-custom-background-80" : ""
-                        } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
+                        `cursor-pointer truncate rounded-sm px-1 py-1.5 select-none ${
+                          active ? "bg-layer-transparent-hover" : ""
+                        } ${selected ? "text-primary" : "text-secondary"}`
                       }
                     >
                       <div className="flex items-center gap-1.5">
@@ -110,16 +116,14 @@ export const PeekOverviewHeader = observer(function PeekOverviewHeader(props: Pr
           </Listbox>
         </div>
         {isClipboardWriteAllowed && (peekMode === "side" || peekMode === "modal") && (
-          <div className="flex flex-shrink-0 items-center gap-2">
-            <button
-              type="button"
-              onClick={handleCopyLink}
-              className="focus:outline-none text-custom-text-300 hover:text-custom-text-200"
-              tabIndex={1}
-            >
-              <Link2 className="h-4 w-4 -rotate-45" />
-            </button>
-          </div>
+          <button
+            type="button"
+            onClick={handleCopyLink}
+            className="shrink-0 text-tertiary hover:text-secondary focus:outline-none"
+            tabIndex={1}
+          >
+            <LinkIcon className="h-4 w-4 -rotate-45" />
+          </button>
         )}
       </div>
     </>
diff --git a/apps/space/components/issues/peek-overview/index.ts b/apps/space/components/issues/peek-overview/index.ts
new file mode 100644
index 000000000..d0bf32463
--- /dev/null
+++ b/apps/space/components/issues/peek-overview/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./layout";
diff --git a/apps/space/core/components/issues/peek-overview/issue-activity.tsx b/apps/space/components/issues/peek-overview/issue-activity.tsx
similarity index 79%
rename from apps/space/core/components/issues/peek-overview/issue-activity.tsx
rename to apps/space/components/issues/peek-overview/issue-activity.tsx
index cc4ba4dca..4e725c2b8 100644
--- a/apps/space/core/components/issues/peek-overview/issue-activity.tsx
+++ b/apps/space/components/issues/peek-overview/issue-activity.tsx
@@ -1,13 +1,18 @@
-import React from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
-import Link from "next/link";
+import { Link } from "react-router";
 import { usePathname } from "next/navigation";
+import { Lock } from "lucide-react";
 // plane imports
 import { Button } from "@plane/propel/button";
 // components
 import { AddComment } from "@/components/issues/peek-overview/comment/add-comment";
 import { CommentCard } from "@/components/issues/peek-overview/comment/comment-detail-card";
-import { Icon } from "@/components/ui";
 // hooks
 import { usePublish } from "@/hooks/store/publish";
 import { useIssueDetails } from "@/hooks/store/use-issue-details";
@@ -52,12 +57,12 @@ export const PeekOverviewIssueActivity = observer(function PeekOverviewIssueActi
               )}
             </>
           ) : (
-            <div className="mt-4 flex items-center justify-between gap-2 rounded border border-custom-border-300 bg-custom-background-80 px-2 py-2.5">
-              <p className="flex gap-2 overflow-hidden break-words text-sm text-custom-text-200">
-                <Icon iconName="lock" className="!text-sm" />
+            <div className="mt-4 flex items-center justify-between gap-2 rounded-sm border border-strong bg-layer-2 px-2 py-2.5">
+              <p className="flex items-center gap-2 overflow-hidden text-13 break-words text-secondary">
+                <Lock className="size-3 shrink-0" />
                 Sign in to add your comment
               </p>
-              <Link href={`/?next_path=${pathname}`}>
+              <Link to={`/?next_path=${pathname}`}>
                 <Button variant="primary">Sign in</Button>
               </Link>
             </div>
diff --git a/apps/space/core/components/issues/peek-overview/issue-details.tsx b/apps/space/components/issues/peek-overview/issue-details.tsx
similarity index 79%
rename from apps/space/core/components/issues/peek-overview/issue-details.tsx
rename to apps/space/components/issues/peek-overview/issue-details.tsx
index 2457766b3..51139b460 100644
--- a/apps/space/core/components/issues/peek-overview/issue-details.tsx
+++ b/apps/space/components/issues/peek-overview/issue-details.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 // plane imports
 import { RichTextEditor } from "@/components/editor/rich-text-editor";
@@ -21,10 +27,10 @@ export const PeekOverviewIssueDetails = observer(function PeekOverviewIssueDetai
 
   return (
     <div className="space-y-2">
-      <h6 className="text-base font-medium text-custom-text-400">
+      <h6 className="text-14 font-medium text-placeholder">
         {project_details?.identifier}-{issueDetails?.sequence_id}
       </h6>
-      <h4 className="break-words text-2xl font-medium">{issueDetails.name}</h4>
+      <h4 className="text-20 font-medium break-words">{issueDetails.name}</h4>
       {description && description !== "" && description !== "<p></p>" && (
         <RichTextEditor
           editable={false}
diff --git a/apps/space/core/components/issues/peek-overview/issue-properties.tsx b/apps/space/components/issues/peek-overview/issue-properties.tsx
similarity index 66%
rename from apps/space/core/components/issues/peek-overview/issue-properties.tsx
rename to apps/space/components/issues/peek-overview/issue-properties.tsx
index fa30531f0..1c010ddaf 100644
--- a/apps/space/core/components/issues/peek-overview/issue-properties.tsx
+++ b/apps/space/components/issues/peek-overview/issue-properties.tsx
@@ -1,12 +1,23 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
+import { LinkIcon } from "lucide-react";
 // plane imports
 import { useTranslation } from "@plane/i18n";
-import { StatePropertyIcon, StateGroupIcon, PriorityPropertyIcon, DueDatePropertyIcon } from "@plane/propel/icons";
+import {
+  StatePropertyIcon,
+  StateGroupIcon,
+  PriorityPropertyIcon,
+  DueDatePropertyIcon,
+  PriorityIcon,
+} from "@plane/propel/icons";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import { cn, getIssuePriorityFilters } from "@plane/utils";
-// components
-import { Icon } from "@/components/ui";
 // helpers
 import { renderFormattedDate } from "@/helpers/date-time.helper";
 import { shouldHighlightIssueDueDate } from "@/helpers/issue.helper";
@@ -50,7 +61,7 @@ export const PeekOverviewIssueProperties = observer(function PeekOverviewIssuePr
   };
 
   return (
-    <div className={mode === "full" ? "divide-y divide-custom-border-200" : ""}>
+    <div className={mode === "full" ? "divide-y divide-subtle-1" : ""}>
       {mode === "full" && (
         <div className="flex justify-between gap-2 pb-3">
           <h6 className="flex items-center gap-2 font-medium">
@@ -58,69 +69,65 @@ export const PeekOverviewIssueProperties = observer(function PeekOverviewIssuePr
           </h6>
           <div className="flex items-center gap-2">
             <button type="button" onClick={handleCopyLink} className="-rotate-45">
-              <Icon iconName="link" />
+              <LinkIcon className="size-3.5 shrink-0" />
             </button>
           </div>
         </div>
       )}
       <div className={`space-y-2 ${mode === "full" ? "pt-3" : ""}`}>
-        <div className="flex items-center gap-3 h-8">
-          <div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-sm text-custom-text-300">
+        <div className="flex h-8 items-center gap-3">
+          <div className="flex w-1/4 flex-shrink-0 items-center gap-1 text-13 text-tertiary">
             <StatePropertyIcon className="size-4 flex-shrink-0" />
             <span>State</span>
           </div>
-          <div className="w-3/4 flex items-center gap-1.5 py-0.5 text-sm">
+          <div className="flex w-3/4 items-center gap-1.5 py-0.5 text-13">
             <StateGroupIcon stateGroup={state?.group ?? "backlog"} color={state?.color} />
             {addSpaceIfCamelCase(state?.name ?? "")}
           </div>
         </div>
 
-        <div className="flex items-center gap-3 h-8">
-          <div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-sm text-custom-text-300">
+        <div className="flex h-8 items-center gap-3">
+          <div className="flex w-1/4 flex-shrink-0 items-center gap-1 text-13 text-tertiary">
             <PriorityPropertyIcon className="size-4 flex-shrink-0" />
             <span>Priority</span>
           </div>
           <div className="w-3/4">
             <div
-              className={`inline-flex items-center gap-1.5 rounded px-2.5 py-0.5 text-left text-sm capitalize ${
+              className={`inline-flex items-center gap-1.5 rounded-sm bg-layer-2 px-2.5 py-0.5 text-left text-13 capitalize ${
                 priority?.key === "urgent"
-                  ? "border-red-500/20 bg-red-500/20 text-red-500"
+                  ? "border-priority-urgent text-priority-urgent"
                   : priority?.key === "high"
-                    ? "border-orange-500/20 bg-orange-500/20 text-orange-500"
+                    ? "border-priority-high text-priority-high"
                     : priority?.key === "medium"
-                      ? "border-yellow-500/20 bg-yellow-500/20 text-yellow-500"
+                      ? "border-priority-medium text-priority-medium"
                       : priority?.key === "low"
-                        ? "border-green-500/20 bg-green-500/20 text-green-500"
-                        : "border-custom-border-200 bg-custom-background-80"
+                        ? "border-priority-low text-priority-low"
+                        : "border-priority-none text-priority-none"
               }`}
             >
-              {priority && (
-                <span className="-my-1 grid place-items-center">
-                  <Icon iconName={priority?.icon} />
-                </span>
-              )}
+              {priority && <PriorityIcon priority={priority?.key} size={12} className="flex-shrink-0" />}
               <span>{t(priority?.titleTranslationKey || "common.none")}</span>
             </div>
           </div>
         </div>
 
-        <div className="flex items-center gap-3 h-8">
-          <div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-sm text-custom-text-300">
+        <div className="flex h-8 items-center gap-3">
+          <div className="flex w-1/4 flex-shrink-0 items-center gap-1 text-13 text-tertiary">
             <DueDatePropertyIcon className="size-4 flex-shrink-0" />
             <span>Due date</span>
           </div>
           <div>
             {issueDetails.target_date ? (
               <div
-                className={cn("flex items-center gap-1.5 rounded py-0.5 text-xs text-custom-text-100", {
-                  "text-red-500": shouldHighlightIssueDueDate(issueDetails.target_date, state?.group),
+                className={cn("flex items-center gap-1.5 rounded-sm py-0.5 text-11 text-primary", {
+                  "text-danger-primary": shouldHighlightIssueDueDate(issueDetails.target_date, state?.group),
                 })}
               >
                 <DueDatePropertyIcon className="size-3" />
                 {renderFormattedDate(issueDetails.target_date)}
               </div>
             ) : (
-              <span className="text-custom-text-200">Empty</span>
+              <span className="text-13 text-secondary">Empty</span>
             )}
           </div>
         </div>
diff --git a/apps/space/core/components/issues/peek-overview/issue-reaction.tsx b/apps/space/components/issues/peek-overview/issue-reaction.tsx
similarity index 86%
rename from apps/space/core/components/issues/peek-overview/issue-reaction.tsx
rename to apps/space/components/issues/peek-overview/issue-reaction.tsx
index 6e13a85bd..2b847d476 100644
--- a/apps/space/core/components/issues/peek-overview/issue-reaction.tsx
+++ b/apps/space/components/issues/peek-overview/issue-reaction.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 // components
 import { IssueEmojiReactions } from "@/components/issues/reactions/issue-emoji-reactions";
diff --git a/apps/space/core/components/issues/peek-overview/layout.tsx b/apps/space/components/issues/peek-overview/layout.tsx
similarity index 87%
rename from apps/space/core/components/issues/peek-overview/layout.tsx
rename to apps/space/components/issues/peek-overview/layout.tsx
index d8ebec8d0..ebde720fa 100644
--- a/apps/space/core/components/issues/peek-overview/layout.tsx
+++ b/apps/space/components/issues/peek-overview/layout.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { Fragment, useEffect } from "react";
 import { observer } from "mobx-react";
 import { useRouter, useSearchParams } from "next/navigation";
@@ -68,7 +74,7 @@ export const IssuePeekOverview = observer(function IssuePeekOverview(props: TIss
             leaveFrom="translate-x-0"
             leaveTo="translate-x-full"
           >
-            <Dialog.Panel className="fixed right-0 top-0 z-20 h-full w-1/2 bg-custom-background-100 shadow-custom-shadow-sm">
+            <Dialog.Panel className="fixed top-0 right-0 z-20 h-full w-1/2 border-l border-subtle-1 bg-surface-1 shadow-raised-200">
               <SidePeekView anchor={anchor} handleClose={handleClose} issueDetails={issueDetails} />
             </Dialog.Panel>
           </Transition.Child>
@@ -85,7 +91,7 @@ export const IssuePeekOverview = observer(function IssuePeekOverview(props: TIss
             leaveFrom="opacity-100"
             leaveTo="opacity-0"
           >
-            <div className="fixed inset-0 z-20 bg-custom-backdrop bg-opacity-50 transition-opacity" />
+            <div className="fixed inset-0 z-20 bg-backdrop transition-opacity" />
           </Transition.Child>
           <Transition.Child
             as={Fragment}
@@ -98,8 +104,8 @@ export const IssuePeekOverview = observer(function IssuePeekOverview(props: TIss
           >
             <Dialog.Panel>
               <div
-                className={`fixed left-1/2 top-1/2 z-20 -translate-x-1/2 -translate-y-1/2 rounded-lg bg-custom-background-100 shadow-custom-shadow-xl transition-all duration-300 ${
-                  peekMode === "modal" ? "h-[70%] w-3/5" : "h-[95%] w-[95%]"
+                className={`fixed top-1/2 left-1/2 z-20 -translate-x-1/2 -translate-y-1/2 rounded-lg bg-surface-1 transition-all duration-300 ${
+                  peekMode === "modal" ? "h-[70%] w-3/5" : "size-[95%]"
                 }`}
               >
                 {peekMode === "modal" && (
diff --git a/apps/space/core/components/issues/peek-overview/side-peek-view.tsx b/apps/space/components/issues/peek-overview/side-peek-view.tsx
similarity index 84%
rename from apps/space/core/components/issues/peek-overview/side-peek-view.tsx
rename to apps/space/components/issues/peek-overview/side-peek-view.tsx
index d091d42c9..aa981d8d9 100644
--- a/apps/space/core/components/issues/peek-overview/side-peek-view.tsx
+++ b/apps/space/components/issues/peek-overview/side-peek-view.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 // plane imports
 import { Loader } from "@plane/ui";
@@ -23,12 +29,12 @@ export const SidePeekView = observer(function SidePeekView(props: Props) {
   const { canComment } = usePublish(anchor);
 
   return (
-    <div className="flex h-full w-full flex-col overflow-hidden">
+    <div className="flex size-full flex-col overflow-hidden">
       <div className="w-full p-5">
         <PeekOverviewHeader handleClose={handleClose} issueDetails={issueDetails} />
       </div>
       {issueDetails ? (
-        <div className="h-full w-full overflow-y-auto px-6">
+        <div className="size-full overflow-y-auto px-6">
           {/* issue title and description */}
           <div className="w-full">
             <PeekOverviewIssueDetails anchor={anchor} issueDetails={issueDetails} />
@@ -38,7 +44,7 @@ export const SidePeekView = observer(function SidePeekView(props: Props) {
             <PeekOverviewIssueProperties issueDetails={issueDetails} />
           </div>
           {/* divider */}
-          <div className="my-5 h-[1] w-full border-t border-custom-border-200" />
+          <div className="my-5 h-[1] w-full border-t border-subtle" />
           {/* issue activity/comments */}
           {canComment && (
             <div className="w-full pb-5">
diff --git a/apps/space/core/components/issues/reactions/issue-emoji-reactions.tsx b/apps/space/components/issues/reactions/issue-emoji-reactions.tsx
similarity index 96%
rename from apps/space/core/components/issues/reactions/issue-emoji-reactions.tsx
rename to apps/space/components/issues/reactions/issue-emoji-reactions.tsx
index 4f881595d..7727ec90b 100644
--- a/apps/space/core/components/issues/reactions/issue-emoji-reactions.tsx
+++ b/apps/space/components/issues/reactions/issue-emoji-reactions.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useMemo, useState } from "react";
 import { observer } from "mobx-react";
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
diff --git a/apps/space/core/components/issues/reactions/issue-vote-reactions.tsx b/apps/space/components/issues/reactions/issue-vote-reactions.tsx
similarity index 83%
rename from apps/space/core/components/issues/reactions/issue-vote-reactions.tsx
rename to apps/space/components/issues/reactions/issue-vote-reactions.tsx
index 43d2f8cbe..c41609317 100644
--- a/apps/space/core/components/issues/reactions/issue-vote-reactions.tsx
+++ b/apps/space/components/issues/reactions/issue-vote-reactions.tsx
@@ -1,4 +1,11 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useState } from "react";
+import { ArrowDown, ArrowUp } from "lucide-react";
 import { observer } from "mobx-react";
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
 // plane imports
@@ -99,17 +106,17 @@ export const IssueVotes = observer(function IssueVotes(props: TIssueVotes) {
             else router.push(`/?next_path=${pathName}?${queryParam}`);
           }}
           className={cn(
-            "flex items-center justify-center gap-x-1 overflow-hidden rounded border focus:outline-none bg-custom-background-100",
+            "flex items-center justify-center gap-x-1 overflow-hidden rounded-sm border hover:bg-layer-transparent-hover focus:outline-none",
             votingDimensions,
             {
-              "border-custom-primary-200 text-custom-primary-200": isUpVotedByUser,
-              "border-custom-border-300": !isUpVotedByUser,
+              "border-accent-strong-200 text-accent-secondary": isUpVotedByUser,
+              "border-strong": !isUpVotedByUser,
               "cursor-default": isInIframe,
             }
           )}
         >
-          <span className="material-symbols-rounded !m-0 !p-0 text-base">arrow_upward_alt</span>
-          <span className="text-sm font-normal transition-opacity ease-in-out">{allUpVotes.length}</span>
+          <ArrowUp className="size-3.5 shrink-0" />
+          <span className="text-13 font-regular transition-opacity ease-in-out">{allUpVotes.length}</span>
         </button>
       </Tooltip>
 
@@ -140,17 +147,17 @@ export const IssueVotes = observer(function IssueVotes(props: TIssueVotes) {
             else router.push(`/?next_path=${pathName}?${queryParam}`);
           }}
           className={cn(
-            "flex items-center justify-center gap-x-1 overflow-hidden rounded border focus:outline-none bg-custom-background-100",
+            "flex items-center justify-center gap-x-1 overflow-hidden rounded-sm border hover:bg-layer-transparent-hover focus:outline-none",
             votingDimensions,
             {
-              "border-red-600 text-red-600": isDownVotedByUser,
-              "border-custom-border-300": !isDownVotedByUser,
+              "border-danger-strong text-danger-primary": isDownVotedByUser,
+              "border-strong": !isDownVotedByUser,
               "cursor-default": isInIframe,
             }
           )}
         >
-          <span className="material-symbols-rounded !m-0 !p-0 text-base">arrow_downward_alt</span>
-          <span className="text-sm font-normal transition-opacity ease-in-out">{allDownVotes.length}</span>
+          <ArrowDown className="size-3.5 shrink-0" />
+          <span className="text-13 font-regular transition-opacity ease-in-out">{allDownVotes.length}</span>
         </button>
       </Tooltip>
     </div>
diff --git a/apps/space/core/components/ui/not-found.tsx b/apps/space/components/ui/not-found.tsx
similarity index 63%
rename from apps/space/core/components/ui/not-found.tsx
rename to apps/space/components/ui/not-found.tsx
index 37e0dc3b2..e3952f58c 100644
--- a/apps/space/core/components/ui/not-found.tsx
+++ b/apps/space/components/ui/not-found.tsx
@@ -1,17 +1,23 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // images
 import Image404 from "@/app/assets/404.svg?url";
 
 export function PageNotFound() {
   return (
-    <div className={`h-screen w-full overflow-hidden bg-custom-background-100`}>
+    <div className={`h-screen w-full overflow-hidden bg-surface-1`}>
       <div className="grid h-full place-items-center p-4">
         <div className="space-y-8 text-center">
           <div className="relative mx-auto h-60 w-60 lg:h-80 lg:w-80">
-            <img src={Image404} alt="404- Page not found" className="w-full h-full object-contain" />
+            <img src={Image404} alt="404- Page not found" className="h-full w-full object-contain" />
           </div>
           <div className="space-y-2">
-            <h3 className="text-lg font-semibold">Oops! Something went wrong.</h3>
-            <p className="text-sm text-custom-text-200">
+            <h3 className="text-16 font-semibold">Oops! Something went wrong.</h3>
+            <p className="text-13 text-secondary">
               Sorry, the page you are looking for cannot be found. It may have been removed, had its name changed, or is
               temporarily unavailable.
             </p>
diff --git a/apps/space/core/components/views/auth.tsx b/apps/space/components/views/auth.tsx
similarity index 51%
rename from apps/space/core/components/views/auth.tsx
rename to apps/space/components/views/auth.tsx
index 04b11626d..11591ea8c 100644
--- a/apps/space/core/components/views/auth.tsx
+++ b/apps/space/components/views/auth.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // components
 import { AuthRoot } from "@/components/account/auth-forms";
 import { PoweredBy } from "@/components/common/powered-by";
@@ -6,7 +12,7 @@ import { AuthHeader } from "./header";
 
 export function AuthView() {
   return (
-    <div className="relative z-10 flex flex-col items-center w-screen h-screen overflow-hidden overflow-y-auto pt-6 pb-10 px-8">
+    <div className="relative z-10 flex h-screen w-screen flex-col items-center overflow-hidden overflow-y-auto bg-surface-1 px-8 pt-6 pb-10">
       <AuthHeader />
       <AuthRoot />
       <PoweredBy />
diff --git a/apps/space/components/views/header.tsx b/apps/space/components/views/header.tsx
new file mode 100644
index 000000000..dc2dabed0
--- /dev/null
+++ b/apps/space/components/views/header.tsx
@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+import { Link } from "react-router";
+import { PlaneLockup } from "@plane/propel/icons";
+
+export function AuthHeader() {
+  return (
+    <div className="sticky top-0 flex w-full flex-shrink-0 items-center justify-between gap-6">
+      <Link to="/">
+        <PlaneLockup height={20} width={95} className="text-primary" />
+      </Link>
+    </div>
+  );
+}
diff --git a/apps/space/components/views/index.ts b/apps/space/components/views/index.ts
new file mode 100644
index 000000000..68908cdd4
--- /dev/null
+++ b/apps/space/components/views/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./auth";
diff --git a/apps/space/core/components/account/auth-forms/auth-banner.tsx b/apps/space/core/components/account/auth-forms/auth-banner.tsx
deleted file mode 100644
index 3ad6e775c..000000000
--- a/apps/space/core/components/account/auth-forms/auth-banner.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { Info } from "lucide-react";
-import { CloseIcon } from "@plane/propel/icons";
-// helpers
-import type { TAuthErrorInfo } from "@/helpers/authentication.helper";
-
-type TAuthBanner = {
-  bannerData: TAuthErrorInfo | undefined;
-  handleBannerData?: (bannerData: TAuthErrorInfo | undefined) => void;
-};
-
-export function AuthBanner(props: TAuthBanner) {
-  const { bannerData, handleBannerData } = props;
-
-  if (!bannerData) return <></>;
-  return (
-    <div className="relative flex items-center p-2 rounded-md gap-2 border border-custom-primary-100/50 bg-custom-primary-100/10">
-      <div className="w-4 h-4 flex-shrink-0 relative flex justify-center items-center">
-        <Info size={16} className="text-custom-primary-100" />
-      </div>
-      <div className="w-full text-sm font-medium text-custom-primary-100">{bannerData?.message}</div>
-      <div
-        className="relative ml-auto w-6 h-6 rounded-sm flex justify-center items-center transition-all cursor-pointer hover:bg-custom-primary-100/20 text-custom-primary-100/80"
-        onClick={() => handleBannerData && handleBannerData(undefined)}
-      >
-        <CloseIcon className="w-4 h-4 flex-shrink-0" />
-      </div>
-    </div>
-  );
-}
diff --git a/apps/space/core/components/account/auth-forms/index.ts b/apps/space/core/components/account/auth-forms/index.ts
deleted file mode 100644
index aa4ee6fd8..000000000
--- a/apps/space/core/components/account/auth-forms/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./auth-root";
diff --git a/apps/space/core/components/account/terms-and-conditions.tsx b/apps/space/core/components/account/terms-and-conditions.tsx
deleted file mode 100644
index 14e51ac63..000000000
--- a/apps/space/core/components/account/terms-and-conditions.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import Link from "next/link";
-
-type Props = {
-  isSignUp?: boolean;
-};
-
-export function TermsAndConditions(props: Props) {
-  const { isSignUp = false } = props;
-  return (
-    <span className="flex items-center justify-center py-6">
-      <p className="text-center text-sm text-custom-text-200 whitespace-pre-line">
-        {isSignUp ? "By creating an account" : "By signing in"}, you agree to our{" \n"}
-        <Link href="https://plane.so/legals/terms-and-conditions" target="_blank" rel="noopener noreferrer">
-          <span className="text-sm font-medium underline hover:cursor-pointer">Terms of Service</span>
-        </Link>{" "}
-        and{" "}
-        <Link href="https://plane.so/legals/privacy-policy" target="_blank" rel="noopener noreferrer">
-          <span className="text-sm font-medium underline hover:cursor-pointer">Privacy Policy</span>
-        </Link>
-        {"."}
-      </p>
-    </span>
-  );
-}
diff --git a/apps/space/core/components/editor/embeds/mentions/index.ts b/apps/space/core/components/editor/embeds/mentions/index.ts
deleted file mode 100644
index 1efe34c51..000000000
--- a/apps/space/core/components/editor/embeds/mentions/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./root";
diff --git a/apps/space/core/components/editor/embeds/mentions/root.tsx b/apps/space/core/components/editor/embeds/mentions/root.tsx
deleted file mode 100644
index 7b1f7f718..000000000
--- a/apps/space/core/components/editor/embeds/mentions/root.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-// plane web imports
-import type { TEditorMentionComponentProps } from "@/plane-web/components/editor/embeds/mentions";
-import { EditorAdditionalMentionsRoot } from "@/plane-web/components/editor/embeds/mentions";
-// local components
-import { EditorUserMention } from "./user";
-
-export function EditorMentionsRoot(props: TEditorMentionComponentProps) {
-  const { entity_identifier, entity_name } = props;
-
-  switch (entity_name) {
-    case "user_mention":
-      return <EditorUserMention id={entity_identifier} />;
-    default:
-      return <EditorAdditionalMentionsRoot {...props} />;
-  }
-}
diff --git a/apps/space/core/components/issues/filters/applied-filters/priority.tsx b/apps/space/core/components/issues/filters/applied-filters/priority.tsx
deleted file mode 100644
index afa5f7d0d..000000000
--- a/apps/space/core/components/issues/filters/applied-filters/priority.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import { CloseIcon, PriorityIcon } from "@plane/propel/icons";
-import type { TIssuePriorities } from "@plane/propel/icons";
-
-type Props = {
-  handleRemove: (val: string) => void;
-  values: TIssuePriorities[];
-};
-
-export function AppliedPriorityFilters(props: Props) {
-  const { handleRemove, values } = props;
-
-  return (
-    <>
-      {values &&
-        values.length > 0 &&
-        values.map((priority) => (
-          <div key={priority} className="flex items-center gap-1 rounded bg-custom-background-80 p-1 text-xs">
-            <PriorityIcon priority={priority} className={`h-3 w-3`} />
-            {priority}
-            <button
-              type="button"
-              className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
-              onClick={() => handleRemove(priority)}
-            >
-              <CloseIcon height={10} width={10} strokeWidth={2} />
-            </button>
-          </div>
-        ))}
-    </>
-  );
-}
diff --git a/apps/space/core/components/issues/filters/helpers/filter-option.tsx b/apps/space/core/components/issues/filters/helpers/filter-option.tsx
deleted file mode 100644
index 1787e1941..000000000
--- a/apps/space/core/components/issues/filters/helpers/filter-option.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import React from "react";
-// lucide icons
-import { Check } from "lucide-react";
-
-type Props = {
-  icon?: React.ReactNode;
-  isChecked: boolean;
-  title: React.ReactNode;
-  onClick?: () => void;
-  multiple?: boolean;
-};
-
-export function FilterOption(props: Props) {
-  const { icon, isChecked, multiple = true, onClick, title } = props;
-
-  return (
-    <button
-      type="button"
-      className="flex w-full items-center gap-2 rounded p-1.5 hover:bg-custom-background-80"
-      onClick={onClick}
-    >
-      <div
-        className={`grid h-3 w-3 flex-shrink-0 place-items-center border bg-custom-background-90 ${
-          isChecked ? "border-custom-primary-100 bg-custom-primary-100 text-white" : "border-custom-border-300"
-        } ${multiple ? "rounded-sm" : "rounded-full"}`}
-      >
-        {isChecked && <Check size={10} strokeWidth={3} />}
-      </div>
-      <div className="flex items-center gap-2 truncate">
-        {icon && <div className="grid w-5 flex-shrink-0 place-items-center">{icon}</div>}
-        <div className="flex-grow truncate text-xs text-custom-text-200">{title}</div>
-      </div>
-    </button>
-  );
-}
diff --git a/apps/space/core/components/issues/filters/index.ts b/apps/space/core/components/issues/filters/index.ts
deleted file mode 100644
index 1efe34c51..000000000
--- a/apps/space/core/components/issues/filters/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./root";
diff --git a/apps/space/core/components/issues/issue-layouts/index.ts b/apps/space/core/components/issues/issue-layouts/index.ts
deleted file mode 100644
index 1efe34c51..000000000
--- a/apps/space/core/components/issues/issue-layouts/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./root";
diff --git a/apps/space/core/components/issues/issue-layouts/kanban/headers/group-by-card.tsx b/apps/space/core/components/issues/issue-layouts/kanban/headers/group-by-card.tsx
deleted file mode 100644
index 9b5feb94c..000000000
--- a/apps/space/core/components/issues/issue-layouts/kanban/headers/group-by-card.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import { observer } from "mobx-react";
-import { Circle } from "lucide-react";
-// types
-import type { TIssueGroupByOptions } from "@plane/types";
-
-interface IHeaderGroupByCard {
-  groupBy: TIssueGroupByOptions | undefined;
-  icon?: React.ReactNode;
-  title: string;
-  count: number;
-}
-
-export const HeaderGroupByCard = observer(function HeaderGroupByCard(props: IHeaderGroupByCard) {
-  const { icon, title, count } = props;
-
-  return (
-    <>
-      <div className={`relative flex flex-shrink-0 gap-2 p-1.5 w-full flex-row items-center`}>
-        <div className="flex h-[20px] w-[20px] flex-shrink-0 items-center justify-center overflow-hidden rounded-sm">
-          {icon ? icon : <Circle width={14} strokeWidth={2} />}
-        </div>
-
-        <div className={`relative flex items-center gap-1 w-full flex-row overflow-hidden`}>
-          <div className={`line-clamp-1 inline-block overflow-hidden truncate font-medium text-custom-text-100`}>
-            {title}
-          </div>
-          <div className={`flex-shrink-0 text-sm font-medium text-custom-text-300 pl-2`}>{count || 0}</div>
-        </div>
-      </div>
-    </>
-  );
-});
diff --git a/apps/space/core/components/issues/issue-layouts/list/headers/group-by-card.tsx b/apps/space/core/components/issues/issue-layouts/list/headers/group-by-card.tsx
deleted file mode 100644
index 8ea5d3b82..000000000
--- a/apps/space/core/components/issues/issue-layouts/list/headers/group-by-card.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import { observer } from "mobx-react";
-import { CircleDashed } from "lucide-react";
-
-interface IHeaderGroupByCard {
-  groupID: string;
-  icon?: React.ReactNode;
-  title: string;
-  count: number;
-  toggleListGroup: (id: string) => void;
-}
-
-export const HeaderGroupByCard = observer(function HeaderGroupByCard(props: IHeaderGroupByCard) {
-  const { groupID, icon, title, count, toggleListGroup } = props;
-
-  return (
-    <>
-      <div
-        className="group/list-header relative w-full flex-shrink-0 flex items-center gap-2 py-1.5"
-        onClick={() => toggleListGroup(groupID)}
-      >
-        <div className="flex-shrink-0 grid place-items-center overflow-hidden">
-          {icon ?? <CircleDashed className="size-3.5" strokeWidth={2} />}
-        </div>
-
-        <div className="relative flex w-full flex-row items-center gap-1 overflow-hidden cursor-pointer">
-          <div className="inline-block line-clamp-1 truncate font-medium text-custom-text-100">{title}</div>
-          <div className="pl-2 text-sm font-medium text-custom-text-300">{count || 0}</div>
-        </div>
-      </div>
-    </>
-  );
-});
diff --git a/apps/space/core/components/issues/navbar/index.ts b/apps/space/core/components/issues/navbar/index.ts
deleted file mode 100644
index 1efe34c51..000000000
--- a/apps/space/core/components/issues/navbar/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./root";
diff --git a/apps/space/core/components/issues/peek-overview/index.ts b/apps/space/core/components/issues/peek-overview/index.ts
deleted file mode 100644
index eec9d1e67..000000000
--- a/apps/space/core/components/issues/peek-overview/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./layout";
diff --git a/apps/space/core/components/ui/icon.tsx b/apps/space/core/components/ui/icon.tsx
deleted file mode 100644
index 39d10b2b1..000000000
--- a/apps/space/core/components/ui/icon.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import React from "react";
-
-type Props = {
-  iconName: string;
-  className?: string;
-};
-
-export function Icon({ iconName, className = "" }: Props) {
-  return <span className={`material-symbols-rounded text-sm font-light leading-5 ${className}`}>{iconName}</span>;
-}
diff --git a/apps/space/core/components/ui/index.ts b/apps/space/core/components/ui/index.ts
deleted file mode 100644
index b975409af..000000000
--- a/apps/space/core/components/ui/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./icon";
diff --git a/apps/space/core/components/views/header.tsx b/apps/space/core/components/views/header.tsx
deleted file mode 100644
index 9acbd5868..000000000
--- a/apps/space/core/components/views/header.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import React from "react";
-import Link from "next/link";
-import { PlaneLockup } from "@plane/propel/icons";
-
-export function AuthHeader() {
-  return (
-    <div className="flex items-center justify-between gap-6 w-full flex-shrink-0 sticky top-0">
-      <Link href="/">
-        <PlaneLockup height={20} width={95} className="text-custom-text-100" />
-      </Link>
-    </div>
-  );
-}
diff --git a/apps/space/core/components/views/index.ts b/apps/space/core/components/views/index.ts
deleted file mode 100644
index 97ccf7649..000000000
--- a/apps/space/core/components/views/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./auth";
diff --git a/apps/space/core/hooks/store/publish/index.ts b/apps/space/core/hooks/store/publish/index.ts
deleted file mode 100644
index a7b42ad5b..000000000
--- a/apps/space/core/hooks/store/publish/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from "./use-publish-list";
-export * from "./use-publish";
diff --git a/apps/space/core/lib/b-progress/index.tsx b/apps/space/core/lib/b-progress/index.tsx
deleted file mode 100644
index 7b531da2b..000000000
--- a/apps/space/core/lib/b-progress/index.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./AppProgressBar";
diff --git a/apps/space/ee/components/issue-layouts/root.tsx b/apps/space/ee/components/issue-layouts/root.tsx
deleted file mode 100644
index d785c5c11..000000000
--- a/apps/space/ee/components/issue-layouts/root.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export * from "ce/components/issue-layouts/root";
diff --git a/apps/space/ee/components/navbar/index.tsx b/apps/space/ee/components/navbar/index.tsx
deleted file mode 100644
index 960fa2507..000000000
--- a/apps/space/ee/components/navbar/index.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export * from "ce/components/navbar";
diff --git a/apps/space/ee/hooks/store/index.ts b/apps/space/ee/hooks/store/index.ts
deleted file mode 100644
index 6ce80b4fb..000000000
--- a/apps/space/ee/hooks/store/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "ce/hooks/store";
diff --git a/apps/space/ee/store/root.store.ts b/apps/space/ee/store/root.store.ts
deleted file mode 100644
index c514c4c25..000000000
--- a/apps/space/ee/store/root.store.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "ce/store/root.store";
diff --git a/apps/space/helpers/authentication.helper.tsx b/apps/space/helpers/authentication.helper.tsx
index 9981f7c37..8104a1d8f 100644
--- a/apps/space/helpers/authentication.helper.tsx
+++ b/apps/space/helpers/authentication.helper.tsx
@@ -1,4 +1,10 @@
-import Link from "next/link";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { Link } from "react-router";
 // helpers
 import { SUPPORT_EMAIL } from "@plane/constants";
 
@@ -123,8 +129,8 @@ const errorCodeMessages: {
       <div>
         Your account is already registered.&nbsp;
         <Link
-          className="underline underline-offset-4 font-medium hover:font-bold transition-all"
-          href={`/sign-in${email ? `?email=${encodeURIComponent(email)}` : ``}`}
+          className="font-medium underline underline-offset-4 transition-all hover:font-bold"
+          to={`/sign-in${email ? `?email=${encodeURIComponent(email)}` : ``}`}
         >
           Sign In
         </Link>
@@ -165,8 +171,8 @@ const errorCodeMessages: {
       <div>
         No account found.&nbsp;
         <Link
-          className="underline underline-offset-4 font-medium hover:font-bold transition-all"
-          href={`/${email ? `?email=${encodeURIComponent(email)}` : ``}`}
+          className="font-medium underline underline-offset-4 transition-all hover:font-bold"
+          to={`/${email ? `?email=${encodeURIComponent(email)}` : ``}`}
         >
           Create one
         </Link>
@@ -311,7 +317,7 @@ const errorCodeMessages: {
     message: () => (
       <div>
         Admin user already exists.&nbsp;
-        <Link className="underline underline-offset-4 font-medium hover:font-bold transition-all" href={`/admin`}>
+        <Link className="font-medium underline underline-offset-4 transition-all hover:font-bold" to={`/admin`}>
           Sign In
         </Link>
         &nbsp;now.
@@ -323,7 +329,7 @@ const errorCodeMessages: {
     message: () => (
       <div>
         Admin user does not exist.&nbsp;
-        <Link className="underline underline-offset-4 font-medium hover:font-bold transition-all" href={`/admin`}>
+        <Link className="font-medium underline underline-offset-4 transition-all hover:font-bold" to={`/admin`}>
           Sign In
         </Link>
         &nbsp;now.
diff --git a/apps/space/helpers/common.helper.ts b/apps/space/helpers/common.helper.ts
index 1f2c22b02..f11f634e6 100644
--- a/apps/space/helpers/common.helper.ts
+++ b/apps/space/helpers/common.helper.ts
@@ -1,2 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export const resolveGeneralTheme = (resolvedTheme: string | undefined) =>
   resolvedTheme?.includes("light") ? "light" : resolvedTheme?.includes("dark") ? "dark" : "system";
diff --git a/apps/space/helpers/date-time.helper.ts b/apps/space/helpers/date-time.helper.ts
index f0bb64892..eb6ce9b3b 100644
--- a/apps/space/helpers/date-time.helper.ts
+++ b/apps/space/helpers/date-time.helper.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { format, isValid } from "date-fns";
 import { isNumber } from "lodash-es";
 
diff --git a/apps/space/helpers/editor.helper.ts b/apps/space/helpers/editor.helper.ts
index f8fbd1158..26c787dc5 100644
--- a/apps/space/helpers/editor.helper.ts
+++ b/apps/space/helpers/editor.helper.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // plane imports
 import { MAX_FILE_SIZE } from "@plane/constants";
 import type { TFileHandler } from "@plane/editor";
diff --git a/apps/space/helpers/emoji.helper.tsx b/apps/space/helpers/emoji.helper.tsx
index 1619d6c0d..12d359a73 100644
--- a/apps/space/helpers/emoji.helper.tsx
+++ b/apps/space/helpers/emoji.helper.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export const renderEmoji = (
   emoji:
     | string
@@ -10,7 +16,7 @@ export const renderEmoji = (
 
   if (typeof emoji === "object")
     return (
-      <span style={{ color: emoji.color }} className="material-symbols-rounded text-lg">
+      <span style={{ color: emoji.color }} className="material-symbols-rounded text-16">
         {emoji.name}
       </span>
     );
diff --git a/apps/space/helpers/file.helper.ts b/apps/space/helpers/file.helper.ts
index 0d396bbd2..1a5947e82 100644
--- a/apps/space/helpers/file.helper.ts
+++ b/apps/space/helpers/file.helper.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // plane imports
 import { API_BASE_URL } from "@plane/constants";
 
diff --git a/apps/space/helpers/issue.helper.ts b/apps/space/helpers/issue.helper.ts
index 7971b4a51..aa110349c 100644
--- a/apps/space/helpers/issue.helper.ts
+++ b/apps/space/helpers/issue.helper.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { differenceInCalendarDays } from "date-fns/differenceInCalendarDays";
 // plane internal
 import { STATE_GROUPS } from "@plane/constants";
diff --git a/apps/space/helpers/query-param-generator.ts b/apps/space/helpers/query-param-generator.ts
index 888462f1b..6f2ffcd2c 100644
--- a/apps/space/helpers/query-param-generator.ts
+++ b/apps/space/helpers/query-param-generator.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 type TQueryParamValue = string | string[] | boolean | number | bigint | undefined | null;
 
 export const queryParamGenerator = (queryObject: Record<string, TQueryParamValue>) => {
diff --git a/apps/space/helpers/state.helper.ts b/apps/space/helpers/state.helper.ts
index f5a8a88e5..8a701dc86 100644
--- a/apps/space/helpers/state.helper.ts
+++ b/apps/space/helpers/state.helper.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { STATE_GROUPS } from "@plane/constants";
 import type { IState } from "@plane/types";
 
diff --git a/apps/space/helpers/string.helper.ts b/apps/space/helpers/string.helper.ts
index 3eec9b9a1..674a4bac9 100644
--- a/apps/space/helpers/string.helper.ts
+++ b/apps/space/helpers/string.helper.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export const addSpaceIfCamelCase = (str: string) => str.replace(/([a-z])([A-Z])/g, "$1 $2");
 
 const fallbackCopyTextToClipboard = (text: string) => {
diff --git a/apps/space/hooks/oauth/core.tsx b/apps/space/hooks/oauth/core.tsx
new file mode 100644
index 000000000..63a18cc2e
--- /dev/null
+++ b/apps/space/hooks/oauth/core.tsx
@@ -0,0 +1,88 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// plane imports
+import { useSearchParams } from "next/navigation";
+import { useTheme } from "next-themes";
+import { API_BASE_URL } from "@plane/constants";
+import type { TOAuthConfigs, TOAuthOption } from "@plane/types";
+// assets
+import giteaLogo from "@/app/assets/logos/gitea-logo.svg?url";
+import githubLightLogo from "@/app/assets/logos/github-black.png?url";
+import githubDarkLogo from "@/app/assets/logos/github-dark.svg?url";
+import gitlabLogo from "@/app/assets/logos/gitlab-logo.svg?url";
+import googleLogo from "@/app/assets/logos/google-logo.svg?url";
+// hooks
+import { useInstance } from "@/hooks/store/use-instance";
+
+export const useCoreOAuthConfig = (oauthActionText: string): TOAuthConfigs => {
+  //router
+  const searchParams = useSearchParams();
+  // query params
+  const next_path = searchParams.get("next_path");
+  // theme
+  const { resolvedTheme } = useTheme();
+  // store hooks
+  const { config } = useInstance();
+  // derived values
+  const isOAuthEnabled =
+    (config &&
+      (config?.is_google_enabled ||
+        config?.is_github_enabled ||
+        config?.is_gitlab_enabled ||
+        config?.is_gitea_enabled)) ||
+    false;
+  const oAuthOptions: TOAuthOption[] = [
+    {
+      id: "google",
+      text: `${oauthActionText} with Google`,
+      icon: <img src={googleLogo} height={18} width={18} alt="Google Logo" />,
+      onClick: () => {
+        window.location.assign(`${API_BASE_URL}/auth/google/${next_path ? `?next_path=${next_path}` : ``}`);
+      },
+      enabled: config?.is_google_enabled,
+    },
+    {
+      id: "github",
+      text: `${oauthActionText} with GitHub`,
+      icon: (
+        <img
+          src={resolvedTheme === "dark" ? githubLightLogo : githubDarkLogo}
+          height={18}
+          width={18}
+          alt="GitHub Logo"
+        />
+      ),
+      onClick: () => {
+        window.location.assign(`${API_BASE_URL}/auth/github/${next_path ? `?next_path=${next_path}` : ``}`);
+      },
+      enabled: config?.is_github_enabled,
+    },
+    {
+      id: "gitlab",
+      text: `${oauthActionText} with GitLab`,
+      icon: <img src={gitlabLogo} height={18} width={18} alt="GitLab Logo" />,
+      onClick: () => {
+        window.location.assign(`${API_BASE_URL}/auth/gitlab/${next_path ? `?next_path=${next_path}` : ``}`);
+      },
+      enabled: config?.is_gitlab_enabled,
+    },
+    {
+      id: "gitea",
+      text: `${oauthActionText} with Gitea`,
+      icon: <img src={giteaLogo} height={18} width={18} alt="Gitea Logo" />,
+      onClick: () => {
+        window.location.assign(`${API_BASE_URL}/auth/gitea/${next_path ? `?next_path=${next_path}` : ``}`);
+      },
+      enabled: config?.is_gitea_enabled,
+    },
+  ];
+
+  return {
+    isOAuthEnabled,
+    oAuthOptions,
+  };
+};
diff --git a/apps/space/hooks/oauth/extended.tsx b/apps/space/hooks/oauth/extended.tsx
new file mode 100644
index 000000000..9e7ca61f1
--- /dev/null
+++ b/apps/space/hooks/oauth/extended.tsx
@@ -0,0 +1,13 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// plane imports
+import type { TOAuthConfigs } from "@plane/types";
+
+export const useExtendedOAuthConfig = (_oauthActionText: string): TOAuthConfigs => ({
+  isOAuthEnabled: false,
+  oAuthOptions: [],
+});
diff --git a/apps/space/hooks/oauth/index.ts b/apps/space/hooks/oauth/index.ts
new file mode 100644
index 000000000..e88c74399
--- /dev/null
+++ b/apps/space/hooks/oauth/index.ts
@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// plane imports
+import type { TOAuthConfigs } from "@plane/types";
+// local imports
+import { useCoreOAuthConfig } from "./core";
+import { useExtendedOAuthConfig } from "./extended";
+
+export const useOAuthConfig = (oauthActionText: string = "Continue"): TOAuthConfigs => {
+  const coreOAuthConfig = useCoreOAuthConfig(oauthActionText);
+  const extendedOAuthConfig = useExtendedOAuthConfig(oauthActionText);
+  return {
+    isOAuthEnabled: coreOAuthConfig.isOAuthEnabled || extendedOAuthConfig.isOAuthEnabled,
+    oAuthOptions: [...coreOAuthConfig.oAuthOptions, ...extendedOAuthConfig.oAuthOptions],
+  };
+};
diff --git a/apps/space/hooks/store/publish/index.ts b/apps/space/hooks/store/publish/index.ts
new file mode 100644
index 000000000..6b565416f
--- /dev/null
+++ b/apps/space/hooks/store/publish/index.ts
@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./use-publish-list";
+export * from "./use-publish";
diff --git a/apps/space/core/hooks/store/publish/use-publish-list.ts b/apps/space/hooks/store/publish/use-publish-list.ts
similarity index 72%
rename from apps/space/core/hooks/store/publish/use-publish-list.ts
rename to apps/space/hooks/store/publish/use-publish-list.ts
index 94ad0080e..8a731bd42 100644
--- a/apps/space/core/hooks/store/publish/use-publish-list.ts
+++ b/apps/space/hooks/store/publish/use-publish-list.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useContext } from "react";
 // lib
 import { StoreContext } from "@/lib/store-provider";
diff --git a/apps/space/core/hooks/store/publish/use-publish.ts b/apps/space/hooks/store/publish/use-publish.ts
similarity index 73%
rename from apps/space/core/hooks/store/publish/use-publish.ts
rename to apps/space/hooks/store/publish/use-publish.ts
index 957e9fc70..50ea52776 100644
--- a/apps/space/core/hooks/store/publish/use-publish.ts
+++ b/apps/space/hooks/store/publish/use-publish.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useContext } from "react";
 // lib
 import { StoreContext } from "@/lib/store-provider";
diff --git a/apps/space/core/hooks/store/use-cycle.ts b/apps/space/hooks/store/use-cycle.ts
similarity index 70%
rename from apps/space/core/hooks/store/use-cycle.ts
rename to apps/space/hooks/store/use-cycle.ts
index eea623ee8..4b7e9e4d5 100644
--- a/apps/space/core/hooks/store/use-cycle.ts
+++ b/apps/space/hooks/store/use-cycle.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useContext } from "react";
 // lib
 import { StoreContext } from "@/lib/store-provider";
diff --git a/apps/space/core/hooks/store/use-instance.ts b/apps/space/hooks/store/use-instance.ts
similarity index 71%
rename from apps/space/core/hooks/store/use-instance.ts
rename to apps/space/hooks/store/use-instance.ts
index 6dbfda6a1..3f783a90e 100644
--- a/apps/space/core/hooks/store/use-instance.ts
+++ b/apps/space/hooks/store/use-instance.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useContext } from "react";
 // lib
 import { StoreContext } from "@/lib/store-provider";
diff --git a/apps/space/core/hooks/store/use-issue-details.tsx b/apps/space/hooks/store/use-issue-details.tsx
similarity index 72%
rename from apps/space/core/hooks/store/use-issue-details.tsx
rename to apps/space/hooks/store/use-issue-details.tsx
index 6456a73c8..a30403e1f 100644
--- a/apps/space/core/hooks/store/use-issue-details.tsx
+++ b/apps/space/hooks/store/use-issue-details.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useContext } from "react";
 // lib
 import { StoreContext } from "@/lib/store-provider";
diff --git a/apps/space/core/hooks/store/use-issue-filter.ts b/apps/space/hooks/store/use-issue-filter.ts
similarity index 72%
rename from apps/space/core/hooks/store/use-issue-filter.ts
rename to apps/space/hooks/store/use-issue-filter.ts
index bd9043fd7..1f60bae99 100644
--- a/apps/space/core/hooks/store/use-issue-filter.ts
+++ b/apps/space/hooks/store/use-issue-filter.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useContext } from "react";
 // lib
 import { StoreContext } from "@/lib/store-provider";
diff --git a/apps/space/core/hooks/store/use-issue.ts b/apps/space/hooks/store/use-issue.ts
similarity index 70%
rename from apps/space/core/hooks/store/use-issue.ts
rename to apps/space/hooks/store/use-issue.ts
index 0061c760a..808117e05 100644
--- a/apps/space/core/hooks/store/use-issue.ts
+++ b/apps/space/hooks/store/use-issue.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useContext } from "react";
 // lib
 import { StoreContext } from "@/lib/store-provider";
diff --git a/apps/space/core/hooks/store/use-label.ts b/apps/space/hooks/store/use-label.ts
similarity index 70%
rename from apps/space/core/hooks/store/use-label.ts
rename to apps/space/hooks/store/use-label.ts
index fd004f587..f7c261839 100644
--- a/apps/space/core/hooks/store/use-label.ts
+++ b/apps/space/hooks/store/use-label.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useContext } from "react";
 // lib
 import { StoreContext } from "@/lib/store-provider";
diff --git a/apps/space/core/hooks/store/use-member.ts b/apps/space/hooks/store/use-member.ts
similarity index 71%
rename from apps/space/core/hooks/store/use-member.ts
rename to apps/space/hooks/store/use-member.ts
index 334f852c8..82443db77 100644
--- a/apps/space/core/hooks/store/use-member.ts
+++ b/apps/space/hooks/store/use-member.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useContext } from "react";
 // lib
 import { StoreContext } from "@/lib/store-provider";
diff --git a/apps/space/core/hooks/store/use-module.ts b/apps/space/hooks/store/use-module.ts
similarity index 71%
rename from apps/space/core/hooks/store/use-module.ts
rename to apps/space/hooks/store/use-module.ts
index 1ee7a7c4f..c2d5768da 100644
--- a/apps/space/core/hooks/store/use-module.ts
+++ b/apps/space/hooks/store/use-module.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useContext } from "react";
 // lib
 import { StoreContext } from "@/lib/store-provider";
diff --git a/apps/space/core/hooks/store/use-state.ts b/apps/space/hooks/store/use-state.ts
similarity index 70%
rename from apps/space/core/hooks/store/use-state.ts
rename to apps/space/hooks/store/use-state.ts
index b7ada164b..8f239777d 100644
--- a/apps/space/core/hooks/store/use-state.ts
+++ b/apps/space/hooks/store/use-state.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useContext } from "react";
 // lib
 import { StoreContext } from "@/lib/store-provider";
diff --git a/apps/space/core/hooks/store/use-user-profile.ts b/apps/space/hooks/store/use-user-profile.ts
similarity index 71%
rename from apps/space/core/hooks/store/use-user-profile.ts
rename to apps/space/hooks/store/use-user-profile.ts
index 37d3571f3..ec53da955 100644
--- a/apps/space/core/hooks/store/use-user-profile.ts
+++ b/apps/space/hooks/store/use-user-profile.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useContext } from "react";
 // lib
 import { StoreContext } from "@/lib/store-provider";
diff --git a/apps/space/core/hooks/store/use-user.ts b/apps/space/hooks/store/use-user.ts
similarity index 70%
rename from apps/space/core/hooks/store/use-user.ts
rename to apps/space/hooks/store/use-user.ts
index 93e1cad9d..b3af67a51 100644
--- a/apps/space/core/hooks/store/use-user.ts
+++ b/apps/space/hooks/store/use-user.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useContext } from "react";
 // lib
 import { StoreContext } from "@/lib/store-provider";
diff --git a/apps/space/core/hooks/use-clipboard-write-permission.tsx b/apps/space/hooks/use-clipboard-write-permission.tsx
similarity index 82%
rename from apps/space/core/hooks/use-clipboard-write-permission.tsx
rename to apps/space/hooks/use-clipboard-write-permission.tsx
index 687a574c2..8b1bf16ac 100644
--- a/apps/space/core/hooks/use-clipboard-write-permission.tsx
+++ b/apps/space/hooks/use-clipboard-write-permission.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useState, useEffect } from "react";
 
 const useClipboardWritePermission = () => {
diff --git a/apps/space/ce/hooks/use-editor-flagging.ts b/apps/space/hooks/use-editor-flagging.ts
similarity index 69%
rename from apps/space/ce/hooks/use-editor-flagging.ts
rename to apps/space/hooks/use-editor-flagging.ts
index 9e80c35aa..88e82f769 100644
--- a/apps/space/ce/hooks/use-editor-flagging.ts
+++ b/apps/space/hooks/use-editor-flagging.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // editor
 import type { TExtensions } from "@plane/editor";
 
@@ -19,7 +25,7 @@ export type TEditorFlaggingHookReturnType = {
 /**
  * @description extensions disabled in various editors
  */
-export const useEditorFlagging = (anchor: string): TEditorFlaggingHookReturnType => ({
+export const useEditorFlagging = (_anchor: string): TEditorFlaggingHookReturnType => ({
   document: {
     disabled: [],
     flagged: [],
diff --git a/apps/space/core/hooks/use-intersection-observer.tsx b/apps/space/hooks/use-intersection-observer.tsx
similarity index 88%
rename from apps/space/core/hooks/use-intersection-observer.tsx
rename to apps/space/hooks/use-intersection-observer.tsx
index e2f2fd71e..4cf9a270a 100644
--- a/apps/space/core/hooks/use-intersection-observer.tsx
+++ b/apps/space/hooks/use-intersection-observer.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { RefObject } from "react";
 import { useEffect } from "react";
 
diff --git a/apps/space/core/hooks/use-is-in-iframe.tsx b/apps/space/hooks/use-is-in-iframe.tsx
similarity index 68%
rename from apps/space/core/hooks/use-is-in-iframe.tsx
rename to apps/space/hooks/use-is-in-iframe.tsx
index 2b5823644..3fb5b5575 100644
--- a/apps/space/core/hooks/use-is-in-iframe.tsx
+++ b/apps/space/hooks/use-is-in-iframe.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useState, useEffect } from "react";
 
 const useIsInIframe = () => {
diff --git a/apps/space/core/hooks/use-mention.tsx b/apps/space/hooks/use-mention.tsx
similarity index 86%
rename from apps/space/core/hooks/use-mention.tsx
rename to apps/space/hooks/use-mention.tsx
index fc66eda1c..e54ff3e77 100644
--- a/apps/space/core/hooks/use-mention.tsx
+++ b/apps/space/hooks/use-mention.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useRef, useEffect } from "react";
 import useSWR from "swr";
 // plane imports
diff --git a/apps/space/core/hooks/use-parse-editor-content.ts b/apps/space/hooks/use-parse-editor-content.ts
similarity index 93%
rename from apps/space/core/hooks/use-parse-editor-content.ts
rename to apps/space/hooks/use-parse-editor-content.ts
index e540aad63..ec13194ea 100644
--- a/apps/space/core/hooks/use-parse-editor-content.ts
+++ b/apps/space/hooks/use-parse-editor-content.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useCallback } from "react";
 // helpers
 import type { TCustomComponentsMetaData } from "@plane/utils";
diff --git a/apps/space/core/hooks/use-timer.tsx b/apps/space/hooks/use-timer.tsx
similarity index 71%
rename from apps/space/core/hooks/use-timer.tsx
rename to apps/space/hooks/use-timer.tsx
index 1edf4931a..c663d8007 100644
--- a/apps/space/core/hooks/use-timer.tsx
+++ b/apps/space/hooks/use-timer.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useState, useEffect } from "react";
 
 const TIMER = 30;
diff --git a/apps/admin/core/lib/b-progress/AppProgressBar.tsx b/apps/space/lib/b-progress/AppProgressBar.tsx
similarity index 95%
rename from apps/admin/core/lib/b-progress/AppProgressBar.tsx
rename to apps/space/lib/b-progress/AppProgressBar.tsx
index 7ad93fc11..e4362581d 100644
--- a/apps/admin/core/lib/b-progress/AppProgressBar.tsx
+++ b/apps/space/lib/b-progress/AppProgressBar.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useEffect, useRef } from "react";
 import { BProgress } from "@bprogress/core";
 import { useNavigation } from "react-router";
diff --git a/apps/space/lib/b-progress/index.tsx b/apps/space/lib/b-progress/index.tsx
new file mode 100644
index 000000000..592017255
--- /dev/null
+++ b/apps/space/lib/b-progress/index.tsx
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./AppProgressBar";
diff --git a/apps/space/core/lib/instance-provider.tsx b/apps/space/lib/instance-provider.tsx
similarity index 69%
rename from apps/space/core/lib/instance-provider.tsx
rename to apps/space/lib/instance-provider.tsx
index 4d422df72..bd18f8164 100644
--- a/apps/space/core/lib/instance-provider.tsx
+++ b/apps/space/lib/instance-provider.tsx
@@ -1,5 +1,11 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
-import Link from "next/link";
+import { Link } from "react-router";
 import { useTheme } from "next-themes";
 import useSWR from "swr";
 // plane imports
@@ -35,7 +41,7 @@ export const InstanceProvider = observer(function InstanceProvider({ children }:
 
   if (!instance && !error)
     return (
-      <div className="flex items-center justify-center h-screen w-full">
+      <div className="flex h-screen w-full items-center justify-center">
         <LogoSpinner />
       </div>
     );
@@ -43,19 +49,19 @@ export const InstanceProvider = observer(function InstanceProvider({ children }:
   if (error) {
     return (
       <div className="relative">
-        <div className="h-screen w-full overflow-hidden overflow-y-auto flex flex-col">
-          <div className="container h-[110px] flex-shrink-0 mx-auto px-5 lg:px-0 flex items-center justify-between gap-5 z-50">
+        <div className="flex h-screen w-full flex-col overflow-hidden overflow-y-auto">
+          <div className="z-50 container mx-auto flex h-[110px] flex-shrink-0 items-center justify-between gap-5 px-5 lg:px-0">
             <div className="flex items-center gap-x-2 py-10">
-              <Link href={`${SPACE_BASE_PATH}/`}>
-                <PlaneLockup className="h-7 w-auto text-custom-text-100" />
+              <Link to={`${SPACE_BASE_PATH}/`}>
+                <PlaneLockup className="h-7 w-auto text-primary" />
               </Link>
             </div>
           </div>
           <div className="absolute inset-0 z-0">
-            <img src={patternBackground} className="w-screen h-full object-cover" alt="Plane background pattern" />
+            <img src={patternBackground} className="h-full w-screen object-cover" alt="Plane background pattern" />
           </div>
           <div className="relative z-10 flex-grow">
-            <div className="relative h-full w-full overflow-y-auto px-6 py-10 mx-auto flex justify-center items-center">
+            <div className="relative mx-auto flex h-full w-full items-center justify-center overflow-y-auto px-6 py-10">
               <InstanceFailureView />
             </div>
           </div>
diff --git a/apps/space/core/lib/store-provider.tsx b/apps/space/lib/store-provider.tsx
similarity index 83%
rename from apps/space/core/lib/store-provider.tsx
rename to apps/space/lib/store-provider.tsx
index e251909df..298759090 100644
--- a/apps/space/core/lib/store-provider.tsx
+++ b/apps/space/lib/store-provider.tsx
@@ -1,6 +1,12 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { createContext } from "react";
 // plane web store
-import { RootStore } from "@/plane-web/store/root.store";
+import { RootStore } from "@/store/root.store";
 
 let rootStore = new RootStore();
 
diff --git a/apps/space/core/lib/toast-provider.tsx b/apps/space/lib/toast-provider.tsx
similarity index 71%
rename from apps/space/core/lib/toast-provider.tsx
rename to apps/space/lib/toast-provider.tsx
index fc30bf1fa..420c80113 100644
--- a/apps/space/core/lib/toast-provider.tsx
+++ b/apps/space/lib/toast-provider.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useTheme } from "next-themes";
 // plane imports
 import { Toast } from "@plane/propel/toast";
diff --git a/apps/space/package.json b/apps/space/package.json
index 5442a46bc..4500152f7 100644
--- a/apps/space/package.json
+++ b/apps/space/package.json
@@ -1,6 +1,6 @@
 {
   "name": "space",
-  "version": "1.2.3",
+  "version": "1.3.0",
   "private": true,
   "license": "AGPL-3.0",
   "type": "module",
@@ -10,14 +10,17 @@
     "preview": "react-router build && PORT=3002 react-router-serve ./build/server/index.js",
     "start": "PORT=3002 react-router-serve ./build/server/index.js",
     "clean": "rm -rf .turbo && rm -rf .next && rm -rf .react-router && rm -rf node_modules && rm -rf dist && rm -rf build",
-    "check:lint": "eslint . --max-warnings=932",
+    "check:lint": "oxlint --max-warnings=676 .",
     "check:types": "react-router typegen && tsc --noEmit",
-    "check:format": "prettier --check .",
-    "fix:lint": "eslint . --fix --max-warnings=932",
-    "fix:format": "prettier --write ."
+    "check:format": "oxfmt --check .",
+    "fix:lint": "oxlint --fix .",
+    "fix:format": "oxfmt ."
   },
   "dependencies": {
     "@bprogress/core": "catalog:",
+    "@fontsource-variable/inter": "5.2.8",
+    "@fontsource/ibm-plex-mono": "5.2.7",
+    "@fontsource/material-symbols-rounded": "5.2.30",
     "@headlessui/react": "^1.7.19",
     "@plane/constants": "workspace:*",
     "@plane/editor": "workspace:*",
@@ -30,7 +33,6 @@
     "@popperjs/core": "^2.11.8",
     "@react-router/node": "catalog:",
     "@react-router/serve": "catalog:",
-    "@sentry/react-router": "catalog:",
     "axios": "catalog:",
     "clsx": "^2.0.0",
     "date-fns": "^4.1.0",
@@ -47,19 +49,19 @@
     "react-hook-form": "7.51.5",
     "react-popper": "^2.3.0",
     "react-router": "catalog:",
-    "react-router-dom": "catalog:",
     "swr": "catalog:",
     "uuid": "catalog:"
   },
   "devDependencies": {
-    "@dotenvx/dotenvx": "catalog:",
     "@plane/tailwind-config": "workspace:*",
     "@plane/typescript-config": "workspace:*",
     "@react-router/dev": "catalog:",
+    "@tailwindcss/typography": "0.5.19",
     "@types/lodash-es": "catalog:",
     "@types/node": "catalog:",
     "@types/react": "catalog:",
     "@types/react-dom": "catalog:",
+    "dotenv": "catalog:",
     "typescript": "catalog:",
     "vite": "catalog:",
     "vite-tsconfig-paths": "^5.1.4"
diff --git a/apps/space/postcss.config.cjs b/apps/space/postcss.config.cjs
deleted file mode 100644
index 8a677108f..000000000
--- a/apps/space/postcss.config.cjs
+++ /dev/null
@@ -1 +0,0 @@
-module.exports = require("@plane/tailwind-config/postcss.config.js");
diff --git a/apps/space/postcss.config.js b/apps/space/postcss.config.js
new file mode 100644
index 000000000..3ad28f15f
--- /dev/null
+++ b/apps/space/postcss.config.js
@@ -0,0 +1,3 @@
+import postcssConfig from "@plane/tailwind-config/postcss.config.js";
+
+export default postcssConfig;
diff --git a/apps/space/core/store/cycle.store.ts b/apps/space/store/cycle.store.ts
similarity index 81%
rename from apps/space/core/store/cycle.store.ts
rename to apps/space/store/cycle.store.ts
index 0f71d8841..13cb6950a 100644
--- a/apps/space/core/store/cycle.store.ts
+++ b/apps/space/store/cycle.store.ts
@@ -1,9 +1,15 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { action, makeObservable, observable, runInAction } from "mobx";
 // plane imports
 import { SitesCycleService } from "@plane/services";
 import type { TPublicCycle } from "@/types/cycle";
 // store
-import type { CoreRootStore } from "./root.store";
+import type { RootStore } from "./root.store";
 
 export interface ICycleStore {
   // observables
@@ -17,9 +23,9 @@ export interface ICycleStore {
 export class CycleStore implements ICycleStore {
   cycles: TPublicCycle[] | undefined = undefined;
   cycleService: SitesCycleService;
-  rootStore: CoreRootStore;
+  rootStore: RootStore;
 
-  constructor(_rootStore: CoreRootStore) {
+  constructor(_rootStore: RootStore) {
     makeObservable(this, {
       // observables
       cycles: observable,
diff --git a/apps/space/core/store/helpers/base-issues.store.ts b/apps/space/store/helpers/base-issues.store.ts
similarity index 98%
rename from apps/space/core/store/helpers/base-issues.store.ts
rename to apps/space/store/helpers/base-issues.store.ts
index 5c0ac6344..e0fdb564c 100644
--- a/apps/space/core/store/helpers/base-issues.store.ts
+++ b/apps/space/store/helpers/base-issues.store.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { concat, get, set, uniq, update } from "lodash-es";
 import { action, makeObservable, observable, runInAction } from "mobx";
 import { computedFn } from "mobx-utils";
@@ -17,7 +23,7 @@ import type {
 } from "@plane/types";
 // types
 import type { IIssue, TIssuesResponse } from "@/types/issue";
-import type { CoreRootStore } from "../root.store";
+import type { RootStore } from "../root.store";
 // constants
 // helpers
 
@@ -75,7 +81,7 @@ export abstract class BaseIssuesStore implements IBaseIssuesStore {
   // root store
   rootIssueStore;
 
-  constructor(_rootStore: CoreRootStore) {
+  constructor(_rootStore: RootStore) {
     makeObservable(this, {
       // observable
       loader: observable,
diff --git a/apps/space/core/store/helpers/filter.helpers.ts b/apps/space/store/helpers/filter.helpers.ts
similarity index 94%
rename from apps/space/core/store/helpers/filter.helpers.ts
rename to apps/space/store/helpers/filter.helpers.ts
index 342f1ee7b..8a0e45464 100644
--- a/apps/space/core/store/helpers/filter.helpers.ts
+++ b/apps/space/store/helpers/filter.helpers.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { EIssueGroupByToServerOptions, EServerGroupByToFilterOptions } from "@plane/constants";
 import type { IssuePaginationOptions, TIssueParams } from "@plane/types";
 
diff --git a/apps/space/core/store/instance.store.ts b/apps/space/store/instance.store.ts
similarity index 88%
rename from apps/space/core/store/instance.store.ts
rename to apps/space/store/instance.store.ts
index a1a49118d..37dc9318e 100644
--- a/apps/space/core/store/instance.store.ts
+++ b/apps/space/store/instance.store.ts
@@ -1,10 +1,16 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { set } from "lodash-es";
 import { observable, action, makeObservable, runInAction } from "mobx";
 // plane imports
 import { InstanceService } from "@plane/services";
 import type { IInstance, IInstanceConfig } from "@plane/types";
 // store
-import type { CoreRootStore } from "@/store/root.store";
+import type { RootStore } from "@/store/root.store";
 
 type TError = {
   status: string;
@@ -34,7 +40,7 @@ export class InstanceStore implements IInstanceStore {
   // services
   instanceService;
 
-  constructor(private store: CoreRootStore) {
+  constructor(private store: RootStore) {
     makeObservable(this, {
       // observable
       isLoading: observable.ref,
diff --git a/apps/space/core/store/issue-detail.store.ts b/apps/space/store/issue-detail.store.ts
similarity index 98%
rename from apps/space/core/store/issue-detail.store.ts
rename to apps/space/store/issue-detail.store.ts
index a9b2431ab..6cbb6c867 100644
--- a/apps/space/core/store/issue-detail.store.ts
+++ b/apps/space/store/issue-detail.store.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { isEmpty, set } from "lodash-es";
 import { makeObservable, observable, action, runInAction } from "mobx";
 import { computedFn } from "mobx-utils";
@@ -7,7 +13,7 @@ import { SitesFileService, SitesIssueService } from "@plane/services";
 import type { TFileSignedURLResponse, TIssuePublicComment } from "@plane/types";
 import { EFileAssetType } from "@plane/types";
 // store
-import type { CoreRootStore } from "@/store/root.store";
+import type { RootStore } from "@/store/root.store";
 // types
 import type { IIssue, IPeekMode, IVote } from "@/types/issue";
 
@@ -54,12 +60,12 @@ export class IssueDetailStore implements IIssueDetailStore {
     [key: string]: IIssue;
   } = {};
   // root store
-  rootStore: CoreRootStore;
+  rootStore: RootStore;
   // services
   issueService: SitesIssueService;
   fileService: SitesFileService;
 
-  constructor(_rootStore: CoreRootStore) {
+  constructor(_rootStore: RootStore) {
     makeObservable(this, {
       loader: observable.ref,
       error: observable.ref,
diff --git a/apps/space/core/store/issue-filters.store.ts b/apps/space/store/issue-filters.store.ts
similarity index 95%
rename from apps/space/core/store/issue-filters.store.ts
rename to apps/space/store/issue-filters.store.ts
index a48b07a79..e2cb514de 100644
--- a/apps/space/core/store/issue-filters.store.ts
+++ b/apps/space/store/issue-filters.store.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { cloneDeep, isEqual, set } from "lodash-es";
 import { action, makeObservable, observable, runInAction } from "mobx";
 import { computedFn } from "mobx-utils";
@@ -5,7 +11,7 @@ import { computedFn } from "mobx-utils";
 import { ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "@plane/constants";
 import type { IssuePaginationOptions, TIssueParams } from "@plane/types";
 // store
-import type { CoreRootStore } from "@/store/root.store";
+import type { RootStore } from "@/store/root.store";
 // types
 import type {
   TIssueLayoutOptions,
@@ -54,7 +60,7 @@ export class IssueFilterStore implements IIssueFilterStore {
   };
   filters: { [anchor: string]: TIssueFilters } | undefined = undefined;
 
-  constructor(private store: CoreRootStore) {
+  constructor(private store: RootStore) {
     makeObservable(this, {
       // observables
       layoutOptions: observable,
diff --git a/apps/space/core/store/issue.store.ts b/apps/space/store/issue.store.ts
similarity index 93%
rename from apps/space/core/store/issue.store.ts
rename to apps/space/store/issue.store.ts
index ed4112a82..93556bc80 100644
--- a/apps/space/core/store/issue.store.ts
+++ b/apps/space/store/issue.store.ts
@@ -1,9 +1,15 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { action, makeObservable, runInAction } from "mobx";
 // plane imports
 import { SitesIssueService } from "@plane/services";
 import type { IssuePaginationOptions, TLoader } from "@plane/types";
 // store
-import type { CoreRootStore } from "@/store/root.store";
+import type { RootStore } from "@/store/root.store";
 // types
 import { BaseIssuesStore } from "./helpers/base-issues.store";
 import type { IBaseIssuesStore } from "./helpers/base-issues.store";
@@ -22,11 +28,11 @@ export interface IIssueStore extends IBaseIssuesStore {
 
 export class IssueStore extends BaseIssuesStore implements IIssueStore {
   // root store
-  rootStore: CoreRootStore;
+  rootStore: RootStore;
   // services
   issueService: SitesIssueService;
 
-  constructor(_rootStore: CoreRootStore) {
+  constructor(_rootStore: RootStore) {
     super(_rootStore);
     makeObservable(this, {
       // actions
diff --git a/apps/space/core/store/label.store.ts b/apps/space/store/label.store.ts
similarity index 86%
rename from apps/space/core/store/label.store.ts
rename to apps/space/store/label.store.ts
index 53ffcbc6f..b1c229f0a 100644
--- a/apps/space/core/store/label.store.ts
+++ b/apps/space/store/label.store.ts
@@ -1,10 +1,16 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { set } from "lodash-es";
 import { action, computed, makeObservable, observable, runInAction } from "mobx";
 // plane imports
 import { SitesLabelService } from "@plane/services";
 import type { IIssueLabel } from "@plane/types";
 // store
-import type { CoreRootStore } from "./root.store";
+import type { RootStore } from "./root.store";
 
 export interface IIssueLabelStore {
   // observables
@@ -19,9 +25,9 @@ export interface IIssueLabelStore {
 export class LabelStore implements IIssueLabelStore {
   labelMap: Record<string, IIssueLabel> = {};
   labelService: SitesLabelService;
-  rootStore: CoreRootStore;
+  rootStore: RootStore;
 
-  constructor(_rootStore: CoreRootStore) {
+  constructor(_rootStore: RootStore) {
     makeObservable(this, {
       // observables
       labelMap: observable,
diff --git a/apps/space/core/store/members.store.ts b/apps/space/store/members.store.ts
similarity index 87%
rename from apps/space/core/store/members.store.ts
rename to apps/space/store/members.store.ts
index 45abdc711..a06d00550 100644
--- a/apps/space/core/store/members.store.ts
+++ b/apps/space/store/members.store.ts
@@ -1,9 +1,15 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { set } from "lodash-es";
 import { action, computed, makeObservable, observable, runInAction } from "mobx";
 // plane imports
 import { SitesMemberService } from "@plane/services";
 import type { TPublicMember } from "@/types/member";
-import type { CoreRootStore } from "./root.store";
+import type { RootStore } from "./root.store";
 
 export interface IIssueMemberStore {
   // observables
@@ -18,9 +24,9 @@ export interface IIssueMemberStore {
 export class MemberStore implements IIssueMemberStore {
   memberMap: Record<string, TPublicMember> = {};
   memberService: SitesMemberService;
-  rootStore: CoreRootStore;
+  rootStore: RootStore;
 
-  constructor(_rootStore: CoreRootStore) {
+  constructor(_rootStore: RootStore) {
     makeObservable(this, {
       // observables
       memberMap: observable,
diff --git a/apps/space/core/store/module.store.ts b/apps/space/store/module.store.ts
similarity index 87%
rename from apps/space/core/store/module.store.ts
rename to apps/space/store/module.store.ts
index 0635d6f8c..c539846ef 100644
--- a/apps/space/core/store/module.store.ts
+++ b/apps/space/store/module.store.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { set } from "lodash-es";
 import { action, computed, makeObservable, observable, runInAction } from "mobx";
 // plane imports
@@ -5,7 +11,7 @@ import { SitesModuleService } from "@plane/services";
 // types
 import type { TPublicModule } from "@/types/modules";
 // root store
-import type { CoreRootStore } from "./root.store";
+import type { RootStore } from "./root.store";
 
 export interface IIssueModuleStore {
   // observables
@@ -20,9 +26,9 @@ export interface IIssueModuleStore {
 export class ModuleStore implements IIssueModuleStore {
   moduleMap: Record<string, TPublicModule> = {};
   moduleService: SitesModuleService;
-  rootStore: CoreRootStore;
+  rootStore: RootStore;
 
-  constructor(_rootStore: CoreRootStore) {
+  constructor(_rootStore: RootStore) {
     makeObservable(this, {
       // observables
       moduleMap: observable,
diff --git a/apps/space/core/store/profile.store.ts b/apps/space/store/profile.store.ts
similarity index 93%
rename from apps/space/core/store/profile.store.ts
rename to apps/space/store/profile.store.ts
index 009b46ca4..d62d1d37a 100644
--- a/apps/space/core/store/profile.store.ts
+++ b/apps/space/store/profile.store.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { set } from "lodash-es";
 import { action, makeObservable, observable, runInAction } from "mobx";
 // plane imports
@@ -5,7 +11,7 @@ import { UserService } from "@plane/services";
 import type { TUserProfile } from "@plane/types";
 import { EStartOfTheWeek } from "@plane/types";
 // store
-import type { CoreRootStore } from "@/store/root.store";
+import type { RootStore } from "@/store/root.store";
 
 type TError = {
   status: string;
@@ -32,13 +38,9 @@ export class ProfileStore implements IProfileStore {
     last_workspace_id: undefined,
     theme: {
       theme: undefined,
-      text: undefined,
-      palette: undefined,
       primary: undefined,
       background: undefined,
       darkPalette: undefined,
-      sidebarText: undefined,
-      sidebarBackground: undefined,
     },
     onboarding_step: {
       workspace_join: false,
@@ -62,7 +64,7 @@ export class ProfileStore implements IProfileStore {
   // services
   userService: UserService;
 
-  constructor(public store: CoreRootStore) {
+  constructor(public store: RootStore) {
     makeObservable(this, {
       // observables
       isLoading: observable.ref,
diff --git a/apps/space/core/store/publish/publish.store.ts b/apps/space/store/publish/publish.store.ts
similarity index 93%
rename from apps/space/core/store/publish/publish.store.ts
rename to apps/space/store/publish/publish.store.ts
index 49148d555..973ea86e5 100644
--- a/apps/space/core/store/publish/publish.store.ts
+++ b/apps/space/store/publish/publish.store.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observable, makeObservable, computed } from "mobx";
 // types
 import type {
@@ -8,7 +14,7 @@ import type {
   TProjectPublishViewProps,
 } from "@plane/types";
 // store
-import type { CoreRootStore } from "../root.store";
+import type { RootStore } from "../root.store";
 
 export interface IPublishStore extends TProjectPublishSettings {
   // computed
@@ -39,7 +45,7 @@ export class PublishStore implements IPublishStore {
   workspace_detail: IWorkspaceLite | undefined;
 
   constructor(
-    private store: CoreRootStore,
+    private store: RootStore,
     publishSettings: TProjectPublishSettings
   ) {
     this.anchor = publishSettings.anchor;
diff --git a/apps/space/core/store/publish/publish_list.store.ts b/apps/space/store/publish/publish_list.store.ts
similarity index 84%
rename from apps/space/core/store/publish/publish_list.store.ts
rename to apps/space/store/publish/publish_list.store.ts
index 9cb9085f2..eeebe97e7 100644
--- a/apps/space/core/store/publish/publish_list.store.ts
+++ b/apps/space/store/publish/publish_list.store.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { set } from "lodash-es";
 import { makeObservable, observable, runInAction, action } from "mobx";
 // plane imports
@@ -5,7 +11,7 @@ import { SitesProjectPublishService } from "@plane/services";
 import type { TProjectPublishSettings } from "@plane/types";
 // store
 import { PublishStore } from "@/store/publish/publish.store";
-import type { CoreRootStore } from "@/store/root.store";
+import type { RootStore } from "@/store/root.store";
 
 export interface IPublishListStore {
   // observables
@@ -20,7 +26,7 @@ export class PublishListStore implements IPublishListStore {
   // service
   publishService;
 
-  constructor(private rootStore: CoreRootStore) {
+  constructor(private rootStore: RootStore) {
     makeObservable(this, {
       // observables
       publishMap: observable,
diff --git a/apps/space/core/store/root.store.ts b/apps/space/store/root.store.ts
similarity index 94%
rename from apps/space/core/store/root.store.ts
rename to apps/space/store/root.store.ts
index 047e8582d..6b5261884 100644
--- a/apps/space/core/store/root.store.ts
+++ b/apps/space/store/root.store.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { enableStaticRendering } from "mobx-react";
 // store imports
 import type { IInstanceStore } from "@/store/instance.store";
@@ -25,7 +31,7 @@ import { StateStore } from "./state.store";
 
 enableStaticRendering(typeof window === "undefined");
 
-export class CoreRootStore {
+export class RootStore {
   instance: IInstanceStore;
   user: IUserStore;
   issue: IIssueStore;
diff --git a/apps/space/core/store/state.store.ts b/apps/space/store/state.store.ts
similarity index 84%
rename from apps/space/core/store/state.store.ts
rename to apps/space/store/state.store.ts
index 1de0fd6ab..3ecf78d15 100644
--- a/apps/space/core/store/state.store.ts
+++ b/apps/space/store/state.store.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { clone } from "lodash-es";
 import { action, computed, makeObservable, observable, runInAction } from "mobx";
 // plane imports
@@ -6,7 +12,7 @@ import type { IState } from "@plane/types";
 // helpers
 import { sortStates } from "@/helpers/state.helper";
 // store
-import type { CoreRootStore } from "./root.store";
+import type { RootStore } from "./root.store";
 
 export interface IStateStore {
   // observables
@@ -22,9 +28,9 @@ export interface IStateStore {
 export class StateStore implements IStateStore {
   states: IState[] | undefined = undefined;
   stateService: SitesStateService;
-  rootStore: CoreRootStore;
+  rootStore: RootStore;
 
-  constructor(_rootStore: CoreRootStore) {
+  constructor(_rootStore: RootStore) {
     makeObservable(this, {
       // observables
       states: observable,
diff --git a/apps/space/core/store/user.store.ts b/apps/space/store/user.store.ts
similarity index 95%
rename from apps/space/core/store/user.store.ts
rename to apps/space/store/user.store.ts
index 611afa483..f2a3c7dbc 100644
--- a/apps/space/core/store/user.store.ts
+++ b/apps/space/store/user.store.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { AxiosError } from "axios";
 import { set } from "lodash-es";
 import { action, computed, makeObservable, observable, runInAction } from "mobx";
@@ -8,7 +14,7 @@ import type { ActorDetail, IUser } from "@plane/types";
 import type { IProfileStore } from "@/store/profile.store";
 import { ProfileStore } from "@/store/profile.store";
 // store
-import type { CoreRootStore } from "@/store/root.store";
+import type { RootStore } from "@/store/root.store";
 
 type TUserErrorStatus = {
   status: string;
@@ -44,7 +50,7 @@ export class UserStore implements IUserStore {
   // service
   userService: UserService;
 
-  constructor(private store: CoreRootStore) {
+  constructor(private store: RootStore) {
     // stores
     this.profile = new ProfileStore(store);
     // service
diff --git a/apps/space/styles/globals.css b/apps/space/styles/globals.css
index 46fca3402..ba7f052d1 100644
--- a/apps/space/styles/globals.css
+++ b/apps/space/styles/globals.css
@@ -1,504 +1,58 @@
-@import "@plane/propel/styles/fonts";
+@import "@plane/tailwind-config/index.css";
 @import "@plane/editor/styles";
+@import "@plane/propel/styles/react-day-picker.css";
+@plugin "@tailwindcss/typography";
 
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+/* stickies and editor colors */
+:root {
+  /* text colors */
+  --editor-colors-gray-text: #5c5e63;
+  --editor-colors-peach-text: #ff5b59;
+  --editor-colors-pink-text: #f65385;
+  --editor-colors-orange-text: #fd9038;
+  --editor-colors-green-text: #0fc27b;
+  --editor-colors-light-blue-text: #17bee9;
+  --editor-colors-dark-blue-text: #266df0;
+  --editor-colors-purple-text: #9162f9;
+  /* end text colors */
 
-@layer base {
-  html {
-    font-family: "Inter", sans-serif;
-  }
-
-  :root {
-    color-scheme: light !important;
-
-    --color-primary-10: 229, 243, 250;
-    --color-primary-20: 216, 237, 248;
-    --color-primary-30: 199, 229, 244;
-    --color-primary-40: 169, 214, 239;
-    --color-primary-50: 144, 202, 234;
-    --color-primary-60: 109, 186, 227;
-    --color-primary-70: 75, 170, 221;
-    --color-primary-80: 41, 154, 214;
-    --color-primary-90: 34, 129, 180;
-    --color-primary-100: 0, 99, 153;
-    --color-primary-200: 0, 92, 143;
-    --color-primary-300: 0, 86, 133;
-    --color-primary-400: 0, 77, 117;
-    --color-primary-500: 0, 66, 102;
-    --color-primary-600: 0, 53, 82;
-    --color-primary-700: 0, 43, 66;
-    --color-primary-800: 0, 33, 51;
-    --color-primary-900: 0, 23, 36;
-
-    --color-background-100: 255, 255, 255; /* primary bg */
-    --color-background-90: 247, 247, 247; /* secondary bg */
-    --color-background-80: 232, 232, 232; /* tertiary bg */
-
-    --color-text-100: 23, 23, 23; /* primary text */
-    --color-text-200: 58, 58, 58; /* secondary text */
-    --color-text-300: 82, 82, 82; /* tertiary text */
-    --color-text-400: 163, 163, 163; /* placeholder text */
-
-    --color-scrollbar: 163, 163, 163; /* scrollbar thumb */
-
-    --color-border-100: 245, 245, 245; /* subtle border= 1 */
-    --color-border-200: 229, 229, 229; /* subtle border- 2 */
-    --color-border-300: 212, 212, 212; /* strong border- 1 */
-    --color-border-400: 185, 185, 185; /* strong border- 2 */
-
-    --color-shadow-2xs:
-      0px 0px 1px 0px rgba(23, 23, 23, 0.06), 0px 1px 2px 0px rgba(23, 23, 23, 0.06),
-      0px 1px 2px 0px rgba(23, 23, 23, 0.14);
-    --color-shadow-xs:
-      0px 1px 2px 0px rgba(0, 0, 0, 0.16), 0px 2px 4px 0px rgba(16, 24, 40, 0.12),
-      0px 1px 8px -1px rgba(16, 24, 40, 0.1);
-    --color-shadow-sm:
-      0px 1px 4px 0px rgba(0, 0, 0, 0.01), 0px 4px 8px 0px rgba(0, 0, 0, 0.02), 0px 1px 12px 0px rgba(0, 0, 0, 0.12);
-    --color-shadow-rg:
-      0px 3px 6px 0px rgba(0, 0, 0, 0.1), 0px 4px 4px 0px rgba(16, 24, 40, 0.08),
-      0px 1px 12px 0px rgba(16, 24, 40, 0.04);
-    --color-shadow-md:
-      0px 4px 8px 0px rgba(0, 0, 0, 0.12), 0px 6px 12px 0px rgba(16, 24, 40, 0.12),
-      0px 1px 16px 0px rgba(16, 24, 40, 0.12);
-    --color-shadow-lg:
-      0px 6px 12px 0px rgba(0, 0, 0, 0.12), 0px 8px 16px 0px rgba(0, 0, 0, 0.12),
-      0px 1px 24px 0px rgba(16, 24, 40, 0.12);
-    --color-shadow-xl:
-      0px 0px 18px 0px rgba(0, 0, 0, 0.16), 0px 0px 24px 0px rgba(16, 24, 40, 0.16),
-      0px 0px 52px 0px rgba(16, 24, 40, 0.16);
-    --color-shadow-2xl:
-      0px 8px 16px 0px rgba(0, 0, 0, 0.12), 0px 12px 24px 0px rgba(16, 24, 40, 0.12),
-      0px 1px 32px 0px rgba(16, 24, 40, 0.12);
-    --color-shadow-3xl:
-      0px 12px 24px 0px rgba(0, 0, 0, 0.12), 0px 16px 32px 0px rgba(0, 0, 0, 0.12),
-      0px 1px 48px 0px rgba(16, 24, 40, 0.12);
-    --color-shadow-4xl: 0px 8px 40px 0px rgba(0, 0, 61, 0.05), 0px 12px 32px -16px rgba(0, 0, 0, 0.05);
-
-    --color-sidebar-background-100: var(--color-background-100); /* primary sidebar bg */
-    --color-sidebar-background-90: var(--color-background-90); /* secondary sidebar bg */
-    --color-sidebar-background-80: var(--color-background-80); /* tertiary sidebar bg */
-
-    --color-sidebar-text-100: var(--color-text-100); /* primary sidebar text */
-    --color-sidebar-text-200: var(--color-text-200); /* secondary sidebar text */
-    --color-sidebar-text-300: var(--color-text-300); /* tertiary sidebar text */
-    --color-sidebar-text-400: var(--color-text-400); /* sidebar placeholder text */
-
-    --color-sidebar-border-100: var(--color-border-100); /* subtle sidebar border= 1 */
-    --color-sidebar-border-200: var(--color-border-100); /* subtle sidebar border- 2 */
-    --color-sidebar-border-300: var(--color-border-100); /* strong sidebar border- 1 */
-    --color-sidebar-border-400: var(--color-border-100); /* strong sidebar border- 2 */
-
-    --color-sidebar-shadow-2xs: var(--color-shadow-2xs);
-    --color-sidebar-shadow-xs: var(--color-shadow-xs);
-    --color-sidebar-shadow-sm: var(--color-shadow-sm);
-    --color-sidebar-shadow-rg: var(--color-shadow-rg);
-    --color-sidebar-shadow-md: var(--color-shadow-md);
-    --color-sidebar-shadow-lg: var(--color-shadow-lg);
-    --color-sidebar-shadow-xl: var(--color-shadow-xl);
-    --color-sidebar-shadow-2xl: var(--color-shadow-2xl);
-    --color-sidebar-shadow-3xl: var(--color-shadow-3xl);
-    --color-sidebar-shadow-4xl: var(--color-shadow-4xl);
-
-    /* toast theme */
-    --color-toast-success-text: 178, 221, 181;
-    --color-toast-error-text: 206, 44, 49;
-    --color-toast-warning-text: 255, 186, 24;
-    --color-toast-info-text: 141, 164, 239;
-    --color-toast-loading-text: 255, 255, 255;
-    --color-toast-secondary-text: 185, 187, 198;
-    --color-toast-tertiary-text: 139, 141, 152;
-
-    --color-toast-success-background: 46, 46, 46;
-    --color-toast-error-background: 46, 46, 46;
-    --color-toast-warning-background: 46, 46, 46;
-    --color-toast-info-background: 46, 46, 46;
-    --color-toast-loading-background: 46, 46, 46;
-
-    --color-toast-success-border: 42, 126, 59;
-    --color-toast-error-border: 100, 23, 35;
-    --color-toast-warning-border: 79, 52, 34;
-    --color-toast-info-border: 58, 91, 199;
-    --color-toast-loading-border: 96, 100, 108;
-  }
-
-  [data-theme="light"],
-  [data-theme="light-contrast"] {
-    color-scheme: light !important;
-
-    --color-background-100: 255, 255, 255; /* primary bg */
-    --color-background-90: 247, 247, 247; /* secondary bg */
-    --color-background-80: 232, 232, 232; /* tertiary bg */
-  }
-
-  [data-theme="light"] {
-    --color-text-100: 23, 23, 23; /* primary text */
-    --color-text-200: 58, 58, 58; /* secondary text */
-    --color-text-300: 82, 82, 82; /* tertiary text */
-    --color-text-400: 163, 163, 163; /* placeholder text */
-
-    --color-scrollbar: 163, 163, 163; /* scrollbar thumb */
-
-    --color-border-100: 245, 245, 245; /* subtle border= 1 */
-    --color-border-200: 229, 229, 229; /* subtle border- 2 */
-    --color-border-300: 212, 212, 212; /* strong border- 1 */
-    --color-border-400: 185, 185, 185; /* strong border- 2 */
-
-    /* onboarding colors */
-    --gradient-onboarding-100: linear-gradient(106deg, #f2f6ff 29.8%, #e1eaff 99.34%);
-    --gradient-onboarding-200: linear-gradient(129deg, rgba(255, 255, 255, 0) -22.23%, rgba(255, 255, 255, 0.8) 62.98%);
-    --gradient-onboarding-300: linear-gradient(164deg, #fff 4.25%, rgba(255, 255, 255, 0.06) 93.5%);
-    --gradient-onboarding-400: linear-gradient(129deg, rgba(255, 255, 255, 0) -22.23%, rgba(255, 255, 255, 0.8) 62.98%);
-
-    --color-onboarding-text-100: 23, 23, 23;
-    --color-onboarding-text-200: 58, 58, 58;
-    --color-onboarding-text-300: 82, 82, 82;
-    --color-onboarding-text-400: 163, 163, 163;
-
-    --color-onboarding-background-100: 236, 241, 255;
-    --color-onboarding-background-200: 255, 255, 255;
-    --color-onboarding-background-300: 236, 241, 255;
-    --color-onboarding-background-400: 177, 206, 250;
-
-    --color-onboarding-border-100: 229, 229, 229;
-    --color-onboarding-border-200: 217, 228, 255;
-    --color-onboarding-border-300: 229, 229, 229, 0.5;
-
-    --color-onboarding-shadow-sm: 0px 4px 20px 0px rgba(126, 139, 171, 0.1);
-
-    /* toast theme */
-    --color-toast-success-text: 62, 155, 79;
-    --color-toast-error-text: 220, 62, 66;
-    --color-toast-warning-text: 255, 186, 24;
-    --color-toast-info-text: 51, 88, 212;
-    --color-toast-loading-text: 28, 32, 36;
-    --color-toast-secondary-text: 128, 131, 141;
-    --color-toast-tertiary-text: 96, 100, 108;
-
-    --color-toast-success-background: 253, 253, 254;
-    --color-toast-error-background: 255, 252, 252;
-    --color-toast-warning-background: 254, 253, 251;
-    --color-toast-info-background: 253, 253, 254;
-    --color-toast-loading-background: 253, 253, 254;
-
-    --color-toast-success-border: 218, 241, 219;
-    --color-toast-error-border: 255, 219, 220;
-    --color-toast-warning-border: 255, 247, 194;
-    --color-toast-info-border: 210, 222, 255;
-    --color-toast-loading-border: 224, 225, 230;
-  }
-
-  [data-theme="light-contrast"] {
-    --color-text-100: 11, 11, 11; /* primary text */
-    --color-text-200: 38, 38, 38; /* secondary text */
-    --color-text-300: 58, 58, 58; /* tertiary text */
-    --color-text-400: 115, 115, 115; /* placeholder text */
-
-    --color-scrollbar: 115, 115, 115; /* scrollbar thumb */
-
-    --color-border-100: 34, 34, 34; /* subtle border= 1 */
-    --color-border-200: 38, 38, 38; /* subtle border- 2 */
-    --color-border-300: 46, 46, 46; /* strong border- 1 */
-    --color-border-400: 58, 58, 58; /* strong border- 2 */
-  }
-
-  [data-theme="dark"],
-  [data-theme="dark-contrast"] {
-    color-scheme: dark !important;
-
-    --color-primary-10: 8, 31, 43;
-    --color-primary-20: 10, 37, 51;
-    --color-primary-30: 13, 49, 69;
-    --color-primary-40: 16, 58, 81;
-    --color-primary-50: 18, 68, 94;
-    --color-primary-60: 23, 86, 120;
-    --color-primary-70: 28, 104, 146;
-    --color-primary-80: 31, 116, 163;
-    --color-primary-90: 34, 129, 180;
-    --color-primary-100: 40, 146, 204;
-    --color-primary-200: 41, 154, 214;
-    --color-primary-300: 75, 170, 221;
-    --color-primary-400: 109, 186, 227;
-    --color-primary-500: 144, 202, 234;
-    --color-primary-600: 169, 214, 239;
-    --color-primary-700: 199, 229, 244;
-    --color-primary-800: 216, 237, 248;
-    --color-primary-900: 229, 243, 250;
-
-    --color-background-100: 25, 25, 25; /* primary bg */
-    --color-background-90: 32, 32, 32; /* secondary bg */
-    --color-background-80: 44, 44, 44; /* tertiary bg */
-
-    --color-shadow-2xs: 0px 0px 1px 0px rgba(0, 0, 0, 0.15), 0px 1px 3px 0px rgba(0, 0, 0, 0.5);
-    --color-shadow-xs: 0px 0px 2px 0px rgba(0, 0, 0, 0.2), 0px 2px 4px 0px rgba(0, 0, 0, 0.5);
-    --color-shadow-sm: 0px 0px 4px 0px rgba(0, 0, 0, 0.2), 0px 2px 6px 0px rgba(0, 0, 0, 0.5);
-    --color-shadow-rg: 0px 0px 6px 0px rgba(0, 0, 0, 0.2), 0px 4px 6px 0px rgba(0, 0, 0, 0.5);
-    --color-shadow-md: 0px 2px 8px 0px rgba(0, 0, 0, 0.2), 0px 4px 8px 0px rgba(0, 0, 0, 0.5);
-    --color-shadow-lg: 0px 4px 12px 0px rgba(0, 0, 0, 0.25), 0px 4px 10px 0px rgba(0, 0, 0, 0.55);
-    --color-shadow-xl: 0px 0px 14px 0px rgba(0, 0, 0, 0.25), 0px 6px 10px 0px rgba(0, 0, 0, 0.55);
-    --color-shadow-2xl: 0px 0px 18px 0px rgba(0, 0, 0, 0.25), 0px 8px 12px 0px rgba(0, 0, 0, 0.6);
-    --color-shadow-3xl: 0px 4px 24px 0px rgba(0, 0, 0, 0.3), 0px 12px 40px 0px rgba(0, 0, 0, 0.65);
-  }
-
-  [data-theme="dark"] {
-    --color-text-100: 229, 229, 229; /* primary text */
-    --color-text-200: 163, 163, 163; /* secondary text */
-    --color-text-300: 115, 115, 115; /* tertiary text */
-    --color-text-400: 82, 82, 82; /* placeholder text */
-
-    --color-scrollbar: 82, 82, 82; /* scrollbar thumb */
-
-    --color-border-100: 34, 34, 34; /* subtle border= 1 */
-    --color-border-200: 38, 38, 38; /* subtle border- 2 */
-    --color-border-300: 46, 46, 46; /* strong border- 1 */
-    --color-border-400: 58, 58, 58; /* strong border- 2 */
-
-    /* onboarding colors */
-    --gradient-onboarding-100: linear-gradient(106deg, #18191b 25.17%, #18191b 99.34%);
-    --gradient-onboarding-200: linear-gradient(129deg, rgba(47, 49, 53, 0.8) -22.23%, rgba(33, 34, 37, 0.8) 62.98%);
-    --gradient-onboarding-300: linear-gradient(167deg, rgba(47, 49, 53, 0.45) 19.22%, #212225 98.48%);
-
-    --color-onboarding-text-100: 237, 238, 240;
-    --color-onboarding-text-200: 176, 180, 187;
-    --color-onboarding-text-300: 118, 123, 132;
-    --color-onboarding-text-400: 105, 110, 119;
-
-    --color-onboarding-background-100: 54, 58, 64;
-    --color-onboarding-background-200: 40, 42, 45;
-    --color-onboarding-background-300: 40, 42, 45;
-    --color-onboarding-background-400: 67, 72, 79;
-
-    --color-onboarding-border-100: 54, 58, 64;
-    --color-onboarding-border-200: 54, 58, 64;
-    --color-onboarding-border-300: 34, 35, 38, 0.5;
-
-    --color-onboarding-shadow-sm: 0px 4px 20px 0px rgba(39, 44, 56, 0.1);
-  }
-
-  [data-theme="dark-contrast"] {
-    --color-text-100: 250, 250, 250; /* primary text */
-    --color-text-200: 241, 241, 241; /* secondary text */
-    --color-text-300: 212, 212, 212; /* tertiary text */
-    --color-text-400: 115, 115, 115; /* placeholder text */
-
-    --color-scrollbar: 115, 115, 115; /* scrollbar thumb */
-
-    --color-border-100: 245, 245, 245; /* subtle border= 1 */
-    --color-border-200: 229, 229, 229; /* subtle border- 2 */
-    --color-border-300: 212, 212, 212; /* strong border- 1 */
-    --color-border-400: 185, 185, 185; /* strong border- 2 */
-  }
-
-  [data-theme="light"],
-  [data-theme="dark"],
-  [data-theme="light-contrast"],
-  [data-theme="dark-contrast"] {
-    --color-sidebar-background-100: var(--color-background-100); /* primary sidebar bg */
-    --color-sidebar-background-90: var(--color-background-90); /* secondary sidebar bg */
-    --color-sidebar-background-80: var(--color-background-80); /* tertiary sidebar bg */
-
-    --color-sidebar-text-100: var(--color-text-100); /* primary sidebar text */
-    --color-sidebar-text-200: var(--color-text-200); /* secondary sidebar text */
-    --color-sidebar-text-300: var(--color-text-300); /* tertiary sidebar text */
-    --color-sidebar-text-400: var(--color-text-400); /* sidebar placeholder text */
-
-    --color-sidebar-border-100: var(--color-border-100); /* subtle sidebar border= 1 */
-    --color-sidebar-border-200: var(--color-border-200); /* subtle sidebar border- 2 */
-    --color-sidebar-border-300: var(--color-border-300); /* strong sidebar border- 1 */
-    --color-sidebar-border-400: var(--color-border-400); /* strong sidebar border- 2 */
-  }
-
-  /* stickies and editor colors */
-  :root {
-    /* text colors */
-    --editor-colors-gray-text: #5c5e63;
-    --editor-colors-peach-text: #ff5b59;
-    --editor-colors-pink-text: #f65385;
-    --editor-colors-orange-text: #fd9038;
-    --editor-colors-green-text: #0fc27b;
-    --editor-colors-light-blue-text: #17bee9;
-    --editor-colors-dark-blue-text: #266df0;
-    --editor-colors-purple-text: #9162f9;
-    /* end text colors */
-
-    /* background colors */
-    --editor-colors-gray-background: #d6d6d8;
-    --editor-colors-peach-background: #ffd5d7;
-    --editor-colors-pink-background: #fdd4e3;
-    --editor-colors-orange-background: #ffe3cd;
-    --editor-colors-green-background: #c3f0de;
-    --editor-colors-light-blue-background: #c5eff9;
-    --editor-colors-dark-blue-background: #c9dafb;
-    --editor-colors-purple-background: #e3d8fd;
-    /* end background colors */
-  }
   /* background colors */
-  [data-theme*="light"] {
-    --editor-colors-gray-background: #d6d6d8;
-    --editor-colors-peach-background: #ffd5d7;
-    --editor-colors-pink-background: #fdd4e3;
-    --editor-colors-orange-background: #ffe3cd;
-    --editor-colors-green-background: #c3f0de;
-    --editor-colors-light-blue-background: #c5eff9;
-    --editor-colors-dark-blue-background: #c9dafb;
-    --editor-colors-purple-background: #e3d8fd;
-  }
-  [data-theme*="dark"] {
-    --editor-colors-gray-background: #404144;
-    --editor-colors-peach-background: #593032;
-    --editor-colors-pink-background: #562e3d;
-    --editor-colors-orange-background: #583e2a;
-    --editor-colors-green-background: #1d4a3b;
-    --editor-colors-light-blue-background: #1f495c;
-    --editor-colors-dark-blue-background: #223558;
-    --editor-colors-purple-background: #3d325a;
-  }
+  --editor-colors-gray-background: #d6d6d8;
+  --editor-colors-peach-background: #ffd5d7;
+  --editor-colors-pink-background: #fdd4e3;
+  --editor-colors-orange-background: #ffe3cd;
+  --editor-colors-green-background: #c3f0de;
+  --editor-colors-light-blue-background: #c5eff9;
+  --editor-colors-dark-blue-background: #c9dafb;
+  --editor-colors-purple-background: #e3d8fd;
   /* end background colors */
 }
-
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-  -webkit-text-size-adjust: 100%;
-  -ms-text-size-adjust: 100%;
-  font-variant-ligatures: none;
-  -webkit-font-variant-ligatures: none;
-  text-rendering: optimizeLegibility;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
+/* background colors */
+[data-theme*="light"] {
+  --editor-colors-gray-background: #d6d6d8;
+  --editor-colors-peach-background: #ffd5d7;
+  --editor-colors-pink-background: #fdd4e3;
+  --editor-colors-orange-background: #ffe3cd;
+  --editor-colors-green-background: #c3f0de;
+  --editor-colors-light-blue-background: #c5eff9;
+  --editor-colors-dark-blue-background: #c9dafb;
+  --editor-colors-purple-background: #e3d8fd;
 }
-
-body {
-  color: rgba(var(--color-text-100));
-}
-
-::-webkit-scrollbar {
-  width: 5px;
-  height: 5px;
-  border-radius: 5px;
-}
-
-::-webkit-scrollbar-track {
-  background-color: rgba(var(--color-background-100));
-}
-
-::-webkit-scrollbar-thumb {
-  border-radius: 5px;
-  background-color: rgba(var(--color-background-80));
-}
-
-.hide-vertical-scrollbar::-webkit-scrollbar {
-  width: 0 !important;
-}
-
-.hide-horizontal-scrollbar::-webkit-scrollbar {
-  height: 0 !important;
-}
-
-.hide-both-scrollbars::-webkit-scrollbar {
-  height: 0 !important;
-  width: 0 !important;
-}
-
-/* By applying below class, the autofilled text in form fields will not have the default autofill background color and styles applied by WebKit browsers  */
-.disable-autofill-style:-webkit-autofill,
-.disable-autofill-style:-webkit-autofill:hover,
-.disable-autofill-style:-webkit-autofill:focus,
-.disable-autofill-style:-webkit-autofill:active {
-  -webkit-background-clip: text;
-}
-
-@-moz-document url-prefix() {
-  * {
-    scrollbar-width: none;
-  }
-  .vertical-scrollbar,
-  .horizontal-scrollbar {
-    scrollbar-width: initial;
-    scrollbar-color: rgba(96, 100, 108, 0.1) transparent;
-  }
-  .vertical-scrollbar:hover,
-  .horizontal-scrollbar:hover {
-    scrollbar-color: rgba(96, 100, 108, 0.25) transparent;
-  }
-  .vertical-scrollbar:active,
-  .horizontal-scrollbar:active {
-    scrollbar-color: rgba(96, 100, 108, 0.7) transparent;
-  }
-}
-
-.vertical-scrollbar {
-  overflow-y: auto;
-}
-.horizontal-scrollbar {
-  overflow-x: auto;
-}
-.vertical-scrollbar::-webkit-scrollbar,
-.horizontal-scrollbar::-webkit-scrollbar {
-  display: block;
-}
-.vertical-scrollbar::-webkit-scrollbar-track,
-.horizontal-scrollbar::-webkit-scrollbar-track {
-  background-color: transparent;
-  border-radius: 9999px;
-}
-.vertical-scrollbar::-webkit-scrollbar-thumb,
-.horizontal-scrollbar::-webkit-scrollbar-thumb {
-  background-clip: padding-box;
-  background-color: rgba(96, 100, 108, 0.1);
-  border-radius: 9999px;
-}
-.vertical-scrollbar:hover::-webkit-scrollbar-thumb,
-.horizontal-scrollbar:hover::-webkit-scrollbar-thumb {
-  background-color: rgba(96, 100, 108, 0.25);
-}
-.vertical-scrollbar::-webkit-scrollbar-thumb:hover,
-.horizontal-scrollbar::-webkit-scrollbar-thumb:hover {
-  background-color: rgba(96, 100, 108, 0.5);
-}
-.vertical-scrollbar::-webkit-scrollbar-thumb:active,
-.horizontal-scrollbar::-webkit-scrollbar-thumb:active {
-  background-color: rgba(96, 100, 108, 0.7);
-}
-.vertical-scrollbar::-webkit-scrollbar-corner,
-.horizontal-scrollbar::-webkit-scrollbar-corner {
-  background-color: transparent;
-}
-.vertical-scrollbar-margin-top-md::-webkit-scrollbar-track {
-  margin-top: 44px;
-}
-
-/* scrollbar sm size */
-.scrollbar-sm::-webkit-scrollbar {
-  height: 12px;
-  width: 12px;
-}
-.scrollbar-sm::-webkit-scrollbar-thumb {
-  border: 3px solid rgba(0, 0, 0, 0);
-}
-/* scrollbar md size */
-.scrollbar-md::-webkit-scrollbar {
-  height: 14px;
-  width: 14px;
-}
-.scrollbar-md::-webkit-scrollbar-thumb {
-  border: 3px solid rgba(0, 0, 0, 0);
-}
-/* scrollbar lg size */
-
-.scrollbar-lg::-webkit-scrollbar {
-  height: 16px;
-  width: 16px;
-}
-.scrollbar-lg::-webkit-scrollbar-thumb {
-  border: 4px solid rgba(0, 0, 0, 0);
+[data-theme*="dark"] {
+  --editor-colors-gray-background: #404144;
+  --editor-colors-peach-background: #593032;
+  --editor-colors-pink-background: #562e3d;
+  --editor-colors-orange-background: #583e2a;
+  --editor-colors-green-background: #1d4a3b;
+  --editor-colors-light-blue-background: #1f495c;
+  --editor-colors-dark-blue-background: #223558;
+  --editor-colors-purple-background: #3d325a;
 }
+/* end background colors */
 
 /* Progress Bar Styles */
 :root {
-  --bprogress-color: rgb(var(--color-primary-100)) !important;
+  --bprogress-color: var(--background-color-accent-primary);
   --bprogress-height: 2.5px !important;
 }
 
@@ -509,8 +63,8 @@ body {
 .bprogress .bar {
   background: linear-gradient(
     90deg,
-    rgba(var(--color-primary-100), 0.8) 0%,
-    rgba(var(--color-primary-100), 1) 100%
+    --alpha(var(--background-color-accent-primary) / 80%) 0%,
+    --alpha(var(--background-color-accent-primary) / 100%) 100%
   ) !important;
   will-change: width, opacity;
 }
@@ -518,7 +72,7 @@ body {
 .bprogress .peg {
   display: block;
   box-shadow:
-    0 0 8px rgba(var(--color-primary-100), 0.6),
-    0 0 4px rgba(var(--color-primary-100), 0.4) !important;
+    0 0 8px --alpha(var(--background-color-accent-primary) / 60%),
+    0 0 4px --alpha(var(--background-color-accent-primary) / 40%) !important;
   will-change: transform, opacity;
 }
diff --git a/apps/space/tailwind.config.cjs b/apps/space/tailwind.config.cjs
deleted file mode 100644
index 7511bd651..000000000
--- a/apps/space/tailwind.config.cjs
+++ /dev/null
@@ -1 +0,0 @@
-module.exports = require("@plane/tailwind-config/tailwind.config.js");
diff --git a/apps/space/tsconfig.json b/apps/space/tsconfig.json
index 224a2b2d2..a340381bb 100644
--- a/apps/space/tsconfig.json
+++ b/apps/space/tsconfig.json
@@ -4,12 +4,7 @@
     "rootDirs": [".", "./.react-router/types"],
     "types": ["vite/client"],
     "paths": {
-      "@/app/*": ["./app/*"],
-      "@/*": ["./core/*"],
-      "@/helpers/*": ["./helpers/*"],
-      "@/styles/*": ["./styles/*"],
-      "@/plane-web/*": ["./ce/*"],
-      "ce/*": ["./ce/*"]
+      "@/*": ["./*"]
     },
     "strictNullChecks": true,
     "noImplicitOverride": false,
diff --git a/apps/space/core/types/auth.ts b/apps/space/types/auth.ts
similarity index 69%
rename from apps/space/core/types/auth.ts
rename to apps/space/types/auth.ts
index 19a616871..72e12cd46 100644
--- a/apps/space/core/types/auth.ts
+++ b/apps/space/types/auth.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export enum EAuthModes {
   SIGN_IN = "SIGN_IN",
   SIGN_UP = "SIGN_UP",
@@ -19,6 +25,7 @@ export interface IEmailCheckData {
 }
 
 export interface IEmailCheckResponse {
+  status: "MAGIC_CODE" | "CREDENTIAL";
   is_password_autoset: boolean;
   existing: boolean;
 }
diff --git a/apps/space/core/types/cycle.d.ts b/apps/space/types/cycle.d.ts
similarity index 100%
rename from apps/space/core/types/cycle.d.ts
rename to apps/space/types/cycle.d.ts
diff --git a/apps/space/core/types/intake.d.ts b/apps/space/types/intake.d.ts
similarity index 100%
rename from apps/space/core/types/intake.d.ts
rename to apps/space/types/intake.d.ts
diff --git a/apps/space/core/types/issue.d.ts b/apps/space/types/issue.d.ts
similarity index 100%
rename from apps/space/core/types/issue.d.ts
rename to apps/space/types/issue.d.ts
diff --git a/apps/space/core/types/member.d.ts b/apps/space/types/member.d.ts
similarity index 100%
rename from apps/space/core/types/member.d.ts
rename to apps/space/types/member.d.ts
diff --git a/apps/space/core/types/modules.d.ts b/apps/space/types/modules.d.ts
similarity index 100%
rename from apps/space/core/types/modules.d.ts
rename to apps/space/types/modules.d.ts
diff --git a/apps/space/vite.config.ts b/apps/space/vite.config.ts
index 58e0facb0..1767562ce 100644
--- a/apps/space/vite.config.ts
+++ b/apps/space/vite.config.ts
@@ -1,5 +1,5 @@
 import path from "node:path";
-import * as dotenv from "@dotenvx/dotenvx";
+import * as dotenv from "dotenv";
 import { reactRouter } from "@react-router/dev/vite";
 import { defineConfig } from "vite";
 import tsconfigPaths from "vite-tsconfig-paths";
@@ -29,7 +29,6 @@ export default defineConfig(() => ({
   resolve: {
     alias: {
       // Next.js compatibility shims used within space
-      "next/link": path.resolve(__dirname, "app/compat/next/link.tsx"),
       "next/navigation": path.resolve(__dirname, "app/compat/next/navigation.ts"),
     },
     dedupe: ["react", "react-dom"],
diff --git a/apps/web/Dockerfile.web b/apps/web/Dockerfile.web
index 104a9e2f7..38af19e74 100644
--- a/apps/web/Dockerfile.web
+++ b/apps/web/Dockerfile.web
@@ -14,7 +14,7 @@ RUN apk add --no-cache libc6-compat
 # Set working directory
 WORKDIR /app
 
-ARG TURBO_VERSION=2.6.3
+ARG TURBO_VERSION=2.9.4
 RUN corepack enable pnpm && pnpm add -g turbo@${TURBO_VERSION}
 COPY . .
 
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/_sidebar.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/_sidebar.tsx
index b87edfb29..173b1fb0e 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/_sidebar.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/_sidebar.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useState } from "react";
 import { observer } from "mobx-react";
 // plane imports
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/active-cycles/header.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/active-cycles/header.tsx
index edb12b004..82fe31cce 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/active-cycles/header.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/active-cycles/header.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import { useTranslation } from "@plane/i18n";
 // ui
@@ -18,7 +24,7 @@ export const WorkspaceActiveCycleHeader = observer(function WorkspaceActiveCycle
             component={
               <BreadcrumbLink
                 label={t("active_cycles")}
-                icon={<CycleIcon className="h-4 w-4 text-custom-text-300 rotate-180" />}
+                icon={<CycleIcon className="h-4 w-4 rotate-180 text-tertiary" />}
               />
             }
           />
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/active-cycles/layout.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/active-cycles/layout.tsx
index 9d4e32d26..fb000228c 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/active-cycles/layout.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/active-cycles/layout.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // components
 import { Outlet } from "react-router";
 import { AppHeader } from "@/components/core/app-header";
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/active-cycles/page.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/active-cycles/page.tsx
index f0c470cfb..222fa03c9 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/active-cycles/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/active-cycles/page.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 // components
 import { PageHead } from "@/components/core/page-title";
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/analytics/[tabId]/header.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/analytics/[tabId]/header.tsx
index 95fd9186f..ed2c9215a 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/analytics/[tabId]/header.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/analytics/[tabId]/header.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import { useTranslation } from "@plane/i18n";
 import { AnalyticsIcon } from "@plane/propel/icons";
@@ -16,7 +22,7 @@ export const WorkspaceAnalyticsHeader = observer(function WorkspaceAnalyticsHead
             component={
               <BreadcrumbLink
                 label={t("workspace_analytics.label")}
-                icon={<AnalyticsIcon className="h-4 w-4 text-custom-text-300" />}
+                icon={<AnalyticsIcon className="h-4 w-4 text-tertiary" />}
               />
             }
           />
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/analytics/[tabId]/layout.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/analytics/[tabId]/layout.tsx
index 4521939e6..e12366070 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/analytics/[tabId]/layout.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/analytics/[tabId]/layout.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // components
 import { Outlet } from "react-router";
 import { AppHeader } from "@/components/core/app-header";
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/analytics/[tabId]/page.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/analytics/[tabId]/page.tsx
index c8e4e1aeb..63321351d 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/analytics/[tabId]/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/analytics/[tabId]/page.tsx
@@ -1,8 +1,14 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useState, useEffect } from "react";
 import { observer } from "mobx-react";
 import { useRouter } from "next/navigation";
 // plane package imports
-import { EUserPermissions, EUserPermissionsLevel, PROJECT_TRACKER_ELEMENTS } from "@plane/constants";
+import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { EmptyStateDetailed } from "@plane/propel/empty-state";
 import { Tabs } from "@plane/propel/tabs";
@@ -11,7 +17,6 @@ import { cn } from "@plane/utils";
 import AnalyticsFilterActions from "@/components/analytics/analytics-filter-actions";
 import { PageHead } from "@/components/core/page-title";
 // hooks
-import { captureClick } from "@/helpers/event-tracker.helper";
 import { useCommandPalette } from "@/hooks/store/use-command-palette";
 import { useProject } from "@/hooks/store/use-project";
 import { useWorkspace } from "@/hooks/store/use-workspace";
@@ -67,22 +72,27 @@ function AnalyticsPage({ params }: Route.ComponentProps) {
       {workspaceProjectIds && (
         <>
           {workspaceProjectIds.length > 0 || loader === "init-loader" ? (
-            <div className="flex h-full overflow-hidden bg-custom-background-100 ">
-              <Tabs value={selectedTab} onValueChange={handleTabChange} className="w-full h-full">
-                <div className={"flex flex-col w-full h-full"}>
+            <div className="flex h-full overflow-hidden">
+              <Tabs value={selectedTab} onValueChange={handleTabChange} className="h-full w-full">
+                <div className={"flex h-full w-full flex-col"}>
                   <div
                     className={cn(
-                      "px-6 py-2 border-b border-custom-border-200 flex items-center gap-4 overflow-hidden w-full justify-between"
+                      "flex w-full items-center justify-between gap-4 overflow-hidden border-b border-subtle bg-surface-1 px-6 py-2"
                     )}
                   >
-                    <Tabs.List className={"my-2 overflow-x-auto flex w-fit"}>
+                    <Tabs.List className={"flex h-7 w-fit overflow-x-auto"}>
                       {ANALYTICS_TABS.map((tab) => (
                         <Tabs.Trigger
                           key={tab.key}
                           value={tab.key}
                           disabled={tab.isDisabled}
                           size="md"
-                          className="px-3"
+                          className="h-6 px-3"
+                          onClick={() => {
+                            if (!tab.isDisabled) {
+                              handleTabChange(tab.key);
+                            }
+                          }}
                         >
                           {tab.label}
                         </Tabs.Trigger>
@@ -115,7 +125,6 @@ function AnalyticsPage({ params }: Route.ComponentProps) {
                   label: "Create a project",
                   onClick: () => {
                     toggleCreateProjectModal(true);
-                    captureClick({ elementName: PROJECT_TRACKER_ELEMENTS.EMPTY_STATE_CREATE_PROJECT_BUTTON });
                   },
                   disabled: !canPerformEmptyStateActions,
                 },
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/browse/[workItem]/header.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/browse/[workItem]/header.tsx
index 7d99ed0e2..88df26053 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/browse/[workItem]/header.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/browse/[workItem]/header.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // plane imports
@@ -30,11 +36,11 @@ export const ProjectWorkItemDetailsHeader = observer(function ProjectWorkItemDet
 
   return (
     <>
-      {projectPreferences.navigationMode === "horizontal" && (
+      {projectPreferences.navigationMode === "TABBED" && (
         <div className="z-20">
-          <Row className="h-header flex gap-2 w-full items-center border-b border-custom-border-200 bg-custom-sidebar-background-100">
-            <div className="flex items-center gap-2 divide-x divide-custom-border-100 h-full w-full">
-              <div className="flex items-center gap-2 size-full flex-1">
+          <Row className="flex h-header w-full items-center gap-2 border-b border-subtle bg-surface-1">
+            <div className="flex h-full w-full items-center gap-2 divide-x divide-subtle">
+              <div className="flex size-full flex-1 items-center gap-2">
                 {sidebarCollapsed && (
                   <div className="shrink-0">
                     <AppSidebarToggleButton />
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/browse/[workItem]/layout.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/browse/[workItem]/layout.tsx
index 48dd7cec7..b8b8a58e6 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/browse/[workItem]/layout.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/browse/[workItem]/layout.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // components
 import { Outlet } from "react-router";
 import { ContentWrapper } from "@/components/core/content-wrapper";
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/browse/[workItem]/page.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/browse/[workItem]/page.tsx
index 1aba8eae8..f2c5aea1a 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/browse/[workItem]/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/browse/[workItem]/page.tsx
@@ -1,9 +1,16 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useEffect } from "react";
 import { observer } from "mobx-react";
 import { useTheme } from "next-themes";
 import useSWR from "swr";
 // plane imports
 import { useTranslation } from "@plane/i18n";
+import type { TIssue } from "@plane/types";
 import { EIssueServiceType } from "@plane/types";
 import { Loader } from "@plane/ui";
 // assets
@@ -12,18 +19,20 @@ import emptyIssueLight from "@/app/assets/empty-state/search/issues-light.webp?u
 // components
 import { EmptyState } from "@/components/common/empty-state";
 import { PageHead } from "@/components/core/page-title";
-import { IssueDetailRoot } from "@/components/issues/issue-detail";
 // hooks
 import { useAppTheme } from "@/hooks/store/use-app-theme";
 import { useIssueDetail } from "@/hooks/store/use-issue-detail";
 import { useProject } from "@/hooks/store/use-project";
 import { useAppRouter } from "@/hooks/use-app-router";
+// layouts
+import { ProjectAuthWrapper } from "@/layouts/auth-layout/project-wrapper";
 // plane web imports
 import { useWorkItemProperties } from "@/plane-web/hooks/use-issue-properties";
-import { ProjectAuthWrapper } from "@/plane-web/layouts/project-wrapper";
+import { WorkItemDetailRoot } from "@/plane-web/components/browse/workItem-detail";
+
 import type { Route } from "./+types/page";
 
-function IssueDetailsPage({ params }: Route.ComponentProps) {
+export const IssueDetailsPage = observer(function IssueDetailsPage({ params }: Route.ComponentProps) {
   // router
   const router = useAppRouter();
   const { workspaceSlug, workItem } = params;
@@ -35,18 +44,21 @@ function IssueDetailsPage({ params }: Route.ComponentProps) {
     fetchIssueWithIdentifier,
     issue: { getIssueById },
   } = useIssueDetail();
-  const { getProjectById } = useProject();
+  const { getProjectById, getProjectByIdentifier } = useProject();
   const { toggleIssueDetailSidebar, issueDetailSidebarCollapsed } = useAppTheme();
 
   const [projectIdentifier, sequence_id] = workItem.split("-");
 
   // fetching issue details
-  const { data, isLoading, error } = useSWR(`ISSUE_DETAIL_${workspaceSlug}_${projectIdentifier}_${sequence_id}`, () =>
-    fetchIssueWithIdentifier(workspaceSlug.toString(), projectIdentifier, sequence_id)
+  const { data, isLoading, error } = useSWR<TIssue, Error>(
+    `ISSUE_DETAIL_${workspaceSlug}_${projectIdentifier}_${sequence_id}`,
+    () => fetchIssueWithIdentifier(workspaceSlug.toString(), projectIdentifier, sequence_id)
   );
-  const issueId = data?.id;
-  const projectId = data?.project_id;
+
   // derived values
+  const projectDetails = getProjectByIdentifier(projectIdentifier);
+  const issueId = data?.id;
+  const projectId = data?.project_id ?? projectDetails?.id ?? "";
   const issue = getIssueById(issueId?.toString() || "") || undefined;
   const project = (issue?.project_id && getProjectById(issue?.project_id)) || undefined;
   const issueLoader = !issue || isLoading;
@@ -77,51 +89,56 @@ function IssueDetailsPage({ params }: Route.ComponentProps) {
     if (data?.is_intake) {
       router.push(`/${workspaceSlug}/projects/${data.project_id}/intake/?currentTab=open&inboxIssueId=${data?.id}`);
     }
-  }, [workspaceSlug, data]);
+  }, [workspaceSlug, data, router]);
+
+  if (error && !isLoading) {
+    return (
+      <EmptyState
+        image={resolvedTheme === "dark" ? emptyIssueDark : emptyIssueLight}
+        title={t("issue.empty_state.issue_detail.title")}
+        description={t("issue.empty_state.issue_detail.description")}
+        primaryButton={{
+          text: t("issue.empty_state.issue_detail.primary_button.text"),
+          onClick: () => router.push(`/${workspaceSlug}/workspace-views/all-issues/`),
+        }}
+      />
+    );
+  }
+
+  if (issueLoader) {
+    return (
+      <Loader className="flex h-full gap-5 p-5">
+        <div className="basis-2/3 space-y-2">
+          <Loader.Item height="30px" width="40%" />
+          <Loader.Item height="15px" width="60%" />
+          <Loader.Item height="15px" width="60%" />
+          <Loader.Item height="15px" width="40%" />
+        </div>
+        <div className="basis-1/3 space-y-3">
+          <Loader.Item height="30px" />
+          <Loader.Item height="30px" />
+          <Loader.Item height="30px" />
+          <Loader.Item height="30px" />
+        </div>
+      </Loader>
+    );
+  }
 
   return (
     <>
       <PageHead title={pageTitle} />
-      {error && !issueLoader ? (
-        <EmptyState
-          image={resolvedTheme === "dark" ? emptyIssueDark : emptyIssueLight}
-          title={t("issue.empty_state.issue_detail.title")}
-          description={t("issue.empty_state.issue_detail.description")}
-          primaryButton={{
-            text: t("issue.empty_state.issue_detail.primary_button.text"),
-            onClick: () => router.push(`/${workspaceSlug}/workspace-views/all-issues/`),
-          }}
-        />
-      ) : issueLoader ? (
-        <Loader className="flex h-full gap-5 p-5">
-          <div className="basis-2/3 space-y-2">
-            <Loader.Item height="30px" width="40%" />
-            <Loader.Item height="15px" width="60%" />
-            <Loader.Item height="15px" width="60%" />
-            <Loader.Item height="15px" width="40%" />
-          </div>
-          <div className="basis-1/3 space-y-3">
-            <Loader.Item height="30px" />
-            <Loader.Item height="30px" />
-            <Loader.Item height="30px" />
-            <Loader.Item height="30px" />
-          </div>
-        </Loader>
-      ) : (
-        projectId &&
-        issueId && (
-          <ProjectAuthWrapper workspaceSlug={workspaceSlug} projectId={projectId}>
-            <IssueDetailRoot
-              workspaceSlug={workspaceSlug}
-              projectId={projectId}
-              issueId={issueId}
-              is_archived={!!issue?.archived_at}
-            />
-          </ProjectAuthWrapper>
-        )
+      {workspaceSlug && projectId && issueId && (
+        <ProjectAuthWrapper workspaceSlug={workspaceSlug} projectId={projectId}>
+          <WorkItemDetailRoot
+            workspaceSlug={workspaceSlug.toString()}
+            projectId={projectId.toString()}
+            issueId={issueId.toString()}
+            issue={issue}
+          />
+        </ProjectAuthWrapper>
       )}
     </>
   );
-}
+});
 
-export default observer(IssueDetailsPage);
+export default IssueDetailsPage;
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/browse/[workItem]/work-item-header.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/browse/[workItem]/work-item-header.tsx
index a1d983b81..dd7978fe5 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/browse/[workItem]/work-item-header.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/browse/[workItem]/work-item-header.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
@@ -40,7 +46,7 @@ export const WorkItemDetailsHeader = observer(function WorkItemDetailsHeader() {
               <BreadcrumbLink
                 label="Work Items"
                 href={`/${workspaceSlug}/projects/${projectId}/issues/`}
-                icon={<WorkItemsIcon className="h-4 w-4 text-custom-text-300" />}
+                icon={<WorkItemsIcon className="h-4 w-4 text-tertiary" />}
               />
             }
           />
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/drafts/header.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/drafts/header.tsx
index c18051384..a063df525 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/drafts/header.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/drafts/header.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useState } from "react";
 import { observer } from "mobx-react";
 import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
@@ -46,7 +52,7 @@ export const WorkspaceDraftHeader = observer(function WorkspaceDraftHeader() {
             <Breadcrumbs>
               <Breadcrumbs.Item
                 component={
-                  <BreadcrumbLink label={t("drafts")} icon={<DraftIcon className="h-4 w-4 text-custom-text-300" />} />
+                  <BreadcrumbLink label={t("drafts")} icon={<DraftIcon className="h-4 w-4 text-tertiary" />} />
                 }
               />
             </Breadcrumbs>
@@ -62,7 +68,7 @@ export const WorkspaceDraftHeader = observer(function WorkspaceDraftHeader() {
           {joinedProjectIds && joinedProjectIds.length > 0 && (
             <Button
               variant="primary"
-              size="sm"
+              size="lg"
               className="items-center gap-1"
               onClick={() => setIsDraftIssueModalOpen(true)}
               disabled={!isAuthorizedUser}
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/drafts/layout.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/drafts/layout.tsx
index 539d35e77..d7df53f90 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/drafts/layout.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/drafts/layout.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // components
 import { Outlet } from "react-router";
 import { AppHeader } from "@/components/core/app-header";
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/drafts/page.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/drafts/page.tsx
index 7c3814c6d..300fbce17 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/drafts/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/drafts/page.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // components
 import { PageHead } from "@/components/core/page-title";
 import { WorkspaceDraftIssuesRoot } from "@/components/issues/workspace-draft";
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/extended-project-sidebar.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/extended-project-sidebar.tsx
index e1532ac2b..348559cf0 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/extended-project-sidebar.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/extended-project-sidebar.tsx
@@ -1,11 +1,17 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useCallback, useRef, useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // plane imports
-import { Plus, Search } from "lucide-react";
 import { EUserPermissions, EUserPermissionsLevel, PROJECT_TRACKER_ELEMENTS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { EmptyStateCompact } from "@plane/propel/empty-state";
+import { PlusIcon, SearchIcon } from "@plane/propel/icons";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import { Tooltip } from "@plane/propel/tooltip";
 import { copyUrlToClipboard, orderJoinedProjects } from "@plane/utils";
@@ -104,28 +110,28 @@ export const ExtendedProjectSidebar = observer(function ExtendedProjectSidebar()
         excludedElementId="extended-project-sidebar-toggle"
         className="px-0"
       >
-        <div className="flex flex-col gap-1 w-full sticky top-4 px-4">
+        <div className="sticky top-4 flex w-full flex-col gap-1 px-4">
           <div className="flex items-center justify-between">
-            <span className="text-sm font-semibold text-custom-text-300 py-1.5">Projects</span>
+            <span className="py-1.5 text-13 font-semibold text-tertiary">Projects</span>
             {isAuthorizedUser && (
               <Tooltip tooltipHeading={t("create_project")} tooltipContent="">
                 <button
                   type="button"
                   data-ph-element={PROJECT_TRACKER_ELEMENTS.EXTENDED_SIDEBAR_ADD_BUTTON}
-                  className="p-0.5 rounded hover:bg-custom-sidebar-background-80 flex-shrink-0 text-custom-text-300 hover:text-custom-text-200 transition-colors"
+                  className="flex-shrink-0 rounded-sm p-0.5 text-tertiary transition-colors hover:bg-layer-1 hover:text-secondary"
                   onClick={() => {
                     setIsProjectModalOpen(true);
                   }}
                 >
-                  <Plus className="size-3" />
+                  <PlusIcon className="size-3" />
                 </button>
               </Tooltip>
             )}
           </div>
-          <div className="ml-auto flex items-center gap-1.5 rounded-md border border-custom-border-200 bg-custom-background-100 px-2.5 py-1 w-full">
-            <Search className="h-3.5 w-3.5 text-custom-text-400" />
+          <div className="ml-auto flex w-full items-center gap-1.5 rounded-md border border-subtle bg-surface-1 px-2.5 py-1">
+            <SearchIcon className="h-3.5 w-3.5 text-placeholder" />
             <input
-              className="w-full max-w-[234px] border-none bg-transparent text-sm outline-none placeholder:text-custom-text-400"
+              className="w-full max-w-[234px] border-none bg-transparent text-13 outline-none placeholder:text-placeholder"
               placeholder={t("search")}
               value={searchQuery}
               autoFocus
@@ -134,7 +140,7 @@ export const ExtendedProjectSidebar = observer(function ExtendedProjectSidebar()
           </div>
         </div>
         {filteredProjects.length === 0 ? (
-          <div className="flex flex-col items-center mt-4 p-10">
+          <div className="mt-4 flex flex-col items-center p-10">
             <EmptyStateCompact
               title={t("common_empty_state.search.title")}
               description={t("common_empty_state.search.description")}
@@ -144,7 +150,7 @@ export const ExtendedProjectSidebar = observer(function ExtendedProjectSidebar()
             />
           </div>
         ) : (
-          <div className="flex flex-col gap-0.5 overflow-x-hidden overflow-y-auto vertical-scrollbar scrollbar-sm flex-grow mt-4 pl-9 pr-2">
+          <div className="vertical-scrollbar mt-4 flex scrollbar-sm flex-grow flex-col gap-0.5 overflow-x-hidden overflow-y-auto pr-2 pl-9">
             {filteredProjects.map((projectId, index) => (
               <SidebarProjectsListItem
                 key={projectId}
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/extended-sidebar-wrapper.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/extended-sidebar-wrapper.tsx
index a6fcfc73e..561c21ed4 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/extended-sidebar-wrapper.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/extended-sidebar-wrapper.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React, { useEffect } from "react";
 import { observer } from "mobx-react";
 // plane imports
@@ -38,10 +44,10 @@ export const ExtendedSidebarWrapper = observer(function ExtendedSidebarWrapper(p
       id={excludedElementId}
       ref={extendedSidebarRef}
       className={cn(
-        "absolute h-full z-[21] flex flex-col py-2 transform transition-all duration-300 ease-in-out bg-custom-sidebar-background-100 border-r border-custom-sidebar-border-200 p-4 shadow-sm",
+        "shadow-sm absolute z-[21] flex h-full transform flex-col border-r border-subtle bg-surface-1 p-4 py-2 transition-all duration-300 ease-in-out",
         {
           "opacity-100": isExtendedSidebarOpened,
-          "opacity-0 hidden": !isExtendedSidebarOpened,
+          "hidden opacity-0": !isExtendedSidebarOpened,
         },
         className
       )}
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/extended-sidebar.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/extended-sidebar.tsx
index 4c51edcb1..0b8ad77aa 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/extended-sidebar.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/extended-sidebar.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useCallback, useMemo, useRef } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/header.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/header.tsx
index 564470d3d..f15d76738 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/header.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/header.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import { Shapes } from "lucide-react";
 // plane imports
@@ -24,10 +30,7 @@ export const WorkspaceDashboardHeader = observer(function WorkspaceDashboardHead
             <Breadcrumbs>
               <Breadcrumbs.Item
                 component={
-                  <BreadcrumbLink
-                    label={t("home.title")}
-                    icon={<HomeIcon className="h-4 w-4 text-custom-text-300" />}
-                  />
+                  <BreadcrumbLink label={t("home.title")} icon={<HomeIcon className="h-4 w-4 text-tertiary" />} />
                 }
               />
             </Breadcrumbs>
@@ -35,13 +38,13 @@ export const WorkspaceDashboardHeader = observer(function WorkspaceDashboardHead
         </Header.LeftItem>
         <Header.RightItem>
           <Button
-            variant="neutral-primary"
-            size="sm"
+            variant="secondary"
+            size="lg"
             onClick={() => toggleWidgetSettings(true)}
             className="my-auto mb-0"
+            prependIcon={<Shapes />}
           >
-            <Shapes size={16} />
-            <div className="hidden text-xs font-medium sm:hidden md:block">{t("home.manage_widgets")}</div>
+            <div className="hidden sm:hidden md:block">{t("home.manage_widgets")}</div>
           </Button>
         </Header.RightItem>
       </Header>
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/layout.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/layout.tsx
index b93891fec..090eefbf6 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/layout.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/layout.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import { Outlet } from "react-router";
 import { ProjectsAppPowerKProvider } from "@/components/power-k/projects-app-provider";
@@ -9,12 +15,12 @@ function WorkspaceLayout() {
   return (
     <>
       <ProjectsAppPowerKProvider />
-      <div className="relative flex flex-col h-full w-full overflow-hidden rounded-lg border border-custom-border-200">
-        <div id="full-screen-portal" className="inset-0 absolute w-full" />
+      <div className="relative flex h-full w-full flex-col overflow-hidden rounded-lg border border-subtle">
+        <div id="full-screen-portal" className="absolute inset-0 w-full" />
         <div className="relative flex size-full overflow-hidden">
           <ProjectAppSidebar />
           <ExtendedProjectSidebar />
-          <main className="relative flex h-full w-full flex-col overflow-hidden bg-custom-background-100">
+          <main className="relative flex h-full w-full flex-col overflow-hidden bg-surface-1">
             <Outlet />
           </main>
         </div>
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/notifications/layout.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/notifications/layout.tsx
index 13aacc02b..5188dfd41 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/notifications/layout.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/notifications/layout.tsx
@@ -1,12 +1,18 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { Outlet } from "react-router";
 // components
 import { NotificationsSidebarRoot } from "@/components/workspace-notifications/sidebar";
 
 export default function ProjectInboxIssuesLayout() {
   return (
-    <div className="relative w-full h-full overflow-hidden flex items-center">
+    <div className="relative flex h-full w-full items-center overflow-hidden">
       <NotificationsSidebarRoot />
-      <div className="w-full h-full overflow-hidden overflow-y-auto">
+      <div className="h-full w-full overflow-hidden overflow-y-auto">
         <Outlet />
       </div>
     </div>
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/notifications/page.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/notifications/page.tsx
index a9b293bdc..ad99b55d3 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/notifications/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/notifications/page.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 // plane imports
 import { useTranslation } from "@plane/i18n";
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/page.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/page.tsx
index 86baf2781..4d4547ae2 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/page.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 // components
 import { useTranslation } from "@plane/i18n";
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/[profileViewId]/page.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/[profileViewId]/page.tsx
index 689a76173..1f1fe4ce8 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/[profileViewId]/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/[profileViewId]/page.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 // components
 import { PageHead } from "@/components/core/page-title";
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/activity/page.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/activity/page.tsx
index 95e723184..69e02a43b 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/activity/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/activity/page.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useState } from "react";
 import { observer } from "mobx-react";
 // plane imports
@@ -51,14 +57,14 @@ function ProfileActivityPage() {
       <PageHead title="Profile - Activity" />
       <div className="flex h-full w-full flex-col overflow-hidden py-5">
         <div className="flex items-center justify-between gap-2 px-5 md:px-9">
-          <h3 className="text-lg font-medium">{t("profile.stats.recent_activity.title")}</h3>
+          <h3 className="text-16 font-medium">{t("profile.stats.recent_activity.title")}</h3>
           {canDownloadActivity && <DownloadActivityButton />}
         </div>
-        <div className="vertical-scrollbar scrollbar-md flex h-full flex-col overflow-y-auto px-5 md:px-9">
+        <div className="vertical-scrollbar flex scrollbar-md h-full flex-col overflow-y-auto px-5 md:px-9">
           {activityPages}
           {pageCount < totalPages && resultsCount !== 0 && (
-            <div className="flex w-full items-center justify-center text-xs">
-              <Button variant="accent-primary" size="sm" onClick={handleLoadMore}>
+            <div className="flex w-full items-center justify-center text-11">
+              <Button variant="secondary" onClick={handleLoadMore}>
                 {t("common.load_more")}
               </Button>
             </div>
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/header.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/header.tsx
index a2dfcdc3c..296b780c9 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/header.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/header.tsx
@@ -1,5 +1,10 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // ui
-import type { FC } from "react";
 import { observer } from "mobx-react";
 import { useParams, useRouter } from "next/navigation";
 import { PanelRight } from "lucide-react";
@@ -8,13 +13,13 @@ import { useTranslation } from "@plane/i18n";
 import { YourWorkIcon, ChevronDownIcon } from "@plane/propel/icons";
 import type { IUserProfileProjectSegregation } from "@plane/types";
 import { Breadcrumbs, Header, CustomMenu } from "@plane/ui";
-import { cn } from "@plane/utils";
 // components
 import { BreadcrumbLink } from "@/components/common/breadcrumb-link";
 import { ProfileIssuesFilter } from "@/components/profile/profile-issues-filter";
 // hooks
 import { useAppTheme } from "@/hooks/store/use-app-theme";
 import { useUser, useUserPermissions } from "@/hooks/store/user";
+import { Button } from "@plane/propel/button";
 
 type TUserProfileHeader = {
   userProjectsData: IUserProfileProjectSegregation | undefined;
@@ -57,7 +62,7 @@ export const UserProfileHeader = observer(function UserProfileHeader(props: TUse
               <BreadcrumbLink
                 label={breadcrumbLabel}
                 disableTooltip
-                icon={<YourWorkIcon className="h-4 w-4 text-custom-text-300" />}
+                icon={<YourWorkIcon className="h-4 w-4 text-tertiary" />}
               />
             }
           />
@@ -68,15 +73,15 @@ export const UserProfileHeader = observer(function UserProfileHeader(props: TUse
         <div className="flex gap-4 md:hidden">
           <CustomMenu
             maxHeight={"md"}
-            className="flex flex-grow justify-center text-sm text-custom-text-200"
+            className="flex flex-grow justify-center text-13 text-secondary"
             placement="bottom-start"
             customButton={
-              <div className="flex items-center gap-2 rounded-md border border-custom-border-200 px-2 py-1.5">
-                <span className="flex flex-grow justify-center text-sm text-custom-text-200">{type}</span>
-                <ChevronDownIcon className="h-4 w-4 text-custom-text-400" />
+              <div className="flex items-center gap-2 rounded-md border border-subtle px-2 py-1.5">
+                <span className="flex flex-grow justify-center text-13 text-secondary">{type}</span>
+                <ChevronDownIcon className="h-4 w-4 text-placeholder" />
               </div>
             }
-            customButtonClassName="flex flex-grow justify-center text-custom-text-200 text-sm"
+            customButtonClassName="flex flex-grow justify-center text-secondary text-13"
             closeOnSelect
           >
             <></>
@@ -86,23 +91,22 @@ export const UserProfileHeader = observer(function UserProfileHeader(props: TUse
                 key={tab.route}
                 onClick={() => router.push(`/${workspaceSlug}/profile/${userId}/${tab.route}`)}
               >
-                <span className="w-full text-custom-text-300">{t(tab.i18n_label)}</span>
+                <span className="w-full text-tertiary">{t(tab.i18n_label)}</span>
               </CustomMenu.MenuItem>
             ))}
           </CustomMenu>
-          <button
-            className="block transition-all md:hidden"
-            onClick={() => {
-              toggleProfileSidebar();
-            }}
-          >
-            <PanelRight
-              className={cn(
-                "block h-4 w-4 md:hidden",
-                !profileSidebarCollapsed ? "text-[#3E63DD]" : "text-custom-text-200"
-              )}
-            />
-          </button>
+          <div className="shrink-0 md:hidden">
+            <Button
+              variant="ghost"
+              size="lg"
+              onClick={() => {
+                toggleProfileSidebar();
+              }}
+              appendIcon={
+                <PanelRight className={!profileSidebarCollapsed ? "text-accent-primary" : "text-secondary"} />
+              }
+            ></Button>
+          </div>
         </div>
       </Header.RightItem>
     </Header>
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/layout.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/layout.tsx
index 4e100b0c3..a07a9e311 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/layout.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/layout.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import { usePathname } from "next/navigation";
 import { Outlet } from "react-router";
@@ -53,8 +59,8 @@ function UseProfileLayout({ params }: Route.ComponentProps) {
     <>
       {/* Passing the type prop from the current route value as we need the header as top most component.
             TODO: We are depending on the route path to handle the mobile header type. If the path changes, this logic will break. */}
-      <div className="h-full w-full flex flex-col md:flex-row overflow-hidden">
-        <div className="h-full w-full flex flex-col overflow-hidden">
+      <div className="flex h-full w-full flex-col overflow-hidden md:flex-row">
+        <div className="flex h-full w-full flex-col overflow-hidden">
           <AppHeader
             header={
               <UserProfileHeader
@@ -66,15 +72,15 @@ function UseProfileLayout({ params }: Route.ComponentProps) {
             mobileHeader={isIssuesTab && <ProfileIssuesMobileHeader />}
           />
           <ContentWrapper>
-            <div className="h-full w-full flex flex-row md:flex-col  md:overflow-hidden">
+            <div className="flex h-full w-full flex-row md:flex-col md:overflow-hidden">
               <div className="flex w-full flex-col md:h-full md:overflow-hidden">
                 <ProfileNavbar isAuthorized={!!isAuthorized} />
                 {isAuthorized || !isAuthorizedPath ? (
-                  <div className={`w-full overflow-hidden h-full`}>
+                  <div className={`h-full w-full overflow-hidden`}>
                     <Outlet />
                   </div>
                 ) : (
-                  <div className="grid h-full w-full place-items-center text-custom-text-200">
+                  <div className="grid h-full w-full place-items-center text-secondary">
                     {t("you_do_not_have_the_permission_to_access_this_page")}
                   </div>
                 )}
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/mobile-header.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/mobile-header.tsx
index 989741f3b..0b9dded5e 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/mobile-header.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/mobile-header.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useCallback } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
@@ -78,18 +84,18 @@ export const ProfileIssuesMobileHeader = observer(function ProfileIssuesMobileHe
   );
 
   return (
-    <div className="flex justify-evenly border-b border-custom-border-200 py-2 md:hidden">
+    <div className="flex justify-evenly border-b border-subtle py-2 md:hidden">
       <CustomMenu
         maxHeight={"md"}
-        className="flex flex-grow justify-center text-sm text-custom-text-200"
+        className="flex flex-grow justify-center text-13 text-secondary"
         placement="bottom-start"
         customButton={
-          <div className="flex flex-center text-sm text-custom-text-200">
+          <div className="flex-center flex text-13 text-secondary">
             {t("common.layout")}
-            <ChevronDownIcon className="ml-2  h-4 w-4 text-custom-text-200 my-auto" strokeWidth={2} />
+            <ChevronDownIcon className="my-auto ml-2 h-4 w-4 text-secondary" strokeWidth={2} />
           </div>
         }
-        customButtonClassName="flex flex-center text-custom-text-200 text-sm"
+        customButtonClassName="flex flex-center text-secondary text-13"
         closeOnSelect
       >
         {ISSUE_LAYOUTS.map((layout, index) => {
@@ -103,19 +109,19 @@ export const ProfileIssuesMobileHeader = observer(function ProfileIssuesMobileHe
               className="flex items-center gap-2"
             >
               <IssueLayoutIcon layout={ISSUE_LAYOUTS[index].key} className="h-3 w-3" />
-              <div className="text-custom-text-300">{t(layout.i18n_title)}</div>
+              <div className="text-tertiary">{t(layout.i18n_title)}</div>
             </CustomMenu.MenuItem>
           );
         })}
       </CustomMenu>
-      <div className="flex flex-grow items-center justify-center border-l border-custom-border-200 text-sm text-custom-text-200">
+      <div className="flex flex-grow items-center justify-center border-l border-subtle text-13 text-secondary">
         <FiltersDropdown
           title={t("common.display")}
           placement="bottom-end"
           menuButton={
-            <div className="flex flex-center text-sm text-custom-text-200">
+            <div className="flex-center flex text-13 text-secondary">
               {t("common.display")}
-              <ChevronDownIcon className="ml-2 h-4 w-4 text-custom-text-200" strokeWidth={2} />
+              <ChevronDownIcon className="ml-2 h-4 w-4 text-secondary" strokeWidth={2} />
             </div>
           }
         >
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/navbar.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/navbar.tsx
index 3e135687e..4d99983dd 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/navbar.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/navbar.tsx
@@ -1,13 +1,16 @@
-import React from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
 
 import Link from "next/link";
 import { useParams, usePathname } from "next/navigation";
+// plane imports
 import { PROFILE_VIEWER_TAB, PROFILE_ADMINS_TAB } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-
-// components
-// constants
 import { Header, EHeaderVariant } from "@plane/ui";
+import { cn } from "@plane/utils";
 
 type Props = {
   isAuthorized: boolean;
@@ -27,11 +30,13 @@ export function ProfileNavbar(props: Props) {
         {tabsList.map((tab) => (
           <Link key={tab.route} href={`/${workspaceSlug}/profile/${userId}/${tab.route}`}>
             <span
-              className={`flex whitespace-nowrap border-b-2 p-4 text-sm font-medium outline-none ${
-                pathname === `/${workspaceSlug}/profile/${userId}${tab.selected}`
-                  ? "border-custom-primary-100 text-custom-primary-100"
-                  : "border-transparent"
-              }`}
+              className={cn(
+                `flex border-b-2 p-4 text-13 font-medium whitespace-nowrap text-tertiary outline-none hover:text-primary ${
+                  pathname === `/${workspaceSlug}/profile/${userId}${tab.selected}`
+                    ? "border-accent-strong text-accent-primary hover:text-accent-primary"
+                    : "border-transparent"
+                }`
+              )}
             >
               {t(tab.i18n_label)}
             </span>
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/page.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/page.tsx
index 6a670e672..0fac00662 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/page.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import useSWR from "swr";
 // plane imports
 import { GROUP_CHOICES } from "@plane/constants";
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/cycles/layout.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/cycles/layout.tsx
index d8212f6ed..1b3fc1ef3 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/cycles/layout.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/cycles/layout.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { Outlet } from "react-router";
 // components
 import { AppHeader } from "@/components/core/app-header";
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/cycles/page.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/cycles/page.tsx
index 077ab4edc..d25a11bf8 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/cycles/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/cycles/page.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 // components
 import { PageHead } from "@/components/core/page-title";
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/header.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/header.tsx
index 18d8dab9b..f7b5e90e5 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/header.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/header.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 import { ArchiveIcon, CycleIcon, ModuleIcon, WorkItemsIcon } from "@plane/propel/icons";
@@ -72,7 +78,7 @@ export const ProjectArchivesHeader = observer(function ProjectArchivesHeader(pro
                 <BreadcrumbLink
                   href={`/${workspaceSlug}/projects/${projectId}/archives/issues`}
                   label="Archives"
-                  icon={<ArchiveIcon className="h-4 w-4 text-custom-text-300" />}
+                  icon={<ArchiveIcon className="h-4 w-4 text-tertiary" />}
                 />
               }
             />
@@ -81,7 +87,7 @@ export const ProjectArchivesHeader = observer(function ProjectArchivesHeader(pro
                 component={
                   <BreadcrumbLink
                     label={activeTabBreadcrumbDetail.label}
-                    icon={<activeTabBreadcrumbDetail.icon className="h-4 w-4 text-custom-text-300" />}
+                    icon={<activeTabBreadcrumbDetail.icon className="h-4 w-4 text-tertiary" />}
                   />
                 }
               />
@@ -93,7 +99,7 @@ export const ProjectArchivesHeader = observer(function ProjectArchivesHeader(pro
               tooltipContent={`There are ${issueCount} ${issueCount > 1 ? "work items" : "work item"} in project's archived`}
               position="bottom"
             >
-              <span className="cursor-default flex items-center text-center justify-center px-2.5 py-0.5 flex-shrink-0 bg-custom-primary-100/20 text-custom-primary-100 text-xs font-semibold rounded-xl">
+              <span className="flex flex-shrink-0 cursor-default items-center justify-center rounded-xl bg-accent-primary/20 px-2.5 py-0.5 text-center text-11 font-semibold text-accent-primary">
                 {issueCount}
               </span>
             </Tooltip>
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/issues/(detail)/[archivedIssueId]/page.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/issues/(detail)/[archivedIssueId]/page.tsx
index 6b7123a2b..592bf09a5 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/issues/(detail)/[archivedIssueId]/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/issues/(detail)/[archivedIssueId]/page.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import { useRouter } from "next/navigation";
 import useSWR from "swr";
@@ -67,17 +73,16 @@ function ArchivedIssueDetailsPage({ params }: Route.ComponentProps) {
             icon={<ArchiveIcon className="size-4" />}
             action={
               <Button
-                variant="neutral-primary"
-                size="sm"
+                variant="secondary"
                 onClick={() => router.push(`/${workspaceSlug}/projects/${projectId}/archives/issues/`)}
               >
                 Go to archives
               </Button>
             }
-            className="border-b border-custom-border-200"
+            className="border-b border-subtle"
           />
           <div className="flex h-full overflow-hidden">
-            <div className="h-full w-full space-y-3 divide-y-2 divide-custom-border-200 overflow-y-auto">
+            <div className="h-full w-full space-y-3 divide-y-2 divide-subtle-1 overflow-y-auto">
               <IssueDetailRoot
                 workspaceSlug={workspaceSlug}
                 projectId={projectId}
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/issues/(detail)/header.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/issues/(detail)/header.tsx
index 21d14d596..e8324c2f6 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/issues/(detail)/header.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/issues/(detail)/header.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 import useSWR from "swr";
@@ -41,7 +47,7 @@ export const ProjectArchivedIssueDetailsHeader = observer(function ProjectArchiv
               <BreadcrumbLink
                 href={`/${workspaceSlug}/projects/${projectId}/archives/issues`}
                 label="Archives"
-                icon={<ArchiveIcon className="h-4 w-4 text-custom-text-300" />}
+                icon={<ArchiveIcon className="h-4 w-4 text-tertiary" />}
               />
             }
           />
@@ -50,7 +56,7 @@ export const ProjectArchivedIssueDetailsHeader = observer(function ProjectArchiv
               <BreadcrumbLink
                 href={`/${workspaceSlug}/projects/${projectId}/archives/issues`}
                 label="Work items"
-                icon={<WorkItemsIcon className="h-4 w-4 text-custom-text-300" />}
+                icon={<WorkItemsIcon className="h-4 w-4 text-tertiary" />}
               />
             }
           />
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/issues/(detail)/layout.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/issues/(detail)/layout.tsx
index acb4f7189..1d99a7320 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/issues/(detail)/layout.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/issues/(detail)/layout.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { Outlet } from "react-router";
 // components
 import { AppHeader } from "@/components/core/app-header";
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/issues/(list)/layout.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/issues/(list)/layout.tsx
index 83dffbaf9..6385a3a1c 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/issues/(list)/layout.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/issues/(list)/layout.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { Outlet } from "react-router";
 // components
 import { AppHeader } from "@/components/core/app-header";
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/issues/(list)/page.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/issues/(list)/page.tsx
index 51c9c90d3..0a493cb3d 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/issues/(list)/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/issues/(list)/page.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 // components
 import { PageHead } from "@/components/core/page-title";
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/modules/layout.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/modules/layout.tsx
index d04808bf8..0101dcf22 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/modules/layout.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/modules/layout.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { Outlet } from "react-router";
 // components
 import { AppHeader } from "@/components/core/app-header";
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/modules/page.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/modules/page.tsx
index 53c50f652..39a6a16a6 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/modules/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/modules/page.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 // components
 import { PageHead } from "@/components/core/page-title";
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/[cycleId]/page.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/[cycleId]/page.tsx
index 361912ca9..49e6479ad 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/[cycleId]/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/[cycleId]/page.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 // plane imports
 import { cn } from "@plane/utils";
@@ -66,12 +72,8 @@ function CycleDetailPage({ params }: Route.ComponentProps) {
             {!isSidebarCollapsed && (
               <div
                 className={cn(
-                  "flex h-full w-[21.5rem] flex-shrink-0 flex-col gap-3.5 overflow-y-auto border-l border-custom-border-100 bg-custom-sidebar-background-100 px-4 duration-300 vertical-scrollbar scrollbar-sm absolute right-0 z-[13]"
+                  "vertical-scrollbar absolute right-0 z-13 flex scrollbar-sm h-full w-[21.5rem] flex-shrink-0 flex-col gap-3.5 overflow-y-auto border-l border-subtle bg-surface-1 px-4 shadow-raised-200 duration-300"
                 )}
-                style={{
-                  boxShadow:
-                    "0px 1px 4px 0px rgba(0, 0, 0, 0.06), 0px 2px 4px 0px rgba(16, 24, 40, 0.06), 0px 1px 8px -1px rgba(16, 24, 40, 0.06)",
-                }}
               >
                 <CycleDetailsSidebar
                   handleClose={toggleSidebar}
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/header.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/header.tsx
index 2fb322902..05f4cca2d 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/header.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/header.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useCallback, useRef, useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
@@ -14,6 +20,7 @@ import {
 import { usePlatformOS } from "@plane/hooks";
 import { useTranslation } from "@plane/i18n";
 import { Button } from "@plane/propel/button";
+import { IconButton } from "@plane/propel/icon-button";
 import { CycleIcon } from "@plane/propel/icons";
 import { Tooltip } from "@plane/propel/tooltip";
 import type { ICustomSearchSelectOption, IIssueDisplayFilterOptions, IIssueDisplayProperties } from "@plane/types";
@@ -137,7 +144,7 @@ export const CycleIssuesHeader = observer(function CycleIssuesHeader() {
                   <BreadcrumbLink
                     label="Cycles"
                     href={`/${workspaceSlug}/projects/${projectId}/cycles/`}
-                    icon={<CycleIcon className="h-4 w-4 text-custom-text-300" />}
+                    icon={<CycleIcon className="h-4 w-4 text-tertiary" />}
                   />
                 }
               />
@@ -152,7 +159,7 @@ export const CycleIssuesHeader = observer(function CycleIssuesHeader() {
                     title={cycleDetails?.name}
                     icon={
                       <Breadcrumbs.Icon>
-                        <CycleIcon className="size-4 flex-shrink-0 text-custom-text-300" />
+                        <CycleIcon className="size-4 flex-shrink-0 text-tertiary" />
                       </Breadcrumbs.Icon>
                     }
                     isLast
@@ -169,7 +176,7 @@ export const CycleIssuesHeader = observer(function CycleIssuesHeader() {
                 } in this cycle`}
                 position="bottom"
               >
-                <span className="flex flex-shrink-0 cursor-default items-center justify-center rounded-xl bg-custom-primary-100/20 px-2 text-center text-xs font-semibold text-custom-primary-100">
+                <span className="flex flex-shrink-0 cursor-default items-center justify-center rounded-xl bg-accent-primary/20 px-2 text-center text-11 font-semibold text-accent-primary">
                   {workItemsCount}
                 </span>
               </Tooltip>
@@ -177,7 +184,7 @@ export const CycleIssuesHeader = observer(function CycleIssuesHeader() {
           </div>
         </Header.LeftItem>
         <Header.RightItem className="items-center">
-          <div className="hidden items-center gap-2 md:flex ">
+          <div className="hidden items-center gap-2 md:flex">
             <div className="hidden @4xl:flex">
               <LayoutSelection
                 layouts={[
@@ -226,39 +233,41 @@ export const CycleIssuesHeader = observer(function CycleIssuesHeader() {
 
             {canUserCreateIssue && (
               <>
-                <Button onClick={() => setAnalyticsModal(true)} variant="neutral-primary" size="sm">
-                  <div className="hidden @4xl:flex">Analytics</div>
-                  <div className="flex @4xl:hidden">
+                <Button onClick={() => setAnalyticsModal(true)} variant="secondary" size="lg">
+                  <span className="hidden @4xl:flex">Analytics</span>
+                  <span className="@4xl:hidden">
                     <ChartNoAxesColumn className="size-3.5" />
-                  </div>
+                  </span>
                 </Button>
                 {!isCompletedCycle && (
                   <Button
-                    className="h-full self-start"
+                    variant="primary"
+                    size="lg"
                     onClick={() => {
                       toggleCreateIssueModal(true, EIssuesStoreType.CYCLE);
                     }}
                     data-ph-element={WORK_ITEM_TRACKER_ELEMENTS.HEADER_ADD_BUTTON.CYCLE}
-                    size="sm"
                   >
                     {t("issue.add.label")}
                   </Button>
                 )}
               </>
             )}
-            <button
-              type="button"
-              className="p-1.5 rounded outline-none hover:bg-custom-sidebar-background-80 bg-custom-background-80/70"
+            <IconButton
+              variant="tertiary"
+              size="lg"
+              icon={PanelRight}
               onClick={toggleSidebar}
-            >
-              <PanelRight className={cn("h-4 w-4", !isSidebarCollapsed ? "text-[#3E63DD]" : "text-custom-text-200")} />
-            </button>
+              className={cn({
+                "bg-accent-subtle text-accent-primary": !isSidebarCollapsed,
+              })}
+            />
             <CycleQuickActions
               parentRef={parentRef}
               cycleId={cycleId}
               projectId={projectId}
               workspaceSlug={workspaceSlug}
-              customClassName="flex-shrink-0 flex items-center justify-center size-[26px] bg-custom-background-80/70 rounded"
+              customClassName="flex-shrink-0 flex items-center justify-center size-[26px] bg-layer-1/70 rounded-sm"
             />
           </div>
         </Header.RightItem>
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/layout.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/layout.tsx
index 40c0d7b11..2d92265f4 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/layout.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/layout.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { Outlet } from "react-router";
 // components
 import { AppHeader } from "@/components/core/app-header";
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/mobile-header.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/mobile-header.tsx
index 5b0610622..56ef5ef3a 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/mobile-header.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/mobile-header.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useCallback, useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
@@ -90,15 +96,15 @@ export const CycleIssuesMobileHeader = observer(function CycleIssuesMobileHeader
         onClose={() => setAnalyticsModal(false)}
         cycleDetails={cycleDetails ?? undefined}
       />
-      <div className="flex justify-evenly py-2 border-b border-custom-border-200 md:hidden bg-custom-background-100">
+      <div className="flex justify-evenly border-b border-subtle bg-surface-1 py-2 md:hidden">
         <CustomMenu
           maxHeight={"md"}
-          className="flex flex-grow justify-center text-custom-text-200 text-sm"
+          className="flex flex-grow justify-center text-13 text-secondary"
           placement="bottom-start"
           customButton={
-            <span className="flex flex-grow justify-center text-custom-text-200 text-sm">{t("common.layout")}</span>
+            <span className="flex flex-grow justify-center text-13 text-secondary">{t("common.layout")}</span>
           }
-          customButtonClassName="flex flex-grow justify-center text-custom-text-200 text-sm"
+          customButtonClassName="flex flex-grow justify-center text-secondary text-13"
           closeOnSelect
         >
           {SUPPORTED_LAYOUTS.map((layout, index) => (
@@ -109,19 +115,19 @@ export const CycleIssuesMobileHeader = observer(function CycleIssuesMobileHeader
               }}
               className="flex items-center gap-2"
             >
-              <IssueLayoutIcon layout={ISSUE_LAYOUTS[index].key} className="w-3 h-3" />
-              <div className="text-custom-text-300">{t(layout.titleTranslationKey)}</div>
+              <IssueLayoutIcon layout={ISSUE_LAYOUTS[index].key} className="h-3 w-3" />
+              <div className="text-tertiary">{t(layout.titleTranslationKey)}</div>
             </CustomMenu.MenuItem>
           ))}
         </CustomMenu>
-        <div className="flex flex-grow justify-center border-l border-custom-border-200 items-center text-custom-text-200 text-sm">
+        <div className="flex flex-grow items-center justify-center border-l border-subtle text-13 text-secondary">
           <FiltersDropdown
             title={t("common.display")}
             placement="bottom-end"
             menuButton={
-              <span className="flex items-center text-custom-text-200 text-sm">
+              <span className="flex items-center text-13 text-secondary">
                 {t("common.display")}
-                <ChevronDownIcon className="text-custom-text-200 h-4 w-4 ml-2" />
+                <ChevronDownIcon className="ml-2 h-4 w-4 text-secondary" />
               </span>
             }
           >
@@ -142,7 +148,7 @@ export const CycleIssuesMobileHeader = observer(function CycleIssuesMobileHeader
 
         <span
           onClick={() => setAnalyticsModal(true)}
-          className="flex flex-grow justify-center text-custom-text-200 text-sm border-l border-custom-border-200"
+          className="flex flex-grow justify-center border-l border-subtle text-13 text-secondary"
         >
           {t("common.analytics")}
         </span>
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/header.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/header.tsx
index deabebfdc..62cac65ea 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/header.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/header.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // ui
@@ -43,7 +49,7 @@ export const CyclesListHeader = observer(function CyclesListHeader() {
               <BreadcrumbLink
                 label="Cycles"
                 href={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/cycles/`}
-                icon={<CycleIcon className="h-4 w-4 text-custom-text-300" />}
+                icon={<CycleIcon className="h-4 w-4 text-tertiary" />}
                 isLast
               />
             }
@@ -56,13 +62,13 @@ export const CyclesListHeader = observer(function CyclesListHeader() {
           <CyclesViewHeader projectId={currentProjectDetails.id} />
           <Button
             variant="primary"
-            size="sm"
+            size="lg"
             data-ph-element={CYCLE_TRACKER_ELEMENTS.RIGHT_HEADER_ADD_BUTTON}
             onClick={() => {
               toggleCreateCycleModal(true);
             }}
           >
-            <div className="sm:hidden block">{t("add")}</div>
+            <div className="block sm:hidden">{t("add")}</div>
             <div className="hidden sm:block">{t("project_cycles.add_cycle")}</div>
           </Button>
         </Header.RightItem>
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/layout.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/layout.tsx
index f65235274..c1b003348 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/layout.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/layout.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { Outlet } from "react-router";
 // components
 import { AppHeader } from "@/components/core/app-header";
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/mobile-header.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/mobile-header.tsx
index b11446a19..b5108be81 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/mobile-header.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/mobile-header.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type React from "react";
 import { observer } from "mobx-react";
 // ui
@@ -40,15 +46,15 @@ export const CyclesListMobileHeader = observer(function CyclesListMobileHeader()
     <div className="flex justify-center sm:hidden">
       <CustomMenu
         maxHeight={"md"}
-        className="flex flex-grow justify-center text-custom-text-200 text-sm py-2 border-b border-custom-border-200 bg-custom-sidebar-background-100"
+        className="flex flex-grow justify-center border-b border-subtle bg-surface-1 py-2 text-13 text-secondary"
         // placement="bottom-start"
         customButton={
           <span className="flex items-center gap-2">
             <ListLayoutIcon className="h-4 w-4" />
-            <span className="flex flex-grow justify-center text-custom-text-200 text-sm">Layout</span>
+            <span className="flex flex-grow justify-center text-13 text-secondary">Layout</span>
           </span>
         }
-        customButtonClassName="flex flex-grow justify-center items-center text-custom-text-200 text-sm"
+        customButtonClassName="flex flex-grow justify-center items-center text-secondary text-13"
         closeOnSelect
       >
         {CYCLE_VIEW_LAYOUTS.map((layout) => {
@@ -63,8 +69,8 @@ export const CyclesListMobileHeader = observer(function CyclesListMobileHeader()
               }}
               className="flex items-center gap-2"
             >
-              <layout.icon className="w-3 h-3" />
-              <div className="text-custom-text-300">{layout.title}</div>
+              <layout.icon className="h-3 w-3" />
+              <div className="text-tertiary">{layout.title}</div>
             </CustomMenu.MenuItem>
           );
         })}
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/page.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/page.tsx
index f029bc0b3..d92cd7374 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/page.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useState } from "react";
 import { observer } from "mobx-react";
 // plane imports
@@ -67,7 +73,7 @@ function ProjectCyclesPage({ params }: Route.ComponentProps) {
   // No access to cycle
   if (currentProjectDetails?.cycle_view === false)
     return (
-      <div className="flex items-center justify-center h-full w-full">
+      <div className="flex h-full w-full items-center justify-center">
         <DetailedEmptyState
           title={t("disabled_project.empty_state.cycle.title")}
           description={t("disabled_project.empty_state.cycle.description")}
@@ -88,7 +94,7 @@ function ProjectCyclesPage({ params }: Route.ComponentProps) {
   return (
     <>
       <PageHead title={pageTitle} />
-      <div className="w-full h-full">
+      <div className="h-full w-full">
         <CycleCreateUpdateModal
           workspaceSlug={workspaceSlug}
           projectId={projectId}
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/intake/layout.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/intake/layout.tsx
index 3d3ec5d05..267226e55 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/intake/layout.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/intake/layout.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { Outlet } from "react-router";
 // components
 import { AppHeader } from "@/components/core/app-header";
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/intake/page.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/intake/page.tsx
index 4904f9da1..64739d60b 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/intake/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/intake/page.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import { useSearchParams } from "next/navigation";
 import { useTheme } from "next-themes";
@@ -39,7 +45,7 @@ function ProjectInboxPage({ params }: Route.ComponentProps) {
   // No access to inbox
   if (currentProjectDetails?.inbox_view === false)
     return (
-      <div className="flex items-center justify-center h-full w-full">
+      <div className="flex h-full w-full items-center justify-center">
         <DetailedEmptyState
           title={t("disabled_project.empty_state.inbox.title")}
           description={t("disabled_project.empty_state.inbox.description")}
@@ -73,7 +79,7 @@ function ProjectInboxPage({ params }: Route.ComponentProps) {
   return (
     <div className="flex h-full flex-col">
       <PageHead title={pageTitle} />
-      <div className="w-full h-full overflow-hidden">
+      <div className="h-full w-full overflow-hidden">
         <InboxIssueRoot
           workspaceSlug={workspaceSlug}
           projectId={projectId}
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(detail)/[issueId]/page.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(detail)/[issueId]/page.tsx
index 216aed2ad..1fab5aa63 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(detail)/[issueId]/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(detail)/[issueId]/page.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useTheme } from "next-themes";
 import { redirect } from "react-router";
 import { useTranslation } from "@plane/i18n";
@@ -44,7 +50,7 @@ export default function IssueDetailsPage({ loaderData }: Route.ComponentProps) {
 
   if (loaderData.error) {
     return (
-      <div className="flex items-center justify-center size-full">
+      <div className="flex size-full items-center justify-center">
         <EmptyState
           image={resolvedTheme === "dark" ? emptyIssueDark : emptyIssueLight}
           title={t("issue.empty_state.issue_detail.title")}
@@ -59,7 +65,7 @@ export default function IssueDetailsPage({ loaderData }: Route.ComponentProps) {
   }
 
   return (
-    <div className="flex items-center justify-center size-full">
+    <div className="flex size-full items-center justify-center">
       <LogoSpinner />
     </div>
   );
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(list)/header.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(list)/header.tsx
index f44441001..eb82758b1 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(list)/header.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(list)/header.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { IssuesHeader } from "@/plane-web/components/issues/header";
 
 export function ProjectIssuesHeader() {
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(list)/layout.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(list)/layout.tsx
index 5fe249e5c..c8ac59571 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(list)/layout.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(list)/layout.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // components
 import { Outlet } from "react-router";
 import { AppHeader } from "@/components/core/app-header";
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(list)/mobile-header.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(list)/mobile-header.tsx
index dd4feed28..dfe400d3b 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(list)/mobile-header.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(list)/mobile-header.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useCallback, useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
@@ -62,19 +68,19 @@ export const ProjectIssuesMobileHeader = observer(function ProjectIssuesMobileHe
         onClose={() => setAnalyticsModal(false)}
         projectDetails={currentProjectDetails ?? undefined}
       />
-      <div className="md:hidden flex justify-evenly border-b border-custom-border-200 py-2 z-[13] bg-custom-background-100">
+      <div className="z-[13] flex justify-evenly border-b border-subtle bg-surface-1 py-2 md:hidden">
         <MobileLayoutSelection
           layouts={[EIssueLayoutTypes.LIST, EIssueLayoutTypes.KANBAN, EIssueLayoutTypes.CALENDAR]}
           onChange={handleLayoutChange}
         />
-        <div className="flex flex-grow items-center justify-center border-l border-custom-border-200 text-sm text-custom-text-200">
+        <div className="flex flex-grow items-center justify-center border-l border-subtle text-13 text-secondary">
           <FiltersDropdown
             title={t("common.display")}
             placement="bottom-end"
             menuButton={
-              <span className="flex items-center text-sm text-custom-text-200">
+              <span className="flex items-center text-13 text-secondary">
                 {t("common.display")}
-                <ChevronDownIcon className="ml-2 h-4 w-4 text-custom-text-200" />
+                <ChevronDownIcon className="ml-2 h-4 w-4 text-secondary" />
               </span>
             }
           >
@@ -94,7 +100,7 @@ export const ProjectIssuesMobileHeader = observer(function ProjectIssuesMobileHe
 
         <button
           onClick={() => setAnalyticsModal(true)}
-          className="flex flex-grow justify-center border-l border-custom-border-200 text-sm text-custom-text-200"
+          className="flex flex-grow justify-center border-l border-subtle text-13 text-secondary"
         >
           {t("common.analytics")}
         </button>
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(list)/page.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(list)/page.tsx
index f2d5355b1..15ebb8bbb 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(list)/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(list)/page.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 // i18n
 import { useTranslation } from "@plane/i18n";
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/layout.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/layout.tsx
index 2decac79e..e43b6eb92 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/layout.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/layout.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import { Outlet } from "react-router";
 // plane imports
@@ -9,7 +15,8 @@ import { AppSidebarToggleButton } from "@/components/sidebar/sidebar-toggle-butt
 // hooks
 import { useAppTheme } from "@/hooks/store/use-app-theme";
 import { useProjectNavigationPreferences } from "@/hooks/use-navigation-preferences";
-import { ProjectAuthWrapper } from "@/plane-web/layouts/project-wrapper";
+// layouts
+import { ProjectAuthWrapper } from "@/layouts/auth-layout/project-wrapper";
 // local imports
 import type { Route } from "./+types/layout";
 
@@ -23,18 +30,18 @@ function ProjectLayout({ params }: Route.ComponentProps) {
 
   return (
     <>
-      {projectPreferences.navigationMode === "horizontal" && (
+      {projectPreferences.navigationMode === "TABBED" && (
         <div className="z-20">
-          <Row className="h-header flex gap-2 w-full items-center border-b border-custom-border-200 bg-custom-sidebar-background-100">
-            <div className="flex items-center gap-2 divide-x divide-custom-border-100 h-full w-full">
-              <div className="flex items-center gap-2 size-full flex-1">
+          <Row className="flex h-header w-full items-center gap-2 border-b border-subtle bg-surface-1">
+            <div className="flex h-full w-full items-center gap-2 divide-x divide-subtle">
+              <div className="flex size-full flex-1 items-center gap-2">
                 {sidebarCollapsed && (
                   <div className="shrink-0">
                     <AppSidebarToggleButton />
                   </div>
                 )}
                 <Header className={cn("h-full", { "pl-1.5": !sidebarCollapsed })}>
-                  <Header.LeftItem className="h-full max-w-full flex items-center gap-2">
+                  <Header.LeftItem className="flex h-full max-w-full items-center gap-2">
                     <TabNavigationRoot workspaceSlug={workspaceSlug} projectId={projectId} />
                   </Header.LeftItem>
                 </Header>
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/[moduleId]/page.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/[moduleId]/page.tsx
index 610154824..1066ed4e2 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/[moduleId]/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/[moduleId]/page.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import useSWR from "swr";
 // plane imports
@@ -62,12 +68,8 @@ function ModuleIssuesPage({ params }: Route.ComponentProps) {
           {!isSidebarCollapsed && (
             <div
               className={cn(
-                "flex h-full w-[24rem] flex-shrink-0 flex-col gap-3.5 overflow-y-auto border-l border-custom-border-100 bg-custom-sidebar-background-100 px-6 duration-300 vertical-scrollbar scrollbar-sm absolute right-0 z-[13]"
+                "vertical-scrollbar absolute right-0 z-13 flex scrollbar-sm h-full w-[24rem] flex-shrink-0 flex-col gap-3.5 overflow-y-auto border-l border-subtle bg-surface-1 px-6 shadow-raised-200 duration-300"
               )}
-              style={{
-                boxShadow:
-                  "0px 1px 4px 0px rgba(0, 0, 0, 0.06), 0px 2px 4px 0px rgba(16, 24, 40, 0.06), 0px 1px 8px -1px rgba(16, 24, 40, 0.06)",
-              }}
             >
               <ModuleAnalyticsSidebar moduleId={moduleId} handleClose={toggleSidebar} />
             </div>
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/header.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/header.tsx
index ee254214e..5524626e0 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/header.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/header.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useCallback, useRef, useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
@@ -42,6 +48,7 @@ import useLocalStorage from "@/hooks/use-local-storage";
 import { usePlatformOS } from "@/hooks/use-platform-os";
 // plane web imports
 import { CommonProjectBreadcrumbs } from "@/plane-web/components/breadcrumbs/common";
+import { IconButton } from "@plane/propel/icon-button";
 
 export const ModuleIssuesHeader = observer(function ModuleIssuesHeader() {
   // refs
@@ -134,7 +141,7 @@ export const ModuleIssuesHeader = observer(function ModuleIssuesHeader() {
                   <BreadcrumbLink
                     label="Modules"
                     href={`/${workspaceSlug}/projects/${projectId}/modules/`}
-                    icon={<ModuleIcon className="h-4 w-4 text-custom-text-300" />}
+                    icon={<ModuleIcon className="h-4 w-4 text-tertiary" />}
                     isLast
                   />
                 }
@@ -149,7 +156,7 @@ export const ModuleIssuesHeader = observer(function ModuleIssuesHeader() {
                       router.push(`/${workspaceSlug}/projects/${projectId}/modules/${value}`);
                     }}
                     title={moduleDetails?.name}
-                    icon={<ModuleIcon className="size-3.5 flex-shrink-0 text-custom-text-300" />}
+                    icon={<ModuleIcon className="size-3.5 flex-shrink-0 text-tertiary" />}
                     isLast
                   />
                 }
@@ -163,7 +170,7 @@ export const ModuleIssuesHeader = observer(function ModuleIssuesHeader() {
                 } in this module`}
                 position="bottom"
               >
-                <span className="flex flex-shrink-0 cursor-default items-center justify-center rounded-xl bg-custom-primary-100/20 px-2 text-center text-xs font-semibold text-custom-primary-100">
+                <span className="flex flex-shrink-0 cursor-default items-center justify-center rounded-xl bg-accent-primary/20 px-2 text-center text-11 font-semibold text-accent-primary">
                   {workItemsCount}
                 </span>
               </Tooltip>
@@ -221,24 +228,20 @@ export const ModuleIssuesHeader = observer(function ModuleIssuesHeader() {
 
           {canUserCreateIssue ? (
             <>
-              <Button
-                className="hidden md:block"
-                onClick={() => setAnalyticsModal(true)}
-                variant="neutral-primary"
-                size="sm"
-              >
-                <div className="hidden @4xl:flex">Analytics</div>
-                <div className="flex @4xl:hidden">
+              <Button className="hidden md:block" onClick={() => setAnalyticsModal(true)} variant="secondary" size="lg">
+                <span className="hidden @4xl:flex">Analytics</span>
+                <span className="@4xl:hidden">
                   <ChartNoAxesColumn className="size-3.5" />
-                </div>
+                </span>
               </Button>
               <Button
+                variant="primary"
+                size="lg"
                 className="hidden sm:flex"
                 onClick={() => {
                   toggleCreateIssueModal(true, EIssuesStoreType.MODULE);
                 }}
                 data-ph-element={WORK_ITEM_TRACKER_ELEMENTS.HEADER_ADD_BUTTON.MODULE}
-                size="sm"
               >
                 Add work item
               </Button>
@@ -246,20 +249,22 @@ export const ModuleIssuesHeader = observer(function ModuleIssuesHeader() {
           ) : (
             <></>
           )}
-          <button
-            type="button"
-            className="p-1.5 rounded outline-none hover:bg-custom-sidebar-background-80 bg-custom-background-80/70"
+          <IconButton
+            variant="tertiary"
+            size="lg"
+            icon={PanelRight}
             onClick={toggleSidebar}
-          >
-            <PanelRight className={cn("h-4 w-4", !isSidebarCollapsed ? "text-[#3E63DD]" : "text-custom-text-200")} />
-          </button>
+            className={cn({
+              "bg-accent-subtle text-accent-primary": !isSidebarCollapsed,
+            })}
+          />
           {moduleId && (
             <ModuleQuickActions
               parentRef={parentRef}
               moduleId={moduleId}
               projectId={projectId.toString()}
               workspaceSlug={workspaceSlug.toString()}
-              customClassName="flex-shrink-0 flex items-center justify-center bg-custom-background-80/70 rounded size-[26px]"
+              customClassName="flex-shrink-0 flex items-center justify-center bg-layer-1/70 rounded-sm size-[26px]"
             />
           )}
         </Header.RightItem>
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/layout.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/layout.tsx
index 33234e33c..f11b9068b 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/layout.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/layout.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { Outlet } from "react-router";
 // components
 import { AppHeader } from "@/components/core/app-header";
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/mobile-header.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/mobile-header.tsx
index 881733489..317a7b077 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/mobile-header.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/mobile-header.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useCallback, useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
@@ -72,13 +78,13 @@ export const ModuleIssuesMobileHeader = observer(function ModuleIssuesMobileHead
         moduleDetails={moduleDetails ?? undefined}
         projectDetails={currentProjectDetails}
       />
-      <div className="flex justify-evenly border-b border-custom-border-200 bg-custom-background-100 py-2">
+      <div className="flex justify-evenly border-b border-subtle bg-surface-1 py-2">
         <CustomMenu
           maxHeight={"md"}
-          className="flex flex-grow justify-center text-sm text-custom-text-200"
+          className="flex flex-grow justify-center text-13 text-secondary"
           placement="bottom-start"
-          customButton={<span className="flex flex-grow justify-center text-sm text-custom-text-200">Layout</span>}
-          customButtonClassName="flex flex-grow justify-center text-custom-text-200 text-sm"
+          customButton={<span className="flex flex-grow justify-center text-13 text-secondary">Layout</span>}
+          customButtonClassName="flex flex-grow justify-center text-secondary text-13"
           closeOnSelect
         >
           {SUPPORTED_LAYOUTS.map((layout, index) => (
@@ -90,18 +96,18 @@ export const ModuleIssuesMobileHeader = observer(function ModuleIssuesMobileHead
               className="flex items-center gap-2"
             >
               <IssueLayoutIcon layout={ISSUE_LAYOUTS[index].key} className="h-3 w-3" />
-              <div className="text-custom-text-300">{t(layout.i18n_title)}</div>
+              <div className="text-tertiary">{t(layout.i18n_title)}</div>
             </CustomMenu.MenuItem>
           ))}
         </CustomMenu>
-        <div className="flex flex-grow items-center justify-center border-l border-custom-border-200 text-sm text-custom-text-200">
+        <div className="flex flex-grow items-center justify-center border-l border-subtle text-13 text-secondary">
           <FiltersDropdown
             title="Display"
             placement="bottom-end"
             menuButton={
-              <span className="flex items-center text-sm text-custom-text-200">
+              <span className="flex items-center text-13 text-secondary">
                 Display
-                <ChevronDownIcon className="ml-2 h-4 w-4 text-custom-text-200" />
+                <ChevronDownIcon className="ml-2 h-4 w-4 text-secondary" />
               </span>
             }
           >
@@ -122,7 +128,7 @@ export const ModuleIssuesMobileHeader = observer(function ModuleIssuesMobileHead
 
         <button
           onClick={() => setAnalyticsModal(true)}
-          className="flex flex-grow justify-center border-l border-custom-border-200 text-sm text-custom-text-200"
+          className="flex flex-grow justify-center border-l border-subtle text-13 text-secondary"
         >
           Analytics
         </button>
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(list)/header.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(list)/header.tsx
index cad665292..67688828b 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(list)/header.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(list)/header.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // plane imports
@@ -47,7 +53,7 @@ export const ModulesListHeader = observer(function ModulesListHeader() {
                 <BreadcrumbLink
                   label="Modules"
                   href={`/${workspaceSlug}/projects/${projectId}/modules/`}
-                  icon={<ModuleIcon className="h-4 w-4 text-custom-text-300" />}
+                  icon={<ModuleIcon className="h-4 w-4 text-tertiary" />}
                   isLast
                 />
               }
@@ -61,13 +67,13 @@ export const ModulesListHeader = observer(function ModulesListHeader() {
         {canUserCreateModule ? (
           <Button
             variant="primary"
-            size="sm"
             data-ph-element={MODULE_TRACKER_ELEMENTS.RIGHT_HEADER_ADD_BUTTON}
             onClick={() => {
               toggleCreateModuleModal(true);
             }}
+            size="lg"
           >
-            <div className="sm:hidden block">{t("add")}</div>
+            <div className="block sm:hidden">{t("add")}</div>
             <div className="hidden sm:block">{t("project_module.add_module")}</div>
           </Button>
         ) : (
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(list)/layout.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(list)/layout.tsx
index 909418c89..46eb9f101 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(list)/layout.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(list)/layout.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { Outlet } from "react-router";
 // components
 import { AppHeader } from "@/components/core/app-header";
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(list)/mobile-header.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(list)/mobile-header.tsx
index c4133e680..a571f7c2d 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(list)/mobile-header.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(list)/mobile-header.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import { MODULE_VIEW_LAYOUTS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
@@ -16,14 +22,14 @@ export const ModulesListMobileHeader = observer(function ModulesListMobileHeader
     <div className="flex justify-start md:hidden">
       <CustomMenu
         maxHeight={"md"}
-        className="flex flex-grow justify-start text-custom-text-200 text-sm py-2 border-b border-custom-border-200 bg-custom-sidebar-background-100"
+        className="flex flex-grow justify-start border-b border-subtle bg-surface-1 py-2 text-13 text-secondary"
         // placement="bottom-start"
         customButton={
-          <Row className="flex flex-grow justify-center text-custom-text-200 text-sm gap-2">
-            <span>Layout</span> <ChevronDownIcon className="h-4 w-4 text-custom-text-200 my-auto" strokeWidth={1} />
+          <Row className="flex flex-grow justify-center gap-2 text-13 text-secondary">
+            <span>Layout</span> <ChevronDownIcon className="my-auto h-4 w-4 text-secondary" strokeWidth={1} />
           </Row>
         }
-        customButtonClassName="flex flex-grow justify-center items-center text-custom-text-200 text-sm"
+        customButtonClassName="flex flex-grow justify-center items-center text-secondary text-13"
         closeOnSelect
       >
         {MODULE_VIEW_LAYOUTS.map((layout) => {
@@ -37,7 +43,7 @@ export const ModulesListMobileHeader = observer(function ModulesListMobileHeader
               className="flex items-center gap-2"
             >
               <ModuleLayoutIcon layoutType={layout.key} />
-              <div className="text-custom-text-300">{t(layout.i18n_title)}</div>
+              <div className="text-tertiary">{t(layout.i18n_title)}</div>
             </CustomMenu.MenuItem>
           );
         })}
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(list)/page.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(list)/page.tsx
index 292db3554..12e0be1ec 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(list)/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(list)/page.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useCallback } from "react";
 import { observer } from "mobx-react";
 import { useTheme } from "next-themes";
@@ -60,7 +66,7 @@ function ProjectModulesPage({ params }: Route.ComponentProps) {
   // No access to
   if (currentProjectDetails?.module_view === false)
     return (
-      <div className="flex items-center justify-center h-full w-full">
+      <div className="flex h-full w-full items-center justify-center">
         <DetailedEmptyState
           title={t("disabled_project.empty_state.module.title")}
           description={t("disabled_project.empty_state.module.description")}
@@ -79,7 +85,7 @@ function ProjectModulesPage({ params }: Route.ComponentProps) {
   return (
     <>
       <PageHead title={pageTitle} />
-      <div className="h-full w-full flex flex-col">
+      <div className="flex h-full w-full flex-col">
         {(calculateTotalFilters(currentProjectFilters) !== 0 || currentProjectDisplayFilters?.favorites) && (
           <ModuleAppliedFiltersList
             appliedFilters={currentProjectFilters}
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(detail)/[pageId]/page.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(detail)/[pageId]/page.tsx
index fa4fd0d7b..ec332bbe1 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(detail)/[pageId]/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(detail)/[pageId]/page.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useCallback, useEffect, useMemo } from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
@@ -23,7 +29,7 @@ import { useAppRouter } from "@/hooks/use-app-router";
 // plane web hooks
 import { EPageStoreType, usePage, usePageStore } from "@/plane-web/hooks/store";
 // plane web services
-import { WorkspaceService } from "@/plane-web/services";
+import { WorkspaceService } from "@/services/workspace.service";
 // services
 import { ProjectPageService, ProjectPageVersionService } from "@/services/page";
 import type { Route } from "./+types/page";
@@ -147,21 +153,21 @@ function PageDetailsPage({ params }: Route.ComponentProps) {
 
   if ((!page || !id) && !pageDetailsError)
     return (
-      <div className="size-full grid place-items-center">
+      <div className="grid size-full place-items-center">
         <LogoSpinner />
       </div>
     );
 
   if (pageDetailsError || !canCurrentUserAccessPage)
     return (
-      <div className="h-full w-full flex flex-col items-center justify-center">
-        <h3 className="text-lg font-semibold text-center">Page not found</h3>
-        <p className="text-sm text-custom-text-200 text-center mt-3">
+      <div className="flex h-full w-full flex-col items-center justify-center">
+        <h3 className="text-center text-16 font-semibold">Page not found</h3>
+        <p className="mt-3 text-center text-13 text-secondary">
           The page you are trying to access doesn{"'"}t exist or you don{"'"}t have permission to view it.
         </p>
         <Link
           href={`/${workspaceSlug}/projects/${projectId}/pages`}
-          className={cn(getButtonStyling("neutral-primary", "md"), "mt-5")}
+          className={cn(getButtonStyling("secondary", "base"), "mt-5")}
         >
           View other Pages
         </Link>
@@ -174,7 +180,7 @@ function PageDetailsPage({ params }: Route.ComponentProps) {
     <>
       <PageHead title={name} />
       <div className="flex h-full flex-col justify-between">
-        <div className="relative h-full w-full flex-shrink-0 flex flex-col overflow-hidden">
+        <div className="relative flex h-full w-full flex-shrink-0 flex-col overflow-hidden">
           <PageRoot
             config={pageRootConfig}
             handlers={pageRootHandlers}
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(detail)/header.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(detail)/header.tsx
index 43d32ee25..271d0a159 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(detail)/header.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(detail)/header.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // plane imports
@@ -47,7 +53,7 @@ export const PageDetailsHeader = observer(function PageDetailsHeader() {
         value: _page.id,
         query: _page.name,
         content: (
-          <div className="flex gap-2 items-center justify-between">
+          <div className="flex items-center justify-between gap-2">
             <SwitcherLabel logo_props={_page.logo_props} name={getPageName(_page.name)} LabelIcon={PageIcon} />
             <PageAccessIcon {..._page} />
           </div>
@@ -69,7 +75,7 @@ export const PageDetailsHeader = observer(function PageDetailsHeader() {
                 <BreadcrumbLink
                   label="Pages"
                   href={`/${workspaceSlug}/projects/${projectId}/pages/`}
-                  icon={<PageIcon className="h-4 w-4 text-custom-text-300" />}
+                  icon={<PageIcon className="h-4 w-4 text-tertiary" />}
                 />
               }
             />
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(detail)/layout.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(detail)/layout.tsx
index 59f609dbf..0ba3728ce 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(detail)/layout.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(detail)/layout.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // component
 import { Outlet } from "react-router";
 import useSWR from "swr";
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(list)/header.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(list)/header.tsx
index d016913a7..e76f55b9a 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(list)/header.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(list)/header.tsx
@@ -1,8 +1,14 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useState } from "react";
 import { observer } from "mobx-react";
 import { useParams, useRouter, useSearchParams } from "next/navigation";
 // constants
-import { EPageAccess, PROJECT_PAGE_TRACKER_EVENTS, PROJECT_TRACKER_ELEMENTS } from "@plane/constants";
+import { EPageAccess } from "@plane/constants";
 // plane types
 import { Button } from "@plane/propel/button";
 import { PageIcon } from "@plane/propel/icons";
@@ -12,7 +18,6 @@ import type { TPage } from "@plane/types";
 import { Breadcrumbs, Header } from "@plane/ui";
 // helpers
 import { BreadcrumbLink } from "@/components/common/breadcrumb-link";
-import { captureError, captureSuccess } from "@/helpers/event-tracker.helper";
 // hooks
 import { useProject } from "@/hooks/store/use-project";
 // plane web imports
@@ -40,23 +45,10 @@ export const PagesListHeader = observer(function PagesListHeader() {
 
     await createPage(payload)
       .then((res) => {
-        captureSuccess({
-          eventName: PROJECT_PAGE_TRACKER_EVENTS.create,
-          payload: {
-            id: res?.id,
-            state: "SUCCESS",
-          },
-        });
         const pageId = `/${workspaceSlug}/projects/${currentProjectDetails?.id}/pages/${res?.id}`;
         router.push(pageId);
       })
       .catch((err) => {
-        captureError({
-          eventName: PROJECT_PAGE_TRACKER_EVENTS.create,
-          payload: {
-            state: "ERROR",
-          },
-        });
         setToast({
           type: TOAST_TYPE.ERROR,
           title: "Error!",
@@ -76,7 +68,7 @@ export const PagesListHeader = observer(function PagesListHeader() {
               <BreadcrumbLink
                 label="Pages"
                 href={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/pages/`}
-                icon={<PageIcon className="h-4 w-4 text-custom-text-300" />}
+                icon={<PageIcon className="h-4 w-4 text-tertiary" />}
                 isLast
               />
             }
@@ -84,20 +76,12 @@ export const PagesListHeader = observer(function PagesListHeader() {
           />
         </Breadcrumbs>
       </Header.LeftItem>
-      {canCurrentUserCreatePage ? (
+      {canCurrentUserCreatePage && (
         <Header.RightItem>
-          <Button
-            variant="primary"
-            size="sm"
-            onClick={handleCreatePage}
-            loading={isCreatingPage}
-            data-ph-element={PROJECT_TRACKER_ELEMENTS.CREATE_HEADER_BUTTON}
-          >
+          <Button variant="primary" size="lg" onClick={handleCreatePage} loading={isCreatingPage}>
             {isCreatingPage ? "Adding" : "Add page"}
           </Button>
         </Header.RightItem>
-      ) : (
-        <></>
       )}
     </Header>
   );
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(list)/layout.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(list)/layout.tsx
index 911ef24bb..b803854bd 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(list)/layout.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(list)/layout.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // components
 import { Outlet } from "react-router";
 import { AppHeader } from "@/components/core/app-header";
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(list)/page.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(list)/page.tsx
index b4f6ff523..e5e1de9de 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(list)/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(list)/page.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import { useSearchParams } from "next/navigation";
 import { useTheme } from "next-themes";
@@ -51,7 +57,7 @@ function ProjectPagesPage({ params }: Route.ComponentProps) {
   // No access to cycle
   if (currentProjectDetails?.page_view === false)
     return (
-      <div className="flex items-center justify-center h-full w-full">
+      <div className="flex h-full w-full items-center justify-center">
         <DetailedEmptyState
           title={t("disabled_project.empty_state.page.title")}
           description={t("disabled_project.empty_state.page.description")}
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(detail)/[viewId]/header.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(detail)/[viewId]/header.tsx
index 14fabd0b1..3393257ee 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(detail)/[viewId]/header.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(detail)/[viewId]/header.tsx
@@ -1,7 +1,13 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useCallback, useRef } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
-import { Lock } from "lucide-react";
+
 // plane imports
 import {
   EIssueFilterType,
@@ -11,7 +17,7 @@ import {
   WORK_ITEM_TRACKER_ELEMENTS,
 } from "@plane/constants";
 import { Button } from "@plane/propel/button";
-import { ViewsIcon } from "@plane/propel/icons";
+import { LockIcon, ViewsIcon } from "@plane/propel/icons";
 import { Tooltip } from "@plane/propel/tooltip";
 import type { ICustomSearchSelectOption, IIssueDisplayFilterOptions, IIssueDisplayProperties } from "@plane/types";
 import { EIssuesStoreType, EViewAccess, EIssueLayoutTypes } from "@plane/types";
@@ -124,7 +130,7 @@ export const ProjectViewIssuesHeader = observer(function ProjectViewIssuesHeader
               <BreadcrumbLink
                 label="Views"
                 href={`/${workspaceSlug}/projects/${projectId}/views/`}
-                icon={<ViewsIcon className="h-4 w-4 text-custom-text-300" />}
+                icon={<ViewsIcon className="h-4 w-4 text-tertiary" />}
               />
             }
           />
@@ -149,9 +155,9 @@ export const ProjectViewIssuesHeader = observer(function ProjectViewIssuesHeader
         </Breadcrumbs>
 
         {viewDetails?.access === EViewAccess.PRIVATE ? (
-          <div className="cursor-default text-custom-text-300">
+          <div className="cursor-default text-tertiary">
             <Tooltip tooltipContent={"Private"}>
-              <Lock className="h-4 w-4" />
+              <LockIcon className="h-4 w-4" />
             </Tooltip>
           </div>
         ) : (
@@ -190,23 +196,22 @@ export const ProjectViewIssuesHeader = observer(function ProjectViewIssuesHeader
             </FiltersDropdown>
           )}
         </>
-        {canUserCreateIssue ? (
+        {canUserCreateIssue && (
           <Button
+            variant="primary"
+            size="lg"
             onClick={() => {
               toggleCreateIssueModal(true, EIssuesStoreType.PROJECT_VIEW);
             }}
             data-ph-element={WORK_ITEM_TRACKER_ELEMENTS.HEADER_ADD_BUTTON.PROJECT_VIEW}
-            size="sm"
           >
             Add work item
           </Button>
-        ) : (
-          <></>
         )}
         <div className="hidden md:block">
           <ViewQuickActions
             parentRef={parentRef}
-            customClassName="flex-shrink-0 flex items-center justify-center size-[26px] bg-custom-background-80/70 rounded"
+            customClassName="flex-shrink-0 flex items-center justify-center size-[26px] bg-layer-1/70 rounded-sm"
             projectId={projectId.toString()}
             view={viewDetails}
             workspaceSlug={workspaceSlug.toString()}
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(detail)/[viewId]/page.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(detail)/[viewId]/page.tsx
index a51b2dbb5..c4c03eb49 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(detail)/[viewId]/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(detail)/[viewId]/page.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import useSWR from "swr";
 // assets
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(detail)/layout.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(detail)/layout.tsx
index dfd295513..b33381b93 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(detail)/layout.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(detail)/layout.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { Outlet } from "react-router";
 import { AppHeader } from "@/components/core/app-header";
 import { ContentWrapper } from "@/components/core/content-wrapper";
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(list)/header.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(list)/header.tsx
index 634233eaf..4cf703cc9 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(list)/header.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(list)/header.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // ui
@@ -31,7 +37,7 @@ export const ProjectViewsHeader = observer(function ProjectViewsHeader() {
                 <BreadcrumbLink
                   label="Views"
                   href={`/${workspaceSlug}/projects/${projectId}/views/`}
-                  icon={<ViewsIcon className="h-4 w-4 text-custom-text-300" />}
+                  icon={<ViewsIcon className="h-4 w-4 text-tertiary" />}
                   isLast
                 />
               }
@@ -45,7 +51,7 @@ export const ProjectViewsHeader = observer(function ProjectViewsHeader() {
             <Button
               data-ph-element={PROJECT_VIEW_TRACKER_ELEMENTS.RIGHT_HEADER_ADD_BUTTON}
               variant="primary"
-              size="sm"
+              size="lg"
               onClick={() => toggleCreateViewModal(true)}
             >
               Add view
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(list)/layout.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(list)/layout.tsx
index 41751627c..0b6dda9dc 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(list)/layout.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(list)/layout.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { Outlet } from "react-router";
 import { AppHeader } from "@/components/core/app-header";
 import { ContentWrapper } from "@/components/core/content-wrapper";
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(list)/mobile-header.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(list)/mobile-header.tsx
index 5ebceace9..73e5f722b 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(list)/mobile-header.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(list)/mobile-header.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 // icons
 import { ListFilter } from "lucide-react";
@@ -20,8 +26,8 @@ export const ViewMobileHeader = observer(function ViewMobileHeader() {
 
   return (
     <>
-      <div className="md:hidden flex justify-evenly border-b border-custom-border-200 py-2 z-[13] bg-custom-background-100">
-        <Row className="flex flex-grow items-center justify-center border-l border-custom-border-200 text-sm text-custom-text-200">
+      <div className="z-[13] flex justify-evenly border-b border-subtle bg-surface-1 py-2 md:hidden">
+        <Row className="flex flex-grow items-center justify-center border-l border-subtle text-13 text-secondary">
           <ViewOrderByDropdown
             sortBy={filters.sortBy}
             sortKey={filters.sortKey}
@@ -32,16 +38,16 @@ export const ViewMobileHeader = observer(function ViewMobileHeader() {
             isMobile
           />
         </Row>
-        <div className="flex flex-grow items-center justify-center border-l border-custom-border-200 text-sm text-custom-text-200">
+        <div className="flex flex-grow items-center justify-center border-l border-subtle text-13 text-secondary">
           <FiltersDropdown
             icon={<ListFilter className="h-3 w-3" />}
             title="Filters"
             placement="bottom-end"
             isFiltersApplied={false}
             menuButton={
-              <Row className="flex items-center text-sm text-custom-text-200">
+              <Row className="flex items-center text-13 text-secondary">
                 Filters
-                <ChevronDownIcon className="ml-2 h-4 w-4 text-custom-text-200" strokeWidth={2} />
+                <ChevronDownIcon className="ml-2 h-4 w-4 text-secondary" strokeWidth={2} />
               </Row>
             }
           >
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(list)/page.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(list)/page.tsx
index 76bebd671..b8f7f3688 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(list)/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(list)/page.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useCallback } from "react";
 import { observer } from "mobx-react";
 import { useTheme } from "next-themes";
@@ -63,7 +69,7 @@ function ProjectViewsPage({ params }: Route.ComponentProps) {
   // No access to
   if (currentProjectDetails?.issue_views_view === false)
     return (
-      <div className="flex items-center justify-center h-full w-full">
+      <div className="flex h-full w-full items-center justify-center">
         <DetailedEmptyState
           title={t("disabled_project.empty_state.view.title")}
           description={t("disabled_project.empty_state.view.description")}
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/archives/layout.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/archives/layout.tsx
index 588a8a43d..1e81fe89e 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/archives/layout.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/archives/layout.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // components
 import { Outlet } from "react-router";
 import { AppHeader } from "@/components/core/app-header";
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/archives/page.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/archives/page.tsx
index bbd6d42b1..3706d8030 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/archives/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/archives/page.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { ProjectPageRoot } from "@/plane-web/components/projects/page";
 
 function ProjectsPage() {
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(list)/layout.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(list)/layout.tsx
index 508736927..53308d88f 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(list)/layout.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(list)/layout.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { Outlet } from "react-router";
 // components
 import { AppHeader } from "@/components/core/app-header";
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(list)/page.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(list)/page.tsx
index bbd6d42b1..3706d8030 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(list)/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(list)/page.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { ProjectPageRoot } from "@/plane-web/components/projects/page";
 
 function ProjectsPage() {
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/sidebar.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/sidebar.tsx
index f076ea2d3..c529c4efe 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/sidebar.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/sidebar.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { isEmpty } from "lodash-es";
 import { observer } from "mobx-react";
 // plane helpers
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/star-us-link.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/star-us-link.tsx
index 782adb5bf..c4039f7ab 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/star-us-link.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/star-us-link.tsx
@@ -1,12 +1,15 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useTheme } from "next-themes";
 // plane imports
-import { HEADER_GITHUB_ICON, GITHUB_REDIRECTED_TRACKER_EVENT } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 // assets
 import githubBlackImage from "@/app/assets/logos/github-black.png?url";
 import githubWhiteImage from "@/app/assets/logos/github-white.png?url";
-// helpers
-import { captureElementAndEvent } from "@/helpers/event-tracker.helper";
 
 export function StarUsOnGitHubLink() {
   // plane hooks
@@ -18,24 +21,13 @@ export function StarUsOnGitHubLink() {
   return (
     <a
       aria-label={t("home.star_us_on_github")}
-      onClick={() =>
-        captureElementAndEvent({
-          element: {
-            elementName: HEADER_GITHUB_ICON,
-          },
-          event: {
-            eventName: GITHUB_REDIRECTED_TRACKER_EVENT,
-            state: "SUCCESS",
-          },
-        })
-      }
-      className="flex flex-shrink-0 items-center gap-1.5 rounded bg-custom-background-80 px-3 py-1.5"
+      className="flex flex-shrink-0 items-center gap-1.5 rounded-sm bg-layer-2 px-3 py-1.5"
       href="https://github.com/makeplane/plane"
       target="_blank"
       rel="noopener noreferrer"
     >
       <img src={imageSrc} className="h-4 w-4 object-contain" alt="GitHub Logo" aria-hidden="true" />
-      <span className="hidden text-xs font-medium sm:hidden md:block">{t("home.star_us_on_github")}</span>
+      <span className="hidden text-11 font-medium sm:hidden md:block">{t("home.star_us_on_github")}</span>
     </a>
   );
 }
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/stickies/header.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/stickies/header.tsx
index 384e06941..7eab6a4a7 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/stickies/header.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/stickies/header.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // plane imports
@@ -27,7 +33,7 @@ export const WorkspaceStickyHeader = observer(function WorkspaceStickyHeader() {
                 component={
                   <BreadcrumbLink
                     label={`Stickies`}
-                    icon={<RecentStickyIcon className="size-5 rotate-90 text-custom-text-200" />}
+                    icon={<RecentStickyIcon className="size-5 rotate-90 text-secondary" />}
                   />
                 }
               />
@@ -39,8 +45,7 @@ export const WorkspaceStickyHeader = observer(function WorkspaceStickyHeader() {
           <StickySearch />
           <Button
             variant="primary"
-            size="sm"
-            className="items-center gap-1"
+            size="lg"
             onClick={() => {
               toggleShowNewSticky(true);
               stickyOperations.create();
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/stickies/layout.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/stickies/layout.tsx
index f33cfefd0..14be62a14 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/stickies/layout.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/stickies/layout.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { Outlet } from "react-router";
 import { AppHeader } from "@/components/core/app-header";
 import { ContentWrapper } from "@/components/core/content-wrapper";
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/stickies/page.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/stickies/page.tsx
index 463e75c61..d925b2ce4 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/stickies/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/stickies/page.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // components
 import { PageHead } from "@/components/core/page-title";
 import { StickiesInfinite } from "@/components/stickies/layout/stickies-infinite";
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/workspace-views/[globalViewId]/page.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/workspace-views/[globalViewId]/page.tsx
index 9862aae69..3d62aded3 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/workspace-views/[globalViewId]/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/workspace-views/[globalViewId]/page.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useState } from "react";
 import { observer } from "mobx-react";
 // plane imports
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/workspace-views/header.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/workspace-views/header.tsx
index 91efb16d8..0c6ebe309 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/workspace-views/header.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/workspace-views/header.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useCallback, useMemo, useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
@@ -120,9 +126,7 @@ export const GlobalIssuesHeader = observer(function GlobalIssuesHeader() {
         <Header.LeftItem>
           <Breadcrumbs>
             <Breadcrumbs.Item
-              component={
-                <BreadcrumbLink label={t("views")} icon={<ViewsIcon className="h-4 w-4 text-custom-text-300" />} />
-              }
+              component={<BreadcrumbLink label={t("views")} icon={<ViewsIcon className="h-4 w-4 text-tertiary" />} />}
             />
             <Breadcrumbs.Item
               component={
@@ -135,7 +139,7 @@ export const GlobalIssuesHeader = observer(function GlobalIssuesHeader() {
                   title={viewDetails?.name ?? t(defaultViewDetails?.i18n_label ?? "")}
                   icon={
                     <Breadcrumbs.Icon>
-                      <ViewsIcon className="size-4 flex-shrink-0 text-custom-text-300" />
+                      <ViewsIcon className="size-4 flex-shrink-0 text-tertiary" />
                     </Breadcrumbs.Icon>
                   }
                   isLast
@@ -166,10 +170,9 @@ export const GlobalIssuesHeader = observer(function GlobalIssuesHeader() {
               />
             </FiltersDropdown>
           )}
-
           <Button
             variant="primary"
-            size="sm"
+            size="lg"
             data-ph-element={GLOBAL_VIEW_TRACKER_ELEMENTS.RIGHT_HEADER_ADD_BUTTON}
             onClick={() => setCreateViewModal(true)}
           >
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/workspace-views/layout.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/workspace-views/layout.tsx
index 34fa8df49..60f6e5aa4 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/workspace-views/layout.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/workspace-views/layout.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { Outlet } from "react-router";
 import { AppHeader } from "@/components/core/app-header";
 import { ContentWrapper } from "@/components/core/content-wrapper";
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/workspace-views/page.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/workspace-views/page.tsx
index 2eed30add..8043f47f8 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/workspace-views/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/workspace-views/page.tsx
@@ -1,9 +1,15 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React, { useState } from "react";
 import { observer } from "mobx-react";
-import { Search } from "lucide-react";
 // plane imports
 import { DEFAULT_GLOBAL_VIEWS_LIST } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
+import { SearchIcon } from "@plane/propel/icons";
 import { Input } from "@plane/ui";
 // components
 import { PageHead } from "@/components/core/page-title";
@@ -23,18 +29,18 @@ function WorkspaceViewsPage() {
   return (
     <>
       <PageHead title={pageTitle} />
-      <div className="flex flex-col h-full w-full overflow-hidden">
-        <div className="flex h-11 w-full items-center gap-2.5  px-5 py-3 overflow-hidden border-b border-custom-border-200">
-          <Search className="text-custom-text-200" size={14} strokeWidth={2} />
+      <div className="flex h-full w-full flex-col overflow-hidden">
+        <div className="flex h-11 w-full items-center gap-2.5 overflow-hidden border-b border-subtle px-5 py-3">
+          <SearchIcon className="text-secondary" width={14} height={14} strokeWidth={2} />
           <Input
-            className="w-full bg-transparent !p-0 text-xs leading-5 text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
+            className="w-full bg-transparent !p-0 text-11 leading-5 text-secondary placeholder:text-placeholder focus:outline-none"
             value={query}
             onChange={(e) => setQuery(e.target.value)}
             placeholder="Search"
             mode="true-transparent"
           />
         </div>
-        <div className="flex flex-col h-full w-full vertical-scrollbar scrollbar-lg">
+        <div className="vertical-scrollbar flex scrollbar-lg h-full w-full flex-col">
           {DEFAULT_GLOBAL_VIEWS_LIST.filter((v) => t(v.i18n_label).toLowerCase().includes(query.toLowerCase())).map(
             (option) => (
               <GlobalDefaultViewListItem key={option.key} view={option} />
diff --git a/apps/web/app/(all)/[workspaceSlug]/(settings)/layout.tsx b/apps/web/app/(all)/[workspaceSlug]/(settings)/layout.tsx
index 7bdc18064..a8d2c4b0b 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(settings)/layout.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/layout.tsx
@@ -1,20 +1,23 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { Outlet } from "react-router";
 // components
 import { ContentWrapper } from "@/components/core/content-wrapper";
 import { ProjectsAppPowerKProvider } from "@/components/power-k/projects-app-provider";
-import { SettingsHeader } from "@/components/settings/header";
 
 export default function SettingsLayout() {
   return (
     <>
       <ProjectsAppPowerKProvider />
-      <div className="relative flex h-full w-full overflow-hidden rounded-lg border border-custom-border-200">
-        <main className="relative flex h-full w-full flex-col overflow-hidden bg-custom-background-100">
-          {/* Header */}
-          <SettingsHeader />
+      <div className="relative flex size-full overflow-hidden rounded-lg border border-subtle">
+        <main className="relative flex size-full flex-col overflow-hidden">
           {/* Content */}
-          <ContentWrapper className="p-page-x md:flex w-full">
-            <div className="w-full h-full overflow-hidden">
+          <ContentWrapper className="w-full bg-surface-1 md:flex">
+            <div className="size-full overflow-hidden">
               <Outlet />
             </div>
           </ContentWrapper>
diff --git a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/billing/header.tsx b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/billing/header.tsx
new file mode 100644
index 000000000..617256780
--- /dev/null
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/billing/header.tsx
@@ -0,0 +1,42 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// plane imports
+import { WORKSPACE_SETTINGS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { Breadcrumbs } from "@plane/ui";
+// components
+import { BreadcrumbLink } from "@/components/common/breadcrumb-link";
+import { SettingsPageHeader } from "@/components/settings/page-header";
+import { WORKSPACE_SETTINGS_ICONS } from "@/components/settings/workspace/sidebar/item-icon";
+
+export const BillingWorkspaceSettingsHeader = observer(function BillingWorkspaceSettingsHeader() {
+  // translation
+  const { t } = useTranslation();
+  // derived values
+  const settingsDetails = WORKSPACE_SETTINGS["billing-and-plans"];
+  const Icon = WORKSPACE_SETTINGS_ICONS["billing-and-plans"];
+
+  return (
+    <SettingsPageHeader
+      leftItem={
+        <div className="flex items-center gap-2">
+          <Breadcrumbs>
+            <Breadcrumbs.Item
+              component={
+                <BreadcrumbLink
+                  label={t(settingsDetails.i18n_label)}
+                  icon={<Icon className="size-4 text-tertiary" />}
+                />
+              }
+            />
+          </Breadcrumbs>
+        </div>
+      }
+    />
+  );
+});
diff --git a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/billing/page.tsx b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/billing/page.tsx
index 0ea5d2c9c..85d59618f 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/billing/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/billing/page.tsx
@@ -1,14 +1,22 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 // component
 import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { NotAuthorizedView } from "@/components/auth-screens/not-authorized-view";
 import { PageHead } from "@/components/core/page-title";
-// hooks
 import { SettingsContentWrapper } from "@/components/settings/content-wrapper";
+// hooks
 import { useWorkspace } from "@/hooks/store/use-workspace";
 import { useUserPermissions } from "@/hooks/store/user";
 // plane web components
 import { BillingRoot } from "@/plane-web/components/workspace/billing";
+// local imports
+import { BillingWorkspaceSettingsHeader } from "./header";
 
 function BillingSettingsPage() {
   // store hooks
@@ -23,7 +31,7 @@ function BillingSettingsPage() {
   }
 
   return (
-    <SettingsContentWrapper size="lg">
+    <SettingsContentWrapper header={<BillingWorkspaceSettingsHeader />} hugging>
       <PageHead title={pageTitle} />
       <BillingRoot />
     </SettingsContentWrapper>
diff --git a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/exports/header.tsx b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/exports/header.tsx
new file mode 100644
index 000000000..2cc08a4bf
--- /dev/null
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/exports/header.tsx
@@ -0,0 +1,42 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// plane imports
+import { WORKSPACE_SETTINGS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { Breadcrumbs } from "@plane/ui";
+// components
+import { BreadcrumbLink } from "@/components/common/breadcrumb-link";
+import { SettingsPageHeader } from "@/components/settings/page-header";
+import { WORKSPACE_SETTINGS_ICONS } from "@/components/settings/workspace/sidebar/item-icon";
+
+export const ExportsWorkspaceSettingsHeader = observer(function ExportsWorkspaceSettingsHeader() {
+  // translation
+  const { t } = useTranslation();
+  // derived values
+  const settingsDetails = WORKSPACE_SETTINGS.export;
+  const Icon = WORKSPACE_SETTINGS_ICONS.export;
+
+  return (
+    <SettingsPageHeader
+      leftItem={
+        <div className="flex items-center gap-2">
+          <Breadcrumbs>
+            <Breadcrumbs.Item
+              component={
+                <BreadcrumbLink
+                  label={t(settingsDetails.i18n_label)}
+                  icon={<Icon className="size-4 text-tertiary" />}
+                />
+              }
+            />
+          </Breadcrumbs>
+        </div>
+      }
+    />
+  );
+});
diff --git a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/exports/page.tsx b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/exports/page.tsx
index 5891e5084..af6141be0 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/exports/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/exports/page.tsx
@@ -1,17 +1,24 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
-// components
 import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { cn } from "@plane/utils";
+// components
 import { NotAuthorizedView } from "@/components/auth-screens/not-authorized-view";
 import { PageHead } from "@/components/core/page-title";
-import ExportGuide from "@/components/exporter/guide";
-// helpers
-// hooks
+import { ExportGuide } from "@/components/exporter/guide";
 import { SettingsContentWrapper } from "@/components/settings/content-wrapper";
-import SettingsHeading from "@/components/settings/heading";
+import { SettingsHeading } from "@/components/settings/heading";
+// hooks
 import { useWorkspace } from "@/hooks/store/use-workspace";
 import { useUserPermissions } from "@/hooks/store/user";
+// local imports
+import { ExportsWorkspaceSettingsHeader } from "./header";
 
 function ExportsPage() {
   // store hooks
@@ -34,10 +41,10 @@ function ExportsPage() {
   }
 
   return (
-    <SettingsContentWrapper size="lg">
+    <SettingsContentWrapper header={<ExportsWorkspaceSettingsHeader />} hugging>
       <PageHead title={pageTitle} />
       <div
-        className={cn("w-full", {
+        className={cn("flex w-full flex-col gap-y-6", {
           "opacity-60": !canPerformWorkspaceMemberActions,
         })}
       >
diff --git a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/header.tsx b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/header.tsx
new file mode 100644
index 000000000..7a69bb295
--- /dev/null
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/header.tsx
@@ -0,0 +1,42 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// plane imports
+import { WORKSPACE_SETTINGS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { Breadcrumbs } from "@plane/ui";
+// components
+import { BreadcrumbLink } from "@/components/common/breadcrumb-link";
+import { SettingsPageHeader } from "@/components/settings/page-header";
+import { WORKSPACE_SETTINGS_ICONS } from "@/components/settings/workspace/sidebar/item-icon";
+
+export const GeneralWorkspaceSettingsHeader = observer(function GeneralWorkspaceSettingsHeader() {
+  // translation
+  const { t } = useTranslation();
+  // derived values
+  const settingsDetails = WORKSPACE_SETTINGS.general;
+  const Icon = WORKSPACE_SETTINGS_ICONS.general;
+
+  return (
+    <SettingsPageHeader
+      leftItem={
+        <div className="flex items-center gap-2">
+          <Breadcrumbs>
+            <Breadcrumbs.Item
+              component={
+                <BreadcrumbLink
+                  label={t(settingsDetails.i18n_label)}
+                  icon={<Icon className="size-4 text-tertiary" />}
+                />
+              }
+            />
+          </Breadcrumbs>
+        </div>
+      }
+    />
+  );
+});
diff --git a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/imports/page.tsx b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/imports/page.tsx
deleted file mode 100644
index 89eb978fc..000000000
--- a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/imports/page.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import { observer } from "mobx-react";
-// components
-import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
-import { NotAuthorizedView } from "@/components/auth-screens/not-authorized-view";
-import { PageHead } from "@/components/core/page-title";
-import IntegrationGuide from "@/components/integration/guide";
-// hooks
-import { SettingsContentWrapper } from "@/components/settings/content-wrapper";
-import { SettingsHeading } from "@/components/settings/heading";
-import { useWorkspace } from "@/hooks/store/use-workspace";
-import { useUserPermissions } from "@/hooks/store/user";
-
-function ImportsPage() {
-  // router
-  // store hooks
-  const { currentWorkspace } = useWorkspace();
-  const { allowPermissions } = useUserPermissions();
-  // derived values
-  const isAdmin = allowPermissions([EUserPermissions.ADMIN], EUserPermissionsLevel.WORKSPACE);
-  const pageTitle = currentWorkspace?.name ? `${currentWorkspace.name} - Imports` : undefined;
-
-  if (!isAdmin) return <NotAuthorizedView section="settings" className="h-auto" />;
-
-  return (
-    <SettingsContentWrapper size="lg">
-      <PageHead title={pageTitle} />
-      <section className="w-full">
-        <SettingsHeading title="Imports" />
-        <IntegrationGuide />
-      </section>
-    </SettingsContentWrapper>
-  );
-}
-
-export default observer(ImportsPage);
diff --git a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/integrations/page.tsx b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/integrations/page.tsx
index 8e4b1b1ea..ea3208687 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/integrations/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/integrations/page.tsx
@@ -1,11 +1,16 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import useSWR from "swr";
 // components
 import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { NotAuthorizedView } from "@/components/auth-screens/not-authorized-view";
 import { PageHead } from "@/components/core/page-title";
-import { SingleIntegrationCard } from "@/components/integration";
-import { SettingsContentWrapper } from "@/components/settings/content-wrapper";
+import { SingleIntegrationCard } from "@/components/integration/single-integration-card";
 import { IntegrationAndImportExportBanner } from "@/components/ui/integration-and-import-export-banner";
 import { IntegrationsSettingsLoader } from "@/components/ui/loader/settings/integration";
 // constants
@@ -33,7 +38,7 @@ function WorkspaceIntegrationsPage() {
   if (!isAdmin) return <NotAuthorizedView section="settings" className="h-auto" />;
 
   return (
-    <SettingsContentWrapper size="lg">
+    <>
       <PageHead title={pageTitle} />
       <section className="w-full overflow-y-auto">
         <IntegrationAndImportExportBanner bannerName="Integrations" />
@@ -47,7 +52,7 @@ function WorkspaceIntegrationsPage() {
           )}
         </div>
       </section>
-    </SettingsContentWrapper>
+    </>
   );
 }
 
diff --git a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/layout.tsx b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/layout.tsx
index 4412962cc..a57df1e70 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/layout.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/layout.tsx
@@ -1,26 +1,36 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import { usePathname } from "next/navigation";
 import { Outlet } from "react-router";
-// constants
-import { WORKSPACE_SETTINGS_ACCESS } from "@plane/constants";
-import type { EUserWorkspaceRoles } from "@plane/types";
 // components
 import { NotAuthorizedView } from "@/components/auth-screens/not-authorized-view";
 import { getWorkspaceActivePath, pathnameToAccessKey } from "@/components/settings/helper";
-import { SettingsMobileNav } from "@/components/settings/mobile";
+import { SettingsMobileNav } from "@/components/settings/mobile/nav";
+// plane imports
+import { WORKSPACE_SETTINGS_ACCESS } from "@plane/constants";
+import type { EUserWorkspaceRoles } from "@plane/types";
+// components
+import { WorkspaceSettingsSidebarRoot } from "@/components/settings/workspace/sidebar";
 // hooks
 import { useUserPermissions } from "@/hooks/store/user";
-// local components
-import { WorkspaceSettingsSidebar } from "./sidebar";
 
-function WorkspaceSettingLayout() {
+import type { Route } from "./+types/layout";
+
+const WorkspaceSettingLayout = observer(function WorkspaceSettingLayout({ params }: Route.ComponentProps) {
+  // router
+  const { workspaceSlug } = params;
   // store hooks
   const { workspaceUserInfo, getWorkspaceRoleByWorkspaceSlug } = useUserPermissions();
   // next hooks
   const pathname = usePathname();
   // derived values
-  const { workspaceSlug, accessKey } = pathnameToAccessKey(pathname);
-  const userWorkspaceRole = getWorkspaceRoleByWorkspaceSlug(workspaceSlug.toString());
+  const { accessKey } = pathnameToAccessKey(pathname);
+  const userWorkspaceRole = getWorkspaceRoleByWorkspaceSlug(workspaceSlug);
 
   let isAuthorized: boolean | string = false;
   if (pathname && workspaceSlug && userWorkspaceRole) {
@@ -30,23 +40,23 @@ function WorkspaceSettingLayout() {
   return (
     <>
       <SettingsMobileNav
-        hamburgerContent={WorkspaceSettingsSidebar}
+        hamburgerContent={WorkspaceSettingsSidebarRoot}
         activePath={getWorkspaceActivePath(pathname) || ""}
       />
-      <div className="inset-y-0 flex flex-row w-full h-full">
+      <div className="inset-y-0 flex h-full w-full flex-row">
         {workspaceUserInfo && !isAuthorized ? (
           <NotAuthorizedView section="settings" className="h-auto" />
         ) : (
-          <div className="relative flex h-full w-full">
-            <div className="hidden md:block">{<WorkspaceSettingsSidebar />}</div>
-            <div className="w-full h-full overflow-y-scroll md:pt-page-y">
-              <Outlet />
+          <div className="relative flex size-full">
+            <div className="hidden h-full md:block">
+              <WorkspaceSettingsSidebarRoot />
             </div>
+            <Outlet />
           </div>
         )}
       </div>
     </>
   );
-}
+});
 
-export default observer(WorkspaceSettingLayout);
+export default WorkspaceSettingLayout;
diff --git a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/members/header.tsx b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/members/header.tsx
new file mode 100644
index 000000000..243f8da7b
--- /dev/null
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/members/header.tsx
@@ -0,0 +1,42 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// plane imports
+import { WORKSPACE_SETTINGS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { Breadcrumbs } from "@plane/ui";
+// components
+import { BreadcrumbLink } from "@/components/common/breadcrumb-link";
+import { SettingsPageHeader } from "@/components/settings/page-header";
+import { WORKSPACE_SETTINGS_ICONS } from "@/components/settings/workspace/sidebar/item-icon";
+
+export const MembersWorkspaceSettingsHeader = observer(function MembersWorkspaceSettingsHeader() {
+  // plane hooks
+  const { t } = useTranslation();
+  // derived values
+  const settingsDetails = WORKSPACE_SETTINGS.members;
+  const Icon = WORKSPACE_SETTINGS_ICONS.members;
+
+  return (
+    <SettingsPageHeader
+      leftItem={
+        <div className="flex items-center gap-2">
+          <Breadcrumbs>
+            <Breadcrumbs.Item
+              component={
+                <BreadcrumbLink
+                  label={t(settingsDetails.i18n_label)}
+                  icon={<Icon className="size-4 text-tertiary" />}
+                />
+              }
+            />
+          </Breadcrumbs>
+        </div>
+      }
+    />
+  );
+});
diff --git a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/members/page.tsx b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/members/page.tsx
index 609c13c90..1e09ef32b 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/members/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/members/page.tsx
@@ -1,15 +1,16 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useState } from "react";
 import { observer } from "mobx-react";
-import { Search } from "lucide-react";
 // types
-import {
-  EUserPermissions,
-  EUserPermissionsLevel,
-  MEMBER_TRACKER_ELEMENTS,
-  MEMBER_TRACKER_EVENTS,
-} from "@plane/constants";
+import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { Button } from "@plane/propel/button";
+import { SearchIcon } from "@plane/propel/icons";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { IWorkspaceBulkInviteFormData } from "@plane/types";
 import { cn } from "@plane/utils";
@@ -18,20 +19,20 @@ import { NotAuthorizedView } from "@/components/auth-screens/not-authorized-view
 import { CountChip } from "@/components/common/count-chip";
 import { PageHead } from "@/components/core/page-title";
 import { MemberListFiltersDropdown } from "@/components/project/dropdowns/filters/member-list";
-import { SettingsContentWrapper } from "@/components/settings/content-wrapper";
 import { WorkspaceMembersList } from "@/components/workspace/settings/members-list";
-// helpers
-import { captureError, captureSuccess } from "@/helpers/event-tracker.helper";
 // hooks
 import { useMember } from "@/hooks/store/use-member";
 import { useWorkspace } from "@/hooks/store/use-workspace";
 import { useUserPermissions } from "@/hooks/store/user";
 // plane web components
 import { BillingActionsButton } from "@/plane-web/components/workspace/billing/billing-actions-button";
-import { SendWorkspaceInvitationModal } from "@/plane-web/components/workspace/members/invite-modal";
+import { SendWorkspaceInvitationModal, MembersActivityButton } from "@/plane-web/components/workspace/members";
+import { SettingsContentWrapper } from "@/components/settings/content-wrapper";
+// local imports
 import type { Route } from "./+types/page";
+import { MembersWorkspaceSettingsHeader } from "./header";
 
-function WorkspaceMembersSettingsPage({ params }: Route.ComponentProps) {
+const WorkspaceMembersSettingsPage = observer(function WorkspaceMembersSettingsPage({ params }: Route.ComponentProps) {
   // states
   const [inviteModal, setInviteModal] = useState(false);
   const [searchQuery, setSearchQuery] = useState<string>("");
@@ -58,35 +59,24 @@ function WorkspaceMembersSettingsPage({ params }: Route.ComponentProps) {
 
       setInviteModal(false);
 
-      captureSuccess({
-        eventName: MEMBER_TRACKER_EVENTS.invite,
-        payload: {
-          emails: data.emails.map((email) => email.email),
-        },
-      });
-
       setToast({
         type: TOAST_TYPE.SUCCESS,
         title: "Success!",
         message: t("workspace_settings.settings.members.invitations_sent_successfully"),
       });
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    } catch (err: any) {
-      captureError({
-        eventName: MEMBER_TRACKER_EVENTS.invite,
-        payload: {
-          emails: data.emails.map((email) => email.email),
-        },
-        error: err,
-      });
-
+    } catch (error: unknown) {
+      let message = undefined;
+      if (error instanceof Error) {
+        const err = error as Error & { error?: string };
+        message = err.error;
+      }
       setToast({
         type: TOAST_TYPE.ERROR,
         title: "Error!",
-        message: `${err.error ?? t("something_went_wrong_please_try_again")}`,
+        message: `${message ?? t("something_went_wrong_please_try_again")}`,
       });
 
-      throw err;
+      throw error;
     }
   };
 
@@ -111,7 +101,7 @@ function WorkspaceMembersSettingsPage({ params }: Route.ComponentProps) {
   }
 
   return (
-    <SettingsContentWrapper size="lg">
+    <SettingsContentWrapper header={<MembersWorkspaceSettingsHeader />} hugging>
       <PageHead title={pageTitle} />
       <SendWorkspaceInvitationModal
         isOpen={inviteModal}
@@ -119,24 +109,25 @@ function WorkspaceMembersSettingsPage({ params }: Route.ComponentProps) {
         onSubmit={handleWorkspaceInvite}
       />
       <section
-        className={cn("w-full h-full", {
+        className={cn("size-full", {
           "opacity-60": !canPerformWorkspaceMemberActions,
         })}
       >
-        <div className="flex justify-between gap-4 pb-3.5 items-start">
-          <h4 className="flex items-center gap-2.5 text-xl font-medium">
+        <div className="flex items-center justify-between gap-4 pb-3.5">
+          <h4 className="flex items-center gap-2.5 text-h3-medium">
             {t("workspace_settings.settings.members.title")}
             {workspaceMemberIds && workspaceMemberIds.length > 0 && (
-              <CountChip count={workspaceMemberIds.length} className="h-5 m-auto" />
+              <CountChip count={workspaceMemberIds.length} className="m-auto h-5" />
             )}
           </h4>
           <div className="flex items-center gap-2">
-            <div className="flex items-center gap-1.5 rounded-md border border-custom-border-200 bg-custom-background-100 px-2.5 py-1.5">
-              <Search className="h-3.5 w-3.5 text-custom-text-400" />
+            <div className="flex items-center gap-1.5 rounded-md border border-subtle bg-surface-1 px-2.5 py-1.5">
+              <SearchIcon className="h-3.5 w-3.5 text-placeholder" />
               <input
-                className="w-full max-w-[234px] border-none bg-transparent text-sm outline-none placeholder:text-custom-text-400"
+                className="w-full max-w-[234px] border-none bg-transparent text-body-xs-regular outline-none placeholder:text-placeholder"
                 placeholder={`${t("search")}...`}
                 value={searchQuery}
+                // eslint-disable-next-line jsx-a11y/no-autofocus
                 autoFocus
                 onChange={(e) => setSearchQuery(e.target.value)}
               />
@@ -146,13 +137,9 @@ function WorkspaceMembersSettingsPage({ params }: Route.ComponentProps) {
               handleUpdate={handleRoleFilterUpdate}
               memberType="workspace"
             />
+            <MembersActivityButton workspaceSlug={workspaceSlug} />
             {canPerformWorkspaceAdminActions && (
-              <Button
-                variant="primary"
-                size="sm"
-                onClick={() => setInviteModal(true)}
-                data-ph-element={MEMBER_TRACKER_ELEMENTS.HEADER_ADD_BUTTON}
-              >
+              <Button variant="primary" size="lg" onClick={() => setInviteModal(true)}>
                 {t("workspace_settings.settings.members.add_member")}
               </Button>
             )}
@@ -163,6 +150,6 @@ function WorkspaceMembersSettingsPage({ params }: Route.ComponentProps) {
       </section>
     </SettingsContentWrapper>
   );
-}
+});
 
-export default observer(WorkspaceMembersSettingsPage);
+export default WorkspaceMembersSettingsPage;
diff --git a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/mobile-header-tabs.tsx b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/mobile-header-tabs.tsx
deleted file mode 100644
index 93c01bf2f..000000000
--- a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/mobile-header-tabs.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import { observer } from "mobx-react";
-import { useParams, usePathname } from "next/navigation";
-import { WORKSPACE_SETTINGS_LINKS, EUserPermissionsLevel } from "@plane/constants";
-import { useTranslation } from "@plane/i18n";
-// hooks
-import { useUserPermissions } from "@/hooks/store/user";
-import { useAppRouter } from "@/hooks/use-app-router";
-// plane web helpers
-import { shouldRenderSettingLink } from "@/plane-web/helpers/workspace.helper";
-
-export const MobileWorkspaceSettingsTabs = observer(function MobileWorkspaceSettingsTabs() {
-  const router = useAppRouter();
-  const { workspaceSlug } = useParams();
-  const pathname = usePathname();
-  const { t } = useTranslation();
-  // mobx store
-  const { allowPermissions } = useUserPermissions();
-
-  return (
-    <div className="flex-shrink-0 md:hidden sticky inset-0 flex overflow-x-auto bg-custom-background-100 z-10">
-      {WORKSPACE_SETTINGS_LINKS.map(
-        (item, index) =>
-          shouldRenderSettingLink(workspaceSlug.toString(), item.key) &&
-          allowPermissions(item.access, EUserPermissionsLevel.WORKSPACE, workspaceSlug.toString()) && (
-            <div
-              className={`${
-                item.highlight(pathname, `/${workspaceSlug}`)
-                  ? "text-custom-primary-100 text-sm py-2 px-3 whitespace-nowrap flex flex-grow cursor-pointer justify-around border-b border-custom-primary-200"
-                  : "text-custom-text-200 flex flex-grow cursor-pointer justify-around border-b border-custom-border-200 text-sm py-2 px-3 whitespace-nowrap"
-              }`}
-              key={index}
-              onClick={() => router.push(`/${workspaceSlug}${item.href}`)}
-            >
-              {t(item.i18n_label)}
-            </div>
-          )
-      )}
-    </div>
-  );
-});
diff --git a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/page.tsx b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/page.tsx
index f7aa43fde..55422ecc7 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/page.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 // plane imports
 import { useTranslation } from "@plane/i18n";
@@ -7,8 +13,10 @@ import { SettingsContentWrapper } from "@/components/settings/content-wrapper";
 import { WorkspaceDetails } from "@/components/workspace/settings/workspace-details";
 // hooks
 import { useWorkspace } from "@/hooks/store/use-workspace";
+// local imports
+import { GeneralWorkspaceSettingsHeader } from "./header";
 
-function WorkspaceSettingsPage() {
+function GeneralWorkspaceSettingsPage() {
   // store hooks
   const { currentWorkspace } = useWorkspace();
   const { t } = useTranslation();
@@ -18,11 +26,11 @@ function WorkspaceSettingsPage() {
     : undefined;
 
   return (
-    <SettingsContentWrapper>
+    <SettingsContentWrapper header={<GeneralWorkspaceSettingsHeader />}>
       <PageHead title={pageTitle} />
       <WorkspaceDetails />
     </SettingsContentWrapper>
   );
 }
 
-export default observer(WorkspaceSettingsPage);
+export default observer(GeneralWorkspaceSettingsPage);
diff --git a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/sidebar.tsx b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/sidebar.tsx
deleted file mode 100644
index d4f6aed1a..000000000
--- a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/sidebar.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import { useParams, usePathname } from "next/navigation";
-import { ArrowUpToLine, Building, CreditCard, Users, Webhook } from "lucide-react";
-import type { LucideIcon } from "lucide-react";
-// plane imports
-import {
-  EUserPermissionsLevel,
-  EUserPermissions,
-  GROUPED_WORKSPACE_SETTINGS,
-  WORKSPACE_SETTINGS_CATEGORIES,
-  WORKSPACE_SETTINGS_CATEGORY,
-} from "@plane/constants";
-import type { WORKSPACE_SETTINGS } from "@plane/constants";
-import type { ISvgIcons } from "@plane/propel/icons";
-import type { EUserWorkspaceRoles } from "@plane/types";
-// components
-import { SettingsSidebar } from "@/components/settings/sidebar";
-// hooks
-import { useUserPermissions } from "@/hooks/store/user";
-// plane web imports
-import { shouldRenderSettingLink } from "@/plane-web/helpers/workspace.helper";
-
-export const WORKSPACE_SETTINGS_ICONS: Record<keyof typeof WORKSPACE_SETTINGS, LucideIcon | React.FC<ISvgIcons>> = {
-  general: Building,
-  members: Users,
-  export: ArrowUpToLine,
-  "billing-and-plans": CreditCard,
-  webhooks: Webhook,
-};
-
-export function WorkspaceActionIcons({ type, size, className }: { type: string; size?: number; className?: string }) {
-  if (type === undefined) return null;
-  const Icon = WORKSPACE_SETTINGS_ICONS[type as keyof typeof WORKSPACE_SETTINGS_ICONS];
-  if (!Icon) return null;
-  return <Icon size={size} className={className} strokeWidth={2} />;
-}
-
-type TWorkspaceSettingsSidebarProps = {
-  isMobile?: boolean;
-};
-
-export function WorkspaceSettingsSidebar(props: TWorkspaceSettingsSidebarProps) {
-  const { isMobile = false } = props;
-  // router
-  const pathname = usePathname();
-  const { workspaceSlug } = useParams(); // store hooks
-  const { allowPermissions } = useUserPermissions();
-  const isAdmin = allowPermissions([EUserPermissions.ADMIN], EUserPermissionsLevel.WORKSPACE);
-
-  return (
-    <SettingsSidebar
-      isMobile={isMobile}
-      categories={WORKSPACE_SETTINGS_CATEGORIES.filter(
-        (category) =>
-          isAdmin || ![WORKSPACE_SETTINGS_CATEGORY.FEATURES, WORKSPACE_SETTINGS_CATEGORY.DEVELOPER].includes(category)
-      )}
-      groupedSettings={GROUPED_WORKSPACE_SETTINGS}
-      workspaceSlug={workspaceSlug.toString()}
-      isActive={(data: { href: string }) =>
-        data.href === "/settings"
-          ? pathname === `/${workspaceSlug}${data.href}/`
-          : new RegExp(`^/${workspaceSlug}${data.href}/`).test(pathname)
-      }
-      shouldRender={(data: { key: string; access?: EUserWorkspaceRoles[] | undefined }) =>
-        data.access
-          ? shouldRenderSettingLink(workspaceSlug.toString(), data.key) &&
-            allowPermissions(data.access, EUserPermissionsLevel.WORKSPACE, workspaceSlug.toString())
-          : false
-      }
-      actionIcons={WorkspaceActionIcons}
-    />
-  );
-}
diff --git a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/webhooks/[webhookId]/header.tsx b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/webhooks/[webhookId]/header.tsx
new file mode 100644
index 000000000..7c24c6ba5
--- /dev/null
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/webhooks/[webhookId]/header.tsx
@@ -0,0 +1,42 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// plane imports
+import { WORKSPACE_SETTINGS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { Breadcrumbs } from "@plane/ui";
+// components
+import { BreadcrumbLink } from "@/components/common/breadcrumb-link";
+import { SettingsPageHeader } from "@/components/settings/page-header";
+import { WORKSPACE_SETTINGS_ICONS } from "@/components/settings/workspace/sidebar/item-icon";
+
+export const WebhookDetailsWorkspaceSettingsHeader = observer(function WebhookDetailsWorkspaceSettingsHeader() {
+  // translation
+  const { t } = useTranslation();
+  // derived values
+  const settingsDetails = WORKSPACE_SETTINGS.webhooks;
+  const Icon = WORKSPACE_SETTINGS_ICONS.webhooks;
+
+  return (
+    <SettingsPageHeader
+      leftItem={
+        <div className="flex items-center gap-2">
+          <Breadcrumbs>
+            <Breadcrumbs.Item
+              component={
+                <BreadcrumbLink
+                  label={t(settingsDetails.i18n_label)}
+                  icon={<Icon className="size-4 text-tertiary" />}
+                />
+              }
+            />
+          </Breadcrumbs>
+        </div>
+      }
+    />
+  );
+});
diff --git a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/webhooks/[webhookId]/page.tsx b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/webhooks/[webhookId]/page.tsx
index 67ce26505..5cb9d3c17 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/webhooks/[webhookId]/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/webhooks/[webhookId]/page.tsx
@@ -1,7 +1,13 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useState } from "react";
 import { observer } from "mobx-react";
 import useSWR from "swr";
-import { EUserPermissions, EUserPermissionsLevel, WORKSPACE_SETTINGS_TRACKER_EVENTS } from "@plane/constants";
+import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { IWebhook } from "@plane/types";
 // ui
@@ -11,11 +17,12 @@ import { PageHead } from "@/components/core/page-title";
 import { SettingsContentWrapper } from "@/components/settings/content-wrapper";
 import { DeleteWebhookModal, WebhookDeleteSection, WebhookForm } from "@/components/web-hooks";
 // hooks
-import { captureError, captureSuccess } from "@/helpers/event-tracker.helper";
 import { useWebhook } from "@/hooks/store/use-webhook";
 import { useWorkspace } from "@/hooks/store/use-workspace";
 import { useUserPermissions } from "@/hooks/store/user";
+// local imports
 import type { Route } from "./+types/page";
+import { WebhookDetailsWorkspaceSettingsHeader } from "./header";
 
 function WebhookDetailsPage({ params }: Route.ComponentProps) {
   // states
@@ -55,12 +62,6 @@ function WebhookDetailsPage({ params }: Route.ComponentProps) {
 
     try {
       await updateWebhook(workspaceSlug, formData.id, payload);
-
-      captureSuccess({
-        eventName: WORKSPACE_SETTINGS_TRACKER_EVENTS.webhook_updated,
-        payload: { webhook: formData.id },
-      });
-
       setToast({
         type: TOAST_TYPE.SUCCESS,
         title: "Success!",
@@ -68,12 +69,6 @@ function WebhookDetailsPage({ params }: Route.ComponentProps) {
       });
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
     } catch (error: any) {
-      captureError({
-        eventName: WORKSPACE_SETTINGS_TRACKER_EVENTS.webhook_updated,
-        payload: { webhook: formData.id },
-        error: error as Error,
-      });
-
       setToast({
         type: TOAST_TYPE.ERROR,
         title: "Error!",
@@ -87,7 +82,7 @@ function WebhookDetailsPage({ params }: Route.ComponentProps) {
       <>
         <PageHead title={pageTitle} />
         <div className="mt-10 flex h-full w-full justify-center p-4">
-          <p className="text-sm text-custom-text-300">You are not authorized to access this page.</p>
+          <p className="text-13 text-tertiary">You are not authorized to access this page.</p>
         </div>
       </>
     );
@@ -100,7 +95,7 @@ function WebhookDetailsPage({ params }: Route.ComponentProps) {
     );
 
   return (
-    <SettingsContentWrapper>
+    <SettingsContentWrapper header={<WebhookDetailsWorkspaceSettingsHeader />}>
       <PageHead title={pageTitle} />
       <DeleteWebhookModal isOpen={deleteWebhookModal} onClose={() => setDeleteWebhookModal(false)} />
       <div className="w-full space-y-8 overflow-y-auto">
diff --git a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/webhooks/header.tsx b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/webhooks/header.tsx
new file mode 100644
index 000000000..0916bf9f0
--- /dev/null
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/webhooks/header.tsx
@@ -0,0 +1,42 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// plane imports
+import { WORKSPACE_SETTINGS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { Breadcrumbs } from "@plane/ui";
+// components
+import { BreadcrumbLink } from "@/components/common/breadcrumb-link";
+import { SettingsPageHeader } from "@/components/settings/page-header";
+import { WORKSPACE_SETTINGS_ICONS } from "@/components/settings/workspace/sidebar/item-icon";
+
+export const WebhooksWorkspaceSettingsHeader = observer(function WebhooksWorkspaceSettingsHeader() {
+  // translation
+  const { t } = useTranslation();
+  // derived values
+  const settingsDetails = WORKSPACE_SETTINGS.webhooks;
+  const Icon = WORKSPACE_SETTINGS_ICONS.webhooks;
+
+  return (
+    <SettingsPageHeader
+      leftItem={
+        <div className="flex items-center gap-2">
+          <Breadcrumbs>
+            <Breadcrumbs.Item
+              component={
+                <BreadcrumbLink
+                  label={t(settingsDetails.i18n_label)}
+                  icon={<Icon className="size-4 text-tertiary" />}
+                />
+              }
+            />
+          </Breadcrumbs>
+        </div>
+      }
+    />
+  );
+});
diff --git a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/webhooks/page.tsx b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/webhooks/page.tsx
index 93ae93967..099a0ee40 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/webhooks/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/webhooks/page.tsx
@@ -1,23 +1,31 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useEffect, useState } from "react";
 import { observer } from "mobx-react";
 import useSWR from "swr";
 // plane imports
-import { EUserPermissions, EUserPermissionsLevel, WORKSPACE_SETTINGS_TRACKER_ELEMENTS } from "@plane/constants";
+import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
+import { Button } from "@plane/propel/button";
 // components
 import { EmptyStateCompact } from "@plane/propel/empty-state";
 import { NotAuthorizedView } from "@/components/auth-screens/not-authorized-view";
 import { PageHead } from "@/components/core/page-title";
-import { SettingsContentWrapper } from "@/components/settings/content-wrapper";
 import { SettingsHeading } from "@/components/settings/heading";
 import { WebhookSettingsLoader } from "@/components/ui/loader/settings/web-hook";
+import { SettingsContentWrapper } from "@/components/settings/content-wrapper";
 import { WebhooksList, CreateWebhookModal } from "@/components/web-hooks";
 // hooks
-import { captureClick } from "@/helpers/event-tracker.helper";
 import { useWebhook } from "@/hooks/store/use-webhook";
 import { useWorkspace } from "@/hooks/store/use-workspace";
 import { useUserPermissions } from "@/hooks/store/user";
+// local imports
 import type { Route } from "./+types/page";
+import { WebhooksWorkspaceSettingsHeader } from "./header";
 
 function WebhooksListPage({ params }: Route.ComponentProps) {
   // states
@@ -54,7 +62,7 @@ function WebhooksListPage({ params }: Route.ComponentProps) {
   if (!webhooks) return <WebhookSettingsLoader />;
 
   return (
-    <SettingsContentWrapper>
+    <SettingsContentWrapper header={<WebhooksWorkspaceSettingsHeader />}>
       <PageHead title={pageTitle} />
       <div className="w-full">
         <CreateWebhookModal
@@ -69,23 +77,19 @@ function WebhooksListPage({ params }: Route.ComponentProps) {
         <SettingsHeading
           title={t("workspace_settings.settings.webhooks.title")}
           description={t("workspace_settings.settings.webhooks.description")}
-          button={{
-            label: t("workspace_settings.settings.webhooks.add_webhook"),
-            onClick: () => {
-              captureClick({
-                elementName: WORKSPACE_SETTINGS_TRACKER_ELEMENTS.HEADER_ADD_WEBHOOK_BUTTON,
-              });
-              setShowCreateWebhookModal(true);
-            },
-          }}
+          control={
+            <Button variant="primary" size="lg" onClick={() => setShowCreateWebhookModal(true)}>
+              {t("workspace_settings.settings.webhooks.add_webhook")}
+            </Button>
+          }
         />
         {Object.keys(webhooks).length > 0 ? (
-          <div className="flex h-full w-full flex-col">
+          <div className="mt-4">
             <WebhooksList />
           </div>
         ) : (
           <div className="flex h-full w-full flex-col">
-            <div className="h-full w-full flex items-center justify-center">
+            <div className="flex h-full w-full items-center justify-center">
               <EmptyStateCompact
                 assetKey="webhook"
                 title={t("settings_empty_state.webhooks.title")}
@@ -94,9 +98,6 @@ function WebhooksListPage({ params }: Route.ComponentProps) {
                   {
                     label: t("settings_empty_state.webhooks.cta_primary"),
                     onClick: () => {
-                      captureClick({
-                        elementName: WORKSPACE_SETTINGS_TRACKER_ELEMENTS.EMPTY_STATE_ADD_WEBHOOK_BUTTON,
-                      });
                       setShowCreateWebhookModal(true);
                     },
                   },
diff --git a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/account/api-tokens/page.tsx b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/account/api-tokens/page.tsx
deleted file mode 100644
index 6553d52a1..000000000
--- a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/account/api-tokens/page.tsx
+++ /dev/null
@@ -1,109 +0,0 @@
-import React, { useState } from "react";
-import { observer } from "mobx-react";
-import useSWR from "swr";
-// plane imports
-import { PROFILE_SETTINGS_TRACKER_ELEMENTS } from "@plane/constants";
-import { useTranslation } from "@plane/i18n";
-// component
-import { EmptyStateCompact } from "@plane/propel/empty-state";
-import { APITokenService } from "@plane/services";
-import { CreateApiTokenModal } from "@/components/api-token/modal/create-token-modal";
-import { ApiTokenListItem } from "@/components/api-token/token-list-item";
-import { PageHead } from "@/components/core/page-title";
-import { SettingsHeading } from "@/components/settings/heading";
-import { APITokenSettingsLoader } from "@/components/ui/loader/settings/api-token";
-import { API_TOKENS_LIST } from "@/constants/fetch-keys";
-// store hooks
-import { captureClick } from "@/helpers/event-tracker.helper";
-import { useWorkspace } from "@/hooks/store/use-workspace";
-
-const apiTokenService = new APITokenService();
-
-function ApiTokensPage() {
-  // states
-  const [isCreateTokenModalOpen, setIsCreateTokenModalOpen] = useState(false);
-  // router
-  // plane hooks
-  const { t } = useTranslation();
-  // store hooks
-  const { currentWorkspace } = useWorkspace();
-
-  const { data: tokens } = useSWR(API_TOKENS_LIST, () => apiTokenService.list());
-
-  const pageTitle = currentWorkspace?.name
-    ? `${currentWorkspace.name} - ${t("workspace_settings.settings.api_tokens.title")}`
-    : undefined;
-
-  if (!tokens) {
-    return <APITokenSettingsLoader />;
-  }
-
-  return (
-    <div className="w-full">
-      <PageHead title={pageTitle} />
-      <CreateApiTokenModal isOpen={isCreateTokenModalOpen} onClose={() => setIsCreateTokenModalOpen(false)} />
-      <section className="w-full">
-        {tokens.length > 0 ? (
-          <>
-            <SettingsHeading
-              title={t("account_settings.api_tokens.heading")}
-              description={t("account_settings.api_tokens.description")}
-              button={{
-                label: t("workspace_settings.settings.api_tokens.add_token"),
-                onClick: () => {
-                  captureClick({
-                    elementName: PROFILE_SETTINGS_TRACKER_ELEMENTS.HEADER_ADD_PAT_BUTTON,
-                  });
-                  setIsCreateTokenModalOpen(true);
-                },
-              }}
-            />
-            <div>
-              {tokens.map((token) => (
-                <ApiTokenListItem key={token.id} token={token} />
-              ))}
-            </div>
-          </>
-        ) : (
-          <div className="flex h-full w-full flex-col py-">
-            <SettingsHeading
-              title={t("account_settings.api_tokens.heading")}
-              description={t("account_settings.api_tokens.description")}
-              button={{
-                label: t("workspace_settings.settings.api_tokens.add_token"),
-                onClick: () => {
-                  captureClick({
-                    elementName: PROFILE_SETTINGS_TRACKER_ELEMENTS.HEADER_ADD_PAT_BUTTON,
-                  });
-                  setIsCreateTokenModalOpen(true);
-                },
-              }}
-            />
-
-            <EmptyStateCompact
-              assetKey="token"
-              assetClassName="size-20"
-              title={t("settings_empty_state.tokens.title")}
-              description={t("settings_empty_state.tokens.description")}
-              actions={[
-                {
-                  label: t("settings_empty_state.tokens.cta_primary"),
-                  onClick: () => {
-                    captureClick({
-                      elementName: PROFILE_SETTINGS_TRACKER_ELEMENTS.EMPTY_STATE_ADD_PAT_BUTTON,
-                    });
-                    setIsCreateTokenModalOpen(true);
-                  },
-                },
-              ]}
-              align="start"
-              rootClassName="py-20"
-            />
-          </div>
-        )}
-      </section>
-    </div>
-  );
-}
-
-export default observer(ApiTokensPage);
diff --git a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/account/layout.tsx b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/account/layout.tsx
deleted file mode 100644
index 25d737300..000000000
--- a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/account/layout.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import { observer } from "mobx-react";
-import { usePathname } from "next/navigation";
-import { Outlet } from "react-router";
-// components
-import { SettingsContentWrapper } from "@/components/settings/content-wrapper";
-import { getProfileActivePath } from "@/components/settings/helper";
-import { SettingsMobileNav } from "@/components/settings/mobile";
-// local imports
-import { ProfileSidebar } from "./sidebar";
-
-function ProfileSettingsLayout() {
-  // router
-  const pathname = usePathname();
-
-  return (
-    <>
-      <SettingsMobileNav hamburgerContent={ProfileSidebar} activePath={getProfileActivePath(pathname) || ""} />
-      <div className="relative flex h-full w-full">
-        <div className="hidden md:block">
-          <ProfileSidebar />
-        </div>
-        <div className="w-full h-full overflow-y-scroll md:pt-page-y">
-          <SettingsContentWrapper>
-            <Outlet />
-          </SettingsContentWrapper>
-        </div>
-      </div>
-    </>
-  );
-}
-
-export default observer(ProfileSettingsLayout);
diff --git a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/account/preferences/page.tsx b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/account/preferences/page.tsx
deleted file mode 100644
index 1df1df643..000000000
--- a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/account/preferences/page.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import { observer } from "mobx-react";
-// plane imports
-import { useTranslation } from "@plane/i18n";
-// components
-import { PageHead } from "@/components/core/page-title";
-import { PreferencesList } from "@/components/preferences/list";
-import { LanguageTimezone } from "@/components/profile/preferences/language-timezone";
-import { ProfileSettingContentHeader } from "@/components/profile/profile-setting-content-header";
-import { SettingsHeading } from "@/components/settings/heading";
-// hooks
-import { useUserProfile } from "@/hooks/store/user";
-
-function ProfileAppearancePage() {
-  const { t } = useTranslation();
-  // hooks
-  const { data: userProfile } = useUserProfile();
-
-  if (!userProfile) return <></>;
-  return (
-    <>
-      <PageHead title={`${t("profile.label")} - ${t("preferences")}`} />
-      <div className="flex flex-col gap-4 w-full">
-        <div>
-          <SettingsHeading
-            title={t("account_settings.preferences.heading")}
-            description={t("account_settings.preferences.description")}
-          />
-          <PreferencesList />
-        </div>
-        <div>
-          <ProfileSettingContentHeader title={t("language_and_time")} />
-          <LanguageTimezone />
-        </div>
-      </div>
-    </>
-  );
-}
-
-export default observer(ProfileAppearancePage);
diff --git a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/account/security/page.tsx b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/account/security/page.tsx
deleted file mode 100644
index 4ad032f0e..000000000
--- a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/account/security/page.tsx
+++ /dev/null
@@ -1,258 +0,0 @@
-import { useState } from "react";
-import { observer } from "mobx-react";
-import { Controller, useForm } from "react-hook-form";
-import { Eye, EyeOff } from "lucide-react";
-// plane imports
-import { E_PASSWORD_STRENGTH } from "@plane/constants";
-import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
-import { Input, PasswordStrengthIndicator } from "@plane/ui";
-import { getPasswordStrength } from "@plane/utils";
-// components
-import { PageHead } from "@/components/core/page-title";
-import { ProfileSettingContentHeader } from "@/components/profile/profile-setting-content-header";
-// helpers
-import { authErrorHandler } from "@/helpers/authentication.helper";
-import type { EAuthenticationErrorCodes } from "@/helpers/authentication.helper";
-// hooks
-import { useUser } from "@/hooks/store/user";
-// services
-import { AuthService } from "@/services/auth.service";
-
-export interface FormValues {
-  old_password: string;
-  new_password: string;
-  confirm_password: string;
-}
-
-const defaultValues: FormValues = {
-  old_password: "",
-  new_password: "",
-  confirm_password: "",
-};
-
-const authService = new AuthService();
-
-const defaultShowPassword = {
-  oldPassword: false,
-  password: false,
-  confirmPassword: false,
-};
-
-function SecurityPage() {
-  // store
-  const { data: currentUser, changePassword } = useUser();
-  // states
-  const [showPassword, setShowPassword] = useState(defaultShowPassword);
-  const [isPasswordInputFocused, setIsPasswordInputFocused] = useState(false);
-  const [isRetryPasswordInputFocused, setIsRetryPasswordInputFocused] = useState(false);
-
-  // use form
-  const {
-    control,
-    handleSubmit,
-    watch,
-    formState: { errors, isSubmitting },
-    reset,
-  } = useForm<FormValues>({ defaultValues });
-  // derived values
-  const oldPassword = watch("old_password");
-  const password = watch("new_password");
-  const confirmPassword = watch("confirm_password");
-  const oldPasswordRequired = !currentUser?.is_password_autoset;
-  // i18n
-  const { t } = useTranslation();
-
-  const isNewPasswordSameAsOldPassword = oldPassword !== "" && password !== "" && password === oldPassword;
-
-  const handleShowPassword = (key: keyof typeof showPassword) =>
-    setShowPassword((prev) => ({ ...prev, [key]: !prev[key] }));
-
-  const handleChangePassword = async (formData: FormValues) => {
-    const { old_password, new_password } = formData;
-    try {
-      const csrfToken = await authService.requestCSRFToken().then((data) => data?.csrf_token);
-      if (!csrfToken) throw new Error("csrf token not found");
-
-      await changePassword(csrfToken, {
-        ...(oldPasswordRequired && { old_password }),
-        new_password,
-      });
-
-      reset(defaultValues);
-      setShowPassword(defaultShowPassword);
-      setToast({
-        type: TOAST_TYPE.SUCCESS,
-        title: t("auth.common.password.toast.change_password.success.title"),
-        message: t("auth.common.password.toast.change_password.success.message"),
-      });
-    } catch (error: unknown) {
-      let errorInfo = undefined;
-      if (error instanceof Error) {
-        const err = error as Error & { error_code?: string };
-        const code = err.error_code?.toString();
-        errorInfo = code ? authErrorHandler(code as EAuthenticationErrorCodes) : undefined;
-      }
-
-      setToast({
-        type: TOAST_TYPE.ERROR,
-        title: errorInfo?.title ?? t("auth.common.password.toast.error.title"),
-        message:
-          typeof errorInfo?.message === "string" ? errorInfo.message : t("auth.common.password.toast.error.message"),
-      });
-    }
-  };
-
-  const isButtonDisabled =
-    getPasswordStrength(password) != E_PASSWORD_STRENGTH.STRENGTH_VALID ||
-    (oldPasswordRequired && oldPassword.trim() === "") ||
-    password.trim() === "" ||
-    confirmPassword.trim() === "" ||
-    password !== confirmPassword ||
-    password === oldPassword;
-
-  const passwordSupport = password.length > 0 &&
-    getPasswordStrength(password) != E_PASSWORD_STRENGTH.STRENGTH_VALID && (
-      <PasswordStrengthIndicator password={password} isFocused={isPasswordInputFocused} />
-    );
-
-  const renderPasswordMatchError = !isRetryPasswordInputFocused || confirmPassword.length >= password.length;
-
-  return (
-    <>
-      <PageHead title="Profile - Security" />
-      <ProfileSettingContentHeader title={t("auth.common.password.change_password.label.default")} />
-      <form onSubmit={handleSubmit(handleChangePassword)} className="flex flex-col gap-8 w-full mt-8">
-        <div className="flex flex-col gap-10 w-full">
-          {oldPasswordRequired && (
-            <div className="space-y-1">
-              <h4 className="text-sm">{t("auth.common.password.current_password.label")}</h4>
-              <div className="relative flex items-center rounded-md">
-                <Controller
-                  control={control}
-                  name="old_password"
-                  rules={{
-                    required: t("common.errors.required"),
-                  }}
-                  render={({ field: { value, onChange } }) => (
-                    <Input
-                      id="old_password"
-                      type={showPassword?.oldPassword ? "text" : "password"}
-                      value={value}
-                      onChange={onChange}
-                      placeholder={t("old_password")}
-                      className="w-full"
-                      hasError={Boolean(errors.old_password)}
-                    />
-                  )}
-                />
-                {showPassword?.oldPassword ? (
-                  <EyeOff
-                    className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
-                    onClick={() => handleShowPassword("oldPassword")}
-                  />
-                ) : (
-                  <Eye
-                    className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
-                    onClick={() => handleShowPassword("oldPassword")}
-                  />
-                )}
-              </div>
-              {errors.old_password && <span className="text-xs text-red-500">{errors.old_password.message}</span>}
-            </div>
-          )}
-          <div className="space-y-1">
-            <h4 className="text-sm">{t("auth.common.password.new_password.label")}</h4>
-            <div className="relative flex items-center rounded-md">
-              <Controller
-                control={control}
-                name="new_password"
-                rules={{
-                  required: t("common.errors.required"),
-                }}
-                render={({ field: { value, onChange } }) => (
-                  <Input
-                    id="new_password"
-                    type={showPassword?.password ? "text" : "password"}
-                    value={value}
-                    placeholder={t("auth.common.password.new_password.placeholder")}
-                    onChange={onChange}
-                    className="w-full"
-                    hasError={Boolean(errors.new_password)}
-                    onFocus={() => setIsPasswordInputFocused(true)}
-                    onBlur={() => setIsPasswordInputFocused(false)}
-                  />
-                )}
-              />
-              {showPassword?.password ? (
-                <EyeOff
-                  className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
-                  onClick={() => handleShowPassword("password")}
-                />
-              ) : (
-                <Eye
-                  className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
-                  onClick={() => handleShowPassword("password")}
-                />
-              )}
-            </div>
-            {passwordSupport}
-            {isNewPasswordSameAsOldPassword && !isPasswordInputFocused && (
-              <span className="text-xs text-red-500">{t("new_password_must_be_different_from_old_password")}</span>
-            )}
-          </div>
-          <div className="space-y-1">
-            <h4 className="text-sm">{t("auth.common.password.confirm_password.label")}</h4>
-            <div className="relative flex items-center rounded-md">
-              <Controller
-                control={control}
-                name="confirm_password"
-                rules={{
-                  required: t("common.errors.required"),
-                }}
-                render={({ field: { value, onChange } }) => (
-                  <Input
-                    id="confirm_password"
-                    type={showPassword?.confirmPassword ? "text" : "password"}
-                    placeholder={t("auth.common.password.confirm_password.placeholder")}
-                    value={value}
-                    onChange={onChange}
-                    className="w-full"
-                    hasError={Boolean(errors.confirm_password)}
-                    onFocus={() => setIsRetryPasswordInputFocused(true)}
-                    onBlur={() => setIsRetryPasswordInputFocused(false)}
-                  />
-                )}
-              />
-              {showPassword?.confirmPassword ? (
-                <EyeOff
-                  className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
-                  onClick={() => handleShowPassword("confirmPassword")}
-                />
-              ) : (
-                <Eye
-                  className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
-                  onClick={() => handleShowPassword("confirmPassword")}
-                />
-              )}
-            </div>
-            {!!confirmPassword && password !== confirmPassword && renderPasswordMatchError && (
-              <span className="text-sm text-red-500">{t("auth.common.password.errors.match")}</span>
-            )}
-          </div>
-        </div>
-
-        <div className="flex items-center justify-between py-2">
-          <Button variant="primary" type="submit" loading={isSubmitting} disabled={isButtonDisabled}>
-            {isSubmitting
-              ? `${t("auth.common.password.change_password.label.submitting")}`
-              : t("auth.common.password.change_password.label.default")}
-          </Button>
-        </div>
-      </form>
-    </>
-  );
-}
-
-export default observer(SecurityPage);
diff --git a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/account/sidebar.tsx b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/account/sidebar.tsx
deleted file mode 100644
index 64234dc11..000000000
--- a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/account/sidebar.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-import { observer } from "mobx-react";
-import { useParams, usePathname } from "next/navigation";
-import { CircleUser, Activity, Bell, CircleUserRound, KeyRound, Settings2, Blocks, Lock } from "lucide-react";
-// plane imports
-import { GROUPED_PROFILE_SETTINGS, PROFILE_SETTINGS_CATEGORIES } from "@plane/constants";
-import { getFileURL } from "@plane/utils";
-// components
-import { SettingsSidebar } from "@/components/settings/sidebar";
-// hooks
-import { useUser } from "@/hooks/store/user";
-
-const ICONS = {
-  profile: CircleUser,
-  security: Lock,
-  activity: Activity,
-  preferences: Settings2,
-  notifications: Bell,
-  "api-tokens": KeyRound,
-  connections: Blocks,
-};
-
-export function ProjectActionIcons({ type, size, className }: { type: string; size?: number; className?: string }) {
-  if (type === undefined) return null;
-  const Icon = ICONS[type as keyof typeof ICONS];
-  if (!Icon) return null;
-  return <Icon size={size} className={className} strokeWidth={2} />;
-}
-
-type TProfileSidebarProps = {
-  isMobile?: boolean;
-};
-
-export const ProfileSidebar = observer(function ProfileSidebar(props: TProfileSidebarProps) {
-  const { isMobile = false } = props;
-  // router
-  const pathname = usePathname();
-  const { workspaceSlug } = useParams();
-  // store hooks
-  const { data: currentUser } = useUser();
-
-  return (
-    <SettingsSidebar
-      isMobile={isMobile}
-      categories={PROFILE_SETTINGS_CATEGORIES}
-      groupedSettings={GROUPED_PROFILE_SETTINGS}
-      workspaceSlug={workspaceSlug?.toString() ?? ""}
-      isActive={(data: { href: string }) => pathname === `/${workspaceSlug}${data.href}/`}
-      customHeader={
-        <div className="flex items-center gap-2">
-          <div className="flex-shrink-0">
-            {!currentUser?.avatar_url || currentUser?.avatar_url === "" ? (
-              <div className="h-8 w-8 rounded-full">
-                <CircleUserRound className="h-full w-full text-custom-text-200" />
-              </div>
-            ) : (
-              <div className="relative h-8 w-8 overflow-hidden">
-                <img
-                  src={getFileURL(currentUser?.avatar_url)}
-                  className="absolute left-0 top-0 h-full w-full rounded-lg object-cover"
-                  alt={currentUser?.display_name}
-                />
-              </div>
-            )}
-          </div>
-          <div className="w-full overflow-hidden">
-            <div className="text-base font-medium text-custom-text-200 truncate">{currentUser?.display_name}</div>
-            <div className="text-sm text-custom-text-300 truncate">{currentUser?.email}</div>
-          </div>
-        </div>
-      }
-      actionIcons={ProjectActionIcons}
-      shouldRender
-    />
-  );
-});
diff --git a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/automations/header.tsx b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/automations/header.tsx
new file mode 100644
index 000000000..df9ae6e9e
--- /dev/null
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/automations/header.tsx
@@ -0,0 +1,42 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// plane imports
+import { PROJECT_SETTINGS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { Breadcrumbs } from "@plane/ui";
+// components
+import { BreadcrumbLink } from "@/components/common/breadcrumb-link";
+import { SettingsPageHeader } from "@/components/settings/page-header";
+import { PROJECT_SETTINGS_ICONS } from "@/components/settings/project/sidebar/item-icon";
+
+export const AutomationsProjectSettingsHeader = observer(function AutomationsProjectSettingsHeader() {
+  // translation
+  const { t } = useTranslation();
+  // derived values
+  const settingsDetails = PROJECT_SETTINGS.automations;
+  const Icon = PROJECT_SETTINGS_ICONS.automations;
+
+  return (
+    <SettingsPageHeader
+      leftItem={
+        <div className="flex items-center gap-2">
+          <Breadcrumbs>
+            <Breadcrumbs.Item
+              component={
+                <BreadcrumbLink
+                  label={t(settingsDetails.i18n_label)}
+                  icon={<Icon className="size-4 text-tertiary" />}
+                />
+              }
+            />
+          </Breadcrumbs>
+        </div>
+      }
+    />
+  );
+});
diff --git a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/automations/layout.tsx b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/automations/layout.tsx
index cd84d7c2f..a4d766c53 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/automations/layout.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/automations/layout.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import { Outlet } from "react-router";
 // plane web imports
diff --git a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/automations/page.tsx b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/automations/page.tsx
index 360775755..b591e91b1 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/automations/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/automations/page.tsx
@@ -1,21 +1,28 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
+// plane imports
 import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { IProject } from "@plane/types";
-// ui
-// components
 import { NotAuthorizedView } from "@/components/auth-screens/not-authorized-view";
 import { AutoArchiveAutomation, AutoCloseAutomation } from "@/components/automation";
 import { PageHead } from "@/components/core/page-title";
-// hooks
 import { SettingsContentWrapper } from "@/components/settings/content-wrapper";
 import { SettingsHeading } from "@/components/settings/heading";
+// hooks
 import { useProject } from "@/hooks/store/use-project";
 import { useUserPermissions } from "@/hooks/store/user";
 // plane web imports
 import { CustomAutomationsRoot } from "@/plane-web/components/automations/root";
+// local imports
 import type { Route } from "./+types/page";
+import { AutomationsProjectSettingsHeader } from "./header";
 
 function AutomationSettingsPage({ params }: Route.ComponentProps) {
   // router
@@ -51,15 +58,17 @@ function AutomationSettingsPage({ params }: Route.ComponentProps) {
   }
 
   return (
-    <SettingsContentWrapper size="lg">
+    <SettingsContentWrapper header={<AutomationsProjectSettingsHeader />} hugging>
       <PageHead title={pageTitle} />
       <section className={`w-full ${canPerformProjectAdminActions ? "" : "opacity-60"}`}>
         <SettingsHeading
           title={t("project_settings.automations.heading")}
           description={t("project_settings.automations.description")}
         />
-        <AutoArchiveAutomation handleChange={handleChange} />
-        <AutoCloseAutomation handleChange={handleChange} />
+        <div className="mt-6">
+          <AutoArchiveAutomation handleChange={handleChange} />
+          <AutoCloseAutomation handleChange={handleChange} />
+        </div>
       </section>
       <CustomAutomationsRoot projectId={projectId} workspaceSlug={workspaceSlug} />
     </SettingsContentWrapper>
diff --git a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/estimates/header.tsx b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/estimates/header.tsx
new file mode 100644
index 000000000..447f925a0
--- /dev/null
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/estimates/header.tsx
@@ -0,0 +1,42 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// plane imports
+import { PROJECT_SETTINGS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { Breadcrumbs } from "@plane/ui";
+// components
+import { BreadcrumbLink } from "@/components/common/breadcrumb-link";
+import { SettingsPageHeader } from "@/components/settings/page-header";
+import { PROJECT_SETTINGS_ICONS } from "@/components/settings/project/sidebar/item-icon";
+
+export const EstimatesProjectSettingsHeader = observer(function EstimatesProjectSettingsHeader() {
+  // translation
+  const { t } = useTranslation();
+  // derived values
+  const settingsDetails = PROJECT_SETTINGS.estimates;
+  const Icon = PROJECT_SETTINGS_ICONS.estimates;
+
+  return (
+    <SettingsPageHeader
+      leftItem={
+        <div className="flex items-center gap-2">
+          <Breadcrumbs>
+            <Breadcrumbs.Item
+              component={
+                <BreadcrumbLink
+                  label={t(settingsDetails.i18n_label)}
+                  icon={<Icon className="size-4 text-tertiary" />}
+                />
+              }
+            />
+          </Breadcrumbs>
+        </div>
+      }
+    />
+  );
+});
diff --git a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/estimates/page.tsx b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/estimates/page.tsx
index 2d446ae7c..cfa1e9423 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/estimates/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/estimates/page.tsx
@@ -1,14 +1,22 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 // components
 import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { NotAuthorizedView } from "@/components/auth-screens/not-authorized-view";
 import { PageHead } from "@/components/core/page-title";
 import { EstimateRoot } from "@/components/estimates";
-// hooks
 import { SettingsContentWrapper } from "@/components/settings/content-wrapper";
+// hooks
 import { useProject } from "@/hooks/store/use-project";
 import { useUserPermissions } from "@/hooks/store/user";
+// local imports
 import type { Route } from "./+types/page";
+import { EstimatesProjectSettingsHeader } from "./header";
 
 function EstimatesSettingsPage({ params }: Route.ComponentProps) {
   const { workspaceSlug, projectId } = params;
@@ -25,7 +33,7 @@ function EstimatesSettingsPage({ params }: Route.ComponentProps) {
   }
 
   return (
-    <SettingsContentWrapper>
+    <SettingsContentWrapper header={<EstimatesProjectSettingsHeader />}>
       <PageHead title={pageTitle} />
       <div className={`w-full ${canPerformProjectAdminActions ? "" : "pointer-events-none opacity-60"}`}>
         <EstimateRoot workspaceSlug={workspaceSlug} projectId={projectId} isAdmin={canPerformProjectAdminActions} />
diff --git a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/features/cycles/header.tsx b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/features/cycles/header.tsx
new file mode 100644
index 000000000..c2fa9dee5
--- /dev/null
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/features/cycles/header.tsx
@@ -0,0 +1,42 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// plane imports
+import { PROJECT_SETTINGS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { Breadcrumbs } from "@plane/ui";
+// components
+import { BreadcrumbLink } from "@/components/common/breadcrumb-link";
+import { SettingsPageHeader } from "@/components/settings/page-header";
+import { PROJECT_SETTINGS_ICONS } from "@/components/settings/project/sidebar/item-icon";
+
+export const FeaturesCyclesProjectSettingsHeader = observer(function FeaturesCyclesProjectSettingsHeader() {
+  // translation
+  const { t } = useTranslation();
+  // derived values
+  const settingsDetails = PROJECT_SETTINGS.features_cycles;
+  const Icon = PROJECT_SETTINGS_ICONS.features_cycles;
+
+  return (
+    <SettingsPageHeader
+      leftItem={
+        <div className="flex items-center gap-2">
+          <Breadcrumbs>
+            <Breadcrumbs.Item
+              component={
+                <BreadcrumbLink
+                  label={t(settingsDetails.i18n_label)}
+                  icon={<Icon className="size-4 text-tertiary" />}
+                />
+              }
+            />
+          </Breadcrumbs>
+        </div>
+      }
+    />
+  );
+});
diff --git a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/features/cycles/page.tsx b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/features/cycles/page.tsx
new file mode 100644
index 000000000..b86a1b294
--- /dev/null
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/features/cycles/page.tsx
@@ -0,0 +1,64 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// plane imports
+import { useTranslation } from "@plane/i18n";
+// components
+import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import { NotAuthorizedView } from "@/components/auth-screens/not-authorized-view";
+import { PageHead } from "@/components/core/page-title";
+import { ProjectSettingsFeatureControlItem } from "@/components/settings/project/content/feature-control-item";
+import { SettingsContentWrapper } from "@/components/settings/content-wrapper";
+// hooks
+import { useProject } from "@/hooks/store/use-project";
+import { useUserPermissions } from "@/hooks/store/user";
+// local imports
+import type { Route } from "./+types/page";
+import { FeaturesCyclesProjectSettingsHeader } from "./header";
+import { SettingsHeading } from "@/components/settings/heading";
+
+function FeaturesCyclesSettingsPage({ params }: Route.ComponentProps) {
+  const { workspaceSlug, projectId } = params;
+  // store hooks
+  const { workspaceUserInfo, allowPermissions } = useUserPermissions();
+  const { currentProjectDetails } = useProject();
+  // translation
+  const { t } = useTranslation();
+  // derived values
+  const pageTitle = currentProjectDetails?.name
+    ? `${currentProjectDetails?.name} settings - ${t("project_settings.features.cycles.short_title")}`
+    : undefined;
+  const canPerformProjectAdminActions = allowPermissions([EUserPermissions.ADMIN], EUserPermissionsLevel.PROJECT);
+
+  if (workspaceUserInfo && !canPerformProjectAdminActions) {
+    return <NotAuthorizedView section="settings" isProjectView className="h-auto" />;
+  }
+
+  return (
+    <SettingsContentWrapper header={<FeaturesCyclesProjectSettingsHeader />}>
+      <PageHead title={pageTitle} />
+      <section className="w-full">
+        <SettingsHeading
+          title={t("project_settings.features.cycles.title")}
+          description={t("project_settings.features.cycles.description")}
+        />
+        <div className="mt-7">
+          <ProjectSettingsFeatureControlItem
+            title={t("project_settings.features.cycles.toggle_title")}
+            description={t("project_settings.features.cycles.toggle_description")}
+            featureProperty="cycle_view"
+            projectId={projectId}
+            value={!!currentProjectDetails?.cycle_view}
+            workspaceSlug={workspaceSlug}
+          />
+        </div>
+      </section>
+    </SettingsContentWrapper>
+  );
+}
+
+export default observer(FeaturesCyclesSettingsPage);
diff --git a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/features/intake/header.tsx b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/features/intake/header.tsx
new file mode 100644
index 000000000..5f81d40af
--- /dev/null
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/features/intake/header.tsx
@@ -0,0 +1,42 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// plane imports
+import { PROJECT_SETTINGS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { Breadcrumbs } from "@plane/ui";
+// components
+import { BreadcrumbLink } from "@/components/common/breadcrumb-link";
+import { SettingsPageHeader } from "@/components/settings/page-header";
+import { PROJECT_SETTINGS_ICONS } from "@/components/settings/project/sidebar/item-icon";
+
+export const FeaturesIntakeProjectSettingsHeader = observer(function FeaturesIntakeProjectSettingsHeader() {
+  // translation
+  const { t } = useTranslation();
+  // derived values
+  const settingsDetails = PROJECT_SETTINGS.features_intake;
+  const Icon = PROJECT_SETTINGS_ICONS.features_intake;
+
+  return (
+    <SettingsPageHeader
+      leftItem={
+        <div className="flex items-center gap-2">
+          <Breadcrumbs>
+            <Breadcrumbs.Item
+              component={
+                <BreadcrumbLink
+                  label={t(settingsDetails.i18n_label)}
+                  icon={<Icon className="size-4 text-tertiary" />}
+                />
+              }
+            />
+          </Breadcrumbs>
+        </div>
+      }
+    />
+  );
+});
diff --git a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/features/intake/page.tsx b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/features/intake/page.tsx
new file mode 100644
index 000000000..3349a79d3
--- /dev/null
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/features/intake/page.tsx
@@ -0,0 +1,64 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// plane imports
+import { useTranslation } from "@plane/i18n";
+// components
+import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import { NotAuthorizedView } from "@/components/auth-screens/not-authorized-view";
+import { PageHead } from "@/components/core/page-title";
+import { SettingsContentWrapper } from "@/components/settings/content-wrapper";
+import { SettingsHeading } from "@/components/settings/heading";
+import { ProjectSettingsFeatureControlItem } from "@/components/settings/project/content/feature-control-item";
+// hooks
+import { useProject } from "@/hooks/store/use-project";
+import { useUserPermissions } from "@/hooks/store/user";
+// local imports
+import type { Route } from "./+types/page";
+import { FeaturesIntakeProjectSettingsHeader } from "./header";
+
+function FeaturesIntakeSettingsPage({ params }: Route.ComponentProps) {
+  const { workspaceSlug, projectId } = params;
+  // store hooks
+  const { workspaceUserInfo, allowPermissions } = useUserPermissions();
+  const { currentProjectDetails } = useProject();
+  // translation
+  const { t } = useTranslation();
+  // derived values
+  const pageTitle = currentProjectDetails?.name
+    ? `${currentProjectDetails?.name} settings - ${t("project_settings.features.intake.short_title")}`
+    : undefined;
+  const canPerformProjectAdminActions = allowPermissions([EUserPermissions.ADMIN], EUserPermissionsLevel.PROJECT);
+
+  if (workspaceUserInfo && !canPerformProjectAdminActions) {
+    return <NotAuthorizedView section="settings" isProjectView className="h-auto" />;
+  }
+
+  return (
+    <SettingsContentWrapper header={<FeaturesIntakeProjectSettingsHeader />}>
+      <PageHead title={pageTitle} />
+      <section className="w-full">
+        <SettingsHeading
+          title={t("project_settings.features.intake.title")}
+          description={t("project_settings.features.intake.description")}
+        />
+        <div className="mt-7">
+          <ProjectSettingsFeatureControlItem
+            title={t("project_settings.features.intake.toggle_title")}
+            description={t("project_settings.features.intake.toggle_description")}
+            featureProperty="inbox_view"
+            projectId={projectId}
+            value={!!currentProjectDetails?.inbox_view}
+            workspaceSlug={workspaceSlug}
+          />
+        </div>
+      </section>
+    </SettingsContentWrapper>
+  );
+}
+
+export default observer(FeaturesIntakeSettingsPage);
diff --git a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/features/modules/header.tsx b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/features/modules/header.tsx
new file mode 100644
index 000000000..baf32b2b9
--- /dev/null
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/features/modules/header.tsx
@@ -0,0 +1,42 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// plane imports
+import { PROJECT_SETTINGS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { Breadcrumbs } from "@plane/ui";
+// components
+import { BreadcrumbLink } from "@/components/common/breadcrumb-link";
+import { SettingsPageHeader } from "@/components/settings/page-header";
+import { PROJECT_SETTINGS_ICONS } from "@/components/settings/project/sidebar/item-icon";
+
+export const FeaturesModulesProjectSettingsHeader = observer(function FeaturesModulesProjectSettingsHeader() {
+  // translation
+  const { t } = useTranslation();
+  // derived values
+  const settingsDetails = PROJECT_SETTINGS.features_modules;
+  const Icon = PROJECT_SETTINGS_ICONS.features_modules;
+
+  return (
+    <SettingsPageHeader
+      leftItem={
+        <div className="flex items-center gap-2">
+          <Breadcrumbs>
+            <Breadcrumbs.Item
+              component={
+                <BreadcrumbLink
+                  label={t(settingsDetails.i18n_label)}
+                  icon={<Icon className="size-4 text-tertiary" />}
+                />
+              }
+            />
+          </Breadcrumbs>
+        </div>
+      }
+    />
+  );
+});
diff --git a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/features/modules/page.tsx b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/features/modules/page.tsx
new file mode 100644
index 000000000..1253f0d65
--- /dev/null
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/features/modules/page.tsx
@@ -0,0 +1,64 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// plane imports
+import { useTranslation } from "@plane/i18n";
+// components
+import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import { NotAuthorizedView } from "@/components/auth-screens/not-authorized-view";
+import { PageHead } from "@/components/core/page-title";
+import { SettingsContentWrapper } from "@/components/settings/content-wrapper";
+import { SettingsHeading } from "@/components/settings/heading";
+import { ProjectSettingsFeatureControlItem } from "@/components/settings/project/content/feature-control-item";
+// hooks
+import { useProject } from "@/hooks/store/use-project";
+import { useUserPermissions } from "@/hooks/store/user";
+// local imports
+import type { Route } from "./+types/page";
+import { FeaturesModulesProjectSettingsHeader } from "./header";
+
+function FeaturesModulesSettingsPage({ params }: Route.ComponentProps) {
+  const { workspaceSlug, projectId } = params;
+  // store hooks
+  const { workspaceUserInfo, allowPermissions } = useUserPermissions();
+  const { currentProjectDetails } = useProject();
+  // translation
+  const { t } = useTranslation();
+  // derived values
+  const pageTitle = currentProjectDetails?.name
+    ? `${currentProjectDetails?.name} settings - ${t("project_settings.features.modules.short_title")}`
+    : undefined;
+  const canPerformProjectAdminActions = allowPermissions([EUserPermissions.ADMIN], EUserPermissionsLevel.PROJECT);
+
+  if (workspaceUserInfo && !canPerformProjectAdminActions) {
+    return <NotAuthorizedView section="settings" isProjectView className="h-auto" />;
+  }
+
+  return (
+    <SettingsContentWrapper header={<FeaturesModulesProjectSettingsHeader />}>
+      <PageHead title={pageTitle} />
+      <section className="w-full">
+        <SettingsHeading
+          title={t("project_settings.features.modules.title")}
+          description={t("project_settings.features.modules.description")}
+        />
+        <div className="mt-7">
+          <ProjectSettingsFeatureControlItem
+            title={t("project_settings.features.modules.toggle_title")}
+            description={t("project_settings.features.modules.toggle_description")}
+            featureProperty="module_view"
+            projectId={projectId}
+            value={!!currentProjectDetails?.module_view}
+            workspaceSlug={workspaceSlug}
+          />
+        </div>
+      </section>
+    </SettingsContentWrapper>
+  );
+}
+
+export default observer(FeaturesModulesSettingsPage);
diff --git a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/features/page.tsx b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/features/page.tsx
deleted file mode 100644
index 6db9c4bd0..000000000
--- a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/features/page.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import { observer } from "mobx-react";
-// components
-import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
-import { NotAuthorizedView } from "@/components/auth-screens/not-authorized-view";
-import { PageHead } from "@/components/core/page-title";
-import { SettingsContentWrapper } from "@/components/settings/content-wrapper";
-// hooks
-import { useProject } from "@/hooks/store/use-project";
-import { useUserPermissions } from "@/hooks/store/user";
-import { ProjectFeaturesList } from "@/plane-web/components/projects/settings/features-list";
-import type { Route } from "./+types/page";
-
-function FeaturesSettingsPage({ params }: Route.ComponentProps) {
-  const { workspaceSlug, projectId } = params;
-  // store
-  const { workspaceUserInfo, allowPermissions } = useUserPermissions();
-
-  const { currentProjectDetails } = useProject();
-  // derived values
-  const pageTitle = currentProjectDetails?.name ? `${currentProjectDetails?.name} - Features` : undefined;
-  const canPerformProjectAdminActions = allowPermissions([EUserPermissions.ADMIN], EUserPermissionsLevel.PROJECT);
-
-  if (workspaceUserInfo && !canPerformProjectAdminActions) {
-    return <NotAuthorizedView section="settings" isProjectView className="h-auto" />;
-  }
-
-  return (
-    <SettingsContentWrapper>
-      <PageHead title={pageTitle} />
-      <section className={`w-full ${canPerformProjectAdminActions ? "" : "opacity-60"}`}>
-        <ProjectFeaturesList
-          workspaceSlug={workspaceSlug}
-          projectId={projectId}
-          isAdmin={canPerformProjectAdminActions}
-        />
-      </section>
-    </SettingsContentWrapper>
-  );
-}
-
-export default observer(FeaturesSettingsPage);
diff --git a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/features/pages/header.tsx b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/features/pages/header.tsx
new file mode 100644
index 000000000..fa7a40e28
--- /dev/null
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/features/pages/header.tsx
@@ -0,0 +1,42 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// plane imports
+import { PROJECT_SETTINGS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { Breadcrumbs } from "@plane/ui";
+// components
+import { BreadcrumbLink } from "@/components/common/breadcrumb-link";
+import { SettingsPageHeader } from "@/components/settings/page-header";
+import { PROJECT_SETTINGS_ICONS } from "@/components/settings/project/sidebar/item-icon";
+
+export const FeaturesPagesProjectSettingsHeader = observer(function FeaturesPagesProjectSettingsHeader() {
+  // translation
+  const { t } = useTranslation();
+  // derived values
+  const settingsDetails = PROJECT_SETTINGS.features_pages;
+  const Icon = PROJECT_SETTINGS_ICONS.features_pages;
+
+  return (
+    <SettingsPageHeader
+      leftItem={
+        <div className="flex items-center gap-2">
+          <Breadcrumbs>
+            <Breadcrumbs.Item
+              component={
+                <BreadcrumbLink
+                  label={t(settingsDetails.i18n_label)}
+                  icon={<Icon className="size-4 text-tertiary" />}
+                />
+              }
+            />
+          </Breadcrumbs>
+        </div>
+      }
+    />
+  );
+});
diff --git a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/features/pages/page.tsx b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/features/pages/page.tsx
new file mode 100644
index 000000000..2b018e56d
--- /dev/null
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/features/pages/page.tsx
@@ -0,0 +1,64 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// plane imports
+import { useTranslation } from "@plane/i18n";
+// components
+import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import { NotAuthorizedView } from "@/components/auth-screens/not-authorized-view";
+import { PageHead } from "@/components/core/page-title";
+import { SettingsContentWrapper } from "@/components/settings/content-wrapper";
+import { SettingsHeading } from "@/components/settings/heading";
+import { ProjectSettingsFeatureControlItem } from "@/components/settings/project/content/feature-control-item";
+// hooks
+import { useProject } from "@/hooks/store/use-project";
+import { useUserPermissions } from "@/hooks/store/user";
+// local imports
+import type { Route } from "./+types/page";
+import { FeaturesPagesProjectSettingsHeader } from "./header";
+
+function FeaturesPagesSettingsPage({ params }: Route.ComponentProps) {
+  const { workspaceSlug, projectId } = params;
+  // store hooks
+  const { workspaceUserInfo, allowPermissions } = useUserPermissions();
+  const { currentProjectDetails } = useProject();
+  // translation
+  const { t } = useTranslation();
+  // derived values
+  const pageTitle = currentProjectDetails?.name
+    ? `${currentProjectDetails?.name} settings - ${t("project_settings.features.pages.short_title")}`
+    : undefined;
+  const canPerformProjectAdminActions = allowPermissions([EUserPermissions.ADMIN], EUserPermissionsLevel.PROJECT);
+
+  if (workspaceUserInfo && !canPerformProjectAdminActions) {
+    return <NotAuthorizedView section="settings" isProjectView className="h-auto" />;
+  }
+
+  return (
+    <SettingsContentWrapper header={<FeaturesPagesProjectSettingsHeader />}>
+      <PageHead title={pageTitle} />
+      <section className="w-full">
+        <SettingsHeading
+          title={t("project_settings.features.pages.title")}
+          description={t("project_settings.features.pages.description")}
+        />
+        <div className="mt-7">
+          <ProjectSettingsFeatureControlItem
+            title={t("project_settings.features.pages.toggle_title")}
+            description={t("project_settings.features.pages.toggle_description")}
+            featureProperty="page_view"
+            projectId={projectId}
+            value={!!currentProjectDetails?.page_view}
+            workspaceSlug={workspaceSlug}
+          />
+        </div>
+      </section>
+    </SettingsContentWrapper>
+  );
+}
+
+export default observer(FeaturesPagesSettingsPage);
diff --git a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/features/views/header.tsx b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/features/views/header.tsx
new file mode 100644
index 000000000..c8429d90c
--- /dev/null
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/features/views/header.tsx
@@ -0,0 +1,42 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// plane imports
+import { PROJECT_SETTINGS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { Breadcrumbs } from "@plane/ui";
+// components
+import { BreadcrumbLink } from "@/components/common/breadcrumb-link";
+import { SettingsPageHeader } from "@/components/settings/page-header";
+import { PROJECT_SETTINGS_ICONS } from "@/components/settings/project/sidebar/item-icon";
+
+export const FeaturesViewsProjectSettingsHeader = observer(function FeaturesViewsProjectSettingsHeader() {
+  // translation
+  const { t } = useTranslation();
+  // derived values
+  const settingsDetails = PROJECT_SETTINGS.features_views;
+  const Icon = PROJECT_SETTINGS_ICONS.features_views;
+
+  return (
+    <SettingsPageHeader
+      leftItem={
+        <div className="flex items-center gap-2">
+          <Breadcrumbs>
+            <Breadcrumbs.Item
+              component={
+                <BreadcrumbLink
+                  label={t(settingsDetails.i18n_label)}
+                  icon={<Icon className="size-4 text-tertiary" />}
+                />
+              }
+            />
+          </Breadcrumbs>
+        </div>
+      }
+    />
+  );
+});
diff --git a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/features/views/page.tsx b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/features/views/page.tsx
new file mode 100644
index 000000000..594028f8f
--- /dev/null
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/features/views/page.tsx
@@ -0,0 +1,64 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// plane imports
+import { useTranslation } from "@plane/i18n";
+// components
+import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import { NotAuthorizedView } from "@/components/auth-screens/not-authorized-view";
+import { PageHead } from "@/components/core/page-title";
+import { SettingsContentWrapper } from "@/components/settings/content-wrapper";
+import { SettingsHeading } from "@/components/settings/heading";
+import { ProjectSettingsFeatureControlItem } from "@/components/settings/project/content/feature-control-item";
+// hooks
+import { useProject } from "@/hooks/store/use-project";
+import { useUserPermissions } from "@/hooks/store/user";
+// local imports
+import type { Route } from "./+types/page";
+import { FeaturesViewsProjectSettingsHeader } from "./header";
+
+function FeaturesViewsSettingsPage({ params }: Route.ComponentProps) {
+  const { workspaceSlug, projectId } = params;
+  // store hooks
+  const { workspaceUserInfo, allowPermissions } = useUserPermissions();
+  const { currentProjectDetails } = useProject();
+  // translation
+  const { t } = useTranslation();
+  // derived values
+  const pageTitle = currentProjectDetails?.name
+    ? `${currentProjectDetails?.name} settings - ${t("project_settings.features.views.short_title")}`
+    : undefined;
+  const canPerformProjectAdminActions = allowPermissions([EUserPermissions.ADMIN], EUserPermissionsLevel.PROJECT);
+
+  if (workspaceUserInfo && !canPerformProjectAdminActions) {
+    return <NotAuthorizedView section="settings" isProjectView className="h-auto" />;
+  }
+
+  return (
+    <SettingsContentWrapper header={<FeaturesViewsProjectSettingsHeader />}>
+      <PageHead title={pageTitle} />
+      <section className="w-full">
+        <SettingsHeading
+          title={t("project_settings.features.views.title")}
+          description={t("project_settings.features.views.description")}
+        />
+        <div className="mt-7">
+          <ProjectSettingsFeatureControlItem
+            title={t("project_settings.features.views.toggle_title")}
+            description={t("project_settings.features.views.toggle_description")}
+            featureProperty="issue_views_view"
+            projectId={projectId}
+            value={!!currentProjectDetails?.issue_views_view}
+            workspaceSlug={workspaceSlug}
+          />
+        </div>
+      </section>
+    </SettingsContentWrapper>
+  );
+}
+
+export default observer(FeaturesViewsSettingsPage);
diff --git a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/header.tsx b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/header.tsx
new file mode 100644
index 000000000..95d472051
--- /dev/null
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/header.tsx
@@ -0,0 +1,42 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// plane imports
+import { PROJECT_SETTINGS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { Breadcrumbs } from "@plane/ui";
+// components
+import { BreadcrumbLink } from "@/components/common/breadcrumb-link";
+import { SettingsPageHeader } from "@/components/settings/page-header";
+import { PROJECT_SETTINGS_ICONS } from "@/components/settings/project/sidebar/item-icon";
+
+export const GeneralProjectSettingsHeader = observer(function GeneralProjectSettingsHeader() {
+  // translation
+  const { t } = useTranslation();
+  // derived values
+  const settingsDetails = PROJECT_SETTINGS.general;
+  const Icon = PROJECT_SETTINGS_ICONS.general;
+
+  return (
+    <SettingsPageHeader
+      leftItem={
+        <div className="flex items-center gap-2">
+          <Breadcrumbs>
+            <Breadcrumbs.Item
+              component={
+                <BreadcrumbLink
+                  label={t(settingsDetails.i18n_label)}
+                  icon={<Icon className="size-4 text-tertiary" />}
+                />
+              }
+            />
+          </Breadcrumbs>
+        </div>
+      }
+    />
+  );
+});
diff --git a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/labels/header.tsx b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/labels/header.tsx
new file mode 100644
index 000000000..b9daaae1e
--- /dev/null
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/labels/header.tsx
@@ -0,0 +1,42 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// plane imports
+import { PROJECT_SETTINGS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { Breadcrumbs } from "@plane/ui";
+// components
+import { BreadcrumbLink } from "@/components/common/breadcrumb-link";
+import { SettingsPageHeader } from "@/components/settings/page-header";
+import { PROJECT_SETTINGS_ICONS } from "@/components/settings/project/sidebar/item-icon";
+
+export const LabelsProjectSettingsHeader = observer(function LabelsProjectSettingsHeader() {
+  // translation
+  const { t } = useTranslation();
+  // derived values
+  const settingsDetails = PROJECT_SETTINGS.labels;
+  const Icon = PROJECT_SETTINGS_ICONS.labels;
+
+  return (
+    <SettingsPageHeader
+      leftItem={
+        <div className="flex items-center gap-2">
+          <Breadcrumbs>
+            <Breadcrumbs.Item
+              component={
+                <BreadcrumbLink
+                  label={t(settingsDetails.i18n_label)}
+                  icon={<Icon className="size-4 text-tertiary" />}
+                />
+              }
+            />
+          </Breadcrumbs>
+        </div>
+      }
+    />
+  );
+});
diff --git a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/labels/page.tsx b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/labels/page.tsx
index 812b58302..870c05fa7 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/labels/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/labels/page.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useEffect, useRef } from "react";
 import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
 import { autoScrollForElements } from "@atlaskit/pragmatic-drag-and-drop-auto-scroll/element";
@@ -7,10 +13,12 @@ import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { NotAuthorizedView } from "@/components/auth-screens/not-authorized-view";
 import { PageHead } from "@/components/core/page-title";
 import { ProjectSettingsLabelList } from "@/components/labels";
-// hooks
 import { SettingsContentWrapper } from "@/components/settings/content-wrapper";
+// hooks
 import { useProject } from "@/hooks/store/use-project";
 import { useUserPermissions } from "@/hooks/store/user";
+// local imports
+import { LabelsProjectSettingsHeader } from "./header";
 
 function LabelsSettingsPage() {
   // store hooks
@@ -45,9 +53,9 @@ function LabelsSettingsPage() {
   }
 
   return (
-    <SettingsContentWrapper>
+    <SettingsContentWrapper header={<LabelsProjectSettingsHeader />}>
       <PageHead title={pageTitle} />
-      <div ref={scrollableContainerRef} className="h-full w-full gap-10">
+      <div ref={scrollableContainerRef} className="size-full">
         <ProjectSettingsLabelList />
       </div>
     </SettingsContentWrapper>
diff --git a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/layout.tsx b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/layout.tsx
index 8e8c09064..6ebe9df3e 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/layout.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/layout.tsx
@@ -1,14 +1,20 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import { usePathname } from "next/navigation";
 import { Outlet } from "react-router";
 // components
 import { getProjectActivePath } from "@/components/settings/helper";
-import { SettingsMobileNav } from "@/components/settings/mobile";
-import { ProjectSettingsSidebar } from "@/components/settings/project/sidebar";
-// plane web imports
-import { ProjectAuthWrapper } from "@/plane-web/layouts/project-wrapper";
+import { SettingsMobileNav } from "@/components/settings/mobile/nav";
+// layouts
+import { ProjectAuthWrapper } from "@/layouts/auth-layout/project-wrapper";
 // types
 import type { Route } from "./+types/layout";
+import { ProjectSettingsSidebarRoot } from "@/components/settings/project/sidebar";
 
 function ProjectDetailSettingsLayout({ params }: Route.ComponentProps) {
   const { workspaceSlug, projectId } = params;
@@ -17,14 +23,19 @@ function ProjectDetailSettingsLayout({ params }: Route.ComponentProps) {
 
   return (
     <>
-      <SettingsMobileNav hamburgerContent={ProjectSettingsSidebar} activePath={getProjectActivePath(pathname) || ""} />
-      <div className="relative flex h-full w-full">
-        <div className="hidden md:block">{projectId && <ProjectSettingsSidebar />}</div>
-        <ProjectAuthWrapper workspaceSlug={workspaceSlug} projectId={projectId}>
-          <div className="w-full h-full overflow-y-scroll md:pt-page-y">
-            <Outlet />
+      <SettingsMobileNav
+        hamburgerContent={(props) => <ProjectSettingsSidebarRoot {...props} projectId={projectId} />}
+        activePath={getProjectActivePath(pathname) || ""}
+      />
+      <div className="inset-y-0 flex h-full w-full flex-row">
+        <div className="relative flex size-full">
+          <div className="hidden h-full shrink-0 md:block">
+            <ProjectSettingsSidebarRoot projectId={projectId} />
           </div>
-        </ProjectAuthWrapper>
+          <ProjectAuthWrapper workspaceSlug={workspaceSlug} projectId={projectId}>
+            <Outlet />
+          </ProjectAuthWrapper>
+        </div>
       </div>
     </>
   );
diff --git a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/members/header.tsx b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/members/header.tsx
new file mode 100644
index 000000000..e8e3c4fe4
--- /dev/null
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/members/header.tsx
@@ -0,0 +1,42 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// plane imports
+import { PROJECT_SETTINGS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { Breadcrumbs } from "@plane/ui";
+// components
+import { BreadcrumbLink } from "@/components/common/breadcrumb-link";
+import { SettingsPageHeader } from "@/components/settings/page-header";
+import { PROJECT_SETTINGS_ICONS } from "@/components/settings/project/sidebar/item-icon";
+
+export const MembersProjectSettingsHeader = observer(function MembersProjectSettingsHeader() {
+  // translation
+  const { t } = useTranslation();
+  // derived values
+  const settingsDetails = PROJECT_SETTINGS.members;
+  const Icon = PROJECT_SETTINGS_ICONS.members;
+
+  return (
+    <SettingsPageHeader
+      leftItem={
+        <div className="flex items-center gap-2">
+          <Breadcrumbs>
+            <Breadcrumbs.Item
+              component={
+                <BreadcrumbLink
+                  label={t(settingsDetails.i18n_label)}
+                  icon={<Icon className="size-4 text-tertiary" />}
+                />
+              }
+            />
+          </Breadcrumbs>
+        </div>
+      }
+    />
+  );
+});
diff --git a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/members/page.tsx b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/members/page.tsx
index 3bdf8e999..61abee5ff 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/members/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/members/page.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 // plane imports
 import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
@@ -5,17 +11,18 @@ import { useTranslation } from "@plane/i18n";
 // components
 import { NotAuthorizedView } from "@/components/auth-screens/not-authorized-view";
 import { PageHead } from "@/components/core/page-title";
-// hooks
 import { ProjectMemberList } from "@/components/project/member-list";
 import { ProjectSettingsMemberDefaults } from "@/components/project/project-settings-member-defaults";
 import { SettingsContentWrapper } from "@/components/settings/content-wrapper";
 import { SettingsHeading } from "@/components/settings/heading";
+// hooks
 import { useProject } from "@/hooks/store/use-project";
 import { useUserPermissions } from "@/hooks/store/user";
 // plane web imports
 import { ProjectTeamspaceList } from "@/plane-web/components/projects/teamspaces/teamspace-list";
-import { getProjectSettingsPageLabelI18nKey } from "@/plane-web/helpers/project-settings";
+// local imports
 import type { Route } from "./+types/page";
+import { MembersProjectSettingsHeader } from "./header";
 
 function MembersSettingsPage({ params }: Route.ComponentProps) {
   // router
@@ -39,9 +46,9 @@ function MembersSettingsPage({ params }: Route.ComponentProps) {
   }
 
   return (
-    <SettingsContentWrapper size="lg">
+    <SettingsContentWrapper header={<MembersProjectSettingsHeader />} hugging>
       <PageHead title={pageTitle} />
-      <SettingsHeading title={t(getProjectSettingsPageLabelI18nKey("members", "common.members"))} />
+      <SettingsHeading title={t("common.members")} />
       <ProjectSettingsMemberDefaults projectId={projectId} workspaceSlug={workspaceSlug} />
       <ProjectTeamspaceList projectId={projectId} workspaceSlug={workspaceSlug} />
       <ProjectMemberList projectId={projectId} workspaceSlug={workspaceSlug} />
diff --git a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/page.tsx b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/page.tsx
index ea0486fa3..39a804660 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/page.tsx
@@ -1,25 +1,26 @@
-import { useState } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 // plane imports
 import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 // components
 import { PageHead } from "@/components/core/page-title";
-import { DeleteProjectModal } from "@/components/project/delete-project-modal";
 import { ProjectDetailsForm } from "@/components/project/form";
 import { ProjectDetailsFormLoader } from "@/components/project/form-loader";
-import { ArchiveRestoreProjectModal } from "@/components/project/settings/archive-project/archive-restore-modal";
-import { ArchiveProjectSelection } from "@/components/project/settings/archive-project/selection";
-import { DeleteProjectSection } from "@/components/project/settings/delete-project-section";
 import { SettingsContentWrapper } from "@/components/settings/content-wrapper";
 // hooks
 import { useProject } from "@/hooks/store/use-project";
 import { useUserPermissions } from "@/hooks/store/user";
+// local imports
 import type { Route } from "./+types/page";
+import { GeneralProjectSettingsHeader } from "./header";
+import { GeneralProjectSettingsControlSection } from "@/components/project/settings/control-section";
 
 function ProjectSettingsPage({ params }: Route.ComponentProps) {
-  // states
-  const [selectProject, setSelectedProject] = useState<string | null>(null);
-  const [archiveProject, setArchiveProject] = useState<boolean>(false);
   // router
   const { workspaceSlug, projectId } = params;
   // store hooks
@@ -31,25 +32,8 @@ function ProjectSettingsPage({ params }: Route.ComponentProps) {
   const pageTitle = currentProjectDetails?.name ? `${currentProjectDetails?.name} - General Settings` : undefined;
 
   return (
-    <SettingsContentWrapper>
+    <SettingsContentWrapper header={<GeneralProjectSettingsHeader />}>
       <PageHead title={pageTitle} />
-      {currentProjectDetails && (
-        <>
-          <ArchiveRestoreProjectModal
-            workspaceSlug={workspaceSlug}
-            projectId={projectId}
-            isOpen={archiveProject}
-            onClose={() => setArchiveProject(false)}
-            archive
-          />
-          <DeleteProjectModal
-            project={currentProjectDetails}
-            isOpen={Boolean(selectProject)}
-            onClose={() => setSelectedProject(null)}
-          />
-        </>
-      )}
-
       <div className={`w-full ${isAdmin ? "" : "opacity-60"}`}>
         {currentProjectDetails ? (
           <ProjectDetailsForm
@@ -61,19 +45,7 @@ function ProjectSettingsPage({ params }: Route.ComponentProps) {
         ) : (
           <ProjectDetailsFormLoader />
         )}
-
-        {isAdmin && currentProjectDetails && (
-          <>
-            <ArchiveProjectSelection
-              projectDetails={currentProjectDetails}
-              handleArchive={() => setArchiveProject(true)}
-            />
-            <DeleteProjectSection
-              projectDetails={currentProjectDetails}
-              handleDelete={() => setSelectedProject(currentProjectDetails.id ?? null)}
-            />
-          </>
-        )}
+        {isAdmin && <GeneralProjectSettingsControlSection projectId={projectId} />}
       </div>
     </SettingsContentWrapper>
   );
diff --git a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/states/header.tsx b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/states/header.tsx
new file mode 100644
index 000000000..957632b25
--- /dev/null
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/states/header.tsx
@@ -0,0 +1,42 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// plane imports
+import { PROJECT_SETTINGS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { Breadcrumbs } from "@plane/ui";
+// components
+import { BreadcrumbLink } from "@/components/common/breadcrumb-link";
+import { SettingsPageHeader } from "@/components/settings/page-header";
+import { PROJECT_SETTINGS_ICONS } from "@/components/settings/project/sidebar/item-icon";
+
+export const StatesProjectSettingsHeader = observer(function StatesProjectSettingsHeader() {
+  // translation
+  const { t } = useTranslation();
+  // derived values
+  const settingsDetails = PROJECT_SETTINGS.states;
+  const Icon = PROJECT_SETTINGS_ICONS.states;
+
+  return (
+    <SettingsPageHeader
+      leftItem={
+        <div className="flex items-center gap-2">
+          <Breadcrumbs>
+            <Breadcrumbs.Item
+              component={
+                <BreadcrumbLink
+                  label={t(settingsDetails.i18n_label)}
+                  icon={<Icon className="size-4 text-tertiary" />}
+                />
+              }
+            />
+          </Breadcrumbs>
+        </div>
+      }
+    />
+  );
+});
diff --git a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/states/page.tsx b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/states/page.tsx
index 31d8ccbc1..9913d521c 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/states/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/states/page.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
@@ -5,12 +11,14 @@ import { useTranslation } from "@plane/i18n";
 import { NotAuthorizedView } from "@/components/auth-screens/not-authorized-view";
 import { PageHead } from "@/components/core/page-title";
 import { ProjectStateRoot } from "@/components/project-states";
-// hook
 import { SettingsContentWrapper } from "@/components/settings/content-wrapper";
 import { SettingsHeading } from "@/components/settings/heading";
+// hook
 import { useProject } from "@/hooks/store/use-project";
 import { useUserPermissions } from "@/hooks/store/user";
+// local imports
 import type { Route } from "./+types/page";
+import { StatesProjectSettingsHeader } from "./header";
 
 function StatesSettingsPage({ params }: Route.ComponentProps) {
   const { workspaceSlug, projectId } = params;
@@ -33,14 +41,16 @@ function StatesSettingsPage({ params }: Route.ComponentProps) {
   }
 
   return (
-    <SettingsContentWrapper>
+    <SettingsContentWrapper header={<StatesProjectSettingsHeader />}>
       <PageHead title={pageTitle} />
       <div className="w-full">
         <SettingsHeading
           title={t("project_settings.states.heading")}
           description={t("project_settings.states.description")}
         />
-        <ProjectStateRoot workspaceSlug={workspaceSlug} projectId={projectId} />
+        <div className="mt-6">
+          <ProjectStateRoot workspaceSlug={workspaceSlug} projectId={projectId} />
+        </div>
       </div>
     </SettingsContentWrapper>
   );
diff --git a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/layout.tsx b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/layout.tsx
index 977d9ebc9..86229fe9c 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/layout.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/layout.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useEffect } from "react";
 import { observer } from "mobx-react";
 import { Outlet } from "react-router";
diff --git a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/page.tsx b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/page.tsx
index 7bd356877..86bd9f85f 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/page.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import Link from "next/link";
 import { useTheme } from "next-themes";
@@ -18,19 +24,18 @@ function ProjectSettingsPage() {
   // derived values
   const resolvedPath = resolvedTheme === "dark" ? ProjectDarkEmptyState : ProjectLightEmptyState;
   return (
-    <div className="flex flex-col gap-4 items-center justify-center h-full max-w-[480px] mx-auto">
+    <div className="mx-auto flex h-full max-w-[480px] flex-col items-center justify-center gap-4">
       <img src={resolvedPath} alt="No projects yet" />
-      <div className="text-lg font-semibold text-custom-text-350">No projects yet</div>
-      <div className="text-sm text-custom-text-350 text-center">
+      <div className="text-16 font-semibold text-tertiary">No projects yet</div>
+      <div className="text-center text-13 text-tertiary">
         Projects act as the foundation for goal-driven work. They let you manage your teams, tasks, and everything you
         need to get things done.
       </div>
       <div className="flex gap-2">
-        <Link href="https://plane.so/" target="_blank" className={cn(getButtonStyling("neutral-primary", "sm"))}>
+        <Link href="https://plane.so/" target="_blank" className={cn(getButtonStyling("secondary", "base"))}>
           Learn more about projects
         </Link>
         <Button
-          size="sm"
           onClick={() => toggleCreateProjectModal(true)}
           data-ph-element={PROJECT_TRACKER_ELEMENTS.EMPTY_STATE_CREATE_PROJECT_BUTTON}
         >
diff --git a/apps/web/app/(all)/[workspaceSlug]/layout.tsx b/apps/web/app/(all)/[workspaceSlug]/layout.tsx
index 0e489644d..293688673 100644
--- a/apps/web/app/(all)/[workspaceSlug]/layout.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/layout.tsx
@@ -1,15 +1,26 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { Outlet } from "react-router";
 import { AuthenticationWrapper } from "@/lib/wrappers/authentication-wrapper";
 import { WorkspaceContentWrapper } from "@/plane-web/components/workspace/content-wrapper";
 import { AppRailVisibilityProvider } from "@/plane-web/hooks/app-rail";
-import { WorkspaceAuthWrapper } from "@/plane-web/layouts/workspace-wrapper";
+import { GlobalModals } from "@/plane-web/components/common/modal/global";
+import { WorkspaceAuthWrapper } from "@/layouts/auth-layout/workspace-wrapper";
+import type { Route } from "./+types/layout";
+
+export default function WorkspaceLayout(props: Route.ComponentProps) {
+  const { workspaceSlug } = props.params;
 
-export default function WorkspaceLayout() {
   return (
     <AuthenticationWrapper>
       <WorkspaceAuthWrapper>
         <AppRailVisibilityProvider>
           <WorkspaceContentWrapper>
+            <GlobalModals workspaceSlug={workspaceSlug} />
             <Outlet />
           </WorkspaceContentWrapper>
         </AppRailVisibilityProvider>
diff --git a/apps/web/app/(all)/accounts/forgot-password/layout.tsx b/apps/web/app/(all)/accounts/forgot-password/layout.tsx
index 0e4b9b4be..f503c81e2 100644
--- a/apps/web/app/(all)/accounts/forgot-password/layout.tsx
+++ b/apps/web/app/(all)/accounts/forgot-password/layout.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { Outlet } from "react-router";
 import type { Route } from "./+types/layout";
 
diff --git a/apps/web/app/(all)/accounts/forgot-password/page.tsx b/apps/web/app/(all)/accounts/forgot-password/page.tsx
index 299897364..eb71311cb 100644
--- a/apps/web/app/(all)/accounts/forgot-password/page.tsx
+++ b/apps/web/app/(all)/accounts/forgot-password/page.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 // components
 import { ForgotPasswordForm } from "@/components/account/auth-forms/forgot-password";
@@ -12,7 +18,7 @@ function ForgotPasswordPage() {
   return (
     <DefaultLayout>
       <AuthenticationWrapper pageType={EPageTypes.NON_AUTHENTICATED}>
-        <div className="relative z-10 flex flex-col items-center w-screen h-screen overflow-hidden overflow-y-auto pt-6 pb-10 px-8">
+        <div className="relative z-10 flex h-screen w-screen flex-col items-center overflow-hidden overflow-y-auto px-8 pt-6 pb-10">
           <AuthHeader type={EAuthModes.SIGN_IN} />
           <ForgotPasswordForm />
         </div>
diff --git a/apps/web/app/(all)/accounts/reset-password/layout.tsx b/apps/web/app/(all)/accounts/reset-password/layout.tsx
index 30e798d44..d3955daa8 100644
--- a/apps/web/app/(all)/accounts/reset-password/layout.tsx
+++ b/apps/web/app/(all)/accounts/reset-password/layout.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { Outlet } from "react-router";
 import type { Route } from "./+types/layout";
 
diff --git a/apps/web/app/(all)/accounts/reset-password/page.tsx b/apps/web/app/(all)/accounts/reset-password/page.tsx
index b37fb9aed..c9914f08d 100644
--- a/apps/web/app/(all)/accounts/reset-password/page.tsx
+++ b/apps/web/app/(all)/accounts/reset-password/page.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // plane imports
 import { EAuthModes } from "@plane/constants";
 // components
@@ -13,7 +19,7 @@ function ResetPasswordPage() {
   return (
     <DefaultLayout>
       <AuthenticationWrapper pageType={EPageTypes.NON_AUTHENTICATED}>
-        <div className="relative z-10 flex flex-col items-center w-screen h-screen overflow-hidden overflow-y-auto pt-6 pb-10 px-8">
+        <div className="relative z-10 flex h-screen w-screen flex-col items-center overflow-hidden overflow-y-auto px-8 pt-6 pb-10">
           <AuthHeader type={EAuthModes.SIGN_IN} />
           <ResetPasswordForm />
         </div>
diff --git a/apps/web/app/(all)/accounts/set-password/layout.tsx b/apps/web/app/(all)/accounts/set-password/layout.tsx
index 290d153a9..4455b84fc 100644
--- a/apps/web/app/(all)/accounts/set-password/layout.tsx
+++ b/apps/web/app/(all)/accounts/set-password/layout.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { Outlet } from "react-router";
 import type { Route } from "./+types/layout";
 
diff --git a/apps/web/app/(all)/accounts/set-password/page.tsx b/apps/web/app/(all)/accounts/set-password/page.tsx
index 4e3a3bfa0..493f86de8 100644
--- a/apps/web/app/(all)/accounts/set-password/page.tsx
+++ b/apps/web/app/(all)/accounts/set-password/page.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // plane imports
 import { EAuthModes } from "@plane/constants";
 // components
@@ -13,7 +19,7 @@ function SetPasswordPage() {
   return (
     <DefaultLayout>
       <AuthenticationWrapper pageType={EPageTypes.SET_PASSWORD}>
-        <div className="relative z-10 flex flex-col items-center w-screen h-screen overflow-hidden overflow-y-auto pt-6 pb-10 px-8">
+        <div className="relative z-10 flex h-screen w-screen flex-col items-center overflow-hidden overflow-y-auto px-8 pt-6 pb-10">
           <AuthHeader type={EAuthModes.SIGN_IN} />
           <ResetPasswordForm />
         </div>
diff --git a/apps/web/app/(all)/create-workspace/layout.tsx b/apps/web/app/(all)/create-workspace/layout.tsx
index 880b1f394..95b73bf8d 100644
--- a/apps/web/app/(all)/create-workspace/layout.tsx
+++ b/apps/web/app/(all)/create-workspace/layout.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { Outlet } from "react-router";
 import type { Route } from "./+types/layout";
 
diff --git a/apps/web/app/(all)/create-workspace/page.tsx b/apps/web/app/(all)/create-workspace/page.tsx
index 7d8cfa82a..38087189c 100644
--- a/apps/web/app/(all)/create-workspace/page.tsx
+++ b/apps/web/app/(all)/create-workspace/page.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useState } from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
@@ -12,17 +18,17 @@ import WorkspaceCreationDisabled from "@/app/assets/workspace/workspace-creation
 import { CreateWorkspaceForm } from "@/components/workspace/create-workspace-form";
 // hooks
 import { useUser, useUserProfile } from "@/hooks/store/user";
+import { useInstance } from "@/hooks/store/use-instance";
 import { useAppRouter } from "@/hooks/use-app-router";
 // wrappers
 import { AuthenticationWrapper } from "@/lib/wrappers/authentication-wrapper";
-// plane web helpers
-import { getIsWorkspaceCreationDisabled } from "@/plane-web/helpers/instance.helper";
 
-function CreateWorkspacePage() {
+const CreateWorkspacePage = observer(function CreateWorkspacePage() {
   const { t } = useTranslation();
   // router
   const router = useAppRouter();
   // store hooks
+  const { config } = useInstance();
   const { data: currentUser } = useUser();
   const { updateUserProfile } = useUserProfile();
   // states
@@ -32,7 +38,7 @@ function CreateWorkspacePage() {
     organization_size: "",
   });
   // derived values
-  const isWorkspaceCreationDisabled = getIsWorkspaceCreationDisabled();
+  const isWorkspaceCreationDisabled = config?.is_workspace_creation_disabled ?? false;
 
   // methods
   const getMailtoHref = () => {
@@ -52,45 +58,45 @@ function CreateWorkspacePage() {
 
   return (
     <AuthenticationWrapper>
-      <div className="flex h-full flex-col gap-y-2 overflow-hidden sm:flex-row sm:gap-y-0">
+      <div className="flex h-full flex-col gap-y-2 overflow-hidden bg-surface-1 sm:flex-row sm:gap-y-0">
         <div className="relative h-1/6 flex-shrink-0 sm:w-2/12 md:w-3/12 lg:w-1/5">
-          <div className="absolute left-0 top-1/2 h-[0.5px] w-full -translate-y-1/2 border-b-[0.5px] border-custom-border-200 sm:left-1/2 sm:top-0 sm:h-screen sm:w-[0.5px] sm:-translate-x-1/2 sm:translate-y-0 sm:border-r-[0.5px] md:left-1/3" />
+          <div className="absolute top-1/2 left-0 h-[0.5px] w-full -translate-y-1/2 border-b-[0.5px] border-subtle sm:top-0 sm:left-1/2 sm:h-screen sm:w-[0.5px] sm:-translate-x-1/2 sm:translate-y-0 sm:border-r-[0.5px] md:left-1/3" />
           <Link
-            className="absolute left-5 top-1/2 grid -translate-y-1/2 place-items-center bg-custom-background-100 px-3 sm:left-1/2 sm:top-12 sm:-translate-x-[15px] sm:translate-y-0 sm:px-0 sm:py-5 md:left-1/3"
+            className="absolute top-1/2 left-5 grid -translate-y-1/2 place-items-center px-3 sm:top-12 sm:left-1/2 sm:-translate-x-[15px] sm:translate-y-0 sm:px-0 sm:py-5 md:left-1/3"
             href="/"
           >
-            <PlaneLogo className="h-9 w-auto text-custom-text-100" />
+            <PlaneLogo className="h-9 w-auto text-primary" />
           </Link>
-          <div className="absolute right-4 top-1/4 -translate-y-1/2 text-sm text-custom-text-100 sm:fixed sm:right-16 sm:top-12 sm:translate-y-0 sm:py-5">
+          <div className="absolute top-1/4 right-4 -translate-y-1/2 text-13 text-primary sm:fixed sm:top-12 sm:right-16 sm:translate-y-0 sm:py-5">
             {currentUser?.email}
           </div>
         </div>
         <div className="relative flex h-full justify-center px-8 pb-8 sm:w-10/12 sm:items-center sm:justify-start sm:p-0 sm:pr-[8.33%] md:w-9/12 lg:w-4/5">
           {isWorkspaceCreationDisabled ? (
-            <div className="w-4/5 h-full flex flex-col items-center justify-center text-lg font-medium gap-1">
+            <div className="flex h-full w-4/5 flex-col items-center justify-center gap-1 text-16 font-medium">
               <img
                 src={WorkspaceCreationDisabled}
-                className="w-full h-full object-contain mb-4"
+                className="mb-4 h-full w-full object-contain"
                 alt="Workspace creation disabled"
               />
-              <div className="text-lg font-medium text-center">
+              <div className="text-center text-16 font-medium">
                 {t("workspace_creation.errors.creation_disabled.title")}
               </div>
-              <p className="text-sm text-custom-text-300 break-words text-center">
+              <p className="text-center text-13 break-words text-tertiary">
                 {t("workspace_creation.errors.creation_disabled.description")}
               </p>
-              <div className="flex gap-4 mt-6">
+              <div className="mt-6 flex gap-4">
                 <Button variant="primary" onClick={() => router.back()}>
                   {t("common.go_back")}
                 </Button>
-                <a href={getMailtoHref()} className={getButtonStyling("outline-primary", "md")}>
+                <a href={getMailtoHref()} className={getButtonStyling("secondary", "base")}>
                   {t("workspace_creation.errors.creation_disabled.request_button")}
                 </a>
               </div>
             </div>
           ) : (
             <div className="w-full space-y-7 sm:space-y-10">
-              <h4 className="text-2xl font-semibold">{t("workspace_creation.heading")}</h4>
+              <h4 className="text-20 font-semibold">{t("workspace_creation.heading")}</h4>
               <div className="sm:w-3/4 md:w-2/5">
                 <CreateWorkspaceForm
                   onSubmit={onSubmit}
@@ -104,6 +110,6 @@ function CreateWorkspacePage() {
       </div>
     </AuthenticationWrapper>
   );
-}
+});
 
-export default observer(CreateWorkspacePage);
+export default CreateWorkspacePage;
diff --git a/apps/web/app/(all)/invitations/layout.tsx b/apps/web/app/(all)/invitations/layout.tsx
index cbda5f4c0..68f4fe7a4 100644
--- a/apps/web/app/(all)/invitations/layout.tsx
+++ b/apps/web/app/(all)/invitations/layout.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { Outlet } from "react-router";
 import type { Route } from "./+types/layout";
 
diff --git a/apps/web/app/(all)/invitations/page.tsx b/apps/web/app/(all)/invitations/page.tsx
index ccdea5752..dc1e45cc2 100644
--- a/apps/web/app/(all)/invitations/page.tsx
+++ b/apps/web/app/(all)/invitations/page.tsx
@@ -1,11 +1,17 @@
-import React, { useState } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
 
 import useSWR, { mutate } from "swr";
 import { CheckCircle2 } from "lucide-react";
 // plane imports
-import { ROLE, MEMBER_TRACKER_EVENTS, MEMBER_TRACKER_ELEMENTS, GROUP_WORKSPACE_TRACKER_EVENT } from "@plane/constants";
+import { ROLE } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 // types
 import { Button } from "@plane/propel/button";
@@ -19,16 +25,14 @@ import emptyInvitation from "@/app/assets/empty-state/invitation.svg?url";
 import { EmptyState } from "@/components/common/empty-state";
 import { WorkspaceLogo } from "@/components/workspace/logo";
 import { USER_WORKSPACES_LIST } from "@/constants/fetch-keys";
-// helpers
 // hooks
-import { captureError, captureSuccess, joinEventGroup } from "@/helpers/event-tracker.helper";
 import { useWorkspace } from "@/hooks/store/use-workspace";
 import { useUser, useUserProfile } from "@/hooks/store/user";
 import { useAppRouter } from "@/hooks/use-app-router";
 // services
 import { AuthenticationWrapper } from "@/lib/wrappers/authentication-wrapper";
 // plane web services
-import { WorkspaceService } from "@/plane-web/services";
+import { WorkspaceService } from "@/services/workspace.service";
 
 const workspaceService = new WorkspaceService();
 
@@ -77,20 +81,7 @@ function UserInvitationsPage() {
       .then(() => {
         mutate(USER_WORKSPACES_LIST);
         const firstInviteId = invitationsRespond[0];
-        const invitation = invitations?.find((i) => i.id === firstInviteId);
         const redirectWorkspace = invitations?.find((i) => i.id === firstInviteId)?.workspace;
-        if (redirectWorkspace?.id) {
-          joinEventGroup(GROUP_WORKSPACE_TRACKER_EVENT, redirectWorkspace?.id, {
-            date: new Date().toDateString(),
-            workspace_id: redirectWorkspace?.id,
-          });
-        }
-        captureSuccess({
-          eventName: MEMBER_TRACKER_EVENTS.accept,
-          payload: {
-            member_id: invitation?.id,
-          },
-        });
         updateUserProfile({ last_workspace_id: redirectWorkspace?.id })
           .then(() => {
             setIsJoiningWorkspaces(false);
@@ -107,14 +98,7 @@ function UserInvitationsPage() {
             setIsJoiningWorkspaces(false);
           });
       })
-      .catch((err) => {
-        captureError({
-          eventName: MEMBER_TRACKER_EVENTS.accept,
-          payload: {
-            member_id: invitationsRespond?.[0],
-          },
-          error: err,
-        });
+      .catch((_err) => {
         setToast({
           type: TOAST_TYPE.ERROR,
           title: t("error"),
@@ -128,14 +112,14 @@ function UserInvitationsPage() {
     <AuthenticationWrapper>
       <div className="flex h-full flex-col gap-y-2 overflow-hidden sm:flex-row sm:gap-y-0">
         <div className="relative h-1/6 flex-shrink-0 sm:w-2/12 md:w-3/12 lg:w-1/5">
-          <div className="absolute left-0 top-1/2 h-[0.5px] w-full -translate-y-1/2 border-b-[0.5px] border-custom-border-200 sm:left-1/2 sm:top-0 sm:h-screen sm:w-[0.5px] sm:-translate-x-1/2 sm:translate-y-0 sm:border-r-[0.5px] md:left-1/3" />
+          <div className="absolute top-1/2 left-0 h-[0.5px] w-full -translate-y-1/2 border-b-[0.5px] border-subtle sm:top-0 sm:left-1/2 sm:h-screen sm:w-[0.5px] sm:-translate-x-1/2 sm:translate-y-0 sm:border-r-[0.5px] md:left-1/3" />
           <Link
             href="/"
-            className="absolute left-5 top-1/2 grid -translate-y-1/2 place-items-center bg-custom-background-100 px-3 sm:left-1/2 sm:top-12 sm:-translate-x-[15px] sm:translate-y-0 sm:px-0 sm:py-5 md:left-1/3 z-10"
+            className="absolute top-1/2 left-5 z-10 grid -translate-y-1/2 place-items-center px-3 sm:top-12 sm:left-1/2 sm:-translate-x-[15px] sm:translate-y-0 sm:px-0 sm:py-5 md:left-1/3"
           >
-            <PlaneLogo className="h-9 w-auto text-custom-text-100" />
+            <PlaneLogo className="h-9 w-auto text-primary" />
           </Link>
-          <div className="absolute right-4 top-1/4 -translate-y-1/2 text-sm text-custom-text-100 sm:fixed sm:right-16 sm:top-12 sm:translate-y-0 sm:py-5">
+          <div className="absolute top-1/4 right-4 -translate-y-1/2 text-13 text-primary sm:fixed sm:top-12 sm:right-16 sm:translate-y-0 sm:py-5">
             {currentUser?.email}
           </div>
         </div>
@@ -143,8 +127,8 @@ function UserInvitationsPage() {
           invitations.length > 0 ? (
             <div className="relative flex h-full justify-center px-8 pb-8 sm:w-10/12 sm:items-center sm:justify-start sm:p-0 sm:pr-[8.33%] md:w-9/12 lg:w-4/5">
               <div className="w-full space-y-10">
-                <h5 className="text-lg">{t("we_see_that_someone_has_invited_you_to_join_a_workspace")}</h5>
-                <h4 className="text-2xl font-semibold">{t("join_a_workspace")}</h4>
+                <h5 className="text-16">{t("we_see_that_someone_has_invited_you_to_join_a_workspace")}</h5>
+                <h4 className="text-20 font-semibold">{t("join_a_workspace")}</h4>
                 <div className="max-h-[37vh] space-y-4 overflow-y-auto md:w-3/5">
                   {invitations.map((invitation) => {
                     const isSelected = invitationsRespond.includes(invitation.id);
@@ -152,10 +136,8 @@ function UserInvitationsPage() {
                     return (
                       <div
                         key={invitation.id}
-                        className={`flex cursor-pointer items-center gap-2 rounded border px-3.5 py-5 ${
-                          isSelected
-                            ? "border-custom-primary-100"
-                            : "border-custom-border-200 hover:bg-custom-background-80"
+                        className={`flex cursor-pointer items-center gap-2 rounded-sm border px-3.5 py-5 ${
+                          isSelected ? "border-accent-strong" : "border-subtle hover:bg-layer-1"
                         }`}
                         onClick={() => handleInvitation(invitation, isSelected ? "withdraw" : "accepted")}
                       >
@@ -167,12 +149,10 @@ function UserInvitationsPage() {
                           />
                         </div>
                         <div className="min-w-0 flex-1">
-                          <div className="text-sm font-medium">{truncateText(invitation.workspace.name, 30)}</div>
-                          <p className="text-xs text-custom-text-200">{ROLE[invitation.role]}</p>
+                          <div className="text-13 font-medium">{truncateText(invitation.workspace.name, 30)}</div>
+                          <p className="text-11 text-secondary">{ROLE[invitation.role]}</p>
                         </div>
-                        <span
-                          className={`flex-shrink-0 ${isSelected ? "text-custom-primary-100" : "text-custom-text-200"}`}
-                        >
+                        <span className={`flex-shrink-0 ${isSelected ? "text-accent-primary" : "text-secondary"}`}>
                           <CheckCircle2 className="h-5 w-5" />
                         </span>
                       </div>
@@ -183,17 +163,16 @@ function UserInvitationsPage() {
                   <Button
                     variant="primary"
                     type="submit"
-                    size="md"
+                    size="lg"
                     onClick={submitInvitations}
                     disabled={isJoiningWorkspaces || invitationsRespond.length === 0}
                     loading={isJoiningWorkspaces}
-                    data-ph-element={MEMBER_TRACKER_ELEMENTS.ACCEPT_INVITATION_BUTTON}
                   >
                     {t("accept_and_join")}
                   </Button>
                   <Link href={`/${redirectWorkspaceSlug}`}>
                     <span>
-                      <Button variant="neutral-primary" size="md">
+                      <Button variant="secondary" size="lg">
                         {t("go_home")}
                       </Button>
                     </span>
@@ -202,7 +181,7 @@ function UserInvitationsPage() {
               </div>
             </div>
           ) : (
-            <div className="fixed left-0 top-0 grid h-full w-full place-items-center">
+            <div className="fixed top-0 left-0 grid h-full w-full place-items-center">
               <EmptyState
                 title={t("no_pending_invites")}
                 description={t("you_can_see_here_if_someone_invites_you_to_a_workspace")}
diff --git a/apps/web/app/(all)/layout.preload.tsx b/apps/web/app/(all)/layout.preload.tsx
index af2368fa8..e070eaa66 100644
--- a/apps/web/app/(all)/layout.preload.tsx
+++ b/apps/web/app/(all)/layout.preload.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // TODO: Check if we need this
 // https://nextjs.org/docs/app/api-reference/functions/generate-metadata#link-relpreload
 // export const usePreloadResources = () => {
diff --git a/apps/web/app/(all)/layout.tsx b/apps/web/app/(all)/layout.tsx
index e87557cb7..ab06034b0 100644
--- a/apps/web/app/(all)/layout.tsx
+++ b/apps/web/app/(all)/layout.tsx
@@ -1,12 +1,12 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { Outlet } from "react-router";
 import type { Route } from "./+types/layout";
 import { PreloadResources } from "./layout.preload";
-// types
-
-// styles
-import "@/styles/power-k.css";
-import "@/styles/emoji.css";
-import "@plane/propel/styles/react-day-picker.css";
 
 export const meta: Route.MetaFunction = () => [
   { name: "robots", content: "noindex, nofollow" },
diff --git a/apps/web/app/(all)/onboarding/layout.tsx b/apps/web/app/(all)/onboarding/layout.tsx
index ac20091f2..fee10f7a0 100644
--- a/apps/web/app/(all)/onboarding/layout.tsx
+++ b/apps/web/app/(all)/onboarding/layout.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { Outlet } from "react-router";
 import type { Route } from "./+types/layout";
 
diff --git a/apps/web/app/(all)/onboarding/page.tsx b/apps/web/app/(all)/onboarding/page.tsx
index 0fdb91abc..28e677e22 100644
--- a/apps/web/app/(all)/onboarding/page.tsx
+++ b/apps/web/app/(all)/onboarding/page.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import useSWR from "swr";
 
@@ -14,7 +20,7 @@ import { useUser } from "@/hooks/store/user";
 // wrappers
 import { AuthenticationWrapper } from "@/lib/wrappers/authentication-wrapper";
 // services
-import { WorkspaceService } from "@/plane-web/services";
+import { WorkspaceService } from "@/services/workspace.service";
 
 const workspaceService = new WorkspaceService();
 
@@ -40,9 +46,9 @@ function OnboardingPage() {
 
   return (
     <AuthenticationWrapper pageType={EPageTypes.ONBOARDING}>
-      <div className="flex relative size-full overflow-hidden bg-custom-background-90 rounded-lg transition-all ease-in-out duration-300">
-        <div className="size-full p-2 flex-grow transition-all ease-in-out duration-300 overflow-hidden">
-          <div className="relative flex flex-col h-full w-full overflow-hidden rounded-lg bg-custom-background-100 shadow-md border border-custom-border-200">
+      <div className="relative flex size-full overflow-hidden rounded-lg bg-canvas transition-all duration-300 ease-in-out">
+        <div className="size-full flex-grow overflow-hidden p-2 transition-all duration-300 ease-in-out">
+          <div className="shadow-md relative flex h-full w-full flex-col overflow-hidden rounded-lg border border-subtle bg-surface-1">
             {user && !invitationsLoader ? (
               <OnboardingRoot invitations={invitations ?? []} />
             ) : (
diff --git a/apps/web/app/(all)/profile/activity/page.tsx b/apps/web/app/(all)/profile/activity/page.tsx
deleted file mode 100644
index 0ddd56f95..000000000
--- a/apps/web/app/(all)/profile/activity/page.tsx
+++ /dev/null
@@ -1,83 +0,0 @@
-import { useState } from "react";
-import { observer } from "mobx-react";
-import { useTheme } from "next-themes";
-// plane imports
-import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
-// assets
-import darkActivityAsset from "@/app/assets/empty-state/profile/activity-dark.webp?url";
-import lightActivityAsset from "@/app/assets/empty-state/profile/activity-light.webp?url";
-// components
-import { PageHead } from "@/components/core/page-title";
-import { DetailedEmptyState } from "@/components/empty-state/detailed-empty-state-root";
-import { ProfileActivityListPage } from "@/components/profile/activity/profile-activity-list";
-import { ProfileSettingContentHeader } from "@/components/profile/profile-setting-content-header";
-import { ProfileSettingContentWrapper } from "@/components/profile/profile-setting-content-wrapper";
-
-const PER_PAGE = 100;
-
-function ProfileActivityPage() {
-  // states
-  const [pageCount, setPageCount] = useState(1);
-  const [totalPages, setTotalPages] = useState(0);
-  const [resultsCount, setResultsCount] = useState(0);
-  const [isEmpty, setIsEmpty] = useState(false);
-  // theme hook
-  const { resolvedTheme } = useTheme();
-  // plane hooks
-  const { t } = useTranslation();
-  // derived values
-  const resolvedPath = resolvedTheme === "light" ? lightActivityAsset : darkActivityAsset;
-
-  const updateTotalPages = (count: number) => setTotalPages(count);
-
-  const updateResultsCount = (count: number) => setResultsCount(count);
-
-  const updateEmptyState = (isEmpty: boolean) => setIsEmpty(isEmpty);
-
-  const handleLoadMore = () => setPageCount((prev) => prev + 1);
-
-  const activityPages: React.ReactNode[] = [];
-  for (let i = 0; i < pageCount; i++)
-    activityPages.push(
-      <ProfileActivityListPage
-        key={i}
-        cursor={`${PER_PAGE}:${i}:0`}
-        perPage={PER_PAGE}
-        updateResultsCount={updateResultsCount}
-        updateTotalPages={updateTotalPages}
-        updateEmptyState={updateEmptyState}
-      />
-    );
-
-  const isLoadMoreVisible = pageCount < totalPages && resultsCount !== 0;
-
-  if (isEmpty) {
-    return (
-      <DetailedEmptyState
-        title={t("profile.empty_state.activity.title")}
-        description={t("profile.empty_state.activity.description")}
-        assetPath={resolvedPath}
-      />
-    );
-  }
-
-  return (
-    <>
-      <PageHead title="Profile - Activity" />
-      <ProfileSettingContentWrapper>
-        <ProfileSettingContentHeader title={t("activity")} />
-        {activityPages}
-        {isLoadMoreVisible && (
-          <div className="flex w-full items-center justify-center text-xs">
-            <Button variant="accent-primary" size="sm" onClick={handleLoadMore}>
-              {t("load_more")}
-            </Button>
-          </div>
-        )}
-      </ProfileSettingContentWrapper>
-    </>
-  );
-}
-
-export default observer(ProfileActivityPage);
diff --git a/apps/web/app/(all)/profile/appearance/page.tsx b/apps/web/app/(all)/profile/appearance/page.tsx
deleted file mode 100644
index 648681f07..000000000
--- a/apps/web/app/(all)/profile/appearance/page.tsx
+++ /dev/null
@@ -1,89 +0,0 @@
-import { useEffect, useState } from "react";
-import { observer } from "mobx-react";
-import { useTheme } from "next-themes";
-// plane imports
-import type { I_THEME_OPTION } from "@plane/constants";
-import { THEME_OPTIONS } from "@plane/constants";
-import { useTranslation } from "@plane/i18n";
-import { setPromiseToast } from "@plane/propel/toast";
-import type { IUserTheme } from "@plane/types";
-// components
-import { applyTheme, unsetCustomCssVariables } from "@plane/utils";
-import { LogoSpinner } from "@/components/common/logo-spinner";
-import { PageHead } from "@/components/core/page-title";
-import { CustomThemeSelector } from "@/components/core/theme/custom-theme-selector";
-import { ThemeSwitch } from "@/components/core/theme/theme-switch";
-import { ProfileSettingContentHeader } from "@/components/profile/profile-setting-content-header";
-import { ProfileSettingContentWrapper } from "@/components/profile/profile-setting-content-wrapper";
-// hooks
-import { useUserProfile } from "@/hooks/store/user";
-
-function ProfileAppearancePage() {
-  const { t } = useTranslation();
-  const { setTheme } = useTheme();
-  // states
-  const [currentTheme, setCurrentTheme] = useState<I_THEME_OPTION | null>(null);
-  // hooks
-  const { data: userProfile, updateUserTheme } = useUserProfile();
-
-  useEffect(() => {
-    if (userProfile?.theme?.theme) {
-      const userThemeOption = THEME_OPTIONS.find((t) => t.value === userProfile?.theme?.theme);
-      if (userThemeOption) {
-        setCurrentTheme(userThemeOption);
-      }
-    }
-  }, [userProfile?.theme?.theme]);
-
-  const handleThemeChange = (themeOption: I_THEME_OPTION) => {
-    applyThemeChange({ theme: themeOption.value });
-
-    const updateCurrentUserThemePromise = updateUserTheme({ theme: themeOption.value });
-    setPromiseToast(updateCurrentUserThemePromise, {
-      loading: "Updating theme...",
-      success: {
-        title: "Success!",
-        message: () => "Theme updated successfully!",
-      },
-      error: {
-        title: "Error!",
-        message: () => "Failed to Update the theme",
-      },
-    });
-  };
-
-  const applyThemeChange = (theme: Partial<IUserTheme>) => {
-    setTheme(theme?.theme || "system");
-
-    if (theme?.theme === "custom" && theme?.palette) {
-      applyTheme(theme?.palette !== ",,,," ? theme?.palette : "#0d101b,#c5c5c5,#3f76ff,#0d101b,#c5c5c5", false);
-    } else unsetCustomCssVariables();
-  };
-
-  return (
-    <>
-      <PageHead title="Profile - Appearance" />
-      {userProfile ? (
-        <ProfileSettingContentWrapper>
-          <ProfileSettingContentHeader title={t("appearance")} />
-          <div className="grid grid-cols-12 gap-4 py-6 sm:gap-16">
-            <div className="col-span-12 sm:col-span-6">
-              <h4 className="text-lg font-semibold text-custom-text-100">{t("theme")}</h4>
-              <p className="text-sm text-custom-text-200">{t("select_or_customize_your_interface_color_scheme")}</p>
-            </div>
-            <div className="col-span-12 sm:col-span-6">
-              <ThemeSwitch value={currentTheme} onChange={handleThemeChange} />
-            </div>
-          </div>
-          {userProfile?.theme?.theme === "custom" && <CustomThemeSelector applyThemeChange={applyThemeChange} />}
-        </ProfileSettingContentWrapper>
-      ) : (
-        <div className="grid h-full w-full place-items-center px-4 sm:px-0">
-          <LogoSpinner />
-        </div>
-      )}
-    </>
-  );
-}
-
-export default observer(ProfileAppearancePage);
diff --git a/apps/web/app/(all)/profile/notifications/page.tsx b/apps/web/app/(all)/profile/notifications/page.tsx
deleted file mode 100644
index 725117e5c..000000000
--- a/apps/web/app/(all)/profile/notifications/page.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import useSWR from "swr";
-// components
-import { useTranslation } from "@plane/i18n";
-import { PageHead } from "@/components/core/page-title";
-import { EmailNotificationForm } from "@/components/profile/notification/email-notification-form";
-import { ProfileSettingContentHeader } from "@/components/profile/profile-setting-content-header";
-import { ProfileSettingContentWrapper } from "@/components/profile/profile-setting-content-wrapper";
-import { EmailSettingsLoader } from "@/components/ui/loader/settings/email";
-// services
-import { UserService } from "@/services/user.service";
-
-const userService = new UserService();
-
-export default function ProfileNotificationPage() {
-  const { t } = useTranslation();
-  // fetching user email notification settings
-  const { data, isLoading } = useSWR("CURRENT_USER_EMAIL_NOTIFICATION_SETTINGS", () =>
-    userService.currentUserEmailNotificationSettings()
-  );
-
-  if (!data || isLoading) {
-    return <EmailSettingsLoader />;
-  }
-
-  return (
-    <>
-      <PageHead title={`${t("profile.label")} - ${t("notifications")}`} />
-      <ProfileSettingContentWrapper>
-        <ProfileSettingContentHeader
-          title={t("email_notifications")}
-          description={t("stay_in_the_loop_on_issues_you_are_subscribed_to_enable_this_to_get_notified")}
-        />
-        <EmailNotificationForm data={data} />
-      </ProfileSettingContentWrapper>
-    </>
-  );
-}
diff --git a/apps/web/app/(all)/profile/page.tsx b/apps/web/app/(all)/profile/page.tsx
deleted file mode 100644
index 9b6f8f083..000000000
--- a/apps/web/app/(all)/profile/page.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import { observer } from "mobx-react";
-// plane imports
-import { useTranslation } from "@plane/i18n";
-// components
-import { LogoSpinner } from "@/components/common/logo-spinner";
-import { PageHead } from "@/components/core/page-title";
-import { ProfileForm } from "@/components/profile/form";
-import { ProfileSettingContentWrapper } from "@/components/profile/profile-setting-content-wrapper";
-// hooks
-import { useUser } from "@/hooks/store/user";
-
-function ProfileSettingsPage() {
-  const { t } = useTranslation();
-  // store hooks
-  const { data: currentUser, userProfile } = useUser();
-
-  if (!currentUser)
-    return (
-      <div className="grid h-full w-full place-items-center px-4 sm:px-0">
-        <LogoSpinner />
-      </div>
-    );
-
-  return (
-    <>
-      <PageHead title={`${t("profile.label")} - ${t("general_settings")}`} />
-      <ProfileSettingContentWrapper>
-        <ProfileForm user={currentUser} profile={userProfile.data} />
-      </ProfileSettingContentWrapper>
-    </>
-  );
-}
-
-export default observer(ProfileSettingsPage);
diff --git a/apps/web/app/(all)/profile/sidebar.tsx b/apps/web/app/(all)/profile/sidebar.tsx
deleted file mode 100644
index 13ab54bdb..000000000
--- a/apps/web/app/(all)/profile/sidebar.tsx
+++ /dev/null
@@ -1,281 +0,0 @@
-import { useEffect, useRef, useState } from "react";
-import { observer } from "mobx-react";
-import Link from "next/link";
-import { usePathname } from "next/navigation";
-// icons
-import { LogOut, MoveLeft, Activity, Bell, CircleUser, KeyRound, Settings2, CirclePlus, Mails } from "lucide-react";
-// plane imports
-import { PROFILE_ACTION_LINKS } from "@plane/constants";
-import { useOutsideClickDetector } from "@plane/hooks";
-import { useTranslation } from "@plane/i18n";
-import { ChevronLeftIcon } from "@plane/propel/icons";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
-import { Tooltip } from "@plane/propel/tooltip";
-import { cn, getFileURL } from "@plane/utils";
-// components
-import { SidebarNavItem } from "@/components/sidebar/sidebar-navigation";
-// hooks
-import { useAppTheme } from "@/hooks/store/use-app-theme";
-import { useWorkspace } from "@/hooks/store/use-workspace";
-import { useUser, useUserSettings } from "@/hooks/store/user";
-import { usePlatformOS } from "@/hooks/use-platform-os";
-
-const WORKSPACE_ACTION_LINKS = [
-  {
-    key: "create_workspace",
-    Icon: CirclePlus,
-    i18n_label: "create_workspace",
-    href: "/create-workspace",
-  },
-  {
-    key: "invitations",
-    Icon: Mails,
-    i18n_label: "workspace_invites",
-    href: "/invitations",
-  },
-];
-
-function ProjectActionIcons({ type, size, className = "" }: { type: string; size?: number; className?: string }) {
-  const icons = {
-    profile: CircleUser,
-    security: KeyRound,
-    activity: Activity,
-    preferences: Settings2,
-    notifications: Bell,
-    "api-tokens": KeyRound,
-  };
-
-  if (type === undefined) return null;
-  const Icon = icons[type as keyof typeof icons];
-  if (!Icon) return null;
-  return <Icon size={size} className={className} />;
-}
-
-export const ProfileLayoutSidebar = observer(function ProfileLayoutSidebar() {
-  // states
-  const [isSigningOut, setIsSigningOut] = useState(false);
-  // router
-  const pathname = usePathname();
-  // store hooks
-  const { sidebarCollapsed, toggleSidebar } = useAppTheme();
-  const { data: currentUser, signOut } = useUser();
-  const { data: currentUserSettings } = useUserSettings();
-  const { workspaces } = useWorkspace();
-  const { isMobile } = usePlatformOS();
-  const { t } = useTranslation();
-
-  const workspacesList = Object.values(workspaces ?? {});
-
-  // redirect url for normal mode
-  const redirectWorkspaceSlug =
-    currentUserSettings?.workspace?.last_workspace_slug ||
-    currentUserSettings?.workspace?.fallback_workspace_slug ||
-    "";
-
-  const ref = useRef<HTMLDivElement>(null);
-
-  useOutsideClickDetector(ref, () => {
-    if (sidebarCollapsed === false) {
-      if (window.innerWidth < 768) {
-        toggleSidebar();
-      }
-    }
-  });
-
-  useEffect(() => {
-    const handleResize = () => {
-      if (window.innerWidth <= 768) {
-        toggleSidebar(true);
-      }
-    };
-    handleResize();
-    window.addEventListener("resize", handleResize);
-    return () => {
-      window.removeEventListener("resize", handleResize);
-    };
-  }, [toggleSidebar]);
-
-  const handleItemClick = () => {
-    if (window.innerWidth < 768) {
-      toggleSidebar();
-    }
-  };
-
-  const handleSignOut = async () => {
-    setIsSigningOut(true);
-    await signOut()
-      .catch(() =>
-        setToast({
-          type: TOAST_TYPE.ERROR,
-          title: t("sign_out.toast.error.title"),
-          message: t("sign_out.toast.error.message"),
-        })
-      )
-      .finally(() => setIsSigningOut(false));
-  };
-
-  return (
-    <div
-      className={`fixed inset-y-0 z-20 flex h-full flex-shrink-0 flex-grow-0 flex-col border-r border-custom-sidebar-border-200 bg-custom-sidebar-background-100 duration-300 md:relative 
-        ${sidebarCollapsed ? "-ml-[250px]" : ""}
-        sm:${sidebarCollapsed ? "-ml-[250px]" : ""}
-        md:ml-0 ${sidebarCollapsed ? "w-[70px]" : "w-[250px]"}
-      `}
-    >
-      <div ref={ref} className="flex h-full w-full flex-col gap-y-4">
-        <Link href={`/${redirectWorkspaceSlug}`} onClick={handleItemClick}>
-          <div
-            className={`flex flex-shrink-0 items-center gap-2 truncate px-4 pt-4 ${
-              sidebarCollapsed ? "justify-center" : ""
-            }`}
-          >
-            <span className="grid h-5 w-5 flex-shrink-0 place-items-center">
-              <ChevronLeftIcon className="h-5 w-5" strokeWidth={1} />
-            </span>
-            {!sidebarCollapsed && (
-              <h4 className="truncate text-lg font-semibold text-custom-text-200">{t("profile_settings")}</h4>
-            )}
-          </div>
-        </Link>
-        <div className="flex flex-shrink-0 flex-col overflow-x-hidden">
-          {!sidebarCollapsed && (
-            <h6 className="rounded px-6 text-sm font-semibold text-custom-sidebar-text-400">{t("your_account")}</h6>
-          )}
-          <div className="vertical-scrollbar scrollbar-sm mt-2 px-4 h-full space-y-1 overflow-y-auto">
-            {PROFILE_ACTION_LINKS.map((link) => {
-              if (link.key === "change-password" && currentUser?.is_password_autoset) return null;
-
-              return (
-                <Link key={link.key} href={link.href} className="block w-full" onClick={handleItemClick}>
-                  <Tooltip
-                    tooltipContent={t(link.key)}
-                    position="right"
-                    className="ml-2"
-                    disabled={!sidebarCollapsed}
-                    isMobile={isMobile}
-                  >
-                    <SidebarNavItem
-                      key={link.key}
-                      className={`${sidebarCollapsed ? "p-0 size-8 aspect-square justify-center mx-auto" : ""}`}
-                      isActive={link.highlight(pathname)}
-                    >
-                      <div className="flex items-center gap-1.5 py-[1px]">
-                        <ProjectActionIcons type={link.key} size={16} />
-
-                        {!sidebarCollapsed && <p className="text-sm leading-5 font-medium">{t(link.i18n_label)}</p>}
-                      </div>
-                    </SidebarNavItem>
-                  </Tooltip>
-                </Link>
-              );
-            })}
-          </div>
-        </div>
-        <div className="flex flex-col overflow-x-hidden">
-          {!sidebarCollapsed && (
-            <h6 className="rounded px-6 text-sm font-semibold text-custom-sidebar-text-400">{t("workspaces")}</h6>
-          )}
-          {workspacesList && workspacesList.length > 0 && (
-            <div
-              className={cn("vertical-scrollbar scrollbar-xs mt-2 px-4 h-full space-y-1.5 overflow-y-auto", {
-                "scrollbar-sm": !sidebarCollapsed,
-                "ml-2.5 px-1": sidebarCollapsed,
-              })}
-            >
-              {workspacesList.map((workspace) => (
-                <Link
-                  key={workspace.id}
-                  href={`/${workspace.slug}`}
-                  className={`flex flex-grow cursor-pointer select-none items-center truncate text-left text-sm font-medium ${
-                    sidebarCollapsed ? "justify-center" : `justify-between`
-                  }`}
-                  onClick={handleItemClick}
-                >
-                  <span
-                    className={`flex w-full flex-grow items-center gap-x-2 truncate rounded-md px-3 py-1 hover:bg-custom-sidebar-background-80 ${
-                      sidebarCollapsed ? "justify-center" : ""
-                    }`}
-                  >
-                    <span
-                      className={`relative flex h-6 w-6 flex-shrink-0 items-center  justify-center p-2 text-xs uppercase ${
-                        !workspace?.logo_url && "rounded bg-custom-primary-500 text-white"
-                      }`}
-                    >
-                      {workspace?.logo_url && workspace.logo_url !== "" ? (
-                        <img
-                          src={getFileURL(workspace.logo_url)}
-                          className="absolute left-0 top-0 h-full w-full rounded object-cover"
-                          alt="Workspace Logo"
-                        />
-                      ) : (
-                        (workspace?.name?.charAt(0) ?? "...")
-                      )}
-                    </span>
-                    {!sidebarCollapsed && (
-                      <p className="truncate text-sm text-custom-sidebar-text-200">{workspace.name}</p>
-                    )}
-                  </span>
-                </Link>
-              ))}
-            </div>
-          )}
-          <div className="mt-1.5 px-4">
-            {WORKSPACE_ACTION_LINKS.map((link) => (
-              <Link className="block w-full" key={link.key} href={link.href} onClick={handleItemClick}>
-                <Tooltip
-                  tooltipContent={t(link.key)}
-                  position="right"
-                  className="ml-2"
-                  disabled={!sidebarCollapsed}
-                  isMobile={isMobile}
-                >
-                  <div
-                    className={`group flex w-full items-center gap-2.5 rounded-md px-3 py-2 text-sm font-medium text-custom-sidebar-text-200 outline-none hover:bg-custom-sidebar-background-80 focus:bg-custom-sidebar-background-80 ${
-                      sidebarCollapsed ? "justify-center" : ""
-                    }`}
-                  >
-                    {<link.Icon className="flex-shrink-0 size-4" />}
-                    {!sidebarCollapsed && t(link.i18n_label)}
-                  </div>
-                </Tooltip>
-              </Link>
-            ))}
-          </div>
-        </div>
-        <div className="flex flex-shrink-0 flex-grow items-end px-6 py-2">
-          <div
-            className={`flex w-full ${
-              sidebarCollapsed ? "flex-col justify-center gap-2" : "items-center justify-between gap-2"
-            }`}
-          >
-            <button
-              type="button"
-              onClick={handleSignOut}
-              className="flex items-center justify-center gap-2 text-sm font-medium text-red-500"
-              disabled={isSigningOut}
-            >
-              <LogOut className="h-3.5 w-3.5" />
-              {!sidebarCollapsed && <span>{isSigningOut ? `${t("signing_out")}...` : t("sign_out")}</span>}
-            </button>
-            <button
-              type="button"
-              className="grid place-items-center rounded-md p-1.5 text-custom-text-200 outline-none hover:bg-custom-background-90 hover:text-custom-text-100 md:hidden"
-              onClick={() => toggleSidebar()}
-            >
-              <MoveLeft className="h-3.5 w-3.5" />
-            </button>
-            <button
-              type="button"
-              className={`ml-auto hidden place-items-center rounded-md p-1.5 text-custom-text-200 outline-none hover:bg-custom-background-90 hover:text-custom-text-100 md:grid ${
-                sidebarCollapsed ? "w-full" : ""
-              }`}
-              onClick={() => toggleSidebar()}
-            >
-              <MoveLeft className={`h-3.5 w-3.5 duration-300 ${sidebarCollapsed ? "rotate-180" : ""}`} />
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-});
diff --git a/apps/web/app/(all)/settings/profile/[profileTabId]/page.tsx b/apps/web/app/(all)/settings/profile/[profileTabId]/page.tsx
new file mode 100644
index 000000000..d7df27ccb
--- /dev/null
+++ b/apps/web/app/(all)/settings/profile/[profileTabId]/page.tsx
@@ -0,0 +1,61 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// plane imports
+import { PROFILE_SETTINGS_TABS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import type { TProfileSettingsTabs } from "@plane/types";
+// components
+import { LogoSpinner } from "@/components/common/logo-spinner";
+import { PageHead } from "@/components/core/page-title";
+import { ProfileSettingsContent } from "@/components/settings/profile/content";
+import { ProfileSettingsSidebarRoot } from "@/components/settings/profile/sidebar";
+// hooks
+import { useUser } from "@/hooks/store/user";
+import { useAppRouter } from "@/hooks/use-app-router";
+// local imports
+import type { Route } from "../+types/layout";
+
+function ProfileSettingsPage(props: Route.ComponentProps) {
+  const { profileTabId } = props.params;
+  // router
+  const router = useAppRouter();
+  // store hooks
+  const { data: currentUser } = useUser();
+  // translation
+  const { t } = useTranslation();
+  // derived values
+  const isAValidTab = PROFILE_SETTINGS_TABS.includes(profileTabId as TProfileSettingsTabs);
+
+  if (!currentUser || !isAValidTab)
+    return (
+      <div className="grid size-full place-items-center px-4">
+        <LogoSpinner />
+      </div>
+    );
+
+  return (
+    <>
+      <PageHead title={`${t("profile.label")} - ${t("general_settings")}`} />
+      <div className="relative size-full">
+        <div className="flex size-full">
+          <ProfileSettingsSidebarRoot
+            activeTab={profileTabId as TProfileSettingsTabs}
+            className="w-[250px]"
+            updateActiveTab={(tab) => router.push(`/settings/profile/${tab}`)}
+          />
+          <ProfileSettingsContent
+            activeTab={profileTabId as TProfileSettingsTabs}
+            className="mx-auto w-fit max-w-225 grow px-page-x py-20"
+          />
+        </div>
+      </div>
+    </>
+  );
+}
+
+export default observer(ProfileSettingsPage);
diff --git a/apps/web/app/(all)/profile/layout.tsx b/apps/web/app/(all)/settings/profile/layout.tsx
similarity index 53%
rename from apps/web/app/(all)/profile/layout.tsx
rename to apps/web/app/(all)/settings/profile/layout.tsx
index f42685939..a30518f65 100644
--- a/apps/web/app/(all)/profile/layout.tsx
+++ b/apps/web/app/(all)/settings/profile/layout.tsx
@@ -1,20 +1,23 @@
-// components
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { Outlet } from "react-router";
-// wrappers
+// components
 import { ProjectsAppPowerKProvider } from "@/components/power-k/projects-app-provider";
+// lib
 import { AuthenticationWrapper } from "@/lib/wrappers/authentication-wrapper";
-// layout
-import { ProfileLayoutSidebar } from "./sidebar";
 
 export default function ProfileSettingsLayout() {
   return (
     <>
       <ProjectsAppPowerKProvider />
       <AuthenticationWrapper>
-        <div className="relative flex h-full w-full overflow-hidden rounded-lg border border-custom-border-200">
-          <ProfileLayoutSidebar />
-          <main className="relative flex h-full w-full flex-col overflow-hidden bg-custom-background-100">
-            <div className="h-full w-full overflow-hidden">
+        <div className="relative flex size-full overflow-hidden bg-canvas p-2">
+          <main className="relative flex size-full flex-col overflow-hidden rounded-lg border border-subtle bg-surface-1">
+            <div className="size-full overflow-hidden">
               <Outlet />
             </div>
           </main>
diff --git a/apps/web/app/(all)/sign-up/layout.tsx b/apps/web/app/(all)/sign-up/layout.tsx
index daf5a0307..97a8147e4 100644
--- a/apps/web/app/(all)/sign-up/layout.tsx
+++ b/apps/web/app/(all)/sign-up/layout.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { Outlet } from "react-router";
 import type { Route } from "./+types/layout";
 
diff --git a/apps/web/app/(all)/sign-up/page.tsx b/apps/web/app/(all)/sign-up/page.tsx
index b3563ae7d..639d765cc 100644
--- a/apps/web/app/(all)/sign-up/page.tsx
+++ b/apps/web/app/(all)/sign-up/page.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // components
 import { AuthBase } from "@/components/auth-screens/auth-base";
 // helpers
diff --git a/apps/web/app/(all)/workspace-invitations/layout.tsx b/apps/web/app/(all)/workspace-invitations/layout.tsx
index cab6733a6..b9a733746 100644
--- a/apps/web/app/(all)/workspace-invitations/layout.tsx
+++ b/apps/web/app/(all)/workspace-invitations/layout.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { Outlet } from "react-router";
 import type { Route } from "./+types/layout";
 
diff --git a/apps/web/app/(all)/workspace-invitations/page.tsx b/apps/web/app/(all)/workspace-invitations/page.tsx
index 385c54f91..4ab9b02eb 100644
--- a/apps/web/app/(all)/workspace-invitations/page.tsx
+++ b/apps/web/app/(all)/workspace-invitations/page.tsx
@@ -1,9 +1,14 @@
-import React from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import { useSearchParams } from "next/navigation";
 import useSWR from "swr";
-import { Boxes, Check, Share2, Star, User2 } from "lucide-react";
-import { CloseIcon } from "@plane/propel/icons";
+import { Boxes, Share2, Star, User2 } from "lucide-react";
+import { CheckIcon, CloseIcon } from "@plane/propel/icons";
 // components
 import { LogoSpinner } from "@/components/common/logo-spinner";
 import { EmptySpace, EmptySpaceItem } from "@/components/ui/empty-space";
@@ -16,7 +21,7 @@ import { useUser } from "@/hooks/store/user";
 import { useAppRouter } from "@/hooks/use-app-router";
 // wrappers
 import { AuthenticationWrapper } from "@/lib/wrappers/authentication-wrapper";
-import { WorkspaceService } from "@/plane-web/services";
+import { WorkspaceService } from "@/services/workspace.service";
 // services
 
 // service initialization
@@ -28,8 +33,8 @@ function WorkspaceInvitationPage() {
   // query params
   const searchParams = useSearchParams();
   const invitation_id = searchParams.get("invitation_id");
-  const email = searchParams.get("email");
   const slug = searchParams.get("slug");
+  const token = searchParams.get("token");
   // store hooks
   const { data: currentUser } = useUser();
 
@@ -45,29 +50,29 @@ function WorkspaceInvitationPage() {
     workspaceService
       .joinWorkspace(invitationDetail.workspace.slug, invitationDetail.id, {
         accepted: true,
-        email: invitationDetail.email,
+        token: token,
       })
       .then(() => {
-        if (email === currentUser?.email) {
+        if (invitationDetail.email === currentUser?.email) {
           router.push(`/${invitationDetail.workspace.slug}`);
         } else {
-          router.push(`/?${searchParams.toString()}`);
+          router.push("/");
         }
       })
-      .catch((err) => console.error(err));
+      .catch((err: unknown) => console.error(err));
   };
 
   const handleReject = () => {
-    if (!invitationDetail) return;
-    workspaceService
+    if (!invitationDetail || !token) return;
+    void workspaceService
       .joinWorkspace(invitationDetail.workspace.slug, invitationDetail.id, {
         accepted: false,
-        email: invitationDetail.email,
+        token: token,
       })
       .then(() => {
         router.push("/");
       })
-      .catch((err) => console.error(err));
+      .catch((err: unknown) => console.error(err));
   };
 
   return (
@@ -75,15 +80,15 @@ function WorkspaceInvitationPage() {
       <div className="flex h-full w-full flex-col items-center justify-center px-3">
         {invitationDetail && !invitationDetail.responded_at ? (
           error ? (
-            <div className="flex w-full flex-col space-y-4 rounded border border-custom-border-200 bg-custom-background-100 px-4 py-8 text-center shadow-2xl md:w-1/3">
-              <h2 className="text-xl uppercase">INVITATION NOT FOUND</h2>
+            <div className="shadow-2xl flex w-full flex-col space-y-4 rounded-sm border border-subtle bg-surface-1 px-4 py-8 text-center md:w-1/3">
+              <h2 className="text-18 uppercase">INVITATION NOT FOUND</h2>
             </div>
           ) : (
             <EmptySpace
               title={`You have been invited to ${invitationDetail.workspace.name}`}
               description="Your workspace is where you'll create projects, collaborate on your work items, and organize different streams of work in your Plane account."
             >
-              <EmptySpaceItem Icon={Check} title="Accept" action={handleAccept} />
+              <EmptySpaceItem Icon={CheckIcon} title="Accept" action={handleAccept} />
               <EmptySpaceItem Icon={CloseIcon} title="Ignore" action={handleReject} />
             </EmptySpace>
           )
@@ -110,7 +115,7 @@ function WorkspaceInvitationPage() {
               <EmptySpaceItem
                 Icon={Share2}
                 title="Join our community of active creators"
-                href="https://discord.com/invite/A92xrEGCge"
+                href="https://forum.plane.so"
               />
             </EmptySpace>
           )
diff --git a/apps/web/app/(home)/layout.tsx b/apps/web/app/(home)/layout.tsx
index a972f662a..c723b076c 100644
--- a/apps/web/app/(home)/layout.tsx
+++ b/apps/web/app/(home)/layout.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { Outlet } from "react-router";
 // types
 import type { Route } from "./+types/layout";
diff --git a/apps/web/app/(home)/page.tsx b/apps/web/app/(home)/page.tsx
index 657ee5017..4717705f1 100644
--- a/apps/web/app/(home)/page.tsx
+++ b/apps/web/app/(home)/page.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 // components
 import { AuthBase } from "@/components/auth-screens/auth-base";
diff --git a/apps/web/app/assets/auth/gradient-bg-logo.webp b/apps/web/app/assets/auth/gradient-bg-logo.webp
new file mode 100644
index 000000000..47202e562
Binary files /dev/null and b/apps/web/app/assets/auth/gradient-bg-logo.webp differ
diff --git a/apps/web/app/assets/auth/gradient-logo.webp b/apps/web/app/assets/auth/gradient-logo.webp
new file mode 100644
index 000000000..674434cee
Binary files /dev/null and b/apps/web/app/assets/auth/gradient-logo.webp differ
diff --git a/apps/web/app/compat/next/helper.ts b/apps/web/app/compat/next/helper.ts
index c04699870..c4edf3d54 100644
--- a/apps/web/app/compat/next/helper.ts
+++ b/apps/web/app/compat/next/helper.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 /**
  * Ensures that a URL has a trailing slash while preserving query parameters and fragments
  * @param url - The URL to process
diff --git a/apps/web/app/compat/next/image.tsx b/apps/web/app/compat/next/image.tsx
index 58e8765eb..f229d0d5f 100644
--- a/apps/web/app/compat/next/image.tsx
+++ b/apps/web/app/compat/next/image.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 
 // Minimal shim so code using next/image compiles under React Router + Vite
diff --git a/apps/web/app/compat/next/link.tsx b/apps/web/app/compat/next/link.tsx
index b0bca4faf..85177560f 100644
--- a/apps/web/app/compat/next/link.tsx
+++ b/apps/web/app/compat/next/link.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 import { Link as RRLink } from "react-router";
 import { ensureTrailingSlash } from "./helper";
diff --git a/apps/web/app/compat/next/navigation.ts b/apps/web/app/compat/next/navigation.ts
index 7a5f09984..3803ffe1f 100644
--- a/apps/web/app/compat/next/navigation.ts
+++ b/apps/web/app/compat/next/navigation.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useMemo } from "react";
 import { useLocation, useNavigate, useParams as useParamsRR, useSearchParams as useSearchParamsRR } from "react-router";
 import { ensureTrailingSlash } from "./helper";
diff --git a/apps/web/app/compat/next/script.tsx b/apps/web/app/compat/next/script.tsx
index af1063dbf..c2b470b79 100644
--- a/apps/web/app/compat/next/script.tsx
+++ b/apps/web/app/compat/next/script.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useEffect } from "react";
 
 type ScriptProps = {
diff --git a/apps/web/app/entry.client.tsx b/apps/web/app/entry.client.tsx
index 9cf1c32de..9c665ede0 100644
--- a/apps/web/app/entry.client.tsx
+++ b/apps/web/app/entry.client.tsx
@@ -1,28 +1,13 @@
-import * as Sentry from "@sentry/react-router";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { startTransition, StrictMode } from "react";
 import { hydrateRoot } from "react-dom/client";
 import { HydratedRouter } from "react-router/dom";
 
-Sentry.init({
-  dsn: process.env.VITE_SENTRY_DSN,
-  environment: process.env.VITE_SENTRY_ENVIRONMENT,
-  sendDefaultPii: process.env.VITE_SENTRY_SEND_DEFAULT_PII ? process.env.VITE_SENTRY_SEND_DEFAULT_PII === "1" : false,
-  release: process.env.VITE_APP_VERSION,
-  tracesSampleRate: process.env.VITE_SENTRY_TRACES_SAMPLE_RATE
-    ? parseFloat(process.env.VITE_SENTRY_TRACES_SAMPLE_RATE)
-    : 0.1,
-  profilesSampleRate: process.env.VITE_SENTRY_PROFILES_SAMPLE_RATE
-    ? parseFloat(process.env.VITE_SENTRY_PROFILES_SAMPLE_RATE)
-    : 0.1,
-  replaysSessionSampleRate: process.env.VITE_SENTRY_REPLAYS_SESSION_SAMPLE_RATE
-    ? parseFloat(process.env.VITE_SENTRY_REPLAYS_SESSION_SAMPLE_RATE)
-    : 0.1,
-  replaysOnErrorSampleRate: process.env.VITE_SENTRY_REPLAYS_ON_ERROR_SAMPLE_RATE
-    ? parseFloat(process.env.VITE_SENTRY_REPLAYS_ON_ERROR_SAMPLE_RATE)
-    : 1.0,
-  integrations: [],
-});
-
 startTransition(() => {
   hydrateRoot(
     document,
diff --git a/apps/web/app/error/dev.tsx b/apps/web/app/error/dev.tsx
index 9d35d149b..0269dcbdc 100644
--- a/apps/web/app/error/dev.tsx
+++ b/apps/web/app/error/dev.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // plane imports
 import { isRouteErrorResponse } from "react-router";
 import { Banner } from "@plane/propel/banner";
@@ -13,11 +19,11 @@ interface ErrorActionsProps {
 function ErrorActions({ onGoHome, onReload }: ErrorActionsProps) {
   return (
     <div className="flex gap-3 pt-2">
-      <Button variant="primary" size="md" onClick={onGoHome}>
+      <Button variant="primary" size="lg" onClick={onGoHome}>
         Go to home
       </Button>
       {onReload && (
-        <Button variant="outline-primary" size="md" onClick={onReload}>
+        <Button variant="secondary" size="lg" onClick={onReload}>
           Reload page
         </Button>
       )}
@@ -34,8 +40,8 @@ interface DevErrorComponentProps {
 export function DevErrorComponent({ error, onGoHome, onReload }: DevErrorComponentProps) {
   if (isRouteErrorResponse(error)) {
     return (
-      <div className="min-h-screen bg-custom-background-90 p-6 flex items-start justify-center transition-none">
-        <div className="w-full max-w-4xl mt-12 space-y-4 transition-none">
+      <div className="flex min-h-screen items-start justify-center bg-surface-2 p-6 transition-none">
+        <div className="mt-12 w-full max-w-4xl space-y-4 transition-none">
           <Banner
             variant="error"
             icon={<InfoFillIcon className="size-5" />}
@@ -46,16 +52,16 @@ export function DevErrorComponent({ error, onGoHome, onReload }: DevErrorCompone
           <Card variant={ECardVariant.WITH_SHADOW} className="!p-6 transition-none">
             <div className="space-y-4">
               <div>
-                <h2 className="text-2xl font-semibold text-red-500 mb-2">
+                <h2 className="mb-2 text-20 font-semibold text-danger-primary">
                   {error.status} {error.statusText}
                 </h2>
-                <div className="h-px w-full bg-custom-border-200" />
+                <div className="bg-subtle-1 h-px w-full" />
               </div>
 
               <div className="space-y-2">
-                <h3 className="text-sm font-medium text-custom-text-300 uppercase tracking-wide">Error Data</h3>
-                <div className="bg-custom-background-80 rounded-md p-4">
-                  <p className="text-sm text-custom-text-200 font-mono">{error.data}</p>
+                <h3 className="text-13 font-medium tracking-wide text-tertiary uppercase">Error Data</h3>
+                <div className="rounded-md bg-layer-1 p-4">
+                  <p className="font-code text-13 text-secondary">{error.data}</p>
                 </div>
               </div>
 
@@ -69,8 +75,8 @@ export function DevErrorComponent({ error, onGoHome, onReload }: DevErrorCompone
 
   if (error instanceof Error) {
     return (
-      <div className="min-h-screen bg-custom-background-90 p-6 flex items-start justify-center transition-none">
-        <div className="w-full max-w-4xl mt-12 space-y-4 transition-none">
+      <div className="flex min-h-screen items-start justify-center bg-surface-2 p-6 transition-none">
+        <div className="mt-12 w-full max-w-4xl space-y-4 transition-none">
           <Banner
             variant="error"
             icon={<InfoFillIcon className="size-5" />}
@@ -80,22 +86,22 @@ export function DevErrorComponent({ error, onGoHome, onReload }: DevErrorCompone
           <Card variant={ECardVariant.WITH_SHADOW} className="!p-6 transition-none">
             <div className="space-y-4">
               <div>
-                <h2 className="text-2xl font-semibold text-red-500 mb-2">Error</h2>
-                <div className="h-px w-full bg-custom-border-200" />
+                <h2 className="mb-2 text-20 font-semibold text-danger-primary">Error</h2>
+                <div className="bg-subtle-1 h-px w-full" />
               </div>
 
               <div className="space-y-2">
-                <h3 className="text-sm font-medium text-custom-text-300 uppercase tracking-wide">Message</h3>
-                <div className="bg-custom-background-80 rounded-md p-4">
-                  <p className="text-sm text-custom-text-100 font-medium">{error.message}</p>
+                <h3 className="text-13 font-medium tracking-wide text-tertiary uppercase">Message</h3>
+                <div className="rounded-md bg-layer-1 p-4">
+                  <p className="text-13 font-medium text-primary">{error.message}</p>
                 </div>
               </div>
 
               {error.stack && (
                 <div className="space-y-2">
-                  <h3 className="text-sm font-medium text-custom-text-300 uppercase tracking-wide">Stack Trace</h3>
-                  <div className="bg-custom-background-80 rounded-md border border-custom-border-200 max-h-96 overflow-auto">
-                    <pre className="p-4 text-xs text-custom-text-200 font-mono whitespace-pre-wrap break-words">
+                  <h3 className="text-13 font-medium tracking-wide text-tertiary uppercase">Stack Trace</h3>
+                  <div className="max-h-96 overflow-auto rounded-md border border-subtle bg-layer-1">
+                    <pre className="p-4 font-code text-11 break-words whitespace-pre-wrap text-secondary">
                       {error.stack}
                     </pre>
                   </div>
@@ -106,12 +112,12 @@ export function DevErrorComponent({ error, onGoHome, onReload }: DevErrorCompone
             </div>
           </Card>
 
-          <Card variant={ECardVariant.WITHOUT_SHADOW} className="!p-4 bg-custom-background-80 transition-none">
+          <Card variant={ECardVariant.WITHOUT_SHADOW} className="bg-layer-1 !p-4 transition-none">
             <div className="flex items-start gap-3">
-              <InfoFillIcon className="size-5 text-custom-text-300 flex-shrink-0 mt-0.5" />
+              <InfoFillIcon className="mt-0.5 size-5 flex-shrink-0 text-tertiary" />
               <div className="space-y-1">
-                <p className="text-sm font-medium text-custom-text-200">Development Mode</p>
-                <p className="text-xs text-custom-text-300">
+                <p className="text-13 font-medium text-secondary">Development Mode</p>
+                <p className="text-11 text-tertiary">
                   This detailed error view is only visible in development. In production, users will see a friendly
                   error page.
                 </p>
@@ -124,8 +130,8 @@ export function DevErrorComponent({ error, onGoHome, onReload }: DevErrorCompone
   }
 
   return (
-    <div className="min-h-screen bg-custom-background-90 p-6 flex items-start justify-center transition-none">
-      <div className="w-full max-w-4xl mt-12 space-y-4 transition-none">
+    <div className="flex min-h-screen items-start justify-center bg-surface-2 p-6 transition-none">
+      <div className="mt-12 w-full max-w-4xl space-y-4 transition-none">
         <Banner
           variant="error"
           icon={<InfoFillIcon className="size-5" />}
@@ -136,12 +142,12 @@ export function DevErrorComponent({ error, onGoHome, onReload }: DevErrorCompone
         <Card variant={ECardVariant.WITH_SHADOW} className="!p-6">
           <div className="space-y-4">
             <div>
-              <h2 className="text-2xl font-semibold text-custom-text-100 mb-2">Unknown Error</h2>
-              <div className="h-px w-full bg-custom-border-200" />
+              <h2 className="mb-2 text-20 font-semibold text-primary">Unknown Error</h2>
+              <div className="bg-subtle-1 h-px w-full" />
             </div>
 
-            <div className="bg-custom-background-80 rounded-md p-4">
-              <p className="text-sm text-custom-text-200">
+            <div className="rounded-md bg-layer-1 p-4">
+              <p className="text-13 text-secondary">
                 An unknown error occurred. Please try refreshing the page or contact support if the problem persists.
               </p>
             </div>
diff --git a/apps/web/app/error/index.tsx b/apps/web/app/error/index.tsx
index d7da7a8db..9c3712b6d 100644
--- a/apps/web/app/error/index.tsx
+++ b/apps/web/app/error/index.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // hooks
 import { useAppRouter } from "@/hooks/use-app-router";
 // layouts
diff --git a/apps/web/app/error/prod.tsx b/apps/web/app/error/prod.tsx
index 574294e54..a8d61829e 100644
--- a/apps/web/app/error/prod.tsx
+++ b/apps/web/app/error/prod.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useTheme } from "next-themes";
 // plane imports
 import { Button } from "@plane/propel/button";
@@ -39,35 +45,33 @@ export function ProdErrorComponent({ onGoHome }: ProdErrorComponentProps) {
 
   return (
     <DefaultLayout>
-      <div className="relative container mx-auto h-full w-full max-w-xl flex flex-col gap-2 items-center justify-center gap-y-6 bg-custom-background-100 text-center px-6">
+      <div className="relative container mx-auto flex h-full w-full max-w-xl flex-col items-center justify-center gap-2 gap-y-6 bg-surface-1 px-6 text-center">
         <div className="relative w-full">
           <img
             src={maintenanceModeImage}
             height="176"
             width="288"
             alt="ProjectSettingImg"
-            className="w-full h-full object-fill object-center"
+            className="h-full w-full object-fill object-center"
           />
         </div>
-        <div className="w-full relative flex flex-col gap-4 mt-4">
+        <div className="relative mt-4 flex w-full flex-col gap-4">
           <div className="flex flex-col gap-2.5">
-            <h1 className="text-xl font-semibold text-custom-text-100 text-left">
-              &#x1F6A7; Looks like something went wrong!
-            </h1>
-            <span className="text-base font-medium text-custom-text-200 text-left">
+            <h1 className="text-left text-18 font-semibold text-primary">&#x1F6A7; Looks like something went wrong!</h1>
+            <span className="text-left text-14 font-medium text-secondary">
               We track these errors automatically and working on getting things back up and running. If the problem
               persists feel free to contact us. In the meantime, try refreshing.
             </span>
           </div>
 
-          <div className="flex items-center justify-start gap-6 mt-1">
+          <div className="mt-1 flex items-center justify-start gap-6">
             {linkMap.map((link) => (
               <div key={link.key}>
                 <a
                   href={link.value}
                   target="_blank"
                   rel="noopener noreferrer"
-                  className="text-custom-primary-100 hover:underline text-sm"
+                  className="text-13 text-accent-primary hover:underline"
                 >
                   {link.label}
                 </a>
@@ -76,7 +80,7 @@ export function ProdErrorComponent({ onGoHome }: ProdErrorComponentProps) {
           </div>
 
           <div className="flex items-center justify-start gap-6">
-            <Button variant="primary" size="md" onClick={onGoHome}>
+            <Button variant="primary" size="lg" onClick={onGoHome}>
               Go to home
             </Button>
           </div>
diff --git a/apps/web/app/layout.tsx b/apps/web/app/layout.tsx
index 824b19b91..df5a8daf3 100644
--- a/apps/web/app/layout.tsx
+++ b/apps/web/app/layout.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import Script from "next/script";
 
 // styles
@@ -76,13 +82,8 @@ export default function RootLayout({ children }: { children: React.ReactNode })
         <div id="context-menu-portal" />
         <div id="editor-portal" />
         <AppProvider>
-          <div
-            className={cn(
-              "h-screen w-full overflow-hidden bg-custom-background-100 relative flex flex-col",
-              "app-container"
-            )}
-          >
-            <main className="w-full h-full overflow-hidden relative">{children}</main>
+          <div className={cn("relative flex h-screen w-full flex-col overflow-hidden", "app-container")}>
+            <main className="relative h-full w-full overflow-hidden">{children}</main>
           </div>
         </AppProvider>
       </body>
diff --git a/apps/web/app/not-found.tsx b/apps/web/app/not-found.tsx
index 0ee635460..13763951c 100644
--- a/apps/web/app/not-found.tsx
+++ b/apps/web/app/not-found.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import Link from "next/link";
 // ui
 import { Button } from "@plane/propel/button";
@@ -13,22 +19,22 @@ export const meta: Route.MetaFunction = () => [
 
 function PageNotFound() {
   return (
-    <div className={`h-screen w-full overflow-hidden bg-custom-background-100`}>
+    <div className={`h-screen w-full overflow-hidden bg-surface-1`}>
       <div className="grid h-full place-items-center p-4">
         <div className="space-y-8 text-center">
           <div className="relative mx-auto h-60 w-60 lg:h-80 lg:w-80">
             <img src={Image404} className="h-full w-full object-contain" alt="404- Page not found" />
           </div>
           <div className="space-y-2">
-            <h3 className="text-lg font-semibold">Oops! Something went wrong.</h3>
-            <p className="text-sm text-custom-text-200">
+            <h3 className="text-16 font-semibold">Oops! Something went wrong.</h3>
+            <p className="text-13 text-secondary">
               Sorry, the page you are looking for cannot be found. It may have been removed, had its name changed, or is
               temporarily unavailable.
             </p>
           </div>
           <Link href="/">
             <span className="flex justify-center">
-              <Button variant="neutral-primary" size="md">
+              <Button variant="secondary" size="lg">
                 Go to Home
               </Button>
             </span>
diff --git a/apps/web/app/provider.tsx b/apps/web/app/provider.tsx
index 7d6811052..016b66c0e 100644
--- a/apps/web/app/provider.tsx
+++ b/apps/web/app/provider.tsx
@@ -1,5 +1,11 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { lazy, Suspense } from "react";
-import { useTheme, ThemeProvider } from "next-themes";
+import { useTheme } from "next-themes";
 import { SWRConfig } from "swr";
 // Plane Imports
 import { WEB_SWR_CONFIG } from "@plane/constants";
@@ -7,58 +13,46 @@ import { TranslationProvider } from "@plane/i18n";
 import { Toast } from "@plane/propel/toast";
 // helpers
 import { resolveGeneralTheme } from "@plane/utils";
-// polyfills
-import "@/lib/polyfills";
-// progress bar
-import { AppProgressBar } from "@/lib/b-progress";
 // mobx store provider
 import { StoreProvider } from "@/lib/store-context";
-// wrappers
-import { InstanceWrapper } from "@/lib/wrappers/instance-wrapper";
 
 // lazy imports
+const AppProgressBar = lazy(function AppProgressBar() {
+  return import("@/lib/b-progress/AppProgressBar");
+});
+
 const StoreWrapper = lazy(function StoreWrapper() {
   return import("@/lib/wrappers/store-wrapper");
 });
 
-const PostHogProvider = lazy(function PostHogProvider() {
-  return import("@/lib/posthog-provider");
-});
-
-const ChatSupportModal = lazy(function ChatSupportModal() {
-  return import("@/components/global/chat-support-modal");
+const InstanceWrapper = lazy(function InstanceWrapper() {
+  return import("@/lib/wrappers/instance-wrapper");
 });
 
 export interface IAppProvider {
   children: React.ReactNode;
 }
 
-function ToastWithTheme() {
-  const { resolvedTheme } = useTheme();
-  return <Toast theme={resolveGeneralTheme(resolvedTheme)} />;
-}
-
 export function AppProvider(props: IAppProvider) {
   const { children } = props;
   // themes
+  const { resolvedTheme } = useTheme();
+
   return (
     <StoreProvider>
-      <ThemeProvider themes={["light", "dark", "light-contrast", "dark-contrast", "custom"]} defaultTheme="system">
+      <>
         <AppProgressBar />
         <TranslationProvider>
-          <ToastWithTheme />
+          <Toast theme={resolveGeneralTheme(resolvedTheme)} />
           <StoreWrapper>
             <InstanceWrapper>
               <Suspense>
-                <ChatSupportModal />
-                <PostHogProvider>
-                  <SWRConfig value={WEB_SWR_CONFIG}>{children}</SWRConfig>
-                </PostHogProvider>
+                <SWRConfig value={WEB_SWR_CONFIG}>{children}</SWRConfig>
               </Suspense>
             </InstanceWrapper>
           </StoreWrapper>
         </TranslationProvider>
-      </ThemeProvider>
+      </>
     </StoreProvider>
   );
 }
diff --git a/apps/web/app/root.tsx b/apps/web/app/root.tsx
index fe1c36765..e9f46d014 100644
--- a/apps/web/app/root.tsx
+++ b/apps/web/app/root.tsx
@@ -1,8 +1,14 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { ReactNode } from "react";
-import * as Sentry from "@sentry/react-router";
 import Script from "next/script";
 import { Links, Meta, Outlet, Scripts } from "react-router";
 import type { LinksFunction } from "react-router";
+import { ThemeProvider, useTheme } from "next-themes";
 // plane imports
 import { SITE_DESCRIPTION, SITE_NAME } from "@plane/constants";
 import { cn } from "@plane/utils";
@@ -14,12 +20,18 @@ import faviconIco from "@/app/assets/favicon/favicon.ico?url";
 import icon180 from "@/app/assets/icons/icon-180x180.png?url";
 import icon512 from "@/app/assets/icons/icon-512x512.png?url";
 import ogImage from "@/app/assets/og-image.png?url";
-import { LogoSpinner } from "@/components/common/logo-spinner";
 import globalStyles from "@/styles/globals.css?url";
 import type { Route } from "./+types/root";
+// components
+import { LogoSpinner } from "@/components/common/logo-spinner";
 // local
 import { CustomErrorComponent } from "./error";
 import { AppProvider } from "./provider";
+// fonts
+import "@fontsource-variable/inter";
+import interVariableWoff2 from "@fontsource-variable/inter/files/inter-latin-wght-normal.woff2?url";
+import "@fontsource/material-symbols-rounded";
+import "@fontsource/ibm-plex-mono";
 
 const APP_TITLE = "Plane | Simple, extensible, open-source project management tool.";
 
@@ -33,13 +45,20 @@ export const links: LinksFunction = () => [
   { rel: "apple-touch-icon", sizes: "512x512", href: icon512 },
   { rel: "manifest", href: "/manifest.json" },
   { rel: "stylesheet", href: globalStyles },
+  {
+    rel: "preload",
+    href: interVariableWoff2,
+    as: "font",
+    type: "font/woff2",
+    crossOrigin: "anonymous",
+  },
 ];
 
 export function Layout({ children }: { children: ReactNode }) {
   const isSessionRecorderEnabled = parseInt(process.env.VITE_ENABLE_SESSION_RECORDER || "0");
 
   return (
-    <html lang="en">
+    <html lang="en" suppressHydrationWarning>
       <head>
         <meta charSet="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
@@ -54,19 +73,12 @@ export function Layout({ children }: { children: ReactNode }) {
         <Meta />
         <Links />
       </head>
-      <body>
+      <body suppressHydrationWarning>
         <div id="context-menu-portal" />
         <div id="editor-portal" />
-        <AppProvider>
-          <div
-            className={cn(
-              "h-screen w-full overflow-hidden bg-custom-background-100 relative flex flex-col",
-              "app-container"
-            )}
-          >
-            <main className="w-full h-full overflow-hidden relative">{children}</main>
-          </div>
-        </AppProvider>
+        <ThemeProvider themes={["light", "dark", "light-contrast", "dark-contrast", "custom"]} defaultTheme="system">
+          {children}
+        </ThemeProvider>
         <Scripts />
         {!!isSessionRecorderEnabled && process.env.VITE_SESSION_RECORDER_KEY && (
           <Script id="clarity-tracking">
@@ -109,21 +121,30 @@ export const meta: Route.MetaFunction = () => [
 ];
 
 export default function Root() {
-  return <Outlet />;
+  return (
+    <AppProvider>
+      <div className={cn("relative flex h-screen w-full flex-col overflow-hidden bg-canvas", "desktop-app-container")}>
+        <main className="relative h-full w-full overflow-hidden">
+          <Outlet />
+        </main>
+      </div>
+    </AppProvider>
+  );
 }
 
 export function HydrateFallback() {
+  const { resolvedTheme } = useTheme();
+
+  // if we are on the server or the theme is not resolved, return an empty div
+  if (typeof window === "undefined" || resolvedTheme === undefined) return <div />;
+
   return (
-    <div className="relative flex h-screen w-full items-center justify-center">
+    <div className="relative flex h-screen w-full items-center justify-center bg-canvas">
       <LogoSpinner />
     </div>
   );
 }
 
 export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
-  if (error) {
-    Sentry.captureException(error);
-  }
-
   return <CustomErrorComponent error={error} />;
 }
diff --git a/apps/web/app/routes.ts b/apps/web/app/routes.ts
index 258993783..cdfea2ea1 100644
--- a/apps/web/app/routes.ts
+++ b/apps/web/app/routes.ts
@@ -1,76 +1,14 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { route } from "@react-router/dev/routes";
 import type { RouteConfigEntry } from "@react-router/dev/routes";
 import { coreRoutes } from "./routes/core";
 import { extendedRoutes } from "./routes/extended";
-
-/**
- * Merges two route configurations intelligently.
- * - Deep merges children when the same layout file exists in both arrays
- * - Deduplicates routes by file property, preferring extended over core
- * - Maintains order: core routes first, then extended routes at each level
- */
-function mergeRoutes(core: RouteConfigEntry[], extended: RouteConfigEntry[]): RouteConfigEntry[] {
-  // Step 1: Create a Map to track routes by file path
-  const routeMap = new Map<string, RouteConfigEntry>();
-
-  // Step 2: Process core routes first
-  for (const coreRoute of core) {
-    const fileKey = coreRoute.file;
-    routeMap.set(fileKey, coreRoute);
-  }
-
-  // Step 3: Process extended routes
-  for (const extendedRoute of extended) {
-    const fileKey = extendedRoute.file;
-
-    if (routeMap.has(fileKey)) {
-      // Route exists in both - need to merge
-      const coreRoute = routeMap.get(fileKey)!;
-
-      // Check if both have children (layouts that need deep merging)
-      if (coreRoute.children && extendedRoute.children) {
-        // Deep merge: recursively merge children
-        const mergedChildren = mergeRoutes(
-          Array.isArray(coreRoute.children) ? coreRoute.children : [],
-          Array.isArray(extendedRoute.children) ? extendedRoute.children : []
-        );
-        routeMap.set(fileKey, {
-          ...extendedRoute,
-          children: mergedChildren,
-        });
-      } else {
-        // No children or only one has children - prefer extended
-        routeMap.set(fileKey, extendedRoute);
-      }
-    } else {
-      // Route only exists in extended
-      routeMap.set(fileKey, extendedRoute);
-    }
-  }
-
-  // Step 4: Build final array maintaining order (core first, then extended-only)
-  const result: RouteConfigEntry[] = [];
-
-  // Add all core routes (now merged or original)
-  for (const coreRoute of core) {
-    const fileKey = coreRoute.file;
-    if (routeMap.has(fileKey)) {
-      result.push(routeMap.get(fileKey)!);
-      routeMap.delete(fileKey); // Remove so we don't add it again
-    }
-  }
-
-  // Add remaining extended-only routes
-  for (const extendedRoute of extended) {
-    const fileKey = extendedRoute.file;
-    if (routeMap.has(fileKey)) {
-      result.push(routeMap.get(fileKey)!);
-      routeMap.delete(fileKey);
-    }
-  }
-
-  return result;
-}
+import { mergeRoutes } from "./routes/helper";
 
 /**
  * Main Routes Configuration
diff --git a/apps/web/app/routes/core.ts b/apps/web/app/routes/core.ts
index ccb9d78d3..c9c82bd24 100644
--- a/apps/web/app/routes/core.ts
+++ b/apps/web/app/routes/core.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { index, layout, route } from "@react-router/dev/routes";
 import type { RouteConfig, RouteConfigEntry } from "@react-router/dev/routes";
 
@@ -278,34 +284,6 @@ export const coreRoutes: RouteConfigEntry[] = [
           ),
         ]),
 
-        // --------------------------------------------------------------------
-        // ACCOUNT SETTINGS
-        // --------------------------------------------------------------------
-
-        layout("./(all)/[workspaceSlug]/(settings)/settings/account/layout.tsx", [
-          route(":workspaceSlug/settings/account", "./(all)/[workspaceSlug]/(settings)/settings/account/page.tsx"),
-          route(
-            ":workspaceSlug/settings/account/activity",
-            "./(all)/[workspaceSlug]/(settings)/settings/account/activity/page.tsx"
-          ),
-          route(
-            ":workspaceSlug/settings/account/preferences",
-            "./(all)/[workspaceSlug]/(settings)/settings/account/preferences/page.tsx"
-          ),
-          route(
-            ":workspaceSlug/settings/account/notifications",
-            "./(all)/[workspaceSlug]/(settings)/settings/account/notifications/page.tsx"
-          ),
-          route(
-            ":workspaceSlug/settings/account/security",
-            "./(all)/[workspaceSlug]/(settings)/settings/account/security/page.tsx"
-          ),
-          route(
-            ":workspaceSlug/settings/account/api-tokens",
-            "./(all)/[workspaceSlug]/(settings)/settings/account/api-tokens/page.tsx"
-          ),
-        ]),
-
         // --------------------------------------------------------------------
         // PROJECT SETTINGS
         // --------------------------------------------------------------------
@@ -326,8 +304,24 @@ export const coreRoutes: RouteConfigEntry[] = [
             ),
             // Project Features
             route(
-              ":workspaceSlug/settings/projects/:projectId/features",
-              "./(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/features/page.tsx"
+              ":workspaceSlug/settings/projects/:projectId/features/cycles",
+              "./(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/features/cycles/page.tsx"
+            ),
+            route(
+              ":workspaceSlug/settings/projects/:projectId/features/modules",
+              "./(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/features/modules/page.tsx"
+            ),
+            route(
+              ":workspaceSlug/settings/projects/:projectId/features/views",
+              "./(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/features/views/page.tsx"
+            ),
+            route(
+              ":workspaceSlug/settings/projects/:projectId/features/pages",
+              "./(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/features/pages/page.tsx"
+            ),
+            route(
+              ":workspaceSlug/settings/projects/:projectId/features/intake",
+              "./(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/features/intake/page.tsx"
             ),
             // Project States
             route(
@@ -363,12 +357,8 @@ export const coreRoutes: RouteConfigEntry[] = [
     // PROFILE SETTINGS
     // --------------------------------------------------------------------
 
-    layout("./(all)/profile/layout.tsx", [
-      route("profile", "./(all)/profile/page.tsx"),
-      route("profile/activity", "./(all)/profile/activity/page.tsx"),
-      route("profile/appearance", "./(all)/profile/appearance/page.tsx"),
-      route("profile/notifications", "./(all)/profile/notifications/page.tsx"),
-      route("profile/security", "./(all)/profile/security/page.tsx"),
+    layout("./(all)/settings/profile/layout.tsx", [
+      route("settings/profile/:profileTabId", "./(all)/settings/profile/[profileTabId]/page.tsx"),
     ]),
   ]),
 
@@ -389,7 +379,7 @@ export const coreRoutes: RouteConfigEntry[] = [
   route(":workspaceSlug/analytics", "routes/redirects/core/analytics.tsx"),
 
   // API tokens redirect: /:workspaceSlug/settings/api-tokens
-  // → /:workspaceSlug/settings/account/api-tokens
+  // → /settings/profile/api-tokens
   route(":workspaceSlug/settings/api-tokens", "routes/redirects/core/api-tokens.tsx"),
 
   // Inbox redirect: /:workspaceSlug/projects/:projectId/inbox
@@ -406,4 +396,10 @@ export const coreRoutes: RouteConfigEntry[] = [
 
   // Register redirect
   route("register", "routes/redirects/core/register.tsx"),
+
+  // Profile settings redirects
+  route("profile/*", "routes/redirects/core/profile-settings.tsx"),
+
+  // Account settings redirects
+  route(":workspaceSlug/settings/account/*", "routes/redirects/core/workspace-account-settings.tsx"),
 ] satisfies RouteConfig;
diff --git a/apps/web/app/routes/extended.ts b/apps/web/app/routes/extended.ts
index bbc5aa4cc..452d214ad 100644
--- a/apps/web/app/routes/extended.ts
+++ b/apps/web/app/routes/extended.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { RouteConfigEntry } from "@react-router/dev/routes";
 
 export const extendedRoutes: RouteConfigEntry[] = [];
diff --git a/apps/web/app/routes/helper.ts b/apps/web/app/routes/helper.ts
new file mode 100644
index 000000000..74dcab50c
--- /dev/null
+++ b/apps/web/app/routes/helper.ts
@@ -0,0 +1,76 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { RouteConfigEntry } from "@react-router/dev/routes";
+
+/**
+ * Merges two route configurations intelligently.
+ * - Deep merges children when the same layout file exists in both arrays
+ * - Deduplicates routes by file property, preferring extended over core
+ * - Maintains order: core routes first, then extended routes at each level
+ */
+export function mergeRoutes(core: RouteConfigEntry[], extended: RouteConfigEntry[]): RouteConfigEntry[] {
+  // Step 1: Create a Map to track routes by file path
+  const routeMap = new Map<string, RouteConfigEntry>();
+
+  // Step 2: Process core routes first
+  for (const coreRoute of core) {
+    const fileKey = coreRoute.file;
+    routeMap.set(fileKey, coreRoute);
+  }
+
+  // Step 3: Process extended routes
+  for (const extendedRoute of extended) {
+    const fileKey = extendedRoute.file;
+
+    if (routeMap.has(fileKey)) {
+      // Route exists in both - need to merge
+      const coreRoute = routeMap.get(fileKey)!;
+
+      // Check if both have children (layouts that need deep merging)
+      if (coreRoute.children && extendedRoute.children) {
+        // Deep merge: recursively merge children
+        const mergedChildren = mergeRoutes(
+          Array.isArray(coreRoute.children) ? coreRoute.children : [],
+          Array.isArray(extendedRoute.children) ? extendedRoute.children : []
+        );
+        routeMap.set(fileKey, {
+          ...extendedRoute,
+          children: mergedChildren,
+        });
+      } else {
+        // No children or only one has children - prefer extended
+        routeMap.set(fileKey, extendedRoute);
+      }
+    } else {
+      // Route only exists in extended
+      routeMap.set(fileKey, extendedRoute);
+    }
+  }
+
+  // Step 4: Build final array maintaining order (core first, then extended-only)
+  const result: RouteConfigEntry[] = [];
+
+  // Add all core routes (now merged or original)
+  for (const coreRoute of core) {
+    const fileKey = coreRoute.file;
+    if (routeMap.has(fileKey)) {
+      result.push(routeMap.get(fileKey)!);
+      routeMap.delete(fileKey); // Remove so we don't add it again
+    }
+  }
+
+  // Add remaining extended-only routes
+  for (const extendedRoute of extended) {
+    const fileKey = extendedRoute.file;
+    if (routeMap.has(fileKey)) {
+      result.push(routeMap.get(fileKey)!);
+      routeMap.delete(fileKey);
+    }
+  }
+
+  return result;
+}
diff --git a/apps/web/app/routes/redirects/core/accounts-signup.tsx b/apps/web/app/routes/redirects/core/accounts-signup.tsx
index 5343e27be..be1ca73ab 100644
--- a/apps/web/app/routes/redirects/core/accounts-signup.tsx
+++ b/apps/web/app/routes/redirects/core/accounts-signup.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { redirect } from "react-router";
 
 export const clientLoader = () => {
diff --git a/apps/web/app/routes/redirects/core/analytics.tsx b/apps/web/app/routes/redirects/core/analytics.tsx
index 21bacf509..3cc7c81ef 100644
--- a/apps/web/app/routes/redirects/core/analytics.tsx
+++ b/apps/web/app/routes/redirects/core/analytics.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { redirect } from "react-router";
 import type { Route } from "./+types/analytics";
 
diff --git a/apps/web/app/routes/redirects/core/api-tokens.tsx b/apps/web/app/routes/redirects/core/api-tokens.tsx
index 68007aa41..9d070a167 100644
--- a/apps/web/app/routes/redirects/core/api-tokens.tsx
+++ b/apps/web/app/routes/redirects/core/api-tokens.tsx
@@ -1,9 +1,13 @@
-import { redirect } from "react-router";
-import type { Route } from "./+types/api-tokens";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
 
-export const clientLoader = ({ params }: Route.ClientLoaderArgs) => {
-  const { workspaceSlug } = params;
-  throw redirect(`/${workspaceSlug}/settings/account/api-tokens/`);
+import { redirect } from "react-router";
+
+export const clientLoader = () => {
+  throw redirect(`/settings/profile/api-tokens/`);
 };
 
 export default function ApiTokens() {
diff --git a/apps/web/app/routes/redirects/core/inbox.tsx b/apps/web/app/routes/redirects/core/inbox.tsx
index bf2bd9a50..2d71229a9 100644
--- a/apps/web/app/routes/redirects/core/inbox.tsx
+++ b/apps/web/app/routes/redirects/core/inbox.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { redirect } from "react-router";
 import type { Route } from "./+types/inbox";
 
diff --git a/apps/web/app/routes/redirects/core/index.ts b/apps/web/app/routes/redirects/core/index.ts
index efd3ae40f..e1eaeca46 100644
--- a/apps/web/app/routes/redirects/core/index.ts
+++ b/apps/web/app/routes/redirects/core/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { route } from "@react-router/dev/routes";
 import type { RouteConfigEntry } from "@react-router/dev/routes";
 
@@ -14,7 +20,7 @@ export const coreRedirectRoutes: RouteConfigEntry[] = [
   route(":workspaceSlug/analytics", "routes/redirects/core/analytics.tsx"),
 
   // API tokens redirect: /:workspaceSlug/settings/api-tokens
-  // → /:workspaceSlug/settings/account/api-tokens
+  // → /settings/profile/api-tokens
   route(":workspaceSlug/settings/api-tokens", "routes/redirects/core/api-tokens.tsx"),
 
   // Inbox redirect: /:workspaceSlug/projects/:projectId/inbox
diff --git a/apps/web/app/routes/redirects/core/login.tsx b/apps/web/app/routes/redirects/core/login.tsx
index ed49c8ca3..d591a33fd 100644
--- a/apps/web/app/routes/redirects/core/login.tsx
+++ b/apps/web/app/routes/redirects/core/login.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { redirect } from "react-router";
 
 export const clientLoader = () => {
diff --git a/apps/web/app/routes/redirects/core/profile-settings.tsx b/apps/web/app/routes/redirects/core/profile-settings.tsx
new file mode 100644
index 000000000..82362df47
--- /dev/null
+++ b/apps/web/app/routes/redirects/core/profile-settings.tsx
@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { redirect } from "react-router";
+import type { Route } from "./+types/profile-settings";
+
+export const clientLoader = ({ params, request }: Route.ClientLoaderArgs) => {
+  const searchParams = new URL(request.url).searchParams;
+  const splat = params["*"] || "";
+  throw redirect(`/settings/profile/${splat || "general"}?${searchParams.toString()}`);
+};
+
+export default function ProfileSettings() {
+  return null;
+}
diff --git a/apps/web/app/routes/redirects/core/project-settings.tsx b/apps/web/app/routes/redirects/core/project-settings.tsx
index da14c515a..db74d57cc 100644
--- a/apps/web/app/routes/redirects/core/project-settings.tsx
+++ b/apps/web/app/routes/redirects/core/project-settings.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { redirect } from "react-router";
 import type { Route } from "./+types/project-settings";
 
diff --git a/apps/web/app/routes/redirects/core/register.tsx b/apps/web/app/routes/redirects/core/register.tsx
index 791040495..bdcb453f9 100644
--- a/apps/web/app/routes/redirects/core/register.tsx
+++ b/apps/web/app/routes/redirects/core/register.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { redirect } from "react-router";
 
 export const clientLoader = () => {
diff --git a/apps/web/app/routes/redirects/core/sign-in.tsx b/apps/web/app/routes/redirects/core/sign-in.tsx
index 83a91a3eb..5016e254e 100644
--- a/apps/web/app/routes/redirects/core/sign-in.tsx
+++ b/apps/web/app/routes/redirects/core/sign-in.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { redirect } from "react-router";
 
 export const clientLoader = () => {
diff --git a/apps/web/app/routes/redirects/core/signin.tsx b/apps/web/app/routes/redirects/core/signin.tsx
index e440e8399..f557230de 100644
--- a/apps/web/app/routes/redirects/core/signin.tsx
+++ b/apps/web/app/routes/redirects/core/signin.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { redirect } from "react-router";
 
 export const clientLoader = () => {
diff --git a/apps/web/app/routes/redirects/core/workspace-account-settings.tsx b/apps/web/app/routes/redirects/core/workspace-account-settings.tsx
new file mode 100644
index 000000000..2e44a5bda
--- /dev/null
+++ b/apps/web/app/routes/redirects/core/workspace-account-settings.tsx
@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { redirect } from "react-router";
+import type { Route } from "./+types/workspace-account-settings";
+
+export const clientLoader = ({ params, request }: Route.ClientLoaderArgs) => {
+  const searchParams = new URL(request.url).searchParams;
+  const splat = params["*"] || "";
+  throw redirect(`/settings/profile/${splat || "general"}?${searchParams.toString()}`);
+};
+
+export default function WorkspaceAccountSettings() {
+  return null;
+}
diff --git a/apps/web/app/routes/redirects/extended/index.ts b/apps/web/app/routes/redirects/extended/index.ts
index 7f2c496e1..7b4da929d 100644
--- a/apps/web/app/routes/redirects/extended/index.ts
+++ b/apps/web/app/routes/redirects/extended/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { RouteConfigEntry } from "@react-router/dev/routes";
 
 export const extendedRedirectRoutes: RouteConfigEntry[] = [];
diff --git a/apps/web/app/routes/redirects/index.ts b/apps/web/app/routes/redirects/index.ts
index 4c78ea354..b736b22f4 100644
--- a/apps/web/app/routes/redirects/index.ts
+++ b/apps/web/app/routes/redirects/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { RouteConfigEntry } from "@react-router/dev/routes";
 import { coreRedirectRoutes } from "./core";
 import { extendedRedirectRoutes } from "./extended";
diff --git a/apps/web/ce/components/active-cycles/index.ts b/apps/web/ce/components/active-cycles/index.ts
index 1efe34c51..d98033459 100644
--- a/apps/web/ce/components/active-cycles/index.ts
+++ b/apps/web/ce/components/active-cycles/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./root";
diff --git a/apps/web/ce/components/active-cycles/root.tsx b/apps/web/ce/components/active-cycles/root.tsx
index ae0aa9b1f..81805656b 100644
--- a/apps/web/ce/components/active-cycles/root.tsx
+++ b/apps/web/ce/components/active-cycles/root.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // local imports
 import { WorkspaceActiveCyclesUpgrade } from "./workspace-active-cycles-upgrade";
 
diff --git a/apps/web/ce/components/active-cycles/workspace-active-cycles-upgrade.tsx b/apps/web/ce/components/active-cycles/workspace-active-cycles-upgrade.tsx
index 316245fd3..ff1ee2543 100644
--- a/apps/web/ce/components/active-cycles/workspace-active-cycles-upgrade.tsx
+++ b/apps/web/ce/components/active-cycles/workspace-active-cycles-upgrade.tsx
@@ -1,9 +1,16 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
-import { AlertOctagon, BarChart4, CircleDashed, Folder, Microscope, Search } from "lucide-react";
+import { AlertOctagon, BarChart4, CircleDashed, Folder, Microscope } from "lucide-react";
 // plane imports
 import { MARKETING_PRICING_PAGE_LINK } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { getButtonStyling } from "@plane/propel/button";
+import { SearchIcon } from "@plane/propel/icons";
 import { ContentWrapper } from "@plane/ui";
 import { cn } from "@plane/utils";
 // assets
@@ -50,7 +57,7 @@ export const WORKSPACE_ACTIVE_CYCLES_DETAILS = [
     key: "zoom_into_cycles_that_need_attention",
     title: "Zoom into cycles that need attention. ",
     description: "Investigate the state of any cycle that doesn’t conform to expectations in one click.",
-    icon: Search,
+    icon: SearchIcon,
   },
   {
     key: "stay_ahead_of_blockers",
@@ -74,51 +81,51 @@ export const WorkspaceActiveCyclesUpgrade = observer(function WorkspaceActiveCyc
     <ContentWrapper className="gap-10">
       <div
         className={cn("item-center flex min-h-[25rem] justify-between rounded-xl", {
-          "bg-gradient-to-l from-[#CFCFCF]  to-[#212121]": userProfile?.theme.theme === "dark",
+          "bg-gradient-to-l from-[#CFCFCF] to-[#212121]": userProfile?.theme.theme === "dark",
           "bg-gradient-to-l from-[#3b5ec6] to-[#f5f7fe]": userProfile?.theme.theme === "light",
         })}
       >
         <div className="relative flex flex-col justify-center gap-7 px-14 lg:w-1/2">
           <div className="flex max-w-64 flex-col gap-2">
-            <h2 className="text-2xl font-semibold">{t("on_demand_snapshots_of_all_your_cycles")}</h2>
-            <p className="text-base font-medium text-custom-text-300">{t("active_cycles_description")}</p>
+            <h2 className="text-20 font-semibold">{t("on_demand_snapshots_of_all_your_cycles")}</h2>
+            <p className="text-14 font-medium text-tertiary">{t("active_cycles_description")}</p>
           </div>
           <div className="flex items-center gap-3">
             <a
-              className={`${getButtonStyling("primary", "md")} cursor-pointer`}
+              className={`${getButtonStyling("primary", "base")} cursor-pointer`}
               href={MARKETING_PRICING_PAGE_LINK}
               target="_blank"
               rel="noreferrer"
             >
-              <ProIcon className="h-3.5 w-3.5 text-white" />
+              <ProIcon className="h-3.5 w-3.5 text-on-color" />
               {t("upgrade")}
             </a>
           </div>
-          <span className="absolute left-0 top-0">
+          <span className="absolute top-0 left-0">
             <img
               src={isDarkMode ? ctaL1Dark : ctaL1Light}
-              className="w-[125px] h-[125px] object-contain rounded-xl"
+              className="h-[125px] w-[125px] rounded-xl object-contain"
               alt="l-1"
             />
           </span>
         </div>
         <div className="relative hidden w-1/2 lg:block">
-          <span className="absolute bottom-0 right-0">
-            <img src={isDarkMode ? ctaR1Dark : ctaR1Light} className="w-full h-full object-contain" alt="r-1" />
+          <span className="absolute right-0 bottom-0">
+            <img src={isDarkMode ? ctaR1Dark : ctaR1Light} className="h-full w-full object-contain" alt="r-1" />
           </span>
-          <span className="absolute -bottom-16 right-1/2 rounded-xl">
-            <img src={isDarkMode ? ctaR2Dark : ctaR2Light} className="w-full h-full object-contain" alt="r-2" />
+          <span className="absolute right-1/2 -bottom-16 rounded-xl">
+            <img src={isDarkMode ? ctaR2Dark : ctaR2Light} className="h-full w-full object-contain" alt="r-2" />
           </span>
         </div>
       </div>
       <div className="grid h-full grid-cols-1 gap-5 pb-8 lg:grid-cols-2 xl:grid-cols-3">
         {WORKSPACE_ACTIVE_CYCLES_DETAILS.map((item) => (
-          <div key={item.title} className="flex min-h-32 w-full flex-col gap-2 rounded-md bg-custom-background-80 p-4">
-            <div className="flex gap-2 justify-between">
+          <div key={item.title} className="flex min-h-32 w-full flex-col gap-2 rounded-md bg-layer-1 p-4">
+            <div className="flex justify-between gap-2">
               <h3 className="font-medium">{t(item.key)}</h3>
-              <item.icon className="mt-1 h-4 w-4 text-blue-500" />
+              <item.icon className="text-blue-500 mt-1 h-4 w-4" />
             </div>
-            <span className="text-sm text-custom-text-300">{t(`${item.key}_description`)}</span>
+            <span className="text-13 text-tertiary">{t(`${item.key}_description`)}</span>
           </div>
         ))}
       </div>
diff --git a/apps/web/ce/components/analytics/tabs.tsx b/apps/web/ce/components/analytics/tabs.tsx
index 3cca97399..1fdbc0cbc 100644
--- a/apps/web/ce/components/analytics/tabs.tsx
+++ b/apps/web/ce/components/analytics/tabs.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { AnalyticsTab } from "@plane/types";
 import { Overview } from "@/components/analytics/overview";
 import { WorkItems } from "@/components/analytics/work-items";
diff --git a/apps/web/ce/components/analytics/use-analytics-tabs.tsx b/apps/web/ce/components/analytics/use-analytics-tabs.tsx
index 71f1ab15f..d022d74f0 100644
--- a/apps/web/ce/components/analytics/use-analytics-tabs.tsx
+++ b/apps/web/ce/components/analytics/use-analytics-tabs.tsx
@@ -1,8 +1,14 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useMemo } from "react";
 import { useTranslation } from "@plane/i18n";
 import { getAnalyticsTabs } from "./tabs";
 
-export const useAnalyticsTabs = (workspaceSlug: string) => {
+export const useAnalyticsTabs = (_workspaceSlug: string) => {
   const { t } = useTranslation();
 
   const analyticsTabs = useMemo(() => getAnalyticsTabs(t), [t]);
diff --git a/apps/web/ce/components/app-rail/app-rail-hoc.tsx b/apps/web/ce/components/app-rail/app-rail-hoc.tsx
index 63d13e5c2..82f25e1f6 100644
--- a/apps/web/ce/components/app-rail/app-rail-hoc.tsx
+++ b/apps/web/ce/components/app-rail/app-rail-hoc.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // hoc/withDockItems.tsx
 import React from "react";
 import { observer } from "mobx-react";
diff --git a/apps/web/ce/components/app-rail/index.ts b/apps/web/ce/components/app-rail/index.ts
index c29a9bf13..8b6ba42a4 100644
--- a/apps/web/ce/components/app-rail/index.ts
+++ b/apps/web/ce/components/app-rail/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./app-rail-hoc";
diff --git a/apps/web/ce/components/automations/list/wrapper.tsx b/apps/web/ce/components/automations/list/wrapper.tsx
index 80b819aa0..f884b403f 100644
--- a/apps/web/ce/components/automations/list/wrapper.tsx
+++ b/apps/web/ce/components/automations/list/wrapper.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 type Props = {
   projectId: string;
   workspaceSlug: string;
diff --git a/apps/web/ce/components/automations/root.tsx b/apps/web/ce/components/automations/root.tsx
index 9dbb44942..1baeeb8b0 100644
--- a/apps/web/ce/components/automations/root.tsx
+++ b/apps/web/ce/components/automations/root.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 
 export type TCustomAutomationsRootProps = {
diff --git a/apps/web/ce/components/breadcrumbs/common.tsx b/apps/web/ce/components/breadcrumbs/common.tsx
index 397de3db5..9040cb21b 100644
--- a/apps/web/ce/components/breadcrumbs/common.tsx
+++ b/apps/web/ce/components/breadcrumbs/common.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // local components
 import { useProjectNavigationPreferences } from "@/hooks/use-navigation-preferences";
 import { ProjectBreadcrumb } from "./project";
@@ -12,6 +18,6 @@ export function CommonProjectBreadcrumbs(props: TCommonProjectBreadcrumbProps) {
   // preferences
   const { preferences: projectPreferences } = useProjectNavigationPreferences();
 
-  if (projectPreferences.navigationMode === "horizontal") return null;
+  if (projectPreferences.navigationMode === "TABBED") return null;
   return <ProjectBreadcrumb workspaceSlug={workspaceSlug} projectId={projectId} />;
 }
diff --git a/apps/web/ce/components/breadcrumbs/project-feature.tsx b/apps/web/ce/components/breadcrumbs/project-feature.tsx
index 51d26d8ea..4b076a7ab 100644
--- a/apps/web/ce/components/breadcrumbs/project-feature.tsx
+++ b/apps/web/ce/components/breadcrumbs/project-feature.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { ReactNode } from "react";
 import { observer } from "mobx-react";
 // plane imports
diff --git a/apps/web/ce/components/breadcrumbs/project.tsx b/apps/web/ce/components/breadcrumbs/project.tsx
index fc17a5eb1..9793ecccc 100644
--- a/apps/web/ce/components/breadcrumbs/project.tsx
+++ b/apps/web/ce/components/breadcrumbs/project.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import { Logo } from "@plane/propel/emoji-icon-picker";
 import { ProjectIcon } from "@plane/propel/icons";
@@ -49,7 +55,7 @@ export const ProjectBreadcrumb = observer(function ProjectBreadcrumb(props: TPro
 
   // helpers
   const renderIcon = (projectDetails: TProject) => (
-    <span className="grid place-items-center flex-shrink-0 size-4">
+    <span className="grid size-4 flex-shrink-0 place-items-center">
       <Logo logo={projectDetails.logo_props} size={14} />
     </span>
   );
diff --git a/apps/web/ce/components/browse/workItem-detail.tsx b/apps/web/ce/components/browse/workItem-detail.tsx
new file mode 100644
index 000000000..b56a9d940
--- /dev/null
+++ b/apps/web/ce/components/browse/workItem-detail.tsx
@@ -0,0 +1,29 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import type { TIssue } from "@plane/types";
+import { IssueDetailRoot } from "@/components/issues/issue-detail/root";
+
+export type TWorkItemDetailRoot = {
+  workspaceSlug: string;
+  projectId: string;
+  issueId: string;
+  issue: TIssue | undefined;
+};
+
+export const WorkItemDetailRoot = observer(function WorkItemDetailRoot(props: TWorkItemDetailRoot) {
+  const { workspaceSlug, projectId, issueId, issue } = props;
+
+  return (
+    <IssueDetailRoot
+      workspaceSlug={workspaceSlug.toString()}
+      projectId={projectId.toString()}
+      issueId={issueId.toString()}
+      is_archived={!!issue?.archived_at}
+    />
+  );
+});
diff --git a/apps/web/ce/components/command-palette/actions/index.ts b/apps/web/ce/components/command-palette/actions/index.ts
index c7f1e122d..a6961e238 100644
--- a/apps/web/ce/components/command-palette/actions/index.ts
+++ b/apps/web/ce/components/command-palette/actions/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./work-item-actions";
diff --git a/apps/web/ce/components/command-palette/actions/work-item-actions/change-state-list.tsx b/apps/web/ce/components/command-palette/actions/work-item-actions/change-state-list.tsx
index 091aaea3f..69e4aed88 100644
--- a/apps/web/ce/components/command-palette/actions/work-item-actions/change-state-list.tsx
+++ b/apps/web/ce/components/command-palette/actions/work-item-actions/change-state-list.tsx
@@ -1,9 +1,14 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { Command } from "cmdk";
 import { observer } from "mobx-react";
-import { Check } from "lucide-react";
-// plane imports
 import { EIconSize } from "@plane/constants";
-import { StateGroupIcon } from "@plane/propel/icons";
+// plane imports
+import { CheckIcon, StateGroupIcon } from "@plane/propel/icons";
 import { Spinner } from "@plane/ui";
 // store hooks
 import { useProjectState } from "@/hooks/store/use-project-state";
@@ -36,7 +41,7 @@ export const ChangeWorkItemStateList = observer(function ChangeWorkItemStateList
                 />
                 <p>{state.name}</p>
               </div>
-              <div>{state.id === currentStateId && <Check className="h-3 w-3" />}</div>
+              <div>{state.id === currentStateId && <CheckIcon className="h-3 w-3" />}</div>
             </Command.Item>
           ))
         ) : (
diff --git a/apps/web/ce/components/command-palette/actions/work-item-actions/index.ts b/apps/web/ce/components/command-palette/actions/work-item-actions/index.ts
index ac7f8aa86..3f2f8c071 100644
--- a/apps/web/ce/components/command-palette/actions/work-item-actions/index.ts
+++ b/apps/web/ce/components/command-palette/actions/work-item-actions/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./change-state-list";
diff --git a/apps/web/ce/components/command-palette/helpers.tsx b/apps/web/ce/components/command-palette/helpers.tsx
index fee3166e8..d69157922 100644
--- a/apps/web/ce/components/command-palette/helpers.tsx
+++ b/apps/web/ce/components/command-palette/helpers.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { LayoutGrid } from "lucide-react";
 // plane imports
 import { CycleIcon, ModuleIcon, PageIcon, ProjectIcon, ViewsIcon } from "@plane/propel/icons";
@@ -26,7 +32,7 @@ export const commandGroups: TCommandGroups = {
     icon: <CycleIcon className="h-3 w-3" />,
     itemName: (cycle: IWorkspaceDefaultSearchResult) => (
       <h6>
-        <span className="text-xs text-custom-text-300">{cycle.project__identifier}</span> {cycle.name}
+        <span className="text-11 text-tertiary">{cycle.project__identifier}</span> {cycle.name}
       </h6>
     ),
     path: (cycle: IWorkspaceDefaultSearchResult) =>
@@ -42,7 +48,7 @@ export const commandGroups: TCommandGroups = {
           issueTypeId={issue.type_id}
           projectIdentifier={issue.project__identifier}
           issueSequenceId={issue.sequence_id}
-          textContainerClassName="text-xs"
+          size="xs"
         />{" "}
         {issue.name}
       </div>
@@ -61,7 +67,7 @@ export const commandGroups: TCommandGroups = {
     icon: <ViewsIcon className="h-3 w-3" />,
     itemName: (view: IWorkspaceDefaultSearchResult) => (
       <h6>
-        <span className="text-xs text-custom-text-300">{view.project__identifier}</span> {view.name}
+        <span className="text-11 text-tertiary">{view.project__identifier}</span> {view.name}
       </h6>
     ),
     path: (view: IWorkspaceDefaultSearchResult) =>
@@ -72,7 +78,7 @@ export const commandGroups: TCommandGroups = {
     icon: <ModuleIcon className="h-3 w-3" />,
     itemName: (module: IWorkspaceDefaultSearchResult) => (
       <h6>
-        <span className="text-xs text-custom-text-300">{module.project__identifier}</span> {module.name}
+        <span className="text-11 text-tertiary">{module.project__identifier}</span> {module.name}
       </h6>
     ),
     path: (module: IWorkspaceDefaultSearchResult) =>
@@ -83,7 +89,7 @@ export const commandGroups: TCommandGroups = {
     icon: <PageIcon className="h-3 w-3" />,
     itemName: (page: IWorkspacePageSearchResult) => (
       <h6>
-        <span className="text-xs text-custom-text-300">{page.project__identifiers?.[0]}</span> {page.name}
+        <span className="text-11 text-tertiary">{page.project__identifiers?.[0]}</span> {page.name}
       </h6>
     ),
     path: (page: IWorkspacePageSearchResult, projectId: string | undefined) => {
diff --git a/apps/web/ce/components/command-palette/index.ts b/apps/web/ce/components/command-palette/index.ts
index cb220b2bd..128f77fb1 100644
--- a/apps/web/ce/components/command-palette/index.ts
+++ b/apps/web/ce/components/command-palette/index.ts
@@ -1,2 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./actions";
 export * from "./helpers";
diff --git a/apps/web/ce/components/command-palette/modals/project-level.tsx b/apps/web/ce/components/command-palette/modals/project-level.tsx
index baf430f55..e01b002ef 100644
--- a/apps/web/ce/components/command-palette/modals/project-level.tsx
+++ b/apps/web/ce/components/command-palette/modals/project-level.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 // components
 import { CycleCreateUpdateModal } from "@/components/cycles/modal";
diff --git a/apps/web/ce/components/command-palette/modals/work-item-level.tsx b/apps/web/ce/components/command-palette/modals/work-item-level.tsx
index 8f71596c7..fc83af463 100644
--- a/apps/web/ce/components/command-palette/modals/work-item-level.tsx
+++ b/apps/web/ce/components/command-palette/modals/work-item-level.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // plane imports
diff --git a/apps/web/ce/components/command-palette/modals/workspace-level.tsx b/apps/web/ce/components/command-palette/modals/workspace-level.tsx
index 6a82d54e9..e07f5d1a3 100644
--- a/apps/web/ce/components/command-palette/modals/workspace-level.tsx
+++ b/apps/web/ce/components/command-palette/modals/workspace-level.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 // components
 import { CreateProjectModal } from "@/components/project/create-project-modal";
diff --git a/apps/web/ce/components/command-palette/power-k/constants.ts b/apps/web/ce/components/command-palette/power-k/constants.ts
index 3b2a051c2..870a4f46b 100644
--- a/apps/web/ce/components/command-palette/power-k/constants.ts
+++ b/apps/web/ce/components/command-palette/power-k/constants.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // core
 import type { TPowerKModalPageDetails } from "@/components/power-k/ui/modal/constants";
 // local imports
diff --git a/apps/web/ce/components/command-palette/power-k/context-detector.ts b/apps/web/ce/components/command-palette/power-k/context-detector.ts
index e84ca20b8..42dcc201a 100644
--- a/apps/web/ce/components/command-palette/power-k/context-detector.ts
+++ b/apps/web/ce/components/command-palette/power-k/context-detector.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { Params } from "react-router";
 // local imports
 import type { TPowerKContextTypeExtended } from "./types";
diff --git a/apps/web/ce/components/command-palette/power-k/hooks/use-extended-context-indicator.ts b/apps/web/ce/components/command-palette/power-k/hooks/use-extended-context-indicator.ts
index e92e54e2e..e24bc08aa 100644
--- a/apps/web/ce/components/command-palette/power-k/hooks/use-extended-context-indicator.ts
+++ b/apps/web/ce/components/command-palette/power-k/hooks/use-extended-context-indicator.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // local imports
 import type { TPowerKContextType } from "@/components/power-k/core/types";
 
diff --git a/apps/web/ce/components/command-palette/power-k/pages/context-based/index.ts b/apps/web/ce/components/command-palette/power-k/pages/context-based/index.ts
index 1efe34c51..d98033459 100644
--- a/apps/web/ce/components/command-palette/power-k/pages/context-based/index.ts
+++ b/apps/web/ce/components/command-palette/power-k/pages/context-based/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./root";
diff --git a/apps/web/ce/components/command-palette/power-k/pages/context-based/root.tsx b/apps/web/ce/components/command-palette/power-k/pages/context-based/root.tsx
index 12833d9df..1cac3d3f0 100644
--- a/apps/web/ce/components/command-palette/power-k/pages/context-based/root.tsx
+++ b/apps/web/ce/components/command-palette/power-k/pages/context-based/root.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // components
 import type { TPowerKCommandConfig } from "@/components/power-k/core/types";
 import type { ContextBasedActionsProps, TContextEntityMap } from "@/components/power-k/ui/pages/context-based";
diff --git a/apps/web/ce/components/command-palette/power-k/pages/context-based/work-item/state-menu-item.tsx b/apps/web/ce/components/command-palette/power-k/pages/context-based/work-item/state-menu-item.tsx
index 2478fdf4f..3188e1b42 100644
--- a/apps/web/ce/components/command-palette/power-k/pages/context-based/work-item/state-menu-item.tsx
+++ b/apps/web/ce/components/command-palette/power-k/pages/context-based/work-item/state-menu-item.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 // plane types
 import { StateGroupIcon } from "@plane/propel/icons";
@@ -23,7 +29,7 @@ export const PowerKProjectStatesMenuItems = observer(function PowerKProjectState
       {states.map((state) => (
         <PowerKModalCommandItem
           key={state.id}
-          iconNode={<StateGroupIcon stateGroup={state.group} color={state.color} className="shrink-0 size-3.5" />}
+          iconNode={<StateGroupIcon stateGroup={state.group} color={state.color} className="size-3.5 shrink-0" />}
           label={state.name}
           isSelected={state.id === selectedStateId}
           onSelect={() => handleSelect(state.id)}
diff --git a/apps/web/ce/components/command-palette/power-k/search/no-results-command.tsx b/apps/web/ce/components/command-palette/power-k/search/no-results-command.tsx
index 789facdfe..af4debf75 100644
--- a/apps/web/ce/components/command-palette/power-k/search/no-results-command.tsx
+++ b/apps/web/ce/components/command-palette/power-k/search/no-results-command.tsx
@@ -1,7 +1,13 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { Command } from "cmdk";
-import { Search } from "lucide-react";
-// plane imports
 import { useTranslation } from "@plane/i18n";
+import { SearchIcon } from "@plane/propel/icons";
+// plane imports
 // components
 import type { TPowerKContext } from "@/components/power-k/core/types";
 // plane web imports
@@ -21,12 +27,12 @@ export function PowerKModalNoSearchResultsCommand(props: TPowerKModalNoSearchRes
   return (
     <Command.Group>
       <PowerKModalCommandItem
-        icon={Search}
+        icon={SearchIcon}
         value="no-results"
         label={
           <p className="flex items-center gap-2">
             {t("power_k.search_menu.no_results")}{" "}
-            <span className="shrink-0 text-sm text-custom-text-300">{t("power_k.search_menu.clear_search")}</span>
+            <span className="shrink-0 text-13 text-tertiary">{t("power_k.search_menu.clear_search")}</span>
           </p>
         }
         onSelect={() => updateSearchTerm("")}
diff --git a/apps/web/ce/components/command-palette/power-k/search/search-results-map.tsx b/apps/web/ce/components/command-palette/power-k/search/search-results-map.tsx
index 90d5b5f20..c137f6f77 100644
--- a/apps/web/ce/components/command-palette/power-k/search/search-results-map.tsx
+++ b/apps/web/ce/components/command-palette/power-k/search/search-results-map.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // components
 import type { TPowerKSearchResultGroupDetails } from "@/components/power-k/ui/modal/search-results-map";
 // local imports
diff --git a/apps/web/ce/components/command-palette/power-k/types.ts b/apps/web/ce/components/command-palette/power-k/types.ts
index 4e497f8b8..9d0086f70 100644
--- a/apps/web/ce/components/command-palette/power-k/types.ts
+++ b/apps/web/ce/components/command-palette/power-k/types.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export type TPowerKContextTypeExtended = never;
 
 export type TPowerKPageTypeExtended = never;
diff --git a/apps/web/ce/components/comments/comment-block.tsx b/apps/web/ce/components/comments/comment-block.tsx
index becc8acb4..c08454e96 100644
--- a/apps/web/ce/components/comments/comment-block.tsx
+++ b/apps/web/ce/components/comments/comment-block.tsx
@@ -1,78 +1,50 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { ReactNode } from "react";
 import { useRef } from "react";
 import { observer } from "mobx-react";
 // plane imports
-import { useTranslation } from "@plane/i18n";
+import { CommentReplyIcon } from "@plane/propel/icons";
 import type { TIssueComment } from "@plane/types";
-import { Avatar, Tooltip } from "@plane/ui";
-import { calculateTimeAgo, cn, getFileURL, renderFormattedDate, renderFormattedTime } from "@plane/utils";
+import { cn } from "@plane/utils";
 // hooks
-import { useMember } from "@/hooks/store/use-member";
 
 type TCommentBlock = {
   comment: TIssueComment;
   ends: "top" | "bottom" | undefined;
-  quickActions: ReactNode;
   children: ReactNode;
 };
 
 export const CommentBlock = observer(function CommentBlock(props: TCommentBlock) {
-  const { comment, ends, quickActions, children } = props;
-  // refs
+  const { comment, ends, children } = props;
   const commentBlockRef = useRef<HTMLDivElement>(null);
-  // store hooks
-  const { getUserDetails } = useMember();
-  // derived values
-  const userDetails = getUserDetails(comment?.actor);
-  // translation
-  const { t } = useTranslation();
-
-  const displayName = comment?.actor_detail?.is_bot
-    ? comment?.actor_detail?.first_name + ` ${t("bot")}`
-    : (userDetails?.display_name ?? comment?.actor_detail?.display_name);
-
-  const avatarUrl = userDetails?.avatar_url ?? comment?.actor_detail?.avatar_url;
 
   if (!comment) return null;
-
   return (
     <div
+      id={comment.id}
       className={`relative flex gap-3 ${ends === "top" ? `pb-2` : ends === "bottom" ? `pt-2` : `py-2`}`}
       ref={commentBlockRef}
     >
       <div
-        className="absolute left-[13px] top-0 bottom-0 w-0.5 transition-border duration-1000 bg-custom-background-80"
+        className="transition-border absolute top-0 bottom-0 left-[13px] w-px bg-layer-3 duration-1000"
         aria-hidden
       />
       <div
         className={cn(
-          "flex-shrink-0 relative w-7 h-6 rounded-full transition-border duration-1000 flex justify-center items-center z-[3] uppercase font-medium"
+          "transition-border relative z-[3] flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-lg border border-subtle bg-layer-2 uppercase shadow-raised-100 duration-1000"
         )}
       >
-        <Avatar size="base" name={displayName} src={getFileURL(avatarUrl)} className="flex-shrink-0" />
+        <CommentReplyIcon width={14} height={14} className="text-secondary" aria-hidden="true" />
       </div>
-      <div className="flex flex-col gap-3 truncate flex-grow">
-        <div className="flex w-full gap-2">
-          <div className="flex-1 flex flex-wrap items-center gap-1">
-            <div className="flex items-center gap-1">
-              <span className="text-xs font-medium">{displayName}</span>
-            </div>
-            <div className="text-xs text-custom-text-300">
-              commented{" "}
-              <Tooltip
-                tooltipContent={`${renderFormattedDate(comment.created_at)} at ${renderFormattedTime(comment.created_at)}`}
-                position="bottom"
-              >
-                <span className="text-custom-text-350">
-                  {calculateTimeAgo(comment.created_at)}
-                  {comment.edited_at && ` (${t("edited")})`}
-                </span>
-              </Tooltip>
-            </div>
-          </div>
-          <div className="flex-shrink-0 ">{quickActions}</div>
+      <div className="flex flex-grow flex-col gap-3 truncate">
+        <div className="mb-2 rounded-lg border border-subtle bg-layer-2 p-3 text-body-sm-regular shadow-raised-100">
+          {children}
         </div>
-        <div className="text-base mb-2">{children}</div>
       </div>
     </div>
   );
diff --git a/apps/web/ce/components/comments/index.ts b/apps/web/ce/components/comments/index.ts
index f0ef4e2b6..3bbc477fb 100644
--- a/apps/web/ce/components/comments/index.ts
+++ b/apps/web/ce/components/comments/index.ts
@@ -1 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./comment-block";
+export { CommentCardDisplay } from "@/components/comments/card/display";
diff --git a/apps/web/ce/components/common/extended-app-header.tsx b/apps/web/ce/components/common/extended-app-header.tsx
index f8661d5c2..8149e25c6 100644
--- a/apps/web/ce/components/common/extended-app-header.tsx
+++ b/apps/web/ce/components/common/extended-app-header.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { ReactNode } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "react-router";
@@ -16,7 +22,7 @@ export const ExtendedAppHeader = observer(function ExtendedAppHeader(props: { he
   // store hooks
   const { sidebarCollapsed } = useAppTheme();
   // derived values
-  const shouldShowSidebarToggleButton = projectPreferences.navigationMode === "accordion" || (!projectId && !workItem);
+  const shouldShowSidebarToggleButton = projectPreferences.navigationMode === "ACCORDION" || (!projectId && !workItem);
 
   return (
     <>
diff --git a/apps/web/ce/components/common/modal/global.tsx b/apps/web/ce/components/common/modal/global.tsx
new file mode 100644
index 000000000..98292c6bd
--- /dev/null
+++ b/apps/web/ce/components/common/modal/global.tsx
@@ -0,0 +1,32 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { lazy, Suspense } from "react";
+import { observer } from "mobx-react";
+
+const ProfileSettingsModal = lazy(() =>
+  import("@/components/settings/profile/modal").then((module) => ({
+    default: module.ProfileSettingsModal,
+  }))
+);
+
+type TGlobalModalsProps = {
+  workspaceSlug: string;
+};
+
+/**
+ * GlobalModals component manages all workspace-level modals across Plane applications.
+ *
+ * This includes:
+ * - Profile settings modal
+ */
+export const GlobalModals = observer(function GlobalModals(_props: TGlobalModalsProps) {
+  return (
+    <Suspense fallback={null}>
+      <ProfileSettingsModal />
+    </Suspense>
+  );
+});
diff --git a/apps/web/ce/components/common/quick-actions-factory.tsx b/apps/web/ce/components/common/quick-actions-factory.tsx
new file mode 100644
index 000000000..9f94c8ddf
--- /dev/null
+++ b/apps/web/ce/components/common/quick-actions-factory.tsx
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export { useQuickActionsFactory } from "@/components/common/quick-actions-factory";
diff --git a/apps/web/ce/components/common/subscription/subscription-pill.tsx b/apps/web/ce/components/common/subscription/subscription-pill.tsx
index e03ecf8d7..89efebe83 100644
--- a/apps/web/ce/components/common/subscription/subscription-pill.tsx
+++ b/apps/web/ce/components/common/subscription/subscription-pill.tsx
@@ -1,9 +1,15 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { IWorkspace } from "@plane/types";
 
 type TProps = {
   workspace?: IWorkspace;
 };
 
-export function SubscriptionPill(props: TProps) {
+export function SubscriptionPill(_props: TProps) {
   return <></>;
 }
diff --git a/apps/web/ce/components/cycles/active-cycle/index.ts b/apps/web/ce/components/cycles/active-cycle/index.ts
index 1efe34c51..d98033459 100644
--- a/apps/web/ce/components/cycles/active-cycle/index.ts
+++ b/apps/web/ce/components/cycles/active-cycle/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./root";
diff --git a/apps/web/ce/components/cycles/active-cycle/root.tsx b/apps/web/ce/components/cycles/active-cycle/root.tsx
index 12e395fba..ab413b8b0 100644
--- a/apps/web/ce/components/cycles/active-cycle/root.tsx
+++ b/apps/web/ce/components/cycles/active-cycle/root.tsx
@@ -1,6 +1,13 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import { useTheme } from "next-themes";
 import { Disclosure } from "@headlessui/react";
+import { EmptyStateDetailed } from "@plane/propel/empty-state";
 // plane imports
 import { useTranslation } from "@plane/i18n";
 import type { ICycle } from "@plane/types";
@@ -15,7 +22,6 @@ import { ActiveCycleProgress } from "@/components/cycles/active-cycle/progress";
 import useCyclesDetails from "@/components/cycles/active-cycle/use-cycles-details";
 import { CycleListGroupHeader } from "@/components/cycles/list/cycle-list-group-header";
 import { CyclesListItem } from "@/components/cycles/list/cycles-list-item";
-import { DetailedEmptyState } from "@/components/empty-state/detailed-empty-state-root";
 // hooks
 import { useCycle } from "@/hooks/store/use-cycle";
 import type { ActiveCycleIssueDetails } from "@/store/issue/cycle";
@@ -40,7 +46,7 @@ type ActiveCyclesComponentProps = {
 const ActiveCyclesComponent = observer(function ActiveCyclesComponent({
   cycleId,
   activeCycle,
-  activeCycleResolvedPath,
+  activeCycleResolvedPath: _activeCycleResolvedPath,
   workspaceSlug,
   projectId,
   handleFiltersUpdate,
@@ -50,16 +56,17 @@ const ActiveCyclesComponent = observer(function ActiveCyclesComponent({
 
   if (!cycleId || !activeCycle) {
     return (
-      <DetailedEmptyState
+      <EmptyStateDetailed
+        assetKey="cycle"
         title={t("project_cycles.empty_state.active.title")}
         description={t("project_cycles.empty_state.active.description")}
-        assetPath={activeCycleResolvedPath}
+        rootClassName="py-10 h-auto"
       />
     );
   }
 
   return (
-    <div className="flex flex-col border-b border-custom-border-200">
+    <div className="flex flex-col border-b border-subtle">
       <CyclesListItem
         key={cycleId}
         cycleId={cycleId}
@@ -67,8 +74,8 @@ const ActiveCyclesComponent = observer(function ActiveCyclesComponent({
         projectId={projectId}
         className="!border-b-transparent"
       />
-      <Row className="bg-custom-background-100 pt-3 pb-6">
-        <div className="grid grid-cols-1 bg-custom-background-100 gap-3 lg:grid-cols-2 xl:grid-cols-3">
+      <Row className="bg-surface-1 pt-3 pb-6">
+        <div className="grid grid-cols-1 gap-3 bg-surface-1 lg:grid-cols-2 xl:grid-cols-3">
           <ActiveCycleProgress
             handleFiltersUpdate={handleFiltersUpdate}
             projectId={projectId}
@@ -114,7 +121,7 @@ export const ActiveCycleRoot = observer(function ActiveCycleRoot(props: IActiveC
         <Disclosure as="div" className="flex flex-shrink-0 flex-col" defaultOpen>
           {({ open }) => (
             <>
-              <Disclosure.Button className="sticky top-0 z-[2] w-full flex-shrink-0 border-b border-custom-border-200 bg-custom-background-90 cursor-pointer">
+              <Disclosure.Button className="sticky top-0 z-[2] w-full flex-shrink-0 cursor-pointer border-b border-subtle bg-layer-1">
                 <CycleListGroupHeader title={t("project_cycles.active_cycle.label")} type="current" isExpanded={open} />
               </Disclosure.Button>
               <Disclosure.Panel>
diff --git a/apps/web/ce/components/cycles/additional-actions.tsx b/apps/web/ce/components/cycles/additional-actions.tsx
index 96a4a004d..45bc7b5cd 100644
--- a/apps/web/ce/components/cycles/additional-actions.tsx
+++ b/apps/web/ce/components/cycles/additional-actions.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 type Props = {
   cycleId: string;
diff --git a/apps/web/ce/components/cycles/analytics-sidebar/base.tsx b/apps/web/ce/components/cycles/analytics-sidebar/base.tsx
index 3bcf28321..9467ec63a 100644
--- a/apps/web/ce/components/cycles/analytics-sidebar/base.tsx
+++ b/apps/web/ce/components/cycles/analytics-sidebar/base.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { Fragment } from "react";
 import { observer } from "mobx-react";
 // plane imports
@@ -73,7 +79,7 @@ export const SidebarChart = observer(function SidebarChart(props: ProgressChartP
               />
             </Fragment>
           ) : (
-            <Loader className="w-full h-[160px] mt-4">
+            <Loader className="mt-4 h-[160px] w-full">
               <Loader.Item width="100%" height="100%" />
             </Loader>
           )}
diff --git a/apps/web/ce/components/cycles/analytics-sidebar/index.ts b/apps/web/ce/components/cycles/analytics-sidebar/index.ts
index 1efe34c51..d98033459 100644
--- a/apps/web/ce/components/cycles/analytics-sidebar/index.ts
+++ b/apps/web/ce/components/cycles/analytics-sidebar/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./root";
diff --git a/apps/web/ce/components/cycles/analytics-sidebar/root.tsx b/apps/web/ce/components/cycles/analytics-sidebar/root.tsx
index 947a8844c..17501e01d 100644
--- a/apps/web/ce/components/cycles/analytics-sidebar/root.tsx
+++ b/apps/web/ce/components/cycles/analytics-sidebar/root.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 // components
 import { SidebarChart } from "./base";
diff --git a/apps/web/ce/components/cycles/end-cycle/index.ts b/apps/web/ce/components/cycles/end-cycle/index.ts
index 2e60c4561..dd65a9ec3 100644
--- a/apps/web/ce/components/cycles/end-cycle/index.ts
+++ b/apps/web/ce/components/cycles/end-cycle/index.ts
@@ -1,2 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./modal";
-export * from "./use-end-cycle";
diff --git a/apps/web/ce/components/cycles/end-cycle/modal.tsx b/apps/web/ce/components/cycles/end-cycle/modal.tsx
index 87b4ded45..98c906942 100644
--- a/apps/web/ce/components/cycles/end-cycle/modal.tsx
+++ b/apps/web/ce/components/cycles/end-cycle/modal.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 
 interface Props {
diff --git a/apps/web/ce/components/cycles/end-cycle/use-end-cycle.tsx b/apps/web/ce/components/cycles/end-cycle/use-end-cycle.tsx
deleted file mode 100644
index c1bf62618..000000000
--- a/apps/web/ce/components/cycles/end-cycle/use-end-cycle.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-export const useEndCycle = (isCurrentCycle: boolean) => ({
-  isEndCycleModalOpen: false,
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  setEndCycleModalOpen: (value: boolean) => {},
-  endCycleContextMenu: undefined,
-});
diff --git a/apps/web/ce/components/cycles/index.ts b/apps/web/ce/components/cycles/index.ts
index 1da115025..defcd502a 100644
--- a/apps/web/ce/components/cycles/index.ts
+++ b/apps/web/ce/components/cycles/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./active-cycle";
 export * from "./analytics-sidebar";
 export * from "./additional-actions";
diff --git a/apps/web/ce/components/de-dupe/de-dupe-button.tsx b/apps/web/ce/components/de-dupe/de-dupe-button.tsx
index 1575abac8..cfeeeb82a 100644
--- a/apps/web/ce/components/de-dupe/de-dupe-button.tsx
+++ b/apps/web/ce/components/de-dupe/de-dupe-button.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 // local components
 
@@ -9,7 +14,6 @@ type TDeDupeButtonRoot = {
   label: string;
 };
 
-export function DeDupeButtonRoot(props: TDeDupeButtonRoot) {
-  const { workspaceSlug, isDuplicateModalOpen, label, handleOnClick } = props;
+export function DeDupeButtonRoot(_props: TDeDupeButtonRoot) {
   return <></>;
 }
diff --git a/apps/web/ce/components/de-dupe/duplicate-modal/index.ts b/apps/web/ce/components/de-dupe/duplicate-modal/index.ts
index 1efe34c51..d98033459 100644
--- a/apps/web/ce/components/de-dupe/duplicate-modal/index.ts
+++ b/apps/web/ce/components/de-dupe/duplicate-modal/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./root";
diff --git a/apps/web/ce/components/de-dupe/duplicate-modal/root.tsx b/apps/web/ce/components/de-dupe/duplicate-modal/root.tsx
index 577152bee..4afbdeca0 100644
--- a/apps/web/ce/components/de-dupe/duplicate-modal/root.tsx
+++ b/apps/web/ce/components/de-dupe/duplicate-modal/root.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // types
 import type { TDeDupeIssue } from "@plane/types";
 
@@ -8,7 +13,6 @@ type TDuplicateModalRootProps = {
   handleDuplicateIssueModal: (value: boolean) => void;
 };
 
-export function DuplicateModalRoot(props: TDuplicateModalRootProps) {
-  const { workspaceSlug, issues, handleDuplicateIssueModal } = props;
+export function DuplicateModalRoot(_props: TDuplicateModalRootProps) {
   return <></>;
 }
diff --git a/apps/web/ce/components/de-dupe/duplicate-popover/index.ts b/apps/web/ce/components/de-dupe/duplicate-popover/index.ts
index 1efe34c51..d98033459 100644
--- a/apps/web/ce/components/de-dupe/duplicate-popover/index.ts
+++ b/apps/web/ce/components/de-dupe/duplicate-popover/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./root";
diff --git a/apps/web/ce/components/de-dupe/duplicate-popover/root.tsx b/apps/web/ce/components/de-dupe/duplicate-popover/root.tsx
index 957fb01f2..146d6b4bc 100644
--- a/apps/web/ce/components/de-dupe/duplicate-popover/root.tsx
+++ b/apps/web/ce/components/de-dupe/duplicate-popover/root.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 import { observer } from "mobx-react";
 // types
diff --git a/apps/web/ce/components/de-dupe/issue-block/button-label.tsx b/apps/web/ce/components/de-dupe/issue-block/button-label.tsx
index 2ec2b8caa..ae89c7797 100644
--- a/apps/web/ce/components/de-dupe/issue-block/button-label.tsx
+++ b/apps/web/ce/components/de-dupe/issue-block/button-label.tsx
@@ -1,11 +1,14 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
 
 type TDeDupeIssueButtonLabelProps = {
   isOpen: boolean;
   buttonLabel: string;
 };
 
-export function DeDupeIssueButtonLabel(props: TDeDupeIssueButtonLabelProps) {
-  const { isOpen, buttonLabel } = props;
+export function DeDupeIssueButtonLabel(_props: TDeDupeIssueButtonLabelProps) {
   return <></>;
 }
diff --git a/apps/web/ce/components/desktop/helper.ts b/apps/web/ce/components/desktop/helper.ts
index 2082e74ed..cae74441f 100644
--- a/apps/web/ce/components/desktop/helper.ts
+++ b/apps/web/ce/components/desktop/helper.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export const isSidebarToggleVisible = () => true;
diff --git a/apps/web/ce/components/desktop/index.ts b/apps/web/ce/components/desktop/index.ts
index c562f8102..8b7f5878e 100644
--- a/apps/web/ce/components/desktop/index.ts
+++ b/apps/web/ce/components/desktop/index.ts
@@ -1,2 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./helper";
 export * from "./sidebar-workspace-menu";
diff --git a/apps/web/ce/components/desktop/sidebar-workspace-menu.tsx b/apps/web/ce/components/desktop/sidebar-workspace-menu.tsx
index 98ea7e961..9dadb9ef2 100644
--- a/apps/web/ce/components/desktop/sidebar-workspace-menu.tsx
+++ b/apps/web/ce/components/desktop/sidebar-workspace-menu.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export function DesktopSidebarWorkspaceMenu() {
   return null;
 }
diff --git a/apps/web/ce/components/editor/embeds/mentions/index.ts b/apps/web/ce/components/editor/embeds/mentions/index.ts
index 1efe34c51..d98033459 100644
--- a/apps/web/ce/components/editor/embeds/mentions/index.ts
+++ b/apps/web/ce/components/editor/embeds/mentions/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./root";
diff --git a/apps/web/ce/components/editor/embeds/mentions/root.tsx b/apps/web/ce/components/editor/embeds/mentions/root.tsx
index 2f3f9a5b6..21802e0a6 100644
--- a/apps/web/ce/components/editor/embeds/mentions/root.tsx
+++ b/apps/web/ce/components/editor/embeds/mentions/root.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // plane imports
 import type { TCallbackMentionComponentProps } from "@plane/editor";
 
diff --git a/apps/web/ce/components/epics/epic-modal/index.ts b/apps/web/ce/components/epics/epic-modal/index.ts
index 031608e25..dd65a9ec3 100644
--- a/apps/web/ce/components/epics/epic-modal/index.ts
+++ b/apps/web/ce/components/epics/epic-modal/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./modal";
diff --git a/apps/web/ce/components/epics/epic-modal/modal.tsx b/apps/web/ce/components/epics/epic-modal/modal.tsx
index f1dbe83d5..90d7c9fa3 100644
--- a/apps/web/ce/components/epics/epic-modal/modal.tsx
+++ b/apps/web/ce/components/epics/epic-modal/modal.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 import type { TIssue } from "@plane/types";
 
@@ -16,6 +21,6 @@ export interface EpicModalProps {
   isProjectSelectionDisabled?: boolean;
 }
 
-export function CreateUpdateEpicModal(props: EpicModalProps) {
+export function CreateUpdateEpicModal(_props: EpicModalProps) {
   return <></>;
 }
diff --git a/apps/web/ce/components/estimates/estimate-list-item-buttons.tsx b/apps/web/ce/components/estimates/estimate-list-item-buttons.tsx
index a3e88778c..a289ca0f7 100644
--- a/apps/web/ce/components/estimates/estimate-list-item-buttons.tsx
+++ b/apps/web/ce/components/estimates/estimate-list-item-buttons.tsx
@@ -1,6 +1,12 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
-import { Trash } from "lucide-react";
 import { PROJECT_SETTINGS_TRACKER_ELEMENTS } from "@plane/constants";
+import { TrashIcon } from "@plane/propel/icons";
 
 type TEstimateListItem = {
   estimateId: string;
@@ -18,11 +24,11 @@ export const EstimateListItemButtons = observer(function EstimateListItemButtons
   return (
     <div className="relative flex items-center gap-1">
       <button
-        className="relative flex-shrink-0 w-6 h-6 flex justify-center items-center rounded cursor-pointer transition-colors overflow-hidden hover:bg-custom-background-80"
+        className="relative flex h-6 w-6 flex-shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-sm transition-colors hover:bg-layer-1"
         onClick={() => onDeleteClick && onDeleteClick(estimateId)}
         data-ph-element={PROJECT_SETTINGS_TRACKER_ELEMENTS.ESTIMATES_LIST_ITEM}
       >
-        <Trash size={12} />
+        <TrashIcon width={12} height={12} />
       </button>
     </div>
   );
diff --git a/apps/web/ce/components/estimates/helper.tsx b/apps/web/ce/components/estimates/helper.tsx
index 71b5be8a1..12c91f62f 100644
--- a/apps/web/ce/components/estimates/helper.tsx
+++ b/apps/web/ce/components/estimates/helper.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { TEstimateSystemKeys } from "@plane/types";
 import { EEstimateSystem } from "@plane/types";
 
diff --git a/apps/web/ce/components/estimates/index.ts b/apps/web/ce/components/estimates/index.ts
index 4852874e2..7fd8f88cf 100644
--- a/apps/web/ce/components/estimates/index.ts
+++ b/apps/web/ce/components/estimates/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./estimate-list-item-buttons";
 export * from "./update";
 export * from "./points";
diff --git a/apps/web/ce/components/estimates/inputs/index.ts b/apps/web/ce/components/estimates/inputs/index.ts
index 49b9c68c4..778cadf32 100644
--- a/apps/web/ce/components/estimates/inputs/index.ts
+++ b/apps/web/ce/components/estimates/inputs/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./time-input";
diff --git a/apps/web/ce/components/estimates/inputs/time-input.tsx b/apps/web/ce/components/estimates/inputs/time-input.tsx
index 17d6cec9d..6eadf4183 100644
--- a/apps/web/ce/components/estimates/inputs/time-input.tsx
+++ b/apps/web/ce/components/estimates/inputs/time-input.tsx
@@ -1,4 +1,8 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
 
 export type TEstimateTimeInputProps = {
   value?: number;
diff --git a/apps/web/ce/components/estimates/points/delete.tsx b/apps/web/ce/components/estimates/points/delete.tsx
index e59dae554..c64ee12c1 100644
--- a/apps/web/ce/components/estimates/points/delete.tsx
+++ b/apps/web/ce/components/estimates/points/delete.tsx
@@ -1,4 +1,8 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
 
 import type { TEstimatePointsObject, TEstimateSystemKeys, TEstimateTypeErrorObject } from "@plane/types";
 
diff --git a/apps/web/ce/components/estimates/points/index.ts b/apps/web/ce/components/estimates/points/index.ts
index fe722bd23..c83c4600f 100644
--- a/apps/web/ce/components/estimates/points/index.ts
+++ b/apps/web/ce/components/estimates/points/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./delete";
diff --git a/apps/web/ce/components/estimates/update/index.ts b/apps/web/ce/components/estimates/update/index.ts
index 031608e25..dd65a9ec3 100644
--- a/apps/web/ce/components/estimates/update/index.ts
+++ b/apps/web/ce/components/estimates/update/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./modal";
diff --git a/apps/web/ce/components/estimates/update/modal.tsx b/apps/web/ce/components/estimates/update/modal.tsx
index 09c6e7649..e0600f32d 100644
--- a/apps/web/ce/components/estimates/update/modal.tsx
+++ b/apps/web/ce/components/estimates/update/modal.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 
 type TUpdateEstimateModal = {
diff --git a/apps/web/ce/components/gantt-chart/blocks/block-row-list.tsx b/apps/web/ce/components/gantt-chart/blocks/block-row-list.tsx
index 7be26753f..4d6da6696 100644
--- a/apps/web/ce/components/gantt-chart/blocks/block-row-list.tsx
+++ b/apps/web/ce/components/gantt-chart/blocks/block-row-list.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // components
 import type { IBlockUpdateData, IGanttBlock } from "@plane/types";
 import RenderIfVisible from "@/components/core/render-if-visible-HOC";
@@ -30,7 +35,7 @@ export function GanttChartRowList(props: GanttChartBlocksProps) {
   } = props;
 
   return (
-    <div className="absolute top-0 left-0 min-w-full w-max">
+    <div className="absolute top-0 left-0 w-max min-w-full">
       {blockIds?.map((blockId) => (
         <>
           <RenderIfVisible
@@ -38,7 +43,7 @@ export function GanttChartRowList(props: GanttChartBlocksProps) {
             horizontalOffset={100}
             verticalOffset={200}
             classNames="relative min-w-full w-max"
-            placeholderChildren={<div className="w-full pointer-events-none" style={{ height: `${BLOCK_HEIGHT}px` }} />}
+            placeholderChildren={<div className="pointer-events-none w-full" style={{ height: `${BLOCK_HEIGHT}px` }} />}
             shouldRecordHeights={false}
           >
             <BlockRow
diff --git a/apps/web/ce/components/gantt-chart/blocks/blocks-list.tsx b/apps/web/ce/components/gantt-chart/blocks/blocks-list.tsx
index 1a14dd2de..fcb9d0936 100644
--- a/apps/web/ce/components/gantt-chart/blocks/blocks-list.tsx
+++ b/apps/web/ce/components/gantt-chart/blocks/blocks-list.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 //
 import type { IBlockUpdateDependencyData } from "@plane/types";
 import { GanttChartBlock } from "@/components/gantt-chart/blocks/block";
diff --git a/apps/web/ce/components/gantt-chart/dependency/blockDraggables/index.ts b/apps/web/ce/components/gantt-chart/dependency/blockDraggables/index.ts
index c2f4f8aec..47ac85d92 100644
--- a/apps/web/ce/components/gantt-chart/dependency/blockDraggables/index.ts
+++ b/apps/web/ce/components/gantt-chart/dependency/blockDraggables/index.ts
@@ -1,2 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./left-draggable";
 export * from "./right-draggable";
diff --git a/apps/web/ce/components/gantt-chart/dependency/blockDraggables/left-draggable.tsx b/apps/web/ce/components/gantt-chart/dependency/blockDraggables/left-draggable.tsx
index 5257bacec..34a8aac7d 100644
--- a/apps/web/ce/components/gantt-chart/dependency/blockDraggables/left-draggable.tsx
+++ b/apps/web/ce/components/gantt-chart/dependency/blockDraggables/left-draggable.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { RefObject } from "react";
 import type { IGanttBlock } from "@plane/types";
 
@@ -6,6 +12,6 @@ type LeftDependencyDraggableProps = {
   ganttContainerRef: RefObject<HTMLDivElement>;
 };
 
-export function LeftDependencyDraggable(props: LeftDependencyDraggableProps) {
+export function LeftDependencyDraggable(_props: LeftDependencyDraggableProps) {
   return <></>;
 }
diff --git a/apps/web/ce/components/gantt-chart/dependency/blockDraggables/right-draggable.tsx b/apps/web/ce/components/gantt-chart/dependency/blockDraggables/right-draggable.tsx
index a8388d4f4..d6badd067 100644
--- a/apps/web/ce/components/gantt-chart/dependency/blockDraggables/right-draggable.tsx
+++ b/apps/web/ce/components/gantt-chart/dependency/blockDraggables/right-draggable.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { RefObject } from "react";
 import type { IGanttBlock } from "@plane/types";
 
@@ -5,6 +11,6 @@ type RightDependencyDraggableProps = {
   block: IGanttBlock;
   ganttContainerRef: RefObject<HTMLDivElement>;
 };
-export function RightDependencyDraggable(props: RightDependencyDraggableProps) {
+export function RightDependencyDraggable(_props: RightDependencyDraggableProps) {
   return <></>;
 }
diff --git a/apps/web/ce/components/gantt-chart/dependency/dependency-paths.tsx b/apps/web/ce/components/gantt-chart/dependency/dependency-paths.tsx
index d88f5206d..6332a71cb 100644
--- a/apps/web/ce/components/gantt-chart/dependency/dependency-paths.tsx
+++ b/apps/web/ce/components/gantt-chart/dependency/dependency-paths.tsx
@@ -1,9 +1,12 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
 
 type Props = {
   isEpic?: boolean;
 };
-export function TimelineDependencyPaths(props: Props) {
-  const { isEpic = false } = props;
+export function TimelineDependencyPaths(_props: Props) {
   return <></>;
 }
diff --git a/apps/web/ce/components/gantt-chart/dependency/draggable-dependency-path.tsx b/apps/web/ce/components/gantt-chart/dependency/draggable-dependency-path.tsx
index d37b2f550..0f73549ef 100644
--- a/apps/web/ce/components/gantt-chart/dependency/draggable-dependency-path.tsx
+++ b/apps/web/ce/components/gantt-chart/dependency/draggable-dependency-path.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export function TimelineDraggablePath() {
   return <></>;
 }
diff --git a/apps/web/ce/components/gantt-chart/dependency/index.ts b/apps/web/ce/components/gantt-chart/dependency/index.ts
index 91d0018db..d92fa43db 100644
--- a/apps/web/ce/components/gantt-chart/dependency/index.ts
+++ b/apps/web/ce/components/gantt-chart/dependency/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./blockDraggables";
 export * from "./dependency-paths";
 export * from "./draggable-dependency-path";
diff --git a/apps/web/ce/components/gantt-chart/index.ts b/apps/web/ce/components/gantt-chart/index.ts
index d08e0f7d6..cebec203c 100644
--- a/apps/web/ce/components/gantt-chart/index.ts
+++ b/apps/web/ce/components/gantt-chart/index.ts
@@ -1 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./dependency";
+export * from "./layers";
diff --git a/apps/web/ce/components/gantt-chart/layers/additional-layers.tsx b/apps/web/ce/components/gantt-chart/layers/additional-layers.tsx
new file mode 100644
index 000000000..0a5ced219
--- /dev/null
+++ b/apps/web/ce/components/gantt-chart/layers/additional-layers.tsx
@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { FC } from "react";
+
+type Props = {
+  itemsContainerWidth: number;
+  blockCount: number;
+};
+
+export const GanttAdditionalLayers: FC<Props> = () => null;
diff --git a/apps/web/ce/components/gantt-chart/layers/index.ts b/apps/web/ce/components/gantt-chart/layers/index.ts
new file mode 100644
index 000000000..84012f80a
--- /dev/null
+++ b/apps/web/ce/components/gantt-chart/layers/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export { GanttAdditionalLayers } from "./additional-layers";
diff --git a/apps/web/ce/components/global/index.ts b/apps/web/ce/components/global/index.ts
index 08b85c764..1d62fc2cf 100644
--- a/apps/web/ce/components/global/index.ts
+++ b/apps/web/ce/components/global/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./version-number";
diff --git a/apps/web/ce/components/global/product-updates/changelog.tsx b/apps/web/ce/components/global/product-updates/changelog.tsx
index 672b7490b..06de23608 100644
--- a/apps/web/ce/components/global/product-updates/changelog.tsx
+++ b/apps/web/ce/components/global/product-updates/changelog.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useState, useEffect, useRef } from "react";
 import { observer } from "mobx-react";
 // hooks
@@ -66,15 +72,15 @@ export const ProductUpdatesChangelog = observer(function ProductUpdatesChangelog
   }
 
   return (
-    <div className="flex flex-col h-[550px] vertical-scrollbar scrollbar-xs overflow-hidden overflow-y-scroll px-6 mx-0.5 relative">
+    <div className="vertical-scrollbar relative mx-0.5 flex scrollbar-xs h-[550px] flex-col overflow-hidden overflow-y-scroll px-6">
       {isLoading && (
-        <Loader className="flex flex-col gap-3 absolute inset-0 w-full h-full items-center justify-center">
+        <Loader className="absolute inset-0 flex h-full w-full flex-col items-center justify-center gap-3">
           <Loader.Item height="95%" width="95%" />
         </Loader>
       )}
       <iframe
         src={changeLogUrl}
-        className={`w-full h-full ${isLoading ? "opacity-0" : "opacity-100"} transition-opacity duration-200`}
+        className={`h-full w-full ${isLoading ? "opacity-0" : "opacity-100"} transition-opacity duration-200`}
         onLoad={handleIframeLoad}
         onError={handleIframeError}
       />
diff --git a/apps/web/ce/components/global/product-updates/header.tsx b/apps/web/ce/components/global/product-updates/header.tsx
index 196d621f3..375ecaeb8 100644
--- a/apps/web/ce/components/global/product-updates/header.tsx
+++ b/apps/web/ce/components/global/product-updates/header.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import packageJson from "package.json";
 import { useTranslation } from "@plane/i18n";
@@ -7,12 +13,12 @@ import { cn } from "@plane/utils";
 export const ProductUpdatesHeader = observer(function ProductUpdatesHeader() {
   const { t } = useTranslation();
   return (
-    <div className="flex gap-2 mx-6 my-4 items-center justify-between flex-shrink-0">
+    <div className="mx-6 my-4 flex flex-shrink-0 items-center justify-between gap-2">
       <div className="flex w-full items-center">
-        <div className="flex gap-2 text-xl font-medium">{t("whats_new")}</div>
+        <div className="flex gap-2 text-18 font-medium">{t("whats_new")}</div>
         <div
           className={cn(
-            "px-2 mx-2 py-0.5 text-center text-xs font-medium rounded-full bg-custom-primary-100/20 text-custom-primary-100"
+            "mx-2 rounded-full bg-accent-primary/20 px-2 py-0.5 text-center text-11 font-medium text-accent-primary"
           )}
         >
           {t("version")}: v{packageJson.version}
diff --git a/apps/web/ce/components/global/version-number.tsx b/apps/web/ce/components/global/version-number.tsx
index b04ae581e..a883eac9d 100644
--- a/apps/web/ce/components/global/version-number.tsx
+++ b/apps/web/ce/components/global/version-number.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // assets
 import { useTranslation } from "@plane/i18n";
 import packageJson from "package.json";
diff --git a/apps/web/ce/components/home/header.tsx b/apps/web/ce/components/home/header.tsx
index ac905596e..5fab95735 100644
--- a/apps/web/ce/components/home/header.tsx
+++ b/apps/web/ce/components/home/header.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export function HomePageHeader() {
   return <></>;
 }
diff --git a/apps/web/ce/components/home/index.ts b/apps/web/ce/components/home/index.ts
index d64a7a983..9a8977560 100644
--- a/apps/web/ce/components/home/index.ts
+++ b/apps/web/ce/components/home/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./peek-overviews";
diff --git a/apps/web/ce/components/home/peek-overviews.tsx b/apps/web/ce/components/home/peek-overviews.tsx
index 74d2d7d5a..2c869df14 100644
--- a/apps/web/ce/components/home/peek-overviews.tsx
+++ b/apps/web/ce/components/home/peek-overviews.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import { IssuePeekOverview } from "@/components/issues/peek-overview";
 import { useIssueDetail } from "@/hooks/store/use-issue-detail";
diff --git a/apps/web/ce/components/inbox/source-pill.tsx b/apps/web/ce/components/inbox/source-pill.tsx
index 1d8bc06ea..6d7763f8b 100644
--- a/apps/web/ce/components/inbox/source-pill.tsx
+++ b/apps/web/ce/components/inbox/source-pill.tsx
@@ -1,9 +1,15 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { EInboxIssueSource } from "@plane/types";
 
 export type TInboxSourcePill = {
   source: EInboxIssueSource;
 };
 
-export function InboxSourcePill(props: TInboxSourcePill) {
+export function InboxSourcePill(_props: TInboxSourcePill) {
   return <></>;
 }
diff --git a/apps/web/ce/components/instance/index.ts b/apps/web/ce/components/instance/index.ts
index 960f954e7..78624d0ec 100644
--- a/apps/web/ce/components/instance/index.ts
+++ b/apps/web/ce/components/instance/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./maintenance-message";
diff --git a/apps/web/ce/components/instance/maintenance-message.tsx b/apps/web/ce/components/instance/maintenance-message.tsx
index 660ebe4a5..f2d662c9a 100644
--- a/apps/web/ce/components/instance/maintenance-message.tsx
+++ b/apps/web/ce/components/instance/maintenance-message.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export function MaintenanceMessage() {
   const linkMap = [
     {
@@ -10,22 +16,22 @@ export function MaintenanceMessage() {
   return (
     <>
       <div className="flex flex-col gap-2.5">
-        <h1 className="text-xl font-semibold text-custom-text-100 text-left">
+        <h1 className="text-left text-18 font-semibold text-primary">
           &#x1F6A7; Looks like Plane didn&apos;t start up correctly!
         </h1>
-        <span className="text-base font-medium text-custom-text-200 text-left">
+        <span className="text-left text-14 font-medium text-secondary">
           Some services might have failed to start. Please check your container logs to identify and resolve the issue.
           If you&apos;re stuck, reach out to our support team for more help.
         </span>
       </div>
-      <div className="flex items-center justify-start gap-6 mt-1">
+      <div className="mt-1 flex items-center justify-start gap-6">
         {linkMap.map((link) => (
           <div key={link.key}>
             <a
               href={link.value}
               target="_blank"
               rel="noopener noreferrer"
-              className="text-custom-primary-100 hover:underline text-sm"
+              className="text-13 text-accent-primary hover:underline"
             >
               {link.label}
             </a>
diff --git a/apps/web/ce/components/issues/bulk-operations/index.ts b/apps/web/ce/components/issues/bulk-operations/index.ts
index 1efe34c51..d98033459 100644
--- a/apps/web/ce/components/issues/bulk-operations/index.ts
+++ b/apps/web/ce/components/issues/bulk-operations/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./root";
diff --git a/apps/web/ce/components/issues/bulk-operations/root.tsx b/apps/web/ce/components/issues/bulk-operations/root.tsx
index fef3b7220..567fd12d2 100644
--- a/apps/web/ce/components/issues/bulk-operations/root.tsx
+++ b/apps/web/ce/components/issues/bulk-operations/root.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 // components
 import { BulkOperationsUpgradeBanner } from "@/components/issues/bulk-operations/upgrade-banner";
diff --git a/apps/web/ce/components/issues/filters/applied-filters/issue-types.tsx b/apps/web/ce/components/issues/filters/applied-filters/issue-types.tsx
index 21047074a..09ff7737f 100644
--- a/apps/web/ce/components/issues/filters/applied-filters/issue-types.tsx
+++ b/apps/web/ce/components/issues/filters/applied-filters/issue-types.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 
 type Props = {
diff --git a/apps/web/ce/components/issues/filters/issue-types.tsx b/apps/web/ce/components/issues/filters/issue-types.tsx
index dc3397e2c..db7b06f77 100644
--- a/apps/web/ce/components/issues/filters/issue-types.tsx
+++ b/apps/web/ce/components/issues/filters/issue-types.tsx
@@ -1,4 +1,9 @@
-import type React from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 
 type Props = {
diff --git a/apps/web/ce/components/issues/filters/team-project.tsx b/apps/web/ce/components/issues/filters/team-project.tsx
index dd8253190..f838f4c94 100644
--- a/apps/web/ce/components/issues/filters/team-project.tsx
+++ b/apps/web/ce/components/issues/filters/team-project.tsx
@@ -1,4 +1,9 @@
-import type React from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 
 type Props = {
diff --git a/apps/web/ce/components/issues/header.tsx b/apps/web/ce/components/issues/header.tsx
index 9372b4499..4871217bb 100644
--- a/apps/web/ce/components/issues/header.tsx
+++ b/apps/web/ce/components/issues/header.tsx
@@ -1,7 +1,13 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // icons
-import { Circle, ExternalLink } from "lucide-react";
+import { Circle } from "lucide-react";
 // plane imports
 import {
   EUserPermissions,
@@ -12,7 +18,7 @@ import {
 } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { Button } from "@plane/propel/button";
-import { WorkItemsIcon } from "@plane/propel/icons";
+import { NewTabIcon, WorkItemsIcon } from "@plane/propel/icons";
 import { Tooltip } from "@plane/propel/tooltip";
 import { EIssuesStoreType } from "@plane/types";
 import { Breadcrumbs, Header } from "@plane/ui";
@@ -69,7 +75,7 @@ export const IssuesHeader = observer(function IssuesHeader() {
                 <BreadcrumbLink
                   label="Work Items"
                   href={`/${workspaceSlug}/projects/${projectId}/issues/`}
-                  icon={<WorkItemsIcon className="h-4 w-4 text-custom-text-300" />}
+                  icon={<WorkItemsIcon className="h-4 w-4 text-tertiary" />}
                   isLast
                 />
               }
@@ -89,20 +95,20 @@ export const IssuesHeader = observer(function IssuesHeader() {
         {currentProjectDetails?.anchor ? (
           <a
             href={publishedURL}
-            className="group flex items-center gap-1.5 rounded bg-custom-primary-100/10 px-2.5 py-1 text-xs font-medium text-custom-primary-100"
+            className="group flex items-center gap-1.5 rounded-sm bg-accent-primary/10 px-2.5 py-1 text-11 font-medium text-accent-primary"
             target="_blank"
             rel="noopener noreferrer"
           >
-            <Circle className="h-1.5 w-1.5 fill-custom-primary-100" strokeWidth={2} />
+            <Circle className="h-1.5 w-1.5 fill-accent-primary" strokeWidth={2} />
             {t("workspace_projects.network.public.title")}
-            <ExternalLink className="hidden h-3 w-3 group-hover:block" strokeWidth={2} />
+            <NewTabIcon className="hidden h-3 w-3 group-hover:block" strokeWidth={2} />
           </a>
         ) : (
           <></>
         )}
       </Header.LeftItem>
       <Header.RightItem>
-        <div className="hidden gap-3 md:flex">
+        <div className="hidden gap-2 md:flex">
           <HeaderFilters
             projectId={projectId}
             currentProjectDetails={currentProjectDetails}
@@ -110,19 +116,18 @@ export const IssuesHeader = observer(function IssuesHeader() {
             canUserCreateIssue={canUserCreateIssue}
           />
         </div>
-        {canUserCreateIssue ? (
+        {canUserCreateIssue && (
           <Button
+            variant="primary"
+            size="lg"
             onClick={() => {
               toggleCreateIssueModal(true, EIssuesStoreType.PROJECT);
             }}
             data-ph-element={WORK_ITEM_TRACKER_ELEMENTS.HEADER_ADD_BUTTON.WORK_ITEMS}
-            size="sm"
           >
             <div className="block sm:hidden">{t("issue.label", { count: 1 })}</div>
             <div className="hidden sm:block">{t("issue.add.label")}</div>
           </Button>
-        ) : (
-          <></>
         )}
       </Header.RightItem>
     </Header>
diff --git a/apps/web/ce/components/issues/issue-detail-widgets/action-buttons.tsx b/apps/web/ce/components/issues/issue-detail-widgets/action-buttons.tsx
index bac610826..4c17d1be1 100644
--- a/apps/web/ce/components/issues/issue-detail-widgets/action-buttons.tsx
+++ b/apps/web/ce/components/issues/issue-detail-widgets/action-buttons.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // plane types
 import type { TIssueServiceType, TWorkItemWidgets } from "@plane/types";
 
diff --git a/apps/web/ce/components/issues/issue-detail-widgets/collapsibles.tsx b/apps/web/ce/components/issues/issue-detail-widgets/collapsibles.tsx
index 092663d90..626107cdb 100644
--- a/apps/web/ce/components/issues/issue-detail-widgets/collapsibles.tsx
+++ b/apps/web/ce/components/issues/issue-detail-widgets/collapsibles.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // plane types
 import type { TIssueServiceType, TWorkItemWidgets } from "@plane/types";
 
diff --git a/apps/web/ce/components/issues/issue-detail-widgets/modals.tsx b/apps/web/ce/components/issues/issue-detail-widgets/modals.tsx
index 07327c44c..9356b7727 100644
--- a/apps/web/ce/components/issues/issue-detail-widgets/modals.tsx
+++ b/apps/web/ce/components/issues/issue-detail-widgets/modals.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // plane types
 import type { TIssueServiceType, TWorkItemWidgets } from "@plane/types";
 
diff --git a/apps/web/ce/components/issues/issue-details/additional-activity-root.tsx b/apps/web/ce/components/issues/issue-details/additional-activity-root.tsx
index 109735645..95804501a 100644
--- a/apps/web/ce/components/issues/issue-details/additional-activity-root.tsx
+++ b/apps/web/ce/components/issues/issue-details/additional-activity-root.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 
 export type TAdditionalActivityRoot = {
diff --git a/apps/web/ce/components/issues/issue-details/additional-properties.tsx b/apps/web/ce/components/issues/issue-details/additional-properties.tsx
index 69602593e..a169a8863 100644
--- a/apps/web/ce/components/issues/issue-details/additional-properties.tsx
+++ b/apps/web/ce/components/issues/issue-details/additional-properties.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 // plane imports
 
diff --git a/apps/web/ce/components/issues/issue-details/index.ts b/apps/web/ce/components/issues/issue-details/index.ts
index c5724f0f7..abd9df163 100644
--- a/apps/web/ce/components/issues/issue-details/index.ts
+++ b/apps/web/ce/components/issues/issue-details/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./issue-identifier";
 export * from "./issue-properties-activity";
 export * from "./issue-type-switcher";
diff --git a/apps/web/ce/components/issues/issue-details/issue-creator.tsx b/apps/web/ce/components/issues/issue-details/issue-creator.tsx
index 19c1fd20a..56e8e7493 100644
--- a/apps/web/ce/components/issues/issue-details/issue-creator.tsx
+++ b/apps/web/ce/components/issues/issue-details/issue-creator.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import Link from "next/link";
 // hooks
 import { useIssueDetail } from "@/hooks/store/use-issue-detail";
@@ -22,11 +27,11 @@ export function IssueCreatorDisplay(props: TIssueUser) {
   return (
     <>
       {customUserName ? (
-        <span className="text-custom-text-100 font-medium">{customUserName || "Plane"}</span>
+        <span className="font-medium text-primary">{customUserName || "Plane"}</span>
       ) : (
         <Link
           href={`/${activity?.workspace_detail?.slug}/profile/${activity?.actor_detail?.id}`}
-          className="hover:underline text-custom-text-100 font-medium"
+          className="font-medium text-primary hover:underline"
         >
           {activity.actor_detail?.display_name}
         </Link>
diff --git a/apps/web/ce/components/issues/issue-details/issue-identifier.tsx b/apps/web/ce/components/issues/issue-details/issue-identifier.tsx
index f6843015b..c6e6a4bb8 100644
--- a/apps/web/ce/components/issues/issue-details/issue-identifier.tsx
+++ b/apps/web/ce/components/issues/issue-details/issue-identifier.tsx
@@ -1,85 +1,19 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
-// types
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
-import { Tooltip } from "@plane/propel/tooltip";
-import type { IIssueDisplayProperties } from "@plane/types";
-// ui
-// helpers
-import { cn } from "@plane/utils";
+// plane imports
+import type { TIssueIdentifierProps, TIssueTypeIdentifier } from "@plane/types";
 // hooks
 import { useIssueDetail } from "@/hooks/store/use-issue-detail";
 import { useProject } from "@/hooks/store/use-project";
-
-type TIssueIdentifierBaseProps = {
-  projectId: string;
-  size?: "xs" | "sm" | "md" | "lg";
-  textContainerClassName?: string;
-  displayProperties?: IIssueDisplayProperties | undefined;
-  enableClickToCopyIdentifier?: boolean;
-};
-
-type TIssueIdentifierFromStore = TIssueIdentifierBaseProps & {
-  issueId: string;
-};
-
-type TIssueIdentifierWithDetails = TIssueIdentifierBaseProps & {
-  issueTypeId?: string | null;
-  projectIdentifier: string;
-  issueSequenceId: string | number;
-};
-
-export type TIssueIdentifierProps = TIssueIdentifierFromStore | TIssueIdentifierWithDetails;
-
-type TIssueTypeIdentifier = {
-  issueTypeId: string;
-  size?: "xs" | "sm" | "md" | "lg";
-};
-
-export const IssueTypeIdentifier = observer(function IssueTypeIdentifier(_props: TIssueTypeIdentifier) {
-  return <></>;
-});
-
-type TIdentifierTextProps = {
-  identifier: string;
-  enableClickToCopyIdentifier?: boolean;
-  textContainerClassName?: string;
-};
-
-export function IdentifierText(props: TIdentifierTextProps) {
-  const { identifier, enableClickToCopyIdentifier = false, textContainerClassName } = props;
-  // handlers
-  const handleCopyIssueIdentifier = () => {
-    if (enableClickToCopyIdentifier) {
-      navigator.clipboard.writeText(identifier).then(() => {
-        setToast({
-          type: TOAST_TYPE.SUCCESS,
-          title: "Work item ID copied to clipboard",
-        });
-      });
-    }
-  };
-
-  return (
-    <Tooltip tooltipContent="Click to copy" disabled={!enableClickToCopyIdentifier} position="top">
-      <span
-        className={cn(
-          "text-base font-medium text-custom-text-300",
-          {
-            "cursor-pointer": enableClickToCopyIdentifier,
-          },
-          textContainerClassName
-        )}
-        onClick={handleCopyIssueIdentifier}
-      >
-        {identifier}
-      </span>
-    </Tooltip>
-  );
-}
+import { IdentifierText } from "@/components/issues/issue-detail/identifier-text";
 
 export const IssueIdentifier = observer(function IssueIdentifier(props: TIssueIdentifierProps) {
-  const { projectId, textContainerClassName, displayProperties, enableClickToCopyIdentifier = false } = props;
+  const { projectId, variant, size, displayProperties, enableClickToCopyIdentifier = false } = props;
   // store hooks
   const { getProjectIdentifierById } = useProject();
   const {
@@ -96,12 +30,17 @@ export const IssueIdentifier = observer(function IssueIdentifier(props: TIssueId
   if (!shouldRenderIssueID) return null;
 
   return (
-    <div className="shrink-0 flex items-center space-x-2">
+    <div className="flex shrink-0 items-center space-x-2">
       <IdentifierText
         identifier={`${projectIdentifier}-${issueSequenceId}`}
         enableClickToCopyIdentifier={enableClickToCopyIdentifier}
-        textContainerClassName={textContainerClassName}
+        variant={variant}
+        size={size}
       />
     </div>
   );
 });
+
+export const IssueTypeIdentifier = observer(function IssueTypeIdentifier(_props: TIssueTypeIdentifier) {
+  return <></>;
+});
diff --git a/apps/web/ce/components/issues/issue-details/issue-properties-activity/index.ts b/apps/web/ce/components/issues/issue-details/issue-properties-activity/index.ts
index 1efe34c51..d98033459 100644
--- a/apps/web/ce/components/issues/issue-details/issue-properties-activity/index.ts
+++ b/apps/web/ce/components/issues/issue-details/issue-properties-activity/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./root";
diff --git a/apps/web/ce/components/issues/issue-details/issue-properties-activity/root.tsx b/apps/web/ce/components/issues/issue-details/issue-properties-activity/root.tsx
index 43ad4d3aa..c6a50531e 100644
--- a/apps/web/ce/components/issues/issue-details/issue-properties-activity/root.tsx
+++ b/apps/web/ce/components/issues/issue-details/issue-properties-activity/root.tsx
@@ -1,4 +1,8 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
 
 type TIssueAdditionalPropertiesActivity = {
   activityId: string;
diff --git a/apps/web/ce/components/issues/issue-details/issue-type-activity.tsx b/apps/web/ce/components/issues/issue-details/issue-type-activity.tsx
index 7eb04be1f..08b499f82 100644
--- a/apps/web/ce/components/issues/issue-details/issue-type-activity.tsx
+++ b/apps/web/ce/components/issues/issue-details/issue-type-activity.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 
 export type TIssueTypeActivity = { activityId: string; showIssue?: boolean; ends: "top" | "bottom" | undefined };
diff --git a/apps/web/ce/components/issues/issue-details/issue-type-switcher.tsx b/apps/web/ce/components/issues/issue-details/issue-type-switcher.tsx
index b46ebe03d..87e60aca6 100644
--- a/apps/web/ce/components/issues/issue-details/issue-type-switcher.tsx
+++ b/apps/web/ce/components/issues/issue-details/issue-type-switcher.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 // store hooks
 import { useIssueDetail } from "@/hooks/store/use-issue-detail";
diff --git a/apps/web/ce/components/issues/issue-details/parent-select-root.tsx b/apps/web/ce/components/issues/issue-details/parent-select-root.tsx
index d606dac81..301b31a9e 100644
--- a/apps/web/ce/components/issues/issue-details/parent-select-root.tsx
+++ b/apps/web/ce/components/issues/issue-details/parent-select-root.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 import { observer } from "mobx-react";
 // plane imports
@@ -41,7 +47,7 @@ export const IssueParentSelectRoot = observer(function IssueParentSelectRoot(pro
       await issueOperations.fetch(workspaceSlug, projectId, issueId, false);
       if (_issueId) await fetchSubIssues(workspaceSlug, projectId, _issueId);
       toggleParentIssueModal(null);
-    } catch (error) {
+    } catch (_error) {
       console.error("something went wrong while fetching the issue");
     }
   };
@@ -57,7 +63,7 @@ export const IssueParentSelectRoot = observer(function IssueParentSelectRoot(pro
       await removeSubIssue(workspaceSlug, projectId, parentIssueId, issueId);
       await fetchSubIssues(workspaceSlug, projectId, parentIssueId);
       setSubIssueHelpers(parentIssueId, "issue_loader", issueId);
-    } catch (error) {
+    } catch (_error) {
       setToast({
         type: TOAST_TYPE.ERROR,
         title: t("common.error.label"),
diff --git a/apps/web/ce/components/issues/issue-details/sidebar.tsx/date-alert.tsx b/apps/web/ce/components/issues/issue-details/sidebar/date-alert.tsx
similarity index 63%
rename from apps/web/ce/components/issues/issue-details/sidebar.tsx/date-alert.tsx
rename to apps/web/ce/components/issues/issue-details/sidebar/date-alert.tsx
index a0f3afed4..6d5459f53 100644
--- a/apps/web/ce/components/issues/issue-details/sidebar.tsx/date-alert.tsx
+++ b/apps/web/ce/components/issues/issue-details/sidebar/date-alert.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { TIssue } from "@plane/types";
 
 export type TDateAlertProps = {
diff --git a/apps/web/ce/components/issues/issue-details/sidebar/transfer-hop-info.tsx b/apps/web/ce/components/issues/issue-details/sidebar/transfer-hop-info.tsx
index 51f616680..071c8476e 100644
--- a/apps/web/ce/components/issues/issue-details/sidebar/transfer-hop-info.tsx
+++ b/apps/web/ce/components/issues/issue-details/sidebar/transfer-hop-info.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { TIssue } from "@plane/types";
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 export function TransferHopInfo({ workItem }: { workItem: TIssue }) {
diff --git a/apps/web/ce/components/issues/issue-layouts/additional-properties.tsx b/apps/web/ce/components/issues/issue-layouts/additional-properties.tsx
index 2d10001ee..35c62fed4 100644
--- a/apps/web/ce/components/issues/issue-layouts/additional-properties.tsx
+++ b/apps/web/ce/components/issues/issue-layouts/additional-properties.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 import type { IIssueDisplayProperties, TIssue } from "@plane/types";
 
@@ -7,6 +12,6 @@ export type TWorkItemLayoutAdditionalProperties = {
   issue: TIssue;
 };
 
-export function WorkItemLayoutAdditionalProperties(props: TWorkItemLayoutAdditionalProperties) {
+export function WorkItemLayoutAdditionalProperties(_props: TWorkItemLayoutAdditionalProperties) {
   return <></>;
 }
diff --git a/apps/web/ce/components/issues/issue-layouts/empty-states/index.ts b/apps/web/ce/components/issues/issue-layouts/empty-states/index.ts
index 319b4c684..27407dd37 100644
--- a/apps/web/ce/components/issues/issue-layouts/empty-states/index.ts
+++ b/apps/web/ce/components/issues/issue-layouts/empty-states/index.ts
@@ -1,2 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./team-issues";
 export * from "./team-view-issues";
diff --git a/apps/web/ce/components/issues/issue-layouts/empty-states/team-issues.tsx b/apps/web/ce/components/issues/issue-layouts/empty-states/team-issues.tsx
index 8f267503c..fbd6d73dc 100644
--- a/apps/web/ce/components/issues/issue-layouts/empty-states/team-issues.tsx
+++ b/apps/web/ce/components/issues/issue-layouts/empty-states/team-issues.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 
 export const TeamEmptyState = observer(function TeamEmptyState() {
diff --git a/apps/web/ce/components/issues/issue-layouts/empty-states/team-project.tsx b/apps/web/ce/components/issues/issue-layouts/empty-states/team-project.tsx
index ab15463a0..b221f0108 100644
--- a/apps/web/ce/components/issues/issue-layouts/empty-states/team-project.tsx
+++ b/apps/web/ce/components/issues/issue-layouts/empty-states/team-project.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 
 export const TeamProjectWorkItemEmptyState = observer(function TeamProjectWorkItemEmptyState() {
diff --git a/apps/web/ce/components/issues/issue-layouts/empty-states/team-view-issues.tsx b/apps/web/ce/components/issues/issue-layouts/empty-states/team-view-issues.tsx
index c8e741243..8453b3769 100644
--- a/apps/web/ce/components/issues/issue-layouts/empty-states/team-view-issues.tsx
+++ b/apps/web/ce/components/issues/issue-layouts/empty-states/team-view-issues.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 
 export const TeamViewEmptyState = observer(function TeamViewEmptyState() {
diff --git a/apps/web/ce/components/issues/issue-layouts/issue-stats.tsx b/apps/web/ce/components/issues/issue-layouts/issue-stats.tsx
index 11f34ac1b..fc6fbc0a0 100644
--- a/apps/web/ce/components/issues/issue-layouts/issue-stats.tsx
+++ b/apps/web/ce/components/issues/issue-layouts/issue-stats.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 
 type Props = {
@@ -9,6 +14,6 @@ type Props = {
   showLabel?: boolean;
 };
 
-export function IssueStats(props: Props) {
+export function IssueStats(_props: Props) {
   return <></>;
 }
diff --git a/apps/web/ce/components/issues/issue-layouts/quick-action-dropdowns/copy-menu-helper.tsx b/apps/web/ce/components/issues/issue-layouts/quick-action-dropdowns/copy-menu-helper.tsx
index 7f4bb031b..ecea63ccb 100644
--- a/apps/web/ce/components/issues/issue-layouts/quick-action-dropdowns/copy-menu-helper.tsx
+++ b/apps/web/ce/components/issues/issue-layouts/quick-action-dropdowns/copy-menu-helper.tsx
@@ -1,11 +1,17 @@
-import type { Copy } from "lucide-react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { ISvgIcons } from "@plane/propel/icons";
 import type { TContextMenuItem } from "@plane/ui";
 
 export interface CopyMenuHelperProps {
   baseItem: {
     key: string;
     title: string;
-    icon: typeof Copy;
+    icon: React.FC<ISvgIcons>;
     action: () => void;
     shouldRender: boolean;
   };
diff --git a/apps/web/ce/components/issues/issue-layouts/quick-action-dropdowns/duplicate-modal.tsx b/apps/web/ce/components/issues/issue-layouts/quick-action-dropdowns/duplicate-modal.tsx
index c186c77e3..b8b142f74 100644
--- a/apps/web/ce/components/issues/issue-layouts/quick-action-dropdowns/duplicate-modal.tsx
+++ b/apps/web/ce/components/issues/issue-layouts/quick-action-dropdowns/duplicate-modal.tsx
@@ -1,4 +1,8 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
 
 type TDuplicateWorkItemModalProps = {
   workItemId: string;
diff --git a/apps/web/ce/components/issues/issue-layouts/quick-action-dropdowns/index.ts b/apps/web/ce/components/issues/issue-layouts/quick-action-dropdowns/index.ts
index 470ae9181..e99ab1e46 100644
--- a/apps/web/ce/components/issues/issue-layouts/quick-action-dropdowns/index.ts
+++ b/apps/web/ce/components/issues/issue-layouts/quick-action-dropdowns/index.ts
@@ -1,2 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./duplicate-modal";
 export * from "./copy-menu-helper";
diff --git a/apps/web/ce/components/issues/issue-layouts/utils.tsx b/apps/web/ce/components/issues/issue-layouts/utils.tsx
index 82a26a00c..0a0ddf7f7 100644
--- a/apps/web/ce/components/issues/issue-layouts/utils.tsx
+++ b/apps/web/ce/components/issues/issue-layouts/utils.tsx
@@ -1,9 +1,16 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { FC } from "react";
-import { CalendarDays, LayersIcon, Link2, Paperclip } from "lucide-react";
+import { CalendarDays, LayersIcon, Paperclip } from "lucide-react";
 // types
 import { ISSUE_GROUP_BY_OPTIONS } from "@plane/constants";
 import type { ISvgIcons } from "@plane/propel/icons";
 import {
+  LinkIcon,
   CycleIcon,
   StatePropertyIcon,
   ModuleIcon,
@@ -82,7 +89,7 @@ export const SpreadSheetPropertyIconMap: Record<string, FC<ISvgIcons>> = {
   PriorityPropertyIcon: PriorityPropertyIcon,
   StartDatePropertyIcon: StartDatePropertyIcon,
   StatePropertyIcon: StatePropertyIcon,
-  Link2: Link2,
+  Link2: LinkIcon,
   Paperclip: Paperclip,
   LayersIcon: LayersIcon,
 };
diff --git a/apps/web/ce/components/issues/issue-modal/index.ts b/apps/web/ce/components/issues/issue-modal/index.ts
index 304be8c91..006cc1c82 100644
--- a/apps/web/ce/components/issues/issue-modal/index.ts
+++ b/apps/web/ce/components/issues/issue-modal/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./provider";
 export * from "./issue-type-select";
 export * from "./template-select";
diff --git a/apps/web/ce/components/issues/issue-modal/issue-type-select.tsx b/apps/web/ce/components/issues/issue-modal/issue-type-select.tsx
index 2a02e1367..dd4c29cca 100644
--- a/apps/web/ce/components/issues/issue-modal/issue-type-select.tsx
+++ b/apps/web/ce/components/issues/issue-modal/issue-type-select.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { Control } from "react-hook-form";
 // plane imports
 import type { EditorRefApi } from "@plane/editor";
diff --git a/apps/web/ce/components/issues/issue-modal/modal-additional-properties.tsx b/apps/web/ce/components/issues/issue-modal/modal-additional-properties.tsx
index c0011d51a..0255407ae 100644
--- a/apps/web/ce/components/issues/issue-modal/modal-additional-properties.tsx
+++ b/apps/web/ce/components/issues/issue-modal/modal-additional-properties.tsx
@@ -1,4 +1,8 @@
-import type React from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
 
 export type TWorkItemModalAdditionalPropertiesProps = {
   isDraft?: boolean;
diff --git a/apps/web/ce/components/issues/issue-modal/provider.tsx b/apps/web/ce/components/issues/issue-modal/provider.tsx
index 82763907f..0494b35a0 100644
--- a/apps/web/ce/components/issues/issue-modal/provider.tsx
+++ b/apps/web/ce/components/issues/issue-modal/provider.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React, { useState } from "react";
 import { observer } from "mobx-react";
 // plane imports
diff --git a/apps/web/ce/components/issues/issue-modal/template-select.tsx b/apps/web/ce/components/issues/issue-modal/template-select.tsx
index 7cad3debb..ee0a081c6 100644
--- a/apps/web/ce/components/issues/issue-modal/template-select.tsx
+++ b/apps/web/ce/components/issues/issue-modal/template-select.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export type TWorkItemTemplateDropdownSize = "xs" | "sm";
 
 export type TWorkItemTemplateSelect = {
diff --git a/apps/web/ce/components/issues/quick-add/index.ts b/apps/web/ce/components/issues/quick-add/index.ts
index 1efe34c51..d98033459 100644
--- a/apps/web/ce/components/issues/quick-add/index.ts
+++ b/apps/web/ce/components/issues/quick-add/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./root";
diff --git a/apps/web/ce/components/issues/quick-add/root.tsx b/apps/web/ce/components/issues/quick-add/root.tsx
index 4857d8bb1..bb5ab7d00 100644
--- a/apps/web/ce/components/issues/quick-add/root.tsx
+++ b/apps/web/ce/components/issues/quick-add/root.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { FC } from "react";
 import { useEffect, useRef } from "react";
 import { observer } from "mobx-react";
diff --git a/apps/web/ce/components/issues/worklog/activity/filter-root.tsx b/apps/web/ce/components/issues/worklog/activity/filter-root.tsx
index 27b109986..623980ffe 100644
--- a/apps/web/ce/components/issues/worklog/activity/filter-root.tsx
+++ b/apps/web/ce/components/issues/worklog/activity/filter-root.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // plane imports
 import type { TActivityFilters, TActivityFilterOption } from "@plane/constants";
 import { ACTIVITY_FILTER_TYPE_OPTIONS } from "@plane/constants";
diff --git a/apps/web/ce/components/issues/worklog/activity/index.ts b/apps/web/ce/components/issues/worklog/activity/index.ts
index 1efe34c51..d98033459 100644
--- a/apps/web/ce/components/issues/worklog/activity/index.ts
+++ b/apps/web/ce/components/issues/worklog/activity/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./root";
diff --git a/apps/web/ce/components/issues/worklog/activity/root.tsx b/apps/web/ce/components/issues/worklog/activity/root.tsx
index 7b5a8ca9a..3b3d33729 100644
--- a/apps/web/ce/components/issues/worklog/activity/root.tsx
+++ b/apps/web/ce/components/issues/worklog/activity/root.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { TIssueActivityComment } from "@plane/types";
 
 type TIssueActivityWorklog = {
diff --git a/apps/web/ce/components/issues/worklog/activity/worklog-create-button.tsx b/apps/web/ce/components/issues/worklog/activity/worklog-create-button.tsx
index 8e9ac541b..5ded8d02b 100644
--- a/apps/web/ce/components/issues/worklog/activity/worklog-create-button.tsx
+++ b/apps/web/ce/components/issues/worklog/activity/worklog-create-button.tsx
@@ -1,4 +1,8 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
 
 type TIssueActivityWorklogCreateButton = {
   workspaceSlug: string;
diff --git a/apps/web/ce/components/issues/worklog/property/index.ts b/apps/web/ce/components/issues/worklog/property/index.ts
index 1efe34c51..d98033459 100644
--- a/apps/web/ce/components/issues/worklog/property/index.ts
+++ b/apps/web/ce/components/issues/worklog/property/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./root";
diff --git a/apps/web/ce/components/issues/worklog/property/root.tsx b/apps/web/ce/components/issues/worklog/property/root.tsx
index 5ab77f3dd..7eff7d6a8 100644
--- a/apps/web/ce/components/issues/worklog/property/root.tsx
+++ b/apps/web/ce/components/issues/worklog/property/root.tsx
@@ -1,4 +1,8 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
 
 type TIssueWorklogProperty = {
   workspaceSlug: string;
diff --git a/apps/web/ce/components/license/index.ts b/apps/web/ce/components/license/index.ts
index 031608e25..dd65a9ec3 100644
--- a/apps/web/ce/components/license/index.ts
+++ b/apps/web/ce/components/license/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./modal";
diff --git a/apps/web/ce/components/license/modal/index.ts b/apps/web/ce/components/license/modal/index.ts
index 8add86e5d..c255805ae 100644
--- a/apps/web/ce/components/license/modal/index.ts
+++ b/apps/web/ce/components/license/modal/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./upgrade-modal";
diff --git a/apps/web/ce/components/license/modal/upgrade-modal.tsx b/apps/web/ce/components/license/modal/upgrade-modal.tsx
index 0f5e651e1..eebabe44a 100644
--- a/apps/web/ce/components/license/modal/upgrade-modal.tsx
+++ b/apps/web/ce/components/license/modal/upgrade-modal.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 // plane imports
 import {
@@ -19,7 +24,7 @@ import type { TCheckoutParams } from "@/components/license/modal/card/checkout-b
 
 // Constants
 const COMMON_CARD_CLASSNAME = "flex flex-col w-full h-full justify-end col-span-12 sm:col-span-6 xl:col-span-3";
-const COMMON_EXTRA_FEATURES_CLASSNAME = "pt-2 text-center text-xs text-custom-primary-200 font-medium hover:underline";
+const COMMON_EXTRA_FEATURES_CLASSNAME = "pt-2 text-center text-caption-md-medium text-accent-primary hover:underline";
 
 export type PaidPlanUpgradeModalProps = {
   isOpen: boolean;
@@ -44,13 +49,13 @@ export const PaidPlanUpgradeModal = observer(function PaidPlanUpgradeModal(props
 
   return (
     <ModalCore isOpen={isOpen} handleClose={handleClose} width={EModalWidth.VIIXL} className="rounded-2xl">
-      <div className="p-10 max-h-[90vh] overflow-auto">
-        <div className="grid grid-cols-12 gap-6 h-full">
+      <div className="max-h-[90vh] overflow-auto p-10">
+        <div className="grid h-full grid-cols-12 gap-6">
           {/* Free Plan Section */}
           <div className={cn(COMMON_CARD_CLASSNAME)}>
-            <div className="text-3xl font-bold leading-8 flex">Upgrade to a paid plan and unlock missing features.</div>
+            <div className="flex text-24 leading-8 font-bold">Upgrade to a paid plan and unlock missing features.</div>
             <div className="mt-4 mb-2">
-              <p className="text-sm mb-4 pr-8 text-custom-text-100">
+              <p className="mb-4 pr-8 text-13 text-primary">
                 Dashboards, Workflows, Approvals, Time Management, and other superpowers are just a click away. Upgrade
                 today to unlock features your teams need yesterday.
               </p>
diff --git a/apps/web/ce/components/navigations/index.ts b/apps/web/ce/components/navigations/index.ts
index ed2640751..b4131e932 100644
--- a/apps/web/ce/components/navigations/index.ts
+++ b/apps/web/ce/components/navigations/index.ts
@@ -1,2 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./use-navigation-items";
 export * from "./top-navigation-root";
diff --git a/apps/web/ce/components/navigations/top-navigation-root.tsx b/apps/web/ce/components/navigations/top-navigation-root.tsx
index 97de65f6c..2571ecee6 100644
--- a/apps/web/ce/components/navigations/top-navigation-root.tsx
+++ b/apps/web/ce/components/navigations/top-navigation-root.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // components
 import { observer } from "mobx-react";
 import { useParams, usePathname } from "next/navigation";
@@ -40,12 +46,12 @@ export const TopNavigationRoot = observer(function TopNavigationRoot() {
 
   return (
     <div
-      className={cn("flex items-center min-h-11 w-full px-3.5 z-[27] transition-all duration-300", {
+      className={cn("z-[27] flex min-h-10 w-full items-center bg-canvas px-3.5 transition-all duration-300", {
         "px-2": !showLabel,
       })}
     >
       {/* Workspace Menu */}
-      <div className="shrink-0 flex-1">
+      <div className="flex-1 shrink-0">
         <WorkspaceMenuRoot variant="top-navigation" />
       </div>
       {/* Power K Search */}
@@ -53,7 +59,7 @@ export const TopNavigationRoot = observer(function TopNavigationRoot() {
         <TopNavPowerK />
       </div>
       {/* Additional Actions */}
-      <div className="shrink-0 flex-1 flex gap-1 items-center justify-end">
+      <div className="flex flex-1 shrink-0 items-center justify-end gap-1">
         <Tooltip tooltipContent="Inbox" position="bottom">
           <AppSidebarItem
             variant="link"
@@ -63,7 +69,7 @@ export const TopNavigationRoot = observer(function TopNavigationRoot() {
                 <div className="relative">
                   <InboxIcon className="size-5" />
                   {totalNotifications > 0 && (
-                    <span className="absolute -top-0 -right-0 size-2 rounded-full bg-red-500" />
+                    <span className="absolute top-0 right-0 size-2 rounded-full bg-danger-primary" />
                   )}
                 </div>
               ),
@@ -73,8 +79,8 @@ export const TopNavigationRoot = observer(function TopNavigationRoot() {
         </Tooltip>
         <HelpMenuRoot />
         <StarUsOnGitHubLink />
-        <div className="flex items-center justify-center size-8 hover:bg-custom-background-80 rounded-md">
-          <UserMenuRoot size="xs" />
+        <div className="flex size-8 items-center justify-center rounded-md hover:bg-layer-1-hover">
+          <UserMenuRoot />
         </div>
       </div>
     </div>
diff --git a/apps/web/ce/components/navigations/use-navigation-items.ts b/apps/web/ce/components/navigations/use-navigation-items.ts
index db051cb63..7e085a1d2 100644
--- a/apps/web/ce/components/navigations/use-navigation-items.ts
+++ b/apps/web/ce/components/navigations/use-navigation-items.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useMemo, useCallback } from "react";
 // plane imports
 import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
diff --git a/apps/web/ce/components/onboarding/tour/root.tsx b/apps/web/ce/components/onboarding/tour/root.tsx
index f44cd5a91..6f879e392 100644
--- a/apps/web/ce/components/onboarding/tour/root.tsx
+++ b/apps/web/ce/components/onboarding/tour/root.tsx
@@ -1,7 +1,12 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useState } from "react";
 import { observer } from "mobx-react";
 // plane imports
-import { PRODUCT_TOUR_TRACKER_ELEMENTS } from "@plane/constants";
 import { Button } from "@plane/propel/button";
 import { CloseIcon, PlaneLockup } from "@plane/propel/icons";
 // assets
@@ -10,8 +15,6 @@ import IssuesTour from "@/app/assets/onboarding/issues.webp?url";
 import ModulesTour from "@/app/assets/onboarding/modules.webp?url";
 import PagesTour from "@/app/assets/onboarding/pages.webp?url";
 import ViewsTour from "@/app/assets/onboarding/views.webp?url";
-// helpers
-import { captureClick } from "@/helpers/event-tracker.helper";
 // hooks
 import { useCommandPalette } from "@/hooks/store/use-command-palette";
 import { useUser } from "@/hooks/store/user";
@@ -89,16 +92,16 @@ export const TourRoot = observer(function TourRoot(props: TOnboardingTourProps)
   return (
     <>
       {step === "welcome" ? (
-        <div className="w-4/5 overflow-hidden rounded-[10px] bg-custom-background-100 md:w-1/2 lg:w-2/5">
+        <div className="w-4/5 overflow-hidden rounded-[10px] bg-surface-1 md:w-1/2 lg:w-2/5">
           <div className="h-full overflow-hidden">
-            <div className="grid h-64 place-items-center bg-custom-primary-100">
-              <PlaneLockup className="h-10 w-auto text-white" />
+            <div className="grid h-64 place-items-center bg-accent-primary">
+              <PlaneLockup className="h-10 w-auto text-on-color" />
             </div>
             <div className="flex flex-col overflow-y-auto p-6">
-              <h3 className="font-semibold sm:text-xl">
+              <h3 className="font-semibold sm:text-18">
                 Welcome to Plane, {currentUser?.first_name} {currentUser?.last_name}
               </h3>
-              <p className="mt-3 text-sm text-custom-text-200">
+              <p className="mt-3 text-13 text-secondary">
                 We{"'"}re glad that you decided to try out Plane. You can now manage your projects with ease. Get
                 started by creating a project.
               </p>
@@ -107,9 +110,6 @@ export const TourRoot = observer(function TourRoot(props: TOnboardingTourProps)
                   <Button
                     variant="primary"
                     onClick={() => {
-                      captureClick({
-                        elementName: PRODUCT_TOUR_TRACKER_ELEMENTS.START_BUTTON,
-                      });
                       setStep("work-items");
                     }}
                   >
@@ -117,11 +117,8 @@ export const TourRoot = observer(function TourRoot(props: TOnboardingTourProps)
                   </Button>
                   <button
                     type="button"
-                    className="bg-transparent text-xs font-medium text-custom-primary-100 outline-custom-text-100"
+                    className="bg-transparent text-11 font-medium text-accent-primary outline-subtle-1"
                     onClick={() => {
-                      captureClick({
-                        elementName: PRODUCT_TOUR_TRACKER_ELEMENTS.SKIP_BUTTON,
-                      });
                       onComplete();
                     }}
                   >
@@ -133,30 +130,30 @@ export const TourRoot = observer(function TourRoot(props: TOnboardingTourProps)
           </div>
         </div>
       ) : (
-        <div className="relative grid h-3/5 w-4/5 grid-cols-10 overflow-hidden rounded-[10px] bg-custom-background-100 sm:h-3/4 md:w-1/2 lg:w-3/5">
+        <div className="relative grid h-3/5 w-4/5 grid-cols-10 overflow-hidden rounded-[10px] bg-surface-1 sm:h-3/4 md:w-1/2 lg:w-3/5">
           <button
             type="button"
-            className="fixed right-[9%] top-[19%] z-10 -translate-y-1/2 translate-x-1/2 cursor-pointer rounded-full border border-custom-text-100 p-1 sm:top-[11.5%] md:right-[24%] lg:right-[19%]"
+            className="fixed top-[19%] right-[9%] z-10 translate-x-1/2 -translate-y-1/2 cursor-pointer rounded-full border border-strong p-1 sm:top-[11.5%] md:right-[24%] lg:right-[19%]"
             onClick={onComplete}
           >
-            <CloseIcon className="h-3 w-3 text-custom-text-100" />
+            <CloseIcon className="border-strong- h-3 w-3 text-primary" />
           </button>
           <TourSidebar step={step} setStep={setStep} />
           <div className="col-span-10 h-full overflow-hidden lg:col-span-7">
             <div
-              className={`flex h-1/2 items-end overflow-hidden bg-custom-primary-100 sm:h-3/5 ${
+              className={`flex h-1/2 items-end overflow-hidden bg-accent-primary sm:h-3/5 ${
                 currentStepIndex % 2 === 0 ? "justify-end" : "justify-start"
               }`}
             >
-              <img src={currentStep?.image} className="w-full h-full object-cover" alt={currentStep?.title} />
+              <img src={currentStep?.image} className="h-full w-full object-cover" alt={currentStep?.title} />
             </div>
             <div className="flex h-1/2 flex-col overflow-y-auto p-4 sm:h-2/5">
-              <h3 className="font-semibold sm:text-xl">{currentStep?.title}</h3>
-              <p className="mt-3 text-sm text-custom-text-200">{currentStep?.description}</p>
+              <h3 className="font-semibold sm:text-18">{currentStep?.title}</h3>
+              <p className="mt-3 text-13 text-secondary">{currentStep?.description}</p>
               <div className="mt-3 flex h-full items-end justify-between gap-4">
                 <div className="flex items-center gap-4">
                   {currentStep?.prevStep && (
-                    <Button variant="neutral-primary" onClick={() => setStep(currentStep.prevStep ?? "welcome")}>
+                    <Button variant="secondary" onClick={() => setStep(currentStep.prevStep ?? "welcome")}>
                       Back
                     </Button>
                   )}
@@ -170,9 +167,6 @@ export const TourRoot = observer(function TourRoot(props: TOnboardingTourProps)
                   <Button
                     variant="primary"
                     onClick={() => {
-                      captureClick({
-                        elementName: PRODUCT_TOUR_TRACKER_ELEMENTS.CREATE_PROJECT_BUTTON,
-                      });
                       onComplete();
                       toggleCreateProjectModal(true);
                     }}
diff --git a/apps/web/ce/components/onboarding/tour/sidebar.tsx b/apps/web/ce/components/onboarding/tour/sidebar.tsx
index 1c7abe20f..7a54ec79d 100644
--- a/apps/web/ce/components/onboarding/tour/sidebar.tsx
+++ b/apps/web/ce/components/onboarding/tour/sidebar.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // plane imports
 import { CycleIcon, ModuleIcon, PageIcon, ViewsIcon, WorkItemsIcon } from "@plane/propel/icons";
 import type { ISvgIcons } from "@plane/propel/icons";
@@ -43,8 +49,8 @@ type Props = {
 
 export function TourSidebar({ step, setStep }: Props) {
   return (
-    <div className="col-span-3 hidden bg-custom-background-90 p-8 lg:block">
-      <h3 className="text-lg font-medium">
+    <div className="col-span-3 hidden bg-surface-2 p-8 lg:block">
+      <h3 className="text-16 font-medium">
         Let{"'"}s get started!
         <br />
         Get more out of Plane.
@@ -53,10 +59,8 @@ export function TourSidebar({ step, setStep }: Props) {
         {sidebarOptions.map((option) => (
           <h5
             key={option.key}
-            className={`flex cursor-pointer items-center gap-2 border-l-[3px] py-0.5 pl-3 pr-2 text-sm font-medium capitalize ${
-              step === option.key
-                ? "border-custom-primary-100 text-custom-primary-100"
-                : "border-transparent text-custom-text-200"
+            className={`flex cursor-pointer items-center gap-2 border-l-[3px] py-0.5 pr-2 pl-3 text-13 font-medium capitalize ${
+              step === option.key ? "border-accent-strong text-accent-primary" : "border-transparent text-secondary"
             }`}
             onClick={() => setStep(option.key)}
             role="button"
diff --git a/apps/web/ce/components/pages/editor/ai/ask-pi-menu.tsx b/apps/web/ce/components/pages/editor/ai/ask-pi-menu.tsx
index 7e2e70a31..6f47e7f8c 100644
--- a/apps/web/ce/components/pages/editor/ai/ask-pi-menu.tsx
+++ b/apps/web/ce/components/pages/editor/ai/ask-pi-menu.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useState } from "react";
 import { CircleArrowUp, CornerDownRight, RefreshCcw, Sparkles } from "lucide-react";
 // ui
@@ -33,7 +39,7 @@ export function AskPiMenu(props: Props) {
           "items-start": response,
         })}
       >
-        <span className="flex-shrink-0 size-7 grid place-items-center text-custom-text-200 rounded-full border border-custom-border-200">
+        <span className="grid size-7 flex-shrink-0 place-items-center rounded-full border border-subtle text-secondary">
           <Sparkles className="size-3" />
         </span>
         {response ? (
@@ -53,7 +59,7 @@ export function AskPiMenu(props: Props) {
             <div className="mt-3 flex items-center gap-4">
               <button
                 type="button"
-                className="p-1 text-custom-text-300 text-sm font-medium rounded hover:bg-custom-background-80 outline-none"
+                className="rounded-sm p-1 text-13 font-medium text-tertiary outline-none hover:bg-layer-1"
                 onClick={() => handleInsertText(false)}
               >
                 Replace selection
@@ -61,16 +67,16 @@ export function AskPiMenu(props: Props) {
               <Tooltip tooltipContent="Add to next line">
                 <button
                   type="button"
-                  className="flex-shrink-0 size-6 grid place-items-center rounded hover:bg-custom-background-80 outline-none"
+                  className="grid size-6 flex-shrink-0 place-items-center rounded-sm outline-none hover:bg-layer-1"
                   onClick={() => handleInsertText(true)}
                 >
-                  <CornerDownRight className="text-custom-text-300 size-4" />
+                  <CornerDownRight className="size-4 text-tertiary" />
                 </button>
               </Tooltip>
               <Tooltip tooltipContent="Re-generate response">
                 <button
                   type="button"
-                  className="flex-shrink-0 size-6 grid place-items-center rounded hover:bg-custom-background-80 outline-none"
+                  className="grid size-6 flex-shrink-0 place-items-center rounded-sm outline-none hover:bg-layer-1"
                   onClick={(e) => {
                     e.preventDefault();
                     e.stopPropagation();
@@ -79,7 +85,7 @@ export function AskPiMenu(props: Props) {
                   disabled={isRegenerating}
                 >
                   <RefreshCcw
-                    className={cn("text-custom-text-300 size-4", {
+                    className={cn("size-4 text-tertiary", {
                       "animate-spin": isRegenerating,
                     })}
                   />
@@ -88,23 +94,23 @@ export function AskPiMenu(props: Props) {
             </div>
           </div>
         ) : (
-          <p className="text-sm text-custom-text-200">Pi is answering...</p>
+          <p className="text-13 text-secondary">AI is answering...</p>
         )}
       </div>
-      <div className="py-3 px-4">
-        <div className="flex items-center gap-2 border border-custom-border-200 rounded-md p-2">
-          <span className="flex-shrink-0 size-3 grid place-items-center">
-            <Sparkles className="size-3 text-custom-text-200" />
+      <div className="px-4 py-3">
+        <div className="flex items-center gap-2 rounded-md border border-subtle p-2">
+          <span className="grid size-3 flex-shrink-0 place-items-center">
+            <Sparkles className="size-3 text-secondary" />
           </span>
           <input
             type="text"
-            className="w-full bg-transparent border-none outline-none placeholder:text-custom-text-400 text-sm"
+            className="w-full border-none bg-transparent text-13 outline-none placeholder:text-placeholder"
             value={query}
             onChange={(e) => setQuery(e.target.value)}
-            placeholder="Tell Pi what to do..."
+            placeholder="Tell AI what to do..."
           />
-          <span className="flex-shrink-0 size-4 grid place-items-center">
-            <CircleArrowUp className="size-4 text-custom-text-200" />
+          <span className="grid size-4 flex-shrink-0 place-items-center">
+            <CircleArrowUp className="size-4 text-secondary" />
           </span>
         </div>
       </div>
diff --git a/apps/web/ce/components/pages/editor/ai/index.ts b/apps/web/ce/components/pages/editor/ai/index.ts
index d21eb63d7..c2d7f6449 100644
--- a/apps/web/ce/components/pages/editor/ai/index.ts
+++ b/apps/web/ce/components/pages/editor/ai/index.ts
@@ -1,2 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./ask-pi-menu";
 export * from "./menu";
diff --git a/apps/web/ce/components/pages/editor/ai/menu.tsx b/apps/web/ce/components/pages/editor/ai/menu.tsx
index ac8d74b7a..284af138a 100644
--- a/apps/web/ce/components/pages/editor/ai/menu.tsx
+++ b/apps/web/ce/components/pages/editor/ai/menu.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React, { useEffect, useRef, useState } from "react";
 import type { LucideIcon } from "lucide-react";
 import { CornerDownRight, RefreshCcw, Sparkles, TriangleAlert } from "lucide-react";
@@ -10,7 +16,7 @@ import { Tooltip } from "@plane/propel/tooltip";
 import { cn } from "@plane/utils";
 import { RichTextEditor } from "@/components/editor/rich-text";
 // plane web constants
-import { AI_EDITOR_TASKS, LOADING_TEXTS } from "@/plane-web/constants/ai";
+import { AI_EDITOR_TASKS, LOADING_TEXTS } from "@/constants/ai";
 // plane web services
 import type { TTaskPayload } from "@/services/ai.service";
 import { AIService } from "@/services/ai.service";
@@ -138,7 +144,7 @@ export function EditorAIMenu(props: Props) {
   return (
     <div
       className={cn(
-        "w-[210px] flex flex-col rounded-md border-[0.5px] border-custom-border-300 bg-custom-background-100 shadow-custom-shadow-rg transition-all",
+        "flex w-[210px] flex-col rounded-md border-[0.5px] border-strong bg-surface-1 shadow-raised-200 transition-all",
         {
           "w-[700px]": activeTask,
         }
@@ -146,10 +152,10 @@ export function EditorAIMenu(props: Props) {
     >
       <div
         className={cn("flex max-h-72 w-full", {
-          "divide-x divide-custom-border-200": activeTask,
+          "divide-x divide-subtle-1": activeTask,
         })}
       >
-        <div className="flex-shrink-0 w-[210px] overflow-y-auto px-2 py-2.5 transition-all">
+        <div className="w-[210px] flex-shrink-0 overflow-y-auto px-2 py-2.5 transition-all">
           {MENU_ITEMS.map((item) => {
             const isActiveTask = activeTask === item.key;
 
@@ -158,9 +164,9 @@ export function EditorAIMenu(props: Props) {
                 key={item.key}
                 type="button"
                 className={cn(
-                  "w-full flex items-center justify-between gap-2 truncate rounded px-1 py-1.5 text-xs text-custom-text-200 hover:bg-custom-background-80 transition-colors",
+                  "flex w-full items-center justify-between gap-2 truncate rounded-sm px-1 py-1.5 text-11 text-secondary transition-colors hover:bg-layer-1",
                   {
-                    "bg-custom-background-80": isActiveTask,
+                    "bg-layer-1": isActiveTask,
                   }
                 )}
                 onClick={(e) => {
@@ -169,13 +175,13 @@ export function EditorAIMenu(props: Props) {
                   handleClick(item.key);
                 }}
               >
-                <span className="flex-shrink-0 flex items-center gap-2 truncate">
-                  <item.icon className="flex-shrink-0 size-3" />
+                <span className="flex flex-shrink-0 items-center gap-2 truncate">
+                  <item.icon className="size-3 flex-shrink-0" />
                   {item.label}
                 </span>
                 <ChevronRightIcon
-                  className={cn("flex-shrink-0 size-3 opacity-0 pointer-events-none transition-opacity", {
-                    "opacity-100 pointer-events-auto": isActiveTask,
+                  className={cn("pointer-events-none size-3 flex-shrink-0 opacity-0 transition-opacity", {
+                    "pointer-events-auto opacity-100": isActiveTask,
                   })}
                 />
               </button>
@@ -184,8 +190,8 @@ export function EditorAIMenu(props: Props) {
         </div>
         <div
           ref={responseContainerRef}
-          className={cn("flex-shrink-0 w-0 overflow-hidden transition-all", {
-            "w-[490px] overflow-auto vertical-scrollbar scrollbar-sm": activeTask,
+          className={cn("w-0 flex-shrink-0 overflow-hidden transition-all", {
+            "vertical-scrollbar scrollbar-sm w-[490px] overflow-auto": activeTask,
           })}
         >
           {activeTask === AI_EDITOR_TASKS.ASK_ANYTHING ? (
@@ -203,7 +209,7 @@ export function EditorAIMenu(props: Props) {
                   "items-start": response,
                 })}
               >
-                <span className="flex-shrink-0 size-7 grid place-items-center text-custom-text-200 rounded-full border border-custom-border-200">
+                <span className="grid size-7 flex-shrink-0 place-items-center rounded-full border border-subtle text-secondary">
                   <Sparkles className="size-3" />
                 </span>
                 {response ? (
@@ -223,7 +229,7 @@ export function EditorAIMenu(props: Props) {
                     <div className="mt-3 flex items-center gap-4">
                       <button
                         type="button"
-                        className="p-1 text-custom-text-300 text-sm font-medium rounded hover:bg-custom-background-80 outline-none"
+                        className="rounded-sm p-1 text-13 font-medium text-tertiary outline-none hover:bg-layer-1"
                         onClick={() => handleInsertText(false)}
                       >
                         Replace selection
@@ -231,16 +237,16 @@ export function EditorAIMenu(props: Props) {
                       <Tooltip tooltipContent="Add to next line">
                         <button
                           type="button"
-                          className="flex-shrink-0 size-6 grid place-items-center rounded hover:bg-custom-background-80 outline-none"
+                          className="grid size-6 flex-shrink-0 place-items-center rounded-sm outline-none hover:bg-layer-1"
                           onClick={() => handleInsertText(true)}
                         >
-                          <CornerDownRight className="text-custom-text-300 size-4" />
+                          <CornerDownRight className="size-4 text-tertiary" />
                         </button>
                       </Tooltip>
                       <Tooltip tooltipContent="Re-generate response">
                         <button
                           type="button"
-                          className="flex-shrink-0 size-6 grid place-items-center rounded hover:bg-custom-background-80 outline-none"
+                          className="grid size-6 flex-shrink-0 place-items-center rounded-sm outline-none hover:bg-layer-1"
                           onClick={(e) => {
                             e.preventDefault();
                             e.stopPropagation();
@@ -249,7 +255,7 @@ export function EditorAIMenu(props: Props) {
                           disabled={isRegenerating}
                         >
                           <RefreshCcw
-                            className={cn("text-custom-text-300 size-4", {
+                            className={cn("size-4 text-tertiary", {
                               "animate-spin": isRegenerating,
                             })}
                           />
@@ -258,20 +264,20 @@ export function EditorAIMenu(props: Props) {
                     </div>
                   </div>
                 ) : (
-                  <p className="text-sm text-custom-text-200">
+                  <p className="text-13 text-secondary">
                     {activeTask ? LOADING_TEXTS[activeTask] : "Pi is writing"}...
                   </p>
                 )}
               </div>
-              <div className="sticky bottom-0 w-full bg-custom-background-100 pl-[54.8px] py-2 flex items-center gap-2">
+              <div className="sticky bottom-0 flex w-full items-center gap-2 bg-surface-1 py-2 pl-[54.8px]">
                 {TONES_LIST.map((tone) => (
                   <button
                     key={tone.key}
                     type="button"
                     className={cn(
-                      "p-1 text-xs text-custom-text-200 font-medium bg-custom-background-80 rounded transition-colors outline-none",
+                      "rounded-sm bg-layer-1 p-1 text-11 font-medium text-secondary transition-colors outline-none",
                       {
-                        "bg-custom-primary-100/20 text-custom-primary-100": tone.key === "default",
+                        "bg-accent-primary/20 text-accent-primary": tone.key === "default",
                       }
                     )}
                     onClick={(e) => {
@@ -289,11 +295,11 @@ export function EditorAIMenu(props: Props) {
         </div>
       </div>
       {activeTask && (
-        <div className="bg-custom-background-90 rounded-b-md py-2 px-4 text-custom-text-300 flex items-center gap-2 border-t border-custom-border-200">
-          <span className="flex-shrink-0 size-4 grid place-items-center">
+        <div className="flex items-center gap-2 rounded-b-md border-t border-subtle bg-surface-2 px-4 py-2 text-tertiary">
+          <span className="grid size-4 flex-shrink-0 place-items-center">
             <TriangleAlert className="size-3" />
           </span>
-          <p className="flex-shrink-0 text-xs font-medium">
+          <p className="flex-shrink-0 text-11 font-medium">
             By using this feature, you consent to sharing the message with a 3rd party service.
           </p>
         </div>
diff --git a/apps/web/ce/components/pages/editor/embed/index.ts b/apps/web/ce/components/pages/editor/embed/index.ts
index e16822834..7ab6ada6b 100644
--- a/apps/web/ce/components/pages/editor/embed/index.ts
+++ b/apps/web/ce/components/pages/editor/embed/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./issue-embed-upgrade-card";
diff --git a/apps/web/ce/components/pages/editor/embed/issue-embed-upgrade-card.tsx b/apps/web/ce/components/pages/editor/embed/issue-embed-upgrade-card.tsx
index 8f7b6f8b6..bcd5cebc4 100644
--- a/apps/web/ce/components/pages/editor/embed/issue-embed-upgrade-card.tsx
+++ b/apps/web/ce/components/pages/editor/embed/issue-embed-upgrade-card.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // plane imports
 import { getButtonStyling } from "@plane/propel/button";
 import { cn } from "@plane/utils";
@@ -8,15 +14,15 @@ export function IssueEmbedUpgradeCard(props: any) {
   return (
     <div
       className={cn(
-        "w-full bg-custom-background-80 rounded-md border-[0.5px] border-custom-border-200 shadow-custom-shadow-2xs flex items-center justify-between gap-5 px-5 py-2 max-md:flex-wrap",
+        "flex w-full items-center justify-between gap-5 rounded-md border-[0.5px] border-subtle bg-layer-1 px-5 py-2 shadow-raised-100 max-md:flex-wrap",
         {
           "border-2": props.selected,
         }
       )}
     >
       <div className="flex items-center gap-4">
-        <ProIcon className="flex-shrink-0 size-4" />
-        <p className="text-custom-text !text-base">
+        <ProIcon className="size-4 flex-shrink-0" />
+        <p className="!text-14 text-secondary">
           Embed and access issues in pages seamlessly, upgrade to Plane Pro now.
         </p>
       </div>
@@ -24,7 +30,7 @@ export function IssueEmbedUpgradeCard(props: any) {
         href="https://plane.so/pro"
         target="_blank"
         rel="noopener noreferrer"
-        className={cn(getButtonStyling("primary", "md"), "no-underline")}
+        className={cn(getButtonStyling("primary", "base"), "no-underline")}
       >
         Upgrade
       </a>
diff --git a/apps/web/ce/components/pages/editor/index.ts b/apps/web/ce/components/pages/editor/index.ts
index 88b26fa27..d95ce40f0 100644
--- a/apps/web/ce/components/pages/editor/index.ts
+++ b/apps/web/ce/components/pages/editor/index.ts
@@ -1,2 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./ai";
 export * from "./embed";
diff --git a/apps/web/ce/components/pages/extra-actions.tsx b/apps/web/ce/components/pages/extra-actions.tsx
index 28ebe1537..a6eaee633 100644
--- a/apps/web/ce/components/pages/extra-actions.tsx
+++ b/apps/web/ce/components/pages/extra-actions.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // store
 import type { EPageStoreType } from "@/plane-web/hooks/store";
 import type { TPageInstance } from "@/store/pages/base-page";
diff --git a/apps/web/ce/components/pages/header/collaborators-list.tsx b/apps/web/ce/components/pages/header/collaborators-list.tsx
index 6dbd4cf81..1deaf4676 100644
--- a/apps/web/ce/components/pages/header/collaborators-list.tsx
+++ b/apps/web/ce/components/pages/header/collaborators-list.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // store
 import type { TPageInstance } from "@/store/pages/base-page";
 
diff --git a/apps/web/ce/components/pages/header/lock-control.tsx b/apps/web/ce/components/pages/header/lock-control.tsx
index c2ee72f6d..c60341237 100644
--- a/apps/web/ce/components/pages/header/lock-control.tsx
+++ b/apps/web/ce/components/pages/header/lock-control.tsx
@@ -1,11 +1,14 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useState, useEffect, useRef } from "react";
 import { observer } from "mobx-react";
 import { LockKeyhole, LockKeyholeOpen } from "lucide-react";
 // plane imports
-import { PROJECT_PAGE_TRACKER_ELEMENTS } from "@plane/constants";
 import { Tooltip } from "@plane/propel/tooltip";
-// helpers
-import { captureClick } from "@/helpers/event-tracker.helper";
 // hooks
 import { usePageOperations } from "@/hooks/use-page-operations";
 // store
@@ -79,8 +82,7 @@ export const PageLockControl = observer(function PageLockControl({ page }: Props
           <button
             type="button"
             onClick={toggleLock}
-            data-ph-element={PROJECT_PAGE_TRACKER_ELEMENTS.LOCK_BUTTON}
-            className="flex-shrink-0 size-6 grid place-items-center rounded text-custom-text-200 hover:text-custom-text-100 hover:bg-custom-background-80 transition-colors"
+            className="grid size-6 flex-shrink-0 place-items-center rounded-sm text-secondary transition-colors hover:bg-layer-1 hover:text-primary"
             aria-label="Lock"
           >
             <LockKeyhole className="size-3.5" />
@@ -92,12 +94,11 @@ export const PageLockControl = observer(function PageLockControl({ page }: Props
         <button
           type="button"
           onClick={toggleLock}
-          data-ph-element={PROJECT_PAGE_TRACKER_ELEMENTS.LOCK_BUTTON}
-          className="h-6 flex items-center gap-1 px-2 rounded text-custom-primary-100 bg-custom-primary-100/20 hover:bg-custom-primary-100/30 transition-colors"
+          className="flex h-6 items-center gap-1 rounded-sm bg-accent-primary/20 px-2 text-accent-primary transition-colors hover:bg-accent-primary/30"
           aria-label="Locked"
         >
-          <LockKeyhole className="flex-shrink-0 size-3.5 animate-lock-icon" />
-          <span className="text-xs font-medium whitespace-nowrap overflow-hidden transition-all duration-500 ease-out animate-text-slide-in">
+          <LockKeyhole className="animate-lock-icon size-3.5 flex-shrink-0" />
+          <span className="animate-text-slide-in overflow-hidden text-11 font-medium whitespace-nowrap transition-all duration-500 ease-out">
             Locked
           </span>
         </button>
@@ -105,11 +106,11 @@ export const PageLockControl = observer(function PageLockControl({ page }: Props
 
       {displayState === "unlocked" && (
         <div
-          className="h-6 flex items-center gap-1 px-2 rounded text-custom-text-200 animate-fade-out"
+          className="flex h-6 animate-fade-out items-center gap-1 rounded-sm px-2 text-secondary"
           aria-label="Unlocked"
         >
-          <LockKeyholeOpen className="flex-shrink-0 size-3.5 animate-unlock-icon" />
-          <span className="text-xs font-medium whitespace-nowrap overflow-hidden transition-all duration-500 ease-out animate-text-slide-in animate-text-fade-out">
+          <LockKeyholeOpen className="animate-unlock-icon size-3.5 flex-shrink-0" />
+          <span className="animate-text-slide-in animate-text-fade-out overflow-hidden text-11 font-medium whitespace-nowrap transition-all duration-500 ease-out">
             Unlocked
           </span>
         </div>
diff --git a/apps/web/ce/components/pages/header/move-control.tsx b/apps/web/ce/components/pages/header/move-control.tsx
index dee6b88ba..744893dbb 100644
--- a/apps/web/ce/components/pages/header/move-control.tsx
+++ b/apps/web/ce/components/pages/header/move-control.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // store
 import type { TPageInstance } from "@/store/pages/base-page";
 
diff --git a/apps/web/ce/components/pages/header/share-control.tsx b/apps/web/ce/components/pages/header/share-control.tsx
index 3b1910557..d84ee26bd 100644
--- a/apps/web/ce/components/pages/header/share-control.tsx
+++ b/apps/web/ce/components/pages/header/share-control.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { EPageStoreType } from "@/plane-web/hooks/store";
 // store
 import type { TPageInstance } from "@/store/pages/base-page";
diff --git a/apps/web/ce/components/pages/index.ts b/apps/web/ce/components/pages/index.ts
index c4131c5f9..12beee9cd 100644
--- a/apps/web/ce/components/pages/index.ts
+++ b/apps/web/ce/components/pages/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./editor";
 export * from "./modals";
 export * from "./extra-actions";
diff --git a/apps/web/ce/components/pages/modals/index.ts b/apps/web/ce/components/pages/modals/index.ts
index c1c5c24d2..ee765fe16 100644
--- a/apps/web/ce/components/pages/modals/index.ts
+++ b/apps/web/ce/components/pages/modals/index.ts
@@ -1,2 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./move-page-modal";
 export * from "./modals";
diff --git a/apps/web/ce/components/pages/modals/modals.tsx b/apps/web/ce/components/pages/modals/modals.tsx
index ddfe5f3d1..84952fbf4 100644
--- a/apps/web/ce/components/pages/modals/modals.tsx
+++ b/apps/web/ce/components/pages/modals/modals.tsx
@@ -1,4 +1,9 @@
-import type React from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 // components
 import type { EPageStoreType } from "@/plane-web/hooks/store";
@@ -10,6 +15,6 @@ export type TPageModalsProps = {
   storeType: EPageStoreType;
 };
 
-export const PageModals = observer(function PageModals(props: TPageModalsProps) {
+export const PageModals = observer(function PageModals(_props: TPageModalsProps) {
   return null;
 });
diff --git a/apps/web/ce/components/pages/modals/move-page-modal.tsx b/apps/web/ce/components/pages/modals/move-page-modal.tsx
index 9abe0e4ec..39c3a0222 100644
--- a/apps/web/ce/components/pages/modals/move-page-modal.tsx
+++ b/apps/web/ce/components/pages/modals/move-page-modal.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // store types
 import type { TPageInstance } from "@/store/pages/base-page";
 
diff --git a/apps/web/ce/components/pages/navigation-pane/index.ts b/apps/web/ce/components/pages/navigation-pane/index.ts
index 79ee20c26..1eb3094a1 100644
--- a/apps/web/ce/components/pages/navigation-pane/index.ts
+++ b/apps/web/ce/components/pages/navigation-pane/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export type TPageNavigationPaneTab = "outline" | "info" | "assets";
 
 export const PAGE_NAVIGATION_PANE_TABS_LIST: Record<
diff --git a/apps/web/ce/components/pages/navigation-pane/tab-panels/assets.tsx b/apps/web/ce/components/pages/navigation-pane/tab-panels/assets.tsx
index 45d606286..68487f9c6 100644
--- a/apps/web/ce/components/pages/navigation-pane/tab-panels/assets.tsx
+++ b/apps/web/ce/components/pages/navigation-pane/tab-panels/assets.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // plane imports
 import type { TEditorAsset } from "@plane/editor";
 // store
diff --git a/apps/web/ce/components/pages/navigation-pane/tab-panels/empty-states/assets.tsx b/apps/web/ce/components/pages/navigation-pane/tab-panels/empty-states/assets.tsx
index 9754f1463..282980698 100644
--- a/apps/web/ce/components/pages/navigation-pane/tab-panels/empty-states/assets.tsx
+++ b/apps/web/ce/components/pages/navigation-pane/tab-panels/empty-states/assets.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useTheme } from "next-themes";
 // plane imports
 import { useTranslation } from "@plane/i18n";
@@ -14,16 +20,12 @@ export function PageNavigationPaneAssetsTabEmptyState() {
   const { t } = useTranslation();
 
   return (
-    <div className="size-full grid place-items-center">
+    <div className="grid size-full place-items-center">
       <div className="flex flex-col items-center gap-y-6 text-center">
-        <img
-          src={resolvedPath}
-          className="w-[160px] h-[160px] object-contain"
-          alt="An image depicting the assets of a page"
-        />
+        <img src={resolvedPath} className="size-40 object-contain" alt="depicts the assets of a page" />
         <div className="space-y-2.5">
-          <h4 className="text-base font-medium">{t("page_navigation_pane.tabs.assets.empty_state.title")}</h4>
-          <p className="text-sm text-custom-text-200 font-medium">
+          <h4 className="text-14 font-medium">{t("page_navigation_pane.tabs.assets.empty_state.title")}</h4>
+          <p className="text-13 font-medium text-secondary">
             {t("page_navigation_pane.tabs.assets.empty_state.description")}
           </p>
         </div>
diff --git a/apps/web/ce/components/pages/navigation-pane/tab-panels/empty-states/outline.tsx b/apps/web/ce/components/pages/navigation-pane/tab-panels/empty-states/outline.tsx
index 43299c7e0..720da7556 100644
--- a/apps/web/ce/components/pages/navigation-pane/tab-panels/empty-states/outline.tsx
+++ b/apps/web/ce/components/pages/navigation-pane/tab-panels/empty-states/outline.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useTheme } from "next-themes";
 // plane imports
 import { useTranslation } from "@plane/i18n";
@@ -14,16 +20,12 @@ export function PageNavigationPaneOutlineTabEmptyState() {
   const { t } = useTranslation();
 
   return (
-    <div className="size-full grid place-items-center">
+    <div className="grid size-full place-items-center">
       <div className="flex flex-col items-center gap-y-6 text-center">
-        <img
-          src={resolvedPath}
-          className="w-[160px] h-[160px] object-contain"
-          alt="An image depicting the outline of a page"
-        />
+        <img src={resolvedPath} className="size-40 object-contain" alt="depicts the outline of a page" />
         <div className="space-y-2.5">
-          <h4 className="text-base font-medium">{t("page_navigation_pane.tabs.outline.empty_state.title")}</h4>
-          <p className="text-sm text-custom-text-200 font-medium">
+          <h4 className="text-14 font-medium">{t("page_navigation_pane.tabs.outline.empty_state.title")}</h4>
+          <p className="text-13 font-medium text-secondary">
             {t("page_navigation_pane.tabs.outline.empty_state.description")}
           </p>
         </div>
diff --git a/apps/web/ce/components/pages/navigation-pane/tab-panels/root.tsx b/apps/web/ce/components/pages/navigation-pane/tab-panels/root.tsx
index a12d26be4..14b19476b 100644
--- a/apps/web/ce/components/pages/navigation-pane/tab-panels/root.tsx
+++ b/apps/web/ce/components/pages/navigation-pane/tab-panels/root.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // store
 import type { TPageInstance } from "@/store/pages/base-page";
 // local imports
diff --git a/apps/web/ce/components/preferences/config.ts b/apps/web/ce/components/preferences/config.ts
deleted file mode 100644
index 1a67ab7d3..000000000
--- a/apps/web/ce/components/preferences/config.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { StartOfWeekPreference } from "@/components/profile/start-of-week-preference";
-import { ThemeSwitcher } from "./theme-switcher";
-
-export const PREFERENCE_COMPONENTS = {
-  theme: ThemeSwitcher,
-  start_of_week: StartOfWeekPreference,
-};
diff --git a/apps/web/ce/components/preferences/theme-switcher.tsx b/apps/web/ce/components/preferences/theme-switcher.tsx
index 3b8906fd9..b335b99b3 100644
--- a/apps/web/ce/components/preferences/theme-switcher.tsx
+++ b/apps/web/ce/components/preferences/theme-switcher.tsx
@@ -1,4 +1,10 @@
-import { useEffect, useState, useCallback } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useCallback, useMemo } from "react";
 import { observer } from "mobx-react";
 import { useTheme } from "next-themes";
 // plane imports
@@ -6,13 +12,11 @@ import type { I_THEME_OPTION } from "@plane/constants";
 import { THEME_OPTIONS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { setPromiseToast } from "@plane/propel/toast";
-import type { IUserTheme } from "@plane/types";
-import { applyTheme, unsetCustomCssVariables } from "@plane/utils";
+import { applyCustomTheme } from "@plane/utils";
 // components
 import { CustomThemeSelector } from "@/components/core/theme/custom-theme-selector";
 import { ThemeSwitch } from "@/components/core/theme/theme-switch";
-// helpers
-import { PreferencesSection } from "@/components/preferences/section";
+import { SettingsControlItem } from "@/components/settings/control-item";
 // hooks
 import { useUserProfile } from "@/hooks/store/user";
 
@@ -23,81 +27,76 @@ export const ThemeSwitcher = observer(function ThemeSwitcher(props: {
     description: string;
   };
 }) {
-  // hooks
-  const { setTheme } = useTheme();
+  // store hooks
   const { data: userProfile, updateUserTheme } = useUserProfile();
-
-  // states
-  const [currentTheme, setCurrentTheme] = useState<I_THEME_OPTION | null>(null);
-
+  // theme
+  const { setTheme } = useTheme();
+  // translation
   const { t } = useTranslation();
-
-  // initialize theme
-  useEffect(() => {
-    if (!userProfile?.theme?.theme) return;
-
-    const userThemeOption = THEME_OPTIONS.find((t) => t.value === userProfile.theme.theme);
-
-    if (userThemeOption) {
-      setCurrentTheme(userThemeOption);
-    }
+  // derived values
+  const currentTheme = useMemo(() => {
+    const userThemeOption = THEME_OPTIONS.find((t) => t.value === userProfile?.theme?.theme);
+    return userThemeOption || null;
   }, [userProfile?.theme?.theme]);
 
-  // handlers
-  const applyThemeChange = useCallback(
-    (theme: Partial<IUserTheme>) => {
-      const themeValue = theme?.theme || "system";
-      setTheme(themeValue);
-
-      if (theme?.theme === "custom" && theme?.palette) {
-        const defaultPalette = "#0d101b,#c5c5c5,#3f76ff,#0d101b,#c5c5c5";
-        const palette = theme.palette !== ",,,," ? theme.palette : defaultPalette;
-        applyTheme(palette, false);
-      } else {
-        unsetCustomCssVariables();
-      }
-    },
-    [setTheme]
-  );
-
   const handleThemeChange = useCallback(
     async (themeOption: I_THEME_OPTION) => {
       try {
-        applyThemeChange({ theme: themeOption.value });
+        setTheme(themeOption.value);
+
+        // If switching to custom theme and user has saved custom colors, apply them immediately
+        if (
+          themeOption.value === "custom" &&
+          userProfile?.theme?.primary &&
+          userProfile?.theme?.background &&
+          userProfile?.theme?.darkPalette !== undefined
+        ) {
+          applyCustomTheme(
+            userProfile.theme.primary,
+            userProfile.theme.background,
+            userProfile.theme.darkPalette ? "dark" : "light"
+          );
+        }
 
         const updatePromise = updateUserTheme({ theme: themeOption.value });
         setPromiseToast(updatePromise, {
           loading: "Updating theme...",
           success: {
-            title: "Success!",
-            message: () => "Theme updated successfully!",
+            title: "Theme updated",
+            message: () => "Reloading to apply changes...",
           },
           error: {
             title: "Error!",
-            message: () => "Failed to update the theme",
+            message: () => "Failed to update theme. Please try again.",
           },
         });
+        // Wait for the promise to resolve, then reload after showing toast
+        await updatePromise;
+        window.location.reload();
       } catch (error) {
         console.error("Error updating theme:", error);
       }
     },
-    [applyThemeChange, updateUserTheme]
+    [setTheme, updateUserTheme, userProfile]
   );
 
   if (!userProfile) return null;
 
   return (
     <>
-      <PreferencesSection
+      <SettingsControlItem
         title={t(props.option.title)}
         description={t(props.option.description)}
         control={
-          <div className="">
-            <ThemeSwitch value={currentTheme} onChange={handleThemeChange} />
-          </div>
+          <ThemeSwitch
+            value={currentTheme}
+            onChange={(themeOption) => {
+              void handleThemeChange(themeOption);
+            }}
+          />
         }
       />
-      {userProfile.theme?.theme === "custom" && <CustomThemeSelector applyThemeChange={applyThemeChange} />}
+      {userProfile.theme?.theme === "custom" && <CustomThemeSelector />}
     </>
   );
 });
diff --git a/apps/web/ce/components/projects/create/attributes.tsx b/apps/web/ce/components/projects/create/attributes.tsx
index ae7dc0730..b5dd64e69 100644
--- a/apps/web/ce/components/projects/create/attributes.tsx
+++ b/apps/web/ce/components/projects/create/attributes.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { Controller, useFormContext } from "react-hook-form";
 // plane imports
 import { NETWORK_CHOICES, ETabIndices } from "@plane/constants";
@@ -28,19 +33,19 @@ function ProjectAttributes(props: Props) {
           const currentNetwork = NETWORK_CHOICES.find((n) => n.key === value);
 
           return (
-            <div className="flex-shrink-0 h-7" tabIndex={getIndex("network")}>
+            <div className="h-7 flex-shrink-0" tabIndex={getIndex("network")}>
               <CustomSelect
                 value={value}
                 onChange={onChange}
                 label={
-                  <div className="flex items-center gap-1 h-full">
+                  <div className="flex h-full items-center gap-1">
                     {currentNetwork ? (
                       <>
                         <ProjectNetworkIcon iconKey={currentNetwork.iconKey} />
                         {t(currentNetwork.i18n_label)}
                       </>
                     ) : (
-                      <span className="text-custom-text-400">{t("select_network")}</span>
+                      <span className="text-placeholder">{t("select_network")}</span>
                     )}
                   </div>
                 }
@@ -56,7 +61,7 @@ function ProjectAttributes(props: Props) {
                       <ProjectNetworkIcon iconKey={network.iconKey} className="h-3.5 w-3.5" />
                       <div className="-mt-1">
                         <p>{t(network.i18n_label)}</p>
-                        <p className="text-xs text-custom-text-400">{t(network.description)}</p>
+                        <p className="text-11 text-placeholder">{t(network.description)}</p>
                       </div>
                     </div>
                   </CustomSelect.Option>
@@ -72,14 +77,14 @@ function ProjectAttributes(props: Props) {
         render={({ field: { value, onChange } }) => {
           if (value === undefined || value === null || typeof value === "string")
             return (
-              <div className="flex-shrink-0 h-7" tabIndex={getIndex("lead")}>
+              <div className="h-7 flex-shrink-0" tabIndex={getIndex("lead")}>
                 <MemberDropdown
                   value={value ?? null}
                   onChange={(lead) => onChange(lead === value ? null : lead)}
                   placeholder={t("lead")}
                   multiple={false}
                   buttonVariant="border-with-text"
-                  tabIndex={5}
+                  tabIndex={getIndex("lead")}
                 />
               </div>
             );
diff --git a/apps/web/ce/components/projects/create/root.tsx b/apps/web/ce/components/projects/create/root.tsx
index dce810294..3e4b5b416 100644
--- a/apps/web/ce/components/projects/create/root.tsx
+++ b/apps/web/ce/components/projects/create/root.tsx
@@ -1,24 +1,27 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useState } from "react";
 import { observer } from "mobx-react";
 import { FormProvider, useForm } from "react-hook-form";
-import { PROJECT_TRACKER_EVENTS, RANDOM_EMOJI_CODES } from "@plane/constants";
+// plane imports
 import { useTranslation } from "@plane/i18n";
-// ui
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import { EFileAssetType } from "@plane/types";
-import type { IProject } from "@plane/types";
-// constants
+// components
 import ProjectCommonAttributes from "@/components/project/create/common-attributes";
 import ProjectCreateHeader from "@/components/project/create/header";
 import ProjectCreateButtons from "@/components/project/create/project-create-buttons";
 // hooks
-import { DEFAULT_COVER_IMAGE_URL, getCoverImageType, uploadCoverImage } from "@/helpers/cover-image.helper";
-import { captureError, captureSuccess } from "@/helpers/event-tracker.helper";
+import { getCoverImageType, uploadCoverImage } from "@/helpers/cover-image.helper";
 import { useProject } from "@/hooks/store/use-project";
 import { usePlatformOS } from "@/hooks/use-platform-os";
 // plane web types
 import type { TProject } from "@/plane-web/types/projects";
-import ProjectAttributes from "./attributes";
+import { ProjectAttributes } from "./attributes";
 import { getProjectFormValues } from "./utils";
 
 export type TCreateProjectFormProps = {
@@ -37,7 +40,7 @@ export const CreateProjectForm = observer(function CreateProjectForm(props: TCre
   const { t } = useTranslation();
   const { addProjectToFavorites, createProject, updateProject } = useProject();
   // states
-  const [isChangeInIdentifierRequired, setIsChangeInIdentifierRequired] = useState(true);
+  const [shouldAutoSyncIdentifier, setShouldAutoSyncIdentifier] = useState(true);
   // form info
   const methods = useForm<TProject>({
     defaultValues: { ...getProjectFormValues(), ...data },
@@ -98,12 +101,6 @@ export const CreateProjectForm = observer(function CreateProjectForm(props: TCre
           await updateCoverImageStatus(res.id, coverImage);
           await updateProject(workspaceSlug.toString(), res.id, { cover_image_url: coverImage });
         }
-        captureSuccess({
-          eventName: PROJECT_TRACKER_EVENTS.create,
-          payload: {
-            identifier: formData.identifier,
-          },
-        });
         setToast({
           type: TOAST_TYPE.SUCCESS,
           title: t("success"),
@@ -117,13 +114,6 @@ export const CreateProjectForm = observer(function CreateProjectForm(props: TCre
       })
       .catch((err) => {
         try {
-          captureError({
-            eventName: PROJECT_TRACKER_EVENTS.create,
-            payload: {
-              identifier: formData.identifier,
-            },
-          });
-
           // Handle the new error format where codes are nested in arrays under field names
           const errorData = err?.data ?? {};
 
@@ -167,7 +157,7 @@ export const CreateProjectForm = observer(function CreateProjectForm(props: TCre
 
   const handleClose = () => {
     onClose();
-    setIsChangeInIdentifierRequired(true);
+    setShouldAutoSyncIdentifier(true);
     setTimeout(() => {
       reset();
     }, 300);
@@ -182,8 +172,8 @@ export const CreateProjectForm = observer(function CreateProjectForm(props: TCre
           <ProjectCommonAttributes
             setValue={setValue}
             isMobile={isMobile}
-            isChangeInIdentifierRequired={isChangeInIdentifierRequired}
-            setIsChangeInIdentifierRequired={setIsChangeInIdentifierRequired}
+            shouldAutoSyncIdentifier={shouldAutoSyncIdentifier}
+            setShouldAutoSyncIdentifier={setShouldAutoSyncIdentifier}
           />
           <ProjectAttributes isMobile={isMobile} />
         </div>
diff --git a/apps/web/ce/components/projects/create/template-select.tsx b/apps/web/ce/components/projects/create/template-select.tsx
index b41232852..84c089cad 100644
--- a/apps/web/ce/components/projects/create/template-select.tsx
+++ b/apps/web/ce/components/projects/create/template-select.tsx
@@ -1,11 +1,12 @@
-type TProjectTemplateDropdownSize = "xs" | "sm";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
 
 export type TProjectTemplateSelect = {
   disabled?: boolean;
-  size?: TProjectTemplateDropdownSize;
-  placeholder?: string;
-  dropDownContainerClassName?: string;
-  handleModalClose: () => void;
+  onClick?: () => void;
 };
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
diff --git a/apps/web/ce/components/projects/create/utils.ts b/apps/web/ce/components/projects/create/utils.ts
index 4605fa2bf..513819b04 100644
--- a/apps/web/ce/components/projects/create/utils.ts
+++ b/apps/web/ce/components/projects/create/utils.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { RANDOM_EMOJI_CODES } from "@plane/constants";
 import type { IProject } from "@plane/types";
 import { getRandomCoverImage } from "@/helpers/cover-image.helper";
diff --git a/apps/web/ce/components/projects/header.tsx b/apps/web/ce/components/projects/header.tsx
index 81cde755f..08e10d013 100644
--- a/apps/web/ce/components/projects/header.tsx
+++ b/apps/web/ce/components/projects/header.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { ProjectsBaseHeader } from "@/components/project/header";
 
 export function ProjectsListHeader() {
diff --git a/apps/web/ce/components/projects/mobile-header.tsx b/apps/web/ce/components/projects/mobile-header.tsx
index ca7e9f7c3..d2bf83f25 100644
--- a/apps/web/ce/components/projects/mobile-header.tsx
+++ b/apps/web/ce/components/projects/mobile-header.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useCallback } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
@@ -52,7 +58,7 @@ export const ProjectsListMobileHeader = observer(function ProjectsListMobileHead
   const isFiltersApplied = calculateTotalFilters(filters ?? {}) !== 0;
 
   return (
-    <div className="flex py-2 border-b border-custom-border-200 md:hidden bg-custom-background-100 w-full">
+    <div className="flex w-full border-b border-subtle bg-surface-1 py-2 md:hidden">
       <ProjectOrderByDropdown
         value={displayFilters?.order_by}
         onChange={(val) => {
@@ -63,13 +69,13 @@ export const ProjectsListMobileHeader = observer(function ProjectsListMobileHead
         }}
         isMobile
       />
-      <div className="border-l border-custom-border-200 flex justify-around w-full">
+      <div className="flex w-full justify-around border-l border-subtle">
         <FiltersDropdown
           icon={<ListFilter className="h-3 w-3" />}
           title={t("common.filters")}
           placement="bottom-end"
           menuButton={
-            <div className="flex text-sm items-center gap-2 neutral-primary text-custom-text-200">
+            <div className="flex items-center gap-2 text-13 text-secondary">
               <ListFilter className="h-3 w-3" />
               {t("common.filters")}
               <ChevronDownIcon className="h-3 w-3" strokeWidth={2} />
diff --git a/apps/web/ce/components/projects/navigation/helper.tsx b/apps/web/ce/components/projects/navigation/helper.tsx
index 811eb9a17..26baffb3f 100644
--- a/apps/web/ce/components/projects/navigation/helper.tsx
+++ b/apps/web/ce/components/projects/navigation/helper.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // plane imports
 import { EUserPermissions, EProjectFeatureKey } from "@plane/constants";
 import { CycleIcon, IntakeIcon, ModuleIcon, PageIcon, ViewsIcon, WorkItemsIcon } from "@plane/propel/icons";
diff --git a/apps/web/ce/components/projects/page.tsx b/apps/web/ce/components/projects/page.tsx
index 64ec67bbe..cb5af3111 100644
--- a/apps/web/ce/components/projects/page.tsx
+++ b/apps/web/ce/components/projects/page.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 import useSWR from "swr";
diff --git a/apps/web/ce/components/projects/settings/features-list.tsx b/apps/web/ce/components/projects/settings/features-list.tsx
index 26fc591fd..f256288ae 100644
--- a/apps/web/ce/components/projects/settings/features-list.tsx
+++ b/apps/web/ce/components/projects/settings/features-list.tsx
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export { ProjectFeaturesList } from "@/components/project/settings/features-list";
diff --git a/apps/web/ce/components/projects/settings/intake/header.tsx b/apps/web/ce/components/projects/settings/intake/header.tsx
index 34dd99ccd..c60466e41 100644
--- a/apps/web/ce/components/projects/settings/intake/header.tsx
+++ b/apps/web/ce/components/projects/settings/intake/header.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
@@ -39,7 +45,7 @@ export const ProjectInboxHeader = observer(function ProjectInboxHeader() {
   return (
     <Header>
       <Header.LeftItem>
-        <div className="flex items-center gap-4 flex-grow">
+        <div className="flex flex-grow items-center gap-4">
           <Breadcrumbs isLoading={currentProjectDetailsLoader === "init-loader"}>
             <CommonProjectBreadcrumbs workspaceSlug={workspaceSlug?.toString()} projectId={projectId?.toString()} />
             <Breadcrumbs.Item
@@ -47,7 +53,7 @@ export const ProjectInboxHeader = observer(function ProjectInboxHeader() {
                 <BreadcrumbLink
                   label="Intake"
                   href={`/${workspaceSlug}/projects/${projectId}/intake/`}
-                  icon={<IntakeIcon className="h-4 w-4 text-custom-text-300" />}
+                  icon={<IntakeIcon className="h-4 w-4 text-tertiary" />}
                   isLast
                 />
               }
@@ -56,9 +62,9 @@ export const ProjectInboxHeader = observer(function ProjectInboxHeader() {
           </Breadcrumbs>
 
           {loader === "pagination-loading" && (
-            <div className="flex items-center gap-1.5 text-custom-text-300">
+            <div className="flex items-center gap-1.5 text-tertiary">
               <RefreshCcw className="h-3.5 w-3.5 animate-spin" />
-              <p className="text-sm">{t("syncing")}...</p>
+              <p className="text-13">{t("syncing")}...</p>
             </div>
           )}
         </div>
@@ -72,8 +78,7 @@ export const ProjectInboxHeader = observer(function ProjectInboxHeader() {
               modalState={createIssueModal}
               handleModalClose={() => setCreateIssueModal(false)}
             />
-
-            <Button variant="primary" size="sm" onClick={() => setCreateIssueModal(true)}>
+            <Button variant="primary" size="lg" onClick={() => setCreateIssueModal(true)}>
               {t("add_work_item")}
             </Button>
           </div>
diff --git a/apps/web/ce/components/projects/settings/useProjectColumns.tsx b/apps/web/ce/components/projects/settings/useProjectColumns.tsx
index a128095c6..75e6156fc 100644
--- a/apps/web/ce/components/projects/settings/useProjectColumns.tsx
+++ b/apps/web/ce/components/projects/settings/useProjectColumns.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useState } from "react";
 // plane imports
 import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
@@ -94,7 +100,7 @@ export const useProjectColumns = (props: TUseProjectColumnsProps) => {
           handleDisplayFilterUpdate={handleDisplayFilterUpdate}
         />
       ),
-      tdRender: (rowData: RowData) => <div className="w-48 text-custom-text-200">{rowData.member.email}</div>,
+      tdRender: (rowData: RowData) => <div className="w-48 text-secondary">{rowData.member.email}</div>,
     },
     {
       key: "Account Type",
diff --git a/apps/web/ce/components/projects/teamspaces/teamspace-list.tsx b/apps/web/ce/components/projects/teamspaces/teamspace-list.tsx
index 137e962ac..2f62c53e1 100644
--- a/apps/web/ce/components/projects/teamspaces/teamspace-list.tsx
+++ b/apps/web/ce/components/projects/teamspaces/teamspace-list.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export type TProjectTeamspaceList = {
   workspaceSlug: string;
   projectId: string;
diff --git a/apps/web/ce/components/relations/activity.ts b/apps/web/ce/components/relations/activity.ts
index 820966f4d..83a89ef14 100644
--- a/apps/web/ce/components/relations/activity.ts
+++ b/apps/web/ce/components/relations/activity.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { TIssueActivity } from "@plane/types";
 
 export const getRelationActivityContent = (activity: TIssueActivity | undefined): string | undefined => {
diff --git a/apps/web/ce/components/relations/index.tsx b/apps/web/ce/components/relations/index.tsx
index f9d72944c..02ff0f28d 100644
--- a/apps/web/ce/components/relations/index.tsx
+++ b/apps/web/ce/components/relations/index.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { CircleDot, XCircle } from "lucide-react";
 import { RelatedIcon, DuplicatePropertyIcon } from "@plane/propel/icons";
 import type { TRelationObject } from "@/components/issues/issue-detail-widgets/relations";
@@ -9,29 +15,29 @@ export const ISSUE_RELATION_OPTIONS: Record<TIssueRelationTypes, TRelationObject
   relates_to: {
     key: "relates_to",
     i18n_label: "issue.relation.relates_to",
-    className: "bg-custom-background-80 text-custom-text-200",
-    icon: (size) => <RelatedIcon height={size} width={size} className="text-custom-text-200" />,
+    className: "bg-layer-1 text-secondary",
+    icon: (size) => <RelatedIcon height={size} width={size} className="text-secondary" />,
     placeholder: "Add related work items",
   },
   duplicate: {
     key: "duplicate",
     i18n_label: "issue.relation.duplicate",
-    className: "bg-custom-background-80 text-custom-text-200",
-    icon: (size) => <DuplicatePropertyIcon width={size} height={size} className="text-custom-text-200" />,
+    className: "bg-layer-1 text-secondary",
+    icon: (size) => <DuplicatePropertyIcon width={size} height={size} className="text-secondary" />,
     placeholder: "None",
   },
   blocked_by: {
     key: "blocked_by",
     i18n_label: "issue.relation.blocked_by",
-    className: "bg-red-500/20 text-red-700",
-    icon: (size) => <CircleDot size={size} className="text-custom-text-200" />,
+    className: "bg-danger-subtle text-danger-primary",
+    icon: (size) => <CircleDot size={size} className="text-secondary" />,
     placeholder: "None",
   },
   blocking: {
     key: "blocking",
     i18n_label: "issue.relation.blocking",
     className: "bg-yellow-500/20 text-yellow-700",
-    icon: (size) => <XCircle size={size} className="text-custom-text-200" />,
+    icon: (size) => <XCircle size={size} className="text-secondary" />,
     placeholder: "None",
   },
 };
diff --git a/apps/web/ce/components/rich-filters/filter-value-input/root.tsx b/apps/web/ce/components/rich-filters/filter-value-input/root.tsx
index ae7310846..374bf279f 100644
--- a/apps/web/ce/components/rich-filters/filter-value-input/root.tsx
+++ b/apps/web/ce/components/rich-filters/filter-value-input/root.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 import { observer } from "mobx-react";
 // plane imports
@@ -11,7 +17,7 @@ export const AdditionalFilterValueInput = observer(function AdditionalFilterValu
 >(_props: TFilterValueInputProps<P, V>) {
   return (
     // Fallback
-    <div className="h-full flex items-center px-4 text-xs text-custom-text-400 transition-opacity duration-200 cursor-not-allowed">
+    <div className="flex h-full cursor-not-allowed items-center px-4 text-11 text-placeholder transition-opacity duration-200">
       Filter type not supported
     </div>
   );
diff --git a/apps/web/ce/components/sidebar/app-switcher.tsx b/apps/web/ce/components/sidebar/app-switcher.tsx
index 9bd2d21db..80cc87797 100644
--- a/apps/web/ce/components/sidebar/app-switcher.tsx
+++ b/apps/web/ce/components/sidebar/app-switcher.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export function SidebarAppSwitcher() {
   return null;
 }
diff --git a/apps/web/ce/components/sidebar/index.ts b/apps/web/ce/components/sidebar/index.ts
index 129f42020..4f6ed0ef8 100644
--- a/apps/web/ce/components/sidebar/index.ts
+++ b/apps/web/ce/components/sidebar/index.ts
@@ -1,2 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./app-switcher";
 export * from "./project-navigation-root";
diff --git a/apps/web/ce/components/sidebar/project-navigation-root.tsx b/apps/web/ce/components/sidebar/project-navigation-root.tsx
index 29f66fd8b..fd5249c01 100644
--- a/apps/web/ce/components/sidebar/project-navigation-root.tsx
+++ b/apps/web/ce/components/sidebar/project-navigation-root.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // components
 import { ProjectNavigation } from "@/components/workspace/sidebar/project-navigation";
 
diff --git a/apps/web/ce/components/views/access-controller.tsx b/apps/web/ce/components/views/access-controller.tsx
index 56b59a021..549177050 100644
--- a/apps/web/ce/components/views/access-controller.tsx
+++ b/apps/web/ce/components/views/access-controller.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 export function AccessController(props: any) {
   return <></>;
diff --git a/apps/web/ce/components/views/filters/access-filter.tsx b/apps/web/ce/components/views/filters/access-filter.tsx
index ebc8c3ef8..65ef98c53 100644
--- a/apps/web/ce/components/views/filters/access-filter.tsx
+++ b/apps/web/ce/components/views/filters/access-filter.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 export function FilterByAccess(props: any) {
   return <></>;
diff --git a/apps/web/ce/components/views/helper.tsx b/apps/web/ce/components/views/helper.tsx
index 47a7d3594..dda72e6ed 100644
--- a/apps/web/ce/components/views/helper.tsx
+++ b/apps/web/ce/components/views/helper.tsx
@@ -1,7 +1,10 @@
-import { ExternalLink, Link, Pencil, Trash2 } from "lucide-react";
-import { useTranslation } from "@plane/i18n";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { EIssueLayoutTypes, IProjectView } from "@plane/types";
-import type { TContextMenuItem } from "@plane/ui";
 import type { TWorkspaceLayoutProps } from "@/components/views/helper";
 
 export type TLayoutSelectionProps = {
@@ -10,76 +13,14 @@ export type TLayoutSelectionProps = {
   workspaceSlug: string;
 };
 
-export function GlobalViewLayoutSelection(props: TLayoutSelectionProps) {
+export function GlobalViewLayoutSelection(_props: TLayoutSelectionProps) {
   return <></>;
 }
 
-export function WorkspaceAdditionalLayouts(props: TWorkspaceLayoutProps) {
+export function WorkspaceAdditionalLayouts(_props: TWorkspaceLayoutProps) {
   return <></>;
 }
 
-export type TMenuItemsFactoryProps = {
-  isOwner: boolean;
-  isAdmin: boolean;
-  setDeleteViewModal: (open: boolean) => void;
-  setCreateUpdateViewModal: (open: boolean) => void;
-  handleOpenInNewTab: () => void;
-  handleCopyText: () => void;
-  isLocked: boolean;
-  workspaceSlug: string;
-  projectId?: string;
-  viewId: string;
-};
-
-export const useMenuItemsFactory = (props: TMenuItemsFactoryProps) => {
-  const { isOwner, isAdmin, setDeleteViewModal, setCreateUpdateViewModal, handleOpenInNewTab, handleCopyText } = props;
-
-  const { t } = useTranslation();
-
-  const editMenuItem = () => ({
-    key: "edit",
-    action: () => setCreateUpdateViewModal(true),
-    title: t("edit"),
-    icon: Pencil,
-    shouldRender: isOwner,
-  });
-
-  const openInNewTabMenuItem = () => ({
-    key: "open-new-tab",
-    action: handleOpenInNewTab,
-    title: t("open_in_new_tab"),
-    icon: ExternalLink,
-  });
-
-  const copyLinkMenuItem = () => ({
-    key: "copy-link",
-    action: handleCopyText,
-    title: t("copy_link"),
-    icon: Link,
-  });
-
-  const deleteMenuItem = () => ({
-    key: "delete",
-    action: () => setDeleteViewModal(true),
-    title: t("delete"),
-    icon: Trash2,
-    shouldRender: isOwner || isAdmin,
-  });
-
-  return {
-    editMenuItem,
-    openInNewTabMenuItem,
-    copyLinkMenuItem,
-    deleteMenuItem,
-  };
-};
-
-export const useViewMenuItems = (props: TMenuItemsFactoryProps): TContextMenuItem[] => {
-  const factory = useMenuItemsFactory(props);
-
-  return [factory.editMenuItem(), factory.openInNewTabMenuItem(), factory.copyLinkMenuItem(), factory.deleteMenuItem()];
-};
-
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 export function AdditionalHeaderItems(view: IProjectView) {
   return <></>;
diff --git a/apps/web/ce/components/views/publish/index.ts b/apps/web/ce/components/views/publish/index.ts
index 8c04a4e3d..0bc558644 100644
--- a/apps/web/ce/components/views/publish/index.ts
+++ b/apps/web/ce/components/views/publish/index.ts
@@ -1,2 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./modal";
 export * from "./use-view-publish";
diff --git a/apps/web/ce/components/views/publish/modal.tsx b/apps/web/ce/components/views/publish/modal.tsx
index 241e35680..7be8c47da 100644
--- a/apps/web/ce/components/views/publish/modal.tsx
+++ b/apps/web/ce/components/views/publish/modal.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { IProjectView } from "@plane/types";
 
 type Props = {
diff --git a/apps/web/ce/components/views/publish/use-view-publish.tsx b/apps/web/ce/components/views/publish/use-view-publish.tsx
index 687a79ed7..133db0cf1 100644
--- a/apps/web/ce/components/views/publish/use-view-publish.tsx
+++ b/apps/web/ce/components/views/publish/use-view-publish.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 export const useViewPublish = (isPublished: boolean, isAuthorized: boolean) => ({
   isPublishModalOpen: false,
diff --git a/apps/web/ce/components/workflow/index.ts b/apps/web/ce/components/workflow/index.ts
index 07b59ccc3..4bdac48e5 100644
--- a/apps/web/ce/components/workflow/index.ts
+++ b/apps/web/ce/components/workflow/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./state-option";
 export * from "./use-workflow-drag-n-drop";
 export * from "./workflow-disabled-message";
diff --git a/apps/web/ce/components/workflow/state-option.tsx b/apps/web/ce/components/workflow/state-option.tsx
index 9516e00d5..7a2ccc7d4 100644
--- a/apps/web/ce/components/workflow/state-option.tsx
+++ b/apps/web/ce/components/workflow/state-option.tsx
@@ -1,6 +1,13 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
-import { Check } from "lucide-react";
 import { Combobox } from "@headlessui/react";
+import { CheckIcon } from "@plane/propel/icons";
+import { cn } from "@plane/utils";
 
 export type TStateOptionProps = {
   projectId: string | null | undefined;
@@ -24,13 +31,13 @@ export const StateOption = observer(function StateOption(props: TStateOptionProp
       key={option.value}
       value={option.value}
       className={({ active, selected }) =>
-        `${className} ${active ? "bg-custom-background-80" : ""} ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
+        cn(`${className} ${active ? "bg-layer-transparent-hover" : ""} ${selected ? "text-primary" : "text-secondary"}`)
       }
     >
       {({ selected }) => (
         <>
           <span className="flex-grow truncate">{option.content}</span>
-          {selected && <Check className="h-3.5 w-3.5 flex-shrink-0" />}
+          {selected && <CheckIcon className="h-3.5 w-3.5 flex-shrink-0" />}
         </>
       )}
     </Combobox.Option>
diff --git a/apps/web/ce/components/workflow/use-workflow-drag-n-drop.ts b/apps/web/ce/components/workflow/use-workflow-drag-n-drop.ts
index 20c97eb4f..4a5be9987 100644
--- a/apps/web/ce/components/workflow/use-workflow-drag-n-drop.ts
+++ b/apps/web/ce/components/workflow/use-workflow-drag-n-drop.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import type { TIssueGroupByOptions } from "@plane/types";
 
diff --git a/apps/web/ce/components/workflow/workflow-disabled-message.tsx b/apps/web/ce/components/workflow/workflow-disabled-message.tsx
index 87f2c0408..dad8cf36e 100644
--- a/apps/web/ce/components/workflow/workflow-disabled-message.tsx
+++ b/apps/web/ce/components/workflow/workflow-disabled-message.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 /* eslint-disable @typescript-eslint/no-unused-vars */
 type Props = {
   parentStateId: string;
diff --git a/apps/web/ce/components/workflow/workflow-disabled-overlay.tsx b/apps/web/ce/components/workflow/workflow-disabled-overlay.tsx
index 197a808a2..a5f22da0a 100644
--- a/apps/web/ce/components/workflow/workflow-disabled-overlay.tsx
+++ b/apps/web/ce/components/workflow/workflow-disabled-overlay.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 
 export type TWorkflowDisabledOverlayProps = {
diff --git a/apps/web/ce/components/workflow/workflow-group-tree.tsx b/apps/web/ce/components/workflow/workflow-group-tree.tsx
index 3f0e7300a..9767e6c89 100644
--- a/apps/web/ce/components/workflow/workflow-group-tree.tsx
+++ b/apps/web/ce/components/workflow/workflow-group-tree.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import type { TIssueGroupByOptions } from "@plane/types";
 
diff --git a/apps/web/ce/components/workspace-notifications/index.ts b/apps/web/ce/components/workspace-notifications/index.ts
index ed26efa23..1c9404afa 100644
--- a/apps/web/ce/components/workspace-notifications/index.ts
+++ b/apps/web/ce/components/workspace-notifications/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./list-root";
diff --git a/apps/web/ce/components/workspace-notifications/list-root.tsx b/apps/web/ce/components/workspace-notifications/list-root.tsx
index cad9c438b..1edb479d1 100644
--- a/apps/web/ce/components/workspace-notifications/list-root.tsx
+++ b/apps/web/ce/components/workspace-notifications/list-root.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { NotificationCardListRoot } from "./notification-card/root";
 
 export type TNotificationListRoot = {
diff --git a/apps/web/ce/components/workspace-notifications/notification-card/content.ts b/apps/web/ce/components/workspace-notifications/notification-card/content.ts
new file mode 100644
index 000000000..443a9f02a
--- /dev/null
+++ b/apps/web/ce/components/workspace-notifications/notification-card/content.ts
@@ -0,0 +1,31 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { replaceUnderscoreIfSnakeCase } from "@plane/utils";
+import type { TNotificationContentMap } from "@/components/workspace-notifications/sidebar/notification-card/content";
+
+// Additional notification content map for CE (empty - EE extends this)
+export const ADDITIONAL_NOTIFICATION_CONTENT_MAP: TNotificationContentMap = {};
+
+// Fallback action renderer for fields not in the map
+export const renderAdditionalAction = (notificationField: string, verb: string | undefined) => {
+  const baseAction = !["comment", "archived_at"].includes(notificationField) ? verb : "";
+  return `${baseAction} ${replaceUnderscoreIfSnakeCase(notificationField)}`;
+};
+
+// Fallback value renderer for fields not in the map
+export const renderAdditionalValue = (
+  _notificationField: string | undefined,
+  newValue: string | undefined,
+  _oldValue: string | undefined
+) => newValue;
+
+export const shouldShowConnector = (notificationField: string | undefined) =>
+  !["comment", "archived_at", "None", "assignees", "labels", "start_date", "target_date", "parent"].includes(
+    notificationField || ""
+  );
+
+export const shouldRender = (notificationField: string | undefined, verb: string | undefined) => verb !== "deleted";
diff --git a/apps/web/ce/components/workspace-notifications/notification-card/root.tsx b/apps/web/ce/components/workspace-notifications/notification-card/root.tsx
index 9b28684de..2dcc706bf 100644
--- a/apps/web/ce/components/workspace-notifications/notification-card/root.tsx
+++ b/apps/web/ce/components/workspace-notifications/notification-card/root.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 // plane imports
 import { ENotificationLoader, ENotificationQueryParamType } from "@plane/constants";
@@ -39,12 +44,12 @@ export const NotificationCardListRoot = observer(function NotificationCardListRo
       {paginationInfo && paginationInfo?.next_page_results && (
         <>
           {loader === ENotificationLoader.PAGINATION_LOADER ? (
-            <div className="py-4 flex justify-center items-center text-sm font-medium">
-              <div className="text-custom-primary-90">{t("loading")}...</div>
+            <div className="flex items-center justify-center py-4 text-13 font-medium">
+              <div className="text-accent-secondary">{t("loading")}...</div>
             </div>
           ) : (
-            <div className="py-4 flex justify-center items-center text-sm font-medium" onClick={getNextNotifications}>
-              <div className="text-custom-primary-90 hover:text-custom-primary-100 transition-all cursor-pointer">
+            <div className="flex items-center justify-center py-4 text-13 font-medium" onClick={getNextNotifications}>
+              <div className="cursor-pointer text-accent-secondary transition-all hover:text-accent-primary">
                 {t("load_more")}
               </div>
             </div>
diff --git a/apps/web/ce/components/workspace/app-switcher.tsx b/apps/web/ce/components/workspace/app-switcher.tsx
index f4f5ce0ff..4c1779e37 100644
--- a/apps/web/ce/components/workspace/app-switcher.tsx
+++ b/apps/web/ce/components/workspace/app-switcher.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 
 export function WorkspaceAppSwitcher() {
diff --git a/apps/web/ce/components/workspace/billing/billing-actions-button.tsx b/apps/web/ce/components/workspace/billing/billing-actions-button.tsx
index 4460eeff3..99aeecae4 100644
--- a/apps/web/ce/components/workspace/billing/billing-actions-button.tsx
+++ b/apps/web/ce/components/workspace/billing/billing-actions-button.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 
 export type TBillingActionsButtonProps = {
diff --git a/apps/web/ce/components/workspace/billing/comparison/frequency-toggle.tsx b/apps/web/ce/components/workspace/billing/comparison/frequency-toggle.tsx
index 363621612..da81c45f1 100644
--- a/apps/web/ce/components/workspace/billing/comparison/frequency-toggle.tsx
+++ b/apps/web/ce/components/workspace/billing/comparison/frequency-toggle.tsx
@@ -1,8 +1,12 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // plane imports
 import { observer } from "mobx-react";
 import type { EProductSubscriptionEnum, TBillingFrequency } from "@plane/types";
-import { getSubscriptionBackgroundColor, getDiscountPillStyle } from "@plane/ui";
 import { calculateYearlyDiscount, cn } from "@plane/utils";
 
 type TPlanFrequencyToggleProps = {
@@ -14,47 +18,42 @@ type TPlanFrequencyToggleProps = {
 };
 
 export const PlanFrequencyToggle = observer(function PlanFrequencyToggle(props: TPlanFrequencyToggleProps) {
-  const { subscriptionType, monthlyPrice, yearlyPrice, selectedFrequency, setSelectedFrequency } = props;
+  const { monthlyPrice, yearlyPrice, selectedFrequency, setSelectedFrequency } = props;
   // derived values
   const yearlyDiscount = calculateYearlyDiscount(monthlyPrice, yearlyPrice);
 
   return (
-    <div className="flex w-full items-center cursor-pointer py-1 animate-slide-up">
-      <div
-        className={cn(
-          "flex space-x-1 rounded-md bg-custom-primary-200/10 p-0.5 w-full",
-          getSubscriptionBackgroundColor(subscriptionType, "50")
-        )}
-      >
-        <div
-          key="month"
+    <div className="flex w-full cursor-pointer items-center py-1">
+      <div className="flex w-full space-x-1 rounded-md bg-layer-3 p-0.5">
+        <button
+          type="button"
           onClick={() => setSelectedFrequency("month")}
           className={cn(
-            "w-full rounded px-1 py-0.5 text-xs font-medium leading-5 text-center",
+            "w-full rounded-sm px-1 py-0.5 text-center text-caption-sm-medium leading-5",
             selectedFrequency === "month"
-              ? "bg-custom-background-100 text-custom-text-100 shadow"
-              : "text-custom-text-300 hover:text-custom-text-200"
+              ? "border border-subtle-1 bg-layer-2 text-primary shadow-raised-100"
+              : "text-tertiary hover:text-secondary"
           )}
         >
           Monthly
-        </div>
-        <div
-          key="year"
+        </button>
+        <button
+          type="button"
           onClick={() => setSelectedFrequency("year")}
           className={cn(
-            "w-full rounded px-1 py-0.5 text-xs font-medium leading-5 text-center",
+            "w-full rounded-sm px-1 py-0.5 text-center text-caption-sm-medium leading-5",
             selectedFrequency === "year"
-              ? "bg-custom-background-100 text-custom-text-100 shadow"
-              : "text-custom-text-300 hover:text-custom-text-200"
+              ? "border border-subtle-1 bg-layer-2 text-primary shadow-raised-100"
+              : "text-tertiary hover:text-secondary"
           )}
         >
           Yearly
           {yearlyDiscount > 0 && (
-            <span className={cn(getDiscountPillStyle(subscriptionType), "rounded-full px-1 py-0.5 ml-1 text-[9px]")}>
+            <span className="ml-1.5 rounded-full bg-accent-primary px-1 py-0.5 text-caption-xs-regular text-on-color">
               -{yearlyDiscount}%
             </span>
           )}
-        </div>
+        </button>
       </div>
     </div>
   );
diff --git a/apps/web/ce/components/workspace/billing/comparison/plan-detail.tsx b/apps/web/ce/components/workspace/billing/comparison/plan-detail.tsx
index 96e6d4c91..c253244c5 100644
--- a/apps/web/ce/components/workspace/billing/comparison/plan-detail.tsx
+++ b/apps/web/ce/components/workspace/billing/comparison/plan-detail.tsx
@@ -1,24 +1,25 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 // plane imports
 import {
   SUBSCRIPTION_REDIRECTION_URLS,
   SUBSCRIPTION_WITH_BILLING_FREQUENCY,
   TALK_TO_SALES_URL,
-  WORKSPACE_SETTINGS_TRACKER_ELEMENTS,
-  WORKSPACE_SETTINGS_TRACKER_EVENTS,
 } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { getButtonStyling } from "@plane/propel/button";
+import { Button } from "@plane/propel/button";
 import type { TBillingFrequency } from "@plane/types";
 import { EProductSubscriptionEnum } from "@plane/types";
-import { getUpgradeButtonStyle } from "@plane/ui";
-import { cn, getSubscriptionName } from "@plane/utils";
+import { getSubscriptionName } from "@plane/utils";
 // components
 import { DiscountInfo } from "@/components/license/modal/card/discount-info";
 import type { TPlanDetail } from "@/constants/plans";
 // local imports
-import { captureSuccess } from "@/helpers/event-tracker.helper";
 import { PlanFrequencyToggle } from "./frequency-toggle";
 
 type TPlanDetailProps = {
@@ -28,9 +29,6 @@ type TPlanDetailProps = {
   setBillingFrequency: (frequency: TBillingFrequency) => void;
 };
 
-const COMMON_BUTTON_STYLE =
-  "relative inline-flex items-center justify-center w-full px-4 py-1.5 text-xs font-medium rounded-lg focus:outline-none transition-all duration-300 animate-slide-up";
-
 export const PlanDetail = observer(function PlanDetail(props: TPlanDetailProps) {
   const { subscriptionType, planDetail, billingFrequency, setBillingFrequency } = props;
   // plane hooks
@@ -45,36 +43,30 @@ export const PlanDetail = observer(function PlanDetail(props: TPlanDetailProps)
     billingFrequency === "month"
       ? planDetail.monthlyPriceSecondaryDescription
       : planDetail.yearlyPriceSecondaryDescription;
-  // helper styles
-  const upgradeButtonStyle = getUpgradeButtonStyle(subscriptionType, false) ?? getButtonStyling("primary", "lg");
 
   const handleRedirection = () => {
     const frequency = billingFrequency ?? "year";
     // Get the redirection URL based on the subscription type and billing frequency
     const redirectUrl = SUBSCRIPTION_REDIRECTION_URLS[subscriptionType][frequency] ?? TALK_TO_SALES_URL;
-    captureSuccess({
-      eventName: WORKSPACE_SETTINGS_TRACKER_EVENTS.upgrade_plan_redirected,
-      payload: {
-        subscriptionType,
-      },
-    });
     // Open the URL in a new tab
     window.open(redirectUrl, "_blank");
   };
 
   return (
-    <div className="flex flex-col justify-between col-span-1 p-3 space-y-0.5">
+    <div className="col-span-1 flex flex-col justify-between space-y-0.5 p-3">
       {/* Plan name and pricing section */}
       <div className="flex flex-col items-start">
-        <div className="flex w-full gap-2 items-center text-xl font-medium">
-          <span className="transition-all duration-300">{subscriptionName}</span>
+        <div className="flex w-full items-center gap-2 text-h4-semibold">
+          <span>{subscriptionName}</span>
           {subscriptionType === EProductSubscriptionEnum.PRO && (
-            <span className="px-2 rounded text-custom-primary-200 bg-custom-primary-100/20 text-xs">Popular</span>
+            <span className="rounded-sm bg-accent-primary px-2 py-0.5 text-caption-sm-medium text-on-color">
+              Popular
+            </span>
           )}
         </div>
-        <div className="flex gap-x-2 items-start text-custom-text-300 pb-1 transition-all duration-300 animate-slide-up">
+        <div className="flex items-start gap-x-2 pb-1 text-tertiary">
           {isSubscriptionActive && displayPrice !== undefined && (
-            <div className="flex items-center gap-1 text-2xl text-custom-text-100 font-semibold transition-all duration-300">
+            <div className="flex items-center gap-1 text-h3-semibold text-primary">
               <DiscountInfo
                 currency="$"
                 frequency={billingFrequency ?? "month"}
@@ -85,11 +77,9 @@ export const PlanDetail = observer(function PlanDetail(props: TPlanDetailProps)
             </div>
           )}
           <div className="pt-1">
-            {pricingDescription && <div className="transition-all duration-300">{pricingDescription}</div>}
+            {pricingDescription && <div>{pricingDescription}</div>}
             {pricingSecondaryDescription && (
-              <div className="text-xs text-custom-text-400 transition-all duration-300">
-                {pricingSecondaryDescription}
-              </div>
+              <div className="text-caption-xs text-placeholder">{pricingSecondaryDescription}</div>
             )}
           </div>
         </div>
@@ -109,18 +99,10 @@ export const PlanDetail = observer(function PlanDetail(props: TPlanDetailProps)
       )}
 
       {/* Subscription button */}
-      <div className={cn("flex flex-col gap-1 py-3 items-start transition-all duration-300")}>
-        <button
-          onClick={handleRedirection}
-          className={cn(upgradeButtonStyle, COMMON_BUTTON_STYLE)}
-          data-ph-element={
-            isSubscriptionActive
-              ? WORKSPACE_SETTINGS_TRACKER_ELEMENTS.BILLING_UPGRADE_BUTTON(subscriptionType)
-              : WORKSPACE_SETTINGS_TRACKER_ELEMENTS.BILLING_TALK_TO_SALES_BUTTON
-          }
-        >
+      <div className="flex flex-col items-start gap-1 py-3">
+        <Button variant="primary" size="lg" onClick={handleRedirection} className="w-full">
           {isSubscriptionActive ? `Upgrade to ${subscriptionName}` : t("common.upgrade_cta.talk_to_sales")}
-        </button>
+        </Button>
       </div>
     </div>
   );
diff --git a/apps/web/ce/components/workspace/billing/comparison/root.tsx b/apps/web/ce/components/workspace/billing/comparison/root.tsx
index 109667c21..7ff217884 100644
--- a/apps/web/ce/components/workspace/billing/comparison/root.tsx
+++ b/apps/web/ce/components/workspace/billing/comparison/root.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 // plane imports
 import type { EProductSubscriptionEnum, TBillingFrequency } from "@plane/types";
diff --git a/apps/web/ce/components/workspace/billing/index.ts b/apps/web/ce/components/workspace/billing/index.ts
index 1efe34c51..d98033459 100644
--- a/apps/web/ce/components/workspace/billing/index.ts
+++ b/apps/web/ce/components/workspace/billing/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./root";
diff --git a/apps/web/ce/components/workspace/billing/root.tsx b/apps/web/ce/components/workspace/billing/root.tsx
index 085513cc7..33100a437 100644
--- a/apps/web/ce/components/workspace/billing/root.tsx
+++ b/apps/web/ce/components/workspace/billing/root.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useState } from "react";
 import { observer } from "mobx-react";
 // plane imports
@@ -5,9 +11,8 @@ import { DEFAULT_PRODUCT_BILLING_FREQUENCY, SUBSCRIPTION_WITH_BILLING_FREQUENCY
 import { useTranslation } from "@plane/i18n";
 import type { TBillingFrequency, TProductBillingFrequency } from "@plane/types";
 import { EProductSubscriptionEnum } from "@plane/types";
-import { getSubscriptionTextColor } from "@plane/ui";
-import { cn } from "@plane/utils";
 // components
+import { SettingsBoxedControlItem } from "@/components/settings/boxed-control-item";
 import { SettingsHeading } from "@/components/settings/heading";
 // local imports
 import { PlansComparison } from "./comparison/root";
@@ -39,36 +44,28 @@ export const BillingRoot = observer(function BillingRoot() {
     setProductBillingFrequency({ ...productBillingFrequency, [subscriptionType]: frequency });
 
   return (
-    <section className="relative size-full flex flex-col overflow-y-auto scrollbar-hide">
-      <SettingsHeading
-        title={t("workspace_settings.settings.billing_and_plans.heading")}
-        description={t("workspace_settings.settings.billing_and_plans.description")}
-      />
-      <div className={cn("transition-all duration-500 ease-in-out will-change-[height,opacity]")}>
-        <div className="py-6">
-          <div className={cn("px-6 py-4 border border-custom-border-200 rounded-lg")}>
-            <div className="flex gap-2 font-medium items-center justify-between">
-              <div className="flex flex-col gap-1">
-                <h4
-                  className={cn("text-xl leading-6 font-bold", getSubscriptionTextColor(EProductSubscriptionEnum.FREE))}
-                >
-                  Community
-                </h4>
-                <div className="text-sm text-custom-text-200 font-medium">
-                  Unlimited projects, issues, cycles, modules, pages, and storage
-                </div>
-              </div>
-            </div>
-          </div>
+    <section className="relative scrollbar-hide size-full overflow-y-auto">
+      <div>
+        <SettingsHeading
+          title={t("workspace_settings.settings.billing_and_plans.heading")}
+          description={t("workspace_settings.settings.billing_and_plans.description")}
+        />
+        <div className="mt-6">
+          <SettingsBoxedControlItem
+            title="Community"
+            description="Unlimited projects, issues, cycles, modules, pages, and storage"
+          />
         </div>
-        <div className="text-xl font-semibold mt-3">All plans</div>
       </div>
-      <PlansComparison
-        isCompareAllFeaturesSectionOpen={isCompareAllFeaturesSectionOpen}
-        getBillingFrequency={getBillingFrequency}
-        setBillingFrequency={setBillingFrequency}
-        setIsCompareAllFeaturesSectionOpen={setIsCompareAllFeaturesSectionOpen}
-      />
+      <div className="mt-10 flex flex-col gap-y-3">
+        <h4 className="text-h6-semibold">All plans</h4>
+        <PlansComparison
+          isCompareAllFeaturesSectionOpen={isCompareAllFeaturesSectionOpen}
+          getBillingFrequency={getBillingFrequency}
+          setBillingFrequency={setBillingFrequency}
+          setIsCompareAllFeaturesSectionOpen={setIsCompareAllFeaturesSectionOpen}
+        />
+      </div>
     </section>
   );
 });
diff --git a/apps/web/ce/components/workspace/content-wrapper.tsx b/apps/web/ce/components/workspace/content-wrapper.tsx
index 630d30f88..46d1d609b 100644
--- a/apps/web/ce/components/workspace/content-wrapper.tsx
+++ b/apps/web/ce/components/workspace/content-wrapper.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 import { observer } from "mobx-react";
 // plane imports
@@ -16,16 +22,16 @@ export const WorkspaceContentWrapper = observer(function WorkspaceContentWrapper
   const { shouldRenderAppRail } = useAppRailVisibility();
 
   return (
-    <div className="flex flex-col relative size-full overflow-hidden bg-custom-background-90 transition-all ease-in-out duration-300">
+    <div className="relative flex size-full flex-col overflow-hidden bg-canvas transition-all duration-300 ease-in-out">
       <TopNavigationRoot />
       <div className="relative flex size-full overflow-hidden">
         {/* Conditionally render AppRailRoot based on context */}
         {shouldRenderAppRail && <AppRailRoot />}
         <div
           className={cn(
-            "relative size-full pl-2 pb-2 pr-2 flex-grow transition-all ease-in-out duration-300 overflow-hidden",
+            "relative size-full flex-grow overflow-hidden pr-2 pb-2 pl-2 transition-all duration-300 ease-in-out",
             {
-              "pl-0": shouldRenderAppRail,
+              "pl-0!": shouldRenderAppRail,
             }
           )}
         >
diff --git a/apps/web/ce/components/workspace/delete-workspace-modal.tsx b/apps/web/ce/components/workspace/delete-workspace-modal.tsx
index ae9fdec9a..19e5e5b24 100644
--- a/apps/web/ce/components/workspace/delete-workspace-modal.tsx
+++ b/apps/web/ce/components/workspace/delete-workspace-modal.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 import { observer } from "mobx-react";
 import type { IWorkspace } from "@plane/types";
diff --git a/apps/web/ce/components/workspace/delete-workspace-section.tsx b/apps/web/ce/components/workspace/delete-workspace-section.tsx
index d25025c28..e66abcf41 100644
--- a/apps/web/ce/components/workspace/delete-workspace-section.tsx
+++ b/apps/web/ce/components/workspace/delete-workspace-section.tsx
@@ -1,16 +1,20 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useState } from "react";
 import { observer } from "mobx-react";
-// types
+// plane imports
 import { WORKSPACE_TRACKER_ELEMENTS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { Button } from "@plane/propel/button";
-import { ChevronDownIcon, ChevronUpIcon } from "@plane/propel/icons";
 import type { IWorkspace } from "@plane/types";
-// ui
-import { Collapsible } from "@plane/ui";
-import { DeleteWorkspaceModal } from "./delete-workspace-modal";
 // components
+import { SettingsBoxedControlItem } from "@/components/settings/boxed-control-item";
+// local imports
+import { DeleteWorkspaceModal } from "./delete-workspace-modal";
 
 type TDeleteWorkspace = {
   workspace: IWorkspace | null;
@@ -19,8 +23,8 @@ type TDeleteWorkspace = {
 export const DeleteWorkspaceSection = observer(function DeleteWorkspaceSection(props: TDeleteWorkspace) {
   const { workspace } = props;
   // states
-  const [isOpen, setIsOpen] = useState(false);
   const [deleteWorkspaceModal, setDeleteWorkspaceModal] = useState(false);
+  // translation
   const { t } = useTranslation();
 
   return (
@@ -30,39 +34,19 @@ export const DeleteWorkspaceSection = observer(function DeleteWorkspaceSection(p
         isOpen={deleteWorkspaceModal}
         onClose={() => setDeleteWorkspaceModal(false)}
       />
-      <div className="border-t border-custom-border-100">
-        <div className="w-full">
-          <Collapsible
-            isOpen={isOpen}
-            onToggle={() => setIsOpen(!isOpen)}
-            className="w-full"
-            buttonClassName="flex w-full items-center justify-between py-4"
-            title={
-              <>
-                <span className="text-lg tracking-tight">
-                  {t("workspace_settings.settings.general.delete_workspace")}
-                </span>
-                {isOpen ? <ChevronUpIcon className="h-5 w-5" /> : <ChevronDownIcon className="h-5 w-5" />}
-              </>
-            }
+      <SettingsBoxedControlItem
+        title={t("workspace_settings.settings.general.delete_workspace")}
+        description={t("workspace_settings.settings.general.delete_workspace_description")}
+        control={
+          <Button
+            variant="error-outline"
+            onClick={() => setDeleteWorkspaceModal(true)}
+            data-ph-element={WORKSPACE_TRACKER_ELEMENTS.DELETE_WORKSPACE_BUTTON}
           >
-            <div className="flex flex-col gap-4">
-              <span className="text-base tracking-tight">
-                {t("workspace_settings.settings.general.delete_workspace_description")}
-              </span>
-              <div>
-                <Button
-                  variant="danger"
-                  onClick={() => setDeleteWorkspaceModal(true)}
-                  data-ph-element={WORKSPACE_TRACKER_ELEMENTS.DELETE_WORKSPACE_BUTTON}
-                >
-                  {t("workspace_settings.settings.general.delete_btn")}
-                </Button>
-              </div>
-            </div>
-          </Collapsible>
-        </div>
-      </div>
+            {t("delete")}
+          </Button>
+        }
+      />
     </>
   );
 });
diff --git a/apps/web/ce/components/workspace/edition-badge.tsx b/apps/web/ce/components/workspace/edition-badge.tsx
index 0ca1116df..34ef70498 100644
--- a/apps/web/ce/components/workspace/edition-badge.tsx
+++ b/apps/web/ce/components/workspace/edition-badge.tsx
@@ -1,14 +1,20 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useState } from "react";
 import { observer } from "mobx-react";
 // ui
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
 import { Tooltip } from "@plane/propel/tooltip";
 // hooks
 import { usePlatformOS } from "@/hooks/use-platform-os";
 import packageJson from "package.json";
 // local components
 import { PaidPlanUpgradeModal } from "../license";
+import { Button } from "@plane/propel/button";
 
 export const WorkspaceEditionBadge = observer(function WorkspaceEditionBadge() {
   // states
@@ -26,9 +32,8 @@ export const WorkspaceEditionBadge = observer(function WorkspaceEditionBadge() {
       />
       <Tooltip tooltipContent={`Version: v${packageJson.version}`} isMobile={isMobile}>
         <Button
-          tabIndex={-1}
-          variant="accent-primary"
-          className="w-fit min-w-24 cursor-pointer rounded-2xl px-2 py-1 text-center text-sm font-medium outline-none"
+          variant="tertiary"
+          size="lg"
           onClick={() => setIsPaidPlanPurchaseModalOpen(true)}
           aria-haspopup="dialog"
           aria-label={t("aria_labels.projects_sidebar.edition_badge")}
diff --git a/apps/web/ce/components/workspace/members/index.ts b/apps/web/ce/components/workspace/members/index.ts
new file mode 100644
index 000000000..7511bfeed
--- /dev/null
+++ b/apps/web/ce/components/workspace/members/index.ts
@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./invite-modal";
+export * from "./members-activity-button";
diff --git a/apps/web/ce/components/workspace/members/invite-modal.tsx b/apps/web/ce/components/workspace/members/invite-modal.tsx
index a0b72caed..5e97a69d9 100644
--- a/apps/web/ce/components/workspace/members/invite-modal.tsx
+++ b/apps/web/ce/components/workspace/members/invite-modal.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
diff --git a/apps/web/ce/components/workspace/members/members-activity-button.tsx b/apps/web/ce/components/workspace/members/members-activity-button.tsx
new file mode 100644
index 000000000..a078b1960
--- /dev/null
+++ b/apps/web/ce/components/workspace/members/members-activity-button.tsx
@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const MembersActivityButton = observer(function MembersActivityButton(props: { workspaceSlug: string }) {
+  return <></>;
+});
diff --git a/apps/web/ce/components/workspace/settings/useMemberColumns.tsx b/apps/web/ce/components/workspace/settings/useMemberColumns.tsx
index b8ed09087..bf0d188b9 100644
--- a/apps/web/ce/components/workspace/settings/useMemberColumns.tsx
+++ b/apps/web/ce/components/workspace/settings/useMemberColumns.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useState } from "react";
 import { useParams } from "next/navigation";
 import { EUserPermissions, EUserPermissionsLevel, LOGIN_MEDIUM_LABELS } from "@plane/constants";
@@ -62,9 +68,7 @@ export const useMemberColumns = () => {
       key: "Display name",
       content: t("workspace_settings.settings.members.details.display_name"),
       tdRender: (rowData: RowData) => (
-        <div className={`w-32 ${isSuspended(rowData) ? "text-custom-text-400" : ""}`}>
-          {rowData.member.display_name}
-        </div>
+        <div className={`w-32 ${isSuspended(rowData) ? "text-placeholder" : ""}`}>{rowData.member.display_name}</div>
       ),
       thRender: () => (
         <MemberHeaderColumn
@@ -79,9 +83,7 @@ export const useMemberColumns = () => {
       key: "Email address",
       content: t("workspace_settings.settings.members.details.email_address"),
       tdRender: (rowData: RowData) => (
-        <div className={`w-48 truncate ${isSuspended(rowData) ? "text-custom-text-400" : ""}`}>
-          {rowData.member.email}
-        </div>
+        <div className={`w-48 truncate ${isSuspended(rowData) ? "text-placeholder" : ""}`}>{rowData.member.email}</div>
       ),
       thRender: () => (
         <MemberHeaderColumn
diff --git a/apps/web/ce/components/workspace/sidebar/extended-sidebar-item.tsx b/apps/web/ce/components/workspace/sidebar/extended-sidebar-item.tsx
index 648ed750e..4014f8fb2 100644
--- a/apps/web/ce/components/workspace/sidebar/extended-sidebar-item.tsx
+++ b/apps/web/ce/components/workspace/sidebar/extended-sidebar-item.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useEffect, useRef, useState } from "react";
 import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
 import { draggable, dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
@@ -152,14 +158,14 @@ export const ExtendedSidebarItem = observer(function ExtendedSidebarItem(props:
     <div
       id={`sidebar-${item.key}`}
       className={cn("relative", {
-        "bg-custom-sidebar-background-80 opacity-60": isDragging,
+        "bg-layer-1 opacity-60": isDragging,
       })}
       ref={navigationIemRef}
     >
       <DropIndicator classNames="absolute top-0" isVisible={instruction === "DRAG_OVER"} />
       <div
         className={cn(
-          "group/project-item relative w-full  flex items-center rounded-md text-custom-sidebar-text-100 hover:bg-custom-sidebar-background-90"
+          "group/project-item relative flex w-full items-center rounded-md text-primary hover:bg-surface-2"
         )}
         id={`${item.key}`}
       >
@@ -173,7 +179,7 @@ export const ExtendedSidebarItem = observer(function ExtendedSidebarItem(props:
             <button
               type="button"
               className={cn(
-                "flex items-center justify-center absolute top-1/2 -left-3 -translate-y-1/2 rounded text-custom-sidebar-text-400 cursor-grab group-hover/project-item:opacity-100 opacity-0",
+                "absolute top-1/2 -left-3 flex -translate-y-1/2 cursor-grab items-center justify-center rounded text-placeholder opacity-0 group-hover/project-item:opacity-100",
                 {
                   "cursor-grabbing": isDragging,
                   "opacity-100": isDragging,
@@ -189,7 +195,7 @@ export const ExtendedSidebarItem = observer(function ExtendedSidebarItem(props:
           <Link href={itemHref} onClick={() => handleLinkClick()} className="group flex-grow">
             <div className="flex items-center gap-1.5 py-[1px]">
               {icon}
-              <p className="text-sm leading-5 font-medium">{t(item.labelTranslationKey)}</p>
+              <p className="text-13 leading-5 font-medium">{t(item.labelTranslationKey)}</p>
             </div>
           </Link>
           <div className="flex items-center gap-2">
@@ -201,14 +207,14 @@ export const ExtendedSidebarItem = observer(function ExtendedSidebarItem(props:
             {isPinned ? (
               <Tooltip tooltipContent="Unpin">
                 <PinOff
-                  className="size-3.5 flex-shrink-0 hover:text-custom-text-300 outline-none text-custom-text-400"
+                  className="size-3.5 flex-shrink-0 text-placeholder outline-none hover:text-tertiary"
                   onClick={() => unPinNavigationItem(item.key)}
                 />
               </Tooltip>
             ) : (
               <Tooltip tooltipContent="Pin">
                 <Pin
-                  className="size-3.5 flex-shrink-0 hover:text-custom-text-300 outline-none text-custom-text-400"
+                  className="size-3.5 flex-shrink-0 text-placeholder outline-none hover:text-tertiary"
                   onClick={() => pinNavigationItem(item.key)}
                 />
               </Tooltip>
diff --git a/apps/web/ce/components/workspace/sidebar/helper.tsx b/apps/web/ce/components/workspace/sidebar/helper.tsx
index 50323f320..9bf4a01bf 100644
--- a/apps/web/ce/components/workspace/sidebar/helper.tsx
+++ b/apps/web/ce/components/workspace/sidebar/helper.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import {
   AnalyticsIcon,
   ArchiveIcon,
diff --git a/apps/web/ce/components/workspace/sidebar/sidebar-item.tsx b/apps/web/ce/components/workspace/sidebar/sidebar-item.tsx
index b497cb458..c6fbc8f9f 100644
--- a/apps/web/ce/components/workspace/sidebar/sidebar-item.tsx
+++ b/apps/web/ce/components/workspace/sidebar/sidebar-item.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { IWorkspaceSidebarNavigationItem } from "@plane/constants";
 import { SidebarItemBase } from "@/components/workspace/sidebar/sidebar-item";
 
diff --git a/apps/web/ce/components/workspace/sidebar/teams-sidebar-list.tsx b/apps/web/ce/components/workspace/sidebar/teams-sidebar-list.tsx
index fd8ca8be9..3d6a97d14 100644
--- a/apps/web/ce/components/workspace/sidebar/teams-sidebar-list.tsx
+++ b/apps/web/ce/components/workspace/sidebar/teams-sidebar-list.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export function SidebarTeamsList() {
   return null;
 }
diff --git a/apps/web/ce/components/workspace/upgrade-badge.tsx b/apps/web/ce/components/workspace/upgrade-badge.tsx
index cd267e464..5bddd913d 100644
--- a/apps/web/ce/components/workspace/upgrade-badge.tsx
+++ b/apps/web/ce/components/workspace/upgrade-badge.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // helpers
 import { useTranslation } from "@plane/i18n";
 import { cn } from "@plane/utils";
@@ -16,10 +21,10 @@ export function UpgradeBadge(props: TUpgradeBadge) {
   return (
     <div
       className={cn(
-        "w-fit cursor-pointer rounded-2xl text-custom-primary-200 bg-custom-primary-100/20 text-center font-medium outline-none",
+        "w-fit cursor-pointer rounded-2xl bg-accent-primary/20 text-center font-medium text-accent-secondary outline-none",
         {
-          "text-sm px-3": size === "md",
-          "text-xs px-2": size === "sm",
+          "px-3 text-13": size === "md",
+          "px-2 text-11": size === "sm",
         },
         className
       )}
diff --git a/apps/web/ce/constants/gantt-chart.ts b/apps/web/ce/constants/gantt-chart.ts
deleted file mode 100644
index 95e39bcc8..000000000
--- a/apps/web/ce/constants/gantt-chart.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import type { TIssueRelationTypes } from "../types";
-
-export const REVERSE_RELATIONS: { [key in TIssueRelationTypes]: TIssueRelationTypes } = {
-  blocked_by: "blocking",
-  blocking: "blocked_by",
-  relates_to: "relates_to",
-  duplicate: "duplicate",
-};
diff --git a/apps/web/ce/constants/project/index.ts b/apps/web/ce/constants/project/index.ts
deleted file mode 100644
index dcf101b0c..000000000
--- a/apps/web/ce/constants/project/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./settings";
diff --git a/apps/web/ce/constants/project/settings/features.tsx b/apps/web/ce/constants/project/settings/features.tsx
deleted file mode 100644
index 90a0ff254..000000000
--- a/apps/web/ce/constants/project/settings/features.tsx
+++ /dev/null
@@ -1,88 +0,0 @@
-import type { ReactNode } from "react";
-// plane imports
-import { CycleIcon, IntakeIcon, ModuleIcon, PageIcon, ViewsIcon } from "@plane/propel/icons";
-import type { IProject } from "@plane/types";
-
-export type TProperties = {
-  key: string;
-  property: string;
-  title: string;
-  description: string;
-  icon: ReactNode;
-  isPro: boolean;
-  isEnabled: boolean;
-  renderChildren?: (currentProjectDetails: IProject, workspaceSlug: string) => ReactNode;
-  href?: string;
-};
-
-type TProjectBaseFeatureKeys = "cycles" | "modules" | "views" | "pages" | "inbox";
-
-type TBaseFeatureList = {
-  [key in TProjectBaseFeatureKeys]: TProperties;
-};
-
-export const PROJECT_BASE_FEATURES_LIST: TBaseFeatureList = {
-  cycles: {
-    key: "cycles",
-    property: "cycle_view",
-    title: "Cycles",
-    description: "Timebox work as you see fit per project and change frequency from one period to the next.",
-    icon: <CycleIcon className="h-5 w-5 flex-shrink-0 rotate-180 text-custom-text-300" />,
-    isPro: false,
-    isEnabled: true,
-  },
-  modules: {
-    key: "modules",
-    property: "module_view",
-    title: "Modules",
-    description: "Group work into sub-project-like set-ups with their own leads and assignees.",
-    icon: <ModuleIcon width={20} height={20} className="flex-shrink-0 text-custom-text-300" />,
-    isPro: false,
-    isEnabled: true,
-  },
-  views: {
-    key: "views",
-    property: "issue_views_view",
-    title: "Views",
-    description: "Save sorts, filters, and display options for later or share them.",
-    icon: <ViewsIcon className="h-5 w-5 flex-shrink-0 text-custom-text-300" />,
-    isPro: false,
-    isEnabled: true,
-  },
-  pages: {
-    key: "pages",
-    property: "page_view",
-    title: "Pages",
-    description: "Write anything like you write anything.",
-    icon: <PageIcon className="h-5 w-5 flex-shrink-0 text-custom-text-300" />,
-    isPro: false,
-    isEnabled: true,
-  },
-  inbox: {
-    key: "intake",
-    property: "inbox_view",
-    title: "Intake",
-    description: "Consider and discuss work items before you add them to your project.",
-    icon: <IntakeIcon className="h-5 w-5 flex-shrink-0 text-custom-text-300" />,
-    isPro: false,
-    isEnabled: true,
-  },
-};
-
-type TProjectFeatures = {
-  project_features: {
-    key: string;
-    title: string;
-    description: string;
-    featureList: TBaseFeatureList;
-  };
-};
-
-export const PROJECT_FEATURES_LIST: TProjectFeatures = {
-  project_features: {
-    key: "projects_and_issues",
-    title: "Projects and work items",
-    description: "Toggle these on or off this project.",
-    featureList: PROJECT_BASE_FEATURES_LIST,
-  },
-};
diff --git a/apps/web/ce/constants/project/settings/index.ts b/apps/web/ce/constants/project/settings/index.ts
deleted file mode 100644
index a6a842e7b..000000000
--- a/apps/web/ce/constants/project/settings/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from "./features";
-export * from "./tabs";
diff --git a/apps/web/ce/constants/project/settings/tabs.ts b/apps/web/ce/constants/project/settings/tabs.ts
deleted file mode 100644
index f78b51a74..000000000
--- a/apps/web/ce/constants/project/settings/tabs.ts
+++ /dev/null
@@ -1,82 +0,0 @@
-// icons
-import { EUserPermissions } from "@plane/constants";
-import { SettingIcon } from "@/components/icons/attachment";
-// types
-import type { Props } from "@/components/icons/types";
-// constants
-
-export const PROJECT_SETTINGS = {
-  general: {
-    key: "general",
-    i18n_label: "common.general",
-    href: ``,
-    access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER, EUserPermissions.GUEST],
-    highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/`,
-    Icon: SettingIcon,
-  },
-  members: {
-    key: "members",
-    i18n_label: "common.members",
-    href: `/members`,
-    access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER, EUserPermissions.GUEST],
-    highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/members/`,
-    Icon: SettingIcon,
-  },
-  features: {
-    key: "features",
-    i18n_label: "common.features",
-    href: `/features`,
-    access: [EUserPermissions.ADMIN],
-    highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/features/`,
-    Icon: SettingIcon,
-  },
-  states: {
-    key: "states",
-    i18n_label: "common.states",
-    href: `/states`,
-    access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
-    highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/states/`,
-    Icon: SettingIcon,
-  },
-  labels: {
-    key: "labels",
-    i18n_label: "common.labels",
-    href: `/labels`,
-    access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
-    highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/labels/`,
-    Icon: SettingIcon,
-  },
-  estimates: {
-    key: "estimates",
-    i18n_label: "common.estimates",
-    href: `/estimates`,
-    access: [EUserPermissions.ADMIN],
-    highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/estimates/`,
-    Icon: SettingIcon,
-  },
-  automations: {
-    key: "automations",
-    i18n_label: "project_settings.automations.label",
-    href: `/automations`,
-    access: [EUserPermissions.ADMIN],
-    highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/automations/`,
-    Icon: SettingIcon,
-  },
-};
-
-export const PROJECT_SETTINGS_LINKS: {
-  key: string;
-  i18n_label: string;
-  href: string;
-  access: EUserPermissions[];
-  highlight: (pathname: string, baseUrl: string) => boolean;
-  Icon: React.FC<Props>;
-}[] = [
-  PROJECT_SETTINGS["general"],
-  PROJECT_SETTINGS["members"],
-  PROJECT_SETTINGS["features"],
-  PROJECT_SETTINGS["states"],
-  PROJECT_SETTINGS["labels"],
-  PROJECT_SETTINGS["estimates"],
-  PROJECT_SETTINGS["automations"],
-];
diff --git a/apps/web/ce/helpers/command-palette.ts b/apps/web/ce/helpers/command-palette.ts
deleted file mode 100644
index d29660a16..000000000
--- a/apps/web/ce/helpers/command-palette.ts
+++ /dev/null
@@ -1,122 +0,0 @@
-// types
-import {
-  CYCLE_TRACKER_ELEMENTS,
-  MODULE_TRACKER_ELEMENTS,
-  PROJECT_PAGE_TRACKER_ELEMENTS,
-  PROJECT_TRACKER_ELEMENTS,
-  PROJECT_VIEW_TRACKER_ELEMENTS,
-  WORK_ITEM_TRACKER_ELEMENTS,
-} from "@plane/constants";
-import type { TCommandPaletteActionList, TCommandPaletteShortcut, TCommandPaletteShortcutList } from "@plane/types";
-// store
-import { captureClick } from "@/helpers/event-tracker.helper";
-import { store } from "@/lib/store-context";
-
-export const getGlobalShortcutsList: () => TCommandPaletteActionList = () => {
-  const { toggleCreateIssueModal } = store.commandPalette;
-
-  return {
-    c: {
-      title: "Create a new work item",
-      description: "Create a new work item in the current project",
-      action: () => {
-        toggleCreateIssueModal(true);
-        captureClick({ elementName: WORK_ITEM_TRACKER_ELEMENTS.COMMAND_PALETTE_ADD_BUTTON });
-      },
-    },
-  };
-};
-
-export const getWorkspaceShortcutsList: () => TCommandPaletteActionList = () => {
-  const { toggleCreateProjectModal } = store.commandPalette;
-
-  return {
-    p: {
-      title: "Create a new project",
-      description: "Create a new project in the current workspace",
-      action: () => {
-        toggleCreateProjectModal(true);
-        captureClick({ elementName: PROJECT_TRACKER_ELEMENTS.COMMAND_PALETTE_SHORTCUT_CREATE_BUTTON });
-      },
-    },
-  };
-};
-
-export const getProjectShortcutsList: () => TCommandPaletteActionList = () => {
-  const {
-    toggleCreatePageModal,
-    toggleCreateModuleModal,
-    toggleCreateCycleModal,
-    toggleCreateViewModal,
-    toggleBulkDeleteIssueModal,
-  } = store.commandPalette;
-
-  return {
-    d: {
-      title: "Create a new page",
-      description: "Create a new page in the current project",
-      action: () => {
-        toggleCreatePageModal({ isOpen: true });
-        captureClick({ elementName: PROJECT_PAGE_TRACKER_ELEMENTS.COMMAND_PALETTE_SHORTCUT_CREATE_BUTTON });
-      },
-    },
-    m: {
-      title: "Create a new module",
-      description: "Create a new module in the current project",
-      action: () => {
-        toggleCreateModuleModal(true);
-        captureClick({ elementName: MODULE_TRACKER_ELEMENTS.COMMAND_PALETTE_ADD_ITEM });
-      },
-    },
-    q: {
-      title: "Create a new cycle",
-      description: "Create a new cycle in the current project",
-      action: () => {
-        toggleCreateCycleModal(true);
-        captureClick({ elementName: CYCLE_TRACKER_ELEMENTS.COMMAND_PALETTE_ADD_ITEM });
-      },
-    },
-    v: {
-      title: "Create a new view",
-      description: "Create a new view in the current project",
-      action: () => {
-        toggleCreateViewModal(true);
-        captureClick({ elementName: PROJECT_VIEW_TRACKER_ELEMENTS.COMMAND_PALETTE_ADD_ITEM });
-      },
-    },
-    backspace: {
-      title: "Bulk delete work items",
-      description: "Bulk delete work items in the current project",
-      action: () => toggleBulkDeleteIssueModal(true),
-    },
-    delete: {
-      title: "Bulk delete work items",
-      description: "Bulk delete work items in the current project",
-      action: () => toggleBulkDeleteIssueModal(true),
-    },
-  };
-};
-
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-export const handleAdditionalKeyDownEvents = (e: KeyboardEvent) => null;
-
-export const getNavigationShortcutsList = (): TCommandPaletteShortcut[] => [
-  { keys: "Ctrl,K", description: "Open command menu" },
-];
-
-export const getCommonShortcutsList = (platform: string): TCommandPaletteShortcut[] => [
-  { keys: "P", description: "Create project" },
-  { keys: "C", description: "Create work item" },
-  { keys: "Q", description: "Create cycle" },
-  { keys: "M", description: "Create module" },
-  { keys: "V", description: "Create view" },
-  { keys: "D", description: "Create page" },
-  { keys: "Delete", description: "Bulk delete work items" },
-  { keys: "Shift,/", description: "Open shortcuts guide" },
-  {
-    keys: platform === "MacOS" ? "Ctrl,control,C" : "Ctrl,Alt,C",
-    description: "Copy work item URL from the work item details page",
-  },
-];
-
-export const getAdditionalShortcutsList = (): TCommandPaletteShortcutList[] => [];
diff --git a/apps/web/ce/helpers/epic-analytics.ts b/apps/web/ce/helpers/epic-analytics.ts
deleted file mode 100644
index 1a7a9df41..000000000
--- a/apps/web/ce/helpers/epic-analytics.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import type { TEpicAnalyticsGroup } from "@plane/types";
-
-export const updateEpicAnalytics = () => {
-  const updateAnalytics = (
-    workspaceSlug: string,
-    projectId: string,
-    epicId: string,
-    data: {
-      incrementStateGroupCount?: TEpicAnalyticsGroup;
-      decrementStateGroupCount?: TEpicAnalyticsGroup;
-    }
-  ) => {};
-
-  return { updateAnalytics };
-};
diff --git a/apps/web/ce/helpers/instance.helper.ts b/apps/web/ce/helpers/instance.helper.ts
deleted file mode 100644
index 622ef4af7..000000000
--- a/apps/web/ce/helpers/instance.helper.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { store } from "@/lib/store-context";
-
-export const getIsWorkspaceCreationDisabled = () => {
-  const instanceConfig = store.instance.config;
-
-  return instanceConfig?.is_workspace_creation_disabled;
-};
diff --git a/apps/web/ce/helpers/issue-action-helper.ts b/apps/web/ce/helpers/issue-action-helper.ts
deleted file mode 100644
index a3c66e273..000000000
--- a/apps/web/ce/helpers/issue-action-helper.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import type { IssueActions } from "@/hooks/use-issues-actions";
-
-export const useTeamIssueActions: () => IssueActions = () => ({
-  fetchIssues: () => Promise.resolve(undefined),
-  fetchNextIssues: () => Promise.resolve(undefined),
-  removeIssue: () => Promise.resolve(undefined),
-  updateFilters: () => Promise.resolve(undefined),
-});
-
-export const useTeamViewIssueActions: () => IssueActions = () => ({
-  fetchIssues: () => Promise.resolve(undefined),
-  fetchNextIssues: () => Promise.resolve(undefined),
-  removeIssue: () => Promise.resolve(undefined),
-  updateFilters: () => Promise.resolve(undefined),
-});
-
-export const useTeamProjectWorkItemsActions: () => IssueActions = () => ({
-  fetchIssues: () => Promise.resolve(undefined),
-  fetchNextIssues: () => Promise.resolve(undefined),
-  removeIssue: () => Promise.resolve(undefined),
-  updateFilters: () => Promise.resolve(undefined),
-});
diff --git a/apps/web/ce/helpers/pi-chat.helper.ts b/apps/web/ce/helpers/pi-chat.helper.ts
deleted file mode 100644
index 5676e9c00..000000000
--- a/apps/web/ce/helpers/pi-chat.helper.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export const hideFloatingBot = () => {};
-
-export const showFloatingBot = () => {};
diff --git a/apps/web/ce/helpers/project-settings.ts b/apps/web/ce/helpers/project-settings.ts
deleted file mode 100644
index dbe06507a..000000000
--- a/apps/web/ce/helpers/project-settings.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-/**
- * @description Get the i18n key for the project settings page label
- * @param _settingsKey - The key of the project settings page
- * @param defaultLabelKey - The default i18n key for the project settings page label
- * @returns The i18n key for the project settings page label
- */
-export const getProjectSettingsPageLabelI18nKey = (_settingsKey: string, defaultLabelKey: string) => defaultLabelKey;
diff --git a/apps/web/ce/helpers/work-item-filters/project-level.ts b/apps/web/ce/helpers/work-item-filters/project-level.ts
deleted file mode 100644
index be0bc64ec..000000000
--- a/apps/web/ce/helpers/work-item-filters/project-level.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-// plane imports
-import type { EIssuesStoreType } from "@plane/types";
-// plane web imports
-import type { TWorkItemFiltersEntityProps } from "@/plane-web/hooks/work-item-filters/use-work-item-filters-config";
-
-export type TGetAdditionalPropsForProjectLevelFiltersHOCParams = {
-  entityType: EIssuesStoreType;
-  workspaceSlug: string;
-  projectId: string;
-};
-
-export type TGetAdditionalPropsForProjectLevelFiltersHOC = (
-  params: TGetAdditionalPropsForProjectLevelFiltersHOCParams
-) => TWorkItemFiltersEntityProps;
-
-export const getAdditionalProjectLevelFiltersHOCProps: TGetAdditionalPropsForProjectLevelFiltersHOC = ({
-  workspaceSlug,
-}) => ({
-  workspaceSlug,
-});
diff --git a/apps/web/ce/helpers/workspace.helper.ts b/apps/web/ce/helpers/workspace.helper.ts
deleted file mode 100644
index 5e4bf3e46..000000000
--- a/apps/web/ce/helpers/workspace.helper.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export type TRenderSettingsLink = (workspaceSlug: string, settingKey: string) => boolean;
-export const shouldRenderSettingLink: TRenderSettingsLink = (workspaceSlug, settingKey) => true;
diff --git a/apps/web/ce/hooks/app-rail/index.ts b/apps/web/ce/hooks/app-rail/index.ts
index 1a8f850f5..d46b5c917 100644
--- a/apps/web/ce/hooks/app-rail/index.ts
+++ b/apps/web/ce/hooks/app-rail/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./provider";
diff --git a/apps/web/ce/hooks/app-rail/provider.tsx b/apps/web/ce/hooks/app-rail/provider.tsx
index 296ed3dc1..029f5a835 100644
--- a/apps/web/ce/hooks/app-rail/provider.tsx
+++ b/apps/web/ce/hooks/app-rail/provider.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 import { observer } from "mobx-react";
 import { AppRailVisibilityProvider as CoreProvider } from "@/lib/app-rail";
diff --git a/apps/web/ce/hooks/editor/use-extended-editor-config.ts b/apps/web/ce/hooks/editor/use-extended-editor-config.ts
index 9ca7b74a0..172d9026a 100644
--- a/apps/web/ce/hooks/editor/use-extended-editor-config.ts
+++ b/apps/web/ce/hooks/editor/use-extended-editor-config.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useCallback } from "react";
 // plane imports
 import type { TExtendedFileHandler } from "@plane/editor";
diff --git a/apps/web/ce/hooks/pages/index.ts b/apps/web/ce/hooks/pages/index.ts
index e67eaa797..bc7999e28 100644
--- a/apps/web/ce/hooks/pages/index.ts
+++ b/apps/web/ce/hooks/pages/index.ts
@@ -1,2 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./use-pages-pane-extensions";
 export * from "./use-extended-editor-extensions";
diff --git a/apps/web/ce/hooks/pages/use-extended-editor-extensions.ts b/apps/web/ce/hooks/pages/use-extended-editor-extensions.ts
index 737578481..cc3b0a213 100644
--- a/apps/web/ce/hooks/pages/use-extended-editor-extensions.ts
+++ b/apps/web/ce/hooks/pages/use-extended-editor-extensions.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { IEditorPropsExtended } from "@plane/editor";
 import type { TSearchEntityRequestPayload, TSearchResponse } from "@plane/types";
 import type { TPageInstance } from "@/store/pages/base-page";
diff --git a/apps/web/ce/hooks/pages/use-pages-pane-extensions.ts b/apps/web/ce/hooks/pages/use-pages-pane-extensions.ts
index 5aef069cf..6b2837e2f 100644
--- a/apps/web/ce/hooks/pages/use-pages-pane-extensions.ts
+++ b/apps/web/ce/hooks/pages/use-pages-pane-extensions.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useCallback, useMemo } from "react";
 import type { RefObject } from "react";
 import { useSearchParams } from "next/navigation";
diff --git a/apps/web/ce/hooks/rich-filters/use-filters-operator-configs.ts b/apps/web/ce/hooks/rich-filters/use-filters-operator-configs.ts
index 0c65a4de8..23d460109 100644
--- a/apps/web/ce/hooks/rich-filters/use-filters-operator-configs.ts
+++ b/apps/web/ce/hooks/rich-filters/use-filters-operator-configs.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { TSupportedOperators } from "@plane/types";
 import { CORE_OPERATORS } from "@plane/types";
 
diff --git a/apps/web/ce/hooks/store/index.ts b/apps/web/ce/hooks/store/index.ts
index 1962c9b26..c514dcefe 100644
--- a/apps/web/ce/hooks/store/index.ts
+++ b/apps/web/ce/hooks/store/index.ts
@@ -1,2 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./use-page-store";
 export * from "./use-page";
diff --git a/apps/web/ce/hooks/store/use-page-store.ts b/apps/web/ce/hooks/store/use-page-store.ts
index 025e03836..e9fe5776f 100644
--- a/apps/web/ce/hooks/store/use-page-store.ts
+++ b/apps/web/ce/hooks/store/use-page-store.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useContext } from "react";
 // context
 import { StoreContext } from "@/lib/store-context";
diff --git a/apps/web/ce/hooks/store/use-page.ts b/apps/web/ce/hooks/store/use-page.ts
index d4c531fe4..7b588321e 100644
--- a/apps/web/ce/hooks/store/use-page.ts
+++ b/apps/web/ce/hooks/store/use-page.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useContext } from "react";
 // mobx store
 import { StoreContext } from "@/lib/store-context";
diff --git a/apps/web/ce/hooks/use-additional-editor-mention.tsx b/apps/web/ce/hooks/use-additional-editor-mention.tsx
index a3b719231..3f936ebd2 100644
--- a/apps/web/ce/hooks/use-additional-editor-mention.tsx
+++ b/apps/web/ce/hooks/use-additional-editor-mention.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useCallback, useMemo } from "react";
 // plane editor
 import type { TMentionSection } from "@plane/editor";
diff --git a/apps/web/ce/hooks/use-additional-favorite-item-details.ts b/apps/web/ce/hooks/use-additional-favorite-item-details.ts
index 7d1a6d36f..7bf502ea1 100644
--- a/apps/web/ce/hooks/use-additional-favorite-item-details.ts
+++ b/apps/web/ce/hooks/use-additional-favorite-item-details.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // plane imports
 import type { IFavorite } from "@plane/types";
 // components
diff --git a/apps/web/ce/hooks/use-bulk-operation-status.ts b/apps/web/ce/hooks/use-bulk-operation-status.ts
index 0bb676810..539779061 100644
--- a/apps/web/ce/hooks/use-bulk-operation-status.ts
+++ b/apps/web/ce/hooks/use-bulk-operation-status.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export const useBulkOperationStatus = () => false;
diff --git a/apps/web/ce/hooks/use-debounced-duplicate-issues.tsx b/apps/web/ce/hooks/use-debounced-duplicate-issues.tsx
index b8c32d1bd..324599097 100644
--- a/apps/web/ce/hooks/use-debounced-duplicate-issues.tsx
+++ b/apps/web/ce/hooks/use-debounced-duplicate-issues.tsx
@@ -1,10 +1,16 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { TDeDupeIssue } from "@plane/types";
 
 export const useDebouncedDuplicateIssues = (
-  workspaceSlug: string | undefined,
-  workspaceId: string | undefined,
-  projectId: string | undefined,
-  formData: { name: string | undefined; description_html?: string | undefined; issueId?: string | undefined }
+  _workspaceSlug: string | undefined,
+  _workspaceId: string | undefined,
+  _projectId: string | undefined,
+  _formData: { name: string | undefined; description_html?: string | undefined; issueId?: string | undefined }
 ) => {
   const duplicateIssues: TDeDupeIssue[] = [];
 
diff --git a/apps/web/ce/hooks/use-editor-flagging.ts b/apps/web/ce/hooks/use-editor-flagging.ts
index 2c8766c95..e1841ff66 100644
--- a/apps/web/ce/hooks/use-editor-flagging.ts
+++ b/apps/web/ce/hooks/use-editor-flagging.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // editor
 import type { TExtensions } from "@plane/editor";
 import type { EPageStoreType } from "@/plane-web/hooks/store";
diff --git a/apps/web/ce/hooks/use-file-size.ts b/apps/web/ce/hooks/use-file-size.ts
index c72e96da5..a453d65dc 100644
--- a/apps/web/ce/hooks/use-file-size.ts
+++ b/apps/web/ce/hooks/use-file-size.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // plane imports
 import { MAX_FILE_SIZE } from "@plane/constants";
 // hooks
diff --git a/apps/web/ce/hooks/use-issue-embed.tsx b/apps/web/ce/hooks/use-issue-embed.tsx
index 67bc79b7e..6ffbec7cd 100644
--- a/apps/web/ce/hooks/use-issue-embed.tsx
+++ b/apps/web/ce/hooks/use-issue-embed.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // editor
 import type { TEmbedConfig } from "@plane/editor";
 // plane types
diff --git a/apps/web/ce/hooks/use-issue-properties.tsx b/apps/web/ce/hooks/use-issue-properties.tsx
index 12a020c8c..310fd725e 100644
--- a/apps/web/ce/hooks/use-issue-properties.tsx
+++ b/apps/web/ce/hooks/use-issue-properties.tsx
@@ -1,10 +1,16 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { TIssueServiceType } from "@plane/types";
 
 export const useWorkItemProperties = (
   projectId: string | null | undefined,
   workspaceSlug: string | null | undefined,
   workItemId: string | null | undefined,
-  issueServiceType: TIssueServiceType
+  _issueServiceType: TIssueServiceType
 ) => {
   if (!projectId || !workspaceSlug || !workItemId) return;
 };
diff --git a/apps/web/ce/hooks/use-notification-preview.tsx b/apps/web/ce/hooks/use-notification-preview.tsx
index 6e21868a5..11bcbf4a2 100644
--- a/apps/web/ce/hooks/use-notification-preview.tsx
+++ b/apps/web/ce/hooks/use-notification-preview.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { IWorkItemPeekOverview } from "@plane/types";
 import { EIssueServiceType } from "@plane/types";
 import { IssuePeekOverview } from "@/components/issues/peek-overview";
diff --git a/apps/web/ce/hooks/use-page-flag.ts b/apps/web/ce/hooks/use-page-flag.ts
index 94d72065a..1fff2492a 100644
--- a/apps/web/ce/hooks/use-page-flag.ts
+++ b/apps/web/ce/hooks/use-page-flag.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export type TPageFlagHookArgs = {
   workspaceSlug: string;
 };
diff --git a/apps/web/ce/hooks/use-timeline-chart.ts b/apps/web/ce/hooks/use-timeline-chart.ts
index b935a7403..2deaae254 100644
--- a/apps/web/ce/hooks/use-timeline-chart.ts
+++ b/apps/web/ce/hooks/use-timeline-chart.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // types
 import type { TTimelineTypeCore } from "@plane/types";
 import { GANTT_TIMELINE_TYPE } from "@plane/types";
diff --git a/apps/web/ce/hooks/use-workspace-issue-properties-extended.tsx b/apps/web/ce/hooks/use-workspace-issue-properties-extended.tsx
index 6e9ba79f2..a9d7b019d 100644
--- a/apps/web/ce/hooks/use-workspace-issue-properties-extended.tsx
+++ b/apps/web/ce/hooks/use-workspace-issue-properties-extended.tsx
@@ -1,2 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 export const useWorkspaceIssuePropertiesExtended = (workspaceSlug: string | string[] | undefined) => {};
diff --git a/apps/web/ce/hooks/work-item-filters/use-work-item-filters-config.tsx b/apps/web/ce/hooks/work-item-filters/use-work-item-filters-config.tsx
index 48aee8c77..c4b6f3f0b 100644
--- a/apps/web/ce/hooks/work-item-filters/use-work-item-filters-config.tsx
+++ b/apps/web/ce/hooks/work-item-filters/use-work-item-filters-config.tsx
@@ -1,8 +1,15 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useCallback, useMemo } from "react";
-import { AtSign, Briefcase, Calendar } from "lucide-react";
+import { AtSign, Briefcase } from "lucide-react";
 // plane imports
 import { Logo } from "@plane/propel/emoji-icon-picker";
 import {
+  CalendarLayoutIcon,
   CycleGroupIcon,
   CycleIcon,
   ModuleIcon,
@@ -21,7 +28,6 @@ import type {
   IState,
   IUserLite,
   TFilterConfig,
-  TFilterValue,
   IIssueLabel,
   IModule,
   IProject,
@@ -74,9 +80,9 @@ export type TUseWorkItemFiltersConfigProps = {
 
 export type TWorkItemFiltersConfig = {
   areAllConfigsInitialized: boolean;
-  configs: TFilterConfig<TWorkItemFilterProperty, TFilterValue>[];
+  configs: TFilterConfig<TWorkItemFilterProperty>[];
   configMap: {
-    [key in TWorkItemFilterProperty]?: TFilterConfig<TWorkItemFilterProperty, TFilterValue>;
+    [key in TWorkItemFilterProperty]?: TFilterConfig<TWorkItemFilterProperty>;
   };
   isFilterEnabled: (key: TWorkItemFilterProperty) => boolean;
   members: IUserLite[];
@@ -174,7 +180,7 @@ export const useWorkItemFiltersConfig = (props: TUseWorkItemFiltersConfigProps):
         filterIcon: LabelPropertyIcon,
         labels: workItemLabels ?? [],
         getOptionIcon: (color) => (
-          <span className="flex flex-shrink-0 size-2.5 rounded-full" style={{ backgroundColor: color }} />
+          <span className="flex size-2.5 flex-shrink-0 rounded-full" style={{ backgroundColor: color }} />
         ),
         ...operatorConfigs,
       }),
@@ -326,7 +332,7 @@ export const useWorkItemFiltersConfig = (props: TUseWorkItemFiltersConfigProps):
     () =>
       getCreatedAtFilterConfig<TWorkItemFilterProperty>("created_at")({
         isEnabled: true,
-        filterIcon: Calendar,
+        filterIcon: CalendarLayoutIcon,
         ...operatorConfigs,
       }),
     [operatorConfigs]
@@ -337,7 +343,7 @@ export const useWorkItemFiltersConfig = (props: TUseWorkItemFiltersConfigProps):
     () =>
       getUpdatedAtFilterConfig<TWorkItemFilterProperty>("updated_at")({
         isEnabled: true,
-        filterIcon: Calendar,
+        filterIcon: CalendarLayoutIcon,
         ...operatorConfigs,
       }),
     [operatorConfigs]
diff --git a/apps/web/ce/layouts/project-wrapper.tsx b/apps/web/ce/layouts/project-wrapper.tsx
deleted file mode 100644
index edfd3d41f..000000000
--- a/apps/web/ce/layouts/project-wrapper.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { observer } from "mobx-react";
-// layouts
-import { ProjectAuthWrapper as CoreProjectAuthWrapper } from "@/layouts/auth-layout/project-wrapper";
-
-export type IProjectAuthWrapper = {
-  workspaceSlug: string;
-  projectId: string;
-  children: React.ReactNode;
-};
-
-export const ProjectAuthWrapper = observer(function ProjectAuthWrapper(props: IProjectAuthWrapper) {
-  // props
-  const { workspaceSlug, projectId, children } = props;
-
-  return (
-    <CoreProjectAuthWrapper workspaceSlug={workspaceSlug} projectId={projectId}>
-      {children}
-    </CoreProjectAuthWrapper>
-  );
-});
diff --git a/apps/web/ce/layouts/workspace-wrapper.tsx b/apps/web/ce/layouts/workspace-wrapper.tsx
deleted file mode 100644
index 1eaba348d..000000000
--- a/apps/web/ce/layouts/workspace-wrapper.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import type { FC } from "react";
-import { observer } from "mobx-react";
-// layouts
-import { WorkspaceAuthWrapper as CoreWorkspaceAuthWrapper } from "@/layouts/auth-layout/workspace-wrapper";
-
-export type IWorkspaceAuthWrapper = {
-  children: React.ReactNode;
-};
-
-export const WorkspaceAuthWrapper = observer(function WorkspaceAuthWrapper(props: IWorkspaceAuthWrapper) {
-  // props
-  const { children } = props;
-
-  return <CoreWorkspaceAuthWrapper>{children}</CoreWorkspaceAuthWrapper>;
-});
diff --git a/apps/web/ce/services/index.ts b/apps/web/ce/services/index.ts
deleted file mode 100644
index 7e406b1b4..000000000
--- a/apps/web/ce/services/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from "./project";
-export * from "@/services/workspace.service";
diff --git a/apps/web/ce/services/project/index.ts b/apps/web/ce/services/project/index.ts
deleted file mode 100644
index 8b75f6bf5..000000000
--- a/apps/web/ce/services/project/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from "./estimate.service";
-export * from "@/services/view.service";
diff --git a/apps/web/ce/services/project/project-state.service.ts b/apps/web/ce/services/project/project-state.service.ts
deleted file mode 100644
index f4a48ae71..000000000
--- a/apps/web/ce/services/project/project-state.service.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "@/services/project/project-state.service";
diff --git a/apps/web/ce/store/analytics.store.ts b/apps/web/ce/store/analytics.store.ts
index 9556dcf3a..9ae14f9b6 100644
--- a/apps/web/ce/store/analytics.store.ts
+++ b/apps/web/ce/store/analytics.store.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { IBaseAnalyticsStore } from "@/store/analytics.store";
 import { BaseAnalyticsStore } from "@/store/analytics.store";
 
diff --git a/apps/web/ce/store/command-palette.store.ts b/apps/web/ce/store/command-palette.store.ts
index 6a3f8abae..9d5ff8a01 100644
--- a/apps/web/ce/store/command-palette.store.ts
+++ b/apps/web/ce/store/command-palette.store.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { computed, makeObservable } from "mobx";
 // types / constants
 import type { IBaseCommandPaletteStore } from "@/store/base-command-palette.store";
diff --git a/apps/web/ce/store/cycle/index.ts b/apps/web/ce/store/cycle/index.ts
index d9b3080a8..884a0e71b 100644
--- a/apps/web/ce/store/cycle/index.ts
+++ b/apps/web/ce/store/cycle/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export type { ICycleStore } from "@/store/cycle.store";
diff --git a/apps/web/ce/store/estimates/estimate.ts b/apps/web/ce/store/estimates/estimate.ts
index 8a32799bc..805c00df8 100644
--- a/apps/web/ce/store/estimates/estimate.ts
+++ b/apps/web/ce/store/estimates/estimate.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { orderBy, set } from "lodash-es";
 import { action, computed, makeObservable, observable, runInAction } from "mobx";
 import { computedFn } from "mobx-utils";
@@ -8,7 +14,7 @@ import type {
   TEstimateSystemKeys,
 } from "@plane/types";
 // plane web services
-import estimateService from "@/plane-web/services/project/estimate.service";
+import estimateService from "@/services/estimate.service";
 // store
 import type { IEstimatePoint } from "@/store/estimates/estimate-point";
 import { EstimatePoint } from "@/store/estimates/estimate-point";
diff --git a/apps/web/ce/store/global-view.store.ts b/apps/web/ce/store/global-view.store.ts
index f0d5cdfb4..069b4fcd3 100644
--- a/apps/web/ce/store/global-view.store.ts
+++ b/apps/web/ce/store/global-view.store.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "@/store/global-view.store";
diff --git a/apps/web/ce/store/issue/epic/filter.store.ts b/apps/web/ce/store/issue/epic/filter.store.ts
index 999e1515d..be441707c 100644
--- a/apps/web/ce/store/issue/epic/filter.store.ts
+++ b/apps/web/ce/store/issue/epic/filter.store.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { IProjectIssuesFilter } from "@/store/issue/project";
 import { ProjectIssuesFilter } from "@/store/issue/project";
 import type { IIssueRootStore } from "@/store/issue/root.store";
diff --git a/apps/web/ce/store/issue/epic/index.ts b/apps/web/ce/store/issue/epic/index.ts
index 0fe6c946b..a21a791fe 100644
--- a/apps/web/ce/store/issue/epic/index.ts
+++ b/apps/web/ce/store/issue/epic/index.ts
@@ -1,2 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./filter.store";
 export * from "./issue.store";
diff --git a/apps/web/ce/store/issue/epic/issue.store.ts b/apps/web/ce/store/issue/epic/issue.store.ts
index 702a4c05c..b6761eac8 100644
--- a/apps/web/ce/store/issue/epic/issue.store.ts
+++ b/apps/web/ce/store/issue/epic/issue.store.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { IProjectIssues } from "@/store/issue/project";
 import { ProjectIssues } from "@/store/issue/project";
 import type { IIssueRootStore } from "@/store/issue/root.store";
diff --git a/apps/web/ce/store/issue/helpers/base-issue-store.ts b/apps/web/ce/store/issue/helpers/base-issue-store.ts
index eac5cec17..236235a82 100644
--- a/apps/web/ce/store/issue/helpers/base-issue-store.ts
+++ b/apps/web/ce/store/issue/helpers/base-issue-store.ts
@@ -1,4 +1,10 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { TIssue } from "@plane/types";
 import { getIssueIds } from "@/store/issue/helpers/base-issues-utils";
 
-export const workItemSortWithOrderByExtended = (array: TIssue[], key?: string) => getIssueIds(array);
+export const workItemSortWithOrderByExtended = (array: TIssue[], _key?: string) => getIssueIds(array);
diff --git a/apps/web/ce/store/issue/helpers/base-issue.store.ts b/apps/web/ce/store/issue/helpers/base-issue.store.ts
index eac5cec17..236235a82 100644
--- a/apps/web/ce/store/issue/helpers/base-issue.store.ts
+++ b/apps/web/ce/store/issue/helpers/base-issue.store.ts
@@ -1,4 +1,10 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { TIssue } from "@plane/types";
 import { getIssueIds } from "@/store/issue/helpers/base-issues-utils";
 
-export const workItemSortWithOrderByExtended = (array: TIssue[], key?: string) => getIssueIds(array);
+export const workItemSortWithOrderByExtended = (array: TIssue[], _key?: string) => getIssueIds(array);
diff --git a/apps/web/ce/store/issue/helpers/filter-utils.ts b/apps/web/ce/store/issue/helpers/filter-utils.ts
index eedd12624..66ce74355 100644
--- a/apps/web/ce/store/issue/helpers/filter-utils.ts
+++ b/apps/web/ce/store/issue/helpers/filter-utils.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { IIssueDisplayFilterOptions } from "@plane/types";
 
 export const getEnabledDisplayFilters = (displayFilters: IIssueDisplayFilterOptions) => displayFilters;
diff --git a/apps/web/ce/store/issue/issue-details/activity.store.ts b/apps/web/ce/store/issue/issue-details/activity.store.ts
index ab86bc1c1..a9f4b0a5e 100644
--- a/apps/web/ce/store/issue/issue-details/activity.store.ts
+++ b/apps/web/ce/store/issue/issue-details/activity.store.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { concat, orderBy, set, uniq, update } from "lodash-es";
 import { action, makeObservable, observable, runInAction } from "mobx";
 import { computedFn } from "mobx-utils";
diff --git a/apps/web/ce/store/issue/issue-details/root.store.ts b/apps/web/ce/store/issue/issue-details/root.store.ts
index 2bc4f03ed..1b96b49e1 100644
--- a/apps/web/ce/store/issue/issue-details/root.store.ts
+++ b/apps/web/ce/store/issue/issue-details/root.store.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { makeObservable } from "mobx";
 import type { TIssueServiceType } from "@plane/types";
 import type { IIssueDetail as IIssueDetailCore } from "@/store/issue/issue-details/root.store";
diff --git a/apps/web/ce/store/issue/team-project/filter.store.ts b/apps/web/ce/store/issue/team-project/filter.store.ts
index 8cdb7787d..45d5324c8 100644
--- a/apps/web/ce/store/issue/team-project/filter.store.ts
+++ b/apps/web/ce/store/issue/team-project/filter.store.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { IProjectIssuesFilter } from "@/store/issue/project";
 import { ProjectIssuesFilter } from "@/store/issue/project";
 import type { IIssueRootStore } from "@/store/issue/root.store";
diff --git a/apps/web/ce/store/issue/team-project/index.ts b/apps/web/ce/store/issue/team-project/index.ts
index 0fe6c946b..a21a791fe 100644
--- a/apps/web/ce/store/issue/team-project/index.ts
+++ b/apps/web/ce/store/issue/team-project/index.ts
@@ -1,2 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./filter.store";
 export * from "./issue.store";
diff --git a/apps/web/ce/store/issue/team-project/issue.store.ts b/apps/web/ce/store/issue/team-project/issue.store.ts
index 496d5fda6..fa2713490 100644
--- a/apps/web/ce/store/issue/team-project/issue.store.ts
+++ b/apps/web/ce/store/issue/team-project/issue.store.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { IProjectIssues } from "@/store/issue/project";
 import { ProjectIssues } from "@/store/issue/project";
 import type { IIssueRootStore } from "@/store/issue/root.store";
diff --git a/apps/web/ce/store/issue/team-views/filter.store.ts b/apps/web/ce/store/issue/team-views/filter.store.ts
index a40a3eaa2..133f98da4 100644
--- a/apps/web/ce/store/issue/team-views/filter.store.ts
+++ b/apps/web/ce/store/issue/team-views/filter.store.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { IProjectViewIssuesFilter } from "@/store/issue/project-views";
 import { ProjectViewIssuesFilter } from "@/store/issue/project-views";
 import type { IIssueRootStore } from "@/store/issue/root.store";
diff --git a/apps/web/ce/store/issue/team-views/index.ts b/apps/web/ce/store/issue/team-views/index.ts
index 0fe6c946b..a21a791fe 100644
--- a/apps/web/ce/store/issue/team-views/index.ts
+++ b/apps/web/ce/store/issue/team-views/index.ts
@@ -1,2 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./filter.store";
 export * from "./issue.store";
diff --git a/apps/web/ce/store/issue/team-views/issue.store.ts b/apps/web/ce/store/issue/team-views/issue.store.ts
index 8bcfbc67e..610520007 100644
--- a/apps/web/ce/store/issue/team-views/issue.store.ts
+++ b/apps/web/ce/store/issue/team-views/issue.store.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { IProjectViewIssues } from "@/store/issue/project-views";
 import { ProjectViewIssues } from "@/store/issue/project-views";
 import type { IIssueRootStore } from "@/store/issue/root.store";
diff --git a/apps/web/ce/store/issue/team/filter.store.ts b/apps/web/ce/store/issue/team/filter.store.ts
index 62e1f2eb6..20842d2a3 100644
--- a/apps/web/ce/store/issue/team/filter.store.ts
+++ b/apps/web/ce/store/issue/team/filter.store.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { IProjectIssuesFilter } from "@/store/issue/project";
 import { ProjectIssuesFilter } from "@/store/issue/project";
 import type { IIssueRootStore } from "@/store/issue/root.store";
diff --git a/apps/web/ce/store/issue/team/index.ts b/apps/web/ce/store/issue/team/index.ts
index 0fe6c946b..a21a791fe 100644
--- a/apps/web/ce/store/issue/team/index.ts
+++ b/apps/web/ce/store/issue/team/index.ts
@@ -1,2 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./filter.store";
 export * from "./issue.store";
diff --git a/apps/web/ce/store/issue/team/issue.store.ts b/apps/web/ce/store/issue/team/issue.store.ts
index 446332c58..a24515c23 100644
--- a/apps/web/ce/store/issue/team/issue.store.ts
+++ b/apps/web/ce/store/issue/team/issue.store.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { IProjectIssues } from "@/store/issue/project";
 import { ProjectIssues } from "@/store/issue/project";
 import type { IIssueRootStore } from "@/store/issue/root.store";
diff --git a/apps/web/ce/store/issue/workspace/issue.store.ts b/apps/web/ce/store/issue/workspace/issue.store.ts
index 7317da96d..0862be70c 100644
--- a/apps/web/ce/store/issue/workspace/issue.store.ts
+++ b/apps/web/ce/store/issue/workspace/issue.store.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "@/store/issue/workspace/issue.store";
diff --git a/apps/web/ce/store/member/project-member.store.ts b/apps/web/ce/store/member/project-member.store.ts
index f0e5b3069..6f534a150 100644
--- a/apps/web/ce/store/member/project-member.store.ts
+++ b/apps/web/ce/store/member/project-member.store.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { computedFn } from "mobx-utils";
 import type { EUserProjectRoles } from "@plane/types";
 // plane imports
diff --git a/apps/web/ce/store/pages/extended-base-page.ts b/apps/web/ce/store/pages/extended-base-page.ts
index 2c5cd3066..3144ef647 100644
--- a/apps/web/ce/store/pages/extended-base-page.ts
+++ b/apps/web/ce/store/pages/extended-base-page.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { TPage, TPageExtended } from "@plane/types";
 import type { RootStore } from "@/plane-web/store/root.store";
 import type { TBasePageServices } from "@/store/pages/base-page";
diff --git a/apps/web/ce/store/power-k.store.ts b/apps/web/ce/store/power-k.store.ts
index 753d32940..9528c5e16 100644
--- a/apps/web/ce/store/power-k.store.ts
+++ b/apps/web/ce/store/power-k.store.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { makeObservable } from "mobx";
 // types
 import type { IBasePowerKStore } from "@/store/base-power-k.store";
diff --git a/apps/web/ce/store/project-inbox.store.ts b/apps/web/ce/store/project-inbox.store.ts
index 327ff23af..3adbb1862 100644
--- a/apps/web/ce/store/project-inbox.store.ts
+++ b/apps/web/ce/store/project-inbox.store.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "@/store/inbox/project-inbox.store";
diff --git a/apps/web/ce/store/project-view.store.ts b/apps/web/ce/store/project-view.store.ts
index 41d7ba1ca..0763fb665 100644
--- a/apps/web/ce/store/project-view.store.ts
+++ b/apps/web/ce/store/project-view.store.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "@/store/project-view.store";
diff --git a/apps/web/ce/store/root.store.ts b/apps/web/ce/store/root.store.ts
index ca6caff8c..9eadadf72 100644
--- a/apps/web/ce/store/root.store.ts
+++ b/apps/web/ce/store/root.store.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // store
 import { CoreRootStore } from "@/store/root.store";
 import type { ITimelineStore } from "./timeline";
diff --git a/apps/web/ce/store/state.store.ts b/apps/web/ce/store/state.store.ts
index a25412ca8..b27221268 100644
--- a/apps/web/ce/store/state.store.ts
+++ b/apps/web/ce/store/state.store.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "@/store/state.store";
diff --git a/apps/web/ce/store/timeline/base-timeline.store.ts b/apps/web/ce/store/timeline/base-timeline.store.ts
index 37a75d3de..b97b2ff7e 100644
--- a/apps/web/ce/store/timeline/base-timeline.store.ts
+++ b/apps/web/ce/store/timeline/base-timeline.store.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { isEqual, set } from "lodash-es";
 import { action, makeObservable, observable, runInAction } from "mobx";
 import { computedFn } from "mobx-utils";
@@ -336,5 +342,5 @@ export class BaseTimeLineStore implements IBaseTimelineStore {
   });
 
   // Dummy method to return if the current Block's dependency is being dragged
-  getIsCurrentDependencyDragging = computedFn((blockId: string) => false);
+  getIsCurrentDependencyDragging = computedFn((_blockId: string) => false);
 }
diff --git a/apps/web/ce/store/timeline/index.ts b/apps/web/ce/store/timeline/index.ts
index a6afa124c..7fe482b93 100644
--- a/apps/web/ce/store/timeline/index.ts
+++ b/apps/web/ce/store/timeline/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { RootStore } from "@/plane-web/store/root.store";
 import { IssuesTimeLineStore } from "@/store/timeline/issues-timeline.store";
 import type { IIssuesTimeLineStore } from "@/store/timeline/issues-timeline.store";
diff --git a/apps/web/ce/store/user/permission.store.ts b/apps/web/ce/store/user/permission.store.ts
index e5a27f534..42b5dd4cc 100644
--- a/apps/web/ce/store/user/permission.store.ts
+++ b/apps/web/ce/store/user/permission.store.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { computedFn } from "mobx-utils";
 import type { EUserPermissions } from "@plane/constants";
 import type { RootStore } from "@/plane-web/store/root.store";
@@ -21,4 +27,8 @@ export class UserPermissionStore extends BaseUserPermissionStore implements IUse
     (workspaceSlug: string, projectId?: string): EUserPermissions | undefined =>
       this.getProjectRole(workspaceSlug, projectId)
   );
+
+  fetchWorkspaceLevelProjectEntities = (workspaceSlug: string, projectId: string): void => {
+    void this.store.projectRoot.project.fetchProjectDetails(workspaceSlug, projectId);
+  };
 }
diff --git a/apps/web/ce/store/workspace/index.ts b/apps/web/ce/store/workspace/index.ts
new file mode 100644
index 000000000..b27456364
--- /dev/null
+++ b/apps/web/ce/store/workspace/index.ts
@@ -0,0 +1,24 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// store
+import { BaseWorkspaceRootStore } from "@/store/workspace";
+import type { RootStore } from "@/plane-web/store/root.store";
+
+export class WorkspaceRootStore extends BaseWorkspaceRootStore {
+  constructor(_rootStore: RootStore) {
+    super(_rootStore);
+  }
+
+  // actions
+  /**
+   * Mutate workspace members activity
+   * @param workspaceSlug
+   */
+  mutateWorkspaceMembersActivity = async (_workspaceSlug: string) => {
+    // No-op in default/CE version
+  };
+}
diff --git a/apps/web/ce/types/gantt-chart.ts b/apps/web/ce/types/gantt-chart.ts
index 36bb65c60..ad2324a5d 100644
--- a/apps/web/ce/types/gantt-chart.ts
+++ b/apps/web/ce/types/gantt-chart.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export type TIssueRelationTypes = "blocking" | "blocked_by" | "duplicate" | "relates_to";
diff --git a/apps/web/ce/types/index.ts b/apps/web/ce/types/index.ts
index 105b7e96a..c39bc348a 100644
--- a/apps/web/ce/types/index.ts
+++ b/apps/web/ce/types/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./projects";
 export * from "./issue-types";
 export * from "./gantt-chart";
diff --git a/apps/web/ce/types/issue-types/index.ts b/apps/web/ce/types/issue-types/index.ts
index 7259fa351..8406674ae 100644
--- a/apps/web/ce/types/issue-types/index.ts
+++ b/apps/web/ce/types/issue-types/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./issue-property-values.d";
diff --git a/apps/web/ce/types/pages/pane-extensions.ts b/apps/web/ce/types/pages/pane-extensions.ts
index dcfae12e8..72c966850 100644
--- a/apps/web/ce/types/pages/pane-extensions.ts
+++ b/apps/web/ce/types/pages/pane-extensions.ts
@@ -1,16 +1,13 @@
-import type {
-  INavigationPaneExtension as ICoreNavigationPaneExtension,
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// CE re-exports the core navigation pane extension types directly
+// EE overrides this with specific extension data types
+export type {
+  INavigationPaneExtension,
   INavigationPaneExtensionComponent,
+  INavigationPaneExtensionProps,
 } from "@/components/pages/navigation-pane";
-
-// EE Union/map of extension data types (keyed by extension id)
-export type TNavigationPaneExtensionData = Record<string, unknown>;
-
-// EE Navigation pane extension configuration
-export interface INavigationPaneExtension<
-  T extends keyof TNavigationPaneExtensionData = keyof TNavigationPaneExtensionData,
-> extends Omit<ICoreNavigationPaneExtension<TNavigationPaneExtensionData[T]>, "id" | "data" | "component"> {
-  id: T;
-  component: INavigationPaneExtensionComponent<TNavigationPaneExtensionData[T]>;
-  data?: TNavigationPaneExtensionData[T];
-}
diff --git a/apps/web/ce/types/projects/index.ts b/apps/web/ce/types/projects/index.ts
index 9fb35777a..7acb1c470 100644
--- a/apps/web/ce/types/projects/index.ts
+++ b/apps/web/ce/types/projects/index.ts
@@ -1,2 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./projects";
 export * from "./project-activity";
diff --git a/apps/web/ce/types/projects/project-activity.ts b/apps/web/ce/types/projects/project-activity.ts
index 766b0adaf..31830d756 100644
--- a/apps/web/ce/types/projects/project-activity.ts
+++ b/apps/web/ce/types/projects/project-activity.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { TProjectBaseActivity } from "@plane/types";
 
 export type TProjectActivity = TProjectBaseActivity & {
diff --git a/apps/web/ce/types/projects/projects.ts b/apps/web/ce/types/projects/projects.ts
index 51427282a..b39cd8141 100644
--- a/apps/web/ce/types/projects/projects.ts
+++ b/apps/web/ce/types/projects/projects.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { IPartialProject, IProject } from "@plane/types";
 
 export type TPartialProject = IPartialProject;
diff --git a/apps/web/core/components/account/auth-forms/auth-banner.tsx b/apps/web/core/components/account/auth-forms/auth-banner.tsx
index 01f531690..1cd0520b3 100644
--- a/apps/web/core/components/account/auth-forms/auth-banner.tsx
+++ b/apps/web/core/components/account/auth-forms/auth-banner.tsx
@@ -1,35 +1,39 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { Info } from "lucide-react";
+// plane imports
 import { useTranslation } from "@plane/i18n";
 import { CloseIcon } from "@plane/propel/icons";
-// plane imports
 // helpers
-import type { TAuthErrorInfo } from "@/helpers/authentication.helper";
+import type React from "react";
 
 type TAuthBanner = {
-  bannerData: TAuthErrorInfo | undefined;
-  handleBannerData?: (bannerData: TAuthErrorInfo | undefined) => void;
+  message: React.ReactNode;
+  handleBannerData?: (bannerData: undefined) => void;
 };
 
 export function AuthBanner(props: TAuthBanner) {
-  const { bannerData, handleBannerData } = props;
+  const { message, handleBannerData } = props;
   // translation
   const { t } = useTranslation();
 
-  if (!bannerData) return <></>;
-
+  if (!message) return <></>;
   return (
     <div
       role="alert"
-      className="relative flex items-center p-2 rounded-md gap-2 border border-custom-primary-100/50 bg-custom-primary-100/10"
+      className="relative flex items-center gap-2 rounded-md border border-accent-strong/50 bg-accent-primary/10 p-2"
     >
-      <div className="size-4 flex-shrink-0 grid place-items-center">
-        <Info size={16} className="text-custom-primary-100" />
+      <div className="grid size-4 flex-shrink-0 place-items-center">
+        <Info size={16} className="text-accent-primary" />
       </div>
-      <p className="w-full text-sm font-medium text-custom-primary-100">{bannerData?.message}</p>
+      <p className="w-full text-13 font-medium text-accent-primary">{message}</p>
       <button
         type="button"
-        className="relative ml-auto size-6 rounded-sm grid place-items-center transition-all hover:bg-custom-primary-100/20 text-custom-primary-100/80"
+        className="relative ml-auto grid size-6 place-items-center rounded-xs text-accent-primary/80 transition-all hover:bg-accent-primary/20"
         onClick={() => handleBannerData?.(undefined)}
         aria-label={t("aria_labels.auth_forms.close_alert")}
       >
diff --git a/apps/web/core/components/account/auth-forms/auth-header.tsx b/apps/web/core/components/account/auth-forms/auth-header.tsx
index c5cb9775d..239d65829 100644
--- a/apps/web/core/components/account/auth-forms/auth-header.tsx
+++ b/apps/web/core/components/account/auth-forms/auth-header.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import useSWR from "swr";
 import { useTranslation } from "@plane/i18n";
@@ -8,8 +13,8 @@ import { LogoSpinner } from "@/components/common/logo-spinner";
 import { WorkspaceLogo } from "@/components/workspace/logo";
 // helpers
 import { EAuthModes, EAuthSteps } from "@/helpers/authentication.helper";
-import { WorkspaceService } from "@/plane-web/services";
 // services
+import { WorkspaceService } from "@/services/workspace.service";
 
 type TAuthHeader = {
   workspaceSlug: string | undefined;
@@ -101,12 +106,19 @@ export const AuthHeader = observer(function AuthHeader(props: TAuthHeader) {
       </div>
     );
 
+  return <AuthHeaderBase subHeader={subHeader} header={header} />;
+});
+
+type TAuthHeaderBase = {
+  header: React.ReactNode;
+  subHeader: string;
+};
+
+export function AuthHeaderBase(props: TAuthHeaderBase) {
   return (
     <div className="flex flex-col gap-1">
-      <span className="text-2xl font-semibold text-custom-text-100 leading-7">
-        {typeof header === "string" ? t(header) : header}
-      </span>
-      <span className="text-2xl font-semibold text-custom-text-400 leading-7">{subHeader}</span>
+      <span className="text-h4-semibold text-primary">{props.header}</span>
+      <span className="text-h4-semibold text-placeholder">{props.subHeader}</span>
     </div>
   );
-});
+}
diff --git a/apps/web/core/components/account/auth-forms/auth-root.tsx b/apps/web/core/components/account/auth-forms/auth-root.tsx
index bb7600310..5cba8a178 100644
--- a/apps/web/core/components/account/auth-forms/auth-root.tsx
+++ b/apps/web/core/components/account/auth-forms/auth-root.tsx
@@ -1,16 +1,14 @@
-import type { FC } from "react";
-import React, { useEffect, useState } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useEffect, useState } from "react";
 import { observer } from "mobx-react";
 import { useSearchParams } from "next/navigation";
-import { useTheme } from "next-themes";
 // plane imports
-import { API_BASE_URL } from "@plane/constants";
 import { OAuthOptions } from "@plane/ui";
-// assets
-import GithubLightLogo from "@/app/assets/logos/github-black.png?url";
-import GithubDarkLogo from "@/app/assets/logos/github-dark.svg?url";
-import GitlabLogo from "@/app/assets/logos/gitlab-logo.svg?url";
-import GoogleLogo from "@/app/assets/logos/google-logo.svg?url";
 // helpers
 import type { TAuthErrorInfo } from "@/helpers/authentication.helper";
 import {
@@ -21,11 +19,12 @@ import {
   authErrorHandler,
 } from "@/helpers/authentication.helper";
 // hooks
+import { useOAuthConfig } from "@/hooks/oauth";
 import { useInstance } from "@/hooks/store/use-instance";
 // local imports
 import { TermsAndConditions } from "../terms-and-conditions";
 import { AuthBanner } from "./auth-banner";
-import { AuthHeader } from "./auth-header";
+import { AuthHeader, AuthHeaderBase } from "./auth-header";
 import { AuthFormRoot } from "./form-root";
 
 type TAuthRoot = {
@@ -40,8 +39,6 @@ export const AuthRoot = observer(function AuthRoot(props: TAuthRoot) {
   const invitation_id = searchParams.get("invitation_id");
   const workspaceSlug = searchParams.get("slug");
   const error_code = searchParams.get("error_code");
-  const next_path = searchParams.get("next_path");
-  const { resolvedTheme } = useTheme();
   // props
   const { authMode: currentAuthMode } = props;
   // states
@@ -49,13 +46,13 @@ export const AuthRoot = observer(function AuthRoot(props: TAuthRoot) {
   const [authStep, setAuthStep] = useState<EAuthSteps>(EAuthSteps.EMAIL);
   const [email, setEmail] = useState(emailParam ? emailParam.toString() : "");
   const [errorInfo, setErrorInfo] = useState<TAuthErrorInfo | undefined>(undefined);
-
-  // hooks
+  // store hooks
   const { config } = useInstance();
-
   // derived values
-  const isOAuthEnabled =
-    (config && (config?.is_google_enabled || config?.is_github_enabled || config?.is_gitlab_enabled)) || false;
+  const oAuthActionText = authMode === EAuthModes.SIGN_UP ? "Sign up" : "Sign in";
+  const { isOAuthEnabled, oAuthOptions } = useOAuthConfig(oAuthActionText);
+  const isEmailBasedAuthEnabled = config?.is_email_password_enabled || config?.is_magic_login_enabled;
+  const noAuthMethodsAvailable = !isOAuthEnabled && !isEmailBasedAuthEnabled;
 
   useEffect(() => {
     if (!authMode && currentAuthMode) setAuthMode(currentAuthMode);
@@ -105,60 +102,37 @@ export const AuthRoot = observer(function AuthRoot(props: TAuthRoot) {
 
   if (!authMode) return <></>;
 
-  const OauthButtonContent = authMode === EAuthModes.SIGN_UP ? "Sign up" : "Sign in";
-
-  const OAuthConfig = [
-    {
-      id: "google",
-      text: `${OauthButtonContent} with Google`,
-      icon: <img src={GoogleLogo} className="h-4 w-4 object-contain" alt="Google Logo" />,
-      onClick: () => {
-        window.location.assign(`${API_BASE_URL}/auth/google/${next_path ? `?next_path=${next_path}` : ``}`);
-      },
-      enabled: config?.is_google_enabled,
-    },
-    {
-      id: "github",
-      text: `${OauthButtonContent} with GitHub`,
-      icon: (
-        <img
-          src={resolvedTheme === "dark" ? GithubDarkLogo : GithubLightLogo}
-          className="h-4 w-4 object-contain"
-          alt="GitHub Logo"
+  if (noAuthMethodsAvailable) {
+    return (
+      <AuthContainer>
+        <AuthHeaderBase
+          header="No authentication methods available"
+          subHeader="Please contact your administrator to enable authentication for your instance."
         />
-      ),
-      onClick: () => {
-        window.location.assign(`${API_BASE_URL}/auth/github/${next_path ? `?next_path=${next_path}` : ``}`);
-      },
-      enabled: config?.is_github_enabled,
-    },
-    {
-      id: "gitlab",
-      text: `${OauthButtonContent} with GitLab`,
-      icon: <img src={GitlabLogo} className="h-4 w-4 object-contain" alt="GitLab Logo" />,
-      onClick: () => {
-        window.location.assign(`${API_BASE_URL}/auth/gitlab/${next_path ? `?next_path=${next_path}` : ``}`);
-      },
-      enabled: config?.is_gitlab_enabled,
-    },
-  ];
+      </AuthContainer>
+    );
+  }
 
   return (
-    <div className="flex flex-col justify-center items-center flex-grow w-full py-6 mt-10">
-      <div className="relative flex flex-col gap-6 max-w-[22.5rem] w-full">
-        {errorInfo && errorInfo?.type === EErrorAlertType.BANNER_ALERT && (
-          <AuthBanner bannerData={errorInfo} handleBannerData={(value) => setErrorInfo(value)} />
-        )}
-        <AuthHeader
-          workspaceSlug={workspaceSlug?.toString() || undefined}
-          invitationId={invitation_id?.toString() || undefined}
-          invitationEmail={email || undefined}
-          authMode={authMode}
-          currentAuthStep={authStep}
+    <AuthContainer>
+      {errorInfo && errorInfo?.type === EErrorAlertType.BANNER_ALERT && (
+        <AuthBanner message={errorInfo.message} handleBannerData={(value) => setErrorInfo(value)} />
+      )}
+      <AuthHeader
+        workspaceSlug={workspaceSlug?.toString() || undefined}
+        invitationId={invitation_id?.toString() || undefined}
+        invitationEmail={email || undefined}
+        authMode={authMode}
+        currentAuthStep={authStep}
+      />
+      {isOAuthEnabled && (
+        <OAuthOptions
+          options={oAuthOptions}
+          compact={authStep === EAuthSteps.PASSWORD}
+          showDivider={isEmailBasedAuthEnabled}
         />
-
-        {isOAuthEnabled && <OAuthOptions options={OAuthConfig} compact={authStep === EAuthSteps.PASSWORD} />}
-
+      )}
+      {isEmailBasedAuthEnabled && (
         <AuthFormRoot
           authStep={authStep}
           authMode={authMode}
@@ -169,8 +143,16 @@ export const AuthRoot = observer(function AuthRoot(props: TAuthRoot) {
           setErrorInfo={(errorInfo) => setErrorInfo(errorInfo)}
           currentAuthMode={currentAuthMode}
         />
-        <TermsAndConditions authType={authMode} />
-      </div>
-    </div>
+      )}
+      <TermsAndConditions authType={authMode} />
+    </AuthContainer>
   );
 });
+
+function AuthContainer({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="mt-10 flex w-full flex-grow flex-col items-center justify-center py-6">
+      <div className="relative flex w-full max-w-[22.5rem] flex-col gap-6">{children}</div>
+    </div>
+  );
+}
diff --git a/apps/web/core/components/account/auth-forms/common/container.tsx b/apps/web/core/components/account/auth-forms/common/container.tsx
index 8eff06f64..ecf13f9dd 100644
--- a/apps/web/core/components/account/auth-forms/common/container.tsx
+++ b/apps/web/core/components/account/auth-forms/common/container.tsx
@@ -1,7 +1,13 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export function FormContainer({ children }: { children: React.ReactNode }) {
   return (
-    <div className="flex flex-col justify-center items-center flex-grow w-full py-6 mt-10">
-      <div className="relative flex flex-col gap-6 max-w-[22.5rem] w-full">{children}</div>
+    <div className="mt-10 flex w-full flex-grow flex-col items-center justify-center py-6">
+      <div className="relative flex w-full max-w-[22.5rem] flex-col gap-6">{children}</div>
     </div>
   );
 }
diff --git a/apps/web/core/components/account/auth-forms/common/header.tsx b/apps/web/core/components/account/auth-forms/common/header.tsx
index fcb53d295..4639634df 100644
--- a/apps/web/core/components/account/auth-forms/common/header.tsx
+++ b/apps/web/core/components/account/auth-forms/common/header.tsx
@@ -1,8 +1,14 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export function AuthFormHeader({ title, description }: { title: string; description: string }) {
   return (
     <div className="flex flex-col gap-1">
-      <span className="text-2xl font-semibold text-custom-text-100">{title}</span>
-      <span className="text-2xl font-semibold text-custom-text-400">{description}</span>
+      <span className="text-20 font-semibold text-primary">{title}</span>
+      <span className="text-20 font-semibold text-placeholder">{description}</span>
     </div>
   );
 }
diff --git a/apps/web/core/components/account/auth-forms/email.tsx b/apps/web/core/components/account/auth-forms/email.tsx
index 2eacfd8e1..2138753aa 100644
--- a/apps/web/core/components/account/auth-forms/email.tsx
+++ b/apps/web/core/components/account/auth-forms/email.tsx
@@ -1,4 +1,10 @@
-import type { FC, FormEvent } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { FormEvent } from "react";
 import { useMemo, useRef, useState } from "react";
 import { observer } from "mobx-react";
 // icons
@@ -45,13 +51,13 @@ export const AuthEmailForm = observer(function AuthEmailForm(props: TAuthEmailFo
   return (
     <form onSubmit={handleFormSubmit} className="space-y-4">
       <div className="space-y-1">
-        <label htmlFor="email" className="text-sm text-custom-text-300 font-medium">
+        <label htmlFor="email" className="text-13 font-medium text-tertiary">
           {t("auth.common.email.label")}
         </label>
         <div
           className={cn(
-            `relative flex items-center rounded-md bg-custom-background-100 border`,
-            !isFocused && Boolean(emailError?.email) ? `border-red-500` : `border-custom-border-300`
+            `relative flex items-center rounded-md border bg-surface-1`,
+            !isFocused && Boolean(emailError?.email) ? `border-danger-strong` : `border-strong`
           )}
           onFocus={() => {
             setIsFocused(true);
@@ -67,8 +73,8 @@ export const AuthEmailForm = observer(function AuthEmailForm(props: TAuthEmailFo
             value={email}
             onChange={(e) => setEmail(e.target.value)}
             placeholder={t("auth.common.email.placeholder")}
-            className={`disable-autofill-style h-10 w-full placeholder:text-custom-text-400 autofill:bg-red-500 border-0 focus:bg-none active:bg-transparent`}
-            autoComplete="on"
+            className={`h-10 w-full border-0 disable-autofill-style placeholder:text-placeholder autofill:bg-danger-primary focus:bg-none active:bg-transparent`}
+            autoComplete="off"
             autoFocus
             ref={inputRef}
           />
@@ -79,22 +85,22 @@ export const AuthEmailForm = observer(function AuthEmailForm(props: TAuthEmailFo
                 setEmail("");
                 inputRef.current?.focus();
               }}
-              className="absolute right-3 size-5 grid place-items-center"
+              className="absolute right-3 grid size-5 place-items-center"
               aria-label={t("aria_labels.auth_forms.clear_email")}
               tabIndex={-1}
             >
-              <XCircle className="size-5 stroke-custom-text-400" />
+              <XCircle className="size-5 stroke-placeholder" />
             </button>
           )}
         </div>
         {emailError?.email && !isFocused && (
-          <p className="flex items-center gap-1 text-xs text-red-600 px-0.5">
+          <p className="flex items-center gap-1 px-0.5 text-11 text-danger-primary">
             <CircleAlert height={12} width={12} />
             {t(emailError.email)}
           </p>
         )}
       </div>
-      <Button type="submit" variant="primary" className="w-full" size="lg" disabled={isButtonDisabled}>
+      <Button type="submit" variant="primary" className="w-full" size="xl" disabled={isButtonDisabled}>
         {isSubmitting ? <Spinner height="20px" width="20px" /> : t("common.continue")}
       </Button>
     </form>
diff --git a/apps/web/core/components/account/auth-forms/forgot-password-popover.tsx b/apps/web/core/components/account/auth-forms/forgot-password-popover.tsx
index bfbe82073..8b8e640c4 100644
--- a/apps/web/core/components/account/auth-forms/forgot-password-popover.tsx
+++ b/apps/web/core/components/account/auth-forms/forgot-password-popover.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { Fragment, useState } from "react";
 import { usePopper } from "react-popper";
 import { Popover } from "@headlessui/react";
@@ -30,7 +36,7 @@ export function ForgotPasswordPopover() {
         <button
           type="button"
           ref={setReferenceElement}
-          className="text-xs font-medium text-custom-primary-100 outline-none"
+          className="text-11 font-medium text-accent-primary outline-none"
         >
           {t("auth.common.forgot_password")}
         </button>
@@ -38,20 +44,20 @@ export function ForgotPasswordPopover() {
       <Popover.Panel className="fixed z-10">
         {({ close }) => (
           <div
-            className="border border-custom-border-300 bg-custom-background-100 rounded z-10 py-1 px-2 w-64 break-words flex items-start gap-3 text-left ml-3"
+            className="z-10 ml-3 flex w-64 items-start gap-3 rounded-sm border border-strong bg-surface-1 px-2 py-1 text-left break-words"
             ref={setPopperElement}
             style={styles.popper}
             {...attributes.popper}
           >
             <span className="flex-shrink-0">🤥</span>
-            <p className="text-xs">{t("auth.forgot_password.errors.smtp_not_enabled")}</p>
+            <p className="text-11">{t("auth.forgot_password.errors.smtp_not_enabled")}</p>
             <button
               type="button"
-              className="flex-shrink-0 size-3 grid place-items-center"
+              className="grid size-3 flex-shrink-0 place-items-center"
               onClick={() => close()}
               aria-label={t("aria_labels.auth_forms.close_popover")}
             >
-              <CloseIcon className="size-3 text-custom-text-200" />
+              <CloseIcon className="size-3 text-secondary" />
             </button>
           </div>
         )}
diff --git a/apps/web/core/components/account/auth-forms/forgot-password.tsx b/apps/web/core/components/account/auth-forms/forgot-password.tsx
index 4ef067d9c..ebb9345c3 100644
--- a/apps/web/core/components/account/auth-forms/forgot-password.tsx
+++ b/apps/web/core/components/account/auth-forms/forgot-password.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import Link from "next/link";
 import { useSearchParams } from "next/navigation";
@@ -5,14 +11,11 @@ import { Controller, useForm } from "react-hook-form";
 // icons
 import { CircleCheck } from "lucide-react";
 // plane imports
-import { AUTH_TRACKER_EVENTS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { Button, getButtonStyling } from "@plane/propel/button";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import { Input } from "@plane/ui";
 import { cn, checkEmailValidity } from "@plane/utils";
-// helpers
-import { captureError, captureSuccess } from "@/helpers/event-tracker.helper";
 // hooks
 import useTimer from "@/hooks/use-timer";
 // services
@@ -59,12 +62,6 @@ export const ForgotPasswordForm = observer(function ForgotPasswordForm() {
         email: formData.email,
       })
       .then(() => {
-        captureSuccess({
-          eventName: AUTH_TRACKER_EVENTS.forgot_password,
-          payload: {
-            email: formData.email,
-          },
-        });
         setToast({
           type: TOAST_TYPE.SUCCESS,
           title: t("auth.forgot_password.toast.success.title"),
@@ -73,12 +70,6 @@ export const ForgotPasswordForm = observer(function ForgotPasswordForm() {
         setResendCodeTimer(30);
       })
       .catch((err) => {
-        captureError({
-          eventName: AUTH_TRACKER_EVENTS.forgot_password,
-          payload: {
-            email: formData.email,
-          },
-        });
         setToast({
           type: TOAST_TYPE.ERROR,
           title: t("auth.forgot_password.toast.error.title"),
@@ -92,7 +83,7 @@ export const ForgotPasswordForm = observer(function ForgotPasswordForm() {
       <AuthFormHeader title="Reset password" description="Regain access to your account." />
       <form onSubmit={handleSubmit(handleForgotPassword)} className="space-y-4">
         <div className="space-y-1">
-          <label className="text-sm font-medium text-custom-text-300" htmlFor="email">
+          <label className="text-13 font-medium text-tertiary" htmlFor="email">
             {t("auth.common.email.label")}
           </label>
           <Controller
@@ -112,14 +103,14 @@ export const ForgotPasswordForm = observer(function ForgotPasswordForm() {
                 ref={ref}
                 hasError={Boolean(errors.email)}
                 placeholder={t("auth.common.email.placeholder")}
-                className="h-10 w-full border border-custom-border-300 !bg-custom-background-100 pr-12 placeholder:text-custom-text-400"
-                autoComplete="on"
+                className="h-10 w-full border border-strong !bg-surface-1 pr-12 placeholder:text-placeholder"
+                autoComplete="off"
                 disabled={resendTimerCode > 0}
               />
             )}
           />
           {resendTimerCode > 0 && (
-            <p className="flex items-start w-full gap-1 px-1 text-xs font-medium text-green-700">
+            <p className="flex w-full items-start gap-1 px-1 text-11 font-medium text-success-primary">
               <CircleCheck height={12} width={12} className="mt-0.5" />
               {t("auth.forgot_password.email_sent")}
             </p>
@@ -129,7 +120,7 @@ export const ForgotPasswordForm = observer(function ForgotPasswordForm() {
           type="submit"
           variant="primary"
           className="w-full"
-          size="lg"
+          size="xl"
           disabled={!isValid}
           loading={isSubmitting || resendTimerCode > 0}
         >
@@ -137,7 +128,7 @@ export const ForgotPasswordForm = observer(function ForgotPasswordForm() {
             ? t("auth.common.resend_in", { seconds: resendTimerCode })
             : t("auth.forgot_password.send_reset_link")}
         </Button>
-        <Link href="/" className={cn("w-full", getButtonStyling("link-neutral", "lg"))}>
+        <Link href="/" className={cn("w-full", getButtonStyling("link", "lg"))}>
           {t("auth.common.back_to_sign_in")}
         </Link>
       </form>
diff --git a/apps/web/core/components/account/auth-forms/form-root.tsx b/apps/web/core/components/account/auth-forms/form-root.tsx
index 35ad625cb..ab3aa8340 100644
--- a/apps/web/core/components/account/auth-forms/form-root.tsx
+++ b/apps/web/core/components/account/auth-forms/form-root.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React, { useState } from "react";
 import { observer } from "mobx-react";
 import { useSearchParams } from "next/navigation";
diff --git a/apps/web/core/components/account/auth-forms/index.ts b/apps/web/core/components/account/auth-forms/index.ts
index aa4ee6fd8..125f6699c 100644
--- a/apps/web/core/components/account/auth-forms/index.ts
+++ b/apps/web/core/components/account/auth-forms/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./auth-root";
diff --git a/apps/web/core/components/account/auth-forms/password.tsx b/apps/web/core/components/account/auth-forms/password.tsx
index 7e32fca91..8ebe3c827 100644
--- a/apps/web/core/components/account/auth-forms/password.tsx
+++ b/apps/web/core/components/account/auth-forms/password.tsx
@@ -1,10 +1,16 @@
-import React, { useEffect, useMemo, useRef, useState } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useEffect, useMemo, useRef, useState } from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
 // icons
 import { Eye, EyeOff, Info, XCircle } from "lucide-react";
 // plane imports
-import { API_BASE_URL, E_PASSWORD_STRENGTH, AUTH_TRACKER_EVENTS, AUTH_TRACKER_ELEMENTS } from "@plane/constants";
+import { API_BASE_URL, E_PASSWORD_STRENGTH, AUTH_TRACKER_ELEMENTS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { Button } from "@plane/propel/button";
 import { CloseIcon } from "@plane/propel/icons";
@@ -15,8 +21,6 @@ import { ForgotPasswordPopover } from "@/components/account/auth-forms/forgot-pa
 // constants
 // helpers
 import { EAuthModes, EAuthSteps } from "@/helpers/authentication.helper";
-// hooks
-import { captureError, captureSuccess } from "@/helpers/event-tracker.helper";
 // services
 import { AuthService } from "@/services/auth.service";
 
@@ -84,7 +88,7 @@ export const AuthPasswordForm = observer(function AuthPasswordForm(props: Props)
           <Link
             data-ph-element={AUTH_TRACKER_ELEMENTS.FORGOT_PASSWORD_FROM_SIGNIN}
             href={`/accounts/forgot-password?email=${encodeURIComponent(email)}`}
-            className="text-xs font-medium text-custom-primary-100"
+            className="text-11 font-medium text-accent-primary"
           >
             {t("auth.common.forgot_password")}
           </Link>
@@ -124,17 +128,20 @@ export const AuthPasswordForm = observer(function AuthPasswordForm(props: Props)
   return (
     <>
       {isBannerMessage && mode === EAuthModes.SIGN_UP && (
-        <div className="relative flex items-center p-2 rounded-md gap-2 border border-red-500/50 bg-red-500/10">
-          <div className="w-4 h-4 flex-shrink-0 relative flex justify-center items-center">
-            <Info size={16} className="text-red-500" />
+        <div className="relative flex items-center gap-2 rounded-md border border-danger-strong/50 bg-danger-subtle p-2">
+          <div className="relative flex h-4 w-4 shrink-0 items-center justify-center">
+            <Info size={16} className="text-danger-primary" />
           </div>
-          <div className="w-full text-sm font-medium text-red-500">{t("auth.sign_up.errors.password.strength")}</div>
-          <div
-            className="relative ml-auto w-6 h-6 rounded-sm flex justify-center items-center transition-all cursor-pointer hover:bg-red-500/20 text-custom-primary-100/80"
+          <div className="w-full text-13 font-medium text-danger-primary">
+            {t("auth.sign_up.errors.password.strength")}
+          </div>
+          <button
+            type="button"
+            className="relative ml-auto flex h-6 w-6 cursor-pointer items-center justify-center rounded-xs text-accent-primary/80 transition-all hover:bg-danger-subtle-hover"
             onClick={() => setBannerMessage(false)}
           >
-            <CloseIcon className="w-4 h-4 flex-shrink-0 text-red-500" />
-          </div>
+            <CloseIcon className="h-4 w-4 shrink-0 text-danger-primary" />
+          </button>
         </div>
       )}
       <form
@@ -151,15 +158,6 @@ export const AuthPasswordForm = observer(function AuthPasswordForm(props: Props)
               : true;
           if (isPasswordValid) {
             setIsSubmitting(true);
-            captureSuccess({
-              eventName:
-                mode === EAuthModes.SIGN_IN
-                  ? AUTH_TRACKER_EVENTS.sign_in_with_password
-                  : AUTH_TRACKER_EVENTS.sign_up_with_password,
-              payload: {
-                email: passwordFormData.email,
-              },
-            });
             if (formRef.current) formRef.current.submit(); // Manually submit the form if the condition is met
           } else {
             setBannerMessage(true);
@@ -167,27 +165,16 @@ export const AuthPasswordForm = observer(function AuthPasswordForm(props: Props)
         }}
         onError={() => {
           setIsSubmitting(false);
-          captureError({
-            eventName:
-              mode === EAuthModes.SIGN_IN
-                ? AUTH_TRACKER_EVENTS.sign_in_with_password
-                : AUTH_TRACKER_EVENTS.sign_up_with_password,
-            payload: {
-              email: passwordFormData.email,
-            },
-          });
         }}
       >
         <input type="hidden" name="csrfmiddlewaretoken" />
         <input type="hidden" value={passwordFormData.email} name="email" />
         {nextPath && <input type="hidden" value={nextPath} name="next_path" />}
         <div className="space-y-1">
-          <label htmlFor="email" className="text-sm font-medium text-custom-text-300">
+          <label htmlFor="email" className="text-13 font-medium text-tertiary">
             {t("auth.common.email.label")}
           </label>
-          <div
-            className={`relative flex items-center rounded-md bg-custom-background-100 border border-custom-border-300`}
-          >
+          <div className={`relative flex items-center rounded-md border border-strong bg-surface-1`}>
             <Input
               id="email"
               name="email"
@@ -195,7 +182,7 @@ export const AuthPasswordForm = observer(function AuthPasswordForm(props: Props)
               value={passwordFormData.email}
               onChange={(e) => handleFormChange("email", e.target.value)}
               placeholder={t("auth.common.email.placeholder")}
-              className={`disable-autofill-style h-10 w-full placeholder:text-custom-text-400 border-0`}
+              className={`h-10 w-full border-0 disable-autofill-style placeholder:text-placeholder`}
               disabled
             />
             {passwordFormData.email.length > 0 && (
@@ -205,17 +192,17 @@ export const AuthPasswordForm = observer(function AuthPasswordForm(props: Props)
                 onClick={handleEmailClear}
                 aria-label={t("aria_labels.auth_forms.clear_email")}
               >
-                <XCircle className="size-5 stroke-custom-text-400" />
+                <XCircle className="size-5 stroke-placeholder" />
               </button>
             )}
           </div>
         </div>
 
         <div className="space-y-1">
-          <label htmlFor="password" className="text-sm text-custom-text-300 font-medium">
+          <label htmlFor="password" className="text-13 font-medium text-tertiary">
             {mode === EAuthModes.SIGN_IN ? t("auth.common.password.label") : t("auth.common.password.set_password")}
           </label>
-          <div className="relative flex items-center rounded-md bg-custom-background-100">
+          <div className="relative flex items-center rounded-md bg-surface-1">
             <Input
               type={showPassword?.password ? "text" : "password"}
               id="password"
@@ -223,24 +210,24 @@ export const AuthPasswordForm = observer(function AuthPasswordForm(props: Props)
               value={passwordFormData.password}
               onChange={(e) => handleFormChange("password", e.target.value)}
               placeholder={t("auth.common.password.placeholder")}
-              className="disable-autofill-style h-10 w-full border border-custom-border-300 !bg-custom-background-100 pr-12 placeholder:text-custom-text-400"
+              className="h-10 w-full border border-strong !bg-surface-1 pr-12 disable-autofill-style placeholder:text-placeholder"
               onFocus={() => setIsPasswordInputFocused(true)}
               onBlur={() => setIsPasswordInputFocused(false)}
-              autoComplete="on"
+              autoComplete="off"
               autoFocus
             />
             <button
               type="button"
               onClick={() => handleShowPassword("password")}
-              className="absolute right-3 size-5 grid place-items-center"
+              className="absolute right-3 grid size-5 place-items-center"
               aria-label={t(
                 showPassword?.password ? "aria_labels.auth_forms.hide_password" : "aria_labels.auth_forms.show_password"
               )}
             >
               {showPassword?.password ? (
-                <EyeOff className="size-5 stroke-custom-text-400" />
+                <EyeOff className="size-5 stroke-placeholder" />
               ) : (
-                <Eye className="size-5 stroke-custom-text-400" />
+                <Eye className="size-5 stroke-placeholder" />
               )}
             </button>
           </div>
@@ -249,10 +236,10 @@ export const AuthPasswordForm = observer(function AuthPasswordForm(props: Props)
 
         {mode === EAuthModes.SIGN_UP && (
           <div className="space-y-1">
-            <label htmlFor="confirm-password" className="text-sm text-custom-text-300 font-medium">
+            <label htmlFor="confirm-password" className="text-13 font-medium text-tertiary">
               {t("auth.common.password.confirm_password.label")}
             </label>
-            <div className="relative flex items-center rounded-md bg-custom-background-100">
+            <div className="relative flex items-center rounded-md bg-surface-1">
               <Input
                 type={showPassword?.retypePassword ? "text" : "password"}
                 id="confirm-password"
@@ -260,13 +247,14 @@ export const AuthPasswordForm = observer(function AuthPasswordForm(props: Props)
                 value={passwordFormData.confirm_password}
                 onChange={(e) => handleFormChange("confirm_password", e.target.value)}
                 placeholder={t("auth.common.password.confirm_password.placeholder")}
-                className="disable-autofill-style h-10 w-full border border-custom-border-300 !bg-custom-background-100 pr-12 placeholder:text-custom-text-400"
+                className="h-10 w-full border border-strong !bg-surface-1 pr-12 disable-autofill-style placeholder:text-placeholder"
                 onFocus={() => setIsRetryPasswordInputFocused(true)}
                 onBlur={() => setIsRetryPasswordInputFocused(false)}
+                autoComplete="off"
               />
               <button
                 type="button"
-                className="absolute right-3 size-5 grid place-items-center"
+                className="absolute right-3 grid size-5 place-items-center"
                 aria-label={t(
                   showPassword?.retypePassword
                     ? "aria_labels.auth_forms.hide_password"
@@ -275,16 +263,16 @@ export const AuthPasswordForm = observer(function AuthPasswordForm(props: Props)
                 onClick={() => handleShowPassword("retypePassword")}
               >
                 {showPassword?.retypePassword ? (
-                  <EyeOff className="size-5 stroke-custom-text-400" />
+                  <EyeOff className="size-5 stroke-placeholder" />
                 ) : (
-                  <Eye className="size-5 stroke-custom-text-400" />
+                  <Eye className="size-5 stroke-placeholder" />
                 )}
               </button>
             </div>
             {!!passwordFormData.confirm_password &&
               passwordFormData.password !== passwordFormData.confirm_password &&
               renderPasswordMatchError && (
-                <span className="text-sm text-red-500">{t("auth.common.password.errors.match")}</span>
+                <span className="text-13 text-danger-primary">{t("auth.common.password.errors.match")}</span>
               )}
           </div>
         )}
@@ -292,7 +280,7 @@ export const AuthPasswordForm = observer(function AuthPasswordForm(props: Props)
         <div className="space-y-2.5">
           {mode === EAuthModes.SIGN_IN ? (
             <>
-              <Button type="submit" variant="primary" className="w-full" size="lg" disabled={isButtonDisabled}>
+              <Button type="submit" variant="primary" className="w-full" size="xl" disabled={isButtonDisabled}>
                 {isSubmitting ? (
                   <Spinner height="20px" width="20px" />
                 ) : isSMTPConfigured ? (
@@ -306,16 +294,16 @@ export const AuthPasswordForm = observer(function AuthPasswordForm(props: Props)
                   type="button"
                   data-ph-element={AUTH_TRACKER_ELEMENTS.SIGN_IN_WITH_UNIQUE_CODE}
                   onClick={redirectToUniqueCodeSignIn}
-                  variant="outline-primary"
+                  variant="secondary"
                   className="w-full"
-                  size="lg"
+                  size="xl"
                 >
                   {t("auth.common.sign_in_with_unique_code")}
                 </Button>
               )}
             </>
           ) : (
-            <Button type="submit" variant="primary" className="w-full" size="lg" disabled={isButtonDisabled}>
+            <Button type="submit" variant="primary" className="w-full" size="xl" disabled={isButtonDisabled}>
               {isSubmitting ? <Spinner height="20px" width="20px" /> : "Create account"}
             </Button>
           )}
diff --git a/apps/web/core/components/account/auth-forms/reset-password.tsx b/apps/web/core/components/account/auth-forms/reset-password.tsx
index efbbf93c2..98283d350 100644
--- a/apps/web/core/components/account/auth-forms/reset-password.tsx
+++ b/apps/web/core/components/account/auth-forms/reset-password.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useEffect, useMemo, useState } from "react";
 import { observer } from "mobx-react";
 import { useSearchParams } from "next/navigation";
@@ -96,7 +102,7 @@ export const ResetPasswordForm = observer(function ResetPasswordForm() {
       <AuthFormHeader title="Reset password" description="Create a new password." />
 
       {errorInfo && errorInfo?.type === EErrorAlertType.BANNER_ALERT && (
-        <AuthBanner bannerData={errorInfo} handleBannerData={(value) => setErrorInfo(value)} />
+        <AuthBanner message={errorInfo.message} handleBannerData={(value) => setErrorInfo(value)} />
       )}
       <form
         className="space-y-4"
@@ -105,10 +111,10 @@ export const ResetPasswordForm = observer(function ResetPasswordForm() {
       >
         <input type="hidden" name="csrfmiddlewaretoken" value={csrfToken} />
         <div className="space-y-1">
-          <label className="text-sm text-custom-text-300 font-medium" htmlFor="email">
+          <label className="text-13 font-medium text-tertiary" htmlFor="email">
             {t("auth.common.email.label")}
           </label>
-          <div className="relative flex items-center rounded-md bg-custom-background-100">
+          <div className="relative flex items-center rounded-md bg-surface-1">
             <Input
               id="email"
               name="email"
@@ -116,17 +122,17 @@ export const ResetPasswordForm = observer(function ResetPasswordForm() {
               value={resetFormData.email}
               //hasError={Boolean(errors.email)}
               placeholder={t("auth.common.email.placeholder")}
-              className="h-10 w-full border border-custom-border-300 !bg-custom-background-100 pr-12 text-custom-text-400 cursor-not-allowed"
-              autoComplete="on"
+              className="h-10 w-full cursor-not-allowed border border-strong !bg-surface-1 pr-12 text-placeholder"
+              autoComplete="off"
               disabled
             />
           </div>
         </div>
         <div className="space-y-1">
-          <label className="text-sm text-custom-text-300 font-medium" htmlFor="password">
+          <label className="text-13 font-medium text-tertiary" htmlFor="password">
             {t("auth.common.password.label")}
           </label>
-          <div className="relative flex items-center rounded-md bg-custom-background-100">
+          <div className="relative flex items-center rounded-md bg-surface-1">
             <Input
               type={showPassword.password ? "text" : "password"}
               name="password"
@@ -134,21 +140,21 @@ export const ResetPasswordForm = observer(function ResetPasswordForm() {
               onChange={(e) => handleFormChange("password", e.target.value)}
               //hasError={Boolean(errors.password)}
               placeholder={t("auth.common.password.placeholder")}
-              className="h-10 w-full border border-custom-border-300 !bg-custom-background-100 pr-12 placeholder:text-custom-text-400"
+              className="h-10 w-full border border-strong !bg-surface-1 pr-12 placeholder:text-placeholder"
               minLength={8}
               onFocus={() => setIsPasswordInputFocused(true)}
               onBlur={() => setIsPasswordInputFocused(false)}
-              autoComplete="on"
+              autoComplete="new-password"
               autoFocus
             />
             {showPassword.password ? (
               <EyeOff
-                className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
+                className="absolute right-3 h-5 w-5 stroke-placeholder hover:cursor-pointer"
                 onClick={() => handleShowPassword("password")}
               />
             ) : (
               <Eye
-                className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
+                className="absolute right-3 h-5 w-5 stroke-placeholder hover:cursor-pointer"
                 onClick={() => handleShowPassword("password")}
               />
             )}
@@ -156,28 +162,29 @@ export const ResetPasswordForm = observer(function ResetPasswordForm() {
           <PasswordStrengthIndicator password={resetFormData.password} isFocused={isPasswordInputFocused} />
         </div>
         <div className="space-y-1">
-          <label className="text-sm text-custom-text-300 font-medium" htmlFor="confirm_password">
+          <label className="text-13 font-medium text-tertiary" htmlFor="confirm_password">
             {t("auth.common.password.confirm_password.label")}
           </label>
-          <div className="relative flex items-center rounded-md bg-custom-background-100">
+          <div className="relative flex items-center rounded-md bg-surface-1">
             <Input
               type={showPassword.retypePassword ? "text" : "password"}
               name="confirm_password"
               value={resetFormData.confirm_password}
               onChange={(e) => handleFormChange("confirm_password", e.target.value)}
               placeholder={t("auth.common.password.confirm_password.placeholder")}
-              className="h-10 w-full border border-custom-border-300 !bg-custom-background-100 pr-12 placeholder:text-custom-text-400"
+              className="h-10 w-full border border-strong !bg-surface-1 pr-12 placeholder:text-placeholder"
               onFocus={() => setIsRetryPasswordInputFocused(true)}
               onBlur={() => setIsRetryPasswordInputFocused(false)}
+              autoComplete="new-password"
             />
             {showPassword.retypePassword ? (
               <EyeOff
-                className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
+                className="absolute right-3 h-5 w-5 stroke-placeholder hover:cursor-pointer"
                 onClick={() => handleShowPassword("retypePassword")}
               />
             ) : (
               <Eye
-                className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
+                className="absolute right-3 h-5 w-5 stroke-placeholder hover:cursor-pointer"
                 onClick={() => handleShowPassword("retypePassword")}
               />
             )}
@@ -185,10 +192,10 @@ export const ResetPasswordForm = observer(function ResetPasswordForm() {
           {!!resetFormData.confirm_password &&
             resetFormData.password !== resetFormData.confirm_password &&
             renderPasswordMatchError && (
-              <span className="text-sm text-red-500">{t("auth.common.password.errors.match")}</span>
+              <span className="text-13 text-danger-primary">{t("auth.common.password.errors.match")}</span>
             )}
         </div>
-        <Button type="submit" variant="primary" className="w-full" size="lg" disabled={isButtonDisabled}>
+        <Button type="submit" variant="primary" className="w-full" size="xl" disabled={isButtonDisabled}>
           {t("auth.common.password.submit")}
         </Button>
       </form>
diff --git a/apps/web/core/components/account/auth-forms/set-password.tsx b/apps/web/core/components/account/auth-forms/set-password.tsx
index 5f9f6a227..f16db6650 100644
--- a/apps/web/core/components/account/auth-forms/set-password.tsx
+++ b/apps/web/core/components/account/auth-forms/set-password.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { FormEvent } from "react";
 import { useEffect, useMemo, useState } from "react";
 import { observer } from "mobx-react";
@@ -5,15 +11,13 @@ import { useSearchParams } from "next/navigation";
 // icons
 import { Eye, EyeOff } from "lucide-react";
 // plane imports
-import { AUTH_TRACKER_ELEMENTS, AUTH_TRACKER_EVENTS, E_PASSWORD_STRENGTH } from "@plane/constants";
+import { E_PASSWORD_STRENGTH } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { Button } from "@plane/propel/button";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import { Input, PasswordStrengthIndicator } from "@plane/ui";
 // components
 import { getPasswordStrength } from "@plane/utils";
-// helpers
-import { captureError, captureSuccess, captureView } from "@/helpers/event-tracker.helper";
 // hooks
 import { useUser } from "@/hooks/store/user";
 import { useAppRouter } from "@/hooks/use-app-router";
@@ -60,12 +64,6 @@ export const SetPasswordForm = observer(function SetPasswordForm() {
   // hooks
   const { data: user, handleSetPassword } = useUser();
 
-  useEffect(() => {
-    captureView({
-      elementName: AUTH_TRACKER_ELEMENTS.SET_PASSWORD_FORM,
-    });
-  }, []);
-
   useEffect(() => {
     if (csrfToken === undefined)
       authService.requestCSRFToken().then((data) => data?.csrf_token && setCsrfToken(data.csrf_token));
@@ -92,9 +90,6 @@ export const SetPasswordForm = observer(function SetPasswordForm() {
       e.preventDefault();
       if (!csrfToken) throw new Error("csrf token not found");
       await handleSetPassword(csrfToken, { password: passwordFormData.password });
-      captureSuccess({
-        eventName: AUTH_TRACKER_EVENTS.password_created,
-      });
       router.push("/");
     } catch (error: unknown) {
       let message = undefined;
@@ -102,9 +97,6 @@ export const SetPasswordForm = observer(function SetPasswordForm() {
         const err = error as Error & { error?: string };
         message = err.error;
       }
-      captureError({
-        eventName: AUTH_TRACKER_EVENTS.password_created,
-      });
       setToast({
         type: TOAST_TYPE.ERROR,
         title: t("common.errors.default.title"),
@@ -122,10 +114,10 @@ export const SetPasswordForm = observer(function SetPasswordForm() {
       <AuthFormHeader title="Set password" description="Create a new password." />
       <form className="space-y-4" onSubmit={(e) => handleSubmit(e)}>
         <div className="space-y-1">
-          <label className="text-sm text-custom-text-300 font-medium" htmlFor="email">
+          <label className="text-13 font-medium text-tertiary" htmlFor="email">
             {t("auth.common.email.label")}
           </label>
-          <div className="relative flex items-center rounded-md bg-custom-background-100">
+          <div className="relative flex items-center rounded-md bg-surface-1">
             <Input
               id="email"
               name="email"
@@ -133,17 +125,17 @@ export const SetPasswordForm = observer(function SetPasswordForm() {
               value={user?.email}
               //hasError={Boolean(errors.email)}
               placeholder={t("auth.common.email.placeholder")}
-              className="h-10 w-full border border-custom-border-300 !bg-custom-background-100 pr-12 text-custom-text-400 cursor-not-allowed"
-              autoComplete="on"
+              className="h-10 w-full cursor-not-allowed border border-strong !bg-surface-1 pr-12 text-placeholder"
+              autoComplete="off"
               disabled
             />
           </div>
         </div>
         <div className="space-y-1">
-          <label className="text-sm text-custom-text-300 font-medium" htmlFor="password">
+          <label className="text-13 font-medium text-tertiary" htmlFor="password">
             {t("auth.common.password.label")}
           </label>
-          <div className="relative flex items-center rounded-md bg-custom-background-100">
+          <div className="relative flex items-center rounded-md bg-surface-1">
             <Input
               type={showPassword.password ? "text" : "password"}
               name="password"
@@ -151,21 +143,21 @@ export const SetPasswordForm = observer(function SetPasswordForm() {
               onChange={(e) => handleFormChange("password", e.target.value)}
               //hasError={Boolean(errors.password)}
               placeholder={t("auth.common.password.placeholder")}
-              className="h-10 w-full border border-custom-border-300 !bg-custom-background-100 pr-12 placeholder:text-custom-text-400"
+              className="h-10 w-full border border-strong !bg-surface-1 pr-12 placeholder:text-placeholder"
               minLength={8}
               onFocus={() => setIsPasswordInputFocused(true)}
               onBlur={() => setIsPasswordInputFocused(false)}
-              autoComplete="on"
+              autoComplete="new-password"
               autoFocus
             />
             {showPassword.password ? (
               <EyeOff
-                className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
+                className="absolute right-3 h-5 w-5 stroke-placeholder hover:cursor-pointer"
                 onClick={() => handleShowPassword("password")}
               />
             ) : (
               <Eye
-                className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
+                className="absolute right-3 h-5 w-5 stroke-placeholder hover:cursor-pointer"
                 onClick={() => handleShowPassword("password")}
               />
             )}
@@ -173,28 +165,29 @@ export const SetPasswordForm = observer(function SetPasswordForm() {
           <PasswordStrengthIndicator password={passwordFormData.password} isFocused={isPasswordInputFocused} />
         </div>
         <div className="space-y-1">
-          <label className="text-sm text-custom-text-300 font-medium" htmlFor="confirm_password">
+          <label className="text-13 font-medium text-tertiary" htmlFor="confirm_password">
             {t("auth.common.password.confirm_password.label")}
           </label>
-          <div className="relative flex items-center rounded-md bg-custom-background-100">
+          <div className="relative flex items-center rounded-md bg-surface-1">
             <Input
               type={showPassword.retypePassword ? "text" : "password"}
               name="confirm_password"
               value={passwordFormData.confirm_password}
               onChange={(e) => handleFormChange("confirm_password", e.target.value)}
               placeholder={t("auth.common.password.confirm_password.placeholder")}
-              className="h-10 w-full border border-custom-border-300 !bg-custom-background-100 pr-12 placeholder:text-custom-text-400"
+              className="h-10 w-full border border-strong !bg-surface-1 pr-12 placeholder:text-placeholder"
               onFocus={() => setIsRetryPasswordInputFocused(true)}
               onBlur={() => setIsRetryPasswordInputFocused(false)}
+              autoComplete="new-password"
             />
             {showPassword.retypePassword ? (
               <EyeOff
-                className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
+                className="absolute right-3 h-5 w-5 stroke-placeholder hover:cursor-pointer"
                 onClick={() => handleShowPassword("retypePassword")}
               />
             ) : (
               <Eye
-                className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
+                className="absolute right-3 h-5 w-5 stroke-placeholder hover:cursor-pointer"
                 onClick={() => handleShowPassword("retypePassword")}
               />
             )}
@@ -202,10 +195,10 @@ export const SetPasswordForm = observer(function SetPasswordForm() {
           {!!passwordFormData.confirm_password &&
             passwordFormData.password !== passwordFormData.confirm_password &&
             renderPasswordMatchError && (
-              <span className="text-sm text-red-500">{t("auth.common.password.errors.match")}</span>
+              <span className="text-13 text-danger-primary">{t("auth.common.password.errors.match")}</span>
             )}
         </div>
-        <Button type="submit" variant="primary" className="w-full" size="lg" disabled={isButtonDisabled}>
+        <Button type="submit" variant="primary" className="w-full" size="xl" disabled={isButtonDisabled}>
           {t("common.continue")}
         </Button>
       </form>
diff --git a/apps/web/core/components/account/auth-forms/unique-code.tsx b/apps/web/core/components/account/auth-forms/unique-code.tsx
index 6fb21fffe..9c4b8a6c1 100644
--- a/apps/web/core/components/account/auth-forms/unique-code.tsx
+++ b/apps/web/core/components/account/auth-forms/unique-code.tsx
@@ -1,6 +1,12 @@
-import React, { useEffect, useState } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useEffect, useState } from "react";
 import { CircleCheck, XCircle } from "lucide-react";
-import { API_BASE_URL, AUTH_TRACKER_ELEMENTS, AUTH_TRACKER_EVENTS } from "@plane/constants";
+import { API_BASE_URL } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { Button } from "@plane/propel/button";
 import { Input, Spinner } from "@plane/ui";
@@ -8,7 +14,6 @@ import { Input, Spinner } from "@plane/ui";
 // helpers
 import { EAuthModes } from "@/helpers/authentication.helper";
 // hooks
-import { captureError, captureSuccess } from "@/helpers/event-tracker.helper";
 import useTimer from "@/hooks/use-timer";
 // services
 import { AuthService } from "@/services/auth.service";
@@ -36,7 +41,7 @@ const defaultValues: TUniqueCodeFormValues = {
 };
 
 export function AuthUniqueCodeForm(props: TAuthUniqueCodeForm) {
-  const { mode, email, handleEmailClear, generateEmailUniqueCode, isExistingEmail, nextPath } = props;
+  const { mode, email, handleEmailClear, generateEmailUniqueCode, nextPath } = props;
   // derived values
   const defaultResetTimerValue = 5;
   // states
@@ -59,22 +64,10 @@ export function AuthUniqueCodeForm(props: TAuthUniqueCodeForm) {
       setResendCodeTimer(defaultResetTimerValue);
       handleFormChange("code", uniqueCode?.code || "");
       setIsRequestingNewCode(false);
-      captureSuccess({
-        eventName: AUTH_TRACKER_EVENTS.new_code_requested,
-        payload: {
-          email: email,
-        },
-      });
     } catch {
       setResendCodeTimer(0);
       console.error("Error while requesting new code");
       setIsRequestingNewCode(false);
-      captureError({
-        eventName: AUTH_TRACKER_EVENTS.new_code_requested,
-        payload: {
-          email: email,
-        },
-      });
     }
   };
 
@@ -93,34 +86,19 @@ export function AuthUniqueCodeForm(props: TAuthUniqueCodeForm) {
       action={`${API_BASE_URL}/auth/${mode === EAuthModes.SIGN_IN ? "magic-sign-in" : "magic-sign-up"}/`}
       onSubmit={() => {
         setIsSubmitting(true);
-        captureSuccess({
-          eventName: AUTH_TRACKER_EVENTS.code_verify,
-          payload: {
-            state: "SUCCESS",
-            first_time: !isExistingEmail,
-          },
-        });
       }}
       onError={() => {
         setIsSubmitting(false);
-        captureError({
-          eventName: AUTH_TRACKER_EVENTS.code_verify,
-          payload: {
-            state: "FAILED",
-          },
-        });
       }}
     >
       <input type="hidden" name="csrfmiddlewaretoken" value={csrfToken} />
       <input type="hidden" value={uniqueCodeFormData.email} name="email" />
       {nextPath && <input type="hidden" value={nextPath} name="next_path" />}
       <div className="space-y-1">
-        <label htmlFor="email" className="text-sm font-medium text-custom-text-300">
+        <label htmlFor="email" className="text-13 font-medium text-tertiary">
           {t("auth.common.email.label")}
         </label>
-        <div
-          className={`relative flex items-center rounded-md bg-custom-background-100 border border-custom-border-300`}
-        >
+        <div className={`relative flex items-center rounded-md border border-strong bg-surface-1`}>
           <Input
             id="email"
             name="email"
@@ -128,25 +106,25 @@ export function AuthUniqueCodeForm(props: TAuthUniqueCodeForm) {
             value={uniqueCodeFormData.email}
             onChange={(e) => handleFormChange("email", e.target.value)}
             placeholder={t("auth.common.email.placeholder")}
-            className="disable-autofill-style h-10 w-full placeholder:text-custom-text-400 border-0"
-            autoComplete="on"
+            className="h-10 w-full border-0 disable-autofill-style placeholder:text-placeholder"
+            autoComplete="off"
             disabled
           />
           {uniqueCodeFormData.email.length > 0 && (
             <button
               type="button"
-              className="absolute right-3 size-5 grid place-items-center"
+              className="absolute right-3 grid size-5 place-items-center"
               aria-label={t("aria_labels.auth_forms.clear_email")}
               onClick={handleEmailClear}
             >
-              <XCircle className="size-5 stroke-custom-text-400" />
+              <XCircle className="size-5 stroke-placeholder" />
             </button>
           )}
         </div>
       </div>
 
       <div className="space-y-1">
-        <label htmlFor="unique-code" className="text-sm font-medium text-custom-text-300">
+        <label htmlFor="unique-code" className="text-13 font-medium text-tertiary">
           {t("auth.common.unique_code.label")}
         </label>
         <Input
@@ -155,22 +133,22 @@ export function AuthUniqueCodeForm(props: TAuthUniqueCodeForm) {
           value={uniqueCodeFormData.code}
           onChange={(e) => handleFormChange("code", e.target.value)}
           placeholder={t("auth.common.unique_code.placeholder")}
-          className="disable-autofill-style h-10 w-full border border-custom-border-300 !bg-custom-background-100 pr-12 placeholder:text-custom-text-400"
+          className="h-10 w-full border border-strong !bg-surface-1 pr-12 disable-autofill-style placeholder:text-placeholder"
+          autoComplete="off"
           autoFocus
         />
-        <div className="flex w-full items-center justify-between px-1 text-xs pt-1">
-          <p className="flex items-center gap-1 font-medium text-green-700">
+        <div className="flex w-full items-center justify-between px-1 pt-1 text-11">
+          <p className="flex items-center gap-1 font-medium text-success-primary">
             <CircleCheck height={12} width={12} />
             {t("auth.common.unique_code.paste_code")}
           </p>
           <button
             type="button"
-            data-ph-element={AUTH_TRACKER_ELEMENTS.REQUEST_NEW_CODE}
             onClick={() => generateNewCode(uniqueCodeFormData.email)}
             className={
               isRequestNewCodeDisabled
-                ? "text-custom-text-400"
-                : "font-medium text-custom-primary-300 hover:text-custom-primary-200"
+                ? "text-placeholder"
+                : "font-medium text-accent-secondary hover:text-accent-secondary"
             }
             disabled={isRequestNewCodeDisabled}
           >
@@ -184,14 +162,7 @@ export function AuthUniqueCodeForm(props: TAuthUniqueCodeForm) {
       </div>
 
       <div className="space-y-2.5">
-        <Button
-          type="submit"
-          variant="primary"
-          className="w-full"
-          size="lg"
-          disabled={isButtonDisabled}
-          data-ph-element={AUTH_TRACKER_ELEMENTS.VERIFY_CODE}
-        >
+        <Button type="submit" variant="primary" className="w-full" size="xl" disabled={isButtonDisabled}>
           {isRequestingNewCode ? (
             t("auth.common.unique_code.sending_code")
           ) : isSubmitting ? (
diff --git a/apps/web/core/components/account/deactivate-account-modal.tsx b/apps/web/core/components/account/deactivate-account-modal.tsx
index c8a210b6d..f4dba2a81 100644
--- a/apps/web/core/components/account/deactivate-account-modal.tsx
+++ b/apps/web/core/components/account/deactivate-account-modal.tsx
@@ -1,13 +1,17 @@
-import React, { useState } from "react";
-import { Trash2 } from "lucide-react";
-import { Dialog, Transition } from "@headlessui/react";
-import { PROFILE_SETTINGS_TRACKER_EVENTS } from "@plane/constants";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
 import { useTranslation } from "@plane/i18n";
 // ui
 import { Button } from "@plane/propel/button";
+import { TrashIcon } from "@plane/propel/icons";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
 // hooks
-import { captureError, captureSuccess } from "@/helpers/event-tracker.helper";
 import { useUser } from "@/hooks/store/user";
 import { useAppRouter } from "@/hooks/use-app-router";
 
@@ -36,9 +40,6 @@ export function DeactivateAccountModal(props: Props) {
 
     await deactivateAccount()
       .then(() => {
-        captureSuccess({
-          eventName: PROFILE_SETTINGS_TRACKER_EVENTS.deactivate_account,
-        });
         setToast({
           type: TOAST_TYPE.SUCCESS,
           title: "Success!",
@@ -47,11 +48,9 @@ export function DeactivateAccountModal(props: Props) {
         signOut();
         router.push("/");
         handleClose();
+        return;
       })
       .catch((err: any) => {
-        captureError({
-          eventName: PROFILE_SETTINGS_TRACKER_EVENTS.deactivate_account,
-        });
         setToast({
           type: TOAST_TYPE.ERROR,
           title: "Error!",
@@ -62,65 +61,33 @@ export function DeactivateAccountModal(props: Props) {
   };
 
   return (
-    <Transition.Root show={isOpen} as={React.Fragment}>
-      <Dialog as="div" className="relative z-20" onClose={handleClose}>
-        <Transition.Child
-          as={React.Fragment}
-          enter="ease-out duration-300"
-          enterFrom="opacity-0"
-          enterTo="opacity-100"
-          leave="ease-in duration-200"
-          leaveFrom="opacity-100"
-          leaveTo="opacity-0"
-        >
-          <div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
-        </Transition.Child>
-
-        <div className="fixed inset-0 z-20 overflow-y-auto">
-          <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
-            <Transition.Child
-              as={React.Fragment}
-              enter="ease-out duration-300"
-              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-              enterTo="opacity-100 translate-y-0 sm:scale-100"
-              leave="ease-in duration-200"
-              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-            >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-custom-background-100 text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-[40rem]">
-                <div className="px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
-                  <div className="">
-                    <div className="flex items-start gap-x-4">
-                      <div className="mt-3 grid place-items-center rounded-full bg-red-500/20 p-2 sm:mt-3 sm:p-2 md:mt-0 md:p-4 lg:mt-0 lg:p-4 ">
-                        <Trash2
-                          className="h-4 w-4 text-red-600 sm:h-4 sm:w-4 md:h-6 md:w-6 lg:h-6 lg:w-6"
-                          aria-hidden="true"
-                        />
-                      </div>
-                      <div>
-                        <Dialog.Title as="h3" className="my-4 text-2xl font-medium leading-6 text-custom-text-100">
-                          {t("deactivate_your_account")}
-                        </Dialog.Title>
-                        <p className="mt-6 list-disc pr-4 text-base font-normal text-custom-text-200">
-                          {t("deactivate_your_account_description")}
-                        </p>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-                <div className="mb-2 flex items-center justify-end gap-2 p-4 sm:px-6">
-                  <Button variant="neutral-primary" onClick={onClose}>
-                    {t("cancel")}
-                  </Button>
-                  <Button variant="danger" onClick={handleDeleteAccount}>
-                    {isDeactivating ? t("deactivating") : t("confirm")}
-                  </Button>
-                </div>
-              </Dialog.Panel>
-            </Transition.Child>
+    <ModalCore isOpen={isOpen} handleClose={handleClose} position={EModalPosition.CENTER} width={EModalWidth.XXL}>
+      <div className="px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+        <div className="">
+          <div className="flex items-start gap-x-4">
+            <div className="mt-3 grid place-items-center rounded-full bg-danger-subtle p-2 sm:mt-3 sm:p-2 md:mt-0 md:p-4 lg:mt-0 lg:p-4">
+              <TrashIcon
+                className="h-4 w-4 text-danger-primary sm:h-4 sm:w-4 md:h-6 md:w-6 lg:h-6 lg:w-6"
+                aria-hidden="true"
+              />
+            </div>
+            <div>
+              <h3 className="my-4 text-20 leading-6 font-medium text-primary">{t("deactivate_your_account")}</h3>
+              <p className="mt-6 list-disc pr-4 text-14 font-regular text-secondary">
+                {t("deactivate_your_account_description")}
+              </p>
+            </div>
           </div>
         </div>
-      </Dialog>
-    </Transition.Root>
+      </div>
+      <div className="mb-2 flex items-center justify-end gap-2 p-4 sm:px-6">
+        <Button variant="secondary" size="lg" onClick={handleClose}>
+          {t("cancel")}
+        </Button>
+        <Button variant="error-fill" size="lg" onClick={handleDeleteAccount}>
+          {isDeactivating ? t("deactivating") : t("confirm")}
+        </Button>
+      </div>
+    </ModalCore>
   );
 }
diff --git a/apps/web/core/components/account/terms-and-conditions.tsx b/apps/web/core/components/account/terms-and-conditions.tsx
index 32cd3f38d..f6be59634 100644
--- a/apps/web/core/components/account/terms-and-conditions.tsx
+++ b/apps/web/core/components/account/terms-and-conditions.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 import Link from "next/link";
 import { EAuthModes } from "@plane/constants";
@@ -20,8 +26,8 @@ const MESSAGES = {
 // Reusable link component to reduce duplication
 function LegalLink({ href, children }: { href: string; children: React.ReactNode }) {
   return (
-    <Link href={href} className="text-custom-text-200" target="_blank" rel="noopener noreferrer">
-      <span className="text-sm font-medium underline hover:cursor-pointer">{children}</span>
+    <Link href={href} className="text-secondary" target="_blank" rel="noopener noreferrer">
+      <span className="text-13 font-medium underline hover:cursor-pointer">{children}</span>
     </Link>
   );
 }
@@ -29,7 +35,7 @@ function LegalLink({ href, children }: { href: string; children: React.ReactNode
 export function TermsAndConditions({ authType = EAuthModes.SIGN_IN }: TermsAndConditionsProps) {
   return (
     <div className="flex items-center justify-center">
-      <p className="text-center text-sm text-custom-text-300 whitespace-pre-line">
+      <p className="text-center text-13 whitespace-pre-line text-tertiary">
         {`${MESSAGES[authType]}, you understand and agree to \n our `}
         <LegalLink href={LEGAL_LINKS.termsOfService}>Terms of Service</LegalLink> and{" "}
         <LegalLink href={LEGAL_LINKS.privacyPolicy}>Privacy Policy</LegalLink>.
diff --git a/apps/web/core/components/analytics/analytics-filter-actions.tsx b/apps/web/core/components/analytics/analytics-filter-actions.tsx
index 2c10cf7eb..1f9a3d206 100644
--- a/apps/web/core/components/analytics/analytics-filter-actions.tsx
+++ b/apps/web/core/components/analytics/analytics-filter-actions.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // plane web components
 import { observer } from "mobx-react";
 // hooks
diff --git a/apps/web/core/components/analytics/analytics-section-wrapper.tsx b/apps/web/core/components/analytics/analytics-section-wrapper.tsx
index 7811db503..d46ce74b4 100644
--- a/apps/web/core/components/analytics/analytics-section-wrapper.tsx
+++ b/apps/web/core/components/analytics/analytics-section-wrapper.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { cn } from "@plane/utils";
 
 type Props = {
@@ -10,14 +16,14 @@ type Props = {
 };
 
 function AnalyticsSectionWrapper(props: Props) {
-  const { title, children, className, subtitle, actions, headerClassName } = props;
+  const { title, children, className, actions, headerClassName } = props;
   return (
     <div className={className}>
-      <div className={cn("mb-6 flex items-center gap-2 text-nowrap ", headerClassName)}>
+      <div className={cn("mb-6 flex items-center gap-2 text-nowrap", headerClassName)}>
         {title && (
-          <div className="flex  items-center gap-2 ">
-            <h1 className={"text-lg font-medium"}>{title}</h1>
-            {/* {subtitle && <p className="text-lg text-custom-text-300"> • {subtitle}</p>} */}
+          <div className="flex items-center gap-2">
+            <h1 className={"text-16 font-medium"}>{title}</h1>
+            {/* {subtitle && <p className="text-16 text-tertiary"> • {subtitle}</p>} */}
           </div>
         )}
         {actions}
diff --git a/apps/web/core/components/analytics/analytics-wrapper.tsx b/apps/web/core/components/analytics/analytics-wrapper.tsx
index 619b653a7..6cd886b04 100644
--- a/apps/web/core/components/analytics/analytics-wrapper.tsx
+++ b/apps/web/core/components/analytics/analytics-wrapper.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 // plane package imports
 import { useTranslation } from "@plane/i18n";
@@ -14,7 +20,7 @@ function AnalyticsWrapper(props: Props) {
   const { t } = useTranslation();
   return (
     <div className={cn("px-6 py-4", className)}>
-      <h1 className={"mb-4 text-2xl font-bold md:mb-6"}>{t(i18nTitle)}</h1>
+      <h1 className={"mb-4 text-20 font-bold md:mb-6"}>{t(i18nTitle)}</h1>
       {children}
     </div>
   );
diff --git a/apps/web/core/components/analytics/empty-state.tsx b/apps/web/core/components/analytics/empty-state.tsx
index e48712b5c..8c2a72193 100644
--- a/apps/web/core/components/analytics/empty-state.tsx
+++ b/apps/web/core/components/analytics/empty-state.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useTheme } from "next-themes";
 // plane package imports
 import { cn } from "@plane/utils";
@@ -20,7 +26,7 @@ function AnalyticsEmptyState({ title, description, assetPath, className }: Props
   return (
     <div
       className={cn(
-        "flex h-full w-full items-center justify-center overflow-y-auto rounded-lg border border-custom-border-100 px-5 py-10 md:px-20",
+        "flex h-full w-full items-center justify-center overflow-y-auto rounded-lg border border-subtle px-5 py-10 md:px-20",
         className
       )}
     >
@@ -34,8 +40,8 @@ function AnalyticsEmptyState({ title, description, assetPath, className }: Props
           </div>
         )}
         <div className="flex flex-shrink flex-col items-center gap-1.5 text-center">
-          <h3 className={cn("text-xl font-semibold")}>{title}</h3>
-          {description && <p className="text-sm text-custom-text-300 max-w-[350px]">{description}</p>}
+          <h3 className={cn("text-18 font-semibold")}>{title}</h3>
+          {description && <p className="max-w-[350px] text-13 text-tertiary">{description}</p>}
         </div>
       </div>
     </div>
diff --git a/apps/web/core/components/analytics/export.ts b/apps/web/core/components/analytics/export.ts
index 8a8307857..c77d1783e 100644
--- a/apps/web/core/components/analytics/export.ts
+++ b/apps/web/core/components/analytics/export.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { ColumnDef, Row } from "@tanstack/react-table";
 import { download, generateCsv, mkConfig } from "export-to-csv";
 
diff --git a/apps/web/core/components/analytics/insight-card.tsx b/apps/web/core/components/analytics/insight-card.tsx
index 9cb718485..d8a30a1c9 100644
--- a/apps/web/core/components/analytics/insight-card.tsx
+++ b/apps/web/core/components/analytics/insight-card.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // plane package imports
 import React from "react";
 import type { IAnalyticsResponseFields } from "@plane/types";
@@ -15,10 +21,10 @@ function InsightCard(props: InsightCardProps) {
 
   return (
     <div className="flex flex-col gap-3">
-      <div className="text-sm text-custom-text-300">{label}</div>
+      <div className="text-13 text-tertiary">{label}</div>
       {!isLoading ? (
         <div className="flex flex-col gap-1">
-          <div className="text-2xl font-bold text-custom-text-100">{count}</div>
+          <div className="text-20 font-bold text-primary">{count}</div>
         </div>
       ) : (
         <Loader.Item height="50px" width="100%" />
diff --git a/apps/web/core/components/analytics/insight-table/data-table.tsx b/apps/web/core/components/analytics/insight-table/data-table.tsx
index 45457318f..a0f5213a6 100644
--- a/apps/web/core/components/analytics/insight-table/data-table.tsx
+++ b/apps/web/core/components/analytics/insight-table/data-table.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 import type {
   ColumnDef,
@@ -15,10 +21,10 @@ import {
   getSortedRowModel,
   useReactTable,
 } from "@tanstack/react-table";
-import { Search } from "lucide-react";
+
 import { useTranslation } from "@plane/i18n";
 import { EmptyStateCompact } from "@plane/propel/empty-state";
-import { CloseIcon } from "@plane/propel/icons";
+import { SearchIcon, CloseIcon } from "@plane/propel/icons";
 // plane package imports
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@plane/propel/table";
 import { cn } from "@plane/utils";
@@ -32,10 +38,10 @@ interface DataTableProps<TData, TValue> {
 }
 
 export function DataTable<TData, TValue>({ columns, data, searchPlaceholder, actions }: DataTableProps<TData, TValue>) {
-  const [rowSelection, setRowSelection] = React.useState({});
+  const [rowSelection, _setRowSelection] = React.useState({});
   const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({});
   const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([]);
-  const [sorting, setSorting] = React.useState<SortingState>([]);
+  const [sorting, _setSorting] = React.useState<SortingState>([]);
   const { t } = useTranslation();
   const inputRef = React.useRef<HTMLInputElement>(null);
   const [isSearchOpen, setIsSearchOpen] = React.useState(false);
@@ -61,36 +67,36 @@ export function DataTable<TData, TValue>({ columns, data, searchPlaceholder, act
   return (
     <div className="space-y-4">
       <div className="flex w-full items-center justify-between">
-        <div className="relative flex max-w-[300px] items-center gap-4 ">
+        <div className="relative flex max-w-[300px] items-center gap-4">
           {table.getHeaderGroups()?.[0]?.headers?.[0]?.id && (
-            <div className="flex items-center gap-2 whitespace-nowrap text-sm text-custom-text-400">
+            <div className="flex items-center gap-2 text-13 whitespace-nowrap text-placeholder">
               {searchPlaceholder}
             </div>
           )}
           {!isSearchOpen && (
             <button
               type="button"
-              className="-mr-5 grid place-items-center rounded p-2 text-custom-text-400 hover:bg-custom-background-80"
+              className="-mr-5 grid place-items-center rounded-sm p-2 text-placeholder hover:bg-layer-1"
               onClick={() => {
                 setIsSearchOpen(true);
                 inputRef.current?.focus();
               }}
             >
-              <Search className="h-3.5 w-3.5" />
+              <SearchIcon className="h-3.5 w-3.5" />
             </button>
           )}
           <div
             className={cn(
-              "mr-auto flex w-0 items-center justify-start gap-1 overflow-hidden rounded-md border border-transparent bg-custom-background-100 text-custom-text-400 opacity-0 transition-[width] ease-linear",
+              "mr-auto flex w-0 items-center justify-start gap-1 overflow-hidden rounded-md border border-transparent bg-surface-1 text-placeholder opacity-0 transition-[width] ease-linear",
               {
-                "w-64 border-custom-border-200 px-2.5 py-1.5 opacity-100": isSearchOpen,
+                "w-64 border-subtle px-2.5 py-1.5 opacity-100": isSearchOpen,
               }
             )}
           >
-            <Search className="h-3.5 w-3.5" />
+            <SearchIcon className="h-3.5 w-3.5" />
             <input
               ref={inputRef}
-              className="w-full max-w-[234px] border-none bg-transparent text-sm text-custom-text-100 placeholder:text-custom-text-400 focus:outline-none"
+              className="w-full max-w-[234px] border-none bg-transparent text-13 text-primary placeholder:text-placeholder focus:outline-none"
               placeholder="Search"
               value={table.getColumn(table.getHeaderGroups()?.[0]?.headers?.[0]?.id)?.getFilterValue() as string}
               onChange={(e) => {
@@ -155,7 +161,7 @@ export function DataTable<TData, TValue>({ columns, data, searchPlaceholder, act
                   <EmptyStateCompact
                     assetKey="unknown"
                     assetClassName="size-20"
-                    rootClassName="border border-custom-border-100 px-5 py-10 md:py-20 md:px-20"
+                    rootClassName="border border-subtle px-5 py-10 md:py-20 md:px-20"
                     title={t("workspace_empty_state.analytics_work_items.title")}
                   />
                 </TableCell>
diff --git a/apps/web/core/components/analytics/insight-table/index.ts b/apps/web/core/components/analytics/insight-table/index.ts
index 1efe34c51..d98033459 100644
--- a/apps/web/core/components/analytics/insight-table/index.ts
+++ b/apps/web/core/components/analytics/insight-table/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./root";
diff --git a/apps/web/core/components/analytics/insight-table/loader.tsx b/apps/web/core/components/analytics/insight-table/loader.tsx
index ff7ea7a19..e07da2374 100644
--- a/apps/web/core/components/analytics/insight-table/loader.tsx
+++ b/apps/web/core/components/analytics/insight-table/loader.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 import type { ColumnDef } from "@tanstack/react-table";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@plane/propel/table";
diff --git a/apps/web/core/components/analytics/insight-table/root.tsx b/apps/web/core/components/analytics/insight-table/root.tsx
index 7b924fcc0..9607d6e95 100644
--- a/apps/web/core/components/analytics/insight-table/root.tsx
+++ b/apps/web/core/components/analytics/insight-table/root.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { ColumnDef, Row, Table } from "@tanstack/react-table";
 import { Download } from "lucide-react";
 import { useTranslation } from "@plane/i18n";
@@ -32,7 +38,7 @@ export function InsightTable<T extends Exclude<TAnalyticsTabsBase, "overview">>(
         searchPlaceholder={`${data?.length || 0} ${headerText}`}
         actions={(table: Table<AnalyticsTableDataMap[T]>) => (
           <Button
-            variant="accent-primary"
+            variant="secondary"
             prependIcon={<Download className="h-3.5 w-3.5" />}
             onClick={() => onExport?.(table.getFilteredRowModel().rows)}
           >
diff --git a/apps/web/core/components/analytics/loaders.tsx b/apps/web/core/components/analytics/loaders.tsx
index cd9f19f22..c298dd001 100644
--- a/apps/web/core/components/analytics/loaders.tsx
+++ b/apps/web/core/components/analytics/loaders.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { Loader } from "@plane/ui";
 
 export function ProjectInsightsLoader() {
diff --git a/apps/web/core/components/analytics/overview/active-project-item.tsx b/apps/web/core/components/analytics/overview/active-project-item.tsx
index 50b81341f..0af7dc87f 100644
--- a/apps/web/core/components/analytics/overview/active-project-item.tsx
+++ b/apps/web/core/components/analytics/overview/active-project-item.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // plane package imports
 import { Logo } from "@plane/propel/emoji-icon-picker";
 import { ProjectIcon } from "@plane/propel/icons";
@@ -16,9 +22,10 @@ type Props = {
 };
 
 function CompletionPercentage({ percentage }: { percentage: number }) {
-  const percentageColor = percentage > 50 ? "bg-green-500/30 text-green-500" : "bg-red-500/30 text-red-500";
+  const percentageColor =
+    percentage > 50 ? "bg-success-subtle text-success-primary" : "bg-danger-subtle text-danger-primary";
   return (
-    <div className={cn("flex items-center gap-2 rounded p-1 text-xs", percentageColor)}>
+    <div className={cn("flex items-center gap-2 rounded-sm p-1 text-11", percentageColor)}>
       <span>{percentage}%</span>
     </div>
   );
@@ -34,9 +41,9 @@ function ActiveProjectItem(props: Props) {
   if (!projectDetails) return null;
 
   return (
-    <div className="flex items-center justify-between gap-2 w-full">
-      <div className="flex items-center gap-2 flex-1 overflow-hidden">
-        <div className="flex h-8 w-8 items-center justify-center rounded-xl bg-custom-background-80 shrink-0">
+    <div className="flex w-full items-center justify-between gap-2">
+      <div className="flex flex-1 items-center gap-2 overflow-hidden">
+        <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-xl bg-layer-1">
           <span className="grid h-4 w-4 flex-shrink-0 place-items-center">
             {projectDetails?.logo_props ? (
               <Logo logo={projectDetails?.logo_props} size={16} />
@@ -48,7 +55,7 @@ function ActiveProjectItem(props: Props) {
           </span>
         </div>
         <Tooltip tooltipContent={projectDetails?.name} position="top-start">
-          <p className="text-sm font-medium truncate">{projectDetails?.name}</p>
+          <p className="truncate text-13 font-medium">{projectDetails?.name}</p>
         </Tooltip>
       </div>
       <CompletionPercentage
diff --git a/apps/web/core/components/analytics/overview/active-projects.tsx b/apps/web/core/components/analytics/overview/active-projects.tsx
index 7796f0793..1ad22dc54 100644
--- a/apps/web/core/components/analytics/overview/active-projects.tsx
+++ b/apps/web/core/components/analytics/overview/active-projects.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
@@ -32,7 +38,7 @@ const ActiveProjects = observer(function ActiveProjects() {
       subtitle={selectedDurationLabel}
       className="md:col-span-2"
     >
-      <div className="flex flex-col gap-4 h-[350px] overflow-auto">
+      <div className="flex h-[350px] flex-col gap-4 overflow-auto">
         {isProjectAnalyticsCountLoading &&
           Array.from({ length: 5 }).map((_, index) => <Loader.Item key={index} height="40px" width="100%" />)}
         {!isProjectAnalyticsCountLoading &&
diff --git a/apps/web/core/components/analytics/overview/index.ts b/apps/web/core/components/analytics/overview/index.ts
index 1efe34c51..d98033459 100644
--- a/apps/web/core/components/analytics/overview/index.ts
+++ b/apps/web/core/components/analytics/overview/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./root";
diff --git a/apps/web/core/components/analytics/overview/project-insights.tsx b/apps/web/core/components/analytics/overview/project-insights.tsx
index 297a113f1..6987ce194 100644
--- a/apps/web/core/components/analytics/overview/project-insights.tsx
+++ b/apps/web/core/components/analytics/overview/project-insights.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { lazy, Suspense } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
@@ -57,7 +63,7 @@ const ProjectInsights = observer(function ProjectInsights() {
         <EmptyStateCompact
           assetKey="unknown"
           assetClassName="size-20"
-          rootClassName="border border-custom-border-100 px-5 py-10 md:py-20 md:px-20"
+          rootClassName="border border-subtle px-5 py-10 md:py-20 md:px-20"
           title={t("workspace_empty_state.analytics_work_items.title")}
         />
       ) : (
@@ -65,15 +71,15 @@ const ProjectInsights = observer(function ProjectInsights() {
           {projectInsightsData && (
             <Suspense fallback={<ProjectInsightsLoader />}>
               <RadarChart
-                className="h-[350px] w-full lg:w-3/5"
+                className="h-[350px] w-full text-accent-primary lg:w-3/5"
                 data={projectInsightsData}
                 dataKey="key"
                 radars={[
                   {
                     key: "count",
                     name: "Count",
-                    fill: "rgba(var(--color-primary-300))",
-                    stroke: "rgba(var(--color-primary-300))",
+                    fill: "var(--text-color-accent-primary)",
+                    stroke: "var(--text-color-accent-primary)",
                     fillOpacity: 0.6,
                     dot: {
                       r: 4,
@@ -90,19 +96,19 @@ const ProjectInsights = observer(function ProjectInsights() {
             </Suspense>
           )}
           <div className="w-full lg:w-2/5">
-            <div className="text-sm text-custom-text-300">{t("workspace_analytics.summary_of_projects")}</div>
-            <div className=" mb-3 border-b border-custom-border-100 py-2">{t("workspace_analytics.all_projects")}</div>
+            <div className="text-13 text-tertiary">{t("workspace_analytics.summary_of_projects")}</div>
+            <div className="mb-3 border-b border-subtle py-2">{t("workspace_analytics.all_projects")}</div>
             <div className="flex flex-col gap-4">
-              <div className="flex items-center justify-between text-sm text-custom-text-300">
+              <div className="flex items-center justify-between text-13 text-tertiary">
                 <div>{t("workspace_analytics.trend_on_charts")}</div>
                 <div>{t("common.work_items")}</div>
               </div>
               {projectInsightsData?.map((item) => (
-                <div key={item.key} className="flex items-center justify-between text-sm text-custom-text-100">
+                <div key={item.key} className="flex items-center justify-between text-13 text-primary">
                   <div>{item.name}</div>
                   <div className="flex items-center gap-1">
                     {/* <TrendPiece key={item.key} size='xs' /> */}
-                    <div className="text-custom-text-200">{item.count}</div>
+                    <div className="text-secondary">{item.count}</div>
                   </div>
                 </div>
               ))}
diff --git a/apps/web/core/components/analytics/overview/root.tsx b/apps/web/core/components/analytics/overview/root.tsx
index 7ebb4ed07..4b191ca2f 100644
--- a/apps/web/core/components/analytics/overview/root.tsx
+++ b/apps/web/core/components/analytics/overview/root.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 import AnalyticsWrapper from "../analytics-wrapper";
 import TotalInsights from "../total-insights";
@@ -9,7 +15,7 @@ function Overview() {
     <AnalyticsWrapper i18nTitle="common.overview">
       <div className="flex flex-col gap-14">
         <TotalInsights analyticsType="overview" />
-        <div className="grid grid-cols-1 gap-14 md:grid-cols-5 ">
+        <div className="grid grid-cols-1 gap-14 md:grid-cols-5">
           <ProjectInsights />
           <ActiveProjects />
         </div>
diff --git a/apps/web/core/components/analytics/select/analytics-params.tsx b/apps/web/core/components/analytics/select/analytics-params.tsx
index 957ea2aee..a577002b7 100644
--- a/apps/web/core/components/analytics/select/analytics-params.tsx
+++ b/apps/web/core/components/analytics/select/analytics-params.tsx
@@ -1,10 +1,17 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useMemo } from "react";
 import { observer } from "mobx-react";
 import type { Control, UseFormSetValue } from "react-hook-form";
 import { Controller } from "react-hook-form";
-import { Calendar, SlidersHorizontal } from "lucide-react";
+import { SlidersHorizontal } from "lucide-react";
 // plane package imports
 import { ANALYTICS_X_AXIS_VALUES, ANALYTICS_Y_AXIS_VALUES } from "@plane/constants";
+import { CalendarLayoutIcon } from "@plane/propel/icons";
 import type { IAnalyticsParams } from "@plane/types";
 import { ChartYAxisMetric } from "@plane/types";
 import { cn } from "@plane/utils";
@@ -63,8 +70,8 @@ export const AnalyticsSelectParams = observer(function AnalyticsSelectParams(pro
               }}
               label={
                 <div className="flex items-center gap-2">
-                  <Calendar className="h-3 w-3" />
-                  <span className={cn("text-custom-text-200", value && "text-custom-text-100")}>
+                  <CalendarLayoutIcon className="h-3 w-3" />
+                  <span className={cn("text-secondary", value && "text-primary")}>
                     {xAxisOptions.find((v) => v.value === value)?.label || "Add Property"}
                   </span>
                 </div>
@@ -85,7 +92,7 @@ export const AnalyticsSelectParams = observer(function AnalyticsSelectParams(pro
               label={
                 <div className="flex items-center gap-2">
                   <SlidersHorizontal className="h-3 w-3" />
-                  <span className={cn("text-custom-text-200", value && "text-custom-text-100")}>
+                  <span className={cn("text-secondary", value && "text-primary")}>
                     {groupByOptions.find((v) => v.value === value)?.label || "Add Property"}
                   </span>
                 </div>
diff --git a/apps/web/core/components/analytics/select/duration.tsx b/apps/web/core/components/analytics/select/duration.tsx
index f668f3c47..695e5c12e 100644
--- a/apps/web/core/components/analytics/select/duration.tsx
+++ b/apps/web/core/components/analytics/select/duration.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // plane package imports
 import type { ReactNode } from "react";
 import React from "react";
@@ -39,7 +45,7 @@ function DurationDropdown({ placeholder = "Duration", onChange, value }: Props)
       onChange={onChange}
       options={options}
       label={
-        <div className="flex items-center gap-2 p-1 ">
+        <div className="flex items-center gap-2 p-1">
           <Calendar className="h-4 w-4" />
           {value ? ANALYTICS_DURATION_FILTER_OPTIONS.find((opt) => opt.value === value)?.name : placeholder}
         </div>
diff --git a/apps/web/core/components/analytics/select/project.tsx b/apps/web/core/components/analytics/select/project.tsx
index b30d85259..7bdbbddb3 100644
--- a/apps/web/core/components/analytics/select/project.tsx
+++ b/apps/web/core/components/analytics/select/project.tsx
@@ -1,8 +1,16 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 // plane package imports
+import { getButtonStyling } from "@plane/propel/button";
 import { Logo } from "@plane/propel/emoji-icon-picker";
-import { ProjectIcon } from "@plane/propel/icons";
+import { ChevronDownIcon, ProjectIcon } from "@plane/propel/icons";
 import { CustomSearchSelect } from "@plane/ui";
+import { cn } from "@plane/utils";
 // hooks
 import { useProject } from "@/hooks/store/use-project";
 
@@ -40,8 +48,9 @@ export const ProjectSelect = observer(function ProjectSelect(props: Props) {
       value={value ?? []}
       onChange={(val: string[]) => onChange(val)}
       options={options}
-      label={
-        <div className="flex items-center gap-2 p-1 ">
+      className="border-none p-0"
+      customButton={
+        <div className={cn(getButtonStyling("secondary", "lg"), "gap-2")}>
           <ProjectIcon className="h-4 w-4" />
           {value && value.length > 3
             ? `3+ projects`
@@ -51,8 +60,10 @@ export const ProjectSelect = observer(function ProjectSelect(props: Props) {
                   .map((p) => getProjectById(p)?.name)
                   .join(", ")
               : "All projects"}
+          <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />
         </div>
       }
+      customButtonClassName="border-none p-0 bg-transparent hover:bg-transparent w-auto h-auto"
       multiple
     />
   );
diff --git a/apps/web/core/components/analytics/select/select-x-axis.tsx b/apps/web/core/components/analytics/select/select-x-axis.tsx
index 56f944a91..6effcfa4d 100644
--- a/apps/web/core/components/analytics/select/select-x-axis.tsx
+++ b/apps/web/core/components/analytics/select/select-x-axis.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // plane package imports
 import type { ChartXAxisProperty } from "@plane/types";
 import { CustomSelect } from "@plane/ui";
diff --git a/apps/web/core/components/analytics/select/select-y-axis.tsx b/apps/web/core/components/analytics/select/select-y-axis.tsx
index 83fd3b659..64c69fbff 100644
--- a/apps/web/core/components/analytics/select/select-y-axis.tsx
+++ b/apps/web/core/components/analytics/select/select-y-axis.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 import { EEstimateSystem } from "@plane/constants";
diff --git a/apps/web/core/components/analytics/total-insights.tsx b/apps/web/core/components/analytics/total-insights.tsx
index 8dd996cd4..98e5ed0ee 100644
--- a/apps/web/core/components/analytics/total-insights.tsx
+++ b/apps/web/core/components/analytics/total-insights.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // plane package imports
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
diff --git a/apps/web/core/components/analytics/trend-piece.tsx b/apps/web/core/components/analytics/trend-piece.tsx
index f55a72f12..744e40cbf 100644
--- a/apps/web/core/components/analytics/trend-piece.tsx
+++ b/apps/web/core/components/analytics/trend-piece.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // plane package imports
 import React from "react";
 import { TrendingDown, TrendingUp } from "lucide-react";
@@ -14,38 +20,38 @@ type Props = {
 
 const sizeConfig = {
   xs: {
-    text: "text-xs",
+    text: "text-11",
     icon: "w-3 h-3",
   },
   sm: {
-    text: "text-sm",
+    text: "text-13",
     icon: "w-4 h-4",
   },
   md: {
-    text: "text-base",
+    text: "text-14",
     icon: "w-5 h-5",
   },
   lg: {
-    text: "text-lg",
+    text: "text-16",
     icon: "w-6 h-6",
   },
 } as const;
 
 const variants: Record<NonNullable<Props["variant"]>, Record<"ontrack" | "offtrack" | "atrisk", string>> = {
   simple: {
-    ontrack: "text-green-500",
+    ontrack: "text-success-primary",
     offtrack: "text-yellow-500",
-    atrisk: "text-red-500",
+    atrisk: "text-danger-primary",
   },
   outlined: {
-    ontrack: "text-green-500 border border-green-500",
+    ontrack: "text-success-primary border border-success-strong",
     offtrack: "text-yellow-500 border border-yellow-500",
-    atrisk: "text-red-500 border border-red-500",
+    atrisk: "text-danger-primary border border-danger-strong",
   },
   tinted: {
-    ontrack: "text-green-500 bg-green-500/10",
+    ontrack: "text-success-primary bg-success-subtle",
     offtrack: "text-yellow-500 bg-yellow-500/10",
-    atrisk: "text-red-500 bg-red-500/10",
+    atrisk: "text-danger-primary bg-danger-subtle",
   },
 } as const;
 
@@ -58,7 +64,7 @@ function TrendPiece(props: Props) {
   return (
     <div
       className={cn(
-        "flex items-center gap-1 p-1 rounded-md",
+        "flex items-center gap-1 rounded-md p-1",
         variants[variant][isOnTrack ? "ontrack" : isOffTrack ? "offtrack" : "atrisk"],
         config.text,
         className
diff --git a/apps/web/core/components/analytics/work-items/created-vs-resolved.tsx b/apps/web/core/components/analytics/work-items/created-vs-resolved.tsx
index 690218e60..66a6a72ac 100644
--- a/apps/web/core/components/analytics/work-items/created-vs-resolved.tsx
+++ b/apps/web/core/components/analytics/work-items/created-vs-resolved.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useMemo } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
@@ -122,7 +128,7 @@ const CreatedVsResolved = observer(function CreatedVsResolved() {
         <EmptyStateCompact
           assetKey="unknown"
           assetClassName="size-20"
-          rootClassName="border border-custom-border-100 px-5 py-10 md:py-20 md:px-20"
+          rootClassName="border border-subtle px-5 py-10 md:py-20 md:px-20"
           title={t("workspace_empty_state.analytics_work_items.title")}
         />
       )}
diff --git a/apps/web/core/components/analytics/work-items/customized-insights.tsx b/apps/web/core/components/analytics/work-items/customized-insights.tsx
index 6e8590fd5..c40a853b4 100644
--- a/apps/web/core/components/analytics/work-items/customized-insights.tsx
+++ b/apps/web/core/components/analytics/work-items/customized-insights.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 import { useForm } from "react-hook-form";
diff --git a/apps/web/core/components/analytics/work-items/index.ts b/apps/web/core/components/analytics/work-items/index.ts
index 1efe34c51..d98033459 100644
--- a/apps/web/core/components/analytics/work-items/index.ts
+++ b/apps/web/core/components/analytics/work-items/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./root";
diff --git a/apps/web/core/components/analytics/work-items/modal/content.tsx b/apps/web/core/components/analytics/work-items/modal/content.tsx
index 082b9266d..259dec20c 100644
--- a/apps/web/core/components/analytics/work-items/modal/content.tsx
+++ b/apps/web/core/components/analytics/work-items/modal/content.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React, { useEffect, useState } from "react";
 import { observer } from "mobx-react";
 import { Tab } from "@headlessui/react";
diff --git a/apps/web/core/components/analytics/work-items/modal/header.tsx b/apps/web/core/components/analytics/work-items/modal/header.tsx
index f0ec91342..c515deb98 100644
--- a/apps/web/core/components/analytics/work-items/modal/header.tsx
+++ b/apps/web/core/components/analytics/work-items/modal/header.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 // plane package imports
 import { Expand, Shrink } from "lucide-react";
@@ -18,21 +24,21 @@ export const WorkItemsModalHeader = observer(function WorkItemsModalHeader(props
   const { fullScreen, handleClose, setFullScreen, title, cycle, module } = props;
 
   return (
-    <div className="flex items-center justify-between gap-4 bg-custom-background-100 px-5 py-4 text-sm">
+    <div className="flex items-center justify-between gap-4 bg-surface-1 px-5 py-4 text-13">
       <h3 className="break-words">
         Analytics for {title} {cycle && `in ${cycle.name}`} {module && `in ${module.name}`}
       </h3>
       <div className="flex items-center gap-2">
         <button
           type="button"
-          className="hidden place-items-center p-1 text-custom-text-200 hover:text-custom-text-100 md:grid"
+          className="hidden place-items-center p-1 text-secondary hover:text-primary md:grid"
           onClick={() => setFullScreen((prevData) => !prevData)}
         >
           {fullScreen ? <Shrink size={14} strokeWidth={2} /> : <Expand size={14} strokeWidth={2} />}
         </button>
         <button
           type="button"
-          className="grid place-items-center p-1 text-custom-text-200 hover:text-custom-text-100"
+          className="grid place-items-center p-1 text-secondary hover:text-primary"
           onClick={handleClose}
         >
           <CloseIcon height={14} width={14} strokeWidth={2} />
diff --git a/apps/web/core/components/analytics/work-items/modal/index.tsx b/apps/web/core/components/analytics/work-items/modal/index.tsx
index 0b57d50e8..a284ba93c 100644
--- a/apps/web/core/components/analytics/work-items/modal/index.tsx
+++ b/apps/web/core/components/analytics/work-items/modal/index.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React, { useEffect, useState } from "react";
 import { observer } from "mobx-react";
 // plane package imports
@@ -40,7 +46,7 @@ export const WorkItemsModal = observer(function WorkItemsModal(props: Props) {
       fullScreen={fullScreen}
     >
       <div
-        className={`flex h-full flex-col overflow-hidden border-custom-border-200 bg-custom-background-100 text-left ${
+        className={`flex h-full flex-col overflow-hidden border-subtle bg-surface-1 text-left ${
           fullScreen ? "rounded-lg border" : "border-l"
         }`}
       >
diff --git a/apps/web/core/components/analytics/work-items/priority-chart.tsx b/apps/web/core/components/analytics/work-items/priority-chart.tsx
index b7d4ba222..942285cab 100644
--- a/apps/web/core/components/analytics/work-items/priority-chart.tsx
+++ b/apps/web/core/components/analytics/work-items/priority-chart.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useMemo } from "react";
 import type { ColumnDef, Row, RowData, Table } from "@tanstack/react-table";
 import { observer } from "mobx-react";
@@ -25,6 +31,7 @@ import { ChartLoader } from "../loaders";
 import { generateBarColor } from "./utils";
 
 declare module "@tanstack/react-table" {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   interface ColumnMeta<TData extends RowData, TValue> {
     export: {
       key: string;
@@ -190,7 +197,7 @@ const PriorityChart = observer(function PriorityChart(props: Props) {
   );
 
   return (
-    <div className="flex flex-col gap-12 ">
+    <div className="flex flex-col gap-12">
       {priorityChartLoading ? (
         <ChartLoader />
       ) : parsedData?.data && parsedData.data.length > 0 ? (
@@ -220,7 +227,7 @@ const PriorityChart = observer(function PriorityChart(props: Props) {
             searchPlaceholder={`${parsedData.data.length} ${xAxisLabel}`}
             actions={(table: Table<TChartDatum>) => (
               <Button
-                variant="accent-primary"
+                variant="secondary"
                 prependIcon={<Download className="h-3.5 w-3.5" />}
                 onClick={() => exportCSV(table.getRowModel().rows, [...defaultColumns, ...columns], workspaceSlug)}
               >
@@ -233,7 +240,7 @@ const PriorityChart = observer(function PriorityChart(props: Props) {
         <EmptyStateCompact
           assetKey="unknown"
           assetClassName="size-20"
-          rootClassName="border border-custom-border-100 px-5 py-10 md:py-20 md:px-20"
+          rootClassName="border border-subtle px-5 py-10 md:py-20 md:px-20"
           title={t("workspace_empty_state.analytics_work_items.title")}
         />
       )}
diff --git a/apps/web/core/components/analytics/work-items/root.tsx b/apps/web/core/components/analytics/work-items/root.tsx
index 94ddfbace..55fb767f9 100644
--- a/apps/web/core/components/analytics/work-items/root.tsx
+++ b/apps/web/core/components/analytics/work-items/root.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 import AnalyticsWrapper from "../analytics-wrapper";
 import TotalInsights from "../total-insights";
diff --git a/apps/web/core/components/analytics/work-items/utils.ts b/apps/web/core/components/analytics/work-items/utils.ts
index 613fa6b62..38535a1bf 100644
--- a/apps/web/core/components/analytics/work-items/utils.ts
+++ b/apps/web/core/components/analytics/work-items/utils.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // plane package imports
 import type { ChartYAxisMetric, IState } from "@plane/types";
 import { ChartXAxisProperty } from "@plane/types";
diff --git a/apps/web/core/components/analytics/work-items/workitems-insight-table.tsx b/apps/web/core/components/analytics/work-items/workitems-insight-table.tsx
index 347c2e5f4..52f3abd66 100644
--- a/apps/web/core/components/analytics/work-items/workitems-insight-table.tsx
+++ b/apps/web/core/components/analytics/work-items/workitems-insight-table.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useMemo } from "react";
 import type { ColumnDef, Row, RowData } from "@tanstack/react-table";
 import { observer } from "mobx-react";
@@ -23,6 +29,7 @@ import { InsightTable } from "../insight-table";
 const analyticsService = new AnalyticsService();
 
 declare module "@tanstack/react-table" {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   interface ColumnMeta<TData extends RowData, TValue> {
     export: {
       key: string;
@@ -110,17 +117,15 @@ const WorkItemsInsightTable = observer(function WorkItemsInsightTable() {
                       shape="circle"
                     />
                   ) : (
-                    <div className="flex h-4 w-4 flex-shrink-0 items-center justify-center rounded-full bg-custom-background-80  capitalize overflow-hidden">
+                    <div className="flex h-4 w-4 flex-shrink-0 items-center justify-center overflow-hidden rounded-full bg-layer-1 capitalize">
                       {row.original.display_name ? (
                         row.original.display_name?.[0]
                       ) : (
-                        <UserRound className="text-custom-text-200 " size={12} />
+                        <UserRound className="text-secondary" size={12} />
                       )}
                     </div>
                   )}
-                  <span className="break-words text-custom-text-200">
-                    {row.original.display_name ?? t(`Unassigned`)}
-                  </span>
+                  <span className="break-words text-secondary">{row.original.display_name ?? t(`Unassigned`)}</span>
                 </div>
               </div>
             ),
diff --git a/apps/web/core/components/api-token/delete-token-modal.tsx b/apps/web/core/components/api-token/delete-token-modal.tsx
index 8989150ca..d2c9d653a 100644
--- a/apps/web/core/components/api-token/delete-token-modal.tsx
+++ b/apps/web/core/components/api-token/delete-token-modal.tsx
@@ -1,8 +1,12 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useState } from "react";
 import { mutate } from "swr";
 // types
-import { PROFILE_SETTINGS_TRACKER_EVENTS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import { APITokenService } from "@plane/services";
@@ -11,7 +15,6 @@ import type { IApiToken } from "@plane/types";
 import { AlertModalCore } from "@plane/ui";
 // fetch-keys
 import { API_TOKENS_LIST } from "@/constants/fetch-keys";
-import { captureError, captureSuccess } from "@/helpers/event-tracker.helper";
 
 type Props = {
   isOpen: boolean;
@@ -50,32 +53,18 @@ export function DeleteApiTokenModal(props: Props) {
           (prevData) => (prevData ?? []).filter((token) => token.id !== tokenId),
           false
         );
-        captureSuccess({
-          eventName: PROFILE_SETTINGS_TRACKER_EVENTS.pat_deleted,
-          payload: {
-            token: tokenId,
-          },
-        });
 
         handleClose();
+        setDeleteLoading(false);
       })
-      .catch((err) =>
+      .catch((err) => {
         setToast({
           type: TOAST_TYPE.ERROR,
           title: t("workspace_settings.settings.api_tokens.delete.error.title"),
           message: err?.message ?? t("workspace_settings.settings.api_tokens.delete.error.message"),
-        })
-      )
-      .catch((err) => {
-        captureError({
-          eventName: PROFILE_SETTINGS_TRACKER_EVENTS.pat_deleted,
-          payload: {
-            token: tokenId,
-          },
-          error: err as Error,
         });
-      })
-      .finally(() => setDeleteLoading(false));
+        setDeleteLoading(false);
+      });
   };
 
   return (
diff --git a/apps/web/core/components/api-token/empty-state.tsx b/apps/web/core/components/api-token/empty-state.tsx
index 62ce7cd6c..944d19e34 100644
--- a/apps/web/core/components/api-token/empty-state.tsx
+++ b/apps/web/core/components/api-token/empty-state.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 // ui
 import { Button } from "@plane/propel/button";
@@ -13,12 +19,12 @@ export function ApiTokenEmptyState(props: Props) {
 
   return (
     <div
-      className={`mx-auto flex w-full items-center justify-center rounded-sm border border-custom-border-200 bg-custom-background-90 px-16 py-10 lg:w-3/4`}
+      className={`mx-auto flex w-full items-center justify-center rounded-xs border border-subtle bg-surface-2 px-16 py-10 lg:w-3/4`}
     >
       <div className="flex w-full flex-col items-center text-center">
-        <img src={emptyApiTokens} className="w-52 sm:w-60 object-contain" alt="empty" />
-        <h6 className="mb-3 mt-6 text-xl font-semibold sm:mt-8">No API tokens</h6>
-        <p className="mb-7 text-custom-text-300 sm:mb-8">
+        <img src={emptyApiTokens} className="w-52 object-contain sm:w-60" alt="empty" />
+        <h6 className="mt-6 mb-3 text-18 font-semibold sm:mt-8">No API tokens</h6>
+        <p className="mb-7 text-tertiary sm:mb-8">
           Create API tokens for safe and easy data sharing with external apps, maintaining control and security.
         </p>
         <Button className="flex items-center gap-1.5" onClick={onClick}>
diff --git a/apps/web/core/components/api-token/modal/create-token-modal.tsx b/apps/web/core/components/api-token/modal/create-token-modal.tsx
index a87b18d71..9ea6055da 100644
--- a/apps/web/core/components/api-token/modal/create-token-modal.tsx
+++ b/apps/web/core/components/api-token/modal/create-token-modal.tsx
@@ -1,7 +1,12 @@
-import React, { useState } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
 import { mutate } from "swr";
 // plane imports
-import { PROFILE_SETTINGS_TRACKER_EVENTS } from "@plane/constants";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import { APITokenService } from "@plane/services";
 import type { IApiToken } from "@plane/types";
@@ -9,8 +14,6 @@ import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
 import { renderFormattedDate, csvDownload } from "@plane/utils";
 // constants
 import { API_TOKENS_LIST } from "@/constants/fetch-keys";
-// helpers
-import { captureError, captureSuccess } from "@/helpers/event-tracker.helper";
 // local imports
 import { CreateApiTokenForm } from "./form";
 import { GeneratedTokenDetails } from "./generated-token-details";
@@ -66,12 +69,6 @@ export function CreateApiTokenModal(props: Props) {
           },
           false
         );
-        captureSuccess({
-          eventName: PROFILE_SETTINGS_TRACKER_EVENTS.pat_created,
-          payload: {
-            token: res.id,
-          },
-        });
       })
       .catch((err) => {
         setToast({
@@ -80,10 +77,6 @@ export function CreateApiTokenModal(props: Props) {
           message: err.message || err.detail,
         });
 
-        captureError({
-          eventName: PROFILE_SETTINGS_TRACKER_EVENTS.pat_created,
-        });
-
         throw err;
       });
   };
diff --git a/apps/web/core/components/api-token/modal/form.tsx b/apps/web/core/components/api-token/modal/form.tsx
index 4a3b3ac8e..d345c80d0 100644
--- a/apps/web/core/components/api-token/modal/form.tsx
+++ b/apps/web/core/components/api-token/modal/form.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useState } from "react";
 import { add } from "date-fns";
 import { Controller, useForm } from "react-hook-form";
@@ -120,7 +126,7 @@ export function CreateApiTokenForm(props: Props) {
   return (
     <form onSubmit={handleSubmit(handleFormSubmit)}>
       <div className="space-y-5 p-5">
-        <h3 className="text-xl font-medium text-custom-text-200">
+        <h3 className="text-18 font-medium text-secondary">
           {t("workspace_settings.settings.api_tokens.create_token")}
         </h3>
         <div className="space-y-3">
@@ -143,11 +149,11 @@ export function CreateApiTokenForm(props: Props) {
                   onChange={onChange}
                   hasError={Boolean(errors.label)}
                   placeholder={t("title")}
-                  className="w-full text-base"
+                  className="w-full text-14"
                 />
               )}
             />
-            {errors.label && <span className="text-xs text-red-500">{errors.label.message}</span>}
+            {errors.label && <span className="text-11 text-danger-primary">{errors.label.message}</span>}
           </div>
           <Controller
             control={control}
@@ -158,7 +164,7 @@ export function CreateApiTokenForm(props: Props) {
                 onChange={onChange}
                 hasError={Boolean(errors.description)}
                 placeholder={t("description")}
-                className="w-full text-base resize-none min-h-24"
+                className="min-h-24 w-full resize-none text-14"
               />
             )}
           />
@@ -175,9 +181,9 @@ export function CreateApiTokenForm(props: Props) {
                       customButton={
                         <div
                           className={cn(
-                            "h-7 flex items-center gap-2 rounded border-[0.5px] border-custom-border-300 px-2 py-0.5",
+                            "flex h-7 items-center gap-2 rounded-sm border-[0.5px] border-strong px-2 py-0.5",
                             {
-                              "text-custom-text-400": neverExpires,
+                              "text-placeholder": neverExpires,
                             }
                           )}
                         >
@@ -218,7 +224,7 @@ export function CreateApiTokenForm(props: Props) {
               )}
             </div>
             {!neverExpires && (
-              <span className="text-xs text-custom-text-400">
+              <span className="text-11 text-placeholder">
                 {expiredAt === "custom"
                   ? customDate
                     ? `Expires ${renderFormattedDate(customDateFormatted ?? "")} at ${renderFormattedTime(customDateFormatted ?? "")}`
@@ -231,18 +237,18 @@ export function CreateApiTokenForm(props: Props) {
           </div>
         </div>
       </div>
-      <div className="px-5 py-4 flex items-center justify-between gap-2 border-t-[0.5px] border-custom-border-200">
+      <div className="flex items-center justify-between gap-2 border-t-[0.5px] border-subtle px-5 py-4">
         <div className="flex cursor-pointer items-center gap-1.5" onClick={toggleNeverExpires}>
           <div className="flex cursor-pointer items-center justify-center">
             <ToggleSwitch value={neverExpires} onChange={() => {}} size="sm" />
           </div>
-          <span className="text-xs">{t("workspace_settings.settings.api_tokens.never_expires")}</span>
+          <span className="text-11">{t("workspace_settings.settings.api_tokens.never_expires")}</span>
         </div>
         <div className="flex items-center gap-2">
-          <Button variant="neutral-primary" size="sm" onClick={handleClose}>
+          <Button variant="secondary" onClick={handleClose}>
             {t("cancel")}
           </Button>
-          <Button variant="primary" size="sm" type="submit" loading={isSubmitting}>
+          <Button variant="primary" type="submit" loading={isSubmitting}>
             {isSubmitting
               ? t("workspace_settings.settings.api_tokens.generating")
               : t("workspace_settings.settings.api_tokens.generate_token")}
diff --git a/apps/web/core/components/api-token/modal/generated-token-details.tsx b/apps/web/core/components/api-token/modal/generated-token-details.tsx
index d3b6ff5c7..aad163191 100644
--- a/apps/web/core/components/api-token/modal/generated-token-details.tsx
+++ b/apps/web/core/components/api-token/modal/generated-token-details.tsx
@@ -1,6 +1,12 @@
-import { Copy } from "lucide-react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useTranslation } from "@plane/i18n";
 import { Button } from "@plane/propel/button";
+import { CopyIcon } from "@plane/propel/icons";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import { Tooltip } from "@plane/propel/tooltip";
 import type { IApiToken } from "@plane/types";
@@ -33,26 +39,26 @@ export function GeneratedTokenDetails(props: Props) {
   return (
     <div className="w-full p-5">
       <div className="w-full space-y-3 text-wrap">
-        <h3 className="text-lg font-medium leading-6 text-custom-text-100">{t("workspace_settings.key_created")}</h3>
-        <p className="text-sm text-custom-text-400">{t("workspace_settings.copy_key")}</p>
+        <h3 className="text-16 leading-6 font-medium text-primary">{t("workspace_settings.key_created")}</h3>
+        <p className="text-13 text-placeholder">{t("workspace_settings.copy_key")}</p>
       </div>
       <button
         type="button"
         onClick={() => copyApiToken(tokenDetails.token ?? "")}
-        className="mt-4 flex truncate w-full items-center justify-between rounded-md border-[0.5px] border-custom-border-200 px-3 py-2 text-sm font-medium outline-none"
+        className="mt-4 flex w-full items-center justify-between truncate rounded-md border-[0.5px] border-subtle px-3 py-2 text-13 font-medium outline-none"
       >
         <span className="truncate pr-2">{tokenDetails.token}</span>
         <Tooltip tooltipContent="Copy secret key" isMobile={isMobile}>
-          <Copy className="h-4 w-4 text-custom-text-400 flex-shrink-0" />
+          <CopyIcon className="h-4 w-4 flex-shrink-0 text-placeholder" />
         </Tooltip>
       </button>
       <div className="mt-6 flex items-center justify-between">
-        <p className="text-xs text-custom-text-400">
+        <p className="text-11 text-placeholder">
           {tokenDetails.expired_at
             ? `Expires ${renderFormattedDate(tokenDetails.expired_at)} at ${renderFormattedTime(tokenDetails.expired_at)}`
             : "Never expires"}
         </p>
-        <Button variant="neutral-primary" size="sm" onClick={handleClose}>
+        <Button variant="secondary" onClick={handleClose}>
           {t("close")}
         </Button>
       </div>
diff --git a/apps/web/core/components/api-token/token-list-item.tsx b/apps/web/core/components/api-token/token-list-item.tsx
index 866e6a95b..833a7df42 100644
--- a/apps/web/core/components/api-token/token-list-item.tsx
+++ b/apps/web/core/components/api-token/token-list-item.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useState } from "react";
 import { XCircle } from "lucide-react";
 // plane imports
@@ -24,31 +30,31 @@ export function ApiTokenListItem(props: Props) {
   return (
     <>
       <DeleteApiTokenModal isOpen={deleteModalOpen} onClose={() => setDeleteModalOpen(false)} tokenId={token.id} />
-      <div className="group relative flex flex-col justify-center border-b border-custom-border-200 py-3">
+      <div className="group relative flex flex-col justify-center border-b border-subtle py-3">
         <Tooltip tooltipContent="Delete token" isMobile={isMobile}>
           <button
             onClick={() => setDeleteModalOpen(true)}
             className="absolute right-4 hidden place-items-center group-hover:grid"
             data-ph-element={PROFILE_SETTINGS_TRACKER_ELEMENTS.LIST_ITEM_DELETE_ICON}
           >
-            <XCircle className="h-4 w-4 text-red-500" />
+            <XCircle className="h-4 w-4 text-danger-primary" />
           </button>
         </Tooltip>
         <div className="flex w-4/5 items-center">
-          <h5 className="truncate text-sm font-medium">{token.label}</h5>
+          <h5 className="truncate text-13 font-medium">{token.label}</h5>
           <span
             className={`${
-              token.is_active ? "bg-green-500/10 text-green-500" : "bg-custom-background-80 text-custom-text-400"
-            } ml-2 flex h-4 max-h-fit items-center rounded-sm px-2 text-xs font-medium`}
+              token.is_active ? "bg-success-subtle text-success-primary" : "bg-layer-1 text-placeholder"
+            } ml-2 flex h-4 max-h-fit items-center rounded-xs px-2 text-11 font-medium`}
           >
             {token.is_active ? "Active" : "Expired"}
           </span>
         </div>
         <div className="mt-1 flex w-full flex-col justify-center">
           {token.description.trim() !== "" && (
-            <p className="mb-1 max-w-[70%] break-words text-sm">{token.description}</p>
+            <p className="mb-1 max-w-[70%] text-13 break-words">{token.description}</p>
           )}
-          <p className="mb-1 text-xs leading-6 text-custom-text-400">
+          <p className="mb-1 text-11 leading-6 text-placeholder">
             {token.is_active
               ? token.expired_at
                 ? `Expires ${renderFormattedDate(token.expired_at)} at ${renderFormattedTime(token.expired_at)}`
diff --git a/apps/web/core/components/appearance/index.ts b/apps/web/core/components/appearance/index.ts
new file mode 100644
index 000000000..895fab0cf
--- /dev/null
+++ b/apps/web/core/components/appearance/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./theme-switcher";
diff --git a/apps/web/core/components/appearance/theme-switcher.tsx b/apps/web/core/components/appearance/theme-switcher.tsx
new file mode 100644
index 000000000..4ec2eba43
--- /dev/null
+++ b/apps/web/core/components/appearance/theme-switcher.tsx
@@ -0,0 +1,76 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useCallback, useMemo } from "react";
+import { observer } from "mobx-react";
+import { useTheme } from "next-themes";
+// plane imports
+import type { I_THEME_OPTION } from "@plane/constants";
+import { THEME_OPTIONS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { setPromiseToast } from "@plane/propel/toast";
+// components
+import { CustomThemeSelector } from "@/components/core/theme/custom-theme-selector";
+import { ThemeSwitch } from "@/components/core/theme/theme-switch";
+import { SettingsControlItem } from "@/components/settings/control-item";
+// hooks
+import { useUserProfile } from "@/hooks/store/user";
+
+export const ThemeSwitcher = observer(function ThemeSwitcher(props: {
+  option: {
+    id: string;
+    title: string;
+    description: string;
+  };
+}) {
+  // store hooks
+  const { data: userProfile, updateUserTheme } = useUserProfile();
+  // theme
+  const { setTheme } = useTheme();
+  // translation
+  const { t } = useTranslation();
+  // derived values
+  const currentTheme = useMemo(() => {
+    const userThemeOption = THEME_OPTIONS.find((t) => t.value === userProfile?.theme?.theme);
+    return userThemeOption || null;
+  }, [userProfile?.theme?.theme]);
+
+  const handleThemeChange = useCallback(
+    (themeOption: I_THEME_OPTION) => {
+      try {
+        setTheme(themeOption.value);
+        const updatePromise = updateUserTheme({ theme: themeOption.value });
+        setPromiseToast(updatePromise, {
+          loading: "Updating theme...",
+          success: {
+            title: "Success!",
+            message: () => "Theme updated successfully!",
+          },
+          error: {
+            title: "Error!",
+            message: () => "Failed to update the theme",
+          },
+        });
+      } catch (error) {
+        console.error("Error updating theme:", error);
+      }
+    },
+    [updateUserTheme]
+  );
+
+  if (!userProfile) return null;
+
+  return (
+    <>
+      <SettingsControlItem
+        title={t(props.option.title)}
+        description={t(props.option.description)}
+        control={<ThemeSwitch value={currentTheme} onChange={handleThemeChange} />}
+      />
+      {userProfile.theme?.theme === "custom" && <CustomThemeSelector />}
+    </>
+  );
+});
diff --git a/apps/web/core/components/archives/archive-tabs-list.tsx b/apps/web/core/components/archives/archive-tabs-list.tsx
index 4fc4230d9..ea2184201 100644
--- a/apps/web/core/components/archives/archive-tabs-list.tsx
+++ b/apps/web/core/components/archives/archive-tabs-list.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import Link from "next/link";
 import { useParams, usePathname } from "next/navigation";
@@ -48,10 +53,10 @@ export const ArchiveTabsList = observer(function ArchiveTabsList() {
           tab.shouldRender(projectDetails) && (
             <Link key={tab.key} href={`/${workspaceSlug}/projects/${projectId}/archives/${tab.key}`}>
               <span
-                className={`flex min-w-min flex-shrink-0 whitespace-nowrap border-b-2 py-4 px-4 text-sm font-medium outline-none ${
+                className={`flex min-w-min flex-shrink-0 border-b-2 px-4 py-4 text-13 font-medium whitespace-nowrap outline-none ${
                   pathname.includes(tab.key)
-                    ? "border-custom-primary-100 text-custom-primary-100"
-                    : "border-transparent hover:border-custom-border-200 text-custom-text-300 hover:text-custom-text-400"
+                    ? "border-accent-strong text-accent-primary"
+                    : "border-transparent text-tertiary hover:border-subtle hover:text-placeholder"
                 }`}
               >
                 {tab.label}
diff --git a/apps/web/core/components/archives/index.ts b/apps/web/core/components/archives/index.ts
index 4b519fca0..db04e247f 100644
--- a/apps/web/core/components/archives/index.ts
+++ b/apps/web/core/components/archives/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./archive-tabs-list";
diff --git a/apps/web/core/components/auth-screens/auth-base.tsx b/apps/web/core/components/auth-screens/auth-base.tsx
index b3b5d361f..9d7af0d35 100644
--- a/apps/web/core/components/auth-screens/auth-base.tsx
+++ b/apps/web/core/components/auth-screens/auth-base.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 import { AuthRoot } from "@/components/account/auth-forms/auth-root";
 import type { EAuthModes } from "@/helpers/authentication.helper";
@@ -10,7 +16,7 @@ type AuthBaseProps = {
 
 export function AuthBase({ authType }: AuthBaseProps) {
   return (
-    <div className="relative z-10 flex flex-col items-center w-screen h-screen overflow-hidden overflow-y-auto pt-6 pb-10 px-8">
+    <div className="relative z-10 flex h-screen w-screen flex-col items-center overflow-hidden overflow-y-auto px-8 pt-6 pb-10">
       <AuthHeader type={authType} />
       <AuthRoot authMode={authType} />
       <AuthFooter />
diff --git a/apps/web/core/components/auth-screens/footer.tsx b/apps/web/core/components/auth-screens/footer.tsx
index e35402596..7ed0b4e7e 100644
--- a/apps/web/core/components/auth-screens/footer.tsx
+++ b/apps/web/core/components/auth-screens/footer.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 import { AccentureLogo, DolbyLogo, SonyLogo, ZerodhaLogo } from "@plane/propel/icons";
 
@@ -11,25 +17,25 @@ const BRAND_LOGOS: {
   },
   {
     id: "sony",
-    icon: <SonyLogo className="h-7 w-16 dark:text-white" />,
+    icon: <SonyLogo className="h-7 w-16 dark:text-on-color" />,
   },
   {
     id: "dolby",
-    icon: <DolbyLogo className="h-7 w-16 dark:text-white" />,
+    icon: <DolbyLogo className="h-7 w-16 dark:text-on-color" />,
   },
   {
     id: "accenture",
-    icon: <AccentureLogo className="h-7 w-24 dark:text-white" />,
+    icon: <AccentureLogo className="h-7 w-24 dark:text-on-color" />,
   },
 ];
 
 export function AuthFooter() {
   return (
     <div className="flex flex-col items-center gap-6">
-      <span className="text-sm text-custom-text-300 whitespace-nowrap">Join 10,000+ teams building with Plane</span>
-      <div className="flex items-center justify-center gap-x-10 gap-y-4 w-full flex-wrap">
+      <span className="text-13 whitespace-nowrap text-tertiary">Join 10,000+ teams building with Plane</span>
+      <div className="flex w-full flex-wrap items-center justify-center gap-x-10 gap-y-4">
         {BRAND_LOGOS.map((brand) => (
-          <div className="flex items-center justify-center h-7 flex-1" key={brand.id}>
+          <div className="flex h-7 flex-1 items-center justify-center" key={brand.id}>
             {brand.icon}
           </div>
         ))}
diff --git a/apps/web/core/components/auth-screens/header.tsx b/apps/web/core/components/auth-screens/header.tsx
index cd7ac7457..817bdf446 100644
--- a/apps/web/core/components/auth-screens/header.tsx
+++ b/apps/web/core/components/auth-screens/header.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
@@ -33,26 +39,44 @@ export const AuthHeader = observer(function AuthHeader({ type }: AuthHeaderProps
   const { config } = useInstance();
   // derived values
   const enableSignUpConfig = config?.enable_signup ?? false;
+
   return (
-    <>
-      <PageHead title={t(authContentMap[type].pageTitle) + " - Plane"} />
-      <div className="flex items-center justify-between gap-6 w-full flex-shrink-0 sticky top-0">
-        <Link href="/">
-          <PlaneLockup height={20} width={95} className="text-custom-text-100" />
-        </Link>
-        {enableSignUpConfig && (
-          <div className="flex flex-col items-end text-sm font-medium text-center sm:items-center sm:gap-2 sm:flex-row text-custom-text-300">
-            {t(authContentMap[type].text)}
+    <AuthHeaderBase
+      pageTitle={t(authContentMap[type].pageTitle)}
+      additionalAction={
+        enableSignUpConfig && (
+          <div className="flex flex-col items-end text-center text-13 font-medium text-tertiary sm:flex-row sm:items-center sm:gap-2">
+            <span className="text-body-sm-regular text-tertiary">{t(authContentMap[type].text)}</span>
             <Link
               data-ph-element={AUTH_TRACKER_ELEMENTS.NAVIGATE_TO_SIGN_UP}
               href={authContentMap[type].linkHref}
-              className="font-semibold text-custom-primary-100 hover:underline"
+              className="text-body-sm-semibold text-accent-primary hover:underline"
             >
               {t(authContentMap[type].linkText)}
             </Link>
           </div>
-        )}
+        )
+      }
+    />
+  );
+});
+
+type TAuthHeaderBase = {
+  pageTitle: string;
+  additionalAction?: React.ReactNode;
+};
+
+export function AuthHeaderBase(props: TAuthHeaderBase) {
+  const { pageTitle, additionalAction } = props;
+  return (
+    <>
+      <PageHead title={pageTitle + " - Plane"} />
+      <div className="sticky top-0 flex w-full flex-shrink-0 items-center justify-between gap-6">
+        <Link href="/">
+          <PlaneLockup height={20} width={95} className="text-primary" />
+        </Link>
+        {additionalAction}
       </div>
     </>
   );
-});
+}
diff --git a/apps/web/core/components/auth-screens/not-authorized-view.tsx b/apps/web/core/components/auth-screens/not-authorized-view.tsx
index a824eb209..ceb7fae05 100644
--- a/apps/web/core/components/auth-screens/not-authorized-view.tsx
+++ b/apps/web/core/components/auth-screens/not-authorized-view.tsx
@@ -1,6 +1,13 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 import { observer } from "mobx-react";
 // assets
+import { cn } from "@plane/utils";
 import ProjectNotAuthorizedImg from "@/app/assets/auth/project-not-authorized.svg?url";
 import Unauthorized from "@/app/assets/auth/unauthorized.svg?url";
 import WorkspaceNotAuthorizedImg from "@/app/assets/auth/workspace-not-authorized.svg?url";
@@ -22,12 +29,12 @@ export const NotAuthorizedView = observer(function NotAuthorizedView(props: Prop
   const asset = section === "settings" ? settingAsset : Unauthorized;
 
   return (
-    <DefaultLayout className={className}>
-      <div className="flex h-full w-full flex-col items-center justify-center gap-y-5 bg-custom-background-100 text-center">
+    <DefaultLayout className={cn("bg-surface-1", className)}>
+      <div className="flex h-full w-full flex-col items-center justify-center gap-y-5 text-center">
         <div className="h-44 w-72">
           <img src={asset} className="h-[176px] w-[288px] object-contain" alt="ProjectSettingImg" />
         </div>
-        <h1 className="text-xl font-medium text-custom-text-100">Oops! You are not authorized to view this page</h1>
+        <h1 className="text-18 font-medium text-primary">Oops! You are not authorized to view this page</h1>
         {actionButton}
       </div>
     </DefaultLayout>
diff --git a/apps/web/core/components/auth-screens/project/project-access-restriction.tsx b/apps/web/core/components/auth-screens/project/project-access-restriction.tsx
index 631afc5c4..9110f88dc 100644
--- a/apps/web/core/components/auth-screens/project/project-access-restriction.tsx
+++ b/apps/web/core/components/auth-screens/project/project-access-restriction.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 // plane imports
 import { useTranslation } from "@plane/i18n";
@@ -20,7 +26,7 @@ export const ProjectAccessRestriction = observer(function ProjectAccessRestricti
   // - User lacks permission to access the private project (403 Forbidden) but is a workspace admin (can join any project)
   if (errorStatusCode === 409 || (errorStatusCode === 403 && isWorkspaceAdmin))
     return (
-      <div className="grid h-full w-full place-items-center bg-custom-background-100">
+      <div className="grid h-full w-full place-items-center bg-surface-1">
         <EmptyStateDetailed
           title={t("project_empty_state.no_access.title")}
           description={t("project_empty_state.no_access.join_description")}
@@ -43,7 +49,7 @@ export const ProjectAccessRestriction = observer(function ProjectAccessRestricti
   // - User lacks permission to access the private project (403 Forbidden)
   if (errorStatusCode === 403) {
     return (
-      <div className="grid h-full w-full place-items-center bg-custom-background-100">
+      <div className="grid h-full w-full place-items-center bg-surface-1">
         <EmptyStateDetailed
           title={t("project_empty_state.no_access.title")}
           description={t("project_empty_state.no_access.restricted_description")}
@@ -58,7 +64,7 @@ export const ProjectAccessRestriction = observer(function ProjectAccessRestricti
   // - Project not found (404 Not Found)
   // - Any other error status code
   return (
-    <div className="grid h-full w-full place-items-center bg-custom-background-100">
+    <div className="grid h-full w-full place-items-center bg-surface-1">
       <EmptyStateDetailed
         title={t("project_empty_state.invalid_project.title")}
         description={t("project_empty_state.invalid_project.description")}
diff --git a/apps/web/core/components/auth-screens/workspace/not-a-member.tsx b/apps/web/core/components/auth-screens/workspace/not-a-member.tsx
index f706844a6..b38603006 100644
--- a/apps/web/core/components/auth-screens/workspace/not-a-member.tsx
+++ b/apps/web/core/components/auth-screens/workspace/not-a-member.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import Link from "next/link";
 // ui
 import { Button } from "@plane/propel/button";
@@ -10,8 +16,8 @@ export function NotAWorkspaceMember() {
       <div className="grid h-full place-items-center p-4">
         <div className="space-y-8 text-center">
           <div className="space-y-2">
-            <h3 className="text-lg font-semibold">Not Authorized!</h3>
-            <p className="mx-auto w-1/2 text-sm text-custom-text-200">
+            <h3 className="text-16 font-semibold">Not Authorized!</h3>
+            <p className="mx-auto w-1/2 text-13 text-secondary">
               You{"'"}re not a member of this workspace. Please contact the workspace admin to get an invitation or
               check your pending invitations.
             </p>
@@ -19,7 +25,7 @@ export function NotAWorkspaceMember() {
           <div className="flex items-center justify-center gap-2">
             <Link href="/invitations">
               <span>
-                <Button variant="neutral-primary">Check pending invites</Button>
+                <Button variant="secondary">Check pending invites</Button>
               </span>
             </Link>
             <Link href="/create-workspace">
diff --git a/apps/web/core/components/automation/auto-archive-automation.tsx b/apps/web/core/components/automation/auto-archive-automation.tsx
index c2bd90cf0..1221e2326 100644
--- a/apps/web/core/components/automation/auto-archive-automation.tsx
+++ b/apps/web/core/components/automation/auto-archive-automation.tsx
@@ -1,24 +1,22 @@
-import React, { useMemo, useState } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useMemo, useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 import { ArchiveRestore } from "lucide-react";
-// types
-import {
-  PROJECT_AUTOMATION_MONTHS,
-  EUserPermissions,
-  EUserPermissionsLevel,
-  PROJECT_SETTINGS_TRACKER_ELEMENTS,
-  PROJECT_SETTINGS_TRACKER_EVENTS,
-} from "@plane/constants";
+// plane imports
+import { PROJECT_AUTOMATION_MONTHS, EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import type { IProject } from "@plane/types";
-// ui
 import { CustomSelect, Loader, ToggleSwitch } from "@plane/ui";
 // component
 import { SelectMonthModal } from "@/components/automation";
-// constants
+import { SettingsControlItem } from "@/components/settings/control-item";
 // hooks
-import { captureElementAndEvent } from "@/helpers/event-tracker.helper";
 import { useProject } from "@/hooks/store/use-project";
 import { useUserPermissions } from "@/hooks/store/user";
 
@@ -52,6 +50,14 @@ export const AutoArchiveAutomation = observer(function AutoArchiveAutomation(pro
     return currentProjectDetails.archive_in !== 0;
   }, [currentProjectDetails]);
 
+  const handleToggleArchive = async () => {
+    if (currentProjectDetails?.archive_in === 0) {
+      await handleChange({ archive_in: 1 });
+    } else {
+      await handleChange({ archive_in: 0 });
+    }
+  };
+
   return (
     <>
       <SelectMonthModal
@@ -61,47 +67,24 @@ export const AutoArchiveAutomation = observer(function AutoArchiveAutomation(pro
         handleClose={() => setmonthModal(false)}
         handleChange={handleChange}
       />
-      <div className="flex flex-col gap-4 border-b border-custom-border-100 py-6">
-        <div className="flex items-center justify-between">
-          <div className="flex items-start gap-3">
-            <div className="flex items-center justify-center rounded bg-custom-background-90 p-3">
-              <ArchiveRestore className="h-4 w-4 flex-shrink-0 text-custom-text-100" />
-            </div>
-            <div className="">
-              <h4 className="text-sm font-medium">{t("project_settings.automations.auto-archive.title")}</h4>
-              <p className="text-sm tracking-tight text-custom-text-200">
-                {t("project_settings.automations.auto-archive.description")}
-              </p>
-            </div>
+      <div className="flex flex-col gap-4 border-b border-subtle py-2">
+        <div className="flex items-center gap-3">
+          <div className="grid size-10 shrink-0 place-items-center rounded-sm bg-layer-2">
+            <ArchiveRestore className="size-4 shrink-0 text-primary" />
           </div>
-          <ToggleSwitch
-            value={autoArchiveStatus}
-            onChange={async () => {
-              if (currentProjectDetails?.archive_in === 0) {
-                await handleChange({ archive_in: 1 });
-              } else {
-                await handleChange({ archive_in: 0 });
-              }
-              captureElementAndEvent({
-                element: {
-                  elementName: PROJECT_SETTINGS_TRACKER_ELEMENTS.AUTOMATIONS_ARCHIVE_TOGGLE_BUTTON,
-                },
-                event: {
-                  eventName: PROJECT_SETTINGS_TRACKER_EVENTS.auto_archive_workitems,
-                  state: "SUCCESS",
-                },
-              });
-            }}
-            size="sm"
-            disabled={!isAdmin}
+          <SettingsControlItem
+            title={t("project_settings.automations.auto-archive.title")}
+            description={t("project_settings.automations.auto-archive.description")}
+            control={
+              <ToggleSwitch value={autoArchiveStatus} onChange={handleToggleArchive} size="sm" disabled={!isAdmin} />
+            }
           />
         </div>
-
         {currentProjectDetails ? (
           autoArchiveStatus && (
-            <div className="mx-6">
-              <div className="flex w-full items-center justify-between gap-2 rounded border border-custom-border-200 bg-custom-background-90 px-5 py-4">
-                <div className="w-1/2 text-sm font-medium">
+            <div className="ml-13">
+              <div className="flex w-full items-center justify-between gap-2 rounded-sm border border-subtle bg-surface-2 px-5 py-4">
+                <div className="w-1/2 text-13 font-medium">
                   {t("project_settings.automations.auto-archive.duration")}
                 </div>
                 <div className="w-1/2">
@@ -110,22 +93,20 @@ export const AutoArchiveAutomation = observer(function AutoArchiveAutomation(pro
                     label={`${currentProjectDetails?.archive_in} ${
                       currentProjectDetails?.archive_in === 1 ? "month" : "months"
                     }`}
-                    onChange={(val: number) => {
-                      handleChange({ archive_in: val });
-                    }}
+                    onChange={(val: number) => void handleChange({ archive_in: val })}
                     input
                     disabled={!isAdmin}
                   >
                     <>
                       {PROJECT_AUTOMATION_MONTHS.map((month) => (
                         <CustomSelect.Option key={month.i18n_label} value={month.value}>
-                          <span className="text-sm">{t(month.i18n_label, { months: month.value })}</span>
+                          <span className="text-13">{t(month.i18n_label, { months: month.value })}</span>
                         </CustomSelect.Option>
                       ))}
 
                       <button
                         type="button"
-                        className="flex w-full select-none items-center rounded px-1 py-1.5 text-sm text-custom-text-200 hover:bg-custom-background-80"
+                        className="flex w-full items-center rounded-sm px-1 py-1.5 text-13 text-secondary select-none hover:bg-layer-1"
                         onClick={() => setmonthModal(true)}
                       >
                         {t("common.customize_time_range")}
@@ -137,7 +118,7 @@ export const AutoArchiveAutomation = observer(function AutoArchiveAutomation(pro
             </div>
           )
         ) : (
-          <Loader className="mx-6">
+          <Loader className="ml-13">
             <Loader.Item height="50px" />
           </Loader>
         )}
diff --git a/apps/web/core/components/automation/auto-close-automation.tsx b/apps/web/core/components/automation/auto-close-automation.tsx
index 4b1928d55..48c7203ab 100644
--- a/apps/web/core/components/automation/auto-close-automation.tsx
+++ b/apps/web/core/components/automation/auto-close-automation.tsx
@@ -1,27 +1,22 @@
-import React, { useMemo, useState } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useMemo, useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
-// icons
 import { ArchiveX } from "lucide-react";
-// types
-import {
-  PROJECT_AUTOMATION_MONTHS,
-  EUserPermissions,
-  EUserPermissionsLevel,
-  EIconSize,
-  PROJECT_SETTINGS_TRACKER_ELEMENTS,
-  PROJECT_SETTINGS_TRACKER_EVENTS,
-} from "@plane/constants";
+// plane imports
+import { PROJECT_AUTOMATION_MONTHS, EUserPermissions, EUserPermissionsLevel, EIconSize } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { StateGroupIcon, StatePropertyIcon } from "@plane/propel/icons";
 import type { IProject } from "@plane/types";
-// ui
 import { CustomSelect, CustomSearchSelect, ToggleSwitch, Loader } from "@plane/ui";
-// component
 import { SelectMonthModal } from "@/components/automation";
-// constants
+import { SettingsControlItem } from "@/components/settings/control-item";
 // hooks
-import { captureElementAndEvent } from "@/helpers/event-tracker.helper";
 import { useProject } from "@/hooks/store/use-project";
 import { useProjectState } from "@/hooks/store/use-project-state";
 import { useUserPermissions } from "@/hooks/store/user";
@@ -90,48 +85,37 @@ export const AutoCloseAutomation = observer(function AutoCloseAutomation(props:
         handleClose={() => setmonthModal(false)}
         handleChange={handleChange}
       />
-      <div className="flex flex-col gap-4 py-6">
-        <div className="flex items-center justify-between">
-          <div className="flex items-start gap-3">
-            <div className="flex items-center justify-center rounded bg-custom-background-90 p-3">
-              <ArchiveX className="h-4 w-4 flex-shrink-0 text-red-500" />
-            </div>
-            <div className="">
-              <h4 className="text-sm font-medium">{t("project_settings.automations.auto-close.title")}</h4>
-              <p className="text-sm tracking-tight text-custom-text-200">
-                {t("project_settings.automations.auto-close.description")}
-              </p>
-            </div>
+      <div className="flex flex-col gap-4 py-2">
+        <div className="flex items-center gap-3">
+          <div className="grid size-10 shrink-0 place-items-center rounded-sm bg-layer-2">
+            <ArchiveX className="size-4 shrink-0 text-danger-primary" />
           </div>
-          <ToggleSwitch
-            value={autoCloseStatus}
-            onChange={async () => {
-              if (currentProjectDetails?.close_in === 0) {
-                await handleChange({ close_in: 1, default_state: defaultState });
-              } else {
-                await handleChange({ close_in: 0, default_state: null });
-              }
-              captureElementAndEvent({
-                element: {
-                  elementName: PROJECT_SETTINGS_TRACKER_ELEMENTS.AUTOMATIONS_CLOSE_TOGGLE_BUTTON,
-                },
-                event: {
-                  eventName: PROJECT_SETTINGS_TRACKER_EVENTS.auto_close_workitems,
-                  state: "SUCCESS",
-                },
-              });
-            }}
-            size="sm"
-            disabled={!isAdmin}
+          <SettingsControlItem
+            title={t("project_settings.automations.auto-close.title")}
+            description={t("project_settings.automations.auto-close.description")}
+            control={
+              <ToggleSwitch
+                value={autoCloseStatus}
+                onChange={() => {
+                  if (currentProjectDetails?.close_in === 0) {
+                    void handleChange({ close_in: 1, default_state: defaultState });
+                  } else {
+                    void handleChange({ close_in: 0, default_state: null });
+                  }
+                }}
+                size="sm"
+                disabled={!isAdmin}
+              />
+            }
           />
         </div>
 
         {currentProjectDetails ? (
           autoCloseStatus && (
-            <div className="mx-6">
-              <div className="flex flex-col rounded border border-custom-border-200 bg-custom-background-90">
+            <div className="ml-13">
+              <div className="flex flex-col rounded-sm border border-subtle bg-surface-2">
                 <div className="flex w-full items-center justify-between gap-2 px-5 py-4">
-                  <div className="w-1/2 text-sm font-medium">
+                  <div className="w-1/2 text-13 font-medium">
                     {t("project_settings.automations.auto-close.duration")}
                   </div>
                   <div className="w-1/2">
@@ -140,9 +124,7 @@ export const AutoCloseAutomation = observer(function AutoCloseAutomation(props:
                       label={`${currentProjectDetails?.close_in} ${
                         currentProjectDetails?.close_in === 1 ? "month" : "months"
                       }`}
-                      onChange={(val: number) => {
-                        handleChange({ close_in: val });
-                      }}
+                      onChange={(val: number) => void handleChange({ close_in: val })}
                       input
                       disabled={!isAdmin}
                     >
@@ -154,7 +136,7 @@ export const AutoCloseAutomation = observer(function AutoCloseAutomation(props:
                         ))}
                         <button
                           type="button"
-                          className="flex w-full select-none items-center rounded px-1 py-1.5 text-custom-text-200 hover:bg-custom-background-80"
+                          className="flex w-full items-center rounded-sm px-1 py-1.5 text-secondary select-none hover:bg-layer-1"
                           onClick={() => setmonthModal(true)}
                         >
                           {t("common.customize_time_range")}
@@ -164,11 +146,11 @@ export const AutoCloseAutomation = observer(function AutoCloseAutomation(props:
                   </div>
                 </div>
 
-                <div className="ppy sm:py-10 flex w-full items-center justify-between gap-2 px-5 py-4">
-                  <div className="w-1/2 text-sm font-medium">
+                <div className="ppy flex w-full items-center justify-between gap-2 px-5 py-4 sm:py-10">
+                  <div className="w-1/2 text-13 font-medium">
                     {t("project_settings.automations.auto-close.auto_close_status")}
                   </div>
-                  <div className="w-1/2 ">
+                  <div className="w-1/2">
                     <CustomSearchSelect
                       value={currentProjectDetails?.default_state ?? defaultState}
                       label={
@@ -186,16 +168,14 @@ export const AutoCloseAutomation = observer(function AutoCloseAutomation(props:
                               size={EIconSize.LG}
                             />
                           ) : (
-                            <StatePropertyIcon className="h-3.5 w-3.5 text-custom-text-200" />
+                            <StatePropertyIcon className="h-3.5 w-3.5 text-secondary" />
                           )}
                           {selectedOption?.name
                             ? selectedOption.name
-                            : (currentDefaultState?.name ?? <span className="text-custom-text-200">{t("state")}</span>)}
+                            : (currentDefaultState?.name ?? <span className="text-secondary">{t("state")}</span>)}
                         </div>
                       }
-                      onChange={(val: string) => {
-                        handleChange({ default_state: val });
-                      }}
+                      onChange={(val: string) => void handleChange({ default_state: val })}
                       options={options}
                       disabled={!multipleOptions}
                       input
@@ -206,7 +186,7 @@ export const AutoCloseAutomation = observer(function AutoCloseAutomation(props:
             </div>
           )
         ) : (
-          <Loader className="mx-6">
+          <Loader className="ml-13">
             <Loader.Item height="50px" />
           </Loader>
         )}
diff --git a/apps/web/core/components/automation/index.ts b/apps/web/core/components/automation/index.ts
index 73decae11..9f126cd0d 100644
--- a/apps/web/core/components/automation/index.ts
+++ b/apps/web/core/components/automation/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./auto-close-automation";
 export * from "./auto-archive-automation";
 export * from "./select-month-modal";
diff --git a/apps/web/core/components/automation/select-month-modal.tsx b/apps/web/core/components/automation/select-month-modal.tsx
index 5ca4d99c4..ed847676a 100644
--- a/apps/web/core/components/automation/select-month-modal.tsx
+++ b/apps/web/core/components/automation/select-month-modal.tsx
@@ -1,14 +1,16 @@
-import React from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useParams } from "next/navigation";
 // react-hook-form
 import { Controller, useForm } from "react-hook-form";
-// headless ui
-import { Dialog, Transition } from "@headlessui/react";
 import { Button } from "@plane/propel/button";
 import type { IProject } from "@plane/types";
 // ui
-import { Input } from "@plane/ui";
-// types
+import { Input, EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
 
 // types
 type Props = {
@@ -43,124 +45,92 @@ export function SelectMonthModal({ type, initialValues, isOpen, handleClose, han
   };
 
   return (
-    <Transition.Root show={isOpen} as={React.Fragment}>
-      <Dialog as="div" className="relative z-30" onClose={onClose}>
-        <Transition.Child
-          as={React.Fragment}
-          enter="ease-out duration-300"
-          enterFrom="opacity-0"
-          enterTo="opacity-100"
-          leave="ease-in duration-200"
-          leaveFrom="opacity-100"
-          leaveTo="opacity-0"
-        >
-          <div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
-        </Transition.Child>
-
-        <div className="fixed inset-0 z-10 overflow-y-auto">
-          <div className="flex min-h-full items-center justify-center p-4 text-center sm:p-0">
-            <Transition.Child
-              as={React.Fragment}
-              enter="ease-out duration-300"
-              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-              enterTo="opacity-100 translate-y-0 sm:scale-100"
-              leave="ease-in duration-200"
-              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-            >
-              <Dialog.Panel className="relative transform rounded-lg bg-custom-background-100 px-4 pb-4 pt-5 text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
-                <form onSubmit={handleSubmit(onSubmit)}>
-                  <div>
-                    <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-custom-text-100">
-                      Customize time range
-                    </Dialog.Title>
-                    <div className="mt-8 flex items-center gap-2">
-                      <div className="flex w-full flex-col justify-center gap-1">
-                        {type === "auto-close" ? (
-                          <>
-                            <Controller
-                              control={control}
-                              name="close_in"
-                              rules={{
-                                required: "Select a month between 1 and 12.",
-                                min: 1,
-                                max: 12,
-                              }}
-                              render={({ field: { value, onChange, ref } }) => (
-                                <div className="relative flex w-full flex-col justify-center gap-1">
-                                  <Input
-                                    id="close_in"
-                                    name="close_in"
-                                    type="number"
-                                    value={value?.toString()}
-                                    onChange={onChange}
-                                    ref={ref}
-                                    hasError={Boolean(errors.close_in)}
-                                    placeholder="Enter Months"
-                                    className="w-full border-custom-border-200"
-                                    min={1}
-                                    max={12}
-                                  />
-                                  <span className="absolute right-8 top-2.5 text-sm text-custom-text-200">Months</span>
-                                </div>
-                              )}
-                            />
-
-                            {errors.close_in && (
-                              <span className="px-1 text-sm text-red-500">Select a month between 1 and 12.</span>
-                            )}
-                          </>
-                        ) : (
-                          <>
-                            <Controller
-                              control={control}
-                              name="archive_in"
-                              rules={{
-                                required: "Select a month between 1 and 12.",
-                                min: 1,
-                                max: 12,
-                              }}
-                              render={({ field: { value, onChange, ref } }) => (
-                                <div className="relative flex w-full flex-col justify-center gap-1">
-                                  <Input
-                                    id="archive_in"
-                                    name="archive_in"
-                                    type="number"
-                                    value={value?.toString()}
-                                    onChange={onChange}
-                                    ref={ref}
-                                    hasError={Boolean(errors.archive_in)}
-                                    placeholder="Enter Months"
-                                    className="w-full border-custom-border-200"
-                                    min={1}
-                                    max={12}
-                                  />
-                                  <span className="absolute right-8 top-2.5 text-sm text-custom-text-200">Months</span>
-                                </div>
-                              )}
-                            />
-                            {errors.archive_in && (
-                              <span className="px-1 text-sm text-red-500">Select a month between 1 and 12.</span>
-                            )}
-                          </>
-                        )}
+    <ModalCore isOpen={isOpen} handleClose={onClose} position={EModalPosition.CENTER} width={EModalWidth.XXL}>
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <div>
+          <h3 className="text-16 leading-6 font-medium text-primary">Customize time range</h3>
+          <div className="mt-8 flex items-center gap-2">
+            <div className="flex w-full flex-col justify-center gap-1">
+              {type === "auto-close" ? (
+                <>
+                  <Controller
+                    control={control}
+                    name="close_in"
+                    rules={{
+                      required: "Select a month between 1 and 12.",
+                      min: 1,
+                      max: 12,
+                    }}
+                    render={({ field: { value, onChange, ref } }) => (
+                      <div className="relative flex w-full flex-col justify-center gap-1">
+                        <Input
+                          id="close_in"
+                          name="close_in"
+                          type="number"
+                          value={value?.toString()}
+                          onChange={onChange}
+                          ref={ref}
+                          hasError={Boolean(errors.close_in)}
+                          placeholder="Enter Months"
+                          className="w-full border-subtle"
+                          min={1}
+                          max={12}
+                        />
+                        <span className="absolute top-2.5 right-8 text-13 text-secondary">Months</span>
                       </div>
-                    </div>
-                  </div>
-                  <div className="mt-5 flex justify-end gap-2">
-                    <Button variant="neutral-primary" size="sm" onClick={onClose}>
-                      Cancel
-                    </Button>
-                    <Button variant="primary" size="sm" type="submit" loading={isSubmitting}>
-                      {isSubmitting ? "Submitting..." : "Submit"}
-                    </Button>
-                  </div>
-                </form>
-              </Dialog.Panel>
-            </Transition.Child>
+                    )}
+                  />
+
+                  {errors.close_in && (
+                    <span className="px-1 text-13 text-danger-primary">Select a month between 1 and 12.</span>
+                  )}
+                </>
+              ) : (
+                <>
+                  <Controller
+                    control={control}
+                    name="archive_in"
+                    rules={{
+                      required: "Select a month between 1 and 12.",
+                      min: 1,
+                      max: 12,
+                    }}
+                    render={({ field: { value, onChange, ref } }) => (
+                      <div className="relative flex w-full flex-col justify-center gap-1">
+                        <Input
+                          id="archive_in"
+                          name="archive_in"
+                          type="number"
+                          value={value?.toString()}
+                          onChange={onChange}
+                          ref={ref}
+                          hasError={Boolean(errors.archive_in)}
+                          placeholder="Enter Months"
+                          className="w-full border-subtle"
+                          min={1}
+                          max={12}
+                        />
+                        <span className="absolute top-2.5 right-8 text-13 text-secondary">Months</span>
+                      </div>
+                    )}
+                  />
+                  {errors.archive_in && (
+                    <span className="px-1 text-13 text-danger-primary">Select a month between 1 and 12.</span>
+                  )}
+                </>
+              )}
+            </div>
           </div>
         </div>
-      </Dialog>
-    </Transition.Root>
+        <div className="mt-5 flex justify-end gap-2">
+          <Button variant="secondary" size="lg" onClick={onClose}>
+            Cancel
+          </Button>
+          <Button variant="primary" size="lg" type="submit" loading={isSubmitting}>
+            {isSubmitting ? "Submitting..." : "Submit"}
+          </Button>
+        </div>
+      </form>
+    </ModalCore>
   );
 }
diff --git a/apps/web/core/components/base-layouts/constants.ts b/apps/web/core/components/base-layouts/constants.ts
index 943d23c7f..496596373 100644
--- a/apps/web/core/components/base-layouts/constants.ts
+++ b/apps/web/core/components/base-layouts/constants.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { BoardLayoutIcon, ListLayoutIcon, TimelineLayoutIcon } from "@plane/propel/icons";
 import type { IBaseLayoutConfig } from "@plane/types";
 
diff --git a/apps/web/core/components/base-layouts/gantt/index.ts b/apps/web/core/components/base-layouts/gantt/index.ts
index 9f4e2dafb..d7b4e143b 100644
--- a/apps/web/core/components/base-layouts/gantt/index.ts
+++ b/apps/web/core/components/base-layouts/gantt/index.ts
@@ -1,2 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export { BaseGanttLayout } from "./layout";
 export { BaseGanttSidebar } from "./sidebar";
diff --git a/apps/web/core/components/base-layouts/gantt/layout.tsx b/apps/web/core/components/base-layouts/gantt/layout.tsx
index b21510c46..17fa2fc8d 100644
--- a/apps/web/core/components/base-layouts/gantt/layout.tsx
+++ b/apps/web/core/components/base-layouts/gantt/layout.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useCallback, useMemo } from "react";
 import { observer } from "mobx-react";
 import { GANTT_TIMELINE_TYPE } from "@plane/types";
diff --git a/apps/web/core/components/base-layouts/gantt/sidebar.tsx b/apps/web/core/components/base-layouts/gantt/sidebar.tsx
index cbcecba62..4b125d680 100644
--- a/apps/web/core/components/base-layouts/gantt/sidebar.tsx
+++ b/apps/web/core/components/base-layouts/gantt/sidebar.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { RefObject } from "react";
 import { useState } from "react";
 import { observer } from "mobx-react";
@@ -96,15 +102,18 @@ export const BaseGanttSidebar = observer(function BaseGanttSidebar<T extends IBa
                     return (
                       <div
                         className={cn("group/list-block", {
-                          "rounded bg-custom-background-80": isDragging,
+                          "rounded-sm bg-layer-1": isDragging,
                         })}
                         onMouseEnter={() => updateActiveBlockId(blockId)}
                         onMouseLeave={() => updateActiveBlockId(null)}
                       >
                         <Row
-                          className={cn("group w-full flex items-center gap-2 pr-4", {
-                            "bg-custom-background-90": isBlockHoveredOn,
-                          })}
+                          className={cn(
+                            "group flex w-full items-center gap-2 bg-layer-transparent pr-4 hover:bg-layer-transparent-hover",
+                            {
+                              "bg-layer-transparent-hover": isBlockHoveredOn,
+                            }
+                          )}
                           style={{
                             height: `${BLOCK_HEIGHT}px`,
                           }}
@@ -112,7 +121,7 @@ export const BaseGanttSidebar = observer(function BaseGanttSidebar<T extends IBa
                           <div className="flex h-full flex-grow items-center justify-between gap-2 truncate">
                             <div className="flex-grow truncate">{renderItem(item)}</div>
                             {duration && (
-                              <div className="flex-shrink-0 text-sm text-custom-text-200">
+                              <div className="flex-shrink-0 text-13 text-secondary">
                                 <span>
                                   {duration} day{duration > 1 ? "s" : ""}
                                 </span>
@@ -129,7 +138,7 @@ export const BaseGanttSidebar = observer(function BaseGanttSidebar<T extends IBa
           })}
           {canLoadMoreBlocks && (
             <div ref={setIntersectionElement} className="p-2">
-              <div className="flex h-10 md:h-8 w-full items-center justify-between gap-1.5 rounded md:px-1 px-4 py-1.5 bg-custom-background-80 animate-pulse" />
+              <div className="flex h-10 w-full animate-pulse items-center justify-between gap-1.5 rounded-sm bg-layer-1 px-4 py-1.5 md:h-8 md:px-1" />
             </div>
           )}
         </>
diff --git a/apps/web/core/components/base-layouts/hooks/use-group-drop-target.ts b/apps/web/core/components/base-layouts/hooks/use-group-drop-target.ts
index 5fa232092..a28f344a9 100644
--- a/apps/web/core/components/base-layouts/hooks/use-group-drop-target.ts
+++ b/apps/web/core/components/base-layouts/hooks/use-group-drop-target.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useEffect, useRef, useState } from "react";
 import { dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
 
diff --git a/apps/web/core/components/base-layouts/hooks/use-layout-state.ts b/apps/web/core/components/base-layouts/hooks/use-layout-state.ts
index 8d8bc75b2..0aba3edd3 100644
--- a/apps/web/core/components/base-layouts/hooks/use-layout-state.ts
+++ b/apps/web/core/components/base-layouts/hooks/use-layout-state.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useEffect, useRef, useState, useCallback } from "react";
 import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
 import { autoScrollForElements } from "@atlaskit/pragmatic-drag-and-drop-auto-scroll/element";
diff --git a/apps/web/core/components/base-layouts/kanban/group-header.tsx b/apps/web/core/components/base-layouts/kanban/group-header.tsx
index c678839bc..9d69bd22c 100644
--- a/apps/web/core/components/base-layouts/kanban/group-header.tsx
+++ b/apps/web/core/components/base-layouts/kanban/group-header.tsx
@@ -1,16 +1,22 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { IGroupHeaderProps } from "@plane/types";
 
 export function GroupHeader({ group, itemCount, onToggleGroup }: IGroupHeaderProps) {
   return (
     <button
       onClick={() => onToggleGroup(group.id)}
-      className="flex w-full items-center gap-2 text-sm font-medium text-custom-text-200"
+      className="flex w-full items-center gap-2 text-13 font-medium text-secondary"
     >
       <div className="flex items-center gap-2">
         {group.icon}
         <span>{group.name}</span>
       </div>
-      <span className="text-xs text-custom-text-300">{itemCount}</span>
+      <span className="text-11 text-tertiary">{itemCount}</span>
     </button>
   );
 }
diff --git a/apps/web/core/components/base-layouts/kanban/group.tsx b/apps/web/core/components/base-layouts/kanban/group.tsx
index a82849bd9..691d8f6c4 100644
--- a/apps/web/core/components/base-layouts/kanban/group.tsx
+++ b/apps/web/core/components/base-layouts/kanban/group.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import { useTranslation } from "@plane/i18n";
 import type { IBaseLayoutsKanbanItem, IBaseLayoutsKanbanGroupProps } from "@plane/types";
@@ -35,15 +41,15 @@ export const BaseKanbanGroup = observer(function BaseKanbanGroup<T extends IBase
     <div
       ref={groupRef}
       className={cn(
-        "relative flex flex-shrink-0 flex-col w-[350px] border-[1px] border-transparent p-2 pt-0 max-h-full overflow-y-auto bg-custom-background-90 rounded-md",
+        "relative flex max-h-full w-[350px] flex-shrink-0 flex-col overflow-y-auto rounded-md border-[1px] border-transparent bg-layer-1 p-2 pt-0",
         {
-          "bg-custom-background-80": isDraggingOver,
+          "bg-layer-1": isDraggingOver,
         },
         groupClassName
       )}
     >
       {/* Group Header */}
-      <div className="sticky top-0 z-[2] w-full flex-shrink-0 bg-custom-background-90 px-1 py-2 cursor-pointer">
+      <div className="sticky top-0 z-[2] w-full flex-shrink-0 cursor-pointer px-1 py-2">
         {renderGroupHeader ? (
           renderGroupHeader({ group, itemCount: itemIds.length, isCollapsed, onToggleGroup })
         ) : (
@@ -79,7 +85,7 @@ export const BaseKanbanGroup = observer(function BaseKanbanGroup<T extends IBase
           })}
 
           {itemIds.length === 0 && (
-            <div className="flex items-center justify-center py-8 text-sm text-custom-text-300">
+            <div className="flex items-center justify-center py-8 text-13 text-tertiary">
               {t("common.no_items_in_this_group")}
             </div>
           )}
@@ -87,8 +93,8 @@ export const BaseKanbanGroup = observer(function BaseKanbanGroup<T extends IBase
       )}
 
       {isDraggingOver && enableDragDrop && (
-        <div className="absolute top-0 left-0 h-full w-full flex items-center justify-center text-sm font-medium text-custom-text-300 rounded bg-custom-background-80/85 border-[1px] border-custom-border-300 z-[2]">
-          <div className="p-3 my-8 flex flex-col rounded items-center text-custom-text-200">
+        <div className="absolute top-0 left-0 z-[2] flex h-full w-full items-center justify-center rounded-sm border-[1px] border-strong bg-layer-1/85 text-13 font-medium text-tertiary">
+          <div className="my-8 flex flex-col items-center rounded-sm p-3 text-secondary">
             {t("common.drop_here_to_move")}
           </div>
         </div>
diff --git a/apps/web/core/components/base-layouts/kanban/item.tsx b/apps/web/core/components/base-layouts/kanban/item.tsx
index 1bc560943..648d5cd3e 100644
--- a/apps/web/core/components/base-layouts/kanban/item.tsx
+++ b/apps/web/core/components/base-layouts/kanban/item.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useEffect, useRef } from "react";
 import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
 import { draggable, dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
diff --git a/apps/web/core/components/base-layouts/kanban/layout.tsx b/apps/web/core/components/base-layouts/kanban/layout.tsx
index 1006eb10b..ffa0c2d73 100644
--- a/apps/web/core/components/base-layouts/kanban/layout.tsx
+++ b/apps/web/core/components/base-layouts/kanban/layout.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import type { IBaseLayoutsKanbanItem, IBaseLayoutsKanbanProps } from "@plane/types";
 import { cn } from "@plane/utils";
@@ -38,7 +44,7 @@ export const BaseKanbanLayout = observer(function BaseKanbanLayout<T extends IBa
   );
 
   return (
-    <div ref={containerRef} className={cn("relative w-full flex gap-2 p-3 h-full overflow-x-auto", className)}>
+    <div ref={containerRef} className={cn("relative flex h-full w-full gap-2 overflow-x-auto p-3", className)}>
       {groups.map((group) => {
         const itemIds = groupedItemIds[group.id] || [];
         const isCollapsed = collapsedGroups.includes(group.id);
diff --git a/apps/web/core/components/base-layouts/layout-switcher.tsx b/apps/web/core/components/base-layouts/layout-switcher.tsx
index 154d22659..0ee433f97 100644
--- a/apps/web/core/components/base-layouts/layout-switcher.tsx
+++ b/apps/web/core/components/base-layouts/layout-switcher.tsx
@@ -1,6 +1,13 @@
-import React from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useTranslation } from "@plane/i18n";
 import { Tooltip } from "@plane/propel/tooltip";
 import type { TBaseLayoutType } from "@plane/types";
+import { cn } from "@plane/utils";
 import { usePlatformOS } from "@/hooks/use-platform-os";
 import { BASE_LAYOUTS } from "./constants";
 
@@ -13,6 +20,7 @@ type Props = {
 export function LayoutSwitcher(props: Props) {
   const { layouts, onChange, selectedLayout } = props;
   const { isMobile } = usePlatformOS();
+  const { t } = useTranslation();
 
   const handleOnChange = (layoutKey: TBaseLayoutType) => {
     if (selectedLayout !== layoutKey) {
@@ -21,23 +29,29 @@ export function LayoutSwitcher(props: Props) {
   };
 
   return (
-    <div className="flex items-center gap-1 rounded bg-custom-background-80 p-1">
+    <div className="flex items-center gap-1 rounded-md bg-layer-3 p-1">
       {BASE_LAYOUTS.filter((l) => (layouts ? layouts.includes(l.key) : true)).map((layout) => {
         const Icon = layout.icon;
         return (
-          <Tooltip key={layout.key} tooltipContent={layout.label} isMobile={isMobile}>
+          <Tooltip key={layout.key} tooltipContent={t(layout.label)} isMobile={isMobile}>
             <button
               type="button"
-              className={`group grid h-[22px] w-7 place-items-center overflow-hidden rounded transition-all hover:bg-custom-background-100 ${
-                selectedLayout === layout.key ? "bg-custom-background-100 shadow-custom-shadow-2xs" : ""
-              }`}
+              className={cn(
+                "group grid h-5.5 w-7 place-items-center overflow-hidden rounded-sm transition-all hover:bg-layer-transparent-hover",
+                {
+                  "bg-layer-transparent-active hover:bg-layer-transparent-active": selectedLayout === layout.key,
+                }
+              )}
               onClick={() => handleOnChange(layout.key)}
             >
               <Icon
+                width={14}
+                height={14}
                 strokeWidth={2}
-                className={`h-3.5 w-3.5 ${
-                  selectedLayout === layout.key ? "text-custom-text-100" : "text-custom-text-200"
-                }`}
+                className={cn("size-3.5", {
+                  "text-primary": selectedLayout === layout.key,
+                  "text-secondary": selectedLayout !== layout.key,
+                })}
               />
             </button>
           </Tooltip>
diff --git a/apps/web/core/components/base-layouts/list/group-header.tsx b/apps/web/core/components/base-layouts/list/group-header.tsx
index 916958293..d26f8322e 100644
--- a/apps/web/core/components/base-layouts/list/group-header.tsx
+++ b/apps/web/core/components/base-layouts/list/group-header.tsx
@@ -1,14 +1,20 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { IGroupHeaderProps } from "@plane/types";
 
 export function GroupHeader({ group, itemCount, onToggleGroup }: IGroupHeaderProps) {
   return (
     <button
       onClick={() => onToggleGroup(group.id)}
-      className="flex w-full items-center gap-2 py-2 text-sm font-medium text-custom-text-200"
+      className="flex w-full items-center gap-2 py-2 text-13 font-medium text-secondary"
     >
       {group.icon}
       <span>{group.name}</span>
-      <span className="text-xs text-custom-text-300">{itemCount}</span>
+      <span className="text-11 text-tertiary">{itemCount}</span>
     </button>
   );
 }
diff --git a/apps/web/core/components/base-layouts/list/group.tsx b/apps/web/core/components/base-layouts/list/group.tsx
index 769e14c65..a11ae4a77 100644
--- a/apps/web/core/components/base-layouts/list/group.tsx
+++ b/apps/web/core/components/base-layouts/list/group.tsx
@@ -1,7 +1,13 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import { useTranslation } from "@plane/i18n";
 import type { IBaseLayoutsListItem, IBaseLayoutsListGroupProps } from "@plane/types";
-import { cn, Row } from "@plane/ui";
+import { cn } from "@plane/ui";
 import { useGroupDropTarget } from "../hooks/use-group-drop-target";
 import { GroupHeader } from "./group-header";
 import { BaseListItem } from "./item";
@@ -33,12 +39,12 @@ export const BaseListGroup = observer(function BaseListGroup<T extends IBaseLayo
   return (
     <div
       ref={groupRef}
-      className={cn("relative flex flex-shrink-0 flex-col border-[1px] border-transparent", {
-        "bg-custom-background-80": isDraggingOver,
+      className={cn("relative flex flex-shrink-0 flex-col", {
+        "bg-layer-1": isDraggingOver,
       })}
     >
       {/* Group Header */}
-      <Row className="sticky top-0 z-[2] w-full flex-shrink-0 border-b border-custom-border-200 bg-custom-background-90 py-1">
+      <div className="sticky top-0 z-10 w-full shrink-0 cursor-pointer border-b border-subtle bg-layer-1 px-6 py-1 hover:bg-layer-1-hover">
         {renderGroupHeader ? (
           renderGroupHeader({ group, itemCount: itemIds.length, isCollapsed, onToggleGroup })
         ) : (
@@ -49,7 +55,7 @@ export const BaseListGroup = observer(function BaseListGroup<T extends IBaseLayo
             onToggleGroup={onToggleGroup}
           />
         )}
-      </Row>
+      </div>
 
       {/* Group Items */}
       {!isCollapsed && (
@@ -76,8 +82,8 @@ export const BaseListGroup = observer(function BaseListGroup<T extends IBaseLayo
       )}
 
       {isDraggingOver && enableDragDrop && (
-        <div className="absolute top-0 left-0 h-full w-full flex items-center justify-center text-sm font-medium text-custom-text-300 rounded bg-custom-background-80/85 border-[1px] border-custom-border-300 z-[2]">
-          <div className="p-3 my-8 flex flex-col rounded items-center text-custom-text-200">
+        <div className="absolute top-0 left-0 z-[2] flex h-full w-full items-center justify-center rounded-sm border-[1px] border-strong bg-layer-1/85 text-13 font-medium text-tertiary">
+          <div className="my-8 flex flex-col items-center rounded-sm p-3 text-secondary">
             {t("common.drop_here_to_move")}
           </div>
         </div>
diff --git a/apps/web/core/components/base-layouts/list/item.tsx b/apps/web/core/components/base-layouts/list/item.tsx
index 22f808b8c..759b75b1c 100644
--- a/apps/web/core/components/base-layouts/list/item.tsx
+++ b/apps/web/core/components/base-layouts/list/item.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useEffect, useRef } from "react";
 import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
 import { draggable, dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
diff --git a/apps/web/core/components/base-layouts/list/layout.tsx b/apps/web/core/components/base-layouts/list/layout.tsx
index 4b065d3e0..288d356f9 100644
--- a/apps/web/core/components/base-layouts/list/layout.tsx
+++ b/apps/web/core/components/base-layouts/list/layout.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import type { IBaseLayoutsListItem, IBaseLayoutsListProps } from "@plane/types";
 import { cn } from "@plane/ui";
@@ -37,8 +43,8 @@ export const BaseListLayout = observer(function BaseListLayout<T extends IBaseLa
   );
 
   return (
-    <div ref={containerRef} className={cn("relative size-full overflow-auto bg-custom-background-90", className)}>
-      <div className="relative size-full flex flex-col">
+    <div ref={containerRef} className={cn("relative size-full overflow-auto bg-surface-1", className)}>
+      <div className="relative flex size-full flex-col">
         {groups.map((group) => {
           const itemIds = groupedItemIds[group.id] || [];
           const isCollapsed = collapsedGroups.includes(group.id);
diff --git a/apps/web/core/components/base-layouts/loaders/layout-loader.tsx b/apps/web/core/components/base-layouts/loaders/layout-loader.tsx
index 894c8cafd..177c3027f 100644
--- a/apps/web/core/components/base-layouts/loaders/layout-loader.tsx
+++ b/apps/web/core/components/base-layouts/loaders/layout-loader.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { TBaseLayoutType } from "@plane/types";
 import { KanbanLayoutLoader } from "@/components/ui/loader/layouts/kanban-layout-loader";
 import { ListLayoutLoader } from "@/components/ui/loader/layouts/list-layout-loader";
diff --git a/apps/web/core/components/chart/utils.ts b/apps/web/core/components/chart/utils.ts
index 7bd8c4120..e7055a96d 100644
--- a/apps/web/core/components/chart/utils.ts
+++ b/apps/web/core/components/chart/utils.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { getWeekOfMonth, isValid } from "date-fns";
 import { CHART_X_AXIS_DATE_PROPERTIES, ChartXAxisDateGrouping, TO_CAPITALIZE_PROPERTIES } from "@plane/constants";
 import type { ChartXAxisProperty, TChart, TChartDatum } from "@plane/types";
diff --git a/apps/web/core/components/comments/card/display.tsx b/apps/web/core/components/comments/card/display.tsx
index 1fc081bf6..213ee3e6e 100644
--- a/apps/web/core/components/comments/card/display.tsx
+++ b/apps/web/core/components/comments/card/display.tsx
@@ -1,30 +1,46 @@
-import { useEffect, useState } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { ReactNode } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { observer } from "mobx-react";
 import { usePathname } from "next/navigation";
-import { Globe2, Lock } from "lucide-react";
 // plane imports
 import type { EditorRefApi } from "@plane/editor";
 import { useHashScroll } from "@plane/hooks";
+import { GlobeIcon, LockIcon } from "@plane/propel/icons";
 import { EIssueCommentAccessSpecifier } from "@plane/types";
 import type { TCommentsOperations, TIssueComment } from "@plane/types";
-import { cn } from "@plane/utils";
+import { calculateTimeAgo, cn, getFileURL, renderFormattedDate, renderFormattedTime } from "@plane/utils";
 // components
 import { LiteTextEditor } from "@/components/editor/lite-text";
 // local imports
 import { CommentReactions } from "../comment-reaction";
+import { CommentCardEditForm } from "./edit-form";
+import { EmojiReactionButton, EmojiReactionPicker } from "@plane/propel/emoji-reaction";
+import { Avatar, Tooltip } from "@plane/ui";
+import { useMember } from "@/hooks/store/use-member";
 
-type Props = {
+export type TCommentCardDisplayProps = {
   activityOperations: TCommentsOperations;
   comment: TIssueComment;
   disabled: boolean;
+  entityId: string;
   projectId?: string;
   readOnlyEditorRef: React.RefObject<EditorRefApi>;
   showAccessSpecifier: boolean;
   workspaceId: string;
   workspaceSlug: string;
+  isEditing?: boolean;
+  setIsEditing?: (isEditing: boolean) => void;
+  renderFooter?: (ReactionsComponent: ReactNode | null) => ReactNode;
+  renderQuickActions?: () => ReactNode;
 };
 
-export const CommentCardDisplay = observer(function CommentCardDisplay(props: Props) {
+export const CommentCardDisplay = observer(function CommentCardDisplay(props: TCommentCardDisplayProps) {
   const {
     activityOperations,
     comment,
@@ -34,13 +50,34 @@ export const CommentCardDisplay = observer(function CommentCardDisplay(props: Pr
     showAccessSpecifier,
     workspaceId,
     workspaceSlug,
+    isEditing = false,
+    setIsEditing,
+    renderFooter,
+    renderQuickActions,
   } = props;
   // states
   const [highlightClassName, setHighlightClassName] = useState("");
+  // state
+  const [isPickerOpen, setIsPickerOpen] = useState(false);
+  // store hooks
+  const { getUserDetails } = useMember();
+  // derived values
+  const userDetails = getUserDetails(comment?.actor);
+  const displayName = comment?.actor_detail?.is_bot
+    ? comment?.actor_detail?.first_name + `Bot`
+    : (userDetails?.display_name ?? comment?.actor_detail?.display_name);
+  const avatarUrl = userDetails?.avatar_url ?? comment?.actor_detail?.avatar_url;
+
+  const userReactions = activityOperations.userReactions(comment.id);
+
   // navigation
   const pathname = usePathname();
   // derived values
   const commentBlockId = `comment-${comment?.id}`;
+  // Check if there are any reactions to determine if we should render the footer
+  const reactionIds = activityOperations.reactionIds(comment.id);
+  const hasReactions = reactionIds && Object.keys(reactionIds).some((key) => reactionIds[key]?.length > 0);
+
   // scroll to comment
   const { isHashMatch } = useHashScroll({
     elementId: commentBlockId,
@@ -49,7 +86,7 @@ export const CommentCardDisplay = observer(function CommentCardDisplay(props: Pr
 
   useEffect(() => {
     if (!isHashMatch) return;
-    setHighlightClassName("border-custom-primary-100");
+    setHighlightClassName("border-accent-strong");
     const timeout = setTimeout(() => {
       setHighlightClassName("");
     }, 8000);
@@ -57,31 +94,96 @@ export const CommentCardDisplay = observer(function CommentCardDisplay(props: Pr
     return () => clearTimeout(timeout);
   }, [isHashMatch]);
 
+  const handleEmojiSelect = useCallback(
+    (emoji: string) => {
+      if (!userReactions) return;
+      // emoji is already in decimal string format from EmojiReactionPicker
+      void activityOperations.react(comment.id, emoji, userReactions);
+    },
+    [activityOperations, comment.id, userReactions]
+  );
+
+  const shouldRenderReactions = hasReactions && !disabled;
+
   return (
     <div id={commentBlockId} className="relative flex flex-col gap-2">
       {showAccessSpecifier && (
-        <div className="absolute right-2.5 top-2.5 z-[1] text-custom-text-300">
+        <div className="absolute top-2.5 right-2.5 z-[1] text-tertiary">
           {comment.access === EIssueCommentAccessSpecifier.INTERNAL ? (
-            <Lock className="size-3" />
+            <LockIcon className="size-3" />
           ) : (
-            <Globe2 className="size-3" />
+            <GlobeIcon className="size-3" />
           )}
         </div>
       )}
-      <LiteTextEditor
-        editable={false}
-        ref={readOnlyEditorRef}
-        id={comment.id}
-        initialValue={comment.comment_html ?? ""}
-        workspaceId={workspaceId}
-        workspaceSlug={workspaceSlug}
-        containerClassName={cn("!py-1 transition-[border-color] duration-500", highlightClassName)}
-        projectId={projectId?.toString()}
-        displayConfig={{
-          fontSize: "small-font",
-        }}
-      />
-      <CommentReactions comment={comment} disabled={disabled} activityOperations={activityOperations} />
+      <div className="relative mb-3 flex w-full items-center gap-2">
+        <Avatar size="sm" name={displayName} src={getFileURL(avatarUrl)} className="shrink-0" />
+        <div className="flex flex-1 flex-wrap items-center gap-1">
+          <div className="text-caption-sm-medium">{displayName}</div>
+          <div className="text-caption-sm-regular text-tertiary">
+            commented{" "}
+            <Tooltip
+              tooltipContent={`${renderFormattedDate(comment.created_at)} at ${renderFormattedTime(comment.created_at)}`}
+              position="bottom"
+            >
+              <span className="text-tertiary">
+                {calculateTimeAgo(comment.created_at)}
+                {comment.edited_at && " (edited)"}
+              </span>
+            </Tooltip>
+          </div>
+        </div>
+        {!disabled && (
+          <div className="flex shrink-0 items-center gap-1">
+            <EmojiReactionPicker
+              isOpen={isPickerOpen}
+              handleToggle={setIsPickerOpen}
+              onChange={handleEmojiSelect}
+              disabled={disabled}
+              label={<EmojiReactionButton onAddReaction={() => setIsPickerOpen(true)} />}
+              placement="bottom-start"
+            />
+            {renderQuickActions ? renderQuickActions() : null}
+          </div>
+        )}
+      </div>
+      {isEditing && setIsEditing ? (
+        <CommentCardEditForm
+          activityOperations={activityOperations}
+          comment={comment}
+          isEditing={isEditing}
+          readOnlyEditorRef={readOnlyEditorRef.current}
+          setIsEditing={setIsEditing}
+          projectId={projectId}
+          workspaceId={workspaceId}
+          workspaceSlug={workspaceSlug}
+        />
+      ) : (
+        <>
+          <LiteTextEditor
+            editable={false}
+            ref={readOnlyEditorRef}
+            id={comment.id}
+            initialValue={comment.comment_html ?? ""}
+            workspaceId={workspaceId}
+            workspaceSlug={workspaceSlug}
+            containerClassName={cn("!py-1 transition-[border-color] duration-500", highlightClassName)}
+            projectId={projectId?.toString()}
+            displayConfig={{
+              fontSize: "small-font",
+            }}
+            parentClassName="border-none"
+          />
+          {shouldRenderReactions &&
+            (renderFooter ? (
+              renderFooter(
+                <CommentReactions comment={comment} disabled={disabled} activityOperations={activityOperations} />
+              )
+            ) : (
+              <CommentReactions comment={comment} disabled={disabled} activityOperations={activityOperations} />
+            ))}
+        </>
+      )}
     </div>
   );
 });
diff --git a/apps/web/core/components/comments/card/edit-form.tsx b/apps/web/core/components/comments/card/edit-form.tsx
index ca0be549c..9be8b1355 100644
--- a/apps/web/core/components/comments/card/edit-form.tsx
+++ b/apps/web/core/components/comments/card/edit-form.tsx
@@ -1,12 +1,17 @@
-import React, { useEffect, useRef } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useEffect, useRef } from "react";
 import { observer } from "mobx-react";
 import { useForm } from "react-hook-form";
-import { Check } from "lucide-react";
 import type { EditorRefApi } from "@plane/editor";
-import { CloseIcon } from "@plane/propel/icons";
+import { CheckIcon, CloseIcon } from "@plane/propel/icons";
 // plane imports
 import type { TCommentsOperations, TIssueComment } from "@plane/types";
-import { isCommentEmpty } from "@plane/utils";
+import { cn, isCommentEmpty } from "@plane/utils";
 // components
 import { LiteTextEditor } from "@/components/editor/lite-text";
 
@@ -46,7 +51,7 @@ export const CommentCardEditForm = observer(function CommentCardEditForm(props:
   });
   const commentHTML = watch("comment_html");
 
-  const isEmpty = isCommentEmpty(commentHTML ?? undefined);
+  const isEmpty = isCommentEmpty(commentHTML);
   const isEditorReadyToDiscard = editorRef.current?.isEditorReadyToDiscard();
   const isSubmitButtonDisabled = isSubmitting || !isEditorReadyToDiscard;
   const isDisabled = isSubmitting || isEmpty || isSubmitButtonDisabled;
@@ -99,36 +104,39 @@ export const CommentCardEditForm = observer(function CommentCardEditForm(props:
             return asset_id;
           }}
           projectId={projectId}
-          parentClassName="p-2"
+          parentClassName="p-2 bg-surface-1"
           displayConfig={{
             fontSize: "small-font",
           }}
         />
       </div>
-      <div className="flex gap-1 self-end">
+      <div className="flex gap-2 self-end">
         {!isEmpty && (
           <button
             type="button"
             onClick={handleSubmit(onEnter)}
             disabled={isDisabled}
-            className={`group rounded border border-green-500 bg-green-500/20 p-2 shadow-md duration-300  ${
-              isEmpty ? "cursor-not-allowed bg-gray-200" : "hover:bg-green-500"
-            }`}
+            className={cn(
+              "group grid size-7 place-items-center rounded-lg border border-success-subtle bg-success-subtle shadow-raised-100 duration-300",
+              isDisabled ? "" : "hover:bg-success-subtle-1"
+            )}
           >
-            <Check
-              className={`h-3 w-3 text-green-500 duration-300 ${isEmpty ? "text-black" : "group-hover:text-white"}`}
-            />
+            <CheckIcon className="size-4 text-success-primary" />
           </button>
         )}
         <button
           type="button"
-          className="group rounded border border-red-500 bg-red-500/20 p-2 shadow-md duration-300 hover:bg-red-500"
+          disabled={isSubmitting}
+          className={cn(
+            "group grid size-7 place-items-center rounded-lg border border-danger-subtle bg-danger-subtle shadow-raised-100 duration-300",
+            isSubmitting ? "" : "hover:bg-danger-subtle-hover"
+          )}
           onClick={() => {
             setIsEditing(false);
             editorRef.current?.setEditorValue(comment.comment_html ?? "<p></p>");
           }}
         >
-          <CloseIcon className="size-3 text-red-500 duration-300 group-hover:text-white" />
+          <CloseIcon className="size-4 text-danger-primary" />
         </button>
       </div>
     </form>
diff --git a/apps/web/core/components/comments/card/root.tsx b/apps/web/core/components/comments/card/root.tsx
index f19f9920b..006a365dd 100644
--- a/apps/web/core/components/comments/card/root.tsx
+++ b/apps/web/core/components/comments/card/root.tsx
@@ -1,23 +1,28 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useRef, useState } from "react";
 import { observer } from "mobx-react";
 // plane imports
 import type { EditorRefApi } from "@plane/editor";
 import type { TIssueComment, TCommentsOperations } from "@plane/types";
 // plane web imports
-import { CommentBlock } from "@/plane-web/components/comments";
+import { CommentBlock, CommentCardDisplay } from "@/plane-web/components/comments";
 // local imports
 import { CommentQuickActions } from "../quick-actions";
-import { CommentCardDisplay } from "./display";
-import { CommentCardEditForm } from "./edit-form";
 
 type TCommentCard = {
   workspaceSlug: string;
+  entityId: string;
   comment: TIssueComment | undefined;
   activityOperations: TCommentsOperations;
   ends: "top" | "bottom" | undefined;
   showAccessSpecifier: boolean;
   showCopyLinkOption: boolean;
+  enableReplies: boolean;
   disabled?: boolean;
   projectId?: string;
 };
@@ -25,6 +30,7 @@ type TCommentCard = {
 export const CommentCard = observer(function CommentCard(props: TCommentCard) {
   const {
     workspaceSlug,
+    entityId,
     comment,
     activityOperations,
     ends,
@@ -43,10 +49,20 @@ export const CommentCard = observer(function CommentCard(props: TCommentCard) {
   if (!comment || !workspaceId) return null;
 
   return (
-    <CommentBlock
-      comment={comment}
-      quickActions={
-        !disabled && (
+    <CommentBlock comment={comment} ends={ends}>
+      <CommentCardDisplay
+        activityOperations={activityOperations}
+        entityId={entityId}
+        comment={comment}
+        disabled={disabled}
+        projectId={projectId}
+        readOnlyEditorRef={readOnlyEditorRef}
+        showAccessSpecifier={showAccessSpecifier}
+        workspaceId={workspaceId}
+        workspaceSlug={workspaceSlug}
+        isEditing={isEditing}
+        setIsEditing={setIsEditing}
+        renderQuickActions={() => (
           <CommentQuickActions
             activityOperations={activityOperations}
             comment={comment}
@@ -54,33 +70,8 @@ export const CommentCard = observer(function CommentCard(props: TCommentCard) {
             showAccessSpecifier={showAccessSpecifier}
             showCopyLinkOption={showCopyLinkOption}
           />
-        )
-      }
-      ends={ends}
-    >
-      {isEditing ? (
-        <CommentCardEditForm
-          activityOperations={activityOperations}
-          comment={comment}
-          isEditing
-          readOnlyEditorRef={readOnlyEditorRef.current}
-          setIsEditing={setIsEditing}
-          projectId={projectId}
-          workspaceId={workspaceId}
-          workspaceSlug={workspaceSlug}
-        />
-      ) : (
-        <CommentCardDisplay
-          activityOperations={activityOperations}
-          comment={comment}
-          disabled={disabled}
-          projectId={projectId}
-          readOnlyEditorRef={readOnlyEditorRef}
-          showAccessSpecifier={showAccessSpecifier}
-          workspaceId={workspaceId}
-          workspaceSlug={workspaceSlug}
-        />
-      )}
+        )}
+      />
     </CommentBlock>
   );
 });
diff --git a/apps/web/core/components/comments/comment-create.tsx b/apps/web/core/components/comments/comment-create.tsx
index b21cf6819..d230a5be9 100644
--- a/apps/web/core/components/comments/comment-create.tsx
+++ b/apps/web/core/components/comments/comment-create.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useRef, useState } from "react";
 import { observer } from "mobx-react";
 import { useForm, Controller } from "react-hook-form";
@@ -87,7 +92,7 @@ export const CommentCreate = observer(function CommentCreate(props: TCommentCrea
 
   return (
     <div
-      className={cn("sticky bottom-0 z-[4] bg-custom-background-100 sm:static")}
+      className={cn("sticky bottom-0 z-[4] bg-surface-1 sm:static")}
       onKeyDown={(e) => {
         if (
           e.key === "Enter" &&
diff --git a/apps/web/core/components/comments/comment-reaction.tsx b/apps/web/core/components/comments/comment-reaction.tsx
index be93bc22c..709de31e8 100644
--- a/apps/web/core/components/comments/comment-reaction.tsx
+++ b/apps/web/core/components/comments/comment-reaction.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useMemo, useState } from "react";
 import { observer } from "mobx-react";
 // plane imports
@@ -6,7 +11,6 @@ import { stringToEmoji } from "@plane/propel/emoji-icon-picker";
 import { EmojiReactionGroup, EmojiReactionPicker } from "@plane/propel/emoji-reaction";
 import type { EmojiReactionType } from "@plane/propel/emoji-reaction";
 import type { TCommentsOperations, TIssueComment } from "@plane/types";
-import { cn } from "@plane/utils";
 // helpers
 // local imports
 
@@ -61,6 +65,12 @@ export const CommentReactions = observer(function CommentReactions(props: TProps
 
   if (!userReactions) return null;
 
+  // Don't render anything if there are no reactions and it's disabled
+  if (reactions.length === 0 && disabled) return null;
+
+  // Don't show the add button if there are no reactions
+  const showAddButton = !disabled && reactions.length > 0;
+
   return (
     <div className="relative">
       <EmojiReactionPicker
@@ -72,7 +82,7 @@ export const CommentReactions = observer(function CommentReactions(props: TProps
           <EmojiReactionGroup
             reactions={reactions}
             onReactionClick={handleReactionClick}
-            showAddButton={!disabled}
+            showAddButton={showAddButton}
             onAddReaction={() => setIsPickerOpen(true)}
           />
         }
diff --git a/apps/web/core/components/comments/comments.tsx b/apps/web/core/components/comments/comments.tsx
index 62e028204..88befc2de 100644
--- a/apps/web/core/components/comments/comments.tsx
+++ b/apps/web/core/components/comments/comments.tsx
@@ -1,5 +1,10 @@
-import type { FC } from "react";
-import React, { useMemo } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useMemo } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // plane imports
@@ -19,6 +24,7 @@ type TCommentsWrapper = {
   getCommentById?: (activityId: string) => TIssueComment | undefined;
   showAccessSpecifier?: boolean;
   showCopyLinkOption?: boolean;
+  enableReplies?: boolean;
 };
 
 export const CommentsWrapper = observer(function CommentsWrapper(props: TCommentsWrapper) {
@@ -31,6 +37,7 @@ export const CommentsWrapper = observer(function CommentsWrapper(props: TComment
     projectId,
     showAccessSpecifier = false,
     showCopyLinkOption = false,
+    enableReplies = false,
   } = props;
   // router
   const { workspaceSlug: routerWorkspaceSlug } = useParams();
@@ -49,9 +56,9 @@ export const CommentsWrapper = observer(function CommentsWrapper(props: TComment
   );
 
   return (
-    <div className="relative flex flex-col gap-y-2 h-full overflow-hidden">
+    <div className="relative flex h-full flex-col gap-y-2 overflow-hidden">
       {renderCommentCreate}
-      <div className="flex-grow py-4 overflow-y-auto">
+      <div className="flex-grow overflow-y-auto py-4">
         {comments?.map((data, index) => {
           let comment;
           if (typeof data === "string") {
@@ -65,6 +72,7 @@ export const CommentsWrapper = observer(function CommentsWrapper(props: TComment
             <CommentCard
               key={comment.id}
               workspaceSlug={workspaceSlug}
+              entityId={entityId}
               comment={comment}
               activityOperations={activityOperations}
               disabled={!isEditingAllowed}
@@ -72,6 +80,7 @@ export const CommentsWrapper = observer(function CommentsWrapper(props: TComment
               projectId={projectId}
               showAccessSpecifier={showAccessSpecifier}
               showCopyLinkOption={showCopyLinkOption}
+              enableReplies={enableReplies}
             />
           );
         })}
diff --git a/apps/web/core/components/comments/index.ts b/apps/web/core/components/comments/index.ts
index 222a6656c..b20656c8f 100644
--- a/apps/web/core/components/comments/index.ts
+++ b/apps/web/core/components/comments/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./comments";
diff --git a/apps/web/core/components/comments/quick-actions.tsx b/apps/web/core/components/comments/quick-actions.tsx
index e061282fc..8facbe0ab 100644
--- a/apps/web/core/components/comments/quick-actions.tsx
+++ b/apps/web/core/components/comments/quick-actions.tsx
@@ -1,9 +1,17 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useMemo } from "react";
 import { observer } from "mobx-react";
-import { Globe2, Link, Lock, Pencil, Trash2 } from "lucide-react";
+import { MoreHorizontal } from "lucide-react";
 // plane imports
 import { EIssueCommentAccessSpecifier } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
+import { IconButton } from "@plane/propel/icon-button";
+import { LinkIcon, GlobeIcon, LockIcon, EditIcon, TrashIcon } from "@plane/propel/icons";
 import type { TIssueComment, TCommentsOperations } from "@plane/types";
 import type { TContextMenuItem } from "@plane/ui";
 import { CustomMenu } from "@plane/ui";
@@ -37,14 +45,14 @@ export const CommentQuickActions = observer(function CommentQuickActions(props:
           key: "edit",
           action: setEditMode,
           title: t("common.actions.edit"),
-          icon: Pencil,
+          icon: EditIcon,
           shouldRender: canEdit,
         },
         {
           key: "copy_link",
           action: () => activityOperations.copyCommentLink(comment.id),
           title: t("common.actions.copy_link"),
-          icon: Link,
+          icon: LinkIcon,
           shouldRender: showCopyLinkOption,
         },
         {
@@ -60,14 +68,14 @@ export const CommentQuickActions = observer(function CommentQuickActions(props:
             comment.access === EIssueCommentAccessSpecifier.INTERNAL
               ? t("issue.comments.switch.public")
               : t("issue.comments.switch.private"),
-          icon: comment.access === EIssueCommentAccessSpecifier.INTERNAL ? Globe2 : Lock,
+          icon: comment.access === EIssueCommentAccessSpecifier.INTERNAL ? GlobeIcon : LockIcon,
           shouldRender: showAccessSpecifier,
         },
         {
           key: "delete",
           action: () => activityOperations.removeComment(comment.id),
           title: t("common.actions.delete"),
-          icon: Trash2,
+          icon: TrashIcon,
           shouldRender: canDelete,
         },
       ];
@@ -76,7 +84,7 @@ export const CommentQuickActions = observer(function CommentQuickActions(props:
   );
 
   return (
-    <CustomMenu ellipsis closeOnSelect>
+    <CustomMenu customButton={<IconButton icon={MoreHorizontal} variant="ghost" size="sm" />} closeOnSelect>
       {MENU_ITEMS.map((item) => {
         if (item.shouldRender === false) return null;
 
@@ -87,19 +95,19 @@ export const CommentQuickActions = observer(function CommentQuickActions(props:
             className={cn(
               "flex items-center gap-2",
               {
-                "text-custom-text-400": item.disabled,
+                "text-placeholder": item.disabled,
               },
               item.className
             )}
             disabled={item.disabled}
           >
-            {item.icon && <item.icon className={cn("shrink-0 size-3", item.iconClassName)} />}
+            {item.icon && <item.icon className={cn("size-3 shrink-0", item.iconClassName)} />}
             <div>
               <h5>{item.title}</h5>
               {item.description && (
                 <p
-                  className={cn("text-custom-text-300 whitespace-pre-line", {
-                    "text-custom-text-400": item.disabled,
+                  className={cn("whitespace-pre-line text-tertiary", {
+                    "text-placeholder": item.disabled,
                   })}
                 >
                   {item.description}
diff --git a/apps/web/core/components/common/access-field.tsx b/apps/web/core/components/common/access-field.tsx
index 3c93d8c85..0df21b180 100644
--- a/apps/web/core/components/common/access-field.tsx
+++ b/apps/web/core/components/common/access-field.tsx
@@ -1,6 +1,13 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { LucideIcon } from "lucide-react";
 // plane ui
 import { useTranslation } from "@plane/i18n";
+import type { ISvgIcons } from "@plane/propel/icons";
 import { Tooltip } from "@plane/propel/tooltip";
 // plane utils
 import { cn } from "@plane/utils";
@@ -12,7 +19,7 @@ type Props = {
     key: number;
     i18n_label?: string;
     label?: string;
-    icon: LucideIcon;
+    icon: LucideIcon | React.FC<ISvgIcons>;
   }[];
   isMobile?: boolean;
 };
@@ -23,7 +30,7 @@ export function AccessField(props: Props) {
   const { t } = useTranslation();
 
   return (
-    <div className="flex flex-shrink-0 items-stretch gap-0.5 rounded border-[1px] border-custom-border-200 p-1">
+    <div className="flex flex-shrink-0 items-stretch gap-0.5 rounded-sm border-[1px] border-subtle p-1">
       {accessSpecifiers.map((access, index) => {
         const label = access.i18n_label ? t(access.i18n_label) : access.label;
         return (
@@ -32,16 +39,13 @@ export function AccessField(props: Props) {
               type="button"
               onClick={() => onChange(access.key)}
               className={cn(
-                "flex-shrink-0 relative flex justify-center items-center w-5 h-5 rounded-sm p-1 transition-all",
-                value === access.key ? "bg-custom-background-80" : "hover:bg-custom-background-80"
+                "relative flex h-5 w-5 flex-shrink-0 items-center justify-center rounded-xs p-1 transition-all",
+                value === access.key ? "bg-layer-1" : "hover:bg-layer-1"
               )}
               tabIndex={2 + index}
             >
               <access.icon
-                className={cn(
-                  "h-3.5 w-3.5 transition-all",
-                  value === access.key ? "text-custom-text-100" : "text-custom-text-400"
-                )}
+                className={cn("h-3.5 w-3.5 transition-all", value === access.key ? "text-primary" : "text-placeholder")}
                 strokeWidth={2}
               />
             </button>
diff --git a/apps/web/core/components/common/activity/activity-block.tsx b/apps/web/core/components/common/activity/activity-block.tsx
index 98fbd9611..61ab1d25d 100644
--- a/apps/web/core/components/common/activity/activity-block.tsx
+++ b/apps/web/core/components/common/activity/activity-block.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { FC, ReactNode } from "react";
 import { Network } from "lucide-react";
 // types
@@ -12,7 +18,7 @@ import { usePlatformOS } from "@/hooks/use-platform-os";
 import { User } from "./user";
 
 type TActivityBlockComponent = {
-  icon?: ReactNode;
+  icon?: FC<{ className?: string }>;
   activity: TWorkspaceBaseActivity;
   ends: "top" | "bottom" | undefined;
   children: ReactNode;
@@ -20,21 +26,21 @@ type TActivityBlockComponent = {
 };
 
 export function ActivityBlockComponent(props: TActivityBlockComponent) {
-  const { icon, activity, ends, children, customUserName } = props;
+  const { icon: Icon, activity, ends, children, customUserName } = props;
   // hooks
   const { isMobile } = usePlatformOS();
 
   if (!activity) return <></>;
   return (
     <div
-      className={`relative flex items-start gap-2 text-xs ${
+      className={`relative flex items-start gap-2 text-caption-sm-regular ${
         ends === "top" ? `pb-3` : ends === "bottom" ? `pt-3` : `py-3`
       }`}
     >
-      <div className="flex-shrink-0 ring-6 w-7 h-7 rounded-full overflow-hidden flex justify-center items-start mt-0.5 z-[4] text-custom-text-200">
-        {icon ? icon : <Network className="w-3.5 h-3.5" />}
+      <div className="z-[4] mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center overflow-hidden rounded-lg border border-subtle text-secondary shadow-raised-100">
+        {Icon ? <Icon className="h-3.5 w-3.5 shrink-0" /> : <Network className="h-3.5 w-3.5 shrink-0" />}
       </div>
-      <div className="w-full text-custom-text-200">
+      <div className="w-full text-secondary">
         <div className="line-clamp-2">
           <User activity={activity} customUserName={customUserName} /> {children}
         </div>
@@ -43,7 +49,7 @@ export function ActivityBlockComponent(props: TActivityBlockComponent) {
             isMobile={isMobile}
             tooltipContent={`${renderFormattedDate(activity.created_at)}, ${renderFormattedTime(activity.created_at)}`}
           >
-            <span className="whitespace-nowrap text-custom-text-350 font-medium cursor-help">
+            <span className="cursor-help font-medium whitespace-nowrap text-tertiary">
               {calculateTimeAgo(activity.created_at)}
             </span>
           </Tooltip>
diff --git a/apps/web/core/components/common/activity/activity-item.tsx b/apps/web/core/components/common/activity/activity-item.tsx
index cb4241887..0cc6a01f5 100644
--- a/apps/web/core/components/common/activity/activity-item.tsx
+++ b/apps/web/core/components/common/activity/activity-item.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 
 import type { TProjectActivity } from "@/plane-web/types";
@@ -12,7 +17,7 @@ type TActivityItem = {
 };
 
 export const ActivityItem = observer(function ActivityItem(props: TActivityItem) {
-  const { activity, showProject = true, ends } = props;
+  const { activity, ends } = props;
 
   if (!activity) return null;
 
diff --git a/apps/web/core/components/common/activity/helper.tsx b/apps/web/core/components/common/activity/helper.tsx
index 8c656f33e..b633c86b9 100644
--- a/apps/web/core/components/common/activity/helper.tsx
+++ b/apps/web/core/components/common/activity/helper.tsx
@@ -1,77 +1,82 @@
-import type { ReactNode } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { FC, ReactNode } from "react";
 import {
   RotateCcw,
   Network,
-  Link as LinkIcon,
-  Calendar,
   Inbox,
   AlignLeft,
   Paperclip,
   Type,
   FileText,
-  Globe,
   Hash,
   Clock,
   Bell,
-  LayoutGrid,
   GitBranch,
   Timer,
   ListTodo,
   Layers,
 } from "lucide-react";
-
 // components
+
 import {
+  LinkIcon,
   ArchiveIcon,
   CycleIcon,
-  StatePropertyIcon,
+  GlobeIcon,
+  DueDatePropertyIcon,
+  EstimatePropertyIcon,
+  GridLayoutIcon,
   IntakeIcon,
+  LabelPropertyIcon,
+  MembersPropertyIcon,
   ModuleIcon,
   PriorityPropertyIcon,
   StartDatePropertyIcon,
-  DueDatePropertyIcon,
-  LabelPropertyIcon,
-  MembersPropertyIcon,
-  EstimatePropertyIcon,
+  StatePropertyIcon,
 } from "@plane/propel/icons";
 import { store } from "@/lib/store-context";
 import type { TProjectActivity } from "@/plane-web/types";
 
 type ActivityIconMap = {
-  [key: string]: ReactNode;
+  [key: string]: FC<{ className?: string }>;
 };
 export const iconsMap: ActivityIconMap = {
-  priority: <PriorityPropertyIcon className="h-3.5 w-3.5 text-custom-text-200" />,
-  archived_at: <ArchiveIcon className="h-3.5 w-3.5 text-custom-text-200" />,
-  restored: <RotateCcw className="h-3.5 w-3.5 text-custom-text-200" />,
-  link: <LinkIcon className="h-3.5 w-3.5 text-custom-text-200" />,
-  start_date: <StartDatePropertyIcon className="h-3.5 w-3.5 text-custom-text-200" />,
-  target_date: <DueDatePropertyIcon className="h-3.5 w-3.5 text-custom-text-200" />,
-  label: <LabelPropertyIcon className="h-3.5 w-3.5 text-custom-text-200" />,
-  inbox: <Inbox className="h-3.5 w-3.5 text-custom-text-200" />,
-  description: <AlignLeft className="h-3.5 w-3.5 text-custom-text-200" />,
-  assignee: <MembersPropertyIcon className="h-3.5 w-3.5 text-custom-text-200" />,
-  attachment: <Paperclip className="h-3.5 w-3.5 text-custom-text-200" />,
-  name: <Type className="h-3.5 w-3.5 text-custom-text-200" />,
-  state: <StatePropertyIcon className="h-4 w-4 flex-shrink-0 text-custom-text-200" />,
-  estimate: <EstimatePropertyIcon className="h-3.5 w-3.5 text-custom-text-200" />,
-  cycle: <CycleIcon className="h-4 w-4 flex-shrink-0 text-custom-text-200" />,
-  module: <ModuleIcon className="h-4 w-4 flex-shrink-0 text-custom-text-200" />,
-  page: <FileText className="h-3.5 w-3.5 text-custom-text-200" />,
-  network: <Globe className="h-3.5 w-3.5 text-custom-text-200" />,
-  identifier: <Hash className="h-3.5 w-3.5 text-custom-text-200" />,
-  timezone: <Clock className="h-3.5 w-3.5 text-custom-text-200" />,
-  is_project_updates_enabled: <Bell className="h-3.5 w-3.5 text-custom-text-200" />,
-  is_epic_enabled: <LayoutGrid className="h-3.5 w-3.5 text-custom-text-200" />,
-  is_workflow_enabled: <GitBranch className="h-3.5 w-3.5 text-custom-text-200" />,
-  is_time_tracking_enabled: <Timer className="h-3.5 w-3.5 text-custom-text-200" />,
-  is_issue_type_enabled: <ListTodo className="h-3.5 w-3.5 text-custom-text-200" />,
-  default: <Network className="h-3.5 w-3.5 text-custom-text-200" />,
-  module_view: <ModuleIcon className="h-3.5 w-3.5 text-custom-text-200" />,
-  cycle_view: <CycleIcon className="h-3.5 w-3.5 text-custom-text-200" />,
-  issue_views_view: <Layers className="h-3.5 w-3.5 text-custom-text-200" />,
-  page_view: <FileText className="h-3.5 w-3.5 text-custom-text-200" />,
-  intake_view: <IntakeIcon className="h-3.5 w-3.5 text-custom-text-200" />,
+  priority: PriorityPropertyIcon,
+  archived_at: ArchiveIcon,
+  restored: RotateCcw,
+  link: LinkIcon,
+  start_date: StartDatePropertyIcon,
+  target_date: DueDatePropertyIcon,
+  label: LabelPropertyIcon,
+  inbox: Inbox,
+  description: AlignLeft,
+  assignee: MembersPropertyIcon,
+  attachment: Paperclip,
+  name: Type,
+  state: StatePropertyIcon,
+  estimate: EstimatePropertyIcon,
+  cycle: CycleIcon,
+  module: ModuleIcon,
+  page: FileText,
+  network: GlobeIcon,
+  identifier: Hash,
+  timezone: Clock,
+  is_project_updates_enabled: Bell,
+  is_epic_enabled: GridLayoutIcon,
+  is_workflow_enabled: GitBranch,
+  is_time_tracking_enabled: Timer,
+  is_issue_type_enabled: ListTodo,
+  default: Network,
+  module_view: ModuleIcon,
+  cycle_view: CycleIcon,
+  issue_views_view: Layers,
+  page_view: FileText,
+  intake_view: IntakeIcon,
 };
 
 export const messages = (activity: TProjectActivity): { message: string | ReactNode; customUserName?: string } => {
@@ -92,7 +97,7 @@ export const messages = (activity: TProjectActivity): { message: string | ReactN
       return {
         message: (
           <>
-            set the priority to <span className="font-medium text-custom-text-100">{newValue || "none"}</span>
+            set the priority to <span className="font-medium text-primary">{newValue || "none"}</span>
           </>
         ),
       };
@@ -105,7 +110,7 @@ export const messages = (activity: TProjectActivity): { message: string | ReactN
       return {
         message: (
           <>
-            renamed the project to <span className="font-medium text-custom-text-100">{newValue}</span>
+            renamed the project to <span className="font-medium text-primary">{newValue}</span>
           </>
         ),
       };
@@ -119,7 +124,7 @@ export const messages = (activity: TProjectActivity): { message: string | ReactN
           <>
             {newValue ? (
               <>
-                set the start date to <span className="font-medium text-custom-text-100">{newValue}</span>
+                set the start date to <span className="font-medium text-primary">{newValue}</span>
               </>
             ) : (
               "removed the start date"
@@ -133,7 +138,7 @@ export const messages = (activity: TProjectActivity): { message: string | ReactN
           <>
             {newValue ? (
               <>
-                set the target date to <span className="font-medium text-custom-text-100">{newValue}</span>
+                set the target date to <span className="font-medium text-primary">{newValue}</span>
               </>
             ) : (
               "removed the target date"
@@ -145,7 +150,7 @@ export const messages = (activity: TProjectActivity): { message: string | ReactN
       return {
         message: (
           <>
-            set the state to <span className="font-medium text-custom-text-100">{newValue || "none"}</span>
+            set the state to <span className="font-medium text-primary">{newValue || "none"}</span>
           </>
         ),
       };
@@ -155,7 +160,7 @@ export const messages = (activity: TProjectActivity): { message: string | ReactN
           <>
             {newValue ? (
               <>
-                set the estimate point to <span className="font-medium text-custom-text-100">{newValue}</span>
+                set the estimate point to <span className="font-medium text-primary">{newValue}</span>
               </>
             ) : (
               <>
@@ -163,7 +168,7 @@ export const messages = (activity: TProjectActivity): { message: string | ReactN
                 {oldValue && (
                   <>
                     {" "}
-                    <span className="font-medium text-custom-text-100">{oldValue}</span>
+                    <span className="font-medium text-primary">{oldValue}</span>
                   </>
                 )}
               </>
@@ -183,12 +188,12 @@ export const messages = (activity: TProjectActivity): { message: string | ReactN
                 href={`/${workspaceDetail?.slug}/projects/${activity.project}/cycles/${activity.new_identifier}`}
                 target="_blank"
                 rel="noopener noreferrer"
-                className="inline-flex font-medium text-custom-text-100"
+                className="inline-flex font-medium text-primary"
               >
                 {activity.new_value}
               </a>
             ) : (
-              <span className="font-medium text-custom-text-100">{activity.old_value || "Unknown cycle"}</span>
+              <span className="font-medium text-primary">{activity.old_value || "Unknown cycle"}</span>
             )}
           </>
         ),
@@ -200,7 +205,7 @@ export const messages = (activity: TProjectActivity): { message: string | ReactN
             <span>
               {verb} this project {verb === "removed" ? "from" : "to"} the module{" "}
             </span>
-            <span className="font-medium text-custom-text-100">
+            <span className="font-medium text-primary">
               {verb === "removed" ? oldValue : newValue || "Unknown module"}
             </span>
           </>
@@ -211,7 +216,7 @@ export const messages = (activity: TProjectActivity): { message: string | ReactN
         message: (
           <>
             {verb} the label{" "}
-            <span className="font-medium text-custom-text-100">{newValue || oldValue || "Untitled label"}</span>
+            <span className="font-medium text-primary">{newValue || oldValue || "Untitled label"}</span>
           </>
         ),
       };
@@ -224,7 +229,7 @@ export const messages = (activity: TProjectActivity): { message: string | ReactN
         message: (
           <>
             {newValue ? "created" : "removed"} the project page{" "}
-            <span className="font-medium text-custom-text-100">{newValue || oldValue || "Untitled page"}</span>
+            <span className="font-medium text-primary">{newValue || oldValue || "Untitled page"}</span>
           </>
         ),
       };
@@ -236,7 +241,7 @@ export const messages = (activity: TProjectActivity): { message: string | ReactN
       return {
         message: (
           <>
-            updated project identifier to <span className="font-medium text-custom-text-100">{newValue || "none"}</span>
+            updated project identifier to <span className="font-medium text-primary">{newValue || "none"}</span>
           </>
         ),
       };
@@ -244,8 +249,7 @@ export const messages = (activity: TProjectActivity): { message: string | ReactN
       return {
         message: (
           <>
-            changed project timezone to{" "}
-            <span className="font-medium text-custom-text-100">{newValue || "default"}</span>
+            changed project timezone to <span className="font-medium text-primary">{newValue || "default"}</span>
           </>
         ),
       };
diff --git a/apps/web/core/components/common/activity/user.tsx b/apps/web/core/components/common/activity/user.tsx
index 7ae48b512..1ba3d03b7 100644
--- a/apps/web/core/components/common/activity/user.tsx
+++ b/apps/web/core/components/common/activity/user.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import Link from "next/link";
 // types
@@ -24,11 +29,11 @@ export const User = observer(function User(props: TUser) {
   return (
     <>
       {customUserName || actorDetail?.display_name.includes("-intake") ? (
-        <span className="text-custom-text-100 font-medium">{customUserName || "Plane"}</span>
+        <span className="font-medium text-primary">{customUserName || "Plane"}</span>
       ) : (
         <Link
           href={`/${workspaceDetail?.slug}/profile/${actorDetail?.id}`}
-          className="hover:underline text-custom-text-100 font-medium"
+          className="font-medium text-primary hover:underline"
         >
           {actorDetail?.display_name}
         </Link>
diff --git a/apps/web/core/components/common/applied-filters/date.tsx b/apps/web/core/components/common/applied-filters/date.tsx
index b070c355f..6a5051fd9 100644
--- a/apps/web/core/components/common/applied-filters/date.tsx
+++ b/apps/web/core/components/common/applied-filters/date.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 // icons
 import { DATE_BEFORE_FILTER_OPTIONS } from "@plane/constants";
@@ -36,12 +42,12 @@ export const AppliedDateFilters = observer(function AppliedDateFilters(props: Pr
   return (
     <>
       {values.map((date) => (
-        <div key={date} className="flex items-center gap-1 rounded bg-custom-background-80 py-1 px-1.5 text-xs">
+        <div key={date} className="flex items-center gap-1 rounded-sm bg-layer-1 px-1.5 py-1 text-11">
           <span className="normal-case">{getDateLabel(date)}</span>
           {editable && (
             <button
               type="button"
-              className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
+              className="grid place-items-center text-tertiary hover:text-secondary"
               onClick={() => handleRemove(date)}
             >
               <CloseIcon height={10} width={10} strokeWidth={2} />
diff --git a/apps/web/core/components/common/applied-filters/members.tsx b/apps/web/core/components/common/applied-filters/members.tsx
index 24fb98bcd..fe5e6a5cc 100644
--- a/apps/web/core/components/common/applied-filters/members.tsx
+++ b/apps/web/core/components/common/applied-filters/members.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import { CloseIcon } from "@plane/propel/icons";
 // plane ui
@@ -28,7 +34,7 @@ export const AppliedMembersFilters = observer(function AppliedMembersFilters(pro
         if (!memberDetails) return null;
 
         return (
-          <div key={memberId} className="flex items-center gap-1 rounded bg-custom-background-80 py-1 px-1.5 text-xs">
+          <div key={memberId} className="flex items-center gap-1 rounded-sm bg-layer-1 px-1.5 py-1 text-11">
             <Avatar
               name={memberDetails.display_name}
               src={getFileURL(memberDetails.avatar_url)}
@@ -39,7 +45,7 @@ export const AppliedMembersFilters = observer(function AppliedMembersFilters(pro
             {editable && (
               <button
                 type="button"
-                className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
+                className="grid place-items-center text-tertiary hover:text-secondary"
                 onClick={() => handleRemove(memberId)}
               >
                 <CloseIcon height={10} width={10} strokeWidth={2} />
diff --git a/apps/web/core/components/common/breadcrumb-link.tsx b/apps/web/core/components/common/breadcrumb-link.tsx
index b9bd6d8f0..dd7567997 100644
--- a/apps/web/core/components/common/breadcrumb-link.tsx
+++ b/apps/web/core/components/common/breadcrumb-link.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React, { useMemo } from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
@@ -13,13 +19,13 @@ type Props = {
 };
 
 const IconWrapper = React.memo(function IconWrapper({ icon }: { icon: React.ReactNode }) {
-  return <div className="flex size-4 items-center justify-center overflow-hidden !text-[1rem]">{icon}</div>;
+  return <div className="flex size-4 items-center justify-center overflow-hidden !text-16">{icon}</div>;
 });
 
 IconWrapper.displayName = "IconWrapper";
 
 const LabelWrapper = React.memo(function LabelWrapper({ label }: { label: React.ReactNode }) {
-  return <div className="relative line-clamp-1 block max-w-[150px] overflow-hidden truncate">{label}</div>;
+  return <div className="relative line-clamp-1 block max-w-[150px] truncate overflow-hidden text-primary">{label}</div>;
 });
 
 LabelWrapper.displayName = "LabelWrapper";
diff --git a/apps/web/core/components/common/count-chip.tsx b/apps/web/core/components/common/count-chip.tsx
index 21d010e6d..8b9204151 100644
--- a/apps/web/core/components/common/count-chip.tsx
+++ b/apps/web/core/components/common/count-chip.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 //
 import { cn } from "@plane/utils";
 
@@ -13,7 +18,7 @@ export function CountChip(props: TCountChip) {
   return (
     <div
       className={cn(
-        "relative flex justify-center items-center px-2.5 py-0.5 flex-shrink-0 bg-custom-primary-100/20 text-custom-primary-100 text-xs font-semibold rounded-xl",
+        "relative flex flex-shrink-0 items-center justify-center rounded-xl bg-accent-primary/20 px-2.5 py-0.5 text-caption-sm-semibold text-accent-primary",
         className
       )}
     >
diff --git a/apps/web/core/components/common/cover-image.tsx b/apps/web/core/components/common/cover-image.tsx
new file mode 100644
index 000000000..85fed57e3
--- /dev/null
+++ b/apps/web/core/components/common/cover-image.tsx
@@ -0,0 +1,50 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { cn } from "@plane/utils";
+// helpers
+import { getCoverImageDisplayURL, DEFAULT_COVER_IMAGE_URL } from "@/helpers/cover-image.helper";
+
+type TCoverImageProps = {
+  /** The cover image URL - can be static, uploaded, or external */
+  src: string | null | undefined;
+  /** Alt text for the image */
+  alt?: string;
+  /** Additional className for the image or skeleton */
+  className?: string;
+  /** Whether to show default image when src is null/undefined. If false, shows loading skeleton */
+  showDefaultWhenEmpty?: boolean;
+  /** Custom fallback URL to use instead of DEFAULT_COVER_IMAGE_URL */
+  fallbackUrl?: string;
+} & React.ComponentProps<"img">;
+
+/**
+ * A reusable cover image component that handles:
+ * - Loading states with skeleton
+ * - Static images (local assets)
+ * - Uploaded images (processed through getFileURL)
+ * - External URLs
+ * - Fallback to default cover image
+ */
+export function CoverImage(props: TCoverImageProps) {
+  const {
+    src,
+    alt = "Cover image",
+    className,
+    showDefaultWhenEmpty = false,
+    fallbackUrl = DEFAULT_COVER_IMAGE_URL,
+    ...restProps
+  } = props;
+
+  // Show loading skeleton when src is undefined/null and we don't want to show default
+  if (!src && !showDefaultWhenEmpty) {
+    return <div className={cn("animate-pulse bg-layer-2", className)} />;
+  }
+
+  const displayUrl = getCoverImageDisplayURL(src, fallbackUrl);
+
+  return <img src={displayUrl} alt={alt} className={cn("object-cover", className)} {...restProps} />;
+}
diff --git a/apps/web/core/components/common/empty-state.tsx b/apps/web/core/components/common/empty-state.tsx
index 5e71dcbde..a5f469deb 100644
--- a/apps/web/core/components/common/empty-state.tsx
+++ b/apps/web/core/components/common/empty-state.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 
 // ui
@@ -20,9 +26,9 @@ export function EmptyState({ title, description, image, primaryButton, secondary
   return (
     <div className={`flex h-full w-full items-center justify-center`}>
       <div className="flex w-full flex-col items-center text-center">
-        <img src={image} className="w-52 sm:w-60 object-contain" alt={primaryButton?.text || "button image"} />
-        <h6 className="mb-3 mt-6 text-xl font-semibold sm:mt-8">{title}</h6>
-        {description && <p className="mb-7 px-5 text-custom-text-300 sm:mb-8">{description}</p>}
+        <img src={image} className="w-52 object-contain sm:w-60" alt={primaryButton?.text || "button image"} />
+        <h6 className="mt-6 mb-3 text-18 font-semibold sm:mt-8">{title}</h6>
+        {description && <p className="mb-7 px-5 text-tertiary sm:mb-8">{description}</p>}
         <div className="flex items-center gap-4">
           {primaryButton && (
             <Button
diff --git a/apps/web/core/components/common/filters/created-at.tsx b/apps/web/core/components/common/filters/created-at.tsx
index f3518bd14..7e298fa00 100644
--- a/apps/web/core/components/common/filters/created-at.tsx
+++ b/apps/web/core/components/common/filters/created-at.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React, { useState } from "react";
 import { observer } from "mobx-react";
 // plane imports
@@ -67,7 +73,7 @@ export const FilterCreatedDate = observer(function FilterCreatedDate(props: Prop
               <FilterOption isChecked={isCustomDateSelected()} onClick={handleCustomDate} title="Custom" multiple />
             </>
           ) : (
-            <p className="text-xs italic text-custom-text-400">No matches found</p>
+            <p className="text-11 text-placeholder italic">No matches found</p>
           )}
         </div>
       )}
diff --git a/apps/web/core/components/common/filters/created-by.tsx b/apps/web/core/components/common/filters/created-by.tsx
index df2e0e0a5..0009496db 100644
--- a/apps/web/core/components/common/filters/created-by.tsx
+++ b/apps/web/core/components/common/filters/created-by.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useMemo, useState } from "react";
 import { sortBy } from "lodash-es";
 import { observer } from "mobx-react";
@@ -85,7 +91,7 @@ export const FilterCreatedBy = observer(function FilterCreatedBy(props: Props) {
                 {sortedOptions.length > 5 && (
                   <button
                     type="button"
-                    className="ml-8 text-xs font-medium text-custom-primary-100"
+                    className="ml-8 text-11 font-medium text-accent-primary"
                     onClick={handleViewToggle}
                   >
                     {itemsToRender === sortedOptions.length ? "View less" : "View all"}
@@ -93,7 +99,7 @@ export const FilterCreatedBy = observer(function FilterCreatedBy(props: Props) {
                 )}
               </>
             ) : (
-              <p className="text-xs italic text-custom-text-400">No matches found</p>
+              <p className="text-11 text-placeholder italic">No matches found</p>
             )
           ) : (
             <Loader className="space-y-2">
diff --git a/apps/web/core/components/common/latest-feature-block.tsx b/apps/web/core/components/common/latest-feature-block.tsx
index acf6ecbcd..7ea1289b2 100644
--- a/apps/web/core/components/common/latest-feature-block.tsx
+++ b/apps/web/core/components/common/latest-feature-block.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import Link from "next/link";
 import { useTheme } from "next-themes";
 // icons
@@ -10,27 +16,25 @@ export function LatestFeatureBlock() {
 
   return (
     <>
-      <div className="mx-auto mt-16 flex rounded-[3.5px] border border-custom-border-200 bg-custom-background-100 py-2 sm:w-96">
+      <div className="mx-auto mt-16 flex rounded-[3.5px] border border-subtle bg-surface-1 py-2 sm:w-96">
         <Lightbulb className="mx-3 mr-2 h-7 w-7" />
-        <p className="text-left text-sm text-custom-text-100">
+        <p className="text-left text-13 text-primary">
           Pages gets a facelift! Write anything and use Galileo to help you start.{" "}
           <Link href="https://plane.so/changelog" target="_blank" rel="noopener noreferrer">
-            <span className="text-sm font-medium underline hover:cursor-pointer">Learn more</span>
+            <span className="text-13 font-medium underline hover:cursor-pointer">Learn more</span>
           </Link>
         </p>
       </div>
       <div
-        className={`mx-auto mt-8 overflow-hidden rounded-md border border-custom-border-200 object-cover sm:h-52 sm:w-96 ${
-          resolvedTheme === "dark" ? "bg-custom-background-100" : "bg-custom-primary-70"
+        className={`mx-auto mt-8 overflow-hidden rounded-md border border-subtle object-cover sm:h-52 sm:w-96 ${
+          resolvedTheme === "dark" ? "bg-surface-1" : "bg-layer-2"
         }`}
       >
         <div className="h-[90%]">
           <img
             src={latestFeatures}
             alt="Plane Work items"
-            className={`-mt-2 ml-10 h-full rounded-md ${
-              resolvedTheme === "dark" ? "bg-custom-background-100" : "bg-custom-primary-70"
-            }`}
+            className={`-mt-2 ml-10 h-full rounded-md ${resolvedTheme === "dark" ? "bg-surface-1" : "bg-layer-2"}`}
           />
         </div>
       </div>
diff --git a/apps/web/core/components/common/layout/sidebar/property-list-item.tsx b/apps/web/core/components/common/layout/sidebar/property-list-item.tsx
new file mode 100644
index 000000000..418830c6e
--- /dev/null
+++ b/apps/web/core/components/common/layout/sidebar/property-list-item.tsx
@@ -0,0 +1,31 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { ReactNode } from "react";
+import { cn } from "@plane/utils";
+
+type TSidebarPropertyListItemProps = {
+  icon: React.FC<{ className?: string }>;
+  label: string;
+  children: ReactNode;
+  appendElement?: ReactNode;
+  childrenClassName?: string;
+};
+
+export function SidebarPropertyListItem(props: TSidebarPropertyListItemProps) {
+  const { icon: Icon, label, children, appendElement, childrenClassName } = props;
+
+  return (
+    <div className="flex items-start gap-2">
+      <div className="flex h-7.5 w-30 shrink-0 items-center gap-1.5 text-body-xs-regular text-tertiary">
+        <Icon className="size-4 shrink-0" />
+        <span>{label}</span>
+        {appendElement}
+      </div>
+      <div className={cn("flex grow flex-wrap items-center gap-1", childrenClassName)}>{children}</div>
+    </div>
+  );
+}
diff --git a/apps/web/core/components/common/logo-spinner.tsx b/apps/web/core/components/common/logo-spinner.tsx
index 0d08b77e5..9dfad1d86 100644
--- a/apps/web/core/components/common/logo-spinner.tsx
+++ b/apps/web/core/components/common/logo-spinner.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useTheme } from "next-themes";
 // assets
 import LogoSpinnerDark from "@/app/assets/images/logo-spinner-dark.gif?url";
@@ -10,7 +16,7 @@ export function LogoSpinner() {
 
   return (
     <div className="flex items-center justify-center">
-      <img src={logoSrc} alt="logo" className="h-6 w-auto sm:h-11 object-contain" />
+      <img src={logoSrc} alt="logo" className="h-6 w-auto object-contain sm:h-11" />
     </div>
   );
 }
diff --git a/apps/web/core/components/common/new-empty-state.tsx b/apps/web/core/components/common/new-empty-state.tsx
index 49ce37941..742ea3a6a 100644
--- a/apps/web/core/components/common/new-empty-state.tsx
+++ b/apps/web/core/components/common/new-empty-state.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React, { useState } from "react";
 
 // ui
@@ -33,19 +39,19 @@ export function NewEmptyState({ title, description, image, primaryButton, disabl
   };
   return (
     <div className="flex items-center justify-center overflow-y-auto">
-      <div className=" flex h-full w-full flex-col items-center justify-center ">
-        <div className="m-5 flex max-w-6xl flex-col gap-5 rounded-xl border border-custom-border-200 px-10 py-7 shadow-sm md:m-8">
-          <h3 className="text-2xl font-semibold">{title}</h3>
-          {description && <p className=" text-lg">{description}</p>}
+      <div className="flex h-full w-full flex-col items-center justify-center">
+        <div className="shadow-sm m-5 flex max-w-6xl flex-col gap-5 rounded-xl border border-subtle px-10 py-7 md:m-8">
+          <h3 className="text-20 font-semibold">{title}</h3>
+          {description && <p className="text-16">{description}</p>}
           <div className="relative w-full max-w-6xl">
-            <img src={image} className="w-full h-full object-contain" alt={primaryButton?.text || "button image"} />
+            <img src={image} className="h-full w-full object-contain" alt={primaryButton?.text || "button image"} />
           </div>
 
           <div className="relative flex items-start justify-center">
             {primaryButton && (
               <Button
                 className={`relative m-3 max-w-min !px-6 ${comicBox?.direction === "left" ? "flex-row-reverse" : ""}`}
-                size="lg"
+                size="xl"
                 variant="primary"
                 onClick={primaryButton.onClick}
                 disabled={disabled}
@@ -54,12 +60,12 @@ export function NewEmptyState({ title, description, image, primaryButton, disabl
                 <div
                   onMouseEnter={handleMouseEnter}
                   onMouseLeave={handleMouseLeave}
-                  className={`absolute bg-blue-300 ${
+                  className={`bg-blue-300 absolute ${
                     comicBox?.direction === "left" ? "left-0 ml-2" : "right-0 mr-2"
                   } z-10 h-2.5 w-2.5 animate-ping rounded-full`}
                 />
                 <div
-                  className={`absolute bg-blue-400/40 ${
+                  className={`bg-blue-400/40 absolute ${
                     comicBox?.direction === "left" ? "left-0 ml-2.5" : "right-0 mr-2.5"
                   } h-1.5 w-1.5 rounded-full`}
                 />
@@ -69,29 +75,29 @@ export function NewEmptyState({ title, description, image, primaryButton, disabl
               isHovered &&
               (comicBox.direction === "right" ? (
                 <div
-                  className={`absolute left-1/2 top-0 flex max-w-sm ${
+                  className={`absolute top-0 left-1/2 flex max-w-sm ${
                     comicBox?.extraPadding ? "ml-[125px]" : "ml-[90px]"
                   } pb-5`}
                 >
-                  <div className="relative mt-5 h-0 w-0 border-b-[11px] border-r-[11px] border-t-[11px] border-custom-border-200 border-y-transparent">
-                    <div className="absolute right-[-12px] top-[-10px] h-0 w-0 border-b-[10px] border-r-[10px] border-t-[10px] border-custom-background-100 border-y-transparent" />
+                  <div className="relative mt-5 h-0 w-0 border-t-[11px] border-r-[11px] border-b-[11px] border-subtle border-y-transparent">
+                    <div className="border-surface-1 absolute top-[-10px] right-[-12px] h-0 w-0 border-t-[10px] border-r-[10px] border-b-[10px] border-y-transparent" />
                   </div>
-                  <div className="rounded-md border border-custom-border-200 bg-custom-background-100">
+                  <div className="rounded-md border border-subtle bg-surface-1">
                     <h1 className="p-5">
-                      <h3 className="text-lg font-semibold">{comicBox?.title}</h3>
-                      <h4 className="mt-1 text-sm">{comicBox?.description}</h4>
+                      <h3 className="text-16 font-semibold">{comicBox?.title}</h3>
+                      <h4 className="mt-1 text-13">{comicBox?.description}</h4>
                     </h1>
                   </div>
                 </div>
               ) : (
-                <div className="absolute right-1/2 top-0 mr-[90px] flex max-w-sm flex-row-reverse pb-5">
-                  <div className="relative mt-5 h-0 w-0 border-b-[11px] border-l-[11px] border-t-[11px] border-custom-border-200 border-y-transparent">
-                    <div className="absolute left-[-12px] top-[-10px] h-0 w-0 border-b-[10px] border-l-[10px] border-t-[10px] border-custom-background-100 border-y-transparent" />
+                <div className="absolute top-0 right-1/2 mr-[90px] flex max-w-sm flex-row-reverse pb-5">
+                  <div className="relative mt-5 h-0 w-0 border-t-[11px] border-b-[11px] border-l-[11px] border-subtle border-y-transparent">
+                    <div className="border-surface-1 absolute top-[-10px] left-[-12px] h-0 w-0 border-t-[10px] border-b-[10px] border-l-[10px] border-y-transparent" />
                   </div>
-                  <div className="rounded-md border border-custom-border-200 bg-custom-background-100">
+                  <div className="rounded-md border border-subtle bg-surface-1">
                     <h1 className="p-5">
-                      <h3 className="text-lg font-semibold">{comicBox?.title}</h3>
-                      <h4 className="mt-1 text-sm">{comicBox?.description}</h4>
+                      <h3 className="text-16 font-semibold">{comicBox?.title}</h3>
+                      <h4 className="mt-1 text-13">{comicBox?.description}</h4>
                     </h1>
                   </div>
                 </div>
diff --git a/apps/web/core/components/common/page-access-icon.tsx b/apps/web/core/components/common/page-access-icon.tsx
index 856901322..a4ece44dc 100644
--- a/apps/web/core/components/common/page-access-icon.tsx
+++ b/apps/web/core/components/common/page-access-icon.tsx
@@ -1,16 +1,23 @@
-import { ArchiveIcon, Earth, Lock } from "lucide-react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { ArchiveIcon, Earth } from "lucide-react";
 import { EPageAccess } from "@plane/constants";
+import { LockIcon } from "@plane/propel/icons";
 import type { TPage } from "@plane/types";
 
 export function PageAccessIcon(page: TPage) {
   return (
     <div>
       {page.archived_at ? (
-        <ArchiveIcon className="h-2.5 w-2.5 text-custom-text-300" />
+        <ArchiveIcon className="h-2.5 w-2.5 text-tertiary" />
       ) : page.access === EPageAccess.PUBLIC ? (
-        <Earth className="h-2.5 w-2.5 text-custom-text-300" />
+        <Earth className="h-2.5 w-2.5 text-tertiary" />
       ) : (
-        <Lock className="h-2.5 w-2.5 text-custom-text-300" />
+        <LockIcon className="h-2.5 w-2.5 text-tertiary" />
       )}
     </div>
   );
diff --git a/apps/web/core/components/common/pro-icon.tsx b/apps/web/core/components/common/pro-icon.tsx
index 21fa05aed..474ddd836 100644
--- a/apps/web/core/components/common/pro-icon.tsx
+++ b/apps/web/core/components/common/pro-icon.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { Crown } from "lucide-react";
 // helpers
 import { cn } from "@plane/utils";
@@ -10,5 +15,5 @@ type TProIcon = {
 export function ProIcon(props: TProIcon) {
   const { className } = props;
 
-  return <Crown className={cn("inline-block h-3.5 w-3.5 text-amber-400", className)} />;
+  return <Crown className={cn("text-amber-400 inline-block h-3.5 w-3.5", className)} />;
 }
diff --git a/apps/web/core/components/common/quick-actions-factory.tsx b/apps/web/core/components/common/quick-actions-factory.tsx
new file mode 100644
index 000000000..ee7f8fb5f
--- /dev/null
+++ b/apps/web/core/components/common/quick-actions-factory.tsx
@@ -0,0 +1,88 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { Pencil, ExternalLink, Link, Trash2, ArchiveRestoreIcon } from "lucide-react";
+import { useTranslation } from "@plane/i18n";
+import { ArchiveIcon } from "@plane/propel/icons";
+import type { TContextMenuItem } from "@plane/ui";
+
+/**
+ * Unified factory for creating menu items across all entities (cycles, modules, views, epics)
+ */
+export const useQuickActionsFactory = () => {
+  const { t } = useTranslation();
+
+  return {
+    // Common menu items
+    createEditMenuItem: (handler: () => void, shouldRender: boolean = true): TContextMenuItem => ({
+      key: "edit",
+      title: t("edit"),
+      icon: Pencil,
+      action: handler,
+      shouldRender,
+    }),
+
+    createOpenInNewTabMenuItem: (handler: () => void): TContextMenuItem => ({
+      key: "open-new-tab",
+      title: t("open_in_new_tab"),
+      icon: ExternalLink,
+      action: handler,
+    }),
+
+    createCopyLinkMenuItem: (handler: () => void): TContextMenuItem => ({
+      key: "copy-link",
+      title: t("copy_link"),
+      icon: Link,
+      action: handler,
+    }),
+
+    createArchiveMenuItem: (
+      handler: () => void,
+      opts: { shouldRender?: boolean; disabled?: boolean; description?: string }
+    ): TContextMenuItem => ({
+      key: "archive",
+      title: t("archive"),
+      icon: ArchiveIcon,
+      action: handler,
+      className: "items-start",
+      iconClassName: "mt-1",
+      description: opts.description,
+      disabled: opts.disabled,
+      shouldRender: opts.shouldRender,
+    }),
+
+    createRestoreMenuItem: (handler: () => void, shouldRender: boolean = true): TContextMenuItem => ({
+      key: "restore",
+      title: t("restore"),
+      icon: ArchiveRestoreIcon,
+      action: handler,
+      shouldRender,
+    }),
+
+    createDeleteMenuItem: (handler: () => void, shouldRender: boolean = true): TContextMenuItem => ({
+      key: "delete",
+      title: t("delete"),
+      icon: Trash2,
+      action: handler,
+      shouldRender,
+    }),
+
+    // Layout-level actions (for work item list views)
+    createOpenInNewTab: (handler: () => void): TContextMenuItem => ({
+      key: "open-in-new-tab",
+      title: "Open in new tab",
+      icon: ExternalLink,
+      action: handler,
+    }),
+
+    createCopyLayoutLinkMenuItem: (handler: () => void): TContextMenuItem => ({
+      key: "copy-link",
+      title: "Copy link",
+      icon: Link,
+      action: handler,
+    }),
+  };
+};
diff --git a/apps/web/core/components/common/quick-actions-helper.tsx b/apps/web/core/components/common/quick-actions-helper.tsx
new file mode 100644
index 000000000..4b9af1dad
--- /dev/null
+++ b/apps/web/core/components/common/quick-actions-helper.tsx
@@ -0,0 +1,151 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// types
+import type { ICycle, IModule, IProjectView, IWorkspaceView } from "@plane/types";
+import type { TContextMenuItem } from "@plane/ui";
+// hooks
+import { useQuickActionsFactory } from "@/plane-web/components/common/quick-actions-factory";
+
+// Types
+interface UseCycleMenuItemsProps {
+  cycleDetails: ICycle | undefined;
+  isEditingAllowed: boolean;
+  workspaceSlug: string;
+  projectId: string;
+  cycleId: string;
+  handleEdit: () => void;
+  handleArchive: () => void;
+  handleRestore: () => void;
+  handleDelete: () => void;
+  handleCopyLink: () => void;
+  handleOpenInNewTab: () => void;
+}
+
+interface UseModuleMenuItemsProps {
+  moduleDetails: IModule | undefined;
+  isEditingAllowed: boolean;
+  workspaceSlug: string;
+  projectId: string;
+  moduleId: string;
+  handleEdit: () => void;
+  handleArchive: () => void;
+  handleRestore: () => void;
+  handleDelete: () => void;
+  handleCopyLink: () => void;
+  handleOpenInNewTab: () => void;
+}
+
+interface UseViewMenuItemsProps {
+  isOwner: boolean;
+  isAdmin: boolean;
+  workspaceSlug: string;
+  projectId?: string;
+  view: IProjectView | IWorkspaceView;
+  handleEdit: () => void;
+  handleDelete: () => void;
+  handleCopyLink: () => void;
+  handleOpenInNewTab: () => void;
+}
+
+interface UseLayoutMenuItemsProps {
+  workspaceSlug: string;
+  projectId: string;
+  storeType: "PROJECT" | "EPIC";
+  handleCopyLink: () => void;
+  handleOpenInNewTab: () => void;
+}
+
+type MenuResult = {
+  items: TContextMenuItem[];
+  modals: JSX.Element | null;
+};
+
+export const useCycleMenuItems = (props: UseCycleMenuItemsProps): MenuResult => {
+  const factory = useQuickActionsFactory();
+  const { cycleDetails, isEditingAllowed, ...handlers } = props;
+
+  const isArchived = !!cycleDetails?.archived_at;
+  const isCompleted = cycleDetails?.status?.toLowerCase() === "completed";
+
+  // Assemble final menu items - order defined here
+  const items = [
+    factory.createEditMenuItem(handlers.handleEdit, isEditingAllowed && !isCompleted && !isArchived),
+    factory.createOpenInNewTabMenuItem(handlers.handleOpenInNewTab),
+    factory.createCopyLinkMenuItem(handlers.handleCopyLink),
+    factory.createArchiveMenuItem(handlers.handleArchive, {
+      shouldRender: isEditingAllowed && !isArchived,
+      disabled: !isCompleted,
+      description: isCompleted ? undefined : "Only completed cycles can be archived",
+    }),
+    factory.createRestoreMenuItem(handlers.handleRestore, isEditingAllowed && isArchived),
+    factory.createDeleteMenuItem(handlers.handleDelete, isEditingAllowed && !isCompleted && !isArchived),
+  ].filter((item) => item.shouldRender !== false);
+
+  return { items, modals: null };
+};
+
+export const useModuleMenuItems = (props: UseModuleMenuItemsProps): MenuResult => {
+  const factory = useQuickActionsFactory();
+  const { moduleDetails, isEditingAllowed, ...handlers } = props;
+
+  const isArchived = !!moduleDetails?.archived_at;
+  const moduleState = moduleDetails?.status?.toLocaleLowerCase();
+  const isInArchivableGroup = !!moduleState && ["completed", "cancelled"].includes(moduleState);
+
+  // Assemble final menu items - order defined here
+  const items = [
+    factory.createEditMenuItem(handlers.handleEdit, isEditingAllowed && !isArchived),
+    factory.createOpenInNewTabMenuItem(handlers.handleOpenInNewTab),
+    factory.createCopyLinkMenuItem(handlers.handleCopyLink),
+    factory.createArchiveMenuItem(handlers.handleArchive, {
+      shouldRender: isEditingAllowed && !isArchived,
+      disabled: !isInArchivableGroup,
+      description: isInArchivableGroup ? undefined : "Only completed or cancelled modules can be archived",
+    }),
+    factory.createRestoreMenuItem(handlers.handleRestore, isEditingAllowed && isArchived),
+    factory.createDeleteMenuItem(handlers.handleDelete, isEditingAllowed && !isArchived),
+  ].filter((item) => item.shouldRender !== false);
+
+  return { items, modals: null };
+};
+
+export const useViewMenuItems = (props: UseViewMenuItemsProps): MenuResult => {
+  const factory = useQuickActionsFactory();
+  const { workspaceSlug, isOwner, isAdmin, projectId, view, ...handlers } = props;
+
+  if (!view) return { items: [], modals: null };
+
+  // Assemble final menu items - order defined here
+  const items = [
+    factory.createEditMenuItem(handlers.handleEdit, isOwner),
+    factory.createOpenInNewTabMenuItem(handlers.handleOpenInNewTab),
+    factory.createCopyLinkMenuItem(handlers.handleCopyLink),
+    factory.createDeleteMenuItem(handlers.handleDelete, isOwner || isAdmin),
+  ].filter((item) => item.shouldRender !== false);
+
+  return { items, modals: null };
+};
+
+export const useLayoutMenuItems = (props: UseLayoutMenuItemsProps): MenuResult => {
+  const factory = useQuickActionsFactory();
+  const { ...handlers } = props;
+
+  // Assemble final menu items - order defined here
+  const items = [
+    factory.createOpenInNewTab(handlers.handleOpenInNewTab),
+    factory.createCopyLayoutLinkMenuItem(handlers.handleCopyLink),
+  ].filter((item) => item.shouldRender !== false);
+
+  return { items, modals: null };
+};
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const useIntakeHeaderMenuItems = (props: {
+  workspaceSlug: string;
+  projectId: string;
+  handleCopyLink: () => void;
+}): MenuResult => ({ items: [], modals: null });
diff --git a/apps/web/core/components/common/switcher-label.tsx b/apps/web/core/components/common/switcher-label.tsx
index 149fc18e9..e19d23278 100644
--- a/apps/web/core/components/common/switcher-label.tsx
+++ b/apps/web/core/components/common/switcher-label.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { FC } from "react";
 import { Logo } from "@plane/propel/emoji-icon-picker";
 import type { ISvgIcons } from "@plane/propel/icons";
@@ -22,7 +28,7 @@ export function SwitcherIcon({ logo_props, logo_url, LabelIcon, size = 12, type
       <img
         src={getFileURL(logo_url)}
         alt="logo"
-        className="rounded-sm object-cover"
+        className="rounded-xs object-cover"
         style={{ height: size, width: size }}
       />
     );
@@ -41,7 +47,7 @@ type TSwitcherLabelProps = {
 export function SwitcherLabel(props: TSwitcherLabelProps) {
   const { logo_props, name, LabelIcon, logo_url, type = "lucide" } = props;
   return (
-    <div className="flex items-center gap-1 text-custom-text-200">
+    <div className="flex items-center gap-1 text-secondary">
       <SwitcherIcon logo_props={logo_props} logo_url={logo_url} LabelIcon={LabelIcon} type={type} />
       {truncateText(name ?? "", 40)}
     </div>
diff --git a/apps/web/core/components/core/activity.tsx b/apps/web/core/components/core/activity.tsx
index 92407ca4d..cfda5937a 100644
--- a/apps/web/core/components/core/activity.tsx
+++ b/apps/web/core/components/core/activity.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useEffect } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
@@ -59,13 +65,13 @@ export function IssueLink({ activity }: { activity: IIssueActivity }) {
           href={workItemLink}
           target={activity.issue === null ? "_self" : "_blank"}
           rel={activity.issue === null ? "" : "noopener noreferrer"}
-          className="inline items-center gap-1 font-medium text-custom-text-100 hover:underline"
+          className="inline items-center gap-1 font-medium text-primary hover:underline"
         >
           <span className="whitespace-nowrap">{`${activity.project_detail.identifier}-${activity.issue_detail.sequence_id}`}</span>{" "}
-          <span className="font-normal break-all">{activity.issue_detail?.name}</span>
+          <span className="font-regular break-all">{activity.issue_detail?.name}</span>
         </a>
       ) : (
-        <span className="inline-flex items-center gap-1 font-medium text-custom-text-100 whitespace-nowrap">
+        <span className="inline-flex items-center gap-1 font-medium whitespace-nowrap text-primary">
           {" a work item"}{" "}
         </span>
       )}
@@ -84,7 +90,7 @@ function UserLink({ activity }: { activity: IIssueActivity }) {
       }`}
       target="_blank"
       rel="noopener noreferrer"
-      className="inline-flex items-center font-medium text-custom-text-100 hover:underline"
+      className="inline-flex items-center font-medium text-primary hover:underline"
     >
       {activity.new_value && activity.new_value !== "" ? activity.new_value : activity.old_value}
     </a>
@@ -177,7 +183,7 @@ const activityDetails: {
           </>
         );
     },
-    icon: <Users2Icon size={12} className="text-custom-text-200" aria-hidden="true" />,
+    icon: <Users2Icon size={12} className="text-secondary" aria-hidden="true" />,
   },
   archived_at: {
     message: (activity) => {
@@ -194,7 +200,7 @@ const activityDetails: {
           </>
         );
     },
-    icon: <ArchiveIcon size={12} className="text-custom-text-200" aria-hidden="true" />,
+    icon: <ArchiveIcon size={12} className="text-secondary" aria-hidden="true" />,
   },
   attachment: {
     message: (activity, showIssue) => {
@@ -223,7 +229,7 @@ const activityDetails: {
           </>
         );
     },
-    icon: <PaperclipIcon size={12} className="text-custom-text-200" aria-hidden="true" />,
+    icon: <PaperclipIcon size={12} className="text-secondary" aria-hidden="true" />,
   },
   description: {
     message: (activity, showIssue) => (
@@ -237,7 +243,7 @@ const activityDetails: {
         )}
       </>
     ),
-    icon: <MessageSquareIcon size={12} className="text-custom-text-200" aria-hidden="true" />,
+    icon: <MessageSquareIcon size={12} className="text-secondary" aria-hidden="true" />,
   },
   estimate_point: {
     message: (activity, showIssue) => {
@@ -266,7 +272,7 @@ const activityDetails: {
           </>
         );
     },
-    icon: <TriangleIcon size={12} className="text-custom-text-200" aria-hidden="true" />,
+    icon: <TriangleIcon size={12} className="text-secondary" aria-hidden="true" />,
   },
   issue: {
     message: (activity) => {
@@ -289,7 +295,7 @@ const activityDetails: {
           </>
         );
     },
-    icon: <WorkItemsIcon width={12} height={12} className="text-custom-text-200" aria-hidden="true" />,
+    icon: <WorkItemsIcon width={12} height={12} className="text-secondary" aria-hidden="true" />,
   },
   epic: {
     message: (activity) => {
@@ -312,7 +318,7 @@ const activityDetails: {
           </>
         );
     },
-    icon: <EpicIcon width={12} height={12} className="text-custom-text-200" aria-hidden="true" />,
+    icon: <EpicIcon width={12} height={12} className="text-secondary" aria-hidden="true" />,
   },
   labels: {
     message: (activity, showIssue, workspaceSlug) => {
@@ -320,11 +326,9 @@ const activityDetails: {
         return (
           <span className="overflow-hidden">
             added a new label{" "}
-            <span className="inline-flex items-center gap-2 rounded-full border border-custom-border-300 px-2 py-0.5 text-xs">
+            <span className="inline-flex items-center gap-2 rounded-full border border-strong px-2 py-0.5 text-11">
               <LabelPill labelId={activity.new_identifier ?? ""} workspaceSlug={workspaceSlug} />
-              <span className="flex-shrink font-medium text-custom-text-100 break-all line-clamp-1">
-                {activity.new_value}
-              </span>
+              <span className="line-clamp-1 flex-shrink font-medium break-all text-primary">{activity.new_value}</span>
             </span>
             {showIssue && (
               <span className="">
@@ -338,11 +342,9 @@ const activityDetails: {
         return (
           <>
             removed the label{" "}
-            <span className="inline-flex items-center gap-2 rounded-full border border-custom-border-300 px-2 py-0.5 text-xs">
+            <span className="inline-flex items-center gap-2 rounded-full border border-strong px-2 py-0.5 text-11">
               <LabelPill labelId={activity.old_identifier ?? ""} workspaceSlug={workspaceSlug} />
-              <span className="flex-shrink font-medium text-custom-text-100 break-all line-clamp-1">
-                {activity.old_value}
-              </span>
+              <span className="line-clamp-1 flex-shrink font-medium break-all text-primary">{activity.old_value}</span>
             </span>
             {showIssue && (
               <span>
@@ -353,7 +355,7 @@ const activityDetails: {
           </>
         );
     },
-    icon: <TagIcon size={12} className="text-custom-text-200" aria-hidden="true" />,
+    icon: <TagIcon size={12} className="text-secondary" aria-hidden="true" />,
   },
   link: {
     message: (activity, showIssue) => {
@@ -365,7 +367,7 @@ const activityDetails: {
               href={`${activity.new_value}`}
               target="_blank"
               rel="noopener noreferrer"
-              className="inline-flex items-center gap-1 font-medium text-custom-text-100 hover:underline"
+              className="inline-flex items-center gap-1 font-medium text-primary hover:underline"
             >
               link
             </a>
@@ -385,7 +387,7 @@ const activityDetails: {
               href={`${activity.old_value}`}
               target="_blank"
               rel="noopener noreferrer"
-              className="inline-flex items-center gap-1 font-medium text-custom-text-100 hover:underline"
+              className="inline-flex items-center gap-1 font-medium text-primary hover:underline"
             >
               link
             </a>
@@ -405,7 +407,7 @@ const activityDetails: {
               href={`${activity.old_value}`}
               target="_blank"
               rel="noopener noreferrer"
-              className="inline-flex items-center gap-1 font-medium text-custom-text-100 hover:underline"
+              className="inline-flex items-center gap-1 font-medium text-primary hover:underline"
             >
               link
             </a>
@@ -418,7 +420,7 @@ const activityDetails: {
           </>
         );
     },
-    icon: <Link2Icon size={12} className="text-custom-text-200" aria-hidden="true" />,
+    icon: <Link2Icon size={12} className="text-secondary" aria-hidden="true" />,
   },
   cycles: {
     message: (activity, showIssue, workspaceSlug) => {
@@ -433,7 +435,7 @@ const activityDetails: {
               href={`/${workspaceSlug}/projects/${activity.project}/cycles/${activity.new_identifier}`}
               target="_blank"
               rel="noopener noreferrer"
-              className="inline items-center gap-1 font-medium text-custom-text-100 hover:underline"
+              className="inline items-center gap-1 font-medium text-primary hover:underline"
             >
               <span className="break-all">{activity.new_value}</span>
             </a>
@@ -447,7 +449,7 @@ const activityDetails: {
               href={`/${workspaceSlug}/projects/${activity.project}/cycles/${activity.new_identifier}`}
               target="_blank"
               rel="noopener noreferrer"
-              className="inline items-center gap-1 font-medium text-custom-text-100 hover:underline"
+              className="inline items-center gap-1 font-medium text-primary hover:underline"
             >
               <span className="break-all">{activity.new_value}</span>
             </a>
@@ -461,14 +463,14 @@ const activityDetails: {
               href={`/${workspaceSlug}/projects/${activity.project}/cycles/${activity.old_identifier}`}
               target="_blank"
               rel="noopener noreferrer"
-              className="inline items-center gap-1 font-medium text-custom-text-100 hover:underline"
+              className="inline items-center gap-1 font-medium text-primary hover:underline"
             >
               <span className="break-all">{activity.old_value}</span>
             </a>
           </>
         );
     },
-    icon: <CycleIcon height={12} width={12} className="text-custom-text-200" aria-hidden="true" />,
+    icon: <CycleIcon height={12} width={12} className="text-secondary" aria-hidden="true" />,
   },
   modules: {
     message: (activity, showIssue, workspaceSlug) => {
@@ -480,7 +482,7 @@ const activityDetails: {
               href={`/${workspaceSlug}/projects/${activity.project}/modules/${activity.new_identifier}`}
               target="_blank"
               rel="noopener noreferrer"
-              className="inline items-center gap-1 font-medium text-custom-text-100 hover:underline"
+              className="inline items-center gap-1 font-medium text-primary hover:underline"
             >
               <span className="break-all">{activity.new_value}</span>
             </a>
@@ -494,7 +496,7 @@ const activityDetails: {
               href={`/${workspaceSlug}/projects/${activity.project}/modules/${activity.new_identifier}`}
               target="_blank"
               rel="noopener noreferrer"
-              className="inline items-center gap-1 font-medium text-custom-text-100 hover:underline"
+              className="inline items-center gap-1 font-medium text-primary hover:underline"
             >
               <span className="break-all">{activity.new_value}</span>
             </a>
@@ -508,14 +510,14 @@ const activityDetails: {
               href={`/${workspaceSlug}/projects/${activity.project}/modules/${activity.old_identifier}`}
               target="_blank"
               rel="noopener noreferrer"
-              className="inline items-center gap-1 font-medium text-custom-text-100 hover:underline"
+              className="inline items-center gap-1 font-medium text-primary hover:underline"
             >
               <span className="break-all">{activity.old_value}</span>
             </a>
           </>
         );
     },
-    icon: <ModuleIcon className="h-3 w-3 !text-custom-text-200" aria-hidden="true" />,
+    icon: <ModuleIcon className="h-3 w-3 !text-secondary" aria-hidden="true" />,
   },
   name: {
     message: (activity, showIssue) => (
@@ -529,15 +531,14 @@ const activityDetails: {
         )}
       </>
     ),
-    icon: <MessageSquareIcon size={12} className="text-custom-text-200" aria-hidden="true" />,
+    icon: <MessageSquareIcon size={12} className="text-secondary" aria-hidden="true" />,
   },
   parent: {
     message: (activity, showIssue) => {
       if (!activity.new_value)
         return (
           <>
-            removed the parent{" "}
-            <span className="font-medium text-custom-text-100 whitespace-nowrap">{activity.old_value}</span>
+            removed the parent <span className="font-medium whitespace-nowrap text-primary">{activity.old_value}</span>
             {showIssue && (
               <>
                 {" "}
@@ -549,8 +550,7 @@ const activityDetails: {
       else
         return (
           <>
-            set the parent to{" "}
-            <span className="font-medium text-custom-text-100 whitespace-nowrap">{activity.new_value}</span>
+            set the parent to <span className="font-medium whitespace-nowrap text-primary">{activity.new_value}</span>
             {showIssue && (
               <>
                 {" "}
@@ -560,13 +560,13 @@ const activityDetails: {
           </>
         );
     },
-    icon: <UsersIcon className="h-3 w-3 !text-custom-text-200" aria-hidden="true" />,
+    icon: <UsersIcon className="h-3 w-3 !text-secondary" aria-hidden="true" />,
   },
   priority: {
     message: (activity, showIssue) => (
       <>
         set the priority to{" "}
-        <span className="font-medium text-custom-text-100">
+        <span className="font-medium text-primary">
           {activity.new_value ? capitalizeFirstLetter(activity.new_value) : "None"}
         </span>
         {showIssue && (
@@ -577,7 +577,7 @@ const activityDetails: {
         )}
       </>
     ),
-    icon: <SignalMediumIcon size={12} className="text-custom-text-200" aria-hidden="true" />,
+    icon: <SignalMediumIcon size={12} className="text-secondary" aria-hidden="true" />,
   },
   relates_to: {
     message: (activity, showIssue) => {
@@ -585,18 +585,18 @@ const activityDetails: {
         return (
           <>
             marked that {showIssue ? <IssueLink activity={activity} /> : "this work item"} relates to{" "}
-            <span className="font-medium text-custom-text-100 whitespace-nowrap">{activity.new_value}</span>.
+            <span className="font-medium whitespace-nowrap text-primary">{activity.new_value}</span>.
           </>
         );
       else
         return (
           <>
             removed the relation from{" "}
-            <span className="font-medium text-custom-text-100 whitespace-nowrap">{activity.old_value}</span>.
+            <span className="font-medium whitespace-nowrap text-primary">{activity.old_value}</span>.
           </>
         );
     },
-    icon: <RelatedIcon height="12" width="12" className="text-custom-text-200" />,
+    icon: <RelatedIcon height="12" width="12" className="text-secondary" />,
   },
   blocking: {
     message: (activity, showIssue) => {
@@ -604,18 +604,18 @@ const activityDetails: {
         return (
           <>
             marked {showIssue ? <IssueLink activity={activity} /> : "this work item"} is blocking work item{" "}
-            <span className="font-medium text-custom-text-100 whitespace-nowrap">{activity.new_value}</span>.
+            <span className="font-medium whitespace-nowrap text-primary">{activity.new_value}</span>.
           </>
         );
       else
         return (
           <>
             removed the blocking work item{" "}
-            <span className="font-medium text-custom-text-100 whitespace-nowrap">{activity.old_value}</span>.
+            <span className="font-medium whitespace-nowrap text-primary">{activity.old_value}</span>.
           </>
         );
     },
-    icon: <BlockerIcon height="12" width="12" className="text-custom-text-200" />,
+    icon: <BlockerIcon height="12" width="12" className="text-secondary" />,
   },
   blocked_by: {
     message: (activity, showIssue) => {
@@ -623,18 +623,18 @@ const activityDetails: {
         return (
           <>
             marked {showIssue ? <IssueLink activity={activity} /> : "this work item"} is being blocked by{" "}
-            <span className="font-medium text-custom-text-100 whitespace-nowrap">{activity.new_value}</span>.
+            <span className="font-medium whitespace-nowrap text-primary">{activity.new_value}</span>.
           </>
         );
       else
         return (
           <>
             removed {showIssue ? <IssueLink activity={activity} /> : "this work item"} being blocked by work item{" "}
-            <span className="font-medium text-custom-text-100 whitespace-nowrap">{activity.old_value}</span>.
+            <span className="font-medium whitespace-nowrap text-primary">{activity.old_value}</span>.
           </>
         );
     },
-    icon: <BlockedIcon height="12" width="12" className="text-custom-text-200" />,
+    icon: <BlockedIcon height="12" width="12" className="text-secondary" />,
   },
   duplicate: {
     message: (activity, showIssue) => {
@@ -642,23 +642,23 @@ const activityDetails: {
         return (
           <>
             marked {showIssue ? <IssueLink activity={activity} /> : "this work item"} as duplicate of{" "}
-            <span className="font-medium text-custom-text-100 whitespace-nowrap">{activity.new_value}</span>.
+            <span className="font-medium whitespace-nowrap text-primary">{activity.new_value}</span>.
           </>
         );
       else
         return (
           <>
             removed {showIssue ? <IssueLink activity={activity} /> : "this work item"} as a duplicate of{" "}
-            <span className="font-medium text-custom-text-100 whitespace-nowrap">{activity.old_value}</span>.
+            <span className="font-medium whitespace-nowrap text-primary">{activity.old_value}</span>.
           </>
         );
     },
-    icon: <CopyPlus size={12} className="text-custom-text-200" />,
+    icon: <CopyPlus size={12} className="text-secondary" />,
   },
   state: {
     message: (activity, showIssue) => (
       <>
-        set the state to <span className="font-medium text-custom-text-100 break-all">{activity.new_value}</span>
+        set the state to <span className="font-medium break-all text-primary">{activity.new_value}</span>
         {showIssue && (
           <>
             {" "}
@@ -667,7 +667,7 @@ const activityDetails: {
         )}
       </>
     ),
-    icon: <LayoutGridIcon size={12} className="text-custom-text-200" aria-hidden="true" />,
+    icon: <LayoutGridIcon size={12} className="text-secondary" aria-hidden="true" />,
   },
   start_date: {
     message: (activity, showIssue) => {
@@ -687,7 +687,7 @@ const activityDetails: {
         return (
           <>
             set the start date to{" "}
-            <span className="font-medium text-custom-text-100 whitespace-nowrap">
+            <span className="font-medium whitespace-nowrap text-primary">
               {renderFormattedDate(activity.new_value)}
             </span>
             {showIssue && (
@@ -699,7 +699,7 @@ const activityDetails: {
           </>
         );
     },
-    icon: <Calendar size={12} className="text-custom-text-200" aria-hidden="true" />,
+    icon: <Calendar size={12} className="text-secondary" aria-hidden="true" />,
   },
   target_date: {
     message: (activity, showIssue) => {
@@ -719,7 +719,7 @@ const activityDetails: {
         return (
           <>
             set the due date to{" "}
-            <span className="font-medium text-custom-text-100 whitespace-nowrap">
+            <span className="font-medium whitespace-nowrap text-primary">
               {renderFormattedDate(activity.new_value)}
             </span>
             {showIssue && (
@@ -730,7 +730,7 @@ const activityDetails: {
           </>
         );
     },
-    icon: <Calendar size={12} className="text-custom-text-200" aria-hidden="true" />,
+    icon: <Calendar size={12} className="text-secondary" aria-hidden="true" />,
   },
   inbox: {
     message: (activity, showIssue) => (
@@ -745,7 +745,7 @@ const activityDetails: {
         {activity.verb === "2" && ` from intake by marking a duplicate work item.`}
       </>
     ),
-    icon: <IntakeIcon className="size-3 text-custom-text-200" aria-hidden="true" />,
+    icon: <IntakeIcon className="size-3 text-secondary" aria-hidden="true" />,
   },
 };
 
diff --git a/apps/web/core/components/core/app-header.tsx b/apps/web/core/components/core/app-header.tsx
index 4885a1b4d..4ea58e369 100644
--- a/apps/web/core/components/core/app-header.tsx
+++ b/apps/web/core/components/core/app-header.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { ReactNode } from "react";
 import { observer } from "mobx-react";
 // plane imports
@@ -18,12 +24,7 @@ export const AppHeader = observer(function AppHeader(props: AppHeaderProps) {
 
   return (
     <div className={cn("z-[18]", className)}>
-      <Row
-        className={cn(
-          "h-11 flex gap-2 w-full items-center border-b border-custom-border-200 bg-custom-sidebar-background-100",
-          rowClassName
-        )}
-      >
+      <Row className={cn("flex h-11 w-full items-center gap-2 border-b border-subtle bg-surface-1", rowClassName)}>
         <ExtendedAppHeader header={header} />
       </Row>
       {mobileHeader && mobileHeader}
diff --git a/apps/web/core/components/core/content-overflow-HOC.tsx b/apps/web/core/components/core/content-overflow-HOC.tsx
index 7463c2ae3..06f1524f3 100644
--- a/apps/web/core/components/core/content-overflow-HOC.tsx
+++ b/apps/web/core/components/core/content-overflow-HOC.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { ReactNode } from "react";
 import { useEffect, useRef, useState } from "react";
 import { observer } from "mobx-react";
@@ -18,7 +24,7 @@ export const ContentOverflowWrapper = observer(function ContentOverflowWrapper(p
   const {
     children,
     maxHeight = 625,
-    buttonClassName = "text-sm font-medium text-custom-primary-100",
+    buttonClassName = "text-13 font-medium text-accent-primary",
     containerClassName,
     fallback = null,
     customButton,
@@ -128,7 +134,7 @@ export const ContentOverflowWrapper = observer(function ContentOverflowWrapper(p
         <div
           className={cn(
             "bottom-0 left-0 w-full transition-all duration-300 ease-in-out",
-            `bg-gradient-to-t from-custom-background-100 to-transparent flex flex-col items-center justify-end`,
+            `flex flex-col items-center justify-end bg-gradient-to-t from-surface-1 to-transparent`,
             "text-center",
             {
               "absolute h-[100px] opacity-100": !showAll,
@@ -142,7 +148,7 @@ export const ContentOverflowWrapper = observer(function ContentOverflowWrapper(p
           {customButton || (
             <button
               className={cn(
-                "gap-1 w-full text-custom-primary-100 text-sm font-medium transition-opacity duration-300",
+                "w-full gap-1 text-13 font-medium text-accent-primary transition-opacity duration-300",
                 buttonClassName
               )}
               onClick={handleToggle}
diff --git a/apps/web/core/components/core/content-wrapper.tsx b/apps/web/core/components/core/content-wrapper.tsx
index 0d0d796be..c40b50470 100644
--- a/apps/web/core/components/core/content-wrapper.tsx
+++ b/apps/web/core/components/core/content-wrapper.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { ReactNode } from "react";
 // helpers
 import { cn } from "@plane/utils";
diff --git a/apps/web/core/components/core/description-versions/dropdown-item.tsx b/apps/web/core/components/core/description-versions/dropdown-item.tsx
index 3595853d7..b8abb5baa 100644
--- a/apps/web/core/components/core/description-versions/dropdown-item.tsx
+++ b/apps/web/core/components/core/description-versions/dropdown-item.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 // plane imports
 import { useTranslation } from "@plane/i18n";
@@ -30,7 +36,7 @@ export const DescriptionVersionsDropdownItem = observer(function DescriptionVers
           src={getFileURL(versionCreator?.avatar_url ?? "")}
         />
       </span>
-      <p className="text-xs text-custom-text-200 flex items-center gap-1.5">
+      <p className="flex items-center gap-1.5 text-11 text-secondary">
         <span className="font-medium">{versionCreator?.display_name ?? t("common.deactivated_user")}</span>
         <span>{calculateTimeAgo(version.last_saved_at)}</span>
       </p>
diff --git a/apps/web/core/components/core/description-versions/dropdown.tsx b/apps/web/core/components/core/description-versions/dropdown.tsx
index d048050cb..774906644 100644
--- a/apps/web/core/components/core/description-versions/dropdown.tsx
+++ b/apps/web/core/components/core/description-versions/dropdown.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import { History } from "lucide-react";
 // plane imports
@@ -34,11 +40,11 @@ export const DescriptionVersionsDropdown = observer(function DescriptionVersions
   return (
     <CustomMenu
       label={
-        <div className="flex items-center gap-1 text-custom-text-300">
-          <span className="flex-shrink-0 size-4 grid place-items-center">
+        <div className="flex items-center gap-1 text-tertiary">
+          <span className="grid size-4 flex-shrink-0 place-items-center">
             <History className="size-3.5" />
           </span>
-          <p className="text-xs">
+          <p className="text-11">
             {t("description_versions.last_edited_by")}{" "}
             <span className="font-medium">{lastUpdatedByUserDisplayName ?? t("common.deactivated_user")}</span>{" "}
             {calculateTimeAgo(lastUpdatedAt)}
@@ -52,7 +58,7 @@ export const DescriptionVersionsDropdown = observer(function DescriptionVersions
       disabled={disabled}
       closeOnSelect
     >
-      <p className="text-xs text-custom-text-300 font-medium mb-1">{t("description_versions.previously_edited_by")}</p>
+      <p className="mb-1 text-11 font-medium text-tertiary">{t("description_versions.previously_edited_by")}</p>
       {versions?.map((version) => (
         <DescriptionVersionsDropdownItem key={version.id} onClick={onVersionClick} version={version} />
       ))}
diff --git a/apps/web/core/components/core/description-versions/index.ts b/apps/web/core/components/core/description-versions/index.ts
index 1efe34c51..d98033459 100644
--- a/apps/web/core/components/core/description-versions/index.ts
+++ b/apps/web/core/components/core/description-versions/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./root";
diff --git a/apps/web/core/components/core/description-versions/modal.tsx b/apps/web/core/components/core/description-versions/modal.tsx
index fbb04b5c0..854b50922 100644
--- a/apps/web/core/components/core/description-versions/modal.tsx
+++ b/apps/web/core/components/core/description-versions/modal.tsx
@@ -1,21 +1,27 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useCallback, useRef } from "react";
 import { observer } from "mobx-react";
-import { Copy } from "lucide-react";
 // plane imports
 import type { EditorRefApi } from "@plane/editor";
 import { useTranslation } from "@plane/i18n";
-import { Button, getButtonStyling } from "@plane/propel/button";
-import { ChevronLeftIcon, ChevronRightIcon } from "@plane/propel/icons";
+import { Button } from "@plane/propel/button";
+import { CopyIcon, ChevronLeftIcon, ChevronRightIcon } from "@plane/propel/icons";
 import { setToast, TOAST_TYPE } from "@plane/propel/toast";
 import { Tooltip } from "@plane/propel/tooltip";
 import type { TDescriptionVersion } from "@plane/types";
 import { Avatar, EModalPosition, EModalWidth, Loader, ModalCore } from "@plane/ui";
-import { calculateTimeAgo, cn, copyTextToClipboard, getFileURL } from "@plane/utils";
+import { calculateTimeAgo, cn, getFileURL } from "@plane/utils";
 // components
 import { RichTextEditor } from "@/components/editor/rich-text";
 // hooks
 import { useMember } from "@/hooks/store/use-member";
 import { useWorkspace } from "@/hooks/store/use-workspace";
+import { IconButton } from "@plane/propel/icon-button";
 
 type Props = {
   activeVersionDescription: string | undefined;
@@ -59,13 +65,12 @@ export const DescriptionVersionsModal = observer(function DescriptionVersionsMod
 
   const handleCopyMarkdown = useCallback(() => {
     if (!editorRef.current) return;
-    copyTextToClipboard(editorRef.current.getMarkDown()).then(() =>
-      setToast({
-        type: TOAST_TYPE.SUCCESS,
-        title: t("toast.success"),
-        message: "Markdown copied to clipboard.",
-      })
-    );
+    editorRef.current.copyMarkdownToClipboard();
+    setToast({
+      type: TOAST_TYPE.SUCCESS,
+      title: t("toast.success"),
+      message: "Markdown copied to clipboard.",
+    });
   }, [t]);
 
   if (!workspaceId) return null;
@@ -75,7 +80,7 @@ export const DescriptionVersionsModal = observer(function DescriptionVersionsMod
       <div className="p-4" data-prevent-outside-click>
         {/* Header */}
         <div className="flex items-center justify-between gap-2 py-0.5">
-          <div className="flex-shrink-0 flex items-center gap-2 text-sm">
+          <div className="flex flex-shrink-0 items-center gap-2 text-13">
             <p className="flex items-center gap-1">
               {t("description_versions.edited_by")}
               <span className="flex-shrink-0">
@@ -86,21 +91,18 @@ export const DescriptionVersionsModal = observer(function DescriptionVersionsMod
                 />
               </span>
             </p>
-            <p className="flex-shrink-0 text-custom-text-200">
+            <p className="flex-shrink-0 text-secondary">
               {calculateTimeAgo(activeVersionDetails?.last_saved_at ?? "")}
             </p>
           </div>
-          <div className="flex-shrink-0 flex items-center">
+          <div className="flex flex-shrink-0 items-center">
             <button
               type="button"
               onClick={() => handleNavigation("prev")}
-              className={cn(
-                "size-6 text-custom-text-200 grid place-items-center rounded outline-none transition-colors",
-                {
-                  "hover:bg-custom-background-80": !isPrevDisabled,
-                  "opacity-50": isPrevDisabled,
-                }
-              )}
+              className={cn("grid size-6 place-items-center rounded-sm text-secondary transition-colors outline-none", {
+                "hover:bg-layer-1": !isPrevDisabled,
+                "opacity-50": isPrevDisabled,
+              })}
               disabled={isPrevDisabled}
             >
               <ChevronLeftIcon className="size-4" />
@@ -108,13 +110,10 @@ export const DescriptionVersionsModal = observer(function DescriptionVersionsMod
             <button
               type="button"
               onClick={() => handleNavigation("next")}
-              className={cn(
-                "size-6 text-custom-text-200 grid place-items-center rounded outline-none transition-colors",
-                {
-                  "hover:bg-custom-background-80": !isNextDisabled,
-                  "opacity-50": isNextDisabled,
-                }
-              )}
+              className={cn("grid size-6 place-items-center rounded-sm text-secondary transition-colors outline-none", {
+                "hover:bg-layer-1": !isNextDisabled,
+                "opacity-50": isNextDisabled,
+              })}
               disabled={isNextDisabled}
             >
               <ChevronRightIcon className="size-4" />
@@ -156,28 +155,18 @@ export const DescriptionVersionsModal = observer(function DescriptionVersionsMod
         </div>
         {/* End version description */}
         {/* Footer */}
-        <div className="flex items-center justify-between gap-2 pt-4 border-t-[0.5px] border-custom-border-200">
+        <div className="flex items-center justify-between gap-2 border-t-[0.5px] border-subtle pt-4">
           <Tooltip tooltipContent={t("common.actions.copy_markdown")}>
-            <button
-              type="button"
-              className={cn(
-                "flex-shrink-0",
-                getButtonStyling("neutral-primary", "sm"),
-                "border-none grid place-items-center"
-              )}
-              onClick={handleCopyMarkdown}
-            >
-              <Copy className="size-4" />
-            </button>
+            <IconButton type="button" variant="ghost" size="base" onClick={handleCopyMarkdown} icon={CopyIcon} />
           </Tooltip>
           <div className="flex items-center gap-2">
-            <Button variant="neutral-primary" size="sm" onClick={handleClose} tabIndex={1}>
+            <Button variant="secondary" size="lg" onClick={handleClose} tabIndex={1}>
               {t("common.cancel")}
             </Button>
             {!isRestoreDisabled && (
               <Button
                 variant="primary"
-                size="sm"
+                size="lg"
                 onClick={() => {
                   handleRestore(activeVersionDescription ?? "<p></p>");
                   handleClose();
diff --git a/apps/web/core/components/core/description-versions/root.tsx b/apps/web/core/components/core/description-versions/root.tsx
index e46529351..9922cd27a 100644
--- a/apps/web/core/components/core/description-versions/root.tsx
+++ b/apps/web/core/components/core/description-versions/root.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useCallback, useState } from "react";
 import { observer } from "mobx-react";
 import useSWR from "swr";
diff --git a/apps/web/core/components/core/filters/date-filter-modal.tsx b/apps/web/core/components/core/filters/date-filter-modal.tsx
index 4fda9e10c..0f1ac2c53 100644
--- a/apps/web/core/components/core/filters/date-filter-modal.tsx
+++ b/apps/web/core/components/core/filters/date-filter-modal.tsx
@@ -1,12 +1,14 @@
-import { Fragment } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { Controller, useForm } from "react-hook-form";
-
-import { Dialog, Transition } from "@headlessui/react";
-
 import { Button } from "@plane/propel/button";
 import { Calendar } from "@plane/propel/calendar";
-
 import { CloseIcon } from "@plane/propel/icons";
+import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
 import { renderFormattedPayloadDate, renderFormattedDate, getDate } from "@plane/utils";
 import { DateFilterSelect } from "./date-filter-select";
 type Props = {
@@ -49,118 +51,89 @@ export function DateFilterModal({ title, handleClose, isOpen, onSelect }: Props)
   const isInvalid = watch("filterType") === "range" && date1 && date2 ? date1 > date2 : false;
 
   return (
-    <Transition.Root show={isOpen} as={Fragment}>
-      <Dialog as="div" className="relative z-30" onClose={handleClose}>
-        <Transition.Child
-          as={Fragment}
-          enter="ease-out duration-300"
-          enterFrom="opacity-0"
-          enterTo="opacity-100"
-          leave="ease-in duration-200"
-          leaveFrom="opacity-100"
-          leaveTo="opacity-0"
-        >
-          <div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
-        </Transition.Child>
-        <div className="fixed inset-0 z-20 flex w-full justify-center overflow-y-auto">
-          <div className="flex min-h-full items-center justify-center p-4 text-center sm:p-0">
-            <Transition.Child
-              as={Fragment}
-              enter="ease-out duration-300"
-              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-              enterTo="opacity-100 translate-y-0 sm:scale-100"
-              leave="ease-in duration-200"
-              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-            >
-              <Dialog.Panel className="relative flex transform rounded-lg bg-custom-background-100 px-5 py-8 text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
-                <form className="space-y-4">
-                  <div className="flex w-full justify-between">
-                    <Controller
-                      control={control}
-                      name="filterType"
-                      render={({ field: { value, onChange } }) => (
-                        <DateFilterSelect title={title} value={value} onChange={onChange} />
-                      )}
-                    />
-                    <CloseIcon className="h-4 w-4 cursor-pointer" onClick={handleClose} />
-                  </div>
-                  <div className="flex w-full justify-between gap-4">
-                    <Controller
-                      control={control}
-                      name="date1"
-                      render={({ field: { value, onChange } }) => {
-                        const dateValue = getDate(value);
-                        const date2Value = getDate(watch("date2"));
-                        return (
-                          <Calendar
-                            className="rounded-md border border-custom-border-200 p-3"
-                            captionLayout="dropdown"
-                            selected={dateValue}
-                            defaultMonth={dateValue}
-                            onSelect={(date: Date | undefined) => {
-                              if (!date) return;
-                              onChange(date);
-                            }}
-                            mode="single"
-                            disabled={date2Value ? [{ after: date2Value }] : undefined}
-                          />
-                        );
-                      }}
-                    />
-                    {watch("filterType") === "range" && (
-                      <Controller
-                        control={control}
-                        name="date2"
-                        render={({ field: { value, onChange } }) => {
-                          const dateValue = getDate(value);
-                          const date1Value = getDate(watch("date1"));
-                          return (
-                            <Calendar
-                              className="rounded-md border border-custom-border-200 p-3"
-                              captionLayout="dropdown"
-                              selected={dateValue}
-                              defaultMonth={dateValue}
-                              onSelect={(date: Date | undefined) => {
-                                if (!date) return;
-                                onChange(date);
-                              }}
-                              mode="single"
-                              disabled={date1Value ? [{ before: date1Value }] : undefined}
-                            />
-                          );
-                        }}
-                      />
-                    )}
-                  </div>
-                  {watch("filterType") === "range" && (
-                    <h6 className="flex items-center gap-1 text-xs">
-                      <span className="text-custom-text-200">After:</span>
-                      <span>{renderFormattedDate(watch("date1"))}</span>
-                      <span className="ml-1 text-custom-text-200">Before:</span>
-                      {!isInvalid && <span>{renderFormattedDate(watch("date2"))}</span>}
-                    </h6>
-                  )}
-                  <div className="flex justify-end gap-4">
-                    <Button variant="neutral-primary" size="sm" onClick={handleClose}>
-                      Cancel
-                    </Button>
-                    <Button
-                      variant="primary"
-                      size="sm"
-                      type="button"
-                      onClick={handleSubmit(handleFormSubmit)}
-                      disabled={isInvalid}
-                    >
-                      Apply
-                    </Button>
-                  </div>
-                </form>
-              </Dialog.Panel>
-            </Transition.Child>
-          </div>
+    <ModalCore isOpen={isOpen} handleClose={handleClose} position={EModalPosition.CENTER} width={EModalWidth.XXL}>
+      <form className="space-y-4 px-5 py-8 sm:p-6">
+        <div className="flex w-full justify-between">
+          <Controller
+            control={control}
+            name="filterType"
+            render={({ field: { value, onChange } }) => (
+              <DateFilterSelect title={title} value={value} onChange={onChange} />
+            )}
+          />
+          <CloseIcon className="h-4 w-4 cursor-pointer" onClick={handleClose} />
         </div>
-      </Dialog>
-    </Transition.Root>
+        <div className="flex w-full justify-between gap-4">
+          <Controller
+            control={control}
+            name="date1"
+            render={({ field: { value, onChange } }) => {
+              const dateValue = getDate(value);
+              const date2Value = getDate(watch("date2"));
+              return (
+                <Calendar
+                  className="rounded-md border border-subtle p-3"
+                  captionLayout="dropdown"
+                  selected={dateValue}
+                  defaultMonth={dateValue}
+                  onSelect={(date: Date | undefined) => {
+                    if (!date) return;
+                    onChange(date);
+                  }}
+                  mode="single"
+                  disabled={date2Value ? [{ after: date2Value }] : undefined}
+                />
+              );
+            }}
+          />
+          {watch("filterType") === "range" && (
+            <Controller
+              control={control}
+              name="date2"
+              render={({ field: { value, onChange } }) => {
+                const dateValue = getDate(value);
+                const date1Value = getDate(watch("date1"));
+                return (
+                  <Calendar
+                    className="rounded-md border border-subtle p-3"
+                    captionLayout="dropdown"
+                    selected={dateValue}
+                    defaultMonth={dateValue}
+                    onSelect={(date: Date | undefined) => {
+                      if (!date) return;
+                      onChange(date);
+                    }}
+                    mode="single"
+                    disabled={date1Value ? [{ before: date1Value }] : undefined}
+                  />
+                );
+              }}
+            />
+          )}
+        </div>
+        {watch("filterType") === "range" && (
+          <h6 className="flex items-center gap-1 text-11">
+            <span className="text-secondary">After:</span>
+            <span>{renderFormattedDate(watch("date1"))}</span>
+            <span className="ml-1 text-secondary">Before:</span>
+            {!isInvalid && <span>{renderFormattedDate(watch("date2"))}</span>}
+          </h6>
+        )}
+        <div className="flex justify-end gap-4">
+          <Button variant="secondary" size="lg" onClick={handleClose}>
+            Cancel
+          </Button>
+          <Button
+            variant="primary"
+            size="lg"
+            type="button"
+            onClick={handleSubmit(handleFormSubmit)}
+            disabled={isInvalid}
+          >
+            Apply
+          </Button>
+        </div>
+      </form>
+    </ModalCore>
   );
 }
diff --git a/apps/web/core/components/core/filters/date-filter-select.tsx b/apps/web/core/components/core/filters/date-filter-select.tsx
index fe378dded..fd106a9fb 100644
--- a/apps/web/core/components/core/filters/date-filter-select.tsx
+++ b/apps/web/core/components/core/filters/date-filter-select.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 import { CalendarDays } from "lucide-react";
 // ui
@@ -39,7 +45,7 @@ export function DateFilterSelect({ title, value, onChange }: Props) {
     <CustomSelect
       value={value}
       label={
-        <div className="flex items-center gap-2 text-xs">
+        <div className="flex items-center gap-2 text-11">
           {dueDateRange.find((item) => item.value === value)?.icon}
           <span>
             {title} {dueDateRange.find((item) => item.value === value)?.name}
diff --git a/apps/web/core/components/core/image-picker-popover.tsx b/apps/web/core/components/core/image-picker-popover.tsx
index f1f7bdcc6..dd7d7dde4 100644
--- a/apps/web/core/components/core/image-picker-popover.tsx
+++ b/apps/web/core/components/core/image-picker-popover.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React, { useState, useRef, useCallback, useMemo } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
@@ -5,11 +11,12 @@ import { useDropzone } from "react-dropzone";
 import type { Control } from "react-hook-form";
 import { Controller } from "react-hook-form";
 import useSWR from "swr";
-import { Tab, Popover } from "@headlessui/react";
+import { Popover } from "@headlessui/react";
 // plane imports
 import { ACCEPTED_COVER_IMAGE_MIME_TYPES_FOR_REACT_DROPZONE, MAX_FILE_SIZE } from "@plane/constants";
 import { useOutsideClickDetector } from "@plane/hooks";
-import { Button } from "@plane/propel/button";
+import { Tabs } from "@plane/propel/tabs";
+import { Button, getButtonStyling } from "@plane/propel/button";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import { EFileAssetType } from "@plane/types";
 import { Input, Loader } from "@plane/ui";
@@ -80,6 +87,8 @@ export const ImagePickerPopover = observer(function ImagePickerPopover(props: Pr
     [hasUnsplashConfigured]
   );
 
+  const enabledTabs = useMemo(() => tabOptions.filter((tab) => tab.isEnabled), [tabOptions]);
+
   const { data: unsplashImages, error: unsplashError } = useSWR(
     `UNSPLASH_IMAGES_${searchParams}`,
     () => fileService.getUnsplashImages(searchParams),
@@ -180,43 +189,33 @@ export const ImagePickerPopover = observer(function ImagePickerPopover(props: Pr
 
   return (
     <Popover className="relative z-19" ref={ref} tabIndex={tabIndex} onKeyDown={handleKeyDown}>
-      <Popover.Button
-        className="rounded border border-custom-border-300 bg-custom-background-100 px-2 py-1 text-xs text-custom-text-200 hover:text-custom-text-100"
-        onClick={handleOnClick}
-        disabled={disabled}
-      >
+      <Popover.Button className={getButtonStyling("secondary", "sm")} onClick={handleOnClick} disabled={disabled}>
         {label}
       </Popover.Button>
 
       {isOpen && (
         <Popover.Panel
-          className="absolute right-0 z-20 mt-2 rounded-md border border-custom-border-200 bg-custom-background-100 shadow-custom-shadow-sm"
+          className="absolute right-0 z-20 mt-2 rounded-md border border-subtle bg-surface-1 shadow-raised-200"
           static
         >
           <div
             ref={imagePickerRef}
-            className="flex h-96 w-80 flex-col overflow-auto rounded border border-custom-border-300 bg-custom-background-100 p-3 shadow-2xl md:h-[28rem] md:w-[36rem]"
+            className="flex h-96 w-80 flex-col overflow-auto rounded border border-subtle bg-surface-1 shadow-raised-200 md:h-[36rem] md:w-[36rem]"
           >
-            <Tab.Group>
-              <Tab.List as="span" className="inline-block rounded bg-custom-background-80 p-1">
-                {tabOptions.map((tab) => (
-                  <Tab
-                    key={tab.key}
-                    className={({ selected }) =>
-                      `rounded px-4 py-1 text-center text-sm outline-none transition-colors ${
-                        selected ? "bg-custom-primary text-white" : "text-custom-text-100"
-                      }`
-                    }
-                  >
+            <Tabs defaultValue={enabledTabs[0]?.key || "images"} className="flex h-full flex-col p-3">
+              <Tabs.List className="flex rounded bg-layer-3 p-1">
+                {enabledTabs.map((tab) => (
+                  <Tabs.Trigger key={tab.key} value={tab.key} size="md">
                     {tab.title}
-                  </Tab>
+                  </Tabs.Trigger>
                 ))}
-              </Tab.List>
-              <Tab.Panels className="vertical-scrollbar scrollbar-md h-full w-full flex-1 overflow-y-auto overflow-x-hidden">
-                <Tab.Panel className="mt-4 h-full w-full space-y-4">
+                <Tabs.Indicator />
+              </Tabs.List>
+              <div className="vertical-scrollbar mt-3 scrollbar-sm flex-1 overflow-x-hidden overflow-y-auto p-3">
+                <Tabs.Content value="unsplash" className="h-full w-full space-y-4">
                   {(unsplashImages || !unsplashError) && (
                     <>
-                      <div className="flex gap-x-2">
+                      <div className="flex items-center gap-x-2">
                         <Controller
                           control={control}
                           name="search"
@@ -235,11 +234,11 @@ export const ImagePickerPopover = observer(function ImagePickerPopover(props: Pr
                               onChange={(e) => setFormData({ ...formData, search: e.target.value })}
                               ref={ref}
                               placeholder="Search for images"
-                              className="w-full text-sm"
+                              className="w-full text-13"
                             />
                           )}
                         />
-                        <Button variant="primary" onClick={() => setSearchParams(formData.search)} size="sm">
+                        <Button variant="primary" size="xl" onClick={() => setSearchParams(formData.search)}>
                           Search
                         </Button>
                       </div>
@@ -258,13 +257,13 @@ export const ImagePickerPopover = observer(function ImagePickerPopover(props: Pr
                                 <img
                                   src={image.urls.small}
                                   alt={image.alt_description}
-                                  className="absolute left-0 top-0 h-full w-full cursor-pointer rounded object-cover"
+                                  className="absolute top-0 left-0 h-full w-full cursor-pointer rounded-sm object-cover"
                                 />
                               </div>
                             ))}
                           </div>
                         ) : (
-                          <p className="pt-7 text-center text-xs text-custom-text-300">No images found.</p>
+                          <p className="pt-7 text-center text-11 text-secondary">No images found.</p>
                         )
                       ) : (
                         <Loader className="grid grid-cols-4 gap-4">
@@ -280,8 +279,8 @@ export const ImagePickerPopover = observer(function ImagePickerPopover(props: Pr
                       )}
                     </>
                   )}
-                </Tab.Panel>
-                <Tab.Panel className="mt-4 h-full w-full space-y-4">
+                </Tabs.Content>
+                <Tabs.Content value="images" className="h-full w-full space-y-4">
                   <div className="grid grid-cols-4 gap-4">
                     {Object.values(STATIC_COVER_IMAGES).map((imageUrl, index) => (
                       <div
@@ -292,26 +291,26 @@ export const ImagePickerPopover = observer(function ImagePickerPopover(props: Pr
                         <img
                           src={imageUrl}
                           alt={`Cover image ${index + 1}`}
-                          className="absolute left-0 top-0 h-full w-full cursor-pointer rounded object-cover hover:opacity-80 transition-opacity"
+                          className="absolute top-0 left-0 h-full w-full cursor-pointer rounded-sm object-cover transition-opacity hover:opacity-80"
                         />
                       </div>
                     ))}
                   </div>
-                </Tab.Panel>
-                <Tab.Panel className="mt-4 h-full w-full">
+                </Tabs.Content>
+                <Tabs.Content value="upload" className="h-full w-full">
                   <div className="flex h-full w-full flex-col gap-y-2">
                     <div className="flex w-full flex-1 items-center gap-3">
                       <div
                         {...getRootProps()}
-                        className={`relative grid h-full w-full cursor-pointer place-items-center rounded-lg p-12 text-center focus:outline-none focus:ring-2 focus:ring-custom-primary focus:ring-offset-2 ${
+                        className={`relative grid h-full w-full cursor-pointer place-items-center rounded-lg p-12 text-center focus:ring-2 focus:ring-accent-strong focus:ring-offset-2 focus:outline-none ${
                           (image === null && isDragActive) || !value
-                            ? "border-2 border-dashed border-custom-border-200 hover:bg-custom-background-90"
+                            ? "border-2 border-dashed border-subtle hover:bg-surface-2"
                             : ""
                         }`}
                       >
                         <button
                           type="button"
-                          className="absolute right-0 top-0 z-40 -translate-y-1/2 rounded bg-custom-background-90 px-2 py-0.5 text-xs font-medium text-custom-text-200"
+                          className="absolute top-0 right-0 z-40 -translate-y-1/2 rounded-sm bg-surface-2 px-2 py-0.5 text-11 font-medium text-secondary"
                         >
                           Edit
                         </button>
@@ -320,12 +319,12 @@ export const ImagePickerPopover = observer(function ImagePickerPopover(props: Pr
                             <img
                               src={image ? URL.createObjectURL(image) : getCoverImageDisplayURL(value, "")}
                               alt="image"
-                              className="rounded-lg h-full w-full object-cover"
+                              className="h-full w-full rounded-lg object-cover"
                             />
                           </>
                         ) : (
                           <div>
-                            <span className="mt-2 block text-sm font-medium text-custom-text-200">
+                            <span className="mt-2 block text-13 font-medium text-secondary">
                               {isDragActive ? "Drop image here to upload" : "Drag & drop image here"}
                             </span>
                           </div>
@@ -335,18 +334,18 @@ export const ImagePickerPopover = observer(function ImagePickerPopover(props: Pr
                       </div>
                     </div>
                     {fileRejections.length > 0 && (
-                      <p className="text-sm text-red-500">
+                      <p className="text-13 text-danger-primary">
                         {fileRejections[0].errors[0].code === "file-too-large"
                           ? "The image size cannot exceed 5 MB."
                           : "Please upload a file in a valid format."}
                       </p>
                     )}
 
-                    <p className="text-sm text-custom-text-200">File formats supported- .jpeg, .jpg, .png, .webp</p>
+                    <p className="text-13 text-secondary">File formats supported- .jpeg, .jpg, .png, .webp</p>
 
                     <div className="flex h-12 items-start justify-end gap-2">
                       <Button
-                        variant="neutral-primary"
+                        variant="secondary"
                         onClick={() => {
                           setIsOpen(false);
                           setImage(null);
@@ -361,13 +360,13 @@ export const ImagePickerPopover = observer(function ImagePickerPopover(props: Pr
                         disabled={!image}
                         loading={isImageUploading}
                       >
-                        {isImageUploading ? "Uploading..." : "Upload & Save"}
+                        {isImageUploading ? "Uploading" : "Upload & Save"}
                       </Button>
                     </div>
                   </div>
-                </Tab.Panel>
-              </Tab.Panels>
-            </Tab.Group>
+                </Tabs.Content>
+              </div>
+            </Tabs>
           </div>
         </Popover.Panel>
       )}
diff --git a/apps/web/core/components/core/list/index.ts b/apps/web/core/components/core/list/index.ts
index d5489c45e..fd1bcf1f2 100644
--- a/apps/web/core/components/core/list/index.ts
+++ b/apps/web/core/components/core/list/index.ts
@@ -1,2 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./list-item";
 export * from "./list-root";
diff --git a/apps/web/core/components/core/list/list-item.tsx b/apps/web/core/components/core/list/list-item.tsx
index c12e02908..cd8621965 100644
--- a/apps/web/core/components/core/list/list-item.tsx
+++ b/apps/web/core/components/core/list/list-item.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 // ui
 import { Tooltip } from "@plane/propel/tooltip";
@@ -64,12 +69,12 @@ export function ListItem(props: IListItemProps) {
     <div ref={parentRef} className="relative">
       <Row
         className={cn(
-          "group min-h-[52px] flex w-full flex-col items-center justify-between gap-3 py-4 text-sm border-b border-custom-border-200 bg-custom-background-100 hover:bg-custom-background-90 ",
-          { "xl:gap-5 xl:py-0 xl:flex-row": isSidebarOpen, "lg:gap-5 lg:py-0 lg:flex-row": !isSidebarOpen },
+          "group flex min-h-[52px] w-full flex-col items-center justify-between gap-3 border-b border-subtle bg-layer-transparent py-4 text-13 hover:bg-layer-transparent-hover",
+          { "xl:flex-row xl:gap-5 xl:py-0": isSidebarOpen, "lg:flex-row lg:gap-5 lg:py-0": !isSidebarOpen },
           className
         )}
       >
-        <div className={cn("relative flex w-full items-center justify-between gap-3 truncate ", itemClassName)}>
+        <div className={cn("relative flex w-full items-center justify-between gap-3 truncate", itemClassName)}>
           <ControlLink
             id={id}
             className="relative flex w-full items-center gap-3 overflow-hidden"
@@ -80,13 +85,13 @@ export function ListItem(props: IListItemProps) {
             data-prevent-progress={preventDefaultProgress}
           >
             <div className={cn("flex items-center gap-4 truncate", leftElementClassName)}>
-              {prependTitleElement && <span className="flex items-center flex-shrink-0">{prependTitleElement}</span>}
+              {prependTitleElement && <span className="flex flex-shrink-0 items-center">{prependTitleElement}</span>}
               <Tooltip tooltipContent={title} position="top" isMobile={isMobile}>
-                <span className="truncate text-sm">{title}</span>
+                <span className="truncate text-13">{title}</span>
               </Tooltip>
             </div>
             {appendTitleElement && (
-              <span className={cn("flex items-center flex-shrink-0", rightElementClassName)}>{appendTitleElement}</span>
+              <span className={cn("flex flex-shrink-0 items-center", rightElementClassName)}>{appendTitleElement}</span>
             )}
           </ControlLink>
           {quickActionElement && quickActionElement}
@@ -94,10 +99,10 @@ export function ListItem(props: IListItemProps) {
         {actionableItems && (
           <div
             className={cn(
-              "relative flex items-center justify-start gap-4 flex-wrap w-full flex-shrink-0",
+              "relative flex w-full flex-shrink-0 flex-wrap items-center justify-start gap-4",
               {
-                "xl:flex-nowrap xl:w-auto xl:flex-shrink-0": isSidebarOpen,
-                "lg:flex-nowrap lg:w-auto lg:flex-shrink-0": !isSidebarOpen,
+                "xl:w-auto xl:flex-shrink-0 xl:flex-nowrap": isSidebarOpen,
+                "lg:w-auto lg:flex-shrink-0 lg:flex-nowrap": !isSidebarOpen,
               },
               actionItemContainerClassName
             )}
diff --git a/apps/web/core/components/core/list/list-root.tsx b/apps/web/core/components/core/list/list-root.tsx
index 391ca2964..d81f2daee 100644
--- a/apps/web/core/components/core/list/list-root.tsx
+++ b/apps/web/core/components/core/list/list-root.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 import { Row, ERowVariant } from "@plane/ui";
 
@@ -11,7 +16,7 @@ export function ListLayout(props: IListContainer) {
   return (
     <Row
       variant={ERowVariant.HUGGING}
-      className="flex h-full w-full flex-col overflow-y-auto vertical-scrollbar scrollbar-lg"
+      className="vertical-scrollbar flex scrollbar-lg h-full w-full flex-col overflow-y-auto"
     >
       {children}
     </Row>
diff --git a/apps/web/core/components/core/modals/bulk-delete-issues-modal-item.tsx b/apps/web/core/components/core/modals/bulk-delete-issues-modal-item.tsx
index 91347a043..f76cb4cba 100644
--- a/apps/web/core/components/core/modals/bulk-delete-issues-modal-item.tsx
+++ b/apps/web/core/components/core/modals/bulk-delete-issues-modal-item.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import { Combobox } from "@headlessui/react";
 // hooks
@@ -21,8 +27,8 @@ export const BulkDeleteIssuesModalItem = observer(function BulkDeleteIssuesModal
       as="div"
       value={issue.id}
       className={({ active }) =>
-        `flex cursor-pointer select-none items-center justify-between rounded-md px-3 py-2 my-0.5 ${
-          active ? "bg-custom-background-80 text-custom-text-100" : ""
+        `my-0.5 flex cursor-pointer items-center justify-between rounded-md px-3 py-2 select-none ${
+          active ? "bg-layer-1 text-primary" : ""
         }`
       }
     >
@@ -39,7 +45,7 @@ export const BulkDeleteIssuesModalItem = observer(function BulkDeleteIssuesModal
           issueTypeId={issue.type_id}
           projectIdentifier={issue.project__identifier}
           issueSequenceId={issue.sequence_id}
-          textContainerClassName="text-xs"
+          size="xs"
         />
         <span>{issue.name}</span>
       </div>
diff --git a/apps/web/core/components/core/modals/bulk-delete-issues-modal.tsx b/apps/web/core/components/core/modals/bulk-delete-issues-modal.tsx
index 77d4236ef..c2cde2998 100644
--- a/apps/web/core/components/core/modals/bulk-delete-issues-modal.tsx
+++ b/apps/web/core/components/core/modals/bulk-delete-issues-modal.tsx
@@ -1,18 +1,24 @@
-import React, { useEffect, useState } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useEffect, useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 import { useTheme } from "next-themes";
 import type { SubmitHandler } from "react-hook-form";
 import { useForm } from "react-hook-form";
-import { Search } from "lucide-react";
-import { Combobox, Dialog, Transition } from "@headlessui/react";
+import { Combobox } from "@headlessui/react";
 // plane imports
 import { useTranslation } from "@plane/i18n";
 import { Button } from "@plane/propel/button";
+import { SearchIcon } from "@plane/propel/icons";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { ISearchIssueResponse, IUser } from "@plane/types";
 import { EIssuesStoreType } from "@plane/types";
-import { Loader } from "@plane/ui";
+import { Loader, EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
 // assets
 import darkIssuesAsset from "@/app/assets/empty-state/search/issues-dark.webp?url";
 import lightIssuesAsset from "@/app/assets/empty-state/search/issues-light.webp?url";
@@ -127,9 +133,9 @@ export const BulkDeleteIssuesModal = observer(function BulkDeleteIssuesModal(pro
     issues.length > 0 ? (
       <li className="p-2">
         {query === "" && (
-          <h2 className="mb-2 mt-4 px-3 text-xs font-semibold text-custom-text-100">Select work items to delete</h2>
+          <h2 className="mt-4 mb-2 px-3 text-11 font-semibold text-primary">Select work items to delete</h2>
         )}
-        <ul className="text-sm text-custom-text-200">
+        <ul className="text-13 text-secondary">
           {issues.map((issue) => (
             <BulkDeleteIssuesModalItem
               issue={issue}
@@ -150,78 +156,57 @@ export const BulkDeleteIssuesModal = observer(function BulkDeleteIssuesModal(pro
     );
 
   return (
-    <Transition.Root show={isOpen} as={React.Fragment} afterLeave={() => setQuery("")} appear>
-      <Dialog as="div" className="relative z-20" onClose={handleClose}>
-        <div className="fixed inset-0 z-20 overflow-y-auto bg-custom-backdrop p-4 transition-opacity sm:p-6 md:p-20">
-          <Transition.Child
-            as={React.Fragment}
-            enter="ease-out duration-300"
-            enterFrom="opacity-0 scale-95"
-            enterTo="opacity-100 scale-100"
-            leave="ease-in duration-200"
-            leaveFrom="opacity-100 scale-100"
-            leaveTo="opacity-0 scale-95"
-          >
-            <Dialog.Panel className="relative flex w-full items-center justify-center ">
-              <div className="w-full max-w-2xl transform divide-y divide-custom-border-200 divide-opacity-10 rounded-lg bg-custom-background-100 shadow-custom-shadow-md transition-all">
-                <form>
-                  <Combobox
-                    onChange={(val: string) => {
-                      const selectedIssues = watch("delete_issue_ids");
-                      if (selectedIssues.includes(val))
-                        setValue(
-                          "delete_issue_ids",
-                          selectedIssues.filter((i) => i !== val)
-                        );
-                      else setValue("delete_issue_ids", [...selectedIssues, val]);
-                    }}
-                  >
-                    <div className="relative m-1">
-                      <Search
-                        className="pointer-events-none absolute left-4 top-3.5 h-5 w-5 text-custom-text-100 text-opacity-40"
-                        aria-hidden="true"
-                      />
-                      <input
-                        type="text"
-                        className="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-custom-text-100 outline-none focus:ring-0 sm:text-sm"
-                        placeholder="Search..."
-                        onChange={(event) => setQuery(event.target.value)}
-                      />
-                    </div>
+    <ModalCore isOpen={isOpen} handleClose={handleClose} position={EModalPosition.CENTER} width={EModalWidth.XXL}>
+      <form>
+        <Combobox
+          onChange={(val: string) => {
+            const selectedIssues = watch("delete_issue_ids");
+            if (selectedIssues.includes(val))
+              setValue(
+                "delete_issue_ids",
+                selectedIssues.filter((i) => i !== val)
+              );
+            else setValue("delete_issue_ids", [...selectedIssues, val]);
+          }}
+        >
+          <div className="relative m-1">
+            <SearchIcon
+              className="text-opacity-40 pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-primary"
+              aria-hidden="true"
+            />
+            <input
+              type="text"
+              className="h-12 w-full border-0 bg-transparent pr-4 pl-11 text-primary outline-none focus:ring-0 sm:text-13"
+              placeholder="Search..."
+              onChange={(event) => setQuery(event.target.value)}
+            />
+          </div>
 
-                    <Combobox.Options
-                      static
-                      className="max-h-80 scroll-py-2 divide-y divide-custom-border-200 overflow-y-auto"
-                    >
-                      {isSearching ? (
-                        <Loader className="space-y-3 p-3">
-                          <Loader.Item height="40px" />
-                          <Loader.Item height="40px" />
-                          <Loader.Item height="40px" />
-                          <Loader.Item height="40px" />
-                        </Loader>
-                      ) : (
-                        <>{issueList}</>
-                      )}
-                    </Combobox.Options>
-                  </Combobox>
+          <Combobox.Options static className="max-h-80 scroll-py-2 divide-y divide-subtle-1 overflow-y-auto">
+            {isSearching ? (
+              <Loader className="space-y-3 p-3">
+                <Loader.Item height="40px" />
+                <Loader.Item height="40px" />
+                <Loader.Item height="40px" />
+                <Loader.Item height="40px" />
+              </Loader>
+            ) : (
+              <>{issueList}</>
+            )}
+          </Combobox.Options>
+        </Combobox>
 
-                  {issues.length > 0 && (
-                    <div className="flex items-center justify-end gap-2 p-3">
-                      <Button variant="neutral-primary" size="sm" onClick={handleClose}>
-                        Cancel
-                      </Button>
-                      <Button variant="danger" size="sm" onClick={handleSubmit(handleDelete)} loading={isSubmitting}>
-                        {isSubmitting ? "Deleting..." : "Delete selected work items"}
-                      </Button>
-                    </div>
-                  )}
-                </form>
-              </div>
-            </Dialog.Panel>
-          </Transition.Child>
-        </div>
-      </Dialog>
-    </Transition.Root>
+        {issues.length > 0 && (
+          <div className="flex items-center justify-end gap-2 p-3">
+            <Button variant="secondary" size="lg" onClick={handleClose}>
+              Cancel
+            </Button>
+            <Button variant="error-fill" size="lg" onClick={handleSubmit(handleDelete)} loading={isSubmitting}>
+              {isSubmitting ? "Deleting..." : "Delete selected work items"}
+            </Button>
+          </div>
+        )}
+      </form>
+    </ModalCore>
   );
 });
diff --git a/apps/web/core/components/core/modals/change-email-modal.tsx b/apps/web/core/components/core/modals/change-email-modal.tsx
index 3c963921e..1b9e5f444 100644
--- a/apps/web/core/components/core/modals/change-email-modal.tsx
+++ b/apps/web/core/components/core/modals/change-email-modal.tsx
@@ -1,12 +1,17 @@
-import React, { useState } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
 import { observer } from "mobx-react";
 import { Controller, useForm } from "react-hook-form";
-import { Transition, Dialog } from "@headlessui/react";
 // plane imports
 import { useTranslation } from "@plane/i18n";
 import { Button } from "@plane/propel/button";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
-import { Input } from "@plane/ui";
+import { Input, EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
 import { cn } from "@plane/utils";
 // helpers
 import { authErrorHandler } from "@/helpers/authentication.helper";
@@ -127,119 +132,87 @@ export const ChangeEmailModal = observer(function ChangeEmailModal(props: Props)
   };
 
   return (
-    <Transition.Root show={isOpen} as={React.Fragment}>
-      <Dialog as="div" className="relative z-30" onClose={handleClose}>
-        <Transition.Child
-          as={React.Fragment}
-          enter="ease-out duration-300"
-          enterFrom="opacity-0"
-          enterTo="opacity-100"
-          leave="ease-in duration-200"
-          leaveFrom="opacity-100"
-          leaveTo="opacity-0"
-        >
-          <div className="fixed inset-0 transition-opacity bg-custom-backdrop" />
-        </Transition.Child>
-
-        <div className="overflow-y-auto fixed inset-0 z-30">
-          <div className="flex justify-center items-center p-4 min-h-full text-center sm:p-0">
-            <Transition.Child
-              as={React.Fragment}
-              enter="ease-out duration-300"
-              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-              enterTo="opacity-100 translate-y-0 sm:scale-100"
-              leave="ease-in duration-200"
-              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-            >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-custom-background-100 px-4 text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-[30rem]">
-                <div className="py-4 space-y-0">
-                  <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-custom-text-100">
-                    {changeEmailT("title")}
-                  </Dialog.Title>
-                  <p className="my-4 text-sm text-custom-text-200">{changeEmailT("description")}</p>
-                </div>
-                <form onSubmit={handleSubmit(onSubmit)} className="space-y-4" noValidate>
-                  <div className="flex flex-col gap-1">
-                    {secondStep && (
-                      <h4 className="text-sm font-medium text-custom-text-200">{changeEmailT("form.email.label")}</h4>
-                    )}
-                    <Controller
-                      control={control}
-                      name="email"
-                      rules={{
-                        required: changeEmailT("form.email.errors.required"),
-                        pattern: {
-                          value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
-                          message: changeEmailT("form.email.errors.invalid"),
-                        },
-                      }}
-                      render={({ field: { value, onChange, ref } }) => (
-                        <Input
-                          id="email"
-                          name="email"
-                          type="email"
-                          value={value}
-                          onChange={onChange}
-                          ref={ref}
-                          hasError={Boolean(errors.email)}
-                          placeholder={changeEmailT("form.email.placeholder")}
-                          className={cn(
-                            { "border-red-500": errors.email },
-                            { "cursor-not-allowed !bg-custom-background-90": secondStep }
-                          )}
-                          disabled={secondStep}
-                        />
-                      )}
-                    />
-                    {errors?.email && <span className="text-xs text-red-500">{errors?.email?.message}</span>}
-                  </div>
-
-                  {secondStep && (
-                    <div className="flex flex-col gap-1">
-                      <h4 className="text-sm font-medium text-custom-text-200">{changeEmailT("form.code.label")}</h4>
-                      <Controller
-                        control={control}
-                        name="code"
-                        rules={{ required: changeEmailT("form.code.errors.required") }}
-                        render={({ field: { value, onChange, ref } }) => (
-                          <Input
-                            id="code"
-                            name="code"
-                            value={value}
-                            onChange={onChange}
-                            ref={ref}
-                            placeholder={changeEmailT("form.code.placeholder")}
-                            className={cn({ "border-red-500": errors.code })}
-                            autoFocus
-                          />
-                        )}
-                      />
-                      {errors?.code ? (
-                        <span className="text-xs text-red-500">{errors?.code?.message}</span>
-                      ) : (
-                        <span className="text-xs text-green-700">{changeEmailT("form.code.helper_text")}</span>
-                      )}
-                    </div>
-                  )}
-                  <div className="flex items-center justify-end gap-2 border-t-[0.5px] border-custom-border-200 py-4">
-                    <Button type="button" variant="neutral-primary" size="sm" onClick={handleClose}>
-                      {changeEmailT("actions.cancel")}
-                    </Button>
-                    <Button type="submit" variant="primary" size="sm" disabled={isSubmitting}>
-                      {isSubmitting
-                        ? changeEmailT("states.sending")
-                        : secondStep
-                          ? changeEmailT("actions.confirm")
-                          : changeEmailT("actions.continue")}
-                    </Button>
-                  </div>
-                </form>
-              </Dialog.Panel>
-            </Transition.Child>
-          </div>
+    <ModalCore isOpen={isOpen} handleClose={handleClose} position={EModalPosition.CENTER} width={EModalWidth.XXL}>
+      <div className="space-y-0 px-4 py-4">
+        <h3 className="text-16 leading-6 font-medium text-primary">{changeEmailT("title")}</h3>
+        <p className="my-4 text-13 text-secondary">{changeEmailT("description")}</p>
+      </div>
+      <form onSubmit={handleSubmit(onSubmit)} className="space-y-4 px-4" noValidate>
+        <div className="flex flex-col gap-1">
+          {secondStep && <h4 className="text-13 font-medium text-secondary">{changeEmailT("form.email.label")}</h4>}
+          <Controller
+            control={control}
+            name="email"
+            rules={{
+              required: changeEmailT("form.email.errors.required"),
+              pattern: {
+                value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
+                message: changeEmailT("form.email.errors.invalid"),
+              },
+            }}
+            render={({ field: { value, onChange, ref } }) => (
+              <Input
+                id="email"
+                name="email"
+                type="email"
+                value={value}
+                onChange={onChange}
+                ref={ref}
+                hasError={Boolean(errors.email)}
+                placeholder={changeEmailT("form.email.placeholder")}
+                className={cn(
+                  { "border-danger-strong": errors.email },
+                  { "cursor-not-allowed !bg-surface-2": secondStep }
+                )}
+                autoComplete="off"
+                disabled={secondStep}
+              />
+            )}
+          />
+          {errors?.email && <span className="text-11 text-danger-primary">{errors?.email?.message}</span>}
         </div>
-      </Dialog>
-    </Transition.Root>
+
+        {secondStep && (
+          <div className="flex flex-col gap-1">
+            <h4 className="text-13 font-medium text-secondary">{changeEmailT("form.code.label")}</h4>
+            <Controller
+              control={control}
+              name="code"
+              rules={{ required: changeEmailT("form.code.errors.required") }}
+              render={({ field: { value, onChange, ref } }) => (
+                <Input
+                  id="code"
+                  name="code"
+                  value={value}
+                  onChange={onChange}
+                  ref={ref}
+                  placeholder={changeEmailT("form.code.placeholder")}
+                  className={cn({ "border-danger-strong": errors.code })}
+                  autoComplete="off"
+                  autoFocus
+                />
+              )}
+            />
+            {errors?.code ? (
+              <span className="text-11 text-danger-primary">{errors?.code?.message}</span>
+            ) : (
+              <span className="text-11 text-success-primary">{changeEmailT("form.code.helper_text")}</span>
+            )}
+          </div>
+        )}
+        <div className="flex items-center justify-end gap-2 border-t-[0.5px] border-subtle py-4">
+          <Button type="button" variant="secondary" size="lg" onClick={handleClose}>
+            {changeEmailT("actions.cancel")}
+          </Button>
+          <Button type="submit" variant="primary" size="lg" disabled={isSubmitting}>
+            {isSubmitting
+              ? changeEmailT("states.sending")
+              : secondStep
+                ? changeEmailT("actions.confirm")
+                : changeEmailT("actions.continue")}
+          </Button>
+        </div>
+      </form>
+    </ModalCore>
   );
 });
diff --git a/apps/web/core/components/core/modals/existing-issues-list-modal.tsx b/apps/web/core/components/core/modals/existing-issues-list-modal.tsx
index 019e64be6..718364351 100644
--- a/apps/web/core/components/core/modals/existing-issues-list-modal.tsx
+++ b/apps/web/core/components/core/modals/existing-issues-list-modal.tsx
@@ -1,16 +1,22 @@
-import React, { useEffect, useState, useRef } from "react";
-import { Rocket, Search } from "lucide-react";
-import { Combobox, Dialog, Transition } from "@headlessui/react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useEffect, useState, useRef } from "react";
+import { Rocket } from "lucide-react";
+import { Combobox } from "@headlessui/react";
 // i18n
 import { useTranslation } from "@plane/i18n";
 // types
 import { Button } from "@plane/propel/button";
-import { CloseIcon } from "@plane/propel/icons";
+import { SearchIcon, CloseIcon } from "@plane/propel/icons";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import { Tooltip } from "@plane/propel/tooltip";
 import type { ISearchIssueResponse, TProjectIssuesSearchParams } from "@plane/types";
 // ui
-import { Loader, ToggleSwitch } from "@plane/ui";
+import { Loader, ToggleSwitch, EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
 import { generateWorkItemLink, getTabIndex } from "@plane/utils";
 // helpers
 // hooks
@@ -131,232 +137,195 @@ export function ExistingIssuesListModal(props: Props) {
   const filteredIssues = issues.filter((issue) => !shouldHideIssue?.(issue));
 
   return (
-    <>
-      <Transition.Root show={isOpen} as={React.Fragment} afterLeave={() => setSearchTerm("")} appear>
-        <Dialog as="div" className="relative z-30" onClose={handleClose}>
-          <Transition.Child
-            as={React.Fragment}
-            enter="ease-out duration-300"
-            enterFrom="opacity-0"
-            enterTo="opacity-100"
-            leave="ease-in duration-200"
-            leaveFrom="opacity-100"
-            leaveTo="opacity-0"
-          >
-            <div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
-          </Transition.Child>
+    <ModalCore isOpen={isOpen} handleClose={handleClose} position={EModalPosition.CENTER} width={EModalWidth.XXL}>
+      <Combobox
+        as="div"
+        onChange={(val: ISearchIssueResponse) => {
+          if (selectedIssues.some((i) => i.id === val.id))
+            setSelectedIssues((prevData) => prevData.filter((i) => i.id !== val.id));
+          else setSelectedIssues((prevData) => [...prevData, val]);
+        }}
+      >
+        <div className="relative m-1">
+          <SearchIcon
+            className="text-opacity-40 pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-primary"
+            aria-hidden="true"
+          />
+          <Combobox.Input
+            className="h-12 w-full border-0 bg-transparent pr-4 pl-11 text-13 text-primary outline-none placeholder:text-placeholder focus:ring-0"
+            placeholder={t("common.search.placeholder")}
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+            tabIndex={baseTabIndex}
+          />
+        </div>
 
-          <div className="fixed inset-0 z-30 overflow-y-auto p-4 sm:p-6 md:p-20">
-            <Transition.Child
-              as={React.Fragment}
-              enter="ease-out duration-300"
-              enterFrom="opacity-0 scale-95"
-              enterTo="opacity-100 scale-100"
-              leave="ease-in duration-200"
-              leaveFrom="opacity-100 scale-100"
-              leaveTo="opacity-0 scale-95"
-            >
-              <Dialog.Panel className="relative mx-auto max-w-2xl transform rounded-lg bg-custom-background-100 shadow-custom-shadow-md transition-all">
-                <Combobox
-                  as="div"
-                  onChange={(val: ISearchIssueResponse) => {
-                    if (selectedIssues.some((i) => i.id === val.id))
-                      setSelectedIssues((prevData) => prevData.filter((i) => i.id !== val.id));
-                    else setSelectedIssues((prevData) => [...prevData, val]);
-                  }}
+        <div className="flex flex-col-reverse gap-4 p-2 text-13 text-secondary sm:flex-row sm:items-center sm:justify-between">
+          {selectedIssues.length > 0 ? (
+            <div className="mt-1 flex flex-wrap items-center gap-2">
+              {selectedIssues.map((issue) => (
+                <div
+                  key={issue.id}
+                  className="flex items-center gap-1 rounded-md border border-subtle bg-layer-1 py-1 pl-2 text-11 whitespace-nowrap text-primary"
                 >
-                  <div className="relative m-1">
-                    <Search
-                      className="pointer-events-none absolute left-4 top-3.5 h-5 w-5 text-custom-text-100 text-opacity-40"
-                      aria-hidden="true"
-                    />
-                    <Combobox.Input
-                      className="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-sm text-custom-text-100 outline-none placeholder:text-custom-text-400 focus:ring-0"
-                      placeholder={t("common.search.placeholder")}
-                      value={searchTerm}
-                      onChange={(e) => setSearchTerm(e.target.value)}
-                      tabIndex={baseTabIndex}
-                    />
-                  </div>
+                  <IssueIdentifier
+                    projectId={issue.project_id}
+                    issueTypeId={issue.type_id}
+                    projectIdentifier={issue.project__identifier}
+                    issueSequenceId={issue.sequence_id}
+                    size="xs"
+                    variant="secondary"
+                  />
+                  <button
+                    type="button"
+                    className="group p-1"
+                    onClick={() => setSelectedIssues((prevData) => prevData.filter((i) => i.id !== issue.id))}
+                  >
+                    <CloseIcon className="h-3 w-3 text-secondary group-hover:text-primary" />
+                  </button>
+                </div>
+              ))}
+            </div>
+          ) : (
+            <div className="w-min rounded-md border border-subtle bg-layer-1 p-2 text-11 whitespace-nowrap">
+              {t("issue.select.empty")}
+            </div>
+          )}
+          {workspaceLevelToggle && (
+            <Tooltip tooltipContent="Toggle workspace level search" isMobile={isMobile}>
+              <div
+                className={`flex flex-shrink-0 cursor-pointer items-center gap-1 text-11 ${
+                  isWorkspaceLevel ? "text-primary" : "text-secondary"
+                }`}
+              >
+                <ToggleSwitch value={isWorkspaceLevel} onChange={() => setIsWorkspaceLevel((prevData) => !prevData)} />
+                <button
+                  type="button"
+                  onClick={() => setIsWorkspaceLevel((prevData) => !prevData)}
+                  className="flex-shrink-0"
+                >
+                  {t("common.workspace_level")}
+                </button>
+              </div>
+            </Tooltip>
+          )}
+        </div>
 
-                  <div className="flex flex-col-reverse gap-4 p-2 text-[0.825rem] text-custom-text-200 sm:flex-row sm:items-center sm:justify-between">
-                    {selectedIssues.length > 0 ? (
-                      <div className="mt-1 flex flex-wrap items-center gap-2">
-                        {selectedIssues.map((issue) => (
-                          <div
-                            key={issue.id}
-                            className="flex items-center gap-1 whitespace-nowrap rounded-md border border-custom-border-200 bg-custom-background-80 py-1 pl-2 text-xs text-custom-text-100"
-                          >
+        <Combobox.Options static className="vertical-scrollbar scrollbar-md max-h-80 scroll-py-2 overflow-y-auto">
+          {/* TODO: Translate here */}
+          {searchTerm !== "" && (
+            <h5 className="mx-2 text-13 text-secondary">
+              Search results for{" "}
+              <span className="text-primary">
+                {'"'}
+                {searchTerm}
+                {'"'}
+              </span>{" "}
+              in project:
+            </h5>
+          )}
+
+          {isSearching || isLoading ? (
+            <Loader className="space-y-3 p-3">
+              <Loader.Item height="40px" />
+              <Loader.Item height="40px" />
+              <Loader.Item height="40px" />
+              <Loader.Item height="40px" />
+            </Loader>
+          ) : (
+            <>
+              {filteredIssues.length === 0 ? (
+                <IssueSearchModalEmptyState
+                  debouncedSearchTerm={debouncedSearchTerm}
+                  isSearching={isSearching}
+                  issues={filteredIssues}
+                  searchTerm={searchTerm}
+                />
+              ) : (
+                <ul className={`text-13 text-primary ${filteredIssues.length > 0 ? "p-2" : ""}`}>
+                  {filteredIssues.map((issue) => {
+                    const selected = selectedIssues.some((i) => i.id === issue.id);
+
+                    return (
+                      <Combobox.Option
+                        key={issue.id}
+                        as="label"
+                        htmlFor={`issue-${issue.id}`}
+                        value={issue}
+                        className={({ active }) =>
+                          `group my-0.5 flex w-full cursor-pointer items-center justify-between gap-2 rounded-md px-3 py-2 text-secondary select-none ${
+                            active ? "bg-layer-1 text-primary" : ""
+                          } ${selected ? "text-primary" : ""}`
+                        }
+                      >
+                        <div className="flex items-center gap-2 truncate">
+                          <input type="checkbox" checked={selected} readOnly />
+                          <span
+                            className="block h-1.5 w-1.5 flex-shrink-0 rounded-full"
+                            style={{
+                              backgroundColor: issue.state__color,
+                            }}
+                          />
+                          <span className="flex-shrink-0">
                             <IssueIdentifier
                               projectId={issue.project_id}
                               issueTypeId={issue.type_id}
                               projectIdentifier={issue.project__identifier}
                               issueSequenceId={issue.sequence_id}
-                              textContainerClassName="text-xs text-custom-text-200"
+                              size="xs"
+                              variant="secondary"
                             />
-                            <button
-                              type="button"
-                              className="group p-1"
-                              onClick={() => setSelectedIssues((prevData) => prevData.filter((i) => i.id !== issue.id))}
-                            >
-                              <CloseIcon className="h-3 w-3 text-custom-text-200 group-hover:text-custom-text-100" />
-                            </button>
-                          </div>
-                        ))}
-                      </div>
-                    ) : (
-                      <div className="w-min whitespace-nowrap rounded-md border border-custom-border-200 bg-custom-background-80 p-2 text-xs">
-                        {t("issue.select.empty")}
-                      </div>
-                    )}
-                    {workspaceLevelToggle && (
-                      <Tooltip tooltipContent="Toggle workspace level search" isMobile={isMobile}>
-                        <div
-                          className={`flex flex-shrink-0 cursor-pointer items-center gap-1 text-xs ${
-                            isWorkspaceLevel ? "text-custom-text-100" : "text-custom-text-200"
-                          }`}
-                        >
-                          <ToggleSwitch
-                            value={isWorkspaceLevel}
-                            onChange={() => setIsWorkspaceLevel((prevData) => !prevData)}
-                          />
-                          <button
-                            type="button"
-                            onClick={() => setIsWorkspaceLevel((prevData) => !prevData)}
-                            className="flex-shrink-0"
-                          >
-                            {t("common.workspace_level")}
-                          </button>
+                          </span>
+                          <span className="truncate">{issue.name}</span>
                         </div>
-                      </Tooltip>
-                    )}
-                  </div>
-
-                  <Combobox.Options
-                    static
-                    className="vertical-scrollbar scrollbar-md max-h-80 scroll-py-2 overflow-y-auto"
-                  >
-                    {/* TODO: Translate here */}
-                    {searchTerm !== "" && (
-                      <h5 className="mx-2 text-[0.825rem] text-custom-text-200">
-                        Search results for{" "}
-                        <span className="text-custom-text-100">
-                          {'"'}
-                          {searchTerm}
-                          {'"'}
-                        </span>{" "}
-                        in project:
-                      </h5>
-                    )}
-
-                    {isSearching || isLoading ? (
-                      <Loader className="space-y-3 p-3">
-                        <Loader.Item height="40px" />
-                        <Loader.Item height="40px" />
-                        <Loader.Item height="40px" />
-                        <Loader.Item height="40px" />
-                      </Loader>
-                    ) : (
-                      <>
-                        {filteredIssues.length === 0 ? (
-                          <IssueSearchModalEmptyState
-                            debouncedSearchTerm={debouncedSearchTerm}
-                            isSearching={isSearching}
-                            issues={filteredIssues}
-                            searchTerm={searchTerm}
-                          />
-                        ) : (
-                          <ul className={`text-sm text-custom-text-100 ${filteredIssues.length > 0 ? "p-2" : ""}`}>
-                            {filteredIssues.map((issue) => {
-                              const selected = selectedIssues.some((i) => i.id === issue.id);
-
-                              return (
-                                <Combobox.Option
-                                  key={issue.id}
-                                  as="label"
-                                  htmlFor={`issue-${issue.id}`}
-                                  value={issue}
-                                  className={({ active }) =>
-                                    `group flex w-full cursor-pointer select-none items-center justify-between gap-2 rounded-md px-3 py-2 my-0.5 text-custom-text-200 ${
-                                      active ? "bg-custom-background-80 text-custom-text-100" : ""
-                                    } ${selected ? "text-custom-text-100" : ""}`
-                                  }
-                                >
-                                  <div className="flex items-center gap-2 truncate">
-                                    <input type="checkbox" checked={selected} readOnly />
-                                    <span
-                                      className="block h-1.5 w-1.5 flex-shrink-0 rounded-full"
-                                      style={{
-                                        backgroundColor: issue.state__color,
-                                      }}
-                                    />
-                                    <span className="flex-shrink-0">
-                                      <IssueIdentifier
-                                        projectId={issue.project_id}
-                                        issueTypeId={issue.type_id}
-                                        projectIdentifier={issue.project__identifier}
-                                        issueSequenceId={issue.sequence_id}
-                                        textContainerClassName="text-xs text-custom-text-200"
-                                      />
-                                    </span>
-                                    <span className="truncate">{issue.name}</span>
-                                  </div>
-                                  <a
-                                    href={generateWorkItemLink({
-                                      workspaceSlug,
-                                      projectId: issue?.project_id,
-                                      issueId: issue?.id,
-                                      projectIdentifier: issue.project__identifier,
-                                      sequenceId: issue?.sequence_id,
-                                    })}
-                                    target="_blank"
-                                    className="z-1 relative hidden flex-shrink-0 text-custom-text-200 hover:text-custom-text-100 group-hover:block"
-                                    rel="noopener noreferrer"
-                                    onClick={(e) => e.stopPropagation()}
-                                  >
-                                    <Rocket className="h-4 w-4" />
-                                  </a>
-                                </Combobox.Option>
-                              );
-                            })}
-                          </ul>
-                        )}
-                      </>
-                    )}
-                  </Combobox.Options>
-                </Combobox>
-                <div className="flex justify-between items-center p-3">
-                  <Button
-                    variant="link-primary"
-                    size="sm"
-                    onClick={handleSelectIssues}
-                    disabled={filteredIssues.length === 0}
-                    className={filteredIssues.length === 0 ? "p-0" : ""}
-                  >
-                    {selectedIssues.length === issues.length
-                      ? t("issue.select.deselect_all")
-                      : t("issue.select.select_all")}
-                  </Button>
-                  <div className="flex items-center justify-end gap-2">
-                    <Button variant="neutral-primary" size="sm" onClick={handleClose}>
-                      {t("common.cancel")}
-                    </Button>
-                    <Button
-                      variant="primary"
-                      size="sm"
-                      onClick={onSubmit}
-                      loading={isSubmitting}
-                      disabled={isSubmitting || selectedIssues.length === 0}
-                    >
-                      {isSubmitting ? t("common.adding") : t("issue.select.add_selected")}
-                    </Button>
-                  </div>
-                </div>
-              </Dialog.Panel>
-            </Transition.Child>
-          </div>
-        </Dialog>
-      </Transition.Root>
-    </>
+                        <a
+                          href={generateWorkItemLink({
+                            workspaceSlug,
+                            projectId: issue?.project_id,
+                            issueId: issue?.id,
+                            projectIdentifier: issue.project__identifier,
+                            sequenceId: issue?.sequence_id,
+                          })}
+                          target="_blank"
+                          className="relative z-1 hidden flex-shrink-0 text-secondary group-hover:block hover:text-primary"
+                          rel="noopener noreferrer"
+                          onClick={(e) => e.stopPropagation()}
+                        >
+                          <Rocket className="h-4 w-4" />
+                        </a>
+                      </Combobox.Option>
+                    );
+                  })}
+                </ul>
+              )}
+            </>
+          )}
+        </Combobox.Options>
+      </Combobox>
+      <div className="flex items-center justify-between p-3">
+        <Button
+          variant="link"
+          onClick={handleSelectIssues}
+          disabled={filteredIssues.length === 0}
+          className={filteredIssues.length === 0 ? "p-0" : ""}
+        >
+          {selectedIssues.length === issues.length ? t("issue.select.deselect_all") : t("issue.select.select_all")}
+        </Button>
+        <div className="flex items-center justify-end gap-2">
+          <Button variant="secondary" size="lg" onClick={handleClose}>
+            {t("common.cancel")}
+          </Button>
+          <Button
+            variant="primary"
+            size="lg"
+            onClick={onSubmit}
+            loading={isSubmitting}
+            disabled={isSubmitting || selectedIssues.length === 0}
+          >
+            {isSubmitting ? t("common.adding") : t("issue.select.add_selected")}
+          </Button>
+        </div>
+      </div>
+    </ModalCore>
   );
 }
diff --git a/apps/web/core/components/core/modals/gpt-assistant-popover.tsx b/apps/web/core/components/core/modals/gpt-assistant-popover.tsx
index 4858a5765..8b932742c 100644
--- a/apps/web/core/components/core/modals/gpt-assistant-popover.tsx
+++ b/apps/web/core/components/core/modals/gpt-assistant-popover.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { Ref } from "react";
 import React, { useEffect, useState, useRef, Fragment } from "react";
 import type { Placement } from "@popperjs/core";
@@ -208,14 +214,14 @@ export function GptAssistantPopover(props: Props) {
       >
         <Popover.Panel
           as="div"
-          className={`fixed z-10 flex w-full min-w-[50rem] max-w-full flex-col space-y-4 overflow-hidden rounded-[10px] border border-custom-border-200 bg-custom-background-100 p-4 shadow ${className}`}
+          className={`shadow fixed z-10 flex w-full max-w-full min-w-[50rem] flex-col space-y-4 overflow-hidden rounded-[10px] border border-subtle bg-surface-1 p-4 ${className}`}
           ref={setPopperElement as Ref<HTMLDivElement>}
           style={styles.popper}
           {...attributes.popper}
         >
           <div className="vertical-scroll-enable max-h-72 space-y-4 overflow-y-auto">
             {prompt && (
-              <div className="text-sm">
+              <div className="text-13">
                 Content:
                 <RichTextEditor
                   editable={false}
@@ -230,7 +236,7 @@ export function GptAssistantPopover(props: Props) {
               </div>
             )}
             {response !== "" && (
-              <div className="page-block-section max-h-[8rem] text-sm">
+              <div className="page-block-section max-h-[8rem] text-13">
                 Response:
                 <RichTextEditor
                   editable={false}
@@ -244,7 +250,7 @@ export function GptAssistantPopover(props: Props) {
               </div>
             )}
             {invalidResponse && (
-              <div className="text-sm text-red-500">
+              <div className="text-13 text-danger-primary">
                 No response could be generated. This may be due to insufficient content or task information. Please try
                 again.
               </div>
@@ -269,22 +275,22 @@ export function GptAssistantPopover(props: Props) {
               />
             )}
           />
-          <div className="flex gap-2 justify-between">
+          <div className="flex justify-between gap-2">
             {responseActionButton ? (
               <>{responseActionButton}</>
             ) : (
               <>
-                <div className="flex items-start justify-center gap-2 text-sm text-custom-primary">
+                <div className="flex items-start justify-center gap-2 text-13 text-accent-primary">
                   <AlertCircle className="h-4 w-4" />
                   <p>By using this feature, you consent to sharing the message with a 3rd party service. </p>
                 </div>
               </>
             )}
             <div className="flex items-center gap-2">
-              <Button variant="neutral-primary" size="sm" onClick={onClose}>
+              <Button variant="secondary" onClick={onClose}>
                 Close
               </Button>
-              <Button variant="primary" size="sm" onClick={handleSubmit(handleAIResponse)} loading={isSubmitting}>
+              <Button variant="primary" onClick={handleSubmit(handleAIResponse)} loading={isSubmitting}>
                 {generateResponseButtonText}
               </Button>
             </div>
diff --git a/apps/web/core/components/core/modals/issue-search-modal-empty-state.tsx b/apps/web/core/components/core/modals/issue-search-modal-empty-state.tsx
index b3269fdbf..24b1343fc 100644
--- a/apps/web/core/components/core/modals/issue-search-modal-empty-state.tsx
+++ b/apps/web/core/components/core/modals/issue-search-modal-empty-state.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 import { useTheme } from "next-themes";
 // plane imports
diff --git a/apps/web/core/components/core/modals/user-image-upload-modal.tsx b/apps/web/core/components/core/modals/user-image-upload-modal.tsx
index e70f8f737..ff688c728 100644
--- a/apps/web/core/components/core/modals/user-image-upload-modal.tsx
+++ b/apps/web/core/components/core/modals/user-image-upload-modal.tsx
@@ -1,13 +1,19 @@
-import React, { useState } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
 import { observer } from "mobx-react";
 import { useDropzone } from "react-dropzone";
-import { Transition, Dialog } from "@headlessui/react";
 // plane imports
 import { ACCEPTED_AVATAR_IMAGE_MIME_TYPES_FOR_REACT_DROPZONE, MAX_FILE_SIZE } from "@plane/constants";
 import { Button } from "@plane/propel/button";
 import { UserCirclePropertyIcon } from "@plane/propel/icons";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import { EFileAssetType } from "@plane/types";
+import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
 import { getAssetIdFromUrl, getFileURL, checkURLValidity } from "@plane/utils";
 // services
 import { FileService } from "@/services/file.service";
@@ -88,106 +94,68 @@ export const UserImageUploadModal = observer(function UserImageUploadModal(props
   };
 
   return (
-    <Transition.Root show={isOpen} as={React.Fragment}>
-      <Dialog as="div" className="relative z-30" onClose={handleClose}>
-        <Transition.Child
-          as={React.Fragment}
-          enter="ease-out duration-300"
-          enterFrom="opacity-0"
-          enterTo="opacity-100"
-          leave="ease-in duration-200"
-          leaveFrom="opacity-100"
-          leaveTo="opacity-0"
-        >
-          <div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
-        </Transition.Child>
-
-        <div className="fixed inset-0 z-30 overflow-y-auto">
-          <div className="flex min-h-full items-center justify-center p-4 text-center sm:p-0">
-            <Transition.Child
-              as={React.Fragment}
-              enter="ease-out duration-300"
-              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-              enterTo="opacity-100 translate-y-0 sm:scale-100"
-              leave="ease-in duration-200"
-              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+    <ModalCore isOpen={isOpen} handleClose={handleClose} position={EModalPosition.CENTER} width={EModalWidth.XL}>
+      <div className="space-y-5 px-5 py-8 sm:p-6">
+        <h3 className="text-16 leading-6 font-medium text-primary">Upload Image</h3>
+        <div className="space-y-3">
+          <div className="flex items-center justify-center gap-3">
+            <div
+              {...getRootProps()}
+              className={`relative grid h-80 w-80 cursor-pointer place-items-center rounded-lg p-12 text-center focus:ring-2 focus:ring-accent-strong focus:ring-offset-2 focus:outline-none ${
+                (image === null && isDragActive) || !value
+                  ? "border-2 border-dashed border-subtle hover:bg-surface-2"
+                  : ""
+              }`}
             >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-custom-background-100 px-5 py-8 text-left shadow-custom-shadow-md transition-all sm:w-full sm:max-w-xl sm:p-6">
-                <div className="space-y-5">
-                  <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-custom-text-100">
-                    Upload Image
-                  </Dialog.Title>
-                  <div className="space-y-3">
-                    <div className="flex items-center justify-center gap-3">
-                      <div
-                        {...getRootProps()}
-                        className={`relative grid h-80 w-80 cursor-pointer place-items-center rounded-lg p-12 text-center focus:outline-none focus:ring-2 focus:ring-custom-primary focus:ring-offset-2 ${
-                          (image === null && isDragActive) || !value
-                            ? "border-2 border-dashed border-custom-border-200 hover:bg-custom-background-90"
-                            : ""
-                        }`}
-                      >
-                        {image !== null || (value && value !== "") ? (
-                          <>
-                            <button
-                              type="button"
-                              className="absolute right-0 top-0 z-40 -translate-y-1/2 translate-x-1/2 rounded bg-custom-background-90 px-2 py-0.5 text-xs font-medium text-custom-text-200"
-                            >
-                              Edit
-                            </button>
-                            <img
-                              src={image ? URL.createObjectURL(image) : value ? getFileURL(value) : ""}
-                              alt="image"
-                              className="absolute left-0 top-0 h-full w-full rounded-md object-cover"
-                            />
-                          </>
-                        ) : (
-                          <div>
-                            <UserCirclePropertyIcon className="mx-auto h-16 w-16 text-custom-text-200" />
-                            <span className="mt-2 block text-sm font-medium text-custom-text-200">
-                              {isDragActive ? "Drop image here to upload" : "Drag & drop image here"}
-                            </span>
-                          </div>
-                        )}
+              {image !== null || (value && value !== "") ? (
+                <>
+                  <button
+                    type="button"
+                    className="absolute top-0 right-0 z-40 translate-x-1/2 -translate-y-1/2 rounded-sm bg-surface-2 px-2 py-0.5 text-11 font-medium text-secondary"
+                  >
+                    Edit
+                  </button>
+                  <img
+                    src={image ? URL.createObjectURL(image) : value ? getFileURL(value) : ""}
+                    alt="image"
+                    className="absolute top-0 left-0 h-full w-full rounded-md object-cover"
+                  />
+                </>
+              ) : (
+                <div>
+                  <UserCirclePropertyIcon className="mx-auto h-16 w-16 text-secondary" />
+                  <span className="mt-2 block text-13 font-medium text-secondary">
+                    {isDragActive ? "Drop image here to upload" : "Drag & drop image here"}
+                  </span>
+                </div>
+              )}
 
-                        <input {...getInputProps()} />
-                      </div>
-                    </div>
-                    {fileRejections.length > 0 && (
-                      <p className="text-sm text-red-500">
-                        {fileRejections[0].errors[0].code === "file-too-large"
-                          ? "The image size cannot exceed 5 MB."
-                          : "Please upload a file in a valid format."}
-                      </p>
-                    )}
-                  </div>
-                </div>
-                <p className="my-4 text-sm text-custom-text-200">File formats supported- .jpeg, .jpg, .png, .webp</p>
-                <div className="flex items-center justify-between">
-                  <Button variant="danger" size="sm" onClick={handleImageRemove} disabled={!value}>
-                    {isRemoving ? "Removing" : "Remove"}
-                  </Button>
-                  <div className="flex items-center gap-2">
-                    <Button variant="neutral-primary" size="sm" onClick={handleClose}>
-                      Cancel
-                    </Button>
-                    <Button
-                      variant="primary"
-                      size="sm"
-                      onClick={handleSubmit}
-                      disabled={!image}
-                      loading={isImageUploading}
-                    >
-                      {isImageUploading ? "Uploading" : "Upload & Save"}
-                    </Button>
-                  </div>
-                </div>
-              </Dialog.Panel>
-            </Transition.Child>
+              <input {...getInputProps()} />
+            </div>
+          </div>
+          {fileRejections.length > 0 && (
+            <p className="text-13 text-danger-primary">
+              {fileRejections[0].errors[0].code === "file-too-large"
+                ? "The image size cannot exceed 5 MB."
+                : "Please upload a file in a valid format."}
+            </p>
+          )}
+        </div>
+        <p className="my-4 text-13 text-secondary">File formats supported- .jpeg, .jpg, .png, .webp</p>
+        <div className="flex items-center justify-between">
+          <Button variant="error-fill" size="lg" onClick={handleImageRemove} disabled={!value}>
+            {isRemoving ? "Removing" : "Remove"}
+          </Button>
+          <div className="flex items-center gap-2">
+            <Button variant="secondary" size="lg" onClick={handleClose}>
+              Cancel
+            </Button>
+            <Button variant="primary" size="lg" onClick={handleSubmit} disabled={!image} loading={isImageUploading}>
+              {isImageUploading ? "Uploading" : "Upload & Save"}
+            </Button>
           </div>
         </div>
-      </Dialog>
-    </Transition.Root>
+      </div>
+    </ModalCore>
   );
 });
diff --git a/apps/web/core/components/core/modals/workspace-image-upload-modal.tsx b/apps/web/core/components/core/modals/workspace-image-upload-modal.tsx
index d4d0f7d7c..c22ce52aa 100644
--- a/apps/web/core/components/core/modals/workspace-image-upload-modal.tsx
+++ b/apps/web/core/components/core/modals/workspace-image-upload-modal.tsx
@@ -1,14 +1,20 @@
-import React, { useState } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 import { useDropzone } from "react-dropzone";
-import { Transition, Dialog } from "@headlessui/react";
 // plane imports
 import { ACCEPTED_AVATAR_IMAGE_MIME_TYPES_FOR_REACT_DROPZONE, MAX_FILE_SIZE } from "@plane/constants";
 import { Button } from "@plane/propel/button";
 import { UserCirclePropertyIcon } from "@plane/propel/icons";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import { EFileAssetType } from "@plane/types";
+import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
 import { getAssetIdFromUrl, getFileURL, checkURLValidity } from "@plane/utils";
 // hooks
 import { useWorkspace } from "@/hooks/store/use-workspace";
@@ -101,106 +107,68 @@ export const WorkspaceImageUploadModal = observer(function WorkspaceImageUploadM
   };
 
   return (
-    <Transition.Root show={isOpen} as={React.Fragment}>
-      <Dialog as="div" className="relative z-30" onClose={handleClose}>
-        <Transition.Child
-          as={React.Fragment}
-          enter="ease-out duration-300"
-          enterFrom="opacity-0"
-          enterTo="opacity-100"
-          leave="ease-in duration-200"
-          leaveFrom="opacity-100"
-          leaveTo="opacity-0"
-        >
-          <div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
-        </Transition.Child>
-
-        <div className="fixed inset-0 z-30 overflow-y-auto">
-          <div className="flex min-h-full items-center justify-center p-4 text-center sm:p-0">
-            <Transition.Child
-              as={React.Fragment}
-              enter="ease-out duration-300"
-              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-              enterTo="opacity-100 translate-y-0 sm:scale-100"
-              leave="ease-in duration-200"
-              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+    <ModalCore isOpen={isOpen} handleClose={handleClose} position={EModalPosition.CENTER} width={EModalWidth.XL}>
+      <div className="space-y-5 px-5 py-8 sm:p-6">
+        <h3 className="text-16 leading-6 font-medium text-primary">Upload image</h3>
+        <div className="space-y-3">
+          <div className="flex items-center justify-center gap-3">
+            <div
+              {...getRootProps()}
+              className={`relative grid h-80 w-80 cursor-pointer place-items-center rounded-lg p-12 text-center focus:ring-2 focus:ring-accent-strong focus:ring-offset-2 focus:outline-none ${
+                (image === null && isDragActive) || !value
+                  ? "border-2 border-dashed border-subtle hover:bg-surface-2"
+                  : ""
+              }`}
             >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-custom-background-100 px-5 py-8 text-left shadow-custom-shadow-md transition-all sm:w-full sm:max-w-xl sm:p-6">
-                <div className="space-y-5">
-                  <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-custom-text-100">
-                    Upload image
-                  </Dialog.Title>
-                  <div className="space-y-3">
-                    <div className="flex items-center justify-center gap-3">
-                      <div
-                        {...getRootProps()}
-                        className={`relative grid h-80 w-80 cursor-pointer place-items-center rounded-lg p-12 text-center focus:outline-none focus:ring-2 focus:ring-custom-primary focus:ring-offset-2 ${
-                          (image === null && isDragActive) || !value
-                            ? "border-2 border-dashed border-custom-border-200 hover:bg-custom-background-90"
-                            : ""
-                        }`}
-                      >
-                        {image !== null || (value && value !== "") ? (
-                          <>
-                            <button
-                              type="button"
-                              className="absolute right-0 top-0 z-40 -translate-y-1/2 translate-x-1/2 rounded bg-custom-background-90 px-2 py-0.5 text-xs font-medium text-custom-text-200"
-                            >
-                              Edit
-                            </button>
-                            <img
-                              src={image ? URL.createObjectURL(image) : value ? getFileURL(value) : ""}
-                              alt="image"
-                              className="absolute left-0 top-0 h-full w-full rounded-md object-cover"
-                            />
-                          </>
-                        ) : (
-                          <div>
-                            <UserCirclePropertyIcon className="mx-auto h-16 w-16 text-custom-text-200" />
-                            <span className="mt-2 block text-sm font-medium text-custom-text-200">
-                              {isDragActive ? "Drop image here to upload" : "Drag & drop image here"}
-                            </span>
-                          </div>
-                        )}
+              {image !== null || (value && value !== "") ? (
+                <>
+                  <button
+                    type="button"
+                    className="absolute top-0 right-0 z-40 translate-x-1/2 -translate-y-1/2 rounded-sm bg-surface-2 px-2 py-0.5 text-11 font-medium text-secondary"
+                  >
+                    Edit
+                  </button>
+                  <img
+                    src={image ? URL.createObjectURL(image) : value ? getFileURL(value) : ""}
+                    alt="image"
+                    className="absolute top-0 left-0 h-full w-full rounded-md object-cover"
+                  />
+                </>
+              ) : (
+                <div>
+                  <UserCirclePropertyIcon className="mx-auto h-16 w-16 text-secondary" />
+                  <span className="mt-2 block text-13 font-medium text-secondary">
+                    {isDragActive ? "Drop image here to upload" : "Drag & drop image here"}
+                  </span>
+                </div>
+              )}
 
-                        <input {...getInputProps()} />
-                      </div>
-                    </div>
-                    {fileRejections.length > 0 && (
-                      <p className="text-sm text-red-500">
-                        {fileRejections[0].errors[0].code === "file-too-large"
-                          ? "The image size cannot exceed 5 MB."
-                          : "Please upload a file in a valid format."}
-                      </p>
-                    )}
-                  </div>
-                </div>
-                <p className="my-4 text-sm text-custom-text-200">File formats supported- .jpeg, .jpg, .png, .webp</p>
-                <div className="flex items-center justify-between">
-                  <Button variant="danger" size="sm" onClick={handleImageRemove} disabled={!value} loading={isRemoving}>
-                    {isRemoving ? "Removing" : "Remove"}
-                  </Button>
-                  <div className="flex items-center gap-2">
-                    <Button variant="neutral-primary" size="sm" onClick={handleClose}>
-                      Cancel
-                    </Button>
-                    <Button
-                      variant="primary"
-                      size="sm"
-                      onClick={handleSubmit}
-                      disabled={!image}
-                      loading={isImageUploading}
-                    >
-                      {isImageUploading ? "Uploading" : "Upload & Save"}
-                    </Button>
-                  </div>
-                </div>
-              </Dialog.Panel>
-            </Transition.Child>
+              <input {...getInputProps()} />
+            </div>
+          </div>
+          {fileRejections.length > 0 && (
+            <p className="text-13 text-danger-primary">
+              {fileRejections[0].errors[0].code === "file-too-large"
+                ? "The image size cannot exceed 5 MB."
+                : "Please upload a file in a valid format."}
+            </p>
+          )}
+        </div>
+        <p className="my-4 text-13 text-secondary">File formats supported- .jpeg, .jpg, .png, .webp</p>
+        <div className="flex items-center justify-between">
+          <Button variant="error-fill" size="lg" onClick={handleImageRemove} disabled={!value} loading={isRemoving}>
+            {isRemoving ? "Removing" : "Remove"}
+          </Button>
+          <div className="flex items-center gap-2">
+            <Button variant="secondary" size="lg" onClick={handleClose}>
+              Cancel
+            </Button>
+            <Button variant="primary" size="lg" onClick={handleSubmit} disabled={!image} loading={isImageUploading}>
+              {isImageUploading ? "Uploading" : "Upload & Save"}
+            </Button>
           </div>
         </div>
-      </Dialog>
-    </Transition.Root>
+      </div>
+    </ModalCore>
   );
 });
diff --git a/apps/web/core/components/core/multiple-select/entity-select-action.tsx b/apps/web/core/components/core/multiple-select/entity-select-action.tsx
index 31f59e6e2..c6e740732 100644
--- a/apps/web/core/components/core/multiple-select/entity-select-action.tsx
+++ b/apps/web/core/components/core/multiple-select/entity-select-action.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 // ui
 import { Checkbox } from "@plane/ui";
@@ -23,7 +29,7 @@ export const MultipleSelectEntityAction = observer(function MultipleSelectEntity
 
   return (
     <Checkbox
-      className={cn("!outline-none size-3.5", className)}
+      className={cn("size-3.5 !outline-none", className)}
       iconClassName="size-3"
       onClick={(e) => {
         e.stopPropagation();
diff --git a/apps/web/core/components/core/multiple-select/group-select-action.tsx b/apps/web/core/components/core/multiple-select/group-select-action.tsx
index ec67bbac6..900b0e18e 100644
--- a/apps/web/core/components/core/multiple-select/group-select-action.tsx
+++ b/apps/web/core/components/core/multiple-select/group-select-action.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // ui
 import { Checkbox } from "@plane/ui";
 // helpers
diff --git a/apps/web/core/components/core/multiple-select/index.ts b/apps/web/core/components/core/multiple-select/index.ts
index b2cdf13c3..e14cb4c82 100644
--- a/apps/web/core/components/core/multiple-select/index.ts
+++ b/apps/web/core/components/core/multiple-select/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./entity-select-action";
 export * from "./group-select-action";
 export * from "./select-group";
diff --git a/apps/web/core/components/core/multiple-select/select-group.tsx b/apps/web/core/components/core/multiple-select/select-group.tsx
index c23ee07ee..7881b9e7d 100644
--- a/apps/web/core/components/core/multiple-select/select-group.tsx
+++ b/apps/web/core/components/core/multiple-select/select-group.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 // hooks
 import type { TSelectionHelper } from "@/hooks/use-multiple-select";
diff --git a/apps/web/core/components/core/page-title.tsx b/apps/web/core/components/core/page-title.tsx
index cd5198645..5f7d51d97 100644
--- a/apps/web/core/components/core/page-title.tsx
+++ b/apps/web/core/components/core/page-title.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useEffect } from "react";
 
 type PageHeadTitleProps = {
diff --git a/apps/web/core/components/core/render-if-visible-HOC.tsx b/apps/web/core/components/core/render-if-visible-HOC.tsx
index 13f809982..bd8a77a04 100644
--- a/apps/web/core/components/core/render-if-visible-HOC.tsx
+++ b/apps/web/core/components/core/render-if-visible-HOC.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { ReactNode, MutableRefObject } from "react";
 import React, { useState, useRef, useEffect } from "react";
 import { cn } from "@plane/utils";
@@ -79,7 +85,7 @@ function RenderIfVisible(props: Props) {
 
   const child = isVisible ? <>{children}</> : placeholderChildren;
   const style = isVisible || !shouldRecordHeights ? {} : { height: placeholderHeight.current, width: "100%" };
-  const className = isVisible || placeholderChildren ? classNames : cn(classNames, "bg-custom-background-80");
+  const className = isVisible || placeholderChildren ? classNames : cn(classNames, "bg-layer-1");
 
   return React.createElement(as, { ref: intersectionRef, style, className }, child);
 }
diff --git a/apps/web/core/components/core/sidebar/progress-chart.tsx b/apps/web/core/components/core/sidebar/progress-chart.tsx
index 190a8cc8c..a5b99a9cd 100644
--- a/apps/web/core/components/core/sidebar/progress-chart.tsx
+++ b/apps/web/core/components/core/sidebar/progress-chart.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 // plane imports
 import { AreaChart } from "@plane/propel/charts/area-chart";
diff --git a/apps/web/core/components/core/sidebar/progress-stats/assignee.tsx b/apps/web/core/components/core/sidebar/progress-stats/assignee.tsx
index 71fafb752..102123bea 100644
--- a/apps/web/core/components/core/sidebar/progress-stats/assignee.tsx
+++ b/apps/web/core/components/core/sidebar/progress-stats/assignee.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 // plane imports
 import { useTranslation } from "@plane/i18n";
@@ -55,8 +61,8 @@ export const AssigneeStatComponent = observer(function AssigneeStatComponent(pro
                 key={`unassigned-${index}`}
                 title={
                   <div className="flex items-center gap-2">
-                    <div className="h-4 w-4 rounded-full border-2 border-custom-border-200 bg-custom-background-80">
-                      <img src={userImage} className="rounded-full w-full h-full object-cover" alt="User" />
+                    <div className="h-4 w-4 rounded-full border-2 border-subtle bg-layer-1">
+                      <img src={userImage} className="h-full w-full rounded-full object-cover" alt="User" />
                     </div>
                     <span>{t("no_assignee")}</span>
                   </div>
@@ -68,10 +74,10 @@ export const AssigneeStatComponent = observer(function AssigneeStatComponent(pro
         })
       ) : (
         <div className="flex h-full flex-col items-center justify-center gap-2">
-          <div className="flex h-20 w-20 items-center justify-center rounded-full bg-custom-background-80">
+          <div className="flex h-20 w-20 items-center justify-center rounded-full bg-layer-1">
             <img src={emptyMembers} className="h-12 w-12 object-contain" alt="empty members" />
           </div>
-          <h6 className="text-base text-custom-text-300">{t("no_assignee")}</h6>
+          <h6 className="text-14 text-tertiary">{t("no_assignee")}</h6>
         </div>
       )}
     </div>
diff --git a/apps/web/core/components/core/sidebar/progress-stats/label.tsx b/apps/web/core/components/core/sidebar/progress-stats/label.tsx
index fb5b57571..c4754b764 100644
--- a/apps/web/core/components/core/sidebar/progress-stats/label.tsx
+++ b/apps/web/core/components/core/sidebar/progress-stats/label.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 // plane imports
 import { useTranslation } from "@plane/i18n";
@@ -35,12 +41,12 @@ export const LabelStatComponent = observer(function LabelStatComponent(props: TL
                 title={
                   <div className="flex items-center gap-2 truncate">
                     <span
-                      className="block h-3 w-3 rounded-full flex-shrink-0"
+                      className="block h-3 w-3 flex-shrink-0 rounded-full"
                       style={{
                         backgroundColor: label.color ?? "transparent",
                       }}
                     />
-                    <span className="text-xs text-ellipsis truncate">{label.title ?? t("no_labels_yet")}</span>
+                    <span className="truncate text-11 text-ellipsis">{label.title ?? t("no_labels_yet")}</span>
                   </div>
                 }
                 completed={label.completed}
@@ -63,7 +69,7 @@ export const LabelStatComponent = observer(function LabelStatComponent(props: TL
                         backgroundColor: label.color ?? "transparent",
                       }}
                     />
-                    <span className="text-xs">{label.title ?? t("no_labels_yet")}</span>
+                    <span className="text-11">{label.title ?? t("no_labels_yet")}</span>
                   </div>
                 }
                 completed={label.completed}
@@ -74,10 +80,10 @@ export const LabelStatComponent = observer(function LabelStatComponent(props: TL
         })
       ) : (
         <div className="flex h-full flex-col items-center justify-center gap-2">
-          <div className="flex h-20 w-20 items-center justify-center rounded-full bg-custom-background-80">
+          <div className="flex h-20 w-20 items-center justify-center rounded-full bg-layer-1">
             <img src={emptyLabel} className="h-12 w-12 object-contain" alt="empty label" />
           </div>
-          <h6 className="text-base text-custom-text-300">{t("no_labels_yet")}</h6>
+          <h6 className="text-14 text-tertiary">{t("no_labels_yet")}</h6>
         </div>
       )}
     </div>
diff --git a/apps/web/core/components/core/sidebar/progress-stats/shared.ts b/apps/web/core/components/core/sidebar/progress-stats/shared.ts
index 38f2352f3..93e0c8bf5 100644
--- a/apps/web/core/components/core/sidebar/progress-stats/shared.ts
+++ b/apps/web/core/components/core/sidebar/progress-stats/shared.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { TWorkItemFilterCondition } from "@plane/shared-state";
 import type { TFilterConditionNodeForDisplay, TFilterValue, TWorkItemFilterProperty } from "@plane/types";
 
diff --git a/apps/web/core/components/core/sidebar/progress-stats/state_group.tsx b/apps/web/core/components/core/sidebar/progress-stats/state_group.tsx
index 3714c615b..bcc4fdb76 100644
--- a/apps/web/core/components/core/sidebar/progress-stats/state_group.tsx
+++ b/apps/web/core/components/core/sidebar/progress-stats/state_group.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 // plane imports
 import { StateGroupIcon } from "@plane/propel/icons";
@@ -30,7 +36,7 @@ export const StateGroupStatComponent = observer(function StateGroupStatComponent
           title={
             <div className="flex items-center gap-2">
               <StateGroupIcon stateGroup={group.state as TStateGroups} />
-              <span className="text-xs capitalize">{group.state}</span>
+              <span className="text-11 capitalize">{group.state}</span>
             </div>
           }
           completed={group.completed}
diff --git a/apps/web/core/components/core/sidebar/sidebar-menu-hamburger-toggle.tsx b/apps/web/core/components/core/sidebar/sidebar-menu-hamburger-toggle.tsx
index 6f3cb2ab9..39f104d35 100644
--- a/apps/web/core/components/core/sidebar/sidebar-menu-hamburger-toggle.tsx
+++ b/apps/web/core/components/core/sidebar/sidebar-menu-hamburger-toggle.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import { PanelRight } from "lucide-react";
 import { useAppTheme } from "@/hooks/store/use-app-theme";
@@ -15,10 +21,10 @@ export const SidebarHamburgerToggle = observer(function SidebarHamburgerToggle()
   return (
     <button
       type="button"
-      className="group flex-shrink-0 size-7 grid place-items-center rounded hover:bg-custom-background-80 transition-all bg-custom-background-90"
+      className="group grid size-7 flex-shrink-0 place-items-center rounded-sm bg-surface-2 transition-all hover:bg-layer-1"
       onClick={handleClick}
     >
-      <PanelRight className="size-3.5 text-custom-text-200 transition-all group-hover:text-custom-text-100" />
+      <PanelRight className="size-3.5 text-secondary transition-all group-hover:text-primary" />
     </button>
   );
 });
diff --git a/apps/web/core/components/core/sidebar/single-progress-stats.tsx b/apps/web/core/components/core/sidebar/single-progress-stats.tsx
index f5eacec1b..59c219b36 100644
--- a/apps/web/core/components/core/sidebar/single-progress-stats.tsx
+++ b/apps/web/core/components/core/sidebar/single-progress-stats.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 
 type TSingleProgressStatsProps = {
@@ -11,9 +17,9 @@ type TSingleProgressStatsProps = {
 export function SingleProgressStats({ title, completed, total, onClick, selected = false }: TSingleProgressStatsProps) {
   return (
     <div
-      className={`flex w-full items-center justify-between gap-4 rounded-sm p-1 text-xs ${
-        onClick ? "cursor-pointer hover:bg-custom-background-90" : ""
-      } ${selected ? "bg-custom-background-80" : ""}`}
+      className={`flex w-full items-center justify-between gap-4 rounded-xs p-1 text-11 ${
+        onClick ? "cursor-pointer hover:bg-surface-2" : ""
+      } ${selected ? "bg-layer-1" : ""}`}
       onClick={onClick}
     >
       <div className="w-4/6">{title}</div>
diff --git a/apps/web/core/components/core/theme/color-inputs.tsx b/apps/web/core/components/core/theme/color-inputs.tsx
new file mode 100644
index 000000000..bb3f79952
--- /dev/null
+++ b/apps/web/core/components/core/theme/color-inputs.tsx
@@ -0,0 +1,98 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import type { Control } from "react-hook-form";
+import { Controller } from "react-hook-form";
+// plane imports
+import type { IUserTheme } from "@plane/types";
+import { InputColorPicker } from "@plane/ui";
+
+type Props = {
+  control: Control<IUserTheme>;
+};
+
+export const CustomThemeColorInputs = observer(function CustomThemeColorInputs(props: Props) {
+  const { control } = props;
+
+  const handleValueChange = (val: string | undefined, onChange: (...args: unknown[]) => void) => {
+    let hex = val;
+    // prepend a hashtag if it doesn't exist
+    if (val && val[0] !== "#") hex = `#${val}`;
+    onChange(hex);
+  };
+
+  return (
+    <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+      {/* Neutral Color */}
+      <div className="flex flex-col gap-2">
+        <h3 className="text-body-sm-medium">
+          Neutral color<span className="text-danger-primary">*</span>
+        </h3>
+        <div className="w-full">
+          <Controller
+            control={control}
+            name="background"
+            rules={{
+              required: "Neutral color is required",
+              pattern: {
+                value: /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/,
+                message: "Enter a valid hex code",
+              },
+            }}
+            render={({ field: { value, onChange } }) => (
+              <InputColorPicker
+                name="background"
+                value={value}
+                onChange={(val) => handleValueChange(val, onChange)}
+                placeholder="#1a1a1a"
+                className="w-full placeholder:text-placeholder"
+                style={{
+                  backgroundColor: value,
+                  color: "#ffffff",
+                }}
+                hasError={false}
+              />
+            )}
+          />
+        </div>
+      </div>
+      {/* Brand Color */}
+      <div className="flex flex-col gap-2">
+        <h3 className="text-body-sm-medium">
+          Brand color<span className="text-danger-primary">*</span>
+        </h3>
+        <div className="w-full">
+          <Controller
+            control={control}
+            name="primary"
+            rules={{
+              required: "Brand color is required",
+              pattern: {
+                value: /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/,
+                message: "Enter a valid hex code",
+              },
+            }}
+            render={({ field: { value, onChange } }) => (
+              <InputColorPicker
+                name="primary"
+                value={value}
+                onChange={(val) => handleValueChange(val, onChange)}
+                placeholder="#3f76ff"
+                className="w-full placeholder:text-placeholder"
+                style={{
+                  backgroundColor: value,
+                  color: "#ffffff",
+                }}
+                hasError={false}
+              />
+            )}
+          />
+        </div>
+      </div>
+    </div>
+  );
+});
diff --git a/apps/web/core/components/core/theme/color-picker-input.tsx b/apps/web/core/components/core/theme/color-picker-input.tsx
deleted file mode 100644
index ddbac128b..000000000
--- a/apps/web/core/components/core/theme/color-picker-input.tsx
+++ /dev/null
@@ -1,130 +0,0 @@
-import type { FC } from "react";
-import { Fragment } from "react";
-// react-form
-import type { ColorResult } from "react-color";
-import { SketchPicker } from "react-color";
-import type {
-  Control,
-  FieldError,
-  FieldErrorsImpl,
-  Merge,
-  UseFormRegister,
-  UseFormSetValue,
-  UseFormWatch,
-} from "react-hook-form";
-import { Controller } from "react-hook-form";
-// react-color
-// component
-import { Palette } from "lucide-react";
-import { Popover, Transition } from "@headlessui/react";
-import type { IUserTheme } from "@plane/types";
-import { Input } from "@plane/ui";
-// icons
-// types
-
-type Props = {
-  name: keyof IUserTheme;
-  position?: "left" | "right";
-  watch: UseFormWatch<any>;
-  setValue: UseFormSetValue<any>;
-  control: Control<IUserTheme, any>;
-  error: FieldError | Merge<FieldError, FieldErrorsImpl<any>> | undefined;
-  register: UseFormRegister<any>;
-};
-
-export function ColorPickerInput(props: Props) {
-  const { name, position = "left", watch, setValue, error, control } = props;
-
-  const handleColorChange = (newColor: ColorResult) => {
-    const { hex } = newColor;
-    setValue(name, hex);
-  };
-
-  const getColorText = (colorName: keyof IUserTheme) => {
-    switch (colorName) {
-      case "background":
-        return "Background";
-      case "text":
-        return "Text";
-      case "primary":
-        return "Primary(Theme)";
-      case "sidebarBackground":
-        return "Sidebar Background";
-      case "sidebarText":
-        return "Sidebar Text";
-      default:
-        return "Color";
-    }
-  };
-
-  return (
-    <div className="relative">
-      <Controller
-        control={control}
-        name={name}
-        rules={{
-          required: `${getColorText(name)} color is required`,
-          pattern: {
-            value: /^#(?:[0-9a-fA-F]{3}){1,2}$/g,
-            message: `${getColorText(name)} color should be hex format`,
-          },
-        }}
-        render={({ field: { onChange, ref } }) => (
-          <Input
-            id={name}
-            name={name}
-            type="text"
-            value={watch("name")}
-            onChange={onChange}
-            ref={ref}
-            hasError={Boolean(error)}
-            placeholder="#FFFFFF"
-          />
-        )}
-      />
-      <div className="absolute right-4 top-2.5">
-        <Popover className="relative grid place-items-center">
-          {({ open }) => (
-            <>
-              <Popover.Button
-                type="button"
-                className={`group inline-flex items-center outline-none ${
-                  open ? "text-custom-text-100" : "text-custom-text-200"
-                }`}
-              >
-                {watch(name) && watch(name) !== "" ? (
-                  <span
-                    className="h-4 w-4 rounded border border-custom-border-200"
-                    style={{
-                      backgroundColor: `${watch(name)}`,
-                    }}
-                  />
-                ) : (
-                  <Palette className="h-3.5 w-3.5 text-custom-text-100" />
-                )}
-              </Popover.Button>
-
-              <Transition
-                as={Fragment}
-                enter="transition ease-out duration-200"
-                enterFrom="opacity-0 translate-y-1"
-                enterTo="opacity-100 translate-y-0"
-                leave="transition ease-in duration-150"
-                leaveFrom="opacity-100 translate-y-0"
-                leaveTo="opacity-0 translate-y-1"
-              >
-                <Popover.Panel
-                  className={`absolute bottom-8 z-20 mt-1 max-w-xs px-2 sm:px-0 ${
-                    position === "right" ? "left-0" : "right-0"
-                  }`}
-                >
-                  <SketchPicker color={watch(name)} onChange={handleColorChange} />
-                </Popover.Panel>
-              </Transition>
-            </>
-          )}
-        </Popover>
-      </div>
-    </div>
-  );
-}
diff --git a/apps/web/core/components/core/theme/custom-theme-selector.tsx b/apps/web/core/components/core/theme/custom-theme-selector.tsx
index 3273b74de..359770100 100644
--- a/apps/web/core/components/core/theme/custom-theme-selector.tsx
+++ b/apps/web/core/components/core/theme/custom-theme-selector.tsx
@@ -1,273 +1,126 @@
-import { useMemo } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useMemo, useState } from "react";
 import { observer } from "mobx-react";
-import { Controller, useForm } from "react-hook-form";
-// types
-import { PROFILE_SETTINGS_TRACKER_ELEMENTS, PROFILE_SETTINGS_TRACKER_EVENTS } from "@plane/constants";
+import { useForm } from "react-hook-form";
+// plane imports
 import { useTranslation } from "@plane/i18n";
 import { Button } from "@plane/propel/button";
-import { setPromiseToast } from "@plane/propel/toast";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { IUserTheme } from "@plane/types";
-// ui
-import { InputColorPicker } from "@plane/ui";
+import { applyCustomTheme } from "@plane/utils";
+// components
+import { ProfileSettingsHeading } from "@/components/settings/profile/heading";
 // hooks
-import { captureElementAndEvent } from "@/helpers/event-tracker.helper";
 import { useUserProfile } from "@/hooks/store/user";
+// local imports
+import { CustomThemeColorInputs } from "./color-inputs";
+import { CustomThemeDownloadConfigButton } from "./download-config-button";
+import { CustomThemeImportConfigButton } from "./import-config-button";
+import { CustomThemeModeSelector } from "./theme-mode-selector";
 
-type TCustomThemeSelector = {
-  applyThemeChange: (theme: Partial<IUserTheme>) => void;
-};
-
-export const CustomThemeSelector = observer(function CustomThemeSelector(props: TCustomThemeSelector) {
-  const { applyThemeChange } = props;
-  // hooks
+export const CustomThemeSelector = observer(function CustomThemeSelector() {
+  // store hooks
   const { data: userProfile, updateUserTheme } = useUserProfile();
+  // translation
   const { t } = useTranslation();
+
+  // Loading state for async palette generation
+  const [isLoadingPalette, setIsLoadingPalette] = useState(false);
+
+  // Load saved theme from userProfile (fallback to defaults)
+  const savedTheme = useMemo((): IUserTheme => {
+    const theme = userProfile?.theme;
+    if (theme && theme.primary && theme.background) {
+      return {
+        theme: "custom",
+        primary: theme.primary,
+        background: theme.background,
+        darkPalette: !!theme.darkPalette,
+      };
+    }
+
+    // Fallback to defaults
+    return {
+      theme: "custom",
+      primary: "#3f76ff",
+      background: "#1a1a1a",
+      darkPalette: false,
+    };
+  }, [userProfile?.theme]);
+
   const {
     control,
-    formState: { errors, isSubmitting },
+    formState: { isSubmitting },
     handleSubmit,
-    watch,
+    getValues,
+    setValue,
   } = useForm<IUserTheme>({
-    defaultValues: {
-      background: userProfile?.theme?.background !== "" ? userProfile?.theme?.background : "#0d101b",
-      text: userProfile?.theme?.text !== "" ? userProfile?.theme?.text : "#c5c5c5",
-      primary: userProfile?.theme?.primary !== "" ? userProfile?.theme?.primary : "#3f76ff",
-      sidebarBackground:
-        userProfile?.theme?.sidebarBackground !== "" ? userProfile?.theme?.sidebarBackground : "#0d101b",
-      sidebarText: userProfile?.theme?.sidebarText !== "" ? userProfile?.theme?.sidebarText : "#c5c5c5",
-      darkPalette: userProfile?.theme?.darkPalette || false,
-      palette: userProfile?.theme?.palette !== "" ? userProfile?.theme?.palette : "",
-    },
+    defaultValues: savedTheme,
   });
 
-  const inputRules = useMemo(
-    () => ({
-      minLength: {
-        value: 7,
-        message: t("enter_a_valid_hex_code_of_6_characters"),
-      },
-      maxLength: {
-        value: 7,
-        message: t("enter_a_valid_hex_code_of_6_characters"),
-      },
-      pattern: {
-        value: /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/,
-        message: t("enter_a_valid_hex_code_of_6_characters"),
-      },
-    }),
-    [t] // Empty dependency array since these rules never change
-  );
+  const handleUpdateTheme = async (formData: IUserTheme) => {
+    if (!formData.primary || !formData.background) return;
 
-  const handleUpdateTheme = async (formData: Partial<IUserTheme>) => {
-    const payload: IUserTheme = {
-      background: formData.background,
-      text: formData.text,
-      primary: formData.primary,
-      sidebarBackground: formData.sidebarBackground,
-      sidebarText: formData.sidebarText,
-      darkPalette: false,
-      palette: `${formData.background},${formData.text},${formData.primary},${formData.sidebarBackground},${formData.sidebarText}`,
-      theme: "custom",
-    };
-    applyThemeChange(payload);
-
-    const updateCurrentUserThemePromise = updateUserTheme(payload);
-    setPromiseToast(updateCurrentUserThemePromise, {
-      loading: t("updating_theme"),
-      success: {
-        title: t("success"),
-        message: () => t("theme_updated_successfully"),
-      },
-      error: {
-        title: t("error"),
-        message: () => t("failed_to_update_the_theme"),
-      },
-    });
-    updateCurrentUserThemePromise
-      .then(() => {
-        captureElementAndEvent({
-          element: {
-            elementName: PROFILE_SETTINGS_TRACKER_ELEMENTS.THEME_DROPDOWN,
-          },
-          event: {
-            eventName: PROFILE_SETTINGS_TRACKER_EVENTS.theme_updated,
-            payload: {
-              theme: payload.theme,
-            },
-            state: "SUCCESS",
-          },
-        });
-      })
-      .catch(() => {
-        captureElementAndEvent({
-          element: {
-            elementName: PROFILE_SETTINGS_TRACKER_ELEMENTS.THEME_DROPDOWN,
-          },
-          event: {
-            eventName: PROFILE_SETTINGS_TRACKER_EVENTS.theme_updated,
-            payload: {
-              theme: payload.theme,
-            },
-            state: "ERROR",
-          },
-        });
+    try {
+      setIsLoadingPalette(true);
+      applyCustomTheme(formData.primary, formData.background, formData.darkPalette ? "dark" : "light");
+      // Save to profile endpoint
+      await updateUserTheme({
+        theme: "custom",
+        primary: formData.primary,
+        background: formData.background,
+        darkPalette: formData.darkPalette,
       });
 
-    return;
-  };
-
-  const handleValueChange = (val: string | undefined, onChange: any) => {
-    let hex = val;
-    // prepend a hashtag if it doesn't exist
-    if (val && val[0] !== "#") hex = `#${val}`;
-
-    onChange(hex);
+      setToast({
+        type: TOAST_TYPE.SUCCESS,
+        title: t("success"),
+        message: "Reloading to apply changes...",
+      });
+      // reload the page after showing the toast
+      setTimeout(() => {
+        window.location.reload();
+      }, 1500);
+    } catch (error) {
+      console.error("Failed to apply theme:", error);
+      setToast({
+        type: TOAST_TYPE.ERROR,
+        title: t("error"),
+        message: t("failed_to_update_the_theme"),
+      });
+    } finally {
+      setIsLoadingPalette(false);
+    }
   };
 
   return (
-    <form onSubmit={handleSubmit(handleUpdateTheme)}>
+    <form
+      onSubmit={(e) => {
+        void handleSubmit(handleUpdateTheme)(e);
+      }}
+      className="rounded-lg border border-subtle bg-layer-1 px-4 py-3"
+    >
       <div className="space-y-5">
-        <h3 className="text-lg font-semibold text-custom-text-100">{t("customize_your_theme")}</h3>
-        <div className="space-y-4">
-          <div className="grid grid-cols-1 gap-x-8 gap-y-4 sm:grid-cols-2 md:grid-cols-3">
-            <div className="flex flex-col items-start gap-2">
-              <h3 className="text-left text-sm font-medium text-custom-text-200">{t("background_color")}</h3>
-              <div className="w-full">
-                <Controller
-                  control={control}
-                  name="background"
-                  rules={{ ...inputRules, required: t("background_color_is_required") }}
-                  render={({ field: { value, onChange } }) => (
-                    <InputColorPicker
-                      name="background"
-                      value={value}
-                      onChange={(val) => handleValueChange(val, onChange)}
-                      placeholder="#0d101b"
-                      className="w-full placeholder:text-custom-text-400/60"
-                      style={{
-                        backgroundColor: watch("background"),
-                        color: watch("text"),
-                      }}
-                      hasError={Boolean(errors?.background)}
-                    />
-                  )}
-                />
-                {errors.background && <p className="mt-1 text-xs text-red-500">{errors.background.message}</p>}
-              </div>
-            </div>
-
-            <div className="flex flex-col items-start gap-2">
-              <h3 className="text-left text-sm font-medium text-custom-text-200">{t("text_color")}</h3>
-              <div className="w-full">
-                <Controller
-                  control={control}
-                  name="text"
-                  rules={{ ...inputRules, required: t("text_color_is_required") }}
-                  render={({ field: { value, onChange } }) => (
-                    <InputColorPicker
-                      name="text"
-                      value={value}
-                      onChange={(val) => handleValueChange(val, onChange)}
-                      placeholder="#c5c5c5"
-                      className="w-full placeholder:text-custom-text-400/60"
-                      style={{
-                        backgroundColor: watch("text"),
-                        color: watch("background"),
-                      }}
-                      hasError={Boolean(errors?.text)}
-                    />
-                  )}
-                />
-                {errors.text && <p className="mt-1 text-xs text-red-500">{errors.text.message}</p>}
-              </div>
-            </div>
-
-            <div className="flex flex-col items-start gap-2">
-              <h3 className="text-left text-sm font-medium text-custom-text-200">{t("primary_color")}</h3>
-              <div className="w-full">
-                <Controller
-                  control={control}
-                  name="primary"
-                  rules={{ ...inputRules, required: t("primary_color_is_required") }}
-                  render={({ field: { value, onChange } }) => (
-                    <InputColorPicker
-                      name="primary"
-                      value={value}
-                      onChange={(val) => handleValueChange(val, onChange)}
-                      placeholder="#3f76ff"
-                      className="w-full placeholder:text-custom-text-400/60"
-                      style={{
-                        backgroundColor: watch("primary"),
-                        color: watch("text"),
-                      }}
-                      hasError={Boolean(errors?.primary)}
-                    />
-                  )}
-                />
-                {errors.primary && <p className="mt-1 text-xs text-red-500">{errors.primary.message}</p>}
-              </div>
-            </div>
-
-            <div className="flex flex-col items-start gap-2">
-              <h3 className="text-left text-sm font-medium text-custom-text-200">{t("sidebar_background_color")}</h3>
-              <div className="w-full">
-                <Controller
-                  control={control}
-                  name="sidebarBackground"
-                  rules={{ ...inputRules, required: t("sidebar_background_color_is_required") }}
-                  render={({ field: { value, onChange } }) => (
-                    <InputColorPicker
-                      name="sidebarBackground"
-                      value={value}
-                      onChange={(val) => handleValueChange(val, onChange)}
-                      placeholder="#0d101b"
-                      className="w-full placeholder:text-custom-text-400/60"
-                      style={{
-                        backgroundColor: watch("sidebarBackground"),
-                        color: watch("sidebarText"),
-                      }}
-                      hasError={Boolean(errors?.sidebarBackground)}
-                    />
-                  )}
-                />
-                {errors.sidebarBackground && (
-                  <p className="mt-1 text-xs text-red-500">{errors.sidebarBackground.message}</p>
-                )}
-              </div>
-            </div>
-
-            <div className="flex flex-col items-start gap-2">
-              <h3 className="text-left text-sm font-medium text-custom-text-200">{t("sidebar_text_color")}</h3>
-              <div className="w-full">
-                <Controller
-                  control={control}
-                  name="sidebarText"
-                  rules={{ ...inputRules, required: t("sidebar_text_color_is_required") }}
-                  render={({ field: { value, onChange } }) => (
-                    <InputColorPicker
-                      name="sidebarText"
-                      value={value}
-                      onChange={(val) => handleValueChange(val, onChange)}
-                      placeholder="#c5c5c5"
-                      className="w-full placeholder:text-custom-text-400/60"
-                      style={{
-                        backgroundColor: watch("sidebarText"),
-                        color: watch("sidebarBackground"),
-                      }}
-                      hasError={Boolean(errors?.sidebarText)}
-                    />
-                  )}
-                />
-                {errors.sidebarText && <p className="mt-1 text-xs text-red-500">{errors.sidebarText.message}</p>}
-              </div>
-            </div>
-          </div>
-        </div>
+        <ProfileSettingsHeading
+          title={t("customize_your_theme")}
+          control={<CustomThemeImportConfigButton handleUpdateTheme={handleUpdateTheme} setValue={setValue} />}
+        />
+        <CustomThemeModeSelector control={control} />
+        {/* Color Inputs */}
+        <CustomThemeColorInputs control={control} />
       </div>
-      <div className="mt-5 flex justify-end gap-2">
-        <Button variant="primary" type="submit" loading={isSubmitting}>
-          {isSubmitting ? t("creating_theme") : t("set_theme")}
+      <div className="mt-5 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+        {/* Save Theme Button */}
+        <Button variant="primary" size="lg" type="submit" loading={isSubmitting || isLoadingPalette}>
+          {isSubmitting ? t("creating_theme") : isLoadingPalette ? "Generating" : t("set_theme")}
         </Button>
+        {/* Import/Export Section */}
+        <CustomThemeDownloadConfigButton getValues={getValues} />
       </div>
     </form>
   );
diff --git a/apps/web/core/components/core/theme/download-config-button.tsx b/apps/web/core/components/core/theme/download-config-button.tsx
new file mode 100644
index 000000000..c2ffc0bc3
--- /dev/null
+++ b/apps/web/core/components/core/theme/download-config-button.tsx
@@ -0,0 +1,65 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import type { UseFormGetValues } from "react-hook-form";
+// plane imports
+import { useTranslation } from "@plane/i18n";
+import { Button } from "@plane/propel/button";
+import { setToast, TOAST_TYPE } from "@plane/propel/toast";
+import type { IUserTheme } from "@plane/types";
+
+type Props = {
+  getValues: UseFormGetValues<IUserTheme>;
+};
+
+export const CustomThemeDownloadConfigButton = observer(function CustomThemeDownloadConfigButton(props: Props) {
+  const { getValues } = props;
+  // translation
+  const { t } = useTranslation();
+
+  const handleDownloadConfig = () => {
+    try {
+      const currentValues = getValues();
+      const config = {
+        version: "1.0",
+        themeName: "Custom Theme",
+        primary: currentValues.primary,
+        background: currentValues.background,
+        darkPalette: currentValues.darkPalette,
+      };
+
+      const blob = new Blob([JSON.stringify(config, null, 2)], { type: "application/json" });
+      const url = URL.createObjectURL(blob);
+      const link = document.createElement("a");
+      link.href = url;
+      link.download = `plane-theme-${Date.now()}.json`;
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+      URL.revokeObjectURL(url);
+
+      setToast({
+        type: TOAST_TYPE.SUCCESS,
+        title: t("success"),
+        message: "Theme configuration downloaded successfully.",
+      });
+    } catch (error) {
+      console.error("Failed to download config:", error);
+      setToast({
+        type: TOAST_TYPE.ERROR,
+        title: t("error"),
+        message: "Failed to download theme configuration.",
+      });
+    }
+  };
+
+  return (
+    <Button variant="secondary" size="lg" type="button" onClick={handleDownloadConfig}>
+      Download config
+    </Button>
+  );
+});
diff --git a/apps/web/core/components/core/theme/import-config-button.tsx b/apps/web/core/components/core/theme/import-config-button.tsx
new file mode 100644
index 000000000..a4586163b
--- /dev/null
+++ b/apps/web/core/components/core/theme/import-config-button.tsx
@@ -0,0 +1,101 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useRef } from "react";
+import { observer } from "mobx-react";
+import type { UseFormSetValue } from "react-hook-form";
+// plane imports
+import { useTranslation } from "@plane/i18n";
+import { Button } from "@plane/propel/button";
+import { setToast, TOAST_TYPE } from "@plane/propel/toast";
+import type { IUserTheme } from "@plane/types";
+
+type Props = {
+  handleUpdateTheme: (formData: IUserTheme) => Promise<void>;
+  setValue: UseFormSetValue<IUserTheme>;
+};
+
+export const CustomThemeImportConfigButton = observer(function CustomThemeImportConfigButton(props: Props) {
+  const { handleUpdateTheme, setValue } = props;
+  // refs
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  // translation
+  const { t } = useTranslation();
+
+  const handleUploadConfig = async (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (!file) return;
+
+    try {
+      const text = await file.text();
+      const config = JSON.parse(text) as IUserTheme;
+
+      // Validate required fields
+      if (!config.primary || !config.background) {
+        throw new Error("Missing required fields: primary and background");
+      }
+
+      // Validate hex color format
+      const hexPattern = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/;
+      if (!hexPattern.test(config.primary)) {
+        throw new Error("Invalid brand color hex format");
+      }
+      if (!hexPattern.test(config.background)) {
+        throw new Error("Invalid neutral color hex format");
+      }
+
+      // Validate theme mode
+      const themeMode = config.darkPalette ?? false;
+      if (typeof themeMode !== "boolean") {
+        throw new Error("Invalid theme mode. Must be a boolean");
+      }
+
+      // Apply the configuration to form
+      const formData: IUserTheme = {
+        theme: "custom",
+        primary: config.primary,
+        background: config.background,
+        darkPalette: themeMode,
+      };
+
+      // Update form values
+      setValue("primary", formData.primary);
+      setValue("background", formData.background);
+      setValue("darkPalette", formData.darkPalette);
+      setValue("theme", "custom");
+
+      // Apply the theme
+      await handleUpdateTheme(formData);
+
+      setToast({
+        type: TOAST_TYPE.SUCCESS,
+        title: t("success"),
+        message: "Theme configuration imported successfully",
+      });
+    } catch (error) {
+      console.error("Failed to upload config:", error);
+      setToast({
+        type: TOAST_TYPE.ERROR,
+        title: t("error"),
+        message: error instanceof Error ? error.message : "Failed to import theme configuration",
+      });
+    } finally {
+      // Reset file input
+      if (fileInputRef.current) {
+        fileInputRef.current.value = "";
+      }
+    }
+  };
+
+  return (
+    <>
+      <input ref={fileInputRef} type="file" accept=".json" onChange={handleUploadConfig} className="hidden" />
+      <Button variant="secondary" size="lg" type="button" onClick={() => fileInputRef.current?.click()}>
+        Import config
+      </Button>
+    </>
+  );
+});
diff --git a/apps/web/core/components/core/theme/theme-mode-selector.tsx b/apps/web/core/components/core/theme/theme-mode-selector.tsx
new file mode 100644
index 000000000..c9d31cb08
--- /dev/null
+++ b/apps/web/core/components/core/theme/theme-mode-selector.tsx
@@ -0,0 +1,57 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import type { Control } from "react-hook-form";
+import { Controller } from "react-hook-form";
+// plane imports
+import type { IUserTheme } from "@plane/types";
+
+type Props = {
+  control: Control<IUserTheme>;
+};
+
+export const CustomThemeModeSelector = observer(function CustomThemeModeSelector(props: Props) {
+  const { control } = props;
+
+  return (
+    <div>
+      <h6 className="text-h6-medium">
+        Choose color mode<span className="text-danger-primary">*</span>
+      </h6>
+      <Controller
+        control={control}
+        name="darkPalette"
+        render={({ field: { value, onChange } }) => (
+          <div className="mt-2 flex items-center gap-3">
+            <label className="flex cursor-pointer items-center gap-1.5 rounded-lg border border-subtle-1 bg-layer-2 px-3 py-2 text-body-sm-regular transition-colors hover:bg-layer-2-hover">
+              <input
+                type="radio"
+                name="darkPalette"
+                value="false"
+                checked={value === false}
+                onChange={() => onChange(false)}
+                className="cursor-pointer"
+              />
+              Light mode
+            </label>
+            <label className="flex cursor-pointer items-center gap-1.5 rounded-lg border border-subtle-1 bg-layer-2 px-3 py-2 text-body-sm-regular transition-colors hover:bg-layer-2-hover">
+              <input
+                type="radio"
+                name="darkPalette"
+                value="true"
+                checked={value === true}
+                onChange={() => onChange(true)}
+                className="cursor-pointer"
+              />
+              Dark mode
+            </label>
+          </div>
+        )}
+      />
+    </div>
+  );
+});
diff --git a/apps/web/core/components/core/theme/theme-switch.tsx b/apps/web/core/components/core/theme/theme-switch.tsx
index 597ee3394..b9de9bc5d 100644
--- a/apps/web/core/components/core/theme/theme-switch.tsx
+++ b/apps/web/core/components/core/theme/theme-switch.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // plane imports
 import type { I_THEME_OPTION } from "@plane/constants";
 import { THEME_OPTIONS } from "@plane/constants";
@@ -14,7 +19,9 @@ type Props = {
 
 export function ThemeSwitch(props: Props) {
   const { value, onChange } = props;
+  // translation
   const { t } = useTranslation();
+
   return (
     <CustomSelect
       value={value}
@@ -22,7 +29,7 @@ export function ThemeSwitch(props: Props) {
         value ? (
           <div className="flex items-center gap-2">
             <div
-              className="border-1 relative flex h-4 w-4 rotate-45 transform items-center justify-center rounded-full border"
+              className="relative flex h-4 w-4 rotate-45 transform items-center justify-center rounded-full border-1"
               style={{
                 borderColor: value.icon.border,
               }}
@@ -48,13 +55,15 @@ export function ThemeSwitch(props: Props) {
         )
       }
       onChange={onChange}
+      buttonClassName="border border-subtle-1"
+      placement="bottom-end"
       input
     >
       {THEME_OPTIONS.map((themeOption) => (
         <CustomSelect.Option key={themeOption.value} value={themeOption}>
           <div className="flex items-center gap-2">
             <div
-              className="border-1 relative flex h-4 w-4 rotate-45 transform items-center justify-center rounded-full border"
+              className="relative flex h-4 w-4 rotate-45 transform items-center justify-center rounded-full border border-1"
               style={{
                 borderColor: themeOption.icon.border,
               }}
diff --git a/apps/web/core/components/cycles/active-cycle/cycle-stats.tsx b/apps/web/core/components/cycles/active-cycle/cycle-stats.tsx
index 57e70e2b2..f6ea00ba6 100644
--- a/apps/web/core/components/cycles/active-cycle/cycle-stats.tsx
+++ b/apps/web/core/components/cycles/active-cycle/cycle-stats.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { Fragment, useCallback, useRef, useState } from "react";
 import { isEmpty } from "lodash-es";
 import { observer } from "mobx-react";
@@ -100,7 +105,7 @@ export const ActiveCycleStats = observer(function ActiveCycleStats(props: Active
   );
 
   return cycleId ? (
-    <div className="flex flex-col gap-4 p-4 min-h-[17rem] overflow-hidden bg-custom-background-100 col-span-1 lg:col-span-2 xl:col-span-1 border border-custom-border-200 rounded-lg">
+    <div className="col-span-1 flex min-h-[17rem] flex-col gap-4 overflow-hidden rounded-lg border border-subtle bg-surface-1 p-4 lg:col-span-2 xl:col-span-1">
       <Tab.Group
         as={Fragment}
         defaultIndex={currentValue(tab)}
@@ -120,7 +125,7 @@ export const ActiveCycleStats = observer(function ActiveCycleStats(props: Active
       >
         <Tab.List
           as="div"
-          className="relative border-[0.5px] border-custom-border-200 rounded bg-custom-background-80 p-[1px] grid"
+          className="relative grid rounded-sm border-[0.5px] border-subtle bg-layer-1 p-[1px]"
           style={{
             gridTemplateColumns: `repeat(3, 1fr)`,
           }}
@@ -128,10 +133,10 @@ export const ActiveCycleStats = observer(function ActiveCycleStats(props: Active
           <Tab
             className={({ selected }) =>
               cn(
-                "relative z-[1] font-semibold text-xs rounded-[3px] py-1.5 text-custom-text-400 focus:outline-none transition duration-500",
+                "relative z-[1] rounded-[3px] py-1.5 text-11 font-semibold text-placeholder transition duration-500 focus:outline-none",
                 {
-                  "text-custom-text-300 bg-custom-background-100": selected,
-                  "hover:text-custom-text-300": !selected,
+                  "bg-surface-1 text-tertiary": selected,
+                  "hover:text-tertiary": !selected,
                 }
               )
             }
@@ -141,10 +146,10 @@ export const ActiveCycleStats = observer(function ActiveCycleStats(props: Active
           <Tab
             className={({ selected }) =>
               cn(
-                "relative z-[1] font-semibold text-xs rounded-[3px] py-1.5 text-custom-text-400 focus:outline-none transition duration-500",
+                "relative z-[1] rounded-[3px] py-1.5 text-11 font-semibold text-placeholder transition duration-500 focus:outline-none",
                 {
-                  "text-custom-text-300 bg-custom-background-100": selected,
-                  "hover:text-custom-text-300": !selected,
+                  "bg-surface-1 text-tertiary": selected,
+                  "hover:text-tertiary": !selected,
                 }
               )
             }
@@ -154,10 +159,10 @@ export const ActiveCycleStats = observer(function ActiveCycleStats(props: Active
           <Tab
             className={({ selected }) =>
               cn(
-                "relative z-[1] font-semibold text-xs rounded-[3px] py-1.5 text-custom-text-400 focus:outline-none transition duration-500",
+                "relative z-[1] rounded-[3px] py-1.5 text-11 font-semibold text-placeholder transition duration-500 focus:outline-none",
                 {
-                  "text-custom-text-300 bg-custom-background-100": selected,
-                  "hover:text-custom-text-300": !selected,
+                  "bg-surface-1 text-tertiary": selected,
+                  "hover:text-tertiary": !selected,
                 }
               )
             }
@@ -169,11 +174,11 @@ export const ActiveCycleStats = observer(function ActiveCycleStats(props: Active
         <Tab.Panels as={Fragment}>
           <Tab.Panel
             as="div"
-            className="flex h-52 w-full flex-col gap-1 overflow-y-auto  text-custom-text-200 vertical-scrollbar scrollbar-sm"
+            className="vertical-scrollbar flex scrollbar-sm h-52 w-full flex-col gap-1 overflow-y-auto text-secondary"
           >
             <div
               ref={issuesContainerRef}
-              className="flex flex-col gap-1 h-full w-full overflow-y-auto vertical-scrollbar scrollbar-sm"
+              className="vertical-scrollbar flex scrollbar-sm h-full w-full flex-col gap-1 overflow-y-auto"
             >
               {cycleIssueDetails && "issueIds" in cycleIssueDetails ? (
                 cycleIssueDetails.issueCount > 0 ? (
@@ -186,7 +191,7 @@ export const ActiveCycleStats = observer(function ActiveCycleStats(props: Active
                       return (
                         <div
                           key={issue.id}
-                          className="group flex cursor-pointer items-center justify-between gap-2 rounded-md hover:bg-custom-background-90 p-1"
+                          className="group flex cursor-pointer items-center justify-between gap-2 rounded-md p-1 hover:bg-surface-2"
                           onClick={() => {
                             if (issue.id) {
                               setPeekIssue({
@@ -201,18 +206,14 @@ export const ActiveCycleStats = observer(function ActiveCycleStats(props: Active
                             }
                           }}
                         >
-                          <div className="flex items-center gap-1.5 flex-grow w-full min-w-24 truncate">
-                            <IssueIdentifier
-                              issueId={issue.id}
-                              projectId={projectId}
-                              textContainerClassName="text-xs text-custom-text-200"
-                            />
+                          <div className="flex w-full min-w-24 flex-grow items-center gap-1.5 truncate">
+                            <IssueIdentifier issueId={issue.id} projectId={projectId} size="xs" variant="secondary" />
                             <Tooltip position="top-start" tooltipHeading="Title" tooltipContent={issue.name}>
-                              <span className="text-[0.825rem] text-custom-text-100 truncate">{issue.name}</span>
+                              <span className="truncate text-13 text-primary">{issue.name}</span>
                             </Tooltip>
                           </div>
                           <PriorityIcon priority={issue.priority} withContainer size={12} />
-                          <div className="flex items-center gap-1.5 flex-shrink-0">
+                          <div className="flex flex-shrink-0 items-center gap-1.5">
                             <StateDropdown
                               value={issue.state_id}
                               onChange={() => {}}
@@ -227,9 +228,9 @@ export const ActiveCycleStats = observer(function ActiveCycleStats(props: Active
                                 tooltipHeading="Target Date"
                                 tooltipContent={renderFormattedDate(issue.target_date)}
                               >
-                                <div className="h-full flex truncate items-center gap-1.5 rounded text-xs px-2 py-0.5 bg-custom-background-80 group-hover:bg-custom-background-100 cursor-pointer">
+                                <div className="flex h-full cursor-pointer items-center gap-1.5 truncate rounded-sm bg-layer-1 px-2 py-0.5 text-11 group-hover:bg-surface-1">
                                   <CalendarCheck className="h-3 w-3 flex-shrink-0" />
-                                  <span className="text-xs truncate">
+                                  <span className="truncate text-11">
                                     {renderFormattedDateWithoutYear(issue.target_date)}
                                   </span>
                                 </div>
@@ -243,13 +244,13 @@ export const ActiveCycleStats = observer(function ActiveCycleStats(props: Active
                       <div
                         ref={setIssueLoaderElement}
                         className={
-                          "h-11 relative flex items-center gap-3 bg-custom-background-80 p-3 text-sm cursor-pointer animate-pulse"
+                          "relative flex h-11 animate-pulse cursor-pointer items-center gap-3 bg-layer-1 p-3 text-13"
                         }
                       />
                     )}
                   </>
                 ) : (
-                  <div className="flex items-center justify-center h-full w-full">
+                  <div className="flex h-full w-full items-center justify-center">
                     <SimpleEmptyState
                       title={t("active_cycle.empty_state.priority_issue.title")}
                       assetPath={priorityResolvedPath}
@@ -264,7 +265,7 @@ export const ActiveCycleStats = observer(function ActiveCycleStats(props: Active
 
           <Tab.Panel
             as="div"
-            className="flex h-52 w-full flex-col gap-1 overflow-y-auto text-custom-text-200 vertical-scrollbar scrollbar-sm"
+            className="vertical-scrollbar flex scrollbar-sm h-52 w-full flex-col gap-1 overflow-y-auto text-secondary"
           >
             {cycle && !isEmpty(cycle.distribution) ? (
               cycle?.distribution?.assignees && cycle.distribution.assignees.length > 0 ? (
@@ -300,7 +301,7 @@ export const ActiveCycleStats = observer(function ActiveCycleStats(props: Active
                         key={`unassigned-${index}`}
                         title={
                           <div className="flex items-center gap-2">
-                            <div className="h-5 w-5 rounded-full border-2 border-custom-border-200 bg-custom-background-80">
+                            <div className="h-5 w-5 rounded-full border-2 border-subtle bg-layer-1">
                               <img src={userImage} height="100%" width="100%" className="rounded-full" alt="User" />
                             </div>
                             <span>{t("no_assignee")}</span>
@@ -312,7 +313,7 @@ export const ActiveCycleStats = observer(function ActiveCycleStats(props: Active
                     );
                 })
               ) : (
-                <div className="flex items-center justify-center h-full w-full">
+                <div className="flex h-full w-full items-center justify-center">
                   <SimpleEmptyState
                     title={t("active_cycle.empty_state.assignee.title")}
                     assetPath={assigneesResolvedPath}
@@ -326,7 +327,7 @@ export const ActiveCycleStats = observer(function ActiveCycleStats(props: Active
 
           <Tab.Panel
             as="div"
-            className="flex h-52 w-full flex-col gap-1 overflow-y-auto  text-custom-text-200 vertical-scrollbar scrollbar-sm"
+            className="vertical-scrollbar flex scrollbar-sm h-52 w-full flex-col gap-1 overflow-y-auto text-secondary"
           >
             {cycle && !isEmpty(cycle.distribution) ? (
               cycle?.distribution?.labels && cycle.distribution.labels.length > 0 ? (
@@ -336,12 +337,12 @@ export const ActiveCycleStats = observer(function ActiveCycleStats(props: Active
                     title={
                       <div className="flex items-center gap-2 truncate">
                         <span
-                          className="block h-3 w-3 rounded-full flex-shrink-0"
+                          className="block h-3 w-3 flex-shrink-0 rounded-full"
                           style={{
                             backgroundColor: label.color ?? "#000000",
                           }}
                         />
-                        <span className="text-xs text-ellipsis truncate">{label.label_name ?? "No labels"}</span>
+                        <span className="truncate text-11 text-ellipsis">{label.label_name ?? "No labels"}</span>
                       </div>
                     }
                     completed={label.completed_issues}
@@ -358,7 +359,7 @@ export const ActiveCycleStats = observer(function ActiveCycleStats(props: Active
                   />
                 ))
               ) : (
-                <div className="flex items-center justify-center h-full w-full">
+                <div className="flex h-full w-full items-center justify-center">
                   <SimpleEmptyState title={t("active_cycle.empty_state.label.title")} assetPath={labelsResolvedPath} />
                 </div>
               )
@@ -370,7 +371,7 @@ export const ActiveCycleStats = observer(function ActiveCycleStats(props: Active
       </Tab.Group>
     </div>
   ) : (
-    <Loader className="flex flex-col gap-4 min-h-[17rem] overflow-hidden bg-custom-background-100 col-span-1 lg:col-span-2 xl:col-span-1">
+    <Loader className="col-span-1 flex min-h-[17rem] flex-col gap-4 overflow-hidden bg-surface-1 lg:col-span-2 xl:col-span-1">
       <Loader.Item width="100%" height="17rem" />
     </Loader>
   );
diff --git a/apps/web/core/components/cycles/active-cycle/productivity.tsx b/apps/web/core/components/cycles/active-cycle/productivity.tsx
index af552d06d..c3ebdfcbe 100644
--- a/apps/web/core/components/cycles/active-cycle/productivity.tsx
+++ b/apps/web/core/components/cycles/active-cycle/productivity.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { Fragment } from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
@@ -45,12 +50,10 @@ export const ActiveCycleProductivity = observer(function ActiveCycleProductivity
   const completionChartDistributionData = chartDistributionData?.completion_chart || undefined;
 
   return cycle && completionChartDistributionData ? (
-    <div className="flex flex-col min-h-[17rem] gap-5 px-3.5 py-4 bg-custom-background-100 border border-custom-border-200 rounded-lg">
+    <div className="flex min-h-[17rem] flex-col gap-5 rounded-lg border border-subtle bg-surface-1 px-3.5 py-4">
       <div className="relative flex items-center justify-between gap-4">
         <Link href={`/${workspaceSlug}/projects/${projectId}/cycles/${cycle?.id}`}>
-          <h3 className="text-base text-custom-text-300 font-semibold">
-            {t("project_cycles.active_cycle.issue_burndown")}
-          </h3>
+          <h3 className="text-14 font-semibold text-tertiary">{t("project_cycles.active_cycle.issue_burndown")}</h3>
         </Link>
         <EstimateTypeDropdown value={estimateType} onChange={onChange} cycleId={cycle.id} projectId={projectId} />
       </div>
@@ -59,7 +62,7 @@ export const ActiveCycleProductivity = observer(function ActiveCycleProductivity
         {cycle.total_issues > 0 ? (
           <>
             <div className="h-full w-full px-2">
-              <div className="flex items-center justify-end gap-4 py-1 text-xs text-custom-text-300">
+              <div className="flex items-center justify-end gap-4 py-1 text-11 text-tertiary">
                 {estimateType === "points" ? (
                   <span>{`Pending points - ${cycle.backlog_estimate_points + cycle.unstarted_estimate_points + cycle.started_estimate_points}`}</span>
                 ) : (
@@ -67,7 +70,7 @@ export const ActiveCycleProductivity = observer(function ActiveCycleProductivity
                 )}
               </div>
 
-              <div className="relative  h-full">
+              <div className="relative h-full">
                 {completionChartDistributionData && (
                   <Fragment>
                     {estimateType === "points" ? (
@@ -90,7 +93,7 @@ export const ActiveCycleProductivity = observer(function ActiveCycleProductivity
           </>
         ) : (
           <>
-            <div className="flex items-center justify-center h-full w-full">
+            <div className="flex h-full w-full items-center justify-center">
               <SimpleEmptyState title={t("active_cycle.empty_state.chart.title")} assetPath={resolvedPath} />
             </div>
           </>
@@ -98,7 +101,7 @@ export const ActiveCycleProductivity = observer(function ActiveCycleProductivity
       </Link>
     </div>
   ) : (
-    <Loader className="flex flex-col min-h-[17rem] gap-5 bg-custom-background-100 border border-custom-border-200 rounded-lg">
+    <Loader className="flex min-h-[17rem] flex-col gap-5 rounded-lg border border-subtle bg-surface-1">
       <Loader.Item width="100%" height="100%" />
     </Loader>
   );
diff --git a/apps/web/core/components/cycles/active-cycle/progress.tsx b/apps/web/core/components/cycles/active-cycle/progress.tsx
index 226a4b2ab..4688e9dc5 100644
--- a/apps/web/core/components/cycles/active-cycle/progress.tsx
+++ b/apps/web/core/components/cycles/active-cycle/progress.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import { useTheme } from "next-themes";
 // plane imports
@@ -44,12 +49,12 @@ export const ActiveCycleProgress = observer(function ActiveCycleProgress(props:
   const resolvedPath = resolvedTheme === "light" ? lightProgressAsset : darkProgressAsset;
 
   return cycle && cycle.hasOwnProperty("started_issues") ? (
-    <div className="flex flex-col min-h-[17rem] gap-5 py-4 px-3.5 bg-custom-background-100 border border-custom-border-200 rounded-lg">
+    <div className="flex min-h-[17rem] flex-col gap-5 rounded-lg border border-subtle bg-surface-1 px-3.5 py-4">
       <div className="flex flex-col gap-3">
         <div className="flex items-center justify-between gap-4">
-          <h3 className="text-base text-custom-text-300 font-semibold">{t("project_cycles.active_cycle.progress")}</h3>
+          <h3 className="text-14 font-semibold text-tertiary">{t("project_cycles.active_cycle.progress")}</h3>
           {cycle.total_issues > 0 && (
-            <span className="flex gap-1 text-sm text-custom-text-400 font-medium whitespace-nowrap rounded-sm px-3 py-1 ">
+            <span className="flex gap-1 rounded-xs px-3 py-1 text-13 font-medium whitespace-nowrap text-placeholder">
               {`${cycle.completed_issues + cycle.cancelled_issues}/${cycle.total_issues - cycle.cancelled_issues} ${
                 cycle.completed_issues + cycle.cancelled_issues > 1 ? "Work items" : "Work item"
               } closed`}
@@ -66,7 +71,7 @@ export const ActiveCycleProgress = observer(function ActiveCycleProgress(props:
               {groupedIssues[group] > 0 && (
                 <div key={index}>
                   <div
-                    className="flex items-center justify-between gap-2 text-sm cursor-pointer"
+                    className="flex cursor-pointer items-center justify-between gap-2 text-13"
                     onClick={() => {
                       handleFiltersUpdate([{ property: "state_group", operator: "in", value: [group] }]);
                     }}
@@ -78,9 +83,9 @@ export const ActiveCycleProgress = observer(function ActiveCycleProgress(props:
                           backgroundColor: PROGRESS_STATE_GROUPS_DETAILS[index].color,
                         }}
                       />
-                      <span className="text-custom-text-300 capitalize font-medium w-16">{group}</span>
+                      <span className="w-16 font-medium text-tertiary capitalize">{group}</span>
                     </div>
-                    <span className="text-custom-text-300">{`${groupedIssues[group]} ${
+                    <span className="text-tertiary">{`${groupedIssues[group]} ${
                       groupedIssues[group] > 1 ? "Work items" : "Work item"
                     }`}</span>
                   </div>
@@ -89,7 +94,7 @@ export const ActiveCycleProgress = observer(function ActiveCycleProgress(props:
             </>
           ))}
           {cycle.cancelled_issues > 0 && (
-            <span className="flex items-center gap-2 text-sm text-custom-text-300">
+            <span className="flex items-center gap-2 text-13 text-tertiary">
               <span>
                 {`${cycle.cancelled_issues} cancelled ${
                   cycle.cancelled_issues > 1 ? "work items are" : "work item is"
@@ -99,13 +104,13 @@ export const ActiveCycleProgress = observer(function ActiveCycleProgress(props:
           )}
         </div>
       ) : (
-        <div className="flex items-center justify-center h-full w-full">
+        <div className="flex h-full w-full items-center justify-center">
           <SimpleEmptyState title={t("active_cycle.empty_state.progress.title")} assetPath={resolvedPath} />
         </div>
       )}
     </div>
   ) : (
-    <Loader className="flex flex-col min-h-[17rem] gap-5 bg-custom-background-100 border border-custom-border-200 rounded-lg">
+    <Loader className="flex min-h-[17rem] flex-col gap-5 rounded-lg border border-subtle bg-surface-1">
       <Loader.Item width="100%" height="100%" />
     </Loader>
   );
diff --git a/apps/web/core/components/cycles/active-cycle/use-cycles-details.ts b/apps/web/core/components/cycles/active-cycle/use-cycles-details.ts
index 7f9154320..d404520c5 100644
--- a/apps/web/core/components/cycles/active-cycle/use-cycles-details.ts
+++ b/apps/web/core/components/cycles/active-cycle/use-cycles-details.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useCallback } from "react";
 import { useRouter } from "next/navigation";
 import useSWR from "swr";
diff --git a/apps/web/core/components/cycles/analytics-sidebar/index.ts b/apps/web/core/components/cycles/analytics-sidebar/index.ts
index 1efe34c51..d98033459 100644
--- a/apps/web/core/components/cycles/analytics-sidebar/index.ts
+++ b/apps/web/core/components/cycles/analytics-sidebar/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./root";
diff --git a/apps/web/core/components/cycles/analytics-sidebar/issue-progress.tsx b/apps/web/core/components/cycles/analytics-sidebar/issue-progress.tsx
index 119979e03..738856d20 100644
--- a/apps/web/core/components/cycles/analytics-sidebar/issue-progress.tsx
+++ b/apps/web/core/components/cycles/analytics-sidebar/issue-progress.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useMemo } from "react";
 import { isEmpty } from "lodash-es";
 import { observer } from "mobx-react";
@@ -98,17 +103,15 @@ export const CycleAnalyticsProgress = observer(function CycleAnalyticsProgress(p
 
   if (!cycleDetails) return <></>;
   return (
-    <div className="border-t border-custom-border-200 space-y-4 py-5">
+    <div className="space-y-4 border-t border-subtle py-5">
       <Disclosure defaultOpen>
         {({ open }) => (
           <div className="flex flex-col">
             {/* progress bar header */}
             {isCycleDateValid ? (
-              <div className="relative w-full flex justify-between items-center gap-2">
-                <Disclosure.Button className="relative flex items-center gap-2 w-full">
-                  <div className="font-medium text-custom-text-200 text-sm">
-                    {t("project_cycles.active_cycle.progress")}
-                  </div>
+              <div className="relative flex w-full items-center justify-between gap-2">
+                <Disclosure.Button className="relative flex w-full items-center gap-2">
+                  <div className="text-13 font-medium text-secondary">{t("project_cycles.active_cycle.progress")}</div>
                 </Disclosure.Button>
                 <Disclosure.Button className="ml-auto">
                   {open ? (
@@ -119,14 +122,12 @@ export const CycleAnalyticsProgress = observer(function CycleAnalyticsProgress(p
                 </Disclosure.Button>
               </div>
             ) : (
-              <div className="relative w-full flex justify-between items-center gap-2">
-                <div className="font-medium text-custom-text-200 text-sm">
-                  {t("project_cycles.active_cycle.progress")}
-                </div>
+              <div className="relative flex w-full items-center justify-between gap-2">
+                <div className="text-13 font-medium text-secondary">{t("project_cycles.active_cycle.progress")}</div>
               </div>
             )}
             <Transition show={open}>
-              <Disclosure.Panel className="flex flex-col divide-y divide-custom-border-200">
+              <Disclosure.Panel className="flex flex-col divide-y divide-subtle-1">
                 {cycleStartDate && cycleEndDate ? (
                   <>
                     {isCycleDateValid && (
@@ -160,7 +161,7 @@ export const CycleAnalyticsProgress = observer(function CycleAnalyticsProgress(p
                     )}
                   </>
                 ) : (
-                  <div className="my-2 py-2 text-sm text-custom-text-350  bg-custom-background-90 rounded-md px-2 w-full">
+                  <div className="my-2 w-full rounded-md bg-surface-2 px-2 py-2 text-13 text-tertiary">
                     {t("no_data_yet")}
                   </div>
                 )}
diff --git a/apps/web/core/components/cycles/analytics-sidebar/progress-stats.tsx b/apps/web/core/components/cycles/analytics-sidebar/progress-stats.tsx
index 722d30e2c..856bebbd5 100644
--- a/apps/web/core/components/cycles/analytics-sidebar/progress-stats.tsx
+++ b/apps/web/core/components/cycles/analytics-sidebar/progress-stats.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import { Tab } from "@headlessui/react";
 // plane imports
@@ -122,18 +127,18 @@ export const CycleProgressStats = observer(function CycleProgressStats(props: TC
           className={cn(
             `flex w-full items-center justify-between gap-2 rounded-md p-1`,
             roundedTab ? `rounded-3xl` : `rounded-md`,
-            noBackground ? `` : `bg-custom-background-90`,
-            size === "xs" ? `text-xs` : `text-sm`
+            noBackground ? `` : `bg-layer-2`,
+            size === "xs" ? `text-11` : `text-13`
           )}
         >
           {PROGRESS_STATS.map((stat) => (
             <Tab
               className={cn(
-                `p-1 w-full text-custom-text-100 outline-none focus:outline-none cursor-pointer transition-all`,
-                roundedTab ? `rounded-3xl border border-custom-border-200` : `rounded`,
+                `w-full cursor-pointer p-1 text-primary transition-all outline-none focus:outline-none`,
+                roundedTab ? `rounded-3xl border border-subtle` : `rounded-sm`,
                 stat.key === currentTab
-                  ? "bg-custom-background-100 text-custom-text-300"
-                  : "text-custom-text-400 hover:text-custom-text-300"
+                  ? "bg-layer-transparent-active text-secondary"
+                  : "text-placeholder hover:text-secondary"
               )}
               key={stat.key}
               onClick={() => setCycleTab(stat.key)}
@@ -142,7 +147,7 @@ export const CycleProgressStats = observer(function CycleProgressStats(props: TC
             </Tab>
           ))}
         </Tab.List>
-        <Tab.Panels className="py-3 text-custom-text-200">
+        <Tab.Panels className="py-3 text-secondary">
           <Tab.Panel key={"stat-states"}>
             <StateGroupStatComponent
               distribution={distributionStateData}
diff --git a/apps/web/core/components/cycles/analytics-sidebar/root.tsx b/apps/web/core/components/cycles/analytics-sidebar/root.tsx
index af1fd07a1..7c84e4dae 100644
--- a/apps/web/core/components/cycles/analytics-sidebar/root.tsx
+++ b/apps/web/core/components/cycles/analytics-sidebar/root.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 import { observer } from "mobx-react";
 // plane imports
@@ -43,7 +49,7 @@ export const CycleDetailsSidebar = observer(function CycleDetailsSidebar(props:
 
   return (
     <div className="relative pb-2">
-      <div className="flex flex-col gap-5 w-full">
+      <div className="flex w-full flex-col gap-5">
         <CycleSidebarHeader
           workspaceSlug={workspaceSlug}
           projectId={projectId}
diff --git a/apps/web/core/components/cycles/analytics-sidebar/sidebar-details.tsx b/apps/web/core/components/cycles/analytics-sidebar/sidebar-details.tsx
index 99b6179e8..9c8ba8ac2 100644
--- a/apps/web/core/components/cycles/analytics-sidebar/sidebar-details.tsx
+++ b/apps/web/core/components/cycles/analytics-sidebar/sidebar-details.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 import { isEmpty } from "lodash-es";
 import { observer } from "mobx-react";
@@ -61,35 +66,35 @@ export const CycleSidebarDetails = observer(function CycleSidebarDetails(props:
         ? `0 ${t("common.work_item")}`
         : `${cycleDetails?.completed_estimate_points}/${cycleDetails?.total_estimate_points}`;
   return (
-    <div className="flex flex-col gap-5 w-full">
+    <div className="flex w-full flex-col gap-5">
       {cycleDetails?.description && (
         <TextArea
-          className="outline-none ring-none w-full max-h-max bg-transparent !p-0 !m-0 !border-0 resize-none text-sm leading-5 text-custom-text-200"
+          className="ring-none !m-0 max-h-max w-full resize-none !border-0 bg-transparent !p-0 text-13 leading-5 text-secondary outline-none"
           value={cycleDetails.description}
           disabled
         />
       )}
 
-      <div className="flex flex-col gap-5 pb-6 pt-2.5">
+      <div className="flex flex-col gap-5 pt-2.5 pb-6">
         <div className="flex items-center justify-start gap-1">
-          <div className="flex w-2/5 items-center justify-start gap-2 text-custom-text-300">
+          <div className="flex w-2/5 items-center justify-start gap-2 text-tertiary">
             <SquareUser className="h-4 w-4" />
-            <span className="text-base">{t("lead")}</span>
+            <span className="text-14">{t("lead")}</span>
           </div>
-          <div className="flex w-3/5 items-center rounded-sm">
+          <div className="flex w-3/5 items-center rounded-xs">
             <div className="flex items-center gap-2.5">
               <Avatar name={cycleOwnerDetails?.display_name} src={getFileURL(cycleOwnerDetails?.avatar_url ?? "")} />
-              <span className="text-sm text-custom-text-200">{cycleOwnerDetails?.display_name}</span>
+              <span className="text-13 text-secondary">{cycleOwnerDetails?.display_name}</span>
             </div>
           </div>
         </div>
 
         <div className="flex items-center justify-start gap-1">
-          <div className="flex w-2/5 items-center justify-start gap-2 text-custom-text-300">
+          <div className="flex w-2/5 items-center justify-start gap-2 text-tertiary">
             <MembersPropertyIcon className="h-4 w-4" />
-            <span className="text-base">{t("members")}</span>
+            <span className="text-14">{t("members")}</span>
           </div>
-          <div className="flex w-3/5 items-center rounded-sm">
+          <div className="flex w-3/5 items-center rounded-xs">
             <div className="flex items-center gap-2.5">
               {cycleDetails?.assignee_ids && cycleDetails.assignee_ids.length > 0 ? (
                 <>
@@ -108,19 +113,19 @@ export const CycleSidebarDetails = observer(function CycleSidebarDetails(props:
                   </AvatarGroup>
                 </>
               ) : (
-                <span className="px-1.5 text-sm text-custom-text-300">{t("no_assignee")}</span>
+                <span className="px-1.5 text-13 text-tertiary">{t("no_assignee")}</span>
               )}
             </div>
           </div>
         </div>
 
         <div className="flex items-center justify-start gap-1">
-          <div className="flex w-2/5 items-center justify-start gap-2 text-custom-text-300">
+          <div className="flex w-2/5 items-center justify-start gap-2 text-tertiary">
             <WorkItemsIcon className="h-4 w-4" />
-            <span className="text-base">{t("work_items")}</span>
+            <span className="text-14">{t("work_items")}</span>
           </div>
           <div className="flex w-3/5 items-center">
-            <span className="px-1.5 text-sm text-custom-text-300">{issueCount}</span>
+            <span className="px-1.5 text-13 text-tertiary">{issueCount}</span>
           </div>
         </div>
 
@@ -129,12 +134,12 @@ export const CycleSidebarDetails = observer(function CycleSidebarDetails(props:
          */}
         {isEstimatePointValid && !isCompleted && (
           <div className="flex items-center justify-start gap-1">
-            <div className="flex w-2/5 items-center justify-start gap-2 text-custom-text-300">
+            <div className="flex w-2/5 items-center justify-start gap-2 text-tertiary">
               <WorkItemsIcon className="h-4 w-4" />
-              <span className="text-base">{t("points")}</span>
+              <span className="text-14">{t("points")}</span>
             </div>
             <div className="flex w-3/5 items-center">
-              <span className="px-1.5 text-sm text-custom-text-300">{issueEstimatePointCount}</span>
+              <span className="px-1.5 text-13 text-tertiary">{issueEstimatePointCount}</span>
             </div>
           </div>
         )}
diff --git a/apps/web/core/components/cycles/analytics-sidebar/sidebar-header.tsx b/apps/web/core/components/cycles/analytics-sidebar/sidebar-header.tsx
index 8ba6a4b68..05cdb8ebb 100644
--- a/apps/web/core/components/cycles/analytics-sidebar/sidebar-header.tsx
+++ b/apps/web/core/components/cycles/analytics-sidebar/sidebar-header.tsx
@@ -1,16 +1,15 @@
-import type { FC } from "react";
-import React, { useEffect } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useEffect } from "react";
 import { observer } from "mobx-react";
 import { Controller, useForm } from "react-hook-form";
 import { ArrowRight } from "lucide-react";
 // Plane Imports
-import {
-  CYCLE_TRACKER_EVENTS,
-  CYCLE_STATUS,
-  EUserPermissions,
-  EUserPermissionsLevel,
-  CYCLE_TRACKER_ELEMENTS,
-} from "@plane/constants";
+import { CYCLE_STATUS, EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { ChevronRightIcon } from "@plane/propel/icons";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
@@ -19,7 +18,6 @@ import { getDate, renderFormattedPayloadDate } from "@plane/utils";
 // components
 import { DateRangeDropdown } from "@/components/dropdowns/date-range";
 // hooks
-import { captureElementAndEvent } from "@/helpers/event-tracker.helper";
 import { useCycle } from "@/hooks/store/use-cycle";
 import { useUserPermissions } from "@/hooks/store/user";
 import { useTimeZoneConverter } from "@/hooks/use-timezone-converter";
@@ -64,37 +62,7 @@ export const CycleSidebarHeader = observer(function CycleSidebarHeader(props: Pr
 
   const submitChanges = async (data: Partial<ICycle>) => {
     if (!workspaceSlug || !projectId || !cycleDetails.id) return;
-
-    await updateCycleDetails(workspaceSlug.toString(), projectId.toString(), cycleDetails.id.toString(), data)
-      .then(() => {
-        captureElementAndEvent({
-          element: {
-            elementName: CYCLE_TRACKER_ELEMENTS.RIGHT_SIDEBAR,
-          },
-          event: {
-            eventName: CYCLE_TRACKER_EVENTS.update,
-            state: "SUCCESS",
-            payload: {
-              id: cycleDetails.id,
-            },
-          },
-        });
-      })
-
-      .catch(() => {
-        captureElementAndEvent({
-          element: {
-            elementName: CYCLE_TRACKER_ELEMENTS.RIGHT_SIDEBAR,
-          },
-          event: {
-            eventName: CYCLE_TRACKER_EVENTS.update,
-            state: "ERROR",
-            payload: {
-              id: cycleDetails.id,
-            },
-          },
-        });
-      });
+    await updateCycleDetails(workspaceSlug.toString(), projectId.toString(), cycleDetails.id.toString(), data);
   };
 
   useEffect(() => {
@@ -108,7 +76,7 @@ export const CycleSidebarHeader = observer(function CycleSidebarHeader(props: Pr
     try {
       const res = await cycleService.cycleDateCheck(workspaceSlug, projectId, payload);
       return res.status;
-    } catch (err) {
+    } catch (_err) {
       return false;
     }
   };
@@ -153,22 +121,22 @@ export const CycleSidebarHeader = observer(function CycleSidebarHeader(props: Pr
 
   return (
     <>
-      <div className="sticky z-10 top-0 pt-2 flex items-center justify-between bg-custom-sidebar-background-100">
-        <div className="flex items-center justify-center size-5">
+      <div className="sticky top-0 z-10 flex items-center justify-between bg-surface-1 pt-2">
+        <div className="flex size-5 items-center justify-center">
           <button
-            className="flex size-4 items-center justify-center rounded-full bg-custom-border-200"
+            className="flex size-6 flex-shrink-0 items-center justify-center rounded-full bg-layer-3 hover:bg-layer-3-hover"
             onClick={() => handleClose()}
           >
-            <ChevronRightIcon className="h-3 w-3 stroke-2 text-white" />
+            <ChevronRightIcon className="size-4 stroke-2 text-secondary" />
           </button>
         </div>
       </div>
-      <div className="flex flex-col gap-2 w-full">
+      <div className="flex w-full flex-col gap-2">
         <div className="flex items-start justify-between gap-3 pt-2">
-          <h4 className="w-full break-words text-xl font-semibold text-custom-text-100">{cycleDetails.name}</h4>
+          <h4 className="w-full text-18 font-semibold break-words text-primary">{cycleDetails.name}</h4>
           {currentCycle && (
             <span
-              className="flex h-6 min-w-20 px-3 items-center justify-center rounded text-center text-xs font-medium"
+              className="flex h-6 min-w-20 items-center justify-center truncate rounded-sm px-3 text-center text-11 font-medium whitespace-nowrap"
               style={{
                 color: currentCycle.color,
                 backgroundColor: `${currentCycle.color}20`,
@@ -183,7 +151,7 @@ export const CycleSidebarHeader = observer(function CycleSidebarHeader(props: Pr
           control={control}
           name="start_date"
           render={({ field: { value: startDateValue, onChange: onChangeStartDate } }) => (
-            <div className="flex gap-2 items-center">
+            <div className="flex items-center gap-2">
               <Controller
                 control={control}
                 name="end_date"
@@ -211,7 +179,7 @@ export const CycleSidebarHeader = observer(function CycleSidebarHeader(props: Pr
                     customTooltipContent={
                       <span className="flex gap-1">
                         {renderFormattedDateInUserTimezone(cycleDetails.start_date ?? "")}
-                        <ArrowRight className="h-3 w-3 flex-shrink-0 my-auto" />
+                        <ArrowRight className="my-auto h-3 w-3 flex-shrink-0" />
                         {renderFormattedDateInUserTimezone(cycleDetails.end_date ?? "")}
                       </span>
                     }
@@ -223,7 +191,7 @@ export const CycleSidebarHeader = observer(function CycleSidebarHeader(props: Pr
                 )}
               />
               {projectUTCOffset && (
-                <span className="rounded-md text-xs px-2 cursor-default  py-1 bg-custom-background-80 text-custom-text-300">
+                <span className="cursor-default rounded-md bg-layer-1 px-2 py-1 text-11 text-tertiary">
                   {projectUTCOffset}
                 </span>
               )}
diff --git a/apps/web/core/components/cycles/applied-filters/date.tsx b/apps/web/core/components/cycles/applied-filters/date.tsx
index 055073993..798d1a60e 100644
--- a/apps/web/core/components/cycles/applied-filters/date.tsx
+++ b/apps/web/core/components/cycles/applied-filters/date.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 // helpers
 import { DATE_AFTER_FILTER_OPTIONS } from "@plane/constants";
@@ -36,12 +42,12 @@ export const AppliedDateFilters = observer(function AppliedDateFilters(props: Pr
   return (
     <>
       {values.map((date) => (
-        <div key={date} className="flex items-center gap-1 rounded bg-custom-background-80 py-1 px-1.5 text-xs">
+        <div key={date} className="flex items-center gap-1 rounded-sm bg-layer-3 px-1.5 py-1 text-11">
           <span className="normal-case">{getDateLabel(date)}</span>
           {editable && (
             <button
               type="button"
-              className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
+              className="grid place-items-center text-tertiary hover:text-secondary"
               onClick={() => handleRemove(date)}
             >
               <CloseIcon height={10} width={10} strokeWidth={2} />
diff --git a/apps/web/core/components/cycles/applied-filters/index.ts b/apps/web/core/components/cycles/applied-filters/index.ts
index 1efe34c51..d98033459 100644
--- a/apps/web/core/components/cycles/applied-filters/index.ts
+++ b/apps/web/core/components/cycles/applied-filters/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./root";
diff --git a/apps/web/core/components/cycles/applied-filters/root.tsx b/apps/web/core/components/cycles/applied-filters/root.tsx
index 98f73b67b..5f1ef0974 100644
--- a/apps/web/core/components/cycles/applied-filters/root.tsx
+++ b/apps/web/core/components/cycles/applied-filters/root.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 // plane imports
 import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
@@ -36,7 +42,7 @@ export const CycleAppliedFiltersList = observer(function CycleAppliedFiltersList
     allowPermissions([EUserPermissions.ADMIN, EUserPermissions.MEMBER], EUserPermissionsLevel.PROJECT);
 
   return (
-    <div className="flex flex-wrap items-stretch gap-2 bg-custom-background-100">
+    <div className="flex flex-wrap items-stretch gap-2 bg-surface-1">
       {Object.entries(appliedFilters).map(([key, value]) => {
         const filterKey = key as keyof TCycleFilters;
 
@@ -45,7 +51,7 @@ export const CycleAppliedFiltersList = observer(function CycleAppliedFiltersList
 
         return (
           <Tag key={filterKey}>
-            <span className="text-xs text-custom-text-300">{replaceUnderscoreIfSnakeCase(filterKey)}</span>
+            <span className="text-11 text-tertiary">{replaceUnderscoreIfSnakeCase(filterKey)}</span>
             <div className="flex flex-wrap items-center gap-1">
               {filterKey === "status" && (
                 <AppliedStatusFilters
@@ -64,7 +70,7 @@ export const CycleAppliedFiltersList = observer(function CycleAppliedFiltersList
               {isEditingAllowed && (
                 <button
                   type="button"
-                  className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
+                  className="grid place-items-center text-tertiary hover:text-secondary"
                   onClick={() => handleRemoveFilter(filterKey, null)}
                 >
                   <CloseIcon height={12} width={12} strokeWidth={2} />
diff --git a/apps/web/core/components/cycles/applied-filters/status.tsx b/apps/web/core/components/cycles/applied-filters/status.tsx
index b0df0382d..3a077748d 100644
--- a/apps/web/core/components/cycles/applied-filters/status.tsx
+++ b/apps/web/core/components/cycles/applied-filters/status.tsx
@@ -1,4 +1,11 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
+// plane imports
 import { CYCLE_STATUS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { CloseIcon } from "@plane/propel/icons";
@@ -22,7 +29,7 @@ export const AppliedStatusFilters = observer(function AppliedStatusFilters(props
           <div
             key={status}
             className={cn(
-              "flex items-center gap-1 rounded py-1 px-1.5 text-xs",
+              "flex items-center gap-1 rounded-sm px-1.5 py-1 text-11",
               statusDetails?.bgColor,
               statusDetails?.textColor
             )}
@@ -31,7 +38,7 @@ export const AppliedStatusFilters = observer(function AppliedStatusFilters(props
             {editable && (
               <button
                 type="button"
-                className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
+                className="grid place-items-center text-tertiary hover:text-secondary"
                 onClick={() => handleRemove(status)}
               >
                 <CloseIcon height={10} width={10} strokeWidth={2} />
diff --git a/apps/web/core/components/cycles/archived-cycles/header.tsx b/apps/web/core/components/cycles/archived-cycles/header.tsx
index 89bae48aa..7b9cc5699 100644
--- a/apps/web/core/components/cycles/archived-cycles/header.tsx
+++ b/apps/web/core/components/cycles/archived-cycles/header.tsx
@@ -1,11 +1,16 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useCallback, useRef, useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // icons
-import { ListFilter, Search } from "lucide-react";
+import { ListFilter } from "lucide-react";
 import { useOutsideClickDetector } from "@plane/hooks";
-import { CloseIcon } from "@plane/propel/icons";
+import { SearchIcon, CloseIcon } from "@plane/propel/icons";
 // plane helpers
 // types
 import type { TCycleFilters } from "@plane/types";
@@ -66,36 +71,36 @@ export const ArchivedCyclesHeader = observer(function ArchivedCyclesHeader() {
   const isFiltersApplied = calculateTotalFilters(currentProjectArchivedFilters ?? {}) !== 0;
 
   return (
-    <div className="group relative flex border-b border-custom-border-200">
-      <div className="flex w-full items-center overflow-x-auto px-4 gap-2 horizontal-scrollbar scrollbar-sm">
+    <div className="group relative flex border-b border-subtle">
+      <div className="horizontal-scrollbar flex scrollbar-sm w-full items-center gap-2 overflow-x-auto px-4">
         <ArchiveTabsList />
       </div>
       {/* filter options */}
-      <div className="h-full flex items-center gap-3 self-end px-8">
+      <div className="flex h-full items-center gap-3 self-end px-8">
         {!isSearchOpen && (
           <button
             type="button"
-            className="-mr-5 p-2 hover:bg-custom-background-80 rounded text-custom-text-400 grid place-items-center"
+            className="-mr-5 grid place-items-center rounded-sm p-2 text-placeholder hover:bg-layer-1"
             onClick={() => {
               setIsSearchOpen(true);
               inputRef.current?.focus();
             }}
           >
-            <Search className="h-3.5 w-3.5" />
+            <SearchIcon className="h-3.5 w-3.5" />
           </button>
         )}
         <div
           className={cn(
-            "ml-auto flex items-center justify-start gap-1 rounded-md border border-transparent bg-custom-background-100 text-custom-text-400 w-0 transition-[width] ease-linear overflow-hidden opacity-0",
+            "ml-auto flex w-0 items-center justify-start gap-1 overflow-hidden rounded-md border border-transparent bg-surface-1 text-placeholder opacity-0 transition-[width] ease-linear",
             {
-              "w-64 px-2.5 py-1.5 border-custom-border-200 opacity-100": isSearchOpen,
+              "w-64 border-subtle px-2.5 py-1.5 opacity-100": isSearchOpen,
             }
           )}
         >
-          <Search className="h-3.5 w-3.5" />
+          <SearchIcon className="h-3.5 w-3.5" />
           <input
             ref={inputRef}
-            className="w-full max-w-[234px] border-none bg-transparent text-sm text-custom-text-100 placeholder:text-custom-text-400 focus:outline-none"
+            className="w-full max-w-[234px] border-none bg-transparent text-13 text-primary placeholder:text-placeholder focus:outline-none"
             placeholder="Search"
             value={archivedCyclesSearchQuery}
             onChange={(e) => updateArchivedCyclesSearchQuery(e.target.value)}
diff --git a/apps/web/core/components/cycles/archived-cycles/index.ts b/apps/web/core/components/cycles/archived-cycles/index.ts
index 1efe34c51..d98033459 100644
--- a/apps/web/core/components/cycles/archived-cycles/index.ts
+++ b/apps/web/core/components/cycles/archived-cycles/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./root";
diff --git a/apps/web/core/components/cycles/archived-cycles/modal.tsx b/apps/web/core/components/cycles/archived-cycles/modal.tsx
index d7ca5cd03..e29c05fed 100644
--- a/apps/web/core/components/cycles/archived-cycles/modal.tsx
+++ b/apps/web/core/components/cycles/archived-cycles/modal.tsx
@@ -1,11 +1,15 @@
-import { useState, Fragment } from "react";
-import { Dialog, Transition } from "@headlessui/react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
 // ui
-import { CYCLE_TRACKER_EVENTS } from "@plane/constants";
 import { Button } from "@plane/propel/button";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
 // hooks
-import { captureError, captureSuccess } from "@/helpers/event-tracker.helper";
 import { useCycle } from "@/hooks/store/use-cycle";
 import { useAppRouter } from "@/hooks/use-app-router";
 
@@ -43,14 +47,9 @@ export function ArchiveCycleModal(props: Props) {
           title: "Archive success",
           message: "Your archives can be found in project archives.",
         });
-        captureSuccess({
-          eventName: CYCLE_TRACKER_EVENTS.archive,
-          payload: {
-            id: cycleId,
-          },
-        });
         onClose();
         router.push(`/${workspaceSlug}/projects/${projectId}/cycles`);
+        return;
       })
       .catch(() => {
         setToast({
@@ -58,62 +57,26 @@ export function ArchiveCycleModal(props: Props) {
           title: "Error!",
           message: "Cycle could not be archived. Please try again.",
         });
-        captureError({
-          eventName: CYCLE_TRACKER_EVENTS.archive,
-          payload: {
-            id: cycleId,
-          },
-        });
       })
       .finally(() => setIsArchiving(false));
   };
 
   return (
-    <Transition.Root show={isOpen} as={Fragment}>
-      <Dialog as="div" className="relative z-20" onClose={onClose}>
-        <Transition.Child
-          as={Fragment}
-          enter="ease-out duration-300"
-          enterFrom="opacity-0"
-          enterTo="opacity-100"
-          leave="ease-in duration-200"
-          leaveFrom="opacity-100"
-          leaveTo="opacity-0"
-        >
-          <div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
-        </Transition.Child>
-
-        <div className="fixed inset-0 z-10 overflow-y-auto">
-          <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
-            <Transition.Child
-              as={Fragment}
-              enter="ease-out duration-300"
-              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-              enterTo="opacity-100 translate-y-0 sm:scale-100"
-              leave="ease-in duration-200"
-              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-            >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-custom-background-100 text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-full sm:max-w-lg">
-                <div className="px-5 py-4">
-                  <h3 className="text-xl font-medium 2xl:text-2xl">Archive cycle {cycleName}</h3>
-                  <p className="mt-3 text-sm text-custom-text-200">
-                    Are you sure you want to archive the cycle? All your archives can be restored later.
-                  </p>
-                  <div className="mt-3 flex justify-end gap-2">
-                    <Button variant="neutral-primary" size="sm" onClick={onClose}>
-                      Cancel
-                    </Button>
-                    <Button size="sm" tabIndex={1} onClick={handleArchiveCycle} loading={isArchiving}>
-                      {isArchiving ? "Archiving" : "Archive"}
-                    </Button>
-                  </div>
-                </div>
-              </Dialog.Panel>
-            </Transition.Child>
-          </div>
+    <ModalCore isOpen={isOpen} handleClose={onClose} position={EModalPosition.CENTER} width={EModalWidth.LG}>
+      <div className="px-5 py-4">
+        <h3 className="text-18 font-medium 2xl:text-20">Archive cycle {cycleName}</h3>
+        <p className="mt-3 text-13 text-secondary">
+          Are you sure you want to archive the cycle? All your archives can be restored later.
+        </p>
+        <div className="mt-3 flex justify-end gap-2">
+          <Button variant="secondary" size="lg" onClick={onClose}>
+            Cancel
+          </Button>
+          <Button variant="primary" size="lg" tabIndex={1} onClick={handleArchiveCycle} loading={isArchiving}>
+            {isArchiving ? "Archiving" : "Archive"}
+          </Button>
         </div>
-      </Dialog>
-    </Transition.Root>
+      </div>
+    </ModalCore>
   );
 }
diff --git a/apps/web/core/components/cycles/archived-cycles/root.tsx b/apps/web/core/components/cycles/archived-cycles/root.tsx
index 5df6a512e..fdb0ad0e3 100644
--- a/apps/web/core/components/cycles/archived-cycles/root.tsx
+++ b/apps/web/core/components/cycles/archived-cycles/root.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
@@ -57,7 +63,7 @@ export const ArchivedCycleLayoutRoot = observer(function ArchivedCycleLayoutRoot
   return (
     <>
       {calculateTotalFilters(currentProjectArchivedFilters ?? {}) !== 0 && (
-        <div className="border-b border-custom-border-200 px-5 py-3">
+        <div className="border-b border-subtle px-5 py-3">
           <CycleAppliedFiltersList
             appliedFilters={currentProjectArchivedFilters ?? {}}
             handleClearAllFilters={() => clearAllFilters(projectId.toString(), "archived")}
diff --git a/apps/web/core/components/cycles/archived-cycles/view.tsx b/apps/web/core/components/cycles/archived-cycles/view.tsx
index 1ed1650b0..2153fb0c9 100644
--- a/apps/web/core/components/cycles/archived-cycles/view.tsx
+++ b/apps/web/core/components/cycles/archived-cycles/view.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 // assets
 import AllFiltersImage from "@/app/assets/empty-state/cycle/all-filters.svg?url";
@@ -28,15 +33,15 @@ export const ArchivedCyclesView = observer(function ArchivedCyclesView(props: IA
 
   if (filteredArchivedCycleIds.length === 0)
     return (
-      <div className="h-full w-full grid place-items-center">
+      <div className="grid h-full w-full place-items-center">
         <div className="text-center">
           <img
             src={archivedCyclesSearchQuery.trim() === "" ? AllFiltersImage : NameFilterImage}
-            className="h-36 sm:h-48 w-36 sm:w-48 mx-auto"
+            className="mx-auto h-36 w-36 sm:h-48 sm:w-48"
             alt="No matching cycles"
           />
-          <h5 className="text-xl font-medium mt-7 mb-1">No matching cycles</h5>
-          <p className="text-custom-text-400 text-base">
+          <h5 className="mt-7 mb-1 text-18 font-medium">No matching cycles</h5>
+          <p className="text-14 text-placeholder">
             {archivedCyclesSearchQuery.trim() === ""
               ? "Remove the filters to see all cycles"
               : "Remove the search criteria to see all cycles"}
diff --git a/apps/web/core/components/cycles/cycle-peek-overview.tsx b/apps/web/core/components/cycles/cycle-peek-overview.tsx
index 07e21acd3..1b984de67 100644
--- a/apps/web/core/components/cycles/cycle-peek-overview.tsx
+++ b/apps/web/core/components/cycles/cycle-peek-overview.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React, { useEffect } from "react";
 import { observer } from "mobx-react";
 import { usePathname, useSearchParams } from "next/navigation";
@@ -45,7 +51,7 @@ export const CyclePeekOverview = observer(function CyclePeekOverview(props: Prop
       {peekCycle && projectId && (
         <div
           ref={ref}
-          className="flex h-full w-full max-w-[21.5rem] flex-shrink-0 flex-col gap-3.5 overflow-y-auto border-l border-custom-border-100 bg-custom-sidebar-background-100 px-4 duration-300 fixed md:relative right-0 z-[9]"
+          className="fixed right-0 z-[9] flex h-full w-full max-w-[21.5rem] flex-shrink-0 flex-col gap-3.5 overflow-y-auto border-l border-subtle bg-surface-1 px-4 duration-300 md:relative"
           style={{
             boxShadow:
               "0px 1px 4px 0px rgba(0, 0, 0, 0.06), 0px 2px 4px 0px rgba(16, 24, 40, 0.06), 0px 1px 8px -1px rgba(16, 24, 40, 0.06)",
diff --git a/apps/web/core/components/cycles/cycles-view-header.tsx b/apps/web/core/components/cycles/cycles-view-header.tsx
index 8b7f0a7bd..8c3cd0a0c 100644
--- a/apps/web/core/components/cycles/cycles-view-header.tsx
+++ b/apps/web/core/components/cycles/cycles-view-header.tsx
@@ -1,12 +1,17 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useCallback, useEffect, useRef, useState } from "react";
 import { observer } from "mobx-react";
-// icons
-import { ListFilter, Search } from "lucide-react";
-// plane helpers
+import { ListFilter } from "lucide-react";
+// plane imports
 import { useOutsideClickDetector } from "@plane/hooks";
-// types
+import { IconButton } from "@plane/propel/icon-button";
 import { useTranslation } from "@plane/i18n";
-import { CloseIcon } from "@plane/propel/icons";
+import { SearchIcon, CloseIcon } from "@plane/propel/icons";
 import type { TCycleFilters } from "@plane/types";
 import { cn, calculateTotalFilters } from "@plane/utils";
 // components
@@ -71,49 +76,50 @@ export const CyclesViewHeader = observer(function CyclesViewHeader(props: Props)
   }, [searchQuery]);
 
   return (
-    <div className="flex items-center gap-3">
-      {!isSearchOpen && (
-        <button
-          type="button"
-          className="-mr-5 p-2 hover:bg-custom-background-80 rounded text-custom-text-400 grid place-items-center"
+    <div className="flex items-center gap-2">
+      {!isSearchOpen ? (
+        <IconButton
+          variant="ghost"
+          size="lg"
           onClick={() => {
             setIsSearchOpen(true);
             inputRef.current?.focus();
           }}
-        >
-          <Search className="h-3.5 w-3.5" />
-        </button>
-      )}
-      <div
-        className={cn(
-          "ml-auto flex items-center justify-start gap-1 rounded-md border border-transparent bg-custom-background-100 text-custom-text-400 w-0 transition-[width] ease-linear overflow-hidden opacity-0",
-          {
-            "w-64 px-2.5 py-1.5 border-custom-border-200 opacity-100": isSearchOpen,
-          }
-        )}
-      >
-        <Search className="h-3.5 w-3.5" />
-        <input
-          ref={inputRef}
-          className="w-full max-w-[234px] border-none bg-transparent text-sm text-custom-text-100 placeholder:text-custom-text-400 focus:outline-none"
-          placeholder="Search"
-          value={searchQuery}
-          onChange={(e) => updateSearchQuery(e.target.value)}
-          onKeyDown={handleInputKeyDown}
+          icon={SearchIcon}
         />
-        {isSearchOpen && (
-          <button
-            type="button"
-            className="grid place-items-center"
-            onClick={() => {
-              updateSearchQuery("");
-              setIsSearchOpen(false);
-            }}
-          >
-            <CloseIcon className="h-3 w-3" />
-          </button>
-        )}
-      </div>
+      ) : (
+        <div
+          className={cn(
+            "ml-auto flex w-0 items-center justify-start gap-1 overflow-hidden rounded-md border border-transparent bg-surface-1 text-placeholder opacity-0 transition-[width] ease-linear",
+            {
+              "w-64 border-subtle px-2.5 py-1.5 opacity-100": isSearchOpen,
+            }
+          )}
+        >
+          <SearchIcon className="h-3.5 w-3.5" />
+          <input
+            ref={inputRef}
+            className="w-full max-w-[234px] border-none bg-transparent text-13 text-primary placeholder:text-placeholder focus:outline-none"
+            placeholder="Search"
+            value={searchQuery}
+            onChange={(e) => updateSearchQuery(e.target.value)}
+            onKeyDown={handleInputKeyDown}
+          />
+          {isSearchOpen && (
+            <button
+              type="button"
+              className="grid place-items-center"
+              onClick={() => {
+                updateSearchQuery("");
+                setIsSearchOpen(false);
+              }}
+            >
+              <CloseIcon className="h-3 w-3" />
+            </button>
+          )}
+        </div>
+      )}
+
       <FiltersDropdown
         icon={<ListFilter className="h-3 w-3" />}
         title={t("common.filters")}
diff --git a/apps/web/core/components/cycles/cycles-view.tsx b/apps/web/core/components/cycles/cycles-view.tsx
index e957df68f..d0762125f 100644
--- a/apps/web/core/components/cycles/cycles-view.tsx
+++ b/apps/web/core/components/cycles/cycles-view.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 // components
 import { useTranslation } from "@plane/i18n";
@@ -38,11 +43,11 @@ export const CyclesView = observer(function CyclesView(props: ICyclesView) {
         <div className="text-center">
           <img
             src={searchQuery.trim() === "" ? AllFiltersImage : NameFilterImage}
-            className="mx-auto h-36 w-36 sm:h-48 sm:w-48 object-contain"
+            className="mx-auto h-36 w-36 object-contain sm:h-48 sm:w-48"
             alt="No matching cycles"
           />
-          <h5 className="mb-1 mt-7 text-xl font-medium">{t("project_cycles.no_matching_cycles")}</h5>
-          <p className="text-base text-custom-text-400">
+          <h5 className="mt-7 mb-1 text-18 font-medium">{t("project_cycles.no_matching_cycles")}</h5>
+          <p className="text-14 text-placeholder">
             {searchQuery.trim() === ""
               ? t("project_cycles.remove_filters_to_see_all_cycles")
               : t("project_cycles.remove_search_criteria_to_see_all_cycles")}
diff --git a/apps/web/core/components/cycles/delete-modal.tsx b/apps/web/core/components/cycles/delete-modal.tsx
index c9bb1a85f..04f99b27b 100644
--- a/apps/web/core/components/cycles/delete-modal.tsx
+++ b/apps/web/core/components/cycles/delete-modal.tsx
@@ -1,15 +1,19 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useState } from "react";
 import { observer } from "mobx-react";
 import { useParams, useSearchParams } from "next/navigation";
 // types
-import { PROJECT_ERROR_MESSAGES, CYCLE_TRACKER_EVENTS } from "@plane/constants";
+import { PROJECT_ERROR_MESSAGES } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { ICycle } from "@plane/types";
 // ui
 import { AlertModalCore } from "@plane/ui";
-// helpers
-import { captureError, captureSuccess } from "@/helpers/event-tracker.helper";
 // hooks
 import { useCycle } from "@/hooks/store/use-cycle";
 import { useAppRouter } from "@/hooks/use-app-router";
@@ -48,12 +52,6 @@ export const CycleDeleteModal = observer(function CycleDeleteModal(props: ICycle
             title: "Success!",
             message: "Cycle deleted successfully.",
           });
-          captureSuccess({
-            eventName: CYCLE_TRACKER_EVENTS.delete,
-            payload: {
-              id: cycle.id,
-            },
-          });
         })
         .catch((errors) => {
           const isPermissionError = errors?.error === "You don't have the required permissions.";
@@ -65,13 +63,6 @@ export const CycleDeleteModal = observer(function CycleDeleteModal(props: ICycle
             type: TOAST_TYPE.ERROR,
             message: currentError.i18n_message && t(currentError.i18n_message),
           });
-          captureError({
-            eventName: CYCLE_TRACKER_EVENTS.delete,
-            payload: {
-              id: cycle.id,
-            },
-            error: errors,
-          });
         })
         .finally(() => handleClose());
     } catch {
@@ -95,7 +86,7 @@ export const CycleDeleteModal = observer(function CycleDeleteModal(props: ICycle
       content={
         <>
           Are you sure you want to delete cycle{' "'}
-          <span className="break-words font-medium text-custom-text-100">{cycle?.name}</span>
+          <span className="font-medium break-words text-primary">{cycle?.name}</span>
           {'"'}? All of the data related to the cycle will be permanently removed. This action cannot be undone.
         </>
       }
diff --git a/apps/web/core/components/cycles/dropdowns/estimate-type-dropdown.tsx b/apps/web/core/components/cycles/dropdowns/estimate-type-dropdown.tsx
index c5b596db7..510457097 100644
--- a/apps/web/core/components/cycles/dropdowns/estimate-type-dropdown.tsx
+++ b/apps/web/core/components/cycles/dropdowns/estimate-type-dropdown.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 import { observer } from "mobx-react";
 import type { TCycleEstimateType } from "@plane/types";
@@ -29,7 +35,7 @@ export const EstimateTypeDropdown = observer(function EstimateTypeDropdown(props
         label={<span>{cycleEstimateOptions.find((v) => v.value === value)?.label ?? "None"}</span>}
         onChange={onChange}
         maxHeight="lg"
-        buttonClassName="bg-custom-background-90 border-none rounded text-sm font-medium "
+        buttonClassName="bg-surface-2 border-none rounded-sm text-13 font-medium "
       >
         {cycleEstimateOptions.map((item) => (
           <CustomSelect.Option key={item.value} value={item.value}>
diff --git a/apps/web/core/components/cycles/dropdowns/filters/end-date.tsx b/apps/web/core/components/cycles/dropdowns/filters/end-date.tsx
index 2f9457404..b405b7864 100644
--- a/apps/web/core/components/cycles/dropdowns/filters/end-date.tsx
+++ b/apps/web/core/components/cycles/dropdowns/filters/end-date.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React, { useState } from "react";
 import { observer } from "mobx-react";
 // plane imports
@@ -67,7 +73,7 @@ export const FilterEndDate = observer(function FilterEndDate(props: Props) {
               <FilterOption isChecked={isCustomDateSelected()} onClick={handleCustomDate} title="Custom" multiple />
             </>
           ) : (
-            <p className="text-xs italic text-custom-text-400">No matches found</p>
+            <p className="text-11 text-placeholder italic">No matches found</p>
           )}
         </div>
       )}
diff --git a/apps/web/core/components/cycles/dropdowns/filters/index.ts b/apps/web/core/components/cycles/dropdowns/filters/index.ts
index 3d097b6f0..95c8d66c9 100644
--- a/apps/web/core/components/cycles/dropdowns/filters/index.ts
+++ b/apps/web/core/components/cycles/dropdowns/filters/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./end-date";
 export * from "./root";
 export * from "./start-date";
diff --git a/apps/web/core/components/cycles/dropdowns/filters/root.tsx b/apps/web/core/components/cycles/dropdowns/filters/root.tsx
index c87992235..3f1aa8cdc 100644
--- a/apps/web/core/components/cycles/dropdowns/filters/root.tsx
+++ b/apps/web/core/components/cycles/dropdowns/filters/root.tsx
@@ -1,7 +1,12 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useState } from "react";
 import { observer } from "mobx-react";
-import { Search } from "lucide-react";
-import { CloseIcon } from "@plane/propel/icons";
+import { SearchIcon, CloseIcon } from "@plane/propel/icons";
 // plane imports
 import type { TCycleFilters, TCycleGroups } from "@plane/types";
 // hooks
@@ -26,12 +31,12 @@ export const CycleFiltersSelection = observer(function CycleFiltersSelection(pro
 
   return (
     <div className="flex h-full w-full flex-col overflow-hidden">
-      <div className="bg-custom-background-100 p-2.5 pb-0">
-        <div className="flex items-center gap-1.5 rounded border-[0.5px] border-custom-border-200 bg-custom-background-90 px-1.5 py-1 text-xs">
-          <Search className="text-custom-text-400" size={12} strokeWidth={2} />
+      <div className="bg-surface-1 p-2.5 pb-0">
+        <div className="flex items-center gap-1.5 rounded-sm border-[0.5px] border-subtle bg-surface-2 px-1.5 py-1 text-11">
+          <SearchIcon className="text-placeholder" width={12} height={12} strokeWidth={2} />
           <input
             type="text"
-            className="w-full bg-custom-background-90 outline-none placeholder:text-custom-text-400"
+            className="w-full bg-surface-2 outline-none placeholder:text-placeholder"
             placeholder="Search"
             value={filtersSearchQuery}
             onChange={(e) => setFiltersSearchQuery(e.target.value)}
@@ -39,12 +44,12 @@ export const CycleFiltersSelection = observer(function CycleFiltersSelection(pro
           />
           {filtersSearchQuery !== "" && (
             <button type="button" className="grid place-items-center" onClick={() => setFiltersSearchQuery("")}>
-              <CloseIcon className="text-custom-text-300" height={12} width={12} strokeWidth={2} />
+              <CloseIcon className="text-tertiary" height={12} width={12} strokeWidth={2} />
             </button>
           )}
         </div>
       </div>
-      <div className="h-full w-full divide-y divide-custom-border-200 overflow-y-auto px-2.5 vertical-scrollbar scrollbar-sm">
+      <div className="vertical-scrollbar scrollbar-sm h-full w-full divide-y divide-subtle-1 overflow-y-auto px-2.5">
         {/* cycle status */}
         {!isArchived && (
           <div className="py-2">
diff --git a/apps/web/core/components/cycles/dropdowns/filters/start-date.tsx b/apps/web/core/components/cycles/dropdowns/filters/start-date.tsx
index dd420c138..911feb7ab 100644
--- a/apps/web/core/components/cycles/dropdowns/filters/start-date.tsx
+++ b/apps/web/core/components/cycles/dropdowns/filters/start-date.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React, { useState } from "react";
 import { observer } from "mobx-react";
 // constants
@@ -68,7 +74,7 @@ export const FilterStartDate = observer(function FilterStartDate(props: Props) {
               <FilterOption isChecked={isCustomDateSelected()} onClick={handleCustomDate} title="Custom" multiple />
             </>
           ) : (
-            <p className="text-xs italic text-custom-text-400">No matches found</p>
+            <p className="text-11 text-placeholder italic">No matches found</p>
           )}
         </div>
       )}
diff --git a/apps/web/core/components/cycles/dropdowns/filters/status.tsx b/apps/web/core/components/cycles/dropdowns/filters/status.tsx
index bb30bafbd..4de895c0a 100644
--- a/apps/web/core/components/cycles/dropdowns/filters/status.tsx
+++ b/apps/web/core/components/cycles/dropdowns/filters/status.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React, { useState } from "react";
 import { observer } from "mobx-react";
 import { CYCLE_STATUS } from "@plane/constants";
@@ -42,7 +48,7 @@ export const FilterStatus = observer(function FilterStatus(props: Props) {
               />
             ))
           ) : (
-            <p className="text-xs italic text-custom-text-400">No matches found</p>
+            <p className="text-11 text-placeholder italic">No matches found</p>
           )}
         </div>
       )}
diff --git a/apps/web/core/components/cycles/dropdowns/index.ts b/apps/web/core/components/cycles/dropdowns/index.ts
index 2d1f11554..9c20b30b1 100644
--- a/apps/web/core/components/cycles/dropdowns/index.ts
+++ b/apps/web/core/components/cycles/dropdowns/index.ts
@@ -1,2 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./filters";
 export * from "./estimate-type-dropdown";
diff --git a/apps/web/core/components/cycles/form.tsx b/apps/web/core/components/cycles/form.tsx
index 23097393c..3d26c0b36 100644
--- a/apps/web/core/components/cycles/form.tsx
+++ b/apps/web/core/components/cycles/form.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useEffect } from "react";
 import { Controller, useForm } from "react-hook-form";
 // plane imports
@@ -90,7 +96,7 @@ export function CycleForm(props: Props) {
               )}
             />
           )}
-          <h3 className="text-xl font-medium text-custom-text-200">
+          <h3 className="text-18 font-medium text-secondary">
             {status ? t("project_cycles.update_cycle") : t("project_cycles.create_cycle")}
           </h3>
         </div>
@@ -111,7 +117,7 @@ export function CycleForm(props: Props) {
                   name="name"
                   type="text"
                   placeholder={t("title")}
-                  className="w-full text-base"
+                  className="w-full text-14"
                   value={value}
                   inputSize="md"
                   onChange={onChange}
@@ -121,7 +127,7 @@ export function CycleForm(props: Props) {
                 />
               )}
             />
-            <span className="text-xs text-red-500">{errors?.name?.message}</span>
+            <span className="text-11 text-danger-primary">{errors?.name?.message}</span>
           </div>
           <div>
             <Controller
@@ -131,7 +137,7 @@ export function CycleForm(props: Props) {
                 <TextArea
                   name="description"
                   placeholder={t("description")}
-                  className="w-full text-base resize-none min-h-24"
+                  className="min-h-24 w-full resize-none text-14"
                   hasError={Boolean(errors?.description)}
                   value={value}
                   onChange={onChange}
@@ -177,11 +183,11 @@ export function CycleForm(props: Props) {
           </div>
         </div>
       </div>
-      <div className="px-5 py-4 flex items-center justify-end gap-2 border-t-[0.5px] border-custom-border-200">
-        <Button variant="neutral-primary" size="sm" onClick={handleClose} tabIndex={getIndex("cancel")}>
+      <div className="flex items-center justify-end gap-2 border-t-[0.5px] border-subtle px-5 py-4">
+        <Button variant="secondary" size="lg" onClick={handleClose} tabIndex={getIndex("cancel")}>
           {t("common.cancel")}
         </Button>
-        <Button variant="primary" size="sm" type="submit" loading={isSubmitting} tabIndex={getIndex("submit")}>
+        <Button variant="primary" size="lg" type="submit" loading={isSubmitting} tabIndex={getIndex("submit")}>
           {data
             ? isSubmitting
               ? t("common.updating")
diff --git a/apps/web/core/components/cycles/list/cycle-list-group-header.tsx b/apps/web/core/components/cycles/list/cycle-list-group-header.tsx
index e292582f7..9b3578639 100644
--- a/apps/web/core/components/cycles/list/cycle-list-group-header.tsx
+++ b/apps/web/core/components/cycles/list/cycle-list-group-header.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 // types
 import { CycleGroupIcon, ChevronDownIcon } from "@plane/propel/icons";
@@ -20,18 +25,18 @@ export function CycleListGroupHeader(props: Props) {
   const { type, title, count, showCount = false, isExpanded = false } = props;
   return (
     <Row className="flex items-center justify-between py-2.5">
-      <div className="flex items-center gap-5 flex-shrink-0">
-        <div className="flex h-5 w-5 flex-shrink-0 items-center justify-center overflow-hidden rounded-sm">
+      <div className="flex flex-shrink-0 items-center gap-5">
+        <div className="flex h-5 w-5 flex-shrink-0 items-center justify-center overflow-hidden rounded-xs">
           <CycleGroupIcon cycleGroup={type} className="h-5 w-5" />
         </div>
 
         <div className="relative flex w-full flex-row items-center gap-1 overflow-hidden">
-          <div className="inline-block line-clamp-1 truncate font-medium text-custom-text-100">{title}</div>
-          {showCount && <div className="pl-2 text-sm font-medium text-custom-text-300">{`${count ?? "0"}`}</div>}
+          <div className="line-clamp-1 inline-block truncate font-medium text-primary">{title}</div>
+          {showCount && <div className="pl-2 text-13 font-medium text-tertiary">{`${count ?? "0"}`}</div>}
         </div>
       </div>
       <ChevronDownIcon
-        className={cn("h-4 w-4 text-custom-sidebar-text-300 duration-300 ", {
+        className={cn("size-4 shrink-0 text-tertiary transition-transform", {
           "rotate-180": isExpanded,
         })}
       />
diff --git a/apps/web/core/components/cycles/list/cycle-list-item-action.tsx b/apps/web/core/components/cycles/list/cycle-list-item-action.tsx
index 5415acf55..adade682f 100644
--- a/apps/web/core/components/cycles/list/cycle-list-item-action.tsx
+++ b/apps/web/core/components/cycles/list/cycle-list-item-action.tsx
@@ -1,17 +1,17 @@
-import type { FC, MouseEvent } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { MouseEvent } from "react";
 import React, { useEffect, useMemo, useState } from "react";
 import { observer } from "mobx-react";
 import { useParams, usePathname, useSearchParams } from "next/navigation";
 import { useForm } from "react-hook-form";
 import { Eye, ArrowRight, CalendarDays } from "lucide-react";
 // plane imports
-import {
-  CYCLE_TRACKER_EVENTS,
-  EUserPermissions,
-  EUserPermissionsLevel,
-  IS_FAVORITE_MENU_OPEN,
-  CYCLE_TRACKER_ELEMENTS,
-} from "@plane/constants";
+import { EUserPermissions, EUserPermissionsLevel, IS_FAVORITE_MENU_OPEN } from "@plane/constants";
 import { useLocalStorage } from "@plane/hooks";
 import { useTranslation } from "@plane/i18n";
 import { TransferIcon, WorkItemsIcon, MembersPropertyIcon } from "@plane/propel/icons";
@@ -25,7 +25,6 @@ import { DateRangeDropdown } from "@/components/dropdowns/date-range";
 import { ButtonAvatars } from "@/components/dropdowns/member/avatar";
 import { MergedDateDisplay } from "@/components/dropdowns/merged-date";
 // hooks
-import { captureError, captureSuccess } from "@/helpers/event-tracker.helper";
 import { useCycle } from "@/hooks/store/use-cycle";
 import { useMember } from "@/hooks/store/use-member";
 import { useUserPermissions } from "@/hooks/store/user";
@@ -109,25 +108,11 @@ export const CycleListItemAction = observer(function CycleListItemAction(props:
     e.preventDefault();
     if (!workspaceSlug || !projectId) return;
 
-    const addToFavoritePromise = addCycleToFavorites(workspaceSlug?.toString(), projectId.toString(), cycleId)
-      .then(() => {
+    const addToFavoritePromise = addCycleToFavorites(workspaceSlug?.toString(), projectId.toString(), cycleId).then(
+      () => {
         if (!isFavoriteMenuOpen) toggleFavoriteMenu(true);
-        captureSuccess({
-          eventName: CYCLE_TRACKER_EVENTS.favorite,
-          payload: {
-            id: cycleId,
-          },
-        });
-      })
-      .catch((error) => {
-        captureError({
-          eventName: CYCLE_TRACKER_EVENTS.favorite,
-          payload: {
-            id: cycleId,
-          },
-          error,
-        });
-      });
+      }
+    );
 
     setPromiseToast(addToFavoritePromise, {
       loading: t("project_cycles.action.favorite.loading"),
@@ -146,24 +131,11 @@ export const CycleListItemAction = observer(function CycleListItemAction(props:
     e.preventDefault();
     if (!workspaceSlug || !projectId) return;
 
-    const removeFromFavoritePromise = removeCycleFromFavorites(workspaceSlug?.toString(), projectId.toString(), cycleId)
-      .then(() => {
-        captureSuccess({
-          eventName: CYCLE_TRACKER_EVENTS.unfavorite,
-          payload: {
-            id: cycleId,
-          },
-        });
-      })
-      .catch((error) => {
-        captureError({
-          eventName: CYCLE_TRACKER_EVENTS.unfavorite,
-          payload: {
-            id: cycleId,
-          },
-          error,
-        });
-      });
+    const removeFromFavoritePromise = removeCycleFromFavorites(
+      workspaceSlug?.toString(),
+      projectId.toString(),
+      cycleId
+    );
 
     setPromiseToast(removeFromFavoritePromise, {
       loading: t("project_cycles.action.unfavorite.loading"),
@@ -209,26 +181,26 @@ export const CycleListItemAction = observer(function CycleListItemAction(props:
       />
       <button
         onClick={openCycleOverview}
-        className={`z-[1] flex text-custom-primary-200 text-xs gap-1 flex-shrink-0 ${isMobile || (isActive && !searchParams.has("peekCycle")) ? "flex" : "hidden group-hover:flex"}`}
+        className={`z-[1] flex flex-shrink-0 gap-1 text-11 text-accent-secondary ${isMobile || (isActive && !searchParams.has("peekCycle")) ? "flex" : "hidden group-hover:flex"}`}
       >
-        <Eye className="h-4 w-4 my-auto  text-custom-primary-200" />
+        <Eye className="my-auto h-4 w-4 text-accent-secondary" />
         <span>{t("project_cycles.more_details")}</span>
       </button>
       {showIssueCount && (
         <div className="flex items-center gap-1">
-          <WorkItemsIcon className="h-4 w-4 text-custom-text-300" />
-          <span className="text-xs text-custom-text-300">{cycleDetails.total_issues}</span>
+          <WorkItemsIcon className="h-4 w-4 text-tertiary" />
+          <span className="text-11 text-tertiary">{cycleDetails.total_issues}</span>
         </div>
       )}
       <CycleAdditionalActions cycleId={cycleId} projectId={projectId} />
       {showTransferIssues && (
         <div
-          className="px-2 h-6  text-custom-primary-200 flex items-center gap-1 cursor-pointer"
+          className="flex h-6 cursor-pointer items-center gap-1 px-2 text-accent-secondary"
           onClick={() => {
             setTransferIssuesModal(true);
           }}
         >
-          <TransferIcon className="fill-custom-primary-200 w-4" />
+          <TransferIcon className="w-4 fill-accent-primary" />
           <span>{t("project_cycles.transfer_work_items", { count: transferableIssuesCount })}</span>
         </div>
       )}
@@ -240,20 +212,20 @@ export const CycleListItemAction = observer(function CycleListItemAction(props:
               tooltipContent={
                 <span className="flex gap-1">
                   {renderFormattedDateInUserTimezone(cycleDetails.start_date ?? "")}
-                  <ArrowRight className="h-3 w-3 flex-shrink-0 my-auto" />
+                  <ArrowRight className="my-auto h-3 w-3 flex-shrink-0" />
                   {renderFormattedDateInUserTimezone(cycleDetails.end_date ?? "")}
                 </span>
               }
               disabled={!isProjectTimeZoneDifferent()}
               tooltipHeading={t("project_cycles.in_your_timezone")}
             >
-              <div className="flex gap-1 text-xs text-custom-text-300 font-medium items-center">
-                <CalendarDays className="h-3 w-3 flex-shrink-0 my-auto" />
+              <div className="flex items-center gap-1 text-11 font-medium text-tertiary">
+                <CalendarDays className="my-auto h-3 w-3 flex-shrink-0" />
                 <MergedDateDisplay startDate={cycleDetails.start_date} endDate={cycleDetails.end_date} />
               </div>
             </Tooltip>
             {projectUTCOffset && (
-              <span className="rounded-md text-xs px-2 cursor-default  py-1 bg-custom-background-80 text-custom-text-300">
+              <span className="cursor-default rounded-md bg-layer-1 px-2 py-1 text-11 text-tertiary">
                 {projectUTCOffset}
               </span>
             )}
@@ -266,7 +238,7 @@ export const CycleListItemAction = observer(function CycleListItemAction(props:
           <>
             <DateRangeDropdown
               buttonVariant={"transparent-with-text"}
-              buttonContainerClassName={`h-6 w-full cursor-auto flex items-center gap-1.5 text-custom-text-300 rounded text-xs [&>div]:hover:bg-transparent`}
+              buttonContainerClassName={`h-6 w-full cursor-auto flex items-center gap-1.5 text-tertiary rounded-sm text-11 [&>div]:hover:bg-transparent`}
               buttonClassName="p-0"
               minDate={new Date()}
               value={{
@@ -282,7 +254,7 @@ export const CycleListItemAction = observer(function CycleListItemAction(props:
               customTooltipContent={
                 <span className="flex gap-1">
                   {renderFormattedDateInUserTimezone(cycleDetails.start_date ?? "")}
-                  <ArrowRight className="h-3 w-3 flex-shrink-0 my-auto" />
+                  <ArrowRight className="my-auto h-3 w-3 flex-shrink-0" />
                   {renderFormattedDateInUserTimezone(cycleDetails.end_date ?? "")}
                 </span>
               }
@@ -301,7 +273,7 @@ export const CycleListItemAction = observer(function CycleListItemAction(props:
       {createdByDetails && !isActive && <ButtonAvatars showTooltip={false} userIds={createdByDetails?.id} />}
       {!isActive && (
         <Tooltip tooltipContent={`${cycleDetails.assignee_ids?.length} Members`} isMobile={isMobile}>
-          <div className="flex w-10 cursor-default items-center justify-center">
+          <div className="flex w-min cursor-default items-center justify-center">
             {cycleDetails.assignee_ids && cycleDetails.assignee_ids?.length > 0 ? (
               <AvatarGroup showTooltip={false}>
                 {cycleDetails.assignee_ids?.map((assignee_id) => {
@@ -312,14 +284,13 @@ export const CycleListItemAction = observer(function CycleListItemAction(props:
                 })}
               </AvatarGroup>
             ) : (
-              <MembersPropertyIcon className="h-4 w-4 text-custom-text-300" />
+              <MembersPropertyIcon className="h-4 w-4 text-tertiary" />
             )}
           </div>
         </Tooltip>
       )}
       {isEditingAllowed && !cycleDetails.archived_at && (
         <FavoriteStar
-          data-ph-element={CYCLE_TRACKER_ELEMENTS.LIST_ITEM}
           onClick={(e) => {
             e.preventDefault();
             e.stopPropagation();
diff --git a/apps/web/core/components/cycles/list/cycle-list-project-group-header.tsx b/apps/web/core/components/cycles/list/cycle-list-project-group-header.tsx
index 73cd06b2a..3d836dac0 100644
--- a/apps/web/core/components/cycles/list/cycle-list-project-group-header.tsx
+++ b/apps/web/core/components/cycles/list/cycle-list-project-group-header.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 import { observer } from "mobx-react";
 import { Logo } from "@plane/propel/emoji-icon-picker";
@@ -25,9 +30,9 @@ export const CycleListProjectGroupHeader = observer(function CycleListProjectGro
 
   if (!project) return null;
   return (
-    <Row className="flex items-center gap-2 flex-shrink-0 py-2.5">
+    <Row className="flex flex-shrink-0 items-center gap-2 py-2.5">
       <ChevronRightIcon
-        className={cn("h-4 w-4 text-custom-sidebar-text-300 duration-300 ", {
+        className={cn("h-4 w-4 text-tertiary duration-300", {
           "rotate-90": isExpanded,
         })}
         strokeWidth={2}
@@ -36,8 +41,8 @@ export const CycleListProjectGroupHeader = observer(function CycleListProjectGro
         <Logo logo={project.logo_props} size={16} />
       </div>
       <div className="relative flex w-full flex-row items-center gap-1 overflow-hidden">
-        <div className="inline-block line-clamp-1 truncate font-medium text-custom-text-100">{project.name}</div>
-        {showCount && <div className="pl-2 text-sm font-medium text-custom-text-300">{`${count ?? "0"}`}</div>}
+        <div className="line-clamp-1 inline-block truncate font-medium text-primary">{project.name}</div>
+        {showCount && <div className="pl-2 text-13 font-medium text-tertiary">{`${count ?? "0"}`}</div>}
       </div>
     </Row>
   );
diff --git a/apps/web/core/components/cycles/list/cycles-list-item.tsx b/apps/web/core/components/cycles/list/cycles-list-item.tsx
index 44d8e1719..c0b25f364 100644
--- a/apps/web/core/components/cycles/list/cycles-list-item.tsx
+++ b/apps/web/core/components/cycles/list/cycles-list-item.tsx
@@ -1,8 +1,14 @@
-import type { FC, MouseEvent } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { MouseEvent } from "react";
 import { useRef } from "react";
 import { observer } from "mobx-react";
 import { usePathname, useSearchParams } from "next/navigation";
-import { Check } from "lucide-react";
+import { CheckIcon } from "@plane/propel/icons";
 // plane imports
 import type { TCycleGroups } from "@plane/types";
 import { CircularProgressIndicator } from "@plane/ui";
@@ -82,9 +88,9 @@ export const CyclesListItem = observer(function CyclesListItem(props: TCyclesLis
       prependTitleElement={
         <CircularProgressIndicator size={30} percentage={progress} strokeWidth={3}>
           {progress === 100 ? (
-            <Check className="h-3 w-3 stroke-[2] text-custom-primary-100" />
+            <CheckIcon className="h-3 w-3 stroke-2" />
           ) : (
-            <span className="text-[9px] text-custom-text-100">{`${progress}%`}</span>
+            <span className="text-9 text-primary">{`${progress}%`}</span>
           )}
         </CircularProgressIndicator>
       }
diff --git a/apps/web/core/components/cycles/list/cycles-list-map.tsx b/apps/web/core/components/cycles/list/cycles-list-map.tsx
index 887f026c8..d59c7f94b 100644
--- a/apps/web/core/components/cycles/list/cycles-list-map.tsx
+++ b/apps/web/core/components/cycles/list/cycles-list-map.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // components
 import { CyclesListItem } from "./cycles-list-item";
 
diff --git a/apps/web/core/components/cycles/list/index.ts b/apps/web/core/components/cycles/list/index.ts
index 1efe34c51..d98033459 100644
--- a/apps/web/core/components/cycles/list/index.ts
+++ b/apps/web/core/components/cycles/list/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./root";
diff --git a/apps/web/core/components/cycles/list/root.tsx b/apps/web/core/components/cycles/list/root.tsx
index f0f479b7a..07351decf 100644
--- a/apps/web/core/components/cycles/list/root.tsx
+++ b/apps/web/core/components/cycles/list/root.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 import { observer } from "mobx-react";
 import { Disclosure } from "@headlessui/react";
@@ -40,7 +45,7 @@ export const CyclesList = observer(function CyclesList(props: ICyclesList) {
               <Disclosure as="div" className="flex flex-shrink-0 flex-col" defaultOpen>
                 {({ open }) => (
                   <>
-                    <Disclosure.Button className="sticky top-0 z-[2] w-full flex-shrink-0 border-b border-custom-border-200 bg-custom-background-90 cursor-pointer">
+                    <Disclosure.Button className="sticky top-0 z-[2] w-full flex-shrink-0 cursor-pointer border-b border-subtle bg-layer-1">
                       <CycleListGroupHeader
                         title={t("project_cycles.upcoming_cycle.label")}
                         type="upcoming"
@@ -59,7 +64,7 @@ export const CyclesList = observer(function CyclesList(props: ICyclesList) {
             <Disclosure as="div" className="flex flex-shrink-0 flex-col pb-7">
               {({ open }) => (
                 <>
-                  <Disclosure.Button className="sticky top-0 z-[2] w-full flex-shrink-0 border-b border-custom-border-200 bg-custom-background-90 cursor-pointer">
+                  <Disclosure.Button className="sticky top-0 z-2 w-full flex-shrink-0 cursor-pointer border-b border-subtle bg-layer-1">
                     <CycleListGroupHeader
                       title={t("project_cycles.completed_cycle.label")}
                       type="completed"
diff --git a/apps/web/core/components/cycles/modal.tsx b/apps/web/core/components/cycles/modal.tsx
index 1a6855c13..582489ced 100644
--- a/apps/web/core/components/cycles/modal.tsx
+++ b/apps/web/core/components/cycles/modal.tsx
@@ -1,14 +1,18 @@
-import React, { useEffect, useState } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useEffect, useState } from "react";
 import { mutate } from "swr";
 // types
-import { CYCLE_TRACKER_EVENTS } from "@plane/constants";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { CycleDateCheckData, ICycle, TCycleTabOptions } from "@plane/types";
 // ui
 import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
 // hooks
 import { renderFormattedPayloadDate } from "@plane/utils";
-import { captureError, captureSuccess } from "@/helpers/event-tracker.helper";
 import { useCycle } from "@/hooks/store/use-cycle";
 import { useProject } from "@/hooks/store/use-project";
 import useKeypress from "@/hooks/use-keypress";
@@ -46,7 +50,7 @@ export function CycleCreateUpdateModal(props: CycleModalProps) {
 
     const selectedProjectId = payload.project_id ?? projectId.toString();
     await createCycle(workspaceSlug, selectedProjectId, payload)
-      .then((res) => {
+      .then((_res) => {
         // mutate when the current cycle creation is active
         if (payload.start_date && payload.end_date) {
           const currentDate = new Date();
@@ -62,12 +66,6 @@ export function CycleCreateUpdateModal(props: CycleModalProps) {
           title: "Success!",
           message: "Cycle created successfully.",
         });
-        captureSuccess({
-          eventName: CYCLE_TRACKER_EVENTS.create,
-          payload: {
-            id: res.id,
-          },
-        });
       })
       .catch((err) => {
         setToast({
@@ -75,10 +73,6 @@ export function CycleCreateUpdateModal(props: CycleModalProps) {
           title: "Error!",
           message: err?.detail ?? "Error in creating cycle. Please try again.",
         });
-        captureError({
-          eventName: CYCLE_TRACKER_EVENTS.create,
-          error: err,
-        });
       });
   };
 
@@ -87,13 +81,7 @@ export function CycleCreateUpdateModal(props: CycleModalProps) {
 
     const selectedProjectId = payload.project_id ?? projectId.toString();
     await updateCycleDetails(workspaceSlug, selectedProjectId, cycleId, payload)
-      .then((res) => {
-        captureSuccess({
-          eventName: CYCLE_TRACKER_EVENTS.update,
-          payload: {
-            id: res.id,
-          },
-        });
+      .then((_res) => {
         setToast({
           type: TOAST_TYPE.SUCCESS,
           title: "Success!",
@@ -106,10 +94,6 @@ export function CycleCreateUpdateModal(props: CycleModalProps) {
           title: "Error!",
           message: err?.detail ?? "Error in updating cycle. Please try again.",
         });
-        captureError({
-          eventName: CYCLE_TRACKER_EVENTS.update,
-          error: err,
-        });
       });
   };
 
@@ -136,14 +120,20 @@ export function CycleCreateUpdateModal(props: CycleModalProps) {
 
     if (payload.start_date && payload.end_date) {
       if (data?.id) {
-        // Update existing cycle - always include cycle_id for validation
-        isDateValid = await dateChecker(projectId, {
-          start_date: payload.start_date,
-          end_date: payload.end_date,
-          cycle_id: data.id,
-        });
+        // Update existing cycle - only check dates if they've changed
+        const originalStartDate = renderFormattedPayloadDate(data.start_date) ?? null;
+        const originalEndDate = renderFormattedPayloadDate(data.end_date) ?? null;
+        const hasDateChanged = payload.start_date !== originalStartDate || payload.end_date !== originalEndDate;
+
+        if (hasDateChanged) {
+          isDateValid = await dateChecker(projectId, {
+            start_date: payload.start_date,
+            end_date: payload.end_date,
+            cycle_id: data.id,
+          });
+        }
       } else {
-        // Create new cycle - no cycle_id needed
+        // Create new cycle - always check dates
         isDateValid = await dateChecker(projectId, {
           start_date: payload.start_date,
           end_date: payload.end_date,
diff --git a/apps/web/core/components/cycles/quick-actions.tsx b/apps/web/core/components/cycles/quick-actions.tsx
index a7ff2298e..0c4e8be7c 100644
--- a/apps/web/core/components/cycles/quick-actions.tsx
+++ b/apps/web/core/components/cycles/quick-actions.tsx
@@ -1,28 +1,25 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useState } from "react";
 import { observer } from "mobx-react";
-
-// icons
-import { ArchiveRestoreIcon, ExternalLink, LinkIcon, Pencil, Trash2 } from "lucide-react";
+import { MoreHorizontal } from "lucide-react";
 // ui
-import {
-  CYCLE_TRACKER_EVENTS,
-  EUserPermissions,
-  EUserPermissionsLevel,
-  CYCLE_TRACKER_ELEMENTS,
-} from "@plane/constants";
+import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { ArchiveIcon } from "@plane/propel/icons";
+import { IconButton } from "@plane/propel/icon-button";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { TContextMenuItem } from "@plane/ui";
 import { ContextMenu, CustomMenu } from "@plane/ui";
 import { copyUrlToClipboard, cn } from "@plane/utils";
-// helpers
 // hooks
-import { captureClick, captureError, captureSuccess } from "@/helpers/event-tracker.helper";
+import { useCycleMenuItems } from "@/components/common/quick-actions-helper";
 import { useCycle } from "@/hooks/store/use-cycle";
 import { useUserPermissions } from "@/hooks/store/user";
 import { useAppRouter } from "@/hooks/use-app-router";
-import { useEndCycle, EndCycleModal } from "@/plane-web/components/cycles";
 // local imports
 import { ArchiveCycleModal } from "./archived-cycles/modal";
 import { CycleDeleteModal } from "./delete-modal";
@@ -50,12 +47,6 @@ export const CycleQuickActions = observer(function CycleQuickActions(props: Prop
   const { t } = useTranslation();
   // derived values
   const cycleDetails = getCycleById(cycleId);
-  const isArchived = !!cycleDetails?.archived_at;
-  const isCompleted = cycleDetails?.status?.toLowerCase() === "completed";
-  const isCurrentCycle = cycleDetails?.status?.toLowerCase() === "current";
-  const transferrableIssuesCount = cycleDetails
-    ? cycleDetails.total_issues - (cycleDetails.cancelled_issues + cycleDetails.completed_issues)
-    : 0;
   // auth
   const isEditingAllowed = allowPermissions(
     [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
@@ -64,8 +55,6 @@ export const CycleQuickActions = observer(function CycleQuickActions(props: Prop
     projectId
   );
 
-  const { isEndCycleModalOpen, setEndCycleModalOpen, endCycleContextMenu } = useEndCycle(isCurrentCycle);
-
   const cycleLink = `${workspaceSlug}/projects/${projectId}/cycles/${cycleId}`;
   const handleCopyText = () =>
     copyUrlToClipboard(cycleLink).then(() => {
@@ -77,12 +66,6 @@ export const CycleQuickActions = observer(function CycleQuickActions(props: Prop
     });
   const handleOpenInNewTab = () => window.open(`/${cycleLink}`, "_blank");
 
-  const handleEditCycle = () => {
-    setUpdateModal(true);
-  };
-
-  const handleArchiveCycle = () => setArchiveCycleModal(true);
-
   const handleRestoreCycle = async () =>
     await restoreCycle(workspaceSlug, projectId, cycleId)
       .then(() => {
@@ -91,12 +74,6 @@ export const CycleQuickActions = observer(function CycleQuickActions(props: Prop
           title: t("project_cycles.action.restore.success.title"),
           message: t("project_cycles.action.restore.success.description"),
         });
-        captureSuccess({
-          eventName: CYCLE_TRACKER_EVENTS.restore,
-          payload: {
-            id: cycleId,
-          },
-        });
         router.push(`/${workspaceSlug}/projects/${projectId}/archives/cycles`);
       })
       .catch(() => {
@@ -105,77 +82,29 @@ export const CycleQuickActions = observer(function CycleQuickActions(props: Prop
           title: t("project_cycles.action.restore.failed.title"),
           message: t("project_cycles.action.restore.failed.description"),
         });
-        captureError({
-          eventName: CYCLE_TRACKER_EVENTS.restore,
-          payload: {
-            id: cycleId,
-          },
-        });
       });
 
-  const handleDeleteCycle = () => {
-    setDeleteModal(true);
-  };
+  const menuResult = useCycleMenuItems({
+    cycleDetails: cycleDetails ?? undefined,
+    workspaceSlug,
+    projectId,
+    cycleId,
+    isEditingAllowed,
+    handleEdit: () => setUpdateModal(true),
+    handleArchive: () => setArchiveCycleModal(true),
+    handleRestore: handleRestoreCycle,
+    handleDelete: () => setDeleteModal(true),
+    handleCopyLink: handleCopyText,
+    handleOpenInNewTab,
+  });
 
-  const MENU_ITEMS: TContextMenuItem[] = [
-    {
-      key: "edit",
-      title: t("edit"),
-      icon: Pencil,
-      action: handleEditCycle,
-      shouldRender: isEditingAllowed && !isCompleted && !isArchived,
-    },
-    {
-      key: "open-new-tab",
-      action: handleOpenInNewTab,
-      title: t("open_in_new_tab"),
-      icon: ExternalLink,
-      shouldRender: !isArchived,
-    },
-    {
-      key: "copy-link",
-      action: handleCopyText,
-      title: t("copy_link"),
-      icon: LinkIcon,
-      shouldRender: !isArchived,
-    },
-    {
-      key: "archive",
-      action: handleArchiveCycle,
-      title: t("archive"),
-      description: isCompleted ? undefined : t("project_cycles.only_completed_cycles_can_be_archived"),
-      icon: ArchiveIcon,
-      className: "items-start",
-      iconClassName: "mt-1",
-      shouldRender: isEditingAllowed && !isArchived,
-      disabled: !isCompleted,
-    },
-    {
-      key: "restore",
-      action: handleRestoreCycle,
-      title: t("restore"),
-      icon: ArchiveRestoreIcon,
-      shouldRender: isEditingAllowed && isArchived,
-    },
-    {
-      key: "delete",
-      action: handleDeleteCycle,
-      title: t("delete"),
-      icon: Trash2,
-      shouldRender: isEditingAllowed && !isCompleted && !isArchived,
-    },
-  ];
-
-  if (endCycleContextMenu) MENU_ITEMS.splice(3, 0, endCycleContextMenu);
+  const MENU_ITEMS: TContextMenuItem[] = Array.isArray(menuResult) ? menuResult : menuResult.items;
+  const additionalModals = Array.isArray(menuResult) ? null : menuResult.modals;
 
   const CONTEXT_MENU_ITEMS = MENU_ITEMS.map(function CONTEXT_MENU_ITEMS(item) {
     return {
       ...item,
-
       action: () => {
-        captureClick({
-          elementName: CYCLE_TRACKER_ELEMENTS.CONTEXT_MENU,
-        });
         item.action();
       },
     };
@@ -206,48 +135,41 @@ export const CycleQuickActions = observer(function CycleQuickActions(props: Prop
             workspaceSlug={workspaceSlug}
             projectId={projectId}
           />
-          {isCurrentCycle && (
-            <EndCycleModal
-              isOpen={isEndCycleModalOpen}
-              handleClose={() => setEndCycleModalOpen(false)}
-              cycleId={cycleId}
-              projectId={projectId}
-              workspaceSlug={workspaceSlug}
-              transferrableIssuesCount={transferrableIssuesCount}
-              cycleName={cycleDetails.name}
-            />
-          )}
+          {additionalModals}
         </div>
       )}
       <ContextMenu parentRef={parentRef} items={CONTEXT_MENU_ITEMS} />
-      <CustomMenu ellipsis placement="bottom-end" closeOnSelect maxHeight="lg" buttonClassName={customClassName}>
+      <CustomMenu
+        customButton={<IconButton variant="tertiary" size="lg" icon={MoreHorizontal} />}
+        placement="bottom-end"
+        closeOnSelect
+        maxHeight="lg"
+        buttonClassName={customClassName}
+      >
         {MENU_ITEMS.map((item) => {
           if (item.shouldRender === false) return null;
           return (
             <CustomMenu.MenuItem
               key={item.key}
               onClick={() => {
-                captureClick({
-                  elementName: CYCLE_TRACKER_ELEMENTS.QUICK_ACTIONS,
-                });
                 item.action();
               }}
               className={cn(
                 "flex items-center gap-2",
                 {
-                  "text-custom-text-400": item.disabled,
+                  "text-placeholder": item.disabled,
                 },
                 item.className
               )}
               disabled={item.disabled}
             >
-              {item.icon && <item.icon className={cn("h-3 w-3", item.iconClassName)} />}
+              {item.icon && <item.icon className={cn("h-3 w-3 flex-shrink-0", item.iconClassName)} />}
               <div>
                 <h5>{item.title}</h5>
                 {item.description && (
                   <p
-                    className={cn("text-custom-text-300 whitespace-pre-line", {
-                      "text-custom-text-400": item.disabled,
+                    className={cn("whitespace-pre-line text-tertiary", {
+                      "text-placeholder": item.disabled,
                     })}
                   >
                     {item.description}
diff --git a/apps/web/core/components/cycles/transfer-issues-modal.tsx b/apps/web/core/components/cycles/transfer-issues-modal.tsx
index 896f44001..3f1bda0d6 100644
--- a/apps/web/core/components/cycles/transfer-issues-modal.tsx
+++ b/apps/web/core/components/cycles/transfer-issues-modal.tsx
@@ -1,15 +1,19 @@
-import React, { useState } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
-import { AlertCircle, Search } from "lucide-react";
-import { Dialog, Transition } from "@headlessui/react";
-import { CycleIcon, TransferIcon, CloseIcon } from "@plane/propel/icons";
+import { AlertCircle } from "lucide-react";
+import { SearchIcon, CycleIcon, TransferIcon, CloseIcon } from "@plane/propel/icons";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import { EIssuesStoreType } from "@plane/types";
+import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
 import { useCycle } from "@/hooks/store/use-cycle";
 import { useIssues } from "@/hooks/store/use-issues";
-//icons
-// constants
 
 type Props = {
   isOpen: boolean;
@@ -72,109 +76,71 @@ export const TransferIssuesModal = observer(function TransferIssuesModal(props:
     return cycleDetails?.name?.toLowerCase().includes(query?.toLowerCase());
   });
 
-  // useEffect(() => {
-  //   const handleKeyDown = (e: KeyboardEvent) => {
-  //     if (e.key === "Escape") {
-  //       handleClose();
-  //     }
-  //   };
-  // }, [handleClose]);
-
   return (
-    <Transition.Root show={isOpen} as={React.Fragment}>
-      <Dialog as="div" className="relative z-20" onClose={handleClose}>
-        <Transition.Child
-          as={React.Fragment}
-          enter="ease-out duration-300"
-          enterFrom="opacity-0"
-          enterTo="opacity-100"
-          leave="ease-in duration-200"
-          leaveFrom="opacity-100"
-          leaveTo="opacity-0"
-        >
-          <div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
-        </Transition.Child>
-
-        <div className="fixed inset-0 z-10">
-          <div className="mt-10 flex min-h-full items-start justify-center p-4 text-center sm:p-0 md:mt-20">
-            <Transition.Child
-              as={React.Fragment}
-              enter="ease-out duration-300"
-              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-              enterTo="opacity-100 translate-y-0 sm:scale-100"
-              leave="ease-in duration-200"
-              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-            >
-              <Dialog.Panel className="relative transform rounded-lg bg-custom-background-100 py-5 text-left shadow-custom-shadow-md transition-all sm:w-full sm:max-w-2xl">
-                <div className="flex flex-col gap-4">
-                  <div className="flex items-center justify-between px-5">
-                    <div className="flex items-center gap-1">
-                      <TransferIcon className="w-5 fill-custom-text-100" />
-                      <h4 className="text-xl font-medium text-custom-text-100">Transfer work items</h4>
-                    </div>
-                    <button onClick={handleClose}>
-                      <CloseIcon className="h-4 w-4" />
-                    </button>
-                  </div>
-                  <div className="flex items-center gap-2 border-b border-custom-border-200 px-5 pb-3">
-                    <Search className="h-4 w-4 text-custom-text-200" />
-                    <input
-                      className="outline-none text-sm"
-                      placeholder="Search for a cycle..."
-                      onChange={(e) => setQuery(e.target.value)}
-                      value={query}
-                    />
-                  </div>
-                  <div className="flex w-full flex-col items-start gap-2 px-5">
-                    {filteredOptions ? (
-                      filteredOptions.length > 0 ? (
-                        filteredOptions.map((optionId) => {
-                          const cycleDetails = getCycleById(optionId);
-
-                          if (!cycleDetails) return;
-
-                          return (
-                            <button
-                              key={optionId}
-                              className="flex w-full items-center gap-4 rounded px-4 py-3 text-sm text-custom-text-200 hover:bg-custom-background-90"
-                              onClick={() => {
-                                transferIssue({
-                                  new_cycle_id: optionId,
-                                });
-                                handleClose();
-                              }}
-                            >
-                              <CycleIcon className="h-5 w-5" />
-                              <div className="flex w-full justify-between truncate">
-                                <span className="truncate">{cycleDetails?.name}</span>
-                                {cycleDetails.status && (
-                                  <span className="flex-shrink-0 flex items-center rounded-full bg-custom-background-80  px-2 capitalize">
-                                    {cycleDetails.status.toLocaleLowerCase()}
-                                  </span>
-                                )}
-                              </div>
-                            </button>
-                          );
-                        })
-                      ) : (
-                        <div className="flex w-full items-center justify-center gap-4 p-5 text-sm">
-                          <AlertCircle className="h-3.5 w-3.5 text-custom-text-200" />
-                          <span className="text-center text-custom-text-200">
-                            You don’t have any current cycle. Please create one to transfer the work items.
-                          </span>
-                        </div>
-                      )
-                    ) : (
-                      <p className="text-center text-custom-text-200">Loading...</p>
-                    )}
-                  </div>
-                </div>
-              </Dialog.Panel>
-            </Transition.Child>
+    <ModalCore isOpen={isOpen} handleClose={handleClose} position={EModalPosition.TOP} width={EModalWidth.XXL}>
+      <div className="flex flex-col gap-4 py-5">
+        <div className="flex items-center justify-between px-5">
+          <div className="flex items-center gap-1">
+            <TransferIcon className="w-5 fill-primary" />
+            <h4 className="text-18 font-medium text-primary">Transfer work items</h4>
           </div>
+          <button onClick={handleClose}>
+            <CloseIcon className="h-4 w-4" />
+          </button>
         </div>
-      </Dialog>
-    </Transition.Root>
+        <div className="flex items-center gap-2 border-b border-subtle px-5 pb-3">
+          <SearchIcon className="h-4 w-4 text-secondary" />
+          <input
+            className="text-13 outline-none"
+            placeholder="Search for a cycle..."
+            onChange={(e) => setQuery(e.target.value)}
+            value={query}
+          />
+        </div>
+        <div className="flex w-full flex-col items-start gap-2 px-5">
+          {filteredOptions ? (
+            filteredOptions.length > 0 ? (
+              filteredOptions.map((optionId) => {
+                const cycleDetails = getCycleById(optionId);
+
+                if (!cycleDetails) return;
+
+                return (
+                  <button
+                    key={optionId}
+                    className="flex w-full items-center gap-4 rounded-sm px-4 py-3 text-13 text-secondary hover:bg-surface-2"
+                    onClick={() => {
+                      transferIssue({
+                        new_cycle_id: optionId,
+                      });
+                      handleClose();
+                    }}
+                  >
+                    <CycleIcon className="h-5 w-5" />
+                    <div className="flex w-full justify-between truncate">
+                      <span className="truncate">{cycleDetails?.name}</span>
+                      {cycleDetails.status && (
+                        <span className="flex flex-shrink-0 items-center rounded-full bg-layer-1 px-2 capitalize">
+                          {cycleDetails.status.toLocaleLowerCase()}
+                        </span>
+                      )}
+                    </div>
+                  </button>
+                );
+              })
+            ) : (
+              <div className="flex w-full items-center justify-center gap-4 p-5 text-13">
+                <AlertCircle className="h-3.5 w-3.5 text-secondary" />
+                <span className="text-center text-secondary">
+                  You don’t have any current cycle. Please create one to transfer the work items.
+                </span>
+              </div>
+            )
+          ) : (
+            <p className="text-center text-secondary">Loading...</p>
+          )}
+        </div>
+      </div>
+    </ModalCore>
   );
 });
diff --git a/apps/web/core/components/cycles/transfer-issues.tsx b/apps/web/core/components/cycles/transfer-issues.tsx
index e03d729b1..adbab83aa 100644
--- a/apps/web/core/components/cycles/transfer-issues.tsx
+++ b/apps/web/core/components/cycles/transfer-issues.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 import { AlertCircle } from "lucide-react";
 // ui
@@ -14,19 +20,14 @@ export function TransferIssues(props: Props) {
   const { handleClick, canTransferIssues = false, disabled = false } = props;
   return (
     <div className="-mt-2 mb-4 flex items-center justify-between px-4 pt-6">
-      <div className="flex items-center gap-2 text-sm text-custom-text-200">
-        <AlertCircle className="h-3.5 w-3.5 text-custom-text-200" />
+      <div className="flex items-center gap-2 text-13 text-secondary">
+        <AlertCircle className="h-3.5 w-3.5 text-secondary" />
         <span>Completed cycles are not editable.</span>
       </div>
 
       {canTransferIssues && (
         <div>
-          <Button
-            variant="primary"
-            prependIcon={<TransferIcon color="white" />}
-            onClick={handleClick}
-            disabled={disabled}
-          >
+          <Button variant="primary" size="lg" prependIcon={<TransferIcon />} onClick={handleClick} disabled={disabled}>
             Transfer work items
           </Button>
         </div>
diff --git a/apps/web/core/components/dropdowns/buttons.tsx b/apps/web/core/components/dropdowns/buttons.tsx
index a1e142f88..dbee6ab0b 100644
--- a/apps/web/core/components/dropdowns/buttons.tsx
+++ b/apps/web/core/components/dropdowns/buttons.tsx
@@ -1,5 +1,12 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 // helpers
+import { Button } from "@plane/propel/button";
 import { Tooltip } from "@plane/propel/tooltip";
 import { cn } from "@plane/utils";
 // types
@@ -71,15 +78,19 @@ function BorderButton(props: ButtonProps) {
       isMobile={isMobile}
       renderByDefault={renderToolTipByDefault}
     >
-      <div
+      <Button
+        variant="ghost"
+        size="sm"
         className={cn(
-          "h-full w-full flex items-center gap-1.5 border-[0.5px] border-custom-border-300 hover:bg-custom-background-80 rounded text-xs px-2 py-0.5",
-          { "bg-custom-background-80": isActive },
+          "flex h-full w-full items-center justify-start gap-1.5 border-[0.5px] border-strong",
+          {
+            "bg-layer-transparent-active": isActive,
+          },
           className
         )}
       >
         {children}
-      </div>
+      </Button>
     </Tooltip>
   );
 }
@@ -95,14 +106,16 @@ function BackgroundButton(props: ButtonProps) {
       isMobile={isMobile}
       renderByDefault={renderToolTipByDefault}
     >
-      <div
+      <Button
+        variant="ghost"
+        size="sm"
         className={cn(
-          "h-full w-full flex items-center gap-1.5 rounded text-xs px-2 py-0.5 bg-custom-background-80",
+          "flex h-full w-full items-center justify-between gap-1.5 bg-layer-3 hover:bg-layer-1-hover",
           className
         )}
       >
         {children}
-      </div>
+      </Button>
     </Tooltip>
   );
 }
@@ -118,15 +131,19 @@ function TransparentButton(props: ButtonProps) {
       isMobile={isMobile}
       renderByDefault={renderToolTipByDefault}
     >
-      <div
+      <Button
+        variant="ghost"
+        size="sm"
         className={cn(
-          "h-full w-full flex items-center gap-1.5 rounded text-xs px-2 py-0.5 hover:bg-custom-background-80",
-          { "bg-custom-background-80": isActive },
+          "flex h-full w-full items-center justify-between gap-1.5",
+          {
+            "bg-layer-transparent-active": isActive,
+          },
           className
         )}
       >
         {children}
-      </div>
+      </Button>
     </Tooltip>
   );
 }
diff --git a/apps/web/core/components/dropdowns/constants.ts b/apps/web/core/components/dropdowns/constants.ts
index 9451b1fca..77479c8d3 100644
--- a/apps/web/core/components/dropdowns/constants.ts
+++ b/apps/web/core/components/dropdowns/constants.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // types
 import type { TButtonVariants } from "./types";
 
diff --git a/apps/web/core/components/dropdowns/cycle/cycle-options.tsx b/apps/web/core/components/dropdowns/cycle/cycle-options.tsx
index 651f6421e..7d12cbc0b 100644
--- a/apps/web/core/components/dropdowns/cycle/cycle-options.tsx
+++ b/apps/web/core/components/dropdowns/cycle/cycle-options.tsx
@@ -1,16 +1,20 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useEffect, useRef, useState } from "react";
 import type { Placement } from "@popperjs/core";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 import { usePopper } from "react-popper";
 // components
-import { Check, Search } from "lucide-react";
 import { Combobox } from "@headlessui/react";
 // i18n
 import { useTranslation } from "@plane/i18n";
 // icon
-import { CycleGroupIcon, CycleIcon } from "@plane/propel/icons";
+import { CheckIcon, CycleGroupIcon, CycleIcon, SearchIcon } from "@plane/propel/icons";
 import type { TCycleGroups } from "@plane/types";
 // ui
 // store hooks
@@ -122,17 +126,17 @@ export const CycleOptions = observer(function CycleOptions(props: CycleOptionsPr
   return (
     <Combobox.Options className="fixed z-10" static>
       <div
-        className="my-1 w-48 rounded border-[0.5px] border-custom-border-300 bg-custom-background-100 px-2 py-2.5 text-xs shadow-custom-shadow-rg focus:outline-none"
+        className="my-1 w-48 rounded-sm border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 text-11 shadow-raised-200 focus:outline-none"
         ref={setPopperElement}
         style={styles.popper}
         {...attributes.popper}
       >
-        <div className="flex items-center gap-1.5 rounded border border-custom-border-100 bg-custom-background-90 px-2">
-          <Search className="h-3.5 w-3.5 text-custom-text-400" strokeWidth={1.5} />
+        <div className="flex items-center gap-1.5 rounded-sm border border-subtle bg-surface-2 px-2">
+          <SearchIcon className="h-3.5 w-3.5 text-placeholder" strokeWidth={1.5} />
           <Combobox.Input
             as="input"
             ref={inputRef}
-            className="w-full bg-transparent py-1 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
+            className="w-full bg-transparent py-1 text-11 text-secondary placeholder:text-placeholder focus:outline-none"
             value={query}
             onChange={(e) => setQuery(e.target.value)}
             placeholder={t("common.search.label")}
@@ -148,24 +152,24 @@ export const CycleOptions = observer(function CycleOptions(props: CycleOptionsPr
                   key={option.value}
                   value={option.value}
                   className={({ active, selected }) =>
-                    `flex w-full cursor-pointer select-none items-center justify-between gap-2 truncate rounded px-1 py-1.5 ${
-                      active ? "bg-custom-background-80" : ""
-                    } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
+                    `flex w-full cursor-pointer items-center justify-between gap-2 truncate rounded-sm px-1 py-1.5 select-none ${
+                      active ? "bg-layer-transparent-hover" : ""
+                    } ${selected ? "text-primary" : "text-secondary"}`
                   }
                 >
                   {({ selected }) => (
                     <>
                       <span className="flex-grow truncate">{option.content}</span>
-                      {selected && <Check className="h-3.5 w-3.5 flex-shrink-0" />}
+                      {selected && <CheckIcon className="h-3.5 w-3.5 flex-shrink-0" />}
                     </>
                   )}
                 </Combobox.Option>
               ))
             ) : (
-              <p className="px-1.5 py-1 italic text-custom-text-400">{t("common.search.no_matches_found")}</p>
+              <p className="px-1.5 py-1 text-placeholder italic">{t("common.search.no_matches_found")}</p>
             )
           ) : (
-            <p className="px-1.5 py-1 italic text-custom-text-400">{t("common.loading")}</p>
+            <p className="px-1.5 py-1 text-placeholder italic">{t("common.loading")}</p>
           )}
         </div>
       </div>
diff --git a/apps/web/core/components/dropdowns/cycle/index.tsx b/apps/web/core/components/dropdowns/cycle/index.tsx
index aba1d97e5..a2a9919b1 100644
--- a/apps/web/core/components/dropdowns/cycle/index.tsx
+++ b/apps/web/core/components/dropdowns/cycle/index.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { ReactNode } from "react";
 import { useRef, useState } from "react";
 import { observer } from "mobx-react";
@@ -83,10 +89,7 @@ export const CycleDropdown = observer(function CycleDropdown(props: Props) {
         <button
           ref={setReferenceElement}
           type="button"
-          className={cn(
-            "clickable block h-full w-full outline-none hover:bg-custom-background-80",
-            buttonContainerClassName
-          )}
+          className={cn("clickable block h-full w-full outline-none hover:bg-layer-1", buttonContainerClassName)}
           onClick={handleOnClick}
           disabled={disabled}
           tabIndex={tabIndex}
@@ -98,9 +101,9 @@ export const CycleDropdown = observer(function CycleDropdown(props: Props) {
           ref={setReferenceElement}
           type="button"
           className={cn(
-            "clickable block h-full max-w-full outline-none hover:bg-custom-background-80",
+            "clickable block h-full max-w-full outline-none hover:bg-layer-1",
             {
-              "cursor-not-allowed text-custom-text-200": disabled,
+              "cursor-not-allowed text-secondary": disabled,
               "cursor-pointer": !disabled,
             },
             buttonContainerClassName
@@ -120,7 +123,7 @@ export const CycleDropdown = observer(function CycleDropdown(props: Props) {
           >
             {!hideIcon && <CycleIcon className="h-3 w-3 flex-shrink-0" />}
             {BUTTON_VARIANTS_WITH_TEXT.includes(buttonVariant) && (!!selectedName || !!placeholder) && (
-              <span className="max-w-40 flex-grow truncate">{selectedName ?? placeholder}</span>
+              <span className="max-w-40 truncate">{selectedName ?? placeholder}</span>
             )}
             {dropdownArrow && (
               <ChevronDownIcon className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
diff --git a/apps/web/core/components/dropdowns/date-range.tsx b/apps/web/core/components/dropdowns/date-range.tsx
index 99f5e9a23..c9de567e3 100644
--- a/apps/web/core/components/dropdowns/date-range.tsx
+++ b/apps/web/core/components/dropdowns/date-range.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React, { useEffect, useRef, useState } from "react";
 import type { Placement } from "@popperjs/core";
 import { observer } from "mobx-react";
@@ -157,7 +163,7 @@ export const DateRangeDropdown = observer(function DateRangeDropdown(props: Prop
       className={cn(
         "clickable block h-full max-w-full outline-none",
         {
-          "cursor-not-allowed text-custom-text-200": disabled,
+          "cursor-not-allowed text-secondary": disabled,
           "cursor-pointer": !disabled,
         },
         buttonContainerClassName
@@ -186,22 +192,22 @@ export const DateRangeDropdown = observer(function DateRangeDropdown(props: Prop
       >
         {mergeDates ? (
           // Merged date display
-          <div className="flex items-center gap-1.5 w-full">
+          <div className="flex w-full items-center gap-1.5">
             {!hideIcon.from && <CalendarDays className="h-3 w-3 flex-shrink-0" />}
             {dateRange.from || dateRange.to ? (
               <MergedDateDisplay
                 startDate={dateRange.from}
                 endDate={dateRange.to}
-                className="flex-grow truncate text-xs"
+                className="flex-grow truncate text-11"
               />
             ) : (
               renderPlaceholder && (
                 <>
-                  <span className="text-custom-text-400">{placeholder.from}</span>
+                  <span className="text-placeholder">{placeholder.from}</span>
                   {placeholder.from && placeholder.to && (
-                    <ArrowRight className="h-3 w-3 flex-shrink-0 text-custom-text-400" />
+                    <ArrowRight className="h-3 w-3 flex-shrink-0 text-placeholder" />
                   )}
-                  <span className="text-custom-text-400">{placeholder.to}</span>
+                  <span className="text-placeholder">{placeholder.to}</span>
                 </>
               )
             )}
@@ -221,7 +227,7 @@ export const DateRangeDropdown = observer(function DateRangeDropdown(props: Prop
           <>
             <span
               className={cn(
-                "h-full flex items-center justify-center gap-1 rounded-sm flex-grow",
+                "flex h-full flex-grow items-center justify-center gap-1 rounded-xs",
                 buttonFromDateClassName
               )}
             >
@@ -231,7 +237,7 @@ export const DateRangeDropdown = observer(function DateRangeDropdown(props: Prop
             <ArrowRight className="h-3 w-3 flex-shrink-0" />
             <span
               className={cn(
-                "h-full flex items-center justify-center gap-1 rounded-sm flex-grow",
+                "flex h-full flex-grow items-center justify-center gap-1 rounded-xs",
                 buttonToDateClassName
               )}
             >
@@ -240,7 +246,7 @@ export const DateRangeDropdown = observer(function DateRangeDropdown(props: Prop
             </span>
             {isClearable && !disabled && hasDisplayedDates && (
               <CloseIcon
-                className={cn("h-2.5 w-2.5 flex-shrink-0 cursor-pointer ml-1", clearIconClassName)}
+                className={cn("ml-1 h-2.5 w-2.5 flex-shrink-0 cursor-pointer", clearIconClassName)}
                 onClick={(e) => {
                   e.stopPropagation();
                   e.preventDefault();
@@ -257,13 +263,13 @@ export const DateRangeDropdown = observer(function DateRangeDropdown(props: Prop
   const comboOptions = (
     <Combobox.Options data-prevent-outside-click static>
       <div
-        className="my-1 bg-custom-background-100 shadow-custom-shadow-rg border-[0.5px] border-custom-border-300 rounded-md overflow-hidden z-30"
+        className="z-30 my-1 overflow-hidden rounded-md border-[0.5px] border-subtle-1 bg-surface-1"
         ref={setPopperElement}
         style={styles.popper}
         {...attributes.popper}
       >
         <Calendar
-          className="rounded-md border border-custom-border-200 p-3"
+          className="rounded-md border border-subtle p-3 text-12"
           captionLayout="dropdown"
           selected={dateRange}
           onSelect={(val: DateRange | undefined) => {
diff --git a/apps/web/core/components/dropdowns/date.tsx b/apps/web/core/components/dropdowns/date.tsx
index dd79b243e..59f1ec973 100644
--- a/apps/web/core/components/dropdowns/date.tsx
+++ b/apps/web/core/components/dropdowns/date.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React, { useRef, useState } from "react";
 import { observer } from "mobx-react";
 import { createPortal } from "react-dom";
@@ -35,6 +41,7 @@ type Props = TDropdownProps & {
   closeOnSelect?: boolean;
   formatToken?: string;
   renderByDefault?: boolean;
+  labelClassName?: string;
 };
 
 export const DateDropdown = observer(function DateDropdown(props: Props) {
@@ -62,6 +69,7 @@ export const DateDropdown = observer(function DateDropdown(props: Props) {
     value,
     formatToken,
     renderByDefault = true,
+    labelClassName = "",
   } = props;
   // states
   const [isOpen, setIsOpen] = useState(defaultOpen);
@@ -118,7 +126,7 @@ export const DateDropdown = observer(function DateDropdown(props: Props) {
       className={cn(
         "clickable block h-full max-w-full outline-none",
         {
-          "cursor-not-allowed text-custom-text-200": disabled,
+          "cursor-not-allowed text-secondary": disabled,
           "cursor-pointer": !disabled,
         },
         buttonContainerClassName
@@ -138,7 +146,9 @@ export const DateDropdown = observer(function DateDropdown(props: Props) {
       >
         {!hideIcon && icon}
         {BUTTON_VARIANTS_WITH_TEXT.includes(buttonVariant) && (
-          <span className="flex-grow truncate">{value ? renderFormattedDate(value, formatToken) : placeholder}</span>
+          <span className={cn("flex-grow truncate text-left text-body-xs-medium", labelClassName)}>
+            {value ? renderFormattedDate(value, formatToken) : placeholder}
+          </span>
         )}
         {isClearable && !disabled && isDateSelected && (
           <CloseIcon
@@ -174,7 +184,7 @@ export const DateDropdown = observer(function DateDropdown(props: Props) {
           <Combobox.Options data-prevent-outside-click static>
             <div
               className={cn(
-                "my-1 bg-custom-background-100 shadow-custom-shadow-rg border-[0.5px] border-custom-border-300 rounded-md overflow-hidden z-30",
+                "z-30 my-1 overflow-hidden rounded-md border-[0.5px] border-strong bg-surface-1 shadow-raised-200",
                 optionsClassName
               )}
               ref={setPopperElement}
@@ -182,7 +192,7 @@ export const DateDropdown = observer(function DateDropdown(props: Props) {
               {...attributes.popper}
             >
               <Calendar
-                className="rounded-md border border-custom-border-200 p-3"
+                className="rounded-md border border-subtle p-3"
                 captionLayout="dropdown"
                 selected={getDate(value)}
                 defaultMonth={getDate(value)}
diff --git a/apps/web/core/components/dropdowns/estimate.tsx b/apps/web/core/components/dropdowns/estimate.tsx
index 03a8ff6b7..c46c6c14e 100644
--- a/apps/web/core/components/dropdowns/estimate.tsx
+++ b/apps/web/core/components/dropdowns/estimate.tsx
@@ -1,13 +1,18 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { ReactNode } from "react";
 import { useRef, useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 import { usePopper } from "react-popper";
-import { Check, Search } from "lucide-react";
 import { Combobox } from "@headlessui/react";
 // plane imports
 import { useTranslation } from "@plane/i18n";
-import { EstimatePropertyIcon, ChevronDownIcon } from "@plane/propel/icons";
+import { CheckIcon, SearchIcon, EstimatePropertyIcon, ChevronDownIcon } from "@plane/propel/icons";
 import { EEstimateSystem } from "@plane/types";
 import { ComboDropDown } from "@plane/ui";
 import { convertMinutesToHoursMinutesString, cn } from "@plane/utils";
@@ -173,7 +178,7 @@ export const EstimateDropdown = observer(function EstimateDropdown(props: Props)
           className={cn(
             "clickable block h-full max-w-full outline-none",
             {
-              "cursor-not-allowed text-custom-text-200": disabled,
+              "cursor-not-allowed text-secondary": disabled,
               "cursor-pointer": !disabled,
             },
             buttonContainerClassName
@@ -192,12 +197,16 @@ export const EstimateDropdown = observer(function EstimateDropdown(props: Props)
           >
             {!hideIcon && <EstimatePropertyIcon className="h-3 w-3 flex-shrink-0" />}
             {(selectedEstimate || placeholder) && BUTTON_VARIANTS_WITH_TEXT.includes(buttonVariant) && (
-              <span className="flex-grow truncate">
-                {selectedEstimate
-                  ? currentActiveEstimate?.type === EEstimateSystem.TIME
-                    ? convertMinutesToHoursMinutesString(Number(selectedEstimate.value))
-                    : selectedEstimate.value
-                  : placeholder}
+              <span className="truncate">
+                {selectedEstimate ? (
+                  currentActiveEstimate?.type === EEstimateSystem.TIME ? (
+                    convertMinutesToHoursMinutesString(Number(selectedEstimate.value))
+                  ) : (
+                    selectedEstimate.value
+                  )
+                ) : (
+                  <span className="text-placeholder">{placeholder}</span>
+                )}
               </span>
             )}
             {dropdownArrow && (
@@ -225,17 +234,17 @@ export const EstimateDropdown = observer(function EstimateDropdown(props: Props)
       {isOpen && (
         <Combobox.Options className="fixed z-10" static>
           <div
-            className="my-1 w-48 rounded border-[0.5px] border-custom-border-300 bg-custom-background-100 px-2 py-2.5 text-xs shadow-custom-shadow-rg focus:outline-none"
+            className="my-1 w-48 rounded-sm border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 text-11 shadow-raised-200 focus:outline-none"
             ref={setPopperElement}
             style={styles.popper}
             {...attributes.popper}
           >
-            <div className="flex items-center gap-1.5 rounded border border-custom-border-100 bg-custom-background-90 px-2">
-              <Search className="h-3.5 w-3.5 text-custom-text-400" strokeWidth={1.5} />
+            <div className="flex items-center gap-1.5 rounded-sm border border-subtle bg-surface-2 px-2">
+              <SearchIcon className="h-3.5 w-3.5 text-placeholder" strokeWidth={1.5} />
               <Combobox.Input
                 as="input"
                 ref={inputRef}
-                className="w-full bg-transparent py-1 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
+                className="w-full bg-transparent py-1 text-11 text-secondary placeholder:text-placeholder focus:outline-none"
                 value={query}
                 onChange={(e) => setQuery(e.target.value)}
                 placeholder={t("common.search.placeholder")}
@@ -246,10 +255,10 @@ export const EstimateDropdown = observer(function EstimateDropdown(props: Props)
             <div className="mt-2 max-h-48 space-y-1 overflow-y-scroll">
               {currentActiveEstimateId === undefined ? (
                 <div
-                  className={`flex w-full cursor-pointer select-none items-center justify-between gap-2 truncate rounded px-1 py-1.5 text-custom-text-200`}
+                  className={`flex w-full cursor-pointer items-center justify-between gap-2 truncate rounded-sm px-1 py-1.5 text-secondary select-none`}
                 >
                   {/* NOTE: This condition renders when estimates are not enabled for the project */}
-                  <div className="flex-grow flex items-center gap-2">
+                  <div className="flex flex-grow items-center gap-2">
                     <EstimatePropertyIcon className="h-3 w-3 flex-shrink-0" />
                     <span className="flex-grow truncate">{t("project_settings.estimates.no_estimate")}</span>
                   </div>
@@ -263,27 +272,25 @@ export const EstimateDropdown = observer(function EstimateDropdown(props: Props)
                           {({ active, selected }) => (
                             <div
                               className={cn(
-                                "flex w-full cursor-pointer select-none items-center justify-between gap-2 truncate rounded px-1 py-1.5",
+                                "flex w-full cursor-pointer items-center justify-between gap-2 truncate rounded-sm px-1 py-1.5 select-none",
                                 {
-                                  "bg-custom-background-80": active,
-                                  "text-custom-text-100": selected,
-                                  "text-custom-text-200": !selected,
+                                  "bg-layer-transparent-hover": active,
+                                  "text-primary": selected,
+                                  "text-secondary": !selected,
                                 }
                               )}
                             >
                               <span className="flex-grow truncate">{option.content}</span>
-                              {selected && <Check className="h-3.5 w-3.5 flex-shrink-0" />}
+                              {selected && <CheckIcon className="h-3.5 w-3.5 flex-shrink-0" />}
                             </div>
                           )}
                         </Combobox.Option>
                       ))
                     ) : (
-                      <p className="px-1.5 py-1 italic text-custom-text-400">
-                        {t("common.search.no_matching_results")}
-                      </p>
+                      <p className="px-1.5 py-1 text-placeholder italic">{t("common.search.no_matching_results")}</p>
                     )
                   ) : (
-                    <p className="px-1.5 py-1 italic text-custom-text-400">{t("common.loading")}</p>
+                    <p className="px-1.5 py-1 text-placeholder italic">{t("common.loading")}</p>
                   )}
                 </>
               )}
diff --git a/apps/web/core/components/dropdowns/intake-state/base.tsx b/apps/web/core/components/dropdowns/intake-state/base.tsx
index 76f79d24b..1dbf7bc2f 100644
--- a/apps/web/core/components/dropdowns/intake-state/base.tsx
+++ b/apps/web/core/components/dropdowns/intake-state/base.tsx
@@ -1,12 +1,17 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { ReactNode } from "react";
 import { useRef, useState } from "react";
 import { observer } from "mobx-react";
 import { usePopper } from "react-popper";
-import { Search } from "lucide-react";
 import { Combobox } from "@headlessui/react";
 // plane imports
 import { useTranslation } from "@plane/i18n";
-import { IntakeStateGroupIcon, ChevronDownIcon } from "@plane/propel/icons";
+import { SearchIcon, IntakeStateGroupIcon, ChevronDownIcon } from "@plane/propel/icons";
 import type { IIntakeState } from "@plane/types";
 import { ComboDropDown, Spinner } from "@plane/ui";
 import { cn } from "@plane/utils";
@@ -151,7 +156,7 @@ export const WorkItemStateDropdownBase = observer(function WorkItemStateDropdown
           className={cn(
             "clickable block h-full max-w-full outline-none",
             {
-              "cursor-not-allowed text-custom-text-200": disabled,
+              "cursor-not-allowed text-secondary": disabled,
               "cursor-pointer": !disabled,
             },
             buttonContainerClassName
@@ -175,7 +180,7 @@ export const WorkItemStateDropdownBase = observer(function WorkItemStateDropdown
                 {!hideIcon && (
                   <IntakeStateGroupIcon
                     stateGroup={selectedState?.group ?? "triage"}
-                    color={selectedState?.color ?? "rgba(var(--color-text-300))"}
+                    color={selectedState?.color ?? "var(--text-color-tertiary)"}
                     className={cn("flex-shrink-0", iconSize)}
                   />
                 )}
@@ -211,17 +216,17 @@ export const WorkItemStateDropdownBase = observer(function WorkItemStateDropdown
       {isOpen && (
         <Combobox.Options className="fixed z-10" static>
           <div
-            className="my-1 w-48 rounded border-[0.5px] border-custom-border-300 bg-custom-background-100 px-2 py-2.5 text-xs shadow-custom-shadow-rg focus:outline-none"
+            className="my-1 w-48 rounded-sm border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 text-11 shadow-raised-200 focus:outline-none"
             ref={setPopperElement}
             style={styles.popper}
             {...attributes.popper}
           >
-            <div className="flex items-center gap-1.5 rounded border border-custom-border-100 bg-custom-background-90 px-2">
-              <Search className="h-3.5 w-3.5 text-custom-text-400" strokeWidth={1.5} />
+            <div className="flex items-center gap-1.5 rounded-sm border border-subtle bg-surface-2 px-2">
+              <SearchIcon className="h-3.5 w-3.5 text-placeholder" strokeWidth={1.5} />
               <Combobox.Input
                 as="input"
                 ref={inputRef}
-                className="w-full bg-transparent py-1 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
+                className="w-full bg-transparent py-1 text-11 text-secondary placeholder:text-placeholder focus:outline-none"
                 value={query}
                 onChange={(e) => setQuery(e.target.value)}
                 placeholder={t("common.search.label")}
@@ -238,14 +243,14 @@ export const WorkItemStateDropdownBase = observer(function WorkItemStateDropdown
                       key={option.value}
                       option={option}
                       selectedValue={value}
-                      className="flex w-full cursor-pointer select-none items-center justify-between gap-2 truncate rounded px-1 py-1.5"
+                      className="flex w-full cursor-pointer items-center justify-between gap-2 truncate rounded-sm px-1 py-1.5 select-none"
                     />
                   ))
                 ) : (
-                  <p className="px-1.5 py-1 italic text-custom-text-400">{t("no_matching_results")}</p>
+                  <p className="px-1.5 py-1 text-placeholder italic">{t("no_matching_results")}</p>
                 )
               ) : (
-                <p className="px-1.5 py-1 italic text-custom-text-400">{t("loading")}</p>
+                <p className="px-1.5 py-1 text-placeholder italic">{t("loading")}</p>
               )}
             </div>
           </div>
diff --git a/apps/web/core/components/dropdowns/intake-state/dropdown.tsx b/apps/web/core/components/dropdowns/intake-state/dropdown.tsx
index 2a0e41988..a9220ee7a 100644
--- a/apps/web/core/components/dropdowns/intake-state/dropdown.tsx
+++ b/apps/web/core/components/dropdowns/intake-state/dropdown.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
diff --git a/apps/web/core/components/dropdowns/layout.tsx b/apps/web/core/components/dropdowns/layout.tsx
index 07f581711..23ecf0a4e 100644
--- a/apps/web/core/components/dropdowns/layout.tsx
+++ b/apps/web/core/components/dropdowns/layout.tsx
@@ -1,14 +1,21 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useCallback, useMemo } from "react";
 import { observer } from "mobx-react";
-import { Check } from "lucide-react";
 // plane imports
 import { ISSUE_LAYOUT_MAP } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
+import { CheckIcon } from "@plane/propel/icons";
 import { EIssueLayoutTypes } from "@plane/types";
 import { Dropdown } from "@plane/ui";
 import { cn } from "@plane/utils";
 // components
 import { IssueLayoutIcon } from "@/components/issues/issue-layouts/layout-icon";
+import { getIconButtonStyling } from "@plane/propel/icon-button";
 
 type TLayoutDropDown = {
   onChange: (value: EIssueLayoutTypes) => void;
@@ -38,9 +45,9 @@ export const LayoutDropDown = observer(function LayoutDropDown(props: TLayoutDro
   const buttonContent = useCallback((isOpen: boolean, buttonValue: string | string[] | undefined) => {
     const dropdownValue = ISSUE_LAYOUT_MAP[buttonValue as EIssueLayoutTypes];
     return (
-      <div className="flex gap-2 items-center text-custom-text-200">
-        <IssueLayoutIcon layout={dropdownValue.key} strokeWidth={2} className={`size-3.5 text-custom-text-200`} />
-        <span className="font-medium text-xs">{t(dropdownValue.i18n_label)}</span>
+      <div className="flex items-center gap-2 text-secondary">
+        <IssueLayoutIcon layout={dropdownValue.key} strokeWidth={2} className={`size-3.5 text-secondary`} />
+        <span className="text-11 font-medium">{t(dropdownValue.i18n_label)}</span>
       </div>
     );
   }, []);
@@ -49,12 +56,12 @@ export const LayoutDropDown = observer(function LayoutDropDown(props: TLayoutDro
     const dropdownValue = ISSUE_LAYOUT_MAP[props.value as EIssueLayoutTypes];
 
     return (
-      <div className={cn("flex gap-2 items-center text-custom-text-200 w-full justify-between")}>
-        <div className="flex gap-2 items-center">
-          <IssueLayoutIcon layout={dropdownValue.key} strokeWidth={2} className={`size-3 text-custom-text-200`} />
-          <span className="font-medium text-xs">{t(dropdownValue.i18n_label)}</span>
+      <div className={cn("flex w-full items-center justify-between gap-2 text-secondary")}>
+        <div className="flex items-center gap-2">
+          <IssueLayoutIcon layout={dropdownValue.key} strokeWidth={2} className={`size-3 text-secondary`} />
+          <span className="text-11 font-medium">{t(dropdownValue.i18n_label)}</span>
         </div>
-        {props.selected && <Check className="h-3.5 w-3.5 flex-shrink-0" />}
+        {props.selected && <CheckIcon className="h-3.5 w-3.5 flex-shrink-0" />}
       </div>
     );
   }, []);
@@ -67,7 +74,7 @@ export const LayoutDropDown = observer(function LayoutDropDown(props: TLayoutDro
       value={value?.toString()}
       keyExtractor={keyExtractor}
       options={options}
-      buttonContainerClassName="bg-custom-background-100 border border-custom-border-200 hover:bg-custom-background-90 focus:text-custom-text-300 focus:bg-custom-background-90 px-2 py-1.5  rounded flex items-center gap-1.5 whitespace-nowrap transition-all justify-center relative"
+      buttonContainerClassName={cn(getIconButtonStyling("secondary", "lg"), "w-auto px-2")}
       buttonContent={buttonContent}
       renderItem={itemContent}
       disableSearch
diff --git a/apps/web/core/components/dropdowns/member/avatar.tsx b/apps/web/core/components/dropdowns/member/avatar.tsx
index 3ca658c81..82bc2e0c5 100644
--- a/apps/web/core/components/dropdowns/member/avatar.tsx
+++ b/apps/web/core/components/dropdowns/member/avatar.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import type { LucideIcon } from "lucide-react";
 import { MembersPropertyIcon } from "@plane/propel/icons";
@@ -50,6 +56,6 @@ export const ButtonAvatars = observer(function ButtonAvatars(props: AvatarProps)
   return Icon ? (
     <Icon className="h-3 w-3 flex-shrink-0" />
   ) : (
-    <MembersPropertyIcon className={cn("h-3 w-3 mx-[4px] flex-shrink-0")} />
+    <MembersPropertyIcon className={cn("mx-[4px] h-3 w-3 flex-shrink-0")} />
   );
 });
diff --git a/apps/web/core/components/dropdowns/member/base.tsx b/apps/web/core/components/dropdowns/member/base.tsx
index b783ff396..577e60a78 100644
--- a/apps/web/core/components/dropdowns/member/base.tsx
+++ b/apps/web/core/components/dropdowns/member/base.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useRef, useState } from "react";
 import { observer } from "mobx-react";
 import type { LucideIcon } from "lucide-react";
@@ -122,7 +128,7 @@ export const MemberDropdownBase = observer(function MemberDropdownBase(props: TM
           className={cn(
             "clickable block h-full max-w-full outline-none",
             {
-              "cursor-not-allowed text-custom-text-200": disabled,
+              "cursor-not-allowed text-secondary": disabled,
               "cursor-pointer": !disabled,
             },
             buttonContainerClassName
@@ -132,7 +138,7 @@ export const MemberDropdownBase = observer(function MemberDropdownBase(props: TM
           tabIndex={tabIndex}
         >
           <DropdownButton
-            className={cn("text-xs", buttonClassName)}
+            className={cn("text-11", buttonClassName)}
             isActive={isOpen}
             tooltipHeading={placeholder}
             tooltipContent={
@@ -144,7 +150,7 @@ export const MemberDropdownBase = observer(function MemberDropdownBase(props: TM
           >
             {!hideIcon && <ButtonAvatars showTooltip={showTooltip} userIds={value} icon={icon} />}
             {BUTTON_VARIANTS_WITH_TEXT.includes(buttonVariant) && (
-              <span className="flex-grow truncate leading-5">
+              <span className="flex-grow truncate text-left text-body-xs-medium leading-5">
                 {getDisplayName(value, showUserDetails, placeholder)}
               </span>
             )}
@@ -177,6 +183,7 @@ export const MemberDropdownBase = observer(function MemberDropdownBase(props: TM
           optionsClassName={optionsClassName}
           placement={placement}
           referenceElement={referenceElement}
+          value={value}
         />
       )}
     </ComboDropDown>
diff --git a/apps/web/core/components/dropdowns/member/dropdown.tsx b/apps/web/core/components/dropdowns/member/dropdown.tsx
index b573bc074..2ab8e5c35 100644
--- a/apps/web/core/components/dropdowns/member/dropdown.tsx
+++ b/apps/web/core/components/dropdowns/member/dropdown.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 import type { LucideIcon } from "lucide-react";
diff --git a/apps/web/core/components/dropdowns/member/member-options.tsx b/apps/web/core/components/dropdowns/member/member-options.tsx
index ffc98b3e8..6fb5b03e7 100644
--- a/apps/web/core/components/dropdowns/member/member-options.tsx
+++ b/apps/web/core/components/dropdowns/member/member-options.tsx
@@ -1,18 +1,23 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useEffect, useRef, useState } from "react";
 import type { Placement } from "@popperjs/core";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 import { createPortal } from "react-dom";
 import { usePopper } from "react-popper";
-import { Check, Search } from "lucide-react";
 import { Combobox } from "@headlessui/react";
 // plane imports
 import { useTranslation } from "@plane/i18n";
-import { SuspendedUserIcon } from "@plane/propel/icons";
+import { CheckIcon, SearchIcon, SuspendedUserIcon } from "@plane/propel/icons";
 import { EPillSize, EPillVariant, Pill } from "@plane/propel/pill";
 import type { IUserLite } from "@plane/types";
 import { Avatar } from "@plane/ui";
-import { cn, getFileURL } from "@plane/utils";
+import { cn, getFileURL, sortByCurrentUserThenSelected } from "@plane/utils";
 // hooks
 import { useMember } from "@/hooks/store/use-member";
 import { useUser } from "@/hooks/store/user";
@@ -27,6 +32,7 @@ interface Props {
   optionsClassName?: string;
   placement: Placement | undefined;
   referenceElement: HTMLButtonElement | null;
+  value?: string[] | string | null;
 }
 
 export const MemberOptions = observer(function MemberOptions(props: Props) {
@@ -38,6 +44,7 @@ export const MemberOptions = observer(function MemberOptions(props: Props) {
     optionsClassName = "",
     placement,
     referenceElement,
+    value,
   } = props;
   // router
   const { workspaceSlug } = useParams();
@@ -93,7 +100,7 @@ export const MemberOptions = observer(function MemberOptions(props: Props) {
           <div className="flex items-center gap-2">
             <div className="w-4">
               {isUserSuspended(userId, workspaceSlug?.toString()) ? (
-                <SuspendedUserIcon className="h-3.5 w-3.5 text-custom-text-400" />
+                <SuspendedUserIcon className="h-3.5 w-3.5 text-placeholder" />
               ) : (
                 <Avatar name={userDetails?.display_name} src={getFileURL(userDetails?.avatar_url ?? "")} />
               )}
@@ -101,7 +108,7 @@ export const MemberOptions = observer(function MemberOptions(props: Props) {
             <span
               className={cn(
                 "flex-grow truncate",
-                isUserSuspended(userId, workspaceSlug?.toString()) ? "text-custom-text-400" : ""
+                isUserSuspended(userId, workspaceSlug?.toString()) ? "text-placeholder" : ""
               )}
             >
               {currentUser?.id === userId ? t("you") : userDetails?.display_name}
@@ -112,14 +119,17 @@ export const MemberOptions = observer(function MemberOptions(props: Props) {
     })
     .filter((o) => !!o);
 
-  const filteredOptions =
-    query === "" ? options : options?.filter((o) => o?.query.toLowerCase().includes(query.toLowerCase()));
+  const filteredOptions = sortByCurrentUserThenSelected(
+    query === "" ? options : options?.filter((o) => o?.query.toLowerCase().includes(query.toLowerCase())),
+    value,
+    currentUser?.id
+  );
 
   return createPortal(
     <Combobox.Options data-prevent-outside-click static>
       <div
         className={cn(
-          "my-1 w-48 rounded border-[0.5px] border-custom-border-300 bg-custom-background-100 px-2 py-2.5 text-xs shadow-custom-shadow-rg focus:outline-none z-30",
+          "z-30 my-1 w-48 rounded-sm border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 text-11 shadow-raised-200 focus:outline-none",
           optionsClassName
         )}
         ref={setPopperElement}
@@ -128,12 +138,12 @@ export const MemberOptions = observer(function MemberOptions(props: Props) {
         }}
         {...attributes.popper}
       >
-        <div className="flex items-center gap-1.5 rounded border border-custom-border-100 bg-custom-background-90 px-2">
-          <Search className="h-3.5 w-3.5 text-custom-text-400" strokeWidth={1.5} />
+        <div className="flex items-center gap-1.5 rounded-sm border border-subtle bg-surface-2 px-2">
+          <SearchIcon className="h-3.5 w-3.5 text-placeholder" strokeWidth={1.5} />
           <Combobox.Input
             as="input"
             ref={inputRef}
-            className="w-full bg-transparent py-1 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
+            className="w-full bg-transparent py-1 text-11 text-secondary placeholder:text-placeholder focus:outline-none"
             value={query}
             onChange={(e) => setQuery(e.target.value)}
             placeholder={t("search")}
@@ -152,9 +162,9 @@ export const MemberOptions = observer(function MemberOptions(props: Props) {
                       value={option.value}
                       className={({ active, selected }) =>
                         cn(
-                          "flex w-full select-none items-center justify-between gap-2 truncate rounded px-1 py-1.5",
-                          active && "bg-custom-background-80",
-                          selected ? "text-custom-text-100" : "text-custom-text-200",
+                          "flex w-full items-center justify-between gap-2 truncate rounded-sm px-1 py-1.5 select-none",
+                          active && "bg-layer-transparent-hover",
+                          selected ? "text-primary" : "text-secondary",
                           isUserSuspended(option.value, workspaceSlug?.toString())
                             ? "cursor-not-allowed"
                             : "cursor-pointer"
@@ -165,7 +175,7 @@ export const MemberOptions = observer(function MemberOptions(props: Props) {
                       {({ selected }) => (
                         <>
                           <span className="flex-grow truncate">{option.content}</span>
-                          {selected && <Check className="h-3.5 w-3.5 flex-shrink-0" />}
+                          {selected && <CheckIcon className="h-3.5 w-3.5 flex-shrink-0" />}
                           {isUserSuspended(option.value, workspaceSlug?.toString()) && (
                             <Pill variant={EPillVariant.DEFAULT} size={EPillSize.XS} className="border-none">
                               Suspended
@@ -177,10 +187,10 @@ export const MemberOptions = observer(function MemberOptions(props: Props) {
                   )
               )
             ) : (
-              <p className="px-1.5 py-1 italic text-custom-text-400">{t("no_matching_results")}</p>
+              <p className="px-1.5 py-1 text-placeholder italic">{t("no_matching_results")}</p>
             )
           ) : (
-            <p className="px-1.5 py-1 italic text-custom-text-400">{t("loading")}</p>
+            <p className="px-1.5 py-1 text-placeholder italic">{t("loading")}</p>
           )}
         </div>
       </div>
diff --git a/apps/web/core/components/dropdowns/merged-date.tsx b/apps/web/core/components/dropdowns/merged-date.tsx
index bbf337ac7..62966e5cb 100644
--- a/apps/web/core/components/dropdowns/merged-date.tsx
+++ b/apps/web/core/components/dropdowns/merged-date.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 import { observer } from "mobx-react";
 // helpers
diff --git a/apps/web/core/components/dropdowns/module/base.tsx b/apps/web/core/components/dropdowns/module/base.tsx
index d25c88aa1..6487e57ba 100644
--- a/apps/web/core/components/dropdowns/module/base.tsx
+++ b/apps/web/core/components/dropdowns/module/base.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { ReactNode } from "react";
 import { useEffect, useRef, useState } from "react";
 import { observer } from "mobx-react";
@@ -111,10 +117,7 @@ export const ModuleDropdownBase = observer(function ModuleDropdownBase(props: TM
         <button
           ref={setReferenceElement}
           type="button"
-          className={cn(
-            "clickable block h-full w-full outline-none hover:bg-custom-background-80",
-            buttonContainerClassName
-          )}
+          className={cn("clickable block h-full w-full outline-none hover:bg-layer-1", buttonContainerClassName)}
           onClick={handleOnClick}
           disabled={disabled}
           tabIndex={tabIndex}
@@ -126,9 +129,9 @@ export const ModuleDropdownBase = observer(function ModuleDropdownBase(props: TM
           ref={setReferenceElement}
           type="button"
           className={cn(
-            "clickable block h-full max-w-full outline-none hover:bg-custom-background-80",
+            "clickable block h-full max-w-full outline-none hover:bg-layer-1",
             {
-              "cursor-not-allowed text-custom-text-200": disabled,
+              "cursor-not-allowed text-secondary": disabled,
               "cursor-pointer": !disabled,
             },
             buttonContainerClassName
@@ -190,6 +193,7 @@ export const ModuleDropdownBase = observer(function ModuleDropdownBase(props: TM
           multiple={multiple}
           getModuleById={getModuleById}
           moduleIds={moduleIds}
+          value={value}
         />
       )}
     </ComboDropDown>
diff --git a/apps/web/core/components/dropdowns/module/button-content.tsx b/apps/web/core/components/dropdowns/module/button-content.tsx
index c90bda211..dcf27dcad 100644
--- a/apps/web/core/components/dropdowns/module/button-content.tsx
+++ b/apps/web/core/components/dropdowns/module/button-content.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // plane imports
 import { CloseIcon, ModuleIcon, ChevronDownIcon } from "@plane/propel/icons";
 import { Tooltip } from "@plane/propel/tooltip";
@@ -42,10 +48,10 @@ export function ModuleButtonContent(props: ModuleButtonContentProps) {
     return (
       <>
         {showCount ? (
-          <div className="relative flex items-center max-w-full gap-1">
+          <div className="relative flex max-w-full items-center gap-1">
             {!hideIcon && <ModuleIcon className="h-3 w-3 flex-shrink-0" />}
             {(value.length > 0 || !!placeholder) && (
-              <div className="max-w-40 flex-grow truncate">
+              <div className="max-w-40 truncate">
                 {value.length > 0
                   ? value.length === 1
                     ? `${getModuleById(value[0])?.name || "module"}`
@@ -55,14 +61,14 @@ export function ModuleButtonContent(props: ModuleButtonContentProps) {
             )}
           </div>
         ) : value.length > 0 ? (
-          <div className="flex max-w-full flex-grow flex-wrap items-center gap-2 truncate py-0.5 ">
+          <div className="flex max-w-full flex-grow flex-wrap items-center gap-2 truncate py-0.5">
             {value.map((moduleId) => {
               const moduleDetails = getModuleById(moduleId);
               return (
                 <div
                   key={moduleId}
                   className={cn(
-                    "flex max-w-full items-center gap-1 rounded bg-custom-background-80 py-1 text-custom-text-200",
+                    "flex max-w-full items-center gap-1 rounded-sm bg-layer-1 py-1 text-secondary",
                     className
                   )}
                 >
@@ -75,7 +81,7 @@ export function ModuleButtonContent(props: ModuleButtonContentProps) {
                       isMobile={isMobile}
                       renderByDefault={false}
                     >
-                      <span className="max-w-40 flex-grow truncate text-xs font-medium">{moduleDetails?.name}</span>
+                      <span className="max-w-40 truncate text-11 font-medium">{moduleDetails?.name}</span>
                     </Tooltip>
                   )}
                   {!disabled && (
@@ -93,7 +99,7 @@ export function ModuleButtonContent(props: ModuleButtonContentProps) {
                           onChange(newModuleIds);
                         }}
                       >
-                        <CloseIcon className="h-2.5 w-2.5 text-custom-text-300 hover:text-red-500" />
+                        <CloseIcon className="h-2.5 w-2.5 text-tertiary hover:text-danger-primary" />
                       </button>
                     </Tooltip>
                   )}
diff --git a/apps/web/core/components/dropdowns/module/dropdown.tsx b/apps/web/core/components/dropdowns/module/dropdown.tsx
index 40fad645d..5a8f94811 100644
--- a/apps/web/core/components/dropdowns/module/dropdown.tsx
+++ b/apps/web/core/components/dropdowns/module/dropdown.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { ReactNode } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
diff --git a/apps/web/core/components/dropdowns/module/module-options.tsx b/apps/web/core/components/dropdowns/module/module-options.tsx
index 68a4c064a..8c4098f9f 100644
--- a/apps/web/core/components/dropdowns/module/module-options.tsx
+++ b/apps/web/core/components/dropdowns/module/module-options.tsx
@@ -1,14 +1,19 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useEffect, useRef, useState } from "react";
 import type { Placement } from "@popperjs/core";
 import { observer } from "mobx-react";
 import { usePopper } from "react-popper";
-import { Check, Search } from "lucide-react";
 import { Combobox } from "@headlessui/react";
 // plane imports
 import { useTranslation } from "@plane/i18n";
-import { ModuleIcon } from "@plane/propel/icons";
+import { CheckIcon, SearchIcon, ModuleIcon } from "@plane/propel/icons";
 import type { IModule } from "@plane/types";
-import { cn } from "@plane/utils";
+import { cn, sortBySelectedFirst } from "@plane/utils";
 // hooks
 import { usePlatformOS } from "@/hooks/use-platform-os";
 
@@ -28,10 +33,11 @@ interface Props {
   onDropdownOpen?: () => void;
   placement: Placement | undefined;
   referenceElement: HTMLButtonElement | null;
+  value?: string[] | string | null;
 }
 
 export const ModuleOptions = observer(function ModuleOptions(props: Props) {
-  const { getModuleById, isOpen, moduleIds, multiple, onDropdownOpen, placement, referenceElement } = props;
+  const { getModuleById, isOpen, moduleIds, multiple, onDropdownOpen, placement, referenceElement, value } = props;
   // refs
   const inputRef = useRef<HTMLInputElement | null>(null);
   // states
@@ -101,23 +107,25 @@ export const ModuleOptions = observer(function ModuleOptions(props: Props) {
       ),
     });
 
-  const filteredOptions =
-    query === "" ? options : options?.filter((o) => o.query.toLowerCase().includes(query.toLowerCase()));
+  const filteredOptions = sortBySelectedFirst(
+    query === "" ? options : options?.filter((o) => o.query.toLowerCase().includes(query.toLowerCase())),
+    value
+  );
 
   return (
     <Combobox.Options className="fixed z-10" static>
       <div
-        className="my-1 w-48 rounded border-[0.5px] border-custom-border-300 bg-custom-background-100 px-2 py-2.5 text-xs shadow-custom-shadow-rg focus:outline-none"
+        className="my-1 w-48 rounded-sm border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 text-11 shadow-raised-200 focus:outline-none"
         ref={setPopperElement}
         style={styles.popper}
         {...attributes.popper}
       >
-        <div className="flex items-center gap-1.5 rounded border border-custom-border-100 bg-custom-background-90 px-2">
-          <Search className="h-3.5 w-3.5 text-custom-text-400" strokeWidth={1.5} />
+        <div className="flex items-center gap-1.5 rounded-sm border border-subtle bg-surface-2 px-2">
+          <SearchIcon className="h-3.5 w-3.5 text-placeholder" strokeWidth={1.5} />
           <Combobox.Input
             as="input"
             ref={inputRef}
-            className="w-full bg-transparent py-1 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
+            className="w-full bg-transparent py-1 text-11 text-secondary placeholder:text-placeholder focus:outline-none"
             value={query}
             onChange={(e) => setQuery(e.target.value)}
             placeholder={t("common.search.label")}
@@ -134,11 +142,11 @@ export const ModuleOptions = observer(function ModuleOptions(props: Props) {
                   value={option.value}
                   className={({ active, selected }) =>
                     cn(
-                      "flex w-full cursor-pointer select-none items-center justify-between gap-2 truncate rounded px-1 py-1.5",
+                      "flex w-full cursor-pointer items-center justify-between gap-2 truncate rounded-sm px-1 py-1.5 select-none",
                       {
-                        "bg-custom-background-80": active,
-                        "text-custom-text-100": selected,
-                        "text-custom-text-200": !selected,
+                        "bg-layer-transparent-hover": active,
+                        "text-primary": selected,
+                        "text-secondary": !selected,
                       }
                     )
                   }
@@ -146,16 +154,16 @@ export const ModuleOptions = observer(function ModuleOptions(props: Props) {
                   {({ selected }) => (
                     <>
                       <span className="flex-grow truncate">{option.content}</span>
-                      {selected && <Check className="h-3.5 w-3.5 flex-shrink-0" />}
+                      {selected && <CheckIcon className="h-3.5 w-3.5 flex-shrink-0" />}
                     </>
                   )}
                 </Combobox.Option>
               ))
             ) : (
-              <p className="px-1.5 py-1 italic text-custom-text-400">{t("common.search.no_matching_results")}</p>
+              <p className="px-1.5 py-1 text-placeholder italic">{t("common.search.no_matching_results")}</p>
             )
           ) : (
-            <p className="px-1.5 py-1 italic text-custom-text-400">{t("common.loading")}</p>
+            <p className="px-1.5 py-1 text-placeholder italic">{t("common.loading")}</p>
           )}
         </div>
       </div>
diff --git a/apps/web/core/components/dropdowns/priority.tsx b/apps/web/core/components/dropdowns/priority.tsx
index 881fde676..4cb9a0186 100644
--- a/apps/web/core/components/dropdowns/priority.tsx
+++ b/apps/web/core/components/dropdowns/priority.tsx
@@ -1,13 +1,18 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { ReactNode } from "react";
-import { Fragment, useRef, useState } from "react";
-import { useTheme } from "next-themes";
+import { useRef, useState } from "react";
 import { usePopper } from "react-popper";
-import { Check, Search, SignalHigh } from "lucide-react";
+import { SignalHigh } from "lucide-react";
 import { Combobox } from "@headlessui/react";
 import { ISSUE_PRIORITIES } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 // types
-import { PriorityIcon, ChevronDownIcon } from "@plane/propel/icons";
+import { CheckIcon, PriorityIcon, ChevronDownIcon, SearchIcon } from "@plane/propel/icons";
 import { Tooltip } from "@plane/propel/tooltip";
 import type { TIssuePriorities } from "@plane/types";
 // ui
@@ -64,11 +69,11 @@ function BorderButton(props: ButtonProps) {
   const priorityDetails = ISSUE_PRIORITIES.find((p) => p.key === priority);
 
   const priorityClasses = {
-    urgent: "bg-red-600/10 text-red-600 border-red-600 px-1",
-    high: "bg-orange-500/20 text-orange-950 border-orange-500",
-    medium: "bg-yellow-500/20 text-yellow-950 border-yellow-500",
-    low: "bg-custom-primary-100/20 text-custom-primary-950 border-custom-primary-100",
-    none: "hover:bg-custom-background-80 border-custom-border-300",
+    urgent: "bg-layer-2 border-priority-urgent px-1",
+    high: "bg-layer-2 border-priority-high",
+    medium: "bg-layer-2 border-priority-medium",
+    low: "bg-layer-2 border-priority-low",
+    none: "bg-layer-2 border-strong",
   };
 
   const { isMobile } = usePlatformOS();
@@ -84,13 +89,13 @@ function BorderButton(props: ButtonProps) {
     >
       <div
         className={cn(
-          "h-full flex items-center gap-1.5 border-[0.5px] rounded text-xs px-2 py-0.5",
+          "flex h-full items-center gap-1.5 rounded-sm border-[0.5px] px-2 py-0.5",
           priorityClasses[priority ?? "none"],
           {
             // compact the icons if text is hidden
             "px-0.5": hideText,
             // highlight the whole button if text is hidden and priority is urgent
-            "bg-red-600/10 border-red-600": priority === "urgent" && hideText && highlightUrgent,
+            "border-priority-urgent": priority === "urgent" && hideText && highlightUrgent,
           },
           className
         )}
@@ -100,8 +105,7 @@ function BorderButton(props: ButtonProps) {
             <div
               className={cn({
                 // highlight just the icon if text is visible and priority is urgent
-                "bg-red-600/20 p-0.5 rounded border border-red-600":
-                  priority === "urgent" && !hideText && highlightUrgent,
+                "rounded-sm border border-priority-urgent p-0.5": priority === "urgent" && !hideText && highlightUrgent,
               })}
             >
               <PriorityIcon
@@ -121,7 +125,16 @@ function BorderButton(props: ButtonProps) {
           ) : (
             <SignalHigh className="size-3" />
           ))}
-        {!hideText && <span className="flex-grow truncate">{priorityDetails?.title ?? placeholder}</span>}
+        {!hideText && (
+          <span
+            className={cn("flex-grow truncate text-body-xs-medium", {
+              "text-secondary": priority && priority !== "none",
+              "text-placeholder": !priority || priority === "none",
+            })}
+          >
+            {priorityDetails?.title ?? placeholder}
+          </span>
+        )}
         {dropdownArrow && (
           <ChevronDownIcon className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
         )}
@@ -147,11 +160,11 @@ function BackgroundButton(props: ButtonProps) {
   const priorityDetails = ISSUE_PRIORITIES.find((p) => p.key === priority);
 
   const priorityClasses = {
-    urgent: "bg-red-600/20 text-red-600",
-    high: "bg-orange-500/20 text-orange-950",
-    medium: "bg-yellow-500/20 text-yellow-950",
-    low: "bg-blue-500/20 text-blue-950",
-    none: "bg-custom-background-80",
+    urgent: "bg-layer-2",
+    high: "bg-layer-2",
+    medium: "bg-layer-2",
+    low: "bg-layer-2",
+    none: "bg-layer-2",
   };
 
   const { isMobile } = usePlatformOS();
@@ -167,13 +180,13 @@ function BackgroundButton(props: ButtonProps) {
     >
       <div
         className={cn(
-          "h-full flex items-center gap-1.5 rounded text-xs px-2 py-0.5",
+          "flex h-full items-center gap-1.5 rounded-sm px-2 py-0.5",
           priorityClasses[priority ?? "none"],
           {
             // compact the icons if text is hidden
             "px-0.5": hideText,
             // highlight the whole button if text is hidden and priority is urgent
-            "bg-red-600/10 border-red-600": priority === "urgent" && hideText && highlightUrgent,
+            "border-priority-urgent": priority === "urgent" && hideText && highlightUrgent,
           },
           className
         )}
@@ -183,8 +196,7 @@ function BackgroundButton(props: ButtonProps) {
             <div
               className={cn({
                 // highlight just the icon if text is visible and priority is urgent
-                "bg-red-600/20 p-0.5 rounded border border-red-600":
-                  priority === "urgent" && !hideText && highlightUrgent,
+                "rounded-sm border border-priority-urgent p-0.5": priority === "urgent" && !hideText && highlightUrgent,
               })}
             >
               <PriorityIcon
@@ -205,7 +217,14 @@ function BackgroundButton(props: ButtonProps) {
             <SignalHigh className="size-3" />
           ))}
         {!hideText && (
-          <span className="flex-grow truncate">{priorityDetails?.title ?? t("common.priority") ?? placeholder}</span>
+          <span
+            className={cn("flex-grow truncate text-body-xs-medium", {
+              "text-secondary": priority && priority !== "none",
+              "text-placeholder": !priority || priority === "none",
+            })}
+          >
+            {priorityDetails?.title ?? t("common.priority") ?? placeholder}
+          </span>
         )}
         {dropdownArrow && (
           <ChevronDownIcon className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
@@ -232,14 +251,6 @@ function TransparentButton(props: ButtonProps) {
 
   const priorityDetails = ISSUE_PRIORITIES.find((p) => p.key === priority);
 
-  const priorityClasses = {
-    urgent: "text-red-950",
-    high: "text-orange-950",
-    medium: "text-yellow-950",
-    low: "text-blue-950",
-    none: "hover:text-custom-text-300",
-  };
-
   const { isMobile } = usePlatformOS();
   const { t } = useTranslation();
 
@@ -253,14 +264,13 @@ function TransparentButton(props: ButtonProps) {
     >
       <div
         className={cn(
-          "h-full w-full flex items-center gap-1.5 rounded text-xs px-2 py-0.5 hover:bg-custom-background-80",
-          priorityClasses[priority ?? "none"],
+          "flex h-full w-full items-center gap-1.5 rounded-sm px-2 hover:bg-layer-transparent-hover",
           {
             // compact the icons if text is hidden
             "px-0.5": hideText,
             // highlight the whole button if text is hidden and priority is urgent
-            "bg-red-600/10 border-red-600": priority === "urgent" && hideText && highlightUrgent,
-            "bg-custom-background-80": isActive,
+            "border-priority-urgent": priority === "urgent" && hideText && highlightUrgent,
+            "bg-layer-1": isActive,
           },
           className
         )}
@@ -270,8 +280,7 @@ function TransparentButton(props: ButtonProps) {
             <div
               className={cn({
                 // highlight just the icon if text is visible and priority is urgent
-                "bg-red-600/20 p-0.5 rounded border border-red-600":
-                  priority === "urgent" && !hideText && highlightUrgent,
+                "rounded-sm border border-priority-urgent p-0.5": priority === "urgent" && !hideText && highlightUrgent,
               })}
             >
               <PriorityIcon
@@ -292,7 +301,14 @@ function TransparentButton(props: ButtonProps) {
             <SignalHigh className="size-3" />
           ))}
         {!hideText && (
-          <span className="flex-grow truncate">{priorityDetails?.title ?? t("common.priority") ?? placeholder}</span>
+          <span
+            className={cn("flex-grow truncate text-body-xs-medium", {
+              "text-secondary": priority && priority !== "none",
+              "text-placeholder": !priority || priority === "none",
+            })}
+          >
+            {priorityDetails?.title ?? t("common.priority") ?? placeholder}
+          </span>
         )}
         {dropdownArrow && (
           <ChevronDownIcon className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
@@ -347,10 +363,6 @@ export function PriorityDropdown(props: Props) {
     ],
   });
 
-  // next-themes
-  // TODO: remove this after new theming implementation
-  const { resolvedTheme } = useTheme();
-
   const options = ISSUE_PRIORITIES.map((priority) => ({
     value: priority.key,
     query: priority.key,
@@ -406,7 +418,7 @@ export function PriorityDropdown(props: Props) {
           className={cn(
             "clickable block h-full max-w-full outline-none",
             {
-              "cursor-not-allowed text-custom-text-200": disabled,
+              "cursor-not-allowed text-secondary": disabled,
               "cursor-pointer": !disabled,
             },
             buttonContainerClassName
@@ -417,9 +429,7 @@ export function PriorityDropdown(props: Props) {
         >
           <ButtonToRender
             priority={value ?? undefined}
-            className={cn(buttonClassName, {
-              "text-custom-text-200": resolvedTheme?.includes("dark") || resolvedTheme === "custom",
-            })}
+            className={buttonClassName}
             highlightUrgent={highlightUrgent}
             dropdownArrow={dropdownArrow && !disabled}
             dropdownArrowClassName={dropdownArrowClassName}
@@ -441,7 +451,7 @@ export function PriorityDropdown(props: Props) {
       className={cn(
         "h-full",
         {
-          "bg-custom-background-80": isOpen,
+          "bg-layer-1": isOpen,
         },
         className
       )}
@@ -455,17 +465,17 @@ export function PriorityDropdown(props: Props) {
       {isOpen && (
         <Combobox.Options className="fixed z-10" static>
           <div
-            className="my-1 w-48 rounded border-[0.5px] border-custom-border-300 bg-custom-background-100 px-2 py-2.5 text-xs shadow-custom-shadow-rg focus:outline-none"
+            className="my-1 w-48 rounded-sm border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 text-11 shadow-raised-200 focus:outline-none"
             ref={setPopperElement}
             style={styles.popper}
             {...attributes.popper}
           >
-            <div className="flex items-center gap-1.5 rounded border border-custom-border-100 bg-custom-background-90 px-2">
-              <Search className="h-3.5 w-3.5 text-custom-text-400" strokeWidth={1.5} />
+            <div className="flex items-center gap-1.5 rounded-sm border border-subtle bg-surface-2 px-2">
+              <SearchIcon className="h-3.5 w-3.5 text-placeholder" strokeWidth={1.5} />
               <Combobox.Input
                 as="input"
                 ref={inputRef}
-                className="w-full bg-transparent py-1 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
+                className="w-full bg-transparent py-1 text-11 text-secondary placeholder:text-placeholder focus:outline-none"
                 value={query}
                 onChange={(e) => setQuery(e.target.value)}
                 placeholder={t("search")}
@@ -480,21 +490,23 @@ export function PriorityDropdown(props: Props) {
                     key={option.value}
                     value={option.value}
                     className={({ active, selected }) =>
-                      `w-full truncate flex items-center justify-between gap-2 rounded px-1 py-1.5 cursor-pointer select-none ${
-                        active ? "bg-custom-background-80" : ""
-                      } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
+                      cn(
+                        `flex w-full cursor-pointer items-center justify-between gap-2 truncate rounded-sm px-1 py-1.5 select-none ${
+                          active ? "bg-layer-transparent-hover" : ""
+                        } ${selected ? "text-primary" : "text-secondary"}`
+                      )
                     }
                   >
                     {({ selected }) => (
                       <>
                         <span className="flex-grow truncate">{option.content}</span>
-                        {selected && <Check className="h-3.5 w-3.5 flex-shrink-0" />}
+                        {selected && <CheckIcon className="h-3.5 w-3.5 flex-shrink-0" />}
                       </>
                     )}
                   </Combobox.Option>
                 ))
               ) : (
-                <p className="text-custom-text-400 italic py-1 px-1.5">{t("no_matching_results")}</p>
+                <p className="px-1.5 py-1 text-placeholder italic">{t("no_matching_results")}</p>
               )}
             </div>
           </div>
diff --git a/apps/web/core/components/dropdowns/project/base.tsx b/apps/web/core/components/dropdowns/project/base.tsx
index 2488a3784..7c44c2982 100644
--- a/apps/web/core/components/dropdowns/project/base.tsx
+++ b/apps/web/core/components/dropdowns/project/base.tsx
@@ -1,15 +1,20 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { ReactNode } from "react";
 import { useRef, useState } from "react";
 import { observer } from "mobx-react";
 import { usePopper } from "react-popper";
-import { Check, Search } from "lucide-react";
 import { Combobox } from "@headlessui/react";
 // plane imports
 import { useTranslation } from "@plane/i18n";
 import { Logo } from "@plane/propel/emoji-icon-picker";
-import { ProjectIcon, ChevronDownIcon } from "@plane/propel/icons";
+import { CheckIcon, SearchIcon, ProjectIcon, ChevronDownIcon } from "@plane/propel/icons";
 import { ComboDropDown } from "@plane/ui";
-import { cn } from "@plane/utils";
+import { cn, sortBySelectedFirst } from "@plane/utils";
 // components
 // hooks
 import { useDropdown } from "@/hooks/use-dropdown";
@@ -101,7 +106,7 @@ export const ProjectDropdownBase = observer(function ProjectDropdownBase(props:
       content: (
         <div className="flex items-center gap-2">
           {projectDetails?.logo_props && (
-            <span className="grid place-items-center flex-shrink-0 h-4 w-4">
+            <span className="grid h-4 w-4 flex-shrink-0 place-items-center">
               <Logo logo={projectDetails?.logo_props} size={12} />
             </span>
           )}
@@ -111,10 +116,13 @@ export const ProjectDropdownBase = observer(function ProjectDropdownBase(props:
     };
   });
 
-  const filteredOptions =
-    query === ""
+  const filteredOptions = sortBySelectedFirst(
+    (query === ""
       ? options?.filter((o) => o?.value !== currentProjectId)
-      : options?.filter((o) => o?.value !== currentProjectId && o?.query.toLowerCase().includes(query.toLowerCase()));
+      : options?.filter((o) => o?.value !== currentProjectId && o?.query.toLowerCase().includes(query.toLowerCase()))
+    )?.filter((o): o is NonNullable<typeof o> => o !== undefined),
+    value
+  );
 
   const { handleClose, handleKeyDown, handleOnClick, searchInputKeyDown } = useDropdown({
     dropdownRef,
@@ -142,7 +150,7 @@ export const ProjectDropdownBase = observer(function ProjectDropdownBase(props:
 
   const getProjectIcon = (value: string | string[] | null) => {
     const renderIcon = (logoProps: TProject["logo_props"]) => (
-      <span className="grid place-items-center flex-shrink-0 h-4 w-4">
+      <span className="grid h-4 w-4 flex-shrink-0 place-items-center">
         <Logo logo={logoProps} size={14} />
       </span>
     );
@@ -156,7 +164,7 @@ export const ProjectDropdownBase = observer(function ProjectDropdownBase(props:
               return projectDetails?.logo_props ? renderIcon(projectDetails.logo_props) : null;
             })
           ) : (
-            <ProjectIcon className="size-3 text-custom-text-300" />
+            <ProjectIcon className="size-3 text-tertiary" />
           )}
         </div>
       );
@@ -185,7 +193,7 @@ export const ProjectDropdownBase = observer(function ProjectDropdownBase(props:
           className={cn(
             "clickable block h-full max-w-full outline-none",
             {
-              "cursor-not-allowed text-custom-text-200": disabled,
+              "cursor-not-allowed text-secondary": disabled,
               "cursor-pointer": !disabled,
             },
             buttonContainerClassName
@@ -204,7 +212,7 @@ export const ProjectDropdownBase = observer(function ProjectDropdownBase(props:
           >
             {!hideIcon && getProjectIcon(value)}
             {BUTTON_VARIANTS_WITH_TEXT.includes(buttonVariant) && (
-              <span className="truncate max-w-40">{getDisplayName(value, placeholder)}</span>
+              <span className="max-w-40 truncate">{getDisplayName(value, placeholder)}</span>
             )}
             {dropdownArrow && (
               <ChevronDownIcon className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
@@ -232,17 +240,17 @@ export const ProjectDropdownBase = observer(function ProjectDropdownBase(props:
       {isOpen && (
         <Combobox.Options className="fixed z-10" static>
           <div
-            className="my-1 w-48 rounded border-[0.5px] border-custom-border-300 bg-custom-background-100 px-2 py-2.5 text-xs shadow-custom-shadow-rg focus:outline-none"
+            className="my-1 w-48 rounded-sm border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 text-11 shadow-raised-200 focus:outline-none"
             ref={setPopperElement}
             style={styles.popper}
             {...attributes.popper}
           >
-            <div className="flex items-center gap-1.5 rounded border border-custom-border-100 bg-custom-background-90 px-2">
-              <Search className="h-3.5 w-3.5 text-custom-text-400" strokeWidth={1.5} />
+            <div className="flex items-center gap-1.5 rounded-sm border border-subtle bg-surface-2 px-2">
+              <SearchIcon className="h-3.5 w-3.5 text-placeholder" strokeWidth={1.5} />
               <Combobox.Input
                 as="input"
                 ref={inputRef}
-                className="w-full bg-transparent py-1 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
+                className="w-full bg-transparent py-1 text-11 text-secondary placeholder:text-placeholder focus:outline-none"
                 value={query}
                 onChange={(e) => setQuery(e.target.value)}
                 placeholder={t("search")}
@@ -260,25 +268,25 @@ export const ProjectDropdownBase = observer(function ProjectDropdownBase(props:
                         key={option.value}
                         value={option.value}
                         className={({ active, selected }) =>
-                          `w-full truncate flex items-center justify-between gap-2 rounded px-1 py-1.5 cursor-pointer select-none ${
-                            active ? "bg-custom-background-80" : ""
-                          } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
+                          `flex w-full cursor-pointer items-center justify-between gap-2 truncate rounded-sm px-1 py-1.5 select-none ${
+                            active ? "bg-layer-transparent-hover" : ""
+                          } ${selected ? "text-primary" : "text-secondary"}`
                         }
                       >
                         {({ selected }) => (
                           <>
                             <span className="flex-grow truncate">{option.content}</span>
-                            {selected && <Check className="h-3.5 w-3.5 flex-shrink-0" />}
+                            {selected && <CheckIcon className="h-3.5 w-3.5 flex-shrink-0" />}
                           </>
                         )}
                       </Combobox.Option>
                     );
                   })
                 ) : (
-                  <p className="text-custom-text-400 italic py-1 px-1.5">{t("no_matching_results")}</p>
+                  <p className="px-1.5 py-1 text-placeholder italic">{t("no_matching_results")}</p>
                 )
               ) : (
-                <p className="text-custom-text-400 italic py-1 px-1.5">{t("loading")}</p>
+                <p className="px-1.5 py-1 text-placeholder italic">{t("loading")}</p>
               )}
             </div>
           </div>
diff --git a/apps/web/core/components/dropdowns/project/dropdown.tsx b/apps/web/core/components/dropdowns/project/dropdown.tsx
index 1d5933052..165f734db 100644
--- a/apps/web/core/components/dropdowns/project/dropdown.tsx
+++ b/apps/web/core/components/dropdowns/project/dropdown.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { ReactNode } from "react";
 import { observer } from "mobx-react";
 // hooks
diff --git a/apps/web/core/components/dropdowns/state/base.tsx b/apps/web/core/components/dropdowns/state/base.tsx
index db0849e64..132388611 100644
--- a/apps/web/core/components/dropdowns/state/base.tsx
+++ b/apps/web/core/components/dropdowns/state/base.tsx
@@ -1,12 +1,17 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { ReactNode } from "react";
 import { useRef, useState } from "react";
 import { observer } from "mobx-react";
 import { usePopper } from "react-popper";
-import { Search } from "lucide-react";
 import { Combobox } from "@headlessui/react";
 // plane imports
 import { useTranslation } from "@plane/i18n";
-import { StateGroupIcon, ChevronDownIcon } from "@plane/propel/icons";
+import { SearchIcon, StateGroupIcon, ChevronDownIcon } from "@plane/propel/icons";
 import type { IState } from "@plane/types";
 import { ComboDropDown, Spinner } from "@plane/ui";
 import { cn } from "@plane/utils";
@@ -152,7 +157,7 @@ export const WorkItemStateDropdownBase = observer(function WorkItemStateDropdown
           className={cn(
             "clickable block h-full max-w-full outline-none",
             {
-              "cursor-not-allowed text-custom-text-200": disabled,
+              "cursor-not-allowed text-secondary": disabled,
               "cursor-pointer": !disabled,
             },
             buttonContainerClassName
@@ -176,7 +181,7 @@ export const WorkItemStateDropdownBase = observer(function WorkItemStateDropdown
                 {!hideIcon && (
                   <StateGroupIcon
                     stateGroup={selectedState?.group ?? "backlog"}
-                    color={selectedState?.color ?? "rgba(var(--color-text-300))"}
+                    color={selectedState?.color ?? "var(--text-color-tertiary)"}
                     className={cn("flex-shrink-0", iconSize)}
                     percentage={selectedState?.order}
                   />
@@ -213,17 +218,17 @@ export const WorkItemStateDropdownBase = observer(function WorkItemStateDropdown
       {isOpen && (
         <Combobox.Options className="fixed z-10" static>
           <div
-            className="my-1 w-48 rounded border-[0.5px] border-custom-border-300 bg-custom-background-100 px-2 py-2.5 text-xs shadow-custom-shadow-rg focus:outline-none"
+            className="my-1 w-48 rounded-sm border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 text-11 shadow-raised-200 focus:outline-none"
             ref={setPopperElement}
             style={styles.popper}
             {...attributes.popper}
           >
-            <div className="flex items-center gap-1.5 rounded border border-custom-border-100 bg-custom-background-90 px-2">
-              <Search className="h-3.5 w-3.5 text-custom-text-400" strokeWidth={1.5} />
+            <div className="flex items-center gap-1.5 rounded-sm border border-subtle bg-surface-2 px-2">
+              <SearchIcon className="h-3.5 w-3.5 text-placeholder" strokeWidth={1.5} />
               <Combobox.Input
                 as="input"
                 ref={inputRef}
-                className="w-full bg-transparent py-1 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
+                className="w-full bg-transparent py-1 text-11 text-secondary placeholder:text-placeholder focus:outline-none"
                 value={query}
                 onChange={(e) => setQuery(e.target.value)}
                 placeholder={t("common.search.label")}
@@ -240,14 +245,14 @@ export const WorkItemStateDropdownBase = observer(function WorkItemStateDropdown
                       key={option.value}
                       option={option}
                       selectedValue={value}
-                      className="flex w-full cursor-pointer select-none items-center justify-between gap-2 truncate rounded px-1 py-1.5"
+                      className="flex w-full cursor-pointer items-center justify-between gap-2 truncate rounded-sm px-1 py-1.5 select-none"
                     />
                   ))
                 ) : (
-                  <p className="px-1.5 py-1 italic text-custom-text-400">{t("no_matching_results")}</p>
+                  <p className="px-1.5 py-1 text-placeholder italic">{t("no_matching_results")}</p>
                 )
               ) : (
-                <p className="px-1.5 py-1 italic text-custom-text-400">{t("loading")}</p>
+                <p className="px-1.5 py-1 text-placeholder italic">{t("loading")}</p>
               )}
             </div>
           </div>
diff --git a/apps/web/core/components/dropdowns/state/dropdown.tsx b/apps/web/core/components/dropdowns/state/dropdown.tsx
index d7fe55fe1..ea6bbc656 100644
--- a/apps/web/core/components/dropdowns/state/dropdown.tsx
+++ b/apps/web/core/components/dropdowns/state/dropdown.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
diff --git a/apps/web/core/components/editor/document/editor.tsx b/apps/web/core/components/editor/document/editor.tsx
index 383325c51..dd653e45e 100644
--- a/apps/web/core/components/editor/document/editor.tsx
+++ b/apps/web/core/components/editor/document/editor.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { forwardRef } from "react";
 // plane imports
 import { DocumentEditorWithRef } from "@plane/editor";
@@ -92,7 +98,7 @@ export const DocumentEditor = forwardRef(function DocumentEditor(
       }}
       extendedEditorProps={extendedEditorProps}
       {...rest}
-      containerClassName={cn("relative pl-3 pb-3", containerClassName)}
+      containerClassName={cn("relative pb-3 pl-3", containerClassName)}
     />
   );
 });
diff --git a/apps/web/core/components/editor/embeds/mentions/index.ts b/apps/web/core/components/editor/embeds/mentions/index.ts
index 1efe34c51..d98033459 100644
--- a/apps/web/core/components/editor/embeds/mentions/index.ts
+++ b/apps/web/core/components/editor/embeds/mentions/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./root";
diff --git a/apps/web/core/components/editor/embeds/mentions/root.tsx b/apps/web/core/components/editor/embeds/mentions/root.tsx
index 6f83f064f..88621d6de 100644
--- a/apps/web/core/components/editor/embeds/mentions/root.tsx
+++ b/apps/web/core/components/editor/embeds/mentions/root.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // plane web imports
 import type { TEditorMentionComponentProps } from "@/plane-web/components/editor/embeds/mentions";
 import { EditorAdditionalMentionsRoot } from "@/plane-web/components/editor/embeds/mentions";
diff --git a/apps/web/core/components/editor/embeds/mentions/user.tsx b/apps/web/core/components/editor/embeds/mentions/user.tsx
index 9be7b5173..788f13ac1 100644
--- a/apps/web/core/components/editor/embeds/mentions/user.tsx
+++ b/apps/web/core/components/editor/embeds/mentions/user.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 import { Link } from "react-router";
@@ -33,7 +39,7 @@ export const EditorUserMention = observer(function EditorUserMention(props: Prop
 
   if (!userDetails) {
     return (
-      <div className="not-prose inline px-1 py-0.5 rounded bg-custom-background-80 text-custom-text-300 no-underline">
+      <div className="not-prose inline rounded-sm bg-layer-1 px-1 py-0.5 text-tertiary no-underline">
         @suspended user
       </div>
     );
@@ -42,9 +48,9 @@ export const EditorUserMention = observer(function EditorUserMention(props: Prop
   return (
     <div
       className={cn(
-        "not-prose inline px-1 py-0.5 rounded bg-custom-primary-100/20 text-custom-primary-100 no-underline",
+        "not-prose inline rounded-sm bg-accent-subtle-active px-1 py-0.5 text-accent-primary no-underline",
         {
-          "bg-yellow-500/20 text-yellow-500": id === currentUser?.id,
+          "bg-label-yellow-bg text-label-yellow-text": id === currentUser?.id,
         }
       )}
     >
@@ -53,22 +59,22 @@ export const EditorUserMention = observer(function EditorUserMention(props: Prop
           <Link to={profileLink}>@{userDetails?.display_name}</Link>
         </Popover.Button>
         <Popover.Panel side="bottom" align="start">
-          <div className="w-60 bg-custom-background-100 shadow-custom-shadow-rg rounded-lg p-3 border-[0.5px] border-custom-border-300">
+          <div className="w-60 rounded-lg border-[0.5px] border-strong bg-surface-1 p-3 shadow-raised-200">
             <div className="flex items-center gap-3">
-              <div className="flex-shrink-0 size-10 grid place-items-center">
+              <div className="grid size-10 flex-shrink-0 place-items-center">
                 <Avatar
                   src={getFileURL(userDetails?.avatar_url ?? "")}
                   name={userDetails?.display_name}
                   size={40}
-                  className="text-xl"
+                  className="text-18"
                   showTooltip={false}
                 />
               </div>
               <div>
-                <Link to={profileLink} className="not-prose font-medium text-custom-text-100 text-sm hover:underline">
+                <Link to={profileLink} className="not-prose text-13 font-medium text-primary hover:underline">
                   {userDetails?.first_name} {userDetails?.last_name}
                 </Link>
-                {roleDetails && <p className="text-custom-text-200 text-xs">{ROLE[roleDetails]}</p>}
+                {roleDetails && <p className="text-11 text-secondary">{ROLE[roleDetails]}</p>}
               </div>
             </div>
           </div>
diff --git a/apps/web/core/components/editor/lite-text/editor.tsx b/apps/web/core/components/editor/lite-text/editor.tsx
index 13e2c018e..257f106f8 100644
--- a/apps/web/core/components/editor/lite-text/editor.tsx
+++ b/apps/web/core/components/editor/lite-text/editor.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React, { useState } from "react";
 // plane constants
 import type { EIssueCommentAccessSpecifier } from "@plane/constants";
@@ -17,7 +23,7 @@ import { useParseEditorContent } from "@/hooks/use-parse-editor-content";
 // plane web hooks
 import { useEditorFlagging } from "@/plane-web/hooks/use-editor-flagging";
 // plane web service
-import { WorkspaceService } from "@/plane-web/services";
+import { WorkspaceService } from "@/services/workspace.service";
 import { LiteToolbar } from "./lite-toolbar";
 const workspaceService = new WorkspaceService();
 
@@ -38,6 +44,7 @@ type LiteTextEditorWrapperProps = MakeOptional<
   issue_id?: string;
   parentClassName?: string;
   editorClassName?: string;
+  submitButtonText?: string;
 } & (
     | {
         editable: false;
@@ -72,6 +79,8 @@ export const LiteTextEditor = React.forwardRef(function LiteTextEditor(
     placeholder = t("issue.comments.placeholder"),
     disabledExtensions: additionalDisabledExtensions = [],
     editorClassName = "",
+    showPlaceholderOnEmpty = true,
+    submitButtonText = "common.comment",
     ...rest
   } = props;
   // states
@@ -111,7 +120,7 @@ export const LiteTextEditor = React.forwardRef(function LiteTextEditor(
   return (
     <div
       className={cn(
-        "relative border border-custom-border-200 rounded",
+        "relative rounded-sm border border-subtle",
         {
           "p-3": editable && !isLiteVariant,
         },
@@ -123,7 +132,7 @@ export const LiteTextEditor = React.forwardRef(function LiteTextEditor(
       {/* Wrapper for lite toolbar layout */}
       <div className={cn(isLiteVariant && editable ? "flex items-end gap-1" : "")}>
         {/* Main Editor - always rendered once */}
-        <div className={cn(isLiteVariant && editable ? "flex-1 min-w-0" : "")}>
+        <div className={cn(isLiteVariant && editable ? "min-w-0 flex-1" : "")}>
           <LiteTextEditorWithRef
             ref={ref}
             disabledExtensions={[...liteTextEditorExtensions.disabled, ...additionalDisabledExtensions]}
@@ -154,6 +163,7 @@ export const LiteTextEditor = React.forwardRef(function LiteTextEditor(
               }),
             }}
             placeholder={placeholder}
+            showPlaceholderOnEmpty={showPlaceholderOnEmpty}
             containerClassName={cn(containerClassName, "relative", {
               "p-2": !editable,
             })}
@@ -185,8 +195,8 @@ export const LiteTextEditor = React.forwardRef(function LiteTextEditor(
       {isFullVariant && editable && (
         <div
           className={cn(
-            "transition-all duration-300 ease-out origin-top overflow-hidden",
-            isFocused ? "max-h-[200px] opacity-100 scale-y-100 mt-3" : "max-h-0 opacity-0 scale-y-0 invisible"
+            "origin-top overflow-hidden transition-all duration-300 ease-out",
+            isFocused ? "mt-3 max-h-[200px] scale-y-100 opacity-100" : "invisible max-h-0 scale-y-0 opacity-0"
           )}
         >
           <IssueCommentToolbar
@@ -206,6 +216,7 @@ export const LiteTextEditor = React.forwardRef(function LiteTextEditor(
             showAccessSpecifier={showAccessSpecifier}
             editorRef={editorRef}
             showSubmitButton={showSubmitButton}
+            submitButtonText={submitButtonText}
           />
         </div>
       )}
diff --git a/apps/web/core/components/editor/lite-text/index.ts b/apps/web/core/components/editor/lite-text/index.ts
index f73ee92ef..459e4deca 100644
--- a/apps/web/core/components/editor/lite-text/index.ts
+++ b/apps/web/core/components/editor/lite-text/index.ts
@@ -1,2 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./editor";
 export * from "./toolbar";
diff --git a/apps/web/core/components/editor/lite-text/lite-toolbar.tsx b/apps/web/core/components/editor/lite-text/lite-toolbar.tsx
index 362142eca..99efb2f2a 100644
--- a/apps/web/core/components/editor/lite-text/lite-toolbar.tsx
+++ b/apps/web/core/components/editor/lite-text/lite-toolbar.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 import { ArrowUp, Paperclip } from "lucide-react";
 // constants
@@ -17,7 +23,7 @@ export function LiteToolbar({ onSubmit, isSubmitting, isEmpty, executeCommand }:
       <button
         onClick={() => executeCommand(IMAGE_ITEM)}
         type="button"
-        className="p-1 text-custom-text-300 hover:text-custom-text-200 transition-colors"
+        className="p-1 text-tertiary transition-colors hover:text-secondary"
       >
         <Paperclip className="size-3" />
       </button>
@@ -25,7 +31,7 @@ export function LiteToolbar({ onSubmit, isSubmitting, isEmpty, executeCommand }:
         type="button"
         onClick={(e) => onSubmit(e)}
         disabled={isEmpty || isSubmitting}
-        className="p-1 bg-custom-primary-100 hover:bg-custom-primary-200 disabled:bg-custom-text-400 disabled:text-custom-text-200 text-custom-text-100 rounded transition-colors"
+        className="rounded-sm bg-accent-primary p-1 text-primary transition-colors hover:bg-accent-primary/80 disabled:bg-layer-1 disabled:text-secondary"
       >
         <ArrowUp className="size-3" />
       </button>
diff --git a/apps/web/core/components/editor/lite-text/toolbar.tsx b/apps/web/core/components/editor/lite-text/toolbar.tsx
index a5b96b0db..d23100a8d 100644
--- a/apps/web/core/components/editor/lite-text/toolbar.tsx
+++ b/apps/web/core/components/editor/lite-text/toolbar.tsx
@@ -1,6 +1,12 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React, { useEffect, useState, useCallback } from "react";
 import type { LucideIcon } from "lucide-react";
-import { Globe2, Lock } from "lucide-react";
+
 import { EIssueCommentAccessSpecifier } from "@plane/constants";
 // editor
 import type { EditorRefApi } from "@plane/editor";
@@ -8,6 +14,8 @@ import type { EditorRefApi } from "@plane/editor";
 import { useTranslation } from "@plane/i18n";
 // ui
 import { Button } from "@plane/propel/button";
+import { GlobeIcon, LockIcon } from "@plane/propel/icons";
+import type { ISvgIcons } from "@plane/propel/icons";
 import { Tooltip } from "@plane/propel/tooltip";
 // constants
 import { cn } from "@plane/utils";
@@ -25,22 +33,23 @@ type Props = {
   showAccessSpecifier: boolean;
   showSubmitButton: boolean;
   editorRef: EditorRefApi | null;
+  submitButtonText?: string;
 };
 
 type TCommentAccessType = {
-  icon: LucideIcon;
+  icon: LucideIcon | React.FC<ISvgIcons>;
   key: EIssueCommentAccessSpecifier;
   label: "Private" | "Public";
 };
 
 const COMMENT_ACCESS_SPECIFIERS: TCommentAccessType[] = [
   {
-    icon: Lock,
+    icon: LockIcon,
     key: EIssueCommentAccessSpecifier.INTERNAL,
     label: "Private",
   },
   {
-    icon: Globe2,
+    icon: GlobeIcon,
     key: EIssueCommentAccessSpecifier.EXTERNAL,
     label: "Public",
   },
@@ -60,6 +69,7 @@ export function IssueCommentToolbar(props: Props) {
     showAccessSpecifier,
     showSubmitButton,
     editorRef,
+    submitButtonText = "common.comment",
   } = props;
   // State to manage active states of toolbar items
   const [activeStates, setActiveStates] = useState<Record<string, boolean>>({});
@@ -93,9 +103,9 @@ export function IssueCommentToolbar(props: Props) {
   const isSubmitButtonDisabled = isCommentEmpty || !isEditorReadyToDiscard;
 
   return (
-    <div className="flex h-9 w-full items-stretch gap-1.5 bg-custom-background-90 overflow-x-scroll">
+    <div className="flex h-9 w-full items-stretch gap-1.5 overflow-x-scroll bg-surface-2">
       {showAccessSpecifier && (
-        <div className="flex flex-shrink-0 items-stretch gap-0.5 rounded border-[0.5px] border-custom-border-200 p-1">
+        <div className="flex flex-shrink-0 items-stretch gap-0.5 rounded-sm border-[0.5px] border-subtle p-1">
           {COMMENT_ACCESS_SPECIFIERS.map((access) => {
             const isAccessActive = accessSpecifier === access.key;
 
@@ -104,13 +114,13 @@ export function IssueCommentToolbar(props: Props) {
                 <button
                   type="button"
                   onClick={() => handleAccessChange?.(access.key)}
-                  className={cn("grid place-items-center aspect-square rounded-sm p-1 hover:bg-custom-background-80", {
-                    "bg-custom-background-80": isAccessActive,
+                  className={cn("grid aspect-square place-items-center rounded-xs p-1 hover:bg-layer-1", {
+                    "bg-layer-1": isAccessActive,
                   })}
                 >
                   <access.icon
-                    className={cn("h-3.5 w-3.5 text-custom-text-400", {
-                      "text-custom-text-100": isAccessActive,
+                    className={cn("h-3.5 w-3.5 text-placeholder", {
+                      "text-primary": isAccessActive,
                     })}
                     strokeWidth={2}
                   />
@@ -120,12 +130,12 @@ export function IssueCommentToolbar(props: Props) {
           })}
         </div>
       )}
-      <div className="flex w-full items-stretch justify-between gap-2 rounded border-[0.5px] border-custom-border-200 p-1">
+      <div className="flex w-full items-stretch justify-between gap-2 rounded-sm border-[0.5px] border-subtle p-1">
         <div className="flex items-stretch">
           {Object.keys(toolbarItems).map((key, index) => (
             <div
               key={key}
-              className={cn("flex items-stretch gap-0.5 border-r border-custom-border-200 px-2.5", {
+              className={cn("flex items-stretch gap-0.5 border-r border-subtle px-2.5", {
                 "pl-0": index === 0,
               })}
             >
@@ -136,9 +146,9 @@ export function IssueCommentToolbar(props: Props) {
                   <Tooltip
                     key={item.renderKey}
                     tooltipContent={
-                      <p className="flex flex-col gap-1 text-center text-xs">
+                      <p className="flex flex-col gap-1 text-center text-11">
                         <span className="font-medium">{item.name}</span>
-                        {item.shortcut && <kbd className="text-custom-text-400">{item.shortcut.join(" + ")}</kbd>}
+                        {item.shortcut && <kbd className="text-placeholder">{item.shortcut.join(" + ")}</kbd>}
                       </p>
                     }
                   >
@@ -146,15 +156,15 @@ export function IssueCommentToolbar(props: Props) {
                       type="button"
                       onClick={() => executeCommand(item)}
                       className={cn(
-                        "grid place-items-center aspect-square rounded-sm p-0.5 text-custom-text-400 hover:bg-custom-background-80",
+                        "grid aspect-square place-items-center rounded-xs p-0.5 text-placeholder hover:bg-layer-1",
                         {
-                          "bg-custom-background-80 text-custom-text-100": isItemActive,
+                          "bg-layer-1 text-primary": isItemActive,
                         }
                       )}
                     >
                       <item.icon
                         className={cn("h-3.5 w-3.5", {
-                          "text-custom-text-100": isItemActive,
+                          "text-primary": isItemActive,
                         })}
                         strokeWidth={2.5}
                       />
@@ -170,12 +180,12 @@ export function IssueCommentToolbar(props: Props) {
             <Button
               type="submit"
               variant="primary"
-              className="px-2.5 py-1.5 text-xs"
+              className="px-2.5 py-1.5 text-11"
               onClick={handleSubmit}
               disabled={isSubmitButtonDisabled}
               loading={isSubmitting}
             >
-              {t("common.comment")}
+              {t(submitButtonText)}
             </Button>
           </div>
         )}
diff --git a/apps/web/core/components/editor/pdf/document.tsx b/apps/web/core/components/editor/pdf/document.tsx
index a1d5b12ad..1c439bfae 100644
--- a/apps/web/core/components/editor/pdf/document.tsx
+++ b/apps/web/core/components/editor/pdf/document.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { PageProps } from "@react-pdf/renderer";
 import { Document, Font, Page } from "@react-pdf/renderer";
 import { Html } from "react-pdf-html";
diff --git a/apps/web/core/components/editor/pdf/index.ts b/apps/web/core/components/editor/pdf/index.ts
index fe6d89c0e..a53ff8fb4 100644
--- a/apps/web/core/components/editor/pdf/index.ts
+++ b/apps/web/core/components/editor/pdf/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./document";
diff --git a/apps/web/core/components/editor/rich-text/description-input/index.ts b/apps/web/core/components/editor/rich-text/description-input/index.ts
index 1efe34c51..d98033459 100644
--- a/apps/web/core/components/editor/rich-text/description-input/index.ts
+++ b/apps/web/core/components/editor/rich-text/description-input/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./root";
diff --git a/apps/web/core/components/editor/rich-text/description-input/loader.tsx b/apps/web/core/components/editor/rich-text/description-input/loader.tsx
index 2d3a068ee..8be097837 100644
--- a/apps/web/core/components/editor/rich-text/description-input/loader.tsx
+++ b/apps/web/core/components/editor/rich-text/description-input/loader.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // plane imports
 import { Loader } from "@plane/ui";
 import { cn } from "@plane/utils";
@@ -24,7 +30,7 @@ export function DescriptionInputLoader(props: Props) {
       <div className="flex items-center gap-2">
         <Loader.Item width="50%" height="26px" />
       </div>
-      <div className="border-0.5 absolute bottom-2 right-3.5 z-10 flex items-center gap-2">
+      <div className="border-0.5 absolute right-3.5 bottom-2 z-10 flex items-center gap-2">
         <Loader.Item width="100px" height="26px" />
         <Loader.Item width="50px" height="26px" />
       </div>
diff --git a/apps/web/core/components/editor/rich-text/description-input/root.tsx b/apps/web/core/components/editor/rich-text/description-input/root.tsx
index 7c95e1ace..3e4a12604 100644
--- a/apps/web/core/components/editor/rich-text/description-input/root.tsx
+++ b/apps/web/core/components/editor/rich-text/description-input/root.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useCallback, useEffect, useState, useRef } from "react";
 import { debounce } from "lodash-es";
 import { observer } from "mobx-react";
@@ -13,7 +19,7 @@ import { RichTextEditor } from "@/components/editor/rich-text";
 import { useEditorAsset } from "@/hooks/store/use-editor-asset";
 import { useWorkspace } from "@/hooks/store/use-workspace";
 // plane web services
-import { WorkspaceService } from "@/plane-web/services";
+import { WorkspaceService } from "@/services/workspace.service";
 // local imports
 import { DescriptionInputLoader } from "./loader";
 // services init
@@ -22,6 +28,7 @@ const workspaceService = new WorkspaceService();
 type TFormData = {
   id: string;
   description_html: string;
+  description_json?: object;
   isMigrationUpdate: boolean;
 };
 
@@ -54,10 +61,20 @@ type Props = {
    * @description Initial value, pass the actual description to initialize the editor
    */
   initialValue: string | undefined;
+  /**
+   * @description Key, to ensure the editor is re-rendered when the key changes
+   */
+  key: string;
   /**
    * @description Submit handler, the actual function which will be called when the form is submitted
    */
-  onSubmit: (value: string, isMigrationUpdate?: boolean) => Promise<void>;
+  onSubmit: (
+    value: {
+      description_html: string;
+      description_json: object | undefined;
+    },
+    isMigrationUpdate?: boolean
+  ) => Promise<void>;
   /**
    * @description Placeholder, if not provided, the placeholder will be the default placeholder
    */
@@ -97,13 +114,13 @@ export const DescriptionInput = observer(function DescriptionInput(props: Props)
     entityId,
     fileAssetType,
     initialValue,
+    issueSequenceId,
     onSubmit,
     placeholder,
     projectId,
     setIsSubmitting,
     swrDescription,
     workspaceSlug,
-    issueSequenceId,
   } = props;
   // states
   const [localDescription, setLocalDescription] = useState<TFormData>({
@@ -113,6 +130,8 @@ export const DescriptionInput = observer(function DescriptionInput(props: Props)
   });
   // ref to track if there are unsaved changes
   const hasUnsavedChanges = useRef(false);
+  // ref to track last saved content (to skip onChange when content hasn't actually changed)
+  const lastSavedContent = useRef(initialValue?.trim() === "" ? "<p></p>" : (initialValue ?? "<p></p>"));
   // store hooks
   const { getWorkspaceBySlug } = useWorkspace();
   const { uploadEditorAsset, duplicateEditorAsset } = useEditorAsset();
@@ -132,7 +151,15 @@ export const DescriptionInput = observer(function DescriptionInput(props: Props)
   // submit handler
   const handleDescriptionFormSubmit = useCallback(
     async (formData: TFormData) => {
-      await onSubmit(formData.description_html, formData.isMigrationUpdate);
+      await onSubmit(
+        {
+          description_html: formData.description_html,
+          description_json: formData.description_json,
+        },
+        formData.isMigrationUpdate
+      );
+      // Update lastSavedContent after successful save
+      lastSavedContent.current = formData.description_html;
     },
     [onSubmit]
   );
@@ -140,14 +167,17 @@ export const DescriptionInput = observer(function DescriptionInput(props: Props)
   // reset form values
   useEffect(() => {
     if (!entityId) return;
+    const normalizedValue = initialValue?.trim() === "" ? "<p></p>" : (initialValue ?? "<p></p>");
+    // Update last saved content when entity/initialValue changes
+    lastSavedContent.current = normalizedValue;
     reset({
       id: entityId,
-      description_html: initialValue?.trim() === "" ? "<p></p>" : (initialValue ?? "<p></p>"),
+      description_html: normalizedValue,
       isMigrationUpdate: false,
     });
     setLocalDescription({
       id: entityId,
-      description_html: initialValue?.trim() === "" ? "<p></p>" : (initialValue ?? "<p></p>"),
+      description_html: normalizedValue,
       isMigrationUpdate: false,
     });
     // Reset unsaved changes flag when form is reset
@@ -192,77 +222,76 @@ export const DescriptionInput = observer(function DescriptionInput(props: Props)
 
   if (!workspaceDetails) return null;
 
+  if (!localDescription.description_html) return <DescriptionInputLoader />;
+
   return (
-    <>
-      {localDescription.description_html ? (
-        <Controller
-          name="description_html"
-          control={control}
-          render={({ field: { onChange } }) => (
-            <RichTextEditor
-              editable={!disabled}
-              ref={editorRef}
-              id={entityId}
-              issueSequenceId={issueSequenceId}
-              disabledExtensions={disabledExtensions}
-              initialValue={localDescription.description_html ?? "<p></p>"}
-              value={swrDescription ?? null}
-              workspaceSlug={workspaceSlug}
-              workspaceId={workspaceDetails.id}
-              projectId={projectId}
-              dragDropEnabled
-              onChange={(_description, description_html, options) => {
-                setIsSubmitting("submitting");
-                onChange(description_html);
-                setValue("isMigrationUpdate", options?.isMigrationUpdate ?? false);
-                hasUnsavedChanges.current = true;
-                debouncedFormSave();
-              }}
-              placeholder={placeholder ?? ((isFocused, value) => t(getDescriptionPlaceholderI18n(isFocused, value)))}
-              searchMentionCallback={async (payload) =>
-                await workspaceService.searchEntity(workspaceSlug?.toString() ?? "", {
-                  ...payload,
-                  project_id: projectId,
-                })
-              }
-              containerClassName={containerClassName}
-              uploadFile={async (blockId, file) => {
-                try {
-                  const { asset_id } = await uploadEditorAsset({
-                    blockId,
-                    data: {
-                      entity_identifier: entityId,
-                      entity_type: fileAssetType,
-                    },
-                    file,
-                    projectId,
-                    workspaceSlug,
-                  });
-                  return asset_id;
-                } catch (error) {
-                  console.log("Error in uploading asset:", error);
-                  throw new Error("Asset upload failed. Please try again later.");
-                }
-              }}
-              duplicateFile={async (assetId: string) => {
-                try {
-                  const { asset_id } = await duplicateEditorAsset({
-                    assetId,
-                    entityType: fileAssetType,
-                    projectId,
-                    workspaceSlug,
-                  });
-                  return asset_id;
-                } catch {
-                  throw new Error("Asset duplication failed. Please try again later.");
-                }
-              }}
-            />
-          )}
+    <Controller
+      name="description_html"
+      control={control}
+      render={({ field: { onChange } }) => (
+        <RichTextEditor
+          key={entityId}
+          editable={!disabled}
+          ref={editorRef}
+          id={entityId}
+          issueSequenceId={issueSequenceId}
+          disabledExtensions={disabledExtensions}
+          initialValue={localDescription.description_html ?? "<p></p>"}
+          value={swrDescription ?? null}
+          workspaceSlug={workspaceSlug}
+          workspaceId={workspaceDetails.id}
+          projectId={projectId}
+          dragDropEnabled
+          onChange={(description_json, description_html, options) => {
+            if (description_html === lastSavedContent.current) return;
+            setIsSubmitting("submitting");
+            onChange(description_html);
+            setValue("isMigrationUpdate", !!options?.isMigrationUpdate);
+            setValue("description_json", description_json);
+            hasUnsavedChanges.current = true;
+            debouncedFormSave();
+          }}
+          placeholder={placeholder ?? ((isFocused, value) => t(getDescriptionPlaceholderI18n(isFocused, value)))}
+          searchMentionCallback={async (payload) =>
+            await workspaceService.searchEntity(workspaceSlug?.toString() ?? "", {
+              ...payload,
+              project_id: projectId,
+            })
+          }
+          containerClassName={containerClassName}
+          uploadFile={async (blockId, file) => {
+            try {
+              const { asset_id } = await uploadEditorAsset({
+                blockId,
+                data: {
+                  entity_identifier: entityId,
+                  entity_type: fileAssetType,
+                },
+                file,
+                projectId,
+                workspaceSlug,
+              });
+              return asset_id;
+            } catch (error) {
+              console.log("Error in uploading asset:", error);
+              throw new Error("Asset upload failed. Please try again later.");
+            }
+          }}
+          duplicateFile={async (assetId: string) => {
+            try {
+              const { asset_id } = await duplicateEditorAsset({
+                assetId,
+                entityType: fileAssetType,
+                projectId,
+                workspaceSlug,
+              });
+              return asset_id;
+            } catch {
+              throw new Error("Asset duplication failed. Please try again later.");
+            }
+          }}
         />
-      ) : (
-        <DescriptionInputLoader />
       )}
-    </>
+    />
   );
 });
diff --git a/apps/web/core/components/editor/rich-text/editor.tsx b/apps/web/core/components/editor/rich-text/editor.tsx
index e3cb6ba61..5a429b039 100644
--- a/apps/web/core/components/editor/rich-text/editor.tsx
+++ b/apps/web/core/components/editor/rich-text/editor.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { forwardRef } from "react";
 // plane imports
 import { RichTextEditorWithRef } from "@plane/editor";
@@ -92,7 +98,7 @@ export const RichTextEditor = forwardRef(function RichTextEditor(
       }}
       extendedEditorProps={{}}
       {...rest}
-      containerClassName={cn("relative pl-3 pb-3", containerClassName)}
+      containerClassName={cn("relative pb-3 pl-3", containerClassName)}
     />
   );
 });
diff --git a/apps/web/core/components/editor/rich-text/index.ts b/apps/web/core/components/editor/rich-text/index.ts
index 8b1fd904b..4c9233aa4 100644
--- a/apps/web/core/components/editor/rich-text/index.ts
+++ b/apps/web/core/components/editor/rich-text/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./editor";
diff --git a/apps/web/core/components/editor/sticky-editor/color-palette.tsx b/apps/web/core/components/editor/sticky-editor/color-palette.tsx
index 45c79e073..1bdbaa40e 100644
--- a/apps/web/core/components/editor/sticky-editor/color-palette.tsx
+++ b/apps/web/core/components/editor/sticky-editor/color-palette.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { TSticky } from "@plane/types";
 
 export const STICKY_COLORS_LIST: {
@@ -8,7 +14,7 @@ export const STICKY_COLORS_LIST: {
   {
     key: "gray",
     label: "Gray",
-    backgroundColor: "rgba(var(--color-background-90))",
+    backgroundColor: "var(--editor-colors-gray-background)",
   },
   {
     key: "peach",
@@ -54,8 +60,8 @@ type TProps = {
 export function ColorPalette(props: TProps) {
   const { handleUpdate } = props;
   return (
-    <div className="absolute z-10 bottom-5 left-0 w-56 shadow p-2 rounded-md bg-custom-background-100 mb-2">
-      <div className="text-sm font-semibold text-custom-text-400 mb-2">Background colors</div>
+    <div className="shadow absolute bottom-5 left-0 z-10 mb-2 w-56 rounded-md bg-surface-1 p-2">
+      <div className="mb-2 text-13 font-semibold text-placeholder">Background colors</div>
       <div className="flex flex-wrap gap-2">
         {STICKY_COLORS_LIST.map((color) => (
           <button
@@ -66,7 +72,7 @@ export function ColorPalette(props: TProps) {
                 background_color: color.key,
               });
             }}
-            className="h-6 w-6 rounded-md hover:ring-2 hover:ring-custom-primary focus:outline-none focus:ring-2 focus:ring-custom-primary transition-all"
+            className="h-6 w-6 rounded-md transition-all hover:ring-2 hover:ring-accent-strong focus:ring-2 focus:ring-accent-strong focus:outline-none"
             style={{
               backgroundColor: color.backgroundColor,
             }}
diff --git a/apps/web/core/components/editor/sticky-editor/editor.tsx b/apps/web/core/components/editor/sticky-editor/editor.tsx
index 477927597..544ea3b35 100644
--- a/apps/web/core/components/editor/sticky-editor/editor.tsx
+++ b/apps/web/core/components/editor/sticky-editor/editor.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React, { useState } from "react";
 // plane constants
 import type { EIssueCommentAccessSpecifier } from "@plane/constants";
@@ -76,7 +82,7 @@ export const StickyEditor = React.forwardRef(function StickyEditor(
 
   return (
     <div
-      className={cn("relative border border-custom-border-200 rounded", parentClassName)}
+      className={cn("relative rounded-sm border border-subtle", parentClassName)}
       onFocus={() => !showToolbarInitially && setIsFocused(true)}
       onBlur={() => !showToolbarInitially && setIsFocused(false)}
     >
@@ -102,9 +108,9 @@ export const StickyEditor = React.forwardRef(function StickyEditor(
       />
       {showToolbar && (
         <div
-          className={cn("transition-all duration-300 ease-out origin-top px-4 h-[60px]", {
-            "max-h-[60px] opacity-100 scale-y-100": isFocused,
-            "max-h-0 opacity-0 scale-y-0 invisible": !isFocused,
+          className={cn("h-[60px] origin-top px-4 transition-all duration-300 ease-out", {
+            "max-h-[60px] scale-y-100 opacity-100": isFocused,
+            "invisible max-h-0 scale-y-0 opacity-0": !isFocused,
           })}
         >
           <StickyEditorToolbar
diff --git a/apps/web/core/components/editor/sticky-editor/index.ts b/apps/web/core/components/editor/sticky-editor/index.ts
index f73ee92ef..459e4deca 100644
--- a/apps/web/core/components/editor/sticky-editor/index.ts
+++ b/apps/web/core/components/editor/sticky-editor/index.ts
@@ -1,2 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./editor";
 export * from "./toolbar";
diff --git a/apps/web/core/components/editor/sticky-editor/toolbar.tsx b/apps/web/core/components/editor/sticky-editor/toolbar.tsx
index 4025c63e6..efd2fc169 100644
--- a/apps/web/core/components/editor/sticky-editor/toolbar.tsx
+++ b/apps/web/core/components/editor/sticky-editor/toolbar.tsx
@@ -1,9 +1,16 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React, { useEffect, useState, useCallback } from "react";
-import { Palette, Trash2 } from "lucide-react";
+import { Palette } from "lucide-react";
 // editor
 import type { EditorRefApi } from "@plane/editor";
 // ui
 import { useOutsideClickDetector } from "@plane/hooks";
+import { TrashIcon } from "@plane/propel/icons";
 import { Tooltip } from "@plane/propel/tooltip";
 import type { TSticky } from "@plane/types";
 // constants
@@ -57,28 +64,24 @@ export function StickyEditorToolbar(props: Props) {
   useOutsideClickDetector(colorPaletteRef, () => setShowColorPalette(false));
 
   return (
-    <div className="flex w-full justify-between h-full">
-      <div className="flex my-auto gap-4" ref={colorPaletteRef}>
+    <div className="flex h-full w-full justify-between">
+      <div className="my-auto flex gap-4" ref={colorPaletteRef}>
         {/* color palette */}
         {showColorPalette && <ColorPalette handleUpdate={handleColorChange} />}
         <Tooltip
           tooltipContent={
-            <p className="flex flex-col gap-1 text-center text-xs">
+            <p className="flex flex-col gap-1 text-center text-11">
               <span className="font-medium">Background color</span>
             </p>
           }
         >
-          <button
-            type="button"
-            onClick={() => setShowColorPalette(!showColorPalette)}
-            className="flex text-custom-text-100/50"
-          >
-            <Palette className="size-4 my-auto" />
+          <button type="button" onClick={() => setShowColorPalette(!showColorPalette)} className="flex text-primary/50">
+            <Palette className="my-auto size-4" />
           </button>
         </Tooltip>
 
-        <div className="flex w-fit items-stretch justify-between gap-4 rounded p-1 my-auto">
-          <div className="flex items-stretch my-auto gap-4">
+        <div className="my-auto flex w-fit items-stretch justify-between gap-4 rounded-sm p-1">
+          <div className="my-auto flex items-stretch gap-4">
             {Object.keys(toolbarItems).map((key) => (
               <div key={key} className={cn("flex items-stretch gap-4", {})}>
                 {toolbarItems[key].map((item) => {
@@ -88,23 +91,20 @@ export function StickyEditorToolbar(props: Props) {
                     <Tooltip
                       key={item.renderKey}
                       tooltipContent={
-                        <p className="flex flex-col gap-1 text-center text-xs">
+                        <p className="flex flex-col gap-1 text-center text-11">
                           <span className="font-medium">{item.name}</span>
-                          {item.shortcut && <kbd className="text-custom-text-400">{item.shortcut.join(" + ")}</kbd>}
+                          {item.shortcut && <kbd className="text-placeholder">{item.shortcut.join(" + ")}</kbd>}
                         </p>
                       }
                     >
                       <button
                         type="button"
                         onClick={() => executeCommand(item)}
-                        className={cn(
-                          "grid place-items-center aspect-square rounded-sm p-0.5 text-custom-text-100/50",
-                          {}
-                        )}
+                        className={cn("grid aspect-square place-items-center rounded-xs p-0.5 text-primary/50", {})}
                       >
                         <item.icon
                           className={cn("h-3.5 w-3.5", {
-                            "font-extrabold": isItemActive,
+                            "font-heavy": isItemActive,
                           })}
                           strokeWidth={2.5}
                         />
@@ -120,13 +120,13 @@ export function StickyEditorToolbar(props: Props) {
       {/* delete action */}
       <Tooltip
         tooltipContent={
-          <p className="flex flex-col gap-1 text-center text-xs">
+          <p className="flex flex-col gap-1 text-center text-11">
             <span className="font-medium">Delete</span>
           </p>
         }
       >
-        <button type="button" onClick={handleDelete} className="my-auto text-custom-text-100/50">
-          <Trash2 className="size-4" />
+        <button type="button" onClick={handleDelete} className="my-auto text-primary/50">
+          <TrashIcon className="size-4" />
         </button>
       </Tooltip>
     </div>
diff --git a/apps/web/core/components/empty-state/comic-box-button.tsx b/apps/web/core/components/empty-state/comic-box-button.tsx
index 93a0c05f8..222e0531f 100644
--- a/apps/web/core/components/empty-state/comic-box-button.tsx
+++ b/apps/web/core/components/empty-state/comic-box-button.tsx
@@ -1,10 +1,15 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { Ref } from "react";
 import { Fragment, useState } from "react";
 import { usePopper } from "react-popper";
 import { Popover } from "@headlessui/react";
-// popper
-// helper
-import { getButtonStyling } from "@plane/propel/button";
+// plane imports
+import { Button } from "@plane/propel/button";
 
 type Props = {
   label: string;
@@ -44,32 +49,30 @@ export function ComicBoxButton(props: Props) {
   return (
     <Popover as="div" className="relative">
       <Popover.Button as={Fragment}>
-        <button type="button" ref={setReferenceElement} onClick={onClick} disabled={disabled}>
-          <div className={`flex items-center gap-2.5 ${getButtonStyling("primary", "lg", disabled)}`}>
-            {icon}
-            <span className="leading-4">{label}</span>
-            <span className="relative h-2 w-2">
-              <div
-                onMouseEnter={handleMouseEnter}
-                onMouseLeave={handleMouseLeave}
-                className={`absolute bg-blue-300 right-0 z-10 h-2.5 w-2.5 animate-ping rounded-full`}
-              />
-              <div className={`absolute bg-blue-400/40 right-0 h-1.5 w-1.5 mt-0.5 mr-0.5 rounded-full`} />
-            </span>
-          </div>
-        </button>
+        <Button variant="primary" size="lg" ref={setReferenceElement} onClick={onClick} disabled={disabled}>
+          {icon}
+          <span className="leading-4">{label}</span>
+          <span className="relative h-2 w-2">
+            <div
+              onMouseEnter={handleMouseEnter}
+              onMouseLeave={handleMouseLeave}
+              className={`bg-blue-300 absolute right-0 z-10 h-2.5 w-2.5 animate-ping rounded-full`}
+            />
+            <div className={`bg-blue-400/40 absolute right-0 mt-0.5 mr-0.5 h-1.5 w-1.5 rounded-full`} />
+          </span>
+        </Button>
       </Popover.Button>
       {isHovered && (
         <Popover.Panel className="fixed z-10" static>
           <div
-            className="flex flex-col rounded border border-custom-border-200 bg-custom-background-100 p-5 relative w-52 lg:w-60 xl:w-80"
+            className="relative flex w-52 flex-col overflow-hidden rounded-sm rounded-xl border border-subtle bg-layer-1 p-5 hover:bg-layer-1-hover lg:w-60 xl:w-80"
             ref={setPopperElement as Ref<HTMLDivElement>}
             style={styles.popper}
             {...attributes.popper}
           >
-            <div className="absolute w-2 h-2 bg-custom-background-100 border rounded-lb-sm  border-custom-border-200 border-r-0 border-t-0 transform rotate-45 bottom-2 -left-[5px]" />
-            <h3 className="text-lg font-semibold w-full">{title}</h3>
-            <h4 className="mt-1 text-sm">{description}</h4>
+            <div className="rounded-lb-sm absolute bottom-2 -left-[5px] h-2 w-2 rotate-45 transform border border-t-0 border-r-0 border-subtle bg-surface-1" />
+            <h3 className="w-full text-16 font-semibold">{title}</h3>
+            <h4 className="mt-1 text-13">{description}</h4>
           </div>
         </Popover.Panel>
       )}
diff --git a/apps/web/core/components/empty-state/detailed-empty-state-root.tsx b/apps/web/core/components/empty-state/detailed-empty-state-root.tsx
index 7cfbe0e31..593e5adda 100644
--- a/apps/web/core/components/empty-state/detailed-empty-state-root.tsx
+++ b/apps/web/core/components/empty-state/detailed-empty-state-root.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 import { observer } from "mobx-react";
 // ui
@@ -5,12 +11,12 @@ import { Button } from "@plane/propel/button";
 // utils
 import { cn } from "@plane/utils";
 
-type EmptyStateSize = "sm" | "md" | "lg";
+type EmptyStateSize = "sm" | "base" | "lg";
 
 type ButtonConfig = {
   text: string;
-  prependIcon?: React.ReactNode;
-  appendIcon?: React.ReactNode;
+  prependIcon?: React.ReactElement;
+  appendIcon?: React.ReactElement;
   onClick?: () => void;
   disabled?: boolean;
 };
@@ -29,7 +35,7 @@ type Props = {
 
 const sizeClasses = {
   sm: "md:min-w-[24rem] max-w-[45rem]",
-  md: "md:min-w-[28rem] max-w-[50rem]",
+  base: "md:min-w-[28rem] max-w-[50rem]",
   lg: "md:min-w-[30rem] max-w-[60rem]",
 } as const;
 
@@ -39,7 +45,7 @@ function CustomButton({
   size,
 }: {
   config: ButtonConfig;
-  variant: "primary" | "neutral-primary";
+  variant: "primary" | "secondary";
   size: EmptyStateSize;
 }) {
   return (
@@ -74,28 +80,26 @@ export const DetailedEmptyState = observer(function DetailedEmptyState(props: Pr
   return (
     <div
       className={cn(
-        "flex items-center justify-center min-h-full min-w-full overflow-y-auto py-10 md:px-20 px-5",
+        "flex min-h-full min-w-full items-center justify-center overflow-y-auto px-5 py-10 md:px-20",
         className
       )}
     >
       <div className={cn("flex flex-col gap-5", sizeClasses[size])}>
-        <div className="flex flex-col gap-1.5 flex-shrink">
-          <h3 className={cn("text-xl font-semibold", { "font-medium": !description })}>{title}</h3>
-          {description && <p className="text-sm">{description}</p>}
+        <div className="flex shrink-0 flex-col gap-1.5">
+          <h3 className={cn("text-18 font-semibold", { "font-medium": !description })}>{title}</h3>
+          {description && <p className="text-13">{description}</p>}
         </div>
 
-        {assetPath && <img src={assetPath} alt={title} className="w-full h-auto" loading="lazy" />}
+        {assetPath && <img src={assetPath} alt={title} className="h-auto w-full" loading="lazy" />}
 
         {hasButtons && (
-          <div className="relative flex items-center justify-center gap-2 flex-shrink-0 w-full">
+          <div className="relative flex w-full flex-shrink-0 items-center justify-center gap-2">
             {/* primary button */}
             {customPrimaryButton ??
               (primaryButton?.text && <CustomButton config={primaryButton} variant="primary" size={size} />)}
             {/* secondary button */}
             {customSecondaryButton ??
-              (secondaryButton?.text && (
-                <CustomButton config={secondaryButton} variant="neutral-primary" size={size} />
-              ))}
+              (secondaryButton?.text && <CustomButton config={secondaryButton} variant="secondary" size={size} />)}
           </div>
         )}
       </div>
diff --git a/apps/web/core/components/empty-state/helper.tsx b/apps/web/core/components/empty-state/helper.tsx
index 4f5cfc127..03460f62e 100644
--- a/apps/web/core/components/empty-state/helper.tsx
+++ b/apps/web/core/components/empty-state/helper.tsx
@@ -1,2 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export const getEmptyStateImagePath = (category: string, type: string, isLightMode: boolean) =>
   `/empty-state/${category}/${type}-${isLightMode ? "light" : "dark"}.webp`;
diff --git a/apps/web/core/components/empty-state/section-empty-state-root.tsx b/apps/web/core/components/empty-state/section-empty-state-root.tsx
index 978a79526..3d0a05aa3 100644
--- a/apps/web/core/components/empty-state/section-empty-state-root.tsx
+++ b/apps/web/core/components/empty-state/section-empty-state-root.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { cn } from "@plane/utils";
 
 type Props = {
@@ -14,14 +19,14 @@ export function SectionEmptyState(props: Props) {
   return (
     <div
       className={cn(
-        "flex flex-col gap-4 items-center justify-center rounded-md border border-custom-border-200 p-10",
+        "flex flex-col items-center justify-center gap-4 rounded-md border border-subtle p-10",
         customClassName
       )}
     >
       <div className="flex flex-col items-center gap-2">
-        <div className="flex items-center justify-center size-8 bg-custom-background-80 rounded">{icon}</div>
-        <span className="text-sm font-medium">{title}</span>
-        {description && <span className="text-xs text-custom-text-300">{description}</span>}
+        <div className="flex size-8 items-center justify-center rounded-sm bg-layer-1">{icon}</div>
+        <span className="text-13 font-medium">{title}</span>
+        {description && <span className="text-11 text-tertiary">{description}</span>}
       </div>
       {actionElement && <>{actionElement}</>}
     </div>
diff --git a/apps/web/core/components/empty-state/simple-empty-state-root.tsx b/apps/web/core/components/empty-state/simple-empty-state-root.tsx
index 871736a50..b92712252 100644
--- a/apps/web/core/components/empty-state/simple-empty-state-root.tsx
+++ b/apps/web/core/components/empty-state/simple-empty-state-root.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 // utils
 import { cn } from "@plane/utils";
@@ -24,15 +30,15 @@ const sizeConfig = {
 
 const getTitleClassName = (hasDescription: boolean) =>
   cn("font-medium whitespace-pre-line", {
-    "text-sm text-custom-text-400": !hasDescription,
-    "text-lg text-custom-text-300": hasDescription,
+    "text-13 text-placeholder": !hasDescription,
+    "text-16 text-tertiary": hasDescription,
   });
 
 export const SimpleEmptyState = observer(function SimpleEmptyState(props: Props) {
   const { title, description, size = "sm", assetPath } = props;
 
   return (
-    <div className="text-center flex flex-col gap-2.5 items-center">
+    <div className="flex flex-col items-center gap-2.5 text-center">
       {assetPath && (
         <div className={sizeConfig[size].container}>
           <img src={assetPath} alt={title} className="h-full w-full object-contain" />
@@ -41,7 +47,7 @@ export const SimpleEmptyState = observer(function SimpleEmptyState(props: Props)
 
       <h3 className={getTitleClassName(!!description)}>{title}</h3>
 
-      {description && <p className="text-base font-medium text-custom-text-400 whitespace-pre-line">{description}</p>}
+      {description && <p className="text-14 font-medium whitespace-pre-line text-placeholder">{description}</p>}
     </div>
   );
 });
diff --git a/apps/web/core/components/estimates/create/modal.tsx b/apps/web/core/components/estimates/create/modal.tsx
index 3d223c363..518f66650 100644
--- a/apps/web/core/components/estimates/create/modal.tsx
+++ b/apps/web/core/components/estimates/create/modal.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useEffect, useMemo, useState } from "react";
 import { observer } from "mobx-react";
 // plane imports
@@ -140,7 +145,7 @@ export const CreateEstimateModal = observer(function CreateEstimateModal(props:
     <ModalCore isOpen={isOpen} position={EModalPosition.TOP} width={EModalWidth.XXL}>
       <div className="relative space-y-6 py-5">
         {/* heading */}
-        <div className="relative flex justify-between items-center gap-2 px-5">
+        <div className="relative flex items-center justify-between gap-2 px-5">
           <div className="relative flex items-center gap-1">
             {estimatePoints && (
               <div
@@ -148,14 +153,14 @@ export const CreateEstimateModal = observer(function CreateEstimateModal(props:
                   setEstimateSystem(EEstimateSystem.POINTS);
                   handleUpdatePoints(undefined);
                 }}
-                className="flex-shrink-0 cursor-pointer w-5 h-5 flex justify-center items-center"
+                className="flex h-5 w-5 flex-shrink-0 cursor-pointer items-center justify-center"
               >
-                <ChevronLeftIcon className="w-4 h-4" />
+                <ChevronLeftIcon className="h-4 w-4" />
               </div>
             )}
-            <div className="text-xl font-medium text-custom-text-100">{t("project_settings.estimates.new")}</div>
+            <div className="text-18 font-medium text-primary">{t("project_settings.estimates.new")}</div>
           </div>
-          <div className="text-xs text-gray-400">
+          <div className="text-gray-400 text-11">
             {t("project_settings.estimates.create.step", {
               step: renderEstimateStepsCount,
               total: 2,
@@ -187,19 +192,19 @@ export const CreateEstimateModal = observer(function CreateEstimateModal(props:
             />
           )}
           {/* {isEstimatePointError && (
-            <div className="pt-5 text-sm text-red-500">
+            <div className="pt-5 text-13 text-danger-primary">
               Estimate points can&apos;t be empty. Enter a value in each field or remove those you don&apos;t have
               values for.
             </div>
           )} */}
         </div>
 
-        <div className="relative flex justify-end items-center gap-3 px-5 pt-5 border-t border-custom-border-200">
-          <Button variant="neutral-primary" size="sm" onClick={handleClose} disabled={buttonLoader}>
+        <div className="relative flex items-center justify-end gap-3 border-t border-subtle px-5 pt-5">
+          <Button variant="secondary" size="lg" onClick={handleClose} disabled={buttonLoader}>
             {t("common.cancel")}
           </Button>
           {estimatePoints && (
-            <Button variant="primary" size="sm" onClick={handleCreateEstimate} disabled={buttonLoader}>
+            <Button variant="primary" size="lg" onClick={handleCreateEstimate} disabled={buttonLoader}>
               {buttonLoader ? t("common.creating") : t("project_settings.estimates.create.label")}
             </Button>
           )}
diff --git a/apps/web/core/components/estimates/create/stage-one.tsx b/apps/web/core/components/estimates/create/stage-one.tsx
index cdea4aa5e..f6b4c999d 100644
--- a/apps/web/core/components/estimates/create/stage-one.tsx
+++ b/apps/web/core/components/estimates/create/stage-one.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { Info } from "lucide-react";
 // plane imports
 import { EEstimateSystem, ESTIMATE_SYSTEMS } from "@plane/constants";
@@ -29,7 +35,7 @@ export function EstimateCreateStageOne(props: TEstimateCreateStageOne) {
   if (!currentEstimateSystem) return <></>;
   return (
     <div className="space-y-6">
-      <div className="sm:flex sm:items-center sm:space-x-10 sm:space-y-0 gap-2 mb-2">
+      <div className="mb-2 gap-2 sm:flex sm:items-center sm:space-y-0 sm:space-x-10">
         <RadioInput
           options={Object.keys(ESTIMATE_SYSTEMS)
             .map((system) => {
@@ -38,14 +44,14 @@ export function EstimateCreateStageOne(props: TEstimateCreateStageOne) {
               if (!isEnabled) return null;
               return {
                 label: !ESTIMATE_SYSTEMS[currentSystem]?.is_available ? (
-                  <div className="relative flex items-center gap-2 cursor-no-drop text-custom-text-300">
+                  <div className="relative flex cursor-no-drop items-center gap-2 text-tertiary">
                     {t(ESTIMATE_SYSTEMS[currentSystem]?.i18n_name)}
                     <Tooltip tooltipContent={t("common.coming_soon")}>
                       <Info size={12} />
                     </Tooltip>
                   </div>
                 ) : !isEnabled ? (
-                  <div className="relative flex items-center gap-2 cursor-no-drop text-custom-text-300">
+                  <div className="relative flex cursor-no-drop items-center gap-2 text-tertiary">
                     {t(ESTIMATE_SYSTEMS[currentSystem]?.i18n_name)}
                     <UpgradeBadge />
                   </div>
@@ -59,7 +65,7 @@ export function EstimateCreateStageOne(props: TEstimateCreateStageOne) {
             .filter((option) => option !== null)}
           name="estimate-radio-input"
           label={t("project_settings.estimates.create.choose_estimate_system")}
-          labelClassName="text-sm font-medium text-custom-text-200 mb-1.5"
+          labelClassName="text-13 font-medium text-secondary mb-1.5"
           wrapperClassName="relative flex flex-wrap gap-14"
           fieldClassName="relative flex items-center gap-1.5"
           buttonClassName="size-4"
@@ -70,15 +76,15 @@ export function EstimateCreateStageOne(props: TEstimateCreateStageOne) {
       {ESTIMATE_SYSTEMS[estimateSystem]?.is_available && !ESTIMATE_SYSTEMS[estimateSystem]?.is_ee && (
         <>
           <div className="space-y-1.5">
-            <div className="text-sm font-medium text-custom-text-200">
+            <div className="text-13 font-medium text-secondary">
               {t("project_settings.estimates.create.start_from_scratch")}
             </div>
             <button
-              className="border border-custom-border-200 rounded-md p-3 py-2.5 text-left space-y-1 w-full block hover:bg-custom-background-90"
+              className="block w-full space-y-1 rounded-md border border-subtle p-3 py-2.5 text-left hover:bg-layer-transparent-hover"
               onClick={() => handleEstimatePoints("custom")}
             >
-              <p className="text-base font-medium">{t("project_settings.estimates.create.custom")}</p>
-              <p className="text-xs text-custom-text-300">
+              <p className="text-14 font-medium">{t("project_settings.estimates.create.custom")}</p>
+              <p className="text-11 text-tertiary">
                 {/* TODO: Translate here */}
                 Add your own <span className="lowercase">{currentEstimateSystem.name}</span> from scratch.
               </p>
@@ -86,19 +92,19 @@ export function EstimateCreateStageOne(props: TEstimateCreateStageOne) {
           </div>
 
           <div className="space-y-1.5">
-            <div className="text-sm font-medium text-custom-text-200">
+            <div className="text-13 font-medium text-secondary">
               {t("project_settings.estimates.create.choose_template")}
             </div>
-            <div className="grid grid-cols-1 lg:grid-cols-2 gap-3">
+            <div className="grid grid-cols-1 gap-3 lg:grid-cols-2">
               {Object.keys(currentEstimateSystem.templates).map((name) =>
                 currentEstimateSystem.templates[name]?.hide ? null : (
                   <button
                     key={name}
-                    className="border border-custom-border-200 rounded-md p-3 py-2.5 text-left space-y-1 hover:bg-custom-background-90"
+                    className="space-y-1 rounded-md border border-subtle p-3 py-2.5 text-left hover:bg-surface-2"
                     onClick={() => handleEstimatePoints(name)}
                   >
-                    <p className="text-base font-medium">{currentEstimateSystem.templates[name]?.title}</p>
-                    <p className="text-xs text-custom-text-300">
+                    <p className="text-14 font-medium">{currentEstimateSystem.templates[name]?.title}</p>
+                    <p className="text-11 text-tertiary">
                       {currentEstimateSystem.templates[name]?.values
                         ?.map((template) =>
                           estimateSystem === (EEstimateSystem.TIME as TEstimateSystemKeys)
diff --git a/apps/web/core/components/estimates/delete/modal.tsx b/apps/web/core/components/estimates/delete/modal.tsx
index 681a59566..e6b39fcde 100644
--- a/apps/web/core/components/estimates/delete/modal.tsx
+++ b/apps/web/core/components/estimates/delete/modal.tsx
@@ -1,13 +1,16 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useState } from "react";
 import { observer } from "mobx-react";
 // ui
-import { PROJECT_SETTINGS_TRACKER_EVENTS } from "@plane/constants";
 import { Button } from "@plane/propel/button";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
 // hooks
-import { captureError, captureSuccess } from "@/helpers/event-tracker.helper";
 import { useProjectEstimates } from "@/hooks/store/estimates";
 import { useEstimate } from "@/hooks/store/estimates/use-estimate";
 import { useProject } from "@/hooks/store/use-project";
@@ -34,32 +37,19 @@ export const DeleteEstimateModal = observer(function DeleteEstimateModal(props:
     try {
       if (!workspaceSlug || !projectId || !estimateId) return;
       setButtonLoader(true);
-
       await deleteEstimate(workspaceSlug, projectId, estimateId);
       if (areEstimateEnabledByProjectId(projectId)) {
         await updateProject(workspaceSlug, projectId, { estimate: null });
       }
       setButtonLoader(false);
-      captureSuccess({
-        eventName: PROJECT_SETTINGS_TRACKER_EVENTS.estimate_deleted,
-        payload: {
-          id: estimateId,
-        },
-      });
       setToast({
         type: TOAST_TYPE.SUCCESS,
         title: "Estimate deleted",
         message: "Estimate has been removed from your project.",
       });
       handleClose();
-    } catch (error) {
+    } catch (_error) {
       setButtonLoader(false);
-      captureError({
-        eventName: PROJECT_SETTINGS_TRACKER_EVENTS.estimate_deleted,
-        payload: {
-          id: estimateId,
-        },
-      });
       setToast({
         type: TOAST_TYPE.ERROR,
         title: "Estimate creation failed",
@@ -72,24 +62,24 @@ export const DeleteEstimateModal = observer(function DeleteEstimateModal(props:
     <ModalCore isOpen={isOpen} position={EModalPosition.TOP} width={EModalWidth.XXL}>
       <div className="relative space-y-6 py-5">
         {/* heading */}
-        <div className="relative flex justify-between items-center gap-2 px-5">
-          <div className="text-xl font-medium text-custom-text-100">Delete Estimate System</div>
+        <div className="relative flex items-center justify-between gap-2 px-5">
+          <div className="text-18 font-medium text-primary">Delete Estimate System</div>
         </div>
 
         {/* estimate steps */}
         <div className="px-5">
-          <div className="text-base text-custom-text-200">
-            Deleting the estimate <span className="font-bold text-custom-text-100">{estimate?.name}</span>
+          <div className="text-14 text-secondary">
+            Deleting the estimate <span className="font-bold text-primary">{estimate?.name}</span>
             &nbsp;system will remove it from all work items permanently. This action cannot be undone. If you add
             estimates again, you will need to update all the work items.
           </div>
         </div>
 
-        <div className="relative flex justify-end items-center gap-3 px-5 pt-5 border-t border-custom-border-200">
-          <Button variant="neutral-primary" size="sm" onClick={handleClose} disabled={buttonLoader}>
+        <div className="relative flex items-center justify-end gap-3 border-t border-subtle px-5 pt-5">
+          <Button variant="secondary" size="lg" onClick={handleClose} disabled={buttonLoader}>
             Cancel
           </Button>
-          <Button variant="danger" size="sm" onClick={handleDeleteEstimate} disabled={buttonLoader}>
+          <Button variant="error-fill" size="lg" onClick={handleDeleteEstimate} disabled={buttonLoader}>
             {buttonLoader ? "Deleting" : "Delete Estimate"}
           </Button>
         </div>
diff --git a/apps/web/core/components/estimates/empty-screen.tsx b/apps/web/core/components/estimates/empty-screen.tsx
index 570168ced..0591a0d6c 100644
--- a/apps/web/core/components/estimates/empty-screen.tsx
+++ b/apps/web/core/components/estimates/empty-screen.tsx
@@ -1,12 +1,14 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useTheme } from "next-themes";
-import { PROJECT_SETTINGS_TRACKER_ELEMENTS, PROJECT_SETTINGS_TRACKER_EVENTS } from "@plane/constants";
 // plane imports
 import { useTranslation } from "@plane/i18n";
 // components
 import { DetailedEmptyState } from "@/components/empty-state/detailed-empty-state-root";
-// helpers
-import { captureElementAndEvent } from "@/helpers/event-tracker.helper";
 
 type TEstimateEmptyScreen = {
   onButtonClick: () => void;
@@ -25,20 +27,11 @@ export function EstimateEmptyScreen(props: TEstimateEmptyScreen) {
       title={""}
       description={""}
       assetPath={resolvedPath}
-      className="w-full !px-0 !py-0"
+      className="w-full p-0!"
       primaryButton={{
         text: t("project_settings.empty_state.estimates.primary_button"),
         onClick: () => {
           onButtonClick();
-          captureElementAndEvent({
-            element: {
-              elementName: PROJECT_SETTINGS_TRACKER_ELEMENTS.ESTIMATES_EMPTY_STATE_CREATE_BUTTON,
-            },
-            event: {
-              eventName: PROJECT_SETTINGS_TRACKER_EVENTS.estimate_created,
-              state: "SUCCESS",
-            },
-          });
         },
       }}
     />
diff --git a/apps/web/core/components/estimates/estimate-disable-switch.tsx b/apps/web/core/components/estimates/estimate-disable-switch.tsx
index 705ecfcb4..13bf7ce66 100644
--- a/apps/web/core/components/estimates/estimate-disable-switch.tsx
+++ b/apps/web/core/components/estimates/estimate-disable-switch.tsx
@@ -1,11 +1,14 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
-import { PROJECT_SETTINGS_TRACKER_ELEMENTS, PROJECT_SETTINGS_TRACKER_EVENTS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import { ToggleSwitch } from "@plane/ui";
 // hooks
-import { captureElementAndEvent } from "@/helpers/event-tracker.helper";
 import { useProjectEstimates } from "@/hooks/store/estimates";
 import { useProject } from "@/hooks/store/use-project";
 // i18n
@@ -32,15 +35,6 @@ export const EstimateDisableSwitch = observer(function EstimateDisableSwitch(pro
       await updateProject(workspaceSlug, projectId, {
         estimate: currentProjectActiveEstimate ? null : currentActiveEstimateId,
       });
-      captureElementAndEvent({
-        element: {
-          elementName: PROJECT_SETTINGS_TRACKER_ELEMENTS.ESTIMATES_TOGGLE_BUTTON,
-        },
-        event: {
-          eventName: PROJECT_SETTINGS_TRACKER_EVENTS.estimates_toggle,
-          state: "SUCCESS",
-        },
-      });
       setToast({
         type: TOAST_TYPE.SUCCESS,
         title: currentProjectActiveEstimate
@@ -50,16 +44,7 @@ export const EstimateDisableSwitch = observer(function EstimateDisableSwitch(pro
           ? t("project_settings.estimates.toasts.disabled.success.message")
           : t("project_settings.estimates.toasts.enabled.success.message"),
       });
-    } catch (err) {
-      captureElementAndEvent({
-        element: {
-          elementName: PROJECT_SETTINGS_TRACKER_ELEMENTS.ESTIMATES_TOGGLE_BUTTON,
-        },
-        event: {
-          eventName: PROJECT_SETTINGS_TRACKER_EVENTS.estimates_toggle,
-          state: "ERROR",
-        },
-      });
+    } catch (_err) {
       setToast({
         type: TOAST_TYPE.ERROR,
         title: t("project_settings.estimates.toasts.disabled.error.title"),
diff --git a/apps/web/core/components/estimates/estimate-list-item.tsx b/apps/web/core/components/estimates/estimate-list-item.tsx
index d46dbc076..e16dcf991 100644
--- a/apps/web/core/components/estimates/estimate-list-item.tsx
+++ b/apps/web/core/components/estimates/estimate-list-item.tsx
@@ -1,12 +1,19 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
+// plane imports
 import { EEstimateSystem } from "@plane/constants";
-import { convertMinutesToHoursMinutesString, cn } from "@plane/utils";
-// helpers
+import { convertMinutesToHoursMinutesString } from "@plane/utils";
+// components
+import { SettingsBoxedControlItem } from "@/components/settings/boxed-control-item";
 // hooks
 import { useProjectEstimates } from "@/hooks/store/estimates";
 import { useEstimate } from "@/hooks/store/estimates/use-estimate";
-// plane web components
+// plane web imports
 import { EstimateListItemButtons } from "@/plane-web/components/estimates";
 
 type TEstimateListItem = {
@@ -19,40 +26,31 @@ type TEstimateListItem = {
 };
 
 export const EstimateListItem = observer(function EstimateListItem(props: TEstimateListItem) {
-  const { estimateId, isAdmin, isEstimateEnabled, isEditable } = props;
-  // hooks
+  const { estimateId } = props;
+  // store hooks
   const { estimateById } = useProjectEstimates();
   const { estimatePointIds, estimatePointById } = useEstimate(estimateId);
   const currentEstimate = estimateById(estimateId);
-
   // derived values
   const estimatePointValues = estimatePointIds?.map((estimatePointId) => {
     const estimatePoint = estimatePointById(estimatePointId);
     if (estimatePoint) return estimatePoint.value;
   });
 
-  if (!currentEstimate) return <></>;
+  if (!currentEstimate) return null;
+
   return (
-    <div
-      className={cn(
-        "relative border-b border-custom-border-200 flex justify-between items-center gap-3 py-3.5",
-        isAdmin && isEditable && isEstimateEnabled ? `text-custom-text-100` : `text-custom-text-200`
-      )}
-    >
-      <div className="space-y-1">
-        <h3 className="font-medium text-base">{currentEstimate?.name}</h3>
-        <p className="text-xs">
-          {estimatePointValues
-            ?.map((estimatePointValue) => {
-              if (currentEstimate?.type === EEstimateSystem.TIME) {
-                return convertMinutesToHoursMinutesString(Number(estimatePointValue));
-              }
-              return estimatePointValue;
-            })
-            .join(", ")}
-        </p>
-      </div>
-      <EstimateListItemButtons {...props} />
-    </div>
+    <SettingsBoxedControlItem
+      title={currentEstimate.name}
+      description={estimatePointValues
+        ?.map((estimatePointValue) => {
+          if (currentEstimate.type === EEstimateSystem.TIME) {
+            return convertMinutesToHoursMinutesString(Number(estimatePointValue));
+          }
+          return estimatePointValue;
+        })
+        .join(", ")}
+      control={<EstimateListItemButtons {...props} />}
+    />
   );
 });
diff --git a/apps/web/core/components/estimates/estimate-list.tsx b/apps/web/core/components/estimates/estimate-list.tsx
index f52055e76..6e919c557 100644
--- a/apps/web/core/components/estimates/estimate-list.tsx
+++ b/apps/web/core/components/estimates/estimate-list.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 // local imports
 import { EstimateListItem } from "./estimate-list-item";
diff --git a/apps/web/core/components/estimates/estimate-search.tsx b/apps/web/core/components/estimates/estimate-search.tsx
index d67403c9d..0b05f6716 100644
--- a/apps/web/core/components/estimates/estimate-search.tsx
+++ b/apps/web/core/components/estimates/estimate-search.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 
 export const EstimateSearch = observer(function EstimateSearch() {
diff --git a/apps/web/core/components/estimates/index.ts b/apps/web/core/components/estimates/index.ts
index 1efe34c51..d98033459 100644
--- a/apps/web/core/components/estimates/index.ts
+++ b/apps/web/core/components/estimates/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./root";
diff --git a/apps/web/core/components/estimates/inputs/index.ts b/apps/web/core/components/estimates/inputs/index.ts
index 1efe34c51..d98033459 100644
--- a/apps/web/core/components/estimates/inputs/index.ts
+++ b/apps/web/core/components/estimates/inputs/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./root";
diff --git a/apps/web/core/components/estimates/inputs/number-input.tsx b/apps/web/core/components/estimates/inputs/number-input.tsx
index fec63a73d..3e4d30b73 100644
--- a/apps/web/core/components/estimates/inputs/number-input.tsx
+++ b/apps/web/core/components/estimates/inputs/number-input.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useTranslation } from "@plane/i18n";
 type TEstimateNumberInputProps = {
   value?: number;
@@ -15,10 +20,10 @@ export function EstimateNumberInput(props: TEstimateNumberInputProps) {
     <input
       value={value}
       onChange={(e) => handleEstimateInputValue(e.target.value)}
-      className="border-none focus:ring-0 focus:border-0 focus:outline-none px-2 py-2 w-full bg-transparent text-sm"
+      className="w-full border-none bg-transparent px-2 py-2 text-13 focus:border-0 focus:ring-0 focus:outline-none"
       placeholder={t("project_settings.estimates.create.enter_estimate_point")}
       autoFocus
-      type="number"
+      step="any"
     />
   );
 }
diff --git a/apps/web/core/components/estimates/inputs/root.tsx b/apps/web/core/components/estimates/inputs/root.tsx
index 117f68fe7..86b743ff7 100644
--- a/apps/web/core/components/estimates/inputs/root.tsx
+++ b/apps/web/core/components/estimates/inputs/root.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // plane imports
 import type { TEstimateSystemKeys } from "@plane/types";
 import { EEstimateSystem } from "@plane/types";
@@ -21,7 +26,7 @@ export function EstimateInputRoot(props: TEstimateInputRootProps) {
     case EEstimateSystem.POINTS:
       return (
         <EstimateNumberInput
-          value={value ? parseInt(value) : undefined}
+          value={value ? parseFloat(value) : undefined}
           handleEstimateInputValue={handleEstimateInputValue}
         />
       );
diff --git a/apps/web/core/components/estimates/inputs/text-input.tsx b/apps/web/core/components/estimates/inputs/text-input.tsx
index 2e6d6552c..50fe55da8 100644
--- a/apps/web/core/components/estimates/inputs/text-input.tsx
+++ b/apps/web/core/components/estimates/inputs/text-input.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useTranslation } from "@plane/i18n";
 type TEstimateTextInputProps = {
   value?: string;
@@ -15,7 +20,7 @@ export function EstimateTextInput(props: TEstimateTextInputProps) {
     <input
       value={value}
       onChange={(e) => handleEstimateInputValue(e.target.value)}
-      className="border-none focus:ring-0 focus:border-0 focus:outline-none px-3 py-2 w-full bg-transparent text-sm"
+      className="w-full border-none bg-transparent px-3 py-2 text-13 focus:border-0 focus:ring-0 focus:outline-none"
       placeholder={t("project_settings.estimates.create.enter_estimate_point")}
       autoFocus
       type="text"
diff --git a/apps/web/core/components/estimates/loader-screen.tsx b/apps/web/core/components/estimates/loader-screen.tsx
index 29474b9c9..d858df1d9 100644
--- a/apps/web/core/components/estimates/loader-screen.tsx
+++ b/apps/web/core/components/estimates/loader-screen.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { Loader } from "@plane/ui";
 
 export function EstimateLoaderScreen() {
diff --git a/apps/web/core/components/estimates/points/create-root.tsx b/apps/web/core/components/estimates/points/create-root.tsx
index dab1b6bb5..ad3c57e9f 100644
--- a/apps/web/core/components/estimates/points/create-root.tsx
+++ b/apps/web/core/components/estimates/points/create-root.tsx
@@ -1,10 +1,16 @@
-import type { Dispatch, FC, SetStateAction } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { Dispatch, SetStateAction } from "react";
 import { useCallback, useState } from "react";
 import { observer } from "mobx-react";
-import { Plus } from "lucide-react";
 // plane imports
 import { estimateCount } from "@plane/constants";
 import { Button } from "@plane/propel/button";
+import { PlusIcon } from "@plane/propel/icons";
 import type { TEstimatePointsObject, TEstimateSystemKeys, TEstimateTypeError } from "@plane/types";
 import { Sortable } from "@plane/ui";
 // local imports
@@ -110,7 +116,7 @@ export const EstimatePointCreateRoot = observer(function EstimatePointCreateRoot
   if (!workspaceSlug || !projectId) return <></>;
   return (
     <div className="space-y-1">
-      <div className="text-sm font-medium text-custom-text-200 capitalize">{estimateType}</div>
+      <div className="text-13 font-medium text-secondary capitalize">{estimateType}</div>
 
       <div>
         <Sortable
@@ -165,7 +171,7 @@ export const EstimatePointCreateRoot = observer(function EstimatePointCreateRoot
           />
         ))}
       {estimatePoints && estimatePoints.length + (estimatePointCreate?.length || 0) <= estimateCount.max - 1 && (
-        <Button variant="link-primary" size="sm" prependIcon={<Plus />} onClick={handleCreate}>
+        <Button variant="link" prependIcon={<PlusIcon />} onClick={handleCreate}>
           Add {estimateType}
         </Button>
       )}
diff --git a/apps/web/core/components/estimates/points/create.tsx b/apps/web/core/components/estimates/points/create.tsx
index 6d198d74d..50aced9cd 100644
--- a/apps/web/core/components/estimates/points/create.tsx
+++ b/apps/web/core/components/estimates/points/create.tsx
@@ -1,10 +1,16 @@
-import type { FC, FormEvent } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { FormEvent } from "react";
 import { useState } from "react";
 import { observer } from "mobx-react";
-import { Check, Info } from "lucide-react";
+import { Info } from "lucide-react";
 import { EEstimateSystem, MAX_ESTIMATE_POINT_INPUT_LENGTH } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { CloseIcon } from "@plane/propel/icons";
+import { CheckIcon, CloseIcon } from "@plane/propel/icons";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import { Tooltip } from "@plane/propel/tooltip";
 import type { TEstimatePointsObject, TEstimateSystemKeys, TEstimateTypeErrorObject } from "@plane/types";
@@ -160,18 +166,12 @@ export const EstimatePointCreate = observer(function EstimatePointCreate(props:
         handleEstimatePointError(estimateInputValue, t("project_settings.estimates.validation.empty"));
   };
 
-  // derived values
-  const inputProps = {
-    type: "text",
-    maxlength: MAX_ESTIMATE_POINT_INPUT_LENGTH,
-  };
-
   return (
-    <form onSubmit={handleCreate} className="relative flex items-center gap-2 text-base pr-2.5">
+    <form onSubmit={handleCreate} className="relative flex items-center gap-2 pr-2.5 text-14">
       <div
         className={cn(
-          "relative w-full border rounded flex items-center my-1",
-          estimatePointError?.message ? `border-red-500` : `border-custom-border-200`
+          "relative my-1 flex w-full items-center rounded-sm border",
+          estimatePointError?.message ? `border-danger-strong` : `border-subtle`
         )}
       >
         <EstimateInputRoot
@@ -181,7 +181,7 @@ export const EstimatePointCreate = observer(function EstimatePointCreate(props:
         />
         {estimatePointError?.message && (
           <Tooltip tooltipContent={estimatePointError?.message} position="bottom">
-            <div className="flex-shrink-0 w-3.5 h-3.5 overflow-hidden mr-3 relative flex justify-center items-center text-red-500">
+            <div className="relative mr-3 flex h-3.5 w-3.5 flex-shrink-0 items-center justify-center overflow-hidden text-danger-primary">
               <Info size={14} />
             </div>
           </Tooltip>
@@ -191,19 +191,19 @@ export const EstimatePointCreate = observer(function EstimatePointCreate(props:
       {estimateInputValue && estimateInputValue.length > 0 && (
         <button
           type="submit"
-          className="rounded-sm w-6 h-6 flex-shrink-0 relative flex justify-center items-center hover:bg-custom-background-80 transition-colors cursor-pointer text-green-500"
+          className="relative flex h-6 w-6 flex-shrink-0 cursor-pointer items-center justify-center rounded-xs text-success-primary transition-colors hover:bg-layer-1"
           disabled={loader}
         >
-          {loader ? <Spinner className="w-4 h-4" /> : <Check size={14} />}
+          {loader ? <Spinner className="h-4 w-4" /> : <CheckIcon width={14} height={14} />}
         </button>
       )}
       <button
         type="button"
-        className="rounded-sm w-6 h-6 flex-shrink-0 relative flex justify-center items-center hover:bg-custom-background-80 transition-colors cursor-pointer"
+        className="relative flex h-6 w-6 flex-shrink-0 cursor-pointer items-center justify-center rounded-xs transition-colors hover:bg-layer-1"
         onClick={handleClose}
         disabled={loader}
       >
-        <CloseIcon height={14} width={14} className="text-custom-text-200" />
+        <CloseIcon height={14} width={14} className="text-secondary" />
       </button>
     </form>
   );
diff --git a/apps/web/core/components/estimates/points/index.ts b/apps/web/core/components/estimates/points/index.ts
index 2ef48eb2a..26c9e6ed3 100644
--- a/apps/web/core/components/estimates/points/index.ts
+++ b/apps/web/core/components/estimates/points/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./create-root";
diff --git a/apps/web/core/components/estimates/points/preview.tsx b/apps/web/core/components/estimates/points/preview.tsx
index 9f2c03e0f..59da01f93 100644
--- a/apps/web/core/components/estimates/points/preview.tsx
+++ b/apps/web/core/components/estimates/points/preview.tsx
@@ -1,10 +1,16 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useEffect, useRef, useState } from "react";
 import { observer } from "mobx-react";
-import { GripVertical, Pencil, Trash2 } from "lucide-react";
+import { GripVertical } from "lucide-react";
 // plane imports
 import { EEstimateSystem, estimateCount } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
+import { EditIcon, TrashIcon } from "@plane/propel/icons";
 import type { TEstimatePointsObject, TEstimateSystemKeys, TEstimateTypeErrorObject } from "@plane/types";
 import { convertMinutesToHoursMinutesString } from "@plane/utils";
 // plane web imports
@@ -56,35 +62,33 @@ export const EstimatePointItemPreview = observer(function EstimatePointItemPrevi
   return (
     <div>
       {!estimatePointEditToggle && !estimatePointDeleteToggle && (
-        <div className="border border-custom-border-200 rounded relative flex items-center px-1 gap-2 text-base my-1">
-          <div className="rounded-sm w-6 h-6 flex-shrink-0 relative flex justify-center items-center hover:bg-custom-background-80 transition-colors cursor-pointer">
-            <GripVertical size={14} className="text-custom-text-200" />
+        <div className="relative my-1 flex items-center gap-2 rounded-sm border border-subtle px-1 text-14">
+          <div className="relative flex h-6 w-6 flex-shrink-0 cursor-pointer items-center justify-center rounded-xs transition-colors hover:bg-layer-1">
+            <GripVertical size={14} className="text-secondary" />
           </div>
-          <div ref={EstimatePointValueRef} className="py-2 w-full text-sm">
+          <div ref={EstimatePointValueRef} className="w-full py-2 text-13">
             {estimatePoint?.value ? (
               `${estimateType === EEstimateSystem.TIME ? convertMinutesToHoursMinutesString(Number(estimatePoint?.value)) : estimatePoint?.value}`
             ) : (
-              <span className="text-custom-text-400">
-                {t("project_settings.estimates.create.enter_estimate_point")}
-              </span>
+              <span className="text-placeholder">{t("project_settings.estimates.create.enter_estimate_point")}</span>
             )}
           </div>
           <div
-            className="rounded-sm w-6 h-6 flex-shrink-0 relative flex justify-center items-center hover:bg-custom-background-80 transition-colors cursor-pointer"
+            className="relative flex h-6 w-6 flex-shrink-0 cursor-pointer items-center justify-center rounded-xs transition-colors hover:bg-layer-1"
             onClick={() => setEstimatePointEditToggle(true)}
           >
-            <Pencil size={14} className="text-custom-text-200" />
+            <EditIcon width={14} height={14} className="text-secondary" />
           </div>
           {estimatePoints.length > estimateCount.min && (
             <div
-              className="rounded-sm w-6 h-6 flex-shrink-0 relative flex justify-center items-center hover:bg-custom-background-80 transition-colors cursor-pointer"
+              className="relative flex h-6 w-6 flex-shrink-0 cursor-pointer items-center justify-center rounded-xs transition-colors hover:bg-layer-1"
               onClick={() =>
                 estimateId && estimatePointId
                   ? setEstimatePointDeleteToggle(true)
                   : handleEstimatePointValueRemove && handleEstimatePointValueRemove()
               }
             >
-              <Trash2 size={14} className="text-custom-text-200" />
+              <TrashIcon width={14} height={14} className="text-secondary" />
             </div>
           )}
         </div>
diff --git a/apps/web/core/components/estimates/points/update.tsx b/apps/web/core/components/estimates/points/update.tsx
index 1f60bbd07..e4fdc639c 100644
--- a/apps/web/core/components/estimates/points/update.tsx
+++ b/apps/web/core/components/estimates/points/update.tsx
@@ -1,10 +1,16 @@
-import type { FC, FormEvent } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { FormEvent } from "react";
 import { useEffect, useState } from "react";
 import { observer } from "mobx-react";
-import { Check, Info } from "lucide-react";
+import { Info } from "lucide-react";
 import { EEstimateSystem, MAX_ESTIMATE_POINT_INPUT_LENGTH } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { CloseIcon } from "@plane/propel/icons";
+import { CheckIcon, CloseIcon } from "@plane/propel/icons";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import { Tooltip } from "@plane/propel/tooltip";
 import type { TEstimatePointsObject, TEstimateSystemKeys, TEstimateTypeErrorObject } from "@plane/types";
@@ -166,11 +172,11 @@ export const EstimatePointUpdate = observer(function EstimatePointUpdate(props:
   };
 
   return (
-    <form onSubmit={handleUpdate} className="relative flex items-center gap-2 text-base pr-2.5">
+    <form onSubmit={handleUpdate} className="relative flex items-center gap-2 pr-2.5 text-14">
       <div
         className={cn(
-          "relative w-full border rounded flex items-center my-1",
-          estimatePointError?.message ? `border-red-500` : `border-custom-border-200`
+          "relative my-1 flex w-full items-center rounded-sm border",
+          estimatePointError?.message ? `border-danger-strong` : `border-subtle`
         )}
       >
         <EstimateInputRoot
@@ -188,7 +194,7 @@ export const EstimatePointUpdate = observer(function EstimatePointUpdate(props:
               }
               position="bottom"
             >
-              <div className="flex-shrink-0 w-3.5 h-3.5 overflow-hidden mr-3 relative flex justify-center items-center text-red-500">
+              <div className="relative mr-3 flex h-3.5 w-3.5 flex-shrink-0 items-center justify-center overflow-hidden text-danger-primary">
                 <Info size={14} />
               </div>
             </Tooltip>
@@ -199,19 +205,19 @@ export const EstimatePointUpdate = observer(function EstimatePointUpdate(props:
       {estimateInputValue && estimateInputValue.length > 0 && (
         <button
           type="submit"
-          className="rounded-sm w-6 h-6 flex-shrink-0 relative flex justify-center items-center hover:bg-custom-background-80 transition-colors cursor-pointer text-green-500"
+          className="relative flex h-6 w-6 flex-shrink-0 cursor-pointer items-center justify-center rounded-xs text-success-primary transition-colors hover:bg-layer-1"
           disabled={loader}
         >
-          {loader ? <Spinner className="w-4 h-4" /> : <Check size={14} />}
+          {loader ? <Spinner className="h-4 w-4" /> : <CheckIcon width={14} height={14} />}
         </button>
       )}
       <button
         type="button"
-        className="rounded-sm w-6 h-6 flex-shrink-0 relative flex justify-center items-center hover:bg-custom-background-80 transition-colors cursor-pointer"
+        className="relative flex h-6 w-6 flex-shrink-0 cursor-pointer items-center justify-center rounded-xs transition-colors hover:bg-layer-1"
         onClick={handleClose}
         disabled={loader}
       >
-        <CloseIcon height={14} width={14} className="text-custom-text-200" />
+        <CloseIcon height={14} width={14} className="text-secondary" />
       </button>
     </form>
   );
diff --git a/apps/web/core/components/estimates/radio-select.tsx b/apps/web/core/components/estimates/radio-select.tsx
index 7077a1182..0d3bd338c 100644
--- a/apps/web/core/components/estimates/radio-select.tsx
+++ b/apps/web/core/components/estimates/radio-select.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 // helpers
 import { cn } from "@plane/utils";
@@ -53,8 +59,8 @@ export function RadioInput({
             key={index}
             onClick={() => !disabled && setSelected(value)}
             className={cn(
-              "flex items-center gap-2 text-base",
-              disabled ? `bg-custom-background-200 border-custom-border-200 cursor-not-allowed` : ``,
+              "flex items-center gap-2 text-14",
+              disabled ? `cursor-not-allowed border-subtle bg-layer-1` : ``,
               inputFieldClassName
             )}
           >
@@ -62,9 +68,9 @@ export function RadioInput({
               id={`${name}_${index}`}
               name={name}
               className={cn(
-                `group flex flex-shrink-0 size-5 items-center justify-center rounded-full border border-custom-border-400 bg-custom-background-500 cursor-pointer`,
-                selected === value ? `bg-custom-primary-200 border-custom-primary-100 ` : ``,
-                disabled ? `bg-custom-background-200 border-custom-border-200 cursor-not-allowed` : ``,
+                `group flex size-5 flex-shrink-0 cursor-pointer items-center justify-center rounded-full border border-strong-1 bg-layer-2`,
+                selected === value ? `border-accent-strong bg-accent-primary/80` : ``,
+                disabled ? `cursor-not-allowed border-subtle bg-layer-1` : ``,
                 inputButtonClassName
               )}
               type="radio"
@@ -72,7 +78,7 @@ export function RadioInput({
               disabled={disabled}
               checked={selected === value}
             />
-            <label htmlFor={`${name}_${index}`} className="cursor-pointer w-full">
+            <label htmlFor={`${name}_${index}`} className="w-full cursor-pointer">
               {label}
             </label>
           </div>
diff --git a/apps/web/core/components/estimates/root.tsx b/apps/web/core/components/estimates/root.tsx
index ff4cb5313..85d18cf5b 100644
--- a/apps/web/core/components/estimates/root.tsx
+++ b/apps/web/core/components/estimates/root.tsx
@@ -1,9 +1,17 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useState } from "react";
 import { observer } from "mobx-react";
 import useSWR from "swr";
 // plane imports
 import { useTranslation } from "@plane/i18n";
+// components
+import { SettingsBoxedControlItem } from "@/components/settings/boxed-control-item";
+import { SettingsHeading } from "@/components/settings/heading";
 // hooks
 import { EmptyStateCompact } from "@plane/propel/empty-state";
 import { useProjectEstimates } from "@/hooks/store/estimates";
@@ -11,7 +19,6 @@ import { useProject } from "@/hooks/store/use-project";
 // plane web components
 import { UpdateEstimateModal } from "@/plane-web/components/estimates";
 // local imports
-import { SettingsHeading } from "../settings/heading";
 import { CreateEstimateModal } from "./create/modal";
 import { DeleteEstimateModal } from "./delete/modal";
 import { EstimateDisableSwitch } from "./estimate-disable-switch";
@@ -41,40 +48,43 @@ export const EstimateRoot = observer(function EstimateRoot(props: TEstimateRoot)
     async () => workspaceSlug && projectId && getProjectEstimates(workspaceSlug, projectId)
   );
 
+  if (loader === "init-loader" || isSWRLoading) {
+    return <EstimateLoaderScreen />;
+  }
+
   return (
-    <div className="container mx-auto">
-      {loader === "init-loader" || isSWRLoading ? (
-        <EstimateLoaderScreen />
-      ) : (
-        <div className="space-y-2">
-          {/* header */}
-
-          <SettingsHeading
-            title={t("project_settings.estimates.heading")}
-            description={t("project_settings.estimates.description")}
-          />
-
+    <>
+      <div>
+        {/* header */}
+        <SettingsHeading
+          title={t("project_settings.estimates.heading")}
+          description={t("project_settings.estimates.description")}
+        />
+        <div className="mt-6">
           {/* current active estimate section */}
           {currentActiveEstimateId ? (
-            <div className="">
+            <>
               {/* estimates activated deactivated section */}
-              <div className="relative border-b border-custom-border-200 pb-4 flex justify-between items-center gap-3">
-                <div className="space-y-1">
-                  <h3 className="text-lg font-medium text-custom-text-100">{t("project_settings.estimates.title")}</h3>
-                  <p className="text-sm text-custom-text-200">{t("project_settings.estimates.enable_description")}</p>
-                </div>
-                <EstimateDisableSwitch workspaceSlug={workspaceSlug} projectId={projectId} isAdmin={isAdmin} />
-              </div>
-              {/* active estimates section */}
-              <EstimateList
-                estimateIds={[currentActiveEstimateId]}
-                isAdmin={isAdmin}
-                isEstimateEnabled={Boolean(currentProjectDetails?.estimate)}
-                isEditable
-                onEditClick={(estimateId: string) => setEstimateToUpdate(estimateId)}
-                onDeleteClick={(estimateId: string) => setEstimateToDelete(estimateId)}
+              <SettingsBoxedControlItem
+                title={t("project_settings.estimates.title")}
+                description={t("project_settings.estimates.enable_description")}
+                control={
+                  <EstimateDisableSwitch workspaceSlug={workspaceSlug} projectId={projectId} isAdmin={isAdmin} />
+                }
               />
-            </div>
+              {/* active estimates section */}
+              <div className="mt-12 flex flex-col gap-y-4">
+                <SettingsHeading title="Estimates list" variant="h6" />
+                <EstimateList
+                  estimateIds={[currentActiveEstimateId]}
+                  isAdmin={isAdmin}
+                  isEstimateEnabled={Boolean(currentProjectDetails?.estimate)}
+                  isEditable
+                  onEditClick={(estimateId: string) => setEstimateToUpdate(estimateId)}
+                  onDeleteClick={(estimateId: string) => setEstimateToDelete(estimateId)}
+                />
+              </div>
+            </>
           ) : (
             <EmptyStateCompact
               assetKey="estimate"
@@ -91,31 +101,32 @@ export const EstimateRoot = observer(function EstimateRoot(props: TEstimateRoot)
               rootClassName="py-20"
             />
           )}
-
           {/* archived estimates section */}
           {archivedEstimateIds && archivedEstimateIds.length > 0 && (
-            <div className="">
-              <div className="border-b border-custom-border-200 space-y-1 pb-4">
-                <h3 className="text-lg font-medium text-custom-text-100">Archived estimates</h3>
-                <p className="text-sm text-custom-text-200">
-                  Estimates have gone through a change, these are the estimates you had in your older versions which
-                  were not in use. Read more about them&nbsp;
-                  <a
-                    href={"https://docs.plane.so/core-concepts/projects/run-project#estimate"}
-                    target="_blank"
-                    className="text-custom-primary-100/80 hover:text-custom-primary-100"
-                    rel="noreferrer"
-                  >
-                    here.
-                  </a>
-                </p>
-              </div>
+            <div className="mt-12 flex flex-col gap-y-4">
+              <SettingsHeading
+                title="Archived estimates"
+                description={
+                  <>
+                    Estimates have gone through a change, these are the estimates you had in your older versions which
+                    were not in use. Read more about them&nbsp;
+                    <a
+                      href={"https://docs.plane.so/core-concepts/projects/run-project#estimate"}
+                      target="_blank"
+                      className="text-accent-primary/80 hover:text-accent-primary"
+                      rel="noreferrer"
+                    >
+                      here.
+                    </a>
+                  </>
+                }
+                variant="h6"
+              />
               <EstimateList estimateIds={archivedEstimateIds} isAdmin={isAdmin} />
             </div>
           )}
         </div>
-      )}
-
+      </div>
       {/* CRUD modals */}
       <CreateEstimateModal
         workspaceSlug={workspaceSlug}
@@ -137,6 +148,6 @@ export const EstimateRoot = observer(function EstimateRoot(props: TEstimateRoot)
         isOpen={estimateToDelete ? true : false}
         handleClose={() => setEstimateToDelete(undefined)}
       />
-    </div>
+    </>
   );
 });
diff --git a/apps/web/core/components/exporter/column.tsx b/apps/web/core/components/exporter/column.tsx
index 429d0bb29..5fe387ecd 100644
--- a/apps/web/core/components/exporter/column.tsx
+++ b/apps/web/core/components/exporter/column.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { Download } from "lucide-react";
 import type { IExportData } from "@plane/types";
 import { getDate, getFileURL, renderFormattedDate } from "@plane/utils";
@@ -21,15 +27,15 @@ export const useExportColumns = () => {
           <div className="flex items-center gap-x-2">
             <div>
               {avatar_url && avatar_url.trim() !== "" ? (
-                <span className="relative flex h-4 w-4 items-center justify-center rounded-full capitalize text-white">
+                <span className="relative flex h-4 w-4 items-center justify-center rounded-full text-on-color capitalize">
                   <img
                     src={getFileURL(avatar_url)}
-                    className="absolute left-0 top-0 h-full w-full rounded-full object-cover"
+                    className="absolute top-0 left-0 h-full w-full rounded-full object-cover"
                     alt={display_name || email}
                   />
                 </span>
               ) : (
-                <span className="relative flex h-4 w-4 items-center justify-center rounded-full bg-gray-700 capitalize text-white text-xs">
+                <span className="bg-gray-700 relative flex h-4 w-4 items-center justify-center rounded-full text-11 text-on-color capitalize">
                   {(email ?? display_name ?? "?")[0]}
                 </span>
               )}
@@ -48,13 +54,13 @@ export const useExportColumns = () => {
     {
       key: "Exported projects",
       content: "Exported projects",
-      tdRender: (rowData: RowData) => <div className="text-sm">{rowData.project.length} project(s)</div>,
+      tdRender: (rowData: RowData) => <div className="text-13">{rowData.project.length} project(s)</div>,
     },
     {
       key: "Format",
       content: "Format",
       tdRender: (rowData: RowData) => (
-        <span className="text-sm">
+        <span className="text-13">
           {rowData.provider === "csv"
             ? "CSV"
             : rowData.provider === "xlsx"
@@ -70,13 +76,13 @@ export const useExportColumns = () => {
       content: "Status",
       tdRender: (rowData: RowData) => (
         <span
-          className={`rounded text-xs px-2 py-1 capitalize ${
+          className={`rounded-sm px-2 py-1 text-11 capitalize ${
             rowData.status === "completed"
-              ? "bg-green-500/20 text-green-500"
+              ? "bg-success-subtle text-success-primary"
               : rowData.status === "processing"
                 ? "bg-yellow-500/20 text-yellow-500"
                 : rowData.status === "failed"
-                  ? "bg-red-500/20 text-red-500"
+                  ? "bg-danger-subtle text-danger-primary"
                   : rowData.status === "expired"
                     ? "bg-orange-500/20 text-orange-500"
                     : "bg-gray-500/20 text-gray-500"
@@ -94,7 +100,7 @@ export const useExportColumns = () => {
           <>
             {rowData.status == "completed" ? (
               <a target="_blank" href={rowData?.url} rel="noopener noreferrer">
-                <button className="w-full flex items-center gap-1 text-custom-primary-100 font-medium">
+                <button className="flex w-full items-center gap-1 font-medium text-accent-primary">
                   <Download className="h-4 w-4" />
                   <div>Download</div>
                 </button>
@@ -104,7 +110,7 @@ export const useExportColumns = () => {
             )}
           </>
         ) : (
-          <div className="text-xs text-red-500">Expired</div>
+          <div className="text-11 text-danger-primary">Expired</div>
         ),
     },
   ];
diff --git a/apps/web/core/components/exporter/export-form.tsx b/apps/web/core/components/exporter/export-form.tsx
index 941d7b466..8fde52e1b 100644
--- a/apps/web/core/components/exporter/export-form.tsx
+++ b/apps/web/core/components/exporter/export-form.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useState } from "react";
 import { intersection } from "lodash-es";
 import { observer } from "mobx-react";
@@ -8,8 +14,6 @@ import {
   EUserPermissionsLevel,
   EXPORTERS_LIST,
   // ISSUE_DISPLAY_FILTERS_BY_PAGE,
-  WORKSPACE_SETTINGS_TRACKER_EVENTS,
-  WORKSPACE_SETTINGS_TRACKER_ELEMENTS,
 } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { Button } from "@plane/propel/button";
@@ -20,10 +24,11 @@ import type { TWorkItemFilterExpression } from "@plane/types";
 import { CustomSearchSelect, CustomSelect } from "@plane/ui";
 // import { WorkspaceLevelWorkItemFiltersHOC } from "@/components/work-item-filters/filters-hoc/workspace-level";
 // import { WorkItemFiltersRow } from "@/components/work-item-filters/filters-row";
-import { captureError, captureSuccess } from "@/helpers/event-tracker.helper";
 import { useProject } from "@/hooks/store/use-project";
 import { useUser, useUserPermissions } from "@/hooks/store/user";
 import { ProjectExportService } from "@/services/project/project-export.service";
+// local imports
+import { SettingsBoxedControlItem } from "../settings/boxed-control-item";
 
 type Props = {
   workspaceSlug: string;
@@ -84,7 +89,7 @@ export const ExportForm = observer(function ExportForm(props: Props) {
       query: `${projectDetails?.name} ${projectDetails?.identifier}`,
       content: (
         <div className="flex items-center gap-2">
-          <span className="text-[0.65rem] text-custom-text-200 flex-shrink-0">{projectDetails?.identifier}</span>
+          <span className="flex-shrink-0 text-10 text-secondary">{projectDetails?.identifier}</span>
           <span className="truncate">{projectDetails?.name}</span>
         </div>
       ),
@@ -105,12 +110,6 @@ export const ExportForm = observer(function ExportForm(props: Props) {
         await projectExportService.csvExport(workspaceSlug, payload);
         mutateServices();
         setExportLoading(false);
-        captureSuccess({
-          eventName: WORKSPACE_SETTINGS_TRACKER_EVENTS.csv_exported,
-          payload: {
-            provider: formData.provider.provider,
-          },
-        });
         setToast({
           type: TOAST_TYPE.SUCCESS,
           title: t("workspace_settings.settings.exports.modal.toasts.success.title"),
@@ -125,15 +124,8 @@ export const ExportForm = observer(function ExportForm(props: Props) {
                     : "",
           }),
         });
-      } catch (error) {
+      } catch (_error) {
         setExportLoading(false);
-        captureError({
-          eventName: WORKSPACE_SETTINGS_TRACKER_EVENTS.csv_exported,
-          payload: {
-            provider: formData.provider.provider,
-          },
-          error: error as Error,
-        });
         setToast({
           type: TOAST_TYPE.ERROR,
           title: t("error"),
@@ -150,78 +142,85 @@ export const ExportForm = observer(function ExportForm(props: Props) {
       onSubmit={(e) => {
         void handleSubmit(ExportCSVToMail)(e);
       }}
-      className="flex flex-col gap-4 mt-4"
+      className="flex flex-col gap-5"
     >
-      <div className="flex gap-4">
+      <div className="rounded-lg border border-subtle bg-layer-2">
         {/* Project Selector */}
-        <div className="w-1/2">
-          <div className="text-sm font-medium text-custom-text-200 mb-2">
-            {t("workspace_settings.settings.exports.exporting_projects")}
-          </div>
-          <Controller
-            control={control}
-            name="project"
-            disabled={!isMember && (!hasProjects || !canPerformAnyCreateAction)}
-            render={({ field: { value, onChange } }) => (
-              <CustomSearchSelect
-                value={value ?? []}
-                onChange={(val: string[]) => onChange(val)}
-                options={options}
-                input
-                label={
-                  value && value.length > 0
-                    ? value
-                        .map((projectId) => {
-                          const projectDetails = getProjectById(projectId);
+        <SettingsBoxedControlItem
+          className="rounded-none border-0 border-b"
+          title={t("workspace_settings.settings.exports.exporting_projects")}
+          control={
+            <Controller
+              control={control}
+              name="project"
+              disabled={!isMember && (!hasProjects || !canPerformAnyCreateAction)}
+              render={({ field: { value, onChange } }) => (
+                <CustomSearchSelect
+                  value={value ?? []}
+                  onChange={(val: string[]) => onChange(val)}
+                  options={options}
+                  input
+                  label={
+                    value && value.length > 0
+                      ? value
+                          .map((projectId) => {
+                            const projectDetails = getProjectById(projectId);
 
-                          return projectDetails?.identifier;
-                        })
-                        .join(", ")
-                    : "All projects"
-                }
-                optionsClassName="max-w-48 sm:max-w-[532px]"
-                placement="bottom-end"
-                multiple
-              />
-            )}
-          />
-        </div>
+                            return projectDetails?.identifier;
+                          })
+                          .join(", ")
+                      : "All projects"
+                  }
+                  optionsClassName="max-w-48 sm:max-w-[532px]"
+                  placement="bottom-end"
+                  multiple
+                />
+              )}
+            />
+          }
+        />
         {/* Format Selector */}
-        <div className="w-1/2">
-          <div className="text-sm font-medium text-custom-text-200 mb-2">
-            {t("workspace_settings.settings.exports.format")}
-          </div>
-          <Controller
-            control={control}
-            name="provider"
-            disabled={!isMember && (!hasProjects || !canPerformAnyCreateAction)}
-            render={({ field: { value, onChange } }) => (
-              <CustomSelect
-                value={value}
-                onChange={onChange}
-                label={t(value.i18n_title)}
-                optionsClassName="max-w-48 sm:max-w-[532px]"
-                placement="bottom-end"
-                buttonClassName="py-2 text-sm"
-              >
-                {EXPORTERS_LIST.map((service) => (
-                  <CustomSelect.Option key={service.provider} className="flex items-center gap-2" value={service}>
-                    <span className="truncate">{t(service.i18n_title)}</span>
-                  </CustomSelect.Option>
-                ))}
-              </CustomSelect>
-            )}
-          />
+        <SettingsBoxedControlItem
+          className="rounded-none border-0 border-b"
+          title={t("workspace_settings.settings.exports.format")}
+          control={
+            <Controller
+              control={control}
+              name="provider"
+              disabled={!isMember && (!hasProjects || !canPerformAnyCreateAction)}
+              render={({ field: { value, onChange } }) => (
+                <CustomSelect
+                  value={value}
+                  onChange={onChange}
+                  label={t(value.i18n_title)}
+                  optionsClassName="max-w-48 sm:max-w-[532px]"
+                  placement="bottom-end"
+                  buttonClassName="py-2 text-13"
+                >
+                  {EXPORTERS_LIST.map((service) => (
+                    <CustomSelect.Option key={service.provider} className="flex items-center gap-2" value={service}>
+                      <span className="truncate">{t(service.i18n_title)}</span>
+                    </CustomSelect.Option>
+                  ))}
+                </CustomSelect>
+              )}
+            />
+          }
+        />
+        <div className="px-4 py-3">
+          <Button variant="primary" size="lg" type="submit" loading={exportLoading}>
+            {exportLoading ? `${t("workspace_settings.settings.exports.exporting")}...` : t("export")}
+          </Button>
         </div>
       </div>
       {/* Rich Filters */}
       {/* <div className="w-full">
         <div className="flex items-center gap-2 mb-2">
-          <div className="text-sm font-medium text-custom-text-200 leading-tight">{t("common.filters")}</div>
+          <div className="text-13 font-medium text-secondary leading-tight">{t("common.filters")}</div>
           <Tooltip
             tooltipContent={
               <div className="max-w-[238px] flex gap-2">
-                <div className=" rounded bg-custom-background-80 flex items-center justify-center p-1 h-5 aspect-square">
+                <div className=" rounded-sm bg-layer-1 flex items-center justify-center p-1 h-5 aspect-square">
                   <Info className="h-3 w-3" />
                 </div>
                 {t("workspace_settings.settings.exports.filters_info")}
@@ -230,7 +229,7 @@ export const ExportForm = observer(function ExportForm(props: Props) {
             position="top"
           >
             <button type="button" className="flex items-center justify-center">
-              <Info className="h-3 w-3 text-custom-text-300" />
+              <Info className="h-3 w-3 text-tertiary" />
             </button>
           </Tooltip>
         </div>
@@ -257,16 +256,6 @@ export const ExportForm = observer(function ExportForm(props: Props) {
           )}
         />
       </div> */}
-      <div className="flex items-center justify-between">
-        <Button
-          variant="primary"
-          type="submit"
-          loading={exportLoading}
-          data-ph-element={WORKSPACE_SETTINGS_TRACKER_ELEMENTS.EXPORT_BUTTON}
-        >
-          {exportLoading ? `${t("workspace_settings.settings.exports.exporting")}...` : t("export")}
-        </Button>
-      </div>
     </form>
   );
 });
diff --git a/apps/web/core/components/exporter/export-modal.tsx b/apps/web/core/components/exporter/export-modal.tsx
index 1aee3f10f..bf840de6e 100644
--- a/apps/web/core/components/exporter/export-modal.tsx
+++ b/apps/web/core/components/exporter/export-modal.tsx
@@ -1,15 +1,20 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React, { useState } from "react";
 import { intersection } from "lodash-es";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
-import { Dialog, Transition } from "@headlessui/react";
 // types
 import { useTranslation } from "@plane/i18n";
 import { Button } from "@plane/propel/button";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { IUser, IImporterService } from "@plane/types";
 // ui
-import { CustomSearchSelect } from "@plane/ui";
+import { Checkbox, CustomSearchSelect, EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
 // hooks
 import { useProject } from "@/hooks/store/use-project";
 import { useUser } from "@/hooks/store/user";
@@ -52,7 +57,7 @@ export const Exporter = observer(function Exporter(props: Props) {
       query: `${projectDetails?.name} ${projectDetails?.identifier}`,
       content: (
         <div className="flex items-center gap-2">
-          <span className="text-[0.65rem] text-custom-text-200 flex-shrink-0">{projectDetails?.identifier}</span>
+          <span className="flex-shrink-0 text-10 text-secondary">{projectDetails?.identifier}</span>
           <span className="truncate">{projectDetails?.name}</span>
         </div>
       ),
@@ -99,102 +104,64 @@ export const Exporter = observer(function Exporter(props: Props) {
   }
 
   return (
-    <Transition.Root show={isOpen} as={React.Fragment}>
-      <Dialog
-        as="div"
-        className="relative z-20"
-        onClose={() => {
-          if (!isSelectOpen) handleClose();
-        }}
-      >
-        <Transition.Child
-          as={React.Fragment}
-          enter="ease-out duration-300"
-          enterFrom="opacity-0"
-          enterTo="opacity-100"
-          leave="ease-in duration-200"
-          leaveFrom="opacity-100"
-          leaveTo="opacity-0"
-        >
-          <div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
-        </Transition.Child>
+    <ModalCore
+      isOpen={isOpen}
+      handleClose={() => {
+        if (!isSelectOpen) handleClose();
+      }}
+      position={EModalPosition.CENTER}
+      width={EModalWidth.XL}
+    >
+      <div className="flex flex-col gap-6 gap-y-4 p-6">
+        <div className="flex w-full items-center justify-start gap-6">
+          <span className="flex items-center justify-start">
+            <h3 className="text-18 font-medium 2xl:text-20">
+              {t("workspace_settings.settings.exports.modal.title")}{" "}
+              {provider === "csv" ? "CSV" : provider === "xlsx" ? "Excel" : provider === "json" ? "JSON" : ""}
+            </h3>
+          </span>
+        </div>
+        <div>
+          <CustomSearchSelect
+            value={value ?? []}
+            onChange={(val: string[]) => onChange(val)}
+            options={options}
+            input
+            label={
+              value && value.length > 0
+                ? value
+                    .map((projectId) => {
+                      const projectDetails = getProjectById(projectId);
 
-        <div className="fixed inset-0 z-20 overflow-y-auto">
-          <div className="flex min-h-full items-center justify-center p-4 text-center  sm:p-0">
-            <Transition.Child
-              as={React.Fragment}
-              enter="ease-out duration-300"
-              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-              enterTo="opacity-100 translate-y-0 sm:scale-100"
-              leave="ease-in duration-200"
-              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-            >
-              <Dialog.Panel className="relative transform rounded-lg bg-custom-background-100 text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-full sm:max-w-xl">
-                <div className="flex flex-col gap-6 gap-y-4 p-6">
-                  <div className="flex w-full items-center justify-start gap-6">
-                    <span className="flex items-center justify-start">
-                      <h3 className="text-xl font-medium 2xl:text-2xl">
-                        {t("workspace_settings.settings.exports.modal.title")}{" "}
-                        {provider === "csv" ? "CSV" : provider === "xlsx" ? "Excel" : provider === "json" ? "JSON" : ""}
-                      </h3>
-                    </span>
-                  </div>
-                  <div>
-                    <CustomSearchSelect
-                      value={value ?? []}
-                      onChange={(val: string[]) => onChange(val)}
-                      options={options}
-                      input
-                      label={
-                        value && value.length > 0
-                          ? value
-                              .map((projectId) => {
-                                const projectDetails = getProjectById(projectId);
-
-                                return projectDetails?.identifier;
-                              })
-                              .join(", ")
-                          : "All projects"
-                      }
-                      onOpen={() => setIsSelectOpen(true)}
-                      onClose={() => setIsSelectOpen(false)}
-                      optionsClassName="max-w-48 sm:max-w-[532px]"
-                      placement="bottom-end"
-                      multiple
-                    />
-                  </div>
-                  <div
-                    onClick={() => setMultiple(!multiple)}
-                    className="flex max-w-min cursor-pointer items-center gap-2"
-                  >
-                    <input type="checkbox" checked={multiple} onChange={() => setMultiple(!multiple)} />
-                    <div className="whitespace-nowrap text-sm">
-                      {t("workspace_settings.settings.exports.export_separate_files")}
-                    </div>
-                  </div>
-                  <div className="flex justify-end gap-2">
-                    <Button variant="neutral-primary" size="sm" onClick={handleClose}>
-                      {t("cancel")}
-                    </Button>
-                    <Button
-                      variant="primary"
-                      size="sm"
-                      onClick={ExportCSVToMail}
-                      disabled={exportLoading}
-                      loading={exportLoading}
-                    >
-                      {exportLoading
-                        ? `${t("workspace_settings.settings.exports.exporting")}...`
-                        : t("workspace_settings.settings.exports.title")}
-                    </Button>
-                  </div>
-                </div>
-              </Dialog.Panel>
-            </Transition.Child>
+                      return projectDetails?.identifier;
+                    })
+                    .join(", ")
+                : "All projects"
+            }
+            onOpen={() => setIsSelectOpen(true)}
+            onClose={() => setIsSelectOpen(false)}
+            optionsClassName="max-w-48 sm:max-w-[532px]"
+            placement="bottom-end"
+            multiple
+          />
+        </div>
+        <div className="flex max-w-min cursor-pointer items-center gap-2">
+          <Checkbox checked={multiple} onChange={() => setMultiple(!multiple)} />
+          <div className="text-13 whitespace-nowrap">
+            {t("workspace_settings.settings.exports.export_separate_files")}
           </div>
         </div>
-      </Dialog>
-    </Transition.Root>
+        <div className="flex justify-end gap-2">
+          <Button variant="secondary" onClick={handleClose}>
+            {t("cancel")}
+          </Button>
+          <Button variant="primary" onClick={ExportCSVToMail} disabled={exportLoading} loading={exportLoading}>
+            {exportLoading
+              ? `${t("workspace_settings.settings.exports.exporting")}...`
+              : t("workspace_settings.settings.exports.title")}
+          </Button>
+        </div>
+      </div>
+    </ModalCore>
   );
 });
diff --git a/apps/web/core/components/exporter/guide.tsx b/apps/web/core/components/exporter/guide.tsx
index b35a9125f..f6a212d90 100644
--- a/apps/web/core/components/exporter/guide.tsx
+++ b/apps/web/core/components/exporter/guide.tsx
@@ -1,12 +1,20 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useState } from "react";
 import { observer } from "mobx-react";
 import { useParams, useSearchParams } from "next/navigation";
 import { mutate } from "swr";
+// constants
 import { EXPORT_SERVICES_LIST } from "@/constants/fetch-keys";
+// local imports
 import { ExportForm } from "./export-form";
 import { PrevExports } from "./prev-exports";
 
-const IntegrationGuide = observer(function IntegrationGuide() {
+export const ExportGuide = observer(function ExportGuide() {
   // router
   const { workspaceSlug } = useParams();
   const searchParams = useSearchParams();
@@ -17,18 +25,14 @@ const IntegrationGuide = observer(function IntegrationGuide() {
 
   return (
     <>
-      <div className="h-full w-full">
-        <>
-          <ExportForm
-            workspaceSlug={workspaceSlug}
-            provider={provider}
-            mutateServices={() => mutate(EXPORT_SERVICES_LIST(workspaceSlug, `${cursor}`, `${per_page}`))}
-          />
-          <PrevExports workspaceSlug={workspaceSlug} cursor={cursor} per_page={per_page} setCursor={setCursor} />
-        </>
+      <div className="flex size-full flex-col gap-y-13">
+        <ExportForm
+          workspaceSlug={workspaceSlug}
+          provider={provider}
+          mutateServices={() => mutate(EXPORT_SERVICES_LIST(workspaceSlug, `${cursor}`, `${per_page}`))}
+        />
+        <PrevExports workspaceSlug={workspaceSlug} cursor={cursor} per_page={per_page} setCursor={setCursor} />
       </div>
     </>
   );
 });
-
-export default IntegrationGuide;
diff --git a/apps/web/core/components/exporter/prev-exports.tsx b/apps/web/core/components/exporter/prev-exports.tsx
index ec015045c..2d747e00b 100644
--- a/apps/web/core/components/exporter/prev-exports.tsx
+++ b/apps/web/core/components/exporter/prev-exports.tsx
@@ -1,9 +1,16 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useEffect, useState } from "react";
 import { observer } from "mobx-react";
 import useSWR, { mutate } from "swr";
 import { MoveLeft, MoveRight, RefreshCw } from "lucide-react";
 // plane imports
 import { useTranslation } from "@plane/i18n";
+import { Button } from "@plane/propel/button";
 import { EmptyStateCompact } from "@plane/propel/empty-state";
 import type { IExportData } from "@plane/types";
 import { Table } from "@plane/ui";
@@ -58,62 +65,50 @@ export const PrevExports = observer(function PrevExports(props: Props) {
 
   return (
     <div>
-      <div className="flex items-center justify-between border-b border-custom-border-100 pb-3.5 pt-7">
+      <div className="flex items-center justify-between border-b border-subtle pb-3.5">
         <div className="flex items-center gap-2">
-          <h3 className="flex gap-2 text-xl font-medium">
-            {t("workspace_settings.settings.exports.previous_exports")}
-          </h3>
-
-          <button
-            type="button"
-            className="flex flex-shrink-0 items-center gap-1 rounded bg-custom-background-80 px-1.5 py-1 text-xs outline-none"
-            onClick={handleRefresh}
-          >
-            <RefreshCw className={`h-3 w-3 ${refreshing ? "animate-spin" : ""}`} />{" "}
-            {refreshing ? `${t("refreshing")}...` : t("refresh_status")}
-          </button>
-        </div>
-        <div className="flex items-center gap-2 text-xs">
-          <button
-            disabled={!exporterServices?.prev_page_results}
-            onClick={() => exporterServices?.prev_page_results && setCursor(exporterServices?.prev_cursor)}
-            className={`flex items-center rounded border border-custom-primary-100 px-1 text-custom-primary-100 ${
-              exporterServices?.prev_page_results
-                ? "cursor-pointer hover:bg-custom-primary-100 hover:text-white"
-                : "cursor-not-allowed opacity-75"
-            }`}
-          >
-            <MoveLeft className="h-4 w-4" />
-            <div className="pr-1">{t("prev")}</div>
-          </button>
-          <button
-            disabled={!exporterServices?.next_page_results}
-            onClick={() => exporterServices?.next_page_results && setCursor(exporterServices?.next_cursor)}
-            className={`flex items-center rounded border border-custom-primary-100 px-1 text-custom-primary-100 ${
-              exporterServices?.next_page_results
-                ? "cursor-pointer hover:bg-custom-primary-100 hover:text-white"
-                : "cursor-not-allowed opacity-75"
-            }`}
-          >
-            <div className="pl-1">{t("next")}</div>
-            <MoveRight className="h-4 w-4" />
-          </button>
+          <h3 className="text-h6-medium text-primary">{t("workspace_settings.settings.exports.previous_exports")}</h3>
+          <Button variant="tertiary" className="shrink-0" onClick={handleRefresh}>
+            <RefreshCw className={`h-3 w-3 ${refreshing ? "animate-spin" : ""}`} />
+            {refreshing ? t("refreshing") : t("refresh_status")}
+          </Button>
         </div>
+        {!!exporterServices?.results?.length && (
+          <div className="flex items-center gap-2 text-11">
+            <Button
+              variant="secondary"
+              size="sm"
+              disabled={!exporterServices?.prev_page_results}
+              onClick={() => exporterServices?.prev_page_results && setCursor(exporterServices?.prev_cursor)}
+              prependIcon={<MoveLeft />}
+            >
+              {t("prev")}
+            </Button>
+            <Button
+              variant="secondary"
+              size="sm"
+              disabled={!exporterServices?.next_page_results}
+              onClick={() => exporterServices?.next_page_results && setCursor(exporterServices?.next_cursor)}
+              appendIcon={<MoveRight />}
+            >
+              {t("next")}
+            </Button>
+          </div>
+        )}
       </div>
-
       <div className="flex flex-col">
         {exporterServices && exporterServices?.results ? (
           exporterServices?.results?.length > 0 ? (
             <div>
-              <div className="divide-y divide-custom-border-200">
+              <div className="divide-y divide-subtle-1">
                 <Table
                   columns={columns}
                   data={exporterServices?.results ?? []}
                   keyExtractor={(rowData: RowData) => rowData?.id ?? ""}
-                  tHeadClassName="border-b border-custom-border-100"
-                  thClassName="text-left font-medium divide-x-0 text-custom-text-400"
+                  tHeadClassName="border-b border-subtle"
+                  thClassName="text-left font-medium divide-x-0 text-placeholder"
                   tBodyClassName="divide-y-0"
-                  tBodyTrClassName="divide-x-0 p-4 h-[40px] text-custom-text-200"
+                  tBodyTrClassName="divide-x-0 p-4 h-[40px] text-secondary"
                   tHeadTrClassName="divide-x-0"
                 />
               </div>
diff --git a/apps/web/core/components/exporter/single-export.tsx b/apps/web/core/components/exporter/single-export.tsx
index 2af846945..8bd05281e 100644
--- a/apps/web/core/components/exporter/single-export.tsx
+++ b/apps/web/core/components/exporter/single-export.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useState } from "react";
 // ui
 import { Button } from "@plane/propel/button";
@@ -28,7 +33,7 @@ export function SingleExport({ service, refreshing }: Props) {
   return (
     <div className="flex items-center justify-between gap-2 px-4 py-3">
       <div>
-        <h4 className="flex items-center gap-2 text-sm">
+        <h4 className="flex items-center gap-2 text-13">
           <span>
             Export to{" "}
             <span className="font-medium">
@@ -36,13 +41,13 @@ export function SingleExport({ service, refreshing }: Props) {
             </span>{" "}
           </span>
           <span
-            className={`rounded px-2 py-0.5 text-xs capitalize ${
+            className={`rounded-sm px-2 py-0.5 text-11 capitalize ${
               service.status === "completed"
-                ? "bg-green-500/20 text-green-500"
+                ? "bg-success-subtle text-success-primary"
                 : service.status === "processing"
                   ? "bg-yellow-500/20 text-yellow-500"
                   : service.status === "failed"
-                    ? "bg-red-500/20 text-red-500"
+                    ? "bg-danger-subtle text-danger-primary"
                     : service.status === "expired"
                       ? "bg-orange-500/20 text-orange-500"
                       : ""
@@ -51,7 +56,7 @@ export function SingleExport({ service, refreshing }: Props) {
             {refreshing ? "Refreshing..." : service.status}
           </span>
         </h4>
-        <div className="mt-2 flex items-center gap-2 text-xs text-custom-text-200">
+        <div className="mt-2 flex items-center gap-2 text-11 text-secondary">
           <span>{renderFormattedDate(service.created_at)}</span>|
           <span>Exported by {service?.initiated_by_detail?.display_name}</span>
         </div>
@@ -69,7 +74,7 @@ export function SingleExport({ service, refreshing }: Props) {
           )}
         </>
       ) : (
-        <div className="text-xs text-red-500">Expired</div>
+        <div className="text-11 text-danger-primary">Expired</div>
       )}
     </div>
   );
diff --git a/apps/web/core/components/gantt-chart/blocks/block-row.tsx b/apps/web/core/components/gantt-chart/blocks/block-row.tsx
index 1e0c688d5..4d70c82b1 100644
--- a/apps/web/core/components/gantt-chart/blocks/block-row.tsx
+++ b/apps/web/core/components/gantt-chart/blocks/block-row.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useEffect, useState } from "react";
 import { observer } from "mobx-react";
 import { ArrowRight } from "lucide-react";
@@ -75,7 +81,7 @@ export const BlockRow = observer(function BlockRow(props: Props) {
 
   return (
     <div
-      className="relative min-w-full w-max"
+      className="relative w-max min-w-full"
       onMouseEnter={() => updateActiveBlockId(blockId)}
       onMouseLeave={() => updateActiveBlockId(null)}
       style={{
@@ -83,19 +89,19 @@ export const BlockRow = observer(function BlockRow(props: Props) {
       }}
     >
       <div
-        className={cn("relative h-full", {
-          "rounded-l border border-r-0 border-custom-primary-70": getIsIssuePeeked(block.data.id),
-          "bg-custom-background-90": isBlockHoveredOn,
-          "bg-custom-primary-100/5 hover:bg-custom-primary-100/10": isBlockSelected,
-          "bg-custom-primary-100/10": isBlockSelected && isBlockHoveredOn,
-          "border border-r-0 border-custom-border-400": isBlockFocused,
+        className={cn("relative h-full bg-layer-transparent hover:bg-layer-transparent-hover", {
+          "rounded-l-sm border border-r-0 border-accent-strong": getIsIssuePeeked(block.data.id),
+          "bg-layer-transparent-hover": isBlockHoveredOn,
+          "bg-accent-primary/5 hover:bg-accent-primary/10": isBlockSelected,
+          "bg-accent-primary/10": isBlockSelected && isBlockHoveredOn,
+          "border border-r-0 border-strong-1": isBlockFocused,
         })}
       >
         {isBlockVisibleOnChart
           ? isHidden && (
               <button
                 type="button"
-                className="sticky z-[5] grid h-8 w-8 translate-y-1.5 cursor-pointer place-items-center rounded border border-custom-border-300 bg-custom-background-80 text-custom-text-200 hover:text-custom-text-100"
+                className="sticky z-[5] grid h-8 w-8 translate-y-1.5 cursor-pointer place-items-center rounded-sm border border-strong bg-layer-1 text-secondary hover:text-primary"
                 style={{
                   left: `${SIDEBAR_WIDTH + 4}px`,
                 }}
diff --git a/apps/web/core/components/gantt-chart/blocks/block.tsx b/apps/web/core/components/gantt-chart/blocks/block.tsx
index 18e0b446b..dcff677e3 100644
--- a/apps/web/core/components/gantt-chart/blocks/block.tsx
+++ b/apps/web/core/components/gantt-chart/blocks/block.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { RefObject } from "react";
 import { useRef } from "react";
 import { observer } from "mobx-react";
@@ -77,7 +83,7 @@ export const GanttChartBlock = observer(function GanttChartBlock(props: Props) {
           horizontalOffset={100}
           verticalOffset={200}
           classNames="flex h-full w-full items-center"
-          placeholderChildren={<div className="h-8 w-full bg-custom-background-80 rounded" />}
+          placeholderChildren={<div className="h-8 w-full rounded-sm bg-layer-1" />}
           shouldRecordHeights={false}
           forceRender={isCurrentDependencyDragging}
         >
diff --git a/apps/web/core/components/gantt-chart/chart/header.tsx b/apps/web/core/components/gantt-chart/chart/header.tsx
index f2687b571..faa2c2660 100644
--- a/apps/web/core/components/gantt-chart/chart/header.tsx
+++ b/apps/web/core/components/gantt-chart/chart/header.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import { Expand, Shrink } from "lucide-react";
 import { useTranslation } from "@plane/i18n";
@@ -32,11 +38,11 @@ export const GanttChartHeader = observer(function GanttChartHeader(props: Props)
 
   return (
     <Row
-      className="relative flex w-full flex-shrink-0 flex-wrap items-center gap-2 whitespace-nowrap py-2"
+      className="relative flex w-full flex-shrink-0 flex-wrap items-center gap-2 bg-surface-1 py-2 whitespace-nowrap"
       style={{ height: `${GANTT_BREADCRUMBS_HEIGHT}px` }}
     >
       <div className="ml-auto">
-        <div className="ml-auto text-sm font-medium">
+        <div className="ml-auto text-11 font-medium text-tertiary">
           {blockIds ? `${blockIds.length} ${loaderTitle}` : t("common.loading")}
         </div>
       </div>
@@ -45,10 +51,12 @@ export const GanttChartHeader = observer(function GanttChartHeader(props: Props)
         {VIEWS_LIST.map((chartView: any) => (
           <div
             key={chartView?.key}
-            className={cn("cursor-pointer rounded-sm p-1 px-2 text-xs", {
-              "bg-custom-background-80": currentView === chartView?.key,
-              "hover:bg-custom-background-90": currentView !== chartView?.key,
-            })}
+            className={cn(
+              "cursor-pointer rounded-md bg-layer-transparent p-1 px-2 text-11 hover:bg-layer-transparent-hover",
+              {
+                "bg-layer-transparent-selected": currentView === chartView?.key,
+              }
+            )}
             onClick={() => handleChartView(chartView?.key)}
           >
             {t(chartView?.i18n_title)}
@@ -59,7 +67,7 @@ export const GanttChartHeader = observer(function GanttChartHeader(props: Props)
       {showToday && (
         <button
           type="button"
-          className="rounded-sm p-1 px-2 text-xs hover:bg-custom-background-80"
+          className="rounded-md bg-layer-transparent p-1 px-2 text-11 hover:bg-layer-transparent-hover"
           onClick={handleToday}
         >
           {t("common.today")}
@@ -68,7 +76,7 @@ export const GanttChartHeader = observer(function GanttChartHeader(props: Props)
 
       <button
         type="button"
-        className="flex items-center justify-center rounded-sm border border-custom-border-200 p-1 transition-all hover:bg-custom-background-80"
+        className="flex items-center justify-center rounded-md border border-subtle bg-layer-transparent p-1 transition-all hover:bg-layer-transparent-hover"
         onClick={toggleFullScreenMode}
       >
         {fullScreenMode ? <Shrink className="h-4 w-4" /> : <Expand className="h-4 w-4" />}
diff --git a/apps/web/core/components/gantt-chart/chart/index.ts b/apps/web/core/components/gantt-chart/chart/index.ts
index 68b20b89a..cf20bf51d 100644
--- a/apps/web/core/components/gantt-chart/chart/index.ts
+++ b/apps/web/core/components/gantt-chart/chart/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./views";
 export * from "./header";
 export * from "./main-content";
diff --git a/apps/web/core/components/gantt-chart/chart/main-content.tsx b/apps/web/core/components/gantt-chart/chart/main-content.tsx
index f555f90ab..e7de61089 100644
--- a/apps/web/core/components/gantt-chart/chart/main-content.tsx
+++ b/apps/web/core/components/gantt-chart/chart/main-content.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useEffect, useRef } from "react";
 import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
 import { autoScrollForElements } from "@atlaskit/pragmatic-drag-and-drop-auto-scroll/element";
@@ -17,7 +23,11 @@ import { GanttChartSidebar, MonthChartView, QuarterChartView, WeekChartView } fr
 // hooks
 import { useTimeLineChartStore } from "@/hooks/use-timeline-chart";
 // plane web components
-import { TimelineDependencyPaths, TimelineDraggablePath } from "@/plane-web/components/gantt-chart";
+import {
+  TimelineDependencyPaths,
+  TimelineDraggablePath,
+  GanttAdditionalLayers,
+} from "@/plane-web/components/gantt-chart";
 import { GanttChartRowList } from "@/plane-web/components/gantt-chart/blocks/block-row-list";
 import { GanttChartBlocksList } from "@/plane-web/components/gantt-chart/blocks/blocks-list";
 import { IssueBulkOperationsRoot } from "@/plane-web/components/issues/bulk-operations";
@@ -167,7 +177,7 @@ export const GanttChartMainContent = observer(function GanttChartMainContent(pro
               // DO NOT REMOVE THE ID
               id="gantt-container"
               className={cn(
-                "h-full w-full overflow-auto vertical-scrollbar horizontal-scrollbar scrollbar-lg flex border-t-[0.5px] border-custom-border-200",
+                "vertical-scrollbar horizontal-scrollbar flex scrollbar-lg h-full w-full overflow-auto border-t-[0.5px] border-subtle",
                 {
                   "mb-8": bottomSpacing,
                 }
@@ -185,12 +195,11 @@ export const GanttChartMainContent = observer(function GanttChartMainContent(pro
                 enableSelection={enableSelection}
                 sidebarToRender={sidebarToRender}
                 title={title}
-                quickAdd={quickAdd}
                 selectionHelpers={helpers}
                 showAllBlocks={showAllBlocks}
                 isEpic={isEpic}
               />
-              <div className="relative min-h-full h-max flex-shrink-0 flex-grow">
+              <div className="relative h-max min-h-full flex-shrink-0 flex-grow">
                 <ActiveChartView />
                 {currentViewData && (
                   <div
@@ -212,6 +221,7 @@ export const GanttChartMainContent = observer(function GanttChartMainContent(pro
                     />
                     <TimelineDependencyPaths isEpic={isEpic} />
                     <TimelineDraggablePath />
+                    <GanttAdditionalLayers itemsContainerWidth={itemsContainerWidth} blockCount={blockIds.length} />
                     <GanttChartBlocksList
                       blockIds={blockIds}
                       blockToRender={blockToRender}
@@ -227,6 +237,7 @@ export const GanttChartMainContent = observer(function GanttChartMainContent(pro
                 )}
               </div>
             </div>
+            {quickAdd ? quickAdd : null}
             <IssueBulkOperationsRoot selectionHelpers={helpers} />
           </>
         )}
diff --git a/apps/web/core/components/gantt-chart/chart/root.tsx b/apps/web/core/components/gantt-chart/chart/root.tsx
index 114799e5e..2e47b5587 100644
--- a/apps/web/core/components/gantt-chart/chart/root.tsx
+++ b/apps/web/core/components/gantt-chart/chart/root.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useEffect, useState } from "react";
 import { observer } from "mobx-react";
 import { createPortal } from "react-dom";
@@ -175,9 +180,9 @@ export const ChartViewRoot = observer(function ChartViewRoot(props: ChartViewRoo
 
   const content = (
     <div
-      className={cn("relative flex flex-col h-full select-none rounded-sm bg-custom-background-100 shadow", {
-        "inset-0 z-[25] bg-custom-background-100": fullScreenMode,
-        "border-[0.5px] border-custom-border-200": border,
+      className={cn("shadow relative flex h-full flex-col rounded-xs bg-surface-1 select-none", {
+        "inset-0 z-[25] bg-surface-1": fullScreenMode,
+        "border-[0.5px] border-subtle": border,
       })}
     >
       <GanttChartHeader
diff --git a/apps/web/core/components/gantt-chart/chart/timeline-drag-helper.tsx b/apps/web/core/components/gantt-chart/chart/timeline-drag-helper.tsx
index 12441f924..48d1145b8 100644
--- a/apps/web/core/components/gantt-chart/chart/timeline-drag-helper.tsx
+++ b/apps/web/core/components/gantt-chart/chart/timeline-drag-helper.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { RefObject } from "react";
 import { observer } from "mobx-react";
 // hooks
diff --git a/apps/web/core/components/gantt-chart/chart/views/index.ts b/apps/web/core/components/gantt-chart/chart/views/index.ts
index ea7c85e84..b7964eb50 100644
--- a/apps/web/core/components/gantt-chart/chart/views/index.ts
+++ b/apps/web/core/components/gantt-chart/chart/views/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./month";
 export * from "./quarter";
 export * from "./week";
diff --git a/apps/web/core/components/gantt-chart/chart/views/month.tsx b/apps/web/core/components/gantt-chart/chart/views/month.tsx
index 80232f80b..3473f2b2a 100644
--- a/apps/web/core/components/gantt-chart/chart/views/month.tsx
+++ b/apps/web/core/components/gantt-chart/chart/views/month.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 // components
 import { cn } from "@plane/utils";
@@ -25,12 +30,12 @@ export const MonthChartView = observer(function MonthChartView(_props: any) {
   const marginLeftDays = getNumberOfDaysBetweenTwoDates(monthsStartDate, weeksStartDate);
 
   return (
-    <div className={`absolute top-0 left-0 min-h-full h-max w-max flex`}>
+    <div className="absolute top-0 left-0 flex h-max min-h-full w-max">
       {currentViewData && (
-        <div className="relative flex flex-col outline-[0.25px] outline outline-custom-border-200">
+        <div className="relative flex flex-col outline-[0.25px] outline-subtle-1">
           {/** Header Div */}
           <div
-            className="w-full sticky top-0 z-[5] bg-custom-background-100 flex-shrink-0"
+            className="sticky top-0 z-[5] w-full flex-shrink-0 bg-surface-1"
             style={{
               height: `${HEADER_HEIGHT}px`,
             }}
@@ -40,18 +45,18 @@ export const MonthChartView = observer(function MonthChartView(_props: any) {
               {months?.map((monthBlock) => (
                 <div
                   key={`month-${monthBlock?.month}-${monthBlock?.year}`}
-                  className="flex outline-[0.5px] outline outline-custom-border-200"
+                  className="flex outline-[0.5px] outline-subtle-1"
                   style={{ width: `${monthBlock.days * currentViewData?.data.dayWidth}px` }}
                 >
                   <div
-                    className="sticky flex items-center font-normal z-[1] m-1 whitespace-nowrap px-3 py-1 text-base capitalize bg-custom-background-100 text-custom-text-200"
+                    className="sticky z-[1] m-1 flex items-center bg-surface-1 px-3 py-1 text-14 font-regular whitespace-nowrap text-secondary capitalize"
                     style={{
                       left: `${SIDEBAR_WIDTH}px`,
                     }}
                   >
                     {monthBlock?.title}
                     {monthBlock.today && (
-                      <span className={cn("rounded ml-2 font-medium bg-custom-primary-100 px-1 text-2xs text-white")}>
+                      <span className={cn("ml-2 rounded-sm bg-accent-primary px-1 text-9 font-medium text-on-color")}>
                         Current
                       </span>
                     )}
@@ -60,39 +65,39 @@ export const MonthChartView = observer(function MonthChartView(_props: any) {
               ))}
             </div>
             {/** Weeks Sub title */}
-            <div className="h-5 w-full flex">
+            <div className="flex h-5 w-full">
               {weeks?.map((weekBlock) => (
                 <div
-                  key={`sub-title-${weekBlock.startDate}-${weekBlock.endDate}`}
+                  key={`sub-title-${weekBlock.startDate.toString()}-${weekBlock.endDate.toString()}`}
                   className={cn(
-                    "flex flex-shrink-0 py-1 px-2 text-center capitalize justify-between outline-[0.25px] outline outline-custom-border-200",
+                    "flex flex-shrink-0 justify-between px-2 py-1 text-center capitalize outline-[0.25px] outline-subtle-1",
                     {
-                      "bg-custom-primary-100/20": weekBlock.today,
+                      "bg-accent-primary/20": weekBlock.today,
                     }
                   )}
                   style={{ width: `${currentViewData?.data.dayWidth * 7}px` }}
                 >
-                  <div className="space-x-1 text-xs font-medium text-custom-text-400">
+                  <div className="space-x-1 text-11 font-medium text-placeholder">
                     <span
                       className={cn({
-                        "rounded bg-custom-primary-100 px-1 text-white": weekBlock.today,
+                        "rounded-sm bg-accent-primary px-1 text-on-color": weekBlock.today,
                       })}
                     >
                       {weekBlock.startDate.getDate()}-{weekBlock.endDate.getDate()}
                     </span>
                   </div>
-                  <div className="space-x-1 text-xs font-medium">{weekBlock.weekData.shortTitle}</div>
+                  <div className="space-x-1 text-11 font-medium">{weekBlock.weekData.shortTitle}</div>
                 </div>
               ))}
             </div>
           </div>
           {/** Week Columns */}
-          <div className="h-full w-full flex-grow flex">
+          <div className="flex h-full w-full flex-grow">
             {weeks?.map((weekBlock) => (
               <div
-                key={`column-${weekBlock.startDate}-${weekBlock.endDate}`}
-                className={cn("h-full overflow-hidden outline-[0.25px] outline outline-custom-border-100", {
-                  "bg-custom-primary-100/20": weekBlock.today,
+                key={`column-${weekBlock.startDate.toString()}-${weekBlock.endDate.toString()}`}
+                className={cn("h-full overflow-hidden outline-[0.25px] outline-subtle", {
+                  "bg-accent-primary/20": weekBlock.today,
                 })}
                 style={{ width: `${currentViewData?.data.dayWidth * 7}px` }}
               />
diff --git a/apps/web/core/components/gantt-chart/chart/views/quarter.tsx b/apps/web/core/components/gantt-chart/chart/views/quarter.tsx
index f402abb3a..9b135677c 100644
--- a/apps/web/core/components/gantt-chart/chart/views/quarter.tsx
+++ b/apps/web/core/components/gantt-chart/chart/views/quarter.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 // plane utils
 import { cn } from "@plane/utils";
@@ -16,56 +21,56 @@ export const QuarterChartView = observer(function QuarterChartView(_props: any)
   const quarterBlocks: IQuarterMonthBlock[] = groupMonthsToQuarters(monthBlocks);
 
   return (
-    <div className={`absolute top-0 left-0 min-h-full h-max w-max flex`}>
+    <div className={`absolute top-0 left-0 flex h-max min-h-full w-max`}>
       {currentViewData &&
         quarterBlocks?.map((quarterBlock, rootIndex) => (
           <div
             key={`month-${quarterBlock.quarterNumber}-${quarterBlock.year}`}
-            className="relative flex flex-col outline-[0.25px] outline outline-custom-border-200"
+            className="relative flex flex-col outline-[0.25px] outline-subtle-1"
           >
             {/** Header Div */}
             <div
-              className="w-full sticky top-0 z-[5] bg-custom-background-100 flex-shrink-0 outline-[1px] outline outline-custom-border-200"
+              className="sticky top-0 z-[5] w-full flex-shrink-0 bg-surface-1 outline-[1px] outline-subtle-1"
               style={{
                 height: `${HEADER_HEIGHT}px`,
               }}
             >
               {/** Main Quarter Title */}
-              <div className="w-full inline-flex h-7 justify-between">
+              <div className="inline-flex h-7 w-full justify-between">
                 <div
-                  className="sticky flex items-center font-normal z-[1] my-1 whitespace-nowrap px-3 py-1 text-base capitalize bg-custom-background-100 text-custom-text-200"
+                  className="sticky z-[1] my-1 flex items-center bg-surface-1 px-3 py-1 text-14 font-regular whitespace-nowrap text-secondary capitalize"
                   style={{
                     left: `${SIDEBAR_WIDTH}px`,
                   }}
                 >
                   {quarterBlock?.title}
                   {quarterBlock.today && (
-                    <span className={cn("rounded ml-2 font-medium  bg-custom-primary-100 px-1 text-2xs text-white")}>
+                    <span className={cn("ml-2 rounded-sm bg-accent-primary px-1 text-9 font-medium text-on-color")}>
                       Current
                     </span>
                   )}
                 </div>
-                <div className="sticky whitespace-nowrap px-3 py-2 text-xs capitalize text-custom-text-400">
+                <div className="sticky px-3 py-2 text-11 whitespace-nowrap text-placeholder capitalize">
                   {quarterBlock.shortTitle}
                 </div>
               </div>
               {/** Months Sub title */}
-              <div className="h-5 w-full flex">
+              <div className="flex h-5 w-full">
                 {quarterBlock?.children?.map((monthBlock, index) => (
                   <div
                     key={`sub-title-${rootIndex}-${index}`}
                     className={cn(
-                      "flex flex-shrink-0 text-center capitalize justify-center outline-[0.25px] outline outline-custom-border-200",
+                      "flex flex-shrink-0 justify-center text-center capitalize outline-[0.25px] outline-subtle-1",
                       {
-                        "bg-custom-primary-100/20": monthBlock.today,
+                        "bg-accent-primary/20": monthBlock.today,
                       }
                     )}
                     style={{ width: `${currentViewData?.data.dayWidth * monthBlock.days}px` }}
                   >
-                    <div className="space-x-1 flex items-center justify-center text-xs font-medium h-full">
+                    <div className="flex h-full items-center justify-center space-x-1 text-11 font-medium">
                       <span
                         className={cn({
-                          "rounded-lg bg-custom-primary-100 px-2 text-white": monthBlock.today,
+                          "rounded-lg bg-accent-primary px-2 text-on-color": monthBlock.today,
                         })}
                       >
                         {monthBlock.monthData.shortTitle}
@@ -76,12 +81,12 @@ export const QuarterChartView = observer(function QuarterChartView(_props: any)
               </div>
             </div>
             {/** Month Columns */}
-            <div className="h-full w-full flex-grow flex">
+            <div className="flex h-full w-full flex-grow">
               {quarterBlock?.children?.map((monthBlock, index) => (
                 <div
                   key={`column-${rootIndex}-${index}`}
-                  className={cn("h-full overflow-hidden outline-[0.25px] outline outline-custom-border-100", {
-                    "bg-custom-primary-100/20": monthBlock.today,
+                  className={cn("h-full overflow-hidden outline-[0.25px] outline-subtle", {
+                    "bg-accent-primary/20": monthBlock.today,
                   })}
                   style={{ width: `${currentViewData?.data.dayWidth * monthBlock.days}px` }}
                 />
diff --git a/apps/web/core/components/gantt-chart/chart/views/week.tsx b/apps/web/core/components/gantt-chart/chart/views/week.tsx
index fda913f29..2f96eb157 100644
--- a/apps/web/core/components/gantt-chart/chart/views/week.tsx
+++ b/apps/web/core/components/gantt-chart/chart/views/week.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 // plane utils
 import { cn } from "@plane/utils";
@@ -13,54 +18,52 @@ export const WeekChartView = observer(function WeekChartView(_props: any) {
   const weekBlocks: IWeekBlock[] = renderView;
 
   return (
-    <div className={`absolute top-0 left-0 min-h-full h-max w-max flex`}>
+    <div className={`absolute top-0 left-0 flex h-max min-h-full w-max`}>
       {currentViewData &&
         weekBlocks?.map((block, rootIndex) => (
           <div
-            key={`month-${block?.startDate}-${block?.endDate}`}
-            className="relative flex flex-col outline-[0.25px] outline outline-custom-border-200"
+            key={`month-${block?.startDate.toString()}-${block?.endDate.toString()}`}
+            className="relative flex flex-col outline-[0.25px] outline-subtle-1"
           >
             {/** Header Div */}
             <div
-              className="w-full sticky top-0 z-[5] bg-custom-background-100 flex-shrink-0 outline-[1px] outline outline-custom-border-200"
+              className="sticky top-0 z-[5] w-full flex-shrink-0 bg-surface-1 outline-[1px] outline-subtle-1"
               style={{
                 height: `${HEADER_HEIGHT}px`,
               }}
             >
               {/** Main Months Title */}
-              <div className="w-full inline-flex h-7 justify-between">
+              <div className="inline-flex h-7 w-full justify-between">
                 <div
-                  className="sticky flex items-center font-normal z-[1] m-1 whitespace-nowrap px-3 py-1 text-sm capitalize bg-custom-background-100 text-custom-text-200"
+                  className="sticky z-[1] m-1 flex items-center bg-surface-1 px-3 py-1 text-13 font-regular whitespace-nowrap text-secondary capitalize"
                   style={{
                     left: `${SIDEBAR_WIDTH}px`,
                   }}
                 >
                   {block?.title}
                 </div>
-                <div className="sticky whitespace-nowrap px-3 py-2 text-xs capitalize text-custom-text-400">
+                <div className="sticky px-3 py-2 text-11 whitespace-nowrap text-placeholder capitalize">
                   {block?.weekData?.title}
                 </div>
               </div>
               {/** Days Sub title */}
-              <div className="h-5 w-full flex">
+              <div className="flex h-5 w-full">
                 {block?.children?.map((weekDay, index) => (
                   <div
                     key={`sub-title-${rootIndex}-${index}`}
                     className={cn(
-                      "flex flex-shrink-0 p-1 text-center capitalize justify-between outline-[0.25px] outline outline-custom-border-200",
+                      "flex flex-shrink-0 justify-between p-1 text-center capitalize outline-[0.25px] outline-subtle-1",
                       {
-                        "bg-custom-primary-100/20": weekDay.today,
+                        "bg-accent-primary/20": weekDay.today,
                       }
                     )}
                     style={{ width: `${currentViewData?.data.dayWidth}px` }}
                   >
-                    <div className="space-x-1 text-xs font-medium text-custom-text-400">
-                      {weekDay.dayData.abbreviation}
-                    </div>
-                    <div className="space-x-1 text-xs font-medium">
+                    <div className="space-x-1 text-11 font-medium text-placeholder">{weekDay.dayData.abbreviation}</div>
+                    <div className="space-x-1 text-11 font-medium">
                       <span
                         className={cn({
-                          "rounded bg-custom-primary-100 px-1 text-white": weekDay.today,
+                          "rounded-sm bg-accent-primary px-1 text-on-color": weekDay.today,
                         })}
                       >
                         {weekDay.date.getDate()}
@@ -71,17 +74,17 @@ export const WeekChartView = observer(function WeekChartView(_props: any) {
               </div>
             </div>
             {/** Day Columns */}
-            <div className="h-full w-full flex-grow flex bg-custom-background-100">
+            <div className="flex h-full w-full flex-grow bg-surface-1">
               {block?.children?.map((weekDay, index) => (
                 <div
                   key={`column-${rootIndex}-${index}`}
-                  className={cn("h-full overflow-hidden outline-[0.25px] outline outline-custom-border-100", {
-                    "bg-custom-primary-100/20": weekDay.today,
+                  className={cn("h-full overflow-hidden outline-[0.25px] outline-subtle", {
+                    "bg-accent-primary/20": weekDay.today,
                   })}
                   style={{ width: `${currentViewData?.data.dayWidth}px` }}
                 >
                   {["sat", "sun"].includes(weekDay?.dayData?.shortTitle) && (
-                    <div className="h-full bg-custom-background-90 outline-[0.25px] outline outline-custom-border-300" />
+                    <div className="h-full bg-surface-2 outline-[0.25px] outline-strong" />
                   )}
                 </div>
               ))}
diff --git a/apps/web/core/components/gantt-chart/constants.ts b/apps/web/core/components/gantt-chart/constants.ts
index e875fb8ea..04ab7d225 100644
--- a/apps/web/core/components/gantt-chart/constants.ts
+++ b/apps/web/core/components/gantt-chart/constants.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export const BLOCK_HEIGHT = 44;
 
 export const HEADER_HEIGHT = 48;
diff --git a/apps/web/core/components/gantt-chart/contexts/index.tsx b/apps/web/core/components/gantt-chart/contexts/index.tsx
index 894a06d75..c3fbcdc8e 100644
--- a/apps/web/core/components/gantt-chart/contexts/index.tsx
+++ b/apps/web/core/components/gantt-chart/contexts/index.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { createContext, useContext } from "react";
 import type { TTimelineType } from "@plane/types";
 
diff --git a/apps/web/core/components/gantt-chart/data/index.ts b/apps/web/core/components/gantt-chart/data/index.ts
index 50cc76ec5..18640a4f7 100644
--- a/apps/web/core/components/gantt-chart/data/index.ts
+++ b/apps/web/core/components/gantt-chart/data/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // types
 import type { WeekMonthDataType, ChartDataType, TGanttViews } from "@plane/types";
 import { EStartOfTheWeek } from "@plane/types";
diff --git a/apps/web/core/components/gantt-chart/helpers/add-block.tsx b/apps/web/core/components/gantt-chart/helpers/add-block.tsx
index 05ff5c709..b7b94fa98 100644
--- a/apps/web/core/components/gantt-chart/helpers/add-block.tsx
+++ b/apps/web/core/components/gantt-chart/helpers/add-block.tsx
@@ -1,7 +1,13 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useEffect, useRef, useState } from "react";
 import { addDays } from "date-fns";
 import { observer } from "mobx-react";
-import { Plus } from "lucide-react";
+import { PlusIcon } from "@plane/propel/icons";
 // ui
 import { Tooltip } from "@plane/propel/tooltip";
 import type { IBlockUpdateData, IGanttBlock } from "@plane/types";
@@ -85,13 +91,13 @@ export const ChartAddBlock = observer(function ChartAddBlock(props: Props) {
         <Tooltip tooltipContent={buttonStartDate && renderFormattedDate(buttonStartDate)} isMobile={isMobile}>
           <button
             type="button"
-            className="absolute top-1/2 -translate-x-1/2 -translate-y-1/2 h-8 w-8 bg-custom-background-80 p-1.5 rounded border border-custom-border-300 grid place-items-center text-custom-text-200 hover:text-custom-text-100"
+            className="absolute top-1/2 grid h-8 w-8 -translate-x-1/2 -translate-y-1/2 place-items-center rounded-sm border border-strong bg-layer-1 p-1.5 text-secondary hover:text-primary"
             style={{
               marginLeft: `${buttonXPosition}px`,
             }}
             onClick={handleButtonClick}
           >
-            <Plus className="h-3.5 w-3.5" />
+            <PlusIcon className="h-3.5 w-3.5" />
           </button>
         </Tooltip>
       )}
diff --git a/apps/web/core/components/gantt-chart/helpers/blockResizables/left-resizable.tsx b/apps/web/core/components/gantt-chart/helpers/blockResizables/left-resizable.tsx
index 81491f4c7..11ffb03bb 100644
--- a/apps/web/core/components/gantt-chart/helpers/blockResizables/left-resizable.tsx
+++ b/apps/web/core/components/gantt-chart/helpers/blockResizables/left-resizable.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useState } from "react";
 import { observer } from "mobx-react";
 // plane utils
@@ -32,8 +38,8 @@ export const LeftResizable = observer(function LeftResizable(props: LeftResizabl
   return (
     <>
       {(isHovering || isLeftResizing) && dateString && (
-        <div className="absolute flex text-xs font-normal text-custom-text-300 h-full w-32 -left-36 justify-end items-center">
-          <div className="px-2 py-1 bg-custom-primary-20 rounded">{dateString}</div>
+        <div className="absolute -left-36 flex h-full w-32 items-center justify-end text-11 font-regular text-tertiary">
+          <div className="rounded-sm bg-accent-subtle px-2 py-1">{dateString}</div>
         </div>
       )}
       <div
@@ -46,11 +52,11 @@ export const LeftResizable = observer(function LeftResizable(props: LeftResizabl
         onMouseOut={() => {
           setIsHovering(false);
         }}
-        className="absolute -left-1.5 top-1/2 -translate-y-1/2 z-[6] h-full w-3 cursor-col-resize rounded-md"
+        className="absolute top-1/2 -left-1.5 z-[6] h-full w-3 -translate-y-1/2 cursor-col-resize rounded-md"
       />
       <div
         className={cn(
-          "absolute left-1 top-1/2 -translate-y-1/2 h-7 w-1 z-[5] rounded-sm bg-custom-background-100 transition-all duration-300 opacity-0 group-hover:opacity-100",
+          "absolute top-1/2 left-1 z-[5] h-7 w-1 -translate-y-1/2 rounded-xs bg-surface-1 opacity-0 transition-all duration-300 group-hover:opacity-100",
           {
             "-left-1.5 opacity-100": isLeftResizing,
           }
diff --git a/apps/web/core/components/gantt-chart/helpers/blockResizables/right-resizable.tsx b/apps/web/core/components/gantt-chart/helpers/blockResizables/right-resizable.tsx
index e41ff36a2..d8cd21787 100644
--- a/apps/web/core/components/gantt-chart/helpers/blockResizables/right-resizable.tsx
+++ b/apps/web/core/components/gantt-chart/helpers/blockResizables/right-resizable.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useState } from "react";
 import { observer } from "mobx-react";
 // plane utils
@@ -32,8 +38,8 @@ export const RightResizable = observer(function RightResizable(props: RightResiz
   return (
     <>
       {(isHovering || isRightResizing) && dateString && (
-        <div className="z-[10] absolute flex text-xs font-normal text-custom-text-300 h-full w-32 -right-36 justify-start items-center">
-          <div className="px-2 py-1 bg-custom-primary-20 rounded">{dateString}</div>
+        <div className="absolute -right-36 z-[10] flex h-full w-32 items-center justify-start text-11 font-regular text-tertiary">
+          <div className="rounded-sm bg-accent-subtle px-2 py-1">{dateString}</div>
         </div>
       )}
       <div
@@ -44,11 +50,11 @@ export const RightResizable = observer(function RightResizable(props: RightResiz
         onMouseOut={() => {
           setIsHovering(false);
         }}
-        className="absolute -right-1.5 top-1/2 -translate-y-1/2 z-[6] h-full w-3 cursor-col-resize rounded-md"
+        className="absolute top-1/2 -right-1.5 z-[6] h-full w-3 -translate-y-1/2 cursor-col-resize rounded-md"
       />
       <div
         className={cn(
-          "absolute right-1 top-1/2 -translate-y-1/2 h-7 w-1 z-[5] rounded-sm bg-custom-background-100 transition-all duration-300 opacity-0 group-hover:opacity-100",
+          "absolute top-1/2 right-1 z-[5] h-7 w-1 -translate-y-1/2 rounded-xs bg-surface-1 opacity-0 transition-all duration-300 group-hover:opacity-100",
           {
             "-right-1.5 opacity-100": isRightResizing,
           }
diff --git a/apps/web/core/components/gantt-chart/helpers/blockResizables/use-gantt-resizable.ts b/apps/web/core/components/gantt-chart/helpers/blockResizables/use-gantt-resizable.ts
index 2a6814ff3..3a79ec618 100644
--- a/apps/web/core/components/gantt-chart/helpers/blockResizables/use-gantt-resizable.ts
+++ b/apps/web/core/components/gantt-chart/helpers/blockResizables/use-gantt-resizable.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useRef, useState } from "react";
 // Plane
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
diff --git a/apps/web/core/components/gantt-chart/helpers/draggable.tsx b/apps/web/core/components/gantt-chart/helpers/draggable.tsx
index c93032479..9552c9b6d 100644
--- a/apps/web/core/components/gantt-chart/helpers/draggable.tsx
+++ b/apps/web/core/components/gantt-chart/helpers/draggable.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { RefObject } from "react";
 import React from "react";
 import { observer } from "mobx-react";
@@ -37,7 +43,7 @@ export const ChartDraggable = observer(function ChartDraggable(props: Props) {
   } = props;
 
   return (
-    <div className="group w-full z-[5] relative inline-flex h-full cursor-pointer items-center font-medium transition-all">
+    <div className="group relative z-[5] inline-flex h-full w-full cursor-pointer items-center font-medium transition-all">
       {/* left resize drag handle */}
       {(typeof enableDependency === "function" ? enableDependency(block.id) : enableDependency) && (
         <LeftDependencyDraggable block={block} ganttContainerRef={ganttContainerRef} />
@@ -49,7 +55,7 @@ export const ChartDraggable = observer(function ChartDraggable(props: Props) {
         position={block.position}
       />
       <div
-        className={cn("relative z-[6] flex h-8 w-full items-center rounded", {
+        className={cn("relative z-[6] flex h-8 w-full items-center rounded-sm", {
           "pointer-events-none": isMoving,
         })}
         onMouseDown={(e) => enableBlockMove && handleBlockDrag(e, "move")}
diff --git a/apps/web/core/components/gantt-chart/helpers/index.ts b/apps/web/core/components/gantt-chart/helpers/index.ts
index c96d42eec..c63e7fe51 100644
--- a/apps/web/core/components/gantt-chart/helpers/index.ts
+++ b/apps/web/core/components/gantt-chart/helpers/index.ts
@@ -1,2 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./add-block";
 export * from "./draggable";
diff --git a/apps/web/core/components/gantt-chart/index.ts b/apps/web/core/components/gantt-chart/index.ts
index 49aaf6eea..b9a1d964f 100644
--- a/apps/web/core/components/gantt-chart/index.ts
+++ b/apps/web/core/components/gantt-chart/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./chart";
 export * from "./helpers";
 export * from "./root";
diff --git a/apps/web/core/components/gantt-chart/root.tsx b/apps/web/core/components/gantt-chart/root.tsx
index 18bedc87f..cadb5e29e 100644
--- a/apps/web/core/components/gantt-chart/root.tsx
+++ b/apps/web/core/components/gantt-chart/root.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useEffect } from "react";
 import { observer } from "mobx-react";
 // components
diff --git a/apps/web/core/components/gantt-chart/sidebar/gantt-dnd-HOC.tsx b/apps/web/core/components/gantt-chart/sidebar/gantt-dnd-HOC.tsx
index 5d09cf507..fe4bf0bc5 100644
--- a/apps/web/core/components/gantt-chart/sidebar/gantt-dnd-HOC.tsx
+++ b/apps/web/core/components/gantt-chart/sidebar/gantt-dnd-HOC.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useEffect, useRef, useState } from "react";
 import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
 import { draggable, dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
diff --git a/apps/web/core/components/gantt-chart/sidebar/index.ts b/apps/web/core/components/gantt-chart/sidebar/index.ts
index e0e48c81e..4ff511812 100644
--- a/apps/web/core/components/gantt-chart/sidebar/index.ts
+++ b/apps/web/core/components/gantt-chart/sidebar/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./issues";
 export * from "./modules";
 export * from "./root";
diff --git a/apps/web/core/components/gantt-chart/sidebar/issues/block.tsx b/apps/web/core/components/gantt-chart/sidebar/issues/block.tsx
index 1b87d9909..e7b4f279a 100644
--- a/apps/web/core/components/gantt-chart/sidebar/issues/block.tsx
+++ b/apps/web/core/components/gantt-chart/sidebar/issues/block.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 // plane imports
 import type { IGanttBlock } from "@plane/types";
@@ -39,30 +45,33 @@ export const IssuesSidebarBlock = observer(function IssuesSidebarBlock(props: Pr
   return (
     <div
       className={cn("group/list-block", {
-        "rounded bg-custom-background-80": isDragging,
-        "rounded-l border border-r-0 border-custom-primary-70": getIsIssuePeeked(block.data.id),
-        "border border-r-0 border-custom-border-400": isIssueFocused,
+        "rounded-sm bg-layer-1": isDragging,
+        "rounded-l-sm border border-r-0 border-accent-strong": getIsIssuePeeked(block.data.id),
+        "border border-r-0 border-strong-1": isIssueFocused,
       })}
       onMouseEnter={() => updateActiveBlockId(block.id)}
       onMouseLeave={() => updateActiveBlockId(null)}
     >
       <Row
-        className={cn("group w-full flex items-center gap-2 pr-4", {
-          "bg-custom-background-90": isBlockHoveredOn,
-          "bg-custom-primary-100/5 hover:bg-custom-primary-100/10": isIssueSelected,
-          "bg-custom-primary-100/10": isIssueSelected && isBlockHoveredOn,
-        })}
+        className={cn(
+          "group flex w-full items-center gap-2 bg-layer-transparent pr-4 hover:bg-layer-transparent-hover",
+          {
+            "bg-layer-transparent-hover": isBlockHoveredOn,
+            "bg-accent-primary/5 hover:bg-accent-primary/10": isIssueSelected,
+            "bg-accent-primary/10": isIssueSelected && isBlockHoveredOn,
+          }
+        )}
         style={{
           height: `${BLOCK_HEIGHT}px`,
         }}
       >
         {enableSelection && selectionHelpers && (
-          <div className="flex items-center gap-2 absolute left-1">
+          <div className="absolute left-1 flex items-center gap-2">
             <MultipleSelectEntityAction
               className={cn(
-                "opacity-0 pointer-events-none group-hover/list-block:opacity-100 group-hover/list-block:pointer-events-auto transition-opacity",
+                "pointer-events-none opacity-0 transition-opacity group-hover/list-block:pointer-events-auto group-hover/list-block:opacity-100",
                 {
-                  "opacity-100 pointer-events-auto": isIssueSelected,
+                  "pointer-events-auto opacity-100": isIssueSelected,
                 }
               )}
               groupId={GANTT_SELECT_GROUP}
@@ -76,7 +85,7 @@ export const IssuesSidebarBlock = observer(function IssuesSidebarBlock(props: Pr
             <IssueGanttSidebarBlock issueId={block.data.id} isEpic={isEpic} />
           </div>
           {duration && (
-            <div className="flex-shrink-0 text-sm text-custom-text-200">
+            <div className="flex-shrink-0 text-13 text-secondary">
               <span>
                 {duration} day{duration > 1 ? "s" : ""}
               </span>
diff --git a/apps/web/core/components/gantt-chart/sidebar/issues/index.ts b/apps/web/core/components/gantt-chart/sidebar/issues/index.ts
index 01acaeffb..1f9c99db0 100644
--- a/apps/web/core/components/gantt-chart/sidebar/issues/index.ts
+++ b/apps/web/core/components/gantt-chart/sidebar/issues/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./sidebar";
diff --git a/apps/web/core/components/gantt-chart/sidebar/issues/sidebar.tsx b/apps/web/core/components/gantt-chart/sidebar/issues/sidebar.tsx
index c58ef8bd0..ac2af1297 100644
--- a/apps/web/core/components/gantt-chart/sidebar/issues/sidebar.tsx
+++ b/apps/web/core/components/gantt-chart/sidebar/issues/sidebar.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { RefObject } from "react";
 import { useState } from "react";
 import { observer } from "mobx-react";
@@ -111,7 +117,7 @@ export const IssueGanttSidebar = observer(function IssueGanttSidebar(props: Prop
           })}
           {canLoadMoreBlocks && (
             <div ref={setIntersectionElement} className="p-2">
-              <div className="flex h-10 md:h-8 w-full items-center justify-between gap-1.5 rounded md:px-1 px-4 py-1.5 bg-custom-background-80 animate-pulse" />
+              <div className="flex h-10 w-full animate-pulse items-center justify-between gap-1.5 rounded-sm bg-layer-1 px-4 py-1.5 md:h-8 md:px-1" />
             </div>
           )}
         </>
diff --git a/apps/web/core/components/gantt-chart/sidebar/modules/block.tsx b/apps/web/core/components/gantt-chart/sidebar/modules/block.tsx
index e1685d29c..78ec85453 100644
--- a/apps/web/core/components/gantt-chart/sidebar/modules/block.tsx
+++ b/apps/web/core/components/gantt-chart/sidebar/modules/block.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 // Plane
 import { Row } from "@plane/ui";
@@ -28,16 +34,19 @@ export const ModulesSidebarBlock = observer(function ModulesSidebarBlock(props:
   return (
     <div
       className={cn({
-        "rounded bg-custom-background-80": isDragging,
+        "rounded-sm bg-layer-1": isDragging,
       })}
       onMouseEnter={() => updateActiveBlockId(block.id)}
       onMouseLeave={() => updateActiveBlockId(null)}
     >
       <Row
         id={`sidebar-block-${block.id}`}
-        className={cn("group w-full flex items-center gap-2 pr-4", {
-          "bg-custom-background-90": isBlockActive(block.id),
-        })}
+        className={cn(
+          "group flex w-full items-center gap-2 bg-layer-transparent pr-4 hover:bg-layer-transparent-hover",
+          {
+            "bg-transparent-hover": isBlockActive(block.id),
+          }
+        )}
         style={{
           height: `${BLOCK_HEIGHT}px`,
         }}
@@ -47,7 +56,7 @@ export const ModulesSidebarBlock = observer(function ModulesSidebarBlock(props:
             <ModuleGanttSidebarBlock moduleId={block.data.id} />
           </div>
           {duration !== undefined && (
-            <div className="flex-shrink-0 text-sm text-custom-text-200">
+            <div className="flex-shrink-0 text-13 text-secondary">
               {duration} day{duration > 1 ? "s" : ""}
             </div>
           )}
diff --git a/apps/web/core/components/gantt-chart/sidebar/modules/index.ts b/apps/web/core/components/gantt-chart/sidebar/modules/index.ts
index 01acaeffb..1f9c99db0 100644
--- a/apps/web/core/components/gantt-chart/sidebar/modules/index.ts
+++ b/apps/web/core/components/gantt-chart/sidebar/modules/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./sidebar";
diff --git a/apps/web/core/components/gantt-chart/sidebar/modules/sidebar.tsx b/apps/web/core/components/gantt-chart/sidebar/modules/sidebar.tsx
index 1e8373f57..0bfaa7c80 100644
--- a/apps/web/core/components/gantt-chart/sidebar/modules/sidebar.tsx
+++ b/apps/web/core/components/gantt-chart/sidebar/modules/sidebar.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 // ui
 import { GANTT_TIMELINE_TYPE } from "@plane/types";
diff --git a/apps/web/core/components/gantt-chart/sidebar/root.tsx b/apps/web/core/components/gantt-chart/sidebar/root.tsx
index 4df3977d5..e8680fdb2 100644
--- a/apps/web/core/components/gantt-chart/sidebar/root.tsx
+++ b/apps/web/core/components/gantt-chart/sidebar/root.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { RefObject } from "react";
 import { observer } from "mobx-react";
 import { useTranslation } from "@plane/i18n";
@@ -22,7 +28,6 @@ type Props = {
   enableSelection: boolean | ((blockId: string) => boolean);
   sidebarToRender: (props: any) => React.ReactNode;
   title: string;
-  quickAdd?: React.ReactNode | undefined;
   selectionHelpers: TSelectionHelper;
   showAllBlocks?: boolean;
   isEpic?: boolean;
@@ -40,7 +45,6 @@ export const GanttChartSidebar = observer(function GanttChartSidebar(props: Prop
     canLoadMoreBlocks,
     ganttContainerRef,
     title,
-    quickAdd,
     selectionHelpers,
     showAllBlocks = false,
     isEpic = false,
@@ -52,26 +56,26 @@ export const GanttChartSidebar = observer(function GanttChartSidebar(props: Prop
     <Row
       // DO NOT REMOVE THE ID
       id="gantt-sidebar"
-      className="sticky left-0 z-10 min-h-full h-max flex-shrink-0 border-r-[0.5px] border-custom-border-200 bg-custom-background-100"
+      className="sticky left-0 z-10 h-max min-h-full flex-shrink-0 border-r-[0.5px] border-subtle-1 bg-surface-1"
       style={{
         width: `${SIDEBAR_WIDTH}px`,
       }}
       variant={ERowVariant.HUGGING}
     >
       <Row
-        className="group/list-header box-border flex-shrink-0 flex items-end justify-between gap-2 border-b-[0.5px] border-custom-border-200 pb-2 pr-4 text-sm font-medium text-custom-text-300 sticky top-0 z-10 bg-custom-background-100"
+        className="group/list-header sticky top-0 z-10 box-border flex flex-shrink-0 items-end justify-between gap-2 border-b-[0.5px] border-subtle-1 bg-surface-1 pr-4 pb-2 text-13 font-medium text-tertiary"
         style={{
           height: `${HEADER_HEIGHT}px`,
         }}
       >
         <div className={cn("flex items-center gap-2")}>
           {enableSelection && (
-            <div className="flex-shrink-0 flex items-center w-3.5 absolute left-1">
+            <div className="absolute left-1 flex w-3.5 flex-shrink-0 items-center">
               <MultipleSelectGroupAction
                 className={cn(
-                  "size-3.5 opacity-0 pointer-events-none group-hover/list-header:opacity-100 group-hover/list-header:pointer-events-auto !outline-none",
+                  "pointer-events-none size-3.5 opacity-0 !outline-none group-hover/list-header:pointer-events-auto group-hover/list-header:opacity-100",
                   {
-                    "opacity-100 pointer-events-auto": !isGroupSelectionEmpty,
+                    "pointer-events-auto opacity-100": !isGroupSelectionEmpty,
                   }
                 )}
                 groupID={GANTT_SELECT_GROUP}
@@ -84,7 +88,7 @@ export const GanttChartSidebar = observer(function GanttChartSidebar(props: Prop
         <h6>{t("common.duration")}</h6>
       </Row>
 
-      <Row variant={ERowVariant.HUGGING} className="min-h-full h-max bg-custom-background-100">
+      <Row variant={ERowVariant.HUGGING} className="h-max min-h-full bg-surface-1">
         {sidebarToRender &&
           sidebarToRender({
             title,
@@ -100,7 +104,6 @@ export const GanttChartSidebar = observer(function GanttChartSidebar(props: Prop
             isEpic,
           })}
       </Row>
-      {quickAdd ? quickAdd : null}
     </Row>
   );
 });
diff --git a/apps/web/core/components/gantt-chart/sidebar/utils.ts b/apps/web/core/components/gantt-chart/sidebar/utils.ts
index 1130fd389..684431686 100644
--- a/apps/web/core/components/gantt-chart/sidebar/utils.ts
+++ b/apps/web/core/components/gantt-chart/sidebar/utils.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { ChartDataType, IBlockUpdateData, IGanttBlock } from "@plane/types";
 
 export const handleOrderChange = (
diff --git a/apps/web/core/components/gantt-chart/views/helpers.ts b/apps/web/core/components/gantt-chart/views/helpers.ts
index 3a603f70b..5d0240587 100644
--- a/apps/web/core/components/gantt-chart/views/helpers.ts
+++ b/apps/web/core/components/gantt-chart/views/helpers.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { ChartDataType, IGanttBlock } from "@plane/types";
 import { addDaysToDate, findTotalDaysInRange, getDate } from "@plane/utils";
 import { DEFAULT_BLOCK_WIDTH } from "../constants";
diff --git a/apps/web/core/components/gantt-chart/views/index.ts b/apps/web/core/components/gantt-chart/views/index.ts
index 8a4835739..1e94dbfe9 100644
--- a/apps/web/core/components/gantt-chart/views/index.ts
+++ b/apps/web/core/components/gantt-chart/views/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./week-view";
 export * from "./month-view";
 export * from "./quarter-view";
diff --git a/apps/web/core/components/gantt-chart/views/month-view.ts b/apps/web/core/components/gantt-chart/views/month-view.ts
index ffd12d9e9..3b3f50734 100644
--- a/apps/web/core/components/gantt-chart/views/month-view.ts
+++ b/apps/web/core/components/gantt-chart/views/month-view.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { cloneDeep, uniqBy } from "lodash-es";
 // plane imports
 import type { ChartDataType } from "@plane/types";
diff --git a/apps/web/core/components/gantt-chart/views/quarter-view.ts b/apps/web/core/components/gantt-chart/views/quarter-view.ts
index ab307dee3..95f99128a 100644
--- a/apps/web/core/components/gantt-chart/views/quarter-view.ts
+++ b/apps/web/core/components/gantt-chart/views/quarter-view.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 //
 import type { ChartDataType } from "@plane/types";
 import { quarters } from "../data";
diff --git a/apps/web/core/components/gantt-chart/views/week-view.ts b/apps/web/core/components/gantt-chart/views/week-view.ts
index f50afeeae..a94ffab14 100644
--- a/apps/web/core/components/gantt-chart/views/week-view.ts
+++ b/apps/web/core/components/gantt-chart/views/week-view.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 //
 import type { ChartDataType } from "@plane/types";
 import { EStartOfTheWeek } from "@plane/types";
diff --git a/apps/web/core/components/global/chat-support-modal.tsx b/apps/web/core/components/global/chat-support-modal.tsx
deleted file mode 100644
index 75c6c10ad..000000000
--- a/apps/web/core/components/global/chat-support-modal.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import { useEffect } from "react";
-import { Intercom, shutdown, show } from "@intercom/messenger-js-sdk";
-import { observer } from "mobx-react";
-// custom events
-import { CHAT_SUPPORT_EVENTS } from "@/custom-events/chat-support";
-// store hooks
-import { useInstance } from "@/hooks/store/use-instance";
-import { useUser } from "@/hooks/store/user";
-
-const ChatSupportModal = observer(function ChatSupportModal() {
-  // store hooks
-  const { data: user } = useUser();
-  const { config } = useInstance();
-  // derived values
-  const intercomAppId = config?.intercom_app_id;
-  const isEnabled = Boolean(user && config?.is_intercom_enabled && intercomAppId);
-
-  useEffect(() => {
-    if (!isEnabled || !user || !intercomAppId) return;
-
-    Intercom({
-      app_id: intercomAppId,
-      user_id: user.id,
-      name: `${user.first_name} ${user.last_name}`,
-      email: user.email,
-      hide_default_launcher: true,
-    });
-
-    const handleOpenChatSupport = () => {
-      show();
-    };
-
-    window.addEventListener(CHAT_SUPPORT_EVENTS.open, handleOpenChatSupport);
-    return () => {
-      window.removeEventListener(CHAT_SUPPORT_EVENTS.open, handleOpenChatSupport);
-      shutdown();
-    };
-  }, [user, intercomAppId, isEnabled]);
-
-  return null;
-});
-
-export default ChatSupportModal;
diff --git a/apps/web/core/components/global/index.ts b/apps/web/core/components/global/index.ts
index bb0ffcec8..32e2d4a18 100644
--- a/apps/web/core/components/global/index.ts
+++ b/apps/web/core/components/global/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./product-updates";
 
 export * from "./timezone-select";
diff --git a/apps/web/core/components/global/product-updates/fallback.tsx b/apps/web/core/components/global/product-updates/fallback.tsx
index ac865f437..57ed75f95 100644
--- a/apps/web/core/components/global/product-updates/fallback.tsx
+++ b/apps/web/core/components/global/product-updates/fallback.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { EmptyStateDetailed } from "@plane/propel/empty-state";
 
 type TProductUpdatesFallbackProps = {
diff --git a/apps/web/core/components/global/product-updates/footer.tsx b/apps/web/core/components/global/product-updates/footer.tsx
index ba78d45df..ed0a185a5 100644
--- a/apps/web/core/components/global/product-updates/footer.tsx
+++ b/apps/web/core/components/global/product-updates/footer.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { USER_TRACKER_ELEMENTS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 // ui
@@ -9,12 +15,12 @@ import { cn } from "@plane/utils";
 export function ProductUpdatesFooter() {
   const { t } = useTranslation();
   return (
-    <div className="flex items-center justify-between flex-shrink-0 gap-4 m-6 mb-4">
+    <div className="m-6 mb-4 flex flex-shrink-0 items-center justify-between gap-4">
       <div className="flex items-center gap-2">
         <a
           href="https://go.plane.so/p-docs"
           target="_blank"
-          className="text-sm text-custom-text-200 hover:text-custom-text-100 hover:underline underline-offset-1 outline-none"
+          className="text-13 text-secondary underline-offset-1 outline-none hover:text-primary hover:underline"
           rel="noreferrer"
         >
           {t("docs")}
@@ -26,7 +32,7 @@ export function ProductUpdatesFooter() {
           data-ph-element={USER_TRACKER_ELEMENTS.CHANGELOG_REDIRECTED}
           href="https://go.plane.so/p-changelog"
           target="_blank"
-          className="text-sm text-custom-text-200 hover:text-custom-text-100 hover:underline underline-offset-1 outline-none"
+          className="text-13 text-secondary underline-offset-1 outline-none hover:text-primary hover:underline"
           rel="noreferrer"
         >
           {t("full_changelog")}
@@ -37,7 +43,7 @@ export function ProductUpdatesFooter() {
         <a
           href="mailto:support@plane.so"
           target="_blank"
-          className="text-sm text-custom-text-200 hover:text-custom-text-100 hover:underline underline-offset-1 outline-none"
+          className="text-13 text-secondary underline-offset-1 outline-none hover:text-primary hover:underline"
           rel="noreferrer"
         >
           {t("support")}
@@ -46,24 +52,24 @@ export function ProductUpdatesFooter() {
           <circle cx={1} cy={1} r={1} />
         </svg>
         <a
-          href="https://go.plane.so/p-discord"
+          href="https://forum.plane.so"
           target="_blank"
-          className="text-sm text-custom-text-200 hover:text-custom-text-100 hover:underline underline-offset-1 outline-none"
+          className="text-13 text-secondary underline-offset-1 outline-none hover:text-primary hover:underline"
           rel="noreferrer"
         >
-          Discord
+          Forum
         </a>
       </div>
       <a
         href="https://plane.so/pages"
         target="_blank"
         className={cn(
-          getButtonStyling("accent-primary", "sm"),
-          "flex gap-1.5 items-center text-center font-medium hover:underline underline-offset-2 outline-none"
+          getButtonStyling("secondary", "base"),
+          "flex items-center gap-1.5 text-center font-medium underline-offset-2 outline-none hover:underline"
         )}
         rel="noreferrer"
       >
-        <PlaneLogo className="h-4 w-auto text-custom-text-100" />
+        <PlaneLogo className="h-4 w-auto text-primary" />
         {t("powered_by_plane_pages")}
       </a>
     </div>
diff --git a/apps/web/core/components/global/product-updates/index.ts b/apps/web/core/components/global/product-updates/index.ts
index 6886b5503..b9ae9c011 100644
--- a/apps/web/core/components/global/product-updates/index.ts
+++ b/apps/web/core/components/global/product-updates/index.ts
@@ -1,2 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./modal";
 export * from "./footer";
diff --git a/apps/web/core/components/global/product-updates/modal.tsx b/apps/web/core/components/global/product-updates/modal.tsx
index 87ac429c2..8239769c6 100644
--- a/apps/web/core/components/global/product-updates/modal.tsx
+++ b/apps/web/core/components/global/product-updates/modal.tsx
@@ -1,12 +1,14 @@
-import { useEffect } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
-import { USER_TRACKER_ELEMENTS } from "@plane/constants";
 // ui
 import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
 // components
 import { ProductUpdatesFooter } from "@/components/global";
-// helpers
-import { captureView } from "@/helpers/event-tracker.helper";
 // plane web components
 import { ProductUpdatesChangelog } from "@/plane-web/components/global/product-updates/changelog";
 import { ProductUpdatesHeader } from "@/plane-web/components/global/product-updates/header";
@@ -19,12 +21,6 @@ export type ProductUpdatesModalProps = {
 export const ProductUpdatesModal = observer(function ProductUpdatesModal(props: ProductUpdatesModalProps) {
   const { isOpen, handleClose } = props;
 
-  useEffect(() => {
-    if (isOpen) {
-      captureView({ elementName: USER_TRACKER_ELEMENTS.PRODUCT_CHANGELOG_MODAL });
-    }
-  }, [isOpen]);
-
   return (
     <ModalCore isOpen={isOpen} handleClose={handleClose} position={EModalPosition.CENTER} width={EModalWidth.XXXXL}>
       <ProductUpdatesHeader />
diff --git a/apps/web/core/components/global/timezone-select.tsx b/apps/web/core/components/global/timezone-select.tsx
index 36a60581c..a4d692a55 100644
--- a/apps/web/core/components/global/timezone-select.tsx
+++ b/apps/web/core/components/global/timezone-select.tsx
@@ -1,5 +1,11 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
+// plane imports
 import { CustomSearchSelect } from "@plane/ui";
 import { cn } from "@plane/utils";
 // hooks
@@ -38,13 +44,14 @@ export const TimezoneSelect = observer(function TimezoneSelect(props: TTimezoneS
         label={value && selectedValue ? selectedValue(value) : label}
         options={isDisabled || disabled ? [] : timezones}
         onChange={onChange}
-        buttonClassName={cn(buttonClassName, {
-          "border-red-500": error,
+        buttonClassName={cn(buttonClassName, "border border-subtle-1", {
+          "border-danger-strong": error,
         })}
-        className={cn("rounded-md border-[0.5px] !border-custom-border-200", className)}
+        className={cn("rounded-md", className)}
         optionsClassName={cn("w-72", optionsClassName)}
         input
         disabled={isDisabled || disabled}
+        placement="bottom-end"
       />
     </div>
   );
diff --git a/apps/web/core/components/home/home-dashboard-widgets.tsx b/apps/web/core/components/home/home-dashboard-widgets.tsx
index 0ed4cfcae..067fa06c3 100644
--- a/apps/web/core/components/home/home-dashboard-widgets.tsx
+++ b/apps/web/core/components/home/home-dashboard-widgets.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import { useParams, usePathname } from "next/navigation";
 import { useTheme } from "next-themes";
@@ -76,7 +82,7 @@ export const DashboardWidgets = observer(function DashboardWidgets() {
   if (loading || loader !== "loaded") return <HomeLoader />;
 
   return (
-    <div className="h-full w-full relative flex flex-col gap-7">
+    <div className="relative flex h-full w-full flex-col gap-7">
       <HomePageHeader />
       <ManageWidgetsModal
         workspaceSlug={workspaceSlug.toString()}
@@ -86,7 +92,7 @@ export const DashboardWidgets = observer(function DashboardWidgets() {
       {!isWikiApp && <NoProjectsEmptyState />}
 
       {isAnyWidgetEnabled ? (
-        <div className="flex flex-col divide-y-[1px] divide-custom-border-100">
+        <div className="flex flex-col">
           {orderedWidgets.map((key) => {
             const WidgetComponent = HOME_WIDGETS_LIST[key]?.component;
             const isEnabled = widgetsMap[key]?.is_enabled;
@@ -99,7 +105,7 @@ export const DashboardWidgets = observer(function DashboardWidgets() {
           })}
         </div>
       ) : (
-        <div className="h-full w-full grid place-items-center">
+        <div className="grid h-full w-full place-items-center">
           <SimpleEmptyState
             title={t("home.empty.widgets.title")}
             description={t("home.empty.widgets.description")}
diff --git a/apps/web/core/components/home/index.ts b/apps/web/core/components/home/index.ts
index 09005cb24..696c86c92 100644
--- a/apps/web/core/components/home/index.ts
+++ b/apps/web/core/components/home/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./widgets";
 export * from "./home-dashboard-widgets";
 export * from "./root";
diff --git a/apps/web/core/components/home/root.tsx b/apps/web/core/components/home/root.tsx
index cb56b2799..908993a1e 100644
--- a/apps/web/core/components/home/root.tsx
+++ b/apps/web/core/components/home/root.tsx
@@ -1,11 +1,14 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 import useSWR from "swr";
 // plane imports
-import { PRODUCT_TOUR_TRACKER_EVENTS } from "@plane/constants";
 import { ContentWrapper } from "@plane/ui";
-// helpers
-import { captureSuccess } from "@/helpers/event-tracker.helper";
 // hooks
 import { useHome } from "@/hooks/store/use-home";
 import { useUserProfile, useUser } from "@/hooks/store/user";
@@ -33,33 +36,26 @@ export const WorkspaceHomeView = observer(function WorkspaceHomeView() {
     }
   );
 
-  const handleTourCompleted = () => {
-    updateTourCompleted()
-      .then(() => {
-        captureSuccess({
-          eventName: PRODUCT_TOUR_TRACKER_EVENTS.complete,
-          payload: {
-            user_id: currentUser?.id,
-          },
-        });
-      })
-      .catch((error) => {
-        console.error(error);
-      });
+  const handleTourCompleted = async () => {
+    try {
+      await updateTourCompleted();
+    } catch (error) {
+      console.error("Error updating tour completed", error);
+    }
   };
 
   // TODO: refactor loader implementation
   return (
     <>
       {currentUserProfile && !currentUserProfile.is_tour_completed && (
-        <div className="fixed left-0 top-0 z-20 grid h-full w-full place-items-center bg-custom-backdrop bg-opacity-50 transition-opacity overflow-y-auto">
+        <div className="fixed top-0 left-0 z-20 grid h-full w-full place-items-center overflow-y-auto bg-backdrop transition-opacity">
           <TourRoot onComplete={handleTourCompleted} />
         </div>
       )}
       <>
         <HomePeekOverviewsRoot />
-        <ContentWrapper className="gap-6 bg-custom-background-100 mx-auto scrollbar-hide px-page-x">
-          <div className="max-w-[800px] mx-auto w-full">
+        <ContentWrapper className="mx-auto scrollbar-hide gap-6 bg-surface-1 px-page-x">
+          <div className="mx-auto w-full max-w-[800px]">
             {currentUser && <UserGreetingsView user={currentUser} />}
             <DashboardWidgets />
           </div>
diff --git a/apps/web/core/components/home/user-greetings.tsx b/apps/web/core/components/home/user-greetings.tsx
index 4ed331b4e..8d5d6cc1e 100644
--- a/apps/web/core/components/home/user-greetings.tsx
+++ b/apps/web/core/components/home/user-greetings.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // plane types
 import { useTranslation } from "@plane/i18n";
 import type { IUser } from "@plane/types";
@@ -41,11 +46,11 @@ export function UserGreetingsView(props: IUserGreetingsView) {
   const greeting = parseInt(hour, 10) < 12 ? "morning" : parseInt(hour, 10) < 18 ? "afternoon" : "evening";
 
   return (
-    <div className="flex flex-col items-center my-6">
-      <h2 className="text-2xl font-semibold text-center">
+    <div className="my-6 flex flex-col items-center">
+      <h2 className="text-center text-20 font-semibold">
         {t("good")} {t(greeting)}, {user?.first_name} {user?.last_name}
       </h2>
-      <h5 className="flex items-center gap-2 font-medium text-custom-text-400">
+      <h5 className="flex items-center gap-2 font-medium text-placeholder">
         <div>{greeting === "morning" ? "🌤️" : greeting === "afternoon" ? "🌥️" : "🌙️"}</div>
         <div>
           {weekDay}, {date} {timeString}
diff --git a/apps/web/core/components/home/widgets/empty-states/index.ts b/apps/web/core/components/home/widgets/empty-states/index.ts
index 72b042924..2300b912a 100644
--- a/apps/web/core/components/home/widgets/empty-states/index.ts
+++ b/apps/web/core/components/home/widgets/empty-states/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./links";
 export * from "./no-projects";
 export * from "./recents";
diff --git a/apps/web/core/components/home/widgets/empty-states/links.tsx b/apps/web/core/components/home/widgets/empty-states/links.tsx
index 5f7b48b38..bd0350c69 100644
--- a/apps/web/core/components/home/widgets/empty-states/links.tsx
+++ b/apps/web/core/components/home/widgets/empty-states/links.tsx
@@ -1,10 +1,16 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useTranslation } from "@plane/i18n";
 import { EmptyStateCompact } from "@plane/propel/empty-state";
 
 export function LinksEmptyState() {
   const { t } = useTranslation();
   return (
-    <div className="flex items-center justify-center py-10 bg-custom-background-90 w-full">
+    <div className="flex w-full items-center justify-center rounded-lg bg-layer-1 py-10">
       <EmptyStateCompact
         assetKey="link"
         assetClassName="w-20 h-20"
diff --git a/apps/web/core/components/home/widgets/empty-states/no-projects.tsx b/apps/web/core/components/home/widgets/empty-states/no-projects.tsx
index 2a93c3383..753fd66c5 100644
--- a/apps/web/core/components/home/widgets/empty-states/no-projects.tsx
+++ b/apps/web/core/components/home/widgets/empty-states/no-projects.tsx
@@ -1,18 +1,22 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 // mobx
 import { observer } from "mobx-react";
 import Link from "next/link";
 import { useParams } from "next/navigation";
-import { Check, Hotel, Users } from "lucide-react";
+import { Hotel } from "lucide-react";
 // plane ui
-import { EUserPermissions, EUserPermissionsLevel, PROJECT_TRACKER_ELEMENTS } from "@plane/constants";
+import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { useLocalStorage } from "@plane/hooks";
 import { useTranslation } from "@plane/i18n";
-import { ProjectIcon, CloseIcon } from "@plane/propel/icons";
+import { MembersPropertyIcon, CheckIcon, ProjectIcon, CloseIcon } from "@plane/propel/icons";
 import { cn, getFileURL } from "@plane/utils";
-// helpers
 // hooks
-import { captureClick } from "@/helpers/event-tracker.helper";
 import { useCommandPalette } from "@/hooks/store/use-command-palette";
 import { useProject } from "@/hooks/store/use-project";
 import { useWorkspace } from "@/hooks/store/use-workspace";
@@ -57,7 +61,6 @@ export const NoProjectsEmptyState = observer(function NoProjectsEmptyState() {
           e.preventDefault();
           e.stopPropagation();
           toggleCreateProjectModal(true);
-          captureClick({ elementName: PROJECT_TRACKER_ELEMENTS.EMPTY_STATE_CREATE_PROJECT_BUTTON });
         },
         disabled: !canCreateProject,
       },
@@ -66,7 +69,7 @@ export const NoProjectsEmptyState = observer(function NoProjectsEmptyState() {
       id: "invite-team",
       title: "home.empty.invite_team.title",
       description: "home.empty.invite_team.description",
-      icon: <Users className="size-4" />,
+      icon: <MembersPropertyIcon className="size-4" />,
       flag: "visited_members",
       cta: {
         text: "home.empty.invite_team.cta",
@@ -93,17 +96,17 @@ export const NoProjectsEmptyState = observer(function NoProjectsEmptyState() {
       icon:
         currentUser?.avatar_url && currentUser?.avatar_url.trim() !== "" ? (
           <Link href={`/${workspaceSlug}/profile/${currentUser?.id}`}>
-            <span className="relative flex size-4 items-center justify-center rounded-full p-4 capitalize text-white">
+            <span className="relative flex size-4 items-center justify-center rounded-full p-4 text-on-color capitalize">
               <img
                 src={getFileURL(currentUser?.avatar_url)}
-                className="absolute left-0 top-0 h-full w-full rounded-full object-cover"
+                className="absolute top-0 left-0 h-full w-full rounded-full object-cover"
                 alt={currentUser?.display_name || currentUser?.email}
               />
             </span>
           </Link>
         ) : (
           <Link href={`/${workspaceSlug}/profile/${currentUser?.id}`}>
-            <span className="relative flex size-4 items-center justify-center rounded-full bg-gray-700 p-4 capitalize text-white text-sm">
+            <span className="relative flex size-4 items-center justify-center rounded-full bg-[#028375] p-4 text-13 text-on-color capitalize">
               {(currentUser?.email ?? currentUser?.display_name ?? "?")[0]}
             </span>
           </Link>
@@ -111,7 +114,7 @@ export const NoProjectsEmptyState = observer(function NoProjectsEmptyState() {
       flag: "visited_profile",
       cta: {
         text: "home.empty.personalize_account.cta",
-        link: `/${workspaceSlug}/settings/account`,
+        link: `/settings/profile/general`,
         disabled: false,
       },
     },
@@ -133,10 +136,10 @@ export const NoProjectsEmptyState = observer(function NoProjectsEmptyState() {
 
   return (
     <div>
-      <div className="flex items-center justify-between mb-4">
-        <div className="text-base font-semibold text-custom-text-350">{t("home.empty.quickstart_guide")}</div>
+      <div className="mb-4 flex items-center justify-between">
+        <div className="text-14 font-semibold text-tertiary">{t("home.empty.quickstart_guide")}</div>
         <button
-          className="text-custom-text-300 font-medium text-sm flex items-center gap-1"
+          className="flex items-center gap-1 text-13 font-medium text-tertiary"
           onClick={() => {
             if (!storedValue) return;
             setValue({ ...storedValue, hide: true });
@@ -146,29 +149,23 @@ export const NoProjectsEmptyState = observer(function NoProjectsEmptyState() {
           {t("home.empty.not_right_now")}
         </button>
       </div>
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+      <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
         {EMPTY_STATE_DATA.map((item) => {
           const isStateComplete = isComplete(item.flag);
           return (
-            <div
-              key={item.id}
-              className="flex flex-col p-4 bg-custom-background-100 rounded-xl border border-custom-border-200/40"
-            >
+            <div key={item.id} className="flex flex-col rounded-xl border border-subtle bg-layer-2 p-4">
               <div
-                className={cn(
-                  "grid place-items-center bg-custom-background-90 rounded-full size-9 mb-3 text-custom-text-400",
-                  {
-                    "text-custom-primary-100 bg-custom-primary-100/10": !isStateComplete,
-                  }
-                )}
+                className={cn("mb-3 grid size-9 place-items-center rounded-full bg-surface-2 text-placeholder", {
+                  "bg-accent-primary/10 text-accent-primary": !isStateComplete,
+                })}
               >
-                <span className="text-3xl my-auto">{item.icon}</span>
+                <span className="my-auto text-24">{item.icon}</span>
               </div>
-              <h3 className="text-sm font-medium text-custom-text-100 mb-2">{t(item.title)}</h3>
-              <p className="text-[11px] text-custom-text-300 mb-2">{t(item.description)}</p>
+              <h3 className="mb-2 text-13 font-medium text-primary">{t(item.title)}</h3>
+              <p className="mb-2 text-11 text-tertiary">{t(item.description)}</p>
               {isStateComplete ? (
-                <div className="flex items-center gap-2 bg-[#17a34a] rounded-full p-1 w-fit">
-                  <Check className="size-3 text-custom-primary-100 text-white" />
+                <div className="flex w-fit items-center gap-2 rounded-full bg-[#17a34a] p-1">
+                  <CheckIcon className="size-3 text-accent-primary text-on-color" />
                 </div>
               ) : (
                 !item.cta.disabled &&
@@ -186,14 +183,14 @@ export const NoProjectsEmptyState = observer(function NoProjectsEmptyState() {
                         [item.flag]: true,
                       });
                     }}
-                    className={cn("text-custom-primary-100 hover:text-custom-primary-200 text-sm font-medium", {})}
+                    className={cn("text-13 font-medium text-accent-primary hover:text-accent-secondary", {})}
                   >
                     {t(item.cta.text)}
                   </Link>
                 ) : (
                   <button
                     type="button"
-                    className="text-custom-primary-100 hover:text-custom-primary-200 text-sm font-medium"
+                    className="text-left text-13 font-medium text-accent-primary hover:text-accent-secondary"
                     onClick={item.cta.onClick}
                   >
                     {t(item.cta.text)}
diff --git a/apps/web/core/components/home/widgets/empty-states/recents.tsx b/apps/web/core/components/home/widgets/empty-states/recents.tsx
index 3f358d8c3..0b219f60f 100644
--- a/apps/web/core/components/home/widgets/empty-states/recents.tsx
+++ b/apps/web/core/components/home/widgets/empty-states/recents.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useTranslation } from "@plane/i18n";
 import { EmptyStateCompact } from "@plane/propel/empty-state";
 import type { CompactAssetType } from "@plane/propel/empty-state";
@@ -33,7 +39,7 @@ export function RecentsEmptyState({ type }: { type: string }) {
   const { assetKey, text } = getDisplayContent(type);
 
   return (
-    <div className="flex items-center justify-center py-10 bg-custom-background-90 w-full">
+    <div className="flex w-full items-center justify-center rounded-lg bg-layer-1 py-10">
       <EmptyStateCompact assetKey={assetKey} assetClassName="size-20" title={t(text)} />
     </div>
   );
diff --git a/apps/web/core/components/home/widgets/empty-states/stickies.tsx b/apps/web/core/components/home/widgets/empty-states/stickies.tsx
index 0a934cfd5..d8798dc4f 100644
--- a/apps/web/core/components/home/widgets/empty-states/stickies.tsx
+++ b/apps/web/core/components/home/widgets/empty-states/stickies.tsx
@@ -1,10 +1,16 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useTranslation } from "@plane/i18n";
 import { EmptyStateCompact } from "@plane/propel/empty-state";
 
 export function StickiesEmptyState() {
   const { t } = useTranslation();
   return (
-    <div className="flex items-center justify-center py-10 bg-custom-background-90 w-full">
+    <div className="flex w-full items-center justify-center rounded-lg bg-layer-1 py-10">
       <EmptyStateCompact assetKey="note" assetClassName="size-20" title={t("stickies.empty_state.simple")} />
     </div>
   );
diff --git a/apps/web/core/components/home/widgets/index.ts b/apps/web/core/components/home/widgets/index.ts
index 038e42ff1..18e0accce 100644
--- a/apps/web/core/components/home/widgets/index.ts
+++ b/apps/web/core/components/home/widgets/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./empty-states";
 export * from "./loaders";
 export * from "./recents";
diff --git a/apps/web/core/components/home/widgets/links/action.tsx b/apps/web/core/components/home/widgets/links/action.tsx
index 0c5430c64..f82749548 100644
--- a/apps/web/core/components/home/widgets/links/action.tsx
+++ b/apps/web/core/components/home/widgets/links/action.tsx
@@ -1,5 +1,11 @@
-import { PlusIcon } from "lucide-react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useTranslation } from "@plane/i18n";
+import { PlusIcon } from "@plane/propel/icons";
 
 type TProps = {
   onClick: () => void;
@@ -10,13 +16,13 @@ export function AddLink(props: TProps) {
 
   return (
     <button
-      className="btn btn-primary flex bg-custom-background-100 px-4 w-[230px] h-[56px] border-[0.5px] border-custom-border-200 rounded-md gap-4"
+      className="btn btn-primary flex h-[56px] w-[230px] gap-4 rounded-md border-[0.5px] border-subtle bg-surface-1 px-4"
       onClick={onClick}
     >
-      <div className="rounded p-2 bg-custom-background-80/40 w-8 h-8 my-auto">
-        <PlusIcon className="h-4 w-4 stroke-2 text-custom-text-350" />
+      <div className="my-auto h-8 w-8 rounded-sm bg-layer-1/40 p-2">
+        <PlusIcon className="h-4 w-4 stroke-2 text-tertiary" />
       </div>
-      <div className="text-sm font-medium my-auto">{t("home.quick_links.add")}</div>
+      <div className="my-auto text-13 font-medium">{t("home.quick_links.add")}</div>
     </button>
   );
 }
diff --git a/apps/web/core/components/home/widgets/links/create-update-link-modal.tsx b/apps/web/core/components/home/widgets/links/create-update-link-modal.tsx
index 00e515f12..76361332e 100644
--- a/apps/web/core/components/home/widgets/links/create-update-link-modal.tsx
+++ b/apps/web/core/components/home/widgets/links/create-update-link-modal.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useEffect } from "react";
 import { observer } from "mobx-react";
 import { Controller, useForm } from "react-hook-form";
@@ -66,14 +71,14 @@ export const LinkCreateUpdateModal = observer(function LinkCreateUpdateModal(pro
     <ModalCore isOpen={isModalOpen} handleClose={onClose}>
       <form onSubmit={handleSubmit(handleFormSubmit)}>
         <div className="space-y-5 p-5">
-          <h3 className="text-xl font-medium text-custom-text-200">
+          <h3 className="text-18 font-medium text-secondary">
             {preloadedData?.id ? t("update") : t("add")} {t("home.quick_links.title")}
           </h3>
           <div className="mt-2 space-y-3">
             <div>
-              <label htmlFor="url" className="mb-2 text-custom-text-200 text-base font-medium">
+              <label htmlFor="url" className="mb-2 text-14 font-medium text-secondary">
                 {t("link.modal.url.text")}
-                <span className="text-[10px] block">{t("required")}</span>
+                <span className="block text-10">{t("required")}</span>
               </label>
               <Controller
                 control={control}
@@ -94,12 +99,12 @@ export const LinkCreateUpdateModal = observer(function LinkCreateUpdateModal(pro
                   />
                 )}
               />
-              {errors.url && <span className="text-xs text-red-500">{t("link.modal.url.required")}</span>}
+              {errors.url && <span className="text-11 text-danger-primary">{t("link.modal.url.required")}</span>}
             </div>
             <div>
-              <label htmlFor="title" className="mb-2 text-custom-text-200 text-base font-medium">
+              <label htmlFor="title" className="mb-2 text-14 font-medium text-secondary">
                 {t("link.modal.title.text")}
-                <span className="text-[10px] block">{t("optional")}</span>
+                <span className="block text-10">{t("optional")}</span>
               </label>
               <Controller
                 control={control}
@@ -120,11 +125,11 @@ export const LinkCreateUpdateModal = observer(function LinkCreateUpdateModal(pro
             </div>
           </div>
         </div>
-        <div className="px-5 py-4 flex items-center justify-end gap-2 border-t-[0.5px] border-custom-border-200">
-          <Button variant="neutral-primary" size="sm" onClick={onClose}>
+        <div className="flex items-center justify-end gap-2 border-t-[0.5px] border-subtle px-5 py-4">
+          <Button variant="secondary" size="lg" onClick={onClose}>
             {t("Cancel")}
           </Button>
-          <Button variant="primary" size="sm" type="submit" loading={isSubmitting}>
+          <Button variant="primary" size="lg" type="submit" loading={isSubmitting}>
             {preloadedData?.id ? (isSubmitting ? t("updating") : t("update")) : isSubmitting ? t("adding") : t("add")}{" "}
             {t("home.quick_links.title")}
           </Button>
diff --git a/apps/web/core/components/home/widgets/links/index.ts b/apps/web/core/components/home/widgets/links/index.ts
index 380f7763c..a8215b5b2 100644
--- a/apps/web/core/components/home/widgets/links/index.ts
+++ b/apps/web/core/components/home/widgets/links/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./root";
 export * from "./links";
 export * from "./link-detail";
diff --git a/apps/web/core/components/home/widgets/links/link-detail.tsx b/apps/web/core/components/home/widgets/links/link-detail.tsx
index bc94493e3..e2a7bc727 100644
--- a/apps/web/core/components/home/widgets/links/link-detail.tsx
+++ b/apps/web/core/components/home/widgets/links/link-detail.tsx
@@ -1,7 +1,14 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useCallback, useMemo } from "react";
 import { observer } from "mobx-react";
-import { Pencil, ExternalLink, Link, Trash2 } from "lucide-react";
+
 import { useTranslation } from "@plane/i18n";
+import { LinkIcon, NewTabIcon, EditIcon, TrashIcon } from "@plane/propel/icons";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { TContextMenuItem } from "@plane/ui";
 import { LinkItemBlock } from "@plane/ui";
@@ -64,25 +71,25 @@ export const ProjectLinkDetail = observer(function ProjectLinkDetail(props: TPro
         key: "edit",
         action: () => handleEdit(true),
         title: t("edit"),
-        icon: Pencil,
+        icon: EditIcon,
       },
       {
         key: "open-new-tab",
         action: handleOpenInNewTab,
         title: t("open_in_new_tab"),
-        icon: ExternalLink,
+        icon: NewTabIcon,
       },
       {
         key: "copy-link",
         action: handleCopyText,
         title: t("copy_link"),
-        icon: Link,
+        icon: LinkIcon,
       },
       {
         key: "delete",
         action: handleDelete,
         title: t("delete"),
-        icon: Trash2,
+        icon: TrashIcon,
       },
     ],
     [handleEdit, handleOpenInNewTab, handleCopyText, handleDelete, t]
diff --git a/apps/web/core/components/home/widgets/links/links.tsx b/apps/web/core/components/home/widgets/links/links.tsx
index 0d272e0a3..4d6d17121 100644
--- a/apps/web/core/components/home/widgets/links/links.tsx
+++ b/apps/web/core/components/home/widgets/links/links.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 // computed
 import { ContentOverflowWrapper } from "@/components/core/content-overflow-HOC";
@@ -35,9 +40,9 @@ export const ProjectLinkList = observer(function ProjectLinkList(props: TProject
         maxHeight={150}
         containerClassName="box-border min-h-[30px] flex flex-col"
         fallback={<></>}
-        buttonClassName="bg-custom-background-90/20"
+        buttonClassName="bg-surface-2/20"
       >
-        <div className="flex gap-2 mb-2 flex-wrap flex-1">
+        <div className="mb-2 flex flex-1 flex-wrap gap-2">
           {links.map((linkId) => (
             <ProjectLinkDetail key={linkId} linkId={linkId} linkOperations={linkOperations} />
           ))}
diff --git a/apps/web/core/components/home/widgets/links/root.tsx b/apps/web/core/components/home/widgets/links/root.tsx
index 39706b445..3eb9b9294 100644
--- a/apps/web/core/components/home/widgets/links/root.tsx
+++ b/apps/web/core/components/home/widgets/links/root.tsx
@@ -1,8 +1,15 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useCallback } from "react";
 import { observer } from "mobx-react";
 import useSWR from "swr";
-import { Plus } from "lucide-react";
+
 import { useTranslation } from "@plane/i18n";
+import { PlusIcon } from "@plane/propel/icons";
 import type { THomeWidgetProps } from "@plane/types";
 import { useHome } from "@/hooks/store/use-home";
 import { LinkCreateUpdateModal } from "./create-update-link-modal";
@@ -40,16 +47,16 @@ export const DashboardQuickLinks = observer(function DashboardQuickLinks(props:
         preloadedData={linkData}
       />
       <div className="mb-2">
-        <div className="flex items-center justify-between mb-4">
-          <div className="text-base font-semibold text-custom-text-350">{t("home.quick_links.title_plural")}</div>
+        <div className="mb-4 flex items-center justify-between">
+          <div className="text-14 font-semibold text-tertiary">{t("home.quick_links.title_plural")}</div>
           <button
             onClick={handleCreateLinkModal}
-            className="flex gap-1 text-sm font-medium text-custom-primary-100 my-auto"
+            className="my-auto flex gap-1 text-13 font-medium text-accent-primary"
           >
-            <Plus className="size-4 my-auto" /> <span>{t("home.quick_links.add")}</span>
+            <PlusIcon className="my-auto size-4" /> <span>{t("home.quick_links.add")}</span>
           </button>
         </div>
-        <div className="flex flex-wrap w-full">
+        <div className="flex w-full flex-wrap">
           {/* rendering links */}
           <ProjectLinkList workspaceSlug={workspaceSlug} linkOperations={linkOperations} />
         </div>
diff --git a/apps/web/core/components/home/widgets/links/use-links.tsx b/apps/web/core/components/home/widgets/links/use-links.tsx
index 441325875..72da25421 100644
--- a/apps/web/core/components/home/widgets/links/use-links.tsx
+++ b/apps/web/core/components/home/widgets/links/use-links.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useMemo } from "react";
 import { useTranslation } from "@plane/i18n";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
diff --git a/apps/web/core/components/home/widgets/loaders/home-loader.tsx b/apps/web/core/components/home/widgets/loaders/home-loader.tsx
index 958801077..571ef8073 100644
--- a/apps/web/core/components/home/widgets/loaders/home-loader.tsx
+++ b/apps/web/core/components/home/widgets/loaders/home-loader.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { range } from "lodash-es";
 // ui
 import { Loader } from "@plane/ui";
@@ -8,10 +14,10 @@ export function HomeLoader() {
       {range(3).map((index) => (
         <div key={index}>
           <div className="mb-2">
-            <div className="text-base font-semibold text-custom-text-350 mb-4">
+            <div className="mb-4 text-14 font-semibold text-tertiary">
               <Loader.Item height="20px" width="100px" />
             </div>
-            <Loader className="h-[110px] w-full flex items-center justify-center gap-2 text-custom-text-400 rounded">
+            <Loader className="flex h-[110px] w-full items-center justify-center gap-2 rounded-sm text-placeholder">
               <Loader.Item height="100%" width="100%" />
             </Loader>
           </div>
diff --git a/apps/web/core/components/home/widgets/loaders/index.ts b/apps/web/core/components/home/widgets/loaders/index.ts
index a0925eccd..1ea535450 100644
--- a/apps/web/core/components/home/widgets/loaders/index.ts
+++ b/apps/web/core/components/home/widgets/loaders/index.ts
@@ -1,2 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./loader";
 export * from "./home-loader";
diff --git a/apps/web/core/components/home/widgets/loaders/loader.tsx b/apps/web/core/components/home/widgets/loaders/loader.tsx
index 75b87daf0..afdfe3834 100644
--- a/apps/web/core/components/home/widgets/loaders/loader.tsx
+++ b/apps/web/core/components/home/widgets/loaders/loader.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // components
 import { QuickLinksWidgetLoader } from "./quick-links";
 import { RecentActivityWidgetLoader } from "./recent-activity";
diff --git a/apps/web/core/components/home/widgets/loaders/quick-links.tsx b/apps/web/core/components/home/widgets/loaders/quick-links.tsx
index e58aa6c4b..4a12645af 100644
--- a/apps/web/core/components/home/widgets/loaders/quick-links.tsx
+++ b/apps/web/core/components/home/widgets/loaders/quick-links.tsx
@@ -1,10 +1,16 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { range } from "lodash-es";
 // ui
 import { Loader } from "@plane/ui";
 
 export function QuickLinksWidgetLoader() {
   return (
-    <Loader className="bg-custom-background-100 rounded-xl gap-2 flex flex-wrap">
+    <Loader className="flex flex-wrap gap-2 rounded-xl bg-surface-1">
       {range(4).map((index) => (
         <Loader.Item key={index} height="56px" width="230px" />
       ))}
diff --git a/apps/web/core/components/home/widgets/loaders/recent-activity.tsx b/apps/web/core/components/home/widgets/loaders/recent-activity.tsx
index f00822ce5..0b513f117 100644
--- a/apps/web/core/components/home/widgets/loaders/recent-activity.tsx
+++ b/apps/web/core/components/home/widgets/loaders/recent-activity.tsx
@@ -1,16 +1,22 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { range } from "lodash-es";
 // ui
 import { Loader } from "@plane/ui";
 
 export function RecentActivityWidgetLoader() {
   return (
-    <Loader className="bg-custom-background-100 rounded-xl px-2 space-y-6">
+    <Loader className="space-y-6 rounded-xl px-2">
       {range(5).map((index) => (
         <div key={index} className="flex items-start gap-3.5">
           <div className="flex-shrink-0">
             <Loader.Item height="32px" width="32px" />
           </div>
-          <div className="space-y-3 flex-shrink-0 w-full my-auto">
+          <div className="my-auto w-full flex-shrink-0 space-y-3">
             <Loader.Item height="15px" width="70%" />
           </div>
         </div>
diff --git a/apps/web/core/components/home/widgets/manage/index.tsx b/apps/web/core/components/home/widgets/manage/index.tsx
index 152ce60f9..9df07e8e6 100644
--- a/apps/web/core/components/home/widgets/manage/index.tsx
+++ b/apps/web/core/components/home/widgets/manage/index.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 // plane types
 // plane ui
@@ -20,7 +25,7 @@ export const ManageWidgetsModal = observer(function ManageWidgetsModal(props: TP
   return (
     <ModalCore isOpen={isModalOpen} handleClose={handleOnClose} width={EModalWidth.MD}>
       <div className="p-4">
-        <div className="font-medium text-xl"> {t("home.manage_widgets")}</div>
+        <div className="text-18 font-medium"> {t("home.manage_widgets")}</div>
         <WidgetList workspaceSlug={workspaceSlug} />
       </div>
     </ModalCore>
diff --git a/apps/web/core/components/home/widgets/manage/widget-item-drag-handle.tsx b/apps/web/core/components/home/widgets/manage/widget-item-drag-handle.tsx
index 91272037c..fd02106f5 100644
--- a/apps/web/core/components/home/widgets/manage/widget-item-drag-handle.tsx
+++ b/apps/web/core/components/home/widgets/manage/widget-item-drag-handle.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 import { observer } from "mobx-react";
 // ui
@@ -16,7 +21,7 @@ export const WidgetItemDragHandle = observer(function WidgetItemDragHandle(props
 
   return (
     <div
-      className={cn("flex items-center justify-center rounded text-custom-sidebar-text-400 cursor-grab mr-2", {
+      className={cn("mr-2 flex cursor-grab items-center justify-center rounded-sm text-placeholder", {
         "cursor-grabbing": isDragging,
       })}
     >
diff --git a/apps/web/core/components/home/widgets/manage/widget-item.tsx b/apps/web/core/components/home/widgets/manage/widget-item.tsx
index 702c0bf84..f254e8b98 100644
--- a/apps/web/core/components/home/widgets/manage/widget-item.tsx
+++ b/apps/web/core/components/home/widgets/manage/widget-item.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React, { useEffect, useRef, useState } from "react";
 import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
 import type {
@@ -15,7 +20,7 @@ import { useParams } from "next/navigation";
 import { createRoot } from "react-dom/client";
 // plane types
 import { useTranslation } from "@plane/i18n";
-import type { InstructionType, TWidgetEntityData } from "@plane/types";
+import type { InstructionType } from "@plane/types";
 // plane ui
 import { DropIndicator, ToggleSwitch } from "@plane/ui";
 // plane utils
@@ -71,7 +76,7 @@ export const WidgetItem = observer(function WidgetItem(props: Props) {
             getOffset: pointerOutsideOfPreview({ x: "0px", y: "0px" }),
             render: ({ container }) => {
               const root = createRoot(container);
-              root.render(<div className="rounded bg-custom-background-100 text-sm p-1 pr-2">{widget.key}</div>);
+              root.render(<div className="rounded-sm bg-surface-1 p-1 pr-2 text-13">{widget.key}</div>);
               return () => root.unmount();
             },
             nativeSetDragImage,
@@ -121,9 +126,9 @@ export const WidgetItem = observer(function WidgetItem(props: Props) {
       <div
         ref={elementRef}
         className={cn(
-          "px-2 relative flex items-center py-2 font-medium text-sm group/widget-item rounded hover:bg-custom-background-80 justify-between",
+          "group/widget-item relative flex items-center justify-between rounded-sm px-2 py-2 text-13 font-medium hover:bg-layer-1",
           {
-            "cursor-grabbing bg-custom-background-80": isDragging,
+            "cursor-grabbing bg-layer-1": isDragging,
           }
         )}
       >
diff --git a/apps/web/core/components/home/widgets/manage/widget-list.tsx b/apps/web/core/components/home/widgets/manage/widget-list.tsx
index 0fdec3a53..972c7691b 100644
--- a/apps/web/core/components/home/widgets/manage/widget-list.tsx
+++ b/apps/web/core/components/home/widgets/manage/widget-list.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type {
   DragLocationHistory,
   DropTargetRecord,
diff --git a/apps/web/core/components/home/widgets/manage/widget.helpers.ts b/apps/web/core/components/home/widgets/manage/widget.helpers.ts
index e9429e13e..1f25a7bb7 100644
--- a/apps/web/core/components/home/widgets/manage/widget.helpers.ts
+++ b/apps/web/core/components/home/widgets/manage/widget.helpers.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { extractInstruction } from "@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item";
 import type { InstructionType, IPragmaticPayloadLocation, TDropTarget, TWidgetEntityData } from "@plane/types";
 
diff --git a/apps/web/core/components/home/widgets/recents/filters.tsx b/apps/web/core/components/home/widgets/recents/filters.tsx
index ac8ea25b5..8a710601a 100644
--- a/apps/web/core/components/home/widgets/recents/filters.tsx
+++ b/apps/web/core/components/home/widgets/recents/filters.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import { useTranslation } from "@plane/i18n";
 import { ChevronDownIcon } from "@plane/propel/icons";
@@ -21,12 +26,12 @@ export const FiltersDropdown = observer(function FiltersDropdown(props: TFilters
     return filters?.map((filter) => (
       <CustomMenu.MenuItem
         key={filter.name}
-        className="flex items-center gap-2 truncate text-custom-text-200"
+        className="flex items-center gap-2 truncate text-secondary"
         onClick={() => {
           setActiveFilter(filter.name);
         }}
       >
-        <div className="truncate font-medium text-xs capitalize">{t(filter.i18n_key)}</div>
+        <div className="truncate text-11 font-medium capitalize">{t(filter.i18n_key)}</div>
       </CustomMenu.MenuItem>
     ));
   }
@@ -35,14 +40,12 @@ export const FiltersDropdown = observer(function FiltersDropdown(props: TFilters
   return (
     <CustomMenu
       maxHeight={"md"}
-      className={cn("flex justify-center text-xs text-custom-text-200 w-fit ", className)}
+      className={cn("flex w-fit justify-center text-11 text-secondary", className)}
       placement="bottom-start"
       customButton={
-        <button className="flex hover:bg-custom-background-80 px-2 py-1 rounded gap-1 capitalize border border-custom-border-200">
-          <span className="font-medium text-sm my-auto"> {t(title || "")}</span>
-          <ChevronDownIcon
-            className={cn("size-3 my-auto text-custom-text-300 hover:text-custom-text-200 duration-300")}
-          />
+        <button className="flex gap-1 rounded-sm border border-subtle px-2 py-1 capitalize hover:bg-layer-transparent-hover">
+          <span className="my-auto text-13 font-medium">{t(title || "")}</span>
+          <ChevronDownIcon className={cn("my-auto size-3 text-tertiary duration-300 hover:text-secondary")} />
         </button>
       }
       customButtonClassName="flex justify-center"
diff --git a/apps/web/core/components/home/widgets/recents/index.tsx b/apps/web/core/components/home/widgets/recents/index.tsx
index fad814476..5c59c4189 100644
--- a/apps/web/core/components/home/widgets/recents/index.tsx
+++ b/apps/web/core/components/home/widgets/recents/index.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useRef, useState } from "react";
 import { observer } from "mobx-react";
 import useSWR from "swr";
@@ -9,7 +15,7 @@ import type { TActivityEntityData, THomeWidgetProps, TRecentActivityFilterKeys }
 // components
 import { ContentOverflowWrapper } from "@/components/core/content-overflow-HOC";
 // plane web services
-import { WorkspaceService } from "@/plane-web/services";
+import { WorkspaceService } from "@/services/workspace.service";
 import { RecentsEmptyState } from "../empty-states";
 import { EWidgetKeys, WidgetLoader } from "../loaders";
 import { FiltersDropdown } from "./filters";
@@ -21,7 +27,7 @@ const WIDGET_KEY = EWidgetKeys.RECENT_ACTIVITY;
 const workspaceService = new WorkspaceService();
 const filters: { name: TRecentActivityFilterKeys; icon?: React.ReactNode; i18n_key: string }[] = [
   { name: "all item", i18n_key: "home.recents.filters.all" },
-  { name: "issue", icon: <WorkItemsIcon className="w-4 h-4" />, i18n_key: "home.recents.filters.issues" },
+  { name: "issue", icon: <WorkItemsIcon className="h-4 w-4" />, i18n_key: "home.recents.filters.issues" },
   { name: "page", icon: <PageIcon height={16} width={16} />, i18n_key: "home.recents.filters.pages" },
   { name: "project", icon: <ProjectIcon height={16} width={16} />, i18n_key: "home.recents.filters.projects" },
 ];
@@ -72,8 +78,8 @@ export const RecentActivityWidget = observer(function RecentActivityWidget(props
   if (!isLoading && recents?.length === 0)
     return (
       <div ref={ref} className="max-h-[500px] overflow-y-scroll">
-        <div className="flex items-center justify-between mb-4">
-          <div className="text-base font-semibold text-custom-text-350">{t("home.recents.title")}</div>
+        <div className="mb-4 flex items-center justify-between">
+          <div className="text-14 font-semibold text-tertiary">{t("home.recents.title")}</div>
           {showFilterSelect && <FiltersDropdown filters={filters} activeFilter={filter} setActiveFilter={setFilter} />}
         </div>
         <div className="flex flex-col items-center justify-center">
@@ -87,13 +93,13 @@ export const RecentActivityWidget = observer(function RecentActivityWidget(props
       maxHeight={415}
       containerClassName="box-border min-h-[250px]"
       fallback={<></>}
-      buttonClassName="bg-custom-background-90/20"
+      buttonClassName="bg-surface-2/20"
     >
-      <div className="flex items-center justify-between mb-2">
-        <div className="text-base font-semibold text-custom-text-350">{t("home.recents.title")}</div>
+      <div className="mb-2 flex items-center justify-between">
+        <div className="text-14 font-semibold text-tertiary">{t("home.recents.title")}</div>
         {showFilterSelect && <FiltersDropdown filters={filters} activeFilter={filter} setActiveFilter={setFilter} />}
       </div>
-      <div className="min-h-[250px] flex flex-col">
+      <div className="flex min-h-[250px] flex-col">
         {isLoading && <WidgetLoader widgetKey={WIDGET_KEY} />}
         {!isLoading &&
           recents
diff --git a/apps/web/core/components/home/widgets/recents/issue.tsx b/apps/web/core/components/home/widgets/recents/issue.tsx
index af90d4037..52d234a87 100644
--- a/apps/web/core/components/home/widgets/recents/issue.tsx
+++ b/apps/web/core/components/home/widgets/recents/issue.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 // plane types
 import { PriorityIcon, StateGroupIcon, WorkItemsIcon } from "@plane/propel/icons";
@@ -65,7 +71,7 @@ export const RecentIssue = observer(function RecentIssue(props: BlockProps) {
       itemLink={workItemLink}
       title={issueDetails?.name}
       prependTitleElement={
-        <div className="flex-shrink-0 flex items-center gap-2">
+        <div className="flex flex-shrink-0 items-center gap-2">
           {issueDetails.type ? (
             <IssueIdentifier
               size="lg"
@@ -73,14 +79,14 @@ export const RecentIssue = observer(function RecentIssue(props: BlockProps) {
               projectId={issueDetails?.project_id || ""}
               projectIdentifier={issueDetails?.project_identifier || ""}
               issueSequenceId={issueDetails?.sequence_id || ""}
-              textContainerClassName="text-custom-sidebar-text-400 text-sm whitespace-nowrap"
+              variant="tertiary"
             />
           ) : (
-            <div className="flex gap-2 items-center justify-center">
-              <div className="flex-shrink-0 grid place-items-center rounded bg-custom-background-80 size-8">
-                <WorkItemsIcon className="size-4 text-custom-text-350" />
+            <div className="flex items-center justify-center gap-2">
+              <div className="grid size-8 flex-shrink-0 place-items-center rounded-sm bg-layer-2">
+                <WorkItemsIcon className="size-4 text-tertiary" />
               </div>
-              <div className="font-medium text-custom-text-400 text-sm whitespace-nowrap">
+              <div className="text-13 font-medium whitespace-nowrap text-placeholder">
                 {issueDetails?.project_identifier}-{issueDetails?.sequence_id}
               </div>
             </div>
@@ -88,7 +94,7 @@ export const RecentIssue = observer(function RecentIssue(props: BlockProps) {
         </div>
       }
       appendTitleElement={
-        <div className="flex-shrink-0 font-medium text-xs text-custom-text-400">
+        <div className="flex-shrink-0 text-11 font-medium text-placeholder">
           {calculateTimeAgo(activity.visited_at)}
         </div>
       }
@@ -99,7 +105,7 @@ export const RecentIssue = observer(function RecentIssue(props: BlockProps) {
               <StateGroupIcon
                 stateGroup={state?.group ?? "backlog"}
                 color={state?.color}
-                className="h-4 w-4 my-auto"
+                className="my-auto h-4 w-4"
                 percentage={state?.order}
               />
             </div>
@@ -130,7 +136,7 @@ export const RecentIssue = observer(function RecentIssue(props: BlockProps) {
       }
       parentRef={ref}
       disableLink={false}
-      className="bg-transparent my-auto !px-2 border-none py-3"
+      className="my-auto border-none !px-2 py-3"
       itemClassName="my-auto"
       onItemClick={handlePeekOverview}
       preventDefaultProgress
diff --git a/apps/web/core/components/home/widgets/recents/page.tsx b/apps/web/core/components/home/widgets/recents/page.tsx
index 2738e7a76..ae14438e4 100644
--- a/apps/web/core/components/home/widgets/recents/page.tsx
+++ b/apps/web/core/components/home/widgets/recents/page.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useRouter } from "next/navigation";
 import { Logo } from "@plane/propel/emoji-icon-picker";
 import { PageIcon } from "@plane/propel/icons";
@@ -37,23 +43,23 @@ export function RecentPage(props: BlockProps) {
       itemLink={pageLink}
       title={getPageName(pageDetails?.name)}
       prependTitleElement={
-        <div className="flex-shrink-0 flex items-center gap-2">
-          <div className="flex-shrink-0 grid place-items-center rounded bg-custom-background-80 size-8">
+        <div className="flex flex-shrink-0 items-center gap-2">
+          <div className="grid size-8 flex-shrink-0 place-items-center rounded-sm bg-layer-2">
             {pageDetails?.logo_props?.in_use ? (
               <Logo logo={pageDetails?.logo_props} size={16} type="lucide" />
             ) : (
-              <PageIcon className="size-4 text-custom-text-350" />
+              <PageIcon className="size-4 text-tertiary" />
             )}
           </div>
           {pageDetails?.project_identifier && (
-            <div className="font-medium text-custom-text-400 text-sm whitespace-nowrap">
+            <div className="text-13 font-medium whitespace-nowrap text-placeholder">
               {pageDetails?.project_identifier}
             </div>
           )}
         </div>
       }
       appendTitleElement={
-        <div className="flex-shrink-0 font-medium text-xs text-custom-text-400">
+        <div className="flex-shrink-0 text-11 font-medium text-placeholder">
           {calculateTimeAgo(activity.visited_at)}
         </div>
       }
@@ -64,8 +70,8 @@ export function RecentPage(props: BlockProps) {
       }
       parentRef={ref}
       disableLink={false}
-      className="bg-transparent my-auto !px-2 border-none py-3"
-      itemClassName="my-auto"
+      className="my-auto border-none !px-2 py-3"
+      itemClassName="my-auto bg-layer-transparent"
       onItemClick={(e) => {
         e.preventDefault();
         e.stopPropagation();
diff --git a/apps/web/core/components/home/widgets/recents/project.tsx b/apps/web/core/components/home/widgets/recents/project.tsx
index d1587af2f..583950138 100644
--- a/apps/web/core/components/home/widgets/recents/project.tsx
+++ b/apps/web/core/components/home/widgets/recents/project.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useRouter } from "next/navigation";
 // plane types
 import { Logo } from "@plane/propel/emoji-icon-picker";
@@ -30,15 +36,15 @@ export function RecentProject(props: BlockProps) {
       itemLink={projectLink}
       title={projectDetails?.name}
       prependTitleElement={
-        <div className="flex-shrink-0 flex items-center gap-2">
-          <div className="flex-shrink-0 grid place-items-center rounded bg-custom-background-80 size-8">
+        <div className="flex flex-shrink-0 items-center gap-2">
+          <div className="grid size-8 flex-shrink-0 place-items-center rounded-sm bg-layer-2">
             <Logo logo={projectDetails?.logo_props} size={16} />
           </div>
-          <div className="font-medium text-custom-text-400 text-sm whitespace-nowrap">{projectDetails?.identifier}</div>
+          <div className="text-13 font-medium whitespace-nowrap text-placeholder">{projectDetails?.identifier}</div>
         </div>
       }
       appendTitleElement={
-        <div className="flex-shrink-0 font-medium text-xs text-custom-text-400">
+        <div className="flex-shrink-0 text-11 font-medium text-placeholder">
           {calculateTimeAgo(activity.visited_at)}
         </div>
       }
@@ -67,7 +73,7 @@ export function RecentProject(props: BlockProps) {
       }
       parentRef={ref}
       disableLink={false}
-      className="bg-transparent my-auto !px-2 border-none py-3"
+      className="my-auto border-none !px-2 py-3"
       itemClassName="my-auto"
       onItemClick={(e) => {
         e.preventDefault();
diff --git a/apps/web/core/components/icons/attachment/attachment-icon.tsx b/apps/web/core/components/icons/attachment/attachment-icon.tsx
index e21ae8893..dcbf652cd 100644
--- a/apps/web/core/components/icons/attachment/attachment-icon.tsx
+++ b/apps/web/core/components/icons/attachment/attachment-icon.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import {
   AudioIcon,
   CssIcon,
diff --git a/apps/web/core/components/icons/attachment/audio-file-icon.tsx b/apps/web/core/components/icons/attachment/audio-file-icon.tsx
index d8e893b8c..0cb2b8750 100644
--- a/apps/web/core/components/icons/attachment/audio-file-icon.tsx
+++ b/apps/web/core/components/icons/attachment/audio-file-icon.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 // image
 import AudioFileIcon from "@/app/assets/attachment/audio-icon.png?url";
diff --git a/apps/web/core/components/icons/attachment/css-file-icon.tsx b/apps/web/core/components/icons/attachment/css-file-icon.tsx
index 7f6f27c16..662d6c08c 100644
--- a/apps/web/core/components/icons/attachment/css-file-icon.tsx
+++ b/apps/web/core/components/icons/attachment/css-file-icon.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 // image
 import CssFileIcon from "@/app/assets/attachment/css-icon.png?url";
diff --git a/apps/web/core/components/icons/attachment/csv-file-icon.tsx b/apps/web/core/components/icons/attachment/csv-file-icon.tsx
index 2856575b1..b770314b3 100644
--- a/apps/web/core/components/icons/attachment/csv-file-icon.tsx
+++ b/apps/web/core/components/icons/attachment/csv-file-icon.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 // image
 import CSVFileIcon from "@/app/assets/attachment/csv-icon.png?url";
diff --git a/apps/web/core/components/icons/attachment/default-file-icon.tsx b/apps/web/core/components/icons/attachment/default-file-icon.tsx
index fac931af9..fb7e5d851 100644
--- a/apps/web/core/components/icons/attachment/default-file-icon.tsx
+++ b/apps/web/core/components/icons/attachment/default-file-icon.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 // image
 import DefaultFileIcon from "@/app/assets/attachment/default-icon.png?url";
diff --git a/apps/web/core/components/icons/attachment/doc-file-icon.tsx b/apps/web/core/components/icons/attachment/doc-file-icon.tsx
index 2f8c174ee..23982ffd3 100644
--- a/apps/web/core/components/icons/attachment/doc-file-icon.tsx
+++ b/apps/web/core/components/icons/attachment/doc-file-icon.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 // image
 import DocFileIcon from "@/app/assets/attachment/doc-icon.png?url";
diff --git a/apps/web/core/components/icons/attachment/document-icon.tsx b/apps/web/core/components/icons/attachment/document-icon.tsx
index aeccb9f64..d1518edb3 100644
--- a/apps/web/core/components/icons/attachment/document-icon.tsx
+++ b/apps/web/core/components/icons/attachment/document-icon.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 
 import type { Props } from "../types";
diff --git a/apps/web/core/components/icons/attachment/figma-file-icon.tsx b/apps/web/core/components/icons/attachment/figma-file-icon.tsx
index a88fb8e60..3efbdad30 100644
--- a/apps/web/core/components/icons/attachment/figma-file-icon.tsx
+++ b/apps/web/core/components/icons/attachment/figma-file-icon.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 // image
 import FigmaFileIcon from "@/app/assets/attachment/figma-icon.png?url";
diff --git a/apps/web/core/components/icons/attachment/html-file-icon.tsx b/apps/web/core/components/icons/attachment/html-file-icon.tsx
index 1f82f0761..37b034704 100644
--- a/apps/web/core/components/icons/attachment/html-file-icon.tsx
+++ b/apps/web/core/components/icons/attachment/html-file-icon.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 // image
 import HtmlFileIcon from "@/app/assets/attachment/html-icon.png?url";
diff --git a/apps/web/core/components/icons/attachment/img-file-icon.tsx b/apps/web/core/components/icons/attachment/img-file-icon.tsx
index 93055cd8a..077b8aefc 100644
--- a/apps/web/core/components/icons/attachment/img-file-icon.tsx
+++ b/apps/web/core/components/icons/attachment/img-file-icon.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 // image
 import ImgFileIcon from "@/app/assets/attachment/img-icon.png?url";
diff --git a/apps/web/core/components/icons/attachment/index.ts b/apps/web/core/components/icons/attachment/index.ts
index a2c65ceef..b56265b83 100644
--- a/apps/web/core/components/icons/attachment/index.ts
+++ b/apps/web/core/components/icons/attachment/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./attachment-icon";
 export * from "./audio-file-icon";
 export * from "./css-file-icon";
diff --git a/apps/web/core/components/icons/attachment/jpg-file-icon.tsx b/apps/web/core/components/icons/attachment/jpg-file-icon.tsx
index 88118585a..5ab72faba 100644
--- a/apps/web/core/components/icons/attachment/jpg-file-icon.tsx
+++ b/apps/web/core/components/icons/attachment/jpg-file-icon.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 // image
 import JpgFileIcon from "@/app/assets/attachment/jpg-icon.png?url";
diff --git a/apps/web/core/components/icons/attachment/js-file-icon.tsx b/apps/web/core/components/icons/attachment/js-file-icon.tsx
index 5bfadeee3..e35827b14 100644
--- a/apps/web/core/components/icons/attachment/js-file-icon.tsx
+++ b/apps/web/core/components/icons/attachment/js-file-icon.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 // image
 import JsFileIcon from "@/app/assets/attachment/js-icon.png?url";
diff --git a/apps/web/core/components/icons/attachment/pdf-file-icon.tsx b/apps/web/core/components/icons/attachment/pdf-file-icon.tsx
index 84ef4cff2..449fa6efd 100644
--- a/apps/web/core/components/icons/attachment/pdf-file-icon.tsx
+++ b/apps/web/core/components/icons/attachment/pdf-file-icon.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 // image
 import PDFFileIcon from "@/app/assets/attachment/pdf-icon.png?url";
diff --git a/apps/web/core/components/icons/attachment/png-file-icon.tsx b/apps/web/core/components/icons/attachment/png-file-icon.tsx
index fd294adda..4346141e2 100644
--- a/apps/web/core/components/icons/attachment/png-file-icon.tsx
+++ b/apps/web/core/components/icons/attachment/png-file-icon.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 // image
 import PngFileIcon from "@/app/assets/attachment/png-icon.png?url";
diff --git a/apps/web/core/components/icons/attachment/rar-file-icon.tsx b/apps/web/core/components/icons/attachment/rar-file-icon.tsx
index 6e813520b..50f75e36e 100644
--- a/apps/web/core/components/icons/attachment/rar-file-icon.tsx
+++ b/apps/web/core/components/icons/attachment/rar-file-icon.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 // image
 import RarFileIcon from "@/app/assets/attachment/rar-icon.png?url";
diff --git a/apps/web/core/components/icons/attachment/setting-icon.tsx b/apps/web/core/components/icons/attachment/setting-icon.tsx
index dee77f934..3842e8803 100644
--- a/apps/web/core/components/icons/attachment/setting-icon.tsx
+++ b/apps/web/core/components/icons/attachment/setting-icon.tsx
@@ -1,8 +1,14 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 
 import type { Props } from "../types";
 
-export function SettingIcon({ width = "24", height = "24", color = "rgb(var(--color-text-200))", className }: Props) {
+export function SettingIcon({ width = "24", height = "24", color = "var(--text-color-secondary)", className }: Props) {
   return (
     <svg
       width={width}
diff --git a/apps/web/core/components/icons/attachment/sheet-file-icon.tsx b/apps/web/core/components/icons/attachment/sheet-file-icon.tsx
index e78beb1df..1881ccb72 100644
--- a/apps/web/core/components/icons/attachment/sheet-file-icon.tsx
+++ b/apps/web/core/components/icons/attachment/sheet-file-icon.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 // image
 import SheetFileIcon from "@/app/assets/attachment/excel-icon.png?url";
diff --git a/apps/web/core/components/icons/attachment/svg-file-icon.tsx b/apps/web/core/components/icons/attachment/svg-file-icon.tsx
index 56541e525..e603afde9 100644
--- a/apps/web/core/components/icons/attachment/svg-file-icon.tsx
+++ b/apps/web/core/components/icons/attachment/svg-file-icon.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 // image
 import SvgFileIcon from "@/app/assets/attachment/svg-icon.png?url";
diff --git a/apps/web/core/components/icons/attachment/tune-icon.tsx b/apps/web/core/components/icons/attachment/tune-icon.tsx
index ef3d439d6..357472934 100644
--- a/apps/web/core/components/icons/attachment/tune-icon.tsx
+++ b/apps/web/core/components/icons/attachment/tune-icon.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 
 import type { Props } from "../types";
diff --git a/apps/web/core/components/icons/attachment/txt-file-icon.tsx b/apps/web/core/components/icons/attachment/txt-file-icon.tsx
index c1b203367..c7fb36d95 100644
--- a/apps/web/core/components/icons/attachment/txt-file-icon.tsx
+++ b/apps/web/core/components/icons/attachment/txt-file-icon.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 // image
 import TxtFileIcon from "@/app/assets/attachment/txt-icon.png?url";
diff --git a/apps/web/core/components/icons/attachment/video-file-icon.tsx b/apps/web/core/components/icons/attachment/video-file-icon.tsx
index 9d201ae08..e67ab6c39 100644
--- a/apps/web/core/components/icons/attachment/video-file-icon.tsx
+++ b/apps/web/core/components/icons/attachment/video-file-icon.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 // image
 import VideoFileIcon from "@/app/assets/attachment/video-icon.png?url";
diff --git a/apps/web/core/components/icons/attachment/zip-file-icon.tsx b/apps/web/core/components/icons/attachment/zip-file-icon.tsx
index 787eede55..2d7a88a06 100644
--- a/apps/web/core/components/icons/attachment/zip-file-icon.tsx
+++ b/apps/web/core/components/icons/attachment/zip-file-icon.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 // image
 import ZipFileIcon from "@/app/assets/attachment/zip-icon.png?url";
diff --git a/apps/web/core/components/icons/index.ts b/apps/web/core/components/icons/index.ts
index 9f9f38860..32ce7e5a6 100644
--- a/apps/web/core/components/icons/index.ts
+++ b/apps/web/core/components/icons/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./attachment";
diff --git a/apps/web/core/components/icons/locked-component.tsx b/apps/web/core/components/icons/locked-component.tsx
index dc44e415d..5d2c4d04a 100644
--- a/apps/web/core/components/icons/locked-component.tsx
+++ b/apps/web/core/components/icons/locked-component.tsx
@@ -1,11 +1,17 @@
-import { Lock } from "lucide-react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { LockIcon } from "@plane/propel/icons";
 import { Tooltip } from "@plane/propel/tooltip";
 
 export function LockedComponent(props: { toolTipContent?: string }) {
   const { toolTipContent } = props;
   const lockedComponent = (
-    <div className="flex-shrink-0 flex h-7 items-center gap-2 rounded-full bg-custom-background-80 px-3 py-0.5 text-xs font-medium text-custom-text-300">
-      <Lock className="h-3 w-3" />
+    <div className="flex h-7 flex-shrink-0 items-center gap-2 rounded-full bg-layer-1 px-3 py-0.5 text-11 font-medium text-tertiary">
+      <LockIcon className="h-3 w-3" />
       <span>Locked</span>
     </div>
   );
diff --git a/apps/web/core/components/inbox/content/inbox-issue-header.tsx b/apps/web/core/components/inbox/content/inbox-issue-header.tsx
index 43a86763c..524352173 100644
--- a/apps/web/core/components/inbox/content/inbox-issue-header.tsx
+++ b/apps/web/core/components/inbox/content/inbox-issue-header.tsx
@@ -1,12 +1,27 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useCallback, useEffect, useState } from "react";
 import { observer } from "mobx-react";
-import { CircleCheck, CircleX, Clock, ExternalLink, FileStack, Link, Trash2, MoveRight, Copy } from "lucide-react";
+import { Clock, FileStack, MoreHorizontal, MoveRight } from "lucide-react";
 // plane imports
 import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { Button } from "@plane/propel/button";
-import { ChevronDownIcon, ChevronUpIcon } from "@plane/propel/icons";
+import { IconButton, getIconButtonStyling } from "@plane/propel/icon-button";
+import {
+  LinkIcon,
+  CopyIcon,
+  NewTabIcon,
+  TrashIcon,
+  ChevronDownIcon,
+  ChevronUpIcon,
+  CheckCircleFilledIcon,
+  CloseCircleFilledIcon,
+} from "@plane/propel/icons";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { TNameDescriptionLoader } from "@plane/types";
 import { EInboxIssueStatus } from "@plane/types";
@@ -62,7 +77,8 @@ export const InboxIssueActionsHeader = observer(function InboxIssueActionsHeader
   const { currentTab, deleteInboxIssue, filteredInboxIssueIds } = useProjectInbox();
   const { data: currentUser } = useUser();
   const { allowPermissions } = useUserPermissions();
-  const { currentProjectDetails } = useProject();
+  const { getPartialProjectById } = useProject();
+  const currentProjectDetails = getPartialProjectById(projectId);
   const { t } = useTranslation();
 
   const router = useAppRouter();
@@ -241,6 +257,7 @@ export const InboxIssueActionsHeader = observer(function InboxIssueActionsHeader
           beforeFormSubmit={handleInboxIssueAccept}
           withDraftIssueWrapper={false}
           fetchIssueDetails={false}
+          showActionItemsOnUpdate
           modalTitle={t("inbox_issue.actions.move", {
             value: `${currentProjectDetails?.identifier}-${issue?.sequence_id}`,
           })}
@@ -269,20 +286,20 @@ export const InboxIssueActionsHeader = observer(function InboxIssueActionsHeader
         />
       </>
 
-      <Row className="hidden relative lg:flex h-full w-full items-center justify-between gap-2 bg-custom-background-100 z-[15] border-b border-custom-border-200">
+      <Row className="relative z-15 hidden h-full w-full items-center justify-between gap-2 border-b border-subtle bg-surface-1 lg:flex">
         <div className="flex items-center gap-4">
           {isNotificationEmbed && (
             <button onClick={embedRemoveCurrentNotification}>
-              <MoveRight className="h-4 w-4 text-custom-text-300 hover:text-custom-text-200" />
+              <MoveRight className="h-4 w-4 text-tertiary hover:text-secondary" />
             </button>
           )}
           {issue?.project_id && issue.sequence_id && (
-            <h3 className="text-base font-medium text-custom-text-300 flex-shrink-0">
+            <h3 className="flex-shrink-0 text-14 font-medium text-tertiary">
               {getProjectById(issue.project_id)?.identifier}-{issue.sequence_id}
             </h3>
           )}
           <InboxIssueStatus inboxIssue={inboxIssue} iconSize={12} />
-          <div className="flex items-center justify-end w-full">
+          <div className="flex w-full items-center justify-end">
             <NameDescriptionUpdateStatus isSubmitting={isSubmitting} />
           </div>
         </div>
@@ -290,76 +307,70 @@ export const InboxIssueActionsHeader = observer(function InboxIssueActionsHeader
         <div className="flex items-center gap-2">
           {!isNotificationEmbed && (
             <div className="flex items-center gap-x-2">
-              <button
-                type="button"
-                className="rounded border border-custom-border-200 p-1.5"
+              <IconButton
+                variant="secondary"
+                size="lg"
+                icon={ChevronUpIcon}
+                aria-label="Previous work item"
                 onClick={() => handleInboxIssueNavigation("prev")}
-              >
-                <ChevronUpIcon height={14} width={14} strokeWidth={2} />
-              </button>
-              <button
-                type="button"
-                className="rounded border border-custom-border-200 p-1.5"
+              />
+              <IconButton
+                variant="secondary"
+                size="lg"
+                icon={ChevronDownIcon}
+                aria-label="Next work item"
                 onClick={() => handleInboxIssueNavigation("next")}
-              >
-                <ChevronDownIcon height={14} width={14} strokeWidth={2} />
-              </button>
+              />
             </div>
           )}
 
           <div className="flex flex-wrap items-center gap-2">
             {canMarkAsAccepted && (
-              <div className="flex-shrink-0">
-                <Button
-                  variant="neutral-primary"
-                  size="sm"
-                  prependIcon={<CircleCheck className="w-3 h-3" />}
-                  className="text-green-500 border border-green-500 bg-green-500/20 focus:bg-green-500/20 focus:text-green-500 hover:bg-green-500/40 bg-opacity-20"
-                  onClick={() =>
-                    handleActionWithPermission(
-                      isProjectAdmin,
-                      () => setAcceptIssueModal(true),
-                      t("inbox_issue.errors.accept_permission")
-                    )
-                  }
-                >
-                  {t("inbox_issue.actions.accept")}
-                </Button>
-              </div>
+              <Button
+                variant="secondary"
+                size="lg"
+                onClick={() =>
+                  handleActionWithPermission(
+                    isProjectAdmin,
+                    () => setAcceptIssueModal(true),
+                    t("inbox_issue.errors.accept_permission")
+                  )
+                }
+              >
+                <CheckCircleFilledIcon className="size-4 shrink-0 text-success-secondary" />
+                {t("inbox_issue.actions.accept")}
+              </Button>
             )}
 
             {canMarkAsDeclined && (
-              <div className="flex-shrink-0">
-                <Button
-                  variant="neutral-primary"
-                  size="sm"
-                  prependIcon={<CircleX className="w-3 h-3" />}
-                  className="text-red-500 border border-red-500 bg-red-500/20 focus:bg-red-500/20 focus:text-red-500 hover:bg-red-500/40 bg-opacity-20"
-                  onClick={() =>
-                    handleActionWithPermission(
-                      isProjectAdmin,
-                      () => setDeclineIssueModal(true),
-                      t("inbox_issue.errors.decline_permission")
-                    )
-                  }
-                >
-                  {t("inbox_issue.actions.decline")}
-                </Button>
-              </div>
+              <Button
+                variant="secondary"
+                size="lg"
+                onClick={() =>
+                  handleActionWithPermission(
+                    isProjectAdmin,
+                    () => setDeclineIssueModal(true),
+                    t("inbox_issue.errors.decline_permission")
+                  )
+                }
+              >
+                <CloseCircleFilledIcon className="size-4 shrink-0 text-danger-secondary" />
+                {t("inbox_issue.actions.decline")}
+              </Button>
             )}
 
             {isAcceptedOrDeclined ? (
               <div className="flex items-center gap-2">
                 <Button
-                  variant="neutral-primary"
-                  prependIcon={<Link className="h-2.5 w-2.5" />}
-                  size="sm"
+                  variant="secondary"
+                  size="lg"
+                  prependIcon={<LinkIcon className="h-2.5 w-2.5" />}
                   onClick={() => handleCopyIssueLink(workItemLink)}
                 >
                   {t("inbox_issue.actions.copy")}
                 </Button>
                 <ControlLink href={workItemLink} onClick={() => router.push(workItemLink)} target="_self">
-                  <Button variant="neutral-primary" prependIcon={<ExternalLink className="h-2.5 w-2.5" />} size="sm">
+                  <Button variant="secondary" size="lg" prependIcon={<NewTabIcon className="h-2.5 w-2.5" />}>
                     {t("inbox_issue.actions.open")}
                   </Button>
                 </ControlLink>
@@ -367,7 +378,11 @@ export const InboxIssueActionsHeader = observer(function InboxIssueActionsHeader
             ) : (
               <>
                 {isAllowed && (
-                  <CustomMenu verticalEllipsis placement="bottom-start">
+                  <CustomMenu
+                    customButton={<MoreHorizontal className="size-4" />}
+                    customButtonClassName={getIconButtonStyling("secondary", "lg")}
+                    placement="bottom-start"
+                  >
                     {canMarkAsAccepted && (
                       <CustomMenu.MenuItem
                         onClick={() =>
@@ -404,14 +419,14 @@ export const InboxIssueActionsHeader = observer(function InboxIssueActionsHeader
                     )}
                     <CustomMenu.MenuItem onClick={() => handleCopyIssueLink(workItemLink)}>
                       <div className="flex items-center gap-2">
-                        <Copy size={14} strokeWidth={2} />
+                        <CopyIcon width={14} height={14} strokeWidth={2} />
                         {t("inbox_issue.actions.copy")}
                       </div>
                     </CustomMenu.MenuItem>
                     {canDelete && (
                       <CustomMenu.MenuItem onClick={() => setDeleteIssueModal(true)}>
                         <div className="flex items-center gap-2">
-                          <Trash2 size={14} strokeWidth={2} />
+                          <TrashIcon width={14} height={14} strokeWidth={2} />
                           {t("inbox_issue.actions.delete")}
                         </div>
                       </CustomMenu.MenuItem>
diff --git a/apps/web/core/components/inbox/content/inbox-issue-mobile-header.tsx b/apps/web/core/components/inbox/content/inbox-issue-mobile-header.tsx
index 114f95fb7..bde81665d 100644
--- a/apps/web/core/components/inbox/content/inbox-issue-mobile-header.tsx
+++ b/apps/web/core/components/inbox/content/inbox-issue-mobile-header.tsx
@@ -1,8 +1,23 @@
-import React from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
-import { CircleCheck, CircleX, Clock, ExternalLink, FileStack, Link, Trash2, PanelLeft, MoveRight } from "lucide-react";
-import { ChevronDownIcon, ChevronUpIcon } from "@plane/propel/icons";
+import { Clock, FileStack, MoreHorizontal, PanelLeft, MoveRight } from "lucide-react";
+import { IconButton, getIconButtonStyling } from "@plane/propel/icon-button";
+import {
+  LinkIcon,
+  NewTabIcon,
+  TrashIcon,
+  ChevronDownIcon,
+  ChevronUpIcon,
+  CheckCircleFilledIcon,
+  CloseCircleFilledIcon,
+} from "@plane/propel/icons";
 import type { TNameDescriptionLoader } from "@plane/types";
+
 import { Header, CustomMenu, EHeaderVariant } from "@plane/ui";
 import { cn, findHowManyDaysLeft, generateWorkItemLink } from "@plane/utils";
 // components
@@ -12,6 +27,7 @@ import { useProject } from "@/hooks/store/use-project";
 import { useAppRouter } from "@/hooks/use-app-router";
 // store types
 import type { IInboxIssueStore } from "@/store/inbox/inbox-issue.store";
+
 // local imports
 import { InboxIssueStatus } from "../inbox-issue-status";
 
@@ -87,45 +103,46 @@ export const InboxIssueActionsMobileHeader = observer(function InboxIssueActions
     <Header variant={EHeaderVariant.SECONDARY} className="justify-start">
       {isNotificationEmbed && (
         <button onClick={embedRemoveCurrentNotification}>
-          <MoveRight className="h-4 w-4 text-custom-text-300 hover:text-custom-text-200 mr-2" />
+          <MoveRight className="mr-2 h-4 w-4 text-tertiary hover:text-secondary" />
         </button>
       )}
       <PanelLeft
         onClick={() => setIsMobileSidebar(!isMobileSidebar)}
-        className={cn(
-          "w-4 h-4 flex-shrink-0 mr-2 my-auto",
-          isMobileSidebar ? "text-custom-primary-100" : "text-custom-text-200"
-        )}
+        className={cn("my-auto mr-2 h-4 w-4 flex-shrink-0", isMobileSidebar ? "text-accent-primary" : "text-secondary")}
       />
-      <div className="flex items-center gap-2 w-full bg-custom-background-100 z-[15]">
+      <div className="z-[15] flex w-full items-center gap-2 bg-surface-1">
         <div className="flex items-center gap-x-2">
-          <button
-            type="button"
-            className="rounded border border-custom-border-200 p-1.5"
+          <IconButton
+            variant="secondary"
+            size="lg"
+            icon={ChevronUpIcon}
+            aria-label="Previous work item"
             onClick={() => handleInboxIssueNavigation("prev")}
-          >
-            <ChevronUpIcon height={14} width={14} strokeWidth={2} />
-          </button>
-          <button
-            type="button"
-            className="rounded border border-custom-border-200 p-1.5"
+          />
+          <IconButton
+            variant="secondary"
+            size="lg"
+            icon={ChevronDownIcon}
+            aria-label="Next work item"
             onClick={() => handleInboxIssueNavigation("next")}
-          >
-            <ChevronDownIcon height={14} width={14} strokeWidth={2} />
-          </button>
+          />
         </div>
         <div className="flex items-center gap-4">
           <InboxIssueStatus inboxIssue={inboxIssue} iconSize={12} />
-          <div className="flex items-center justify-end w-full">
+          <div className="flex w-full items-center justify-end">
             <NameDescriptionUpdateStatus isSubmitting={isSubmitting} />
           </div>
         </div>
         <div className="ml-auto">
-          <CustomMenu verticalEllipsis placement="bottom-start">
+          <CustomMenu
+            customButton={<MoreHorizontal className="size-4" />}
+            customButtonClassName={getIconButtonStyling("secondary", "lg")}
+            placement="bottom-start"
+          >
             {isAcceptedOrDeclined && (
               <CustomMenu.MenuItem onClick={handleCopyIssueLink}>
                 <div className="flex items-center gap-2">
-                  <Link size={14} strokeWidth={2} />
+                  <LinkIcon width={14} height={14} strokeWidth={2} />
                   Copy work item link
                 </div>
               </CustomMenu.MenuItem>
@@ -133,7 +150,7 @@ export const InboxIssueActionsMobileHeader = observer(function InboxIssueActions
             {isAcceptedOrDeclined && (
               <CustomMenu.MenuItem onClick={() => router.push(workItemLink)}>
                 <div className="flex items-center gap-2">
-                  <ExternalLink size={14} strokeWidth={2} />
+                  <NewTabIcon width={14} height={14} strokeWidth={2} />
                   Open work item
                 </div>
               </CustomMenu.MenuItem>
@@ -180,8 +197,8 @@ export const InboxIssueActionsMobileHeader = observer(function InboxIssueActions
                   )
                 }
               >
-                <div className="flex items-center gap-2 text-green-500">
-                  <CircleCheck size={14} strokeWidth={2} />
+                <div className="flex items-center gap-2 text-success-secondary">
+                  <CheckCircleFilledIcon width={14} height={14} />
                   Accept
                 </div>
               </CustomMenu.MenuItem>
@@ -196,16 +213,16 @@ export const InboxIssueActionsMobileHeader = observer(function InboxIssueActions
                   )
                 }
               >
-                <div className="flex items-center gap-2 text-red-500">
-                  <CircleX size={14} strokeWidth={2} />
+                <div className="flex items-center gap-2 text-danger-secondary">
+                  <CloseCircleFilledIcon width={14} height={14} />
                   Decline
                 </div>
               </CustomMenu.MenuItem>
             )}
             {canDelete && !isAcceptedOrDeclined && (
               <CustomMenu.MenuItem onClick={() => setDeleteIssueModal(true)}>
-                <div className="flex items-center gap-2 text-red-500">
-                  <Trash2 size={14} strokeWidth={2} />
+                <div className="flex items-center gap-2 text-danger-primary">
+                  <TrashIcon height={14} width={14} strokeWidth={2} />
                   Delete
                 </div>
               </CustomMenu.MenuItem>
diff --git a/apps/web/core/components/inbox/content/index.ts b/apps/web/core/components/inbox/content/index.ts
index 1efe34c51..d98033459 100644
--- a/apps/web/core/components/inbox/content/index.ts
+++ b/apps/web/core/components/inbox/content/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./root";
diff --git a/apps/web/core/components/inbox/content/issue-properties.tsx b/apps/web/core/components/inbox/content/issue-properties.tsx
index e75798655..f355e39e3 100644
--- a/apps/web/core/components/inbox/content/issue-properties.tsx
+++ b/apps/web/core/components/inbox/content/issue-properties.tsx
@@ -1,4 +1,9 @@
-import React from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import {
   StatePropertyIcon,
@@ -56,14 +61,14 @@ export const InboxIssueContentProperties = observer(function InboxIssueContentPr
   const DropdownComponent = isIntakeAccepted ? StateDropdown : IntakeStateDropdown;
 
   return (
-    <div className="flex w-full flex-col divide-y-2 divide-custom-border-200">
+    <div className="flex w-full flex-col divide-y-2 divide-subtle-1">
       <div className="w-full overflow-y-auto">
-        <h5 className="text-sm font-medium my-4">Properties</h5>
-        <div className={`divide-y-2 divide-custom-border-200 ${!isEditable ? "opacity-60" : ""}`}>
+        <h5 className="mb-2 text-body-sm-medium">Properties</h5>
+        <div className={`divide-y-2 divide-subtle-1 ${!isEditable ? "opacity-60" : ""}`}>
           <div className="flex flex-col gap-3">
             {/* Intake State */}
             <div className="flex h-8 items-center gap-2">
-              <div className="flex w-2/5 flex-shrink-0 items-center gap-1 text-sm text-custom-text-300">
+              <div className="flex w-2/5 flex-shrink-0 items-center gap-1 text-13 text-tertiary">
                 <StatePropertyIcon className="h-4 w-4 flex-shrink-0" />
                 <span>State</span>
               </div>
@@ -74,9 +79,9 @@ export const InboxIssueContentProperties = observer(function InboxIssueContentPr
                   projectId={projectId?.toString() ?? ""}
                   disabled
                   buttonVariant="transparent-with-text"
-                  className="w-3/5 flex-grow group"
+                  className="group w-3/5 flex-grow"
                   buttonContainerClassName="w-full text-left"
-                  buttonClassName="text-sm"
+                  buttonClassName="text-13"
                   dropdownArrow
                   dropdownArrowClassName="h-3.5 w-3.5 hidden group-hover:inline"
                 />
@@ -84,7 +89,7 @@ export const InboxIssueContentProperties = observer(function InboxIssueContentPr
             </div>
             {/* Assignee */}
             <div className="flex h-8 items-center gap-2">
-              <div className="flex w-2/5 flex-shrink-0 items-center gap-1 text-sm text-custom-text-300">
+              <div className="flex w-2/5 flex-shrink-0 items-center gap-1 text-13 text-tertiary">
                 <MembersPropertyIcon className="h-4 w-4 flex-shrink-0" />
                 <span>Assignees</span>
               </div>
@@ -100,10 +105,10 @@ export const InboxIssueContentProperties = observer(function InboxIssueContentPr
                 buttonVariant={
                   (issue?.assignee_ids || [])?.length > 0 ? "transparent-without-text" : "transparent-with-text"
                 }
-                className="w-3/5 flex-grow group"
+                className="group w-3/5 flex-grow"
                 buttonContainerClassName="w-full text-left"
-                buttonClassName={`text-sm justify-between ${
-                  (issue?.assignee_ids || [])?.length > 0 ? "" : "text-custom-text-400"
+                buttonClassName={`text-13 justify-between ${
+                  (issue?.assignee_ids || [])?.length > 0 ? "" : "text-placeholder"
                 }`}
                 hideIcon={issue.assignee_ids?.length === 0}
                 dropdownArrow
@@ -112,7 +117,7 @@ export const InboxIssueContentProperties = observer(function InboxIssueContentPr
             </div>
             {/* Priority */}
             <div className="flex h-8 items-center gap-2">
-              <div className="flex w-2/5 flex-shrink-0 items-center gap-1 text-sm text-custom-text-300">
+              <div className="flex w-2/5 flex-shrink-0 items-center gap-1 text-13 text-tertiary">
                 <PriorityPropertyIcon className="h-4 w-4 flex-shrink-0" />
                 <span>Priority</span>
               </div>
@@ -123,18 +128,18 @@ export const InboxIssueContentProperties = observer(function InboxIssueContentPr
                 }
                 disabled={!isEditable}
                 buttonVariant="border-with-text"
-                className="w-3/5 flex-grow rounded px-2 hover:bg-custom-background-80"
+                className="w-3/5 flex-grow rounded-sm px-2 hover:bg-layer-1"
                 buttonContainerClassName="w-full text-left"
                 buttonClassName="w-min h-auto whitespace-nowrap"
               />
             </div>
           </div>
         </div>
-        <div className={`divide-y-2 divide-custom-border-200 mt-3 ${!isEditable ? "opacity-60" : ""}`}>
+        <div className={`mt-3 divide-y-2 divide-subtle-1 ${!isEditable ? "opacity-60" : ""}`}>
           <div className="flex flex-col gap-3">
             {/* Due Date */}
             <div className="flex h-8 items-center gap-2">
-              <div className="flex w-2/5 flex-shrink-0 items-center gap-1 text-sm text-custom-text-300">
+              <div className="flex w-2/5 flex-shrink-0 items-center gap-1 text-13 text-tertiary">
                 <DueDatePropertyIcon className="h-4 w-4 flex-shrink-0" />
                 <span>Due date</span>
               </div>
@@ -152,18 +157,18 @@ export const InboxIssueContentProperties = observer(function InboxIssueContentPr
                 buttonVariant="transparent-with-text"
                 className="group w-3/5 flex-grow"
                 buttonContainerClassName="w-full text-left"
-                buttonClassName={`text-sm ${issue?.target_date ? "" : "text-custom-text-400"}`}
+                buttonClassName={`text-13 ${issue?.target_date ? "" : "text-placeholder"}`}
                 hideIcon
                 clearIconClassName="h-3 w-3 hidden group-hover:inline"
               />
             </div>
             {/* Labels */}
             <div className="flex min-h-8 items-center gap-2">
-              <div className="flex w-2/5 flex-shrink-0 items-center gap-1 text-sm text-custom-text-300">
+              <div className="flex w-2/5 flex-shrink-0 items-center gap-1 text-13 text-tertiary">
                 <LabelPropertyIcon className="h-4 w-4 flex-shrink-0" />
                 <span>Labels</span>
               </div>
-              <div className="w-3/5 flex-grow min-h-8 h-full pt-1">
+              <div className="h-full min-h-8 w-3/5 flex-grow pt-1">
                 {issue?.id && (
                   <IssueLabel
                     workspaceSlug={workspaceSlug}
@@ -182,7 +187,7 @@ export const InboxIssueContentProperties = observer(function InboxIssueContentPr
             {/* duplicate to*/}
             {duplicateIssueDetails && (
               <div className="flex min-h-8 gap-2">
-                <div className="flex w-2/5 flex-shrink-0 gap-1 pt-2 text-sm text-custom-text-300">
+                <div className="flex w-2/5 flex-shrink-0 gap-1 pt-2 text-13 text-tertiary">
                   <DuplicatePropertyIcon className="h-4 w-4 flex-shrink-0" />
                   <span>Duplicate of</span>
                 </div>
@@ -195,7 +200,7 @@ export const InboxIssueContentProperties = observer(function InboxIssueContentPr
                   target="_self"
                 >
                   <Tooltip tooltipContent={`${duplicateIssueDetails?.name}`}>
-                    <span className="flex items-center gap-1 cursor-pointer text-xs rounded px-1.5 py-1 pb-0.5 bg-custom-background-80 text-custom-text-200">
+                    <span className="flex cursor-pointer items-center gap-1 rounded-sm bg-layer-1 px-1.5 py-1 pb-0.5 text-11 text-secondary">
                       {`${currentProjectDetails?.identifier}-${duplicateIssueDetails?.sequence_id}`}
                     </span>
                   </Tooltip>
diff --git a/apps/web/core/components/inbox/content/issue-root.tsx b/apps/web/core/components/inbox/content/issue-root.tsx
index c93df6f0f..172693b92 100644
--- a/apps/web/core/components/inbox/content/issue-root.tsx
+++ b/apps/web/core/components/inbox/content/issue-root.tsx
@@ -1,8 +1,13 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { Dispatch, SetStateAction } from "react";
 import { useEffect, useMemo, useRef } from "react";
 import { observer } from "mobx-react";
 // plane imports
-import { WORK_ITEM_TRACKER_EVENTS } from "@plane/constants";
 import type { EditorRefApi } from "@plane/editor";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { TIssue, TNameDescriptionLoader } from "@plane/types";
@@ -17,8 +22,6 @@ import type { TIssueOperations } from "@/components/issues/issue-detail";
 import { IssueActivity } from "@/components/issues/issue-detail/issue-activity";
 import { IssueReaction } from "@/components/issues/issue-detail/reactions";
 import { IssueTitleInput } from "@/components/issues/title-input";
-// helpers
-import { captureError, captureSuccess } from "@/helpers/event-tracker.helper";
 // hooks
 import { useIssueDetail } from "@/hooks/store/use-issue-detail";
 import { useMember } from "@/hooks/store/use-member";
@@ -102,10 +105,6 @@ export const InboxIssueMainContent = observer(function InboxIssueMainContent(pro
             type: TOAST_TYPE.SUCCESS,
             message: "Work item deleted successfully",
           });
-          captureSuccess({
-            eventName: WORK_ITEM_TRACKER_EVENTS.delete,
-            payload: { id: _issueId },
-          });
         } catch (error) {
           console.log("Error in deleting work item:", error);
           setToast({
@@ -113,47 +112,24 @@ export const InboxIssueMainContent = observer(function InboxIssueMainContent(pro
             type: TOAST_TYPE.ERROR,
             message: "Work item delete failed",
           });
-          captureError({
-            eventName: WORK_ITEM_TRACKER_EVENTS.delete,
-            payload: { id: _issueId },
-            error: error as Error,
-          });
         }
       },
       update: async (_workspaceSlug: string, _projectId: string, _issueId: string, data: Partial<TIssue>) => {
         try {
           await inboxIssue.updateIssue(data);
-          captureSuccess({
-            eventName: WORK_ITEM_TRACKER_EVENTS.update,
-            payload: { id: _issueId },
-          });
-        } catch (error) {
+        } catch (_error) {
           setToast({
             title: "Work item update failed",
             type: TOAST_TYPE.ERROR,
             message: "Work item update failed",
           });
-          captureError({
-            eventName: WORK_ITEM_TRACKER_EVENTS.update,
-            payload: { id: _issueId },
-            error: error as Error,
-          });
         }
       },
       archive: async (workspaceSlug: string, projectId: string, issueId: string) => {
         try {
           await archiveIssue(workspaceSlug, projectId, issueId);
-          captureSuccess({
-            eventName: WORK_ITEM_TRACKER_EVENTS.archive,
-            payload: { id: issueId },
-          });
         } catch (error) {
           console.error("Error in archiving issue:", error);
-          captureError({
-            eventName: WORK_ITEM_TRACKER_EVENTS.archive,
-            payload: { id: issueId },
-            error: error as Error,
-          });
         }
       },
     }),
@@ -166,7 +142,7 @@ export const InboxIssueMainContent = observer(function InboxIssueMainContent(pro
 
   return (
     <>
-      <div className="rounded-lg space-y-4">
+      <div className="space-y-4 pb-4">
         {duplicateIssues.length > 0 && (
           <DeDupeIssuePopoverRoot
             workspaceSlug={workspaceSlug}
@@ -200,16 +176,16 @@ export const InboxIssueMainContent = observer(function InboxIssueMainContent(pro
             entityId={issue.id}
             fileAssetType={EFileAssetType.ISSUE_DESCRIPTION}
             initialValue={issue.description_html ?? "<p></p>"}
+            key={issue.id}
             onSubmit={async (value, isMigrationUpdate) => {
               if (!issue.id || !issue.project_id) return;
               await issueOperations.update(workspaceSlug, issue.project_id, issue.id, {
-                description_html: value,
+                description_html: value.description_html,
                 ...(isMigrationUpdate ? { skip_activity: "true" } : {}),
               });
             }}
             projectId={issue.project_id}
             setIsSubmitting={(value) => setIsSubmitting(value)}
-            swrDescription={issue.description_html ?? "<p></p>"}
             workspaceSlug={workspaceSlug}
           />
         )}
@@ -249,24 +225,30 @@ export const InboxIssueMainContent = observer(function InboxIssueMainContent(pro
         </div>
       </div>
 
-      <IssueAttachmentRoot
-        workspaceSlug={workspaceSlug}
-        projectId={projectId}
-        issueId={issue.id}
-        disabled={!isEditable}
-      />
+      <div className="py-4">
+        <IssueAttachmentRoot
+          workspaceSlug={workspaceSlug}
+          projectId={projectId}
+          issueId={issue.id}
+          disabled={!isEditable}
+        />
+      </div>
 
-      <InboxIssueContentProperties
-        workspaceSlug={workspaceSlug}
-        projectId={projectId}
-        issue={issue}
-        issueOperations={issueOperations}
-        isEditable={isEditable}
-        duplicateIssueDetails={inboxIssue?.duplicate_issue_detail}
-        isIntakeAccepted={isIntakeAccepted}
-      />
+      <div className="py-4">
+        <InboxIssueContentProperties
+          workspaceSlug={workspaceSlug}
+          projectId={projectId}
+          issue={issue}
+          issueOperations={issueOperations}
+          isEditable={isEditable}
+          duplicateIssueDetails={inboxIssue?.duplicate_issue_detail}
+          isIntakeAccepted={isIntakeAccepted}
+        />
+      </div>
 
-      <IssueActivity workspaceSlug={workspaceSlug} projectId={projectId} issueId={issue.id} isIntakeIssue />
+      <div className="pt-4">
+        <IssueActivity workspaceSlug={workspaceSlug} projectId={projectId} issueId={issue.id} isIntakeIssue />
+      </div>
     </>
   );
 });
diff --git a/apps/web/core/components/inbox/content/root.tsx b/apps/web/core/components/inbox/content/root.tsx
index e54a391e9..995d83b07 100644
--- a/apps/web/core/components/inbox/content/root.tsx
+++ b/apps/web/core/components/inbox/content/root.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useEffect, useState } from "react";
 import { observer } from "mobx-react";
 import useSWR from "swr";
@@ -81,8 +86,8 @@ export const InboxContentRoot = observer(function InboxContentRoot(props: TInbox
 
   return (
     <>
-      <div className="w-full h-full overflow-hidden relative flex flex-col">
-        <div className="flex-shrink-0 min-h-[52px] z-[11]">
+      <div className="relative flex h-full w-full flex-col overflow-hidden">
+        <div className="z-[11] min-h-[52px] flex-shrink-0">
           <InboxIssueActionsHeader
             setIsMobileSidebar={setIsMobileSidebar}
             isMobileSidebar={isMobileSidebar}
@@ -94,7 +99,7 @@ export const InboxContentRoot = observer(function InboxContentRoot(props: TInbox
             embedRemoveCurrentNotification={embedRemoveCurrentNotification}
           />
         </div>
-        <ContentWrapper className="space-y-5 divide-y-2 divide-custom-border-200">
+        <ContentWrapper className="divide-y-2 divide-subtle-1">
           <InboxIssueMainContent
             workspaceSlug={workspaceSlug}
             projectId={projectId}
diff --git a/apps/web/core/components/inbox/inbox-filter/applied-filters/date.tsx b/apps/web/core/components/inbox/inbox-filter/applied-filters/date.tsx
index 3f548e048..53cf70989 100644
--- a/apps/web/core/components/inbox/inbox-filter/applied-filters/date.tsx
+++ b/apps/web/core/components/inbox/inbox-filter/applied-filters/date.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import { PAST_DURATION_FILTER_OPTIONS } from "@plane/constants";
 import { CloseIcon } from "@plane/propel/icons";
@@ -41,28 +46,28 @@ export const InboxIssueAppliedFiltersDate = observer(function InboxIssueAppliedF
   if (filteredValues.length === 0) return <></>;
   return (
     <Tag>
-      <div className="text-xs text-custom-text-200">{label}</div>
+      <div className="text-11 text-secondary">{label}</div>
       {filteredValues.map((value) => {
         const optionDetail = currentOptionDetail(value);
         if (!optionDetail) return <></>;
         return (
-          <div key={value} className="relative flex items-center gap-1 rounded bg-custom-background-80 p-1 text-xs">
-            <div className="text-xs truncate">{optionDetail?.name}</div>
+          <div key={value} className="relative flex items-center gap-1 rounded-sm bg-layer-1 p-1 text-11">
+            <div className="truncate text-11">{optionDetail?.name}</div>
             <div
-              className="w-3 h-3 flex-shrink-0 relative flex justify-center items-center overflow-hidden cursor-pointer text-custom-text-300 hover:text-custom-text-200 transition-all"
+              className="relative flex h-3 w-3 flex-shrink-0 cursor-pointer items-center justify-center overflow-hidden text-tertiary transition-all hover:text-secondary"
               onClick={() => handleInboxIssueFilters(filterKey, handleFilterValue(optionDetail?.value))}
             >
-              <CloseIcon className={`w-3 h-3`} />
+              <CloseIcon className={`h-3 w-3`} />
             </div>
           </div>
         );
       })}
 
       <div
-        className="w-3 h-3 flex-shrink-0 relative flex justify-center items-center overflow-hidden cursor-pointer text-custom-text-300 hover:text-custom-text-200 transition-all"
+        className="relative flex h-3 w-3 flex-shrink-0 cursor-pointer items-center justify-center overflow-hidden text-tertiary transition-all hover:text-secondary"
         onClick={clearFilter}
       >
-        <CloseIcon className={`w-3 h-3`} />
+        <CloseIcon className={`h-3 w-3`} />
       </div>
     </Tag>
   );
diff --git a/apps/web/core/components/inbox/inbox-filter/applied-filters/label.tsx b/apps/web/core/components/inbox/inbox-filter/applied-filters/label.tsx
index d750913cc..1fd33cbe8 100644
--- a/apps/web/core/components/inbox/inbox-filter/applied-filters/label.tsx
+++ b/apps/web/core/components/inbox/inbox-filter/applied-filters/label.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 // hooks
 import { CloseIcon } from "@plane/propel/icons";
@@ -26,31 +31,31 @@ export const InboxIssueAppliedFiltersLabel = observer(function InboxIssueApplied
   if (filteredValues.length === 0) return <></>;
   return (
     <Tag>
-      <div className="text-xs text-custom-text-200">Label</div>
+      <div className="text-11 text-secondary">Label</div>
       {filteredValues.map((value) => {
         const optionDetail = currentOptionDetail(value);
         if (!optionDetail) return <></>;
         return (
-          <div key={value} className="relative flex items-center gap-1 rounded bg-custom-background-80 p-1 text-xs">
-            <div className="w-3 h-3 flex-shrink-0 relative flex justify-center items-center overflow-hidden">
+          <div key={value} className="relative flex items-center gap-1 rounded-sm bg-layer-1 p-1 text-11">
+            <div className="relative flex h-3 w-3 flex-shrink-0 items-center justify-center overflow-hidden">
               <LabelIcons color={optionDetail.color} />
             </div>
-            <div className="text-xs truncate">{optionDetail?.name}</div>
+            <div className="truncate text-11">{optionDetail?.name}</div>
             <div
-              className="w-3 h-3 flex-shrink-0 relative flex justify-center items-center overflow-hidden cursor-pointer text-custom-text-300 hover:text-custom-text-200 transition-all"
+              className="relative flex h-3 w-3 flex-shrink-0 cursor-pointer items-center justify-center overflow-hidden text-tertiary transition-all hover:text-secondary"
               onClick={() => handleInboxIssueFilters("labels", handleFilterValue(value))}
             >
-              <CloseIcon className={`w-3 h-3`} />
+              <CloseIcon className={`h-3 w-3`} />
             </div>
           </div>
         );
       })}
 
       <div
-        className="w-3 h-3 flex-shrink-0 relative flex justify-center items-center overflow-hidden cursor-pointer text-custom-text-300 hover:text-custom-text-200 transition-all"
+        className="relative flex h-3 w-3 flex-shrink-0 cursor-pointer items-center justify-center overflow-hidden text-tertiary transition-all hover:text-secondary"
         onClick={clearFilter}
       >
-        <CloseIcon className={`w-3 h-3`} />
+        <CloseIcon className={`h-3 w-3`} />
       </div>
     </Tag>
   );
diff --git a/apps/web/core/components/inbox/inbox-filter/applied-filters/member.tsx b/apps/web/core/components/inbox/inbox-filter/applied-filters/member.tsx
index 94c6a69f0..4148f4af3 100644
--- a/apps/web/core/components/inbox/inbox-filter/applied-filters/member.tsx
+++ b/apps/web/core/components/inbox/inbox-filter/applied-filters/member.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 
 // plane types
@@ -36,13 +41,13 @@ export const InboxIssueAppliedFiltersMember = observer(function InboxIssueApplie
   if (filteredValues.length === 0) return <></>;
   return (
     <Tag>
-      <div className="text-xs text-custom-text-200">{label}</div>
+      <div className="text-11 text-secondary">{label}</div>
       {filteredValues.map((value) => {
         const optionDetail = currentOptionDetail(value);
         if (!optionDetail) return <></>;
         return (
-          <div key={value} className="relative flex items-center gap-1 rounded bg-custom-background-80 p-1 text-xs">
-            <div className="flex-shrink-0 relative flex justify-center items-center overflow-hidden">
+          <div key={value} className="relative flex items-center gap-1 rounded-sm bg-layer-1 p-1 text-11">
+            <div className="relative flex flex-shrink-0 items-center justify-center overflow-hidden">
               <Avatar
                 name={optionDetail.display_name}
                 src={getFileURL(optionDetail.avatar_url)}
@@ -50,22 +55,22 @@ export const InboxIssueAppliedFiltersMember = observer(function InboxIssueApplie
                 size="sm"
               />
             </div>
-            <div className="text-xs truncate">{optionDetail?.display_name}</div>
+            <div className="truncate text-11">{optionDetail?.display_name}</div>
             <div
-              className="w-3 h-3 flex-shrink-0 relative flex justify-center items-center overflow-hidden cursor-pointer text-custom-text-300 hover:text-custom-text-200 transition-all"
+              className="relative flex h-3 w-3 flex-shrink-0 cursor-pointer items-center justify-center overflow-hidden text-tertiary transition-all hover:text-secondary"
               onClick={() => handleInboxIssueFilters(filterKey, handleFilterValue(value))}
             >
-              <CloseIcon className={`w-3 h-3`} />
+              <CloseIcon className={`h-3 w-3`} />
             </div>
           </div>
         );
       })}
 
       <div
-        className="w-3 h-3 flex-shrink-0 relative flex justify-center items-center overflow-hidden cursor-pointer text-custom-text-300 hover:text-custom-text-200 transition-all"
+        className="relative flex h-3 w-3 flex-shrink-0 cursor-pointer items-center justify-center overflow-hidden text-tertiary transition-all hover:text-secondary"
         onClick={clearFilter}
       >
-        <CloseIcon className={`w-3 h-3`} />
+        <CloseIcon className={`h-3 w-3`} />
       </div>
     </Tag>
   );
diff --git a/apps/web/core/components/inbox/inbox-filter/applied-filters/priority.tsx b/apps/web/core/components/inbox/inbox-filter/applied-filters/priority.tsx
index e3343fd3f..38a12602a 100644
--- a/apps/web/core/components/inbox/inbox-filter/applied-filters/priority.tsx
+++ b/apps/web/core/components/inbox/inbox-filter/applied-filters/priority.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import { ISSUE_PRIORITIES } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
@@ -25,31 +30,31 @@ export const InboxIssueAppliedFiltersPriority = observer(function InboxIssueAppl
   if (filteredValues.length === 0) return <></>;
   return (
     <Tag>
-      <div className="text-xs text-custom-text-200">{t("common.priority")}</div>
+      <div className="text-11 text-secondary">{t("common.priority")}</div>
       {filteredValues.map((value) => {
         const optionDetail = currentOptionDetail(value);
         if (!optionDetail) return <></>;
         return (
-          <div key={value} className="relative flex items-center gap-1 rounded bg-custom-background-80 p-1 text-xs">
-            <div className="w-3 h-3 flex-shrink-0 relative flex justify-center items-center overflow-hidden">
+          <div key={value} className="relative flex items-center gap-1 rounded-sm bg-layer-1 p-1 text-11">
+            <div className="relative flex h-3 w-3 flex-shrink-0 items-center justify-center overflow-hidden">
               <PriorityIcon priority={optionDetail.key} className="h-3 w-3" />
             </div>
-            <div className="text-xs truncate">{optionDetail?.title}</div>
+            <div className="truncate text-11">{optionDetail?.title}</div>
             <div
-              className="w-3 h-3 flex-shrink-0 relative flex justify-center items-center overflow-hidden cursor-pointer text-custom-text-300 hover:text-custom-text-200 transition-all"
+              className="relative flex h-3 w-3 flex-shrink-0 cursor-pointer items-center justify-center overflow-hidden text-tertiary transition-all hover:text-secondary"
               onClick={() => handleInboxIssueFilters("priority", handleFilterValue(optionDetail?.key))}
             >
-              <CloseIcon className={`w-3 h-3`} />
+              <CloseIcon className={`h-3 w-3`} />
             </div>
           </div>
         );
       })}
 
       <div
-        className="w-3 h-3 flex-shrink-0 relative flex justify-center items-center overflow-hidden cursor-pointer text-custom-text-300 hover:text-custom-text-200 transition-all"
+        className="relative flex h-3 w-3 flex-shrink-0 cursor-pointer items-center justify-center overflow-hidden text-tertiary transition-all hover:text-secondary"
         onClick={clearFilter}
       >
-        <CloseIcon className={`w-3 h-3`} />
+        <CloseIcon className={`h-3 w-3`} />
       </div>
     </Tag>
   );
diff --git a/apps/web/core/components/inbox/inbox-filter/applied-filters/root.tsx b/apps/web/core/components/inbox/inbox-filter/applied-filters/root.tsx
index bf33b282e..99283e6c2 100644
--- a/apps/web/core/components/inbox/inbox-filter/applied-filters/root.tsx
+++ b/apps/web/core/components/inbox/inbox-filter/applied-filters/root.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 // plane imports
 import { Header, EHeaderVariant } from "@plane/ui";
diff --git a/apps/web/core/components/inbox/inbox-filter/applied-filters/state.tsx b/apps/web/core/components/inbox/inbox-filter/applied-filters/state.tsx
index 9bb83b490..f8b94c9bc 100644
--- a/apps/web/core/components/inbox/inbox-filter/applied-filters/state.tsx
+++ b/apps/web/core/components/inbox/inbox-filter/applied-filters/state.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import { EIconSize } from "@plane/constants";
 import { StateGroupIcon, CloseIcon } from "@plane/propel/icons";
@@ -23,31 +28,31 @@ export const InboxIssueAppliedFiltersState = observer(function InboxIssueApplied
   if (filteredValues.length === 0) return <></>;
   return (
     <Tag>
-      <div className="text-xs text-custom-text-200">State</div>
+      <div className="text-11 text-secondary">State</div>
       {filteredValues.map((value) => {
         const optionDetail = currentOptionDetail(value);
         if (!optionDetail) return <></>;
         return (
-          <div key={value} className="relative flex items-center gap-1 rounded bg-custom-background-80 p-1 text-xs">
-            <div className="w-3 h-3 flex-shrink-0 relative flex justify-center items-center overflow-hidden">
+          <div key={value} className="relative flex items-center gap-1 rounded-sm bg-layer-1 p-1 text-11">
+            <div className="relative flex h-3 w-3 flex-shrink-0 items-center justify-center overflow-hidden">
               <StateGroupIcon color={optionDetail.color} stateGroup={optionDetail.group} size={EIconSize.SM} />
             </div>
-            <div className="text-xs truncate">{optionDetail?.name}</div>
+            <div className="truncate text-11">{optionDetail?.name}</div>
             <div
-              className="w-3 h-3 flex-shrink-0 relative flex justify-center items-center overflow-hidden cursor-pointer text-custom-text-300 hover:text-custom-text-200 transition-all"
+              className="relative flex h-3 w-3 flex-shrink-0 cursor-pointer items-center justify-center overflow-hidden text-tertiary transition-all hover:text-secondary"
               onClick={() => handleInboxIssueFilters("state", handleFilterValue(optionDetail?.id))}
             >
-              <CloseIcon className={`w-3 h-3`} />
+              <CloseIcon className={`h-3 w-3`} />
             </div>
           </div>
         );
       })}
 
       <div
-        className="w-3 h-3 flex-shrink-0 relative flex justify-center items-center overflow-hidden cursor-pointer text-custom-text-300 hover:text-custom-text-200 transition-all"
+        className="relative flex h-3 w-3 flex-shrink-0 cursor-pointer items-center justify-center overflow-hidden text-tertiary transition-all hover:text-secondary"
         onClick={clearFilter}
       >
-        <CloseIcon className={`w-3 h-3`} />
+        <CloseIcon className={`h-3 w-3`} />
       </div>
     </Tag>
   );
diff --git a/apps/web/core/components/inbox/inbox-filter/applied-filters/status.tsx b/apps/web/core/components/inbox/inbox-filter/applied-filters/status.tsx
index f4e045c35..ccc7c31ae 100644
--- a/apps/web/core/components/inbox/inbox-filter/applied-filters/status.tsx
+++ b/apps/web/core/components/inbox/inbox-filter/applied-filters/status.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import { INBOX_STATUS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
@@ -24,22 +29,22 @@ export const InboxIssueAppliedFiltersStatus = observer(function InboxIssueApplie
   if (filteredValues.length === 0) return <></>;
   return (
     <Tag>
-      <div className="text-xs text-custom-text-200">Status</div>
+      <div className="text-11 text-secondary">Status</div>
       {filteredValues.map((value) => {
         const optionDetail = currentOptionDetail(value);
         if (!optionDetail) return <></>;
         return (
-          <div key={value} className="relative flex items-center gap-1 rounded bg-custom-background-80 p-1 text-xs">
-            <div className="w-3 h-3 flex-shrink-0 relative flex justify-center items-center overflow-hidden">
+          <div key={value} className="relative flex items-center gap-1 rounded-sm bg-layer-1 p-1 text-11">
+            <div className="relative flex h-3 w-3 flex-shrink-0 items-center justify-center overflow-hidden">
               <InboxStatusIcon type={optionDetail?.status} />
             </div>
-            <div className="text-xs truncate">{t(optionDetail?.i18n_title)}</div>
+            <div className="truncate text-11">{t(optionDetail?.i18n_title)}</div>
             {handleFilterValue(optionDetail?.status).length >= 1 && (
               <div
-                className="w-3 h-3 flex-shrink-0 relative flex justify-center items-center overflow-hidden cursor-pointer text-custom-text-300 hover:text-custom-text-200 transition-all"
+                className="relative flex h-3 w-3 flex-shrink-0 cursor-pointer items-center justify-center overflow-hidden text-tertiary transition-all hover:text-secondary"
                 onClick={() => handleInboxIssueFilters("status", handleFilterValue(optionDetail?.status))}
               >
-                <CloseIcon className={`w-3 h-3`} />
+                <CloseIcon className={`h-3 w-3`} />
               </div>
             )}
           </div>
diff --git a/apps/web/core/components/inbox/inbox-filter/filters/date.tsx b/apps/web/core/components/inbox/inbox-filter/filters/date.tsx
index 56a105d8d..51fbbe6d4 100644
--- a/apps/web/core/components/inbox/inbox-filter/filters/date.tsx
+++ b/apps/web/core/components/inbox/inbox-filter/filters/date.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useState } from "react";
 import { concat, uniq } from "lodash-es";
 import { observer } from "mobx-react";
@@ -88,7 +93,7 @@ export const FilterDate = observer(function FilterDate(props: Props) {
               />
             </>
           ) : (
-            <p className="text-xs italic text-custom-text-400">No matches found</p>
+            <p className="text-11 text-placeholder italic">No matches found</p>
           )}
         </div>
       )}
diff --git a/apps/web/core/components/inbox/inbox-filter/filters/filter-selection.tsx b/apps/web/core/components/inbox/inbox-filter/filters/filter-selection.tsx
index 88f851493..99ae144cd 100644
--- a/apps/web/core/components/inbox/inbox-filter/filters/filter-selection.tsx
+++ b/apps/web/core/components/inbox/inbox-filter/filters/filter-selection.tsx
@@ -1,19 +1,21 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useState } from "react";
 import { observer } from "mobx-react";
-import { Search } from "lucide-react";
-import { CloseIcon } from "@plane/propel/icons";
+import { SearchIcon, CloseIcon } from "@plane/propel/icons";
 // hooks
 import { useLabel } from "@/hooks/store/use-label";
 import { useMember } from "@/hooks/store/use-member";
-import { useProjectState } from "@/hooks/store/use-project-state";
 import { usePlatformOS } from "@/hooks/use-platform-os";
 // local imports
 import { FilterDate } from "./date";
 import { FilterLabels } from "./labels";
 import { FilterMember } from "./members";
 import { FilterPriority } from "./priority";
-import { FilterState } from "./state";
 import { FilterStatus } from "./status";
 
 export const InboxIssueFilterSelection = observer(function InboxIssueFilterSelection() {
@@ -23,18 +25,17 @@ export const InboxIssueFilterSelection = observer(function InboxIssueFilterSelec
     project: { projectMemberIds },
   } = useMember();
   const { projectLabels } = useLabel();
-  const { projectStates } = useProjectState();
   // states
   const [filtersSearchQuery, setFiltersSearchQuery] = useState("");
 
   return (
     <div className="flex h-full w-full flex-col overflow-hidden">
-      <div className="bg-custom-background-100 p-2.5 pb-0">
-        <div className="flex items-center gap-1.5 rounded border-[0.5px] border-custom-border-200 bg-custom-background-90 px-1.5 py-1 text-xs">
-          <Search className="text-custom-text-400" size={12} strokeWidth={2} />
+      <div className="bg-surface-1 p-2.5 pb-0">
+        <div className="flex items-center gap-1.5 rounded-sm border-[0.5px] border-subtle bg-surface-2 px-1.5 py-1 text-11">
+          <SearchIcon className="text-placeholder" width={12} height={12} strokeWidth={2} />
           <input
             type="text"
-            className="w-full bg-custom-background-90 outline-none placeholder:text-custom-text-400"
+            className="w-full bg-surface-2 outline-none placeholder:text-placeholder"
             placeholder="Search"
             value={filtersSearchQuery}
             onChange={(e) => setFiltersSearchQuery(e.target.value)}
@@ -42,13 +43,13 @@ export const InboxIssueFilterSelection = observer(function InboxIssueFilterSelec
           />
           {filtersSearchQuery !== "" && (
             <button type="button" className="grid place-items-center" onClick={() => setFiltersSearchQuery("")}>
-              <CloseIcon className="text-custom-text-300" height={12} width={12} strokeWidth={2} />
+              <CloseIcon className="text-tertiary" height={12} width={12} strokeWidth={2} />
             </button>
           )}
         </div>
       </div>
 
-      <div className="h-full w-full divide-y divide-custom-border-200 overflow-y-auto px-2.5 vertical-scrollbar scrollbar-sm">
+      <div className="vertical-scrollbar scrollbar-sm h-full w-full divide-y divide-subtle-1 overflow-y-auto px-2.5">
         {/* status */}
         <div className="py-2">
           <FilterStatus searchQuery={filtersSearchQuery} />
diff --git a/apps/web/core/components/inbox/inbox-filter/filters/labels.tsx b/apps/web/core/components/inbox/inbox-filter/filters/labels.tsx
index dcaa22c74..23e338b1d 100644
--- a/apps/web/core/components/inbox/inbox-filter/filters/labels.tsx
+++ b/apps/web/core/components/inbox/inbox-filter/filters/labels.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useState } from "react";
 import { observer } from "mobx-react";
 import type { IIssueLabel } from "@plane/types";
@@ -65,7 +70,7 @@ export const FilterLabels = observer(function FilterLabels(props: Props) {
                 {filteredOptions.length > 5 && (
                   <button
                     type="button"
-                    className="ml-8 text-xs font-medium text-custom-primary-100"
+                    className="ml-8 text-11 font-medium text-accent-primary"
                     onClick={handleViewToggle}
                   >
                     {itemsToRender === filteredOptions.length ? "View less" : "View all"}
@@ -73,7 +78,7 @@ export const FilterLabels = observer(function FilterLabels(props: Props) {
                 )}
               </>
             ) : (
-              <p className="text-xs italic text-custom-text-400">No matches found</p>
+              <p className="text-11 text-placeholder italic">No matches found</p>
             )
           ) : (
             <Loader className="space-y-2">
diff --git a/apps/web/core/components/inbox/inbox-filter/filters/members.tsx b/apps/web/core/components/inbox/inbox-filter/filters/members.tsx
index 43bd2fe86..d555aa81b 100644
--- a/apps/web/core/components/inbox/inbox-filter/filters/members.tsx
+++ b/apps/web/core/components/inbox/inbox-filter/filters/members.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useMemo, useState } from "react";
 import { sortBy } from "lodash-es";
 import { observer } from "mobx-react";
@@ -94,7 +99,7 @@ export const FilterMember = observer(function FilterMember(props: Props) {
                 {sortedOptions.length > 5 && (
                   <button
                     type="button"
-                    className="ml-8 text-xs font-medium text-custom-primary-100"
+                    className="ml-8 text-11 font-medium text-accent-primary"
                     onClick={handleViewToggle}
                   >
                     {itemsToRender === sortedOptions.length ? "View less" : "View all"}
@@ -102,7 +107,7 @@ export const FilterMember = observer(function FilterMember(props: Props) {
                 )}
               </>
             ) : (
-              <p className="text-xs italic text-custom-text-400">No matches found</p>
+              <p className="text-11 text-placeholder italic">No matches found</p>
             )
           ) : (
             <Loader className="space-y-2">
diff --git a/apps/web/core/components/inbox/inbox-filter/filters/priority.tsx b/apps/web/core/components/inbox/inbox-filter/filters/priority.tsx
index 3b58059fd..5272e368b 100644
--- a/apps/web/core/components/inbox/inbox-filter/filters/priority.tsx
+++ b/apps/web/core/components/inbox/inbox-filter/filters/priority.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useState } from "react";
 import { observer } from "mobx-react";
 import { ISSUE_PRIORITIES } from "@plane/constants";
@@ -50,7 +55,7 @@ export const FilterPriority = observer(function FilterPriority(props: Props) {
               />
             ))
           ) : (
-            <p className="text-xs italic text-custom-text-400">{t("common.search.no_matches_found")}</p>
+            <p className="text-11 text-placeholder italic">{t("common.search.no_matches_found")}</p>
           )}
         </div>
       )}
diff --git a/apps/web/core/components/inbox/inbox-filter/filters/state.tsx b/apps/web/core/components/inbox/inbox-filter/filters/state.tsx
index 414ef14de..4a4af021f 100644
--- a/apps/web/core/components/inbox/inbox-filter/filters/state.tsx
+++ b/apps/web/core/components/inbox/inbox-filter/filters/state.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useState } from "react";
 import { observer } from "mobx-react";
 import { EIconSize } from "@plane/constants";
@@ -70,7 +75,7 @@ export const FilterState = observer(function FilterState(props: Props) {
                 {filteredOptions.length > 5 && (
                   <button
                     type="button"
-                    className="ml-8 text-xs font-medium text-custom-primary-100"
+                    className="ml-8 text-11 font-medium text-accent-primary"
                     onClick={handleViewToggle}
                   >
                     {itemsToRender === filteredOptions.length ? "View less" : "View all"}
@@ -78,7 +83,7 @@ export const FilterState = observer(function FilterState(props: Props) {
                 )}
               </>
             ) : (
-              <p className="text-xs italic text-custom-text-400">No matches found</p>
+              <p className="text-11 text-placeholder italic">No matches found</p>
             )
           ) : (
             <Loader className="space-y-2">
diff --git a/apps/web/core/components/inbox/inbox-filter/filters/status.tsx b/apps/web/core/components/inbox/inbox-filter/filters/status.tsx
index d814cd71e..e08a71334 100644
--- a/apps/web/core/components/inbox/inbox-filter/filters/status.tsx
+++ b/apps/web/core/components/inbox/inbox-filter/filters/status.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useState } from "react";
 import { observer } from "mobx-react";
 // types
@@ -61,7 +66,7 @@ export const FilterStatus = observer(function FilterStatus(props: Props) {
               />
             ))
           ) : (
-            <p className="text-xs italic text-custom-text-400">No matches found</p>
+            <p className="text-11 text-placeholder italic">No matches found</p>
           )}
         </div>
       )}
diff --git a/apps/web/core/components/inbox/inbox-filter/index.ts b/apps/web/core/components/inbox/inbox-filter/index.ts
index 1efe34c51..d98033459 100644
--- a/apps/web/core/components/inbox/inbox-filter/index.ts
+++ b/apps/web/core/components/inbox/inbox-filter/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./root";
diff --git a/apps/web/core/components/inbox/inbox-filter/root.tsx b/apps/web/core/components/inbox/inbox-filter/root.tsx
index 523b75818..2413ccc38 100644
--- a/apps/web/core/components/inbox/inbox-filter/root.tsx
+++ b/apps/web/core/components/inbox/inbox-filter/root.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { ListFilter } from "lucide-react";
 import { getButtonStyling } from "@plane/propel/button";
 // plane imports
@@ -12,11 +17,11 @@ import useSize from "@/hooks/use-window-size";
 import { InboxIssueFilterSelection } from "./filters/filter-selection";
 import { InboxIssueOrderByDropdown } from "./sorting/order-by";
 
-const smallButton = <ListFilter className="size-3 " />;
+const smallButton = <ListFilter className="size-3" />;
 
 const largeButton = (
-  <div className={cn(getButtonStyling("neutral-primary", "sm"), "px-2 text-custom-text-300")}>
-    <ListFilter className="size-3 " />
+  <div className={cn(getButtonStyling("secondary", "base"), "px-2 text-tertiary")}>
+    <ListFilter className="size-3" />
     <span>Filters</span>
     <ChevronDownIcon className="size-3" strokeWidth={2} />
   </div>
diff --git a/apps/web/core/components/inbox/inbox-filter/sorting/order-by.tsx b/apps/web/core/components/inbox/inbox-filter/sorting/order-by.tsx
index e343f51b3..ad2e720c7 100644
--- a/apps/web/core/components/inbox/inbox-filter/sorting/order-by.tsx
+++ b/apps/web/core/components/inbox/inbox-filter/sorting/order-by.tsx
@@ -1,10 +1,15 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
-import { ArrowDownWideNarrow, ArrowUpWideNarrow, Check } from "lucide-react";
+import { ArrowDownWideNarrow, ArrowUpWideNarrow } from "lucide-react";
 import { INBOX_ISSUE_ORDER_BY_OPTIONS, INBOX_ISSUE_SORT_BY_OPTIONS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { getButtonStyling } from "@plane/propel/button";
-import { ChevronDownIcon } from "@plane/propel/icons";
+import { CheckIcon, ChevronDownIcon } from "@plane/propel/icons";
 import type { TInboxIssueSortingOrderByKeys, TInboxIssueSortingSortByKeys } from "@plane/types";
 import { CustomMenu } from "@plane/ui";
 // constants
@@ -23,16 +28,16 @@ export const InboxIssueOrderByDropdown = observer(function InboxIssueOrderByDrop
     INBOX_ISSUE_ORDER_BY_OPTIONS.find((option) => inboxSorting?.order_by?.includes(option.key)) || undefined;
   const smallButton =
     inboxSorting?.sort_by === "asc" ? (
-      <ArrowUpWideNarrow className="size-3 " />
+      <ArrowUpWideNarrow className="size-3" />
     ) : (
-      <ArrowDownWideNarrow className="size-3 " />
+      <ArrowDownWideNarrow className="size-3" />
     );
   const largeButton = (
-    <div className={cn(getButtonStyling("neutral-primary", "sm"), "px-2 text-custom-text-300")}>
+    <div className={cn(getButtonStyling("secondary", "base"), "px-2 text-tertiary")}>
       {inboxSorting?.sort_by === "asc" ? (
-        <ArrowUpWideNarrow className="size-3 " />
+        <ArrowUpWideNarrow className="size-3" />
       ) : (
-        <ArrowDownWideNarrow className="size-3 " />
+        <ArrowDownWideNarrow className="size-3" />
       )}
       {t(orderByDetails?.i18n_label || "inbox_issue.order_by.created_at")}
       <ChevronDownIcon className="size-3" strokeWidth={2} />
@@ -52,10 +57,10 @@ export const InboxIssueOrderByDropdown = observer(function InboxIssueOrderByDrop
           onClick={() => handleInboxIssueSorting("order_by", option.key as TInboxIssueSortingOrderByKeys)}
         >
           {t(option.i18n_label)}
-          {inboxSorting?.order_by?.includes(option.key) && <Check className="size-3" />}
+          {inboxSorting?.order_by?.includes(option.key) && <CheckIcon className="size-3" />}
         </CustomMenu.MenuItem>
       ))}
-      <hr className="my-2 border-custom-border-200" />
+      <hr className="my-2 border-subtle" />
       {INBOX_ISSUE_SORT_BY_OPTIONS.map((option) => (
         <CustomMenu.MenuItem
           key={option.key}
@@ -63,7 +68,7 @@ export const InboxIssueOrderByDropdown = observer(function InboxIssueOrderByDrop
           onClick={() => handleInboxIssueSorting("sort_by", option.key as TInboxIssueSortingSortByKeys)}
         >
           {t(option.i18n_label)}
-          {inboxSorting?.sort_by?.includes(option.key) && <Check className="size-3" />}
+          {inboxSorting?.sort_by?.includes(option.key) && <CheckIcon className="size-3" />}
         </CustomMenu.MenuItem>
       ))}
     </CustomMenu>
diff --git a/apps/web/core/components/inbox/inbox-issue-status.tsx b/apps/web/core/components/inbox/inbox-issue-status.tsx
index 86a425473..972d83e14 100644
--- a/apps/web/core/components/inbox/inbox-issue-status.tsx
+++ b/apps/web/core/components/inbox/inbox-issue-status.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 import { observer } from "mobx-react";
 // constants
@@ -33,18 +39,18 @@ export const InboxIssueStatus = observer(function InboxIssueStatus(props: Props)
   return (
     <div
       className={cn(
-        `relative flex flex-col gap-1 p-1.5 py-0.5 rounded ${statusIcon.textColor(
+        `relative flex flex-col gap-1 rounded-sm p-1.5 py-0.5 ${statusIcon.textColor(
           isSnoozedDatePassed
         )} ${statusIcon.bgColor(isSnoozedDatePassed)}`
       )}
     >
       <div className={`flex items-center gap-1`}>
         <InboxStatusIcon type={inboxIssue?.status} size={iconSize} className="flex-shrink-0" renderColor={false} />
-        <div className="font-medium text-xs whitespace-nowrap">
+        <div className="text-11 font-medium whitespace-nowrap">
           {inboxIssue?.status === 0 && inboxIssue?.snoozed_till ? description : t(inboxIssueStatusDetail.i18n_title)}
         </div>
       </div>
-      {showDescription && <div className="text-sm whitespace-nowrap">{description}</div>}
+      {showDescription && <div className="text-13 whitespace-nowrap">{description}</div>}
     </div>
   );
 });
diff --git a/apps/web/core/components/inbox/inbox-status-icon.tsx b/apps/web/core/components/inbox/inbox-status-icon.tsx
index 4a0350314..ceaf5826d 100644
--- a/apps/web/core/components/inbox/inbox-status-icon.tsx
+++ b/apps/web/core/components/inbox/inbox-status-icon.tsx
@@ -1,4 +1,11 @@
-import { AlertTriangle, CheckCircle2, Clock, Copy, XCircle } from "lucide-react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { AlertTriangle, CheckCircle2, Clock, XCircle } from "lucide-react";
+import { CopyIcon } from "@plane/propel/icons";
 import type { TInboxIssueStatus } from "@plane/types";
 import { EInboxIssueStatus } from "@plane/types";
 import { cn } from "@plane/utils";
@@ -6,28 +13,28 @@ import { cn } from "@plane/utils";
 export const ICON_PROPERTIES = {
   [EInboxIssueStatus.PENDING]: {
     icon: AlertTriangle,
-    textColor: (snoozeDatePassed: boolean = false) => (snoozeDatePassed ? "" : "text-[#AB6400]"),
-    bgColor: (snoozeDatePassed: boolean = false) => (snoozeDatePassed ? "" : "bg-[#FFF7C2]"),
+    textColor: (snoozeDatePassed: boolean = false) => (snoozeDatePassed ? "" : "text-warning-primary"),
+    bgColor: (snoozeDatePassed: boolean = false) => (snoozeDatePassed ? "" : "bg-warning-subtle"),
   },
   [EInboxIssueStatus.DECLINED]: {
     icon: XCircle,
-    textColor: (snoozeDatePassed: boolean = false) => (snoozeDatePassed ? "" : "text-[#CE2C31]"),
-    bgColor: (snoozeDatePassed: boolean = false) => (snoozeDatePassed ? "" : "bg-[#FEEBEC]"),
+    textColor: (snoozeDatePassed: boolean = false) => (snoozeDatePassed ? "" : "text-danger-primary"),
+    bgColor: (snoozeDatePassed: boolean = false) => (snoozeDatePassed ? "" : "bg-danger-subtle"),
   },
   [EInboxIssueStatus.SNOOZED]: {
     icon: Clock,
-    textColor: (snoozeDatePassed: boolean = false) => (snoozeDatePassed ? "text-red-500" : "text-custom-text-400"),
-    bgColor: (snoozeDatePassed: boolean = false) => (snoozeDatePassed ? "bg-red-500/10" : "bg-[#E0E1E6]"),
+    textColor: (snoozeDatePassed: boolean = false) => (snoozeDatePassed ? "text-danger-primary" : "text-placeholder"),
+    bgColor: (snoozeDatePassed: boolean = false) => (snoozeDatePassed ? "bg-danger-subtle" : "bg-layer-3"),
   },
   [EInboxIssueStatus.ACCEPTED]: {
     icon: CheckCircle2,
-    textColor: (snoozeDatePassed: boolean = false) => (snoozeDatePassed ? "" : "text-[#3E9B4F]"),
-    bgColor: (snoozeDatePassed: boolean = false) => (snoozeDatePassed ? "" : "bg-[#E9F6E9]"),
+    textColor: (snoozeDatePassed: boolean = false) => (snoozeDatePassed ? "" : "text-success-primary"),
+    bgColor: (snoozeDatePassed: boolean = false) => (snoozeDatePassed ? "" : "bg-success-subtle"),
   },
   [EInboxIssueStatus.DUPLICATE]: {
-    icon: Copy,
-    textColor: (snoozeDatePassed: boolean = false) => (snoozeDatePassed ? "" : "text-custom-text-200"),
-    bgColor: (snoozeDatePassed: boolean = false) => (snoozeDatePassed ? "" : "bg-gray-500/10"),
+    icon: CopyIcon,
+    textColor: (snoozeDatePassed: boolean = false) => (snoozeDatePassed ? "" : "text-secondary"),
+    bgColor: (snoozeDatePassed: boolean = false) => (snoozeDatePassed ? "" : "bg-layer-3"),
   },
 };
 export function InboxStatusIcon({
@@ -44,5 +51,5 @@ export function InboxStatusIcon({
   if (type === undefined) return null;
   const Icon = ICON_PROPERTIES[type];
   if (!Icon) return null;
-  return <Icon.icon size={size} className={cn(`w-3 h-3 ${renderColor && Icon?.textColor(false)}`, className)} />;
+  return <Icon.icon size={size} className={cn(`h-3 w-3 ${renderColor && Icon?.textColor(false)}`, className)} />;
 }
diff --git a/apps/web/core/components/inbox/index.ts b/apps/web/core/components/inbox/index.ts
index 1efe34c51..d98033459 100644
--- a/apps/web/core/components/inbox/index.ts
+++ b/apps/web/core/components/inbox/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./root";
diff --git a/apps/web/core/components/inbox/modals/create-modal/create-root.tsx b/apps/web/core/components/inbox/modals/create-modal/create-root.tsx
index 395ac60a3..e31e8da12 100644
--- a/apps/web/core/components/inbox/modals/create-modal/create-root.tsx
+++ b/apps/web/core/components/inbox/modals/create-modal/create-root.tsx
@@ -1,8 +1,14 @@
-import type { FC, FormEvent } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { FormEvent } from "react";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { observer } from "mobx-react";
 // plane imports
-import { ETabIndices, WORK_ITEM_TRACKER_EVENTS } from "@plane/constants";
+import { ETabIndices } from "@plane/constants";
 import type { EditorRefApi } from "@plane/editor";
 import { useTranslation } from "@plane/i18n";
 import { Button } from "@plane/propel/button";
@@ -10,8 +16,6 @@ import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { TIssue } from "@plane/types";
 import { ToggleSwitch } from "@plane/ui";
 import { renderFormattedPayloadDate, getTabIndex } from "@plane/utils";
-// helpers
-import { captureError, captureSuccess } from "@/helpers/event-tracker.helper";
 // hooks
 import { useProject } from "@/hooks/store/use-project";
 import { useProjectInbox } from "@/hooks/store/use-project-inbox";
@@ -170,12 +174,6 @@ export const InboxIssueCreateRoot = observer(function InboxIssueCreateRoot(props
           descriptionEditorRef?.current?.clearEditor();
           setFormData(defaultIssueData);
         }
-        captureSuccess({
-          eventName: WORK_ITEM_TRACKER_EVENTS.create,
-          payload: {
-            id: res?.issue?.id,
-          },
-        });
         setToast({
           type: TOAST_TYPE.SUCCESS,
           title: `Success!`,
@@ -184,13 +182,6 @@ export const InboxIssueCreateRoot = observer(function InboxIssueCreateRoot(props
       })
       .catch((error) => {
         console.error(error);
-        captureError({
-          eventName: WORK_ITEM_TRACKER_EVENTS.create,
-          payload: {
-            id: formData?.id,
-          },
-          error: error as Error,
-        });
         setToast({
           type: TOAST_TYPE.ERROR,
           title: `Error!`,
@@ -206,12 +197,12 @@ export const InboxIssueCreateRoot = observer(function InboxIssueCreateRoot(props
 
   if (!workspaceSlug || !projectId || !workspaceId) return <></>;
   return (
-    <div className="flex gap-2 bg-transparent w-full">
-      <div className="rounded-lg w-full">
-        <form ref={formRef} onSubmit={handleFormSubmit} className="flex flex-col w-full">
-          <div className="space-y-5 p-5 rounded-t-lg bg-custom-background-100">
+    <div className="flex w-full gap-2 bg-transparent">
+      <div className="w-full rounded-lg">
+        <form ref={formRef} onSubmit={handleFormSubmit} className="flex w-full flex-col">
+          <div className="space-y-5 rounded-t-lg bg-surface-1 p-5">
             <div className="flex items-center justify-between gap-2">
-              <h3 className="text-xl font-medium text-custom-text-200">{t("inbox_issue.modal.title")}</h3>
+              <h3 className="text-18 font-medium text-secondary">{t("inbox_issue.modal.title")}</h3>
               {duplicateIssues?.length > 0 && (
                 <DeDupeButtonRoot
                   workspaceSlug={workspaceSlug}
@@ -234,27 +225,27 @@ export const InboxIssueCreateRoot = observer(function InboxIssueCreateRoot(props
                 data={formData}
                 handleData={handleFormData}
                 editorRef={descriptionEditorRef}
-                containerClassName="border-[0.5px] border-custom-border-200 py-3 min-h-[150px]"
+                containerClassName="bg-layer-2 border-[0.5px] border-subtle-1 py-3 min-h-[150px]"
                 onEnterKeyPress={() => submitBtnRef?.current?.click()}
                 onAssetUpload={(assetId) => setUploadedAssetIds((prev) => [...prev, assetId])}
               />
               <InboxIssueProperties projectId={projectId} data={formData} handleData={handleFormData} />
             </div>
           </div>
-          <div className="px-5 py-4 flex items-center justify-between gap-2 border-t-[0.5px] border-custom-border-200 rounded-b-lg bg-custom-background-100">
+          <div className="flex items-center justify-between gap-2 rounded-b-lg border-t-[0.5px] border-subtle bg-surface-1 px-5 py-4">
             <div
-              className="inline-flex items-center gap-1.5 cursor-pointer"
+              className="inline-flex cursor-pointer items-center gap-1.5"
               onClick={() => setCreateMore((prevData) => !prevData)}
               role="button"
               tabIndex={getIndex("create_more")}
             >
               <ToggleSwitch value={createMore} onChange={() => {}} size="sm" />
-              <span className="text-xs">{t("create_more")}</span>
+              <span className="text-11">{t("create_more")}</span>
             </div>
             <div className="flex items-center gap-3">
               <Button
-                variant="neutral-primary"
-                size="sm"
+                variant="secondary"
+                size="lg"
                 type="button"
                 onClick={() => {
                   if (descriptionEditorRef.current?.isEditorReadyToDiscard()) {
@@ -274,11 +265,11 @@ export const InboxIssueCreateRoot = observer(function InboxIssueCreateRoot(props
               <Button
                 variant="primary"
                 ref={submitBtnRef}
-                size="sm"
                 type="submit"
                 loading={formSubmitting}
                 disabled={isTitleLengthMoreThan255Character}
                 tabIndex={getIndex("submit_button")}
+                size="lg"
               >
                 {formSubmitting ? t("creating") : t("create_work_item")}
               </Button>
@@ -289,7 +280,7 @@ export const InboxIssueCreateRoot = observer(function InboxIssueCreateRoot(props
       {shouldRenderDuplicateModal && (
         <div
           ref={modalContainerRef}
-          className="relative flex flex-col gap-2.5 px-3 py-4 rounded-lg shadow-xl bg-pi-50"
+          className="shadow-xl bg-pi-50 relative flex flex-col gap-2.5 rounded-lg px-3 py-4"
           style={{ maxHeight: formRef?.current?.offsetHeight ? `${formRef.current.offsetHeight}px` : "436px" }}
         >
           <DuplicateModalRoot
diff --git a/apps/web/core/components/inbox/modals/create-modal/index.ts b/apps/web/core/components/inbox/modals/create-modal/index.ts
index 031608e25..dd65a9ec3 100644
--- a/apps/web/core/components/inbox/modals/create-modal/index.ts
+++ b/apps/web/core/components/inbox/modals/create-modal/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./modal";
diff --git a/apps/web/core/components/inbox/modals/create-modal/issue-description.tsx b/apps/web/core/components/inbox/modals/create-modal/issue-description.tsx
index 536518cf5..ce3961b08 100644
--- a/apps/web/core/components/inbox/modals/create-modal/issue-description.tsx
+++ b/apps/web/core/components/inbox/modals/create-modal/issue-description.tsx
@@ -1,4 +1,10 @@
-import type { FC, RefObject } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { RefObject } from "react";
 import { observer } from "mobx-react";
 // plane imports
 import { ETabIndices } from "@plane/constants";
@@ -15,7 +21,7 @@ import { useEditorAsset } from "@/hooks/store/use-editor-asset";
 import { useProjectInbox } from "@/hooks/store/use-project-inbox";
 import { usePlatformOS } from "@/hooks/use-platform-os";
 // services
-import { WorkspaceService } from "@/plane-web/services";
+import { WorkspaceService } from "@/services/workspace.service";
 
 const workspaceService = new WorkspaceService();
 
@@ -55,7 +61,7 @@ export const InboxIssueDescription = observer(function InboxIssueDescription(pro
 
   if (loader === "issue-loading")
     return (
-      <Loader className="min-h-[6rem] rounded-md border border-custom-border-200">
+      <Loader className="min-h-[6rem] rounded-md border border-subtle">
         <Loader.Item width="100%" height="140px" />
       </Loader>
     );
diff --git a/apps/web/core/components/inbox/modals/create-modal/issue-properties.tsx b/apps/web/core/components/inbox/modals/create-modal/issue-properties.tsx
index 99bf55883..6d6c80e93 100644
--- a/apps/web/core/components/inbox/modals/create-modal/issue-properties.tsx
+++ b/apps/web/core/components/inbox/modals/create-modal/issue-properties.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useState } from "react";
 import { observer } from "mobx-react";
 import { ETabIndices } from "@plane/constants";
@@ -49,7 +54,7 @@ export const InboxIssueProperties = observer(function InboxIssueProperties(props
   maxDate?.setDate(maxDate.getDate());
 
   return (
-    <div className="relative flex flex-wrap gap-2 items-center">
+    <div className="relative flex flex-wrap items-center gap-2">
       {/* intake state */}
       <div className="h-7">
         <IntakeStateDropdown
@@ -174,7 +179,7 @@ export const InboxIssueProperties = observer(function InboxIssueProperties(props
               customButton={
                 <button
                   type="button"
-                  className="flex cursor-pointer items-center justify-between gap-1 h-full rounded border-[0.5px] border-custom-border-300 px-2 py-0.5 text-xs hover:bg-custom-background-80"
+                  className="flex h-full cursor-pointer items-center justify-between gap-1 rounded-sm border-[0.5px] border-strong px-2 py-0.5 text-11 hover:bg-layer-1"
                 >
                   <ParentPropertyIcon className="h-3 w-3 flex-shrink-0" />
                   <span className="whitespace-nowrap">
@@ -207,7 +212,7 @@ export const InboxIssueProperties = observer(function InboxIssueProperties(props
           ) : (
             <button
               type="button"
-              className="flex cursor-pointer items-center justify-between gap-1 h-full rounded border-[0.5px] border-custom-border-300 px-2 py-0.5 text-xs hover:bg-custom-background-80"
+              className="flex h-full cursor-pointer items-center justify-between gap-1 rounded-sm border-[0.5px] border-strong px-2 py-0.5 text-11 hover:bg-layer-1"
               onClick={() => setParentIssueModalOpen(true)}
             >
               <ParentPropertyIcon className="h-3 w-3 flex-shrink-0" />
diff --git a/apps/web/core/components/inbox/modals/create-modal/issue-title.tsx b/apps/web/core/components/inbox/modals/create-modal/issue-title.tsx
index 69b618716..49d8178fb 100644
--- a/apps/web/core/components/inbox/modals/create-modal/issue-title.tsx
+++ b/apps/web/core/components/inbox/modals/create-modal/issue-title.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 // plane imports
 import { ETabIndices } from "@plane/constants";
@@ -32,12 +37,12 @@ export const InboxIssueTitle = observer(function InboxIssueTitle(props: TInboxIs
         value={data?.name}
         onChange={(e) => handleData("name", e.target.value)}
         placeholder={t("title")}
-        className="w-full text-base"
+        className="w-full text-14"
         tabIndex={getIndex("name")}
         required
       />
       {isTitleLengthMoreThan255Character && (
-        <span className="text-xs text-red-500">{t("title_should_be_less_than_255_characters")}</span>
+        <span className="text-11 text-danger-primary">{t("title_should_be_less_than_255_characters")}</span>
       )}
     </div>
   );
diff --git a/apps/web/core/components/inbox/modals/create-modal/modal.tsx b/apps/web/core/components/inbox/modals/create-modal/modal.tsx
index 9c3eff145..85b8a14c0 100644
--- a/apps/web/core/components/inbox/modals/create-modal/modal.tsx
+++ b/apps/web/core/components/inbox/modals/create-modal/modal.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useState } from "react";
 // plane imports
 import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
@@ -33,7 +38,7 @@ export function InboxIssueCreateModalRoot(props: TInboxIssueCreateModalRoot) {
       isOpen={modalState}
       position={EModalPosition.TOP}
       width={isDuplicateModalOpen ? EModalWidth.VIXL : EModalWidth.XXXXL}
-      className="!bg-transparent rounded-lg shadow-none transition-[width] ease-linear"
+      className="rounded-lg !bg-transparent shadow-none transition-[width] ease-linear"
     >
       <InboxIssueCreateRoot
         workspaceSlug={workspaceSlug}
diff --git a/apps/web/core/components/inbox/modals/decline-issue-modal.tsx b/apps/web/core/components/inbox/modals/decline-issue-modal.tsx
index fbd3aba4d..7fe5a07af 100644
--- a/apps/web/core/components/inbox/modals/decline-issue-modal.tsx
+++ b/apps/web/core/components/inbox/modals/decline-issue-modal.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React, { useState } from "react";
 // types
 import { useTranslation } from "@plane/i18n";
@@ -45,7 +51,7 @@ export function DeclineIssueModal(props: Props) {
       content={
         <>
           Are you sure you want to decline work item{" "}
-          <span className="break-words font-medium text-custom-text-100">
+          <span className="font-medium break-words text-primary">
             {projectDetails?.identifier}-{data?.sequence_id}
           </span>
           {""}? This action cannot be undone.
diff --git a/apps/web/core/components/inbox/modals/delete-issue-modal.tsx b/apps/web/core/components/inbox/modals/delete-issue-modal.tsx
index ebdc909e8..c31bf9800 100644
--- a/apps/web/core/components/inbox/modals/delete-issue-modal.tsx
+++ b/apps/web/core/components/inbox/modals/delete-issue-modal.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React, { useState } from "react";
 import { observer } from "mobx-react";
 // types
@@ -72,7 +78,7 @@ export const DeleteInboxIssueModal = observer(function DeleteInboxIssueModal({
       content={
         <>
           Are you sure you want to delete work item{" "}
-          <span className="break-words font-medium text-custom-text-100">
+          <span className="font-medium break-words text-primary">
             {projectDetails?.identifier}-{data?.sequence_id}
           </span>
           {""}? The work item will only be deleted from the intake and this action cannot be undone.
diff --git a/apps/web/core/components/inbox/modals/select-duplicate.tsx b/apps/web/core/components/inbox/modals/select-duplicate.tsx
index 988b60446..7b6911830 100644
--- a/apps/web/core/components/inbox/modals/select-duplicate.tsx
+++ b/apps/web/core/components/inbox/modals/select-duplicate.tsx
@@ -1,13 +1,19 @@
-import React, { useEffect, useState } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useEffect, useState } from "react";
 import { useParams } from "next/navigation";
 import { useTheme } from "next-themes";
-import { Search } from "lucide-react";
-import { Combobox, Dialog, Transition } from "@headlessui/react";
+import { Combobox } from "@headlessui/react";
 // plane imports
 import { useTranslation } from "@plane/i18n";
+import { SearchIcon } from "@plane/propel/icons";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { ISearchIssueResponse } from "@plane/types";
-import { Loader } from "@plane/ui";
+import { Loader, EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
 // assets
 import darkIssuesAsset from "@/app/assets/empty-state/search/issues-dark.webp?url";
 import lightIssuesAsset from "@/app/assets/empty-state/search/issues-light.webp?url";
@@ -65,6 +71,7 @@ export function SelectDuplicateInboxIssueModal(props: Props) {
 
   const handleClose = () => {
     onClose();
+    setQuery("");
   };
 
   const handleSubmit = (selectedItem: string) => {
@@ -80,10 +87,8 @@ export function SelectDuplicateInboxIssueModal(props: Props) {
   const issueList =
     filteredIssues.length > 0 ? (
       <li className="p-2">
-        {query === "" && (
-          <h2 className="mb-2 mt-4 px-3 text-xs font-semibold text-custom-text-100">Select work item</h2>
-        )}
-        <ul className="text-sm text-custom-text-100">
+        {query === "" && <h2 className="mt-4 mb-2 px-3 text-11 font-semibold text-primary">Select work item</h2>}
+        <ul className="text-13 text-primary">
           {filteredIssues.map((issue) => {
             const stateColor = issue.state__color || "";
 
@@ -93,8 +98,8 @@ export function SelectDuplicateInboxIssueModal(props: Props) {
                 as="div"
                 value={issue.id}
                 className={({ active, selected }) =>
-                  `flex w-full cursor-pointer select-none items-center gap-2 rounded-md px-3 py-2 text-custom-text-200 ${
-                    active || selected ? "bg-custom-background-80 text-custom-text-100" : ""
+                  `flex w-full cursor-pointer items-center gap-2 rounded-md px-3 py-2 text-secondary select-none ${
+                    active || selected ? "bg-layer-1 text-primary" : ""
                   } `
                 }
               >
@@ -105,10 +110,10 @@ export function SelectDuplicateInboxIssueModal(props: Props) {
                       backgroundColor: stateColor,
                     }}
                   />
-                  <span className="flex-shrink-0 text-xs text-custom-text-200">
+                  <span className="flex-shrink-0 text-11 text-secondary">
                     {getProjectById(issue?.project_id)?.identifier}-{issue.sequence_id}
                   </span>
-                  <span className="text-custom-text-200">{issue.name}</span>
+                  <span className="text-secondary">{issue.name}</span>
                 </div>
               </Combobox.Option>
             );
@@ -126,69 +131,34 @@ export function SelectDuplicateInboxIssueModal(props: Props) {
     );
 
   return (
-    <Transition.Root show={isOpen} as={React.Fragment} afterLeave={() => setQuery("")} appear>
-      <div className="flex flex-wrap items-start">
-        <div className="space-y-1 sm:basis-1/2">
-          <Dialog as="div" className="relative z-30" onClose={handleClose}>
-            <Transition.Child
-              as={React.Fragment}
-              enter="ease-out duration-300"
-              enterFrom="opacity-0"
-              enterTo="opacity-100"
-              leave="ease-in duration-200"
-              leaveFrom="opacity-100"
-              leaveTo="opacity-0"
-            >
-              <div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
-            </Transition.Child>
-
-            <div className="fixed inset-0 z-30 overflow-y-auto p-4 sm:p-6 md:p-20">
-              <Transition.Child
-                as={React.Fragment}
-                enter="ease-out duration-300"
-                enterFrom="opacity-0 scale-95"
-                enterTo="opacity-100 scale-100"
-                leave="ease-in duration-200"
-                leaveFrom="opacity-100 scale-100"
-                leaveTo="opacity-0 scale-95"
-              >
-                <Dialog.Panel className="relative mx-auto max-w-2xl transform rounded-lg bg-custom-background-100 shadow-custom-shadow-md transition-all">
-                  <Combobox value={value} onChange={handleSubmit}>
-                    <div className="relative m-1">
-                      <Search
-                        className="pointer-events-none absolute left-4 top-3.5 h-5 w-5 text-custom-text-100 text-opacity-40"
-                        aria-hidden="true"
-                      />
-                      <input
-                        type="text"
-                        className="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-custom-text-100 outline-none focus:ring-0 sm:text-sm"
-                        placeholder="Search..."
-                        onChange={(e) => setQuery(e.target.value)}
-                      />
-                    </div>
-
-                    <Combobox.Options
-                      static
-                      className="max-h-80 scroll-py-2 divide-y divide-custom-border-200 overflow-y-auto"
-                    >
-                      {isSearching ? (
-                        <Loader className="space-y-3 p-3">
-                          <Loader.Item height="40px" />
-                          <Loader.Item height="40px" />
-                          <Loader.Item height="40px" />
-                          <Loader.Item height="40px" />
-                        </Loader>
-                      ) : (
-                        <>{issueList}</>
-                      )}
-                    </Combobox.Options>
-                  </Combobox>
-                </Dialog.Panel>
-              </Transition.Child>
-            </div>
-          </Dialog>
+    <ModalCore isOpen={isOpen} handleClose={handleClose} position={EModalPosition.CENTER} width={EModalWidth.XXL}>
+      <Combobox value={value} onChange={handleSubmit}>
+        <div className="relative m-1">
+          <SearchIcon
+            className="text-opacity-40 pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-primary"
+            aria-hidden="true"
+          />
+          <input
+            type="text"
+            className="h-12 w-full border-0 bg-transparent pr-4 pl-11 text-primary outline-none focus:ring-0 sm:text-13"
+            placeholder="Search..."
+            onChange={(e) => setQuery(e.target.value)}
+          />
         </div>
-      </div>
-    </Transition.Root>
+
+        <Combobox.Options static className="max-h-80 scroll-py-2 divide-y divide-subtle-1 overflow-y-auto">
+          {isSearching ? (
+            <Loader className="space-y-3 p-3">
+              <Loader.Item height="40px" />
+              <Loader.Item height="40px" />
+              <Loader.Item height="40px" />
+              <Loader.Item height="40px" />
+            </Loader>
+          ) : (
+            <>{issueList}</>
+          )}
+        </Combobox.Options>
+      </Combobox>
+    </ModalCore>
   );
 }
diff --git a/apps/web/core/components/inbox/modals/snooze-issue-modal.tsx b/apps/web/core/components/inbox/modals/snooze-issue-modal.tsx
index e90bfe8a8..1ad83a6b0 100644
--- a/apps/web/core/components/inbox/modals/snooze-issue-modal.tsx
+++ b/apps/web/core/components/inbox/modals/snooze-issue-modal.tsx
@@ -1,10 +1,15 @@
-import type { FC } from "react";
-import { Fragment, useState } from "react";
-import { Dialog, Transition } from "@headlessui/react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
 // ui
 import { useTranslation } from "@plane/i18n";
 import { Button } from "@plane/propel/button";
 import { Calendar } from "@plane/propel/calendar";
+import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
 
 export type InboxIssueSnoozeModalProps = {
   isOpen: boolean;
@@ -21,63 +26,40 @@ export function InboxIssueSnoozeModal(props: InboxIssueSnoozeModalProps) {
   const { t } = useTranslation();
 
   return (
-    <Transition.Root show={isOpen} as={Fragment}>
-      <Dialog as="div" className="relative z-20" onClose={handleClose}>
-        <Transition.Child
-          as={Fragment}
-          enter="ease-out duration-300"
-          enterFrom="opacity-0"
-          enterTo="opacity-100"
-          leave="ease-in duration-200"
-          leaveFrom="opacity-100"
-          leaveTo="opacity-0"
+    <ModalCore
+      isOpen={isOpen}
+      handleClose={handleClose}
+      position={EModalPosition.CENTER}
+      width={EModalWidth.SM}
+      className="w-auto"
+    >
+      <div className="flex h-full w-full flex-col gap-y-1 px-5 py-8 sm:p-6">
+        <Calendar
+          className="rounded-md border border-subtle p-3"
+          captionLayout="dropdown"
+          selected={date ? new Date(date) : undefined}
+          defaultMonth={date ? new Date(date) : undefined}
+          onSelect={(date: Date | undefined) => {
+            if (!date) return;
+            setDate(date);
+          }}
+          mode="single"
+          disabled={[
+            {
+              before: new Date(),
+            },
+          ]}
+        />
+        <Button
+          variant="primary"
+          onClick={() => {
+            handleClose();
+            onConfirm(date);
+          }}
         >
-          <div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
-        </Transition.Child>
-        <div className="fixed inset-0 z-20 flex w-full justify-center overflow-y-auto">
-          <div className="flex min-h-full items-center justify-center p-4 text-center sm:p-0">
-            <Transition.Child
-              as={Fragment}
-              enter="ease-out duration-300"
-              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-              enterTo="opacity-100 translate-y-0 sm:scale-100"
-              leave="ease-in duration-200"
-              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-            >
-              <Dialog.Panel className="relative flex transform rounded-lg bg-custom-background-100 px-5 py-8 text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
-                <div className="flex h-full w-full flex-col gap-y-1">
-                  <Calendar
-                    className="rounded-md border border-custom-border-200 p-3"
-                    captionLayout="dropdown"
-                    selected={date ? new Date(date) : undefined}
-                    defaultMonth={date ? new Date(date) : undefined}
-                    onSelect={(date: Date | undefined) => {
-                      if (!date) return;
-                      setDate(date);
-                    }}
-                    mode="single"
-                    disabled={[
-                      {
-                        before: new Date(),
-                      },
-                    ]}
-                  />
-                  <Button
-                    variant="primary"
-                    onClick={() => {
-                      close();
-                      onConfirm(date);
-                    }}
-                  >
-                    {t("inbox_issue.actions.snooze")}
-                  </Button>
-                </div>
-              </Dialog.Panel>
-            </Transition.Child>
-          </div>
-        </div>
-      </Dialog>
-    </Transition.Root>
+          {t("inbox_issue.actions.snooze")}
+        </Button>
+      </div>
+    </ModalCore>
   );
 }
diff --git a/apps/web/core/components/inbox/root.tsx b/apps/web/core/components/inbox/root.tsx
index 088fb8db2..cf2d87804 100644
--- a/apps/web/core/components/inbox/root.tsx
+++ b/apps/web/core/components/inbox/root.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useEffect, useState } from "react";
 import { observer } from "mobx-react";
 import { PanelLeft } from "lucide-react";
@@ -54,7 +60,7 @@ export const InboxIssueRoot = observer(function InboxIssueRoot(props: TInboxIssu
   // loader
   if (loader === "init-loading")
     return (
-      <div className="relative flex w-full h-full flex-col">
+      <div className="relative flex h-full w-full flex-col">
         <InboxLayoutLoader />
       </div>
     );
@@ -62,26 +68,26 @@ export const InboxIssueRoot = observer(function InboxIssueRoot(props: TInboxIssu
   // error
   if (error && error?.status === "init-error")
     return (
-      <div className="relative w-full h-full flex flex-col gap-3 justify-center items-center">
+      <div className="relative flex h-full w-full flex-col items-center justify-center gap-3">
         <IntakeIcon className="size-[60px]" strokeWidth={1.5} />
-        <div className="text-custom-text-200">{error?.message}</div>
+        <div className="text-secondary">{error?.message}</div>
       </div>
     );
 
   return (
     <>
       {!inboxIssueId && (
-        <div className="flex lg:hidden items-center px-4 w-full h-12 border-b border-custom-border-200">
+        <div className="flex h-12 w-full items-center border-b border-subtle px-4 lg:hidden">
           <PanelLeft
             onClick={() => setIsMobileSidebar(!isMobileSidebar)}
-            className={cn("w-4 h-4 ", isMobileSidebar ? "text-custom-primary-100" : " text-custom-text-200")}
+            className={cn("h-4 w-4", isMobileSidebar ? "text-accent-primary" : "text-secondary")}
           />
         </div>
       )}
-      <div className="w-full h-full flex overflow-hidden bg-custom-background-100">
+      <div className="flex h-full w-full overflow-hidden bg-surface-1">
         <div
           className={cn(
-            "absolute z-10 top-[50px] lg:!top-0 lg:!relative bg-custom-background-100 flex-shrink-0 w-full lg:w-2/6 bottom-0 transition-all",
+            "absolute top-[50px] bottom-0 z-10 w-full flex-shrink-0 bg-surface-1 transition-all lg:!relative lg:!top-0 lg:w-2/6",
             isMobileSidebar ? "translate-x-0" : "-translate-x-full lg:!translate-x-0"
           )}
         >
diff --git a/apps/web/core/components/inbox/sidebar/inbox-list-item.tsx b/apps/web/core/components/inbox/sidebar/inbox-list-item.tsx
index 8ff1a73a8..db8d4240f 100644
--- a/apps/web/core/components/inbox/sidebar/inbox-list-item.tsx
+++ b/apps/web/core/components/inbox/sidebar/inbox-list-item.tsx
@@ -1,4 +1,10 @@
-import type { FC, MouseEvent } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { MouseEvent } from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
 import { useSearchParams } from "next/navigation";
@@ -59,13 +65,13 @@ export const InboxIssueListItem = observer(function InboxIssueListItem(props: In
       >
         <Row
           className={cn(
-            `flex flex-col gap-2 relative border border-t-transparent border-l-transparent border-r-transparent border-b-custom-border-200 py-4 hover:bg-custom-primary/5 cursor-pointer transition-all`,
-            { "border-custom-primary-100 border": selectedInboxIssueId === issue.id }
+            `relative flex cursor-pointer flex-col gap-2 border border-t-transparent border-r-transparent border-b-subtle-1 border-l-transparent py-4 transition-all hover:bg-accent-primary/5`,
+            { "border border-accent-strong": selectedInboxIssueId === issue.id }
           )}
         >
           <div className="space-y-1">
             <div className="relative flex items-center justify-between gap-2">
-              <div className="flex-shrink-0 text-xs font-medium text-custom-text-300">
+              <div className="flex-shrink-0 text-11 font-medium text-tertiary">
                 {projectIdentifier}-{issue.sequence_id}
               </div>
               <div className="flex items-center gap-2">
@@ -73,7 +79,7 @@ export const InboxIssueListItem = observer(function InboxIssueListItem(props: In
                 {inboxIssue.status !== -2 && <InboxIssueStatus inboxIssue={inboxIssue} iconSize={12} />}
               </div>
             </div>
-            <h3 className="truncate w-full text-sm">{issue.name}</h3>
+            <h3 className="w-full truncate text-13">{issue.name}</h3>
           </div>
 
           <div className="flex items-center justify-between">
@@ -83,21 +89,21 @@ export const InboxIssueListItem = observer(function InboxIssueListItem(props: In
                 tooltipContent={`${renderFormattedDate(issue.created_at ?? "")}`}
                 isMobile={isMobile}
               >
-                <div className="text-xs text-custom-text-200">{renderFormattedDate(issue.created_at ?? "")}</div>
+                <div className="text-11 text-secondary">{renderFormattedDate(issue.created_at ?? "")}</div>
               </Tooltip>
 
-              <div className="border-2 rounded-full border-custom-border-400" />
+              <div className="rounded-full border-2 border-strong-1" />
 
               {issue.priority && (
                 <Tooltip tooltipHeading="Priority" tooltipContent={`${issue.priority ?? "None"}`}>
-                  <PriorityIcon priority={issue.priority} withContainer className="w-3 h-3" />
+                  <PriorityIcon priority={issue.priority} withContainer className="h-3 w-3" />
                 </Tooltip>
               )}
 
               {issue.label_ids && issue.label_ids.length > 3 ? (
-                <div className="relative !h-[17.5px] flex items-center gap-1 rounded border border-custom-border-300 px-1 text-xs">
-                  <span className="h-2 w-2 rounded-full bg-orange-400" />
-                  <span className="normal-case max-w-28 truncate">{`${issue.label_ids.length} labels`}</span>
+                <div className="relative flex !h-[17.5px] items-center gap-1 rounded-sm border border-strong px-1 text-11">
+                  <span className="bg-orange-400 h-2 w-2 rounded-full" />
+                  <span className="max-w-28 truncate normal-case">{`${issue.label_ids.length} labels`}</span>
                 </div>
               ) : (
                 <>
@@ -107,7 +113,7 @@ export const InboxIssueListItem = observer(function InboxIssueListItem(props: In
                     return (
                       <div
                         key={labelId}
-                        className="relative !h-[17.5px] flex items-center gap-1 rounded border border-custom-border-300 px-1 text-xs"
+                        className="relative flex !h-[17.5px] items-center gap-1 rounded-sm border border-strong px-1 text-11"
                       >
                         <span
                           className="h-2 w-2 rounded-full"
@@ -115,7 +121,7 @@ export const InboxIssueListItem = observer(function InboxIssueListItem(props: In
                             backgroundColor: labelDetails.color,
                           }}
                         />
-                        <span className="normal-case max-w-28 truncate">{labelDetails.name}</span>
+                        <span className="max-w-28 truncate normal-case">{labelDetails.name}</span>
                       </div>
                     );
                   })}
diff --git a/apps/web/core/components/inbox/sidebar/inbox-list.tsx b/apps/web/core/components/inbox/sidebar/inbox-list.tsx
index 7cace3d50..ee5ddd3ae 100644
--- a/apps/web/core/components/inbox/sidebar/inbox-list.tsx
+++ b/apps/web/core/components/inbox/sidebar/inbox-list.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { Fragment } from "react";
 import { observer } from "mobx-react";
 // local imports
diff --git a/apps/web/core/components/inbox/sidebar/index.ts b/apps/web/core/components/inbox/sidebar/index.ts
index 1efe34c51..d98033459 100644
--- a/apps/web/core/components/inbox/sidebar/index.ts
+++ b/apps/web/core/components/inbox/sidebar/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./root";
diff --git a/apps/web/core/components/inbox/sidebar/root.tsx b/apps/web/core/components/inbox/sidebar/root.tsx
index a19fdb6de..e378c766d 100644
--- a/apps/web/core/components/inbox/sidebar/root.tsx
+++ b/apps/web/core/components/inbox/sidebar/root.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useCallback, useEffect, useRef, useState } from "react";
 import { observer } from "mobx-react";
 import { useTranslation } from "@plane/i18n";
@@ -77,15 +83,15 @@ export const InboxSidebar = observer(function InboxSidebar(props: IInboxSidebarP
   }, [currentTab, filteredInboxIssueIds, inboxIssueId, projectId, router, workspaceSlug]);
 
   return (
-    <div className="bg-custom-background-100 flex-shrink-0 w-full h-full border-r border-custom-border-300 ">
-      <div className="relative w-full h-full flex flex-col overflow-hidden">
+    <div className="h-full w-full flex-shrink-0 border-r border-strong bg-surface-1">
+      <div className="relative flex h-full w-full flex-col overflow-hidden">
         <Header variant={EHeaderVariant.SECONDARY}>
           {tabNavigationOptions.map((option) => (
             <div
               key={option?.key}
               className={cn(
-                `text-sm relative flex items-center gap-1 h-full px-3 cursor-pointer transition-all font-medium`,
-                currentTab === option?.key ? `text-custom-primary-100` : `hover:text-custom-text-200`
+                `relative flex h-full cursor-pointer items-center gap-1 px-3 text-13 font-medium transition-all`,
+                currentTab === option?.key ? `text-accent-primary` : `hover:text-secondary`
               )}
               onClick={() => {
                 if (currentTab != option?.key) {
@@ -96,14 +102,14 @@ export const InboxSidebar = observer(function InboxSidebar(props: IInboxSidebarP
             >
               <div>{t(option?.i18n_label)}</div>
               {option?.key === "open" && currentTab === option?.key && (
-                <div className="rounded-full p-1.5 py-0.5 bg-custom-primary-100/20 text-custom-primary-100 text-xs font-semibold">
+                <div className="rounded-full bg-accent-primary/20 p-1.5 py-0.5 text-11 font-semibold text-accent-primary">
                   {inboxIssuePaginationInfo?.total_results || 0}
                 </div>
               )}
               <div
                 className={cn(
-                  `border absolute bottom-0 right-0 left-0 rounded-t-md`,
-                  currentTab === option?.key ? `border-custom-primary-100` : `border-transparent`
+                  `absolute right-0 bottom-0 left-0 rounded-t-md border`,
+                  currentTab === option?.key ? `border-accent-strong` : `border-transparent`
                 )}
               />
             </div>
@@ -118,7 +124,7 @@ export const InboxSidebar = observer(function InboxSidebar(props: IInboxSidebarP
           <InboxSidebarLoader />
         ) : (
           <div
-            className="w-full h-full overflow-hidden overflow-y-auto vertical-scrollbar scrollbar-md"
+            className="vertical-scrollbar scrollbar-md h-full w-full overflow-hidden overflow-y-auto"
             ref={containerRef}
           >
             {filteredInboxIssueIds.length > 0 ? (
@@ -130,7 +136,7 @@ export const InboxSidebar = observer(function InboxSidebar(props: IInboxSidebarP
                 inboxIssueIds={filteredInboxIssueIds}
               />
             ) : (
-              <div className="flex items-center justify-center h-full w-full">
+              <div className="flex h-full w-full items-center justify-center">
                 {getAppliedFiltersCount > 0 ? (
                   <EmptyStateDetailed
                     assetKey="search"
@@ -168,7 +174,7 @@ export const InboxSidebar = observer(function InboxSidebar(props: IInboxSidebarP
             )}
             <div ref={setElementRef}>
               {inboxIssuePaginationInfo?.next_page_results && (
-                <Loader className="mx-auto w-full space-y-4 py-4 px-2">
+                <Loader className="mx-auto w-full space-y-4 px-2 py-4">
                   <Loader.Item height="64px" width="w-100" />
                   <Loader.Item height="64px" width="w-100" />
                 </Loader>
diff --git a/apps/web/core/components/instance/index.ts b/apps/web/core/components/instance/index.ts
index 43e76eba7..0b4b6ab36 100644
--- a/apps/web/core/components/instance/index.ts
+++ b/apps/web/core/components/instance/index.ts
@@ -1,2 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./not-ready-view";
 export * from "./maintenance-view";
diff --git a/apps/web/core/components/instance/maintenance-view.tsx b/apps/web/core/components/instance/maintenance-view.tsx
index 9c88af500..eaa3bba4f 100644
--- a/apps/web/core/components/instance/maintenance-view.tsx
+++ b/apps/web/core/components/instance/maintenance-view.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useTheme } from "next-themes";
 // assets
 import maintenanceModeDarkModeImage from "@/app/assets/instance/maintenance-mode-dark.svg?url";
@@ -15,17 +20,17 @@ export function MaintenanceView() {
   const maintenanceModeImage = resolvedTheme === "dark" ? maintenanceModeDarkModeImage : maintenanceModeLightModeImage;
   return (
     <DefaultLayout>
-      <div className="relative container mx-auto h-full w-full max-w-xl flex flex-col gap-2 items-center justify-center gap-y-6 bg-custom-background-100 text-center">
+      <div className="relative container mx-auto flex h-full w-full max-w-xl flex-col items-center justify-center gap-2 gap-y-6 bg-surface-1 text-center">
         <div className="relative w-full">
           <img
             src={maintenanceModeImage}
             height="176"
             width="288"
             alt="ProjectSettingImg"
-            className="w-full h-full object-fill object-center"
+            className="h-full w-full object-fill object-center"
           />
         </div>
-        <div className="w-full relative flex flex-col gap-4 mt-4">
+        <div className="relative mt-4 flex w-full flex-col gap-4">
           <MaintenanceMessage />
         </div>
       </div>
diff --git a/apps/web/core/components/instance/not-ready-view.tsx b/apps/web/core/components/instance/not-ready-view.tsx
index e86b36470..850d0af2e 100644
--- a/apps/web/core/components/instance/not-ready-view.tsx
+++ b/apps/web/core/components/instance/not-ready-view.tsx
@@ -1,54 +1,58 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import Link from "next/link";
-import { useTheme } from "next-themes";
 import { GOD_MODE_URL } from "@plane/constants";
-import { Button } from "@plane/propel/button";
-import { PlaneLockup } from "@plane/propel/icons";
 // assets
-import PlaneBackgroundPatternDark from "@/app/assets/auth/background-pattern-dark.svg?url";
-import PlaneBackgroundPattern from "@/app/assets/auth/background-pattern.svg?url";
-import PlaneTakeOffImage from "@/app/assets/plane-takeoff.png?url";
+import GradientLogo from "@/app/assets/auth/gradient-logo.webp?url";
+import GradientBgLogo from "@/app/assets/auth/gradient-bg-logo.webp?url";
+import DefaultLayout from "@/layouts/default-layout";
+import { PlaneLockup } from "@plane/propel/icons";
+import { Button } from "@plane/propel/button";
 
 export function InstanceNotReady() {
-  const { resolvedTheme } = useTheme();
-  const patternBackground = resolvedTheme === "dark" ? PlaneBackgroundPatternDark : PlaneBackgroundPattern;
-
   return (
-    <div className="relative">
-      <div className="h-screen w-full overflow-hidden overflow-y-auto flex flex-col">
-        <div className="container h-[110px] flex-shrink-0 mx-auto px-5 lg:px-0 flex items-center justify-between gap-5 z-50">
-          <div className="flex items-center gap-x-2 py-10">
-            <Link href={`/`}>
-              <PlaneLockup className="h-7 w-auto text-custom-text-100" />
-            </Link>
+    <DefaultLayout>
+      <div className="relative z-10 flex h-screen w-screen overflow-hidden">
+        {/* Background decorations */}
+        <img
+          src={GradientBgLogo}
+          className="pointer-events-none absolute -top-24 -left-32 h-56 w-96 opacity-15"
+          alt=""
+          aria-hidden="true"
+        />
+        <img
+          src={GradientBgLogo}
+          className="pointer-events-none absolute -right-20 -bottom-16 h-56 w-96 opacity-15"
+          alt=""
+          aria-hidden="true"
+        />
+        {/* Main content */}
+        <div className="flex h-full w-full flex-col items-center px-8 pt-6 pb-10">
+          <div className="sticky top-0 flex w-full shrink-0 items-center justify-between gap-6">
+            <PlaneLockup height={20} width={95} className="text-primary" />
           </div>
-        </div>
-
-        <div className="absolute inset-0 z-0">
-          <img src={patternBackground} className="w-full h-full object-cover" alt="Plane background pattern" />
-        </div>
-
-        <div className="relative z-10 mb-[110px] flex-grow">
-          <div className="h-full w-full relative container px-5 mx-auto flex justify-center items-center">
-            <div className="w-auto max-w-2xl relative space-y-8 py-10">
-              <div className="relative flex flex-col justify-center items-center space-y-4">
-                <h1 className="text-3xl font-bold pb-3">Welcome aboard Plane!</h1>
-                <img src={PlaneTakeOffImage} className="object-contain" alt="Plane Logo" />
-                <p className="font-medium text-base text-custom-text-400">
-                  Get started by setting up your instance and workspace
+          <div className="flex h-full w-full flex-col items-center justify-center gap-7">
+            <div className="flex flex-col items-center gap-11">
+              <img src={GradientLogo} className="h-24 w-40 object-contain" alt="Plane Logo" />
+              <div className="flex max-w-124 flex-col items-center gap-3">
+                <h1 className="text-h2-semibold text-primary">Welcome to Plane</h1>
+                <p className="text-center text-body-md-regular text-secondary">
+                  Set up your instance and create your first workspace to begin managing projects and work.
                 </p>
               </div>
-              <div>
-                <a href={GOD_MODE_URL}>
-                  <Button size="lg" className="w-full">
-                    Get started
-                  </Button>
-                </a>
-              </div>
             </div>
+            <a href={GOD_MODE_URL} className="w-72">
+              <Button variant="primary" className="w-full" size="xl">
+                Get started
+              </Button>
+            </a>
           </div>
         </div>
       </div>
-    </div>
+    </DefaultLayout>
   );
 }
diff --git a/apps/web/core/components/integration/delete-import-modal.tsx b/apps/web/core/components/integration/delete-import-modal.tsx
deleted file mode 100644
index 0040de07f..000000000
--- a/apps/web/core/components/integration/delete-import-modal.tsx
+++ /dev/null
@@ -1,148 +0,0 @@
-import React, { useState } from "react";
-
-import { useParams } from "next/navigation";
-
-import { mutate } from "swr";
-
-// headless ui
-import { AlertTriangle } from "lucide-react";
-import { Dialog, Transition } from "@headlessui/react";
-// services
-import { Button } from "@plane/propel/button";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
-import type { IUser, IImporterService } from "@plane/types";
-import { Input } from "@plane/ui";
-import { IMPORTER_SERVICES_LIST } from "@/constants/fetch-keys";
-import { IntegrationService } from "@/services/integrations/integration.service";
-// ui
-// icons
-// types
-// fetch-keys
-
-type Props = {
-  isOpen: boolean;
-  handleClose: () => void;
-  data: IImporterService | null;
-  user: IUser | null;
-};
-
-// services
-const integrationService = new IntegrationService();
-
-export function DeleteImportModal({ isOpen, handleClose, data }: Props) {
-  const [deleteLoading, setDeleteLoading] = useState(false);
-  const [confirmDeleteImport, setConfirmDeleteImport] = useState(false);
-
-  const { workspaceSlug } = useParams();
-
-  const handleDeletion = () => {
-    if (!workspaceSlug || !data) return;
-
-    setDeleteLoading(true);
-
-    mutate<IImporterService[]>(
-      IMPORTER_SERVICES_LIST(workspaceSlug),
-      (prevData) => (prevData ?? []).filter((i) => i.id !== data.id),
-      false
-    );
-
-    integrationService
-      .deleteImporterService(workspaceSlug, data.service, data.id)
-      .catch(() =>
-        setToast({
-          type: TOAST_TYPE.ERROR,
-          title: "Error!",
-          message: "Something went wrong. Please try again.",
-        })
-      )
-      .finally(() => {
-        setDeleteLoading(false);
-        handleClose();
-      });
-  };
-
-  if (!data) return <></>;
-
-  return (
-    <Transition.Root show={isOpen} as={React.Fragment}>
-      <Dialog as="div" className="relative z-20" onClose={handleClose}>
-        <Transition.Child
-          as={React.Fragment}
-          enter="ease-out duration-300"
-          enterFrom="opacity-0"
-          enterTo="opacity-100"
-          leave="ease-in duration-200"
-          leaveFrom="opacity-100"
-          leaveTo="opacity-0"
-        >
-          <div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
-        </Transition.Child>
-
-        <div className="fixed inset-0 z-20 overflow-y-auto">
-          <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
-            <Transition.Child
-              as={React.Fragment}
-              enter="ease-out duration-300"
-              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-              enterTo="opacity-100 translate-y-0 sm:scale-100"
-              leave="ease-in duration-200"
-              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-            >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-custom-background-100 text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-full sm:max-w-2xl">
-                <div className="flex flex-col gap-6 p-6">
-                  <div className="flex w-full items-center justify-start gap-6">
-                    <span className="place-items-center rounded-full bg-red-500/20 p-4">
-                      <AlertTriangle className="h-6 w-6 text-red-500" aria-hidden="true" />
-                    </span>
-                    <span className="flex items-center justify-start">
-                      <h3 className="text-xl font-medium 2xl:text-2xl">Delete project</h3>
-                    </span>
-                  </div>
-                  <span>
-                    <p className="text-sm leading-7 text-custom-text-200">
-                      Are you sure you want to delete import from{" "}
-                      <span className="break-words font-semibold capitalize text-custom-text-100">{data?.service}</span>
-                      ? All of the data related to the import will be permanently removed. This action cannot be undone.
-                    </p>
-                  </span>
-                  <div>
-                    <p className="text-sm text-custom-text-200">
-                      To confirm, type <span className="font-medium text-custom-text-100">delete import</span> below:
-                    </p>
-                    <Input
-                      id="typeDelete"
-                      type="text"
-                      name="typeDelete"
-                      onChange={(e) => {
-                        if (e.target.value === "delete import") setConfirmDeleteImport(true);
-                        else setConfirmDeleteImport(false);
-                      }}
-                      placeholder="Enter 'delete import'"
-                      className="mt-2 w-full"
-                    />
-                  </div>
-                  <div className="flex justify-end gap-2">
-                    <Button variant="neutral-primary" size="sm" onClick={handleClose}>
-                      Cancel
-                    </Button>
-                    <Button
-                      variant="danger"
-                      size="sm"
-                      tabIndex={1}
-                      onClick={handleDeletion}
-                      disabled={!confirmDeleteImport}
-                      loading={deleteLoading}
-                    >
-                      {deleteLoading ? "Deleting..." : "Delete Project"}
-                    </Button>
-                  </div>
-                </div>
-              </Dialog.Panel>
-            </Transition.Child>
-          </div>
-        </div>
-      </Dialog>
-    </Transition.Root>
-  );
-}
diff --git a/apps/web/core/components/integration/github/auth.tsx b/apps/web/core/components/integration/github/auth.tsx
deleted file mode 100644
index 60ed2e35f..000000000
--- a/apps/web/core/components/integration/github/auth.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import { observer } from "mobx-react";
-// types
-import { Button } from "@plane/propel/button";
-import type { IWorkspaceIntegration } from "@plane/types";
-// ui
-// hooks
-import { useInstance } from "@/hooks/store/use-instance";
-import useIntegrationPopup from "@/hooks/use-integration-popup";
-
-type Props = {
-  workspaceIntegration: false | IWorkspaceIntegration | undefined;
-  provider: string | undefined;
-};
-
-export const GithubAuth = observer(function GithubAuth({ workspaceIntegration, provider }: Props) {
-  // store hooks
-  const { config } = useInstance();
-  // hooks
-  const { startAuth, isConnecting } = useIntegrationPopup({
-    provider,
-    github_app_name: config?.github_app_name || "",
-    slack_client_id: config?.slack_client_id || "",
-  });
-
-  return (
-    <div>
-      {workspaceIntegration && workspaceIntegration?.id ? (
-        <Button variant="primary" disabled>
-          Successfully Connected
-        </Button>
-      ) : (
-        <Button variant="primary" onClick={startAuth} loading={isConnecting}>
-          {isConnecting ? "Connecting..." : "Connect"}
-        </Button>
-      )}
-    </div>
-  );
-});
diff --git a/apps/web/core/components/integration/github/import-configure.tsx b/apps/web/core/components/integration/github/import-configure.tsx
deleted file mode 100644
index c12d60b5f..000000000
--- a/apps/web/core/components/integration/github/import-configure.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-// components
-import { Button } from "@plane/propel/button";
-import type { IAppIntegration, IWorkspaceIntegration } from "@plane/types";
-import type { TIntegrationSteps } from "@/components/integration";
-import { GithubAuth } from "@/components/integration";
-// types
-
-type Props = {
-  provider: string | undefined;
-  handleStepChange: (value: TIntegrationSteps) => void;
-  appIntegrations: IAppIntegration[] | undefined;
-  workspaceIntegrations: IWorkspaceIntegration[] | undefined;
-};
-
-export function GithubImportConfigure({ handleStepChange, provider, appIntegrations, workspaceIntegrations }: Props) {
-  // current integration from all the integrations available
-  const integration =
-    appIntegrations && appIntegrations.length > 0 && appIntegrations.find((i) => i.provider === provider);
-
-  // current integration from workspace integrations
-  const workspaceIntegration =
-    integration &&
-    workspaceIntegrations &&
-    workspaceIntegrations.length > 0 &&
-    workspaceIntegrations.find((i: any) => i.integration_detail.id === integration.id);
-
-  return (
-    <div className="space-y-6">
-      <div className="flex items-center gap-2 py-5">
-        <div className="w-full">
-          <div className="font-medium">Configure</div>
-          <div className="text-sm text-custom-text-200">Set up your GitHub import.</div>
-        </div>
-        <div className="flex-shrink-0">
-          <GithubAuth workspaceIntegration={workspaceIntegration} provider={provider} />
-        </div>
-      </div>
-
-      <div className="flex items-center justify-end">
-        <Button
-          variant="primary"
-          onClick={() => handleStepChange("import-data")}
-          disabled={workspaceIntegration && workspaceIntegration?.id ? false : true}
-        >
-          Next
-        </Button>
-      </div>
-    </div>
-  );
-}
diff --git a/apps/web/core/components/integration/github/import-confirm.tsx b/apps/web/core/components/integration/github/import-confirm.tsx
deleted file mode 100644
index 8eb89eadf..000000000
--- a/apps/web/core/components/integration/github/import-confirm.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import type { FC } from "react";
-
-// react-hook-form
-import type { UseFormWatch } from "react-hook-form";
-// ui
-import { Button } from "@plane/propel/button";
-// types
-import type { TFormValues, TIntegrationSteps } from "@/components/integration";
-
-type Props = {
-  handleStepChange: (value: TIntegrationSteps) => void;
-  watch: UseFormWatch<TFormValues>;
-};
-
-export function GithubImportConfirm({ handleStepChange, watch }: Props) {
-  return (
-    <div className="mt-6">
-      <h4 className="font-medium text-custom-text-200">
-        You are about to import work items from {watch("github").full_name}. Click on {'"'}Confirm & Import{'" '}
-        to complete the process.
-      </h4>
-      <div className="mt-6 flex items-center justify-between">
-        <Button variant="neutral-primary" onClick={() => handleStepChange("import-users")}>
-          Back
-        </Button>
-        <Button variant="primary" type="submit">
-          Confirm & Import
-        </Button>
-      </div>
-    </div>
-  );
-}
diff --git a/apps/web/core/components/integration/github/import-data.tsx b/apps/web/core/components/integration/github/import-data.tsx
deleted file mode 100644
index 49de9edb9..000000000
--- a/apps/web/core/components/integration/github/import-data.tsx
+++ /dev/null
@@ -1,125 +0,0 @@
-import type { FC } from "react";
-import { observer } from "mobx-react";
-import type { Control, UseFormWatch } from "react-hook-form";
-import { Controller } from "react-hook-form";
-import { Button } from "@plane/propel/button";
-import type { IWorkspaceIntegration } from "@plane/types";
-// hooks
-// components
-import { CustomSearchSelect, ToggleSwitch } from "@plane/ui";
-import { truncateText } from "@plane/utils";
-import type { TFormValues, TIntegrationSteps } from "@/components/integration";
-import { SelectRepository } from "@/components/integration";
-// ui
-// helpers
-import { useProject } from "@/hooks/store/use-project";
-// types
-
-type Props = {
-  handleStepChange: (value: TIntegrationSteps) => void;
-  integration: IWorkspaceIntegration | false | undefined;
-  control: Control<TFormValues, any>;
-  watch: UseFormWatch<TFormValues>;
-};
-
-export const GithubImportData = observer(function GithubImportData(props: Props) {
-  const { handleStepChange, integration, control, watch } = props;
-  // store hooks
-  const { workspaceProjectIds, getProjectById } = useProject();
-
-  const options = workspaceProjectIds?.map((projectId) => {
-    const projectDetails = getProjectById(projectId);
-
-    return {
-      value: `${projectDetails?.id}`,
-      query: `${projectDetails?.name}`,
-      content: <p>{truncateText(projectDetails?.name ?? "", 25)}</p>,
-    };
-  });
-
-  return (
-    <div className="mt-6">
-      <div className="space-y-8">
-        <div className="grid grid-cols-12 gap-4 sm:gap-16">
-          <div className="col-span-12 sm:col-span-8">
-            <h4 className="font-semibold">Select Repository</h4>
-            <p className="text-xs text-custom-text-200">
-              Select the repository that you want the work items to be imported from.
-            </p>
-          </div>
-          <div className="col-span-12 sm:col-span-4">
-            {integration && (
-              <Controller
-                control={control}
-                name="github"
-                render={({ field: { value, onChange } }) => (
-                  <SelectRepository
-                    integration={integration}
-                    value={value ? value.id : null}
-                    label={
-                      value ? `${value.full_name}` : <span className="text-custom-text-200">Select Repository</span>
-                    }
-                    onChange={onChange}
-                    characterLimit={50}
-                  />
-                )}
-              />
-            )}
-          </div>
-        </div>
-        <div className="grid grid-cols-12 gap-4 sm:gap-16">
-          <div className="col-span-12 sm:col-span-8">
-            <h4 className="font-semibold">Select Project</h4>
-            <p className="text-xs text-custom-text-200">Select the project to import the work item to.</p>
-          </div>
-          <div className="col-span-12 sm:col-span-4">
-            {workspaceProjectIds && (
-              <Controller
-                control={control}
-                name="project"
-                render={({ field: { value, onChange } }) => (
-                  <CustomSearchSelect
-                    value={value}
-                    label={
-                      value ? getProjectById(value)?.name : <span className="text-custom-text-200">Select Project</span>
-                    }
-                    onChange={onChange}
-                    options={options}
-                    optionsClassName="w-48"
-                  />
-                )}
-              />
-            )}
-          </div>
-        </div>
-        <div className="grid grid-cols-12 gap-4 sm:gap-16">
-          <div className="col-span-12 sm:col-span-8">
-            <h4 className="font-semibold">Sync work item</h4>
-            <p className="text-xs text-custom-text-200">Set whether you want to sync the work items or not.</p>
-          </div>
-          <div className="col-span-12 sm:col-span-4">
-            <Controller
-              control={control}
-              name="sync"
-              render={({ field: { value, onChange } }) => (
-                <ToggleSwitch value={value} onChange={() => onChange(!value)} />
-              )}
-            />
-          </div>
-        </div>
-      </div>
-      <div className="mt-6 flex items-center justify-end gap-2">
-        <Button variant="neutral-primary" onClick={() => handleStepChange("import-configure")}>
-          Back
-        </Button>
-        <Button
-          variant="primary"
-          onClick={() => handleStepChange("repo-details")}
-          disabled={!watch("github") || !watch("project")}
-        >
-          Next
-        </Button>
-      </div>
-    </div>
-  );
-});
diff --git a/apps/web/core/components/integration/github/import-users.tsx b/apps/web/core/components/integration/github/import-users.tsx
deleted file mode 100644
index 9c3012e55..000000000
--- a/apps/web/core/components/integration/github/import-users.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import type { FC } from "react";
-
-// react-hook-form
-import type { UseFormWatch } from "react-hook-form";
-// ui
-import { Button } from "@plane/propel/button";
-// types
-import type { IUserDetails, TFormValues, TIntegrationSteps } from "@/components/integration";
-import { SingleUserSelect } from "@/components/integration";
-
-type Props = {
-  handleStepChange: (value: TIntegrationSteps) => void;
-  users: IUserDetails[];
-  setUsers: React.Dispatch<React.SetStateAction<IUserDetails[]>>;
-  watch: UseFormWatch<TFormValues>;
-};
-
-export function GithubImportUsers({ handleStepChange, users, setUsers, watch }: Props) {
-  const isInvalid = users.filter((u) => u.import !== false && u.email === "").length > 0;
-
-  return (
-    <div className="mt-6">
-      <div>
-        <div className="mb-2 grid grid-cols-3 gap-2 text-sm font-medium">
-          <div className="text-custom-text-200">Name</div>
-          <div className="text-custom-text-200">Import as...</div>
-          <div className="text-right">{users.filter((u) => u.import !== false).length} users selected</div>
-        </div>
-        <div className="space-y-2">
-          {watch("collaborators").map((collaborator, index) => (
-            <SingleUserSelect
-              key={collaborator.id}
-              collaborator={collaborator}
-              index={index}
-              users={users}
-              setUsers={setUsers}
-            />
-          ))}
-        </div>
-      </div>
-      <div className="mt-6 flex items-center justify-end gap-2">
-        <Button variant="neutral-primary" onClick={() => handleStepChange("repo-details")}>
-          Back
-        </Button>
-        <Button variant="primary" onClick={() => handleStepChange("import-confirm")} disabled={isInvalid}>
-          Next
-        </Button>
-      </div>
-    </div>
-  );
-}
diff --git a/apps/web/core/components/integration/github/index.ts b/apps/web/core/components/integration/github/index.ts
deleted file mode 100644
index c215e9a0c..000000000
--- a/apps/web/core/components/integration/github/index.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-export * from "./auth";
-export * from "./import-configure";
-export * from "./import-confirm";
-export * from "./import-data";
-export * from "./import-users";
-export * from "./repo-details";
-export * from "./root";
-export * from "./select-repository";
-export * from "./single-user-select";
diff --git a/apps/web/core/components/integration/github/repo-details.tsx b/apps/web/core/components/integration/github/repo-details.tsx
deleted file mode 100644
index f1d6a1400..000000000
--- a/apps/web/core/components/integration/github/repo-details.tsx
+++ /dev/null
@@ -1,104 +0,0 @@
-import type { FC } from "react";
-import { useEffect } from "react";
-
-import { useParams } from "next/navigation";
-
-// react-hook-form
-import type { UseFormSetValue } from "react-hook-form";
-import useSWR from "swr";
-// services
-// ui
-import { Button } from "@plane/propel/button";
-import { Loader } from "@plane/ui";
-// types
-import type { IUserDetails, TFormValues, TIntegrationSteps } from "@/components/integration";
-// fetch-keys
-import { GITHUB_REPOSITORY_INFO } from "@/constants/fetch-keys";
-import { GithubIntegrationService } from "@/services/integrations";
-
-type Props = {
-  selectedRepo: any;
-  handleStepChange: (value: TIntegrationSteps) => void;
-  setUsers: React.Dispatch<React.SetStateAction<IUserDetails[]>>;
-  setValue: UseFormSetValue<TFormValues>;
-};
-
-// services
-const githubIntegrationService = new GithubIntegrationService();
-
-export function GithubRepoDetails({ selectedRepo, handleStepChange, setUsers, setValue }: Props) {
-  const { workspaceSlug } = useParams();
-
-  const { data: repoInfo } = useSWR(
-    workspaceSlug && selectedRepo ? GITHUB_REPOSITORY_INFO(workspaceSlug, selectedRepo.name) : null,
-    workspaceSlug && selectedRepo
-      ? () =>
-          githubIntegrationService.getGithubRepoInfo(workspaceSlug, {
-            owner: selectedRepo.owner.login,
-            repo: selectedRepo.name,
-          })
-      : null
-  );
-
-  useEffect(() => {
-    if (!repoInfo) return;
-
-    setValue("collaborators", repoInfo.collaborators);
-
-    const fetchedUsers = repoInfo.collaborators.map((collaborator) => ({
-      username: collaborator.login,
-      import: "map",
-      email: "",
-    }));
-    setUsers(fetchedUsers);
-  }, [repoInfo, setUsers, setValue]);
-
-  return (
-    <div className="mt-6">
-      {repoInfo ? (
-        repoInfo.issue_count > 0 ? (
-          <div className="flex items-center justify-between gap-4">
-            <div>
-              <div className="font-medium">Repository Details</div>
-              <div className="text-sm text-custom-text-200">Import completed. We have found:</div>
-            </div>
-            <div className="mt-4 flex gap-16">
-              <div className="flex-shrink-0 text-center">
-                <p className="text-3xl font-bold">{repoInfo.issue_count}</p>
-                <h6 className="text-sm text-custom-text-200">Work items</h6>
-              </div>
-              <div className="flex-shrink-0 text-center">
-                <p className="text-3xl font-bold">{repoInfo.labels}</p>
-                <h6 className="text-sm text-custom-text-200">Labels</h6>
-              </div>
-              <div className="flex-shrink-0 text-center">
-                <p className="text-3xl font-bold">{repoInfo.collaborators.length}</p>
-                <h6 className="text-sm text-custom-text-200">Users</h6>
-              </div>
-            </div>
-          </div>
-        ) : (
-          <div>
-            <h5>We didn{"'"}t find any work item in this repository.</h5>
-          </div>
-        )
-      ) : (
-        <Loader>
-          <Loader.Item height="70px" />
-        </Loader>
-      )}
-      <div className="mt-6 flex items-center justify-end gap-2">
-        <Button variant="neutral-primary" onClick={() => handleStepChange("import-data")}>
-          Back
-        </Button>
-        <Button
-          variant="primary"
-          onClick={() => handleStepChange("import-users")}
-          disabled={!repoInfo || repoInfo.issue_count === 0}
-        >
-          Next
-        </Button>
-      </div>
-    </div>
-  );
-}
diff --git a/apps/web/core/components/integration/github/root.tsx b/apps/web/core/components/integration/github/root.tsx
deleted file mode 100644
index dec909b64..000000000
--- a/apps/web/core/components/integration/github/root.tsx
+++ /dev/null
@@ -1,246 +0,0 @@
-import React, { useState } from "react";
-import Link from "next/link";
-import { useParams, useSearchParams } from "next/navigation";
-import { useForm } from "react-hook-form";
-import useSWR, { mutate } from "swr";
-import { ArrowLeft, Check, List, Settings, UploadCloud } from "lucide-react";
-import { MembersPropertyIcon } from "@plane/propel/icons";
-// types
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
-import type { IGithubRepoCollaborator, IGithubServiceImportFormData } from "@plane/types";
-// assets
-import GithubLogo from "@/app/assets/services/github.png?url";
-// components
-import {
-  GithubImportConfigure,
-  GithubImportData,
-  GithubRepoDetails,
-  GithubImportUsers,
-  GithubImportConfirm,
-} from "@/components/integration";
-// fetch keys
-import { APP_INTEGRATIONS, IMPORTER_SERVICES_LIST, WORKSPACE_INTEGRATIONS } from "@/constants/fetch-keys";
-// hooks
-import { useAppRouter } from "@/hooks/use-app-router";
-// services
-import { IntegrationService, GithubIntegrationService } from "@/services/integrations";
-
-export type TIntegrationSteps = "import-configure" | "import-data" | "repo-details" | "import-users" | "import-confirm";
-export interface IIntegrationData {
-  state: TIntegrationSteps;
-}
-
-export interface IUserDetails {
-  username: string;
-  import: any;
-  email: string;
-}
-
-export type TFormValues = {
-  github: any;
-  project: string | null;
-  sync: boolean;
-  collaborators: IGithubRepoCollaborator[];
-  users: IUserDetails[];
-};
-
-const defaultFormValues = {
-  github: null,
-  project: null,
-  sync: false,
-};
-
-const integrationWorkflowData = [
-  {
-    title: "Configure",
-    key: "import-configure",
-    icon: Settings,
-  },
-  {
-    title: "Import Data",
-    key: "import-data",
-    icon: UploadCloud,
-  },
-  { title: "Work item", key: "repo-details", icon: List },
-  {
-    title: "Users",
-    key: "import-users",
-    icon: MembersPropertyIcon,
-  },
-  {
-    title: "Confirm",
-    key: "import-confirm",
-    icon: Check,
-  },
-];
-
-// services
-const integrationService = new IntegrationService();
-const githubIntegrationService = new GithubIntegrationService();
-
-export function GithubImporterRoot() {
-  const [currentStep, setCurrentStep] = useState<IIntegrationData>({
-    state: "import-configure",
-  });
-  const [users, setUsers] = useState<IUserDetails[]>([]);
-
-  const router = useAppRouter();
-  const { workspaceSlug } = useParams();
-  const searchParams = useSearchParams();
-  const provider = searchParams.get("provider");
-
-  const { handleSubmit, control, setValue, watch } = useForm<TFormValues>({
-    defaultValues: defaultFormValues,
-  });
-
-  const { data: appIntegrations } = useSWR(APP_INTEGRATIONS, () => integrationService.getAppIntegrationsList());
-
-  const { data: workspaceIntegrations } = useSWR(
-    workspaceSlug ? WORKSPACE_INTEGRATIONS(workspaceSlug) : null,
-    workspaceSlug ? () => integrationService.getWorkspaceIntegrationsList(workspaceSlug) : null
-  );
-
-  const activeIntegrationState = () => {
-    const currentElementIndex = integrationWorkflowData.findIndex((i) => i?.key === currentStep?.state);
-
-    return currentElementIndex;
-  };
-
-  const handleStepChange = (value: TIntegrationSteps) => {
-    setCurrentStep((prevData) => ({ ...prevData, state: value }));
-  };
-
-  // current integration from all the integrations available
-  const integration =
-    appIntegrations && appIntegrations.length > 0 && appIntegrations.find((i) => i.provider === provider);
-
-  // current integration from workspace integrations
-  const workspaceIntegration =
-    integration && workspaceIntegrations?.find((i: any) => i.integration_detail.id === integration.id);
-
-  const createGithubImporterService = async (formData: TFormValues) => {
-    if (!formData.github || !formData.project) return;
-
-    const payload: IGithubServiceImportFormData = {
-      metadata: {
-        owner: formData.github.owner.login,
-        name: formData.github.name,
-        repository_id: formData.github.id,
-        url: formData.github.html_url,
-      },
-      data: {
-        users: users,
-      },
-      config: {
-        sync: formData.sync,
-      },
-      project_id: formData.project,
-    };
-
-    await githubIntegrationService
-      .createGithubServiceImport(workspaceSlug, payload)
-      .then(() => {
-        router.push(`/${workspaceSlug}/settings/imports`);
-        mutate(IMPORTER_SERVICES_LIST(workspaceSlug));
-      })
-      .catch(() =>
-        setToast({
-          type: TOAST_TYPE.ERROR,
-          title: "Error!",
-          message: "Import was unsuccessful. Please try again.",
-        })
-      );
-  };
-
-  return (
-    <form onSubmit={handleSubmit(createGithubImporterService)}>
-      <div className="mt-4 space-y-2">
-        <Link href={`/${workspaceSlug}/settings/imports`}>
-          <span className="inline-flex cursor-pointer items-center gap-2 text-sm font-medium text-custom-text-200 hover:text-custom-text-100">
-            <ArrowLeft className="h-3 w-3" />
-            <div>Cancel import & go back</div>
-          </span>
-        </Link>
-
-        <div className="space-y-4 rounded-[10px] border border-custom-border-200 bg-custom-background-100 p-4">
-          <div className="flex items-center gap-2">
-            <div className="h-10 w-10 flex-shrink-0">
-              <img src={GithubLogo} className="w-full h-full object-cover" alt="GitHubLogo" />
-            </div>
-            <div className="flex h-full w-full items-center justify-center">
-              {integrationWorkflowData.map((integration, index) => (
-                <React.Fragment key={integration.key}>
-                  <div
-                    className={`flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full border ${
-                      index <= activeIntegrationState()
-                        ? `border-custom-primary bg-custom-primary ${
-                            index === activeIntegrationState()
-                              ? "border-opacity-100 bg-opacity-100"
-                              : "border-opacity-80 bg-opacity-80"
-                          }`
-                        : "border-custom-border-200"
-                    }`}
-                  >
-                    <integration.icon
-                      className={`h-5 w-5 ${index <= activeIntegrationState() ? "text-white" : "text-custom-text-400"}`}
-                    />
-                  </div>
-                  {index < integrationWorkflowData.length - 1 && (
-                    <div
-                      key={index}
-                      className={`border-b px-7 ${
-                        index <= activeIntegrationState() - 1 ? `border-custom-primary` : `border-custom-border-200`
-                      }`}
-                    >
-                      {" "}
-                    </div>
-                  )}
-                </React.Fragment>
-              ))}
-            </div>
-          </div>
-
-          <div className="relative w-full space-y-4">
-            <div className="w-full">
-              {currentStep?.state === "import-configure" && (
-                <GithubImportConfigure
-                  handleStepChange={handleStepChange}
-                  provider={provider as string}
-                  appIntegrations={appIntegrations}
-                  workspaceIntegrations={workspaceIntegrations}
-                />
-              )}
-              {currentStep?.state === "import-data" && (
-                <GithubImportData
-                  handleStepChange={handleStepChange}
-                  integration={workspaceIntegration}
-                  control={control}
-                  watch={watch}
-                />
-              )}
-              {currentStep?.state === "repo-details" && (
-                <GithubRepoDetails
-                  selectedRepo={watch("github")}
-                  handleStepChange={handleStepChange}
-                  setUsers={setUsers}
-                  setValue={setValue}
-                />
-              )}
-              {currentStep?.state === "import-users" && (
-                <GithubImportUsers
-                  handleStepChange={handleStepChange}
-                  users={users}
-                  setUsers={setUsers}
-                  watch={watch}
-                />
-              )}
-              {currentStep?.state === "import-confirm" && (
-                <GithubImportConfirm handleStepChange={handleStepChange} watch={watch} />
-              )}
-            </div>
-          </div>
-        </div>
-      </div>
-    </form>
-  );
-}
diff --git a/apps/web/core/components/integration/github/select-repository.tsx b/apps/web/core/components/integration/github/select-repository.tsx
index 2681cd062..bcfa001a9 100644
--- a/apps/web/core/components/integration/github/select-repository.tsx
+++ b/apps/web/core/components/integration/github/select-repository.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 import { useParams } from "next/navigation";
 import useSWRInfinite from "swr/infinite";
@@ -70,7 +76,7 @@ export function SelectRepository(props: Props) {
           {userRepositories && options.length < totalCount && (
             <button
               type="button"
-              className="w-full p-1 text-center text-[0.6rem] text-custom-text-200 hover:bg-custom-background-80"
+              className="w-full p-1 text-center text-10 text-secondary hover:bg-layer-1"
               onClick={() => setSize(size + 1)}
               disabled={isValidating}
             >
diff --git a/apps/web/core/components/integration/github/single-user-select.tsx b/apps/web/core/components/integration/github/single-user-select.tsx
deleted file mode 100644
index d42419071..000000000
--- a/apps/web/core/components/integration/github/single-user-select.tsx
+++ /dev/null
@@ -1,132 +0,0 @@
-import { useParams } from "next/navigation";
-import useSWR from "swr";
-// plane types
-import type { IGithubRepoCollaborator } from "@plane/types";
-// plane ui
-import { Avatar, CustomSelect, CustomSearchSelect, Input } from "@plane/ui";
-// constants
-import { getFileURL } from "@plane/utils";
-import { WORKSPACE_MEMBERS } from "@/constants/fetch-keys";
-// helpers
-// plane web services
-import { WorkspaceService } from "@/plane-web/services";
-// types
-import type { IUserDetails } from "./root";
-
-type Props = {
-  collaborator: IGithubRepoCollaborator;
-  index: number;
-  users: IUserDetails[];
-  setUsers: React.Dispatch<React.SetStateAction<IUserDetails[]>>;
-};
-
-const importOptions = [
-  {
-    key: "map",
-    label: "Map to existing",
-  },
-  {
-    key: "invite",
-    label: "Invite by email",
-  },
-  {
-    key: false,
-    label: "Do not import",
-  },
-];
-
-// services
-const workspaceService = new WorkspaceService();
-
-export function SingleUserSelect({ collaborator, index, users, setUsers }: Props) {
-  const { workspaceSlug } = useParams();
-
-  const { data: members } = useSWR(
-    workspaceSlug ? WORKSPACE_MEMBERS(workspaceSlug.toString()) : null,
-    workspaceSlug ? () => workspaceService.fetchWorkspaceMembers(workspaceSlug.toString()) : null
-  );
-
-  const options = members
-    ?.map((member) => {
-      if (!member?.member) return;
-      return {
-        value: member.member?.display_name,
-        query: member.member?.display_name ?? "",
-        content: (
-          <div className="flex items-center gap-2">
-            <Avatar name={member?.member?.display_name} src={getFileURL(member?.member?.avatar_url)} />
-            {member.member?.display_name}
-          </div>
-        ),
-      };
-    })
-    .filter((member) => !!member) as
-    | {
-        value: string;
-        query: string;
-        content: React.ReactNode;
-      }[]
-    | undefined;
-
-  return (
-    <div className="grid grid-cols-3 items-center gap-2 rounded-md bg-custom-background-80 px-2 py-3">
-      <div className="flex items-center gap-2">
-        <div className="relative h-8 w-8 flex-shrink-0 rounded">
-          <img
-            src={collaborator.avatar_url}
-            className="absolute left-0 top-0 h-full w-full rounded object-cover"
-            alt={`${collaborator.login} GitHub user`}
-          />
-        </div>
-        <p className="text-sm">{collaborator.login}</p>
-      </div>
-      <div>
-        <CustomSelect
-          value={users[index].import}
-          label={<div className="text-xs">{importOptions.find((o) => o.key === users[index].import)?.label}</div>}
-          onChange={(val: any) => {
-            const newUsers = [...users];
-            newUsers[index].import = val;
-            newUsers[index].email = "";
-            setUsers(newUsers);
-          }}
-          noChevron
-        >
-          {importOptions.map((option) => (
-            <CustomSelect.Option key={option.label} value={option.key}>
-              <div>{option.label}</div>
-            </CustomSelect.Option>
-          ))}
-        </CustomSelect>
-      </div>
-      {users[index].import === "invite" && (
-        <Input
-          id="email"
-          type="email"
-          name={`userEmail${index}`}
-          value={users[index].email}
-          onChange={(e) => {
-            const newUsers = [...users];
-            newUsers[index].email = e.target.value;
-            setUsers(newUsers);
-          }}
-          placeholder="Enter email of the user"
-          className="w-full py-1 text-xs"
-        />
-      )}
-      {users[index].import === "map" && members && (
-        <CustomSearchSelect
-          value={users[index].email}
-          label={users[index].email !== "" ? users[index].email : "Select user from project"}
-          options={options}
-          onChange={(val: string) => {
-            const newUsers = [...users];
-            newUsers[index].email = val;
-            setUsers(newUsers);
-          }}
-          optionsClassName="w-48"
-        />
-      )}
-    </div>
-  );
-}
diff --git a/apps/web/core/components/integration/guide.tsx b/apps/web/core/components/integration/guide.tsx
deleted file mode 100644
index ca8ecdf17..000000000
--- a/apps/web/core/components/integration/guide.tsx
+++ /dev/null
@@ -1,177 +0,0 @@
-import { useState } from "react";
-import { observer } from "mobx-react";
-import Link from "next/link";
-import { useParams, useSearchParams } from "next/navigation";
-import useSWR, { mutate } from "swr";
-// icons
-import { RefreshCw } from "lucide-react";
-// plane imports
-import { IMPORTERS_LIST } from "@plane/constants";
-import { useTranslation } from "@plane/i18n";
-// types
-import { Button } from "@plane/propel/button";
-import type { IImporterService } from "@plane/types";
-// assets
-import GithubLogo from "@/app/assets/services/github.png?url";
-import JiraLogo from "@/app/assets/services/jira.svg?url";
-// components
-import { DeleteImportModal, GithubImporterRoot, JiraImporterRoot, SingleImport } from "@/components/integration";
-import { ImportExportSettingsLoader } from "@/components/ui/loader/settings/import-and-export";
-// constants
-import { IMPORTER_SERVICES_LIST } from "@/constants/fetch-keys";
-// hooks
-import { useUser } from "@/hooks/store/user";
-// services
-import { IntegrationService } from "@/services/integrations";
-
-// services
-const integrationService = new IntegrationService();
-
-const getImporterLogo = (provider: string) => {
-  switch (provider) {
-    case "github":
-      return GithubLogo;
-    case "jira":
-      return JiraLogo;
-    default:
-      return "";
-  }
-};
-
-// FIXME: [Deprecated] Remove this component
-const IntegrationGuide = observer(function IntegrationGuide() {
-  // states
-  const [refreshing, setRefreshing] = useState(false);
-  const [deleteImportModal, setDeleteImportModal] = useState(false);
-  const [importToDelete, setImportToDelete] = useState<IImporterService | null>(null);
-  // router
-  const { workspaceSlug } = useParams();
-  const searchParams = useSearchParams();
-  const provider = searchParams.get("provider");
-  // store hooks
-  const { data: currentUser } = useUser();
-
-  const { t } = useTranslation();
-
-  const { data: importerServices } = useSWR(
-    workspaceSlug ? IMPORTER_SERVICES_LIST(workspaceSlug) : null,
-    workspaceSlug ? () => integrationService.getImporterServicesList(workspaceSlug) : null
-  );
-
-  const handleDeleteImport = (importService: IImporterService) => {
-    setImportToDelete(importService);
-    setDeleteImportModal(true);
-  };
-
-  return (
-    <>
-      <DeleteImportModal
-        isOpen={deleteImportModal}
-        handleClose={() => setDeleteImportModal(false)}
-        data={importToDelete}
-        user={currentUser || null}
-      />
-      <div className="h-full">
-        {(!provider || provider === "csv") && (
-          <>
-            {/* <div className="mb-5 flex items-center gap-2">
-              <div className="h-full w-full space-y-1">
-                <div className="text-lg font-medium">Relocation Guide</div>
-                <div className="text-sm">
-                  You can now transfer all the work items that you{"'"}ve created in other tracking
-                  services. This tool will guide you to relocate the work item to Plane.
-                </div>
-              </div>
-              <a
-                href="https://docs.plane.so/importers/github"
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                <div className="flex flex-shrink-0 cursor-pointer items-center gap-2 whitespace-nowrap text-sm font-medium text-[#3F76FF] hover:text-opacity-80">
-                  Read More
-                  <ArrowRightIcon width={"18px"} color={"#3F76FF"} />
-                </div>
-              </a>
-            </div> */}
-            {IMPORTERS_LIST.map((service) => (
-              <div
-                key={service.provider}
-                className="flex items-center justify-between gap-2 border-b border-custom-border-100 bg-custom-background-100 px-4 py-6"
-              >
-                <div className="flex items-start gap-4">
-                  <div className="relative h-10 w-10 flex-shrink-0">
-                    <img
-                      src={getImporterLogo(service?.provider)}
-                      className="h-full w-full object-cover"
-                      alt={`${t(service.i18n_title)} Logo`}
-                    />
-                  </div>
-                  <div>
-                    <h3 className="flex items-center gap-4 text-sm font-medium">{t(service.i18n_title)}</h3>
-                    <p className="text-sm tracking-tight text-custom-text-200">{t(service.i18n_description)}</p>
-                  </div>
-                </div>
-                <div className="flex-shrink-0">
-                  <Link href={`/${workspaceSlug}/settings/imports?provider=${service.provider}`}>
-                    <span>
-                      <Button variant="primary">{service.type}</Button>
-                    </span>
-                  </Link>
-                </div>
-              </div>
-            ))}
-            <div>
-              <div className="flex items-center border-b border-custom-border-100 pb-3.5 pt-7">
-                <h3 className="flex gap-2 text-xl font-medium">
-                  Previous Imports
-                  <button
-                    type="button"
-                    className="flex flex-shrink-0 items-center gap-1 rounded bg-custom-background-80 px-1.5 py-1 text-xs outline-none"
-                    onClick={() => {
-                      setRefreshing(true);
-                      mutate(IMPORTER_SERVICES_LIST(workspaceSlug)).then(() => setRefreshing(false));
-                    }}
-                  >
-                    <RefreshCw className={`h-3 w-3 ${refreshing ? "animate-spin" : ""}`} />{" "}
-                    {refreshing ? "Refreshing..." : "Refresh status"}
-                  </button>
-                </h3>
-              </div>
-              <div className="flex flex-col">
-                {importerServices ? (
-                  importerServices.length > 0 ? (
-                    <div className="space-y-2">
-                      <div className="divide-y divide-custom-border-200">
-                        {importerServices.map((service) => (
-                          <SingleImport
-                            key={service.id}
-                            service={service}
-                            refreshing={refreshing}
-                            handleDelete={() => handleDeleteImport(service)}
-                          />
-                        ))}
-                      </div>
-                    </div>
-                  ) : (
-                    <div className="flex h-full w-full items-center justify-center">
-                      {/* <EmptyState type={EmptyStateType.WORKSPACE_SETTINGS_IMPORT} size="sm" /> */}
-                    </div>
-                  )
-                ) : (
-                  <ImportExportSettingsLoader />
-                )}
-              </div>
-            </div>
-          </>
-        )}
-
-        {provider && provider === "github" && <GithubImporterRoot />}
-        {provider && provider === "jira" && <JiraImporterRoot />}
-      </div>
-    </>
-  );
-});
-
-export default IntegrationGuide;
-
-export { IntegrationGuide };
diff --git a/apps/web/core/components/integration/index.ts b/apps/web/core/components/integration/index.ts
deleted file mode 100644
index a734113b6..000000000
--- a/apps/web/core/components/integration/index.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-// layout
-export * from "./delete-import-modal";
-export * from "./guide";
-export * from "./single-import";
-export * from "./single-integration-card";
-
-// github
-export * from "./github";
-// jira
-export * from "./jira";
-// slack
-export * from "./slack";
diff --git a/apps/web/core/components/integration/jira/confirm-import.tsx b/apps/web/core/components/integration/jira/confirm-import.tsx
deleted file mode 100644
index e424d9292..000000000
--- a/apps/web/core/components/integration/jira/confirm-import.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import React from "react";
-
-// react hook form
-import { useFormContext } from "react-hook-form";
-import type { IJiraImporterForm } from "@plane/types";
-
-// types
-
-export function JiraConfirmImport() {
-  const { watch } = useFormContext<IJiraImporterForm>();
-
-  return (
-    <div className="h-full w-full overflow-y-auto">
-      <div className="grid grid-cols-1 gap-10 md:grid-cols-2">
-        <div className="col-span-2">
-          <h3 className="text-lg font-semibold">Confirm</h3>
-        </div>
-
-        <div className="col-span-1">
-          <p className="text-sm text-custom-text-200">Migrating</p>
-        </div>
-        <div className="col-span-1 flex items-center justify-between">
-          <div>
-            <h4 className="mb-2 text-lg font-semibold">{watch("data.total_issues")}</h4>
-            <p className="text-sm text-custom-text-200">Work items</p>
-          </div>
-          <div>
-            <h4 className="mb-2 text-lg font-semibold">{watch("data.total_states")}</h4>
-            <p className="text-sm text-custom-text-200">States</p>
-          </div>
-          <div>
-            <h4 className="mb-2 text-lg font-semibold">{watch("data.total_modules")}</h4>
-            <p className="text-sm text-custom-text-200">Modules</p>
-          </div>
-          <div>
-            <h4 className="mb-2 text-lg font-semibold">{watch("data.total_labels")}</h4>
-            <p className="text-sm text-custom-text-200">Labels</p>
-          </div>
-          <div>
-            <h4 className="mb-2 text-lg font-semibold">{watch("data.users").filter((user) => user.import).length}</h4>
-            <p className="text-sm text-custom-text-200">User</p>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/apps/web/core/components/integration/jira/give-details.tsx b/apps/web/core/components/integration/jira/give-details.tsx
deleted file mode 100644
index 248961ef8..000000000
--- a/apps/web/core/components/integration/jira/give-details.tsx
+++ /dev/null
@@ -1,217 +0,0 @@
-import React from "react";
-import { observer } from "mobx-react";
-import Link from "next/link";
-import { useFormContext, Controller } from "react-hook-form";
-import { Plus } from "lucide-react";
-import { PROJECT_TRACKER_ELEMENTS } from "@plane/constants";
-import type { IJiraImporterForm } from "@plane/types";
-// hooks
-// components
-import { CustomSelect, Input } from "@plane/ui";
-// helpers
-import { checkEmailValidity } from "@plane/utils";
-import { captureClick } from "@/helpers/event-tracker.helper";
-import { useCommandPalette } from "@/hooks/store/use-command-palette";
-import { useProject } from "@/hooks/store/use-project";
-// types
-
-export const JiraGetImportDetail = observer(function JiraGetImportDetail() {
-  // store hooks
-  const { toggleCreateProjectModal } = useCommandPalette();
-  const { workspaceProjectIds, getProjectById } = useProject();
-  // form info
-  const {
-    control,
-    formState: { errors },
-  } = useFormContext<IJiraImporterForm>();
-
-  return (
-    <div className="h-full w-full space-y-8 overflow-y-auto">
-      <div className="grid grid-cols-1 gap-10 md:grid-cols-2">
-        <div className="col-span-1">
-          <h3 className="font-semibold">Jira Personal Access Token</h3>
-          <p className="text-sm text-custom-text-200">
-            Get to know your access token by navigating to{" "}
-            <Link href="https://id.atlassian.com/manage-profile/security/api-tokens" target="_blank" rel="noreferrer">
-              <span className="text-custom-primary underline">Atlassian Settings</span>
-            </Link>
-          </p>
-        </div>
-
-        <div className="col-span-1">
-          <Controller
-            control={control}
-            name="metadata.api_token"
-            rules={{
-              required: "Please enter your personal access token.",
-            }}
-            render={({ field: { value, onChange, ref } }) => (
-              <Input
-                id="metadata.api_token"
-                type="text"
-                value={value}
-                onChange={onChange}
-                ref={ref}
-                hasError={Boolean(errors.metadata?.api_token)}
-                placeholder="XXXXXXXX"
-                className="w-full"
-                autoComplete="off"
-              />
-            )}
-          />
-          {errors.metadata?.api_token && <p className="text-xs text-red-500">{errors.metadata.api_token.message}</p>}
-        </div>
-      </div>
-      <div className="grid grid-cols-1 gap-10 md:grid-cols-2">
-        <div className="col-span-1">
-          <h3 className="font-semibold">Jira Project Key</h3>
-          <p className="text-sm text-custom-text-200">If XXX-123 is your work item, then enter XXX</p>
-        </div>
-        <div className="col-span-1">
-          <Controller
-            control={control}
-            name="metadata.project_key"
-            rules={{
-              required: "Please enter your project key.",
-            }}
-            render={({ field: { value, onChange, ref } }) => (
-              <Input
-                id="metadata.project_key"
-                type="text"
-                value={value}
-                onChange={onChange}
-                ref={ref}
-                hasError={Boolean(errors.metadata?.project_key)}
-                placeholder="LIN"
-                className="w-full"
-              />
-            )}
-          />
-          {errors.metadata?.project_key && (
-            <p className="text-xs text-red-500">{errors.metadata.project_key.message}</p>
-          )}
-        </div>
-      </div>
-      <div className="grid grid-cols-1 gap-10 md:grid-cols-2">
-        <div className="col-span-1">
-          <h3 className="font-semibold">Jira Email Address</h3>
-          <p className="text-sm text-custom-text-200">Enter the Email account that you use in Jira account</p>
-        </div>
-        <div className="col-span-1">
-          <Controller
-            control={control}
-            name="metadata.email"
-            rules={{
-              required: "Please enter email address.",
-              validate: (value) => checkEmailValidity(value) || "Please enter a valid email address",
-            }}
-            render={({ field: { value, onChange, ref } }) => (
-              <Input
-                id="metadata.email"
-                type="email"
-                value={value}
-                onChange={onChange}
-                ref={ref}
-                hasError={Boolean(errors.metadata?.email)}
-                placeholder="name@company.com"
-                className="w-full"
-              />
-            )}
-          />
-          {errors.metadata?.email && <p className="text-xs text-red-500">{errors.metadata.email.message}</p>}
-        </div>
-      </div>
-      <div className="grid grid-cols-1 gap-10 md:grid-cols-2">
-        <div className="col-span-1">
-          <h3 className="font-semibold">Jira Installation or Cloud Host Name</h3>
-          <p className="text-sm text-custom-text-200">Enter your companies cloud host name</p>
-        </div>
-        <div className="col-span-1">
-          <Controller
-            control={control}
-            name="metadata.cloud_hostname"
-            rules={{
-              required: "Please enter your cloud host name.",
-              validate: (value) => !/^https?:\/\//.test(value) || "Hostname should not begin with http:// or https://",
-            }}
-            render={({ field: { value, onChange, ref } }) => (
-              <Input
-                id="metadata.cloud_hostname"
-                value={value}
-                onChange={onChange}
-                ref={ref}
-                hasError={Boolean(errors.metadata?.cloud_hostname)}
-                placeholder="my-company.atlassian.net"
-                className="w-full"
-              />
-            )}
-          />
-          {errors.metadata?.cloud_hostname && (
-            <p className="text-xs text-red-500">{errors.metadata.cloud_hostname.message}</p>
-          )}
-        </div>
-      </div>
-      <div className="grid grid-cols-1 gap-10 md:grid-cols-2">
-        <div className="col-span-1">
-          <h3 className="font-semibold">Import to project</h3>
-          <p className="text-sm text-custom-text-200">Select which project you want to import to.</p>
-        </div>
-        <div className="col-span-1">
-          <Controller
-            control={control}
-            name="project_id"
-            rules={{ required: "Please select a project." }}
-            render={({ field: { value, onChange } }) => (
-              <CustomSelect
-                value={value}
-                input
-                onChange={onChange}
-                label={
-                  <span>
-                    {value && value.trim() !== "" ? (
-                      getProjectById(value)?.name
-                    ) : (
-                      <span className="text-custom-text-200">Select a project</span>
-                    )}
-                  </span>
-                }
-              >
-                {workspaceProjectIds && workspaceProjectIds.length > 0 ? (
-                  workspaceProjectIds.map((projectId) => {
-                    const projectDetails = getProjectById(projectId);
-
-                    if (!projectDetails) return;
-
-                    return (
-                      <CustomSelect.Option key={projectId} value={projectId}>
-                        {projectDetails.name}
-                      </CustomSelect.Option>
-                    );
-                  })
-                ) : (
-                  <div className="flex cursor-pointer select-none items-center space-x-2 truncate rounded px-1 py-1.5 text-custom-text-200">
-                    <p>You don{"'"}t have any project. Please create a project first.</p>
-                  </div>
-                )}
-                <div>
-                  <button
-                    type="button"
-                    data-ph-element={PROJECT_TRACKER_ELEMENTS.EMPTY_STATE_CREATE_PROJECT_BUTTON}
-                    onClick={() => {
-                      captureClick({ elementName: PROJECT_TRACKER_ELEMENTS.CREATE_PROJECT_JIRA_IMPORT_DETAIL_PAGE });
-                      toggleCreateProjectModal(true);
-                    }}
-                    className="flex cursor-pointer select-none items-center space-x-2 truncate rounded px-1 py-1.5 text-custom-text-200"
-                  >
-                    <Plus className="h-4 w-4 text-custom-text-200" />
-                    <span>Create new project</span>
-                  </button>
-                </div>
-              </CustomSelect>
-            )}
-          />
-        </div>
-      </div>
-    </div>
-  );
-});
diff --git a/apps/web/core/components/integration/jira/import-users.tsx b/apps/web/core/components/integration/jira/import-users.tsx
deleted file mode 100644
index b9479b633..000000000
--- a/apps/web/core/components/integration/jira/import-users.tsx
+++ /dev/null
@@ -1,152 +0,0 @@
-import type { FC } from "react";
-import { useParams } from "next/navigation";
-import { useFormContext, useFieldArray, Controller } from "react-hook-form";
-import useSWR from "swr";
-// plane types
-import type { IJiraImporterForm } from "@plane/types";
-// plane ui
-import { Avatar, CustomSelect, CustomSearchSelect, Input, ToggleSwitch } from "@plane/ui";
-// constants
-import { getFileURL } from "@plane/utils";
-import { WORKSPACE_MEMBERS } from "@/constants/fetch-keys";
-// helpers
-// plane web services
-import { WorkspaceService } from "@/plane-web/services";
-
-const workspaceService = new WorkspaceService();
-
-export function JiraImportUsers() {
-  const { workspaceSlug } = useParams();
-  // form info
-  const {
-    control,
-    watch,
-    formState: { errors },
-  } = useFormContext<IJiraImporterForm>();
-
-  const { fields } = useFieldArray({
-    control,
-    name: "data.users",
-  });
-
-  const { data: members } = useSWR(
-    workspaceSlug ? WORKSPACE_MEMBERS(workspaceSlug?.toString() ?? "") : null,
-    workspaceSlug ? () => workspaceService.fetchWorkspaceMembers(workspaceSlug?.toString() ?? "") : null
-  );
-
-  const options = members
-    ?.map((member) => {
-      if (!member?.member) return;
-      return {
-        value: member.member.email,
-        query: member.member.display_name ?? "",
-        content: (
-          <div className="flex items-center gap-2">
-            <Avatar name={member?.member.display_name} src={getFileURL(member?.member.avatar_url)} />
-            {member.member.display_name}
-          </div>
-        ),
-      };
-    })
-    .filter((member) => !!member) as
-    | {
-        value: string;
-        query: string;
-        content: React.ReactNode;
-      }[]
-    | undefined;
-
-  return (
-    <div className="h-full w-full space-y-10 divide-y-2 divide-custom-border-200 overflow-y-auto">
-      <div className="grid grid-cols-1 gap-10 md:grid-cols-2">
-        <div className="col-span-1">
-          <h3 className="font-semibold">Users</h3>
-          <p className="text-sm text-custom-text-200">Update, invite or choose not to invite assignee</p>
-        </div>
-        <div className="col-span-1">
-          <Controller
-            control={control}
-            name="data.invite_users"
-            render={({ field: { value, onChange } }) => <ToggleSwitch onChange={onChange} value={value} />}
-          />
-        </div>
-      </div>
-
-      {watch("data.invite_users") && (
-        <div className="pt-6">
-          <div className="grid grid-cols-3 gap-3">
-            <div className="col-span-1 text-sm text-custom-text-200">Name</div>
-            <div className="col-span-1 text-sm text-custom-text-200">Import as</div>
-          </div>
-
-          <div className="mt-5 space-y-3">
-            {fields.map((user, index) => (
-              <div className="grid grid-cols-3 gap-3" key={`${user.email}-${user.username}`}>
-                <div className="col-span-1">
-                  <p>{user.username}</p>
-                </div>
-                <div className="col-span-1">
-                  <Controller
-                    control={control}
-                    name={`data.users.${index}.import`}
-                    render={({ field: { value, onChange } }) => (
-                      <CustomSelect
-                        input
-                        value={value}
-                        onChange={onChange}
-                        label={<span className="capitalize">{value ? value : ("Ignore" as any)}</span>}
-                      >
-                        <CustomSelect.Option value="invite">Invite by email</CustomSelect.Option>
-                        <CustomSelect.Option value="map">Map to existing</CustomSelect.Option>
-                        <CustomSelect.Option value={false}>Do not import</CustomSelect.Option>
-                      </CustomSelect>
-                    )}
-                  />
-                </div>
-                <div className="col-span-1">
-                  {watch(`data.users.${index}.import`) === "invite" && (
-                    <Controller
-                      control={control}
-                      name={`data.users.${index}.email`}
-                      rules={{
-                        required: "This field is required",
-                      }}
-                      render={({ field: { value, onChange, ref } }) => (
-                        <Input
-                          id={`data.users.${index}.email`}
-                          name={`data.users.${index}.email`}
-                          type="text"
-                          value={value}
-                          onChange={onChange}
-                          ref={ref}
-                          hasError={Boolean(errors.data?.users?.[index]?.email)}
-                          className="w-full"
-                        />
-                      )}
-                    />
-                  )}
-                  {watch(`data.users.${index}.import`) === "map" && (
-                    <Controller
-                      control={control}
-                      name={`data.users.${index}.email`}
-                      render={({ field: { value, onChange } }) => (
-                        <CustomSearchSelect
-                          value={value}
-                          input
-                          label={value !== "" ? value : "Select user from project"}
-                          options={options}
-                          onChange={onChange}
-                          optionsClassName="w-48"
-                        />
-                      )}
-                    />
-                  )}
-                </div>
-              </div>
-            ))}
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}
diff --git a/apps/web/core/components/integration/jira/index.ts b/apps/web/core/components/integration/jira/index.ts
deleted file mode 100644
index bc22a8246..000000000
--- a/apps/web/core/components/integration/jira/index.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-export * from "./root";
-export * from "./give-details";
-export * from "./jira-project-detail";
-export * from "./import-users";
-export * from "./confirm-import";
-
-import type { IJiraImporterForm } from "@plane/types";
-
-export type TJiraIntegrationSteps =
-  | "import-configure"
-  | "display-import-data"
-  | "select-import-data"
-  | "import-users"
-  | "import-confirmation";
-
-export interface IJiraIntegrationData {
-  state: TJiraIntegrationSteps;
-}
-
-export const jiraFormDefaultValues: IJiraImporterForm = {
-  metadata: {
-    cloud_hostname: "",
-    api_token: "",
-    project_key: "",
-    email: "",
-  },
-  config: {
-    epics_to_modules: false,
-  },
-  data: {
-    users: [],
-    invite_users: true,
-    total_issues: 0,
-    total_labels: 0,
-    total_modules: 0,
-    total_states: 0,
-  },
-  project_id: "",
-};
diff --git a/apps/web/core/components/integration/jira/jira-project-detail.tsx b/apps/web/core/components/integration/jira/jira-project-detail.tsx
deleted file mode 100644
index f521c7b6a..000000000
--- a/apps/web/core/components/integration/jira/jira-project-detail.tsx
+++ /dev/null
@@ -1,167 +0,0 @@
-import React, { useEffect } from "react";
-
-// next
-import { useParams } from "next/navigation";
-
-// swr
-import { useFormContext, Controller } from "react-hook-form";
-import useSWR from "swr";
-import type { IJiraImporterForm, IJiraMetadata } from "@plane/types";
-
-// react hook form
-
-// services
-import { ToggleSwitch, Spinner } from "@plane/ui";
-import { JIRA_IMPORTER_DETAIL } from "@/constants/fetch-keys";
-import { JiraImporterService } from "@/services/integrations";
-
-// fetch keys
-
-// components
-
-import type { IJiraIntegrationData, TJiraIntegrationSteps } from ".";
-
-type Props = {
-  setCurrentStep: React.Dispatch<React.SetStateAction<IJiraIntegrationData>>;
-  setDisableTopBarAfter: React.Dispatch<React.SetStateAction<TJiraIntegrationSteps | null>>;
-};
-
-// services
-const jiraImporterService = new JiraImporterService();
-
-export function JiraProjectDetail(props: Props) {
-  const { setCurrentStep, setDisableTopBarAfter } = props;
-
-  const {
-    watch,
-    setValue,
-    control,
-    formState: { errors },
-  } = useFormContext<IJiraImporterForm>();
-
-  const { workspaceSlug } = useParams();
-
-  const params: IJiraMetadata = {
-    api_token: watch("metadata.api_token"),
-    project_key: watch("metadata.project_key"),
-    email: watch("metadata.email"),
-    cloud_hostname: watch("metadata.cloud_hostname"),
-  };
-
-  const { data: projectInfo, error } = useSWR(
-    workspaceSlug &&
-      !errors.metadata?.api_token &&
-      !errors.metadata?.project_key &&
-      !errors.metadata?.email &&
-      !errors.metadata?.cloud_hostname
-      ? JIRA_IMPORTER_DETAIL(workspaceSlug.toString(), params)
-      : null,
-    workspaceSlug &&
-      !errors.metadata?.api_token &&
-      !errors.metadata?.project_key &&
-      !errors.metadata?.email &&
-      !errors.metadata?.cloud_hostname
-      ? () => jiraImporterService.getJiraProjectInfo(workspaceSlug.toString(), params)
-      : null
-  );
-
-  useEffect(() => {
-    if (!projectInfo) return;
-
-    setValue("data.total_issues", projectInfo.issues);
-    setValue("data.total_labels", projectInfo.labels);
-    setValue(
-      "data.users",
-      projectInfo.users?.map((user) => ({
-        email: user.emailAddress,
-        import: false,
-        username: user.displayName,
-      }))
-    );
-    setValue("data.total_states", projectInfo.states);
-    setValue("data.total_modules", projectInfo.modules);
-  }, [projectInfo, setValue]);
-
-  useEffect(() => {
-    if (error) setDisableTopBarAfter("display-import-data");
-    else setDisableTopBarAfter(null);
-  }, [error, setDisableTopBarAfter]);
-
-  useEffect(() => {
-    if (!projectInfo && !error) setDisableTopBarAfter("display-import-data");
-    else if (!error) setDisableTopBarAfter(null);
-  }, [projectInfo, error, setDisableTopBarAfter]);
-
-  if (!projectInfo && !error) {
-    return (
-      <div className="flex h-full w-full items-center justify-center">
-        <Spinner />
-      </div>
-    );
-  }
-
-  if (error) {
-    return (
-      <div className="flex h-full w-full items-center justify-center">
-        <p className="text-sm text-custom-text-200">
-          Something went wrong. Please{" "}
-          <button
-            onClick={() => setCurrentStep({ state: "import-configure" })}
-            type="button"
-            className="inline text-custom-primary underline"
-          >
-            go back
-          </button>{" "}
-          and check your Jira project details.
-        </p>
-      </div>
-    );
-  }
-
-  return (
-    <div className="h-full w-full space-y-10 overflow-y-auto">
-      <div className="grid grid-cols-1 gap-10 md:grid-cols-2">
-        <div className="col-span-1">
-          <h3 className="font-semibold">Import Data</h3>
-          <p className="text-sm text-custom-text-200">Import Completed. We have found:</p>
-        </div>
-        <div className="col-span-1 flex items-center justify-between">
-          <div>
-            <h4 className="mb-2 text-lg font-semibold">{projectInfo?.issues}</h4>
-            <p className="text-sm text-custom-text-200">Work items</p>
-          </div>
-          <div>
-            <h4 className="mb-2 text-lg font-semibold">{projectInfo?.states}</h4>
-            <p className="text-sm text-custom-text-200">States</p>
-          </div>
-          <div>
-            <h4 className="mb-2 text-lg font-semibold">{projectInfo?.modules}</h4>
-            <p className="text-sm text-custom-text-200">Modules</p>
-          </div>
-          <div>
-            <h4 className="mb-2 text-lg font-semibold">{projectInfo?.labels}</h4>
-            <p className="text-sm text-custom-text-200">Labels</p>
-          </div>
-          <div>
-            <h4 className="mb-2 text-lg font-semibold">{projectInfo?.users?.length}</h4>
-            <p className="text-sm text-custom-text-200">Users</p>
-          </div>
-        </div>
-      </div>
-
-      <div className="grid grid-cols-1 gap-10 md:grid-cols-2">
-        <div className="col-span-1">
-          <h3 className="font-semibold">Import Epics</h3>
-          <p className="text-sm text-custom-text-200">Import epics as modules</p>
-        </div>
-        <div className="col-span-1">
-          <Controller
-            control={control}
-            name="config.epics_to_modules"
-            render={({ field: { value, onChange } }) => <ToggleSwitch onChange={onChange} value={value} />}
-          />
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/apps/web/core/components/integration/jira/root.tsx b/apps/web/core/components/integration/jira/root.tsx
deleted file mode 100644
index 0ccbe96d0..000000000
--- a/apps/web/core/components/integration/jira/root.tsx
+++ /dev/null
@@ -1,200 +0,0 @@
-import React, { useState } from "react";
-import Link from "next/link";
-import { useParams } from "next/navigation";
-import { FormProvider, useForm } from "react-hook-form";
-import { mutate } from "swr";
-// icons
-import { ArrowLeft, Check, List, Settings } from "lucide-react";
-import { Button } from "@plane/propel/button";
-import { MembersPropertyIcon } from "@plane/propel/icons";
-// types
-import type { IJiraImporterForm } from "@plane/types";
-// assets
-import JiraLogo from "@/app/assets/services/jira.svg?url";
-// fetch keys
-import { IMPORTER_SERVICES_LIST } from "@/constants/fetch-keys";
-// hooks
-import { useAppRouter } from "@/hooks/use-app-router";
-// services
-import { JiraImporterService } from "@/services/integrations";
-// components
-import type { TJiraIntegrationSteps, IJiraIntegrationData } from ".";
-import { JiraGetImportDetail, JiraProjectDetail, JiraImportUsers, JiraConfirmImport, jiraFormDefaultValues } from ".";
-
-const integrationWorkflowData: Array<{
-  title: string;
-  key: TJiraIntegrationSteps;
-  icon: any;
-}> = [
-  {
-    title: "Configure",
-    key: "import-configure",
-    icon: Settings,
-  },
-  {
-    title: "Import Data",
-    key: "display-import-data",
-    icon: List,
-  },
-  {
-    title: "Users",
-    key: "import-users",
-    icon: MembersPropertyIcon,
-  },
-  {
-    title: "Confirm",
-    key: "import-confirmation",
-    icon: Check,
-  },
-];
-
-// services
-const jiraImporterService = new JiraImporterService();
-
-export function JiraImporterRoot() {
-  const [currentStep, setCurrentStep] = useState<IJiraIntegrationData>({
-    state: "import-configure",
-  });
-  const [disableTopBarAfter, setDisableTopBarAfter] = useState<TJiraIntegrationSteps | null>(null);
-
-  const router = useAppRouter();
-  const { workspaceSlug } = useParams();
-
-  const methods = useForm<IJiraImporterForm>({
-    defaultValues: jiraFormDefaultValues,
-    mode: "all",
-    reValidateMode: "onChange",
-  });
-
-  const isValid = methods.formState.isValid;
-
-  const onSubmit = async (data: IJiraImporterForm) => {
-    if (!workspaceSlug) return;
-
-    await jiraImporterService
-      .createJiraImporter(workspaceSlug.toString(), data)
-      .then(() => {
-        mutate(IMPORTER_SERVICES_LIST(workspaceSlug.toString()));
-        router.push(`/${workspaceSlug}/settings/imports`);
-      })
-      .catch((err) => {
-        console.error(err);
-      });
-  };
-
-  const activeIntegrationState = () => {
-    const currentElementIndex = integrationWorkflowData.findIndex((i) => i?.key === currentStep?.state);
-
-    return currentElementIndex;
-  };
-
-  return (
-    <div className="mt-4 flex h-full flex-col space-y-2">
-      <Link href={`/${workspaceSlug}/settings/imports`}>
-        <span className="inline-flex cursor-pointer items-center gap-2 text-sm font-medium text-custom-text-200 hover:text-custom-text-100">
-          <div>
-            <ArrowLeft className="h-3 w-3" />
-          </div>
-          <div>Cancel import & go back</div>
-        </span>
-      </Link>
-
-      <div className="flex h-full flex-col space-y-4 rounded-[10px] border border-custom-border-200 bg-custom-background-100 p-4">
-        <div className="flex items-center gap-2">
-          <div className="h-10 w-10 flex-shrink-0">
-            <img src={JiraLogo} className="w-full h-full object-cover" alt="jira logo" />
-          </div>
-          <div className="flex h-full w-full items-center justify-center">
-            {integrationWorkflowData.map((integration, index) => (
-              <React.Fragment key={integration.key}>
-                <button
-                  type="button"
-                  onClick={() => {
-                    setCurrentStep({ state: integration.key });
-                  }}
-                  disabled={
-                    index > activeIntegrationState() + 1 ||
-                    Boolean(index === activeIntegrationState() + 1 && disableTopBarAfter)
-                  }
-                  className={`flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full border border-custom-border-200 ${
-                    index <= activeIntegrationState()
-                      ? `border-custom-primary bg-custom-primary ${
-                          index === activeIntegrationState()
-                            ? "border-opacity-100 bg-opacity-100"
-                            : "border-opacity-80 bg-opacity-80"
-                        }`
-                      : "border-custom-border-200"
-                  }`}
-                >
-                  <integration.icon
-                    className={`h-5 w-5 ${index <= activeIntegrationState() ? "text-white" : "text-custom-text-400"}`}
-                  />
-                </button>
-                {index < integrationWorkflowData.length - 1 && (
-                  <div
-                    key={index}
-                    className={`border-b px-7 ${
-                      index <= activeIntegrationState() - 1 ? `border-custom-primary` : `border-custom-border-200`
-                    }`}
-                  >
-                    {" "}
-                  </div>
-                )}
-              </React.Fragment>
-            ))}
-          </div>
-        </div>
-
-        <div className="relative h-full w-full pt-6">
-          <FormProvider {...methods}>
-            <form className="flex h-full w-full flex-col">
-              <div className="h-full w-full overflow-y-auto">
-                {currentStep.state === "import-configure" && <JiraGetImportDetail />}
-                {currentStep.state === "display-import-data" && (
-                  <JiraProjectDetail setDisableTopBarAfter={setDisableTopBarAfter} setCurrentStep={setCurrentStep} />
-                )}
-                {currentStep?.state === "import-users" && <JiraImportUsers />}
-                {currentStep?.state === "import-confirmation" && <JiraConfirmImport />}
-              </div>
-
-              <div className="-mx-4 mt-4 flex justify-end gap-4 border-t border-custom-border-200 p-4 pb-0">
-                {currentStep?.state !== "import-configure" && (
-                  <Button
-                    variant="neutral-primary"
-                    onClick={() => {
-                      const currentElementIndex = integrationWorkflowData.findIndex(
-                        (i) => i?.key === currentStep?.state
-                      );
-                      setCurrentStep({
-                        state: integrationWorkflowData[currentElementIndex - 1]?.key,
-                      });
-                    }}
-                  >
-                    Back
-                  </Button>
-                )}
-                <Button
-                  variant="primary"
-                  disabled={disableTopBarAfter === currentStep?.state || !isValid || methods.formState.isSubmitting}
-                  onClick={() => {
-                    const currentElementIndex = integrationWorkflowData.findIndex((i) => i?.key === currentStep?.state);
-
-                    if (currentElementIndex === integrationWorkflowData.length - 1) {
-                      methods.handleSubmit(onSubmit)();
-                    } else {
-                      setCurrentStep({
-                        state: integrationWorkflowData[currentElementIndex + 1]?.key,
-                      });
-                    }
-                  }}
-                >
-                  {currentStep?.state === "import-confirmation" ? "Confirm & Import" : "Next"}
-                </Button>
-              </div>
-            </form>
-          </FormProvider>
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/apps/web/core/components/integration/single-import.tsx b/apps/web/core/components/integration/single-import.tsx
deleted file mode 100644
index f1ae212f2..000000000
--- a/apps/web/core/components/integration/single-import.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import { observer } from "mobx-react";
-import { Trash2 } from "lucide-react";
-// plane imports
-import { IMPORTERS_LIST } from "@plane/constants";
-import { useTranslation } from "@plane/i18n";
-import type { IImporterService } from "@plane/types";
-import { CustomMenu } from "@plane/ui";
-// icons
-// helpers
-
-import { renderFormattedDate } from "@plane/utils";
-// types
-// constants
-
-type Props = {
-  service: IImporterService;
-  refreshing: boolean;
-  handleDelete: () => void;
-};
-
-export const SingleImport = observer(function SingleImport({ service, refreshing, handleDelete }: Props) {
-  const { t } = useTranslation();
-
-  const importer = IMPORTERS_LIST.find((i) => i.provider === service.service);
-  return (
-    <div className="flex items-center justify-between gap-2 px-4 py-3">
-      <div>
-        <h4 className="flex items-center gap-2 text-sm">
-          {importer && (
-            <span>
-              Import from <span className="font-medium">{t(importer.i18n_title)}</span> to{" "}
-            </span>
-          )}
-          <span className="font-medium">{service.project_detail.name}</span>
-          <span
-            className={`rounded px-2 py-0.5 text-xs capitalize ${
-              service.status === "completed"
-                ? "bg-green-500/20 text-green-500"
-                : service.status === "processing"
-                  ? "bg-yellow-500/20 text-yellow-500"
-                  : service.status === "failed"
-                    ? "bg-red-500/20 text-red-500"
-                    : ""
-            }`}
-          >
-            {refreshing ? "Refreshing..." : service.status}
-          </span>
-        </h4>
-        <div className="mt-2 flex items-center gap-2 text-xs text-custom-text-200">
-          <span>{renderFormattedDate(service.created_at)}</span>|
-          <span>Imported by {service.initiated_by_detail?.display_name}</span>
-        </div>
-      </div>
-      <CustomMenu ellipsis>
-        <CustomMenu.MenuItem onClick={handleDelete}>
-          <span className="flex items-center justify-start gap-2">
-            <Trash2 className="h-3.5 w-3.5" />
-            Delete import
-          </span>
-        </CustomMenu.MenuItem>
-      </CustomMenu>
-    </div>
-  );
-});
diff --git a/apps/web/core/components/integration/single-integration-card.tsx b/apps/web/core/components/integration/single-integration-card.tsx
index fb55e5bc9..d4224eb22 100644
--- a/apps/web/core/components/integration/single-integration-card.tsx
+++ b/apps/web/core/components/integration/single-integration-card.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
@@ -101,23 +107,23 @@ export const SingleIntegrationCard = observer(function SingleIntegrationCard({ i
   const isInstalled = workspaceIntegrations?.find((i: any) => i.integration_detail.id === integration.id);
 
   return (
-    <div className="flex items-center justify-between gap-2 border-b border-custom-border-100 bg-custom-background-100 px-4 py-6">
+    <div className="flex items-center justify-between gap-2 border-b border-subtle bg-surface-1 px-4 py-6">
       <div className="flex items-start gap-4">
         <div className="h-10 w-10 flex-shrink-0">
           <img
             src={integrationDetails[integration.provider].logo}
-            className="w-full h-full object-cover"
+            className="h-full w-full object-cover"
             alt={`${integration.title} Logo`}
           />
         </div>
         <div>
-          <h3 className="flex items-center gap-2 text-sm font-medium">
+          <h3 className="flex items-center gap-2 text-body-xs-medium">
             {integration.title}
             {workspaceIntegrations
-              ? isInstalled && <CheckCircle className="h-3.5 w-3.5 fill-transparent text-green-500" />
+              ? isInstalled && <CheckCircle className="h-3.5 w-3.5 fill-transparent text-success-primary" />
               : null}
           </h3>
-          <p className="text-sm tracking-tight text-custom-text-200">
+          <p className="text-body-xs-regular text-secondary">
             {workspaceIntegrations
               ? isInstalled
                 ? integrationDetails[integration.provider].installed
@@ -136,7 +142,7 @@ export const SingleIntegrationCard = observer(function SingleIntegrationCard({ i
           >
             <Button
               className={`${!isUserAdmin ? "hover:cursor-not-allowed" : ""}`}
-              variant="danger"
+              variant="error-fill"
               onClick={() => {
                 if (!isUserAdmin) return;
                 handleRemoveIntegration();
diff --git a/apps/web/core/components/integration/slack/index.ts b/apps/web/core/components/integration/slack/index.ts
deleted file mode 100644
index 4ea6cd1e4..000000000
--- a/apps/web/core/components/integration/slack/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./select-channel";
diff --git a/apps/web/core/components/integration/slack/select-channel.tsx b/apps/web/core/components/integration/slack/select-channel.tsx
index 827b8d438..af38111a3 100644
--- a/apps/web/core/components/integration/slack/select-channel.tsx
+++ b/apps/web/core/components/integration/slack/select-channel.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useState, useEffect } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
@@ -81,7 +87,7 @@ export const SelectChannel = observer(function SelectChannel({ integration }: Pr
       {projectIntegration ? (
         <button
           type="button"
-          className={`relative inline-flex h-4 w-6 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent bg-gray-700 transition-colors duration-200 ease-in-out focus:outline-none`}
+          className={`bg-gray-700 relative inline-flex h-4 w-6 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none`}
           role="switch"
           aria-checked
           onClick={() => {
@@ -90,7 +96,7 @@ export const SelectChannel = observer(function SelectChannel({ integration }: Pr
         >
           <span
             aria-hidden="true"
-            className={`inline-block h-2 w-2 transform self-center rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out ${
+            className={`shadow inline-block h-2 w-2 transform self-center rounded-full bg-white ring-0 transition duration-200 ease-in-out ${
               slackChannelAvailabilityToggle ? "translate-x-3" : "translate-x-0"
             }`}
           />
diff --git a/apps/web/core/components/issues/archive-issue-modal.tsx b/apps/web/core/components/issues/archive-issue-modal.tsx
index 0be1e741d..ad487abca 100644
--- a/apps/web/core/components/issues/archive-issue-modal.tsx
+++ b/apps/web/core/components/issues/archive-issue-modal.tsx
@@ -1,11 +1,17 @@
-import { useState, Fragment } from "react";
-import { Dialog, Transition } from "@headlessui/react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
 // i18n
 import { useTranslation } from "@plane/i18n";
 // types
 import { Button } from "@plane/propel/button";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { TDeDupeIssue, TIssue } from "@plane/types";
+import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
 // hooks
 import { useIssues } from "@/hooks/store/use-issues";
 import { useProject } from "@/hooks/store/use-project";
@@ -49,6 +55,7 @@ export function ArchiveIssueModal(props: Props) {
           message: t("issue.archive.success.message"),
         });
         onClose();
+        return;
       })
       .catch(() =>
         setToast({
@@ -61,51 +68,21 @@ export function ArchiveIssueModal(props: Props) {
   };
 
   return (
-    <Transition.Root show={isOpen} as={Fragment}>
-      <Dialog as="div" className="relative z-30" onClose={onClose}>
-        <Transition.Child
-          as={Fragment}
-          enter="ease-out duration-300"
-          enterFrom="opacity-0"
-          enterTo="opacity-100"
-          leave="ease-in duration-200"
-          leaveFrom="opacity-100"
-          leaveTo="opacity-0"
-        >
-          <div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
-        </Transition.Child>
-
-        <div className="fixed inset-0 z-30 overflow-y-auto">
-          <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
-            <Transition.Child
-              as={Fragment}
-              enter="ease-out duration-300"
-              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-              enterTo="opacity-100 translate-y-0 sm:scale-100"
-              leave="ease-in duration-200"
-              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-            >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-custom-background-100 text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-full sm:max-w-lg">
-                <div className="px-5 py-4">
-                  <h3 className="text-xl font-medium 2xl:text-2xl">
-                    {t("issue.archive.label")} {projectDetails?.identifier} {issue.sequence_id}
-                  </h3>
-                  <p className="mt-3 text-sm text-custom-text-200">{t("issue.archive.confirm_message")}</p>
-                  <div className="mt-3 flex justify-end gap-2">
-                    <Button variant="neutral-primary" size="sm" onClick={onClose}>
-                      {t("common.cancel")}
-                    </Button>
-                    <Button size="sm" tabIndex={1} onClick={handleArchiveIssue} loading={isArchiving}>
-                      {isArchiving ? t("common.archiving") : t("common.archive")}
-                    </Button>
-                  </div>
-                </div>
-              </Dialog.Panel>
-            </Transition.Child>
-          </div>
+    <ModalCore isOpen={isOpen} handleClose={onClose} position={EModalPosition.CENTER} width={EModalWidth.LG}>
+      <div className="px-5 py-4">
+        <h3 className="text-18 font-medium 2xl:text-20">
+          {t("issue.archive.label")} {projectDetails?.identifier} {issue.sequence_id}
+        </h3>
+        <p className="mt-3 text-13 text-secondary">{t("issue.archive.confirm_message")}</p>
+        <div className="mt-3 flex justify-end gap-2">
+          <Button variant="secondary" size="lg" onClick={onClose}>
+            {t("common.cancel")}
+          </Button>
+          <Button variant="primary" size="lg" tabIndex={1} onClick={handleArchiveIssue} loading={isArchiving}>
+            {isArchiving ? t("common.archiving") : t("common.archive")}
+          </Button>
         </div>
-      </Dialog>
-    </Transition.Root>
+      </div>
+    </ModalCore>
   );
 }
diff --git a/apps/web/core/components/issues/archived-issues-header.tsx b/apps/web/core/components/issues/archived-issues-header.tsx
index e6db99444..8190b4585 100644
--- a/apps/web/core/components/issues/archived-issues-header.tsx
+++ b/apps/web/core/components/issues/archived-issues-header.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // plane imports
diff --git a/apps/web/core/components/issues/attachment/attachment-detail.tsx b/apps/web/core/components/issues/attachment/attachment-detail.tsx
index 6db6b811c..fb486b04b 100644
--- a/apps/web/core/components/issues/attachment/attachment-detail.tsx
+++ b/apps/web/core/components/issues/attachment/attachment-detail.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useState } from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
@@ -66,14 +71,14 @@ export const IssueAttachmentsDetail = observer(function IssueAttachmentsDetail(p
           attachmentId={attachmentId}
         />
       )}
-      <div className="flex h-[60px] items-center justify-between gap-1 rounded-md border-[2px] border-custom-border-200 bg-custom-background-100 px-4 py-2 text-sm">
+      <div className="flex h-[60px] items-center justify-between gap-1 rounded-md border-[2px] border-subtle bg-surface-1 px-4 py-2 text-13">
         <Link href={fileURL ?? ""} target="_blank" rel="noopener noreferrer">
           <div className="flex items-center gap-3">
             <div className="h-7 w-7">{fileIcon}</div>
             <div className="flex flex-col gap-1">
               <div className="flex items-center gap-2">
                 <Tooltip tooltipContent={fileName} isMobile={isMobile}>
-                  <span className="text-sm">{truncateText(`${fileName}`, 10)}</span>
+                  <span className="text-13">{truncateText(`${fileName}`, 10)}</span>
                 </Tooltip>
                 <Tooltip
                   isMobile={isMobile}
@@ -87,7 +92,7 @@ export const IssueAttachmentsDetail = observer(function IssueAttachmentsDetail(p
                 </Tooltip>
               </div>
 
-              <div className="flex items-center gap-3 text-xs text-custom-text-200">
+              <div className="flex items-center gap-3 text-11 text-secondary">
                 <span>{fileExtension.toUpperCase()}</span>
                 <span>{convertBytesToSize(attachment.attributes.size)}</span>
               </div>
@@ -97,7 +102,7 @@ export const IssueAttachmentsDetail = observer(function IssueAttachmentsDetail(p
 
         {!disabled && (
           <button type="button" onClick={() => setIsDeleteIssueAttachmentModalOpen(true)}>
-            <CloseIcon className="h-4 w-4 text-custom-text-200 hover:text-custom-text-100" />
+            <CloseIcon className="h-4 w-4 text-secondary hover:text-primary" />
           </button>
         )}
       </div>
diff --git a/apps/web/core/components/issues/attachment/attachment-item-list.tsx b/apps/web/core/components/issues/attachment/attachment-item-list.tsx
index 6651616f3..0ac4db84f 100644
--- a/apps/web/core/components/issues/attachment/attachment-item-list.tsx
+++ b/apps/web/core/components/issues/attachment/attachment-item-list.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useCallback, useState } from "react";
 import { observer } from "mobx-react";
 import type { FileRejection } from "react-dropzone";
@@ -127,11 +132,11 @@ export const IssueAttachmentItemList = observer(function IssueAttachmentItemList
           >
             <input {...getInputProps()} />
             {isDragActive && (
-              <div className="absolute flex items-center justify-center left-0 top-0 h-full w-full bg-custom-background-90/75 z-30 ">
-                <div className="flex items-center justify-center p-1 rounded-md bg-custom-background-100">
-                  <div className="flex flex-col justify-center items-center px-5 py-6 rounded-md border border-dashed border-custom-border-300">
+              <div className="absolute top-0 left-0 z-30 flex h-full w-full items-center justify-center bg-surface-2/75">
+                <div className="flex items-center justify-center rounded-md bg-surface-1 p-1">
+                  <div className="flex flex-col items-center justify-center rounded-md border border-dashed border-strong px-5 py-6">
                     <UploadCloud className="size-7" />
-                    <span className="text-sm text-custom-text-300">{t("attachment.drag_and_drop")}</span>
+                    <span className="text-13 text-tertiary">{t("attachment.drag_and_drop")}</span>
                   </div>
                 </div>
               </div>
diff --git a/apps/web/core/components/issues/attachment/attachment-list-item.tsx b/apps/web/core/components/issues/attachment/attachment-list-item.tsx
index b11dece92..6c8135d62 100644
--- a/apps/web/core/components/issues/attachment/attachment-list-item.tsx
+++ b/apps/web/core/components/issues/attachment/attachment-list-item.tsx
@@ -1,7 +1,13 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
-import { Trash } from "lucide-react";
+
 import { useTranslation } from "@plane/i18n";
+import { TrashIcon } from "@plane/propel/icons";
 import { Tooltip } from "@plane/propel/tooltip";
 import type { TIssueServiceType } from "@plane/types";
 import { EIssueServiceType } from "@plane/types";
@@ -54,14 +60,14 @@ export const IssueAttachmentsListItem = observer(function IssueAttachmentsListIt
           window.open(fileURL, "_blank");
         }}
       >
-        <div className="group flex items-center justify-between gap-3 h-11 hover:bg-custom-background-90 pl-9 pr-2">
-          <div className="flex items-center gap-3 text-sm truncate">
+        <div className="group flex h-11 items-center justify-between gap-3 pr-2 pl-9 hover:bg-surface-2">
+          <div className="flex items-center gap-3 truncate text-13">
             <div className="flex items-center gap-3">{fileIcon}</div>
             <Tooltip tooltipContent={`${fileName}.${fileExtension}`} isMobile={isMobile}>
-              <p className="text-custom-text-200 font-medium truncate">{`${fileName}.${fileExtension}`}</p>
+              <p className="truncate font-medium text-secondary">{`${fileName}.${fileExtension}`}</p>
             </Tooltip>
-            <span className="flex size-1.5 bg-custom-background-80 rounded-full" />
-            <span className="flex-shrink-0 text-custom-text-400">{convertBytesToSize(attachment.attributes.size)}</span>
+            <span className="flex size-1.5 rounded-full bg-layer-1" />
+            <span className="flex-shrink-0 text-placeholder">{convertBytesToSize(attachment.attributes.size)}</span>
           </div>
 
           <div className="flex items-center gap-3">
@@ -87,7 +93,7 @@ export const IssueAttachmentsListItem = observer(function IssueAttachmentsListIt
                 }}
               >
                 <div className="flex items-center gap-2">
-                  <Trash className="h-3.5 w-3.5" strokeWidth={2} />
+                  <TrashIcon className="h-3.5 w-3.5" strokeWidth={2} />
                   <span>{t("common.actions.delete")}</span>
                 </div>
               </CustomMenu.MenuItem>
diff --git a/apps/web/core/components/issues/attachment/attachment-list-upload-item.tsx b/apps/web/core/components/issues/attachment/attachment-list-upload-item.tsx
index 9ada6ec08..4b16d8a79 100644
--- a/apps/web/core/components/issues/attachment/attachment-list-upload-item.tsx
+++ b/apps/web/core/components/issues/attachment/attachment-list-upload-item.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 // ui
 import { Tooltip } from "@plane/propel/tooltip";
@@ -26,18 +32,18 @@ export const IssueAttachmentsUploadItem = observer(function IssueAttachmentsUplo
   const { isMobile } = usePlatformOS();
 
   return (
-    <div className="flex items-center justify-between gap-3 h-11 bg-custom-background-90 pl-9 pr-2 pointer-events-none">
-      <div className="flex items-center gap-3 text-sm truncate">
+    <div className="pointer-events-none flex h-11 items-center justify-between gap-3 bg-surface-2 pr-2 pl-9">
+      <div className="flex items-center gap-3 truncate text-13">
         <div className="flex-shrink-0">{fileIcon}</div>
         <Tooltip tooltipContent={fileName} isMobile={isMobile}>
-          <p className="text-custom-text-200 font-medium truncate">{fileName}</p>
+          <p className="truncate font-medium text-secondary">{fileName}</p>
         </Tooltip>
       </div>
-      <div className="flex-shrink-0 flex items-center gap-2">
+      <div className="flex flex-shrink-0 items-center gap-2">
         <span className="flex-shrink-0">
           <CircularProgressIndicator size={20} strokeWidth={3} percentage={uploadStatus.progress} />
         </span>
-        <div className="flex-shrink-0 text-sm font-medium">{uploadStatus.progress}% done</div>
+        <div className="flex-shrink-0 text-13 font-medium">{uploadStatus.progress}% done</div>
       </div>
     </div>
   );
diff --git a/apps/web/core/components/issues/attachment/attachment-upload-details.tsx b/apps/web/core/components/issues/attachment/attachment-upload-details.tsx
index b85cd5932..d86bfe4ce 100644
--- a/apps/web/core/components/issues/attachment/attachment-upload-details.tsx
+++ b/apps/web/core/components/issues/attachment/attachment-upload-details.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import { Tooltip } from "@plane/propel/tooltip";
 import { CircularProgressIndicator } from "@plane/ui";
@@ -26,26 +32,26 @@ export const IssueAttachmentsUploadDetails = observer(function IssueAttachmentsU
   const { isMobile } = usePlatformOS();
 
   return (
-    <div className="flex h-[60px] items-center justify-between gap-1 rounded-md border-[2px] border-custom-border-200 bg-custom-background-90 px-4 py-2 text-sm pointer-events-none">
-      <div className="flex-shrink-0 flex items-center gap-3">
+    <div className="pointer-events-none flex h-[60px] items-center justify-between gap-1 rounded-md border-[2px] border-subtle bg-surface-2 px-4 py-2 text-13">
+      <div className="flex flex-shrink-0 items-center gap-3">
         <div className="h-7 w-7">{fileIcon}</div>
         <div className="flex flex-col gap-1">
           <div className="flex items-center gap-2">
             <Tooltip tooltipContent={fileName} isMobile={isMobile}>
-              <span className="text-sm">{truncateText(`${fileName}`, 10)}</span>
+              <span className="text-13">{truncateText(`${fileName}`, 10)}</span>
             </Tooltip>
           </div>
 
-          <div className="flex items-center gap-3 text-xs text-custom-text-200">
+          <div className="flex items-center gap-3 text-11 text-secondary">
             <span>{fileExtension.toUpperCase()}</span>
           </div>
         </div>
       </div>
-      <div className="flex-shrink-0 flex items-center gap-2">
+      <div className="flex flex-shrink-0 items-center gap-2">
         <span className="flex-shrink-0">
           <CircularProgressIndicator size={20} strokeWidth={3} percentage={uploadStatus.progress} />
         </span>
-        <div className="flex-shrink-0 text-sm font-medium">{uploadStatus.progress}% done</div>
+        <div className="flex-shrink-0 text-13 font-medium">{uploadStatus.progress}% done</div>
       </div>
     </div>
   );
diff --git a/apps/web/core/components/issues/attachment/attachment-upload.tsx b/apps/web/core/components/issues/attachment/attachment-upload.tsx
index a2e078a94..c537361ef 100644
--- a/apps/web/core/components/issues/attachment/attachment-upload.tsx
+++ b/apps/web/core/components/issues/attachment/attachment-upload.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useCallback, useState } from "react";
 import { observer } from "mobx-react";
 import { useDropzone } from "react-dropzone";
@@ -45,16 +51,16 @@ export const IssueAttachmentUpload = observer(function IssueAttachmentUpload(pro
   return (
     <div
       {...getRootProps()}
-      className={`flex h-[60px] items-center justify-center rounded-md border-2 border-dashed bg-custom-primary/5 px-4 text-xs text-custom-primary ${
-        isDragActive ? "border-custom-primary bg-custom-primary/10" : "border-custom-border-200"
-      } ${isDragReject ? "bg-red-100" : ""} ${disabled ? "cursor-not-allowed" : "cursor-pointer"}`}
+      className={`flex h-[60px] items-center justify-center rounded-md border-2 border-dashed bg-accent-primary/5 px-4 text-11 text-accent-primary ${
+        isDragActive ? "border-accent-strong bg-accent-primary/10" : "border-subtle"
+      } ${isDragReject ? "bg-danger-subtle" : ""} ${disabled ? "cursor-not-allowed" : "cursor-pointer"}`}
     >
       <input {...getInputProps()} />
       <span className="flex items-center gap-2">
         {isDragActive ? (
           <p>Drop here...</p>
         ) : fileError ? (
-          <p className="text-center text-red-500">{fileError}</p>
+          <p className="text-center text-danger-primary">{fileError}</p>
         ) : isLoading ? (
           <p className="text-center">Uploading...</p>
         ) : (
diff --git a/apps/web/core/components/issues/attachment/attachments-list.tsx b/apps/web/core/components/issues/attachment/attachments-list.tsx
index 6cd0636ba..a5d75e166 100644
--- a/apps/web/core/components/issues/attachment/attachments-list.tsx
+++ b/apps/web/core/components/issues/attachment/attachments-list.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 // hooks
 import { useIssueDetail } from "@/hooks/store/use-issue-detail";
diff --git a/apps/web/core/components/issues/attachment/delete-attachment-modal.tsx b/apps/web/core/components/issues/attachment/delete-attachment-modal.tsx
index 5ea7225d9..676f4e382 100644
--- a/apps/web/core/components/issues/attachment/delete-attachment-modal.tsx
+++ b/apps/web/core/components/issues/attachment/delete-attachment-modal.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useState } from "react";
 import { observer } from "mobx-react";
 // plane-i18n
diff --git a/apps/web/core/components/issues/attachment/index.ts b/apps/web/core/components/issues/attachment/index.ts
index 1efe34c51..d98033459 100644
--- a/apps/web/core/components/issues/attachment/index.ts
+++ b/apps/web/core/components/issues/attachment/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./root";
diff --git a/apps/web/core/components/issues/attachment/root.tsx b/apps/web/core/components/issues/attachment/root.tsx
index 3143a1da2..7e8597ccf 100644
--- a/apps/web/core/components/issues/attachment/root.tsx
+++ b/apps/web/core/components/issues/attachment/root.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 // hooks
 import { useAttachmentOperations } from "../issue-detail-widgets/attachments/helper";
@@ -20,8 +25,8 @@ export const IssueAttachmentRoot = observer(function IssueAttachmentRoot(props:
   const attachmentHelpers = useAttachmentOperations(workspaceSlug, projectId, issueId);
 
   return (
-    <div className="relative py-3 space-y-3">
-      <h3 className="text-lg">Attachments</h3>
+    <div className="relative space-y-3">
+      <h3 className="text-body-sm-medium">Attachments</h3>
       <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4">
         <IssueAttachmentUpload
           workspaceSlug={workspaceSlug}
diff --git a/apps/web/core/components/issues/bulk-operations/upgrade-banner.tsx b/apps/web/core/components/issues/bulk-operations/upgrade-banner.tsx
index 20e527fb3..bfd333690 100644
--- a/apps/web/core/components/issues/bulk-operations/upgrade-banner.tsx
+++ b/apps/web/core/components/issues/bulk-operations/upgrade-banner.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { MARKETING_PLANE_ONE_PAGE_LINK } from "@plane/constants";
 import { getButtonStyling } from "@plane/propel/button";
 import { cn } from "@plane/utils";
@@ -10,9 +16,9 @@ export function BulkOperationsUpgradeBanner(props: Props) {
   const { className } = props;
 
   return (
-    <div className={cn("sticky bottom-0 left-0 h-20 z-[2] px-3.5 grid place-items-center", className)}>
-      <div className="h-14 w-full bg-custom-primary-100/10 border-[0.5px] border-custom-primary-100/50 py-4 px-3.5 flex items-center justify-between gap-2 rounded-md">
-        <p className="text-custom-primary-100 font-medium">
+    <div className={cn("sticky bottom-0 left-0 z-[2] grid h-20 place-items-center px-3.5", className)}>
+      <div className="flex h-14 w-full items-center justify-between gap-2 rounded-md border-[0.5px] border-accent-strong/50 bg-accent-primary/10 px-3.5 py-4">
+        <p className="font-medium text-accent-primary">
           Change state, priority, and more for several work items at once. Save three minutes on an average per
           operation.
         </p>
@@ -20,7 +26,7 @@ export function BulkOperationsUpgradeBanner(props: Props) {
           href={MARKETING_PLANE_ONE_PAGE_LINK}
           target="_blank"
           rel="noopener noreferrer"
-          className={cn(getButtonStyling("primary", "sm"), "flex-shrink-0")}
+          className={cn(getButtonStyling("primary", "base"), "flex-shrink-0")}
         >
           Upgrade to One
         </a>
diff --git a/apps/web/core/components/issues/confirm-issue-discard.tsx b/apps/web/core/components/issues/confirm-issue-discard.tsx
index 69cfa24b2..9ba05b9af 100644
--- a/apps/web/core/components/issues/confirm-issue-discard.tsx
+++ b/apps/web/core/components/issues/confirm-issue-discard.tsx
@@ -1,9 +1,13 @@
-import React, { useState } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
 
-// headless ui
-import { Dialog, Transition } from "@headlessui/react";
+import { useState } from "react";
 // ui
 import { Button } from "@plane/propel/button";
+import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
 
 type Props = {
   isOpen: boolean;
@@ -29,66 +33,34 @@ export function ConfirmIssueDiscard(props: Props) {
   };
 
   return (
-    <Transition.Root show={isOpen} as={React.Fragment}>
-      <Dialog as="div" className="relative z-30" onClose={handleClose}>
-        <Transition.Child
-          as={React.Fragment}
-          enter="ease-out duration-300"
-          enterFrom="opacity-0"
-          enterTo="opacity-100"
-          leave="ease-in duration-200"
-          leaveFrom="opacity-100"
-          leaveTo="opacity-0"
-        >
-          <div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
-        </Transition.Child>
-
-        <div className="fixed inset-0 z-30 overflow-y-auto">
-          <div className="my-10 flex items-center justify-center p-4 text-center sm:p-0 md:my-32">
-            <Transition.Child
-              as={React.Fragment}
-              enter="ease-out duration-300"
-              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-              enterTo="opacity-100 translate-y-0 sm:scale-100"
-              leave="ease-in duration-200"
-              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-            >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-custom-background-100 text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-[40rem]">
-                <div className="px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
-                  <div className="sm:flex sm:items-start">
-                    <div className="mt-3 text-center sm:mt-0 sm:text-left">
-                      <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-custom-text-100">
-                        Save this draft?
-                      </Dialog.Title>
-                      <div className="mt-2">
-                        <p className="text-sm text-custom-text-200">
-                          You can save this work item to Drafts so you can come back to it later.{" "}
-                        </p>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-                <div className="flex justify-between gap-2 p-4 sm:px-6">
-                  <div>
-                    <Button variant="neutral-primary" size="sm" onClick={onDiscard}>
-                      Discard
-                    </Button>
-                  </div>
-                  <div className="flex items-center gap-2">
-                    <Button variant="neutral-primary" size="sm" onClick={onClose}>
-                      Cancel
-                    </Button>
-                    <Button variant="primary" size="sm" onClick={handleDeletion} loading={isLoading}>
-                      {isLoading ? "Saving" : "Save to Drafts"}
-                    </Button>
-                  </div>
-                </div>
-              </Dialog.Panel>
-            </Transition.Child>
+    <ModalCore isOpen={isOpen} handleClose={handleClose} position={EModalPosition.TOP} width={EModalWidth.XXL}>
+      <div className="px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+        <div className="sm:flex sm:items-start">
+          <div className="mt-3 text-center sm:mt-0 sm:text-left">
+            <h3 className="text-16 leading-6 font-medium text-primary">Save this draft?</h3>
+            <div className="mt-2">
+              <p className="text-13 text-secondary">
+                You can save this work item to Drafts so you can come back to it later.{" "}
+              </p>
+            </div>
           </div>
         </div>
-      </Dialog>
-    </Transition.Root>
+      </div>
+      <div className="flex justify-between gap-2 p-4 sm:px-6">
+        <div>
+          <Button variant="secondary" onClick={onDiscard}>
+            Discard
+          </Button>
+        </div>
+        <div className="flex items-center gap-2">
+          <Button variant="secondary" onClick={onClose}>
+            Cancel
+          </Button>
+          <Button variant="primary" onClick={handleDeletion} loading={isLoading}>
+            {isLoading ? "Saving" : "Save to Drafts"}
+          </Button>
+        </div>
+      </div>
+    </ModalCore>
   );
 }
diff --git a/apps/web/core/components/issues/create-issue-toast-action-items.tsx b/apps/web/core/components/issues/create-issue-toast-action-items.tsx
index d746cadd8..2bdcd552a 100644
--- a/apps/web/core/components/issues/create-issue-toast-action-items.tsx
+++ b/apps/web/core/components/issues/create-issue-toast-action-items.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React, { useState } from "react";
 import { observer } from "mobx-react";
 import { copyUrlToClipboard, generateWorkItemLink } from "@plane/utils";
@@ -18,7 +23,7 @@ type TCreateIssueToastActionItems = {
 export const CreateIssueToastActionItems = observer(function CreateIssueToastActionItems(
   props: TCreateIssueToastActionItems
 ) {
-  const { workspaceSlug, projectId, issueId, isEpic = false } = props;
+  const { workspaceSlug, issueId, isEpic = false } = props;
   // state
   const [copied, setCopied] = useState(false);
   // store hooks
@@ -47,7 +52,7 @@ export const CreateIssueToastActionItems = observer(function CreateIssueToastAct
       await copyUrlToClipboard(workItemLink);
       setCopied(true);
       setTimeout(() => setCopied(false), 3000);
-    } catch (error) {
+    } catch (_error) {
       setCopied(false);
     }
     e.preventDefault();
@@ -55,24 +60,24 @@ export const CreateIssueToastActionItems = observer(function CreateIssueToastAct
   };
 
   return (
-    <div className="flex items-center gap-1 text-xs text-custom-text-200">
+    <div className="-ml-2 flex items-center gap-1 text-11 text-secondary">
       <a
         href={workItemLink}
         target="_blank"
         rel="noopener noreferrer"
-        className="text-custom-primary px-2 py-1 hover:bg-custom-background-90 font-medium rounded"
+        className="rounded-sm px-2 py-1 font-medium text-accent-primary hover:bg-surface-2"
       >
         {`View ${isEpic ? "epic" : "work item"}`}
       </a>
 
       {copied ? (
         <>
-          <span className="cursor-default px-2 py-1 text-custom-text-200">Copied!</span>
+          <span className="cursor-default px-2 py-1 text-secondary">Copied!</span>
         </>
       ) : (
         <>
           <button
-            className="cursor-pointer hidden group-hover:flex px-2 py-1 text-custom-text-300 hover:text-custom-text-200 hover:bg-custom-background-90 rounded"
+            className="hidden cursor-pointer rounded-sm px-2 py-1 text-tertiary group-hover:flex hover:bg-surface-2 hover:text-secondary"
             onClick={copyToClipboard}
           >
             Copy link
diff --git a/apps/web/core/components/issues/delete-issue-modal.tsx b/apps/web/core/components/issues/delete-issue-modal.tsx
index 11a530609..bf789d41a 100644
--- a/apps/web/core/components/issues/delete-issue-modal.tsx
+++ b/apps/web/core/components/issues/delete-issue-modal.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useEffect, useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
@@ -115,7 +121,7 @@ export const DeleteIssueModal = observer(function DeleteIssueModal(props: Props)
         <>
           {/* TODO: Translate here */}
           {`Are you sure you want to delete ${isEpic ? "epic" : "work item"} `}
-          <span className="break-words font-medium text-custom-text-100">
+          <span className="font-medium break-words text-primary">
             {projectDetails?.identifier}-{issue?.sequence_id}
           </span>
           {` ? All of the data related to the ${isEpic ? "epic" : "work item"} will be permanently removed. This action cannot be undone.`}
diff --git a/apps/web/core/components/issues/filters.tsx b/apps/web/core/components/issues/filters.tsx
index 54a154915..0bedecfa7 100644
--- a/apps/web/core/components/issues/filters.tsx
+++ b/apps/web/core/components/issues/filters.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useCallback, useState } from "react";
 import { observer } from "mobx-react";
 import { ChartNoAxesColumn, SlidersHorizontal } from "lucide-react";
@@ -120,12 +126,7 @@ export const HeaderFilters = observer(function HeaderFilters(props: Props) {
         />
       </FiltersDropdown>
       {canUserCreateIssue ? (
-        <Button
-          className="hidden md:block px-2"
-          onClick={() => setAnalyticsModal(true)}
-          variant="neutral-primary"
-          size="sm"
-        >
+        <Button className="hidden px-2 md:block" onClick={() => setAnalyticsModal(true)} variant="secondary" size="lg">
           <div className="hidden @4xl:flex">{t("common.analytics")}</div>
           <div className="flex @4xl:hidden">
             <ChartNoAxesColumn className="size-3.5" />
diff --git a/apps/web/core/components/issues/issue-detail-widgets/action-buttons.tsx b/apps/web/core/components/issues/issue-detail-widgets/action-buttons.tsx
index d0101d5b3..e9b1ac43a 100644
--- a/apps/web/core/components/issues/issue-detail-widgets/action-buttons.tsx
+++ b/apps/web/core/components/issues/issue-detail-widgets/action-buttons.tsx
@@ -1,8 +1,13 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
-import { Link, Paperclip } from "lucide-react";
+import { Paperclip } from "lucide-react";
 import { useTranslation } from "@plane/i18n";
-import { ViewsIcon, RelationPropertyIcon } from "@plane/propel/icons";
+import { LinkIcon, ViewsIcon, RelationPropertyIcon } from "@plane/propel/icons";
 // plane imports
 import type { TIssueServiceType, TWorkItemWidgets } from "@plane/types";
 // plane web imports
@@ -29,7 +34,7 @@ export function IssueDetailWidgetActionButtons(props: Props) {
   const { t } = useTranslation();
 
   return (
-    <div className="flex items-center flex-wrap gap-2">
+    <div className="flex flex-wrap items-center gap-2">
       {!hideWidgets?.includes("sub-work-items") && (
         <SubIssuesActionButton
           issueId={issueId}
@@ -63,7 +68,7 @@ export function IssueDetailWidgetActionButtons(props: Props) {
           customButton={
             <IssueDetailWidgetButton
               title={t("issue.add.link")}
-              icon={<Link className="h-3.5 w-3.5 flex-shrink-0" strokeWidth={2} />}
+              icon={<LinkIcon className="h-3.5 w-3.5 flex-shrink-0" strokeWidth={2} />}
               disabled={disabled}
             />
           }
diff --git a/apps/web/core/components/issues/issue-detail-widgets/attachments/content.tsx b/apps/web/core/components/issues/issue-detail-widgets/attachments/content.tsx
index efadb710d..90c738ee7 100644
--- a/apps/web/core/components/issues/issue-detail-widgets/attachments/content.tsx
+++ b/apps/web/core/components/issues/issue-detail-widgets/attachments/content.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 import { observer } from "mobx-react";
 import type { TIssueServiceType } from "@plane/types";
diff --git a/apps/web/core/components/issues/issue-detail-widgets/attachments/helper.tsx b/apps/web/core/components/issues/issue-detail-widgets/attachments/helper.tsx
index a08133c81..e32dfbbd0 100644
--- a/apps/web/core/components/issues/issue-detail-widgets/attachments/helper.tsx
+++ b/apps/web/core/components/issues/issue-detail-widgets/attachments/helper.tsx
@@ -1,10 +1,14 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useMemo } from "react";
-import { WORK_ITEM_TRACKER_EVENTS } from "@plane/constants";
 import { setPromiseToast, TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { TIssueServiceType } from "@plane/types";
 import { EIssueServiceType } from "@plane/types";
 // hooks
-import { captureError, captureSuccess } from "@/helpers/event-tracker.helper";
 import { useIssueDetail } from "@/hooks/store/use-issue-detail";
 // types
 import type { TAttachmentUploadStatus } from "@/store/issue/issue-details/attachment.store";
@@ -36,34 +40,21 @@ export const useAttachmentOperations = (
   const attachmentOperations: TAttachmentOperations = useMemo(
     () => ({
       create: async (file) => {
-        try {
-          if (!workspaceSlug || !projectId || !issueId) throw new Error("Missing required fields");
-          const attachmentUploadPromise = createAttachment(workspaceSlug, projectId, issueId, file);
-          setPromiseToast(attachmentUploadPromise, {
-            loading: "Uploading attachment...",
-            success: {
-              title: "Attachment uploaded",
-              message: () => "The attachment has been successfully uploaded",
-            },
-            error: {
-              title: "Attachment not uploaded",
-              message: () => "The attachment could not be uploaded",
-            },
-          });
+        if (!workspaceSlug || !projectId || !issueId) throw new Error("Missing required fields");
+        const attachmentUploadPromise = createAttachment(workspaceSlug, projectId, issueId, file);
+        setPromiseToast(attachmentUploadPromise, {
+          loading: "Uploading attachment...",
+          success: {
+            title: "Attachment uploaded",
+            message: () => "The attachment has been successfully uploaded",
+          },
+          error: {
+            title: "Attachment not uploaded",
+            message: () => "The attachment could not be uploaded",
+          },
+        });
 
-          await attachmentUploadPromise;
-          captureSuccess({
-            eventName: WORK_ITEM_TRACKER_EVENTS.attachment.add,
-            payload: { id: issueId },
-          });
-        } catch (error) {
-          captureError({
-            eventName: WORK_ITEM_TRACKER_EVENTS.attachment.add,
-            payload: { id: issueId },
-            error: error as Error,
-          });
-          throw error;
-        }
+        await attachmentUploadPromise;
       },
       remove: async (attachmentId) => {
         try {
@@ -74,16 +65,7 @@ export const useAttachmentOperations = (
             type: TOAST_TYPE.SUCCESS,
             title: "Attachment removed",
           });
-          captureSuccess({
-            eventName: WORK_ITEM_TRACKER_EVENTS.attachment.remove,
-            payload: { id: issueId },
-          });
-        } catch (error) {
-          captureError({
-            eventName: WORK_ITEM_TRACKER_EVENTS.attachment.remove,
-            payload: { id: issueId },
-            error: error as Error,
-          });
+        } catch (_error) {
           setToast({
             message: "The Attachment could not be removed",
             type: TOAST_TYPE.ERROR,
diff --git a/apps/web/core/components/issues/issue-detail-widgets/attachments/index.ts b/apps/web/core/components/issues/issue-detail-widgets/attachments/index.ts
index 78eef9768..3c6016adb 100644
--- a/apps/web/core/components/issues/issue-detail-widgets/attachments/index.ts
+++ b/apps/web/core/components/issues/issue-detail-widgets/attachments/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./content";
 export * from "./title";
 export * from "./root";
diff --git a/apps/web/core/components/issues/issue-detail-widgets/attachments/quick-action-button.tsx b/apps/web/core/components/issues/issue-detail-widgets/attachments/quick-action-button.tsx
index ce642b757..7853b3b4e 100644
--- a/apps/web/core/components/issues/issue-detail-widgets/attachments/quick-action-button.tsx
+++ b/apps/web/core/components/issues/issue-detail-widgets/attachments/quick-action-button.tsx
@@ -1,9 +1,14 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React, { useCallback, useState } from "react";
 import { observer } from "mobx-react";
 import type { FileRejection } from "react-dropzone";
 import { useDropzone } from "react-dropzone";
-import { Plus } from "lucide-react";
+import { PlusIcon } from "@plane/propel/icons";
 // plane imports
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { TIssueServiceType } from "@plane/types";
@@ -98,7 +103,7 @@ export const IssueAttachmentActionButton = observer(function IssueAttachmentActi
     >
       <button {...getRootProps()} type="button" disabled={disabled}>
         <input {...getInputProps()} />
-        {customButton ? customButton : <Plus className="h-4 w-4" />}
+        {customButton ? customButton : <PlusIcon className="h-4 w-4" />}
       </button>
     </div>
   );
diff --git a/apps/web/core/components/issues/issue-detail-widgets/attachments/root.tsx b/apps/web/core/components/issues/issue-detail-widgets/attachments/root.tsx
index 1bf1d457e..e1a94c7d7 100644
--- a/apps/web/core/components/issues/issue-detail-widgets/attachments/root.tsx
+++ b/apps/web/core/components/issues/issue-detail-widgets/attachments/root.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 import { observer } from "mobx-react";
 // plane imports
diff --git a/apps/web/core/components/issues/issue-detail-widgets/attachments/title.tsx b/apps/web/core/components/issues/issue-detail-widgets/attachments/title.tsx
index 93ce65a21..28ce79670 100644
--- a/apps/web/core/components/issues/issue-detail-widgets/attachments/title.tsx
+++ b/apps/web/core/components/issues/issue-detail-widgets/attachments/title.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React, { useMemo } from "react";
 import { observer } from "mobx-react";
 import { useTranslation } from "@plane/i18n";
@@ -34,8 +39,8 @@ export const IssueAttachmentsCollapsibleTitle = observer(function IssueAttachmen
   // indicator element
   const indicatorElement = useMemo(
     () => (
-      <span className="flex items-center justify-center ">
-        <p className="text-base text-custom-text-300 !leading-3">{attachmentCount}</p>
+      <span className="flex items-center justify-center">
+        <p className="text-14 !leading-3 text-tertiary">{attachmentCount}</p>
       </span>
     ),
     [attachmentCount]
diff --git a/apps/web/core/components/issues/issue-detail-widgets/index.ts b/apps/web/core/components/issues/issue-detail-widgets/index.ts
index 1efe34c51..d98033459 100644
--- a/apps/web/core/components/issues/issue-detail-widgets/index.ts
+++ b/apps/web/core/components/issues/issue-detail-widgets/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./root";
diff --git a/apps/web/core/components/issues/issue-detail-widgets/issue-detail-widget-collapsibles.tsx b/apps/web/core/components/issues/issue-detail-widgets/issue-detail-widget-collapsibles.tsx
index fa792e800..8f741ad16 100644
--- a/apps/web/core/components/issues/issue-detail-widgets/issue-detail-widget-collapsibles.tsx
+++ b/apps/web/core/components/issues/issue-detail-widgets/issue-detail-widget-collapsibles.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 import { observer } from "mobx-react";
 // plane imports
diff --git a/apps/web/core/components/issues/issue-detail-widgets/issue-detail-widget-modals.tsx b/apps/web/core/components/issues/issue-detail-widgets/issue-detail-widget-modals.tsx
index c13ec4088..de3d180ce 100644
--- a/apps/web/core/components/issues/issue-detail-widgets/issue-detail-widget-modals.tsx
+++ b/apps/web/core/components/issues/issue-detail-widgets/issue-detail-widget-modals.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 import { observer } from "mobx-react";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
diff --git a/apps/web/core/components/issues/issue-detail-widgets/links/content.tsx b/apps/web/core/components/issues/issue-detail-widgets/links/content.tsx
index 49f2a56b1..3ffe9950c 100644
--- a/apps/web/core/components/issues/issue-detail-widgets/links/content.tsx
+++ b/apps/web/core/components/issues/issue-detail-widgets/links/content.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 import type { TIssueServiceType } from "@plane/types";
 // components
diff --git a/apps/web/core/components/issues/issue-detail-widgets/links/helper.tsx b/apps/web/core/components/issues/issue-detail-widgets/links/helper.tsx
index cdce12ca5..c1bb10f2e 100644
--- a/apps/web/core/components/issues/issue-detail-widgets/links/helper.tsx
+++ b/apps/web/core/components/issues/issue-detail-widgets/links/helper.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useMemo } from "react";
 // plane imports
 import { useTranslation } from "@plane/i18n";
diff --git a/apps/web/core/components/issues/issue-detail-widgets/links/index.ts b/apps/web/core/components/issues/issue-detail-widgets/links/index.ts
index 78eef9768..3c6016adb 100644
--- a/apps/web/core/components/issues/issue-detail-widgets/links/index.ts
+++ b/apps/web/core/components/issues/issue-detail-widgets/links/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./content";
 export * from "./title";
 export * from "./root";
diff --git a/apps/web/core/components/issues/issue-detail-widgets/links/quick-action-button.tsx b/apps/web/core/components/issues/issue-detail-widgets/links/quick-action-button.tsx
index c182d32e5..7ed508929 100644
--- a/apps/web/core/components/issues/issue-detail-widgets/links/quick-action-button.tsx
+++ b/apps/web/core/components/issues/issue-detail-widgets/links/quick-action-button.tsx
@@ -1,7 +1,12 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 import { observer } from "mobx-react";
-import { Plus } from "lucide-react";
+import { PlusIcon } from "@plane/propel/icons";
 // plane imports
 import type { TIssueServiceType } from "@plane/types";
 // hooks
@@ -27,7 +32,7 @@ export const IssueLinksActionButton = observer(function IssueLinksActionButton(p
 
   return (
     <button type="button" onClick={handleOnClick} disabled={disabled}>
-      {customButton ? customButton : <Plus className="h-4 w-4" />}
+      {customButton ? customButton : <PlusIcon className="h-4 w-4" />}
     </button>
   );
 });
diff --git a/apps/web/core/components/issues/issue-detail-widgets/links/root.tsx b/apps/web/core/components/issues/issue-detail-widgets/links/root.tsx
index 5f809be46..bd963868a 100644
--- a/apps/web/core/components/issues/issue-detail-widgets/links/root.tsx
+++ b/apps/web/core/components/issues/issue-detail-widgets/links/root.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 import { observer } from "mobx-react";
 // plane imports
diff --git a/apps/web/core/components/issues/issue-detail-widgets/links/title.tsx b/apps/web/core/components/issues/issue-detail-widgets/links/title.tsx
index c15f20182..b9d1fa763 100644
--- a/apps/web/core/components/issues/issue-detail-widgets/links/title.tsx
+++ b/apps/web/core/components/issues/issue-detail-widgets/links/title.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React, { useMemo } from "react";
 import { observer } from "mobx-react";
 // plane imports
@@ -34,8 +39,8 @@ export const IssueLinksCollapsibleTitle = observer(function IssueLinksCollapsibl
   // indicator element
   const indicatorElement = useMemo(
     () => (
-      <span className="flex items-center justify-center ">
-        <p className="text-base text-custom-text-300 !leading-3">{linksCount}</p>
+      <span className="flex items-center justify-center">
+        <p className="text-14 !leading-3 text-tertiary">{linksCount}</p>
       </span>
     ),
     [linksCount]
diff --git a/apps/web/core/components/issues/issue-detail-widgets/relations/content.tsx b/apps/web/core/components/issues/issue-detail-widgets/relations/content.tsx
index ea60c47db..2e2f5f4a8 100644
--- a/apps/web/core/components/issues/issue-detail-widgets/relations/content.tsx
+++ b/apps/web/core/components/issues/issue-detail-widgets/relations/content.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useState } from "react";
 import { observer } from "mobx-react";
 // plane imports
@@ -130,15 +135,15 @@ export const RelationsCollapsibleContent = observer(function RelationsCollapsibl
 
   return (
     <>
-      <div className="flex flex-col gap-">
+      <div className="gap- flex flex-col">
         {filteredRelationsArray.map((relation) => (
           <div key={relation.relationKey}>
             <Collapsible
               buttonClassName="w-full"
               title={
-                <div className={`flex items-center gap-1 px-2.5 py-1 h-9  w-full ${relation.className}`}>
+                <div className={`flex h-9 w-full items-center gap-1 px-2.5 py-1 ${relation.className}`}>
                   <span>{relation.icon ? relation.icon(14) : null}</span>
-                  <span className="text-sm font-medium leading-5">{relation.label}</span>
+                  <span className="text-13 leading-5 font-medium">{relation.label}</span>
                 </div>
               }
               defaultOpen
diff --git a/apps/web/core/components/issues/issue-detail-widgets/relations/helper.tsx b/apps/web/core/components/issues/issue-detail-widgets/relations/helper.tsx
index 520a44b41..4842a9d17 100644
--- a/apps/web/core/components/issues/issue-detail-widgets/relations/helper.tsx
+++ b/apps/web/core/components/issues/issue-detail-widgets/relations/helper.tsx
@@ -1,13 +1,17 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useMemo } from "react";
 // plane imports
-import { WORK_ITEM_TRACKER_EVENTS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { TIssue, TIssueServiceType } from "@plane/types";
 import { EIssueServiceType } from "@plane/types";
 import { copyUrlToClipboard } from "@plane/utils";
 // hooks
-import { captureError, captureSuccess } from "@/helpers/event-tracker.helper";
 import { useIssueDetail } from "@/hooks/store/use-issue-detail";
 
 export type TRelationIssueOperations = {
@@ -26,33 +30,23 @@ export const useRelationOperations = (
 
   const issueOperations: TRelationIssueOperations = useMemo(
     () => ({
-      copyLink: (path) => {
-        copyUrlToClipboard(path).then(() => {
-          setToast({
-            type: TOAST_TYPE.SUCCESS,
-            title: t("common.link_copied"),
-            message: t("entity.link_copied_to_clipboard", { entity: entityName }),
-          });
+      copyLink: async (path) => {
+        await copyUrlToClipboard(path);
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
+          title: t("common.link_copied"),
+          message: t("entity.link_copied_to_clipboard", { entity: entityName }),
         });
       },
       update: async (workspaceSlug, projectId, issueId, data) => {
         try {
           await updateIssue(workspaceSlug, projectId, issueId, data);
-          captureSuccess({
-            eventName: WORK_ITEM_TRACKER_EVENTS.update,
-            payload: { id: issueId },
-          });
           setToast({
             title: t("toast.success"),
             type: TOAST_TYPE.SUCCESS,
             message: t("entity.update.success", { entity: entityName }),
           });
-        } catch (error) {
-          captureError({
-            eventName: WORK_ITEM_TRACKER_EVENTS.update,
-            payload: { id: issueId },
-            error: error as Error,
-          });
+        } catch (_error) {
           setToast({
             title: t("toast.error"),
             type: TOAST_TYPE.ERROR,
@@ -61,20 +55,7 @@ export const useRelationOperations = (
         }
       },
       remove: async (workspaceSlug, projectId, issueId) => {
-        try {
-          return removeIssue(workspaceSlug, projectId, issueId).then(() => {
-            captureSuccess({
-              eventName: WORK_ITEM_TRACKER_EVENTS.delete,
-              payload: { id: issueId },
-            });
-          });
-        } catch (error) {
-          captureError({
-            eventName: WORK_ITEM_TRACKER_EVENTS.delete,
-            payload: { id: issueId },
-            error: error as Error,
-          });
-        }
+        return removeIssue(workspaceSlug, projectId, issueId);
       },
     }),
     [entityName, removeIssue, t, updateIssue]
diff --git a/apps/web/core/components/issues/issue-detail-widgets/relations/index.ts b/apps/web/core/components/issues/issue-detail-widgets/relations/index.ts
index 78eef9768..3c6016adb 100644
--- a/apps/web/core/components/issues/issue-detail-widgets/relations/index.ts
+++ b/apps/web/core/components/issues/issue-detail-widgets/relations/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./content";
 export * from "./title";
 export * from "./root";
diff --git a/apps/web/core/components/issues/issue-detail-widgets/relations/quick-action-button.tsx b/apps/web/core/components/issues/issue-detail-widgets/relations/quick-action-button.tsx
index f71cfbf9c..46375887c 100644
--- a/apps/web/core/components/issues/issue-detail-widgets/relations/quick-action-button.tsx
+++ b/apps/web/core/components/issues/issue-detail-widgets/relations/quick-action-button.tsx
@@ -1,9 +1,15 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 import { observer } from "mobx-react";
-import { Plus } from "lucide-react";
-// plane imports
+
 import { useTranslation } from "@plane/i18n";
+import { PlusIcon } from "@plane/propel/icons";
+// plane imports
 import type { TIssueServiceType } from "@plane/types";
 import { CustomMenu } from "@plane/ui";
 // hooks
@@ -34,7 +40,7 @@ export const RelationActionButton = observer(function RelationActionButton(props
   };
 
   // button element
-  const customButtonElement = customButton ? <>{customButton}</> : <Plus className="h-4 w-4" />;
+  const customButtonElement = customButton ? <>{customButton}</> : <PlusIcon className="h-4 w-4" />;
 
   return (
     <CustomMenu
diff --git a/apps/web/core/components/issues/issue-detail-widgets/relations/root.tsx b/apps/web/core/components/issues/issue-detail-widgets/relations/root.tsx
index e13f9beb7..d1b5d8088 100644
--- a/apps/web/core/components/issues/issue-detail-widgets/relations/root.tsx
+++ b/apps/web/core/components/issues/issue-detail-widgets/relations/root.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 import { observer } from "mobx-react";
 // plane imports
diff --git a/apps/web/core/components/issues/issue-detail-widgets/relations/title.tsx b/apps/web/core/components/issues/issue-detail-widgets/relations/title.tsx
index 24c82d1c9..658359c22 100644
--- a/apps/web/core/components/issues/issue-detail-widgets/relations/title.tsx
+++ b/apps/web/core/components/issues/issue-detail-widgets/relations/title.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React, { useMemo } from "react";
 import { observer } from "mobx-react";
 import { useTranslation } from "@plane/i18n";
@@ -34,8 +39,8 @@ export const RelationsCollapsibleTitle = observer(function RelationsCollapsibleT
   // indicator element
   const indicatorElement = useMemo(
     () => (
-      <span className="flex items-center justify-center ">
-        <p className="text-base text-custom-text-300 !leading-3">{relationsCount}</p>
+      <span className="flex items-center justify-center">
+        <p className="text-14 !leading-3 text-tertiary">{relationsCount}</p>
       </span>
     ),
     [relationsCount]
diff --git a/apps/web/core/components/issues/issue-detail-widgets/root.tsx b/apps/web/core/components/issues/issue-detail-widgets/root.tsx
index d7a3518b6..2218ec3b7 100644
--- a/apps/web/core/components/issues/issue-detail-widgets/root.tsx
+++ b/apps/web/core/components/issues/issue-detail-widgets/root.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 // plane imports
 import type { TIssueServiceType, TWorkItemWidgets } from "@plane/types";
@@ -30,7 +35,7 @@ export function IssueDetailWidgets(props: Props) {
 
   return (
     <>
-      <div className="flex flex-col gap-5">
+      <div className="flex flex-col space-y-4">
         <IssueDetailWidgetActionButtons
           workspaceSlug={workspaceSlug}
           projectId={projectId}
diff --git a/apps/web/core/components/issues/issue-detail-widgets/sub-issues/content.tsx b/apps/web/core/components/issues/issue-detail-widgets/sub-issues/content.tsx
index 4288c81f8..0dbf8c85a 100644
--- a/apps/web/core/components/issues/issue-detail-widgets/sub-issues/content.tsx
+++ b/apps/web/core/components/issues/issue-detail-widgets/sub-issues/content.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React, { useEffect, useState, useCallback } from "react";
 import { observer } from "mobx-react";
 import type { TIssue, TIssueServiceType } from "@plane/types";
@@ -79,7 +84,8 @@ export const SubIssuesCollapsibleContent = observer(function SubIssuesCollapsibl
   );
 
   const handleFetchSubIssues = useCallback(async () => {
-    if (!subIssueHelpers.issue_visibility.includes(parentIssueId)) {
+    const currentSubIssueHelpers = subIssueHelpersByIssueId(`${parentIssueId}_root`);
+    if (!currentSubIssueHelpers.issue_visibility.includes(parentIssueId)) {
       try {
         setSubIssueHelpers(`${parentIssueId}_root`, "preview_loader", parentIssueId);
         await subIssueOperations.fetchSubIssues(workspaceSlug, projectId, parentIssueId);
@@ -90,14 +96,7 @@ export const SubIssuesCollapsibleContent = observer(function SubIssuesCollapsibl
         setSubIssueHelpers(`${parentIssueId}_root`, "preview_loader", "");
       }
     }
-  }, [
-    parentIssueId,
-    projectId,
-    setSubIssueHelpers,
-    subIssueHelpers.issue_visibility,
-    subIssueOperations,
-    workspaceSlug,
-  ]);
+  }, [parentIssueId, projectId, setSubIssueHelpers, subIssueHelpersByIssueId, subIssueOperations, workspaceSlug]);
 
   useEffect(() => {
     handleFetchSubIssues();
diff --git a/apps/web/core/components/issues/issue-detail-widgets/sub-issues/display-filters.tsx b/apps/web/core/components/issues/issue-detail-widgets/sub-issues/display-filters.tsx
index 63c1ba415..cf4260b2e 100644
--- a/apps/web/core/components/issues/issue-detail-widgets/sub-issues/display-filters.tsx
+++ b/apps/web/core/components/issues/issue-detail-widgets/sub-issues/display-filters.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useMemo } from "react";
 import { isEmpty } from "lodash-es";
 import { observer } from "mobx-react";
@@ -46,16 +51,16 @@ export const SubIssueDisplayFilters = observer(function SubIssueDisplayFilters(p
           menuButton={
             <div
               className={cn(
-                "p-1 rounded  relative transition-all duration-200",
-                isFilterApplied && "bg-custom-primary-60/20"
+                "relative rounded-sm p-1 transition-all duration-200",
+                isFilterApplied && "bg-accent-primary/20"
               )}
             >
-              {isFilterApplied && <span className="p-1 rounded-full bg-custom-primary-100 absolute -top-1 -right-1" />}
-              <SlidersHorizontal className="h-3.5 w-3.5 text-custom-text-100" />
+              {isFilterApplied && <span className="absolute -top-1 -right-1 rounded-full bg-accent-primary p-1" />}
+              <SlidersHorizontal className="h-3.5 w-3.5 text-primary" />
             </div>
           }
         >
-          <div className="vertical-scrollbar scrollbar-sm relative h-full w-full divide-y divide-custom-border-200 overflow-hidden overflow-y-auto px-2.5 max-h-[25rem] text-left">
+          <div className="vertical-scrollbar relative scrollbar-sm h-full max-h-[25rem] w-full divide-y divide-subtle-1 overflow-hidden overflow-y-auto px-2.5 text-left">
             {/* display properties */}
             <div className="py-2">
               <FilterDisplayProperties
diff --git a/apps/web/core/components/issues/issue-detail-widgets/sub-issues/filters.tsx b/apps/web/core/components/issues/issue-detail-widgets/sub-issues/filters.tsx
index a3690ba69..9dbaf05d2 100644
--- a/apps/web/core/components/issues/issue-detail-widgets/sub-issues/filters.tsx
+++ b/apps/web/core/components/issues/issue-detail-widgets/sub-issues/filters.tsx
@@ -1,9 +1,14 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useMemo, useState } from "react";
 import { observer } from "mobx-react";
-import { ListFilter, Search } from "lucide-react";
+import { ListFilter } from "lucide-react";
 import { useTranslation } from "@plane/i18n";
-import { CloseIcon } from "@plane/propel/icons";
+import { SearchIcon, CloseIcon } from "@plane/propel/icons";
 import type { IIssueFilterOptions, IState } from "@plane/types";
 import { cn } from "@plane/utils";
 import {
@@ -44,34 +49,34 @@ export const SubIssueFilters = observer(function SubIssueFilters(props: TSubIssu
         menuButton={
           <div
             className={cn(
-              "p-1 rounded  relative transition-all duration-200",
-              isFilterApplied && "bg-custom-primary-60/20"
+              "relative rounded-sm p-1 transition-all duration-200",
+              isFilterApplied && "bg-accent-primary/20"
             )}
           >
-            {isFilterApplied && <span className="p-1 rounded-full bg-custom-primary-100 absolute -top-1 -right-1" />}
-            <ListFilter className="h-3.5 w-3.5 text-custom-text-100" />
+            {isFilterApplied && <span className="absolute -top-1 -right-1 rounded-full bg-accent-primary p-1" />}
+            <ListFilter className="h-3.5 w-3.5 text-primary" />
           </div>
         }
       >
         <div className="flex max-h-[350px] flex-col overflow-hidden">
-          <div className="bg-custom-background-100 p-2.5 pb-0">
-            <div className="flex items-center gap-1.5 rounded border-[0.5px] border-custom-border-200 bg-custom-background-90 px-1.5 py-1 text-xs">
-              <Search className="text-custom-text-400" size={12} strokeWidth={2} />
+          <div className="bg-surface-1 p-2.5 pb-0">
+            <div className="flex items-center gap-1.5 rounded-sm border-[0.5px] border-subtle bg-surface-2 px-1.5 py-1 text-11">
+              <SearchIcon className="text-placeholder" width={12} height={12} strokeWidth={2} />
               <input
                 type="text"
-                className="w-full bg-custom-background-90 outline-none placeholder:text-custom-text-400"
+                className="w-full bg-surface-2 outline-none placeholder:text-placeholder"
                 placeholder={t("common.search.label")}
                 value={filtersSearchQuery}
                 onChange={(e) => setFiltersSearchQuery(e.target.value)}
               />
               {filtersSearchQuery !== "" && (
                 <button type="button" className="grid place-items-center" onClick={() => setFiltersSearchQuery("")}>
-                  <CloseIcon className="text-custom-text-300" height={12} width={12} strokeWidth={2} />
+                  <CloseIcon className="text-tertiary" height={12} width={12} strokeWidth={2} />
                 </button>
               )}
             </div>
           </div>
-          <div className="vertical-scrollbar scrollbar-sm h-full w-full divide-y divide-custom-border-200 overflow-y-auto px-2.5 text-left">
+          <div className="vertical-scrollbar scrollbar-sm h-full w-full divide-y divide-subtle-1 overflow-y-auto px-2.5 text-left">
             {/* Priority */}
             {isFilterEnabled("priority") && (
               <div className="py-2">
diff --git a/apps/web/core/components/issues/issue-detail-widgets/sub-issues/helper.ts b/apps/web/core/components/issues/issue-detail-widgets/sub-issues/helper.ts
index 3790e1164..8cf524ed9 100644
--- a/apps/web/core/components/issues/issue-detail-widgets/sub-issues/helper.ts
+++ b/apps/web/core/components/issues/issue-detail-widgets/sub-issues/helper.ts
@@ -1,27 +1,24 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useMemo } from "react";
-import { useParams } from "next/navigation";
 // plane imports
-import { WORK_ITEM_TRACKER_EVENTS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { TIssueServiceType, TSubIssueOperations } from "@plane/types";
 import { EIssueServiceType } from "@plane/types";
 import { copyUrlToClipboard } from "@plane/utils";
 // hooks
-import { captureError, captureSuccess } from "@/helpers/event-tracker.helper";
 import { useIssueDetail } from "@/hooks/store/use-issue-detail";
-import { useProjectState } from "@/hooks/store/use-project-state";
-// plane web helpers
-import { updateEpicAnalytics } from "@/plane-web/helpers/epic-analytics";
 
 export const useSubIssueOperations = (issueServiceType: TIssueServiceType): TSubIssueOperations => {
-  // router
-  const { epicId: epicIdParam } = useParams();
   // translation
   const { t } = useTranslation();
   // store hooks
   const {
-    issue: { getIssueById },
     subIssues: { setSubIssueHelpers },
     createSubIssues,
     fetchSubIssues,
@@ -29,28 +26,20 @@ export const useSubIssueOperations = (issueServiceType: TIssueServiceType): TSub
     deleteSubIssue,
     removeSubIssue,
   } = useIssueDetail(issueServiceType);
-  const { getStateById } = useProjectState();
-  const { peekIssue: epicPeekIssue } = useIssueDetail(EIssueServiceType.EPICS);
-  // const { updateEpicAnalytics } = useIssueTypes();
-  const { updateAnalytics } = updateEpicAnalytics();
-
-  // derived values
-  const epicId = epicIdParam || epicPeekIssue?.issueId;
 
   const subIssueOperations: TSubIssueOperations = useMemo(
     () => ({
-      copyLink: (path) => {
-        copyUrlToClipboard(path).then(() => {
-          setToast({
-            type: TOAST_TYPE.SUCCESS,
-            title: t("common.link_copied"),
-            message: t("entity.link_copied_to_clipboard", {
-              entity:
-                issueServiceType === EIssueServiceType.ISSUES
-                  ? t("common.sub_work_items", { count: 1 })
-                  : t("issue.label", { count: 1 }),
-            }),
-          });
+      copyLink: async (path) => {
+        await copyUrlToClipboard(path);
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
+          title: t("common.link_copied"),
+          message: t("entity.link_copied_to_clipboard", {
+            entity:
+              issueServiceType === EIssueServiceType.ISSUES
+                ? t("common.sub_work_items", { count: 1 })
+                : t("issue.label", { count: 1 }),
+          }),
         });
       },
       fetchSubIssues: async (workspaceSlug, projectId, parentIssueId) => {
@@ -107,46 +96,13 @@ export const useSubIssueOperations = (issueServiceType: TIssueServiceType): TSub
         try {
           setSubIssueHelpers(parentIssueId, "issue_loader", issueId);
           await updateSubIssue(workspaceSlug, projectId, parentIssueId, issueId, issueData, oldIssue, fromModal);
-
-          if (issueServiceType === EIssueServiceType.EPICS) {
-            const oldState = getStateById(oldIssue?.state_id)?.group;
-
-            if (oldState && oldIssue && issueData && epicId) {
-              // Check if parent_id is changed if yes then decrement the epic analytics count
-              if (issueData.parent_id && oldIssue?.parent_id && issueData.parent_id !== oldIssue?.parent_id) {
-                updateAnalytics(workspaceSlug, projectId, epicId.toString(), {
-                  decrementStateGroupCount: `${oldState}_issues`,
-                });
-              }
-
-              // Check if state_id is changed if yes then decrement the old state group count and increment the new state group count
-              if (issueData.state_id) {
-                const newState = getStateById(issueData.state_id)?.group;
-                if (oldState && newState && oldState !== newState) {
-                  updateAnalytics(workspaceSlug, projectId, epicId.toString(), {
-                    decrementStateGroupCount: `${oldState}_issues`,
-                    incrementStateGroupCount: `${newState}_issues`,
-                  });
-                }
-              }
-            }
-          }
-          captureSuccess({
-            eventName: WORK_ITEM_TRACKER_EVENTS.sub_issue.update,
-            payload: { id: issueId, parent_id: parentIssueId },
-          });
           setToast({
             type: TOAST_TYPE.SUCCESS,
             title: t("toast.success"),
             message: t("sub_work_item.update.success"),
           });
           setSubIssueHelpers(parentIssueId, "issue_loader", issueId);
-        } catch (error) {
-          captureError({
-            eventName: WORK_ITEM_TRACKER_EVENTS.sub_issue.update,
-            payload: { id: issueId, parent_id: parentIssueId },
-            error: error as Error,
-          });
+        } catch (_error) {
           setToast({
             type: TOAST_TYPE.ERROR,
             title: t("toast.error"),
@@ -158,16 +114,6 @@ export const useSubIssueOperations = (issueServiceType: TIssueServiceType): TSub
         try {
           setSubIssueHelpers(parentIssueId, "issue_loader", issueId);
           await removeSubIssue(workspaceSlug, projectId, parentIssueId, issueId);
-          if (issueServiceType === EIssueServiceType.EPICS) {
-            const issueBeforeRemoval = getIssueById(issueId);
-            const oldState = getStateById(issueBeforeRemoval?.state_id)?.group;
-
-            if (epicId && oldState) {
-              updateAnalytics(workspaceSlug, projectId, epicId.toString(), {
-                decrementStateGroupCount: `${oldState}_issues`,
-              });
-            }
-          }
           setToast({
             type: TOAST_TYPE.SUCCESS,
             title: t("toast.success"),
@@ -178,17 +124,8 @@ export const useSubIssueOperations = (issueServiceType: TIssueServiceType): TSub
                   : t("issue.label", { count: 1 }),
             }),
           });
-          captureSuccess({
-            eventName: WORK_ITEM_TRACKER_EVENTS.sub_issue.remove,
-            payload: { id: issueId, parent_id: parentIssueId },
-          });
           setSubIssueHelpers(parentIssueId, "issue_loader", issueId);
-        } catch (error) {
-          captureError({
-            eventName: WORK_ITEM_TRACKER_EVENTS.sub_issue.remove,
-            payload: { id: issueId, parent_id: parentIssueId },
-            error: error as Error,
-          });
+        } catch (_error) {
           setToast({
             type: TOAST_TYPE.ERROR,
             title: t("toast.error"),
@@ -204,19 +141,9 @@ export const useSubIssueOperations = (issueServiceType: TIssueServiceType): TSub
       deleteSubIssue: async (workspaceSlug, projectId, parentIssueId, issueId) => {
         try {
           setSubIssueHelpers(parentIssueId, "issue_loader", issueId);
-          return deleteSubIssue(workspaceSlug, projectId, parentIssueId, issueId).then(() => {
-            captureSuccess({
-              eventName: WORK_ITEM_TRACKER_EVENTS.sub_issue.delete,
-              payload: { id: issueId, parent_id: parentIssueId },
-            });
-            setSubIssueHelpers(parentIssueId, "issue_loader", issueId);
-          });
-        } catch (error) {
-          captureError({
-            eventName: WORK_ITEM_TRACKER_EVENTS.sub_issue.delete,
-            payload: { id: issueId, parent_id: parentIssueId },
-            error: error as Error,
-          });
+          await deleteSubIssue(workspaceSlug, projectId, parentIssueId, issueId);
+          setSubIssueHelpers(parentIssueId, "issue_loader", issueId);
+        } catch (_error) {
           setToast({
             type: TOAST_TYPE.ERROR,
             title: t("toast.error"),
@@ -233,15 +160,11 @@ export const useSubIssueOperations = (issueServiceType: TIssueServiceType): TSub
     [
       createSubIssues,
       deleteSubIssue,
-      epicId,
       fetchSubIssues,
-      getIssueById,
-      getStateById,
       issueServiceType,
       removeSubIssue,
       setSubIssueHelpers,
       t,
-      updateAnalytics,
       updateSubIssue,
     ]
   );
diff --git a/apps/web/core/components/issues/issue-detail-widgets/sub-issues/index.ts b/apps/web/core/components/issues/issue-detail-widgets/sub-issues/index.ts
index a5fd0a41a..bc6b004bb 100644
--- a/apps/web/core/components/issues/issue-detail-widgets/sub-issues/index.ts
+++ b/apps/web/core/components/issues/issue-detail-widgets/sub-issues/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./content";
 export * from "./display-filters";
 export * from "./quick-action-button";
diff --git a/apps/web/core/components/issues/issue-detail-widgets/sub-issues/issues-list/list-group.tsx b/apps/web/core/components/issues/issue-detail-widgets/sub-issues/issues-list/list-group.tsx
index 57cf2c63a..b76d72410 100644
--- a/apps/web/core/components/issues/issue-detail-widgets/sub-issues/issues-list/list-group.tsx
+++ b/apps/web/core/components/issues/issue-detail-widgets/sub-issues/issues-list/list-group.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useState } from "react";
 import { observer } from "mobx-react";
 import { CircleDashed } from "lucide-react";
@@ -61,16 +66,16 @@ export const SubIssuesListGroup = observer(function SubIssuesListGroup(props: TS
           !isAllIssues && (
             <div className="flex items-center gap-2 p-3">
               <ChevronRightIcon
-                className={cn("size-3.5 transition-all text-custom-text-400", {
+                className={cn("size-3.5 text-placeholder transition-all", {
                   "rotate-90": isCollapsibleOpen,
                 })}
                 strokeWidth={2.5}
               />
-              <div className="flex-shrink-0 grid place-items-center overflow-hidden">
+              <div className="grid flex-shrink-0 place-items-center overflow-hidden">
                 {group.icon ?? <CircleDashed className="size-3.5" strokeWidth={2} />}
               </div>
-              <span className="text-sm text-custom-text-100 font-medium">{group.name}</span>
-              <span className="text-sm text-custom-text-400">{workItemIds.length}</span>
+              <span className="text-13 font-medium text-primary">{group.name}</span>
+              <span className="text-13 text-placeholder">{workItemIds.length}</span>
             </div>
           )
         }
diff --git a/apps/web/core/components/issues/issue-detail-widgets/sub-issues/issues-list/list-item.tsx b/apps/web/core/components/issues/issue-detail-widgets/sub-issues/issues-list/list-item.tsx
index dcf9d1d57..efe3c4b77 100644
--- a/apps/web/core/components/issues/issue-detail-widgets/sub-issues/issues-list/list-item.tsx
+++ b/apps/web/core/components/issues/issue-detail-widgets/sub-issues/issues-list/list-item.tsx
@@ -1,7 +1,13 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
-import { Pencil, Trash, Link as LinkIcon, Loader } from "lucide-react";
+import { Link as Loader } from "lucide-react";
 import { useTranslation } from "@plane/i18n";
-import { CloseIcon, ChevronRightIcon } from "@plane/propel/icons";
+import { LinkIcon, EditIcon, TrashIcon, CloseIcon, ChevronRightIcon } from "@plane/propel/icons";
 // plane imports
 import { Tooltip } from "@plane/propel/tooltip";
 import type { TIssue, TIssueServiceType, TSubIssueOperations } from "@plane/types";
@@ -107,20 +113,20 @@ export const SubIssuesListItem = observer(function SubIssuesListItem(props: Prop
       >
         {issue && (
           <div
-            className="group relative flex min-h-11 h-full w-full items-center pr-2 py-1 transition-all hover:bg-custom-background-90"
+            className="group relative flex h-full min-h-11 w-full items-center py-1 pr-2 transition-all hover:bg-surface-2"
             style={{ paddingLeft: `${spacingLeft}px` }}
           >
-            <div className="flex size-5 items-center justify-center flex-shrink-0">
+            <div className="flex size-5 flex-shrink-0 items-center justify-center">
               {/* disable the chevron when current issue is also the root issue*/}
               {subIssueCount > 0 && !isCurrentIssueRoot && (
                 <>
                   {subIssueHelpers.preview_loader.includes(issue.id) ? (
-                    <div className="flex h-full w-full cursor-not-allowed items-center justify-center rounded-sm bg-custom-background-80 transition-all">
+                    <div className="flex h-full w-full cursor-not-allowed items-center justify-center rounded-xs bg-layer-1 transition-all">
                       <Loader width={14} strokeWidth={2} className="animate-spin" />
                     </div>
                   ) : (
                     <div
-                      className="flex h-full w-full cursor-pointer items-center justify-center text-custom-text-400 hover:text-custom-text-300"
+                      className="flex h-full w-full cursor-pointer items-center justify-center text-placeholder hover:text-tertiary"
                       onClick={async (e) => {
                         e.preventDefault();
                         e.stopPropagation();
@@ -144,7 +150,7 @@ export const SubIssuesListItem = observer(function SubIssuesListItem(props: Prop
               )}
             </div>
 
-            <div className="flex w-full truncate cursor-pointer items-center gap-3">
+            <div className="flex w-full cursor-pointer items-center gap-3 truncate">
               <WithDisplayPropertiesHOC displayProperties={displayProperties || {}} displayPropertyKey="key">
                 <div className="flex-shrink-0">
                   {projectDetail && (
@@ -153,18 +159,19 @@ export const SubIssuesListItem = observer(function SubIssuesListItem(props: Prop
                       issueTypeId={issue.type_id}
                       projectIdentifier={projectDetail.identifier}
                       issueSequenceId={issue.sequence_id}
-                      textContainerClassName="text-xs text-custom-text-200"
+                      size="xs"
+                      variant="secondary"
                     />
                   )}
                 </div>
               </WithDisplayPropertiesHOC>
               <Tooltip tooltipContent={issue.name} isMobile={isMobile}>
-                <span className="w-full truncate text-sm text-custom-text-100">{issue.name}</span>
+                <span className="w-0 flex-1 truncate text-13 text-primary">{issue.name}</span>
               </Tooltip>
             </div>
 
             <div
-              className="flex-shrink-0 text-sm"
+              className="flex-shrink-0 text-13"
               onClick={(e) => {
                 e.preventDefault();
                 e.stopPropagation();
@@ -181,7 +188,7 @@ export const SubIssuesListItem = observer(function SubIssuesListItem(props: Prop
               />
             </div>
 
-            <div className="flex-shrink-0 text-sm">
+            <div className="flex-shrink-0 text-13">
               <CustomMenu placement="bottom-end" ellipsis>
                 {canEdit && (
                   <CustomMenu.MenuItem
@@ -191,7 +198,7 @@ export const SubIssuesListItem = observer(function SubIssuesListItem(props: Prop
                     }}
                   >
                     <div className="flex items-center gap-2">
-                      <Pencil className="h-3.5 w-3.5" strokeWidth={2} />
+                      <EditIcon className="h-3.5 w-3.5" strokeWidth={2} />
                       <span>{t("issue.edit")}</span>
                     </div>
                   </CustomMenu.MenuItem>
@@ -232,7 +239,7 @@ export const SubIssuesListItem = observer(function SubIssuesListItem(props: Prop
                     }}
                   >
                     <div className="flex items-center gap-2">
-                      <Trash className="h-3.5 w-3.5" strokeWidth={2} />
+                      <TrashIcon className="h-3.5 w-3.5" strokeWidth={2} />
                       <span>{t("issue.delete.label")}</span>
                     </div>
                   </CustomMenu.MenuItem>
diff --git a/apps/web/core/components/issues/issue-detail-widgets/sub-issues/issues-list/properties.tsx b/apps/web/core/components/issues/issue-detail-widgets/sub-issues/issues-list/properties.tsx
index 2ee9e2df7..250e8ff88 100644
--- a/apps/web/core/components/issues/issue-detail-widgets/sub-issues/issues-list/properties.tsx
+++ b/apps/web/core/components/issues/issue-detail-widgets/sub-issues/issues-list/properties.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // plane imports
 import type { SyntheticEvent } from "react";
 import { useMemo } from "react";
@@ -116,7 +122,6 @@ export const SubIssuesListItemProperties = observer(function SubIssuesListItemPr
             }
             disabled={!canEdit}
             buttonVariant="border-without-text"
-            buttonClassName="border"
             showTooltip
           />
         </div>
@@ -134,6 +139,7 @@ export const SubIssuesListItemProperties = observer(function SubIssuesListItemPr
               from: getDate(issue.start_date) || undefined,
               to: getDate(issue.target_date) || undefined,
             }}
+            placement="top-end"
             onSelect={(range) => {
               handleStartDate(range?.from ?? null);
               handleTargetDate(range?.to ?? null);
@@ -144,11 +150,12 @@ export const SubIssuesListItemProperties = observer(function SubIssuesListItemPr
             isClearable
             mergeDates
             buttonVariant={issue.start_date || issue.target_date ? "border-with-text" : "border-without-text"}
-            buttonClassName={shouldHighlight ? "text-red-500" : ""}
+            buttonClassName={shouldHighlight ? "text-danger-primary" : ""}
             disabled={!canEdit}
             showTooltip
             customTooltipHeading="Date Range"
             renderPlaceholder={false}
+            renderInPortal
           />
         </div>
       </WithDisplayPropertiesHOC>
@@ -188,8 +195,8 @@ export const SubIssuesListItemProperties = observer(function SubIssuesListItemPr
             placeholder={t("common.order_by.due_date")}
             icon={<DueDatePropertyIcon className="h-3 w-3 flex-shrink-0" />}
             buttonVariant={issue.target_date ? "border-with-text" : "border-without-text"}
-            buttonClassName={shouldHighlight ? "text-red-500" : ""}
-            clearIconClassName="text-custom-text-100"
+            buttonClassName={shouldHighlight ? "text-danger-primary" : ""}
+            clearIconClassName="text-primary"
             optionsClassName="z-30"
             disabled={!canEdit}
             showTooltip
diff --git a/apps/web/core/components/issues/issue-detail-widgets/sub-issues/issues-list/root.tsx b/apps/web/core/components/issues/issue-detail-widgets/sub-issues/issues-list/root.tsx
index 899cfa592..ef808a1fe 100644
--- a/apps/web/core/components/issues/issue-detail-widgets/sub-issues/issues-list/root.tsx
+++ b/apps/web/core/components/issues/issue-detail-widgets/sub-issues/issues-list/root.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useCallback, useMemo } from "react";
 import { observer } from "mobx-react";
 // plane imports
@@ -96,7 +102,7 @@ export const SubIssuesListRoot = observer(function SubIssuesListRoot(props: Prop
           icon={<ListFilter />}
           customClassName={storeType !== EIssuesStoreType.EPIC ? "border-none" : ""}
           actionElement={
-            <Button variant="neutral-primary" size="sm" onClick={() => resetFilters(rootIssueId)}>
+            <Button variant="secondary" onClick={() => resetFilters(rootIssueId)}>
               {t("sub_work_item.empty_state.list_filters.action")}
             </Button>
           }
diff --git a/apps/web/core/components/issues/issue-detail-widgets/sub-issues/quick-action-button.tsx b/apps/web/core/components/issues/issue-detail-widgets/sub-issues/quick-action-button.tsx
index c3ae0f391..ded8cc8cb 100644
--- a/apps/web/core/components/issues/issue-detail-widgets/sub-issues/quick-action-button.tsx
+++ b/apps/web/core/components/issues/issue-detail-widgets/sub-issues/quick-action-button.tsx
@@ -1,15 +1,17 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 import { observer } from "mobx-react";
-import { Plus } from "lucide-react";
 // plane imports
-import { WORK_ITEM_TRACKER_EVENTS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { WorkItemsIcon } from "@plane/propel/icons";
+import { PlusIcon, WorkItemsIcon } from "@plane/propel/icons";
 import type { TIssue, TIssueServiceType } from "@plane/types";
 import { CustomMenu } from "@plane/ui";
 // hooks
-import { captureClick } from "@/helpers/event-tracker.helper";
 import { useIssueDetail } from "@/hooks/store/use-issue-detail";
 
 type Props = {
@@ -54,13 +56,11 @@ export const SubIssuesActionButton = observer(function SubIssuesActionButton(pro
   };
 
   const handleCreateNew = () => {
-    captureClick({ elementName: WORK_ITEM_TRACKER_EVENTS.sub_issue.create });
     handleIssueCrudState("create", issueId, null);
     toggleCreateIssueModal(true);
   };
 
   const handleAddExisting = () => {
-    captureClick({ elementName: WORK_ITEM_TRACKER_EVENTS.sub_issue.add_existing });
     handleIssueCrudState("existing", issueId, null);
     toggleSubIssuesModal(issue.id);
   };
@@ -69,7 +69,7 @@ export const SubIssuesActionButton = observer(function SubIssuesActionButton(pro
   const optionItems = [
     {
       i18n_label: "common.create_new",
-      icon: <Plus className="h-3 w-3" />,
+      icon: <PlusIcon className="h-3 w-3" />,
       onClick: handleCreateNew,
     },
     {
@@ -80,7 +80,7 @@ export const SubIssuesActionButton = observer(function SubIssuesActionButton(pro
   ];
 
   // button element
-  const customButtonElement = customButton ? <>{customButton}</> : <Plus className="h-4 w-4" />;
+  const customButtonElement = customButton ? <>{customButton}</> : <PlusIcon className="h-4 w-4" />;
 
   return (
     <CustomMenu customButton={customButtonElement} placement="bottom-start" disabled={disabled} closeOnSelect>
diff --git a/apps/web/core/components/issues/issue-detail-widgets/sub-issues/root.tsx b/apps/web/core/components/issues/issue-detail-widgets/sub-issues/root.tsx
index ccfa46ac6..4bc8c7969 100644
--- a/apps/web/core/components/issues/issue-detail-widgets/sub-issues/root.tsx
+++ b/apps/web/core/components/issues/issue-detail-widgets/sub-issues/root.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 import { observer } from "mobx-react";
 // plane imports
diff --git a/apps/web/core/components/issues/issue-detail-widgets/sub-issues/title-actions.tsx b/apps/web/core/components/issues/issue-detail-widgets/sub-issues/title-actions.tsx
index de6c8ccd0..524ec4795 100644
--- a/apps/web/core/components/issues/issue-detail-widgets/sub-issues/title-actions.tsx
+++ b/apps/web/core/components/issues/issue-detail-widgets/sub-issues/title-actions.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useCallback } from "react";
 import { cloneDeep } from "lodash-es";
 import { observer } from "mobx-react";
@@ -84,7 +89,7 @@ export const SubWorkItemTitleActions = observer(function SubWorkItemTitleActions
   return (
     // prevent click everywhere
     <div
-      className="flex gap-2 items-center"
+      className="flex items-center gap-2"
       onClick={(e) => {
         e.stopPropagation();
         e.preventDefault();
diff --git a/apps/web/core/components/issues/issue-detail-widgets/sub-issues/title.tsx b/apps/web/core/components/issues/issue-detail-widgets/sub-issues/title.tsx
index 9792c1247..10beb8788 100644
--- a/apps/web/core/components/issues/issue-detail-widgets/sub-issues/title.tsx
+++ b/apps/web/core/components/issues/issue-detail-widgets/sub-issues/title.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 // plane imports
 import { useTranslation } from "@plane/i18n";
@@ -19,14 +24,7 @@ type Props = {
 };
 
 export const SubIssuesCollapsibleTitle = observer(function SubIssuesCollapsibleTitle(props: Props) {
-  const {
-    isOpen,
-    parentIssueId,
-    disabled,
-    issueServiceType = EIssueServiceType.ISSUES,
-    projectId,
-    workspaceSlug,
-  } = props;
+  const { isOpen, parentIssueId, disabled, issueServiceType = EIssueServiceType.ISSUES, projectId } = props;
   // translation
   const { t } = useTranslation();
   // store hooks
@@ -49,7 +47,7 @@ export const SubIssuesCollapsibleTitle = observer(function SubIssuesCollapsibleT
       isOpen={isOpen}
       title={`${issueServiceType === EIssueServiceType.EPICS ? t("issue.label", { count: 1 }) : t("common.sub_work_items")}`}
       indicatorElement={
-        <div className="flex items-center gap-1.5 text-custom-text-300 text-sm">
+        <div className="flex items-center gap-1.5 text-13 text-tertiary">
           <CircularProgressIndicator size={18} percentage={percentage} strokeWidth={3} />
           <span>
             {completedCount}/{totalCount} {t("common.done")}
diff --git a/apps/web/core/components/issues/issue-detail-widgets/widget-button.tsx b/apps/web/core/components/issues/issue-detail-widgets/widget-button.tsx
index cf8568cd4..df2dd31cf 100644
--- a/apps/web/core/components/issues/issue-detail-widgets/widget-button.tsx
+++ b/apps/web/core/components/issues/issue-detail-widgets/widget-button.tsx
@@ -1,7 +1,12 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 // helpers
-import { cn } from "@plane/utils";
+import { Button } from "@plane/propel/button";
 
 type Props = {
   icon: React.ReactNode;
@@ -12,17 +17,9 @@ type Props = {
 export function IssueDetailWidgetButton(props: Props) {
   const { icon, title, disabled = false } = props;
   return (
-    <div
-      className={cn(
-        "h-full w-min whitespace-nowrap flex items-center gap-2 border border-custom-border-200 rounded px-3 py-1.5",
-        {
-          "cursor-not-allowed text-custom-text-400 bg-custom-background-90": disabled,
-          "cursor-pointer text-custom-text-300 hover:bg-custom-background-80": !disabled,
-        }
-      )}
-    >
+    <Button variant={"secondary"} disabled={disabled} size="lg">
       {icon && icon}
-      <span className="text-sm font-medium">{title}</span>
-    </div>
+      <span className="text-body-xs-medium">{title}</span>
+    </Button>
   );
 }
diff --git a/apps/web/core/components/issues/issue-detail/cycle-select.tsx b/apps/web/core/components/issues/issue-detail/cycle-select.tsx
index 09440ace2..00dcdb8cf 100644
--- a/apps/web/core/components/issues/issue-detail/cycle-select.tsx
+++ b/apps/web/core/components/issues/issue-detail/cycle-select.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React, { useState } from "react";
 import { observer } from "mobx-react";
 import { useTranslation } from "@plane/i18n";
@@ -50,8 +56,8 @@ export const IssueCycleSelect = observer(function IssueCycleSelect(props: TIssue
         disabled={disableSelect}
         buttonVariant="transparent-with-text"
         className="group w-full"
-        buttonContainerClassName="w-full text-left rounded"
-        buttonClassName={`text-sm justify-between  ${issue?.cycle_id ? "" : "text-custom-text-400"}`}
+        buttonContainerClassName="w-full text-left h-7.5 rounded-sm"
+        buttonClassName={`text-body-xs-medium justify-between ${issue?.cycle_id ? "" : "text-placeholder"}`}
         placeholder={t("cycle.no_cycle")}
         hideIcon
         dropdownArrow
diff --git a/apps/web/core/components/issues/issue-detail/identifier-text.tsx b/apps/web/core/components/issues/issue-detail/identifier-text.tsx
new file mode 100644
index 000000000..a3a19fee3
--- /dev/null
+++ b/apps/web/core/components/issues/issue-detail/identifier-text.tsx
@@ -0,0 +1,65 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { setToast, TOAST_TYPE } from "@plane/propel/toast";
+import { Tooltip } from "@plane/propel/tooltip";
+import type { TIdentifierTextProps, TIdentifierTextVariant, TIssueIdentifierSize } from "@plane/types";
+import { cn } from "@plane/utils";
+
+const SIZE_MAP: Record<TIssueIdentifierSize, string> = {
+  xs: "text-caption-sm-regular",
+  sm: "text-caption-sm-medium",
+  md: "text-caption-md-medium",
+  lg: "text-caption-lg-medium",
+};
+
+const VARIANT_MAP: Record<TIdentifierTextVariant, string> = {
+  default: "text-tertiary",
+  secondary: "text-secondary",
+  tertiary: "text-tertiary",
+  primary: "text-primary",
+  "primary-subtle": "text-primary/80",
+  success: "text-success-primary",
+};
+
+export function IdentifierText(props: TIdentifierTextProps) {
+  const { identifier, enableClickToCopyIdentifier = false, size = "lg", variant = "default" } = props;
+  // handlers
+  const handleCopyIssueIdentifier = () => {
+    if (enableClickToCopyIdentifier) {
+      navigator.clipboard
+        .writeText(identifier)
+        .then(() => {
+          setToast({
+            type: TOAST_TYPE.SUCCESS,
+            title: "Work item ID copied to clipboard",
+          });
+          return;
+        })
+        .catch(() => {
+          console.error("Failed to copy work item ID");
+        });
+    }
+  };
+
+  const textSizeClassName = SIZE_MAP[size];
+  const variantClassName = VARIANT_MAP[variant];
+
+  return (
+    <Tooltip tooltipContent="Click to copy" disabled={!enableClickToCopyIdentifier} position="top">
+      <button
+        type="button"
+        className={cn("text-12 font-medium whitespace-nowrap text-tertiary", textSizeClassName, variantClassName, {
+          "cursor-pointer": enableClickToCopyIdentifier,
+        })}
+        onClick={handleCopyIssueIdentifier}
+        disabled={!enableClickToCopyIdentifier}
+      >
+        {identifier}
+      </button>
+    </Tooltip>
+  );
+}
diff --git a/apps/web/core/components/issues/issue-detail/index.ts b/apps/web/core/components/issues/issue-detail/index.ts
index 1efe34c51..d98033459 100644
--- a/apps/web/core/components/issues/issue-detail/index.ts
+++ b/apps/web/core/components/issues/issue-detail/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./root";
diff --git a/apps/web/core/components/issues/issue-detail/issue-activity/activity-comment-root.tsx b/apps/web/core/components/issues/issue-detail/issue-activity/activity-comment-root.tsx
index f4a72f34b..689def91c 100644
--- a/apps/web/core/components/issues/issue-detail/issue-activity/activity-comment-root.tsx
+++ b/apps/web/core/components/issues/issue-detail/issue-activity/activity-comment-root.tsx
@@ -1,7 +1,13 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 // plane imports
-import type { E_SORT_ORDER, TActivityFilters } from "@plane/constants";
-import { EActivityFilterType, filterActivityOnSelectedFilters } from "@plane/constants";
+import type { E_SORT_ORDER, TActivityFilters, EActivityFilterType } from "@plane/constants";
+import { BASE_ACTIVITY_FILTER_TYPES, filterActivityOnSelectedFilters } from "@plane/constants";
 import type { TCommentsOperations } from "@plane/types";
 // components
 import { CommentCard } from "@/components/comments/card/root";
@@ -52,13 +58,6 @@ export const IssueActivityCommentRoot = observer(function IssueActivityCommentRo
 
   const filteredActivityAndComments = filterActivityOnSelectedFilters(activityAndComments, selectedFilters);
 
-  const BASE_ACTIVITY_FILTER_TYPES = [
-    EActivityFilterType.ACTIVITY,
-    EActivityFilterType.STATE,
-    EActivityFilterType.ASSIGNEE,
-    EActivityFilterType.DEFAULT,
-  ];
-
   return (
     <div>
       {filteredActivityAndComments.map((activityComment, index) => {
@@ -67,6 +66,7 @@ export const IssueActivityCommentRoot = observer(function IssueActivityCommentRo
           <CommentCard
             key={activityComment.id}
             workspaceSlug={workspaceSlug}
+            entityId={issueId}
             comment={comment}
             activityOperations={activityOperations}
             ends={index === 0 ? "top" : index === filteredActivityAndComments.length - 1 ? "bottom" : undefined}
@@ -74,6 +74,7 @@ export const IssueActivityCommentRoot = observer(function IssueActivityCommentRo
             showCopyLinkOption={!isIntakeIssue}
             disabled={disabled}
             projectId={projectId}
+            enableReplies
           />
         ) : BASE_ACTIVITY_FILTER_TYPES.includes(activityComment.activity_type as EActivityFilterType) ? (
           <IssueActivityItem
diff --git a/apps/web/core/components/issues/issue-detail/issue-activity/activity-filter.tsx b/apps/web/core/components/issues/issue-detail/issue-activity/activity-filter.tsx
index c8ebe538f..601690088 100644
--- a/apps/web/core/components/issues/issue-detail/issue-activity/activity-filter.tsx
+++ b/apps/web/core/components/issues/issue-detail/issue-activity/activity-filter.tsx
@@ -1,9 +1,16 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
-import { Check, ListFilter } from "lucide-react";
+import { ListFilter } from "lucide-react";
 // plane imports
 import type { TActivityFilters, TActivityFilterOption } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
+import { IconButton } from "@plane/propel/icon-button";
+import { CheckIcon } from "@plane/propel/icons";
 import { PopoverMenu } from "@plane/ui";
 // helper
 import { cn } from "@plane/utils";
@@ -24,40 +31,35 @@ export const ActivityFilter = observer(function ActivityFilter(props: TActivityF
     <PopoverMenu
       buttonClassName="outline-none"
       button={
-        <Button
-          variant="neutral-primary"
-          size="sm"
-          prependIcon={<ListFilter className="h-3 w-3" />}
-          className="relative"
-        >
-          <span className="text-custom-text-200">{t("common.filters")}</span>
+        <>
+          <IconButton variant="tertiary" icon={ListFilter} />
           {selectedFilters.length < filterOptions.length && (
-            <span className="absolute h-2 w-2 -right-0.5 -top-0.5 bg-custom-primary-100 rounded-full" />
+            <span className="absolute -top-0.5 -right-0.5 h-2 w-2 rounded-full bg-accent-primary" />
           )}
-        </Button>
+        </>
       }
-      panelClassName="p-2 rounded-md border border-custom-border-200 bg-custom-background-100"
+      panelClassName="p-2 rounded-md border border-subtle bg-surface-1"
       data={filterOptions}
       keyExtractor={(item) => item.key}
       render={(item) => (
         <div
           key={item.key}
-          className="flex items-center gap-2 text-sm cursor-pointer px-2 p-1 transition-all hover:bg-custom-background-80 rounded-sm"
+          className="flex cursor-pointer items-center gap-2 rounded-xs p-1 px-2 text-13 transition-all hover:bg-layer-1"
           onClick={item.onClick}
         >
           <div
             className={cn(
-              "flex-shrink-0 w-3 h-3 flex justify-center items-center rounded-sm transition-all bg-custom-background-90",
+              "flex h-3 w-3 flex-shrink-0 items-center justify-center rounded-xs bg-surface-2 transition-all",
               {
-                "bg-custom-primary text-white": item.isSelected,
-                "bg-custom-background-80 text-custom-text-400": item.isSelected && selectedFilters.length === 1,
-                "bg-custom-background-90": !item.isSelected,
+                "bg-accent-primary text-on-color": item.isSelected,
+                "bg-layer-1 text-placeholder": item.isSelected && selectedFilters.length === 1,
+                "bg-surface-2": !item.isSelected,
               }
             )}
           >
-            {item.isSelected && <Check className="h-2.5 w-2.5" />}
+            {item.isSelected && <CheckIcon className="h-2.5 w-2.5" />}
           </div>
-          <div className={cn("whitespace-nowrap", item.isSelected ? "text-custom-text-100" : "text-custom-text-200")}>
+          <div className={cn("whitespace-nowrap", item.isSelected ? "text-primary" : "text-secondary")}>
             {t(item.labelTranslationKey)}
           </div>
         </div>
diff --git a/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/archived-at.tsx b/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/archived-at.tsx
index 655f2d1de..588d29833 100644
--- a/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/archived-at.tsx
+++ b/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/archived-at.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import { RotateCcw } from "lucide-react";
 // hooks
@@ -24,9 +30,9 @@ export const IssueArchivedAtActivity = observer(function IssueArchivedAtActivity
     <IssueActivityBlockComponent
       icon={
         activity.new_value === "restore" ? (
-          <RotateCcw className="h-3.5 w-3.5 text-custom-text-200" aria-hidden="true" />
+          <RotateCcw className="h-3.5 w-3.5 text-secondary" aria-hidden="true" />
         ) : (
-          <ArchiveIcon className="h-3.5 w-3.5 text-custom-text-200" aria-hidden="true" />
+          <ArchiveIcon className="h-3.5 w-3.5 text-secondary" aria-hidden="true" />
         )
       }
       activityId={activityId}
diff --git a/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/assignee.tsx b/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/assignee.tsx
index 6c2b98bda..35fff299a 100644
--- a/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/assignee.tsx
+++ b/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/assignee.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 // icons
 import { MembersPropertyIcon } from "@plane/propel/icons";
@@ -20,7 +26,7 @@ export const IssueAssigneeActivity = observer(function IssueAssigneeActivity(pro
   if (!activity) return <></>;
   return (
     <IssueActivityBlockComponent
-      icon={<MembersPropertyIcon className="h-3.5 w-3.5 flex-shrink-0 text-custom-text-200" />}
+      icon={<MembersPropertyIcon className="h-3.5 w-3.5 flex-shrink-0 text-secondary" />}
       activityId={activityId}
       ends={ends}
     >
@@ -30,7 +36,7 @@ export const IssueAssigneeActivity = observer(function IssueAssigneeActivity(pro
           href={`/${activity.workspace_detail?.slug}/profile/${activity.new_identifier ?? activity.old_identifier}`}
           target="_blank"
           rel="noopener noreferrer"
-          className="inline-flex items-center font-medium text-custom-text-100 hover:underline capitalize"
+          className="inline-flex items-center font-medium text-primary capitalize hover:underline"
         >
           {activity.new_value && activity.new_value !== "" ? activity.new_value : activity.old_value}
         </a>
diff --git a/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/attachment.tsx b/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/attachment.tsx
index 78bd60da4..c25c4539b 100644
--- a/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/attachment.tsx
+++ b/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/attachment.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import { Paperclip } from "lucide-react";
 // hooks
@@ -19,7 +25,7 @@ export const IssueAttachmentActivity = observer(function IssueAttachmentActivity
   if (!activity) return <></>;
   return (
     <IssueActivityBlockComponent
-      icon={<Paperclip size={14} className="text-custom-text-200" aria-hidden="true" />}
+      icon={<Paperclip size={14} className="text-secondary" aria-hidden="true" />}
       activityId={activityId}
       ends={ends}
     >
diff --git a/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/cycle.tsx b/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/cycle.tsx
index 175e1e370..35fada263 100644
--- a/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/cycle.tsx
+++ b/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/cycle.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 // hooks
 import { CycleIcon } from "@plane/propel/icons";
@@ -20,7 +26,7 @@ export const IssueCycleActivity = observer(function IssueCycleActivity(props: TI
   if (!activity) return <></>;
   return (
     <IssueActivityBlockComponent
-      icon={<CycleIcon className="h-4 w-4 flex-shrink-0 text-custom-text-200" />}
+      icon={<CycleIcon className="h-4 w-4 flex-shrink-0 text-secondary" />}
       activityId={activityId}
       ends={ends}
     >
@@ -32,7 +38,7 @@ export const IssueCycleActivity = observer(function IssueCycleActivity(props: TI
               href={`/${activity.workspace_detail?.slug}/projects/${activity.project}/cycles/${activity.new_identifier}`}
               target="_blank"
               rel="noopener noreferrer"
-              className="inline-flex items-center gap-1 truncate font-medium text-custom-text-100 hover:underline"
+              className="inline-flex items-center gap-1 truncate font-medium text-primary hover:underline"
             >
               <span className="truncate">{activity.new_value}</span>
             </a>
@@ -44,7 +50,7 @@ export const IssueCycleActivity = observer(function IssueCycleActivity(props: TI
               href={`/${activity.workspace_detail?.slug}/projects/${activity.project}/cycles/${activity.new_identifier}`}
               target="_blank"
               rel="noopener noreferrer"
-              className="inline-flex items-center gap-1 truncate font-medium text-custom-text-100 hover:underline"
+              className="inline-flex items-center gap-1 truncate font-medium text-primary hover:underline"
             >
               <span className="truncate"> {activity.new_value}</span>
             </a>
@@ -56,7 +62,7 @@ export const IssueCycleActivity = observer(function IssueCycleActivity(props: TI
               href={`/${activity.workspace_detail?.slug}/projects/${activity.project}/cycles/${activity.old_identifier}`}
               target="_blank"
               rel="noopener noreferrer"
-              className="inline-flex items-center gap-1 truncate font-medium text-custom-text-100 hover:underline"
+              className="inline-flex items-center gap-1 truncate font-medium text-primary hover:underline"
             >
               <span className="truncate"> {activity.new_value}</span>
             </a>
diff --git a/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/default.tsx b/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/default.tsx
index b77129356..b95177cff 100644
--- a/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/default.tsx
+++ b/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/default.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 // plane imports
 import { WorkItemsIcon } from "@plane/propel/icons";
@@ -25,7 +31,7 @@ export const IssueDefaultActivity = observer(function IssueDefaultActivity(props
   return (
     <IssueActivityBlockComponent
       activityId={activityId}
-      icon={<WorkItemsIcon width={14} height={14} className="text-custom-text-200" aria-hidden="true" />}
+      icon={<WorkItemsIcon width={14} height={14} className="text-secondary" aria-hidden="true" />}
       ends={ends}
     >
       <>
diff --git a/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/description.tsx b/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/description.tsx
index 89dc22cf5..1c40cfb12 100644
--- a/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/description.tsx
+++ b/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/description.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import { AlignLeft } from "lucide-react";
 // hooks
@@ -19,7 +25,7 @@ export const IssueDescriptionActivity = observer(function IssueDescriptionActivi
   if (!activity) return <></>;
   return (
     <IssueActivityBlockComponent
-      icon={<AlignLeft size={14} className="text-custom-text-200" aria-hidden="true" />}
+      icon={<AlignLeft size={14} className="text-secondary" aria-hidden="true" />}
       activityId={activityId}
       ends={ends}
     >
diff --git a/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/estimate.tsx b/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/estimate.tsx
index 28338d8a8..e4ae08471 100644
--- a/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/estimate.tsx
+++ b/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/estimate.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import { EstimatePropertyIcon } from "@plane/propel/icons";
 // hooks
@@ -20,7 +26,7 @@ export const IssueEstimateActivity = observer(function IssueEstimateActivity(pro
 
   return (
     <IssueActivityBlockComponent
-      icon={<EstimatePropertyIcon className="h-3.5 w-3.5 text-custom-text-200" aria-hidden="true" />}
+      icon={<EstimatePropertyIcon className="h-3.5 w-3.5 text-secondary" aria-hidden="true" />}
       activityId={activityId}
       ends={ends}
     >
diff --git a/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/helpers/activity-block.tsx b/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/helpers/activity-block.tsx
index 2a3383eb8..a88bc7a80 100644
--- a/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/helpers/activity-block.tsx
+++ b/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/helpers/activity-block.tsx
@@ -1,4 +1,10 @@
-import type { FC, ReactNode } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { ReactNode } from "react";
 import { Network } from "lucide-react";
 // plane imports
 import { Tooltip } from "@plane/propel/tooltip";
@@ -30,15 +36,15 @@ export function IssueActivityBlockComponent(props: TIssueActivityBlockComponent)
   if (!activity) return <></>;
   return (
     <div
-      className={`relative flex items-center gap-3 text-xs ${
+      className={`relative flex items-center gap-3 text-caption-sm-regular ${
         ends === "top" ? `pb-2` : ends === "bottom" ? `pt-2` : `py-2`
       }`}
     >
-      <div className="absolute left-[13px] top-0 bottom-0 w-0.5 bg-custom-background-80" aria-hidden />
-      <div className="flex-shrink-0 ring-6 w-7 h-7 rounded-full overflow-hidden flex justify-center items-center z-[4] bg-custom-background-80 text-custom-text-200">
-        {icon ? icon : <Network className="w-3.5 h-3.5" />}
+      <div className="absolute top-0 bottom-0 left-[13px] w-px bg-layer-3" aria-hidden />
+      <div className="z-[4] flex h-7 w-7 flex-shrink-0 items-center justify-center overflow-hidden rounded-lg border border-subtle bg-layer-2 text-secondary shadow-raised-100">
+        {icon ? icon : <Network className="h-3.5 w-3.5" />}
       </div>
-      <div className="w-full truncate text-custom-text-200">
+      <div className="w-full truncate text-secondary">
         {!activity?.field && activity?.verb === "created" ? (
           <IssueCreatorDisplay activityId={activityId} customUserName={customUserName} />
         ) : (
@@ -50,7 +56,7 @@ export function IssueActivityBlockComponent(props: TIssueActivityBlockComponent)
             isMobile={isMobile}
             tooltipContent={`${renderFormattedDate(activity.created_at)}, ${renderFormattedTime(activity.created_at)}`}
           >
-            <span className="whitespace-nowrap text-custom-text-350"> {calculateTimeAgo(activity.created_at)}</span>
+            <span className="whitespace-nowrap text-tertiary"> {calculateTimeAgo(activity.created_at)}</span>
           </Tooltip>
         </span>
       </div>
diff --git a/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/helpers/issue-link.tsx b/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/helpers/issue-link.tsx
index e8600340d..922f32437 100644
--- a/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/helpers/issue-link.tsx
+++ b/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/helpers/issue-link.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { Tooltip } from "@plane/propel/tooltip";
 import { generateWorkItemLink } from "@plane/utils";
 // hooks
@@ -36,12 +42,12 @@ export function IssueLink(props: TIssueLink) {
         href={`${activity.issue_detail ? workItemLink : "#"}`}
         target={activity.issue === null ? "_self" : "_blank"}
         rel={activity.issue === null ? "" : "noopener noreferrer"}
-        className="inline-flex items-center gap-1 font-medium text-custom-text-100 hover:underline"
+        className="inline-flex items-center gap-1 font-medium text-primary hover:underline"
       >
         {activity.issue_detail
           ? `${activity.project_detail.identifier}-${activity.issue_detail.sequence_id}`
           : "Work items"}{" "}
-        <span className="font-normal">{activity.issue_detail?.name}</span>
+        <span className="font-regular">{activity.issue_detail?.name}</span>
       </a>
     </Tooltip>
   );
diff --git a/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/helpers/issue-user.tsx b/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/helpers/issue-user.tsx
index dcdfa7025..1b6377886 100644
--- a/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/helpers/issue-user.tsx
+++ b/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/helpers/issue-user.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import Link from "next/link";
 // hooks
 import { useIssueDetail } from "@/hooks/store/use-issue-detail";
@@ -21,11 +27,11 @@ export function IssueUser(props: TIssueUser) {
   return (
     <>
       {customUserName ? (
-        <span className="text-custom-text-100 font-medium">{customUserName}</span>
+        <span className="font-medium text-primary">{customUserName}</span>
       ) : (
         <Link
           href={`/${activity?.workspace_detail?.slug}/profile/${activity?.actor_detail?.id}`}
-          className="hover:underline text-custom-text-100 font-medium"
+          className="font-medium text-primary hover:underline"
         >
           {activity.actor_detail?.display_name}
         </Link>
diff --git a/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/inbox.tsx b/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/inbox.tsx
index 43425674f..4dd03c087 100644
--- a/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/inbox.tsx
+++ b/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/inbox.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 // hooks
 import { IntakeIcon } from "@plane/propel/icons";
@@ -35,7 +41,7 @@ export const IssueInboxActivity = observer(function IssueInboxActivity(props: TI
   if (!activity) return <></>;
   return (
     <IssueActivityBlockComponent
-      icon={<IntakeIcon className="h-4 w-4 flex-shrink-0 text-custom-text-200" />}
+      icon={<IntakeIcon className="h-4 w-4 flex-shrink-0 text-secondary" />}
       activityId={activityId}
       ends={ends}
     >
diff --git a/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/index.ts b/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/index.ts
index ea6916308..c64e4afec 100644
--- a/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/index.ts
+++ b/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./default";
 export * from "./name";
 export * from "./description";
diff --git a/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/label-activity-chip.tsx b/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/label-activity-chip.tsx
index 8cd0df354..9976303e5 100644
--- a/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/label-activity-chip.tsx
+++ b/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/label-activity-chip.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { Tooltip } from "@plane/propel/tooltip";
 
 type TIssueLabelPill = { name?: string; color?: string };
@@ -6,7 +12,7 @@ export function LabelActivityChip(props: TIssueLabelPill) {
   const { name, color } = props;
   return (
     <Tooltip tooltipContent={name}>
-      <span className="inline-flex w-min max-w-32 cursor-default flex-shrink-0 items-center gap-2 truncate whitespace-nowrap rounded-full border border-custom-border-300 px-2 py-0.5 text-xs">
+      <span className="inline-flex w-min max-w-32 flex-shrink-0 cursor-default items-center gap-2 truncate rounded-full border border-strong px-2 py-0.5 text-11 whitespace-nowrap">
         <span
           className="h-1.5 w-1.5 flex-shrink-0 rounded-full"
           style={{
@@ -14,7 +20,7 @@ export function LabelActivityChip(props: TIssueLabelPill) {
           }}
           aria-hidden="true"
         />
-        <span className="flex-shrink truncate font-medium text-custom-text-100">{name}</span>
+        <span className="flex-shrink truncate font-medium text-primary">{name}</span>
       </span>
     </Tooltip>
   );
diff --git a/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/label.tsx b/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/label.tsx
index c33a57683..d0584f2d0 100644
--- a/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/label.tsx
+++ b/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/label.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import { LabelPropertyIcon } from "@plane/propel/icons";
 // hooks
@@ -23,7 +29,7 @@ export const IssueLabelActivity = observer(function IssueLabelActivity(props: TI
   if (!activity) return <></>;
   return (
     <IssueActivityBlockComponent
-      icon={<LabelPropertyIcon height={14} width={14} className="text-custom-text-200" />}
+      icon={<LabelPropertyIcon height={14} width={14} className="text-secondary" />}
       activityId={activityId}
       ends={ends}
     >
diff --git a/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/link.tsx b/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/link.tsx
index d22cc840c..1af4cf9e5 100644
--- a/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/link.tsx
+++ b/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/link.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import { MessageSquare } from "lucide-react";
 // hooks
@@ -19,7 +25,7 @@ export const IssueLinkActivity = observer(function IssueLinkActivity(props: TIss
   if (!activity) return <></>;
   return (
     <IssueActivityBlockComponent
-      icon={<MessageSquare size={14} className="text-custom-text-200" aria-hidden="true" />}
+      icon={<MessageSquare size={14} className="text-secondary" aria-hidden="true" />}
       activityId={activityId}
       ends={ends}
     >
@@ -31,7 +37,7 @@ export const IssueLinkActivity = observer(function IssueLinkActivity(props: TIss
               href={`${activity.new_value}`}
               target="_blank"
               rel="noopener noreferrer"
-              className="inline-flex items-center gap-1 font-medium text-custom-text-100 hover:underline"
+              className="inline-flex items-center gap-1 font-medium text-primary hover:underline"
             >
               link
             </a>
@@ -43,7 +49,7 @@ export const IssueLinkActivity = observer(function IssueLinkActivity(props: TIss
               href={`${activity.old_value}`}
               target="_blank"
               rel="noopener noreferrer"
-              className="inline-flex items-center gap-1 font-medium text-custom-text-100 hover:underline"
+              className="inline-flex items-center gap-1 font-medium text-primary hover:underline"
             >
               link
             </a>
@@ -55,7 +61,7 @@ export const IssueLinkActivity = observer(function IssueLinkActivity(props: TIss
               href={`${activity.old_value}`}
               target="_blank"
               rel="noopener noreferrer"
-              className="inline-flex items-center gap-1 font-medium text-custom-text-100 hover:underline"
+              className="inline-flex items-center gap-1 font-medium text-primary hover:underline"
             >
               link
             </a>
diff --git a/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/module.tsx b/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/module.tsx
index a8e297d7d..8e4b53c50 100644
--- a/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/module.tsx
+++ b/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/module.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 // hooks
 import { ModuleIcon } from "@plane/propel/icons";
@@ -20,7 +26,7 @@ export const IssueModuleActivity = observer(function IssueModuleActivity(props:
   if (!activity) return <></>;
   return (
     <IssueActivityBlockComponent
-      icon={<ModuleIcon className="h-4 w-4 flex-shrink-0 text-custom-text-200" />}
+      icon={<ModuleIcon className="h-4 w-4 flex-shrink-0 text-secondary" />}
       activityId={activityId}
       ends={ends}
     >
@@ -32,7 +38,7 @@ export const IssueModuleActivity = observer(function IssueModuleActivity(props:
               href={`/${activity.workspace_detail?.slug}/projects/${activity.project}/modules/${activity.new_identifier}`}
               target="_blank"
               rel="noopener noreferrer"
-              className="inline-flex items-center gap-1 truncate font-medium text-custom-text-100 hover:underline"
+              className="inline-flex items-center gap-1 truncate font-medium text-primary hover:underline"
             >
               <span className="truncate">{activity.new_value}</span>
             </a>
@@ -44,7 +50,7 @@ export const IssueModuleActivity = observer(function IssueModuleActivity(props:
               href={`/${activity.workspace_detail?.slug}/projects/${activity.project}/modules/${activity.new_identifier}`}
               target="_blank"
               rel="noopener noreferrer"
-              className="inline-flex items-center gap-1 truncate font-medium text-custom-text-100 hover:underline"
+              className="inline-flex items-center gap-1 truncate font-medium text-primary hover:underline"
             >
               <span className="truncate"> {activity.new_value}</span>
             </a>
@@ -56,7 +62,7 @@ export const IssueModuleActivity = observer(function IssueModuleActivity(props:
               href={`/${activity.workspace_detail?.slug}/projects/${activity.project}/modules/${activity.old_identifier}`}
               target="_blank"
               rel="noopener noreferrer"
-              className="inline-flex items-center gap-1 truncate font-medium text-custom-text-100 hover:underline"
+              className="inline-flex items-center gap-1 truncate font-medium text-primary hover:underline"
             >
               <span className="truncate"> {activity.old_value}</span>
             </a>
diff --git a/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/name.tsx b/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/name.tsx
index cd15adb69..60058c291 100644
--- a/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/name.tsx
+++ b/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/name.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import { Type } from "lucide-react";
 // hooks
@@ -19,7 +25,7 @@ export const IssueNameActivity = observer(function IssueNameActivity(props: TIss
   if (!activity) return <></>;
   return (
     <IssueActivityBlockComponent
-      icon={<Type size={14} className="text-custom-text-200" aria-hidden="true" />}
+      icon={<Type size={14} className="text-secondary" aria-hidden="true" />}
       activityId={activityId}
       ends={ends}
     >
diff --git a/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/parent.tsx b/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/parent.tsx
index c7a462e82..d1060a276 100644
--- a/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/parent.tsx
+++ b/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/parent.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import { ParentPropertyIcon } from "@plane/propel/icons";
 // hooks
@@ -19,16 +25,16 @@ export const IssueParentActivity = observer(function IssueParentActivity(props:
   if (!activity) return <></>;
   return (
     <IssueActivityBlockComponent
-      icon={<ParentPropertyIcon className="h-3.5 w-3.5 text-custom-text-200" aria-hidden="true" />}
+      icon={<ParentPropertyIcon className="h-3.5 w-3.5 text-secondary" aria-hidden="true" />}
       activityId={activityId}
       ends={ends}
     >
       <>
         {activity.new_value ? `set the parent to ` : `removed the parent `}
         {activity.new_value ? (
-          <span className="font-medium text-custom-text-100">{activity.new_value}</span>
+          <span className="font-medium text-primary">{activity.new_value}</span>
         ) : (
-          <span className="font-medium text-custom-text-100">{activity.old_value}</span>
+          <span className="font-medium text-primary">{activity.old_value}</span>
         )}
         {showIssue && (activity.new_value ? ` for ` : ` from `)}
         {showIssue && <IssueLink activityId={activityId} />}.
diff --git a/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/priority.tsx b/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/priority.tsx
index 0e558b39d..3b89a348a 100644
--- a/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/priority.tsx
+++ b/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/priority.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import { PriorityPropertyIcon } from "@plane/propel/icons";
 // hooks
@@ -19,12 +25,12 @@ export const IssuePriorityActivity = observer(function IssuePriorityActivity(pro
   if (!activity) return <></>;
   return (
     <IssueActivityBlockComponent
-      icon={<PriorityPropertyIcon className="h-3.5 w-3.5 text-custom-text-200" aria-hidden="true" />}
+      icon={<PriorityPropertyIcon className="h-3.5 w-3.5 text-secondary" aria-hidden="true" />}
       activityId={activityId}
       ends={ends}
     >
       <>
-        set the priority to <span className="font-medium text-custom-text-100">{activity.new_value}</span>
+        set the priority to <span className="font-medium text-primary">{activity.new_value}</span>
         {showIssue ? ` for ` : ``}
         {showIssue && <IssueLink activityId={activityId} />}.
       </>
diff --git a/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/relation.tsx b/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/relation.tsx
index 0d1df7a53..fc036611f 100644
--- a/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/relation.tsx
+++ b/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/relation.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 // hooks
 import { useIssueDetail } from "@/hooks/store/use-issue-detail";
@@ -29,9 +35,9 @@ export const IssueRelationActivity = observer(function IssueRelationActivity(pro
     >
       {activityContent}
       {activity.old_value === "" ? (
-        <span className="font-medium text-custom-text-100">{activity.new_value}.</span>
+        <span className="font-medium text-primary">{activity.new_value}.</span>
       ) : (
-        <span className="font-medium text-custom-text-100">{activity.old_value}.</span>
+        <span className="font-medium text-primary">{activity.old_value}.</span>
       )}
     </IssueActivityBlockComponent>
   );
diff --git a/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/start_date.tsx b/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/start_date.tsx
index 39d905d5c..c25eb6d14 100644
--- a/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/start_date.tsx
+++ b/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/start_date.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import { CalendarDays } from "lucide-react";
 // hooks
@@ -21,7 +27,7 @@ export const IssueStartDateActivity = observer(function IssueStartDateActivity(p
   if (!activity) return <></>;
   return (
     <IssueActivityBlockComponent
-      icon={<CalendarDays size={14} className="text-custom-text-200" aria-hidden="true" />}
+      icon={<CalendarDays size={14} className="text-secondary" aria-hidden="true" />}
       activityId={activityId}
       ends={ends}
     >
@@ -29,7 +35,7 @@ export const IssueStartDateActivity = observer(function IssueStartDateActivity(p
         {activity.new_value ? `set the start date to ` : `removed the start date `}
         {activity.new_value && (
           <>
-            <span className="font-medium text-custom-text-100">{renderFormattedDate(activity.new_value)}</span>
+            <span className="font-medium text-primary">{renderFormattedDate(activity.new_value)}</span>
           </>
         )}
         {showIssue && (activity.new_value ? ` for ` : ` from `)}
diff --git a/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/state.tsx b/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/state.tsx
index 4210a1028..c51625573 100644
--- a/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/state.tsx
+++ b/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/state.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 // hooks
 import { StatePropertyIcon } from "@plane/propel/icons";
@@ -20,12 +26,12 @@ export const IssueStateActivity = observer(function IssueStateActivity(props: TI
   if (!activity) return <></>;
   return (
     <IssueActivityBlockComponent
-      icon={<StatePropertyIcon className="h-4 w-4 flex-shrink-0 text-custom-text-200" />}
+      icon={<StatePropertyIcon className="h-4 w-4 flex-shrink-0 text-secondary" />}
       activityId={activityId}
       ends={ends}
     >
       <>
-        set the state to <span className="font-medium text-custom-text-100">{activity.new_value}</span>
+        set the state to <span className="font-medium text-primary">{activity.new_value}</span>
         {showIssue ? ` for ` : ``}
         {showIssue && <IssueLink activityId={activityId} />}.
       </>
diff --git a/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/target_date.tsx b/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/target_date.tsx
index e27d42d3b..d38c49708 100644
--- a/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/target_date.tsx
+++ b/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/target_date.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import { CalendarDays } from "lucide-react";
 // hooks
@@ -22,7 +27,7 @@ export const IssueTargetDateActivity = observer(function IssueTargetDateActivity
   if (!activity) return <></>;
   return (
     <IssueActivityBlockComponent
-      icon={<CalendarDays size={14} className="text-custom-text-200" aria-hidden="true" />}
+      icon={<CalendarDays size={14} className="text-secondary" aria-hidden="true" />}
       activityId={activityId}
       ends={ends}
     >
@@ -30,7 +35,7 @@ export const IssueTargetDateActivity = observer(function IssueTargetDateActivity
         {activity.new_value ? `set the due date to ` : `removed the due date `}
         {activity.new_value && (
           <>
-            <span className="font-medium text-custom-text-100">{renderFormattedDate(activity.new_value)}</span>
+            <span className="font-medium text-primary">{renderFormattedDate(activity.new_value)}</span>
           </>
         )}
         {showIssue && (activity.new_value ? ` for ` : ` from `)}
diff --git a/apps/web/core/components/issues/issue-detail/issue-activity/activity/activity-list.tsx b/apps/web/core/components/issues/issue-detail/issue-activity/activity/activity-list.tsx
index 68d731255..579569ef0 100644
--- a/apps/web/core/components/issues/issue-detail/issue-activity/activity/activity-list.tsx
+++ b/apps/web/core/components/issues/issue-detail/issue-activity/activity/activity-list.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 // helpers
 import { getValidKeysFromObject } from "@plane/utils";
diff --git a/apps/web/core/components/issues/issue-detail/issue-activity/helper.tsx b/apps/web/core/components/issues/issue-detail/issue-activity/helper.tsx
index fc90e858e..8f13d0f50 100644
--- a/apps/web/core/components/issues/issue-detail/issue-activity/helper.tsx
+++ b/apps/web/core/components/issues/issue-detail/issue-activity/helper.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useMemo } from "react";
 import { useTranslation } from "@plane/i18n";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
@@ -10,7 +16,7 @@ import { useMember } from "@/hooks/store/use-member";
 import { useProject } from "@/hooks/store/use-project";
 import { useUser } from "@/hooks/store/user";
 
-export const useCommentOperations = (
+export const useWorkItemCommentOperations = (
   workspaceSlug: string | undefined,
   projectId: string | undefined,
   issueId: string | undefined
diff --git a/apps/web/core/components/issues/issue-detail/issue-activity/index.ts b/apps/web/core/components/issues/issue-detail/issue-activity/index.ts
index 5eb4ac7d3..c20c39ce6 100644
--- a/apps/web/core/components/issues/issue-detail/issue-activity/index.ts
+++ b/apps/web/core/components/issues/issue-detail/issue-activity/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./root";
 
 export * from "./activity-comment-root";
diff --git a/apps/web/core/components/issues/issue-detail/issue-activity/loader.tsx b/apps/web/core/components/issues/issue-detail/issue-activity/loader.tsx
index e0fa46f4b..0e5c3347d 100644
--- a/apps/web/core/components/issues/issue-detail/issue-activity/loader.tsx
+++ b/apps/web/core/components/issues/issue-detail/issue-activity/loader.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // plane imports
 import { Loader } from "@plane/ui";
 
@@ -6,7 +12,7 @@ export function IssueActivityLoader() {
     <Loader className="space-y-8">
       <div className="flex items-start gap-3">
         <Loader.Item className="shrink-0" height="28px" width="28px" />
-        <div className="space-y-2 w-full">
+        <div className="w-full space-y-2">
           <Loader.Item height="8px" width="60%" />
           <Loader.Item height="8px" width="40%" />
           <Loader.Item height="10px" width="100%" />
@@ -14,7 +20,7 @@ export function IssueActivityLoader() {
       </div>
       <div className="flex items-start gap-3">
         <Loader.Item className="shrink-0" height="28px" width="28px" />
-        <div className="space-y-2 w-full">
+        <div className="w-full space-y-2">
           <Loader.Item height="8px" width="40%" />
           <Loader.Item height="8px" width="60%" />
           <Loader.Item height="10px" width="80%" />
@@ -22,7 +28,7 @@ export function IssueActivityLoader() {
       </div>
       <div className="flex items-start gap-3">
         <Loader.Item className="shrink-0" height="28px" width="28px" />
-        <div className="space-y-2 w-full">
+        <div className="w-full space-y-2">
           <Loader.Item height="8px" width="60%" />
           <Loader.Item height="8px" width="40%" />
           <Loader.Item height="10px" width="100%" />
diff --git a/apps/web/core/components/issues/issue-detail/issue-activity/root.tsx b/apps/web/core/components/issues/issue-detail/issue-activity/root.tsx
index d5908517c..66e3bad67 100644
--- a/apps/web/core/components/issues/issue-detail/issue-activity/root.tsx
+++ b/apps/web/core/components/issues/issue-detail/issue-activity/root.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useMemo } from "react";
 import uniq from "lodash-es/uniq";
 import { observer } from "mobx-react";
@@ -19,7 +25,7 @@ import { useUser, useUserPermissions } from "@/hooks/store/user";
 import { ActivityFilterRoot } from "@/plane-web/components/issues/worklog/activity/filter-root";
 import { IssueActivityWorklogCreateButton } from "@/plane-web/components/issues/worklog/activity/worklog-create-button";
 import { IssueActivityCommentRoot } from "./activity-comment-root";
-import { useCommentOperations } from "./helper";
+import { useWorkItemCommentOperations } from "./helper";
 import { ActivitySortRoot } from "./sort-root";
 
 type TIssueActivity = {
@@ -81,7 +87,7 @@ export const IssueActivity = observer(function IssueActivity(props: TIssueActivi
   };
 
   // helper hooks
-  const activityOperations = useCommentOperations(workspaceSlug, projectId, issueId);
+  const activityOperations = useWorkItemCommentOperations(workspaceSlug, projectId, issueId);
 
   const project = getProjectById(projectId);
   const renderCommentCreationBox = useMemo(
@@ -99,10 +105,10 @@ export const IssueActivity = observer(function IssueActivity(props: TIssueActivi
   if (!project) return <></>;
 
   return (
-    <div className="space-y-4 pt-3">
+    <div className="space-y-4">
       {/* header */}
       <div className="flex items-center justify-between">
-        <div className="text-lg text-custom-text-100">{t("common.activity")}</div>
+        <div className="text-h5-medium text-primary">{t("common.activity")}</div>
         <div className="flex items-center gap-2">
           {isWorklogButtonEnabled && (
             <IssueActivityWorklogCreateButton
diff --git a/apps/web/core/components/issues/issue-detail/issue-activity/sort-root.tsx b/apps/web/core/components/issues/issue-detail/issue-activity/sort-root.tsx
index b037540f3..c2eca48be 100644
--- a/apps/web/core/components/issues/issue-detail/issue-activity/sort-root.tsx
+++ b/apps/web/core/components/issues/issue-detail/issue-activity/sort-root.tsx
@@ -1,35 +1,22 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { memo } from "react";
 import { ArrowUpWideNarrow, ArrowDownWideNarrow } from "lucide-react";
 // plane package imports
-import type { E_SORT_ORDER } from "@plane/constants";
-import { getButtonStyling } from "@plane/propel/button";
-import { cn } from "@plane/utils";
+import { E_SORT_ORDER } from "@plane/constants";
+import { IconButton } from "@plane/propel/icon-button";
 
 export type TActivitySortRoot = {
   sortOrder: E_SORT_ORDER;
   toggleSort: () => void;
-  className?: string;
-  iconClassName?: string;
 };
 export const ActivitySortRoot = memo(function ActivitySortRoot(props: TActivitySortRoot) {
-  return (
-    <div
-      className={cn(
-        getButtonStyling("neutral-primary", "sm"),
-        "px-2 text-custom-text-300 cursor-pointer",
-        props.className
-      )}
-      onClick={() => {
-        props.toggleSort();
-      }}
-    >
-      {props.sortOrder === "asc" ? (
-        <ArrowUpWideNarrow className={cn("size-4", props.iconClassName)} />
-      ) : (
-        <ArrowDownWideNarrow className={cn("size-4", props.iconClassName)} />
-      )}
-    </div>
-  );
+  const SortIcon = props.sortOrder === E_SORT_ORDER.ASC ? ArrowUpWideNarrow : ArrowDownWideNarrow;
+  return <IconButton variant="tertiary" icon={SortIcon} onClick={props.toggleSort} />;
 });
 
 ActivitySortRoot.displayName = "ActivitySortRoot";
diff --git a/apps/web/core/components/issues/issue-detail/issue-detail-quick-actions.tsx b/apps/web/core/components/issues/issue-detail/issue-detail-quick-actions.tsx
index 3aa12278e..63f3307a8 100644
--- a/apps/web/core/components/issues/issue-detail/issue-detail-quick-actions.tsx
+++ b/apps/web/core/components/issues/issue-detail/issue-detail-quick-actions.tsx
@@ -1,16 +1,19 @@
-import type { FC } from "react";
-import React, { useRef } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useRef } from "react";
 import { observer } from "mobx-react";
-import { LinkIcon } from "lucide-react";
 // plane imports
-import { WORK_ITEM_TRACKER_EVENTS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
+import { CopyLinkIcon } from "@plane/propel/icons";
+import { IconButton } from "@plane/propel/icon-button";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import { Tooltip } from "@plane/propel/tooltip";
 import { EIssuesStoreType } from "@plane/types";
 import { generateWorkItemLink, copyTextToClipboard } from "@plane/utils";
-// helpers
-import { captureError, captureSuccess } from "@/helpers/event-tracker.helper";
 // hooks
 import { useIssueDetail } from "@/hooks/store/use-issue-detail";
 import { useIssues } from "@/hooks/store/use-issues";
@@ -69,15 +72,21 @@ export const IssueDetailQuickActions = observer(function IssueDetailQuickActions
   });
 
   // handlers
-  const handleCopyText = () => {
-    const originURL = typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
-    copyTextToClipboard(`${originURL}${workItemLink}`).then(() => {
+  const handleCopyText = async () => {
+    try {
+      const originURL = typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
+      await copyTextToClipboard(`${originURL}${workItemLink}`);
       setToast({
         type: TOAST_TYPE.SUCCESS,
         title: t("common.link_copied"),
         message: t("common.copied_to_clipboard"),
       });
-    });
+    } catch (_error) {
+      setToast({
+        title: t("toast.error"),
+        type: TOAST_TYPE.ERROR,
+      });
+    }
   };
 
   const handleDeleteIssue = async () => {
@@ -87,24 +96,14 @@ export const IssueDetailQuickActions = observer(function IssueDetailQuickActions
         ? `/${workspaceSlug}/projects/${projectId}/archives/issues`
         : `/${workspaceSlug}/projects/${projectId}/issues`;
 
-      return deleteIssue(workspaceSlug, projectId, issueId).then(() => {
-        router.push(redirectionPath);
-        captureSuccess({
-          eventName: WORK_ITEM_TRACKER_EVENTS.delete,
-          payload: { id: issueId },
-        });
-      });
-    } catch (error) {
+      await deleteIssue(workspaceSlug, projectId, issueId);
+      router.push(redirectionPath);
+    } catch (_error) {
       setToast({
         title: t("toast.error "),
         type: TOAST_TYPE.ERROR,
         message: t("entity.delete.failed", { entity: t("issue.label", { count: 1 }) }),
       });
-      captureError({
-        eventName: WORK_ITEM_TRACKER_EVENTS.delete,
-        payload: { id: issueId },
-        error: error as Error,
-      });
     }
   };
 
@@ -112,56 +111,44 @@ export const IssueDetailQuickActions = observer(function IssueDetailQuickActions
     try {
       await archiveIssue(workspaceSlug, projectId, issueId);
       router.push(`/${workspaceSlug}/projects/${projectId}/issues`);
-      captureSuccess({
-        eventName: WORK_ITEM_TRACKER_EVENTS.archive,
-        payload: { id: issueId },
-      });
-    } catch (error) {
-      captureError({
-        eventName: WORK_ITEM_TRACKER_EVENTS.archive,
-        payload: { id: issueId },
-        error: error as Error,
+    } catch (_error) {
+      setToast({
+        title: t("toast.error"),
+        type: TOAST_TYPE.ERROR,
+        message: t("issue.archive.failed.message"),
       });
     }
   };
 
   const handleRestore = async () => {
     if (!workspaceSlug || !projectId || !issueId) return;
-
-    await restoreIssue(workspaceSlug.toString(), projectId.toString(), issueId.toString())
-      .then(() => {
-        setToast({
-          type: TOAST_TYPE.SUCCESS,
-          title: t("issue.restore.success.title"),
-          message: t("issue.restore.success.message"),
-        });
-        router.push(workItemLink);
-      })
-      .catch(() => {
-        setToast({
-          type: TOAST_TYPE.ERROR,
-          title: t("toast.error"),
-          message: t("issue.restore.failed.message"),
-        });
+    try {
+      await restoreIssue(workspaceSlug.toString(), projectId.toString(), issueId.toString());
+      setToast({
+        type: TOAST_TYPE.SUCCESS,
+        title: t("issue.restore.success.title"),
+        message: t("issue.restore.success.message"),
       });
+      router.push(workItemLink);
+    } catch (_error) {
+      setToast({
+        title: t("toast.error"),
+        type: TOAST_TYPE.ERROR,
+        message: t("issue.restore.failed.message"),
+      });
+    }
   };
 
   return (
     <>
-      <div className="flex items-center justify-end flex-shrink-0">
-        <div className="flex flex-wrap items-center gap-4">
+      <div className="flex flex-shrink-0 items-center justify-end">
+        <div className="flex flex-wrap items-center gap-2">
           {currentUser && !issue?.archived_at && (
             <IssueSubscription workspaceSlug={workspaceSlug} projectId={projectId} issueId={issueId} />
           )}
-          <div className="flex flex-wrap items-center gap-2.5 text-custom-text-300">
+          <div className="flex flex-wrap items-center gap-2 text-tertiary">
             <Tooltip tooltipContent={t("common.actions.copy_link")} isMobile={isMobile}>
-              <button
-                type="button"
-                className="grid h-5 w-5 place-items-center rounded hover:text-custom-text-200 focus:outline-none focus:ring-2 focus:ring-custom-primary"
-                onClick={handleCopyText}
-              >
-                <LinkIcon className="h-4 w-4" />
-              </button>
+              <IconButton variant="secondary" size="lg" onClick={handleCopyText} icon={CopyLinkIcon} />
             </Tooltip>
             <WorkItemDetailQuickActions
               parentRef={parentRef}
diff --git a/apps/web/core/components/issues/issue-detail/label/create-label.tsx b/apps/web/core/components/issues/issue-detail/label/create-label.tsx
index 1b108cd9c..6db63e9b0 100644
--- a/apps/web/core/components/issues/issue-detail/label/create-label.tsx
+++ b/apps/web/core/components/issues/issue-detail/label/create-label.tsx
@@ -1,10 +1,16 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useState, Fragment, useEffect } from "react";
 import { TwitterPicker } from "react-color";
 import { Controller, useForm } from "react-hook-form";
 import { usePopper } from "react-popper";
-import { Plus, Loader } from "lucide-react";
+import { Loader } from "lucide-react";
 import { Popover } from "@headlessui/react";
-import { CloseIcon } from "@plane/propel/icons";
+import { PlusIcon, CloseIcon } from "@plane/propel/icons";
 import type { IIssueLabel } from "@plane/types";
 // hooks
 import { Input } from "@plane/ui";
@@ -76,11 +82,11 @@ export function LabelCreate(props: ILabelCreate) {
   return (
     <>
       <div
-        className="relative flex flex-shrink-0 cursor-pointer items-center gap-1 rounded-full border border-custom-border-100 p-0.5 px-2 text-xs text-custom-text-300 transition-all hover:bg-custom-background-90 hover:text-custom-text-200"
+        className="relative flex flex-shrink-0 cursor-pointer items-center gap-1 rounded-full border border-subtle p-0.5 px-2 text-11 text-tertiary transition-all hover:bg-surface-2 hover:text-secondary"
         onClick={handleIsCreateToggle}
       >
         <div className="flex-shrink-0">
-          {isCreateToggle ? <CloseIcon className="h-2.5 w-2.5" /> : <Plus className="h-2.5 w-2.5" />}
+          {isCreateToggle ? <CloseIcon className="h-2.5 w-2.5" /> : <PlusIcon className="h-2.5 w-2.5" />}
         </div>
         <div className="flex-shrink-0">{isCreateToggle ? "Cancel" : "New"}</div>
       </div>
@@ -98,7 +104,7 @@ export function LabelCreate(props: ILabelCreate) {
                       <button type="button" ref={setReferenceElement} className="grid place-items-center outline-none">
                         {value && value?.trim() !== "" && (
                           <span
-                            className="h-5 w-5 rounded"
+                            className="h-5 w-5 rounded-sm"
                             style={{
                               backgroundColor: value ?? "black",
                             }}
@@ -108,7 +114,7 @@ export function LabelCreate(props: ILabelCreate) {
                     </Popover.Button>
                     <Popover.Panel className="fixed z-10">
                       <div
-                        className="p-2 max-w-xs sm:px-0"
+                        className="max-w-xs p-2 sm:px-0"
                         ref={setPopperElement}
                         style={styles.popper}
                         {...attributes.popper}
@@ -137,24 +143,28 @@ export function LabelCreate(props: ILabelCreate) {
                 ref={ref}
                 hasError={Boolean(errors.name)}
                 placeholder="Title"
-                className="w-full text-xs px-1.5 py-1"
+                className="w-full px-1.5 py-1 text-11"
                 disabled={isSubmitting}
               />
             )}
           />
           <button
             type="button"
-            className="grid place-items-center rounded bg-red-500 p-1"
+            className="grid place-items-center rounded-sm bg-danger-primary p-1"
             onClick={() => setIsCreateToggle(false)}
             disabled={disabled}
           >
-            <CloseIcon className="h-3.5 w-3.5 text-white" />
+            <CloseIcon className="h-3.5 w-3.5 text-on-color" />
           </button>
-          <button type="submit" className="grid place-items-center rounded bg-green-500 p-1" disabled={isSubmitting}>
+          <button
+            type="submit"
+            className="grid place-items-center rounded-sm bg-success-primary p-1"
+            disabled={isSubmitting}
+          >
             {isSubmitting ? (
-              <Loader className="spin h-3.5 w-3.5 text-white" />
+              <Loader className="spin h-3.5 w-3.5 text-on-color" />
             ) : (
-              <Plus className="h-3.5 w-3.5 text-white" />
+              <PlusIcon className="h-3.5 w-3.5 text-on-color" />
             )}
           </button>
         </form>
diff --git a/apps/web/core/components/issues/issue-detail/label/index.ts b/apps/web/core/components/issues/issue-detail/label/index.ts
index 83f1e73bc..cb23f5948 100644
--- a/apps/web/core/components/issues/issue-detail/label/index.ts
+++ b/apps/web/core/components/issues/issue-detail/label/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./root";
 
 export * from "./label-list";
diff --git a/apps/web/core/components/issues/issue-detail/label/label-list-item.tsx b/apps/web/core/components/issues/issue-detail/label/label-list-item.tsx
index fad98c7db..ff2f84f7d 100644
--- a/apps/web/core/components/issues/issue-detail/label/label-list-item.tsx
+++ b/apps/web/core/components/issues/issue-detail/label/label-list-item.tsx
@@ -1,5 +1,12 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
-import { CloseIcon } from "@plane/propel/icons";
+import { Button } from "@plane/propel/button";
+import { CloseIcon, LabelFilledIcon } from "@plane/propel/icons";
 // types
 import { useLabel } from "@/hooks/store/use-label";
 import type { TLabelOperations } from "./root";
@@ -30,25 +37,10 @@ export const LabelListItem = observer(function LabelListItem(props: TLabelListIt
 
   if (!label) return <></>;
   return (
-    <div
-      key={labelId}
-      className={`transition-all relative flex items-center gap-1 truncate border border-custom-border-100 rounded-full text-xs p-0.5 px-1 group ${
-        !disabled ? "cursor-pointer hover:border-red-500/50 hover:bg-red-500/20" : "cursor-not-allowed"
-      } `}
-      onClick={handleLabel}
-    >
-      <div
-        className="rounded-full h-2 w-2 flex-shrink-0"
-        style={{
-          backgroundColor: label.color ?? "#000000",
-        }}
-      />
-      <div className="truncate">{label.name}</div>
-      {!disabled && (
-        <div className="flex-shrink-0">
-          <CloseIcon className="transition-all h-2.5 w-2.5 group-hover:text-red-500" />
-        </div>
-      )}
-    </div>
+    <Button variant="tertiary" size="sm" key={labelId} onClick={handleLabel} disabled={disabled}>
+      <LabelFilledIcon className="size-3" color={label.color ?? "#000000"} />
+      <span className="text-body-xs-regular">{label.name}</span>
+      {!disabled && <CloseIcon className="h-2.5 w-2.5 transition-all group-hover:text-danger-primary" />}
+    </Button>
   );
 });
diff --git a/apps/web/core/components/issues/issue-detail/label/label-list.tsx b/apps/web/core/components/issues/issue-detail/label/label-list.tsx
index 4e3d9030a..054f84a29 100644
--- a/apps/web/core/components/issues/issue-detail/label/label-list.tsx
+++ b/apps/web/core/components/issues/issue-detail/label/label-list.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 // components
 import { LabelListItem } from "./label-list-item";
diff --git a/apps/web/core/components/issues/issue-detail/label/root.tsx b/apps/web/core/components/issues/issue-detail/label/root.tsx
index 9880fecba..b205c56d5 100644
--- a/apps/web/core/components/issues/issue-detail/label/root.tsx
+++ b/apps/web/core/components/issues/issue-detail/label/root.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useMemo } from "react";
 import { observer } from "mobx-react";
 import { useTranslation } from "@plane/i18n";
@@ -56,7 +62,7 @@ export const IssueLabel = observer(function IssueLabel(props: TIssueLabel) {
         try {
           if (onLabelUpdate) onLabelUpdate(data.label_ids || []);
           else await updateIssue(workspaceSlug, projectId, issueId, data);
-        } catch (error) {
+        } catch (_error) {
           setToast({
             title: t("toast.error"),
             type: TOAST_TYPE.ERROR,
@@ -92,7 +98,7 @@ export const IssueLabel = observer(function IssueLabel(props: TIssueLabel) {
   );
 
   return (
-    <div className="relative flex flex-wrap items-center gap-1">
+    <div className="relative flex min-h-7.5 w-full flex-wrap items-center gap-1 px-2">
       <LabelList
         workspaceSlug={workspaceSlug}
         projectId={projectId}
diff --git a/apps/web/core/components/issues/issue-detail/label/select/label-select.tsx b/apps/web/core/components/issues/issue-detail/label/select/label-select.tsx
index 52e7095cf..e44e27d38 100644
--- a/apps/web/core/components/issues/issue-detail/label/select/label-select.tsx
+++ b/apps/web/core/components/issues/issue-detail/label/select/label-select.tsx
@@ -1,12 +1,19 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { Fragment, useState } from "react";
 import { observer } from "mobx-react";
 import { usePopper } from "react-popper";
-import { Check, Loader, Search } from "lucide-react";
+import { Loader } from "lucide-react";
 import { Combobox } from "@headlessui/react";
 // plane imports
 import { EUserPermissionsLevel, getRandomLabelColor } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { LabelPropertyIcon } from "@plane/propel/icons";
+import { Button } from "@plane/propel/button";
+import { CheckIcon, SearchIcon, PlusIcon } from "@plane/propel/icons";
 import type { IIssueLabel } from "@plane/types";
 import { EUserProjectRoles } from "@plane/types";
 // helpers
@@ -72,7 +79,7 @@ export const IssueLabelSelect = observer(function IssueLabelSelect(props: IIssue
     query === "" ? options : options?.filter((option) => option.query.toLowerCase().includes(query.toLowerCase()));
 
   const { styles, attributes } = usePopper(referenceElement, popperElement, {
-    placement: "bottom-end",
+    placement: "bottom-start",
     modifiers: [
       {
         name: "preventOverflow",
@@ -85,16 +92,7 @@ export const IssueLabelSelect = observer(function IssueLabelSelect(props: IIssue
 
   const issueLabels = values ?? [];
 
-  const label = (
-    <div
-      className={`relative flex flex-shrink-0 cursor-pointer items-center gap-1 rounded-full border border-custom-border-100 p-0.5 px-2 py-0.5 text-xs text-custom-text-300 transition-all hover:bg-custom-background-90 hover:text-custom-text-200`}
-    >
-      <div className="flex-shrink-0">
-        <LabelPropertyIcon className="h-2.5 w-2.5" />
-      </div>
-      <div className="flex-shrink-0">{t("label.select")}</div>
-    </div>
-  );
+  const label = <span className="text-body-xs-medium text-placeholder">{t("label.select")}</span>;
 
   const searchInputKeyDown = async (e: React.KeyboardEvent<HTMLInputElement>) => {
     if (query !== "" && e.key === "Escape") {
@@ -123,34 +121,36 @@ export const IssueLabelSelect = observer(function IssueLabelSelect(props: IIssue
     <>
       <Combobox
         as="div"
-        className={`w-auto max-w-full flex-shrink-0 text-left`}
+        className="size-full flex-shrink-0 text-left"
         value={issueLabels}
         onChange={(value) => onSelect(value)}
         multiple
       >
         <Combobox.Button as={Fragment}>
-          <button
+          <Button
             ref={setReferenceElement}
             type="button"
-            className="cursor-pointer rounded"
+            variant="tertiary"
+            size="sm"
+            prependIcon={<PlusIcon />}
             onClick={() => !projectLabels && fetchLabels()}
           >
             {label}
-          </button>
+          </Button>
         </Combobox.Button>
 
         <Combobox.Options className="fixed z-10">
           <div
-            className={`z-10 my-1 w-48 whitespace-nowrap rounded border border-custom-border-300 bg-custom-background-100 py-2.5 text-xs shadow-custom-shadow-rg focus:outline-none`}
+            className={`z-10 my-1 w-48 rounded-sm border border-strong bg-surface-1 py-2.5 text-11 whitespace-nowrap shadow-raised-200 focus:outline-none`}
             ref={setPopperElement}
             style={styles.popper}
             {...attributes.popper}
           >
             <div className="px-2">
-              <div className="flex w-full items-center justify-start rounded border border-custom-border-200 bg-custom-background-90 px-2">
-                <Search className="h-3.5 w-3.5 text-custom-text-300" />
+              <div className="flex w-full items-center justify-start rounded-sm border border-subtle bg-surface-2 px-2">
+                <SearchIcon className="h-3.5 w-3.5 text-tertiary" />
                 <Combobox.Input
-                  className="w-full bg-transparent px-2 py-1 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
+                  className="w-full bg-transparent px-2 py-1 text-11 text-secondary placeholder:text-placeholder focus:outline-none"
                   value={query}
                   onChange={(e) => setQuery(e.target.value)}
                   placeholder={t("common.search.label")}
@@ -160,17 +160,17 @@ export const IssueLabelSelect = observer(function IssueLabelSelect(props: IIssue
                 />
               </div>
             </div>
-            <div className={`vertical-scrollbar scrollbar-sm mt-2 max-h-48 space-y-1 overflow-y-scroll px-2 pr-0`}>
+            <div className={`vertical-scrollbar mt-2 scrollbar-sm max-h-48 space-y-1 overflow-y-scroll px-2 pr-0`}>
               {isLoading ? (
-                <p className="text-center text-custom-text-200">{t("common.loading")}</p>
+                <p className="text-center text-secondary">{t("common.loading")}</p>
               ) : filteredOptions.length > 0 ? (
                 filteredOptions.map((option) => (
                   <Combobox.Option
                     key={option.value}
                     value={option.value}
                     className={({ selected }) =>
-                      `flex cursor-pointer select-none items-center justify-between gap-2 truncate rounded px-1 py-1.5 hover:bg-custom-background-80 ${
-                        selected ? "text-custom-text-100" : "text-custom-text-200"
+                      `flex cursor-pointer items-center justify-between gap-2 truncate rounded-sm px-1 py-1.5 select-none hover:bg-layer-1 ${
+                        selected ? "text-primary" : "text-secondary"
                       }`
                     }
                   >
@@ -179,7 +179,7 @@ export const IssueLabelSelect = observer(function IssueLabelSelect(props: IIssue
                         {option.content}
                         {selected && (
                           <div className="flex-shrink-0">
-                            <Check className={`h-3.5 w-3.5`} />
+                            <CheckIcon className={`h-3.5 w-3.5`} />
                           </div>
                         )}
                       </>
@@ -187,7 +187,7 @@ export const IssueLabelSelect = observer(function IssueLabelSelect(props: IIssue
                   </Combobox.Option>
                 ))
               ) : submitting ? (
-                <Loader className="spin  h-3.5 w-3.5" />
+                <Loader className="spin h-3.5 w-3.5" />
               ) : canCreateLabel ? (
                 <Combobox.Option
                   value={query}
@@ -197,19 +197,19 @@ export const IssueLabelSelect = observer(function IssueLabelSelect(props: IIssue
                     if (!query.length) return;
                     handleAddLabel(query);
                   }}
-                  className={`text-left text-custom-text-200 ${query.length ? "cursor-pointer" : "cursor-default"}`}
+                  className={`text-left text-secondary ${query.length ? "cursor-pointer" : "cursor-default"}`}
                 >
                   {query.length ? (
                     <>
-                      {/* TODO: Translate here */}+ Add{" "}
-                      <span className="text-custom-text-100">&quot;{query}&quot;</span> to labels
+                      {/* TODO: Translate here */}+ Add <span className="text-primary">&quot;{query}&quot;</span> to
+                      labels
                     </>
                   ) : (
                     t("label.create.type")
                   )}
                 </Combobox.Option>
               ) : (
-                <p className="text-left text-custom-text-200 ">{t("common.search.no_matching_results")}</p>
+                <p className="text-left text-secondary">{t("common.search.no_matching_results")}</p>
               )}
             </div>
           </div>
diff --git a/apps/web/core/components/issues/issue-detail/label/select/root.tsx b/apps/web/core/components/issues/issue-detail/label/select/root.tsx
index 22dc6a825..c43ec6ad3 100644
--- a/apps/web/core/components/issues/issue-detail/label/select/root.tsx
+++ b/apps/web/core/components/issues/issue-detail/label/select/root.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // components
 import type { TLabelOperations } from "../root";
 import { IssueLabelSelect } from "./label-select";
diff --git a/apps/web/core/components/issues/issue-detail/links/create-update-link-modal.tsx b/apps/web/core/components/issues/issue-detail/links/create-update-link-modal.tsx
index a076ede04..ecc11ddcd 100644
--- a/apps/web/core/components/issues/issue-detail/links/create-update-link-modal.tsx
+++ b/apps/web/core/components/issues/issue-detail/links/create-update-link-modal.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useEffect } from "react";
 import { observer } from "mobx-react";
 import { Controller, useForm } from "react-hook-form";
@@ -73,12 +78,12 @@ export const IssueLinkCreateUpdateModal = observer(function IssueLinkCreateUpdat
     <ModalCore isOpen={isModalOpen} handleClose={onClose}>
       <form onSubmit={handleSubmit(handleFormSubmit)}>
         <div className="space-y-5 p-5">
-          <h3 className="text-xl font-medium text-custom-text-200">
+          <h3 className="text-h4-medium text-secondary">
             {preloadedData?.id ? t("common.update_link") : t("common.add_link")}
           </h3>
           <div className="mt-2 space-y-3">
             <div>
-              <label htmlFor="url" className="mb-2 text-custom-text-200">
+              <label htmlFor="url" className="mb-2 text-secondary">
                 {t("common.url")}
               </label>
               <Controller
@@ -100,12 +105,14 @@ export const IssueLinkCreateUpdateModal = observer(function IssueLinkCreateUpdat
                   />
                 )}
               />
-              {errors.url && <span className="text-xs text-red-500">{t("common.url_is_invalid")}</span>}
+              {errors.url && (
+                <span className="text-caption-sm-regular text-danger-primary">{t("common.url_is_invalid")}</span>
+              )}
             </div>
             <div>
-              <label htmlFor="title" className="mb-2 text-custom-text-200">
+              <label htmlFor="title" className="mb-2 text-secondary">
                 {t("common.display_title")}
-                <span className="text-[10px] block">{t("common.optional")}</span>
+                <span className="block text-caption-xs-regular">{t("common.optional")}</span>
               </label>
               <Controller
                 control={control}
@@ -126,11 +133,11 @@ export const IssueLinkCreateUpdateModal = observer(function IssueLinkCreateUpdat
             </div>
           </div>
         </div>
-        <div className="px-5 py-4 flex items-center justify-end gap-2 border-t-[0.5px] border-custom-border-200">
-          <Button variant="neutral-primary" size="sm" onClick={onClose}>
+        <div className="flex items-center justify-end gap-2 border-t-[0.5px] border-subtle px-5 py-4">
+          <Button variant="secondary" size="lg" onClick={onClose}>
             {t("common.cancel")}
           </Button>
-          <Button variant="primary" size="sm" type="submit" loading={isSubmitting}>
+          <Button variant="primary" size="lg" type="submit" loading={isSubmitting}>
             {`${
               preloadedData?.id
                 ? isSubmitting
diff --git a/apps/web/core/components/issues/issue-detail/links/index.ts b/apps/web/core/components/issues/issue-detail/links/index.ts
index 1241167ab..4ee36de92 100644
--- a/apps/web/core/components/issues/issue-detail/links/index.ts
+++ b/apps/web/core/components/issues/issue-detail/links/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./root";
 
 export * from "./links";
diff --git a/apps/web/core/components/issues/issue-detail/links/link-detail.tsx b/apps/web/core/components/issues/issue-detail/links/link-detail.tsx
index c3f724b5c..92a2fdd3c 100644
--- a/apps/web/core/components/issues/issue-detail/links/link-detail.tsx
+++ b/apps/web/core/components/issues/issue-detail/links/link-detail.tsx
@@ -1,4 +1,10 @@
-import { Pencil, Trash2, ExternalLink } from "lucide-react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { NewTabIcon, EditIcon, TrashIcon } from "@plane/propel/icons";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import { Tooltip } from "@plane/propel/tooltip";
 import { getIconForLink, copyTextToClipboard, calculateTimeAgo } from "@plane/utils";
@@ -40,7 +46,7 @@ export function IssueLinkDetail(props: TIssueLinkDetail) {
 
   return (
     <div key={linkId}>
-      <div className="relative flex flex-col rounded-md bg-custom-background-90 p-2.5">
+      <div className="relative flex flex-col rounded-md bg-surface-2 p-2.5">
         <div
           className="flex w-full cursor-pointer items-start justify-between gap-2"
           onClick={() => {
@@ -54,13 +60,13 @@ export function IssueLinkDetail(props: TIssueLinkDetail) {
         >
           <div className="flex items-start gap-2 truncate">
             <span className="py-1">
-              <Icon className="size-3 stroke-2 text-custom-text-350 group-hover:text-custom-text-100 flex-shrink-0" />
+              <Icon className="size-3 flex-shrink-0 stroke-2 text-tertiary group-hover:text-primary" />
             </span>
             <Tooltip
               tooltipContent={linkDetail.title && linkDetail.title !== "" ? linkDetail.title : linkDetail.url}
               isMobile={isMobile}
             >
-              <span className="truncate text-xs">
+              <span className="truncate text-11">
                 {linkDetail.title && linkDetail.title !== "" ? linkDetail.title : linkDetail.url}
               </span>
             </Tooltip>
@@ -70,40 +76,40 @@ export function IssueLinkDetail(props: TIssueLinkDetail) {
             <div className="z-[1] flex flex-shrink-0 items-center gap-2">
               <button
                 type="button"
-                className="flex items-center justify-center p-1 hover:bg-custom-background-80"
+                className="flex items-center justify-center p-1 hover:bg-layer-1"
                 onClick={(e) => {
                   e.preventDefault();
                   e.stopPropagation();
                   toggleIssueLinkModal(true);
                 }}
               >
-                <Pencil className="h-3 w-3 stroke-[1.5] text-custom-text-200" />
+                <EditIcon className="h-3 w-3 stroke-[1.5] text-secondary" />
               </button>
               <a
                 href={linkDetail.url}
                 target="_blank"
                 rel="noopener noreferrer"
-                className="flex items-center justify-center p-1 hover:bg-custom-background-80"
+                className="flex items-center justify-center p-1 hover:bg-layer-1"
               >
-                <ExternalLink className="h-3 w-3 stroke-[1.5] text-custom-text-200" />
+                <NewTabIcon className="h-3 w-3 stroke-[1.5] text-secondary" />
               </a>
               <button
                 type="button"
-                className="flex items-center justify-center p-1 hover:bg-custom-background-80"
+                className="flex items-center justify-center p-1 hover:bg-layer-1"
                 onClick={(e) => {
                   e.preventDefault();
                   e.stopPropagation();
                   linkOperations.remove(linkDetail.id);
                 }}
               >
-                <Trash2 className="h-3 w-3" />
+                <TrashIcon className="h-3 w-3" />
               </button>
             </div>
           )}
         </div>
 
         <div className="px-5">
-          <p className="mt-0.5 stroke-[1.5] text-xs text-custom-text-300">
+          <p className="mt-0.5 stroke-[1.5] text-11 text-tertiary">
             Added {calculateTimeAgo(linkDetail.created_at)}
             <br />
             {createdByDetails && (
diff --git a/apps/web/core/components/issues/issue-detail/links/link-item.tsx b/apps/web/core/components/issues/issue-detail/links/link-item.tsx
index 0ab93452c..765c34966 100644
--- a/apps/web/core/components/issues/issue-detail/links/link-item.tsx
+++ b/apps/web/core/components/issues/issue-detail/links/link-item.tsx
@@ -1,6 +1,13 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
-import { Pencil, Trash2, Copy, Link } from "lucide-react";
+
 import { useTranslation } from "@plane/i18n";
+import { LinkIcon, CopyIcon, EditIcon, TrashIcon } from "@plane/propel/icons";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import { Tooltip } from "@plane/propel/tooltip";
 import type { TIssueServiceType } from "@plane/types";
@@ -47,29 +54,32 @@ export const IssueLinkItem = observer(function IssueLinkItem(props: TIssueLinkIt
     <>
       <div
         key={linkId}
-        className="group col-span-12 lg:col-span-6 xl:col-span-4 2xl:col-span-3 3xl:col-span-2 flex items-center justify-between gap-3 h-10 flex-shrink-0 px-3 bg-custom-background-90 hover:bg-custom-background-80 border-[0.5px] border-custom-border-200 rounded"
+        className="group 3xl:col-span-2 col-span-12 flex h-10 flex-shrink-0 items-center justify-between gap-3 rounded-sm border-[0.5px] border-subtle bg-surface-2 px-3 hover:bg-layer-1 lg:col-span-6 xl:col-span-4 2xl:col-span-3"
       >
-        <div className="flex items-center gap-2.5 truncate flex-grow">
+        <div className="flex min-w-0 flex-1 items-center gap-2.5">
           {faviconUrl ? (
-            <img src={faviconUrl} alt="favicon" className="size-4" />
+            <img src={faviconUrl} alt="favicon" className="size-4 flex-shrink-0" />
           ) : (
-            <Link className="size-4 text-custom-text-350 group-hover:text-custom-text-100" />
+            <LinkIcon className="size-4 flex-shrink-0 text-tertiary group-hover:text-primary" />
           )}
           <Tooltip tooltipContent={linkDetail.url} isMobile={isMobile}>
             <a
               href={linkDetail.url}
               target="_blank"
               rel="noopener noreferrer"
-              className="truncate text-sm cursor-pointer flex-grow flex items-center gap-3"
+              className="flex w-0 flex-1 cursor-pointer items-center text-body-xs-regular"
             >
-              {linkDetail.title && linkDetail.title !== "" ? linkDetail.title : linkDetail.url}
-
-              {linkTitle && linkTitle !== "" && <span className="text-custom-text-400 text-xs">{linkTitle}</span>}
+              <span className="w-0 flex-1 truncate">
+                {linkDetail.title && linkDetail.title !== "" ? linkDetail.title : linkDetail.url}
+                {linkTitle && linkTitle !== "" && (
+                  <span className="text-caption-sm-regular text-placeholder"> {linkTitle}</span>
+                )}
+              </span>
             </a>
           </Tooltip>
         </div>
-        <div className="flex items-center gap-1 flex-shrink-0">
-          <p className="p-1 text-xs align-bottom leading-5 text-custom-text-400 group-hover-text-custom-text-200">
+        <div className="flex flex-shrink-0 items-center gap-1">
+          <p className="group-hover-text-secondary p-1 align-bottom text-caption-sm-regular leading-5 text-placeholder">
             {calculateTimeAgo(linkDetail.created_at)}
           </p>
           <span
@@ -81,13 +91,13 @@ export const IssueLinkItem = observer(function IssueLinkItem(props: TIssueLinkIt
                 message: t("common.link_copied_to_clipboard"),
               });
             }}
-            className="relative grid place-items-center rounded p-1 text-custom-text-400 outline-none group-hover:text-custom-text-200 cursor-pointer hover:bg-custom-background-80"
+            className="relative grid cursor-pointer place-items-center rounded-sm p-1 text-placeholder outline-none group-hover:text-secondary hover:bg-layer-1"
           >
-            <Copy className="h-3.5 w-3.5 stroke-[1.5]" />
+            <CopyIcon className="h-3.5 w-3.5 stroke-[1.5]" />
           </span>
           <CustomMenu
             ellipsis
-            buttonClassName="text-custom-text-400 group-hover:text-custom-text-200"
+            buttonClassName="text-placeholder group-hover:text-secondary"
             placement="bottom-end"
             closeOnSelect
             disabled={isNotAllowed}
@@ -98,7 +108,7 @@ export const IssueLinkItem = observer(function IssueLinkItem(props: TIssueLinkIt
                 toggleIssueLinkModal(true);
               }}
             >
-              <Pencil className="h-3 w-3 stroke-[1.5] text-custom-text-200" />
+              <EditIcon className="h-3 w-3 stroke-[1.5] text-secondary" />
               {t("common.actions.edit")}
             </CustomMenu.MenuItem>
             <CustomMenu.MenuItem
@@ -107,7 +117,7 @@ export const IssueLinkItem = observer(function IssueLinkItem(props: TIssueLinkIt
                 linkOperations.remove(linkDetail.id);
               }}
             >
-              <Trash2 className="h-3 w-3" />
+              <TrashIcon className="h-3 w-3" />
               {t("common.actions.delete")}
             </CustomMenu.MenuItem>
           </CustomMenu>
diff --git a/apps/web/core/components/issues/issue-detail/links/link-list.tsx b/apps/web/core/components/issues/issue-detail/links/link-list.tsx
index 0624a81ce..e691ecba3 100644
--- a/apps/web/core/components/issues/issue-detail/links/link-list.tsx
+++ b/apps/web/core/components/issues/issue-detail/links/link-list.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 // plane imports
 import type { TIssueServiceType } from "@plane/types";
@@ -29,7 +35,7 @@ export const LinkList = observer(function LinkList(props: TLinkList) {
   if (!issueLinks) return null;
 
   return (
-    <div className="flex flex-col gap-2 py-4">
+    <div className="flex flex-col gap-2 pt-4">
       {issueLinks.map((linkId) => (
         <IssueLinkItem
           key={linkId}
diff --git a/apps/web/core/components/issues/issue-detail/links/links.tsx b/apps/web/core/components/issues/issue-detail/links/links.tsx
index c4b2ca08d..524c34439 100644
--- a/apps/web/core/components/issues/issue-detail/links/links.tsx
+++ b/apps/web/core/components/issues/issue-detail/links/links.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 // computed
 import { useIssueDetail } from "@/hooks/store/use-issue-detail";
diff --git a/apps/web/core/components/issues/issue-detail/links/root.tsx b/apps/web/core/components/issues/issue-detail/links/root.tsx
index 145c755a5..de2153ab7 100644
--- a/apps/web/core/components/issues/issue-detail/links/root.tsx
+++ b/apps/web/core/components/issues/issue-detail/links/root.tsx
@@ -1,5 +1,12 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useCallback, useMemo, useState } from "react";
-import { Plus } from "lucide-react";
+
+import { PlusIcon } from "@plane/propel/icons";
 // plane imports
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { TIssueLink } from "@plane/types";
@@ -113,19 +120,19 @@ export function IssueLinkRoot(props: TIssueLinkRoot) {
         issueServiceType={EIssueServiceType.ISSUES}
       />
 
-      <div className="py-1 text-xs">
+      <div className="py-1 text-11">
         <div className="flex items-center justify-between gap-2">
           <h4>Links</h4>
           {!disabled && (
             <button
               type="button"
-              className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-custom-background-90 ${
+              className={`grid h-7 w-7 place-items-center rounded-sm p-1 duration-300 outline-none hover:bg-surface-2 ${
                 disabled ? "cursor-not-allowed" : "cursor-pointer"
               }`}
               onClick={() => toggleIssueLinkModal(true)}
               disabled={disabled}
             >
-              <Plus className="h-4 w-4" />
+              <PlusIcon className="h-4 w-4" />
             </button>
           )}
         </div>
diff --git a/apps/web/core/components/issues/issue-detail/main-content.tsx b/apps/web/core/components/issues/issue-detail/main-content.tsx
index f0094bd7c..d14bd3539 100644
--- a/apps/web/core/components/issues/issue-detail/main-content.tsx
+++ b/apps/web/core/components/issues/issue-detail/main-content.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useEffect, useRef, useState } from "react";
 import { observer } from "mobx-react";
 // plane imports
@@ -86,7 +92,7 @@ export const IssueMainContent = observer(function IssueMainContent(props: Props)
 
   return (
     <>
-      <div className="rounded-lg space-y-4">
+      <div className="space-y-4 rounded-lg">
         {issue.parent_id && (
           <IssueParentDetail
             workspaceSlug={workspaceSlug}
@@ -128,16 +134,17 @@ export const IssueMainContent = observer(function IssueMainContent(props: Props)
 
         <DescriptionInput
           issueSequenceId={issue.sequence_id}
-          containerClassName="-ml-3 border-none"
+          containerClassName="-ml-6 border-none p-0! pl-6!"
           disabled={isArchived || !isEditable}
           editorRef={editorRef}
           entityId={issue.id}
           fileAssetType={EFileAssetType.ISSUE_DESCRIPTION}
           initialValue={issue.description_html}
+          key={issue.id}
           onSubmit={async (value, isMigrationUpdate) => {
             if (!issue.id || !issue.project_id) return;
             await issueOperations.update(workspaceSlug, issue.project_id, issue.id, {
-              description_html: value,
+              description_html: value.description_html,
               ...(isMigrationUpdate ? { skip_activity: "true" } : {}),
             });
           }}
diff --git a/apps/web/core/components/issues/issue-detail/module-select.tsx b/apps/web/core/components/issues/issue-detail/module-select.tsx
index af292fcc2..f0b6b2a4d 100644
--- a/apps/web/core/components/issues/issue-detail/module-select.tsx
+++ b/apps/web/core/components/issues/issue-detail/module-select.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React, { useState } from "react";
 import { xor } from "lodash-es";
 import { observer } from "mobx-react";
@@ -64,8 +70,8 @@ export const IssueModuleSelect = observer(function IssueModuleSelect(props: TIss
         placeholder={t("module.no_module")}
         disabled={disableSelect}
         className="group h-full w-full"
-        buttonContainerClassName="w-full rounded"
-        buttonClassName={`min-h-8 text-sm justify-between ${issue?.module_ids?.length ? "" : "text-custom-text-400"}`}
+        buttonContainerClassName="w-full text-left rounded-sm"
+        buttonClassName={`text-body-xs-medium justify-between ${issue?.module_ids?.length ? "" : "text-placeholder"}`}
         buttonVariant="transparent-with-text"
         hideIcon
         dropdownArrow
diff --git a/apps/web/core/components/issues/issue-detail/parent-select.tsx b/apps/web/core/components/issues/issue-detail/parent-select.tsx
index 255ff664a..192f7b133 100644
--- a/apps/web/core/components/issues/issue-detail/parent-select.tsx
+++ b/apps/web/core/components/issues/issue-detail/parent-select.tsx
@@ -1,9 +1,15 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
-import { Pencil } from "lucide-react";
+
 import { useTranslation } from "@plane/i18n";
-import { CloseIcon } from "@plane/propel/icons";
+import { EditIcon, CloseIcon } from "@plane/propel/icons";
 // plane imports
 import { Tooltip } from "@plane/propel/tooltip";
 import { cn } from "@plane/utils";
@@ -72,11 +78,11 @@ export const IssueParentSelect = observer(function IssueParentSelect(props: TIss
       <button
         type="button"
         className={cn(
-          "group flex items-center justify-between gap-2 px-2 py-0.5 rounded outline-none",
+          "group flex items-center justify-between gap-2 rounded-sm px-2 py-0.5 outline-none",
           {
             "cursor-not-allowed": disabled,
-            "hover:bg-custom-background-80": !disabled,
-            "bg-custom-background-80": isParentIssueModalOpen,
+            "hover:bg-layer-transparent-hover": !disabled,
+            "bg-layer-transparent-selected": isParentIssueModalOpen,
           },
           className
         )}
@@ -84,7 +90,7 @@ export const IssueParentSelect = observer(function IssueParentSelect(props: TIss
         disabled={disabled}
       >
         {issue.parent_id && parentIssue ? (
-          <div className="flex items-center gap-1 bg-green-500/20 rounded px-1.5 py-1">
+          <div className="flex items-center gap-1.5">
             <Tooltip tooltipHeading="Title" tooltipContent={parentIssue.name} isMobile={isMobile}>
               <Link href={workItemLink} target="_blank" rel="noopener noreferrer" onClick={(e) => e.stopPropagation()}>
                 {parentIssue?.project_id && parentIssueProjectDetails && (
@@ -93,7 +99,8 @@ export const IssueParentSelect = observer(function IssueParentSelect(props: TIss
                     issueTypeId={parentIssue.type_id}
                     projectIdentifier={parentIssueProjectDetails?.identifier}
                     issueSequenceId={parentIssue.sequence_id}
-                    textContainerClassName="text-xs font-medium text-green-700"
+                    size="xs"
+                    variant="secondary"
                   />
                 )}
               </Link>
@@ -108,21 +115,21 @@ export const IssueParentSelect = observer(function IssueParentSelect(props: TIss
                     handleRemoveSubIssue(workspaceSlug, projectId, parentIssue.id, issueId);
                   }}
                 >
-                  <CloseIcon className="h-2.5 w-2.5 text-custom-text-300 hover:text-red-500" />
+                  <CloseIcon className="h-2.5 w-2.5 text-tertiary hover:text-danger-primary" />
                 </span>
               </Tooltip>
             )}
           </div>
         ) : (
-          <span className="text-sm text-custom-text-400">{t("issue.add.parent")}</span>
+          <span className="text-body-xs-medium text-placeholder">{t("issue.add.parent")}</span>
         )}
         {!disabled && (
           <span
-            className={cn("p-1 flex-shrink-0 opacity-0 group-hover:opacity-100", {
-              "text-custom-text-400": !issue.parent_id && !parentIssue,
+            className={cn("flex-shrink-0 p-1 opacity-0 group-hover:opacity-100", {
+              "text-placeholder": !issue.parent_id && !parentIssue,
             })}
           >
-            <Pencil className="h-2.5 w-2.5 flex-shrink-0" />
+            <EditIcon className="h-2.5 w-2.5 flex-shrink-0" />
           </span>
         )}
       </button>
diff --git a/apps/web/core/components/issues/issue-detail/parent/index.ts b/apps/web/core/components/issues/issue-detail/parent/index.ts
index 1b5a96749..38f9dc2dd 100644
--- a/apps/web/core/components/issues/issue-detail/parent/index.ts
+++ b/apps/web/core/components/issues/issue-detail/parent/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./root";
 
 export * from "./siblings";
diff --git a/apps/web/core/components/issues/issue-detail/parent/root.tsx b/apps/web/core/components/issues/issue-detail/parent/root.tsx
index 94b5573f4..6aa9149b7 100644
--- a/apps/web/core/components/issues/issue-detail/parent/root.tsx
+++ b/apps/web/core/components/issues/issue-detail/parent/root.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import { useRouter } from "next/navigation";
 import { MinusCircle } from "lucide-react";
@@ -68,7 +74,7 @@ export const IssueParentDetail = observer(function IssueParentDetail(props: TIss
 
   return (
     <>
-      <div className="mb-5 flex w-min items-center gap-3 whitespace-nowrap rounded-md border border-custom-border-300 bg-custom-background-80 px-2.5 py-1 text-xs">
+      <div className="mb-5 flex w-min items-center gap-3 rounded-md border border-strong bg-layer-1 px-2.5 py-1 text-11 whitespace-nowrap">
         <ControlLink href={workItemLink} onClick={handleParentIssueClick}>
           <div className="flex items-center gap-2">
             <div className="flex items-center gap-2.5">
@@ -77,24 +83,23 @@ export const IssueParentDetail = observer(function IssueParentDetail(props: TIss
                 <IssueIdentifier
                   projectId={parentIssue.project_id}
                   issueId={parentIssue.id}
-                  textContainerClassName="text-xs text-custom-text-200"
+                  size="xs"
+                  variant="secondary"
                 />
               )}
             </div>
-            <span className="truncate text-custom-text-100">{(parentIssue?.name ?? "").substring(0, 50)}</span>
+            <span className="truncate text-primary">{(parentIssue?.name ?? "").substring(0, 50)}</span>
           </div>
         </ControlLink>
 
         <CustomMenu ellipsis optionsClassName="p-1.5">
-          <div className="border-b border-custom-border-300 text-xs font-medium text-custom-text-200">
-            {t("issue.sibling.label")}
-          </div>
+          <div className="border-b border-strong text-11 font-medium text-secondary">{t("issue.sibling.label")}</div>
 
           <IssueParentSiblings workspaceSlug={workspaceSlug} currentIssue={issue} parentIssue={parentIssue} />
 
           <CustomMenu.MenuItem
             onClick={() => issueOperations.update(workspaceSlug, projectId, issueId, { parent_id: null })}
-            className="flex items-center gap-2 py-2 text-red-500"
+            className="flex items-center gap-2 py-2 text-danger-primary"
           >
             <MinusCircle className="h-4 w-4" />
             <span>{t("issue.remove.parent.label")}</span>
diff --git a/apps/web/core/components/issues/issue-detail/parent/sibling-item.tsx b/apps/web/core/components/issues/issue-detail/parent/sibling-item.tsx
index 19ca5a1c4..aeb1925aa 100644
--- a/apps/web/core/components/issues/issue-detail/parent/sibling-item.tsx
+++ b/apps/web/core/components/issues/issue-detail/parent/sibling-item.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 // ui
 import { CustomMenu } from "@plane/ui";
@@ -49,7 +55,7 @@ export const IssueParentSiblingItem = observer(function IssueParentSiblingItem(p
               issueTypeId={issueDetail.type_id}
               projectIdentifier={projectDetails?.identifier}
               issueSequenceId={issueDetail.sequence_id}
-              textContainerClassName="text-xs"
+              size="xs"
             />
           )}
         </div>
diff --git a/apps/web/core/components/issues/issue-detail/parent/siblings.tsx b/apps/web/core/components/issues/issue-detail/parent/siblings.tsx
index 3a7642507..7254feb8d 100644
--- a/apps/web/core/components/issues/issue-detail/parent/siblings.tsx
+++ b/apps/web/core/components/issues/issue-detail/parent/siblings.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import useSWR from "swr";
 import type { TIssue } from "@plane/types";
@@ -35,7 +41,7 @@ export const IssueParentSiblings = observer(function IssueParentSiblings(props:
   return (
     <div className="my-1">
       {isLoading ? (
-        <div className="flex items-center gap-2 whitespace-nowrap px-1 py-1 text-left text-xs text-custom-text-200">
+        <div className="flex items-center gap-2 px-1 py-1 text-left text-11 whitespace-nowrap text-secondary">
           Loading
         </div>
       ) : subIssueIds && subIssueIds.length > 0 ? (
@@ -46,7 +52,7 @@ export const IssueParentSiblings = observer(function IssueParentSiblings(props:
             )
         )
       ) : (
-        <div className="flex items-center gap-2 whitespace-nowrap px-1 py-1 text-left text-xs text-custom-text-200">
+        <div className="flex items-center gap-2 px-1 py-1 text-left text-11 whitespace-nowrap text-secondary">
           No sibling work items
         </div>
       )}
diff --git a/apps/web/core/components/issues/issue-detail/reactions/index.ts b/apps/web/core/components/issues/issue-detail/reactions/index.ts
index 9ab00bd77..535518720 100644
--- a/apps/web/core/components/issues/issue-detail/reactions/index.ts
+++ b/apps/web/core/components/issues/issue-detail/reactions/index.ts
@@ -1,2 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./issue";
 export * from "./issue-comment";
diff --git a/apps/web/core/components/issues/issue-detail/reactions/issue-comment.tsx b/apps/web/core/components/issues/issue-detail/reactions/issue-comment.tsx
index 4abe66ce9..2ece8b9b7 100644
--- a/apps/web/core/components/issues/issue-detail/reactions/issue-comment.tsx
+++ b/apps/web/core/components/issues/issue-detail/reactions/issue-comment.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useMemo, useState } from "react";
 import { observer } from "mobx-react";
 import { stringToEmoji } from "@plane/propel/emoji-icon-picker";
diff --git a/apps/web/core/components/issues/issue-detail/reactions/issue.tsx b/apps/web/core/components/issues/issue-detail/reactions/issue.tsx
index edc16742c..ac1f94410 100644
--- a/apps/web/core/components/issues/issue-detail/reactions/issue.tsx
+++ b/apps/web/core/components/issues/issue-detail/reactions/issue.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useMemo, useState } from "react";
 import { observer } from "mobx-react";
 import { stringToEmoji } from "@plane/propel/emoji-icon-picker";
@@ -48,7 +54,7 @@ export const IssueReaction = observer(function IssueReaction(props: TIssueReacti
             type: TOAST_TYPE.SUCCESS,
             message: "Reaction created successfully",
           });
-        } catch (error) {
+        } catch (_error) {
           setToast({
             title: "Error!",
             type: TOAST_TYPE.ERROR,
diff --git a/apps/web/core/components/issues/issue-detail/relation-select.tsx b/apps/web/core/components/issues/issue-detail/relation-select.tsx
index 3a690641d..8c68993ca 100644
--- a/apps/web/core/components/issues/issue-detail/relation-select.tsx
+++ b/apps/web/core/components/issues/issue-detail/relation-select.tsx
@@ -1,8 +1,14 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
-import { Pencil } from "lucide-react";
-import { CloseIcon } from "@plane/propel/icons";
+
+import { EditIcon, CloseIcon } from "@plane/propel/icons";
 // Plane
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import { Tooltip } from "@plane/propel/tooltip";
@@ -88,11 +94,11 @@ export const IssueRelationSelect = observer(function IssueRelationSelect(props:
       <button
         type="button"
         className={cn(
-          "group flex items-center gap-2 rounded px-2 py-0.5 outline-none",
+          "group flex items-center gap-2 rounded-sm px-2 py-0.5 outline-none",
           {
             "cursor-not-allowed": disabled,
-            "hover:bg-custom-background-80": !disabled,
-            "bg-custom-background-80": isRelationKeyModalActive,
+            "hover:bg-layer-1": !disabled,
+            "bg-layer-1": isRelationKeyModalActive,
           },
           className
         )}
@@ -111,7 +117,7 @@ export const IssueRelationSelect = observer(function IssueRelationSelect(props:
                 return (
                   <div
                     key={relationIssueId}
-                    className={`group flex items-center gap-1 rounded px-1.5 pb-1 pt-1 leading-3 hover:bg-custom-background-90 ${currRelationOption?.className}`}
+                    className={`group flex items-center gap-1 rounded-sm px-1.5 pt-1 pb-1 leading-3 hover:bg-surface-2 ${currRelationOption?.className}`}
                   >
                     <Tooltip tooltipHeading="Title" tooltipContent={currentIssue.name} isMobile={isMobile}>
                       <Link
@@ -124,7 +130,7 @@ export const IssueRelationSelect = observer(function IssueRelationSelect(props:
                         })}
                         target="_blank"
                         rel="noopener noreferrer"
-                        className="text-xs font-medium"
+                        className="text-caption-sm-medium"
                         onClick={(e) => e.stopPropagation()}
                       >
                         {`${projectDetails?.identifier}-${currentIssue?.sequence_id}`}
@@ -139,7 +145,7 @@ export const IssueRelationSelect = observer(function IssueRelationSelect(props:
                             removeRelation(workspaceSlug, projectId, issueId, relationKey, relationIssueId);
                           }}
                         >
-                          <CloseIcon className="h-2.5 w-2.5 text-custom-text-300 hover:text-red-500" />
+                          <CloseIcon className="h-2.5 w-2.5 text-tertiary hover:text-danger-primary" />
                         </span>
                       </Tooltip>
                     )}
@@ -148,15 +154,15 @@ export const IssueRelationSelect = observer(function IssueRelationSelect(props:
               })}
             </div>
           ) : (
-            <span className="text-sm text-custom-text-400">{currRelationOption?.placeholder}</span>
+            <span className="text-body-xs-regular text-placeholder">{currRelationOption?.placeholder}</span>
           )}
           {!disabled && (
             <span
               className={cn("flex-shrink-0 p-1 opacity-0 group-hover:opacity-100", {
-                "text-custom-text-400": relationIssueIds.length === 0,
+                "text-placeholder": relationIssueIds.length === 0,
               })}
             >
-              <Pencil className="h-2.5 w-2.5 flex-shrink-0" />
+              <EditIcon className="h-2.5 w-2.5 flex-shrink-0" />
             </span>
           )}
         </div>
diff --git a/apps/web/core/components/issues/issue-detail/root.tsx b/apps/web/core/components/issues/issue-detail/root.tsx
index 12ae56ac4..72484c696 100644
--- a/apps/web/core/components/issues/issue-detail/root.tsx
+++ b/apps/web/core/components/issues/issue-detail/root.tsx
@@ -1,8 +1,13 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useMemo } from "react";
 import { observer } from "mobx-react";
 // plane imports
-import { EUserPermissions, EUserPermissionsLevel, WORK_ITEM_TRACKER_EVENTS } from "@plane/constants";
+import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { TOAST_TYPE, setPromiseToast, setToast } from "@plane/propel/toast";
 import type { TIssue } from "@plane/types";
@@ -12,7 +17,6 @@ import emptyIssue from "@/app/assets/empty-state/issue.svg?url";
 // components
 import { EmptyState } from "@/components/common/empty-state";
 // hooks
-import { captureError, captureSuccess } from "@/helpers/event-tracker.helper";
 import { useAppTheme } from "@/hooks/store/use-app-theme";
 import { useIssueDetail } from "@/hooks/store/use-issue-detail";
 import { useIssues } from "@/hooks/store/use-issues";
@@ -90,17 +94,8 @@ export const IssueDetailRoot = observer(function IssueDetailRoot(props: TIssueDe
       update: async (workspaceSlug: string, projectId: string, issueId: string, data: Partial<TIssue>) => {
         try {
           await updateIssue(workspaceSlug, projectId, issueId, data);
-          captureSuccess({
-            eventName: WORK_ITEM_TRACKER_EVENTS.update,
-            payload: { id: issueId },
-          });
         } catch (error) {
           console.log("Error in updating issue:", error);
-          captureError({
-            eventName: WORK_ITEM_TRACKER_EVENTS.update,
-            payload: { id: issueId },
-            error: error as Error,
-          });
           setToast({
             title: t("common.error.label"),
             type: TOAST_TYPE.ERROR,
@@ -117,10 +112,6 @@ export const IssueDetailRoot = observer(function IssueDetailRoot(props: TIssueDe
             type: TOAST_TYPE.SUCCESS,
             message: t("entity.delete.success", { entity: t("issue.label") }),
           });
-          captureSuccess({
-            eventName: WORK_ITEM_TRACKER_EVENTS.delete,
-            payload: { id: issueId },
-          });
         } catch (error) {
           console.log("Error in deleting issue:", error);
           setToast({
@@ -128,67 +119,35 @@ export const IssueDetailRoot = observer(function IssueDetailRoot(props: TIssueDe
             type: TOAST_TYPE.ERROR,
             message: t("entity.delete.failed", { entity: t("issue.label") }),
           });
-          captureError({
-            eventName: WORK_ITEM_TRACKER_EVENTS.delete,
-            payload: { id: issueId },
-            error: error as Error,
-          });
         }
       },
       archive: async (workspaceSlug: string, projectId: string, issueId: string) => {
         try {
           await archiveIssue(workspaceSlug, projectId, issueId);
-          captureSuccess({
-            eventName: WORK_ITEM_TRACKER_EVENTS.archive,
-            payload: { id: issueId },
-          });
         } catch (error) {
           console.log("Error in archiving issue:", error);
-          captureError({
-            eventName: WORK_ITEM_TRACKER_EVENTS.archive,
-            payload: { id: issueId },
-            error: error as Error,
-          });
         }
       },
       addCycleToIssue: async (workspaceSlug: string, projectId: string, cycleId: string, issueId: string) => {
         try {
           await addCycleToIssue(workspaceSlug, projectId, cycleId, issueId);
-          captureSuccess({
-            eventName: WORK_ITEM_TRACKER_EVENTS.update,
-            payload: { id: issueId },
-          });
-        } catch (error) {
+        } catch (_error) {
           setToast({
             type: TOAST_TYPE.ERROR,
             title: t("common.error.label"),
             message: t("issue.add.cycle.failed"),
           });
-          captureError({
-            eventName: WORK_ITEM_TRACKER_EVENTS.update,
-            payload: { id: issueId },
-            error: error as Error,
-          });
         }
       },
       addIssueToCycle: async (workspaceSlug: string, projectId: string, cycleId: string, issueIds: string[]) => {
         try {
           await addIssueToCycle(workspaceSlug, projectId, cycleId, issueIds);
-          captureSuccess({
-            eventName: WORK_ITEM_TRACKER_EVENTS.update,
-            payload: { id: issueId },
-          });
-        } catch (error) {
+        } catch (_error) {
           setToast({
             type: TOAST_TYPE.ERROR,
             title: t("common.error.label"),
             message: t("issue.add.cycle.failed"),
           });
-          captureError({
-            eventName: WORK_ITEM_TRACKER_EVENTS.update,
-            payload: { id: issueId },
-            error: error as Error,
-          });
         }
       },
       removeIssueFromCycle: async (workspaceSlug: string, projectId: string, cycleId: string, issueId: string) => {
@@ -206,16 +165,8 @@ export const IssueDetailRoot = observer(function IssueDetailRoot(props: TIssueDe
             },
           });
           await removeFromCyclePromise;
-          captureSuccess({
-            eventName: WORK_ITEM_TRACKER_EVENTS.update,
-            payload: { id: issueId },
-          });
         } catch (error) {
-          captureError({
-            eventName: WORK_ITEM_TRACKER_EVENTS.update,
-            payload: { id: issueId },
-            error: error as Error,
-          });
+          console.log("Error in removing issue from cycle:", error);
         }
       },
       removeIssueFromModule: async (workspaceSlug: string, projectId: string, moduleId: string, issueId: string) => {
@@ -233,16 +184,8 @@ export const IssueDetailRoot = observer(function IssueDetailRoot(props: TIssueDe
             },
           });
           await removeFromModulePromise;
-          captureSuccess({
-            eventName: WORK_ITEM_TRACKER_EVENTS.update,
-            payload: { id: issueId },
-          });
         } catch (error) {
-          captureError({
-            eventName: WORK_ITEM_TRACKER_EVENTS.update,
-            payload: { id: issueId },
-            error: error as Error,
-          });
+          console.log("Error in removing issue from module:", error);
         }
       },
       changeModulesInIssue: async (
@@ -253,10 +196,6 @@ export const IssueDetailRoot = observer(function IssueDetailRoot(props: TIssueDe
         removeModuleIds: string[]
       ) => {
         const promise = await changeModulesInIssue(workspaceSlug, projectId, issueId, addModuleIds, removeModuleIds);
-        captureSuccess({
-          eventName: WORK_ITEM_TRACKER_EVENTS.update,
-          payload: { id: issueId },
-        });
         return promise;
       },
     }),
@@ -273,7 +212,6 @@ export const IssueDetailRoot = observer(function IssueDetailRoot(props: TIssueDe
       changeModulesInIssue,
       removeIssueFromModule,
       t,
-      issueId,
     ]
   );
 
@@ -301,7 +239,7 @@ export const IssueDetailRoot = observer(function IssueDetailRoot(props: TIssueDe
         />
       ) : (
         <div className="flex h-full w-full overflow-hidden">
-          <div className="max-w-2/3 h-full w-full space-y-8 overflow-y-auto px-9 py-5">
+          <div className="h-full w-full space-y-6 overflow-y-auto px-9 py-5">
             <IssueMainContent
               workspaceSlug={workspaceSlug}
               projectId={projectId}
@@ -312,7 +250,7 @@ export const IssueDetailRoot = observer(function IssueDetailRoot(props: TIssueDe
             />
           </div>
           <div
-            className="fixed right-0 z-[5] h-full w-full min-w-[300px] border-l border-custom-border-200 bg-custom-sidebar-background-100 py-5 sm:w-1/2 md:relative md:w-1/3 lg:min-w-80 xl:min-w-96"
+            className="fixed right-0 z-[5] h-full w-full min-w-[300px] border-l border-subtle bg-surface-1 sm:w-1/2 md:relative md:w-1/4 lg:min-w-80 xl:min-w-96"
             style={issueDetailSidebarCollapsed ? { right: `-${window?.innerWidth || 0}px` } : {}}
           >
             <IssueDetailsSidebar
diff --git a/apps/web/core/components/issues/issue-detail/sidebar.tsx b/apps/web/core/components/issues/issue-detail/sidebar.tsx
index c8378509d..1cd233574 100644
--- a/apps/web/core/components/issues/issue-detail/sidebar.tsx
+++ b/apps/web/core/components/issues/issue-detail/sidebar.tsx
@@ -1,4 +1,9 @@
-import React from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 // i18n
 import { useTranslation } from "@plane/i18n";
@@ -34,9 +39,10 @@ import { useProjectState } from "@/hooks/store/use-project-state";
 // components
 import { WorkItemAdditionalSidebarProperties } from "@/plane-web/components/issues/issue-details/additional-properties";
 import { IssueParentSelectRoot } from "@/plane-web/components/issues/issue-details/parent-select-root";
+import { DateAlert } from "@/plane-web/components/issues/issue-details/sidebar/date-alert";
 import { TransferHopInfo } from "@/plane-web/components/issues/issue-details/sidebar/transfer-hop-info";
-import { DateAlert } from "@/plane-web/components/issues/issue-details/sidebar.tsx/date-alert";
 import { IssueWorklogProperty } from "@/plane-web/components/issues/worklog/property";
+import { SidebarPropertyListItem } from "@/components/common/layout/sidebar/property-list-item";
 import { IssueCycleSelect } from "./cycle-select";
 import { IssueLabel } from "./label";
 import { IssueModuleSelect } from "./module-select";
@@ -78,35 +84,26 @@ export const IssueDetailsSidebar = observer(function IssueDetailsSidebar(props:
 
   return (
     <>
-      <div className="flex items-center h-full w-full flex-col divide-y-2 divide-custom-border-200 overflow-hidden">
+      <div className="flex h-full w-full flex-col items-center divide-y-2 divide-subtle-1 overflow-hidden">
         <div className="h-full w-full overflow-y-auto px-6">
-          <h5 className="mt-6 text-sm font-medium">{t("common.properties")}</h5>
-          {/* TODO: render properties using a common component */}
-          <div className={`mb-2 mt-3 space-y-2.5 ${!isEditable ? "opacity-60" : ""}`}>
-            <div className="flex h-8 items-center gap-2">
-              <div className="flex w-2/5 flex-shrink-0 items-center gap-1 text-sm text-custom-text-300">
-                <StatePropertyIcon className="h-4 w-4 flex-shrink-0" />
-                <span>{t("common.state")}</span>
-              </div>
+          <h5 className="mt-5 text-body-xs-medium">{t("common.properties")}</h5>
+          <div className={`mt-4 mb-2 space-y-2.5 truncate ${!isEditable ? "opacity-60" : ""}`}>
+            <SidebarPropertyListItem icon={StatePropertyIcon} label={t("common.state")}>
               <StateDropdown
                 value={issue?.state_id}
                 onChange={(val) => issueOperations.update(workspaceSlug, projectId, issueId, { state_id: val })}
                 projectId={projectId?.toString() ?? ""}
                 disabled={!isEditable}
                 buttonVariant="transparent-with-text"
-                className="group w-3/5 flex-grow"
-                buttonContainerClassName="w-full text-left"
-                buttonClassName="text-sm"
+                className="group w-full grow"
+                buttonContainerClassName="w-full text-left h-7.5"
+                buttonClassName="text-body-xs-regular"
                 dropdownArrow
                 dropdownArrowClassName="h-3.5 w-3.5 hidden group-hover:inline"
               />
-            </div>
+            </SidebarPropertyListItem>
 
-            <div className="flex h-8 items-center gap-2">
-              <div className="flex w-2/5 flex-shrink-0 items-center gap-1 text-sm text-custom-text-300">
-                <MembersPropertyIcon className="h-4 w-4 flex-shrink-0" />
-                <span>{t("common.assignees")}</span>
-              </div>
+            <SidebarPropertyListItem icon={MembersPropertyIcon} label={t("common.assignees")}>
               <MemberDropdown
                 value={issue?.assignee_ids ?? undefined}
                 onChange={(val) => issueOperations.update(workspaceSlug, projectId, issueId, { assignee_ids: val })}
@@ -115,51 +112,37 @@ export const IssueDetailsSidebar = observer(function IssueDetailsSidebar(props:
                 placeholder={t("issue.add.assignee")}
                 multiple
                 buttonVariant={issue?.assignee_ids?.length > 1 ? "transparent-without-text" : "transparent-with-text"}
-                className="group w-3/5 flex-grow"
-                buttonContainerClassName="w-full text-left"
-                buttonClassName={`text-sm justify-between ${
-                  issue?.assignee_ids?.length > 0 ? "" : "text-custom-text-400"
-                }`}
+                className="group w-full grow"
+                buttonContainerClassName="w-full text-left h-7.5"
+                buttonClassName={`text-body-xs-regular justify-between ${issue?.assignee_ids?.length > 0 ? "" : "text-placeholder"}`}
                 hideIcon={issue.assignee_ids?.length === 0}
                 dropdownArrow
                 dropdownArrowClassName="h-3.5 w-3.5 hidden group-hover:inline"
               />
-            </div>
+            </SidebarPropertyListItem>
 
-            <div className="flex h-8 items-center gap-2">
-              <div className="flex w-2/5 flex-shrink-0 items-center gap-1 text-sm text-custom-text-300">
-                <PriorityPropertyIcon className="h-4 w-4 flex-shrink-0" />
-                <span>{t("common.priority")}</span>
-              </div>
+            <SidebarPropertyListItem icon={PriorityPropertyIcon} label={t("common.priority")}>
               <PriorityDropdown
                 value={issue?.priority}
                 onChange={(val) => issueOperations.update(workspaceSlug, projectId, issueId, { priority: val })}
                 disabled={!isEditable}
-                buttonVariant="border-with-text"
-                className="w-3/5 flex-grow rounded px-2 hover:bg-custom-background-80"
-                buttonContainerClassName="w-full text-left"
-                buttonClassName="w-min h-auto whitespace-nowrap"
+                buttonVariant="transparent-with-text"
+                className="h-7.5 w-full grow rounded-sm"
+                buttonContainerClassName="size-full text-left"
+                buttonClassName="size-full px-2 py-0.5 whitespace-nowrap [&_svg]:size-3.5"
               />
-            </div>
+            </SidebarPropertyListItem>
 
             {createdByDetails && (
-              <div className="flex h-8 items-center gap-2">
-                <div className="flex w-2/5 flex-shrink-0 items-center gap-1 text-sm text-custom-text-300">
-                  <UserCirclePropertyIcon className="h-4 w-4 flex-shrink-0" />
-                  <span>{t("common.created_by")}</span>
-                </div>
-                <div className="w-full h-full flex items-center gap-1.5 rounded px-2 py-0.5 text-sm justify-between cursor-not-allowed">
+              <SidebarPropertyListItem icon={UserCirclePropertyIcon} label={t("common.created_by")}>
+                <div className="flex gap-2 px-2">
                   <ButtonAvatars showTooltip userIds={createdByDetails.id} />
-                  <span className="flex-grow truncate text-xs leading-5">{createdByDetails?.display_name}</span>
+                  <span className="grow truncate text-body-xs-regular leading-5">{createdByDetails?.display_name}</span>
                 </div>
-              </div>
+              </SidebarPropertyListItem>
             )}
 
-            <div className="flex h-8 items-center gap-2">
-              <div className="flex w-2/5 flex-shrink-0 items-center gap-1 text-sm text-custom-text-300">
-                <StartDatePropertyIcon className="h-4 w-4 flex-shrink-0" />
-                <span>{t("common.order_by.start_date")}</span>
-              </div>
+            <SidebarPropertyListItem icon={StartDatePropertyIcon} label={t("common.order_by.start_date")}>
               <DateDropdown
                 placeholder={t("issue.add.start_date")}
                 value={issue.start_date}
@@ -171,22 +154,16 @@ export const IssueDetailsSidebar = observer(function IssueDetailsSidebar(props:
                 maxDate={maxDate ?? undefined}
                 disabled={!isEditable}
                 buttonVariant="transparent-with-text"
-                className="group w-3/5 flex-grow"
-                buttonContainerClassName="w-full text-left"
-                buttonClassName={`text-sm ${issue?.start_date ? "" : "text-custom-text-400"}`}
+                className="group w-full grow"
+                buttonContainerClassName="w-full text-left h-7.5"
+                buttonClassName={`text-body-xs-regular ${issue?.start_date ? "" : "text-placeholder"}`}
                 hideIcon
                 clearIconClassName="h-3 w-3 hidden group-hover:inline"
-                // TODO: add this logic
-                // showPlaceholderIcon
               />
-            </div>
+            </SidebarPropertyListItem>
 
-            <div className="flex h-8 items-center gap-2">
-              <div className="flex w-2/5 flex-shrink-0 items-center gap-1 text-sm text-custom-text-300">
-                <DueDatePropertyIcon className="h-4 w-4 flex-shrink-0" />
-                <span>{t("common.order_by.due_date")}</span>
-              </div>
-              <div className="flex items-center gap-2">
+            <SidebarPropertyListItem icon={DueDatePropertyIcon} label={t("common.order_by.due_date")}>
+              <div className="flex w-full items-center gap-2">
                 <DateDropdown
                   placeholder={t("issue.add.due_date")}
                   value={issue.target_date}
@@ -198,27 +175,21 @@ export const IssueDetailsSidebar = observer(function IssueDetailsSidebar(props:
                   minDate={minDate ?? undefined}
                   disabled={!isEditable}
                   buttonVariant="transparent-with-text"
-                  className="group w-3/5 flex-grow"
-                  buttonContainerClassName="w-full text-left"
-                  buttonClassName={cn("text-sm", {
-                    "text-custom-text-400": !issue.target_date,
-                    "text-red-500": shouldHighlightIssueDueDate(issue.target_date, stateDetails?.group),
+                  className="group w-full grow"
+                  buttonContainerClassName="w-full text-left h-7.5"
+                  buttonClassName={cn("text-body-xs-regular", {
+                    "text-placeholder": !issue.target_date,
+                    "text-danger-primary": shouldHighlightIssueDueDate(issue.target_date, stateDetails?.group),
                   })}
                   hideIcon
-                  clearIconClassName="h-3 w-3 hidden group-hover:inline !text-custom-text-100"
-                  // TODO: add this logic
-                  // showPlaceholderIcon
+                  clearIconClassName="h-3 w-3 hidden group-hover:inline text-primary"
                 />
                 {issue.target_date && <DateAlert date={issue.target_date} workItem={issue} projectId={projectId} />}
               </div>
-            </div>
+            </SidebarPropertyListItem>
 
             {projectId && areEstimateEnabledByProjectId(projectId) && (
-              <div className="flex h-8 items-center gap-2">
-                <div className="flex w-2/5 flex-shrink-0 items-center gap-1 text-sm text-custom-text-300">
-                  <EstimatePropertyIcon className="h-4 w-4 flex-shrink-0" />
-                  <span>{t("common.estimate")}</span>
-                </div>
+              <SidebarPropertyListItem icon={EstimatePropertyIcon} label={t("common.estimate")}>
                 <EstimateDropdown
                   value={issue?.estimate_point ?? undefined}
                   onChange={(val: string | undefined) =>
@@ -227,81 +198,66 @@ export const IssueDetailsSidebar = observer(function IssueDetailsSidebar(props:
                   projectId={projectId}
                   disabled={!isEditable}
                   buttonVariant="transparent-with-text"
-                  className="group w-3/5 flex-grow"
-                  buttonContainerClassName="w-full text-left"
-                  buttonClassName={`text-sm ${issue?.estimate_point !== null ? "" : "text-custom-text-400"}`}
+                  className="group w-full grow"
+                  buttonContainerClassName="w-full text-left h-7.5"
+                  buttonClassName={`text-body-xs-regular ${issue?.estimate_point !== null ? "" : "text-placeholder"}`}
                   placeholder={t("common.none")}
                   hideIcon
                   dropdownArrow
                   dropdownArrowClassName="h-3.5 w-3.5 hidden group-hover:inline"
                 />
-              </div>
+              </SidebarPropertyListItem>
             )}
 
             {projectDetails?.module_view && (
-              <div className="flex min-h-8 gap-2">
-                <div className="flex w-2/5 flex-shrink-0 gap-1 pt-2 text-sm text-custom-text-300">
-                  <ModuleIcon className="h-4 w-4 flex-shrink-0" />
-                  <span>{t("common.modules")}</span>
-                </div>
+              <SidebarPropertyListItem icon={ModuleIcon} label={t("common.modules")}>
                 <IssueModuleSelect
-                  className="w-3/5 flex-grow"
+                  className="w-full grow"
                   workspaceSlug={workspaceSlug}
                   projectId={projectId}
                   issueId={issueId}
                   issueOperations={issueOperations}
                   disabled={!isEditable}
                 />
-              </div>
+              </SidebarPropertyListItem>
             )}
 
             {projectDetails?.cycle_view && (
-              <div className="flex h-8 items-center gap-2">
-                <div className="flex w-2/5 flex-shrink-0 items-center gap-1 text-sm text-custom-text-300">
-                  <CycleIcon className="h-4 w-4 flex-shrink-0" />
-                  <span>{t("common.cycle")}</span>
-                  <TransferHopInfo workItem={issue} />
-                </div>
+              <SidebarPropertyListItem
+                icon={CycleIcon}
+                label={t("common.cycle")}
+                appendElement={<TransferHopInfo workItem={issue} />}
+              >
                 <IssueCycleSelect
-                  className="w-3/5 flex-grow"
+                  className="h-7.5 w-full grow"
                   workspaceSlug={workspaceSlug}
                   projectId={projectId}
                   issueId={issueId}
                   issueOperations={issueOperations}
                   disabled={!isEditable}
                 />
-              </div>
+              </SidebarPropertyListItem>
             )}
 
-            <div className="flex h-8 items-center gap-2">
-              <div className="flex w-2/5 flex-shrink-0 items-center gap-1 text-sm text-custom-text-300">
-                <ParentPropertyIcon className="h-4 w-4 flex-shrink-0" />
-                <span>{t("common.parent")}</span>
-              </div>
+            <SidebarPropertyListItem icon={ParentPropertyIcon} label={t("common.parent")}>
               <IssueParentSelectRoot
-                className="h-full w-3/5 flex-grow"
+                className="h-7.5 w-full grow"
                 workspaceSlug={workspaceSlug}
                 projectId={projectId}
                 issueId={issueId}
                 issueOperations={issueOperations}
                 disabled={!isEditable}
               />
-            </div>
+            </SidebarPropertyListItem>
 
-            <div className="flex min-h-8 gap-2">
-              <div className="flex w-2/5 flex-shrink-0 gap-1 pt-2 text-sm text-custom-text-300">
-                <LabelPropertyIcon className="h-4 w-4 flex-shrink-0" />
-                <span>{t("common.labels")}</span>
-              </div>
-              <div className="h-full min-h-8 w-3/5 flex-grow">
-                <IssueLabel
-                  workspaceSlug={workspaceSlug}
-                  projectId={projectId}
-                  issueId={issueId}
-                  disabled={!isEditable}
-                />
-              </div>
-            </div>
+            <SidebarPropertyListItem icon={LabelPropertyIcon} label={t("common.labels")}>
+              <IssueLabel
+                workspaceSlug={workspaceSlug}
+                projectId={projectId}
+                issueId={issueId}
+                disabled={!isEditable}
+              />
+            </SidebarPropertyListItem>
 
             <IssueWorklogProperty
               workspaceSlug={workspaceSlug}
diff --git a/apps/web/core/components/issues/issue-detail/subscription.tsx b/apps/web/core/components/issues/issue-detail/subscription.tsx
index 1ec5f8648..d9573d63c 100644
--- a/apps/web/core/components/issues/issue-detail/subscription.tsx
+++ b/apps/web/core/components/issues/issue-detail/subscription.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useState } from "react";
 import { isNil } from "lodash-es";
 import { observer } from "mobx-react";
@@ -77,12 +82,12 @@ export const IssueSubscription = observer(function IssueSubscription(props: TIss
   return (
     <div>
       <Button
-        size="sm"
         prependIcon={isSubscribed ? <BellOff /> : <Bell className="h-3 w-3" />}
-        variant="outline-primary"
-        className="hover:!bg-custom-primary-100/20"
+        variant="secondary"
+        className="hover:!bg-accent-primary/20"
         onClick={handleSubscription}
         disabled={!isEditable || loading}
+        size="lg"
       >
         {loading ? (
           <span>
diff --git a/apps/web/core/components/issues/issue-layouts/calendar/base-calendar-root.tsx b/apps/web/core/components/issues/issue-layouts/calendar/base-calendar-root.tsx
index fb00e3bec..3f4eef8de 100644
--- a/apps/web/core/components/issues/issue-layouts/calendar/base-calendar-root.tsx
+++ b/apps/web/core/components/issues/issue-layouts/calendar/base-calendar-root.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { FC } from "react";
 import { useCallback, useEffect } from "react";
 import { observer } from "mobx-react";
@@ -151,7 +157,7 @@ export const BaseCalendarRoot = observer(function BaseCalendarRoot(props: IBaseC
 
   return (
     <>
-      <div className="h-full w-full overflow-hidden bg-custom-background-100 pt-4">
+      <div className="h-full w-full overflow-hidden bg-surface-1 pt-4">
         <CalendarChart
           issuesFilterStore={issuesFilter}
           issues={issueMap}
diff --git a/apps/web/core/components/issues/issue-layouts/calendar/calendar.tsx b/apps/web/core/components/issues/issue-layouts/calendar/calendar.tsx
index 49c4ab936..1d1ed8860 100644
--- a/apps/web/core/components/issues/issue-layouts/calendar/calendar.tsx
+++ b/apps/web/core/components/issues/issue-layouts/calendar/calendar.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useEffect, useRef, useState } from "react";
 import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
 import { autoScrollForElements } from "@atlaskit/pragmatic-drag-and-drop-auto-scroll/element";
@@ -24,7 +30,6 @@ import { MONTHS_LIST } from "@/constants/calendar";
 import { useIssues } from "@/hooks/store/use-issues";
 import useSize from "@/hooks/use-window-size";
 // store
-import type { IProjectEpicsFilter } from "@/plane-web/store/issue/epic";
 import type { ICycleIssuesFilter } from "@/store/issue/cycle";
 import type { ICalendarStore } from "@/store/issue/issue_calendar_view.store";
 import type { IModuleIssuesFilter } from "@/store/issue/module";
@@ -139,7 +144,7 @@ export const CalendarChart = observer(function CalendarChart(props: Props) {
 
         <IssueLayoutHOC layout={EIssueLayoutTypes.CALENDAR}>
           <div
-            className={cn("flex md:h-full w-full flex-col overflow-y-auto", {
+            className={cn("flex w-full flex-col overflow-y-auto md:h-full", {
               "vertical-scrollbar scrollbar-lg": windowWidth > 768,
             })}
             ref={scrollableContainerRef}
@@ -147,7 +152,7 @@ export const CalendarChart = observer(function CalendarChart(props: Props) {
             <CalendarWeekHeader isLoading={!issues} showWeekends={showWeekends} />
             <div className="h-full w-full">
               {layout === "month" && (
-                <div className="grid h-full w-full grid-cols-1 divide-y-[0.5px] divide-custom-border-200">
+                <div className="grid h-full w-full grid-cols-1 divide-y-[0.5px] divide-subtle-1">
                   {allWeeksOfActiveMonth &&
                     Object.values(allWeeksOfActiveMonth).map((week: ICalendarWeek, weekIndex) => (
                       <CalendarWeekDays
@@ -200,7 +205,7 @@ export const CalendarChart = observer(function CalendarChart(props: Props) {
 
             {/* mobile view */}
             <div className="md:hidden">
-              <p className="p-4 text-xl font-semibold">
+              <p className="p-4 text-18 font-semibold">
                 {`${selectedDate.getDate()} ${
                   MONTHS_LIST[selectedDate.getMonth() + 1].title
                 }, ${selectedDate.getFullYear()}`}
@@ -228,7 +233,7 @@ export const CalendarChart = observer(function CalendarChart(props: Props) {
 
         {/* mobile view */}
         <div className="md:hidden">
-          <p className="p-4 text-xl font-semibold">
+          <p className="p-4 text-18 font-semibold">
             {`${selectedDate.getDate()} ${
               MONTHS_LIST[selectedDate.getMonth() + 1].title
             }, ${selectedDate.getFullYear()}`}
diff --git a/apps/web/core/components/issues/issue-layouts/calendar/day-tile.tsx b/apps/web/core/components/issues/issue-layouts/calendar/day-tile.tsx
index cb770b146..78a552300 100644
--- a/apps/web/core/components/issues/issue-layouts/calendar/day-tile.tsx
+++ b/apps/web/core/components/issues/issue-layouts/calendar/day-tile.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useEffect, useRef, useState } from "react";
 import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
 import { dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
@@ -14,7 +20,6 @@ import { highlightIssueOnDrop } from "@/components/issues/issue-layouts/utils";
 import { MONTHS_LIST } from "@/constants/calendar";
 // helpers
 // types
-import type { IProjectEpicsFilter } from "@/plane-web/store/issue/epic";
 import type { ICycleIssuesFilter } from "@/store/issue/cycle";
 import type { IModuleIssuesFilter } from "@/store/issue/module";
 import type { IProjectIssuesFilter } from "@/store/issue/project";
@@ -135,25 +140,25 @@ export const CalendarDayTile = observer(function CalendarDayTile(props: Props) {
   const isWeekend = [0, 6].includes(date.date.getDay());
   const isMonthLayout = calendarLayout === "month";
 
-  const normalBackground = isWeekend ? "bg-custom-background-90" : "bg-custom-background-100";
-  const draggingOverBackground = isWeekend ? "bg-custom-background-80" : "bg-custom-background-90";
+  const normalBackground = isWeekend ? "bg-layer-1" : "bg-layer-transparent";
+  const draggingOverBackground = isWeekend ? "bg-layer-1" : "bg-layer-transparent-hover";
 
   return (
     <>
-      <div ref={dayTileRef} className="group relative flex h-full w-full flex-col bg-custom-background-90">
+      <div ref={dayTileRef} className="group relative flex h-full w-full flex-col">
         {/* header */}
         <div
-          className={`hidden flex-shrink-0 items-center justify-end px-2 py-1.5 text-right text-xs md:flex ${
+          className={`hidden flex-shrink-0 justify-end px-2 py-1.5 text-right text-11 md:flex ${
             isMonthLayout // if month layout, highlight current month days
               ? date.is_current_month
                 ? "font-medium"
-                : "text-custom-text-300"
+                : "text-tertiary"
               : "font-medium" // if week layout, highlight all days
-          } ${isWeekend ? "bg-custom-background-90" : "bg-custom-background-100"} `}
+          } ${isWeekend ? "bg-layer-1" : "bg-layer-transparent"} `}
         >
           {date.date.getDate() === 1 && MONTHS_LIST[date.date.getMonth() + 1].shortTitle + " "}
           {isToday ? (
-            <span className="flex h-5 w-5 items-center justify-center rounded-full bg-custom-primary-100 text-white">
+            <span className="flex h-5 w-5 items-center justify-center rounded-full bg-accent-primary text-on-color">
               {date.date.getDate()}
             </span>
           ) : (
@@ -162,7 +167,7 @@ export const CalendarDayTile = observer(function CalendarDayTile(props: Props) {
         </div>
 
         {/* content */}
-        <div className="h-full w-full hidden md:block">
+        <div className="hidden h-full w-full md:block">
           <div
             className={cn(
               `h-full w-full select-none ${isDraggingOver ? `${draggingOverBackground} opacity-70` : normalBackground}`,
@@ -194,16 +199,16 @@ export const CalendarDayTile = observer(function CalendarDayTile(props: Props) {
         <div
           onClick={() => setSelectedDate(date.date)}
           className={cn(
-            "text-sm py-2.5 h-full w-full font-medium mx-auto flex flex-col justify-start items-center md:hidden cursor-pointer opacity-80",
+            "mx-auto flex h-full w-full cursor-pointer flex-col items-center justify-start py-2.5 text-13 font-medium opacity-80 md:hidden",
             {
-              "bg-custom-background-100": !isWeekend,
+              "bg-layer-2": !isWeekend,
             }
           )}
         >
           <div
-            className={cn("size-6 flex items-center justify-center rounded-full", {
-              "bg-custom-primary-100 text-white": isSelectedDate,
-              "bg-custom-primary-100/10 text-custom-primary-100 ": isToday && !isSelectedDate,
+            className={cn("flex size-6 items-center justify-center rounded-full", {
+              "bg-accent-primary text-on-color": isSelectedDate,
+              "bg-accent-primary/10 text-accent-primary": isToday && !isSelectedDate,
             })}
           >
             {date.date.getDate()}
diff --git a/apps/web/core/components/issues/issue-layouts/calendar/dropdowns/index.ts b/apps/web/core/components/issues/issue-layouts/calendar/dropdowns/index.ts
index 3f32637c3..eded9f4e9 100644
--- a/apps/web/core/components/issues/issue-layouts/calendar/dropdowns/index.ts
+++ b/apps/web/core/components/issues/issue-layouts/calendar/dropdowns/index.ts
@@ -1,2 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./months-dropdown";
 export * from "./options-dropdown";
diff --git a/apps/web/core/components/issues/issue-layouts/calendar/dropdowns/months-dropdown.tsx b/apps/web/core/components/issues/issue-layouts/calendar/dropdowns/months-dropdown.tsx
index 18a1c4b05..9539c5dd5 100644
--- a/apps/web/core/components/issues/issue-layouts/calendar/dropdowns/months-dropdown.tsx
+++ b/apps/web/core/components/issues/issue-layouts/calendar/dropdowns/months-dropdown.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React, { useState } from "react";
 import { observer } from "mobx-react";
 import { usePopper } from "react-popper";
@@ -9,7 +15,6 @@ import { ChevronLeftIcon, ChevronRightIcon } from "@plane/propel/icons";
 import { getDate } from "@plane/utils";
 import { MONTHS_LIST } from "@/constants/calendar";
 import { useCalendarView } from "@/hooks/store/use-calendar-view";
-import type { IProjectEpicsFilter } from "@/plane-web/store/issue/epic";
 import type { ICycleIssuesFilter } from "@/store/issue/cycle";
 import type { IModuleIssuesFilter } from "@/store/issue/module";
 import type { IProjectIssuesFilter } from "@/store/issue/project";
@@ -80,7 +85,7 @@ export const CalendarMonthsDropdown = observer(function CalendarMonthsDropdown(p
         <button
           type="button"
           ref={setReferenceElement}
-          className="text-xl font-semibold outline-none"
+          className="text-18 font-semibold outline-none"
           disabled={calendarLayout === "week"}
         >
           {calendarLayout === "month"
@@ -102,7 +107,7 @@ export const CalendarMonthsDropdown = observer(function CalendarMonthsDropdown(p
             ref={setPopperElement}
             style={styles.popper}
             {...attributes.popper}
-            className="w-56 divide-y divide-custom-border-200 rounded border border-custom-border-200 bg-custom-background-100 p-3 shadow-custom-shadow-rg"
+            className="w-56 divide-y divide-subtle-1 rounded-sm border border-subtle bg-surface-1 p-3 shadow-raised-200"
           >
             <div className="flex items-center justify-between gap-2 pb-3">
               <button
@@ -115,7 +120,7 @@ export const CalendarMonthsDropdown = observer(function CalendarMonthsDropdown(p
               >
                 <ChevronLeftIcon height={14} width={14} />
               </button>
-              <span className="text-xs">{activeMonthDate.getFullYear()}</span>
+              <span className="text-11">{activeMonthDate.getFullYear()}</span>
               <button
                 type="button"
                 className="grid place-items-center"
@@ -132,7 +137,7 @@ export const CalendarMonthsDropdown = observer(function CalendarMonthsDropdown(p
                 <button
                   key={month.shortTitle}
                   type="button"
-                  className="rounded py-0.5 text-xs hover:bg-custom-background-80"
+                  className="rounded-sm py-0.5 text-11 hover:bg-layer-1"
                   onClick={() => {
                     const newDate = new Date(activeMonthDate.getFullYear(), index, 1);
                     handleDateChange(newDate);
diff --git a/apps/web/core/components/issues/issue-layouts/calendar/dropdowns/options-dropdown.tsx b/apps/web/core/components/issues/issue-layouts/calendar/dropdowns/options-dropdown.tsx
index 366541de9..2917da069 100644
--- a/apps/web/core/components/issues/issue-layouts/calendar/dropdowns/options-dropdown.tsx
+++ b/apps/web/core/components/issues/issue-layouts/calendar/dropdowns/options-dropdown.tsx
@@ -1,8 +1,14 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React, { useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 import { usePopper } from "react-popper";
-import { Check, MoreVerticalIcon } from "lucide-react";
+import { MoreVerticalIcon } from "lucide-react";
 import { Popover, Transition } from "@headlessui/react";
 // hooks
 // ui
@@ -10,7 +16,7 @@ import { Popover, Transition } from "@headlessui/react";
 import type { TSupportedFilterTypeForUpdate } from "@plane/constants";
 import { EIssueFilterType } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { ChevronUpIcon } from "@plane/propel/icons";
+import { CheckIcon, ChevronUpIcon } from "@plane/propel/icons";
 import type { TCalendarLayouts, TSupportedFilterForUpdate } from "@plane/types";
 import { ToggleSwitch } from "@plane/ui";
 // types
@@ -18,7 +24,6 @@ import { ToggleSwitch } from "@plane/ui";
 import { CALENDAR_LAYOUTS } from "@/constants/calendar";
 import { useCalendarView } from "@/hooks/store/use-calendar-view";
 import useSize from "@/hooks/use-window-size";
-import type { IProjectEpicsFilter } from "@/plane-web/store/issue/epic";
 import type { ICycleIssuesFilter } from "@/store/issue/cycle";
 import type { IModuleIssuesFilter } from "@/store/issue/module";
 import type { IProjectIssuesFilter } from "@/store/issue/project";
@@ -99,8 +104,8 @@ export const CalendarOptionsDropdown = observer(function CalendarOptionsDropdown
           <Popover.Button as={React.Fragment}>
             <button type="button" ref={setReferenceElement}>
               <div
-                className={`hidden md:flex items-center gap-1.5 rounded bg-custom-background-80 px-2.5 py-1 text-xs outline-none hover:bg-custom-background-80 ${
-                  open ? "text-custom-text-100" : "text-custom-text-200"
+                className={`hidden items-center gap-1.5 rounded-sm bg-layer-1 px-2.5 py-1 text-11 outline-none hover:bg-layer-1 md:flex ${
+                  open ? "text-primary" : "text-secondary"
                 }`}
               >
                 <div className="font-medium">{t("common.options")}</div>
@@ -111,7 +116,7 @@ export const CalendarOptionsDropdown = observer(function CalendarOptionsDropdown
                 </div>
               </div>
               <div className="md:hidden">
-                <MoreVerticalIcon className="h-4 text-custom-text-200" strokeWidth={2} />
+                <MoreVerticalIcon className="h-4 text-secondary" strokeWidth={2} />
               </div>
             </button>
           </Popover.Button>
@@ -129,23 +134,23 @@ export const CalendarOptionsDropdown = observer(function CalendarOptionsDropdown
                 ref={setPopperElement}
                 style={styles.popper}
                 {...attributes.popper}
-                className="absolute right-0 z-10 mt-1 min-w-[12rem] overflow-hidden rounded border border-custom-border-200 bg-custom-background-100 p-1 shadow-custom-shadow-sm"
+                className="absolute right-0 z-10 mt-1 min-w-[12rem] overflow-hidden rounded-sm border border-subtle bg-surface-1 p-1 shadow-raised-200"
               >
                 <div>
                   {Object.entries(CALENDAR_LAYOUTS).map(([layout, layoutDetails]) => (
                     <button
                       key={layout}
                       type="button"
-                      className="flex w-full items-center justify-between gap-2 rounded px-1 py-1.5 text-left text-xs hover:bg-custom-background-80"
+                      className="flex w-full items-center justify-between gap-2 rounded-sm px-1 py-1.5 text-left text-11 hover:bg-layer-1"
                       onClick={() => handleLayoutChange(layoutDetails.key, closePopover)}
                     >
                       {layoutDetails.title}
-                      {calendarLayout === layout && <Check size={12} strokeWidth={2} />}
+                      {calendarLayout === layout && <CheckIcon width={12} height={12} strokeWidth={2} />}
                     </button>
                   ))}
                   <button
                     type="button"
-                    className="flex w-full items-center justify-between gap-2 rounded px-1 py-1.5 text-left text-xs hover:bg-custom-background-80"
+                    className="flex w-full items-center justify-between gap-2 rounded-sm px-1 py-1.5 text-left text-11 hover:bg-layer-1"
                     onClick={handleToggleWeekends}
                   >
                     {t("common.actions.show_weekends")}
diff --git a/apps/web/core/components/issues/issue-layouts/calendar/header.tsx b/apps/web/core/components/issues/issue-layouts/calendar/header.tsx
index b3de9b59d..a16d80a15 100644
--- a/apps/web/core/components/issues/issue-layouts/calendar/header.tsx
+++ b/apps/web/core/components/issues/issue-layouts/calendar/header.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 
 // components
@@ -8,7 +14,6 @@ import type { TSupportedFilterForUpdate } from "@plane/types";
 import { Row } from "@plane/ui";
 // icons
 import { useCalendarView } from "@/hooks/store/use-calendar-view";
-import type { IProjectEpicsFilter } from "@/plane-web/store/issue/epic";
 import type { ICycleIssuesFilter } from "@/store/issue/cycle";
 import type { IModuleIssuesFilter } from "@/store/issue/module";
 import type { IProjectIssuesFilter } from "@/store/issue/project";
@@ -109,7 +114,7 @@ export const CalendarHeader = observer(function CalendarHeader(props: ICalendarH
       <div className="flex items-center gap-1.5">
         <button
           type="button"
-          className="rounded bg-custom-background-80 px-2.5 py-1 text-xs font-medium text-custom-text-200 hover:text-custom-text-100"
+          className="rounded-sm bg-layer-transparent px-2.5 py-1 text-11 font-medium text-secondary hover:bg-layer-transparent-hover hover:text-primary"
           onClick={handleToday}
         >
           {t("common.today")}
diff --git a/apps/web/core/components/issues/issue-layouts/calendar/issue-block-root.tsx b/apps/web/core/components/issues/issue-layouts/calendar/issue-block-root.tsx
index fbc5177ac..d2aaf6f38 100644
--- a/apps/web/core/components/issues/issue-layouts/calendar/issue-block-root.tsx
+++ b/apps/web/core/components/issues/issue-layouts/calendar/issue-block-root.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React, { useEffect, useRef, useState } from "react";
 import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
 import { draggable } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
diff --git a/apps/web/core/components/issues/issue-layouts/calendar/issue-block.tsx b/apps/web/core/components/issues/issue-layouts/calendar/issue-block.tsx
index 3c80994d6..5902c4ca6 100644
--- a/apps/web/core/components/issues/issue-layouts/calendar/issue-block.tsx
+++ b/apps/web/core/components/issues/issue-layouts/calendar/issue-block.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useState, useRef, forwardRef } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
@@ -59,8 +65,8 @@ export const CalendarIssueBlock = observer(
     const customActionButton = (
       <div
         ref={menuActionRef}
-        className={`w-full cursor-pointer rounded p-1 text-custom-sidebar-text-400 hover:bg-custom-background-80 ${
-          isMenuActive ? "bg-custom-background-80 text-custom-text-100" : "text-custom-text-200"
+        className={`w-full cursor-pointer rounded-sm p-1 text-placeholder hover:bg-layer-1 ${
+          isMenuActive ? "bg-layer-1-active text-primary" : "text-secondary"
         }`}
         onClick={() => setIsMenuActive(!isMenuActive)}
       >
@@ -92,29 +98,29 @@ export const CalendarIssueBlock = observer(
               id={`issue-${issue.id}`}
               href={workItemLink}
               onClick={() => handleIssuePeekOverview(issue)}
-              className="block w-full text-sm text-custom-text-100 rounded border-b md:border-[1px] border-custom-border-200 hover:border-custom-border-400"
+              className="block w-full rounded-sm border-b border-subtle text-13 text-primary hover:border-subtle-1 md:border-[1px]"
               disabled={!!issue?.tempId || isMobile}
               ref={ref}
             >
               <>
                 {issue?.tempId !== undefined && (
-                  <div className="absolute left-0 top-0 z-[99999] h-full w-full animate-pulse bg-custom-background-100/20" />
+                  <div className="absolute top-0 left-0 z-[99999] h-full w-full animate-pulse bg-surface-1/20" />
                 )}
 
                 <div
                   ref={blockRef}
                   className={cn(
-                    "group/calendar-block flex h-10 md:h-8 w-full items-center justify-between gap-1.5 rounded  md:px-1 px-4 py-1.5 ",
+                    "group/calendar-block flex h-10 w-full items-center justify-between gap-1.5 rounded-sm px-4 py-1.5 md:h-8 md:px-1",
                     {
-                      "bg-custom-background-90 shadow-custom-shadow-rg border-custom-primary-100": isDragging,
-                      "bg-custom-background-100 hover:bg-custom-background-90": !isDragging,
-                      "border border-custom-primary-70 hover:border-custom-primary-70": getIsIssuePeeked(issue.id),
+                      "border-accent-strong bg-surface-2 shadow-raised-200": isDragging,
+                      "bg-surface-1 hover:bg-surface-2": !isDragging,
+                      "border border-accent-strong hover:border-accent-strong": getIsIssuePeeked(issue.id),
                     }
                   )}
                 >
                   <div className="flex h-full items-center gap-1.5 truncate">
                     <span
-                      className="h-full w-0.5 flex-shrink-0 rounded"
+                      className="h-full w-0.5 flex-shrink-0 rounded-sm"
                       style={{
                         backgroundColor: stateColor,
                       }}
@@ -123,14 +129,15 @@ export const CalendarIssueBlock = observer(
                       <IssueIdentifier
                         issueId={issue.id}
                         projectId={issue.project_id}
-                        textContainerClassName="text-sm md:text-xs text-custom-text-300"
+                        size="xs"
+                        variant="tertiary"
                         displayProperties={issuesFilter?.issueFilters?.displayProperties}
                       />
                     )}
-                    <div className="truncate text-sm font-medium md:font-normal md:text-xs">{issue.name}</div>
+                    <div className="truncate text-13 font-medium md:text-11 md:font-regular">{issue.name}</div>
                   </div>
                   <div
-                    className={cn("flex-shrink-0 size-5", {
+                    className={cn("size-5 flex-shrink-0", {
                       "hidden group-hover/calendar-block:block": !isMobile,
                       block: isMenuActive,
                     })}
diff --git a/apps/web/core/components/issues/issue-layouts/calendar/issue-blocks.tsx b/apps/web/core/components/issues/issue-layouts/calendar/issue-blocks.tsx
index 211c8189b..0ded0ad75 100644
--- a/apps/web/core/components/issues/issue-layouts/calendar/issue-blocks.tsx
+++ b/apps/web/core/components/issues/issue-layouts/calendar/issue-blocks.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import { useTranslation } from "@plane/i18n";
 import type { TIssue, TPaginationData } from "@plane/types";
@@ -78,12 +84,12 @@ export const CalendarIssueBlocks = observer(function CalendarIssueBlocks(props:
 
       {isPaginating && (
         <div className="p-1 px-2">
-          <div className="flex h-10 md:h-8 w-full items-center justify-between gap-1.5 rounded md:px-1 px-4 py-1.5 bg-custom-background-80 animate-pulse" />
+          <div className="flex h-10 w-full animate-pulse items-center justify-between gap-1.5 rounded-sm bg-layer-1 px-4 py-1.5 md:h-8 md:px-1" />
         </div>
       )}
 
       {enableQuickIssueCreate && !disableIssueCreation && !readOnly && (
-        <div className="border-b border-custom-border-200 px-1 py-1 md:border-none md:px-2">
+        <div className="border-b border-subtle px-1 py-1 md:border-none md:px-2">
           <CalendarQuickAddIssueActions
             prePopulatedData={{
               target_date: formattedDatePayload,
@@ -99,7 +105,7 @@ export const CalendarIssueBlocks = observer(function CalendarIssueBlocks(props:
         <div className="flex items-center px-2.5 py-1">
           <button
             type="button"
-            className="w-min whitespace-nowrap rounded text-xs px-1.5 py-1 font-medium  hover:bg-custom-background-80 text-custom-primary-100 hover:text-custom-primary-200"
+            className="w-min rounded-sm px-1.5 py-1 text-11 font-medium whitespace-nowrap text-accent-primary hover:bg-layer-1 hover:text-accent-secondary"
             onClick={() => loadMoreIssues(formattedDatePayload)}
           >
             {t("common.load_more")}
diff --git a/apps/web/core/components/issues/issue-layouts/calendar/quick-add-issue-actions.tsx b/apps/web/core/components/issues/issue-layouts/calendar/quick-add-issue-actions.tsx
index 76220ab66..a5b3a4c8a 100644
--- a/apps/web/core/components/issues/issue-layouts/calendar/quick-add-issue-actions.tsx
+++ b/apps/web/core/components/issues/issue-layouts/calendar/quick-add-issue-actions.tsx
@@ -1,10 +1,17 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useState } from "react";
 import { differenceInCalendarDays } from "date-fns/differenceInCalendarDays";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
-import { PlusIcon } from "lucide-react";
-// plane imports
+
 import { useTranslation } from "@plane/i18n";
+// plane imports
+import { PlusIcon } from "@plane/propel/icons";
 import { setPromiseToast } from "@plane/propel/toast";
 import type { ISearchIssueResponse, TIssue } from "@plane/types";
 import { EIssueLayoutTypes } from "@plane/types";
@@ -104,7 +111,7 @@ export const CalendarQuickAddIssueActions = observer(function CalendarQuickAddIs
         customQuickAddButton={
           <div
             className={cn(
-              "md:opacity-0 rounded md:border-[0.5px] border-custom-border-200 md:group-hover:opacity-100",
+              "overflow-hidden rounded-sm bg-layer-transparent hover:bg-layer-transparent-hover md:opacity-0 md:group-hover:opacity-100",
               {
                 block: isMenuOpen,
               }
@@ -117,9 +124,9 @@ export const CalendarQuickAddIssueActions = observer(function CalendarQuickAddIs
               className="w-full"
               customButtonClassName="w-full"
               customButton={
-                <div className="flex w-full items-center gap-x-[6px] rounded-md px-2 py-1.5 text-custom-text-350 hover:text-custom-text-300">
-                  <PlusIcon className="h-3.5 w-3.5 stroke-2 flex-shrink-0" />
-                  <span className="text-sm font-medium flex-shrink-0">
+                <div className="flex w-full items-center gap-x-[6px] rounded-md px-2 py-1.5 text-tertiary hover:text-tertiary">
+                  <PlusIcon className="h-3.5 w-3.5 flex-shrink-0 stroke-2" />
+                  <span className="flex-shrink-0 text-13 font-medium">
                     {isEpic ? t("epic.add.label") : t("issue.add.label")}
                   </span>
                 </div>
diff --git a/apps/web/core/components/issues/issue-layouts/calendar/roots/cycle-root.tsx b/apps/web/core/components/issues/issue-layouts/calendar/roots/cycle-root.tsx
index 69469c89f..5d98ec5a2 100644
--- a/apps/web/core/components/issues/issue-layouts/calendar/roots/cycle-root.tsx
+++ b/apps/web/core/components/issues/issue-layouts/calendar/roots/cycle-root.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useCallback } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
diff --git a/apps/web/core/components/issues/issue-layouts/calendar/roots/module-root.tsx b/apps/web/core/components/issues/issue-layouts/calendar/roots/module-root.tsx
index b06e5b87c..30a1e544d 100644
--- a/apps/web/core/components/issues/issue-layouts/calendar/roots/module-root.tsx
+++ b/apps/web/core/components/issues/issue-layouts/calendar/roots/module-root.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useCallback } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
diff --git a/apps/web/core/components/issues/issue-layouts/calendar/roots/project-root.tsx b/apps/web/core/components/issues/issue-layouts/calendar/roots/project-root.tsx
index 0214473a1..4d696b316 100644
--- a/apps/web/core/components/issues/issue-layouts/calendar/roots/project-root.tsx
+++ b/apps/web/core/components/issues/issue-layouts/calendar/roots/project-root.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // plane imports
diff --git a/apps/web/core/components/issues/issue-layouts/calendar/roots/project-view-root.tsx b/apps/web/core/components/issues/issue-layouts/calendar/roots/project-view-root.tsx
index 0cb8915b7..45c56c5c5 100644
--- a/apps/web/core/components/issues/issue-layouts/calendar/roots/project-view-root.tsx
+++ b/apps/web/core/components/issues/issue-layouts/calendar/roots/project-view-root.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // local imports
diff --git a/apps/web/core/components/issues/issue-layouts/calendar/utils.ts b/apps/web/core/components/issues/issue-layouts/calendar/utils.ts
index bab8c863b..b795eb909 100644
--- a/apps/web/core/components/issues/issue-layouts/calendar/utils.ts
+++ b/apps/web/core/components/issues/issue-layouts/calendar/utils.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { TIssue } from "@plane/types";
 
 export const handleDragDrop = async (
diff --git a/apps/web/core/components/issues/issue-layouts/calendar/week-days.tsx b/apps/web/core/components/issues/issue-layouts/calendar/week-days.tsx
index 0b695c9c4..5635d6d41 100644
--- a/apps/web/core/components/issues/issue-layouts/calendar/week-days.tsx
+++ b/apps/web/core/components/issues/issue-layouts/calendar/week-days.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 // plane imports
 import type { TGroupedIssues, TIssue, TIssueMap, TPaginationData, ICalendarDate, ICalendarWeek } from "@plane/types";
@@ -5,7 +11,6 @@ import { cn, getOrderedDays, renderFormattedPayloadDate } from "@plane/utils";
 // hooks
 import { useUserProfile } from "@/hooks/store/user";
 // types
-import type { IProjectEpicsFilter } from "@/plane-web/store/issue/epic";
 import type { ICycleIssuesFilter } from "@/store/issue/cycle";
 import type { IModuleIssuesFilter } from "@/store/issue/module";
 import type { IProjectIssuesFilter } from "@/store/issue/project";
@@ -79,7 +84,7 @@ export const CalendarWeekDays = observer(function CalendarWeekDays(props: Props)
 
   return (
     <div
-      className={cn("grid divide-custom-border-200 md:divide-x-[0.5px]", {
+      className={cn("grid divide-subtle-1 md:divide-x-[0.5px]", {
         "grid-cols-7": showWeekends,
         "grid-cols-5": !showWeekends,
         "h-full": calendarLayout !== "month",
diff --git a/apps/web/core/components/issues/issue-layouts/calendar/week-header.tsx b/apps/web/core/components/issues/issue-layouts/calendar/week-header.tsx
index 0840c2500..bc5a3a0e6 100644
--- a/apps/web/core/components/issues/issue-layouts/calendar/week-header.tsx
+++ b/apps/web/core/components/issues/issue-layouts/calendar/week-header.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import { EStartOfTheWeek } from "@plane/types";
 import { getOrderedDays } from "@plane/utils";
@@ -22,22 +28,19 @@ export const CalendarWeekHeader = observer(function CalendarWeekHeader(props: Pr
 
   return (
     <div
-      className={`relative sticky top-0 z-[1] grid md:divide-x-[0.5px] divide-custom-border-200 text-sm font-medium ${
+      className={`relative sticky top-0 z-[1] grid divide-subtle-1 text-13 font-medium md:divide-x-[0.5px] ${
         showWeekends ? "grid-cols-7" : "grid-cols-5"
       }`}
     >
       {isLoading && (
-        <div className="absolute h-[1.5px] w-3/4 animate-[bar-loader_2s_linear_infinite] bg-custom-primary-100" />
+        <div className="absolute h-[1.5px] w-3/4 animate-[bar-loader_2s_linear_infinite] bg-accent-primary" />
       )}
       {orderedDays.map((day) => {
         if (!showWeekends && (day.value === EStartOfTheWeek.SUNDAY || day.value === EStartOfTheWeek.SATURDAY))
           return null;
 
         return (
-          <div
-            key={day.shortTitle}
-            className="flex h-11 items-center justify-center md:justify-end bg-custom-background-90 px-4"
-          >
+          <div key={day.shortTitle} className="flex h-11 items-center justify-center bg-layer-1 px-4 md:justify-end">
             {day.shortTitle}
           </div>
         );
diff --git a/apps/web/core/components/issues/issue-layouts/empty-states/archived-issues.tsx b/apps/web/core/components/issues/issue-layouts/empty-states/archived-issues.tsx
index a2d576d4d..8ae22d842 100644
--- a/apps/web/core/components/issues/issue-layouts/empty-states/archived-issues.tsx
+++ b/apps/web/core/components/issues/issue-layouts/empty-states/archived-issues.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // plane imports
@@ -39,7 +45,7 @@ export const ProjectArchivedEmptyState = observer(function ProjectArchivedEmptyS
               label: "Clear filters",
               onClick: archivedWorkItemFilter?.clearFilters,
               disabled: !canPerformEmptyStateActions || !archivedWorkItemFilter,
-              variant: "outline-primary",
+              variant: "secondary",
             },
           ]}
         />
diff --git a/apps/web/core/components/issues/issue-layouts/empty-states/cycle.tsx b/apps/web/core/components/issues/issue-layouts/empty-states/cycle.tsx
index d7e6b1bdf..14d0e14f7 100644
--- a/apps/web/core/components/issues/issue-layouts/empty-states/cycle.tsx
+++ b/apps/web/core/components/issues/issue-layouts/empty-states/cycle.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useState } from "react";
 import { isEmpty } from "lodash-es";
 import { observer } from "mobx-react";
@@ -11,7 +17,6 @@ import type { ISearchIssueResponse } from "@plane/types";
 import { EIssuesStoreType, EUserProjectRoles } from "@plane/types";
 // components
 import { ExistingIssuesListModal } from "@/components/core/modals/existing-issues-list-modal";
-import { captureClick } from "@/helpers/event-tracker.helper";
 import { useCommandPalette } from "@/hooks/store/use-command-palette";
 import { useCycle } from "@/hooks/store/use-cycle";
 import { useIssues } from "@/hooks/store/use-issues";
@@ -94,7 +99,7 @@ export const CycleEmptyState = observer(function CycleEmptyState() {
                 label: "Clear filters",
                 onClick: cycleWorkItemFilter?.clearFilters,
                 disabled: !canPerformEmptyStateActions || !cycleWorkItemFilter,
-                variant: "outline-primary",
+                variant: "secondary",
               },
             ]}
           />
@@ -107,7 +112,6 @@ export const CycleEmptyState = observer(function CycleEmptyState() {
               {
                 label: t("project_empty_state.cycle_work_items.cta_primary"),
                 onClick: () => {
-                  captureClick({ elementName: WORK_ITEM_TRACKER_ELEMENTS.EMPTY_STATE_ADD_BUTTON.CYCLE });
                   toggleCreateIssueModal(true, EIssuesStoreType.CYCLE);
                 },
                 disabled: !canPerformEmptyStateActions,
@@ -118,7 +122,7 @@ export const CycleEmptyState = observer(function CycleEmptyState() {
                 label: t("project_empty_state.cycle_work_items.cta_secondary"),
                 onClick: () => setCycleIssuesListModal(true),
                 disabled: !canPerformEmptyStateActions,
-                variant: "outline-primary",
+                variant: "secondary",
                 "data-ph-element": WORK_ITEM_TRACKER_ELEMENTS.EMPTY_STATE_ADD_BUTTON.CYCLE,
               },
             ]}
diff --git a/apps/web/core/components/issues/issue-layouts/empty-states/global-view.tsx b/apps/web/core/components/issues/issue-layouts/empty-states/global-view.tsx
index 87ac70cca..9be06fa7a 100644
--- a/apps/web/core/components/issues/issue-layouts/empty-states/global-view.tsx
+++ b/apps/web/core/components/issues/issue-layouts/empty-states/global-view.tsx
@@ -1,11 +1,16 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 // plane imports
-import { EUserPermissionsLevel, WORK_ITEM_TRACKER_ELEMENTS } from "@plane/constants";
+import { EUserPermissionsLevel } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { EmptyStateDetailed } from "@plane/propel/empty-state";
 import { EIssuesStoreType, EUserWorkspaceRoles } from "@plane/types";
 // hooks
-import { captureClick } from "@/helpers/event-tracker.helper";
 import { useCommandPalette } from "@/hooks/store/use-command-palette";
 import { useProject } from "@/hooks/store/use-project";
 import { useUserPermissions } from "@/hooks/store/user";
@@ -35,7 +40,6 @@ export const GlobalViewEmptyState = observer(function GlobalViewEmptyState() {
             label: t("workspace_projects.empty_state.no_projects.primary_button.text"),
             onClick: () => {
               toggleCreateProjectModal(true);
-              captureClick({ elementName: WORK_ITEM_TRACKER_ELEMENTS.EMPTY_STATE_ADD_BUTTON.GLOBAL_VIEW });
             },
             disabled: !hasMemberLevelPermission,
             variant: "primary",
@@ -55,7 +59,6 @@ export const GlobalViewEmptyState = observer(function GlobalViewEmptyState() {
         {
           label: t(`workspace_empty_state.views.cta_primary`),
           onClick: () => {
-            captureClick({ elementName: WORK_ITEM_TRACKER_ELEMENTS.EMPTY_STATE_ADD_BUTTON.GLOBAL_VIEW });
             toggleCreateIssueModal(true, EIssuesStoreType.PROJECT);
           },
           disabled: !hasMemberLevelPermission,
diff --git a/apps/web/core/components/issues/issue-layouts/empty-states/index.tsx b/apps/web/core/components/issues/issue-layouts/empty-states/index.tsx
index 44573f94d..3f6523ba8 100644
--- a/apps/web/core/components/issues/issue-layouts/empty-states/index.tsx
+++ b/apps/web/core/components/issues/issue-layouts/empty-states/index.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // plane web components
 import { EIssuesStoreType } from "@plane/types";
 import { TeamEmptyState } from "@/plane-web/components/issues/issue-layouts/empty-states/team-issues";
diff --git a/apps/web/core/components/issues/issue-layouts/empty-states/module.tsx b/apps/web/core/components/issues/issue-layouts/empty-states/module.tsx
index 15bb2bcab..6c0022d26 100644
--- a/apps/web/core/components/issues/issue-layouts/empty-states/module.tsx
+++ b/apps/web/core/components/issues/issue-layouts/empty-states/module.tsx
@@ -1,8 +1,14 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // plane imports
-import { EUserPermissionsLevel, WORK_ITEM_TRACKER_ELEMENTS } from "@plane/constants";
+import { EUserPermissionsLevel } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { EmptyStateDetailed } from "@plane/propel/empty-state";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
@@ -10,7 +16,6 @@ import type { ISearchIssueResponse } from "@plane/types";
 import { EIssuesStoreType, EUserProjectRoles } from "@plane/types";
 // components
 import { ExistingIssuesListModal } from "@/components/core/modals/existing-issues-list-modal";
-import { captureClick } from "@/helpers/event-tracker.helper";
 // hooks
 import { useCommandPalette } from "@/hooks/store/use-command-palette";
 import { useIssues } from "@/hooks/store/use-issues";
@@ -81,7 +86,7 @@ export const ModuleEmptyState = observer(function ModuleEmptyState() {
                 label: "Clear filters",
                 onClick: moduleWorkItemFilter?.clearFilters,
                 disabled: !canPerformEmptyStateActions || !moduleWorkItemFilter,
-                variant: "outline-primary",
+                variant: "secondary",
               },
             ]}
           />
@@ -94,7 +99,6 @@ export const ModuleEmptyState = observer(function ModuleEmptyState() {
               {
                 label: t("project_empty_state.module_work_items.cta_primary"),
                 onClick: () => {
-                  captureClick({ elementName: WORK_ITEM_TRACKER_ELEMENTS.EMPTY_STATE_ADD_BUTTON.MODULE });
                   toggleCreateIssueModal(true, EIssuesStoreType.MODULE);
                 },
                 disabled: !canPerformEmptyStateActions,
@@ -104,7 +108,7 @@ export const ModuleEmptyState = observer(function ModuleEmptyState() {
                 label: t("project_empty_state.module_work_items.cta_secondary"),
                 onClick: () => setModuleIssuesListModal(true),
                 disabled: !canPerformEmptyStateActions,
-                variant: "outline-primary",
+                variant: "secondary",
               },
             ]}
           />
diff --git a/apps/web/core/components/issues/issue-layouts/empty-states/profile-view.tsx b/apps/web/core/components/issues/issue-layouts/empty-states/profile-view.tsx
index 26c90e698..9d6283ab2 100644
--- a/apps/web/core/components/issues/issue-layouts/empty-states/profile-view.tsx
+++ b/apps/web/core/components/issues/issue-layouts/empty-states/profile-view.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // components
diff --git a/apps/web/core/components/issues/issue-layouts/empty-states/project-epic.tsx b/apps/web/core/components/issues/issue-layouts/empty-states/project-epic.tsx
index d2249c683..83d332a97 100644
--- a/apps/web/core/components/issues/issue-layouts/empty-states/project-epic.tsx
+++ b/apps/web/core/components/issues/issue-layouts/empty-states/project-epic.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export function ProjectEpicsEmptyState() {
   return <></>;
 }
diff --git a/apps/web/core/components/issues/issue-layouts/empty-states/project-issues.tsx b/apps/web/core/components/issues/issue-layouts/empty-states/project-issues.tsx
index 57f35b019..dd9ab174f 100644
--- a/apps/web/core/components/issues/issue-layouts/empty-states/project-issues.tsx
+++ b/apps/web/core/components/issues/issue-layouts/empty-states/project-issues.tsx
@@ -1,12 +1,16 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // plane imports
-import { EUserPermissionsLevel, WORK_ITEM_TRACKER_ELEMENTS } from "@plane/constants";
+import { EUserPermissionsLevel } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { EmptyStateDetailed } from "@plane/propel/empty-state";
 import { EIssuesStoreType, EUserProjectRoles } from "@plane/types";
-// components
-import { captureClick } from "@/helpers/event-tracker.helper";
 // hooks
 import { useCommandPalette } from "@/hooks/store/use-command-palette";
 import { useUserPermissions } from "@/hooks/store/user";
@@ -41,7 +45,7 @@ export const ProjectEmptyState = observer(function ProjectEmptyState() {
               label: t("project_issues.empty_state.issues_empty_filter.secondary_button.text"),
               onClick: projectWorkItemFilter?.clearFilters,
               disabled: !canPerformEmptyStateActions || !projectWorkItemFilter,
-              variant: "outline-primary",
+              variant: "secondary",
             },
           ]}
         />
@@ -54,7 +58,6 @@ export const ProjectEmptyState = observer(function ProjectEmptyState() {
             {
               label: t("project_empty_state.work_items.cta_primary"),
               onClick: () => {
-                captureClick({ elementName: WORK_ITEM_TRACKER_ELEMENTS.EMPTY_STATE_ADD_BUTTON.WORK_ITEMS });
                 toggleCreateIssueModal(true, EIssuesStoreType.PROJECT);
               },
               disabled: !canPerformEmptyStateActions,
diff --git a/apps/web/core/components/issues/issue-layouts/empty-states/project-view.tsx b/apps/web/core/components/issues/issue-layouts/empty-states/project-view.tsx
index 4ea0dcd4b..4bcfa8fb9 100644
--- a/apps/web/core/components/issues/issue-layouts/empty-states/project-view.tsx
+++ b/apps/web/core/components/issues/issue-layouts/empty-states/project-view.tsx
@@ -1,10 +1,14 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 // components
-import { EUserPermissions, EUserPermissionsLevel, WORK_ITEM_TRACKER_ELEMENTS } from "@plane/constants";
+import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { EmptyStateDetailed } from "@plane/propel/empty-state";
 import { EIssuesStoreType } from "@plane/types";
-// components
-import { captureClick } from "@/helpers/event-tracker.helper";
 // hooks
 import { useCommandPalette } from "@/hooks/store/use-command-palette";
 import { useUserPermissions } from "@/hooks/store/user";
@@ -30,7 +34,6 @@ export const ProjectViewEmptyState = observer(function ProjectViewEmptyState() {
         {
           label: "New work item",
           onClick: () => {
-            captureClick({ elementName: WORK_ITEM_TRACKER_ELEMENTS.EMPTY_STATE_ADD_BUTTON.PROJECT_VIEW });
             toggleCreateIssueModal(true, EIssuesStoreType.PROJECT_VIEW);
           },
           disabled: !isCreatingIssueAllowed,
diff --git a/apps/web/core/components/issues/issue-layouts/filters/applied-filters/cycle.tsx b/apps/web/core/components/issues/issue-layouts/filters/applied-filters/cycle.tsx
index 072b7489f..37b467aa4 100644
--- a/apps/web/core/components/issues/issue-layouts/filters/applied-filters/cycle.tsx
+++ b/apps/web/core/components/issues/issue-layouts/filters/applied-filters/cycle.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import { CloseIcon, CycleGroupIcon } from "@plane/propel/icons";
 import type { TCycleGroups } from "@plane/types";
@@ -27,13 +33,13 @@ export const AppliedCycleFilters = observer(function AppliedCycleFilters(props:
         const cycleStatus = (cycleDetails?.status ? cycleDetails?.status.toLocaleLowerCase() : "draft") as TCycleGroups;
 
         return (
-          <div key={cycleId} className="flex items-center gap-1 rounded bg-custom-background-80 p-1 text-xs truncate">
+          <div key={cycleId} className="flex items-center gap-1 truncate rounded-sm bg-layer-1 p-1 text-11">
             <CycleGroupIcon cycleGroup={cycleStatus} className="h-3 w-3 flex-shrink-0" />
-            <span className="normal-case truncate">{cycleDetails.name}</span>
+            <span className="truncate normal-case">{cycleDetails.name}</span>
             {editable && (
               <button
                 type="button"
-                className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
+                className="grid place-items-center text-tertiary hover:text-secondary"
                 onClick={() => handleRemove(cycleId)}
               >
                 <CloseIcon height={10} width={10} strokeWidth={2} />
diff --git a/apps/web/core/components/issues/issue-layouts/filters/applied-filters/date.tsx b/apps/web/core/components/issues/issue-layouts/filters/applied-filters/date.tsx
index f6d8cef12..89bec6578 100644
--- a/apps/web/core/components/issues/issue-layouts/filters/applied-filters/date.tsx
+++ b/apps/web/core/components/issues/issue-layouts/filters/applied-filters/date.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 // icons
 import { DATE_AFTER_FILTER_OPTIONS } from "@plane/constants";
@@ -36,11 +42,11 @@ export const AppliedDateFilters = observer(function AppliedDateFilters(props: Pr
   return (
     <>
       {values.map((date) => (
-        <div key={date} className="flex items-center gap-1 rounded bg-custom-background-80 p-1 text-xs">
+        <div key={date} className="flex items-center gap-1 rounded-sm bg-layer-1 p-1 text-11">
           <span className="normal-case">{getDateLabel(date)}</span>
           <button
             type="button"
-            className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
+            className="grid place-items-center text-tertiary hover:text-secondary"
             onClick={() => handleRemove(date)}
           >
             <CloseIcon height={10} width={10} strokeWidth={2} />
diff --git a/apps/web/core/components/issues/issue-layouts/filters/applied-filters/index.ts b/apps/web/core/components/issues/issue-layouts/filters/applied-filters/index.ts
index b2b7ab67b..0f2f68865 100644
--- a/apps/web/core/components/issues/issue-layouts/filters/applied-filters/index.ts
+++ b/apps/web/core/components/issues/issue-layouts/filters/applied-filters/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./date";
 export * from "./label";
 export * from "./members";
diff --git a/apps/web/core/components/issues/issue-layouts/filters/applied-filters/label.tsx b/apps/web/core/components/issues/issue-layouts/filters/applied-filters/label.tsx
index 2cd0d3778..34dcb6114 100644
--- a/apps/web/core/components/issues/issue-layouts/filters/applied-filters/label.tsx
+++ b/apps/web/core/components/issues/issue-layouts/filters/applied-filters/label.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 
 // icons
@@ -23,7 +29,7 @@ export const AppliedLabelsFilters = observer(function AppliedLabelsFilters(props
         if (!labelDetails) return null;
 
         return (
-          <div key={labelId} className="flex items-center gap-1 rounded bg-custom-background-80 p-1 text-xs">
+          <div key={labelId} className="flex items-center gap-1 rounded-sm bg-layer-1 p-1 text-11">
             <span
               className="h-1.5 w-1.5 rounded-full"
               style={{
@@ -34,7 +40,7 @@ export const AppliedLabelsFilters = observer(function AppliedLabelsFilters(props
             {editable && (
               <button
                 type="button"
-                className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
+                className="grid place-items-center text-tertiary hover:text-secondary"
                 onClick={() => handleRemove(labelId)}
               >
                 <CloseIcon height={10} width={10} strokeWidth={2} />
diff --git a/apps/web/core/components/issues/issue-layouts/filters/applied-filters/members.tsx b/apps/web/core/components/issues/issue-layouts/filters/applied-filters/members.tsx
index 908221a13..760be503f 100644
--- a/apps/web/core/components/issues/issue-layouts/filters/applied-filters/members.tsx
+++ b/apps/web/core/components/issues/issue-layouts/filters/applied-filters/members.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import { CloseIcon } from "@plane/propel/icons";
 // plane ui
@@ -28,7 +34,7 @@ export const AppliedMembersFilters = observer(function AppliedMembersFilters(pro
         if (!memberDetails) return null;
 
         return (
-          <div key={memberId} className="flex items-center gap-1 rounded bg-custom-background-80 p-1 text-xs">
+          <div key={memberId} className="flex items-center gap-1 rounded-sm bg-layer-1 p-1 text-11">
             <Avatar
               name={memberDetails.display_name}
               src={getFileURL(memberDetails.avatar_url)}
@@ -39,7 +45,7 @@ export const AppliedMembersFilters = observer(function AppliedMembersFilters(pro
             {editable && (
               <button
                 type="button"
-                className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
+                className="grid place-items-center text-tertiary hover:text-secondary"
                 onClick={() => handleRemove(memberId)}
               >
                 <CloseIcon height={10} width={10} strokeWidth={2} />
diff --git a/apps/web/core/components/issues/issue-layouts/filters/applied-filters/module.tsx b/apps/web/core/components/issues/issue-layouts/filters/applied-filters/module.tsx
index 2282f604b..2264ee6fd 100644
--- a/apps/web/core/components/issues/issue-layouts/filters/applied-filters/module.tsx
+++ b/apps/web/core/components/issues/issue-layouts/filters/applied-filters/module.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 // hooks
 import { CloseIcon, ModuleIcon } from "@plane/propel/icons";
@@ -23,13 +29,13 @@ export const AppliedModuleFilters = observer(function AppliedModuleFilters(props
         if (!moduleDetails) return null;
 
         return (
-          <div key={moduleId} className="flex items-center gap-1 rounded bg-custom-background-80 p-1 text-xs truncate">
+          <div key={moduleId} className="flex items-center gap-1 truncate rounded-sm bg-layer-1 p-1 text-11">
             <ModuleIcon className="h-3 w-3 flex-shrink-0" />
-            <span className="normal-case truncate">{moduleDetails.name}</span>
+            <span className="truncate normal-case">{moduleDetails.name}</span>
             {editable && (
               <button
                 type="button"
-                className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
+                className="grid place-items-center text-tertiary hover:text-secondary"
                 onClick={() => handleRemove(moduleId)}
               >
                 <CloseIcon height={10} width={10} strokeWidth={2} />
diff --git a/apps/web/core/components/issues/issue-layouts/filters/applied-filters/priority.tsx b/apps/web/core/components/issues/issue-layouts/filters/applied-filters/priority.tsx
index c983788bc..db4ae8ddf 100644
--- a/apps/web/core/components/issues/issue-layouts/filters/applied-filters/priority.tsx
+++ b/apps/web/core/components/issues/issue-layouts/filters/applied-filters/priority.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 
 // icons
@@ -17,13 +23,13 @@ export const AppliedPriorityFilters = observer(function AppliedPriorityFilters(p
   return (
     <>
       {values.map((priority) => (
-        <div key={priority} className="flex items-center gap-1 rounded bg-custom-background-80 p-1 text-xs">
+        <div key={priority} className="flex items-center gap-1 rounded-sm bg-layer-1 p-1 text-11">
           <PriorityIcon priority={priority as TIssuePriorities} className={`h-3 w-3`} />
           {priority}
           {editable && (
             <button
               type="button"
-              className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
+              className="grid place-items-center text-tertiary hover:text-secondary"
               onClick={() => handleRemove(priority)}
             >
               <CloseIcon height={10} width={10} strokeWidth={2} />
diff --git a/apps/web/core/components/issues/issue-layouts/filters/applied-filters/project.tsx b/apps/web/core/components/issues/issue-layouts/filters/applied-filters/project.tsx
index bfd0f1b97..7e7127386 100644
--- a/apps/web/core/components/issues/issue-layouts/filters/applied-filters/project.tsx
+++ b/apps/web/core/components/issues/issue-layouts/filters/applied-filters/project.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import { Logo } from "@plane/propel/emoji-icon-picker";
 import { CloseIcon } from "@plane/propel/icons";
@@ -23,15 +29,15 @@ export const AppliedProjectFilters = observer(function AppliedProjectFilters(pro
         if (!projectDetails) return null;
 
         return (
-          <div key={projectId} className="flex items-center gap-1 rounded bg-custom-background-80 p-1 text-xs">
-            <span className="grid place-items-center flex-shrink-0 h-4 w-4">
+          <div key={projectId} className="flex items-center gap-1 rounded-sm bg-layer-1 p-1 text-11">
+            <span className="grid h-4 w-4 flex-shrink-0 place-items-center">
               <Logo logo={projectDetails.logo_props} size={12} />
             </span>
             <span className="normal-case">{projectDetails.name}</span>
             {editable && (
               <button
                 type="button"
-                className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
+                className="grid place-items-center text-tertiary hover:text-secondary"
                 onClick={() => handleRemove(projectId)}
               >
                 <CloseIcon height={10} width={10} strokeWidth={2} />
diff --git a/apps/web/core/components/issues/issue-layouts/filters/applied-filters/state-group.tsx b/apps/web/core/components/issues/issue-layouts/filters/applied-filters/state-group.tsx
index 73e153270..f3ec236d9 100644
--- a/apps/web/core/components/issues/issue-layouts/filters/applied-filters/state-group.tsx
+++ b/apps/web/core/components/issues/issue-layouts/filters/applied-filters/state-group.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 
 // icons
@@ -16,12 +22,12 @@ export const AppliedStateGroupFilters = observer(function AppliedStateGroupFilte
   return (
     <>
       {values.map((stateGroup) => (
-        <div key={stateGroup} className="flex items-center gap-1 rounded bg-custom-background-80 p-1 text-xs">
+        <div key={stateGroup} className="flex items-center gap-1 rounded-sm bg-layer-1 p-1 text-11">
           <StateGroupIcon stateGroup={stateGroup as TStateGroups} size={EIconSize.SM} />
           {stateGroup}
           <button
             type="button"
-            className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
+            className="grid place-items-center text-tertiary hover:text-secondary"
             onClick={() => handleRemove(stateGroup)}
           >
             <CloseIcon height={10} width={10} strokeWidth={2} />
diff --git a/apps/web/core/components/issues/issue-layouts/filters/applied-filters/state.tsx b/apps/web/core/components/issues/issue-layouts/filters/applied-filters/state.tsx
index 1408bb7d4..47be18096 100644
--- a/apps/web/core/components/issues/issue-layouts/filters/applied-filters/state.tsx
+++ b/apps/web/core/components/issues/issue-layouts/filters/applied-filters/state.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 // icons
 // plane imports
@@ -23,7 +29,7 @@ export const AppliedStateFilters = observer(function AppliedStateFilters(props:
         if (!stateDetails) return null;
 
         return (
-          <div key={stateId} className="flex items-center gap-1 rounded bg-custom-background-80 p-1 text-xs">
+          <div key={stateId} className="flex items-center gap-1 rounded-sm bg-layer-1 p-1 text-11">
             <StateGroupIcon
               color={stateDetails.color}
               stateGroup={stateDetails.group}
@@ -34,7 +40,7 @@ export const AppliedStateFilters = observer(function AppliedStateFilters(props:
             {editable && (
               <button
                 type="button"
-                className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
+                className="grid place-items-center text-tertiary hover:text-secondary"
                 onClick={() => handleRemove(stateId)}
               >
                 <CloseIcon height={10} width={10} strokeWidth={2} />
diff --git a/apps/web/core/components/issues/issue-layouts/filters/header/display-filters/display-filters-selection.tsx b/apps/web/core/components/issues/issue-layouts/filters/header/display-filters/display-filters-selection.tsx
index 99d44aeef..40ad2d182 100644
--- a/apps/web/core/components/issues/issue-layouts/filters/header/display-filters/display-filters-selection.tsx
+++ b/apps/web/core/components/issues/issue-layouts/filters/header/display-filters/display-filters-selection.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 import { isEmpty } from "lodash-es";
 import { observer } from "mobx-react";
@@ -53,7 +59,7 @@ export const DisplayFiltersSelection = observer(function DisplayFiltersSelection
   }
 
   return (
-    <div className="vertical-scrollbar scrollbar-sm relative h-full w-full divide-y divide-custom-border-200 overflow-hidden overflow-y-auto px-2.5">
+    <div className="vertical-scrollbar relative scrollbar-sm h-full w-full divide-y divide-subtle-1 overflow-hidden overflow-y-auto px-2.5">
       {/* display properties */}
       {layoutDisplayFiltersOptions?.display_properties && layoutDisplayFiltersOptions.display_properties.length > 0 && (
         <div className="py-2">
diff --git a/apps/web/core/components/issues/issue-layouts/filters/header/display-filters/display-properties.tsx b/apps/web/core/components/issues/issue-layouts/filters/header/display-filters/display-properties.tsx
index 9025ae40b..3eeccb58b 100644
--- a/apps/web/core/components/issues/issue-layouts/filters/header/display-filters/display-properties.tsx
+++ b/apps/web/core/components/issues/issue-layouts/filters/header/display-filters/display-properties.tsx
@@ -1,14 +1,17 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 import { observer } from "mobx-react";
-import { useParams } from "next/navigation";
 // plane constants
 import { ISSUE_DISPLAY_PROPERTIES } from "@plane/constants";
 // plane i18n
 import { useTranslation } from "@plane/i18n";
 // types
 import type { IIssueDisplayProperties } from "@plane/types";
-// plane web helpers
-import { shouldRenderDisplayProperty } from "@/plane-web/helpers/issue-filter.helper";
 // components
 import { FilterHeader } from "../helpers/filter-header";
 
@@ -32,12 +35,8 @@ export const FilterDisplayProperties = observer(function FilterDisplayProperties
   } = props;
   // hooks
   const { t } = useTranslation();
-  // router
-  const { workspaceSlug, projectId: routerProjectId } = useParams();
   // states
   const [previewEnabled, setPreviewEnabled] = React.useState(true);
-  // derived values
-  const projectId = routerProjectId ? routerProjectId?.toString() : undefined;
 
   // Filter out "cycle" and "module" keys if cycleViewDisabled or moduleViewDisabled is true
   // Also filter out display properties that should not be rendered
@@ -49,7 +48,7 @@ export const FilterDisplayProperties = observer(function FilterDisplayProperties
       case "modules":
         return !moduleViewDisabled;
       default:
-        return shouldRenderDisplayProperty({ workspaceSlug: workspaceSlug?.toString(), projectId, key: property.key });
+        return true;
     }
   }).map((property) => {
     if (isEpic && property.key === "sub_issue_count") {
@@ -72,10 +71,10 @@ export const FilterDisplayProperties = observer(function FilterDisplayProperties
               <button
                 key={displayProperty.key}
                 type="button"
-                className={`rounded border px-2 py-0.5 text-xs transition-all ${
+                className={`rounded-sm border px-2 py-0.5 text-11 transition-all ${
                   displayProperties?.[displayProperty.key]
-                    ? "border-custom-primary-100 bg-custom-primary-100 text-white"
-                    : "border-custom-border-200 hover:bg-custom-background-80"
+                    ? "border-accent-strong bg-accent-primary text-on-color"
+                    : "border-subtle hover:bg-layer-1"
                 }`}
                 onClick={() =>
                   handleUpdate({
diff --git a/apps/web/core/components/issues/issue-layouts/filters/header/display-filters/extra-options.tsx b/apps/web/core/components/issues/issue-layouts/filters/header/display-filters/extra-options.tsx
index 5ff566c86..7daaec7ae 100644
--- a/apps/web/core/components/issues/issue-layouts/filters/header/display-filters/extra-options.tsx
+++ b/apps/web/core/components/issues/issue-layouts/filters/header/display-filters/extra-options.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 import { observer } from "mobx-react";
 import { useTranslation } from "@plane/i18n";
diff --git a/apps/web/core/components/issues/issue-layouts/filters/header/display-filters/group-by.tsx b/apps/web/core/components/issues/issue-layouts/filters/header/display-filters/group-by.tsx
index 4e6077238..a15d80c0e 100644
--- a/apps/web/core/components/issues/issue-layouts/filters/header/display-filters/group-by.tsx
+++ b/apps/web/core/components/issues/issue-layouts/filters/header/display-filters/group-by.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React, { useState } from "react";
 import { observer } from "mobx-react";
 import { useTranslation } from "@plane/i18n";
diff --git a/apps/web/core/components/issues/issue-layouts/filters/header/display-filters/index.ts b/apps/web/core/components/issues/issue-layouts/filters/header/display-filters/index.ts
index 07b50f85e..7f9e7350c 100644
--- a/apps/web/core/components/issues/issue-layouts/filters/header/display-filters/index.ts
+++ b/apps/web/core/components/issues/issue-layouts/filters/header/display-filters/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./display-filters-selection";
 export * from "./display-properties";
 export * from "./extra-options";
diff --git a/apps/web/core/components/issues/issue-layouts/filters/header/display-filters/order-by.tsx b/apps/web/core/components/issues/issue-layouts/filters/header/display-filters/order-by.tsx
index 98eab6633..8905f8556 100644
--- a/apps/web/core/components/issues/issue-layouts/filters/header/display-filters/order-by.tsx
+++ b/apps/web/core/components/issues/issue-layouts/filters/header/display-filters/order-by.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React, { useState } from "react";
 import { observer } from "mobx-react";
 import { ISSUE_ORDER_BY_OPTIONS } from "@plane/constants";
diff --git a/apps/web/core/components/issues/issue-layouts/filters/header/display-filters/sub-group-by.tsx b/apps/web/core/components/issues/issue-layouts/filters/header/display-filters/sub-group-by.tsx
index 0ce1eebf9..c367b6f62 100644
--- a/apps/web/core/components/issues/issue-layouts/filters/header/display-filters/sub-group-by.tsx
+++ b/apps/web/core/components/issues/issue-layouts/filters/header/display-filters/sub-group-by.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React, { useState } from "react";
 import { observer } from "mobx-react";
 import { ISSUE_GROUP_BY_OPTIONS } from "@plane/constants";
diff --git a/apps/web/core/components/issues/issue-layouts/filters/header/filters/assignee.tsx b/apps/web/core/components/issues/issue-layouts/filters/header/filters/assignee.tsx
index 392afa98a..e75eb406b 100644
--- a/apps/web/core/components/issues/issue-layouts/filters/header/filters/assignee.tsx
+++ b/apps/web/core/components/issues/issue-layouts/filters/header/filters/assignee.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useMemo, useState } from "react";
 import { sortBy } from "lodash-es";
 import { observer } from "mobx-react";
@@ -85,7 +91,7 @@ export const FilterAssignees = observer(function FilterAssignees(props: Props) {
                 {sortedOptions.length > 5 && (
                   <button
                     type="button"
-                    className="ml-8 text-xs font-medium text-custom-primary-100"
+                    className="ml-8 text-11 font-medium text-accent-primary"
                     onClick={handleViewToggle}
                   >
                     {itemsToRender === sortedOptions.length ? "View less" : "View all"}
@@ -93,7 +99,7 @@ export const FilterAssignees = observer(function FilterAssignees(props: Props) {
                 )}
               </>
             ) : (
-              <p className="text-xs italic text-custom-text-400">No matches found</p>
+              <p className="text-11 text-placeholder italic">No matches found</p>
             )
           ) : (
             <Loader className="space-y-2">
diff --git a/apps/web/core/components/issues/issue-layouts/filters/header/filters/created-by.tsx b/apps/web/core/components/issues/issue-layouts/filters/header/filters/created-by.tsx
index e9a96643f..e78662422 100644
--- a/apps/web/core/components/issues/issue-layouts/filters/header/filters/created-by.tsx
+++ b/apps/web/core/components/issues/issue-layouts/filters/header/filters/created-by.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useMemo, useState } from "react";
 import { sortBy } from "lodash-es";
 import { observer } from "mobx-react";
@@ -78,7 +84,7 @@ export const FilterCreatedBy = observer(function FilterCreatedBy(props: Props) {
                 {sortedOptions.length > 5 && (
                   <button
                     type="button"
-                    className="ml-8 text-xs font-medium text-custom-primary-100"
+                    className="ml-8 text-11 font-medium text-accent-primary"
                     onClick={handleViewToggle}
                   >
                     {itemsToRender === sortedOptions.length ? "View less" : "View all"}
@@ -86,7 +92,7 @@ export const FilterCreatedBy = observer(function FilterCreatedBy(props: Props) {
                 )}
               </>
             ) : (
-              <p className="text-xs italic text-custom-text-400">No matches found</p>
+              <p className="text-11 text-placeholder italic">No matches found</p>
             )
           ) : (
             <Loader className="space-y-2">
diff --git a/apps/web/core/components/issues/issue-layouts/filters/header/filters/cycle.tsx b/apps/web/core/components/issues/issue-layouts/filters/header/filters/cycle.tsx
index 97e4b161d..1368fee3f 100644
--- a/apps/web/core/components/issues/issue-layouts/filters/header/filters/cycle.tsx
+++ b/apps/web/core/components/issues/issue-layouts/filters/header/filters/cycle.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React, { useMemo, useState } from "react";
 import { sortBy } from "lodash-es";
 import { observer } from "mobx-react";
@@ -81,7 +87,7 @@ export const FilterCycle = observer(function FilterCycle(props: Props) {
                 {sortedOptions.length > 5 && (
                   <button
                     type="button"
-                    className="ml-8 text-xs font-medium text-custom-primary-100"
+                    className="ml-8 text-11 font-medium text-accent-primary"
                     onClick={handleViewToggle}
                   >
                     {itemsToRender === sortedOptions.length ? "View less" : "View all"}
@@ -89,7 +95,7 @@ export const FilterCycle = observer(function FilterCycle(props: Props) {
                 )}
               </>
             ) : (
-              <p className="text-xs italic text-custom-text-400">No matches found</p>
+              <p className="text-11 text-placeholder italic">No matches found</p>
             )
           ) : (
             <Loader className="space-y-2">
diff --git a/apps/web/core/components/issues/issue-layouts/filters/header/filters/due-date.tsx b/apps/web/core/components/issues/issue-layouts/filters/header/filters/due-date.tsx
index 732a10e1e..1079c559f 100644
--- a/apps/web/core/components/issues/issue-layouts/filters/header/filters/due-date.tsx
+++ b/apps/web/core/components/issues/issue-layouts/filters/header/filters/due-date.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React, { useState } from "react";
 import { observer } from "mobx-react";
 // constants
@@ -66,7 +72,7 @@ export const FilterDueDate = observer(function FilterDueDate(props: Props) {
               <FilterOption isChecked={isCustomDateSelected()} onClick={handleCustomDate} title="Custom" multiple />
             </>
           ) : (
-            <p className="text-xs italic text-custom-text-400">No matches found</p>
+            <p className="text-11 text-placeholder italic">No matches found</p>
           )}
         </div>
       )}
diff --git a/apps/web/core/components/issues/issue-layouts/filters/header/filters/index.ts b/apps/web/core/components/issues/issue-layouts/filters/header/filters/index.ts
index 65bca8ba8..24a244424 100644
--- a/apps/web/core/components/issues/issue-layouts/filters/header/filters/index.ts
+++ b/apps/web/core/components/issues/issue-layouts/filters/header/filters/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./assignee";
 export * from "./mentions";
 export * from "./created-by";
diff --git a/apps/web/core/components/issues/issue-layouts/filters/header/filters/labels.tsx b/apps/web/core/components/issues/issue-layouts/filters/header/filters/labels.tsx
index a1b075677..f68b7755c 100644
--- a/apps/web/core/components/issues/issue-layouts/filters/header/filters/labels.tsx
+++ b/apps/web/core/components/issues/issue-layouts/filters/header/filters/labels.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React, { useMemo, useState } from "react";
 import { sortBy } from "lodash-es";
 import { observer } from "mobx-react";
@@ -71,7 +77,7 @@ export const FilterLabels = observer(function FilterLabels(props: Props) {
                 {sortedOptions.length > 5 && (
                   <button
                     type="button"
-                    className="ml-8 text-xs font-medium text-custom-primary-100"
+                    className="ml-8 text-11 font-medium text-accent-primary"
                     onClick={handleViewToggle}
                   >
                     {itemsToRender === sortedOptions.length ? "View less" : "View all"}
@@ -79,7 +85,7 @@ export const FilterLabels = observer(function FilterLabels(props: Props) {
                 )}
               </>
             ) : (
-              <p className="text-xs italic text-custom-text-400">No matches found</p>
+              <p className="text-11 text-placeholder italic">No matches found</p>
             )
           ) : (
             <Loader className="space-y-2">
diff --git a/apps/web/core/components/issues/issue-layouts/filters/header/filters/mentions.tsx b/apps/web/core/components/issues/issue-layouts/filters/header/filters/mentions.tsx
index b049b6dd3..6aa1d881e 100644
--- a/apps/web/core/components/issues/issue-layouts/filters/header/filters/mentions.tsx
+++ b/apps/web/core/components/issues/issue-layouts/filters/header/filters/mentions.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useMemo, useState } from "react";
 import { sortBy } from "lodash-es";
 import { observer } from "mobx-react";
@@ -85,7 +91,7 @@ export const FilterMentions = observer(function FilterMentions(props: Props) {
                 {sortedOptions.length > 5 && (
                   <button
                     type="button"
-                    className="ml-8 text-xs font-medium text-custom-primary-100"
+                    className="ml-8 text-11 font-medium text-accent-primary"
                     onClick={handleViewToggle}
                   >
                     {itemsToRender === sortedOptions.length ? "View less" : "View all"}
@@ -93,7 +99,7 @@ export const FilterMentions = observer(function FilterMentions(props: Props) {
                 )}
               </>
             ) : (
-              <p className="text-xs italic text-custom-text-400">No matches found</p>
+              <p className="text-11 text-placeholder italic">No matches found</p>
             )
           ) : (
             <Loader className="space-y-2">
diff --git a/apps/web/core/components/issues/issue-layouts/filters/header/filters/module.tsx b/apps/web/core/components/issues/issue-layouts/filters/header/filters/module.tsx
index 49d570b8d..695dab108 100644
--- a/apps/web/core/components/issues/issue-layouts/filters/header/filters/module.tsx
+++ b/apps/web/core/components/issues/issue-layouts/filters/header/filters/module.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React, { useMemo, useState } from "react";
 import { sortBy } from "lodash-es";
 import { observer } from "mobx-react";
@@ -71,7 +77,7 @@ export const FilterModule = observer(function FilterModule(props: Props) {
                 {sortedOptions.length > 5 && (
                   <button
                     type="button"
-                    className="ml-8 text-xs font-medium text-custom-primary-100"
+                    className="ml-8 text-11 font-medium text-accent-primary"
                     onClick={handleViewToggle}
                   >
                     {itemsToRender === sortedOptions.length ? "View less" : "View all"}
@@ -79,7 +85,7 @@ export const FilterModule = observer(function FilterModule(props: Props) {
                 )}
               </>
             ) : (
-              <p className="text-xs italic text-custom-text-400">No matches found</p>
+              <p className="text-11 text-placeholder italic">No matches found</p>
             )
           ) : (
             <Loader className="space-y-2">
diff --git a/apps/web/core/components/issues/issue-layouts/filters/header/filters/priority.tsx b/apps/web/core/components/issues/issue-layouts/filters/header/filters/priority.tsx
index 090e8df9d..e3325d580 100644
--- a/apps/web/core/components/issues/issue-layouts/filters/header/filters/priority.tsx
+++ b/apps/web/core/components/issues/issue-layouts/filters/header/filters/priority.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React, { useState } from "react";
 import { observer } from "mobx-react";
 // plane constants
@@ -43,7 +49,7 @@ export const FilterPriority = observer(function FilterPriority(props: Props) {
               />
             ))
           ) : (
-            <p className="text-xs italic text-custom-text-400">{t("common.search.no_matches_found")}</p>
+            <p className="text-11 text-placeholder italic">{t("common.search.no_matches_found")}</p>
           )}
         </div>
       )}
diff --git a/apps/web/core/components/issues/issue-layouts/filters/header/filters/project.tsx b/apps/web/core/components/issues/issue-layouts/filters/header/filters/project.tsx
index 635881ee1..843ac016e 100644
--- a/apps/web/core/components/issues/issue-layouts/filters/header/filters/project.tsx
+++ b/apps/web/core/components/issues/issue-layouts/filters/header/filters/project.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React, { useMemo, useState } from "react";
 import { sortBy } from "lodash-es";
 import { observer } from "mobx-react";
@@ -62,7 +68,7 @@ export const FilterProjects = observer(function FilterProjects(props: Props) {
                     isChecked={appliedFilters?.includes(project.id) ? true : false}
                     onClick={() => handleUpdate(project.id)}
                     icon={
-                      <span className="grid place-items-center flex-shrink-0 h-4 w-4">
+                      <span className="grid h-4 w-4 flex-shrink-0 place-items-center">
                         <Logo logo={project.logo_props} size={12} />
                       </span>
                     }
@@ -72,7 +78,7 @@ export const FilterProjects = observer(function FilterProjects(props: Props) {
                 {sortedOptions.length > 5 && (
                   <button
                     type="button"
-                    className="ml-8 text-xs font-medium text-custom-primary-100"
+                    className="ml-8 text-11 font-medium text-accent-primary"
                     onClick={handleViewToggle}
                   >
                     {itemsToRender === sortedOptions.length ? "View less" : "View all"}
@@ -80,7 +86,7 @@ export const FilterProjects = observer(function FilterProjects(props: Props) {
                 )}
               </>
             ) : (
-              <p className="text-xs italic text-custom-text-400">No matches found</p>
+              <p className="text-11 text-placeholder italic">No matches found</p>
             )
           ) : (
             <Loader className="space-y-2">
diff --git a/apps/web/core/components/issues/issue-layouts/filters/header/filters/start-date.tsx b/apps/web/core/components/issues/issue-layouts/filters/header/filters/start-date.tsx
index f9097db4c..4adbe7fec 100644
--- a/apps/web/core/components/issues/issue-layouts/filters/header/filters/start-date.tsx
+++ b/apps/web/core/components/issues/issue-layouts/filters/header/filters/start-date.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React, { useState } from "react";
 import { observer } from "mobx-react";
 // constants
@@ -65,7 +71,7 @@ export const FilterStartDate = observer(function FilterStartDate(props: Props) {
               <FilterOption isChecked={isCustomDateSelected()} onClick={handleCustomDate} title="Custom" multiple />
             </>
           ) : (
-            <p className="text-xs italic text-custom-text-400">No matches found</p>
+            <p className="text-11 text-placeholder italic">No matches found</p>
           )}
         </div>
       )}
diff --git a/apps/web/core/components/issues/issue-layouts/filters/header/filters/state-group.tsx b/apps/web/core/components/issues/issue-layouts/filters/header/filters/state-group.tsx
index db077f489..99e8c1daf 100644
--- a/apps/web/core/components/issues/issue-layouts/filters/header/filters/state-group.tsx
+++ b/apps/web/core/components/issues/issue-layouts/filters/header/filters/state-group.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React, { useState } from "react";
 import { observer } from "mobx-react";
 // plane imports
@@ -52,7 +58,7 @@ export const FilterStateGroup = observer(function FilterStateGroup(props: Props)
               {filteredOptions.length > 5 && (
                 <button
                   type="button"
-                  className="ml-8 text-xs font-medium text-custom-primary-100"
+                  className="ml-8 text-11 font-medium text-accent-primary"
                   onClick={handleViewToggle}
                 >
                   {itemsToRender === filteredOptions.length ? "View less" : "View all"}
@@ -60,7 +66,7 @@ export const FilterStateGroup = observer(function FilterStateGroup(props: Props)
               )}
             </>
           ) : (
-            <p className="text-xs italic text-custom-text-400">No matches found</p>
+            <p className="text-11 text-placeholder italic">No matches found</p>
           )}
         </div>
       )}
diff --git a/apps/web/core/components/issues/issue-layouts/filters/header/filters/state.tsx b/apps/web/core/components/issues/issue-layouts/filters/header/filters/state.tsx
index 43624eefe..825a15a18 100644
--- a/apps/web/core/components/issues/issue-layouts/filters/header/filters/state.tsx
+++ b/apps/web/core/components/issues/issue-layouts/filters/header/filters/state.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React, { useMemo, useState } from "react";
 import { sortBy } from "lodash-es";
 import { observer } from "mobx-react";
@@ -70,7 +76,7 @@ export const FilterState = observer(function FilterState(props: Props) {
                 {sortedOptions.length > 5 && (
                   <button
                     type="button"
-                    className="ml-8 text-xs font-medium text-custom-primary-100"
+                    className="ml-8 text-11 font-medium text-accent-primary"
                     onClick={handleViewToggle}
                   >
                     {itemsToRender === sortedOptions.length ? "View less" : "View all"}
@@ -78,7 +84,7 @@ export const FilterState = observer(function FilterState(props: Props) {
                 )}
               </>
             ) : (
-              <p className="text-xs italic text-custom-text-400">No matches found</p>
+              <p className="text-11 text-placeholder italic">No matches found</p>
             )
           ) : (
             <Loader className="space-y-2">
diff --git a/apps/web/core/components/issues/issue-layouts/filters/header/helpers/dropdown.tsx b/apps/web/core/components/issues/issue-layouts/filters/header/helpers/dropdown.tsx
index c856784ea..fdf49f374 100644
--- a/apps/web/core/components/issues/issue-layouts/filters/header/helpers/dropdown.tsx
+++ b/apps/web/core/components/issues/issue-layouts/filters/header/helpers/dropdown.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React, { Fragment, useState } from "react";
 import type { Placement } from "@popperjs/core";
 import { usePopper } from "react-popper";
@@ -5,11 +11,10 @@ import { usePopper } from "react-popper";
 import { Popover, Transition } from "@headlessui/react";
 // ui
 import { Button } from "@plane/propel/button";
-import { ChevronUpIcon } from "@plane/propel/icons";
 
 type Props = {
   children: React.ReactNode;
-  icon?: React.ReactNode;
+  icon?: React.ReactElement;
   miniIcon?: React.ReactNode;
   title?: string;
   placement?: Placement;
@@ -41,86 +46,73 @@ export function FiltersDropdown(props: Props) {
 
   return (
     <Popover as="div">
-      {({ open }) => {
-        if (open) {
-        }
-        return (
-          <>
-            <Popover.Button as={React.Fragment}>
-              {menuButton ? (
-                <button role="button" ref={setReferenceElement}>
-                  {menuButton}
-                </button>
-              ) : (
-                <div ref={setReferenceElement}>
-                  <div className="hidden @4xl:flex">
-                    <Button
-                      disabled={disabled}
-                      variant="neutral-primary"
-                      size="sm"
-                      prependIcon={icon}
-                      appendIcon={
-                        <ChevronUpIcon
-                          className={`transition-all ${open ? "" : "rotate-180"}`}
-                          height={14}
-                          width={14}
-                          strokeWidth={2}
-                        />
-                      }
-                      tabIndex={tabIndex}
-                      className="relative"
-                    >
-                      <>
-                        <div className={`${open ? "text-custom-text-100" : "text-custom-text-200"}`}>
-                          <span>{title}</span>
-                        </div>
-                        {isFiltersApplied && (
-                          <span className="absolute h-2 w-2 -right-0.5 -top-0.5 bg-custom-primary-100 rounded-full" />
-                        )}
-                      </>
-                    </Button>
-                  </div>
-                  <div className="flex @4xl:hidden">
-                    <Button
-                      disabled={disabled}
-                      ref={setReferenceElement}
-                      variant="neutral-primary"
-                      size="sm"
-                      tabIndex={tabIndex}
-                      className="relative px-2"
-                    >
-                      {miniIcon || title}
-                    </Button>
-                  </div>
+      {({ open }) => (
+        <>
+          <Popover.Button as={React.Fragment}>
+            {menuButton ? (
+              <button type="button" ref={setReferenceElement}>
+                {menuButton}
+              </button>
+            ) : (
+              <div ref={setReferenceElement}>
+                <div className="hidden @4xl:flex">
+                  <Button
+                    disabled={disabled}
+                    variant="secondary"
+                    prependIcon={icon}
+                    tabIndex={tabIndex}
+                    className="relative"
+                    size="lg"
+                  >
+                    <>
+                      <div className={`${open ? "text-primary" : "text-secondary"}`}>
+                        <span>{title}</span>
+                      </div>
+                      {isFiltersApplied && (
+                        <span className="absolute -top-0.5 -right-0.5 h-2 w-2 rounded-full bg-accent-primary" />
+                      )}
+                    </>
+                  </Button>
                 </div>
-              )}
-            </Popover.Button>
-            <Transition
-              as={Fragment}
-              enter="transition ease-out duration-200"
-              enterFrom="opacity-0 translate-y-1"
-              enterTo="opacity-100 translate-y-0"
-              leave="transition ease-in duration-150"
-              leaveFrom="opacity-100 translate-y-0"
-              leaveTo="opacity-0 translate-y-1"
-            >
-              {/** translate-y-0 is a hack to create new stacking context. Required for safari  */}
-              <Popover.Panel className="fixed z-10 translate-y-0">
-                <div
-                  className="overflow-hidden rounded border border-custom-border-200 bg-custom-background-100 shadow-custom-shadow-rg my-1"
-                  ref={setPopperElement}
-                  style={styles.popper}
-                  {...attributes.popper}
-                >
-                  <div className="flex max-h-[30rem] lg:max-h-[37.5rem] w-[18.75rem] flex-col overflow-hidden">
-                    {children}
-                  </div>
+                <div className="flex @4xl:hidden">
+                  <Button
+                    disabled={disabled}
+                    ref={setReferenceElement}
+                    variant="secondary"
+                    tabIndex={tabIndex}
+                    size="lg"
+                  >
+                    {miniIcon || title}
+                  </Button>
                 </div>
-              </Popover.Panel>
-            </Transition>
-          </>
-        );
-      }}
+              </div>
+            )}
+          </Popover.Button>
+          <Transition
+            as={Fragment}
+            enter="transition ease-out duration-200"
+            enterFrom="opacity-0 translate-y-1"
+            enterTo="opacity-100 translate-y-0"
+            leave="transition ease-in duration-150"
+            leaveFrom="opacity-100 translate-y-0"
+            leaveTo="opacity-0 translate-y-1"
+          >
+            {/** translate-y-0 is a hack to create new stacking context. Required for safari  */}
+            <Popover.Panel className="fixed z-10 translate-y-0">
+              <div
+                className="my-1 overflow-hidden rounded-sm border border-subtle bg-surface-1 shadow-raised-100"
+                ref={setPopperElement}
+                style={styles.popper}
+                {...attributes.popper}
+              >
+                <div className="flex max-h-[30rem] w-[18.75rem] flex-col overflow-hidden lg:max-h-[37.5rem]">
+                  {children}
+                </div>
+              </div>
+            </Popover.Panel>
+          </Transition>
+        </>
+      )}
     </Popover>
   );
 }
diff --git a/apps/web/core/components/issues/issue-layouts/filters/header/helpers/filter-header.tsx b/apps/web/core/components/issues/issue-layouts/filters/header/helpers/filter-header.tsx
index 718a64c99..e6e2b80af 100644
--- a/apps/web/core/components/issues/issue-layouts/filters/header/helpers/filter-header.tsx
+++ b/apps/web/core/components/issues/issue-layouts/filters/header/helpers/filter-header.tsx
@@ -1,20 +1,25 @@
-import React from "react";
-import { ChevronDownIcon, ChevronUpIcon } from "@plane/propel/icons";
-// lucide icons
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
 
-interface IFilterHeader {
+// plane imports
+import { ChevronDownIcon, ChevronUpIcon } from "@plane/propel/icons";
+
+type Props = {
   title: string;
   isPreviewEnabled: boolean;
   handleIsPreviewEnabled: () => void;
-}
+};
 
-export function FilterHeader({ title, isPreviewEnabled, handleIsPreviewEnabled }: IFilterHeader) {
+export function FilterHeader({ title, isPreviewEnabled, handleIsPreviewEnabled }: Props) {
   return (
-    <div className="sticky top-0 flex items-center justify-between gap-2 bg-custom-background-100">
-      <div className="flex-grow truncate text-xs font-medium text-custom-text-400">{title}</div>
+    <div className="sticky top-0 flex items-center justify-between gap-2 bg-surface-1">
+      <div className="flex-grow truncate text-caption-sm-medium text-placeholder">{title}</div>
       <button
         type="button"
-        className="grid h-5 w-5 flex-shrink-0 place-items-center rounded hover:bg-custom-background-80"
+        className="grid h-5 w-5 flex-shrink-0 place-items-center rounded-sm hover:bg-layer-transparent-hover"
         onClick={handleIsPreviewEnabled}
       >
         {isPreviewEnabled ? <ChevronUpIcon height={14} width={14} /> : <ChevronDownIcon height={14} width={14} />}
diff --git a/apps/web/core/components/issues/issue-layouts/filters/header/helpers/filter-option.tsx b/apps/web/core/components/issues/issue-layouts/filters/header/helpers/filter-option.tsx
index f05e80faa..af27943ed 100644
--- a/apps/web/core/components/issues/issue-layouts/filters/header/helpers/filter-option.tsx
+++ b/apps/web/core/components/issues/issue-layouts/filters/header/helpers/filter-option.tsx
@@ -1,6 +1,10 @@
-import React from "react";
-// lucide icons
-import { Check } from "lucide-react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { CheckIcon } from "@plane/propel/icons";
 
 type Props = {
   icon?: React.ReactNode;
@@ -17,22 +21,22 @@ export function FilterOption(props: Props) {
   return (
     <button
       type="button"
-      className="flex w-full items-center gap-2 rounded p-1.5 hover:bg-custom-background-80"
+      className="flex w-full items-center gap-2 rounded-sm p-1.5 hover:bg-layer-transparent-hover"
       onClick={onClick}
     >
       <div
-        className={`grid h-3 w-3 flex-shrink-0 place-items-center border bg-custom-background-90 ${
-          isChecked ? "border-custom-primary-100 bg-custom-primary-100 text-white" : "border-custom-border-300"
-        } ${multiple ? "rounded-sm" : "rounded-full"}`}
+        className={`grid h-3 w-3 flex-shrink-0 place-items-center border ${
+          isChecked ? "border-accent-strong bg-accent-primary text-on-color" : "border-strong"
+        } ${multiple ? "rounded-xs" : "rounded-full"}`}
       >
-        {isChecked && <Check size={10} strokeWidth={3} />}
+        {isChecked && <CheckIcon width={10} height={10} strokeWidth={3} />}
       </div>
       <div className="flex items-center gap-2 truncate">
         {icon && <div className="grid w-5 flex-shrink-0 place-items-center">{icon}</div>}
-        <div className="flex-grow truncate text-xs text-custom-text-200">{title}</div>
+        <div className="flex-grow truncate text-caption-sm-regular text-secondary">{title}</div>
       </div>
       {activePulse && (
-        <div className="flex-shrink-0 text-xs w-2 h-2 rounded-full bg-custom-primary-100 animate-pulse ml-auto" />
+        <div className="ml-auto h-2 w-2 flex-shrink-0 animate-pulse rounded-full bg-accent-primary text-caption-sm-regular" />
       )}
     </button>
   );
diff --git a/apps/web/core/components/issues/issue-layouts/filters/header/helpers/index.ts b/apps/web/core/components/issues/issue-layouts/filters/header/helpers/index.ts
index ef38d9884..a817cc1c7 100644
--- a/apps/web/core/components/issues/issue-layouts/filters/header/helpers/index.ts
+++ b/apps/web/core/components/issues/issue-layouts/filters/header/helpers/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./dropdown";
 export * from "./filter-header";
 export * from "./filter-option";
diff --git a/apps/web/core/components/issues/issue-layouts/filters/header/index.ts b/apps/web/core/components/issues/issue-layouts/filters/header/index.ts
index 9a0c40d64..ae7cf17c1 100644
--- a/apps/web/core/components/issues/issue-layouts/filters/header/index.ts
+++ b/apps/web/core/components/issues/issue-layouts/filters/header/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./display-filters";
 export * from "./filters";
 export * from "./helpers";
diff --git a/apps/web/core/components/issues/issue-layouts/filters/header/layout-selection.tsx b/apps/web/core/components/issues/issue-layouts/filters/header/layout-selection.tsx
index 5536d7dd4..6b8f857b1 100644
--- a/apps/web/core/components/issues/issue-layouts/filters/header/layout-selection.tsx
+++ b/apps/web/core/components/issues/issue-layouts/filters/header/layout-selection.tsx
@@ -1,14 +1,19 @@
-import React from "react";
-// plane constants
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// plane imports
 import { ISSUE_LAYOUTS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { Tooltip } from "@plane/propel/tooltip";
 import type { EIssueLayoutTypes } from "@plane/types";
-// ui
-// types
+import { cn } from "@plane/utils";
+// components
 import { IssueLayoutIcon } from "@/components/issues/issue-layouts/layout-icon";
-import { usePlatformOS } from "@/hooks/use-platform-os";
 // hooks
+import { usePlatformOS } from "@/hooks/use-platform-os";
 
 type Props = {
   layouts: EIssueLayoutTypes[];
@@ -27,23 +32,24 @@ export function LayoutSelection(props: Props) {
   };
 
   return (
-    <div className="flex items-center gap-1 rounded bg-custom-background-80 p-1">
+    <div className="flex items-center gap-1 rounded-md bg-layer-3 p-1">
       {ISSUE_LAYOUTS.filter((l) => layouts.includes(l.key)).map((layout) => (
         <Tooltip key={layout.key} tooltipContent={t(layout.i18n_title)} isMobile={isMobile}>
           <button
             type="button"
-            className={`group grid h-[22px] w-7 place-items-center overflow-hidden rounded transition-all hover:bg-custom-background-100 ${
-              selectedLayout == layout.key ? "bg-custom-background-100 shadow-custom-shadow-2xs" : ""
-            }`}
+            className={cn(
+              "group grid h-5.5 w-7 place-items-center overflow-hidden rounded-sm transition-all hover:bg-layer-transparent-hover",
+              {
+                "bg-layer-transparent-active hover:bg-layer-transparent-active": selectedLayout === layout.key,
+              }
+            )}
             onClick={() => handleOnChange(layout.key)}
           >
             <IssueLayoutIcon
               layout={layout.key}
               size={14}
               strokeWidth={2}
-              className={`h-3.5 w-3.5 ${
-                selectedLayout == layout.key ? "text-custom-text-100" : "text-custom-text-200"
-              }`}
+              className={`size-3.5 ${selectedLayout == layout.key ? "text-primary" : "text-secondary"}`}
             />
           </button>
         </Tooltip>
diff --git a/apps/web/core/components/issues/issue-layouts/filters/header/mobile-layout-selection.tsx b/apps/web/core/components/issues/issue-layouts/filters/header/mobile-layout-selection.tsx
index 29b830460..14f749094 100644
--- a/apps/web/core/components/issues/issue-layouts/filters/header/mobile-layout-selection.tsx
+++ b/apps/web/core/components/issues/issue-layouts/filters/header/mobile-layout-selection.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { ISSUE_LAYOUTS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { Button } from "@plane/propel/button";
@@ -20,17 +26,17 @@ export function MobileLayoutSelection({
   return (
     <CustomMenu
       maxHeight={"md"}
-      className="flex flex-grow justify-center text-sm text-custom-text-200"
+      className="flex flex-grow justify-center text-13 text-secondary"
       placement="bottom-start"
       customButton={
-        <Button variant="neutral-primary" size="sm" className="relative px-2">
+        <Button variant="secondary" className="relative px-2">
           {activeLayout && (
             <IssueLayoutIcon layout={activeLayout} size={14} strokeWidth={2} className={`h-3.5 w-3.5`} />
           )}
-          <ChevronDownIcon className="size-3 text-custom-text-200 my-auto" strokeWidth={2} />
+          <ChevronDownIcon className="my-auto size-3 text-secondary" strokeWidth={2} />
         </Button>
       }
-      customButtonClassName="flex flex-grow justify-center text-custom-text-200 text-sm"
+      customButtonClassName="flex flex-grow justify-center text-secondary text-13"
       closeOnSelect
     >
       {ISSUE_LAYOUTS.filter((l) => layouts.includes(l.key)).map((layout, index) => (
@@ -42,7 +48,7 @@ export function MobileLayoutSelection({
           className="flex items-center gap-2"
         >
           <IssueLayoutIcon layout={layout.key} className="h-3 w-3" />
-          <div className="text-custom-text-300">{t(layout.i18n_label)}</div>
+          <div className="text-tertiary">{t(layout.i18n_label)}</div>
         </CustomMenu.MenuItem>
       ))}
     </CustomMenu>
diff --git a/apps/web/core/components/issues/issue-layouts/filters/index.ts b/apps/web/core/components/issues/issue-layouts/filters/index.ts
index 427d96943..2196c7bb2 100644
--- a/apps/web/core/components/issues/issue-layouts/filters/index.ts
+++ b/apps/web/core/components/issues/issue-layouts/filters/index.ts
@@ -1,2 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./header";
 export * from "./applied-filters";
diff --git a/apps/web/core/components/issues/issue-layouts/gantt/base-gantt-root.tsx b/apps/web/core/components/issues/issue-layouts/gantt/base-gantt-root.tsx
index 5d45e4286..3404b438c 100644
--- a/apps/web/core/components/issues/issue-layouts/gantt/base-gantt-root.tsx
+++ b/apps/web/core/components/issues/issue-layouts/gantt/base-gantt-root.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React, { useCallback, useEffect } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
diff --git a/apps/web/core/components/issues/issue-layouts/gantt/blocks.tsx b/apps/web/core/components/issues/issue-layouts/gantt/blocks.tsx
index d58f5b99e..a9927f9dc 100644
--- a/apps/web/core/components/issues/issue-layouts/gantt/blocks.tsx
+++ b/apps/web/core/components/issues/issue-layouts/gantt/blocks.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // plane imports
@@ -60,13 +66,13 @@ export const IssueGanttBlock = observer(function IssueGanttBlock(props: Props) {
         render={
           <div
             id={`issue-${issueId}`}
-            className="relative flex h-full w-full cursor-pointer items-center rounded space-between"
+            className="space-between relative flex h-full w-full cursor-pointer items-center rounded-sm"
             style={blockStyle}
             onClick={handleIssuePeekOverview}
           >
-            <div className="absolute left-0 top-0 h-full w-full bg-custom-background-100/50 " />
+            <div className="absolute top-0 left-0 h-full w-full bg-surface-1/50" />
             <div
-              className="sticky w-auto overflow-hidden truncate px-2.5 py-1 text-sm text-custom-text-100 flex-1"
+              className="sticky w-auto flex-1 truncate overflow-hidden px-2.5 py-1 text-13 text-primary"
               style={{ left: `${SIDEBAR_WIDTH}px` }}
             >
               {issueDetails?.name}
@@ -74,7 +80,7 @@ export const IssueGanttBlock = observer(function IssueGanttBlock(props: Props) {
             {isEpic && (
               <IssueStats
                 issueId={issueId}
-                className="sticky mx-2 font-medium text-custom-text-100 overflow-hidden truncate w-auto justify-end flex-shrink-0"
+                className="sticky mx-2 w-auto flex-shrink-0 justify-end truncate overflow-hidden font-medium text-primary"
                 showProgressText={duration >= 2}
               />
             )}
@@ -140,7 +146,7 @@ export const IssueGanttSidebarBlock = observer(function IssueGanttSidebarBlock(p
       id={`issue-${issueId}`}
       href={workItemLink}
       onClick={handleIssuePeekOverview}
-      className="line-clamp-1 w-full cursor-pointer text-sm text-custom-text-100"
+      className="line-clamp-1 w-full cursor-pointer text-13 text-primary"
       disabled={!!issueDetails?.tempId}
     >
       <div className="relative flex h-full w-full cursor-pointer items-center gap-2">
@@ -148,12 +154,13 @@ export const IssueGanttSidebarBlock = observer(function IssueGanttSidebarBlock(p
           <IssueIdentifier
             issueId={issueDetails.id}
             projectId={issueDetails.project_id}
-            textContainerClassName="text-xs text-custom-text-300"
+            size="xs"
+            variant="tertiary"
             displayProperties={issuesFilter?.issueFilters?.displayProperties}
           />
         )}
         <Tooltip tooltipContent={issueDetails?.name} isMobile={isMobile}>
-          <span className="flex-grow truncate text-sm font-medium">{issueDetails?.name}</span>
+          <span className="flex-grow truncate text-13 font-medium">{issueDetails?.name}</span>
         </Tooltip>
       </div>
     </ControlLink>
diff --git a/apps/web/core/components/issues/issue-layouts/gantt/index.ts b/apps/web/core/components/issues/issue-layouts/gantt/index.ts
index 6728bd659..53d7de821 100644
--- a/apps/web/core/components/issues/issue-layouts/gantt/index.ts
+++ b/apps/web/core/components/issues/issue-layouts/gantt/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./base-gantt-root";
diff --git a/apps/web/core/components/issues/issue-layouts/group-drag-overlay.tsx b/apps/web/core/components/issues/issue-layouts/group-drag-overlay.tsx
index aa7964f2d..ccdb346f9 100644
--- a/apps/web/core/components/issues/issue-layouts/group-drag-overlay.tsx
+++ b/apps/web/core/components/issues/issue-layouts/group-drag-overlay.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useRef } from "react";
 import { AlertCircle } from "lucide-react";
 // plane imports
@@ -45,10 +51,10 @@ export function GroupDragOverlay(props: Props) {
     <div
       ref={messageContainerRef}
       className={cn(
-        `absolute top-0 left-0 h-full w-full items-center text-sm font-medium text-custom-text-300 rounded bg-custom-background-80/85 ${dragColumnOrientation}`,
+        `absolute top-0 left-0 h-full w-full items-center rounded-sm bg-layer-1/85 text-13 font-medium text-tertiary ${dragColumnOrientation}`,
         {
-          "flex flex-col border-[1px] border-custom-border-300 z-[2]": shouldOverlayBeVisible,
-          "bg-red-200/60": workflowDisabledSource && isDropDisabled,
+          "z-2 flex flex-col border-[1px] border-strong": shouldOverlayBeVisible,
+          "bg-danger-subtle": workflowDisabledSource && isDropDisabled,
         },
         { hidden: !shouldOverlayBeVisible }
       )}
@@ -61,9 +67,9 @@ export function GroupDragOverlay(props: Props) {
         />
       ) : (
         <div
-          className={cn("p-3 my-8 flex flex-col rounded items-center", {
-            "text-custom-text-200": shouldOverlayBeVisible,
-            "text-custom-text-error": isDropDisabled,
+          className={cn("my-8 flex flex-col items-center rounded-sm p-3", {
+            "text-secondary": shouldOverlayBeVisible,
+            "text-danger-secondary": isDropDisabled,
           })}
         >
           {dropErrorMessage ? (
diff --git a/apps/web/core/components/issues/issue-layouts/issue-layout-HOC.tsx b/apps/web/core/components/issues/issue-layouts/issue-layout-HOC.tsx
index a83860482..50a0323a9 100644
--- a/apps/web/core/components/issues/issue-layouts/issue-layout-HOC.tsx
+++ b/apps/web/core/components/issues/issue-layouts/issue-layout-HOC.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 // plane imports
 import { EIssueLayoutTypes } from "@plane/types";
diff --git a/apps/web/core/components/issues/issue-layouts/kanban/base-kanban-root.tsx b/apps/web/core/components/issues/issue-layouts/kanban/base-kanban-root.tsx
index cae04ffaa..89715732c 100644
--- a/apps/web/core/components/issues/issue-layouts/kanban/base-kanban-root.tsx
+++ b/apps/web/core/components/issues/issue-layouts/kanban/base-kanban-root.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { FC } from "react";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
@@ -5,12 +11,10 @@ import { dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element
 import { autoScrollForElements } from "@atlaskit/pragmatic-drag-and-drop-auto-scroll/element";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
-import { EIssueFilterType, EUserPermissions, EUserPermissionsLevel, WORK_ITEM_TRACKER_EVENTS } from "@plane/constants";
+import { EIssueFilterType, EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import type { EIssuesStoreType } from "@plane/types";
 import { EIssueServiceType, EIssueLayoutTypes } from "@plane/types";
-//constants
 //hooks
-import { captureError, captureSuccess } from "@/helpers/event-tracker.helper";
 import { useIssueDetail } from "@/hooks/store/use-issue-detail";
 import { useIssues } from "@/hooks/store/use-issues";
 import { useKanbanView } from "@/hooks/store/use-kanban-view";
@@ -200,23 +204,14 @@ export const BaseKanBanRoot = observer(function BaseKanBanRoot(props: IBaseKanBa
 
     if (!draggedIssueId || !draggedIssue) return;
 
-    await removeIssue(draggedIssue.project_id, draggedIssueId)
-      .then(() => {
-        captureSuccess({
-          eventName: WORK_ITEM_TRACKER_EVENTS.delete,
-          payload: { id: draggedIssueId },
-        });
-      })
-      .catch(() => {
-        captureError({
-          eventName: WORK_ITEM_TRACKER_EVENTS.delete,
-          payload: { id: draggedIssueId },
-        });
-      })
-      .finally(() => {
-        setDeleteIssueModal(false);
-        setDraggedIssueId(undefined);
-      });
+    try {
+      await removeIssue(draggedIssue.project_id, draggedIssueId);
+      setDeleteIssueModal(false);
+      setDraggedIssueId(undefined);
+    } catch (_error) {
+      setDeleteIssueModal(false);
+      setDraggedIssueId(undefined);
+    }
   };
 
   const handleCollapsedGroups = useCallback(
@@ -257,8 +252,8 @@ export const BaseKanBanRoot = observer(function BaseKanBanRoot(props: IBaseKanBa
         <div
           className={`${
             isDragging ? `opacity-100` : `opacity-0`
-          } flex w-full items-center justify-center rounded border-2 border-red-500/20 bg-custom-background-100 px-3 py-5 text-xs font-medium italic text-red-500 ${
-            isDragOverDelete ? "bg-red-500 opacity-70 blur-2xl" : ""
+          } flex w-full items-center justify-center rounded-sm border-2 border-danger-strong/20 bg-surface-1 px-3 py-5 text-11 font-medium text-danger-primary italic ${
+            isDragOverDelete ? "bg-danger-primary blur-2xl" : ""
           } transition duration-300`}
         >
           Drop here to delete the work item.
@@ -266,10 +261,10 @@ export const BaseKanBanRoot = observer(function BaseKanBanRoot(props: IBaseKanBa
       </div>
       <IssueLayoutHOC layout={EIssueLayoutTypes.KANBAN}>
         <div
-          className={`horizontal-scrollbar scrollbar-lg relative flex h-full w-full bg-custom-background-90 ${sub_group_by ? "vertical-scrollbar overflow-y-auto" : "overflow-x-auto overflow-y-hidden"}`}
+          className={`horizontal-scrollbar relative flex scrollbar-lg h-full w-full bg-surface-2 ${sub_group_by ? "vertical-scrollbar overflow-y-auto" : "overflow-x-auto overflow-y-hidden"}`}
           ref={scrollableContainerRef}
         >
-          <div className="relative h-full w-max min-w-full bg-custom-background-90">
+          <div className="relative h-full w-max min-w-full bg-surface-2">
             <div className="h-full w-max">
               <KanBanView
                 issuesMap={issueMap}
diff --git a/apps/web/core/components/issues/issue-layouts/kanban/block.tsx b/apps/web/core/components/issues/issue-layouts/kanban/block.tsx
index 35e9e1b77..c9531328f 100644
--- a/apps/web/core/components/issues/issue-layouts/kanban/block.tsx
+++ b/apps/web/core/components/issues/issue-layouts/kanban/block.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { MutableRefObject } from "react";
 import { useEffect, useRef, useState } from "react";
 import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
@@ -72,8 +78,8 @@ const KanbanIssueDetailsBlock = observer(function KanbanIssueDetailsBlock(props:
   const customActionButton = (
     <div
       ref={menuActionRef}
-      className={`flex items-center h-full w-full cursor-pointer rounded p-1 text-custom-sidebar-text-400 hover:bg-custom-background-80 ${
-        isMenuActive ? "bg-custom-background-80 text-custom-text-100" : "text-custom-text-200"
+      className={`flex h-full w-full cursor-pointer items-center rounded-sm p-1 text-placeholder hover:bg-layer-1 ${
+        isMenuActive ? "bg-layer-1 text-primary" : "text-secondary"
       }`}
       onClick={() => setIsMenuActive(!isMenuActive)}
     >
@@ -98,7 +104,8 @@ const KanbanIssueDetailsBlock = observer(function KanbanIssueDetailsBlock(props:
           <IssueIdentifier
             issueId={issue.id}
             projectId={issue.project_id}
-            textContainerClassName="line-clamp-1 text-xs text-custom-text-300"
+            size="xs"
+            variant="tertiary"
             displayProperties={displayProperties}
           />
         )}
@@ -118,13 +125,13 @@ const KanbanIssueDetailsBlock = observer(function KanbanIssueDetailsBlock(props:
       </div>
 
       <Tooltip tooltipContent={issue.name} isMobile={isMobile} renderByDefault={false}>
-        <div className="w-full line-clamp-1 text-sm text-custom-text-100">
+        <div className="line-clamp-1 w-full text-body-sm-medium text-primary">
           <span>{issue.name}</span>
         </div>
       </Tooltip>
 
       <IssueProperties
-        className="flex flex-wrap items-center gap-2 whitespace-nowrap text-custom-text-300 pt-1.5"
+        className="flex flex-wrap items-center gap-2 pt-1.5 whitespace-nowrap text-tertiary"
         issue={issue}
         displayProperties={displayProperties}
         activeLayout="Kanban"
@@ -139,7 +146,7 @@ const KanbanIssueDetailsBlock = observer(function KanbanIssueDetailsBlock(props:
           displayPropertyKey="sub_issue_count"
           shouldRenderProperty={(properties) => !!properties.sub_issue_count && !!subIssueCount}
         >
-          <IssueStats issueId={issue.id} className="mt-2 font-medium text-custom-text-350" />
+          <IssueStats issueId={issue.id} className="mt-2 font-medium text-tertiary" />
         </WithDisplayPropertiesHOC>
       )}
     </>
@@ -268,16 +275,16 @@ export const KanbanIssueBlock = observer(function KanbanIssueBlock(props: IssueB
           href={workItemLink}
           ref={cardRef}
           className={cn(
-            "block rounded border-[1px] outline-[0.5px] outline-transparent w-full border-custom-border-200 bg-custom-background-100 text-sm transition-all hover:border-custom-border-400",
+            "block w-full rounded-lg border border-subtle bg-layer-2 p-3 text-13 shadow-raised-100 outline-[0.5px] outline-transparent transition-all hover:border-strong hover:shadow-raised-200",
             { "hover:cursor-pointer": isDragAllowed },
-            { "border border-custom-primary-70 hover:border-custom-primary-70": getIsIssuePeeked(issue.id) },
-            { "bg-custom-background-80 z-[100]": isCurrentBlockDragging }
+            { "border border-accent-strong hover:border-accent-strong": getIsIssuePeeked(issue.id) },
+            { "z-[100] bg-layer-1": isCurrentBlockDragging }
           )}
           onClick={() => handleIssuePeekOverview(issue)}
           disabled={!!issue?.tempId}
         >
           <RenderIfVisible
-            classNames="space-y-2 px-3 py-2"
+            classNames="space-y-2"
             root={scrollableContainerRef}
             defaultHeight="100px"
             horizontalOffset={100}
diff --git a/apps/web/core/components/issues/issue-layouts/kanban/blocks-list.tsx b/apps/web/core/components/issues/issue-layouts/kanban/blocks-list.tsx
index e4357ce33..9361e4ced 100644
--- a/apps/web/core/components/issues/issue-layouts/kanban/blocks-list.tsx
+++ b/apps/web/core/components/issues/issue-layouts/kanban/blocks-list.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { MutableRefObject } from "react";
 import { observer } from "mobx-react";
 // plane imports
diff --git a/apps/web/core/components/issues/issue-layouts/kanban/default.tsx b/apps/web/core/components/issues/issue-layouts/kanban/default.tsx
index 463d080c9..b7326ee0f 100644
--- a/apps/web/core/components/issues/issue-layouts/kanban/default.tsx
+++ b/apps/web/core/components/issues/issue-layouts/kanban/default.tsx
@@ -1,7 +1,11 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { MutableRefObject } from "react";
 import { observer } from "mobx-react";
-// i18n
-import { useTranslation } from "@plane/i18n";
 import type {
   GroupByColumnTypes,
   IGroupByColumn,
@@ -94,7 +98,6 @@ export const KanBan = observer(function KanBan(props: IKanBan) {
     isEpic = false,
   } = props;
   // i18n
-  const { t } = useTranslation();
   // store hooks
   const storeType = useIssueStoreType();
   const issueKanBanView = useKanbanView();
@@ -141,7 +144,7 @@ export const KanBan = observer(function KanBan(props: IKanBan) {
   const isSubGroup = !!sub_group_id && sub_group_id !== "null";
 
   return (
-    <ContentWrapper className={`flex-row relative gap-4 !pt-2 !pb-0`}>
+    <ContentWrapper className={`relative flex-row gap-4 !pt-2 !pb-0`}>
       {list &&
         list.length > 0 &&
         list.map((subList: IGroupByColumn, groupIndex) => {
@@ -163,7 +166,7 @@ export const KanBan = observer(function KanBan(props: IKanBan) {
               } `}
             >
               {sub_group_by === null && (
-                <div className="sticky top-0 z-[2] w-full flex-shrink-0 bg-custom-background-90 py-1">
+                <div className="sticky top-0 z-[2] w-full flex-shrink-0 bg-surface-2 py-1">
                   <HeaderGroupByCard
                     sub_group_by={sub_group_by}
                     group_by={group_by}
diff --git a/apps/web/core/components/issues/issue-layouts/kanban/headers/group-by-card.tsx b/apps/web/core/components/issues/issue-layouts/kanban/headers/group-by-card.tsx
index 0c64ff4dd..3a89e4997 100644
--- a/apps/web/core/components/issues/issue-layouts/kanban/headers/group-by-card.tsx
+++ b/apps/web/core/components/issues/issue-layouts/kanban/headers/group-by-card.tsx
@@ -1,10 +1,15 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // lucide icons
-import { Minimize2, Maximize2, Circle, Plus } from "lucide-react";
-import { WORK_ITEM_TRACKER_EVENTS } from "@plane/constants";
+import { Minimize2, Maximize2, Circle } from "lucide-react";
+import { PlusIcon } from "@plane/propel/icons";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { TIssue, ISearchIssueResponse, TIssueKanbanFilters, TIssueGroupByOptions } from "@plane/types";
 // ui
@@ -13,7 +18,6 @@ import { CustomMenu } from "@plane/ui";
 import { ExistingIssuesListModal } from "@/components/core/modals/existing-issues-list-modal";
 import { CreateUpdateIssueModal } from "@/components/issues/issue-modal/modal";
 // constants
-import { captureClick } from "@/helpers/event-tracker.helper";
 import { useIssueStoreType } from "@/hooks/use-issue-layout-store";
 import { CreateUpdateEpicModal } from "@/plane-web/components/epics/epic-modal";
 // types
@@ -75,7 +79,7 @@ export const HeaderGroupByCard = observer(function HeaderGroupByCard(props: IHea
         title: "Success!",
         message: "Work items added to the cycle successfully.",
       });
-    } catch (error) {
+    } catch (_error) {
       setToast({
         type: TOAST_TYPE.ERROR,
         title: "Error!",
@@ -108,11 +112,11 @@ export const HeaderGroupByCard = observer(function HeaderGroupByCard(props: IHea
         />
       )}
       <div
-        className={`relative flex flex-shrink-0 gap-2 py-1.5 ${
+        className={`relative flex flex-shrink-0 gap-1 py-1.5 ${
           verticalAlignPosition ? `w-[44px] flex-col items-center` : `w-full flex-row items-center`
         }`}
       >
-        <div className="flex h-[25px] w-[20px] flex-shrink-0 items-center justify-center overflow-hidden rounded-sm">
+        <div className="flex size-5 flex-shrink-0 items-center justify-center overflow-hidden rounded-xs">
           {icon ? icon : <Circle width={14} strokeWidth={2} />}
         </div>
 
@@ -122,14 +126,14 @@ export const HeaderGroupByCard = observer(function HeaderGroupByCard(props: IHea
           }`}
         >
           <div
-            className={`line-clamp-1 inline-block overflow-hidden truncate font-medium text-custom-text-100 ${
-              verticalAlignPosition ? `vertical-lr max-h-[400px]` : ``
+            className={`line-clamp-1 inline-block truncate overflow-hidden font-medium text-primary ${
+              verticalAlignPosition ? `max-h-[400px] vertical-lr` : ``
             }`}
           >
             {title}
           </div>
           <div
-            className={`flex-shrink-0 text-sm font-medium text-custom-text-300 ${verticalAlignPosition ? `pr-0.5` : `pl-2`}`}
+            className={`flex-shrink-0 text-13 font-medium text-tertiary ${verticalAlignPosition ? `pr-0.5` : `pl-2`}`}
           >
             {count || 0}
           </div>
@@ -138,8 +142,8 @@ export const HeaderGroupByCard = observer(function HeaderGroupByCard(props: IHea
         <WorkFlowGroupTree groupBy={group_by} groupId={column_id} />
 
         {sub_group_by === null && (
-          <div
-            className="flex h-[20px] w-[20px] flex-shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-sm transition-all hover:bg-custom-background-80"
+          <button
+            className="flex h-[20px] w-[20px] flex-shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-sm bg-layer-transparent transition-all hover:bg-layer-transparent-hover"
             onClick={() => handleCollapsedGroups("group_by", column_id)}
           >
             {verticalAlignPosition ? (
@@ -147,22 +151,21 @@ export const HeaderGroupByCard = observer(function HeaderGroupByCard(props: IHea
             ) : (
               <Minimize2 width={14} strokeWidth={2} />
             )}
-          </div>
+          </button>
         )}
 
         {!disableIssueCreation &&
           (renderExistingIssueModal ? (
             <CustomMenu
               customButton={
-                <span className="flex h-[20px] w-[20px] flex-shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-sm transition-all hover:bg-custom-background-80">
-                  <Plus height={14} width={14} strokeWidth={2} />
+                <span className="flex h-[20px] w-[20px] flex-shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-sm bg-layer-transparent transition-all hover:bg-layer-transparent-hover">
+                  <PlusIcon height={14} width={14} strokeWidth={2} />
                 </span>
               }
               placement="bottom-end"
             >
               <CustomMenu.MenuItem
                 onClick={() => {
-                  captureClick({ elementName: WORK_ITEM_TRACKER_EVENTS.create });
                   setIsOpen(true);
                 }}
               >
@@ -170,7 +173,6 @@ export const HeaderGroupByCard = observer(function HeaderGroupByCard(props: IHea
               </CustomMenu.MenuItem>
               <CustomMenu.MenuItem
                 onClick={() => {
-                  captureClick({ elementName: WORK_ITEM_TRACKER_EVENTS.add_existing });
                   setOpenExistingIssueListModal(true);
                 }}
               >
@@ -178,15 +180,14 @@ export const HeaderGroupByCard = observer(function HeaderGroupByCard(props: IHea
               </CustomMenu.MenuItem>
             </CustomMenu>
           ) : (
-            <div
-              className="flex h-[20px] w-[20px] flex-shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-sm transition-all hover:bg-custom-background-80"
+            <button
+              className="flex h-[20px] w-[20px] flex-shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-sm bg-layer-transparent transition-all hover:bg-layer-transparent-hover"
               onClick={() => {
-                captureClick({ elementName: WORK_ITEM_TRACKER_EVENTS.create });
                 setIsOpen(true);
               }}
             >
-              <Plus width={14} strokeWidth={2} />
-            </div>
+              <PlusIcon width={14} strokeWidth={2} />
+            </button>
           ))}
       </div>
     </>
diff --git a/apps/web/core/components/issues/issue-layouts/kanban/headers/sub-group-by-card.tsx b/apps/web/core/components/issues/issue-layouts/kanban/headers/sub-group-by-card.tsx
index cc5df5a08..55eb49155 100644
--- a/apps/web/core/components/issues/issue-layouts/kanban/headers/sub-group-by-card.tsx
+++ b/apps/web/core/components/issues/issue-layouts/kanban/headers/sub-group-by-card.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 import { observer } from "mobx-react";
 import { Circle } from "lucide-react";
@@ -23,10 +28,10 @@ export const HeaderSubGroupByCard = observer(function HeaderSubGroupByCard(props
   const { icon, title, count, column_id, collapsedGroups, sub_group_by, handleCollapsedGroups } = props;
   return (
     <div
-      className={`relative flex w-full flex-shrink-0 flex-row items-center gap-1 rounded-sm py-1.5 cursor-pointer`}
+      className={`relative flex w-full flex-shrink-0 cursor-pointer flex-row items-center gap-1 rounded-xs py-1.5`}
       onClick={() => handleCollapsedGroups("sub_group_by", column_id)}
     >
-      <div className="flex h-[20px] w-[20px] flex-shrink-0 items-center justify-center overflow-hidden rounded-sm transition-all hover:bg-custom-background-80">
+      <div className="flex h-[20px] w-[20px] flex-shrink-0 items-center justify-center overflow-hidden rounded-xs transition-all hover:bg-layer-1">
         {collapsedGroups?.sub_group_by.includes(column_id) ? (
           <ChevronDownIcon width={14} strokeWidth={2} />
         ) : (
@@ -34,13 +39,13 @@ export const HeaderSubGroupByCard = observer(function HeaderSubGroupByCard(props
         )}
       </div>
 
-      <div className="flex h-[20px] w-[20px] flex-shrink-0 items-center justify-center overflow-hidden rounded-sm">
+      <div className="flex h-[20px] w-[20px] flex-shrink-0 items-center justify-center overflow-hidden rounded-xs">
         {icon ? icon : <Circle width={14} strokeWidth={2} />}
       </div>
 
-      <div className="flex flex-shrink-0 items-center gap-1 text-sm">
-        <div className="line-clamp-1 text-custom-text-100">{title}</div>
-        <div className="pl-2 text-sm font-medium text-custom-text-300">{count || 0}</div>
+      <div className="flex flex-shrink-0 items-center gap-1 text-13">
+        <div className="line-clamp-1 text-primary">{title}</div>
+        <div className="pl-2 text-13 font-medium text-tertiary">{count || 0}</div>
       </div>
 
       <WorkFlowGroupTree groupBy={sub_group_by} groupId={column_id} />
diff --git a/apps/web/core/components/issues/issue-layouts/kanban/kanban-group.tsx b/apps/web/core/components/issues/issue-layouts/kanban/kanban-group.tsx
index 9c49cc1bb..1358110ee 100644
--- a/apps/web/core/components/issues/issue-layouts/kanban/kanban-group.tsx
+++ b/apps/web/core/components/issues/issue-layouts/kanban/kanban-group.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { MutableRefObject } from "react";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
@@ -255,7 +261,7 @@ export const KanbanGroup = observer(function KanbanGroup(props: IKanbanGroup) {
     <KanbanIssueBlockLoader />
   ) : (
     <div
-      className="w-full sticky bottom-0 p-3 text-sm font-medium text-custom-primary-100 hover:text-custom-primary-200 hover:underline cursor-pointer"
+      className="sticky bottom-0 w-full cursor-pointer p-3 text-13 font-medium text-accent-primary hover:text-accent-secondary hover:underline"
       onClick={loadMoreIssuesInThisGroup}
     >
       {t("common.load_more")} &darr;
@@ -274,8 +280,8 @@ export const KanbanGroup = observer(function KanbanGroup(props: IKanbanGroup) {
     <div
       id={`${groupId}__${sub_group_id}`}
       className={cn(
-        "relative h-full transition-all min-h-[120px]",
-        { "bg-custom-background-80 rounded": isDraggingOverColumn },
+        "relative h-full min-h-[120px] transition-all",
+        { "rounded-sm bg-layer-1": isDraggingOverColumn },
         { "vertical-scrollbar scrollbar-md": !sub_group_by && !shouldOverlayBeVisible }
       )}
       ref={columnRef}
@@ -305,12 +311,22 @@ export const KanbanGroup = observer(function KanbanGroup(props: IKanbanGroup) {
         isEpic={isEpic}
       />
 
-      {shouldLoadMore && (isSubGroup ? <>{loadMore}</> : <KanbanIssueBlockLoader ref={setIntersectionElement} />)}
+      {shouldLoadMore &&
+        (isSubGroup ? (
+          <>{loadMore}</>
+        ) : (
+          <div className="flex flex-col gap-2">
+            {Array.from({ length: 2 }).map((_, index) => (
+              <KanbanIssueBlockLoader key={index} />
+            ))}
+            <KanbanIssueBlockLoader ref={setIntersectionElement} />
+          </div>
+        ))}
 
       {enableQuickIssueCreate &&
         !disableIssueCreation &&
         !getIsWorkflowWorkItemCreationDisabled(groupId, sub_group_id) && (
-          <div className="w-full bg-custom-background-90 py-0.5 sticky bottom-0">
+          <div className="sticky bottom-0 w-full bg-surface-2 py-0.5">
             <QuickAddIssueRoot
               layout={EIssueLayoutTypes.KANBAN}
               QuickAddButton={KanbanQuickAddIssueButton}
diff --git a/apps/web/core/components/issues/issue-layouts/kanban/roots/cycle-root.tsx b/apps/web/core/components/issues/issue-layouts/kanban/roots/cycle-root.tsx
index a766ebad1..5aa59c66d 100644
--- a/apps/web/core/components/issues/issue-layouts/kanban/roots/cycle-root.tsx
+++ b/apps/web/core/components/issues/issue-layouts/kanban/roots/cycle-root.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React, { useCallback } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
diff --git a/apps/web/core/components/issues/issue-layouts/kanban/roots/module-root.tsx b/apps/web/core/components/issues/issue-layouts/kanban/roots/module-root.tsx
index 26f3e4e31..5c17b8873 100644
--- a/apps/web/core/components/issues/issue-layouts/kanban/roots/module-root.tsx
+++ b/apps/web/core/components/issues/issue-layouts/kanban/roots/module-root.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
diff --git a/apps/web/core/components/issues/issue-layouts/kanban/roots/profile-issues-root.tsx b/apps/web/core/components/issues/issue-layouts/kanban/roots/profile-issues-root.tsx
index db6eb6418..5224212f6 100644
--- a/apps/web/core/components/issues/issue-layouts/kanban/roots/profile-issues-root.tsx
+++ b/apps/web/core/components/issues/issue-layouts/kanban/roots/profile-issues-root.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // plane imports
diff --git a/apps/web/core/components/issues/issue-layouts/kanban/roots/project-root.tsx b/apps/web/core/components/issues/issue-layouts/kanban/roots/project-root.tsx
index 22250fd81..6d691ad90 100644
--- a/apps/web/core/components/issues/issue-layouts/kanban/roots/project-root.tsx
+++ b/apps/web/core/components/issues/issue-layouts/kanban/roots/project-root.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // plane imports
diff --git a/apps/web/core/components/issues/issue-layouts/kanban/roots/project-view-root.tsx b/apps/web/core/components/issues/issue-layouts/kanban/roots/project-view-root.tsx
index ef4239fd8..01e9823a5 100644
--- a/apps/web/core/components/issues/issue-layouts/kanban/roots/project-view-root.tsx
+++ b/apps/web/core/components/issues/issue-layouts/kanban/roots/project-view-root.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
diff --git a/apps/web/core/components/issues/issue-layouts/kanban/swimlanes.tsx b/apps/web/core/components/issues/issue-layouts/kanban/swimlanes.tsx
index 172cd20da..84998f3fa 100644
--- a/apps/web/core/components/issues/issue-layouts/kanban/swimlanes.tsx
+++ b/apps/web/core/components/issues/issue-layouts/kanban/swimlanes.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { MutableRefObject } from "react";
 import { observer } from "mobx-react";
 // plane imports
@@ -177,7 +183,7 @@ const SubGroupSwimlane = observer(function SubGroupSwimlane(props: ISubGroupSwim
           if (subGroupByVisibilityToggle.showGroup === false) return <></>;
           return (
             <div key={_list.id} className="flex flex-shrink-0 flex-col">
-              <div className="sticky top-[50px] z-[3] py-1 flex w-full items-center bg-custom-background-100 border-y-[0.5px] border-custom-border-200">
+              <div className="sticky top-[50px] z-[3] flex w-full items-center border-y-[0.5px] border-subtle bg-layer-1 py-1">
                 <Row className="sticky left-0 flex-shrink-0">
                   <HeaderSubGroupByCard
                     column_id={_list.id}
@@ -301,7 +307,7 @@ export const KanBanSwimLanes = observer(function KanBanSwimLanes(props: IKanBanS
 
   return (
     <div className="relative">
-      <Row className="sticky top-0 z-[4] h-[50px] bg-custom-background-90">
+      <Row className="sticky top-0 z-[4] h-[50px] bg-surface-2">
         <SubGroupSwimlaneHeader
           getGroupIssueCount={getGroupIssueCount}
           group_by={group_by}
diff --git a/apps/web/core/components/issues/issue-layouts/layout-icon.tsx b/apps/web/core/components/issues/issue-layouts/layout-icon.tsx
index 6788a8aea..5b06251f6 100644
--- a/apps/web/core/components/issues/issue-layouts/layout-icon.tsx
+++ b/apps/web/core/components/issues/issue-layouts/layout-icon.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import {
   ListLayoutIcon,
   BoardLayoutIcon,
diff --git a/apps/web/core/components/issues/issue-layouts/list/base-list-root.tsx b/apps/web/core/components/issues/issue-layouts/list/base-list-root.tsx
index 60f85f3f0..4122b7e95 100644
--- a/apps/web/core/components/issues/issue-layouts/list/base-list-root.tsx
+++ b/apps/web/core/components/issues/issue-layouts/list/base-list-root.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { FC } from "react";
 import { useCallback, useEffect } from "react";
 import { observer } from "mobx-react";
@@ -148,7 +154,7 @@ export const BaseListRoot = observer(function BaseListRoot(props: IBaseListRoot)
 
   return (
     <IssueLayoutHOC layout={EIssueLayoutTypes.LIST}>
-      <div className={`relative size-full bg-custom-background-90`}>
+      <div className={`relative size-full bg-surface-2`}>
         <List
           issuesMap={issueMap}
           displayProperties={displayProperties}
diff --git a/apps/web/core/components/issues/issue-layouts/list/block-root.tsx b/apps/web/core/components/issues/issue-layouts/list/block-root.tsx
index 68d49434c..443d84612 100644
--- a/apps/web/core/components/issues/issue-layouts/list/block-root.tsx
+++ b/apps/web/core/components/issues/issue-layouts/list/block-root.tsx
@@ -1,4 +1,10 @@
-import type { FC, MutableRefObject } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { MutableRefObject } from "react";
 import React, { useEffect, useRef, useState } from "react";
 import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
 import { dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
@@ -130,9 +136,9 @@ export const IssueBlockRoot = observer(function IssueBlockRoot(props: Props) {
       <RenderIfVisible
         key={`${issueId}`}
         root={containerRef}
-        classNames={`relative ${isLastChild && !isExpanded ? "" : "border-b border-b-custom-border-200"}`}
+        classNames={`relative ${isLastChild && !isExpanded ? "" : "border-b border-b-subtle"}`}
         verticalOffset={100}
-        defaultValue={shouldRenderByDefault || isIssueNew(issuesMap[issueId])}
+        defaultValue={shouldRenderByDefault || (issuesMap[issueId] ? isIssueNew(issuesMap[issueId]) : false)}
         placeholderChildren={<ListLoaderItemRow shouldAnimate={false} renderForPlaceHolder defaultPropertyCount={4} />}
         shouldRecordHeights={isMobile}
       >
diff --git a/apps/web/core/components/issues/issue-layouts/list/block.tsx b/apps/web/core/components/issues/issue-layouts/list/block.tsx
index 1b7cae0fd..2c536b2aa 100644
--- a/apps/web/core/components/issues/issue-layouts/list/block.tsx
+++ b/apps/web/core/components/issues/issue-layouts/list/block.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { Dispatch, MouseEvent, SetStateAction } from "react";
 import { useEffect, useRef } from "react";
 import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
@@ -28,6 +34,7 @@ import { IssueIdentifier } from "@/plane-web/components/issues/issue-details/iss
 import { IssueStats } from "@/plane-web/components/issues/issue-layouts/issue-stats";
 // types
 import { WithDisplayPropertiesHOC } from "../properties/with-display-properties-HOC";
+import { calculateIdentifierWidth } from "../utils";
 import type { TRenderQuickActions } from "./list-view-types";
 
 interface IssueBlockProps {
@@ -76,7 +83,7 @@ export const IssueBlock = observer(function IssueBlock(props: IssueBlockProps) {
   const projectId = routerProjectId?.toString();
   // hooks
   const { sidebarCollapsed: isSidebarCollapsed } = useAppTheme();
-  const { getProjectIdentifierById } = useProject();
+  const { getProjectIdentifierById, currentProjectNextSequenceId } = useProject();
   const {
     getIsIssuePeeked,
     peekIssue,
@@ -150,8 +157,12 @@ export const IssueBlock = observer(function IssueBlock(props: IssueBlockProps) {
     }
   };
 
-  //TODO: add better logic. This is to have a min width for ID/Key based on the length of project identifier
-  const keyMinWidth = displayProperties?.key ? (projectIdentifier?.length ?? 0) * 7 : 0;
+  // Calculate width for: projectIdentifier + "-" + dynamic sequence number digits
+  // Use next_work_item_sequence from backend (static value from project endpoint)
+  const maxSequenceId = currentProjectNextSequenceId ?? 1;
+  const keyMinWidth = displayProperties?.key
+    ? calculateIdentifierWidth(projectIdentifier?.length ?? 0, maxSequenceId)
+    : 0;
 
   const workItemLink = generateWorkItemLink({
     workspaceSlug,
@@ -173,13 +184,13 @@ export const IssueBlock = observer(function IssueBlock(props: IssueBlockProps) {
       <Row
         ref={issueRef}
         className={cn(
-          "group/list-block min-h-11 relative flex flex-col gap-3 bg-custom-background-100 hover:bg-custom-background-90 py-3 text-sm transition-colors border border-transparent",
+          "group/list-block relative flex min-h-11 flex-col gap-3 bg-layer-transparent py-3 text-13 transition-colors hover:bg-layer-transparent-hover",
           {
-            "border-custom-primary-70": getIsIssuePeeked(issue.id) && peekIssue?.nestingLevel === nestingLevel,
-            "border-custom-border-400": isIssueActive,
+            "border-accent-strong": getIsIssuePeeked(issue.id) && peekIssue?.nestingLevel === nestingLevel,
+            "border-strong-1": isIssueActive,
             "last:border-b-transparent": !getIsIssuePeeked(issue.id) && !isIssueActive,
-            "bg-custom-primary-100/5 hover:bg-custom-primary-100/10": isIssueSelected,
-            "bg-custom-background-80": isCurrentBlockDragging,
+            "bg-accent-primary/5 hover:bg-accent-primary/10": isIssueSelected,
+            "bg-layer-1": isCurrentBlockDragging,
             "md:flex-row md:items-center": isSidebarCollapsed,
             "lg:flex-row lg:items-center": !isSidebarCollapsed,
           }
@@ -196,7 +207,7 @@ export const IssueBlock = observer(function IssueBlock(props: IssueBlockProps) {
           }
         }}
       >
-        <div className="flex gap-2 w-full truncate">
+        <div className="flex w-full gap-2 truncate">
           <div className="flex flex-grow items-center gap-0.5 truncate">
             <div className="flex items-center gap-1" style={isSubIssue ? { marginLeft } : {}}>
               {/* select checkbox */}
@@ -211,12 +222,12 @@ export const IssueBlock = observer(function IssueBlock(props: IssueBlockProps) {
                   }
                   disabled={issue.project_id === projectId}
                 >
-                  <div className="flex-shrink-0 grid place-items-center w-3.5 absolute left-1">
+                  <div className="absolute left-1 grid w-3.5 flex-shrink-0 place-items-center">
                     <MultipleSelectEntityAction
                       className={cn(
-                        "opacity-0 pointer-events-none group-hover/list-block:opacity-100 group-hover/list-block:pointer-events-auto transition-opacity",
+                        "pointer-events-none opacity-0 transition-opacity group-hover/list-block:pointer-events-auto group-hover/list-block:opacity-100",
                         {
-                          "opacity-100 pointer-events-auto": isIssueSelected,
+                          "pointer-events-auto opacity-100": isIssueSelected,
                         }
                       )}
                       groupId={groupId}
@@ -233,7 +244,8 @@ export const IssueBlock = observer(function IssueBlock(props: IssueBlockProps) {
                     <IssueIdentifier
                       issueId={issueId}
                       projectId={issue.project_id}
-                      textContainerClassName="text-xs font-medium text-custom-text-300"
+                      size="xs"
+                      variant="tertiary"
                       displayProperties={displayProperties}
                     />
                   )}
@@ -241,11 +253,11 @@ export const IssueBlock = observer(function IssueBlock(props: IssueBlockProps) {
               )}
 
               {/* sub-issues chevron */}
-              <div className="size-4 grid place-items-center flex-shrink-0">
+              <div className="grid size-4 flex-shrink-0 place-items-center">
                 {subIssuesCount > 0 && !isEpic && (
                   <button
                     type="button"
-                    className="size-4 grid place-items-center rounded-sm text-custom-text-400 hover:text-custom-text-300"
+                    className="grid size-4 place-items-center rounded-xs text-placeholder hover:text-tertiary"
                     onClick={handleToggleExpand}
                   >
                     <ChevronRightIcon
@@ -259,7 +271,7 @@ export const IssueBlock = observer(function IssueBlock(props: IssueBlockProps) {
               </div>
 
               {issue?.tempId !== undefined && (
-                <div className="absolute left-0 top-0 z-[99999] h-full w-full animate-pulse bg-custom-background-100/20" />
+                <div className="absolute top-0 left-0 z-[99999] h-full w-full animate-pulse bg-surface-1/20" />
               )}
             </div>
 
@@ -270,7 +282,7 @@ export const IssueBlock = observer(function IssueBlock(props: IssueBlockProps) {
               disabled={isCurrentBlockDragging}
               renderByDefault={false}
             >
-              <p className="truncate cursor-pointer text-sm text-custom-text-100">{issue.name}</p>
+              <p className="cursor-pointer truncate text-body-xs-medium text-primary">{issue.name}</p>
             </Tooltip>
             {isEpic && displayProperties && (
               <WithDisplayPropertiesHOC
@@ -278,13 +290,13 @@ export const IssueBlock = observer(function IssueBlock(props: IssueBlockProps) {
                 displayPropertyKey="sub_issue_count"
                 shouldRenderProperty={(properties) => !!properties.sub_issue_count}
               >
-                <IssueStats issueId={issue.id} className="ml-2 font-medium text-custom-text-350" />
+                <IssueStats issueId={issue.id} className="ml-2 text-body-xs-medium text-tertiary" />
               </WithDisplayPropertiesHOC>
             )}
           </div>
           {!issue?.tempId && (
             <div
-              className={cn("block border border-custom-border-300 rounded", {
+              className={cn("block rounded-sm border border-strong", {
                 "md:hidden": isSidebarCollapsed,
                 "lg:hidden": !isSidebarCollapsed,
               })}
@@ -300,7 +312,7 @@ export const IssueBlock = observer(function IssueBlock(props: IssueBlockProps) {
           {!issue?.tempId ? (
             <>
               <IssueProperties
-                className={`relative flex flex-wrap ${isSidebarCollapsed ? "md:flex-grow md:flex-shrink-0" : "lg:flex-grow lg:flex-shrink-0"} items-center gap-2 whitespace-nowrap`}
+                className={`relative flex flex-wrap ${isSidebarCollapsed ? "md:flex-shrink-0 md:flex-grow" : "lg:flex-shrink-0 lg:flex-grow"} items-center gap-2 whitespace-nowrap`}
                 issue={issue}
                 isReadOnly={!canEditIssueProperties}
                 updateIssue={updateIssue}
diff --git a/apps/web/core/components/issues/issue-layouts/list/blocks-list.tsx b/apps/web/core/components/issues/issue-layouts/list/blocks-list.tsx
index 72be4c66b..cc3690900 100644
--- a/apps/web/core/components/issues/issue-layouts/list/blocks-list.tsx
+++ b/apps/web/core/components/issues/issue-layouts/list/blocks-list.tsx
@@ -1,4 +1,10 @@
-import type { FC, MutableRefObject } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { MutableRefObject } from "react";
 // components
 import type { TIssue, IIssueDisplayProperties, TIssueMap, TGroupedIssues } from "@plane/types";
 // hooks
diff --git a/apps/web/core/components/issues/issue-layouts/list/default.tsx b/apps/web/core/components/issues/issue-layouts/list/default.tsx
index 330d7af91..28db68add 100644
--- a/apps/web/core/components/issues/issue-layouts/list/default.tsx
+++ b/apps/web/core/components/issues/issue-layouts/list/default.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useEffect, useRef } from "react";
 import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
 import { autoScrollForElements } from "@atlaskit/pragmatic-drag-and-drop-auto-scroll/element";
@@ -123,7 +129,7 @@ export const List = observer(function List(props: IList) {
     entities = orderedGroups;
   }
   return (
-    <div className="relative size-full flex flex-col">
+    <div className="relative flex size-full flex-col">
       {groups && (
         <MultipleSelectGroup
           containerRef={containerRef}
@@ -134,7 +140,7 @@ export const List = observer(function List(props: IList) {
             <>
               <div
                 ref={containerRef}
-                className="size-full vertical-scrollbar scrollbar-lg relative overflow-auto vertical-scrollbar-margin-top-md"
+                className="vertical-scrollbar relative scrollbar-lg size-full overflow-auto bg-surface-1"
               >
                 {groups.map((group: IGroupByColumn) => (
                   <ListGroup
diff --git a/apps/web/core/components/issues/issue-layouts/list/headers/group-by-card.tsx b/apps/web/core/components/issues/issue-layouts/list/headers/group-by-card.tsx
index 91f12bb6c..9fec4fc10 100644
--- a/apps/web/core/components/issues/issue-layouts/list/headers/group-by-card.tsx
+++ b/apps/web/core/components/issues/issue-layouts/list/headers/group-by-card.tsx
@@ -1,9 +1,15 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
-import { CircleDashed, Plus } from "lucide-react";
+import { CircleDashed } from "lucide-react";
+import { PlusIcon } from "@plane/propel/icons";
 // types
-import { WORK_ITEM_TRACKER_EVENTS } from "@plane/constants";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { TIssue, ISearchIssueResponse, TIssueGroupByOptions } from "@plane/types";
 // ui
@@ -14,7 +20,6 @@ import { ExistingIssuesListModal } from "@/components/core/modals/existing-issue
 import { MultipleSelectGroupAction } from "@/components/core/multiple-select";
 import { CreateUpdateIssueModal } from "@/components/issues/issue-modal/modal";
 // constants
-import { captureClick } from "@/helpers/event-tracker.helper";
 import { useIssueStoreType } from "@/hooks/use-issue-layout-store";
 import type { TSelectionHelper } from "@/hooks/use-multiple-select";
 // plane-web
@@ -78,7 +83,7 @@ export const HeaderGroupByCard = observer(function HeaderGroupByCard(props: IHea
         title: "Success!",
         message: "Work items added to the cycle successfully.",
       });
-    } catch (error) {
+    } catch (_error) {
       setToast({
         type: TOAST_TYPE.ERROR,
         title: "Error!",
@@ -89,14 +94,14 @@ export const HeaderGroupByCard = observer(function HeaderGroupByCard(props: IHea
 
   return (
     <>
-      <div className="group/list-header w-full flex-shrink-0 flex items-center gap-2 py-1.5">
+      <div className="group/list-header flex w-full flex-shrink-0 items-center gap-2 py-1.5">
         {canSelectIssues && (
-          <div className="flex-shrink-0 flex items-center w-3.5 absolute left-1">
+          <div className="absolute left-1 flex w-3.5 flex-shrink-0 items-center">
             <MultipleSelectGroupAction
               className={cn(
-                "size-3.5 opacity-0 pointer-events-none group-hover/list-header:opacity-100 group-hover/list-header:pointer-events-auto !outline-none ",
+                "pointer-events-none size-3.5 opacity-0 !outline-none group-hover/list-header:pointer-events-auto group-hover/list-header:opacity-100",
                 {
-                  "opacity-100 pointer-events-auto": !isGroupSelectionEmpty,
+                  "pointer-events-auto opacity-100": !isGroupSelectionEmpty,
                 }
               )}
               groupID={groupID}
@@ -105,16 +110,16 @@ export const HeaderGroupByCard = observer(function HeaderGroupByCard(props: IHea
             />
           </div>
         )}
-        <div className="flex-shrink-0 grid place-items-center overflow-hidden">
+        <div className="grid flex-shrink-0 place-items-center overflow-hidden">
           {icon ?? <CircleDashed className="size-3.5" strokeWidth={2} />}
         </div>
 
         <div
-          className="relative flex w-full flex-row items-center gap-1 overflow-hidden cursor-pointer"
+          className="relative flex w-full cursor-pointer flex-row items-center gap-1 overflow-hidden"
           onClick={() => handleCollapsedGroups(groupID)}
         >
-          <div className="inline-block line-clamp-1 truncate font-medium text-custom-text-100">{title}</div>
-          <div className="pl-2 text-sm font-medium text-custom-text-300">{count || 0}</div>
+          <div className="line-clamp-1 inline-block truncate font-medium text-primary">{title}</div>
+          <div className="pl-2 text-13 font-medium text-tertiary">{count || 0}</div>
           <div className="px-2.5">
             <WorkFlowGroupTree groupBy={groupBy} groupId={groupID} />
           </div>
@@ -124,14 +129,13 @@ export const HeaderGroupByCard = observer(function HeaderGroupByCard(props: IHea
           (renderExistingIssueModal ? (
             <CustomMenu
               customButton={
-                <span className="flex h-5 w-5 flex-shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-sm transition-all hover:bg-custom-background-80">
-                  <Plus className="h-3.5 w-3.5" strokeWidth={2} />
+                <span className="flex h-5 w-5 flex-shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-xs transition-all hover:bg-layer-1">
+                  <PlusIcon className="h-3.5 w-3.5" strokeWidth={2} />
                 </span>
               }
             >
               <CustomMenu.MenuItem
                 onClick={() => {
-                  captureClick({ elementName: WORK_ITEM_TRACKER_EVENTS.create });
                   setIsOpen(true);
                 }}
               >
@@ -139,7 +143,6 @@ export const HeaderGroupByCard = observer(function HeaderGroupByCard(props: IHea
               </CustomMenu.MenuItem>
               <CustomMenu.MenuItem
                 onClick={() => {
-                  captureClick({ elementName: WORK_ITEM_TRACKER_EVENTS.add_existing });
                   setOpenExistingIssueListModal(true);
                 }}
               >
@@ -148,13 +151,12 @@ export const HeaderGroupByCard = observer(function HeaderGroupByCard(props: IHea
             </CustomMenu>
           ) : (
             <div
-              className="flex h-5 w-5 flex-shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-sm transition-all hover:bg-custom-background-80"
+              className="flex h-5 w-5 flex-shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-xs transition-all hover:bg-layer-1"
               onClick={() => {
-                captureClick({ elementName: WORK_ITEM_TRACKER_EVENTS.create });
                 setIsOpen(true);
               }}
             >
-              <Plus width={14} strokeWidth={2} />
+              <PlusIcon width={14} strokeWidth={2} />
             </div>
           ))}
 
diff --git a/apps/web/core/components/issues/issue-layouts/list/list-group.tsx b/apps/web/core/components/issues/issue-layouts/list/list-group.tsx
index 7d153044b..5c8f56fb9 100644
--- a/apps/web/core/components/issues/issue-layouts/list/list-group.tsx
+++ b/apps/web/core/components/issues/issue-layouts/list/list-group.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { MutableRefObject } from "react";
 import { useEffect, useRef, useState } from "react";
 import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
@@ -128,7 +134,7 @@ export const ListGroup = observer(function ListGroup(props: Props) {
   ) : (
     <div
       className={
-        "h-11 relative flex items-center gap-3 bg-custom-background-100 border border-transparent border-t-custom-border-200 pl-8 p-3 text-sm font-medium text-custom-primary-100 hover:text-custom-primary-200 hover:underline cursor-pointer"
+        "relative flex h-11 cursor-pointer items-center gap-3 border border-transparent border-t-subtle-1 bg-surface-1 p-3 pl-8 text-13 font-medium text-accent-primary hover:text-accent-secondary hover:underline"
       }
       onClick={() => loadMoreIssues(group.id)}
     >
@@ -250,13 +256,13 @@ export const ListGroup = observer(function ListGroup(props: Props) {
   return validateEmptyIssueGroups(groupIssueCount) ? (
     <div
       ref={groupRef}
-      className={cn(`relative flex flex-shrink-0 flex-col border-[1px] border-transparent`, {
-        "border-custom-primary-100": isDraggingOverColumn,
-        "border-custom-error-200": isDraggingOverColumn && isDropDisabled,
+      className={cn(`relative flex flex-shrink-0 flex-col`, {
+        "border-accent-strong": isDraggingOverColumn,
+        "border-danger-subtle": isDraggingOverColumn && isDropDisabled,
       })}
     >
       <Row
-        className={cn("w-full flex-shrink-0 border-b border-custom-border-200 bg-custom-background-90 pr-3 py-1", {
+        className={cn("w-full flex-shrink-0 border-b border-subtle bg-layer-1 py-1 pr-3 hover:bg-layer-1-hover", {
           "sticky top-0 z-[2]": isExpanded && groupIssueCount > 0,
         })}
       >
@@ -306,7 +312,17 @@ export const ListGroup = observer(function ListGroup(props: Props) {
             />
           )}
 
-          {shouldLoadMore && (group_by ? <>{loadMore}</> : <ListLoaderItemRow ref={setIntersectionElement} />)}
+          {shouldLoadMore &&
+            (group_by ? (
+              <>{loadMore}</>
+            ) : (
+              <>
+                {Array.from({ length: 2 }).map((_, index) => (
+                  <ListLoaderItemRow key={index} />
+                ))}
+                <ListLoaderItemRow ref={setIntersectionElement} />
+              </>
+            ))}
 
           {enableIssueQuickAdd &&
             !disableIssueCreation &&
@@ -318,7 +334,7 @@ export const ListGroup = observer(function ListGroup(props: Props) {
                   layout={EIssueLayoutTypes.LIST}
                   QuickAddButton={ListQuickAddIssueButton}
                   prePopulatedData={prePopulateQuickAddData(group_by, group.id)}
-                  containerClassName="border-b border-t border-custom-border-200 bg-custom-background-100 "
+                  containerClassName="border-b border-t border-subtle bg-surface-1 "
                   quickAddCallback={quickAddCallback}
                   isEpic={isEpic}
                 />
diff --git a/apps/web/core/components/issues/issue-layouts/list/roots/archived-issue-root.tsx b/apps/web/core/components/issues/issue-layouts/list/roots/archived-issue-root.tsx
index 21f85da30..54c8913fa 100644
--- a/apps/web/core/components/issues/issue-layouts/list/roots/archived-issue-root.tsx
+++ b/apps/web/core/components/issues/issue-layouts/list/roots/archived-issue-root.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 // local imports
 import { ArchivedIssueQuickActions } from "../../quick-action-dropdowns";
diff --git a/apps/web/core/components/issues/issue-layouts/list/roots/cycle-root.tsx b/apps/web/core/components/issues/issue-layouts/list/roots/cycle-root.tsx
index 65f66b185..acf44ae6b 100644
--- a/apps/web/core/components/issues/issue-layouts/list/roots/cycle-root.tsx
+++ b/apps/web/core/components/issues/issue-layouts/list/roots/cycle-root.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React, { useCallback } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
diff --git a/apps/web/core/components/issues/issue-layouts/list/roots/module-root.tsx b/apps/web/core/components/issues/issue-layouts/list/roots/module-root.tsx
index bd1dd7b48..e2930736c 100644
--- a/apps/web/core/components/issues/issue-layouts/list/roots/module-root.tsx
+++ b/apps/web/core/components/issues/issue-layouts/list/roots/module-root.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
diff --git a/apps/web/core/components/issues/issue-layouts/list/roots/profile-issues-root.tsx b/apps/web/core/components/issues/issue-layouts/list/roots/profile-issues-root.tsx
index 4affe0076..cc69e7cdf 100644
--- a/apps/web/core/components/issues/issue-layouts/list/roots/profile-issues-root.tsx
+++ b/apps/web/core/components/issues/issue-layouts/list/roots/profile-issues-root.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
diff --git a/apps/web/core/components/issues/issue-layouts/list/roots/project-root.tsx b/apps/web/core/components/issues/issue-layouts/list/roots/project-root.tsx
index 8819433ae..bde805f36 100644
--- a/apps/web/core/components/issues/issue-layouts/list/roots/project-root.tsx
+++ b/apps/web/core/components/issues/issue-layouts/list/roots/project-root.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // plane imports
diff --git a/apps/web/core/components/issues/issue-layouts/list/roots/project-view-root.tsx b/apps/web/core/components/issues/issue-layouts/list/roots/project-view-root.tsx
index 0c1112364..9e57dddeb 100644
--- a/apps/web/core/components/issues/issue-layouts/list/roots/project-view-root.tsx
+++ b/apps/web/core/components/issues/issue-layouts/list/roots/project-view-root.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
diff --git a/apps/web/core/components/issues/issue-layouts/properties/all-properties.tsx b/apps/web/core/components/issues/issue-layouts/properties/all-properties.tsx
index f434414d9..942017ca3 100644
--- a/apps/web/core/components/issues/issue-layouts/properties/all-properties.tsx
+++ b/apps/web/core/components/issues/issue-layouts/properties/all-properties.tsx
@@ -1,15 +1,19 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { SyntheticEvent } from "react";
 import { useCallback, useMemo } from "react";
 import { xor } from "lodash-es";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // icons
-import { Link, Paperclip } from "lucide-react";
-// types
-import { WORK_ITEM_TRACKER_EVENTS } from "@plane/constants";
+import { Paperclip } from "lucide-react";
 // i18n
 import { useTranslation } from "@plane/i18n";
-import { StartDatePropertyIcon, ViewsIcon, DueDatePropertyIcon } from "@plane/propel/icons";
+import { LinkIcon, StartDatePropertyIcon, ViewsIcon, DueDatePropertyIcon } from "@plane/propel/icons";
 import { Tooltip } from "@plane/propel/tooltip";
 import type { TIssue, IIssueDisplayProperties, TIssuePriorities } from "@plane/types";
 // ui
@@ -29,8 +33,6 @@ import { MemberDropdown } from "@/components/dropdowns/member/dropdown";
 import { ModuleDropdown } from "@/components/dropdowns/module/dropdown";
 import { PriorityDropdown } from "@/components/dropdowns/priority";
 import { StateDropdown } from "@/components/dropdowns/state/dropdown";
-// helpers
-import { captureSuccess } from "@/helpers/event-tracker.helper";
 // hooks
 import { useProjectEstimates } from "@/hooks/store/estimates";
 import { useIssues } from "@/hooks/store/use-issues";
@@ -105,44 +107,20 @@ export const IssueProperties = observer(function IssueProperties(props: IIssuePr
     [workspaceSlug, issue, changeModulesInIssue, addCycleToIssue, removeCycleFromIssue]
   );
 
-  const handleState = (stateId: string) => {
-    if (updateIssue)
-      updateIssue(issue.project_id, issue.id, { state_id: stateId }).then(() => {
-        captureSuccess({
-          eventName: WORK_ITEM_TRACKER_EVENTS.update,
-          payload: { id: issue.id },
-        });
-      });
+  const handleState = async (stateId: string) => {
+    if (updateIssue) await updateIssue(issue.project_id, issue.id, { state_id: stateId });
   };
 
-  const handlePriority = (value: TIssuePriorities) => {
-    if (updateIssue)
-      updateIssue(issue.project_id, issue.id, { priority: value }).then(() => {
-        captureSuccess({
-          eventName: WORK_ITEM_TRACKER_EVENTS.update,
-          payload: { id: issue.id },
-        });
-      });
+  const handlePriority = async (value: TIssuePriorities) => {
+    if (updateIssue) await updateIssue(issue.project_id, issue.id, { priority: value });
   };
 
-  const handleLabel = (ids: string[]) => {
-    if (updateIssue)
-      updateIssue(issue.project_id, issue.id, { label_ids: ids }).then(() => {
-        captureSuccess({
-          eventName: WORK_ITEM_TRACKER_EVENTS.update,
-          payload: { id: issue.id },
-        });
-      });
+  const handleLabel = async (ids: string[]) => {
+    if (updateIssue) await updateIssue(issue.project_id, issue.id, { label_ids: ids });
   };
 
-  const handleAssignee = (ids: string[]) => {
-    if (updateIssue)
-      updateIssue(issue.project_id, issue.id, { assignee_ids: ids }).then(() => {
-        captureSuccess({
-          eventName: WORK_ITEM_TRACKER_EVENTS.update,
-          payload: { id: issue.id },
-        });
-      });
+  const handleAssignee = async (ids: string[]) => {
+    if (updateIssue) await updateIssue(issue.project_id, issue.id, { assignee_ids: ids });
   };
 
   const handleModule = useCallback(
@@ -157,11 +135,6 @@ export const IssueProperties = observer(function IssueProperties(props: IIssuePr
         else modulesToAdd.push(moduleId);
       if (modulesToAdd.length > 0) issueOperations.addModulesToIssue(modulesToAdd);
       if (modulesToRemove.length > 0) issueOperations.removeModulesFromIssue(modulesToRemove);
-
-      captureSuccess({
-        eventName: WORK_ITEM_TRACKER_EVENTS.update,
-        payload: { id: issue.id },
-      });
     },
     [issueOperations, issue]
   );
@@ -171,47 +144,22 @@ export const IssueProperties = observer(function IssueProperties(props: IIssuePr
       if (!issue || issue.cycle_id === cycleId) return;
       if (cycleId) issueOperations.addIssueToCycle?.(cycleId);
       else issueOperations.removeIssueFromCycle?.();
-
-      captureSuccess({
-        eventName: WORK_ITEM_TRACKER_EVENTS.update,
-        payload: { id: issue.id },
-      });
     },
     [issue, issueOperations]
   );
 
-  const handleStartDate = (date: Date | null) => {
+  const handleStartDate = async (date: Date | null) => {
     if (updateIssue)
-      updateIssue(issue.project_id, issue.id, { start_date: date ? renderFormattedPayloadDate(date) : null }).then(
-        () => {
-          captureSuccess({
-            eventName: WORK_ITEM_TRACKER_EVENTS.update,
-            payload: { id: issue.id },
-          });
-        }
-      );
+      await updateIssue(issue.project_id, issue.id, { start_date: date ? renderFormattedPayloadDate(date) : null });
   };
 
-  const handleTargetDate = (date: Date | null) => {
+  const handleTargetDate = async (date: Date | null) => {
     if (updateIssue)
-      updateIssue(issue.project_id, issue.id, { target_date: date ? renderFormattedPayloadDate(date) : null }).then(
-        () => {
-          captureSuccess({
-            eventName: WORK_ITEM_TRACKER_EVENTS.update,
-            payload: { id: issue.id },
-          });
-        }
-      );
+      await updateIssue(issue.project_id, issue.id, { target_date: date ? renderFormattedPayloadDate(date) : null });
   };
 
-  const handleEstimate = (value: string | undefined) => {
-    if (updateIssue)
-      updateIssue(issue.project_id, issue.id, { estimate_point: value }).then(() => {
-        captureSuccess({
-          eventName: WORK_ITEM_TRACKER_EVENTS.update,
-          payload: { id: issue.id },
-        });
-      });
+  const handleEstimate = async (value: string | undefined) => {
+    if (updateIssue) await updateIssue(issue.project_id, issue.id, { estimate_point: value });
   };
 
   const workItemLink = generateWorkItemLink({
@@ -270,7 +218,6 @@ export const IssueProperties = observer(function IssueProperties(props: IIssuePr
             onChange={handlePriority}
             disabled={isReadOnly}
             buttonVariant="border-without-text"
-            buttonClassName="border"
             renderByDefault={isMobile}
             showTooltip
           />
@@ -299,8 +246,10 @@ export const IssueProperties = observer(function IssueProperties(props: IIssuePr
             isClearable
             mergeDates
             buttonVariant={issue.start_date || issue.target_date ? "border-with-text" : "border-without-text"}
-            buttonClassName={shouldHighlightIssueDueDate(issue.target_date, stateDetails?.group) ? "text-red-500" : ""}
-            clearIconClassName="!text-custom-text-100"
+            buttonClassName={
+              shouldHighlightIssueDueDate(issue.target_date, stateDetails?.group) ? "text-danger-primary" : ""
+            }
+            clearIconClassName="text-primary!"
             disabled={isReadOnly}
             renderByDefault={isMobile}
             showTooltip
@@ -328,6 +277,7 @@ export const IssueProperties = observer(function IssueProperties(props: IIssuePr
             disabled={isReadOnly}
             renderByDefault={isMobile}
             showTooltip
+            labelClassName="text-caption-sm-regular"
           />
         </div>
       </WithDisplayPropertiesHOC>
@@ -344,14 +294,17 @@ export const IssueProperties = observer(function IssueProperties(props: IIssuePr
             onChange={handleTargetDate}
             minDate={minDate}
             placeholder={t("common.order_by.due_date")}
-            icon={<DueDatePropertyIcon className="h-3 w-3 flex-shrink-0" />}
+            icon={<DueDatePropertyIcon className="h-3 w-3 shrink-0" />}
             buttonVariant={issue.target_date ? "border-with-text" : "border-without-text"}
-            buttonClassName={shouldHighlightIssueDueDate(issue.target_date, stateDetails?.group) ? "text-red-500" : ""}
-            clearIconClassName="!text-custom-text-100"
+            buttonClassName={
+              shouldHighlightIssueDueDate(issue.target_date, stateDetails?.group) ? "text-danger-primary" : ""
+            }
+            clearIconClassName="text-primary!"
             optionsClassName="z-10"
             disabled={isReadOnly}
             renderByDefault={isMobile}
             showTooltip
+            labelClassName="text-caption-sm-regular"
           />
         </div>
       </WithDisplayPropertiesHOC>
@@ -459,14 +412,14 @@ export const IssueProperties = observer(function IssueProperties(props: IIssuePr
                 if (subIssueCount) redirectToIssueDetail();
               }}
               className={cn(
-                "flex h-5 flex-shrink-0 items-center justify-center gap-2 overflow-hidden rounded border-[0.5px] border-custom-border-300 px-2.5 py-1",
+                "flex h-5 flex-shrink-0 items-center justify-center gap-2 overflow-hidden rounded-sm border-[0.5px] border-strong px-2.5 py-1",
                 {
-                  "hover:bg-custom-background-80 cursor-pointer": subIssueCount,
+                  "cursor-pointer hover:bg-layer-1": subIssueCount,
                 }
               )}
             >
               <ViewsIcon className="h-3 w-3 flex-shrink-0" strokeWidth={2} />
-              <div className="text-xs">{subIssueCount}</div>
+              <div className="text-caption-sm-regular">{subIssueCount}</div>
             </div>
           </Tooltip>
         </WithDisplayPropertiesHOC>
@@ -485,12 +438,12 @@ export const IssueProperties = observer(function IssueProperties(props: IIssuePr
           renderByDefault={false}
         >
           <div
-            className="flex h-5 flex-shrink-0 items-center justify-center gap-2 overflow-hidden rounded border-[0.5px] border-custom-border-300 px-2.5 py-1"
+            className="flex h-5 flex-shrink-0 items-center justify-center gap-2 overflow-hidden rounded-sm border-[0.5px] border-strong px-2.5 py-1"
             onFocus={handleEventPropagation}
             onClick={handleEventPropagation}
           >
             <Paperclip className="h-3 w-3 flex-shrink-0" strokeWidth={2} />
-            <div className="text-xs">{issue.attachment_count}</div>
+            <div className="text-caption-sm-regular">{issue.attachment_count}</div>
           </div>
         </Tooltip>
       </WithDisplayPropertiesHOC>
@@ -508,12 +461,12 @@ export const IssueProperties = observer(function IssueProperties(props: IIssuePr
           renderByDefault={false}
         >
           <div
-            className="flex h-5 flex-shrink-0 items-center justify-center gap-2 overflow-hidden rounded border-[0.5px] border-custom-border-300 px-2.5 py-1"
+            className="flex h-5 flex-shrink-0 items-center justify-center gap-2 overflow-hidden rounded-sm border-[0.5px] border-strong px-2.5 py-1"
             onFocus={handleEventPropagation}
             onClick={handleEventPropagation}
           >
-            <Link className="h-3 w-3 flex-shrink-0" strokeWidth={2} />
-            <div className="text-xs">{issue.link_count}</div>
+            <LinkIcon className="h-3 w-3 flex-shrink-0" strokeWidth={2} />
+            <div className="text-caption-sm-regular">{issue.link_count}</div>
           </div>
         </Tooltip>
       </WithDisplayPropertiesHOC>
diff --git a/apps/web/core/components/issues/issue-layouts/properties/index.ts b/apps/web/core/components/issues/issue-layouts/properties/index.ts
index 668979012..c45303fa5 100644
--- a/apps/web/core/components/issues/issue-layouts/properties/index.ts
+++ b/apps/web/core/components/issues/issue-layouts/properties/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./labels";
 export * from "./all-properties";
 export * from "./label-dropdown";
diff --git a/apps/web/core/components/issues/issue-layouts/properties/label-dropdown.tsx b/apps/web/core/components/issues/issue-layouts/properties/label-dropdown.tsx
index 5b5769bcb..a259a3281 100644
--- a/apps/web/core/components/issues/issue-layouts/properties/label-dropdown.tsx
+++ b/apps/web/core/components/issues/issue-layouts/properties/label-dropdown.tsx
@@ -1,19 +1,26 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import type { Placement } from "@popperjs/core";
 import { useParams } from "next/navigation";
 import { usePopper } from "react-popper";
-import { Check, Loader, Search } from "lucide-react";
+import { Loader } from "lucide-react";
 import { Combobox } from "@headlessui/react";
 // plane imports
 import { EUserPermissionsLevel, getRandomLabelColor } from "@plane/constants";
 import { useOutsideClickDetector } from "@plane/hooks";
 import { useTranslation } from "@plane/i18n";
-import { ChevronDownIcon } from "@plane/propel/icons";
+import { CheckIcon, SearchIcon, ChevronDownIcon } from "@plane/propel/icons";
 // types
 import type { IIssueLabel } from "@plane/types";
 import { EUserProjectRoles } from "@plane/types";
 // components
 import { ComboDropDown } from "@plane/ui";
+import { sortBySelectedFirst } from "@plane/utils";
 // hooks
 import { useLabel } from "@/hooks/store/use-label";
 import { useUserPermissions } from "@/hooks/store/user";
@@ -112,8 +119,11 @@ export function LabelDropdown(props: ILabelDropdownProps) {
 
   const filteredOptions = useMemo(
     () =>
-      query === "" ? options : options?.filter((option) => option.query.toLowerCase().includes(query.toLowerCase())),
-    [options, query]
+      sortBySelectedFirst(
+        query === "" ? options : options?.filter((option) => option.query.toLowerCase().includes(query.toLowerCase())),
+        value
+      ),
+    [options, query, value]
   );
 
   const { styles, attributes } = usePopper(referenceElement, popperElement, {
@@ -130,14 +140,18 @@ export function LabelDropdown(props: ILabelDropdownProps) {
 
   const onOpen = useCallback(() => {
     if (!storeLabels && workspaceSlug && projectId)
-      fetchProjectLabels(workspaceSlug, projectId).then(() => setIsLoading(false));
-  }, [storeLabels, workspaceSlug, projectId, fetchProjectLabels]);
+      fetchProjectLabels(workspaceSlug, projectId)
+        .then(() => setIsLoading(false))
+        .catch(() => {
+          setIsLoading(false);
+        });
+  }, [storeLabels, workspaceSlug, projectId, fetchProjectLabels, setIsLoading]);
 
   const toggleDropdown = useCallback(() => {
     if (!isOpen) onOpen();
     setIsOpen((prevIsOpen) => !prevIsOpen);
     if (isOpen && onClose) onClose();
-  }, [onOpen, onClose, isOpen]);
+  }, [onOpen, onClose, isOpen, setIsOpen]);
 
   const handleClose = () => {
     if (!isOpen) return;
@@ -159,6 +173,7 @@ export function LabelDropdown(props: ILabelDropdownProps) {
     e.stopPropagation();
     if (query !== "" && e.key === "Escape") {
       setQuery("");
+      e.preventDefault();
     }
 
     if (query !== "" && e.key === "Enter" && !e.nativeEvent.isComposing && canCreateLabel) {
@@ -190,13 +205,13 @@ export function LabelDropdown(props: ILabelDropdownProps) {
       <button
         ref={setReferenceElement}
         type="button"
-        className={`clickable flex w-full h-full items-center justify-center gap-1 text-xs ${fullWidth && "hover:bg-custom-background-80"} ${
+        className={`clickable flex h-full w-full items-center justify-center gap-1 text-caption-sm-regular ${fullWidth && "hover:bg-layer-1"} ${
           disabled
-            ? "cursor-not-allowed text-custom-text-200"
+            ? "cursor-not-allowed text-secondary"
             : value.length <= maxRender
               ? "cursor-pointer"
-              : "cursor-pointer hover:bg-custom-background-80"
-        }  ${buttonClassName}`}
+              : "cursor-pointer hover:bg-layer-1"
+        } ${buttonClassName}`}
         onClick={handleOnClick}
         disabled={disabled}
       >
@@ -204,7 +219,17 @@ export function LabelDropdown(props: ILabelDropdownProps) {
         {!hideDropdownArrow && !disabled && <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />}
       </button>
     ),
-    [buttonClassName, disabled, fullWidth, handleOnClick, hideDropdownArrow, label, maxRender, value.length]
+    [
+      buttonClassName,
+      disabled,
+      fullWidth,
+      handleOnClick,
+      hideDropdownArrow,
+      label,
+      maxRender,
+      value.length,
+      setReferenceElement,
+    ]
   );
 
   const preventPropagation = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
@@ -217,7 +242,7 @@ export function LabelDropdown(props: ILabelDropdownProps) {
       <ComboDropDown
         as="div"
         ref={dropdownRef}
-        className={`w-auto max-w-full h-full flex-shrink-0 text-left ${className}`}
+        className={`h-full w-auto max-w-full flex-shrink-0 text-left ${className}`}
         value={value}
         onChange={onChange}
         disabled={disabled}
@@ -229,16 +254,16 @@ export function LabelDropdown(props: ILabelDropdownProps) {
         {isOpen && (
           <Combobox.Options className="fixed z-10" static>
             <div
-              className={`z-10 my-1 w-48 h-auto whitespace-nowrap rounded border border-custom-border-300 bg-custom-background-100 px-2 py-2.5 text-xs shadow-custom-shadow-rg focus:outline-none ${optionsClassName}`}
+              className={`z-10 my-1 h-auto w-48 rounded-sm border border-strong bg-surface-1 px-2 py-2.5 text-caption-sm-regular whitespace-nowrap shadow-raised-200 focus:outline-none ${optionsClassName}`}
               ref={setPopperElement}
               style={styles.popper}
               {...attributes.popper}
             >
-              <div className="flex w-full items-center justify-start rounded border border-custom-border-200 bg-custom-background-90 px-2">
-                <Search className="h-3.5 w-3.5 text-custom-text-300" />
+              <div className="flex w-full items-center justify-start rounded-sm border border-subtle bg-surface-2 px-2">
+                <SearchIcon className="h-3.5 w-3.5 text-tertiary" />
                 <Combobox.Input
                   ref={inputRef}
-                  className="w-full bg-transparent px-2 py-1 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
+                  className="w-full bg-transparent px-2 py-1 text-caption-sm-regular text-secondary placeholder:text-placeholder focus:outline-none"
                   value={query}
                   onChange={(e) => setQuery(e.target.value)}
                   placeholder={t("common.search.label")}
@@ -248,8 +273,8 @@ export function LabelDropdown(props: ILabelDropdownProps) {
               </div>
               <div className={`mt-2 max-h-48 space-y-1 overflow-y-scroll`}>
                 {isLoading ? (
-                  <p className="text-center text-custom-text-200">{t("common.loading")}</p>
-                ) : filteredOptions.length > 0 ? (
+                  <p className="text-center text-secondary">{t("common.loading")}</p>
+                ) : filteredOptions && filteredOptions.length > 0 ? (
                   filteredOptions.map((option) => (
                     <Combobox.Option
                       key={option.value}
@@ -261,9 +286,9 @@ export function LabelDropdown(props: ILabelDropdownProps) {
                         }
                       }}
                       className={({ active, selected }) =>
-                        `flex cursor-pointer select-none items-center justify-between gap-2 truncate rounded px-1 py-1.5 hover:bg-custom-background-80 ${
-                          active ? "bg-custom-background-80" : ""
-                        } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
+                        `flex cursor-pointer items-center justify-between gap-2 truncate rounded-sm px-1 py-1.5 select-none hover:bg-layer-1 ${
+                          active ? "bg-layer-1" : ""
+                        } ${selected ? "text-primary" : "text-secondary"}`
                       }
                     >
                       {({ selected }) => (
@@ -271,7 +296,7 @@ export function LabelDropdown(props: ILabelDropdownProps) {
                           {option.content}
                           {selected && (
                             <div className="flex-shrink-0">
-                              <Check className={`h-3.5 w-3.5`} />
+                              <CheckIcon className={`h-3.5 w-3.5`} />
                             </div>
                           )}
                         </>
@@ -279,26 +304,26 @@ export function LabelDropdown(props: ILabelDropdownProps) {
                     </Combobox.Option>
                   ))
                 ) : submitting ? (
-                  <Loader className="animate-spin h-3.5 w-3.5" />
+                  <Loader className="h-3.5 w-3.5 animate-spin" />
                 ) : canCreateLabel ? (
                   <p
                     onClick={() => {
                       if (!query.length) return;
                       handleAddLabel(query);
                     }}
-                    className={`text-left text-custom-text-200 ${query.length ? "cursor-pointer" : "cursor-default"}`}
+                    className={`text-left text-secondary ${query.length ? "cursor-pointer" : "cursor-default"}`}
                   >
                     {/* TODO: translate here */}
                     {query.length ? (
                       <>
-                        + Add <span className="text-custom-text-100">&quot;{query}&quot;</span> to labels
+                        + Add <span className="text-primary">&quot;{query}&quot;</span> to labels
                       </>
                     ) : (
                       t("label.create.type")
                     )}
                   </p>
                 ) : (
-                  <p className="text-left text-custom-text-200 ">{t("common.search.no_matching_results")}</p>
+                  <p className="text-left text-secondary">{t("common.search.no_matching_results")}</p>
                 )}
               </div>
             </div>
diff --git a/apps/web/core/components/issues/issue-layouts/properties/labels.tsx b/apps/web/core/components/issues/issue-layouts/properties/labels.tsx
index 0a7cf045e..816e42837 100644
--- a/apps/web/core/components/issues/issue-layouts/properties/labels.tsx
+++ b/apps/web/core/components/issues/issue-layouts/properties/labels.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useEffect, useRef, useState } from "react";
 import type { Placement } from "@popperjs/core";
 import { observer } from "mobx-react";
@@ -56,8 +62,8 @@ const NoLabel = observer(function NoLabel({ isMobile, noLabelBorder, fullWidth,
     >
       <div
         className={cn(
-          "flex h-full items-center justify-center gap-2 rounded px-2.5 py-1 text-xs hover:bg-custom-background-80",
-          noLabelBorder ? "rounded-none" : "border-[0.5px] border-custom-border-300",
+          "flex h-full items-center justify-center gap-2 rounded-sm px-2.5 py-1 text-caption-sm-regular hover:bg-layer-1",
+          noLabelBorder ? "rounded-none" : "border-[0.5px] border-strong",
           fullWidth && "w-full"
         )}
       >
@@ -82,9 +88,9 @@ function LabelSummary({ isMobile, fullWidth, noLabelBorder, disabled, projectLab
   return (
     <div
       className={cn(
-        "flex h-5 flex-shrink-0 items-center justify-center rounded px-2.5 text-xs",
+        "flex h-5 flex-shrink-0 items-center justify-center rounded-sm px-2.5 text-caption-sm-regular",
         fullWidth && "w-full",
-        noLabelBorder ? "rounded-none" : "border-[0.5px] border-custom-border-300",
+        noLabelBorder ? "rounded-none" : "border-[0.5px] border-strong",
         disabled ? "cursor-not-allowed" : "cursor-pointer"
       )}
     >
@@ -98,8 +104,8 @@ function LabelSummary({ isMobile, fullWidth, noLabelBorder, disabled, projectLab
           .join(", ")}
         renderByDefault={false}
       >
-        <div className="flex h-full items-center gap-1.5 text-custom-text-200">
-          <span className="h-2 w-2 flex-shrink-0 rounded-full bg-custom-primary" />
+        <div className="flex h-full items-center gap-1.5 text-secondary">
+          <span className="h-2 w-2 flex-shrink-0 rounded-full bg-accent-primary" />
           {`${value.length} Labels`}
         </div>
       </Tooltip>
@@ -136,13 +142,13 @@ const LabelItem = observer(function LabelItem({
     >
       <div
         className={cn(
-          "flex overflow-hidden justify-center hover:bg-custom-background-80 max-w-full h-full flex-shrink-0 items-center rounded px-2.5 text-xs",
+          "flex h-full max-w-full flex-shrink-0 items-center justify-center overflow-hidden rounded-sm px-2.5 text-caption-sm-regular hover:bg-layer-1",
           !disabled && "cursor-pointer",
           fullWidth && "w-full",
-          noLabelBorder ? "rounded-none" : "border-[0.5px] border-custom-border-300"
+          noLabelBorder ? "rounded-none" : "border-[0.5px] border-strong"
         )}
       >
-        <div className="flex max-w-full items-center gap-1.5 overflow-hidden text-custom-text-200">
+        <div className="flex max-w-full items-center gap-1.5 overflow-hidden text-secondary">
           <span
             className="h-2 w-2 flex-shrink-0 rounded-full"
             style={{
diff --git a/apps/web/core/components/issues/issue-layouts/properties/with-display-properties-HOC.tsx b/apps/web/core/components/issues/issue-layouts/properties/with-display-properties-HOC.tsx
index 4745942e1..dbabad499 100644
--- a/apps/web/core/components/issues/issue-layouts/properties/with-display-properties-HOC.tsx
+++ b/apps/web/core/components/issues/issue-layouts/properties/with-display-properties-HOC.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { ReactNode } from "react";
 import { observer } from "mobx-react";
 import type { IIssueDisplayProperties } from "@plane/types";
diff --git a/apps/web/core/components/issues/issue-layouts/quick-action-dropdowns/all-issue.tsx b/apps/web/core/components/issues/issue-layouts/quick-action-dropdowns/all-issue.tsx
index 3b7d80210..91fc2e264 100644
--- a/apps/web/core/components/issues/issue-layouts/quick-action-dropdowns/all-issue.tsx
+++ b/apps/web/core/components/issues/issue-layouts/quick-action-dropdowns/all-issue.tsx
@@ -1,16 +1,20 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useState } from "react";
 import { omit } from "lodash-es";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // plane imports
-import { ARCHIVABLE_STATE_GROUPS, WORK_ITEM_TRACKER_ELEMENTS } from "@plane/constants";
+import { ARCHIVABLE_STATE_GROUPS } from "@plane/constants";
 import type { TIssue } from "@plane/types";
 import { EIssuesStoreType } from "@plane/types";
-import type { TContextMenuItem } from "@plane/ui";
 import { ContextMenu, CustomMenu } from "@plane/ui";
 import { cn } from "@plane/utils";
 // hooks
-import { captureClick } from "@/helpers/event-tracker.helper";
 import { useProject } from "@/hooks/store/use-project";
 import { useProjectState } from "@/hooks/store/use-project-state";
 // plane-web components
@@ -88,9 +92,7 @@ export const AllIssueQuickActions = observer(function AllIssueQuickActions(props
   const CONTEXT_MENU_ITEMS = MENU_ITEMS.map(function CONTEXT_MENU_ITEMS(item) {
     return {
       ...item,
-
       onClick: () => {
-        captureClick({ elementName: WORK_ITEM_TRACKER_ELEMENTS.QUICK_ACTIONS.GLOBAL_VIEW });
         item.action();
       },
     };
@@ -158,8 +160,8 @@ export const AllIssueQuickActions = observer(function AllIssueQuickActions(props
                     <h5>{item.title}</h5>
                     {item.description && (
                       <p
-                        className={cn("text-custom-text-300 whitespace-pre-line", {
-                          "text-custom-text-400": item.disabled,
+                        className={cn("whitespace-pre-line text-tertiary", {
+                          "text-placeholder": item.disabled,
                         })}
                       >
                         {item.description}
@@ -171,7 +173,7 @@ export const AllIssueQuickActions = observer(function AllIssueQuickActions(props
                 className={cn(
                   "flex items-center gap-2",
                   {
-                    "text-custom-text-400": item.disabled,
+                    "text-placeholder": item.disabled,
                   },
                   item.className
                 )}
@@ -180,13 +182,12 @@ export const AllIssueQuickActions = observer(function AllIssueQuickActions(props
                   <CustomMenu.MenuItem
                     key={nestedItem.key}
                     onClick={() => {
-                      captureClick({ elementName: WORK_ITEM_TRACKER_ELEMENTS.QUICK_ACTIONS.GLOBAL_VIEW });
                       nestedItem.action();
                     }}
                     className={cn(
                       "flex items-center gap-2",
                       {
-                        "text-custom-text-400": nestedItem.disabled,
+                        "text-placeholder": nestedItem.disabled,
                       },
                       nestedItem.className
                     )}
@@ -197,8 +198,8 @@ export const AllIssueQuickActions = observer(function AllIssueQuickActions(props
                       <h5>{nestedItem.title}</h5>
                       {nestedItem.description && (
                         <p
-                          className={cn("text-custom-text-300 whitespace-pre-line", {
-                            "text-custom-text-400": nestedItem.disabled,
+                          className={cn("whitespace-pre-line text-tertiary", {
+                            "text-placeholder": nestedItem.disabled,
                           })}
                         >
                           {nestedItem.description}
@@ -216,13 +217,12 @@ export const AllIssueQuickActions = observer(function AllIssueQuickActions(props
             <CustomMenu.MenuItem
               key={item.key}
               onClick={() => {
-                captureClick({ elementName: WORK_ITEM_TRACKER_ELEMENTS.QUICK_ACTIONS.GLOBAL_VIEW });
                 item.action();
               }}
               className={cn(
                 "flex items-center gap-2",
                 {
-                  "text-custom-text-400": item.disabled,
+                  "text-placeholder": item.disabled,
                 },
                 item.className
               )}
@@ -233,8 +233,8 @@ export const AllIssueQuickActions = observer(function AllIssueQuickActions(props
                 <h5>{item.title}</h5>
                 {item.description && (
                   <p
-                    className={cn("text-custom-text-300 whitespace-pre-line", {
-                      "text-custom-text-400": item.disabled,
+                    className={cn("whitespace-pre-line text-tertiary", {
+                      "text-placeholder": item.disabled,
                     })}
                   >
                     {item.description}
diff --git a/apps/web/core/components/issues/issue-layouts/quick-action-dropdowns/archived-issue.tsx b/apps/web/core/components/issues/issue-layouts/quick-action-dropdowns/archived-issue.tsx
index edc0ca80e..beb885bdd 100644
--- a/apps/web/core/components/issues/issue-layouts/quick-action-dropdowns/archived-issue.tsx
+++ b/apps/web/core/components/issues/issue-layouts/quick-action-dropdowns/archived-issue.tsx
@@ -1,14 +1,18 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // ui
-import { EUserPermissions, EUserPermissionsLevel, WORK_ITEM_TRACKER_ELEMENTS } from "@plane/constants";
+import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { EIssuesStoreType } from "@plane/types";
-import type { TContextMenuItem } from "@plane/ui";
 import { ContextMenu, CustomMenu } from "@plane/ui";
 import { cn } from "@plane/utils";
 // hooks
-import { captureClick } from "@/helpers/event-tracker.helper";
 import { useIssues } from "@/hooks/store/use-issues";
 import { useUserPermissions } from "@/hooks/store/user";
 // local imports
@@ -66,7 +70,6 @@ export const ArchivedIssueQuickActions = observer(function ArchivedIssueQuickAct
       ...item,
 
       onClick: () => {
-        captureClick({ elementName: WORK_ITEM_TRACKER_ELEMENTS.QUICK_ACTIONS.ARCHIVED });
         item.action();
       },
     };
@@ -99,12 +102,11 @@ export const ArchivedIssueQuickActions = observer(function ArchivedIssueQuickAct
               key={item.key}
               onClick={() => {
                 item.action();
-                captureClick({ elementName: WORK_ITEM_TRACKER_ELEMENTS.QUICK_ACTIONS.ARCHIVED });
               }}
               className={cn(
                 "flex items-center gap-2",
                 {
-                  "text-custom-text-400": item.disabled,
+                  "text-placeholder": item.disabled,
                 },
                 item.className
               )}
@@ -115,8 +117,8 @@ export const ArchivedIssueQuickActions = observer(function ArchivedIssueQuickAct
                 <h5>{item.title}</h5>
                 {item.description && (
                   <p
-                    className={cn("text-custom-text-300 whitespace-pre-line", {
-                      "text-custom-text-400": item.disabled,
+                    className={cn("whitespace-pre-line text-tertiary", {
+                      "text-placeholder": item.disabled,
                     })}
                   >
                     {item.description}
diff --git a/apps/web/core/components/issues/issue-layouts/quick-action-dropdowns/cycle-issue.tsx b/apps/web/core/components/issues/issue-layouts/quick-action-dropdowns/cycle-issue.tsx
index 0a7fe5064..bcd9ed8f8 100644
--- a/apps/web/core/components/issues/issue-layouts/quick-action-dropdowns/cycle-issue.tsx
+++ b/apps/web/core/components/issues/issue-layouts/quick-action-dropdowns/cycle-issue.tsx
@@ -1,21 +1,20 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useState } from "react";
 import { omit } from "lodash-es";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // plane imports
-import {
-  ARCHIVABLE_STATE_GROUPS,
-  EUserPermissions,
-  EUserPermissionsLevel,
-  WORK_ITEM_TRACKER_ELEMENTS,
-} from "@plane/constants";
+import { ARCHIVABLE_STATE_GROUPS, EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import type { TIssue } from "@plane/types";
 import { EIssuesStoreType } from "@plane/types";
-import type { TContextMenuItem } from "@plane/ui";
 import { ContextMenu, CustomMenu } from "@plane/ui";
 import { cn } from "@plane/utils";
 // hooks
-import { captureClick } from "@/helpers/event-tracker.helper";
 import { useIssues } from "@/hooks/store/use-issues";
 import { useProject } from "@/hooks/store/use-project";
 import { useProjectState } from "@/hooks/store/use-project-state";
@@ -107,7 +106,6 @@ export const CycleIssueQuickActions = observer(function CycleIssueQuickActions(p
       ...item,
 
       onClick: () => {
-        captureClick({ elementName: WORK_ITEM_TRACKER_ELEMENTS.QUICK_ACTIONS.CYCLE });
         item.action();
       },
     };
@@ -175,8 +173,8 @@ export const CycleIssueQuickActions = observer(function CycleIssueQuickActions(p
                     <h5>{item.title}</h5>
                     {item.description && (
                       <p
-                        className={cn("text-custom-text-300 whitespace-pre-line", {
-                          "text-custom-text-400": item.disabled,
+                        className={cn("whitespace-pre-line text-tertiary", {
+                          "text-placeholder": item.disabled,
                         })}
                       >
                         {item.description}
@@ -188,7 +186,7 @@ export const CycleIssueQuickActions = observer(function CycleIssueQuickActions(p
                 className={cn(
                   "flex items-center gap-2",
                   {
-                    "text-custom-text-400": item.disabled,
+                    "text-placeholder": item.disabled,
                   },
                   item.className
                 )}
@@ -197,13 +195,12 @@ export const CycleIssueQuickActions = observer(function CycleIssueQuickActions(p
                   <CustomMenu.MenuItem
                     key={nestedItem.key}
                     onClick={() => {
-                      captureClick({ elementName: WORK_ITEM_TRACKER_ELEMENTS.QUICK_ACTIONS.CYCLE });
                       nestedItem.action();
                     }}
                     className={cn(
                       "flex items-center gap-2",
                       {
-                        "text-custom-text-400": nestedItem.disabled,
+                        "text-placeholder": nestedItem.disabled,
                       },
                       nestedItem.className
                     )}
@@ -214,8 +211,8 @@ export const CycleIssueQuickActions = observer(function CycleIssueQuickActions(p
                       <h5>{nestedItem.title}</h5>
                       {nestedItem.description && (
                         <p
-                          className={cn("text-custom-text-300 whitespace-pre-line", {
-                            "text-custom-text-400": nestedItem.disabled,
+                          className={cn("whitespace-pre-line text-tertiary", {
+                            "text-placeholder": nestedItem.disabled,
                           })}
                         >
                           {nestedItem.description}
@@ -233,13 +230,12 @@ export const CycleIssueQuickActions = observer(function CycleIssueQuickActions(p
             <CustomMenu.MenuItem
               key={item.key}
               onClick={() => {
-                captureClick({ elementName: WORK_ITEM_TRACKER_ELEMENTS.QUICK_ACTIONS.CYCLE });
                 item.action();
               }}
               className={cn(
                 "flex items-center gap-2",
                 {
-                  "text-custom-text-400": item.disabled,
+                  "text-placeholder": item.disabled,
                 },
                 item.className
               )}
@@ -250,8 +246,8 @@ export const CycleIssueQuickActions = observer(function CycleIssueQuickActions(p
                 <h5>{item.title}</h5>
                 {item.description && (
                   <p
-                    className={cn("text-custom-text-300 whitespace-pre-line", {
-                      "text-custom-text-400": item.disabled,
+                    className={cn("whitespace-pre-line text-tertiary", {
+                      "text-placeholder": item.disabled,
                     })}
                   >
                     {item.description}
diff --git a/apps/web/core/components/issues/issue-layouts/quick-action-dropdowns/helper.tsx b/apps/web/core/components/issues/issue-layouts/quick-action-dropdowns/helper.tsx
index 56affbdf0..a7f33baac 100644
--- a/apps/web/core/components/issues/issue-layouts/quick-action-dropdowns/helper.tsx
+++ b/apps/web/core/components/issues/issue-layouts/quick-action-dropdowns/helper.tsx
@@ -1,8 +1,14 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useMemo } from "react";
-import { Copy, ExternalLink, Link, Pencil, Trash2, XCircle, ArchiveRestoreIcon } from "lucide-react";
+import { XCircle, ArchiveRestoreIcon } from "lucide-react";
 // plane imports
 import { useTranslation } from "@plane/i18n";
-import { ArchiveIcon } from "@plane/propel/icons";
+import { LinkIcon, CopyIcon, NewTabIcon, EditIcon, ArchiveIcon, TrashIcon } from "@plane/propel/icons";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { EIssuesStoreType, TIssue } from "@plane/types";
 import type { TContextMenuItem } from "@plane/ui";
@@ -155,7 +161,7 @@ export const useMenuItemFactory = (props: MenuItemFactoryProps) => {
   const createEditMenuItem = (customEditAction?: () => void): TContextMenuItem => ({
     key: "edit",
     title: t("common.actions.edit"),
-    icon: Pencil,
+    icon: EditIcon,
     action:
       customEditAction ||
       (() => {
@@ -169,7 +175,7 @@ export const useMenuItemFactory = (props: MenuItemFactoryProps) => {
     const baseItem = {
       key: "make-a-copy",
       title: t("common.actions.make_a_copy"),
-      icon: Copy,
+      icon: CopyIcon,
       action: () => {
         setCreateUpdateIssueModal(true);
       },
@@ -188,14 +194,14 @@ export const useMenuItemFactory = (props: MenuItemFactoryProps) => {
   const createOpenInNewTabMenuItem = (): TContextMenuItem => ({
     key: "open-in-new-tab",
     title: t("common.actions.open_in_new_tab"),
-    icon: ExternalLink,
+    icon: NewTabIcon,
     action: actionHandlers.handleOpenInNewTab,
   });
 
   const createCopyLinkMenuItem = (): TContextMenuItem => ({
     key: "copy-link",
     title: t("common.actions.copy_link"),
-    icon: Link,
+    icon: LinkIcon,
     action: actionHandlers.handleCopyIssueLink,
   });
 
@@ -238,7 +244,7 @@ export const useMenuItemFactory = (props: MenuItemFactoryProps) => {
   const createDeleteMenuItem = (): TContextMenuItem => ({
     key: "delete",
     title: t("common.actions.delete"),
-    icon: Trash2,
+    icon: TrashIcon,
     action: () => {
       setDeleteIssueModal(true);
     },
diff --git a/apps/web/core/components/issues/issue-layouts/quick-action-dropdowns/index.ts b/apps/web/core/components/issues/issue-layouts/quick-action-dropdowns/index.ts
index 19147a0ad..0a7b1695e 100644
--- a/apps/web/core/components/issues/issue-layouts/quick-action-dropdowns/index.ts
+++ b/apps/web/core/components/issues/issue-layouts/quick-action-dropdowns/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./all-issue";
 export * from "./archived-issue";
 export * from "./cycle-issue";
diff --git a/apps/web/core/components/issues/issue-layouts/quick-action-dropdowns/issue-detail.tsx b/apps/web/core/components/issues/issue-layouts/quick-action-dropdowns/issue-detail.tsx
index 8d97a6a11..ab3910196 100644
--- a/apps/web/core/components/issues/issue-layouts/quick-action-dropdowns/issue-detail.tsx
+++ b/apps/web/core/components/issues/issue-layouts/quick-action-dropdowns/issue-detail.tsx
@@ -1,21 +1,21 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useState } from "react";
 import { omit } from "lodash-es";
 import { observer } from "mobx-react";
-import { useParams, usePathname } from "next/navigation";
+import { useParams } from "next/navigation";
+import { Ellipsis } from "lucide-react";
 // plane imports
-import {
-  ARCHIVABLE_STATE_GROUPS,
-  EUserPermissions,
-  EUserPermissionsLevel,
-  WORK_ITEM_TRACKER_ELEMENTS,
-} from "@plane/constants";
+import { ARCHIVABLE_STATE_GROUPS, EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import type { TIssue } from "@plane/types";
 import { EIssuesStoreType } from "@plane/types";
-import type { TContextMenuItem } from "@plane/ui";
 import { ContextMenu, CustomMenu } from "@plane/ui";
 import { cn } from "@plane/utils";
 // hooks
-import { captureClick } from "@/helpers/event-tracker.helper";
 import { useIssues } from "@/hooks/store/use-issues";
 import { useProject } from "@/hooks/store/use-project";
 import { useProjectState } from "@/hooks/store/use-project-state";
@@ -29,6 +29,7 @@ import { CreateUpdateIssueModal } from "../../issue-modal/modal";
 import type { IQuickActionProps } from "../list/list-view-types";
 import type { MenuItemFactoryProps } from "./helper";
 import { useWorkItemDetailMenuItems } from "./helper";
+import { IconButton } from "@plane/propel/icon-button";
 
 type TWorkItemDetailQuickActionProps = IQuickActionProps & {
   toggleEditIssueModal?: (value: boolean) => void;
@@ -47,7 +48,6 @@ export const WorkItemDetailQuickActions = observer(function WorkItemDetailQuickA
     handleUpdate,
     handleArchive,
     handleRestore,
-    customActionButton,
     portalElement,
     readOnly = false,
     placements = "bottom-end",
@@ -60,7 +60,6 @@ export const WorkItemDetailQuickActions = observer(function WorkItemDetailQuickA
   } = props;
   // router
   const { workspaceSlug } = useParams();
-  const pathname = usePathname();
   // states
   const [createUpdateIssueModal, setCreateUpdateIssueModal] = useState(false);
   const [issueToEdit, setIssueToEdit] = useState<TIssue | undefined>(undefined);
@@ -185,7 +184,6 @@ export const WorkItemDetailQuickActions = observer(function WorkItemDetailQuickA
       ...item,
 
       onClick: () => {
-        captureClick({ elementName: WORK_ITEM_TRACKER_ELEMENTS.QUICK_ACTIONS.PROJECT_VIEW });
         item.action();
       },
     };
@@ -243,7 +241,7 @@ export const WorkItemDetailQuickActions = observer(function WorkItemDetailQuickA
       <CustomMenu
         ellipsis
         placement={placements}
-        customButton={customActionButton}
+        customButton={<IconButton size="lg" variant="secondary" icon={Ellipsis} />}
         portalElement={portalElement}
         menuItemsClassName="z-[14]"
         maxHeight="lg"
@@ -263,8 +261,8 @@ export const WorkItemDetailQuickActions = observer(function WorkItemDetailQuickA
                     <h5>{item.title}</h5>
                     {item.description && (
                       <p
-                        className={cn("text-custom-text-300 whitespace-pre-line", {
-                          "text-custom-text-400": item.disabled,
+                        className={cn("whitespace-pre-line text-tertiary", {
+                          "text-placeholder": item.disabled,
                         })}
                       >
                         {item.description}
@@ -276,7 +274,7 @@ export const WorkItemDetailQuickActions = observer(function WorkItemDetailQuickA
                 className={cn(
                   "flex items-center gap-2",
                   {
-                    "text-custom-text-400": item.disabled,
+                    "text-placeholder": item.disabled,
                   },
                   item.className
                 )}
@@ -285,13 +283,12 @@ export const WorkItemDetailQuickActions = observer(function WorkItemDetailQuickA
                   <CustomMenu.MenuItem
                     key={nestedItem.key}
                     onClick={() => {
-                      captureClick({ elementName: WORK_ITEM_TRACKER_ELEMENTS.QUICK_ACTIONS.PROJECT_VIEW });
                       nestedItem.action();
                     }}
                     className={cn(
                       "flex items-center gap-2",
                       {
-                        "text-custom-text-400": nestedItem.disabled,
+                        "text-placeholder": nestedItem.disabled,
                       },
                       nestedItem.className
                     )}
@@ -302,8 +299,8 @@ export const WorkItemDetailQuickActions = observer(function WorkItemDetailQuickA
                       <h5>{nestedItem.title}</h5>
                       {nestedItem.description && (
                         <p
-                          className={cn("text-custom-text-300 whitespace-pre-line", {
-                            "text-custom-text-400": nestedItem.disabled,
+                          className={cn("whitespace-pre-line text-tertiary", {
+                            "text-placeholder": nestedItem.disabled,
                           })}
                         >
                           {nestedItem.description}
@@ -321,13 +318,12 @@ export const WorkItemDetailQuickActions = observer(function WorkItemDetailQuickA
             <CustomMenu.MenuItem
               key={item.key}
               onClick={() => {
-                captureClick({ elementName: WORK_ITEM_TRACKER_ELEMENTS.QUICK_ACTIONS.PROJECT_VIEW });
                 item.action();
               }}
               className={cn(
                 "flex items-center gap-2",
                 {
-                  "text-custom-text-400": item.disabled,
+                  "text-placeholder": item.disabled,
                 },
                 item.className
               )}
@@ -338,8 +334,8 @@ export const WorkItemDetailQuickActions = observer(function WorkItemDetailQuickA
                 <h5>{item.title}</h5>
                 {item.description && (
                   <p
-                    className={cn("text-custom-text-300 whitespace-pre-line", {
-                      "text-custom-text-400": item.disabled,
+                    className={cn("whitespace-pre-line text-tertiary", {
+                      "text-placeholder": item.disabled,
                     })}
                   >
                     {item.description}
diff --git a/apps/web/core/components/issues/issue-layouts/quick-action-dropdowns/module-issue.tsx b/apps/web/core/components/issues/issue-layouts/quick-action-dropdowns/module-issue.tsx
index 4eb688f90..3760b7278 100644
--- a/apps/web/core/components/issues/issue-layouts/quick-action-dropdowns/module-issue.tsx
+++ b/apps/web/core/components/issues/issue-layouts/quick-action-dropdowns/module-issue.tsx
@@ -1,21 +1,20 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useState } from "react";
 import { omit } from "lodash-es";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // plane imports
-import {
-  ARCHIVABLE_STATE_GROUPS,
-  EUserPermissions,
-  EUserPermissionsLevel,
-  WORK_ITEM_TRACKER_ELEMENTS,
-} from "@plane/constants";
+import { ARCHIVABLE_STATE_GROUPS, EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import type { TIssue } from "@plane/types";
 import { EIssuesStoreType } from "@plane/types";
-import type { TContextMenuItem } from "@plane/ui";
 import { ContextMenu, CustomMenu } from "@plane/ui";
 import { cn } from "@plane/utils";
 // hooks
-import { captureClick } from "@/helpers/event-tracker.helper";
 import { useIssues } from "@/hooks/store/use-issues";
 import { useProject } from "@/hooks/store/use-project";
 import { useProjectState } from "@/hooks/store/use-project-state";
@@ -107,7 +106,6 @@ export const ModuleIssueQuickActions = observer(function ModuleIssueQuickActions
       ...item,
 
       onClick: () => {
-        captureClick({ elementName: WORK_ITEM_TRACKER_ELEMENTS.QUICK_ACTIONS.MODULE });
         item.action();
       },
     };
@@ -174,8 +172,8 @@ export const ModuleIssueQuickActions = observer(function ModuleIssueQuickActions
                     <h5>{item.title}</h5>
                     {item.description && (
                       <p
-                        className={cn("text-custom-text-300 whitespace-pre-line", {
-                          "text-custom-text-400": item.disabled,
+                        className={cn("whitespace-pre-line text-tertiary", {
+                          "text-placeholder": item.disabled,
                         })}
                       >
                         {item.description}
@@ -187,7 +185,7 @@ export const ModuleIssueQuickActions = observer(function ModuleIssueQuickActions
                 className={cn(
                   "flex items-center gap-2",
                   {
-                    "text-custom-text-400": item.disabled,
+                    "text-placeholder": item.disabled,
                   },
                   item.className
                 )}
@@ -196,13 +194,12 @@ export const ModuleIssueQuickActions = observer(function ModuleIssueQuickActions
                   <CustomMenu.MenuItem
                     key={nestedItem.key}
                     onClick={() => {
-                      captureClick({ elementName: WORK_ITEM_TRACKER_ELEMENTS.QUICK_ACTIONS.MODULE });
                       nestedItem.action();
                     }}
                     className={cn(
                       "flex items-center gap-2",
                       {
-                        "text-custom-text-400": nestedItem.disabled,
+                        "text-placeholder": nestedItem.disabled,
                       },
                       nestedItem.className
                     )}
@@ -213,8 +210,8 @@ export const ModuleIssueQuickActions = observer(function ModuleIssueQuickActions
                       <h5>{nestedItem.title}</h5>
                       {nestedItem.description && (
                         <p
-                          className={cn("text-custom-text-300 whitespace-pre-line", {
-                            "text-custom-text-400": nestedItem.disabled,
+                          className={cn("whitespace-pre-line text-tertiary", {
+                            "text-placeholder": nestedItem.disabled,
                           })}
                         >
                           {nestedItem.description}
@@ -232,13 +229,12 @@ export const ModuleIssueQuickActions = observer(function ModuleIssueQuickActions
             <CustomMenu.MenuItem
               key={item.key}
               onClick={() => {
-                captureClick({ elementName: WORK_ITEM_TRACKER_ELEMENTS.QUICK_ACTIONS.MODULE });
                 item.action();
               }}
               className={cn(
                 "flex items-center gap-2",
                 {
-                  "text-custom-text-400": item.disabled,
+                  "text-placeholder": item.disabled,
                 },
                 item.className
               )}
@@ -249,8 +245,8 @@ export const ModuleIssueQuickActions = observer(function ModuleIssueQuickActions
                 <h5>{item.title}</h5>
                 {item.description && (
                   <p
-                    className={cn("text-custom-text-300 whitespace-pre-line", {
-                      "text-custom-text-400": item.disabled,
+                    className={cn("whitespace-pre-line text-tertiary", {
+                      "text-placeholder": item.disabled,
                     })}
                   >
                     {item.description}
diff --git a/apps/web/core/components/issues/issue-layouts/quick-action-dropdowns/project-issue.tsx b/apps/web/core/components/issues/issue-layouts/quick-action-dropdowns/project-issue.tsx
index 315e678d3..4ac03dc6a 100644
--- a/apps/web/core/components/issues/issue-layouts/quick-action-dropdowns/project-issue.tsx
+++ b/apps/web/core/components/issues/issue-layouts/quick-action-dropdowns/project-issue.tsx
@@ -1,21 +1,20 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useState } from "react";
 import { omit } from "lodash-es";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // plane imports
-import {
-  ARCHIVABLE_STATE_GROUPS,
-  EUserPermissions,
-  EUserPermissionsLevel,
-  WORK_ITEM_TRACKER_ELEMENTS,
-} from "@plane/constants";
+import { ARCHIVABLE_STATE_GROUPS, EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import type { TIssue } from "@plane/types";
 import { EIssuesStoreType } from "@plane/types";
-import type { TContextMenuItem } from "@plane/ui";
 import { ContextMenu, CustomMenu } from "@plane/ui";
 import { cn } from "@plane/utils";
 // hooks
-import { captureClick } from "@/helpers/event-tracker.helper";
 import { useIssues } from "@/hooks/store/use-issues";
 import { useProject } from "@/hooks/store/use-project";
 import { useProjectState } from "@/hooks/store/use-project-state";
@@ -108,7 +107,6 @@ export const ProjectIssueQuickActions = observer(function ProjectIssueQuickActio
       ...item,
 
       onClick: () => {
-        captureClick({ elementName: WORK_ITEM_TRACKER_ELEMENTS.QUICK_ACTIONS.PROJECT_VIEW });
         item.action();
       },
     };
@@ -175,8 +173,8 @@ export const ProjectIssueQuickActions = observer(function ProjectIssueQuickActio
                     <h5>{item.title}</h5>
                     {item.description && (
                       <p
-                        className={cn("text-custom-text-300 whitespace-pre-line", {
-                          "text-custom-text-400": item.disabled,
+                        className={cn("whitespace-pre-line text-tertiary", {
+                          "text-placeholder": item.disabled,
                         })}
                       >
                         {item.description}
@@ -188,7 +186,7 @@ export const ProjectIssueQuickActions = observer(function ProjectIssueQuickActio
                 className={cn(
                   "flex items-center gap-2",
                   {
-                    "text-custom-text-400": item.disabled,
+                    "text-placeholder": item.disabled,
                   },
                   item.className
                 )}
@@ -197,13 +195,12 @@ export const ProjectIssueQuickActions = observer(function ProjectIssueQuickActio
                   <CustomMenu.MenuItem
                     key={nestedItem.key}
                     onClick={() => {
-                      captureClick({ elementName: WORK_ITEM_TRACKER_ELEMENTS.QUICK_ACTIONS.PROJECT_VIEW });
                       nestedItem.action();
                     }}
                     className={cn(
                       "flex items-center gap-2",
                       {
-                        "text-custom-text-400": nestedItem.disabled,
+                        "text-placeholder": nestedItem.disabled,
                       },
                       nestedItem.className
                     )}
@@ -214,8 +211,8 @@ export const ProjectIssueQuickActions = observer(function ProjectIssueQuickActio
                       <h5>{nestedItem.title}</h5>
                       {nestedItem.description && (
                         <p
-                          className={cn("text-custom-text-300 whitespace-pre-line", {
-                            "text-custom-text-400": nestedItem.disabled,
+                          className={cn("whitespace-pre-line text-tertiary", {
+                            "text-placeholder": nestedItem.disabled,
                           })}
                         >
                           {nestedItem.description}
@@ -233,13 +230,12 @@ export const ProjectIssueQuickActions = observer(function ProjectIssueQuickActio
             <CustomMenu.MenuItem
               key={item.key}
               onClick={() => {
-                captureClick({ elementName: WORK_ITEM_TRACKER_ELEMENTS.QUICK_ACTIONS.PROJECT_VIEW });
                 item.action();
               }}
               className={cn(
                 "flex items-center gap-2",
                 {
-                  "text-custom-text-400": item.disabled,
+                  "text-placeholder": item.disabled,
                 },
                 item.className
               )}
@@ -250,8 +246,8 @@ export const ProjectIssueQuickActions = observer(function ProjectIssueQuickActio
                 <h5>{item.title}</h5>
                 {item.description && (
                   <p
-                    className={cn("text-custom-text-300 whitespace-pre-line", {
-                      "text-custom-text-400": item.disabled,
+                    className={cn("whitespace-pre-line text-tertiary", {
+                      "text-placeholder": item.disabled,
                     })}
                   >
                     {item.description}
diff --git a/apps/web/core/components/issues/issue-layouts/quick-add/button/gantt.tsx b/apps/web/core/components/issues/issue-layouts/quick-add/button/gantt.tsx
index 44d5498ee..0362734af 100644
--- a/apps/web/core/components/issues/issue-layouts/quick-add/button/gantt.tsx
+++ b/apps/web/core/components/issues/issue-layouts/quick-add/button/gantt.tsx
@@ -1,7 +1,13 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
-import { PlusIcon } from "lucide-react";
+
 import { useTranslation } from "@plane/i18n";
+import { PlusIcon } from "@plane/propel/icons";
 import { Row } from "@plane/ui";
 import type { TQuickAddIssueButton } from "../root";
 
@@ -11,12 +17,12 @@ export const GanttQuickAddIssueButton = observer(function GanttQuickAddIssueButt
   return (
     <button
       type="button"
-      className="sticky bottom-0 z-[1] flex w-full cursor-pointer items-center border-t-[1px] border-custom-border-200 bg-custom-background-100 text-custom-text-350 hover:text-custom-text-300"
+      className="sticky bottom-0 z-[1] flex w-full cursor-pointer items-center border-t-[1px] border-subtle bg-layer-transparent hover:bg-layer-transparent-hover"
       onClick={onClick}
     >
-      <Row className="flex py-2 gap-2">
-        <PlusIcon className="h-3.5 w-3.5 stroke-2 my-auto" />
-        <span className="text-sm font-medium">{t(`${isEpic ? "epic.new" : "issue.new"}`)}</span>
+      <Row className="flex gap-2 py-2">
+        <PlusIcon className="my-auto h-3.5 w-3.5 stroke-2" />
+        <span className="text-13 font-medium">{t(`${isEpic ? "epic.new" : "issue.new"}`)}</span>
       </Row>
     </button>
   );
diff --git a/apps/web/core/components/issues/issue-layouts/quick-add/button/index.ts b/apps/web/core/components/issues/issue-layouts/quick-add/button/index.ts
index 91477c053..b19f48e09 100644
--- a/apps/web/core/components/issues/issue-layouts/quick-add/button/index.ts
+++ b/apps/web/core/components/issues/issue-layouts/quick-add/button/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./list";
 export * from "./kanban";
 export * from "./gantt";
diff --git a/apps/web/core/components/issues/issue-layouts/quick-add/button/kanban.tsx b/apps/web/core/components/issues/issue-layouts/quick-add/button/kanban.tsx
index 66092fd39..4ecd6a362 100644
--- a/apps/web/core/components/issues/issue-layouts/quick-add/button/kanban.tsx
+++ b/apps/web/core/components/issues/issue-layouts/quick-add/button/kanban.tsx
@@ -1,7 +1,13 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
-import { PlusIcon } from "lucide-react";
+
 import { useTranslation } from "@plane/i18n";
+import { PlusIcon } from "@plane/propel/icons";
 import type { TQuickAddIssueButton } from "../root";
 
 export const KanbanQuickAddIssueButton = observer(function KanbanQuickAddIssueButton(props: TQuickAddIssueButton) {
@@ -9,11 +15,11 @@ export const KanbanQuickAddIssueButton = observer(function KanbanQuickAddIssueBu
   const { t } = useTranslation();
   return (
     <div
-      className="flex w-full cursor-pointer items-center gap-2 py-1.5 text-custom-text-350 hover:text-custom-text-300"
+      className="flex w-full cursor-pointer items-center gap-2 rounded-lg bg-layer-transparent px-2 py-1 py-1.5 hover:bg-layer-transparent-hover"
       onClick={onClick}
     >
       <PlusIcon className="h-3.5 w-3.5 stroke-2" />
-      <span className="text-sm font-medium">{isEpic ? t("epic.new") : t("issue.new")}</span>
+      <span className="text-13 font-medium">{isEpic ? t("epic.new") : t("issue.new")}</span>
     </div>
   );
 });
diff --git a/apps/web/core/components/issues/issue-layouts/quick-add/button/list.tsx b/apps/web/core/components/issues/issue-layouts/quick-add/button/list.tsx
index 24195b176..1a17c44f8 100644
--- a/apps/web/core/components/issues/issue-layouts/quick-add/button/list.tsx
+++ b/apps/web/core/components/issues/issue-layouts/quick-add/button/list.tsx
@@ -1,7 +1,13 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
-import { PlusIcon } from "lucide-react";
+
 import { useTranslation } from "@plane/i18n";
+import { PlusIcon } from "@plane/propel/icons";
 import { Row } from "@plane/ui";
 import type { TQuickAddIssueButton } from "../root";
 
@@ -10,11 +16,11 @@ export const ListQuickAddIssueButton = observer(function ListQuickAddIssueButton
   const { t } = useTranslation();
   return (
     <Row
-      className="flex w-full cursor-pointer items-center gap-2 py-3 text-custom-text-350 hover:text-custom-text-300"
+      className="flex w-full cursor-pointer items-center gap-2 bg-layer-transparent py-3 hover:bg-layer-transparent-hover"
       onClick={onClick}
     >
       <PlusIcon className="h-3.5 w-3.5 stroke-2" />
-      <span className="text-sm font-medium">{isEpic ? t("epic.new") : t("issue.new")}</span>
+      <span className="text-13 font-medium">{isEpic ? t("epic.new") : t("issue.new")}</span>
     </Row>
   );
 });
diff --git a/apps/web/core/components/issues/issue-layouts/quick-add/button/spreadsheet.tsx b/apps/web/core/components/issues/issue-layouts/quick-add/button/spreadsheet.tsx
index 5e5ba93db..a94ccb068 100644
--- a/apps/web/core/components/issues/issue-layouts/quick-add/button/spreadsheet.tsx
+++ b/apps/web/core/components/issues/issue-layouts/quick-add/button/spreadsheet.tsx
@@ -1,7 +1,13 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
-import { PlusIcon } from "lucide-react";
+
 import { useTranslation } from "@plane/i18n";
+import { PlusIcon } from "@plane/propel/icons";
 import type { TQuickAddIssueButton } from "../root";
 
 export const SpreadsheetAddIssueButton = observer(function SpreadsheetAddIssueButton(props: TQuickAddIssueButton) {
@@ -11,11 +17,11 @@ export const SpreadsheetAddIssueButton = observer(function SpreadsheetAddIssueBu
     <div className="flex items-center">
       <button
         type="button"
-        className="flex items-center gap-x-[6px] rounded-md px-2 pt-3 text-custom-text-350 hover:text-custom-text-300"
+        className="flex w-full items-center gap-x-[6px] bg-layer-transparent px-2 py-2 transition-colors hover:bg-layer-transparent-hover"
         onClick={onClick}
       >
         <PlusIcon className="h-3.5 w-3.5 stroke-2" />
-        <span className="text-sm font-medium">{isEpic ? t("epic.add.label") : t("issue.add.label")}</span>
+        <span className="text-13 font-medium">{isEpic ? t("epic.add.label") : t("issue.add.label")}</span>
       </button>
     </div>
   );
diff --git a/apps/web/core/components/issues/issue-layouts/quick-add/form/calendar.tsx b/apps/web/core/components/issues/issue-layouts/quick-add/form/calendar.tsx
index ff95ffcaf..9fd69a8b9 100644
--- a/apps/web/core/components/issues/issue-layouts/quick-add/form/calendar.tsx
+++ b/apps/web/core/components/issues/issue-layouts/quick-add/form/calendar.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import type { TQuickAddIssueForm } from "../root";
 
@@ -14,9 +19,9 @@ export const CalendarQuickAddIssueForm = observer(function CalendarQuickAddIssue
       <form
         ref={ref}
         onSubmit={onSubmit}
-        className="z-50 flex w-full items-center gap-x-2 rounded md:border-[0.5px] border-custom-border-200 bg-custom-background-100 px-2 md:shadow-custom-shadow-2xs transition-opacity"
+        className="z-50 flex w-full items-center gap-x-2 rounded-sm border-subtle bg-surface-1 px-2 transition-opacity md:border-[0.5px] md:shadow-raised-100"
       >
-        <h4 className="text-sm md:text-xs leading-5 text-custom-text-400">{projectDetail?.identifier ?? "..."}</h4>
+        <h4 className="text-13 leading-5 text-placeholder md:text-11">{projectDetail?.identifier ?? "..."}</h4>
         <input
           type="text"
           autoComplete="off"
@@ -24,7 +29,7 @@ export const CalendarQuickAddIssueForm = observer(function CalendarQuickAddIssue
           {...register("name", {
             required: `${isEpic ? "Epic" : "Work item"} title is required.`,
           })}
-          className="w-full rounded-md bg-transparent py-1.5 pr-2 text-sm md:text-xs font-medium leading-5 text-custom-text-200 outline-none"
+          className="w-full rounded-md bg-transparent py-1.5 pr-2 text-13 leading-5 font-medium text-secondary outline-none md:text-11"
         />
       </form>
     </div>
diff --git a/apps/web/core/components/issues/issue-layouts/quick-add/form/gantt.tsx b/apps/web/core/components/issues/issue-layouts/quick-add/form/gantt.tsx
index 54949b687..65d05c403 100644
--- a/apps/web/core/components/issues/issue-layouts/quick-add/form/gantt.tsx
+++ b/apps/web/core/components/issues/issue-layouts/quick-add/form/gantt.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import { useTranslation } from "@plane/i18n";
 import { cn } from "@plane/utils";
@@ -8,14 +13,14 @@ export const GanttQuickAddIssueForm = observer(function GanttQuickAddIssueForm(p
   const { ref, projectDetail, hasError, register, onSubmit, isEpic } = props;
   const { t } = useTranslation();
   return (
-    <div className={cn("shadow-custom-shadow-sm", hasError && "border border-red-500/20 bg-red-500/10")}>
+    <div className={cn("shadow-raised-200", hasError && "border border-danger-strong/20 bg-danger-subtle")}>
       <form
         ref={ref}
         onSubmit={onSubmit}
-        className="flex w-full items-center gap-x-3 border-[0.5px] border-custom-border-100 bg-custom-background-100 px-3"
+        className="flex w-full items-center gap-x-3 border-[0.5px] border-subtle bg-surface-1 px-3"
       >
         <div className="flex w-full items-center gap-3">
-          <div className="text-xs font-medium text-custom-text-400">{projectDetail?.identifier ?? "..."}</div>
+          <div className="text-11 font-medium text-placeholder">{projectDetail?.identifier ?? "..."}</div>
           <input
             type="text"
             autoComplete="off"
@@ -23,11 +28,11 @@ export const GanttQuickAddIssueForm = observer(function GanttQuickAddIssueForm(p
             {...register("name", {
               required: isEpic ? t("epic.title.required") : t("issue.title.required"),
             })}
-            className="w-full rounded-md bg-transparent px-2 py-3 text-sm font-medium leading-5 text-custom-text-200 outline-none"
+            className="w-full rounded-md bg-transparent px-2 py-3 text-13 leading-5 font-medium text-secondary outline-none"
           />
         </div>
       </form>
-      <div className="px-3 py-2 text-xs bg-custom-background-100 italic text-custom-text-200">
+      <div className="bg-surface-1 px-3 py-2 text-11 text-secondary italic">
         {isEpic ? t("epic.add.press_enter") : t("issue.add.press_enter")}
       </div>
     </div>
diff --git a/apps/web/core/components/issues/issue-layouts/quick-add/form/index.ts b/apps/web/core/components/issues/issue-layouts/quick-add/form/index.ts
index d0a45c124..afaf1468c 100644
--- a/apps/web/core/components/issues/issue-layouts/quick-add/form/index.ts
+++ b/apps/web/core/components/issues/issue-layouts/quick-add/form/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./list";
 export * from "./kanban";
 export * from "./gantt";
diff --git a/apps/web/core/components/issues/issue-layouts/quick-add/form/kanban.tsx b/apps/web/core/components/issues/issue-layouts/quick-add/form/kanban.tsx
index 3ad902b6d..f6a1aba13 100644
--- a/apps/web/core/components/issues/issue-layouts/quick-add/form/kanban.tsx
+++ b/apps/web/core/components/issues/issue-layouts/quick-add/form/kanban.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import { useTranslation } from "@plane/i18n";
 import type { TQuickAddIssueForm } from "../root";
@@ -7,21 +12,21 @@ export const KanbanQuickAddIssueForm = observer(function KanbanQuickAddIssueForm
   const { ref, projectDetail, register, onSubmit, isEpic } = props;
   const { t } = useTranslation();
   return (
-    <div className="m-1 overflow-hidden rounded shadow-custom-shadow-sm">
-      <form ref={ref} onSubmit={onSubmit} className="flex w-full items-center gap-x-3 bg-custom-background-100 p-3">
+    <div className="m-1 overflow-hidden rounded-sm bg-layer-2 shadow-raised-200">
+      <form ref={ref} onSubmit={onSubmit} className="flex w-full items-center gap-x-3 p-3">
         <div className="w-full">
-          <h4 className="text-xs font-medium leading-5 text-custom-text-300">{projectDetail?.identifier ?? "..."}</h4>
+          <h4 className="text-11 leading-5 font-medium text-tertiary">{projectDetail?.identifier ?? "..."}</h4>
           <input
             autoComplete="off"
             placeholder={isEpic ? t("epic.title.label") : t("issue.title.label")}
             {...register("name", {
               required: isEpic ? t("epic.title.required") : t("issue.title.required"),
             })}
-            className="w-full rounded-md bg-transparent px-2 py-1.5 pl-0 text-sm font-medium leading-5 text-custom-text-200 outline-none"
+            className="w-full rounded-md bg-transparent px-2 py-1.5 pl-0 text-13 leading-5 font-medium text-secondary outline-none"
           />
         </div>
       </form>
-      <div className="px-3 py-2 text-xs italic text-custom-text-200">
+      <div className="bg-layer-3 px-3 py-2 text-11 text-tertiary italic">
         {isEpic ? t("epic.add.press_enter") : t("issue.add.press_enter")}
       </div>
     </div>
diff --git a/apps/web/core/components/issues/issue-layouts/quick-add/form/list.tsx b/apps/web/core/components/issues/issue-layouts/quick-add/form/list.tsx
index c8a0920d0..7f9ff9b6d 100644
--- a/apps/web/core/components/issues/issue-layouts/quick-add/form/list.tsx
+++ b/apps/web/core/components/issues/issue-layouts/quick-add/form/list.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import { useTranslation } from "@plane/i18n";
 import type { TQuickAddIssueForm } from "../root";
@@ -7,14 +12,14 @@ export const ListQuickAddIssueForm = observer(function ListQuickAddIssueForm(pro
   const { ref, projectDetail, register, onSubmit, isEpic } = props;
   const { t } = useTranslation();
   return (
-    <div className="shadow-custom-shadow-sm">
+    <div className="shadow-raised-200">
       <form
         ref={ref}
         onSubmit={onSubmit}
-        className="flex w-full items-center gap-x-3 border-[0.5px] border-t-0 border-custom-border-100 bg-custom-background-100 px-3"
+        className="flex w-full items-center gap-x-3 border-[0.5px] border-t-0 border-subtle bg-surface-1 px-3"
       >
         <div className="flex w-full items-center gap-3">
-          <div className="text-xs font-medium text-custom-text-400">{projectDetail?.identifier ?? "..."}</div>
+          <div className="text-11 font-medium text-placeholder">{projectDetail?.identifier ?? "..."}</div>
           <input
             type="text"
             autoComplete="off"
@@ -22,11 +27,11 @@ export const ListQuickAddIssueForm = observer(function ListQuickAddIssueForm(pro
             {...register("name", {
               required: isEpic ? t("epic.title.required") : t("issue.title.required"),
             })}
-            className="w-full rounded-md bg-transparent px-2 py-3 text-sm font-medium leading-5 text-custom-text-200 outline-none"
+            className="w-full rounded-md bg-transparent px-2 py-3 text-13 leading-5 font-medium text-secondary outline-none"
           />
         </div>
       </form>
-      <div className="px-3 py-2 text-xs italic text-custom-text-200">
+      <div className="px-3 py-2 text-11 text-secondary italic">
         {isEpic ? t("epic.add.press_enter") : t("issue.add.press_enter")}
       </div>
     </div>
diff --git a/apps/web/core/components/issues/issue-layouts/quick-add/form/spreadsheet.tsx b/apps/web/core/components/issues/issue-layouts/quick-add/form/spreadsheet.tsx
index a83a120f6..ebf5978a2 100644
--- a/apps/web/core/components/issues/issue-layouts/quick-add/form/spreadsheet.tsx
+++ b/apps/web/core/components/issues/issue-layouts/quick-add/form/spreadsheet.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import { useTranslation } from "@plane/i18n";
 import type { TQuickAddIssueForm } from "../root";
@@ -11,9 +16,9 @@ export const SpreadsheetQuickAddIssueForm = observer(function SpreadsheetQuickAd
       <form
         ref={ref}
         onSubmit={onSubmit}
-        className="z-10 flex items-center gap-x-5 border-[0.5px] border-t-0 border-custom-border-100 bg-custom-background-100 px-4 shadow-custom-shadow-sm"
+        className="z-10 flex items-center gap-x-5 border-[0.5px] border-t-0 border-subtle bg-surface-1 px-4 shadow-raised-200"
       >
-        <h4 className="w-20 text-xs leading-5 text-custom-text-400">{projectDetail?.identifier ?? "..."}</h4>
+        <h4 className="w-20 text-11 leading-5 text-placeholder">{projectDetail?.identifier ?? "..."}</h4>
         <input
           type="text"
           autoComplete="off"
@@ -21,10 +26,10 @@ export const SpreadsheetQuickAddIssueForm = observer(function SpreadsheetQuickAd
           {...register("name", {
             required: isEpic ? t("epic.title.required") : t("issue.title.required"),
           })}
-          className="w-full rounded-md bg-transparent py-3 text-sm leading-5 text-custom-text-200 outline-none"
+          className="w-full rounded-md bg-transparent py-3 text-13 leading-5 text-secondary outline-none"
         />
       </form>
-      <p className="ml-3 mt-3 text-xs italic text-custom-text-200">
+      <p className="mt-3 ml-3 text-11 text-secondary italic">
         {isEpic ? t("epic.add.press_enter") : t("issue.add.press_enter")}
       </p>
     </div>
diff --git a/apps/web/core/components/issues/issue-layouts/quick-add/index.ts b/apps/web/core/components/issues/issue-layouts/quick-add/index.ts
index a82947248..5fddc3b57 100644
--- a/apps/web/core/components/issues/issue-layouts/quick-add/index.ts
+++ b/apps/web/core/components/issues/issue-layouts/quick-add/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./root";
 export * from "./form";
 export * from "./button";
diff --git a/apps/web/core/components/issues/issue-layouts/quick-add/root.tsx b/apps/web/core/components/issues/issue-layouts/quick-add/root.tsx
index 862b1ee00..4d0f78415 100644
--- a/apps/web/core/components/issues/issue-layouts/quick-add/root.tsx
+++ b/apps/web/core/components/issues/issue-layouts/quick-add/root.tsx
@@ -1,18 +1,21 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { FC } from "react";
 import { useEffect, useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 import type { UseFormRegister } from "react-hook-form";
 import { useForm } from "react-hook-form";
-import { PlusIcon } from "lucide-react";
 // plane imports
-import { WORK_ITEM_TRACKER_EVENTS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
+import { PlusIcon } from "@plane/propel/icons";
 import { setPromiseToast } from "@plane/propel/toast";
 import type { IProject, TIssue, EIssueLayoutTypes } from "@plane/types";
 import { cn, createIssuePayload } from "@plane/utils";
-// helpers
-import { captureError, captureSuccess } from "@/helpers/event-tracker.helper";
 // plane web imports
 import { QuickAddIssueFormRoot } from "@/plane-web/components/issues/quick-add";
 // local imports
@@ -127,20 +130,7 @@ export const QuickAddIssueRoot = observer(function QuickAddIssueRoot(props: TQui
         },
       });
 
-      await quickAddPromise
-        .then((res) => {
-          captureSuccess({
-            eventName: WORK_ITEM_TRACKER_EVENTS.create,
-            payload: { id: res?.id },
-          });
-        })
-        .catch((error) => {
-          captureError({
-            eventName: WORK_ITEM_TRACKER_EVENTS.create,
-            payload: { id: payload.id },
-            error: error as Error,
-          });
-        });
+      await quickAddPromise;
     }
   };
 
@@ -150,7 +140,7 @@ export const QuickAddIssueRoot = observer(function QuickAddIssueRoot(props: TQui
     <div
       className={cn(
         containerClassName,
-        errors && errors?.name && errors?.name?.message ? `border-red-500 bg-red-500/10` : ``
+        errors && errors?.name && errors?.name?.message ? `border-danger-strong bg-danger-subtle` : ``
       )}
     >
       {isOpen ? (
@@ -171,13 +161,13 @@ export const QuickAddIssueRoot = observer(function QuickAddIssueRoot(props: TQui
           {QuickAddButton && <QuickAddButton isEpic={isEpic} onClick={() => handleIsOpen(true)} />}
           {customQuickAddButton && <>{customQuickAddButton}</>}
           {!QuickAddButton && !customQuickAddButton && (
-            <div
-              className="flex w-full cursor-pointer items-center gap-2 px-2 py-3 text-custom-text-350 hover:text-custom-text-300"
+            <button
+              className="flex w-full cursor-pointer items-center gap-2 bg-layer-transparent px-2 py-3 hover:bg-layer-transparent-hover"
               onClick={() => handleIsOpen(true)}
             >
               <PlusIcon className="h-3.5 w-3.5 stroke-2" />
-              <span className="text-sm font-medium">{t(`${isEpic ? "epic.new" : "issue.new"}`)}</span>
-            </div>
+              <span className="text-13 font-medium">{t(`${isEpic ? "epic.new" : "issue.new"}`)}</span>
+            </button>
           )}
         </>
       )}
diff --git a/apps/web/core/components/issues/issue-layouts/roots/all-issue-layout-root.tsx b/apps/web/core/components/issues/issue-layouts/roots/all-issue-layout-root.tsx
index 12ffbe887..a7bad0857 100644
--- a/apps/web/core/components/issues/issue-layouts/roots/all-issue-layout-root.tsx
+++ b/apps/web/core/components/issues/issue-layouts/roots/all-issue-layout-root.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React, { useCallback, useMemo } from "react";
 import { observer } from "mobx-react";
 import { useParams, useSearchParams } from "next/navigation";
@@ -8,7 +14,6 @@ import { EmptyStateDetailed } from "@plane/propel/empty-state";
 import type { EIssueLayoutTypes } from "@plane/types";
 import { EIssuesStoreType, STATIC_VIEW_TYPES } from "@plane/types";
 // assets
-import emptyView from "@/app/assets/empty-state/view.svg?url";
 // components
 import { IssuePeekOverview } from "@/components/issues/peek-overview";
 import { WorkspaceActiveLayout } from "@/components/views/helper";
@@ -141,8 +146,8 @@ export const AllIssueLayoutRoot = observer(function AllIssueLayoutRoot(props: Pr
         workspaceSlug={workspaceSlug}
       >
         {({ filter: globalWorkItemsFilter }) => (
-          <div className="h-full overflow-hidden bg-custom-background-100">
-            <div className="flex h-full w-full flex-col border-b border-custom-border-300">
+          <div className="h-full overflow-hidden bg-surface-1">
+            <div className="flex h-full w-full flex-col border-b border-strong">
               {globalWorkItemsFilter && (
                 <WorkItemFiltersRow
                   filter={globalWorkItemsFilter}
diff --git a/apps/web/core/components/issues/issue-layouts/roots/archived-issue-layout-root.tsx b/apps/web/core/components/issues/issue-layouts/roots/archived-issue-layout-root.tsx
index 00e4ec2e6..6e2ad29f2 100644
--- a/apps/web/core/components/issues/issue-layouts/roots/archived-issue-layout-root.tsx
+++ b/apps/web/core/components/issues/issue-layouts/roots/archived-issue-layout-root.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
diff --git a/apps/web/core/components/issues/issue-layouts/roots/cycle-layout-root.tsx b/apps/web/core/components/issues/issue-layouts/roots/cycle-layout-root.tsx
index 30b30b0b1..8365efc7c 100644
--- a/apps/web/core/components/issues/issue-layouts/roots/cycle-layout-root.tsx
+++ b/apps/web/core/components/issues/issue-layouts/roots/cycle-layout-root.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React, { useState } from "react";
 import { isEmpty } from "lodash-es";
 import { observer } from "mobx-react";
diff --git a/apps/web/core/components/issues/issue-layouts/roots/module-layout-root.tsx b/apps/web/core/components/issues/issue-layouts/roots/module-layout-root.tsx
index a69b4ff2e..811cb0236 100644
--- a/apps/web/core/components/issues/issue-layouts/roots/module-layout-root.tsx
+++ b/apps/web/core/components/issues/issue-layouts/roots/module-layout-root.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
diff --git a/apps/web/core/components/issues/issue-layouts/roots/project-layout-root.tsx b/apps/web/core/components/issues/issue-layouts/roots/project-layout-root.tsx
index fa1949d3f..79696b807 100644
--- a/apps/web/core/components/issues/issue-layouts/roots/project-layout-root.tsx
+++ b/apps/web/core/components/issues/issue-layouts/roots/project-layout-root.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 import useSWR from "swr";
@@ -80,11 +86,11 @@ export const ProjectLayoutRoot = observer(function ProjectLayoutRoot() {
                 }}
               />
             )}
-            <div className="relative h-full w-full overflow-auto bg-custom-background-90">
+            <div className="relative h-full w-full overflow-auto bg-surface-1">
               {/* mutation loader */}
               {issues?.getIssueLoader() === "mutation" && (
-                <div className="fixed w-[40px] h-[40px] z-50 right-[20px] top-[70px] flex justify-center items-center bg-custom-background-80 shadow-sm rounded">
-                  <Spinner className="w-4 h-4" />
+                <div className="shadow-sm fixed top-[70px] right-[20px] z-50 flex h-[40px] w-[40px] items-center justify-center rounded-sm bg-layer-1">
+                  <Spinner className="h-4 w-4" />
                 </div>
               )}
               <ProjectIssueLayout activeLayout={activeLayout} />
diff --git a/apps/web/core/components/issues/issue-layouts/roots/project-view-layout-root.tsx b/apps/web/core/components/issues/issue-layouts/roots/project-view-layout-root.tsx
index 0e3ad0cf7..3d01bd899 100644
--- a/apps/web/core/components/issues/issue-layouts/roots/project-view-layout-root.tsx
+++ b/apps/web/core/components/issues/issue-layouts/roots/project-view-layout-root.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React, { useEffect } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
diff --git a/apps/web/core/components/issues/issue-layouts/spreadsheet/base-spreadsheet-root.tsx b/apps/web/core/components/issues/issue-layouts/spreadsheet/base-spreadsheet-root.tsx
index 1fb1edff8..4a156821e 100644
--- a/apps/web/core/components/issues/issue-layouts/spreadsheet/base-spreadsheet-root.tsx
+++ b/apps/web/core/components/issues/issue-layouts/spreadsheet/base-spreadsheet-root.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { FC } from "react";
 import { useCallback, useEffect } from "react";
 import { observer } from "mobx-react";
diff --git a/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/assignee-column.tsx b/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/assignee-column.tsx
index a555a4834..78f30b0ed 100644
--- a/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/assignee-column.tsx
+++ b/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/assignee-column.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 import { observer } from "mobx-react";
 // types
@@ -16,7 +22,7 @@ export const SpreadsheetAssigneeColumn = observer(function SpreadsheetAssigneeCo
   const { issue, onChange, disabled, onClose } = props;
 
   return (
-    <div className="h-11 border-b-[0.5px] border-custom-border-200">
+    <div className="h-11 border-b-[0.5px] border-subtle">
       <MemberDropdown
         value={issue?.assignee_ids ?? []}
         onChange={(data) => {
@@ -36,7 +42,7 @@ export const SpreadsheetAssigneeColumn = observer(function SpreadsheetAssigneeCo
         buttonVariant={
           issue?.assignee_ids && issue.assignee_ids.length > 1 ? "transparent-without-text" : "transparent-with-text"
         }
-        buttonClassName="text-left rounded-none group-[.selected-issue-row]:bg-custom-primary-100/5 group-[.selected-issue-row]:hover:bg-custom-primary-100/10 px-page-x"
+        buttonClassName="text-left rounded-none group-[.selected-issue-row]:bg-accent-primary/5 group-[.selected-issue-row]:hover:bg-accent-primary/10 px-page-x"
         buttonContainerClassName="w-full"
         optionsClassName="z-[9]"
         onClose={onClose}
diff --git a/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/attachment-column.tsx b/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/attachment-column.tsx
index 6077dc8b0..2ec3a94b3 100644
--- a/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/attachment-column.tsx
+++ b/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/attachment-column.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 import { observer } from "mobx-react";
 // types
@@ -12,7 +18,7 @@ export const SpreadsheetAttachmentColumn = observer(function SpreadsheetAttachme
   const { issue } = props;
 
   return (
-    <Row className="flex h-11 w-full items-center border-b-[0.5px] border-custom-border-200 py-1 text-xs hover:bg-custom-background-80 group-[.selected-issue-row]:bg-custom-primary-100/5 group-[.selected-issue-row]:hover:bg-custom-primary-100/10">
+    <Row className="flex h-11 w-full items-center border-b-[0.5px] border-subtle py-1 text-11 group-[.selected-issue-row]:bg-accent-primary/5 hover:bg-layer-1 group-[.selected-issue-row]:hover:bg-accent-primary/10">
       {issue?.attachment_count ?? 0} {issue?.attachment_count === 1 ? "attachment" : "attachments"}
     </Row>
   );
diff --git a/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/created-on-column.tsx b/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/created-on-column.tsx
index f4b8ffcdf..824132072 100644
--- a/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/created-on-column.tsx
+++ b/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/created-on-column.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 import { observer } from "mobx-react";
 // types
@@ -14,7 +20,7 @@ export const SpreadsheetCreatedOnColumn = observer(function SpreadsheetCreatedOn
   const { issue } = props;
 
   return (
-    <Row className="flex h-11 w-full items-center border-b-[0.5px] border-custom-border-200 text-xs hover:bg-custom-background-80 group-[.selected-issue-row]:bg-custom-primary-100/5 group-[.selected-issue-row]:hover:bg-custom-primary-100/10">
+    <Row className="flex h-11 w-full items-center border-b-[0.5px] border-subtle text-11 group-[.selected-issue-row]:bg-accent-primary/5 hover:bg-layer-1 group-[.selected-issue-row]:hover:bg-accent-primary/10">
       {renderFormattedDate(issue.created_at)}
     </Row>
   );
diff --git a/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/cycle-column.tsx b/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/cycle-column.tsx
index 9c2a3a307..eff04160a 100644
--- a/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/cycle-column.tsx
+++ b/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/cycle-column.tsx
@@ -1,13 +1,17 @@
-import React, { useCallback } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useCallback } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // types
-import { WORK_ITEM_TRACKER_EVENTS } from "@plane/constants";
 import type { TIssue } from "@plane/types";
 // components
 import { CycleDropdown } from "@/components/dropdowns/cycle";
 // hooks
-import { captureSuccess } from "@/helpers/event-tracker.helper";
 import { useIssuesStore } from "@/hooks/use-issue-layout-store";
 
 type Props = {
@@ -30,18 +34,12 @@ export const SpreadsheetCycleColumn = observer(function SpreadsheetCycleColumn(p
       if (!workspaceSlug || !issue || !issue.project_id || issue.cycle_id === cycleId) return;
       if (cycleId) await addCycleToIssue(workspaceSlug.toString(), issue.project_id, cycleId, issue.id);
       else await removeCycleFromIssue(workspaceSlug.toString(), issue.project_id, issue.id);
-      captureSuccess({
-        eventName: WORK_ITEM_TRACKER_EVENTS.update,
-        payload: {
-          id: issue.id,
-        },
-      });
     },
     [workspaceSlug, issue, addCycleToIssue, removeCycleFromIssue]
   );
 
   return (
-    <div className="h-11 border-b-[0.5px] border-custom-border-200">
+    <div className="h-11 border-b-[0.5px] border-subtle">
       <CycleDropdown
         projectId={issue.project_id ?? undefined}
         value={issue.cycle_id}
@@ -49,7 +47,7 @@ export const SpreadsheetCycleColumn = observer(function SpreadsheetCycleColumn(p
         disabled={disabled}
         placeholder="Select cycle"
         buttonVariant="transparent-with-text"
-        buttonContainerClassName="w-full relative flex items-center p-2 group-[.selected-issue-row]:bg-custom-primary-100/5 group-[.selected-issue-row]:hover:bg-custom-primary-100/10 px-page-x"
+        buttonContainerClassName="w-full relative flex items-center p-2 group-[.selected-issue-row]:bg-accent-primary/5 group-[.selected-issue-row]:hover:bg-accent-primary/10 px-page-x"
         buttonClassName="relative leading-4 h-4.5 bg-transparent hover:bg-transparent px-0"
         onClose={onClose}
       />
diff --git a/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/due-date-column.tsx b/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/due-date-column.tsx
index af477208c..580198afa 100644
--- a/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/due-date-column.tsx
+++ b/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/due-date-column.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 import { observer } from "mobx-react";
 import { DueDatePropertyIcon } from "@plane/propel/icons";
@@ -25,7 +31,7 @@ export const SpreadsheetDueDateColumn = observer(function SpreadsheetDueDateColu
   const stateDetails = getStateById(issue.state_id);
 
   return (
-    <div className="h-11 border-b-[0.5px] border-custom-border-200">
+    <div className="h-11 border-b-[0.5px] border-subtle">
       <DateDropdown
         value={issue.target_date}
         minDate={getDate(issue.start_date)}
@@ -46,13 +52,13 @@ export const SpreadsheetDueDateColumn = observer(function SpreadsheetDueDateColu
         buttonVariant="transparent-with-text"
         buttonContainerClassName="w-full"
         buttonClassName={cn(
-          "rounded-none text-left group-[.selected-issue-row]:bg-custom-primary-100/5 group-[.selected-issue-row]:hover:bg-custom-primary-100/10 px-page-x",
+          "rounded-none px-page-x text-left group-[.selected-issue-row]:bg-accent-primary/5 group-[.selected-issue-row]:hover:bg-accent-primary/10",
           {
-            "text-red-500": shouldHighlightIssueDueDate(issue.target_date, stateDetails?.group),
+            "text-danger-primary": shouldHighlightIssueDueDate(issue.target_date, stateDetails?.group),
           }
         )}
         optionsClassName="z-[9]"
-        clearIconClassName="!text-custom-text-100"
+        clearIconClassName="!text-primary"
         onClose={onClose}
       />
     </div>
diff --git a/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/estimate-column.tsx b/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/estimate-column.tsx
index b46b0649f..a60262b43 100644
--- a/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/estimate-column.tsx
+++ b/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/estimate-column.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 // types
 import type { TIssue } from "@plane/types";
@@ -15,7 +21,7 @@ export const SpreadsheetEstimateColumn = observer(function SpreadsheetEstimateCo
   const { issue, onChange, disabled, onClose } = props;
 
   return (
-    <div className="h-11 border-b-[0.5px] border-custom-border-200">
+    <div className="h-11 border-b-[0.5px] border-subtle">
       <EstimateDropdown
         value={issue.estimate_point || undefined}
         onChange={(data) =>
@@ -25,7 +31,7 @@ export const SpreadsheetEstimateColumn = observer(function SpreadsheetEstimateCo
         projectId={issue.project_id ?? undefined}
         disabled={disabled}
         buttonVariant="transparent-with-text"
-        buttonClassName="text-left rounded-none group-[.selected-issue-row]:bg-custom-primary-100/5 group-[.selected-issue-row]:hover:bg-custom-primary-100/10 px-page-x"
+        buttonClassName="text-left rounded-none group-[.selected-issue-row]:bg-accent-primary/5 group-[.selected-issue-row]:hover:bg-accent-primary/10 px-page-x"
         buttonContainerClassName="w-full"
         onClose={onClose}
       />
diff --git a/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/header-column.tsx b/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/header-column.tsx
index 4046ce1f0..e68676e42 100644
--- a/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/header-column.tsx
+++ b/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/header-column.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 //ui
 import { ArrowDownWideNarrow, ArrowUpNarrowWide, CheckIcon, ChevronDownIcon, Eraser, MoveRight } from "lucide-react";
 // constants
@@ -47,9 +53,9 @@ export function HeaderColumn(props: Props) {
       customButtonTabIndex={-1}
       className="!w-full"
       customButton={
-        <Row className="flex w-full cursor-pointer items-center justify-between gap-1.5 py-2 text-sm text-custom-text-200 hover:text-custom-text-100">
+        <Row className="flex w-full cursor-pointer items-center justify-between gap-1.5 py-2 text-13 text-secondary hover:text-primary">
           <div className="flex items-center gap-1.5">
-            {<SpreadSheetPropertyIcon iconKey={propertyDetails.icon} className="h-4 w-4 text-custom-text-400" />}
+            {<SpreadSheetPropertyIcon iconKey={propertyDetails.icon} className="h-4 w-4 text-placeholder" />}
             {property === "sub_issue_count" && isEpic ? t("issue.label", { count: 2 }) : t(propertyDetails.i18n_title)}
           </div>
           <div className="ml-3 flex">
@@ -74,8 +80,8 @@ export function HeaderColumn(props: Props) {
         <div
           className={`flex items-center justify-between gap-1.5 px-1 ${
             selectedMenuItem === `${propertyDetails.ascendingOrderKey}_${property}`
-              ? "text-custom-text-100"
-              : "text-custom-text-200 hover:text-custom-text-100"
+              ? "text-primary"
+              : "text-secondary hover:text-primary"
           }`}
         >
           <div className="flex items-center gap-2">
@@ -92,8 +98,8 @@ export function HeaderColumn(props: Props) {
         <div
           className={`flex items-center justify-between gap-1.5 px-1 ${
             selectedMenuItem === `${propertyDetails.descendingOrderKey}_${property}`
-              ? "text-custom-text-100"
-              : "text-custom-text-200 hover:text-custom-text-100"
+              ? "text-primary"
+              : "text-secondary hover:text-primary"
           }`}
         >
           <div className="flex items-center gap-2">
@@ -113,7 +119,7 @@ export function HeaderColumn(props: Props) {
         displayFilters?.order_by !== "-created_at" &&
         selectedMenuItem.includes(property) && (
           <CustomMenu.MenuItem
-            className={`mt-0.5 ${selectedMenuItem === `-created_at_${property}` ? "bg-custom-background-80" : ""}`}
+            className={`mt-0.5 ${selectedMenuItem === `-created_at_${property}` ? "bg-layer-1" : ""}`}
             key={property}
             onClick={() => handleOrderBy("-created_at", property)}
           >
diff --git a/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/index.ts b/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/index.ts
index 3439d398b..e02316d51 100644
--- a/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/index.ts
+++ b/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./assignee-column";
 export * from "./attachment-column";
 export * from "./created-on-column";
diff --git a/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/label-column.tsx b/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/label-column.tsx
index df54bba8f..02ae8b669 100644
--- a/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/label-column.tsx
+++ b/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/label-column.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 import { observer } from "mobx-react";
 // types
@@ -22,14 +28,14 @@ export const SpreadsheetLabelColumn = observer(function SpreadsheetLabelColumn(p
   const defaultLabelOptions = issue?.label_ids?.map((id) => labelMap[id]) || [];
 
   return (
-    <div className="h-11 border-b-[0.5px] border-custom-border-200 w-full">
+    <div className="h-11 w-full border-b-[0.5px] border-subtle">
       <IssuePropertyLabels
         projectId={issue.project_id ?? null}
         value={issue.label_ids || []}
         defaultOptions={defaultLabelOptions}
         onChange={(data) => onChange(issue, { label_ids: data }, { changed_property: "labels", change_details: data })}
-        className="h-full w-full "
-        buttonClassName="px-page-x w-full h-full group-[.selected-issue-row]:bg-custom-primary-100/5 group-[.selected-issue-row]:hover:bg-custom-primary-100/10 rounded-none"
+        className="h-full w-full"
+        buttonClassName="px-page-x w-full h-full group-[.selected-issue-row]:bg-accent-primary/5 group-[.selected-issue-row]:hover:bg-accent-primary/10 rounded-none"
         hideDropdownArrow
         maxRender={1}
         disabled={disabled}
diff --git a/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/link-column.tsx b/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/link-column.tsx
index 421d5184d..305a2624c 100644
--- a/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/link-column.tsx
+++ b/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/link-column.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 import { observer } from "mobx-react";
 // types
@@ -12,7 +18,7 @@ export const SpreadsheetLinkColumn = observer(function SpreadsheetLinkColumn(pro
   const { issue } = props;
 
   return (
-    <Row className="flex h-11 w-full items-center border-b-[0.5px] border-custom-border-200 px-2.5 py-1 text-xs hover:bg-custom-background-80 group-[.selected-issue-row]:bg-custom-primary-100/5 group-[.selected-issue-row]:hover:bg-custom-primary-100/10 px-page-x">
+    <Row className="flex h-11 w-full items-center border-b-[0.5px] border-subtle px-2.5 px-page-x py-1 text-11 group-[.selected-issue-row]:bg-accent-primary/5 hover:bg-layer-1 group-[.selected-issue-row]:hover:bg-accent-primary/10">
       {issue?.link_count ?? 0} {issue?.link_count === 1 ? "link" : "links"}
     </Row>
   );
diff --git a/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/module-column.tsx b/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/module-column.tsx
index 5b9784349..30f55a38a 100644
--- a/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/module-column.tsx
+++ b/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/module-column.tsx
@@ -1,15 +1,18 @@
-import React, { useCallback } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useCallback } from "react";
 import { xor } from "lodash-es";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // types
-import { WORK_ITEM_TRACKER_EVENTS } from "@plane/constants";
 import type { TIssue } from "@plane/types";
 // components
 import { ModuleDropdown } from "@/components/dropdowns/module/dropdown";
-// constants
 // hooks
-import { captureSuccess } from "@/helpers/event-tracker.helper";
 import { useIssuesStore } from "@/hooks/use-issue-layout-store";
 
 type Props = {
@@ -39,19 +42,12 @@ export const SpreadsheetModuleColumn = observer(function SpreadsheetModuleColumn
         else modulesToAdd.push(moduleId);
       }
       changeModulesInIssue(workspaceSlug.toString(), issue.project_id, issue.id, modulesToAdd, modulesToRemove);
-
-      captureSuccess({
-        eventName: WORK_ITEM_TRACKER_EVENTS.update,
-        payload: {
-          id: issue.id,
-        },
-      });
     },
     [workspaceSlug, issue, changeModulesInIssue]
   );
 
   return (
-    <div className="h-11 border-b-[0.5px] border-custom-border-200">
+    <div className="h-11 border-b-[0.5px] border-subtle">
       <ModuleDropdown
         projectId={issue?.project_id ?? undefined}
         value={issue?.module_ids ?? []}
@@ -59,7 +55,7 @@ export const SpreadsheetModuleColumn = observer(function SpreadsheetModuleColumn
         disabled={disabled}
         placeholder="Select modules"
         buttonVariant="transparent-with-text"
-        buttonContainerClassName="w-full relative flex items-center p-2 group-[.selected-issue-row]:bg-custom-primary-100/5 group-[.selected-issue-row]:hover:bg-custom-primary-100/10 px-page-x"
+        buttonContainerClassName="w-full relative flex items-center p-2 group-[.selected-issue-row]:bg-accent-primary/5 group-[.selected-issue-row]:hover:bg-accent-primary/10 px-page-x"
         buttonClassName="relative leading-4 h-4.5 bg-transparent hover:bg-transparent !px-0"
         onClose={onClose}
         multiple
diff --git a/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/priority-column.tsx b/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/priority-column.tsx
index 595877e28..cab106dcd 100644
--- a/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/priority-column.tsx
+++ b/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/priority-column.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 import { observer } from "mobx-react";
 // types
@@ -16,13 +22,13 @@ export const SpreadsheetPriorityColumn = observer(function SpreadsheetPriorityCo
   const { issue, onChange, disabled, onClose } = props;
 
   return (
-    <div className="h-11 border-b-[0.5px] border-custom-border-200">
+    <div className="h-11 border-b-[0.5px] border-subtle">
       <PriorityDropdown
         value={issue.priority}
         onChange={(data) => onChange(issue, { priority: data }, { changed_property: "priority", change_details: data })}
         disabled={disabled}
         buttonVariant="transparent-with-text"
-        buttonClassName="text-left rounded-none group-[.selected-issue-row]:bg-custom-primary-100/5 group-[.selected-issue-row]:hover:bg-custom-primary-100/10 px-page-x"
+        buttonClassName="text-left rounded-none group-[.selected-issue-row]:bg-accent-primary/5 group-[.selected-issue-row]:hover:bg-accent-primary/10 px-page-x"
         buttonContainerClassName="w-full"
         onClose={onClose}
       />
diff --git a/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/start-date-column.tsx b/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/start-date-column.tsx
index f44a26835..fd4a180c9 100644
--- a/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/start-date-column.tsx
+++ b/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/start-date-column.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 import { observer } from "mobx-react";
 import { StartDatePropertyIcon } from "@plane/propel/icons";
@@ -19,7 +25,7 @@ export const SpreadsheetStartDateColumn = observer(function SpreadsheetStartDate
   const { issue, onChange, disabled, onClose } = props;
 
   return (
-    <div className="h-11 border-b-[0.5px] border-custom-border-200">
+    <div className="h-11 border-b-[0.5px] border-subtle">
       <DateDropdown
         value={issue.start_date}
         maxDate={getDate(issue.target_date)}
@@ -38,7 +44,7 @@ export const SpreadsheetStartDateColumn = observer(function SpreadsheetStartDate
         placeholder="Start date"
         icon={<StartDatePropertyIcon className="h-3 w-3 flex-shrink-0" />}
         buttonVariant="transparent-with-text"
-        buttonClassName="text-left rounded-none group-[.selected-issue-row]:bg-custom-primary-100/5 group-[.selected-issue-row]:hover:bg-custom-primary-100/10 px-page-x"
+        buttonClassName="text-left rounded-none group-[.selected-issue-row]:bg-accent-primary/5 group-[.selected-issue-row]:hover:bg-accent-primary/10 px-page-x"
         buttonContainerClassName="w-full"
         optionsClassName="z-[9]"
         onClose={onClose}
diff --git a/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/state-column.tsx b/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/state-column.tsx
index 06b1fea3b..5136346bc 100644
--- a/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/state-column.tsx
+++ b/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/state-column.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 import { observer } from "mobx-react";
 // types
@@ -16,14 +22,14 @@ export const SpreadsheetStateColumn = observer(function SpreadsheetStateColumn(p
   const { issue, onChange, disabled, onClose } = props;
 
   return (
-    <div className="h-11 border-b-[0.5px] border-custom-border-200">
+    <div className="h-11 border-b-[0.5px] border-subtle">
       <StateDropdown
         projectId={issue.project_id ?? undefined}
         value={issue.state_id}
         onChange={(data) => onChange(issue, { state_id: data }, { changed_property: "state", change_details: data })}
         disabled={disabled}
         buttonVariant="transparent-with-text"
-        buttonClassName="text-left rounded-none group-[.selected-issue-row]:bg-custom-primary-100/5 group-[.selected-issue-row]:hover:bg-custom-primary-100/10 px-page-x"
+        buttonClassName="text-left rounded-none group-[.selected-issue-row]:bg-accent-primary/5 group-[.selected-issue-row]:hover:bg-accent-primary/10 px-page-x"
         buttonContainerClassName="w-full"
         onClose={onClose}
         showTooltip
diff --git a/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/sub-issue-column.tsx b/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/sub-issue-column.tsx
index 095738075..dcdcc4b42 100644
--- a/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/sub-issue-column.tsx
+++ b/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/sub-issue-column.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
@@ -36,7 +42,7 @@ export const SpreadsheetSubIssueColumn = observer(function SpreadsheetSubIssueCo
     <Row
       onClick={subIssueCount ? redirectToIssueDetail : () => {}}
       className={cn(
-        "flex h-11 w-full items-center border-b-[0.5px] border-custom-border-200 py-1 text-xs hover:bg-custom-background-90 group-[.selected-issue-row]:bg-custom-primary-100/5 group-[.selected-issue-row]:hover:bg-custom-primary-90",
+        "flex h-11 w-full items-center border-b-[0.5px] border-subtle py-1 text-11 group-[.selected-issue-row]:bg-accent-primary/5 hover:bg-surface-2 group-[.selected-issue-row]:hover:bg-accent-primary",
         {
           "cursor-pointer": subIssueCount,
         }
diff --git a/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/updated-on-column.tsx b/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/updated-on-column.tsx
index ffa799fd8..f099eddcb 100644
--- a/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/updated-on-column.tsx
+++ b/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/updated-on-column.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 import { observer } from "mobx-react";
 // types
@@ -14,7 +20,7 @@ export const SpreadsheetUpdatedOnColumn = observer(function SpreadsheetUpdatedOn
   const { issue } = props;
 
   return (
-    <Row className="flex h-11 w-full items-center border-b-[0.5px] border-custom-border-200 text-xs hover:bg-custom-background-80 group-[.selected-issue-row]:bg-custom-primary-100/5 group-[.selected-issue-row]:hover:bg-custom-primary-100/10">
+    <Row className="flex h-11 w-full items-center border-b-[0.5px] border-subtle-1 text-11 group-[.selected-issue-row]:bg-accent-primary/5 hover:bg-layer-1 group-[.selected-issue-row]:hover:bg-accent-primary/10">
       {renderFormattedDate(issue.updated_at)}
     </Row>
   );
diff --git a/apps/web/core/components/issues/issue-layouts/spreadsheet/issue-column.tsx b/apps/web/core/components/issues/issue-layouts/spreadsheet/issue-column.tsx
index a983a1525..e492c100b 100644
--- a/apps/web/core/components/issues/issue-layouts/spreadsheet/issue-column.tsx
+++ b/apps/web/core/components/issues/issue-layouts/spreadsheet/issue-column.tsx
@@ -1,13 +1,16 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useRef } from "react";
 import { observer } from "mobx-react";
 // types
-import { WORK_ITEM_TRACKER_EVENTS } from "@plane/constants";
 import type { IIssueDisplayProperties, TIssue } from "@plane/types";
-// hooks
-import { captureSuccess } from "@/helpers/event-tracker.helper";
 // components
 import { SPREADSHEET_COLUMNS } from "@/plane-web/components/issues/issue-layouts/utils";
-import { shouldRenderColumn } from "@/plane-web/helpers/issue-filter.helper";
+import { shouldRenderColumn } from "@/helpers/issue-filter.helper";
 import { WithDisplayPropertiesHOC } from "../properties/with-display-properties-HOC";
 
 type Props = {
@@ -30,6 +33,10 @@ export const IssueColumn = observer(function IssueColumn(props: Props) {
 
   if (!Column) return null;
 
+  const handleUpdateIssue = async (issue: TIssue, data: Partial<TIssue>) => {
+    if (updateIssue) await updateIssue(issue.project_id, issue.id, data);
+  };
+
   return (
     <WithDisplayPropertiesHOC
       displayProperties={displayProperties}
@@ -38,22 +45,12 @@ export const IssueColumn = observer(function IssueColumn(props: Props) {
     >
       <td
         tabIndex={0}
-        className="h-11 min-w-36 text-sm after:absolute after:w-full after:bottom-[-1px] after:border after:border-custom-border-100 border-r-[1px] border-custom-border-100"
+        className="h-11 min-w-36 border-r-[1px] border-subtle text-13 after:absolute after:bottom-[-1px] after:w-full after:border after:border-subtle"
         ref={tableCellRef}
       >
         <Column
           issue={issueDetail}
-          onChange={(issue: TIssue, data: Partial<TIssue>) =>
-            updateIssue &&
-            updateIssue(issue.project_id, issue.id, data).then(() => {
-              captureSuccess({
-                eventName: WORK_ITEM_TRACKER_EVENTS.update,
-                payload: {
-                  id: issue.id,
-                },
-              });
-            })
-          }
+          onChange={handleUpdateIssue}
           disabled={disableUserActions}
           onClose={() => tableCellRef?.current?.focus()}
         />
diff --git a/apps/web/core/components/issues/issue-layouts/spreadsheet/issue-row.tsx b/apps/web/core/components/issues/issue-layouts/spreadsheet/issue-row.tsx
index 4bb681e8b..6d060c4db 100644
--- a/apps/web/core/components/issues/issue-layouts/spreadsheet/issue-row.tsx
+++ b/apps/web/core/components/issues/issue-layouts/spreadsheet/issue-row.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { Dispatch, MouseEvent, MutableRefObject, SetStateAction } from "react";
 import { useRef, useState } from "react";
 import { observer } from "mobx-react";
@@ -75,10 +81,13 @@ export const SpreadsheetIssueRow = observer(function SpreadsheetIssueRow(props:
   const { issueMap } = useIssues();
 
   // derived values
+  const issue = issueMap[issueId];
   const subIssues = subIssuesStore.subIssuesByIssueId(issueId);
   const isIssueSelected = selectionHelpers.getIsEntitySelected(issueId);
   const isIssueActive = selectionHelpers.getIsEntityActive(issueId);
 
+  if (!issue) return null;
+
   return (
     <>
       {/* first column/ issue name and key column */}
@@ -88,17 +97,17 @@ export const SpreadsheetIssueRow = observer(function SpreadsheetIssueRow(props:
         placeholderChildren={
           <td
             colSpan={100}
-            className="border-[0.5px] border-transparent border-b-custom-border-200"
+            className="border-[0.5px] border-transparent border-b-subtle-1"
             style={{ height: "calc(2.75rem - 1px)" }}
           />
         }
-        classNames={cn("bg-custom-background-100 transition-[background-color]", {
+        classNames={cn("bg-surface-1 transition-[background-color]", {
           "group selected-issue-row": isIssueSelected,
-          "border-[0.5px] border-custom-border-400": isIssueActive,
+          "border-[0.5px] border-strong-1": isIssueActive,
         })}
         verticalOffset={100}
         shouldRecordHeights={false}
-        defaultValue={shouldRenderByDefault || isIssueNew(issueMap[issueId])}
+        defaultValue={shouldRenderByDefault || isIssueNew(issue)}
       >
         <IssueRowDetails
           issueId={issueId}
@@ -208,8 +217,8 @@ const IssueRowDetails = observer(function IssueRowDetails(props: IssueRowDetails
   const customActionButton = (
     <div
       ref={menuActionRef}
-      className={`flex items-center h-full w-full cursor-pointer rounded p-1 text-custom-sidebar-text-400 hover:bg-custom-background-80 ${
-        isMenuActive ? "bg-custom-background-80 text-custom-text-100" : "text-custom-text-200"
+      className={`flex h-full w-full cursor-pointer items-center rounded-sm p-1 text-placeholder hover:bg-layer-1 ${
+        isMenuActive ? "bg-layer-1 text-primary" : "text-secondary"
       }`}
       onClick={() => setIsMenuActive(!isMenuActive)}
     >
@@ -255,7 +264,7 @@ const IssueRowDetails = observer(function IssueRowDetails(props: IssueRowDetails
         id={`issue-${issueId}`}
         ref={cellRef}
         tabIndex={0}
-        className="relative md:sticky left-0 z-10 group/list-block bg-custom-background-100 max-w-lg"
+        className="group/list-block relative left-0 z-10 max-w-lg bg-surface-1 md:sticky"
       >
         <ControlLink
           href={workItemLink}
@@ -265,10 +274,10 @@ const IssueRowDetails = observer(function IssueRowDetails(props: IssueRowDetails
         >
           <Row
             className={cn(
-              "group clickable cursor-pointer h-11 w-full flex items-center text-sm after:absolute border-r-[0.5px] z-10 border-custom-border-200 bg-transparent group-[.selected-issue-row]:bg-custom-primary-100/5 group-[.selected-issue-row]:hover:bg-custom-primary-100/10",
+              "group clickable z-10 flex h-11 w-full cursor-pointer items-center border-r-[0.5px] border-subtle-1 bg-transparent text-13 group-[.selected-issue-row]:bg-accent-primary/5 after:absolute group-[.selected-issue-row]:hover:bg-accent-primary/10",
               {
                 "border-b-[0.5px]": !getIsIssuePeeked(issueDetail.id),
-                "border border-custom-primary-70 hover:border-custom-primary-70":
+                "border border-accent-strong hover:border-accent-strong":
                   getIsIssuePeeked(issueDetail.id) && nestingLevel === peekIssue?.nestingLevel,
                 "shadow-[8px_22px_22px_10px_rgba(0,0,0,0.05)]": isScrolled.current,
               }
@@ -276,13 +285,14 @@ const IssueRowDetails = observer(function IssueRowDetails(props: IssueRowDetails
           >
             {/* Identifier section - conditionally rendered */}
             {displayProperties?.key && (
-              <div className="flex-shrink-0 flex items-center h-full min-w-24">
-                <div className="relative flex cursor-pointer items-center text-xs hover:text-custom-text-100">
+              <div className="flex h-full min-w-24 flex-shrink-0 items-center">
+                <div className="relative flex cursor-pointer items-center text-11 hover:text-primary">
                   {issueDetail.project_id && (
                     <IssueIdentifier
                       issueId={issueDetail.id}
                       projectId={issueDetail.project_id}
-                      textContainerClassName="text-sm md:text-xs text-custom-text-300"
+                      size="xs"
+                      variant="tertiary"
                       displayProperties={displayProperties}
                     />
                   )}
@@ -292,7 +302,7 @@ const IssueRowDetails = observer(function IssueRowDetails(props: IssueRowDetails
 
             {/* Workitem section */}
             <div
-              className={cn("flex items-center gap-0.5 py-2 flex-grow", {
+              className={cn("flex flex-grow items-center gap-0.5 py-2", {
                 "min-w-[360px]": !displayProperties?.key,
                 "min-w-60": displayProperties?.key,
               })}
@@ -309,12 +319,12 @@ const IssueRowDetails = observer(function IssueRowDetails(props: IssueRowDetails
                   }
                   disabled={issueDetail.project_id === projectId}
                 >
-                  <div className="flex-shrink-0 grid place-items-center w-3.5 mr-1 absolute left-1">
+                  <div className="absolute left-1 mr-1 grid w-3.5 flex-shrink-0 place-items-center">
                     <MultipleSelectEntityAction
                       className={cn(
-                        "opacity-0 pointer-events-none group-hover/list-block:opacity-100 group-hover/list-block:pointer-events-auto transition-opacity",
+                        "pointer-events-none opacity-0 transition-opacity group-hover/list-block:pointer-events-auto group-hover/list-block:opacity-100",
                         {
-                          "opacity-100 pointer-events-auto": isIssueSelected,
+                          "pointer-events-auto opacity-100": isIssueSelected,
                         }
                       )}
                       groupId={SPREADSHEET_SELECT_GROUP}
@@ -330,11 +340,11 @@ const IssueRowDetails = observer(function IssueRowDetails(props: IssueRowDetails
               {nestingLevel !== 0 && <div style={{ width: subIssueIndentation }} />}
 
               {/* sub-issues chevron */}
-              <div className="grid place-items-center size-4">
+              <div className="grid size-4 place-items-center">
                 {subIssuesCount > 0 && !isEpic && (
                   <button
                     type="button"
-                    className="grid place-items-center size-4 rounded-sm text-custom-text-400 hover:text-custom-text-300"
+                    className="grid size-4 place-items-center rounded-xs text-placeholder hover:text-tertiary"
                     onClick={handleToggleExpand}
                   >
                     <ChevronRightIcon
@@ -347,12 +357,12 @@ const IssueRowDetails = observer(function IssueRowDetails(props: IssueRowDetails
                 )}
               </div>
 
-              <div className="flex items-center gap-2 justify-between h-full w-full truncate my-auto">
-                <div className="w-full line-clamp-1 text-sm text-custom-text-100">
+              <div className="my-auto flex h-full w-full items-center justify-between gap-2 truncate">
+                <div className="line-clamp-1 w-full text-14 text-primary">
                   <div className="w-full overflow-hidden">
                     <Tooltip tooltipContent={issueDetail.name} isMobile={isMobile}>
                       <div
-                        className="h-full w-full cursor-pointer truncate pr-4 text-left text-[0.825rem] text-custom-text-100 focus:outline-none"
+                        className="h-full w-full cursor-pointer truncate pr-4 text-left text-13 text-primary focus:outline-none"
                         tabIndex={-1}
                       >
                         {issueDetail.name}
@@ -361,7 +371,7 @@ const IssueRowDetails = observer(function IssueRowDetails(props: IssueRowDetails
                   </div>
                 </div>
                 <div
-                  className={`opacity-0 group-hover:opacity-100 transition-opacity ${isMenuActive ? "!opacity-100" : ""}`}
+                  className={`opacity-0 transition-opacity group-hover:opacity-100 ${isMenuActive ? "!opacity-100" : ""}`}
                   onClick={(e) => e.stopPropagation()}
                 >
                   {quickActions({
diff --git a/apps/web/core/components/issues/issue-layouts/spreadsheet/roots/cycle-root.tsx b/apps/web/core/components/issues/issue-layouts/spreadsheet/roots/cycle-root.tsx
index d5e2c3744..0337318d0 100644
--- a/apps/web/core/components/issues/issue-layouts/spreadsheet/roots/cycle-root.tsx
+++ b/apps/web/core/components/issues/issue-layouts/spreadsheet/roots/cycle-root.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React, { useCallback } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
diff --git a/apps/web/core/components/issues/issue-layouts/spreadsheet/roots/module-root.tsx b/apps/web/core/components/issues/issue-layouts/spreadsheet/roots/module-root.tsx
index 7c95fd3a8..dbb3a50ec 100644
--- a/apps/web/core/components/issues/issue-layouts/spreadsheet/roots/module-root.tsx
+++ b/apps/web/core/components/issues/issue-layouts/spreadsheet/roots/module-root.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
diff --git a/apps/web/core/components/issues/issue-layouts/spreadsheet/roots/project-root.tsx b/apps/web/core/components/issues/issue-layouts/spreadsheet/roots/project-root.tsx
index 1b3f17ff9..bec8eeaa1 100644
--- a/apps/web/core/components/issues/issue-layouts/spreadsheet/roots/project-root.tsx
+++ b/apps/web/core/components/issues/issue-layouts/spreadsheet/roots/project-root.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
diff --git a/apps/web/core/components/issues/issue-layouts/spreadsheet/roots/project-view-root.tsx b/apps/web/core/components/issues/issue-layouts/spreadsheet/roots/project-view-root.tsx
index ec798f5f1..1899af8ff 100644
--- a/apps/web/core/components/issues/issue-layouts/spreadsheet/roots/project-view-root.tsx
+++ b/apps/web/core/components/issues/issue-layouts/spreadsheet/roots/project-view-root.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
diff --git a/apps/web/core/components/issues/issue-layouts/spreadsheet/roots/workspace-root.tsx b/apps/web/core/components/issues/issue-layouts/spreadsheet/roots/workspace-root.tsx
index 73bac5508..b1201baf0 100644
--- a/apps/web/core/components/issues/issue-layouts/spreadsheet/roots/workspace-root.tsx
+++ b/apps/web/core/components/issues/issue-layouts/spreadsheet/roots/workspace-root.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React, { useCallback } from "react";
 import { observer } from "mobx-react";
 // plane constants
diff --git a/apps/web/core/components/issues/issue-layouts/spreadsheet/spreadsheet-header-column.tsx b/apps/web/core/components/issues/issue-layouts/spreadsheet/spreadsheet-header-column.tsx
index 0cb2c840e..99576d60b 100644
--- a/apps/web/core/components/issues/issue-layouts/spreadsheet/spreadsheet-header-column.tsx
+++ b/apps/web/core/components/issues/issue-layouts/spreadsheet/spreadsheet-header-column.tsx
@@ -1,9 +1,15 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useRef } from "react";
 //types
 import { observer } from "mobx-react";
 import type { IIssueDisplayFilterOptions, IIssueDisplayProperties } from "@plane/types";
 //components
-import { shouldRenderColumn } from "@/plane-web/helpers/issue-filter.helper";
+import { shouldRenderColumn } from "@/helpers/issue-filter.helper";
 import { WithDisplayPropertiesHOC } from "../properties/with-display-properties-HOC";
 import { HeaderColumn } from "./columns/header-column";
 
@@ -30,7 +36,7 @@ export const SpreadsheetHeaderColumn = observer(function SpreadsheetHeaderColumn
       shouldRenderProperty={() => shouldRenderProperty}
     >
       <th
-        className="h-11 min-w-36 items-center bg-custom-background-90 text-sm font-medium py-1 border border-b-0 border-t-0 border-custom-border-100"
+        className="h-11 min-w-36 items-center border border-t-0 border-b-0 border-subtle bg-layer-1 py-1 text-13 font-medium"
         ref={tableHeaderCellRef}
         tabIndex={0}
       >
diff --git a/apps/web/core/components/issues/issue-layouts/spreadsheet/spreadsheet-header.tsx b/apps/web/core/components/issues/issue-layouts/spreadsheet/spreadsheet-header.tsx
index c5eb1fb1f..c9e2bee54 100644
--- a/apps/web/core/components/issues/issue-layouts/spreadsheet/spreadsheet-header.tsx
+++ b/apps/web/core/components/issues/issue-layouts/spreadsheet/spreadsheet-header.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // constants
@@ -41,23 +47,23 @@ export const SpreadsheetHeader = observer(function SpreadsheetHeader(props: Prop
   const canSelectIssues = canEditProperties(projectId?.toString()) && !selectionHelpers.isSelectionDisabled;
 
   return (
-    <thead className="sticky top-0 left-0 z-[12] border-b-[0.5px] border-custom-border-100">
+    <thead className="sticky top-0 left-0 z-[12] border-b-[0.5px] border-subtle">
       <tr>
         {/* Single header column containing both identifier and workitem */}
         <th
-          className="group/list-header md:sticky min-w-60 left-0 z-[15] h-11 bg-custom-background-90 text-sm font-medium border-r-[0.5px] border-custom-border-100"
+          className="group/list-header left-0 z-[15] h-11 min-w-60 border-r-[0.5px] border-subtle bg-layer-1 text-13 font-medium md:sticky"
           tabIndex={-1}
         >
-          <div className="flex items-center gap-2 h-full w-full px-page-x">
+          <div className="flex h-full w-full items-center gap-2 px-page-x">
             {/* Workitem header section */}
-            <div className="flex items-center gap-1 flex-grow h-full py-2.5 min-w-80">
+            <div className="flex h-full min-w-80 flex-grow items-center gap-1 py-2.5">
               {canSelectIssues && (
-                <div className="flex-shrink-0 flex items-center w-3.5 mr-1">
+                <div className="mr-1 flex w-3.5 flex-shrink-0 items-center">
                   <MultipleSelectGroupAction
                     className={cn(
-                      "size-3.5 opacity-0 pointer-events-none group-hover/list-header:opacity-100 group-hover/list-header:pointer-events-auto !outline-none",
+                      "pointer-events-none size-3.5 opacity-0 !outline-none group-hover/list-header:pointer-events-auto group-hover/list-header:opacity-100",
                       {
-                        "opacity-100 pointer-events-auto": !isGroupSelectionEmpty,
+                        "pointer-events-auto opacity-100": !isGroupSelectionEmpty,
                       }
                     )}
                     groupID={SPREADSHEET_SELECT_GROUP}
@@ -65,7 +71,7 @@ export const SpreadsheetHeader = observer(function SpreadsheetHeader(props: Prop
                   />
                 </div>
               )}
-              <span className="text-sm font-medium">{`${isEpic ? "Epics" : "Work items"}`}</span>
+              <span className="text-13 font-medium">{`${isEpic ? "Epics" : "Work items"}`}</span>
             </div>
           </div>
         </th>
diff --git a/apps/web/core/components/issues/issue-layouts/spreadsheet/spreadsheet-table.tsx b/apps/web/core/components/issues/issue-layouts/spreadsheet/spreadsheet-table.tsx
index 43040f874..799eb9b71 100644
--- a/apps/web/core/components/issues/issue-layouts/spreadsheet/spreadsheet-table.tsx
+++ b/apps/web/core/components/issues/issue-layouts/spreadsheet/spreadsheet-table.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { MutableRefObject } from "react";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { observer } from "mobx-react";
@@ -105,7 +111,7 @@ export const SpreadsheetTable = observer(function SpreadsheetTable(props: Props)
   const displayPropertiesCount = getDisplayPropertiesCount(displayProperties, ignoreFieldsForCounting);
 
   return (
-    <table className="overflow-y-auto bg-custom-background-100 w-full" onKeyDown={handleKeyBoardNavigation}>
+    <table className="w-full overflow-y-auto bg-surface-1" onKeyDown={handleKeyBoardNavigation}>
       <SpreadsheetHeader
         displayProperties={displayProperties}
         displayFilters={displayFilters}
@@ -138,7 +144,9 @@ export const SpreadsheetTable = observer(function SpreadsheetTable(props: Props)
       </tbody>
       {canLoadMoreIssues && (
         <tfoot ref={setIntersectionElement}>
-          <SpreadsheetIssueRowLoader columnCount={displayPropertiesCount} />
+          {Array.from({ length: 3 }).map((_, index) => (
+            <SpreadsheetIssueRowLoader key={index} columnCount={displayPropertiesCount} />
+          ))}
         </tfoot>
       )}
     </table>
diff --git a/apps/web/core/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx b/apps/web/core/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx
index 10de09042..f3f143db4 100644
--- a/apps/web/core/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx
+++ b/apps/web/core/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React, { useRef } from "react";
 import { observer } from "mobx-react";
 // plane constants
@@ -73,7 +79,7 @@ export const SpreadsheetView = observer(function SpreadsheetView(props: Props) {
 
   if (!issueIds || issueIds.length === 0) return <></>;
   return (
-    <div className="relative flex h-full w-full flex-col overflow-x-hidden whitespace-nowrap rounded-lg bg-custom-background-200 text-custom-text-200">
+    <div className="relative flex h-full w-full flex-col overflow-x-hidden bg-layer-1 whitespace-nowrap text-secondary">
       <div ref={portalRef} className="spreadsheet-menu-portal" />
       <MultipleSelectGroup
         containerRef={containerRef}
@@ -103,8 +109,8 @@ export const SpreadsheetView = observer(function SpreadsheetView(props: Props) {
                 isEpic={isEpic}
               />
             </div>
-            <div className="border-t border-custom-border-100">
-              <div className="z-5 sticky bottom-0 left-0 mb-3">
+            <div className="border-t border-subtle">
+              <div className="sticky bottom-0 left-0 z-5">
                 {enableQuickCreateIssue && !disableIssueCreation && (
                   <QuickAddIssueRoot
                     layout={EIssueLayoutTypes.SPREADSHEET}
diff --git a/apps/web/core/components/issues/issue-layouts/utils.tsx b/apps/web/core/components/issues/issue-layouts/utils.tsx
index 524af27da..f6cd86b64 100644
--- a/apps/web/core/components/issues/issue-layouts/utils.tsx
+++ b/apps/web/core/components/issues/issue-layouts/utils.tsx
@@ -1,4 +1,10 @@
-import type { CSSProperties, FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { CSSProperties } from "react";
 import { extractInstruction } from "@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item";
 import { clone, isNil, pull, uniq, concat } from "lodash-es";
 import scrollIntoView from "smooth-scroll-into-view-if-needed";
@@ -135,7 +141,7 @@ const getProjectColumns = (): IGroupByColumn[] | undefined => {
         id: project.id,
         name: project.name,
         icon: (
-          <div className="w-6 h-6 grid place-items-center flex-shrink-0">
+          <div className="grid h-6 w-6 flex-shrink-0 place-items-center">
             <Logo logo={project.logo_props} />
           </div>
         ),
@@ -589,7 +595,7 @@ export const removeNillKeys = <T,>(obj: T) =>
   Object.fromEntries(Object.entries(obj ?? {}).filter(([key, value]) => key && !isNil(value)));
 
 /**
- * This Method returns if the the grouped values are subGrouped
+ * This Method returns if the grouped values are subGrouped
  * @param groupedIssueIds
  * @returns
  */
@@ -748,3 +754,18 @@ export const isFiltersApplied = (filters: IIssueFilterOptions): boolean =>
     if (Array.isArray(value)) return value.length > 0;
     return value !== undefined && value !== null && value !== "";
   });
+
+/**
+ * Calculates the minimum width needed for issue identifiers in list layouts
+ * @param projectIdentifierLength - Length of the project identifier (e.g., "PROJ" = 4)
+ * @param maxSequenceId - Maximum sequence ID in the project (e.g., 1234)
+ * @returns Width in pixels needed to display the identifier
+ *
+ * @example
+ * // For "PROJ-1234"
+ * calculateIdentifierWidth(4, 1234) // Returns width for "PROJ" + "-" + "1234"
+ */
+export const calculateIdentifierWidth = (projectIdentifierLength: number, maxSequenceId: number): number => {
+  const sequenceDigits = Math.max(1, Math.floor(Math.log10(maxSequenceId)) + 1);
+  return projectIdentifierLength * 7 + 7 + sequenceDigits * 7; // project identifier chars + dash + sequence digits
+};
diff --git a/apps/web/core/components/issues/issue-modal/base.tsx b/apps/web/core/components/issues/issue-modal/base.tsx
index 553f9ff21..80a04f20e 100644
--- a/apps/web/core/components/issues/issue-modal/base.tsx
+++ b/apps/web/core/components/issues/issue-modal/base.tsx
@@ -1,8 +1,13 @@
-import React, { useEffect, useRef, useState } from "react";
-import { xor } from "lodash-es";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useEffect, useRef, useState } from "react";
+import { isEqual, xor } from "lodash-es";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
-import { WORK_ITEM_TRACKER_EVENTS } from "@plane/constants";
 // Plane imports
 import { useTranslation } from "@plane/i18n";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
@@ -10,7 +15,6 @@ import type { TBaseIssue, TIssue } from "@plane/types";
 import { EIssuesStoreType } from "@plane/types";
 import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
 // hooks
-import { captureError, captureSuccess } from "@/helpers/event-tracker.helper";
 import { useIssueModal } from "@/hooks/context/use-issue-modal";
 import { useCycle } from "@/hooks/store/use-cycle";
 import { useIssueDetail } from "@/hooks/store/use-issue-detail";
@@ -44,6 +48,7 @@ export const CreateUpdateIssueModalBase = observer(function CreateUpdateIssueMod
     modalTitle,
     primaryButtonText,
     isProjectSelectionDisabled = false,
+    showActionItemsOnUpdate = false,
   } = props;
   const issueStoreType = useIssueStoreType();
 
@@ -240,10 +245,6 @@ export const CreateUpdateIssueModalBase = observer(function CreateUpdateIssueMod
           />
         ),
       });
-      captureSuccess({
-        eventName: WORK_ITEM_TRACKER_EVENTS.create,
-        payload: { id: response.id },
-      });
       if (!createMore) handleClose();
       if (createMore && issueTitleRef) issueTitleRef?.current?.focus();
       setDescription("<p></p>");
@@ -255,15 +256,71 @@ export const CreateUpdateIssueModalBase = observer(function CreateUpdateIssueMod
         title: t("error"),
         message: error?.error ?? t(is_draft_issue ? "draft_creation_failed" : "issue_creation_failed"),
       });
-      captureError({
-        eventName: WORK_ITEM_TRACKER_EVENTS.create,
-        payload: { id: payload.id },
-        error: error as Error,
-      });
       throw error;
     }
   };
 
+  const handleCycleChange = async (data: Partial<TIssue> | undefined, payload: Partial<TIssue>) => {
+    if (!workspaceSlug || !data?.project_id || !data?.id) return;
+    // return if user is not trying to change the cycle, i.e
+    // - cycle_id is not present in payload
+    // - cycle_id is the same as the current cycle id
+    if (!("cycle_id" in payload) || isEqual(data?.cycle_id, payload.cycle_id)) return;
+
+    const slug = workspaceSlug.toString();
+
+    // Removing the cycle
+    const currentCycleId = data?.cycle_id;
+    if (currentCycleId && payload.cycle_id === null) {
+      await issues.removeIssueFromCycle(slug, data.project_id, currentCycleId, data.id);
+      fetchCycleDetails(slug, data.project_id, currentCycleId).catch((error) => {
+        console.error(error);
+      });
+    }
+
+    // Adding the cycle
+    const newCycleId = payload.cycle_id;
+    if (newCycleId && newCycleId !== "" && (payload.cycle_id !== cycleId || storeType !== EIssuesStoreType.CYCLE)) {
+      await addIssueToCycle(data as TBaseIssue, newCycleId);
+    }
+  };
+
+  const handleModuleChange = async (data: Partial<TIssue>, payload: Partial<TIssue>) => {
+    if (!workspaceSlug || !data?.project_id || !data?.id) return;
+    // return if user is not trying to change the module, i.e
+    // - module_ids is not present in payload
+    // - module_ids is not an array
+    // - module_ids is the same as the current module ids
+    if (
+      !("module_ids" in payload) ||
+      !Array.isArray(payload.module_ids) ||
+      isEqual(data?.module_ids, payload.module_ids)
+    )
+      return;
+
+    const updatedModuleIds = xor(data.module_ids, payload.module_ids);
+    const modulesToAdd: string[] = [];
+    const modulesToRemove: string[] = [];
+
+    for (const moduleId of updatedModuleIds) {
+      if (data.module_ids?.includes(moduleId)) {
+        modulesToRemove.push(moduleId);
+      } else {
+        modulesToAdd.push(moduleId);
+      }
+    }
+    // update modules if there are modules to add or remove
+    if (modulesToAdd.length > 0 || modulesToRemove.length > 0) {
+      await issues.changeModulesInIssue(
+        workspaceSlug.toString(),
+        data.project_id,
+        data.id,
+        modulesToAdd,
+        modulesToRemove
+      );
+    }
+  };
+
   const handleUpdateIssue = async (payload: Partial<TIssue>): Promise<TIssue | undefined> => {
     if (!workspaceSlug || !payload.project_id || !data?.id) return;
 
@@ -271,41 +328,10 @@ export const CreateUpdateIssueModalBase = observer(function CreateUpdateIssueMod
       if (isDraft) await draftIssues.updateIssue(workspaceSlug.toString(), data.id, payload);
       else if (updateIssue) await updateIssue(payload.project_id, data.id, payload);
 
-      // check if we should add/remove issue to/from cycle
-      if (
-        payload.cycle_id &&
-        payload.cycle_id !== "" &&
-        (payload.cycle_id !== cycleId || storeType !== EIssuesStoreType.CYCLE)
-      ) {
-        await addIssueToCycle(data as TBaseIssue, payload.cycle_id);
-      }
-      if (data.cycle_id && !payload.cycle_id && data.project_id) {
-        await issues.removeIssueFromCycle(workspaceSlug.toString(), data.project_id, data.cycle_id, data.id);
-        fetchCycleDetails(workspaceSlug.toString(), data.project_id, data.cycle_id);
-      }
-
-      if (data.module_ids && payload.module_ids && data.project_id) {
-        const updatedModuleIds = xor(data.module_ids, payload.module_ids);
-        const modulesToAdd: string[] = [];
-        const modulesToRemove: string[] = [];
-
-        for (const moduleId of updatedModuleIds) {
-          if (data.module_ids.includes(moduleId)) {
-            modulesToRemove.push(moduleId);
-          } else {
-            modulesToAdd.push(moduleId);
-          }
-        }
-        await issues.changeModulesInIssue(
-          workspaceSlug.toString(),
-          data.project_id,
-          data.id,
-          modulesToAdd,
-          modulesToRemove
-        );
-      }
-
-      // add other property values
+      // Run cycle, module, and property changes sequentially to avoid
+      // optimistic store writes from racing against each other.
+      await handleCycleChange(data, payload);
+      await handleModuleChange(data, payload);
       await handleCreateUpdatePropertyValues({
         issueId: data.id,
         issueTypeId: payload.type_id,
@@ -318,10 +344,14 @@ export const CreateUpdateIssueModalBase = observer(function CreateUpdateIssueMod
         type: TOAST_TYPE.SUCCESS,
         title: t("success"),
         message: t("issue_updated_successfully"),
-      });
-      captureSuccess({
-        eventName: WORK_ITEM_TRACKER_EVENTS.update,
-        payload: { id: data.id },
+        actionItems:
+          showActionItemsOnUpdate && payload.project_id ? (
+            <CreateIssueToastActionItems
+              workspaceSlug={workspaceSlug.toString()}
+              projectId={payload.project_id}
+              issueId={data.id}
+            />
+          ) : undefined,
       });
       handleClose();
     } catch (error: any) {
@@ -331,11 +361,6 @@ export const CreateUpdateIssueModalBase = observer(function CreateUpdateIssueMod
         title: t("error"),
         message: error?.error ?? t("issue_could_not_be_updated"),
       });
-      captureError({
-        eventName: WORK_ITEM_TRACKER_EVENTS.update,
-        payload: { id: data.id },
-        error: error as Error,
-      });
     }
   };
 
@@ -392,7 +417,7 @@ export const CreateUpdateIssueModalBase = observer(function CreateUpdateIssueMod
       isOpen={isOpen}
       position={EModalPosition.TOP}
       width={isDuplicateModalOpen ? EModalWidth.VIXL : EModalWidth.XXXXL}
-      className="!bg-transparent rounded-lg shadow-none transition-[width] ease-linear"
+      className="rounded-lg !bg-transparent shadow-none transition-[width] ease-linear"
     >
       {withDraftIssueWrapper ? (
         <DraftIssueLayout {...commonIssueModalProps} changesMade={changesMade} onChange={handleFormChange} />
diff --git a/apps/web/core/components/issues/issue-modal/components/default-properties.tsx b/apps/web/core/components/issues/issue-modal/components/default-properties.tsx
index 912487418..dee03b21d 100644
--- a/apps/web/core/components/issues/issue-modal/components/default-properties.tsx
+++ b/apps/web/core/components/issues/issue-modal/components/default-properties.tsx
@@ -1,4 +1,10 @@
-import React, { useState } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
 import { observer } from "mobx-react";
 import type { Control } from "react-hook-form";
 import { Controller } from "react-hook-form";
@@ -265,7 +271,7 @@ export const IssueDefaultProperties = observer(function IssueDefaultProperties(p
             customButton={
               <button
                 type="button"
-                className="flex cursor-pointer items-center justify-between gap-1 h-full rounded border-[0.5px] border-custom-border-300 px-2 py-0.5 text-xs hover:bg-custom-background-80"
+                className="flex h-full cursor-pointer items-center justify-between gap-1 rounded-sm border-[0.5px] border-strong px-2 py-0.5 text-caption-sm-regular hover:bg-layer-1"
               >
                 {selectedParentIssue?.project_id && (
                   <IssueIdentifier
@@ -273,7 +279,7 @@ export const IssueDefaultProperties = observer(function IssueDefaultProperties(p
                     issueTypeId={selectedParentIssue.type_id}
                     projectIdentifier={selectedParentIssue?.project__identifier}
                     issueSequenceId={selectedParentIssue.sequence_id}
-                    textContainerClassName="text-xs"
+                    size="xs"
                   />
                 )}
               </button>
@@ -307,7 +313,7 @@ export const IssueDefaultProperties = observer(function IssueDefaultProperties(p
         ) : (
           <button
             type="button"
-            className="flex cursor-pointer items-center justify-between gap-1 h-full rounded border-[0.5px] border-custom-border-300 px-2 py-0.5 text-xs hover:bg-custom-background-80"
+            className="flex h-full cursor-pointer items-center justify-between gap-1 rounded-sm border-[0.5px] border-strong px-2 py-0.5 text-caption-sm-regular hover:bg-layer-1"
             onClick={() => setParentIssueListModalOpen(true)}
           >
             <ParentPropertyIcon className="h-3 w-3 flex-shrink-0" />
diff --git a/apps/web/core/components/issues/issue-modal/components/description-editor.tsx b/apps/web/core/components/issues/issue-modal/components/description-editor.tsx
index e049ab4ac..54225c6b7 100644
--- a/apps/web/core/components/issues/issue-modal/components/description-editor.tsx
+++ b/apps/web/core/components/issues/issue-modal/components/description-editor.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React, { useEffect, useState } from "react";
 import { observer } from "mobx-react";
 import type { Control } from "react-hook-form";
@@ -23,7 +29,7 @@ import { useWorkspace } from "@/hooks/store/use-workspace";
 import useKeypress from "@/hooks/use-keypress";
 import { usePlatformOS } from "@/hooks/use-platform-os";
 // plane web services
-import { WorkspaceService } from "@/plane-web/services";
+import { WorkspaceService } from "@/services/workspace.service";
 // services
 import { AIService } from "@/services/ai.service";
 const workspaceService = new WorkspaceService();
@@ -148,9 +154,9 @@ export const IssueDescriptionEditor = observer(function IssueDescriptionEditor(p
   };
 
   return (
-    <div className="border-[0.5px] border-custom-border-200 rounded-lg relative">
+    <div className="relative rounded-lg border-[0.5px] border-subtle-1 bg-layer-2">
       {descriptionHtmlData === undefined || !projectId ? (
-        <Loader className="min-h-[120px] max-h-64 space-y-2 overflow-hidden rounded-md border border-custom-border-200 p-3 py-2 pt-3">
+        <Loader className="max-h-64 min-h-[120px] space-y-2 overflow-hidden rounded-md border border-subtle p-3 py-2 pt-3">
           <Loader.Item width="100%" height="26px" />
           <div className="flex items-center gap-2">
             <Loader.Item width="26px" height="26px" />
@@ -164,7 +170,7 @@ export const IssueDescriptionEditor = observer(function IssueDescriptionEditor(p
           <div className="flex items-center gap-2">
             <Loader.Item width="50%" height="26px" />
           </div>
-          <div className="border-0.5 absolute bottom-2 right-3.5 z-10 flex items-center gap-2">
+          <div className="border-0.5 absolute right-3.5 bottom-2 z-10 flex items-center gap-2">
             <Loader.Item width="100px" height="26px" />
             <Loader.Item width="50px" height="26px" />
           </div>
@@ -241,7 +247,7 @@ export const IssueDescriptionEditor = observer(function IssueDescriptionEditor(p
             {issueName && issueName.trim() !== "" && config?.has_llm_configured && (
               <button
                 type="button"
-                className={`flex items-center gap-1 rounded bg-custom-background-90 hover:bg-custom-background-80 px-1.5 py-1 text-xs ${
+                className={`flex items-center gap-1 rounded-sm bg-surface-2 px-1.5 py-1 text-caption-sm-regular hover:bg-layer-1 ${
                   iAmFeelingLucky ? "cursor-wait" : ""
                 }`}
                 onClick={handleAutoGenerateDescription}
@@ -272,7 +278,7 @@ export const IssueDescriptionEditor = observer(function IssueDescriptionEditor(p
                 button={
                   <button
                     type="button"
-                    className="flex items-center gap-1 rounded px-1.5 py-1 text-xs bg-custom-background-90 hover:bg-custom-background-80"
+                    className="flex items-center gap-1 rounded-sm bg-surface-2 px-1.5 py-1 text-caption-sm-regular hover:bg-layer-1"
                     onClick={() => setGptAssistantModal((prevData) => !prevData)}
                     tabIndex={-1}
                   >
diff --git a/apps/web/core/components/issues/issue-modal/components/index.ts b/apps/web/core/components/issues/issue-modal/components/index.ts
index 3e0c1d4d9..951a4c160 100644
--- a/apps/web/core/components/issues/issue-modal/components/index.ts
+++ b/apps/web/core/components/issues/issue-modal/components/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./project-select";
 export * from "./parent-tag";
 export * from "./title-input";
diff --git a/apps/web/core/components/issues/issue-modal/components/parent-tag.tsx b/apps/web/core/components/issues/issue-modal/components/parent-tag.tsx
index 8e0e893ca..67748b18a 100644
--- a/apps/web/core/components/issues/issue-modal/components/parent-tag.tsx
+++ b/apps/web/core/components/issues/issue-modal/components/parent-tag.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 import { observer } from "mobx-react";
 import type { Control } from "react-hook-form";
@@ -33,7 +39,7 @@ export const IssueParentTag = observer(function IssueParentTag(props: TIssuePare
       control={control}
       name="parent_id"
       render={({ field: { onChange } }) => (
-        <div className="flex w-min items-center gap-2 whitespace-nowrap rounded bg-custom-background-90 p-2 text-xs">
+        <div className="flex w-min items-center gap-2 rounded-sm bg-surface-2 p-2 text-caption-sm-regular whitespace-nowrap">
           <div className="flex items-center gap-2">
             <span
               className="block h-1.5 w-1.5 rounded-full"
@@ -41,14 +47,14 @@ export const IssueParentTag = observer(function IssueParentTag(props: TIssuePare
                 backgroundColor: selectedParentIssue.state__color,
               }}
             />
-            <span className="flex-shrink-0 text-custom-text-200">
+            <span className="flex-shrink-0 text-secondary">
               {selectedParentIssue?.project_id && (
                 <IssueIdentifier
                   projectId={selectedParentIssue.project_id}
                   issueTypeId={selectedParentIssue.type_id}
                   projectIdentifier={selectedParentIssue?.project__identifier}
                   issueSequenceId={selectedParentIssue.sequence_id}
-                  textContainerClassName="text-xs"
+                  size="xs"
                 />
               )}
             </span>
diff --git a/apps/web/core/components/issues/issue-modal/components/project-select.tsx b/apps/web/core/components/issues/issue-modal/components/project-select.tsx
index b996bbbe2..2c2d60522 100644
--- a/apps/web/core/components/issues/issue-modal/components/project-select.tsx
+++ b/apps/web/core/components/issues/issue-modal/components/project-select.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 import { observer } from "mobx-react";
 import type { Control } from "react-hook-form";
diff --git a/apps/web/core/components/issues/issue-modal/components/title-input.tsx b/apps/web/core/components/issues/issue-modal/components/title-input.tsx
index 1eb607d97..cf1a1795f 100644
--- a/apps/web/core/components/issues/issue-modal/components/title-input.tsx
+++ b/apps/web/core/components/issues/issue-modal/components/title-input.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 import { observer } from "mobx-react";
 import type { Control, FormState } from "react-hook-form";
@@ -66,13 +72,13 @@ export const IssueTitleInput = observer(function IssueTitleInput(props: TIssueTi
             ref={issueTitleRef || ref}
             hasError={Boolean(errors.name)}
             placeholder={t("title")}
-            className="w-full text-base"
+            className="w-full text-body-sm-regular"
             autoFocus
             tabIndex={getIndex("name")}
           />
         )}
       />
-      <span className="text-xs font-medium text-red-500">{errors?.name?.message}</span>
+      <span className="text-caption-sm-medium text-danger-primary">{errors?.name?.message}</span>
     </div>
   );
 });
diff --git a/apps/web/core/components/issues/issue-modal/context/index.ts b/apps/web/core/components/issues/issue-modal/context/index.ts
index e396ff2c1..168144563 100644
--- a/apps/web/core/components/issues/issue-modal/context/index.ts
+++ b/apps/web/core/components/issues/issue-modal/context/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./issue-modal-context";
diff --git a/apps/web/core/components/issues/issue-modal/context/issue-modal-context.tsx b/apps/web/core/components/issues/issue-modal/context/issue-modal-context.tsx
index fab55cee6..fa7ea1ab0 100644
--- a/apps/web/core/components/issues/issue-modal/context/issue-modal-context.tsx
+++ b/apps/web/core/components/issues/issue-modal/context/issue-modal-context.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { createContext } from "react";
 // ce imports
 import type { UseFormReset, UseFormWatch } from "react-hook-form";
@@ -6,7 +12,7 @@ import type { EditorRefApi } from "@plane/editor";
 import type { ISearchIssueResponse, TIssue } from "@plane/types";
 // plane web imports
 import type { TIssuePropertyValues, TIssuePropertyValueErrors } from "@/plane-web/types/issue-types";
-import type { TIssueFields } from "ce/components/issues/issue-modal";
+import type { TIssueFields } from "@/plane-web/components/issues/issue-modal";
 
 export type TPropertyValuesValidationProps = {
   projectId: string | null;
diff --git a/apps/web/core/components/issues/issue-modal/draft-issue-layout.tsx b/apps/web/core/components/issues/issue-modal/draft-issue-layout.tsx
index 074482bb2..af8ba9502 100644
--- a/apps/web/core/components/issues/issue-modal/draft-issue-layout.tsx
+++ b/apps/web/core/components/issues/issue-modal/draft-issue-layout.tsx
@@ -1,17 +1,18 @@
-import React, { useState } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
 import { isEmpty } from "lodash-es";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
-import { WORK_ITEM_TRACKER_EVENTS } from "@plane/constants";
+// Plane imports
 import { useTranslation } from "@plane/i18n";
-// types
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { TIssue } from "@plane/types";
-// ui
-// components
 import { isEmptyHtmlString } from "@plane/utils";
-// helpers
-import { captureError, captureSuccess } from "@/helpers/event-tracker.helper";
 // hooks
 import { useIssueModal } from "@/hooks/context/use-issue-modal";
 import { useWorkspaceDraftIssues } from "@/hooks/store/workspace-draft";
@@ -90,26 +91,17 @@ export const DraftIssueLayout = observer(function DraftIssueLayout(props: DraftI
           title: `${t("success")}!`,
           message: t("workspace_draft_issues.toasts.created.success"),
         });
-        captureSuccess({
-          eventName: WORK_ITEM_TRACKER_EVENTS.draft.create,
-          payload: { id: res?.id },
-        });
         onChange(null);
         setIssueDiscardModal(false);
         onClose();
         return res;
       })
-      .catch((error) => {
+      .catch((_error) => {
         setToast({
           type: TOAST_TYPE.ERROR,
           title: `${t("error")}!`,
           message: t("workspace_draft_issues.toasts.created.error"),
         });
-        captureError({
-          eventName: WORK_ITEM_TRACKER_EVENTS.draft.create,
-          payload: { id: payload.id },
-          error,
-        });
       });
 
     if (response && handleCreateUpdatePropertyValues) {
diff --git a/apps/web/core/components/issues/issue-modal/form.tsx b/apps/web/core/components/issues/issue-modal/form.tsx
index 5bad82dc0..33d7c5993 100644
--- a/apps/web/core/components/issues/issue-modal/form.tsx
+++ b/apps/web/core/components/issues/issue-modal/form.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React, { useState, useRef, useEffect } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
@@ -11,7 +16,6 @@ import { useTranslation } from "@plane/i18n";
 import { Button } from "@plane/propel/button";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { TIssue, TWorkspaceDraftIssue } from "@plane/types";
-import { EIssuesStoreType } from "@plane/types";
 // hooks
 import { ToggleSwitch } from "@plane/ui";
 import {
@@ -373,14 +377,14 @@ export const IssueFormRoot = observer(function IssueFormRoot(props: IssueFormPro
   return (
     <FormProvider {...methods}>
       <div className="flex gap-2 bg-transparent">
-        <div className="rounded-lg w-full">
+        <div className="w-full rounded-lg">
           <form
             ref={formRef}
             onSubmit={handleSubmit((data) => handleFormSubmit(data))}
-            className="flex flex-col w-full"
+            className="flex w-full flex-col"
           >
-            <div className="p-5 rounded-t-lg bg-custom-background-100">
-              <h3 className="text-xl font-medium text-custom-text-200 pb-2">{modalTitle}</h3>
+            <div className="rounded-t-lg bg-surface-1 p-5">
+              <h3 className="pb-2 text-h4-medium text-secondary">{modalTitle}</h3>
               <div className="flex items-center justify-between pt-2 pb-4">
                 <div className="flex items-center gap-x-1">
                   <IssueProjectSelect
@@ -448,9 +452,9 @@ export const IssueFormRoot = observer(function IssueFormRoot(props: IssueFormPro
             </div>
             <div
               className={cn(
-                "pb-4 space-y-3 bg-custom-background-100",
+                "space-y-3 bg-surface-1 pb-4",
                 activeAdditionalPropertiesLength > 4 &&
-                  "max-h-[45vh] overflow-hidden overflow-y-auto vertical-scrollbar scrollbar-sm"
+                  "vertical-scrollbar scrollbar-sm max-h-[45vh] overflow-hidden overflow-y-auto"
               )}
             >
               <div className="px-5">
@@ -484,8 +488,8 @@ export const IssueFormRoot = observer(function IssueFormRoot(props: IssueFormPro
             </div>
             <div
               className={cn(
-                "px-4 py-3 border-t-[0.5px] border-custom-border-200 rounded-b-lg bg-custom-background-100",
-                activeAdditionalPropertiesLength > 0 && "shadow-custom-shadow-xs"
+                "rounded-b-lg border-t-[0.5px] border-subtle bg-surface-1 px-4 py-3",
+                activeAdditionalPropertiesLength > 0 && "shadow-raised-100"
               )}
             >
               <div className="pb-3">
@@ -505,12 +509,12 @@ export const IssueFormRoot = observer(function IssueFormRoot(props: IssueFormPro
               </div>
               {showActionButtons && (
                 <div
-                  className="flex items-center justify-end gap-4 pb-3 pt-6 border-t-[0.5px] border-custom-border-200"
+                  className="flex items-center justify-end gap-4 border-t-[0.5px] border-subtle pt-6 pb-3"
                   tabIndex={getIndex("create_more")}
                 >
                   {!data?.id && (
                     <div
-                      className="inline-flex items-center gap-1.5 cursor-pointer"
+                      className="inline-flex cursor-pointer items-center gap-1.5"
                       onClick={() => onCreateMoreToggleChange(!isCreateMoreToggleEnabled)}
                       onKeyDown={(e) => {
                         if (e.key === "Enter") onCreateMoreToggleChange(!isCreateMoreToggleEnabled);
@@ -518,14 +522,14 @@ export const IssueFormRoot = observer(function IssueFormRoot(props: IssueFormPro
                       role="button"
                     >
                       <ToggleSwitch value={isCreateMoreToggleEnabled} onChange={() => {}} size="sm" />
-                      <span className="text-xs">{t("create_more")}</span>
+                      <span className="text-caption-sm-regular">{t("create_more")}</span>
                     </div>
                   )}
                   <div className="flex items-center gap-2">
                     <div tabIndex={getIndex("discard_button")}>
                       <Button
-                        variant="neutral-primary"
-                        size="sm"
+                        variant="secondary"
+                        size="lg"
                         onClick={() => {
                           if (editorRef.current?.isEditorReadyToDiscard()) {
                             onClose();
@@ -543,9 +547,9 @@ export const IssueFormRoot = observer(function IssueFormRoot(props: IssueFormPro
                     </div>
                     <div tabIndex={isDraft ? getIndex("submit_button") : getIndex("draft_button")}>
                       <Button
-                        variant={moveToIssue ? "neutral-primary" : "primary"}
+                        variant={moveToIssue ? "secondary" : "primary"}
+                        size="lg"
                         type="submit"
-                        size="sm"
                         ref={submitBtnRef}
                         loading={isSubmitting}
                         disabled={isDisabled}
@@ -558,10 +562,10 @@ export const IssueFormRoot = observer(function IssueFormRoot(props: IssueFormPro
                       <Button
                         variant="primary"
                         type="button"
-                        size="sm"
                         loading={isMoving}
                         onClick={handleMoveToProjects}
                         disabled={isMoving}
+                        size="lg"
                       >
                         {t("add_to_project")}
                       </Button>
@@ -575,7 +579,7 @@ export const IssueFormRoot = observer(function IssueFormRoot(props: IssueFormPro
         {shouldRenderDuplicateModal && (
           <div
             ref={modalContainerRef}
-            className="relative flex flex-col gap-2.5 px-3 py-4 rounded-lg shadow-xl bg-pi-50"
+            className="shadow-xl bg-pi-50 relative flex flex-col gap-2.5 rounded-lg px-3 py-4"
             style={{ maxHeight: formRef?.current?.offsetHeight ? `${formRef.current.offsetHeight}px` : "436px" }}
           >
             <DuplicateModalRoot
diff --git a/apps/web/core/components/issues/issue-modal/modal.tsx b/apps/web/core/components/issues/issue-modal/modal.tsx
index 1db1db78f..ba03fbbdb 100644
--- a/apps/web/core/components/issues/issue-modal/modal.tsx
+++ b/apps/web/core/components/issues/issue-modal/modal.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
@@ -26,6 +32,7 @@ export interface IssuesModalProps {
   isProjectSelectionDisabled?: boolean;
   templateId?: string;
   allowedProjectIds?: string[];
+  showActionItemsOnUpdate?: boolean;
 }
 
 export const CreateUpdateIssueModal = observer(function CreateUpdateIssueModal(props: IssuesModalProps) {
diff --git a/apps/web/core/components/issues/issue-update-status.tsx b/apps/web/core/components/issues/issue-update-status.tsx
index 76d355010..2fab140e9 100644
--- a/apps/web/core/components/issues/issue-update-status.tsx
+++ b/apps/web/core/components/issues/issue-update-status.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 import { observer } from "mobx-react";
 import { RefreshCw } from "lucide-react";
@@ -19,9 +25,9 @@ export const NameDescriptionUpdateStatus = observer(function NameDescriptionUpda
         }`}
       >
         {isSubmitting !== "submitted" && isSubmitting !== "saved" && (
-          <RefreshCw className="animate-spin size-3.5 stroke-custom-text-300" />
+          <RefreshCw className="size-3.5 animate-spin stroke-tertiary" />
         )}
-        <span className="text-sm text-custom-text-300">{isSubmitting === "submitting" ? "Saving..." : "Saved"}</span>
+        <span className="text-13 text-tertiary">{isSubmitting === "submitting" ? "Saving..." : "Saved"}</span>
       </div>
     </>
   );
diff --git a/apps/web/core/components/issues/label.tsx b/apps/web/core/components/issues/label.tsx
index 5d65139ff..bc9d040f8 100644
--- a/apps/web/core/components/issues/label.tsx
+++ b/apps/web/core/components/issues/label.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 // components
 import { Tooltip } from "@plane/propel/tooltip";
@@ -17,10 +23,10 @@ export function ViewIssueLabel({ labelDetails, maxRender = 1 }: Props) {
             {labelDetails.map((label) => (
               <div
                 key={label.id}
-                className="flex flex-shrink-0 cursor-default items-center rounded-md border border-custom-border-300 px-2.5 py-1 text-xs shadow-sm"
+                className="shadow-sm flex flex-shrink-0 cursor-default items-center rounded-md border border-strong px-2.5 py-1 text-11"
               >
                 <Tooltip position="top" tooltipHeading="Label" tooltipContent={label.name} isMobile={isMobile}>
-                  <div className="flex items-center gap-1.5 text-custom-text-200">
+                  <div className="flex items-center gap-1.5 text-secondary">
                     <span
                       className="h-2 w-2 flex-shrink-0 rounded-full"
                       style={{
@@ -34,15 +40,15 @@ export function ViewIssueLabel({ labelDetails, maxRender = 1 }: Props) {
             ))}
           </>
         ) : (
-          <div className="flex flex-shrink-0 cursor-default items-center rounded-md border border-custom-border-300 px-2.5 py-1 text-xs shadow-sm">
+          <div className="shadow-sm flex flex-shrink-0 cursor-default items-center rounded-md border border-strong px-2.5 py-1 text-11">
             <Tooltip
               position="top"
               tooltipHeading="Labels"
               tooltipContent={labelDetails.map((l) => l.name).join(", ")}
               isMobile={isMobile}
             >
-              <div className="flex items-center gap-1.5 text-custom-text-200">
-                <span className="h-2 w-2 flex-shrink-0 rounded-full bg-custom-primary" />
+              <div className="flex items-center gap-1.5 text-secondary">
+                <span className="h-2 w-2 flex-shrink-0 rounded-full bg-accent-primary" />
                 {`${labelDetails.length} Labels`}
               </div>
             </Tooltip>
diff --git a/apps/web/core/components/issues/layout-quick-actions.tsx b/apps/web/core/components/issues/layout-quick-actions.tsx
new file mode 100644
index 000000000..c68f9e907
--- /dev/null
+++ b/apps/web/core/components/issues/layout-quick-actions.tsx
@@ -0,0 +1,79 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import type { TContextMenuItem } from "@plane/ui";
+import { CustomMenu } from "@plane/ui";
+import { copyUrlToClipboard, cn } from "@plane/utils";
+import { useLayoutMenuItems } from "@/components/common/quick-actions-helper";
+import { Ellipsis } from "lucide-react";
+import { IconButton } from "@plane/propel/icon-button";
+
+type Props = {
+  workspaceSlug: string;
+  projectId: string;
+  storeType: "PROJECT" | "EPIC";
+};
+
+export const LayoutQuickActions = observer(function LayoutQuickActions(props: Props) {
+  const { workspaceSlug, projectId, storeType } = props;
+
+  const layoutLink = `${workspaceSlug}/projects/${projectId}/${storeType === "EPIC" ? "epics" : "issues"}`;
+
+  const handleCopyLink = () =>
+    copyUrlToClipboard(layoutLink).then(() => {
+      setToast({
+        type: TOAST_TYPE.SUCCESS,
+        title: "Link copied",
+        message: `${storeType === "EPIC" ? "Epics" : "Work items"} link copied to clipboard.`,
+      });
+    });
+
+  const handleOpenInNewTab = () => window.open(`/${layoutLink}`, "_blank");
+
+  const menuResult = useLayoutMenuItems({
+    workspaceSlug,
+    projectId,
+    storeType,
+    handleCopyLink,
+    handleOpenInNewTab,
+  });
+
+  const MENU_ITEMS: TContextMenuItem[] = Array.isArray(menuResult) ? menuResult : menuResult.items;
+  const additionalModals = Array.isArray(menuResult) ? null : menuResult.modals;
+
+  return (
+    <>
+      {additionalModals}
+      <CustomMenu
+        ellipsis
+        placement="bottom-end"
+        closeOnSelect
+        maxHeight="lg"
+        className="flex size-[26px] flex-shrink-0 items-center justify-center rounded"
+        customButton={<IconButton size="lg" variant="tertiary" icon={Ellipsis} />}
+      >
+        {MENU_ITEMS.map((item) => {
+          if (item.shouldRender === false) return null;
+          return (
+            <CustomMenu.MenuItem
+              key={item.key}
+              onClick={item.action}
+              className={cn("flex items-center gap-2", {
+                "text-placeholder": item.disabled,
+              })}
+              disabled={item.disabled}
+            >
+              {item.icon && <item.icon className="h-3 w-3" />}
+              <span>{item.title}</span>
+            </CustomMenu.MenuItem>
+          );
+        })}
+      </CustomMenu>
+    </>
+  );
+});
diff --git a/apps/web/core/components/issues/parent-issues-list-modal.tsx b/apps/web/core/components/issues/parent-issues-list-modal.tsx
index 6dd19e202..f19992657 100644
--- a/apps/web/core/components/issues/parent-issues-list-modal.tsx
+++ b/apps/web/core/components/issues/parent-issues-list-modal.tsx
@@ -1,15 +1,22 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React, { useEffect, useState } from "react";
 import { useParams } from "next/navigation";
 // icons
-import { Rocket, Search } from "lucide-react";
+import { Rocket } from "lucide-react";
 // headless ui
-import { Combobox, Dialog, Transition } from "@headlessui/react";
+import { Combobox } from "@headlessui/react";
 // i18n
 import { useTranslation } from "@plane/i18n";
+import { SearchIcon } from "@plane/propel/icons";
 // types
 import type { ISearchIssueResponse } from "@plane/types";
 // ui
-import { Loader } from "@plane/ui";
+import { Loader, EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
 import { generateWorkItemLink, getTabIndex } from "@plane/utils";
 // components
 import { IssueSearchModalEmptyState } from "@/components/core/modals/issue-search-modal-empty-state";
@@ -85,143 +92,111 @@ export function ParentIssuesListModal({
   }, [debouncedSearchTerm, isOpen, issueId, projectId, workspaceSlug]);
 
   return (
-    <>
-      <Transition.Root show={isOpen} as={React.Fragment} afterLeave={() => setSearchTerm("")} appear>
-        <Dialog as="div" className="relative z-30" onClose={handleClose}>
-          <Transition.Child
-            as={React.Fragment}
-            enter="ease-out duration-300"
-            enterFrom="opacity-0"
-            enterTo="opacity-100"
-            leave="ease-in duration-200"
-            leaveFrom="opacity-100"
-            leaveTo="opacity-0"
-          >
-            <div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
-          </Transition.Child>
+    <ModalCore isOpen={isOpen} handleClose={handleClose} position={EModalPosition.CENTER} width={EModalWidth.XXL}>
+      <Combobox
+        value={value}
+        onChange={(val) => {
+          onChange(val);
+          handleClose();
+        }}
+      >
+        <div className="relative m-1">
+          <SearchIcon
+            className="text-opacity-40 pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-primary"
+            aria-hidden="true"
+          />
+          <Combobox.Input
+            className="h-12 w-full border-0 bg-transparent pr-4 pl-11 text-primary outline-none placeholder:text-placeholder focus:ring-0 sm:text-13"
+            placeholder={t("common.search.placeholder")}
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+            displayValue={() => ""}
+            tabIndex={baseTabIndex}
+          />
+        </div>
+        <Combobox.Options static className="vertical-scrollbar scrollbar-md max-h-80 scroll-py-2 overflow-y-auto">
+          {searchTerm !== "" && (
+            <h5 className="mx-2 text-13 text-secondary">
+              Search results for{" "}
+              <span className="text-primary">
+                {'"'}
+                {searchTerm}
+                {'"'}
+              </span>{" "}
+              in project:
+            </h5>
+          )}
 
-          <div className="fixed inset-0 z-30 overflow-y-auto p-4 sm:p-6 md:p-20">
-            <Transition.Child
-              as={React.Fragment}
-              enter="ease-out duration-300"
-              enterFrom="opacity-0 scale-95"
-              enterTo="opacity-100 scale-100"
-              leave="ease-in duration-200"
-              leaveFrom="opacity-100 scale-100"
-              leaveTo="opacity-0 scale-95"
-            >
-              <Dialog.Panel className="relative mx-auto max-w-2xl transform rounded-lg bg-custom-background-100 shadow-custom-shadow-md transition-all">
-                <Combobox
-                  value={value}
-                  onChange={(val) => {
-                    onChange(val);
-                    handleClose();
-                  }}
-                >
-                  <div className="relative m-1">
-                    <Search
-                      className="pointer-events-none absolute left-4 top-3.5 h-5 w-5 text-custom-text-100 text-opacity-40"
-                      aria-hidden="true"
-                    />
-                    <Combobox.Input
-                      className="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-custom-text-100 outline-none placeholder:text-custom-text-400 focus:ring-0 sm:text-sm"
-                      placeholder={t("common.search.placeholder")}
-                      value={searchTerm}
-                      onChange={(e) => setSearchTerm(e.target.value)}
-                      displayValue={() => ""}
-                      tabIndex={baseTabIndex}
-                    />
-                  </div>
-                  <Combobox.Options
-                    static
-                    className="max-h-80 scroll-py-2 overflow-y-auto vertical-scrollbar scrollbar-md"
-                  >
-                    {searchTerm !== "" && (
-                      <h5 className="mx-2 text-[0.825rem] text-custom-text-200">
-                        Search results for{" "}
-                        <span className="text-custom-text-100">
-                          {'"'}
-                          {searchTerm}
-                          {'"'}
-                        </span>{" "}
-                        in project:
-                      </h5>
-                    )}
-
-                    {isSearching || isLoading ? (
-                      <Loader className="space-y-3 p-3">
-                        <Loader.Item height="40px" />
-                        <Loader.Item height="40px" />
-                        <Loader.Item height="40px" />
-                        <Loader.Item height="40px" />
-                      </Loader>
-                    ) : (
-                      <>
-                        {issues.length === 0 ? (
-                          <IssueSearchModalEmptyState
-                            debouncedSearchTerm={debouncedSearchTerm}
-                            isSearching={isSearching}
-                            issues={issues}
-                            searchTerm={searchTerm}
+          {isSearching || isLoading ? (
+            <Loader className="space-y-3 p-3">
+              <Loader.Item height="40px" />
+              <Loader.Item height="40px" />
+              <Loader.Item height="40px" />
+              <Loader.Item height="40px" />
+            </Loader>
+          ) : (
+            <>
+              {issues.length === 0 ? (
+                <IssueSearchModalEmptyState
+                  debouncedSearchTerm={debouncedSearchTerm}
+                  isSearching={isSearching}
+                  issues={issues}
+                  searchTerm={searchTerm}
+                />
+              ) : (
+                <ul className={`text-13 ${issues.length > 0 ? "p-2" : ""}`}>
+                  {issues.map((issue) => (
+                    <Combobox.Option
+                      key={issue.id}
+                      value={issue}
+                      className={({ active, selected }) =>
+                        `group my-0.5 flex w-full cursor-pointer items-center justify-between gap-2 rounded-md px-3 py-2 text-secondary select-none ${
+                          active ? "bg-layer-1 text-primary" : ""
+                        } ${selected ? "text-primary" : ""}`
+                      }
+                    >
+                      <div className="flex flex-grow items-center gap-2 truncate">
+                        <span
+                          className="block h-1.5 w-1.5 flex-shrink-0 rounded-full"
+                          style={{
+                            backgroundColor: issue.state__color,
+                          }}
+                        />
+                        <span className="flex-shrink-0">
+                          <IssueIdentifier
+                            projectId={issue.project_id}
+                            issueTypeId={issue.type_id}
+                            projectIdentifier={issue.project__identifier}
+                            issueSequenceId={issue.sequence_id}
+                            size="xs"
+                            variant="secondary"
                           />
-                        ) : (
-                          <ul className={`text-sm ${issues.length > 0 ? "p-2" : ""}`}>
-                            {issues.map((issue) => (
-                              <Combobox.Option
-                                key={issue.id}
-                                value={issue}
-                                className={({ active, selected }) =>
-                                  `group flex w-full cursor-pointer select-none items-center justify-between gap-2 rounded-md px-3 py-2 my-0.5 text-custom-text-200 ${
-                                    active ? "bg-custom-background-80 text-custom-text-100" : ""
-                                  } ${selected ? "text-custom-text-100" : ""}`
-                                }
-                              >
-                                <div className="flex flex-grow items-center gap-2 truncate">
-                                  <span
-                                    className="block h-1.5 w-1.5 flex-shrink-0 rounded-full"
-                                    style={{
-                                      backgroundColor: issue.state__color,
-                                    }}
-                                  />
-                                  <span className="flex-shrink-0">
-                                    <IssueIdentifier
-                                      projectId={issue.project_id}
-                                      issueTypeId={issue.type_id}
-                                      projectIdentifier={issue.project__identifier}
-                                      issueSequenceId={issue.sequence_id}
-                                      textContainerClassName="text-xs text-custom-text-200"
-                                    />
-                                  </span>{" "}
-                                  <span className="truncate">{issue.name}</span>
-                                </div>
-                                <a
-                                  href={generateWorkItemLink({
-                                    workspaceSlug: workspaceSlug.toString(),
-                                    projectId: issue?.project_id,
-                                    issueId: issue?.id,
-                                    projectIdentifier: issue.project__identifier,
-                                    sequenceId: issue?.sequence_id,
-                                  })}
-                                  target="_blank"
-                                  className="z-1 relative hidden flex-shrink-0 text-custom-text-200 hover:text-custom-text-100 group-hover:block"
-                                  rel="noopener noreferrer"
-                                  onClick={(e) => e.stopPropagation()}
-                                >
-                                  <Rocket className="h-4 w-4" />
-                                </a>
-                              </Combobox.Option>
-                            ))}
-                          </ul>
-                        )}
-                      </>
-                    )}
-                  </Combobox.Options>
-                </Combobox>
-              </Dialog.Panel>
-            </Transition.Child>
-          </div>
-        </Dialog>
-      </Transition.Root>
-    </>
+                        </span>{" "}
+                        <span className="truncate">{issue.name}</span>
+                      </div>
+                      <a
+                        href={generateWorkItemLink({
+                          workspaceSlug: workspaceSlug.toString(),
+                          projectId: issue?.project_id,
+                          issueId: issue?.id,
+                          projectIdentifier: issue.project__identifier,
+                          sequenceId: issue?.sequence_id,
+                        })}
+                        target="_blank"
+                        className="relative z-1 hidden flex-shrink-0 text-secondary group-hover:block hover:text-primary"
+                        rel="noopener noreferrer"
+                        onClick={(e) => e.stopPropagation()}
+                      >
+                        <Rocket className="h-4 w-4" />
+                      </a>
+                    </Combobox.Option>
+                  ))}
+                </ul>
+              )}
+            </>
+          )}
+        </Combobox.Options>
+      </Combobox>
+    </ModalCore>
   );
 }
diff --git a/apps/web/core/components/issues/peek-overview/error.tsx b/apps/web/core/components/issues/peek-overview/error.tsx
index 750d369eb..3d0335983 100644
--- a/apps/web/core/components/issues/peek-overview/error.tsx
+++ b/apps/web/core/components/issues/peek-overview/error.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { MoveRight } from "lucide-react";
 import { Tooltip } from "@plane/propel/tooltip";
 // assets
@@ -18,16 +23,16 @@ export function IssuePeekOverviewError(props: TIssuePeekOverviewError) {
   const { isMobile } = usePlatformOS();
 
   return (
-    <div className="w-full h-full overflow-hidden relative flex flex-col">
-      <div className="flex-shrink-0 flex justify-start">
+    <div className="relative flex h-full w-full flex-col overflow-hidden">
+      <div className="flex flex-shrink-0 justify-start">
         <Tooltip tooltipContent="Close the peek view" isMobile={isMobile}>
-          <button onClick={removeRoutePeekId} className="w-5 h-5 m-5">
-            <MoveRight className="h-4 w-4 text-custom-text-300 hover:text-custom-text-200" />
+          <button onClick={removeRoutePeekId} className="m-5 h-5 w-5">
+            <MoveRight className="h-4 w-4 text-tertiary hover:text-secondary" />
           </button>
         </Tooltip>
       </div>
 
-      <div className="w-full h-full">
+      <div className="h-full w-full">
         <EmptyState
           image={emptyIssue ?? undefined}
           title="Work item does not exist"
diff --git a/apps/web/core/components/issues/peek-overview/header.tsx b/apps/web/core/components/issues/peek-overview/header.tsx
index ccde3d9f9..fb91acd6c 100644
--- a/apps/web/core/components/issues/peek-overview/header.tsx
+++ b/apps/web/core/components/issues/peek-overview/header.tsx
@@ -1,30 +1,33 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useRef } from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
-import { Link2, MoveDiagonal, MoveRight } from "lucide-react";
+import { MoveDiagonal, MoveRight } from "lucide-react";
 // plane imports
-import { WORK_ITEM_TRACKER_EVENTS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { CenterPanelIcon, FullScreenPanelIcon, SidePanelIcon } from "@plane/propel/icons";
+import { CenterPanelIcon, CopyLinkIcon, FullScreenPanelIcon, SidePanelIcon } from "@plane/propel/icons";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import { Tooltip } from "@plane/propel/tooltip";
 import type { TNameDescriptionLoader } from "@plane/types";
 import { EIssuesStoreType } from "@plane/types";
 import { CustomSelect } from "@plane/ui";
 import { copyUrlToClipboard, generateWorkItemLink } from "@plane/utils";
-// helpers
-import { captureError, captureSuccess } from "@/helpers/event-tracker.helper";
+// hooks
 import { useIssueDetail } from "@/hooks/store/use-issue-detail";
 import { useIssues } from "@/hooks/store/use-issues";
 import { useProject } from "@/hooks/store/use-project";
 import { useUser } from "@/hooks/store/user";
-// hooks
 import { usePlatformOS } from "@/hooks/use-platform-os";
 // local imports
 import { IssueSubscription } from "../issue-detail/subscription";
 import { WorkItemDetailQuickActions } from "../issue-layouts/quick-action-dropdowns";
 import { NameDescriptionUpdateStatus } from "../issue-update-status";
+import { IconButton } from "@plane/propel/icon-button";
 
 export type TPeekModes = "side-peek" | "modal" | "full-screen";
 
@@ -131,61 +134,40 @@ export const IssuePeekOverviewHeader = observer(function IssuePeekOverviewHeader
 
       return deleteIssue(workspaceSlug, projectId, issueId).then(() => {
         setPeekIssue(undefined);
-        captureSuccess({
-          eventName: WORK_ITEM_TRACKER_EVENTS.delete,
-          payload: { id: issueId },
-        });
       });
-    } catch (error) {
+    } catch (_error) {
       setToast({
         title: t("toast.error"),
         type: TOAST_TYPE.ERROR,
         message: t("entity.delete.failed", { entity: t("issue.label", { count: 1 }) }),
       });
-      captureError({
-        eventName: WORK_ITEM_TRACKER_EVENTS.delete,
-        payload: { id: issueId },
-        error: error as Error,
-      });
     }
   };
 
   const handleArchiveIssue = async () => {
-    try {
-      await archiveIssue(workspaceSlug, projectId, issueId);
-      // check and remove if issue is peeked
-      if (getIsIssuePeeked(issueId)) {
-        removeRoutePeekId();
-      }
-      captureSuccess({
-        eventName: WORK_ITEM_TRACKER_EVENTS.archive,
-        payload: { id: issueId },
-      });
-    } catch (error) {
-      captureError({
-        eventName: WORK_ITEM_TRACKER_EVENTS.archive,
-        payload: { id: issueId },
-        error: error as Error,
-      });
+    await archiveIssue(workspaceSlug, projectId, issueId);
+    // check and remove if issue is peeked
+    if (getIsIssuePeeked(issueId)) {
+      removeRoutePeekId();
     }
   };
 
   return (
     <div
       className={`relative flex items-center justify-between p-4 ${
-        currentMode?.key === "full-screen" ? "border-b border-custom-border-200" : ""
+        currentMode?.key === "full-screen" ? "border-b border-subtle" : ""
       }`}
     >
       <div className="flex items-center gap-4">
         <Tooltip tooltipContent={t("common.close_peek_view")} isMobile={isMobile}>
           <button onClick={removeRoutePeekId}>
-            <MoveRight className="h-4 w-4 text-custom-text-300 hover:text-custom-text-200" />
+            <MoveRight className="h-4 w-4 text-tertiary hover:text-secondary" />
           </button>
         </Tooltip>
 
         <Tooltip tooltipContent={t("issue.open_in_full_screen")} isMobile={isMobile}>
           <Link href={workItemLink} onClick={() => removeRoutePeekId()}>
-            <MoveDiagonal className="h-4 w-4 text-custom-text-300 hover:text-custom-text-200" />
+            <MoveDiagonal className="h-4 w-4 text-tertiary hover:text-secondary" />
           </Link>
         </Tooltip>
         {currentMode && embedIssue === false && (
@@ -196,7 +178,7 @@ export const IssuePeekOverviewHeader = observer(function IssuePeekOverviewHeader
               customButton={
                 <Tooltip tooltipContent={t("common.toggle_peek_view_layout")} isMobile={isMobile}>
                   <button type="button" className="">
-                    <currentMode.icon className="h-4 w-4 text-custom-text-300 hover:text-custom-text-200" />
+                    <currentMode.icon className="h-4 w-4 text-tertiary hover:text-secondary" />
                   </button>
                 </Tooltip>
               }
@@ -205,9 +187,7 @@ export const IssuePeekOverviewHeader = observer(function IssuePeekOverviewHeader
                 <CustomSelect.Option key={mode.key} value={mode.key}>
                   <div
                     className={`flex items-center gap-1.5 ${
-                      currentMode.key === mode.key
-                        ? "text-custom-text-200"
-                        : "text-custom-text-400 hover:text-custom-text-200"
+                      currentMode.key === mode.key ? "text-secondary" : "text-placeholder hover:text-secondary"
                     }`}
                   >
                     <mode.icon className="-my-1 h-4 w-4 flex-shrink-0" />
@@ -221,14 +201,12 @@ export const IssuePeekOverviewHeader = observer(function IssuePeekOverviewHeader
       </div>
       <div className="flex items-center gap-x-4">
         <NameDescriptionUpdateStatus isSubmitting={isSubmitting} />
-        <div className="flex items-center gap-4">
+        <div className="flex items-center gap-2">
           {currentUser && !isArchived && (
             <IssueSubscription workspaceSlug={workspaceSlug} projectId={projectId} issueId={issueId} />
           )}
           <Tooltip tooltipContent={t("common.actions.copy_link")} isMobile={isMobile}>
-            <button type="button" onClick={handleCopyText}>
-              <Link2 className="h-4 w-4 -rotate-45 text-custom-text-300 hover:text-custom-text-200" />
-            </button>
+            <IconButton variant="secondary" size="lg" onClick={handleCopyText} icon={CopyLinkIcon} />
           </Tooltip>
           {issueDetails && (
             <WorkItemDetailQuickActions
diff --git a/apps/web/core/components/issues/peek-overview/index.ts b/apps/web/core/components/issues/peek-overview/index.ts
index 1efe34c51..d98033459 100644
--- a/apps/web/core/components/issues/peek-overview/index.ts
+++ b/apps/web/core/components/issues/peek-overview/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./root";
diff --git a/apps/web/core/components/issues/peek-overview/issue-detail.tsx b/apps/web/core/components/issues/peek-overview/issue-detail.tsx
index 3efdbf641..6bd89124b 100644
--- a/apps/web/core/components/issues/peek-overview/issue-detail.tsx
+++ b/apps/web/core/components/issues/peek-overview/issue-detail.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useEffect } from "react";
 import { observer } from "mobx-react";
 // plane imports
@@ -134,10 +139,11 @@ export const PeekOverviewIssueDetails = observer(function PeekOverviewIssueDetai
         entityId={issue.id}
         fileAssetType={EFileAssetType.ISSUE_DESCRIPTION}
         initialValue={issueDescription}
+        key={issue.id}
         onSubmit={async (value, isMigrationUpdate) => {
           if (!issue.id || !issue.project_id) return;
           await issueOperations.update(workspaceSlug, issue.project_id, issue.id, {
-            description_html: value,
+            description_html: value.description_html,
             ...(isMigrationUpdate ? { skip_activity: "true" } : {}),
           });
         }}
diff --git a/apps/web/core/components/issues/peek-overview/loader.tsx b/apps/web/core/components/issues/peek-overview/loader.tsx
index 730ea4357..701f72844 100644
--- a/apps/web/core/components/issues/peek-overview/loader.tsx
+++ b/apps/web/core/components/issues/peek-overview/loader.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { MoveRight } from "lucide-react";
 import { Tooltip } from "@plane/propel/tooltip";
 import { Loader } from "@plane/ui";
@@ -15,12 +20,12 @@ export function IssuePeekOverviewLoader(props: TIssuePeekOverviewLoader) {
   const { isMobile } = usePlatformOS();
 
   return (
-    <Loader className="w-full h-screen overflow-hidden p-5 space-y-6">
-      <div className="flex justify-between items-center gap-2">
+    <Loader className="h-screen w-full space-y-6 overflow-hidden p-5">
+      <div className="flex items-center justify-between gap-2">
         <div className="flex items-center gap-2">
           <Tooltip tooltipContent="Close the peek view" isMobile={isMobile}>
             <button onClick={removeRoutePeekId}>
-              <MoveRight className="h-4 w-4 text-custom-text-300 hover:text-custom-text-200" />
+              <MoveRight className="h-4 w-4 text-tertiary hover:text-secondary" />
             </button>
           </Tooltip>
           <Loader.Item width="30px" height="30px" />
@@ -56,7 +61,7 @@ export function IssuePeekOverviewLoader(props: TIssuePeekOverviewLoader) {
       </div>
 
       {/* sub issues */}
-      <div className="flex justify-between items-center gap-2">
+      <div className="flex items-center justify-between gap-2">
         <Loader.Item width="80px" height="20px" />
         <Loader.Item width="100px" height="20px" />
       </div>
diff --git a/apps/web/core/components/issues/peek-overview/properties.tsx b/apps/web/core/components/issues/peek-overview/properties.tsx
index 7ac3c2294..666f00e91 100644
--- a/apps/web/core/components/issues/peek-overview/properties.tsx
+++ b/apps/web/core/components/issues/peek-overview/properties.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 // i18n
 import { useTranslation } from "@plane/i18n";
@@ -24,6 +29,7 @@ import { ButtonAvatars } from "@/components/dropdowns/member/avatar";
 import { MemberDropdown } from "@/components/dropdowns/member/dropdown";
 import { PriorityDropdown } from "@/components/dropdowns/priority";
 import { StateDropdown } from "@/components/dropdowns/state/dropdown";
+import { SidebarPropertyListItem } from "@/components/common/layout/sidebar/property-list-item";
 // helpers
 import { useIssueDetail } from "@/hooks/store/use-issue-detail";
 import { useMember } from "@/hooks/store/use-member";
@@ -32,8 +38,8 @@ import { useProjectState } from "@/hooks/store/use-project-state";
 // plane web components
 import { WorkItemAdditionalSidebarProperties } from "@/plane-web/components/issues/issue-details/additional-properties";
 import { IssueParentSelectRoot } from "@/plane-web/components/issues/issue-details/parent-select-root";
+import { DateAlert } from "@/plane-web/components/issues/issue-details/sidebar/date-alert";
 import { TransferHopInfo } from "@/plane-web/components/issues/issue-details/sidebar/transfer-hop-info";
-import { DateAlert } from "@/plane-web/components/issues/issue-details/sidebar.tsx/date-alert";
 import { IssueWorklogProperty } from "@/plane-web/components/issues/worklog/property";
 import type { TIssueOperations } from "../issue-detail";
 import { IssueCycleSelect } from "../issue-detail/cycle-select";
@@ -74,35 +80,24 @@ export const PeekOverviewProperties = observer(function PeekOverviewProperties(p
 
   return (
     <div>
-      <h6 className="text-sm font-medium">{t("common.properties")}</h6>
-      {/* TODO: render properties using a common component */}
-      <div className={`w-full space-y-2 mt-3 ${disabled ? "opacity-60" : ""}`}>
-        {/* state */}
-        <div className="flex w-full items-center gap-3 h-8">
-          <div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-sm text-custom-text-300">
-            <StatePropertyIcon className="h-4 w-4 flex-shrink-0" />
-            <span>{t("common.state")}</span>
-          </div>
+      <h6 className="text-body-xs-medium">{t("common.properties")}</h6>
+      <div className={`mt-3 w-full space-y-3 ${disabled ? "opacity-60" : ""}`}>
+        <SidebarPropertyListItem icon={StatePropertyIcon} label={t("common.state")}>
           <StateDropdown
             value={issue?.state_id}
             onChange={(val) => issueOperations.update(workspaceSlug, projectId, issueId, { state_id: val })}
             projectId={projectId}
             disabled={disabled}
             buttonVariant="transparent-with-text"
-            className="w-3/4 flex-grow group"
-            buttonContainerClassName="w-full text-left"
-            buttonClassName="text-sm"
+            className="group w-full grow"
+            buttonContainerClassName="w-full text-left h-7.5"
+            buttonClassName={`text-body-xs-medium ${issue?.state_id ? "" : "text-placeholder"}`}
             dropdownArrow
             dropdownArrowClassName="h-3.5 w-3.5 hidden group-hover:inline"
           />
-        </div>
+        </SidebarPropertyListItem>
 
-        {/* assignee */}
-        <div className="flex w-full items-center gap-3 h-8">
-          <div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-sm text-custom-text-300">
-            <MembersPropertyIcon className="h-4 w-4 flex-shrink-0" />
-            <span>{t("common.assignees")}</span>
-          </div>
+        <SidebarPropertyListItem icon={MembersPropertyIcon} label={t("common.assignees")}>
           <MemberDropdown
             value={issue?.assignee_ids ?? undefined}
             onChange={(val) => issueOperations.update(workspaceSlug, projectId, issueId, { assignee_ids: val })}
@@ -111,57 +106,44 @@ export const PeekOverviewProperties = observer(function PeekOverviewProperties(p
             placeholder={t("issue.add.assignee")}
             multiple
             buttonVariant={issue?.assignee_ids?.length > 1 ? "transparent-without-text" : "transparent-with-text"}
-            className="w-3/4 flex-grow group"
-            buttonContainerClassName="w-full text-left"
-            buttonClassName={`text-sm justify-between ${issue?.assignee_ids?.length > 0 ? "" : "text-custom-text-400"}`}
+            className="group w-full grow"
+            buttonContainerClassName="w-full text-left h-7.5"
+            buttonClassName={`text-body-xs-medium justify-between ${issue?.assignee_ids?.length > 0 ? "" : "text-placeholder"}`}
             hideIcon={issue.assignee_ids?.length === 0}
             dropdownArrow
             dropdownArrowClassName="h-3.5 w-3.5 hidden group-hover:inline"
           />
-        </div>
+        </SidebarPropertyListItem>
 
-        {/* priority */}
-        <div className="flex w-full items-center gap-3 h-8">
-          <div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-sm text-custom-text-300">
-            <PriorityPropertyIcon className="h-4 w-4 flex-shrink-0" />
-            <span>{t("common.priority")}</span>
-          </div>
+        <SidebarPropertyListItem icon={PriorityPropertyIcon} label={t("common.priority")}>
           <PriorityDropdown
             value={issue?.priority}
             onChange={(val) => issueOperations.update(workspaceSlug, projectId, issueId, { priority: val })}
             disabled={disabled}
-            buttonVariant="border-with-text"
-            className="w-3/4 flex-grow rounded px-2 hover:bg-custom-background-80 group"
-            buttonContainerClassName="w-full text-left"
-            buttonClassName="w-min h-auto whitespace-nowrap"
+            buttonVariant="transparent-with-text"
+            className="h-7.5 w-full grow rounded-sm"
+            buttonContainerClassName="w-full text-left h-7.5"
+            buttonClassName={`text-body-xs-medium whitespace-nowrap [&_svg]:size-3.5 ${!issue?.priority || issue?.priority === "none" ? "text-placeholder" : ""}`}
           />
-        </div>
+        </SidebarPropertyListItem>
 
-        {/* created by */}
         {createdByDetails && (
-          <div className="flex w-full items-center gap-3 h-8">
-            <div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-sm text-custom-text-300">
-              <UserCirclePropertyIcon className="h-4 w-4 flex-shrink-0" />
-              <span>{t("common.created_by")}</span>
-            </div>
-            <div className="w-full h-full flex items-center gap-1.5 rounded px-2 py-0.5 text-sm justify-between cursor-not-allowed">
-              <ButtonAvatars
-                showTooltip
-                userIds={createdByDetails?.display_name.includes("-intake") ? null : createdByDetails?.id}
-              />
-              <span className="flex-grow truncate  leading-5">
-                {createdByDetails?.display_name.includes("-intake") ? "Plane" : createdByDetails?.display_name}
-              </span>
-            </div>
-          </div>
+          <SidebarPropertyListItem
+            icon={UserCirclePropertyIcon}
+            label={t("common.created_by")}
+            childrenClassName="px-2"
+          >
+            <ButtonAvatars
+              showTooltip
+              userIds={createdByDetails?.display_name.includes("-intake") ? null : createdByDetails?.id}
+            />
+            <span className="grow truncate text-body-xs-medium leading-5 text-secondary">
+              {createdByDetails?.display_name.includes("-intake") ? "Plane" : createdByDetails?.display_name}
+            </span>
+          </SidebarPropertyListItem>
         )}
 
-        {/* start date */}
-        <div className="flex w-full items-center gap-3 h-8">
-          <div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-sm text-custom-text-300">
-            <StartDatePropertyIcon className="h-4 w-4 flex-shrink-0" />
-            <span>{t("common.order_by.start_date")}</span>
-          </div>
+        <SidebarPropertyListItem icon={StartDatePropertyIcon} label={t("common.order_by.start_date")}>
           <DateDropdown
             value={issue.start_date}
             onChange={(val) =>
@@ -173,23 +155,16 @@ export const PeekOverviewProperties = observer(function PeekOverviewProperties(p
             buttonVariant="transparent-with-text"
             maxDate={maxDate ?? undefined}
             disabled={disabled}
-            className="w-3/4 flex-grow group"
-            buttonContainerClassName="w-full text-left"
-            buttonClassName={`text-sm ${issue?.start_date ? "" : "text-custom-text-400"}`}
+            className="group w-full grow"
+            buttonContainerClassName="w-full text-left h-7.5"
+            buttonClassName={`text-body-xs-medium ${issue?.start_date ? "" : "text-placeholder"}`}
             hideIcon
             clearIconClassName="h-3 w-3 hidden group-hover:inline"
-            // TODO: add this logic
-            // showPlaceholderIcon
           />
-        </div>
+        </SidebarPropertyListItem>
 
-        {/* due date */}
-        <div className="flex w-full items-center gap-3 h-8">
-          <div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-sm text-custom-text-300">
-            <DueDatePropertyIcon className="h-4 w-4 flex-shrink-0" />
-            <span>{t("common.order_by.due_date")}</span>
-          </div>
-          <div className="flex items-center gap-2">
+        <SidebarPropertyListItem icon={DueDatePropertyIcon} label={t("common.order_by.due_date")}>
+          <div className="flex w-full items-center gap-2">
             <DateDropdown
               value={issue.target_date}
               onChange={(val) =>
@@ -201,106 +176,82 @@ export const PeekOverviewProperties = observer(function PeekOverviewProperties(p
               buttonVariant="transparent-with-text"
               minDate={minDate ?? undefined}
               disabled={disabled}
-              className="w-3/4 flex-grow group"
-              buttonContainerClassName="w-full text-left"
-              buttonClassName={cn("text-sm", {
-                "text-custom-text-400": !issue.target_date,
-                "text-red-500": shouldHighlightIssueDueDate(issue.target_date, stateDetails?.group),
+              className="group w-full grow"
+              buttonContainerClassName="w-full text-left h-7.5"
+              buttonClassName={cn("text-body-xs-medium", {
+                "text-placeholder": !issue.target_date,
+                "text-danger-primary": shouldHighlightIssueDueDate(issue.target_date, stateDetails?.group),
               })}
               hideIcon
-              clearIconClassName="h-3 w-3 hidden group-hover:inline !text-custom-text-100"
-              // TODO: add this logic
-              // showPlaceholderIcon
+              clearIconClassName="h-3 w-3 hidden group-hover:inline text-primary"
             />
             {issue.target_date && <DateAlert date={issue.target_date} workItem={issue} projectId={projectId} />}
           </div>
-        </div>
+        </SidebarPropertyListItem>
 
-        {/* estimate */}
         {isEstimateEnabled && (
-          <div className="flex w-full items-center gap-3 h-8">
-            <div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-sm text-custom-text-300">
-              <EstimatePropertyIcon className="h-4 w-4 flex-shrink-0" />
-              <span>{t("common.estimate")}</span>
-            </div>
+          <SidebarPropertyListItem icon={EstimatePropertyIcon} label={t("common.estimate")}>
             <EstimateDropdown
               value={issue.estimate_point ?? undefined}
               onChange={(val) => issueOperations.update(workspaceSlug, projectId, issueId, { estimate_point: val })}
               projectId={projectId}
               disabled={disabled}
               buttonVariant="transparent-with-text"
-              className="w-3/4 flex-grow group"
-              buttonContainerClassName="w-full text-left"
-              buttonClassName={`text-sm ${issue?.estimate_point !== undefined ? "" : "text-custom-text-400"}`}
+              className="group w-full grow"
+              buttonContainerClassName="w-full text-left h-7.5"
+              buttonClassName={`text-body-xs-medium ${issue?.estimate_point !== undefined ? "" : "text-placeholder"}`}
               placeholder="None"
               hideIcon
               dropdownArrow
               dropdownArrowClassName="h-3.5 w-3.5 hidden group-hover:inline"
             />
-          </div>
+          </SidebarPropertyListItem>
         )}
 
         {projectDetails?.module_view && (
-          <div className="flex w-full items-center gap-3 min-h-8 h-full">
-            <div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-sm text-custom-text-300">
-              <ModuleIcon className="h-4 w-4 flex-shrink-0" />
-              <span>{t("common.modules")}</span>
-            </div>
+          <SidebarPropertyListItem icon={ModuleIcon} label={t("common.modules")}>
             <IssueModuleSelect
-              className="w-3/4 flex-grow"
+              className="w-full grow"
               workspaceSlug={workspaceSlug}
               projectId={projectId}
               issueId={issueId}
               issueOperations={issueOperations}
               disabled={disabled}
             />
-          </div>
+          </SidebarPropertyListItem>
         )}
 
         {projectDetails?.cycle_view && (
-          <div className="flex w-full items-center gap-3 h-8">
-            <div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-sm text-custom-text-300">
-              <CycleIcon className="h-4 w-4 flex-shrink-0" />
-              <span>{t("common.cycle")}</span>
-              <TransferHopInfo workItem={issue} />
-            </div>
+          <SidebarPropertyListItem
+            icon={CycleIcon}
+            label={t("common.cycle")}
+            appendElement={<TransferHopInfo workItem={issue} />}
+          >
             <IssueCycleSelect
-              className="w-3/4 flex-grow"
+              className="h-7.5 w-full grow"
               workspaceSlug={workspaceSlug}
               projectId={projectId}
               issueId={issueId}
               issueOperations={issueOperations}
               disabled={disabled}
             />
-          </div>
+          </SidebarPropertyListItem>
         )}
 
-        {/* parent */}
-        <div className="flex w-full items-center gap-3 h-8">
-          <div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-sm text-custom-text-300">
-            <ParentPropertyIcon className="h-4 w-4 flex-shrink-0" />
-            <p>{t("common.parent")}</p>
-          </div>
+        <SidebarPropertyListItem icon={ParentPropertyIcon} label={t("common.parent")}>
           <IssueParentSelectRoot
-            className="w-3/4 flex-grow h-full"
+            className="h-7.5 w-full grow"
             disabled={disabled}
             issueId={issueId}
             issueOperations={issueOperations}
             projectId={projectId}
             workspaceSlug={workspaceSlug}
           />
-        </div>
+        </SidebarPropertyListItem>
 
-        {/* label */}
-        <div className="flex w-full items-center gap-3 min-h-8">
-          <div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-sm text-custom-text-300">
-            <LabelPropertyIcon className="h-4 w-4 flex-shrink-0" />
-            <span>{t("common.labels")}</span>
-          </div>
-          <div className="flex w-full flex-col gap-3 truncate">
-            <IssueLabel workspaceSlug={workspaceSlug} projectId={projectId} issueId={issueId} disabled={disabled} />
-          </div>
-        </div>
+        <SidebarPropertyListItem icon={LabelPropertyIcon} label={t("common.labels")}>
+          <IssueLabel workspaceSlug={workspaceSlug} projectId={projectId} issueId={issueId} disabled={disabled} />
+        </SidebarPropertyListItem>
 
         <IssueWorklogProperty
           workspaceSlug={workspaceSlug}
diff --git a/apps/web/core/components/issues/peek-overview/root.tsx b/apps/web/core/components/issues/peek-overview/root.tsx
index ed702f3d6..421aaebbd 100644
--- a/apps/web/core/components/issues/peek-overview/root.tsx
+++ b/apps/web/core/components/issues/peek-overview/root.tsx
@@ -1,16 +1,20 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useState, useMemo, useCallback } from "react";
 import { observer } from "mobx-react";
 import { usePathname } from "next/navigation";
 // Plane imports
 import useSWR from "swr";
-import { EUserPermissions, EUserPermissionsLevel, WORK_ITEM_TRACKER_EVENTS } from "@plane/constants";
+import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { TOAST_TYPE, setPromiseToast, setToast } from "@plane/propel/toast";
 import type { IWorkItemPeekOverview, TIssue } from "@plane/types";
 import { EIssueServiceType, EIssuesStoreType } from "@plane/types";
 // hooks
-import { captureError, captureSuccess } from "@/helpers/event-tracker.helper";
 import { useIssueDetail } from "@/hooks/store/use-issue-detail";
 import { useIssues } from "@/hooks/store/use-issues";
 import { useUserPermissions } from "@/hooks/store/user";
@@ -77,17 +81,9 @@ export const IssuePeekOverview = observer(function IssuePeekOverview(props: IWor
             .updateIssue(workspaceSlug, projectId, issueId, data)
             .then(async () => {
               fetchActivities(workspaceSlug, projectId, issueId);
-              captureSuccess({
-                eventName: WORK_ITEM_TRACKER_EVENTS.update,
-                payload: { id: issueId },
-              });
+              return;
             })
-            .catch((error) => {
-              captureError({
-                eventName: WORK_ITEM_TRACKER_EVENTS.update,
-                payload: { id: issueId },
-                error: error as Error,
-              });
+            .catch((_error) => {
               setToast({
                 title: t("toast.error"),
                 type: TOAST_TYPE.ERROR,
@@ -99,39 +95,23 @@ export const IssuePeekOverview = observer(function IssuePeekOverview(props: IWor
       remove: async (workspaceSlug: string, projectId: string, issueId: string) => {
         try {
           return issues?.removeIssue(workspaceSlug, projectId, issueId).then(() => {
-            captureSuccess({
-              eventName: WORK_ITEM_TRACKER_EVENTS.delete,
-              payload: { id: issueId },
-            });
             removeRoutePeekId();
+            return;
           });
-        } catch (error) {
+        } catch (_error) {
           setToast({
             title: t("toast.error"),
             type: TOAST_TYPE.ERROR,
             message: t("entity.delete.failed", { entity: t("issue.label", { count: 1 }) }),
           });
-          captureError({
-            eventName: WORK_ITEM_TRACKER_EVENTS.delete,
-            payload: { id: issueId },
-            error: error as Error,
-          });
         }
       },
       archive: async (workspaceSlug: string, projectId: string, issueId: string) => {
         try {
           if (!issues?.archiveIssue) return;
           await issues.archiveIssue(workspaceSlug, projectId, issueId);
-          captureSuccess({
-            eventName: WORK_ITEM_TRACKER_EVENTS.archive,
-            payload: { id: issueId },
-          });
         } catch (error) {
-          captureError({
-            eventName: WORK_ITEM_TRACKER_EVENTS.archive,
-            payload: { id: issueId },
-            error: error as Error,
-          });
+          console.error("Error archiving the issue", error);
         }
       },
       restore: async (workspaceSlug: string, projectId: string, issueId: string) => {
@@ -142,62 +122,35 @@ export const IssuePeekOverview = observer(function IssuePeekOverview(props: IWor
             title: t("issue.restore.success.title"),
             message: t("issue.restore.success.message"),
           });
-          captureSuccess({
-            eventName: WORK_ITEM_TRACKER_EVENTS.restore,
-            payload: { id: issueId },
-          });
-        } catch (error) {
+        } catch (_error) {
           setToast({
             type: TOAST_TYPE.ERROR,
             title: t("toast.error"),
             message: t("issue.restore.failed.message"),
           });
-          captureError({
-            eventName: WORK_ITEM_TRACKER_EVENTS.restore,
-            payload: { id: issueId },
-            error: error as Error,
-          });
         }
       },
       addCycleToIssue: async (workspaceSlug: string, projectId: string, cycleId: string, issueId: string) => {
         try {
           await issues.addCycleToIssue(workspaceSlug, projectId, cycleId, issueId);
           fetchActivities(workspaceSlug, projectId, issueId);
-          captureSuccess({
-            eventName: WORK_ITEM_TRACKER_EVENTS.update,
-            payload: { id: issueId },
-          });
-        } catch (error) {
+        } catch (_error) {
           setToast({
             type: TOAST_TYPE.ERROR,
             title: t("toast.error"),
             message: t("issue.add.cycle.failed"),
           });
-          captureError({
-            eventName: WORK_ITEM_TRACKER_EVENTS.update,
-            payload: { id: issueId },
-            error: error as Error,
-          });
         }
       },
       addIssueToCycle: async (workspaceSlug: string, projectId: string, cycleId: string, issueIds: string[]) => {
         try {
           await issues.addIssueToCycle(workspaceSlug, projectId, cycleId, issueIds);
-          captureSuccess({
-            eventName: WORK_ITEM_TRACKER_EVENTS.update,
-            payload: { id: issueIds },
-          });
-        } catch (error) {
+        } catch (_error) {
           setToast({
             type: TOAST_TYPE.ERROR,
             title: t("toast.error"),
             message: t("issue.add.cycle.failed"),
           });
-          captureError({
-            eventName: WORK_ITEM_TRACKER_EVENTS.update,
-            payload: { id: issueIds },
-            error: error as Error,
-          });
         }
       },
       removeIssueFromCycle: async (workspaceSlug: string, projectId: string, cycleId: string, issueId: string) => {
@@ -216,16 +169,8 @@ export const IssuePeekOverview = observer(function IssuePeekOverview(props: IWor
           });
           await removeFromCyclePromise;
           fetchActivities(workspaceSlug, projectId, issueId);
-          captureSuccess({
-            eventName: WORK_ITEM_TRACKER_EVENTS.update,
-            payload: { id: issueId },
-          });
         } catch (error) {
-          captureError({
-            eventName: WORK_ITEM_TRACKER_EVENTS.update,
-            payload: { id: issueId },
-            error: error as Error,
-          });
+          console.error("Error removing issue from cycle", error);
         }
       },
       changeModulesInIssue: async (
@@ -243,10 +188,6 @@ export const IssuePeekOverview = observer(function IssuePeekOverview(props: IWor
           removeModuleIds
         );
         fetchActivities(workspaceSlug, projectId, issueId);
-        captureSuccess({
-          eventName: WORK_ITEM_TRACKER_EVENTS.update,
-          payload: { id: issueId },
-        });
         return promise;
       },
       removeIssueFromModule: async (workspaceSlug: string, projectId: string, moduleId: string, issueId: string) => {
@@ -265,16 +206,8 @@ export const IssuePeekOverview = observer(function IssuePeekOverview(props: IWor
           });
           await removeFromModulePromise;
           fetchActivities(workspaceSlug, projectId, issueId);
-          captureSuccess({
-            eventName: WORK_ITEM_TRACKER_EVENTS.update,
-            payload: { id: issueId },
-          });
         } catch (error) {
-          captureError({
-            eventName: WORK_ITEM_TRACKER_EVENTS.update,
-            payload: { id: issueId },
-            error: error as Error,
-          });
+          console.error("Error removing issue from module", error);
         }
       },
     }),
diff --git a/apps/web/core/components/issues/peek-overview/view.tsx b/apps/web/core/components/issues/peek-overview/view.tsx
index a5fd4f484..333e4038c 100644
--- a/apps/web/core/components/issues/peek-overview/view.tsx
+++ b/apps/web/core/components/issues/peek-overview/view.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useRef, useState } from "react";
 import { observer } from "mobx-react";
 import { createPortal } from "react-dom";
@@ -90,7 +95,8 @@ export const IssueView = observer(function IssueView(props: IIssueView) {
         }
       }
     },
-    issueId
+    issueId,
+    ["main-sidebar"]
   );
 
   const handleKeyDown = () => {
@@ -114,12 +120,12 @@ export const IssueView = observer(function IssueView(props: IIssueView) {
 
   const peekOverviewIssueClassName = cn(
     !embedIssue
-      ? "absolute z-[25] flex flex-col overflow-hidden rounded border border-custom-border-200 bg-custom-background-100 transition-all duration-300"
-      : `w-full h-full`,
+      ? "absolute z-[25] flex flex-col overflow-hidden rounded-sm border border-subtle bg-surface-1 transition-all duration-300"
+      : `h-full w-full`,
     !embedIssue && {
-      "top-0 bottom-0 right-0 w-full md:w-[50%] border-0 border-l": peekMode === "side-peek",
-      "size-5/6 top-[8.33%] left-[8.33%]": peekMode === "modal",
-      "inset-0 m-4 absolute": peekMode === "full-screen",
+      "top-0 right-0 bottom-0 w-full border-0 border-l md:w-[50%]": peekMode === "side-peek",
+      "top-[8.33%] left-[8.33%] size-5/6": peekMode === "modal",
+      "absolute inset-0 m-4": peekMode === "full-screen",
     }
   );
 
@@ -128,7 +134,7 @@ export const IssueView = observer(function IssueView(props: IIssueView) {
   const portalContainer = document.getElementById("full-screen-portal") as HTMLElement;
 
   const content = (
-    <div className="w-full !text-base">
+    <div className="w-full text-body-sm-regular">
       {issueId && (
         <div
           ref={issuePeekOverviewRef}
@@ -166,9 +172,9 @@ export const IssueView = observer(function IssueView(props: IIssueView) {
                 embedIssue={embedIssue}
               />
               {/* content */}
-              <div className="vertical-scrollbar scrollbar-md relative h-full w-full overflow-hidden overflow-y-auto">
+              <div className="vertical-scrollbar relative scrollbar-md h-full w-full overflow-hidden overflow-y-auto">
                 {["side-peek", "modal"].includes(peekMode) ? (
-                  <div className="relative flex flex-col gap-3 px-8 py-5 space-y-3">
+                  <div className="relative flex flex-col gap-3 space-y-3 px-8 py-5">
                     <PeekOverviewIssueDetails
                       editorRef={editorRef}
                       workspaceSlug={workspaceSlug}
@@ -241,7 +247,7 @@ export const IssueView = observer(function IssueView(props: IIssueView) {
                       </div>
                     </div>
                     <div
-                      className={`h-full !w-[400px] flex-shrink-0 border-l border-custom-border-200 p-4 py-5 overflow-hidden vertical-scrollbar scrollbar-sm ${
+                      className={`vertical-scrollbar scrollbar-sm h-full !w-[400px] flex-shrink-0 overflow-hidden border-l border-subtle p-4 py-5 ${
                         is_archived ? "pointer-events-none" : ""
                       }`}
                     >
diff --git a/apps/web/core/components/issues/preview-card/date.tsx b/apps/web/core/components/issues/preview-card/date.tsx
index 7de4cf4ed..9f95f3302 100644
--- a/apps/web/core/components/issues/preview-card/date.tsx
+++ b/apps/web/core/components/issues/preview-card/date.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { CalendarDays } from "lucide-react";
 // plane imports
 import { DueDatePropertyIcon, StartDatePropertyIcon } from "@plane/propel/icons";
@@ -19,30 +25,30 @@ export function WorkItemPreviewCardDate(props: Props) {
   if (!startDate && !targetDate) return null;
 
   return (
-    <div className="text-xs h-full rounded px-1 text-custom-text-200">
+    <div className="h-full rounded-sm px-1 text-11 text-secondary">
       {isDateRangeEnabled ? (
         <div
-          className={cn("h-full flex items-center gap-1", {
-            "text-red-500": shouldHighlightDate,
+          className={cn("flex h-full items-center gap-1", {
+            "text-danger-primary": shouldHighlightDate,
           })}
         >
-          <CalendarDays className="shrink-0 size-3" />
+          <CalendarDays className="size-3 shrink-0" />
           <span>
             {renderFormattedDate(startDate)} - {renderFormattedDate(targetDate)}
           </span>
         </div>
       ) : startDate ? (
-        <div className="h-full flex items-center gap-1">
-          <StartDatePropertyIcon className="shrink-0 size-3" />
+        <div className="flex h-full items-center gap-1">
+          <StartDatePropertyIcon className="size-3 shrink-0" />
           <span>{renderFormattedDate(startDate)}</span>
         </div>
       ) : (
         <div
-          className={cn("h-full flex items-center gap-1", {
-            "text-red-500": shouldHighlightDate,
+          className={cn("flex h-full items-center gap-1", {
+            "text-danger-primary": shouldHighlightDate,
           })}
         >
-          <DueDatePropertyIcon className="shrink-0 size-3" />
+          <DueDatePropertyIcon className="size-3 shrink-0" />
           <span>{renderFormattedDate(targetDate)}</span>
         </div>
       )}
diff --git a/apps/web/core/components/issues/preview-card/index.ts b/apps/web/core/components/issues/preview-card/index.ts
index 1efe34c51..d98033459 100644
--- a/apps/web/core/components/issues/preview-card/index.ts
+++ b/apps/web/core/components/issues/preview-card/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./root";
diff --git a/apps/web/core/components/issues/preview-card/root.tsx b/apps/web/core/components/issues/preview-card/root.tsx
index e038733b0..d54220f63 100644
--- a/apps/web/core/components/issues/preview-card/root.tsx
+++ b/apps/web/core/components/issues/preview-card/root.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 // plane imports
 import { PriorityIcon, StateGroupIcon } from "@plane/propel/icons";
@@ -32,25 +38,25 @@ export const WorkItemPreviewCard = observer(function WorkItemPreviewCard(props:
   const stateName = stateDetails?.name ?? fallbackStateDetails?.name;
 
   return (
-    <div className="p-3 space-y-2 w-72 rounded-lg shadow-custom-shadow-rg bg-custom-background-100 border-[0.5px] border-custom-border-300">
-      <div className="flex items-center justify-between gap-3 text-custom-text-200">
+    <div className="w-72 space-y-2 rounded-lg border-[0.5px] border-strong bg-surface-1 p-3 shadow-raised-200">
+      <div className="flex items-center justify-between gap-3 text-secondary">
         <IssueIdentifier
-          textContainerClassName="shrink-0 text-xs text-custom-text-200"
+          size="xs"
+          variant="secondary"
           projectId={projectId}
           projectIdentifier={projectIdentifier}
           issueSequenceId={workItem.sequence_id}
           issueTypeId={workItem.type_id}
-          size="xs"
         />
-        <div className="shrink-0 flex items-center gap-1">
-          <StateGroupIcon stateGroup={stateGroup} className="shrink-0 size-3" />
-          <p className="text-xs font-medium">{stateName}</p>
+        <div className="flex shrink-0 items-center gap-1">
+          <StateGroupIcon stateGroup={stateGroup} className="size-3 shrink-0" />
+          <p className="text-11 font-medium">{stateName}</p>
         </div>
       </div>
       <div>
-        <h6 className="text-sm">{workItem.name}</h6>
+        <h6 className="text-13 wrap-break-word">{workItem.name}</h6>
       </div>
-      <div className="flex items-center gap-1 h-5">
+      <div className="flex h-5 items-center gap-1">
         <PriorityIcon priority={workItem.priority} withContainer />
         <WorkItemPreviewCardDate
           startDate={workItem.start_date}
diff --git a/apps/web/core/components/issues/relations/issue-list-item.tsx b/apps/web/core/components/issues/relations/issue-list-item.tsx
index de106b03a..573a4b725 100644
--- a/apps/web/core/components/issues/relations/issue-list-item.tsx
+++ b/apps/web/core/components/issues/relations/issue-list-item.tsx
@@ -1,9 +1,13 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 import { observer } from "mobx-react";
-import { Pencil, Trash, Link as LinkIcon } from "lucide-react";
 import { useTranslation } from "@plane/i18n";
-import { CloseIcon } from "@plane/propel/icons";
+import { LinkIcon, EditIcon, TrashIcon, CloseIcon } from "@plane/propel/icons";
 // plane imports
 import { Tooltip } from "@plane/propel/tooltip";
 import type { TIssue, TIssueServiceType } from "@plane/types";
@@ -124,9 +128,9 @@ export const RelationIssueListItem = observer(function RelationIssueListItem(pro
         className="w-full cursor-pointer"
       >
         {issue && (
-          <div className="group relative flex min-h-11 h-full w-full items-center px-1.5 py-1 transition-all hover:bg-custom-background-90">
+          <div className="group relative flex h-full min-h-11 w-full items-center px-1.5 py-1 transition-all hover:bg-surface-2">
             <span className="size-5 flex-shrink-0" />
-            <div className="flex w-full truncate cursor-pointer items-center gap-3">
+            <div className="flex min-w-0 flex-1 cursor-pointer items-center gap-3">
               <div className="flex-shrink-0">
                 {projectDetail && (
                   <IssueIdentifier
@@ -134,17 +138,18 @@ export const RelationIssueListItem = observer(function RelationIssueListItem(pro
                     issueTypeId={issue.type_id}
                     projectIdentifier={projectDetail.identifier}
                     issueSequenceId={issue.sequence_id}
-                    textContainerClassName="text-xs text-custom-text-200"
+                    size="xs"
+                    variant="secondary"
                   />
                 )}
               </div>
 
               <Tooltip tooltipContent={issue.name} isMobile={isMobile}>
-                <span className="w-full truncate text-sm text-custom-text-100">{issue.name}</span>
+                <span className="w-0 flex-1 truncate text-13 text-primary">{issue.name}</span>
               </Tooltip>
             </div>
             <div
-              className="flex-shrink-0 text-sm"
+              className="flex-shrink-0 text-13"
               onClick={(e) => {
                 e.preventDefault();
                 e.stopPropagation();
@@ -158,12 +163,12 @@ export const RelationIssueListItem = observer(function RelationIssueListItem(pro
                 issueServiceType={issueServiceType}
               />
             </div>
-            <div className="flex-shrink-0 text-sm">
+            <div className="flex-shrink-0 pl-2 text-13">
               <CustomMenu placement="bottom-end" ellipsis>
                 {!disabled && (
                   <CustomMenu.MenuItem onClick={handleEditIssue}>
                     <div className="flex items-center gap-2">
-                      <Pencil className="h-3.5 w-3.5" strokeWidth={2} />
+                      <EditIcon className="h-3.5 w-3.5" strokeWidth={2} />
                       <span>{t("common.actions.edit")}</span>
                     </div>
                   </CustomMenu.MenuItem>
@@ -188,7 +193,7 @@ export const RelationIssueListItem = observer(function RelationIssueListItem(pro
                 {!disabled && (
                   <CustomMenu.MenuItem onClick={handleDeleteIssue}>
                     <div className="flex items-center gap-2">
-                      <Trash className="h-3.5 w-3.5" strokeWidth={2} />
+                      <TrashIcon className="h-3.5 w-3.5" strokeWidth={2} />
                       <span>{t("common.actions.delete")}</span>
                     </div>
                   </CustomMenu.MenuItem>
diff --git a/apps/web/core/components/issues/relations/issue-list.tsx b/apps/web/core/components/issues/relations/issue-list.tsx
index e78ab6086..e6f245416 100644
--- a/apps/web/core/components/issues/relations/issue-list.tsx
+++ b/apps/web/core/components/issues/relations/issue-list.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 import { observer } from "mobx-react";
 // plane imports
diff --git a/apps/web/core/components/issues/relations/properties.tsx b/apps/web/core/components/issues/relations/properties.tsx
index 2609ee69f..0342d8ceb 100644
--- a/apps/web/core/components/issues/relations/properties.tsx
+++ b/apps/web/core/components/issues/relations/properties.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 import { observer } from "mobx-react";
 // components
diff --git a/apps/web/core/components/issues/select/base.tsx b/apps/web/core/components/issues/select/base.tsx
index d7fa20779..6503d92a8 100644
--- a/apps/web/core/components/issues/select/base.tsx
+++ b/apps/web/core/components/issues/select/base.tsx
@@ -1,14 +1,20 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React, { useEffect, useRef, useState } from "react";
 import type { Placement } from "@popperjs/core";
 import { observer } from "mobx-react";
 import { usePopper } from "react-popper";
-import { Check, Component, Loader, Search } from "lucide-react";
+import { Component, Loader } from "lucide-react";
 import { Combobox } from "@headlessui/react";
 import { getRandomLabelColor } from "@plane/constants";
 // plane imports
 import { useOutsideClickDetector } from "@plane/hooks";
 import { useTranslation } from "@plane/i18n";
-import { LabelPropertyIcon } from "@plane/propel/icons";
+import { CheckIcon, SearchIcon, LabelPropertyIcon } from "@plane/propel/icons";
 import type { IIssueLabel } from "@plane/types";
 import { cn } from "@plane/utils";
 // components
@@ -151,7 +157,7 @@ export const WorkItemLabelSelectBase = observer(function WorkItemLabelSelectBase
       tabIndex={tabIndex}
       value={value}
       onChange={dropdownOnChange}
-      className="relative flex-shrink-0 h-full"
+      className="relative h-full flex-shrink-0"
       multiple
       disabled={disabled}
       onKeyDown={handleKeyDown}
@@ -159,16 +165,13 @@ export const WorkItemLabelSelectBase = observer(function WorkItemLabelSelectBase
       <button
         type="button"
         ref={setReferenceElement}
-        className={cn(
-          "h-full flex cursor-pointer items-center gap-2 text-xs text-custom-text-200",
-          buttonContainerClassName
-        )}
+        className={cn("flex h-full cursor-pointer items-center gap-2 text-11", buttonContainerClassName)}
         onClick={handleOnClick}
       >
         {label ? (
           label
         ) : value && value.length > 0 ? (
-          <span className={cn("flex items-center justify-center gap-2 text-xs h-full", buttonClassName)}>
+          <span className={cn("flex h-full items-center justify-center gap-2 text-11", buttonClassName)}>
             <IssueLabelsList
               labels={value.map((v) => labelsList?.find((l) => l.id === v)) ?? []}
               length={3}
@@ -178,7 +181,7 @@ export const WorkItemLabelSelectBase = observer(function WorkItemLabelSelectBase
         ) : (
           <div
             className={cn(
-              "h-full flex items-center justify-center gap-1 rounded border-[0.5px] border-custom-border-300 px-2 py-1 text-xs hover:bg-custom-background-80",
+              "flex h-full items-center justify-center gap-1 rounded-sm border-[0.5px] border-strong px-2 py-1 text-11 hover:bg-layer-1",
               buttonClassName
             )}
           >
@@ -191,17 +194,17 @@ export const WorkItemLabelSelectBase = observer(function WorkItemLabelSelectBase
       {isDropdownOpen && (
         <Combobox.Options className="fixed z-10" static>
           <div
-            className="my-1 w-48 rounded border-[0.5px] border-custom-border-300 bg-custom-background-100 px-2 py-2.5 text-xs shadow-custom-shadow-rg focus:outline-none"
+            className="my-1 w-48 rounded-sm border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 text-11 shadow-raised-200 focus:outline-none"
             ref={setPopperElement}
             style={styles.popper}
             {...attributes.popper}
           >
-            <div className="flex items-center gap-1.5 rounded border border-custom-border-100 bg-custom-background-90 px-2">
-              <Search className="h-3.5 w-3.5 text-custom-text-400" strokeWidth={1.5} />
+            <div className="flex items-center gap-1.5 rounded-sm border border-subtle bg-surface-2 px-2">
+              <SearchIcon className="h-3.5 w-3.5 text-placeholder" strokeWidth={1.5} />
               <Combobox.Input
                 as="input"
                 ref={inputRef}
-                className="w-full bg-transparent py-1 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
+                className="w-full bg-transparent py-1 text-11 text-secondary placeholder:text-placeholder focus:outline-none"
                 onChange={(event) => setQuery(event.target.value)}
                 placeholder={t("search")}
                 displayValue={(assigned: any) => assigned?.name}
@@ -221,13 +224,13 @@ export const WorkItemLabelSelectBase = observer(function WorkItemLabelSelectBase
                             key={label.id}
                             className={({ active }) =>
                               `${
-                                active ? "bg-custom-background-80" : ""
-                              } group flex w-full cursor-pointer select-none items-center gap-2 truncate rounded px-1 py-1.5 text-custom-text-200`
+                                active ? "bg-layer-1" : ""
+                              } group flex w-full cursor-pointer items-center gap-2 truncate rounded-sm px-1 py-1.5 text-secondary select-none`
                             }
                             value={label.id}
                           >
                             {({ selected }) => (
-                              <div className="flex w-full justify-between gap-2 rounded">
+                              <div className="flex w-full justify-between gap-2 rounded-sm">
                                 <div className="flex items-center justify-start gap-2 truncate">
                                   <span
                                     className="h-2.5 w-2.5 flex-shrink-0 rounded-full"
@@ -237,8 +240,8 @@ export const WorkItemLabelSelectBase = observer(function WorkItemLabelSelectBase
                                   />
                                   <span className="truncate">{label.name}</span>
                                 </div>
-                                <div className="flex shrink-0 items-center justify-center rounded p-1">
-                                  <Check className={`h-3 w-3 ${selected ? "opacity-100" : "opacity-0"}`} />
+                                <div className="flex shrink-0 items-center justify-center rounded-sm p-1">
+                                  <CheckIcon className={`h-3 w-3 ${selected ? "opacity-100" : "opacity-0"}`} />
                                 </div>
                               </div>
                             )}
@@ -246,8 +249,8 @@ export const WorkItemLabelSelectBase = observer(function WorkItemLabelSelectBase
                         );
                     } else
                       return (
-                        <div key={label.id} className="border-y border-custom-border-200">
-                          <div className="flex select-none items-center gap-2 truncate p-2 text-custom-text-100">
+                        <div key={label.id} className="border-y border-subtle">
+                          <div className="flex items-center gap-2 truncate p-2 text-primary select-none">
                             <Component className="h-3 w-3" /> {label.name}
                           </div>
                           <div>
@@ -256,13 +259,13 @@ export const WorkItemLabelSelectBase = observer(function WorkItemLabelSelectBase
                                 key={child.id}
                                 className={({ active }) =>
                                   `${
-                                    active ? "bg-custom-background-80" : ""
-                                  } group flex min-w-[14rem] cursor-pointer select-none items-center gap-2 truncate rounded px-1 py-1.5 text-custom-text-200`
+                                    active ? "bg-layer-1" : ""
+                                  } group flex min-w-[14rem] cursor-pointer items-center gap-2 truncate rounded-sm px-1 py-1.5 text-secondary select-none`
                                 }
                                 value={child.id}
                               >
                                 {({ selected }) => (
-                                  <div className="flex w-full justify-between gap-2 rounded">
+                                  <div className="flex w-full justify-between gap-2 rounded-sm">
                                     <div className="flex items-center justify-start gap-2">
                                       <span
                                         className="h-2.5 w-2.5 flex-shrink-0 rounded-full"
@@ -272,8 +275,8 @@ export const WorkItemLabelSelectBase = observer(function WorkItemLabelSelectBase
                                       />
                                       <span>{child.name}</span>
                                     </div>
-                                    <div className="flex items-center justify-center rounded p-1">
-                                      <Check className={`h-3 w-3 ${selected ? "opacity-100" : "opacity-0"}`} />
+                                    <div className="flex items-center justify-center rounded-sm p-1">
+                                      <CheckIcon className={`h-3 w-3 ${selected ? "opacity-100" : "opacity-0"}`} />
                                     </div>
                                   </div>
                                 )}
@@ -284,29 +287,29 @@ export const WorkItemLabelSelectBase = observer(function WorkItemLabelSelectBase
                       );
                   })
                 ) : submitting ? (
-                  <Loader className="animate-spin h-3.5 w-3.5" />
+                  <Loader className="h-3.5 w-3.5 animate-spin" />
                 ) : createLabelEnabled ? (
                   <p
                     onClick={() => {
                       if (!query.length) return;
                       handleAddLabel(query);
                     }}
-                    className={`text-left text-custom-text-200 ${query.length ? "cursor-pointer" : "cursor-default"}`}
+                    className={`text-left text-secondary ${query.length ? "cursor-pointer" : "cursor-default"}`}
                   >
                     {/* TODO: translate here */}
                     {query.length ? (
                       <>
-                        + Add <span className="text-custom-text-100">&quot;{query}&quot;</span> to labels
+                        + Add <span className="text-primary">&quot;{query}&quot;</span> to labels
                       </>
                     ) : (
                       t("label.create.type")
                     )}
                   </p>
                 ) : (
-                  <p className="text-custom-text-400 italic py-1 px-1.5">{t("no_matching_results")}</p>
+                  <p className="px-1.5 py-1 text-placeholder italic">{t("no_matching_results")}</p>
                 )
               ) : (
-                <p className="text-custom-text-400 italic py-1 px-1.5">{t("loading")}</p>
+                <p className="px-1.5 py-1 text-placeholder italic">{t("loading")}</p>
               )}
             </div>
           </div>
diff --git a/apps/web/core/components/issues/select/dropdown.tsx b/apps/web/core/components/issues/select/dropdown.tsx
index ea0d803c7..b21bb267d 100644
--- a/apps/web/core/components/issues/select/dropdown.tsx
+++ b/apps/web/core/components/issues/select/dropdown.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
diff --git a/apps/web/core/components/issues/select/index.ts b/apps/web/core/components/issues/select/index.ts
index 22dfbe30b..9bcbbe62b 100644
--- a/apps/web/core/components/issues/select/index.ts
+++ b/apps/web/core/components/issues/select/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./dropdown";
diff --git a/apps/web/core/components/issues/title-input.tsx b/apps/web/core/components/issues/title-input.tsx
index d521c1fb1..ce82b0e72 100644
--- a/apps/web/core/components/issues/title-input.tsx
+++ b/apps/web/core/components/issues/title-input.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useState, useEffect, useCallback, useRef } from "react";
 import { observer } from "mobx-react";
 import { useTranslation } from "@plane/i18n";
@@ -39,7 +44,7 @@ export const IssueTitleInput = observer(function IssueTitleInput(props: IssueTit
   } = props;
   const { t } = useTranslation();
   // states
-  const [title, setTitle] = useState("");
+  const [title, setTitle] = useState(value || "");
   const [isLengthVisible, setIsLengthVisible] = useState(false);
   // ref to track if there are unsaved changes
   const hasUnsavedChanges = useRef(false);
@@ -137,7 +142,7 @@ export const IssueTitleInput = observer(function IssueTitleInput(props: IssueTit
     [setIsSubmitting]
   );
 
-  if (disabled) return <div className="text-2xl font-medium whitespace-pre-line">{title}</div>;
+  if (disabled) return <div className="text-20 font-medium whitespace-pre-line">{title}</div>;
 
   return (
     <div className="flex flex-col gap-1.5">
@@ -145,9 +150,9 @@ export const IssueTitleInput = observer(function IssueTitleInput(props: IssueTit
         <TextArea
           id="title-input"
           className={cn(
-            "block w-full resize-none overflow-hidden rounded border-none bg-transparent px-3 py-0 text-2xl font-medium outline-none ring-0",
+            "block w-full resize-none overflow-hidden rounded-sm border-none bg-transparent px-3 py-0 text-20 font-medium ring-0 outline-none",
             {
-              "ring-1 ring-red-400 mx-2.5": title?.length === 0,
+              "mx-2.5 ring-1 ring-danger-strong": title?.length === 0,
             },
             className
           )}
@@ -161,17 +166,21 @@ export const IssueTitleInput = observer(function IssueTitleInput(props: IssueTit
         />
         <div
           className={cn(
-            "pointer-events-none absolute bottom-1 right-1 z-[2] rounded bg-custom-background-100 p-0.5 text-xs text-custom-text-200 opacity-0 transition-opacity",
+            "pointer-events-none absolute right-1 bottom-1 z-[2] rounded-sm bg-surface-1 p-0.5 text-11 text-secondary opacity-0 transition-opacity",
             {
               "opacity-100": isLengthVisible,
             }
           )}
         >
-          <span className={`${title.length === 0 || title.length > 255 ? "text-red-500" : ""}`}>{title.length}</span>
+          <span className={`${title.length === 0 || title.length > 255 ? "text-danger-primary" : ""}`}>
+            {title.length}
+          </span>
           /255
         </div>
       </div>
-      {title?.length === 0 && <span className="text-sm font-medium text-red-500">{t("form.title.required")}</span>}
+      {title?.length === 0 && (
+        <span className="text-13 font-medium text-danger-primary">{t("form.title.required")}</span>
+      )}
     </div>
   );
 });
diff --git a/apps/web/core/components/issues/workspace-draft/delete-modal.tsx b/apps/web/core/components/issues/workspace-draft/delete-modal.tsx
index 380b45cbf..1b0634c2c 100644
--- a/apps/web/core/components/issues/workspace-draft/delete-modal.tsx
+++ b/apps/web/core/components/issues/workspace-draft/delete-modal.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useEffect, useState } from "react";
 // types
 import { PROJECT_ERROR_MESSAGES, EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
diff --git a/apps/web/core/components/issues/workspace-draft/draft-issue-block.tsx b/apps/web/core/components/issues/workspace-draft/draft-issue-block.tsx
index 4020b1394..dd3c7b599 100644
--- a/apps/web/core/components/issues/workspace-draft/draft-issue-block.tsx
+++ b/apps/web/core/components/issues/workspace-draft/draft-issue-block.tsx
@@ -1,8 +1,14 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React, { useRef, useState } from "react";
 import { omit } from "lodash-es";
 import { observer } from "mobx-react";
-import { Copy, Pencil, SquareStackIcon, Trash2 } from "lucide-react";
+import { SquareStackIcon } from "lucide-react";
+import { CopyIcon, EditIcon, TrashIcon } from "@plane/propel/icons";
 // plane utils
 import { Tooltip } from "@plane/propel/tooltip";
 import type { TWorkspaceDraftIssue } from "@plane/types";
@@ -15,8 +21,9 @@ import { useAppTheme } from "@/hooks/store/use-app-theme";
 import { useProject } from "@/hooks/store/use-project";
 import { useWorkspaceDraftIssues } from "@/hooks/store/workspace-draft";
 // plane-web imports
-import { IdentifierText, IssueTypeIdentifier } from "@/plane-web/components/issues/issue-details/issue-identifier";
+import { IssueTypeIdentifier } from "@/plane-web/components/issues/issue-details/issue-identifier";
 // local imports
+import { IdentifierText } from "../issue-detail/identifier-text";
 import { CreateUpdateIssueModal } from "../issue-modal/modal";
 import { WorkspaceDraftIssueDeleteIssueModal } from "./delete-modal";
 import { DraftIssueProperties } from "./draft-issue-properties";
@@ -59,7 +66,7 @@ export const DraftIssueBlock = observer(function DraftIssueBlock(props: Props) {
     {
       key: "edit",
       title: "edit",
-      icon: Pencil,
+      icon: EditIcon,
       action: () => {
         setIssueToEdit(issue);
         setCreateUpdateIssueModal(true);
@@ -68,7 +75,7 @@ export const DraftIssueBlock = observer(function DraftIssueBlock(props: Props) {
     {
       key: "make-a-copy",
       title: "make_a_copy",
-      icon: Copy,
+      icon: CopyIcon,
       action: () => {
         setCreateUpdateIssueModal(true);
       },
@@ -86,7 +93,7 @@ export const DraftIssueBlock = observer(function DraftIssueBlock(props: Props) {
     {
       key: "delete",
       title: "delete",
-      icon: Trash2,
+      icon: TrashIcon,
       action: () => {
         setDeleteIssueModal(true);
       },
@@ -119,7 +126,7 @@ export const DraftIssueBlock = observer(function DraftIssueBlock(props: Props) {
       />
       <div
         id={`issue-${issue.id}`}
-        className=" relative border-b border-b-custom-border-200 w-full cursor-pointer"
+        className="relative w-full cursor-pointer border-b border-b-subtle-1"
         onDoubleClick={() => {
           setIssueToEdit(issue);
           setCreateUpdateIssueModal(true);
@@ -128,7 +135,7 @@ export const DraftIssueBlock = observer(function DraftIssueBlock(props: Props) {
         <Row
           ref={issueRef}
           className={cn(
-            "group/list-block min-h-11 relative flex flex-col gap-3 bg-custom-background-100 hover:bg-custom-background-90 py-3 text-sm transition-colors border border-transparent last:border-b-transparent",
+            "group/list-block relative flex min-h-11 flex-col gap-3 bg-layer-transparent py-3 text-13 transition-colors hover:bg-layer-transparent-hover",
             {
               "md:flex-row md:items-center": isSidebarCollapsed,
               "lg:flex-row lg:items-center": !isSidebarCollapsed,
@@ -145,24 +152,25 @@ export const DraftIssueBlock = observer(function DraftIssueBlock(props: Props) {
                       <IdentifierText
                         identifier={projectIdentifier}
                         enableClickToCopyIdentifier
-                        textContainerClassName="text-xs font-medium text-custom-text-300"
+                        size="xs"
+                        variant="tertiary"
                       />
                     </div>
                   )}
                 </div>
 
                 {/* sub-issues chevron */}
-                <div className="size-4 grid place-items-center flex-shrink-0" />
+                <div className="grid size-4 flex-shrink-0 place-items-center" />
               </div>
 
               <Tooltip tooltipContent={issue.name} position="top-start" renderByDefault={false}>
-                <p className="w-full truncate cursor-pointer text-sm text-custom-text-100">{issue.name}</p>
+                <p className="w-full cursor-pointer truncate text-13 text-primary">{issue.name}</p>
               </Tooltip>
             </div>
 
             {/* quick actions */}
             <div
-              className={cn("block border border-custom-border-300 rounded", {
+              className={cn("block rounded-sm border border-strong", {
                 "md:hidden": isSidebarCollapsed,
                 "lg:hidden": !isSidebarCollapsed,
               })}
@@ -173,7 +181,7 @@ export const DraftIssueBlock = observer(function DraftIssueBlock(props: Props) {
 
           <div className="flex flex-shrink-0 items-center gap-2">
             <DraftIssueProperties
-              className={`relative flex flex-wrap ${isSidebarCollapsed ? "md:flex-grow md:flex-shrink-0" : "lg:flex-grow lg:flex-shrink-0"} items-center gap-2 whitespace-nowrap`}
+              className={`relative flex flex-wrap ${isSidebarCollapsed ? "md:flex-shrink-0 md:flex-grow" : "lg:flex-shrink-0 lg:flex-grow"} items-center gap-2 whitespace-nowrap`}
               issue={issue}
               updateIssue={async (projectId, issueId, data) => {
                 await updateIssue(workspaceSlug, issueId, data);
diff --git a/apps/web/core/components/issues/workspace-draft/draft-issue-properties.tsx b/apps/web/core/components/issues/workspace-draft/draft-issue-properties.tsx
index 56910deab..e526909ab 100644
--- a/apps/web/core/components/issues/workspace-draft/draft-issue-properties.tsx
+++ b/apps/web/core/components/issues/workspace-draft/draft-issue-properties.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useCallback, useMemo } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
@@ -193,9 +199,9 @@ export const DraftIssueProperties = observer(function DraftIssueProperties(props
           icon={<DueDatePropertyIcon className="h-3 w-3 flex-shrink-0" />}
           buttonVariant={issue.target_date ? "border-with-text" : "border-without-text"}
           buttonClassName={
-            shouldHighlightIssueDueDate(issue?.target_date || null, stateDetails?.group) ? "text-red-500" : ""
+            shouldHighlightIssueDueDate(issue?.target_date || null, stateDetails?.group) ? "text-danger-primary" : ""
           }
-          clearIconClassName="!text-custom-text-100"
+          clearIconClassName="!text-primary"
           optionsClassName="z-10"
           renderByDefault={isMobile}
           showTooltip
diff --git a/apps/web/core/components/issues/workspace-draft/empty-state.tsx b/apps/web/core/components/issues/workspace-draft/empty-state.tsx
index 7466e513d..a5d4f84c8 100644
--- a/apps/web/core/components/issues/workspace-draft/empty-state.tsx
+++ b/apps/web/core/components/issues/workspace-draft/empty-state.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { Fragment, useState } from "react";
 // components
 import { observer } from "mobx-react";
@@ -35,7 +40,6 @@ export const WorkspaceDraftEmptyState = observer(function WorkspaceDraftEmptySta
           title={t("workspace_empty_state.drafts.title")}
           description={t("workspace_empty_state.drafts.description")}
           assetKey="draft"
-          assetClassName="size-20"
           actions={[
             {
               label: t("workspace_empty_state.drafts.cta_primary"),
diff --git a/apps/web/core/components/issues/workspace-draft/index.ts b/apps/web/core/components/issues/workspace-draft/index.ts
index 1efe34c51..d98033459 100644
--- a/apps/web/core/components/issues/workspace-draft/index.ts
+++ b/apps/web/core/components/issues/workspace-draft/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./root";
diff --git a/apps/web/core/components/issues/workspace-draft/loader.tsx b/apps/web/core/components/issues/workspace-draft/loader.tsx
index 62f2c9bc5..b301f946a 100644
--- a/apps/web/core/components/issues/workspace-draft/loader.tsx
+++ b/apps/web/core/components/issues/workspace-draft/loader.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { range } from "lodash-es";
 // components
 import { ListLoaderItemRow } from "@/components/ui/loader/layouts/list-layout-loader";
diff --git a/apps/web/core/components/issues/workspace-draft/quick-action.tsx b/apps/web/core/components/issues/workspace-draft/quick-action.tsx
index 1cb1710dc..b6fc7f644 100644
--- a/apps/web/core/components/issues/workspace-draft/quick-action.tsx
+++ b/apps/web/core/components/issues/workspace-draft/quick-action.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import { useTranslation } from "@plane/i18n";
 // ui
@@ -36,7 +42,7 @@ export const WorkspaceDraftIssueQuickActions = observer(function WorkspaceDraftI
             className={cn(
               "flex items-center gap-2",
               {
-                "text-custom-text-400": item.disabled,
+                "text-placeholder": item.disabled,
               },
               item.className
             )}
@@ -47,8 +53,8 @@ export const WorkspaceDraftIssueQuickActions = observer(function WorkspaceDraftI
               <h5>{t(item.title || "")}</h5>
               {item.description && (
                 <p
-                  className={cn("text-custom-text-300 whitespace-pre-line", {
-                    "text-custom-text-400": item.disabled,
+                  className={cn("whitespace-pre-line text-tertiary", {
+                    "text-placeholder": item.disabled,
                   })}
                 >
                   {item.description}
diff --git a/apps/web/core/components/issues/workspace-draft/root.tsx b/apps/web/core/components/issues/workspace-draft/root.tsx
index 112f116e8..b620a95af 100644
--- a/apps/web/core/components/issues/workspace-draft/root.tsx
+++ b/apps/web/core/components/issues/workspace-draft/root.tsx
@@ -1,15 +1,19 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { Fragment } from "react";
 import { observer } from "mobx-react";
 import useSWR from "swr";
 // plane imports
-import { EUserPermissionsLevel, EDraftIssuePaginationType, PROJECT_TRACKER_ELEMENTS } from "@plane/constants";
+import { EUserPermissionsLevel, EDraftIssuePaginationType } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { EmptyStateDetailed } from "@plane/propel/empty-state";
 import { EUserWorkspaceRoles } from "@plane/types";
 // components
 import { cn } from "@plane/utils";
-import { captureClick } from "@/helpers/event-tracker.helper";
 // hooks
 import { useCommandPalette } from "@/hooks/store/use-command-palette";
 import { useProject } from "@/hooks/store/use-project";
@@ -72,7 +76,6 @@ export const WorkspaceDraftIssuesRoot = observer(function WorkspaceDraftIssuesRo
             label: t("workspace_projects.empty_state.no_projects.primary_button.text"),
             onClick: () => {
               toggleCreateProjectModal(true);
-              captureClick({ elementName: PROJECT_TRACKER_ELEMENTS.EMPTY_STATE_CREATE_PROJECT_BUTTON });
             },
             disabled: !hasMemberLevelPermission,
             variant: "primary",
@@ -97,13 +100,10 @@ export const WorkspaceDraftIssuesRoot = observer(function WorkspaceDraftIssuesRo
             <WorkspaceDraftIssuesLoader items={1} />
           ) : (
             <div
-              className={cn(
-                "h-11 pl-6 p-3 text-sm font-medium bg-custom-background-100 border-b border-custom-border-200 transition-all",
-                {
-                  "text-custom-primary-100 hover:text-custom-primary-200 cursor-pointer underline-offset-2 hover:underline":
-                    paginationInfo?.next_page_results,
-                }
-              )}
+              className={cn("h-11 border-b border-subtle bg-surface-1 p-3 pl-6 text-13 font-medium transition-all", {
+                "cursor-pointer text-accent-primary underline-offset-2 hover:text-accent-secondary hover:underline":
+                  paginationInfo?.next_page_results,
+              })}
               onClick={handleNextIssues}
             >
               Load More &darr;
diff --git a/apps/web/core/components/labels/create-update-label-inline.tsx b/apps/web/core/components/labels/create-update-label-inline.tsx
index 8f5683711..6be483cd1 100644
--- a/apps/web/core/components/labels/create-update-label-inline.tsx
+++ b/apps/web/core/components/labels/create-update-label-inline.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React, { forwardRef, useEffect } from "react";
 import { observer } from "mobx-react";
 import { TwitterPicker } from "react-color";
@@ -5,13 +11,12 @@ import type { SubmitHandler } from "react-hook-form";
 import { Controller, useForm } from "react-hook-form";
 import { Popover, Transition } from "@headlessui/react";
 // plane imports
-import { getRandomLabelColor, LABEL_COLOR_OPTIONS, PROJECT_SETTINGS_TRACKER_EVENTS } from "@plane/constants";
+import { getRandomLabelColor, LABEL_COLOR_OPTIONS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { Button } from "@plane/propel/button";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { IIssueLabel } from "@plane/types";
 import { Input } from "@plane/ui";
-import { captureError, captureSuccess } from "@/helpers/event-tracker.helper";
 
 // error codes
 const errorCodes = {
@@ -34,7 +39,7 @@ type TCreateUpdateLabelInlineProps = {
 
 const defaultValues: Partial<IIssueLabel> = {
   name: "",
-  color: "rgb(var(--color-text-200))",
+  color: "var(--text-color-secondary)",
 };
 
 export const CreateUpdateLabelInline = observer(
@@ -86,26 +91,11 @@ export const CreateUpdateLabelInline = observer(
 
       await labelOperationsCallbacks
         .createLabel(formData)
-        .then((res) => {
-          captureSuccess({
-            eventName: PROJECT_SETTINGS_TRACKER_EVENTS.label_created,
-            payload: {
-              name: res.name,
-              id: res.id,
-            },
-          });
+        .then((_res) => {
           handleClose();
           reset(defaultValues);
         })
         .catch((error) => {
-          captureError({
-            eventName: PROJECT_SETTINGS_TRACKER_EVENTS.label_created,
-            payload: {
-              name: formData.name,
-            },
-            error,
-          });
-
           const errorMessage = getErrorMessage(error, "create");
           setToast({
             title: "Error!",
@@ -121,26 +111,11 @@ export const CreateUpdateLabelInline = observer(
 
       await labelOperationsCallbacks
         .updateLabel(labelToUpdate.id, formData)
-        .then((res) => {
-          captureSuccess({
-            eventName: PROJECT_SETTINGS_TRACKER_EVENTS.label_updated,
-            payload: {
-              name: res.name,
-              id: res.id,
-            },
-          });
+        .then((_res) => {
           reset(defaultValues);
           handleClose();
         })
         .catch((error) => {
-          captureError({
-            eventName: PROJECT_SETTINGS_TRACKER_EVENTS.label_updated,
-            payload: {
-              name: formData.name,
-              id: labelToUpdate.id,
-            },
-            error,
-          });
           const errorMessage = getErrorMessage(error, "update");
           setToast({
             title: "Oops!",
@@ -186,15 +161,15 @@ export const CreateUpdateLabelInline = observer(
       <>
         <div
           ref={ref}
-          className={`flex w-full scroll-m-8 items-center gap-2 bg-custom-background-100 ${labelForm ? "" : "hidden"}`}
+          className={`flex w-full scroll-m-8 items-center gap-2 bg-surface-1 ${labelForm ? "" : "hidden"}`}
         >
           <div className="flex-shrink-0">
             <Popover className="relative z-10 flex h-full w-full items-center justify-center">
               {({ open }) => (
                 <>
                   <Popover.Button
-                    className={`group inline-flex items-center text-base font-medium focus:outline-none ${
-                      open ? "text-custom-text-100" : "text-custom-text-200"
+                    className={`group inline-flex items-center text-14 font-medium focus:outline-none ${
+                      open ? "text-primary" : "text-secondary"
                     }`}
                   >
                     <span
@@ -214,7 +189,7 @@ export const CreateUpdateLabelInline = observer(
                     leaveFrom="opacity-100 translate-y-0"
                     leaveTo="opacity-0 translate-y-1"
                   >
-                    <Popover.Panel className="absolute left-0 top-full z-20 mt-3 w-screen max-w-xs px-2 sm:px-0">
+                    <Popover.Panel className="absolute top-full left-0 z-20 mt-3 w-screen max-w-xs px-2 sm:px-0">
                       <Controller
                         name="color"
                         control={control}
@@ -259,7 +234,7 @@ export const CreateUpdateLabelInline = observer(
               )}
             />
           </div>
-          <Button variant="neutral-primary" onClick={() => handleClose()} size="sm">
+          <Button variant="secondary" onClick={() => handleClose()}>
             {t("cancel")}
           </Button>
           <Button
@@ -268,13 +243,12 @@ export const CreateUpdateLabelInline = observer(
               e.preventDefault();
               handleSubmit(handleFormSubmit)();
             }}
-            size="sm"
             loading={isSubmitting}
           >
             {isUpdating ? (isSubmitting ? t("updating") : t("update")) : isSubmitting ? t("adding") : t("add")}
           </Button>
         </div>
-        {errors.name?.message && <p className="p-0.5 pl-8 text-sm text-red-500">{errors.name?.message}</p>}
+        {errors.name?.message && <p className="p-0.5 pl-8 text-13 text-danger-primary">{errors.name?.message}</p>}
       </>
     );
   })
diff --git a/apps/web/core/components/labels/delete-label-modal.tsx b/apps/web/core/components/labels/delete-label-modal.tsx
index ebc9d4651..9adc23834 100644
--- a/apps/web/core/components/labels/delete-label-modal.tsx
+++ b/apps/web/core/components/labels/delete-label-modal.tsx
@@ -1,14 +1,18 @@
-import React, { useState } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // types
-import { PROJECT_SETTINGS_TRACKER_EVENTS } from "@plane/constants";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { IIssueLabel } from "@plane/types";
 // ui
 import { AlertModalCore } from "@plane/ui";
 // hooks
-import { captureError, captureSuccess } from "@/helpers/event-tracker.helper";
 import { useLabel } from "@/hooks/store/use-label";
 
 type Props = {
@@ -38,27 +42,10 @@ export const DeleteLabelModal = observer(function DeleteLabelModal(props: Props)
 
     await deleteLabel(workspaceSlug.toString(), projectId.toString(), data.id)
       .then(() => {
-        captureSuccess({
-          eventName: PROJECT_SETTINGS_TRACKER_EVENTS.label_deleted,
-          payload: {
-            name: data.name,
-            project_id: projectId,
-          },
-        });
         handleClose();
       })
       .catch((err) => {
         setIsDeleteLoading(false);
-
-        captureError({
-          eventName: PROJECT_SETTINGS_TRACKER_EVENTS.label_deleted,
-          payload: {
-            name: data.name,
-            project_id: projectId,
-          },
-          error: err,
-        });
-
         const error = err?.error || "Label could not be deleted. Please try again.";
         setToast({
           type: TOAST_TYPE.ERROR,
@@ -77,8 +64,8 @@ export const DeleteLabelModal = observer(function DeleteLabelModal(props: Props)
       title="Delete Label"
       content={
         <>
-          Are you sure you want to delete <span className="font-medium text-custom-text-100">{data?.name}</span>? This
-          will remove the label from all the work item and from any views where the label is being filtered upon.
+          Are you sure you want to delete <span className="font-medium text-primary">{data?.name}</span>? This will
+          remove the label from all the work item and from any views where the label is being filtered upon.
         </>
       }
     />
diff --git a/apps/web/core/components/labels/index.ts b/apps/web/core/components/labels/index.ts
index 7fe388345..6fe30a046 100644
--- a/apps/web/core/components/labels/index.ts
+++ b/apps/web/core/components/labels/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./create-update-label-inline";
 export * from "./delete-label-modal";
 export * from "./project-setting-label-group";
diff --git a/apps/web/core/components/labels/label-block/label-item-block.tsx b/apps/web/core/components/labels/label-block/label-item-block.tsx
index 7c11722f4..7f8bc075e 100644
--- a/apps/web/core/components/labels/label-block/label-item-block.tsx
+++ b/apps/web/core/components/labels/label-block/label-item-block.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { MutableRefObject } from "react";
 import { useRef, useState } from "react";
 import type { LucideIcon } from "lucide-react";
@@ -91,13 +97,13 @@ export function LabelItemBlock(props: ILabelItemBlock) {
           {!isLabelGroup && (
             <div className="py-0.5">
               <button
-                className="flex size-5 items-center justify-center rounded hover:bg-custom-background-80"
+                className="flex size-5 items-center justify-center rounded-sm hover:bg-layer-1"
                 onClick={() => {
                   handleLabelDelete(label);
                 }}
                 data-ph-element={PROJECT_SETTINGS_TRACKER_ELEMENTS.LABELS_DELETE_BUTTON}
               >
-                <CloseIcon className="size-3.5 flex-shrink-0 text-custom-sidebar-text-300" />
+                <CloseIcon className="size-3.5 flex-shrink-0 text-tertiary" />
               </button>
             </div>
           )}
diff --git a/apps/web/core/components/labels/label-block/label-name.tsx b/apps/web/core/components/labels/label-block/label-name.tsx
index a29bcc339..23e0c60ac 100644
--- a/apps/web/core/components/labels/label-block/label-name.tsx
+++ b/apps/web/core/components/labels/label-block/label-name.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { Component } from "lucide-react";
 
 interface ILabelName {
@@ -21,7 +27,7 @@ export function LabelName(props: ILabelName) {
           }}
         />
       )}
-      <h6 className="text-sm">{name}</h6>
+      <h6 className="text-13">{name}</h6>
     </div>
   );
 }
diff --git a/apps/web/core/components/labels/label-drag-n-drop-HOC.tsx b/apps/web/core/components/labels/label-drag-n-drop-HOC.tsx
index b9fddeafd..483e2cfeb 100644
--- a/apps/web/core/components/labels/label-drag-n-drop-HOC.tsx
+++ b/apps/web/core/components/labels/label-drag-n-drop-HOC.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { MutableRefObject } from "react";
 import { useEffect, useRef, useState } from "react";
 import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
@@ -27,7 +33,7 @@ export function LabelDragPreview(props: LabelDragPreviewProps) {
   const { label, isGroup } = props;
 
   return (
-    <div className="py-3 pl-2 pr-4 border-[1px] border-custom-border-200 bg-custom-background-100">
+    <div className="border-[1px] border-subtle bg-surface-1 py-3 pr-4 pl-2">
       <LabelName name={label.name} color={label.color} isGroup={isGroup} />
     </div>
   );
diff --git a/apps/web/core/components/labels/label-utils.ts b/apps/web/core/components/labels/label-utils.ts
index 7181a899b..2d5402151 100644
--- a/apps/web/core/components/labels/label-utils.ts
+++ b/apps/web/core/components/labels/label-utils.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { extractInstruction } from "@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item";
 import type { IIssueLabel, IPragmaticPayloadLocation, InstructionType, TDropTarget } from "@plane/types";
 
diff --git a/apps/web/core/components/labels/project-setting-label-group.tsx b/apps/web/core/components/labels/project-setting-label-group.tsx
index e972e6407..ed3e7e9d9 100644
--- a/apps/web/core/components/labels/project-setting-label-group.tsx
+++ b/apps/web/core/components/labels/project-setting-label-group.tsx
@@ -1,16 +1,17 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { Dispatch, SetStateAction } from "react";
-import React, { useState } from "react";
+import { useState } from "react";
 import { observer } from "mobx-react";
-import { Pencil, Trash2 } from "lucide-react";
 import { Disclosure, Transition } from "@headlessui/react";
-import { PROJECT_SETTINGS_TRACKER_ELEMENTS } from "@plane/constants";
-import { ChevronDownIcon } from "@plane/propel/icons";
-// store
-// icons
-// types
+// plane imports
+import { EditIcon, TrashIcon, ChevronDownIcon } from "@plane/propel/icons";
 import type { IIssueLabel } from "@plane/types";
 // components
-import { captureClick } from "@/helpers/event-tracker.helper";
 import type { TLabelOperationsCallbacks } from "./create-update-label-inline";
 import { CreateUpdateLabelInline } from "./create-update-label-inline";
 import type { ICustomMenuItem } from "./label-block/label-item-block";
@@ -53,11 +54,8 @@ export const ProjectSettingLabelGroup = observer(function ProjectSettingLabelGro
 
   const customMenuItems: ICustomMenuItem[] = [
     {
-      CustomIcon: Pencil,
+      CustomIcon: EditIcon,
       onClick: () => {
-        captureClick({
-          elementName: PROJECT_SETTINGS_TRACKER_ELEMENTS.LABELS_CONTEXT_MENU,
-        });
         setEditLabelForm(true);
         setIsUpdating(true);
       },
@@ -66,11 +64,8 @@ export const ProjectSettingLabelGroup = observer(function ProjectSettingLabelGro
       key: "edit_label",
     },
     {
-      CustomIcon: Trash2,
+      CustomIcon: TrashIcon,
       onClick: () => {
-        captureClick({
-          elementName: PROJECT_SETTINGS_TRACKER_ELEMENTS.LABELS_CONTEXT_MENU,
-        });
         handleLabelDelete(label);
       },
       isVisible: true,
@@ -83,18 +78,18 @@ export const ProjectSettingLabelGroup = observer(function ProjectSettingLabelGro
     <LabelDndHOC label={label} isGroup isChild={false} isLastChild={isLastChild} onDrop={onDrop}>
       {(isDragging, isDroppingInLabel, dragHandleRef) => (
         <div
-          className={`rounded ${isDroppingInLabel ? "border-[2px] border-custom-primary-100" : "border-[1.5px] border-transparent"}`}
+          className={`rounded-sm ${isDroppingInLabel ? "border-[2px] border-accent-strong" : "border-[1.5px] border-transparent"}`}
         >
           <Disclosure
             as="div"
-            className={`rounded  text-custom-text-100 ${
-              !isDroppingInLabel ? "border-[0.5px] border-custom-border-200" : ""
-            } ${isDragging ? "bg-custom-background-80" : "bg-custom-background-100"}`}
+            className={`rounded-sm text-primary ${
+              !isDroppingInLabel ? "border-[0.5px] border-subtle" : ""
+            } ${isDragging ? "bg-layer-1" : "bg-surface-1"}`}
             defaultOpen
           >
             {({ open }) => (
               <>
-                <div className={`py-3 pl-1 pr-3 ${!isUpdating && "max-h-full overflow-y-hidden"}`}>
+                <div className={`py-3 pr-3 pl-1 ${!isUpdating && "max-h-full overflow-y-hidden"}`}>
                   <>
                     <div className="relative flex cursor-pointer items-center justify-between gap-2">
                       {isEditLabelForm ? (
@@ -123,7 +118,7 @@ export const ProjectSettingLabelGroup = observer(function ProjectSettingLabelGro
                       <Disclosure.Button>
                         <span>
                           <ChevronDownIcon
-                            className={`h-4 w-4 text-custom-sidebar-text-400 ${!open ? "rotate-90 transform" : ""}`}
+                            className={`h-4 w-4 text-placeholder ${!open ? "rotate-90 transform" : ""}`}
                           />
                         </span>
                       </Disclosure.Button>
@@ -140,7 +135,7 @@ export const ProjectSettingLabelGroup = observer(function ProjectSettingLabelGro
                       <Disclosure.Panel>
                         <div className="ml-6">
                           {labelChildren.map((child, index) => (
-                            <div key={child.id} className={`group flex w-full items-center text-sm`}>
+                            <div key={child.id} className={`group flex w-full items-center text-13`}>
                               <div className="w-full">
                                 <ProjectSettingLabelItem
                                   label={child}
diff --git a/apps/web/core/components/labels/project-setting-label-item.tsx b/apps/web/core/components/labels/project-setting-label-item.tsx
index e517a655c..8955617ef 100644
--- a/apps/web/core/components/labels/project-setting-label-item.tsx
+++ b/apps/web/core/components/labels/project-setting-label-item.tsx
@@ -1,13 +1,16 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { Dispatch, SetStateAction } from "react";
-import React, { useState } from "react";
+import { useState } from "react";
 import { useParams } from "next/navigation";
-import { Pencil } from "lucide-react";
-import { PROJECT_SETTINGS_TRACKER_ELEMENTS } from "@plane/constants";
-import { CloseIcon } from "@plane/propel/icons";
+import { EditIcon, CloseIcon } from "@plane/propel/icons";
 // types
 import type { IIssueLabel } from "@plane/types";
 // hooks
-import { captureClick } from "@/helpers/event-tracker.helper";
 import { useLabel } from "@/hooks/store/use-label";
 // components
 import type { TLabelOperationsCallbacks } from "./create-update-label-inline";
@@ -69,13 +72,10 @@ export function ProjectSettingLabelItem(props: Props) {
       key: "remove_from_group",
     },
     {
-      CustomIcon: Pencil,
+      CustomIcon: EditIcon,
       onClick: () => {
         setEditLabelForm(true);
         setIsUpdating(true);
-        captureClick({
-          elementName: PROJECT_SETTINGS_TRACKER_ELEMENTS.LABELS_CONTEXT_MENU,
-        });
       },
       isVisible: true,
       text: "Edit label",
@@ -87,12 +87,12 @@ export function ProjectSettingLabelItem(props: Props) {
     <LabelDndHOC label={label} isGroup={false} isChild={isChild} isLastChild={isLastChild} onDrop={onDrop}>
       {(isDragging, isDroppingInLabel, dragHandleRef) => (
         <div
-          className={`rounded ${isDroppingInLabel ? "border-[2px] border-custom-primary-100" : "border-[1.5px] border-transparent"}`}
+          className={`rounded-sm ${isDroppingInLabel ? "border-[2px] border-accent-strong" : "border-[1.5px] border-transparent"}`}
         >
           <div
-            className={`py-3 px-1 group relative flex items-center justify-between gap-2 space-y-3 rounded  ${
-              isDroppingInLabel ? "" : "border-[0.5px] border-custom-border-200"
-            } ${isDragging || isParentDragging ? "bg-custom-background-80" : "bg-custom-background-100"}`}
+            className={`group relative flex items-center justify-between gap-2 space-y-3 rounded-sm px-1 py-3 ${
+              isDroppingInLabel ? "" : "border-[0.5px] border-subtle"
+            } ${isDragging || isParentDragging ? "bg-layer-1" : "bg-surface-1"}`}
           >
             {isEditLabelForm ? (
               <CreateUpdateLabelInline
diff --git a/apps/web/core/components/labels/project-setting-label-list.tsx b/apps/web/core/components/labels/project-setting-label-list.tsx
index 8e5d3f1fd..6bb506970 100644
--- a/apps/web/core/components/labels/project-setting-label-list.tsx
+++ b/apps/web/core/components/labels/project-setting-label-list.tsx
@@ -1,9 +1,16 @@
-import React, { useState, useRef } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState, useRef } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // plane imports
-import { EUserPermissions, EUserPermissionsLevel, PROJECT_SETTINGS_TRACKER_ELEMENTS } from "@plane/constants";
+import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
+import { Button } from "@plane/propel/button";
 import { EmptyStateCompact } from "@plane/propel/empty-state";
 import type { IIssueLabel } from "@plane/types";
 import { Loader } from "@plane/ui";
@@ -15,7 +22,6 @@ import {
   ProjectSettingLabelItem,
 } from "@/components/labels";
 // hooks
-import { captureClick } from "@/helpers/event-tracker.helper";
 import { useLabel } from "@/hooks/store/use-label";
 import { useUserPermissions } from "@/hooks/store/user";
 // local imports
@@ -77,21 +83,17 @@ export const ProjectSettingsLabelList = observer(function ProjectSettingsLabelLi
       <SettingsHeading
         title={t("project_settings.labels.heading")}
         description={t("project_settings.labels.description")}
-        button={{
-          label: t("common.add_label"),
-          onClick: () => {
-            newLabel();
-            captureClick({
-              elementName: PROJECT_SETTINGS_TRACKER_ELEMENTS.LABELS_HEADER_CREATE_BUTTON,
-            });
-          },
-        }}
-        showButton={isEditable}
+        control={
+          isEditable && (
+            <Button variant="primary" size="lg" onClick={newLabel}>
+              {t("common.add_label")}
+            </Button>
+          )
+        }
       />
-
-      <div className="w-full py-2">
+      <div className="mt-6 w-full">
         {showLabelForm && (
-          <div className="my-2 w-full rounded border border-custom-border-200 px-3.5 py-2">
+          <div className="my-2 w-full rounded-sm border border-subtle px-3.5 py-2">
             <CreateUpdateLabelInline
               labelForm={showLabelForm}
               setLabelForm={setLabelForm}
@@ -117,9 +119,6 @@ export const ProjectSettingsLabelList = observer(function ProjectSettingsLabelLi
                   label: t("settings_empty_state.labels.cta_primary"),
                   onClick: () => {
                     newLabel();
-                    captureClick({
-                      elementName: PROJECT_SETTINGS_TRACKER_ELEMENTS.LABELS_EMPTY_STATE_CREATE_BUTTON,
-                    });
                   },
                 },
               ]}
@@ -127,41 +126,37 @@ export const ProjectSettingsLabelList = observer(function ProjectSettingsLabelLi
               rootClassName="py-20"
             />
           ) : (
-            projectLabelsTree && (
-              <div className="mt-3">
-                {projectLabelsTree.map((label, index) => {
-                  if (label.children && label.children.length) {
-                    return (
-                      <ProjectSettingLabelGroup
-                        key={label.id}
-                        label={label}
-                        labelChildren={label.children || []}
-                        handleLabelDelete={(label: IIssueLabel) => setSelectDeleteLabel(label)}
-                        isUpdating={isUpdating}
-                        setIsUpdating={setIsUpdating}
-                        isLastChild={index === projectLabelsTree.length - 1}
-                        onDrop={onDrop}
-                        isEditable={isEditable}
-                        labelOperationsCallbacks={labelOperationsCallbacks}
-                      />
-                    );
-                  }
-                  return (
-                    <ProjectSettingLabelItem
-                      label={label}
-                      key={label.id}
-                      setIsUpdating={setIsUpdating}
-                      handleLabelDelete={(label) => setSelectDeleteLabel(label)}
-                      isChild={false}
-                      isLastChild={index === projectLabelsTree.length - 1}
-                      onDrop={onDrop}
-                      isEditable={isEditable}
-                      labelOperationsCallbacks={labelOperationsCallbacks}
-                    />
-                  );
-                })}
-              </div>
-            )
+            projectLabelsTree?.map((label, index) => {
+              if (label.children && label.children.length) {
+                return (
+                  <ProjectSettingLabelGroup
+                    key={label.id}
+                    label={label}
+                    labelChildren={label.children || []}
+                    handleLabelDelete={(label: IIssueLabel) => setSelectDeleteLabel(label)}
+                    isUpdating={isUpdating}
+                    setIsUpdating={setIsUpdating}
+                    isLastChild={index === projectLabelsTree.length - 1}
+                    onDrop={onDrop}
+                    isEditable={isEditable}
+                    labelOperationsCallbacks={labelOperationsCallbacks}
+                  />
+                );
+              }
+              return (
+                <ProjectSettingLabelItem
+                  label={label}
+                  key={label.id}
+                  setIsUpdating={setIsUpdating}
+                  handleLabelDelete={(label) => setSelectDeleteLabel(label)}
+                  isChild={false}
+                  isLastChild={index === projectLabelsTree.length - 1}
+                  onDrop={onDrop}
+                  isEditable={isEditable}
+                  labelOperationsCallbacks={labelOperationsCallbacks}
+                />
+              );
+            })
           )
         ) : (
           !showLabelForm && (
diff --git a/apps/web/core/components/license/index.ts b/apps/web/core/components/license/index.ts
index 031608e25..dd65a9ec3 100644
--- a/apps/web/core/components/license/index.ts
+++ b/apps/web/core/components/license/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./modal";
diff --git a/apps/web/core/components/license/modal/card/base-paid-plan-card.tsx b/apps/web/core/components/license/modal/card/base-paid-plan-card.tsx
index 94b6cbe3e..986a5542b 100644
--- a/apps/web/core/components/license/modal/card/base-paid-plan-card.tsx
+++ b/apps/web/core/components/license/modal/card/base-paid-plan-card.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useState } from "react";
 import { observer } from "mobx-react";
 import { CheckCircle } from "lucide-react";
@@ -6,7 +11,6 @@ import { Tab } from "@headlessui/react";
 // plane imports
 // helpers
 import type { EProductSubscriptionEnum, TBillingFrequency, TSubscriptionPrice } from "@plane/types";
-import { getSubscriptionBackgroundColor, getUpgradeCardVariantStyle } from "@plane/ui";
 import { cn, getBaseSubscriptionName, getSubscriptionName } from "@plane/utils";
 
 export type TBasePaidPlanCardProps = {
@@ -33,26 +37,23 @@ export const BasePaidPlanCard = observer(function BasePaidPlanCard(props: TBaseP
   // states
   const [selectedPlan, setSelectedPlan] = useState<TBillingFrequency>("month");
   const basePlan = getBaseSubscriptionName(planVariant);
-  const upgradeCardVariantStyle = getUpgradeCardVariantStyle(planVariant);
   // Plane details
   const planeName = getSubscriptionName(planVariant);
 
   return (
-    <div className={cn("flex flex-col py-6 px-3", upgradeCardVariantStyle)}>
+    <div className="flex flex-col rounded-xl border border-subtle bg-layer-2 px-3 py-6">
       <Tab.Group selectedIndex={selectedPlan === "month" ? 0 : 1}>
-        <div className="flex w-full justify-center h-9">
-          <Tab.List
-            className={cn("flex space-x-1 rounded-md p-0.5 w-60", getSubscriptionBackgroundColor(planVariant, "50"))}
-          >
+        <div className="flex h-9 w-full justify-center">
+          <Tab.List className="flex w-60 space-x-1 rounded-md bg-layer-3 p-0.5">
             {prices.map((price: TSubscriptionPrice) => (
               <Tab
                 key={price.key}
                 className={({ selected }) =>
                   cn(
-                    "w-full rounded py-1 text-sm font-medium leading-5",
+                    "w-full rounded-sm py-1 text-caption-md-medium leading-5",
                     selected
-                      ? "bg-custom-background-100 text-custom-text-100 shadow"
-                      : "text-custom-text-300 hover:text-custom-text-200"
+                      ? "border border-subtle-1 bg-layer-2 text-primary shadow-raised-100"
+                      : "text-tertiary hover:text-secondary"
                   )
                 }
                 onClick={() => setSelectedPlan(price.recurring)}
@@ -66,22 +67,22 @@ export const BasePaidPlanCard = observer(function BasePaidPlanCard(props: TBaseP
           {prices.map((price: TSubscriptionPrice) => (
             <Tab.Panel key={price.key}>
               <div className="pt-6 text-center">
-                <div className="text-xl font-medium">Plane {planeName}</div>
+                <div className="text-h4-medium">Plane {planeName}</div>
                 {renderActionButton(price)}
               </div>
               <div className="px-2 pt-6 pb-2">
-                <div className="p-2 text-sm font-semibold">{`Everything in ${basePlan} +`}</div>
+                <div className="p-2 text-caption-md-semibold">{`Everything in ${basePlan} +`}</div>
                 <ul className="grid grid-cols-12 gap-x-4">
                   {features.map((feature) => (
                     <li
                       key={feature}
-                      className={cn("col-span-12 relative rounded-md p-2 flex", {
+                      className={cn("relative col-span-12 flex rounded-md p-2", {
                         "sm:col-span-6": !verticalFeatureList,
                       })}
                     >
-                      <p className="w-full text-sm font-medium leading-5 flex items-center line-clamp-1">
-                        <CheckCircle className="h-4 w-4 mr-2 text-custom-text-300 flex-shrink-0" />
-                        <span className="text-custom-text-200 truncate">{feature}</span>
+                      <p className="line-clamp-1 flex w-full items-center text-caption-md-medium leading-5">
+                        <CheckCircle className="mr-2 size-4 flex-shrink-0 text-tertiary" />
+                        <span className="truncate text-secondary">{feature}</span>
                       </p>
                     </li>
                   ))}
diff --git a/apps/web/core/components/license/modal/card/checkout-button.tsx b/apps/web/core/components/license/modal/card/checkout-button.tsx
index 2d4b291fa..01de02caf 100644
--- a/apps/web/core/components/license/modal/card/checkout-button.tsx
+++ b/apps/web/core/components/license/modal/card/checkout-button.tsx
@@ -1,10 +1,14 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 // plane imports
-import { getButtonStyling } from "@plane/propel/button";
+import { Button } from "@plane/propel/button";
 import type { EProductSubscriptionEnum, IPaymentProduct, TSubscriptionPrice } from "@plane/types";
-import { getUpgradeButtonStyle, Loader } from "@plane/ui";
-import { cn } from "@plane/utils";
+import { Loader } from "@plane/ui";
 // local imports
 import { DiscountInfo } from "./discount-info";
 
@@ -42,44 +46,37 @@ export const PlanCheckoutButton = observer(function PlanCheckoutButton(props: Pr
     isSelfHosted,
     isTrialAllowed,
   } = props;
-  const upgradeButtonStyle =
-    getUpgradeButtonStyle(planVariant, !!upgradeLoaderType) ?? getButtonStyling("primary", "lg", !!upgradeLoaderType);
 
   return (
     <>
-      <div className="pb-4 text-center transition-all duration-700 animate-slide-up">
-        <div className="text-2xl font-semibold h-9 transition-all duration-300">
+      <div className="pb-4 text-center">
+        <div className="h-9 text-20 font-semibold">
           {isLoading ? (
             <Loader className="flex flex-col items-center justify-center">
               <Loader.Item height="36px" width="4rem" />
             </Loader>
           ) : (
-            <span className="animate-fade-in">
-              <DiscountInfo
-                currency={price.currency}
-                frequency={price.recurring}
-                price={price.price}
-                subscriptionType={planVariant}
-                className="mr-1.5"
-              />
-            </span>
+            <DiscountInfo
+              currency={price.currency}
+              frequency={price.recurring}
+              price={price.price}
+              subscriptionType={planVariant}
+              className="mr-1.5"
+            />
           )}
         </div>
-        <div className="text-sm font-medium text-custom-text-300 transition-all duration-300 animate-fade-in">
-          per user per month
-        </div>
+        <div className="text-caption-md-medium text-tertiary">per user per month</div>
       </div>
       {isLoading ? (
         <Loader className="flex flex-col items-center justify-center">
           <Loader.Item height="38px" width="14rem" />
         </Loader>
       ) : (
-        <div className="flex flex-col items-center justify-center w-full space-y-4 transition-all duration-300 animate-fade-in">
-          <button
-            className={cn(
-              upgradeButtonStyle,
-              "relative inline-flex items-center justify-center w-56 px-4 py-2 text-sm font-medium rounded-lg focus:outline-none"
-            )}
+        <div className="flex w-full flex-col items-center justify-center space-y-4">
+          <Button
+            variant="primary"
+            size="lg"
+            className="w-56"
             onClick={() => {
               if (product && price.id) {
                 handleCheckout({
@@ -92,9 +89,9 @@ export const PlanCheckoutButton = observer(function PlanCheckoutButton(props: Pr
             disabled={!!upgradeLoaderType}
           >
             {upgradeLoaderType === planVariant ? "Redirecting to Stripe" : (upgradeCTA ?? `Upgrade to ${planeName}`)}
-          </button>
+          </Button>
           {isTrialAllowed && !isSelfHosted && (
-            <div className="mt-4 h-4 transition-all duration-300 animate-fade-in">
+            <div className="mt-1 h-3">
               {renderTrialButton &&
                 renderTrialButton({
                   productId: product?.id,
diff --git a/apps/web/core/components/license/modal/card/discount-info.tsx b/apps/web/core/components/license/modal/card/discount-info.tsx
index a98935eb2..7f25a2a0e 100644
--- a/apps/web/core/components/license/modal/card/discount-info.tsx
+++ b/apps/web/core/components/license/modal/card/discount-info.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useTheme } from "next-themes";
 // plane imports
 import type { TBillingFrequency } from "@plane/types";
@@ -47,7 +53,7 @@ export function DiscountInfo({ className, currency, frequency, price, subscripti
           <img
             src={resolvedTheme === "dark" ? ScribbleWhite : ScribbleBlack}
             alt="scribble"
-            className="absolute top-1/2 left-1/2 -translate-y-1/2 -translate-x-1/2 w-full scale-x-125"
+            className="absolute top-1/2 left-1/2 w-full -translate-x-1/2 -translate-y-1/2 scale-x-125"
           />
           {currency}
           {actualPrice}
diff --git a/apps/web/core/components/license/modal/card/free-plan.tsx b/apps/web/core/components/license/modal/card/free-plan.tsx
index bd7b5a51c..f07ff519e 100644
--- a/apps/web/core/components/license/modal/card/free-plan.tsx
+++ b/apps/web/core/components/license/modal/card/free-plan.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import { CircleX } from "lucide-react";
 // plane constants
@@ -12,25 +18,25 @@ type FreePlanCardProps = {
 export const FreePlanCard = observer(function FreePlanCard(props: FreePlanCardProps) {
   const { isOnFreePlan } = props;
   return (
-    <div className="py-4 px-2 border border-custom-border-200 rounded-xl">
+    <div className="rounded-xl bg-layer-1 px-2 py-4">
       {isOnFreePlan && (
-        <div className="py-2 px-3">
-          <span className="px-2 py-1 bg-custom-background-90 text-sm text-custom-text-300 font-medium rounded">
+        <div className="px-3 py-2">
+          <span className="rounded-sm border border-subtle-1 bg-layer-2 px-2 py-1 text-caption-md-medium text-tertiary">
             Your plan
           </span>
         </div>
       )}
       <div className="px-4 py-2 font-semibold">
-        <div className="text-2xl">Free</div>
-        <div className="text-sm text-custom-text-300">$0 per user per month</div>
+        <div className="text-20">Free</div>
+        <div className="text-caption-md text-tertiary">$0 per user per month</div>
       </div>
       <div className="px-2 pt-2 pb-3">
-        <ul className="w-full grid grid-cols-12 gap-x-4">
+        <ul className="grid w-full grid-cols-12 gap-x-4">
           {FREE_PLAN_UPGRADE_FEATURES.map((feature) => (
-            <li key={feature} className={cn("col-span-12 relative rounded-md p-2 flex")}>
-              <p className="w-full text-sm font-medium leading-5 flex items-center">
-                <CircleX className="h-4 w-4 mr-2 text-red-500 flex-shrink-0" />
-                <span className="text-custom-text-200 truncate">{feature}</span>
+            <li key={feature} className={cn("relative col-span-12 flex rounded-md p-2")}>
+              <p className="flex w-full items-center text-caption-md-medium leading-5">
+                <CircleX className="mr-2 size-4 flex-shrink-0 text-danger-secondary" />
+                <span className="truncate text-secondary">{feature}</span>
               </p>
             </li>
           ))}
diff --git a/apps/web/core/components/license/modal/card/index.ts b/apps/web/core/components/license/modal/card/index.ts
index 0333c15db..3ce395388 100644
--- a/apps/web/core/components/license/modal/card/index.ts
+++ b/apps/web/core/components/license/modal/card/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./base-paid-plan-card";
 export * from "./free-plan";
 export * from "./talk-to-sales";
diff --git a/apps/web/core/components/license/modal/card/plan-upgrade.tsx b/apps/web/core/components/license/modal/card/plan-upgrade.tsx
index ffe880d28..e501b3b7f 100644
--- a/apps/web/core/components/license/modal/card/plan-upgrade.tsx
+++ b/apps/web/core/components/license/modal/card/plan-upgrade.tsx
@@ -1,10 +1,14 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 // plane imports
 import { TALK_TO_SALES_URL } from "@plane/constants";
 import type { EProductSubscriptionEnum, IPaymentProduct, TSubscriptionPrice } from "@plane/types";
-import { getDiscountPillStyle } from "@plane/ui";
-import { calculateYearlyDiscount, cn, getSubscriptionName, getSubscriptionPriceDetails } from "@plane/utils";
+import { calculateYearlyDiscount, getSubscriptionName, getSubscriptionPriceDetails } from "@plane/utils";
 // components
 import { BasePaidPlanCard, TalkToSalesCard } from "@/components/license";
 // local components
@@ -73,7 +77,7 @@ export const PlanUpgradeCard = observer(function PlanUpgradeCard(props: PlanUpgr
         <>
           Yearly
           {yearlyDiscount > 0 && (
-            <span className={cn(getDiscountPillStyle(planVariant), "rounded-full px-1.5 py-0.5 ml-1 text-xs")}>
+            <span className="text-caption-sm ml-1 rounded-full bg-accent-primary px-1.5 py-0.5 text-on-color">
               -{yearlyDiscount}%
             </span>
           )}
diff --git a/apps/web/core/components/license/modal/card/talk-to-sales.tsx b/apps/web/core/components/license/modal/card/talk-to-sales.tsx
index 04096d8e6..c12ee7042 100644
--- a/apps/web/core/components/license/modal/card/talk-to-sales.tsx
+++ b/apps/web/core/components/license/modal/card/talk-to-sales.tsx
@@ -1,10 +1,15 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 // types
 // plane imports
 import { getButtonStyling } from "@plane/propel/button";
 import type { EProductSubscriptionEnum, IPaymentProduct, TSubscriptionPrice } from "@plane/types";
-import { getUpgradeButtonStyle, Loader } from "@plane/ui";
+import { Loader } from "@plane/ui";
 import { cn } from "@plane/utils";
 // local imports
 import { BasePaidPlanCard } from "./base-paid-plan-card";
@@ -47,55 +52,42 @@ export const TalkToSalesCard = observer(function TalkToSalesCard(props: TalkToSa
     </>
   );
 
-  const renderActionButton = (price: TSubscriptionPrice) => {
-    const upgradeButtonStyle =
-      getUpgradeButtonStyle(planVariant, !!upgradeLoaderType) ?? getButtonStyling("primary", "lg", !!upgradeLoaderType);
-
-    return (
-      <>
-        <div className="pb-4 text-center">
-          <div className="text-2xl font-semibold h-9 flex justify-center items-center">
-            {isLoading ? (
-              <Loader className="flex flex-col items-center justify-center">
-                <Loader.Item height="36px" width="4rem" />
-              </Loader>
-            ) : (
-              <>Quote on request</>
-            )}
-          </div>
-          <div className="text-sm font-medium text-custom-text-300">per user per month</div>
+  const renderActionButton = (price: TSubscriptionPrice) => (
+    <>
+      <div className="pb-4 text-center">
+        <div className="flex h-9 items-center justify-center text-20 font-semibold">
+          {isLoading ? (
+            <Loader className="flex flex-col items-center justify-center">
+              <Loader.Item height="36px" width="4rem" />
+            </Loader>
+          ) : (
+            <>Quote on request</>
+          )}
         </div>
-        {isLoading ? (
-          <Loader className="flex flex-col items-center justify-center">
-            <Loader.Item height="38px" width="14rem" />
-          </Loader>
-        ) : (
-          <div className="flex flex-col items-center justify-center w-full">
-            <a
-              href={href}
-              target="_blank"
-              className={cn(
-                upgradeButtonStyle,
-                "relative inline-flex items-center justify-center w-56 px-4 py-2 text-sm font-medium rounded-lg focus:outline-none"
-              )}
-              rel="noreferrer"
-            >
-              Talk to Sales
-            </a>
-            {isTrialAllowed && !isSelfHosted && (
-              <div className="mt-4 h-4 transition-all duration-300 animate-fade-in">
-                {renderTrialButton &&
-                  renderTrialButton({
-                    productId: product?.id,
-                    priceId: price.id,
-                  })}
-              </div>
-            )}
-          </div>
-        )}
-      </>
-    );
-  };
+        <div className="text-caption-md-medium text-tertiary">per user per month</div>
+      </div>
+      {isLoading ? (
+        <Loader className="flex flex-col items-center justify-center">
+          <Loader.Item height="38px" width="14rem" />
+        </Loader>
+      ) : (
+        <div className="flex w-full flex-col items-center justify-center">
+          <a href={href} target="_blank" className={cn(getButtonStyling("primary", "lg"), "w-56")} rel="noreferrer">
+            Talk to Sales
+          </a>
+          {isTrialAllowed && !isSelfHosted && (
+            <div className="mt-4 h-4">
+              {renderTrialButton &&
+                renderTrialButton({
+                  productId: product?.id,
+                  priceId: price.id,
+                })}
+            </div>
+          )}
+        </div>
+      )}
+    </>
+  );
 
   return (
     <BasePaidPlanCard
diff --git a/apps/web/core/components/license/modal/index.ts b/apps/web/core/components/license/modal/index.ts
index 1d243e763..4260f8508 100644
--- a/apps/web/core/components/license/modal/index.ts
+++ b/apps/web/core/components/license/modal/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./card";
diff --git a/apps/web/core/components/modules/analytics-sidebar/index.ts b/apps/web/core/components/modules/analytics-sidebar/index.ts
index c509152a2..b329fd847 100644
--- a/apps/web/core/components/modules/analytics-sidebar/index.ts
+++ b/apps/web/core/components/modules/analytics-sidebar/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./root";
 export * from "./issue-progress";
 export * from "./progress-stats";
diff --git a/apps/web/core/components/modules/analytics-sidebar/issue-progress.tsx b/apps/web/core/components/modules/analytics-sidebar/issue-progress.tsx
index 344b26645..f703ddf58 100644
--- a/apps/web/core/components/modules/analytics-sidebar/issue-progress.tsx
+++ b/apps/web/core/components/modules/analytics-sidebar/issue-progress.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { Fragment, useMemo, useState } from "react";
 import { observer } from "mobx-react";
 import { useSearchParams } from "next/navigation";
@@ -106,7 +111,7 @@ export const ModuleAnalyticsProgress = observer(function ModuleAnalyticsProgress
         await fetchModuleDetails(workspaceSlug, projectId, moduleId);
       }
       setLoader(false);
-    } catch (error) {
+    } catch (_error) {
       setLoader(false);
       setPlotType(moduleId, plotType);
     }
@@ -114,17 +119,17 @@ export const ModuleAnalyticsProgress = observer(function ModuleAnalyticsProgress
 
   if (!moduleDetails) return <></>;
   return (
-    <div className="border-t border-custom-border-200 space-y-4 py-4 px-3">
+    <div className="space-y-4 border-t border-subtle px-3 py-4">
       <Disclosure defaultOpen={isModuleDateValid ? true : false}>
         {({ open }) => (
           <div className="space-y-6">
             {/* progress bar header */}
             {isModuleDateValid ? (
-              <div className="relative w-full flex justify-between items-center gap-2">
-                <Disclosure.Button className="relative flex items-center gap-2 w-full">
-                  <div className="font-medium text-custom-text-200 text-sm">{t("progress")}</div>
+              <div className="relative flex w-full items-center justify-between gap-2">
+                <Disclosure.Button className="relative flex w-full items-center gap-2">
+                  <div className="text-13 font-medium text-secondary">{t("progress")}</div>
                   {progressHeaderPercentage > 0 && (
-                    <div className="flex h-5 w-9 items-center justify-center rounded bg-amber-500/20 text-xs font-medium text-amber-500">{`${progressHeaderPercentage}%`}</div>
+                    <div className="bg-amber-500/20 text-amber-500 flex h-5 w-9 items-center justify-center rounded-sm text-11 font-medium">{`${progressHeaderPercentage}%`}</div>
                   )}
                 </Disclosure.Button>
                 {isCurrentEstimateTypeIsPoints && (
@@ -159,11 +164,11 @@ export const ModuleAnalyticsProgress = observer(function ModuleAnalyticsProgress
                 </Disclosure.Button>
               </div>
             ) : (
-              <div className="relative w-full flex justify-between items-center gap-2">
-                <div className="font-medium text-custom-text-200 text-sm">Progress</div>
+              <div className="relative flex w-full items-center justify-between gap-2">
+                <div className="text-13 font-medium text-secondary">Progress</div>
                 <div className="flex items-center gap-1">
-                  <AlertCircle height={14} width={14} className="text-custom-text-200" />
-                  <span className="text-xs italic text-custom-text-200">
+                  <AlertCircle height={14} width={14} className="text-secondary" />
+                  <span className="text-11 text-secondary italic">
                     {moduleDetails?.start_date && moduleDetails?.target_date
                       ? t("project_module.empty_state.sidebar.in_active")
                       : t("project_module.empty_state.sidebar.invalid_date")}
@@ -197,7 +202,7 @@ export const ModuleAnalyticsProgress = observer(function ModuleAnalyticsProgress
 
                 {/* progress detailed view */}
                 {chartDistributionData && (
-                  <div className="w-full border-t border-custom-border-200 pt-5">
+                  <div className="w-full border-t border-subtle pt-5">
                     <ModuleProgressStats
                       distribution={chartDistributionData}
                       groupedIssues={groupedIssues}
diff --git a/apps/web/core/components/modules/analytics-sidebar/progress-stats.tsx b/apps/web/core/components/modules/analytics-sidebar/progress-stats.tsx
index e6ed57639..f02308926 100644
--- a/apps/web/core/components/modules/analytics-sidebar/progress-stats.tsx
+++ b/apps/web/core/components/modules/analytics-sidebar/progress-stats.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import { Tab } from "@headlessui/react";
 import { useTranslation } from "@plane/i18n";
@@ -120,18 +125,18 @@ export const ModuleProgressStats = observer(function ModuleProgressStats(props:
           className={cn(
             `flex w-full items-center justify-between gap-2 rounded-md p-1`,
             roundedTab ? `rounded-3xl` : `rounded-md`,
-            noBackground ? `` : `bg-custom-background-90`,
-            size === "xs" ? `text-xs` : `text-sm`
+            noBackground ? `` : `bg-layer-2`,
+            size === "xs" ? `text-11` : `text-13`
           )}
         >
           {PROGRESS_STATS.map((stat) => (
             <Tab
               className={cn(
-                `p-1 w-full text-custom-text-100 outline-none focus:outline-none cursor-pointer transition-all`,
-                roundedTab ? `rounded-3xl border border-custom-border-200` : `rounded`,
+                `w-full cursor-pointer p-1 text-primary transition-all outline-none focus:outline-none`,
+                roundedTab ? `rounded-3xl border border-subtle` : `rounded-sm`,
                 stat.key === currentTab
-                  ? "bg-custom-background-100 text-custom-text-300"
-                  : "text-custom-text-400 hover:text-custom-text-300"
+                  ? "bg-layer-transparent-active text-secondary"
+                  : "text-placeholder hover:text-secondary"
               )}
               key={stat.key}
               onClick={() => setModuleTab(stat.key)}
@@ -140,7 +145,7 @@ export const ModuleProgressStats = observer(function ModuleProgressStats(props:
             </Tab>
           ))}
         </Tab.List>
-        <Tab.Panels className="py-3 text-custom-text-200">
+        <Tab.Panels className="py-3 text-secondary">
           <Tab.Panel key={"stat-assignees"}>
             <AssigneeStatComponent
               distribution={distributionAssigneeData}
diff --git a/apps/web/core/components/modules/analytics-sidebar/root.tsx b/apps/web/core/components/modules/analytics-sidebar/root.tsx
index 3e5acc5c5..d5844e6a0 100644
--- a/apps/web/core/components/modules/analytics-sidebar/root.tsx
+++ b/apps/web/core/components/modules/analytics-sidebar/root.tsx
@@ -1,20 +1,20 @@
-import React, { useEffect, useState } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useEffect, useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 import { Controller, useForm } from "react-hook-form";
-import { Info, Plus, SquareUser } from "lucide-react";
+import { Info, SquareUser } from "lucide-react";
 import { Disclosure, Transition } from "@headlessui/react";
-import {
-  MODULE_STATUS,
-  EUserPermissions,
-  EUserPermissionsLevel,
-  EEstimateSystem,
-  MODULE_TRACKER_EVENTS,
-  MODULE_TRACKER_ELEMENTS,
-} from "@plane/constants";
+import { MODULE_STATUS, EUserPermissions, EUserPermissionsLevel, EEstimateSystem } from "@plane/constants";
 // plane types
 import { useTranslation } from "@plane/i18n";
 import {
+  PlusIcon,
   MembersPropertyIcon,
   ModuleStatusIcon,
   WorkItemsIcon,
@@ -32,7 +32,6 @@ import { getDate, renderFormattedPayloadDate } from "@plane/utils";
 import { DateRangeDropdown } from "@/components/dropdowns/date-range";
 import { MemberDropdown } from "@/components/dropdowns/member/dropdown";
 import { CreateUpdateModuleLinkModal, ModuleAnalyticsProgress, ModuleLinksList } from "@/components/modules";
-import { captureElementAndEvent, captureSuccess, captureError } from "@/helpers/event-tracker.helper";
 // hooks
 import { useProjectEstimates } from "@/hooks/store/estimates";
 import { useModule } from "@/hooks/store/use-module";
@@ -78,98 +77,39 @@ export const ModuleAnalyticsSidebar = observer(function ModuleAnalyticsSidebar(p
     defaultValues,
   });
 
-  const submitChanges = (data: Partial<IModule>) => {
+  const submitChanges = async (data: Partial<IModule>) => {
     if (!workspaceSlug || !projectId || !moduleId) return;
-    updateModuleDetails(workspaceSlug.toString(), projectId.toString(), moduleId.toString(), data)
-      .then((res) => {
-        captureElementAndEvent({
-          element: {
-            elementName: MODULE_TRACKER_ELEMENTS.RIGHT_SIDEBAR,
-          },
-          event: {
-            eventName: MODULE_TRACKER_EVENTS.update,
-            payload: { id: res.id },
-            state: "SUCCESS",
-          },
-        });
-      })
-      .catch((error) => {
-        captureError({
-          eventName: MODULE_TRACKER_EVENTS.update,
-          payload: { id: moduleId },
-          error,
-        });
-      });
+    await updateModuleDetails(workspaceSlug.toString(), projectId.toString(), moduleId.toString(), data);
   };
 
   const handleCreateLink = async (formData: ModuleLink) => {
     if (!workspaceSlug || !projectId || !moduleId) return;
-
     const payload = { metadata: {}, ...formData };
-
-    await createModuleLink(workspaceSlug.toString(), projectId.toString(), moduleId.toString(), payload)
-      .then(() =>
-        captureSuccess({
-          eventName: MODULE_TRACKER_EVENTS.link.create,
-          payload: { id: moduleId },
-        })
-      )
-      .catch((error) => {
-        captureError({
-          eventName: MODULE_TRACKER_EVENTS.link.create,
-          payload: { id: moduleId },
-          error,
-        });
-      });
+    await createModuleLink(workspaceSlug.toString(), projectId.toString(), moduleId.toString(), payload);
   };
 
   const handleUpdateLink = async (formData: ModuleLink, linkId: string) => {
     if (!workspaceSlug || !projectId) return;
-
     const payload = { metadata: {}, ...formData };
-
-    await updateModuleLink(workspaceSlug.toString(), projectId.toString(), moduleId.toString(), linkId, payload)
-      .then(() =>
-        captureSuccess({
-          eventName: MODULE_TRACKER_EVENTS.link.update,
-          payload: { id: moduleId },
-        })
-      )
-      .catch((error) => {
-        captureError({
-          eventName: MODULE_TRACKER_EVENTS.link.update,
-          payload: { id: moduleId },
-          error,
-        });
-      });
+    await updateModuleLink(workspaceSlug.toString(), projectId.toString(), moduleId.toString(), linkId, payload);
   };
 
   const handleDeleteLink = async (linkId: string) => {
     if (!workspaceSlug || !projectId) return;
-
-    deleteModuleLink(workspaceSlug.toString(), projectId.toString(), moduleId.toString(), linkId)
-      .then(() => {
-        captureSuccess({
-          eventName: MODULE_TRACKER_EVENTS.link.delete,
-          payload: { id: moduleId },
-        });
-        setToast({
-          type: TOAST_TYPE.SUCCESS,
-          title: "Success!",
-          message: "Module link deleted successfully.",
-        });
-      })
-      .catch(() => {
-        setToast({
-          type: TOAST_TYPE.ERROR,
-          title: "Error!",
-          message: "Some error occurred",
-        });
-        captureError({
-          eventName: MODULE_TRACKER_EVENTS.link.delete,
-          payload: { id: moduleId },
-        });
+    try {
+      await deleteModuleLink(workspaceSlug.toString(), projectId.toString(), moduleId.toString(), linkId);
+      setToast({
+        type: TOAST_TYPE.SUCCESS,
+        title: "Success!",
+        message: "Module link deleted successfully.",
       });
+    } catch (_error) {
+      setToast({
+        type: TOAST_TYPE.ERROR,
+        title: "Error!",
+        message: "Some error occurred",
+      });
+    }
   };
 
   const handleDateChange = async (startDate: Date | undefined, targetDate: Date | undefined) => {
@@ -243,15 +183,13 @@ export const ModuleAnalyticsSidebar = observer(function ModuleAnalyticsSidebar(p
         updateLink={handleUpdateLink}
       />
       <>
-        <div
-          className={`sticky z-10 top-0 flex items-center justify-between bg-custom-sidebar-background-100 pb-5 pt-5`}
-        >
+        <div className={`sticky top-0 z-10 flex items-center justify-between bg-surface-1 pt-5 pb-5`}>
           <div>
             <button
-              className="flex h-5 w-5 items-center justify-center rounded-full bg-custom-border-300"
+              className="flex h-5 w-5 items-center justify-center rounded-full bg-layer-3"
               onClick={() => handleClose()}
             >
-              <ChevronRightIcon className="h-3 w-3 stroke-2 text-white" />
+              <ChevronRightIcon className="h-3 w-3 stroke-2 text-on-color" />
             </button>
           </div>
         </div>
@@ -265,7 +203,7 @@ export const ModuleAnalyticsSidebar = observer(function ModuleAnalyticsSidebar(p
                 <CustomSelect
                   customButton={
                     <span
-                      className={`flex h-6 w-20 items-center justify-center rounded-sm text-center text-xs ${
+                      className={`flex h-6 w-20 items-center justify-center rounded-xs text-center text-11 ${
                         isEditingAllowed && !isArchived ? "cursor-pointer" : "cursor-not-allowed"
                       }`}
                       style={{
@@ -294,22 +232,22 @@ export const ModuleAnalyticsSidebar = observer(function ModuleAnalyticsSidebar(p
               )}
             />
           </div>
-          <h4 className="w-full break-words text-xl font-semibold text-custom-text-100">{moduleDetails.name}</h4>
+          <h4 className="w-full text-18 font-semibold break-words text-primary">{moduleDetails.name}</h4>
         </div>
 
         {moduleDetails.description && (
           <TextArea
-            className="outline-none ring-none w-full max-h-max bg-transparent !p-0 !m-0 !border-0 resize-none text-sm leading-5 text-custom-text-200"
+            className="ring-none !m-0 max-h-max w-full resize-none !border-0 bg-transparent !p-0 text-13 leading-5 text-secondary outline-none"
             value={moduleDetails.description}
             disabled
           />
         )}
 
-        <div className="flex flex-col gap-5 pb-6 pt-2.5">
+        <div className="flex flex-col gap-5 pt-2.5 pb-6">
           <div className="flex items-center justify-start gap-1">
-            <div className="flex w-2/5 items-center justify-start gap-2 text-custom-text-300">
+            <div className="flex w-2/5 items-center justify-start gap-2 text-tertiary">
               <StartDatePropertyIcon className="h-4 w-4" />
-              <span className="text-base">{t("date_range")}</span>
+              <span className="text-14">{t("date_range")}</span>
             </div>
             <div className="h-7">
               <Controller
@@ -349,9 +287,9 @@ export const ModuleAnalyticsSidebar = observer(function ModuleAnalyticsSidebar(p
             </div>
           </div>
           <div className="flex items-center justify-start gap-1">
-            <div className="flex w-2/5 items-center justify-start gap-2 text-custom-text-300">
+            <div className="flex w-2/5 items-center justify-start gap-2 text-tertiary">
               <SquareUser className="h-4 w-4" />
-              <span className="text-base">{t("lead")}</span>
+              <span className="text-14">{t("lead")}</span>
             </div>
             <Controller
               control={control}
@@ -375,9 +313,9 @@ export const ModuleAnalyticsSidebar = observer(function ModuleAnalyticsSidebar(p
             />
           </div>
           <div className="flex items-center justify-start gap-1">
-            <div className="flex w-2/5 items-center justify-start gap-2 text-custom-text-300">
+            <div className="flex w-2/5 items-center justify-start gap-2 text-tertiary">
               <MembersPropertyIcon className="h-4 w-4" />
-              <span className="text-base">{t("members")}</span>
+              <span className="text-14">{t("members")}</span>
             </div>
             <Controller
               control={control}
@@ -400,12 +338,12 @@ export const ModuleAnalyticsSidebar = observer(function ModuleAnalyticsSidebar(p
             />
           </div>
           <div className="flex items-center justify-start gap-1">
-            <div className="flex w-2/5 items-center justify-start gap-2 text-custom-text-300">
+            <div className="flex w-2/5 items-center justify-start gap-2 text-tertiary">
               <WorkItemsIcon className="h-4 w-4" />
-              <span className="text-base">{t("issues")}</span>
+              <span className="text-14">{t("issues")}</span>
             </div>
             <div className="flex h-7 w-3/5 items-center">
-              <span className="px-1.5 text-sm text-custom-text-300">{issueCount}</span>
+              <span className="px-1.5 text-13 text-tertiary">{issueCount}</span>
             </div>
           </div>
 
@@ -414,12 +352,12 @@ export const ModuleAnalyticsSidebar = observer(function ModuleAnalyticsSidebar(p
            */}
           {isEstimatePointValid && (
             <div className="flex items-center justify-start gap-1">
-              <div className="flex w-2/5 items-center justify-start gap-2 text-custom-text-300">
+              <div className="flex w-2/5 items-center justify-start gap-2 text-tertiary">
                 <WorkItemsIcon className="h-4 w-4" />
-                <span className="text-base">{t("points")}</span>
+                <span className="text-14">{t("points")}</span>
               </div>
               <div className="flex h-7 w-3/5 items-center">
-                <span className="px-1.5 text-sm text-custom-text-300">{issueEstimatePointCount}</span>
+                <span className="px-1.5 text-13 text-tertiary">{issueEstimatePointCount}</span>
               </div>
             </div>
           )}
@@ -434,16 +372,15 @@ export const ModuleAnalyticsSidebar = observer(function ModuleAnalyticsSidebar(p
         )}
 
         <div className="flex flex-col">
-          <div className="flex w-full flex-col items-center justify-start gap-2 border-t border-custom-border-200 px-1.5 py-5">
+          <div className="flex w-full flex-col items-center justify-start gap-2 border-t border-subtle px-1.5 py-5">
             {/* Accessing link outside the disclosure as mobx is not  considering the children inside Disclosure as part of the component hence not observing their state change*/}
             <Disclosure defaultOpen={!!moduleDetails?.link_module?.length}>
               {({ open }) => (
-                <div className={`relative  flex  h-full w-full flex-col ${open ? "" : "flex-row"}`}>
+                <div className={`relative flex h-full w-full flex-col ${open ? "" : "flex-row"}`}>
                   <Disclosure.Button className="flex w-full items-center justify-between gap-2 p-1.5">
-                    <div className="flex items-center justify-start gap-2 text-sm">
-                      <span className="font-medium text-custom-text-200">{t("common.links")}</span>
+                    <div className="flex items-center justify-start gap-2 text-13">
+                      <span className="font-medium text-secondary">{t("common.links")}</span>
                     </div>
-
                     <div className="flex items-center gap-2.5">
                       <ChevronDownIcon
                         className={`h-3.5 w-3.5 ${open ? "rotate-180 transform" : ""}`}
@@ -459,10 +396,10 @@ export const ModuleAnalyticsSidebar = observer(function ModuleAnalyticsSidebar(p
                             {isEditingAllowed && !isArchived && (
                               <div className="flex w-full items-center justify-end">
                                 <button
-                                  className="flex items-center gap-1.5 text-sm font-medium text-custom-primary-100"
+                                  className="flex items-center gap-1.5 text-13 font-medium text-accent-primary"
                                   onClick={() => setModuleLinkModal(true)}
                                 >
-                                  <Plus className="h-3 w-3" />
+                                  <PlusIcon className="h-3 w-3" />
                                   {t("add_link")}
                                 </button>
                               </div>
@@ -480,17 +417,15 @@ export const ModuleAnalyticsSidebar = observer(function ModuleAnalyticsSidebar(p
                         ) : (
                           <div className="flex items-center justify-between gap-2">
                             <div className="flex items-center gap-2">
-                              <Info className="h-3.5 w-3.5 stroke-[1.5] text-custom-text-300" />
-                              <span className="p-0.5 text-xs text-custom-text-300">
-                                {t("common.no_links_added_yet")}
-                              </span>
+                              <Info className="h-3.5 w-3.5 stroke-[1.5] text-tertiary" />
+                              <span className="p-0.5 text-11 text-tertiary">{t("common.no_links_added_yet")}</span>
                             </div>
                             {isEditingAllowed && !isArchived && (
                               <button
-                                className="flex items-center gap-1.5 text-sm font-medium text-custom-primary-100"
+                                className="flex items-center gap-1.5 text-13 font-medium text-accent-primary"
                                 onClick={() => setModuleLinkModal(true)}
                               >
-                                <Plus className="h-3 w-3" />
+                                <PlusIcon className="h-3 w-3" />
                                 {t("add_link")}
                               </button>
                             )}
diff --git a/apps/web/core/components/modules/applied-filters/date.tsx b/apps/web/core/components/modules/applied-filters/date.tsx
index e134a2cc8..1169f2aea 100644
--- a/apps/web/core/components/modules/applied-filters/date.tsx
+++ b/apps/web/core/components/modules/applied-filters/date.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 // icons
 import { DATE_AFTER_FILTER_OPTIONS } from "@plane/constants";
@@ -37,12 +43,12 @@ export const AppliedDateFilters = observer(function AppliedDateFilters(props: Pr
   return (
     <>
       {values.map((date) => (
-        <div key={date} className="flex items-center gap-1 rounded bg-custom-background-80 p-1 text-xs">
+        <div key={date} className="flex items-center gap-1 rounded-sm bg-layer-1 p-1 text-11">
           <span className="normal-case">{getDateLabel(date)}</span>
           {editable && (
             <button
               type="button"
-              className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
+              className="grid place-items-center text-tertiary hover:text-secondary"
               onClick={() => handleRemove(date)}
             >
               <CloseIcon height={10} width={10} strokeWidth={2} />
diff --git a/apps/web/core/components/modules/applied-filters/index.ts b/apps/web/core/components/modules/applied-filters/index.ts
index cf34b6e69..4631563d9 100644
--- a/apps/web/core/components/modules/applied-filters/index.ts
+++ b/apps/web/core/components/modules/applied-filters/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./date";
 export * from "./members";
 export * from "./root";
diff --git a/apps/web/core/components/modules/applied-filters/members.tsx b/apps/web/core/components/modules/applied-filters/members.tsx
index 8be62e19e..e280b1c20 100644
--- a/apps/web/core/components/modules/applied-filters/members.tsx
+++ b/apps/web/core/components/modules/applied-filters/members.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import { CloseIcon } from "@plane/propel/icons";
 // plane ui
@@ -28,7 +34,7 @@ export const AppliedMembersFilters = observer(function AppliedMembersFilters(pro
         if (!memberDetails) return null;
 
         return (
-          <div key={memberId} className="flex items-center gap-1 rounded bg-custom-background-80 p-1 text-xs">
+          <div key={memberId} className="flex items-center gap-1 rounded-sm bg-layer-1 p-1 text-11">
             <Avatar
               name={memberDetails.display_name}
               src={getFileURL(memberDetails.avatar_url)}
@@ -39,7 +45,7 @@ export const AppliedMembersFilters = observer(function AppliedMembersFilters(pro
             {editable && (
               <button
                 type="button"
-                className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
+                className="grid place-items-center text-tertiary hover:text-secondary"
                 onClick={() => handleRemove(memberId)}
               >
                 <CloseIcon height={10} width={10} strokeWidth={2} />
diff --git a/apps/web/core/components/modules/applied-filters/root.tsx b/apps/web/core/components/modules/applied-filters/root.tsx
index 2996e2bcb..510e5afe6 100644
--- a/apps/web/core/components/modules/applied-filters/root.tsx
+++ b/apps/web/core/components/modules/applied-filters/root.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useTranslation } from "@plane/i18n";
 import { CloseIcon } from "@plane/propel/icons";
 import type { TModuleDisplayFilters, TModuleFilters } from "@plane/types";
@@ -40,7 +46,7 @@ export function ModuleAppliedFiltersList(props: Props) {
 
   return (
     <Header variant={EHeaderVariant.TERNARY}>
-      <div className="flex gap-2 flex-wrap">
+      <div className="flex flex-wrap gap-2">
         {Object.entries(appliedFilters).map(([key, value]) => {
           const filterKey = key as keyof TModuleFilters;
 
@@ -50,7 +56,7 @@ export function ModuleAppliedFiltersList(props: Props) {
           return (
             <Tag key={filterKey}>
               <div className="flex flex-wrap items-center gap-1.5">
-                <span className="text-xs text-custom-text-300">{replaceUnderscoreIfSnakeCase(filterKey)}</span>
+                <span className="text-11 text-tertiary">{replaceUnderscoreIfSnakeCase(filterKey)}</span>
                 {filterKey === "status" && (
                   <AppliedStatusFilters
                     editable={isEditingAllowed}
@@ -75,7 +81,7 @@ export function ModuleAppliedFiltersList(props: Props) {
                 {isEditingAllowed && (
                   <button
                     type="button"
-                    className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
+                    className="grid place-items-center text-tertiary hover:text-secondary"
                     onClick={() => handleRemoveFilter(filterKey, null)}
                   >
                     <CloseIcon height={12} width={12} strokeWidth={2} />
@@ -88,16 +94,16 @@ export function ModuleAppliedFiltersList(props: Props) {
         {!isArchived && isFavoriteFilterApplied && (
           <div
             key="module_display_filters"
-            className="flex flex-wrap items-center gap-2 rounded-md border border-custom-border-200 px-2 py-1 capitalize"
+            className="flex flex-wrap items-center gap-2 rounded-md border border-subtle px-2 py-1 capitalize"
           >
             <div className="flex flex-wrap items-center gap-1.5">
-              <span className="text-xs text-custom-text-300">Modules</span>
-              <div className="flex items-center gap-1 rounded p-1 text-xs bg-custom-background-80">
+              <span className="text-11 text-tertiary">Modules</span>
+              <div className="flex items-center gap-1 rounded-sm bg-layer-1 p-1 text-11">
                 Favorite
                 {isEditingAllowed && (
                   <button
                     type="button"
-                    className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
+                    className="grid place-items-center text-tertiary hover:text-secondary"
                     onClick={() =>
                       handleDisplayFiltersUpdate &&
                       handleDisplayFiltersUpdate({
diff --git a/apps/web/core/components/modules/applied-filters/status.tsx b/apps/web/core/components/modules/applied-filters/status.tsx
index 18b9c6b99..582119fcc 100644
--- a/apps/web/core/components/modules/applied-filters/status.tsx
+++ b/apps/web/core/components/modules/applied-filters/status.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 // ui
 import { MODULE_STATUS } from "@plane/constants";
@@ -22,13 +28,13 @@ export const AppliedStatusFilters = observer(function AppliedStatusFilters(props
         if (!statusDetails) return null;
 
         return (
-          <div key={status} className="flex items-center gap-1 rounded bg-custom-background-80 p-1 text-xs">
+          <div key={status} className="flex items-center gap-1 rounded-sm bg-layer-1 p-1 text-11">
             <ModuleStatusIcon status={statusDetails.value} height="12px" width="12px" />
             {t(statusDetails.i18n_label)}
             {editable && (
               <button
                 type="button"
-                className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
+                className="grid place-items-center text-tertiary hover:text-secondary"
                 onClick={() => handleRemove(status)}
               >
                 <CloseIcon height={10} width={10} strokeWidth={2} />
diff --git a/apps/web/core/components/modules/archived-modules/header.tsx b/apps/web/core/components/modules/archived-modules/header.tsx
index c69a3f37c..a15c431df 100644
--- a/apps/web/core/components/modules/archived-modules/header.tsx
+++ b/apps/web/core/components/modules/archived-modules/header.tsx
@@ -1,11 +1,16 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useCallback, useRef, useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // icons
-import { ListFilter, Search } from "lucide-react";
+import { ListFilter } from "lucide-react";
 import { useOutsideClickDetector } from "@plane/hooks";
-import { CloseIcon } from "@plane/propel/icons";
+import { SearchIcon, CloseIcon } from "@plane/propel/icons";
 // plane helpers
 // types
 import type { TModuleFilters } from "@plane/types";
@@ -76,36 +81,36 @@ export const ArchivedModulesHeader = observer(function ArchivedModulesHeader() {
   const isFiltersApplied = calculateTotalFilters(currentProjectArchivedFilters ?? {}) !== 0;
 
   return (
-    <div className="group relative flex border-b border-custom-border-200">
-      <div className="flex w-full items-center overflow-x-auto px-4 gap-2 horizontal-scrollbar scrollbar-sm">
+    <div className="group relative flex border-b border-subtle">
+      <div className="horizontal-scrollbar flex scrollbar-sm w-full items-center gap-2 overflow-x-auto px-4">
         <ArchiveTabsList />
       </div>
       {/* filter options */}
-      <div className="h-full flex items-center gap-3 self-end px-8">
+      <div className="flex h-full items-center gap-3 self-end px-8">
         {!isSearchOpen && (
           <button
             type="button"
-            className="-mr-5 p-2 hover:bg-custom-background-80 rounded text-custom-text-400 grid place-items-center"
+            className="-mr-5 grid place-items-center rounded-sm p-2 text-placeholder hover:bg-layer-1"
             onClick={() => {
               setIsSearchOpen(true);
               inputRef.current?.focus();
             }}
           >
-            <Search className="h-3.5 w-3.5" />
+            <SearchIcon className="h-3.5 w-3.5" />
           </button>
         )}
         <div
           className={cn(
-            "ml-auto flex items-center justify-start gap-1 rounded-md border border-transparent bg-custom-background-100 text-custom-text-400 w-0 transition-[width] ease-linear overflow-hidden opacity-0",
+            "ml-auto flex w-0 items-center justify-start gap-1 overflow-hidden rounded-md border border-transparent bg-surface-1 text-placeholder opacity-0 transition-[width] ease-linear",
             {
-              "w-64 px-2.5 py-1.5 border-custom-border-200 opacity-100": isSearchOpen,
+              "w-64 border-subtle px-2.5 py-1.5 opacity-100": isSearchOpen,
             }
           )}
         >
-          <Search className="h-3.5 w-3.5" />
+          <SearchIcon className="h-3.5 w-3.5" />
           <input
             ref={inputRef}
-            className="w-full max-w-[234px] border-none bg-transparent text-sm text-custom-text-100 placeholder:text-custom-text-400 focus:outline-none"
+            className="w-full max-w-[234px] border-none bg-transparent text-13 text-primary placeholder:text-placeholder focus:outline-none"
             placeholder="Search"
             value={archivedModulesSearchQuery}
             onChange={(e) => updateArchivedModulesSearchQuery(e.target.value)}
diff --git a/apps/web/core/components/modules/archived-modules/index.ts b/apps/web/core/components/modules/archived-modules/index.ts
index f59f0954e..d6b767c61 100644
--- a/apps/web/core/components/modules/archived-modules/index.ts
+++ b/apps/web/core/components/modules/archived-modules/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./root";
 export * from "./view";
 export * from "./header";
diff --git a/apps/web/core/components/modules/archived-modules/modal.tsx b/apps/web/core/components/modules/archived-modules/modal.tsx
index eef14a55e..58067d62c 100644
--- a/apps/web/core/components/modules/archived-modules/modal.tsx
+++ b/apps/web/core/components/modules/archived-modules/modal.tsx
@@ -1,8 +1,14 @@
-import { useState, Fragment } from "react";
-import { Dialog, Transition } from "@headlessui/react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
 // ui
 import { Button } from "@plane/propel/button";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
 // hooks
 import { useModule } from "@/hooks/store/use-module";
 import { useAppRouter } from "@/hooks/use-app-router";
@@ -43,6 +49,7 @@ export function ArchiveModuleModal(props: Props) {
         });
         onClose();
         router.push(`/${workspaceSlug}/projects/${projectId}/modules`);
+        return;
       })
       .catch(() =>
         setToast({
@@ -55,51 +62,21 @@ export function ArchiveModuleModal(props: Props) {
   };
 
   return (
-    <Transition.Root show={isOpen} as={Fragment}>
-      <Dialog as="div" className="relative z-20" onClose={onClose}>
-        <Transition.Child
-          as={Fragment}
-          enter="ease-out duration-300"
-          enterFrom="opacity-0"
-          enterTo="opacity-100"
-          leave="ease-in duration-200"
-          leaveFrom="opacity-100"
-          leaveTo="opacity-0"
-        >
-          <div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
-        </Transition.Child>
-
-        <div className="fixed inset-0 z-10 overflow-y-auto">
-          <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
-            <Transition.Child
-              as={Fragment}
-              enter="ease-out duration-300"
-              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-              enterTo="opacity-100 translate-y-0 sm:scale-100"
-              leave="ease-in duration-200"
-              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-            >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-custom-background-100 text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-full sm:max-w-lg">
-                <div className="px-5 py-4">
-                  <h3 className="text-xl font-medium 2xl:text-2xl">Archive module {moduleName}</h3>
-                  <p className="mt-3 text-sm text-custom-text-200">
-                    Are you sure you want to archive the module? All your archives can be restored later.
-                  </p>
-                  <div className="mt-3 flex justify-end gap-2">
-                    <Button variant="neutral-primary" size="sm" onClick={onClose}>
-                      Cancel
-                    </Button>
-                    <Button size="sm" tabIndex={1} onClick={handleArchiveModule} loading={isArchiving}>
-                      {isArchiving ? "Archiving" : "Archive"}
-                    </Button>
-                  </div>
-                </div>
-              </Dialog.Panel>
-            </Transition.Child>
-          </div>
+    <ModalCore isOpen={isOpen} handleClose={onClose} position={EModalPosition.CENTER} width={EModalWidth.LG}>
+      <div className="px-5 py-4">
+        <h3 className="text-18 font-medium 2xl:text-20">Archive module {moduleName}</h3>
+        <p className="mt-3 text-13 text-secondary">
+          Are you sure you want to archive the module? All your archives can be restored later.
+        </p>
+        <div className="mt-3 flex justify-end gap-2">
+          <Button variant="secondary" size="lg" onClick={onClose}>
+            Cancel
+          </Button>
+          <Button variant="primary" size="lg" tabIndex={1} onClick={handleArchiveModule} loading={isArchiving}>
+            {isArchiving ? "Archiving" : "Archive"}
+          </Button>
         </div>
-      </Dialog>
-    </Transition.Root>
+      </div>
+    </ModalCore>
   );
 }
diff --git a/apps/web/core/components/modules/archived-modules/root.tsx b/apps/web/core/components/modules/archived-modules/root.tsx
index 7b6a054ca..716ccbcdf 100644
--- a/apps/web/core/components/modules/archived-modules/root.tsx
+++ b/apps/web/core/components/modules/archived-modules/root.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React, { useCallback } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
@@ -58,7 +64,7 @@ export const ArchivedModuleLayoutRoot = observer(function ArchivedModuleLayoutRo
   return (
     <>
       {calculateTotalFilters(currentProjectArchivedFilters ?? {}) !== 0 && (
-        <div className="border-b border-custom-border-200 px-5 py-3">
+        <div className="border-b border-subtle px-5 py-3">
           <ModuleAppliedFiltersList
             appliedFilters={currentProjectArchivedFilters ?? {}}
             handleClearAllFilters={() => clearAllFilters(projectId.toString(), "archived")}
diff --git a/apps/web/core/components/modules/archived-modules/view.tsx b/apps/web/core/components/modules/archived-modules/view.tsx
index c2debe3d9..f7a07b468 100644
--- a/apps/web/core/components/modules/archived-modules/view.tsx
+++ b/apps/web/core/components/modules/archived-modules/view.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 // assets
 import AllFiltersImage from "@/app/assets/empty-state/module/all-filters.svg?url";
@@ -28,15 +33,15 @@ export const ArchivedModulesView = observer(function ArchivedModulesView(props:
 
   if (filteredArchivedModuleIds.length === 0)
     return (
-      <div className="h-full w-full grid place-items-center">
+      <div className="grid h-full w-full place-items-center">
         <div className="text-center">
           <img
             src={archivedModulesSearchQuery.trim() === "" ? AllFiltersImage : NameFilterImage}
-            className="h-36 sm:h-48 w-36 sm:w-48 mx-auto"
+            className="mx-auto h-36 w-36 sm:h-48 sm:w-48"
             alt="No matching modules"
           />
-          <h5 className="text-xl font-medium mt-7 mb-1">No matching modules</h5>
-          <p className="text-custom-text-400 text-base">
+          <h5 className="mt-7 mb-1 text-18 font-medium">No matching modules</h5>
+          <p className="text-14 text-placeholder">
             {archivedModulesSearchQuery.trim() === ""
               ? "Remove the filters to see all modules"
               : "Remove the search criteria to see all modules"}
@@ -48,7 +53,7 @@ export const ArchivedModulesView = observer(function ArchivedModulesView(props:
   return (
     <div className="h-full overflow-y-auto">
       <div className="flex h-full w-full justify-between">
-        <div className="flex h-full w-full flex-col overflow-y-auto vertical-scrollbar scrollbar-lg">
+        <div className="vertical-scrollbar flex scrollbar-lg h-full w-full flex-col overflow-y-auto">
           {filteredArchivedModuleIds.map((moduleId) => (
             <ModuleListItem key={moduleId} moduleId={moduleId} />
           ))}
diff --git a/apps/web/core/components/modules/delete-module-modal.tsx b/apps/web/core/components/modules/delete-module-modal.tsx
index 5d5fcbd51..f3bfe380c 100644
--- a/apps/web/core/components/modules/delete-module-modal.tsx
+++ b/apps/web/core/components/modules/delete-module-modal.tsx
@@ -1,16 +1,20 @@
-import React, { useState } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // types
-import { MODULE_TRACKER_EVENTS, PROJECT_ERROR_MESSAGES } from "@plane/constants";
+import { PROJECT_ERROR_MESSAGES } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { IModule } from "@plane/types";
 // ui
 import { AlertModalCore } from "@plane/ui";
 // constants
-// helpers
-import { captureSuccess, captureError } from "@/helpers/event-tracker.helper";
 // hooks
 import { useModule } from "@/hooks/store/use-module";
 import { useAppRouter } from "@/hooks/use-app-router";
@@ -51,10 +55,6 @@ export const DeleteModuleModal = observer(function DeleteModuleModal(props: Prop
           title: "Success!",
           message: "Module deleted successfully.",
         });
-        captureSuccess({
-          eventName: MODULE_TRACKER_EVENTS.delete,
-          payload: { id: data.id },
-        });
       })
       .catch((errors) => {
         const isPermissionError = errors?.error === "You don't have the required permissions.";
@@ -66,11 +66,6 @@ export const DeleteModuleModal = observer(function DeleteModuleModal(props: Prop
           type: TOAST_TYPE.ERROR,
           message: currentError.i18n_message && t(currentError.i18n_message),
         });
-        captureError({
-          eventName: MODULE_TRACKER_EVENTS.delete,
-          payload: { id: data.id },
-          error: errors,
-        });
       })
       .finally(() => handleClose());
   };
@@ -85,8 +80,8 @@ export const DeleteModuleModal = observer(function DeleteModuleModal(props: Prop
       content={
         <>
           Are you sure you want to delete module-{" "}
-          <span className="break-all font-medium text-custom-text-100">{data?.name}</span>? All of the data related to
-          the module will be permanently removed. This action cannot be undone.
+          <span className="font-medium break-all text-primary">{data?.name}</span>? All of the data related to the
+          module will be permanently removed. This action cannot be undone.
         </>
       }
     />
diff --git a/apps/web/core/components/modules/dropdowns/filters/index.ts b/apps/web/core/components/modules/dropdowns/filters/index.ts
index 786fc5cec..8280ae9c6 100644
--- a/apps/web/core/components/modules/dropdowns/filters/index.ts
+++ b/apps/web/core/components/modules/dropdowns/filters/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./lead";
 export * from "./members";
 export * from "./root";
diff --git a/apps/web/core/components/modules/dropdowns/filters/lead.tsx b/apps/web/core/components/modules/dropdowns/filters/lead.tsx
index 1c30fc548..286759dd2 100644
--- a/apps/web/core/components/modules/dropdowns/filters/lead.tsx
+++ b/apps/web/core/components/modules/dropdowns/filters/lead.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useMemo, useState } from "react";
 import { sortBy } from "lodash-es";
 import { observer } from "mobx-react";
@@ -85,7 +91,7 @@ export const FilterLead = observer(function FilterLead(props: Props) {
                 {sortedOptions.length > 5 && (
                   <button
                     type="button"
-                    className="ml-8 text-xs font-medium text-custom-primary-100"
+                    className="ml-8 text-11 font-medium text-accent-primary"
                     onClick={handleViewToggle}
                   >
                     {itemsToRender === sortedOptions.length ? "View less" : "View all"}
@@ -93,7 +99,7 @@ export const FilterLead = observer(function FilterLead(props: Props) {
                 )}
               </>
             ) : (
-              <p className="text-xs italic text-custom-text-400">No matches found</p>
+              <p className="text-11 text-placeholder italic">No matches found</p>
             )
           ) : (
             <Loader className="space-y-2">
diff --git a/apps/web/core/components/modules/dropdowns/filters/members.tsx b/apps/web/core/components/modules/dropdowns/filters/members.tsx
index a2e401b76..1e94ac62c 100644
--- a/apps/web/core/components/modules/dropdowns/filters/members.tsx
+++ b/apps/web/core/components/modules/dropdowns/filters/members.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useMemo, useState } from "react";
 import { sortBy } from "lodash-es";
 import { observer } from "mobx-react";
@@ -85,7 +91,7 @@ export const FilterMembers = observer(function FilterMembers(props: Props) {
                 {sortedOptions.length > 5 && (
                   <button
                     type="button"
-                    className="ml-8 text-xs font-medium text-custom-primary-100"
+                    className="ml-8 text-11 font-medium text-accent-primary"
                     onClick={handleViewToggle}
                   >
                     {itemsToRender === sortedOptions.length ? "View less" : "View all"}
@@ -93,7 +99,7 @@ export const FilterMembers = observer(function FilterMembers(props: Props) {
                 )}
               </>
             ) : (
-              <p className="text-xs italic text-custom-text-400">No matches found</p>
+              <p className="text-11 text-placeholder italic">No matches found</p>
             )
           ) : (
             <Loader className="space-y-2">
diff --git a/apps/web/core/components/modules/dropdowns/filters/root.tsx b/apps/web/core/components/modules/dropdowns/filters/root.tsx
index c68c163fb..d2169b7fa 100644
--- a/apps/web/core/components/modules/dropdowns/filters/root.tsx
+++ b/apps/web/core/components/modules/dropdowns/filters/root.tsx
@@ -1,9 +1,14 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useState } from "react";
 import { observer } from "mobx-react";
-import { Search } from "lucide-react";
-// plane imports
 import type { TModuleStatus } from "@plane/propel/icons";
-import { CloseIcon } from "@plane/propel/icons";
+// plane imports
+import { CloseIcon, SearchIcon } from "@plane/propel/icons";
 import type { TModuleDisplayFilters, TModuleFilters } from "@plane/types";
 // components
 import { FilterOption } from "@/components/issues/issue-layouts/filters";
@@ -36,12 +41,12 @@ export const ModuleFiltersSelection = observer(function ModuleFiltersSelection(p
 
   return (
     <div className="flex h-full w-full flex-col overflow-hidden">
-      <div className="bg-custom-background-100 p-2.5 pb-0">
-        <div className="flex items-center gap-1.5 rounded border-[0.5px] border-custom-border-200 bg-custom-background-90 px-1.5 py-1 text-xs">
-          <Search className="text-custom-text-400" size={12} strokeWidth={2} />
+      <div className="bg-surface-1 p-2.5 pb-0">
+        <div className="flex items-center gap-1.5 rounded-sm border-[0.5px] border-subtle bg-surface-2 px-1.5 py-1 text-11">
+          <SearchIcon className="text-placeholder" width={12} height={12} strokeWidth={2} />
           <input
             type="text"
-            className="w-full bg-custom-background-90 outline-none placeholder:text-custom-text-400"
+            className="w-full bg-surface-2 outline-none placeholder:text-placeholder"
             placeholder="Search"
             value={filtersSearchQuery}
             onChange={(e) => setFiltersSearchQuery(e.target.value)}
@@ -49,12 +54,12 @@ export const ModuleFiltersSelection = observer(function ModuleFiltersSelection(p
           />
           {filtersSearchQuery !== "" && (
             <button type="button" className="grid place-items-center" onClick={() => setFiltersSearchQuery("")}>
-              <CloseIcon className="text-custom-text-300" height={12} width={12} strokeWidth={2} />
+              <CloseIcon className="text-tertiary" height={12} width={12} strokeWidth={2} />
             </button>
           )}
         </div>
       </div>
-      <div className="h-full w-full divide-y divide-custom-border-200 overflow-y-auto px-2.5 vertical-scrollbar scrollbar-sm">
+      <div className="vertical-scrollbar scrollbar-sm h-full w-full divide-y divide-subtle-1 overflow-y-auto px-2.5">
         {!isArchived && (
           <div className="py-2">
             <FilterOption
diff --git a/apps/web/core/components/modules/dropdowns/filters/start-date.tsx b/apps/web/core/components/modules/dropdowns/filters/start-date.tsx
index 8d21cfdeb..2c055b7ad 100644
--- a/apps/web/core/components/modules/dropdowns/filters/start-date.tsx
+++ b/apps/web/core/components/modules/dropdowns/filters/start-date.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React, { useState } from "react";
 import { observer } from "mobx-react";
 // constants
@@ -69,7 +75,7 @@ export const FilterStartDate = observer(function FilterStartDate(props: Props) {
               <FilterOption isChecked={isCustomDateSelected()} onClick={handleCustomDate} title="Custom" multiple />
             </>
           ) : (
-            <p className="text-xs italic text-custom-text-400">No matches found</p>
+            <p className="text-11 text-placeholder italic">No matches found</p>
           )}
         </div>
       )}
diff --git a/apps/web/core/components/modules/dropdowns/filters/status.tsx b/apps/web/core/components/modules/dropdowns/filters/status.tsx
index e8b51de4a..c6759089f 100644
--- a/apps/web/core/components/modules/dropdowns/filters/status.tsx
+++ b/apps/web/core/components/modules/dropdowns/filters/status.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React, { useState } from "react";
 import { observer } from "mobx-react";
 import { MODULE_STATUS } from "@plane/constants";
@@ -42,7 +48,7 @@ export const FilterStatus = observer(function FilterStatus(props: Props) {
               />
             ))
           ) : (
-            <p className="text-xs italic text-custom-text-400">No matches found</p>
+            <p className="text-11 text-placeholder italic">No matches found</p>
           )}
         </div>
       )}
diff --git a/apps/web/core/components/modules/dropdowns/filters/target-date.tsx b/apps/web/core/components/modules/dropdowns/filters/target-date.tsx
index 85639c8b2..20654bef8 100644
--- a/apps/web/core/components/modules/dropdowns/filters/target-date.tsx
+++ b/apps/web/core/components/modules/dropdowns/filters/target-date.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React, { useState } from "react";
 import { observer } from "mobx-react";
 // plane constants
@@ -68,7 +74,7 @@ export const FilterTargetDate = observer(function FilterTargetDate(props: Props)
               <FilterOption isChecked={isCustomDateSelected()} onClick={handleCustomDate} title="Custom" multiple />
             </>
           ) : (
-            <p className="text-xs italic text-custom-text-400">No matches found</p>
+            <p className="text-11 text-placeholder italic">No matches found</p>
           )}
         </div>
       )}
diff --git a/apps/web/core/components/modules/dropdowns/index.ts b/apps/web/core/components/modules/dropdowns/index.ts
index f6c42552f..41a21b5cb 100644
--- a/apps/web/core/components/modules/dropdowns/index.ts
+++ b/apps/web/core/components/modules/dropdowns/index.ts
@@ -1,2 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./filters";
 export * from "./order-by";
diff --git a/apps/web/core/components/modules/dropdowns/order-by.tsx b/apps/web/core/components/modules/dropdowns/order-by.tsx
index c0f6f2e0d..b33cf62cd 100644
--- a/apps/web/core/components/modules/dropdowns/order-by.tsx
+++ b/apps/web/core/components/modules/dropdowns/order-by.tsx
@@ -1,8 +1,14 @@
-import { ArrowDownWideNarrow, ArrowUpWideNarrow, Check } from "lucide-react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { ArrowDownWideNarrow, ArrowUpWideNarrow } from "lucide-react";
 import { MODULE_ORDER_BY_OPTIONS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { getButtonStyling } from "@plane/propel/button";
-import { ChevronDownIcon } from "@plane/propel/icons";
+import { CheckIcon, ChevronDownIcon } from "@plane/propel/icons";
 import type { TModuleOrderByOptions } from "@plane/types";
 // ui
 import { CustomMenu } from "@plane/ui";
@@ -29,8 +35,8 @@ export function ModuleOrderByDropdown(props: Props) {
   return (
     <CustomMenu
       customButton={
-        <div className={cn(getButtonStyling("neutral-primary", "sm"), "px-2 text-custom-text-300")}>
-          {!isDescending ? <ArrowUpWideNarrow className="size-3 " /> : <ArrowDownWideNarrow className="size-3 " />}
+        <div className={cn(getButtonStyling("secondary", "lg"), "px-2 text-tertiary")}>
+          {!isDescending ? <ArrowUpWideNarrow className="size-3" /> : <ArrowDownWideNarrow className="size-3" />}
           {orderByDetails && t(orderByDetails?.i18n_label)}
           <ChevronDownIcon className="size-3" strokeWidth={2} />
         </div>
@@ -49,12 +55,12 @@ export function ModuleOrderByDropdown(props: Props) {
           }}
         >
           {t(option.i18n_label)}
-          {value?.includes(option.key) && <Check className="h-3 w-3" />}
+          {value?.includes(option.key) && <CheckIcon className="h-3 w-3" />}
         </CustomMenu.MenuItem>
       ))}
       {!isManual && (
         <>
-          <hr className="my-2 border-custom-border-200" />
+          <hr className="my-2 border-subtle" />
           <CustomMenu.MenuItem
             className="flex items-center justify-between gap-2"
             onClick={() => {
@@ -62,7 +68,7 @@ export function ModuleOrderByDropdown(props: Props) {
             }}
           >
             Ascending
-            {!isDescending && <Check className="h-3 w-3" />}
+            {!isDescending && <CheckIcon className="h-3 w-3" />}
           </CustomMenu.MenuItem>
           <CustomMenu.MenuItem
             className="flex items-center justify-between gap-2"
@@ -71,7 +77,7 @@ export function ModuleOrderByDropdown(props: Props) {
             }}
           >
             Descending
-            {isDescending && <Check className="h-3 w-3" />}
+            {isDescending && <CheckIcon className="h-3 w-3" />}
           </CustomMenu.MenuItem>
         </>
       )}
diff --git a/apps/web/core/components/modules/form.tsx b/apps/web/core/components/modules/form.tsx
index 8db3d3d8c..a958bc486 100644
--- a/apps/web/core/components/modules/form.tsx
+++ b/apps/web/core/components/modules/form.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useEffect } from "react";
 import { Controller, useForm } from "react-hook-form";
 // plane imports
@@ -101,7 +107,7 @@ export function ModuleForm(props: Props) {
               )}
             />
           )}
-          <h3 className="text-xl font-medium text-custom-text-200">
+          <h3 className="text-18 font-medium text-secondary">
             {status ? t("common.update") : t("common.create")} {t("common.module").toLowerCase()}
           </h3>
         </div>
@@ -126,13 +132,13 @@ export function ModuleForm(props: Props) {
                   onChange={onChange}
                   hasError={Boolean(errors?.name)}
                   placeholder={t("title")}
-                  className="w-full text-base"
+                  className="w-full text-14"
                   tabIndex={getIndex("name")}
                   autoFocus
                 />
               )}
             />
-            <span className="text-xs text-red-500">{errors?.name?.message}</span>
+            <span className="text-11 text-danger-primary">{errors?.name?.message}</span>
           </div>
           <div>
             <Controller
@@ -145,7 +151,7 @@ export function ModuleForm(props: Props) {
                   value={value}
                   onChange={onChange}
                   placeholder={t("description")}
-                  className="w-full text-base resize-none min-h-24"
+                  className="min-h-24 w-full resize-none text-14"
                   hasError={Boolean(errors?.description)}
                   tabIndex={getIndex("description")}
                 />
@@ -226,11 +232,11 @@ export function ModuleForm(props: Props) {
           </div>
         </div>
       </div>
-      <div className="px-5 py-4 flex items-center justify-end gap-2 border-t-[0.5px] border-custom-border-200">
-        <Button variant="neutral-primary" size="sm" onClick={handleClose} tabIndex={getIndex("cancel")}>
+      <div className="flex items-center justify-end gap-2 border-t-[0.5px] border-subtle px-5 py-4">
+        <Button variant="secondary" size="lg" onClick={handleClose} tabIndex={getIndex("cancel")}>
           {t("cancel")}
         </Button>
-        <Button variant="primary" size="sm" type="submit" loading={isSubmitting} tabIndex={getIndex("submit")}>
+        <Button variant="primary" size="lg" type="submit" loading={isSubmitting} tabIndex={getIndex("submit")}>
           {status
             ? isSubmitting
               ? t("updating")
diff --git a/apps/web/core/components/modules/gantt-chart/blocks.tsx b/apps/web/core/components/modules/gantt-chart/blocks.tsx
index f5b96b729..f3fdd5f58 100644
--- a/apps/web/core/components/modules/gantt-chart/blocks.tsx
+++ b/apps/web/core/components/modules/gantt-chart/blocks.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import Link from "next/link";
 import { useParams } from "next/navigation";
@@ -47,7 +53,7 @@ export const ModuleGanttBlock = observer(function ModuleGanttBlock(props: Props)
       position="top-start"
     >
       <div
-        className="relative flex h-full w-full cursor-pointer items-center rounded"
+        className="relative flex h-full w-full cursor-pointer items-center rounded-sm"
         style={blockStyle}
         onClick={() =>
           router.push(
@@ -55,9 +61,9 @@ export const ModuleGanttBlock = observer(function ModuleGanttBlock(props: Props)
           )
         }
       >
-        <div className="absolute left-0 top-0 h-full w-full bg-custom-background-100/50" />
+        <div className="absolute top-0 left-0 h-full w-full bg-surface-1/50" />
         <div
-          className="sticky w-auto overflow-hidden truncate px-2.5 py-1 text-sm text-custom-text-100"
+          className="sticky w-auto truncate overflow-hidden px-2.5 py-1 text-13 text-primary"
           style={{ left: `${SIDEBAR_WIDTH}px` }}
         >
           {moduleDetails?.name}
@@ -82,7 +88,7 @@ export const ModuleGanttSidebarBlock = observer(function ModuleGanttSidebarBlock
       draggable={false}
     >
       <ModuleStatusIcon status={moduleDetails?.status ?? "backlog"} height="16px" width="16px" />
-      <h6 className="flex-grow truncate text-sm font-medium">{moduleDetails?.name}</h6>
+      <h6 className="flex-grow truncate text-13 font-medium">{moduleDetails?.name}</h6>
     </Link>
   );
 });
diff --git a/apps/web/core/components/modules/gantt-chart/index.ts b/apps/web/core/components/modules/gantt-chart/index.ts
index 72eb6bfc5..1b44f4a0e 100644
--- a/apps/web/core/components/modules/gantt-chart/index.ts
+++ b/apps/web/core/components/modules/gantt-chart/index.ts
@@ -1,2 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./blocks";
 export * from "./modules-list-layout";
diff --git a/apps/web/core/components/modules/gantt-chart/modules-list-layout.tsx b/apps/web/core/components/modules/gantt-chart/modules-list-layout.tsx
index 468385239..8f5df8df2 100644
--- a/apps/web/core/components/modules/gantt-chart/modules-list-layout.tsx
+++ b/apps/web/core/components/modules/gantt-chart/modules-list-layout.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // PLane
diff --git a/apps/web/core/components/modules/index.ts b/apps/web/core/components/modules/index.ts
index a9a4e65e4..96ef55393 100644
--- a/apps/web/core/components/modules/index.ts
+++ b/apps/web/core/components/modules/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./applied-filters";
 export * from "./dropdowns";
 export * from "./select";
diff --git a/apps/web/core/components/modules/links/create-update-modal.tsx b/apps/web/core/components/modules/links/create-update-modal.tsx
index 9f219b80c..b99254aef 100644
--- a/apps/web/core/components/modules/links/create-update-modal.tsx
+++ b/apps/web/core/components/modules/links/create-update-modal.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useEffect } from "react";
 import { Controller, useForm } from "react-hook-form";
 // plane types
@@ -81,10 +86,10 @@ export function CreateUpdateModuleLinkModal(props: Props) {
     <ModalCore isOpen={isOpen} handleClose={onClose}>
       <form onSubmit={handleSubmit(handleFormSubmit)}>
         <div className="space-y-5 p-5">
-          <h3 className="text-xl font-medium text-custom-text-200">{data ? "Update" : "Add"} link</h3>
+          <h3 className="text-18 font-medium text-secondary">{data ? "Update" : "Add"} link</h3>
           <div className="mt-2 space-y-3">
             <div>
-              <label htmlFor="url" className="mb-2 text-custom-text-200">
+              <label htmlFor="url" className="mb-2 text-secondary">
                 URL
               </label>
               <Controller
@@ -108,9 +113,9 @@ export function CreateUpdateModuleLinkModal(props: Props) {
               />
             </div>
             <div>
-              <label htmlFor="title" className="mb-2 text-custom-text-200">
+              <label htmlFor="title" className="mb-2 text-secondary">
                 Display title
-                <span className="text-[10px] block">Optional</span>
+                <span className="block text-10">Optional</span>
               </label>
               <Controller
                 control={control}
@@ -131,11 +136,11 @@ export function CreateUpdateModuleLinkModal(props: Props) {
             </div>
           </div>
         </div>
-        <div className="px-5 py-4 flex items-center justify-end gap-2 border-t-[0.5px] border-custom-border-200">
-          <Button variant="neutral-primary" size="sm" onClick={onClose}>
+        <div className="flex items-center justify-end gap-2 border-t-[0.5px] border-subtle px-5 py-4">
+          <Button variant="secondary" size="lg" onClick={onClose}>
             Cancel
           </Button>
-          <Button variant="primary" size="sm" type="submit" loading={isSubmitting}>
+          <Button variant="primary" size="lg" type="submit" loading={isSubmitting}>
             {data ? (isSubmitting ? "Updating link" : "Update link") : isSubmitting ? "Adding link" : "Add link"}
           </Button>
         </div>
diff --git a/apps/web/core/components/modules/links/index.ts b/apps/web/core/components/modules/links/index.ts
index 114112190..80472cdd7 100644
--- a/apps/web/core/components/modules/links/index.ts
+++ b/apps/web/core/components/modules/links/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./create-update-modal";
 export * from "./list-item";
 export * from "./list";
diff --git a/apps/web/core/components/modules/links/list-item.tsx b/apps/web/core/components/modules/links/list-item.tsx
index e31812699..549ca3ea4 100644
--- a/apps/web/core/components/modules/links/list-item.tsx
+++ b/apps/web/core/components/modules/links/list-item.tsx
@@ -1,7 +1,14 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
-import { Copy, Pencil, Trash2 } from "lucide-react";
-// plane types
+
 import { MODULE_TRACKER_ELEMENTS } from "@plane/constants";
+import { CopyIcon, EditIcon, TrashIcon } from "@plane/propel/icons";
+// plane types
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import { Tooltip } from "@plane/propel/tooltip";
 import type { ILinkDetails } from "@plane/types";
@@ -42,24 +49,24 @@ export const ModulesLinksListItem = observer(function ModulesLinksListItem(props
   };
 
   return (
-    <div className="relative flex flex-col rounded-md bg-custom-background-90 p-2.5">
+    <div className="relative flex flex-col rounded-md bg-layer-3 p-2.5">
       <div className="flex w-full items-start justify-between gap-2">
         <div className="flex items-start gap-2 truncate">
           <span className="py-1">
-            <Icon className="size-3 stroke-2 text-custom-text-350 group-hover:text-custom-text-100 flex-shrink-0" />
+            <Icon className="size-3 shrink-0 stroke-2 text-tertiary group-hover:text-primary" />
           </span>
           <Tooltip tooltipContent={link.title && link.title !== "" ? link.title : link.url} isMobile={isMobile}>
-            <a href={link.url} target="_blank" rel="noopener noreferrer" className="cursor-pointer truncate text-xs">
+            <a href={link.url} target="_blank" rel="noopener noreferrer" className="cursor-pointer truncate text-11">
               {link.title && link.title !== "" ? link.title : link.url}
             </a>
           </Tooltip>
         </div>
 
-        <div className="z-[1] flex flex-shrink-0 items-center">
+        <div className="z-1 flex shrink-0 items-center">
           {isEditingAllowed && (
             <button
               type="button"
-              className="grid place-items-center p-1 hover:bg-custom-background-80"
+              className="grid place-items-center rounded-sm p-1 text-secondary hover:bg-layer-transparent-hover"
               data-ph-element={MODULE_TRACKER_ELEMENTS.LIST_ITEM}
               onClick={(e) => {
                 e.preventDefault();
@@ -67,19 +74,20 @@ export const ModulesLinksListItem = observer(function ModulesLinksListItem(props
                 handleEditLink();
               }}
             >
-              <Pencil className="size-3 stroke-[1.5] text-custom-text-200" />
+              <EditIcon className="size-3 stroke-[1.5]" />
             </button>
           )}
-          <span
+          <button
+            type="button"
             onClick={() => copyToClipboard(link.url)}
-            className="grid place-items-center p-1 hover:bg-custom-background-80 cursor-pointer"
+            className="grid place-items-center rounded-sm p-1 text-secondary hover:bg-layer-transparent-hover"
           >
-            <Copy className="h-3.5 w-3.5 stroke-[1.5]" />
-          </span>
+            <CopyIcon className="size-3 stroke-[1.5]" />
+          </button>
           {isEditingAllowed && (
             <button
               type="button"
-              className="grid place-items-center p-1 hover:bg-custom-background-80"
+              className="grid place-items-center rounded-sm p-1 text-secondary hover:bg-layer-transparent-hover"
               data-ph-element={MODULE_TRACKER_ELEMENTS.LIST_ITEM}
               onClick={(e) => {
                 e.preventDefault();
@@ -87,13 +95,13 @@ export const ModulesLinksListItem = observer(function ModulesLinksListItem(props
                 handleDeleteLink();
               }}
             >
-              <Trash2 className="size-3 stroke-[1.5] text-custom-text-200" />
+              <TrashIcon className="size-3 stroke-[1.5]" />
             </button>
           )}
         </div>
       </div>
       <div className="px-5">
-        <p className="flex items-center gap-1.5 mt-0.5 stroke-[1.5] text-xs text-custom-text-300">
+        <p className="mt-0.5 flex items-center gap-1.5 stroke-[1.5] text-11 text-tertiary">
           Added {calculateTimeAgo(link.created_at)}{" "}
           {createdByDetails && (
             <>by {createdByDetails?.is_bot ? createdByDetails?.first_name + " Bot" : createdByDetails?.display_name}</>
diff --git a/apps/web/core/components/modules/links/list.tsx b/apps/web/core/components/modules/links/list.tsx
index cd0a3c93a..4497ae6c7 100644
--- a/apps/web/core/components/modules/links/list.tsx
+++ b/apps/web/core/components/modules/links/list.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useCallback } from "react";
 import { observer } from "mobx-react";
 // plane types
diff --git a/apps/web/core/components/modules/modal.tsx b/apps/web/core/components/modules/modal.tsx
index 9fad3c763..621bfa075 100644
--- a/apps/web/core/components/modules/modal.tsx
+++ b/apps/web/core/components/modules/modal.tsx
@@ -1,17 +1,18 @@
-import React, { useEffect, useState } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useEffect, useState } from "react";
 import { observer } from "mobx-react";
 import { useForm } from "react-hook-form";
-// types
-import { MODULE_TRACKER_EVENTS } from "@plane/constants";
+// Plane imports
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { IModule } from "@plane/types";
-// ui
 import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
 // components
 import { ModuleForm } from "@/components/modules";
-// constants
-// helpers
-import { captureSuccess, captureError } from "@/helpers/event-tracker.helper";
 // hooks
 import { useModule } from "@/hooks/store/use-module";
 import { useProject } from "@/hooks/store/use-project";
@@ -57,17 +58,13 @@ export const CreateUpdateModuleModal = observer(function CreateUpdateModuleModal
 
     const selectedProjectId = payload.project_id ?? projectId.toString();
     await createModule(workspaceSlug.toString(), selectedProjectId, payload)
-      .then((res) => {
+      .then((_res) => {
         handleClose();
         setToast({
           type: TOAST_TYPE.SUCCESS,
           title: "Success!",
           message: "Module created successfully.",
         });
-        captureSuccess({
-          eventName: MODULE_TRACKER_EVENTS.create,
-          payload: { id: res.id },
-        });
       })
       .catch((err) => {
         setToast({
@@ -75,11 +72,6 @@ export const CreateUpdateModuleModal = observer(function CreateUpdateModuleModal
           title: "Error!",
           message: err?.detail ?? err?.error ?? "Module could not be created. Please try again.",
         });
-        captureError({
-          eventName: MODULE_TRACKER_EVENTS.create,
-          payload: { id: data?.id },
-          error: err,
-        });
       });
   };
 
@@ -88,7 +80,7 @@ export const CreateUpdateModuleModal = observer(function CreateUpdateModuleModal
 
     const selectedProjectId = payload.project_id ?? projectId.toString();
     await updateModuleDetails(workspaceSlug.toString(), selectedProjectId, data.id, payload)
-      .then((res) => {
+      .then((_res) => {
         handleClose();
 
         setToast({
@@ -96,10 +88,6 @@ export const CreateUpdateModuleModal = observer(function CreateUpdateModuleModal
           title: "Success!",
           message: "Module updated successfully.",
         });
-        captureSuccess({
-          eventName: MODULE_TRACKER_EVENTS.update,
-          payload: { id: res.id },
-        });
       })
       .catch((err) => {
         setToast({
@@ -107,11 +95,6 @@ export const CreateUpdateModuleModal = observer(function CreateUpdateModuleModal
           title: "Error!",
           message: err?.detail ?? err?.error ?? "Module could not be updated. Please try again.",
         });
-        captureError({
-          eventName: MODULE_TRACKER_EVENTS.update,
-          payload: { id: data.id },
-          error: err,
-        });
       });
   };
 
diff --git a/apps/web/core/components/modules/module-card-item.tsx b/apps/web/core/components/modules/module-card-item.tsx
index 082a4c20e..177bbcf58 100644
--- a/apps/web/core/components/modules/module-card-item.tsx
+++ b/apps/web/core/components/modules/module-card-item.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { SyntheticEvent } from "react";
 import React, { useRef } from "react";
 import { observer } from "mobx-react";
@@ -11,8 +17,6 @@ import {
   EUserPermissions,
   EUserPermissionsLevel,
   IS_FAVORITE_MENU_OPEN,
-  MODULE_TRACKER_EVENTS,
-  MODULE_TRACKER_ELEMENTS,
 } from "@plane/constants";
 import { useLocalStorage } from "@plane/hooks";
 import { WorkItemsIcon } from "@plane/propel/icons";
@@ -26,8 +30,6 @@ import { DateRangeDropdown } from "@/components/dropdowns/date-range";
 import { ButtonAvatars } from "@/components/dropdowns/member/avatar";
 import { ModuleQuickActions } from "@/components/modules";
 import { ModuleStatusDropdown } from "@/components/modules/module-status-dropdown";
-// helpers
-import { captureElementAndEvent } from "@/helpers/event-tracker.helper";
 // hooks
 import { useMember } from "@/hooks/store/use-member";
 import { useModule } from "@/hooks/store/use-module";
@@ -72,16 +74,6 @@ export const ModuleCardItem = observer(function ModuleCardItem(props: Props) {
     const addToFavoritePromise = addModuleToFavorites(workspaceSlug.toString(), projectId.toString(), moduleId).then(
       () => {
         if (!storedValue) toggleFavoriteMenu(true);
-        captureElementAndEvent({
-          element: {
-            elementName: MODULE_TRACKER_ELEMENTS.CARD_ITEM,
-          },
-          event: {
-            eventName: MODULE_TRACKER_EVENTS.favorite,
-            payload: { id: moduleId },
-            state: "SUCCESS",
-          },
-        });
       }
     );
 
@@ -107,18 +99,7 @@ export const ModuleCardItem = observer(function ModuleCardItem(props: Props) {
       workspaceSlug.toString(),
       projectId.toString(),
       moduleId
-    ).then(() => {
-      captureElementAndEvent({
-        element: {
-          elementName: MODULE_TRACKER_ELEMENTS.CARD_ITEM,
-        },
-        event: {
-          eventName: MODULE_TRACKER_EVENTS.unfavorite,
-          payload: { id: moduleId },
-          state: "SUCCESS",
-        },
-      });
-    });
+    );
 
     setPromiseToast(removeFromFavoritePromise, {
       loading: "Removing module from favorites...",
@@ -209,7 +190,7 @@ export const ModuleCardItem = observer(function ModuleCardItem(props: Props) {
           <div>
             <div className="flex items-center justify-between gap-2">
               <Tooltip tooltipContent={moduleDetails.name} position="top" isMobile={isMobile}>
-                <span className="truncate text-base font-medium">{moduleDetails.name}</span>
+                <span className="truncate text-14 font-medium">{moduleDetails.name}</span>
               </Tooltip>
               <div className="flex items-center gap-2" onClick={handleEventPropagation}>
                 {moduleStatus && (
@@ -220,16 +201,16 @@ export const ModuleCardItem = observer(function ModuleCardItem(props: Props) {
                   />
                 )}
                 <button onClick={openModuleOverview}>
-                  <Info className="h-4 w-4 text-custom-text-400" />
+                  <Info className="h-4 w-4 text-placeholder" />
                 </button>
               </div>
             </div>
           </div>
           <div className="flex flex-col gap-3">
             <div className="flex items-center justify-between">
-              <div className="flex items-center gap-1.5 text-custom-text-200">
-                <WorkItemsIcon className="h-4 w-4 text-custom-text-300" />
-                <span className="text-xs text-custom-text-300">{issueCount ?? "0 Work item"}</span>
+              <div className="flex items-center gap-1.5 text-secondary">
+                <WorkItemsIcon className="h-4 w-4 text-tertiary" />
+                <span className="text-11 text-tertiary">{issueCount ?? "0 Work item"}</span>
               </div>
               {moduleLeadDetails ? (
                 <span className="cursor-default">
@@ -237,14 +218,14 @@ export const ModuleCardItem = observer(function ModuleCardItem(props: Props) {
                 </span>
               ) : (
                 <Tooltip tooltipContent="No lead">
-                  <SquareUser className="h-4 w-4 mx-1 text-custom-text-300 " />
+                  <SquareUser className="mx-1 h-4 w-4 text-tertiary" />
                 </Tooltip>
               )}
             </div>
             <LinearProgressIndicator size="lg" data={progressIndicatorData} />
             <div className="flex items-center justify-between py-0.5" onClick={handleEventPropagation}>
               <DateRangeDropdown
-                buttonContainerClassName={`h-6 w-full flex ${isDisabled ? "cursor-not-allowed" : "cursor-pointer"} items-center gap-1.5 text-custom-text-300 border-[0.5px] border-custom-border-300 rounded text-xs`}
+                buttonContainerClassName={`h-6 w-full flex ${isDisabled ? "cursor-not-allowed" : "cursor-pointer"} items-center gap-1.5 text-tertiary border-[0.5px] border-strong rounded-sm text-11`}
                 buttonVariant="transparent-with-text"
                 className="h-7"
                 value={{
diff --git a/apps/web/core/components/modules/module-layout-icon.tsx b/apps/web/core/components/modules/module-layout-icon.tsx
index 6b4b83c49..d7cbfef76 100644
--- a/apps/web/core/components/modules/module-layout-icon.tsx
+++ b/apps/web/core/components/modules/module-layout-icon.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 import { TimelineLayoutIcon, GridLayoutIcon, ListLayoutIcon } from "@plane/propel/icons";
 import type { TModuleLayoutOptions } from "@plane/types";
@@ -27,7 +33,9 @@ export function ModuleLayoutIcon(props: ILayoutIcon) {
   return (
     <>
       {withContainer ? (
-        <div className={cn("flex items-center justify-center border rounded p-0.5 flex-shrink-0", containerClassName)}>
+        <div
+          className={cn("flex flex-shrink-0 items-center justify-center rounded-sm border p-0.5", containerClassName)}
+        >
           <Icon width={size} height={size} className={cn(className)} />
         </div>
       ) : (
diff --git a/apps/web/core/components/modules/module-list-item-action.tsx b/apps/web/core/components/modules/module-list-item-action.tsx
index 7ae267c77..3340fab1d 100644
--- a/apps/web/core/components/modules/module-list-item-action.tsx
+++ b/apps/web/core/components/modules/module-list-item-action.tsx
@@ -1,33 +1,26 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
-// icons
 import { SquareUser } from "lucide-react";
-// types
-import {
-  MODULE_STATUS,
-  EUserPermissions,
-  EUserPermissionsLevel,
-  IS_FAVORITE_MENU_OPEN,
-  MODULE_TRACKER_EVENTS,
-  MODULE_TRACKER_ELEMENTS,
-} from "@plane/constants";
+// Plane imports
+import { MODULE_STATUS, EUserPermissions, EUserPermissionsLevel, IS_FAVORITE_MENU_OPEN } from "@plane/constants";
 import { useLocalStorage } from "@plane/hooks";
 import { useTranslation } from "@plane/i18n";
 import { TOAST_TYPE, setPromiseToast, setToast } from "@plane/propel/toast";
 import { Tooltip } from "@plane/propel/tooltip";
 import type { IModule } from "@plane/types";
-// ui
 import { FavoriteStar } from "@plane/ui";
-// components
 import { renderFormattedPayloadDate, getDate } from "@plane/utils";
+// components
 import { DateRangeDropdown } from "@/components/dropdowns/date-range";
 import { ModuleQuickActions } from "@/components/modules";
 import { ModuleStatusDropdown } from "@/components/modules/module-status-dropdown";
-// constants
-// helpers
-import { captureElementAndEvent, captureError } from "@/helpers/event-tracker.helper";
 // hooks
 import { useMember } from "@/hooks/store/use-member";
 import { useModule } from "@/hooks/store/use-module";
@@ -69,28 +62,12 @@ export const ModuleListItemAction = observer(function ModuleListItemAction(props
     e.preventDefault();
     if (!workspaceSlug || !projectId) return;
 
-    const addToFavoritePromise = addModuleToFavorites(workspaceSlug.toString(), projectId.toString(), moduleId)
-      .then(() => {
+    const addToFavoritePromise = addModuleToFavorites(workspaceSlug.toString(), projectId.toString(), moduleId).then(
+      () => {
         // open favorites menu if closed
         if (!storedValue) toggleFavoriteMenu(true);
-        captureElementAndEvent({
-          element: {
-            elementName: MODULE_TRACKER_ELEMENTS.LIST_ITEM,
-          },
-          event: {
-            eventName: MODULE_TRACKER_EVENTS.favorite,
-            payload: { id: moduleId },
-            state: "SUCCESS",
-          },
-        });
-      })
-      .catch((error) => {
-        captureError({
-          eventName: MODULE_TRACKER_EVENTS.favorite,
-          payload: { id: moduleId },
-          error,
-        });
-      });
+      }
+    );
 
     setPromiseToast(addToFavoritePromise, {
       loading: "Adding module to favorites...",
@@ -114,26 +91,7 @@ export const ModuleListItemAction = observer(function ModuleListItemAction(props
       workspaceSlug.toString(),
       projectId.toString(),
       moduleId
-    )
-      .then(() => {
-        captureElementAndEvent({
-          element: {
-            elementName: MODULE_TRACKER_ELEMENTS.LIST_ITEM,
-          },
-          event: {
-            eventName: MODULE_TRACKER_EVENTS.unfavorite,
-            payload: { id: moduleId },
-            state: "SUCCESS",
-          },
-        });
-      })
-      .catch((error) => {
-        captureError({
-          eventName: MODULE_TRACKER_EVENTS.unfavorite,
-          payload: { id: moduleId },
-          error,
-        });
-      });
+    );
 
     setPromiseToast(removeFromFavoritePromise, {
       loading: "Removing module from favorites...",
@@ -173,7 +131,7 @@ export const ModuleListItemAction = observer(function ModuleListItemAction(props
   return (
     <>
       <DateRangeDropdown
-        buttonContainerClassName={`h-6 w-full flex ${isDisabled ? "cursor-not-allowed" : "cursor-pointer"} items-center gap-1.5 text-custom-text-300 border-[0.5px] border-custom-border-300 rounded text-xs`}
+        buttonContainerClassName={`h-6 w-full flex ${isDisabled ? "cursor-not-allowed" : "cursor-pointer"} items-center gap-1.5 text-tertiary border-[0.5px] border-strong rounded-sm text-11`}
         buttonVariant="transparent-with-text"
         className="h-7"
         value={{
@@ -209,7 +167,7 @@ export const ModuleListItemAction = observer(function ModuleListItemAction(props
         </span>
       ) : (
         <Tooltip tooltipContent="No lead">
-          <SquareUser className="h-4 w-4 text-custom-text-300" />
+          <SquareUser className="h-4 w-4 text-tertiary" />
         </Tooltip>
       )}
 
diff --git a/apps/web/core/components/modules/module-list-item.tsx b/apps/web/core/components/modules/module-list-item.tsx
index 1d55c7e31..ac942244a 100644
--- a/apps/web/core/components/modules/module-list-item.tsx
+++ b/apps/web/core/components/modules/module-list-item.tsx
@@ -1,8 +1,15 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React, { useRef } from "react";
 import { observer } from "mobx-react";
 import { useParams, usePathname, useSearchParams } from "next/navigation";
 // icons
-import { Check, Info } from "lucide-react";
+import { Info } from "lucide-react";
+import { CheckIcon } from "@plane/propel/icons";
 // ui
 import { CircularProgressIndicator } from "@plane/ui";
 // components
@@ -72,14 +79,14 @@ export const ModuleListItem = observer(function ModuleListItem(props: Props) {
         <CircularProgressIndicator size={30} percentage={progress} strokeWidth={3}>
           {completedModuleCheck ? (
             progress === 100 ? (
-              <Check className="h-3 w-3 stroke-[2] text-custom-primary-100" />
+              <CheckIcon className="h-3 w-3 stroke-[2] text-accent-primary" />
             ) : (
-              <span className="text-sm text-custom-primary-100">{`!`}</span>
+              <span className="text-13 text-accent-primary">{`!`}</span>
             )
           ) : progress === 100 ? (
-            <Check className="h-3 w-3 stroke-[2] text-custom-primary-100" />
+            <CheckIcon className="h-3 w-3 stroke-[2] text-accent-primary" />
           ) : (
-            <span className="text-[9px] text-custom-text-300">{`${progress}%`}</span>
+            <span className="text-9 text-tertiary">{`${progress}%`}</span>
           )}
         </CircularProgressIndicator>
       }
@@ -88,7 +95,7 @@ export const ModuleListItem = observer(function ModuleListItem(props: Props) {
           onClick={openModuleOverview}
           className={`z-[5] flex-shrink-0 ${isMobile ? "flex" : "hidden group-hover:flex"}`}
         >
-          <Info className="h-4 w-4 text-custom-text-400" />
+          <Info className="h-4 w-4 text-placeholder" />
         </button>
       }
       actionableItems={<ModuleListItemAction moduleId={moduleId} moduleDetails={moduleDetails} parentRef={parentRef} />}
diff --git a/apps/web/core/components/modules/module-peek-overview.tsx b/apps/web/core/components/modules/module-peek-overview.tsx
index 9c55eb4af..24a11fe65 100644
--- a/apps/web/core/components/modules/module-peek-overview.tsx
+++ b/apps/web/core/components/modules/module-peek-overview.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React, { useEffect } from "react";
 import { observer } from "mobx-react";
 import { usePathname, useSearchParams } from "next/navigation";
@@ -45,7 +51,7 @@ export const ModulePeekOverview = observer(function ModulePeekOverview({
       {peekModule && (
         <div
           ref={ref}
-          className="flex h-full w-full max-w-[24rem] flex-shrink-0 flex-col gap-3.5 overflow-y-auto border-l border-custom-border-100 bg-custom-sidebar-background-100 px-6 duration-300 absolute md:relative right-0 z-[9]"
+          className="absolute right-0 z-[9] flex h-full w-full max-w-[24rem] flex-shrink-0 flex-col gap-3.5 overflow-y-auto border-l border-subtle bg-surface-1 px-6 duration-300 md:relative"
           style={{
             boxShadow:
               "0px 1px 4px 0px rgba(0, 0, 0, 0.06), 0px 2px 4px 0px rgba(16, 24, 40, 0.06), 0px 1px 8px -1px rgba(16, 24, 40, 0.06)",
diff --git a/apps/web/core/components/modules/module-status-dropdown.tsx b/apps/web/core/components/modules/module-status-dropdown.tsx
index f4cb3fcd1..ef532e68b 100644
--- a/apps/web/core/components/modules/module-status-dropdown.tsx
+++ b/apps/web/core/components/modules/module-status-dropdown.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 import { observer } from "mobx-react";
 import { MODULE_STATUS } from "@plane/constants";
@@ -25,7 +30,7 @@ export const ModuleStatusDropdown = observer(function ModuleStatusDropdown(props
     <CustomSelect
       customButton={
         <span
-          className={`flex h-6 w-20 items-center justify-center rounded-sm text-center text-xs ${
+          className={`flex h-6 w-20 items-center justify-center rounded-sm text-center text-11 ${
             isDisabled ? "cursor-not-allowed" : "cursor-pointer"
           }`}
           style={{
diff --git a/apps/web/core/components/modules/module-view-header.tsx b/apps/web/core/components/modules/module-view-header.tsx
index 71002c6bd..916bfe95b 100644
--- a/apps/web/core/components/modules/module-view-header.tsx
+++ b/apps/web/core/components/modules/module-view-header.tsx
@@ -1,14 +1,19 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React, { useCallback, useEffect, useRef, useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
-import { ListFilter, Search } from "lucide-react";
+import { ListFilter } from "lucide-react";
 // plane helpers
 import { MODULE_VIEW_LAYOUTS } from "@plane/constants";
 import { useOutsideClickDetector } from "@plane/hooks";
 // types
 import { useTranslation } from "@plane/i18n";
-import { CloseIcon } from "@plane/propel/icons";
+import { SearchIcon, CloseIcon } from "@plane/propel/icons";
 import { Tooltip } from "@plane/propel/tooltip";
 import type { TModuleFilters } from "@plane/types";
 // ui
@@ -24,6 +29,7 @@ import { useMember } from "@/hooks/store/use-member";
 import { useModuleFilter } from "@/hooks/store/use-module-filter";
 import { usePlatformOS } from "@/hooks/use-platform-os";
 import { ModuleLayoutIcon } from "./module-layout-icon";
+import { IconButton } from "@plane/propel/icon-button";
 // i18n
 
 export const ModuleViewHeader = observer(function ModuleViewHeader() {
@@ -93,32 +99,32 @@ export const ModuleViewHeader = observer(function ModuleViewHeader() {
   const isFiltersApplied = calculateTotalFilters(filters ?? {}) !== 0 || displayFilters?.favorites;
 
   return (
-    <div className="hidden h-full sm:flex items-center gap-3 self-end">
+    <div className="hidden h-full items-center gap-2 self-end sm:flex">
       <div className="flex items-center">
         {!isSearchOpen && (
-          <button
-            type="button"
-            className="-mr-1 p-2 hover:bg-custom-background-80 rounded text-custom-text-400 grid place-items-center"
+          <IconButton
+            variant="ghost"
+            size="lg"
+            className="p- -mr-1"
             onClick={() => {
               setIsSearchOpen(true);
               inputRef.current?.focus();
             }}
-          >
-            <Search className="h-3.5 w-3.5" />
-          </button>
+            icon={SearchIcon}
+          />
         )}
         <div
           className={cn(
-            "ml-auto flex items-center justify-start gap-1 rounded-md border border-transparent bg-custom-background-100 text-custom-text-400 w-0 transition-[width] ease-linear overflow-hidden opacity-0",
+            "ml-auto flex w-0 items-center justify-start gap-1 overflow-hidden rounded-md border border-transparent bg-surface-1 text-placeholder opacity-0 transition-[width] ease-linear",
             {
-              "w-64 px-2.5 py-1.5 border-custom-border-200 opacity-100": isSearchOpen,
+              "w-64 border-subtle px-2.5 py-1.5 opacity-100": isSearchOpen,
             }
           )}
         >
-          <Search className="h-3.5 w-3.5" />
+          <SearchIcon className="h-3.5 w-3.5" />
           <input
             ref={inputRef}
-            className="w-full max-w-[234px] border-none bg-transparent text-sm text-custom-text-100 placeholder:text-custom-text-400 focus:outline-none"
+            className="w-full max-w-[234px] border-none bg-transparent text-13 text-primary placeholder:text-placeholder focus:outline-none"
             placeholder="Search"
             value={searchQuery}
             onChange={(e) => updateSearchQuery(e.target.value)}
@@ -138,7 +144,6 @@ export const ModuleViewHeader = observer(function ModuleViewHeader() {
           )}
         </div>
       </div>
-
       <ModuleOrderByDropdown
         value={displayFilters?.order_by}
         onChange={(val) => {
@@ -165,15 +170,16 @@ export const ModuleViewHeader = observer(function ModuleViewHeader() {
           memberIds={workspaceMemberIds ?? undefined}
         />
       </FiltersDropdown>
-      <div className="hidden md:flex items-center gap-1 rounded bg-custom-background-80 p-1">
+      <div className="hidden items-center gap-1 rounded-sm bg-layer-3 p-1 md:flex">
         {MODULE_VIEW_LAYOUTS.map((layout) => (
           <Tooltip key={layout.key} tooltipContent={t(layout.i18n_title)} isMobile={isMobile}>
             <button
               type="button"
               className={cn(
-                "group grid h-[22px] w-7 place-items-center overflow-hidden rounded transition-all hover:bg-custom-background-100",
+                "group grid h-5.5 w-7 place-items-center overflow-hidden rounded-sm transition-all hover:bg-layer-transparent-hover",
                 {
-                  "bg-custom-background-100 shadow-custom-shadow-2xs": displayFilters?.layout === layout.key,
+                  "bg-layer-transparent-active hover:bg-layer-transparent-active":
+                    displayFilters?.layout === layout.key,
                 }
               )}
               onClick={() => {
diff --git a/apps/web/core/components/modules/modules-list-view.tsx b/apps/web/core/components/modules/modules-list-view.tsx
index 3da71dcc7..da07843de 100644
--- a/apps/web/core/components/modules/modules-list-view.tsx
+++ b/apps/web/core/components/modules/modules-list-view.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import { useParams, useSearchParams } from "next/navigation";
 // components
@@ -76,7 +82,7 @@ export const ModulesListView = observer(function ModulesListView() {
 
   return (
     <ContentWrapper variant={ERowVariant.HUGGING}>
-      <div className="size-full flex justify-between">
+      <div className="flex size-full justify-between">
         {displayFilters?.layout === "list" && (
           <ListLayout>
             {filteredModuleIds.map((moduleId) => (
@@ -86,11 +92,11 @@ export const ModulesListView = observer(function ModulesListView() {
         )}
         {displayFilters?.layout === "board" && (
           <Row
-            className={`size-full py-page-y grid grid-cols-1 gap-6 overflow-y-auto ${
+            className={`grid size-full grid-cols-1 gap-6 overflow-y-auto py-page-y ${
               peekModule
-                ? "lg:grid-cols-1 xl:grid-cols-2 3xl:grid-cols-3"
-                : "lg:grid-cols-2 xl:grid-cols-3 3xl:grid-cols-4"
-            } auto-rows-max transition-all vertical-scrollbar scrollbar-lg`}
+                ? "3xl:grid-cols-3 lg:grid-cols-1 xl:grid-cols-2"
+                : "3xl:grid-cols-4 lg:grid-cols-2 xl:grid-cols-3"
+            } vertical-scrollbar scrollbar-lg auto-rows-max transition-all`}
           >
             {filteredModuleIds.map((moduleId) => (
               <ModuleCardItem key={moduleId} moduleId={moduleId} />
diff --git a/apps/web/core/components/modules/quick-actions.tsx b/apps/web/core/components/modules/quick-actions.tsx
index 264619110..f62e5cc30 100644
--- a/apps/web/core/components/modules/quick-actions.tsx
+++ b/apps/web/core/components/modules/quick-actions.tsx
@@ -1,26 +1,22 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useState } from "react";
 import { observer } from "mobx-react";
-
-// icons
-import { ArchiveRestoreIcon, ExternalLink, LinkIcon, Pencil, Trash2 } from "lucide-react";
+import { MoreHorizontal } from "lucide-react";
 // plane imports
-import {
-  EUserPermissions,
-  EUserPermissionsLevel,
-  MODULE_TRACKER_ELEMENTS,
-  MODULE_TRACKER_EVENTS,
-} from "@plane/constants";
-import { useTranslation } from "@plane/i18n";
-// ui
-import { ArchiveIcon } from "@plane/propel/icons";
+import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import { IconButton } from "@plane/propel/icon-button";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { TContextMenuItem } from "@plane/ui";
 import { ContextMenu, CustomMenu } from "@plane/ui";
 import { copyUrlToClipboard, cn } from "@plane/utils";
 // components
+import { useModuleMenuItems } from "@/components/common/quick-actions-helper";
 import { ArchiveModuleModal, CreateUpdateModuleModal, DeleteModuleModal } from "@/components/modules";
-// helpers
-import { captureClick, captureSuccess, captureError } from "@/helpers/event-tracker.helper";
 // hooks
 import { useModule } from "@/hooks/store/use-module";
 import { useUserPermissions } from "@/hooks/store/user";
@@ -47,10 +43,8 @@ export const ModuleQuickActions = observer(function ModuleQuickActions(props: Pr
 
   const { getModuleById, restoreModule } = useModule();
 
-  const { t } = useTranslation();
   // derived values
   const moduleDetails = getModuleById(moduleId);
-  const isArchived = !!moduleDetails?.archived_at;
   // auth
   const isEditingAllowed = allowPermissions(
     [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
@@ -59,9 +53,6 @@ export const ModuleQuickActions = observer(function ModuleQuickActions(props: Pr
     projectId
   );
 
-  const moduleState = moduleDetails?.status?.toLocaleLowerCase();
-  const isInArchivableGroup = !!moduleState && ["completed", "cancelled"].includes(moduleState);
-
   const moduleLink = `${workspaceSlug}/projects/${projectId}/modules/${moduleId}`;
   const handleCopyText = () =>
     copyUrlToClipboard(moduleLink).then(() => {
@@ -73,100 +64,48 @@ export const ModuleQuickActions = observer(function ModuleQuickActions(props: Pr
     });
   const handleOpenInNewTab = () => window.open(`/${moduleLink}`, "_blank");
 
-  const handleEditModule = () => {
-    setEditModal(true);
-  };
-
-  const handleArchiveModule = () => setArchiveModuleModal(true);
-
-  const handleRestoreModule = async () =>
-    await restoreModule(workspaceSlug, projectId, moduleId)
-      .then(() => {
-        setToast({
-          type: TOAST_TYPE.SUCCESS,
-          title: "Restore success",
-          message: "Your module can be found in project modules.",
-        });
-        captureSuccess({
-          eventName: MODULE_TRACKER_EVENTS.restore,
-          payload: { id: moduleId },
-        });
-        router.push(`/${workspaceSlug}/projects/${projectId}/archives/modules`);
-      })
-      .catch((error) => {
-        setToast({
-          type: TOAST_TYPE.ERROR,
-          title: "Error!",
-          message: "Module could not be restored. Please try again.",
-        });
-        captureError({
-          eventName: MODULE_TRACKER_EVENTS.restore,
-          payload: { id: moduleId },
-          error,
-        });
+  const handleRestoreModule = async () => {
+    try {
+      await restoreModule(workspaceSlug, projectId, moduleId);
+      setToast({
+        type: TOAST_TYPE.SUCCESS,
+        title: "Restore success",
+        message: "Your module can be found in project modules.",
       });
-
-  const handleDeleteModule = () => {
-    setDeleteModal(true);
+      router.push(`/${workspaceSlug}/projects/${projectId}/archives/modules`);
+    } catch (_error) {
+      setToast({
+        type: TOAST_TYPE.ERROR,
+        title: "Error!",
+        message: "Module could not be restored. Please try again.",
+      });
+    }
   };
 
-  const MENU_ITEMS: TContextMenuItem[] = [
-    {
-      key: "edit",
-      title: t("edit"),
-      icon: Pencil,
-      action: handleEditModule,
-      shouldRender: isEditingAllowed && !isArchived,
-    },
-    {
-      key: "open-new-tab",
-      action: handleOpenInNewTab,
-      title: t("open_in_new_tab"),
-      icon: ExternalLink,
-      shouldRender: !isArchived,
-    },
-    {
-      key: "copy-link",
-      action: handleCopyText,
-      title: t("copy_link"),
-      icon: LinkIcon,
-      shouldRender: !isArchived,
-    },
-    {
-      key: "archive",
-      action: handleArchiveModule,
-      title: t("archive"),
-      description: isInArchivableGroup ? undefined : t("project_module.quick_actions.archive_module_description"),
-      icon: ArchiveIcon,
-      className: "items-start",
-      iconClassName: "mt-1",
-      shouldRender: isEditingAllowed && !isArchived,
-      disabled: !isInArchivableGroup,
-    },
-    {
-      key: "restore",
-      action: handleRestoreModule,
-      title: t("restore"),
-      icon: ArchiveRestoreIcon,
-      shouldRender: isEditingAllowed && isArchived,
-    },
-    {
-      key: "delete",
-      action: handleDeleteModule,
-      title: t("delete"),
-      icon: Trash2,
-      shouldRender: isEditingAllowed,
-    },
-  ];
+  // Use unified menu hook from plane-web (resolves to CE or EE)
+  const menuResult = useModuleMenuItems({
+    moduleDetails: moduleDetails ?? undefined,
+    workspaceSlug,
+    projectId,
+    moduleId,
+    isEditingAllowed,
+    handleEdit: () => setEditModal(true),
+    handleArchive: () => setArchiveModuleModal(true),
+    handleRestore: handleRestoreModule,
+    handleDelete: () => setDeleteModal(true),
+    handleCopyLink: handleCopyText,
+    handleOpenInNewTab,
+  });
+
+  // Handle both CE (array) and EE (object) return types
+  const MENU_ITEMS: TContextMenuItem[] = Array.isArray(menuResult) ? menuResult : menuResult.items;
+  const additionalModals = Array.isArray(menuResult) ? null : menuResult.modals;
 
   const CONTEXT_MENU_ITEMS = MENU_ITEMS.map(function CONTEXT_MENU_ITEMS(item) {
     return {
       ...item,
 
       onClick: () => {
-        captureClick({
-          elementName: MODULE_TRACKER_ELEMENTS.CONTEXT_MENU,
-        });
         item.action();
       },
     };
@@ -191,37 +130,40 @@ export const ModuleQuickActions = observer(function ModuleQuickActions(props: Pr
             handleClose={() => setArchiveModuleModal(false)}
           />
           <DeleteModuleModal data={moduleDetails} isOpen={deleteModal} onClose={() => setDeleteModal(false)} />
+          {additionalModals}
         </div>
       )}
       <ContextMenu parentRef={parentRef} items={CONTEXT_MENU_ITEMS} />
-      <CustomMenu ellipsis placement="bottom-end" closeOnSelect buttonClassName={customClassName}>
+      <CustomMenu
+        customButton={<IconButton variant="tertiary" size="lg" icon={MoreHorizontal} />}
+        placement="bottom-end"
+        closeOnSelect
+        buttonClassName={customClassName}
+      >
         {MENU_ITEMS.map((item) => {
           if (item.shouldRender === false) return null;
           return (
             <CustomMenu.MenuItem
               key={item.key}
               onClick={() => {
-                captureClick({
-                  elementName: MODULE_TRACKER_ELEMENTS.QUICK_ACTIONS,
-                });
                 item.action();
               }}
               className={cn(
                 "flex items-center gap-2",
                 {
-                  "text-custom-text-400": item.disabled,
+                  "text-placeholder": item.disabled,
                 },
                 item.className
               )}
               disabled={item.disabled}
             >
-              {item.icon && <item.icon className={cn("h-3 w-3", item.iconClassName)} />}
+              {item.icon && <item.icon className={cn("h-3 w-3 flex-shrink-0", item.iconClassName)} />}
               <div>
                 <h5>{item.title}</h5>
                 {item.description && (
                   <p
-                    className={cn("text-custom-text-300 whitespace-pre-line", {
-                      "text-custom-text-400": item.disabled,
+                    className={cn("whitespace-pre-line text-tertiary", {
+                      "text-placeholder": item.disabled,
                     })}
                   >
                     {item.description}
diff --git a/apps/web/core/components/modules/select/index.ts b/apps/web/core/components/modules/select/index.ts
index ed1ec7efa..1e350bd8a 100644
--- a/apps/web/core/components/modules/select/index.ts
+++ b/apps/web/core/components/modules/select/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./status";
diff --git a/apps/web/core/components/modules/select/status.tsx b/apps/web/core/components/modules/select/status.tsx
index b94e48342..e62b59a73 100644
--- a/apps/web/core/components/modules/select/status.tsx
+++ b/apps/web/core/components/modules/select/status.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 
 // react hook form
@@ -31,14 +37,16 @@ export function ModuleStatusSelect({ control, error, tabIndex }: Props) {
           <CustomSelect
             value={value}
             label={
-              <div className={`flex items-center justify-center gap-2 text-xs py-0.5 ${error ? "text-red-500" : ""}`}>
+              <div
+                className={`flex items-center justify-center gap-2 py-0.5 text-11 ${error ? "text-danger-primary" : ""}`}
+              >
                 {value ? (
                   <ModuleStatusIcon status={value} />
                 ) : (
-                  <StatePropertyIcon className={`h-3 w-3 ${error ? "text-red-500" : "text-custom-text-200"}`} />
+                  <StatePropertyIcon className={`h-3 w-3 ${error ? "text-danger-primary" : "text-secondary"}`} />
                 )}
                 {(selectedValue && t(selectedValue?.i18n_label)) ?? (
-                  <span className={`${error ? "text-red-500" : "text-custom-text-200"}`}>Status</span>
+                  <span className={`${error ? "text-danger-primary" : "text-secondary"}`}>Status</span>
                 )}
               </div>
             }
diff --git a/apps/web/core/components/modules/sidebar-select/index.ts b/apps/web/core/components/modules/sidebar-select/index.ts
index 2d2ba0d91..81b879286 100644
--- a/apps/web/core/components/modules/sidebar-select/index.ts
+++ b/apps/web/core/components/modules/sidebar-select/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./select-status";
diff --git a/apps/web/core/components/modules/sidebar-select/select-status.tsx b/apps/web/core/components/modules/sidebar-select/select-status.tsx
index 59630a15c..541e31592 100644
--- a/apps/web/core/components/modules/sidebar-select/select-status.tsx
+++ b/apps/web/core/components/modules/sidebar-select/select-status.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // react
 import React from "react";
 // react-hook-form
@@ -23,7 +29,7 @@ export function SidebarStatusSelect({ control, submitChanges, watch }: Props) {
   const { t } = useTranslation();
   return (
     <div className="flex flex-wrap items-center py-2">
-      <div className="flex items-center gap-x-2 text-sm sm:basis-1/2">
+      <div className="flex items-center gap-x-2 text-13 sm:basis-1/2">
         <StatePropertyIcon className="h-4 w-4 flex-shrink-0" />
         <p>Status</p>
       </div>
@@ -34,7 +40,7 @@ export function SidebarStatusSelect({ control, submitChanges, watch }: Props) {
           render={({ field: { value } }) => (
             <CustomSelect
               label={
-                <span className={`flex items-center gap-2 text-left capitalize ${value ? "" : "text-custom-text-100"}`}>
+                <span className={`flex items-center gap-2 text-left capitalize ${value ? "" : "text-primary"}`}>
                   <span
                     className="h-2 w-2 flex-shrink-0 rounded-full"
                     style={{
diff --git a/apps/web/core/components/navigation/app-rail-root.tsx b/apps/web/core/components/navigation/app-rail-root.tsx
index e2c23ef9e..009e45e03 100644
--- a/apps/web/core/components/navigation/app-rail-root.tsx
+++ b/apps/web/core/components/navigation/app-rail-root.tsx
@@ -1,7 +1,15 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+"use client";
 import { observer } from "mobx-react";
 import { useParams, usePathname } from "next/navigation";
-import { Check, SettingsIcon } from "lucide-react";
+import { SettingsIcon } from "lucide-react";
 import { ContextMenu } from "@plane/propel/context-menu";
+import { CheckIcon } from "@plane/propel/icons";
 import { cn } from "@plane/utils";
 // components
 import { AppSidebarItem } from "@/components/sidebar/sidebar-item";
@@ -13,21 +21,21 @@ import { DesktopSidebarWorkspaceMenu } from "@/plane-web/components/desktop";
 // local imports
 import { AppSidebarItemsRoot } from "./items-root";
 
-export const AppRailRoot = observer(function AppRailRoot() {
+export const AppRailRoot = observer(() => {
   // router
-  const { workspaceSlug } = useParams();
+  const { workspaceSlug, projectId } = useParams();
   const pathname = usePathname();
   // preferences
   const { preferences, updateDisplayMode } = useAppRailPreferences();
   const { isCollapsed, toggleAppRail } = useAppRailVisibility();
-
-  const isSettingsPath = pathname.includes(`/${workspaceSlug}/settings`);
+  // derived values
+  const isWorkspaceSettingsPath = pathname.includes(`/${workspaceSlug}/settings`) && !projectId;
   const showLabel = preferences.displayMode === "icon_with_label";
   const railWidth = showLabel ? "3.75rem" : "3rem";
 
   return (
     <div
-      className="h-full flex-shrink-0 transition-all ease-in-out duration-300 z-[26]"
+      className="z-[26] h-full flex-shrink-0 bg-canvas transition-all duration-300 ease-in-out"
       style={{
         width: railWidth,
         display: "block",
@@ -35,7 +43,7 @@ export const AppRailRoot = observer(function AppRailRoot() {
     >
       <ContextMenu>
         <ContextMenu.Trigger className="h-full">
-          <div className="flex flex-col justify-between gap-4 px-2 py-3 h-full">
+          <div className="flex h-full flex-col justify-between gap-4 px-2 py-3">
             <div
               className={cn("flex flex-col", {
                 "gap-4": showLabel,
@@ -44,13 +52,13 @@ export const AppRailRoot = observer(function AppRailRoot() {
             >
               <DesktopSidebarWorkspaceMenu />
               <AppSidebarItemsRoot showLabel={showLabel} />
-              <div className="border-t border-custom-sidebar-border-300 mx-2" />
+              <div className="mx-2 border-t border-strong" />
               <AppSidebarItem
                 item={{
                   label: "Settings",
-                  icon: <SettingsIcon className="size-4" />,
+                  icon: <SettingsIcon className="size-5" />,
                   href: `/${workspaceSlug}/settings`,
-                  isActive: isSettingsPath,
+                  isActive: isWorkspaceSettingsPath,
                   showLabel,
                 }}
               />
@@ -60,20 +68,20 @@ export const AppRailRoot = observer(function AppRailRoot() {
         <ContextMenu.Portal>
           <ContextMenu.Content positionerClassName="z-30" className="outline-none">
             <ContextMenu.Item onClick={() => updateDisplayMode("icon_only")}>
-              <div className="flex items-center justify-between w-full gap-2">
-                <span className="text-xs">Icon only</span>
-                {preferences.displayMode === "icon_only" && <Check className="size-3.5" />}
+              <div className="flex w-full items-center justify-between gap-2">
+                <span className="text-11">Icon only</span>
+                {preferences.displayMode === "icon_only" && <CheckIcon className="size-3.5" />}
               </div>
             </ContextMenu.Item>
             <ContextMenu.Item onClick={() => updateDisplayMode("icon_with_label")}>
-              <div className="flex items-center justify-between w-full gap-2">
-                <span className="text-xs">Icon with name</span>
-                {preferences.displayMode === "icon_with_label" && <Check className="size-3.5" />}
+              <div className="flex w-full items-center justify-between gap-2">
+                <span className="text-11">Icon with name</span>
+                {preferences.displayMode === "icon_with_label" && <CheckIcon className="size-3.5" />}
               </div>
             </ContextMenu.Item>
             <ContextMenu.Separator />
             <ContextMenu.Item onClick={toggleAppRail}>
-              <span className="text-xs">{isCollapsed ? "Dock App Rail" : "Undock App Rail"}</span>
+              <span className="text-11">{isCollapsed ? "Dock App Rail" : "Undock App Rail"}</span>
             </ContextMenu.Item>
           </ContextMenu.Content>
         </ContextMenu.Portal>
diff --git a/apps/web/core/components/navigation/customize-navigation-dialog.tsx b/apps/web/core/components/navigation/customize-navigation-dialog.tsx
index bd1cc9ddc..b4390bd01 100644
--- a/apps/web/core/components/navigation/customize-navigation-dialog.tsx
+++ b/apps/web/core/components/navigation/customize-navigation-dialog.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useCallback, useMemo, useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
@@ -174,19 +179,19 @@ export const CustomizeNavigationDialog = observer(function CustomizeNavigationDi
 
   return (
     <ModalCore isOpen={isOpen} handleClose={onClose} position={EModalPosition.CENTER} width={EModalWidth.XXL}>
-      <div className="flex flex-col max-h-[90vh] bg-custom-background-100 rounded-lg">
+      <div className="flex max-h-[90vh] flex-col rounded-lg bg-surface-1">
         {/* Header */}
-        <div className="flex justify-between px-6 py-4">
+        <div className="flex justify-between px-6 pt-4">
           <div>
-            <h2 className="text-xl font-semibold text-custom-text-100">{t("customize_navigation")}</h2>
-            <p className="mt-1 text-sm text-custom-text-300">
+            <h2 className="text-18 font-semibold text-primary">{t("customize_navigation")}</h2>
+            <p className="mt-1 text-13 text-tertiary">
               Selected items will always stay visible in your sidebar. You can still find the others anytime from the
               More menu. These changes are personal to you and won&apos;t affect anyone else on your workspace.
             </p>
           </div>
           <button
             onClick={onClose}
-            className="flex-shrink-0 size-5 flex items-center justify-center rounded hover:bg-custom-background-80 text-custom-text-400"
+            className="flex size-5 flex-shrink-0 items-center justify-center rounded-sm text-placeholder hover:bg-layer-1"
             aria-label={t("close")}
           >
             <X className="size-4" />
@@ -194,26 +199,26 @@ export const CustomizeNavigationDialog = observer(function CustomizeNavigationDi
         </div>
 
         {/* Content */}
-        <div className="flex-1 overflow-y-auto px-6 py-4 space-y-4">
+        <div className="flex-1 space-y-4 overflow-y-auto px-6 py-4">
           {/* Personal Section */}
           <div className="flex flex-col gap-2">
-            <h3 className="text-sm font-semibold text-custom-text-400">{t("personal")}</h3>
-            <div className="border border-custom-border-200 rounded-md py-2 bg-custom-background-90">
+            <h3 className="text-13 font-semibold text-placeholder">{t("personal")}</h3>
+            <div className="rounded-md border border-subtle bg-surface-2 py-2">
               <Sortable
                 data={personalItems}
                 onChange={handlePersonalReorder}
                 keyExtractor={(item) => item.key}
                 id="personal-enabled-items"
                 render={(item) => (
-                  <div className="flex items-center gap-2 px-2 py-1.5 rounded-md hover:bg-custom-background-90 transition-all duration-200">
-                    <GripVertical className="size-4 text-custom-text-400 cursor-grab active:cursor-grabbing transition-colors" />
+                  <div className="flex items-center gap-2 rounded-md px-2 py-1.5 transition-all duration-200 hover:bg-surface-2">
+                    <GripVertical className="size-4 cursor-grab text-placeholder transition-colors active:cursor-grabbing" />
                     <Checkbox
                       checked={!!personalPreferences.items[item.key]?.enabled}
                       onChange={(e) => togglePersonalItem(item.key, e.target.checked)}
                     />
-                    <div className="flex items-center gap-2 flex-1">
+                    <div className="flex flex-1 items-center gap-2">
                       {getSidebarNavigationItemIcon(item.key)}
-                      <label className="text-sm text-custom-text-200 flex-1 cursor-pointer">
+                      <label className="flex-1 cursor-pointer text-13 text-primary">
                         {t(item.labelTranslationKey)}
                       </label>
                     </div>
@@ -225,8 +230,8 @@ export const CustomizeNavigationDialog = observer(function CustomizeNavigationDi
 
           {/* Workspace Section */}
           <div className="flex flex-col gap-2">
-            <h3 className="text-sm font-semibold text-custom-text-400">{t("workspace")}</h3>
-            <div className="border border-custom-border-200 rounded-md py-2 bg-custom-background-90">
+            <h3 className="text-13 font-semibold text-placeholder">{t("workspace")}</h3>
+            <div className="rounded-md border border-subtle bg-surface-2 py-2">
               {/* Pinned Items - Draggable */}
               <Sortable
                 data={workspaceItems}
@@ -236,15 +241,15 @@ export const CustomizeNavigationDialog = observer(function CustomizeNavigationDi
                 render={(item) => {
                   const icon = getSidebarNavigationItemIcon(item.key);
                   return (
-                    <div className="flex items-center gap-2 px-2 py-1.5 rounded-md hover:bg-custom-background-90 group transition-all duration-200">
-                      <GripVertical className="size-4 text-custom-text-400 cursor-grab active:cursor-grabbing transition-colors" />
+                    <div className="group flex items-center gap-2 rounded-md px-2 py-1.5 transition-all duration-200 hover:bg-surface-2">
+                      <GripVertical className="size-4 cursor-grab text-placeholder transition-colors active:cursor-grabbing" />
                       <Checkbox
                         checked={!!workspacePreferences.items[item.key]?.is_pinned}
                         onChange={(e) => handleWorkspaceItemToggle(item.key, e.target.checked)}
                       />
-                      <div className="flex items-center gap-2 flex-1">
+                      <div className="flex flex-1 items-center gap-2">
                         {icon}
-                        <span className="text-sm text-custom-text-200">{t(item.labelTranslationKey)}</span>
+                        <span className="text-13 text-primary">{t(item.labelTranslationKey)}</span>
                       </div>
                     </div>
                   );
@@ -255,41 +260,41 @@ export const CustomizeNavigationDialog = observer(function CustomizeNavigationDi
 
           {/* Projects Section */}
           <div className="flex flex-col gap-2">
-            <h3 className="text-sm font-semibold text-custom-text-400">{t("projects")}</h3>
+            <h3 className="text-13 font-semibold text-placeholder">{t("projects")}</h3>
 
-            <div className="border border-custom-border-200 rounded-md px-2 py-2 bg-custom-background-90">
+            <div className="rounded-md border border-subtle bg-surface-2 px-2 py-2">
               <div className="space-y-3">
                 {/* Navigation Mode Radio Buttons */}
                 <div className="space-y-2">
-                  <label className="flex gap-2 px-2 py-1.5 rounded-md hover:bg-custom-background-90 cursor-pointer">
+                  <label className="flex cursor-pointer gap-2 rounded-md px-2 py-1.5 hover:bg-surface-2">
                     <input
                       type="radio"
                       name="navigation-mode"
-                      value="accordion"
-                      checked={projectPreferences.navigationMode === "accordion"}
-                      onChange={() => updateNavigationMode("accordion")}
-                      className="size-4 text-custom-primary-100 focus:ring-custom-primary-100 mt-1"
+                      value="ACCORDION"
+                      checked={projectPreferences.navigationMode === "ACCORDION"}
+                      onChange={() => updateNavigationMode("ACCORDION")}
+                      className="mt-1 size-4 text-accent-primary focus:ring-accent-strong"
                     />
                     <div className="flex-1">
-                      <div className="text-sm text-custom-text-200">{t("accordion_navigation_control")}</div>
-                      <div className="text-xs text-custom-text-300">
+                      <div className="text-13 text-primary">{t("accordion_navigation_control")}</div>
+                      <div className="text-11 text-secondary">
                         Feature tabs will appear as nested items under project and acts as accordion.
                       </div>
                     </div>
                   </label>
 
-                  <label className="flex gap-2 px-2 py-1.5 rounded-md hover:bg-custom-background-90 cursor-pointer">
+                  <label className="flex cursor-pointer gap-2 rounded-md px-2 py-1.5 hover:bg-surface-2">
                     <input
                       type="radio"
                       name="navigation-mode"
-                      value="horizontal"
-                      checked={projectPreferences.navigationMode === "horizontal"}
-                      onChange={() => updateNavigationMode("horizontal")}
-                      className="size-4 text-custom-primary-100 focus:ring-custom-primary-100 mt-1"
+                      value="TABBED"
+                      checked={projectPreferences.navigationMode === "TABBED"}
+                      onChange={() => updateNavigationMode("TABBED")}
+                      className="mt-1 size-4 text-accent-primary focus:ring-accent-strong"
                     />
                     <div className="flex-1">
-                      <div className="text-sm text-custom-text-200">{t("horizontal_navigation_bar")}</div>
-                      <div className="text-xs text-custom-text-300">
+                      <div className="text-13 text-primary">{t("horizontal_navigation_bar")}</div>
+                      <div className="text-11 text-secondary">
                         Feature tabs will appear as horizontal tabs inside a project.
                       </div>
                     </div>
@@ -297,20 +302,20 @@ export const CustomizeNavigationDialog = observer(function CustomizeNavigationDi
                 </div>
 
                 {/* Limited Projects Checkbox */}
-                <div className="space-y-2">
-                  <label className="flex items-center gap-2 px-2 py-1.5 rounded-md hover:bg-custom-background-90 cursor-pointer">
+                <div className="space-y-1">
+                  <label className="flex cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 hover:bg-surface-2">
                     <Checkbox
                       checked={projectPreferences.showLimitedProjects}
                       onChange={(e) => updateShowLimitedProjects(e.target.checked)}
                     />
-                    <span className="text-sm text-custom-text-200">{t("show_limited_projects_on_sidebar")}</span>
+                    <span className="text-13 text-primary">{t("show_limited_projects_on_sidebar")}</span>
                   </label>
 
                   {projectPreferences.showLimitedProjects && (
                     <div className="pl-8">
-                      <div className="flex flex-col gap-1 w-full">
-                        <div className="flex flex-col gap-2 w-full">
-                          <label className="text-xs text-custom-text-300 w-full">{t("enter_number_of_projects")}</label>
+                      <div className="flex w-full flex-col gap-1">
+                        <div className="flex w-full flex-col gap-2 pb-1.5">
+                          <label className="w-full text-11 text-secondary">{t("enter_number_of_projects")}</label>
                           <input
                             type="number"
                             min="1"
@@ -319,17 +324,17 @@ export const CustomizeNavigationDialog = observer(function CustomizeNavigationDi
                             onKeyDown={handleKeyDown}
                             onChange={(e) => handleProjectCountChange(e.target.value)}
                             className={cn(
-                              "w-full px-2 py-1 text-sm rounded-md",
-                              "bg-custom-background-90 border",
-                              "text-custom-text-200",
+                              "w-full rounded-md px-2 py-1 text-13",
+                              "border bg-surface-2",
+                              "text-secondary",
                               parseInt(projectCountInput) >= 1
-                                ? "border-custom-border-300 focus:border-custom-primary-100 focus:ring-1 focus:ring-custom-primary-100"
-                                : "border-red-500 focus:border-red-500 focus:ring-1 focus:ring-red-500"
+                                ? "border-strong focus:border-accent-strong focus:ring-1 focus:ring-accent-strong"
+                                : "border-danger-strong focus:border-danger-strong focus:ring-1 focus:ring-danger-strong"
                             )}
                           />
                         </div>
                         {parseInt(projectCountInput) < 1 && projectCountInput !== "" && (
-                          <span className="text-xs text-red-500 pl-0.5">Minimum value is 1</span>
+                          <span className="pl-0.5 text-11 text-danger-primary">Minimum value is 1</span>
                         )}
                       </div>
                     </div>
diff --git a/apps/web/core/components/navigation/index.ts b/apps/web/core/components/navigation/index.ts
index 2494d6557..db9f557cf 100644
--- a/apps/web/core/components/navigation/index.ts
+++ b/apps/web/core/components/navigation/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./app-rail-root";
 export * from "./tab-navigation-root";
 export * from "./top-nav-power-k";
diff --git a/apps/web/core/components/navigation/items-root.tsx b/apps/web/core/components/navigation/items-root.tsx
index da36dca5d..5ba8e1e33 100644
--- a/apps/web/core/components/navigation/items-root.tsx
+++ b/apps/web/core/components/navigation/items-root.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // components/AppSidebarItemsRoot.tsx
 
 import React from "react";
diff --git a/apps/web/core/components/navigation/project-actions-menu.tsx b/apps/web/core/components/navigation/project-actions-menu.tsx
index 2459495c8..b097dc5bc 100644
--- a/apps/web/core/components/navigation/project-actions-menu.tsx
+++ b/apps/web/core/components/navigation/project-actions-menu.tsx
@@ -1,10 +1,16 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useState, useRef } from "react";
 import { useNavigate } from "react-router";
-import { LinkIcon, LogOut, MoreHorizontal, Settings, Share2, ArchiveIcon } from "lucide-react";
+import { LogOut, MoreHorizontal, Settings, Share2, ArchiveIcon } from "lucide-react";
 // plane imports
 import { MEMBER_TRACKER_ELEMENTS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
+import { LinkIcon } from "@plane/propel/icons";
 import { CustomMenu } from "@plane/ui";
 
 type Props = {
@@ -42,7 +48,7 @@ export function ProjectActionsMenu({
       customButton={
         <span
           ref={actionSectionRef}
-          className="grid place-items-center p-0.5 text-custom-sidebar-text-400 hover:bg-custom-sidebar-background-90 rounded"
+          className="grid place-items-center rounded-sm p-0.5 text-placeholder hover:bg-layer-1"
           onClick={() => setIsMenuActive(!isMenuActive)}
         >
           <MoreHorizontal className="size-4" />
@@ -60,7 +66,7 @@ export function ProjectActionsMenu({
       {isAdmin && (
         <CustomMenu.MenuItem onClick={onPublishModal}>
           <div className="relative flex flex-shrink-0 items-center justify-start gap-2">
-            <div className="flex h-4 w-4 cursor-pointer items-center justify-center rounded text-custom-sidebar-text-200 transition-all duration-300 hover:bg-custom-sidebar-background-80">
+            <div className="flex h-4 w-4 cursor-pointer items-center justify-center rounded-sm text-secondary transition-all duration-300 hover:bg-layer-1">
               <Share2 className="h-3.5 w-3.5 stroke-[1.5]" />
             </div>
             <div>{t("publish_project")}</div>
@@ -79,7 +85,7 @@ export function ProjectActionsMenu({
             navigate(`/${workspaceSlug}/projects/${project?.id}/archives/issues`);
           }}
         >
-          <div className="flex items-center justify-start gap-2 cursor-pointer">
+          <div className="flex cursor-pointer items-center justify-start gap-2">
             <ArchiveIcon className="h-3.5 w-3.5 stroke-[1.5]" />
             <span>{t("archives")}</span>
           </div>
@@ -90,7 +96,7 @@ export function ProjectActionsMenu({
           navigate(`/${workspaceSlug}/settings/projects/${project?.id}`);
         }}
       >
-        <div className="flex items-center justify-start gap-2 cursor-pointer">
+        <div className="flex cursor-pointer items-center justify-start gap-2">
           <Settings className="h-3.5 w-3.5 stroke-[1.5]" />
           <span>{t("settings")}</span>
         </div>
diff --git a/apps/web/core/components/navigation/project-header-button.tsx b/apps/web/core/components/navigation/project-header-button.tsx
index eb0341540..dfea9918c 100644
--- a/apps/web/core/components/navigation/project-header-button.tsx
+++ b/apps/web/core/components/navigation/project-header-button.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { TPartialProject } from "@/plane-web/types";
 // plane propel imports
 import { Logo } from "@plane/propel/emoji-icon-picker";
@@ -11,16 +17,16 @@ type TProjectHeaderButtonProps = {
 export function ProjectHeaderButton({ project }: TProjectHeaderButtonProps) {
   return (
     <Tooltip tooltipContent={project.name} position="bottom">
-      <div className="relative flex items-center text-left select-none w-full max-w-48 pr-1">
-        <div className="size-7 rounded-md bg-custom-background-90 flex items-center justify-center flex-shrink-0">
+      <div className="relative flex w-full max-w-48 items-center pr-1 text-left select-none">
+        <div className="flex size-7 flex-shrink-0 items-center justify-center rounded-md bg-layer-1">
           <Logo logo={project.logo_props} size={16} />
         </div>
-        <div className="relative flex-1 min-w-0">
-          <p className="truncate text-base font-medium text-custom-sidebar-text-200 px-2">{project.name}</p>
-          <div className="absolute right-0 top-0 bottom-0 flex items-center justify-end pointer-events-none opacity-0 group-hover:opacity-100 transition-opacity duration-200">
-            <div className="relative h-full w-8 flex items-center justify-end">
-              <div className="absolute inset-0 bg-gradient-to-r from-transparent via-custom-background-90 to-custom-background-90 rounded-r" />
-              <ChevronDownIcon className="relative z-10 size-4 text-custom-text-300" />
+        <div className="relative min-w-0 flex-1 hover:rounded">
+          <p className="truncate px-2 text-14 font-medium text-secondary">{project.name}</p>
+          <div className="pointer-events-none absolute top-0 right-0 bottom-0 flex items-center justify-end opacity-0 transition-opacity duration-200 group-hover:opacity-100">
+            <div className="relative flex h-full w-8 items-center justify-end">
+              <div className="absolute inset-0 rounded-r bg-gradient-to-r from-transparent to-surface-2" />
+              <ChevronDownIcon className="relative z-10 size-4 text-tertiary" />
             </div>
           </div>
         </div>
diff --git a/apps/web/core/components/navigation/project-header.tsx b/apps/web/core/components/navigation/project-header.tsx
index 6f991899e..134c8d303 100644
--- a/apps/web/core/components/navigation/project-header.tsx
+++ b/apps/web/core/components/navigation/project-header.tsx
@@ -1,19 +1,24 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useCallback, useMemo } from "react";
 import { observer } from "mobx-react";
-// plane ui imports
+// plane imports
+import { ProjectIcon } from "@plane/propel/icons";
 import type { ICustomSearchSelectOption } from "@plane/types";
 import { CustomSearchSelect } from "@plane/ui";
-// plane propel imports
-import { ProjectIcon } from "@plane/propel/icons";
 // hooks
-import { useAppRouter } from "@/hooks/use-app-router";
 import { useProject } from "@/hooks/store/use-project";
 import { useUserPermissions } from "@/hooks/store/user";
+import { useAppRouter } from "@/hooks/use-app-router";
+// plane web imports
 import { useNavigationItems } from "@/plane-web/components/navigations";
-// local components
+// local imports
 import { SwitcherLabel } from "../common/switcher-label";
 import { ProjectHeaderButton } from "./project-header-button";
-// utils
 import { getTabUrl } from "./tab-navigation-utils";
 import { useTabPreferences } from "./use-tab-preferences";
 
@@ -101,7 +106,7 @@ export const ProjectHeader = observer(function ProjectHeader(props: TProjectHead
       onChange={handleProjectChange}
       customButton={currentProjectDetails ? <ProjectHeaderButton project={currentProjectDetails} /> : null}
       className="h-full rounded"
-      customButtonClassName="group flex items-center gap-0.5 rounded hover:bg-custom-background-90 outline-none cursor-pointer h-full"
+      customButtonClassName="group flex items-center gap-0.5 rounded-sm hover:bg-surface-2 outline-none cursor-pointer h-full"
     />
   );
 });
diff --git a/apps/web/core/components/navigation/tab-navigation-overflow-menu.tsx b/apps/web/core/components/navigation/tab-navigation-overflow-menu.tsx
index 5eacf3fd0..dfbf31c8c 100644
--- a/apps/web/core/components/navigation/tab-navigation-overflow-menu.tsx
+++ b/apps/web/core/components/navigation/tab-navigation-overflow-menu.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 import { Link } from "react-router";
 import { MoreHorizontal, Pin } from "lucide-react";
@@ -33,8 +39,8 @@ export function TabNavigationOverflowMenu({ overflowItems, isActive, tabPreferen
       buttonClassName="!p-1.5"
       optionsClassName="min-w-[200px] space-y-1"
       customButton={
-        <div className="flex items-center justify-center rounded-md p-1 hover:bg-custom-background-80 transition-colors">
-          <MoreHorizontal className="h-4 w-4 text-custom-text-200" />
+        <div className="flex items-center justify-center rounded-md p-1 transition-colors hover:bg-layer-1">
+          <MoreHorizontal className="h-4 w-4 text-secondary" />
         </div>
       }
     >
@@ -45,10 +51,10 @@ export function TabNavigationOverflowMenu({ overflowItems, isActive, tabPreferen
         const isDefault = item.key === tabPreferences.defaultTab;
 
         return (
-          <Menu.MenuItem key={`${item.key}-overflow-${itemIsActive ? "active" : "inactive"}`} className="p-0 w-full">
-            <div className="flex items-center justify-between w-full group/menu-item">
-              <Link to={item.href} className="flex-1 min-w-0 w-full p-1">
-                <span className="text-xs">{t(item.i18n_key)}</span>
+          <Menu.MenuItem key={`${item.key}-overflow-${itemIsActive ? "active" : "inactive"}`} className="w-full p-0">
+            <div className="group/menu-item flex w-full items-center justify-between">
+              <Link to={item.href} className="w-full min-w-0 flex-1 p-1">
+                <span className="text-11">{t(item.i18n_key)}</span>
               </Link>
               <div className="flex items-center">
                 {/* Show Eye icon ONLY for user-hidden items */}
@@ -60,7 +66,7 @@ export function TabNavigationOverflowMenu({ overflowItems, isActive, tabPreferen
                       e.preventDefault();
                       onShow(item.key);
                     }}
-                    className="invisible group-hover/menu-item:visible p-1 rounded text-custom-text-300 hover:text-custom-text-100 transition-colors"
+                    className="invisible rounded-sm p-1 text-tertiary transition-colors group-hover/menu-item:visible hover:text-primary"
                     title="Show"
                   >
                     <Pin className="size-3" />
@@ -74,7 +80,7 @@ export function TabNavigationOverflowMenu({ overflowItems, isActive, tabPreferen
                       onToggleDefault(item.key);
                     }}
                     className={cn(
-                      "invisible group-hover/menu-item:visible p-1 rounded text-custom-text-300 hover:text-custom-text-100 transition-colors",
+                      "invisible rounded-sm p-1 text-tertiary transition-colors group-hover/menu-item:visible hover:text-primary",
                       {
                         visible: isDefault,
                       }
diff --git a/apps/web/core/components/navigation/tab-navigation-root.tsx b/apps/web/core/components/navigation/tab-navigation-root.tsx
index 20740bb89..f3bd16c60 100644
--- a/apps/web/core/components/navigation/tab-navigation-root.tsx
+++ b/apps/web/core/components/navigation/tab-navigation-root.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React, { useEffect } from "react";
 import { observer } from "mobx-react";
 import { useParams, useLocation, Link, useNavigate } from "react-router";
@@ -165,8 +170,8 @@ export const TabNavigationRoot = observer(function TabNavigationRoot(props: TTab
       />
 
       {/* container for the tab navigation */}
-      <div className="flex items-center gap-3 overflow-hidden size-full">
-        <div className="flex items-center gap-2 shrink-0">
+      <div className="flex size-full items-center gap-3 overflow-hidden">
+        <div className="flex shrink-0 items-center gap-2">
           <ProjectHeader workspaceSlug={workspaceSlug} projectId={projectId} />
           <div className="shrink-0">
             <ProjectActionsMenu
@@ -181,9 +186,9 @@ export const TabNavigationRoot = observer(function TabNavigationRoot(props: TTab
           </div>
         </div>
 
-        <div className="shrink-0 h-5 w-1 border-l border-custom-border-200" />
+        <div className="h-5 w-1 shrink-0 border-l border-subtle" />
 
-        <div ref={containerRef} className="flex items-center h-full flex-1 min-w-0 overflow-hidden">
+        <div ref={containerRef} className="flex h-full min-w-0 flex-1 items-center overflow-hidden">
           <TabNavigationList className="h-full">
             {/* Render visible tab items */}
             {visibleItems.map((item) => {
@@ -218,7 +223,7 @@ export const TabNavigationRoot = observer(function TabNavigationRoot(props: TTab
           </TabNavigationList>
 
           {hasOverflow && (
-            <div className="absolute opacity-0 pointer-events-none -z-10">
+            <div className="pointer-events-none absolute -z-10 opacity-0">
               {visibleNavigationItems.map((item) => {
                 const itemIsActive = isActive(item);
                 const originalIndex = allNavigationItems.indexOf(item);
diff --git a/apps/web/core/components/navigation/tab-navigation-utils.ts b/apps/web/core/components/navigation/tab-navigation-utils.ts
index a3cffe01d..de8fa1423 100644
--- a/apps/web/core/components/navigation/tab-navigation-utils.ts
+++ b/apps/web/core/components/navigation/tab-navigation-utils.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // Tab preferences type
 export type TTabPreferences = {
   defaultTab: string;
diff --git a/apps/web/core/components/navigation/tab-navigation-visible-item.tsx b/apps/web/core/components/navigation/tab-navigation-visible-item.tsx
index 228598cf5..dc53b846c 100644
--- a/apps/web/core/components/navigation/tab-navigation-visible-item.tsx
+++ b/apps/web/core/components/navigation/tab-navigation-visible-item.tsx
@@ -1,4 +1,9 @@
-import React from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { Link } from "react-router";
 import { PinOff } from "lucide-react";
 // plane imports
@@ -35,9 +40,9 @@ export function TabNavigationVisibleItem({
   const isDefault = item.key === tabPreferences.defaultTab;
 
   return (
-    <div className="relative h-full flex items-center transition-all duration-300">
+    <div className="relative flex h-full items-center transition-all duration-300">
       {isActive && (
-        <span className="absolute bottom-0 w-[80%] left-1/2 -translate-x-1/2 h-0.5 bg-custom-text-300 rounded-t-md transition-all duration-300" />
+        <span className="absolute bottom-0 left-1/2 h-0.5 w-[80%] -translate-x-1/2 rounded-t-md bg-(--text-color-icon-primary) transition-all duration-300" />
       )}
       <div key={`${item.key}-measure`} ref={itemRef}>
         <ContextMenu>
@@ -55,20 +60,20 @@ export function TabNavigationVisibleItem({
                   e.stopPropagation();
                   onToggleDefault(item.key);
                 }}
-                className="flex items-center gap-2 text-custom-text-200 transition-colors cursor-pointer"
+                className="flex cursor-pointer items-center gap-2 text-secondary transition-colors"
               >
-                <SetAsDefaultIcon className="shrink-0 size-3" />
-                <span className="text-xs">{isDefault ? "Clear default" : "Set as default"}</span>
+                <SetAsDefaultIcon className="size-3 shrink-0" />
+                <span className="text-11">{isDefault ? "Clear default" : "Set as default"}</span>
               </ContextMenu.Item>
               <ContextMenu.Item
                 onClick={(e) => {
                   e.stopPropagation();
                   onHide(item.key);
                 }}
-                className="flex items-center gap-2 text-custom-text-200 transition-colors cursor-pointer"
+                className="flex cursor-pointer items-center gap-2 text-secondary transition-colors"
               >
-                <PinOff className="shrink-0 size-3" />
-                <span className="text-xs">Hide in more menu</span>
+                <PinOff className="size-3 shrink-0" />
+                <span className="text-11">Hide in more menu</span>
               </ContextMenu.Item>
             </ContextMenu.Content>
           </ContextMenu.Portal>
diff --git a/apps/web/core/components/navigation/top-nav-power-k.tsx b/apps/web/core/components/navigation/top-nav-power-k.tsx
index 989adfbe9..22825d4b7 100644
--- a/apps/web/core/components/navigation/top-nav-power-k.tsx
+++ b/apps/web/core/components/navigation/top-nav-power-k.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useState, useMemo, useCallback, useEffect } from "react";
 import { Command } from "cmdk";
 import { observer } from "mobx-react";
@@ -15,7 +21,7 @@ import { useUser } from "@/hooks/store/user";
 import { useAppRouter } from "@/hooks/use-app-router";
 import { useExpandableSearch } from "@/hooks/use-expandable-search";
 
-export const TopNavPowerK = observer(function TopNavPowerK() {
+export const TopNavPowerK = observer(() => {
   // router
   const router = useAppRouter();
   const params = useParams();
@@ -203,21 +209,21 @@ export const TopNavPowerK = observer(function TopNavPowerK() {
   return (
     <div ref={containerRef} className="relative">
       <div
-        className={cn("relative w-[364px] flex items-center transition-all duration-300 ease-in-out z-30", {
+        className={cn("relative z-30 flex w-[364px] items-center transition-all duration-300 ease-in-out", {
           "w-[554px]": isOpen,
         })}
       >
         <div
           className={cn(
-            "flex items-center w-full h-7 p-2 rounded-md bg-custom-sidebar-background-80 hover:bg-custom-background-80 border border-transparent transition-colors duration-200",
+            "flex h-7 w-full items-center rounded-lg border border-subtle-1 bg-layer-2 p-2 transition-colors duration-200",
             {
-              "border-custom-border-200": isOpen,
+              "bg-layer-1": isOpen,
             }
           )}
           onClick={() => inputRef.current?.focus()}
           role="button"
         >
-          <SearchIcon className="shrink-0 size-3.5 text-custom-text-350 mr-2" />
+          <SearchIcon className="mr-2 size-3.5 shrink-0 text-placeholder" />
           <input
             ref={inputRef}
             type="text"
@@ -230,21 +236,21 @@ export const TopNavPowerK = observer(function TopNavPowerK() {
             onFocus={handleFocus}
             onKeyDown={handleKeyDown}
             placeholder="Search commands..."
-            className="flex-1 bg-transparent text-sm text-custom-text-100 placeholder-custom-text-350 outline-none min-w-0"
+            className="placeholder-text-placeholder min-w-0 flex-1 bg-transparent text-13 text-primary outline-none"
           />
           {searchTerm && (
-            <button type="button" onClick={handleClear} className="shrink-0 ml-2">
-              <CloseIcon className="size-3.5 text-custom-text-400 hover:text-custom-text-100" />
+            <button type="button" onClick={handleClear} className="ml-2 shrink-0">
+              <CloseIcon className="size-3.5 text-placeholder hover:text-primary" />
             </button>
           )}
         </div>
       </div>
       <div
         className={cn(
-          "absolute -top-[6px] left-1/2 -translate-x-1/2  bg-custom-background-100 border border-custom-border-200 rounded-md shadow-lg overflow-hidden z-20  transition-all duration-300 ease-in-out flex flex-col px-0 pt-10",
+          "shadow-lg absolute -top-[6px] left-1/2 z-20 flex -translate-x-1/2 flex-col overflow-hidden rounded-md border border-subtle bg-surface-1 px-0 pt-10 transition-all duration-300 ease-in-out",
           {
-            "opacity-100 w-[574px] max-h-[80vh]": isOpen,
-            "opacity-0 w-0 h-0": !isOpen,
+            "max-h-[80vh] w-[574px] opacity-100": isOpen,
+            "h-0 w-0 opacity-0": !isOpen,
           }
         )}
       >
@@ -256,14 +262,14 @@ export const TopNavPowerK = observer(function TopNavPowerK() {
               return 0;
             }}
             shouldFilter={searchTerm.length > 0}
-            className="w-full flex flex-col h-full"
+            className="flex h-full w-full flex-col"
           >
             <Command.Input value={searchTerm} hidden />
             {/* We can skip the header input since we have the main input above,
                      but we might need the context indicator if we want that feature.
                      For now, let's just render the list. */}
 
-            <Command.List className="vertical-scrollbar scrollbar-sm max-h-[60vh] overflow-y-auto outline-none px-2 pb-4">
+            <Command.List className="vertical-scrollbar scrollbar-sm max-h-[60vh] overflow-y-auto px-2 pb-4 outline-none">
               <ProjectsAppPowerKCommandsList
                 activePage={activePage}
                 context={context}
diff --git a/apps/web/core/components/navigation/use-active-tab.ts b/apps/web/core/components/navigation/use-active-tab.ts
index f01428925..50ca1c6ba 100644
--- a/apps/web/core/components/navigation/use-active-tab.ts
+++ b/apps/web/core/components/navigation/use-active-tab.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useCallback, useMemo } from "react";
 import type { TIssue } from "@plane/types";
 import type { TNavigationItem } from "@/components/navigation/tab-navigation-root";
diff --git a/apps/web/core/components/navigation/use-project-actions.ts b/apps/web/core/components/navigation/use-project-actions.ts
index 24e3fc9fa..1b881278d 100644
--- a/apps/web/core/components/navigation/use-project-actions.ts
+++ b/apps/web/core/components/navigation/use-project-actions.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useCallback, useState } from "react";
 import { setToast, TOAST_TYPE } from "@plane/propel/toast";
 import { copyUrlToClipboard } from "@plane/utils";
diff --git a/apps/web/core/components/navigation/use-responsive-tab-layout.ts b/apps/web/core/components/navigation/use-responsive-tab-layout.ts
index c76724a06..cde061524 100644
--- a/apps/web/core/components/navigation/use-responsive-tab-layout.ts
+++ b/apps/web/core/components/navigation/use-responsive-tab-layout.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import type { TNavigationItem } from "./tab-navigation-root";
 
diff --git a/apps/web/core/components/navigation/use-tab-preferences.ts b/apps/web/core/components/navigation/use-tab-preferences.ts
index 57a610094..a29829eea 100644
--- a/apps/web/core/components/navigation/use-tab-preferences.ts
+++ b/apps/web/core/components/navigation/use-tab-preferences.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useMemo } from "react";
 import { setToast, TOAST_TYPE } from "@plane/propel/toast";
 import { useMember } from "@/hooks/store/use-member";
@@ -23,7 +29,7 @@ export type TTabPreferencesHook = {
  */
 export const useTabPreferences = (workspaceSlug: string, projectId: string): TTabPreferencesHook => {
   const {
-    project: { getProjectMemberPreferences, updateProjectMemberPreferences },
+    project: { getProjectUserProperties, updateProjectUserProperties },
   } = useMember();
   // const { projectUserInfo } = useUserPermissions();
   const { data } = useUser();
@@ -33,21 +39,17 @@ export const useTabPreferences = (workspaceSlug: string, projectId: string): TTa
   const memberId = data?.id || null;
 
   // Get preferences from store
-  const storePreferences = getProjectMemberPreferences(projectId);
+  const storePreferences = getProjectUserProperties(projectId);
+  const defaultTab = storePreferences?.preferences?.navigation?.default_tab || DEFAULT_TAB_KEY;
+  const hideInMoreMenu = storePreferences?.preferences?.navigation?.hide_in_more_menu || [];
 
   // Convert store preferences to component format
   const tabPreferences: TTabPreferences = useMemo(() => {
-    if (storePreferences) {
-      return {
-        defaultTab: storePreferences.default_tab || DEFAULT_TAB_KEY,
-        hiddenTabs: storePreferences.hide_in_more_menu || [],
-      };
-    }
     return {
-      defaultTab: DEFAULT_TAB_KEY,
-      hiddenTabs: [],
+      defaultTab,
+      hiddenTabs: hideInMoreMenu,
     };
-  }, [storePreferences]);
+  }, [defaultTab, hideInMoreMenu]);
 
   const isLoading = !storePreferences && memberId !== null;
 
@@ -55,11 +57,14 @@ export const useTabPreferences = (workspaceSlug: string, projectId: string): TTa
    * Update preferences via store
    */
   const updatePreferences = async (newPreferences: TTabPreferences) => {
-    if (!memberId) return;
-
-    await updateProjectMemberPreferences(workspaceSlug, projectId, memberId, {
-      default_tab: newPreferences.defaultTab,
-      hide_in_more_menu: newPreferences.hiddenTabs,
+    await updateProjectUserProperties(workspaceSlug, projectId, {
+      preferences: {
+        pages: storePreferences?.preferences?.pages || { block_display: false },
+        navigation: {
+          default_tab: newPreferences.defaultTab,
+          hide_in_more_menu: newPreferences.hiddenTabs,
+        },
+      },
     });
   };
 
@@ -77,6 +82,7 @@ export const useTabPreferences = (workspaceSlug: string, projectId: string): TTa
           title: "Success!",
           message: "Default tab updated successfully.",
         });
+        return;
       })
       .catch(() => {
         setToast({
diff --git a/apps/web/core/components/onboarding/create-or-join-workspaces.tsx b/apps/web/core/components/onboarding/create-or-join-workspaces.tsx
index bd6ece861..3fad9e8db 100644
--- a/apps/web/core/components/onboarding/create-or-join-workspaces.tsx
+++ b/apps/web/core/components/onboarding/create-or-join-workspaces.tsx
@@ -1,4 +1,10 @@
-import React, { useEffect, useState } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useEffect, useState } from "react";
 import { observer } from "mobx-react";
 import { OctagonAlert } from "lucide-react";
 // plane imports
@@ -7,8 +13,7 @@ import type { IWorkspaceMemberInvitation, TOnboardingSteps } from "@plane/types"
 import { LogoSpinner } from "@/components/common/logo-spinner";
 // hooks
 import { useUser } from "@/hooks/store/user";
-// plane web helpers
-import { getIsWorkspaceCreationDisabled } from "@/plane-web/helpers/instance.helper";
+import { useInstance } from "@/hooks/store/use-instance";
 // local imports
 import { CreateWorkspace } from "./create-workspace";
 import { Invitations } from "./invitations";
@@ -27,13 +32,14 @@ type Props = {
 };
 
 export const CreateOrJoinWorkspaces = observer(function CreateOrJoinWorkspaces(props: Props) {
-  const { invitations, totalSteps, stepChange, finishOnboarding } = props;
+  const { invitations, stepChange, finishOnboarding } = props;
   // states
   const [currentView, setCurrentView] = useState<ECreateOrJoinWorkspaceViews | null>(null);
   // store hooks
   const { data: user } = useUser();
+  const { config } = useInstance();
   // derived values
-  const isWorkspaceCreationEnabled = getIsWorkspaceCreationDisabled() === false;
+  const isWorkspaceCreationDisabled = config?.is_workspace_creation_disabled ?? false;
 
   useEffect(() => {
     if (invitations.length > 0) {
@@ -51,8 +57,8 @@ export const CreateOrJoinWorkspaces = observer(function CreateOrJoinWorkspaces(p
 
   return (
     <div className="flex h-full w-full">
-      <div className="w-full h-full overflow-auto px-6 py-10 sm:px-7 sm:py-14 md:px-14 lg:px-28">
-        <div className="flex flex-col w-full items-center justify-center p-8 mt-6">
+      <div className="h-full w-full overflow-auto px-6 py-10 sm:px-7 sm:py-14 md:px-14 lg:px-28">
+        <div className="mt-6 flex w-full flex-col items-center justify-center p-8">
           {currentView === ECreateOrJoinWorkspaceViews.WORKSPACE_JOIN ? (
             <Invitations
               invitations={invitations}
@@ -60,7 +66,7 @@ export const CreateOrJoinWorkspaces = observer(function CreateOrJoinWorkspaces(p
               handleCurrentViewChange={() => setCurrentView(ECreateOrJoinWorkspaceViews.WORKSPACE_CREATE)}
             />
           ) : currentView === ECreateOrJoinWorkspaceViews.WORKSPACE_CREATE ? (
-            isWorkspaceCreationEnabled ? (
+            !isWorkspaceCreationDisabled ? (
               <CreateWorkspace
                 stepChange={stepChange}
                 user={user ?? undefined}
@@ -69,8 +75,8 @@ export const CreateOrJoinWorkspaces = observer(function CreateOrJoinWorkspaces(p
               />
             ) : (
               <div className="flex h-96 w-full items-center justify-center">
-                <div className="flex gap-2.5 w-full items-start justify-center text-sm leading-5 mt-4 px-6 py-4 rounded border border-custom-primary-100/20 bg-custom-primary-100/10 text-custom-primary-200">
-                  <OctagonAlert className="flex-shrink-0 size-5 mt-1" />
+                <div className="mt-4 flex w-full items-start justify-center gap-2.5 rounded-sm border border-accent-strong/20 bg-accent-primary/10 px-6 py-4 text-13 leading-5 text-accent-secondary">
+                  <OctagonAlert className="mt-1 size-5 flex-shrink-0" />
                   <span>
                     You don&apos;t seem to have any invites to a workspace and your instance admin has restricted
                     creation of new workspaces. Please ask a workspace owner or admin to invite you to a workspace first
diff --git a/apps/web/core/components/onboarding/create-workspace.tsx b/apps/web/core/components/onboarding/create-workspace.tsx
index 6ed75a7c6..34f7a937c 100644
--- a/apps/web/core/components/onboarding/create-workspace.tsx
+++ b/apps/web/core/components/onboarding/create-workspace.tsx
@@ -1,13 +1,14 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useState } from "react";
 import { observer } from "mobx-react";
 import { Controller, useForm } from "react-hook-form";
 // constants
-import {
-  ORGANIZATION_SIZE,
-  RESTRICTED_URLS,
-  WORKSPACE_TRACKER_EVENTS,
-  WORKSPACE_TRACKER_ELEMENTS,
-} from "@plane/constants";
+import { ORGANIZATION_SIZE, RESTRICTED_URLS } from "@plane/constants";
 // types
 import { useTranslation } from "@plane/i18n";
 import { Button } from "@plane/propel/button";
@@ -15,12 +16,12 @@ import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { IUser, IWorkspace, TOnboardingSteps } from "@plane/types";
 // ui
 import { CustomSelect, Input, Spinner } from "@plane/ui";
+import { validateWorkspaceName, validateSlug } from "@plane/utils";
 // hooks
-import { captureError, captureSuccess } from "@/helpers/event-tracker.helper";
 import { useWorkspace } from "@/hooks/store/use-workspace";
 import { useUserProfile, useUserSettings } from "@/hooks/store/user";
 // services
-import { WorkspaceService } from "@/plane-web/services";
+import { WorkspaceService } from "@/services/workspace.service";
 
 type Props = {
   stepChange: (steps: Partial<TOnboardingSteps>) => Promise<void>;
@@ -61,47 +62,26 @@ export const CreateWorkspace = observer(function CreateWorkspace(props: Props) {
   const handleCreateWorkspace = async (formData: IWorkspace) => {
     if (isSubmitting) return;
 
-    await workspaceService
-      .workspaceSlugCheck(formData.slug)
-      .then(async (res) => {
-        if (res.status === true && !RESTRICTED_URLS.includes(formData.slug)) {
-          setSlugError(false);
-
-          await createWorkspace(formData)
-            .then(async (workspaceResponse) => {
-              setToast({
-                type: TOAST_TYPE.SUCCESS,
-                title: t("workspace_creation.toast.success.title"),
-                message: t("workspace_creation.toast.success.message"),
-              });
-              captureSuccess({
-                eventName: WORKSPACE_TRACKER_EVENTS.create,
-                payload: { slug: formData.slug },
-              });
-              await fetchWorkspaces();
-              await completeStep(workspaceResponse.id);
-            })
-            .catch(() => {
-              captureError({
-                eventName: WORKSPACE_TRACKER_EVENTS.create,
-                payload: { slug: formData.slug },
-                error: new Error("Error creating workspace"),
-              });
-              setToast({
-                type: TOAST_TYPE.ERROR,
-                title: t("workspace_creation.toast.error.title"),
-                message: t("workspace_creation.toast.error.message"),
-              });
-            });
-        } else setSlugError(true);
-      })
-      .catch(() =>
+    try {
+      const res = await workspaceService.workspaceSlugCheck(formData.slug);
+      if (res?.status === true && !RESTRICTED_URLS.includes(formData.slug)) {
+        setSlugError(false);
+        const workspaceResponse = await createWorkspace(formData);
         setToast({
-          type: TOAST_TYPE.ERROR,
-          title: t("workspace_creation.toast.error.title"),
-          message: t("workspace_creation.toast.error.message"),
-        })
-      );
+          type: TOAST_TYPE.SUCCESS,
+          title: t("workspace_creation.toast.success.title"),
+          message: t("workspace_creation.toast.success.message"),
+        });
+        await fetchWorkspaces();
+        await completeStep(workspaceResponse.id);
+      } else setSlugError(true);
+    } catch (_error) {
+      setToast({
+        type: TOAST_TYPE.ERROR,
+        title: t("workspace_creation.toast.error.title"),
+        message: t("workspace_creation.toast.error.message"),
+      });
+    }
   };
 
   const completeStep = async (workspaceId: string) => {
@@ -125,31 +105,31 @@ export const CreateWorkspace = observer(function CreateWorkspace(props: Props) {
       {!!invitedWorkspaces && (
         <>
           <Button
-            variant="link-neutral"
-            size="lg"
-            className="w-full flex items-center gap-2 text-base bg-custom-background-90"
+            variant="ghost"
+            size="xl"
+            className="flex w-full items-center gap-2 bg-surface-2 text-14"
             onClick={handleCurrentViewChange}
           >
             I want to join invited workspaces{" "}
-            <span className="bg-custom-primary-200 h-4 w-4 flex items-center justify-center rounded-sm text-xs font-medium text-white">
+            <span className="flex h-4 w-4 items-center justify-center rounded-xs bg-accent-primary/80 text-11 font-medium text-on-color">
               {invitedWorkspaces}
             </span>
           </Button>
           <div className="mx-auto mt-4 flex items-center sm:w-96">
-            <hr className="w-full border-custom-border-300" />
-            <p className="mx-3 flex-shrink-0 text-center text-sm text-custom-text-400">or</p>
-            <hr className="w-full border-custom-border-300" />
+            <hr className="w-full border-strong" />
+            <p className="mx-3 flex-shrink-0 text-center text-13 text-placeholder">or</p>
+            <hr className="w-full border-strong" />
           </div>
         </>
       )}
-      <div className="text-center space-y-1 py-4 mx-auto">
-        <h3 className="text-3xl font-bold text-custom-text-100">{t("workspace_creation.heading")}</h3>
-        <p className="font-medium text-custom-text-400">{t("workspace_creation.subheading")}</p>
+      <div className="mx-auto space-y-1 py-4 text-center">
+        <h3 className="text-24 font-bold text-primary">{t("workspace_creation.heading")}</h3>
+        <p className="font-medium text-placeholder">{t("workspace_creation.subheading")}</p>
       </div>
-      <form className="w-full mx-auto mt-2 space-y-4" onSubmit={handleSubmit(handleCreateWorkspace)}>
+      <form className="mx-auto mt-2 w-full space-y-4" onSubmit={handleSubmit(handleCreateWorkspace)}>
         <div className="space-y-1">
           <label
-            className="text-sm text-custom-text-300 font-medium after:content-['*'] after:ml-0.5 after:text-red-500"
+            className="text-13 font-medium text-tertiary after:ml-0.5 after:text-danger-primary after:content-['*']"
             htmlFor="name"
           >
             {t("workspace_creation.form.name.label")}
@@ -159,8 +139,7 @@ export const CreateWorkspace = observer(function CreateWorkspace(props: Props) {
             name="name"
             rules={{
               required: t("common.errors.required"),
-              validate: (value) =>
-                /^[\w\s-]*$/.test(value) || t("workspace_creation.errors.validation.name_alphanumeric"),
+              validate: (value) => validateWorkspaceName(value, true),
               maxLength: {
                 value: 80,
                 message: t("workspace_creation.errors.validation.name_length"),
@@ -183,17 +162,17 @@ export const CreateWorkspace = observer(function CreateWorkspace(props: Props) {
                   placeholder={t("workspace_creation.form.name.placeholder")}
                   ref={ref}
                   hasError={Boolean(errors.name)}
-                  className="w-full border-custom-border-300 placeholder:text-custom-text-400"
+                  className="w-full border-strong placeholder:text-placeholder"
                   autoFocus
                 />
               </div>
             )}
           />
-          {errors.name && <span className="text-sm text-red-500">{errors.name.message}</span>}
+          {errors.name && <span className="text-13 text-danger-primary">{errors.name.message}</span>}
         </div>
         <div className="space-y-1">
           <label
-            className="text-sm text-custom-text-300 font-medium after:content-['*'] after:ml-0.5 after:text-red-500"
+            className="text-13 font-medium text-tertiary after:ml-0.5 after:text-danger-primary after:content-['*']"
             htmlFor="slug"
           >
             {t("workspace_creation.form.url.label")}
@@ -211,17 +190,18 @@ export const CreateWorkspace = observer(function CreateWorkspace(props: Props) {
             render={({ field: { value, ref, onChange } }) => (
               <div
                 className={`relative flex items-center rounded-md border-[0.5px] px-3 ${
-                  invalidSlug ? "border-red-500" : "border-custom-border-300"
+                  invalidSlug ? "border-danger-strong" : "border-strong"
                 }`}
               >
-                <span className="whitespace-nowrap text-sm">{window && window.location.host}/</span>
+                <span className="text-13 whitespace-nowrap">{window && window.location.host}/</span>
                 <Input
                   id="slug"
                   name="slug"
                   type="text"
                   value={value.toLocaleLowerCase().trim().replace(/ /g, "-")}
                   onChange={(e) => {
-                    if (/^[a-zA-Z0-9_-]+$/.test(e.target.value)) setInvalidSlug(false);
+                    const validation = validateSlug(e.target.value);
+                    if (validation === true) setInvalidSlug(false);
                     else setInvalidSlug(true);
                     onChange(e.target.value.toLowerCase());
                   }}
@@ -233,19 +213,21 @@ export const CreateWorkspace = observer(function CreateWorkspace(props: Props) {
               </div>
             )}
           />
-          <p className="text-sm text-custom-text-300">{t("workspace_creation.form.url.edit_slug")}</p>
+          <p className="text-13 text-tertiary">{t("workspace_creation.form.url.edit_slug")}</p>
           {slugError && (
-            <p className="-mt-3 text-sm text-red-500">{t("workspace_creation.errors.validation.url_already_taken")}</p>
+            <p className="-mt-3 text-13 text-danger-primary">
+              {t("workspace_creation.errors.validation.url_already_taken")}
+            </p>
           )}
           {invalidSlug && (
-            <p className="text-sm text-red-500">{t("workspace_creation.errors.validation.url_alphanumeric")}</p>
+            <p className="text-13 text-danger-primary">{t("workspace_creation.errors.validation.url_alphanumeric")}</p>
           )}
-          {errors.slug && <span className="text-sm text-red-500">{errors.slug.message}</span>}
+          {errors.slug && <span className="text-13 text-danger-primary">{errors.slug.message}</span>}
         </div>
-        <hr className="w-full border-custom-border-300" />
+        <hr className="w-full border-strong" />
         <div className="space-y-1">
           <label
-            className="text-sm text-custom-text-300 font-medium after:content-['*'] after:ml-0.5 after:text-red-500"
+            className="text-13 font-medium text-tertiary after:ml-0.5 after:text-danger-primary after:content-['*']"
             htmlFor="organization_size"
           >
             {t("workspace_creation.form.organization_size.label")}
@@ -261,12 +243,12 @@ export const CreateWorkspace = observer(function CreateWorkspace(props: Props) {
                   onChange={onChange}
                   label={
                     ORGANIZATION_SIZE.find((c) => c === value) ?? (
-                      <span className="text-custom-text-400">
+                      <span className="text-placeholder">
                         {t("workspace_creation.form.organization_size.placeholder")}
                       </span>
                     )
                   }
-                  buttonClassName="!border-[0.5px] !border-custom-border-300 !shadow-none !rounded-md"
+                  buttonClassName="border border-subtle bg-layer-2 !shadow-none !rounded-md"
                   input
                 >
                   {ORGANIZATION_SIZE.map((item) => (
@@ -278,18 +260,11 @@ export const CreateWorkspace = observer(function CreateWorkspace(props: Props) {
               )}
             />
             {errors.organization_size && (
-              <span className="text-sm text-red-500">{errors.organization_size.message}</span>
+              <span className="text-13 text-danger-primary">{errors.organization_size.message}</span>
             )}
           </div>
         </div>
-        <Button
-          data-ph-element={WORKSPACE_TRACKER_ELEMENTS.ONBOARDING_CREATE_WORKSPACE_BUTTON}
-          variant="primary"
-          type="submit"
-          size="lg"
-          className="w-full"
-          disabled={isButtonDisabled}
-        >
+        <Button variant="primary" type="submit" size="xl" className="w-full" disabled={isButtonDisabled}>
           {isSubmitting ? <Spinner height="20px" width="20px" /> : t("workspace_creation.button.default")}
         </Button>
       </form>
diff --git a/apps/web/core/components/onboarding/header.tsx b/apps/web/core/components/onboarding/header.tsx
index 834e44d16..4ebf6a9c1 100644
--- a/apps/web/core/components/onboarding/header.tsx
+++ b/apps/web/core/components/onboarding/header.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 // plane imports
 import { PlaneLockup, ChevronLeftIcon } from "@plane/propel/icons";
@@ -63,23 +68,23 @@ export const OnboardingHeader = observer(function OnboardingHeader(props: Onboar
       : user?.email;
 
   return (
-    <div className="flex flex-col gap-4 sticky top-0 z-10">
-      <div className="h-1.5 rounded-t-lg w-full bg-custom-background-100 overflow-hidden cursor-pointer">
+    <div className="sticky top-0 z-10 flex flex-col gap-4">
+      <div className="h-1.5 w-full cursor-pointer overflow-hidden rounded-t-lg bg-surface-1">
         <Tooltip tooltipContent={`${currentStepNumber}/${totalSteps}`} position="bottom-end">
           <div
-            className="h-full bg-custom-primary-100 transition-all duration-700 ease-out"
+            className="h-full bg-accent-primary transition-all duration-700 ease-out"
             style={{ width: `${(currentStepNumber / totalSteps) * 100}%` }}
           />
         </Tooltip>
       </div>
-      <div className={cn("flex items-center justify-between gap-6 w-full px-6", canGoBack && "pl-4 pr-6")}>
+      <div className={cn("flex w-full items-center justify-between gap-6 px-6", canGoBack && "pr-6 pl-4")}>
         <div className="flex items-center gap-2.5">
           {canGoBack && (
             <button onClick={handleStepBack} className="cursor-pointer" type="button" disabled={!canGoBack}>
-              <ChevronLeftIcon className="size-6 text-custom-text-400" />
+              <ChevronLeftIcon className="size-6 text-placeholder" />
             </button>
           )}
-          <PlaneLockup height={20} width={95} className="text-custom-text-100" />
+          <PlaneLockup height={20} width={95} className="text-primary" />
         </div>
         <SwitchAccountDropdown fullName={userName} />
       </div>
diff --git a/apps/web/core/components/onboarding/index.ts b/apps/web/core/components/onboarding/index.ts
index 1efe34c51..d98033459 100644
--- a/apps/web/core/components/onboarding/index.ts
+++ b/apps/web/core/components/onboarding/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./root";
diff --git a/apps/web/core/components/onboarding/invitations.tsx b/apps/web/core/components/onboarding/invitations.tsx
index 190fe270e..f8537b962 100644
--- a/apps/web/core/components/onboarding/invitations.tsx
+++ b/apps/web/core/components/onboarding/invitations.tsx
@@ -1,6 +1,12 @@
-import React, { useState } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
 // plane imports
-import { ROLE, MEMBER_TRACKER_EVENTS, MEMBER_TRACKER_ELEMENTS } from "@plane/constants";
+import { ROLE } from "@plane/constants";
 // types
 import { Button } from "@plane/propel/button";
 import type { IWorkspaceMemberInvitation } from "@plane/types";
@@ -11,11 +17,10 @@ import { truncateText } from "@plane/utils";
 // helpers
 import { WorkspaceLogo } from "@/components/workspace/logo";
 // hooks
-import { captureError, captureSuccess } from "@/helpers/event-tracker.helper";
 import { useWorkspace } from "@/hooks/store/use-workspace";
 import { useUserSettings } from "@/hooks/store/user";
 // services
-import { WorkspaceService } from "@/plane-web/services";
+import { WorkspaceService } from "@/services/workspace.service";
 
 type Props = {
   invitations: IWorkspaceMemberInvitation[];
@@ -43,40 +48,24 @@ export function Invitations(props: Props) {
 
   const submitInvitations = async () => {
     const invitation = invitations?.find((invitation) => invitation.id === invitationsRespond[0]);
-
     if (invitationsRespond.length <= 0 && !invitation?.role) return;
-
     setIsJoiningWorkspaces(true);
-
     try {
       await workspaceService.joinWorkspaces({ invitations: invitationsRespond });
-      captureSuccess({
-        eventName: MEMBER_TRACKER_EVENTS.accept,
-        payload: {
-          member_id: invitation?.id,
-        },
-      });
       await fetchWorkspaces();
       await fetchCurrentUserSettings();
       await handleNextStep();
-    } catch (error: any) {
+    } catch (error) {
       console.error(error);
-      captureError({
-        eventName: MEMBER_TRACKER_EVENTS.accept,
-        payload: {
-          member_id: invitation?.id,
-        },
-        error: error,
-      });
       setIsJoiningWorkspaces(false);
     }
   };
 
   return invitations && invitations.length > 0 ? (
     <div className="space-y-4">
-      <div className="text-center space-y-1 py-4 mx-auto">
-        <h3 className="text-3xl font-bold text-custom-text-100">You are invited!</h3>
-        <p className="font-medium text-custom-text-400">Accept the invites to collaborate with your team.</p>
+      <div className="mx-auto space-y-1 py-4 text-center">
+        <h3 className="text-24 font-bold text-primary">You are invited!</h3>
+        <p className="font-medium text-placeholder">Accept the invites to collaborate with your team.</p>
       </div>
       <div>
         {invitations &&
@@ -87,7 +76,7 @@ export function Invitations(props: Props) {
             return (
               <div
                 key={invitation.id}
-                className={`flex cursor-pointer items-center gap-2 rounded border p-3.5 border-custom-border-200 hover:bg-custom-background-90`}
+                className={`flex cursor-pointer items-center gap-2 rounded-sm border border-subtle p-3.5 hover:bg-surface-2`}
                 onClick={() => handleInvitation(invitation, isSelected ? "withdraw" : "accepted")}
               >
                 <div className="flex-shrink-0">
@@ -98,8 +87,8 @@ export function Invitations(props: Props) {
                   />
                 </div>
                 <div className="min-w-0 flex-1">
-                  <div className="text-sm font-medium">{truncateText(invitedWorkspace?.name, 30)}</div>
-                  <p className="text-xs text-custom-text-200">{ROLE[invitation.role]}</p>
+                  <div className="text-13 font-medium">{truncateText(invitedWorkspace?.name, 30)}</div>
+                  <p className="text-11 text-secondary">{ROLE[invitation.role]}</p>
                 </div>
                 <span className={`flex-shrink-0`}>
                   <Checkbox checked={isSelected} />
@@ -110,23 +99,22 @@ export function Invitations(props: Props) {
       </div>
       <Button
         variant="primary"
-        size="lg"
+        size="xl"
         className="w-full"
         onClick={submitInvitations}
         disabled={isJoiningWorkspaces || !invitationsRespond.length}
-        data-ph-element={MEMBER_TRACKER_ELEMENTS.ONBOARDING_JOIN_WORKSPACE}
       >
         {isJoiningWorkspaces ? <Spinner height="20px" width="20px" /> : "Continue to workspace"}
       </Button>
       <div className="mx-auto mt-4 flex items-center sm:w-96">
-        <hr className="w-full border-custom-border-300" />
-        <p className="mx-3 flex-shrink-0 text-center text-sm text-custom-text-400">or</p>
-        <hr className="w-full border-custom-border-300" />
+        <hr className="w-full border-strong" />
+        <p className="mx-3 flex-shrink-0 text-center text-13 text-placeholder">or</p>
+        <hr className="w-full border-strong" />
       </div>
       <Button
-        variant="link-neutral"
-        size="lg"
-        className="w-full text-base bg-custom-background-90"
+        variant="ghost"
+        size="xl"
+        className="w-full bg-surface-2 text-14"
         onClick={handleCurrentViewChange}
         disabled={isJoiningWorkspaces}
       >
diff --git a/apps/web/core/components/onboarding/invite-members.tsx b/apps/web/core/components/onboarding/invite-members.tsx
index bfb5616bd..b73c87bb8 100644
--- a/apps/web/core/components/onboarding/invite-members.tsx
+++ b/apps/web/core/components/onboarding/invite-members.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React, { useEffect, useState } from "react";
 import { observer } from "mobx-react";
 import type {
@@ -11,23 +17,21 @@ import type {
 import { Controller, useFieldArray, useForm } from "react-hook-form";
 // icons
 import { usePopper } from "react-popper";
-import { Check, Plus, XCircle } from "lucide-react";
+import { XCircle } from "lucide-react";
 import { Listbox } from "@headlessui/react";
 // plane imports
 import type { EUserPermissions } from "@plane/constants";
-import { ROLE, ROLE_DETAILS, MEMBER_TRACKER_EVENTS, MEMBER_TRACKER_ELEMENTS } from "@plane/constants";
+import { ROLE, ROLE_DETAILS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 // types
 import { Button } from "@plane/propel/button";
-import { ChevronDownIcon } from "@plane/propel/icons";
+import { PlusIcon, CheckIcon, ChevronDownIcon } from "@plane/propel/icons";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { IUser, IWorkspace } from "@plane/types";
 // ui
 import { Input, Spinner } from "@plane/ui";
-// helpers
-import { captureError, captureSuccess } from "@/helpers/event-tracker.helper";
 // services
-import { WorkspaceService } from "@/plane-web/services";
+import { WorkspaceService } from "@/services/workspace.service";
 // components
 import { SwitchAccountDropdown } from "./switch-account-dropdown";
 
@@ -161,7 +165,7 @@ const InviteMemberInput = observer(function InviteMemberInput(props: InviteMembe
                 ref={ref}
                 hasError={Boolean(errors.emails?.[index]?.email)}
                 placeholder={placeholderEmails[index % placeholderEmails.length]}
-                className="w-full border-custom-border-300 text-xs placeholder:text-custom-text-400 sm:text-sm"
+                className="w-full border-strong text-11 placeholder:text-placeholder sm:text-13"
                 autoComplete="off"
               />
             )}
@@ -185,28 +189,26 @@ const InviteMemberInput = observer(function InviteMemberInput(props: InviteMembe
                 <Listbox.Button
                   type="button"
                   ref={setReferenceElement}
-                  className="flex w-full items-center justify-between gap-1 rounded-md px-2.5 py-2 text-sm border-[0.5px] border-custom-border-300"
+                  className="flex w-full items-center justify-between gap-1 rounded-md border-[0.5px] border-strong px-2.5 py-2 text-13"
                 >
                   <span
-                    className={`text-sm ${
-                      !getValues(`emails.${index}.role_active`) ? "text-custom-text-400" : "text-custom-text-100"
-                    } sm:text-sm`}
+                    className={`text-13 ${
+                      !getValues(`emails.${index}.role_active`) ? "text-placeholder" : "text-primary"
+                    } sm:text-13`}
                   >
                     {ROLE[value]}
                   </span>
 
                   <ChevronDownIcon
                     className={`size-3 ${
-                      !getValues(`emails.${index}.role_active`)
-                        ? "stroke-onboarding-text-400"
-                        : "stroke-onboarding-text-100"
+                      !getValues(`emails.${index}.role_active`) ? "stroke-placeholder" : "stroke-primary"
                     }`}
                   />
                 </Listbox.Button>
 
                 <Listbox.Options as="div">
                   <div
-                    className="p-2 absolute space-y-1 z-10 mt-1 h-fit w-48 sm:w-60 rounded-md border border-custom-border-300 bg-custom-background-100 shadow-sm focus:outline-none"
+                    className="shadow-sm absolute z-10 mt-1 h-fit w-48 space-y-1 rounded-md border border-strong bg-surface-1 p-2 focus:outline-none sm:w-60"
                     ref={setPopperElement}
                     style={styles.popper}
                     {...attributes.popper}
@@ -217,18 +219,18 @@ const InviteMemberInput = observer(function InviteMemberInput(props: InviteMembe
                         key={key}
                         value={parseInt(key)}
                         className={({ active, selected }) =>
-                          `cursor-pointer select-none truncate rounded px-1 py-1.5 ${
+                          `cursor-pointer truncate rounded-sm px-1 py-1.5 select-none ${
                             active || selected ? "bg-onboarding-background-400/40" : ""
-                          } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
+                          } ${selected ? "text-primary" : "text-secondary"}`
                         }
                       >
                         {({ selected }) => (
-                          <div className="flex items-center text-wrap gap-2 p-1">
+                          <div className="flex items-center gap-2 p-1 text-wrap">
                             <div className="flex flex-col">
-                              <div className="text-sm font-medium">{t(value.i18n_title)}</div>
-                              <div className="flex text-xs text-custom-text-300">{t(value.i18n_description)}</div>
+                              <div className="text-13 font-medium">{t(value.i18n_title)}</div>
+                              <div className="flex text-11 text-tertiary">{t(value.i18n_description)}</div>
                             </div>
-                            {selected && <Check className="h-4 w-4 shrink-0" />}
+                            {selected && <CheckIcon className="h-4 w-4 shrink-0" />}
                           </div>
                         )}
                       </Listbox.Option>
@@ -242,17 +244,17 @@ const InviteMemberInput = observer(function InviteMemberInput(props: InviteMembe
         {fields.length > 1 && (
           <button
             type="button"
-            className="absolute right-0 hidden place-items-center self-center rounded group-hover:grid"
+            className="absolute right-0 hidden place-items-center self-center rounded-sm group-hover:grid"
             onClick={() => remove(index)}
           >
-            <XCircle className="h-5 w-5 pl-0.5 text-custom-text-400" />
+            <XCircle className="h-5 w-5 pl-0.5 text-placeholder" />
           </button>
         )}
       </div>
       {email && !emailRegex.test(email) && (
         <div className="mx-8 my-1">
-          <span className="text-sm">🤥</span>{" "}
-          <span className="mt-1 text-xs text-red-500">That doesn{"'"}t look like an email address.</span>
+          <span className="text-13">🤥</span>{" "}
+          <span className="mt-1 text-11 text-danger-primary">That doesn{"'"}t look like an email address.</span>
         </div>
       )}
     </div>
@@ -260,7 +262,7 @@ const InviteMemberInput = observer(function InviteMemberInput(props: InviteMembe
 });
 
 export function InviteMembers(props: Props) {
-  const { finishOnboarding, totalSteps, workspace } = props;
+  const { finishOnboarding, workspace } = props;
 
   const [isInvitationDisabled, setIsInvitationDisabled] = useState(true);
 
@@ -296,28 +298,14 @@ export function InviteMembers(props: Props) {
         })),
       })
       .then(async () => {
-        captureSuccess({
-          eventName: MEMBER_TRACKER_EVENTS.invite,
-          payload: {
-            workspace: workspace.slug,
-          },
-        });
         setToast({
           type: TOAST_TYPE.SUCCESS,
           title: "Success!",
           message: "Invitations sent successfully.",
         });
-
         await nextStep();
       })
       .catch((err) => {
-        captureError({
-          eventName: MEMBER_TRACKER_EVENTS.invite,
-          payload: {
-            workspace: workspace.slug,
-          },
-          error: err,
-        });
         setToast({
           type: TOAST_TYPE.ERROR,
           title: "Error!",
@@ -346,26 +334,26 @@ export function InviteMembers(props: Props) {
   }, [fields, append]);
 
   return (
-    <div className="flex w-full h-full">
-      <div className="w-full h-full overflow-auto px-6 py-10 sm:px-7 sm:py-14 md:px-14 lg:px-28">
-        <div className="flex flex-col w-full items-center justify-center p-8 mt-6 md:w-4/5 mx-auto">
-          <div className="text-center space-y-1 py-4 mx-auto w-4/5">
-            <h3 className="text-3xl font-bold text-custom-text-100">Invite your teammates</h3>
-            <p className="font-medium text-custom-text-400">
+    <div className="flex h-full w-full">
+      <div className="h-full w-full overflow-auto px-6 py-10 sm:px-7 sm:py-14 md:px-14 lg:px-28">
+        <div className="mx-auto mt-6 flex w-full flex-col items-center justify-center p-8 md:w-4/5">
+          <div className="mx-auto w-4/5 space-y-1 py-4 text-center">
+            <h3 className="text-24 font-bold text-primary">Invite your teammates</h3>
+            <p className="font-medium text-placeholder">
               Work in plane happens best with your team. Invite them now to use Plane to its potential.
             </p>
           </div>
           <form
-            className="w-full mx-auto mt-2 space-y-4"
+            className="mx-auto mt-2 w-full space-y-4"
             onSubmit={handleSubmit(onSubmit)}
             onKeyDown={(e) => {
               if (e.code === "Enter") e.preventDefault();
             }}
           >
-            <div className="w-full text-sm py-4">
-              <div className="group relative grid grid-cols-10 gap-4 mx-8 py-2">
-                <div className="col-span-6 px-1 text-sm text-custom-text-200 font-medium">Email</div>
-                <div className="col-span-4 px-1 text-sm text-custom-text-200 font-medium">Role</div>
+            <div className="w-full py-4 text-13">
+              <div className="group relative mx-8 grid grid-cols-10 gap-4 py-2">
+                <div className="col-span-6 px-1 text-13 font-medium text-secondary">Email</div>
+                <div className="col-span-4 px-1 text-13 font-medium text-secondary">Role</div>
               </div>
               <div className="mb-3 space-y-3 sm:space-y-4">
                 {fields.map((field, index) => (
@@ -387,25 +375,24 @@ export function InviteMembers(props: Props) {
               </div>
               <button
                 type="button"
-                className="flex items-center mx-8 gap-1.5 bg-transparent text-sm font-medium text-custom-primary-100 outline-custom-primary-100"
+                className="mx-8 flex items-center gap-1.5 bg-transparent text-13 font-medium text-accent-primary outline-accent-strong"
                 onClick={appendField}
               >
-                <Plus className="h-4 w-4" strokeWidth={2} />
+                <PlusIcon className="h-4 w-4" strokeWidth={2} />
                 Add another
               </button>
             </div>
-            <div className="flex flex-col mx-auto px-8 sm:px-2 items-center justify-center gap-4 w-full max-w-96">
+            <div className="mx-auto flex w-full max-w-96 flex-col items-center justify-center gap-4 px-8 sm:px-2">
               <Button
                 variant="primary"
                 type="submit"
-                size="lg"
+                size="xl"
                 className="w-full"
                 disabled={isInvitationDisabled || !isValid || isSubmitting}
-                data-ph-element={MEMBER_TRACKER_ELEMENTS.ONBOARDING_INVITE_MEMBER}
               >
                 {isSubmitting ? <Spinner height="20px" width="20px" /> : "Continue"}
               </Button>
-              <Button variant="link-neutral" size="lg" className="w-full" onClick={nextStep}>
+              <Button variant="ghost" size="xl" className="w-full" onClick={nextStep}>
                 I’ll do it later
               </Button>
             </div>
diff --git a/apps/web/core/components/onboarding/profile-setup.tsx b/apps/web/core/components/onboarding/profile-setup.tsx
index b98568598..1880323e8 100644
--- a/apps/web/core/components/onboarding/profile-setup.tsx
+++ b/apps/web/core/components/onboarding/profile-setup.tsx
@@ -1,13 +1,14 @@
-import React, { useMemo, useState } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useMemo, useState } from "react";
 import { observer } from "mobx-react";
 import { Controller, useForm } from "react-hook-form";
 import { Eye, EyeOff } from "lucide-react";
-import {
-  AUTH_TRACKER_EVENTS,
-  E_PASSWORD_STRENGTH,
-  ONBOARDING_TRACKER_ELEMENTS,
-  USER_TRACKER_EVENTS,
-} from "@plane/constants";
+import { E_PASSWORD_STRENGTH } from "@plane/constants";
 // types
 import { useTranslation } from "@plane/i18n";
 import { Button } from "@plane/propel/button";
@@ -16,12 +17,9 @@ import type { IUser, TUserProfile, TOnboardingSteps } from "@plane/types";
 // ui
 import { Input, PasswordStrengthIndicator, Spinner } from "@plane/ui";
 // components
-import { cn, getFileURL, getPasswordStrength } from "@plane/utils";
+import { cn, getFileURL, getPasswordStrength, validatePersonName } from "@plane/utils";
 import { UserImageUploadModal } from "@/components/core/modals/user-image-upload-modal";
-// constants
-// helpers
 // hooks
-import { captureError, captureSuccess, captureView } from "@/helpers/event-tracker.helper";
 import { useUser, useUserProfile } from "@/hooks/store/user";
 // services
 import { AuthService } from "@/services/auth.service";
@@ -118,18 +116,7 @@ export const ProfileSetup = observer(function ProfileSetup(props: Props) {
 
   const handleSetPassword = async (password: string) => {
     const token = await authService.requestCSRFToken().then((data) => data?.csrf_token);
-    await authService
-      .setPassword(token, { password })
-      .then(() => {
-        captureSuccess({
-          eventName: AUTH_TRACKER_EVENTS.password_created,
-        });
-      })
-      .catch(() => {
-        captureError({
-          eventName: AUTH_TRACKER_EVENTS.password_created,
-        });
-      });
+    await authService.setPassword(token, { password });
   };
 
   const handleSubmitProfileSetup = async (formData: TProfileSetupFormValues) => {
@@ -148,13 +135,6 @@ export const ProfileSetup = observer(function ProfileSetup(props: Props) {
         updateUserProfile(profileUpdatePayload),
         totalSteps > 2 && stepChange({ profile_complete: true }),
       ]);
-      captureSuccess({
-        eventName: USER_TRACKER_EVENTS.add_details,
-        payload: {
-          use_case: profileUpdatePayload.use_case,
-          role: formData.role,
-        },
-      });
       setToast({
         type: TOAST_TYPE.SUCCESS,
         title: "Success",
@@ -165,9 +145,6 @@ export const ProfileSetup = observer(function ProfileSetup(props: Props) {
         finishOnboarding();
       }
     } catch {
-      captureError({
-        eventName: USER_TRACKER_EVENTS.add_details,
-      });
       setToast({
         type: TOAST_TYPE.ERROR,
         title: "Error",
@@ -188,20 +165,11 @@ export const ProfileSetup = observer(function ProfileSetup(props: Props) {
         formData.password && handleSetPassword(formData.password),
       ]).then(() => {
         if (formData.password) {
-          captureView({
-            elementName: ONBOARDING_TRACKER_ELEMENTS.PASSWORD_CREATION_SELECTED,
-          });
         } else {
-          captureView({
-            elementName: ONBOARDING_TRACKER_ELEMENTS.PASSWORD_CREATION_SKIPPED,
-          });
+          setProfileSetupStep(EProfileSetupSteps.USER_PERSONALIZATION);
         }
-        setProfileSetupStep(EProfileSetupSteps.USER_PERSONALIZATION);
       });
     } catch {
-      captureError({
-        eventName: USER_TRACKER_EVENTS.add_details,
-      });
       setToast({
         type: TOAST_TYPE.ERROR,
         title: "Error",
@@ -220,13 +188,6 @@ export const ProfileSetup = observer(function ProfileSetup(props: Props) {
         updateUserProfile(profileUpdatePayload),
         totalSteps > 2 && stepChange({ profile_complete: true }),
       ]);
-      captureSuccess({
-        eventName: USER_TRACKER_EVENTS.add_details,
-        payload: {
-          use_case: profileUpdatePayload.use_case,
-          role: formData.role,
-        },
-      });
       setToast({
         type: TOAST_TYPE.SUCCESS,
         title: "Success",
@@ -237,9 +198,6 @@ export const ProfileSetup = observer(function ProfileSetup(props: Props) {
         finishOnboarding();
       }
     } catch {
-      captureError({
-        eventName: USER_TRACKER_EVENTS.add_details,
-      });
       setToast({
         type: TOAST_TYPE.ERROR,
         title: "Error",
@@ -250,9 +208,6 @@ export const ProfileSetup = observer(function ProfileSetup(props: Props) {
 
   const onSubmit = async (formData: TProfileSetupFormValues) => {
     if (!user) return;
-    captureView({
-      elementName: ONBOARDING_TRACKER_ELEMENTS.PROFILE_SETUP_FORM,
-    });
     if (profileSetupStep === EProfileSetupSteps.ALL) await handleSubmitProfileSetup(formData);
     if (profileSetupStep === EProfileSetupSteps.USER_DETAILS) await handleSubmitUserDetail(formData);
     if (profileSetupStep === EProfileSetupSteps.USER_PERSONALIZATION) await handleSubmitUserPersonalization(formData);
@@ -290,8 +245,8 @@ export const ProfileSetup = observer(function ProfileSetup(props: Props) {
 
   return (
     <div className="flex h-full w-full">
-      <div className="flex flex-col w-full items-center justify-center p-8 mt-6">
-        <form onSubmit={handleSubmit(onSubmit)} className="w-full mx-auto mt-2 space-y-4 sm:w-96">
+      <div className="mt-6 flex w-full flex-col items-center justify-center p-8">
+        <form onSubmit={handleSubmit(onSubmit)} className="mx-auto mt-2 w-full space-y-4 sm:w-96">
           {profileSetupStep !== EProfileSetupSteps.USER_PERSONALIZATION && (
             <>
               <Controller
@@ -310,16 +265,16 @@ export const ProfileSetup = observer(function ProfileSetup(props: Props) {
                   />
                 )}
               />
-              <div className="space-y-1 flex items-center justify-center">
+              <div className="flex items-center justify-center space-y-1">
                 <button type="button" onClick={() => setIsImageUploadModalOpen(true)}>
                   {!userAvatar || userAvatar === "" ? (
                     <div className="flex flex-col items-center justify-between">
                       <div className="relative h-14 w-14 overflow-hidden">
-                        <div className="absolute left-0 top-0 flex items-center justify-center h-full w-full rounded-full text-white text-3xl font-medium bg-[#9747FF] uppercase">
+                        <div className="absolute top-0 left-0 flex h-full w-full items-center justify-center rounded-full bg-accent-primary text-24 font-medium text-on-color uppercase">
                           {watch("first_name")[0] ?? "R"}
                         </div>
                       </div>
-                      <div className="pt-1 text-sm font-medium text-custom-primary-300 hover:text-custom-primary-400">
+                      <div className="pt-1 text-13 font-medium text-accent-secondary hover:text-tertiary">
                         Choose image
                       </div>
                     </div>
@@ -327,7 +282,7 @@ export const ProfileSetup = observer(function ProfileSetup(props: Props) {
                     <div className="relative mr-3 h-16 w-16 overflow-hidden">
                       <img
                         src={getFileURL(userAvatar ?? "")}
-                        className="absolute left-0 top-0 h-full w-full rounded-full object-cover"
+                        className="absolute top-0 left-0 h-full w-full rounded-full object-cover"
                         onClick={() => setIsImageUploadModalOpen(true)}
                         alt={user?.display_name}
                       />
@@ -335,10 +290,10 @@ export const ProfileSetup = observer(function ProfileSetup(props: Props) {
                   )}
                 </button>
               </div>
-              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+              <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
                 <div className="space-y-1">
                   <label
-                    className="text-sm text-custom-text-300 font-medium after:content-['*'] after:ml-0.5 after:text-red-500"
+                    className="text-13 font-medium text-tertiary after:ml-0.5 after:text-danger-primary after:content-['*']"
                     htmlFor="first_name"
                   >
                     First name
@@ -348,9 +303,10 @@ export const ProfileSetup = observer(function ProfileSetup(props: Props) {
                     name="first_name"
                     rules={{
                       required: "First name is required",
+                      validate: validatePersonName,
                       maxLength: {
-                        value: 24,
-                        message: "First name must be within 24 characters.",
+                        value: 50,
+                        message: "First name must be within 50 characters.",
                       },
                     }}
                     render={({ field: { value, onChange, ref } }) => (
@@ -364,16 +320,18 @@ export const ProfileSetup = observer(function ProfileSetup(props: Props) {
                         ref={ref}
                         hasError={Boolean(errors.first_name)}
                         placeholder="Wilbur"
-                        className="w-full border-custom-border-300"
+                        className="w-full border-strong"
                         autoComplete="on"
                       />
                     )}
                   />
-                  {errors.first_name && <span className="text-sm text-red-500">{errors.first_name.message}</span>}
+                  {errors.first_name && (
+                    <span className="text-13 text-danger-primary">{errors.first_name.message}</span>
+                  )}
                 </div>
                 <div className="space-y-1">
                   <label
-                    className="text-sm text-custom-text-300 font-medium after:content-['*'] after:ml-0.5 after:text-red-500"
+                    className="text-13 font-medium text-tertiary after:ml-0.5 after:text-danger-primary after:content-['*']"
                     htmlFor="last_name"
                   >
                     Last name
@@ -383,9 +341,10 @@ export const ProfileSetup = observer(function ProfileSetup(props: Props) {
                     name="last_name"
                     rules={{
                       required: "Last name is required",
+                      validate: validatePersonName,
                       maxLength: {
-                        value: 24,
-                        message: "Last name must be within 24 characters.",
+                        value: 50,
+                        message: "Last name must be within 50 characters.",
                       },
                     }}
                     render={({ field: { value, onChange, ref } }) => (
@@ -398,12 +357,12 @@ export const ProfileSetup = observer(function ProfileSetup(props: Props) {
                         ref={ref}
                         hasError={Boolean(errors.last_name)}
                         placeholder="Wright"
-                        className="w-full border-custom-border-300"
+                        className="w-full border-strong"
                         autoComplete="on"
                       />
                     )}
                   />
-                  {errors.last_name && <span className="text-sm text-red-500">{errors.last_name.message}</span>}
+                  {errors.last_name && <span className="text-13 text-danger-primary">{errors.last_name.message}</span>}
                 </div>
               </div>
 
@@ -411,7 +370,7 @@ export const ProfileSetup = observer(function ProfileSetup(props: Props) {
               {!isPasswordAlreadySetup && (
                 <>
                   <div className="space-y-1">
-                    <label className="text-sm text-custom-text-300 font-medium" htmlFor="password">
+                    <label className="text-13 font-medium text-tertiary" htmlFor="password">
                       Set a password ({t("common.optional")})
                     </label>
                     <Controller
@@ -430,19 +389,19 @@ export const ProfileSetup = observer(function ProfileSetup(props: Props) {
                             ref={ref}
                             hasError={Boolean(errors.password)}
                             placeholder="New password..."
-                            className="w-full border-[0.5px] border-custom-border-300 pr-12 placeholder:text-custom-text-400"
+                            className="w-full border-[0.5px] border-subtle pr-12 placeholder:text-placeholder"
                             onFocus={() => setIsPasswordInputFocused(true)}
                             onBlur={() => setIsPasswordInputFocused(false)}
-                            autoComplete="on"
+                            autoComplete="new-password"
                           />
                           {showPassword.password ? (
                             <EyeOff
-                              className="absolute right-3 h-4 w-4 stroke-custom-text-400 hover:cursor-pointer"
+                              className="absolute right-3 h-4 w-4 stroke-placeholder hover:cursor-pointer"
                               onClick={() => handleShowPassword("password")}
                             />
                           ) : (
                             <Eye
-                              className="absolute right-3 h-4 w-4 stroke-custom-text-400 hover:cursor-pointer"
+                              className="absolute right-3 h-4 w-4 stroke-placeholder hover:cursor-pointer"
                               onClick={() => handleShowPassword("password")}
                             />
                           )}
@@ -452,7 +411,7 @@ export const ProfileSetup = observer(function ProfileSetup(props: Props) {
                     <PasswordStrengthIndicator password={watch("password") ?? ""} isFocused={isPasswordInputFocused} />
                   </div>
                   <div className="space-y-1">
-                    <label className="text-sm text-custom-text-300 font-medium" htmlFor="confirm_password">
+                    <label className="text-13 font-medium text-tertiary" htmlFor="confirm_password">
                       {t("auth.common.password.confirm_password.label")} ({t("common.optional")})
                     </label>
                     <Controller
@@ -473,16 +432,17 @@ export const ProfileSetup = observer(function ProfileSetup(props: Props) {
                             ref={ref}
                             hasError={Boolean(errors.confirm_password)}
                             placeholder={t("auth.common.password.confirm_password.placeholder")}
-                            className="w-full border-custom-border-300 pr-12 placeholder:text-custom-text-400"
+                            className="w-full border-subtle pr-12 placeholder:text-placeholder"
+                            autoComplete="new-password"
                           />
                           {showPassword.retypePassword ? (
                             <EyeOff
-                              className="absolute right-3 h-4 w-4 stroke-custom-text-400 hover:cursor-pointer"
+                              className="absolute right-3 h-4 w-4 stroke-placeholder hover:cursor-pointer"
                               onClick={() => handleShowPassword("retypePassword")}
                             />
                           ) : (
                             <Eye
-                              className="absolute right-3 h-4 w-4 stroke-custom-text-400 hover:cursor-pointer"
+                              className="absolute right-3 h-4 w-4 stroke-placeholder hover:cursor-pointer"
                               onClick={() => handleShowPassword("retypePassword")}
                             />
                           )}
@@ -490,7 +450,7 @@ export const ProfileSetup = observer(function ProfileSetup(props: Props) {
                       )}
                     />
                     {errors.confirm_password && (
-                      <span className="text-sm text-red-500">{errors.confirm_password.message}</span>
+                      <span className="text-13 text-danger-primary">{errors.confirm_password.message}</span>
                     )}
                   </div>
                 </>
@@ -503,7 +463,7 @@ export const ProfileSetup = observer(function ProfileSetup(props: Props) {
             <>
               <div className="space-y-1">
                 <label
-                  className="text-sm text-custom-text-300 font-medium after:content-['*'] after:ml-0.5 after:text-red-500"
+                  className="text-13 font-medium text-tertiary after:ml-0.5 after:text-danger-primary after:content-['*']"
                   htmlFor="role"
                 >
                   What role are you working on? Choose one.
@@ -515,15 +475,15 @@ export const ProfileSetup = observer(function ProfileSetup(props: Props) {
                     required: "This field is required",
                   }}
                   render={({ field: { value, onChange } }) => (
-                    <div className="flex flex-wrap gap-2 py-2 overflow-auto break-all">
+                    <div className="flex flex-wrap gap-2 overflow-auto py-2 break-all">
                       {USER_ROLE.map((userRole) => (
                         <div
                           key={userRole}
                           className={cn(
-                            "flex-shrink-0 border-[0.5px] hover:cursor-pointer hover:bg-custom-background-90 rounded px-3 py-1.5 text-sm font-medium",
+                            "shrink-0 rounded border-[0.5px] px-3 py-1.5 text-13 font-medium hover:cursor-pointer hover:bg-surface-2",
                             {
-                              "border-custom-primary-100": value === userRole,
-                              "border-custom-border-300": value !== userRole,
+                              "border-accent-strong": value === userRole,
+                              "border-strong": value !== userRole,
                             }
                           )}
                           onClick={() => onChange(userRole)}
@@ -534,11 +494,11 @@ export const ProfileSetup = observer(function ProfileSetup(props: Props) {
                     </div>
                   )}
                 />
-                {errors.role && <span className="text-sm text-red-500">{errors.role.message}</span>}
+                {errors.role && <span className="text-13 text-danger-primary">{errors.role.message}</span>}
               </div>
               <div className="space-y-1">
                 <label
-                  className="text-sm text-custom-text-300 font-medium after:content-['*'] after:ml-0.5 after:text-red-500"
+                  className="text-13 font-medium text-tertiary after:ml-0.5 after:text-danger-primary after:content-['*']"
                   htmlFor="use_case"
                 >
                   What is your domain expertise? Choose one or more.
@@ -551,15 +511,15 @@ export const ProfileSetup = observer(function ProfileSetup(props: Props) {
                     validate: (value) => (value && value.length > 0) || "Please select at least one option",
                   }}
                   render={({ field: { value, onChange } }) => (
-                    <div className="flex flex-wrap gap-2 py-2 overflow-auto break-all">
+                    <div className="flex flex-wrap gap-2 overflow-auto py-2 break-all">
                       {USER_DOMAIN.map((userDomain) => {
                         const isSelected = value?.includes(userDomain) || false;
                         return (
                           <div
                             key={userDomain}
-                            className={`flex-shrink-0 border-[0.5px] hover:cursor-pointer hover:bg-custom-background-90 ${
-                              isSelected ? "border-custom-primary-100" : "border-custom-border-300"
-                            } rounded px-3 py-1.5 text-sm font-medium`}
+                            className={`flex-shrink-0 border-[0.5px] hover:cursor-pointer hover:bg-surface-2 ${
+                              isSelected ? "border-accent-strong" : "border-strong"
+                            } rounded px-3 py-1.5 text-13 font-medium`}
                             onClick={() => {
                               const currentValue = value || [];
                               if (isSelected) {
@@ -576,11 +536,11 @@ export const ProfileSetup = observer(function ProfileSetup(props: Props) {
                     </div>
                   )}
                 />
-                {errors.use_case && <span className="text-sm text-red-500">{errors.use_case.message}</span>}
+                {errors.use_case && <span className="text-13 text-danger-primary">{errors.use_case.message}</span>}
               </div>
             </>
           )}
-          <Button variant="primary" type="submit" size="lg" className="w-full" disabled={isButtonDisabled}>
+          <Button variant="primary" type="submit" size="xl" className="w-full" disabled={isButtonDisabled}>
             {isSubmitting ? <Spinner height="20px" width="20px" /> : "Continue"}
           </Button>
         </form>
diff --git a/apps/web/core/components/onboarding/root.tsx b/apps/web/core/components/onboarding/root.tsx
index 22fbf9ccc..cc8e7cfe4 100644
--- a/apps/web/core/components/onboarding/root.tsx
+++ b/apps/web/core/components/onboarding/root.tsx
@@ -1,13 +1,15 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useCallback, useEffect, useState } from "react";
 import { observer } from "mobx-react";
 // plane imports
-import { USER_TRACKER_EVENTS } from "@plane/constants";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { IWorkspaceMemberInvitation, TOnboardingStep, TOnboardingSteps, TUserProfile } from "@plane/types";
 import { EOnboardingSteps } from "@plane/types";
-// helpers
-import { captureSuccess } from "@/helpers/event-tracker.helper";
 // hooks
 import { useWorkspace } from "@/hooks/store/use-workspace";
 import { useUser, useUserProfile } from "@/hooks/store/user";
@@ -34,24 +36,15 @@ export const OnboardingRoot = observer(function OnboardingRoot({ invitations = [
   // complete onboarding
   const finishOnboarding = useCallback(async () => {
     if (!user) return;
-
-    await finishUserOnboarding()
-      .then(() => {
-        captureSuccess({
-          eventName: USER_TRACKER_EVENTS.onboarding_complete,
-          payload: {
-            email: user.email,
-            user_id: user.id,
-          },
-        });
-      })
-      .catch(() => {
-        setToast({
-          type: TOAST_TYPE.ERROR,
-          title: "Failed",
-          message: "Failed to finish onboarding, Please try again later.",
-        });
+    try {
+      await finishUserOnboarding();
+    } catch (_error) {
+      setToast({
+        type: TOAST_TYPE.ERROR,
+        title: "Failed",
+        message: "Failed to finish onboarding, Please try again later.",
       });
+    }
   }, [user, finishUserOnboarding]);
 
   // handle step change
@@ -126,7 +119,7 @@ export const OnboardingRoot = observer(function OnboardingRoot({ invitations = [
   }, []);
 
   return (
-    <div className="flex flex-col h-full">
+    <div className="flex h-full flex-col">
       {/* Header with progress */}
       <OnboardingHeader
         currentStep={currentStep}
diff --git a/apps/web/core/components/onboarding/step-indicator.tsx b/apps/web/core/components/onboarding/step-indicator.tsx
index e81b146d0..8aa8dcae3 100644
--- a/apps/web/core/components/onboarding/step-indicator.tsx
+++ b/apps/web/core/components/onboarding/step-indicator.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 // helpers
 import { cn } from "@plane/utils";
@@ -20,9 +26,9 @@ export function OnboardingStepIndicator({ currentStep, totalSteps }: OnboardingS
       indicators.push(
         <div
           key={`line-${i}`}
-          className={cn("h-1.5 -ml-0.5 w-full", {
-            "bg-green-700": isCompleted,
-            "bg-custom-background-100": !isCompleted,
+          className={cn("-ml-0.5 h-1.5 w-full", {
+            "bg-success-primary": isCompleted,
+            "bg-surface-1": !isCompleted,
             "rounded-l-full": isFirstStep,
             "rounded-r-full": isLastStep || isActive,
             "z-10": isActive,
@@ -36,10 +42,10 @@ export function OnboardingStepIndicator({ currentStep, totalSteps }: OnboardingS
 
   return (
     <div className="flex flex-col justify-center">
-      <div className="text-sm text-custom-text-300 font-medium">
+      <div className="text-13 font-medium text-tertiary">
         {currentStep} of {totalSteps} steps
       </div>
-      <div className="flex items-center justify-center my-0.5 mx-1 w-40 lg:w-52">{renderIndicators()}</div>
+      <div className="mx-1 my-0.5 flex w-40 items-center justify-center lg:w-52">{renderIndicators()}</div>
     </div>
   );
 }
diff --git a/apps/web/core/components/onboarding/steps/common/header.tsx b/apps/web/core/components/onboarding/steps/common/header.tsx
index b89a42a3a..69be93c6f 100644
--- a/apps/web/core/components/onboarding/steps/common/header.tsx
+++ b/apps/web/core/components/onboarding/steps/common/header.tsx
@@ -1,4 +1,8 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
 
 type Props = {
   title: string;
@@ -7,9 +11,9 @@ type Props = {
 
 export function CommonOnboardingHeader({ title, description }: Props) {
   return (
-    <div className="text-left space-y-2">
-      <h1 className="text-2xl font-semibold text-custom-text-200">{title}</h1>
-      <p className="text-base text-custom-text-300">{description}</p>
+    <div className="space-y-2 text-left">
+      <h1 className="text-h4-semibold text-primary">{title}</h1>
+      <p className="text-body-md-regular text-tertiary">{description}</p>
     </div>
   );
 }
diff --git a/apps/web/core/components/onboarding/steps/common/index.ts b/apps/web/core/components/onboarding/steps/common/index.ts
index 49ac70fe2..f595712fc 100644
--- a/apps/web/core/components/onboarding/steps/common/index.ts
+++ b/apps/web/core/components/onboarding/steps/common/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./header";
diff --git a/apps/web/core/components/onboarding/steps/index.ts b/apps/web/core/components/onboarding/steps/index.ts
index 1efe34c51..d98033459 100644
--- a/apps/web/core/components/onboarding/steps/index.ts
+++ b/apps/web/core/components/onboarding/steps/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./root";
diff --git a/apps/web/core/components/onboarding/steps/profile/consent.tsx b/apps/web/core/components/onboarding/steps/profile/consent.tsx
index 9186d10dd..18f42063c 100644
--- a/apps/web/core/components/onboarding/steps/profile/consent.tsx
+++ b/apps/web/core/components/onboarding/steps/profile/consent.tsx
@@ -1,5 +1,10 @@
-import type { FC } from "react";
-import { Check } from "lucide-react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { CheckIcon } from "@plane/propel/icons";
 
 type Props = {
   isChecked: boolean;
@@ -12,13 +17,13 @@ export function MarketingConsent({ isChecked, handleChange }: Props) {
       <button
         type="button"
         onClick={() => handleChange(!isChecked)}
-        className={`size-4 rounded border-2 flex items-center justify-center ${
-          isChecked ? "bg-custom-primary-100 border-custom-primary-100" : "border-custom-border-300"
+        className={`flex size-4 items-center justify-center rounded-sm border-2 ${
+          isChecked ? "border-accent-strong bg-accent-primary" : "border-strong"
         }`}
       >
-        {isChecked && <Check className="w-3 h-3 text-white" />}
+        {isChecked && <CheckIcon className="h-3 w-3 text-on-color" />}
       </button>
-      <span className="text-sm text-custom-text-300">I agree to Plane marketing communications</span>
+      <span className="text-13 text-tertiary">I agree to Plane marketing communications</span>
     </div>
   );
 }
diff --git a/apps/web/core/components/onboarding/steps/profile/index.ts b/apps/web/core/components/onboarding/steps/profile/index.ts
index 1efe34c51..d98033459 100644
--- a/apps/web/core/components/onboarding/steps/profile/index.ts
+++ b/apps/web/core/components/onboarding/steps/profile/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./root";
diff --git a/apps/web/core/components/onboarding/steps/profile/root.tsx b/apps/web/core/components/onboarding/steps/profile/root.tsx
index 3c8a687e1..5e71c802f 100644
--- a/apps/web/core/components/onboarding/steps/profile/root.tsx
+++ b/apps/web/core/components/onboarding/steps/profile/root.tsx
@@ -1,19 +1,22 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useMemo, useState } from "react";
 import { observer } from "mobx-react";
 import { Controller, useForm } from "react-hook-form";
 import { ImageIcon } from "lucide-react";
 // plane imports
-import { E_PASSWORD_STRENGTH, ONBOARDING_TRACKER_ELEMENTS, USER_TRACKER_EVENTS } from "@plane/constants";
+import { E_PASSWORD_STRENGTH } from "@plane/constants";
 import { Button } from "@plane/propel/button";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { IUser } from "@plane/types";
 import { EOnboardingSteps } from "@plane/types";
-import { cn, getFileURL, getPasswordStrength } from "@plane/utils";
+import { cn, getFileURL, getPasswordStrength, validatePersonName } from "@plane/utils";
 // components
 import { UserImageUploadModal } from "@/components/core/modals/user-image-upload-modal";
-// helpers
-import { captureError, captureView } from "@/helpers/event-tracker.helper";
 // hooks
 import { useInstance } from "@/hooks/store/use-instance";
 import { useUser, useUserProfile } from "@/hooks/store/user";
@@ -94,9 +97,6 @@ export const ProfileSetupStep = observer(function ProfileSetupStep({ handleStepC
         formData.password && handleSetPassword(formData.password),
       ]);
     } catch {
-      captureError({
-        eventName: USER_TRACKER_EVENTS.add_details,
-      });
       setToast({
         type: TOAST_TYPE.ERROR,
         title: "Error",
@@ -107,15 +107,11 @@ export const ProfileSetupStep = observer(function ProfileSetupStep({ handleStepC
 
   const onSubmit = async (formData: TProfileSetupFormValues) => {
     if (!user) return;
-    captureView({
-      elementName: ONBOARDING_TRACKER_ELEMENTS.PROFILE_SETUP_FORM,
-    });
     updateUserProfile({
       has_marketing_email_consent: formData.has_marketing_email_consent,
     });
-    await handleSubmitUserDetail(formData).then(() => {
-      handleStepChange(EOnboardingSteps.PROFILE_SETUP);
-    });
+    await handleSubmitUserDetail(formData);
+    handleStepChange(EOnboardingSteps.PROFILE_SETUP);
   };
 
   const handleDelete = (url: string | null | undefined) => {
@@ -172,7 +168,7 @@ export const ProfileSetupStep = observer(function ProfileSetupStep({ handleStepC
       />
       <div className="flex items-center gap-4">
         <button
-          className="size-12 rounded-full bg-[#028375] flex items-center justify-center text-white font-semibold text-xl"
+          className="flex size-12 items-center justify-center rounded-full bg-accent-primary text-18 font-semibold text-on-color"
           type="button"
           onClick={() => setIsImageUploadModalOpen(true)}
         >
@@ -181,7 +177,7 @@ export const ProfileSetupStep = observer(function ProfileSetupStep({ handleStepC
               src={getFileURL(userAvatar ?? "")}
               onClick={() => setIsImageUploadModalOpen(true)}
               alt={user?.display_name}
-              className="w-full h-full rounded-full object-cover"
+              className="h-full w-full rounded-full object-cover"
             />
           ) : (
             <>{watch("first_name")[0] ?? "R"}</>
@@ -189,20 +185,20 @@ export const ProfileSetupStep = observer(function ProfileSetupStep({ handleStepC
         </button>
         <input type="file" className="hidden" id="profile-image-input" />
         <button
-          className="flex items-center gap-1.5 text-custom-text-300 hover:text-custom-text-200 text-sm px-2 py-1"
+          className="flex items-center gap-1.5 px-2 py-1 text-13 text-tertiary hover:text-secondary"
           type="button"
           onClick={() => setIsImageUploadModalOpen(true)}
         >
           <ImageIcon className="size-4" />
-          <span className="text-sm">{userAvatar ? "Change image" : "Upload image"}</span>
+          <span className="text-13">{userAvatar ? "Change image" : "Upload image"}</span>
         </button>
       </div>
 
-      <div className="flex flex-col gap-6 w-full">
+      <div className="flex w-full flex-col gap-6">
         {/* Name Input */}
         <div className="flex flex-col gap-2">
           <label
-            className="block text-sm font-medium text-custom-text-300 after:content-['*'] after:ml-0.5 after:text-red-500"
+            className="block text-13 font-medium text-tertiary after:ml-0.5 after:text-danger-primary after:content-['*']"
             htmlFor="first_name"
           >
             Name
@@ -212,9 +208,10 @@ export const ProfileSetupStep = observer(function ProfileSetupStep({ handleStepC
             name="first_name"
             rules={{
               required: "Name is required",
+              validate: validatePersonName,
               maxLength: {
-                value: 24,
-                message: "Name must be within 24 characters.",
+                value: 50,
+                message: "Name must be within 50 characters.",
               },
             }}
             render={({ field: { value, onChange, ref } }) => (
@@ -227,10 +224,10 @@ export const ProfileSetupStep = observer(function ProfileSetupStep({ handleStepC
                 onChange={(e) => onChange(e.target.value)}
                 autoFocus
                 className={cn(
-                  "w-full px-3 py-2 text-custom-text-200 border border-custom-border-300 rounded-md bg-custom-background-100 focus:outline-none focus:ring-2 focus:ring-custom-primary-100 placeholder:text-custom-text-400 focus:border-transparent transition-all duration-200",
+                  "w-full rounded-md border border-strong bg-surface-1 px-3 py-2 text-secondary transition-all duration-200 placeholder:text-placeholder focus:border-transparent focus:ring-2 focus:ring-accent-strong focus:outline-none",
                   {
-                    "border-custom-border-300": !errors.first_name,
-                    "border-red-500": errors.first_name,
+                    "border-strong": !errors.first_name,
+                    "border-danger-strong": errors.first_name,
                   }
                 )}
                 placeholder="Enter your full name"
@@ -238,7 +235,7 @@ export const ProfileSetupStep = observer(function ProfileSetupStep({ handleStepC
               />
             )}
           />
-          {errors.first_name && <span className="text-sm text-red-500">{errors.first_name.message}</span>}
+          {errors.first_name && <span className="text-13 text-danger-primary">{errors.first_name.message}</span>}
         </div>
 
         {/* setting up password for the first time */}
@@ -250,7 +247,7 @@ export const ProfileSetupStep = observer(function ProfileSetupStep({ handleStepC
         )}
       </div>
       {/* Continue Button */}
-      <Button variant="primary" type="submit" className="w-full" size="lg" disabled={isButtonDisabled}>
+      <Button variant="primary" type="submit" className="w-full" size="xl" disabled={isButtonDisabled}>
         Continue
       </Button>
 
diff --git a/apps/web/core/components/onboarding/steps/profile/set-password.tsx b/apps/web/core/components/onboarding/steps/profile/set-password.tsx
index f97d5d716..95421e2b3 100644
--- a/apps/web/core/components/onboarding/steps/profile/set-password.tsx
+++ b/apps/web/core/components/onboarding/steps/profile/set-password.tsx
@@ -1,6 +1,11 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React, { useState, useCallback, useMemo } from "react";
-import { Lock } from "lucide-react";
-import { ChevronDownIcon } from "@plane/propel/icons";
+import { LockIcon, ChevronDownIcon } from "@plane/propel/icons";
 import { PasswordInput, PasswordStrengthIndicator } from "@plane/ui";
 import { cn } from "@plane/utils";
 
@@ -58,7 +63,7 @@ export function SetPasswordRoot({ onPasswordChange, onConfirmPasswordChange, dis
 
   const chevronIconClasses = useMemo(
     () =>
-      `w-4 h-4 text-custom-text-400 transition-transform duration-300 ease-in-out ${isExpanded ? "rotate-180" : "rotate-0"}`,
+      `w-4 h-4 text-placeholder transition-transform duration-300 ease-in-out ${isExpanded ? "rotate-180" : "rotate-0"}`,
     [isExpanded]
   );
 
@@ -71,30 +76,28 @@ export function SetPasswordRoot({ onPasswordChange, onConfirmPasswordChange, dis
   );
 
   return (
-    <div
-      className={`flex flex-col rounded-lg overflow-hidden transition-all duration-300 ease-in-out bg-custom-background-90`}
-    >
+    <div className={`flex flex-col overflow-hidden rounded-lg bg-surface-2 transition-all duration-300 ease-in-out`}>
       <div
         className={cn(
-          "flex items-center justify-between transition-colors duration-200 px-3 py-2 text-sm",
+          "flex items-center justify-between px-3 py-2 text-13 transition-colors duration-200",
           disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer",
           isExpanded && "pb-1"
         )}
         onClick={handleToggleExpand}
       >
-        <div className="flex items-center gap-1 text-custom-text-300">
-          <Lock className="size-3" />
+        <div className="flex items-center gap-1 text-tertiary">
+          <LockIcon className="size-3" />
           <span className="font-medium">Set a password</span>
           <span>{`(Optional)`}</span>
         </div>
-        <div className="flex items-center gap-2 text-custom-text-400">
+        <div className="flex items-center gap-2 text-placeholder">
           <ChevronDownIcon className={chevronIconClasses} />
         </div>
       </div>
 
       <div className={expandedContentClasses}>
         {/* Password input */}
-        <div className="flex flex-col gap-2 transform transition-all duration-300 ease-in-out pt-1">
+        <div className="flex transform flex-col gap-2 pt-1 transition-all duration-300 ease-in-out">
           <PasswordInput
             id="password"
             value={passwordState.password}
@@ -107,12 +110,12 @@ export function SetPasswordRoot({ onPasswordChange, onConfirmPasswordChange, dis
 
         <div className="flex flex-col gap-2 pb-2">
           {/* Confirm password label */}
-          <div className="text-custom-text-300 font-medium transform transition-all duration-300 ease-in-out delay-75 text-sm">
+          <div className="transform text-13 font-medium text-tertiary transition-all delay-75 duration-300 ease-in-out">
             Confirm password
           </div>
 
           {/* Confirm password input */}
-          <div className="transform transition-all duration-300 ease-in-out delay-100">
+          <div className="transform transition-all delay-100 duration-300 ease-in-out">
             <PasswordInput
               id="confirm-password"
               value={passwordState.confirmPassword}
@@ -120,8 +123,8 @@ export function SetPasswordRoot({ onPasswordChange, onConfirmPasswordChange, dis
               placeholder="Confirm password"
               className="transition-all duration-200"
             />
-            {hasPasswordMismatch && <p className="text-xs text-red-500 mt-1">Passwords do not match</p>}
-            {isPasswordValid && <p className="text-xs text-green-500 mt-1">✓ Passwords match</p>}
+            {hasPasswordMismatch && <p className="mt-1 text-11 text-danger-primary">Passwords do not match</p>}
+            {isPasswordValid && <p className="mt-1 text-11 text-success-primary">✓ Passwords match</p>}
           </div>
         </div>
       </div>
diff --git a/apps/web/core/components/onboarding/steps/role/index.ts b/apps/web/core/components/onboarding/steps/role/index.ts
index 1efe34c51..d98033459 100644
--- a/apps/web/core/components/onboarding/steps/role/index.ts
+++ b/apps/web/core/components/onboarding/steps/role/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./root";
diff --git a/apps/web/core/components/onboarding/steps/role/root.tsx b/apps/web/core/components/onboarding/steps/role/root.tsx
index 17ae65649..43029d1cf 100644
--- a/apps/web/core/components/onboarding/steps/role/root.tsx
+++ b/apps/web/core/components/onboarding/steps/role/root.tsx
@@ -1,16 +1,18 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import { Controller, useForm } from "react-hook-form";
-import { Box, Check, PenTool, Rocket, Monitor, RefreshCw } from "lucide-react";
+import { Box, PenTool, Rocket, Monitor, RefreshCw } from "lucide-react";
 // plane imports
-import { ONBOARDING_TRACKER_ELEMENTS, USER_TRACKER_EVENTS } from "@plane/constants";
 import { Button } from "@plane/propel/button";
-import { ViewsIcon } from "@plane/propel/icons";
+import { CheckIcon, ViewsIcon } from "@plane/propel/icons";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { TUserProfile } from "@plane/types";
 import { EOnboardingSteps } from "@plane/types";
-// helpers
-import { captureError, captureSuccess, captureView } from "@/helpers/event-tracker.helper";
 // hooks
 import { useUserProfile } from "@/hooks/store/user";
 // local components
@@ -61,22 +63,12 @@ export const RoleSetupStep = observer(function RoleSetupStep({ handleStepChange
         updateUserProfile(profileUpdatePayload),
         // totalSteps > 2 && stepChange({ profile_complete: true }),
       ]);
-      captureSuccess({
-        eventName: USER_TRACKER_EVENTS.add_details,
-        payload: {
-          use_case: formData.use_case,
-          role: formData.role,
-        },
-      });
       setToast({
         type: TOAST_TYPE.SUCCESS,
         title: "Success",
         message: "Profile setup completed!",
       });
     } catch {
-      captureError({
-        eventName: USER_TRACKER_EVENTS.add_details,
-      });
       setToast({
         type: TOAST_TYPE.ERROR,
         title: "Error",
@@ -87,12 +79,8 @@ export const RoleSetupStep = observer(function RoleSetupStep({ handleStepChange
 
   const onSubmit = async (formData: TProfileSetupFormValues) => {
     if (!profile) return;
-    captureView({
-      elementName: ONBOARDING_TRACKER_ELEMENTS.PROFILE_SETUP_FORM,
-    });
-    await handleSubmitUserPersonalization(formData).then(() => {
-      handleStepChange(EOnboardingSteps.ROLE_SETUP);
-    });
+    await handleSubmitUserPersonalization(formData);
+    handleStepChange(EOnboardingSteps.ROLE_SETUP);
   };
 
   const handleSkip = () => {
@@ -107,7 +95,7 @@ export const RoleSetupStep = observer(function RoleSetupStep({ handleStepChange
       <CommonOnboardingHeader title="What's your role?" description="Let's set up Plane for how you work." />
       {/* Role Selection */}
       <div className="flex flex-col gap-3">
-        <p className="text-sm font-medium text-custom-text-400">Select one</p>
+        <p className="text-body-sm-semibold text-placeholder">Select one</p>
         <Controller
           control={control}
           name="role"
@@ -128,22 +116,22 @@ export const RoleSetupStep = observer(function RoleSetupStep({ handleStepChange
                       e.preventDefault();
                       onChange(role.id);
                     }}
-                    className={`w-full px-3 py-2 rounded-lg border transition-all duration-200 flex items-center justify-between ${
+                    className={`flex w-full items-center justify-between rounded-lg border px-3 py-2 transition-all duration-200 ${
                       isSelected
-                        ? "border-custom-primary-100 bg-custom-primary-10 text-custom-primary-100"
-                        : "border-custom-border-200 hover:border-custom-border-300 text-custom-text-300"
+                        ? "border-accent-strong bg-accent-subtle text-accent-primary"
+                        : "border-subtle text-tertiary hover:border-strong"
                     }`}
                   >
                     <div className="flex items-center space-x-3">
                       <Icon className="size-3.5" />
-                      <span className="font-medium">{role.label}</span>
+                      <span className="text-body-sm-semibold">{role.label}</span>
                     </div>
                     {isSelected && (
                       <>
                         <button
-                          className={`size-4 rounded border-2 flex items-center justify-center bg-blue-500 border-blue-500`}
+                          className={`border-blue-500 flex size-4 items-center justify-center rounded-sm border-2 bg-accent-primary`}
                         >
-                          <Check className="w-3 h-3 text-white" />
+                          <CheckIcon className="h-3 w-3 text-on-color" />
                         </button>
                       </>
                     )}
@@ -153,14 +141,14 @@ export const RoleSetupStep = observer(function RoleSetupStep({ handleStepChange
             </div>
           )}
         />
-        {errors.role && <span className="text-sm text-red-500">{errors.role.message}</span>}
+        {errors.role && <span className="text-13 text-danger-primary">{errors.role.message}</span>}
       </div>
       {/* Action Buttons */}
       <div className="space-y-3">
-        <Button variant="primary" type="submit" className="w-full" size="lg" disabled={isButtonDisabled}>
+        <Button variant="primary" type="submit" className="w-full" size="xl" disabled={isButtonDisabled}>
           Continue
         </Button>
-        <Button variant="link-neutral" onClick={handleSkip} className="w-full" size="lg">
+        <Button variant="ghost" onClick={handleSkip} className="w-full text-tertiary" size="xl">
           Skip
         </Button>
       </div>
diff --git a/apps/web/core/components/onboarding/steps/root.tsx b/apps/web/core/components/onboarding/steps/root.tsx
index f4941eafa..70297c1e7 100644
--- a/apps/web/core/components/onboarding/steps/root.tsx
+++ b/apps/web/core/components/onboarding/steps/root.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useEffect, useRef } from "react";
 // plane imports
 import type { IWorkspaceMemberInvitation } from "@plane/types";
@@ -49,7 +55,7 @@ export function OnboardingStepRoot(props: Props) {
 
   return (
     <div ref={scrollContainerRef} className="flex-1 overflow-y-auto">
-      <div className="flex items-center justify-center min-h-full p-8">
+      <div className="flex min-h-full items-center justify-center p-8">
         <div className="w-full max-w-[24rem]">
           <OnboardingStepContent {...props} />
         </div>
diff --git a/apps/web/core/components/onboarding/steps/team/index.ts b/apps/web/core/components/onboarding/steps/team/index.ts
index 1efe34c51..d98033459 100644
--- a/apps/web/core/components/onboarding/steps/team/index.ts
+++ b/apps/web/core/components/onboarding/steps/team/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./root";
diff --git a/apps/web/core/components/onboarding/steps/team/root.tsx b/apps/web/core/components/onboarding/steps/team/root.tsx
index db849f015..536110fd0 100644
--- a/apps/web/core/components/onboarding/steps/team/root.tsx
+++ b/apps/web/core/components/onboarding/steps/team/root.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React, { useEffect, useState } from "react";
 import { observer } from "mobx-react";
 import type {
@@ -9,29 +15,22 @@ import type {
   UseFormWatch,
 } from "react-hook-form";
 import { Controller, useFieldArray, useForm } from "react-hook-form";
-// icons
 import { usePopper } from "react-popper";
-import { Check, Plus, XCircle } from "lucide-react";
+import { XCircle } from "lucide-react";
 import { Listbox } from "@headlessui/react";
 // plane imports
 import type { EUserPermissions } from "@plane/constants";
-import { ROLE, ROLE_DETAILS, MEMBER_TRACKER_EVENTS, MEMBER_TRACKER_ELEMENTS } from "@plane/constants";
+import { ROLE, ROLE_DETAILS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { Button } from "@plane/propel/button";
-import { ChevronDownIcon } from "@plane/propel/icons";
+import { PlusIcon, CheckIcon, ChevronDownIcon } from "@plane/propel/icons";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
-// types
 import { EOnboardingSteps } from "@plane/types";
-// ui
 import { Input, Spinner } from "@plane/ui";
-// constants
-// helpers
-
 // hooks
-import { captureError, captureSuccess } from "@/helpers/event-tracker.helper";
 import { useWorkspace } from "@/hooks/store/use-workspace";
 // services
-import { WorkspaceService } from "@/plane-web/services";
+import { WorkspaceService } from "@/services/workspace.service";
 // components
 import { CommonOnboardingHeader } from "../common";
 
@@ -162,7 +161,7 @@ const InviteMemberInput = observer(function InviteMemberInput(props: InviteMembe
                 ref={ref}
                 hasError={Boolean(errors.emails?.[index]?.email)}
                 placeholder={placeholderEmails[index % placeholderEmails.length]}
-                className="w-full border-custom-border-300 text-xs placeholder:text-custom-text-400 sm:text-sm"
+                className="w-full border-strong text-11 placeholder:text-placeholder sm:text-13"
                 autoComplete="off"
               />
             )}
@@ -186,28 +185,26 @@ const InviteMemberInput = observer(function InviteMemberInput(props: InviteMembe
                 <Listbox.Button
                   type="button"
                   ref={setReferenceElement}
-                  className="flex w-full items-center justify-between gap-1 rounded-md px-2.5 py-2 text-sm border-[0.5px] border-custom-border-300"
+                  className="flex w-full items-center justify-between gap-1 rounded-md border-[0.5px] border-strong px-2.5 py-2 text-13"
                 >
                   <span
-                    className={`text-sm ${
-                      !getValues(`emails.${index}.role_active`) ? "text-custom-text-400" : "text-custom-text-100"
-                    } sm:text-sm`}
+                    className={`text-13 ${
+                      !getValues(`emails.${index}.role_active`) ? "text-placeholder" : "text-primary"
+                    } sm:text-13`}
                   >
                     {ROLE[value]}
                   </span>
 
                   <ChevronDownIcon
                     className={`size-3 ${
-                      !getValues(`emails.${index}.role_active`)
-                        ? "stroke-onboarding-text-400"
-                        : "stroke-onboarding-text-100"
+                      !getValues(`emails.${index}.role_active`) ? "stroke-placeholder" : "stroke-primary"
                     }`}
                   />
                 </Listbox.Button>
 
                 <Listbox.Options as="div">
                   <div
-                    className="p-2 absolute space-y-1 z-10 mt-1 h-fit w-48 sm:w-60 rounded-md border border-custom-border-300 bg-custom-background-100 shadow-sm focus:outline-none"
+                    className="shadow-sm absolute z-10 mt-1 h-fit w-48 space-y-1 rounded-md border border-strong bg-surface-1 p-2 focus:outline-none sm:w-60"
                     ref={setPopperElement}
                     style={styles.popper}
                     {...attributes.popper}
@@ -218,18 +215,18 @@ const InviteMemberInput = observer(function InviteMemberInput(props: InviteMembe
                         key={key}
                         value={parseInt(key)}
                         className={({ active, selected }) =>
-                          `cursor-pointer select-none truncate rounded px-1 py-1.5 ${
+                          `cursor-pointer truncate rounded-sm px-1 py-1.5 select-none ${
                             active || selected ? "bg-onboarding-background-400/40" : ""
-                          } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
+                          } ${selected ? "text-primary" : "text-secondary"}`
                         }
                       >
                         {({ selected }) => (
-                          <div className="flex items-center text-wrap gap-2 p-1">
+                          <div className="flex items-center gap-2 p-1 text-wrap">
                             <div className="flex flex-col">
-                              <div className="text-sm font-medium">{t(value.i18n_title)}</div>
-                              <div className="flex text-xs text-custom-text-300">{t(value.i18n_description)}</div>
+                              <div className="text-13 font-medium">{t(value.i18n_title)}</div>
+                              <div className="flex text-11 text-tertiary">{t(value.i18n_description)}</div>
                             </div>
-                            {selected && <Check className="h-4 w-4 shrink-0" />}
+                            {selected && <CheckIcon className="h-4 w-4 shrink-0" />}
                           </div>
                         )}
                       </Listbox.Option>
@@ -243,17 +240,17 @@ const InviteMemberInput = observer(function InviteMemberInput(props: InviteMembe
         {fields.length > 1 && (
           <button
             type="button"
-            className="absolute right-0 hidden place-items-center self-center rounded group-hover:grid"
+            className="absolute right-0 hidden place-items-center self-center rounded-sm group-hover:grid"
             onClick={() => remove(index)}
           >
-            <XCircle className="h-5 w-5 pl-0.5 text-custom-text-400" />
+            <XCircle className="h-5 w-5 pl-0.5 text-placeholder" />
           </button>
         )}
       </div>
       {email && !emailRegex.test(email) && (
         <div className="mx-8 my-1">
-          <span className="text-sm">🤥</span>{" "}
-          <span className="mt-1 text-xs text-red-500">That doesn{"'"}t look like an email address.</span>
+          <span className="text-13">🤥</span>{" "}
+          <span className="mt-1 text-11 text-danger-primary">That doesn{"'"}t look like an email address.</span>
         </div>
       )}
     </div>
@@ -301,28 +298,14 @@ export const InviteTeamStep = observer(function InviteTeamStep(props: Props) {
         })),
       })
       .then(async () => {
-        captureSuccess({
-          eventName: MEMBER_TRACKER_EVENTS.invite,
-          payload: {
-            workspace: workspace.slug,
-          },
-        });
         setToast({
           type: TOAST_TYPE.SUCCESS,
           title: "Success!",
           message: "Invitations sent successfully.",
         });
-
         await nextStep();
       })
       .catch((err) => {
-        captureError({
-          eventName: MEMBER_TRACKER_EVENTS.invite,
-          payload: {
-            workspace: workspace.slug,
-          },
-          error: err,
-        });
         setToast({
           type: TOAST_TYPE.ERROR,
           title: "Error!",
@@ -362,10 +345,10 @@ export const InviteTeamStep = observer(function InviteTeamStep(props: Props) {
         title="Invite your teammates"
         description="Work in plane happens best with your team. Invite them now to use Plane to its potential."
       />
-      <div className="w-full text-sm py-4">
-        <div className="group relative grid grid-cols-10 gap-4 mx-8 py-2">
-          <div className="col-span-6 px-1 text-sm text-custom-text-200 font-medium">Email</div>
-          <div className="col-span-4 px-1 text-sm text-custom-text-200 font-medium">Role</div>
+      <div className="w-full py-4 text-13">
+        <div className="group relative mx-8 grid grid-cols-10 gap-4 py-2">
+          <div className="col-span-6 px-1 text-13 font-medium text-secondary">Email</div>
+          <div className="col-span-4 px-1 text-13 font-medium text-secondary">Role</div>
         </div>
         <div className="mb-3 space-y-3 sm:space-y-4">
           {fields.map((field, index) => (
@@ -387,25 +370,24 @@ export const InviteTeamStep = observer(function InviteTeamStep(props: Props) {
         </div>
         <button
           type="button"
-          className="flex items-center mx-8 gap-1.5 bg-transparent text-sm font-medium text-custom-primary-100 outline-custom-primary-100"
+          className="mx-8 flex items-center gap-1.5 bg-transparent text-13 font-medium text-accent-primary outline-accent-strong"
           onClick={appendField}
         >
-          <Plus className="h-4 w-4" strokeWidth={2} />
+          <PlusIcon className="h-4 w-4" strokeWidth={2} />
           Add another
         </button>
       </div>
-      <div className="flex flex-col mx-auto px-8 sm:px-2 items-center justify-center gap-4 w-full">
+      <div className="mx-auto flex w-full flex-col items-center justify-center gap-4 px-8 sm:px-2">
         <Button
           variant="primary"
           type="submit"
-          size="lg"
+          size="xl"
           className="w-full"
           disabled={isInvitationDisabled || !isValid || isSubmitting}
-          data-ph-element={MEMBER_TRACKER_ELEMENTS.ONBOARDING_INVITE_MEMBER}
         >
           {isSubmitting ? <Spinner height="20px" width="20px" /> : "Continue"}
         </Button>
-        <Button variant="link-neutral" size="lg" className="w-full" onClick={nextStep}>
+        <Button variant="ghost" size="xl" className="w-full" onClick={nextStep}>
           I’ll do it later
         </Button>
       </div>
diff --git a/apps/web/core/components/onboarding/steps/usecase/index.ts b/apps/web/core/components/onboarding/steps/usecase/index.ts
index 1efe34c51..d98033459 100644
--- a/apps/web/core/components/onboarding/steps/usecase/index.ts
+++ b/apps/web/core/components/onboarding/steps/usecase/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./root";
diff --git a/apps/web/core/components/onboarding/steps/usecase/root.tsx b/apps/web/core/components/onboarding/steps/usecase/root.tsx
index f6df23401..8908adaf3 100644
--- a/apps/web/core/components/onboarding/steps/usecase/root.tsx
+++ b/apps/web/core/components/onboarding/steps/usecase/root.tsx
@@ -1,16 +1,19 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import { Controller, useForm } from "react-hook-form";
-import { Check } from "lucide-react";
 // plane imports
-import { ONBOARDING_TRACKER_ELEMENTS, USER_TRACKER_EVENTS, USE_CASES } from "@plane/constants";
+import { USE_CASES } from "@plane/constants";
 import { Button } from "@plane/propel/button";
+import { CheckIcon } from "@plane/propel/icons";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { TUserProfile } from "@plane/types";
 import { EOnboardingSteps } from "@plane/types";
 import { cn } from "@plane/utils";
-// helpers
-import { captureError, captureSuccess, captureView } from "@/helpers/event-tracker.helper";
 // hooks
 import { useUserProfile } from "@/hooks/store/user";
 // local imports
@@ -51,21 +54,12 @@ export const UseCaseSetupStep = observer(function UseCaseSetupStep({ handleStepC
         updateUserProfile(profileUpdatePayload),
         // totalSteps > 2 && stepChange({ profile_complete: true }),
       ]);
-      captureSuccess({
-        eventName: USER_TRACKER_EVENTS.add_details,
-        payload: {
-          use_case: profileUpdatePayload.use_case,
-        },
-      });
       setToast({
         type: TOAST_TYPE.SUCCESS,
         title: "Success",
         message: "Profile setup completed!",
       });
     } catch {
-      captureError({
-        eventName: USER_TRACKER_EVENTS.add_details,
-      });
       setToast({
         type: TOAST_TYPE.ERROR,
         title: "Error",
@@ -77,12 +71,8 @@ export const UseCaseSetupStep = observer(function UseCaseSetupStep({ handleStepC
   // on submit
   const onSubmit = async (formData: TProfileSetupFormValues) => {
     if (!profile) return;
-    captureView({
-      elementName: ONBOARDING_TRACKER_ELEMENTS.PROFILE_SETUP_FORM,
-    });
-    await handleSubmitUserPersonalization(formData).then(() => {
-      handleStepChange(EOnboardingSteps.USE_CASE_SETUP);
-    });
+    await handleSubmitUserPersonalization(formData);
+    handleStepChange(EOnboardingSteps.USE_CASE_SETUP);
   };
 
   // handle skip
@@ -100,7 +90,7 @@ export const UseCaseSetupStep = observer(function UseCaseSetupStep({ handleStepC
 
       {/* Use Case Selection */}
       <div className="flex flex-col gap-3">
-        <p className="text-sm font-medium text-custom-text-400">Select one or more</p>
+        <p className="text-body-sm-semibold text-placeholder">Select one or more</p>
 
         <Controller
           control={control}
@@ -128,42 +118,42 @@ export const UseCaseSetupStep = observer(function UseCaseSetupStep({ handleStepC
                         onChange([...currentValue, useCase]);
                       }
                     }}
-                    className={`w-full px-3 py-2 rounded-lg border transition-all duration-200 flex items-center gap-2 ${
+                    className={`flex w-full items-center gap-2 rounded-lg border px-3 py-2 transition-all duration-200 ${
                       isSelected
-                        ? "border-custom-primary-100 bg-custom-primary-10 text-custom-primary-100"
-                        : "border-custom-border-200 hover:border-custom-border-300 text-custom-text-300"
+                        ? "border-accent-strong bg-accent-subtle text-accent-primary"
+                        : "border-subtle text-tertiary hover:border-strong"
                     }`}
                   >
                     <span
-                      className={cn(`size-4 rounded border-2 flex items-center justify-center`, {
-                        "bg-custom-primary-100 border-custom-primary-100": isSelected,
-                        "border-custom-border-300": !isSelected,
+                      className={cn(`flex size-4 items-center justify-center rounded-sm border-2`, {
+                        "border-accent-strong bg-accent-primary": isSelected,
+                        "border-strong": !isSelected,
                       })}
                     >
-                      <Check
-                        className={cn("w-3 h-3 text-white", {
+                      <CheckIcon
+                        className={cn("h-3 w-3 text-on-color", {
                           "opacity-100": isSelected,
                           "opacity-0": !isSelected,
                         })}
                       />
                     </span>
 
-                    <span className="font-medium">{useCase}</span>
+                    <span className="text-body-sm-regular">{useCase}</span>
                   </button>
                 );
               })}
             </div>
           )}
         />
-        {errors.use_case && <span className="text-sm text-red-500">{errors.use_case.message}</span>}
+        {errors.use_case && <span className="text-13 text-danger-primary">{errors.use_case.message}</span>}
       </div>
 
       {/* Action Buttons */}
       <div className="space-y-3">
-        <Button variant="primary" type="submit" className="w-full" size="lg" disabled={isButtonDisabled}>
+        <Button variant="primary" type="submit" className="w-full" size="xl" disabled={isButtonDisabled}>
           Continue
         </Button>
-        <Button variant="link-neutral" onClick={handleSkip} className="w-full" size="lg">
+        <Button variant="ghost" onClick={handleSkip} className="w-full" size="xl">
           Skip
         </Button>
       </div>
diff --git a/apps/web/core/components/onboarding/steps/workspace/create.tsx b/apps/web/core/components/onboarding/steps/workspace/create.tsx
index 949144a37..f9c32a91f 100644
--- a/apps/web/core/components/onboarding/steps/workspace/create.tsx
+++ b/apps/web/core/components/onboarding/steps/workspace/create.tsx
@@ -1,28 +1,27 @@
-import React, { useState } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
 import { observer } from "mobx-react";
 import { Controller, useForm } from "react-hook-form";
 import { CircleCheck } from "lucide-react";
 // plane imports
-import {
-  ORGANIZATION_SIZE,
-  RESTRICTED_URLS,
-  WORKSPACE_TRACKER_ELEMENTS,
-  WORKSPACE_TRACKER_EVENTS,
-} from "@plane/constants";
+import { ORGANIZATION_SIZE, RESTRICTED_URLS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { Button } from "@plane/propel/button";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { IUser, IWorkspace } from "@plane/types";
 import { Spinner } from "@plane/ui";
-import { cn } from "@plane/utils";
-// helpers
-import { captureError, captureSuccess } from "@/helpers/event-tracker.helper";
+import { cn, validateWorkspaceName, validateSlug } from "@plane/utils";
 // hooks
+import { useInstance } from "@/hooks/store/use-instance";
 import { useWorkspace } from "@/hooks/store/use-workspace";
 import { useUserProfile, useUserSettings } from "@/hooks/store/user";
-// plane-web imports
-import { getIsWorkspaceCreationDisabled } from "@/plane-web/helpers/instance.helper";
-import { WorkspaceService } from "@/plane-web/services";
+// services
+import { WorkspaceService } from "@/services/workspace.service";
 // local components
 import { CommonOnboardingHeader } from "../common";
 
@@ -47,11 +46,12 @@ export const WorkspaceCreateStep = observer(function WorkspaceCreateStep({
   // plane hooks
   const { t } = useTranslation();
   // store hooks
+  const { config } = useInstance();
   const { updateUserProfile } = useUserProfile();
   const { fetchCurrentUserSettings } = useUserSettings();
   const { createWorkspace, fetchWorkspaces } = useWorkspace();
 
-  const isWorkspaceCreationEnabled = getIsWorkspaceCreationDisabled() === false;
+  const isWorkspaceCreationDisabled = config?.is_workspace_creation_disabled ?? false;
 
   // form info
   const {
@@ -71,47 +71,37 @@ export const WorkspaceCreateStep = observer(function WorkspaceCreateStep({
   const handleCreateWorkspace = async (formData: IWorkspace) => {
     if (isSubmitting) return;
 
-    await workspaceService
-      .workspaceSlugCheck(formData.slug)
-      .then(async (res) => {
-        if (res.status === true && !RESTRICTED_URLS.includes(formData.slug)) {
-          setSlugError(false);
-          await createWorkspace(formData)
-            .then(async (workspaceResponse) => {
-              setToast({
-                type: TOAST_TYPE.SUCCESS,
-                title: t("workspace_creation.toast.success.title"),
-                message: t("workspace_creation.toast.success.message"),
-              });
-              captureSuccess({
-                eventName: WORKSPACE_TRACKER_EVENTS.create,
-                payload: { slug: formData.slug },
-              });
-              await fetchWorkspaces();
-              await completeStep(workspaceResponse.id);
-              onComplete(formData.organization_size === "Just myself");
-            })
-            .catch(() => {
-              captureError({
-                eventName: WORKSPACE_TRACKER_EVENTS.create,
-                payload: { slug: formData.slug },
-                error: new Error("Error creating workspace"),
-              });
-              setToast({
-                type: TOAST_TYPE.ERROR,
-                title: t("workspace_creation.toast.error.title"),
-                message: t("workspace_creation.toast.error.message"),
-              });
-            });
-        } else setSlugError(true);
-      })
-      .catch(() =>
-        setToast({
-          type: TOAST_TYPE.ERROR,
-          title: t("workspace_creation.toast.error.title"),
-          message: t("workspace_creation.toast.error.message"),
-        })
-      );
+    try {
+      const res = (await workspaceService.workspaceSlugCheck(formData.slug)) as { status: boolean };
+      if (res.status === true && !RESTRICTED_URLS.includes(formData.slug)) {
+        setSlugError(false);
+        try {
+          const workspaceResponse = await createWorkspace(formData);
+          setToast({
+            type: TOAST_TYPE.SUCCESS,
+            title: t("workspace_creation.toast.success.title"),
+            message: t("workspace_creation.toast.success.message"),
+          });
+          await fetchWorkspaces();
+          await completeStep(workspaceResponse.id);
+          onComplete(formData.organization_size === "Just myself");
+        } catch {
+          setToast({
+            type: TOAST_TYPE.ERROR,
+            title: t("workspace_creation.toast.error.title"),
+            message: t("workspace_creation.toast.error.message"),
+          });
+        }
+      } else {
+        setSlugError(true);
+      }
+    } catch {
+      setToast({
+        type: TOAST_TYPE.ERROR,
+        title: t("workspace_creation.toast.error.title"),
+        message: t("workspace_creation.toast.error.message"),
+      });
+    }
   };
 
   const completeStep = async (workspaceId: string) => {
@@ -124,10 +114,10 @@ export const WorkspaceCreateStep = observer(function WorkspaceCreateStep({
 
   const isButtonDisabled = !isValid || invalidSlug || isSubmitting;
 
-  if (!isWorkspaceCreationEnabled) {
+  if (isWorkspaceCreationDisabled) {
     return (
       <div className="flex flex-col gap-10">
-        <span className="text-center text-base text-custom-text-300">
+        <span className="text-center text-14 text-tertiary">
           You don&apos;t seem to have any invites to a workspace and your instance admin has restricted creation of new
           workspaces. Please ask a workspace owner or admin to invite you to a workspace first and come back to this
           screen to join.
@@ -136,12 +126,17 @@ export const WorkspaceCreateStep = observer(function WorkspaceCreateStep({
     );
   }
   return (
-    <form className="flex flex-col gap-10" onSubmit={handleSubmit(handleCreateWorkspace)}>
+    <form
+      className="flex flex-col gap-10"
+      onSubmit={(e) => {
+        void handleSubmit(handleCreateWorkspace)(e);
+      }}
+    >
       <CommonOnboardingHeader title="Create your workspace" description="All your work — unified." />
       <div className="flex flex-col gap-8">
         <div className="flex flex-col gap-2">
           <label
-            className="text-sm text-custom-text-300 font-medium after:content-['*'] after:ml-0.5 after:text-red-500"
+            className="text-13 font-medium text-tertiary after:ml-0.5 after:text-danger-primary after:content-['*']"
             htmlFor="name"
           >
             {t("workspace_creation.form.name.label")}
@@ -151,8 +146,7 @@ export const WorkspaceCreateStep = observer(function WorkspaceCreateStep({
             name="name"
             rules={{
               required: t("common.errors.required"),
-              validate: (value) =>
-                /^[\w\s-]*$/.test(value) || t("workspace_creation.errors.validation.name_alphanumeric"),
+              validate: (value) => validateWorkspaceName(value, true),
               maxLength: {
                 value: 80,
                 message: t("workspace_creation.errors.validation.name_length"),
@@ -175,22 +169,23 @@ export const WorkspaceCreateStep = observer(function WorkspaceCreateStep({
                   placeholder="Enter workspace name"
                   ref={ref}
                   className={cn(
-                    "w-full px-3 py-2 text-custom-text-200 border border-custom-border-300 rounded-md bg-custom-background-100 focus:outline-none focus:ring-2 focus:ring-custom-primary-100 placeholder:text-custom-text-400 focus:border-transparent transition-all duration-200",
+                    "w-full rounded-md border border-strong bg-surface-1 px-3 py-2 text-secondary transition-all duration-200 placeholder:text-placeholder focus:border-transparent focus:ring-2 focus:ring-accent-strong focus:outline-none",
                     {
-                      "border-custom-border-300": !errors.name,
-                      "border-red-500": errors.name,
+                      "border-strong": !errors.name,
+                      "border-danger-strong": errors.name,
                     }
                   )}
+                  // eslint-disable-next-line jsx-a11y/no-autofocus
                   autoFocus
                 />
               </div>
             )}
           />
-          {errors.name && <span className="text-sm text-red-500">{errors.name.message}</span>}
+          {errors.name && <span className="text-13 text-danger-primary">{errors.name.message}</span>}
         </div>
         <div className="flex flex-col gap-2">
           <label
-            className="text-sm text-custom-text-300 font-medium after:content-['*'] after:ml-0.5 after:text-red-500"
+            className="text-13 font-medium text-tertiary after:ml-0.5 after:text-danger-primary after:content-['*']"
             htmlFor="slug"
           >
             {t("workspace_creation.form.url.label")}
@@ -208,14 +203,14 @@ export const WorkspaceCreateStep = observer(function WorkspaceCreateStep({
             render={({ field: { value, ref, onChange } }) => (
               <div
                 className={cn(
-                  "flex items-center w-full px-3 py-2 text-custom-text-200 border border-custom-border-300 rounded-md bg-custom-background-100 focus:outline-none focus:ring-2 focus:ring-custom-primary-100 focus:border-transparent transition-all duration-200",
+                  "flex w-full items-center rounded-md border border-strong bg-surface-1 px-3 py-2 text-secondary transition-all duration-200 focus:border-transparent focus:ring-2 focus:ring-accent-strong focus:outline-none",
                   {
-                    "border-custom-border-300": !errors.name,
-                    "border-red-500": errors.name,
+                    "border-strong": !errors.name,
+                    "border-danger-strong": errors.name,
                   }
                 )}
               >
-                <span className={cn("pr-0 text-custom-text-200 rounded-md whitespace-nowrap")}>
+                <span className={cn("rounded-md pr-0 whitespace-nowrap text-secondary")}>
                   {window && window.location.host}/
                 </span>
                 <input
@@ -224,31 +219,34 @@ export const WorkspaceCreateStep = observer(function WorkspaceCreateStep({
                   type="text"
                   value={value.toLocaleLowerCase().trim().replace(/ /g, "-")}
                   onChange={(e) => {
-                    if (/^[a-zA-Z0-9_-]+$/.test(e.target.value)) setInvalidSlug(false);
+                    const validation = validateSlug(e.target.value);
+                    if (validation === true) setInvalidSlug(false);
                     else setInvalidSlug(true);
                     onChange(e.target.value.toLowerCase());
                   }}
                   ref={ref}
                   placeholder={t("workspace_creation.form.url.placeholder")}
                   className={cn(
-                    "w-full px-3 py-0 pl-0 text-custom-text-200 border-none ring-none outline-none rounded-md bg-custom-background-100 placeholder:text-custom-text-400"
+                    "ring-none w-full rounded-md border-none bg-surface-1 px-3 py-0 pl-0 text-secondary outline-none placeholder:text-placeholder"
                   )}
                 />
               </div>
             )}
           />
-          <p className="text-sm text-custom-text-300">{t("workspace_creation.form.url.edit_slug")}</p>
+          <p className="text-13 text-tertiary">{t("workspace_creation.form.url.edit_slug")}</p>
           {slugError && (
-            <p className="-mt-3 text-sm text-red-500">{t("workspace_creation.errors.validation.url_already_taken")}</p>
+            <p className="-mt-3 text-13 text-danger-primary">
+              {t("workspace_creation.errors.validation.url_already_taken")}
+            </p>
           )}
           {invalidSlug && (
-            <p className="text-sm text-red-500">{t("workspace_creation.errors.validation.url_alphanumeric")}</p>
+            <p className="text-13 text-danger-primary">{t("workspace_creation.errors.validation.url_alphanumeric")}</p>
           )}
-          {errors.slug && <span className="text-sm text-red-500">{errors.slug.message}</span>}
+          {errors.slug && <span className="text-13 text-danger-primary">{errors.slug.message}</span>}
         </div>
         <div className="flex flex-col gap-2">
           <label
-            className="text-sm text-custom-text-300 font-medium after:content-['*'] after:ml-0.5 after:text-red-500"
+            className="text-13 font-medium text-tertiary after:ml-0.5 after:text-danger-primary after:content-['*']"
             htmlFor="organization_size"
           >
             {t("workspace_creation.form.organization_size.label")}
@@ -270,15 +268,13 @@ export const WorkspaceCreateStep = observer(function WorkspaceCreateStep({
                           e.stopPropagation();
                           onChange(size);
                         }}
-                        className={`text-sm px-3 py-2 rounded-lg border transition-all duration-200 flex gap-1 items-center justify-between ${
+                        className={`flex items-center justify-between gap-1 rounded-lg border px-3 py-2 text-13 transition-all duration-200 ${
                           isSelected
-                            ? "border-custom-border-200 bg-custom-background-80 text-custom-text-200"
-                            : "border-custom-border-200 hover:border-custom-border-300 text-custom-text-300"
+                            ? "border-subtle bg-layer-1 text-secondary"
+                            : "border-subtle text-tertiary hover:border-strong"
                         }`}
                       >
-                        <CircleCheck
-                          className={cn("size-4 text-custom-text-400", isSelected && "text-custom-text-200")}
-                        />
+                        <CircleCheck className={cn("size-4 text-placeholder", isSelected && "text-secondary")} />
 
                         <span className="font-medium">{size}</span>
                       </button>
@@ -288,24 +284,17 @@ export const WorkspaceCreateStep = observer(function WorkspaceCreateStep({
               )}
             />
             {errors.organization_size && (
-              <span className="text-sm text-red-500">{errors.organization_size.message}</span>
+              <span className="text-13 text-danger-primary">{errors.organization_size.message}</span>
             )}
           </div>
         </div>
       </div>
       <div className="flex flex-col gap-4">
-        <Button
-          data-ph-element={WORKSPACE_TRACKER_ELEMENTS.ONBOARDING_CREATE_WORKSPACE_BUTTON}
-          variant="primary"
-          type="submit"
-          size="lg"
-          className="w-full"
-          disabled={isButtonDisabled}
-        >
+        <Button variant="primary" type="submit" size="xl" className="w-full" disabled={isButtonDisabled}>
           {isSubmitting ? <Spinner height="20px" width="20px" /> : t("workspace_creation.button.default")}
         </Button>
         {hasInvitations && (
-          <Button variant="link-neutral" size="lg" className="w-full" onClick={handleCurrentViewChange}>
+          <Button variant="ghost" size="xl" className="w-full" onClick={handleCurrentViewChange}>
             Join existing workspace
           </Button>
         )}
diff --git a/apps/web/core/components/onboarding/steps/workspace/index.ts b/apps/web/core/components/onboarding/steps/workspace/index.ts
index 2cce58b07..fb5bdd9b4 100644
--- a/apps/web/core/components/onboarding/steps/workspace/index.ts
+++ b/apps/web/core/components/onboarding/steps/workspace/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./create";
 export * from "./join-invites";
 export * from "./root";
diff --git a/apps/web/core/components/onboarding/steps/workspace/join-invites.tsx b/apps/web/core/components/onboarding/steps/workspace/join-invites.tsx
index b052d9ef4..c49c0d2ac 100644
--- a/apps/web/core/components/onboarding/steps/workspace/join-invites.tsx
+++ b/apps/web/core/components/onboarding/steps/workspace/join-invites.tsx
@@ -1,19 +1,23 @@
-import React, { useState } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
 // plane imports
-import { MEMBER_TRACKER_ELEMENTS, MEMBER_TRACKER_EVENTS, ROLE } from "@plane/constants";
+import { ROLE } from "@plane/constants";
 import { Button } from "@plane/propel/button";
 import type { IWorkspaceMemberInvitation } from "@plane/types";
 import { Checkbox, Spinner } from "@plane/ui";
 import { truncateText } from "@plane/utils";
 // constants
 import { WorkspaceLogo } from "@/components/workspace/logo";
-// helpers
-import { captureError, captureSuccess } from "@/helpers/event-tracker.helper";
 // hooks
 import { useWorkspace } from "@/hooks/store/use-workspace";
 import { useUserSettings } from "@/hooks/store/user";
 // services
-import { WorkspaceService } from "@/plane-web/services";
+import { WorkspaceService } from "@/services/workspace.service";
 // local components
 import { CommonOnboardingHeader } from "../common";
 
@@ -52,24 +56,11 @@ export function WorkspaceJoinInvitesStep(props: Props) {
 
     try {
       await workspaceService.joinWorkspaces({ invitations: invitationsRespond });
-      captureSuccess({
-        eventName: MEMBER_TRACKER_EVENTS.accept,
-        payload: {
-          member_id: invitation?.id,
-        },
-      });
       await fetchWorkspaces();
       await fetchCurrentUserSettings();
       await handleNextStep();
     } catch (error: any) {
       console.error(error);
-      captureError({
-        eventName: MEMBER_TRACKER_EVENTS.accept,
-        payload: {
-          member_id: invitation?.id,
-        },
-        error: error,
-      });
       setIsJoiningWorkspaces(false);
     }
   };
@@ -86,7 +77,7 @@ export function WorkspaceJoinInvitesStep(props: Props) {
             return (
               <div
                 key={invitation.id}
-                className={`flex cursor-pointer items-center gap-2 rounded-lg border px-3 py-2 border-custom-border-200 hover:bg-custom-background-90`}
+                className={`flex cursor-pointer items-center gap-2 rounded-lg border border-subtle px-3 py-2 hover:bg-surface-2`}
                 onClick={() => handleInvitation(invitation, isSelected ? "withdraw" : "accepted")}
               >
                 <div className="flex-shrink-0">
@@ -97,8 +88,8 @@ export function WorkspaceJoinInvitesStep(props: Props) {
                   />
                 </div>
                 <div className="min-w-0 flex-1">
-                  <div className="text-sm font-medium">{truncateText(invitedWorkspace?.name, 30)}</div>
-                  <p className="text-xs text-custom-text-200">{ROLE[invitation.role]}</p>
+                  <div className="text-13 font-medium">{truncateText(invitedWorkspace?.name, 30)}</div>
+                  <p className="text-11 text-secondary">{ROLE[invitation.role]}</p>
                 </div>
                 <span className={`flex-shrink-0`}>
                   <Checkbox checked={isSelected} />
@@ -110,17 +101,16 @@ export function WorkspaceJoinInvitesStep(props: Props) {
       <div className="flex flex-col gap-4">
         <Button
           variant="primary"
-          size="lg"
+          size="xl"
           className="w-full"
           onClick={submitInvitations}
           disabled={isJoiningWorkspaces || !invitationsRespond.length}
-          data-ph-element={MEMBER_TRACKER_ELEMENTS.ONBOARDING_JOIN_WORKSPACE}
         >
           {isJoiningWorkspaces ? <Spinner height="20px" width="20px" /> : "Continue"}
         </Button>
         <Button
-          variant="link-neutral"
-          size="lg"
+          variant="ghost"
+          size="xl"
           className="w-full"
           onClick={handleCurrentViewChange}
           disabled={isJoiningWorkspaces}
diff --git a/apps/web/core/components/onboarding/steps/workspace/root.tsx b/apps/web/core/components/onboarding/steps/workspace/root.tsx
index f5cfef3ec..f12348793 100644
--- a/apps/web/core/components/onboarding/steps/workspace/root.tsx
+++ b/apps/web/core/components/onboarding/steps/workspace/root.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React, { useEffect, useState } from "react";
 import { observer } from "mobx-react";
 // plane imports
diff --git a/apps/web/core/components/onboarding/switch-account-dropdown.tsx b/apps/web/core/components/onboarding/switch-account-dropdown.tsx
index 4d55d11bd..bf96aae61 100644
--- a/apps/web/core/components/onboarding/switch-account-dropdown.tsx
+++ b/apps/web/core/components/onboarding/switch-account-dropdown.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useState } from "react";
 import { observer } from "mobx-react";
 import { Menu, Transition } from "@headlessui/react";
@@ -33,19 +38,19 @@ export const SwitchAccountDropdown = observer(function SwitchAccountDropdown(pro
     <>
       <SwitchAccountModal isOpen={showSwitchAccountModal} onClose={() => setShowSwitchAccountModal(false)} />
       <Menu as="div" className="relative">
-        <Menu.Button className="flex items-center gap-x-2.5 px-2 py-1.5 rounded-lg bg-custom-background-90 z-10">
-          <div className="size-6 rounded-full bg-green-700 flex items-center justify-center text-white font-semibold text-sm capitalize">
+        <Menu.Button className="z-10 flex items-center gap-x-2.5 rounded-lg bg-layer-1 px-2 py-1.5">
+          <div className="flex size-6 items-center justify-center rounded-full bg-success-primary text-13 font-semibold text-on-color capitalize">
             {user?.avatar_url ? (
               <img
                 src={getFileURL(user?.avatar_url)}
                 alt={user?.display_name}
-                className="w-full h-full rounded-full object-cover"
+                className="h-full w-full rounded-full object-cover"
               />
             ) : (
               <>{fullName?.[0] ?? "R"}</>
             )}
           </div>
-          <span className="text-sm font-medium text-custom-text-200">{displayName}</span>
+          <span className="text-13 font-medium text-secondary">{displayName}</span>
         </Menu.Button>
         <Transition
           enter="transition duration-100 ease-out"
@@ -55,13 +60,13 @@ export const SwitchAccountDropdown = observer(function SwitchAccountDropdown(pro
           leaveFrom="transform scale-100 opacity-100"
           leaveTo="transform scale-95 opacity-0"
         >
-          <Menu.Items className="absolute z-10 right-0 rounded-md border-[0.5px] border-custom-border-300 mt-2 bg-custom-background-100 px-2 py-2.5 text-sm min-w-[12rem] shadow-custom-shadow-rg">
+          <Menu.Items className="absolute right-0 z-10 mt-2 min-w-[12rem] rounded-md border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 text-13 shadow-raised-200">
             <Menu.Item
               as="button"
               type="button"
               className={({ active }) =>
-                cn("text-red-500 px-1 py-1.5 whitespace-nowrap text-left rounded w-full", {
-                  "bg-custom-background-80": active,
+                cn("w-full rounded-sm px-1 py-1.5 text-left whitespace-nowrap text-danger-primary", {
+                  "bg-layer-1": active,
                 })
               }
               onClick={() => setShowSwitchAccountModal(true)}
diff --git a/apps/web/core/components/onboarding/switch-account-modal.tsx b/apps/web/core/components/onboarding/switch-account-modal.tsx
index 5eca0648b..aa80f8e33 100644
--- a/apps/web/core/components/onboarding/switch-account-modal.tsx
+++ b/apps/web/core/components/onboarding/switch-account-modal.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React, { useState } from "react";
 
 import { useTheme } from "next-themes";
@@ -62,7 +68,7 @@ export function SwitchAccountModal(props: Props) {
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
+          <div className="fixed inset-0 bg-backdrop transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-20 overflow-y-auto">
@@ -76,21 +82,21 @@ export function SwitchAccountModal(props: Props) {
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-custom-background-100 text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-[40rem]">
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-surface-1 text-left shadow-raised-200 transition-all sm:my-8 sm:w-[40rem]">
                 <div className="p-6 pb-1">
                   <div className="flex gap-x-4">
                     <div className="flex items-start">
-                      <div className="grid place-items-center rounded-full bg-custom-primary-100/20 p-4">
-                        <ArrowRightLeft className="h-5 w-5 text-custom-primary-100" aria-hidden="true" />
+                      <div className="grid place-items-center rounded-full bg-accent-primary/20 p-4">
+                        <ArrowRightLeft className="h-5 w-5 text-accent-primary" aria-hidden="true" />
                       </div>
                     </div>
-                    <div className="flex flex-col py-3 gap-y-6">
-                      <Dialog.Title as="h3" className="text-2xl font-medium leading-6 text-custom-text-100">
+                    <div className="flex flex-col gap-y-6 py-3">
+                      <Dialog.Title as="h3" className="text-20 leading-6 font-medium text-primary">
                         Switch account
                       </Dialog.Title>
                       {userData?.email && (
-                        <div className="text-base font-normal text-custom-text-200">
-                          If you have signed up via <span className="text-custom-primary-100">{userData.email}</span>{" "}
+                        <div className="text-14 font-regular text-secondary">
+                          If you have signed up via <span className="text-accent-primary">{userData.email}</span>{" "}
                           un-intentionally, you can switch your account to a different one from here.
                         </div>
                       )}
@@ -98,7 +104,7 @@ export function SwitchAccountModal(props: Props) {
                   </div>
                 </div>
                 <div className="mb-2 flex items-center justify-end gap-3 p-4 sm:px-6">
-                  <Button variant="accent-primary" onClick={handleSwitchAccount} disabled={switchingAccount}>
+                  <Button variant="secondary" size="lg" onClick={handleSwitchAccount} disabled={switchingAccount}>
                     {switchingAccount ? "Switching..." : "Switch account"}
                   </Button>
                 </div>
diff --git a/apps/web/core/components/pages/dropdowns/actions.tsx b/apps/web/core/components/pages/dropdowns/actions.tsx
index c2ea9ec04..aec992c40 100644
--- a/apps/web/core/components/pages/dropdowns/actions.tsx
+++ b/apps/web/core/components/pages/dropdowns/actions.tsx
@@ -1,32 +1,24 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useMemo, useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
-import {
-  ArchiveRestoreIcon,
-  Copy,
-  ExternalLink,
-  FileOutput,
-  Globe2,
-  Link,
-  Lock,
-  LockKeyhole,
-  LockKeyholeOpen,
-  Trash2,
-} from "lucide-react";
+import { ArchiveRestoreIcon, FileOutput, LockKeyhole, LockKeyholeOpen } from "lucide-react";
 // constants
-import { EPageAccess, PROJECT_PAGE_TRACKER_ELEMENTS } from "@plane/constants";
+import { EPageAccess } from "@plane/constants";
 // plane editor
-import type { EditorRefApi } from "@plane/editor";
+import { LinkIcon, CopyIcon, LockIcon, NewTabIcon, ArchiveIcon, TrashIcon, GlobeIcon } from "@plane/propel/icons";
 // plane ui
-import { ArchiveIcon } from "@plane/propel/icons";
 import type { TContextMenuItem } from "@plane/ui";
 import { ContextMenu, CustomMenu } from "@plane/ui";
 // components
 import { cn } from "@plane/utils";
 import { DeletePageModal } from "@/components/pages/modals/delete-page-modal";
-// helpers
 // hooks
-import { captureClick } from "@/helpers/event-tracker.helper";
 import { usePageOperations } from "@/hooks/use-page-operations";
 // plane web components
 import { MovePageModal } from "@/plane-web/components/pages";
@@ -93,9 +85,6 @@ export const PageActions = observer(function PageActions(props: Props) {
         {
           key: "toggle-lock",
           action: () => {
-            captureClick({
-              elementName: PROJECT_PAGE_TRACKER_ELEMENTS.LOCK_BUTTON,
-            });
             pageOperations.toggleLock();
           },
           title: is_locked ? "Unlock" : "Lock",
@@ -105,47 +94,38 @@ export const PageActions = observer(function PageActions(props: Props) {
         {
           key: "toggle-access",
           action: () => {
-            captureClick({
-              elementName: PROJECT_PAGE_TRACKER_ELEMENTS.ACCESS_TOGGLE,
-            });
             pageOperations.toggleAccess();
           },
           title: access === EPageAccess.PUBLIC ? "Make private" : "Make public",
-          icon: access === EPageAccess.PUBLIC ? Lock : Globe2,
+          icon: access === EPageAccess.PUBLIC ? LockIcon : GlobeIcon,
           shouldRender: canCurrentUserChangeAccess && !archived_at,
         },
         {
           key: "open-in-new-tab",
           action: pageOperations.openInNewTab,
           title: "Open in new tab",
-          icon: ExternalLink,
+          icon: NewTabIcon,
           shouldRender: true,
         },
         {
           key: "copy-link",
           action: pageOperations.copyLink,
           title: "Copy link",
-          icon: Link,
+          icon: LinkIcon,
           shouldRender: true,
         },
         {
           key: "make-a-copy",
           action: () => {
-            captureClick({
-              elementName: PROJECT_PAGE_TRACKER_ELEMENTS.DUPLICATE_BUTTON,
-            });
             pageOperations.duplicate();
           },
           title: "Make a copy",
-          icon: Copy,
+          icon: CopyIcon,
           shouldRender: canCurrentUserDuplicatePage,
         },
         {
           key: "archive-restore",
           action: () => {
-            captureClick({
-              elementName: PROJECT_PAGE_TRACKER_ELEMENTS.ARCHIVE_BUTTON,
-            });
             pageOperations.toggleArchive();
           },
           title: archived_at ? "Restore" : "Archive",
@@ -155,13 +135,10 @@ export const PageActions = observer(function PageActions(props: Props) {
         {
           key: "delete",
           action: () => {
-            captureClick({
-              elementName: PROJECT_PAGE_TRACKER_ELEMENTS.CONTEXT_MENU,
-            });
             setDeletePageModal(true);
           },
           title: "Delete",
-          icon: Trash2,
+          icon: TrashIcon,
           shouldRender: canCurrentUserDeletePage && !!archived_at,
         },
         {
diff --git a/apps/web/core/components/pages/dropdowns/index.ts b/apps/web/core/components/pages/dropdowns/index.ts
index 8ff5a89af..8f46fb467 100644
--- a/apps/web/core/components/pages/dropdowns/index.ts
+++ b/apps/web/core/components/pages/dropdowns/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./actions";
diff --git a/apps/web/core/components/pages/editor/content-limit-banner.tsx b/apps/web/core/components/pages/editor/content-limit-banner.tsx
index cd1664115..52fba7e4e 100644
--- a/apps/web/core/components/pages/editor/content-limit-banner.tsx
+++ b/apps/web/core/components/pages/editor/content-limit-banner.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { TriangleAlert } from "lucide-react";
 import { cn } from "@plane/utils";
 
@@ -6,30 +12,27 @@ type Props = {
   onDismiss?: () => void;
 };
 
-export const ContentLimitBanner: React.FC<Props> = ({ className, onDismiss }) => (
-  <div
-    className={cn(
-      "flex items-center gap-2 bg-custom-background-80 border-b border-custom-border-200 px-4 py-2.5 text-sm",
-      className
-    )}
-  >
-    <div className="flex items-center gap-2 text-custom-text-200 mx-auto">
-      <span className="text-amber-500">
-        <TriangleAlert />
-      </span>
-      <span className="font-medium">
-        Content limit reached and live sync is off. Create a new page or use nested pages to continue syncing.
-      </span>
+export function ContentLimitBanner({ className, onDismiss }: Props) {
+  return (
+    <div className={cn("text-sm flex items-center gap-2 border-b border-subtle-1 bg-layer-2 px-4 py-2.5", className)}>
+      <div className="mx-auto flex items-center gap-2 text-secondary">
+        <span className="text-amber-500">
+          <TriangleAlert />
+        </span>
+        <span className="font-medium">
+          Content limit reached and live sync is off. Create a new page or use nested pages to continue syncing.
+        </span>
+      </div>
+      {onDismiss && (
+        <button
+          type="button"
+          onClick={onDismiss}
+          className="ml-auto text-placeholder hover:text-secondary"
+          aria-label="Dismiss content limit warning"
+        >
+          ✕
+        </button>
+      )}
     </div>
-    {onDismiss && (
-      <button
-        type="button"
-        onClick={onDismiss}
-        className="ml-auto text-custom-text-300 hover:text-custom-text-200"
-        aria-label="Dismiss content limit warning"
-      >
-        ✕
-      </button>
-    )}
-  </div>
-);
+  );
+}
diff --git a/apps/web/core/components/pages/editor/editor-body.tsx b/apps/web/core/components/pages/editor/editor-body.tsx
index e7f6309da..9270386dc 100644
--- a/apps/web/core/components/pages/editor/editor-body.tsx
+++ b/apps/web/core/components/pages/editor/editor-body.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useCallback, useEffect, useMemo, useRef } from "react";
 import { observer } from "mobx-react";
 // plane imports
@@ -39,7 +45,6 @@ import type { TPageInstance } from "@/store/pages/base-page";
 import { PageContentLoader } from "../loaders/page-content-loader";
 import { PageEditorHeaderRoot } from "./header";
 import { PageContentBrowser } from "./summary";
-import { PageEditorTitle } from "./title";
 
 export type TEditorBodyConfig = {
   fileHandler: TFileHandler;
@@ -218,7 +223,7 @@ export const PageEditorBody = observer(function PageEditorBody(props: Props) {
   );
 
   const blockWidthClassName = cn(
-    "block bg-transparent w-full max-w-[720px] mx-auto transition-all duration-200 ease-in-out",
+    "mx-auto block w-full max-w-[720px] bg-transparent transition-all duration-200 ease-in-out",
     {
       "max-w-[1152px]": isFullWidth,
     }
@@ -230,67 +235,69 @@ export const PageEditorBody = observer(function PageEditorBody(props: Props) {
 
   return (
     <Row
-      className="relative size-full flex flex-col overflow-y-auto overflow-x-hidden vertical-scrollbar scrollbar-md duration-200"
+      className="vertical-scrollbar relative flex scrollbar-md size-full flex-col overflow-x-hidden overflow-y-auto duration-200"
       variant={ERowVariant.HUGGING}
     >
       <div id="page-content-container" className="relative w-full flex-shrink-0">
         {/* table of content */}
         {!isNavigationPaneOpen && (
-          <div className="page-summary-container absolute h-full right-0 top-[64px] z-[5]">
+          <div className="page-summary-container absolute top-[64px] right-0 z-[5] h-full">
             <div className="sticky top-[72px]">
               <div className="group/page-toc relative px-page-x">
                 <div
-                  className="!cursor-pointer max-h-[50vh] overflow-hidden"
+                  className="max-h-[50vh] !cursor-pointer overflow-hidden"
                   role="button"
                   aria-label={t("page_navigation_pane.outline_floating_button")}
                   onClick={handleOpenNavigationPane}
                 >
                   <PageContentBrowser className="overflow-y-auto" editorRef={editorRef} showOutline />
                 </div>
-                <div className="absolute top-0 right-0 opacity-0 translate-x-1/2 pointer-events-none group-hover/page-toc:opacity-100 group-hover/page-toc:-translate-x-1/4 group-hover/page-toc:pointer-events-auto transition-all duration-300 w-52 max-h-[70vh] overflow-y-scroll vertical-scrollbar scrollbar-sm whitespace-nowrap bg-custom-background-90 p-4 rounded">
+                <div className="vertical-scrollbar pointer-events-none absolute top-0 right-0 scrollbar-sm max-h-[70vh] w-52 translate-x-1/2 overflow-y-scroll rounded-sm bg-surface-2 p-4 whitespace-nowrap opacity-0 transition-all duration-300 group-hover/page-toc:pointer-events-auto group-hover/page-toc:-translate-x-1/4 group-hover/page-toc:opacity-100">
                   <PageContentBrowser className="overflow-y-auto" editorRef={editorRef} />
                 </div>
               </div>
             </div>
           </div>
         )}
-        <div className="page-header-container group/page-header">
-          <div className={blockWidthClassName}>
-            <PageEditorHeaderRoot page={page} projectId={projectId} />
+        <div>
+          <div className="page-header-container group/page-header">
+            <div className={blockWidthClassName}>
+              <PageEditorHeaderRoot page={page} projectId={projectId} />
+            </div>
           </div>
+          <CollaborativeDocumentEditorWithRef
+            editable={isContentEditable}
+            id={pageId}
+            fileHandler={config.fileHandler}
+            handleEditorReady={handleEditorReady}
+            ref={editorForwardRef}
+            titleRef={titleEditorRef}
+            containerClassName="h-full p-0 pb-64"
+            displayConfig={displayConfig}
+            getEditorMetaData={getEditorMetaData}
+            mentionHandler={{
+              searchCallback: async (query) => {
+                const res = await fetchMentions(query);
+                if (!res) throw new Error("Failed in fetching mentions");
+                return res;
+              },
+              renderComponent: (props) => <EditorMentionsRoot {...props} />,
+              getMentionedEntityDetails: (id: string) => ({ display_name: getUserDetails(id)?.display_name ?? "" }),
+            }}
+            updatePageProperties={updatePageProperties}
+            realtimeConfig={realtimeConfig}
+            serverHandler={serverHandler}
+            user={userConfig}
+            disabledExtensions={documentEditorExtensions.disabled}
+            flaggedExtensions={documentEditorExtensions.flagged}
+            aiHandler={{
+              menu: getAIMenu,
+            }}
+            onAssetChange={updateAssetsList}
+            extendedEditorProps={extendedEditorProps}
+            isFetchingFallbackBinary={isFetchingFallbackBinary}
+          />
         </div>
-        <CollaborativeDocumentEditorWithRef
-          editable={isContentEditable}
-          id={pageId}
-          fileHandler={config.fileHandler}
-          handleEditorReady={handleEditorReady}
-          ref={editorForwardRef}
-          titleRef={titleEditorRef}
-          containerClassName="h-full p-0 pb-64"
-          displayConfig={displayConfig}
-          getEditorMetaData={getEditorMetaData}
-          mentionHandler={{
-            searchCallback: async (query) => {
-              const res = await fetchMentions(query);
-              if (!res) throw new Error("Failed in fetching mentions");
-              return res;
-            },
-            renderComponent: (props) => <EditorMentionsRoot {...props} />,
-            getMentionedEntityDetails: (id: string) => ({ display_name: getUserDetails(id)?.display_name ?? "" }),
-          }}
-          updatePageProperties={updatePageProperties}
-          realtimeConfig={realtimeConfig}
-          serverHandler={serverHandler}
-          user={userConfig}
-          disabledExtensions={documentEditorExtensions.disabled}
-          flaggedExtensions={documentEditorExtensions.flagged}
-          aiHandler={{
-            menu: getAIMenu,
-          }}
-          onAssetChange={updateAssetsList}
-          extendedEditorProps={extendedEditorProps}
-          isFetchingFallbackBinary={isFetchingFallbackBinary}
-        />
       </div>
     </Row>
   );
diff --git a/apps/web/core/components/pages/editor/header/index.ts b/apps/web/core/components/pages/editor/header/index.ts
index 1efe34c51..d98033459 100644
--- a/apps/web/core/components/pages/editor/header/index.ts
+++ b/apps/web/core/components/pages/editor/header/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./root";
diff --git a/apps/web/core/components/pages/editor/header/logo-picker.tsx b/apps/web/core/components/pages/editor/header/logo-picker.tsx
index 11cbc46c0..1f037fd6d 100644
--- a/apps/web/core/components/pages/editor/header/logo-picker.tsx
+++ b/apps/web/core/components/pages/editor/header/logo-picker.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useState } from "react";
 import { observer } from "mobx-react";
 // plane imports
@@ -21,8 +27,8 @@ export const PageEditorHeaderLogoPicker = observer(function PageEditorHeaderLogo
 
   return (
     <div
-      className={cn(className, "max-h-0 pointer-events-none transition-all ease-linear duration-300", {
-        "max-h-[56px] pointer-events-auto": isLogoSelected,
+      className={cn(className, "pointer-events-none max-h-0 transition-all duration-300 ease-linear", {
+        "pointer-events-auto max-h-[56px]": isLogoSelected,
       })}
     >
       <EmojiPicker
@@ -32,8 +38,8 @@ export const PageEditorHeaderLogoPicker = observer(function PageEditorHeaderLogo
         buttonClassName="flex items-center justify-center"
         label={
           <div
-            className={cn("-ml-[8px] size-[56px] grid place-items-center rounded transition-colors", {
-              "hover:bg-custom-background-80": isContentEditable,
+            className={cn("-ml-[8px] grid size-[56px] place-items-center rounded-sm transition-colors", {
+              "hover:bg-layer-1": isContentEditable,
             })}
           >
             {isLogoSelected && <Logo logo={logo_props} size={48} type="lucide" />}
diff --git a/apps/web/core/components/pages/editor/header/root.tsx b/apps/web/core/components/pages/editor/header/root.tsx
index cbb9b1eb3..f70e7b32c 100644
--- a/apps/web/core/components/pages/editor/header/root.tsx
+++ b/apps/web/core/components/pages/editor/header/root.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useState } from "react";
 import { observer } from "mobx-react";
 import { SmilePlus } from "lucide-react";
@@ -25,10 +31,10 @@ export const PageEditorHeaderRoot = observer(function PageEditorHeaderRoot(props
 
   return (
     <>
-      <div className="h-[48px] flex items-end text-left">
+      <div className="flex h-[48px] items-end text-left">
         {!isLogoSelected && (
           <div
-            className={cn("opacity-0 group-hover/page-header:opacity-100 transition-all duration-200", {
+            className={cn("opacity-0 transition-all duration-200 group-hover/page-header:opacity-100", {
               "opacity-100": isTitleEmpty,
             })}
           >
@@ -41,13 +47,13 @@ export const PageEditorHeaderRoot = observer(function PageEditorHeaderRoot(props
                 <button
                   type="button"
                   className={cn(
-                    "flex items-center gap-1 p-1 rounded font-medium text-sm hover:bg-custom-background-80 text-custom-text-300 outline-none transition-colors",
+                    "flex items-center gap-1 rounded-sm p-1 text-13 font-medium text-tertiary transition-colors outline-none hover:bg-layer-1",
                     {
-                      "bg-custom-background-80": isLogoPickerOpen,
+                      "bg-layer-1": isLogoPickerOpen,
                     }
                   )}
                 >
-                  <SmilePlus className="flex-shrink-0 size-4" />
+                  <SmilePlus className="size-4 flex-shrink-0" />
                   Icon
                 </button>
               }
@@ -65,7 +71,7 @@ export const PageEditorHeaderRoot = observer(function PageEditorHeaderRoot(props
           </div>
         )}
       </div>
-      <PageEditorHeaderLogoPicker className="flex-shrink-0 w-full mt-2 flex" page={page} />
+      <PageEditorHeaderLogoPicker className="mt-2 flex w-full flex-shrink-0" page={page} />
     </>
   );
 });
diff --git a/apps/web/core/components/pages/editor/page-root.tsx b/apps/web/core/components/pages/editor/page-root.tsx
index 9736be086..728b47fe9 100644
--- a/apps/web/core/components/pages/editor/page-root.tsx
+++ b/apps/web/core/components/pages/editor/page-root.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useCallback, useEffect, useRef, useState } from "react";
 import { observer } from "mobx-react";
 // plane imports
@@ -43,7 +49,7 @@ type TPageRootProps = {
   customRealtimeEventHandlers?: TCustomEventHandlers;
 };
 
-export const PageRoot = observer((props: TPageRootProps) => {
+export const PageRoot = observer(function PageRoot(props: TPageRootProps) {
   const {
     config,
     handlers,
@@ -148,8 +154,8 @@ export const PageRoot = observer((props: TPageRootProps) => {
   );
 
   return (
-    <div className="relative size-full overflow-hidden flex transition-all duration-300 ease-in-out">
-      <div className="size-full flex flex-col overflow-hidden">
+    <div className="relative flex size-full overflow-hidden transition-all duration-300 ease-in-out">
+      <div className="flex size-full flex-col overflow-hidden">
         <PageVersionsOverlay
           editorComponent={PagesVersionEditor}
           fetchVersionDetails={handlers.fetchVersionDetails}
diff --git a/apps/web/core/components/pages/editor/summary/content-browser.tsx b/apps/web/core/components/pages/editor/summary/content-browser.tsx
index ebfb22bf4..b739660f6 100644
--- a/apps/web/core/components/pages/editor/summary/content-browser.tsx
+++ b/apps/web/core/components/pages/editor/summary/content-browser.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useState, useEffect, useCallback } from "react";
 // plane imports
 import type { EditorRefApi, IMarking } from "@plane/editor";
@@ -49,7 +55,7 @@ export function PageContentBrowser(props: Props) {
   return (
     <div
       className={cn(
-        "h-full flex flex-col items-start gap-y-1 mt-2",
+        "mt-2 flex h-full flex-col items-start gap-y-1",
         {
           "gap-y-2": showOutline,
         },
@@ -63,7 +69,7 @@ export function PageContentBrowser(props: Props) {
           return (
             <div
               key={`${marking.level}-${marking.sequence}`}
-              className="flex-shrink-0 h-0.5 bg-custom-border-400 self-end rounded-sm"
+              className="h-0.5 flex-shrink-0 self-end rounded-xs bg-layer-3"
               style={{
                 width: marking.level === 1 ? "20px" : marking.level === 2 ? "18px" : "14px",
               }}
diff --git a/apps/web/core/components/pages/editor/summary/heading-components.tsx b/apps/web/core/components/pages/editor/summary/heading-components.tsx
index e02df4100..2ebca766d 100644
--- a/apps/web/core/components/pages/editor/summary/heading-components.tsx
+++ b/apps/web/core/components/pages/editor/summary/heading-components.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // plane imports
 import type { IMarking } from "@plane/editor";
 import { cn } from "@plane/utils";
@@ -8,11 +14,11 @@ export type THeadingComponentProps = {
 };
 
 const COMMON_CLASSNAME =
-  "flex-shrink-0 w-full py-1 text-left font-medium text-custom-text-300 hover:text-custom-primary-100 truncate transition-colors";
+  "flex-shrink-0 w-full py-1 text-left font-medium text-tertiary hover:text-accent-primary truncate transition-colors";
 
 export function OutlineHeading1({ marking, onClick }: THeadingComponentProps) {
   return (
-    <button type="button" onClick={onClick} className={cn(COMMON_CLASSNAME, "text-sm pl-1")}>
+    <button type="button" onClick={onClick} className={cn(COMMON_CLASSNAME, "pl-1 text-13")}>
       {marking.text}
     </button>
   );
@@ -20,7 +26,7 @@ export function OutlineHeading1({ marking, onClick }: THeadingComponentProps) {
 
 export function OutlineHeading2({ marking, onClick }: THeadingComponentProps) {
   return (
-    <button type="button" onClick={onClick} className={cn(COMMON_CLASSNAME, "text-xs pl-2")}>
+    <button type="button" onClick={onClick} className={cn(COMMON_CLASSNAME, "pl-2 text-11")}>
       {marking.text}
     </button>
   );
@@ -28,7 +34,7 @@ export function OutlineHeading2({ marking, onClick }: THeadingComponentProps) {
 
 export function OutlineHeading3({ marking, onClick }: THeadingComponentProps) {
   return (
-    <button type="button" onClick={onClick} className={cn(COMMON_CLASSNAME, "text-xs pl-4")}>
+    <button type="button" onClick={onClick} className={cn(COMMON_CLASSNAME, "pl-4 text-11")}>
       {marking.text}
     </button>
   );
diff --git a/apps/web/core/components/pages/editor/summary/index.ts b/apps/web/core/components/pages/editor/summary/index.ts
index 779b78548..17a5415e1 100644
--- a/apps/web/core/components/pages/editor/summary/index.ts
+++ b/apps/web/core/components/pages/editor/summary/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./content-browser";
diff --git a/apps/web/core/components/pages/editor/title.tsx b/apps/web/core/components/pages/editor/title.tsx
index bfb497aea..ed0b853fa 100644
--- a/apps/web/core/components/pages/editor/title.tsx
+++ b/apps/web/core/components/pages/editor/title.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useState } from "react";
 import { observer } from "mobx-react";
 // editor
@@ -23,7 +29,7 @@ export const PageEditorTitle = observer(function PageEditorTitle(props: Props) {
   // page filters
   const { fontSize } = usePageFilters();
   // ui
-  const titleFontClassName = cn("tracking-[-2%] font-bold", {
+  const titleFontClassName = cn("font-bold tracking-[-2%]", {
     "text-[1.6rem] leading-[1.9rem]": fontSize === "small-font",
     "text-[2rem] leading-[2.375rem]": fontSize === "large-font",
   });
@@ -35,7 +41,7 @@ export const PageEditorTitle = observer(function PageEditorTitle(props: Props) {
           className={cn(
             titleFontClassName,
             {
-              "text-custom-text-400": !title,
+              "text-placeholder": !title,
             },
             "break-words"
           )}
@@ -45,7 +51,7 @@ export const PageEditorTitle = observer(function PageEditorTitle(props: Props) {
       ) : (
         <div className="relative">
           <TextArea
-            className={cn(titleFontClassName, "block w-full border-none outline-none p-0 resize-none rounded-none")}
+            className={cn(titleFontClassName, "block w-full resize-none rounded-none border-none p-0 outline-none")}
             placeholder="Untitled"
             onKeyDown={(e) => {
               if (e.key === "Enter") {
@@ -62,7 +68,7 @@ export const PageEditorTitle = observer(function PageEditorTitle(props: Props) {
           />
           <div
             className={cn(
-              "pointer-events-none absolute bottom-1 right-1 z-[2] font-normal rounded bg-custom-background-100 p-0.5 text-xs text-custom-text-200 opacity-0 transition-opacity",
+              "pointer-events-none absolute right-1 bottom-1 z-[2] rounded-sm bg-surface-1 p-0.5 text-11 font-regular text-secondary opacity-0 transition-opacity",
               {
                 "opacity-100": isLengthVisible,
               }
@@ -70,7 +76,7 @@ export const PageEditorTitle = observer(function PageEditorTitle(props: Props) {
           >
             <span
               className={cn({
-                "text-red-500": title && title.length > 255,
+                "text-danger-primary": title && title.length > 255,
               })}
             >
               {title?.length}
diff --git a/apps/web/core/components/pages/editor/toolbar/color-dropdown.tsx b/apps/web/core/components/pages/editor/toolbar/color-dropdown.tsx
index febac48a7..817c79950 100644
--- a/apps/web/core/components/pages/editor/toolbar/color-dropdown.tsx
+++ b/apps/web/core/components/pages/editor/toolbar/color-dropdown.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { memo } from "react";
 import { ALargeSmall, Ban } from "lucide-react";
 import { Popover } from "@headlessui/react";
@@ -26,99 +32,90 @@ export const ColorDropdown = memo(function ColorDropdown(props: Props) {
 
   return (
     <Popover as="div" className="h-7 px-2">
-      <Popover.Button
-        as="button"
-        type="button"
-        className={({ open }) =>
-          cn("h-full", {
-            "outline-none": open,
-          })
-        }
-      >
-        {({ open }) => (
-          <span
+      {({ open }) => (
+        <>
+          <Popover.Button
+            type="button"
             className={cn(
-              "h-full px-2 text-custom-text-300 text-sm flex items-center gap-1.5 rounded hover:bg-custom-background-80",
+              "flex h-7 items-center gap-1.5 rounded-sm px-2 text-13 outline-none",
+              "text-tertiary hover:bg-layer-1",
               {
-                "text-custom-text-100 bg-custom-background-80": open,
+                "bg-layer-1 text-primary": open,
               }
             )}
           >
             Color
             <span
-              className={cn(
-                "flex-shrink-0 size-6 grid place-items-center rounded border-[0.5px] border-custom-border-300",
-                {
-                  "bg-custom-background-100": !activeBackgroundColor,
-                }
-              )}
+              className={cn("grid size-6 shrink-0 place-items-center rounded-sm border-[0.5px] border-strong", {
+                "bg-surface-1": !activeBackgroundColor,
+              })}
               style={{
                 backgroundColor: activeBackgroundColor ? activeBackgroundColor.backgroundColor : "transparent",
               }}
             >
               <ALargeSmall
                 className={cn("size-3.5", {
-                  "text-custom-text-100": !activeTextColor,
+                  "text-primary": !activeTextColor,
                 })}
                 style={{
                   color: activeTextColor ? activeTextColor.textColor : "inherit",
                 }}
               />
             </span>
-          </span>
-        )}
-      </Popover.Button>
-      <Popover.Panel
-        as="div"
-        className="fixed z-20 mt-1 rounded-md border-[0.5px] border-custom-border-300 bg-custom-background-100 shadow-custom-shadow-rg p-2 space-y-2"
-      >
-        <div className="space-y-1.5">
-          <p className="text-xs text-custom-text-300 font-semibold">Text colors</p>
-          <div className="flex items-center gap-2">
-            {COLORS_LIST.map((color) => (
-              <button
-                key={color.key}
-                type="button"
-                className="flex-shrink-0 size-6 rounded border-[0.5px] border-custom-border-400 hover:opacity-60 transition-opacity"
-                style={{
-                  backgroundColor: color.textColor,
-                }}
-                onClick={() => handleColorSelect("text-color", color.key)}
-              />
-            ))}
-            <button
-              type="button"
-              className="flex-shrink-0 size-6 grid place-items-center rounded text-custom-text-300 border-[0.5px] border-custom-border-400 hover:bg-custom-background-80 transition-colors"
-              onClick={() => handleColorSelect("text-color", undefined)}
-            >
-              <Ban className="size-4" />
-            </button>
-          </div>
-        </div>
-        <div className="space-y-1.5">
-          <p className="text-xs text-custom-text-300 font-semibold">Background colors</p>
-          <div className="flex items-center gap-2">
-            {COLORS_LIST.map((color) => (
-              <button
-                key={color.key}
-                type="button"
-                className="flex-shrink-0 size-6 rounded border-[0.5px] border-custom-border-400 hover:opacity-60 transition-opacity"
-                style={{
-                  backgroundColor: color.backgroundColor,
-                }}
-                onClick={() => handleColorSelect("background-color", color.key)}
-              />
-            ))}
-            <button
-              type="button"
-              className="flex-shrink-0 size-6 grid place-items-center rounded text-custom-text-300 border-[0.5px] border-custom-border-400 hover:bg-custom-background-80 transition-colors"
-              onClick={() => handleColorSelect("background-color", undefined)}
-            >
-              <Ban className="size-4" />
-            </button>
-          </div>
-        </div>
-      </Popover.Panel>
+          </Popover.Button>
+          <Popover.Panel
+            as="div"
+            className="fixed z-20 mt-1 space-y-2 rounded-md border-[0.5px] border-strong bg-surface-1 p-2 shadow-raised-200"
+          >
+            <div className="space-y-1.5">
+              <p className="text-11 font-semibold text-tertiary">Text colors</p>
+              <div className="flex items-center gap-2">
+                {COLORS_LIST.map((color) => (
+                  <button
+                    key={color.key}
+                    type="button"
+                    className="size-6 flex-shrink-0 rounded-sm border-[0.5px] border-strong-1 transition-opacity hover:opacity-60"
+                    style={{
+                      backgroundColor: color.textColor,
+                    }}
+                    onClick={() => handleColorSelect("text-color", color.key)}
+                  />
+                ))}
+                <button
+                  type="button"
+                  className="grid size-6 flex-shrink-0 place-items-center rounded-sm border-[0.5px] border-strong-1 text-tertiary transition-colors hover:bg-layer-1"
+                  onClick={() => handleColorSelect("text-color", undefined)}
+                >
+                  <Ban className="size-4" />
+                </button>
+              </div>
+            </div>
+            <div className="space-y-1.5">
+              <p className="text-11 font-semibold text-tertiary">Background colors</p>
+              <div className="flex items-center gap-2">
+                {COLORS_LIST.map((color) => (
+                  <button
+                    key={color.key}
+                    type="button"
+                    className="size-6 flex-shrink-0 rounded-sm border-[0.5px] border-strong-1 transition-opacity hover:opacity-60"
+                    style={{
+                      backgroundColor: color.backgroundColor,
+                    }}
+                    onClick={() => handleColorSelect("background-color", color.key)}
+                  />
+                ))}
+                <button
+                  type="button"
+                  className="grid size-6 flex-shrink-0 place-items-center rounded-sm border-[0.5px] border-strong-1 text-tertiary transition-colors hover:bg-layer-1"
+                  onClick={() => handleColorSelect("background-color", undefined)}
+                >
+                  <Ban className="size-4" />
+                </button>
+              </div>
+            </div>
+          </Popover.Panel>
+        </>
+      )}
     </Popover>
   );
 });
diff --git a/apps/web/core/components/pages/editor/toolbar/index.ts b/apps/web/core/components/pages/editor/toolbar/index.ts
index 2c36785bd..bd1654ccd 100644
--- a/apps/web/core/components/pages/editor/toolbar/index.ts
+++ b/apps/web/core/components/pages/editor/toolbar/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./color-dropdown";
 export * from "./options-dropdown";
 export * from "./root";
diff --git a/apps/web/core/components/pages/editor/toolbar/options-dropdown.tsx b/apps/web/core/components/pages/editor/toolbar/options-dropdown.tsx
index 572f0babe..a1c62bba1 100644
--- a/apps/web/core/components/pages/editor/toolbar/options-dropdown.tsx
+++ b/apps/web/core/components/pages/editor/toolbar/options-dropdown.tsx
@@ -1,10 +1,15 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useMemo, useState } from "react";
 import { observer } from "mobx-react";
 import { ArrowUpToLine, Clipboard, History } from "lucide-react";
 // plane imports
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import { ToggleSwitch } from "@plane/ui";
-import { copyTextToClipboard } from "@plane/utils";
 // hooks
 import { useAppRouter } from "@/hooks/use-app-router";
 import { usePageFilters } from "@/hooks/use-page-filters";
@@ -71,13 +76,12 @@ export const PageOptionsDropdown = observer(function PageOptionsDropdown(props:
           key: "copy-markdown",
           action: () => {
             if (!editorRef) return;
-            copyTextToClipboard(editorRef.getMarkDown()).then(() =>
-              setToast({
-                type: TOAST_TYPE.SUCCESS,
-                title: "Success!",
-                message: "Markdown copied to clipboard.",
-              })
-            );
+            editorRef.copyMarkdownToClipboard();
+            setToast({
+              type: TOAST_TYPE.SUCCESS,
+              title: "Success!",
+              message: "Markdown copied to clipboard.",
+            });
           },
           title: "Copy markdown",
           icon: Clipboard,
@@ -133,12 +137,12 @@ export const PageOptionsDropdown = observer(function PageOptionsDropdown(props:
         optionsOrder={[
           "full-screen",
           "sticky-toolbar",
+          "copy-markdown",
+          "version-history",
           "make-a-copy",
-          "toggle-access",
           "archive-restore",
           "delete",
-          "version-history",
-          "copy-markdown",
+          "toggle-access",
           "export",
         ]}
         page={page}
diff --git a/apps/web/core/components/pages/editor/toolbar/root.tsx b/apps/web/core/components/pages/editor/toolbar/root.tsx
index a7f972961..db080be8e 100644
--- a/apps/web/core/components/pages/editor/toolbar/root.tsx
+++ b/apps/web/core/components/pages/editor/toolbar/root.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import { PanelRight } from "lucide-react";
 // plane imports
@@ -37,26 +43,26 @@ export const PageEditorToolbarRoot = observer(function PageEditorToolbarRoot(pro
     <>
       <div
         id="page-toolbar-container"
-        className={cn("max-h-[52px] transition-all ease-linear duration-300 overflow-auto", {
+        className={cn("max-h-[52px] overflow-auto transition-all duration-300 ease-linear", {
           "max-h-0 overflow-hidden": shouldHideToolbar,
         })}
       >
         <div
           className={cn(
-            "hidden md:flex items-center relative min-h-[52px] page-toolbar-content px-page-x transition-all duration-200 ease-in-out",
+            "page-toolbar-content relative hidden min-h-[52px] items-center px-page-x transition-all duration-200 ease-in-out md:flex",
             {
               "wide-layout": isFullWidth,
             }
           )}
         >
-          <div className="max-w-full w-full flex items-center justify-between">
-            {editorRef && <PageToolbar editorRef={editorRef} />}
+          <div className="flex w-full max-w-full items-center justify-between">
+            <div className="flex-1">{editorRef && <PageToolbar editorRef={editorRef} />}</div>
             <div className="flex items-center gap-2">
               <PageCollaboratorsList page={page} />
               {!isNavigationPaneOpen && (
                 <button
                   type="button"
-                  className="flex-shrink-0 size-6 grid place-items-center rounded text-custom-text-200 hover:text-custom-text-100 hover:bg-custom-background-80 transition-colors"
+                  className="grid size-6 shrink-0 place-items-center rounded-sm text-secondary transition-colors hover:bg-layer-transparent-hover hover:text-primary"
                   onClick={handleOpenNavigationPane}
                 >
                   <PanelRight className="size-3.5" />
@@ -67,12 +73,12 @@ export const PageEditorToolbarRoot = observer(function PageEditorToolbarRoot(pro
         </div>
       </div>
       {shouldHideToolbar && (
-        <div className="absolute z-10 top-0 right-0 h-[52px] px-page-x flex items-center">
+        <div className="absolute top-0 right-0 z-10 flex h-[52px] items-center px-page-x">
           {!isNavigationPaneOpen && (
             <Tooltip tooltipContent={t("page_navigation_pane.open_button")}>
               <button
                 type="button"
-                className="flex-shrink-0 size-6 grid place-items-center rounded text-custom-text-200 hover:text-custom-text-100 hover:bg-custom-background-80 transition-colors"
+                className="grid size-6 shrink-0 place-items-center rounded-sm text-secondary transition-colors hover:bg-layer-transparent-hover hover:text-primary"
                 onClick={handleOpenNavigationPane}
                 aria-label={t("page_navigation_pane.open_button")}
               >
diff --git a/apps/web/core/components/pages/editor/toolbar/toolbar.tsx b/apps/web/core/components/pages/editor/toolbar/toolbar.tsx
index 6ba28ec78..d1c4109e1 100644
--- a/apps/web/core/components/pages/editor/toolbar/toolbar.tsx
+++ b/apps/web/core/components/pages/editor/toolbar/toolbar.tsx
@@ -1,8 +1,13 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React, { useEffect, useState, useCallback } from "react";
-import { Check } from "lucide-react";
-// plane imports
 import type { EditorRefApi } from "@plane/editor";
-import { ChevronDownIcon } from "@plane/propel/icons";
+// plane imports
+import { CheckIcon, ChevronDownIcon } from "@plane/propel/icons";
 import { Tooltip } from "@plane/propel/tooltip";
 import { CustomMenu } from "@plane/ui";
 import { cn } from "@plane/utils";
@@ -28,9 +33,9 @@ const ToolbarButton = React.memo(function ToolbarButton(props: ToolbarButtonProp
   return (
     <Tooltip
       tooltipContent={
-        <p className="flex flex-col gap-1 text-center text-xs">
+        <p className="flex flex-col gap-1 text-center text-11">
           <span className="font-medium">{item.name}</span>
-          {item.shortcut && <kbd className="text-custom-text-400">{item.shortcut.join(" + ")}</kbd>}
+          {item.shortcut && <kbd className="text-placeholder">{item.shortcut.join(" + ")}</kbd>}
         </p>
       }
     >
@@ -44,16 +49,14 @@ const ToolbarButton = React.memo(function ToolbarButton(props: ToolbarButtonProp
             ...item.extraProps,
           })
         }
-        className={cn(
-          "shrink-0 grid size-7 place-items-center rounded text-custom-text-300 hover:bg-custom-background-80",
-          {
-            "bg-custom-background-80 text-custom-text-100": isActive,
-          }
-        )}
+        className={cn("grid size-7 shrink-0 place-items-center rounded-sm text-tertiary", {
+          "bg-layer-transparent-selected text-primary hover:bg-layer-transparent-selected": isActive,
+          "hover:bg-layer-transparent-hover": !isActive,
+        })}
       >
         <item.icon
-          className={cn("size-4", {
-            "text-custom-text-100": isActive,
+          className={cn("size-4 transition-transform duration-200", {
+            "text-primary": isActive,
           })}
         />
       </button>
@@ -68,7 +71,22 @@ const toolbarItems = TOOLBAR_ITEMS.document;
 export function PageToolbar(props: Props) {
   const { editorRef } = props;
   // states
-  const [activeStates, setActiveStates] = useState<Record<string, boolean>>({});
+  const [activeStates, setActiveStates] = useState<Record<string, boolean>>(() => {
+    const initialStates: Record<string, boolean> = {};
+    Object.values(toolbarItems)
+      .flat()
+      .forEach((item) => {
+        // TODO: update this while toolbar homogenization
+        // @ts-expect-error type mismatch here
+        initialStates[item.renderKey] = editorRef.isMenuItemActive({
+          itemKey: item.itemKey,
+          ...item.extraProps,
+        });
+      });
+    return initialStates;
+  });
+
+  const [isTypographyMenuOpen, setIsTypographyMenuOpen] = useState(false);
 
   const updateActiveStates = useCallback(() => {
     const newActiveStates: Record<string, boolean> = {};
@@ -87,7 +105,6 @@ export function PageToolbar(props: Props) {
 
   useEffect(() => {
     const unsubscribe = editorRef.onStateChange(updateActiveStates);
-    updateActiveStates();
     return () => unsubscribe();
   }, [editorRef, updateActiveStates]);
 
@@ -99,41 +116,54 @@ export function PageToolbar(props: Props) {
   );
 
   return (
-    <div className="flex items-center divide-x divide-custom-border-200 overflow-x-scroll">
+    <div className="animate-in fade-in flex items-center divide-x divide-subtle-1 overflow-x-scroll duration-200">
       <CustomMenu
         customButton={
-          <span className="text-custom-text-300 text-sm border-[0.5px] border-custom-border-300 hover:bg-custom-background-80 h-7 w-24 rounded px-2 flex items-center justify-between gap-2 whitespace-nowrap text-left">
+          <span
+            className={cn(
+              "flex h-7 w-24 items-center justify-between gap-2 rounded-sm border-[0.5px] border-strong px-2 text-left text-13 whitespace-nowrap",
+              {
+                "bg-layer-1-selected text-primary": isTypographyMenuOpen,
+                "text-tertiary hover:bg-layer-1-hover": !isTypographyMenuOpen,
+              }
+            )}
+          >
             {activeTypography?.name || "Text"}
-            <ChevronDownIcon className="flex-shrink-0 size-3" />
+            <ChevronDownIcon className="size-3 shrink-0" />
           </span>
         }
         className="pr-2"
         placement="bottom-start"
         closeOnSelect
         maxHeight="lg"
+        menuButtonOnClick={() => setIsTypographyMenuOpen((prev) => !prev)}
+        onMenuClose={() => setIsTypographyMenuOpen(false)}
       >
         {TYPOGRAPHY_ITEMS.map((item) => (
           <CustomMenu.MenuItem
             key={item.renderKey}
-            className="flex items-center justify-between gap-2"
-            onClick={() =>
-              editorRef.executeMenuItemCommand({
-                itemKey: item.itemKey,
-                ...item.extraProps,
-              })
-            }
+            className={cn("flex items-center justify-between gap-2", {
+              "bg-layer-transparent-selected text-primary": activeTypography?.itemKey === item.itemKey,
+              "hover:bg-layer-transparent-hover": !(activeTypography?.itemKey === item.itemKey),
+            })}
+            onClick={() => {
+              if (activeTypography?.itemKey !== item.itemKey) {
+                editorRef.executeMenuItemCommand({
+                  itemKey: item.itemKey,
+                  ...item.extraProps,
+                });
+              }
+            }}
           >
             <span className="flex items-center gap-2">
               <item.icon className="size-3" />
               {item.name}
             </span>
-            {activeTypography?.itemKey === item.itemKey && (
-              <Check className="size-3 text-custom-text-300 flex-shrink-0" />
-            )}
+            {activeTypography?.itemKey === item.itemKey && <CheckIcon className="size-3 shrink-0 text-tertiary" />}
           </CustomMenu.MenuItem>
         ))}
       </CustomMenu>
-      <div className="flex-shrink-0">
+      <div className="shrink-0">
         <ColorDropdown
           handleColorSelect={(key, color) =>
             editorRef.executeMenuItemCommand({
diff --git a/apps/web/core/components/pages/header/actions.tsx b/apps/web/core/components/pages/header/actions.tsx
index f381ef5d0..7ebad8adc 100644
--- a/apps/web/core/components/pages/header/actions.tsx
+++ b/apps/web/core/components/pages/header/actions.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 // plane web components
 import { PageLockControl } from "@/plane-web/components/pages/header/lock-control";
diff --git a/apps/web/core/components/pages/header/archived-badge.tsx b/apps/web/core/components/pages/header/archived-badge.tsx
index 48843c3f3..4e6d014ae 100644
--- a/apps/web/core/components/pages/header/archived-badge.tsx
+++ b/apps/web/core/components/pages/header/archived-badge.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 // plane imports
 import { ArchiveIcon } from "@plane/propel/icons";
@@ -13,9 +19,9 @@ export const PageArchivedBadge = observer(function PageArchivedBadge({ page }: P
   if (!page.archived_at) return null;
 
   return (
-    <div className="flex-shrink-0 h-6 flex items-center gap-1 px-2 rounded text-custom-primary-100 bg-custom-primary-100/20">
-      <ArchiveIcon className="flex-shrink-0 size-3.5" />
-      <span className="text-xs font-medium">Archived at {renderFormattedDate(page.archived_at)}</span>
+    <div className="flex h-6 flex-shrink-0 items-center gap-1 rounded-sm bg-accent-primary/20 px-2 text-accent-primary">
+      <ArchiveIcon className="size-3.5 flex-shrink-0" />
+      <span className="text-11 font-medium">Archived at {renderFormattedDate(page.archived_at)}</span>
     </div>
   );
 });
diff --git a/apps/web/core/components/pages/header/copy-link-control.tsx b/apps/web/core/components/pages/header/copy-link-control.tsx
index f2d50139d..40ad4a75a 100644
--- a/apps/web/core/components/pages/header/copy-link-control.tsx
+++ b/apps/web/core/components/pages/header/copy-link-control.tsx
@@ -1,5 +1,17 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState, useRef, useEffect, useCallback } from "react";
 import { observer } from "mobx-react";
-import { Link } from "lucide-react";
+
+import { LinkIcon, CheckIcon } from "@plane/propel/icons";
+// plane imports
+import { Tooltip } from "@plane/propel/tooltip";
+import { IconButton } from "@plane/propel/icon-button";
+import { cn } from "@plane/utils";
 // hooks
 import { usePageOperations } from "@/hooks/use-page-operations";
 // store
@@ -10,18 +22,50 @@ type Props = {
 };
 
 export const PageCopyLinkControl = observer(function PageCopyLinkControl({ page }: Props) {
+  const [isCopied, setIsCopied] = useState(false);
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
   // page operations
   const { pageOperations } = usePageOperations({
     page,
   });
 
+  // Cleanup timer on unmount
+  useEffect(
+    () => () => {
+      if (timerRef.current) {
+        clearTimeout(timerRef.current);
+      }
+    },
+    []
+  );
+
+  const handleCopy = useCallback(() => {
+    pageOperations.copyLink();
+    setIsCopied(true);
+
+    // Clear previous timer if it exists
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+    }
+
+    // Set new timer
+    timerRef.current = setTimeout(() => {
+      setIsCopied(false);
+      timerRef.current = null;
+    }, 1000);
+  }, [pageOperations]);
+
   return (
-    <button
-      type="button"
-      onClick={pageOperations.copyLink}
-      className="flex-shrink-0 size-6 grid place-items-center rounded text-custom-text-200 hover:text-custom-text-100 hover:bg-custom-background-80 transition-colors"
-    >
-      <Link className="size-3.5" />
-    </button>
+    <Tooltip tooltipContent={isCopied ? "Copied!" : "Copy link"} position="bottom">
+      <IconButton
+        variant="ghost"
+        size="lg"
+        icon={isCopied ? CheckIcon : LinkIcon}
+        onClick={handleCopy}
+        aria-label={isCopied ? "Copied link" : "Copy link"}
+        className={cn(isCopied && "text-success-primary")}
+      />
+    </Tooltip>
   );
 });
diff --git a/apps/web/core/components/pages/header/favorite-control.tsx b/apps/web/core/components/pages/header/favorite-control.tsx
index 643278740..38c982d48 100644
--- a/apps/web/core/components/pages/header/favorite-control.tsx
+++ b/apps/web/core/components/pages/header/favorite-control.tsx
@@ -1,10 +1,13 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
-// constants
-import { PROJECT_PAGE_TRACKER_ELEMENTS } from "@plane/constants";
+import { Star } from "lucide-react";
 // ui
-import { FavoriteStar } from "@plane/ui";
-// helpers
-import { captureClick } from "@/helpers/event-tracker.helper";
+import { IconButton } from "@plane/propel/icon-button";
 // hooks
 import { usePageOperations } from "@/hooks/use-page-operations";
 // store
@@ -25,16 +28,17 @@ export const PageFavoriteControl = observer(function PageFavoriteControl({ page
   if (!canCurrentUserFavoritePage) return null;
 
   return (
-    <FavoriteStar
-      selected={is_favorite}
+    <IconButton
+      variant="ghost"
+      size="lg"
+      icon={Star}
       onClick={() => {
-        captureClick({
-          elementName: PROJECT_PAGE_TRACKER_ELEMENTS.FAVORITE_BUTTON,
-        });
         pageOperations.toggleFavorite();
       }}
-      buttonClassName="flex-shrink-0 size-6 group rounded hover:bg-custom-background-80 transition-colors"
-      iconClassName="size-3.5 text-custom-text-200 group-hover:text-custom-text-10"
+      aria-label={is_favorite ? "Remove favorite" : "Add to favorites"}
+      className={
+        is_favorite ? "[&_svg]:fill-(--color-label-yellow-icon) [&_svg]:stroke-(--color-label-yellow-icon)" : ""
+      }
     />
   );
 });
diff --git a/apps/web/core/components/pages/header/index.ts b/apps/web/core/components/pages/header/index.ts
index 1efe34c51..d98033459 100644
--- a/apps/web/core/components/pages/header/index.ts
+++ b/apps/web/core/components/pages/header/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./root";
diff --git a/apps/web/core/components/pages/header/offline-badge.tsx b/apps/web/core/components/pages/header/offline-badge.tsx
index 7a8728b41..0657251ba 100644
--- a/apps/web/core/components/pages/header/offline-badge.tsx
+++ b/apps/web/core/components/pages/header/offline-badge.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 // plane imports
 import { Tooltip } from "@plane/propel/tooltip";
@@ -21,8 +27,8 @@ export const PageOfflineBadge = observer(function PageOfflineBadge({ page }: Pro
       tooltipHeading="You are offline."
       tooltipContent="You can continue making changes. They will be synced when you are back online."
     >
-      <div className="flex-shrink-0 flex h-7 items-center gap-2 rounded-full bg-custom-background-80 px-3 py-0.5 text-xs font-medium text-custom-text-300">
-        <span className="flex-shrink-0 size-1.5 rounded-full bg-custom-text-300" />
+      <div className="flex h-7 flex-shrink-0 items-center gap-2 rounded-full bg-layer-1 px-3 py-0.5 text-11 font-medium text-tertiary">
+        <span className="size-1.5 flex-shrink-0 rounded-full bg-layer-1" />
         <span>Offline</span>
       </div>
     </Tooltip>
diff --git a/apps/web/core/components/pages/header/root.tsx b/apps/web/core/components/pages/header/root.tsx
index 1dc01cc9b..1223b97db 100644
--- a/apps/web/core/components/pages/header/root.tsx
+++ b/apps/web/core/components/pages/header/root.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useCallback } from "react";
 import { observer } from "mobx-react";
 import { ListFilter } from "lucide-react";
diff --git a/apps/web/core/components/pages/header/syncing-badge.tsx b/apps/web/core/components/pages/header/syncing-badge.tsx
index 345111797..e0aaab3f6 100644
--- a/apps/web/core/components/pages/header/syncing-badge.tsx
+++ b/apps/web/core/components/pages/header/syncing-badge.tsx
@@ -1,12 +1,19 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useState, useEffect } from "react";
-import { CloudOff } from "lucide-react";
-import { Tooltip } from "@plane/ui";
+import { CloudOff, Dot } from "lucide-react";
+import { Tooltip } from "@plane/propel/tooltip";
+import { Badge } from "@plane/propel/badge";
 
 type Props = {
   syncStatus: "syncing" | "synced" | "error";
 };
 
-export const PageSyncingBadge = ({ syncStatus }: Props) => {
+export function PageSyncingBadge({ syncStatus }: Props) {
   const [prevSyncStatus, setPrevSyncStatus] = useState<"syncing" | "synced" | "error" | null>(null);
   const [isVisible, setIsVisible] = useState(syncStatus !== "synced");
 
@@ -32,20 +39,12 @@ export const PageSyncingBadge = ({ syncStatus }: Props) => {
       label: "Syncing...",
       tooltipHeading: "Syncing...",
       tooltipContent: "Your changes are being synced with the server. You can continue making changes.",
-      bgColor: "bg-custom-primary-100/20",
-      textColor: "text-custom-primary-100",
-      pulseColor: "bg-custom-primary-100",
-      pulseBgColor: "bg-custom-primary-100/30",
-      icon: null,
     },
     error: {
       label: "Connection lost",
       tooltipHeading: "Connection lost",
       tooltipContent:
         "We're having trouble connecting to the websocket server. Your changes will be synced and saved every 10 seconds.",
-      bgColor: "bg-red-500/20",
-      textColor: "text-red-500",
-      icon: <CloudOff className="size-3" />,
     },
   };
 
@@ -54,19 +53,15 @@ export const PageSyncingBadge = ({ syncStatus }: Props) => {
 
   return (
     <Tooltip tooltipHeading={content.tooltipHeading} tooltipContent={content.tooltipContent}>
-      <div
-        className={`flex-shrink-0 h-6 flex items-center gap-1.5 px-2 rounded ${content.textColor} ${content.bgColor} animate-quickFadeIn`}
-      >
-        {syncStatus === "syncing" ? (
-          <div className="relative flex-shrink-0">
-            <div className="absolute -inset-0.5 rounded-full bg-custom-primary-100/30 animate-ping" />
-            <div className="relative h-1.5 w-1.5 rounded-full bg-custom-primary-100" />
-          </div>
-        ) : (
-          content.icon
-        )}
-        <span className="text-xs font-medium">{content.label}</span>
-      </div>
+      <span className="animate-quickFadeIn">
+        <Badge
+          variant={syncStatus === "syncing" ? "brand" : "danger"}
+          size="lg"
+          prependIcon={syncStatus === "syncing" ? <Dot /> : <CloudOff />}
+        >
+          {content.label}
+        </Badge>
+      </span>
     </Tooltip>
   );
-};
+}
diff --git a/apps/web/core/components/pages/list/applied-filters/index.ts b/apps/web/core/components/pages/list/applied-filters/index.ts
index 1efe34c51..d98033459 100644
--- a/apps/web/core/components/pages/list/applied-filters/index.ts
+++ b/apps/web/core/components/pages/list/applied-filters/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./root";
diff --git a/apps/web/core/components/pages/list/applied-filters/root.tsx b/apps/web/core/components/pages/list/applied-filters/root.tsx
index b65b9af8a..3329de2b3 100644
--- a/apps/web/core/components/pages/list/applied-filters/root.tsx
+++ b/apps/web/core/components/pages/list/applied-filters/root.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useTranslation } from "@plane/i18n";
 import { CloseIcon } from "@plane/propel/icons";
 // plane imports
@@ -28,7 +34,7 @@ export function PageAppliedFiltersList(props: Props) {
   const isEditingAllowed = alwaysAllowEditing;
 
   return (
-    <div className="flex flex-wrap items-stretch gap-2 bg-custom-background-100">
+    <div className="flex flex-wrap items-stretch gap-2">
       {Object.entries(appliedFilters).map(([key, value]) => {
         const filterKey = key as keyof TPageFilterProps;
 
@@ -38,7 +44,7 @@ export function PageAppliedFiltersList(props: Props) {
         return (
           <Tag key={filterKey}>
             <div className="flex flex-wrap items-center gap-1.5">
-              <span className="text-xs text-custom-text-300">{replaceUnderscoreIfSnakeCase(filterKey)}</span>
+              <span className="text-11 text-tertiary">{replaceUnderscoreIfSnakeCase(filterKey)}</span>
               {DATE_FILTERS.includes(filterKey) && (
                 <AppliedDateFilters
                   editable={isEditingAllowed}
@@ -56,7 +62,7 @@ export function PageAppliedFiltersList(props: Props) {
               {isEditingAllowed && (
                 <button
                   type="button"
-                  className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
+                  className="grid place-items-center text-tertiary hover:text-secondary"
                   onClick={() => handleRemoveFilter(filterKey, null)}
                 >
                   <CloseIcon height={12} width={12} strokeWidth={2} />
diff --git a/apps/web/core/components/pages/list/block-item-action.tsx b/apps/web/core/components/pages/list/block-item-action.tsx
index e6e817c77..b62b97ee9 100644
--- a/apps/web/core/components/pages/list/block-item-action.tsx
+++ b/apps/web/core/components/pages/list/block-item-action.tsx
@@ -1,12 +1,16 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
-import { Earth, Info, Lock, Minus } from "lucide-react";
+import { Earth, Info, Minus } from "lucide-react";
 // plane imports
-import { PROJECT_PAGE_TRACKER_ELEMENTS } from "@plane/constants";
+import { LockIcon } from "@plane/propel/icons";
 import { Tooltip } from "@plane/propel/tooltip";
 import { Avatar, FavoriteStar } from "@plane/ui";
 import { renderFormattedDate, getFileURL } from "@plane/utils";
-// helpers
-import { captureClick } from "@/helpers/event-tracker.helper";
 // hooks
 import { useMember } from "@/hooks/store/use-member";
 import { usePageOperations } from "@/hooks/use-page-operations";
@@ -43,18 +47,18 @@ export const BlockItemAction = observer(function BlockItemAction(props: Props) {
           <Avatar src={getFileURL(ownerDetails?.avatar_url ?? "")} name={ownerDetails?.display_name} />
         </Tooltip>
       </div>
-      <div className="cursor-default text-custom-text-300">
+      <div className="cursor-default text-tertiary">
         <Tooltip tooltipContent={access === 0 ? "Public" : "Private"}>
-          {access === 0 ? <Earth className="h-4 w-4" /> : <Lock className="h-4 w-4" />}
+          {access === 0 ? <Earth className="h-4 w-4" /> : <LockIcon className="h-4 w-4" />}
         </Tooltip>
       </div>
       {/* vertical divider */}
-      <Minus className="h-5 w-5 text-custom-text-400 rotate-90 -mx-3" strokeWidth={1} />
+      <Minus className="-mx-3 h-5 w-5 rotate-90 text-placeholder" strokeWidth={1} />
 
       {/* page info */}
       <Tooltip tooltipContent={`Created on ${renderFormattedDate(created_at)}`}>
-        <span className="h-4 w-4 grid place-items-center cursor-default">
-          <Info className="h-4 w-4 text-custom-text-300" />
+        <span className="grid h-4 w-4 cursor-default place-items-center">
+          <Info className="h-4 w-4 text-tertiary" />
         </span>
       </Tooltip>
 
@@ -64,9 +68,6 @@ export const BlockItemAction = observer(function BlockItemAction(props: Props) {
           onClick={(e) => {
             e.preventDefault();
             e.stopPropagation();
-            captureClick({
-              elementName: PROJECT_PAGE_TRACKER_ELEMENTS.FAVORITE_BUTTON,
-            });
             pageOperations.toggleFavorite();
           }}
           selected={is_favorite}
diff --git a/apps/web/core/components/pages/list/block.tsx b/apps/web/core/components/pages/list/block.tsx
index 05217898d..5d658a42e 100644
--- a/apps/web/core/components/pages/list/block.tsx
+++ b/apps/web/core/components/pages/list/block.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useRef } from "react";
 import { observer } from "mobx-react";
 import { Logo } from "@plane/propel/emoji-icon-picker";
@@ -40,7 +46,7 @@ export const PageListBlock = observer(function PageListBlock(props: TPageListBlo
           {logo_props?.in_use ? (
             <Logo logo={logo_props} size={16} type="lucide" />
           ) : (
-            <PageIcon className="h-4 w-4 text-custom-text-300" />
+            <PageIcon className="h-4 w-4 text-tertiary" />
           )}
         </>
       }
diff --git a/apps/web/core/components/pages/list/filters/index.ts b/apps/web/core/components/pages/list/filters/index.ts
index 1efe34c51..d98033459 100644
--- a/apps/web/core/components/pages/list/filters/index.ts
+++ b/apps/web/core/components/pages/list/filters/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./root";
diff --git a/apps/web/core/components/pages/list/filters/root.tsx b/apps/web/core/components/pages/list/filters/root.tsx
index f9c0930bf..7c0090468 100644
--- a/apps/web/core/components/pages/list/filters/root.tsx
+++ b/apps/web/core/components/pages/list/filters/root.tsx
@@ -1,7 +1,12 @@
-import { useState } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState, useRef, useEffect } from "react";
 import { observer } from "mobx-react";
-import { Search } from "lucide-react";
-import { CloseIcon } from "@plane/propel/icons";
+import { SearchIcon, CloseIcon } from "@plane/propel/icons";
 import type { TPageFilterProps, TPageFilters } from "@plane/types";
 // components
 import { FilterCreatedDate } from "@/components/common/filters/created-at";
@@ -19,9 +24,15 @@ export const PageFiltersSelection = observer(function PageFiltersSelection(props
   const { filters, handleFiltersUpdate, memberIds } = props;
   // states
   const [filtersSearchQuery, setFiltersSearchQuery] = useState("");
-  // store
+  const inputRef = useRef<HTMLInputElement>(null);
   const { isMobile } = usePlatformOS();
 
+  useEffect(() => {
+    if (!isMobile && inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, [isMobile]);
+
   const handleFilters = (key: keyof TPageFilterProps, value: boolean | string | string[]) => {
     const newValues = filters.filters?.[key] ?? [];
 
@@ -47,25 +58,25 @@ export const PageFiltersSelection = observer(function PageFiltersSelection(props
 
   return (
     <div className="flex h-full w-full flex-col overflow-hidden">
-      <div className="bg-custom-background-100 p-2.5 pb-0">
-        <div className="flex items-center gap-1.5 rounded border-[0.5px] border-custom-border-200 bg-custom-background-90 px-1.5 py-1 text-xs">
-          <Search className="text-custom-text-400" size={12} strokeWidth={2} />
+      <div className="bg-layer-transparent p-2.5 pb-0">
+        <div className="flex items-center gap-1.5 rounded-sm border-[0.5px] border-subtle bg-surface-2 px-1.5 py-1 text-11">
+          <SearchIcon className="text-placeholder" width={12} height={12} strokeWidth={2} />
           <input
+            ref={inputRef}
             type="text"
-            className="w-full bg-custom-background-90 outline-none placeholder:text-custom-text-400"
+            className="w-full outline-none placeholder:text-placeholder"
             placeholder="Search"
             value={filtersSearchQuery}
             onChange={(e) => setFiltersSearchQuery(e.target.value)}
-            autoFocus={!isMobile}
           />
           {filtersSearchQuery !== "" && (
             <button type="button" className="grid place-items-center" onClick={() => setFiltersSearchQuery("")}>
-              <CloseIcon className="text-custom-text-300" height={12} width={12} strokeWidth={2} />
+              <CloseIcon className="text-tertiary" height={12} width={12} strokeWidth={2} />
             </button>
           )}
         </div>
       </div>
-      <div className="h-full w-full divide-y divide-custom-border-200 overflow-y-auto px-2.5 vertical-scrollbar scrollbar-sm">
+      <div className="vertical-scrollbar scrollbar-sm h-full w-full divide-y divide-subtle-1 overflow-y-auto px-2.5">
         <div className="py-2">
           <FilterOption
             isChecked={!!filters.filters?.favorites}
diff --git a/apps/web/core/components/pages/list/index.ts b/apps/web/core/components/pages/list/index.ts
index 1efe34c51..d98033459 100644
--- a/apps/web/core/components/pages/list/index.ts
+++ b/apps/web/core/components/pages/list/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./root";
diff --git a/apps/web/core/components/pages/list/order-by.tsx b/apps/web/core/components/pages/list/order-by.tsx
index a2276df2b..2e9f22f0a 100644
--- a/apps/web/core/components/pages/list/order-by.tsx
+++ b/apps/web/core/components/pages/list/order-by.tsx
@@ -1,12 +1,16 @@
-import { ArrowDownWideNarrow, ArrowUpWideNarrow, Check } from "lucide-react";
-// types
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { ArrowDownWideNarrow, ArrowUpWideNarrow } from "lucide-react";
+// plane imports
 import { getButtonStyling } from "@plane/propel/button";
-import { ChevronDownIcon } from "@plane/propel/icons";
+// types
+import { CheckIcon } from "@plane/propel/icons";
 import type { TPageFiltersSortBy, TPageFiltersSortKey } from "@plane/types";
-// ui
 import { CustomMenu } from "@plane/ui";
-// helpers
-import { cn } from "@plane/utils";
 
 type Props = {
   onChange: (value: { key?: TPageFiltersSortKey; order?: TPageFiltersSortBy }) => void;
@@ -32,10 +36,9 @@ export function PageOrderByDropdown(props: Props) {
   return (
     <CustomMenu
       customButton={
-        <div className={cn(getButtonStyling("neutral-primary", "sm"), "px-2 text-custom-text-300")}>
-          {!isDescending ? <ArrowUpWideNarrow className="size-3 " /> : <ArrowDownWideNarrow className="size-3 " />}
+        <div className={getButtonStyling("secondary", "lg")}>
+          {!isDescending ? <ArrowUpWideNarrow className="size-3" /> : <ArrowDownWideNarrow className="size-3" />}
           {orderByDetails?.label}
-          <ChevronDownIcon className="h-3 w-3" strokeWidth={2} />
         </div>
       }
       placement="bottom-end"
@@ -53,10 +56,10 @@ export function PageOrderByDropdown(props: Props) {
           }
         >
           {option.label}
-          {sortKey === option.key && <Check className="h-3 w-3" />}
+          {sortKey === option.key && <CheckIcon className="h-3 w-3" />}
         </CustomMenu.MenuItem>
       ))}
-      <hr className="my-2 border-custom-border-200" />
+      <hr className="my-2 border-subtle" />
       <CustomMenu.MenuItem
         className="flex items-center justify-between gap-2"
         onClick={() => {
@@ -67,7 +70,7 @@ export function PageOrderByDropdown(props: Props) {
         }}
       >
         Ascending
-        {!isDescending && <Check className="h-3 w-3" />}
+        {!isDescending && <CheckIcon className="h-3 w-3" />}
       </CustomMenu.MenuItem>
       <CustomMenu.MenuItem
         className="flex items-center justify-between gap-2"
@@ -79,7 +82,7 @@ export function PageOrderByDropdown(props: Props) {
         }}
       >
         Descending
-        {isDescending && <Check className="h-3 w-3" />}
+        {isDescending && <CheckIcon className="h-3 w-3" />}
       </CustomMenu.MenuItem>
     </CustomMenu>
   );
diff --git a/apps/web/core/components/pages/list/root.tsx b/apps/web/core/components/pages/list/root.tsx
index 0d477745f..3764e5bc1 100644
--- a/apps/web/core/components/pages/list/root.tsx
+++ b/apps/web/core/components/pages/list/root.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 // types
 import type { TPageNavigationTabs } from "@plane/types";
diff --git a/apps/web/core/components/pages/list/search-input.tsx b/apps/web/core/components/pages/list/search-input.tsx
index e052875f1..36ab492ca 100644
--- a/apps/web/core/components/pages/list/search-input.tsx
+++ b/apps/web/core/components/pages/list/search-input.tsx
@@ -1,9 +1,14 @@
-import { useState, useRef, useEffect } from "react";
-import { Search } from "lucide-react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useRef, useState } from "react";
+// plane imports
 import { useOutsideClickDetector } from "@plane/hooks";
-import { CloseIcon } from "@plane/propel/icons";
-// plane helpers
-// helpers
+import { IconButton } from "@plane/propel/icon-button";
+import { SearchIcon, CloseIcon } from "@plane/propel/icons";
 import { cn } from "@plane/utils";
 
 type Props = {
@@ -17,6 +22,7 @@ export function PageSearchInput(props: Props) {
   const [isSearchOpen, setIsSearchOpen] = useState(false);
   // refs
   const inputRef = useRef<HTMLInputElement>(null);
+
   // outside click detector hook
   useOutsideClickDetector(inputRef, () => {
     if (isSearchOpen && searchQuery.trim() === "") setIsSearchOpen(false);
@@ -32,36 +38,32 @@ export function PageSearchInput(props: Props) {
     }
   };
 
-  useEffect(() => {
-    if (searchQuery.trim() !== "") setIsSearchOpen(true);
-  }, [searchQuery]);
-
   return (
     <div className="flex">
       {!isSearchOpen && (
-        <button
-          type="button"
-          className="flex-shrink-0 hover:bg-custom-background-80 rounded text-custom-text-400 relative flex justify-center items-center w-6 h-6 my-auto"
+        <IconButton
+          variant="ghost"
+          size="lg"
+          className="my-auto -mr-1 shrink-0"
           onClick={() => {
             setIsSearchOpen(true);
             inputRef.current?.focus();
           }}
-        >
-          <Search className="h-3.5 w-3.5" />
-        </button>
+          icon={SearchIcon}
+        />
       )}
       <div
         className={cn(
-          "flex items-center justify-start rounded-md border border-transparent bg-custom-background-100 text-custom-text-400 w-0 transition-[width] ease-linear overflow-hidden opacity-0",
+          "flex w-0 items-center justify-start overflow-hidden rounded-md border border-transparent text-placeholder opacity-0 transition-[width] ease-linear",
           {
-            "w-64 px-2.5 py-1.5 border-custom-border-200 opacity-100": isSearchOpen,
+            "w-64 border-subtle px-2.5 py-1.5 opacity-100": isSearchOpen,
           }
         )}
       >
-        <Search className="h-3.5 w-3.5" />
+        <SearchIcon className="h-3.5 w-3.5" />
         <input
           ref={inputRef}
-          className="w-full max-w-[234px] border-none bg-transparent text-sm text-custom-text-100 placeholder:text-custom-text-400 focus:outline-none"
+          className="ml-2 w-full max-w-[234px] border-none bg-transparent text-13 text-primary placeholder:text-placeholder focus:outline-none"
           placeholder="Search pages"
           value={searchQuery}
           onChange={(e) => updateSearchQuery(e.target.value)}
diff --git a/apps/web/core/components/pages/list/tab-navigation.tsx b/apps/web/core/components/pages/list/tab-navigation.tsx
index 31d54326d..384fee2f3 100644
--- a/apps/web/core/components/pages/list/tab-navigation.tsx
+++ b/apps/web/core/components/pages/list/tab-navigation.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import Link from "next/link";
 // types
 import type { TPageNavigationTabs } from "@plane/types";
@@ -34,23 +40,24 @@ export function PageTabNavigation(props: TPageTabNavigation) {
   };
 
   return (
-    <div className="relative flex items-center">
+    <div className="relative flex h-full items-center">
       {pageTabs.map((tab) => (
         <Link
           key={tab.key}
           href={`/${workspaceSlug}/projects/${projectId}/pages?type=${tab.key}`}
           onClick={(e) => handleTabClick(e, tab.key)}
+          className="flex h-full flex-col"
         >
-          <span
-            className={cn(`block p-3 py-4 text-sm font-medium transition-all`, {
-              "text-custom-primary-100": tab.key === pageType,
+          <div
+            className={cn(`flex flex-1 items-center justify-center px-4 text-13 font-medium transition-all`, {
+              "text-accent-primary": tab.key === pageType,
             })}
           >
             {tab.label}
-          </span>
+          </div>
           <div
-            className={cn(`rounded-t border-t-2 transition-all border-transparent`, {
-              "border-custom-primary-100": tab.key === pageType,
+            className={cn(`w-full rounded-t border-t-2 border-transparent transition-all`, {
+              "border-accent-strong": tab.key === pageType,
             })}
           />
         </Link>
diff --git a/apps/web/core/components/pages/loaders/page-content-loader.tsx b/apps/web/core/components/pages/loaders/page-content-loader.tsx
index b099ffaab..e7f8cc268 100644
--- a/apps/web/core/components/pages/loaders/page-content-loader.tsx
+++ b/apps/web/core/components/pages/loaders/page-content-loader.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // plane imports
 import { Loader } from "@plane/ui";
 import { cn } from "@plane/utils";
@@ -10,9 +16,9 @@ export function PageContentLoader(props: Props) {
   const { className } = props;
 
   return (
-    <div className={cn("relative size-full flex flex-col", className)}>
+    <div className={cn("relative flex size-full flex-col", className)}>
       {/* header */}
-      <div className="flex-shrink-0 w-full h-12 border-b border-custom-border-100 relative flex items-center divide-x divide-custom-border-100">
+      <div className="relative flex h-12 w-full flex-shrink-0 items-center divide-x divide-subtle border-b border-subtle">
         <Loader className="relative flex items-center gap-1 pr-2">
           <Loader.Item width="26px" height="26px" />
           <Loader.Item width="26px" height="26px" />
@@ -37,7 +43,7 @@ export function PageContentLoader(props: Props) {
       </div>
 
       {/* content */}
-      <div className="size-full pt-[64px] overflow-hidden relative flex">
+      <div className="relative flex size-full overflow-hidden pt-[64px]">
         {/* editor loader */}
         <div className="size-full py-5">
           <Loader className="relative space-y-4">
diff --git a/apps/web/core/components/pages/loaders/page-loader.tsx b/apps/web/core/components/pages/loaders/page-loader.tsx
index b55aeff42..8e7b9025b 100644
--- a/apps/web/core/components/pages/loaders/page-loader.tsx
+++ b/apps/web/core/components/pages/loaders/page-loader.tsx
@@ -1,13 +1,19 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { range } from "lodash-es";
 import { Loader } from "@plane/ui";
 
 export function PageLoader() {
   return (
-    <div className="relative w-full h-full flex flex-col">
-      <div className="px-3 border-b border-custom-border-100 py-3">
+    <div className="relative flex h-full w-full flex-col">
+      <div className="border-b border-subtle px-3 py-3">
         <Loader className="relative flex items-center gap-2">
           <Loader.Item width="200px" height="30px" />
-          <div className="relative flex items-center gap-2 ml-auto">
+          <div className="relative ml-auto flex items-center gap-2">
             <Loader.Item width="100px" height="30px" />
             <Loader.Item width="100px" height="30px" />
           </div>
@@ -15,9 +21,9 @@ export function PageLoader() {
       </div>
       <div>
         {range(10).map((i) => (
-          <Loader key={i} className="relative flex items-center gap-2 p-3 py-4 border-b border-custom-border-100">
+          <Loader key={i} className="relative flex items-center gap-2 border-b border-subtle p-3 py-4">
             <Loader.Item width={`${250 + 10 * Math.floor(Math.random() * 10)}px`} height="22px" />
-            <div className="ml-auto relative flex items-center gap-2">
+            <div className="relative ml-auto flex items-center gap-2">
               <Loader.Item width="60px" height="22px" />
               <Loader.Item width="22px" height="22px" />
               <Loader.Item width="22px" height="22px" />
diff --git a/apps/web/core/components/pages/modals/create-page-modal.tsx b/apps/web/core/components/pages/modals/create-page-modal.tsx
index f398be341..493cb84e3 100644
--- a/apps/web/core/components/pages/modals/create-page-modal.tsx
+++ b/apps/web/core/components/pages/modals/create-page-modal.tsx
@@ -1,13 +1,16 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useEffect, useState } from "react";
 // constants
 import type { EPageAccess } from "@plane/constants";
-import { PROJECT_PAGE_TRACKER_EVENTS } from "@plane/constants";
 import type { TPage } from "@plane/types";
 // ui
 import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
 // hooks
-import { captureSuccess, captureError } from "@/helpers/event-tracker.helper";
 import { useAppRouter } from "@/hooks/use-app-router";
 // plane web hooks
 import type { EPageStoreType } from "@/plane-web/hooks/store";
@@ -64,20 +67,11 @@ export function CreatePageModal(props: Props) {
     try {
       const pageData = await createPage(pageFormData);
       if (pageData) {
-        captureSuccess({
-          eventName: PROJECT_PAGE_TRACKER_EVENTS.create,
-          payload: {
-            id: pageData.id,
-          },
-        });
         handleStateClear();
         if (redirectionEnabled) router.push(`/${workspaceSlug}/projects/${projectId}/pages/${pageData.id}`);
       }
-    } catch (error: any) {
-      captureError({
-        eventName: PROJECT_PAGE_TRACKER_EVENTS.create,
-        error,
-      });
+    } catch (error) {
+      console.error(error);
     }
   };
 
diff --git a/apps/web/core/components/pages/modals/delete-page-modal.tsx b/apps/web/core/components/pages/modals/delete-page-modal.tsx
index 37845aaf4..937409be6 100644
--- a/apps/web/core/components/pages/modals/delete-page-modal.tsx
+++ b/apps/web/core/components/pages/modals/delete-page-modal.tsx
@@ -1,13 +1,17 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useState } from "react";
 import { observer } from "mobx-react";
 // ui
 import { useParams } from "next/navigation";
-import { PROJECT_PAGE_TRACKER_EVENTS } from "@plane/constants";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import { AlertModalCore } from "@plane/ui";
+import { getPageName } from "@plane/utils";
 // constants
-// hooks
-import { captureError, captureSuccess } from "@/helpers/event-tracker.helper";
 // plane web hooks
 import { useAppRouter } from "@/hooks/use-app-router";
 import type { EPageStoreType } from "@/plane-web/hooks/store";
@@ -45,12 +49,6 @@ export const DeletePageModal = observer(function DeletePageModal(props: TConfirm
     setIsDeleting(true);
     await removePage({ pageId })
       .then(() => {
-        captureSuccess({
-          eventName: PROJECT_PAGE_TRACKER_EVENTS.delete,
-          payload: {
-            id: pageId,
-          },
-        });
         handleClose();
         setToast({
           type: TOAST_TYPE.SUCCESS,
@@ -63,12 +61,6 @@ export const DeletePageModal = observer(function DeletePageModal(props: TConfirm
         }
       })
       .catch(() => {
-        captureError({
-          eventName: PROJECT_PAGE_TRACKER_EVENTS.delete,
-          payload: {
-            id: pageId,
-          },
-        });
         setToast({
           type: TOAST_TYPE.ERROR,
           title: "Error!",
@@ -91,7 +83,7 @@ export const DeletePageModal = observer(function DeletePageModal(props: TConfirm
       content={
         <>
           Are you sure you want to delete page-{" "}
-          <span className="break-words font-medium text-custom-text-100 break-all">{name}</span> ? The Page will be
+          <span className="font-medium break-words break-all text-primary">{getPageName(name)}</span> ? The Page will be
           deleted permanently. This action cannot be undone.
         </>
       }
diff --git a/apps/web/core/components/pages/modals/export-page-modal.tsx b/apps/web/core/components/pages/modals/export-page-modal.tsx
index 99a7988de..cd21b2b5f 100644
--- a/apps/web/core/components/pages/modals/export-page-modal.tsx
+++ b/apps/web/core/components/pages/modals/export-page-modal.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useState } from "react";
 import type { PageProps } from "@react-pdf/renderer";
 import { pdf } from "@react-pdf/renderer";
@@ -199,11 +205,11 @@ export function ExportPageModal(props: Props) {
   return (
     <ModalCore isOpen={isOpen} handleClose={handleClose} position={EModalPosition.CENTER} width={EModalWidth.SM}>
       <div>
-        <div className="p-5 space-y-5">
-          <h3 className="text-xl font-medium text-custom-text-200">Export page</h3>
+        <div className="space-y-5 p-5">
+          <h3 className="text-18 font-medium text-secondary">Export page</h3>
           <div className="space-y-3">
             <div className="flex items-center justify-between gap-2">
-              <h6 className="flex-shrink-0 text-sm text-custom-text-200">Export format</h6>
+              <h6 className="flex-shrink-0 text-13 text-secondary">Export format</h6>
               <Controller
                 control={control}
                 name="export_format"
@@ -226,7 +232,7 @@ export function ExportPageModal(props: Props) {
               />
             </div>
             <div className="flex items-center justify-between gap-2">
-              <h6 className="flex-shrink-0 text-sm text-custom-text-200">Include content</h6>
+              <h6 className="flex-shrink-0 text-13 text-secondary">Include content</h6>
               <Controller
                 control={control}
                 name="content_variety"
@@ -250,7 +256,7 @@ export function ExportPageModal(props: Props) {
             </div>
             {isPDFSelected && (
               <div className="flex items-center justify-between gap-2">
-                <h6 className="flex-shrink-0 text-sm text-custom-text-200">Page format</h6>
+                <h6 className="flex-shrink-0 text-13 text-secondary">Page format</h6>
                 <Controller
                   control={control}
                   name="page_format"
@@ -275,11 +281,11 @@ export function ExportPageModal(props: Props) {
             )}
           </div>
         </div>
-        <div className="px-5 py-4 flex items-center justify-end gap-2 border-t-[0.5px] border-custom-border-200">
-          <Button variant="neutral-primary" size="sm" onClick={handleClose}>
+        <div className="flex items-center justify-end gap-2 border-t-[0.5px] border-subtle px-5 py-4">
+          <Button variant="secondary" size="lg" onClick={handleClose}>
             Cancel
           </Button>
-          <Button variant="primary" size="sm" loading={isExporting} onClick={handleExport}>
+          <Button variant="primary" size="lg" loading={isExporting} onClick={handleExport}>
             {isExporting ? "Exporting" : "Export"}
           </Button>
         </div>
diff --git a/apps/web/core/components/pages/modals/page-form.tsx b/apps/web/core/components/pages/modals/page-form.tsx
index 55d7864be..810e838c1 100644
--- a/apps/web/core/components/pages/modals/page-form.tsx
+++ b/apps/web/core/components/pages/modals/page-form.tsx
@@ -1,13 +1,20 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { FormEvent } from "react";
 import { useState } from "react";
 import type { LucideIcon } from "lucide-react";
-import { Globe2, Lock } from "lucide-react";
+
 // plane imports
 import { ETabIndices, EPageAccess } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { Button } from "@plane/propel/button";
 import { EmojiPicker, EmojiIconPickerTypes, Logo } from "@plane/propel/emoji-icon-picker";
-import { PageIcon } from "@plane/propel/icons";
+import { GlobeIcon, LockIcon, PageIcon } from "@plane/propel/icons";
+import type { ISvgIcons } from "@plane/propel/icons";
 import type { TPage } from "@plane/types";
 import { Input } from "@plane/ui";
 import { getTabIndex } from "@plane/utils";
@@ -26,10 +33,10 @@ type Props = {
 const PAGE_ACCESS_SPECIFIERS: {
   key: EPageAccess;
   i18n_label: string;
-  icon: LucideIcon;
+  icon: LucideIcon | React.FC<ISvgIcons>;
 }[] = [
-  { key: EPageAccess.PUBLIC, i18n_label: "common.access.public", icon: Globe2 },
-  { key: EPageAccess.PRIVATE, i18n_label: "common.access.private", icon: Lock },
+  { key: EPageAccess.PUBLIC, i18n_label: "common.access.public", icon: GlobeIcon },
+  { key: EPageAccess.PRIVATE, i18n_label: "common.access.private", icon: LockIcon },
 ];
 
 export function PageForm(props: Props) {
@@ -61,20 +68,20 @@ export function PageForm(props: Props) {
   return (
     <form onSubmit={handlePageFormSubmit}>
       <div className="space-y-5 p-5">
-        <h3 className="text-xl font-medium text-custom-text-200">Create page</h3>
-        <div className="flex items-start gap-2 h-9 w-full">
+        <h3 className="text-18 font-medium text-secondary">Create page</h3>
+        <div className="flex h-9 w-full items-start gap-2">
           <EmojiPicker
             isOpen={isOpen}
             handleToggle={(val: boolean) => setIsOpen(val)}
-            className="flex items-center justify-center flex-shrink0"
-            buttonClassName="flex items-center justify-center"
+            className="flex-shrink0 flex items-center justify-center"
+            buttonClassName="flex items-center justify-center bg-layer-2 hover:bg-layer-2-hover rounded-md"
             label={
-              <span className="grid h-9 w-9 place-items-center rounded-md bg-custom-background-90">
+              <span className="grid h-9 w-9 place-items-center rounded-md">
                 <>
                   {formData?.logo_props?.in_use ? (
                     <Logo logo={formData?.logo_props} size={18} type="lucide" />
                   ) : (
-                    <PageIcon className="h-4 w-4 text-custom-text-300" />
+                    <PageIcon className="h-4 w-4 text-tertiary" />
                   )}
                 </>
               </span>
@@ -106,25 +113,27 @@ export function PageForm(props: Props) {
                 : EmojiIconPickerTypes.ICON
             }
           />
-          <div className="space-y-1 flew-grow w-full">
+          <div className="flew-grow w-full space-y-1">
             <Input
               id="name"
               type="text"
               value={formData.name}
               onChange={(e) => handleFormData("name", e.target.value)}
               placeholder="Title"
-              className="w-full resize-none text-base"
+              className="w-full resize-none text-14"
               tabIndex={getIndex("name")}
               required
               autoFocus
             />
             {isTitleLengthMoreThan255Character && (
-              <span className="text-xs text-red-500">Max length of the name should be less than 255 characters</span>
+              <span className="text-11 text-danger-primary">
+                Max length of the name should be less than 255 characters
+              </span>
             )}
           </div>
         </div>
       </div>
-      <div className="px-5 py-4 flex items-center justify-between gap-2 border-t-[0.5px] border-custom-border-200">
+      <div className="flex items-center justify-between gap-2 border-t-[0.5px] border-subtle px-5 py-4">
         <div className="flex items-center gap-2">
           <AccessField
             onChange={(access) => handleFormData("access", access)}
@@ -132,15 +141,15 @@ export function PageForm(props: Props) {
             accessSpecifiers={PAGE_ACCESS_SPECIFIERS}
             isMobile={isMobile}
           />
-          <h6 className="text-xs font-medium">{t(i18n_access_label || "")}</h6>
+          <h6 className="text-11 font-medium">{t(i18n_access_label || "")}</h6>
         </div>
         <div className="flex items-center justify-end gap-2">
-          <Button variant="neutral-primary" size="sm" onClick={handleModalClose} tabIndex={getIndex("cancel")}>
+          <Button variant="secondary" size="lg" onClick={handleModalClose} tabIndex={getIndex("cancel")}>
             Cancel
           </Button>
           <Button
             variant="primary"
-            size="sm"
+            size="lg"
             type="submit"
             loading={isSubmitting}
             disabled={isTitleLengthMoreThan255Character}
diff --git a/apps/web/core/components/pages/navigation-pane/index.ts b/apps/web/core/components/pages/navigation-pane/index.ts
index cbb4ee7b4..20f042aa5 100644
--- a/apps/web/core/components/pages/navigation-pane/index.ts
+++ b/apps/web/core/components/pages/navigation-pane/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // plane web imports
 import { ORDERED_PAGE_NAVIGATION_TABS_LIST } from "@/plane-web/components/pages/navigation-pane";
 
diff --git a/apps/web/core/components/pages/navigation-pane/root.tsx b/apps/web/core/components/pages/navigation-pane/root.tsx
index 47f9abdee..079cf8b5f 100644
--- a/apps/web/core/components/pages/navigation-pane/root.tsx
+++ b/apps/web/core/components/pages/navigation-pane/root.tsx
@@ -1,10 +1,16 @@
-import React, { useCallback } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useCallback } from "react";
 import { observer } from "mobx-react";
 import { useRouter, useSearchParams } from "next/navigation";
 import { ArrowRightCircle } from "lucide-react";
-import { Tab } from "@headlessui/react";
 // plane imports
 import { useTranslation } from "@plane/i18n";
+import { Tabs } from "@plane/propel/tabs";
 import { Tooltip } from "@plane/propel/tooltip";
 // hooks
 import { useQueryParams } from "@/hooks/use-query-params";
@@ -20,7 +26,6 @@ import { PageNavigationPaneTabsList } from "./tabs-list";
 import type { INavigationPaneExtension } from "./types/extensions";
 
 import {
-  PAGE_NAVIGATION_PANE_TAB_KEYS,
   PAGE_NAVIGATION_PANE_TABS_QUERY_PARAM,
   PAGE_NAVIGATION_PANE_VERSION_QUERY_PARAM,
   PAGE_NAVIGATION_PANE_WIDTH,
@@ -49,10 +54,9 @@ export const PageNavigationPaneRoot = observer(function PageNavigationPaneRoot(p
     PAGE_NAVIGATION_PANE_TABS_QUERY_PARAM
   ) as TPageNavigationPaneTab | null;
   const activeTab: TPageNavigationPaneTab = navigationPaneQueryParam || "outline";
-  const selectedIndex = PAGE_NAVIGATION_PANE_TAB_KEYS.indexOf(activeTab);
 
   // Check if any extension is currently active based on query parameters
-  const ActiveExtension = extensions.find(function ActiveExtension(extension) {
+  const ActiveExtension = extensions.find((extension) => {
     const paneTabValue = searchParams.get(PAGE_NAVIGATION_PANE_TABS_QUERY_PARAM);
     const hasVersionParam = searchParams.get(PAGE_NAVIGATION_PANE_VERSION_QUERY_PARAM);
 
@@ -69,8 +73,8 @@ export const PageNavigationPaneRoot = observer(function PageNavigationPaneRoot(p
   const { t } = useTranslation();
 
   const handleTabChange = useCallback(
-    (index: number) => {
-      const updatedTab = PAGE_NAVIGATION_PANE_TAB_KEYS[index];
+    (value: string) => {
+      const updatedTab = value as TPageNavigationPaneTab;
       const isUpdatedTabInfo = updatedTab === "info";
       const updatedRoute = updateQueryParams({
         paramsToAdd: { [PAGE_NAVIGATION_PANE_TABS_QUERY_PARAM]: updatedTab },
@@ -83,7 +87,7 @@ export const PageNavigationPaneRoot = observer(function PageNavigationPaneRoot(p
 
   return (
     <aside
-      className="flex-shrink-0 h-full flex flex-col bg-custom-background-100 pt-3.5 border-l border-custom-border-200 transition-all duration-300 ease-out"
+      className="flex h-full shrink-0 flex-col border-l border-subtle bg-surface-1 pt-3.5 transition-all duration-300 ease-out"
       style={{
         width: `${paneWidth}px`,
         marginRight: isNavigationPaneOpen ? "0px" : `-${paneWidth}px`,
@@ -93,7 +97,7 @@ export const PageNavigationPaneRoot = observer(function PageNavigationPaneRoot(p
         <Tooltip tooltipContent={t("page_navigation_pane.close_button")}>
           <button
             type="button"
-            className="size-3.5 grid place-items-center text-custom-text-200 hover:text-custom-text-100 transition-colors"
+            className="grid size-3.5 place-items-center text-secondary transition-colors hover:text-primary"
             onClick={handleClose}
             aria-label={t("page_navigation_pane.close_button")}
           >
@@ -102,14 +106,14 @@ export const PageNavigationPaneRoot = observer(function PageNavigationPaneRoot(p
         </Tooltip>
       </div>
 
-      <div className="flex-1 flex flex-col overflow-hidden animate-slide-in-right">
+      <div className="animate-slide-in-right flex flex-1 flex-col overflow-hidden">
         {ActiveExtension ? (
           <ActiveExtension.component page={page} extensionData={ActiveExtension.data} storeType={storeType} />
         ) : showNavigationTabs ? (
-          <Tab.Group as={React.Fragment} selectedIndex={selectedIndex} onChange={handleTabChange}>
+          <Tabs value={activeTab} onValueChange={handleTabChange}>
             <PageNavigationPaneTabsList />
             <PageNavigationPaneTabPanelsRoot page={page} versionHistory={versionHistory} />
-          </Tab.Group>
+          </Tabs>
         ) : null}
       </div>
     </aside>
diff --git a/apps/web/core/components/pages/navigation-pane/tab-panels/assets.tsx b/apps/web/core/components/pages/navigation-pane/tab-panels/assets.tsx
index c4279cdfa..cfb4e8986 100644
--- a/apps/web/core/components/pages/navigation-pane/tab-panels/assets.tsx
+++ b/apps/web/core/components/pages/navigation-pane/tab-panels/assets.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useMemo } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
@@ -65,26 +71,26 @@ const AssetItem = observer(function AssetItem(props: AssetItemProps) {
     return (
       <a
         href={asset.href}
-        className="relative group/asset-item h-12 flex items-center gap-2 pr-2 rounded border border-custom-border-200 hover:bg-custom-background-80 transition-colors"
+        className="group/asset-item relative flex h-12 items-center gap-2 rounded-sm border border-subtle pr-2 transition-colors hover:bg-layer-1"
       >
         <div
-          className="flex-shrink-0 w-11 h-12 rounded-l bg-cover bg-no-repeat bg-center"
+          className="h-12 w-11 flex-shrink-0 rounded-l-sm bg-cover bg-center bg-no-repeat"
           style={{
             backgroundImage: `url('${assetSrc}')`,
           }}
         />
         <div className="flex-1 space-y-0.5 truncate">
-          <p className="text-sm font-medium truncate">{asset.name}</p>
+          <p className="truncate text-13 font-medium">{asset.name}</p>
           <div className="flex items-end justify-between gap-2">
-            <p className="shrink-0 text-xs text-custom-text-200" />
+            <p className="shrink-0 text-11 text-secondary" />
             <a
               href={assetDownloadSrc}
               target="_blank"
               rel="noreferrer noopener"
-              className="shrink-0 py-0.5 px-1 flex items-center gap-1 rounded text-custom-text-200 hover:text-custom-text-100 opacity-0 pointer-events-none group-hover/asset-item:opacity-100 group-hover/asset-item:pointer-events-auto transition-opacity"
+              className="pointer-events-none flex shrink-0 items-center gap-1 rounded-sm px-1 py-0.5 text-secondary opacity-0 transition-opacity group-hover/asset-item:pointer-events-auto group-hover/asset-item:opacity-100 hover:text-primary"
             >
-              <Download className="shrink-0 size-3" />
-              <span className="text-xs font-medium">{t("page_navigation_pane.tabs.assets.download_button")}</span>
+              <Download className="size-3 shrink-0" />
+              <span className="text-11 font-medium">{t("page_navigation_pane.tabs.assets.download_button")}</span>
             </a>
           </div>
         </div>
@@ -111,7 +117,7 @@ export const PageNavigationPaneAssetsTabPanel = observer(function PageNavigation
   if (assetsList.length === 0) return <PageNavigationPaneAssetsTabEmptyState />;
 
   return (
-    <div className="mt-5 space-y-4">
+    <div className="mt-5 space-y-4 px-4">
       {assetsList?.map((asset) => (
         <AssetItem key={asset.id} asset={asset} page={page} />
       ))}
diff --git a/apps/web/core/components/pages/navigation-pane/tab-panels/info/actors-info.tsx b/apps/web/core/components/pages/navigation-pane/tab-panels/info/actors-info.tsx
index ccd5c1c7e..f12067938 100644
--- a/apps/web/core/components/pages/navigation-pane/tab-panels/info/actors-info.tsx
+++ b/apps/web/core/components/pages/navigation-pane/tab-panels/info/actors-info.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import Link from "next/link";
 import { useParams } from "next/navigation";
@@ -28,12 +34,10 @@ export const PageNavigationPaneInfoTabActorsInfo = observer(function PageNavigat
   const { t } = useTranslation();
 
   return (
-    <div className="space-y-3 mt-4">
+    <div className="mt-4 space-y-3">
       <div>
-        <p className="text-xs font-medium text-custom-text-300">
-          {t("page_navigation_pane.tabs.info.actors_info.edited_by")}
-        </p>
-        <div className="mt-2 flex items-center justify-between gap-2 text-sm font-medium">
+        <p className="text-11 font-medium text-tertiary">{t("page_navigation_pane.tabs.info.actors_info.edited_by")}</p>
+        <div className="mt-2 flex items-center justify-between gap-2 text-13 font-medium">
           <Link href={`/${workspaceSlug?.toString()}/profile/${page.updated_by}`} className="flex items-center gap-1">
             <Avatar
               src={getFileURL(editorInformation?.avatar_url ?? "")}
@@ -43,14 +47,14 @@ export const PageNavigationPaneInfoTabActorsInfo = observer(function PageNavigat
             />
             <span>{editorInformation?.display_name ?? t("common.deactivated_user")}</span>
           </Link>
-          <span className="flex-shrink-0 text-custom-text-300">{calculateTimeAgoShort(page.updated_at ?? "")} ago</span>
+          <span className="flex-shrink-0 text-tertiary">{calculateTimeAgoShort(page.updated_at ?? "")} ago</span>
         </div>
       </div>
       <div>
-        <p className="text-xs font-medium text-custom-text-300">
+        <p className="text-11 font-medium text-tertiary">
           {t("page_navigation_pane.tabs.info.actors_info.created_by")}
         </p>
-        <div className="mt-2 flex items-center justify-between gap-2 text-sm font-medium">
+        <div className="mt-2 flex items-center justify-between gap-2 text-13 font-medium">
           <Link href={`/${workspaceSlug?.toString()}/profile/${page.created_by}`} className="flex items-center gap-1">
             <Avatar
               src={getFileURL(creatorInformation?.avatar_url ?? "")}
@@ -60,7 +64,7 @@ export const PageNavigationPaneInfoTabActorsInfo = observer(function PageNavigat
             />
             <span>{creatorInformation?.display_name ?? t("common.deactivated_user")}</span>
           </Link>
-          <span className="flex-shrink-0 text-custom-text-300">{renderFormattedDate(page.created_at)}</span>
+          <span className="flex-shrink-0 text-tertiary">{renderFormattedDate(page.created_at)}</span>
         </div>
       </div>
     </div>
diff --git a/apps/web/core/components/pages/navigation-pane/tab-panels/info/document-info.tsx b/apps/web/core/components/pages/navigation-pane/tab-panels/info/document-info.tsx
index c05b70353..f7b15f9e7 100644
--- a/apps/web/core/components/pages/navigation-pane/tab-panels/info/document-info.tsx
+++ b/apps/web/core/components/pages/navigation-pane/tab-panels/info/document-info.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { observer } from "mobx-react";
 // plane imports
@@ -74,9 +80,9 @@ export const PageNavigationPaneInfoTabDocumentInfo = observer(function PageNavig
   return (
     <div className="grid grid-cols-2 gap-2">
       {documentInfoCards.map((card) => (
-        <div key={card.key} className="p-2 bg-custom-background-90 rounded">
-          <h6 className="text-base font-semibold">{card.info}</h6>
-          <p className="mt-1.5 text-sm text-custom-text-300 font-medium">{card.title}</p>
+        <div key={card.key} className="rounded-sm bg-layer-2 p-2">
+          <h6 className="text-14 font-semibold">{card.info}</h6>
+          <p className="mt-1.5 text-13 font-medium text-tertiary">{card.title}</p>
         </div>
       ))}
     </div>
diff --git a/apps/web/core/components/pages/navigation-pane/tab-panels/info/root.tsx b/apps/web/core/components/pages/navigation-pane/tab-panels/info/root.tsx
index dd222c9ea..a2ae5ba90 100644
--- a/apps/web/core/components/pages/navigation-pane/tab-panels/info/root.tsx
+++ b/apps/web/core/components/pages/navigation-pane/tab-panels/info/root.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 // components
 import type { TPageRootHandlers } from "@/components/pages/editor/page-root";
@@ -15,13 +21,14 @@ type Props = {
 
 export const PageNavigationPaneInfoTabPanel = observer(function PageNavigationPaneInfoTabPanel(props: Props) {
   const { page, versionHistory } = props;
-
   return (
-    <div className="mt-5">
-      <PageNavigationPaneInfoTabDocumentInfo page={page} />
-      <PageNavigationPaneInfoTabActorsInfo page={page} />
-      <div className="flex-shrink-0 h-px bg-custom-background-80 my-3" />
-      <PageNavigationPaneInfoTabVersionHistory page={page} versionHistory={versionHistory} />
+    <div className="flex h-full flex-col px-4">
+      <div className="mt-5 flex-1 overflow-y-auto">
+        <PageNavigationPaneInfoTabDocumentInfo page={page} />
+        <PageNavigationPaneInfoTabActorsInfo page={page} />
+        <div className="my-3 h-px flex-shrink-0 bg-layer-1" />
+        <PageNavigationPaneInfoTabVersionHistory page={page} versionHistory={versionHistory} />
+      </div>
     </div>
   );
 });
diff --git a/apps/web/core/components/pages/navigation-pane/tab-panels/info/version-history.tsx b/apps/web/core/components/pages/navigation-pane/tab-panels/info/version-history.tsx
index 0231ff022..ac75db062 100644
--- a/apps/web/core/components/pages/navigation-pane/tab-panels/info/version-history.tsx
+++ b/apps/web/core/components/pages/navigation-pane/tab-panels/info/version-history.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useCallback } from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
@@ -39,19 +45,19 @@ const VersionHistoryItem = observer(function VersionHistoryItem(props: VersionHi
   const { t } = useTranslation();
 
   return (
-    <li className="relative flex items-center gap-x-4 text-xs font-medium">
+    <li className="relative flex items-center gap-x-4 text-11 font-medium">
       {/* timeline icon */}
-      <div className="relative size-6 flex-none grid place-items-center">
-        <div className="size-2 rounded-full bg-custom-background-80" />
+      <div className="relative grid size-6 flex-none place-items-center">
+        <div className="size-2 rounded-full bg-layer-3" />
       </div>
       {/* end timeline icon */}
       <Link
         href={getVersionLink(version.id)}
-        className={cn("block flex-1 hover:bg-custom-background-90 rounded-md py-2 px-1", {
-          "bg-custom-background-80 hover:bg-custom-background-80": isVersionActive,
+        className={cn("block flex-1 rounded-md px-1 py-2 hover:bg-layer-transparent-hover", {
+          "bg-layer-transparent-selected hover:bg-layer-transparent-selected": isVersionActive,
         })}
       >
-        <p className="text-custom-text-300">
+        <p className="text-tertiary">
           {renderFormattedDate(version.last_saved_at)}, {renderFormattedTime(version.last_saved_at)}
         </p>
         <p className="mt-1 flex items-center gap-1">
@@ -59,7 +65,7 @@ const VersionHistoryItem = observer(function VersionHistoryItem(props: VersionHi
             size="sm"
             src={getFileURL(versionCreator?.avatar_url ?? "")}
             name={versionCreator?.display_name}
-            className="flex-shrink-0"
+            className="shrink-0"
           />
           <span>{versionCreator?.display_name ?? t("common.deactivated_user")}</span>
         </p>
@@ -104,26 +110,24 @@ export const PageNavigationPaneInfoTabVersionHistory = observer(function PageNav
 
   return (
     <div>
-      <p className="text-xs font-medium text-custom-text-200">
-        {t("page_navigation_pane.tabs.info.version_history.label")}
-      </p>
+      <p className="text-11 font-medium text-secondary">{t("page_navigation_pane.tabs.info.version_history.label")}</p>
       <div className="mt-3">
-        <ul role="list" className="relative">
+        <ul className="relative">
           {/* timeline line */}
-          <div className={cn("absolute left-0 top-0 h-full flex w-6 justify-center")}>
-            <div className="w-px bg-custom-background-80" />
+          <div className={cn("absolute top-0 left-0 flex h-full w-6 justify-center")}>
+            <div className="w-px bg-layer-3" />
           </div>
           {/* end timeline line */}
-          <li className="relative flex items-center gap-x-4 text-xs font-medium">
+          <li className="relative flex items-center gap-x-4 text-11 font-medium">
             {/* timeline icon */}
-            <div className="relative size-6 flex-none rounded-full grid place-items-center bg-custom-primary-100/20">
-              <div className="size-2.5 rounded-full bg-custom-primary-100/40" />
+            <div className="relative grid size-6 flex-none place-items-center rounded-full bg-accent-primary/20">
+              <div className="size-2.5 rounded-full bg-accent-primary/40" />
             </div>
             {/* end timeline icon */}
             <Link
               href={getVersionLink()}
-              className={cn("flex-1 hover:bg-custom-background-90 rounded-md py-2 px-1", {
-                "bg-custom-background-80 hover:bg-custom-background-80": !activeVersion,
+              className={cn("flex-1 rounded-md bg-layer-transparent px-1 py-2 hover:bg-layer-transparent-hover", {
+                "bg-layer-transparent-selected hover:bg-layer-transparent-selected": !activeVersion,
               })}
             >
               {t("page_navigation_pane.tabs.info.version_history.current_version")}
diff --git a/apps/web/core/components/pages/navigation-pane/tab-panels/outline.tsx b/apps/web/core/components/pages/navigation-pane/tab-panels/outline.tsx
index adae3ab5d..43a530f8d 100644
--- a/apps/web/core/components/pages/navigation-pane/tab-panels/outline.tsx
+++ b/apps/web/core/components/pages/navigation-pane/tab-panels/outline.tsx
@@ -1,3 +1,11 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// plane imports
+import { ScrollArea } from "@plane/propel/scrollarea";
 // plane web imports
 import { PageNavigationPaneOutlineTabEmptyState } from "@/plane-web/components/pages/navigation-pane/tab-panels/empty-states/outline";
 // store
@@ -17,12 +25,18 @@ export function PageNavigationPaneOutlineTabPanel(props: Props) {
   } = page;
 
   return (
-    <div className="size-full pt-3 space-y-1">
+    <ScrollArea
+      orientation="vertical"
+      size="sm"
+      scrollType="hover"
+      className="hide-scrollbar size-full overflow-y-auto"
+      viewportClassName="px-4"
+    >
       <PageContentBrowser
         className="mt-0"
         editorRef={editorRef}
         emptyState={<PageNavigationPaneOutlineTabEmptyState />}
       />
-    </div>
+    </ScrollArea>
   );
 }
diff --git a/apps/web/core/components/pages/navigation-pane/tab-panels/root.tsx b/apps/web/core/components/pages/navigation-pane/tab-panels/root.tsx
index aba1a0444..3da17ef6f 100644
--- a/apps/web/core/components/pages/navigation-pane/tab-panels/root.tsx
+++ b/apps/web/core/components/pages/navigation-pane/tab-panels/root.tsx
@@ -1,5 +1,9 @@
-import React from "react";
-import { Tab } from "@headlessui/react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // components
 import type { TPageRootHandlers } from "@/components/pages/editor/page-root";
 // plane web imports
@@ -11,6 +15,7 @@ import type { TPageInstance } from "@/store/pages/base-page";
 import { PageNavigationPaneAssetsTabPanel } from "./assets";
 import { PageNavigationPaneInfoTabPanel } from "./info/root";
 import { PageNavigationPaneOutlineTabPanel } from "./outline";
+import { Tabs } from "@plane/propel/tabs";
 
 type Props = {
   page: TPageInstance;
@@ -21,19 +26,15 @@ export function PageNavigationPaneTabPanelsRoot(props: Props) {
   const { page, versionHistory } = props;
 
   return (
-    <Tab.Panels as={React.Fragment}>
+    <>
       {ORDERED_PAGE_NAVIGATION_TABS_LIST.map((tab) => (
-        <Tab.Panel
-          key={tab.key}
-          as="div"
-          className="size-full p-3.5 pt-0 overflow-y-auto vertical-scrollbar scrollbar-sm outline-none"
-        >
+        <Tabs.Content key={tab.key} value={tab.key} className="flex-1 overflow-hidden py-2">
           {tab.key === "outline" && <PageNavigationPaneOutlineTabPanel page={page} />}
           {tab.key === "info" && <PageNavigationPaneInfoTabPanel page={page} versionHistory={versionHistory} />}
           {tab.key === "assets" && <PageNavigationPaneAssetsTabPanel page={page} />}
           <PageNavigationPaneAdditionalTabPanelsRoot activeTab={tab.key} page={page} />
-        </Tab.Panel>
+        </Tabs.Content>
       ))}
-    </Tab.Panels>
+    </>
   );
 }
diff --git a/apps/web/core/components/pages/navigation-pane/tabs-list.tsx b/apps/web/core/components/pages/navigation-pane/tabs-list.tsx
index bbe9b6578..3ba55f6a2 100644
--- a/apps/web/core/components/pages/navigation-pane/tabs-list.tsx
+++ b/apps/web/core/components/pages/navigation-pane/tabs-list.tsx
@@ -1,6 +1,12 @@
-import { Tab } from "@headlessui/react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // plane imports
 import { useTranslation } from "@plane/i18n";
+import { Tabs } from "@plane/propel/tabs";
 // plane web components
 import { ORDERED_PAGE_NAVIGATION_TABS_LIST } from "@/plane-web/components/pages/navigation-pane";
 
@@ -9,29 +15,15 @@ export function PageNavigationPaneTabsList() {
   const { t } = useTranslation();
 
   return (
-    <Tab.List className="relative flex items-center p-[2px] rounded-md bg-custom-background-80 mx-3.5">
-      {({ selectedIndex }) => (
-        <>
-          {ORDERED_PAGE_NAVIGATION_TABS_LIST.map((tab) => (
-            <Tab
-              key={tab.key}
-              type="button"
-              className="relative z-[1] flex-1 py-1.5 text-sm font-semibold outline-none"
-            >
-              {t(tab.i18n_label)}
-            </Tab>
-          ))}
-          {/* active tab indicator */}
-          <div
-            className="absolute top-1/2 -translate-y-1/2 bg-custom-background-90 rounded transition-all duration-500 ease-in-out pointer-events-none"
-            style={{
-              left: `calc(${(selectedIndex / ORDERED_PAGE_NAVIGATION_TABS_LIST.length) * 100}% + 2px)`,
-              height: "calc(100% - 4px)",
-              width: `calc(${100 / ORDERED_PAGE_NAVIGATION_TABS_LIST.length}% - 4px)`,
-            }}
-          />
-        </>
-      )}
-    </Tab.List>
+    <div className="mx-3.5">
+      <Tabs.List>
+        {ORDERED_PAGE_NAVIGATION_TABS_LIST.map((tab) => (
+          <Tabs.Trigger key={tab.key} value={tab.key}>
+            {t(tab.i18n_label)}
+          </Tabs.Trigger>
+        ))}
+        <Tabs.Indicator />
+      </Tabs.List>
+    </div>
   );
 }
diff --git a/apps/web/core/components/pages/navigation-pane/types/extensions.ts b/apps/web/core/components/pages/navigation-pane/types/extensions.ts
index 2d3cf84e3..e24a04957 100644
--- a/apps/web/core/components/pages/navigation-pane/types/extensions.ts
+++ b/apps/web/core/components/pages/navigation-pane/types/extensions.ts
@@ -1,18 +1,24 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { ReactNode } from "react";
 import type { EPageStoreType } from "@/plane-web/hooks/store";
 import type { TPageInstance } from "@/store/pages/base-page";
 
-export interface INavigationPaneExtensionProps<T = any> {
+export interface INavigationPaneExtensionProps<T = Record<string, unknown>> {
   page: TPageInstance;
   extensionData?: T;
   storeType: EPageStoreType;
 }
 
-export interface INavigationPaneExtensionComponent<T = any> {
+export interface INavigationPaneExtensionComponent<T = Record<string, unknown>> {
   (props: INavigationPaneExtensionProps<T>): ReactNode;
 }
 
-export interface INavigationPaneExtension<T = any> {
+export interface INavigationPaneExtension<T = Record<string, unknown>> {
   id: string;
   triggerParam: string;
   component: INavigationPaneExtensionComponent<T>;
diff --git a/apps/web/core/components/pages/navigation-pane/types/index.ts b/apps/web/core/components/pages/navigation-pane/types/index.ts
index fd10e5382..f833485a0 100644
--- a/apps/web/core/components/pages/navigation-pane/types/index.ts
+++ b/apps/web/core/components/pages/navigation-pane/types/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // Export generic extension system interfaces
 export type {
   INavigationPaneExtensionProps,
diff --git a/apps/web/core/components/pages/pages-list-main-content.tsx b/apps/web/core/components/pages/pages-list-main-content.tsx
index 58e239140..adfce6b91 100644
--- a/apps/web/core/components/pages/pages-list-main-content.tsx
+++ b/apps/web/core/components/pages/pages-list-main-content.tsx
@@ -1,13 +1,14 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useState } from "react";
 import { observer } from "mobx-react";
 // plane imports
 import { useParams, useRouter } from "next/navigation";
-import {
-  EUserPermissionsLevel,
-  EPageAccess,
-  PROJECT_PAGE_TRACKER_ELEMENTS,
-  PROJECT_PAGE_TRACKER_EVENTS,
-} from "@plane/constants";
+import { EUserPermissionsLevel, EPageAccess } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { EmptyStateDetailed } from "@plane/propel/empty-state";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
@@ -15,7 +16,6 @@ import type { TPage, TPageNavigationTabs } from "@plane/types";
 import { EUserProjectRoles } from "@plane/types";
 // components
 import { PageLoader } from "@/components/pages/loaders/page-loader";
-import { captureClick, captureError, captureSuccess } from "@/helpers/event-tracker.helper";
 import { useProject } from "@/hooks/store/use-project";
 import { useUserPermissions } from "@/hooks/store/user";
 // plane web hooks
@@ -60,23 +60,10 @@ export const PagesListMainContent = observer(function PagesListMainContent(props
 
     await createPage(payload)
       .then((res) => {
-        captureSuccess({
-          eventName: PROJECT_PAGE_TRACKER_EVENTS.create,
-          payload: {
-            id: res?.id,
-            state: "SUCCESS",
-          },
-        });
         const pageId = `/${workspaceSlug}/projects/${currentProjectDetails?.id}/pages/${res?.id}`;
         router.push(pageId);
       })
       .catch((err) => {
-        captureError({
-          eventName: PROJECT_PAGE_TRACKER_EVENTS.create,
-          payload: {
-            state: "ERROR",
-          },
-        });
         setToast({
           type: TOAST_TYPE.ERROR,
           title: "Error!",
@@ -100,7 +87,6 @@ export const PagesListMainContent = observer(function PagesListMainContent(props
               label: t("project_empty_state.pages.cta_primary"),
               onClick: () => {
                 handleCreatePage();
-                captureClick({ elementName: PROJECT_PAGE_TRACKER_ELEMENTS.EMPTY_STATE_CREATE_BUTTON });
               },
               variant: "primary",
               disabled: !canPerformEmptyStateActions || isCreatingPage,
@@ -120,7 +106,6 @@ export const PagesListMainContent = observer(function PagesListMainContent(props
               label: t("project_empty_state.pages.cta_primary"),
               onClick: () => {
                 handleCreatePage();
-                captureClick({ elementName: PROJECT_PAGE_TRACKER_ELEMENTS.EMPTY_STATE_CREATE_BUTTON });
               },
               variant: "primary",
               disabled: !canPerformEmptyStateActions || isCreatingPage,
@@ -139,7 +124,6 @@ export const PagesListMainContent = observer(function PagesListMainContent(props
               label: t("project_empty_state.pages.cta_primary"),
               onClick: () => {
                 handleCreatePage();
-                captureClick({ elementName: PROJECT_PAGE_TRACKER_ELEMENTS.EMPTY_STATE_CREATE_BUTTON });
               },
               variant: "primary",
               disabled: !canPerformEmptyStateActions || isCreatingPage,
diff --git a/apps/web/core/components/pages/pages-list-view.tsx b/apps/web/core/components/pages/pages-list-view.tsx
index 15f114f46..1468430a5 100644
--- a/apps/web/core/components/pages/pages-list-view.tsx
+++ b/apps/web/core/components/pages/pages-list-view.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import useSWR from "swr";
 import type { TPageNavigationTabs } from "@plane/types";
@@ -28,7 +34,7 @@ export const PagesListView = observer(function PagesListView(props: TPageView) {
 
   // pages loader
   return (
-    <div className="relative w-full h-full overflow-hidden flex flex-col">
+    <div className="relative flex h-full w-full flex-col overflow-hidden">
       {/* tab header */}
       {isAnyPageAvailable && (
         <PagesListHeaderRoot
diff --git a/apps/web/core/components/pages/version/editor.tsx b/apps/web/core/components/pages/version/editor.tsx
index 27a594566..4543af5b0 100644
--- a/apps/web/core/components/pages/version/editor.tsx
+++ b/apps/web/core/components/pages/version/editor.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // plane imports
diff --git a/apps/web/core/components/pages/version/index.ts b/apps/web/core/components/pages/version/index.ts
index 1efe34c51..d98033459 100644
--- a/apps/web/core/components/pages/version/index.ts
+++ b/apps/web/core/components/pages/version/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./root";
diff --git a/apps/web/core/components/pages/version/main-content.tsx b/apps/web/core/components/pages/version/main-content.tsx
index 28d1c1901..9c3a502a1 100644
--- a/apps/web/core/components/pages/version/main-content.tsx
+++ b/apps/web/core/components/pages/version/main-content.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useState } from "react";
 import { observer } from "mobx-react";
 import useSWR from "swr";
@@ -76,49 +82,43 @@ export const PageVersionsMainContent = observer(function PageVersionsMainContent
   const VersionEditor = editorComponent;
 
   return (
-    <div className="flex-grow flex flex-col overflow-hidden">
+    <div className="flex flex-grow flex-col overflow-hidden">
       {versionDetailsError ? (
-        <div className="flex-grow grid place-items-center">
+        <div className="grid flex-grow place-items-center">
           <div className="flex flex-col items-center gap-4 text-center">
-            <span className="flex-shrink-0 grid place-items-center size-11 text-custom-text-300">
+            <span className="grid size-11 flex-shrink-0 place-items-center text-tertiary">
               <TriangleAlert className="size-10" />
             </span>
             <div>
-              <h6 className="text-lg font-semibold">Something went wrong!</h6>
-              <p className="text-sm text-custom-text-300">The version could not be loaded, please try again.</p>
+              <h6 className="text-16 font-semibold">Something went wrong!</h6>
+              <p className="text-13 text-tertiary">The version could not be loaded, please try again.</p>
             </div>
-            <Button variant="link-primary" onClick={handleRetry} loading={isRetrying}>
+            <Button variant="link" onClick={handleRetry} loading={isRetrying}>
               Try again
             </Button>
           </div>
         </div>
       ) : (
         <>
-          <div className="min-h-14 py-3 px-5 border-b border-custom-border-200 flex items-center justify-between gap-2">
+          <div className="flex min-h-14 items-center justify-between gap-2 border-b border-subtle px-5 py-3">
             <div className="flex items-center gap-4">
-              <h6 className="text-base font-medium">
+              <h6 className="text-14 font-medium">
                 {versionDetails
                   ? `${renderFormattedDate(versionDetails.last_saved_at)} ${renderFormattedTime(versionDetails.last_saved_at)}`
                   : "Loading version details"}
               </h6>
-              <span className="flex-shrink-0 flex items-center gap-1 text-xs font-medium text-custom-primary-100 bg-custom-primary-100/20 py-1 px-1.5 rounded">
-                <EyeIcon className="flex-shrink-0 size-3" />
+              <span className="flex flex-shrink-0 items-center gap-1 rounded-sm bg-accent-primary/20 px-1.5 py-1 text-11 font-medium text-accent-primary">
+                <EyeIcon className="size-3 flex-shrink-0" />
                 View only
               </span>
             </div>
             {restoreEnabled && (
-              <Button
-                variant="primary"
-                size="sm"
-                className="flex-shrink-0"
-                onClick={handleRestoreVersion}
-                loading={isRestoring}
-              >
+              <Button variant="primary" className="flex-shrink-0" onClick={handleRestoreVersion} loading={isRestoring}>
                 {isRestoring ? "Restoring" : "Restore"}
               </Button>
             )}
           </div>
-          <div className="pt-8 h-full overflow-y-scroll vertical-scrollbar scrollbar-sm">
+          <div className="vertical-scrollbar scrollbar-sm h-full overflow-y-scroll pt-8">
             <VersionEditor activeVersion={activeVersion} storeType={storeType} versionDetails={versionDetails} />
           </div>
         </>
diff --git a/apps/web/core/components/pages/version/root.tsx b/apps/web/core/components/pages/version/root.tsx
index c6ae300c6..81e1b61c6 100644
--- a/apps/web/core/components/pages/version/root.tsx
+++ b/apps/web/core/components/pages/version/root.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useCallback } from "react";
 import { observer } from "mobx-react";
 import { useRouter, useSearchParams } from "next/navigation";
@@ -43,9 +49,9 @@ export const PageVersionsOverlay = observer(function PageVersionsOverlay(props:
   return (
     <div
       className={cn(
-        "absolute inset-0 z-[16] h-full bg-custom-background-100 flex overflow-hidden opacity-0 pointer-events-none transition-opacity",
+        "pointer-events-none absolute inset-0 z-[16] flex h-full overflow-hidden bg-surface-1 opacity-0 transition-opacity",
         {
-          "opacity-100 pointer-events-auto": isOpen,
+          "pointer-events-auto opacity-100": isOpen,
         }
       )}
       style={{
diff --git a/apps/web/core/components/power-k/actions/helper.ts b/apps/web/core/components/power-k/actions/helper.ts
index 5156cadf7..a72f9d441 100644
--- a/apps/web/core/components/power-k/actions/helper.ts
+++ b/apps/web/core/components/power-k/actions/helper.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { store } from "@/lib/store-context";
 
 export const openProjectAndScrollToSidebar = (itemProjectId: string | undefined) => {
diff --git a/apps/web/core/components/power-k/config/account-commands.ts b/apps/web/core/components/power-k/config/account-commands.ts
index 8adce5e6d..e412ed8d2 100644
--- a/apps/web/core/components/power-k/config/account-commands.ts
+++ b/apps/web/core/components/power-k/config/account-commands.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useCallback } from "react";
 import { LogOut, Mails } from "lucide-react";
 // plane imports
diff --git a/apps/web/core/components/power-k/config/commands.ts b/apps/web/core/components/power-k/config/commands.ts
index 055257403..eef139ae8 100644
--- a/apps/web/core/components/power-k/config/commands.ts
+++ b/apps/web/core/components/power-k/config/commands.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // local imports
 import type { TPowerKCommandConfig } from "../core/types";
 import { usePowerKContextBasedActions } from "../ui/pages/context-based";
diff --git a/apps/web/core/components/power-k/config/creation/command.ts b/apps/web/core/components/power-k/config/creation/command.ts
index ca75f4d91..f63baa929 100644
--- a/apps/web/core/components/power-k/config/creation/command.ts
+++ b/apps/web/core/components/power-k/config/creation/command.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { FileText, FolderPlus, Layers, SquarePlus } from "lucide-react";
 // plane imports
 import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
@@ -9,8 +15,7 @@ import type { TPowerKCommandConfig, TPowerKContext } from "@/components/power-k/
 import { useCommandPalette } from "@/hooks/store/use-command-palette";
 import { useProject } from "@/hooks/store/use-project";
 import { useUser } from "@/hooks/store/user";
-// plane web imports
-import { getIsWorkspaceCreationDisabled } from "@/plane-web/helpers/instance.helper";
+import { useInstance } from "@/hooks/store/use-instance";
 
 export type TPowerKCreationCommandKeys =
   | "create_work_item"
@@ -26,6 +31,7 @@ export type TPowerKCreationCommandKeys =
  */
 export const usePowerKCreationCommandsRecord = (): Record<TPowerKCreationCommandKeys, TPowerKCommandConfig> => {
   // store
+  const { config } = useInstance();
   const {
     canPerformAnyCreateAction,
     permission: { allowPermissions },
@@ -52,7 +58,7 @@ export const usePowerKCreationCommandsRecord = (): Record<TPowerKCreationCommand
       ctx.params.workspaceSlug?.toString(),
       ctx.params.projectId?.toString()
     );
-  const isWorkspaceCreationDisabled = getIsWorkspaceCreationDisabled();
+  const isWorkspaceCreationDisabled = config?.is_workspace_creation_disabled ?? false;
 
   const getProjectDetails = (ctx: TPowerKContext) =>
     ctx.params.projectId ? getPartialProjectById(ctx.params.projectId.toString()) : undefined;
diff --git a/apps/web/core/components/power-k/config/creation/root.ts b/apps/web/core/components/power-k/config/creation/root.ts
index 59402c3a6..10bc9434e 100644
--- a/apps/web/core/components/power-k/config/creation/root.ts
+++ b/apps/web/core/components/power-k/config/creation/root.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // types
 import type { TPowerKCommandConfig } from "@/components/power-k/core/types";
 // local imports
diff --git a/apps/web/core/components/power-k/config/help-commands.ts b/apps/web/core/components/power-k/config/help-commands.ts
index 9f61a5ceb..0543e6698 100644
--- a/apps/web/core/components/power-k/config/help-commands.ts
+++ b/apps/web/core/components/power-k/config/help-commands.ts
@@ -1,6 +1,10 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { FileText, GithubIcon, MessageSquare, Rocket } from "lucide-react";
-// plane imports
-import { DiscordIcon } from "@plane/propel/icons";
 // components
 import type { TPowerKCommandConfig } from "@/components/power-k/core/types";
 // hooks
@@ -42,13 +46,13 @@ export const usePowerKHelpCommands = (): TPowerKCommandConfig[] => {
       closeOnSelect: true,
     },
     {
-      id: "join_discord",
+      id: "join_forum",
       type: "action",
       group: "help",
-      i18n_title: "power_k.help_actions.join_discord",
-      icon: DiscordIcon,
+      i18n_title: "power_k.help_actions.join_forum",
+      icon: MessageSquare,
       action: () => {
-        window.open("https://discord.com/invite/A92xrEGCge", "_blank", "noopener,noreferrer");
+        window.open("https://forum.plane.so", "_blank", "noopener,noreferrer");
       },
       isEnabled: () => true,
       isVisible: () => true,
diff --git a/apps/web/core/components/power-k/config/miscellaneous-commands.ts b/apps/web/core/components/power-k/config/miscellaneous-commands.ts
index 4e69bea05..de1d617cf 100644
--- a/apps/web/core/components/power-k/config/miscellaneous-commands.ts
+++ b/apps/web/core/components/power-k/config/miscellaneous-commands.ts
@@ -1,7 +1,14 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useCallback } from "react";
-import { Link, PanelLeft, Search } from "lucide-react";
-// plane imports
+import { PanelLeft } from "lucide-react";
 import { useTranslation } from "@plane/i18n";
+import { LinkIcon, SearchIcon } from "@plane/propel/icons";
+// plane imports
 import { setToast, TOAST_TYPE } from "@plane/propel/toast";
 import { copyTextToClipboard } from "@plane/utils";
 // components
@@ -62,7 +69,7 @@ export const usePowerKMiscellaneousCommands = (): TPowerKCommandConfig[] => {
       group: "miscellaneous",
       type: "action",
       i18n_title: "power_k.miscellaneous_actions.copy_current_page_url",
-      icon: Link,
+      icon: LinkIcon,
       action: copyCurrentPageUrlToClipboard,
       modifierShortcut: "cmd+shift+c",
       isEnabled: () => true,
@@ -74,7 +81,7 @@ export const usePowerKMiscellaneousCommands = (): TPowerKCommandConfig[] => {
       group: "miscellaneous",
       type: "action",
       i18n_title: "power_k.miscellaneous_actions.focus_top_nav_search",
-      icon: Search,
+      icon: SearchIcon,
       action: focusTopNavSearch,
       modifierShortcut: "cmd+f",
       isEnabled: () => true,
diff --git a/apps/web/core/components/power-k/config/navigation/commands.ts b/apps/web/core/components/power-k/config/navigation/commands.ts
index 94e424adf..aecd31b78 100644
--- a/apps/web/core/components/power-k/config/navigation/commands.ts
+++ b/apps/web/core/components/power-k/config/navigation/commands.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { BarChart2, Briefcase, FileText, Home, Inbox, Layers, PenSquare, Settings } from "lucide-react";
 // plane imports
 import { EUserPermissionsLevel } from "@plane/constants";
diff --git a/apps/web/core/components/power-k/config/navigation/root.ts b/apps/web/core/components/power-k/config/navigation/root.ts
index 529fd1662..b2f8cb294 100644
--- a/apps/web/core/components/power-k/config/navigation/root.ts
+++ b/apps/web/core/components/power-k/config/navigation/root.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // components
 import type { TPowerKCommandConfig } from "@/components/power-k/core/types";
 // local imports
diff --git a/apps/web/core/components/power-k/config/preferences-commands.ts b/apps/web/core/components/power-k/config/preferences-commands.ts
index 5f86886ac..b1a9e9718 100644
--- a/apps/web/core/components/power-k/config/preferences-commands.ts
+++ b/apps/web/core/components/power-k/config/preferences-commands.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useCallback } from "react";
 import { useTheme } from "next-themes";
 import { Calendar, Earth, Languages, Palette } from "lucide-react";
@@ -28,9 +34,12 @@ export const usePowerKPreferencesCommands = (): TPowerKCommandConfig[] => {
         .then(() => {
           setToast({
             type: TOAST_TYPE.SUCCESS,
-            title: t("toast.success"),
-            message: t("power_k.preferences_actions.toast.theme.success"),
+            title: "Theme updated",
+            message: "Reloading to apply changes...",
           });
+          // reload the page after showing the toast
+          window.location.reload();
+          return;
         })
         .catch(() => {
           setToast({
@@ -38,6 +47,7 @@ export const usePowerKPreferencesCommands = (): TPowerKCommandConfig[] => {
             title: t("toast.error"),
             message: t("power_k.preferences_actions.toast.theme.error"),
           });
+          return;
         });
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -53,6 +63,7 @@ export const usePowerKPreferencesCommands = (): TPowerKCommandConfig[] => {
             title: t("toast.success"),
             message: t("power_k.preferences_actions.toast.timezone.success"),
           });
+          return;
         })
         .catch(() => {
           setToast({
@@ -60,6 +71,7 @@ export const usePowerKPreferencesCommands = (): TPowerKCommandConfig[] => {
             title: t("toast.error"),
             message: t("power_k.preferences_actions.toast.timezone.error"),
           });
+          return;
         });
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -75,6 +87,7 @@ export const usePowerKPreferencesCommands = (): TPowerKCommandConfig[] => {
             title: t("toast.success"),
             message: t("power_k.preferences_actions.toast.generic.success"),
           });
+          return;
         })
         .catch(() => {
           setToast({
@@ -82,6 +95,7 @@ export const usePowerKPreferencesCommands = (): TPowerKCommandConfig[] => {
             title: t("toast.error"),
             message: t("power_k.preferences_actions.toast.generic.error"),
           });
+          return;
         });
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -98,7 +112,7 @@ export const usePowerKPreferencesCommands = (): TPowerKCommandConfig[] => {
       icon: Palette,
       onSelect: (data) => {
         const theme = data as string;
-        handleUpdateTheme(theme);
+        void handleUpdateTheme(theme);
       },
       isEnabled: () => true,
       isVisible: () => true,
diff --git a/apps/web/core/components/power-k/core/context-detector.ts b/apps/web/core/components/power-k/core/context-detector.ts
index 929b62c63..eb3093b6d 100644
--- a/apps/web/core/components/power-k/core/context-detector.ts
+++ b/apps/web/core/components/power-k/core/context-detector.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { Params } from "react-router";
 // plane web imports
 import { detectExtendedContextFromURL } from "@/plane-web/components/command-palette/power-k/context-detector";
diff --git a/apps/web/core/components/power-k/core/registry.ts b/apps/web/core/components/power-k/core/registry.ts
index 83c0ecba6..08ed75a9f 100644
--- a/apps/web/core/components/power-k/core/registry.ts
+++ b/apps/web/core/components/power-k/core/registry.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { action, observable, makeObservable } from "mobx";
 import { computedFn } from "mobx-utils";
 import type { TPowerKCommandConfig, TPowerKContext, TPowerKCommandGroup } from "./types";
diff --git a/apps/web/core/components/power-k/core/shortcut-handler.ts b/apps/web/core/components/power-k/core/shortcut-handler.ts
index ed95421a2..85bcb27a1 100644
--- a/apps/web/core/components/power-k/core/shortcut-handler.ts
+++ b/apps/web/core/components/power-k/core/shortcut-handler.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { IPowerKCommandRegistry } from "./registry";
 import type { TPowerKCommandConfig, TPowerKContext } from "./types";
 
diff --git a/apps/web/core/components/power-k/core/types.ts b/apps/web/core/components/power-k/core/types.ts
index 0ced81e28..c10b29709 100644
--- a/apps/web/core/components/power-k/core/types.ts
+++ b/apps/web/core/components/power-k/core/types.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { useRouter } from "next/navigation";
 // plane web imports
 import type {
diff --git a/apps/web/core/components/power-k/global-shortcuts.tsx b/apps/web/core/components/power-k/global-shortcuts.tsx
index 606d6d705..fe4fe8e2e 100644
--- a/apps/web/core/components/power-k/global-shortcuts.tsx
+++ b/apps/web/core/components/power-k/global-shortcuts.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useEffect, useRef } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
diff --git a/apps/web/core/components/power-k/hooks/use-context-indicator.ts b/apps/web/core/components/power-k/hooks/use-context-indicator.ts
index 52699135a..047d2fb4a 100644
--- a/apps/web/core/components/power-k/hooks/use-context-indicator.ts
+++ b/apps/web/core/components/power-k/hooks/use-context-indicator.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useParams } from "next/navigation";
 // plane imports
 import { getPageName } from "@plane/utils";
diff --git a/apps/web/core/components/power-k/menus/builder.tsx b/apps/web/core/components/power-k/menus/builder.tsx
index e7b0b8258..5a6565cc3 100644
--- a/apps/web/core/components/power-k/menus/builder.tsx
+++ b/apps/web/core/components/power-k/menus/builder.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 import { Command } from "cmdk";
 // local imports
diff --git a/apps/web/core/components/power-k/menus/cycles.tsx b/apps/web/core/components/power-k/menus/cycles.tsx
index b6af888e4..4714b26f2 100644
--- a/apps/web/core/components/power-k/menus/cycles.tsx
+++ b/apps/web/core/components/power-k/menus/cycles.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 import { observer } from "mobx-react";
 // plane imports
diff --git a/apps/web/core/components/power-k/menus/empty-state.tsx b/apps/web/core/components/power-k/menus/empty-state.tsx
index e6ca8210e..89496a327 100644
--- a/apps/web/core/components/power-k/menus/empty-state.tsx
+++ b/apps/web/core/components/power-k/menus/empty-state.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 
 type Props = {
@@ -5,5 +11,5 @@ type Props = {
 };
 
 export function PowerKMenuEmptyState({ emptyText = "No results found" }: Props) {
-  return <div className="px-3 py-8 text-center text-sm text-custom-text-300">{emptyText}</div>;
+  return <div className="px-3 py-8 text-center text-13 text-tertiary">{emptyText}</div>;
 }
diff --git a/apps/web/core/components/power-k/menus/labels.tsx b/apps/web/core/components/power-k/menus/labels.tsx
index 61e87d7d4..21878fcd1 100644
--- a/apps/web/core/components/power-k/menus/labels.tsx
+++ b/apps/web/core/components/power-k/menus/labels.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 import { observer } from "mobx-react";
 // plane imports
@@ -16,7 +22,7 @@ export const PowerKLabelsMenu = observer(function PowerKLabelsMenu({ labels, onS
     <PowerKMenuBuilder
       items={labels}
       getIconNode={(label) => (
-        <span className="shrink-0 size-3.5 grid place-items-center">
+        <span className="grid size-3.5 shrink-0 place-items-center">
           <span className="size-2.5 rounded-full" style={{ backgroundColor: label.color }} />
         </span>
       )}
diff --git a/apps/web/core/components/power-k/menus/members.tsx b/apps/web/core/components/power-k/menus/members.tsx
index ab0e54904..4c9174da5 100644
--- a/apps/web/core/components/power-k/menus/members.tsx
+++ b/apps/web/core/components/power-k/menus/members.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { Command } from "cmdk";
 import { observer } from "mobx-react";
 // plane imports
diff --git a/apps/web/core/components/power-k/menus/modules.tsx b/apps/web/core/components/power-k/menus/modules.tsx
index 8684cfdd0..8c17a5fcd 100644
--- a/apps/web/core/components/power-k/menus/modules.tsx
+++ b/apps/web/core/components/power-k/menus/modules.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 import { observer } from "mobx-react";
 // plane imports
@@ -17,7 +23,7 @@ export const PowerKModulesMenu = observer(function PowerKModulesMenu({ modules,
     <PowerKMenuBuilder
       items={modules}
       getKey={(module) => module.id}
-      getIconNode={(module) => <ModuleStatusIcon status={module.status ?? "backlog"} className="shrink-0 size-3.5" />}
+      getIconNode={(module) => <ModuleStatusIcon status={module.status ?? "backlog"} className="size-3.5 shrink-0" />}
       getValue={(module) => module.name}
       getLabel={(module) => module.name}
       isSelected={(module) => !!value?.includes(module.id)}
diff --git a/apps/web/core/components/power-k/menus/projects.tsx b/apps/web/core/components/power-k/menus/projects.tsx
index c65f902e5..559b58659 100644
--- a/apps/web/core/components/power-k/menus/projects.tsx
+++ b/apps/web/core/components/power-k/menus/projects.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 // components
 import { Logo } from "@plane/propel/emoji-icon-picker";
diff --git a/apps/web/core/components/power-k/menus/settings.tsx b/apps/web/core/components/power-k/menus/settings.tsx
index ed594f3b1..da08b08da 100644
--- a/apps/web/core/components/power-k/menus/settings.tsx
+++ b/apps/web/core/components/power-k/menus/settings.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 import { observer } from "mobx-react";
 // local imports
diff --git a/apps/web/core/components/power-k/menus/views.tsx b/apps/web/core/components/power-k/menus/views.tsx
index fdd8ec8d9..4404d8513 100644
--- a/apps/web/core/components/power-k/menus/views.tsx
+++ b/apps/web/core/components/power-k/menus/views.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 import { observer } from "mobx-react";
 import { Layers } from "lucide-react";
diff --git a/apps/web/core/components/power-k/menus/workspaces.tsx b/apps/web/core/components/power-k/menus/workspaces.tsx
index a8c494628..e5b5cda6a 100644
--- a/apps/web/core/components/power-k/menus/workspaces.tsx
+++ b/apps/web/core/components/power-k/menus/workspaces.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 // plane imports
 import type { IWorkspace } from "@plane/types";
diff --git a/apps/web/core/components/power-k/projects-app-provider.tsx b/apps/web/core/components/power-k/projects-app-provider.tsx
index 8b0caffa7..624bb708f 100644
--- a/apps/web/core/components/power-k/projects-app-provider.tsx
+++ b/apps/web/core/components/power-k/projects-app-provider.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useMemo, useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
diff --git a/apps/web/core/components/power-k/ui/modal/command-item-shortcut-badge.tsx b/apps/web/core/components/power-k/ui/modal/command-item-shortcut-badge.tsx
index 2d566f171..57ad412ff 100644
--- a/apps/web/core/components/power-k/ui/modal/command-item-shortcut-badge.tsx
+++ b/apps/web/core/components/power-k/ui/modal/command-item-shortcut-badge.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 
 /**
@@ -67,10 +73,10 @@ export function ShortcutBadge({ shortcut }: { shortcut: string | undefined }) {
   const formatted = formatShortcutForDisplay(shortcut);
 
   return (
-    <div className="shrink-0 pointer-events-none inline-flex items-center gap-1 select-none font-medium">
+    <div className="pointer-events-none inline-flex shrink-0 items-center gap-1 font-medium select-none">
       {formatted?.split("").map((char, index) => (
         <React.Fragment key={index}>
-          <kbd className="inline-flex h-5 items-center justify-center rounded border border-custom-border-300 bg-custom-background-100 px-1.5 font-mono text-[10px] font-medium text-custom-text-300">
+          <kbd className="inline-flex h-5 items-center justify-center rounded-sm border border-strong bg-surface-1 px-1.5 font-code text-10 font-medium text-tertiary">
             {char.toUpperCase()}
           </kbd>
         </React.Fragment>
@@ -95,13 +101,13 @@ export function KeySequenceBadge({ sequence }: { sequence: string | undefined })
   const chars = sequence.split("");
 
   return (
-    <div className="shrink-0 pointer-events-none inline-flex items-center gap-1 select-none font-medium">
+    <div className="pointer-events-none inline-flex shrink-0 items-center gap-1 font-medium select-none">
       {chars.map((char, index) => (
         <React.Fragment key={index}>
-          <kbd className="inline-flex h-5 items-center justify-center rounded border border-custom-border-300 bg-custom-background-100 px-1.5 font-mono text-[10px] font-medium text-custom-text-300">
+          <kbd className="inline-flex h-5 items-center justify-center rounded-sm border border-strong bg-surface-1 px-1.5 font-code text-10 font-medium text-tertiary">
             {char.toUpperCase()}
           </kbd>
-          {index < chars.length - 1 && <span className="text-[10px] text-custom-text-400">then</span>}
+          {index < chars.length - 1 && <span className="text-10 text-placeholder">then</span>}
         </React.Fragment>
       ))}
     </div>
diff --git a/apps/web/core/components/power-k/ui/modal/command-item.tsx b/apps/web/core/components/power-k/ui/modal/command-item.tsx
index 870c21e69..18fdbd5bc 100644
--- a/apps/web/core/components/power-k/ui/modal/command-item.tsx
+++ b/apps/web/core/components/power-k/ui/modal/command-item.tsx
@@ -1,6 +1,13 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 import { Command } from "cmdk";
-import { Check } from "lucide-react";
+
+import { CheckIcon } from "@plane/propel/icons";
 // plane imports
 import { cn } from "@plane/utils";
 // local imports
@@ -24,16 +31,16 @@ export function PowerKModalCommandItem(props: Props) {
   return (
     <Command.Item value={value} onSelect={onSelect} className="focus:outline-none" disabled={isDisabled}>
       <div
-        className={cn("flex items-center gap-2 text-custom-text-200", {
+        className={cn("flex items-center gap-2 text-secondary", {
           "opacity-70": isDisabled,
         })}
       >
-        {Icon && <Icon className="shrink-0 size-3.5" />}
+        {Icon && <Icon className="size-3.5 shrink-0" />}
         {iconNode}
         {label}
       </div>
-      <div className="shrink-0 flex items-center gap-2">
-        {isSelected && <Check className="shrink-0 size-3 text-custom-text-200" />}
+      <div className="flex shrink-0 items-center gap-2">
+        {isSelected && <CheckIcon className="size-3 shrink-0 text-secondary" />}
         {keySequence && <KeySequenceBadge sequence={keySequence} />}
         {shortcut && <ShortcutBadge shortcut={shortcut} />}
       </div>
diff --git a/apps/web/core/components/power-k/ui/modal/commands-list.tsx b/apps/web/core/components/power-k/ui/modal/commands-list.tsx
index 2c805eba6..69e7ce1d0 100644
--- a/apps/web/core/components/power-k/ui/modal/commands-list.tsx
+++ b/apps/web/core/components/power-k/ui/modal/commands-list.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { TPowerKCommandConfig, TPowerKContext, TPowerKPageType } from "../../core/types";
 import { PowerKModalPagesList } from "../pages";
 import { PowerKContextBasedPagesList } from "../pages/context-based";
diff --git a/apps/web/core/components/power-k/ui/modal/constants.ts b/apps/web/core/components/power-k/ui/modal/constants.ts
index 361151ae6..5cdf5495a 100644
--- a/apps/web/core/components/power-k/ui/modal/constants.ts
+++ b/apps/web/core/components/power-k/ui/modal/constants.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // plane web imports
 import { POWER_K_MODAL_PAGE_DETAILS_EXTENDED } from "@/plane-web/components/command-palette/power-k/constants";
 // local imports
diff --git a/apps/web/core/components/power-k/ui/modal/context-indicator.tsx b/apps/web/core/components/power-k/ui/modal/context-indicator.tsx
index ca8907171..3c0f1ac75 100644
--- a/apps/web/core/components/power-k/ui/modal/context-indicator.tsx
+++ b/apps/web/core/components/power-k/ui/modal/context-indicator.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { X } from "lucide-react";
 // plane imports
 import { useTranslation } from "@plane/i18n";
@@ -24,16 +30,16 @@ export function PowerKModalContextIndicator(props: Props) {
 
   return (
     <div className="w-full px-4 pt-3 pb-2">
-      <div className="max-w-full bg-custom-background-80 pl-2 pr-1 py-0.5 rounded inline-flex items-center gap-1 truncate">
-        <div className="flex items-center gap-1.5 text-xs font-medium truncate">
-          <span className="shrink-0 text-custom-text-200">{t(contextEntity.i18n_indicator)}</span>
-          <span className="shrink-0 bg-custom-text-200 size-1 rounded-full" />
+      <div className="inline-flex max-w-full items-center gap-1 truncate rounded-sm bg-layer-1 py-0.5 pr-1 pl-2">
+        <div className="flex items-center gap-1.5 truncate text-11 font-medium">
+          <span className="shrink-0 text-secondary">{t(contextEntity.i18n_indicator)}</span>
+          <span className="size-1 shrink-0 rounded-full bg-layer-1" />
           <p className="truncate">{contextIndicator}</p>
         </div>
         <button
           type="button"
           onClick={handleClearContext}
-          className="shrink-0 grid place-items-center p-1 text-custom-text-200 hover:text-custom-text-100 transition-colors"
+          className="grid shrink-0 place-items-center p-1 text-secondary transition-colors hover:text-primary"
           title="Clear context (Backspace)"
           aria-label="Clear context (Backspace)"
           tabIndex={-1}
diff --git a/apps/web/core/components/power-k/ui/modal/footer.tsx b/apps/web/core/components/power-k/ui/modal/footer.tsx
index ed7a9d967..092e4f6da 100644
--- a/apps/web/core/components/power-k/ui/modal/footer.tsx
+++ b/apps/web/core/components/power-k/ui/modal/footer.tsx
@@ -1,4 +1,9 @@
-import type React from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 // plane imports
 import { useTranslation } from "@plane/i18n";
@@ -16,10 +21,10 @@ export const PowerKModalFooter = observer(function PowerKModalFooter(props: Prop
   const { t } = useTranslation();
 
   return (
-    <div className="w-full flex items-center justify-between px-4 py-2 border-t border-custom-border-200 bg-custom-background-90/80 rounded-b-lg">
+    <div className="flex w-full items-center justify-between rounded-b-lg border-t border-subtle bg-surface-2/80 px-4 py-2">
       <div />
       <div className="flex items-center gap-2">
-        <span className="text-xs text-custom-text-300">{t("power_k.footer.workspace_level")}</span>
+        <span className="text-11 text-tertiary">{t("power_k.footer.workspace_level")}</span>
         <ToggleSwitch
           value={isWorkspaceLevel}
           onChange={() => onWorkspaceLevelChange(!isWorkspaceLevel)}
diff --git a/apps/web/core/components/power-k/ui/modal/header.tsx b/apps/web/core/components/power-k/ui/modal/header.tsx
index 47cf9e87e..4b567b733 100644
--- a/apps/web/core/components/power-k/ui/modal/header.tsx
+++ b/apps/web/core/components/power-k/ui/modal/header.tsx
@@ -1,8 +1,15 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 import { Command } from "cmdk";
-import { X, Search } from "lucide-react";
-// plane imports
+import { X } from "lucide-react";
 import { useTranslation } from "@plane/i18n";
+// plane imports
+import { SearchIcon } from "@plane/propel/icons";
 // local imports
 import type { TPowerKContext, TPowerKPageType } from "../../core/types";
 import { POWER_K_MODAL_PAGE_DETAILS } from "./constants";
@@ -25,7 +32,7 @@ export function PowerKModalHeader(props: Props) {
     : t("power_k.page_placeholders.default");
 
   return (
-    <div className="border-b border-custom-border-200">
+    <div className="border-b border-subtle">
       {/* Context Indicator */}
       {context.shouldShowContextBasedActions && !activePage && (
         <PowerKModalContextIndicator
@@ -36,18 +43,18 @@ export function PowerKModalHeader(props: Props) {
 
       {/* Search Input */}
       <div className="flex items-center gap-2 px-4 py-3">
-        <Search className="shrink-0 size-4 text-custom-text-400" />
+        <SearchIcon className="size-4 shrink-0 text-placeholder" />
         <Command.Input
           value={searchTerm}
           onValueChange={onSearchChange}
           placeholder={placeholder}
-          className="flex-1 bg-transparent text-sm text-custom-text-100 placeholder-custom-text-400 outline-none"
+          className="flex-1 bg-transparent text-13 text-primary placeholder-(--text-color-placeholder) outline-none"
           autoFocus
         />
         {searchTerm && (
           <button
             onClick={() => onSearchChange("")}
-            className="flex-shrink-0 rounded p-1 text-custom-text-400 hover:bg-custom-background-80 hover:text-custom-text-200"
+            className="flex-shrink-0 rounded-sm p-1 text-placeholder hover:bg-layer-1 hover:text-secondary"
           >
             <X className="h-3 w-3" />
           </button>
diff --git a/apps/web/core/components/power-k/ui/modal/search-menu.tsx b/apps/web/core/components/power-k/ui/modal/search-menu.tsx
index 9dc741c5e..ddd723f9d 100644
--- a/apps/web/core/components/power-k/ui/modal/search-menu.tsx
+++ b/apps/web/core/components/power-k/ui/modal/search-menu.tsx
@@ -1,4 +1,10 @@
-import React, { useState, useEffect } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState, useEffect } from "react";
 import { useParams } from "next/navigation";
 // plane imports
 import { WORKSPACE_DEFAULT_SEARCH_RESULT } from "@plane/constants";
@@ -9,7 +15,7 @@ import { usePowerK } from "@/hooks/store/use-power-k";
 import useDebounce from "@/hooks/use-debounce";
 // plane web imports
 import { PowerKModalNoSearchResultsCommand } from "@/plane-web/components/command-palette/power-k/search/no-results-command";
-import { WorkspaceService } from "@/plane-web/services";
+import { WorkspaceService } from "@/services/workspace.service";
 // local imports
 import type { TPowerKContext, TPowerKPageType } from "../../core/types";
 import { PowerKModalSearchResults } from "./search-results";
@@ -77,9 +83,9 @@ export function PowerKModalSearchMenu(props: Props) {
   return (
     <>
       {searchTerm.trim() !== "" && (
-        <div className="flex items-center justify-between gap-2 mt-4 px-4">
+        <div className="mt-4 flex items-center justify-between gap-2 px-4">
           <h5
-            className={cn("text-xs text-custom-text-100", {
+            className={cn("text-11 text-primary", {
               "animate-pulse": isSearching,
             })}
           >
diff --git a/apps/web/core/components/power-k/ui/modal/search-results-map.tsx b/apps/web/core/components/power-k/ui/modal/search-results-map.tsx
index 74da1f75c..574a40d81 100644
--- a/apps/web/core/components/power-k/ui/modal/search-results-map.tsx
+++ b/apps/web/core/components/power-k/ui/modal/search-results-map.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { Briefcase, FileText, Layers, LayoutGrid } from "lucide-react";
 // plane imports
 import { ContrastIcon, DiceIcon } from "@plane/propel/icons";
@@ -27,7 +33,7 @@ export const POWER_K_SEARCH_RESULTS_GROUPS_MAP: Record<TPowerKSearchResultsKeys,
     icon: ContrastIcon,
     itemName: (cycle: IWorkspaceDefaultSearchResult) => (
       <p>
-        <span className="text-xs text-custom-text-300">{cycle.project__identifier}</span> {cycle.name}
+        <span className="text-11 text-tertiary">{cycle.project__identifier}</span> {cycle.name}
       </p>
     ),
     path: (cycle: IWorkspaceDefaultSearchResult) =>
@@ -42,7 +48,7 @@ export const POWER_K_SEARCH_RESULTS_GROUPS_MAP: Record<TPowerKSearchResultsKeys,
           issueTypeId={workItem.type_id}
           projectIdentifier={workItem.project__identifier}
           issueSequenceId={workItem.sequence_id}
-          textContainerClassName="text-xs"
+          size="xs"
         />{" "}
         {workItem.name}
       </div>
@@ -61,7 +67,7 @@ export const POWER_K_SEARCH_RESULTS_GROUPS_MAP: Record<TPowerKSearchResultsKeys,
     icon: Layers,
     itemName: (view: IWorkspaceDefaultSearchResult) => (
       <p>
-        <span className="text-xs text-custom-text-300">{view.project__identifier}</span> {view.name}
+        <span className="text-11 text-tertiary">{view.project__identifier}</span> {view.name}
       </p>
     ),
     path: (view: IWorkspaceDefaultSearchResult) =>
@@ -72,7 +78,7 @@ export const POWER_K_SEARCH_RESULTS_GROUPS_MAP: Record<TPowerKSearchResultsKeys,
     icon: DiceIcon,
     itemName: (module: IWorkspaceDefaultSearchResult) => (
       <p>
-        <span className="text-xs text-custom-text-300">{module.project__identifier}</span> {module.name}
+        <span className="text-11 text-tertiary">{module.project__identifier}</span> {module.name}
       </p>
     ),
     path: (module: IWorkspaceDefaultSearchResult) =>
@@ -83,7 +89,7 @@ export const POWER_K_SEARCH_RESULTS_GROUPS_MAP: Record<TPowerKSearchResultsKeys,
     icon: FileText,
     itemName: (page: IWorkspacePageSearchResult) => (
       <p>
-        <span className="text-xs text-custom-text-300">{page.project__identifiers?.[0]}</span> {page.name}
+        <span className="text-11 text-tertiary">{page.project__identifiers?.[0]}</span> {page.name}
       </p>
     ),
     path: (page: IWorkspacePageSearchResult, projectId: string | undefined) => {
diff --git a/apps/web/core/components/power-k/ui/modal/search-results.tsx b/apps/web/core/components/power-k/ui/modal/search-results.tsx
index efe942ed4..eaa5eb9b8 100644
--- a/apps/web/core/components/power-k/ui/modal/search-results.tsx
+++ b/apps/web/core/components/power-k/ui/modal/search-results.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { Command } from "cmdk";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
@@ -6,7 +12,6 @@ import type { IWorkspaceSearchResults } from "@plane/types";
 // hooks
 import { useAppRouter } from "@/hooks/use-app-router";
 // helpers
-import { openProjectAndScrollToSidebar } from "../../actions/helper";
 import { PowerKModalCommandItem } from "./command-item";
 import { POWER_K_SEARCH_RESULTS_GROUPS_MAP } from "./search-results-map";
 
diff --git a/apps/web/core/components/power-k/ui/modal/shortcuts-root.tsx b/apps/web/core/components/power-k/ui/modal/shortcuts-root.tsx
index b78b0895f..50b0e3050 100644
--- a/apps/web/core/components/power-k/ui/modal/shortcuts-root.tsx
+++ b/apps/web/core/components/power-k/ui/modal/shortcuts-root.tsx
@@ -1,8 +1,13 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useState, Fragment } from "react";
-import { Search } from "lucide-react";
 import { Dialog, Transition } from "@headlessui/react";
 // plane imports
-import { CloseIcon } from "@plane/propel/icons";
+import { CloseIcon, SearchIcon } from "@plane/propel/icons";
 import { Input } from "@plane/ui";
 // hooks
 import { usePowerK } from "@/hooks/store/use-power-k";
@@ -41,7 +46,7 @@ export function ShortcutsModal(props: Props) {
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
+          <div className="fixed inset-0 bg-backdrop transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-30 overflow-y-auto">
@@ -56,18 +61,15 @@ export function ShortcutsModal(props: Props) {
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
               <Dialog.Panel className="relative flex h-full items-center justify-center">
-                <div className="flex h-[61vh] w-full flex-col  space-y-4 overflow-hidden rounded-lg bg-custom-background-100 p-5 shadow-custom-shadow-md transition-all sm:w-[28rem]">
+                <div className="flex h-[61vh] w-full flex-col space-y-4 overflow-hidden rounded-lg bg-surface-1 p-5 shadow-raised-200 transition-all sm:w-[28rem]">
                   <Dialog.Title as="h3" className="flex justify-between">
-                    <span className="text-lg font-medium">Keyboard shortcuts</span>
+                    <span className="text-16 font-medium">Keyboard shortcuts</span>
                     <button type="button" onClick={handleClose}>
-                      <CloseIcon
-                        className="h-4 w-4 text-custom-text-200 hover:text-custom-text-100"
-                        aria-hidden="true"
-                      />
+                      <CloseIcon className="h-4 w-4 text-secondary hover:text-primary" aria-hidden="true" />
                     </button>
                   </Dialog.Title>
-                  <div className="flex w-full items-center rounded border-[0.5px] border-custom-border-200 bg-custom-background-90 px-2">
-                    <Search className="h-3.5 w-3.5 text-custom-text-200" />
+                  <div className="flex w-full items-center rounded-sm border-[0.5px] border-subtle bg-surface-2 px-2">
+                    <SearchIcon className="h-3.5 w-3.5 text-secondary" />
                     <Input
                       id="search"
                       name="search"
@@ -75,7 +77,7 @@ export function ShortcutsModal(props: Props) {
                       value={query}
                       onChange={(e) => setQuery(e.target.value)}
                       placeholder="Search for shortcuts"
-                      className="w-full border-none bg-transparent py-1 text-xs text-custom-text-200 outline-none"
+                      className="w-full border-none bg-transparent py-1 text-11 text-secondary outline-none"
                       autoFocus
                       tabIndex={1}
                     />
diff --git a/apps/web/core/components/power-k/ui/modal/wrapper.tsx b/apps/web/core/components/power-k/ui/modal/wrapper.tsx
index 8c4148dcb..0c2a0c9b1 100644
--- a/apps/web/core/components/power-k/ui/modal/wrapper.tsx
+++ b/apps/web/core/components/power-k/ui/modal/wrapper.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React, { useState, useEffect, useCallback } from "react";
 import { Command } from "cmdk";
 import { observer } from "mobx-react";
@@ -123,7 +129,7 @@ export const ProjectsAppPowerKModalWrapper = observer(function ProjectsAppPowerK
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
+          <div className="fixed inset-0 bg-backdrop transition-opacity" />
         </Transition.Child>
         {/* Modal Container */}
         <div className="fixed inset-0 z-30 overflow-y-auto">
@@ -137,7 +143,7 @@ export const ProjectsAppPowerKModalWrapper = observer(function ProjectsAppPowerK
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative flex w-full max-w-2xl transform flex-col items-center justify-center divide-y divide-custom-border-200 divide-opacity-10 rounded-lg bg-custom-background-100 shadow-custom-shadow-md transition-all">
+              <Dialog.Panel className="divide-opacity-10 relative flex w-full max-w-2xl transform flex-col items-center justify-center divide-y divide-subtle-1 rounded-lg bg-surface-1 shadow-raised-200 transition-all">
                 <Command
                   filter={(i18nValue: string, search: string) => {
                     if (i18nValue === "no-results") return 1;
diff --git a/apps/web/core/components/power-k/ui/pages/context-based/cycle/commands.ts b/apps/web/core/components/power-k/ui/pages/context-based/cycle/commands.ts
index bab95a2dc..26dce1655 100644
--- a/apps/web/core/components/power-k/ui/pages/context-based/cycle/commands.ts
+++ b/apps/web/core/components/power-k/ui/pages/context-based/cycle/commands.ts
@@ -1,9 +1,16 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useCallback } from "react";
 import { useParams } from "next/navigation";
-import { LinkIcon, Star, StarOff } from "lucide-react";
+import { Star, StarOff } from "lucide-react";
 // plane imports
 import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
+import { LinkIcon } from "@plane/propel/icons";
 import { setToast, TOAST_TYPE } from "@plane/propel/toast";
 import { copyTextToClipboard } from "@plane/utils";
 // components
diff --git a/apps/web/core/components/power-k/ui/pages/context-based/index.ts b/apps/web/core/components/power-k/ui/pages/context-based/index.ts
index 01709be4d..e0dd4dfa4 100644
--- a/apps/web/core/components/power-k/ui/pages/context-based/index.ts
+++ b/apps/web/core/components/power-k/ui/pages/context-based/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./root";
 
 // components
diff --git a/apps/web/core/components/power-k/ui/pages/context-based/module/commands.tsx b/apps/web/core/components/power-k/ui/pages/context-based/module/commands.tsx
index 757fa75af..891197be8 100644
--- a/apps/web/core/components/power-k/ui/pages/context-based/module/commands.tsx
+++ b/apps/web/core/components/power-k/ui/pages/context-based/module/commands.tsx
@@ -1,10 +1,16 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useCallback } from "react";
 import { useParams } from "next/navigation";
-import { LinkIcon, Star, StarOff, Users } from "lucide-react";
+import { Star, StarOff, Users } from "lucide-react";
 // plane imports
 import { EUserPermissionsLevel } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { ModuleStatusIcon } from "@plane/propel/icons";
+import { LinkIcon, ModuleStatusIcon } from "@plane/propel/icons";
 import { setToast, TOAST_TYPE } from "@plane/propel/toast";
 import type { IModule, TModuleStatus } from "@plane/types";
 import { EUserPermissions } from "@plane/types";
@@ -114,7 +120,7 @@ export const usePowerKModuleContextBasedActions = (): TPowerKCommandConfig[] =>
     {
       id: "change_module_status",
       i18n_title: "power_k.contextual_actions.module.change_status",
-      iconNode: <ModuleStatusIcon status="backlog" className="shrink-0 size-3.5" />,
+      iconNode: <ModuleStatusIcon status="backlog" className="size-3.5 shrink-0" />,
       group: "contextual",
       contextType: "module",
       type: "change-page",
diff --git a/apps/web/core/components/power-k/ui/pages/context-based/module/index.ts b/apps/web/core/components/power-k/ui/pages/context-based/module/index.ts
index 1efe34c51..d98033459 100644
--- a/apps/web/core/components/power-k/ui/pages/context-based/module/index.ts
+++ b/apps/web/core/components/power-k/ui/pages/context-based/module/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./root";
diff --git a/apps/web/core/components/power-k/ui/pages/context-based/module/root.tsx b/apps/web/core/components/power-k/ui/pages/context-based/module/root.tsx
index 8aefda0ca..86b7e7754 100644
--- a/apps/web/core/components/power-k/ui/pages/context-based/module/root.tsx
+++ b/apps/web/core/components/power-k/ui/pages/context-based/module/root.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // components
diff --git a/apps/web/core/components/power-k/ui/pages/context-based/module/status-menu.tsx b/apps/web/core/components/power-k/ui/pages/context-based/module/status-menu.tsx
index 063521751..38291cb6f 100644
--- a/apps/web/core/components/power-k/ui/pages/context-based/module/status-menu.tsx
+++ b/apps/web/core/components/power-k/ui/pages/context-based/module/status-menu.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { Command } from "cmdk";
 import { observer } from "mobx-react";
 // plane imports
@@ -23,7 +29,7 @@ export const PowerKModuleStatusMenu = observer(function PowerKModuleStatusMenu(p
       {MODULE_STATUS.map((status) => (
         <PowerKModalCommandItem
           key={status.value}
-          iconNode={<ModuleStatusIcon status={status.value} className="shrink-0 size-3.5" />}
+          iconNode={<ModuleStatusIcon status={status.value} className="size-3.5 shrink-0" />}
           label={t(status.i18n_label)}
           isSelected={status.value === value}
           onSelect={() => handleSelect(status.value)}
diff --git a/apps/web/core/components/power-k/ui/pages/context-based/page/commands.ts b/apps/web/core/components/power-k/ui/pages/context-based/page/commands.ts
index c0f48ca1c..162ab5406 100644
--- a/apps/web/core/components/power-k/ui/pages/context-based/page/commands.ts
+++ b/apps/web/core/components/power-k/ui/pages/context-based/page/commands.ts
@@ -1,18 +1,15 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useCallback } from "react";
 import { useParams } from "next/navigation";
-import {
-  ArchiveIcon,
-  ArchiveRestoreIcon,
-  Globe2,
-  LinkIcon,
-  Lock,
-  LockKeyhole,
-  LockKeyholeOpen,
-  Star,
-  StarOff,
-} from "lucide-react";
-// plane imports
+import { ArchiveIcon, ArchiveRestoreIcon, LockKeyhole, LockKeyholeOpen, Star, StarOff } from "lucide-react";
 import { useTranslation } from "@plane/i18n";
+// plane imports
+import { LinkIcon, GlobeIcon, LockIcon } from "@plane/propel/icons";
 import { setToast, TOAST_TYPE } from "@plane/propel/toast";
 import { EPageAccess } from "@plane/types";
 import { copyTextToClipboard } from "@plane/utils";
@@ -110,7 +107,7 @@ export const usePowerKPageContextBasedActions = (): TPowerKCommandConfig[] => {
         access === EPageAccess.PUBLIC
           ? "power_k.contextual_actions.page.make_private"
           : "power_k.contextual_actions.page.make_public",
-      icon: access === EPageAccess.PUBLIC ? Lock : Globe2,
+      icon: access === EPageAccess.PUBLIC ? LockIcon : GlobeIcon,
       group: "contextual",
       contextType: "page",
       type: "action",
diff --git a/apps/web/core/components/power-k/ui/pages/context-based/root.tsx b/apps/web/core/components/power-k/ui/pages/context-based/root.tsx
index 0e264de1e..a87344c98 100644
--- a/apps/web/core/components/power-k/ui/pages/context-based/root.tsx
+++ b/apps/web/core/components/power-k/ui/pages/context-based/root.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // components
 import type { TPowerKCommandConfig, TPowerKContextType, TPowerKPageType } from "@/components/power-k/core/types";
 // plane web imports
diff --git a/apps/web/core/components/power-k/ui/pages/context-based/work-item/commands.ts b/apps/web/core/components/power-k/ui/pages/context-based/work-item/commands.ts
index 875ba37bc..888260c9a 100644
--- a/apps/web/core/components/power-k/ui/pages/context-based/work-item/commands.ts
+++ b/apps/web/core/components/power-k/ui/pages/context-based/work-item/commands.ts
@@ -1,13 +1,17 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useCallback } from "react";
 import { useParams } from "next/navigation";
 import {
   Bell,
   BellOff,
-  LinkIcon,
   Signal,
   TagIcon,
   TicketCheck,
-  Trash2,
   Triangle,
   Type,
   UserMinus2,
@@ -17,7 +21,7 @@ import {
 // plane imports
 import { EUserPermissionsLevel } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { ContrastIcon, DiceIcon, DoubleCircleIcon } from "@plane/propel/icons";
+import { LinkIcon, TrashIcon, ContrastIcon, DiceIcon, DoubleCircleIcon } from "@plane/propel/icons";
 import { setToast, TOAST_TYPE } from "@plane/propel/toast";
 import type { ICycle, IIssueLabel, IModule, TIssue, TIssuePriorities } from "@plane/types";
 import { EIssueServiceType, EUserPermissions } from "@plane/types";
@@ -400,7 +404,7 @@ export const usePowerKWorkItemContextBasedCommands = (): TPowerKCommandConfig[]
     {
       id: "delete_work_item",
       i18n_title: "power_k.contextual_actions.work_item.delete",
-      icon: Trash2,
+      icon: TrashIcon,
       group: "contextual",
       contextType: "work-item",
       type: "action",
diff --git a/apps/web/core/components/power-k/ui/pages/context-based/work-item/cycles-menu.tsx b/apps/web/core/components/power-k/ui/pages/context-based/work-item/cycles-menu.tsx
index 1fbc7befe..a43374b1f 100644
--- a/apps/web/core/components/power-k/ui/pages/context-based/work-item/cycles-menu.tsx
+++ b/apps/web/core/components/power-k/ui/pages/context-based/work-item/cycles-menu.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 // plane types
 import type { ICycle, TIssue } from "@plane/types";
diff --git a/apps/web/core/components/power-k/ui/pages/context-based/work-item/estimates-menu.tsx b/apps/web/core/components/power-k/ui/pages/context-based/work-item/estimates-menu.tsx
index 30b7f4ac4..fa9cd018d 100644
--- a/apps/web/core/components/power-k/ui/pages/context-based/work-item/estimates-menu.tsx
+++ b/apps/web/core/components/power-k/ui/pages/context-based/work-item/estimates-menu.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { Command } from "cmdk";
 import { observer } from "mobx-react";
 import { Triangle } from "lucide-react";
diff --git a/apps/web/core/components/power-k/ui/pages/context-based/work-item/index.ts b/apps/web/core/components/power-k/ui/pages/context-based/work-item/index.ts
index 1efe34c51..d98033459 100644
--- a/apps/web/core/components/power-k/ui/pages/context-based/work-item/index.ts
+++ b/apps/web/core/components/power-k/ui/pages/context-based/work-item/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./root";
diff --git a/apps/web/core/components/power-k/ui/pages/context-based/work-item/labels-menu.tsx b/apps/web/core/components/power-k/ui/pages/context-based/work-item/labels-menu.tsx
index 03d974506..42a5f61f5 100644
--- a/apps/web/core/components/power-k/ui/pages/context-based/work-item/labels-menu.tsx
+++ b/apps/web/core/components/power-k/ui/pages/context-based/work-item/labels-menu.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 // plane types
 import type { IIssueLabel, TIssue } from "@plane/types";
diff --git a/apps/web/core/components/power-k/ui/pages/context-based/work-item/modules-menu.tsx b/apps/web/core/components/power-k/ui/pages/context-based/work-item/modules-menu.tsx
index bda75dc73..d780f8c5a 100644
--- a/apps/web/core/components/power-k/ui/pages/context-based/work-item/modules-menu.tsx
+++ b/apps/web/core/components/power-k/ui/pages/context-based/work-item/modules-menu.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 // plane types
 import type { IModule, TIssue } from "@plane/types";
diff --git a/apps/web/core/components/power-k/ui/pages/context-based/work-item/priorities-menu.tsx b/apps/web/core/components/power-k/ui/pages/context-based/work-item/priorities-menu.tsx
index 881604447..1ea30ebd1 100644
--- a/apps/web/core/components/power-k/ui/pages/context-based/work-item/priorities-menu.tsx
+++ b/apps/web/core/components/power-k/ui/pages/context-based/work-item/priorities-menu.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { Command } from "cmdk";
 import { observer } from "mobx-react";
 // plane imports
diff --git a/apps/web/core/components/power-k/ui/pages/context-based/work-item/root.tsx b/apps/web/core/components/power-k/ui/pages/context-based/work-item/root.tsx
index efe2f978d..70dc4392c 100644
--- a/apps/web/core/components/power-k/ui/pages/context-based/work-item/root.tsx
+++ b/apps/web/core/components/power-k/ui/pages/context-based/work-item/root.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // plane imports
diff --git a/apps/web/core/components/power-k/ui/pages/context-based/work-item/states-menu.tsx b/apps/web/core/components/power-k/ui/pages/context-based/work-item/states-menu.tsx
index 6afc459f0..96f153830 100644
--- a/apps/web/core/components/power-k/ui/pages/context-based/work-item/states-menu.tsx
+++ b/apps/web/core/components/power-k/ui/pages/context-based/work-item/states-menu.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { Command } from "cmdk";
 import { observer } from "mobx-react";
 // plane types
diff --git a/apps/web/core/components/power-k/ui/pages/default.tsx b/apps/web/core/components/power-k/ui/pages/default.tsx
index 72e905c05..6d3f6ddf7 100644
--- a/apps/web/core/components/power-k/ui/pages/default.tsx
+++ b/apps/web/core/components/power-k/ui/pages/default.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 // hooks
 import { usePowerK } from "@/hooks/store/use-power-k";
diff --git a/apps/web/core/components/power-k/ui/pages/index.ts b/apps/web/core/components/power-k/ui/pages/index.ts
index 1efe34c51..d98033459 100644
--- a/apps/web/core/components/power-k/ui/pages/index.ts
+++ b/apps/web/core/components/power-k/ui/pages/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./root";
diff --git a/apps/web/core/components/power-k/ui/pages/open-entity/project-cycles-menu.tsx b/apps/web/core/components/power-k/ui/pages/open-entity/project-cycles-menu.tsx
index 448aa8fbe..0b2b7fdb7 100644
--- a/apps/web/core/components/power-k/ui/pages/open-entity/project-cycles-menu.tsx
+++ b/apps/web/core/components/power-k/ui/pages/open-entity/project-cycles-menu.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 // plane types
 import type { ICycle } from "@plane/types";
diff --git a/apps/web/core/components/power-k/ui/pages/open-entity/project-modules-menu.tsx b/apps/web/core/components/power-k/ui/pages/open-entity/project-modules-menu.tsx
index a17501460..b359501d5 100644
--- a/apps/web/core/components/power-k/ui/pages/open-entity/project-modules-menu.tsx
+++ b/apps/web/core/components/power-k/ui/pages/open-entity/project-modules-menu.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 // plane types
 import type { IModule } from "@plane/types";
diff --git a/apps/web/core/components/power-k/ui/pages/open-entity/project-settings-menu.tsx b/apps/web/core/components/power-k/ui/pages/open-entity/project-settings-menu.tsx
index 109bb67ef..5a1be462b 100644
--- a/apps/web/core/components/power-k/ui/pages/open-entity/project-settings-menu.tsx
+++ b/apps/web/core/components/power-k/ui/pages/open-entity/project-settings-menu.tsx
@@ -1,13 +1,19 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
-// plane types
-import { EUserPermissionsLevel } from "@plane/constants";
-// components
+// plane imports
+import { EUserPermissionsLevel, PROJECT_SETTINGS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
+// components
 import type { TPowerKContext } from "@/components/power-k/core/types";
 import { PowerKSettingsMenu } from "@/components/power-k/menus/settings";
+import { PROJECT_SETTINGS_ICONS } from "@/components/settings/project/sidebar/item-icon";
 // hooks
 import { useUserPermissions } from "@/hooks/store/user";
-import { PROJECT_SETTINGS } from "@/plane-web/constants/project";
 
 type Props = {
   context: TPowerKContext;
@@ -35,7 +41,7 @@ export const PowerKOpenProjectSettingsMenu = observer(function PowerKOpenProject
   const settingsListWithIcons = settingsList.map((setting) => ({
     ...setting,
     label: t(setting.i18n_label),
-    icon: setting.Icon,
+    icon: PROJECT_SETTINGS_ICONS[setting.key],
   }));
 
   return <PowerKSettingsMenu settings={settingsListWithIcons} onSelect={(setting) => handleSelect(setting.href)} />;
diff --git a/apps/web/core/components/power-k/ui/pages/open-entity/project-views-menu.tsx b/apps/web/core/components/power-k/ui/pages/open-entity/project-views-menu.tsx
index 6d59efa94..16a04530f 100644
--- a/apps/web/core/components/power-k/ui/pages/open-entity/project-views-menu.tsx
+++ b/apps/web/core/components/power-k/ui/pages/open-entity/project-views-menu.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 // plane types
 import type { IProjectView } from "@plane/types";
diff --git a/apps/web/core/components/power-k/ui/pages/open-entity/projects-menu.tsx b/apps/web/core/components/power-k/ui/pages/open-entity/projects-menu.tsx
index 2c3913ffe..a1d48b5d9 100644
--- a/apps/web/core/components/power-k/ui/pages/open-entity/projects-menu.tsx
+++ b/apps/web/core/components/power-k/ui/pages/open-entity/projects-menu.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 // plane types
 import type { IPartialProject } from "@plane/types";
diff --git a/apps/web/core/components/power-k/ui/pages/open-entity/root.tsx b/apps/web/core/components/power-k/ui/pages/open-entity/root.tsx
index 23967d7c8..c6de0cc53 100644
--- a/apps/web/core/components/power-k/ui/pages/open-entity/root.tsx
+++ b/apps/web/core/components/power-k/ui/pages/open-entity/root.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // local imports
 import { PowerKOpenProjectCyclesMenu } from "./project-cycles-menu";
 import { PowerKOpenProjectModulesMenu } from "./project-modules-menu";
diff --git a/apps/web/core/components/power-k/ui/pages/open-entity/shared.ts b/apps/web/core/components/power-k/ui/pages/open-entity/shared.ts
index 93fb40614..c399a6cc3 100644
--- a/apps/web/core/components/power-k/ui/pages/open-entity/shared.ts
+++ b/apps/web/core/components/power-k/ui/pages/open-entity/shared.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // local imports
 import type { TPowerKContext, TPowerKPageType } from "@/components/power-k/core/types";
 
diff --git a/apps/web/core/components/power-k/ui/pages/open-entity/workspace-settings-menu.tsx b/apps/web/core/components/power-k/ui/pages/open-entity/workspace-settings-menu.tsx
index 8fd3a5038..7dc8805b9 100644
--- a/apps/web/core/components/power-k/ui/pages/open-entity/workspace-settings-menu.tsx
+++ b/apps/web/core/components/power-k/ui/pages/open-entity/workspace-settings-menu.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 // plane types
 import { EUserPermissionsLevel, WORKSPACE_SETTINGS } from "@plane/constants";
@@ -5,10 +11,9 @@ import { EUserPermissionsLevel, WORKSPACE_SETTINGS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import type { TPowerKContext } from "@/components/power-k/core/types";
 import { PowerKSettingsMenu } from "@/components/power-k/menus/settings";
+import { WORKSPACE_SETTINGS_ICONS } from "@/components/settings/workspace/sidebar/item-icon";
 // hooks
 import { useUserPermissions } from "@/hooks/store/user";
-import { shouldRenderSettingLink } from "@/plane-web/helpers/workspace.helper";
-import { WORKSPACE_SETTINGS_ICONS } from "app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/sidebar";
 
 type Props = {
   context: TPowerKContext;
@@ -25,13 +30,12 @@ export const PowerKOpenWorkspaceSettingsMenu = observer(function PowerKOpenWorks
   const settingsList = Object.values(WORKSPACE_SETTINGS).filter(
     (setting) =>
       context.params.workspaceSlug &&
-      shouldRenderSettingLink(context.params.workspaceSlug?.toString(), setting.key) &&
       allowPermissions(setting.access, EUserPermissionsLevel.WORKSPACE, context.params.workspaceSlug?.toString())
   );
   const settingsListWithIcons = settingsList.map((setting) => ({
     ...setting,
     label: t(setting.i18n_label),
-    icon: WORKSPACE_SETTINGS_ICONS[setting.key as keyof typeof WORKSPACE_SETTINGS_ICONS],
+    icon: WORKSPACE_SETTINGS_ICONS[setting.key],
   }));
 
   return <PowerKSettingsMenu settings={settingsListWithIcons} onSelect={(setting) => handleSelect(setting.href)} />;
diff --git a/apps/web/core/components/power-k/ui/pages/open-entity/workspaces-menu.tsx b/apps/web/core/components/power-k/ui/pages/open-entity/workspaces-menu.tsx
index 755a78376..70df60e4b 100644
--- a/apps/web/core/components/power-k/ui/pages/open-entity/workspaces-menu.tsx
+++ b/apps/web/core/components/power-k/ui/pages/open-entity/workspaces-menu.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 // plane types
 import type { IWorkspace } from "@plane/types";
diff --git a/apps/web/core/components/power-k/ui/pages/preferences/index.ts b/apps/web/core/components/power-k/ui/pages/preferences/index.ts
index 1efe34c51..d98033459 100644
--- a/apps/web/core/components/power-k/ui/pages/preferences/index.ts
+++ b/apps/web/core/components/power-k/ui/pages/preferences/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./root";
diff --git a/apps/web/core/components/power-k/ui/pages/preferences/languages-menu.tsx b/apps/web/core/components/power-k/ui/pages/preferences/languages-menu.tsx
index 63039ae89..1a2632077 100644
--- a/apps/web/core/components/power-k/ui/pages/preferences/languages-menu.tsx
+++ b/apps/web/core/components/power-k/ui/pages/preferences/languages-menu.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 import { Command } from "cmdk";
 import { observer } from "mobx-react";
diff --git a/apps/web/core/components/power-k/ui/pages/preferences/root.tsx b/apps/web/core/components/power-k/ui/pages/preferences/root.tsx
index a40ca22a5..32d21df4b 100644
--- a/apps/web/core/components/power-k/ui/pages/preferences/root.tsx
+++ b/apps/web/core/components/power-k/ui/pages/preferences/root.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 import { observer } from "mobx-react";
 // components
diff --git a/apps/web/core/components/power-k/ui/pages/preferences/start-of-week-menu.tsx b/apps/web/core/components/power-k/ui/pages/preferences/start-of-week-menu.tsx
index d16dcb75e..2d9c8b699 100644
--- a/apps/web/core/components/power-k/ui/pages/preferences/start-of-week-menu.tsx
+++ b/apps/web/core/components/power-k/ui/pages/preferences/start-of-week-menu.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 import { Command } from "cmdk";
 // plane imports
diff --git a/apps/web/core/components/power-k/ui/pages/preferences/themes-menu.tsx b/apps/web/core/components/power-k/ui/pages/preferences/themes-menu.tsx
index ca64085b7..6018fe256 100644
--- a/apps/web/core/components/power-k/ui/pages/preferences/themes-menu.tsx
+++ b/apps/web/core/components/power-k/ui/pages/preferences/themes-menu.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React, { useEffect, useState } from "react";
 import { Command } from "cmdk";
 import { observer } from "mobx-react";
diff --git a/apps/web/core/components/power-k/ui/pages/preferences/timezone-menu.tsx b/apps/web/core/components/power-k/ui/pages/preferences/timezone-menu.tsx
index 088ca359a..3d309bd4d 100644
--- a/apps/web/core/components/power-k/ui/pages/preferences/timezone-menu.tsx
+++ b/apps/web/core/components/power-k/ui/pages/preferences/timezone-menu.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 import { Command } from "cmdk";
 import { observer } from "mobx-react";
diff --git a/apps/web/core/components/power-k/ui/pages/root.tsx b/apps/web/core/components/power-k/ui/pages/root.tsx
index 8286b32d2..21524bea4 100644
--- a/apps/web/core/components/power-k/ui/pages/root.tsx
+++ b/apps/web/core/components/power-k/ui/pages/root.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 import { observer } from "mobx-react";
 // local imports
diff --git a/apps/web/core/components/power-k/ui/pages/work-item-selection-page.tsx b/apps/web/core/components/power-k/ui/pages/work-item-selection-page.tsx
index 47b71e0ac..543c26236 100644
--- a/apps/web/core/components/power-k/ui/pages/work-item-selection-page.tsx
+++ b/apps/web/core/components/power-k/ui/pages/work-item-selection-page.tsx
@@ -1,4 +1,10 @@
-import React, { useState, useEffect } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState, useEffect } from "react";
 // plane imports
 // import { useTranslation } from "@plane/i18n";
 import type { TIssueEntityData, TIssueSearchResponse, TActivityEntityData } from "@plane/types";
@@ -12,7 +18,7 @@ import type { TIssueEntityData, TIssueSearchResponse, TActivityEntityData } from
 // import { useAppRouter } from "@/hooks/use-app-router";
 // plane web imports
 // import { IssueIdentifier } from "@/plane-web/components/issues/issue-details/issue-identifier";
-import { WorkspaceService } from "@/plane-web/services";
+import { WorkspaceService } from "@/services/workspace.service";
 
 const workspaceService = new WorkspaceService();
 
@@ -89,7 +95,7 @@ export function WorkItemSelectionPage(props: Props) {
                     projectId={issue.project_id}
                     projectIdentifier={issue.project_identifier}
                     issueSequenceId={issue.sequence_id}
-                    textContainerClassName="text-sm text-custom-text-200"
+                    textContainerClassName="text-13 text-secondary"
                   />
                 )}
                 <span className="truncate">{issue.name}</span>
@@ -112,7 +118,7 @@ export function WorkItemSelectionPage(props: Props) {
             emptyText="Search for issue id or issue title"
           />
         ) : (
-          <div className="px-3 py-8 text-center text-sm text-custom-text-300">Search for issue id or issue title</div>
+          <div className="px-3 py-8 text-center text-13 text-tertiary">Search for issue id or issue title</div>
         )
       ) : issueResults.length > 0 ? (
         <CommandPaletteEntityList
@@ -127,7 +133,7 @@ export function WorkItemSelectionPage(props: Props) {
                   projectId={issue.project_id}
                   projectIdentifier={issue.project__identifier}
                   issueSequenceId={issue.sequence_id}
-                  textContainerClassName="text-sm text-custom-text-200"
+                  textContainerClassName="text-13 text-secondary"
                 />
               )}
               <span className="truncate">{issue.name}</span>
diff --git a/apps/web/core/components/power-k/ui/renderer/command.tsx b/apps/web/core/components/power-k/ui/renderer/command.tsx
index 4422a3161..408a45470 100644
--- a/apps/web/core/components/power-k/ui/renderer/command.tsx
+++ b/apps/web/core/components/power-k/ui/renderer/command.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 import { Command } from "cmdk";
 // plane imports
diff --git a/apps/web/core/components/power-k/ui/renderer/shared.ts b/apps/web/core/components/power-k/ui/renderer/shared.ts
index 782752c43..bf65ab84d 100644
--- a/apps/web/core/components/power-k/ui/renderer/shared.ts
+++ b/apps/web/core/components/power-k/ui/renderer/shared.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { TPowerKCommandGroup } from "../../core/types";
 
 export const POWER_K_GROUP_PRIORITY: Record<TPowerKCommandGroup, number> = {
diff --git a/apps/web/core/components/power-k/ui/renderer/shortcut.tsx b/apps/web/core/components/power-k/ui/renderer/shortcut.tsx
index 7a482b055..c2a9f04cf 100644
--- a/apps/web/core/components/power-k/ui/renderer/shortcut.tsx
+++ b/apps/web/core/components/power-k/ui/renderer/shortcut.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // plane imports
 import { useTranslation } from "@plane/i18n";
 import { substringMatch } from "@plane/utils";
@@ -76,12 +82,12 @@ export function ShortcutRenderer(props: Props) {
       {!isShortcutsEmpty ? (
         groupedCommands.map((group) => (
           <div key={group.key}>
-            <h5 className="text-left text-sm font-medium pt-1 pb-2">{group.title}</h5>
+            <h5 className="pt-1 pb-2 text-left text-13 font-medium">{group.title}</h5>
             <div className="space-y-3 px-1">
               {group.commands.map((command) => (
                 <div key={command.id} className="mt-1">
                   <div className="flex items-center justify-between">
-                    <h4 className="text-xs text-custom-text-200 text-left">{t(command.i18n_title)}</h4>
+                    <h4 className="text-left text-11 text-secondary">{t(command.i18n_title)}</h4>
                     <div className="flex items-center gap-x-1.5">
                       {command.keySequence && <KeySequenceBadge sequence={command.keySequence} />}
                       {(command.shortcut || command.modifierShortcut) && (
@@ -95,7 +101,7 @@ export function ShortcutRenderer(props: Props) {
           </div>
         ))
       ) : (
-        <p className="flex justify-center text-center text-sm text-custom-text-200">
+        <p className="flex justify-center text-center text-13 text-secondary">
           No shortcuts found for{" "}
           <span className="font-semibold italic">
             {`"`}
diff --git a/apps/web/core/components/power-k/utils/navigation.ts b/apps/web/core/components/power-k/utils/navigation.ts
index 2c88823e3..f5b332391 100644
--- a/apps/web/core/components/power-k/utils/navigation.ts
+++ b/apps/web/core/components/power-k/utils/navigation.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // plane imports
 import { joinUrlPath } from "@plane/utils";
 // local imports
diff --git a/apps/web/core/components/preferences/list.tsx b/apps/web/core/components/preferences/list.tsx
deleted file mode 100644
index 291eebf01..000000000
--- a/apps/web/core/components/preferences/list.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { PREFERENCE_OPTIONS } from "@plane/constants";
-import { PREFERENCE_COMPONENTS } from "@/plane-web/components/preferences/config";
-
-export function PreferencesList() {
-  return (
-    <div className="py-6 space-y-6">
-      {PREFERENCE_OPTIONS.map((option) => {
-        const Component = PREFERENCE_COMPONENTS[option.id as keyof typeof PREFERENCE_COMPONENTS];
-        return <Component key={option.id} option={option} />;
-      })}
-    </div>
-  );
-}
diff --git a/apps/web/core/components/preferences/section.tsx b/apps/web/core/components/preferences/section.tsx
deleted file mode 100644
index b82f7da46..000000000
--- a/apps/web/core/components/preferences/section.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-interface SettingsSectionProps {
-  title: string;
-  description: string;
-  control: React.ReactNode;
-}
-
-export function PreferencesSection({ title, description, control }: SettingsSectionProps) {
-  return (
-    <div className="flex w-full justify-between gap-4 sm:gap-16">
-      <div className="col-span-12 sm:col-span-6">
-        <h4 className="text-base font-medium text-custom-text-100">{title}</h4>
-        <p className="text-sm text-custom-text-200">{description}</p>
-      </div>
-      <div className="col-span-12 sm:col-span-6 my-auto">{control}</div>
-    </div>
-  );
-}
diff --git a/apps/web/core/components/profile/activity/activity-list.tsx b/apps/web/core/components/profile/activity/activity-list.tsx
index b25c09d3c..064270bcc 100644
--- a/apps/web/core/components/profile/activity/activity-list.tsx
+++ b/apps/web/core/components/profile/activity/activity-list.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import Link from "next/link";
 import { useParams } from "next/navigation";
@@ -39,33 +45,33 @@ export const ActivityList = observer(function ActivityList(props: Props) {
                   <div className="relative flex items-start space-x-3">
                     <div className="relative px-1">
                       {activityItem.field ? (
-                        activityItem.new_value === "restore" && <History className="h-3.5 w-3.5 text-custom-text-200" />
+                        activityItem.new_value === "restore" && <History className="h-3.5 w-3.5 text-secondary" />
                       ) : activityItem.actor_detail.avatar_url && activityItem.actor_detail.avatar_url !== "" ? (
                         <img
                           src={getFileURL(activityItem.actor_detail.avatar_url)}
                           alt={activityItem.actor_detail.display_name}
                           height={30}
                           width={30}
-                          className="grid h-7 w-7 place-items-center rounded-full border-2 border-white bg-gray-500 text-white"
+                          className="bg-gray-500 grid h-7 w-7 place-items-center rounded-full border-2 border-white text-on-color"
                         />
                       ) : (
-                        <div className="grid h-7 w-7 place-items-center rounded-full border-2 border-white bg-gray-500 capitalize text-white">
+                        <div className="bg-gray-500 grid h-7 w-7 place-items-center rounded-full border-2 border-white text-on-color capitalize">
                           {activityItem.actor_detail.display_name?.[0]}
                         </div>
                       )}
 
-                      <span className="ring-6 flex h-6 w-6 items-center justify-center rounded-full bg-custom-background-80 text-custom-text-200 ring-white">
-                        <MessageSquare className="h-6 w-6 !text-2xl text-custom-text-200" aria-hidden="true" />
+                      <span className="flex h-6 w-6 items-center justify-center rounded-full bg-layer-1 text-secondary ring-6 ring-white">
+                        <MessageSquare className="h-6 w-6 !text-20 text-secondary" aria-hidden="true" />
                       </span>
                     </div>
                     <div className="min-w-0 flex-1">
                       <div>
-                        <div className="text-xs">
+                        <div className="text-11">
                           {activityItem.actor_detail.is_bot
                             ? activityItem.actor_detail.first_name + " Bot"
                             : activityItem.actor_detail.display_name}
                         </div>
-                        <p className="mt-0.5 text-xs text-custom-text-200">
+                        <p className="mt-0.5 text-11 text-secondary">
                           Commented {calculateTimeAgo(activityItem.created_at)}
                         </p>
                       </div>
@@ -78,7 +84,7 @@ export const ActivityList = observer(function ActivityList(props: Props) {
                               ? (activityItem.new_value?.toString() as string)
                               : (activityItem.old_value?.toString() as string)
                           }
-                          containerClassName="text-xs bg-custom-background-100"
+                          containerClassName="text-11 bg-surface-1"
                           workspaceId={workspaceId}
                           workspaceSlug={workspaceSlug?.toString() ?? ""}
                           projectId={activityItem.project}
@@ -109,12 +115,12 @@ export const ActivityList = observer(function ActivityList(props: Props) {
                     <div className="relative flex items-start space-x-2">
                       <>
                         <div>
-                          <div className="relative px-1.5 mt-4">
+                          <div className="relative mt-4 px-1.5">
                             <div className="mt-1.5">
                               <div className="flex h-6 w-6 items-center justify-center">
                                 {activityItem.field ? (
                                   activityItem.new_value === "restore" ? (
-                                    <History className="h-5 w-5 text-custom-text-200" />
+                                    <History className="h-5 w-5 text-secondary" />
                                   ) : (
                                     <ActivityIcon activity={activityItem} />
                                   )
@@ -128,7 +134,7 @@ export const ActivityList = observer(function ActivityList(props: Props) {
                                     className="h-full w-full rounded-full object-cover"
                                   />
                                 ) : (
-                                  <div className="grid h-6 w-6 place-items-center rounded-full border-2 border-white bg-gray-700 text-xs capitalize text-white">
+                                  <div className="bg-gray-700 grid h-6 w-6 place-items-center rounded-full border-2 border-white text-11 text-on-color capitalize">
                                     {activityItem.actor_detail.display_name?.[0]}
                                   </div>
                                 )}
@@ -136,8 +142,8 @@ export const ActivityList = observer(function ActivityList(props: Props) {
                             </div>
                           </div>
                         </div>
-                        <div className="min-w-0 flex-1 border-b border-custom-border-100 py-4">
-                          <div className="break-words text-sm text-custom-text-200">
+                        <div className="min-w-0 flex-1 border-b border-subtle py-4">
+                          <div className="text-13 break-words text-secondary">
                             {activityItem.field === "archived_at" && activityItem.new_value !== "restore" ? (
                               <span className="text-gray font-medium">Plane</span>
                             ) : activityItem.actor_detail.is_bot ? (
diff --git a/apps/web/core/components/profile/activity/download-button.tsx b/apps/web/core/components/profile/activity/download-button.tsx
index 9eb5ccd83..d162dbd24 100644
--- a/apps/web/core/components/profile/activity/download-button.tsx
+++ b/apps/web/core/components/profile/activity/download-button.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useState } from "react";
 import { useParams } from "next/navigation";
 // services
diff --git a/apps/web/core/components/profile/activity/profile-activity-list.tsx b/apps/web/core/components/profile/activity/profile-activity-list.tsx
index 5b378e994..8684f5482 100644
--- a/apps/web/core/components/profile/activity/profile-activity-list.tsx
+++ b/apps/web/core/components/profile/activity/profile-activity-list.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useEffect } from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
@@ -63,33 +69,33 @@ export const ProfileActivityListPage = observer(function ProfileActivityListPage
                   <div className="relative flex items-start space-x-3">
                     <div className="relative px-1">
                       {activityItem.field ? (
-                        activityItem.new_value === "restore" && <History className="h-3.5 w-3.5 text-custom-text-200" />
+                        activityItem.new_value === "restore" && <History className="h-3.5 w-3.5 text-secondary" />
                       ) : activityItem.actor_detail.avatar_url && activityItem.actor_detail.avatar_url !== "" ? (
                         <img
                           src={getFileURL(activityItem.actor_detail.avatar_url)}
                           alt={activityItem.actor_detail.display_name}
                           height={30}
                           width={30}
-                          className="grid h-7 w-7 place-items-center rounded-full border-2 border-white bg-gray-500 text-white"
+                          className="grid h-7 w-7 place-items-center rounded-full border-2 border-subtle-1 bg-layer-3"
                         />
                       ) : (
-                        <div className="grid h-7 w-7 place-items-center rounded-full border-2 border-white bg-gray-500 capitalize text-white">
+                        <div className="grid h-7 w-7 place-items-center rounded-full border-2 border-subtle-1 bg-layer-3 capitalize">
                           {activityItem.actor_detail.display_name?.[0]}
                         </div>
                       )}
 
-                      <span className="ring-6 flex h-6 w-6 p-2 items-center justify-center rounded-full bg-custom-background-80 text-custom-text-200 ring-white">
-                        <MessageSquare className="!text-2xl text-custom-text-200" aria-hidden="true" />
+                      <span className="flex h-6 w-6 items-center justify-center rounded-full bg-layer-3 p-2 text-secondary">
+                        <MessageSquare className="!text-20 text-secondary" aria-hidden="true" />
                       </span>
                     </div>
                     <div className="min-w-0 flex-1">
                       <div>
-                        <div className="text-xs">
+                        <div className="text-11">
                           {activityItem.actor_detail.is_bot
                             ? activityItem.actor_detail.first_name + " Bot"
                             : activityItem.actor_detail.display_name}
                         </div>
-                        <p className="mt-0.5 text-xs text-custom-text-200">
+                        <p className="mt-0.5 text-11 text-secondary">
                           Commented {calculateTimeAgo(activityItem.created_at)}
                         </p>
                       </div>
@@ -100,7 +106,7 @@ export const ProfileActivityListPage = observer(function ProfileActivityListPage
                           initialValue={
                             activityItem?.new_value !== "" ? activityItem.new_value : activityItem.old_value
                           }
-                          containerClassName="text-xs bg-custom-background-100"
+                          containerClassName="text-11 bg-surface-1"
                           workspaceId={activityItem?.workspace_detail?.id?.toString() ?? ""}
                           workspaceSlug={activityItem?.workspace_detail?.slug?.toString() ?? ""}
                           projectId={activityItem.project ?? ""}
@@ -120,12 +126,12 @@ export const ProfileActivityListPage = observer(function ProfileActivityListPage
                     <div className="relative flex items-start space-x-2">
                       <>
                         <div>
-                          <div className="relative px-1.5 mt-4">
+                          <div className="relative mt-4 px-1.5">
                             <div className="mt-1.5">
-                              <div className="flex h-6 w-6 items-center justify-center">
+                              <div className="flex h-6 w-6 items-center justify-center rounded-lg border border-subtle shadow-raised-100">
                                 {activityItem.field ? (
                                   activityItem.new_value === "restore" ? (
-                                    <History className="h-5 w-5 text-custom-text-200" />
+                                    <History className="h-5 w-5 text-secondary" />
                                   ) : (
                                     <ActivityIcon activity={activityItem} />
                                   )
@@ -139,7 +145,7 @@ export const ProfileActivityListPage = observer(function ProfileActivityListPage
                                     className="h-full w-full rounded-full object-cover"
                                   />
                                 ) : (
-                                  <div className="grid h-6 w-6 place-items-center rounded-full border-2 border-white bg-gray-700 text-xs capitalize text-white">
+                                  <div className="grid h-6 w-6 place-items-center rounded-full border-2 border-subtle-1 bg-layer-3 text-11 capitalize">
                                     {activityItem.actor_detail.display_name?.[0]}
                                   </div>
                                 )}
@@ -147,8 +153,8 @@ export const ProfileActivityListPage = observer(function ProfileActivityListPage
                             </div>
                           </div>
                         </div>
-                        <div className="min-w-0 flex-1 border-b border-custom-border-100 py-4">
-                          <div className="break-words text-sm text-custom-text-200">
+                        <div className="min-w-0 flex-1 border-b border-subtle py-4">
+                          <div className="text-caption-md-regular break-words text-secondary">
                             {activityItem.field === "archived_at" && activityItem.new_value !== "restore" ? (
                               <span className="text-gray font-medium">Plane</span>
                             ) : activityItem.actor_detail.is_bot ? (
diff --git a/apps/web/core/components/profile/activity/workspace-activity-list.tsx b/apps/web/core/components/profile/activity/workspace-activity-list.tsx
index 1f9e140d3..c1e0a32d9 100644
--- a/apps/web/core/components/profile/activity/workspace-activity-list.tsx
+++ b/apps/web/core/components/profile/activity/workspace-activity-list.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useEffect } from "react";
 import { useParams } from "next/navigation";
 import useSWR from "swr";
diff --git a/apps/web/core/components/profile/notification/email-notification-form.tsx b/apps/web/core/components/profile/notification/email-notification-form.tsx
deleted file mode 100644
index 978625099..000000000
--- a/apps/web/core/components/profile/notification/email-notification-form.tsx
+++ /dev/null
@@ -1,196 +0,0 @@
-import type { FC } from "react";
-import React, { useEffect } from "react";
-import { Controller, useForm } from "react-hook-form";
-import { PROFILE_SETTINGS_TRACKER_ELEMENTS, PROFILE_SETTINGS_TRACKER_EVENTS } from "@plane/constants";
-import { useTranslation } from "@plane/i18n";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
-import type { IUserEmailNotificationSettings } from "@plane/types";
-// ui
-import { ToggleSwitch } from "@plane/ui";
-// services
-import { captureClick, captureError, captureSuccess } from "@/helpers/event-tracker.helper";
-import { UserService } from "@/services/user.service";
-// types
-interface IEmailNotificationFormProps {
-  data: IUserEmailNotificationSettings;
-}
-
-// services
-const userService = new UserService();
-
-export function EmailNotificationForm(props: IEmailNotificationFormProps) {
-  const { data } = props;
-  const { t } = useTranslation();
-  // form data
-  const { control, reset } = useForm<IUserEmailNotificationSettings>({
-    defaultValues: {
-      ...data,
-    },
-  });
-
-  const handleSettingChange = async (key: keyof IUserEmailNotificationSettings, value: boolean) => {
-    try {
-      await userService.updateCurrentUserEmailNotificationSettings({
-        [key]: value,
-      });
-      captureSuccess({
-        eventName: PROFILE_SETTINGS_TRACKER_EVENTS.notifications_updated,
-        payload: {
-          [key]: value,
-        },
-      });
-      setToast({
-        title: t("success"),
-        type: TOAST_TYPE.SUCCESS,
-        message: t("email_notification_setting_updated_successfully"),
-      });
-    } catch (err) {
-      console.error(err);
-      captureError({
-        eventName: PROFILE_SETTINGS_TRACKER_EVENTS.notifications_updated,
-        payload: {
-          [key]: value,
-        },
-      });
-      setToast({
-        title: t("error"),
-        type: TOAST_TYPE.ERROR,
-        message: t("failed_to_update_email_notification_setting"),
-      });
-    }
-  };
-
-  useEffect(() => {
-    reset(data);
-  }, [reset, data]);
-
-  return (
-    <>
-      {/* Notification Settings */}
-      <div className="flex flex-col py-2 w-full">
-        <div className="flex gap-2 items-center pt-2">
-          <div className="grow">
-            <div className="pb-1 text-base font-medium text-custom-text-100">{t("property_changes")}</div>
-            <div className="text-sm font-normal text-custom-text-300">{t("property_changes_description")}</div>
-          </div>
-          <div className="shrink-0">
-            <Controller
-              control={control}
-              name="property_change"
-              render={({ field: { value, onChange } }) => (
-                <ToggleSwitch
-                  value={value}
-                  onChange={(newValue) => {
-                    onChange(newValue);
-                    captureClick({
-                      elementName: PROFILE_SETTINGS_TRACKER_ELEMENTS.PROPERTY_CHANGES_TOGGLE,
-                    });
-                    handleSettingChange("property_change", newValue);
-                  }}
-                  size="sm"
-                />
-              )}
-            />
-          </div>
-        </div>
-        <div className="flex gap-2 items-center pt-6 pb-2">
-          <div className="grow">
-            <div className="pb-1 text-base font-medium text-custom-text-100">{t("state_change")}</div>
-            <div className="text-sm font-normal text-custom-text-300">{t("state_change_description")}</div>
-          </div>
-          <div className="shrink-0">
-            <Controller
-              control={control}
-              name="state_change"
-              render={({ field: { value, onChange } }) => (
-                <ToggleSwitch
-                  value={value}
-                  onChange={(newValue) => {
-                    onChange(newValue);
-                    captureClick({
-                      elementName: PROFILE_SETTINGS_TRACKER_ELEMENTS.STATE_CHANGES_TOGGLE,
-                    });
-                    handleSettingChange("state_change", newValue);
-                  }}
-                  size="sm"
-                />
-              )}
-            />
-          </div>
-        </div>
-        <div className="flex gap-2 items-center border-0 border-l-[3px] border-custom-border-300 pl-3">
-          <div className="grow">
-            <div className="pb-1 text-base font-medium text-custom-text-100">{t("issue_completed")}</div>
-            <div className="text-sm font-normal text-custom-text-300">{t("issue_completed_description")}</div>
-          </div>
-          <div className="shrink-0">
-            <Controller
-              control={control}
-              name="issue_completed"
-              render={({ field: { value, onChange } }) => (
-                <ToggleSwitch
-                  value={value}
-                  onChange={(newValue) => {
-                    onChange(newValue);
-                    handleSettingChange("issue_completed", newValue);
-                  }}
-                  size="sm"
-                />
-              )}
-            />
-          </div>
-        </div>
-        <div className="flex gap-2 items-center pt-6">
-          <div className="grow">
-            <div className="pb-1 text-base font-medium text-custom-text-100">{t("comments")}</div>
-            <div className="text-sm font-normal text-custom-text-300">{t("comments_description")}</div>
-          </div>
-          <div className="shrink-0">
-            <Controller
-              control={control}
-              name="comment"
-              render={({ field: { value, onChange } }) => (
-                <ToggleSwitch
-                  value={value}
-                  onChange={(newValue) => {
-                    onChange(newValue);
-                    captureClick({
-                      elementName: PROFILE_SETTINGS_TRACKER_ELEMENTS.COMMENTS_TOGGLE,
-                    });
-                    handleSettingChange("comment", newValue);
-                  }}
-                  size="sm"
-                />
-              )}
-            />
-          </div>
-        </div>
-        <div className="flex gap-2 items-center pt-6">
-          <div className="grow">
-            <div className="pb-1 text-base font-medium text-custom-text-100">{t("mentions")}</div>
-            <div className="text-sm font-normal text-custom-text-300">{t("mentions_description")}</div>
-          </div>
-          <div className="shrink-0">
-            <Controller
-              control={control}
-              name="mention"
-              render={({ field: { value, onChange } }) => (
-                <ToggleSwitch
-                  value={value}
-                  onChange={(newValue) => {
-                    onChange(newValue);
-                    captureClick({
-                      elementName: PROFILE_SETTINGS_TRACKER_ELEMENTS.MENTIONS_TOGGLE,
-                    });
-                    handleSettingChange("mention", newValue);
-                  }}
-                  size="sm"
-                />
-              )}
-            />
-          </div>
-        </div>
-      </div>
-    </>
-  );
-}
diff --git a/apps/web/core/components/profile/overview/activity.tsx b/apps/web/core/components/profile/overview/activity.tsx
index cf17f818b..23bb961f7 100644
--- a/apps/web/core/components/profile/overview/activity.tsx
+++ b/apps/web/core/components/profile/overview/activity.tsx
@@ -1,8 +1,15 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 import useSWR from "swr";
 // ui
 import { useTranslation } from "@plane/i18n";
+import { Avatar } from "@plane/propel/avatar";
 import { EmptyStateCompact } from "@plane/propel/empty-state";
 import { Loader, Card } from "@plane/ui";
 import { calculateTimeAgo, getFileURL } from "@plane/utils";
@@ -36,29 +43,22 @@ export const ProfileActivity = observer(function ProfileActivity() {
 
   return (
     <div className="space-y-2">
-      <h3 className="text-lg font-medium">{t("profile.stats.recent_activity.title")}</h3>
+      <h3 className="text-16 font-medium">{t("profile.stats.recent_activity.title")}</h3>
       <Card>
         {userProfileActivity ? (
           userProfileActivity.results.length > 0 ? (
             <div className="space-y-5">
               {userProfileActivity.results.map((activity) => (
                 <div key={activity.id} className="flex gap-3">
-                  <div className="flex-shrink-0 grid place-items-center overflow-hidden rounded h-6 w-6">
-                    {activity.actor_detail?.avatar_url && activity.actor_detail?.avatar_url !== "" ? (
-                      <img
-                        src={getFileURL(activity.actor_detail?.avatar_url)}
-                        alt={activity.actor_detail?.display_name}
-                        className="rounded"
-                      />
-                    ) : (
-                      <div className="grid h-6 w-6 place-items-center rounded border-2 bg-gray-700 text-xs text-white">
-                        {activity.actor_detail?.display_name?.charAt(0)}
-                      </div>
-                    )}
-                  </div>
+                  <Avatar
+                    name={activity.actor_detail?.display_name}
+                    src={getFileURL(activity.actor_detail?.avatar_url)}
+                    size="base"
+                    shape="square"
+                  />
                   <div className="-mt-1 w-4/5 break-words">
-                    <p className="inline text-sm text-custom-text-200">
-                      <span className="font-medium text-custom-text-100">
+                    <p className="inline text-13 text-secondary">
+                      <span className="font-medium text-primary">
                         {currentUser?.id === activity.actor_detail?.id
                           ? "You"
                           : activity.actor_detail?.display_name}{" "}
@@ -71,9 +71,7 @@ export const ProfileActivity = observer(function ProfileActivity() {
                         </span>
                       )}
                     </p>
-                    <p className="text-xs text-custom-text-200 whitespace-nowrap ">
-                      {calculateTimeAgo(activity.created_at)}
-                    </p>
+                    <p className="text-11 whitespace-nowrap text-secondary">{calculateTimeAgo(activity.created_at)}</p>
                   </div>
                 </div>
               ))}
diff --git a/apps/web/core/components/profile/overview/priority-distribution.tsx b/apps/web/core/components/profile/overview/priority-distribution.tsx
index 65b0f32b7..2660f1a56 100644
--- a/apps/web/core/components/profile/overview/priority-distribution.tsx
+++ b/apps/web/core/components/profile/overview/priority-distribution.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // plane imports
 import { useTranslation } from "@plane/i18n";
 import { BarChart } from "@plane/propel/charts/bar-chart";
@@ -22,12 +28,12 @@ export function ProfilePriorityDistribution({ userProfile }: Props) {
   const { t } = useTranslation();
   return (
     <div className="flex flex-col space-y-2">
-      <h3 className="text-lg font-medium">{t("profile.stats.priority_distribution.title")}</h3>
+      <h3 className="text-16 font-medium">{t("profile.stats.priority_distribution.title")}</h3>
       {userProfile ? (
         <Card>
           {userProfile.priority_distribution.length > 0 ? (
             <BarChart
-              className="w-full h-[300px]"
+              className="h-[300px] w-full"
               margin={{ top: 20, right: 30, bottom: 5, left: 0 }}
               data={userProfile.priority_distribution.map((priority) => ({
                 key: priority.priority ?? "None",
diff --git a/apps/web/core/components/profile/overview/state-distribution.tsx b/apps/web/core/components/profile/overview/state-distribution.tsx
index bd2ecf864..457e55808 100644
--- a/apps/web/core/components/profile/overview/state-distribution.tsx
+++ b/apps/web/core/components/profile/overview/state-distribution.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // plane imports
 import { STATE_GROUPS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
@@ -18,10 +24,10 @@ export function ProfileStateDistribution({ stateDistribution, userProfile }: Pro
 
   return (
     <div className="flex flex-col space-y-2">
-      <h3 className="text-lg font-medium">{t("profile.stats.state_distribution.title")}</h3>
+      <h3 className="text-16 font-medium">{t("profile.stats.state_distribution.title")}</h3>
       <Card className="h-full">
         {userProfile.state_distribution.length > 0 ? (
-          <div className="grid grid-cols-1 gap-x-6 md:grid-cols-2 w-full  h-[300px]">
+          <div className="grid h-[300px] w-full grid-cols-1 gap-x-6 md:grid-cols-2">
             <PieChart
               className="size-full"
               dataKey="value"
@@ -54,12 +60,13 @@ export function ProfileStateDistribution({ stateDistribution, userProfile }: Pro
             <div className="flex items-center">
               <div className="w-full space-y-4">
                 {stateDistribution.map((group) => (
-                  <div key={group.state_group} className="flex items-center justify-between gap-2 text-xs">
+                  <div key={group.state_group} className="flex items-center justify-between gap-2 text-11">
                     <div className="flex items-center gap-1.5">
                       <div
-                        className="h-2.5 w-2.5 rounded-sm"
+                        className="h-2.5 w-2.5 rounded-xs"
                         style={{
-                          backgroundColor: STATE_GROUPS[group.state_group]?.color ?? "rgb(var(--color-primary-100))",
+                          backgroundColor:
+                            STATE_GROUPS[group.state_group]?.color ?? "var(--background-color-accent-primary)",
                         }}
                       />
                       <div className="whitespace-nowrap">{STATE_GROUPS[group.state_group].label}</div>
diff --git a/apps/web/core/components/profile/overview/stats.tsx b/apps/web/core/components/profile/overview/stats.tsx
index 85f2c9279..9431cc811 100644
--- a/apps/web/core/components/profile/overview/stats.tsx
+++ b/apps/web/core/components/profile/overview/stats.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import Link from "next/link";
 import { useParams } from "next/navigation";
 
@@ -40,18 +46,18 @@ export function ProfileStats({ userProfile }: Props) {
 
   return (
     <div className="space-y-2">
-      <h3 className="text-lg font-medium">{t("profile.stats.overview")}</h3>
+      <h3 className="text-16 font-medium">{t("profile.stats.overview")}</h3>
       {userProfile ? (
         <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
           {overviewCards.map((card) => (
             <Link key={card.route} href={`/${workspaceSlug}/profile/${userId}/${card.route}`}>
               <Card direction={ECardDirection.ROW} spacing={ECardSpacing.SM} className="h-full">
-                <div className="grid h-11 w-11 place-items-center rounded bg-custom-background-90">
+                <div className="grid h-11 w-11 place-items-center rounded-sm bg-surface-2">
                   <card.icon className="h-5 w-5" />
                 </div>
                 <div className="space-y-1">
-                  <p className="text-sm text-custom-text-400">{t(card.i18n_title)}</p>
-                  <p className="text-xl font-semibold">{card.value}</p>
+                  <p className="text-13 text-placeholder">{t(card.i18n_title)}</p>
+                  <p className="text-18 font-semibold">{card.value}</p>
                 </div>
               </Card>
             </Link>
diff --git a/apps/web/core/components/profile/overview/workload.tsx b/apps/web/core/components/profile/overview/workload.tsx
index 7b0d6de29..89112cc84 100644
--- a/apps/web/core/components/profile/overview/workload.tsx
+++ b/apps/web/core/components/profile/overview/workload.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // plane imports
 import { STATE_GROUPS } from "@plane/constants";
 // types
@@ -15,27 +21,27 @@ export function ProfileWorkload({ stateDistribution }: Props) {
 
   return (
     <div className="space-y-2">
-      <h3 className="text-lg font-medium">{t("profile.stats.workload")}</h3>
+      <h3 className="text-16 font-medium">{t("profile.stats.workload")}</h3>
       <div className="grid grid-cols-1 justify-stretch gap-4 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5">
         {stateDistribution.map((group) => (
           <div key={group.state_group}>
             <a>
               <Card direction={ECardDirection.ROW} spacing={ECardSpacing.SM}>
                 <div
-                  className="h-3 w-3 rounded-sm my-2"
+                  className="my-2 h-3 w-3 rounded-xs"
                   style={{
                     backgroundColor: STATE_GROUPS[group.state_group].color,
                   }}
                 />
-                <div className="space-y-1 flex-col">
-                  <span className="text-sm text-custom-text-400">
+                <div className="flex-col space-y-1">
+                  <span className="text-13 text-placeholder">
                     {group.state_group === "unstarted"
                       ? "Not started"
                       : group.state_group === "started"
                         ? "Working on"
                         : STATE_GROUPS[group.state_group].label}
                   </span>
-                  <p className="text-xl font-semibold">{group.state_count}</p>
+                  <p className="text-18 font-semibold">{group.state_count}</p>
                 </div>
               </Card>
             </a>
diff --git a/apps/web/core/components/profile/preferences/language-timezone.tsx b/apps/web/core/components/profile/preferences/language-timezone.tsx
deleted file mode 100644
index 81e734584..000000000
--- a/apps/web/core/components/profile/preferences/language-timezone.tsx
+++ /dev/null
@@ -1,144 +0,0 @@
-import { observer } from "mobx-react";
-import { PROFILE_SETTINGS_TRACKER_ELEMENTS, PROFILE_SETTINGS_TRACKER_EVENTS } from "@plane/constants";
-import { SUPPORTED_LANGUAGES, useTranslation } from "@plane/i18n";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
-import { CustomSelect } from "@plane/ui";
-import { TimezoneSelect } from "@/components/global";
-import { captureElementAndEvent } from "@/helpers/event-tracker.helper";
-import { useUser, useUserProfile } from "@/hooks/store/user";
-
-export const LanguageTimezone = observer(function LanguageTimezone() {
-  // store hooks
-  const {
-    data: user,
-    updateCurrentUser,
-    userProfile: { data: profile },
-  } = useUser();
-  const { updateUserProfile } = useUserProfile();
-  const { t } = useTranslation();
-
-  const handleTimezoneChange = (value: string) => {
-    updateCurrentUser({ user_timezone: value })
-      .then(() => {
-        captureElementAndEvent({
-          element: {
-            elementName: PROFILE_SETTINGS_TRACKER_ELEMENTS.TIMEZONE_DROPDOWN,
-          },
-          event: {
-            eventName: PROFILE_SETTINGS_TRACKER_EVENTS.timezone_updated,
-            payload: {
-              timezone: value,
-            },
-            state: "SUCCESS",
-          },
-        });
-        setToast({
-          title: "Success!",
-          message: "Timezone updated successfully",
-          type: TOAST_TYPE.SUCCESS,
-        });
-      })
-      .catch(() => {
-        captureElementAndEvent({
-          element: {
-            elementName: PROFILE_SETTINGS_TRACKER_ELEMENTS.TIMEZONE_DROPDOWN,
-          },
-          event: {
-            eventName: PROFILE_SETTINGS_TRACKER_EVENTS.timezone_updated,
-            state: "ERROR",
-          },
-        });
-        setToast({
-          title: "Error!",
-          message: "Failed to update timezone",
-          type: TOAST_TYPE.ERROR,
-        });
-      });
-  };
-  const handleLanguageChange = (value: string) => {
-    updateUserProfile({ language: value })
-      .then(() => {
-        captureElementAndEvent({
-          element: {
-            elementName: PROFILE_SETTINGS_TRACKER_ELEMENTS.LANGUAGE_DROPDOWN,
-          },
-          event: {
-            eventName: PROFILE_SETTINGS_TRACKER_EVENTS.language_updated,
-            payload: {
-              language: value,
-            },
-            state: "SUCCESS",
-          },
-        });
-        setToast({
-          title: "Success!",
-          message: "Language updated successfully",
-          type: TOAST_TYPE.SUCCESS,
-        });
-      })
-      .catch(() => {
-        captureElementAndEvent({
-          element: {
-            elementName: PROFILE_SETTINGS_TRACKER_ELEMENTS.LANGUAGE_DROPDOWN,
-          },
-          event: {
-            eventName: PROFILE_SETTINGS_TRACKER_EVENTS.language_updated,
-            state: "ERROR",
-          },
-        });
-        setToast({
-          title: "Error!",
-          message: "Failed to update language",
-          type: TOAST_TYPE.ERROR,
-        });
-      });
-  };
-
-  const getLanguageLabel = (value: string) => {
-    const selectedLanguage = SUPPORTED_LANGUAGES.find((l) => l.value === value);
-    if (!selectedLanguage) return value;
-    return selectedLanguage.label;
-  };
-
-  return (
-    <div className="py-6">
-      <div className="flex flex-col gap-x-6 gap-y-6">
-        <div className="flex flex-col gap-1">
-          <div className="flex gap-4 sm:gap-16 w-full justify-between">
-            <div className="col-span-12 sm:col-span-6">
-              <h4 className="text-base font-medium text-custom-text-100"> {t("timezone")}&nbsp;</h4>
-              <p className="text-sm text-custom-text-200">{t("timezone_setting")}</p>
-            </div>
-            <div className="col-span-12 sm:col-span-6 my-auto">
-              <TimezoneSelect value={user?.user_timezone || "Asia/Kolkata"} onChange={handleTimezoneChange} />
-            </div>
-          </div>
-        </div>
-        <div className="flex flex-col gap-1">
-          <div className="flex gap-4 sm:gap-16 w-full justify-between">
-            <div className="col-span-12 sm:col-span-6">
-              <h4 className="text-base font-medium text-custom-text-100"> {t("language")}&nbsp;</h4>
-              <p className="text-sm text-custom-text-200">{t("language_setting")}</p>
-            </div>
-            <div className="col-span-12 sm:col-span-6 my-auto">
-              <CustomSelect
-                value={profile?.language}
-                label={profile?.language ? getLanguageLabel(profile?.language) : "Select a language"}
-                onChange={handleLanguageChange}
-                buttonClassName={"border-none"}
-                className="rounded-md border !border-custom-border-200"
-                input
-              >
-                {SUPPORTED_LANGUAGES.map((item) => (
-                  <CustomSelect.Option key={item.value} value={item.value}>
-                    {item.label}
-                  </CustomSelect.Option>
-                ))}
-              </CustomSelect>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-});
diff --git a/apps/web/core/components/profile/profile-issues-filter.tsx b/apps/web/core/components/profile/profile-issues-filter.tsx
index 865bc6346..73a40667e 100644
--- a/apps/web/core/components/profile/profile-issues-filter.tsx
+++ b/apps/web/core/components/profile/profile-issues-filter.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useCallback } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
diff --git a/apps/web/core/components/profile/profile-issues.tsx b/apps/web/core/components/profile/profile-issues.tsx
index b9a062b75..4822a6e8d 100644
--- a/apps/web/core/components/profile/profile-issues.tsx
+++ b/apps/web/core/components/profile/profile-issues.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React, { useEffect } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
@@ -56,9 +62,9 @@ export const ProfileIssuesPage = observer(function ProfileIssuesPage(props: Prop
       >
         {({ filter: profileWorkItemsFilter }) => (
           <>
-            <div className="flex flex-col h-full w-full">
+            <div className="flex h-full w-full flex-col">
               {profileWorkItemsFilter && <WorkItemFiltersRow filter={profileWorkItemsFilter} />}
-              <div className="-z-1 relative h-full w-full overflow-auto">
+              <div className="relative h-full w-full overflow-auto">
                 {activeLayout === "list" ? (
                   <ProfileIssuesListLayout />
                 ) : activeLayout === "kanban" ? (
diff --git a/apps/web/core/components/profile/profile-setting-content-header.tsx b/apps/web/core/components/profile/profile-setting-content-header.tsx
deleted file mode 100644
index ade1db7fc..000000000
--- a/apps/web/core/components/profile/profile-setting-content-header.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-type Props = {
-  title: string;
-  description?: string;
-};
-
-export function ProfileSettingContentHeader(props: Props) {
-  const { title, description } = props;
-  return (
-    <div className="flex flex-col gap-1 pb-4 border-b border-custom-border-100 w-full">
-      <div className="text-xl font-medium text-custom-text-100">{title}</div>
-      {description && <div className="text-sm font-normal text-custom-text-300">{description}</div>}
-    </div>
-  );
-}
diff --git a/apps/web/core/components/profile/profile-setting-content-wrapper.tsx b/apps/web/core/components/profile/profile-setting-content-wrapper.tsx
index 0e2151175..ae6b52d83 100644
--- a/apps/web/core/components/profile/profile-setting-content-wrapper.tsx
+++ b/apps/web/core/components/profile/profile-setting-content-wrapper.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { cn } from "@plane/utils";
 import { SidebarHamburgerToggle } from "@/components/core/sidebar/sidebar-menu-hamburger-toggle";
 
@@ -10,13 +16,13 @@ export function ProfileSettingContentWrapper(props: Props) {
   const { children, className = "" } = props;
   return (
     <div className="flex h-full flex-col">
-      <div className="block flex-shrink-0 border-b border-custom-border-200 p-4 md:hidden">
+      <div className="block flex-shrink-0 border-b border-subtle p-4 md:hidden">
         <SidebarHamburgerToggle />
       </div>
 
       <div
         className={cn(
-          "vertical-scrollbar scrollbar-md mx-auto h-full w-full flex flex-col px-8 md:px-20 lg:px-36 xl:px-56 py-10 md:py-16",
+          "vertical-scrollbar mx-auto flex scrollbar-md h-full w-full flex-col px-8 py-10 md:px-20 md:py-16 lg:px-36 xl:px-56",
           className
         )}
       >
diff --git a/apps/web/core/components/profile/sidebar.tsx b/apps/web/core/components/profile/sidebar.tsx
index 91b2a9851..42ec13d1f 100644
--- a/apps/web/core/components/profile/sidebar.tsx
+++ b/apps/web/core/components/profile/sidebar.tsx
@@ -1,26 +1,28 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useEffect, useRef } from "react";
 import { observer } from "mobx-react";
-import Link from "next/link";
 import { useParams } from "next/navigation";
-// icons
-import { Pencil } from "lucide-react";
-// headless ui
 import { Disclosure, Transition } from "@headlessui/react";
-// plane helpers
+// plane imports
 import { useOutsideClickDetector } from "@plane/hooks";
-// types
 import { useTranslation } from "@plane/i18n";
 import { Logo } from "@plane/propel/emoji-icon-picker";
-import { ChevronDownIcon } from "@plane/propel/icons";
+import { IconButton } from "@plane/propel/icon-button";
+import { EditIcon, ChevronDownIcon } from "@plane/propel/icons";
 import { Tooltip } from "@plane/propel/tooltip";
 import type { IUserProfileProjectSegregation } from "@plane/types";
-// plane ui
 import { Loader } from "@plane/ui";
 import { cn, renderFormattedDate, getFileURL } from "@plane/utils";
-// helpers
-import { getCoverImageDisplayURL } from "@/helpers/cover-image.helper";
+// components
+import { CoverImage } from "@/components/common/cover-image";
 // hooks
 import { useAppTheme } from "@/hooks/store/use-app-theme";
+import { useCommandPalette } from "@/hooks/store/use-command-palette";
 import { useProject } from "@/hooks/store/use-project";
 import { useUser } from "@/hooks/store/user";
 import { usePlatformOS } from "@/hooks/use-platform-os";
@@ -37,11 +39,12 @@ export const ProfileSidebar = observer(function ProfileSidebar(props: TProfileSi
   // refs
   const ref = useRef<HTMLDivElement>(null);
   // router
-  const { userId, workspaceSlug } = useParams();
+  const { userId } = useParams();
   // store hooks
   const { data: currentUser } = useUser();
   const { profileSidebarCollapsed, toggleProfileSidebar } = useAppTheme();
   const { getProjectById } = useProject();
+  const { toggleProfileSettingsModal } = useCommandPalette();
   const { isMobile } = usePlatformOS();
   const { t } = useTranslation();
   // derived values
@@ -84,7 +87,7 @@ export const ProfileSidebar = observer(function ProfileSidebar(props: TProfileSi
   return (
     <div
       className={cn(
-        `vertical-scrollbar scrollbar-md fixed z-[5] h-full w-full flex-shrink-0 overflow-hidden overflow-y-auto border-l border-custom-border-100 bg-custom-sidebar-background-100 transition-all md:relative md:w-[300px]`,
+        `vertical-scrollbar fixed z-5 scrollbar-md h-full w-full shrink-0 overflow-hidden overflow-y-auto border-l border-subtle bg-surface-1 shadow-raised-200 transition-all md:relative md:w-[300px]`,
         className
       )}
       style={profileSidebarCollapsed ? { marginLeft: `${window?.innerWidth || 0}px` } : {}}
@@ -93,31 +96,34 @@ export const ProfileSidebar = observer(function ProfileSidebar(props: TProfileSi
         <>
           <div className="relative h-[110px]">
             {currentUser?.id === userId && (
-              <div className="absolute right-3.5 top-3.5 grid h-5 w-5 place-items-center rounded bg-white">
-                <Link href={`/${workspaceSlug}/settings/account`}>
-                  <span className="grid place-items-center text-black">
-                    <Pencil className="h-3 w-3" />
-                  </span>
-                </Link>
+              <div className="absolute top-3.5 right-3.5">
+                <IconButton
+                  variant="secondary"
+                  icon={EditIcon}
+                  onClick={() =>
+                    toggleProfileSettingsModal({
+                      activeTab: "general",
+                      isOpen: true,
+                    })
+                  }
+                />
               </div>
             )}
-            <img
-              src={
-                getCoverImageDisplayURL(userData?.cover_image_url, "/users/user-profile-cover-default-img.png") ||
-                "/users/user-profile-cover-default-img.png"
-              }
+            <CoverImage
+              src={userData?.cover_image_url ?? undefined}
               alt={userData?.display_name}
-              className="h-[110px] w-full object-cover"
+              className="h-[110px] w-full"
+              showDefaultWhenEmpty
             />
-            <div className="absolute -bottom-[26px] left-5 h-[52px] w-[52px] rounded">
+            <div className="absolute -bottom-[26px] left-5 h-[52px] w-[52px] rounded-sm">
               {userData?.avatar_url && userData?.avatar_url !== "" ? (
                 <img
                   src={getFileURL(userData?.avatar_url)}
                   alt={userData?.display_name}
-                  className="h-full w-full rounded object-cover"
+                  className="h-full w-full rounded-sm object-cover"
                 />
               ) : (
-                <div className="flex h-[52px] w-[52px] items-center justify-center rounded bg-[#028375] capitalize text-white">
+                <div className="flex h-[52px] w-[52px] items-center justify-center rounded-sm bg-accent-primary text-on-color capitalize">
                   {userData?.first_name?.[0]}
                 </div>
               )}
@@ -125,20 +131,20 @@ export const ProfileSidebar = observer(function ProfileSidebar(props: TProfileSi
           </div>
           <div className="px-5">
             <div className="mt-[38px]">
-              <h4 className="text-lg font-semibold">
+              <h4 className="text-16 font-semibold">
                 {userData?.first_name} {userData?.last_name}
               </h4>
-              <h6 className="text-sm text-custom-text-200">({userData?.display_name})</h6>
+              <h6 className="text-13 text-secondary">({userData?.display_name})</h6>
             </div>
             <div className="mt-6 space-y-5">
               {userDetails.map((detail) => (
-                <div key={detail.i18n_label} className="flex items-center gap-4 text-sm">
-                  <div className="w-2/5 flex-shrink-0 text-custom-text-200">{t(detail.i18n_label)}</div>
-                  <div className="w-3/5 break-words font-medium">{detail.value}</div>
+                <div key={detail.i18n_label} className="flex items-center gap-4 text-13">
+                  <div className="w-2/5 flex-shrink-0 text-secondary">{t(detail.i18n_label)}</div>
+                  <div className="w-3/5 font-medium break-words">{detail.value}</div>
                 </div>
               ))}
             </div>
-            <div className="mt-9 divide-y divide-custom-border-100">
+            <div className="mt-9 divide-y divide-subtle">
               {userProjectsData.project_data.map((project, index) => {
                 const projectDetails = getProjectById(project.id);
 
@@ -161,18 +167,18 @@ export const ProfileSidebar = observer(function ProfileSidebar(props: TProfileSi
                             <span className="grid h-7 w-7 flex-shrink-0 place-items-center">
                               <Logo logo={projectDetails.logo_props} />
                             </span>
-                            <div className="truncate break-words text-sm font-medium">{projectDetails.name}</div>
+                            <div className="truncate text-13 font-medium break-words">{projectDetails.name}</div>
                           </div>
                           <div className="flex flex-shrink-0 items-center gap-2">
                             {project.assigned_issues > 0 && (
                               <Tooltip tooltipContent="Completion percentage" position="left" isMobile={isMobile}>
                                 <div
-                                  className={`rounded px-1 py-0.5 text-xs font-medium ${
+                                  className={`rounded-sm px-1 py-0.5 text-11 font-medium ${
                                     completedIssuePercentage <= 35
-                                      ? "bg-red-500/10 text-red-500"
+                                      ? "bg-danger-subtle text-danger-primary"
                                       : completedIssuePercentage <= 70
                                         ? "bg-yellow-500/10 text-yellow-500"
-                                        : "bg-green-500/10 text-green-500"
+                                        : "bg-success-subtle text-success-primary"
                                   }`}
                                 >
                                   {completedIssuePercentage}%
@@ -195,28 +201,28 @@ export const ProfileSidebar = observer(function ProfileSidebar(props: TProfileSi
                             {totalIssues > 0 && (
                               <div className="flex items-center gap-0.5">
                                 <div
-                                  className="h-1 rounded"
+                                  className="h-1 rounded-sm"
                                   style={{
                                     backgroundColor: "#203b80",
                                     width: `${(project.created_issues / totalIssues) * 100}%`,
                                   }}
                                 />
                                 <div
-                                  className="h-1 rounded"
+                                  className="h-1 rounded-sm"
                                   style={{
                                     backgroundColor: "#3f76ff",
                                     width: `${(project.assigned_issues / totalIssues) * 100}%`,
                                   }}
                                 />
                                 <div
-                                  className="h-1 rounded"
+                                  className="h-1 rounded-sm"
                                   style={{
                                     backgroundColor: "#f59e0b",
                                     width: `${(project.pending_issues / totalIssues) * 100}%`,
                                   }}
                                 />
                                 <div
-                                  className="h-1 rounded"
+                                  className="h-1 rounded-sm"
                                   style={{
                                     backgroundColor: "#16a34a",
                                     width: `${(project.completed_issues / totalIssues) * 100}%`,
@@ -224,10 +230,10 @@ export const ProfileSidebar = observer(function ProfileSidebar(props: TProfileSi
                                 />
                               </div>
                             )}
-                            <div className="mt-7 space-y-5 text-sm text-custom-text-200">
+                            <div className="mt-7 space-y-5 text-13 text-secondary">
                               <div className="flex items-center justify-between gap-2">
                                 <div className="flex items-center gap-2">
-                                  <div className="h-2.5 w-2.5 rounded-sm bg-[#203b80]" />
+                                  <div className="h-2.5 w-2.5 rounded-xs bg-[#203b80]" />
                                   Created
                                 </div>
                                 <div className="font-medium">
@@ -236,7 +242,7 @@ export const ProfileSidebar = observer(function ProfileSidebar(props: TProfileSi
                               </div>
                               <div className="flex items-center justify-between gap-2">
                                 <div className="flex items-center gap-2">
-                                  <div className="h-2.5 w-2.5 rounded-sm bg-[#3f76ff]" />
+                                  <div className="h-2.5 w-2.5 rounded-xs bg-[#3f76ff]" />
                                   Assigned
                                 </div>
                                 <div className="font-medium">
@@ -245,7 +251,7 @@ export const ProfileSidebar = observer(function ProfileSidebar(props: TProfileSi
                               </div>
                               <div className="flex items-center justify-between gap-2">
                                 <div className="flex items-center gap-2">
-                                  <div className="h-2.5 w-2.5 rounded-sm bg-[#f59e0b]" />
+                                  <div className="h-2.5 w-2.5 rounded-xs bg-[#f59e0b]" />
                                   Due
                                 </div>
                                 <div className="font-medium">
@@ -254,7 +260,7 @@ export const ProfileSidebar = observer(function ProfileSidebar(props: TProfileSi
                               </div>
                               <div className="flex items-center justify-between gap-2">
                                 <div className="flex items-center gap-2">
-                                  <div className="h-2.5 w-2.5 rounded-sm bg-[#16a34a]" />
+                                  <div className="h-2.5 w-2.5 rounded-xs bg-[#16a34a]" />
                                   Completed
                                 </div>
                                 <div className="font-medium">
diff --git a/apps/web/core/components/profile/start-of-week-preference.tsx b/apps/web/core/components/profile/start-of-week-preference.tsx
index 259e570a7..93893b4ce 100644
--- a/apps/web/core/components/profile/start-of-week-preference.tsx
+++ b/apps/web/core/components/profile/start-of-week-preference.tsx
@@ -1,18 +1,19 @@
-import React from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 // plane imports
-import {
-  PROFILE_SETTINGS_TRACKER_ELEMENTS,
-  PROFILE_SETTINGS_TRACKER_EVENTS,
-  START_OF_THE_WEEK_OPTIONS,
-} from "@plane/constants";
+import { START_OF_THE_WEEK_OPTIONS } from "@plane/constants";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { EStartOfTheWeek } from "@plane/types";
 import { CustomSelect } from "@plane/ui";
+// components
+import { SettingsControlItem } from "@/components/settings/control-item";
 // hooks
-import { captureElementAndEvent } from "@/helpers/event-tracker.helper";
 import { useUserProfile } from "@/hooks/store/user";
-import { PreferencesSection } from "../preferences/section";
 
 const getStartOfWeekLabel = (startOfWeek: EStartOfTheWeek) =>
   START_OF_THE_WEEK_OPTIONS.find((option) => option.value === startOfWeek)?.label;
@@ -23,61 +24,37 @@ export const StartOfWeekPreference = observer(function StartOfWeekPreference(pro
   // hooks
   const { data: userProfile, updateUserProfile } = useUserProfile();
 
+  const handleStartOfWeekChange = async (val: number) => {
+    try {
+      await updateUserProfile({ start_of_the_week: val });
+      setToast({ type: TOAST_TYPE.SUCCESS, title: "Success", message: "First day of the week updated successfully" });
+    } catch (_error) {
+      setToast({ type: TOAST_TYPE.ERROR, title: "Update failed", message: "Please try again later." });
+    }
+  };
+
   return (
-    <PreferencesSection
+    <SettingsControlItem
       title={props.option.title}
       description={props.option.description}
       control={
-        <div className="">
-          <CustomSelect
-            value={userProfile.start_of_the_week}
-            label={getStartOfWeekLabel(userProfile.start_of_the_week)}
-            onChange={(val: number) => {
-              updateUserProfile({ start_of_the_week: val })
-                .then(() => {
-                  captureElementAndEvent({
-                    element: {
-                      elementName: PROFILE_SETTINGS_TRACKER_ELEMENTS.FIRST_DAY_OF_WEEK_DROPDOWN,
-                    },
-                    event: {
-                      eventName: PROFILE_SETTINGS_TRACKER_EVENTS.first_day_updated,
-                      payload: {
-                        start_of_the_week: val,
-                      },
-                      state: "SUCCESS",
-                    },
-                  });
-                  setToast({
-                    type: TOAST_TYPE.SUCCESS,
-                    title: "Success",
-                    message: "First day of the week updated successfully",
-                  });
-                })
-                .catch(() => {
-                  captureElementAndEvent({
-                    element: {
-                      elementName: PROFILE_SETTINGS_TRACKER_ELEMENTS.FIRST_DAY_OF_WEEK_DROPDOWN,
-                    },
-                    event: {
-                      eventName: PROFILE_SETTINGS_TRACKER_EVENTS.first_day_updated,
-                      state: "ERROR",
-                    },
-                  });
-                  setToast({ type: TOAST_TYPE.ERROR, title: "Update failed", message: "Please try again later." });
-                });
-            }}
-            input
-            maxHeight="lg"
-          >
-            <>
-              {START_OF_THE_WEEK_OPTIONS.map((day) => (
-                <CustomSelect.Option key={day.value} value={day.value}>
-                  {day.label}
-                </CustomSelect.Option>
-              ))}
-            </>
-          </CustomSelect>
-        </div>
+        <CustomSelect
+          value={userProfile.start_of_the_week}
+          label={getStartOfWeekLabel(userProfile.start_of_the_week)}
+          onChange={handleStartOfWeekChange}
+          buttonClassName="border border-subtle-1"
+          input
+          maxHeight="lg"
+          placement="bottom-end"
+        >
+          <>
+            {START_OF_THE_WEEK_OPTIONS.map((day) => (
+              <CustomSelect.Option key={day.value} value={day.value}>
+                {day.label}
+              </CustomSelect.Option>
+            ))}
+          </>
+        </CustomSelect>
       }
     />
   );
diff --git a/apps/web/core/components/profile/time.tsx b/apps/web/core/components/profile/time.tsx
index 99532dacf..5265e2b2e 100644
--- a/apps/web/core/components/profile/time.tsx
+++ b/apps/web/core/components/profile/time.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // hooks
 import { useCurrentTime } from "@/hooks/use-current-time";
 
@@ -21,7 +27,7 @@ export function ProfileSidebarTime(props: Props) {
 
   return (
     <span>
-      {timeString} <span className="text-custom-text-200">{timeZone}</span>
+      {timeString} <span className="text-secondary">{timeZone}</span>
     </span>
   );
 }
diff --git a/apps/web/core/components/project-states/create-update/create.tsx b/apps/web/core/components/project-states/create-update/create.tsx
index 7cded141b..85f084f6a 100644
--- a/apps/web/core/components/project-states/create-update/create.tsx
+++ b/apps/web/core/components/project-states/create-update/create.tsx
@@ -1,22 +1,26 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useState } from "react";
 import { observer } from "mobx-react";
-import { STATE_TRACKER_EVENTS, STATE_GROUPS } from "@plane/constants";
+import { STATE_GROUPS } from "@plane/constants";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { IState, TStateGroups, TStateOperationsCallbacks } from "@plane/types";
 // components
 import { StateForm } from "@/components/project-states";
-// hooks
-import { captureError, captureSuccess } from "@/helpers/event-tracker.helper";
 
 type TStateCreate = {
   groupKey: TStateGroups;
-  shouldTrackEvents: boolean;
+  shouldTrackEvents?: boolean;
   createStateCallback: TStateOperationsCallbacks["createState"];
   handleClose: () => void;
 };
 
 export const StateCreate = observer(function StateCreate(props: TStateCreate) {
-  const { groupKey, shouldTrackEvents, createStateCallback, handleClose } = props;
+  const { groupKey, createStateCallback, handleClose } = props;
 
   // states
   const [loader, setLoader] = useState(false);
@@ -30,15 +34,8 @@ export const StateCreate = observer(function StateCreate(props: TStateCreate) {
     if (!groupKey) return { status: "error" };
 
     try {
-      const response = await createStateCallback({ ...formData, group: groupKey });
-      if (shouldTrackEvents)
-        captureSuccess({
-          eventName: STATE_TRACKER_EVENTS.create,
-          payload: {
-            state_group: groupKey,
-            id: response.id,
-          },
-        });
+      await createStateCallback({ ...formData, group: groupKey });
+
       setToast({
         type: TOAST_TYPE.SUCCESS,
         title: "Success!",
@@ -48,13 +45,6 @@ export const StateCreate = observer(function StateCreate(props: TStateCreate) {
       return { status: "success" };
     } catch (error) {
       const errorStatus = error as { status: number; data: { error: string } };
-      if (shouldTrackEvents)
-        captureError({
-          eventName: STATE_TRACKER_EVENTS.create,
-          payload: {
-            state_group: groupKey,
-          },
-        });
       if (errorStatus?.status === 400) {
         setToast({
           type: TOAST_TYPE.ERROR,
diff --git a/apps/web/core/components/project-states/create-update/form.tsx b/apps/web/core/components/project-states/create-update/form.tsx
index 2831b6d8f..f3fdec84d 100644
--- a/apps/web/core/components/project-states/create-update/form.tsx
+++ b/apps/web/core/components/project-states/create-update/form.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useEffect, useState } from "react";
 import { TwitterPicker } from "react-color";
 import { Button } from "@plane/propel/button";
@@ -15,7 +21,7 @@ type TStateForm = {
 function PopoverButton({ color }: { color?: string }) {
   return (
     <div
-      className="group inline-flex items-center text-base font-medium focus:outline-none h-5 w-5 rounded transition-all"
+      className="group inline-flex h-5 w-5 items-center rounded-sm text-14 font-medium transition-all focus:outline-none"
       style={{
         backgroundColor: color ?? "black",
       }}
@@ -57,9 +63,9 @@ export function StateForm(props: TStateForm) {
   };
 
   return (
-    <div className="relative flex space-x-2 bg-custom-background-100 p-3 rounded">
+    <div className="relative flex space-x-2 rounded-sm bg-surface-1 p-3">
       {/* color */}
-      <div className="flex-shrink-0 h-full mt-2">
+      <div className="mt-2 h-full flex-shrink-0">
         <Popover button={<PopoverButton color={formData?.color} />} panelClassName="mt-4 -ml-3">
           <TwitterPicker color={formData?.color} onChange={(value) => handleFormData("color", value.hex)} />
         </Popover>
@@ -88,14 +94,14 @@ export function StateForm(props: TStateForm) {
           value={formData?.description}
           onChange={(e) => handleFormData("description", e.target.value)}
           hasError={(errors && Boolean(errors.description)) || false}
-          className="w-full text-sm min-h-14 resize-none"
+          className="min-h-14 w-full resize-none text-13"
         />
 
-        <div className="flex space-x-2 items-center">
-          <Button onClick={formSubmit} variant="primary" size="sm" disabled={buttonDisabled}>
+        <div className="flex items-center space-x-2">
+          <Button onClick={formSubmit} variant="primary" size="lg" disabled={buttonDisabled}>
             {buttonTitle}
           </Button>
-          <Button type="button" variant="neutral-primary" size="sm" disabled={buttonDisabled} onClick={onCancel}>
+          <Button type="button" variant="secondary" size="lg" disabled={buttonDisabled} onClick={onCancel}>
             Cancel
           </Button>
         </div>
diff --git a/apps/web/core/components/project-states/create-update/index.ts b/apps/web/core/components/project-states/create-update/index.ts
index a295e4a83..8afd9cceb 100644
--- a/apps/web/core/components/project-states/create-update/index.ts
+++ b/apps/web/core/components/project-states/create-update/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./create";
 export * from "./update";
 export * from "./form";
diff --git a/apps/web/core/components/project-states/create-update/update.tsx b/apps/web/core/components/project-states/create-update/update.tsx
index a71e913e9..9b91a1b2f 100644
--- a/apps/web/core/components/project-states/create-update/update.tsx
+++ b/apps/web/core/components/project-states/create-update/update.tsx
@@ -1,12 +1,15 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useState } from "react";
 import { observer } from "mobx-react";
-import { STATE_TRACKER_EVENTS } from "@plane/constants";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { IState, TStateOperationsCallbacks } from "@plane/types";
 // components
 import { StateForm } from "@/components/project-states";
-// hooks
-import { captureError, captureSuccess } from "@/helpers/event-tracker.helper";
 
 type TStateUpdate = {
   state: IState;
@@ -16,7 +19,7 @@ type TStateUpdate = {
 };
 
 export const StateUpdate = observer(function StateUpdate(props: TStateUpdate) {
-  const { state, updateStateCallback, shouldTrackEvents, handleClose } = props;
+  const { state, updateStateCallback, handleClose } = props;
   // states
   const [loader, setLoader] = useState(false);
 
@@ -30,15 +33,6 @@ export const StateUpdate = observer(function StateUpdate(props: TStateUpdate) {
 
     try {
       await updateStateCallback(state.id, formData);
-      if (shouldTrackEvents) {
-        captureSuccess({
-          eventName: STATE_TRACKER_EVENTS.update,
-          payload: {
-            state_group: state.group,
-            id: state.id,
-          },
-        });
-      }
       setToast({
         type: TOAST_TYPE.SUCCESS,
         title: "Success!",
@@ -61,15 +55,6 @@ export const StateUpdate = observer(function StateUpdate(props: TStateUpdate) {
           title: "Error!",
           message: "State could not be updated. Please try again.",
         });
-        if (shouldTrackEvents) {
-          captureError({
-            eventName: STATE_TRACKER_EVENTS.update,
-            payload: {
-              state_group: state.group,
-              id: state.id,
-            },
-          });
-        }
         return { status: "error" };
       }
     }
diff --git a/apps/web/core/components/project-states/group-item.tsx b/apps/web/core/components/project-states/group-item.tsx
index 7d4bc9b15..f5c438ac1 100644
--- a/apps/web/core/components/project-states/group-item.tsx
+++ b/apps/web/core/components/project-states/group-item.tsx
@@ -1,10 +1,16 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useState, useRef } from "react";
 import { observer } from "mobx-react";
-import { Plus } from "lucide-react";
+
 // plane imports
 import { EIconSize, STATE_TRACKER_ELEMENTS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { StateGroupIcon, ChevronDownIcon } from "@plane/propel/icons";
+import { PlusIcon, StateGroupIcon, ChevronDownIcon } from "@plane/propel/icons";
 import type { IState, TStateGroups, TStateOperationsCallbacks } from "@plane/types";
 import { cn } from "@plane/utils";
 // components
@@ -50,39 +56,36 @@ export const GroupItem = observer(function GroupItem(props: TGroupItem) {
 
   return (
     <div
-      className={cn(
-        "space-y-1 border border-custom-border-200 rounded bg-custom-background-90 transition-all p-2",
-        groupItemClassName
-      )}
+      className={cn("space-y-1 rounded-sm border border-subtle bg-surface-2 p-2 transition-all", groupItemClassName)}
       ref={dropElementRef}
     >
-      <div className="flex justify-between items-center gap-2">
+      <div className="flex items-center justify-between gap-2">
         <div
-          className="w-full flex items-center cursor-pointer py-1"
+          className="flex w-full cursor-pointer items-center py-1"
           onClick={() => (!currentStateExpanded ? handleExpand(groupKey) : handleGroupCollapse(groupKey))}
         >
           <div
             className={cn(
-              "flex-shrink-0 w-5 h-5 rounded flex justify-center items-center overflow-hidden transition-all",
+              "flex h-5 w-5 flex-shrink-0 items-center justify-center overflow-hidden rounded-sm transition-all",
               {
                 "rotate-0": currentStateExpanded,
                 "-rotate-90": !currentStateExpanded,
               }
             )}
           >
-            <ChevronDownIcon className="w-4 h-4" />
+            <ChevronDownIcon className="h-4 w-4" />
           </div>
-          <div className="flex-shrink-0 w-6 h-6 rounded flex justify-center items-center overflow-hidden">
+          <div className="flex h-6 w-6 flex-shrink-0 items-center justify-center overflow-hidden rounded-sm">
             <StateGroupIcon stateGroup={groupKey} size={EIconSize.XL} />
           </div>
-          <div className="text-base font-medium text-custom-text-200 capitalize px-1">{groupKey}</div>
+          <div className="px-1 text-14 font-medium text-secondary capitalize">{groupKey}</div>
         </div>
         <button
           type="button"
           data-ph-element={STATE_TRACKER_ELEMENTS.STATE_GROUP_ADD_BUTTON}
           className={cn(
-            "flex-shrink-0 w-6 h-6 rounded flex justify-center items-center overflow-hidden transition-colors hover:bg-custom-background-80 cursor-pointer text-custom-primary-100/80 hover:text-custom-primary-100",
-            (!isEditable || createState) && "cursor-not-allowed text-custom-text-400 hover:text-custom-text-400"
+            "flex h-6 w-6 flex-shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-sm text-accent-primary/80 transition-colors hover:bg-layer-1 hover:text-accent-primary",
+            (!isEditable || createState) && "cursor-not-allowed text-placeholder hover:text-placeholder"
           )}
           onClick={() => {
             if (!createState) {
@@ -92,12 +95,12 @@ export const GroupItem = observer(function GroupItem(props: TGroupItem) {
           }}
           disabled={!isEditable || createState}
         >
-          <Plus className="w-4 h-4" />
+          <PlusIcon className="h-4 w-4" />
         </button>
       </div>
 
       {shouldShowEmptyState && (
-        <div className="flex flex-col justify-center items-center h-full py-4 text-sm text-custom-text-300">
+        <div className="flex h-full flex-col items-center justify-center py-4 text-13 text-tertiary">
           <div>{t("project_settings.states.empty_state.title", { groupKey })}</div>
           {isEditable && <div>{t("project_settings.states.empty_state.description")}</div>}
         </div>
diff --git a/apps/web/core/components/project-states/group-list.tsx b/apps/web/core/components/project-states/group-list.tsx
index 6490340ab..eec413d79 100644
--- a/apps/web/core/components/project-states/group-list.tsx
+++ b/apps/web/core/components/project-states/group-list.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useState } from "react";
 import { observer } from "mobx-react";
 // plane imports
diff --git a/apps/web/core/components/project-states/index.ts b/apps/web/core/components/project-states/index.ts
index 22e130d6e..58dbbc48b 100644
--- a/apps/web/core/components/project-states/index.ts
+++ b/apps/web/core/components/project-states/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./root";
 
 export * from "./group-list";
diff --git a/apps/web/core/components/project-states/loader.tsx b/apps/web/core/components/project-states/loader.tsx
index 2cb7b3f82..876110c8e 100644
--- a/apps/web/core/components/project-states/loader.tsx
+++ b/apps/web/core/components/project-states/loader.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { Loader } from "@plane/ui";
 
 export function ProjectStateLoader() {
diff --git a/apps/web/core/components/project-states/options/delete.tsx b/apps/web/core/components/project-states/options/delete.tsx
index b9e3d17f9..65f4b4125 100644
--- a/apps/web/core/components/project-states/options/delete.tsx
+++ b/apps/web/core/components/project-states/options/delete.tsx
@@ -1,7 +1,12 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useState } from "react";
 import { observer } from "mobx-react";
 import { Loader } from "lucide-react";
-import { STATE_TRACKER_EVENTS, STATE_TRACKER_ELEMENTS } from "@plane/constants";
 import { CloseIcon } from "@plane/propel/icons";
 // plane imports
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
@@ -10,18 +15,17 @@ import type { IState, TStateOperationsCallbacks } from "@plane/types";
 import { AlertModalCore } from "@plane/ui";
 import { cn } from "@plane/utils";
 // hooks
-import { captureError, captureSuccess } from "@/helpers/event-tracker.helper";
 import { usePlatformOS } from "@/hooks/use-platform-os";
 
 type TStateDelete = {
   totalStates: number;
   state: IState;
   deleteStateCallback: TStateOperationsCallbacks["deleteState"];
-  shouldTrackEvents: boolean;
+  shouldTrackEvents?: boolean;
 };
 
 export const StateDelete = observer(function StateDelete(props: TStateDelete) {
-  const { totalStates, state, deleteStateCallback, shouldTrackEvents } = props;
+  const { totalStates, state, deleteStateCallback } = props;
   // hooks
   const { isMobile } = usePlatformOS();
   // states
@@ -37,26 +41,9 @@ export const StateDelete = observer(function StateDelete(props: TStateDelete) {
 
     try {
       await deleteStateCallback(state.id);
-      if (shouldTrackEvents) {
-        captureSuccess({
-          eventName: STATE_TRACKER_EVENTS.delete,
-          payload: {
-            id: state.id,
-          },
-        });
-      }
-
       setIsDelete(false);
     } catch (error) {
       const errorStatus = error as { status: number; data: { error: string } };
-      if (shouldTrackEvents) {
-        captureError({
-          eventName: STATE_TRACKER_EVENTS.delete,
-          payload: {
-            id: state.id,
-          },
-        });
-      }
       if (errorStatus.status === 400) {
         setToast({
           type: TOAST_TYPE.ERROR,
@@ -85,9 +72,8 @@ export const StateDelete = observer(function StateDelete(props: TStateDelete) {
         title="Delete State"
         content={
           <>
-            Are you sure you want to delete state-{" "}
-            <span className="font-medium text-custom-text-100">{state?.name}</span>? All of the data related to the
-            state will be permanently removed. This action cannot be undone.
+            Are you sure you want to delete state- <span className="font-medium text-primary">{state?.name}</span>? All
+            of the data related to the state will be permanently removed. This action cannot be undone.
           </>
         }
       />
@@ -95,14 +81,11 @@ export const StateDelete = observer(function StateDelete(props: TStateDelete) {
       <button
         type="button"
         className={cn(
-          "flex-shrink-0 w-5 h-5 rounded flex justify-center items-center overflow-hidden transition-colors cursor-pointer focus:outline-none",
-          isDeleteDisabled
-            ? "bg-custom-background-90 text-custom-text-200"
-            : "text-red-500 hover:bg-custom-background-80"
+          "flex h-5 w-5 flex-shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-sm transition-colors focus:outline-none",
+          isDeleteDisabled ? "bg-surface-2 text-secondary" : "text-danger-primary hover:bg-layer-1"
         )}
         disabled={isDeleteDisabled}
         onClick={() => setIsDeleteModal(true)}
-        data-ph-element={STATE_TRACKER_ELEMENTS.STATE_LIST_DELETE_BUTTON}
       >
         <Tooltip
           tooltipContent={
@@ -112,7 +95,7 @@ export const StateDelete = observer(function StateDelete(props: TStateDelete) {
           disabled={!isDeleteDisabled}
           className="focus:outline-none"
         >
-          {isDelete ? <Loader className="w-3.5 h-3.5 text-custom-text-200" /> : <CloseIcon className="w-3.5 h-3.5" />}
+          {isDelete ? <Loader className="h-3.5 w-3.5 text-secondary" /> : <CloseIcon className="h-3.5 w-3.5" />}
         </Tooltip>
       </button>
     </>
diff --git a/apps/web/core/components/project-states/options/index.ts b/apps/web/core/components/project-states/options/index.ts
index 6aad9566c..77e6d70f0 100644
--- a/apps/web/core/components/project-states/options/index.ts
+++ b/apps/web/core/components/project-states/options/index.ts
@@ -1,2 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./mark-as-default";
 export * from "./delete";
diff --git a/apps/web/core/components/project-states/options/mark-as-default.tsx b/apps/web/core/components/project-states/options/mark-as-default.tsx
index 2ff314e6f..de3e0b143 100644
--- a/apps/web/core/components/project-states/options/mark-as-default.tsx
+++ b/apps/web/core/components/project-states/options/mark-as-default.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useState } from "react";
 import { observer } from "mobx-react";
 // plane imports
@@ -31,8 +37,8 @@ export const StateMarksAsDefault = observer(function StateMarksAsDefault(props:
   return (
     <button
       className={cn(
-        "text-xs whitespace-nowrap transition-colors",
-        isDefault ? "text-custom-text-300" : "text-custom-text-200 hover:text-custom-text-100"
+        "text-11 whitespace-nowrap transition-colors",
+        isDefault ? "text-tertiary" : "text-secondary hover:text-primary"
       )}
       disabled={isDefault || isLoading}
       onClick={handleMarkAsDefault}
diff --git a/apps/web/core/components/project-states/root.tsx b/apps/web/core/components/project-states/root.tsx
index d9dbfc976..20e0dd393 100644
--- a/apps/web/core/components/project-states/root.tsx
+++ b/apps/web/core/components/project-states/root.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useMemo } from "react";
 import { observer } from "mobx-react";
 import useSWR from "swr";
@@ -62,13 +67,11 @@ export const ProjectStateRoot = observer(function ProjectStateRoot(props: TProje
   if (!groupedProjectStates) return <ProjectStateLoader />;
 
   return (
-    <div className="py-3">
-      <GroupList
-        groupedStates={groupedProjectStates}
-        stateOperationsCallbacks={stateOperationsCallbacks}
-        isEditable={isEditable}
-        shouldTrackEvents
-      />
-    </div>
+    <GroupList
+      groupedStates={groupedProjectStates}
+      stateOperationsCallbacks={stateOperationsCallbacks}
+      isEditable={isEditable}
+      shouldTrackEvents
+    />
   );
 });
diff --git a/apps/web/core/components/project-states/state-delete-modal.tsx b/apps/web/core/components/project-states/state-delete-modal.tsx
index 5caf4ad7d..c1b04d455 100644
--- a/apps/web/core/components/project-states/state-delete-modal.tsx
+++ b/apps/web/core/components/project-states/state-delete-modal.tsx
@@ -1,15 +1,18 @@
-import React, { useState } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
-// types
-import { STATE_TRACKER_EVENTS } from "@plane/constants";
+// Plane imports
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { IState } from "@plane/types";
 // ui
 import { AlertModalCore } from "@plane/ui";
-// constants
 // hooks
-import { captureError, captureSuccess } from "@/helpers/event-tracker.helper";
 import { useProjectState } from "@/hooks/store/use-project-state";
 
 type TStateDeleteModal = {
@@ -38,12 +41,6 @@ export const StateDeleteModal = observer(function StateDeleteModal(props: TState
 
     await deleteState(workspaceSlug.toString(), data.project_id, data.id)
       .then(() => {
-        captureSuccess({
-          eventName: STATE_TRACKER_EVENTS.delete,
-          payload: {
-            id: data.id,
-          },
-        });
         handleClose();
       })
       .catch((err) => {
@@ -60,12 +57,6 @@ export const StateDeleteModal = observer(function StateDeleteModal(props: TState
             title: "Error!",
             message: "State could not be deleted. Please try again.",
           });
-        captureError({
-          eventName: STATE_TRACKER_EVENTS.delete,
-          payload: {
-            id: data.id,
-          },
-        });
       })
       .finally(() => {
         setIsDeleteLoading(false);
@@ -81,8 +72,8 @@ export const StateDeleteModal = observer(function StateDeleteModal(props: TState
       title="Delete State"
       content={
         <>
-          Are you sure you want to delete state- <span className="font-medium text-custom-text-100">{data?.name}</span>?
-          All of the data related to the state will be permanently removed. This action cannot be undone.
+          Are you sure you want to delete state- <span className="font-medium text-primary">{data?.name}</span>? All of
+          the data related to the state will be permanently removed. This action cannot be undone.
         </>
       }
     />
diff --git a/apps/web/core/components/project-states/state-item-title.tsx b/apps/web/core/components/project-states/state-item-title.tsx
index 120151728..b3fce44d7 100644
--- a/apps/web/core/components/project-states/state-item-title.tsx
+++ b/apps/web/core/components/project-states/state-item-title.tsx
@@ -1,9 +1,15 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { SetStateAction } from "react";
 import { observer } from "mobx-react";
-import { GripVertical, Pencil } from "lucide-react";
-// plane imports
+import { GripVertical } from "lucide-react";
 import { EIconSize, STATE_TRACKER_ELEMENTS } from "@plane/constants";
-import { StateGroupIcon } from "@plane/propel/icons";
+// plane imports
+import { EditIcon, StateGroupIcon } from "@plane/propel/icons";
 import type { IState, TStateOperationsCallbacks } from "@plane/types";
 // local imports
 import { useProjectState } from "@/hooks/store/use-project-state";
@@ -37,12 +43,12 @@ export const StateItemTitle = observer(function StateItemTitle(props: TStateItem
   const percentage = statePercentage ? statePercentage / 100 : undefined;
 
   return (
-    <div className="flex items-center gap-2 w-full justify-between">
+    <div className="flex w-full items-center justify-between gap-2">
       <div className="flex items-center gap-1 px-1">
         {/* draggable indicator */}
         {!disabled && stateCount != 1 && (
-          <div className="flex-shrink-0 w-3 h-3 rounded-sm absolute -left-1.5 hidden group-hover:flex justify-center items-center transition-colors bg-custom-background-90 cursor-pointer text-custom-text-200 hover:text-custom-text-100">
-            <GripVertical className="w-3 h-3" />
+          <div className="absolute -left-1.5 hidden h-3 w-3 flex-shrink-0 cursor-pointer items-center justify-center rounded-xs bg-surface-2 text-secondary transition-colors group-hover:flex hover:text-primary">
+            <GripVertical className="h-3 w-3" />
           </div>
         )}
         {/* state icon */}
@@ -50,15 +56,15 @@ export const StateItemTitle = observer(function StateItemTitle(props: TStateItem
           <StateGroupIcon stateGroup={state.group} color={state.color} size={EIconSize.XL} percentage={percentage} />
         </div>
         {/* state title and description */}
-        <div className="text-sm px-2 min-h-5">
-          <h6 className="text-sm font-medium">{state.name}</h6>
-          {shouldShowDescription && <p className="text-xs text-custom-text-200">{state.description}</p>}
+        <div className="min-h-5 px-2 text-13">
+          <h6 className="text-13 font-medium">{state.name}</h6>
+          {shouldShowDescription && <p className="text-11 text-secondary">{state.description}</p>}
         </div>
       </div>
       {!disabled && (
-        <div className="hidden group-hover:flex items-center gap-2">
+        <div className="hidden items-center gap-2 group-hover:flex">
           {/* state mark as default option */}
-          <div className="flex-shrink-0 text-xs transition-all">
+          <div className="flex-shrink-0 text-11 transition-all">
             <StateMarksAsDefault
               stateId={state.id}
               isDefault={state.default ? true : false}
@@ -68,11 +74,11 @@ export const StateItemTitle = observer(function StateItemTitle(props: TStateItem
           {/* state edit options */}
           <div className="flex items-center gap-1 transition-all">
             <button
-              className="flex-shrink-0 w-5 h-5 rounded flex justify-center items-center overflow-hidden transition-colors hover:bg-custom-background-80 cursor-pointer text-custom-text-200 hover:text-custom-text-100"
+              className="flex h-5 w-5 flex-shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-sm text-secondary transition-colors hover:bg-layer-1 hover:text-primary"
               onClick={() => setUpdateStateModal(true)}
               data-ph-element={STATE_TRACKER_ELEMENTS.STATE_LIST_EDIT_BUTTON}
             >
-              <Pencil className="w-3 h-3" />
+              <EditIcon className="h-3 w-3" />
             </button>
             <StateDelete
               totalStates={stateCount}
diff --git a/apps/web/core/components/project-states/state-item.tsx b/apps/web/core/components/project-states/state-item.tsx
index 19f1e1b6c..9caeef1f8 100644
--- a/apps/web/core/components/project-states/state-item.tsx
+++ b/apps/web/core/components/project-states/state-item.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { Fragment, useCallback, useEffect, useRef, useState } from "react";
 import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
 import { draggable, dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
@@ -129,7 +135,7 @@ export const StateItem = observer(function StateItem(props: TStateItem) {
       <div
         ref={draggableElementRef}
         className={cn(
-          "relative border border-custom-border-100 bg-custom-background-100 py-3 px-3.5 rounded group",
+          "group relative rounded-sm border border-subtle bg-surface-1 px-3.5 py-3",
           isDragging ? `opacity-50` : `opacity-100`,
           totalStates === 1 ? `cursor-auto` : `cursor-grab`,
           stateItemClassName
diff --git a/apps/web/core/components/project-states/state-list.tsx b/apps/web/core/components/project-states/state-list.tsx
index e379eaf64..0035b5d29 100644
--- a/apps/web/core/components/project-states/state-list.tsx
+++ b/apps/web/core/components/project-states/state-list.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import type { IState, TStateGroups, TStateOperationsCallbacks } from "@plane/types";
 // components
diff --git a/apps/web/core/components/project/applied-filters/access.tsx b/apps/web/core/components/project/applied-filters/access.tsx
index 87fb97c0d..15f5b59cc 100644
--- a/apps/web/core/components/project/applied-filters/access.tsx
+++ b/apps/web/core/components/project/applied-filters/access.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 // constants
 import { NETWORK_CHOICES } from "@plane/constants";
@@ -19,12 +25,12 @@ export const AppliedAccessFilters = observer(function AppliedAccessFilters(props
       {values.map((status) => {
         const accessDetails = NETWORK_CHOICES.find((s) => `${s.key}` === status);
         return (
-          <div key={status} className="flex items-center gap-1 rounded px-1.5 py-1 text-xs bg-custom-background-80">
+          <div key={status} className="flex items-center gap-1 rounded-sm bg-layer-1 px-1.5 py-1 text-11">
             {accessDetails && t(accessDetails?.i18n_label)}
             {editable && (
               <button
                 type="button"
-                className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
+                className="grid place-items-center text-tertiary hover:text-secondary"
                 onClick={() => handleRemove(status)}
               >
                 <CloseIcon height={10} width={10} strokeWidth={2} />
diff --git a/apps/web/core/components/project/applied-filters/date.tsx b/apps/web/core/components/project/applied-filters/date.tsx
index 8eb1c2b33..ec7610548 100644
--- a/apps/web/core/components/project/applied-filters/date.tsx
+++ b/apps/web/core/components/project/applied-filters/date.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import { PROJECT_CREATED_AT_FILTER_OPTIONS } from "@plane/constants";
 import { CloseIcon } from "@plane/propel/icons";
@@ -36,12 +42,12 @@ export const AppliedDateFilters = observer(function AppliedDateFilters(props: Pr
   return (
     <>
       {values.map((date) => (
-        <div key={date} className="flex items-center gap-1 rounded bg-custom-background-80 px-1.5 py-1 text-xs">
+        <div key={date} className="flex items-center gap-1 rounded-sm bg-layer-1 px-1.5 py-1 text-11">
           <span className="normal-case">{getDateLabel(date)}</span>
           {editable && (
             <button
               type="button"
-              className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
+              className="grid place-items-center text-tertiary hover:text-secondary"
               onClick={() => handleRemove(date)}
             >
               <CloseIcon height={10} width={10} strokeWidth={2} />
diff --git a/apps/web/core/components/project/applied-filters/index.ts b/apps/web/core/components/project/applied-filters/index.ts
index 1efe34c51..d98033459 100644
--- a/apps/web/core/components/project/applied-filters/index.ts
+++ b/apps/web/core/components/project/applied-filters/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./root";
diff --git a/apps/web/core/components/project/applied-filters/members.tsx b/apps/web/core/components/project/applied-filters/members.tsx
index 20af0a042..6e7a8b92c 100644
--- a/apps/web/core/components/project/applied-filters/members.tsx
+++ b/apps/web/core/components/project/applied-filters/members.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import { CloseIcon } from "@plane/propel/icons";
 // ui
@@ -28,7 +34,7 @@ export const AppliedMembersFilters = observer(function AppliedMembersFilters(pro
         if (!memberDetails) return null;
 
         return (
-          <div key={memberId} className="flex items-center gap-1 rounded bg-custom-background-80 px-1.5 py-1 text-xs">
+          <div key={memberId} className="flex items-center gap-1 rounded-sm bg-layer-1 px-1.5 py-1 text-11">
             <Avatar
               name={memberDetails.display_name}
               src={getFileURL(memberDetails.avatar_url)}
@@ -39,7 +45,7 @@ export const AppliedMembersFilters = observer(function AppliedMembersFilters(pro
             {editable && (
               <button
                 type="button"
-                className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
+                className="grid place-items-center text-tertiary hover:text-secondary"
                 onClick={() => handleRemove(memberId)}
               >
                 <CloseIcon height={10} width={10} strokeWidth={2} />
diff --git a/apps/web/core/components/project/applied-filters/project-display-filters.tsx b/apps/web/core/components/project/applied-filters/project-display-filters.tsx
index 3ee542aa5..2ca36c807 100644
--- a/apps/web/core/components/project/applied-filters/project-display-filters.tsx
+++ b/apps/web/core/components/project/applied-filters/project-display-filters.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 // icons
 // types
@@ -22,12 +28,12 @@ export const AppliedProjectDisplayFilters = observer(function AppliedProjectDisp
       {values.map((key) => {
         const filterLabel = PROJECT_DISPLAY_FILTER_OPTIONS.find((s) => s.key === key)?.i18n_label;
         return (
-          <div key={key} className="flex items-center gap-1 rounded px-1.5 py-1 text-xs bg-custom-background-80">
+          <div key={key} className="flex items-center gap-1 rounded-sm bg-layer-1 px-1.5 py-1 text-11">
             {filterLabel && t(filterLabel)}
             {editable && (
               <button
                 type="button"
-                className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
+                className="grid place-items-center text-tertiary hover:text-secondary"
                 onClick={() => handleRemove(key)}
               >
                 <CloseIcon height={10} width={10} strokeWidth={2} />
diff --git a/apps/web/core/components/project/applied-filters/root.tsx b/apps/web/core/components/project/applied-filters/root.tsx
index 24392cd4e..0926b1aba 100644
--- a/apps/web/core/components/project/applied-filters/root.tsx
+++ b/apps/web/core/components/project/applied-filters/root.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useTranslation } from "@plane/i18n";
 import { CloseIcon } from "@plane/propel/icons";
 // plane imports
@@ -55,7 +61,7 @@ export function ProjectAppliedFiltersList(props: Props) {
 
           return (
             <Tag key={filterKey}>
-              <span className="text-xs text-custom-text-300">{replaceUnderscoreIfSnakeCase(filterKey)}</span>
+              <span className="text-11 text-tertiary">{replaceUnderscoreIfSnakeCase(filterKey)}</span>
               {filterKey === "access" && (
                 <AppliedAccessFilters
                   editable={isEditingAllowed}
@@ -80,7 +86,7 @@ export function ProjectAppliedFiltersList(props: Props) {
               {isEditingAllowed && (
                 <button
                   type="button"
-                  className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
+                  className="grid place-items-center text-tertiary hover:text-secondary"
                   onClick={() => handleRemoveFilter(filterKey, null)}
                 >
                   <CloseIcon height={12} width={12} strokeWidth={2} />
@@ -92,7 +98,7 @@ export function ProjectAppliedFiltersList(props: Props) {
         {/* Applied display filters */}
         {appliedDisplayFilters.length > 0 && (
           <Tag key="project_display_filters">
-            <span className="text-xs text-custom-text-300">{t("projects.label", { count: 2 })}</span>
+            <span className="text-11 text-tertiary">{t("projects.label", { count: 2 })}</span>
             <AppliedProjectDisplayFilters
               editable={isEditingAllowed}
               values={appliedDisplayFilters}
@@ -118,7 +124,7 @@ export function ProjectAppliedFiltersList(props: Props) {
             </p>
           }
         >
-          <span className="bg-custom-background-80 rounded-full text-sm font-medium py-1 px-2.5">
+          <span className="rounded-full bg-layer-1 px-2.5 py-1 text-13 font-medium">
             {filteredProjects}/{totalProjects}
           </span>
         </Tooltip>
diff --git a/apps/web/core/components/project/archive-restore-modal.tsx b/apps/web/core/components/project/archive-restore-modal.tsx
new file mode 100644
index 000000000..0f17ce90f
--- /dev/null
+++ b/apps/web/core/components/project/archive-restore-modal.tsx
@@ -0,0 +1,116 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
+// ui
+import { Button } from "@plane/propel/button";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
+// hooks
+import { useProject } from "@/hooks/store/use-project";
+import { useAppRouter } from "@/hooks/use-app-router";
+
+type Props = {
+  workspaceSlug: string;
+
+  projectId: string;
+  isOpen: boolean;
+  onClose: () => void;
+  archive: boolean;
+};
+
+export function ArchiveRestoreProjectModal(props: Props) {
+  const { workspaceSlug, projectId, isOpen, onClose, archive } = props;
+  // router
+  const router = useAppRouter();
+  // states
+  const [isLoading, setIsLoading] = useState(false);
+  // store hooks
+  const { getProjectById, archiveProject, restoreProject } = useProject();
+
+  const projectDetails = getProjectById(projectId);
+  if (!projectDetails) return null;
+
+  const handleClose = () => {
+    setIsLoading(false);
+    onClose();
+  };
+
+  const handleArchiveProject = async () => {
+    setIsLoading(true);
+    await archiveProject(workspaceSlug, projectId)
+      .then(() => {
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
+          title: "Archive success",
+          message: `${projectDetails.name} has been archived successfully`,
+        });
+        onClose();
+        router.push(`/${workspaceSlug}/projects/`);
+        return;
+      })
+      .catch(() =>
+        setToast({
+          type: TOAST_TYPE.ERROR,
+          title: "Error!",
+          message: "Project could not be archived. Please try again.",
+        })
+      )
+      .finally(() => setIsLoading(false));
+  };
+
+  const handleRestoreProject = async () => {
+    setIsLoading(true);
+    await restoreProject(workspaceSlug, projectId)
+      .then(() => {
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
+          title: "Restore success",
+          message: `You can find ${projectDetails.name} in your projects.`,
+        });
+        onClose();
+        router.push(`/${workspaceSlug}/projects/`);
+        return;
+      })
+      .catch(() =>
+        setToast({
+          type: TOAST_TYPE.ERROR,
+          title: "Error!",
+          message: "Project could not be restored. Please try again.",
+        })
+      )
+      .finally(() => setIsLoading(false));
+  };
+
+  return (
+    <ModalCore isOpen={isOpen} handleClose={handleClose} position={EModalPosition.CENTER} width={EModalWidth.LG}>
+      <div className="px-5 py-4">
+        <h3 className="text-18 font-medium 2xl:text-20">
+          {archive ? "Archive" : "Restore"} {projectDetails.name}
+        </h3>
+        <p className="mt-3 text-13 text-secondary">
+          {archive
+            ? "This project and its work items, cycles, modules, and pages will be archived. Its work items won't appear in search. Only project admins can restore the project."
+            : "Restoring a project will activate it and make it visible to all members of the project. Are you sure you want to continue?"}
+        </p>
+        <div className="mt-3 flex justify-end gap-2">
+          <Button variant="secondary" size="lg" onClick={onClose}>
+            Cancel
+          </Button>
+          <Button
+            variant="primary"
+            size="lg"
+            tabIndex={1}
+            onClick={archive ? handleArchiveProject : handleRestoreProject}
+            loading={isLoading}
+          >
+            {archive ? (isLoading ? "Archiving" : "Archive") : isLoading ? "Restoring" : "Restore"}
+          </Button>
+        </div>
+      </div>
+    </ModalCore>
+  );
+}
diff --git a/apps/web/core/components/project/card-list.tsx b/apps/web/core/components/project/card-list.tsx
index 24efb4802..961045d64 100644
--- a/apps/web/core/components/project/card-list.tsx
+++ b/apps/web/core/components/project/card-list.tsx
@@ -1,13 +1,18 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 // plane imports
-import { EUserPermissionsLevel, EUserPermissions, PROJECT_TRACKER_ELEMENTS } from "@plane/constants";
+import { EUserPermissionsLevel, EUserPermissions } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { EmptyStateDetailed } from "@plane/propel/empty-state";
 import { ContentWrapper } from "@plane/ui";
 // components
 import { calculateTotalFilters } from "@plane/utils";
 import { ProjectsLoader } from "@/components/ui/loader/projects-loader";
-import { captureClick } from "@/helpers/event-tracker.helper";
 // hooks
 import { useCommandPalette } from "@/hooks/store/use-command-palette";
 import { useProject } from "@/hooks/store/use-project";
@@ -62,7 +67,6 @@ export const ProjectCardList = observer(function ProjectCardList(props: TProject
             label: t("workspace_projects.empty_state.general.primary_button.text"),
             onClick: () => {
               toggleCreateProjectModal(true);
-              captureClick({ elementName: PROJECT_TRACKER_ELEMENTS.EMPTY_STATE_CREATE_PROJECT_BUTTON });
             },
             disabled: !canPerformEmptyStateActions,
             variant: "primary",
diff --git a/apps/web/core/components/project/card.tsx b/apps/web/core/components/project/card.tsx
index 6f4061467..c9286d15f 100644
--- a/apps/web/core/components/project/card.tsx
+++ b/apps/web/core/components/project/card.tsx
@@ -1,13 +1,20 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React, { useRef, useState } from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
 import { useParams } from "next/navigation";
-import { ArchiveRestoreIcon, Check, ExternalLink, LinkIcon, Lock, Settings, Trash2, UserPlus } from "lucide-react";
+import { ArchiveRestoreIcon, Settings, UserPlus } from "lucide-react";
 // plane imports
 import { EUserPermissions, EUserPermissionsLevel, IS_FAVORITE_MENU_OPEN } from "@plane/constants";
 import { useLocalStorage } from "@plane/hooks";
 import { Button } from "@plane/propel/button";
 import { Logo } from "@plane/propel/emoji-icon-picker";
+import { LinkIcon, LockIcon, NewTabIcon, TrashIcon, CheckIcon } from "@plane/propel/icons";
 import { setPromiseToast, setToast, TOAST_TYPE } from "@plane/propel/toast";
 import { Tooltip } from "@plane/propel/tooltip";
 import type { IProject } from "@plane/types";
@@ -22,10 +29,10 @@ import { useUserPermissions } from "@/hooks/store/user";
 import { useAppRouter } from "@/hooks/use-app-router";
 import { usePlatformOS } from "@/hooks/use-platform-os";
 // local imports
+import { CoverImage } from "@/components/common/cover-image";
 import { DeleteProjectModal } from "./delete-project-modal";
 import { JoinProjectModal } from "./join-project-modal";
-import { ArchiveRestoreProjectModal } from "./settings/archive-project/archive-restore-modal";
-import { DEFAULT_COVER_IMAGE_URL, getCoverImageDisplayURL } from "@/helpers/cover-image.helper";
+import { ArchiveRestoreProjectModal } from "./archive-restore-modal";
 
 type Props = {
   project: IProject;
@@ -134,7 +141,7 @@ export const ProjectCard = observer(function ProjectCard(props: Props) {
       key: "open-new-tab",
       action: handleOpenInNewTab,
       title: "Open in new tab",
-      icon: ExternalLink,
+      icon: NewTabIcon,
       shouldRender: !isMemberOfProject && !isArchived,
     },
     {
@@ -155,7 +162,7 @@ export const ProjectCard = observer(function ProjectCard(props: Props) {
       key: "delete",
       action: () => setDeleteProjectModal(true),
       title: "Delete",
-      icon: Trash2,
+      icon: TrashIcon,
       shouldRender: isArchived && hasAdminRole,
     },
   ];
@@ -198,29 +205,31 @@ export const ProjectCard = observer(function ProjectCard(props: Props) {
           }
         }}
         data-prevent-progress={!isMemberOfProject || isArchived}
-        className="flex flex-col rounded border border-custom-border-200 bg-custom-background-100"
+        className={cn(
+          "group/project-card flex w-full flex-col justify-between overflow-hidden rounded-lg border border-subtle bg-layer-2 transition-all duration-300 hover:border-strong hover:shadow-raised-200"
+        )}
       >
         <ContextMenu parentRef={projectCardRef} items={MENU_ITEMS} />
-        <div className="relative h-[118px] w-full rounded-t ">
+        <div className="relative h-[118px] w-full rounded-t">
           <div className="absolute inset-0 z-[1] bg-gradient-to-t from-black/60 to-transparent" />
 
-          <img
-            src={getCoverImageDisplayURL(project.cover_image_url, DEFAULT_COVER_IMAGE_URL)}
+          <CoverImage
+            src={project.cover_image_url}
             alt={project.name}
-            className="absolute left-0 top-0 h-full w-full rounded-t object-cover"
+            className="absolute top-0 left-0 h-full w-full rounded-t"
           />
 
           <div className="absolute bottom-4 z-[1] flex h-10 w-full items-center justify-between gap-3 px-4">
             <div className="flex flex-grow items-center gap-2.5 truncate">
-              <div className="h-9 w-9 flex-shrink-0 grid place-items-center rounded bg-white/10">
+              <div className="grid h-9 w-9 flex-shrink-0 place-items-center rounded-sm bg-white/10">
                 <Logo logo={project.logo_props} size={18} />
               </div>
 
               <div className="flex w-full flex-col justify-between gap-0.5 truncate">
-                <h3 className="truncate font-semibold text-white">{project.name}</h3>
+                <h3 className="truncate font-semibold text-on-color">{project.name}</h3>
                 <span className="flex items-center gap-1.5">
-                  <p className="text-xs font-medium text-white">{project.identifier} </p>
-                  {project.network === 0 && <Lock className="h-2.5 w-2.5 text-white " />}
+                  <p className="text-11 font-medium text-on-color">{project.identifier} </p>
+                  {project.network === 0 && <LockIcon className="h-2.5 w-2.5 text-on-color" />}
                 </span>
               </div>
             </div>
@@ -228,20 +237,20 @@ export const ProjectCard = observer(function ProjectCard(props: Props) {
             {!isArchived && (
               <div data-prevent-progress className="flex h-full flex-shrink-0 items-center gap-2">
                 <button
-                  className="flex h-6 w-6 items-center justify-center rounded bg-white/10"
+                  className="flex h-6 w-6 items-center justify-center rounded-sm bg-white/10"
                   onClick={(e) => {
                     e.stopPropagation();
                     e.preventDefault();
                     handleCopyText();
                   }}
                 >
-                  <LinkIcon className="h-3 w-3 text-white" />
+                  <LinkIcon className="h-3 w-3 text-on-color" />
                 </button>
                 {shouldRenderFavorite && (
                   <FavoriteStar
-                    buttonClassName="h-6 w-6 bg-white/10 rounded"
+                    buttonClassName="h-6 w-6 bg-white/10 rounded-sm"
                     iconClassName={cn("h-3 w-3", {
-                      "text-white": !project.is_favorite,
+                      "text-on-color": !project.is_favorite,
                     })}
                     onClick={(e) => {
                       e.preventDefault();
@@ -258,11 +267,11 @@ export const ProjectCard = observer(function ProjectCard(props: Props) {
         </div>
 
         <div
-          className={cn("flex h-[104px] w-full flex-col justify-between rounded-b p-4", {
+          className={cn("flex h-[104px] w-full flex-col justify-between rounded-b-sm p-4", {
             "opacity-90": isArchived,
           })}
         >
-          <p className="line-clamp-2 break-words text-sm text-custom-text-300">
+          <p className="line-clamp-2 text-13 break-words text-tertiary">
             {project.description && project.description.trim() !== ""
               ? project.description
               : `Created on ${renderFormattedDate(project.created_at)}`}
@@ -278,7 +287,7 @@ export const ProjectCard = observer(function ProjectCard(props: Props) {
                 position="top"
               >
                 {projectMembersIds && projectMembersIds.length > 0 ? (
-                  <div className="flex cursor-pointer items-center gap-2 text-custom-text-200">
+                  <div className="flex cursor-pointer items-center gap-2 text-secondary">
                     <AvatarGroup showTooltip={false}>
                       {projectMembersIds.map((memberId) => {
                         const member = getUserDetails(memberId);
@@ -290,16 +299,16 @@ export const ProjectCard = observer(function ProjectCard(props: Props) {
                     </AvatarGroup>
                   </div>
                 ) : (
-                  <span className="text-sm italic text-custom-text-400">No Member Yet</span>
+                  <span className="text-13 text-placeholder italic">No Member Yet</span>
                 )}
               </Tooltip>
-              {isArchived && <div className="text-xs text-custom-text-400 font-medium">Archived</div>}
+              {isArchived && <div className="text-11 font-medium text-placeholder">Archived</div>}
             </div>
             {isArchived ? (
               hasAdminRole && (
                 <div className="flex items-center justify-center gap-2">
                   <div
-                    className="flex items-center justify-center text-xs text-custom-text-400 font-medium hover:text-custom-text-200"
+                    className="flex items-center justify-center text-11 font-medium text-placeholder hover:text-secondary"
                     onClick={(e) => {
                       e.preventDefault();
                       e.stopPropagation();
@@ -312,14 +321,14 @@ export const ProjectCard = observer(function ProjectCard(props: Props) {
                     </div>
                   </div>
                   <div
-                    className="flex items-center justify-center text-xs text-custom-text-400 font-medium hover:text-custom-text-200"
+                    className="flex items-center justify-center text-11 font-medium text-placeholder hover:text-secondary"
                     onClick={(e) => {
                       e.preventDefault();
                       e.stopPropagation();
                       setDeleteProjectModal(true);
                     }}
                   >
-                    <Trash2 className="h-3.5 w-3.5" />
+                    <TrashIcon className="h-3.5 w-3.5" />
                   </div>
                 </div>
               )
@@ -328,7 +337,7 @@ export const ProjectCard = observer(function ProjectCard(props: Props) {
                 {isMemberOfProject &&
                   (hasAdminRole || hasMemberRole ? (
                     <Link
-                      className="flex items-center justify-center rounded p-1 text-custom-text-400 hover:bg-custom-background-80 hover:text-custom-text-200"
+                      className="flex items-center justify-center rounded-sm p-1 text-placeholder hover:bg-layer-1 hover:text-secondary"
                       onClick={(e) => {
                         e.stopPropagation();
                       }}
@@ -337,15 +346,15 @@ export const ProjectCard = observer(function ProjectCard(props: Props) {
                       <Settings className="h-3.5 w-3.5" />
                     </Link>
                   ) : (
-                    <span className="flex items-center gap-1 text-custom-text-400 text-sm">
-                      <Check className="h-3.5 w-3.5" />
+                    <span className="flex items-center gap-1 text-13 text-placeholder">
+                      <CheckIcon className="h-3.5 w-3.5" />
                       Joined
                     </span>
                   ))}
                 {!isMemberOfProject && (
                   <div className="flex items-center">
                     <Button
-                      variant="link-primary"
+                      variant="link"
                       className="!p-0 font-semibold"
                       onClick={(e) => {
                         e.preventDefault();
diff --git a/apps/web/core/components/project/confirm-project-member-remove.tsx b/apps/web/core/components/project/confirm-project-member-remove.tsx
index 697d456e0..52a7c3060 100644
--- a/apps/web/core/components/project/confirm-project-member-remove.tsx
+++ b/apps/web/core/components/project/confirm-project-member-remove.tsx
@@ -1,13 +1,18 @@
-import React, { useState } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 import { AlertTriangle } from "lucide-react";
-// headless ui
-import { Dialog, Transition } from "@headlessui/react";
 // types
 import { Button } from "@plane/propel/button";
 import type { IUserLite } from "@plane/types";
 // ui
+import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
 // hooks
 import { useProject } from "@/hooks/store/use-project";
 import { useUser } from "@/hooks/store/user";
@@ -48,80 +53,42 @@ export const ConfirmProjectMemberRemove = observer(function ConfirmProjectMember
   const currentProjectDetails = getProjectById(projectId.toString());
 
   return (
-    <Transition.Root show={isOpen} as={React.Fragment}>
-      <Dialog as="div" className="relative z-20" onClose={handleClose}>
-        <Transition.Child
-          as={React.Fragment}
-          enter="ease-out duration-300"
-          enterFrom="opacity-0"
-          enterTo="opacity-100"
-          leave="ease-in duration-200"
-          leaveFrom="opacity-100"
-          leaveTo="opacity-0"
-        >
-          <div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
-        </Transition.Child>
-
-        <div className="fixed inset-0 z-20 overflow-y-auto">
-          <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
-            <Transition.Child
-              as={React.Fragment}
-              enter="ease-out duration-300"
-              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-              enterTo="opacity-100 translate-y-0 sm:scale-100"
-              leave="ease-in duration-200"
-              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-            >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-custom-background-100 text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-[40rem]">
-                <div className="bg-custom-background-100 px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
-                  <div className="sm:flex sm:items-start">
-                    <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
-                      <AlertTriangle className="h-6 w-6 text-red-600" aria-hidden="true" />
-                    </div>
-                    <div className="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
-                      <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-custom-text-100">
-                        {isCurrentUser ? "Leave project?" : `Remove ${data?.display_name}?`}
-                      </Dialog.Title>
-                      <div className="mt-2">
-                        <p className="text-sm text-custom-text-200">
-                          {isCurrentUser ? (
-                            <>
-                              Are you sure you want to leave the{" "}
-                              <span className="font-bold">{currentProjectDetails?.name}</span> project? You will be able
-                              to join the project if invited again or if it{"'"}s public.
-                            </>
-                          ) : (
-                            <>
-                              Are you sure you want to remove member-{" "}
-                              <span className="font-bold">{data?.display_name}</span>? They will no longer have access
-                              to this project. This action cannot be undone.
-                            </>
-                          )}
-                        </p>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-                <div className="flex justify-end gap-2 p-4 sm:px-6">
-                  <Button variant="neutral-primary" size="sm" onClick={handleClose}>
-                    Cancel
-                  </Button>
-                  <Button variant="danger" size="sm" tabIndex={1} onClick={handleDeletion} loading={isDeleteLoading}>
-                    {isCurrentUser
-                      ? isDeleteLoading
-                        ? "Leaving..."
-                        : "Leave"
-                      : isDeleteLoading
-                        ? "Removing..."
-                        : "Remove"}
-                  </Button>
-                </div>
-              </Dialog.Panel>
-            </Transition.Child>
+    <ModalCore isOpen={isOpen} handleClose={handleClose} position={EModalPosition.CENTER} width={EModalWidth.XXL}>
+      <div className="bg-surface-1 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+        <div className="sm:flex sm:items-start">
+          <div className="mx-auto flex h-12 w-12 shrink-0 items-center justify-center rounded-full bg-danger-subtle sm:mx-0 sm:h-10 sm:w-10">
+            <AlertTriangle className="h-6 w-6 text-danger-primary" aria-hidden="true" />
+          </div>
+          <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+            <h3 className="text-16 leading-6 font-medium text-primary">
+              {isCurrentUser ? "Leave project?" : `Remove ${data?.display_name}?`}
+            </h3>
+            <div className="mt-2">
+              <p className="text-13 text-secondary">
+                {isCurrentUser ? (
+                  <>
+                    Are you sure you want to leave the <span className="font-bold">{currentProjectDetails?.name}</span>{" "}
+                    project? You will be able to join the project if invited again or if it{"'"}s public.
+                  </>
+                ) : (
+                  <>
+                    Are you sure you want to remove member- <span className="font-bold">{data?.display_name}</span>?
+                    They will no longer have access to this project. This action cannot be undone.
+                  </>
+                )}
+              </p>
+            </div>
           </div>
         </div>
-      </Dialog>
-    </Transition.Root>
+      </div>
+      <div className="flex justify-end gap-2 p-4 sm:px-6">
+        <Button variant="secondary" size="lg" onClick={handleClose}>
+          Cancel
+        </Button>
+        <Button variant="error-fill" size="lg" tabIndex={1} onClick={handleDeletion} loading={isDeleteLoading}>
+          {isCurrentUser ? (isDeleteLoading ? "Leaving..." : "Leave") : isDeleteLoading ? "Removing..." : "Remove"}
+        </Button>
+      </div>
+    </ModalCore>
   );
 });
diff --git a/apps/web/core/components/project/create-project-modal.tsx b/apps/web/core/components/project/create-project-modal.tsx
index 46e102703..c1c9a31e7 100644
--- a/apps/web/core/components/project/create-project-modal.tsx
+++ b/apps/web/core/components/project/create-project-modal.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useEffect, useState } from "react";
 import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
 import { getAssetIdFromUrl, checkURLValidity } from "@plane/utils";
@@ -60,7 +66,7 @@ export function CreateProjectModal(props: Props) {
   });
 
   return (
-    <ModalCore isOpen={isOpen} position={EModalPosition.TOP} width={EModalWidth.XXL}>
+    <ModalCore isOpen={isOpen} position={EModalPosition.TOP} width={EModalWidth.XXXXL}>
       {currentStep === EProjectCreationSteps.CREATE_PROJECT && (
         <CreateProjectForm
           setToFavorite={setToFavorite}
diff --git a/apps/web/core/components/project/create/common-attributes.tsx b/apps/web/core/components/project/create/common-attributes.tsx
index 531b4e4c7..2772a8d31 100644
--- a/apps/web/core/components/project/create/common-attributes.tsx
+++ b/apps/web/core/components/project/create/common-attributes.tsx
@@ -1,7 +1,13 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { ChangeEvent } from "react";
 import type { UseFormSetValue } from "react-hook-form";
 import { Controller, useFormContext } from "react-hook-form";
-import { Info } from "lucide-react";
+import { InfoIcon } from "@plane/propel/icons";
 // plane imports
 import { ETabIndices } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
@@ -17,14 +23,13 @@ import type { TProject } from "@/plane-web/types/projects";
 type Props = {
   setValue: UseFormSetValue<TProject>;
   isMobile: boolean;
-  isChangeInIdentifierRequired: boolean;
-  setIsChangeInIdentifierRequired: (value: boolean) => void;
+  shouldAutoSyncIdentifier: boolean;
+  setShouldAutoSyncIdentifier: (value: boolean) => void;
   handleFormOnChange?: () => void;
 };
 
 function ProjectCommonAttributes(props: Props) {
-  const { setValue, isMobile, isChangeInIdentifierRequired, setIsChangeInIdentifierRequired, handleFormOnChange } =
-    props;
+  const { setValue, isMobile, shouldAutoSyncIdentifier, setShouldAutoSyncIdentifier, handleFormOnChange } = props;
   const {
     formState: { errors },
     control,
@@ -33,21 +38,22 @@ function ProjectCommonAttributes(props: Props) {
   const { getIndex } = getTabIndex(ETabIndices.PROJECT_CREATE, isMobile);
   const { t } = useTranslation();
 
-  const handleNameChange = (onChange: (...event: any[]) => void) => (e: ChangeEvent<HTMLInputElement>) => {
-    if (!isChangeInIdentifierRequired) {
+  const handleNameChange =
+    (onChange: (event: ChangeEvent<HTMLInputElement>) => void) => (e: ChangeEvent<HTMLInputElement>) => {
+      if (!shouldAutoSyncIdentifier) {
+        onChange(e);
+        return;
+      }
+      if (e.target.value === "") setValue("identifier", "");
+      else setValue("identifier", projectIdentifierSanitizer(e.target.value).substring(0, 10));
       onChange(e);
-      return;
-    }
-    if (e.target.value === "") setValue("identifier", "");
-    else setValue("identifier", projectIdentifierSanitizer(e.target.value).substring(0, 10));
-    onChange(e);
-    handleFormOnChange?.();
-  };
+      handleFormOnChange?.();
+    };
 
-  const handleIdentifierChange = (onChange: any) => (e: ChangeEvent<HTMLInputElement>) => {
+  const handleIdentifierChange = (onChange: (value: string) => void) => (e: ChangeEvent<HTMLInputElement>) => {
     const { value } = e.target;
     const alphanumericValue = projectIdentifierSanitizer(value);
-    setIsChangeInIdentifierRequired(false);
+    setShouldAutoSyncIdentifier(false);
     onChange(alphanumericValue);
     handleFormOnChange?.();
   };
@@ -73,12 +79,12 @@ function ProjectCommonAttributes(props: Props) {
               onChange={handleNameChange(onChange)}
               hasError={Boolean(errors.name)}
               placeholder={t("project_name")}
-              className="w-full focus:border-blue-400"
+              className="focus:border-blue-400 w-full"
               tabIndex={getIndex("name")}
             />
           )}
         />
-        <span className="text-xs text-red-500">{errors?.name?.message}</span>
+        <span className="text-11 text-danger-primary">{errors?.name?.message}</span>
       </div>
       <div className="relative">
         <Controller
@@ -107,7 +113,7 @@ function ProjectCommonAttributes(props: Props) {
               onChange={handleIdentifierChange(onChange)}
               hasError={Boolean(errors.identifier)}
               placeholder={t("project_id")}
-              className={cn("w-full text-xs focus:border-blue-400 pr-7", {
+              className={cn("focus:border-blue-400 w-full pr-7 text-11", {
                 uppercase: value,
               })}
               tabIndex={getIndex("identifier")}
@@ -117,12 +123,12 @@ function ProjectCommonAttributes(props: Props) {
         <Tooltip
           isMobile={isMobile}
           tooltipContent={t("project_id_tooltip_content")}
-          className="text-sm"
+          className="text-13"
           position="right-start"
         >
-          <Info className="absolute right-2 top-2.5 h-3 w-3 text-custom-text-400" />
+          <InfoIcon className="absolute top-2.5 right-2 h-3 w-3 text-placeholder" />
         </Tooltip>
-        <span className="text-xs text-red-500">{errors?.identifier?.message}</span>
+        <span className="text-11 text-danger-primary">{errors?.identifier?.message}</span>
       </div>
       <div className="md:col-span-4">
         <Controller
@@ -138,7 +144,7 @@ function ProjectCommonAttributes(props: Props) {
                 onChange(e);
                 handleFormOnChange?.();
               }}
-              className="!h-24 text-sm focus:border-blue-400"
+              className="focus:border-blue-400 !h-24 text-13"
               hasError={Boolean(errors?.description)}
               tabIndex={getIndex("description")}
             />
diff --git a/apps/web/core/components/project/create/header.tsx b/apps/web/core/components/project/create/header.tsx
index cd4192795..98ab84dd5 100644
--- a/apps/web/core/components/project/create/header.tsx
+++ b/apps/web/core/components/project/create/header.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useState } from "react";
 import { Controller, useFormContext } from "react-hook-form";
 // plane imports
@@ -10,20 +16,30 @@ import type { IProject } from "@plane/types";
 // plane ui
 import { getTabIndex } from "@plane/utils";
 // components
+import { CoverImage } from "@/components/common/cover-image";
 import { ImagePickerPopover } from "@/components/core/image-picker-popover";
-// helpers
-import { DEFAULT_COVER_IMAGE_URL, getCoverImageDisplayURL } from "@/helpers/cover-image.helper";
 // plane web imports
 import { ProjectTemplateSelect } from "@/plane-web/components/projects/create/template-select";
 
 type Props = {
   handleClose: () => void;
   isMobile?: boolean;
+  handleFormOnChange?: () => void;
+  isClosable?: boolean;
+  handleTemplateSelect?: () => void;
+  showActionButtons?: boolean;
 };
 
 function ProjectCreateHeader(props: Props) {
-  const { handleClose, isMobile = false } = props;
-  const { watch, control } = useFormContext<IProject>();
+  const {
+    handleClose,
+    isMobile = false,
+    handleFormOnChange,
+    isClosable = true,
+    handleTemplateSelect,
+    showActionButtons = true,
+  } = props;
+  const { watch, control, setValue } = useFormContext<IProject>();
   const { t } = useTranslation();
   // derived values
   const coverImage = watch("cover_image_url");
@@ -32,31 +48,36 @@ function ProjectCreateHeader(props: Props) {
   const { getIndex } = getTabIndex(ETabIndices.PROJECT_CREATE, isMobile);
 
   return (
-    <div className="group relative h-44 w-full rounded-lg bg-custom-background-80">
-      {coverImage && (
-        <img
-          src={getCoverImageDisplayURL(coverImage, DEFAULT_COVER_IMAGE_URL)}
-          className="absolute left-0 top-0 h-full w-full rounded-lg object-cover"
-          alt={t("project_cover_image_alt")}
-        />
+    <div className="group relative h-44 w-full rounded-lg">
+      <CoverImage
+        src={coverImage}
+        alt={t("project_cover_image_alt")}
+        className="absolute top-0 left-0 h-full w-full rounded-lg"
+      />
+      {showActionButtons && (
+        <div className="absolute top-2.5 left-2.5">
+          <ProjectTemplateSelect onClick={handleTemplateSelect} />
+        </div>
       )}
-      <div className="absolute left-2.5 top-2.5">
-        <ProjectTemplateSelect handleModalClose={handleClose} />
-      </div>
-      <div className="absolute right-2 top-2 p-2">
-        <button data-posthog="PROJECT_MODAL_CLOSE" type="button" onClick={handleClose} tabIndex={getIndex("close")}>
-          <CloseIcon className="h-5 w-5 text-white" />
-        </button>
-      </div>
-      <div className="absolute bottom-2 right-2">
+      {isClosable && (
+        <div className="absolute top-2 right-2 p-2">
+          <button type="button" onClick={handleClose} tabIndex={getIndex("close")}>
+            <CloseIcon className="h-5 w-5 text-on-color" />
+          </button>
+        </div>
+      )}
+      <div className="absolute right-2 bottom-2">
         <Controller
           name="cover_image_url"
           control={control}
           render={({ field: { value, onChange } }) => (
             <ImagePickerPopover
               label={t("change_cover")}
+              onChange={(data) => {
+                onChange(data);
+                handleFormOnChange?.();
+              }}
               control={control}
-              onChange={onChange}
               value={value ?? null}
               tabIndex={getIndex("cover_image")}
             />
@@ -75,7 +96,7 @@ function ProjectCreateHeader(props: Props) {
               className="flex items-center justify-center"
               buttonClassName="flex items-center justify-center"
               label={
-                <span className="grid h-11 w-11 place-items-center rounded-md bg-custom-background-80">
+                <span className="grid h-11 w-11 place-items-center rounded-md border border-subtle bg-layer-2">
                   <Logo logo={value} size={20} />
                 </span>
               }
@@ -88,15 +109,20 @@ function ProjectCreateHeader(props: Props) {
                   };
                 else if (val?.type === "icon") logoValue = val.value;
 
-                onChange({
+                const newLogoProps = {
                   in_use: val?.type,
                   [val?.type]: logoValue,
+                };
+                setValue("logo_props", newLogoProps, {
+                  shouldDirty: true,
                 });
+                onChange(newLogoProps);
+                handleFormOnChange?.();
                 setIsOpen(false);
               }}
-              defaultIconColor={value.in_use && value.in_use === "icon" ? value.icon?.color : undefined}
+              defaultIconColor={value?.in_use && value.in_use === "icon" ? value.icon?.color : undefined}
               defaultOpen={
-                value.in_use && value.in_use === "emoji" ? EmojiIconPickerTypes.EMOJI : EmojiIconPickerTypes.ICON
+                value?.in_use && value.in_use === "emoji" ? EmojiIconPickerTypes.EMOJI : EmojiIconPickerTypes.ICON
               }
             />
           )}
diff --git a/apps/web/core/components/project/create/project-create-buttons.tsx b/apps/web/core/components/project/create/project-create-buttons.tsx
index af17d6a5c..ae66ca719 100644
--- a/apps/web/core/components/project/create/project-create-buttons.tsx
+++ b/apps/web/core/components/project/create/project-create-buttons.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useFormContext } from "react-hook-form";
 // plane imports
 import { ETabIndices } from "@plane/constants";
@@ -23,11 +29,11 @@ function ProjectCreateButtons(props: Props) {
   const { getIndex } = getTabIndex(ETabIndices.PROJECT_CREATE, isMobile);
 
   return (
-    <div className="flex justify-end gap-2 py-4 border-t border-custom-border-100">
-      <Button variant="neutral-primary" size="sm" onClick={handleClose} tabIndex={getIndex("cancel")}>
+    <div className="flex justify-end gap-2 border-t border-subtle py-4">
+      <Button variant="secondary" size="lg" onClick={handleClose} tabIndex={getIndex("cancel")}>
         {t("common.cancel")}
       </Button>
-      <Button variant="primary" type="submit" size="sm" loading={isSubmitting} tabIndex={getIndex("submit")}>
+      <Button variant="primary" size="lg" type="submit" loading={isSubmitting} tabIndex={getIndex("submit")}>
         {isSubmitting ? t("creating") : t("create_project")}
       </Button>
     </div>
diff --git a/apps/web/core/components/project/delete-project-modal.tsx b/apps/web/core/components/project/delete-project-modal.tsx
index b167196bb..3155e9f72 100644
--- a/apps/web/core/components/project/delete-project-modal.tsx
+++ b/apps/web/core/components/project/delete-project-modal.tsx
@@ -1,18 +1,18 @@
-import React from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useParams } from "next/navigation";
 import { Controller, useForm } from "react-hook-form";
 import { AlertTriangle } from "lucide-react";
-import { Dialog, Transition } from "@headlessui/react";
-// types
-import { PROJECT_TRACKER_EVENTS } from "@plane/constants";
+// Plane imports
 import { Button } from "@plane/propel/button";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { IProject } from "@plane/types";
-// ui
-import { Input } from "@plane/ui";
-// constants
+import { Input, EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
 // hooks
-import { captureError, captureSuccess } from "@/helpers/event-tracker.helper";
 import { useProject } from "@/hooks/store/use-project";
 import { useAppRouter } from "@/hooks/use-app-router";
 
@@ -57,143 +57,96 @@ export function DeleteProjectModal(props: DeleteProjectModal) {
   const onSubmit = async () => {
     if (!workspaceSlug || !canDelete) return;
 
-    await deleteProject(workspaceSlug.toString(), project.id)
-      .then(() => {
-        if (projectId && projectId.toString() === project.id) router.push(`/${workspaceSlug}/projects`);
-
-        handleClose();
-        captureSuccess({
-          eventName: PROJECT_TRACKER_EVENTS.delete,
-          payload: {
-            id: project.id,
-          },
-        });
-        setToast({
-          type: TOAST_TYPE.SUCCESS,
-          title: "Success!",
-          message: "Project deleted successfully.",
-        });
-      })
-      .catch(() => {
-        captureError({
-          eventName: PROJECT_TRACKER_EVENTS.delete,
-          payload: {
-            id: project.id,
-          },
-        });
-        setToast({
-          type: TOAST_TYPE.ERROR,
-          title: "Error!",
-          message: "Something went wrong. Please try again later.",
-        });
+    try {
+      await deleteProject(workspaceSlug.toString(), project.id);
+      if (projectId && projectId.toString() === project.id) router.push(`/${workspaceSlug}/projects`);
+      handleClose();
+      setToast({
+        type: TOAST_TYPE.SUCCESS,
+        title: "Success!",
+        message: "Project deleted successfully.",
       });
+    } catch (_error) {
+      setToast({
+        type: TOAST_TYPE.ERROR,
+        title: "Error!",
+        message: "Something went wrong. Please try again later.",
+      });
+    }
   };
 
   return (
-    <Transition.Root show={isOpen} as={React.Fragment}>
-      <Dialog as="div" className="relative z-20" onClose={handleClose}>
-        <Transition.Child
-          as={React.Fragment}
-          enter="ease-out duration-300"
-          enterFrom="opacity-0"
-          enterTo="opacity-100"
-          leave="ease-in duration-200"
-          leaveFrom="opacity-100"
-          leaveTo="opacity-0"
-        >
-          <div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
-        </Transition.Child>
-
-        <div className="fixed inset-0 z-20 overflow-y-auto">
-          <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
-            <Transition.Child
-              as={React.Fragment}
-              enter="ease-out duration-300"
-              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-              enterTo="opacity-100 translate-y-0 sm:scale-100"
-              leave="ease-in duration-200"
-              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-            >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-custom-background-100 text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-full sm:max-w-2xl">
-                <form onSubmit={handleSubmit(onSubmit)} className="flex flex-col gap-6 p-6">
-                  <div className="flex w-full items-center justify-start gap-6">
-                    <span className="place-items-center rounded-full bg-red-500/20 p-4">
-                      <AlertTriangle className="h-6 w-6 text-red-600" aria-hidden="true" />
-                    </span>
-                    <span className="flex items-center justify-start">
-                      <h3 className="text-xl font-medium 2xl:text-2xl">Delete project</h3>
-                    </span>
-                  </div>
-                  <span>
-                    <p className="text-sm leading-7 text-custom-text-200">
-                      Are you sure you want to delete project{" "}
-                      <span className="break-words font-semibold">{project?.name}</span>? All of the data related to the
-                      project will be permanently removed. This action cannot be undone
-                    </p>
-                  </span>
-                  <div className="text-custom-text-200">
-                    <p className="break-words text-sm ">
-                      Enter the project name <span className="font-medium text-custom-text-100">{project?.name}</span>{" "}
-                      to continue:
-                    </p>
-                    <Controller
-                      control={control}
-                      name="projectName"
-                      render={({ field: { value, onChange, ref } }) => (
-                        <Input
-                          id="projectName"
-                          name="projectName"
-                          type="text"
-                          value={value}
-                          onChange={onChange}
-                          ref={ref}
-                          hasError={Boolean(errors.projectName)}
-                          placeholder="Project name"
-                          className="mt-2 w-full"
-                          autoComplete="off"
-                        />
-                      )}
-                    />
-                  </div>
-                  <div className="text-custom-text-200">
-                    <p className="text-sm">
-                      To confirm, type <span className="font-medium text-custom-text-100">delete my project</span>{" "}
-                      below:
-                    </p>
-                    <Controller
-                      control={control}
-                      name="confirmDelete"
-                      render={({ field: { value, onChange, ref } }) => (
-                        <Input
-                          id="confirmDelete"
-                          name="confirmDelete"
-                          type="text"
-                          value={value}
-                          onChange={onChange}
-                          ref={ref}
-                          hasError={Boolean(errors.confirmDelete)}
-                          placeholder="Enter 'delete my project'"
-                          className="mt-2 w-full"
-                          autoComplete="off"
-                        />
-                      )}
-                    />
-                  </div>
-                  <div className="flex justify-end gap-2">
-                    <Button variant="neutral-primary" size="sm" onClick={handleClose}>
-                      Cancel
-                    </Button>
-                    <Button variant="danger" size="sm" type="submit" disabled={!canDelete} loading={isSubmitting}>
-                      {isSubmitting ? "Deleting" : "Delete project"}
-                    </Button>
-                  </div>
-                </form>
-              </Dialog.Panel>
-            </Transition.Child>
-          </div>
+    <ModalCore isOpen={isOpen} handleClose={handleClose} position={EModalPosition.CENTER} width={EModalWidth.XXL}>
+      <form onSubmit={handleSubmit(onSubmit)} className="flex flex-col gap-6 p-6">
+        <div className="flex w-full items-center justify-start gap-6">
+          <span className="place-items-center rounded-full bg-danger-subtle p-4">
+            <AlertTriangle className="h-6 w-6 text-danger-primary" aria-hidden="true" />
+          </span>
+          <span className="flex items-center justify-start">
+            <h3 className="text-18 font-medium 2xl:text-20">Delete project</h3>
+          </span>
         </div>
-      </Dialog>
-    </Transition.Root>
+        <span>
+          <p className="text-13 leading-7 text-secondary">
+            Are you sure you want to delete project <span className="font-semibold break-words">{project?.name}</span>?
+            All of the data related to the project will be permanently removed. This action cannot be undone
+          </p>
+        </span>
+        <div className="text-secondary">
+          <p className="text-13 break-words">
+            Enter the project name <span className="font-medium text-primary">{project?.name}</span> to continue:
+          </p>
+          <Controller
+            control={control}
+            name="projectName"
+            render={({ field: { value, onChange, ref } }) => (
+              <Input
+                id="projectName"
+                name="projectName"
+                type="text"
+                value={value}
+                onChange={onChange}
+                ref={ref}
+                hasError={Boolean(errors.projectName)}
+                placeholder="Project name"
+                className="mt-2 w-full"
+                autoComplete="off"
+              />
+            )}
+          />
+        </div>
+        <div className="text-secondary">
+          <p className="text-13">
+            To confirm, type <span className="font-medium text-primary">delete my project</span> below:
+          </p>
+          <Controller
+            control={control}
+            name="confirmDelete"
+            render={({ field: { value, onChange, ref } }) => (
+              <Input
+                id="confirmDelete"
+                name="confirmDelete"
+                type="text"
+                value={value}
+                onChange={onChange}
+                ref={ref}
+                hasError={Boolean(errors.confirmDelete)}
+                placeholder="Enter 'delete my project'"
+                className="mt-2 w-full"
+                autoComplete="off"
+              />
+            )}
+          />
+        </div>
+        <div className="flex justify-end gap-2">
+          <Button variant="secondary" size="lg" onClick={handleClose}>
+            Cancel
+          </Button>
+          <Button variant="error-fill" size="lg" type="submit" disabled={!canDelete} loading={isSubmitting}>
+            {isSubmitting ? "Deleting" : "Delete project"}
+          </Button>
+        </div>
+      </form>
+    </ModalCore>
   );
 }
diff --git a/apps/web/core/components/project/dropdowns/filters/access.tsx b/apps/web/core/components/project/dropdowns/filters/access.tsx
index ddddc45ad..32a5648a3 100644
--- a/apps/web/core/components/project/dropdowns/filters/access.tsx
+++ b/apps/web/core/components/project/dropdowns/filters/access.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React, { useState } from "react";
 import { observer } from "mobx-react";
 // plane imports
@@ -43,7 +49,7 @@ export const FilterAccess = observer(function FilterAccess(props: Props) {
               />
             ))
           ) : (
-            <p className="text-xs italic text-custom-text-400">No matches found</p>
+            <p className="text-11 text-placeholder italic">No matches found</p>
           )}
         </div>
       )}
diff --git a/apps/web/core/components/project/dropdowns/filters/created-at.tsx b/apps/web/core/components/project/dropdowns/filters/created-at.tsx
index 16605ba8d..4ce2bf045 100644
--- a/apps/web/core/components/project/dropdowns/filters/created-at.tsx
+++ b/apps/web/core/components/project/dropdowns/filters/created-at.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React, { useState } from "react";
 import { observer } from "mobx-react";
 // plane constants
@@ -73,7 +79,7 @@ export const FilterCreatedDate = observer(function FilterCreatedDate(props: Prop
               />
             </>
           ) : (
-            <p className="text-xs italic text-custom-text-400">No matches found</p>
+            <p className="text-11 text-placeholder italic">No matches found</p>
           )}
         </div>
       )}
diff --git a/apps/web/core/components/project/dropdowns/filters/index.ts b/apps/web/core/components/project/dropdowns/filters/index.ts
index 1efe34c51..d98033459 100644
--- a/apps/web/core/components/project/dropdowns/filters/index.ts
+++ b/apps/web/core/components/project/dropdowns/filters/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./root";
diff --git a/apps/web/core/components/project/dropdowns/filters/lead.tsx b/apps/web/core/components/project/dropdowns/filters/lead.tsx
index 1c30fc548..286759dd2 100644
--- a/apps/web/core/components/project/dropdowns/filters/lead.tsx
+++ b/apps/web/core/components/project/dropdowns/filters/lead.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useMemo, useState } from "react";
 import { sortBy } from "lodash-es";
 import { observer } from "mobx-react";
@@ -85,7 +91,7 @@ export const FilterLead = observer(function FilterLead(props: Props) {
                 {sortedOptions.length > 5 && (
                   <button
                     type="button"
-                    className="ml-8 text-xs font-medium text-custom-primary-100"
+                    className="ml-8 text-11 font-medium text-accent-primary"
                     onClick={handleViewToggle}
                   >
                     {itemsToRender === sortedOptions.length ? "View less" : "View all"}
@@ -93,7 +99,7 @@ export const FilterLead = observer(function FilterLead(props: Props) {
                 )}
               </>
             ) : (
-              <p className="text-xs italic text-custom-text-400">No matches found</p>
+              <p className="text-11 text-placeholder italic">No matches found</p>
             )
           ) : (
             <Loader className="space-y-2">
diff --git a/apps/web/core/components/project/dropdowns/filters/member-list.tsx b/apps/web/core/components/project/dropdowns/filters/member-list.tsx
index 5849e6dfd..bb8acd15e 100644
--- a/apps/web/core/components/project/dropdowns/filters/member-list.tsx
+++ b/apps/web/core/components/project/dropdowns/filters/member-list.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useState } from "react";
 import { observer } from "mobx-react";
 // plane imports
@@ -95,12 +101,12 @@ export const MemberListFiltersDropdown = observer(function MemberListFiltersDrop
     <CustomMenu
       customButton={
         <div className="relative">
-          <Button variant="neutral-primary" size="sm" className="flex items-center gap-2">
+          <Button variant="secondary" size="lg" className="flex items-center gap-2">
             <span>Filters</span>
             <ChevronDownIcon className="h-3 w-3" />
           </Button>
           {appliedFiltersCount > 0 && (
-            <div className="absolute -top-1 -right-1 h-2 w-2 rounded-full bg-custom-primary-100" />
+            <div className="absolute -top-1 -right-1 h-2 w-2 rounded-full bg-accent-primary" />
           )}
         </div>
       }
diff --git a/apps/web/core/components/project/dropdowns/filters/members.tsx b/apps/web/core/components/project/dropdowns/filters/members.tsx
index a2e401b76..1e94ac62c 100644
--- a/apps/web/core/components/project/dropdowns/filters/members.tsx
+++ b/apps/web/core/components/project/dropdowns/filters/members.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useMemo, useState } from "react";
 import { sortBy } from "lodash-es";
 import { observer } from "mobx-react";
@@ -85,7 +91,7 @@ export const FilterMembers = observer(function FilterMembers(props: Props) {
                 {sortedOptions.length > 5 && (
                   <button
                     type="button"
-                    className="ml-8 text-xs font-medium text-custom-primary-100"
+                    className="ml-8 text-11 font-medium text-accent-primary"
                     onClick={handleViewToggle}
                   >
                     {itemsToRender === sortedOptions.length ? "View less" : "View all"}
@@ -93,7 +99,7 @@ export const FilterMembers = observer(function FilterMembers(props: Props) {
                 )}
               </>
             ) : (
-              <p className="text-xs italic text-custom-text-400">No matches found</p>
+              <p className="text-11 text-placeholder italic">No matches found</p>
             )
           ) : (
             <Loader className="space-y-2">
diff --git a/apps/web/core/components/project/dropdowns/filters/root.tsx b/apps/web/core/components/project/dropdowns/filters/root.tsx
index fa547c3f9..10071cfc8 100644
--- a/apps/web/core/components/project/dropdowns/filters/root.tsx
+++ b/apps/web/core/components/project/dropdowns/filters/root.tsx
@@ -1,7 +1,12 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useState } from "react";
 import { observer } from "mobx-react";
-import { Search } from "lucide-react";
-import { CloseIcon } from "@plane/propel/icons";
+import { SearchIcon, CloseIcon } from "@plane/propel/icons";
 // plane imports
 import type { TProjectDisplayFilters, TProjectFilters } from "@plane/types";
 // components
@@ -31,12 +36,12 @@ export const ProjectFiltersSelection = observer(function ProjectFiltersSelection
 
   return (
     <div className="flex h-full w-full flex-col overflow-hidden">
-      <div className="bg-custom-background-100 p-2.5 pb-0">
-        <div className="flex items-center gap-1.5 rounded border-[0.5px] border-custom-border-200 bg-custom-background-90 px-1.5 py-1 text-xs">
-          <Search className="text-custom-text-400" size={12} strokeWidth={2} />
+      <div className="bg-surface-1 p-2.5 pb-0">
+        <div className="flex items-center gap-1.5 rounded-sm border-[0.5px] border-subtle bg-surface-2 px-1.5 py-1 text-11">
+          <SearchIcon className="text-placeholder" width={12} height={12} strokeWidth={2} />
           <input
             type="text"
-            className="w-full bg-custom-background-90 outline-none placeholder:text-custom-text-400"
+            className="w-full bg-surface-2 outline-none placeholder:text-placeholder"
             placeholder="Search"
             value={filtersSearchQuery}
             onChange={(e) => setFiltersSearchQuery(e.target.value)}
@@ -44,12 +49,12 @@ export const ProjectFiltersSelection = observer(function ProjectFiltersSelection
           />
           {filtersSearchQuery !== "" && (
             <button type="button" className="grid place-items-center" onClick={() => setFiltersSearchQuery("")}>
-              <CloseIcon className="text-custom-text-300" height={12} width={12} strokeWidth={2} />
+              <CloseIcon className="text-tertiary" height={12} width={12} strokeWidth={2} />
             </button>
           )}
         </div>
       </div>
-      <div className="h-full w-full divide-y divide-custom-border-200 overflow-y-auto px-2.5 vertical-scrollbar scrollbar-sm">
+      <div className="vertical-scrollbar scrollbar-sm h-full w-full divide-y divide-subtle-1 overflow-y-auto px-2.5">
         <div className="py-2">
           <FilterOption
             isChecked={!!displayFilters.my_projects}
diff --git a/apps/web/core/components/project/dropdowns/order-by.tsx b/apps/web/core/components/project/dropdowns/order-by.tsx
index 11d81a90d..5b83e0c28 100644
--- a/apps/web/core/components/project/dropdowns/order-by.tsx
+++ b/apps/web/core/components/project/dropdowns/order-by.tsx
@@ -1,15 +1,17 @@
-import { ArrowDownWideNarrow, Check } from "lucide-react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { ArrowDownWideNarrow } from "lucide-react";
+// plane imports
 import { PROJECT_ORDER_BY_OPTIONS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { getButtonStyling } from "@plane/propel/button";
-import { ChevronDownIcon } from "@plane/propel/icons";
+import { CheckIcon } from "@plane/propel/icons";
 import type { TProjectOrderByOptions } from "@plane/types";
-// ui
 import { CustomMenu } from "@plane/ui";
-// helpers
-import { cn } from "@plane/utils";
-// types
-// constants
 
 type Props = {
   onChange: (value: TProjectOrderByOptions) => void;
@@ -34,16 +36,14 @@ export function ProjectOrderByDropdown(props: Props) {
       customButton={
         <>
           {isMobile ? (
-            <div className="flex text-sm items-center gap-2 neutral-primary text-custom-text-200">
-              <ArrowDownWideNarrow className="h-3 w-3" />
+            <div className={getButtonStyling("secondary", "lg")}>
+              <ArrowDownWideNarrow className="size-3.5 shrink-0" strokeWidth={2} />
               {orderByDetails && t(orderByDetails?.i18n_label)}
-              <ChevronDownIcon className="h-3 w-3" strokeWidth={2} />
             </div>
           ) : (
-            <div className={cn(getButtonStyling("neutral-primary", "sm"), "px-2 text-custom-text-200")}>
-              <ArrowDownWideNarrow className="h-3 w-3" />
+            <div className={getButtonStyling("secondary", "lg")}>
+              <ArrowDownWideNarrow className="size-3.5 shrink-0" strokeWidth={2} />
               {orderByDetails && t(orderByDetails?.i18n_label)}
-              <ChevronDownIcon className="h-3 w-3" strokeWidth={2} />
             </div>
           )}
         </>
@@ -62,10 +62,10 @@ export function ProjectOrderByDropdown(props: Props) {
           }}
         >
           {option && t(option?.i18n_label)}
-          {value?.includes(option.key) && <Check className="h-3 w-3" />}
+          {value?.includes(option.key) && <CheckIcon className="h-3 w-3" />}
         </CustomMenu.MenuItem>
       ))}
-      <hr className="my-2 border-custom-border-200" />
+      <hr className="my-2 border-subtle" />
       <CustomMenu.MenuItem
         className="flex items-center justify-between gap-2"
         onClick={() => {
@@ -74,7 +74,7 @@ export function ProjectOrderByDropdown(props: Props) {
         disabled={isOrderingDisabled}
       >
         Ascending
-        {!isOrderingDisabled && !isDescending && <Check className="h-3 w-3" />}
+        {!isOrderingDisabled && !isDescending && <CheckIcon className="h-3 w-3" />}
       </CustomMenu.MenuItem>
       <CustomMenu.MenuItem
         className="flex items-center justify-between gap-2"
@@ -84,7 +84,7 @@ export function ProjectOrderByDropdown(props: Props) {
         disabled={isOrderingDisabled}
       >
         Descending
-        {!isOrderingDisabled && isDescending && <Check className="h-3 w-3" />}
+        {!isOrderingDisabled && isDescending && <CheckIcon className="h-3 w-3" />}
       </CustomMenu.MenuItem>
     </CustomMenu>
   );
diff --git a/apps/web/core/components/project/empty-state.tsx b/apps/web/core/components/project/empty-state.tsx
index 574d6dba9..4e4bce838 100644
--- a/apps/web/core/components/project/empty-state.tsx
+++ b/apps/web/core/components/project/empty-state.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 // ui
 import { Button } from "@plane/propel/button";
@@ -19,15 +25,15 @@ export function EmptyState({ title, description, image, primaryButton, secondary
   return (
     <div className="flex h-full w-full items-center justify-center px-5 md:px-10 lg:p-20">
       <div className="relative h-full w-full max-w-6xl">
-        <img src={image} className="w-52 sm:w-60 object-cover" alt={primaryButton?.text ?? ""} />
+        <img src={image} className="w-52 object-cover sm:w-60" alt={primaryButton?.text ?? ""} />
       </div>
       <div className="absolute flex w-full flex-col items-center pt-[30vh] text-center md:pt-[35vh] lg:pt-[45vh]">
-        <h6 className="mt-6 text-xl font-semibold">{title}</h6>
-        {description && <p className="mb-7 text-custom-text-300">{description}</p>}
+        <h6 className="mt-6 text-18 font-semibold">{title}</h6>
+        {description && <p className="mb-7 text-tertiary">{description}</p>}
         <div className="flex items-center gap-4">
           {primaryButton && (
             <Button
-              size="lg"
+              size="xl"
               variant="primary"
               prependIcon={primaryButton.icon}
               onClick={primaryButton.onClick}
diff --git a/apps/web/core/components/project/filters.tsx b/apps/web/core/components/project/filters.tsx
index 09620729e..5f7215bc4 100644
--- a/apps/web/core/components/project/filters.tsx
+++ b/apps/web/core/components/project/filters.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useCallback } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
diff --git a/apps/web/core/components/project/form-loader.tsx b/apps/web/core/components/project/form-loader.tsx
index a8f3d690c..a78d4d134 100644
--- a/apps/web/core/components/project/form-loader.tsx
+++ b/apps/web/core/components/project/form-loader.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // components
 import { Loader } from "@plane/ui";
 
@@ -10,7 +16,7 @@ export function ProjectDetailsFormLoader() {
         </Loader>
         <div className="absolute bottom-4 flex w-full items-end justify-between gap-3 px-4">
           <div className="flex flex-grow gap-3 truncate">
-            <div className="flex h-[52px] w-[52px] flex-shrink-0 items-center justify-center rounded-lg bg-custom-background-90">
+            <div className="flex h-[52px] w-[52px] flex-shrink-0 items-center justify-center rounded-lg bg-surface-2">
               <Loader>
                 <Loader.Item height="46px" width="46px" />
               </Loader>
@@ -25,26 +31,26 @@ export function ProjectDetailsFormLoader() {
       </div>
       <div className="my-8 flex flex-col gap-8">
         <div className="flex flex-col gap-1">
-          <h4 className="text-sm">Project name</h4>
+          <h4 className="text-13">Project name</h4>
           <Loader>
             <Loader.Item height="46px" width="100%" />
           </Loader>
         </div>
         <div className="flex flex-col gap-1">
-          <h4 className="text-sm">Description</h4>
+          <h4 className="text-13">Description</h4>
           <Loader className="w-full">
             <Loader.Item height="102px" width="full" />
           </Loader>
         </div>
         <div className="flex w-full items-center justify-between gap-10">
           <div className="flex w-1/2 flex-col gap-1">
-            <h4 className="text-sm">Identifier</h4>
+            <h4 className="text-13">Identifier</h4>
             <Loader>
               <Loader.Item height="36px" width="100%" />
             </Loader>
           </div>
           <div className="flex w-1/2 flex-col gap-1">
-            <h4 className="text-sm">Network</h4>
+            <h4 className="text-13">Network</h4>
             <Loader className="w-full">
               <Loader.Item height="46px" width="100%" />
             </Loader>
diff --git a/apps/web/core/components/project/form.tsx b/apps/web/core/components/project/form.tsx
index 824c8af6e..b14b63cd6 100644
--- a/apps/web/core/components/project/form.tsx
+++ b/apps/web/core/components/project/form.tsx
@@ -1,22 +1,29 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useEffect, useState } from "react";
 import { Controller, useForm } from "react-hook-form";
-import { Info, Lock } from "lucide-react";
-import { NETWORK_CHOICES, PROJECT_TRACKER_ELEMENTS, PROJECT_TRACKER_EVENTS } from "@plane/constants";
+import { Info } from "lucide-react";
+import { NETWORK_CHOICES } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 // plane imports
 import { Button } from "@plane/propel/button";
 import { EmojiPicker, EmojiIconPickerTypes, Logo } from "@plane/propel/emoji-icon-picker";
+import { LockIcon } from "@plane/propel/icons";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import { Tooltip } from "@plane/propel/tooltip";
 import { EFileAssetType } from "@plane/types";
 import type { IProject, IWorkspace } from "@plane/types";
 import { CustomSelect, Input, TextArea } from "@plane/ui";
 import { renderFormattedDate } from "@plane/utils";
+import { CoverImage } from "@/components/common/cover-image";
 import { ImagePickerPopover } from "@/components/core/image-picker-popover";
 import { TimezoneSelect } from "@/components/global";
 // helpers
-import { DEFAULT_COVER_IMAGE_URL, getCoverImageDisplayURL, handleCoverImageChange } from "@/helpers/cover-image.helper";
-import { captureError, captureSuccess } from "@/helpers/event-tracker.helper";
+import { handleCoverImageChange } from "@/helpers/cover-image.helper";
 // hooks
 import { useProject } from "@/hooks/store/use-project";
 import { usePlatformOS } from "@/hooks/use-platform-os";
@@ -85,12 +92,6 @@ export function ProjectDetailsForm(props: IProjectDetailsForm) {
     if (!workspaceSlug || !project) return;
     return updateProject(workspaceSlug.toString(), project.id, payload)
       .then(() => {
-        captureSuccess({
-          eventName: PROJECT_TRACKER_EVENTS.update,
-          payload: {
-            id: projectId,
-          },
-        });
         setToast({
           type: TOAST_TYPE.SUCCESS,
           title: t("toast.success"),
@@ -99,13 +100,6 @@ export function ProjectDetailsForm(props: IProjectDetailsForm) {
       })
       .catch((err) => {
         try {
-          captureError({
-            eventName: PROJECT_TRACKER_EVENTS.update,
-            payload: {
-              id: projectId,
-            },
-          });
-
           // Handle the new error format where codes are nested in arrays under field names
           const errorData = err ?? {};
 
@@ -200,12 +194,8 @@ export function ProjectDetailsForm(props: IProjectDetailsForm) {
     <form onSubmit={handleSubmit(onSubmit)}>
       <div className="relative h-44 w-full">
         <div className="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent" />
-        <img
-          src={getCoverImageDisplayURL(coverImage, DEFAULT_COVER_IMAGE_URL)}
-          alt="Project cover image"
-          className="h-44 w-full rounded-md object-cover"
-        />
-        <div className="z-5 absolute bottom-4 flex w-full items-end justify-between gap-3 px-4">
+        <CoverImage src={coverImage} alt="Project cover image" className="h-44 w-full rounded-md" />
+        <div className="absolute bottom-4 z-5 flex w-full items-end justify-between gap-3 px-4">
           <div className="flex flex-grow gap-3 truncate">
             <Controller
               control={control}
@@ -243,12 +233,12 @@ export function ProjectDetailsForm(props: IProjectDetailsForm) {
                 />
               )}
             />
-            <div className="flex flex-col gap-1 truncate text-white">
-              <span className="truncate text-lg font-semibold">{watch("name")}</span>
-              <span className="flex items-center gap-2 text-sm">
+            <div className="flex flex-col gap-1 truncate text-on-color">
+              <span className="truncate text-16 font-semibold">{watch("name")}</span>
+              <span className="flex items-center gap-2 text-13">
                 <span>{watch("identifier")} .</span>
                 <span className="flex items-center gap-1.5">
-                  {project.network === 0 && <Lock className="h-2.5 w-2.5 text-white " />}
+                  {project.network === 0 && <LockIcon className="h-2.5 w-2.5 text-on-color" />}
                   {currentNetwork && t(currentNetwork?.i18n_label)}
                 </span>
               </span>
@@ -274,9 +264,9 @@ export function ProjectDetailsForm(props: IProjectDetailsForm) {
           </div>
         </div>
       </div>
-      <div className="my-8 flex flex-col gap-8">
+      <div className="mt-8 flex flex-col gap-8">
         <div className="flex flex-col gap-1">
-          <h4 className="text-sm">{t("common.project_name")}</h4>
+          <h4 className="text-13">{t("common.project_name")}</h4>
           <Controller
             control={control}
             name="name"
@@ -302,10 +292,10 @@ export function ProjectDetailsForm(props: IProjectDetailsForm) {
               />
             )}
           />
-          <span className="text-xs text-red-500">{errors?.name?.message}</span>
+          <span className="text-11 text-danger-primary">{errors?.name?.message}</span>
         </div>
         <div className="flex flex-col gap-1">
-          <h4 className="text-sm">{t("description")}</h4>
+          <h4 className="text-13">{t("description")}</h4>
           <Controller
             name="description"
             control={control}
@@ -316,16 +306,16 @@ export function ProjectDetailsForm(props: IProjectDetailsForm) {
                 value={value}
                 placeholder={t("project_description_placeholder")}
                 onChange={onChange}
-                className="min-h-[102px] text-sm font-medium"
+                className="min-h-[102px] text-13 font-medium"
                 hasError={Boolean(errors?.description)}
                 disabled={!isAdmin}
               />
             )}
           />
         </div>
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+        <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
           <div className="flex flex-col gap-1">
-            <h4 className="text-sm">Project ID</h4>
+            <h4 className="text-13">Project ID</h4>
             <div className="relative">
               <Controller
                 control={control}
@@ -360,18 +350,18 @@ export function ProjectDetailsForm(props: IProjectDetailsForm) {
               <Tooltip
                 isMobile={isMobile}
                 tooltipContent={t("project_id_tooltip_content")}
-                className="text-sm"
+                className="text-13"
                 position="right-start"
               >
-                <Info className="absolute right-2 top-2.5 h-4 w-4 text-custom-text-400" />
+                <Info className="absolute top-2.5 right-2 h-4 w-4 text-placeholder" />
               </Tooltip>
             </div>
-            <span className="text-xs text-red-500">
+            <span className="text-11 text-danger-primary">
               <>{errors?.identifier?.message}</>
             </span>
           </div>
           <div className="flex flex-col gap-1">
-            <h4 className="text-sm">{t("workspace_projects.network.label")}</h4>
+            <h4 className="text-13">{t("workspace_projects.network.label")}</h4>
             <Controller
               name="network"
               control={control}
@@ -389,11 +379,11 @@ export function ProjectDetailsForm(props: IProjectDetailsForm) {
                             {t(selectedNetwork.i18n_label)}
                           </>
                         ) : (
-                          <span className="text-custom-text-400">{t("select_network")}</span>
+                          <span className="text-placeholder">{t("select_network")}</span>
                         )}
                       </div>
                     }
-                    buttonClassName="!border-custom-border-200 !shadow-none font-medium rounded-md"
+                    buttonClassName="!border-subtle !shadow-none font-medium rounded-md"
                     input
                     disabled={!isAdmin}
                     // optionsClassName="w-full"
@@ -404,7 +394,7 @@ export function ProjectDetailsForm(props: IProjectDetailsForm) {
                           <ProjectNetworkIcon iconKey={network.iconKey} className="h-3.5 w-3.5" />
                           <div className="-mt-1">
                             <p>{t(network.i18n_label)}</p>
-                            <p className="text-xs text-custom-text-400">{t(network.description)}</p>
+                            <p className="text-11 text-placeholder">{t(network.description)}</p>
                           </div>
                         </div>
                       </CustomSelect.Option>
@@ -414,8 +404,8 @@ export function ProjectDetailsForm(props: IProjectDetailsForm) {
               }}
             />
           </div>
-          <div className="flex flex-col gap-1 col-span-1 sm:col-span-2 xl:col-span-1">
-            <h4 className="text-sm">{t("common.project_timezone")}</h4>
+          <div className="col-span-1 flex flex-col gap-1 sm:col-span-2 xl:col-span-1">
+            <h4 className="text-13">{t("common.project_timezone")}</h4>
             <Controller
               name="timezone"
               control={control}
@@ -434,21 +424,15 @@ export function ProjectDetailsForm(props: IProjectDetailsForm) {
                 </>
               )}
             />
-            {errors.timezone && <span className="text-xs text-red-500">{errors.timezone.message}</span>}
+            {errors.timezone && <span className="text-11 text-danger-primary">{errors.timezone.message}</span>}
           </div>
         </div>
         <div className="flex items-center justify-between py-2">
           <>
-            <Button
-              data-ph-element={PROJECT_TRACKER_ELEMENTS.UPDATE_PROJECT_BUTTON}
-              variant="primary"
-              type="submit"
-              loading={isLoading}
-              disabled={!isAdmin}
-            >
-              {isLoading ? `${t("updating")}...` : t("common.update_project")}
+            <Button variant="primary" size="lg" type="submit" loading={isLoading} disabled={!isAdmin}>
+              {isLoading ? t("updating") : t("common.update_project")}
             </Button>
-            <span className="text-sm italic text-custom-sidebar-text-400">
+            <span className="text-13 text-placeholder italic">
               {t("common.created_on")} {renderFormattedDate(project?.created_at)}
             </span>
           </>
diff --git a/apps/web/core/components/project/header.tsx b/apps/web/core/components/project/header.tsx
index 788ba8cd8..d5b08d72e 100644
--- a/apps/web/core/components/project/header.tsx
+++ b/apps/web/core/components/project/header.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import { usePathname } from "next/navigation";
 // i18n
@@ -40,7 +46,7 @@ export const ProjectsBaseHeader = observer(function ProjectsBaseHeader() {
             component={
               <BreadcrumbLink
                 label={t("workspace_projects.label", { count: 2 })}
-                icon={<ProjectIcon className="h-4 w-4 text-custom-text-300" />}
+                icon={<ProjectIcon className="h-4 w-4 text-tertiary" />}
               />
             }
           />
@@ -54,7 +60,8 @@ export const ProjectsBaseHeader = observer(function ProjectsBaseHeader() {
         </div>
         {isAuthorizedUser && !isArchived ? (
           <Button
-            size="sm"
+            variant="primary"
+            size="lg"
             onClick={() => {
               toggleCreateProjectModal(true);
             }}
diff --git a/apps/web/core/components/project/integration-card.tsx b/apps/web/core/components/project/integration-card.tsx
index 990041821..79322e3fa 100644
--- a/apps/web/core/components/project/integration-card.tsx
+++ b/apps/web/core/components/project/integration-card.tsx
@@ -1,4 +1,9 @@
-import React from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useParams } from "next/navigation";
 import useSWR, { mutate } from "swr";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
@@ -7,7 +12,8 @@ import type { IWorkspaceIntegration } from "@plane/types";
 import GithubLogo from "@/app/assets/logos/github-square.png?url";
 import SlackLogo from "@/app/assets/services/slack.png?url";
 // components
-import { SelectRepository, SelectChannel } from "@/components/integration";
+import { SelectChannel } from "@/components/integration/slack/select-channel";
+import { SelectRepository } from "@/components/integration/github/select-repository";
 // constants
 import { PROJECT_GITHUB_REPOSITORY } from "@/constants/fetch-keys";
 // services
@@ -79,18 +85,18 @@ export function IntegrationCard({ integration }: Props) {
   return (
     <>
       {integration && (
-        <div className="flex items-center justify-between gap-2 border-b border-custom-border-100 bg-custom-background-100 px-4 py-6">
+        <div className="flex items-center justify-between gap-2 border-b border-subtle bg-surface-1 px-4 py-6">
           <div className="flex items-start gap-4">
             <div className="h-10 w-10 flex-shrink-0">
               <img
                 src={integrationDetails[integration.integration_detail.provider].logo}
-                className="w-full h-full object-cover"
+                className="h-full w-full object-cover"
                 alt={`${integration.integration_detail.title} Logo`}
               />
             </div>
             <div>
-              <h3 className="flex items-center gap-4 text-sm font-medium">{integration.integration_detail.title}</h3>
-              <p className="text-sm tracking-tight text-custom-text-200">
+              <h3 className="flex items-center gap-4 text-13 font-medium">{integration.integration_detail.title}</h3>
+              <p className="text-13 tracking-tight text-secondary">
                 {integrationDetails[integration.integration_detail.provider].description}
               </p>
             </div>
diff --git a/apps/web/core/components/project/join-project-modal.tsx b/apps/web/core/components/project/join-project-modal.tsx
index a6fb6d04d..8d1088440 100644
--- a/apps/web/core/components/project/join-project-modal.tsx
+++ b/apps/web/core/components/project/join-project-modal.tsx
@@ -1,12 +1,16 @@
-import { useState, Fragment } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
 
-import { Transition, Dialog } from "@headlessui/react";
+import { useState } from "react";
 // types
 import { Button } from "@plane/propel/button";
 import type { IProject } from "@plane/types";
 // ui
+import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
 // hooks
-import { useProject } from "@/hooks/store/use-project";
 import { useUserPermissions } from "@/hooks/store/user";
 import { useAppRouter } from "@/hooks/use-app-router";
 
@@ -24,18 +28,20 @@ export function JoinProjectModal(props: TJoinProjectModalProps) {
   const [isJoiningLoading, setIsJoiningLoading] = useState(false);
   // store hooks
   const { joinProject } = useUserPermissions();
-  const { fetchProjectDetails } = useProject();
   // router
   const router = useAppRouter();
 
-  const handleJoin = () => {
+  const handleJoin = async () => {
     setIsJoiningLoading(true);
 
-    joinProject(workspaceSlug, project.id)
+    await joinProject(workspaceSlug, project.id)
       .then(() => {
         router.push(`/${workspaceSlug}/projects/${project.id}/issues`);
-        fetchProjectDetails(workspaceSlug, project.id);
         handleClose();
+        return;
+      })
+      .catch(() => {
+        console.error("Error joining project");
       })
       .finally(() => {
         setIsJoiningLoading(false);
@@ -43,63 +49,23 @@ export function JoinProjectModal(props: TJoinProjectModalProps) {
   };
 
   return (
-    <Transition.Root show={isOpen} as={Fragment}>
-      <Dialog as="div" className="relative z-20" onClose={handleClose}>
-        <Transition.Child
-          as={Fragment}
-          enter="ease-out duration-300"
-          enterFrom="opacity-0"
-          enterTo="opacity-100"
-          leave="ease-in duration-200"
-          leaveFrom="opacity-100"
-          leaveTo="opacity-0"
-        >
-          <div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
-        </Transition.Child>
-
-        <div className="fixed inset-0 z-20 overflow-y-auto">
-          <div className="flex min-h-full items-center justify-center p-4 text-center sm:p-0">
-            <Transition.Child
-              as={Fragment}
-              enter="ease-out duration-300"
-              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-              enterTo="opacity-100 translate-y-0 sm:scale-100"
-              leave="ease-in duration-200"
-              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-            >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-custom-background-100 px-5 py-8 text-left shadow-custom-shadow-md transition-all sm:w-full sm:max-w-xl sm:p-6">
-                <div className="space-y-5">
-                  <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-custom-text-100">
-                    Join Project?
-                  </Dialog.Title>
-                  <p>
-                    Are you sure you want to join the project{" "}
-                    <span className="break-words font-semibold">{project?.name}</span>? Please click the &apos;Join
-                    Project&apos; button below to continue.
-                  </p>
-                  <div className="space-y-3" />
-                </div>
-                <div className="mt-5 flex justify-end gap-2">
-                  <Button variant="neutral-primary" size="sm" onClick={handleClose}>
-                    Cancel
-                  </Button>
-                  <Button
-                    variant="primary"
-                    size="sm"
-                    tabIndex={1}
-                    type="submit"
-                    onClick={handleJoin}
-                    loading={isJoiningLoading}
-                  >
-                    {isJoiningLoading ? "Joining..." : "Join Project"}
-                  </Button>
-                </div>
-              </Dialog.Panel>
-            </Transition.Child>
-          </div>
-        </div>
-      </Dialog>
-    </Transition.Root>
+    <ModalCore isOpen={isOpen} handleClose={handleClose} position={EModalPosition.CENTER} width={EModalWidth.XL}>
+      <div className="space-y-5 px-5 py-8 sm:p-6">
+        <h3 className="text-16 leading-6 font-medium text-primary">Join Project?</h3>
+        <p>
+          Are you sure you want to join the project <span className="font-semibold break-words">{project?.name}</span>?
+          Please click the &apos;Join Project&apos; button below to continue.
+        </p>
+        <div className="space-y-3" />
+      </div>
+      <div className="mt-5 flex justify-end gap-2 px-5 pb-8 sm:px-6 sm:pb-6">
+        <Button variant="secondary" size="lg" onClick={handleClose}>
+          Cancel
+        </Button>
+        <Button variant="primary" size="lg" tabIndex={1} type="submit" onClick={handleJoin} loading={isJoiningLoading}>
+          {isJoiningLoading ? "Joining..." : "Join Project"}
+        </Button>
+      </div>
+    </ModalCore>
   );
 }
diff --git a/apps/web/core/components/project/leave-project-modal.tsx b/apps/web/core/components/project/leave-project-modal.tsx
index c8e1f7ee6..262a1237b 100644
--- a/apps/web/core/components/project/leave-project-modal.tsx
+++ b/apps/web/core/components/project/leave-project-modal.tsx
@@ -1,20 +1,19 @@
-import { Fragment } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 import { Controller, useForm } from "react-hook-form";
-// headless ui
 import { AlertTriangleIcon } from "lucide-react";
-import { Dialog, Transition } from "@headlessui/react";
-// types
-import { MEMBER_TRACKER_EVENTS } from "@plane/constants";
+// Plane imports
 import { Button } from "@plane/propel/button";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { IProject } from "@plane/types";
-// ui
-import { Input } from "@plane/ui";
-// constants
+import { Input, EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
 // hooks
-import { captureError, captureSuccess } from "@/helpers/event-tracker.helper";
 import { useUserPermissions } from "@/hooks/store/user";
 import { useAppRouter } from "@/hooks/use-app-router";
 
@@ -64,21 +63,8 @@ export const LeaveProjectModal = observer(function LeaveProjectModal(props: ILea
           return leaveProject(workspaceSlug.toString(), project.id)
             .then(() => {
               handleClose();
-              captureSuccess({
-                eventName: MEMBER_TRACKER_EVENTS.project.leave,
-                payload: {
-                  project: project.id,
-                },
-              });
             })
-            .catch((err) => {
-              captureError({
-                eventName: MEMBER_TRACKER_EVENTS.project.leave,
-                payload: {
-                  project: project.id,
-                },
-                error: err,
-              });
+            .catch((_err) => {
               setToast({
                 type: TOAST_TYPE.ERROR,
                 title: "Error!",
@@ -109,113 +95,82 @@ export const LeaveProjectModal = observer(function LeaveProjectModal(props: ILea
   };
 
   return (
-    <Transition.Root show={isOpen} as={Fragment}>
-      <Dialog as="div" className="relative z-20" onClose={handleClose}>
-        <Transition.Child
-          as={Fragment}
-          enter="ease-out duration-300"
-          enterFrom="opacity-0"
-          enterTo="opacity-100"
-          leave="ease-in duration-200"
-          leaveFrom="opacity-100"
-          leaveTo="opacity-0"
-        >
-          <div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
-        </Transition.Child>
-
-        <div className="fixed inset-0 z-20 overflow-y-auto">
-          <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
-            <Transition.Child
-              as={Fragment}
-              enter="ease-out duration-300"
-              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-              enterTo="opacity-100 translate-y-0 sm:scale-100"
-              leave="ease-in duration-200"
-              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-            >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-custom-background-100 text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-full sm:max-w-2xl">
-                <form onSubmit={handleSubmit(onSubmit)} className="flex flex-col gap-6 p-6">
-                  <div className="flex w-full items-center justify-start gap-6">
-                    <span className="place-items-center rounded-full bg-red-500/20 p-4">
-                      <AlertTriangleIcon className="h-6 w-6 text-red-600" aria-hidden="true" />
-                    </span>
-                    <span className="flex items-center justify-start">
-                      <h3 className="text-xl font-medium 2xl:text-2xl">Leave Project</h3>
-                    </span>
-                  </div>
-
-                  <span>
-                    <p className="text-sm leading-7 text-custom-text-200">
-                      Are you sure you want to leave the project -
-                      <span className="font-medium text-custom-text-100">{` "${project?.name}" `}</span>? All of the
-                      work items associated with you will become inaccessible.
-                    </p>
-                  </span>
-
-                  <div className="text-custom-text-200">
-                    <p className="break-words text-sm ">
-                      Enter the project name <span className="font-medium text-custom-text-100">{project?.name}</span>{" "}
-                      to continue:
-                    </p>
-                    <Controller
-                      control={control}
-                      name="projectName"
-                      rules={{
-                        required: "Label title is required",
-                      }}
-                      render={({ field: { value, onChange, ref } }) => (
-                        <Input
-                          id="projectName"
-                          name="projectName"
-                          type="text"
-                          value={value}
-                          onChange={onChange}
-                          ref={ref}
-                          hasError={Boolean(errors.projectName)}
-                          placeholder="Enter project name"
-                          className="mt-2 w-full"
-                        />
-                      )}
-                    />
-                  </div>
-
-                  <div className="text-custom-text-200">
-                    <p className="text-sm">
-                      To confirm, type <span className="font-medium text-custom-text-100">Leave Project</span> below:
-                    </p>
-                    <Controller
-                      control={control}
-                      name="confirmLeave"
-                      render={({ field: { value, onChange, ref } }) => (
-                        <Input
-                          id="confirmLeave"
-                          name="confirmLeave"
-                          type="text"
-                          value={value}
-                          onChange={onChange}
-                          ref={ref}
-                          hasError={Boolean(errors.confirmLeave)}
-                          placeholder="Enter 'leave project'"
-                          className="mt-2 w-full"
-                        />
-                      )}
-                    />
-                  </div>
-                  <div className="flex justify-end gap-2">
-                    <Button variant="neutral-primary" size="sm" onClick={handleClose}>
-                      Cancel
-                    </Button>
-                    <Button variant="danger" size="sm" type="submit" loading={isSubmitting}>
-                      {isSubmitting ? "Leaving..." : "Leave Project"}
-                    </Button>
-                  </div>
-                </form>
-              </Dialog.Panel>
-            </Transition.Child>
-          </div>
+    <ModalCore isOpen={isOpen} handleClose={handleClose} position={EModalPosition.CENTER} width={EModalWidth.XXL}>
+      <form onSubmit={handleSubmit(onSubmit)} className="flex flex-col gap-6 p-6">
+        <div className="flex w-full items-center justify-start gap-6">
+          <span className="place-items-center rounded-full bg-danger-subtle p-4">
+            <AlertTriangleIcon className="h-6 w-6 text-danger-primary" aria-hidden="true" />
+          </span>
+          <span className="flex items-center justify-start">
+            <h3 className="text-18 font-medium 2xl:text-20">Leave Project</h3>
+          </span>
         </div>
-      </Dialog>
-    </Transition.Root>
+
+        <span>
+          <p className="text-13 leading-7 text-secondary">
+            Are you sure you want to leave the project -
+            <span className="font-medium text-primary">{` "${project?.name}" `}</span>? All of the work items associated
+            with you will become inaccessible.
+          </p>
+        </span>
+
+        <div className="text-secondary">
+          <p className="text-13 break-words">
+            Enter the project name <span className="font-medium text-primary">{project?.name}</span> to continue:
+          </p>
+          <Controller
+            control={control}
+            name="projectName"
+            rules={{
+              required: "Label title is required",
+            }}
+            render={({ field: { value, onChange, ref } }) => (
+              <Input
+                id="projectName"
+                name="projectName"
+                type="text"
+                value={value}
+                onChange={onChange}
+                ref={ref}
+                hasError={Boolean(errors.projectName)}
+                placeholder="Enter project name"
+                className="mt-2 w-full"
+              />
+            )}
+          />
+        </div>
+
+        <div className="text-secondary">
+          <p className="text-13">
+            To confirm, type <span className="font-medium text-primary">Leave Project</span> below:
+          </p>
+          <Controller
+            control={control}
+            name="confirmLeave"
+            render={({ field: { value, onChange, ref } }) => (
+              <Input
+                id="confirmLeave"
+                name="confirmLeave"
+                type="text"
+                value={value}
+                onChange={onChange}
+                ref={ref}
+                hasError={Boolean(errors.confirmLeave)}
+                placeholder="Enter 'leave project'"
+                className="mt-2 w-full"
+              />
+            )}
+          />
+        </div>
+        <div className="flex justify-end gap-2">
+          <Button variant="secondary" size="lg" onClick={handleClose}>
+            Cancel
+          </Button>
+          <Button variant="error-fill" size="lg" type="submit" loading={isSubmitting}>
+            {isSubmitting ? "Leaving..." : "Leave Project"}
+          </Button>
+        </div>
+      </form>
+    </ModalCore>
   );
 });
diff --git a/apps/web/core/components/project/member-header-column.tsx b/apps/web/core/components/project/member-header-column.tsx
index f29108724..6dd57bea2 100644
--- a/apps/web/core/components/project/member-header-column.tsx
+++ b/apps/web/core/components/project/member-header-column.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // ui
 import { observer } from "mobx-react";
 import { ArrowDownWideNarrow, ArrowUpNarrowWide, CheckIcon, ChevronDownIcon, Eraser, MoveRight } from "lucide-react";
@@ -41,7 +47,7 @@ export const MemberHeaderColumn = observer(function MemberHeaderColumn(props: Pr
       customButtonTabIndex={-1}
       className="!w-full"
       customButton={
-        <div className="flex w-full cursor-pointer items-center justify-between gap-1.5 py-2 text-sm text-custom-text-200 hover:text-custom-text-100">
+        <div className="flex w-full cursor-pointer items-center justify-between gap-1.5 py-2 text-13 text-secondary hover:text-primary">
           <span>{t(propertyDetails.i18n_title)}</span>
           <div className="ml-3 flex">
             {(activeSortingProperty === propertyDetails.ascendingOrderKey ||
@@ -67,8 +73,8 @@ export const MemberHeaderColumn = observer(function MemberHeaderColumn(props: Pr
             <div
               className={`flex items-center justify-between gap-1.5 px-1 ${
                 activeSortingProperty === propertyDetails.ascendingOrderKey
-                  ? "text-custom-text-100"
-                  : "text-custom-text-200 hover:text-custom-text-100"
+                  ? "text-primary"
+                  : "text-secondary hover:text-primary"
               }`}
             >
               <div className="flex items-center gap-2">
@@ -85,8 +91,8 @@ export const MemberHeaderColumn = observer(function MemberHeaderColumn(props: Pr
             <div
               className={`flex items-center justify-between gap-1.5 px-1 ${
                 activeSortingProperty === propertyDetails.descendingOrderKey
-                  ? "text-custom-text-100"
-                  : "text-custom-text-200 hover:text-custom-text-100"
+                  ? "text-primary"
+                  : "text-secondary hover:text-primary"
               }`}
             >
               <div className="flex items-center gap-2">
diff --git a/apps/web/core/components/project/member-list-item.tsx b/apps/web/core/components/project/member-list-item.tsx
index 299daebbb..8c0b388c0 100644
--- a/apps/web/core/components/project/member-list-item.tsx
+++ b/apps/web/core/components/project/member-list-item.tsx
@@ -1,10 +1,13 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 // plane imports
-import { MEMBER_TRACKER_EVENTS } from "@plane/constants";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import { Table } from "@plane/ui";
-// helpers
-import { captureError, captureSuccess } from "@/helpers/event-tracker.helper";
 // hooks
 import { useMember } from "@/hooks/store/use-member";
 import { useUser, useUserPermissions } from "@/hooks/store/user";
@@ -45,21 +48,8 @@ export const ProjectMemberListItem = observer(function ProjectMemberListItem(pro
       await leaveProject(workspaceSlug.toString(), projectId.toString())
         .then(async () => {
           router.push(`/${workspaceSlug}/projects`);
-          captureSuccess({
-            eventName: MEMBER_TRACKER_EVENTS.project.leave,
-            payload: {
-              project: projectId,
-            },
-          });
         })
         .catch((err) => {
-          captureError({
-            eventName: MEMBER_TRACKER_EVENTS.project.leave,
-            payload: {
-              project: projectId,
-            },
-            error: err,
-          });
           setToast({
             type: TOAST_TYPE.ERROR,
             title: "You can’t leave this project yet.",
@@ -91,10 +81,10 @@ export const ProjectMemberListItem = observer(function ProjectMemberListItem(pro
         columns={columns}
         data={(memberDetails?.filter((member): member is IProjectMemberDetails => member !== null) ?? []) as any}
         keyExtractor={(rowData) => rowData?.member.id ?? ""}
-        tHeadClassName="border-b border-custom-border-100"
-        thClassName="text-left font-medium divide-x-0 text-custom-text-400"
+        tHeadClassName="border-b border-subtle"
+        thClassName="text-left font-medium divide-x-0 text-placeholder"
         tBodyClassName="divide-y-0"
-        tBodyTrClassName="divide-x-0 p-4 h-[40px] text-custom-text-200"
+        tBodyTrClassName="divide-x-0 p-4 h-[40px] text-secondary"
         tHeadTrClassName="divide-x-0"
       />
     </>
diff --git a/apps/web/core/components/project/member-list.tsx b/apps/web/core/components/project/member-list.tsx
index 260015427..3c72ef57f 100644
--- a/apps/web/core/components/project/member-list.tsx
+++ b/apps/web/core/components/project/member-list.tsx
@@ -1,10 +1,16 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useState } from "react";
 import { observer } from "mobx-react";
-import { Search } from "lucide-react";
 // plane imports
 import { EUserPermissions, EUserPermissionsLevel, MEMBER_TRACKER_ELEMENTS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { Button } from "@plane/propel/button";
+import { SearchIcon } from "@plane/propel/icons";
 // components
 import { MembersSettingsLoader } from "@/components/ui/loader/settings/members";
 // hooks
@@ -75,13 +81,13 @@ export const ProjectMemberList = observer(function ProjectMemberList(props: TPro
         projectId={projectId}
         workspaceSlug={workspaceSlug}
       />
-      <div className="flex items-center justify-between gap-4 py-2 overflow-x-hidden border-b border-custom-border-100">
-        <div className="text-base font-semibold">{t("common.members")}</div>
+      <div className="flex items-center justify-between gap-4 overflow-x-hidden border-b border-subtle py-2">
+        <div className="text-14 font-semibold">{t("common.members")}</div>
         <div className="flex items-center gap-2">
-          <div className="flex items-center justify-start gap-1.5 rounded-md border border-custom-border-200 bg-custom-background-100 px-2 py-1">
-            <Search className="h-3.5 w-3.5" />
+          <div className="flex items-center justify-start gap-1.5 rounded-md border border-subtle bg-surface-1 px-2 py-1">
+            <SearchIcon className="h-3.5 w-3.5" />
             <input
-              className="w-full max-w-[234px] border-none bg-transparent text-sm focus:outline-none placeholder:text-custom-text-400"
+              className="w-full max-w-[234px] border-none bg-transparent text-13 placeholder:text-placeholder focus:outline-none"
               placeholder="Search"
               value={searchQuery}
               autoFocus
@@ -96,7 +102,6 @@ export const ProjectMemberList = observer(function ProjectMemberList(props: TPro
           {isAdmin && (
             <Button
               variant="primary"
-              size="sm"
               onClick={() => {
                 setInviteModal(true);
               }}
@@ -110,7 +115,7 @@ export const ProjectMemberList = observer(function ProjectMemberList(props: TPro
       {!projectMemberIds ? (
         <MembersSettingsLoader />
       ) : (
-        <div className="divide-y divide-custom-border-100 overflow-scroll">
+        <div className="divide-y divide-subtle overflow-scroll">
           {searchedProjectMembers.length !== 0 && (
             <ProjectMemberListItem
               memberDetails={memberDetails ?? []}
@@ -119,7 +124,7 @@ export const ProjectMemberList = observer(function ProjectMemberList(props: TPro
             />
           )}
           {searchedProjectMembers.length === 0 && (
-            <h4 className="text-sm mt-16 text-center text-custom-text-400">{t("no_matching_members")}</h4>
+            <h4 className="mt-16 text-center text-13 text-placeholder">{t("no_matching_members")}</h4>
           )}
         </div>
       )}
diff --git a/apps/web/core/components/project/member-select.tsx b/apps/web/core/components/project/member-select.tsx
index 6a5611fad..b55609c3d 100644
--- a/apps/web/core/components/project/member-select.tsx
+++ b/apps/web/core/components/project/member-select.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
@@ -57,7 +63,7 @@ export const MemberSelect = observer(function MemberSelect(props: Props) {
     <CustomSearchSelect
       value={value}
       label={
-        <div className="flex items-center gap-2 h-3.5">
+        <div className="flex h-3.5 items-center gap-2">
           {selectedOption && (
             <Avatar name={selectedOption.member?.display_name} src={getFileURL(selectedOption.member?.avatar_url)} />
           )}
@@ -65,13 +71,13 @@ export const MemberSelect = observer(function MemberSelect(props: Props) {
             selectedOption.member?.display_name
           ) : (
             <div className="flex items-center gap-2">
-              <Ban className="h-3.5 w-3.5 rotate-90 text-custom-sidebar-text-400" />
-              <span className="text-sm text-custom-sidebar-text-400">None</span>
+              <Ban className="h-3.5 w-3.5 rotate-90 text-placeholder" />
+              <span className="text-13 text-placeholder">None</span>
             </div>
           )}
         </div>
       }
-      buttonClassName="!px-3 !py-2 bg-custom-background-100"
+      buttonClassName="!px-3 !py-2 bg-surface-1"
       options={
         options &&
         options && [
@@ -81,8 +87,8 @@ export const MemberSelect = observer(function MemberSelect(props: Props) {
             query: "none",
             content: (
               <div className="flex items-center gap-2">
-                <Ban className="h-3.5 w-3.5 rotate-90 text-custom-sidebar-text-400" />
-                <span className="py-0.5 text-sm text-custom-sidebar-text-400">None</span>
+                <Ban className="h-3.5 w-3.5 rotate-90 text-placeholder" />
+                <span className="py-0.5 text-13 text-placeholder">None</span>
               </div>
             ),
           },
diff --git a/apps/web/core/components/project/multi-select-modal.tsx b/apps/web/core/components/project/multi-select-modal.tsx
index 56804d05a..0db2cb63d 100644
--- a/apps/web/core/components/project/multi-select-modal.tsx
+++ b/apps/web/core/components/project/multi-select-modal.tsx
@@ -1,14 +1,19 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React, { useEffect, useMemo, useRef, useState } from "react";
 import { xor } from "lodash-es";
 import { observer } from "mobx-react";
 import { useTheme } from "next-themes";
-import { Search } from "lucide-react";
 import { Combobox } from "@headlessui/react";
 // plane ui
 import { useTranslation } from "@plane/i18n";
 import { Button } from "@plane/propel/button";
 import { Logo } from "@plane/propel/emoji-icon-picker";
-import { CloseIcon } from "@plane/propel/icons";
+import { SearchIcon, CloseIcon } from "@plane/propel/icons";
 import { Checkbox, EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
 import { cn } from "@plane/utils";
 // assets
@@ -84,10 +89,10 @@ export const ProjectMultiSelectModal = observer(function ProjectMultiSelectModal
   return (
     <ModalCore isOpen={isOpen} width={EModalWidth.LG} position={EModalPosition.TOP} handleClose={handleClose}>
       <Combobox as="div" multiple value={selectedProjectIds} onChange={handleSelectedProjectChange}>
-        <div className="flex items-center gap-2 px-4 border-b border-custom-border-100">
-          <Search className="flex-shrink-0 size-4 text-custom-text-400" aria-hidden="true" />
+        <div className="flex items-center gap-2 border-b border-subtle px-4">
+          <SearchIcon className="size-4 flex-shrink-0 text-placeholder" aria-hidden="true" />
           <Combobox.Input
-            className="h-12 w-full border-0 bg-transparent text-sm text-custom-text-100 outline-none placeholder:text-custom-text-400 focus:ring-0"
+            className="h-12 w-full border-0 bg-transparent text-13 text-primary outline-none placeholder:text-placeholder focus:ring-0"
             placeholder="Search for projects"
             displayValue={() => ""}
             value={searchTerm}
@@ -95,23 +100,23 @@ export const ProjectMultiSelectModal = observer(function ProjectMultiSelectModal
           />
         </div>
         {selectedProjectIds.length > 0 && (
-          <div className="flex flex-wrap gap-2 pt-2 px-4">
+          <div className="flex flex-wrap gap-2 px-4 pt-2">
             {selectedProjectIds.map((projectId) => {
               const projectDetails = projectDetailsMap.get(projectId);
               if (!projectDetails) return null;
               return (
                 <div
                   key={projectDetails.id}
-                  className="group flex items-center gap-1.5 bg-custom-background-90 px-2 py-1 rounded cursor-pointer"
+                  className="group flex cursor-pointer items-center gap-1.5 rounded-sm bg-surface-2 px-2 py-1"
                   onClick={() => {
                     handleSelectedProjectChange(selectedProjectIds.filter((id) => id !== projectDetails.id));
                   }}
                 >
                   <Logo logo={projectDetails.logo_props} size={14} />
-                  <p className="text-xs truncate text-custom-text-300 group-hover:text-custom-text-200 transition-colors">
+                  <p className="truncate text-11 text-tertiary transition-colors group-hover:text-secondary">
                     {projectDetails.identifier}
                   </p>
-                  <CloseIcon className="size-3 flex-shrink-0 text-custom-text-400 group-hover:text-custom-text-200 transition-colors" />
+                  <CloseIcon className="size-3 flex-shrink-0 text-placeholder transition-colors group-hover:text-secondary" />
                 </div>
               );
             })}
@@ -119,7 +124,7 @@ export const ProjectMultiSelectModal = observer(function ProjectMultiSelectModal
         )}
         <Combobox.Options
           static
-          className="py-2 vertical-scrollbar scrollbar-md max-h-80 scroll-py-2 overflow-y-auto transition-[height] duration-200 ease-in-out"
+          className="vertical-scrollbar scrollbar-md max-h-80 scroll-py-2 overflow-y-auto py-2 transition-[height] duration-200 ease-in-out"
         >
           {filteredProjectIds.length === 0 ? (
             <div className="flex flex-col items-center justify-center px-3 py-8 text-center">
@@ -131,7 +136,7 @@ export const ProjectMultiSelectModal = observer(function ProjectMultiSelectModal
             </div>
           ) : (
             <ul
-              className={cn("text-custom-text-100", {
+              className={cn("text-primary", {
                 "px-2": filteredProjectIds.length > 0,
               })}
             >
@@ -145,21 +150,21 @@ export const ProjectMultiSelectModal = observer(function ProjectMultiSelectModal
                     value={projectDetails.id}
                     className={({ active }) =>
                       cn(
-                        "flex items-center justify-between gap-2 truncate w-full cursor-pointer select-none rounded-md p-2 text-custom-text-200 transition-colors",
+                        "flex w-full cursor-pointer items-center justify-between gap-2 truncate rounded-md p-2 text-secondary transition-colors select-none",
                         {
-                          "bg-custom-background-80": active,
-                          "text-custom-text-100": isProjectSelected,
+                          "bg-layer-1": active,
+                          "text-primary": isProjectSelected,
                         }
                       )
                     }
                   >
                     <div className="flex items-center gap-2 truncate">
-                      <span className="flex-shrink-0 flex items-center gap-2.5">
+                      <span className="flex flex-shrink-0 items-center gap-2.5">
                         <Checkbox checked={isProjectSelected} />
                         <Logo logo={projectDetails.logo_props} size={16} />
                       </span>
-                      <span className="flex-shrink-0 text-[10px]">{projectDetails.identifier}</span>
-                      <p className="text-sm truncate">{projectDetails.name}</p>
+                      <span className="flex-shrink-0 text-10">{projectDetails.identifier}</span>
+                      <p className="truncate text-13">{projectDetails.name}</p>
                     </div>
                   </Combobox.Option>
                 );
@@ -168,14 +173,14 @@ export const ProjectMultiSelectModal = observer(function ProjectMultiSelectModal
           )}
         </Combobox.Options>
       </Combobox>
-      <div className="flex items-center justify-end gap-2 p-3 border-t border-custom-border-100">
-        <Button variant="neutral-primary" size="sm" onClick={handleClose}>
+      <div className="flex items-center justify-end gap-2 border-t border-subtle p-3">
+        <Button variant="secondary" size="lg" onClick={handleClose}>
           {t("cancel")}
         </Button>
         <Button
           ref={moveButtonRef}
           variant="primary"
-          size="sm"
+          size="lg"
           onClick={handleSubmit}
           loading={isSubmitting}
           disabled={!areSelectedProjectsChanged}
diff --git a/apps/web/core/components/project/project-feature-update.tsx b/apps/web/core/components/project/project-feature-update.tsx
index e06bf988c..b2eac27f0 100644
--- a/apps/web/core/components/project/project-feature-update.tsx
+++ b/apps/web/core/components/project/project-feature-update.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import Link from "next/link";
 import { useTranslation } from "@plane/i18n";
@@ -32,20 +38,20 @@ export const ProjectFeatureUpdate = observer(function ProjectFeatureUpdate(props
       <Row className="py-6">
         <ProjectFeaturesList workspaceSlug={workspaceSlug} projectId={projectId} isAdmin />
       </Row>
-      <div className="flex items-center justify-between gap-2 mt-4 px-6 py-4 border-t border-custom-border-100">
-        <div className="flex gap-1 text-sm text-custom-text-300 font-medium">
+      <div className="mt-4 flex items-center justify-between gap-2 border-t border-subtle px-6 py-4">
+        <div className="flex gap-1 text-13 font-medium text-tertiary">
           {t("congrats")}
           <Logo logo={currentProjectDetails.logo_props} /> <p className="break-all">{currentProjectDetails.name}</p>{" "}
           {t("created").toLowerCase()}.
         </div>
         <div className="flex gap-2">
-          <Button variant="neutral-primary" size="sm" onClick={onClose} tabIndex={1}>
+          <Button variant="secondary" size="lg" onClick={onClose} tabIndex={1}>
             {t("close")}
           </Button>
           <Link
             href={`/${workspaceSlug}/projects/${projectId}/issues`}
             onClick={onClose}
-            className={getButtonStyling("primary", "sm")}
+            className={getButtonStyling("primary", "lg")}
             tabIndex={2}
           >
             {t("open_project")}
diff --git a/apps/web/core/components/project/project-network-icon.tsx b/apps/web/core/components/project/project-network-icon.tsx
index 5d9f592d3..d48dae932 100644
--- a/apps/web/core/components/project/project-network-icon.tsx
+++ b/apps/web/core/components/project/project-network-icon.tsx
@@ -1,6 +1,12 @@
-import { Lock, Globe2 } from "lucide-react";
-// plane imports
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { TNetworkChoiceIconKey } from "@plane/constants";
+// plane imports
+import { GlobeIcon, LockIcon } from "@plane/propel/icons";
 import { cn } from "@plane/utils";
 
 type Props = {
@@ -14,9 +20,9 @@ export function ProjectNetworkIcon(props: Props) {
   const getProjectNetworkIcon = () => {
     switch (iconKey) {
       case "Lock":
-        return Lock;
+        return LockIcon;
       case "Globe2":
-        return Globe2;
+        return GlobeIcon;
       default:
         return null;
     }
diff --git a/apps/web/core/components/project/project-settings-member-defaults.tsx b/apps/web/core/components/project/project-settings-member-defaults.tsx
index 70d652ec0..e505b7beb 100644
--- a/apps/web/core/components/project/project-settings-member-defaults.tsx
+++ b/apps/web/core/components/project/project-settings-member-defaults.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { ReactNode } from "react";
 import { useEffect } from "react";
 import { observer } from "mobx-react";
@@ -32,8 +38,8 @@ function DefaultSettingItem({ title, description, children }: TDefaultSettingIte
   return (
     <div className="flex items-center justify-between gap-x-2">
       <div className="flex flex-col gap-0.5">
-        <h4 className="text-sm font-medium">{title}</h4>
-        <p className="text-xs text-custom-text-300">{description}</p>
+        <h4 className="text-13 font-medium">{title}</h4>
+        <p className="text-11 text-tertiary">{description}</p>
       </div>
       <div className="w-full max-w-48 sm:max-w-64">{children}</div>
     </div>
@@ -132,7 +138,7 @@ export const ProjectSettingsMemberDefaults = observer(function ProjectSettingsMe
   };
 
   return (
-    <div className="flex flex-col gap-y-6 my-6">
+    <div className="my-6 flex flex-col gap-y-6">
       <DefaultSettingItem title="Project Lead" description="Select the project lead for the project.">
         {currentProjectDetails ? (
           <Controller
diff --git a/apps/web/core/components/project/publish-project/modal.tsx b/apps/web/core/components/project/publish-project/modal.tsx
index cc3695697..2ab3e2c04 100644
--- a/apps/web/core/components/project/publish-project/modal.tsx
+++ b/apps/web/core/components/project/publish-project/modal.tsx
@@ -1,11 +1,18 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useEffect, useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 import { Controller, useForm } from "react-hook-form";
-import { Check, ExternalLink, Globe2 } from "lucide-react";
+
 // types
 import { SPACE_BASE_PATH, SPACE_BASE_URL } from "@plane/constants";
 import { Button } from "@plane/propel/button";
+import { GlobeIcon, NewTabIcon, CheckIcon } from "@plane/propel/icons";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { TProjectPublishLayouts, TProjectPublishSettings } from "@plane/types";
 // ui
@@ -173,9 +180,14 @@ export const PublishProjectModal = observer(function PublishProjectModal(props:
     <ModalCore isOpen={isOpen} handleClose={handleClose} width={EModalWidth.XXL}>
       <form onSubmit={handleSubmit(handleFormSubmit)}>
         <div className="flex items-center justify-between gap-2 p-5">
-          <h5 className="text-xl font-medium text-custom-text-200">Publish project</h5>
+          <h5 className="text-18 font-medium text-secondary">Publish project</h5>
           {isProjectPublished && (
-            <Button variant="danger" onClick={() => handleUnPublishProject(watch("id") ?? "")} loading={isUnPublishing}>
+            <Button
+              variant="error-fill"
+              size="lg"
+              onClick={() => handleUnPublishProject(watch("id") ?? "")}
+              loading={isUnPublishing}
+            >
               {isUnPublishing ? "Unpublishing" : "Unpublish"}
             </Button>
           )}
@@ -190,40 +202,40 @@ export const PublishProjectModal = observer(function PublishProjectModal(props:
             <Loader.Item height="30px" />
           </Loader>
         ) : (
-          <div className="px-5 space-y-4">
+          <div className="space-y-4 px-5">
             {isProjectPublished && projectPublishSettings && (
               <>
-                <div className="bg-custom-background-80 border border-custom-border-300 rounded-md py-1.5 pl-4 pr-1 flex items-center justify-between gap-2">
+                <div className="flex items-center justify-between gap-2 rounded-md border border-strong py-1.5 pr-1 pl-4">
                   <a
                     href={publishLink}
-                    className="text-sm text-custom-text-200 truncate"
+                    className="truncate text-13 text-secondary"
                     target="_blank"
                     rel="noopener noreferrer"
                   >
                     {publishLink}
                   </a>
-                  <div className="flex-shrink-0 flex items-center gap-1">
+                  <div className="flex flex-shrink-0 items-center gap-1">
                     <a
                       href={publishLink}
-                      className="size-8 grid place-items-center bg-custom-background-90 hover:bg-custom-background-100 rounded"
+                      className="grid size-8 place-items-center rounded-sm bg-layer-3 hover:bg-layer-3-hover"
                       target="_blank"
                       rel="noopener noreferrer"
                     >
-                      <ExternalLink className="size-4" />
+                      <NewTabIcon className="size-4" />
                     </a>
                     <button
                       type="button"
-                      className="h-8 bg-custom-background-90 hover:bg-custom-background-100 rounded text-xs font-medium py-2 px-3"
+                      className="h-8 rounded-sm bg-layer-3 px-3 py-2 text-11 font-medium hover:bg-layer-3-hover"
                       onClick={handleCopyLink}
                     >
                       Copy link
                     </button>
                   </div>
                 </div>
-                <p className="text-sm font-medium text-custom-primary-100 flex items-center gap-1 mt-3">
-                  <span className="relative grid place-items-center size-2.5">
-                    <span className="animate-ping absolute inline-flex size-full rounded-full bg-custom-primary-100 opacity-75" />
-                    <span className="relative inline-flex rounded-full size-1.5 bg-custom-primary-100" />
+                <p className="mt-3 flex items-center gap-1 text-13 font-medium text-accent-primary">
+                  <span className="relative grid size-2.5 place-items-center">
+                    <span className="absolute inline-flex size-full animate-ping rounded-full bg-accent-primary opacity-75" />
+                    <span className="relative inline-flex size-1.5 rounded-full bg-accent-primary" />
                   </span>
                   This project is now live on web
                 </p>
@@ -231,7 +243,7 @@ export const PublishProjectModal = observer(function PublishProjectModal(props:
             )}
             <div className="space-y-4">
               <div className="relative flex items-center justify-between gap-2">
-                <div className="text-sm">Views</div>
+                <div className="text-13">Views</div>
                 <Controller
                   control={control}
                   name="view_props"
@@ -258,7 +270,7 @@ export const PublishProjectModal = observer(function PublishProjectModal(props:
                           className="flex items-center justify-between gap-2"
                         >
                           {option.label}
-                          {selectedLayouts.includes(option.key) && <Check className="size-3.5 flex-shrink-0" />}
+                          {selectedLayouts.includes(option.key) && <CheckIcon className="size-3.5 flex-shrink-0" />}
                         </CustomSelect.Option>
                       ))}
                     </CustomSelect>
@@ -266,7 +278,7 @@ export const PublishProjectModal = observer(function PublishProjectModal(props:
                 />
               </div>
               <div className="relative flex items-center justify-between gap-2">
-                <div className="text-sm">Allow comments</div>
+                <div className="text-13">Allow comments</div>
                 <Controller
                   control={control}
                   name="is_comments_enabled"
@@ -276,7 +288,7 @@ export const PublishProjectModal = observer(function PublishProjectModal(props:
                 />
               </div>
               <div className="relative flex items-center justify-between gap-2">
-                <div className="text-sm">Allow reactions</div>
+                <div className="text-13">Allow reactions</div>
                 <Controller
                   control={control}
                   name="is_reactions_enabled"
@@ -286,7 +298,7 @@ export const PublishProjectModal = observer(function PublishProjectModal(props:
                 />
               </div>
               <div className="relative flex items-center justify-between gap-2">
-                <div className="text-sm">Allow voting</div>
+                <div className="text-13">Allow voting</div>
                 <Controller
                   control={control}
                   name="is_votes_enabled"
@@ -300,24 +312,24 @@ export const PublishProjectModal = observer(function PublishProjectModal(props:
         )}
 
         {/* modal handlers */}
-        <div className="relative flex items-center justify-between border-t border-custom-border-200 px-5 py-4 mt-4">
-          <div className="flex items-center gap-1 text-sm text-custom-text-400">
-            <Globe2 className="size-3.5" />
-            <div className="text-sm">Anyone with the link can access</div>
+        <div className="relative mt-4 flex items-center justify-between border-t border-subtle px-5 py-4">
+          <div className="flex items-center gap-1 text-13 text-placeholder">
+            <GlobeIcon className="size-3.5" />
+            <div className="text-13">Anyone with the link can access</div>
           </div>
           {!fetchSettingsLoader && (
             <div className="relative flex items-center gap-2">
-              <Button variant="neutral-primary" size="sm" onClick={handleClose}>
+              <Button variant="secondary" size="lg" onClick={handleClose}>
                 Cancel
               </Button>
               {isProjectPublished ? (
                 isDirty && (
-                  <Button variant="primary" size="sm" type="submit" loading={isSubmitting}>
+                  <Button variant="primary" size="lg" type="submit" loading={isSubmitting}>
                     {isSubmitting ? "Updating" : "Update settings"}
                   </Button>
                 )
               ) : (
-                <Button variant="primary" size="sm" type="submit" loading={isSubmitting}>
+                <Button variant="primary" size="lg" type="submit" loading={isSubmitting}>
                   {isSubmitting ? "Publishing" : "Publish"}
                 </Button>
               )}
diff --git a/apps/web/core/components/project/root.tsx b/apps/web/core/components/project/root.tsx
index a9b87f1b5..45dc41be0 100644
--- a/apps/web/core/components/project/root.tsx
+++ b/apps/web/core/components/project/root.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useCallback, useEffect } from "react";
 import { observer } from "mobx-react";
 import { useParams, usePathname } from "next/navigation";
diff --git a/apps/web/core/components/project/search-projects.tsx b/apps/web/core/components/project/search-projects.tsx
index 0310b1cb7..96b08c32a 100644
--- a/apps/web/core/components/project/search-projects.tsx
+++ b/apps/web/core/components/project/search-projects.tsx
@@ -1,15 +1,21 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useRef, useState } from "react";
 import { observer } from "mobx-react";
-import { Search } from "lucide-react";
 // plane hooks
 import { useOutsideClickDetector } from "@plane/hooks";
 // i18n
 import { useTranslation } from "@plane/i18n";
-import { CloseIcon } from "@plane/propel/icons";
+import { SearchIcon, CloseIcon } from "@plane/propel/icons";
 // helpers
 import { cn } from "@plane/utils";
 // hooks
 import { useProjectFilter } from "@/hooks/store/use-project-filter";
+import { IconButton } from "@plane/propel/icon-button";
 
 export const ProjectSearch = observer(function ProjectSearch() {
   // i18n
@@ -35,29 +41,29 @@ export const ProjectSearch = observer(function ProjectSearch() {
   return (
     <div className="flex items-center">
       {!isSearchOpen && (
-        <button
-          type="button"
-          className="-mr-1 p-2 hover:bg-custom-background-80 rounded text-custom-text-400 grid place-items-center"
+        <IconButton
+          variant="ghost"
+          size="lg"
+          className="-mr-1"
           onClick={() => {
             setIsSearchOpen(true);
             inputRef.current?.focus();
           }}
-        >
-          <Search className="h-3.5 w-3.5" />
-        </button>
+          icon={SearchIcon}
+        />
       )}
       <div
         className={cn(
-          "ml-auto flex items-center justify-start gap-1 rounded-md border border-transparent bg-custom-background-100 text-custom-text-400 w-0 transition-[width] ease-linear overflow-hidden opacity-0",
+          "ml-auto flex w-0 items-center justify-start gap-1 overflow-hidden rounded-md border border-transparent bg-surface-1 text-placeholder opacity-0 transition-[width] ease-linear",
           {
-            "w-30 md:w-64 px-2.5 py-1.5 border-custom-border-200 opacity-100": isSearchOpen,
+            "w-30 border-subtle px-2.5 py-1.5 opacity-100 md:w-64": isSearchOpen,
           }
         )}
       >
-        <Search className="h-3.5 w-3.5" />
+        <SearchIcon className="h-3.5 w-3.5" />
         <input
           ref={inputRef}
-          className="w-full max-w-[234px] border-none bg-transparent text-sm text-custom-text-100 placeholder:text-custom-text-400 focus:outline-none"
+          className="w-full max-w-[234px] border-none bg-transparent text-13 text-primary placeholder:text-placeholder focus:outline-none"
           placeholder={t("common.search.label")}
           value={searchQuery}
           onChange={(e) => updateSearchQuery(e.target.value)}
diff --git a/apps/web/core/components/project/send-project-invitation-modal.tsx b/apps/web/core/components/project/send-project-invitation-modal.tsx
index e5f2d7e61..f57369ac1 100644
--- a/apps/web/core/components/project/send-project-invitation-modal.tsx
+++ b/apps/web/core/components/project/send-project-invitation-modal.tsx
@@ -1,19 +1,22 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React, { useEffect } from "react";
 import { observer } from "mobx-react";
 import { useForm, Controller, useFieldArray } from "react-hook-form";
-import { Plus } from "lucide-react";
-import { Dialog, Transition } from "@headlessui/react";
 // plane imports
-import { ROLE, EUserPermissions, MEMBER_TRACKER_EVENTS } from "@plane/constants";
+import { ROLE, EUserPermissions } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { Button } from "@plane/propel/button";
-import { CloseIcon, ChevronDownIcon } from "@plane/propel/icons";
+import { PlusIcon, CloseIcon, ChevronDownIcon } from "@plane/propel/icons";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
-import { Avatar, CustomSelect, CustomSearchSelect } from "@plane/ui";
+import { Avatar, CustomSelect, CustomSearchSelect, EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
 // helpers
 import { getFileURL } from "@plane/utils";
 // hooks
-import { captureError, captureSuccess } from "@/helpers/event-tracker.helper";
 import { useMember } from "@/hooks/store/use-member";
 import { useUserPermissions } from "@/hooks/store/user";
 
@@ -88,23 +91,9 @@ export const SendProjectInvitationModal = observer(function SendProjectInvitatio
           type: TOAST_TYPE.SUCCESS,
           message: "Members added successfully.",
         });
-
-        captureSuccess({
-          eventName: MEMBER_TRACKER_EVENTS.project.add,
-          payload: {
-            members: [...payload.members.map((member) => member.member_id)],
-          },
-        });
       })
       .catch((error) => {
         console.error(error);
-        captureError({
-          eventName: MEMBER_TRACKER_EVENTS.project.add,
-          payload: {
-            members: [...payload.members.map((member) => member.member_id)],
-          },
-          error: error,
-        });
       })
       .finally(() => {
         reset(defaultValues);
@@ -150,7 +139,7 @@ export const SendProjectInvitationModal = observer(function SendProjectInvitatio
         } ${memberDetails?.member.display_name.toLowerCase()}`,
         content: (
           <div className="flex w-full items-center gap-2">
-            <div className="flex-shrink-0 pt-0.5">
+            <div className="shrink-0 pt-0.5">
               <Avatar name={memberDetails?.member.display_name} src={getFileURL(memberDetails?.member.avatar_url)} />
             </div>
             <div className="truncate">
@@ -183,182 +172,142 @@ export const SendProjectInvitationModal = observer(function SendProjectInvitatio
   };
 
   return (
-    <Transition.Root show={isOpen} as={React.Fragment}>
-      <Dialog as="div" className="relative z-20" onClose={handleClose}>
-        <Transition.Child
-          as={React.Fragment}
-          enter="ease-out duration-300"
-          enterFrom="opacity-0"
-          enterTo="opacity-100"
-          leave="ease-in duration-200"
-          leaveFrom="opacity-100"
-          leaveTo="opacity-0"
-        >
-          <div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
-        </Transition.Child>
+    <ModalCore isOpen={isOpen} handleClose={handleClose} position={EModalPosition.CENTER} width={EModalWidth.XXL}>
+      <form onSubmit={handleSubmit(onSubmit)} className="p-5">
+        <div className="space-y-5">
+          <h3 className="text-16 leading-6 font-medium text-primary">
+            {t("project_settings.members.invite_members.title")}
+          </h3>
+          <div className="mt-2">
+            <p className="text-13 text-secondary">{t("project_settings.members.invite_members.sub_heading")}</p>
+          </div>
 
-        <div className="fixed inset-0 z-20 overflow-y-auto">
-          <div className="flex min-h-full items-center justify-center p-4 text-center">
-            <Transition.Child
-              as={React.Fragment}
-              enter="ease-out duration-300"
-              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-              enterTo="opacity-100 translate-y-0 sm:scale-100"
-              leave="ease-in duration-200"
-              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-            >
-              <Dialog.Panel className="relative transform rounded-lg bg-custom-background-100 p-5 text-left shadow-custom-shadow-md transition-all sm:w-full sm:max-w-2xl">
-                <form onSubmit={handleSubmit(onSubmit)}>
-                  <div className="space-y-5">
-                    <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-custom-text-100">
-                      {t("project_settings.members.invite_members.title")}
-                    </Dialog.Title>
-                    <div className="mt-2">
-                      <p className="text-sm text-custom-text-200">
-                        {t("project_settings.members.invite_members.sub_heading")}
-                      </p>
-                    </div>
-
-                    <div className="mb-3 space-y-4">
-                      {fields.map((field, index) => (
-                        <div
-                          key={field.id}
-                          className="group mb-1 flex items-start justify-between gap-x-4 text-sm w-full"
-                        >
-                          <div className="flex flex-col gap-1 flex-grow w-full">
-                            <Controller
-                              control={control}
-                              name={`members.${index}.member_id`}
-                              rules={{ required: "Please select a member" }}
-                              render={({ field: { value, onChange } }) => {
-                                const selectedMember = getWorkspaceMemberDetails(value);
-                                return (
-                                  <CustomSearchSelect
-                                    value={value}
-                                    customButton={
-                                      <button className="flex w-full items-center justify-between gap-1 rounded-md border border-custom-border-200 px-3 py-2 text-left text-sm text-custom-text-200 shadow-sm duration-300 hover:bg-custom-background-80 hover:text-custom-text-100 focus:outline-none">
-                                        {value && value !== "" ? (
-                                          <div className="flex items-center gap-2">
-                                            <Avatar
-                                              name={selectedMember?.member.display_name}
-                                              src={getFileURL(selectedMember?.member.avatar_url ?? "")}
-                                            />
-                                            {selectedMember?.member.display_name}
-                                          </div>
-                                        ) : (
-                                          <div className="flex items-center gap-2 py-0.5">Select co-worker</div>
-                                        )}
-                                        <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />
-                                      </button>
-                                    }
-                                    onChange={(val: string) => {
-                                      onChange(val);
-                                      // Update the role to the workspace role when member ID changes
-                                      const workspaceMemberDetails = getWorkspaceMemberDetails(val);
-                                      const workspaceRole = workspaceMemberDetails?.role ?? 5;
-                                      const newValue = ROLE[workspaceRole].toUpperCase();
-                                      setValue(
-                                        `members.${index}.role`,
-                                        EUserPermissions[newValue as keyof typeof EUserPermissions]
-                                      );
-                                    }}
-                                    options={options}
-                                    optionsClassName="w-48"
+          <div className="mb-3 space-y-4">
+            {fields.map((field, index) => (
+              <div key={field.id} className="group mb-1 flex w-full items-start justify-between gap-x-4 text-13">
+                <div className="flex w-full grow flex-col gap-1">
+                  <Controller
+                    control={control}
+                    name={`members.${index}.member_id`}
+                    rules={{ required: "Please select a member" }}
+                    render={({ field: { value, onChange } }) => {
+                      const selectedMember = getWorkspaceMemberDetails(value);
+                      return (
+                        <CustomSearchSelect
+                          value={value}
+                          customButton={
+                            <button className="shadow-sm flex w-full items-center justify-between gap-1 rounded-md border border-subtle px-3 py-2 text-left text-13 text-secondary duration-300 hover:bg-layer-1 hover:text-primary focus:outline-none">
+                              {value && value !== "" ? (
+                                <div className="flex items-center gap-2">
+                                  <Avatar
+                                    name={selectedMember?.member.display_name}
+                                    src={getFileURL(selectedMember?.member.avatar_url ?? "")}
                                   />
-                                );
-                              }}
-                            />
-                            {errors.members && errors.members[index]?.member_id && (
-                              <span className="px-1 text-sm text-red-500">
-                                {errors.members[index]?.member_id?.message}
-                              </span>
-                            )}
-                          </div>
-
-                          <div className="flex items-center justify-between gap-2 flex-shrink-0 ">
-                            <div className="flex flex-col gap-1">
-                              <Controller
-                                name={`members.${index}.role`}
-                                control={control}
-                                rules={{ required: "Select Role" }}
-                                render={({ field }) => (
-                                  <CustomSelect
-                                    {...field}
-                                    customButton={
-                                      <div className="flex w-24 items-center justify-between gap-1 rounded-md border border-custom-border-200 px-3 py-2.5 text-left text-sm text-custom-text-200 shadow-sm duration-300 hover:bg-custom-background-80 hover:text-custom-text-100 focus:outline-none">
-                                        <span className="capitalize">
-                                          {field.value ? ROLE[field.value] : "Select role"}
-                                        </span>
-                                        <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />
-                                      </div>
-                                    }
-                                    input
-                                  >
-                                    {Object.entries(
-                                      checkCurrentOptionWorkspaceRole(watch(`members.${index}.member_id`))
-                                    ).map(([key, label]) => {
-                                      if (parseInt(key) > (currentProjectRole ?? EUserPermissions.GUEST)) return null;
-
-                                      return (
-                                        <CustomSelect.Option key={key} value={key}>
-                                          {label}
-                                        </CustomSelect.Option>
-                                      );
-                                    })}
-                                  </CustomSelect>
-                                )}
-                              />
-                              {errors.members && errors.members[index]?.role && (
-                                <span className="px-1 text-sm text-red-500">
-                                  {errors.members[index]?.role?.message}
-                                </span>
+                                  {selectedMember?.member.display_name}
+                                </div>
+                              ) : (
+                                <div className="flex items-center gap-2 py-0.5">Select co-worker</div>
                               )}
+                              <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />
+                            </button>
+                          }
+                          onChange={(val: string) => {
+                            onChange(val);
+                            // Update the role to the workspace role when member ID changes
+                            const workspaceMemberDetails = getWorkspaceMemberDetails(val);
+                            const workspaceRole = workspaceMemberDetails?.role ?? 5;
+                            const newValue = ROLE[workspaceRole].toUpperCase();
+                            setValue(
+                              `members.${index}.role`,
+                              EUserPermissions[newValue as keyof typeof EUserPermissions]
+                            );
+                          }}
+                          options={options}
+                          optionsClassName="w-48"
+                        />
+                      );
+                    }}
+                  />
+                  {errors.members && errors.members[index]?.member_id && (
+                    <span className="px-1 text-13 text-danger-primary">
+                      {errors.members[index]?.member_id?.message}
+                    </span>
+                  )}
+                </div>
+
+                <div className="flex shrink-0 items-center justify-between gap-2">
+                  <div className="flex flex-col gap-1">
+                    <Controller
+                      name={`members.${index}.role`}
+                      control={control}
+                      rules={{ required: "Select Role" }}
+                      render={({ field }) => (
+                        <CustomSelect
+                          {...field}
+                          customButton={
+                            <div className="shadow-sm flex w-24 items-center justify-between gap-1 rounded-md border border-subtle px-3 py-2.5 text-left text-13 text-secondary duration-300 hover:bg-layer-1 hover:text-primary focus:outline-none">
+                              <span className="capitalize">{field.value ? ROLE[field.value] : "Select role"}</span>
+                              <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />
                             </div>
+                          }
+                          input
+                        >
+                          {Object.entries(checkCurrentOptionWorkspaceRole(watch(`members.${index}.member_id`))).map(
+                            ([key, label]) => {
+                              if (parseInt(key) > (currentProjectRole ?? EUserPermissions.GUEST)) return null;
 
-                            {fields.length > 1 && (
-                              <div className="flex-item flex w-6">
-                                <button
-                                  type="button"
-                                  className="place-items-center self-center rounded"
-                                  onClick={() => remove(index)}
-                                >
-                                  <CloseIcon className="h-4 w-4 text-custom-text-200" />
-                                </button>
-                              </div>
-                            )}
-                          </div>
-                        </div>
-                      ))}
-                    </div>
+                              return (
+                                <CustomSelect.Option key={key} value={key}>
+                                  {label}
+                                </CustomSelect.Option>
+                              );
+                            }
+                          )}
+                        </CustomSelect>
+                      )}
+                    />
+                    {errors.members && errors.members[index]?.role && (
+                      <span className="px-1 text-13 text-danger-primary">{errors.members[index]?.role?.message}</span>
+                    )}
                   </div>
 
-                  <div className="mt-5 flex items-center justify-between gap-2">
-                    <button
-                      type="button"
-                      className="flex items-center gap-2 bg-transparent py-2 pr-3 text-sm font-medium text-custom-primary outline-custom-primary"
-                      onClick={appendField}
-                    >
-                      <Plus className="h-4 w-4" />
-                      {t("common.add_more")}
-                    </button>
-                    <div className="flex items-center gap-2">
-                      <Button variant="neutral-primary" size="sm" onClick={handleClose}>
-                        {t("cancel")}
-                      </Button>
-                      <Button variant="primary" size="sm" type="submit" loading={isSubmitting}>
-                        {isSubmitting
-                          ? `${fields && fields.length > 1 ? `${t("add_members")}...` : `${t("add_member")}...`}`
-                          : `${fields && fields.length > 1 ? t("add_members") : t("add_member")}`}
-                      </Button>
+                  {fields.length > 1 && (
+                    <div className="flex-item flex w-6">
+                      <button
+                        type="button"
+                        className="place-items-center self-center rounded-sm"
+                        onClick={() => remove(index)}
+                      >
+                        <CloseIcon className="h-4 w-4 text-secondary" />
+                      </button>
                     </div>
-                  </div>
-                </form>
-              </Dialog.Panel>
-            </Transition.Child>
+                  )}
+                </div>
+              </div>
+            ))}
           </div>
         </div>
-      </Dialog>
-    </Transition.Root>
+        <div className="mt-5 flex items-center justify-between gap-2">
+          <button
+            type="button"
+            className="flex items-center gap-2 bg-transparent py-2 pr-3 text-13 font-medium text-accent-primary outline-accent-strong"
+            onClick={appendField}
+          >
+            <PlusIcon className="h-4 w-4" />
+            {t("common.add_more")}
+          </button>
+          <div className="flex items-center gap-2">
+            <Button variant="secondary" size="lg" onClick={handleClose}>
+              {t("cancel")}
+            </Button>
+            <Button variant="primary" size="lg" type="submit" loading={isSubmitting}>
+              {isSubmitting
+                ? `${fields && fields.length > 1 ? `${t("add_members")}...` : `${t("add_member")}...`}`
+                : `${fields && fields.length > 1 ? t("add_members") : t("add_member")}`}
+            </Button>
+          </div>
+        </div>
+      </form>
+    </ModalCore>
   );
 });
diff --git a/apps/web/core/components/project/settings/archive-project/archive-restore-modal.tsx b/apps/web/core/components/project/settings/archive-project/archive-restore-modal.tsx
deleted file mode 100644
index f62b77205..000000000
--- a/apps/web/core/components/project/settings/archive-project/archive-restore-modal.tsx
+++ /dev/null
@@ -1,137 +0,0 @@
-import { useState, Fragment } from "react";
-import { Dialog, Transition } from "@headlessui/react";
-// ui
-import { Button } from "@plane/propel/button";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
-// hooks
-import { useProject } from "@/hooks/store/use-project";
-import { useAppRouter } from "@/hooks/use-app-router";
-
-type Props = {
-  workspaceSlug: string;
-
-  projectId: string;
-  isOpen: boolean;
-  onClose: () => void;
-  archive: boolean;
-};
-
-export function ArchiveRestoreProjectModal(props: Props) {
-  const { workspaceSlug, projectId, isOpen, onClose, archive } = props;
-  // router
-  const router = useAppRouter();
-  // states
-  const [isLoading, setIsLoading] = useState(false);
-  // store hooks
-  const { getProjectById, archiveProject, restoreProject } = useProject();
-
-  const projectDetails = getProjectById(projectId);
-  if (!projectDetails) return null;
-
-  const handleClose = () => {
-    setIsLoading(false);
-    onClose();
-  };
-
-  const handleArchiveProject = async () => {
-    setIsLoading(true);
-    await archiveProject(workspaceSlug, projectId)
-      .then(() => {
-        setToast({
-          type: TOAST_TYPE.SUCCESS,
-          title: "Archive success",
-          message: `${projectDetails.name} has been archived successfully`,
-        });
-        onClose();
-        router.push(`/${workspaceSlug}/projects/`);
-      })
-      .catch(() =>
-        setToast({
-          type: TOAST_TYPE.ERROR,
-          title: "Error!",
-          message: "Project could not be archived. Please try again.",
-        })
-      )
-      .finally(() => setIsLoading(false));
-  };
-
-  const handleRestoreProject = async () => {
-    setIsLoading(true);
-    await restoreProject(workspaceSlug, projectId)
-      .then(() => {
-        setToast({
-          type: TOAST_TYPE.SUCCESS,
-          title: "Restore success",
-          message: `You can find ${projectDetails.name} in your projects.`,
-        });
-        onClose();
-        router.push(`/${workspaceSlug}/projects/`);
-      })
-      .catch(() =>
-        setToast({
-          type: TOAST_TYPE.ERROR,
-          title: "Error!",
-          message: "Project could not be restored. Please try again.",
-        })
-      )
-      .finally(() => setIsLoading(false));
-  };
-
-  return (
-    <Transition.Root show={isOpen} as={Fragment}>
-      <Dialog as="div" className="relative z-20" onClose={handleClose}>
-        <Transition.Child
-          as={Fragment}
-          enter="ease-out duration-300"
-          enterFrom="opacity-0"
-          enterTo="opacity-100"
-          leave="ease-in duration-200"
-          leaveFrom="opacity-100"
-          leaveTo="opacity-0"
-        >
-          <div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
-        </Transition.Child>
-
-        <div className="fixed inset-0 z-10 overflow-y-auto">
-          <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
-            <Transition.Child
-              as={Fragment}
-              enter="ease-out duration-300"
-              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-              enterTo="opacity-100 translate-y-0 sm:scale-100"
-              leave="ease-in duration-200"
-              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-            >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-custom-background-100 text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-full sm:max-w-lg">
-                <div className="px-5 py-4">
-                  <h3 className="text-xl font-medium 2xl:text-2xl">
-                    {archive ? "Archive" : "Restore"} {projectDetails.name}
-                  </h3>
-                  <p className="mt-3 text-sm text-custom-text-200">
-                    {archive
-                      ? "This project and its work items, cycles, modules, and pages will be archived. Its work items won’t appear in search. Only project admins can restore the project."
-                      : "Restoring a project will activate it and make it visible to all members of the project. Are you sure you want to continue?"}
-                  </p>
-                  <div className="mt-3 flex justify-end gap-2">
-                    <Button variant="neutral-primary" size="sm" onClick={onClose}>
-                      Cancel
-                    </Button>
-                    <Button
-                      size="sm"
-                      tabIndex={1}
-                      onClick={archive ? handleArchiveProject : handleRestoreProject}
-                      loading={isLoading}
-                    >
-                      {archive ? (isLoading ? "Archiving" : "Archive") : isLoading ? "Restoring" : "Restore"}
-                    </Button>
-                  </div>
-                </div>
-              </Dialog.Panel>
-            </Transition.Child>
-          </div>
-        </div>
-      </Dialog>
-    </Transition.Root>
-  );
-}
diff --git a/apps/web/core/components/project/settings/archive-project/selection.tsx b/apps/web/core/components/project/settings/archive-project/selection.tsx
deleted file mode 100644
index 408c682f9..000000000
--- a/apps/web/core/components/project/settings/archive-project/selection.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import React from "react";
-import { Disclosure, Transition } from "@headlessui/react";
-// types
-import { Button } from "@plane/propel/button";
-import { ChevronRightIcon, ChevronUpIcon } from "@plane/propel/icons";
-import type { IProject } from "@plane/types";
-// ui
-import { Loader } from "@plane/ui";
-
-export interface IArchiveProject {
-  projectDetails: IProject;
-  handleArchive: () => void;
-}
-
-export function ArchiveProjectSelection(props: IArchiveProject) {
-  const { projectDetails, handleArchive } = props;
-
-  return (
-    <Disclosure as="div" className="border-t border-custom-border-100 py-4">
-      {({ open }) => (
-        <div className="w-full">
-          <Disclosure.Button as="button" type="button" className="flex w-full items-center justify-between">
-            <span className="text-xl tracking-tight">Archive project</span>
-            {open ? <ChevronUpIcon className="h-5 w-5" /> : <ChevronRightIcon className="h-5 w-5" />}
-          </Disclosure.Button>
-          <Transition
-            show={open}
-            enter="transition duration-100 ease-out"
-            enterFrom="transform opacity-0"
-            enterTo="transform opacity-100"
-            leave="transition duration-75 ease-out"
-            leaveFrom="transform opacity-100"
-            leaveTo="transform opacity-0"
-          >
-            <Disclosure.Panel>
-              <div className="flex flex-col gap-8 pt-4">
-                <span className="text-sm tracking-tight">
-                  Archiving a project will unlist your project from your side navigation although you will still be able
-                  to access it from your projects page. You can restore the project or delete it whenever you want.
-                </span>
-                <div>
-                  {projectDetails ? (
-                    <div>
-                      <Button variant="outline-danger" onClick={handleArchive}>
-                        Archive project
-                      </Button>
-                    </div>
-                  ) : (
-                    <Loader className="mt-2 w-full">
-                      <Loader.Item height="38px" width="144px" />
-                    </Loader>
-                  )}
-                </div>
-              </div>
-            </Disclosure.Panel>
-          </Transition>
-        </div>
-      )}
-    </Disclosure>
-  );
-}
diff --git a/apps/web/core/components/project/settings/control-section.tsx b/apps/web/core/components/project/settings/control-section.tsx
new file mode 100644
index 000000000..c7764ec71
--- /dev/null
+++ b/apps/web/core/components/project/settings/control-section.tsx
@@ -0,0 +1,88 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
+import { observer } from "mobx-react";
+import { useParams } from "react-router";
+// plane imports
+import { PROJECT_TRACKER_ELEMENTS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { Button } from "@plane/propel/button";
+// components
+import { SettingsBoxedControlItem } from "@/components/settings/boxed-control-item";
+// hooks
+import { useProject } from "@/hooks/store/use-project";
+// local imports
+import { ArchiveRestoreProjectModal } from "../archive-restore-modal";
+import { DeleteProjectModal } from "../delete-project-modal";
+
+type Props = {
+  projectId: string;
+};
+
+export const GeneralProjectSettingsControlSection = observer(function GeneralProjectSettingsControlSection(
+  props: Props
+) {
+  const { projectId } = props;
+  // states
+  const [selectProject, setSelectedProject] = useState<string | null>(null);
+  const [archiveProject, setArchiveProject] = useState<boolean>(false);
+  // params
+  const { workspaceSlug } = useParams();
+  // store hooks
+  const { currentProjectDetails } = useProject();
+  // translation
+  const { t } = useTranslation();
+
+  if (!currentProjectDetails) return null;
+
+  return (
+    <div className="mt-10">
+      {workspaceSlug && (
+        <ArchiveRestoreProjectModal
+          workspaceSlug={workspaceSlug}
+          projectId={projectId}
+          isOpen={archiveProject}
+          onClose={() => setArchiveProject(false)}
+          archive
+        />
+      )}
+      <DeleteProjectModal
+        project={currentProjectDetails}
+        isOpen={Boolean(selectProject)}
+        onClose={() => setSelectedProject(null)}
+      />
+      <div className="rounded-lg border border-subtle bg-layer-2">
+        {/* Project Selector */}
+        <SettingsBoxedControlItem
+          className="rounded-b-none border-0 border-b"
+          title={t("archive")}
+          description="Archiving a project will unlist your project from your side navigation although you will still be able to access it from your projects page. You can restore the project or delete it whenever you want."
+          control={
+            <Button variant="secondary" onClick={() => setArchiveProject(true)}>
+              {t("archive")}
+            </Button>
+          }
+        />
+        {/* Format Selector */}
+        <SettingsBoxedControlItem
+          className="rounded-t-none border-0"
+          title={t("delete")}
+          description="When deleting a project, all of the data and resources within that project will be permanently removed and cannot be recovered."
+          control={
+            <Button
+              variant="error-outline"
+              onClick={() => setSelectedProject(currentProjectDetails.id ?? null)}
+              data-ph-element={PROJECT_TRACKER_ELEMENTS.DELETE_PROJECT_BUTTON}
+            >
+              {t("delete")}
+            </Button>
+          }
+        />
+      </div>
+    </div>
+  );
+});
diff --git a/apps/web/core/components/project/settings/delete-project-section.tsx b/apps/web/core/components/project/settings/delete-project-section.tsx
deleted file mode 100644
index def7df81c..000000000
--- a/apps/web/core/components/project/settings/delete-project-section.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-import React from "react";
-import { Disclosure, Transition } from "@headlessui/react";
-// types
-import { PROJECT_TRACKER_ELEMENTS } from "@plane/constants";
-import { Button } from "@plane/propel/button";
-import { ChevronRightIcon, ChevronUpIcon } from "@plane/propel/icons";
-import type { IProject } from "@plane/types";
-// ui
-import { Loader } from "@plane/ui";
-
-export interface IDeleteProjectSection {
-  projectDetails: IProject;
-  handleDelete: () => void;
-}
-
-export function DeleteProjectSection(props: IDeleteProjectSection) {
-  const { projectDetails, handleDelete } = props;
-
-  return (
-    <Disclosure as="div" className="border-t border-custom-border-100 py-4">
-      {({ open }) => (
-        <div className="w-full">
-          <Disclosure.Button as="button" type="button" className="flex w-full items-center justify-between">
-            <span className="text-xl tracking-tight">Delete project</span>
-            {open ? <ChevronUpIcon className="h-5 w-5" /> : <ChevronRightIcon className="h-5 w-5" />}
-          </Disclosure.Button>
-
-          <Transition
-            show={open}
-            enter="transition duration-100 ease-out"
-            enterFrom="transform opacity-0"
-            enterTo="transform opacity-100"
-            leave="transition duration-75 ease-out"
-            leaveFrom="transform opacity-100"
-            leaveTo="transform opacity-0"
-          >
-            <Disclosure.Panel>
-              <div className="flex flex-col gap-8 pt-4">
-                <span className="text-sm tracking-tight">
-                  When deleting a project, all of the data and resources within that project will be permanently removed
-                  and cannot be recovered.
-                </span>
-                <div>
-                  {projectDetails ? (
-                    <div>
-                      <Button
-                        variant="danger"
-                        onClick={handleDelete}
-                        data-ph-element={PROJECT_TRACKER_ELEMENTS.DELETE_PROJECT_BUTTON}
-                      >
-                        Delete my project
-                      </Button>
-                    </div>
-                  ) : (
-                    <Loader className="mt-2 w-full">
-                      <Loader.Item height="38px" width="144px" />
-                    </Loader>
-                  )}
-                </div>
-              </div>
-            </Disclosure.Panel>
-          </Transition>
-        </div>
-      )}
-    </Disclosure>
-  );
-}
diff --git a/apps/web/core/components/project/settings/features-list.tsx b/apps/web/core/components/project/settings/features-list.tsx
index 9325d5dc5..8605bf508 100644
--- a/apps/web/core/components/project/settings/features-list.tsx
+++ b/apps/web/core/components/project/settings/features-list.tsx
@@ -1,20 +1,24 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 // plane imports
-import { PROJECT_TRACKER_EVENTS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { setPromiseToast } from "@plane/propel/toast";
 import { Tooltip } from "@plane/propel/tooltip";
 import type { IProject } from "@plane/types";
+import { CycleIcon, IntakeIcon, ModuleIcon, PageIcon, ViewsIcon } from "@plane/propel/icons";
 // components
+import { SettingsBoxedControlItem } from "@/components/settings/boxed-control-item";
 import { SettingsHeading } from "@/components/settings/heading";
-// helpers
-import { captureSuccess } from "@/helpers/event-tracker.helper";
 // hooks
 import { useProject } from "@/hooks/store/use-project";
-import { useUser } from "@/hooks/store/user";
 // plane web imports
 import { UpgradeBadge } from "@/plane-web/components/workspace/upgrade-badge";
-import { PROJECT_FEATURES_LIST } from "@/plane-web/constants/project/settings";
+// local imports
 import { ProjectFeatureToggle } from "./helper";
 
 type Props = {
@@ -23,16 +27,63 @@ type Props = {
   isAdmin: boolean;
 };
 
+const PROJECT_FEATURES_LIST = {
+  cycles: {
+    key: "cycles",
+    property: "cycle_view",
+    title: "Cycles",
+    description: "Timebox work as you see fit per project and change frequency from one period to the next.",
+    icon: <CycleIcon className="h-5 w-5 flex-shrink-0 rotate-180 text-tertiary" />,
+    isPro: false,
+    isEnabled: true,
+  },
+  modules: {
+    key: "modules",
+    property: "module_view",
+    title: "Modules",
+    description: "Group work into sub-project-like set-ups with their own leads and assignees.",
+    icon: <ModuleIcon width={20} height={20} className="flex-shrink-0 text-tertiary" />,
+    isPro: false,
+    isEnabled: true,
+  },
+  views: {
+    key: "views",
+    property: "issue_views_view",
+    title: "Views",
+    description: "Save sorts, filters, and display options for later or share them.",
+    icon: <ViewsIcon className="h-5 w-5 flex-shrink-0 text-tertiary" />,
+    isPro: false,
+    isEnabled: true,
+  },
+  pages: {
+    key: "pages",
+    property: "page_view",
+    title: "Pages",
+    description: "Write anything like you write anything.",
+    icon: <PageIcon className="h-5 w-5 flex-shrink-0 text-tertiary" />,
+    isPro: false,
+    isEnabled: true,
+  },
+  inbox: {
+    key: "intake",
+    property: "inbox_view",
+    title: "Intake",
+    description: "Consider and discuss work items before you add them to your project.",
+    icon: <IntakeIcon className="h-5 w-5 flex-shrink-0 text-tertiary" />,
+    isPro: false,
+    isEnabled: true,
+  },
+};
+
 export const ProjectFeaturesList = observer(function ProjectFeaturesList(props: Props) {
   const { workspaceSlug, projectId, isAdmin } = props;
   // store hooks
   const { t } = useTranslation();
-  const { data: currentUser } = useUser();
   const { getProjectById, updateProject } = useProject();
   // derived values
   const currentProjectDetails = getProjectById(projectId);
 
-  const handleSubmit = (featureKey: string, featureProperty: string) => {
+  const handleSubmit = (_featureKey: string, featureProperty: string) => {
     if (!workspaceSlug || !projectId || !currentProjectDetails) return;
 
     // making the request to update the project feature
@@ -53,64 +104,47 @@ export const ProjectFeaturesList = observer(function ProjectFeaturesList(props:
       },
     });
     void updateProjectPromise.then(() => {
-      captureSuccess({
-        eventName: PROJECT_TRACKER_EVENTS.feature_toggled,
-        payload: {
-          feature_key: featureKey,
-        },
-      });
       return undefined;
     });
   };
 
-  if (!currentUser) return <></>;
-
   return (
-    <div className="space-y-6">
-      {Object.entries(PROJECT_FEATURES_LIST).map(([featureSectionKey, feature]) => (
-        <div key={featureSectionKey} className="">
-          <SettingsHeading title={t(feature.key)} description={t(`${feature.key}_description`)} />
-          {Object.entries(feature.featureList).map(([featureItemKey, featureItem]) => (
-            <div
-              key={featureItemKey}
-              className="gap-x-8 gap-y-2 border-b border-custom-border-100 bg-custom-background-100 py-4"
-            >
-              <div key={featureItemKey} className="flex items-center justify-between">
-                <div className="flex items-start gap-3">
-                  <div className="flex items-center justify-center rounded bg-custom-background-90 p-3">
-                    {featureItem.icon}
-                  </div>
-                  <div>
-                    <div className="flex items-center gap-2">
-                      <h4 className="text-sm font-medium leading-5">{t(featureItem.key)}</h4>
-                      {featureItem.isPro && (
-                        <Tooltip tooltipContent="Pro feature" position="top">
-                          <UpgradeBadge className="rounded" />
-                        </Tooltip>
-                      )}
-                    </div>
-                    <p className="text-sm leading-5 tracking-tight text-custom-text-300">
-                      {t(`${featureItem.key}_description`)}
-                    </p>
-                  </div>
-                </div>
-                <ProjectFeatureToggle
-                  workspaceSlug={workspaceSlug}
-                  projectId={projectId}
-                  featureItem={featureItem}
-                  value={Boolean(currentProjectDetails?.[featureItem.property as keyof IProject])}
-                  handleSubmit={handleSubmit}
-                  disabled={!isAdmin}
-                />
-              </div>
-              <div className="pl-14">
-                {currentProjectDetails?.[featureItem.property as keyof IProject] &&
-                  featureItem.renderChildren?.(currentProjectDetails, workspaceSlug)}
-              </div>
+    <>
+      <div>
+        <SettingsHeading title={t("projects_and_issues")} description={t("projects_and_issues_description")} />
+        <div className="mt-6 flex flex-col gap-y-4">
+          {Object.entries(PROJECT_FEATURES_LIST).map(([featureItemKey, featureItem]) => (
+            <div key={featureItemKey}>
+              <SettingsBoxedControlItem
+                title={
+                  <span className="flex items-center gap-2">
+                    {t(featureItem.key)}
+                    {featureItem.isPro && (
+                      <Tooltip tooltipContent="Pro feature" position="top">
+                        <UpgradeBadge className="rounded-sm" />
+                      </Tooltip>
+                    )}
+                  </span>
+                }
+                description={t(`${featureItem.key}_description`)}
+                control={
+                  <ProjectFeatureToggle
+                    workspaceSlug={workspaceSlug}
+                    projectId={projectId}
+                    featureItem={featureItem}
+                    value={Boolean(currentProjectDetails?.[featureItem.property as keyof IProject])}
+                    handleSubmit={handleSubmit}
+                    disabled={!isAdmin}
+                  />
+                }
+              />
+              {/* {currentProjectDetails?.[featureItem.property as keyof IProject] && (
+                <div className="pl-14">{featureItem.renderChildren?.(currentProjectDetails, workspaceSlug)}</div>
+              )} */}
             </div>
           ))}
         </div>
-      ))}
-    </div>
+      </div>
+    </>
   );
 });
diff --git a/apps/web/core/components/project/settings/helper.tsx b/apps/web/core/components/project/settings/helper.tsx
index b88dbd5db..959411d29 100644
--- a/apps/web/core/components/project/settings/helper.tsx
+++ b/apps/web/core/components/project/settings/helper.tsx
@@ -1,15 +1,20 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import Link from "next/link";
-import { ChevronRight } from "lucide-react";
 import { PROJECT_TRACKER_ELEMENTS } from "@plane/constants";
+import { ChevronRightIcon } from "@plane/propel/icons";
 import { EPillVariant, Pill, EPillSize } from "@plane/propel/pill";
 import { ToggleSwitch } from "@plane/ui";
 import { joinUrlPath } from "@plane/utils";
-import type { TProperties } from "@/plane-web/constants/project/settings/features";
 
 type Props = {
   workspaceSlug: string;
   projectId: string;
-  featureItem: TProperties;
+  featureItem: any;
   value: boolean;
   handleSubmit: (featureKey: string, featureProperty: string) => void;
   disabled?: boolean;
@@ -17,23 +22,23 @@ type Props = {
 
 export function ProjectFeatureToggle(props: Props) {
   const { workspaceSlug, projectId, featureItem, value, handleSubmit, disabled } = props;
-  return featureItem.href ? (
-    <Link href={joinUrlPath(workspaceSlug, "settings", "projects", projectId, "features", featureItem.href)}>
+  return featureItem?.href ? (
+    <Link href={joinUrlPath(workspaceSlug, "settings", "projects", projectId, "features", featureItem?.href)}>
       <div className="flex items-center gap-2">
         <Pill
           variant={value ? EPillVariant.PRIMARY : EPillVariant.DEFAULT}
           size={EPillSize.SM}
-          className="border-none rounded-lg"
+          className="rounded-lg border-none"
         >
           {value ? "Enabled" : "Disabled"}
         </Pill>
-        <ChevronRight className="h-4 w-4 text-custom-text-300" />
+        <ChevronRightIcon className="h-4 w-4 text-tertiary" />
       </div>
     </Link>
   ) : (
     <ToggleSwitch
       value={value}
-      onChange={() => handleSubmit(featureItem.key, featureItem.property)}
+      onChange={() => handleSubmit(featureItem?.key, featureItem?.property)}
       disabled={disabled}
       size="sm"
       data-ph-element={PROJECT_TRACKER_ELEMENTS.TOGGLE_FEATURE}
diff --git a/apps/web/core/components/project/settings/member-columns.tsx b/apps/web/core/components/project/settings/member-columns.tsx
index 9ccec385d..7806e64b8 100644
--- a/apps/web/core/components/project/settings/member-columns.tsx
+++ b/apps/web/core/components/project/settings/member-columns.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import Link from "next/link";
 import { Controller, useForm } from "react-hook-form";
@@ -40,22 +46,22 @@ export function NameColumn(props: NameProps) {
   return (
     <Disclosure>
       {({}) => (
-        <div className="relative group">
-          <div className="flex items-center gap-2 w-72">
-            <div className="flex items-center gap-x-2 gap-y-2 flex-1">
+        <div className="group relative">
+          <div className="flex w-72 items-center gap-2">
+            <div className="flex flex-1 items-center gap-x-2 gap-y-2">
               {avatar_url && avatar_url.trim() !== "" ? (
                 <Link href={`/${workspaceSlug}/profile/${id}`}>
-                  <span className="relative flex size-4 items-center justify-center rounded-full capitalize text-white">
+                  <span className="relative flex size-6 items-center justify-center rounded-full text-on-color capitalize">
                     <img
                       src={getFileURL(avatar_url)}
-                      className="absolute left-0 top-0 h-full w-full rounded-full object-cover"
+                      className="absolute top-0 left-0 h-full w-full rounded-full object-cover"
                       alt={display_name || email}
                     />
                   </span>
                 </Link>
               ) : (
                 <Link href={`/${workspaceSlug}/profile/${id}`}>
-                  <span className="relative flex size-4 items-center justify-center rounded-full bg-gray-700 capitalize text-white text-xs">
+                  <span className="relative flex size-6 items-center justify-center rounded-full bg-layer-3 text-11 text-on-color capitalize">
                     {(email ?? display_name ?? "?")[0]}
                   </span>
                 </Link>
@@ -71,11 +77,11 @@ export function NameColumn(props: NameProps) {
               >
                 <CustomMenu.MenuItem>
                   <div
-                    className="flex items-center gap-x-1 cursor-pointer text-red-600 font-medium"
+                    className="flex cursor-pointer items-center gap-x-1 font-medium text-danger-primary"
                     data-ph-element={MEMBER_TRACKER_ELEMENTS.PROJECT_MEMBER_TABLE_CONTEXT_MENU}
                     onClick={() => setRemoveMemberModal(rowData)}
                   >
-                    <CircleMinus className="flex-shrink-0 size-3.5" />
+                    <CircleMinus className="size-3.5 flex-shrink-0" />
                     {rowData.member?.id === currentUser?.id ? "Leave " : "Remove "}
                   </div>
                 </CustomMenu.MenuItem>
@@ -163,12 +169,12 @@ export const AccountTypeColumn = observer(function AccountTypeColumn(props: Acco
                 );
               }}
               label={
-                <div className="flex ">
+                <div className="flex">
                   <span>{roleLabel}</span>
                 </div>
               }
-              buttonClassName={`!px-0 !justify-start hover:bg-custom-background-100 ${errors.role ? "border-red-500" : "border-none"}`}
-              className="rounded-md p-0 w-32"
+              buttonClassName={`!px-0 !justify-start hover:bg-surface-1 ${errors.role ? "border-danger-strong" : "border-none"}`}
+              className="w-32 rounded-md p-0"
               input
             >
               {Object.entries(checkCurrentOptionWorkspaceRole(rowData.member.id)).map(([key, label]) => (
@@ -180,7 +186,7 @@ export const AccountTypeColumn = observer(function AccountTypeColumn(props: Acco
           )}
         />
       ) : (
-        <div className="w-32 flex ">
+        <div className="flex w-32">
           <span>{roleLabel}</span>
         </div>
       )}
diff --git a/apps/web/core/components/readonly/cycle.tsx b/apps/web/core/components/readonly/cycle.tsx
index a5fe8e394..c5fc9753d 100644
--- a/apps/web/core/components/readonly/cycle.tsx
+++ b/apps/web/core/components/readonly/cycle.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useEffect } from "react";
 import { observer } from "mobx-react";
 // plane imports
@@ -30,7 +36,7 @@ export const ReadonlyCycle = observer(function ReadonlyCycle(props: TReadonlyCyc
   }, [projectId, workspaceSlug]);
 
   return (
-    <div className={cn("flex items-center gap-1 text-sm", className)}>
+    <div className={cn("flex items-center gap-1 text-13", className)}>
       {!hideIcon && <CycleIcon className="size-4 flex-shrink-0" />}
       <span className="flex-grow truncate">{cycleName ?? placeholder ?? t("common.none")}</span>
     </div>
diff --git a/apps/web/core/components/readonly/date.tsx b/apps/web/core/components/readonly/date.tsx
index 0de4c2245..b09650d35 100644
--- a/apps/web/core/components/readonly/date.tsx
+++ b/apps/web/core/components/readonly/date.tsx
@@ -1,7 +1,13 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
-import { Calendar } from "lucide-react";
 // plane imports
 import { useTranslation } from "@plane/i18n";
+import { CalendarLayoutIcon } from "@plane/propel/icons";
 import { cn, renderFormattedDate, getDate } from "@plane/utils";
 
 export type TReadonlyDateProps = {
@@ -19,8 +25,8 @@ export const ReadonlyDate = observer(function ReadonlyDate(props: TReadonlyDateP
   const formattedDate = value ? renderFormattedDate(getDate(value), formatToken) : null;
 
   return (
-    <div className={cn("flex items-center gap-1 text-sm", className)}>
-      {!hideIcon && <Calendar className="size-4 flex-shrink-0" />}
+    <div className={cn("flex items-center gap-1 text-13", className)}>
+      {!hideIcon && <CalendarLayoutIcon className="size-4 flex-shrink-0" />}
       <span className="flex-grow truncate">{formattedDate ?? placeholder ?? t("common.none")}</span>
     </div>
   );
diff --git a/apps/web/core/components/readonly/estimate.tsx b/apps/web/core/components/readonly/estimate.tsx
index 6c4f33055..157368119 100644
--- a/apps/web/core/components/readonly/estimate.tsx
+++ b/apps/web/core/components/readonly/estimate.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useEffect } from "react";
 import { observer } from "mobx-react";
 import { useTranslation } from "@plane/i18n";
@@ -42,7 +48,7 @@ export const ReadonlyEstimate = observer(function ReadonlyEstimate(props: TReado
   }, [projectId, workspaceSlug]);
 
   return (
-    <div className={cn("flex items-center gap-1 text-sm", className)}>
+    <div className={cn("flex items-center gap-1 text-body-xs-regular", className)}>
       {!hideIcon && <EstimatePropertyIcon className="size-4 flex-shrink-0" />}
       <span className="flex-grow truncate">{displayValue ?? placeholder ?? t("common.none")}</span>
     </div>
diff --git a/apps/web/core/components/readonly/index.tsx b/apps/web/core/components/readonly/index.tsx
index 66e7a06b7..dea820817 100644
--- a/apps/web/core/components/readonly/index.tsx
+++ b/apps/web/core/components/readonly/index.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // Readonly components for displaying single values instead of interactive dropdowns
 // These components handle their own data fetching using internal hooks
 export { ReadonlyState, type TReadonlyStateProps } from "./state";
diff --git a/apps/web/core/components/readonly/labels.tsx b/apps/web/core/components/readonly/labels.tsx
index 992657184..93edc1d45 100644
--- a/apps/web/core/components/readonly/labels.tsx
+++ b/apps/web/core/components/readonly/labels.tsx
@@ -1,7 +1,13 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useEffect } from "react";
 import { observer } from "mobx-react";
 // plane imports
-import { Tooltip } from "@plane/ui";
+import { Tooltip } from "@plane/propel/tooltip";
 import { cn } from "@plane/utils";
 // hooks
 import { useLabel } from "@/hooks/store/use-label";
@@ -32,7 +38,7 @@ export const ReadonlyLabels = observer(function ReadonlyLabels(props: TReadonlyL
   }, [projectId, workspaceSlug]);
 
   return (
-    <div className={cn("flex items-center gap-2 text-sm", className)}>
+    <div className={cn("flex items-center gap-2 text-body-xs-regular", className)}>
       {labels && (
         <>
           <Tooltip
@@ -42,8 +48,8 @@ export const ReadonlyLabels = observer(function ReadonlyLabels(props: TReadonlyL
             isMobile={isMobile}
             disabled={labels.length === 0}
           >
-            <div className="h-full flex items-center gap-1 rounded py-1 text-sm">
-              <span className="h-2 w-2 flex-shrink-0 rounded-full bg-custom-primary" />
+            <div className="flex h-full items-center gap-1 rounded-sm py-1 text-body-xs-bold">
+              <span className="h-2 w-2 flex-shrink-0 rounded-full bg-accent-primary" />
               <span>{value.length}</span>
               <span>Labels</span>
             </div>
diff --git a/apps/web/core/components/readonly/member.tsx b/apps/web/core/components/readonly/member.tsx
index 9b4287fec..b2518b7e6 100644
--- a/apps/web/core/components/readonly/member.tsx
+++ b/apps/web/core/components/readonly/member.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import type { LucideIcon } from "lucide-react";
 // plane imports
@@ -28,7 +34,7 @@ export const ReadonlyMember = observer(function ReadonlyMember(props: TReadonlyM
 
   if (members.length === 0) {
     return (
-      <div className={cn("flex items-center gap-1 text-sm", className)}>
+      <div className={cn("flex items-center gap-1 text-body-xs-regular", className)}>
         {<ButtonAvatars showTooltip={false} userIds={value} icon={Icon} />}
         <span className="flex-grow truncate">{placeholder ?? t("common.none")}</span>
       </div>
@@ -37,9 +43,9 @@ export const ReadonlyMember = observer(function ReadonlyMember(props: TReadonlyM
 
   if (multiple) {
     return (
-      <div className={cn("flex items-center gap-1 text-sm", className)}>
+      <div className={cn("flex items-center gap-1 text-body-xs-regular", className)}>
         {!hideIcon && Icon && <Icon className="h-3 w-3 flex-shrink-0" />}
-        <ButtonAvatars showTooltip={false} userIds={memberIds} size="sm" />
+        <ButtonAvatars showTooltip={false} userIds={memberIds} />
       </div>
     );
   }
@@ -47,11 +53,11 @@ export const ReadonlyMember = observer(function ReadonlyMember(props: TReadonlyM
   const member = members[0];
 
   return (
-    <div className={cn("flex items-center gap-1 text-sm", className)}>
+    <div className={cn("flex items-center gap-1 text-body-xs-regular", className)}>
       {!hideIcon && Icon && <Icon className="size-4 flex-shrink-0" />}
       <div className="flex items-center gap-2">
-        <div className="size-4 rounded-full bg-custom-background-80 flex items-center justify-center">
-          <span className="text-sm font-medium">
+        <div className="flex size-4 items-center justify-center rounded-full bg-layer-1">
+          <span className="text-13 font-medium">
             {member?.display_name?.charAt(0) ?? member?.email?.charAt(0) ?? "?"}
           </span>
         </div>
diff --git a/apps/web/core/components/readonly/module.tsx b/apps/web/core/components/readonly/module.tsx
index af3092e9d..30a1dc32b 100644
--- a/apps/web/core/components/readonly/module.tsx
+++ b/apps/web/core/components/readonly/module.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useEffect } from "react";
 import { observer } from "mobx-react";
 import { Layers } from "lucide-react";
@@ -44,7 +50,7 @@ export const ReadonlyModule = observer(function ReadonlyModule(props: TReadonlyM
 
   if (modules.length === 0) {
     return (
-      <div className={cn("flex items-center gap-1 text-sm", className)}>
+      <div className={cn("flex items-center gap-1 text-body-xs-regular", className)}>
         {!hideIcon && <Layers className="size-4 flex-shrink-0" />}
         <span className="flex-grow truncate">{placeholder ?? t("common.none")}</span>
       </div>
@@ -56,7 +62,7 @@ export const ReadonlyModule = observer(function ReadonlyModule(props: TReadonlyM
       showCount && modules.length > 1 ? `${modules[0]?.name} +${modules.length - 1}` : modules[0]?.name;
 
     return (
-      <div className={cn("flex items-center gap-1 text-sm", className)}>
+      <div className={cn("flex items-center gap-1 text-body-xs-regular", className)}>
         {!hideIcon && <Layers className="size-4 flex-shrink-0" />}
         <span className="flex-grow truncate">{displayText}</span>
       </div>
@@ -65,7 +71,7 @@ export const ReadonlyModule = observer(function ReadonlyModule(props: TReadonlyM
 
   const moduleItem = modules[0];
   return (
-    <div className={cn("flex items-center gap-2 text-sm", className)}>
+    <div className={cn("flex items-center gap-2 text-body-xs-regular", className)}>
       {!hideIcon && <Layers className="size-4 flex-shrink-0" />}
       <span className="flex-grow truncate">{moduleItem?.name}</span>
     </div>
diff --git a/apps/web/core/components/readonly/priority.tsx b/apps/web/core/components/readonly/priority.tsx
index 05773a23a..c3343ace4 100644
--- a/apps/web/core/components/readonly/priority.tsx
+++ b/apps/web/core/components/readonly/priority.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 // plane imports
 import { ISSUE_PRIORITIES } from "@plane/constants";
@@ -20,7 +26,7 @@ export const ReadonlyPriority = observer(function ReadonlyPriority(props: TReado
   const priorityDetails = ISSUE_PRIORITIES.find((p) => p.key === value);
 
   return (
-    <div className={cn("flex items-center gap-1 text-sm", className)}>
+    <div className={cn("flex items-center gap-1 text-body-xs-regular", className)}>
       {!hideIcon && <PriorityIcon priority={value ?? "none"} size={12} className="flex-shrink-0" withContainer />}
       <span className="flex-grow truncate">{priorityDetails?.title ?? placeholder ?? t("common.none")}</span>
     </div>
diff --git a/apps/web/core/components/readonly/state.tsx b/apps/web/core/components/readonly/state.tsx
index 1b7c8d7e9..f041dcbfa 100644
--- a/apps/web/core/components/readonly/state.tsx
+++ b/apps/web/core/components/readonly/state.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useEffect, useState } from "react";
 import { observer } from "mobx-react";
 // plane imports
@@ -46,7 +52,7 @@ export const ReadonlyState = observer(function ReadonlyState(props: TReadonlySta
 
   if (stateLoader) {
     return (
-      <Loader className={cn("flex items-center gap-1 text-sm", className)}>
+      <Loader className={cn("flex items-center gap-1 text-body-xs-regular", className)}>
         <Loader.Item height="16px" width="16px" className="rounded-full" />
         <Loader.Item height="16px" width="50px" />
       </Loader>
@@ -54,7 +60,7 @@ export const ReadonlyState = observer(function ReadonlyState(props: TReadonlySta
   }
 
   return (
-    <div className={cn("flex items-center gap-1 text-sm", className)}>
+    <div className={cn("flex items-center gap-1 text-body-xs-regular", className)}>
       {!hideIcon && (
         <StateGroupIcon
           stateGroup={state?.group ?? "backlog"}
diff --git a/apps/web/core/components/rich-filters/add-filters/button.tsx b/apps/web/core/components/rich-filters/add-filters/button.tsx
index 9809507fa..51f58c375 100644
--- a/apps/web/core/components/rich-filters/add-filters/button.tsx
+++ b/apps/web/core/components/rich-filters/add-filters/button.tsx
@@ -1,12 +1,19 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 import { observer } from "mobx-react";
 import { ListFilter } from "lucide-react";
 // plane imports
+import type { TButtonSize, TButtonVariant } from "@plane/propel/button";
+import { getButtonStyling } from "@plane/propel/button";
 import type { IFilterInstance } from "@plane/shared-state";
 import type { TExternalFilter, TFilterProperty, TSupportedOperators } from "@plane/types";
 import { LOGICAL_OPERATOR } from "@plane/types";
-import type { TButtonVariant } from "@plane/ui";
-import { cn, getButtonStyling } from "@plane/ui";
+import { cn } from "@plane/utils";
 // local imports
 import { AddFilterDropdown } from "./dropdown";
 
@@ -14,6 +21,7 @@ export type TAddFilterButtonProps<P extends TFilterProperty, E extends TExternal
   buttonConfig?: {
     label: string | null;
     variant?: TButtonVariant;
+    size?: TButtonSize;
     className?: string;
     defaultOpen?: boolean;
     iconConfig?: {
@@ -31,7 +39,8 @@ export const AddFilterButton = observer(function AddFilterButton<P extends TFilt
 ) {
   const { filter, buttonConfig, onFilterSelect } = props;
   const {
-    variant = "link-neutral",
+    variant = "secondary",
+    size = "base",
     className,
     label,
     iconConfig = { shouldShowIcon: true },
@@ -59,12 +68,12 @@ export const AddFilterButton = observer(function AddFilterButton<P extends TFilt
       {...props}
       buttonConfig={{
         ...buttonConfig,
-        className: cn(getButtonStyling(variant, "sm"), "py-[5px]", className),
+        className: cn(getButtonStyling(variant, size), "py-[5px]", className),
       }}
       handleFilterSelect={handleFilterSelect}
       customButton={
         <div className="flex items-center gap-1">
-          {iconConfig.shouldShowIcon && <FilterIcon className="size-4 text-custom-text-200" />}
+          {iconConfig.shouldShowIcon && <FilterIcon className="size-4 text-secondary" />}
           {label}
         </div>
       }
diff --git a/apps/web/core/components/rich-filters/add-filters/dropdown.tsx b/apps/web/core/components/rich-filters/add-filters/dropdown.tsx
index 0878510e6..505162b34 100644
--- a/apps/web/core/components/rich-filters/add-filters/dropdown.tsx
+++ b/apps/web/core/components/rich-filters/add-filters/dropdown.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 import { observer } from "mobx-react";
 // plane imports
@@ -29,10 +35,10 @@ export const AddFilterDropdown = observer(function AddFilterDropdown<
   const filterOptions = filter.configManager.allAvailableConfigs.map((config) => ({
     value: config.id,
     content: (
-      <div className="flex items-center justify-between gap-2 text-custom-text-200 transition-all duration-200 ease-in-out">
+      <div className="flex items-center justify-between gap-2 text-secondary transition-all duration-200 ease-in-out">
         <div className="flex items-center gap-2">
           {config.icon && (
-            <config.icon className="size-4 text-custom-text-300 transition-transform duration-200 ease-in-out" />
+            <config.icon className="size-4 text-tertiary transition-transform duration-200 ease-in-out" />
           )}
           <span>{config.label}</span>
         </div>
@@ -48,7 +54,7 @@ export const AddFilterDropdown = observer(function AddFilterDropdown<
     ? [
         {
           value: "all_filters_applied",
-          content: <div className="text-custom-text-400 italic">All filters applied</div>,
+          content: <div className="text-placeholder italic">All filters applied</div>,
           query: "all filters applied",
           disabled: true,
         },
diff --git a/apps/web/core/components/rich-filters/filter-item/close-button.tsx b/apps/web/core/components/rich-filters/filter-item/close-button.tsx
index 74970b118..753fec476 100644
--- a/apps/web/core/components/rich-filters/filter-item/close-button.tsx
+++ b/apps/web/core/components/rich-filters/filter-item/close-button.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 import { observer } from "mobx-react";
 // plane imports
@@ -23,7 +29,7 @@ export const FilterItemCloseButton = observer(function FilterItemCloseButton<
   return (
     <button
       onClick={handleRemoveFilter}
-      className="px-1.5 text-custom-text-400 hover:text-custom-text-300 focus:outline-none hover:bg-custom-background-90"
+      className="bg-layer-transparent px-1.5 text-placeholder hover:bg-layer-transparent-hover hover:text-tertiary focus:outline-none"
       type="button"
       aria-label="Remove filter"
     >
diff --git a/apps/web/core/components/rich-filters/filter-item/container.tsx b/apps/web/core/components/rich-filters/filter-item/container.tsx
index 811ca27f2..256d98b2f 100644
--- a/apps/web/core/components/rich-filters/filter-item/container.tsx
+++ b/apps/web/core/components/rich-filters/filter-item/container.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useEffect, useRef } from "react";
 // plane imports
 import { Tooltip } from "@plane/propel/tooltip";
@@ -52,9 +58,9 @@ export function FilterItemContainer(props: FilterItemContainerProps) {
     <Tooltip tooltipContent={tooltipContent} position="bottom" disabled={!tooltipContent}>
       <div
         ref={itemRef}
-        className={cn("flex h-7 items-stretch rounded overflow-hidden border transition-all duration-200", {
-          "border-custom-border-200 bg-custom-background-100": variant === "default",
-          "border-red-500 bg-custom-background-90": variant === "error",
+        className={cn("flex h-7 items-stretch overflow-hidden rounded-sm border transition-all duration-200", {
+          "border-subtle bg-surface-1": variant === "default",
+          "border-danger-strong bg-surface-2": variant === "error",
         })}
       >
         {children}
diff --git a/apps/web/core/components/rich-filters/filter-item/invalid.tsx b/apps/web/core/components/rich-filters/filter-item/invalid.tsx
index f04260735..931f3d8e8 100644
--- a/apps/web/core/components/rich-filters/filter-item/invalid.tsx
+++ b/apps/web/core/components/rich-filters/filter-item/invalid.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 import { observer } from "mobx-react";
 import { CircleAlert } from "lucide-react";
diff --git a/apps/web/core/components/rich-filters/filter-item/loader.tsx b/apps/web/core/components/rich-filters/filter-item/loader.tsx
index de81d2b76..508d7546c 100644
--- a/apps/web/core/components/rich-filters/filter-item/loader.tsx
+++ b/apps/web/core/components/rich-filters/filter-item/loader.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { Loader } from "@plane/ui";
 
 export function FilterItemLoader() {
diff --git a/apps/web/core/components/rich-filters/filter-item/property.tsx b/apps/web/core/components/rich-filters/filter-item/property.tsx
index 273f9ea71..4cb38cb29 100644
--- a/apps/web/core/components/rich-filters/filter-item/property.tsx
+++ b/apps/web/core/components/rich-filters/filter-item/property.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 // plane imports
 import { Tooltip } from "@plane/propel/tooltip";
@@ -51,13 +57,13 @@ function PropertyButton<P extends TFilterProperty, E extends TExternalFilter>(pr
     <Tooltip tooltipContent={tooltipContent} position="bottom-start" disabled={!tooltipContent}>
       <div
         className={cn(
-          "flex items-center gap-1 px-2 py-[5px] text-xs text-custom-text-300 min-w-0 h-full",
+          "flex h-full min-w-0 items-center gap-1 px-2 py-[5px] text-11 text-tertiary",
           COMMON_FILTER_ITEM_BORDER_CLASSNAME,
           className
         )}
       >
         {Icon && (
-          <div className="transition-transform duration-200 ease-in-out flex-shrink-0">
+          <div className="flex-shrink-0 transition-transform duration-200 ease-in-out">
             <Icon className="size-3.5" />
           </div>
         )}
diff --git a/apps/web/core/components/rich-filters/filter-item/root.tsx b/apps/web/core/components/rich-filters/filter-item/root.tsx
index bf9d7029c..afdeac061 100644
--- a/apps/web/core/components/rich-filters/filter-item/root.tsx
+++ b/apps/web/core/components/rich-filters/filter-item/root.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 import { observer } from "mobx-react";
 // plane imports
@@ -96,14 +102,14 @@ export const FilterItem = observer(function FilterItem<P extends TFilterProperty
         options={operatorOptions}
         className={COMMON_FILTER_ITEM_BORDER_CLASSNAME}
         customButtonClassName={cn(
-          "h-full px-2 text-sm font-normal",
-          isOperatorSelectionDisabled && "hover:bg-custom-background-100"
+          "h-full px-2 text-13 font-regular",
+          isOperatorSelectionDisabled && "hover:bg-layer-2-hover"
         )}
         optionsClassName="w-48"
         maxHeight="2xl"
         disabled={isOperatorSelectionDisabled}
         customButton={
-          <div className="flex items-center h-full" aria-disabled={isOperatorSelectionDisabled}>
+          <div className="flex h-full items-center" aria-disabled={isOperatorSelectionDisabled}>
             {filterConfig.getLabelForOperator(selectedOperatorOption)}
           </div>
         }
diff --git a/apps/web/core/components/rich-filters/filter-value-input/date/range.tsx b/apps/web/core/components/rich-filters/filter-value-input/date/range.tsx
index 5f9824cf1..8a96acf37 100644
--- a/apps/web/core/components/rich-filters/filter-value-input/date/range.tsx
+++ b/apps/web/core/components/rich-filters/filter-value-input/date/range.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 import { observer } from "mobx-react";
 // plane imports
@@ -47,8 +53,8 @@ export const DateRangeFilterValueInput = observer(function DateRangeFilterValueI
       buttonVariant="transparent-with-text"
       buttonClassName={cn("rounded-none", {
         [COMMON_FILTER_ITEM_BORDER_CLASSNAME]: !isDisabled,
-        "text-red-500": isIncomplete,
-        "hover:bg-custom-background-100": isDisabled,
+        "text-danger-primary": isIncomplete,
+        "hover:bg-surface-1": isDisabled,
       })}
       renderPlaceholder
       renderInPortal
diff --git a/apps/web/core/components/rich-filters/filter-value-input/date/single.tsx b/apps/web/core/components/rich-filters/filter-value-input/date/single.tsx
index 499a13417..0eb70df03 100644
--- a/apps/web/core/components/rich-filters/filter-value-input/date/single.tsx
+++ b/apps/web/core/components/rich-filters/filter-value-input/date/single.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 import { observer } from "mobx-react";
 // plane imports
@@ -29,8 +35,8 @@ export const SingleDateFilterValueInput = observer(function SingleDateFilterValu
       }}
       buttonClassName={cn("rounded-none", {
         [COMMON_FILTER_ITEM_BORDER_CLASSNAME]: !isDisabled,
-        "text-custom-text-400": !conditionValue,
-        "hover:bg-custom-background-100": isDisabled,
+        "text-placeholder": !conditionValue,
+        "hover:bg-surface-1": isDisabled,
       })}
       minDate={config.min}
       maxDate={config.max}
diff --git a/apps/web/core/components/rich-filters/filter-value-input/root.tsx b/apps/web/core/components/rich-filters/filter-value-input/root.tsx
index a9717b09c..b1e996ed1 100644
--- a/apps/web/core/components/rich-filters/filter-value-input/root.tsx
+++ b/apps/web/core/components/rich-filters/filter-value-input/root.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 
 import { observer } from "mobx-react";
diff --git a/apps/web/core/components/rich-filters/filter-value-input/select/multi.tsx b/apps/web/core/components/rich-filters/filter-value-input/select/multi.tsx
index 222faa2f4..2c5fb409f 100644
--- a/apps/web/core/components/rich-filters/filter-value-input/select/multi.tsx
+++ b/apps/web/core/components/rich-filters/filter-value-input/select/multi.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React, { useState, useEffect, useMemo } from "react";
 import { observer } from "mobx-react";
 // plane imports
diff --git a/apps/web/core/components/rich-filters/filter-value-input/select/selected-options-display.tsx b/apps/web/core/components/rich-filters/filter-value-input/select/selected-options-display.tsx
index d179aa61e..61520a6f8 100644
--- a/apps/web/core/components/rich-filters/filter-value-input/select/selected-options-display.tsx
+++ b/apps/web/core/components/rich-filters/filter-value-input/select/selected-options-display.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 import { Transition } from "@headlessui/react";
 // plane imports
@@ -24,25 +30,23 @@ export function SelectedOptionsDisplay<V extends TFilterValue>(props: TSelectedO
 
   // When no value is selected, display the empty value
   if (selectedArray.length === 0) {
-    return <span className="text-custom-text-400">{emptyValue}</span>;
+    return <span className="text-placeholder">{emptyValue}</span>;
   }
 
   // When no options are found but we have a fallback text
   if (options.length === 0) {
-    return <span className="text-custom-text-400">{fallbackText ?? `${selectedArray.length} option(s) selected`}</span>;
+    return <span className="text-placeholder">{fallbackText ?? `${selectedArray.length} option(s) selected`}</span>;
   }
 
   return (
-    <div className="flex items-center h-full overflow-hidden">
+    <div className="flex h-full items-center overflow-hidden">
       {selectedOptions.slice(0, displayCount).map((option, index) => (
         <React.Fragment key={index}>
           <div className="flex items-center whitespace-nowrap">
             {option?.icon && <span className={cn("mr-1", option.iconClassName)}>{option.icon}</span>}
-            <span className="truncate max-w-24">{option?.label}</span>
+            <span className="max-w-24 truncate">{option?.label}</span>
           </div>
-          {index < Math.min(displayCount, selectedOptions.length) - 1 && (
-            <span className="text-custom-text-300 mx-1">,</span>
-          )}
+          {index < Math.min(displayCount, selectedOptions.length) - 1 && <span className="mx-1 text-tertiary">,</span>}
         </React.Fragment>
       ))}
       {remainingCount > 0 && (
@@ -52,7 +56,7 @@ export function SelectedOptionsDisplay<V extends TFilterValue>(props: TSelectedO
           enter="transition-opacity duration-300"
           enterFrom="opacity-0"
           enterTo="opacity-100"
-          className="text-custom-text-300 whitespace-nowrap ml-1"
+          className="ml-1 whitespace-nowrap text-tertiary"
         >
           +{remainingCount} more
         </Transition>
diff --git a/apps/web/core/components/rich-filters/filter-value-input/select/shared.tsx b/apps/web/core/components/rich-filters/filter-value-input/select/shared.tsx
index d4054d845..a948b2680 100644
--- a/apps/web/core/components/rich-filters/filter-value-input/select/shared.tsx
+++ b/apps/web/core/components/rich-filters/filter-value-input/select/shared.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // plane imports
 import type { TSupportedFilterFieldConfigs, IFilterOption, TFilterValue } from "@plane/types";
 import { cn } from "@plane/utils";
@@ -45,9 +51,9 @@ export const getFormattedOptions = <V extends TFilterValue>(options: IFilterOpti
 
 export const getCommonCustomSearchSelectProps = (isDisabled?: boolean) => ({
   customButtonClassName: cn(
-    "h-full w-full px-2 text-sm font-normal transition-all duration-300 ease-in-out",
+    "h-full w-full px-2 text-13 font-regular transition-all duration-300 ease-in-out",
     !isDisabled && COMMON_FILTER_ITEM_BORDER_CLASSNAME,
-    isDisabled && "hover:bg-custom-background-100"
+    isDisabled && "hover:bg-surface-1"
   ),
   optionsClassName: "w-56",
   maxHeight: "md" as const,
diff --git a/apps/web/core/components/rich-filters/filter-value-input/select/single.tsx b/apps/web/core/components/rich-filters/filter-value-input/select/single.tsx
index 20c6d5296..2e525b5d6 100644
--- a/apps/web/core/components/rich-filters/filter-value-input/select/single.tsx
+++ b/apps/web/core/components/rich-filters/filter-value-input/select/single.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React, { useState, useEffect, useMemo } from "react";
 import { observer } from "mobx-react";
 // plane imports
diff --git a/apps/web/core/components/rich-filters/filters-row.tsx b/apps/web/core/components/rich-filters/filters-row.tsx
index 6d09a8ee3..6a63603a4 100644
--- a/apps/web/core/components/rich-filters/filters-row.tsx
+++ b/apps/web/core/components/rich-filters/filters-row.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React, { useCallback, useState } from "react";
 import { observer } from "mobx-react";
 import { ListFilterPlus } from "lucide-react";
@@ -43,14 +49,10 @@ export const FiltersRow = observer(function FiltersRow<K extends TFilterProperty
     !disabledAllOperations && (filter.canClearFilters || filter.canSaveView || filter.canUpdateView);
 
   const headerButtonConfig: Partial<TAddFilterButtonProps<K, E>["buttonConfig"]> = {
-    variant: "link-neutral",
-    className: "bg-custom-background-90",
     label: null,
   };
 
   const modalButtonConfig: Partial<TAddFilterButtonProps<K, E>["buttonConfig"]> = {
-    variant: "neutral-primary",
-    className: "bg-custom-background-100",
     label: !hasAnyConditions ? "Filters" : null,
   };
 
@@ -73,6 +75,7 @@ export const FiltersRow = observer(function FiltersRow<K extends TFilterProperty
         buttonConfig={{
           label: null,
           ...(variant === "modal" ? modalButtonConfig : headerButtonConfig),
+          size: "lg",
           iconConfig: {
             shouldShowIcon: true,
             iconComponent: ListFilterPlus,
@@ -88,8 +91,7 @@ export const FiltersRow = observer(function FiltersRow<K extends TFilterProperty
     <>
       <ElementTransition show={filter.canClearFilters}>
         <Button
-          variant="neutral-primary"
-          size="sm"
+          variant="secondary"
           className={COMMON_OPERATION_BUTTON_CLASSNAME}
           onClick={filter.clearFilters}
           data-ph-element={trackerElements?.clearFilter}
@@ -99,8 +101,7 @@ export const FiltersRow = observer(function FiltersRow<K extends TFilterProperty
       </ElementTransition>
       <ElementTransition show={filter.canSaveView}>
         <Button
-          variant="accent-primary"
-          size="sm"
+          variant="secondary"
           className={COMMON_OPERATION_BUTTON_CLASSNAME}
           onClick={filter.saveView}
           data-ph-element={trackerElements?.saveView}
@@ -110,8 +111,7 @@ export const FiltersRow = observer(function FiltersRow<K extends TFilterProperty
       </ElementTransition>
       <ElementTransition show={filter.canUpdateView}>
         <Button
-          variant="accent-primary"
-          size="sm"
+          variant="secondary"
           className={COMMON_OPERATION_BUTTON_CLASSNAME}
           onClick={handleUpdate}
           loading={isUpdating}
@@ -125,10 +125,10 @@ export const FiltersRow = observer(function FiltersRow<K extends TFilterProperty
   );
 
   const mainContent = (
-    <div className="w-full flex items-start gap-2">
-      <div className="w-full flex flex-wrap items-center gap-2">{leftContent}</div>
+    <div className="flex w-full items-start gap-2 rounded-lg bg-layer-1 px-4 py-2">
+      <div className="flex w-full flex-wrap items-center gap-2">{leftContent}</div>
       <div
-        className={cn("flex items-center gap-2 border-l border-custom-border-200 pl-4", {
+        className={cn("flex items-center gap-2 border-l border-subtle pl-4", {
           "border-l-transparent pl-0": !hasAvailableOperations,
         })}
       >
@@ -138,13 +138,11 @@ export const FiltersRow = observer(function FiltersRow<K extends TFilterProperty
   );
 
   const ModalVariant = (
-    <div className="w-full flex flex-wrap items-center gap-2 min-h-11 bg-custom-background-90 rounded-lg p-2">
-      {mainContent}
-    </div>
+    <div className="flex min-h-11 w-full flex-wrap items-center gap-2 rounded-lg bg-layer-1 p-2">{mainContent}</div>
   );
 
   const HeaderVariant = (
-    <Header variant={EHeaderVariant.TERNARY} className="min-h-11">
+    <Header variant={EHeaderVariant.TERNARY} className="min-h-11 bg-surface-1 !px-3">
       {mainContent}
     </Header>
   );
diff --git a/apps/web/core/components/rich-filters/filters-toggle.tsx b/apps/web/core/components/rich-filters/filters-toggle.tsx
index 43825099a..27479216f 100644
--- a/apps/web/core/components/rich-filters/filters-toggle.tsx
+++ b/apps/web/core/components/rich-filters/filters-toggle.tsx
@@ -1,9 +1,16 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
-import { ListFilter } from "lucide-react";
 // plane imports
+import { IconButton } from "@plane/propel/icon-button";
+import { FilterIcon, FilterAppliedIcon } from "@plane/propel/icons";
+import { cn } from "@plane/utils";
 import type { IFilterInstance } from "@plane/shared-state";
 import type { TExternalFilter, TFilterProperty } from "@plane/types";
-import { cn } from "@plane/ui";
 // components
 import { AddFilterButton } from "@/components/rich-filters/add-filters/button";
 
@@ -12,7 +19,7 @@ type TFiltersToggleProps<P extends TFilterProperty, E extends TExternalFilter> =
 };
 
 const COMMON_CLASSNAME =
-  "grid place-items-center h-7 w-full py-0.5 px-2 rounded border transition-all duration-200 cursor-pointer";
+  "grid place-items-center h-7 w-full py-0.5 px-2 rounded-md border border-subtle-1 transition-all duration-200 cursor-pointer";
 
 export const FiltersToggle = observer(function FiltersToggle<P extends TFilterProperty, E extends TExternalFilter>(
   props: TFiltersToggleProps<P, E>
@@ -33,13 +40,35 @@ export const FiltersToggle = observer(function FiltersToggle<P extends TFilterPr
     filter.toggleVisibility();
   };
 
+  // Base classes when filter is active
+  const activeFilterBaseClasses =
+    "text-accent-primary border border-accent-subtle-1 hover:border-accent-subtle-1 active:border-accent-subtle-1 focus:border-accent-subtle-1";
+
+  // State classes that prevent hover/active/focus color changes
+  const noHoverStateClasses = "hover:text-accent-primary active:text-accent-primary focus:text-accent-primary";
+
+  // Background classes based on toggle state (darker when open, lighter when closed)
+  const backgroundClasses = isFilterRowVisible
+    ? "bg-accent-subtle-hover hover:bg-accent-subtle-hover active:bg-accent-subtle-hover focus:bg-accent-subtle-hover"
+    : "bg-accent-subtle hover:bg-accent-subtle active:bg-accent-subtle focus:bg-accent-subtle";
+
+  const buttonClassName = cn({
+    [activeFilterBaseClasses]: showFilterRowChangesPill,
+    [backgroundClasses]: showFilterRowChangesPill,
+    [noHoverStateClasses]: showFilterRowChangesPill,
+  });
+
+  const iconClassName = cn({
+    "text-accent-primary [&_path]:fill-current": showFilterRowChangesPill,
+  });
+
   // Show the add filter button when there are no active conditions, the filter row is hidden, and no unsaved changes exist
   if (filter && showAddFilterButton) {
     return (
       <AddFilterButton
         filter={filter}
         buttonConfig={{
-          variant: "neutral-primary",
+          variant: "secondary",
           className: COMMON_CLASSNAME,
           label: null,
         }}
@@ -49,28 +78,13 @@ export const FiltersToggle = observer(function FiltersToggle<P extends TFilterPr
   }
 
   return (
-    <div
-      className={cn(COMMON_CLASSNAME, {
-        "border-transparent bg-custom-primary-100/10 hover:bg-custom-primary-100/20": isFilterRowVisible,
-        "border-custom-border-200 hover:bg-custom-background-90": !isFilterRowVisible,
-      })}
+    <IconButton
+      size="lg"
+      variant="secondary"
+      icon={showFilterRowChangesPill ? FilterAppliedIcon : FilterIcon}
       onClick={handleToggleFilter}
-    >
-      <div className="relative">
-        <ListFilter
-          className={cn("size-4", {
-            "text-custom-primary-100": isFilterRowVisible,
-            "text-custom-text-300": !isFilterRowVisible,
-          })}
-        />
-        {showFilterRowChangesPill && (
-          <span
-            className={cn("p-[3px] rounded-full bg-custom-primary-100 absolute top-[0.2px] -right-[0.4px]", {
-              "bg-custom-text-300": hasAnyConditions === false && filter?.hasChanges === true, // If there are no conditions and there are changes, show the pill in the background color
-            })}
-          />
-        )}
-      </div>
-    </div>
+      className={buttonClassName}
+      iconClassName={iconClassName}
+    />
   );
 });
diff --git a/apps/web/core/components/rich-filters/shared.ts b/apps/web/core/components/rich-filters/shared.ts
index 89b115dcf..498ac4258 100644
--- a/apps/web/core/components/rich-filters/shared.ts
+++ b/apps/web/core/components/rich-filters/shared.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type {
   SingleOrArray,
   TFilterConditionNodeForDisplay,
@@ -6,7 +12,7 @@ import type {
   TSupportedFilterFieldConfigs,
 } from "@plane/types";
 
-export const COMMON_FILTER_ITEM_BORDER_CLASSNAME = "border-r border-custom-border-200";
+export const COMMON_FILTER_ITEM_BORDER_CLASSNAME = "border-r border-subtle-1";
 
 export const EMPTY_FILTER_PLACEHOLDER_TEXT = "--";
 
diff --git a/apps/web/core/components/settings/boxed-control-item.tsx b/apps/web/core/components/settings/boxed-control-item.tsx
new file mode 100644
index 000000000..2428d586c
--- /dev/null
+++ b/apps/web/core/components/settings/boxed-control-item.tsx
@@ -0,0 +1,34 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// plane imports
+import { cn } from "@plane/utils";
+
+type Props = {
+  className?: string;
+  control?: React.ReactNode;
+  description?: React.ReactNode;
+  title: React.ReactNode;
+};
+
+export function SettingsBoxedControlItem(props: Props) {
+  const { className, control, description, title } = props;
+
+  return (
+    <div
+      className={cn(
+        "flex w-full flex-col items-start gap-4 rounded-lg border border-subtle bg-layer-2 px-4 py-3 md:flex-row md:items-center md:justify-between md:gap-8",
+        className
+      )}
+    >
+      <div className="flex flex-col gap-1.5">
+        <h4 className="text-body-sm-medium text-primary">{title}</h4>
+        {description && <p className="text-caption-md-regular text-tertiary">{description}</p>}
+      </div>
+      {control && <div className="shrink-0">{control}</div>}
+    </div>
+  );
+}
diff --git a/apps/web/core/components/settings/content-wrapper.tsx b/apps/web/core/components/settings/content-wrapper.tsx
index a15566d66..3c982922a 100644
--- a/apps/web/core/components/settings/content-wrapper.tsx
+++ b/apps/web/core/components/settings/content-wrapper.tsx
@@ -1,22 +1,41 @@
-import type { ReactNode } from "react";
-import { observer } from "mobx-react";
-import { cn } from "@plane/utils";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
 
-type TProps = {
-  children: ReactNode;
-  size?: "lg" | "md";
+// plane imports
+import { ScrollArea } from "@plane/propel/scrollarea";
+import { cn } from "@plane/utils";
+// components
+import { AppHeader } from "@/components/core/app-header";
+
+type Props = {
+  children: React.ReactNode;
+  header?: React.ReactNode;
+  hugging?: boolean;
 };
-export const SettingsContentWrapper = observer(function SettingsContentWrapper(props: TProps) {
-  const { children, size = "md" } = props;
+
+export function SettingsContentWrapper(props: Props) {
+  const { children, header, hugging = false } = props;
 
   return (
-    <div
-      className={cn("flex flex-col w-full items-center mx-auto py-4 md:py-0", {
-        "md:px-4 max-w-[800px] 2xl:max-w-[1000px]": size === "md",
-        "md:px-16": size === "lg",
-      })}
-    >
-      <div className="pb-10 w-full">{children}</div>
+    <div className="@container flex size-full grow flex-col overflow-hidden">
+      {header && (
+        <div className="w-full shrink-0">
+          <AppHeader header={header} />
+        </div>
+      )}
+      <ScrollArea scrollType="hover" orientation="vertical" size="sm" className="size-full grow overflow-y-scroll">
+        <div
+          className={cn("py-9", {
+            "w-full px-page-x lg:px-12": hugging,
+            "mx-auto w-full max-w-225 px-page-x @min-[58.95rem]:px-0": !hugging, // 58.95rem = max-width(56.25rem) + padding-x(1.35rem * 2)
+          })}
+        >
+          {children}
+        </div>
+      </ScrollArea>
     </div>
   );
-});
+}
diff --git a/apps/web/core/components/settings/control-item.tsx b/apps/web/core/components/settings/control-item.tsx
new file mode 100644
index 000000000..1b11dc650
--- /dev/null
+++ b/apps/web/core/components/settings/control-item.tsx
@@ -0,0 +1,25 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+type Props = {
+  control: React.ReactNode;
+  description: string;
+  title: React.ReactNode;
+};
+
+export function SettingsControlItem(props: Props) {
+  const { control, description, title } = props;
+
+  return (
+    <div className="flex w-full flex-col items-start gap-4 py-3 md:flex-row md:items-center md:justify-between md:gap-8">
+      <div className="flex flex-col gap-1">
+        <h4 className="text-body-sm-medium text-primary">{title}</h4>
+        <p className="text-caption-md-regular text-secondary">{description}</p>
+      </div>
+      <div className="shrink-0">{control}</div>
+    </div>
+  );
+}
diff --git a/apps/web/core/components/settings/header.tsx b/apps/web/core/components/settings/header.tsx
deleted file mode 100644
index b2c29f852..000000000
--- a/apps/web/core/components/settings/header.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-import { observer } from "mobx-react";
-import Link from "next/link";
-import { useTheme } from "next-themes";
-import { ChevronLeftIcon } from "lucide-react";
-// plane imports
-import { useTranslation } from "@plane/i18n";
-import { getButtonStyling } from "@plane/propel/button";
-import { cn } from "@plane/utils";
-// hooks
-import { useWorkspace } from "@/hooks/store/use-workspace";
-import { useUserSettings } from "@/hooks/store/user";
-// local imports
-import { WorkspaceLogo } from "../workspace/logo";
-import SettingsTabs from "./tabs";
-
-export const SettingsHeader = observer(function SettingsHeader() {
-  // hooks
-  const { t } = useTranslation();
-  const { currentWorkspace } = useWorkspace();
-  const { isScrolled } = useUserSettings();
-  // resolved theme
-  const { resolvedTheme } = useTheme();
-  // redirect url for normal mode
-
-  return (
-    <div
-      className={cn("bg-custom-background-90 p-page-x transition-all duration-300 ease-in-out relative", {
-        "!pt-4 flex md:flex-col": isScrolled,
-        "bg-custom-background-90/50": resolvedTheme === "dark",
-      })}
-    >
-      <Link
-        href={`/${currentWorkspace?.slug}`}
-        className={cn(
-          getButtonStyling("neutral-primary", "sm"),
-          "md:absolute left-2 top-9 group flex  gap-2 text-custom-text-300 mb-4 border border-transparent w-fit rounded-lg ",
-          "h-6 w-6 rounded-lg p-1 bg-custom-background-100 border-custom-border-200 ",
-          isScrolled ? "-mt-2 " : "hidden p-0 overflow-hidden items-center pr-2 border-none"
-        )}
-      >
-        <ChevronLeftIcon className={cn("h-4 w-4", !isScrolled ? "my-auto h-0" : "")} />
-      </Link>
-      {/* Breadcrumb */}
-      <Link
-        href={`/${currentWorkspace?.slug}`}
-        className={cn(
-          "group flex  gap-2 text-custom-text-300 mb-3 border border-transparent w-fit rounded-lg",
-          !isScrolled ? "hover:bg-custom-background-100 hover:border-custom-border-200 items-center pr-2 " : " h-0 m-0"
-        )}
-      >
-        <button
-          className={cn(
-            getButtonStyling("neutral-primary", "sm"),
-            "h-6 w-6 rounded-lg p-1 hover:bg-custom-background-100 hover:border-custom-border-200",
-            "group-hover:bg-custom-background-100 group-hover:border-transparent",
-            { "h-0 hidden": isScrolled }
-          )}
-        >
-          <ChevronLeftIcon className={cn("h-4 w-4", !isScrolled ? "my-auto" : "")} />
-        </button>
-        <div
-          className={cn("flex gap-2 h-full w-full transition-[height] duration-300  ease-in-out", {
-            "h-0 w-0 overflow-hidden": isScrolled,
-          })}
-        >
-          <div className="text-sm my-auto font-semibold text-custom-text-200">{t("back_to_workspace")}</div>
-          {/* Last workspace */}
-          <div className="flex items-center gap-1">
-            <WorkspaceLogo
-              name={currentWorkspace?.name || ""}
-              logo={currentWorkspace?.logo_url || ""}
-              classNames="my-auto size-4 text-xs"
-            />
-            <div className="text-xs my-auto text-custom-text-100 font-semibold">{currentWorkspace?.name}</div>
-          </div>
-        </div>
-      </Link>
-      <div className="flex flex-col gap-1.5">
-        {/* Description */}
-        <div className="text-custom-text-100 font-semibold text-2xl">{t("settings")}</div>
-        {/* Actions */}
-        <SettingsTabs />
-      </div>
-    </div>
-  );
-});
diff --git a/apps/web/core/components/settings/heading.tsx b/apps/web/core/components/settings/heading.tsx
index a7fda314d..32656f288 100644
--- a/apps/web/core/components/settings/heading.tsx
+++ b/apps/web/core/components/settings/heading.tsx
@@ -1,48 +1,38 @@
-import { Button } from "@plane/propel/button";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// plane imports
 import { cn } from "@plane/ui";
 
 type Props = {
-  title: string | React.ReactNode;
-  description?: string;
-  appendToRight?: React.ReactNode;
-  showButton?: boolean;
-  customButton?: React.ReactNode;
-  button?: {
-    label: string;
-    onClick: () => void;
-  };
   className?: string;
+  control?: React.ReactNode;
+  description?: React.ReactNode;
+  title?: React.ReactNode;
+  variant?: "h3" | "h4" | "h6";
 };
 
-export function SettingsHeading({
-  title,
-  description,
-  button,
-  appendToRight,
-  customButton,
-  showButton = true,
-  className,
-}: Props) {
+export function SettingsHeading({ className, control, description, title, variant = "h3" }: Props) {
   return (
-    <div
-      className={cn(
-        "flex flex-col md:flex-row gap-2 items-start md:items-center justify-between border-b border-custom-border-100 pb-3.5",
-        className
-      )}
-    >
+    <div className={cn("flex flex-col items-start justify-between gap-4 md:flex-row md:items-center", className)}>
       <div className="flex flex-col items-start gap-1">
-        {typeof title === "string" ? <h3 className="text-xl font-medium">{title}</h3> : title}
-        {description && <div className="text-sm text-custom-text-300">{description}</div>}
+        {title && (
+          <h3
+            className={cn("text-h3-medium text-primary", {
+              "text-h3-medium": variant === "h3",
+              "text-h4-medium": variant === "h4",
+              "text-h6-medium": variant === "h6",
+            })}
+          >
+            {title}
+          </h3>
+        )}
+        {description && <p className="text-body-xs-regular text-tertiary">{description}</p>}
       </div>
-      {showButton && customButton}
-      {button && showButton && (
-        <Button variant="primary" onClick={button.onClick} size="sm" className="w-fit">
-          {button.label}
-        </Button>
-      )}
-      {appendToRight}
+      {control}
     </div>
   );
 }
-
-export default SettingsHeading;
diff --git a/apps/web/core/components/settings/helper.ts b/apps/web/core/components/settings/helper.ts
index e621fcdbd..85b1fe132 100644
--- a/apps/web/core/components/settings/helper.ts
+++ b/apps/web/core/components/settings/helper.ts
@@ -1,5 +1,10 @@
-import { GROUPED_PROFILE_SETTINGS, GROUPED_WORKSPACE_SETTINGS } from "@plane/constants";
-import { PROJECT_SETTINGS_LINKS } from "@/plane-web/constants/project";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { GROUPED_WORKSPACE_SETTINGS, PROJECT_SETTINGS_FLAT_MAP } from "@plane/constants";
 
 const hrefToLabelMap = (options: Record<string, Array<{ href: string; i18n_label: string; [key: string]: any }>>) =>
   Object.values(options)
@@ -14,9 +19,7 @@ const hrefToLabelMap = (options: Record<string, Array<{ href: string; i18n_label
 
 const workspaceHrefToLabelMap = hrefToLabelMap(GROUPED_WORKSPACE_SETTINGS);
 
-const profiletHrefToLabelMap = hrefToLabelMap(GROUPED_PROFILE_SETTINGS);
-
-const projectHrefToLabelMap = PROJECT_SETTINGS_LINKS.reduce(
+const projectHrefToLabelMap = PROJECT_SETTINGS_FLAT_MAP.reduce(
   (acc, setting) => {
     acc[setting.href] = setting.i18n_label;
     return acc;
@@ -39,14 +42,6 @@ export const getWorkspaceActivePath = (pathname: string) => {
   return workspaceHrefToLabelMap[subPath];
 };
 
-export const getProfileActivePath = (pathname: string) => {
-  const parts = pathname.split("/").filter(Boolean);
-  const settingsIndex = parts.indexOf("settings");
-  if (settingsIndex === -1) return null;
-  const subPath = "/" + parts.slice(settingsIndex, settingsIndex + 3).join("/");
-  return profiletHrefToLabelMap[subPath];
-};
-
 export const getProjectActivePath = (pathname: string) => {
   const parts = pathname.split("/").filter(Boolean);
   const settingsIndex = parts.indexOf("settings");
diff --git a/apps/web/core/components/settings/layout.tsx b/apps/web/core/components/settings/layout.tsx
index 43923e0df..0c950a99f 100644
--- a/apps/web/core/components/settings/layout.tsx
+++ b/apps/web/core/components/settings/layout.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useRef } from "react";
 import { observer } from "mobx-react";
 
@@ -10,7 +16,7 @@ export const SettingsContentLayout = observer(function SettingsContentLayout({
   const ref = useRef<HTMLDivElement>(null);
 
   return (
-    <div className="w-full h-full min-h-full overflow-y-scroll " ref={ref}>
+    <div className="h-full min-h-full w-full overflow-y-scroll" ref={ref}>
       {children}
     </div>
   );
diff --git a/apps/web/core/components/settings/mobile/index.ts b/apps/web/core/components/settings/mobile/index.ts
deleted file mode 100644
index 870d3745c..000000000
--- a/apps/web/core/components/settings/mobile/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./nav";
diff --git a/apps/web/core/components/settings/mobile/nav.tsx b/apps/web/core/components/settings/mobile/nav.tsx
index 49159ddc2..0d1a763c6 100644
--- a/apps/web/core/components/settings/mobile/nav.tsx
+++ b/apps/web/core/components/settings/mobile/nav.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useRef } from "react";
 import { observer } from "mobx-react";
 import { Menu } from "lucide-react";
@@ -5,9 +11,10 @@ import { useOutsideClickDetector } from "@plane/hooks";
 import { useTranslation } from "@plane/i18n";
 import { ChevronRightIcon } from "@plane/propel/icons";
 import { useUserSettings } from "@/hooks/store/user";
+import { IconButton } from "@plane/propel/icon-button";
 
 type Props = {
-  hamburgerContent: React.ComponentType<{ isMobile: boolean }>;
+  hamburgerContent: React.ComponentType<{ className?: string; isMobile?: boolean }>;
   activePath: string;
 };
 
@@ -24,23 +31,19 @@ export const SettingsMobileNav = observer(function SettingsMobileNav(props: Prop
   });
 
   return (
-    <div className="md:hidden">
-      <div className="border-b border-custom-border-100 py-3 flex items-center gap-4">
-        <div ref={sidebarRef} className="relative w-fit">
-          {!sidebarCollapsed && <HamburgerContent isMobile />}
-          <button
-            type="button"
-            className="z-50  group flex-shrink-0 size-6 grid place-items-center rounded border border-custom-border-200 transition-all bg-custom-background md:hidden"
-            onClick={() => toggleSidebar()}
-          >
-            <Menu className="size-3.5 text-custom-text-200 transition-all group-hover:text-custom-text-100" />
-          </button>
-        </div>
-        {/* path */}
-        <div className="flex items-center gap-2">
-          <ChevronRightIcon className="size-4 text-custom-text-300" />
-          <span className="text-sm font-medium text-custom-text-200">{t(activePath)}</span>
-        </div>
+    <div className="flex items-center gap-4 border-b border-subtle px-page-x py-3 md:hidden">
+      <div ref={sidebarRef} className="relative z-50 w-fit">
+        {!sidebarCollapsed && (
+          <div className="absolute top-10.5 left-0 z-50">
+            <HamburgerContent className="max-h-100 rounded-lg border border-subtle pb-3" />
+          </div>
+        )}
+        <IconButton variant="secondary" className="group z-50 shrink-0" icon={Menu} onClick={() => toggleSidebar()} />
+      </div>
+      {/* path */}
+      <div className="flex items-center gap-2">
+        <ChevronRightIcon className="size-4 text-tertiary" />
+        <span className="text-13 font-medium text-secondary">{t(activePath)}</span>
       </div>
     </div>
   );
diff --git a/apps/web/core/components/settings/page-header.tsx b/apps/web/core/components/settings/page-header.tsx
new file mode 100644
index 000000000..2b3328a78
--- /dev/null
+++ b/apps/web/core/components/settings/page-header.tsx
@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { Header } from "@plane/ui";
+
+type Props = {
+  leftItem?: React.ReactNode;
+  rightItem?: React.ReactNode;
+};
+
+export function SettingsPageHeader(props: Props) {
+  const { leftItem, rightItem } = props;
+
+  return (
+    <Header>
+      {leftItem && <Header.LeftItem>{leftItem}</Header.LeftItem>}
+      {rightItem && <Header.RightItem>{rightItem}</Header.RightItem>}
+    </Header>
+  );
+}
diff --git a/apps/web/core/components/settings/profile/content/index.ts b/apps/web/core/components/settings/profile/content/index.ts
new file mode 100644
index 000000000..d98033459
--- /dev/null
+++ b/apps/web/core/components/settings/profile/content/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./root";
diff --git a/apps/web/core/components/settings/profile/content/pages/activity/activity-list.tsx b/apps/web/core/components/settings/profile/content/pages/activity/activity-list.tsx
new file mode 100644
index 000000000..9c6db8130
--- /dev/null
+++ b/apps/web/core/components/settings/profile/content/pages/activity/activity-list.tsx
@@ -0,0 +1,194 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useEffect } from "react";
+import { observer } from "mobx-react";
+import Link from "next/link";
+import useSWR from "swr";
+// icons
+import { History, MessageSquare } from "lucide-react";
+import { calculateTimeAgo, getFileURL } from "@plane/utils";
+// hooks
+import { ActivityIcon, ActivityMessage } from "@/components/core/activity";
+import { RichTextEditor } from "@/components/editor/rich-text";
+import { ActivitySettingsLoader } from "@/components/ui/loader/settings/activity";
+// constants
+import { USER_ACTIVITY } from "@/constants/fetch-keys";
+// hooks
+import { useUserProfile } from "@/hooks/store/user/user-user-profile";
+// services
+import { UserService } from "@/services/user.service";
+const userService = new UserService();
+
+type Props = {
+  cursor: string;
+  perPage: number;
+  updateResultsCount: (count: number) => void;
+  updateTotalPages: (count: number) => void;
+  updateEmptyState: (state: boolean) => void;
+};
+
+export const ActivityProfileSettingsList = observer(function ProfileActivityListPage(props: Props) {
+  const { cursor, perPage, updateResultsCount, updateTotalPages, updateEmptyState } = props;
+  // store hooks
+  const { data: currentUser } = useUserProfile();
+
+  const { data: userProfileActivity } = useSWR(
+    USER_ACTIVITY({
+      cursor,
+    }),
+    () =>
+      userService.getUserActivity({
+        cursor,
+        per_page: perPage,
+      })
+  );
+
+  useEffect(() => {
+    if (!userProfileActivity) return;
+
+    // if no results found then show empty state
+    if (userProfileActivity.total_results === 0) updateEmptyState(true);
+
+    updateTotalPages(userProfileActivity.total_pages);
+    updateResultsCount(userProfileActivity.results.length);
+  }, [updateResultsCount, updateTotalPages, userProfileActivity, updateEmptyState]);
+
+  // TODO: refactor this component
+  return (
+    <>
+      {userProfileActivity ? (
+        <ul>
+          {userProfileActivity.results.map((activityItem: any) => {
+            if (activityItem.field === "comment")
+              return (
+                <div key={activityItem.id} className="mt-2">
+                  <div className="relative flex items-start space-x-3">
+                    <div className="relative px-1">
+                      {activityItem.field ? (
+                        activityItem.new_value === "restore" && <History className="h-3.5 w-3.5 text-secondary" />
+                      ) : activityItem.actor_detail.avatar_url && activityItem.actor_detail.avatar_url !== "" ? (
+                        <img
+                          src={getFileURL(activityItem.actor_detail.avatar_url)}
+                          alt={activityItem.actor_detail.display_name}
+                          height={30}
+                          width={30}
+                          className="grid h-7 w-7 place-items-center rounded-full border-2 border-subtle-1 bg-layer-3"
+                        />
+                      ) : (
+                        <div className="grid h-7 w-7 place-items-center rounded-full border-2 border-subtle-1 bg-layer-3 capitalize">
+                          {activityItem.actor_detail.display_name?.[0]}
+                        </div>
+                      )}
+
+                      <span className="flex h-6 w-6 items-center justify-center rounded-full bg-layer-3 p-2 text-secondary">
+                        <MessageSquare className="!text-20 text-secondary" aria-hidden="true" />
+                      </span>
+                    </div>
+                    <div className="min-w-0 flex-1">
+                      <div>
+                        <div className="text-11">
+                          {activityItem.actor_detail.is_bot
+                            ? activityItem.actor_detail.first_name + " Bot"
+                            : activityItem.actor_detail.display_name}
+                        </div>
+                        <p className="mt-0.5 text-11 text-secondary">
+                          Commented {calculateTimeAgo(activityItem.created_at)}
+                        </p>
+                      </div>
+                      <div className="issue-comments-section p-0">
+                        <RichTextEditor
+                          editable={false}
+                          id={activityItem.id}
+                          initialValue={
+                            activityItem?.new_value !== "" ? activityItem.new_value : activityItem.old_value
+                          }
+                          containerClassName="text-11 bg-surface-1"
+                          workspaceId={activityItem?.workspace_detail?.id?.toString() ?? ""}
+                          workspaceSlug={activityItem?.workspace_detail?.slug?.toString() ?? ""}
+                          projectId={activityItem.project ?? ""}
+                        />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              );
+
+            const message = <ActivityMessage activity={activityItem} showIssue />;
+
+            if ("field" in activityItem && activityItem.field !== "updated_by")
+              return (
+                <li key={activityItem.id}>
+                  <div className="relative pb-1">
+                    <div className="relative flex items-start space-x-2">
+                      <>
+                        <div>
+                          <div className="relative mt-4 px-1.5">
+                            <div className="mt-1.5">
+                              <div className="flex h-6 w-6 items-center justify-center rounded-lg border border-subtle shadow-raised-100">
+                                {activityItem.field ? (
+                                  activityItem.new_value === "restore" ? (
+                                    <History className="h-5 w-5 text-secondary" />
+                                  ) : (
+                                    <ActivityIcon activity={activityItem} />
+                                  )
+                                ) : activityItem.actor_detail.avatar_url &&
+                                  activityItem.actor_detail.avatar_url !== "" ? (
+                                  <img
+                                    src={getFileURL(activityItem.actor_detail.avatar_url)}
+                                    alt={activityItem.actor_detail.display_name}
+                                    height={24}
+                                    width={24}
+                                    className="h-full w-full rounded-full object-cover"
+                                  />
+                                ) : (
+                                  <div className="grid h-6 w-6 place-items-center rounded-full border-2 border-subtle-1 bg-layer-3 text-11 capitalize">
+                                    {activityItem.actor_detail.display_name?.[0]}
+                                  </div>
+                                )}
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                        <div className="min-w-0 flex-1 border-b border-subtle py-4">
+                          <div className="text-caption-md-regular break-words text-secondary">
+                            {activityItem.field === "archived_at" && activityItem.new_value !== "restore" ? (
+                              <span className="text-gray font-medium">Plane</span>
+                            ) : activityItem.actor_detail.is_bot ? (
+                              <span className="text-gray font-medium">{activityItem.actor_detail.first_name} Bot</span>
+                            ) : (
+                              <Link
+                                href={`/${activityItem.workspace_detail.slug}/profile/${activityItem.actor_detail.id}`}
+                                className="inline"
+                              >
+                                <span className="text-gray font-medium">
+                                  {currentUser?.id === activityItem.actor_detail.id
+                                    ? "You"
+                                    : activityItem.actor_detail.display_name}
+                                </span>
+                              </Link>
+                            )}{" "}
+                            <div className="inline gap-1">
+                              {message}{" "}
+                              <span className="flex-shrink-0 whitespace-nowrap">
+                                {calculateTimeAgo(activityItem.created_at)}
+                              </span>
+                            </div>
+                          </div>
+                        </div>
+                      </>
+                    </div>
+                  </div>
+                </li>
+              );
+          })}
+        </ul>
+      ) : (
+        <ActivitySettingsLoader />
+      )}
+    </>
+  );
+});
diff --git a/apps/web/core/components/settings/profile/content/pages/activity/index.ts b/apps/web/core/components/settings/profile/content/pages/activity/index.ts
new file mode 100644
index 000000000..d98033459
--- /dev/null
+++ b/apps/web/core/components/settings/profile/content/pages/activity/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./root";
diff --git a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/account/activity/page.tsx b/apps/web/core/components/settings/profile/content/pages/activity/root.tsx
similarity index 69%
rename from apps/web/app/(all)/[workspaceSlug]/(settings)/settings/account/activity/page.tsx
rename to apps/web/core/components/settings/profile/content/pages/activity/root.tsx
index 5bc01662e..466c523cd 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/account/activity/page.tsx
+++ b/apps/web/core/components/settings/profile/content/pages/activity/root.tsx
@@ -1,22 +1,28 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useState } from "react";
+import { ChevronDown } from "lucide-react";
 import { observer } from "mobx-react";
 import { useTheme } from "next-themes";
+// plane imports
 import { useTranslation } from "@plane/i18n";
-// ui
 import { Button } from "@plane/propel/button";
 // assets
 import darkActivityAsset from "@/app/assets/empty-state/profile/activity-dark.webp?url";
 import lightActivityAsset from "@/app/assets/empty-state/profile/activity-light.webp?url";
 // components
-import { PageHead } from "@/components/core/page-title";
 import { DetailedEmptyState } from "@/components/empty-state/detailed-empty-state-root";
-import { ProfileActivityListPage } from "@/components/profile/activity/profile-activity-list";
-// hooks
-import { SettingsHeading } from "@/components/settings/heading";
+import { ProfileSettingsHeading } from "@/components/settings/profile/heading";
+// local imports
+import { ActivityProfileSettingsList } from "./activity-list";
 
 const PER_PAGE = 100;
 
-function ProfileActivityPage() {
+export const ActivityProfileSettings = observer(function ActivityProfileSettings() {
   // states
   const [pageCount, setPageCount] = useState(1);
   const [totalPages, setTotalPages] = useState(0);
@@ -40,7 +46,7 @@ function ProfileActivityPage() {
   const activityPages: React.ReactNode[] = [];
   for (let i = 0; i < pageCount; i++)
     activityPages.push(
-      <ProfileActivityListPage
+      <ActivityProfileSettingsList
         key={i}
         cursor={`${PER_PAGE}:${i}:0`}
         perPage={PER_PAGE}
@@ -54,8 +60,8 @@ function ProfileActivityPage() {
 
   if (isEmpty) {
     return (
-      <div className="flex h-full w-full flex-col">
-        <SettingsHeading
+      <div className="flex size-full flex-col gap-y-7">
+        <ProfileSettingsHeading
           title={t("account_settings.activity.heading")}
           description={t("account_settings.activity.description")}
         />
@@ -63,30 +69,27 @@ function ProfileActivityPage() {
           title={""}
           description={""}
           assetPath={resolvedPath}
-          className="w-full !p-0 justify-center mx-auto min-h-fit"
-          size="md"
+          className="mx-auto min-h-fit w-full justify-center p-0!"
+          size="base"
         />
       </div>
     );
   }
 
   return (
-    <>
-      <PageHead title="Profile - Activity" />
-      <SettingsHeading
+    <div className="size-full">
+      <ProfileSettingsHeading
         title={t("account_settings.activity.heading")}
         description={t("account_settings.activity.description")}
       />
-      <div className="w-full">{activityPages}</div>
+      <div className="mt-7 w-full">{activityPages}</div>
       {isLoadMoreVisible && (
-        <div className="flex w-full items-center justify-center text-xs">
-          <Button variant="accent-primary" size="sm" onClick={handleLoadMore}>
+        <div className="mt-4 flex w-full items-center justify-center">
+          <Button variant="ghost" onClick={handleLoadMore} appendIcon={<ChevronDown />}>
             {t("load_more")}
           </Button>
         </div>
       )}
-    </>
+    </div>
   );
-}
-
-export default observer(ProfileActivityPage);
+});
diff --git a/apps/web/core/components/settings/profile/content/pages/api-tokens.tsx b/apps/web/core/components/settings/profile/content/pages/api-tokens.tsx
new file mode 100644
index 000000000..3205e25b2
--- /dev/null
+++ b/apps/web/core/components/settings/profile/content/pages/api-tokens.tsx
@@ -0,0 +1,79 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
+import { observer } from "mobx-react";
+import useSWR from "swr";
+// plane imports
+import { useTranslation } from "@plane/i18n";
+import { Button } from "@plane/propel/button";
+import { EmptyStateCompact } from "@plane/propel/empty-state";
+import { APITokenService } from "@plane/services";
+// components
+import { CreateApiTokenModal } from "@/components/api-token/modal/create-token-modal";
+import { ApiTokenListItem } from "@/components/api-token/token-list-item";
+import { ProfileSettingsHeading } from "@/components/settings/profile/heading";
+import { APITokenSettingsLoader } from "@/components/ui/loader/settings/api-token";
+// constants
+import { API_TOKENS_LIST } from "@/constants/fetch-keys";
+
+const apiTokenService = new APITokenService();
+
+export const APITokensProfileSettings = observer(function APITokensProfileSettings() {
+  // states
+  const [isCreateTokenModalOpen, setIsCreateTokenModalOpen] = useState(false);
+  // store hooks
+  const { data: tokens } = useSWR(API_TOKENS_LIST, () => apiTokenService.list());
+  // translation
+  const { t } = useTranslation();
+
+  if (!tokens) {
+    return <APITokenSettingsLoader />;
+  }
+
+  return (
+    <div className="size-full">
+      <CreateApiTokenModal isOpen={isCreateTokenModalOpen} onClose={() => setIsCreateTokenModalOpen(false)} />
+      <ProfileSettingsHeading
+        title={t("account_settings.api_tokens.heading")}
+        description={t("account_settings.api_tokens.description")}
+        control={
+          <Button variant="primary" size="lg" onClick={() => setIsCreateTokenModalOpen(true)}>
+            {t("workspace_settings.settings.api_tokens.add_token")}
+          </Button>
+        }
+      />
+      <div className="mt-7">
+        {tokens.length > 0 ? (
+          <>
+            <div>
+              {tokens.map((token) => (
+                <ApiTokenListItem key={token.id} token={token} />
+              ))}
+            </div>
+          </>
+        ) : (
+          <EmptyStateCompact
+            assetKey="token"
+            assetClassName="size-20"
+            title={t("settings_empty_state.tokens.title")}
+            description={t("settings_empty_state.tokens.description")}
+            actions={[
+              {
+                label: t("settings_empty_state.tokens.cta_primary"),
+                onClick: () => {
+                  setIsCreateTokenModalOpen(true);
+                },
+              },
+            ]}
+            align="start"
+            rootClassName="py-20"
+          />
+        )}
+      </div>
+    </div>
+  );
+});
diff --git a/apps/web/core/components/profile/form.tsx b/apps/web/core/components/settings/profile/content/pages/general/form.tsx
similarity index 64%
rename from apps/web/core/components/profile/form.tsx
rename to apps/web/core/components/settings/profile/content/pages/general/form.tsx
index 9f9d78989..e20245f83 100644
--- a/apps/web/core/components/profile/form.tsx
+++ b/apps/web/core/components/settings/profile/content/pages/general/form.tsx
@@ -1,31 +1,35 @@
-import React, { useState } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
 import { observer } from "mobx-react";
-import Link from "next/link";
-import { useParams } from "next/navigation";
 import { Controller, useForm } from "react-hook-form";
-import { CircleUserRound, InfoIcon } from "lucide-react";
-import { Disclosure, Transition } from "@headlessui/react";
+import { CircleUserRound } from "lucide-react";
 // plane imports
-import { PROFILE_SETTINGS_TRACKER_ELEMENTS, PROFILE_SETTINGS_TRACKER_EVENTS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { Button, getButtonStyling } from "@plane/propel/button";
-import { ChevronDownIcon } from "@plane/propel/icons";
+import { Button } from "@plane/propel/button";
 import { TOAST_TYPE, setPromiseToast, setToast } from "@plane/propel/toast";
 import { EFileAssetType } from "@plane/types";
 import type { IUser, TUserProfile } from "@plane/types";
 import { Input } from "@plane/ui";
-import { cn, getFileURL } from "@plane/utils";
+import { getFileURL } from "@plane/utils";
 // components
 import { DeactivateAccountModal } from "@/components/account/deactivate-account-modal";
 import { ImagePickerPopover } from "@/components/core/image-picker-popover";
 import { ChangeEmailModal } from "@/components/core/modals/change-email-modal";
 import { UserImageUploadModal } from "@/components/core/modals/user-image-upload-modal";
+import { CoverImage } from "@/components/common/cover-image";
+import { SettingsBoxedControlItem } from "@/components/settings/boxed-control-item";
 // helpers
-import { DEFAULT_COVER_IMAGE_URL, getCoverImageDisplayURL, handleCoverImageChange } from "@/helpers/cover-image.helper";
-import { captureSuccess, captureError } from "@/helpers/event-tracker.helper";
+import { handleCoverImageChange } from "@/helpers/cover-image.helper";
 // hooks
 import { useInstance } from "@/hooks/store/use-instance";
 import { useUser, useUserProfile } from "@/hooks/store/user";
+// utils
+import { validatePersonName, validateDisplayName } from "@plane/utils";
 
 type TUserProfileForm = {
   avatar_url: string;
@@ -41,14 +45,13 @@ type TUserProfileForm = {
   user_timezone: string;
 };
 
-export type TProfileFormProps = {
+type Props = {
   user: IUser;
   profile: TUserProfile;
 };
 
-export const ProfileForm = observer(function ProfileForm(props: TProfileFormProps) {
+export const GeneralProfileSettingsForm = observer(function GeneralProfileSettingsForm(props: Props) {
   const { user, profile } = props;
-  const { workspaceSlug } = useParams();
   // states
   const [isLoading, setIsLoading] = useState(false);
   const [isImageUploadModalOpen, setIsImageUploadModalOpen] = useState(false);
@@ -99,6 +102,7 @@ export const ProfileForm = observer(function ProfileForm(props: TProfileFormProp
           message: "Profile picture deleted successfully.",
         });
         setValue("avatar_url", "");
+        return;
       })
       .catch(() => {
         setToast({
@@ -146,13 +150,32 @@ export const ProfileForm = observer(function ProfileForm(props: TProfileFormProp
       role: formData.role,
     };
 
-    const updateCurrentUserDetail = updateCurrentUser(userPayload).finally(() => setIsLoading(false));
-    const updateCurrentUserProfile = updateUserProfile(profilePayload).finally(() => setIsLoading(false));
+    const updateCurrentUserDetail = updateCurrentUser(userPayload);
+    const promises: Promise<IUser | TUserProfile | undefined>[] = [updateCurrentUserDetail];
+    if (profilePayload.role !== profile.role) {
+      const updateCurrentUserProfile = updateUserProfile(profilePayload);
+      promises.push(updateCurrentUserProfile);
+    }
 
-    const promises = [updateCurrentUserDetail, updateCurrentUserProfile];
-    const updateUserAndProfile = Promise.all(promises);
+    const updatePromise = Promise.allSettled(promises)
+      .then((results) => {
+        const rejectedResult = results.find((result) => result.status === "rejected") as
+          | PromiseRejectedResult
+          | undefined;
+        if (rejectedResult) {
+          throw rejectedResult.reason ?? new Error("Failed to update profile");
+        }
+        const values = results.map(
+          (result) => (result as PromiseFulfilledResult<IUser | TUserProfile | undefined>).value
+        );
+        if (values.some((v) => v === undefined)) {
+          throw new Error("Failed to update profile");
+        }
+        return values;
+      })
+      .finally(() => setIsLoading(false));
 
-    setPromiseToast(updateUserAndProfile, {
+    setPromiseToast(updatePromise, {
       loading: "Updating...",
       success: {
         title: "Success!",
@@ -163,17 +186,6 @@ export const ProfileForm = observer(function ProfileForm(props: TProfileFormProp
         message: () => `There was some error in updating your profile. Please try again.`,
       },
     });
-    updateUserAndProfile
-      .then(() => {
-        captureSuccess({
-          eventName: PROFILE_SETTINGS_TRACKER_EVENTS.update_profile,
-        });
-      })
-      .catch(() => {
-        captureError({
-          eventName: PROFILE_SETTINGS_TRACKER_EVENTS.update_profile,
-        });
-      });
   };
 
   return (
@@ -197,37 +209,27 @@ export const ProfileForm = observer(function ProfileForm(props: TProfileFormProp
           />
         )}
       />
-      <div className="w-full flex text-custom-primary-200 bg-custom-primary-100/10 rounded-md p-2 gap-2 items-center mb-4">
-        <InfoIcon className="h-4 w-4 flex-shrink-0" />
-        <div className="text-sm font-medium flex-1">{t("settings_moved_to_preferences")}</div>
-        <Link
-          href={`/${workspaceSlug}/settings/account/preferences`}
-          className={cn(getButtonStyling("neutral-primary", "sm"))}
-        >
-          {t("go_to_preferences")}
-        </Link>
-      </div>
       <form onSubmit={handleSubmit(onSubmit)} className="w-full">
-        <div className="flex w-full flex-col gap-6">
+        <div className="flex w-full flex-col gap-7">
           <div className="relative h-44 w-full">
-            <img
-              src={getCoverImageDisplayURL(userCover, DEFAULT_COVER_IMAGE_URL)}
-              className="h-44 w-full rounded-lg object-cover"
+            <CoverImage
+              src={userCover}
+              className="h-44 w-full rounded-lg"
               alt={currentUser?.first_name ?? "Cover image"}
             />
             <div className="absolute -bottom-6 left-6 flex items-end justify-between">
               <div className="flex gap-3">
-                <div className="flex h-16 w-16 items-center justify-center rounded-lg bg-custom-background-90">
+                <div className="flex h-16 w-16 items-center justify-center rounded-lg bg-surface-2">
                   <button type="button" onClick={() => setIsImageUploadModalOpen(true)}>
                     {!userAvatar || userAvatar === "" ? (
-                      <div className="h-16 w-16 rounded-md bg-custom-background-80 p-2">
-                        <CircleUserRound className="h-full w-full text-custom-text-200" />
+                      <div className="h-16 w-16 rounded-md bg-layer-1 p-2">
+                        <CircleUserRound className="h-full w-full text-secondary" />
                       </div>
                     ) : (
                       <div className="relative h-16 w-16 overflow-hidden">
                         <img
                           src={getFileURL(userAvatar)}
-                          className="absolute left-0 top-0 h-full w-full rounded-lg object-cover"
+                          className="absolute top-0 left-0 h-full w-full rounded-lg object-cover"
                           onClick={() => setIsImageUploadModalOpen(true)}
                           alt={currentUser?.display_name}
                           role="button"
@@ -238,7 +240,7 @@ export const ProfileForm = observer(function ProfileForm(props: TProfileFormProp
                 </div>
               </div>
             </div>
-            <div className="absolute bottom-3 right-3 flex">
+            <div className="absolute right-3 bottom-3 flex">
               <Controller
                 control={control}
                 name="cover_image_url"
@@ -256,24 +258,25 @@ export const ProfileForm = observer(function ProfileForm(props: TProfileFormProp
           </div>
           <div className="item-center mt-6 flex justify-between">
             <div className="flex flex-col">
-              <div className="item-center flex text-lg font-medium text-custom-text-200">
+              <div className="item-center flex text-16 font-medium text-secondary">
                 <span>{`${watch("first_name")} ${watch("last_name")}`}</span>
               </div>
-              <span className="text-sm text-custom-text-300 tracking-tight">{watch("email")}</span>
+              <span className="text-13 tracking-tight text-tertiary">{watch("email")}</span>
             </div>
           </div>
           <div className="flex flex-col gap-2">
-            <div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-x-6 gap-y-4">
+            <div className="grid grid-cols-1 gap-x-6 gap-y-4 sm:grid-cols-2 xl:grid-cols-3">
               <div className="flex flex-col gap-1">
-                <h4 className="text-sm font-medium text-custom-text-200">
+                <h4 className="text-13 font-medium text-secondary">
                   {t("first_name")}&nbsp;
-                  <span className="text-red-500">*</span>
+                  <span className="text-danger-primary">*</span>
                 </h4>
                 <Controller
                   control={control}
                   name="first_name"
                   rules={{
                     required: "Please enter first name",
+                    validate: validatePersonName,
                   }}
                   render={({ field: { value, onChange, ref } }) => (
                     <Input
@@ -285,19 +288,22 @@ export const ProfileForm = observer(function ProfileForm(props: TProfileFormProp
                       ref={ref}
                       hasError={Boolean(errors.first_name)}
                       placeholder="Enter your first name"
-                      className={`w-full rounded-md ${errors.first_name ? "border-red-500" : ""}`}
-                      maxLength={24}
+                      className={`w-full rounded-md ${errors.first_name ? "border-danger-strong" : ""}`}
+                      maxLength={50}
                       autoComplete="on"
                     />
                   )}
                 />
-                {errors.first_name && <span className="text-xs text-red-500">{errors.first_name.message}</span>}
+                {errors.first_name && <span className="text-11 text-danger-primary">{errors.first_name.message}</span>}
               </div>
               <div className="flex flex-col gap-1">
-                <h4 className="text-sm font-medium text-custom-text-200">{t("last_name")}</h4>
+                <h4 className="text-13 font-medium text-secondary">{t("last_name")}</h4>
                 <Controller
                   control={control}
                   name="last_name"
+                  rules={{
+                    validate: validatePersonName,
+                  }}
                   render={({ field: { value, onChange, ref } }) => (
                     <Input
                       id="last_name"
@@ -309,30 +315,24 @@ export const ProfileForm = observer(function ProfileForm(props: TProfileFormProp
                       hasError={Boolean(errors.last_name)}
                       placeholder="Enter your last name"
                       className="w-full rounded-md"
-                      maxLength={24}
+                      maxLength={50}
                       autoComplete="on"
                     />
                   )}
                 />
+                {errors.last_name && <span className="text-11 text-danger-primary">{errors.last_name.message}</span>}
               </div>
               <div className="flex flex-col gap-1">
-                <h4 className="text-sm font-medium text-custom-text-200">
+                <h4 className="text-13 font-medium text-secondary">
                   {t("display_name")}&nbsp;
-                  <span className="text-red-500">*</span>
+                  <span className="text-danger-primary">*</span>
                 </h4>
                 <Controller
                   control={control}
                   name="display_name"
                   rules={{
                     required: "Display name is required.",
-                    validate: (value) => {
-                      if (value.trim().length < 1) return "Display name can't be empty.";
-                      if (value.split("  ").length > 1) return "Display name can't have two consecutive spaces.";
-                      if (value.replace(/\s/g, "").length < 1) return "Display name must be at least 1 character long.";
-                      if (value.replace(/\s/g, "").length > 20)
-                        return "Display name must be less than 20 characters long.";
-                      return true;
-                    },
+                    validate: validateDisplayName,
                   }}
                   render={({ field: { value, onChange, ref } }) => (
                     <Input
@@ -344,17 +344,19 @@ export const ProfileForm = observer(function ProfileForm(props: TProfileFormProp
                       ref={ref}
                       hasError={Boolean(errors?.display_name)}
                       placeholder="Enter your display name"
-                      className={`w-full ${errors?.display_name ? "border-red-500" : ""}`}
-                      maxLength={24}
+                      className={`w-full ${errors?.display_name ? "border-danger-strong" : ""}`}
+                      maxLength={50}
                     />
                   )}
                 />
-                {errors?.display_name && <span className="text-xs text-red-500">{errors?.display_name?.message}</span>}
+                {errors?.display_name && (
+                  <span className="text-11 text-danger-primary">{errors?.display_name?.message}</span>
+                )}
               </div>
               <div className="flex flex-col gap-1">
-                <h4 className="text-sm font-medium text-custom-text-200">
+                <h4 className="text-13 font-medium text-secondary">
                   {t("auth.common.email.label")}&nbsp;
-                  <span className="text-red-500">*</span>
+                  <span className="text-danger-primary">*</span>
                 </h4>
                 <Controller
                   control={control}
@@ -371,8 +373,8 @@ export const ProfileForm = observer(function ProfileForm(props: TProfileFormProp
                       ref={ref}
                       hasError={Boolean(errors.email)}
                       placeholder="Enter your email"
-                      className={`w-full cursor-not-allowed rounded-md !bg-custom-background-90 ${
-                        errors.email ? "border-red-500" : ""
+                      className={`w-full cursor-not-allowed rounded-md !bg-surface-2 ${
+                        errors.email ? "border-danger-strong" : ""
                       }`}
                       autoComplete="on"
                       disabled
@@ -382,7 +384,7 @@ export const ProfileForm = observer(function ProfileForm(props: TProfileFormProp
                 {isSMTPConfigured && (
                   <button
                     type="button"
-                    className="text-xs underline btn w-fit text-custom-text-200"
+                    className="btn w-fit text-11 text-secondary underline"
                     onClick={() => setIsChangeEmailModalOpen(true)}
                   >
                     {t("account_settings.profile.change_email_modal.title")}
@@ -391,54 +393,24 @@ export const ProfileForm = observer(function ProfileForm(props: TProfileFormProp
               </div>
             </div>
           </div>
-          <div className="flex flex-col gap-1">
-            <div className="flex items-center justify-between pt-6 pb-8">
-              <Button
-                variant="primary"
-                type="submit"
-                loading={isLoading}
-                data-ph-element={PROFILE_SETTINGS_TRACKER_ELEMENTS.SAVE_CHANGES_BUTTON}
-              >
-                {isLoading ? t("saving") : t("save_changes")}
-              </Button>
-            </div>
+          <div>
+            <Button variant="primary" type="submit" loading={isLoading}>
+              {isLoading ? t("saving") : t("save_changes")}
+            </Button>
           </div>
         </div>
       </form>
-      <Disclosure as="div" className="border-t border-custom-border-100 w-full">
-        {({ open }) => (
-          <>
-            <Disclosure.Button as="button" type="button" className="flex w-full items-center justify-between py-4">
-              <span className="text-lg font-medium tracking-tight">{t("deactivate_account")}</span>
-              <ChevronDownIcon className={`h-5 w-5 transition-all ${open ? "rotate-180" : ""}`} />
-            </Disclosure.Button>
-            <Transition
-              show={open}
-              enter="transition duration-100 ease-out"
-              enterFrom="transform opacity-0"
-              enterTo="transform opacity-100"
-              leave="transition duration-75 ease-out"
-              leaveFrom="transform opacity-100"
-              leaveTo="transform opacity-0"
-            >
-              <Disclosure.Panel>
-                <div className="flex flex-col gap-8">
-                  <span className="text-sm tracking-tight">{t("deactivate_account_description")}</span>
-                  <div>
-                    <Button
-                      variant="danger"
-                      onClick={() => setDeactivateAccountModal(true)}
-                      data-ph-element={PROFILE_SETTINGS_TRACKER_ELEMENTS.DEACTIVATE_ACCOUNT_BUTTON}
-                    >
-                      {t("deactivate_account")}
-                    </Button>
-                  </div>
-                </div>
-              </Disclosure.Panel>
-            </Transition>
-          </>
-        )}
-      </Disclosure>
+      <div className="mt-10">
+        <SettingsBoxedControlItem
+          title={t("deactivate_account")}
+          description={t("deactivate_account_description")}
+          control={
+            <Button variant="error-outline" onClick={() => setDeactivateAccountModal(true)}>
+              {t("deactivate_account")}
+            </Button>
+          }
+        />
+      </div>
     </>
   );
 });
diff --git a/apps/web/core/components/settings/profile/content/pages/general/index.ts b/apps/web/core/components/settings/profile/content/pages/general/index.ts
new file mode 100644
index 000000000..d98033459
--- /dev/null
+++ b/apps/web/core/components/settings/profile/content/pages/general/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./root";
diff --git a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/account/page.tsx b/apps/web/core/components/settings/profile/content/pages/general/root.tsx
similarity index 50%
rename from apps/web/app/(all)/[workspaceSlug]/(settings)/settings/account/page.tsx
rename to apps/web/core/components/settings/profile/content/pages/general/root.tsx
index 7e5268677..2abf49986 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/account/page.tsx
+++ b/apps/web/core/components/settings/profile/content/pages/general/root.tsx
@@ -1,23 +1,29 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import { useTranslation } from "@plane/i18n";
 // components
 import { PageHead } from "@/components/core/page-title";
-import { ProfileForm } from "@/components/profile/form";
 // hooks
 import { useUser } from "@/hooks/store/user";
+// local imports
+import { GeneralProfileSettingsForm } from "./form";
 
-function ProfileSettingsPage() {
+export const GeneralProfileSettings = observer(function GeneralProfileSettings() {
   const { t } = useTranslation();
   // store hooks
   const { data: currentUser, userProfile } = useUser();
 
-  if (!currentUser) return <></>;
+  if (!currentUser) return null;
+
   return (
     <>
       <PageHead title={`${t("profile.label")} - ${t("general_settings")}`} />
-      <ProfileForm user={currentUser} profile={userProfile.data} />
+      <GeneralProfileSettingsForm user={currentUser} profile={userProfile.data} />
     </>
   );
-}
-
-export default observer(ProfileSettingsPage);
+});
diff --git a/apps/web/core/components/settings/profile/content/pages/index.ts b/apps/web/core/components/settings/profile/content/pages/index.ts
new file mode 100644
index 000000000..c9e4179c1
--- /dev/null
+++ b/apps/web/core/components/settings/profile/content/pages/index.ts
@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { lazy } from "react";
+// plane imports
+import type { TProfileSettingsTabs } from "@plane/types";
+
+export const PROFILE_SETTINGS_PAGES_MAP: Record<TProfileSettingsTabs, React.LazyExoticComponent<React.FC>> = {
+  general: lazy(() => import("./general").then((m) => ({ default: m.GeneralProfileSettings }))),
+  preferences: lazy(() => import("./preferences").then((m) => ({ default: m.PreferencesProfileSettings }))),
+  notifications: lazy(() => import("./notifications").then((m) => ({ default: m.NotificationsProfileSettings }))),
+  security: lazy(() => import("./security").then((m) => ({ default: m.SecurityProfileSettings }))),
+  activity: lazy(() => import("./activity").then((m) => ({ default: m.ActivityProfileSettings }))),
+  "api-tokens": lazy(() => import("./api-tokens").then((m) => ({ default: m.APITokensProfileSettings }))),
+};
diff --git a/apps/web/core/components/settings/profile/content/pages/notifications/email-notification-form.tsx b/apps/web/core/components/settings/profile/content/pages/notifications/email-notification-form.tsx
new file mode 100644
index 000000000..e0add312b
--- /dev/null
+++ b/apps/web/core/components/settings/profile/content/pages/notifications/email-notification-form.tsx
@@ -0,0 +1,167 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useEffect } from "react";
+import { observer } from "mobx-react";
+import { Controller, useForm } from "react-hook-form";
+// plane imports
+import { useTranslation } from "@plane/i18n";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import type { IUserEmailNotificationSettings } from "@plane/types";
+import { ToggleSwitch } from "@plane/ui";
+// components
+import { SettingsControlItem } from "@/components/settings/control-item";
+// services
+import { UserService } from "@/services/user.service";
+
+type Props = {
+  data: IUserEmailNotificationSettings;
+};
+
+// services
+const userService = new UserService();
+
+export const NotificationsProfileSettingsForm = observer(function NotificationsProfileSettingsForm(props: Props) {
+  const { data } = props;
+  // translation
+  const { t } = useTranslation();
+  // form data
+  const { control, reset } = useForm<IUserEmailNotificationSettings>({
+    defaultValues: {
+      ...data,
+    },
+  });
+
+  const handleSettingChange = async (key: keyof IUserEmailNotificationSettings, value: boolean) => {
+    try {
+      await userService.updateCurrentUserEmailNotificationSettings({
+        [key]: value,
+      });
+      setToast({
+        title: t("success"),
+        type: TOAST_TYPE.SUCCESS,
+        message: t("email_notification_setting_updated_successfully"),
+      });
+    } catch (_error) {
+      setToast({
+        title: t("error"),
+        type: TOAST_TYPE.ERROR,
+        message: t("failed_to_update_email_notification_setting"),
+      });
+    }
+  };
+
+  useEffect(() => {
+    reset(data);
+  }, [reset, data]);
+
+  return (
+    <div className="flex flex-col gap-y-1">
+      <SettingsControlItem
+        title={t("property_changes")}
+        description={t("property_changes_description")}
+        control={
+          <Controller
+            control={control}
+            name="property_change"
+            render={({ field: { value, onChange } }) => (
+              <ToggleSwitch
+                value={value}
+                onChange={(newValue) => {
+                  onChange(newValue);
+                  handleSettingChange("property_change", newValue);
+                }}
+                size="sm"
+              />
+            )}
+          />
+        }
+      />
+      <SettingsControlItem
+        title={t("state_change")}
+        description={t("state_change_description")}
+        control={
+          <Controller
+            control={control}
+            name="state_change"
+            render={({ field: { value, onChange } }) => (
+              <ToggleSwitch
+                value={value}
+                onChange={(newValue) => {
+                  onChange(newValue);
+                  handleSettingChange("state_change", newValue);
+                }}
+                size="sm"
+              />
+            )}
+          />
+        }
+      />
+      <div className="border-l-3 border-subtle-1 pl-3">
+        <SettingsControlItem
+          title={t("issue_completed")}
+          description={t("issue_completed_description")}
+          control={
+            <Controller
+              control={control}
+              name="issue_completed"
+              render={({ field: { value, onChange } }) => (
+                <ToggleSwitch
+                  value={value}
+                  onChange={(newValue) => {
+                    onChange(newValue);
+                    handleSettingChange("issue_completed", newValue);
+                  }}
+                  size="sm"
+                />
+              )}
+            />
+          }
+        />
+      </div>
+      <SettingsControlItem
+        title={t("comments")}
+        description={t("comments_description")}
+        control={
+          <Controller
+            control={control}
+            name="comment"
+            render={({ field: { value, onChange } }) => (
+              <ToggleSwitch
+                value={value}
+                onChange={(newValue) => {
+                  onChange(newValue);
+                  handleSettingChange("comment", newValue);
+                }}
+                size="sm"
+              />
+            )}
+          />
+        }
+      />
+      <SettingsControlItem
+        title={t("mentions")}
+        description={t("mentions_description")}
+        control={
+          <Controller
+            control={control}
+            name="mention"
+            render={({ field: { value, onChange } }) => (
+              <ToggleSwitch
+                value={value}
+                onChange={(newValue) => {
+                  onChange(newValue);
+                  handleSettingChange("mention", newValue);
+                }}
+                size="sm"
+              />
+            )}
+          />
+        }
+      />
+    </div>
+  );
+});
diff --git a/apps/web/core/components/settings/profile/content/pages/notifications/index.ts b/apps/web/core/components/settings/profile/content/pages/notifications/index.ts
new file mode 100644
index 000000000..d98033459
--- /dev/null
+++ b/apps/web/core/components/settings/profile/content/pages/notifications/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./root";
diff --git a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/account/notifications/page.tsx b/apps/web/core/components/settings/profile/content/pages/notifications/root.tsx
similarity index 53%
rename from apps/web/app/(all)/[workspaceSlug]/(settings)/settings/account/notifications/page.tsx
rename to apps/web/core/components/settings/profile/content/pages/notifications/root.tsx
index c4d05e1f8..d28ef0fb7 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/account/notifications/page.tsx
+++ b/apps/web/core/components/settings/profile/content/pages/notifications/root.tsx
@@ -1,17 +1,24 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import useSWR from "swr";
+import { observer } from "mobx-react";
 // plane imports
 import { useTranslation } from "@plane/i18n";
 // components
-import { PageHead } from "@/components/core/page-title";
-import { EmailNotificationForm } from "@/components/profile/notification/email-notification-form";
-import { SettingsHeading } from "@/components/settings/heading";
+import { ProfileSettingsHeading } from "@/components/settings/profile/heading";
 import { EmailSettingsLoader } from "@/components/ui/loader/settings/email";
 // services
 import { UserService } from "@/services/user.service";
+// local imports
+import { NotificationsProfileSettingsForm } from "./email-notification-form";
 
 const userService = new UserService();
 
-export default function ProfileNotificationPage() {
+export const NotificationsProfileSettings = observer(function NotificationsProfileSettings() {
   const { t } = useTranslation();
   // fetching user email notification settings
   const { data, isLoading } = useSWR("CURRENT_USER_EMAIL_NOTIFICATION_SETTINGS", () =>
@@ -23,14 +30,14 @@ export default function ProfileNotificationPage() {
   }
 
   return (
-    <>
-      <PageHead title={`${t("profile.label")} - ${t("notifications")}`} />
-
-      <SettingsHeading
+    <div className="size-full">
+      <ProfileSettingsHeading
         title={t("account_settings.notifications.heading")}
         description={t("account_settings.notifications.description")}
       />
-      <EmailNotificationForm data={data} />
-    </>
+      <div className="mt-7">
+        <NotificationsProfileSettingsForm data={data} />
+      </div>
+    </div>
   );
-}
+});
diff --git a/apps/web/core/components/settings/profile/content/pages/preferences/default-list.tsx b/apps/web/core/components/settings/profile/content/pages/preferences/default-list.tsx
new file mode 100644
index 000000000..8b3b010fc
--- /dev/null
+++ b/apps/web/core/components/settings/profile/content/pages/preferences/default-list.tsx
@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// components
+import { ThemeSwitcher } from "@/plane-web/components/preferences/theme-switcher";
+
+export const ProfileSettingsDefaultPreferencesList = observer(function ProfileSettingsDefaultPreferencesList() {
+  return (
+    <div className="flex flex-col gap-y-1">
+      <ThemeSwitcher
+        option={{
+          id: "theme",
+          title: "theme",
+          description: "select_or_customize_your_interface_color_scheme",
+        }}
+      />
+    </div>
+  );
+});
diff --git a/apps/web/core/components/settings/profile/content/pages/preferences/index.ts b/apps/web/core/components/settings/profile/content/pages/preferences/index.ts
new file mode 100644
index 000000000..d98033459
--- /dev/null
+++ b/apps/web/core/components/settings/profile/content/pages/preferences/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./root";
diff --git a/apps/web/core/components/settings/profile/content/pages/preferences/language-and-timezone-list.tsx b/apps/web/core/components/settings/profile/content/pages/preferences/language-and-timezone-list.tsx
new file mode 100644
index 000000000..5ec822a95
--- /dev/null
+++ b/apps/web/core/components/settings/profile/content/pages/preferences/language-and-timezone-list.tsx
@@ -0,0 +1,108 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// plane imports
+import { SUPPORTED_LANGUAGES, useTranslation } from "@plane/i18n";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { CustomSelect } from "@plane/ui";
+// components
+import { TimezoneSelect } from "@/components/global";
+import { StartOfWeekPreference } from "@/components/profile/start-of-week-preference";
+import { SettingsControlItem } from "@/components/settings/control-item";
+// hooks
+import { useUser, useUserProfile } from "@/hooks/store/user";
+
+export const ProfileSettingsLanguageAndTimezonePreferencesList = observer(
+  function ProfileSettingsLanguageAndTimezonePreferencesList() {
+    // store hooks
+    const {
+      data: user,
+      updateCurrentUser,
+      userProfile: { data: profile },
+    } = useUser();
+    const { updateUserProfile } = useUserProfile();
+    // translation
+    const { t } = useTranslation();
+
+    const handleTimezoneChange = async (value: string) => {
+      try {
+        await updateCurrentUser({ user_timezone: value });
+        setToast({
+          title: "Success!",
+          message: "Timezone updated successfully",
+          type: TOAST_TYPE.SUCCESS,
+        });
+      } catch (_error) {
+        setToast({
+          title: "Error!",
+          message: "Failed to update timezone",
+          type: TOAST_TYPE.ERROR,
+        });
+      }
+    };
+
+    const handleLanguageChange = async (value: string) => {
+      try {
+        await updateUserProfile({ language: value });
+        setToast({
+          title: "Success!",
+          message: "Language updated successfully",
+          type: TOAST_TYPE.SUCCESS,
+        });
+      } catch (_error) {
+        setToast({
+          title: "Error!",
+          message: "Failed to update language",
+          type: TOAST_TYPE.ERROR,
+        });
+      }
+    };
+
+    const getLanguageLabel = (value: string) => {
+      const selectedLanguage = SUPPORTED_LANGUAGES.find((l) => l.value === value);
+      if (!selectedLanguage) return value;
+      return selectedLanguage.label;
+    };
+
+    return (
+      <div className="flex flex-col gap-y-1">
+        <SettingsControlItem
+          title={t("timezone")}
+          description={t("timezone_setting")}
+          control={<TimezoneSelect value={user?.user_timezone || "Asia/Kolkata"} onChange={handleTimezoneChange} />}
+        />
+        <SettingsControlItem
+          title={t("language")}
+          description={t("language_setting")}
+          control={
+            <CustomSelect
+              value={profile?.language}
+              label={profile?.language ? getLanguageLabel(profile?.language) : "Select a language"}
+              onChange={handleLanguageChange}
+              buttonClassName="border border-subtle-1"
+              className="rounded-md"
+              input
+              placement="bottom-end"
+            >
+              {SUPPORTED_LANGUAGES.map((item) => (
+                <CustomSelect.Option key={item.value} value={item.value}>
+                  {item.label}
+                </CustomSelect.Option>
+              ))}
+            </CustomSelect>
+          }
+        />
+        <StartOfWeekPreference
+          option={{
+            title: "First day of the week",
+            description: "This will change how all calendars in your app look.",
+          }}
+        />
+      </div>
+    );
+  }
+);
diff --git a/apps/web/core/components/settings/profile/content/pages/preferences/root.tsx b/apps/web/core/components/settings/profile/content/pages/preferences/root.tsx
new file mode 100644
index 000000000..701109148
--- /dev/null
+++ b/apps/web/core/components/settings/profile/content/pages/preferences/root.tsx
@@ -0,0 +1,42 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// plane imports
+import { useTranslation } from "@plane/i18n";
+// components
+import { ProfileSettingsHeading } from "@/components/settings/profile/heading";
+// hooks
+import { useUserProfile } from "@/hooks/store/user";
+// local imports
+import { ProfileSettingsDefaultPreferencesList } from "./default-list";
+import { ProfileSettingsLanguageAndTimezonePreferencesList } from "./language-and-timezone-list";
+
+export const PreferencesProfileSettings = observer(function PreferencesProfileSettings() {
+  const { t } = useTranslation();
+  // hooks
+  const { data: userProfile } = useUserProfile();
+
+  if (!userProfile) return null;
+
+  return (
+    <div className="size-full">
+      <ProfileSettingsHeading
+        title={t("account_settings.preferences.heading")}
+        description={t("account_settings.preferences.description")}
+      />
+      <div className="mt-7 flex w-full flex-col gap-6">
+        <section>
+          <ProfileSettingsDefaultPreferencesList />
+        </section>
+        <section className="flex flex-col gap-y-3">
+          <div className="text-h6-medium text-primary">{t("language_and_time")}</div>
+          <ProfileSettingsLanguageAndTimezonePreferencesList />
+        </section>
+      </div>
+    </div>
+  );
+});
diff --git a/apps/web/app/(all)/profile/security/page.tsx b/apps/web/core/components/settings/profile/content/pages/security.tsx
similarity index 64%
rename from apps/web/app/(all)/profile/security/page.tsx
rename to apps/web/core/components/settings/profile/content/pages/security.tsx
index 3e92f4747..5a9cc017f 100644
--- a/apps/web/app/(all)/profile/security/page.tsx
+++ b/apps/web/core/components/settings/profile/content/pages/security.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useState } from "react";
 import { observer } from "mobx-react";
 import { Controller, useForm } from "react-hook-form";
@@ -8,14 +14,11 @@ import { useTranslation } from "@plane/i18n";
 import { Button } from "@plane/propel/button";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import { Input, PasswordStrengthIndicator } from "@plane/ui";
-// components
 import { getPasswordStrength } from "@plane/utils";
-import { PageHead } from "@/components/core/page-title";
-import { ProfileSettingContentHeader } from "@/components/profile/profile-setting-content-header";
-import { ProfileSettingContentWrapper } from "@/components/profile/profile-setting-content-wrapper";
+// components
+import { ProfileSettingsHeading } from "@/components/settings/profile/heading";
 // helpers
-import { authErrorHandler } from "@/helpers/authentication.helper";
-import type { EAuthenticationErrorCodes } from "@/helpers/authentication.helper";
+import { authErrorHandler, EAuthenticationErrorCodes, passwordErrors } from "@/helpers/authentication.helper";
 // hooks
 import { useUser } from "@/hooks/store/user";
 // services
@@ -41,7 +44,7 @@ const defaultShowPassword = {
   confirmPassword: false,
 };
 
-function SecurityPage() {
+export const SecurityProfileSettings = observer(function SecurityProfileSettings() {
   // store
   const { data: currentUser, changePassword } = useUser();
   // states
@@ -54,6 +57,7 @@ function SecurityPage() {
     control,
     handleSubmit,
     watch,
+    setError,
     formState: { errors, isSubmitting },
     reset,
   } = useForm<FormValues>({ defaultValues });
@@ -92,12 +96,20 @@ function SecurityPage() {
       const err = error as Error & { error_code?: string };
       const code = err.error_code?.toString();
       const errorInfo = code ? authErrorHandler(code as EAuthenticationErrorCodes) : undefined;
+
       setToast({
         type: TOAST_TYPE.ERROR,
         title: errorInfo?.title ?? t("auth.common.password.toast.error.title"),
         message:
           typeof errorInfo?.message === "string" ? errorInfo.message : t("auth.common.password.toast.error.message"),
       });
+
+      if (code && passwordErrors.includes(code as EAuthenticationErrorCodes)) {
+        setError("new_password", {
+          type: "manual",
+          message: errorInfo?.message?.toString() || t("auth.common.password.toast.error.message"),
+        });
+      }
     }
   };
 
@@ -117,51 +129,53 @@ function SecurityPage() {
   const renderPasswordMatchError = !isRetryPasswordInputFocused || confirmPassword.length >= password.length;
 
   return (
-    <>
-      <PageHead title="Profile - Security" />
-      <ProfileSettingContentWrapper>
-        <ProfileSettingContentHeader title={t("auth.common.password.change_password.label.default")} />
-        <form onSubmit={handleSubmit(handleChangePassword)} className="flex flex-col gap-8 py-6">
-          <div className="flex flex-col gap-10 w-full max-w-96">
-            {oldPasswordRequired && (
-              <div className="space-y-1">
-                <h4 className="text-sm">{t("auth.common.password.current_password.label")}</h4>
-                <div className="relative flex items-center rounded-md">
-                  <Controller
-                    control={control}
-                    name="old_password"
-                    rules={{
-                      required: t("common.errors.required"),
-                    }}
-                    render={({ field: { value, onChange } }) => (
-                      <Input
-                        id="old_password"
-                        type={showPassword?.oldPassword ? "text" : "password"}
-                        value={value}
-                        onChange={onChange}
-                        placeholder={t("old_password")}
-                        className="w-full"
-                        hasError={Boolean(errors.old_password)}
-                      />
-                    )}
-                  />
-                  {showPassword?.oldPassword ? (
-                    <EyeOff
-                      className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
-                      onClick={() => handleShowPassword("oldPassword")}
-                    />
-                  ) : (
-                    <Eye
-                      className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
-                      onClick={() => handleShowPassword("oldPassword")}
+    <div className="size-full">
+      <ProfileSettingsHeading title={t("auth.common.password.change_password.label.default")} />
+      <form onSubmit={handleSubmit(handleChangePassword)} className="mt-7 flex flex-col gap-8">
+        <div className="flex flex-col gap-y-7">
+          {oldPasswordRequired && (
+            <div className="flex flex-col gap-y-2">
+              <h4 className="text-13">{t("auth.common.password.current_password.label")}</h4>
+              <div className="relative flex items-center rounded-md">
+                <Controller
+                  control={control}
+                  name="old_password"
+                  rules={{
+                    required: t("common.errors.required"),
+                  }}
+                  render={({ field: { value, onChange } }) => (
+                    <Input
+                      id="old_password"
+                      type={showPassword?.oldPassword ? "text" : "password"}
+                      value={value}
+                      onChange={onChange}
+                      placeholder={t("old_password")}
+                      className="w-full"
+                      hasError={Boolean(errors.old_password)}
+                      autoComplete="current-password"
                     />
                   )}
-                </div>
-                {errors.old_password && <span className="text-xs text-red-500">{errors.old_password.message}</span>}
+                />
+                {showPassword?.oldPassword ? (
+                  <EyeOff
+                    className="absolute right-3 h-5 w-5 stroke-placeholder hover:cursor-pointer"
+                    onClick={() => handleShowPassword("oldPassword")}
+                  />
+                ) : (
+                  <Eye
+                    className="absolute right-3 h-5 w-5 stroke-placeholder hover:cursor-pointer"
+                    onClick={() => handleShowPassword("oldPassword")}
+                  />
+                )}
               </div>
-            )}
-            <div className="space-y-1">
-              <h4 className="text-sm">{t("auth.common.password.new_password.label")}</h4>
+              {errors.old_password && (
+                <span className="text-11 text-danger-primary">{errors.old_password.message}</span>
+              )}
+            </div>
+          )}
+          <div className="grid gap-x-4 gap-y-7 sm:grid-cols-2">
+            <div className="flex flex-col gap-y-2">
+              <h4 className="text-13">{t("auth.common.password.new_password.label")}</h4>
               <div className="relative flex items-center rounded-md">
                 <Controller
                   control={control}
@@ -180,28 +194,34 @@ function SecurityPage() {
                       hasError={Boolean(errors.new_password)}
                       onFocus={() => setIsPasswordInputFocused(true)}
                       onBlur={() => setIsPasswordInputFocused(false)}
+                      autoComplete="new-password"
                     />
                   )}
                 />
                 {showPassword?.password ? (
                   <EyeOff
-                    className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
+                    className="absolute right-3 h-5 w-5 stroke-placeholder hover:cursor-pointer"
                     onClick={() => handleShowPassword("password")}
                   />
                 ) : (
                   <Eye
-                    className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
+                    className="absolute right-3 h-5 w-5 stroke-placeholder hover:cursor-pointer"
                     onClick={() => handleShowPassword("password")}
                   />
                 )}
               </div>
               {passwordSupport}
+              {errors.new_password && (
+                <span className="text-11 text-danger-primary">{errors.new_password.message}</span>
+              )}
               {isNewPasswordSameAsOldPassword && !isPasswordInputFocused && (
-                <span className="text-xs text-red-500">{t("new_password_must_be_different_from_old_password")}</span>
+                <span className="text-11 text-danger-primary">
+                  {t("new_password_must_be_different_from_old_password")}
+                </span>
               )}
             </div>
-            <div className="space-y-1">
-              <h4 className="text-sm">{t("auth.common.password.confirm_password.label")}</h4>
+            <div className="flex flex-col gap-y-2">
+              <h4 className="text-13">{t("auth.common.password.confirm_password.label")}</h4>
               <div className="relative flex items-center rounded-md">
                 <Controller
                   control={control}
@@ -220,38 +240,36 @@ function SecurityPage() {
                       hasError={Boolean(errors.confirm_password)}
                       onFocus={() => setIsRetryPasswordInputFocused(true)}
                       onBlur={() => setIsRetryPasswordInputFocused(false)}
+                      autoComplete="new-password"
                     />
                   )}
                 />
                 {showPassword?.confirmPassword ? (
                   <EyeOff
-                    className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
+                    className="absolute right-3 h-5 w-5 stroke-placeholder hover:cursor-pointer"
                     onClick={() => handleShowPassword("confirmPassword")}
                   />
                 ) : (
                   <Eye
-                    className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
+                    className="absolute right-3 h-5 w-5 stroke-placeholder hover:cursor-pointer"
                     onClick={() => handleShowPassword("confirmPassword")}
                   />
                 )}
               </div>
               {!!confirmPassword && password !== confirmPassword && renderPasswordMatchError && (
-                <span className="text-sm text-red-500">{t("auth.common.password.errors.match")}</span>
+                <span className="text-13 text-danger-primary">{t("auth.common.password.errors.match")}</span>
               )}
             </div>
           </div>
-
-          <div className="flex items-center justify-between py-2">
-            <Button variant="primary" type="submit" loading={isSubmitting} disabled={isButtonDisabled}>
+          <div>
+            <Button variant="primary" size="xl" type="submit" loading={isSubmitting} disabled={isButtonDisabled}>
               {isSubmitting
                 ? `${t("auth.common.password.change_password.label.submitting")}`
                 : t("auth.common.password.change_password.label.default")}
             </Button>
           </div>
-        </form>
-      </ProfileSettingContentWrapper>
-    </>
+        </div>
+      </form>
+    </div>
   );
-}
-
-export default observer(SecurityPage);
+});
diff --git a/apps/web/core/components/settings/profile/content/root.tsx b/apps/web/core/components/settings/profile/content/root.tsx
new file mode 100644
index 000000000..c407d2b1d
--- /dev/null
+++ b/apps/web/core/components/settings/profile/content/root.tsx
@@ -0,0 +1,38 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { Suspense } from "react";
+import { observer } from "mobx-react";
+// plane imports
+import { ScrollArea } from "@plane/propel/scrollarea";
+import type { TProfileSettingsTabs } from "@plane/types";
+import { cn } from "@plane/utils";
+// local imports
+import { PROFILE_SETTINGS_PAGES_MAP } from "./pages";
+
+type Props = {
+  activeTab: TProfileSettingsTabs;
+  className?: string;
+};
+
+export const ProfileSettingsContent = observer(function ProfileSettingsContent(props: Props) {
+  const { activeTab, className } = props;
+  const PageComponent = PROFILE_SETTINGS_PAGES_MAP[activeTab];
+
+  return (
+    <ScrollArea
+      className={cn("shrink-0 overflow-y-scroll bg-surface-1", className)}
+      viewportClassName="px-8 py-9"
+      scrollType="hover"
+      orientation="vertical"
+      size="sm"
+    >
+      <Suspense>
+        <PageComponent />
+      </Suspense>
+    </ScrollArea>
+  );
+});
diff --git a/apps/web/core/components/settings/profile/heading.tsx b/apps/web/core/components/settings/profile/heading.tsx
new file mode 100644
index 000000000..017b2c10e
--- /dev/null
+++ b/apps/web/core/components/settings/profile/heading.tsx
@@ -0,0 +1,27 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// plane imports
+import { cn } from "@plane/ui";
+
+type Props = {
+  className?: string;
+  control?: React.ReactNode;
+  description?: React.ReactNode;
+  title?: React.ReactNode;
+};
+
+export function ProfileSettingsHeading({ className, control, description, title }: Props) {
+  return (
+    <div className={cn("flex flex-col items-start justify-between gap-4 md:flex-row md:items-center", className)}>
+      <div className="flex flex-col items-start gap-1">
+        {title && <h6 className="text-h6-medium text-primary">{title}</h6>}
+        {description && <p className="text-body-xs-regular text-tertiary">{description}</p>}
+      </div>
+      {control}
+    </div>
+  );
+}
diff --git a/apps/web/core/components/settings/profile/modal.tsx b/apps/web/core/components/settings/profile/modal.tsx
new file mode 100644
index 000000000..43abd90af
--- /dev/null
+++ b/apps/web/core/components/settings/profile/modal.tsx
@@ -0,0 +1,59 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useCallback } from "react";
+import { X } from "lucide-react";
+import { observer } from "mobx-react";
+// plane imports
+import { IconButton } from "@plane/propel/icon-button";
+import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
+// hooks
+import { useCommandPalette } from "@/hooks/store/use-command-palette";
+// local imports
+import { ProfileSettingsContent } from "./content";
+import { ProfileSettingsSidebarRoot } from "./sidebar";
+
+export const ProfileSettingsModal = observer(function ProfileSettingsModal() {
+  // store hooks
+  const { profileSettingsModal, toggleProfileSettingsModal } = useCommandPalette();
+  // derived values
+  const activeTab = profileSettingsModal.activeTab ?? "general";
+
+  const handleClose = useCallback(() => {
+    toggleProfileSettingsModal({
+      isOpen: false,
+    });
+    setTimeout(() => {
+      toggleProfileSettingsModal({
+        activeTab: null,
+      });
+    }, 300);
+  }, [toggleProfileSettingsModal]);
+
+  return (
+    <ModalCore
+      isOpen={profileSettingsModal.isOpen}
+      handleClose={handleClose}
+      position={EModalPosition.CENTER}
+      width={EModalWidth.VIXL}
+      className="h-175"
+    >
+      <div className="@container relative size-full">
+        <div className="flex size-full">
+          <ProfileSettingsSidebarRoot
+            activeTab={activeTab}
+            className="w-[250px] rounded-l-xl"
+            updateActiveTab={(tab) => toggleProfileSettingsModal({ activeTab: tab })}
+          />
+          <ProfileSettingsContent activeTab={activeTab} className="flex-1 rounded-r-xl" />
+        </div>
+        <div className="absolute top-3.5 right-3.5">
+          <IconButton size="base" variant="tertiary" icon={X} onClick={handleClose} />
+        </div>
+      </div>
+    </ModalCore>
+  );
+});
diff --git a/apps/web/core/components/settings/profile/sidebar/header.tsx b/apps/web/core/components/settings/profile/sidebar/header.tsx
new file mode 100644
index 000000000..52f20f0a5
--- /dev/null
+++ b/apps/web/core/components/settings/profile/sidebar/header.tsx
@@ -0,0 +1,37 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// plane imports
+import { Avatar } from "@plane/ui";
+// hooks
+import { useUser } from "@/hooks/store/user";
+import { getFileURL } from "@plane/utils";
+
+export const ProfileSettingsSidebarHeader = observer(function ProfileSettingsSidebarHeader() {
+  // store hooks
+  const { data: currentUser } = useUser();
+
+  return (
+    <div className="flex shrink-0 items-center gap-2">
+      <div className="shrink-0">
+        <Avatar
+          src={getFileURL(currentUser?.avatar_url ?? "")}
+          name={currentUser?.display_name}
+          size={32}
+          shape="circle"
+          className="text-16"
+        />
+      </div>
+      <div className="truncate">
+        <p className="truncate text-body-sm-medium">
+          {currentUser?.first_name} {currentUser?.last_name}
+        </p>
+        <p className="truncate text-caption-md-regular">{currentUser?.email}</p>
+      </div>
+    </div>
+  );
+});
diff --git a/apps/web/core/components/settings/profile/sidebar/index.ts b/apps/web/core/components/settings/profile/sidebar/index.ts
new file mode 100644
index 000000000..d98033459
--- /dev/null
+++ b/apps/web/core/components/settings/profile/sidebar/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./root";
diff --git a/apps/web/core/components/settings/profile/sidebar/item-categories.tsx b/apps/web/core/components/settings/profile/sidebar/item-categories.tsx
new file mode 100644
index 000000000..d1ee973f3
--- /dev/null
+++ b/apps/web/core/components/settings/profile/sidebar/item-categories.tsx
@@ -0,0 +1,72 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type React from "react";
+import type { LucideIcon } from "lucide-react";
+import { Activity, Bell, CircleUser, KeyRound, LockIcon, Settings2 } from "lucide-react";
+import { observer } from "mobx-react";
+import { useParams } from "react-router";
+// plane imports
+import { GROUPED_PROFILE_SETTINGS, PROFILE_SETTINGS_CATEGORIES } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import type { ISvgIcons } from "@plane/propel/icons";
+import type { TProfileSettingsTabs } from "@plane/types";
+// local imports
+import { SettingsSidebarItem } from "../../sidebar/item";
+import { ProfileSettingsSidebarWorkspaceOptions } from "./workspace-options";
+
+const ICONS: Record<TProfileSettingsTabs, LucideIcon | React.FC<ISvgIcons>> = {
+  general: CircleUser,
+  security: LockIcon,
+  activity: Activity,
+  preferences: Settings2,
+  notifications: Bell,
+  "api-tokens": KeyRound,
+};
+
+type Props = {
+  activeTab: TProfileSettingsTabs;
+  updateActiveTab: (tab: TProfileSettingsTabs) => void;
+};
+
+export const ProfileSettingsSidebarItemCategories = observer(function ProfileSettingsSidebarItemCategories(
+  props: Props
+) {
+  const { activeTab, updateActiveTab } = props;
+  // params
+  const { profileTabId } = useParams();
+  // translation
+  const { t } = useTranslation();
+
+  return (
+    <div className="mt-4 flex flex-col gap-y-4">
+      {PROFILE_SETTINGS_CATEGORIES.map((category) => {
+        const categoryItems = GROUPED_PROFILE_SETTINGS[category];
+
+        if (categoryItems.length === 0) return null;
+
+        return (
+          <div key={category} className="shrink-0">
+            <div className="p-2 text-caption-md-medium text-tertiary capitalize">{t(category)}</div>
+            <div className="flex flex-col">
+              {categoryItems.map((item) => (
+                <SettingsSidebarItem
+                  key={item.key}
+                  as="button"
+                  onClick={() => updateActiveTab(item.key)}
+                  isActive={activeTab === item.key}
+                  icon={ICONS[item.key]}
+                  label={t(item.i18n_label)}
+                />
+              ))}
+            </div>
+          </div>
+        );
+      })}
+      {profileTabId && <ProfileSettingsSidebarWorkspaceOptions />}
+    </div>
+  );
+});
diff --git a/apps/web/core/components/settings/profile/sidebar/root.tsx b/apps/web/core/components/settings/profile/sidebar/root.tsx
new file mode 100644
index 000000000..bef2b9928
--- /dev/null
+++ b/apps/web/core/components/settings/profile/sidebar/root.tsx
@@ -0,0 +1,35 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// plane imports
+import { ScrollArea } from "@plane/propel/scrollarea";
+import type { TProfileSettingsTabs } from "@plane/types";
+import { cn } from "@plane/utils";
+// local imports
+import { ProfileSettingsSidebarHeader } from "./header";
+import { ProfileSettingsSidebarItemCategories } from "./item-categories";
+
+type Props = {
+  activeTab: TProfileSettingsTabs;
+  className?: string;
+  updateActiveTab: (tab: TProfileSettingsTabs) => void;
+};
+
+export function ProfileSettingsSidebarRoot(props: Props) {
+  const { activeTab, className, updateActiveTab } = props;
+
+  return (
+    <ScrollArea
+      scrollType="hover"
+      orientation="vertical"
+      size="sm"
+      rootClassName={cn("shrink-0 overflow-y-scroll border-r border-r-subtle bg-surface-2 px-3 py-4", className)}
+    >
+      <ProfileSettingsSidebarHeader />
+      <ProfileSettingsSidebarItemCategories activeTab={activeTab} updateActiveTab={updateActiveTab} />
+    </ScrollArea>
+  );
+}
diff --git a/apps/web/core/components/settings/profile/sidebar/workspace-options.tsx b/apps/web/core/components/settings/profile/sidebar/workspace-options.tsx
new file mode 100644
index 000000000..c2bb1c8cf
--- /dev/null
+++ b/apps/web/core/components/settings/profile/sidebar/workspace-options.tsx
@@ -0,0 +1,56 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { CirclePlus, Mails } from "lucide-react";
+import { observer } from "mobx-react";
+// plane imports
+import { useTranslation } from "@plane/i18n";
+// components
+import { SettingsSidebarItem } from "@/components/settings/sidebar/item";
+import { WorkspaceLogo } from "@/components/workspace/logo";
+// hooks
+import { useWorkspace } from "@/hooks/store/use-workspace";
+
+export const ProfileSettingsSidebarWorkspaceOptions = observer(function ProfileSettingsSidebarWorkspaceOptions() {
+  // store hooks
+  const { workspaces } = useWorkspace();
+  // translation
+  const { t } = useTranslation();
+
+  return (
+    <div className="shrink-0">
+      <div className="p-2 text-caption-md-medium text-tertiary capitalize">{t("workspace")}</div>
+      <div className="flex flex-col">
+        {Object.values(workspaces).map((workspace) => (
+          <SettingsSidebarItem
+            key={workspace.id}
+            as="link"
+            href={`/${workspace.slug}/`}
+            iconNode={<WorkspaceLogo logo={workspace.logo_url} name={workspace.name} classNames="shrink-0" />}
+            label={workspace.name}
+            isActive={false}
+          />
+        ))}
+        <div className="mt-1.5">
+          <SettingsSidebarItem
+            as="link"
+            href="/create-workspace/"
+            icon={CirclePlus}
+            label={t("create_workspace")}
+            isActive={false}
+          />
+          <SettingsSidebarItem
+            as="link"
+            href="/invitations/"
+            icon={Mails}
+            label={t("workspace_invites")}
+            isActive={false}
+          />
+        </div>
+      </div>
+    </div>
+  );
+});
diff --git a/apps/web/core/components/settings/project/content/feature-control-item.tsx b/apps/web/core/components/settings/project/content/feature-control-item.tsx
new file mode 100644
index 000000000..4db4298ec
--- /dev/null
+++ b/apps/web/core/components/settings/project/content/feature-control-item.tsx
@@ -0,0 +1,66 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// plane imports
+import { setPromiseToast } from "@plane/propel/toast";
+import type { IProject } from "@plane/types";
+import { ToggleSwitch } from "@plane/ui";
+// components
+import { SettingsBoxedControlItem } from "@/components/settings/boxed-control-item";
+// hooks
+import { useProject } from "@/hooks/store/use-project";
+
+type Props = {
+  description?: React.ReactNode;
+  disabled?: boolean;
+  projectId: string;
+  featureProperty: keyof IProject;
+  title: React.ReactNode;
+  value: boolean;
+  workspaceSlug: string;
+};
+
+export const ProjectSettingsFeatureControlItem = observer(function ProjectSettingsFeatureControlItem(props: Props) {
+  const { description, disabled, featureProperty, projectId, title, value, workspaceSlug } = props;
+  // store hooks
+  const { getProjectById, updateProject } = useProject();
+  // derived values
+  const currentProjectDetails = getProjectById(projectId);
+
+  const handleSubmit = () => {
+    if (!workspaceSlug || !projectId || !currentProjectDetails) return;
+
+    // making the request to update the project feature
+    const settingsPayload = {
+      [featureProperty]: !currentProjectDetails?.[featureProperty],
+    };
+    const updateProjectPromise = updateProject(workspaceSlug, projectId, settingsPayload);
+
+    setPromiseToast(updateProjectPromise, {
+      loading: "Updating project feature...",
+      success: {
+        title: "Success!",
+        message: () => "Project feature updated successfully.",
+      },
+      error: {
+        title: "Error!",
+        message: () => "Something went wrong while updating project feature. Please try again.",
+      },
+    });
+    void updateProjectPromise.then(() => {
+      return undefined;
+    });
+  };
+
+  return (
+    <SettingsBoxedControlItem
+      title={title}
+      description={description}
+      control={<ToggleSwitch value={value} onChange={handleSubmit} disabled={disabled} size="sm" />}
+    />
+  );
+});
diff --git a/apps/web/core/components/settings/project/sidebar/header.tsx b/apps/web/core/components/settings/project/sidebar/header.tsx
new file mode 100644
index 000000000..a5986d301
--- /dev/null
+++ b/apps/web/core/components/settings/project/sidebar/header.tsx
@@ -0,0 +1,64 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { ArrowLeft } from "lucide-react";
+import { observer } from "mobx-react";
+// plane imports
+import { ROLE_DETAILS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { Logo } from "@plane/propel/emoji-icon-picker";
+import { IconButton } from "@plane/propel/icon-button";
+// hooks
+import { useUserPermissions } from "@/hooks/store/user";
+import { useAppRouter } from "@/hooks/use-app-router";
+import { useProject } from "@/hooks/store/use-project";
+import { useWorkspace } from "@/hooks/store/use-workspace";
+
+type Props = {
+  projectId: string;
+};
+
+export const ProjectSettingsSidebarHeader = observer(function ProjectSettingsSidebarHeader(props: Props) {
+  const { projectId } = props;
+  // router
+  const router = useAppRouter();
+  // store hooks
+  const { getProjectRoleByWorkspaceSlugAndProjectId } = useUserPermissions();
+  const { currentWorkspace } = useWorkspace();
+  const { getPartialProjectById } = useProject();
+  // derived values
+  const projectDetails = getPartialProjectById(projectId);
+  const currentProjectRole = currentWorkspace?.slug
+    ? getProjectRoleByWorkspaceSlugAndProjectId(currentWorkspace.slug, projectId)
+    : undefined;
+  // translation
+  const { t } = useTranslation();
+
+  if (!currentProjectRole) return null;
+
+  return (
+    <div className="shrink-0">
+      <div className="flex items-center gap-1 py-3 pr-5 pl-4 text-body-md-medium">
+        <IconButton
+          variant="ghost"
+          size="base"
+          icon={ArrowLeft}
+          onClick={() => router.push(`/${currentWorkspace?.slug}/projects/${projectId}/issues/`)}
+        />
+        <p>Project settings</p>
+      </div>
+      <div className="mt-1.5 flex items-center gap-2 truncate px-5 py-0.5">
+        <div className="grid size-8 shrink-0 place-items-center rounded bg-layer-2">
+          <Logo logo={projectDetails?.logo_props} size={20} />
+        </div>
+        <div className="truncate">
+          <p className="truncate text-body-sm-medium">{projectDetails?.name}</p>
+          <p className="truncate text-caption-md-regular">{t(ROLE_DETAILS[currentProjectRole].i18n_title)}</p>
+        </div>
+      </div>
+    </div>
+  );
+});
diff --git a/apps/web/core/components/settings/project/sidebar/index.ts b/apps/web/core/components/settings/project/sidebar/index.ts
index 1efe34c51..d98033459 100644
--- a/apps/web/core/components/settings/project/sidebar/index.ts
+++ b/apps/web/core/components/settings/project/sidebar/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./root";
diff --git a/apps/web/core/components/settings/project/sidebar/item-categories.tsx b/apps/web/core/components/settings/project/sidebar/item-categories.tsx
new file mode 100644
index 000000000..f94141c19
--- /dev/null
+++ b/apps/web/core/components/settings/project/sidebar/item-categories.tsx
@@ -0,0 +1,73 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import { usePathname } from "next/navigation";
+import { useParams } from "react-router";
+// plane imports
+import { EUserPermissionsLevel, GROUPED_PROJECT_SETTINGS, PROJECT_SETTINGS_CATEGORIES } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+// components
+import { SettingsSidebarItem } from "@/components/settings/sidebar/item";
+// hooks
+import { useUserPermissions } from "@/hooks/store/user";
+// local imports
+import { PROJECT_SETTINGS_ICONS } from "./item-icon";
+
+type Props = {
+  projectId: string;
+};
+
+export const ProjectSettingsSidebarItemCategories = observer(function ProjectSettingsSidebarItemCategories(
+  props: Props
+) {
+  const { projectId } = props;
+  // params
+  const { workspaceSlug } = useParams();
+  const pathname = usePathname();
+  // store hooks
+  const { allowPermissions } = useUserPermissions();
+  // translation
+  const { t } = useTranslation();
+
+  return (
+    <div className="mt-3 flex flex-col divide-y divide-subtle px-3">
+      {PROJECT_SETTINGS_CATEGORIES.map((category) => {
+        const categoryItems = GROUPED_PROJECT_SETTINGS[category];
+        const accessibleItems = categoryItems.filter((item) =>
+          allowPermissions(item.access, EUserPermissionsLevel.PROJECT, workspaceSlug, projectId)
+        );
+
+        if (accessibleItems.length === 0) return null;
+
+        return (
+          <div key={category} className="shrink-0 py-3 first:pt-0 last:pb-0">
+            <div className="p-2 text-caption-md-medium text-tertiary capitalize">{t(category)}</div>
+            <div className="flex flex-col">
+              {accessibleItems.map((item) => {
+                const isItemActive =
+                  item.href === ""
+                    ? pathname === `/${workspaceSlug}/settings/projects/${projectId}${item.href}/`
+                    : new RegExp(`^/${workspaceSlug}/settings/projects/${projectId}${item.href}/`).test(pathname);
+
+                return (
+                  <SettingsSidebarItem
+                    key={item.key}
+                    as="link"
+                    href={`/${workspaceSlug}/settings/projects/${projectId}${item.href}/`}
+                    isActive={isItemActive}
+                    icon={PROJECT_SETTINGS_ICONS[item.key]}
+                    label={t(item.i18n_label)}
+                  />
+                );
+              })}
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+});
diff --git a/apps/web/core/components/settings/project/sidebar/item-icon.tsx b/apps/web/core/components/settings/project/sidebar/item-icon.tsx
new file mode 100644
index 000000000..80d324b66
--- /dev/null
+++ b/apps/web/core/components/settings/project/sidebar/item-icon.tsx
@@ -0,0 +1,37 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { LucideIcon } from "lucide-react";
+import { Users, Zap } from "lucide-react";
+// plane imports
+import type { ISvgIcons } from "@plane/propel/icons";
+import {
+  CycleIcon,
+  EstimatePropertyIcon,
+  IntakeIcon,
+  LabelPropertyIcon,
+  ModuleIcon,
+  PageIcon,
+  StatePropertyIcon,
+  ViewsIcon,
+} from "@plane/propel/icons";
+import type { TProjectSettingsTabs } from "@plane/types";
+// components
+import { SettingIcon } from "@/components/icons/attachment";
+
+export const PROJECT_SETTINGS_ICONS: Record<TProjectSettingsTabs, LucideIcon | React.FC<ISvgIcons>> = {
+  general: SettingIcon,
+  members: Users,
+  features_cycles: CycleIcon,
+  features_modules: ModuleIcon,
+  features_views: ViewsIcon,
+  features_pages: PageIcon,
+  features_intake: IntakeIcon,
+  states: StatePropertyIcon,
+  labels: LabelPropertyIcon,
+  estimates: EstimatePropertyIcon,
+  automations: Zap,
+};
diff --git a/apps/web/core/components/settings/project/sidebar/nav-item-children.tsx b/apps/web/core/components/settings/project/sidebar/nav-item-children.tsx
deleted file mode 100644
index c882da0e6..000000000
--- a/apps/web/core/components/settings/project/sidebar/nav-item-children.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-import { range } from "lodash-es";
-import { observer } from "mobx-react";
-import Link from "next/link";
-import { usePathname, useParams } from "next/navigation";
-import { EUserPermissionsLevel } from "@plane/constants";
-import { useTranslation } from "@plane/i18n";
-import { Loader } from "@plane/ui";
-import { cn } from "@plane/utils";
-import { useProject } from "@/hooks/store/use-project";
-import { useUserPermissions, useUserSettings } from "@/hooks/store/user";
-import { PROJECT_SETTINGS_LINKS } from "@/plane-web/constants/project";
-import { getProjectSettingsPageLabelI18nKey } from "@/plane-web/helpers/project-settings";
-
-export const NavItemChildren = observer(function NavItemChildren(props: { projectId: string }) {
-  const { projectId } = props;
-  const { workspaceSlug } = useParams();
-  const pathname = usePathname();
-  // mobx store
-  const { getProjectById } = useProject();
-  const { allowPermissions } = useUserPermissions();
-  const { t } = useTranslation();
-  const { toggleSidebar } = useUserSettings();
-
-  // derived values
-  const currentProject = getProjectById(projectId);
-
-  if (!currentProject) {
-    return (
-      <div className="flex w-[280px] flex-col gap-6">
-        <div className="flex flex-col gap-2">
-          <Loader className="flex w-full flex-col gap-2">
-            {range(8).map((index) => (
-              <Loader.Item key={index} height="34px" />
-            ))}
-          </Loader>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="flex flex-col gap-6">
-      <div className="flex flex-col gap-2">
-        <div className="flex w-full flex-col gap-1">
-          {PROJECT_SETTINGS_LINKS.map((link) => {
-            const isActive = link.highlight(pathname, `/${workspaceSlug}/settings/projects/${projectId}`);
-            return (
-              allowPermissions(
-                link.access,
-                EUserPermissionsLevel.PROJECT,
-                workspaceSlug?.toString() ?? "",
-                projectId?.toString() ?? ""
-              ) && (
-                <Link
-                  key={link.key}
-                  href={`/${workspaceSlug}/settings/projects/${projectId}${link.href}`}
-                  onClick={() => toggleSidebar(true)}
-                >
-                  <div
-                    className={cn(
-                      "cursor-pointer relative group w-full flex items-center justify-between gap-1.5 rounded p-1 px-1.5 outline-none",
-                      {
-                        "text-custom-text-200 bg-custom-background-80/75": isActive,
-                        "text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-90 active:bg-custom-sidebar-background-90":
-                          !isActive,
-                      },
-                      "text-xs font-medium"
-                    )}
-                  >
-                    {t(getProjectSettingsPageLabelI18nKey(link.key, link.i18n_label))}
-                  </div>
-                </Link>
-              )
-            );
-          })}
-        </div>
-      </div>
-    </div>
-  );
-});
diff --git a/apps/web/core/components/settings/project/sidebar/root.tsx b/apps/web/core/components/settings/project/sidebar/root.tsx
index cbb6f3f9f..1352b0fd9 100644
--- a/apps/web/core/components/settings/project/sidebar/root.tsx
+++ b/apps/web/core/components/settings/project/sidebar/root.tsx
@@ -1,52 +1,32 @@
-import { observer } from "mobx-react";
-import { useParams } from "next/navigation";
-// plane imports
-import { PROJECT_SETTINGS_CATEGORIES, PROJECT_SETTINGS_CATEGORY } from "@plane/constants";
-import { Logo } from "@plane/propel/emoji-icon-picker";
-import { getUserRole } from "@plane/utils";
-// components
-// hooks
-import { useProject } from "@/hooks/store/use-project";
-// local imports
-import { SettingsSidebar } from "../../sidebar";
-import { NavItemChildren } from "./nav-item-children";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
 
-type TProjectSettingsSidebarProps = {
-  isMobile?: boolean;
+// plane imports
+import { ScrollArea } from "@plane/propel/scrollarea";
+// local imports
+import { ProjectSettingsSidebarHeader } from "./header";
+import { ProjectSettingsSidebarItemCategories } from "./item-categories";
+
+type Props = {
+  projectId: string;
 };
 
-export const ProjectSettingsSidebar = observer(function ProjectSettingsSidebar(props: TProjectSettingsSidebarProps) {
-  const { isMobile = false } = props;
-  const { workspaceSlug } = useParams();
-  // store hooks
-  const { joinedProjectIds, projectMap } = useProject();
-
-  const groupedProject = joinedProjectIds.map((projectId) => ({
-    key: projectId,
-    i18n_label: projectMap[projectId].name,
-    href: `/settings/projects/${projectId}`,
-    icon: <Logo logo={projectMap[projectId].logo_props} />,
-  }));
+export function ProjectSettingsSidebarRoot(props: Props) {
+  const { projectId } = props;
 
   return (
-    <SettingsSidebar
-      isMobile={isMobile}
-      categories={PROJECT_SETTINGS_CATEGORIES}
-      groupedSettings={{
-        [PROJECT_SETTINGS_CATEGORY.PROJECTS]: groupedProject,
-      }}
-      workspaceSlug={workspaceSlug.toString()}
-      isActive={false}
-      appendItemsToTitle={(key: string) => {
-        const role = projectMap[key].member_role;
-        return (
-          <div className="text-xs font-medium text-custom-text-200 capitalize bg-custom-background-90 rounded-md px-1 py-0.5">
-            {role ? getUserRole(role)?.toLowerCase() : "Guest"}
-          </div>
-        );
-      }}
-      shouldRender
-      renderChildren={(key: string) => <NavItemChildren projectId={key} />}
-    />
+    <ScrollArea
+      scrollType="hover"
+      orientation="vertical"
+      size="sm"
+      rootClassName="shrink-0 animate-fade-in h-full w-[250px] bg-surface-1 border-r border-r-subtle overflow-y-scroll"
+      viewportClassName="pb-5"
+    >
+      <ProjectSettingsSidebarHeader projectId={projectId} />
+      <ProjectSettingsSidebarItemCategories projectId={projectId} />
+    </ScrollArea>
   );
-});
+}
diff --git a/apps/web/core/components/settings/sidebar/header.tsx b/apps/web/core/components/settings/sidebar/header.tsx
deleted file mode 100644
index fec333c3e..000000000
--- a/apps/web/core/components/settings/sidebar/header.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import { observer } from "mobx-react";
-// plane imports
-import { getUserRole } from "@plane/utils";
-// components
-import { WorkspaceLogo } from "@/components/workspace/logo";
-// hooks
-import { useWorkspace } from "@/hooks/store/use-workspace";
-// plane web imports
-import { SubscriptionPill } from "@/plane-web/components/common/subscription/subscription-pill";
-
-export const SettingsSidebarHeader = observer(function SettingsSidebarHeader(props: {
-  customHeader?: React.ReactNode;
-}) {
-  const { customHeader } = props;
-  const { currentWorkspace } = useWorkspace();
-  return customHeader
-    ? customHeader
-    : currentWorkspace && (
-        <div className="flex w-full gap-3 items-center justify-between px-2">
-          <div className="flex w-full gap-3 items-center overflow-hidden">
-            <WorkspaceLogo
-              logo={currentWorkspace.logo_url ?? ""}
-              name={currentWorkspace.name ?? ""}
-              classNames="size-8 border border-custom-border-200"
-            />
-            <div className="w-full overflow-hidden">
-              <div className="text-base font-medium text-custom-text-200 truncate text-ellipsis ">
-                {currentWorkspace.name ?? "Workspace"}
-              </div>
-              <div className="text-sm text-custom-text-300 capitalize">
-                {getUserRole(currentWorkspace.role)?.toLowerCase() || "guest"}
-              </div>
-            </div>
-          </div>
-          <div className="flex-shrink-0">
-            <SubscriptionPill />
-          </div>
-        </div>
-      );
-});
diff --git a/apps/web/core/components/settings/sidebar/index.ts b/apps/web/core/components/settings/sidebar/index.ts
deleted file mode 100644
index 1efe34c51..000000000
--- a/apps/web/core/components/settings/sidebar/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./root";
diff --git a/apps/web/core/components/settings/sidebar/item.tsx b/apps/web/core/components/settings/sidebar/item.tsx
new file mode 100644
index 000000000..47937c378
--- /dev/null
+++ b/apps/web/core/components/settings/sidebar/item.tsx
@@ -0,0 +1,60 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+import Link from "next/link";
+// plane imports
+import { cn } from "@plane/utils";
+import type { LucideIcon } from "lucide-react";
+import type { ISvgIcons } from "@plane/propel/icons";
+
+type Props = {
+  isActive: boolean;
+  label: string;
+} & ({ as: "button"; onClick: () => void } | { as: "link"; href: string }) &
+  (
+    | {
+        icon: LucideIcon | React.FC<ISvgIcons>;
+      }
+    | { iconNode: React.ReactElement }
+  );
+
+export function SettingsSidebarItem(props: Props) {
+  const { as, isActive, label } = props;
+  // common class
+  const className = cn(
+    "flex items-center gap-2 rounded-lg px-2 py-1.5 text-left text-body-sm-medium text-secondary transition-colors",
+    {
+      "bg-layer-transparent-selected text-primary": isActive,
+      "hover:bg-layer-transparent-hover": !isActive,
+    }
+  );
+  // common content
+  const content = (
+    <>
+      {"icon" in props ? (
+        <span className="grid size-4 shrink-0 place-items-center">{<props.icon className="size-3.5" />}</span>
+      ) : (
+        props.iconNode
+      )}
+      <span className="truncate">{label}</span>
+    </>
+  );
+
+  if (as === "button") {
+    return (
+      <button type="button" className={className} onClick={props.onClick}>
+        {content}
+      </button>
+    );
+  }
+
+  return (
+    <Link className={className} href={props.href}>
+      {content}
+    </Link>
+  );
+}
diff --git a/apps/web/core/components/settings/sidebar/nav-item.tsx b/apps/web/core/components/settings/sidebar/nav-item.tsx
deleted file mode 100644
index 3570b9b27..000000000
--- a/apps/web/core/components/settings/sidebar/nav-item.tsx
+++ /dev/null
@@ -1,95 +0,0 @@
-import React, { useState } from "react";
-import { observer } from "mobx-react";
-import Link from "next/link";
-import { useParams } from "next/navigation";
-import { Disclosure } from "@headlessui/react";
-// plane imports
-import { useTranslation } from "@plane/i18n";
-import type { EUserWorkspaceRoles } from "@plane/types";
-import { cn, joinUrlPath } from "@plane/utils";
-// hooks
-import { useUserSettings } from "@/hooks/store/user";
-
-export type TSettingItem = {
-  key: string;
-  i18n_label: string;
-  href: string;
-  access?: EUserWorkspaceRoles[];
-  icon?: React.ReactNode;
-};
-export type TSettingsSidebarNavItemProps = {
-  workspaceSlug: string;
-  setting: TSettingItem;
-  isActive: boolean | ((data: { href: string }) => boolean);
-  actionIcons?: (props: { type: string; size?: number; className?: string }) => React.ReactNode;
-  appendItemsToTitle?: (key: string) => React.ReactNode;
-  renderChildren?: (key: string) => React.ReactNode;
-};
-
-const SettingsSidebarNavItem = observer(function SettingsSidebarNavItem(props: TSettingsSidebarNavItemProps) {
-  const { workspaceSlug, setting, isActive, actionIcons, appendItemsToTitle, renderChildren } = props;
-  // router
-  const { projectId } = useParams();
-  // i18n
-  const { t } = useTranslation();
-  // state
-  const [isExpanded, setIsExpanded] = useState(projectId === setting.key);
-  // hooks
-  const { toggleSidebar } = useUserSettings();
-  // derived
-  const buttonClass = cn(
-    "flex w-full items-center px-2 py-1.5 rounded text-custom-text-200 justify-between",
-    "hover:bg-custom-primary-100/10",
-    {
-      "text-custom-text-200 bg-custom-background-80/75": typeof isActive === "function" ? isActive(setting) : isActive,
-      "text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-90 active:bg-custom-sidebar-background-90":
-        typeof isActive === "function" ? !isActive(setting) : !isActive,
-    }
-  );
-
-  const titleElement = (
-    <>
-      <div className="flex items-center gap-1.5 overflow-hidden">
-        {setting.icon
-          ? setting.icon
-          : actionIcons && actionIcons({ type: setting.key, size: 16, className: "w-4 h-4" })}
-        <div className="text-sm font-medium truncate">{t(setting.i18n_label)}</div>
-      </div>
-      {appendItemsToTitle?.(setting.key)}
-    </>
-  );
-
-  return (
-    <Disclosure as="div" className="flex flex-col w-full" defaultOpen={isExpanded} key={setting.key}>
-      <Disclosure.Button
-        as="button"
-        type="button"
-        className={cn(
-          "group w-full flex items-center gap-1 whitespace-nowrap text-left text-sm font-semibold text-custom-sidebar-text-400"
-        )}
-        onClick={() => setIsExpanded(!isExpanded)}
-      >
-        {renderChildren ? (
-          <div className={buttonClass}>{titleElement}</div>
-        ) : (
-          <Link
-            href={joinUrlPath(workspaceSlug, setting.href)}
-            className={buttonClass}
-            onClick={() => toggleSidebar(true)}
-          >
-            {titleElement}
-          </Link>
-        )}
-      </Disclosure.Button>
-      {/* Nested Navigation */}
-      {isExpanded && (
-        <Disclosure.Panel as="div" className={cn("relative flex flex-col gap-0.5 mt-1 pl-6 mb-1.5")} static>
-          <div className="absolute left-[15px] top-0 bottom-1 w-[1px] bg-custom-border-200" />
-          {renderChildren?.(setting.key)}
-        </Disclosure.Panel>
-      )}
-    </Disclosure>
-  );
-});
-
-export default SettingsSidebarNavItem;
diff --git a/apps/web/core/components/settings/sidebar/root.tsx b/apps/web/core/components/settings/sidebar/root.tsx
deleted file mode 100644
index 0d5e0e4fd..000000000
--- a/apps/web/core/components/settings/sidebar/root.tsx
+++ /dev/null
@@ -1,77 +0,0 @@
-import { observer } from "mobx-react";
-import { useTranslation } from "@plane/i18n";
-import { cn } from "@plane/utils";
-import { SettingsSidebarHeader } from "./header";
-import type { TSettingItem } from "./nav-item";
-import SettingsSidebarNavItem from "./nav-item";
-
-interface SettingsSidebarProps {
-  isMobile?: boolean;
-  customHeader?: React.ReactNode;
-  categories: string[];
-  groupedSettings: {
-    [key: string]: TSettingItem[];
-  };
-  workspaceSlug: string;
-  isActive: boolean | ((data: { href: string }) => boolean);
-  shouldRender: boolean | ((setting: TSettingItem) => boolean);
-  actionIcons?: (props: { type: string; size?: number; className?: string }) => React.ReactNode;
-  appendItemsToTitle?: (key: string) => React.ReactNode;
-  renderChildren?: (key: string) => React.ReactNode;
-}
-
-export const SettingsSidebar = observer(function SettingsSidebar(props: SettingsSidebarProps) {
-  const {
-    isMobile = false,
-    customHeader,
-    categories,
-    groupedSettings,
-    workspaceSlug,
-    isActive,
-    shouldRender,
-    actionIcons,
-    appendItemsToTitle,
-    renderChildren,
-  } = props;
-  // hooks
-  const { t } = useTranslation();
-
-  return (
-    <div
-      className={cn("flex w-[250px] flex-col gap-2 flex-shrink-0 overflow-y-scroll h-full md:pt-page-y ", {
-        "absolute left-0 top-[42px] z-50 h-fit max-h-[400px] overflow-scroll bg-custom-background-100 border border-custom-border-100 rounded shadow-sm p-4":
-          isMobile,
-      })}
-    >
-      {/* Header */}
-      <SettingsSidebarHeader customHeader={customHeader} />
-      {/* Navigation */}
-      <div className="divide-y divide-custom-border-100 overflow-x-hidden w-full h-full overflow-y-scroll vertical-scrollbar scrollbar-sm">
-        {categories.map((category) => {
-          if (groupedSettings[category].length === 0) return null;
-          return (
-            <div key={category} className="py-3">
-              <span className="text-sm font-semibold text-custom-text-350 capitalize mb-2 px-2">{t(category)}</span>
-              <div className="relative flex flex-col gap-0.5 h-full mt-2">
-                {groupedSettings[category].map(
-                  (setting) =>
-                    (typeof shouldRender === "function" ? shouldRender(setting) : shouldRender) && (
-                      <SettingsSidebarNavItem
-                        key={setting.key}
-                        setting={setting}
-                        workspaceSlug={workspaceSlug}
-                        isActive={isActive}
-                        appendItemsToTitle={appendItemsToTitle}
-                        renderChildren={renderChildren}
-                        actionIcons={actionIcons}
-                      />
-                    )
-                )}
-              </div>
-            </div>
-          );
-        })}
-      </div>
-    </div>
-  );
-});
diff --git a/apps/web/core/components/settings/tabs.tsx b/apps/web/core/components/settings/tabs.tsx
deleted file mode 100644
index 84712135a..000000000
--- a/apps/web/core/components/settings/tabs.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import { observer } from "mobx-react";
-import Link from "next/link";
-import { useParams, usePathname } from "next/navigation";
-import { cn } from "@plane/utils";
-import { useProject } from "@/hooks/store/use-project";
-
-const TABS = {
-  account: {
-    key: "account",
-    label: "Account",
-    href: `/settings/account/`,
-  },
-  workspace: {
-    key: "workspace",
-    label: "Workspace",
-    href: `/settings/`,
-  },
-  projects: {
-    key: "projects",
-    label: "Projects",
-    href: `/settings/projects/`,
-  },
-};
-
-const SettingsTabs = observer(function SettingsTabs() {
-  // router
-  const pathname = usePathname();
-  const { workspaceSlug } = useParams();
-  // store hooks
-  const { joinedProjectIds } = useProject();
-
-  const currentTab = pathname.includes(TABS.projects.href)
-    ? TABS.projects
-    : pathname.includes(TABS.account.href)
-      ? TABS.account
-      : TABS.workspace;
-
-  return (
-    <div className="flex w-fit min-w-fit items-center justify-between gap-1.5 rounded-md text-sm p-0.5 bg-custom-background-80">
-      {Object.values(TABS).map((tab) => {
-        const isActive = currentTab?.key === tab.key;
-        const href = tab.key === TABS.projects.key ? `${tab.href}${joinedProjectIds[0] || ""}` : tab.href;
-        return (
-          <Link
-            key={tab.key}
-            href={`/${workspaceSlug}${href}`}
-            className={cn(
-              "flex items-center justify-center p-1 min-w-fit w-full font-medium outline-none focus:outline-none cursor-pointer transition-all rounded text-custom-text-200 ",
-              {
-                "bg-custom-background-100 text-custom-text-100 shadow-sm": isActive,
-                "hover:text-custom-text-100 hover:bg-custom-background-80/60": !isActive,
-              }
-            )}
-          >
-            <div className="text-xs font-semibold p-1">{tab.label}</div>
-          </Link>
-        );
-      })}
-    </div>
-  );
-});
-
-export default SettingsTabs;
diff --git a/apps/web/core/components/settings/workspace/sidebar/header.tsx b/apps/web/core/components/settings/workspace/sidebar/header.tsx
new file mode 100644
index 000000000..48b13a1ff
--- /dev/null
+++ b/apps/web/core/components/settings/workspace/sidebar/header.tsx
@@ -0,0 +1,66 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { ArrowLeft } from "lucide-react";
+import { observer } from "mobx-react";
+// plane imports
+import { ROLE_DETAILS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { IconButton } from "@plane/propel/icon-button";
+// components
+import { WorkspaceLogo } from "@/components/workspace/logo";
+// hooks
+import { useUserPermissions } from "@/hooks/store/user";
+import { useAppRouter } from "@/hooks/use-app-router";
+import { useWorkspace } from "@/hooks/store/use-workspace";
+// plane web imports
+import { SubscriptionPill } from "@/plane-web/components/common/subscription/subscription-pill";
+
+export const WorkspaceSettingsSidebarHeader = observer(function WorkspaceSettingsSidebarHeader() {
+  // router
+  const router = useAppRouter();
+  // store hooks
+  const { getWorkspaceRoleByWorkspaceSlug } = useUserPermissions();
+  const { currentWorkspace } = useWorkspace();
+  // derived values
+  const currentWorkspaceRole = currentWorkspace?.slug
+    ? getWorkspaceRoleByWorkspaceSlug(currentWorkspace.slug)
+    : undefined;
+  // translation
+  const { t } = useTranslation();
+
+  if (!currentWorkspaceRole) return null;
+
+  return (
+    <div className="shrink-0">
+      <div className="flex items-center gap-1 py-3 pr-5 pl-4 text-body-md-medium">
+        <IconButton
+          variant="ghost"
+          size="base"
+          icon={ArrowLeft}
+          onClick={() => router.push(`/${currentWorkspace?.slug}/`)}
+        />
+        <p>Workspace settings</p>
+      </div>
+      <div className="mt-1.5 flex items-center justify-between gap-2 px-5 py-0.5">
+        <div className="flex items-center gap-2 truncate">
+          <WorkspaceLogo
+            logo={currentWorkspace?.logo_url}
+            name={currentWorkspace?.name}
+            classNames="shrink-0 size-8 border border-subtle"
+          />
+          <div className="truncate">
+            <p className="truncate text-body-sm-medium">{currentWorkspace?.name}</p>
+            <p className="truncate text-caption-md-regular">{t(ROLE_DETAILS[currentWorkspaceRole].i18n_title)}</p>
+          </div>
+        </div>
+        <div className="shrink-0">
+          <SubscriptionPill />
+        </div>
+      </div>
+    </div>
+  );
+});
diff --git a/apps/web/core/components/settings/workspace/sidebar/index.ts b/apps/web/core/components/settings/workspace/sidebar/index.ts
new file mode 100644
index 000000000..d98033459
--- /dev/null
+++ b/apps/web/core/components/settings/workspace/sidebar/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./root";
diff --git a/apps/web/core/components/settings/workspace/sidebar/item-categories.tsx b/apps/web/core/components/settings/workspace/sidebar/item-categories.tsx
new file mode 100644
index 000000000..824306372
--- /dev/null
+++ b/apps/web/core/components/settings/workspace/sidebar/item-categories.tsx
@@ -0,0 +1,67 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import { usePathname } from "next/navigation";
+import { useParams } from "react-router";
+// plane imports
+import { EUserPermissionsLevel, GROUPED_WORKSPACE_SETTINGS, WORKSPACE_SETTINGS_CATEGORIES } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { joinUrlPath } from "@plane/utils";
+// components
+import { SettingsSidebarItem } from "@/components/settings/sidebar/item";
+// hooks
+import { useUserPermissions } from "@/hooks/store/user";
+// local imports
+import { WORKSPACE_SETTINGS_ICONS } from "./item-icon";
+
+export const WorkspaceSettingsSidebarItemCategories = observer(function WorkspaceSettingsSidebarItemCategories() {
+  // params
+  const { workspaceSlug } = useParams();
+  const pathname = usePathname();
+  // store hooks
+  const { allowPermissions } = useUserPermissions();
+  // translation
+  const { t } = useTranslation();
+
+  return (
+    <div className="mt-3 flex flex-col divide-y divide-subtle px-3">
+      {WORKSPACE_SETTINGS_CATEGORIES.map((category) => {
+        const categoryItems = GROUPED_WORKSPACE_SETTINGS[category];
+        const accessibleItems = categoryItems.filter((item) =>
+          allowPermissions(item.access, EUserPermissionsLevel.WORKSPACE, workspaceSlug)
+        );
+
+        if (accessibleItems.length === 0) return null;
+
+        return (
+          <div key={category} className="shrink-0 py-3 first:pt-0 last:pb-0">
+            <div className="p-2 text-caption-md-medium text-tertiary capitalize">{t(category)}</div>
+            <div className="flex flex-col">
+              {accessibleItems.map((item) => {
+                const isItemActive =
+                  item.href === "/settings"
+                    ? pathname === `/${workspaceSlug}${item.href}/`
+                    : new RegExp(`^/${workspaceSlug}${item.href}/`).test(pathname);
+
+                return (
+                  <SettingsSidebarItem
+                    key={item.key}
+                    as="link"
+                    href={joinUrlPath(workspaceSlug ?? "", item.href)}
+                    isActive={isItemActive}
+                    icon={WORKSPACE_SETTINGS_ICONS[item.key]}
+                    label={t(item.i18n_label)}
+                  />
+                );
+              })}
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+});
diff --git a/apps/web/core/components/settings/workspace/sidebar/item-icon.tsx b/apps/web/core/components/settings/workspace/sidebar/item-icon.tsx
new file mode 100644
index 000000000..b89c11fd2
--- /dev/null
+++ b/apps/web/core/components/settings/workspace/sidebar/item-icon.tsx
@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { LucideIcon } from "lucide-react";
+import { ArrowUpToLine, Building, CreditCard, Users, Webhook } from "lucide-react";
+// plane imports
+import type { ISvgIcons } from "@plane/propel/icons";
+import type { TWorkspaceSettingsTabs } from "@plane/types";
+
+export const WORKSPACE_SETTINGS_ICONS: Record<TWorkspaceSettingsTabs, LucideIcon | React.FC<ISvgIcons>> = {
+  general: Building,
+  members: Users,
+  export: ArrowUpToLine,
+  "billing-and-plans": CreditCard,
+  webhooks: Webhook,
+};
diff --git a/apps/web/core/components/settings/workspace/sidebar/root.tsx b/apps/web/core/components/settings/workspace/sidebar/root.tsx
new file mode 100644
index 000000000..e6d8b637c
--- /dev/null
+++ b/apps/web/core/components/settings/workspace/sidebar/root.tsx
@@ -0,0 +1,35 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// plane imports
+import { ScrollArea } from "@plane/propel/scrollarea";
+import { cn } from "@plane/utils";
+// local imports
+import { WorkspaceSettingsSidebarHeader } from "./header";
+import { WorkspaceSettingsSidebarItemCategories } from "./item-categories";
+
+type Props = {
+  className?: string;
+};
+
+export function WorkspaceSettingsSidebarRoot(props: Props) {
+  const { className } = props;
+
+  return (
+    <ScrollArea
+      scrollType="hover"
+      orientation="vertical"
+      size="sm"
+      rootClassName={cn(
+        "h-full w-[250px] shrink-0 animate-fade-in overflow-y-scroll border-r border-r-subtle bg-surface-1",
+        className
+      )}
+    >
+      <WorkspaceSettingsSidebarHeader />
+      <WorkspaceSettingsSidebarItemCategories />
+    </ScrollArea>
+  );
+}
diff --git a/apps/web/core/components/sidebar/add-button.tsx b/apps/web/core/components/sidebar/add-button.tsx
index 998a127db..6db327e36 100644
--- a/apps/web/core/components/sidebar/add-button.tsx
+++ b/apps/web/core/components/sidebar/add-button.tsx
@@ -1,4 +1,10 @@
-import { cn } from "@plane/utils";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { Button } from "@plane/propel/button";
 
 type Props = React.ComponentProps<"button"> & {
   label: React.ReactNode;
@@ -8,17 +14,15 @@ type Props = React.ComponentProps<"button"> & {
 export function SidebarAddButton(props: Props) {
   const { label, onClick, disabled, ...rest } = props;
   return (
-    <button
-      type="button"
-      className={cn(
-        "flex-grow text-custom-text-300 text-sm font-medium border-[0.5px] border-custom-sidebar-border-300 text-left rounded-md shadow-sm h-8 px-2 flex items-center gap-1.5",
-        !disabled && "hover:bg-custom-sidebar-background-90"
-      )}
+    <Button
+      variant={"secondary"}
+      size={"xl"}
+      className="w-full justify-start"
       onClick={onClick}
       disabled={disabled}
       {...rest}
     >
       {label}
-    </button>
+    </Button>
   );
 }
diff --git a/apps/web/core/components/sidebar/resizable-sidebar.tsx b/apps/web/core/components/sidebar/resizable-sidebar.tsx
index d1fb2e0cc..5db352d72 100644
--- a/apps/web/core/components/sidebar/resizable-sidebar.tsx
+++ b/apps/web/core/components/sidebar/resizable-sidebar.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { Dispatch, ReactElement, SetStateAction } from "react";
 import React, { useCallback, useEffect, useState, useRef } from "react";
 // helpers
@@ -172,10 +178,11 @@ export function ResizableSidebar({
     <>
       {/* Main Sidebar */}
       <div
+        id="main-sidebar"
         className={cn(
-          "h-full z-20 bg-custom-background-100 border-r border-custom-sidebar-border-200",
+          "z-20 h-full border-r border-subtle bg-surface-1",
           !isResizing && "transition-all duration-300 ease-in-out",
-          isCollapsed ? "translate-x-[-100%] opacity-0 w-0" : "translate-x-0 opacity-100",
+          isCollapsed ? "w-0 translate-x-[-100%] opacity-0" : "translate-x-0 opacity-100",
           isMobile && "absolute",
           className
         )}
@@ -186,10 +193,11 @@ export function ResizableSidebar({
         }}
         role="complementary"
         aria-label="Main sidebar"
+        data-prevent-outside-click={isMobile}
       >
         <aside
           className={cn(
-            "group/sidebar h-full w-full bg-custom-sidebar-background-100 overflow-hidden relative flex flex-col pt-3",
+            "group/sidebar relative flex h-full w-full flex-col overflow-hidden bg-surface-1 pt-3",
             isAnyExtendedSidebarExpanded && "rounded-none"
           )}
         >
@@ -198,9 +206,9 @@ export function ResizableSidebar({
           {/* Resize Handle */}
           <div
             className={cn(
-              "transition-all duration-200 cursor-ew-resize absolute h-full w-1 z-[20]",
-              !isResizing && "hover:bg-custom-background-90",
-              isResizing && "w-1.5 bg-custom-background-80",
+              "absolute z-[20] h-full w-1 cursor-ew-resize transition-all duration-200",
+              !isResizing && "hover:bg-surface-2",
+              isResizing && "w-1.5 bg-layer-1",
               "top-0 right-0"
             )}
             // onDoubleClick toggle sidebar
@@ -214,7 +222,7 @@ export function ResizableSidebar({
       {/* Peek View */}
       <div
         className={cn(
-          "absolute left-0 z-20 bg-custom-background-100 shadow-sm h-full",
+          "shadow-sm absolute left-0 z-20 h-full bg-surface-1",
           !isResizing && "transition-all duration-300 ease-in-out",
           isCollapsed && showPeek ? "translate-x-0 opacity-100" : "translate-x-[-100%] opacity-0",
           "pointer-events-none",
@@ -231,8 +239,8 @@ export function ResizableSidebar({
       >
         <aside
           className={cn(
-            "group/sidebar h-full w-full bg-custom-sidebar-background-100 overflow-hidden relative flex flex-col z-20 pt-4",
-            "self-center border-r border-custom-sidebar-border-200 rounded-md rounded-tl-none rounded-bl-none",
+            "group/sidebar relative z-20 flex h-full w-full flex-col overflow-hidden bg-surface-1 pt-4",
+            "self-center rounded-md rounded-tl-none rounded-bl-none border-r border-subtle",
             isAnyExtendedSidebarExpanded && "rounded-none"
           )}
         >
@@ -240,9 +248,9 @@ export function ResizableSidebar({
           {/* Resize Handle */}
           <div
             className={cn(
-              "transition-all duration-200 cursor-ew-resize absolute h-full w-1 z-[20]",
-              !isResizing && "hover:bg-custom-background-90",
-              isResizing && "bg-custom-background-80",
+              "absolute z-[20] h-full w-1 cursor-ew-resize transition-all duration-200",
+              !isResizing && "hover:bg-surface-2",
+              isResizing && "bg-layer-1",
               "top-0 right-0"
             )}
             // onDoubleClick toggle sidebar
diff --git a/apps/web/core/components/sidebar/search-button.tsx b/apps/web/core/components/sidebar/search-button.tsx
index 064b6c545..397507a2b 100644
--- a/apps/web/core/components/sidebar/search-button.tsx
+++ b/apps/web/core/components/sidebar/search-button.tsx
@@ -1,4 +1,10 @@
-import { Search } from "lucide-react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { SearchIcon } from "@plane/propel/icons";
 import { cn } from "@plane/utils";
 
 type Props = {
@@ -10,15 +16,15 @@ export function SidebarSearchButton(props: Props) {
   return (
     <div
       className={cn(
-        "flex-shrink-0 size-8 aspect-square grid place-items-center rounded-md shadow-sm hover:bg-custom-sidebar-background-90 outline-none border-[0.5px] border-custom-sidebar-border-300",
+        "shadow-sm grid aspect-square size-8 flex-shrink-0 place-items-center rounded-md border-[0.5px] border-strong outline-none hover:bg-surface-2",
         {
-          "bg-custom-primary-100/10 hover:bg-custom-primary-100/10 border-custom-primary-200": isActive,
+          "border-accent-strong-200 bg-accent-primary/10 hover:bg-accent-primary/10": isActive,
         }
       )}
     >
-      <Search
-        className={cn("size-4 text-custom-sidebar-text-300", {
-          "text-custom-primary-200": isActive,
+      <SearchIcon
+        className={cn("size-4 text-tertiary", {
+          "text-accent-secondary": isActive,
         })}
       />
     </div>
diff --git a/apps/web/core/components/sidebar/sidebar-item.tsx b/apps/web/core/components/sidebar/sidebar-item.tsx
index fcc3cc96d..fa3cfef1b 100644
--- a/apps/web/core/components/sidebar/sidebar-item.tsx
+++ b/apps/web/core/components/sidebar/sidebar-item.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import Link from "next/link";
 import { cn } from "@plane/utils";
 
@@ -48,13 +54,13 @@ interface AppSidebarButtonItemProps {
 // ============================================================================
 
 const styles = {
-  base: "group flex flex-col gap-0.5 items-center justify-center text-custom-text-300",
-  icon: "flex items-center justify-center gap-2 size-8 rounded-md text-custom-text-300",
-  iconActive: "bg-custom-background-80 text-custom-text-200",
-  iconInactive: "group-hover:text-custom-text-200 group-hover:bg-custom-background-80",
-  label: "text-xs font-medium",
-  labelActive: "text-custom-text-200",
-  labelInactive: "group-hover:text-custom-text-200 text-custom-text-300",
+  base: "group flex flex-col gap-0.5 items-center justify-center text-tertiary",
+  icon: "flex items-center justify-center gap-2 size-8 rounded-md text-tertiary",
+  iconActive: "bg-layer-transparent-selected text-secondary !text-icon-primary",
+  iconInactive: "group-hover:text-icon-secondary group-hover:bg-layer-transparent-hover !text-icon-tertiary",
+  label: "text-11 font-medium",
+  labelActive: "text-secondary",
+  labelInactive: "group-hover:text-secondary text-tertiary",
 } as const;
 
 // ============================================================================
diff --git a/apps/web/core/components/sidebar/sidebar-navigation.tsx b/apps/web/core/components/sidebar/sidebar-navigation.tsx
index 856aaf870..488151636 100644
--- a/apps/web/core/components/sidebar/sidebar-navigation.tsx
+++ b/apps/web/core/components/sidebar/sidebar-navigation.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { cn } from "@plane/utils";
 
 type TSidebarNavItem = {
@@ -11,11 +17,10 @@ export function SidebarNavItem(props: TSidebarNavItem) {
   return (
     <div
       className={cn(
-        "cursor-pointer relative group w-full flex items-center justify-between gap-1.5 rounded px-2 py-1 outline-none",
+        "group relative flex w-full cursor-pointer items-center justify-between gap-1.5 rounded-md px-2 py-1 outline-none",
         {
-          "text-custom-text-200 bg-custom-background-80/75": isActive,
-          "text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-90 active:bg-custom-sidebar-background-90":
-            !isActive,
+          "!bg-layer-transparent-active text-primary": isActive,
+          "text-secondary hover:bg-layer-transparent-hover active:bg-layer-transparent-active": !isActive,
         },
         className
       )}
diff --git a/apps/web/core/components/sidebar/sidebar-toggle-button.tsx b/apps/web/core/components/sidebar/sidebar-toggle-button.tsx
index bcfb12706..65452d548 100644
--- a/apps/web/core/components/sidebar/sidebar-toggle-button.tsx
+++ b/apps/web/core/components/sidebar/sidebar-toggle-button.tsx
@@ -1,8 +1,15 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import { PanelLeft } from "lucide-react";
 // hooks
 import { useAppTheme } from "@/hooks/store/use-app-theme";
 import { isSidebarToggleVisible } from "@/plane-web/components/desktop";
+import { IconButton } from "@plane/propel/icon-button";
 
 export const AppSidebarToggleButton = observer(function AppSidebarToggleButton() {
   // store hooks
@@ -10,14 +17,14 @@ export const AppSidebarToggleButton = observer(function AppSidebarToggleButton()
 
   if (!isSidebarToggleVisible()) return null;
   return (
-    <button
-      className="flex items-center justify-center size-6 rounded-md text-custom-text-400 hover:text-custom-primary-100 hover:bg-custom-background-90"
+    <IconButton
+      size="base"
+      variant="ghost"
+      icon={PanelLeft}
       onClick={() => {
         if (sidebarPeek) toggleSidebarPeek(false);
         toggleSidebar();
       }}
-    >
-      <PanelLeft className="size-4" />
-    </button>
+    />
   );
 });
diff --git a/apps/web/core/components/sidebar/sidebar-wrapper.tsx b/apps/web/core/components/sidebar/sidebar-wrapper.tsx
index a80155986..1087d6459 100644
--- a/apps/web/core/components/sidebar/sidebar-wrapper.tsx
+++ b/apps/web/core/components/sidebar/sidebar-wrapper.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useEffect, useRef, useState } from "react";
 import { observer } from "mobx-react";
 // plane helpers
@@ -12,6 +18,7 @@ import useSize from "@/hooks/use-window-size";
 // plane web components
 import { WorkspaceEditionBadge } from "@/plane-web/components/workspace/edition-badge";
 import { AppSidebarToggleButton } from "./sidebar-toggle-button";
+import { IconButton } from "@plane/propel/icon-button";
 
 type TSidebarWrapperProps = {
   title: string;
@@ -43,24 +50,23 @@ export const SidebarWrapper = observer(function SidebarWrapper(props: TSidebarWr
   return (
     <>
       <CustomizeNavigationDialog isOpen={isCustomizeNavDialogOpen} onClose={() => setIsCustomizeNavDialogOpen(false)} />
-      <div ref={ref} className="flex flex-col h-full w-full">
+      <div ref={ref} className="flex h-full w-full animate-fade-in flex-col">
         <div className="flex flex-col gap-3 px-3">
           {/* Workspace switcher and settings */}
 
           <div className="flex items-center justify-between gap-2 px-2">
-            <span className="text-md text-custom-text-200 font-medium pt-1">{title}</span>
-            {title === "Projects" && (
-              <div className="flex items-center gap-2">
-                <button
-                  type="button"
-                  className="flex items-center justify-center size-6 rounded-md text-custom-text-400 hover:text-custom-primary-100 hover:bg-custom-background-90"
+            <span className="pt-1 text-16 font-medium text-primary">{title}</span>
+            <div className="flex items-center gap-2">
+              {title === "Projects" && (
+                <IconButton
+                  size="base"
+                  variant="ghost"
+                  icon={PreferencesIcon}
                   onClick={() => setIsCustomizeNavDialogOpen(true)}
-                >
-                  <PreferencesIcon className="size-4" />
-                </button>
-                <AppSidebarToggleButton />
-              </div>
-            )}
+                />
+              )}
+              <AppSidebarToggleButton />
+            </div>
           </div>
           {/* Quick actions */}
           {quickActions}
@@ -76,7 +82,7 @@ export const SidebarWrapper = observer(function SidebarWrapper(props: TSidebarWr
           {children}
         </ScrollArea>
         {/* Help Section */}
-        <div className="flex items-center justify-between p-3 border-t border-custom-border-200 bg-custom-sidebar-background-100 h-12">
+        <div className="flex h-12 items-center justify-between border-t border-subtle bg-surface-1 p-3">
           <WorkspaceEditionBadge />
           {/* TODO: To be checked if we need this */}
           {/* <div className="flex items-center gap-2">
diff --git a/apps/web/core/components/stickies/action-bar.tsx b/apps/web/core/components/stickies/action-bar.tsx
index 7faeb9368..105922c20 100644
--- a/apps/web/core/components/stickies/action-bar.tsx
+++ b/apps/web/core/components/stickies/action-bar.tsx
@@ -1,12 +1,18 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useRef, useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 import useSWR from "swr";
-import { Plus, StickyNote as StickyIcon } from "lucide-react";
+import { StickyNote as StickyIcon } from "lucide-react";
 // plane hooks
 import { useOutsideClickDetector } from "@plane/hooks";
 // plane ui
-import { RecentStickyIcon, StickyNoteIcon, CloseIcon } from "@plane/propel/icons";
+import { RecentStickyIcon, StickyNoteIcon, PlusIcon, CloseIcon } from "@plane/propel/icons";
 import { Tooltip } from "@plane/propel/tooltip";
 // plane utils
 import { cn } from "@plane/utils";
@@ -50,22 +56,22 @@ export const StickyActionBar = observer(function StickyActionBar() {
   return (
     <div
       ref={ref}
-      className="sticky-action-bar__item flex flex-col bg-custom-background-90 rounded-full p-[2px] border-2 border-custom-primary-100/10 overflow-hidden"
+      className="sticky-action-bar__item flex flex-col overflow-hidden rounded-full border-2 border-accent-strong/10 bg-surface-2 p-[2px]"
     >
       <div
-        className={`flex flex-col gap-2 transition-all duration-300 ease-in-out origin-bottom ${isExpanded ? "scale-y-100 opacity-100 mb-2 " : "scale-y-0 opacity-0 h-0"}`}
+        className={`flex origin-bottom flex-col gap-2 transition-all duration-300 ease-in-out ${isExpanded ? "mb-2 scale-y-100 opacity-100 " : "h-0 scale-y-0 opacity-0"}`}
       >
         <Tooltip tooltipContent="All stickies" isMobile={false} position="left">
           <button
-            className="btn btn--icon rounded-full w-10 h-10 flex items-center justify-center shadow-sm bg-custom-background-100"
+            className="btn btn--icon shadow-sm flex h-10 w-10 items-center justify-center rounded-full bg-surface-1"
             onClick={() => toggleAllStickiesModal(true)}
           >
-            <RecentStickyIcon className="size-5 rotate-90 text-custom-text-350" />
+            <RecentStickyIcon className="size-5 rotate-90 text-tertiary" />
           </button>
         </Tooltip>
         {recentStickyId && (
           <Tooltip
-            className="scale-75 -mr-30 translate-x-10"
+            className="-mr-30 translate-x-10 scale-75"
             tooltipContent={
               <div className="-m-2 max-h-[150px]">
                 <StickyNote
@@ -86,7 +92,7 @@ export const StickyActionBar = observer(function StickyActionBar() {
             disabled={showRecentSticky}
           >
             <button
-              className="btn btn--icon rounded-full w-10 h-10 flex items-center justify-center shadow-sm bg-custom-background-100"
+              className="btn btn--icon shadow-sm flex h-10 w-10 items-center justify-center rounded-full bg-surface-1"
               onClick={() => setShowRecentSticky(true)}
               style={{ color: recentStickyBackgroundColor }}
             >
@@ -96,34 +102,34 @@ export const StickyActionBar = observer(function StickyActionBar() {
         )}
         <Tooltip tooltipContent="Add sticky" isMobile={false} position="left">
           <button
-            className="btn btn--icon rounded-full w-10 h-10 flex items-center justify-center shadow-sm bg-custom-background-100"
+            className="btn btn--icon shadow-sm flex h-10 w-10 items-center justify-center rounded-full bg-surface-1"
             onClick={() => {
               updateActiveStickyId("");
               toggleShowNewSticky(true);
               setNewSticky(true);
             }}
           >
-            <Plus className="size-5 rotate-90 text-custom-text-350" />
+            <PlusIcon className="size-5 rotate-90 text-tertiary" />
           </button>
         </Tooltip>
       </div>
 
       <button
-        className={`btn btn--icon rounded-full w-10 h-10 flex items-center justify-center shadow-sm bg-custom-background-100 transition-transform duration-300 ${isExpanded ? "rotate-180" : ""}`}
+        className={`btn btn--icon shadow-sm flex h-10 w-10 items-center justify-center rounded-full bg-surface-1 transition-transform duration-300 ${isExpanded ? "rotate-180" : ""}`}
         onClick={() => setIsExpanded(!isExpanded)}
       >
         {isExpanded ? (
-          <CloseIcon className="size-5 text-custom-text-350" />
+          <CloseIcon className="size-5 text-tertiary" />
         ) : (
-          <StickyIcon className="size-5 rotate-90 text-custom-text-350" />
+          <StickyIcon className="size-5 rotate-90 text-tertiary" />
         )}
       </button>
 
       <div
         className={cn(
-          "absolute bottom-16 right-0 z-[20]",
+          "absolute right-0 bottom-16 z-[20]",
           "transform transition-all duration-300 ease-in-out",
-          newSticky || showRecentSticky ? "translate-y-[0%] min-h-[300px]" : "translate-y-[100%] h-0"
+          newSticky || showRecentSticky ? "min-h-[300px] translate-y-[0%]" : "h-0 translate-y-[100%]"
         )}
       >
         {(newSticky || (showRecentSticky && recentStickyId)) && (
diff --git a/apps/web/core/components/stickies/delete-modal.tsx b/apps/web/core/components/stickies/delete-modal.tsx
index a29d16eea..e26c0ebd0 100644
--- a/apps/web/core/components/stickies/delete-modal.tsx
+++ b/apps/web/core/components/stickies/delete-modal.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useState } from "react";
 import { observer } from "mobx-react";
 // ui
diff --git a/apps/web/core/components/stickies/layout/stickies-infinite.tsx b/apps/web/core/components/stickies/layout/stickies-infinite.tsx
index 2a9fd0917..ea7029af0 100644
--- a/apps/web/core/components/stickies/layout/stickies-infinite.tsx
+++ b/apps/web/core/components/stickies/layout/stickies-infinite.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useRef, useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
@@ -44,12 +50,12 @@ export const StickiesInfinite = observer(function StickiesInfinite() {
           hasNextPage &&
           workspaceStickies?.length >= STICKIES_PER_PAGE && (
             <div
-              className={cn("flex min-h-[300px] box-border p-2 w-full")}
+              className={cn("box-border flex min-h-[300px] w-full p-2")}
               ref={setElementRef}
               id="intersection-element"
             >
-              <div className="flex w-full rounded min-h-[300px]">
-                <Loader className="w-full h-full">
+              <div className="flex min-h-[300px] w-full rounded-sm">
+                <Loader className="h-full w-full">
                   <Loader.Item height="100%" width="100%" />
                 </Loader>
               </div>
diff --git a/apps/web/core/components/stickies/layout/stickies-list.tsx b/apps/web/core/components/stickies/layout/stickies-list.tsx
index aa77dcec7..6a9e78ea2 100644
--- a/apps/web/core/components/stickies/layout/stickies-list.tsx
+++ b/apps/web/core/components/stickies/layout/stickies-list.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useEffect, useRef, useState } from "react";
 import type {
   DropTargetRecord,
@@ -8,10 +14,11 @@ import { observer } from "mobx-react";
 import { usePathname } from "next/navigation";
 import { useTheme } from "next-themes";
 import Masonry from "react-masonry-component";
-import { Plus } from "lucide-react";
+
 // plane imports
 import { EUserPermissionsLevel } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
+import { PlusIcon } from "@plane/propel/icons";
 import { EUserWorkspaceRoles } from "@plane/types";
 // assets
 import darkStickiesAsset from "@/app/assets/empty-state/stickies/stickies-dark.webp?url";
@@ -107,7 +114,7 @@ export const StickiesList = observer(function StickiesList(props: TProps) {
 
   if (loader === "loaded" && workspaceStickyIds.length === 0) {
     return (
-      <div className="size-full grid place-items-center">
+      <div className="grid size-full place-items-center">
         {isStickiesPage ? (
           <>
             {searchQuery ? (
@@ -122,7 +129,7 @@ export const StickiesList = observer(function StickiesList(props: TProps) {
                 description={t("stickies.empty_state.general.description")}
                 assetPath={stickiesResolvedPath}
                 primaryButton={{
-                  prependIcon: <Plus className="size-4" />,
+                  prependIcon: <PlusIcon className="size-4" />,
                   text: t("stickies.empty_state.general.primary_button.text"),
                   onClick: () => {
                     toggleShowNewSticky(true);
diff --git a/apps/web/core/components/stickies/layout/stickies-loader.tsx b/apps/web/core/components/stickies/layout/stickies-loader.tsx
index 394133643..f1666fc37 100644
--- a/apps/web/core/components/stickies/layout/stickies-loader.tsx
+++ b/apps/web/core/components/stickies/layout/stickies-loader.tsx
@@ -1,11 +1,17 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // plane ui
 import { Loader } from "@plane/ui";
 
 export function StickiesLoader() {
   return (
-    <div className="overflow-scroll pb-2 grid grid-cols-4 gap-4">
+    <div className="grid grid-cols-4 gap-4 overflow-scroll pb-2">
       {Array.from({ length: 4 }).map((_, index) => (
-        <Loader key={index} className="space-y-5 border border-custom-border-200 p-3 rounded">
+        <Loader key={index} className="space-y-5 rounded-sm border border-subtle p-3">
           <div className="space-y-2">
             <Loader.Item height="20px" />
             <Loader.Item height="15px" width="75%" />
diff --git a/apps/web/core/components/stickies/layout/stickies-truncated.tsx b/apps/web/core/components/stickies/layout/stickies-truncated.tsx
index 217adb5a6..770709f8e 100644
--- a/apps/web/core/components/stickies/layout/stickies-truncated.tsx
+++ b/apps/web/core/components/stickies/layout/stickies-truncated.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import Link from "next/link";
 import { useParams } from "next/navigation";
@@ -38,7 +44,7 @@ export const StickiesTruncated = observer(function StickiesTruncated(props: Stic
         <Link
           href={`/${workspaceSlug}/stickies`}
           className={cn(
-            "gap-1 w-full text-custom-primary-100 text-sm font-medium transition-opacity duration-300 bg-custom-background-90/20"
+            "w-full gap-1 bg-surface-2/20 text-13 font-medium text-accent-primary transition-opacity duration-300"
           )}
           onClick={handleClose}
         >
diff --git a/apps/web/core/components/stickies/layout/sticky-dnd-wrapper.tsx b/apps/web/core/components/stickies/layout/sticky-dnd-wrapper.tsx
index 8faaf70d4..82e201401 100644
--- a/apps/web/core/components/stickies/layout/sticky-dnd-wrapper.tsx
+++ b/apps/web/core/components/stickies/layout/sticky-dnd-wrapper.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useEffect, useRef, useState } from "react";
 import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
 import type {
@@ -116,7 +122,7 @@ export const StickyDNDWrapper = observer(function StickyDNDWrapper(props: Props)
 
   return (
     <div
-      className="flex flex-col box-border p-[8px]"
+      className="box-border flex flex-col p-[8px]"
       style={{
         width: itemWidth,
       }}
diff --git a/apps/web/core/components/stickies/layout/sticky.helpers.ts b/apps/web/core/components/stickies/layout/sticky.helpers.ts
index 080788556..485544513 100644
--- a/apps/web/core/components/stickies/layout/sticky.helpers.ts
+++ b/apps/web/core/components/stickies/layout/sticky.helpers.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { extractInstruction } from "@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item";
 import type { InstructionType, IPragmaticPayloadLocation, TDropTarget } from "@plane/types";
 
diff --git a/apps/web/core/components/stickies/modal/index.tsx b/apps/web/core/components/stickies/modal/index.tsx
index dbc824211..5dff0bb50 100644
--- a/apps/web/core/components/stickies/modal/index.tsx
+++ b/apps/web/core/components/stickies/modal/index.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { EModalWidth, ModalCore } from "@plane/ui";
 import { Stickies } from "./stickies";
 
diff --git a/apps/web/core/components/stickies/modal/search.tsx b/apps/web/core/components/stickies/modal/search.tsx
index a9796d6d3..1964a7c3b 100644
--- a/apps/web/core/components/stickies/modal/search.tsx
+++ b/apps/web/core/components/stickies/modal/search.tsx
@@ -1,16 +1,21 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useCallback, useRef, useState } from "react";
 import { debounce } from "lodash-es";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
-import { Search } from "lucide-react";
 // plane hooks
 import { useOutsideClickDetector } from "@plane/hooks";
 // helpers
 import { useTranslation } from "@plane/i18n";
-import { CloseIcon } from "@plane/propel/icons";
+import { SearchIcon, CloseIcon } from "@plane/propel/icons";
 import { cn } from "@plane/utils";
 import { useSticky } from "@/hooks/use-stickies";
+import { IconButton } from "@plane/propel/icon-button";
 
 export const StickySearch = observer(function StickySearch() {
   // router
@@ -48,31 +53,31 @@ export const StickySearch = observer(function StickySearch() {
   );
 
   return (
-    <div className="flex items-center mr-2 my-auto">
+    <div className="my-auto mr-2 flex items-center">
       {!isSearchOpen && (
-        <button
-          type="button"
-          className="-mr-1 p-1 hover:bg-custom-background-80 rounded text-custom-text-400 grid place-items-center"
+        <IconButton
+          variant="ghost"
+          size="lg"
+          className="-mr-2"
+          icon={SearchIcon}
           onClick={() => {
             setIsSearchOpen(true);
             inputRef.current?.focus();
           }}
-        >
-          <Search className=" size-4 " />
-        </button>
+        />
       )}
       <div
         className={cn(
-          "ml-auto flex items-center justify-start gap-1 rounded-md border border-transparent bg-custom-background-100 text-custom-text-400 w-0 transition-[width] ease-linear overflow-hidden opacity-0",
+          "ml-auto flex w-0 items-center justify-start gap-1 overflow-hidden rounded-md border border-transparent text-placeholder opacity-0 transition-[width] ease-linear",
           {
-            "w-30 md:w-64 px-2.5 py-1.5 border-custom-border-200 opacity-100": isSearchOpen,
+            "w-30 border-subtle px-2.5 py-1.5 opacity-100 md:w-64": isSearchOpen,
           }
         )}
       >
-        <Search className="h-3.5 w-3.5" />
+        <SearchIcon className="size-3.5 shrink-0" />
         <input
           ref={inputRef}
-          className="w-full max-w-[234px] border-none bg-transparent text-sm text-custom-text-100 placeholder:text-custom-text-400 focus:outline-none"
+          className="w-full max-w-[234px] border-none bg-transparent text-13 text-primary placeholder:text-placeholder focus:outline-none"
           placeholder={t("stickies.search_placeholder")}
           value={searchQuery}
           onChange={(e) => {
diff --git a/apps/web/core/components/stickies/modal/stickies.tsx b/apps/web/core/components/stickies/modal/stickies.tsx
index 93b025f02..95746422e 100644
--- a/apps/web/core/components/stickies/modal/stickies.tsx
+++ b/apps/web/core/components/stickies/modal/stickies.tsx
@@ -1,8 +1,14 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
-import { Plus } from "lucide-react";
+
 // plane ui
-import { RecentStickyIcon, CloseIcon } from "@plane/propel/icons";
+import { RecentStickyIcon, PlusIcon, CloseIcon } from "@plane/propel/icons";
 // hooks
 import { useSticky } from "@/hooks/use-stickies";
 // components
@@ -24,13 +30,13 @@ export const Stickies = observer(function Stickies(props: TProps) {
   const { stickyOperations } = useStickyOperations({ workspaceSlug: workspaceSlug?.toString() });
 
   return (
-    <div className="p-6 pb-0 min-h-[620px]">
+    <div className="min-h-[620px] p-6 pb-0">
       {/* header */}
-      <div className="flex items-center justify-between mb-6">
+      <div className="mb-6 flex items-center justify-between">
         {/* Title */}
-        <div className="text-custom-text-200 flex items-center gap-2">
-          <RecentStickyIcon className="size-5 rotate-90 flex-shrink-0" />
-          <p className="text-xl font-medium">Your stickies</p>
+        <div className="flex items-center gap-2 text-secondary">
+          <RecentStickyIcon className="size-5 flex-shrink-0 rotate-90" />
+          <p className="text-18 font-medium">Your stickies</p>
         </div>
         {/* actions */}
         <div className="flex gap-2">
@@ -40,14 +46,14 @@ export const Stickies = observer(function Stickies(props: TProps) {
               toggleShowNewSticky(true);
               stickyOperations.create();
             }}
-            className="flex gap-1 text-sm font-medium text-custom-primary-100 my-auto"
+            className="my-auto flex gap-1 text-13 font-medium text-accent-primary"
             disabled={creatingSticky}
           >
-            <Plus className="size-4 my-auto" /> <span>Add sticky</span>
+            <PlusIcon className="my-auto size-4" /> <span>Add sticky</span>
             {creatingSticky && (
-              <div className="flex items-center justify-center ml-2">
+              <div className="ml-2 flex items-center justify-center">
                 <div
-                  className={`w-4 h-4 border-2 border-t-transparent rounded-full animate-spin border-custom-primary-100`}
+                  className={`h-4 w-4 animate-spin rounded-full border-2 border-accent-strong border-t-transparent`}
                   role="status"
                   aria-label="loading"
                 />
@@ -58,9 +64,9 @@ export const Stickies = observer(function Stickies(props: TProps) {
             <button
               type="button"
               onClick={handleClose}
-              className="flex-shrink-0 grid place-items-center text-custom-text-300 hover:text-custom-text-100 hover:bg-custom-background-80 rounded p-1 transition-colors my-auto"
+              className="my-auto grid flex-shrink-0 place-items-center rounded-sm p-1 text-tertiary transition-colors hover:bg-layer-1 hover:text-primary"
             >
-              <CloseIcon className="text-custom-text-400 size-4" />
+              <CloseIcon className="size-4 text-placeholder" />
             </button>
           )}
         </div>
diff --git a/apps/web/core/components/stickies/sticky/index.ts b/apps/web/core/components/stickies/sticky/index.ts
index 1efe34c51..d98033459 100644
--- a/apps/web/core/components/stickies/sticky/index.ts
+++ b/apps/web/core/components/stickies/sticky/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./root";
diff --git a/apps/web/core/components/stickies/sticky/inputs.tsx b/apps/web/core/components/stickies/sticky/inputs.tsx
index 3fad50c6b..374f9ca72 100644
--- a/apps/web/core/components/stickies/sticky/inputs.tsx
+++ b/apps/web/core/components/stickies/sticky/inputs.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useCallback, useEffect, useRef } from "react";
 import { usePathname } from "next/navigation";
 import { Controller, useForm } from "react-hook-form";
@@ -80,7 +86,7 @@ export function StickyInput(props: TProps) {
               return "Click to type here";
             }}
             containerClassName={cn(
-              "w-full min-h-[256px] max-h-[540px] overflow-y-scroll vertical-scrollbar scrollbar-sm p-4 text-base",
+              "vertical-scrollbar scrollbar-sm max-h-[540px] min-h-[256px] w-full overflow-y-scroll p-4 text-14",
               {
                 "max-h-[588px]": isStickiesPage,
               }
diff --git a/apps/web/core/components/stickies/sticky/root.tsx b/apps/web/core/components/stickies/sticky/root.tsx
index a9d348737..b2afc84c3 100644
--- a/apps/web/core/components/stickies/sticky/root.tsx
+++ b/apps/web/core/components/stickies/sticky/root.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useCallback, useState } from "react";
 import { debounce } from "lodash-es";
 import { observer } from "mobx-react";
@@ -74,14 +80,14 @@ export const StickyNote = observer(function StickyNote(props: TProps) {
         handleClose={() => setIsDeleteModalOpen(false)}
       />
       <div
-        className={cn("w-full h-fit flex flex-col rounded group/sticky overflow-y-scroll", className)}
+        className={cn("group/sticky flex h-fit w-full flex-col overflow-y-scroll rounded-sm", className)}
         style={{
           backgroundColor,
         }}
       >
         {/* {isStickiesPage && <StickyItemDragHandle isDragging={false} />}{" "} */}
         {onClose && (
-          <button type="button" className="flex-shrink-0 flex justify-end p-2.5" onClick={onClose}>
+          <button type="button" className="flex flex-shrink-0 justify-end p-2.5" onClick={onClose}>
             <Minimize2 className="size-4" />
           </button>
         )}
diff --git a/apps/web/core/components/stickies/sticky/sticky-item-drag-handle.tsx b/apps/web/core/components/stickies/sticky/sticky-item-drag-handle.tsx
index 84dfaf01d..289bb1f4c 100644
--- a/apps/web/core/components/stickies/sticky/sticky-item-drag-handle.tsx
+++ b/apps/web/core/components/stickies/sticky/sticky-item-drag-handle.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 // ui
 import { DragHandle } from "@plane/ui";
@@ -14,7 +20,7 @@ export const StickyItemDragHandle = observer(function StickyItemDragHandle(props
   return (
     <div
       className={cn(
-        "hidden group-hover/sticky:flex absolute top-3 left-1/2 -translate-x-1/2 items-center justify-center rounded text-custom-sidebar-text-400 cursor-grab mr-2 rotate-90",
+        "absolute top-3 left-1/2 mr-2 hidden -translate-x-1/2 rotate-90 cursor-grab items-center justify-center rounded-sm text-placeholder group-hover/sticky:flex",
         {
           "cursor-grabbing": isDragging,
         }
diff --git a/apps/web/core/components/stickies/sticky/use-operations.tsx b/apps/web/core/components/stickies/sticky/use-operations.tsx
index c8be71705..c1177ecb9 100644
--- a/apps/web/core/components/stickies/sticky/use-operations.tsx
+++ b/apps/web/core/components/stickies/sticky/use-operations.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useMemo } from "react";
 // plane types
 import { useTranslation } from "@plane/i18n";
diff --git a/apps/web/core/components/stickies/widget.tsx b/apps/web/core/components/stickies/widget.tsx
index 89fe9b1d3..929c6b69e 100644
--- a/apps/web/core/components/stickies/widget.tsx
+++ b/apps/web/core/components/stickies/widget.tsx
@@ -1,8 +1,15 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
-import { Plus } from "lucide-react";
+
 // plane imports
 import { useTranslation } from "@plane/i18n";
+import { PlusIcon } from "@plane/propel/icons";
 // hooks
 import { useSticky } from "@/hooks/use-stickies";
 // local imports
@@ -23,8 +30,8 @@ export const StickiesWidget = observer(function StickiesWidget() {
 
   return (
     <div>
-      <div className="flex items-center justify-between mb-4">
-        <div className="text-base font-semibold text-custom-text-350">{t("stickies.title")}</div>
+      <div className="mb-4 flex items-center justify-between">
+        <div className="text-14 font-semibold text-tertiary">{t("stickies.title")}</div>
         {/* actions */}
         <div className="flex gap-2">
           <StickySearch />
@@ -33,14 +40,14 @@ export const StickiesWidget = observer(function StickiesWidget() {
               toggleShowNewSticky(true);
               stickyOperations.create();
             }}
-            className="flex gap-1 text-sm font-medium text-custom-primary-100 my-auto"
+            className="my-auto flex gap-1 text-13 font-medium text-accent-primary"
             disabled={creatingSticky}
           >
-            <Plus className="size-4 my-auto" />
+            <PlusIcon className="my-auto size-4" />
             <span>{t("stickies.add")}</span>
             {creatingSticky && (
               <div
-                className="size-4 border-2 border-t-transparent border-custom-primary-100 rounded-full animate-spin"
+                className="size-4 animate-spin rounded-full border-2 border-accent-strong border-t-transparent"
                 role="status"
                 aria-label="loading"
               />
diff --git a/apps/web/core/components/ui/empty-space.tsx b/apps/web/core/components/ui/empty-space.tsx
index 83574c9bc..dabb72c7c 100644
--- a/apps/web/core/components/ui/empty-space.tsx
+++ b/apps/web/core/components/ui/empty-space.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // next
 import React from "react";
 import Link from "next/link";
@@ -17,19 +23,19 @@ function EmptySpace({ title, description, children, Icon, link }: EmptySpaceProp
       <div className="max-w-lg">
         {Icon ? (
           <div className="mb-4">
-            <Icon className="h-14 w-14 text-custom-text-200" />
+            <Icon className="h-14 w-14 text-secondary" />
           </div>
         ) : null}
 
-        <h2 className="text-lg font-medium text-custom-text-100">{title}</h2>
-        <div className="mt-1 text-sm text-custom-text-200">{description}</div>
-        <ul role="list" className="mt-6 divide-y divide-custom-border-200 border-b border-t border-custom-border-200">
+        <h2 className="text-16 font-medium text-primary">{title}</h2>
+        <div className="mt-1 text-13 text-secondary">{description}</div>
+        <ul role="list" className="mt-6 divide-y divide-subtle-1 border-t border-b border-subtle">
           {children}
         </ul>
         {link ? (
           <div className="mt-6 flex">
             <Link href={link.href}>
-              <span className="text-sm font-medium text-custom-primary hover:text-custom-primary">
+              <span className="text-13 font-medium text-accent-primary hover:text-accent-primary">
                 {link.text}
                 <span aria-hidden="true"> &rarr;</span>
               </span>
@@ -53,19 +59,16 @@ function EmptySpaceItem({ title, description, Icon, action, href }: EmptySpaceIt
   let spaceItem = (
     <div className={`group relative flex ${description ? "items-start" : "items-center"} space-x-3 py-4`}>
       <div className="flex-shrink-0">
-        <span className="inline-flex h-10 w-10 items-center justify-center rounded-lg bg-custom-primary">
-          <Icon className="h-6 w-6 text-white" aria-hidden="true" />
+        <span className="inline-flex h-10 w-10 items-center justify-center rounded-lg bg-accent-primary">
+          <Icon className="h-6 w-6 text-on-color" aria-hidden="true" />
         </span>
       </div>
-      <div className="min-w-0 flex-1 text-custom-text-200">
-        <div className="text-sm font-medium group-hover:text-custom-text-100">{title}</div>
-        {description ? <div className="text-sm">{description}</div> : null}
+      <div className="min-w-0 flex-1 text-secondary">
+        <div className="text-13 font-medium group-hover:text-primary">{title}</div>
+        {description ? <div className="text-13">{description}</div> : null}
       </div>
       <div className="flex-shrink-0 self-center">
-        <ChevronRightIcon
-          className="h-5 w-5 text-custom-text-200 group-hover:text-custom-text-100"
-          aria-hidden="true"
-        />
+        <ChevronRightIcon className="h-5 w-5 text-secondary group-hover:text-primary" aria-hidden="true" />
       </div>
     </div>
   );
diff --git a/apps/web/core/components/ui/integration-and-import-export-banner.tsx b/apps/web/core/components/ui/integration-and-import-export-banner.tsx
index 216a29ccd..a67c2d6c3 100644
--- a/apps/web/core/components/ui/integration-and-import-export-banner.tsx
+++ b/apps/web/core/components/ui/integration-and-import-export-banner.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { AlertCircle } from "lucide-react";
 
 type Props = {
@@ -7,11 +13,11 @@ type Props = {
 
 export function IntegrationAndImportExportBanner({ bannerName, description }: Props) {
   return (
-    <div className="flex items-start gap-3 border-b border-custom-border-100 py-3.5">
-      <h3 className="text-xl font-medium">{bannerName}</h3>
+    <div className="flex items-start gap-3 border-b border-subtle py-3.5">
+      <h3 className="text-18 font-medium">{bannerName}</h3>
       {description && (
-        <div className="flex items-center gap-3 rounded-[10px] border border-custom-primary/75 bg-custom-primary/5 p-4 text-sm text-custom-text-100">
-          <AlertCircle className="h-6 w-6 text-custom-text-100" />
+        <div className="flex items-center gap-3 rounded-[10px] border border-accent-strong/75 bg-accent-primary/5 p-4 text-13 text-primary">
+          <AlertCircle className="h-6 w-6 text-primary" />
           <p className="leading-5">{description}</p>
         </div>
       )}
diff --git a/apps/web/core/components/ui/labels-list.tsx b/apps/web/core/components/ui/labels-list.tsx
index 81d150756..c3261b246 100644
--- a/apps/web/core/components/ui/labels-list.tsx
+++ b/apps/web/core/components/ui/labels-list.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // ui
 import { Tooltip } from "@plane/propel/tooltip";
 import type { IIssueLabel } from "@plane/types";
@@ -24,8 +30,8 @@ export function IssueLabelsList(props: IssueLabelsListProps) {
             tooltipContent={labels.map((l) => l?.name).join(", ")}
             isMobile={isMobile}
           >
-            <div className="h-full flex items-center gap-1 rounded border-[0.5px] border-custom-border-300 px-2 py-1 text-xs text-custom-text-200">
-              <span className="h-2 w-2 flex-shrink-0 rounded-full bg-custom-primary" />
+            <div className="flex h-full items-center gap-1 rounded-sm border-[0.5px] border-strong px-2 py-1 text-11 text-secondary">
+              <span className="h-2 w-2 flex-shrink-0 rounded-full bg-accent-primary" />
               <span>{labels.length}</span>
               <span> Labels</span>
             </div>
diff --git a/apps/web/core/components/ui/loader/cycle-module-board-loader.tsx b/apps/web/core/components/ui/loader/cycle-module-board-loader.tsx
index 21024f893..808811b7d 100644
--- a/apps/web/core/components/ui/loader/cycle-module-board-loader.tsx
+++ b/apps/web/core/components/ui/loader/cycle-module-board-loader.tsx
@@ -1,38 +1,44 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { range } from "lodash-es";
 
 export function CycleModuleBoardLayoutLoader() {
   return (
     <div className="h-full w-full animate-pulse">
       <div className="flex h-full w-full justify-between">
-        <div className="grid h-full w-full grid-cols-1 gap-6 overflow-y-auto p-8 lg:grid-cols-2 xl:grid-cols-3 3xl:grid-cols-4 auto-rows-max transition-all">
+        <div className="3xl:grid-cols-4 grid h-full w-full auto-rows-max grid-cols-1 gap-6 overflow-y-auto p-8 transition-all lg:grid-cols-2 xl:grid-cols-3">
           {range(5).map((i) => (
             <div
               key={i}
-              className="flex h-44 w-full flex-col justify-between rounded  border border-custom-border-100 bg-custom-background-100 p-4 text-sm"
+              className="flex h-44 w-full flex-col justify-between rounded-sm border border-subtle bg-surface-1 p-4 text-13"
             >
               <div className="flex items-center justify-between">
-                <span className="h-6 w-24 bg-custom-background-80 rounded" />
+                <span className="h-6 w-24 rounded-sm bg-layer-1" />
                 <div className="flex items-center gap-2">
-                  <span className="h-6 w-20 bg-custom-background-80 rounded" />
-                  <span className="h-6 w-6 bg-custom-background-80 rounded" />
+                  <span className="h-6 w-20 rounded-sm bg-layer-1" />
+                  <span className="h-6 w-6 rounded-sm bg-layer-1" />
                 </div>
               </div>
               <div className="flex flex-col gap-3">
                 <div className="flex items-center justify-between">
                   <div className="flex items-center gap-2">
-                    <span className="h-5 w-5 bg-custom-background-80 rounded" />
-                    <span className="h-5 w-20 bg-custom-background-80 rounded" />
+                    <span className="h-5 w-5 rounded-sm bg-layer-1" />
+                    <span className="h-5 w-20 rounded-sm bg-layer-1" />
                   </div>
-                  <span className="h-5 w-5 bg-custom-background-80 rounded-full" />
+                  <span className="h-5 w-5 rounded-full bg-layer-1" />
                 </div>
-                <span className="h-1.5 bg-custom-background-80 rounded" />
+                <span className="h-1.5 rounded-sm bg-layer-1" />
                 <div className="flex items-center justify-between">
                   <div className="flex items-center">
-                    <span className="h-4 w-16 bg-custom-background-80 rounded" />
+                    <span className="h-4 w-16 rounded-sm bg-layer-1" />
                   </div>
                   <div className="flex items-center gap-2">
-                    <span className="h-4 w-4 bg-custom-background-80 rounded" />
-                    <span className="h-4 w-4 bg-custom-background-80 rounded" />
+                    <span className="h-4 w-4 rounded-sm bg-layer-1" />
+                    <span className="h-4 w-4 rounded-sm bg-layer-1" />
                   </div>
                 </div>
               </div>
diff --git a/apps/web/core/components/ui/loader/cycle-module-list-loader.tsx b/apps/web/core/components/ui/loader/cycle-module-list-loader.tsx
index 1f0060e21..e923520c7 100644
--- a/apps/web/core/components/ui/loader/cycle-module-list-loader.tsx
+++ b/apps/web/core/components/ui/loader/cycle-module-list-loader.tsx
@@ -1,29 +1,35 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { range } from "lodash-es";
 
 export function CycleModuleListLayoutLoader() {
   return (
-    <div className="h-full overflow-y-auto animate-pulse">
+    <div className="h-full animate-pulse overflow-y-auto">
       <div className="flex h-full w-full justify-between">
         <div className="flex h-full w-full flex-col overflow-y-auto">
           {range(5).map((i) => (
             <div
               key={i}
-              className="flex w-full items-center justify-between gap-5 border-b border-custom-border-100 flex-col sm:flex-row px-5 py-6"
+              className="flex w-full flex-col items-center justify-between gap-5 border-b border-subtle px-5 py-6 sm:flex-row"
             >
-              <div className="relative flex w-full items-center gap-3 justify-between overflow-hidden">
-                <div className="relative w-full flex items-center gap-3 overflow-hidden">
+              <div className="relative flex w-full items-center justify-between gap-3 overflow-hidden">
+                <div className="relative flex w-full items-center gap-3 overflow-hidden">
                   <div className="flex items-center gap-4 truncate">
-                    <span className="h-10 w-10 bg-custom-background-80 rounded-full" />
-                    <span className="h-5 w-20 bg-custom-background-80 rounded" />
+                    <span className="h-10 w-10 rounded-full bg-layer-1" />
+                    <span className="h-5 w-20 rounded-sm bg-layer-1" />
                   </div>
                 </div>
-                <span className="h-6 w-20 bg-custom-background-80 rounded" />
+                <span className="h-6 w-20 rounded-sm bg-layer-1" />
               </div>
-              <div className="flex w-full sm:w-auto relative overflow-hidden items-center gap-2.5 justify-between sm:justify-end sm:flex-shrink-0 ">
-                <div className="flex-shrink-0 relative flex items-center gap-3">
-                  <span className="h-5 w-5 bg-custom-background-80 rounded" />
-                  <span className="h-5 w-5 bg-custom-background-80 rounded" />
-                  <span className="h-5 w-5 bg-custom-background-80 rounded" />
+              <div className="relative flex w-full items-center justify-between gap-2.5 overflow-hidden sm:w-auto sm:flex-shrink-0 sm:justify-end">
+                <div className="relative flex flex-shrink-0 items-center gap-3">
+                  <span className="h-5 w-5 rounded-sm bg-layer-1" />
+                  <span className="h-5 w-5 rounded-sm bg-layer-1" />
+                  <span className="h-5 w-5 rounded-sm bg-layer-1" />
                 </div>
               </div>
             </div>
diff --git a/apps/web/core/components/ui/loader/layouts/calendar-layout-loader.tsx b/apps/web/core/components/ui/loader/layouts/calendar-layout-loader.tsx
index bd9ead7b4..e7f0f1265 100644
--- a/apps/web/core/components/ui/loader/layouts/calendar-layout-loader.tsx
+++ b/apps/web/core/components/ui/loader/layouts/calendar-layout-loader.tsx
@@ -1,16 +1,22 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { range } from "lodash-es";
 import { getRandomInt } from "../utils";
 
 function CalendarDay() {
   const dataCount = getRandomInt(0, 1);
   const dataBlocks = range(dataCount).map((index) => (
-    <span key={index} className="h-8 w-full bg-custom-background-80 rounded mb-2" />
+    <span key={index} className="mb-2 h-8 w-full rounded-sm bg-layer-1" />
   ));
 
   return (
-    <div className="flex w-full flex-col min-h-[9rem]">
-      <div className="flex items-center justify-end p-2 w-full">
-        <span className="h-6 w-6 bg-custom-background-80 rounded" />
+    <div className="flex min-h-[9rem] w-full flex-col">
+      <div className="flex w-full items-center justify-end p-2">
+        <span className="h-6 w-6 rounded-sm bg-layer-1" />
       </div>
       <div className="flex flex-col gap-2.5 p-2">{dataBlocks}</div>
     </div>
@@ -19,16 +25,16 @@ function CalendarDay() {
 
 export function CalendarLayoutLoader() {
   return (
-    <div className="h-full w-full overflow-y-auto bg-custom-background-100 animate-pulse">
-      <span className="relative grid divide-x-[0.5px] divide-custom-border-200 text-sm font-medium grid-cols-5">
+    <div className="h-full w-full animate-pulse overflow-y-auto bg-surface-1">
+      <span className="relative grid grid-cols-5 divide-x-[0.5px] divide-subtle-1 text-13 font-medium">
         {range(5).map((index) => (
-          <span key={index} className="h-11 w-full bg-custom-background-80" />
+          <span key={index} className="h-11 w-full bg-layer-1" />
         ))}
       </span>
       <div className="h-full w-full overflow-y-auto">
-        <div className="grid h-full w-full grid-cols-1 divide-y-[0.5px] divide-custom-border-200 overflow-y-auto">
+        <div className="grid h-full w-full grid-cols-1 divide-y-[0.5px] divide-subtle-1 overflow-y-auto">
           {range(6).map((index) => (
-            <div key={index} className="grid divide-x-[0.5px] divide-custom-border-200 grid-cols-5">
+            <div key={index} className="grid grid-cols-5 divide-x-[0.5px] divide-subtle-1">
               {range(5).map((index) => (
                 <CalendarDay key={index} />
               ))}
diff --git a/apps/web/core/components/ui/loader/layouts/gantt-layout-loader.tsx b/apps/web/core/components/ui/loader/layouts/gantt-layout-loader.tsx
index 77231aa09..f188ffd30 100644
--- a/apps/web/core/components/ui/loader/layouts/gantt-layout-loader.tsx
+++ b/apps/web/core/components/ui/loader/layouts/gantt-layout-loader.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { range } from "lodash-es";
 import { Row } from "@plane/ui";
 import { BLOCK_HEIGHT } from "@/components/gantt-chart/constants";
@@ -5,55 +11,55 @@ import { getRandomLength } from "../utils";
 
 export function GanttLayoutListItemLoader() {
   return (
-    <div className="flex w-full items-center gap-4 px-6 " style={{ height: `${BLOCK_HEIGHT}px` }}>
-      <div className="px-3 h-6 w-8 bg-custom-background-80 rounded" />
-      <div className={`px-3 h-6 w-${getRandomLength(["32", "52", "72"])} bg-custom-background-80 rounded`} />
+    <div className="flex w-full items-center gap-4 px-6" style={{ height: `${BLOCK_HEIGHT}px` }}>
+      <div className="h-6 w-8 rounded-sm bg-layer-1 px-3" />
+      <div className={`h-6 px-3 w-${getRandomLength(["32", "52", "72"])} rounded-sm bg-layer-1`} />
     </div>
   );
 }
 
 export function GanttLayoutLoader() {
   return (
-    <div className="flex flex-col h-full overflow-x-auto animate-pulse">
-      <div className="min-h-10 w-full border-b border-custom-border-200 ">
-        <span className="h-6 w-12 bg-custom-background-80 rounded" />
+    <div className="flex h-full animate-pulse flex-col overflow-x-auto">
+      <div className="min-h-10 w-full border-b border-subtle">
+        <span className="h-6 w-12 rounded-sm bg-layer-1" />
       </div>
       <div className="flex h-full">
-        <div className="h-full w-[25.5rem] border-r border-custom-border-200">
-          <Row className="flex items-end h-header py-2 border-b border-custom-border-200">
-            <div className="flex items-center justify-between w-full">
-              <span className="h-5 w-14 bg-custom-background-80 rounded" />
-              <span className="h-5 w-16 bg-custom-background-80 rounded" />
+        <div className="h-full w-[25.5rem] border-r border-subtle">
+          <Row className="flex h-header items-end border-b border-subtle py-2">
+            <div className="flex w-full items-center justify-between">
+              <span className="h-5 w-14 rounded-sm bg-layer-1" />
+              <span className="h-5 w-16 rounded-sm bg-layer-1" />
             </div>
           </Row>
-          <Row className="flex flex-col gap-3 h-11 py-4 w-full">
+          <Row className="flex h-11 w-full flex-col gap-3 py-4">
             {range(6).map((index) => (
-              <div key={index} className="flex items-center gap-3  h-11 w-full">
-                <span className="h-6 w-6 bg-custom-background-80 rounded" />
-                <span className={`h-6 w-${getRandomLength(["32", "52", "72"])} bg-custom-background-80 rounded`} />
+              <div key={index} className="flex h-11 w-full items-center gap-3">
+                <span className="h-6 w-6 rounded-sm bg-layer-1" />
+                <span className={`h-6 w-${getRandomLength(["32", "52", "72"])} rounded-sm bg-layer-1`} />
               </div>
             ))}
           </Row>
         </div>
-        <div className="h-full w-full border-r border-custom-border-200">
-          <div className="flex flex-col justify-between gap-2 h-header py-1.5 px-4 border-b border-custom-border-200">
+        <div className="h-full w-full border-r border-subtle">
+          <div className="flex h-header flex-col justify-between gap-2 border-b border-subtle px-4 py-1.5">
             <div className="flex items-center justify-start">
-              <span className="h-5 w-20 bg-custom-background-80 rounded" />
+              <span className="h-5 w-20 rounded-sm bg-layer-1" />
             </div>
-            <div className="flex items-center gap-3 justify-between w-full">
+            <div className="flex w-full items-center justify-between gap-3">
               {range(15).map((index) => (
-                <span key={index} className="h-5 w-10 bg-custom-background-80 rounded" />
+                <span key={index} className="h-5 w-10 rounded-sm bg-layer-1" />
               ))}
             </div>
           </div>
-          <div className="flex flex-col gap-3 h-11 p-4 w-full">
+          <div className="flex h-11 w-full flex-col gap-3 p-4">
             {range(6).map((index) => (
               <div
                 key={index}
-                className={`flex items-center gap-3 h-11 w-full`}
+                className={`flex h-11 w-full items-center gap-3`}
                 style={{ paddingLeft: getRandomLength(["115px", "208px", "260px"]) }}
               >
-                <span className={`h-6 w-40 w-${getRandomLength(["32", "52", "72"])} bg-custom-background-80 rounded`} />
+                <span className={`h-6 w-40 w-${getRandomLength(["32", "52", "72"])} rounded-sm bg-layer-1`} />
               </div>
             ))}
           </div>
diff --git a/apps/web/core/components/ui/loader/layouts/kanban-layout-loader.tsx b/apps/web/core/components/ui/loader/layouts/kanban-layout-loader.tsx
index d72d49163..e20c01c5e 100644
--- a/apps/web/core/components/ui/loader/layouts/kanban-layout-loader.tsx
+++ b/apps/web/core/components/ui/loader/layouts/kanban-layout-loader.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { forwardRef } from "react";
 import { range } from "lodash-es";
 // plane ui
@@ -12,7 +18,7 @@ export const KanbanIssueBlockLoader = forwardRef(function KanbanIssueBlockLoader
   return (
     <span
       ref={ref}
-      className={cn(`block bg-custom-background-80 rounded`, { " animate-pulse": shouldAnimate })}
+      className={cn(`block rounded-sm bg-[var(--illustration-fill-secondary)]`, { "animate-pulse": shouldAnimate })}
       style={{ height: `${cardHeight}px` }}
     />
   );
@@ -32,10 +38,10 @@ export function KanbanColumnLoader({
   return (
     <div className="flex flex-col gap-3">
       {!ignoreHeader && (
-        <div className="flex items-center justify-between h-9 w-80">
-          <div className="flex item-center gap-3">
-            <span className={cn("h-6 w-6 bg-custom-background-80 rounded", { " animate-pulse": shouldAnimate })} />
-            <span className={cn("h-6 w-24 bg-custom-background-80 rounded", { " animate-pulse": shouldAnimate })} />
+        <div className="flex h-9 w-80 items-center justify-between">
+          <div className="item-center flex gap-3">
+            <span className={cn("h-6 w-6 rounded-sm bg-layer-1", { "animate-pulse": shouldAnimate })} />
+            <span className={cn("h-6 w-24 rounded-sm bg-layer-1", { "animate-pulse": shouldAnimate })} />
           </div>
         </div>
       )}
@@ -50,7 +56,7 @@ KanbanIssueBlockLoader.displayName = "KanbanIssueBlockLoader";
 
 export function KanbanLayoutLoader({ cardsInEachColumn = [2, 3, 2, 4, 3] }: { cardsInEachColumn?: number[] }) {
   return (
-    <ContentWrapper className="flex-row gap-5 py-1.5 overflow-x-auto">
+    <ContentWrapper className="flex-row gap-5 overflow-x-auto py-1.5">
       {cardsInEachColumn.map((cardsInColumn, columnIndex) => (
         <KanbanColumnLoader key={columnIndex} cardsInColumn={cardsInColumn} />
       ))}
diff --git a/apps/web/core/components/ui/loader/layouts/list-layout-loader.tsx b/apps/web/core/components/ui/loader/layouts/list-layout-loader.tsx
index c65ffe90c..a68289107 100644
--- a/apps/web/core/components/ui/loader/layouts/list-layout-loader.tsx
+++ b/apps/web/core/components/ui/loader/layouts/list-layout-loader.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { Fragment, forwardRef } from "react";
 import { range } from "lodash-es";
 // plane ui
@@ -17,23 +23,26 @@ export const ListLoaderItemRow = forwardRef(function ListLoaderItemRow(
   return (
     <Row
       ref={ref}
-      className={cn("flex items-center justify-between h-11 py-3 ", {
-        "bg-custom-background-100": renderForPlaceHolder,
-        "border-b border-custom-border-200": !renderForPlaceHolder,
+      className={cn("flex h-11 items-center justify-between py-3", {
+        "bg-surface-1": renderForPlaceHolder,
+        "border-t border-subtle": !renderForPlaceHolder,
       })}
     >
       <div className="flex items-center gap-3">
         <span
-          className={cn("h-5 w-10 bg-custom-background-80 rounded", {
+          className={cn("h-5 w-10 rounded-sm bg-[var(--illustration-fill-tertiary)]", {
             "animate-pulse": shouldAnimate,
-            "bg-custom-background-90": renderForPlaceHolder,
+            "bg-surface-2": renderForPlaceHolder,
           })}
         />
         <span
-          className={cn(`h-5 w-${getRandomLength(["32", "52", "72"])} bg-custom-background-80 rounded`, {
-            "animate-pulse": shouldAnimate,
-            "bg-custom-background-90": renderForPlaceHolder,
-          })}
+          className={cn(
+            `h-5 w-${getRandomLength(["32", "52", "72"])} rounded-sm bg-[var(--illustration-fill-tertiary)]`,
+            {
+              "animate-pulse": shouldAnimate,
+              "bg-surface-2": renderForPlaceHolder,
+            }
+          )}
         />
       </div>
       <div className="flex items-center gap-2">
@@ -42,16 +51,16 @@ export const ListLoaderItemRow = forwardRef(function ListLoaderItemRow(
             {getRandomInt(1, 2) % 2 === 0 ? (
               <span
                 key={index}
-                className={cn("h-5 w-5 bg-custom-background-80 rounded", {
+                className={cn("h-5 w-5 rounded-sm bg-[var(--illustration-fill-tertiary)]", {
                   "animate-pulse": shouldAnimate,
-                  "bg-custom-background-90": renderForPlaceHolder,
+                  "bg-surface-2": renderForPlaceHolder,
                 })}
               />
             ) : (
               <span
-                className={cn("h-5 w-16 bg-custom-background-80 rounded", {
+                className={cn("h-5 w-16 rounded-sm bg-[var(--illustration-fill-tertiary)]", {
                   "animate-pulse": shouldAnimate,
-                  "bg-custom-background-90": renderForPlaceHolder,
+                  "bg-surface-2": renderForPlaceHolder,
                 })}
               />
             )}
@@ -67,10 +76,10 @@ ListLoaderItemRow.displayName = "ListLoaderItemRow";
 function ListSection({ itemCount }: { itemCount: number }) {
   return (
     <div className="flex flex-shrink-0 flex-col">
-      <Row className="sticky top-0 z-[2] w-full flex-shrink-0 border-b border-custom-border-200 bg-custom-background-90 py-1">
-        <div className="flex items-center gap-2 py-1.5 w-full">
-          <span className="h-6 w-6 bg-custom-background-80 rounded animate-pulse" />
-          <span className="h-6 w-24 bg-custom-background-80 rounded animate-pulse" />
+      <Row className="sticky top-0 z-[2] w-full flex-shrink-0 border-b border-subtle bg-surface-2 py-1">
+        <div className="flex w-full items-center gap-2 py-1.5">
+          <span className="h-6 w-6 animate-pulse rounded-sm bg-layer-1" />
+          <span className="h-6 w-24 animate-pulse rounded-sm bg-layer-1" />
         </div>
       </Row>
       <div className="relative h-full w-full">
diff --git a/apps/web/core/components/ui/loader/layouts/members-layout-loader.tsx b/apps/web/core/components/ui/loader/layouts/members-layout-loader.tsx
index 02ca1910e..34b4e6dba 100644
--- a/apps/web/core/components/ui/loader/layouts/members-layout-loader.tsx
+++ b/apps/web/core/components/ui/loader/layouts/members-layout-loader.tsx
@@ -1,14 +1,20 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { range } from "lodash-es";
 export function MembersLayoutLoader() {
   return (
-    <div className="flex gap-5 py-1.5 overflow-x-auto">
+    <div className="flex gap-5 overflow-x-auto py-1.5">
       {range(5).map((columnIndex) => (
         <div key={columnIndex} className="flex flex-col gap-3">
-          <div className={`flex items-center justify-between h-9 ${columnIndex === 0 ? "w-80" : "w-36"}`}>
-            <span className="h-6 w-24 bg-custom-background-80 rounded animate-pulse" />
+          <div className={`flex h-9 items-center justify-between ${columnIndex === 0 ? "w-80" : "w-36"}`}>
+            <span className="h-6 w-24 animate-pulse rounded-sm bg-layer-1" />
           </div>
           {range(2).map((cardIndex) => (
-            <span className="h-8 w-full bg-custom-background-80 rounded animate-pulse" key={cardIndex} />
+            <span className="h-8 w-full animate-pulse rounded-sm bg-layer-1" key={cardIndex} />
           ))}
         </div>
       ))}
diff --git a/apps/web/core/components/ui/loader/layouts/project-inbox/inbox-layout-loader.tsx b/apps/web/core/components/ui/loader/layouts/project-inbox/inbox-layout-loader.tsx
index 265f674f2..41b09d13d 100644
--- a/apps/web/core/components/ui/loader/layouts/project-inbox/inbox-layout-loader.tsx
+++ b/apps/web/core/components/ui/loader/layouts/project-inbox/inbox-layout-loader.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 // ui
 import { Loader } from "@plane/ui";
@@ -5,12 +11,12 @@ import { InboxSidebarLoader } from "./inbox-sidebar-loader";
 
 export function InboxLayoutLoader() {
   return (
-    <div className="relative w-full h-full flex overflow-hidden">
-      <div className="flex-shrink-0 w-2/6 h-full border-r border-custom-border-300">
+    <div className="relative flex h-full w-full overflow-hidden">
+      <div className="h-full w-2/6 flex-shrink-0 border-r border-strong">
         <InboxSidebarLoader />
       </div>
       <div className="w-4/6">
-        <Loader className="flex flex-col h-full gap-5 p-5">
+        <Loader className="flex h-full flex-col gap-5 p-5">
           <div className="space-y-2">
             <Loader.Item height="30px" width="40%" />
             <Loader.Item height="15px" width="60%" />
diff --git a/apps/web/core/components/ui/loader/layouts/project-inbox/inbox-sidebar-loader.tsx b/apps/web/core/components/ui/loader/layouts/project-inbox/inbox-sidebar-loader.tsx
index c28bc0941..a4759af83 100644
--- a/apps/web/core/components/ui/loader/layouts/project-inbox/inbox-sidebar-loader.tsx
+++ b/apps/web/core/components/ui/loader/layouts/project-inbox/inbox-sidebar-loader.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 import { range } from "lodash-es";
 
@@ -5,16 +11,16 @@ export function InboxSidebarLoader() {
   return (
     <div className="flex flex-col">
       {range(6).map((index) => (
-        <div key={index} className="flex flex-col gap-2.5 h-[105px] space-y-3 border-b border-custom-border-200 p-4">
+        <div key={index} className="flex h-[105px] flex-col gap-2.5 space-y-3 border-b border-subtle p-4">
           <div className="flex flex-col gap-2">
-            <span className="h-5 w-16 bg-custom-background-80 rounded" />
-            <span className="h-5 w-36 bg-custom-background-80 rounded" />
+            <span className="h-5 w-16 rounded-sm bg-layer-1" />
+            <span className="h-5 w-36 rounded-sm bg-layer-1" />
           </div>
           <div className="flex items-center gap-2">
-            <span className="h-4 w-20 bg-custom-background-80 rounded" />
-            <span className="h-2 w-2 bg-custom-background-80 rounded-full" />
-            <span className="h-4 w-16 bg-custom-background-80 rounded" />
-            <span className="h-4 w-16 bg-custom-background-80 rounded" />
+            <span className="h-4 w-20 rounded-sm bg-layer-1" />
+            <span className="h-2 w-2 rounded-full bg-layer-1" />
+            <span className="h-4 w-16 rounded-sm bg-layer-1" />
+            <span className="h-4 w-16 rounded-sm bg-layer-1" />
           </div>
         </div>
       ))}
diff --git a/apps/web/core/components/ui/loader/layouts/spreadsheet-layout-loader.tsx b/apps/web/core/components/ui/loader/layouts/spreadsheet-layout-loader.tsx
index 1c8f1fa23..e4a4d6839 100644
--- a/apps/web/core/components/ui/loader/layouts/spreadsheet-layout-loader.tsx
+++ b/apps/web/core/components/ui/loader/layouts/spreadsheet-layout-loader.tsx
@@ -1,22 +1,26 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { range } from "lodash-es";
 import { Row } from "@plane/ui";
 import { getRandomLength } from "../utils";
 
 export function SpreadsheetIssueRowLoader(props: { columnCount: number }) {
   return (
-    <tr className="border-b border-custom-border-200 bg-custom-background-100">
-      <td className="h-11 min-w-[28rem] z-[10] sticky left-0 flex items-center border-r-[0.5px] border-custom-border-200 bg-custom-background-100">
+    <tr className="border-b border-subtle bg-surface-1">
+      <td className="sticky left-0 z-[10] flex h-11 min-w-[28rem] items-center border-r-[0.5px] border-subtle bg-surface-1">
         <Row className="flex items-center gap-3">
-          <span className="h-5 w-10 bg-custom-background-80 rounded animate-pulse" />
-          <span
-            className={`h-5 w-${getRandomLength(["32", "52", "72"])} bg-custom-background-80 rounded animate-pulse`}
-          />
+          <span className="h-5 w-10 animate-pulse rounded-sm bg-layer-1" />
+          <span className={`h-5 w-${getRandomLength(["32", "52", "72"])} animate-pulse rounded-sm bg-layer-1`} />
         </Row>
       </td>
       {range(props.columnCount).map((colIndex) => (
-        <td key={colIndex} className="h-11 w-full min-w-[8rem] border-r border-custom-border-200 ">
+        <td key={colIndex} className="h-11 w-full min-w-[8rem] border-r border-subtle">
           <div className="flex items-center justify-center gap-3 px-3">
-            <span className="h-5 w-20 bg-custom-background-80 rounded animate-pulse" />
+            <span className="h-5 w-20 animate-pulse rounded-sm bg-layer-1" />
           </div>
         </td>
       ))}
@@ -26,16 +30,13 @@ export function SpreadsheetIssueRowLoader(props: { columnCount: number }) {
 
 export function SpreadsheetLayoutLoader() {
   return (
-    <div className="horizontal-scroll-enable h-full w-full overflow-y-auto ">
+    <div className="horizontal-scroll-enable h-full w-full overflow-y-auto">
       <table>
         <thead>
           <tr>
-            <th className="h-11 min-w-[28rem] bg-custom-background-90 border-r border-custom-border-200 animate-pulse" />
+            <th className="h-11 min-w-[28rem] animate-pulse border-r border-subtle bg-surface-2" />
             {range(10).map((index) => (
-              <th
-                key={index}
-                className="h-11 w-full min-w-[8rem] bg-custom-background-90 border-r border-custom-border-200 animate-pulse"
-              />
+              <th key={index} className="h-11 w-full min-w-[8rem] animate-pulse border-r border-subtle bg-surface-2" />
             ))}
           </tr>
         </thead>
diff --git a/apps/web/core/components/ui/loader/notification-loader.tsx b/apps/web/core/components/ui/loader/notification-loader.tsx
index 7b23b0c30..9ebcaf730 100644
--- a/apps/web/core/components/ui/loader/notification-loader.tsx
+++ b/apps/web/core/components/ui/loader/notification-loader.tsx
@@ -1,16 +1,22 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { range } from "lodash-es";
 
 export function NotificationsLoader() {
   return (
-    <div className="divide-y divide-custom-border-100 animate-pulse overflow-hidden">
+    <div className="animate-pulse divide-y divide-subtle overflow-hidden">
       {range(3).map((i) => (
         <div key={i} className="flex w-full items-center gap-4 p-3">
-          <span className="min-h-12 min-w-12 bg-custom-background-80 rounded-full" />
-          <div className="flex flex-col gap-2.5 w-full">
-            <span className="h-5 w-36 bg-custom-background-80 rounded" />
-            <div className="flex items-center justify-between gap-2 w-full">
-              <span className="h-5 w-28 bg-custom-background-80 rounded" />
-              <span className="h-5 w-16 bg-custom-background-80 rounded" />
+          <span className="min-h-12 min-w-12 rounded-full bg-layer-1" />
+          <div className="flex w-full flex-col gap-2.5">
+            <span className="h-5 w-36 rounded-sm bg-layer-1" />
+            <div className="flex w-full items-center justify-between gap-2">
+              <span className="h-5 w-28 rounded-sm bg-layer-1" />
+              <span className="h-5 w-16 rounded-sm bg-layer-1" />
             </div>
           </div>
         </div>
diff --git a/apps/web/core/components/ui/loader/pages-loader.tsx b/apps/web/core/components/ui/loader/pages-loader.tsx
index 24047abe3..8cfbf68a5 100644
--- a/apps/web/core/components/ui/loader/pages-loader.tsx
+++ b/apps/web/core/components/ui/loader/pages-loader.tsx
@@ -1,28 +1,34 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { range } from "lodash-es";
 
 export function PagesLoader() {
   return (
     <div className="flex h-full flex-col space-y-5 overflow-hidden p-6">
       <div className="flex justify-between gap-4">
-        <h3 className="text-2xl font-semibold text-custom-text-100">Pages</h3>
+        <h3 className="text-20 font-semibold text-primary">Pages</h3>
       </div>
       <div className="flex items-center gap-3">
         {range(5).map((i) => (
-          <span key={i} className="h-8 w-20 bg-custom-background-80 rounded-full" />
+          <span key={i} className="h-8 w-20 rounded-full bg-layer-1" />
         ))}
       </div>
-      <div className="divide-y divide-custom-border-200">
+      <div className="divide-y divide-subtle-1">
         {range(5).map((i) => (
-          <div key={i} className="h-12 w-full flex items-center justify-between px-3">
+          <div key={i} className="flex h-12 w-full items-center justify-between px-3">
             <div className="flex items-center gap-1.5">
-              <span className="h-5 w-5 bg-custom-background-80 rounded" />
-              <span className="h-5 w-20 bg-custom-background-80 rounded" />
+              <span className="h-5 w-5 rounded-sm bg-layer-1" />
+              <span className="h-5 w-20 rounded-sm bg-layer-1" />
             </div>
             <div className="flex items-center gap-1.5">
-              <span className="h-5 w-16 bg-custom-background-80 rounded" />
-              <span className="h-5 w-5 bg-custom-background-80 rounded" />
-              <span className="h-5 w-5 bg-custom-background-80 rounded" />
-              <span className="h-5 w-5 bg-custom-background-80 rounded" />
+              <span className="h-5 w-16 rounded-sm bg-layer-1" />
+              <span className="h-5 w-5 rounded-sm bg-layer-1" />
+              <span className="h-5 w-5 rounded-sm bg-layer-1" />
+              <span className="h-5 w-5 rounded-sm bg-layer-1" />
             </div>
           </div>
         ))}
diff --git a/apps/web/core/components/ui/loader/projects-loader.tsx b/apps/web/core/components/ui/loader/projects-loader.tsx
index 0a8c85466..4f6b266bf 100644
--- a/apps/web/core/components/ui/loader/projects-loader.tsx
+++ b/apps/web/core/components/ui/loader/projects-loader.tsx
@@ -1,36 +1,39 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { range } from "lodash-es";
 
 export function ProjectsLoader() {
   return (
-    <div className="h-full w-full overflow-y-auto p-8 animate-pulse">
+    <div className="h-full w-full animate-pulse overflow-y-auto p-8">
       <div className="grid grid-cols-1 gap-9 md:grid-cols-2 lg:grid-cols-3">
         {range(3).map((i) => (
-          <div
-            key={i}
-            className="flex cursor-pointer flex-col rounded border border-custom-border-200 bg-custom-background-100"
-          >
-            <div className="relative min-h-[118px] w-full rounded-t border-b border-custom-border-200 ">
+          <div key={i} className="flex cursor-pointer flex-col rounded-sm border border-subtle bg-surface-1">
+            <div className="relative min-h-[118px] w-full rounded-t border-b border-subtle">
               <div className="absolute inset-0 z-[1] bg-gradient-to-t from-black/20 to-transparent">
                 <div className="absolute bottom-4 z-10 flex h-10 w-full items-center justify-between gap-3 px-4">
                   <div className="flex flex-grow items-center gap-2.5 truncate">
-                    <span className="min-h-9 min-w-9 bg-custom-background-80 rounded" />
+                    <span className="min-h-9 min-w-9 rounded-sm bg-layer-1" />
                     <div className="flex w-full flex-col justify-between gap-0.5 truncate">
-                      <span className="h-4 w-28 bg-custom-background-80 rounded" />
-                      <span className="h-4 w-16 bg-custom-background-80 rounded" />
+                      <span className="h-4 w-28 rounded-sm bg-layer-1" />
+                      <span className="h-4 w-16 rounded-sm bg-layer-1" />
                     </div>
                   </div>
                   <div className="flex h-full flex-shrink-0 items-center gap-2">
-                    <span className="h-6 w-6 bg-custom-background-80 rounded" />
-                    <span className="h-6 w-6 bg-custom-background-80 rounded" />
+                    <span className="h-6 w-6 rounded-sm bg-layer-1" />
+                    <span className="h-6 w-6 rounded-sm bg-layer-1" />
                   </div>
                 </div>
               </div>
             </div>
-            <div className="flex h-[104px] w-full flex-col justify-between rounded-b p-4">
-              <span className="h-4 w-36 bg-custom-background-80 rounded" />
+            <div className="flex h-[104px] w-full flex-col justify-between rounded-b-sm p-4">
+              <span className="h-4 w-36 rounded-sm bg-layer-1" />
               <div className="item-center flex justify-between">
-                <span className="h-5 w-20 bg-custom-background-80 rounded" />
-                <span className="h-5 w-5 bg-custom-background-80 rounded" />
+                <span className="h-5 w-20 rounded-sm bg-layer-1" />
+                <span className="h-5 w-5 rounded-sm bg-layer-1" />
               </div>
             </div>
           </div>
diff --git a/apps/web/core/components/ui/loader/settings/activity.tsx b/apps/web/core/components/ui/loader/settings/activity.tsx
index 3bd3d69d5..1cf5b5bc7 100644
--- a/apps/web/core/components/ui/loader/settings/activity.tsx
+++ b/apps/web/core/components/ui/loader/settings/activity.tsx
@@ -1,13 +1,19 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { range } from "lodash-es";
 import { getRandomLength } from "../utils";
 
 export function ActivitySettingsLoader() {
   return (
-    <div className="flex flex-col gap-3 animate-pulse">
+    <div className="flex animate-pulse flex-col gap-3">
       {range(10).map((i) => (
-        <div key={i} className="relative flex items-center gap-2 h-12 border-b border-custom-border-200">
-          <span className="h-6 w-6 bg-custom-background-80 rounded" />
-          <span className={`h-6 w-${getRandomLength(["52", "72", "96"])} bg-custom-background-80 rounded`} />
+        <div key={i} className="relative flex h-12 items-center gap-2 border-b border-subtle">
+          <span className="h-6 w-6 rounded-sm bg-layer-1" />
+          <span className={`h-6 w-${getRandomLength(["52", "72", "96"])} rounded-sm bg-layer-1`} />
         </div>
       ))}
     </div>
diff --git a/apps/web/core/components/ui/loader/settings/api-token.tsx b/apps/web/core/components/ui/loader/settings/api-token.tsx
index bc613bbe8..f799ae9ea 100644
--- a/apps/web/core/components/ui/loader/settings/api-token.tsx
+++ b/apps/web/core/components/ui/loader/settings/api-token.tsx
@@ -1,21 +1,27 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { range } from "lodash-es";
 import { useTranslation } from "@plane/i18n";
 export function APITokenSettingsLoader() {
   const { t } = useTranslation();
   return (
     <section className="w-full overflow-y-auto">
-      <div className="mb-2 flex items-center justify-between border-b border-custom-border-200 pb-3.5">
-        <h3 className="text-xl font-medium">{t("workspace_settings.settings.api_tokens.title")}</h3>
-        <span className="h-8 w-28 bg-custom-background-80 rounded" />
+      <div className="mb-2 flex items-center justify-between border-b border-subtle pb-3.5">
+        <h3 className="text-18 font-medium">{t("workspace_settings.settings.api_tokens.title")}</h3>
+        <span className="h-8 w-28 rounded-sm bg-layer-1" />
       </div>
-      <div className="divide-y-[0.5px] divide-custom-border-200">
+      <div className="divide-y-[0.5px] divide-subtle-1">
         {range(2).map((i) => (
           <div key={i} className="flex flex-col gap-2 py-3">
             <div className="flex items-center gap-2">
-              <span className="h-5 w-28 bg-custom-background-80 rounded" />
-              <span className="h-5 w-16 bg-custom-background-80 rounded" />
+              <span className="h-5 w-28 rounded-sm bg-layer-1" />
+              <span className="h-5 w-16 rounded-sm bg-layer-1" />
             </div>
-            <span className="h-5 w-36 bg-custom-background-80 rounded" />
+            <span className="h-5 w-36 rounded-sm bg-layer-1" />
           </div>
         ))}
       </div>
diff --git a/apps/web/core/components/ui/loader/settings/email.tsx b/apps/web/core/components/ui/loader/settings/email.tsx
index a7d0c5748..bbf5cdec8 100644
--- a/apps/web/core/components/ui/loader/settings/email.tsx
+++ b/apps/web/core/components/ui/loader/settings/email.tsx
@@ -1,29 +1,35 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { range } from "lodash-es";
 
 export function EmailSettingsLoader() {
   return (
-    <div className="mx-auto mt-8 h-full w-full overflow-y-auto px-6 lg:px-20 pb- animate-pulse">
-      <div className="flex flex-col gap-2 pt-6 mb-2 pb-6 border-b border-custom-border-100">
-        <span className="h-7 w-40 bg-custom-background-80 rounded" />
-        <span className="h-5 w-96 bg-custom-background-80 rounded" />
+    <div className="pb- mx-auto mt-8 h-full w-full animate-pulse overflow-y-auto px-6 lg:px-20">
+      <div className="mb-2 flex flex-col gap-2 border-b border-subtle pt-6 pb-6">
+        <span className="h-7 w-40 rounded-sm bg-layer-1" />
+        <span className="h-5 w-96 rounded-sm bg-layer-1" />
       </div>
       <div className="flex flex-col gap-2">
         <div className="flex items-center py-3">
-          <span className="h-7 w-32 bg-custom-background-80 rounded" />
+          <span className="h-7 w-32 rounded-sm bg-layer-1" />
         </div>
         {range(4).map((i) => (
           <div key={i} className="flex items-center justify-between">
             <div className="flex flex-col gap-2 py-3">
-              <span className="h-6 w-28 bg-custom-background-80 rounded" />
-              <span className="h-5 w-96 bg-custom-background-80 rounded" />
+              <span className="h-6 w-28 rounded-sm bg-layer-1" />
+              <span className="h-5 w-96 rounded-sm bg-layer-1" />
             </div>
             <div className="flex items-center">
-              <span className="h-5 w-5 bg-custom-background-80 rounded" />
+              <span className="h-5 w-5 rounded-sm bg-layer-1" />
             </div>
           </div>
         ))}
         <div className="flex items-center py-12">
-          <span className="h-8 w-32 bg-custom-background-80 rounded" />
+          <span className="h-8 w-32 rounded-sm bg-layer-1" />
         </div>
       </div>
     </div>
diff --git a/apps/web/core/components/ui/loader/settings/import-and-export.tsx b/apps/web/core/components/ui/loader/settings/import-and-export.tsx
index ee29f4321..286b2f45f 100644
--- a/apps/web/core/components/ui/loader/settings/import-and-export.tsx
+++ b/apps/web/core/components/ui/loader/settings/import-and-export.tsx
@@ -1,18 +1,24 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { range } from "lodash-es";
 
 export function ImportExportSettingsLoader() {
   return (
-    <div className="divide-y-[0.5px] divide-custom-border-200 animate-pulse">
+    <div className="animate-pulse divide-y-[0.5px] divide-subtle-1">
       {range(2).map((i) => (
         <div key={i} className="flex items-center justify-between gap-2 px-4 py-3">
           <div className="flex flex-col gap-1.5">
             <div className="flex items-center gap-2">
-              <span className="h-5 w-16 bg-custom-background-80 rounded" />
-              <span className="h-5 w-16 bg-custom-background-80 rounded" />
+              <span className="h-5 w-16 rounded-sm bg-layer-1" />
+              <span className="h-5 w-16 rounded-sm bg-layer-1" />
             </div>
             <div className="flex items-center gap-2">
-              <span className="h-4 w-28 bg-custom-background-80 rounded" />
-              <span className="h-4 w-28 bg-custom-background-80 rounded" />
+              <span className="h-4 w-28 rounded-sm bg-layer-1" />
+              <span className="h-4 w-28 rounded-sm bg-layer-1" />
             </div>
           </div>
         </div>
diff --git a/apps/web/core/components/ui/loader/settings/integration.tsx b/apps/web/core/components/ui/loader/settings/integration.tsx
index e6787e63b..8afe873fd 100644
--- a/apps/web/core/components/ui/loader/settings/integration.tsx
+++ b/apps/web/core/components/ui/loader/settings/integration.tsx
@@ -1,21 +1,24 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { range } from "lodash-es";
 
 export function IntegrationsSettingsLoader() {
   return (
-    <div className="divide-y-[0.5px] divide-custom-border-100 animate-pulse">
+    <div className="animate-pulse divide-y-[0.5px] divide-subtle">
       {range(2).map((i) => (
-        <div
-          key={i}
-          className="flex items-center justify-between gap-2 border-b border-custom-border-100 bg-custom-background-100 px-4 py-6"
-        >
+        <div key={i} className="flex items-center justify-between gap-2 border-b border-subtle bg-surface-1 px-4 py-6">
           <div className="flex items-start gap-4">
-            <span className="h-10 w-10 bg-custom-background-80 rounded-full" />
+            <span className="h-10 w-10 rounded-full bg-layer-1" />
             <div className="flex flex-col gap-1">
-              <span className="h-5 w-20 bg-custom-background-80 rounded" />
-              <span className="h-4 w-60 bg-custom-background-80 rounded" />
+              <span className="h-5 w-20 rounded-sm bg-layer-1" />
+              <span className="h-4 w-60 rounded-sm bg-layer-1" />
             </div>
           </div>
-          <span className="h-8 w-16 bg-custom-background-80 rounded" />
+          <span className="h-8 w-16 rounded-sm bg-layer-1" />
         </div>
       ))}
     </div>
diff --git a/apps/web/core/components/ui/loader/settings/members.tsx b/apps/web/core/components/ui/loader/settings/members.tsx
index 384d0478b..d84831fae 100644
--- a/apps/web/core/components/ui/loader/settings/members.tsx
+++ b/apps/web/core/components/ui/loader/settings/members.tsx
@@ -1,17 +1,23 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { range } from "lodash-es";
 
 export function MembersSettingsLoader() {
   return (
-    <div className="divide-y-[0.5px] divide-custom-border-100">
+    <div className="divide-y-[0.5px] divide-subtle">
       {range(3).map((i) => (
         <div key={i} className="group grid grid-cols-5 items-center justify-evenly px-3 py-4">
-          <div className="flex col-span-2 items-center gap-x-2.5">
-            <span className="size-6 bg-custom-background-80 rounded-full" />
-            <span className="h-5 w-24 bg-custom-background-80 rounded" />
+          <div className="col-span-2 flex items-center gap-x-2.5">
+            <span className="size-6 rounded-full bg-layer-1" />
+            <span className="h-5 w-24 rounded-sm bg-layer-1" />
           </div>
-          <span className="h-5 w-24 bg-custom-background-80 rounded" />
-          <span className="h-5 w-20 bg-custom-background-80 rounded" />
-          <span className="h-5 w-28 bg-custom-background-80 rounded" />
+          <span className="h-5 w-24 rounded-sm bg-layer-1" />
+          <span className="h-5 w-20 rounded-sm bg-layer-1" />
+          <span className="h-5 w-28 rounded-sm bg-layer-1" />
         </div>
       ))}
     </div>
diff --git a/apps/web/core/components/ui/loader/settings/web-hook.tsx b/apps/web/core/components/ui/loader/settings/web-hook.tsx
index 29f4e9832..3acb52b24 100644
--- a/apps/web/core/components/ui/loader/settings/web-hook.tsx
+++ b/apps/web/core/components/ui/loader/settings/web-hook.tsx
@@ -1,17 +1,23 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export function WebhookSettingsLoader() {
   return (
     <div className="h-full w-full overflow-hidden py-8 pr-9">
       <div className="flex h-full w-full flex-col">
-        <div className="flex items-center justify-between gap-4 border-b border-custom-border-200 pb-3.5">
-          <div className="text-xl font-medium">Webhooks</div>
-          <span className="h-8 w-28 bg-custom-background-80 rounded" />
+        <div className="flex items-center justify-between gap-4 border-b border-subtle pb-3.5">
+          <div className="text-18 font-medium">Webhooks</div>
+          <span className="h-8 w-28 rounded-sm bg-layer-1" />
         </div>
         <div className="h-full w-full overflow-y-auto">
-          <div className="border-b border-custom-border-200">
+          <div className="border-b border-subtle">
             <div>
               <span className="flex items-center justify-between gap-4 px-3.5 py-[18px]">
-                <span className="h-5 w-36 bg-custom-background-80 rounded" />
-                <span className="h-6 w-12 bg-custom-background-80 rounded" />
+                <span className="h-5 w-36 rounded-sm bg-layer-1" />
+                <span className="h-6 w-12 rounded-sm bg-layer-1" />
               </span>
             </div>
           </div>
diff --git a/apps/web/core/components/ui/loader/utils.tsx b/apps/web/core/components/ui/loader/utils.tsx
index 3637626ed..0a2b2da4a 100644
--- a/apps/web/core/components/ui/loader/utils.tsx
+++ b/apps/web/core/components/ui/loader/utils.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export const getRandomInt = (min: number, max: number) => Math.floor(Math.random() * (max - min + 1)) + min;
 
 export const getRandomLength = (lengthArray: string[]) => {
diff --git a/apps/web/core/components/ui/loader/view-list-loader.tsx b/apps/web/core/components/ui/loader/view-list-loader.tsx
index 8b4959e03..073789d4e 100644
--- a/apps/web/core/components/ui/loader/view-list-loader.tsx
+++ b/apps/web/core/components/ui/loader/view-list-loader.tsx
@@ -1,18 +1,24 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { range } from "lodash-es";
 
 export function ViewListLoader() {
   return (
-    <div className="flex h-full w-full flex-col animate-pulse">
+    <div className="flex h-full w-full animate-pulse flex-col">
       {range(8).map((i) => (
-        <div key={i} className="group border-b border-custom-border-200">
-          <div className="relative flex w-full items-center justify-between rounded p-4">
+        <div key={i} className="group border-b border-subtle">
+          <div className="relative flex w-full items-center justify-between rounded-sm p-4">
             <div className="flex items-center gap-4">
-              <span className="min-h-10 min-w-10 bg-custom-background-80 rounded" />
-              <span className="h-6 w-28 bg-custom-background-80 rounded" />
+              <span className="min-h-10 min-w-10 rounded-sm bg-layer-1" />
+              <span className="h-6 w-28 rounded-sm bg-layer-1" />
             </div>
             <div className="flex items-center gap-2">
-              <span className="h-5 w-5 bg-custom-background-80 rounded" />
-              <span className="h-5 w-5 bg-custom-background-80 rounded" />
+              <span className="h-5 w-5 rounded-sm bg-layer-1" />
+              <span className="h-5 w-5 rounded-sm bg-layer-1" />
             </div>
           </div>
         </div>
diff --git a/apps/web/core/components/ui/markdown-to-component.tsx b/apps/web/core/components/ui/markdown-to-component.tsx
index fc2fd6f31..af66e84b2 100644
--- a/apps/web/core/components/ui/markdown-to-component.tsx
+++ b/apps/web/core/components/ui/markdown-to-component.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 import ReactMarkdown from "react-markdown";
 
@@ -34,23 +40,23 @@ interface Props {
 }
 
 function HeadingPrimary({ children }: { children: React.ReactNode }) {
-  return <h1 className="text-lg font-semibold text-custom-text-100">{children}</h1>;
+  return <h1 className="text-16 font-semibold text-primary">{children}</h1>;
 }
 
 function HeadingSecondary({ children }: { children: React.ReactNode }) {
-  return <h3 className="text-base font-semibold text-custom-text-100">{children}</h3>;
+  return <h3 className="text-14 font-semibold text-primary">{children}</h3>;
 }
 
 function Paragraph({ children }: { children: React.ReactNode }) {
-  return <p className="text-sm text-custom-text-200">{children}</p>;
+  return <p className="text-13 text-secondary">{children}</p>;
 }
 
 function OrderedList({ children }: { children: React.ReactNode }) {
-  return <ol className="mb-4 ml-8 list-decimal text-sm text-custom-text-200">{children}</ol>;
+  return <ol className="mb-4 ml-8 list-decimal text-13 text-secondary">{children}</ol>;
 }
 
 function UnorderedList({ children }: { children: React.ReactNode }) {
-  return <ul className="mb-4 ml-8 list-disc text-sm text-custom-text-200">{children}</ul>;
+  return <ul className="mb-4 ml-8 list-disc text-13 text-secondary">{children}</ul>;
 }
 
 function Link({ href, children }: CustomComponentProps) {
diff --git a/apps/web/core/components/ui/profile-empty-state.tsx b/apps/web/core/components/ui/profile-empty-state.tsx
index e8b4d048d..09f2547e1 100644
--- a/apps/web/core/components/ui/profile-empty-state.tsx
+++ b/apps/web/core/components/ui/profile-empty-state.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 
 type Props = {
@@ -8,13 +14,13 @@ type Props = {
 
 export function ProfileEmptyState({ title, description, image }: Props) {
   return (
-    <div className={`mx-auto grid h-full w-full place-items-center p-8 `}>
+    <div className={`mx-auto grid h-full w-full place-items-center p-8`}>
       <div className="flex w-full flex-col items-center text-center">
-        <div className="flex h-14 w-14 items-center justify-center rounded-full bg-custom-background-90">
-          <img src={image} width="32" height="32" className="w-full h-full object-cover" alt={title} />
+        <div className="flex h-14 w-14 items-center justify-center rounded-full bg-surface-2">
+          <img src={image} width="32" height="32" className="h-full w-full object-cover" alt={title} />
         </div>
-        <h6 className="mb-3 mt-3.5 text-base font-semibold">{title}</h6>
-        {description && <p className="text-sm text-custom-text-300">{description}</p>}
+        <h6 className="mt-3.5 mb-3 text-14 font-semibold">{title}</h6>
+        {description && <p className="text-13 text-tertiary">{description}</p>}
       </div>
     </div>
   );
diff --git a/apps/web/core/components/user/index.ts b/apps/web/core/components/user/index.ts
index 9c2663b18..320ded190 100644
--- a/apps/web/core/components/user/index.ts
+++ b/apps/web/core/components/user/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./user-greetings";
diff --git a/apps/web/core/components/user/user-greetings.tsx b/apps/web/core/components/user/user-greetings.tsx
index ba9e422e6..ff00a23ca 100644
--- a/apps/web/core/components/user/user-greetings.tsx
+++ b/apps/web/core/components/user/user-greetings.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // plane types
 import { useTranslation } from "@plane/i18n";
 // hooks
@@ -40,11 +46,11 @@ export function UserGreetingsView(props: IUserGreetingsView) {
   const greeting = parseInt(hour, 10) < 12 ? "morning" : parseInt(hour, 10) < 18 ? "afternoon" : "evening";
 
   return (
-    <div className="flex flex-col items-center my-6">
-      <h2 className="text-2xl font-semibold text-center">
+    <div className="my-6 flex flex-col items-center">
+      <h2 className="text-center text-20 font-semibold">
         {t("good")} {t(greeting)}, {user?.first_name} {user?.last_name}
       </h2>
-      <h5 className="flex items-center gap-2 font-medium text-custom-text-400">
+      <h5 className="flex items-center gap-2 font-medium text-placeholder">
         <div>{greeting === "morning" ? "🌤️" : greeting === "afternoon" ? "🌥️" : "🌙️"}</div>
         <div>
           {weekDay}, {date} {timeString}
diff --git a/apps/web/core/components/views/applied-filters/access.tsx b/apps/web/core/components/views/applied-filters/access.tsx
index ddde4683c..36f68435f 100644
--- a/apps/web/core/components/views/applied-filters/access.tsx
+++ b/apps/web/core/components/views/applied-filters/access.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 // icons
 import { useTranslation } from "@plane/i18n";
@@ -30,12 +36,12 @@ export const AppliedAccessFilters = observer(function AppliedAccessFilters(props
         if (!label) return null;
 
         return (
-          <div key={access} className="flex items-center gap-1 rounded bg-custom-background-80 py-1 px-1.5 text-xs">
+          <div key={access} className="flex items-center gap-1 rounded-sm bg-layer-1 px-1.5 py-1 text-11">
             <span className="normal-case">{t(label)}</span>
             {editable && (
               <button
                 type="button"
-                className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
+                className="grid place-items-center text-tertiary hover:text-secondary"
                 onClick={() => handleRemove(access)}
               >
                 <CloseIcon height={10} width={10} strokeWidth={2} />
diff --git a/apps/web/core/components/views/applied-filters/index.tsx b/apps/web/core/components/views/applied-filters/index.tsx
index 1efe34c51..d98033459 100644
--- a/apps/web/core/components/views/applied-filters/index.tsx
+++ b/apps/web/core/components/views/applied-filters/index.tsx
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./root";
diff --git a/apps/web/core/components/views/applied-filters/root.tsx b/apps/web/core/components/views/applied-filters/root.tsx
index 9c20dc8b1..7f59b090a 100644
--- a/apps/web/core/components/views/applied-filters/root.tsx
+++ b/apps/web/core/components/views/applied-filters/root.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useTranslation } from "@plane/i18n";
 import { CloseIcon } from "@plane/propel/icons";
 // plane imports
@@ -31,7 +37,7 @@ export function ViewAppliedFiltersList(props: Props) {
   const isEditingAllowed = alwaysAllowEditing;
 
   return (
-    <div className="flex flex-wrap items-stretch gap-2 bg-custom-background-100">
+    <div className="flex flex-wrap items-stretch gap-2 bg-surface-1">
       {Object.entries(appliedFilters).map(([key, value]) => {
         const filterKey = key as keyof TViewFilterProps;
 
@@ -40,7 +46,7 @@ export function ViewAppliedFiltersList(props: Props) {
 
         return (
           <Tag key={filterKey}>
-            <span className="text-xs text-custom-text-300">{replaceUnderscoreIfSnakeCase(filterKey)}</span>
+            <span className="text-11 text-tertiary">{replaceUnderscoreIfSnakeCase(filterKey)}</span>
             {VIEW_ACCESS_FILTERS.includes(filterKey) && (
               <AppliedAccessFilters
                 editable={isEditingAllowed}
@@ -65,7 +71,7 @@ export function ViewAppliedFiltersList(props: Props) {
             {isEditingAllowed && (
               <button
                 type="button"
-                className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
+                className="grid place-items-center text-tertiary hover:text-secondary"
                 onClick={() => handleRemoveFilter(filterKey, null)}
               >
                 <CloseIcon height={12} width={12} strokeWidth={2} />
diff --git a/apps/web/core/components/views/delete-view-modal.tsx b/apps/web/core/components/views/delete-view-modal.tsx
index b1810b30f..fa6f448ed 100644
--- a/apps/web/core/components/views/delete-view-modal.tsx
+++ b/apps/web/core/components/views/delete-view-modal.tsx
@@ -1,15 +1,18 @@
-import React, { useState } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
 import { observer } from "mobx-react";
 import { useParams, useRouter } from "next/navigation";
 // types
-import { PROJECT_VIEW_TRACKER_EVENTS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { IProjectView } from "@plane/types";
 // ui
 import { AlertModalCore } from "@plane/ui";
-// helpers
-import { captureError, captureSuccess } from "@/helpers/event-tracker.helper";
 // hooks
 import { useProjectView } from "@/hooks/store/use-project-view";
 
@@ -36,41 +39,24 @@ export const DeleteProjectViewModal = observer(function DeleteProjectViewModal(p
 
   const handleDeleteView = async () => {
     if (!workspaceSlug || !projectId) return;
-
-    setIsDeleteLoading(true);
-
-    await deleteView(workspaceSlug.toString(), projectId.toString(), data.id)
-      .then(() => {
-        handleClose();
-        router.push(`/${workspaceSlug}/projects/${projectId}/views`);
-        setToast({
-          type: TOAST_TYPE.SUCCESS,
-          title: "Success!",
-          message: "View deleted successfully.",
-        });
-        captureSuccess({
-          eventName: PROJECT_VIEW_TRACKER_EVENTS.delete,
-          payload: {
-            view_id: data.id,
-          },
-        });
-      })
-      .catch(() => {
-        setToast({
-          type: TOAST_TYPE.ERROR,
-          title: "Error!",
-          message: "View could not be deleted. Please try again.",
-        });
-        captureError({
-          eventName: PROJECT_VIEW_TRACKER_EVENTS.delete,
-          payload: {
-            view_id: data.id,
-          },
-        });
-      })
-      .finally(() => {
-        setIsDeleteLoading(false);
+    try {
+      setIsDeleteLoading(true);
+      await deleteView(workspaceSlug.toString(), projectId.toString(), data.id);
+      handleClose();
+      router.push(`/${workspaceSlug}/projects/${projectId}/views`);
+      setToast({
+        type: TOAST_TYPE.SUCCESS,
+        title: "Success!",
+        message: "View deleted successfully.",
       });
+    } catch (_error) {
+      setToast({
+        type: TOAST_TYPE.ERROR,
+        title: "Error!",
+        message: "View could not be deleted. Please try again.",
+      });
+    }
+    setIsDeleteLoading(false);
   };
 
   return (
diff --git a/apps/web/core/components/views/filters/filter-selection.tsx b/apps/web/core/components/views/filters/filter-selection.tsx
index ebb9e9253..94c6ed3a6 100644
--- a/apps/web/core/components/views/filters/filter-selection.tsx
+++ b/apps/web/core/components/views/filters/filter-selection.tsx
@@ -1,7 +1,13 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useState } from "react";
 import { observer } from "mobx-react";
-import { Search } from "lucide-react";
-import { CloseIcon } from "@plane/propel/icons";
+
+import { SearchIcon, CloseIcon } from "@plane/propel/icons";
 import type { TViewFilterProps, TViewFilters } from "@plane/types";
 import { EViewAccess } from "@plane/types";
 // components
@@ -53,12 +59,12 @@ export const ViewFiltersSelection = observer(function ViewFiltersSelection(props
 
   return (
     <div className="flex h-full w-full flex-col overflow-hidden">
-      <div className="bg-custom-background-100 p-2.5 pb-0">
-        <div className="flex items-center gap-1.5 rounded border-[0.5px] border-custom-border-200 bg-custom-background-90 px-1.5 py-1 text-xs">
-          <Search className="text-custom-text-400" size={12} strokeWidth={2} />
+      <div className="bg-surface-1 p-2.5 pb-0">
+        <div className="flex items-center gap-1.5 rounded-sm border-[0.5px] border-subtle bg-surface-2 px-1.5 py-1 text-11">
+          <SearchIcon className="text-placeholder" width={12} height={12} strokeWidth={2} />
           <input
             type="text"
-            className="w-full bg-custom-background-90 outline-none placeholder:text-custom-text-400"
+            className="w-full bg-surface-2 outline-none placeholder:text-placeholder"
             placeholder="Search"
             value={filtersSearchQuery}
             onChange={(e) => setFiltersSearchQuery(e.target.value)}
@@ -66,12 +72,12 @@ export const ViewFiltersSelection = observer(function ViewFiltersSelection(props
           />
           {filtersSearchQuery !== "" && (
             <button type="button" className="grid place-items-center" onClick={() => setFiltersSearchQuery("")}>
-              <CloseIcon className="text-custom-text-300" height={12} width={12} strokeWidth={2} />
+              <CloseIcon className="text-tertiary" height={12} width={12} strokeWidth={2} />
             </button>
           )}
         </div>
       </div>
-      <div className="h-full w-full divide-y divide-custom-border-200 overflow-y-auto px-2.5 vertical-scrollbar scrollbar-sm">
+      <div className="vertical-scrollbar scrollbar-sm h-full w-full divide-y divide-subtle-1 overflow-y-auto px-2.5">
         <div className="py-2">
           <FilterOption
             isChecked={!!filters.filters?.favorites}
diff --git a/apps/web/core/components/views/filters/order-by.tsx b/apps/web/core/components/views/filters/order-by.tsx
index 13f34a4a3..333606588 100644
--- a/apps/web/core/components/views/filters/order-by.tsx
+++ b/apps/web/core/components/views/filters/order-by.tsx
@@ -1,13 +1,17 @@
-import { ArrowDownWideNarrow, ArrowUpWideNarrow, Check } from "lucide-react";
-// types
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { ArrowDownWideNarrow, ArrowUpWideNarrow } from "lucide-react";
+// plane imports
 import { VIEW_SORT_BY_OPTIONS, VIEW_SORTING_KEY_OPTIONS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { getButtonStyling } from "@plane/propel/button";
-import { ChevronDownIcon } from "@plane/propel/icons";
+import { CheckIcon } from "@plane/propel/icons";
 import type { TViewFiltersSortBy, TViewFiltersSortKey } from "@plane/types";
-// ui
 import { CustomMenu } from "@plane/ui";
-// constants
 
 type Props = {
   onChange: (value: { key?: TViewFiltersSortKey; order?: TViewFiltersSortBy }) => void;
@@ -24,24 +28,22 @@ export function ViewOrderByDropdown(props: Props) {
   const isDescending = sortBy === "desc";
 
   const buttonClassName = isMobile
-    ? "flex items-center text-sm text-custom-text-200 gap-2 w-full"
-    : `${getButtonStyling("neutral-primary", "sm")} px-2 text-custom-text-300`;
+    ? "flex items-center text-13 text-secondary gap-2 w-full"
+    : getButtonStyling("secondary", "lg");
 
-  const chevronClassName = isMobile ? "h-4 w-4 text-custom-text-200" : "h-3 w-3";
   const icon = (
-    <>{!isDescending ? <ArrowUpWideNarrow className="size-3 " /> : <ArrowDownWideNarrow className="size-3 " />}</>
+    <>{!isDescending ? <ArrowUpWideNarrow className="size-3" /> : <ArrowDownWideNarrow className="size-3" />}</>
   );
   return (
     <CustomMenu
       customButton={
         <span className={buttonClassName}>
           {!isMobile && icon}
-          <span className="flex-shrink-0"> {orderByDetails?.i18n_label && t(orderByDetails?.i18n_label)}</span>
-          <ChevronDownIcon className={chevronClassName} strokeWidth={2} />
+          <span className="shrink-0"> {orderByDetails?.i18n_label && t(orderByDetails?.i18n_label)}</span>
         </span>
       }
       placement="bottom-end"
-      className="w-full flex justify-center"
+      className="flex w-full justify-center"
       maxHeight="lg"
       closeOnSelect
     >
@@ -56,10 +58,10 @@ export function ViewOrderByDropdown(props: Props) {
           }
         >
           {t(option.i18n_label)}
-          {sortKey === option.key && <Check className="h-3 w-3" />}
+          {sortKey === option.key && <CheckIcon className="h-3 w-3" />}
         </CustomMenu.MenuItem>
       ))}
-      <hr className="my-2 border-custom-border-200" />
+      <hr className="my-2 border-subtle" />
       {VIEW_SORT_BY_OPTIONS.map((option) => {
         const isSelected = (option.key === "asc" && !isDescending) || (option.key === "desc" && isDescending);
         return (
@@ -74,7 +76,7 @@ export function ViewOrderByDropdown(props: Props) {
             }}
           >
             {t(option.i18n_label)}
-            {isSelected && <Check className="h-3 w-3" />}
+            {isSelected && <CheckIcon className="h-3 w-3" />}
           </CustomMenu.MenuItem>
         );
       })}
diff --git a/apps/web/core/components/views/form.tsx b/apps/web/core/components/views/form.tsx
index 644c70f96..c24731790 100644
--- a/apps/web/core/components/views/form.tsx
+++ b/apps/web/core/components/views/form.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useState } from "react";
 import { observer } from "mobx-react";
 import { Controller, useForm } from "react-hook-form";
@@ -102,24 +108,22 @@ export const ProjectViewForm = observer(function ProjectViewForm(props: Props) {
   return (
     <form onSubmit={handleSubmit(handleCreateUpdateView)}>
       <div className="space-y-5 p-5">
-        <h3 className="text-xl font-medium text-custom-text-200">
-          {data ? t("view.update.label") : t("view.create.label")}
-        </h3>
+        <h3 className="text-18 font-medium text-secondary">{data ? t("view.update.label") : t("view.create.label")}</h3>
         <div className="space-y-3">
-          <div className="flex items-start gap-2 w-full">
+          <div className="flex w-full items-start gap-2">
             <EmojiPicker
               iconType="lucide"
               isOpen={isOpen}
               handleToggle={(val: boolean) => setIsOpen(val)}
-              className="flex items-center justify-center flex-shrink0"
+              className="flex-shrink0 flex items-center justify-center"
               buttonClassName="flex items-center justify-center"
               label={
-                <span className="grid h-9 w-9 place-items-center rounded-md bg-custom-background-90">
+                <span className="grid h-9 w-9 place-items-center rounded-md bg-surface-2">
                   <>
                     {logoValue?.in_use ? (
                       <Logo logo={logoValue} size={18} type="lucide" />
                     ) : (
-                      <ViewsIcon className="h-4 w-4 text-custom-text-300" />
+                      <ViewsIcon className="h-4 w-4 text-tertiary" />
                     )}
                   </>
                 </span>
@@ -147,7 +151,7 @@ export const ProjectViewForm = observer(function ProjectViewForm(props: Props) {
                   : EmojiIconPickerTypes.ICON
               }
             />
-            <div className="space-y-1 flew-grow w-full">
+            <div className="flew-grow w-full space-y-1">
               <Controller
                 control={control}
                 name="name"
@@ -167,13 +171,13 @@ export const ProjectViewForm = observer(function ProjectViewForm(props: Props) {
                     onChange={onChange}
                     hasError={Boolean(errors.name)}
                     placeholder={t("common.title")}
-                    className="w-full text-base"
+                    className="w-full text-14"
                     tabIndex={getIndex("name")}
                     autoFocus
                   />
                 )}
               />
-              <span className="text-xs text-red-500">{errors?.name?.message?.toString()}</span>
+              <span className="text-11 text-danger-primary">{errors?.name?.message?.toString()}</span>
             </div>
           </div>
           <div>
@@ -185,7 +189,7 @@ export const ProjectViewForm = observer(function ProjectViewForm(props: Props) {
                   id="description"
                   name="description"
                   placeholder={t("common.description")}
-                  className="w-full text-base resize-none min-h-24"
+                  className="min-h-24 w-full resize-none text-14"
                   hasError={Boolean(errors?.description)}
                   value={value}
                   onChange={onChange}
@@ -275,11 +279,11 @@ export const ProjectViewForm = observer(function ProjectViewForm(props: Props) {
           </div>
         </div>
       </div>
-      <div className="px-5 py-4 flex items-center justify-end gap-2 border-t-[0.5px] border-custom-border-200">
-        <Button variant="neutral-primary" size="sm" onClick={handleClose} tabIndex={getIndex("cancel")}>
+      <div className="flex items-center justify-end gap-2 border-t-[0.5px] border-subtle px-5 py-4">
+        <Button variant="secondary" size="lg" onClick={handleClose} tabIndex={getIndex("cancel")}>
           {t("common.cancel")}
         </Button>
-        <Button variant="primary" size="sm" type="submit" tabIndex={getIndex("submit")} loading={isSubmitting}>
+        <Button variant="primary" size="lg" type="submit" tabIndex={getIndex("submit")} loading={isSubmitting}>
           {data
             ? isSubmitting
               ? t("common.updating")
diff --git a/apps/web/core/components/views/helper.tsx b/apps/web/core/components/views/helper.tsx
index 91b13b46d..664cb346e 100644
--- a/apps/web/core/components/views/helper.tsx
+++ b/apps/web/core/components/views/helper.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { EIssueLayoutTypes } from "@plane/types";
 import { WorkspaceSpreadsheetRoot } from "@/components/issues/issue-layouts/spreadsheet/roots/workspace-root";
 import { WorkspaceAdditionalLayouts } from "@/plane-web/components/views/helper";
diff --git a/apps/web/core/components/views/modal.tsx b/apps/web/core/components/views/modal.tsx
index 289d1d44b..0d16de1ce 100644
--- a/apps/web/core/components/views/modal.tsx
+++ b/apps/web/core/components/views/modal.tsx
@@ -1,14 +1,17 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 // types
-import { PROJECT_VIEW_TRACKER_EVENTS } from "@plane/constants";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { IProjectView } from "@plane/types";
 import { EIssuesStoreType } from "@plane/types";
 // ui
 import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
 // hooks
-import { captureError, captureSuccess } from "@/helpers/event-tracker.helper";
 import { useIssues } from "@/hooks/store/use-issues";
 import { useProjectView } from "@/hooks/store/use-project-view";
 import { useWorkItemFilters } from "@/hooks/store/work-item-filters/use-work-item-filters";
@@ -42,60 +45,37 @@ export const CreateUpdateProjectViewModal = observer(function CreateUpdateProjec
   };
 
   const handleCreateView = async (payload: IProjectView) => {
-    await createView(workspaceSlug, projectId, payload)
-      .then((res) => {
-        handleClose();
-        router.push(`/${workspaceSlug}/projects/${projectId}/views/${res.id}`);
-        setToast({
-          type: TOAST_TYPE.SUCCESS,
-          title: "Success!",
-          message: "View created successfully.",
-        });
-        captureSuccess({
-          eventName: PROJECT_VIEW_TRACKER_EVENTS.create,
-          payload: {
-            view_id: res.id,
-          },
-        });
-      })
-      .catch(() => {
-        setToast({
-          type: TOAST_TYPE.ERROR,
-          title: "Error!",
-          message: "Something went wrong. Please try again.",
-        });
-        captureError({
-          eventName: PROJECT_VIEW_TRACKER_EVENTS.create,
-        });
+    try {
+      const res = await createView(workspaceSlug, projectId, payload);
+      handleClose();
+      router.push(`/${workspaceSlug}/projects/${projectId}/views/${res.id}`);
+      setToast({
+        type: TOAST_TYPE.SUCCESS,
+        title: "Success!",
+        message: "View created successfully.",
       });
+    } catch (_error) {
+      setToast({
+        type: TOAST_TYPE.ERROR,
+        title: "Error!",
+        message: "Failed to create view. Please try again.",
+      });
+    }
   };
 
   const handleUpdateView = async (payload: IProjectView) => {
-    await updateView(workspaceSlug, projectId, data?.id as string, payload)
-      .then((viewDetails) => {
-        mutateFilters(workspaceSlug, viewDetails.id, viewDetails);
-        resetExpression(EIssuesStoreType.PROJECT_VIEW, viewDetails.id, viewDetails.rich_filters);
-        handleClose();
-        captureSuccess({
-          eventName: PROJECT_VIEW_TRACKER_EVENTS.update,
-          payload: {
-            view_id: data?.id,
-          },
-        });
-      })
-      .catch((err) => {
-        setToast({
-          type: TOAST_TYPE.ERROR,
-          title: "Error!",
-          message: err?.detail ?? "Something went wrong. Please try again.",
-        });
-        captureError({
-          eventName: PROJECT_VIEW_TRACKER_EVENTS.update,
-          payload: {
-            view_id: data?.id,
-          },
-        });
+    try {
+      const viewDetails = await updateView(workspaceSlug, projectId, data?.id as string, payload);
+      mutateFilters(workspaceSlug, viewDetails.id, viewDetails);
+      resetExpression(EIssuesStoreType.PROJECT_VIEW, viewDetails.id, viewDetails.rich_filters);
+      handleClose();
+    } catch (_error) {
+      setToast({
+        type: TOAST_TYPE.ERROR,
+        title: "Error!",
+        message: "Failed to update view. Please try again.",
       });
+    }
   };
 
   const handleFormSubmit = async (formData: IProjectView) => {
diff --git a/apps/web/core/components/views/quick-actions.tsx b/apps/web/core/components/views/quick-actions.tsx
index 4fcaab65d..ea85af92f 100644
--- a/apps/web/core/components/views/quick-actions.tsx
+++ b/apps/web/core/components/views/quick-actions.tsx
@@ -1,7 +1,15 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useState } from "react";
 import { observer } from "mobx-react";
+import { MoreHorizontal } from "lucide-react";
 // types
-import { EUserPermissions, EUserPermissionsLevel, PROJECT_VIEW_TRACKER_ELEMENTS } from "@plane/constants";
+import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import { IconButton } from "@plane/propel/icon-button";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { IProjectView } from "@plane/types";
 // ui
@@ -9,10 +17,9 @@ import type { TContextMenuItem } from "@plane/ui";
 import { ContextMenu, CustomMenu } from "@plane/ui";
 import { copyUrlToClipboard, cn } from "@plane/utils";
 // helpers
-import { captureClick } from "@/helpers/event-tracker.helper";
+import { useViewMenuItems } from "@/components/common/quick-actions-helper";
 // hooks
 import { useUser, useUserPermissions } from "@/hooks/store/user";
-import { useViewMenuItems } from "@/plane-web/components/views/helper";
 import { PublishViewModal, useViewPublish } from "@/plane-web/components/views/publish";
 // local imports
 import { DeleteProjectViewModal } from "./delete-view-modal";
@@ -54,27 +61,28 @@ export const ViewQuickActions = observer(function ViewQuickActions(props: Props)
     });
   const handleOpenInNewTab = () => window.open(`/${viewLink}`, "_blank");
 
-  const MENU_ITEMS: TContextMenuItem[] = useViewMenuItems({
+  const menuResult = useViewMenuItems({
     isOwner,
     isAdmin,
-    setDeleteViewModal,
-    setCreateUpdateViewModal,
-    handleOpenInNewTab,
-    handleCopyText,
-    isLocked: view.is_locked,
     workspaceSlug,
     projectId,
-    viewId: view.id,
+    view,
+    handleEdit: () => setCreateUpdateViewModal(true),
+    handleDelete: () => setDeleteViewModal(true),
+    handleCopyLink: handleCopyText,
+    handleOpenInNewTab,
   });
 
+  // Handle both CE (array) and EE (object) return types
+  const MENU_ITEMS: TContextMenuItem[] = Array.isArray(menuResult) ? menuResult : menuResult.items;
+  const additionalModals = Array.isArray(menuResult) ? null : menuResult.modals;
+
   if (publishContextMenu) MENU_ITEMS.splice(2, 0, publishContextMenu);
 
   const CONTEXT_MENU_ITEMS = MENU_ITEMS.map(function CONTEXT_MENU_ITEMS(item) {
     return {
       ...item,
-
       action: () => {
-        captureClick({ elementName: PROJECT_VIEW_TRACKER_ELEMENTS.LIST_ITEM_CONTEXT_MENU });
         item.action();
       },
     };
@@ -91,21 +99,26 @@ export const ViewQuickActions = observer(function ViewQuickActions(props: Props)
       />
       <DeleteProjectViewModal data={view} isOpen={deleteViewModal} onClose={() => setDeleteViewModal(false)} />
       <PublishViewModal isOpen={isPublishModalOpen} onClose={() => setPublishModalOpen(false)} view={view} />
+      {additionalModals}
       <ContextMenu parentRef={parentRef} items={CONTEXT_MENU_ITEMS} />
-      <CustomMenu ellipsis placement="bottom-end" closeOnSelect buttonClassName={customClassName}>
+      <CustomMenu
+        customButton={<IconButton variant="tertiary" size="lg" icon={MoreHorizontal} />}
+        placement="bottom-end"
+        closeOnSelect
+        buttonClassName={customClassName}
+      >
         {MENU_ITEMS.map((item) => {
           if (item.shouldRender === false) return null;
           return (
             <CustomMenu.MenuItem
               key={item.key}
               onClick={() => {
-                captureClick({ elementName: PROJECT_VIEW_TRACKER_ELEMENTS.QUICK_ACTIONS });
                 item.action();
               }}
               className={cn(
                 "flex items-center gap-2",
                 {
-                  "text-custom-text-400": item.disabled,
+                  "text-placeholder": item.disabled,
                 },
                 item.className
               )}
@@ -116,8 +129,8 @@ export const ViewQuickActions = observer(function ViewQuickActions(props: Props)
                 <h5>{item.title}</h5>
                 {item.description && (
                   <p
-                    className={cn("text-custom-text-300 whitespace-pre-line", {
-                      "text-custom-text-400": item.disabled,
+                    className={cn("whitespace-pre-line text-tertiary", {
+                      "text-placeholder": item.disabled,
                     })}
                   >
                     {item.description}
diff --git a/apps/web/core/components/views/view-list-header.tsx b/apps/web/core/components/views/view-list-header.tsx
index 9ba28650e..2c25850f0 100644
--- a/apps/web/core/components/views/view-list-header.tsx
+++ b/apps/web/core/components/views/view-list-header.tsx
@@ -1,9 +1,15 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React, { useEffect, useRef, useState } from "react";
 import { observer } from "mobx-react";
 // icons
-import { ListFilter, Search } from "lucide-react";
+import { ListFilter } from "lucide-react";
 import { useOutsideClickDetector } from "@plane/hooks";
-import { CloseIcon } from "@plane/propel/icons";
+import { SearchIcon, CloseIcon } from "@plane/propel/icons";
 // plane helpers
 // helpers
 import { cn } from "@plane/utils";
@@ -13,6 +19,7 @@ import { useProjectView } from "@/hooks/store/use-project-view";
 import { FiltersDropdown } from "../issues/issue-layouts/filters";
 import { ViewFiltersSelection } from "./filters/filter-selection";
 import { ViewOrderByDropdown } from "./filters/order-by";
+import { IconButton } from "@plane/propel/icon-button";
 
 export const ViewListHeader = observer(function ViewListHeader() {
   // states
@@ -47,32 +54,32 @@ export const ViewListHeader = observer(function ViewListHeader() {
   }, [filters?.searchQuery]);
 
   return (
-    <div className="h-full flex items-center gap-2">
+    <div className="flex h-full items-center gap-2">
       <div className="flex items-center">
         {!isSearchOpen && (
-          <button
-            type="button"
-            className="-mr-1 p-2 hover:bg-custom-background-80 rounded text-custom-text-400 grid place-items-center"
+          <IconButton
+            variant="ghost"
+            size="lg"
+            className="-mr-1"
             onClick={() => {
               setIsSearchOpen(true);
               inputRef.current?.focus();
             }}
-          >
-            <Search className="h-3.5 w-3.5" />
-          </button>
+            icon={SearchIcon}
+          />
         )}
         <div
           className={cn(
-            "ml-auto flex items-center justify-start gap-1 rounded-md border border-transparent bg-custom-background-100 text-custom-text-400 w-0 transition-[width] ease-linear overflow-hidden opacity-0",
+            "ml-auto flex w-0 items-center justify-start gap-1 overflow-hidden rounded-md border border-transparent bg-surface-1 text-placeholder opacity-0 transition-[width] ease-linear",
             {
-              "w-64 px-2.5 py-1.5 border-custom-border-200 opacity-100": isSearchOpen,
+              "w-64 border-subtle px-2.5 py-1.5 opacity-100": isSearchOpen,
             }
           )}
         >
-          <Search className="h-3.5 w-3.5" />
+          <SearchIcon className="h-3.5 w-3.5" />
           <input
             ref={inputRef}
-            className="w-full max-w-[234px] border-none bg-transparent text-sm text-custom-text-100 placeholder:text-custom-text-400 focus:outline-none"
+            className="w-full max-w-[234px] border-none bg-transparent text-13 text-primary placeholder:text-placeholder focus:outline-none"
             placeholder="Search"
             value={filters?.searchQuery}
             onChange={(e) => updateFilters("searchQuery", e.target.value)}
@@ -92,7 +99,7 @@ export const ViewListHeader = observer(function ViewListHeader() {
           )}
         </div>
       </div>
-      <div className="hidden md:flex items-center gap-2">
+      <div className="hidden items-center gap-2 md:flex">
         <ViewOrderByDropdown
           sortBy={filters.sortBy}
           sortKey={filters.sortKey}
diff --git a/apps/web/core/components/views/view-list-item-action.tsx b/apps/web/core/components/views/view-list-item-action.tsx
index c50c20521..5bfa74a32 100644
--- a/apps/web/core/components/views/view-list-item-action.tsx
+++ b/apps/web/core/components/views/view-list-item-action.tsx
@@ -1,11 +1,17 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React, { useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
-import { Earth, Lock } from "lucide-react";
+import { Earth } from "lucide-react";
 // plane imports
 import { EUserPermissions, EUserPermissionsLevel, IS_FAVORITE_MENU_OPEN } from "@plane/constants";
 import { useLocalStorage } from "@plane/hooks";
+import { LockIcon } from "@plane/propel/icons";
 import { Tooltip } from "@plane/propel/tooltip";
 import type { IProjectView } from "@plane/types";
 import { EViewAccess } from "@plane/types";
@@ -87,18 +93,18 @@ export const ViewListItemAction = observer(function ViewListItemAction(props: Pr
         />
       )}
       <DeleteProjectViewModal data={view} isOpen={deleteViewModal} onClose={() => setDeleteViewModal(false)} />
-      <div className="cursor-default text-custom-text-300">
+      <div className="cursor-default text-tertiary">
         <Tooltip tooltipContent={access === EViewAccess.PUBLIC ? "Public" : "Private"}>
-          {access === EViewAccess.PUBLIC ? <Earth className="h-4 w-4" /> : <Lock className="h-4 w-4" />}
+          {access === EViewAccess.PUBLIC ? <Earth className="h-4 w-4" /> : <LockIcon className="h-4 w-4" />}
         </Tooltip>
       </div>
 
       {view?.anchor && publishLink ? (
         <div
-          className="px-3 py-1.5 bg-green-500/20 text-green-500 rounded text-xs font-medium flex items-center gap-1.5 cursor-pointer"
+          className="flex cursor-pointer items-center gap-1.5 rounded-sm bg-success-subtle px-3 py-1.5 text-11 font-medium text-success-primary"
           onClick={() => setPublishModalOpen(true)}
         >
-          <span className="flex-shrink-0 rounded-full size-1.5 bg-green-500" />
+          <span className="size-1.5 flex-shrink-0 rounded-full bg-success-primary" />
           Live
         </div>
       ) : (
diff --git a/apps/web/core/components/views/view-list-item.tsx b/apps/web/core/components/views/view-list-item.tsx
index 403c801fd..a790daca0 100644
--- a/apps/web/core/components/views/view-list-item.tsx
+++ b/apps/web/core/components/views/view-list-item.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useRef } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
@@ -34,7 +39,7 @@ export const ProjectViewListItem = observer(function ProjectViewListItem(props:
           {view?.logo_props?.in_use ? (
             <Logo logo={view?.logo_props} size={16} type="lucide" />
           ) : (
-            <ViewsIcon className="h-4 w-4 text-custom-text-300" />
+            <ViewsIcon className="h-4 w-4 text-tertiary" />
           )}
         </>
       }
diff --git a/apps/web/core/components/views/views-list.tsx b/apps/web/core/components/views/views-list.tsx
index 3c58952e7..727f616cd 100644
--- a/apps/web/core/components/views/views-list.tsx
+++ b/apps/web/core/components/views/views-list.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // plane imports
@@ -51,7 +57,7 @@ export const ProjectViewsList = observer(function ProjectViewsList() {
             {filteredProjectViews.length > 0 ? (
               filteredProjectViews.map((view) => <ProjectViewListItem key={view.id} view={view} />)
             ) : (
-              <p className="mt-10 text-center text-sm text-custom-text-300">No results found</p>
+              <p className="mt-10 text-center text-13 text-tertiary">No results found</p>
             )}
           </ListLayout>
         </div>
diff --git a/apps/web/core/components/web-hooks/create-webhook-modal.tsx b/apps/web/core/components/web-hooks/create-webhook-modal.tsx
index 49f8b6c31..ccde260ee 100644
--- a/apps/web/core/components/web-hooks/create-webhook-modal.tsx
+++ b/apps/web/core/components/web-hooks/create-webhook-modal.tsx
@@ -1,7 +1,12 @@
-import React, { useState } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
 import { useParams } from "next/navigation";
 // types
-import { WORKSPACE_SETTINGS_TRACKER_EVENTS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { IWebhook, IWorkspace, TWebhookEventTypes } from "@plane/types";
@@ -10,7 +15,6 @@ import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
 // helpers
 import { csvDownload } from "@plane/utils";
 // hooks
-import { captureError, captureSuccess } from "@/helpers/event-tracker.helper";
 import useKeypress from "@/hooks/use-keypress";
 // components
 import { WebhookForm } from "./form";
@@ -68,12 +72,6 @@ export function CreateWebhookModal(props: ICreateWebhookModal) {
 
     await createWebhook(workspaceSlug.toString(), payload)
       .then(({ webHook, secretKey }) => {
-        captureSuccess({
-          eventName: WORKSPACE_SETTINGS_TRACKER_EVENTS.webhook_created,
-          payload: {
-            webhook: formData?.url,
-          },
-        });
         setToast({
           type: TOAST_TYPE.SUCCESS,
           title: t("workspace_settings.settings.webhooks.toasts.created.title"),
@@ -86,13 +84,6 @@ export function CreateWebhookModal(props: ICreateWebhookModal) {
         csvDownload(csvData, `webhook-secret-key-${Date.now()}`);
       })
       .catch((error) => {
-        captureError({
-          eventName: WORKSPACE_SETTINGS_TRACKER_EVENTS.webhook_created,
-          payload: {
-            webhook: formData?.url,
-          },
-          error: error as Error,
-        });
         setToast({
           type: TOAST_TYPE.ERROR,
           title: t("workspace_settings.settings.webhooks.toasts.not_created.title"),
diff --git a/apps/web/core/components/web-hooks/delete-webhook-modal.tsx b/apps/web/core/components/web-hooks/delete-webhook-modal.tsx
index f370b8b60..1e13fde0b 100644
--- a/apps/web/core/components/web-hooks/delete-webhook-modal.tsx
+++ b/apps/web/core/components/web-hooks/delete-webhook-modal.tsx
@@ -1,11 +1,15 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useState } from "react";
 import { useParams } from "next/navigation";
 // ui
-import { WORKSPACE_SETTINGS_TRACKER_EVENTS } from "@plane/constants";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import { AlertModalCore } from "@plane/ui";
 // hooks
-import { captureError, captureSuccess } from "@/helpers/event-tracker.helper";
 import { useWebhook } from "@/hooks/store/use-webhook";
 import { useAppRouter } from "@/hooks/use-app-router";
 
@@ -31,39 +35,23 @@ export function DeleteWebhookModal(props: IDeleteWebhook) {
 
   const handleDelete = async () => {
     if (!workspaceSlug || !webhookId) return;
-
     setIsDeleting(true);
-
-    removeWebhook(workspaceSlug.toString(), webhookId.toString())
-      .then(() => {
-        captureSuccess({
-          eventName: WORKSPACE_SETTINGS_TRACKER_EVENTS.webhook_deleted,
-          payload: {
-            webhook: webhookId,
-          },
-        });
-        setToast({
-          type: TOAST_TYPE.SUCCESS,
-          title: "Success!",
-          message: "Webhook deleted successfully.",
-        });
-        router.replace(`/${workspaceSlug}/settings/webhooks/`);
-      })
-      .catch((error) => {
-        captureError({
-          eventName: WORKSPACE_SETTINGS_TRACKER_EVENTS.webhook_deleted,
-          payload: {
-            webhook: webhookId,
-          },
-          error: error as Error,
-        });
-        setToast({
-          type: TOAST_TYPE.ERROR,
-          title: "Error!",
-          message: error?.error ?? "Something went wrong. Please try again.",
-        });
-      })
-      .finally(() => setIsDeleting(false));
+    try {
+      await removeWebhook(workspaceSlug.toString(), webhookId.toString());
+      router.replace(`/${workspaceSlug}/settings/webhooks/`);
+      setToast({
+        type: TOAST_TYPE.SUCCESS,
+        title: "Success!",
+        message: "Webhook deleted successfully.",
+      });
+    } catch (_error) {
+      setToast({
+        type: TOAST_TYPE.ERROR,
+        title: "Error!",
+        message: "Webhook could not be deleted. Please try again.",
+      });
+    }
+    setIsDeleting(false);
   };
 
   return (
diff --git a/apps/web/core/components/web-hooks/empty-state.tsx b/apps/web/core/components/web-hooks/empty-state.tsx
index ee113252e..e79debd06 100644
--- a/apps/web/core/components/web-hooks/empty-state.tsx
+++ b/apps/web/core/components/web-hooks/empty-state.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 // ui
 import { Button } from "@plane/propel/button";
@@ -12,14 +18,12 @@ export function WebhooksEmptyState(props: Props) {
   const { onClick } = props;
   return (
     <div
-      className={`mx-auto flex w-full items-center justify-center rounded-sm border border-custom-border-200 bg-custom-background-90 px-16 py-10 lg:w-3/4`}
+      className={`mx-auto flex w-full items-center justify-center rounded-xs border border-subtle bg-surface-2 px-16 py-10 lg:w-3/4`}
     >
       <div className="flex w-full flex-col items-center text-center">
-        <img src={EmptyWebhook} className="w-52 sm:w-60 object-cover" alt="empty" />
-        <h6 className="mb-3 mt-6 text-xl font-semibold sm:mt-8">No webhooks</h6>
-        <p className="mb-7 text-custom-text-300 sm:mb-8">
-          Create webhooks to receive real-time updates and automate actions
-        </p>
+        <img src={EmptyWebhook} className="w-52 object-cover sm:w-60" alt="empty" />
+        <h6 className="mt-6 mb-3 text-18 font-semibold sm:mt-8">No webhooks</h6>
+        <p className="mb-7 text-tertiary sm:mb-8">Create webhooks to receive real-time updates and automate actions</p>
         <Button className="flex items-center gap-1.5" onClick={onClick}>
           Add webhook
         </Button>
diff --git a/apps/web/core/components/web-hooks/form/delete-section.tsx b/apps/web/core/components/web-hooks/form/delete-section.tsx
index 7093d1820..55225ae24 100644
--- a/apps/web/core/components/web-hooks/form/delete-section.tsx
+++ b/apps/web/core/components/web-hooks/form/delete-section.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { Disclosure, Transition } from "@headlessui/react";
 import { WORKSPACE_SETTINGS_TRACKER_ELEMENTS } from "@plane/constants";
 import { Button } from "@plane/propel/button";
@@ -11,11 +17,11 @@ export function WebhookDeleteSection(props: Props) {
   const { openDeleteModal } = props;
 
   return (
-    <Disclosure as="div" className="border-t border-custom-border-200">
+    <Disclosure as="div" className="border-t border-subtle">
       {({ open }) => (
         <div className="w-full">
           <Disclosure.Button as="button" type="button" className="flex w-full items-center justify-between py-4">
-            <span className="text-lg tracking-tight">Danger zone</span>
+            <span className="text-16 tracking-tight">Danger zone</span>
             {open ? <ChevronUpIcon className="h-5 w-5" /> : <ChevronDownIcon className="h-5 w-5" />}
           </Disclosure.Button>
 
@@ -30,13 +36,14 @@ export function WebhookDeleteSection(props: Props) {
           >
             <Disclosure.Panel>
               <div className="flex flex-col gap-8">
-                <span className="text-sm tracking-tight">
+                <span className="text-13 tracking-tight">
                   Once a webhook is deleted, it cannot be restored. Future events will no longer be delivered to this
                   webhook.
                 </span>
                 <div>
                   <Button
-                    variant="danger"
+                    variant="error-fill"
+                    size="lg"
                     onClick={openDeleteModal}
                     data-ph-element={WORKSPACE_SETTINGS_TRACKER_ELEMENTS.WEBHOOK_DELETE_BUTTON}
                   >
diff --git a/apps/web/core/components/web-hooks/form/event-types.tsx b/apps/web/core/components/web-hooks/form/event-types.tsx
index f9111fc19..e98f89d63 100644
--- a/apps/web/core/components/web-hooks/form/event-types.tsx
+++ b/apps/web/core/components/web-hooks/form/event-types.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // types
 import { useTranslation } from "@plane/i18n";
 import type { TWebhookEventTypes } from "@plane/types";
@@ -24,7 +30,7 @@ export function WebhookOptions(props: Props) {
 
   return (
     <>
-      <h6 className="text-sm font-medium">{t("workspace_settings.settings.webhooks.modal.question")}</h6>
+      <h6 className="text-13 font-medium">{t("workspace_settings.settings.webhooks.modal.question")}</h6>
       <div className="space-y-3">
         {WEBHOOK_EVENT_TYPES.map((option) => (
           <div key={option.key} className="flex items-center gap-2">
@@ -35,7 +41,7 @@ export function WebhookOptions(props: Props) {
               checked={value == option.key}
               onChange={() => onChange(option.key)}
             />
-            <label className="text-sm" htmlFor={option.key}>
+            <label className="text-13" htmlFor={option.key}>
               {t(option.i18n_label)}
             </label>
           </div>
diff --git a/apps/web/core/components/web-hooks/form/form.tsx b/apps/web/core/components/web-hooks/form/form.tsx
index c26b5e4f7..61946a3e9 100644
--- a/apps/web/core/components/web-hooks/form/form.tsx
+++ b/apps/web/core/components/web-hooks/form/form.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React, { useEffect, useState } from "react";
 import { observer } from "mobx-react";
 import { Controller, useForm } from "react-hook-form";
@@ -62,8 +68,8 @@ export const WebhookForm = observer(function WebhookForm(props: Props) {
 
   return (
     <form onSubmit={handleSubmit(handleFormSubmit)}>
-      <div className="space-y-5 ">
-        <div className="text-xl font-medium text-custom-text-200">
+      <div className="space-y-5">
+        <div className="text-18 font-medium text-secondary">
           {data
             ? t("workspace_settings.settings.webhooks.modal.details")
             : t("workspace_settings.settings.webhooks.modal.title")}
@@ -80,7 +86,7 @@ export const WebhookForm = observer(function WebhookForm(props: Props) {
                 <WebhookInput value={value} onChange={onChange} hasError={Boolean(errors.url)} />
               )}
             />
-            {errors.url && <div className="text-xs text-red-500">{errors.url.message}</div>}
+            {errors.url && <div className="text-11 text-danger-primary">{errors.url.message}</div>}
           </div>
           {data && <WebhookToggle control={control} />}
           <WebhookOptions value={webhookEventType} onChange={(val) => setWebhookEventType(val)} />
@@ -90,9 +96,10 @@ export const WebhookForm = observer(function WebhookForm(props: Props) {
         </div>
       </div>
       {data ? (
-        <div className="pt-0 space-y-5">
+        <div className="space-y-5 pt-0">
           <WebhookSecretKey data={data} />
           <Button
+            size="lg"
             type="submit"
             loading={isSubmitting}
             data-ph-element={WORKSPACE_SETTINGS_TRACKER_ELEMENTS.WEBHOOK_UPDATE_BUTTON}
@@ -101,12 +108,12 @@ export const WebhookForm = observer(function WebhookForm(props: Props) {
           </Button>
         </div>
       ) : (
-        <div className="px-5 py-4 flex items-center justify-end gap-2 border-t-[0.5px] border-custom-border-200">
-          <Button variant="neutral-primary" size="sm" onClick={handleClose}>
+        <div className="flex items-center justify-end gap-2 border-t-[0.5px] border-subtle px-5 py-4">
+          <Button variant="secondary" size="lg" onClick={handleClose}>
             {t("cancel")}
           </Button>
           {!webhookSecretKey && (
-            <Button type="submit" variant="primary" size="sm" loading={isSubmitting} className="capitalize">
+            <Button type="submit" variant="primary" size="lg" loading={isSubmitting} className="capitalize">
               {isSubmitting ? t("common.creating") : t("common.create")}
             </Button>
           )}
diff --git a/apps/web/core/components/web-hooks/form/index.ts b/apps/web/core/components/web-hooks/form/index.ts
index 680d1c0b2..5de5b3bcf 100644
--- a/apps/web/core/components/web-hooks/form/index.ts
+++ b/apps/web/core/components/web-hooks/form/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./delete-section";
 export * from "./event-types";
 export * from "./form";
diff --git a/apps/web/core/components/web-hooks/form/individual-event-options.tsx b/apps/web/core/components/web-hooks/form/individual-event-options.tsx
index b64c36652..d4c367061 100644
--- a/apps/web/core/components/web-hooks/form/individual-event-options.tsx
+++ b/apps/web/core/components/web-hooks/form/individual-event-options.tsx
@@ -1,6 +1,13 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { Control } from "react-hook-form";
 import { Controller } from "react-hook-form";
 import type { IWebhook } from "@plane/types";
+import { Checkbox } from "@plane/ui";
 
 export const INDIVIDUAL_WEBHOOK_OPTIONS: {
   key: keyof IWebhook;
@@ -49,18 +56,12 @@ export function WebhookIndividualEventOptions({ control }: Props) {
           render={({ field: { onChange, value } }) => (
             <div>
               <div className="flex items-center gap-2">
-                <input
-                  id={option.key}
-                  onChange={() => onChange(!value)}
-                  type="checkbox"
-                  name="selectIndividualEvents"
-                  checked={value === true}
-                />
-                <label className="text-sm" htmlFor={option.key}>
+                <Checkbox id={option.key} onChange={() => onChange(!value)} checked={value === true} />
+                <label className="text-13" htmlFor={option.key}>
                   {option.label}
                 </label>
               </div>
-              <p className="ml-6 mt-0.5 text-xs text-custom-text-300">{option.description}</p>
+              <p className="mt-0.5 ml-6 text-11 text-tertiary">{option.description}</p>
             </div>
           )}
         />
diff --git a/apps/web/core/components/web-hooks/form/input.tsx b/apps/web/core/components/web-hooks/form/input.tsx
index dfe5d87b9..1618f4d88 100644
--- a/apps/web/core/components/web-hooks/form/input.tsx
+++ b/apps/web/core/components/web-hooks/form/input.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useTranslation } from "@plane/i18n";
 import { Input } from "@plane/ui";
 
@@ -12,7 +18,7 @@ export function WebhookInput(props: Props) {
 
   return (
     <>
-      <h6 className="text-sm font-medium">{t("workspace_settings.settings.webhooks.modal.payload")}</h6>
+      <h6 className="text-13 font-medium">{t("workspace_settings.settings.webhooks.modal.payload")}</h6>
       <Input
         type="url"
         className="h-11 w-full"
diff --git a/apps/web/core/components/web-hooks/form/secret-key.tsx b/apps/web/core/components/web-hooks/form/secret-key.tsx
index 3591bb601..98bf1b73c 100644
--- a/apps/web/core/components/web-hooks/form/secret-key.tsx
+++ b/apps/web/core/components/web-hooks/form/secret-key.tsx
@@ -1,12 +1,18 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useState } from "react";
 import { range } from "lodash-es";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // icons
-import { Copy, Eye, EyeOff, RefreshCw } from "lucide-react";
+import { Eye, EyeOff, RefreshCw } from "lucide-react";
 import { useTranslation } from "@plane/i18n";
 import { Button } from "@plane/propel/button";
+import { CopyIcon } from "@plane/propel/icons";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import { Tooltip } from "@plane/propel/tooltip";
 import type { IWebhook } from "@plane/types";
@@ -89,7 +95,7 @@ export const WebhookSecretKey = observer(function WebhookSecretKey(props: Props)
 
   const SECRET_KEY_OPTIONS = [
     { label: "View secret key", Icon: shouldShowKey ? EyeOff : Eye, onClick: toggleShowKey, key: "eye" },
-    { label: "Copy secret key", Icon: Copy, onClick: handleCopySecretKey, key: "copy" },
+    { label: "Copy secret key", Icon: CopyIcon, onClick: handleCopySecretKey, key: "copy" },
   ];
 
   return (
@@ -97,20 +103,18 @@ export const WebhookSecretKey = observer(function WebhookSecretKey(props: Props)
       {(data || webhookSecretKey) && (
         <div className="space-y-2">
           {webhookId && (
-            <div className="text-sm font-medium">{t("workspace_settings.settings.webhooks.secret_key.title")}</div>
+            <div className="text-13 font-medium">{t("workspace_settings.settings.webhooks.secret_key.title")}</div>
           )}
-          <div className="text-xs text-custom-text-400">
-            {t("workspace_settings.settings.webhooks.secret_key.message")}
-          </div>
-          <div className="flex flex-col md:flex-row md:items-center gap-4">
-            <div className="flex flex-grow max-w-lg items-center justify-between self-stretch rounded border border-custom-border-200 px-2 h-8">
-              <div className="select-none overflow-hidden font-medium">
+          <div className="text-11 text-placeholder">{t("workspace_settings.settings.webhooks.secret_key.message")}</div>
+          <div className="flex flex-col gap-4 md:flex-row md:items-center">
+            <div className="flex h-8 max-w-lg flex-grow items-center justify-between self-stretch rounded-sm border border-subtle px-2">
+              <div className="overflow-hidden font-medium select-none">
                 {shouldShowKey ? (
-                  <p className="text-xs">{webhookSecretKey}</p>
+                  <p className="text-11">{webhookSecretKey}</p>
                 ) : (
-                  <div className="flex items-center gap-1.5 overflow-hidden mr-2">
+                  <div className="mr-2 flex items-center gap-1.5 overflow-hidden">
                     {range(30).map((index) => (
-                      <div key={index} className="h-1 w-1 rounded-full bg-custom-text-400 flex-shrink-0" />
+                      <div key={index} className="h-1 w-1 flex-shrink-0 rounded-full bg-(--text-color-disabled)" />
                     ))}
                   </div>
                 )}
@@ -120,7 +124,7 @@ export const WebhookSecretKey = observer(function WebhookSecretKey(props: Props)
                   {SECRET_KEY_OPTIONS.map((option) => (
                     <Tooltip key={option.key} tooltipContent={option.label} isMobile={isMobile}>
                       <button type="button" className="grid flex-shrink-0 place-items-center" onClick={option.onClick}>
-                        <option.Icon className="h-3 w-3 text-custom-text-400" />
+                        <option.Icon className="h-3 w-3 text-placeholder" />
                       </button>
                     </Tooltip>
                   ))}
@@ -129,8 +133,13 @@ export const WebhookSecretKey = observer(function WebhookSecretKey(props: Props)
             </div>
             {data && (
               <div>
-                <Button onClick={handleRegenerateSecretKey} variant="accent-primary" loading={isRegenerating}>
-                  <RefreshCw className="h-3 w-3" />
+                <Button
+                  onClick={handleRegenerateSecretKey}
+                  variant="secondary"
+                  size="lg"
+                  loading={isRegenerating}
+                  prependIcon={<RefreshCw />}
+                >
                   {isRegenerating ? `${t("re_generating")}...` : t("re_generate_key")}
                 </Button>
               </div>
diff --git a/apps/web/core/components/web-hooks/form/toggle.tsx b/apps/web/core/components/web-hooks/form/toggle.tsx
index e6d4a68c3..7ac83365f 100644
--- a/apps/web/core/components/web-hooks/form/toggle.tsx
+++ b/apps/web/core/components/web-hooks/form/toggle.tsx
@@ -1,12 +1,15 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { Control } from "react-hook-form";
 import { Controller } from "react-hook-form";
 // constants
-import { WORKSPACE_SETTINGS_TRACKER_ELEMENTS } from "@plane/constants";
 import type { IWebhook } from "@plane/types";
 // ui
 import { ToggleSwitch } from "@plane/ui";
-// hooks
-import { captureClick } from "@/helpers/event-tracker.helper";
 
 interface IWebHookToggle {
   control: Control<IWebhook, any>;
@@ -15,7 +18,7 @@ interface IWebHookToggle {
 export function WebhookToggle({ control }: IWebHookToggle) {
   return (
     <div className="flex gap-6">
-      <div className="text-sm font-medium">Enable webhook</div>
+      <div className="text-13 font-medium">Enable webhook</div>
       <Controller
         control={control}
         name="is_active"
@@ -23,9 +26,6 @@ export function WebhookToggle({ control }: IWebHookToggle) {
           <ToggleSwitch
             value={value}
             onChange={(val: boolean) => {
-              captureClick({
-                elementName: WORKSPACE_SETTINGS_TRACKER_ELEMENTS.WEBHOOK_DETAILS_PAGE_TOGGLE_SWITCH,
-              });
               onChange(val);
             }}
             size="sm"
diff --git a/apps/web/core/components/web-hooks/generated-hook-details.tsx b/apps/web/core/components/web-hooks/generated-hook-details.tsx
index 2d82d3f0f..03755264a 100644
--- a/apps/web/core/components/web-hooks/generated-hook-details.tsx
+++ b/apps/web/core/components/web-hooks/generated-hook-details.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // components
 // ui
 import { useTranslation } from "@plane/i18n";
@@ -19,13 +25,13 @@ export function GeneratedHookDetails(props: Props) {
     <>
       <div className="space-y-5 p-5">
         <div className="space-y-3">
-          <h3 className="text-xl font-medium text-custom-text-200">{t("workspace_settings.key_created")}</h3>
-          <p className="text-sm text-custom-text-400">{t("workspace_settings.copy_key")}</p>
+          <h3 className="text-18 font-medium text-secondary">{t("workspace_settings.key_created")}</h3>
+          <p className="text-13 text-placeholder">{t("workspace_settings.copy_key")}</p>
         </div>
         <WebhookSecretKey data={webhookDetails} />
       </div>
-      <div className="px-5 py-4 flex items-center justify-end gap-2 border-t-[0.5px] border-custom-border-200">
-        <Button variant="neutral-primary" size="sm" onClick={handleClose}>
+      <div className="flex items-center justify-end gap-2 border-t-[0.5px] border-subtle px-5 py-4">
+        <Button variant="secondary" size="lg" onClick={handleClose}>
           Close
         </Button>
       </div>
diff --git a/apps/web/core/components/web-hooks/index.ts b/apps/web/core/components/web-hooks/index.ts
index fd23f4330..1fa7690da 100644
--- a/apps/web/core/components/web-hooks/index.ts
+++ b/apps/web/core/components/web-hooks/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./delete-webhook-modal";
 export * from "./empty-state";
 export * from "./form";
diff --git a/apps/web/core/components/web-hooks/utils.ts b/apps/web/core/components/web-hooks/utils.ts
index ea8447f57..28a0029e0 100644
--- a/apps/web/core/components/web-hooks/utils.ts
+++ b/apps/web/core/components/web-hooks/utils.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // helpers
 import type { IWebhook, IWorkspace } from "@plane/types";
 import { renderFormattedPayloadDate } from "@plane/utils";
diff --git a/apps/web/core/components/web-hooks/webhooks-list-item.tsx b/apps/web/core/components/web-hooks/webhooks-list-item.tsx
index ccdb3a059..444da3c19 100644
--- a/apps/web/core/components/web-hooks/webhooks-list-item.tsx
+++ b/apps/web/core/components/web-hooks/webhooks-list-item.tsx
@@ -1,14 +1,16 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import Link from "next/link";
 import { useParams } from "next/navigation";
-import { WORKSPACE_SETTINGS_TRACKER_ELEMENTS, WORKSPACE_SETTINGS_TRACKER_EVENTS } from "@plane/constants";
+// Plane imports
 import type { IWebhook } from "@plane/types";
-// hooks
 import { ToggleSwitch } from "@plane/ui";
-import { captureElementAndEvent } from "@/helpers/event-tracker.helper";
+// hooks
 import { useWebhook } from "@/hooks/store/use-webhook";
-// ui
-// types
 
 interface IWebhookListItem {
   webhook: IWebhook;
@@ -21,46 +23,21 @@ export function WebhooksListItem(props: IWebhookListItem) {
   // store hooks
   const { updateWebhook } = useWebhook();
 
-  const handleToggle = () => {
+  const handleToggle = async () => {
     if (!workspaceSlug || !webhook.id) return;
-    updateWebhook(workspaceSlug.toString(), webhook.id, { is_active: !webhook.is_active })
-      .then(() => {
-        captureElementAndEvent({
-          element: {
-            elementName: WORKSPACE_SETTINGS_TRACKER_ELEMENTS.WEBHOOK_LIST_ITEM_TOGGLE_SWITCH,
-          },
-          event: {
-            eventName: WORKSPACE_SETTINGS_TRACKER_EVENTS.webhook_toggled,
-            state: "SUCCESS",
-            payload: {
-              webhook: webhook.url,
-            },
-          },
-        });
-      })
-      .catch(() => {
-        captureElementAndEvent({
-          element: {
-            elementName: WORKSPACE_SETTINGS_TRACKER_ELEMENTS.WEBHOOK_LIST_ITEM_TOGGLE_SWITCH,
-          },
-          event: {
-            eventName: WORKSPACE_SETTINGS_TRACKER_EVENTS.webhook_toggled,
-            state: "ERROR",
-            payload: {
-              webhook: webhook.url,
-            },
-          },
-        });
-      });
+    await updateWebhook(workspaceSlug.toString(), webhook.id, { is_active: !webhook.is_active });
   };
 
   return (
-    <div className="border-b border-custom-border-200">
-      <Link href={`/${workspaceSlug}/settings/webhooks/${webhook?.id}`}>
-        <span className="flex items-center justify-between gap-4 py-[18px]">
-          <h5 className="truncate text-base font-medium">{webhook.url}</h5>
+    <div className="rounded-lg border border-subtle bg-layer-2 px-4 py-3">
+      <Link
+        href={`/${workspaceSlug}/settings/webhooks/${webhook?.id}`}
+        className="flex items-center justify-between gap-4"
+      >
+        <h5 className="truncate text-body-sm-medium">{webhook.url}</h5>
+        <div className="shrink-0">
           <ToggleSwitch value={webhook.is_active} onChange={handleToggle} />
-        </span>
+        </div>
       </Link>
     </div>
   );
diff --git a/apps/web/core/components/web-hooks/webhooks-list.tsx b/apps/web/core/components/web-hooks/webhooks-list.tsx
index fe21e209d..f262ef8b2 100644
--- a/apps/web/core/components/web-hooks/webhooks-list.tsx
+++ b/apps/web/core/components/web-hooks/webhooks-list.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 // hooks
 import { useWebhook } from "@/hooks/store/use-webhook";
@@ -9,7 +15,7 @@ export const WebhooksList = observer(function WebhooksList() {
   const { webhooks } = useWebhook();
 
   return (
-    <div className="h-full w-full overflow-y-auto">
+    <div className="flex size-full flex-col gap-y-2 overflow-y-auto rounded-lg border border-subtle bg-layer-1 p-3">
       {Object.values(webhooks ?? {}).map((webhook) => (
         <WebhooksListItem key={webhook.id} webhook={webhook} />
       ))}
diff --git a/apps/web/core/components/work-item-filters/filters-hoc/base.tsx b/apps/web/core/components/work-item-filters/filters-hoc/base.tsx
index 0b83278ce..58df7f06e 100644
--- a/apps/web/core/components/work-item-filters/filters-hoc/base.tsx
+++ b/apps/web/core/components/work-item-filters/filters-hoc/base.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useEffect, useMemo } from "react";
 import { observer } from "mobx-react";
 import { v4 as uuidv4 } from "uuid";
diff --git a/apps/web/core/components/work-item-filters/filters-hoc/project-level.tsx b/apps/web/core/components/work-item-filters/filters-hoc/project-level.tsx
index b076ff03f..5e583aaee 100644
--- a/apps/web/core/components/work-item-filters/filters-hoc/project-level.tsx
+++ b/apps/web/core/components/work-item-filters/filters-hoc/project-level.tsx
@@ -1,8 +1,14 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useCallback, useMemo, useState } from "react";
 import { isEqual, cloneDeep } from "lodash-es";
 import { observer } from "mobx-react";
 // plane imports
-import { EUserPermissionsLevel, PROJECT_VIEW_TRACKER_EVENTS } from "@plane/constants";
+import { EUserPermissionsLevel } from "@plane/constants";
 import { setToast, TOAST_TYPE } from "@plane/propel/toast";
 import type { IProjectView, TWorkItemFilterExpression } from "@plane/types";
 import { EUserProjectRoles, EViewAccess } from "@plane/types";
@@ -10,7 +16,6 @@ import { EUserProjectRoles, EViewAccess } from "@plane/types";
 import { removeNillKeys } from "@/components/issues/issue-layouts/utils";
 import { CreateUpdateProjectViewModal } from "@/components/views/modal";
 // hooks
-import { captureError, captureSuccess } from "@/helpers/event-tracker.helper";
 import { useCycle } from "@/hooks/store/use-cycle";
 import { useLabel } from "@/hooks/store/use-label";
 import { useMember } from "@/hooks/store/use-member";
@@ -19,8 +24,6 @@ import { useProject } from "@/hooks/store/use-project";
 import { useProjectState } from "@/hooks/store/use-project-state";
 import { useProjectView } from "@/hooks/store/use-project-view";
 import { useUser, useUserPermissions } from "@/hooks/store/user";
-// plane web imports
-import { getAdditionalProjectLevelFiltersHOCProps } from "@/plane-web/helpers/work-item-filters/project-level";
 // local imports
 import { WorkItemFiltersHOC } from "./base";
 import type { TEnableSaveViewProps, TEnableUpdateViewProps, TSharedWorkItemFiltersHOCProps } from "./shared";
@@ -153,12 +156,6 @@ export const ProjectLevelWorkItemFiltersHOC = observer(function ProjectLevelWork
             title: "Success!",
             message: "Your view has been updated successfully.",
           });
-          captureSuccess({
-            eventName: PROJECT_VIEW_TRACKER_EVENTS.update,
-            payload: {
-              view_id: viewDetails.id,
-            },
-          });
         })
         .catch(() => {
           setToast({
@@ -166,12 +163,6 @@ export const ProjectLevelWorkItemFiltersHOC = observer(function ProjectLevelWork
             title: "Error!",
             message: "Your view could not be updated. Please try again.",
           });
-          captureError({
-            eventName: PROJECT_VIEW_TRACKER_EVENTS.update,
-            payload: {
-              view_id: viewDetails.id,
-            },
-          });
         });
     },
     [viewDetails, updateView, workspaceSlug, projectId, getViewFilterPayload]
@@ -210,11 +201,7 @@ export const ProjectLevelWorkItemFiltersHOC = observer(function ProjectLevelWork
       />
       <WorkItemFiltersHOC
         {...props}
-        {...getAdditionalProjectLevelFiltersHOCProps({
-          entityType: props.entityType,
-          workspaceSlug,
-          projectId,
-        })}
+        workspaceSlug={workspaceSlug}
         cycleIds={getProjectCycleIds(projectId) ?? undefined}
         labelIds={getProjectLabelIds(projectId)}
         memberIds={getProjectMemberIds(projectId, false) ?? undefined}
diff --git a/apps/web/core/components/work-item-filters/filters-hoc/shared.ts b/apps/web/core/components/work-item-filters/filters-hoc/shared.ts
index 01d585a67..7f598d6cb 100644
--- a/apps/web/core/components/work-item-filters/filters-hoc/shared.ts
+++ b/apps/web/core/components/work-item-filters/filters-hoc/shared.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // plane imports
 import type { TSaveViewOptions, TUpdateViewOptions } from "@plane/constants";
 import type { IWorkItemFilterInstance } from "@plane/shared-state";
diff --git a/apps/web/core/components/work-item-filters/filters-hoc/workspace-level.tsx b/apps/web/core/components/work-item-filters/filters-hoc/workspace-level.tsx
index 59842f8e9..bf09fd70c 100644
--- a/apps/web/core/components/work-item-filters/filters-hoc/workspace-level.tsx
+++ b/apps/web/core/components/work-item-filters/filters-hoc/workspace-level.tsx
@@ -1,8 +1,14 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useCallback, useMemo, useState } from "react";
 import { isEqual, cloneDeep } from "lodash-es";
 import { observer } from "mobx-react";
 // plane imports
-import { DEFAULT_GLOBAL_VIEWS_LIST, EUserPermissionsLevel, GLOBAL_VIEW_TRACKER_EVENTS } from "@plane/constants";
+import { DEFAULT_GLOBAL_VIEWS_LIST, EUserPermissionsLevel } from "@plane/constants";
 import { setToast, TOAST_TYPE } from "@plane/propel/toast";
 import type { IWorkspaceView, TWorkItemFilterExpression } from "@plane/types";
 import { EUserProjectRoles, EViewAccess } from "@plane/types";
@@ -10,7 +16,6 @@ import { EUserProjectRoles, EViewAccess } from "@plane/types";
 import { removeNillKeys } from "@/components/issues/issue-layouts/utils";
 import { CreateUpdateWorkspaceViewModal } from "@/components/workspace/views/modal";
 // hooks
-import { captureError, captureSuccess } from "@/helpers/event-tracker.helper";
 import { useGlobalView } from "@/hooks/store/use-global-view";
 import { useLabel } from "@/hooks/store/use-label";
 import { useMember } from "@/hooks/store/use-member";
@@ -140,12 +145,6 @@ export const WorkspaceLevelWorkItemFiltersHOC = observer(function WorkspaceLevel
             title: "Success!",
             message: "Your view has been updated successfully.",
           });
-          captureSuccess({
-            eventName: GLOBAL_VIEW_TRACKER_EVENTS.update,
-            payload: {
-              view_id: viewDetails.id,
-            },
-          });
         })
         .catch(() => {
           setToast({
@@ -153,12 +152,6 @@ export const WorkspaceLevelWorkItemFiltersHOC = observer(function WorkspaceLevel
             title: "Error!",
             message: "Your view could not be updated. Please try again.",
           });
-          captureError({
-            eventName: GLOBAL_VIEW_TRACKER_EVENTS.update,
-            payload: {
-              view_id: viewDetails.id,
-            },
-          });
         });
     },
     [viewDetails, updateGlobalView, workspaceSlug, getViewFilterPayload]
diff --git a/apps/web/core/components/work-item-filters/filters-row.tsx b/apps/web/core/components/work-item-filters/filters-row.tsx
index f3a6441d3..531701a8a 100644
--- a/apps/web/core/components/work-item-filters/filters-row.tsx
+++ b/apps/web/core/components/work-item-filters/filters-row.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 // plane imports
 import type { IWorkItemFilterInstance } from "@plane/shared-state";
diff --git a/apps/web/core/components/work-item-filters/filters-toggle.tsx b/apps/web/core/components/work-item-filters/filters-toggle.tsx
index 60b2073b6..17021b4df 100644
--- a/apps/web/core/components/work-item-filters/filters-toggle.tsx
+++ b/apps/web/core/components/work-item-filters/filters-toggle.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 // plane imports
 import type { EIssuesStoreType } from "@plane/types";
diff --git a/apps/web/core/components/workspace-notifications/index.ts b/apps/web/core/components/workspace-notifications/index.ts
index 1efe34c51..d98033459 100644
--- a/apps/web/core/components/workspace-notifications/index.ts
+++ b/apps/web/core/components/workspace-notifications/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./root";
diff --git a/apps/web/core/components/workspace-notifications/notification-app-sidebar-option.tsx b/apps/web/core/components/workspace-notifications/notification-app-sidebar-option.tsx
index 788963fc9..935c36ae5 100644
--- a/apps/web/core/components/workspace-notifications/notification-app-sidebar-option.tsx
+++ b/apps/web/core/components/workspace-notifications/notification-app-sidebar-option.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import useSWR from "swr";
 // plane imports
diff --git a/apps/web/core/components/workspace-notifications/root.tsx b/apps/web/core/components/workspace-notifications/root.tsx
index 26e856bd1..8dd077c4d 100644
--- a/apps/web/core/components/workspace-notifications/root.tsx
+++ b/apps/web/core/components/workspace-notifications/root.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useCallback, useEffect } from "react";
 import { observer } from "mobx-react";
 import useSWR from "swr";
@@ -78,9 +84,9 @@ export const NotificationsRoot = observer(function NotificationsRoot({ workspace
   );
 
   return (
-    <div className={cn("w-full h-full overflow-hidden ", isWorkItem && "overflow-y-auto")}>
+    <div className={cn("h-full w-full overflow-hidden", isWorkItem && "overflow-y-auto")}>
       {!currentSelectedNotificationId ? (
-        <div className="flex justify-center items-center size-full">
+        <div className="flex size-full items-center justify-center">
           <EmptyStateCompact assetKey="unknown" assetClassName="size-20" />
         </div>
       ) : (
@@ -88,7 +94,7 @@ export const NotificationsRoot = observer(function NotificationsRoot({ workspace
           {is_inbox_issue === true && workspace_slug && project_id && issue_id ? (
             <>
               {projectMemberInfoLoader ? (
-                <div className="w-full h-full flex justify-center items-center">
+                <div className="flex h-full w-full items-center justify-center">
                   <LogoSpinner />
                 </div>
               ) : (
diff --git a/apps/web/core/components/workspace-notifications/sidebar/empty-state.tsx b/apps/web/core/components/workspace-notifications/sidebar/empty-state.tsx
index f67dc0b0d..aed3b4a0c 100644
--- a/apps/web/core/components/workspace-notifications/sidebar/empty-state.tsx
+++ b/apps/web/core/components/workspace-notifications/sidebar/empty-state.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 // plane imports
 import { ENotificationTab } from "@plane/constants";
diff --git a/apps/web/core/components/workspace-notifications/sidebar/filters/applied-filter.tsx b/apps/web/core/components/workspace-notifications/sidebar/filters/applied-filter.tsx
index fd216a420..c78bae48e 100644
--- a/apps/web/core/components/workspace-notifications/sidebar/filters/applied-filter.tsx
+++ b/apps/web/core/components/workspace-notifications/sidebar/filters/applied-filter.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 // plane imports
 import { ENotificationFilterType, FILTER_TYPE_OPTIONS } from "@plane/constants";
@@ -43,11 +49,11 @@ export const AppliedFilters = observer(function AppliedFilters(props: TAppliedFi
           return (
             <Tag
               key={filter.value}
-              className="flex flex-wrap flex-start"
+              className="flex-start flex flex-wrap"
               onClick={() => handleFilterTypeChange(filter?.value, !isSelected)}
             >
-              <div className="whitespace-nowrap text-custom-text-200">{t(filter.i18n_label)}</div>
-              <div className="w-4 h-4 flex justify-center items-center transition-all rounded-sm text-custom-text-200 hover:text-custom-text-100">
+              <div className="whitespace-nowrap text-secondary">{t(filter.i18n_label)}</div>
+              <div className="flex h-4 w-4 items-center justify-center rounded-xs text-secondary transition-all hover:text-primary">
                 <CloseIcon className="h-3 w-3" />
               </div>
             </Tag>
diff --git a/apps/web/core/components/workspace-notifications/sidebar/filters/menu/index.ts b/apps/web/core/components/workspace-notifications/sidebar/filters/menu/index.ts
index 1efe34c51..d98033459 100644
--- a/apps/web/core/components/workspace-notifications/sidebar/filters/menu/index.ts
+++ b/apps/web/core/components/workspace-notifications/sidebar/filters/menu/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./root";
diff --git a/apps/web/core/components/workspace-notifications/sidebar/filters/menu/menu-option-item.tsx b/apps/web/core/components/workspace-notifications/sidebar/filters/menu/menu-option-item.tsx
index e69da7f1d..1f6a87f08 100644
--- a/apps/web/core/components/workspace-notifications/sidebar/filters/menu/menu-option-item.tsx
+++ b/apps/web/core/components/workspace-notifications/sidebar/filters/menu/menu-option-item.tsx
@@ -1,7 +1,14 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
-import { Check } from "lucide-react";
-// plane imports
+
 import type { ENotificationFilterType } from "@plane/constants";
+import { CheckIcon } from "@plane/propel/icons";
+// plane imports
 // helpers
 import { cn } from "@plane/utils";
 // hooks
@@ -27,18 +34,23 @@ export const NotificationFilterOptionItem = observer(function NotificationFilter
   return (
     <div
       key={value}
-      className="flex items-center gap-2 cursor-pointer px-2 p-1 transition-all hover:bg-custom-background-80 rounded-sm"
+      className="flex cursor-pointer items-center gap-2 rounded-xs p-1 px-2 transition-all hover:bg-layer-1"
       onClick={() => handleFilterTypeChange(value, !isSelected)}
     >
       <div
-        className={cn("flex-shrink-0 w-3 h-3 flex justify-center items-center rounded-sm transition-all", {
-          "bg-custom-primary text-white": isSelected,
-          "bg-custom-background-90": !isSelected,
+        className={cn("flex h-3 w-3 flex-shrink-0 items-center justify-center rounded-xs transition-all", {
+          "bg-accent-primary text-on-color": isSelected,
+          "bg-surface-2": !isSelected,
         })}
       >
-        {isSelected && <Check className="h-2.5 w-2.5" />}
+        {isSelected && <CheckIcon className="h-2.5 w-2.5" />}
       </div>
-      <div className={cn("whitespace-nowrap text-sm", isSelected ? "text-custom-text-100" : "text-custom-text-200")}>
+      <div
+        className={cn("text-body-xs-medium whitespace-nowrap", {
+          "text-primary": isSelected,
+          "text-secondary": !isSelected,
+        })}
+      >
         {label}
       </div>
     </div>
diff --git a/apps/web/core/components/workspace-notifications/sidebar/filters/menu/root.tsx b/apps/web/core/components/workspace-notifications/sidebar/filters/menu/root.tsx
index a8bb4fa65..12e8ada05 100644
--- a/apps/web/core/components/workspace-notifications/sidebar/filters/menu/root.tsx
+++ b/apps/web/core/components/workspace-notifications/sidebar/filters/menu/root.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import { ListFilter } from "lucide-react";
 // plane imports
@@ -10,6 +16,7 @@ import { PopoverMenu } from "@plane/ui";
 import { usePlatformOS } from "@/hooks/use-platform-os";
 // local imports
 import { NotificationFilterOptionItem } from "./menu-option-item";
+import { IconButton } from "@plane/propel/icon-button";
 
 export const NotificationFilter = observer(function NotificationFilter() {
   // hooks
@@ -26,9 +33,7 @@ export const NotificationFilter = observer(function NotificationFilter() {
       data={translatedFilterTypeOptions}
       button={
         <Tooltip tooltipContent={t("notification.options.filters")} isMobile={isMobile} position="bottom">
-          <div className="flex-shrink-0 w-5 h-5 flex justify-center items-center overflow-hidden cursor-pointer transition-all hover:bg-custom-background-80 rounded-sm outline-none">
-            <ListFilter className="h-3 w-3" />
-          </div>
+          <IconButton size="base" variant="ghost" icon={ListFilter} />
         </Tooltip>
       }
       keyExtractor={(item: { label: string; value: ENotificationFilterType }) => item.value}
diff --git a/apps/web/core/components/workspace-notifications/sidebar/header/index.ts b/apps/web/core/components/workspace-notifications/sidebar/header/index.ts
index 1efe34c51..d98033459 100644
--- a/apps/web/core/components/workspace-notifications/sidebar/header/index.ts
+++ b/apps/web/core/components/workspace-notifications/sidebar/header/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./root";
diff --git a/apps/web/core/components/workspace-notifications/sidebar/header/options/index.ts b/apps/web/core/components/workspace-notifications/sidebar/header/options/index.ts
index 1efe34c51..d98033459 100644
--- a/apps/web/core/components/workspace-notifications/sidebar/header/options/index.ts
+++ b/apps/web/core/components/workspace-notifications/sidebar/header/options/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./root";
diff --git a/apps/web/core/components/workspace-notifications/sidebar/header/options/menu-option/index.ts b/apps/web/core/components/workspace-notifications/sidebar/header/options/menu-option/index.ts
index 1efe34c51..d98033459 100644
--- a/apps/web/core/components/workspace-notifications/sidebar/header/options/menu-option/index.ts
+++ b/apps/web/core/components/workspace-notifications/sidebar/header/options/menu-option/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./root";
diff --git a/apps/web/core/components/workspace-notifications/sidebar/header/options/menu-option/menu-item.tsx b/apps/web/core/components/workspace-notifications/sidebar/header/options/menu-option/menu-item.tsx
index bd2e77ab6..cf382536d 100644
--- a/apps/web/core/components/workspace-notifications/sidebar/header/options/menu-option/menu-item.tsx
+++ b/apps/web/core/components/workspace-notifications/sidebar/header/options/menu-option/menu-item.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 // components
 import { cn } from "@plane/utils";
@@ -10,16 +16,21 @@ export const NotificationMenuOptionItem = observer(function NotificationMenuOpti
   if (type === "menu-item")
     return (
       <div
-        className="flex items-center gap-2 cursor-pointer mx-2 px-2 p-1 transition-all hover:bg-custom-background-80 rounded-sm"
+        className="mx-2 flex cursor-pointer items-center gap-2 rounded-xs p-1 px-2 transition-all hover:bg-layer-1"
         onClick={() => onClick && onClick()}
       >
         {prependIcon && prependIcon}
-        <div className={cn("whitespace-nowrap text-sm", isActive ? "text-custom-text-100" : "text-custom-text-200")}>
+        <div
+          className={cn("text-body-xs-medium whitespace-nowrap", {
+            "text-primary": isActive,
+            "text-secondary": !isActive,
+          })}
+        >
           {label}
         </div>
         {appendIcon && <div className="ml-auto">{appendIcon}</div>}
       </div>
     );
 
-  return <div className="border-b border-custom-border-200" />;
+  return <div className="border-b border-subtle" />;
 });
diff --git a/apps/web/core/components/workspace-notifications/sidebar/header/options/menu-option/root.tsx b/apps/web/core/components/workspace-notifications/sidebar/header/options/menu-option/root.tsx
index 92a6cb4ed..596e5bde0 100644
--- a/apps/web/core/components/workspace-notifications/sidebar/header/options/menu-option/root.tsx
+++ b/apps/web/core/components/workspace-notifications/sidebar/header/options/menu-option/root.tsx
@@ -1,15 +1,22 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { ReactNode } from "react";
 import { observer } from "mobx-react";
-import { Check, CheckCircle, Clock } from "lucide-react";
-// plane imports
+import { CheckCircle, Clock, MoreVertical } from "lucide-react";
 import { useTranslation } from "@plane/i18n";
-import { ArchiveIcon } from "@plane/propel/icons";
+// plane imports
+import { ArchiveIcon, CheckIcon } from "@plane/propel/icons";
 import type { TNotificationFilter } from "@plane/types";
 import { PopoverMenu } from "@plane/ui";
 // hooks
 import { useWorkspaceNotifications } from "@/hooks/store/notifications";
 // local imports
 import { NotificationMenuOptionItem } from "./menu-item";
+import { IconButton } from "@plane/propel/icon-button";
 
 export type TPopoverMenuOptions = {
   key: string;
@@ -37,8 +44,8 @@ export const NotificationHeaderMenuOption = observer(function NotificationHeader
       type: "menu-item",
       label: t("notification.options.show_unread"),
       isActive: filters?.read,
-      prependIcon: <CheckCircle className="flex-shrink-0 h-3 w-3" />,
-      appendIcon: filters?.read ? <Check className="w-3 h-3" /> : undefined,
+      prependIcon: <CheckCircle className="h-3 w-3 flex-shrink-0" />,
+      appendIcon: filters?.read ? <CheckIcon className="h-3 w-3" /> : undefined,
       onClick: () => handleFilterChange("read", !filters?.read),
     },
     {
@@ -46,8 +53,8 @@ export const NotificationHeaderMenuOption = observer(function NotificationHeader
       type: "menu-item",
       label: t("notification.options.show_archived"),
       isActive: filters?.archived,
-      prependIcon: <ArchiveIcon className="flex-shrink-0 h-3 w-3" />,
-      appendIcon: filters?.archived ? <Check className="w-3 h-3" /> : undefined,
+      prependIcon: <ArchiveIcon className="h-3 w-3 flex-shrink-0" />,
+      appendIcon: filters?.archived ? <CheckIcon className="h-3 w-3" /> : undefined,
       onClick: () =>
         handleBulkFilterChange({
           archived: !filters?.archived,
@@ -59,8 +66,8 @@ export const NotificationHeaderMenuOption = observer(function NotificationHeader
       type: "menu-item",
       label: t("notification.options.show_snoozed"),
       isActive: filters?.snoozed,
-      prependIcon: <Clock className="flex-shrink-0 h-3 w-3" />,
-      appendIcon: filters?.snoozed ? <Check className="w-3 h-3" /> : undefined,
+      prependIcon: <Clock className="h-3 w-3 flex-shrink-0" />,
+      appendIcon: filters?.snoozed ? <CheckIcon className="h-3 w-3" /> : undefined,
       onClick: () =>
         handleBulkFilterChange({
           snoozed: !filters?.snoozed,
@@ -72,9 +79,9 @@ export const NotificationHeaderMenuOption = observer(function NotificationHeader
   return (
     <PopoverMenu
       data={popoverMenuOptions}
-      buttonClassName="flex-shrink-0 w-5 h-5 flex justify-center items-center overflow-hidden cursor-pointer transition-all hover:bg-custom-background-80 bg-custom-background-100 rounded-sm outline-none"
+      button={<IconButton size="base" variant="ghost" icon={MoreVertical} />}
       keyExtractor={(item: TPopoverMenuOptions) => item.key}
-      panelClassName="p-0 py-2 rounded-md border border-custom-border-200 bg-custom-background-100 space-y-1"
+      panelClassName="p-0 py-2 rounded-md border border-subtle bg-surface-1 space-y-1"
       render={(item: TPopoverMenuOptions) => <NotificationMenuOptionItem {...item} />}
     />
   );
diff --git a/apps/web/core/components/workspace-notifications/sidebar/header/options/root.tsx b/apps/web/core/components/workspace-notifications/sidebar/header/options/root.tsx
index 3e3cb6076..83446a20c 100644
--- a/apps/web/core/components/workspace-notifications/sidebar/header/options/root.tsx
+++ b/apps/web/core/components/workspace-notifications/sidebar/header/options/root.tsx
@@ -1,23 +1,23 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import { CheckCheck, RefreshCw } from "lucide-react";
 // plane imports
-import {
-  ENotificationLoader,
-  ENotificationQueryParamType,
-  NOTIFICATION_TRACKER_ELEMENTS,
-  NOTIFICATION_TRACKER_EVENTS,
-} from "@plane/constants";
+import { ENotificationLoader, ENotificationQueryParamType } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { Tooltip } from "@plane/propel/tooltip";
 import { Spinner } from "@plane/ui";
-// helpers
-import { captureSuccess } from "@/helpers/event-tracker.helper";
 // hooks
 import { useWorkspaceNotifications } from "@/hooks/store/notifications";
 import { usePlatformOS } from "@/hooks/use-platform-os";
 // local imports
 import { NotificationFilter } from "../../filters/menu";
 import { NotificationHeaderMenuOption } from "./menu-option";
+import { IconButton } from "@plane/propel/icon-button";
 
 type TNotificationSidebarHeaderOptions = {
   workspaceSlug: string;
@@ -52,35 +52,28 @@ export const NotificationSidebarHeaderOptions = observer(function NotificationSi
   };
 
   return (
-    <div className="relative flex justify-center items-center gap-2 text-sm">
+    <div className="relative flex items-center justify-center gap-2 text-body-xs-medium">
       {/* mark all notifications as read*/}
       <Tooltip tooltipContent={t("notification.options.mark_all_as_read")} isMobile={isMobile} position="bottom">
-        <div
-          className="flex-shrink-0 w-5 h-5 flex justify-center items-center overflow-hidden cursor-pointer transition-all hover:bg-custom-background-80 rounded-sm"
-          data-ph-element={NOTIFICATION_TRACKER_ELEMENTS.MARK_ALL_AS_READ_BUTTON}
+        <IconButton
+          size="base"
+          variant="ghost"
+          icon={loader === ENotificationLoader.MARK_ALL_AS_READY ? Spinner : CheckCheck}
           onClick={() => {
-            captureSuccess({
-              eventName: NOTIFICATION_TRACKER_EVENTS.all_marked_read,
-            });
             handleMarkAllNotificationsAsRead();
           }}
-        >
-          {loader === ENotificationLoader.MARK_ALL_AS_READY ? (
-            <Spinner height="14px" width="14px" />
-          ) : (
-            <CheckCheck className="h-3 w-3" />
-          )}
-        </div>
+        />
       </Tooltip>
 
       {/* refetch current notifications */}
       <Tooltip tooltipContent={t("notification.options.refresh")} isMobile={isMobile} position="bottom">
-        <div
-          className="flex-shrink-0 w-5 h-5 flex justify-center items-center overflow-hidden cursor-pointer transition-all hover:bg-custom-background-80 rounded-sm"
+        <IconButton
+          size="base"
+          variant="ghost"
+          icon={RefreshCw}
+          className={loader === ENotificationLoader.MUTATION_LOADER ? "animate-spin" : ""}
           onClick={refreshNotifications}
-        >
-          <RefreshCw className={`h-3 w-3 ${loader === ENotificationLoader.MUTATION_LOADER ? "animate-spin" : ""}`} />
-        </div>
+        />
       </Tooltip>
 
       {/* notification filters */}
diff --git a/apps/web/core/components/workspace-notifications/sidebar/header/root.tsx b/apps/web/core/components/workspace-notifications/sidebar/header/root.tsx
index 18d174231..13f3c412e 100644
--- a/apps/web/core/components/workspace-notifications/sidebar/header/root.tsx
+++ b/apps/web/core/components/workspace-notifications/sidebar/header/root.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 // plane imports
 import { useTranslation } from "@plane/i18n";
@@ -20,14 +26,14 @@ export const NotificationSidebarHeader = observer(function NotificationSidebarHe
 
   if (!workspaceSlug) return <></>;
   return (
-    <Header className="my-auto bg-custom-background-100">
+    <Header className="my-auto bg-surface-1">
       <Header.LeftItem>
         <Breadcrumbs>
           <Breadcrumbs.Item
             component={
               <BreadcrumbLink
                 label={t("notification.label")}
-                icon={<InboxIcon className="h-4 w-4 text-custom-text-300" />}
+                icon={<InboxIcon className="h-4 w-4 text-primary" />}
                 disableTooltip
               />
             }
diff --git a/apps/web/core/components/workspace-notifications/sidebar/index.ts b/apps/web/core/components/workspace-notifications/sidebar/index.ts
index 1efe34c51..d98033459 100644
--- a/apps/web/core/components/workspace-notifications/sidebar/index.ts
+++ b/apps/web/core/components/workspace-notifications/sidebar/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./root";
diff --git a/apps/web/core/components/workspace-notifications/sidebar/loader.tsx b/apps/web/core/components/workspace-notifications/sidebar/loader.tsx
index b3428459d..eaf3bf577 100644
--- a/apps/web/core/components/workspace-notifications/sidebar/loader.tsx
+++ b/apps/web/core/components/workspace-notifications/sidebar/loader.tsx
@@ -1,16 +1,22 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { range } from "lodash-es";
 
 export function NotificationsLoader() {
   return (
-    <div className="divide-y divide-custom-border-100 animate-pulse overflow-hidden">
+    <div className="animate-pulse divide-y divide-subtle overflow-hidden">
       {range(8).map((i) => (
         <div key={i} className="flex w-full items-center gap-4 p-3">
-          <span className="min-h-12 min-w-12 bg-custom-background-80 rounded-full" />
-          <div className="flex flex-col gap-2.5 w-full">
-            <span className="h-5 w-36 bg-custom-background-80 rounded" />
-            <div className="flex items-center justify-between gap-2 w-full">
-              <span className="h-5 w-28 bg-custom-background-80 rounded" />
-              <span className="h-5 w-16 bg-custom-background-80 rounded" />
+          <span className="min-h-12 min-w-12 rounded-full bg-layer-1" />
+          <div className="flex w-full flex-col gap-2.5">
+            <span className="h-5 w-36 rounded-xs bg-layer-1" />
+            <div className="flex w-full items-center justify-between gap-2">
+              <span className="h-5 w-28 rounded-xs bg-layer-1" />
+              <span className="h-5 w-16 rounded-xs bg-layer-1" />
             </div>
           </div>
         </div>
diff --git a/apps/web/core/components/workspace-notifications/sidebar/notification-card/content.tsx b/apps/web/core/components/workspace-notifications/sidebar/notification-card/content.tsx
index 2d49f42fe..0ed63b75d 100644
--- a/apps/web/core/components/workspace-notifications/sidebar/notification-card/content.tsx
+++ b/apps/web/core/components/workspace-notifications/sidebar/notification-card/content.tsx
@@ -1,14 +1,150 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { ReactNode } from "react";
 // plane imports
 import type { TNotification } from "@plane/types";
 import {
   convertMinutesToHoursMinutesString,
   renderFormattedDate,
   sanitizeCommentForNotification,
-  replaceUnderscoreIfSnakeCase,
   stripAndTruncateHTML,
 } from "@plane/utils";
 // components
 import { LiteTextEditor } from "@/components/editor/lite-text";
+import {
+  ADDITIONAL_NOTIFICATION_CONTENT_MAP,
+  renderAdditionalAction,
+  renderAdditionalValue,
+  shouldShowConnector,
+} from "@/plane-web/components/workspace-notifications/notification-card/content";
+
+// Types
+export type TNotificationFieldData = {
+  field: string | undefined;
+  newValue: string | undefined;
+  oldValue: string | undefined;
+  verb: string | undefined;
+};
+
+export type TNotificationContentDetails = {
+  action?: ReactNode;
+  value?: ReactNode;
+  showConnector?: boolean;
+};
+
+export type TNotificationContentHandler = (data: TNotificationFieldData) => TNotificationContentDetails | null;
+
+export type TNotificationContentMap = {
+  [key: string]: TNotificationContentHandler;
+};
+
+// Base notification content map for core fields
+export const BASE_NOTIFICATION_CONTENT_MAP: TNotificationContentMap = {
+  duplicate: ({ verb }) => ({
+    action:
+      verb === "created"
+        ? "marked that this work item is a duplicate of"
+        : "marked that this work item is not a duplicate",
+    value: null,
+    showConnector: false,
+  }),
+  assignees: ({ newValue, oldValue }) => ({
+    action: newValue !== "" ? "added assignee" : "removed assignee",
+    value: newValue !== "" ? newValue : oldValue,
+    showConnector: false,
+  }),
+  start_date: ({ newValue }) => ({
+    action: newValue !== "" ? "set start date" : "removed the start date",
+    value: renderFormattedDate(newValue),
+    showConnector: false,
+  }),
+  target_date: ({ newValue }) => ({
+    action: newValue !== "" ? "set due date" : "removed the due date",
+    value: renderFormattedDate(newValue),
+    showConnector: false,
+  }),
+  labels: ({ newValue, oldValue }) => ({
+    action: newValue !== "" ? "added label" : "removed label",
+    value: newValue !== "" ? newValue : oldValue,
+    showConnector: false,
+  }),
+  parent: ({ newValue, oldValue }) => ({
+    action: newValue !== "" ? "added parent" : "removed parent",
+    value: newValue !== "" ? newValue : oldValue,
+    showConnector: false,
+  }),
+  relates_to: () => ({
+    action: "marked that this work item is related to",
+    value: null,
+    showConnector: true,
+  }),
+  comment: ({ newValue }, renderCommentBox?: boolean) => ({
+    action: "commented",
+    value: renderCommentBox ? null : sanitizeCommentForNotification(newValue),
+    showConnector: false,
+  }),
+  archived_at: ({ newValue }) => ({
+    action: newValue === "restore" ? "restored the work item" : "archived the work item",
+    value: null,
+    showConnector: false,
+  }),
+  None: () => ({
+    action: null,
+    value: "the work item and assigned it to you.",
+    showConnector: false,
+  }),
+  // Fields below only define value - action falls through to default handler
+  attachment: () => ({
+    action: null,
+    value: "the work item",
+    showConnector: true,
+  }),
+  description: ({ newValue }) => ({
+    value: stripAndTruncateHTML(newValue || "", 55),
+    showConnector: true,
+  }),
+  estimate_time: ({ newValue, oldValue }) => ({
+    value:
+      newValue !== ""
+        ? convertMinutesToHoursMinutesString(Number(newValue))
+        : convertMinutesToHoursMinutesString(Number(oldValue)),
+    showConnector: true,
+  }),
+};
+
+// Helper to get content details from maps
+const getNotificationContentDetails = (
+  fieldData: TNotificationFieldData,
+  renderCommentBox?: boolean
+): TNotificationContentDetails | null => {
+  const { field } = fieldData;
+  if (!field) return null;
+
+  // Check base map first
+  const baseHandler = BASE_NOTIFICATION_CONTENT_MAP[field];
+  if (baseHandler) {
+    // Special case for comment field that needs renderCommentBox
+    if (field === "comment") {
+      return (baseHandler as (data: TNotificationFieldData, renderCommentBox?: boolean) => TNotificationContentDetails)(
+        fieldData,
+        renderCommentBox
+      );
+    }
+    return baseHandler(fieldData);
+  }
+
+  // Check additional map from plane-web (EE extensions)
+  const additionalHandler = ADDITIONAL_NOTIFICATION_CONTENT_MAP[field];
+  if (additionalHandler) {
+    return additionalHandler(fieldData);
+  }
+
+  return null;
+};
 
 export function NotificationContent({
   notification,
@@ -29,82 +165,54 @@ export function NotificationContent({
   const oldValue = data?.issue_activity.old_value;
   const verb = data?.issue_activity.verb;
 
+  const fieldData: TNotificationFieldData = {
+    field: notificationField,
+    newValue,
+    oldValue,
+    verb,
+  };
+
   const renderTriggerName = () => (
-    <span className="text-custom-text-100 font-medium">
+    <span className="font-medium text-primary">
       {triggeredBy?.is_bot ? triggeredBy.first_name : triggeredBy?.display_name}{" "}
     </span>
   );
 
-  const renderAction = () => {
+  // Get content details from map
+  const contentDetails = getNotificationContentDetails(fieldData, renderCommentBox);
+
+  // Render action - use map value if defined, otherwise fall through to default handler
+  // Note: undefined = fall through to default, null = explicitly no action text
+  const renderAction = (): ReactNode => {
     if (!notificationField) return "";
-    if (notificationField === "duplicate")
-      return verb === "created"
-        ? "marked that this work item is a duplicate of"
-        : "marked that this work item is not a duplicate";
-    if (notificationField === "assignees") {
-      return newValue !== "" ? "added assignee" : "removed assignee";
-    }
-    if (notificationField === "start_date") {
-      return newValue !== "" ? "set start date" : "removed the start date";
-    }
-    if (notificationField === "target_date") {
-      return newValue !== "" ? "set due date" : "removed the due date";
-    }
-    if (notificationField === "labels") {
-      return newValue !== "" ? "added label" : "removed label";
-    }
-    if (notificationField === "parent") {
-      return newValue !== "" ? "added parent" : "removed parent";
-    }
-    if (notificationField === "relates_to") return "marked that this work item is related to";
-    if (notificationField === "comment") return "commented";
-    if (notificationField === "archived_at") {
-      return newValue === "restore" ? "restored the work item" : "archived the work item";
-    }
-    if (notificationField === "None") return null;
-
-    const baseAction = !["comment", "archived_at"].includes(notificationField) ? verb : "";
-    return `${baseAction} ${replaceUnderscoreIfSnakeCase(notificationField)}`;
+    // Check if action is explicitly defined in map (including null)
+    if (contentDetails && "action" in contentDetails) return contentDetails.action;
+    // Fallback to default action handler for fields not in map or without action defined
+    return renderAdditionalAction(notificationField, verb);
   };
 
-  const renderValue = () => {
-    if (notificationField === "None") return "the work item and assigned it to you.";
-    if (notificationField === "comment") return renderCommentBox ? null : sanitizeCommentForNotification(newValue);
-    if (notificationField === "target_date" || notificationField === "start_date") return renderFormattedDate(newValue);
-    if (notificationField === "attachment") return "the work item";
-    if (notificationField === "description") return stripAndTruncateHTML(newValue || "", 55);
-    if (notificationField === "archived_at") return null;
-    if (notificationField === "assignees") return newValue !== "" ? newValue : oldValue;
-    if (notificationField === "labels") return newValue !== "" ? newValue : oldValue;
-    if (notificationField === "parent") return newValue !== "" ? newValue : oldValue;
-    if (notificationField === "estimate_time")
-      return newValue !== ""
-        ? convertMinutesToHoursMinutesString(Number(newValue))
-        : convertMinutesToHoursMinutesString(Number(oldValue));
-    return newValue;
+  // Render value - use map value if defined, otherwise fall through to default handler
+  const renderValue = (): ReactNode => {
+    // Check if value is explicitly defined in map
+    if (contentDetails && "value" in contentDetails) return contentDetails.value;
+    // Fallback to default value handler for fields not in map or without value defined
+    return renderAdditionalValue(notificationField, newValue, oldValue);
   };
 
-  const shouldShowConnector = ![
-    "comment",
-    "archived_at",
-    "None",
-    "assignees",
-    "labels",
-    "start_date",
-    "target_date",
-    "parent",
-  ].includes(notificationField || "");
+  // Determine if connector should be shown - prefer map value, fallback to function
+  const showConnector =
+    contentDetails?.showConnector !== undefined ? contentDetails.showConnector : shouldShowConnector(notificationField);
 
   return (
     <>
       {renderTriggerName()}
-      <span className="text-custom-text-300">{renderAction()} </span>
+      <span className="text-tertiary">{renderAction()} </span>
       {verb !== "deleted" && (
         <>
-          {shouldShowConnector && <span className="text-custom-text-300">to </span>}
-          <span className="text-custom-text-100 font-medium">{renderValue()}</span>
+          {showConnector && <span className="text-tertiary">to </span>}
+          <span className="font-medium text-primary">{renderValue()}</span>
           {notificationField === "comment" && renderCommentBox && (
-            <div className="scale-75 origin-left">
+            <div className="origin-left scale-75">
               <LiteTextEditor
                 editable={false}
                 id=""
diff --git a/apps/web/core/components/workspace-notifications/sidebar/notification-card/item.tsx b/apps/web/core/components/workspace-notifications/sidebar/notification-card/item.tsx
index 9fa218329..859070c3e 100644
--- a/apps/web/core/components/workspace-notifications/sidebar/notification-card/item.tsx
+++ b/apps/web/core/components/workspace-notifications/sidebar/notification-card/item.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useState } from "react";
 import { observer } from "mobx-react";
 import { Clock } from "lucide-react";
@@ -65,32 +71,34 @@ export const NotificationItem = observer(function NotificationItem(props: TNotif
   return (
     <Row
       className={cn(
-        "relative py-4 flex items-center gap-2 border-b border-custom-border-200 cursor-pointer transition-all group",
-        currentSelectedNotificationId === notification?.id ? "bg-custom-background-80/30" : "",
-        notification.read_at === null ? "bg-custom-primary-100/5" : ""
+        "group relative flex cursor-pointer items-center gap-2 border-b border-subtle py-4 transition-all",
+        {
+          "bg-layer-1/30": currentSelectedNotificationId === notification?.id,
+          "bg-accent-primary/5": notification.read_at === null,
+        }
       )}
       onClick={handleNotificationIssuePeekOverview}
     >
       {notification.read_at === null && (
-        <div className="flex-shrink-0 w-1.5 h-1.5 rounded-full bg-custom-primary-100 absolute top-[50%] left-2" />
+        <div className="absolute top-[50%] left-2 h-1.5 w-1.5 flex-shrink-0 rounded-full bg-accent-primary" />
       )}
 
-      <div className="relative w-full flex gap-2">
-        <div className="flex-shrink-0 relative flex justify-center items-center w-12 h-12 bg-custom-background-80 rounded-full">
+      <div className="relative flex w-full gap-2">
+        <div className="relative flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-layer-1">
           {notificationTriggeredBy && (
             <Avatar
               name={notificationTriggeredBy.display_name || notificationTriggeredBy?.first_name}
               src={getFileURL(notificationTriggeredBy.avatar_url)}
               size={42}
               shape="circle"
-              className="!text-base !bg-custom-background-80"
+              className="bg-layer-1 text-body-sm-medium"
             />
           )}
         </div>
 
-        <div className="w-full space-y-1 -mt-2">
-          <div className="relative flex items-center gap-3 h-8">
-            <div className="w-full overflow-hidden whitespace-normal break-all truncate line-clamp-1 text-sm text-custom-text-100">
+        <div className="-mt-2 w-full space-y-1">
+          <div className="relative flex h-8 items-center gap-3">
+            <div className="line-clamp-1 w-full truncate overflow-hidden text-body-xs-medium break-all whitespace-normal text-primary">
               <NotificationContent
                 notification={notification}
                 workspaceId={workspace.id}
@@ -108,14 +116,14 @@ export const NotificationItem = observer(function NotificationItem(props: TNotif
             />
           </div>
 
-          <div className="relative flex items-center gap-3 text-xs text-custom-text-200">
-            <div className="w-full overflow-hidden whitespace-normal break-words truncate line-clamp-1">
+          <div className="relative flex items-center gap-3 text-caption-sm-regular text-secondary">
+            <div className="line-clamp-1 w-full truncate overflow-hidden break-words whitespace-normal">
               {notification?.data?.issue?.identifier}-{notification?.data?.issue?.sequence_id}&nbsp;
               {notification?.data?.issue?.name}
             </div>
             <div className="flex-shrink-0">
               {notification?.snoozed_till ? (
-                <p className="flex flex-shrink-0 items-center justify-end gap-x-1 text-custom-text-300">
+                <p className="flex flex-shrink-0 items-center justify-end gap-x-1 text-tertiary">
                   <Clock className="h-4 w-4" />
                   <span>
                     Till {renderFormattedDate(notification.snoozed_till)},&nbsp;
@@ -123,7 +131,7 @@ export const NotificationItem = observer(function NotificationItem(props: TNotif
                   </span>
                 </p>
               ) : (
-                <p className="mt-auto flex-shrink-0 text-custom-text-300">
+                <p className="mt-auto flex-shrink-0 text-tertiary">
                   {notification.created_at && calculateTimeAgo(notification.created_at)}
                 </p>
               )}
diff --git a/apps/web/core/components/workspace-notifications/sidebar/notification-card/options/archive.tsx b/apps/web/core/components/workspace-notifications/sidebar/notification-card/options/archive.tsx
index 57c248662..8e5ab8066 100644
--- a/apps/web/core/components/workspace-notifications/sidebar/notification-card/options/archive.tsx
+++ b/apps/web/core/components/workspace-notifications/sidebar/notification-card/options/archive.tsx
@@ -1,14 +1,15 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import { ArchiveRestore } from "lucide-react";
 // plane imports
-import { NOTIFICATION_TRACKER_ELEMENTS, NOTIFICATION_TRACKER_EVENTS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { ArchiveIcon } from "@plane/propel/icons";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
-// helpers
-import { captureError, captureSuccess } from "@/helpers/event-tracker.helper";
-// hooks
-import { useWorkspaceNotifications } from "@/hooks/store/notifications";
 // store
 import type { INotification } from "@/store/notifications/notification";
 // local imports
@@ -24,7 +25,6 @@ export const NotificationItemArchiveOption = observer(function NotificationItemA
 ) {
   const { workspaceSlug, notification } = props;
   // hooks
-  const { currentNotificationTab } = useWorkspaceNotifications();
   const { asJson: data, archiveNotification, unArchiveNotification } = notification;
   const { t } = useTranslation();
 
@@ -32,41 +32,26 @@ export const NotificationItemArchiveOption = observer(function NotificationItemA
     try {
       const request = data.archived_at ? unArchiveNotification : archiveNotification;
       await request(workspaceSlug);
-      captureSuccess({
-        eventName: data.archived_at ? NOTIFICATION_TRACKER_EVENTS.unarchive : NOTIFICATION_TRACKER_EVENTS.archive,
-        payload: {
-          id: data?.data?.issue?.id,
-          tab: currentNotificationTab,
-        },
-      });
       setToast({
         title: data.archived_at ? t("notification.toasts.unarchived") : t("notification.toasts.archived"),
         type: TOAST_TYPE.SUCCESS,
       });
     } catch (e) {
       console.error(e);
-      captureError({
-        eventName: data.archived_at ? NOTIFICATION_TRACKER_EVENTS.unarchive : NOTIFICATION_TRACKER_EVENTS.archive,
-        payload: {
-          id: data?.data?.issue?.id,
-          tab: currentNotificationTab,
-        },
-      });
     }
   };
 
   return (
     <NotificationItemOptionButton
-      data-ph-element={NOTIFICATION_TRACKER_ELEMENTS.ARCHIVE_UNARCHIVE_BUTTON}
       tooltipContent={
         data.archived_at ? t("notification.options.mark_unarchive") : t("notification.options.mark_archive")
       }
       callBack={handleNotificationUpdate}
     >
       {data.archived_at ? (
-        <ArchiveRestore className="h-3 w-3 text-custom-text-300" />
+        <ArchiveRestore className="h-3 w-3 text-tertiary" />
       ) : (
-        <ArchiveIcon className="h-3 w-3 text-custom-text-300" />
+        <ArchiveIcon className="h-3 w-3 text-tertiary" />
       )}
     </NotificationItemOptionButton>
   );
diff --git a/apps/web/core/components/workspace-notifications/sidebar/notification-card/options/button.tsx b/apps/web/core/components/workspace-notifications/sidebar/notification-card/options/button.tsx
index c244a877c..394466bb9 100644
--- a/apps/web/core/components/workspace-notifications/sidebar/notification-card/options/button.tsx
+++ b/apps/web/core/components/workspace-notifications/sidebar/notification-card/options/button.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { ReactNode } from "react";
 import { Tooltip } from "@plane/propel/tooltip";
 // helpers
@@ -22,7 +28,7 @@ export function NotificationItemOptionButton(props: TNotificationItemOptionButto
       <button
         type="button"
         className={cn(
-          "relative flex-shrink-0 w-5 h-5 rounded-sm flex justify-center items-center outline-none bg-custom-background-80 hover:bg-custom-background-90",
+          "relative flex h-5 w-5 flex-shrink-0 items-center justify-center rounded-xs bg-layer-1 outline-none hover:bg-surface-2",
           buttonClassName
         )}
         onClick={(e) => {
diff --git a/apps/web/core/components/workspace-notifications/sidebar/notification-card/options/index.ts b/apps/web/core/components/workspace-notifications/sidebar/notification-card/options/index.ts
index 47dff3192..173eda609 100644
--- a/apps/web/core/components/workspace-notifications/sidebar/notification-card/options/index.ts
+++ b/apps/web/core/components/workspace-notifications/sidebar/notification-card/options/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./root";
 
 export * from "./read";
diff --git a/apps/web/core/components/workspace-notifications/sidebar/notification-card/options/read.tsx b/apps/web/core/components/workspace-notifications/sidebar/notification-card/options/read.tsx
index fe25873e0..16a5b5133 100644
--- a/apps/web/core/components/workspace-notifications/sidebar/notification-card/options/read.tsx
+++ b/apps/web/core/components/workspace-notifications/sidebar/notification-card/options/read.tsx
@@ -1,13 +1,14 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import { MessageSquare } from "lucide-react";
 // plane imports
-import { NOTIFICATION_TRACKER_ELEMENTS, NOTIFICATION_TRACKER_EVENTS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
-// helpers
-import { captureError, captureSuccess } from "@/helpers/event-tracker.helper";
-// hooks
-import { useWorkspaceNotifications } from "@/hooks/store/notifications";
 // store
 import type { INotification } from "@/store/notifications/notification";
 // local imports
@@ -23,7 +24,6 @@ export const NotificationItemReadOption = observer(function NotificationItemRead
 ) {
   const { workspaceSlug, notification } = props;
   // hooks
-  const { currentNotificationTab } = useWorkspaceNotifications();
   const { asJson: data, markNotificationAsRead, markNotificationAsUnRead } = notification;
   const { t } = useTranslation();
 
@@ -31,36 +31,21 @@ export const NotificationItemReadOption = observer(function NotificationItemRead
     try {
       const request = data.read_at ? markNotificationAsUnRead : markNotificationAsRead;
       await request(workspaceSlug);
-      captureSuccess({
-        eventName: data.read_at ? NOTIFICATION_TRACKER_EVENTS.mark_unread : NOTIFICATION_TRACKER_EVENTS.mark_read,
-        payload: {
-          id: data?.data?.issue?.id,
-          tab: currentNotificationTab,
-        },
-      });
       setToast({
         title: data.read_at ? t("notification.toasts.unread") : t("notification.toasts.read"),
         type: TOAST_TYPE.SUCCESS,
       });
     } catch (e) {
       console.error(e);
-      captureError({
-        eventName: data.read_at ? NOTIFICATION_TRACKER_EVENTS.mark_unread : NOTIFICATION_TRACKER_EVENTS.mark_read,
-        payload: {
-          id: data?.data?.issue?.id,
-          tab: currentNotificationTab,
-        },
-      });
     }
   };
 
   return (
     <NotificationItemOptionButton
-      data-ph-element={NOTIFICATION_TRACKER_ELEMENTS.MARK_READ_UNREAD_BUTTON}
       tooltipContent={data.read_at ? t("notification.options.mark_unread") : t("notification.options.mark_read")}
       callBack={handleNotificationUpdate}
     >
-      <MessageSquare className="h-3 w-3 text-custom-text-300" />
+      <MessageSquare className="h-3 w-3 text-tertiary" />
     </NotificationItemOptionButton>
   );
 });
diff --git a/apps/web/core/components/workspace-notifications/sidebar/notification-card/options/root.tsx b/apps/web/core/components/workspace-notifications/sidebar/notification-card/options/root.tsx
index a0d7ec167..1b6656655 100644
--- a/apps/web/core/components/workspace-notifications/sidebar/notification-card/options/root.tsx
+++ b/apps/web/core/components/workspace-notifications/sidebar/notification-card/options/root.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { Dispatch, SetStateAction } from "react";
 import { observer } from "mobx-react";
 // plane imports
@@ -31,8 +37,12 @@ export const NotificationOption = observer(function NotificationOption(props: TN
   const notification = useNotification(notificationId);
 
   return (
-    <div className={cn("flex-shrink-0 hidden group-hover:block text-sm", isSnoozeStateModalOpen ? `!block` : ``)}>
-      <div className="relative flex justify-center items-center gap-2">
+    <div
+      className={cn("hidden flex-shrink-0 text-body-xs-medium group-hover:block", {
+        block: isSnoozeStateModalOpen,
+      })}
+    >
+      <div className="relative flex items-center justify-center gap-2">
         {/* read */}
         <NotificationItemReadOption workspaceSlug={workspaceSlug} notification={notification} />
 
diff --git a/apps/web/core/components/workspace-notifications/sidebar/notification-card/options/snooze/index.ts b/apps/web/core/components/workspace-notifications/sidebar/notification-card/options/snooze/index.ts
index 5238728d7..b5ea89de6 100644
--- a/apps/web/core/components/workspace-notifications/sidebar/notification-card/options/snooze/index.ts
+++ b/apps/web/core/components/workspace-notifications/sidebar/notification-card/options/snooze/index.ts
@@ -1,2 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./root";
 export * from "./modal";
diff --git a/apps/web/core/components/workspace-notifications/sidebar/notification-card/options/snooze/modal.tsx b/apps/web/core/components/workspace-notifications/sidebar/notification-card/options/snooze/modal.tsx
index ff03a9eef..02e8c353c 100644
--- a/apps/web/core/components/workspace-notifications/sidebar/notification-card/options/snooze/modal.tsx
+++ b/apps/web/core/components/workspace-notifications/sidebar/notification-card/options/snooze/modal.tsx
@@ -1,16 +1,19 @@
-import { Fragment } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useParams } from "next/navigation";
 import { useForm, Controller } from "react-hook-form";
-import { Transition, Dialog } from "@headlessui/react";
 // plane imports
 import { allTimeIn30MinutesInterval12HoursFormat } from "@plane/constants";
 import { Button } from "@plane/propel/button";
 import { CloseIcon } from "@plane/propel/icons";
-import { CustomSelect } from "@plane/ui";
+import { CustomSelect, EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
 // components
-import { getDate } from "@plane/utils";
+import { getDate, cn } from "@plane/utils";
 import { DateDropdown } from "@/components/dropdowns/date";
-// helpers
 
 type TNotificationSnoozeModal = {
   isOpen: boolean;
@@ -110,151 +113,117 @@ export function NotificationSnoozeModal(props: TNotificationSnoozeModal) {
   };
 
   return (
-    <Transition.Root show={isOpen} as={Fragment}>
-      <Dialog as="div" className="relative z-20" onClose={handleClose}>
-        <Transition.Child
-          as={Fragment}
-          enter="ease-out duration-300"
-          enterFrom="opacity-0"
-          enterTo="opacity-100"
-          leave="ease-in duration-200"
-          leaveFrom="opacity-100"
-          leaveTo="opacity-0"
-        >
-          <div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
-        </Transition.Child>
+    <ModalCore isOpen={isOpen} handleClose={handleClose} position={EModalPosition.CENTER} width={EModalWidth.XXL}>
+      <form onSubmit={handleSubmit(onSubmit)} className="p-5">
+        <div className="flex items-center justify-between">
+          <h3 className="text-h5-medium leading-6 text-primary">Customize Snooze Time</h3>
 
-        <div className="fixed inset-0 z-20 overflow-y-auto">
-          <div className="flex min-h-full items-center justify-center p-4 text-center">
-            <Transition.Child
-              as={Fragment}
-              enter="ease-out duration-300"
-              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-              enterTo="opacity-100 translate-y-0 sm:scale-100"
-              leave="ease-in duration-200"
-              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-            >
-              <Dialog.Panel className="relative w-full transform rounded-lg bg-custom-background-100 p-5 text-left shadow-custom-shadow-md transition-all sm:w-full sm:!max-w-2xl">
-                <form onSubmit={handleSubmit(onSubmit)}>
-                  <div className="flex items-center justify-between">
-                    <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-custom-text-100">
-                      Customize Snooze Time
-                    </Dialog.Title>
-
-                    <div>
-                      <button type="button" onClick={handleClose}>
-                        <CloseIcon className="h-5 w-5 text-custom-text-100" />
-                      </button>
-                    </div>
-                  </div>
-
-                  <div className="mt-5 flex flex-col gap-3 md:!flex-row md:items-center">
-                    <div className="flex-1 pb-3 md:pb-0">
-                      <h6 className="mb-2 block text-sm font-medium text-custom-text-400">Pick a date</h6>
-                      <Controller
-                        name="date"
-                        control={control}
-                        rules={{ required: "Please select a date" }}
-                        render={({ field: { value, onChange } }) => (
-                          <DateDropdown
-                            value={value || null}
-                            placeholder="Select date"
-                            onChange={(val) => {
-                              setValue("time", undefined);
-                              onChange(val);
-                            }}
-                            minDate={new Date()}
-                            buttonVariant="border-with-text"
-                            buttonContainerClassName="w-full text-left"
-                            buttonClassName="border-custom-border-300 px-3 py-2.5"
-                            hideIcon
-                          />
-                        )}
-                      />
-                    </div>
-                    <div className="flex-1">
-                      <h6 className="mb-2 block text-sm font-medium text-custom-text-400">Pick a time</h6>
-                      <Controller
-                        control={control}
-                        name="time"
-                        rules={{ required: "Please select a time" }}
-                        render={({ field: { value, onChange } }) => (
-                          <CustomSelect
-                            value={value}
-                            onChange={onChange}
-                            label={
-                              <div className="truncate">
-                                {value ? (
-                                  <span>
-                                    {value} {watch("period").toLowerCase()}
-                                  </span>
-                                ) : (
-                                  <span className="text-sm text-custom-text-400">Select a time</span>
-                                )}
-                              </div>
-                            }
-                            input
-                          >
-                            <div className="mb-2 flex h-9 w-full overflow-hidden rounded">
-                              <div
-                                onClick={() => {
-                                  setValue("period", "AM");
-                                }}
-                                className={`flex h-full w-1/2 cursor-pointer items-center justify-center text-center ${
-                                  watch("period") === "AM"
-                                    ? "bg-custom-primary-100/90 text-custom-primary-0"
-                                    : "bg-custom-background-80"
-                                }`}
-                              >
-                                AM
-                              </div>
-                              <div
-                                onClick={() => {
-                                  setValue("period", "PM");
-                                }}
-                                className={`flex h-full w-1/2 cursor-pointer items-center justify-center text-center ${
-                                  watch("period") === "PM"
-                                    ? "bg-custom-primary-100/90 text-custom-primary-0"
-                                    : "bg-custom-background-80"
-                                }`}
-                              >
-                                PM
-                              </div>
-                            </div>
-                            {getTimeStamp().length > 0 ? (
-                              getTimeStamp().map((time, index) => (
-                                <CustomSelect.Option key={`${time}-${index}`} value={time.value}>
-                                  <div className="flex items-center">
-                                    <span className="ml-3 block truncate">{time.label}</span>
-                                  </div>
-                                </CustomSelect.Option>
-                              ))
-                            ) : (
-                              <p className="p-3 text-center text-custom-text-200">No available time for this date.</p>
-                            )}
-                          </CustomSelect>
-                        )}
-                      />
-                    </div>
-                  </div>
-
-                  <div className="mt-5 flex items-center justify-between gap-2">
-                    <div className="flex w-full items-center justify-end gap-2">
-                      <Button variant="neutral-primary" size="sm" onClick={handleClose}>
-                        Cancel
-                      </Button>
-                      <Button variant="primary" size="sm" type="submit" loading={isSubmitting}>
-                        {isSubmitting ? "Submitting..." : "Submit"}
-                      </Button>
-                    </div>
-                  </div>
-                </form>
-              </Dialog.Panel>
-            </Transition.Child>
+          <div>
+            <button type="button" onClick={handleClose}>
+              <CloseIcon className="h-5 w-5 text-primary" />
+            </button>
           </div>
         </div>
-      </Dialog>
-    </Transition.Root>
+
+        <div className="mt-5 flex flex-col gap-3 md:!flex-row md:items-center">
+          <div className="flex-1 pb-3 md:pb-0">
+            <h6 className="mb-2 block text-body-xs-medium text-placeholder">Pick a date</h6>
+            <Controller
+              name="date"
+              control={control}
+              rules={{ required: "Please select a date" }}
+              render={({ field: { value, onChange } }) => (
+                <DateDropdown
+                  value={value || null}
+                  placeholder="Select date"
+                  onChange={(val) => {
+                    setValue("time", undefined);
+                    onChange(val);
+                  }}
+                  minDate={new Date()}
+                  buttonVariant="border-with-text"
+                  buttonContainerClassName="w-full text-left"
+                  buttonClassName="border-strong px-3 py-2.5"
+                  hideIcon
+                />
+              )}
+            />
+          </div>
+          <div className="flex-1">
+            <h6 className="mb-2 block text-body-xs-medium text-placeholder">Pick a time</h6>
+            <Controller
+              control={control}
+              name="time"
+              rules={{ required: "Please select a time" }}
+              render={({ field: { value, onChange } }) => (
+                <CustomSelect
+                  value={value}
+                  onChange={onChange}
+                  label={
+                    <div className="truncate">
+                      {value ? (
+                        <span>
+                          {value} {watch("period").toLowerCase()}
+                        </span>
+                      ) : (
+                        <span className="text-body-xs-medium text-placeholder">Select a time</span>
+                      )}
+                    </div>
+                  }
+                  input
+                >
+                  <div className="mb-2 flex h-9 w-full overflow-hidden rounded-xs">
+                    <div
+                      onClick={() => {
+                        setValue("period", "AM");
+                      }}
+                      className={cn("flex h-full w-1/2 cursor-pointer items-center justify-center text-center", {
+                        "bg-accent-primary/90 text-on-color": watch("period") === "AM",
+                        "bg-layer-1": watch("period") !== "AM",
+                      })}
+                    >
+                      AM
+                    </div>
+                    <div
+                      onClick={() => {
+                        setValue("period", "PM");
+                      }}
+                      className={cn("flex h-full w-1/2 cursor-pointer items-center justify-center text-center", {
+                        "bg-accent-primary/90 text-on-color": watch("period") === "PM",
+                        "bg-layer-1": watch("period") !== "PM",
+                      })}
+                    >
+                      PM
+                    </div>
+                  </div>
+                  {getTimeStamp().length > 0 ? (
+                    getTimeStamp().map((time, index) => (
+                      <CustomSelect.Option key={`${time}-${index}`} value={time.value}>
+                        <div className="flex items-center">
+                          <span className="ml-3 block truncate">{time.label}</span>
+                        </div>
+                      </CustomSelect.Option>
+                    ))
+                  ) : (
+                    <p className="p-3 text-center text-secondary">No available time for this date.</p>
+                  )}
+                </CustomSelect>
+              )}
+            />
+          </div>
+        </div>
+
+        <div className="mt-5 flex items-center justify-between gap-2">
+          <div className="flex w-full items-center justify-end gap-2">
+            <Button variant="secondary" size="lg" onClick={handleClose}>
+              Cancel
+            </Button>
+            <Button variant="primary" size="lg" type="submit" loading={isSubmitting}>
+              {isSubmitting ? "Submitting..." : "Submit"}
+            </Button>
+          </div>
+        </div>
+      </form>
+    </ModalCore>
   );
 }
diff --git a/apps/web/core/components/workspace-notifications/sidebar/notification-card/options/snooze/root.tsx b/apps/web/core/components/workspace-notifications/sidebar/notification-card/options/snooze/root.tsx
index 00e6afd58..6e4a7171c 100644
--- a/apps/web/core/components/workspace-notifications/sidebar/notification-card/options/snooze/root.tsx
+++ b/apps/web/core/components/workspace-notifications/sidebar/notification-card/options/snooze/root.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { Dispatch, SetStateAction } from "react";
 import { Fragment } from "react";
 import { observer } from "mobx-react";
@@ -98,11 +104,11 @@ export const NotificationItemSnoozeOption = observer(function NotificationItemSn
               >
                 <Popover.Button
                   className={cn(
-                    "relative flex-shrink-0 w-5 h-5 rounded-sm flex justify-center items-center outline-none bg-custom-background-80 hover:bg-custom-background-90",
-                    open ? "bg-custom-background-80" : ""
+                    "relative flex h-5 w-5 flex-shrink-0 items-center justify-center rounded-xs bg-layer-1 outline-none hover:bg-surface-2",
+                    open ? "bg-layer-1" : ""
                   )}
                 >
-                  <Clock className="h-3 w-3 text-custom-text-300" />
+                  <Clock className="h-3 w-3 text-tertiary" />
                 </Popover.Button>
               </Tooltip>
 
@@ -115,11 +121,11 @@ export const NotificationItemSnoozeOption = observer(function NotificationItemSn
                 leaveFrom="opacity-100 translate-y-0"
                 leaveTo="opacity-0 translate-y-1"
               >
-                <Popover.Panel className="absolute mt-2 right-0 z-10 min-w-44 select-none">
-                  <div className="p-2 rounded-md border border-custom-border-200 bg-custom-background-100 space-y-1">
+                <Popover.Panel className="absolute right-0 z-10 mt-2 min-w-44 select-none">
+                  <div className="space-y-1 rounded-md border border-subtle bg-surface-1 p-2">
                     {data.snoozed_till && (
                       <button
-                        className="w-full text-left cursor-pointer px-2 p-1 transition-all hover:bg-custom-background-80 rounded-sm text-custom-text-200 text-sm"
+                        className="w-full cursor-pointer rounded-xs p-1 px-2 text-left text-body-xs-medium text-secondary transition-all hover:bg-layer-1"
                         onClick={(e) => {
                           e.preventDefault();
                           e.stopPropagation();
@@ -133,7 +139,7 @@ export const NotificationItemSnoozeOption = observer(function NotificationItemSn
                     {NOTIFICATION_SNOOZE_OPTIONS.map((option) => (
                       <button
                         key={option.key}
-                        className="w-full text-left cursor-pointer px-2 p-1 transition-all hover:bg-custom-background-80 rounded-sm text-custom-text-200 text-sm"
+                        className="w-full cursor-pointer rounded-xs p-1 px-2 text-left text-body-xs-medium text-secondary transition-all hover:bg-layer-1"
                         onClick={(e) => {
                           e.preventDefault();
                           e.stopPropagation();
diff --git a/apps/web/core/components/workspace-notifications/sidebar/root.tsx b/apps/web/core/components/workspace-notifications/sidebar/root.tsx
index c878fc938..e7e0ff4ac 100644
--- a/apps/web/core/components/workspace-notifications/sidebar/root.tsx
+++ b/apps/web/core/components/workspace-notifications/sidebar/root.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useCallback } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
@@ -52,12 +58,12 @@ export const NotificationsSidebarRoot = observer(function NotificationsSidebarRo
   return (
     <div
       className={cn(
-        "relative border-0 md:border-r border-custom-border-200 z-[10] flex-shrink-0 bg-custom-background-100 h-full transition-all max-md:overflow-hidden",
+        "relative z-[10] h-full flex-shrink-0 border-0 border-subtle bg-surface-1 transition-all max-md:overflow-hidden md:border-r",
         currentSelectedNotificationId ? "w-0 md:w-3/12" : "w-full md:w-3/12"
       )}
     >
-      <div className="relative w-full h-full flex flex-col">
-        <Row className="h-header border-b border-custom-border-200 flex flex-shrink-0">
+      <div className="relative flex h-full w-full flex-col">
+        <Row className="flex h-header flex-shrink-0 border-b border-subtle">
           <NotificationSidebarHeader workspaceSlug={workspaceSlug.toString()} />
         </Row>
 
@@ -65,15 +71,16 @@ export const NotificationsSidebarRoot = observer(function NotificationsSidebarRo
           {NOTIFICATION_TABS.map((tab) => (
             <div
               key={tab.value}
-              className="h-full px-3 relative cursor-pointer"
+              className="relative h-full cursor-pointer px-3"
               onClick={() => handleTabClick(tab.value)}
             >
               <div
                 className={cn(
-                  `relative h-full flex justify-center items-center gap-1 text-sm transition-all`,
-                  currentNotificationTab === tab.value
-                    ? "text-custom-primary-100"
-                    : "text-custom-text-100 hover:text-custom-text-200"
+                  "relative flex h-full items-center justify-center gap-1 text-body-xs-medium transition-all",
+                  {
+                    "text-accent-primary": currentNotificationTab === tab.value,
+                    "text-primary hover:text-secondary": currentNotificationTab !== tab.value,
+                  }
                 )}
               >
                 <div className="font-medium">{t(tab.i18n_label)}</div>
@@ -82,7 +89,7 @@ export const NotificationsSidebarRoot = observer(function NotificationsSidebarRo
                 )}
               </div>
               {currentNotificationTab === tab.value && (
-                <div className="border absolute bottom-0 right-0 left-0 rounded-t-md border-custom-primary-100" />
+                <div className="absolute right-0 bottom-0 left-0 rounded-t-md border border-accent-strong" />
               )}
             </div>
           ))}
@@ -93,7 +100,7 @@ export const NotificationsSidebarRoot = observer(function NotificationsSidebarRo
 
         {/* rendering notifications */}
         {loader === "init-loader" ? (
-          <div className="relative w-full h-full overflow-hidden">
+          <div className="relative h-full w-full overflow-hidden">
             <NotificationsLoader />
           </div>
         ) : (
@@ -103,7 +110,7 @@ export const NotificationsSidebarRoot = observer(function NotificationsSidebarRo
                 <NotificationListRoot workspaceSlug={workspaceSlug.toString()} workspaceId={workspace?.id} />
               </ContentWrapper>
             ) : (
-              <div className="relative w-full h-full flex justify-center items-center">
+              <div className="relative flex h-full w-full items-center justify-center">
                 <NotificationEmptyState currentNotificationTab={currentNotificationTab} />
               </div>
             )}
diff --git a/apps/web/core/components/workspace/ConfirmWorkspaceMemberRemove.tsx b/apps/web/core/components/workspace/ConfirmWorkspaceMemberRemove.tsx
index f7c03ebb2..e8f1d6328 100644
--- a/apps/web/core/components/workspace/ConfirmWorkspaceMemberRemove.tsx
+++ b/apps/web/core/components/workspace/ConfirmWorkspaceMemberRemove.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React, { useState } from "react";
 import { observer } from "mobx-react";
 import { AlertTriangle } from "lucide-react";
@@ -38,7 +44,7 @@ export const ConfirmWorkspaceMemberRemove = observer(function ConfirmWorkspaceMe
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
+          <div className="fixed inset-0 bg-backdrop transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-20 overflow-y-auto">
@@ -52,26 +58,26 @@ export const ConfirmWorkspaceMemberRemove = observer(function ConfirmWorkspaceMe
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-custom-background-100 text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-[40rem]">
-                <div className="px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-surface-1 text-left shadow-raised-200 transition-all sm:my-8 sm:w-[40rem]">
+                <div className="px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                   <div className="sm:flex sm:items-start">
-                    <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
-                      <AlertTriangle className="h-6 w-6 text-red-600" aria-hidden="true" />
+                    <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-danger-subtle sm:mx-0 sm:h-10 sm:w-10">
+                      <AlertTriangle className="h-6 w-6 text-danger-primary" aria-hidden="true" />
                     </div>
-                    <div className="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
-                      <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-custom-text-100">
+                    <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+                      <Dialog.Title as="h3" className="text-16 leading-6 font-medium text-primary">
                         {currentUser?.id === userDetails.id
                           ? "Leave workspace?"
                           : `Remove ${userDetails?.display_name}?`}
                       </Dialog.Title>
                       <div className="mt-2">
                         {currentUser?.id === userDetails.id ? (
-                          <p className="text-sm text-custom-text-200">
+                          <p className="text-13 text-secondary">
                             Are you sure you want to leave the workspace? You will no longer have access to this
                             workspace. This action cannot be undone.
                           </p>
                         ) : (
-                          <p className="text-sm text-custom-text-200">
+                          <p className="text-13 text-secondary">
                             Are you sure you want to remove member-{" "}
                             <span className="font-bold">{userDetails?.display_name}</span>? They will no longer have
                             access to this workspace. This action cannot be undone.
@@ -82,10 +88,10 @@ export const ConfirmWorkspaceMemberRemove = observer(function ConfirmWorkspaceMe
                   </div>
                 </div>
                 <div className="flex justify-end gap-2 p-4 sm:px-6">
-                  <Button variant="neutral-primary" size="sm" onClick={handleClose}>
+                  <Button variant="secondary" onClick={handleClose}>
                     Cancel
                   </Button>
-                  <Button variant="danger" size="sm" tabIndex={1} onClick={handleDeletion} loading={isRemoving}>
+                  <Button variant="error-fill" tabIndex={1} onClick={handleDeletion} loading={isRemoving}>
                     {currentUser?.id === userDetails.id
                       ? isRemoving
                         ? "Leaving"
diff --git a/apps/web/core/components/workspace/billing/comparison/base.tsx b/apps/web/core/components/workspace/billing/comparison/base.tsx
index a31c96987..9d830d9a7 100644
--- a/apps/web/core/components/workspace/billing/comparison/base.tsx
+++ b/apps/web/core/components/workspace/billing/comparison/base.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import { ArrowDown, ArrowUp } from "lucide-react";
 // plane imports
@@ -35,35 +41,31 @@ export const PlansComparisonBase = observer(function PlansComparisonBase(props:
   const getSubscriptionType = (planKey: TPlanePlans) => planDetails[planKey].id;
 
   return (
-    <div
-      className={`size-full px-2 overflow-x-auto horizontal-scrollbar scrollbar-sm transition-all duration-500 ease-out will-change-transform`}
-    >
+    <div className="horizontal-scrollbar scrollbar-sm size-full overflow-x-auto">
       <div className="max-w-full" style={{ minWidth: `${numberOfPlansToRender * 280}px` }}>
-        <div className="h-full flex flex-col gap-y-10">
+        <div className="flex h-full flex-col gap-y-10">
           <div
-            className={cn(
-              "flex-shrink-0 sticky top-2 z-10 bg-custom-background-100 grid gap-3 text-sm font-medium even:bg-custom-background-90 transition-all duration-500 ease-out will-change-transform"
-            )}
+            className={cn("sticky top-2 z-10 grid flex-shrink-0 gap-3 bg-layer-1 text-caption-md-medium")}
             style={{
               gridTemplateColumns: `repeat(${numberOfPlansToRender + 1}, minmax(0, 1fr))`,
             }}
           >
-            <div className="col-span-1 p-3 space-y-0.5 text-base font-medium" />
+            <div className="col-span-1 space-y-0.5 p-3 text-body-sm-medium" />
             {planeDetails}
           </div>
           {/* Plan Headers */}
           <section className="flex-shrink-0">
             {/* Plan Highlights */}
             <div
-              className="grid gap-3 py-1 text-sm text-custom-text-200 even:bg-custom-background-90 rounded-sm"
+              className="text-caption-md grid gap-3 rounded-xs py-1 text-secondary even:bg-surface-2"
               style={{ gridTemplateColumns: `repeat(${numberOfPlansToRender + 1}, minmax(0, 1fr))` }}
             >
-              <div className="col-span-1 p-3 text-base font-medium">Highlights</div>
+              <div className="col-span-1 p-3 text-body-sm-medium">Highlights</div>
               {Object.entries(planHighlights).map(
                 ([planKey, highlights]) =>
                   shouldRenderPlanDetail(planKey as TPlanePlans) && (
                     <div key={planKey} className="col-span-1 p-3">
-                      <ul className="list-disc space-y-1">
+                      <ul className="list-disc space-y-1 text-body-xs-regular">
                         {highlights.map((highlight, index) => (
                           <li key={index}>{highlight}</li>
                         ))}
@@ -79,18 +81,18 @@ export const PlansComparisonBase = observer(function PlansComparisonBase(props:
             <>
               {planComparison.map((section, sectionIdx) => (
                 <section key={sectionIdx} className="flex-shrink-0">
-                  <h2 className="flex gap-2 items-start text-lg font-semibold text-custom-text-300 mb-2 pl-2">
+                  <h2 className="mb-2 flex items-start gap-2 pl-2 text-h5-semibold text-secondary">
                     {section.title} {section.comingSoon && <ComingSoonBadge />}
                   </h2>
-                  <div className="border-t border-custom-border-200">
+                  <div className="border-t border-subtle">
                     {section.features.map((feature, featureIdx) => (
                       <div
                         key={featureIdx}
-                        className="grid gap-3 text-sm text-custom-text-200 even:bg-custom-background-90 rounded-sm"
+                        className="text-caption-md grid gap-3 rounded-xs bg-layer-transparent text-secondary even:bg-layer-1"
                         style={{ gridTemplateColumns: `repeat(${numberOfPlansToRender + 1}, minmax(0, 1fr))` }}
                       >
-                        <div className="col-span-1 p-3 flex items-center text-base font-medium">
-                          <div className="w-full flex gap-2 items-start justify-between">
+                        <div className="col-span-1 flex items-center p-3 text-body-sm-medium">
+                          <div className="flex w-full items-start justify-between gap-2">
                             {feature.title} {feature.comingSoon && <ComingSoonBadge />}
                           </div>
                         </div>
@@ -99,7 +101,7 @@ export const PlansComparisonBase = observer(function PlansComparisonBase(props:
                             shouldRenderPlanDetail(planKey) && (
                               <div
                                 key={planKey}
-                                className="col-span-1 p-3 flex items-center justify-center text-center"
+                                className="col-span-1 flex items-center justify-center p-3 text-center text-body-xs-regular"
                               >
                                 <PlanFeatureDetail
                                   subscriptionType={getSubscriptionType(planKey)}
@@ -122,16 +124,15 @@ export const PlansComparisonBase = observer(function PlansComparisonBase(props:
         </div>
 
         {/* Toggle Button */}
-        <div className="flex items-center justify-center gap-1 my-4 pb-2">
+        <div className="my-4 flex items-center justify-center gap-1 pb-2">
           <Button
-            variant="link-neutral"
+            variant="ghost"
             onClick={() => {
               setIsCompareAllFeaturesSectionOpen(!isCompareAllFeaturesSectionOpen);
             }}
-            className="hover:bg-custom-background-90"
+            appendIcon={isCompareAllFeaturesSectionOpen ? <ArrowUp /> : <ArrowDown />}
           >
             {isCompareAllFeaturesSectionOpen ? "Collapse comparison" : "Compare all features"}
-            {isCompareAllFeaturesSectionOpen ? <ArrowUp className="size-4" /> : <ArrowDown className="size-4" />}
           </Button>
         </div>
       </div>
diff --git a/apps/web/core/components/workspace/billing/comparison/feature-detail.tsx b/apps/web/core/components/workspace/billing/comparison/feature-detail.tsx
index 80c1e2c3a..b3335f345 100644
--- a/apps/web/core/components/workspace/billing/comparison/feature-detail.tsx
+++ b/apps/web/core/components/workspace/billing/comparison/feature-detail.tsx
@@ -1,8 +1,12 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { CheckCircle2, Minus, MinusCircle } from "lucide-react";
 import type { EProductSubscriptionEnum } from "@plane/types";
 // plane imports
-import { getSubscriptionTextColor } from "@plane/ui";
-import { cn } from "@plane/utils";
 // constants
 import type { TPlanFeatureData } from "@/constants/plans";
 
@@ -12,16 +16,16 @@ type TPlanFeatureDetailProps = {
 };
 
 export function PlanFeatureDetail(props: TPlanFeatureDetailProps) {
-  const { subscriptionType, data } = props;
+  const { data } = props;
 
   if (data === null || data === undefined) {
-    return <Minus className="size-4 text-custom-text-400" />;
+    return <Minus className="size-4 text-placeholder" />;
   }
   if (data === true) {
-    return <CheckCircle2 className={cn(getSubscriptionTextColor(subscriptionType), "size-4")} />;
+    return <CheckCircle2 className="size-4 text-accent-primary" />;
   }
   if (data === false) {
-    return <MinusCircle className="size-4 text-custom-text-400" />;
+    return <MinusCircle className="size-4 text-placeholder" />;
   }
   return <>{data}</>;
 }
diff --git a/apps/web/core/components/workspace/billing/comparison/index.ts b/apps/web/core/components/workspace/billing/comparison/index.ts
index 955fdd143..d10905754 100644
--- a/apps/web/core/components/workspace/billing/comparison/index.ts
+++ b/apps/web/core/components/workspace/billing/comparison/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./base";
diff --git a/apps/web/core/components/workspace/confirm-workspace-member-remove.tsx b/apps/web/core/components/workspace/confirm-workspace-member-remove.tsx
index 34a07953f..9ec6dc428 100644
--- a/apps/web/core/components/workspace/confirm-workspace-member-remove.tsx
+++ b/apps/web/core/components/workspace/confirm-workspace-member-remove.tsx
@@ -1,10 +1,16 @@
-import React, { useState } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
 import { observer } from "mobx-react";
 import { AlertTriangle } from "lucide-react";
-import { Dialog, Transition } from "@headlessui/react";
 // ui
 import { useTranslation } from "@plane/i18n";
 import { Button } from "@plane/propel/button";
+import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
 // hooks
 import { useUser } from "@/hooks/store/user";
 
@@ -40,79 +46,46 @@ export const ConfirmWorkspaceMemberRemove = observer(function ConfirmWorkspaceMe
   };
 
   return (
-    <Transition.Root show={isOpen} as={React.Fragment}>
-      <Dialog as="div" className="relative z-20" onClose={handleClose}>
-        <Transition.Child
-          as={React.Fragment}
-          enter="ease-out duration-300"
-          enterFrom="opacity-0"
-          enterTo="opacity-100"
-          leave="ease-in duration-200"
-          leaveFrom="opacity-100"
-          leaveTo="opacity-0"
-        >
-          <div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
-        </Transition.Child>
-
-        <div className="fixed inset-0 z-20 overflow-y-auto">
-          <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
-            <Transition.Child
-              as={React.Fragment}
-              enter="ease-out duration-300"
-              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-              enterTo="opacity-100 translate-y-0 sm:scale-100"
-              leave="ease-in duration-200"
-              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-            >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-custom-background-100 text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-[40rem]">
-                <div className="px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
-                  <div className="sm:flex sm:items-start">
-                    <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
-                      <AlertTriangle className="h-6 w-6 text-red-600" aria-hidden="true" />
-                    </div>
-                    <div className="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
-                      <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-custom-text-100">
-                        {currentUser?.id === userDetails.id
-                          ? "Leave workspace?"
-                          : `Remove ${userDetails?.display_name}?`}
-                      </Dialog.Title>
-                      <div className="mt-2">
-                        {currentUser?.id === userDetails.id ? (
-                          <p className="text-sm text-custom-text-200">
-                            {t("workspace_settings.settings.members.leave_confirmation")}
-                          </p>
-                        ) : (
-                          <p className="text-sm text-custom-text-200">
-                            {/* TODO: Add translation here */}
-                            Are you sure you want to remove member-{" "}
-                            <span className="font-bold">{userDetails?.display_name}</span>? They will no longer have
-                            access to this workspace. This action cannot be undone.
-                          </p>
-                        )}
-                      </div>
-                    </div>
-                  </div>
-                </div>
-                <div className="flex justify-end gap-2 p-4 sm:px-6">
-                  <Button variant="neutral-primary" size="sm" onClick={handleClose}>
-                    {t("cancel")}
-                  </Button>
-                  <Button variant="danger" size="sm" tabIndex={1} onClick={handleDeletion} loading={isRemoving}>
-                    {currentUser?.id === userDetails.id
-                      ? isRemoving
-                        ? t("leaving")
-                        : t("leave")
-                      : isRemoving
-                        ? t("removing")
-                        : t("remove")}
-                  </Button>
-                </div>
-              </Dialog.Panel>
-            </Transition.Child>
+    <ModalCore isOpen={isOpen} handleClose={handleClose} position={EModalPosition.CENTER} width={EModalWidth.XXL}>
+      <div className="px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+        <div className="sm:flex sm:items-start">
+          <div className="mx-auto flex h-12 w-12 shrink-0 items-center justify-center rounded-full bg-danger-subtle sm:mx-0 sm:h-10 sm:w-10">
+            <AlertTriangle className="h-6 w-6 text-danger-primary" aria-hidden="true" />
+          </div>
+          <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+            <h3 className="text-h5-medium leading-6 text-primary">
+              {currentUser?.id === userDetails.id ? "Leave workspace?" : `Remove ${userDetails?.display_name}?`}
+            </h3>
+            <div className="mt-2">
+              {currentUser?.id === userDetails.id ? (
+                <p className="text-body-xs-regular text-secondary">
+                  {t("workspace_settings.settings.members.leave_confirmation")}
+                </p>
+              ) : (
+                <p className="text-body-xs-regular text-secondary">
+                  {/* TODO: Add translation here */}
+                  Are you sure you want to remove member- <span className="font-bold">{userDetails?.display_name}</span>
+                  ? They will no longer have access to this workspace. This action cannot be undone.
+                </p>
+              )}
+            </div>
           </div>
         </div>
-      </Dialog>
-    </Transition.Root>
+      </div>
+      <div className="flex justify-end gap-2 p-4 sm:px-6">
+        <Button variant="secondary" size="lg" onClick={handleClose}>
+          {t("cancel")}
+        </Button>
+        <Button variant="error-fill" size="lg" tabIndex={1} onClick={handleDeletion} loading={isRemoving}>
+          {currentUser?.id === userDetails.id
+            ? isRemoving
+              ? t("leaving")
+              : t("leave")
+            : isRemoving
+              ? t("removing")
+              : t("remove")}
+        </Button>
+      </div>
+    </ModalCore>
   );
 });
diff --git a/apps/web/core/components/workspace/create-workspace-form.tsx b/apps/web/core/components/workspace/create-workspace-form.tsx
index 4a85cd03e..2274f1832 100644
--- a/apps/web/core/components/workspace/create-workspace-form.tsx
+++ b/apps/web/core/components/workspace/create-workspace-form.tsx
@@ -1,25 +1,26 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { Dispatch, SetStateAction } from "react";
 import { useEffect, useState } from "react";
 import { observer } from "mobx-react";
 import { Controller, useForm } from "react-hook-form";
-import {
-  ORGANIZATION_SIZE,
-  RESTRICTED_URLS,
-  WORKSPACE_TRACKER_ELEMENTS,
-  WORKSPACE_TRACKER_EVENTS,
-} from "@plane/constants";
+import { ORGANIZATION_SIZE, RESTRICTED_URLS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { Button } from "@plane/propel/button";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { IWorkspace } from "@plane/types";
 // ui
 import { CustomSelect, Input } from "@plane/ui";
+import { validateWorkspaceName, validateSlug } from "@plane/utils";
 // hooks
-import { captureError, captureSuccess } from "@/helpers/event-tracker.helper";
 import { useWorkspace } from "@/hooks/store/use-workspace";
 import { useAppRouter } from "@/hooks/use-app-router";
 // services
-import { WorkspaceService } from "@/plane-web/services";
+import { WorkspaceService } from "@/services/workspace.service";
 
 type Props = {
   onSubmit?: (res: IWorkspace) => Promise<void>;
@@ -67,47 +68,36 @@ export const CreateWorkspaceForm = observer(function CreateWorkspaceForm(props:
   } = useForm<IWorkspace>({ defaultValues, mode: "onChange" });
 
   const handleCreateWorkspace = async (formData: IWorkspace) => {
-    await workspaceService
-      .workspaceSlugCheck(formData.slug)
-      .then(async (res) => {
-        if (res.status === true && !RESTRICTED_URLS.includes(formData.slug)) {
-          setSlugError(false);
+    try {
+      const res = (await workspaceService.workspaceSlugCheck(formData.slug)) as { status: boolean };
+      if (res.status === true && !RESTRICTED_URLS.includes(formData.slug)) {
+        setSlugError(false);
+        try {
+          const workspaceResponse = await createWorkspace(formData);
+          setToast({
+            type: TOAST_TYPE.SUCCESS,
+            title: t("workspace_creation.toast.success.title"),
+            message: t("workspace_creation.toast.success.message"),
+          });
 
-          await createWorkspace(formData)
-            .then(async (res) => {
-              captureSuccess({
-                eventName: WORKSPACE_TRACKER_EVENTS.create,
-                payload: { slug: formData.slug },
-              });
-              setToast({
-                type: TOAST_TYPE.SUCCESS,
-                title: t("workspace_creation.toast.success.title"),
-                message: t("workspace_creation.toast.success.message"),
-              });
-
-              if (onSubmit) await onSubmit(res);
-            })
-            .catch(() => {
-              captureError({
-                eventName: WORKSPACE_TRACKER_EVENTS.create,
-                payload: { slug: formData.slug },
-                error: new Error("Error creating workspace"),
-              });
-              setToast({
-                type: TOAST_TYPE.ERROR,
-                title: t("workspace_creation.toast.error.title"),
-                message: t("workspace_creation.toast.error.message"),
-              });
-            });
-        } else setSlugError(true);
-      })
-      .catch(() => {
-        setToast({
-          type: TOAST_TYPE.ERROR,
-          title: t("workspace_creation.toast.error.title"),
-          message: t("workspace_creation.toast.error.message"),
-        });
+          if (onSubmit) await onSubmit(workspaceResponse);
+        } catch {
+          setToast({
+            type: TOAST_TYPE.ERROR,
+            title: t("workspace_creation.toast.error.title"),
+            message: t("workspace_creation.toast.error.message"),
+          });
+        }
+      } else {
+        setSlugError(true);
+      }
+    } catch {
+      setToast({
+        type: TOAST_TYPE.ERROR,
+        title: t("workspace_creation.toast.error.title"),
+        message: t("workspace_creation.toast.error.message"),
       });
+    }
   };
 
   useEffect(
@@ -119,12 +109,17 @@ export const CreateWorkspaceForm = observer(function CreateWorkspaceForm(props:
   );
 
   return (
-    <form className="space-y-6 sm:space-y-9" onSubmit={handleSubmit(handleCreateWorkspace)}>
+    <form
+      className="space-y-6 sm:space-y-9"
+      onSubmit={(e) => {
+        void handleSubmit(handleCreateWorkspace)(e);
+      }}
+    >
       <div className="space-y-6 sm:space-y-7">
-        <div className="space-y-1 text-sm">
+        <div className="flex flex-col gap-2 text-13">
           <label htmlFor="workspaceName">
             {t("workspace_creation.form.name.label")}
-            <span className="ml-0.5 text-red-500">*</span>
+            <span className="ml-0.5 text-danger-primary">*</span>
           </label>
           <div className="flex flex-col gap-1">
             <Controller
@@ -132,8 +127,7 @@ export const CreateWorkspaceForm = observer(function CreateWorkspaceForm(props:
               name="name"
               rules={{
                 required: t("common.errors.required"),
-                validate: (value) =>
-                  /^[\w\s-]*$/.test(value) || t("workspace_creation.errors.validation.name_alphanumeric"),
+                validate: (value) => validateWorkspaceName(value, true),
                 maxLength: {
                   value: 80,
                   message: t("workspace_creation.errors.validation.name_length"),
@@ -158,16 +152,16 @@ export const CreateWorkspaceForm = observer(function CreateWorkspaceForm(props:
                 />
               )}
             />
-            <span className="text-xs text-red-500">{errors?.name?.message}</span>
+            <span className="text-11 text-danger-primary">{errors?.name?.message}</span>
           </div>
         </div>
-        <div className="space-y-1 text-sm">
+        <div className="flex flex-col gap-2 text-13">
           <label htmlFor="workspaceUrl">
             {t("workspace_creation.form.url.label")}
-            <span className="ml-0.5 text-red-500">*</span>
+            <span className="ml-0.5 text-danger-primary">*</span>
           </label>
-          <div className="flex w-full items-center rounded-md border-[0.5px] border-custom-border-200 px-3">
-            <span className="whitespace-nowrap text-sm text-custom-text-200">{window && window.location.host}/</span>
+          <div className="flex w-full items-center rounded-md border border-subtle bg-layer-2 px-3">
+            <span className="text-12 whitespace-nowrap text-secondary">{window && window.location.host}/</span>
             <Controller
               control={control}
               name="slug"
@@ -184,30 +178,33 @@ export const CreateWorkspaceForm = observer(function CreateWorkspaceForm(props:
                   type="text"
                   value={value.toLocaleLowerCase().trim().replace(/ /g, "-")}
                   onChange={(e) => {
-                    if (/^[a-zA-Z0-9_-]+$/.test(e.target.value)) setInvalidSlug(false);
+                    const validation = validateSlug(e.target.value);
+                    if (validation === true) setInvalidSlug(false);
                     else setInvalidSlug(true);
                     onChange(e.target.value.toLowerCase());
                   }}
                   ref={ref}
                   hasError={Boolean(errors.slug)}
                   placeholder={t("workspace_creation.form.url.placeholder")}
-                  className="block w-full rounded-md border-none bg-transparent !px-0 py-2 text-sm"
+                  className="block w-full rounded-md border-none bg-transparent !px-0 py-2 text-12"
                 />
               )}
             />
           </div>
           {slugError && (
-            <p className="-mt-3 text-sm text-red-500">{t("workspace_creation.errors.validation.url_already_taken")}</p>
+            <p className="-mt-3 text-13 text-danger-primary">
+              {t("workspace_creation.errors.validation.url_already_taken")}
+            </p>
           )}
           {invalidSlug && (
-            <p className="text-sm text-red-500">{t("workspace_creation.errors.validation.url_alphanumeric")}</p>
+            <p className="text-13 text-danger-primary">{t("workspace_creation.errors.validation.url_alphanumeric")}</p>
           )}
-          {errors.slug && <span className="text-xs text-red-500">{errors.slug.message}</span>}
+          {errors.slug && <span className="text-11 text-danger-primary">{errors.slug.message}</span>}
         </div>
-        <div className="space-y-1 text-sm">
+        <div className="flex flex-col gap-2 text-13">
           <span>
             {t("workspace_creation.form.organization_size.label")}
-            <span className="ml-0.5 text-red-500">*</span>
+            <span className="ml-0.5 text-danger-primary">*</span>
           </span>
           <div className="w-full">
             <Controller
@@ -220,12 +217,12 @@ export const CreateWorkspaceForm = observer(function CreateWorkspaceForm(props:
                   onChange={onChange}
                   label={
                     ORGANIZATION_SIZE.find((c) => c === value) ?? (
-                      <span className="text-custom-text-400">
+                      <span className="text-placeholder">
                         {t("workspace_creation.form.organization_size.placeholder")}
                       </span>
                     )
                   }
-                  buttonClassName="!border-[0.5px] !border-custom-border-200 !shadow-none"
+                  buttonClassName="border border-subtle bg-layer-2 !shadow-none !rounded-md"
                   input
                 >
                   {ORGANIZATION_SIZE.map((item) => (
@@ -237,25 +234,18 @@ export const CreateWorkspaceForm = observer(function CreateWorkspaceForm(props:
               )}
             />
             {errors.organization_size && (
-              <span className="text-sm text-red-500">{errors.organization_size.message}</span>
+              <span className="text-13 text-danger-primary">{errors.organization_size.message}</span>
             )}
           </div>
         </div>
       </div>
       <div className="flex items-center gap-4">
         {secondaryButton}
-        <Button
-          data-ph-element={WORKSPACE_TRACKER_ELEMENTS.CREATE_WORKSPACE_BUTTON}
-          variant="primary"
-          type="submit"
-          size="md"
-          disabled={!isValid}
-          loading={isSubmitting}
-        >
+        <Button variant="primary" type="submit" size="xl" disabled={!isValid} loading={isSubmitting}>
           {isSubmitting ? t(primaryButtonText.loading) : t(primaryButtonText.default)}
         </Button>
         {!secondaryButton && (
-          <Button variant="neutral-primary" type="button" size="md" onClick={() => router.back()}>
+          <Button variant="secondary" type="button" size="xl" onClick={() => router.back()}>
             {t("common.go_back")}
           </Button>
         )}
diff --git a/apps/web/core/components/workspace/delete-workspace-form.tsx b/apps/web/core/components/workspace/delete-workspace-form.tsx
index 40efa73c9..4d9196b16 100644
--- a/apps/web/core/components/workspace/delete-workspace-form.tsx
+++ b/apps/web/core/components/workspace/delete-workspace-form.tsx
@@ -1,18 +1,20 @@
-import React from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import { Controller, useForm } from "react-hook-form";
 import { AlertTriangle } from "lucide-react";
-// types
-import { WORKSPACE_TRACKER_EVENTS } from "@plane/constants";
+// Plane Imports
 import { useTranslation } from "@plane/i18n";
 import { Button } from "@plane/propel/button";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { IWorkspace } from "@plane/types";
-// ui
 import { Input } from "@plane/ui";
-// hooks
 import { cn } from "@plane/utils";
-import { captureError, captureSuccess } from "@/helpers/event-tracker.helper";
+// hooks
 import { useWorkspace } from "@/hooks/store/use-workspace";
 import { useUserSettings } from "@/hooks/store/user";
 import { useAppRouter } from "@/hooks/use-app-router";
@@ -59,57 +61,47 @@ export const DeleteWorkspaceForm = observer(function DeleteWorkspaceForm(props:
   const onSubmit = async () => {
     if (!data || !canDelete) return;
 
-    await deleteWorkspace(data.slug)
-      .then(async () => {
-        await fetchCurrentUserSettings();
-        handleClose();
-        router.push(getWorkspaceRedirectionUrl());
-        captureSuccess({
-          eventName: WORKSPACE_TRACKER_EVENTS.delete,
-          payload: { slug: data.slug },
-        });
-        setToast({
-          type: TOAST_TYPE.SUCCESS,
-          title: t("workspace_settings.settings.general.delete_modal.success_title"),
-          message: t("workspace_settings.settings.general.delete_modal.success_message"),
-        });
-      })
-      .catch(() => {
-        setToast({
-          type: TOAST_TYPE.ERROR,
-          title: t("workspace_settings.settings.general.delete_modal.error_title"),
-          message: t("workspace_settings.settings.general.delete_modal.error_message"),
-        });
-        captureError({
-          eventName: WORKSPACE_TRACKER_EVENTS.delete,
-          payload: { slug: data.slug },
-          error: new Error("Error deleting workspace"),
-        });
+    try {
+      await deleteWorkspace(data.slug);
+      await fetchCurrentUserSettings();
+      handleClose();
+      router.push(getWorkspaceRedirectionUrl());
+      setToast({
+        type: TOAST_TYPE.SUCCESS,
+        title: t("workspace_settings.settings.general.delete_modal.success_title"),
+        message: t("workspace_settings.settings.general.delete_modal.success_message"),
       });
+    } catch (_error) {
+      setToast({
+        type: TOAST_TYPE.ERROR,
+        title: t("workspace_settings.settings.general.delete_modal.error_title"),
+        message: t("workspace_settings.settings.general.delete_modal.error_message"),
+      });
+    }
   };
 
   return (
     <form onSubmit={handleSubmit(onSubmit)} className="flex flex-col gap-6 p-6">
-      <div className="flex flex-col sm:flex-row items-center sm:items-start gap-4">
+      <div className="flex flex-col items-center gap-4 sm:flex-row sm:items-start">
         <span
           className={cn(
-            "flex-shrink-0 grid place-items-center rounded-full size-12 sm:size-10 bg-red-500/20 text-red-100"
+            "grid size-12 shrink-0 place-items-center rounded-full bg-danger-subtle text-danger-primary sm:size-10"
           )}
         >
-          <AlertTriangle className="size-5 text-red-600" aria-hidden="true" />
+          <AlertTriangle className="size-5 text-danger-primary" aria-hidden="true" />
         </span>
         <div>
           <div className="text-center sm:text-left">
-            <h3 className="text-lg font-medium">{t("workspace_settings.settings.general.delete_modal.title")}</h3>
-            <p className="mt-1 text-sm text-custom-text-200">
-              You are about to delete the workspace <span className="break-words font-semibold">{data?.name}</span>. If
-              you confirm, you will lose access to all your work data in this workspace without any way to restore it.
-              Tread very carefully.
+            <h3 className="text-h5-medium">{t("workspace_settings.settings.general.delete_modal.title")}</h3>
+            <p className="mt-1 text-body-xs-regular text-secondary">
+              You are about to delete the workspace{" "}
+              <span className="text-body-xs-semibold break-words">{data?.name}</span>. If you confirm, you will lose
+              access to all your work data in this workspace without any way to restore it. Tread very carefully.
             </p>
           </div>
 
-          <div className="text-custom-text-200 mt-4">
-            <p className="break-words text-sm ">Type in this workspace&apos;s name to continue.</p>
+          <div className="mt-4 text-secondary">
+            <p className="text-body-xs-regular break-words">Type in this workspace&apos;s name to continue.</p>
             <Controller
               control={control}
               name="workspaceName"
@@ -130,10 +122,10 @@ export const DeleteWorkspaceForm = observer(function DeleteWorkspaceForm(props:
             />
           </div>
 
-          <div className="text-custom-text-200 mt-4">
-            <p className="text-sm">
+          <div className="mt-4 text-secondary">
+            <p className="text-body-xs-regular">
               For final confirmation, type{" "}
-              <span className="font-medium text-custom-text-100">delete my workspace </span>
+              <span className="text-body-xs-medium text-primary">delete my workspace </span>
               below.
             </p>
             <Controller
@@ -159,10 +151,10 @@ export const DeleteWorkspaceForm = observer(function DeleteWorkspaceForm(props:
       </div>
 
       <div className="flex justify-end gap-2">
-        <Button variant="neutral-primary" size="sm" onClick={handleClose}>
+        <Button variant="secondary" size="lg" onClick={handleClose}>
           {t("cancel")}
         </Button>
-        <Button variant="danger" size="sm" type="submit" disabled={!canDelete} loading={isSubmitting}>
+        <Button variant="error-fill" size="lg" type="submit" disabled={!canDelete} loading={isSubmitting}>
           {isSubmitting ? t("deleting") : t("confirm")}
         </Button>
       </div>
diff --git a/apps/web/core/components/workspace/invite-modal/actions.tsx b/apps/web/core/components/workspace/invite-modal/actions.tsx
index 5eddfc777..23b5f4d0d 100644
--- a/apps/web/core/components/workspace/invite-modal/actions.tsx
+++ b/apps/web/core/components/workspace/invite-modal/actions.tsx
@@ -1,8 +1,15 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
-import { Plus } from "lucide-react";
+
 // plane imports
 import { useTranslation } from "@plane/i18n";
 import { Button } from "@plane/propel/button";
+import { PlusIcon } from "@plane/propel/icons";
 import { cn } from "@plane/utils";
 
 type TInvitationModalActionsProps = {
@@ -38,7 +45,7 @@ export const InvitationModalActions = observer(function InvitationModalActions(p
       <button
         type="button"
         className={cn(
-          "flex items-center gap-1 bg-transparent py-2 pr-3 text-xs font-medium text-custom-primary outline-custom-primary",
+          "flex items-center gap-1 bg-transparent py-2 pr-3 text-caption-md-medium text-accent-primary outline-accent-strong",
           {
             "cursor-not-allowed opacity-60": isInviteDisabled,
           }
@@ -46,14 +53,14 @@ export const InvitationModalActions = observer(function InvitationModalActions(p
         onClick={appendField}
         disabled={isInviteDisabled}
       >
-        <Plus className="h-3.5 w-3.5" />
+        <PlusIcon className="h-3.5 w-3.5" />
         {addMoreButtonText || t("common.add_more")}
       </button>
       <div className="flex items-center gap-2">
-        <Button variant="neutral-primary" size="sm" onClick={handleClose}>
+        <Button variant="secondary" size="lg" onClick={handleClose}>
           {cancelButtonText || t("cancel")}
         </Button>
-        <Button variant="primary" size="sm" type="submit" loading={isSubmitting} disabled={isInviteDisabled}>
+        <Button variant="primary" size="lg" type="submit" loading={isSubmitting} disabled={isInviteDisabled}>
           {isSubmitting
             ? submitButtonText?.loading || t("workspace_settings.settings.members.modal.button_loading")
             : submitButtonText?.default || t("workspace_settings.settings.members.modal.button")}
diff --git a/apps/web/core/components/workspace/invite-modal/fields.tsx b/apps/web/core/components/workspace/invite-modal/fields.tsx
index bd6ba085b..76813909a 100644
--- a/apps/web/core/components/workspace/invite-modal/fields.tsx
+++ b/apps/web/core/components/workspace/invite-modal/fields.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import type { Control, FieldArrayWithId, FormState } from "react-hook-form";
 import { Controller } from "react-hook-form";
@@ -39,7 +45,10 @@ export const InvitationFields = observer(function InvitationFields(props: TInvit
   return (
     <div className={cn("mb-3 space-y-4", className)}>
       {fields.map((field, index) => (
-        <div key={field.id} className="relative group mb-1 flex items-start justify-between gap-x-4 text-sm w-full">
+        <div
+          key={field.id}
+          className="group relative mb-1 flex w-full items-start justify-between gap-x-4 text-body-xs-regular"
+        >
           <div className="w-full">
             <Controller
               control={control}
@@ -62,16 +71,18 @@ export const InvitationFields = observer(function InvitationFields(props: TInvit
                     ref={ref}
                     hasError={Boolean(errors.emails?.[index]?.email)}
                     placeholder={t("workspace_settings.settings.members.modal.placeholder")}
-                    className="w-full text-xs sm:text-sm"
+                    className="w-full text-caption-sm-regular sm:text-body-xs-regular"
                   />
                   {errors.emails?.[index]?.email && (
-                    <span className="ml-1 text-xs text-red-500">{errors.emails?.[index]?.email?.message}</span>
+                    <span className="ml-1 text-caption-sm-regular text-danger-primary">
+                      {errors.emails?.[index]?.email?.message}
+                    </span>
                   )}
                 </>
               )}
             />
           </div>
-          <div className="flex items-center justify-between gap-2 flex-shrink-0 ">
+          <div className="flex shrink-0 items-center justify-between gap-2">
             <div className="flex flex-col gap-1">
               <Controller
                 control={control}
@@ -80,9 +91,9 @@ export const InvitationFields = observer(function InvitationFields(props: TInvit
                 render={({ field: { value, onChange } }) => (
                   <CustomSelect
                     value={value}
-                    label={<span className="text-xs sm:text-sm">{ROLE[value]}</span>}
+                    label={<span className="text-caption-sm-regular sm:text-body-xs-regular">{ROLE[value]}</span>}
                     onChange={onChange}
-                    className="flex-grow w-24"
+                    className="w-24 flex-grow"
                     input
                   >
                     {Object.entries(ROLE).map(([key, value]) => {
@@ -99,8 +110,12 @@ export const InvitationFields = observer(function InvitationFields(props: TInvit
             </div>
             {fields.length > 1 && (
               <div className="flex-item flex w-6">
-                <button type="button" className="place-items-center self-center rounded" onClick={() => remove(index)}>
-                  <CloseIcon className="h-4 w-4 text-custom-text-200" />
+                <button
+                  type="button"
+                  className="place-items-center self-center rounded-sm"
+                  onClick={() => remove(index)}
+                >
+                  <CloseIcon className="h-4 w-4 text-secondary" />
                 </button>
               </div>
             )}
diff --git a/apps/web/core/components/workspace/invite-modal/form.tsx b/apps/web/core/components/workspace/invite-modal/form.tsx
index d1755d706..486fe6dde 100644
--- a/apps/web/core/components/workspace/invite-modal/form.tsx
+++ b/apps/web/core/components/workspace/invite-modal/form.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import { Dialog } from "@headlessui/react";
 
@@ -16,10 +22,10 @@ export const InvitationForm = observer(function InvitationForm(props: TInvitatio
   return (
     <form onSubmit={onSubmit} className={className}>
       <div className="space-y-4">
-        <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-custom-text-100">
+        <Dialog.Title as="h3" className="text-body-md-medium leading-6 text-primary">
           {title}
         </Dialog.Title>
-        <div className="text-sm text-custom-text-200">{description}</div>
+        <div className="text-body-xs-regular text-secondary">{description}</div>
         {children}
       </div>
       {actions}
diff --git a/apps/web/core/components/workspace/logo.tsx b/apps/web/core/components/workspace/logo.tsx
index 113e9f1dd..7255c3f97 100644
--- a/apps/web/core/components/workspace/logo.tsx
+++ b/apps/web/core/components/workspace/logo.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 // plane imports
 import { useTranslation } from "@plane/i18n";
@@ -17,14 +23,14 @@ export const WorkspaceLogo = observer(function WorkspaceLogo(props: Props) {
     <div
       className={cn(
         `relative grid h-6 w-6 flex-shrink-0 place-items-center uppercase ${
-          !props.logo && "rounded-md bg-[#026292] text-white"
+          !props.logo && "rounded-md bg-accent-primary text-on-color"
         } ${props.classNames ? props.classNames : ""}`
       )}
     >
       {props.logo && props.logo !== "" ? (
         <img
           src={getFileURL(props.logo)}
-          className="absolute left-0 top-0 h-full w-full rounded-md object-cover"
+          className="absolute top-0 left-0 h-full w-full rounded-md object-cover"
           alt={t("aria_labels.projects_sidebar.workspace_logo")}
         />
       ) : (
diff --git a/apps/web/core/components/workspace/settings/invitations-list-item.tsx b/apps/web/core/components/workspace/settings/invitations-list-item.tsx
index e07950f8a..cf0db45a2 100644
--- a/apps/web/core/components/workspace/settings/invitations-list-item.tsx
+++ b/apps/web/core/components/workspace/settings/invitations-list-item.tsx
@@ -1,11 +1,16 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
-import { LinkIcon, Trash2 } from "lucide-react";
 // plane imports
-import { ROLE, EUserPermissions, EUserPermissionsLevel, MEMBER_TRACKER_ELEMENTS } from "@plane/constants";
+import { ROLE, EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { ChevronDownIcon } from "@plane/propel/icons";
+import { LinkIcon, TrashIcon, ChevronDownIcon } from "@plane/propel/icons";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { TContextMenuItem } from "@plane/ui";
 import { CustomSelect, CustomMenu } from "@plane/ui";
@@ -13,7 +18,6 @@ import { cn, copyTextToClipboard } from "@plane/utils";
 // components
 import { ConfirmWorkspaceMemberRemove } from "@/components/workspace/confirm-workspace-member-remove";
 // hooks
-import { captureClick } from "@/helpers/event-tracker.helper";
 import { useMember } from "@/hooks/store/use-member";
 import { useUserPermissions } from "@/hooks/store/user";
 
@@ -50,36 +54,35 @@ export const WorkspaceInvitationsListItem = observer(function WorkspaceInvitatio
   );
 
   const handleRemoveInvitation = async () => {
-    if (!workspaceSlug || !invitationDetails) return;
+    try {
+      if (!workspaceSlug || !invitationDetails) return;
 
-    await deleteMemberInvitation(workspaceSlug.toString(), invitationDetails.id)
-      .then(() => {
-        setToast({
-          type: TOAST_TYPE.SUCCESS,
-          title: "Success!",
-          message: "Invitation removed successfully.",
-        });
-      })
-      .catch((err) =>
-        setToast({
-          type: TOAST_TYPE.ERROR,
-          title: "Error!",
-          message: err?.error || "Something went wrong. Please try again.",
-        })
-      );
+      await deleteMemberInvitation(workspaceSlug.toString(), invitationDetails.id);
+      setToast({
+        type: TOAST_TYPE.SUCCESS,
+        title: "Success!",
+        message: "Invitation removed successfully.",
+      });
+    } catch (err: unknown) {
+      const error = err as { error?: string };
+      setToast({
+        type: TOAST_TYPE.ERROR,
+        title: "Error!",
+        message: error?.error || "Something went wrong. Please try again.",
+      });
+    }
   };
 
   if (!invitationDetails || !currentWorkspaceMemberInfo) return null;
 
-  const handleCopyText = () => {
+  const handleCopyText = async () => {
     try {
       const inviteLink = new URL(invitationDetails.invite_link, window.location.origin).href;
-      copyTextToClipboard(inviteLink).then(() => {
-        setToast({
-          type: TOAST_TYPE.SUCCESS,
-          title: t("common.link_copied"),
-          message: t("entity.link_copied_to_clipboard", { entity: t("common.invite") }),
-        });
+      await copyTextToClipboard(inviteLink);
+      setToast({
+        type: TOAST_TYPE.SUCCESS,
+        title: t("common.link_copied"),
+        message: t("entity.link_copied_to_clipboard", { entity: t("common.invite") }),
       });
     } catch (error) {
       console.error("Error generating invite link:", error);
@@ -89,7 +92,7 @@ export const WorkspaceInvitationsListItem = observer(function WorkspaceInvitatio
   const MENU_ITEMS: TContextMenuItem[] = [
     {
       key: "copy-link",
-      action: handleCopyText,
+      action: () => void handleCopyText(),
       title: t("common.actions.copy_link"),
       icon: LinkIcon,
       shouldRender: !!invitationDetails.invite_link,
@@ -97,16 +100,13 @@ export const WorkspaceInvitationsListItem = observer(function WorkspaceInvitatio
     {
       key: "remove",
       action: () => {
-        captureClick({
-          elementName: MEMBER_TRACKER_ELEMENTS.WORKSPACE_INVITATIONS_LIST_CONTEXT_MENU,
-        });
         setRemoveMemberModal(true);
       },
       title: t("common.remove"),
-      icon: Trash2,
+      icon: TrashIcon,
       shouldRender: isAdmin,
-      className: "text-red-500",
-      iconClassName: "text-red-500",
+      className: "text-danger-primary",
+      iconClassName: "text-danger-primary",
     },
   ];
 
@@ -121,25 +121,25 @@ export const WorkspaceInvitationsListItem = observer(function WorkspaceInvitatio
         }}
         onSubmit={handleRemoveInvitation}
       />
-      <div className="group flex items-center justify-between px-3 py-4 hover:bg-custom-background-90 w-full h-full">
+      <div className="group flex h-full w-full items-center justify-between px-3 py-4 hover:bg-layer-transparent-hover">
         <div className="flex items-center gap-x-4 gap-y-2">
-          <span className="relative flex h-10 w-10 items-center justify-center rounded bg-gray-700 p-4 capitalize text-white">
+          <span className="relative flex h-10 w-10 items-center justify-center rounded-sm bg-layer-3 p-4 text-tertiary capitalize">
             {(invitationDetails.email ?? "?")[0]}
           </span>
           <div>
-            <h4 className="cursor-default text-sm">{invitationDetails.email}</h4>
+            <h4 className="cursor-default text-body-xs-regular">{invitationDetails.email}</h4>
           </div>
         </div>
-        <div className="flex items-center gap-2 text-xs">
-          <div className="flex items-center justify-center rounded bg-yellow-500/20 px-2.5 py-1 text-center text-xs font-medium text-yellow-500">
+        <div className="flex items-center gap-2 text-11">
+          <div className="flex items-center justify-center rounded-sm bg-label-yellow-bg-strong/20 px-2.5 py-1 text-center text-caption-sm-medium text-label-yellow-text">
             <p>{t("common.pending")}</p>
           </div>
           <CustomSelect
             customButton={
-              <div className="item-center flex gap-1 rounded px-2 py-0.5">
+              <div className="item-center flex gap-1 rounded-sm px-2 py-0.5">
                 <span
-                  className={`flex items-center rounded text-xs font-medium ${
-                    hasRoleChangeAccess ? "" : "text-custom-sidebar-text-400"
+                  className={`flex items-center rounded-sm text-caption-sm-medium ${
+                    hasRoleChangeAccess ? "" : "text-placeholder"
                   }`}
                 >
                   {ROLE[invitationDetails.role]}
@@ -157,7 +157,8 @@ export const WorkspaceInvitationsListItem = observer(function WorkspaceInvitatio
 
               updateMemberInvitation(workspaceSlug.toString(), invitationDetails.id, {
                 role: value,
-              }).catch((error) => {
+              }).catch((err: unknown) => {
+                const error = err as { error?: string };
                 setToast({
                   type: TOAST_TYPE.ERROR,
                   title: "Error!",
@@ -169,7 +170,11 @@ export const WorkspaceInvitationsListItem = observer(function WorkspaceInvitatio
             placement="bottom-end"
           >
             {Object.keys(ROLE).map((key) => {
-              if (currentWorkspaceRole && currentWorkspaceRole !== 20 && currentWorkspaceRole < parseInt(key))
+              if (
+                currentWorkspaceRole &&
+                Number(currentWorkspaceRole) !== 20 &&
+                Number(currentWorkspaceRole) < parseInt(key)
+              )
                 return null;
 
               return (
@@ -192,7 +197,7 @@ export const WorkspaceInvitationsListItem = observer(function WorkspaceInvitatio
                     className={cn(
                       "flex items-center gap-2",
                       {
-                        "text-custom-text-400": item.disabled,
+                        "text-placeholder": item.disabled,
                       },
                       item.className
                     )}
@@ -203,8 +208,8 @@ export const WorkspaceInvitationsListItem = observer(function WorkspaceInvitatio
                       <h5>{item.title}</h5>
                       {item.description && (
                         <p
-                          className={cn("text-custom-text-300 whitespace-pre-line", {
-                            "text-custom-text-400": item.disabled,
+                          className={cn("whitespace-pre-line text-tertiary", {
+                            "text-placeholder": item.disabled,
                           })}
                         >
                           {item.description}
diff --git a/apps/web/core/components/workspace/settings/member-columns.tsx b/apps/web/core/components/workspace/settings/member-columns.tsx
index 289330e47..b6cc9c0c9 100644
--- a/apps/web/core/components/workspace/settings/member-columns.tsx
+++ b/apps/web/core/components/workspace/settings/member-columns.tsx
@@ -1,11 +1,17 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import Link from "next/link";
 import { Controller, useForm } from "react-hook-form";
-import { Trash2 } from "lucide-react";
+
 import { Disclosure } from "@headlessui/react";
 // plane imports
 import { ROLE, EUserPermissions, EUserPermissionsLevel, MEMBER_TRACKER_ELEMENTS } from "@plane/constants";
-import { SuspendedUserIcon } from "@plane/propel/icons";
+import { TrashIcon, SuspendedUserIcon } from "@plane/propel/icons";
 import { Pill, EPillVariant, EPillSize } from "@plane/propel/pill";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { IUser, IWorkspaceMember } from "@plane/types";
@@ -16,7 +22,6 @@ import { getFileURL } from "@plane/utils";
 // hooks
 import { useMember } from "@/hooks/store/use-member";
 import { useUser, useUserPermissions } from "@/hooks/store/user";
-// plane web constants
 
 export interface RowData {
   member: IWorkspaceMember;
@@ -45,32 +50,32 @@ export function NameColumn(props: NameProps) {
 
   return (
     <Disclosure>
-      {({}) => (
-        <div className="relative group">
-          <div className="flex items-center gap-x-4 gap-y-2 w-72 justify-between">
-            <div className="flex items-center gap-x-2 gap-y-2 flex-1">
+      {() => (
+        <div className="group relative">
+          <div className="flex w-72 items-center justify-between gap-x-4 gap-y-2">
+            <div className="flex flex-1 items-center gap-x-2 gap-y-2">
               {isSuspended ? (
-                <div className="bg-custom-background-80 rounded-full p-0.5">
-                  <SuspendedUserIcon className="h-4 w-4 text-custom-text-400" />
+                <div className="rounded-full bg-layer-1">
+                  <SuspendedUserIcon className="size-6 text-placeholder" />
                 </div>
               ) : avatar_url && avatar_url.trim() !== "" ? (
                 <Link href={`/${workspaceSlug}/profile/${id}`}>
-                  <span className="relative flex h-6 w-6 items-center justify-center rounded-full capitalize text-white">
+                  <span className="relative flex size-6 items-center justify-center rounded-full text-on-color capitalize">
                     <img
                       src={getFileURL(avatar_url)}
-                      className="absolute left-0 top-0 h-full w-full rounded-full object-cover"
+                      className="absolute top-0 left-0 h-full w-full rounded-full object-cover"
                       alt={display_name || email}
                     />
                   </span>
                 </Link>
               ) : (
                 <Link href={`/${workspaceSlug}/profile/${id}`}>
-                  <span className="relative flex h-4 w-4 text-xs items-center justify-center rounded-full  capitalize text-white bg-gray-700">
+                  <span className="relative flex size-6 items-center justify-center rounded-full bg-layer-3 text-11 text-tertiary capitalize">
                     {(email ?? display_name ?? "?")[0]}
                   </span>
                 </Link>
               )}
-              <span className={isSuspended ? "text-custom-text-400" : ""}>
+              <span className={isSuspended ? "text-placeholder" : ""}>
                 {first_name} {last_name}
               </span>
             </div>
@@ -83,11 +88,19 @@ export function NameColumn(props: NameProps) {
                 buttonClassName="outline-none	origin-center rotate-90 size-8 aspect-square flex-shrink-0 grid place-items-center opacity-0 group-hover:opacity-100 transition-opacity"
                 render={() => (
                   <div
-                    className="flex items-center gap-x-3 cursor-pointer"
+                    role="button"
+                    tabIndex={0}
+                    className="flex cursor-pointer items-center gap-x-3"
                     onClick={() => setRemoveMemberModal(rowData)}
+                    onKeyDown={(e) => {
+                      if (e.key === "Enter" || e.key === " ") {
+                        e.preventDefault();
+                        setRemoveMemberModal(rowData);
+                      }
+                    }}
                     data-ph-element={MEMBER_TRACKER_ELEMENTS.WORKSPACE_MEMBER_TABLE_CONTEXT_MENU}
                   >
-                    <Trash2 className="size-3.5 align-middle" /> {id === currentUser?.id ? "Leave " : "Remove "}
+                    <TrashIcon className="size-3.5 align-middle" /> {id === currentUser?.id ? "Leave " : "Remove "}
                   </div>
                 )}
               />
@@ -123,13 +136,13 @@ export const AccountTypeColumn = observer(function AccountTypeColumn(props: Acco
   return (
     <>
       {isSuspended ? (
-        <div className="w-32 flex ">
+        <div className="flex w-32">
           <Pill variant={EPillVariant.DEFAULT} size={EPillSize.SM} className="border-none">
             Suspended
           </Pill>
         </div>
       ) : isRoleNonEditable ? (
-        <div className="w-32 flex ">
+        <div className="flex w-32">
           <span>{ROLE[rowData.role]}</span>
         </div>
       ) : (
@@ -139,30 +152,31 @@ export const AccountTypeColumn = observer(function AccountTypeColumn(props: Acco
           rules={{ required: "Role is required." }}
           render={({ field: { value } }) => (
             <CustomSelect
-              value={value}
-              onChange={(value: EUserPermissions) => {
+              value={value as EUserPermissions}
+              onChange={async (value: EUserPermissions) => {
                 if (!workspaceSlug) return;
-                updateMember(workspaceSlug.toString(), rowData.member.id, {
-                  role: value as unknown as EUserPermissions, // Cast value to unknown first, then to EUserPermissions
-                }).catch((err) => {
-                  console.log(err, "err");
-                  const error = err.error;
-                  const errorString = Array.isArray(error) ? error[0] : error;
+                try {
+                  await updateMember(workspaceSlug.toString(), rowData.member.id, {
+                    role: value as unknown as EUserPermissions,
+                  });
+                } catch (err: unknown) {
+                  const error = err as { error?: string | string[] };
+                  const errorString = Array.isArray(error?.error) ? error.error[0] : error?.error;
 
                   setToast({
                     type: TOAST_TYPE.ERROR,
                     title: "Error!",
                     message: errorString ?? "An error occurred while updating member role. Please try again.",
                   });
-                });
+                }
               }}
               label={
-                <div className="flex ">
+                <div className="flex">
                   <span>{ROLE[rowData.role]}</span>
                 </div>
               }
-              buttonClassName={`!px-0 !justify-start hover:bg-custom-background-100 ${errors.role ? "border-red-500" : "border-none"}`}
-              className="rounded-md p-0 w-32"
+              buttonClassName={`!px-0 !justify-start hover:bg-surface-1 ${errors.role ? "border-danger-strong" : "border-none"}`}
+              className="w-32 rounded-md p-0"
               input
             >
               {Object.keys(ROLE).map((item) => (
diff --git a/apps/web/core/components/workspace/settings/members-list-item.tsx b/apps/web/core/components/workspace/settings/members-list-item.tsx
index 4d8910012..b3b565b4e 100644
--- a/apps/web/core/components/workspace/settings/members-list-item.tsx
+++ b/apps/web/core/components/workspace/settings/members-list-item.tsx
@@ -1,7 +1,12 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { isEmpty } from "lodash-es";
 import { observer } from "mobx-react";
 // plane imports
-import { MEMBER_TRACKER_EVENTS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { IWorkspaceMember } from "@plane/types";
@@ -9,8 +14,7 @@ import { Table } from "@plane/ui";
 // components
 import { MembersLayoutLoader } from "@/components/ui/loader/layouts/members-layout-loader";
 import { ConfirmWorkspaceMemberRemove } from "@/components/workspace/confirm-workspace-member-remove";
-// helpers
-import { captureError, captureSuccess } from "@/helpers/event-tracker.helper";
+import type { RowData } from "@/components/workspace/settings/member-columns";
 // hooks
 import { useMember } from "@/hooks/store/use-member";
 import { useWorkspace } from "@/hooks/store/use-workspace";
@@ -42,43 +46,33 @@ export const WorkspaceMembersListItem = observer(function WorkspaceMembersListIt
   const handleLeaveWorkspace = async () => {
     if (!workspaceSlug || !currentUser) return;
 
-    await leaveWorkspace(workspaceSlug.toString())
-      .then(async () => {
-        await fetchCurrentUserSettings();
-        router.push(getWorkspaceRedirectionUrl());
-        captureSuccess({
-          eventName: MEMBER_TRACKER_EVENTS.workspace.leave,
-          payload: {
-            workspace: workspaceSlug,
-          },
-        });
-      })
-      .catch((err: any) => {
-        captureError({
-          eventName: MEMBER_TRACKER_EVENTS.workspace.leave,
-          payload: {
-            workspace: workspaceSlug,
-          },
-          error: err,
-        });
-        setToast({
-          type: TOAST_TYPE.ERROR,
-          title: "Error!",
-          message: err?.error || t("something_went_wrong_please_try_again"),
-        });
+    try {
+      await leaveWorkspace(workspaceSlug.toString());
+      await fetchCurrentUserSettings();
+      router.push(getWorkspaceRedirectionUrl());
+    } catch (err: unknown) {
+      const error = err as { error?: string };
+      setToast({
+        type: TOAST_TYPE.ERROR,
+        title: "Error!",
+        message: error?.error || t("something_went_wrong_please_try_again"),
       });
+    }
   };
 
   const handleRemoveMember = async (memberId: string) => {
     if (!workspaceSlug || !memberId) return;
 
-    await removeMemberFromWorkspace(workspaceSlug.toString(), memberId).catch((err) =>
+    try {
+      await removeMemberFromWorkspace(workspaceSlug.toString(), memberId);
+    } catch (err: unknown) {
+      const error = err as { error?: string };
       setToast({
         type: TOAST_TYPE.ERROR,
         title: "Error!",
-        message: err?.error || t("something_went_wrong_please_try_again"),
-      })
-    );
+        message: error?.error || t("something_went_wrong_please_try_again"),
+      });
+    }
   };
 
   const handleRemove = async (memberId: string) => {
@@ -97,7 +91,7 @@ export const WorkspaceMembersListItem = observer(function WorkspaceMembersListIt
   if (isEmpty(columns)) return <MembersLayoutLoader />;
 
   return (
-    <div className="border-t border-custom-border-100 grid">
+    <div className="grid border-t border-subtle">
       {removeMemberModal && (
         <ConfirmWorkspaceMemberRemove
           isOpen={removeMemberModal.member.id.length > 0}
@@ -109,14 +103,16 @@ export const WorkspaceMembersListItem = observer(function WorkspaceMembersListIt
           onSubmit={() => handleRemove(removeMemberModal.member.id)}
         />
       )}
-      <Table
+      <Table<RowData>
         columns={columns ?? []}
-        data={(memberDetails?.filter((member): member is IWorkspaceMember => member !== null) ?? []) as any}
+        data={
+          (memberDetails?.filter((member): member is IWorkspaceMember => member !== null) ?? []) as unknown as RowData[]
+        }
         keyExtractor={(rowData) => rowData?.member.id ?? ""}
-        tHeadClassName="border-b border-custom-border-100"
-        thClassName="text-left font-medium divide-x-0 text-custom-text-400"
+        tHeadClassName="border-b border-subtle"
+        thClassName="text-left font-medium divide-x-0 text-placeholder"
         tBodyClassName="divide-y-0"
-        tBodyTrClassName="divide-x-0 p-4 h-[40px] text-custom-text-200"
+        tBodyTrClassName="divide-x-0 p-4 h-10 text-secondary"
         tHeadTrClassName="divide-x-0"
       />
     </div>
diff --git a/apps/web/core/components/workspace/settings/members-list.tsx b/apps/web/core/components/workspace/settings/members-list.tsx
index 158169093..41b4bed3f 100644
--- a/apps/web/core/components/workspace/settings/members-list.tsx
+++ b/apps/web/core/components/workspace/settings/members-list.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
@@ -66,10 +72,10 @@ export const WorkspaceMembersList = observer(function WorkspaceMembersList(props
 
   return (
     <>
-      <div className="divide-y-[0.5px] divide-custom-border-100 overflow-scroll	">
+      <div className="divide-y-[0.5px] divide-subtle overflow-scroll">
         {searchedMemberIds?.length !== 0 && <WorkspaceMembersListItem memberDetails={memberDetails ?? []} />}
         {searchedInvitationsIds?.length === 0 && searchedMemberIds?.length === 0 && (
-          <h4 className="mt-16 text-center text-sm text-custom-text-400">{t("no_matching_members")}</h4>
+          <h4 className="mt-16 text-center text-body-xs-regular text-placeholder">{t("no_matching_members")}</h4>
         )}
       </div>
       {isAdmin && searchedInvitationsIds && searchedInvitationsIds.length > 0 && (
@@ -81,11 +87,9 @@ export const WorkspaceMembersList = observer(function WorkspaceMembersList(props
           title={
             <div className="flex w-full items-center justify-between pt-4">
               <div className="flex">
-                <h4 className="text-xl font-medium pt-2 pb-2">
-                  {t("workspace_settings.settings.members.pending_invites")}
-                </h4>
+                <h4 className="pt-2 pb-2 text-h5-medium">{t("workspace_settings.settings.members.pending_invites")}</h4>
                 {searchedInvitationsIds && (
-                  <CountChip count={searchedInvitationsIds.length} className="h-5  m-auto ml-2" />
+                  <CountChip count={searchedInvitationsIds.length} className="m-auto ml-2 h-5" />
                 )}
               </div>{" "}
               <ChevronDownIcon className={`h-5 w-5 transition-all ${showPendingInvites ? "rotate-180" : ""}`} />
@@ -93,7 +97,7 @@ export const WorkspaceMembersList = observer(function WorkspaceMembersList(props
           }
         >
           <Disclosure.Panel>
-            <div className="ml-auto items-center gap-1.5 rounded-md bg-custom-background-100 py-1.5">
+            <div className="ml-auto items-center gap-1.5 rounded-md bg-surface-1 py-1.5">
               {searchedInvitationsIds?.map((invitationId) => (
                 <WorkspaceInvitationsListItem key={invitationId} invitationId={invitationId} />
               ))}
diff --git a/apps/web/core/components/workspace/settings/workspace-details.tsx b/apps/web/core/components/workspace/settings/workspace-details.tsx
index bb535b870..c09db3d96 100644
--- a/apps/web/core/components/workspace/settings/workspace-details.tsx
+++ b/apps/web/core/components/workspace/settings/workspace-details.tsx
@@ -1,25 +1,25 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useEffect, useState } from "react";
 import { observer } from "mobx-react";
 import { Controller, useForm } from "react-hook-form";
-import { Pencil } from "lucide-react";
-// constants
-import {
-  ORGANIZATION_SIZE,
-  EUserPermissions,
-  EUserPermissionsLevel,
-  WORKSPACE_TRACKER_EVENTS,
-  WORKSPACE_TRACKER_ELEMENTS,
-} from "@plane/constants";
+// Plane Imports
+import { ORGANIZATION_SIZE, EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { Button } from "@plane/propel/button";
+import { EditIcon } from "@plane/propel/icons";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { IWorkspace } from "@plane/types";
 import { CustomSelect, Input } from "@plane/ui";
-import { copyUrlToClipboard, getFileURL } from "@plane/utils";
+import { cn, copyUrlToClipboard, getFileURL, validateWorkspaceName } from "@plane/utils";
 // components
 import { WorkspaceImageUploadModal } from "@/components/core/modals/workspace-image-upload-modal";
-// helpers
-import { captureError, captureSuccess } from "@/helpers/event-tracker.helper";
+import { TimezoneSelect } from "@/components/global/timezone-select";
+// hooks
 import { useWorkspace } from "@/hooks/store/use-workspace";
 import { useUserPermissions } from "@/hooks/store/user";
 // plane web components
@@ -30,6 +30,7 @@ const defaultValues: Partial<IWorkspace> = {
   url: "",
   organization_size: "2-10",
   logo_url: null,
+  timezone: "UTC",
 };
 
 export const WorkspaceDetails = observer(function WorkspaceDetails() {
@@ -62,64 +63,60 @@ export const WorkspaceDetails = observer(function WorkspaceDetails() {
     const payload: Partial<IWorkspace> = {
       name: formData.name,
       organization_size: formData.organization_size,
+      timezone: formData.timezone,
     };
 
-    await updateWorkspace(currentWorkspace.slug, payload)
-      .then(() => {
-        captureSuccess({
-          eventName: WORKSPACE_TRACKER_EVENTS.update,
-          payload: { slug: currentWorkspace.slug },
-        });
-        setToast({
-          title: "Success!",
-          type: TOAST_TYPE.SUCCESS,
-          message: "Workspace updated successfully",
-        });
-      })
-      .catch((err) => {
-        captureError({
-          eventName: WORKSPACE_TRACKER_EVENTS.update,
-          payload: { slug: currentWorkspace.slug },
-          error: err,
-        });
-        console.error(err);
+    try {
+      await updateWorkspace(currentWorkspace.slug, payload);
+      setToast({
+        title: "Success!",
+        type: TOAST_TYPE.SUCCESS,
+        message: "Workspace updated successfully",
       });
-    setTimeout(() => {
-      setIsLoading(false);
-    }, 300);
+    } catch (err: unknown) {
+      console.error(err);
+    } finally {
+      setTimeout(() => {
+        setIsLoading(false);
+      }, 300);
+    }
   };
 
   const handleRemoveLogo = async () => {
     if (!currentWorkspace) return;
 
-    await updateWorkspace(currentWorkspace.slug, {
-      logo_url: "",
-    })
-      .then(() => {
-        setToast({
-          type: TOAST_TYPE.SUCCESS,
-          title: "Success!",
-          message: "Workspace picture removed successfully.",
-        });
-      })
-      .catch(() => {
-        setToast({
-          type: TOAST_TYPE.ERROR,
-          title: "Error!",
-          message: "There was some error in deleting your profile picture. Please try again.",
-        });
+    try {
+      await updateWorkspace(currentWorkspace.slug, {
+        logo_url: "",
       });
+      setToast({
+        type: TOAST_TYPE.SUCCESS,
+        title: "Success!",
+        message: "Workspace picture removed successfully.",
+      });
+    } catch {
+      setToast({
+        type: TOAST_TYPE.ERROR,
+        title: "Error!",
+        message: "There was some error in deleting your profile picture. Please try again.",
+      });
+    }
   };
 
   const handleCopyUrl = () => {
     if (!currentWorkspace) return;
 
-    copyUrlToClipboard(`${currentWorkspace.slug}`).then(() => {
-      setToast({
-        type: TOAST_TYPE.SUCCESS,
-        title: "Workspace URL copied to the clipboard.",
+    void copyUrlToClipboard(`${currentWorkspace.slug}`)
+      .then(() => {
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
+          title: "Workspace URL copied to the clipboard.",
+        });
+        return undefined;
+      })
+      .catch(() => {
+        // Silently handle clipboard errors
       });
-    });
   };
 
   useEffect(() => {
@@ -128,7 +125,8 @@ export const WorkspaceDetails = observer(function WorkspaceDetails() {
 
   const isAdmin = allowPermissions([EUserPermissions.ADMIN], EUserPermissionsLevel.WORKSPACE);
 
-  if (!currentWorkspace) return <></>;
+  if (!currentWorkspace) return null;
+
   return (
     <>
       <Controller
@@ -147,38 +145,39 @@ export const WorkspaceDetails = observer(function WorkspaceDetails() {
           />
         )}
       />
-      <div className={`w-full md:pr-9 pr-4 ${isAdmin ? "" : "opacity-60"}`}>
-        <div className="flex gap-5 border-b border-custom-border-100 pb-7 items-start">
-          <div className="flex flex-col gap-1">
+      <div className={cn("flex w-full flex-col gap-y-7", { "opacity-60": !isAdmin })}>
+        <div className="flex items-center gap-5">
+          <div className="flex shrink-0 flex-col gap-1">
             <button type="button" onClick={() => setIsImageUploadModalOpen(true)} disabled={!isAdmin}>
               {workspaceLogo && workspaceLogo !== "" ? (
-                <div className="relative mx-auto flex h-14 w-14">
+                <div className="relative flex size-14">
                   <img
                     src={getFileURL(workspaceLogo)}
-                    className="absolute left-0 top-0 h-full w-full rounded-md object-cover"
+                    className="absolute top-0 left-0 size-full rounded-md object-cover"
                     alt="Workspace Logo"
                   />
                 </div>
               ) : (
-                <div className="relative flex h-14 w-14 items-center justify-center rounded bg-[#026292] p-4 uppercase text-white">
+                <div className="relative grid size-14 place-items-center rounded-md bg-accent-primary text-24 text-on-color uppercase">
                   {currentWorkspace?.name?.charAt(0) ?? "N"}
                 </div>
               )}
             </button>
           </div>
           <div className="flex flex-col gap-1">
-            <div className="text-lg font-semibold leading-6 mb:-my-5">{watch("name")}</div>
-            <button type="button" onClick={handleCopyUrl} className="text-sm tracking-tight text-left">{`${
+            <div className="mb:-my-5 text-h5-semibold leading-6">{watch("name")}</div>
+            <button type="button" onClick={handleCopyUrl} className="text-left text-body-xs-regular tracking-tight">{`${
               typeof window !== "undefined" && window.location.origin.replace("http://", "").replace("https://", "")
             }/${currentWorkspace.slug}`}</button>
             {isAdmin && (
               <button
-                className="flex items-center gap-1.5 text-left text-xs font-medium text-custom-primary-100"
+                type="button"
+                className="flex items-center gap-1.5 text-left text-caption-sm-medium text-accent-primary"
                 onClick={() => setIsImageUploadModalOpen(true)}
               >
                 {workspaceLogo && workspaceLogo !== "" ? (
                   <>
-                    <Pencil className="h-3 w-3" />
+                    <EditIcon className="h-3 w-3" />
                     {t("workspace_settings.settings.general.edit_logo")}
                   </>
                 ) : (
@@ -188,20 +187,15 @@ export const WorkspaceDetails = observer(function WorkspaceDetails() {
             )}
           </div>
         </div>
-
-        <div className="my-8 flex flex-col gap-8">
+        <div className="flex flex-col gap-7">
           <div className="grid-col grid w-full grid-cols-1 items-center justify-between gap-10 xl:grid-cols-2 2xl:grid-cols-3">
-            <div className="flex flex-col gap-1">
-              <h4 className="text-sm">{t("workspace_settings.settings.general.name")}</h4>
+            <div className="flex flex-col gap-2">
+              <h4 className="text-body-sm-medium text-tertiary">{t("workspace_settings.settings.general.name")}</h4>
               <Controller
                 control={control}
                 name="name"
                 rules={{
-                  required: t("workspace_settings.settings.general.errors.name.required"),
-                  maxLength: {
-                    value: 80,
-                    message: t("workspace_settings.settings.general.errors.name.max_length"),
-                  },
+                  validate: (value) => validateWorkspaceName(value, true),
                 }}
                 render={({ field: { value, onChange, ref } }) => (
                   <Input
@@ -213,15 +207,17 @@ export const WorkspaceDetails = observer(function WorkspaceDetails() {
                     ref={ref}
                     hasError={Boolean(errors.name)}
                     placeholder={t("workspace_settings.settings.general.name")}
-                    className="w-full rounded-md font-medium"
+                    className="w-full rounded-md"
                     disabled={!isAdmin}
                   />
                 )}
               />
+              {errors.name && <p className="text-caption-sm-regular text-danger-primary">{errors.name.message}</p>}
             </div>
-
-            <div className="flex flex-col gap-1 ">
-              <h4 className="text-sm">{t("workspace_settings.settings.general.company_size")}</h4>
+            <div className="flex flex-col gap-2">
+              <h4 className="text-body-sm-medium text-tertiary">
+                {t("workspace_settings.settings.general.company_size")}
+              </h4>
               <Controller
                 name="organization_size"
                 control={control}
@@ -233,7 +229,7 @@ export const WorkspaceDetails = observer(function WorkspaceDetails() {
                       ORGANIZATION_SIZE.find((c) => c === value) ??
                       t("workspace_settings.settings.general.errors.company_size.select_a_range")
                     }
-                    buttonClassName="!border-[0.5px] !border-custom-border-200 !shadow-none"
+                    buttonClassName="border border-subtle bg-layer-2 !shadow-none !rounded-md"
                     input
                     disabled={!isAdmin}
                   >
@@ -246,9 +242,8 @@ export const WorkspaceDetails = observer(function WorkspaceDetails() {
                 )}
               />
             </div>
-
-            <div className="flex flex-col gap-1 ">
-              <h4 className="text-sm">{t("workspace_settings.settings.general.url")}</h4>
+            <div className="flex flex-col gap-2">
+              <h4 className="text-body-sm-medium text-tertiary">{t("workspace_settings.settings.general.url")}</h4>
               <Controller
                 control={control}
                 name="url"
@@ -264,29 +259,48 @@ export const WorkspaceDetails = observer(function WorkspaceDetails() {
                     onChange={onChange}
                     ref={ref}
                     hasError={Boolean(errors.url)}
-                    className="w-full"
+                    className="w-full cursor-not-allowed rounded-md !bg-layer-1"
                     disabled
                   />
                 )}
               />
             </div>
-          </div>
-
-          {isAdmin && (
-            <div className="flex items-center justify-between py-2">
-              <Button
-                data-ph-element={WORKSPACE_TRACKER_ELEMENTS.UPDATE_WORKSPACE_BUTTON}
-                variant="primary"
-                onClick={handleSubmit(onSubmit)}
-                loading={isLoading}
-              >
-                {isLoading ? t("updating") : t("workspace_settings.settings.general.update_workspace")}
-              </Button>
+            <div className="flex flex-col gap-2">
+              <h4 className="text-body-sm-medium text-tertiary">
+                {t("workspace_settings.settings.general.workspace_timezone")}
+              </h4>
+              <Controller
+                name="timezone"
+                control={control}
+                render={({ field: { value, onChange } }) => (
+                  <>
+                    <TimezoneSelect value={value} onChange={onChange} disabled={!isAdmin} />
+                  </>
+                )}
+              />
             </div>
-          )}
+          </div>
         </div>
-        {isAdmin && <DeleteWorkspaceSection workspace={currentWorkspace} />}
+        {isAdmin && (
+          <div className="flex items-center justify-between py-2">
+            <Button
+              variant="primary"
+              size="lg"
+              onClick={(e) => {
+                void handleSubmit(onSubmit)(e);
+              }}
+              loading={isLoading}
+            >
+              {isLoading ? t("updating") : t("workspace_settings.settings.general.update_workspace")}
+            </Button>
+          </div>
+        )}
       </div>
+      {isAdmin && (
+        <div className="mt-10">
+          <DeleteWorkspaceSection workspace={currentWorkspace} />
+        </div>
+      )}
     </>
   );
 });
diff --git a/apps/web/core/components/workspace/sidebar/dropdown-item.tsx b/apps/web/core/components/workspace/sidebar/dropdown-item.tsx
index 78fc71c63..3a280bd6a 100644
--- a/apps/web/core/components/workspace/sidebar/dropdown-item.tsx
+++ b/apps/web/core/components/workspace/sidebar/dropdown-item.tsx
@@ -1,11 +1,18 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import Link from "next/link";
 import { useParams } from "next/navigation";
-import { Check, Settings, UserPlus } from "lucide-react";
+import { Settings, UserPlus } from "lucide-react";
 import { Menu } from "@headlessui/react";
 // plane imports
 import { EUserPermissions } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
+import { CheckIcon } from "@plane/propel/icons";
 import type { IWorkspace } from "@plane/types";
 import { cn, getFileURL, getUserRole } from "@plane/utils";
 // plane web imports
@@ -39,21 +46,21 @@ const SidebarDropdownItem = observer(function SidebarDropdownItem(props: TProps)
       <Menu.Item
         as="div"
         className={cn("px-4 py-2", {
-          "bg-custom-sidebar-background-90": workspace.id === activeWorkspace?.id,
-          "hover:bg-custom-sidebar-background-90": workspace.id !== activeWorkspace?.id,
+          "bg-layer-transparent-active": workspace.id === activeWorkspace?.id,
+          "hover:bg-layer-transparent-hover": workspace.id !== activeWorkspace?.id,
         })}
       >
-        <div className="flex items-center justify-between gap-1 rounded p-1 text-sm text-custom-sidebar-text-100 ">
-          <div className="flex items-center justify-start gap-2.5 w-[80%] relative">
+        <div className="flex items-center justify-between gap-1 rounded-sm p-1 text-13 text-primary">
+          <div className="relative flex w-[80%] items-center justify-start gap-2.5">
             <span
-              className={`relative flex h-8 w-8 flex-shrink-0 items-center  justify-center p-2 text-base uppercase font-medium border-custom-border-200 ${
-                !workspace?.logo_url && "rounded-md bg-[#026292] text-white"
+              className={`relative flex h-8 w-8 flex-shrink-0 items-center justify-center border-subtle p-2 text-14 font-medium uppercase ${
+                !workspace?.logo_url && "rounded-md bg-[#026292] text-on-color"
               }`}
             >
               {workspace?.logo_url && workspace.logo_url !== "" ? (
                 <img
                   src={getFileURL(workspace.logo_url)}
-                  className="absolute left-0 top-0 h-full w-full rounded object-cover"
+                  className="absolute top-0 left-0 h-full w-full rounded-sm object-cover"
                   alt={t("workspace_logo")}
                 />
               ) : (
@@ -62,20 +69,20 @@ const SidebarDropdownItem = observer(function SidebarDropdownItem(props: TProps)
             </span>
             <div className="w-[inherit]">
               <div
-                className={`truncate text-left text-ellipsis text-sm font-medium ${workspaceSlug === workspace.slug ? "" : "text-custom-text-200"}`}
+                className={`truncate text-left text-13 font-medium text-ellipsis ${workspaceSlug === workspace.slug ? "" : "text-secondary"}`}
               >
                 {workspace.name}
               </div>
-              <div className="text-sm text-custom-text-300 flex gap-2 capitalize w-fit">
+              <div className="flex w-fit gap-2 text-13 text-tertiary capitalize">
                 <span>{getUserRole(workspace.role)?.toLowerCase() || "guest"}</span>
-                <div className="w-1 h-1 bg-custom-text-300/50 rounded-full m-auto" />
+                <div className="m-auto h-1 w-1 rounded-full bg-layer-1/50" />
                 <span className="capitalize">{t("member", { count: workspace.total_members || 0 })}</span>
               </div>
             </div>
           </div>
           {workspace.id === activeWorkspace?.id ? (
             <span className="flex-shrink-0 p-1">
-              <Check className="h-5 w-5 text-custom-sidebar-text-100" />
+              <CheckIcon className="h-5 w-5 text-primary" />
             </span>
           ) : (
             <SubscriptionPill workspace={workspace} />
@@ -87,21 +94,27 @@ const SidebarDropdownItem = observer(function SidebarDropdownItem(props: TProps)
               {[EUserPermissions.ADMIN, EUserPermissions.MEMBER].includes(workspace?.role) && (
                 <Link
                   href={`/${workspace.slug}/settings`}
-                  onClick={handleClose}
-                  className="flex border border-custom-border-200 rounded-md py-1 px-2 gap-1 bg-custom-sidebar-background-100 hover:shadow-sm hover:text-custom-text-200 text-custom-text-300 hover:border-custom-border-300 "
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    handleClose();
+                  }}
+                  className="flex gap-1.5 rounded-md border border-strong bg-layer-2 px-2.5 py-1.5 text-secondary transition-colors hover:border-strong hover:text-secondary hover:shadow-raised-100"
                 >
-                  <Settings className="h-4 w-4 my-auto" />
-                  <span className="text-sm font-medium my-auto">{t("settings")}</span>
+                  <Settings className="my-auto h-4 w-4 flex-shrink-0" />
+                  <span className="my-auto text-13 font-medium whitespace-nowrap">{t("settings")}</span>
                 </Link>
               )}
               {[EUserPermissions.ADMIN].includes(workspace?.role) && (
                 <Link
                   href={`/${workspace.slug}/settings/members`}
-                  onClick={handleClose}
-                  className="flex border border-custom-border-200 rounded-md py-1 px-2 gap-1 bg-custom-sidebar-background-100 hover:shadow-sm hover:text-custom-text-200 text-custom-text-300 hover:border-custom-border-300 "
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    handleClose();
+                  }}
+                  className="flex gap-1.5 rounded-md border border-strong bg-layer-2 px-2.5 py-1.5 text-secondary transition-colors hover:border-strong hover:text-secondary hover:shadow-raised-100"
                 >
-                  <UserPlus className="h-4 w-4 my-auto" />
-                  <span className="text-sm font-medium my-auto">
+                  <UserPlus className="my-auto h-4 w-4 flex-shrink-0" />
+                  <span className="my-auto text-13 font-medium whitespace-nowrap">
                     {t("project_settings.members.invite_members.title")}
                   </span>
                 </Link>
diff --git a/apps/web/core/components/workspace/sidebar/favorites/favorite-folder.tsx b/apps/web/core/components/workspace/sidebar/favorites/favorite-folder.tsx
index 3285707e7..015f6cb17 100644
--- a/apps/web/core/components/workspace/sidebar/favorites/favorite-folder.tsx
+++ b/apps/web/core/components/workspace/sidebar/favorites/favorite-folder.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useEffect, useRef, useState } from "react";
 import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
 import type {
@@ -80,11 +86,11 @@ export function FavoriteFolder(props: Props) {
             render: ({ container }) => {
               const root = createRoot(container);
               root.render(
-                <div className="rounded flex gap-1 bg-custom-background-100 text-sm p-1 pr-2">
-                  <div className="size-5 grid place-items-center flex-shrink-0">
+                <div className="flex gap-1 rounded-sm bg-surface-1 p-1 pr-2 text-13">
+                  <div className="grid size-5 flex-shrink-0 place-items-center">
                     <FavoriteFolderIcon />
                   </div>
-                  <p className="truncate text-sm font-medium text-custom-sidebar-text-200">{favorite.name}</p>
+                  <p className="truncate text-13 font-medium text-secondary">{favorite.name}</p>
                 </div>
               );
               return () => root.unmount();
@@ -146,33 +152,33 @@ export function FavoriteFolder(props: Props) {
           <div
             // id={`sidebar-${projectId}-${projectListType}`}
             className={cn("relative", {
-              "bg-custom-sidebar-background-80 opacity-60": isDragging,
-              "border-[2px] border-custom-primary-100": instruction === "make-child",
+              "bg-layer-1 opacity-60": isDragging,
+              "border-[2px] border-accent-strong": instruction === "make-child",
             })}
           >
             {/* draggable drop top indicator */}
             <DropIndicator isVisible={instruction === "reorder-above"} />
             <div
               className={cn(
-                "group/project-item relative w-full px-2 py-1.5 flex items-center rounded-md text-custom-sidebar-text-100 hover:bg-custom-sidebar-background-90",
+                "group/project-item relative flex w-full items-center rounded-md px-2 py-1.5 text-primary hover:bg-layer-1-hover",
                 {
-                  "bg-custom-sidebar-background-90": isMenuActive,
+                  "bg-surface-2": isMenuActive,
                 }
               )}
             >
               {/* draggable indicator */}
 
-              <div className="flex-shrink-0 w-3 h-3 rounded-sm absolute left-0 hidden group-hover:flex justify-center items-center transition-colors bg-custom-background-90 cursor-pointer text-custom-text-200 hover:text-custom-text-100">
-                <GripVertical className="w-3 h-3" />
+              <div className="absolute left-0 hidden h-3 w-3 flex-shrink-0 cursor-pointer items-center justify-center rounded-xs bg-surface-2 text-secondary transition-colors group-hover:flex hover:text-primary">
+                <GripVertical className="h-3 w-3" />
               </div>
 
               <>
                 <Tooltip tooltipContent={`${favorite.name}`} position="right" className="ml-8" isMobile={isMobile}>
-                  <div className="flex-grow flex truncate">
+                  <div className="flex flex-grow truncate">
                     <Disclosure.Button
                       as="button"
                       type="button"
-                      className="flex-grow flex items-center gap-1.5 text-left select-none w-full"
+                      className="flex w-full flex-grow items-center gap-1.5 text-left select-none"
                     >
                       <Tooltip
                         isMobile={isMobile}
@@ -185,7 +191,7 @@ export function FavoriteFolder(props: Props) {
                         <button
                           type="button"
                           className={cn(
-                            "hidden group-hover/project-item:flex items-center justify-center absolute top-1/2 -left-3 -translate-y-1/2 rounded text-custom-sidebar-text-400 cursor-grab",
+                            "absolute top-1/2 -left-3 hidden -translate-y-1/2 cursor-grab items-center justify-center rounded-sm text-placeholder group-hover/project-item:flex",
                             {
                               "cursor-not-allowed opacity-60": favorite.sort_order === null,
                               "cursor-grabbing": isDragging,
@@ -195,10 +201,10 @@ export function FavoriteFolder(props: Props) {
                           <DragHandle className="bg-transparent" />
                         </button>
                       </Tooltip>
-                      <div className="size-5 grid place-items-center flex-shrink-0">
+                      <div className="grid size-5 flex-shrink-0 place-items-center">
                         <FavoriteFolderIcon />
                       </div>
-                      <p className="truncate text-sm font-medium text-custom-sidebar-text-200">{favorite.name}</p>
+                      <p className="truncate text-13 font-medium text-secondary">{favorite.name}</p>
                     </Disclosure.Button>
                   </div>
                 </Tooltip>
@@ -206,16 +212,16 @@ export function FavoriteFolder(props: Props) {
                   customButton={
                     <span
                       ref={actionSectionRef}
-                      className="grid place-items-center p-0.5 text-custom-sidebar-text-400 hover:bg-custom-sidebar-background-80 rounded"
+                      className="grid place-items-center rounded-sm p-0.5 text-placeholder hover:bg-layer-1"
                     >
                       <MoreHorizontal className="size-3" />
                     </span>
                   }
                   menuButtonOnClick={() => setIsMenuActive(!isMenuActive)}
                   className={cn(
-                    "opacity-0 pointer-events-none flex-shrink-0 group-hover/project-item:opacity-100 group-hover/project-item:pointer-events-auto",
+                    "pointer-events-none flex-shrink-0 opacity-0 group-hover/project-item:pointer-events-auto group-hover/project-item:opacity-100",
                     {
-                      "opacity-100 pointer-events-auto": isMenuActive,
+                      "pointer-events-auto opacity-100": isMenuActive,
                     }
                   )}
                   customButtonClassName="grid place-items-center"
@@ -224,13 +230,13 @@ export function FavoriteFolder(props: Props) {
                 >
                   <CustomMenu.MenuItem onClick={() => handleRemoveFromFavorites(favorite)}>
                     <span className="flex items-center justify-start gap-2">
-                      <Star className="h-3.5 w-3.5 fill-yellow-500 stroke-yellow-500" />
+                      <Star className="fill-yellow-500 stroke-yellow-500 h-3.5 w-3.5" />
                       <span>Remove from favorites</span>
                     </span>
                   </CustomMenu.MenuItem>
                   <CustomMenu.MenuItem onClick={() => setFolderToRename(favorite.id)}>
                     <div className="flex items-center justify-start gap-2">
-                      <DraftIcon className="h-3.5 w-3.5 stroke-[1.5] text-custom-text-300" />
+                      <DraftIcon className="h-3.5 w-3.5 stroke-[1.5] text-tertiary" />
                       <span>Rename Folder</span>
                     </div>
                   </CustomMenu.MenuItem>
@@ -238,18 +244,15 @@ export function FavoriteFolder(props: Props) {
                 <Disclosure.Button
                   as="button"
                   type="button"
-                  className={cn(
-                    "hidden group-hover/project-item:inline-block p-0.5 rounded hover:bg-custom-sidebar-background-80",
-                    {
-                      "inline-block": isMenuActive,
-                    }
-                  )}
+                  className={cn("hidden rounded-sm p-0.5 group-hover/project-item:inline-block hover:bg-layer-1", {
+                    "inline-block": isMenuActive,
+                  })}
                   aria-label={t(
                     open ? "aria_labels.projects_sidebar.close_folder" : "aria_labels.projects_sidebar.open_folder"
                   )}
                 >
                   <ChevronRightIcon
-                    className={cn("size-3 flex-shrink-0 text-custom-sidebar-text-400 transition-transform", {
+                    className={cn("size-3 flex-shrink-0 text-placeholder transition-transform", {
                       "rotate-90": open,
                     })}
                   />
@@ -265,7 +268,7 @@ export function FavoriteFolder(props: Props) {
                 leaveFrom="transform scale-100 opacity-100"
                 leaveTo="transform scale-95 opacity-0"
               >
-                <Disclosure.Panel as="div" className="flex flex-col gap-0.5 mt-1 px-2">
+                <Disclosure.Panel as="div" className="mt-1 flex flex-col gap-0.5 px-2">
                   {orderBy(favorite.children, "sequence", "desc").map((child, index) => (
                     <FavoriteRoot
                       key={child.id}
diff --git a/apps/web/core/components/workspace/sidebar/favorites/favorite-items/common/favorite-item-drag-handle.tsx b/apps/web/core/components/workspace/sidebar/favorites/favorite-items/common/favorite-item-drag-handle.tsx
index 80bfca221..fea36908f 100644
--- a/apps/web/core/components/workspace/sidebar/favorites/favorite-items/common/favorite-item-drag-handle.tsx
+++ b/apps/web/core/components/workspace/sidebar/favorites/favorite-items/common/favorite-item-drag-handle.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 import { observer } from "mobx-react";
 // ui
@@ -27,7 +33,7 @@ export const FavoriteItemDragHandle = observer(function FavoriteItemDragHandle(p
     >
       <div
         className={cn(
-          "hidden group-hover/project-item:flex items-center justify-center absolute top-1/2 -left-3 -translate-y-1/2 rounded text-custom-sidebar-text-400 cursor-grab",
+          "absolute top-1/2 -left-3 hidden -translate-y-1/2 cursor-grab items-center justify-center rounded-sm text-placeholder group-hover/project-item:flex",
           {
             "cursor-not-allowed opacity-60": sort_order === null,
             "cursor-grabbing": isDragging,
diff --git a/apps/web/core/components/workspace/sidebar/favorites/favorite-items/common/favorite-item-quick-action.tsx b/apps/web/core/components/workspace/sidebar/favorites/favorite-items/common/favorite-item-quick-action.tsx
index 3b81cad92..521554861 100644
--- a/apps/web/core/components/workspace/sidebar/favorites/favorite-items/common/favorite-item-quick-action.tsx
+++ b/apps/web/core/components/workspace/sidebar/favorites/favorite-items/common/favorite-item-quick-action.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 import { observer } from "mobx-react";
 import { MoreHorizontal, Star } from "lucide-react";
@@ -24,18 +30,15 @@ export const FavoriteItemQuickAction = observer(function FavoriteItemQuickAction
   return (
     <CustomMenu
       customButton={
-        <span
-          ref={ref}
-          className="grid place-items-center p-0.5 text-custom-sidebar-text-400 hover:bg-custom-sidebar-background-80 rounded"
-        >
+        <span ref={ref} className="grid place-items-center rounded-sm p-0.5 text-placeholder hover:bg-layer-1">
           <MoreHorizontal className="size-4" />
         </span>
       }
       menuButtonOnClick={() => onChange(!isMenuActive)}
       className={cn(
-        "opacity-0 pointer-events-none flex-shrink-0 group-hover/project-item:opacity-100 group-hover/project-item:pointer-events-auto",
+        "pointer-events-none flex-shrink-0 opacity-0 group-hover/project-item:pointer-events-auto group-hover/project-item:opacity-100",
         {
-          "opacity-100 pointer-events-auto": isMenuActive,
+          "pointer-events-auto opacity-100": isMenuActive,
         }
       )}
       customButtonClassName="grid place-items-center"
@@ -44,7 +47,7 @@ export const FavoriteItemQuickAction = observer(function FavoriteItemQuickAction
     >
       <CustomMenu.MenuItem onClick={() => handleRemoveFromFavorites(favorite)}>
         <span className="flex items-center justify-start gap-2">
-          <Star className="h-3.5 w-3.5 fill-yellow-500 stroke-yellow-500 flex-shrink-0" />
+          <Star className="fill-yellow-500 stroke-yellow-500 h-3.5 w-3.5 flex-shrink-0" />
           <span>Remove from favorites</span>
         </span>
       </CustomMenu.MenuItem>
diff --git a/apps/web/core/components/workspace/sidebar/favorites/favorite-items/common/favorite-item-title.tsx b/apps/web/core/components/workspace/sidebar/favorites/favorite-items/common/favorite-item-title.tsx
index dbb8a6171..23b85f816 100644
--- a/apps/web/core/components/workspace/sidebar/favorites/favorite-items/common/favorite-item-title.tsx
+++ b/apps/web/core/components/workspace/sidebar/favorites/favorite-items/common/favorite-item-title.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
@@ -23,9 +29,9 @@ export const FavoriteItemTitle = observer(function FavoriteItemTitle(props: Prop
 
   return (
     <Tooltip tooltipContent={title} isMobile={isMobile} position="right" className="ml-8">
-      <Link href={href} className="flex items-center gap-1.5 truncate w-full" draggable onClick={handleOnClick}>
-        <span className="flex items-center justify-center size-5">{icon}</span>
-        <span className="text-sm leading-5 font-medium flex-1 truncate">{title}</span>
+      <Link href={href} className="flex w-full items-center gap-1.5 truncate" draggable onClick={handleOnClick}>
+        <span className="flex size-5 items-center justify-center">{icon}</span>
+        <span className="flex-1 truncate text-13 leading-5 font-medium">{title}</span>
       </Link>
     </Tooltip>
   );
diff --git a/apps/web/core/components/workspace/sidebar/favorites/favorite-items/common/favorite-item-wrapper.tsx b/apps/web/core/components/workspace/sidebar/favorites/favorite-items/common/favorite-item-wrapper.tsx
index 840af3d83..cc57b163a 100644
--- a/apps/web/core/components/workspace/sidebar/favorites/favorite-items/common/favorite-item-wrapper.tsx
+++ b/apps/web/core/components/workspace/sidebar/favorites/favorite-items/common/favorite-item-wrapper.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 // helpers
 import { cn } from "@plane/utils";
@@ -15,9 +21,9 @@ export function FavoriteItemWrapper(props: Props) {
       <div
         ref={elementRef}
         className={cn(
-          "group/project-item cursor-pointer relative group flex items-center justify-between w-full gap-1.5 rounded px-2 py-1 outline-none text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-90 active:bg-custom-sidebar-background-90",
+          "group/project-item relative flex w-full items-center rounded-md px-2 py-1.5 text-primary hover:bg-layer-transparent-hover",
           {
-            "bg-custom-sidebar-background-90": isMenuActive,
+            "bg-surface-2": isMenuActive,
           }
         )}
       >
diff --git a/apps/web/core/components/workspace/sidebar/favorites/favorite-items/common/helper.tsx b/apps/web/core/components/workspace/sidebar/favorites/favorite-items/common/helper.tsx
index 7d1105099..f7de5b921 100644
--- a/apps/web/core/components/workspace/sidebar/favorites/favorite-items/common/helper.tsx
+++ b/apps/web/core/components/workspace/sidebar/favorites/favorite-items/common/helper.tsx
@@ -1,24 +1,30 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { Logo } from "@plane/propel/emoji-icon-picker";
 import { PageIcon } from "@plane/propel/icons";
 // plane imports
 import type { IFavorite, TLogoProps } from "@plane/types";
 // components
 // plane web constants
-import { FAVORITE_ITEM_ICONS, FAVORITE_ITEM_LINKS } from "@/plane-web/constants/sidebar-favorites";
+import { FAVORITE_ITEM_ICONS, FAVORITE_ITEM_LINKS } from "@/constants/sidebar-favorites";
 
 export const getFavoriteItemIcon = (type: string, logo?: TLogoProps) => {
   const Icon = FAVORITE_ITEM_ICONS[type] || PageIcon;
 
   return (
     <>
-      <div className="hidden group-hover:flex items-center justify-center size-5">
-        <Icon className="flex-shrink-0 size-4 stroke-[1.5] m-auto" />
+      <div className="hidden size-5 items-center justify-center group-hover:flex">
+        <Icon className="m-auto size-4 flex-shrink-0 stroke-[1.5]" />
       </div>
-      <div className="flex items-center justify-center size-5 group-hover:hidden">
+      <div className="flex size-5 items-center justify-center group-hover:hidden">
         {logo?.in_use ? (
           <Logo logo={logo} size={16} type={type === "project" ? "material" : "lucide"} />
         ) : (
-          <Icon className="flex-shrink-0 size-4 stroke-[1.5] m-auto" />
+          <Icon className="m-auto size-4 flex-shrink-0 stroke-[1.5]" />
         )}
       </div>
     </>
diff --git a/apps/web/core/components/workspace/sidebar/favorites/favorite-items/common/index.ts b/apps/web/core/components/workspace/sidebar/favorites/favorite-items/common/index.ts
index 5e03ce1c7..c044bec24 100644
--- a/apps/web/core/components/workspace/sidebar/favorites/favorite-items/common/index.ts
+++ b/apps/web/core/components/workspace/sidebar/favorites/favorite-items/common/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./favorite-item-drag-handle";
 export * from "./favorite-item-quick-action";
 export * from "./favorite-item-wrapper";
diff --git a/apps/web/core/components/workspace/sidebar/favorites/favorite-items/index.ts b/apps/web/core/components/workspace/sidebar/favorites/favorite-items/index.ts
index 1037372f3..6feb3340d 100644
--- a/apps/web/core/components/workspace/sidebar/favorites/favorite-items/index.ts
+++ b/apps/web/core/components/workspace/sidebar/favorites/favorite-items/index.ts
@@ -1,2 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./common";
 export * from "./root";
diff --git a/apps/web/core/components/workspace/sidebar/favorites/favorite-items/root.tsx b/apps/web/core/components/workspace/sidebar/favorites/favorite-items/root.tsx
index 8d11d243b..1992cd013 100644
--- a/apps/web/core/components/workspace/sidebar/favorites/favorite-items/root.tsx
+++ b/apps/web/core/components/workspace/sidebar/favorites/favorite-items/root.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useEffect, useRef, useState } from "react";
 import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
 import type {
@@ -69,7 +75,7 @@ export const FavoriteRoot = observer(function FavoriteRoot(props: Props) {
             render: ({ container }) => {
               const root = createRoot(container);
               root.render(
-                <div className="rounded bg-custom-background-100 text-sm p-1 pr-2">
+                <div className="rounded-sm bg-surface-1 p-1 pr-2 text-13">
                   <FavoriteItemTitle href={itemLink} icon={itemIcon} title={itemTitle} />
                 </div>
               );
@@ -120,7 +126,7 @@ export const FavoriteRoot = observer(function FavoriteRoot(props: Props) {
 
   return (
     <>
-      <DropIndicator isVisible={instruction === "reorder-above"} />
+      {isDragging && <DropIndicator isVisible={instruction === "reorder-above"} />}
       <FavoriteItemWrapper elementRef={elementRef} isMenuActive={isMenuActive}>
         <FavoriteItemDragHandle isDragging={isDragging} sort_order={favorite.sort_order} />
         <FavoriteItemTitle href={itemLink} icon={itemIcon} title={itemTitle} />
diff --git a/apps/web/core/components/workspace/sidebar/favorites/favorites-menu.tsx b/apps/web/core/components/workspace/sidebar/favorites/favorites-menu.tsx
index 3dca90546..624a07f63 100644
--- a/apps/web/core/components/workspace/sidebar/favorites/favorites-menu.tsx
+++ b/apps/web/core/components/workspace/sidebar/favorites/favorites-menu.tsx
@@ -1,4 +1,10 @@
-import React, { useCallback, useEffect, useRef, useState } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useCallback, useEffect, useRef, useState } from "react";
 import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
 import type {
   DragLocationHistory,
@@ -18,8 +24,6 @@ import { ChevronRightIcon } from "@plane/propel/icons";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import { Tooltip } from "@plane/propel/tooltip";
 import type { IFavorite } from "@plane/types";
-// constants
-
 // helpers
 import { cn } from "@plane/utils";
 // hooks
@@ -31,6 +35,7 @@ import { FavoriteRoot } from "./favorite-items";
 import type { TargetData } from "./favorites.helpers";
 import { getInstructionFromPayload } from "./favorites.helpers";
 import { NewFavoriteFolder } from "./new-fav-folder";
+import { IconButton } from "@plane/propel/icon-button";
 
 export const SidebarFavoritesMenu = observer(function SidebarFavoritesMenu() {
   // states
@@ -111,6 +116,7 @@ export const SidebarFavoritesMenu = observer(function SidebarFavoritesMenu() {
           title: t("success"),
           message: t("favorite_removed_successfully"),
         });
+        return;
       })
       .catch(() => {
         setToast({
@@ -178,16 +184,16 @@ export const SidebarFavoritesMenu = observer(function SidebarFavoritesMenu() {
         <div
           ref={elementRef}
           className={cn(
-            "group/favorites-button w-full flex items-center justify-between px-2 py-1.5 rounded text-custom-sidebar-text-400 hover:bg-custom-sidebar-background-90"
+            "group/favorites-button flex w-full items-center justify-between rounded-sm px-2 py-1.5 text-placeholder hover:bg-layer-transparent-hover"
           )}
         >
           <Disclosure.Button
             as="button"
             type="button"
             className={cn(
-              "w-full flex items-center gap-1 whitespace-nowrap text-left text-sm font-semibold text-custom-sidebar-text-400",
+              "flex w-full items-center gap-1 text-left text-13 font-semibold whitespace-nowrap text-placeholder",
               {
-                "bg-custom-sidebar-background-80 opacity-60": isDragging,
+                "bg-layer-1 opacity-60": isDragging,
               }
             )}
             onClick={() => toggleFavoriteMenu(!isFavoriteMenuOpen)}
@@ -197,26 +203,25 @@ export const SidebarFavoritesMenu = observer(function SidebarFavoritesMenu() {
                 : "aria_labels.projects_sidebar.open_favorites_menu"
             )}
           >
-            <span className="text-sm font-semibold">{t("favorites")}</span>
+            <span className="text-13 font-semibold">{t("favorites")}</span>
           </Disclosure.Button>
-          <div className="flex items-center opacity-0 pointer-events-none group-hover/favorites-button:opacity-100 group-hover/favorites-button:pointer-events-auto">
+          <div className="pointer-events-none flex items-center opacity-0 group-hover/favorites-button:pointer-events-auto group-hover/favorites-button:opacity-100">
             <Tooltip tooltipHeading={t("create_folder")} tooltipContent="">
-              <button
-                type="button"
-                className="p-0.5 rounded hover:bg-custom-sidebar-background-80 flex-shrink-0 grid place-items-center"
+              <IconButton
+                variant="ghost"
+                size="sm"
                 onClick={() => {
                   setCreateNewFolder(true);
                   if (!isFavoriteMenuOpen) toggleFavoriteMenu(!isFavoriteMenuOpen);
                 }}
                 aria-label={t("aria_labels.projects_sidebar.create_favorites_folder")}
-              >
-                <FolderPlus className="size-3" />
-              </button>
+                icon={FolderPlus}
+              />
             </Tooltip>
             <Disclosure.Button
               as="button"
               type="button"
-              className="p-0.5 rounded hover:bg-custom-sidebar-background-80 flex-shrink-0 grid place-items-center"
+              className="grid flex-shrink-0 place-items-center rounded-sm p-0.5 hover:bg-layer-transparent-hover"
               onClick={() => toggleFavoriteMenu(!isFavoriteMenuOpen)}
               aria-label={t(
                 isFavoriteMenuOpen
@@ -225,7 +230,7 @@ export const SidebarFavoritesMenu = observer(function SidebarFavoritesMenu() {
               )}
             >
               <ChevronRightIcon
-                className={cn("flex-shrink-0 size-3 transition-all", {
+                className={cn("size-3 flex-shrink-0 transition-all", {
                   "rotate-90": isFavoriteMenuOpen,
                 })}
               />
@@ -242,11 +247,11 @@ export const SidebarFavoritesMenu = observer(function SidebarFavoritesMenu() {
           leaveTo="transform scale-95 opacity-0"
         >
           {isFavoriteMenuOpen && (
-            <Disclosure.Panel as="div" className="flex flex-col mt-0.5 gap-0.5" static>
+            <Disclosure.Panel as="div" className="mt-0.5 flex flex-col gap-0.5" static>
               {createNewFolder && <NewFavoriteFolder setCreateNewFolder={setCreateNewFolder} actionType="create" />}
               {Object.keys(groupedFavorites).length === 0 ? (
                 <>
-                  <span className="text-custom-text-400 text-xs font-medium px-8 py-1.5">{t("no_favorites_yet")}</span>
+                  <span className="px-8 py-1.5 text-11 font-medium text-placeholder">{t("no_favorites_yet")}</span>
                 </>
               ) : (
                 orderBy(Object.values(groupedFavorites), "sequence", "desc")
diff --git a/apps/web/core/components/workspace/sidebar/favorites/favorites.helpers.ts b/apps/web/core/components/workspace/sidebar/favorites/favorites.helpers.ts
index 44e1c022d..a911f596e 100644
--- a/apps/web/core/components/workspace/sidebar/favorites/favorites.helpers.ts
+++ b/apps/web/core/components/workspace/sidebar/favorites/favorites.helpers.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { extractInstruction } from "@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item";
 import type { IFavorite, InstructionType, IPragmaticPayloadLocation, TDropTarget } from "@plane/types";
 
diff --git a/apps/web/core/components/workspace/sidebar/favorites/new-fav-folder.tsx b/apps/web/core/components/workspace/sidebar/favorites/new-fav-folder.tsx
index 724b23793..3e3927eee 100644
--- a/apps/web/core/components/workspace/sidebar/favorites/new-fav-folder.tsx
+++ b/apps/web/core/components/workspace/sidebar/favorites/new-fav-folder.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useEffect, useRef } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
@@ -72,6 +78,7 @@ export const NewFavoriteFolder = observer(function NewFavoriteFolder(props: TPro
           title: t("success"),
           message: t("favorite_created_successfully"),
         });
+        return;
       })
       .catch(() => {
         setToast({
@@ -110,6 +117,7 @@ export const NewFavoriteFolder = observer(function NewFavoriteFolder(props: TPro
           title: t("success"),
           message: t("favorite_updated_successfully"),
         });
+        return;
       })
       .catch(() => {
         setToast({
@@ -130,8 +138,8 @@ export const NewFavoriteFolder = observer(function NewFavoriteFolder(props: TPro
     setCreateNewFolder(false);
   });
   return (
-    <div className="flex items-center gap-1.5 py-[1px] px-2" ref={ref}>
-      <FavoriteFolderIcon className="w-[16px]" />
+    <div className="flex items-center gap-1.5 px-2 py-[1px]" ref={ref}>
+      <FavoriteFolderIcon className="size-4" />
       <form onSubmit={handleSubmit(actionType === "create" ? handleAddNewFolder : handleRenameFolder)}>
         <Controller
           name="name"
diff --git a/apps/web/core/components/workspace/sidebar/help-section/index.ts b/apps/web/core/components/workspace/sidebar/help-section/index.ts
index 1efe34c51..d98033459 100644
--- a/apps/web/core/components/workspace/sidebar/help-section/index.ts
+++ b/apps/web/core/components/workspace/sidebar/help-section/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./root";
diff --git a/apps/web/core/components/workspace/sidebar/help-section/root.tsx b/apps/web/core/components/workspace/sidebar/help-section/root.tsx
index c746b084e..dea70d90a 100644
--- a/apps/web/core/components/workspace/sidebar/help-section/root.tsx
+++ b/apps/web/core/components/workspace/sidebar/help-section/root.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React, { useState } from "react";
 import { observer } from "mobx-react";
 import { HelpCircle, MessagesSquare, User } from "lucide-react";
@@ -45,9 +51,9 @@ export const HelpMenuRoot = observer(function HelpMenuRoot() {
         closeOnSelect
       >
         <CustomMenu.MenuItem onClick={() => window.open("https://go.plane.so/p-docs", "_blank")}>
-          <div className="flex items-center gap-x-2 rounded text-xs">
-            <PageIcon className="h-3.5 w-3.5 text-custom-text-200" height={14} width={14} />
-            <span className="text-xs">{t("documentation")}</span>
+          <div className="flex items-center gap-x-2 rounded-sm text-11">
+            <PageIcon className="h-3.5 w-3.5 text-secondary" height={14} width={14} />
+            <span className="text-11">{t("documentation")}</span>
           </div>
         </CustomMenu.MenuItem>
         {isChatSupportEnabled && (
@@ -55,46 +61,44 @@ export const HelpMenuRoot = observer(function HelpMenuRoot() {
             <button
               type="button"
               onClick={openChatSupport}
-              className="flex w-full items-center gap-x-2 rounded text-xs hover:bg-custom-background-80"
+              className="flex w-full items-center gap-x-2 rounded-sm text-11 hover:bg-layer-1"
             >
-              <MessagesSquare className="h-3.5 w-3.5 text-custom-text-200" />
-              <span className="text-xs">{t("message_support")}</span>
+              <MessagesSquare className="h-3.5 w-3.5 text-secondary" />
+              <span className="text-11">{t("message_support")}</span>
             </button>
           </CustomMenu.MenuItem>
         )}
         <CustomMenu.MenuItem onClick={() => window.open("mailto:sales@plane.so", "_blank")}>
-          <div className="flex items-center gap-x-2 rounded text-xs">
-            <User className="h-3.5 w-3.5 text-custom-text-200" size={14} />
-            <span className="text-xs">{t("contact_sales")}</span>
+          <div className="flex items-center gap-x-2 rounded-sm text-11">
+            <User className="h-3.5 w-3.5 text-secondary" size={14} />
+            <span className="text-11">{t("contact_sales")}</span>
           </div>
         </CustomMenu.MenuItem>
-        <div className="my-1 border-t border-custom-border-200" />
+        <div className="my-1 border-t border-subtle" />
         <CustomMenu.MenuItem>
           <button
             type="button"
             onClick={() => toggleShortcutsListModal(true)}
-            className="flex w-full items-center justify-start text-xs hover:bg-custom-background-80"
+            className="justify-sbg-layer-211 flex w-full items-center hover:bg-layer-1"
           >
-            <span className="text-xs">{t("keyboard_shortcuts")}</span>
+            <span className="text-11">{t("keyboard_shortcuts")}</span>
           </button>
         </CustomMenu.MenuItem>
         <CustomMenu.MenuItem>
           <button
             type="button"
             onClick={() => setProductUpdatesModalOpen(true)}
-            className="flex w-full items-center justify-start text-xs hover:bg-custom-background-80"
+            className="justify-sbg-layer-211 flex w-full items-center hover:bg-layer-1"
           >
-            <span className="text-xs">{t("whats_new")}</span>
+            <span className="text-11">{t("whats_new")}</span>
           </button>
         </CustomMenu.MenuItem>
-        <CustomMenu.MenuItem
-          onClick={() => window.open("https://go.plane.so/p-discord", "_blank", "noopener,noreferrer")}
-        >
-          <div className="flex items-center gap-x-2 rounded text-xs">
-            <span className="text-xs">Discord</span>
+        <CustomMenu.MenuItem onClick={() => window.open("https://forum.plane.so", "_blank", "noopener,noreferrer")}>
+          <div className="flex items-center gap-x-2 rounded-sm text-11">
+            <span className="text-11">Forum</span>
           </div>
         </CustomMenu.MenuItem>
-        <div className="px-1 pt-2 mt-1 text-xs text-custom-text-200 border-t border-custom-border-200">
+        <div className="mt-1 border-t border-subtle px-1 pt-2 text-11 text-secondary">
           <PlaneVersionNumber />
         </div>
       </CustomMenu>
diff --git a/apps/web/core/components/workspace/sidebar/project-navigation.tsx b/apps/web/core/components/workspace/sidebar/project-navigation.tsx
index 49ae45974..3582215f3 100644
--- a/apps/web/core/components/workspace/sidebar/project-navigation.tsx
+++ b/apps/web/core/components/workspace/sidebar/project-navigation.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React, { useCallback, useMemo } from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
@@ -37,7 +43,7 @@ export const ProjectNavigation = observer(function ProjectNavigation(props: TPro
   const { workItem: workItemIdentifierFromRoute } = useParams();
   // store hooks
   const { t } = useTranslation();
-  const { toggleSidebar } = useAppTheme();
+  const { isExtendedProjectSidebarOpened, toggleExtendedProjectSidebar, toggleSidebar } = useAppTheme();
   const { getPartialProjectById } = useProject();
   const { allowPermissions } = useUserPermissions();
   const {
@@ -56,6 +62,10 @@ export const ProjectNavigation = observer(function ProjectNavigation(props: TPro
     if (window.innerWidth < 768) {
       toggleSidebar();
     }
+    // close the extended sidebar if it is open
+    if (isExtendedProjectSidebarOpened) {
+      toggleExtendedProjectSidebar(false);
+    }
   };
 
   const baseNavigation = useCallback(
@@ -171,12 +181,19 @@ export const ProjectNavigation = observer(function ProjectNavigation(props: TPro
         const hasAccess = allowPermissions(item.access, EUserPermissionsLevel.PROJECT, workspaceSlug, project.id);
         if (!hasAccess) return null;
 
+        const shouldShowCount = item.key === "intake" && (project.intake_count ?? 0) > 0;
+
         return (
           <Link key={item.key} href={item.href} onClick={handleProjectClick}>
             <SidebarNavItem isActive={!!isActive(item)}>
-              <div className="flex items-center gap-1.5 py-[1px]">
-                <item.icon className={`flex-shrink-0 size-4 ${item.name === "Intake" ? "stroke-1" : "stroke-[1.5]"}`} />
-                <span className="text-xs font-medium">{t(item.i18n_key)}</span>
+              <div className="flex w-full items-center justify-between gap-1.5 py-[1px]">
+                <div className="flex items-center gap-1.5">
+                  <item.icon
+                    className={`size-4 flex-shrink-0 ${item.name === "Intake" ? "stroke-1" : "stroke-[1.5]"}`}
+                  />
+                  <span className="text-11 font-medium">{t(item.i18n_key)}</span>
+                </div>
+                {shouldShowCount && <span className="text-11 font-medium text-tertiary">{project.intake_count}</span>}
               </div>
             </SidebarNavItem>
           </Link>
diff --git a/apps/web/core/components/workspace/sidebar/projects-list-item.tsx b/apps/web/core/components/workspace/sidebar/projects-list-item.tsx
index 38e1122cf..f1256a4e4 100644
--- a/apps/web/core/components/workspace/sidebar/projects-list-item.tsx
+++ b/apps/web/core/components/workspace/sidebar/projects-list-item.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useCallback, useEffect, useRef, useState } from "react";
 import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
 import { draggable, dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
@@ -8,14 +14,15 @@ import { observer } from "mobx-react";
 import { useParams, useRouter } from "next/navigation";
 import { createRoot } from "react-dom/client";
 import scrollIntoView from "smooth-scroll-into-view-if-needed";
-import { LinkIcon, Settings, Share2, LogOut, MoreHorizontal } from "lucide-react";
+import { Settings, Share2, LogOut, MoreHorizontal } from "lucide-react";
 import { Disclosure, Transition } from "@headlessui/react";
 // plane imports
 import { EUserPermissions, EUserPermissionsLevel, MEMBER_TRACKER_ELEMENTS } from "@plane/constants";
 import { useOutsideClickDetector } from "@plane/hooks";
 import { useTranslation } from "@plane/i18n";
 import { Logo } from "@plane/propel/emoji-icon-picker";
-import { ArchiveIcon, ChevronRightIcon } from "@plane/propel/icons";
+import { LinkIcon, ArchiveIcon, ChevronRightIcon } from "@plane/propel/icons";
+import { IconButton } from "@plane/propel/icon-button";
 import { Tooltip } from "@plane/propel/tooltip";
 import { CustomMenu, DropIndicator, DragHandle, ControlLink } from "@plane/ui";
 import { cn } from "@plane/utils";
@@ -80,7 +87,7 @@ export const SidebarProjectsListItem = observer(function SidebarProjectsListItem
   const isProjectListOpen = getIsProjectListOpen(projectId);
   const [instruction, setInstruction] = useState<"DRAG_OVER" | "DRAG_BELOW" | undefined>(undefined);
   // refs
-  const actionSectionRef = useRef<HTMLDivElement | null>(null);
+  const actionSectionRef = useRef<HTMLButtonElement | null>(null);
   const projectRef = useRef<HTMLDivElement | null>(null);
   const dragHandleRef = useRef<HTMLButtonElement | null>(null);
   // router
@@ -153,11 +160,11 @@ export const SidebarProjectsListItem = observer(function SidebarProjectsListItem
             render: ({ container }) => {
               const root = createRoot(container);
               root.render(
-                <div className="rounded flex items-center bg-custom-background-100 text-sm p-1 pr-2">
-                  <div className="size-4 grid place-items-center flex-shrink-0">
+                <div className="flex items-center rounded-sm bg-surface-1 p-1 pr-2 text-13">
+                  <div className="grid size-4 flex-shrink-0 place-items-center">
                     {project && <Logo logo={project?.logo_props} />}
                   </div>
-                  <p className="truncate text-custom-sidebar-text-200">{project?.name}</p>
+                  <p className="truncate text-secondary">{project?.name}</p>
                 </div>
               );
               return () => root.unmount();
@@ -253,19 +260,21 @@ export const SidebarProjectsListItem = observer(function SidebarProjectsListItem
 
   if (!project) return null;
 
+  const isAccordionMode = projectPreferences.navigationMode === "ACCORDION";
+
   const handleItemClick = () => {
-    if (projectPreferences.navigationMode === "accordion") {
+    if (projectPreferences.navigationMode === "ACCORDION") {
       setIsProjectListOpen(!isProjectListOpen);
     } else {
       router.push(defaultTabUrl);
     }
     // close the extended sidebar if it is open
-    if (isExtendedProjectSidebarOpened) {
+    if (isExtendedProjectSidebarOpened && !isAccordionMode) {
       toggleExtendedProjectSidebar(false);
     }
   };
 
-  const isAccordionMode = projectPreferences.navigationMode === "accordion";
+  const shouldHighlightProject = URLProjectId === project?.id && projectPreferences.navigationMode !== "ACCORDION";
 
   return (
     <>
@@ -275,16 +284,17 @@ export const SidebarProjectsListItem = observer(function SidebarProjectsListItem
         <div
           id={`sidebar-${projectId}-${projectListType}`}
           className={cn("relative", {
-            "bg-custom-sidebar-background-80 opacity-60": isDragging,
+            "bg-layer-1 opacity-60": isDragging,
           })}
           ref={projectRef}
         >
           <DropIndicator classNames="absolute top-0" isVisible={instruction === "DRAG_OVER"} />
           <div
             className={cn(
-              "group/project-item relative w-full px-2 py-1.5 flex items-center rounded-md text-custom-sidebar-text-100 hover:bg-custom-sidebar-background-90",
+              "group/project-item relative flex w-full items-center rounded-md px-2 py-1.5 text-primary hover:bg-layer-transparent-hover",
               {
-                "bg-custom-sidebar-background-90": isMenuActive,
+                "bg-surface-2": isMenuActive,
+                "bg-layer-transparent-active": shouldHighlightProject,
               }
             )}
             id={`${project?.id}`}
@@ -301,7 +311,7 @@ export const SidebarProjectsListItem = observer(function SidebarProjectsListItem
                 <button
                   type="button"
                   className={cn(
-                    "hidden group-hover/project-item:flex items-center justify-center absolute top-1/2 -left-3 -translate-y-1/2 rounded text-custom-sidebar-text-400 cursor-grab",
+                    "absolute top-1/2 -left-3 hidden -translate-y-1/2 cursor-grab items-center justify-center rounded-sm text-placeholder group-hover/project-item:flex",
                     {
                       "cursor-not-allowed opacity-60": project.sort_order === null,
                       "cursor-grabbing": isDragging,
@@ -315,57 +325,59 @@ export const SidebarProjectsListItem = observer(function SidebarProjectsListItem
               </Tooltip>
             )}
             <>
-              <ControlLink href={defaultTabUrl} className="flex-grow flex truncate" onClick={handleItemClick}>
+              <ControlLink href={defaultTabUrl} className="flex flex-grow truncate" onClick={handleItemClick}>
                 {isAccordionMode ? (
                   <Disclosure.Button
                     as="button"
                     type="button"
-                    className={cn("flex-grow flex items-center gap-1.5 text-left select-none w-full", {})}
+                    className={cn("flex w-full flex-grow items-center gap-1.5 text-left select-none", {})}
                     aria-label={
                       isProjectListOpen
                         ? t("aria_labels.projects_sidebar.close_project_menu")
                         : t("aria_labels.projects_sidebar.open_project_menu")
                     }
                   >
-                    <div className="size-4 grid place-items-center flex-shrink-0">
+                    <div className="grid size-4 flex-shrink-0 place-items-center">
                       <Logo logo={project.logo_props} size={16} />
                     </div>
-                    <p className="truncate text-sm font-medium text-custom-sidebar-text-200">{project.name}</p>
+                    <p className="truncate text-13 font-medium text-secondary">{project.name}</p>
                   </Disclosure.Button>
                 ) : (
-                  <div className="flex-grow flex items-center gap-1.5 text-left select-none w-full">
-                    <div className="size-4 grid place-items-center flex-shrink-0">
+                  <div className="flex w-full flex-grow items-center gap-1.5 text-left select-none">
+                    <div className="grid size-4 flex-shrink-0 place-items-center">
                       <Logo logo={project.logo_props} size={16} />
                     </div>
-                    <p className="truncate text-sm font-medium text-custom-sidebar-text-200">{project.name}</p>
+                    <p className="truncate text-13 font-medium text-secondary">{project.name}</p>
                   </div>
                 )}
               </ControlLink>
-              <CustomMenu
-                customButton={
-                  <span
-                    ref={actionSectionRef}
-                    className="grid place-items-center p-0.5 text-custom-sidebar-text-400 hover:bg-custom-sidebar-background-80 rounded"
-                    onClick={() => setIsMenuActive(!isMenuActive)}
-                  >
-                    <MoreHorizontal className="size-4" />
-                  </span>
-                }
-                className={cn(
-                  "opacity-0 pointer-events-none flex-shrink-0 group-hover/project-item:opacity-100 group-hover/project-item:pointer-events-auto",
-                  {
-                    "opacity-100 pointer-events-auto": isMenuActive,
+              <div className="flex items-center gap-1">
+                <CustomMenu
+                  customButton={
+                    <IconButton
+                      ref={actionSectionRef}
+                      variant="ghost"
+                      size="sm"
+                      icon={MoreHorizontal}
+                      onClick={() => setIsMenuActive(!isMenuActive)}
+                      className="text-placeholder"
+                    />
                   }
-                )}
-                customButtonClassName="grid place-items-center"
-                placement="bottom-start"
-                ariaLabel={t("aria_labels.projects_sidebar.toggle_quick_actions_menu")}
-                useCaptureForOutsideClick
-                closeOnSelect
-                onMenuClose={() => setIsMenuActive(false)}
-              >
-                {/* TODO: Removed is_favorite logic due to the optimization in projects API */}
-                {/* {isAuthorized && (
+                  className={cn(
+                    "pointer-events-none flex-shrink-0 opacity-0 group-hover/project-item:pointer-events-auto group-hover/project-item:opacity-100",
+                    {
+                      "pointer-events-auto opacity-100": isMenuActive,
+                    }
+                  )}
+                  customButtonClassName="grid place-items-center"
+                  placement="bottom-start"
+                  ariaLabel={t("aria_labels.projects_sidebar.toggle_quick_actions_menu")}
+                  useCaptureForOutsideClick
+                  closeOnSelect
+                  onMenuClose={() => setIsMenuActive(false)}
+                >
+                  {/* TODO: Removed is_favorite logic due to the optimization in projects API */}
+                  {/* {isAuthorized && (
                     <CustomMenu.MenuItem
                       onClick={project.is_favorite ? handleRemoveFromFavorites : handleAddToFavorites}
                     >
@@ -380,82 +392,78 @@ export const SidebarProjectsListItem = observer(function SidebarProjectsListItem
                     </CustomMenu.MenuItem>
                   )} */}
 
-                {/* publish project settings */}
-                {isAdmin && (
-                  <CustomMenu.MenuItem onClick={() => setPublishModal(true)}>
-                    <div className="relative flex flex-shrink-0 items-center justify-start gap-2">
-                      <div className="flex h-4 w-4 cursor-pointer items-center justify-center rounded text-custom-sidebar-text-200 transition-all duration-300 hover:bg-custom-sidebar-background-80">
-                        <Share2 className="h-3.5 w-3.5 stroke-[1.5]" />
+                  {/* publish project settings */}
+                  {isAdmin && (
+                    <CustomMenu.MenuItem onClick={() => setPublishModal(true)}>
+                      <div className="relative flex flex-shrink-0 items-center justify-start gap-2">
+                        <div className="flex h-4 w-4 cursor-pointer items-center justify-center rounded-sm text-secondary transition-all duration-300 hover:bg-layer-1">
+                          <Share2 className="h-3.5 w-3.5 stroke-[1.5]" />
+                        </div>
+                        <div>{t("publish_project")}</div>
                       </div>
-                      <div>{t("publish_project")}</div>
-                    </div>
+                    </CustomMenu.MenuItem>
+                  )}
+                  <CustomMenu.MenuItem onClick={handleCopyText}>
+                    <span className="flex items-center justify-start gap-2">
+                      <LinkIcon className="h-3.5 w-3.5 stroke-[1.5]" />
+                      <span>{t("copy_link")}</span>
+                    </span>
                   </CustomMenu.MenuItem>
-                )}
-                <CustomMenu.MenuItem onClick={handleCopyText}>
-                  <span className="flex items-center justify-start gap-2">
-                    <LinkIcon className="h-3.5 w-3.5 stroke-[1.5]" />
-                    <span>{t("copy_link")}</span>
-                  </span>
-                </CustomMenu.MenuItem>
-                {isAuthorized && (
+                  {isAuthorized && (
+                    <CustomMenu.MenuItem
+                      onClick={() => {
+                        router.push(`/${workspaceSlug}/projects/${project?.id}/archives/issues`);
+                      }}
+                    >
+                      <div className="flex cursor-pointer items-center justify-start gap-2">
+                        <ArchiveIcon className="h-3.5 w-3.5 stroke-[1.5]" />
+                        <span>{t("archives")}</span>
+                      </div>
+                    </CustomMenu.MenuItem>
+                  )}
                   <CustomMenu.MenuItem
                     onClick={() => {
-                      router.push(`/${workspaceSlug}/projects/${project?.id}/archives/issues`);
+                      router.push(`/${workspaceSlug}/settings/projects/${project?.id}`);
                     }}
                   >
-                    <div className="flex items-center justify-start gap-2 cursor-pointer">
-                      <ArchiveIcon className="h-3.5 w-3.5 stroke-[1.5]" />
-                      <span>{t("archives")}</span>
+                    <div className="flex cursor-pointer items-center justify-start gap-2">
+                      <Settings className="h-3.5 w-3.5 stroke-[1.5]" />
+                      <span>{t("settings")}</span>
                     </div>
                   </CustomMenu.MenuItem>
-                )}
-                <CustomMenu.MenuItem
-                  onClick={() => {
-                    router.push(`/${workspaceSlug}/settings/projects/${project?.id}`);
-                  }}
-                >
-                  <div className="flex items-center justify-start gap-2 cursor-pointer">
-                    <Settings className="h-3.5 w-3.5 stroke-[1.5]" />
-                    <span>{t("settings")}</span>
-                  </div>
-                </CustomMenu.MenuItem>
-                {/* leave project */}
-                {!isAuthorized && (
-                  <CustomMenu.MenuItem
-                    onClick={handleLeaveProject}
-                    data-ph-element={MEMBER_TRACKER_ELEMENTS.SIDEBAR_PROJECT_QUICK_ACTIONS}
-                  >
-                    <div className="flex items-center justify-start gap-2">
-                      <LogOut className="h-3.5 w-3.5 stroke-[1.5]" />
-                      <span>{t("leave_project")}</span>
-                    </div>
-                  </CustomMenu.MenuItem>
-                )}
-              </CustomMenu>
-              {isAccordionMode && (
-                <Disclosure.Button
-                  as="button"
-                  type="button"
-                  className={cn(
-                    "hidden group-hover/project-item:inline-block p-0.5 rounded hover:bg-custom-sidebar-background-80",
-                    {
-                      "inline-block": isMenuActive,
-                    }
+                  {/* leave project */}
+                  {!isAuthorized && (
+                    <CustomMenu.MenuItem
+                      onClick={handleLeaveProject}
+                      data-ph-element={MEMBER_TRACKER_ELEMENTS.SIDEBAR_PROJECT_QUICK_ACTIONS}
+                    >
+                      <div className="flex items-center justify-start gap-2">
+                        <LogOut className="h-3.5 w-3.5 stroke-[1.5]" />
+                        <span>{t("leave_project")}</span>
+                      </div>
+                    </CustomMenu.MenuItem>
                   )}
-                  onClick={() => setIsProjectListOpen(!isProjectListOpen)}
-                  aria-label={t(
-                    isProjectListOpen
-                      ? "aria_labels.projects_sidebar.close_project_menu"
-                      : "aria_labels.projects_sidebar.open_project_menu"
-                  )}
-                >
-                  <ChevronRightIcon
-                    className={cn("size-4 flex-shrink-0 text-custom-sidebar-text-400 transition-transform", {
+                </CustomMenu>
+                {isAccordionMode && (
+                  <IconButton
+                    variant="ghost"
+                    size="sm"
+                    icon={ChevronRightIcon}
+                    onClick={() => setIsProjectListOpen(!isProjectListOpen)}
+                    className={cn("hidden text-placeholder group-hover/project-item:inline-flex", {
+                      "inline-flex": isMenuActive,
+                    })}
+                    iconClassName={cn("transition-transform", {
                       "rotate-90": isProjectListOpen,
                     })}
+                    aria-label={t(
+                      isProjectListOpen
+                        ? "aria_labels.projects_sidebar.close_project_menu"
+                        : "aria_labels.projects_sidebar.open_project_menu"
+                    )}
                   />
-                </Disclosure.Button>
-              )}
+                )}
+              </div>
             </>
           </div>
           {isAccordionMode && (
@@ -469,8 +477,8 @@ export const SidebarProjectsListItem = observer(function SidebarProjectsListItem
               leaveTo="transform scale-95 opacity-0"
             >
               {isProjectListOpen && (
-                <Disclosure.Panel as="div" className="relative flex flex-col gap-0.5 mt-1 pl-6 mb-1.5">
-                  <div className="absolute left-[15px] top-0 bottom-1 w-[1px] bg-custom-border-200" />
+                <Disclosure.Panel as="div" className="relative mt-1 mb-1.5 flex flex-col gap-0.5 pl-6">
+                  <div className="absolute top-0 bottom-1 left-[15px] w-[1px] bg-layer-3" />
                   <ProjectNavigationRoot workspaceSlug={workspaceSlug.toString()} projectId={projectId.toString()} />
                 </Disclosure.Panel>
               )}
diff --git a/apps/web/core/components/workspace/sidebar/projects-list.tsx b/apps/web/core/components/workspace/sidebar/projects-list.tsx
index 5678254e3..631c52ddf 100644
--- a/apps/web/core/components/workspace/sidebar/projects-list.tsx
+++ b/apps/web/core/components/workspace/sidebar/projects-list.tsx
@@ -1,14 +1,21 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useState, useRef, useEffect } from "react";
 import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
 import { autoScrollForElements } from "@atlaskit/pragmatic-drag-and-drop-auto-scroll/element";
 import { observer } from "mobx-react";
 import { useParams, usePathname } from "next/navigation";
-import { Plus, Ellipsis } from "lucide-react";
+import { Ellipsis } from "lucide-react";
 import { Disclosure, Transition } from "@headlessui/react";
 // plane imports
 import { EUserPermissions, EUserPermissionsLevel, PROJECT_TRACKER_ELEMENTS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { ChevronRightIcon } from "@plane/propel/icons";
+import { PlusIcon, ChevronRightIcon } from "@plane/propel/icons";
+import { IconButton } from "@plane/propel/icon-button";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import { Tooltip } from "@plane/propel/tooltip";
 import { Loader } from "@plane/ui";
@@ -159,16 +166,16 @@ export const SidebarProjectsList = observer(function SidebarProjectsList() {
       <div
         ref={containerRef}
         className={cn({
-          "border-t border-custom-sidebar-border-300": isScrolled,
+          "border-t border-strong": isScrolled,
         })}
       >
         <>
           <Disclosure as="div" className="flex flex-col" defaultOpen={isAllProjectsListOpen}>
-            <div className="group w-full flex items-center justify-between px-2 py-1.5 rounded text-custom-sidebar-text-400 hover:bg-custom-sidebar-background-90">
+            <div className="group flex w-full items-center justify-between rounded-sm px-2 py-1.5 text-placeholder hover:bg-layer-transparent-hover">
               <Disclosure.Button
                 as="button"
                 type="button"
-                className="w-full flex items-center gap-1 whitespace-nowrap text-left text-sm font-semibold text-custom-sidebar-text-400"
+                className="flex w-full items-center gap-1 text-left text-13 font-semibold whitespace-nowrap text-placeholder"
                 onClick={() => toggleListDisclosure(!isAllProjectsListOpen)}
                 aria-label={t(
                   isAllProjectsListOpen
@@ -176,41 +183,39 @@ export const SidebarProjectsList = observer(function SidebarProjectsList() {
                     : "aria_labels.projects_sidebar.open_projects_menu"
                 )}
               >
-                <span className="text-sm font-semibold">{t("projects")}</span>
+                <span className="text-13 font-semibold">{t("projects")}</span>
               </Disclosure.Button>
-              <div className="flex items-center opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto">
+              <div className="flex items-center gap-1">
                 {isAuthorizedUser && (
                   <Tooltip tooltipHeading={t("create_project")} tooltipContent="">
-                    <button
-                      type="button"
-                      data-ph-element={PROJECT_TRACKER_ELEMENTS.SIDEBAR_CREATE_PROJECT_TOOLTIP}
-                      className="p-0.5 rounded hover:bg-custom-sidebar-background-80 flex-shrink-0"
+                    <IconButton
+                      variant="ghost"
+                      size="sm"
+                      icon={PlusIcon}
                       onClick={() => {
                         setIsProjectModalOpen(true);
                       }}
+                      data-ph-element={PROJECT_TRACKER_ELEMENTS.SIDEBAR_CREATE_PROJECT_TOOLTIP}
+                      className="hidden text-placeholder group-hover:inline-flex"
                       aria-label={t("aria_labels.projects_sidebar.create_new_project")}
-                    >
-                      <Plus className="size-3" />
-                    </button>
+                    />
                   </Tooltip>
                 )}
-                <Disclosure.Button
-                  as="button"
-                  type="button"
-                  className="p-0.5 rounded hover:bg-custom-sidebar-background-80 flex-shrink-0"
+                <IconButton
+                  variant="ghost"
+                  size="sm"
+                  icon={ChevronRightIcon}
                   onClick={() => toggleListDisclosure(!isAllProjectsListOpen)}
+                  className="text-placeholder"
+                  iconClassName={cn("transition-transform", {
+                    "rotate-90": isAllProjectsListOpen,
+                  })}
                   aria-label={t(
                     isAllProjectsListOpen
                       ? "aria_labels.projects_sidebar.close_projects_menu"
                       : "aria_labels.projects_sidebar.open_projects_menu"
                   )}
-                >
-                  <ChevronRightIcon
-                    className={cn("flex-shrink-0 size-3 transition-all", {
-                      "rotate-90": isAllProjectsListOpen,
-                    })}
-                  />
-                </Disclosure.Button>
+                />
               </div>
             </div>
             <Transition
@@ -249,7 +254,7 @@ export const SidebarProjectsList = observer(function SidebarProjectsList() {
                         <button
                           type="button"
                           onClick={() => toggleExtendedProjectSidebar()}
-                          className="flex items-center gap-1.5 text-sm font-medium flex-grow text-custom-text-350"
+                          className="flex flex-grow items-center gap-1.5 text-13 font-medium text-tertiary"
                           id="extended-project-sidebar-toggle"
                           aria-label={t(
                             isExtendedProjectSidebarOpened
@@ -257,7 +262,7 @@ export const SidebarProjectsList = observer(function SidebarProjectsList() {
                               : "aria_labels.app_sidebar.open_extended_sidebar"
                           )}
                         >
-                          <Ellipsis className="flex-shrink-0 size-4" />
+                          <Ellipsis className="size-4 flex-shrink-0" />
                           <span>{isExtendedProjectSidebarOpened ? "Hide" : "More"}</span>
                         </button>
                       </SidebarNavItem>
@@ -273,7 +278,7 @@ export const SidebarProjectsList = observer(function SidebarProjectsList() {
           <button
             type="button"
             data-ph-element={PROJECT_TRACKER_ELEMENTS.SIDEBAR_CREATE_PROJECT_BUTTON}
-            className="w-full flex items-center gap-1.5 px-2 py-1.5 text-sm leading-5 font-medium text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-90 rounded-md"
+            className="flex w-full items-center gap-1.5 rounded-md px-2 py-1.5 text-13 leading-5 font-medium text-secondary hover:bg-surface-2"
             onClick={() => {
               toggleCreateProjectModal(true);
             }}
diff --git a/apps/web/core/components/workspace/sidebar/quick-actions.tsx b/apps/web/core/components/workspace/sidebar/quick-actions.tsx
index 293f534fe..9f5c6546b 100644
--- a/apps/web/core/components/workspace/sidebar/quick-actions.tsx
+++ b/apps/web/core/components/workspace/sidebar/quick-actions.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useRef, useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
@@ -71,12 +77,12 @@ export const SidebarQuickActions = observer(function SidebarQuickActions() {
         fetchIssueDetails={false}
         isDraft
       />
-      <div className="flex items-center justify-between gap-2 cursor-pointer">
+      <div className="flex cursor-pointer items-center justify-between gap-2">
         <SidebarAddButton
           label={
             <>
               <AddWorkItemIcon className="size-4" />
-              <span className="text-sm font-medium truncate max-w-[145px]">{t("sidebar.new_work_item")}</span>
+              <span className="max-w-[145px] truncate text-13 font-medium">{t("sidebar.new_work_item")}</span>
             </>
           }
           onClick={() => toggleCreateIssueModal(true)}
diff --git a/apps/web/core/components/workspace/sidebar/sidebar-item.tsx b/apps/web/core/components/workspace/sidebar/sidebar-item.tsx
index 6dc897ca7..205e9839f 100644
--- a/apps/web/core/components/workspace/sidebar/sidebar-item.tsx
+++ b/apps/web/core/components/workspace/sidebar/sidebar-item.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { ReactNode } from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
@@ -66,7 +72,7 @@ export const SidebarItemBase = observer(function SidebarItemBase({
       <SidebarNavItem isActive={item.highlight(pathname, itemHref)}>
         <div className="flex items-center gap-1.5 py-[1px]">
           {icon}
-          <p className="text-sm leading-5 font-medium">{t(item.labelTranslationKey)}</p>
+          <p className="text-13 leading-5 font-medium">{t(item.labelTranslationKey)}</p>
         </div>
         {additionalRender?.(item.key, slug)}
       </SidebarNavItem>
diff --git a/apps/web/core/components/workspace/sidebar/sidebar-menu-items.tsx b/apps/web/core/components/workspace/sidebar/sidebar-menu-items.tsx
index f9311df95..6f1de7634 100644
--- a/apps/web/core/components/workspace/sidebar/sidebar-menu-items.tsx
+++ b/apps/web/core/components/workspace/sidebar/sidebar-menu-items.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React, { useMemo } from "react";
 import { observer } from "mobx-react";
 import { Ellipsis } from "lucide-react";
@@ -96,11 +102,11 @@ export const SidebarMenuItems = observer(function SidebarMenuItems() {
         ))}
       </div>
       <Disclosure as="div" className="flex flex-col" defaultOpen={!!isWorkspaceMenuOpen}>
-        <div className="group w-full flex items-center justify-between px-2 py-1.5 rounded text-custom-sidebar-text-400 hover:bg-custom-sidebar-background-90">
+        <div className="group flex w-full items-center justify-between rounded-sm px-2 py-1.5 text-placeholder hover:bg-layer-transparent-hover">
           <Disclosure.Button
             as="button"
             type="button"
-            className="w-full flex items-center gap-1 whitespace-nowrap text-left text-sm font-semibold text-custom-sidebar-text-400"
+            className="flex w-full items-center gap-1 text-left text-13 font-semibold whitespace-nowrap text-placeholder"
             onClick={() => toggleListDisclosure(!isWorkspaceMenuOpen)}
             aria-label={t(
               isWorkspaceMenuOpen
@@ -108,13 +114,13 @@ export const SidebarMenuItems = observer(function SidebarMenuItems() {
                 : "aria_labels.app_sidebar.open_workspace_menu"
             )}
           >
-            <span className="text-sm font-semibold">{t("workspace")}</span>
+            <span className="text-13 font-semibold">{t("workspace")}</span>
           </Disclosure.Button>
-          <div className="flex items-center opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto">
+          <div className="pointer-events-none flex items-center opacity-0 group-hover:pointer-events-auto group-hover:opacity-100">
             <Disclosure.Button
               as="button"
               type="button"
-              className="p-0.5 rounded hover:bg-custom-sidebar-background-80 flex-shrink-0"
+              className="flex-shrink-0 rounded-sm p-0.5 hover:bg-layer-1"
               onClick={() => toggleListDisclosure(!isWorkspaceMenuOpen)}
               aria-label={t(
                 isWorkspaceMenuOpen
@@ -123,7 +129,7 @@ export const SidebarMenuItems = observer(function SidebarMenuItems() {
               )}
             >
               <ChevronRightIcon
-                className={cn("flex-shrink-0 size-3 transition-all", {
+                className={cn("size-3 flex-shrink-0 transition-all", {
                   "rotate-90": isWorkspaceMenuOpen,
                 })}
               />
@@ -152,7 +158,7 @@ export const SidebarMenuItems = observer(function SidebarMenuItems() {
                   <button
                     type="button"
                     onClick={() => toggleExtendedSidebar()}
-                    className="flex items-center gap-1.5 text-sm font-medium flex-grow text-custom-text-350"
+                    className="flex flex-grow items-center gap-1.5 text-13 font-medium text-tertiary"
                     id="extended-sidebar-toggle"
                     aria-label={t(
                       isExtendedSidebarOpened
@@ -160,7 +166,7 @@ export const SidebarMenuItems = observer(function SidebarMenuItems() {
                         : "aria_labels.app_sidebar.open_extended_sidebar"
                     )}
                   >
-                    <Ellipsis className="flex-shrink-0 size-4" />
+                    <Ellipsis className="size-4 flex-shrink-0" />
                     <span>{isExtendedSidebarOpened ? "Hide" : "More"}</span>
                   </button>
                 </SidebarNavItem>
diff --git a/apps/web/core/components/workspace/sidebar/user-menu-item.tsx b/apps/web/core/components/workspace/sidebar/user-menu-item.tsx
index 1f5422bdd..02aa128a7 100644
--- a/apps/web/core/components/workspace/sidebar/user-menu-item.tsx
+++ b/apps/web/core/components/workspace/sidebar/user-menu-item.tsx
@@ -1,16 +1,20 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import Link from "next/link";
 import { useParams, usePathname } from "next/navigation";
 // plane imports
-import { EUserPermissionsLevel, SIDEBAR_TRACKER_ELEMENTS } from "@plane/constants";
-
+import { EUserPermissionsLevel } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import type { EUserWorkspaceRoles } from "@plane/types";
 // components
 import { SidebarNavItem } from "@/components/sidebar/sidebar-navigation";
 import { NotificationAppSidebarOption } from "@/components/workspace-notifications/notification-app-sidebar-option";
 // hooks
-import { captureClick } from "@/helpers/event-tracker.helper";
 import { useAppTheme } from "@/hooks/store/use-app-theme";
 import { useUserPermissions } from "@/hooks/store/user";
 
@@ -44,24 +48,18 @@ export const SidebarUserMenuItem = observer(function SidebarUserMenuItem(props:
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   if (!allowPermissions(item.access as any, EUserPermissionsLevel.WORKSPACE, workspaceSlug.toString())) return null;
 
-  const handleLinkClick = (itemKey: string) => {
+  const handleLinkClick = () => {
     if (window.innerWidth < 768) {
       toggleSidebar();
     }
-    captureClick({
-      elementName: SIDEBAR_TRACKER_ELEMENTS.USER_MENU_ITEM,
-      context: {
-        destination: itemKey,
-      },
-    });
   };
 
   return (
-    <Link href={item.href} onClick={() => handleLinkClick(item.key)}>
+    <Link href={item.href} onClick={handleLinkClick}>
       <SidebarNavItem isActive={isActive}>
         <div className="flex items-center gap-1.5 py-[1px]">
           <item.Icon className="size-4 flex-shrink-0" />
-          <p className="text-sm leading-5 font-medium">{t(item.labelTranslationKey)}</p>
+          <p className="text-13 leading-5 font-medium">{t(item.labelTranslationKey)}</p>
         </div>
         {item.key === "notifications" && <NotificationAppSidebarOption workspaceSlug={workspaceSlug.toString()} />}
       </SidebarNavItem>
diff --git a/apps/web/core/components/workspace/sidebar/user-menu-root.tsx b/apps/web/core/components/workspace/sidebar/user-menu-root.tsx
index ae4125732..e5ba37a96 100644
--- a/apps/web/core/components/workspace/sidebar/user-menu-root.tsx
+++ b/apps/web/core/components/workspace/sidebar/user-menu-root.tsx
@@ -1,7 +1,12 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useState, useEffect } from "react";
 import { observer } from "mobx-react";
-import { useParams, useRouter } from "next/navigation";
-// icons
+import { useRouter } from "next/navigation";
 import { LogOut, Settings, Settings2 } from "lucide-react";
 // plane imports
 import { GOD_MODE_URL } from "@plane/constants";
@@ -9,33 +14,31 @@ import { useTranslation } from "@plane/i18n";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import { Avatar, CustomMenu } from "@plane/ui";
 import { getFileURL } from "@plane/utils";
-// hooks
+// components
+import { CoverImage } from "@/components/common/cover-image";
 import { AppSidebarItem } from "@/components/sidebar/sidebar-item";
+// hooks
 import { useAppTheme } from "@/hooks/store/use-app-theme";
+import { useCommandPalette } from "@/hooks/store/use-command-palette";
 import { useUser } from "@/hooks/store/user";
 
-type Props = {
-  size?: "xs" | "sm" | "md";
-};
-
-export const UserMenuRoot = observer(function UserMenuRoot(props: Props) {
-  const { size = "sm" } = props;
-  const { workspaceSlug } = useParams();
+export const UserMenuRoot = observer(function UserMenuRoot() {
+  // states
+  const [isUserMenuOpen, setIsUserMenuOpen] = useState(false);
   // router
   const router = useRouter();
   // store hooks
   const { toggleAnySidebarDropdown } = useAppTheme();
   const { data: currentUser } = useUser();
   const { signOut } = useUser();
+  const { toggleProfileSettingsModal } = useCommandPalette();
   // derived values
   const isUserInstanceAdmin = false;
   // translation
   const { t } = useTranslation();
-  // local state
-  const [isUserMenuOpen, setIsUserMenuOpen] = useState(false);
 
-  const handleSignOut = async () => {
-    await signOut().catch(() =>
+  const handleSignOut = () => {
+    signOut().catch(() =>
       setToast({
         type: TOAST_TYPE.ERROR,
         title: t("sign_out.toast.error.title"),
@@ -48,7 +51,7 @@ export const UserMenuRoot = observer(function UserMenuRoot(props: Props) {
   useEffect(() => {
     if (isUserMenuOpen) toggleAnySidebarDropdown(true);
     else toggleAnySidebarDropdown(false);
-  }, [isUserMenuOpen]);
+  }, [isUserMenuOpen, toggleAnySidebarDropdown]);
 
   return (
     <CustomMenu
@@ -61,7 +64,7 @@ export const UserMenuRoot = observer(function UserMenuRoot(props: Props) {
               <Avatar
                 name={currentUser?.display_name}
                 src={getFileURL(currentUser?.avatar_url ?? "")}
-                size={size === "xs" ? 20 : size === "sm" ? 24 : 28}
+                size={20}
                 shape="circle"
               />
             ),
@@ -72,48 +75,75 @@ export const UserMenuRoot = observer(function UserMenuRoot(props: Props) {
       menuButtonOnClick={() => !isUserMenuOpen && setIsUserMenuOpen(true)}
       onMenuClose={() => setIsUserMenuOpen(false)}
       placement="bottom-end"
-      maxHeight="lg"
+      maxHeight="2xl"
+      optionsClassName="w-72 p-3 flex flex-col gap-y-3"
       closeOnSelect
     >
-      <div className="flex flex-col gap-2">
-        <span className="px-2 text-custom-sidebar-text-200 truncate">{currentUser?.email}</span>
-        <CustomMenu.MenuItem onClick={() => router.push(`/${workspaceSlug}/settings/account`)}>
-          <div className="flex w-full items-center gap-2 rounded text-xs">
-            <Settings className="h-4 w-4 stroke-[1.5]" />
-            <span>{t("settings")}</span>
+      <div className="relative h-29 w-full rounded-lg">
+        <CoverImage
+          src={currentUser?.cover_image_url ?? undefined}
+          alt={currentUser?.display_name}
+          className="h-29 w-full rounded-lg"
+          showDefaultWhenEmpty
+        />
+        <div className="absolute inset-0 bg-layer-1/50" />
+        <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
+          <div className="flex flex-col items-center gap-y-2">
+            <div>
+              <Avatar
+                name={currentUser?.display_name}
+                src={getFileURL(currentUser?.avatar_url ?? "")}
+                size={40}
+                shape="circle"
+                className="text-18 font-medium"
+              />
+            </div>
+            <div className="text-center">
+              <p className="text-body-sm-medium">
+                {currentUser?.first_name} {currentUser?.last_name}
+              </p>
+              <p className="text-caption-md-regular">{currentUser?.email}</p>
+            </div>
           </div>
+        </div>
+      </div>
+      <div>
+        <CustomMenu.MenuItem
+          onClick={() =>
+            toggleProfileSettingsModal({
+              activeTab: "general",
+              isOpen: true,
+            })
+          }
+          className="flex items-center gap-2"
+        >
+          <Settings className="size-3.5 shrink-0" />
+          {t("settings")}
         </CustomMenu.MenuItem>
-        <CustomMenu.MenuItem onClick={() => router.push(`/${workspaceSlug}/settings/account/preferences`)}>
-          <div className="flex w-full items-center gap-2 rounded text-xs">
-            <Settings2 className="h-4 w-4 stroke-[1.5]" />
-            <span>Preferences</span>
-          </div>
-        </CustomMenu.MenuItem>
-      </div>
-      <div className="my-1 border-t border-custom-border-200" />
-      <div className={`${isUserInstanceAdmin ? "pb-2" : ""}`}>
-        <CustomMenu.MenuItem>
-          <button
-            type="button"
-            className="flex w-full items-center gap-2 rounded text-xs hover:bg-custom-background-80"
-            onClick={handleSignOut}
-          >
-            <LogOut className="size-4 stroke-[1.5]" />
-            {t("sign_out")}
-          </button>
+        <CustomMenu.MenuItem
+          onClick={() =>
+            toggleProfileSettingsModal({
+              activeTab: "preferences",
+              isOpen: true,
+            })
+          }
+          className="flex items-center gap-2"
+        >
+          <Settings2 className="size-3.5 shrink-0" />
+          {t("preferences")}
         </CustomMenu.MenuItem>
       </div>
+      <CustomMenu.MenuItem onClick={handleSignOut} className="flex items-center gap-2">
+        <LogOut className="size-3.5 shrink-0" />
+        {t("sign_out")}
+      </CustomMenu.MenuItem>
       {isUserInstanceAdmin && (
-        <>
-          <div className="my-1 border-t border-custom-border-200" />
-          <div className="px-1">
-            <CustomMenu.MenuItem onClick={() => router.push(GOD_MODE_URL)}>
-              <div className="flex w-full items-center justify-center rounded bg-custom-primary-100/20 px-2 py-1 text-xs font-medium text-custom-primary-100 hover:bg-custom-primary-100/30 hover:text-custom-primary-200">
-                {t("enter_god_mode")}
-              </div>
-            </CustomMenu.MenuItem>
-          </div>
-        </>
+        <CustomMenu.MenuItem
+          onClick={() => router.push(GOD_MODE_URL)}
+          className="bg-accent-primary/20 text-accent-primary hover:bg-accent-primary/30 hover:text-accent-secondary"
+        >
+          {t("enter_god_mode")}
+        </CustomMenu.MenuItem>
       )}
     </CustomMenu>
   );
diff --git a/apps/web/core/components/workspace/sidebar/user-menu.tsx b/apps/web/core/components/workspace/sidebar/user-menu.tsx
index 53ee7b747..f4f7b4ad3 100644
--- a/apps/web/core/components/workspace/sidebar/user-menu.tsx
+++ b/apps/web/core/components/workspace/sidebar/user-menu.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
diff --git a/apps/web/core/components/workspace/sidebar/workspace-menu-header.tsx b/apps/web/core/components/workspace/sidebar/workspace-menu-header.tsx
index 4768bad7e..a84d752de 100644
--- a/apps/web/core/components/workspace/sidebar/workspace-menu-header.tsx
+++ b/apps/web/core/components/workspace/sidebar/workspace-menu-header.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useState, useRef } from "react";
 import { observer } from "mobx-react";
 import { useParams, useRouter } from "next/navigation";
@@ -40,10 +46,10 @@ export const SidebarWorkspaceMenuHeader = observer(function SidebarWorkspaceMenu
   const isAdmin = allowPermissions([EUserWorkspaceRoles.ADMIN] as any, EUserPermissionsLevel.WORKSPACE);
 
   return (
-    <div className="flex px-2 bg-custom-sidebar-background-100 group/workspace-button hover:bg-custom-sidebar-background-90 rounded mt-2.5">
+    <div className="group/workspace-button mt-2.5 flex rounded-sm bg-surface-1 px-2 hover:bg-surface-2">
       <Disclosure.Button
         as="button"
-        className="flex-1 sticky top-0  z-10  w-full  py-1.5 flex items-center justify-between gap-1 text-custom-sidebar-text-400  text-sm font-semibold"
+        className="sticky top-0 z-10 flex w-full flex-1 items-center justify-between gap-1 py-1.5 text-13 font-semibold text-placeholder"
         onClick={() => toggleWorkspaceMenu(!isWorkspaceMenuOpen)}
       >
         <span>{t("workspace")}</span>
@@ -52,7 +58,7 @@ export const SidebarWorkspaceMenuHeader = observer(function SidebarWorkspaceMenu
         customButton={
           <span
             ref={actionSectionRef}
-            className="grid place-items-center p-0.5 text-custom-sidebar-text-400 hover:bg-custom-sidebar-background-80 rounded my-auto"
+            className="my-auto grid place-items-center rounded-sm p-0.5 text-placeholder hover:bg-layer-1"
             onClick={() => {
               setIsMenuActive(!isMenuActive);
             }}
@@ -61,9 +67,9 @@ export const SidebarWorkspaceMenuHeader = observer(function SidebarWorkspaceMenu
           </span>
         }
         className={cn(
-          "h-full flex items-center opacity-0 z-20 pointer-events-none flex-shrink-0 group-hover/workspace-button:opacity-100 group-hover/workspace-button:pointer-events-auto my-auto",
+          "pointer-events-none z-20 my-auto flex h-full flex-shrink-0 items-center opacity-0 group-hover/workspace-button:pointer-events-auto group-hover/workspace-button:opacity-100",
           {
-            "opacity-100 pointer-events-auto": isMenuActive,
+            "pointer-events-auto opacity-100": isMenuActive,
           }
         )}
         customButtonClassName="grid place-items-center"
@@ -87,13 +93,13 @@ export const SidebarWorkspaceMenuHeader = observer(function SidebarWorkspaceMenu
       </CustomMenu>
       <Disclosure.Button
         as="button"
-        className="sticky top-0 z-10 group/workspace-button px-0.5 py-1.5 flex items-center justify-between gap-1 text-custom-sidebar-text-400 hover:bg-custom-sidebar-background-90 rounded text-xs font-semibold"
+        className="group/workspace-button sticky top-0 z-10 flex items-center justify-between gap-1 rounded-sm px-0.5 py-1.5 text-11 font-semibold text-placeholder hover:bg-surface-2"
         onClick={() => toggleWorkspaceMenu(!isWorkspaceMenuOpen)}
       >
         {" "}
-        <span className="flex-shrink-0 opacity-0 pointer-events-none group-hover/workspace-button:opacity-100 group-hover/workspace-button:pointer-events-auto rounded hover:bg-custom-sidebar-background-80">
+        <span className="pointer-events-none flex-shrink-0 rounded-sm opacity-0 group-hover/workspace-button:pointer-events-auto group-hover/workspace-button:opacity-100 hover:bg-layer-1">
           <ChevronRightIcon
-            className={cn("size-4 flex-shrink-0 text-custom-sidebar-text-400 transition-transform", {
+            className={cn("size-4 flex-shrink-0 text-placeholder transition-transform", {
               "rotate-90": isWorkspaceMenuOpen,
             })}
           />
diff --git a/apps/web/core/components/workspace/sidebar/workspace-menu-item.tsx b/apps/web/core/components/workspace/sidebar/workspace-menu-item.tsx
index ca0d63cb3..0199dc709 100644
--- a/apps/web/core/components/workspace/sidebar/workspace-menu-item.tsx
+++ b/apps/web/core/components/workspace/sidebar/workspace-menu-item.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import Link from "next/link";
 import { useParams, usePathname } from "next/navigation";
@@ -58,7 +64,7 @@ export const SidebarWorkspaceMenuItem = observer(function SidebarWorkspaceMenuIt
               "rotate-180": item.key === "active_cycles",
             })}
           />
-          <p className="text-sm leading-5 font-medium">{t(item.labelTranslationKey)}</p>
+          <p className="text-13 leading-5 font-medium">{t(item.labelTranslationKey)}</p>
         </div>
         <div className="flex-shrink-0">
           <UpgradeBadge />
diff --git a/apps/web/core/components/workspace/sidebar/workspace-menu-root.tsx b/apps/web/core/components/workspace/sidebar/workspace-menu-root.tsx
index 296303241..9948e3772 100644
--- a/apps/web/core/components/workspace/sidebar/workspace-menu-root.tsx
+++ b/apps/web/core/components/workspace/sidebar/workspace-menu-root.tsx
@@ -1,4 +1,10 @@
-import React, { Fragment, useState, useEffect } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { Fragment, useState, useEffect } from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
 // icons
@@ -18,8 +24,7 @@ import { AppSidebarItem } from "@/components/sidebar/sidebar-item";
 import { useAppTheme } from "@/hooks/store/use-app-theme";
 import { useWorkspace } from "@/hooks/store/use-workspace";
 import { useUser, useUserProfile } from "@/hooks/store/user";
-// plane web helpers
-import { getIsWorkspaceCreationDisabled } from "@/plane-web/helpers/instance.helper";
+import { useInstance } from "@/hooks/store/use-instance";
 // components
 import { WorkspaceLogo } from "../logo";
 import SidebarDropdownItem from "./dropdown-item";
@@ -32,12 +37,13 @@ export const WorkspaceMenuRoot = observer(function WorkspaceMenuRoot(props: Work
   const { variant } = props;
   // store hooks
   const { toggleSidebar, toggleAnySidebarDropdown } = useAppTheme();
+  const { config } = useInstance();
   const { data: currentUser } = useUser();
   const { signOut } = useUser();
   const { updateUserProfile } = useUserProfile();
   const { currentWorkspace: activeWorkspace, workspaces } = useWorkspace();
   // derived values
-  const isWorkspaceCreationEnabled = getIsWorkspaceCreationDisabled() === false;
+  const isWorkspaceCreationDisabled = config?.is_workspace_creation_disabled ?? false;
   // translation
   const { t } = useTranslation();
   // local state
@@ -71,9 +77,9 @@ export const WorkspaceMenuRoot = observer(function WorkspaceMenuRoot(props: Work
   return (
     <Menu
       as="div"
-      className={cn("relative h-full flex max-w-48 w-fit whitespace-nowrap truncate", {
+      className={cn("relative flex h-full w-fit max-w-48 truncate whitespace-nowrap", {
         "w-full justify-center text-center": variant === "sidebar",
-        "flex-grow justify-stretch text-left truncate": variant === "top-navigation",
+        "flex-grow justify-stretch truncate text-left": variant === "top-navigation",
       })}
     >
       {({ open, close }: { open: boolean; close: () => void }) => {
@@ -86,8 +92,8 @@ export const WorkspaceMenuRoot = observer(function WorkspaceMenuRoot(props: Work
           <>
             {variant === "sidebar" && (
               <Menu.Button
-                className={cn("flex w-full items-center justify-center size-8 rounded-md", {
-                  "bg-custom-sidebar-background-80": open,
+                className={cn("flex size-8 w-full items-center justify-center rounded-md", {
+                  "bg-layer-1": open,
                 })}
               >
                 <AppSidebarItem
@@ -97,7 +103,7 @@ export const WorkspaceMenuRoot = observer(function WorkspaceMenuRoot(props: Work
                       <WorkspaceLogo
                         logo={activeWorkspace?.logo_url}
                         name={activeWorkspace?.name}
-                        classNames="size-8 rounded-md border border-custom-border-200"
+                        classNames="size-8 rounded-md border border-subtle"
                       />
                     ),
                   }}
@@ -107,25 +113,23 @@ export const WorkspaceMenuRoot = observer(function WorkspaceMenuRoot(props: Work
             {variant === "top-navigation" && (
               <Menu.Button
                 className={cn(
-                  "group/menu-button flex items-center gap-1 p-1 truncate rounded text-sm font-medium text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80 focus:outline-none justify-between flex-grow",
+                  "group/menu-button flex flex-grow items-center justify-between gap-1 truncate rounded-sm p-1 text-13 font-medium text-secondary hover:bg-layer-1 focus:outline-none",
                   {
-                    "bg-custom-sidebar-background-80": open,
+                    "bg-layer-1": open,
                   }
                 )}
                 aria-label={t("aria_labels.projects_sidebar.open_workspace_switcher")}
               >
-                <div className="flex-grow flex items-center gap-2 truncate">
+                <div className="flex flex-grow items-center gap-2 truncate">
                   <WorkspaceLogo
                     logo={activeWorkspace?.logo_url}
                     name={activeWorkspace?.name}
-                    classNames="border border-custom-border-200 rounded-md size-7"
+                    classNames="border border-subtle rounded-md size-7"
                   />
-                  <h4 className="truncate text-base font-medium text-custom-text-100">
-                    {activeWorkspace?.name ?? t("loading")}
-                  </h4>
+                  <h4 className="truncate text-14 font-medium text-primary">{activeWorkspace?.name ?? t("loading")}</h4>
                 </div>
                 <ChevronDownIcon
-                  className={cn("flex-shrink-0 size-4 text-custom-sidebar-text-400 duration-300", {
+                  className={cn("size-4 flex-shrink-0 text-placeholder duration-300", {
                     "rotate-180": open,
                   })}
                 />
@@ -143,19 +147,19 @@ export const WorkspaceMenuRoot = observer(function WorkspaceMenuRoot(props: Work
               <Menu.Items as={Fragment}>
                 <div
                   className={cn(
-                    "fixed z-[21] mt-1 flex w-[19rem] origin-top-left flex-col divide-y divide-custom-border-100 rounded-md border-[0.5px] border-custom-sidebar-border-300 bg-custom-sidebar-background-100 shadow-custom-shadow-rg outline-none",
+                    "fixed z-21 mt-1 flex w-[19rem] origin-top-left flex-col divide-y divide-subtle rounded-md border-[0.5px] border-strong bg-surface-1 shadow-raised-200 outline-none",
                     {
                       "top-11 left-14": variant === "sidebar",
                       "top-10 left-4": variant === "top-navigation",
                     }
                   )}
                 >
-                  <div className="overflow-x-hidden vertical-scrollbar scrollbar-sm flex max-h-96 flex-col items-start justify-start overflow-y-scroll">
-                    <span className="rounded-md text-left px-4 sticky top-0 z-[21] h-full w-full bg-custom-sidebar-background-100 pb-1 pt-3 text-sm font-medium text-custom-text-400 truncate flex-shrink-0">
+                  <div className="vertical-scrollbar flex scrollbar-sm max-h-96 flex-col items-start justify-start overflow-x-hidden overflow-y-scroll">
+                    <span className="sticky top-0 z-21 h-full w-full flex-shrink-0 truncate rounded-md bg-surface-1 px-4 pt-3 pb-1 text-left text-13 font-medium text-placeholder">
                       {currentUser?.email}
                     </span>
                     {workspacesList ? (
-                      <div className="size-full flex flex-col items-start justify-start">
+                      <div className="flex size-full flex-col items-start justify-start">
                         {(activeWorkspace
                           ? [
                               activeWorkspace,
@@ -182,12 +186,12 @@ export const WorkspaceMenuRoot = observer(function WorkspaceMenuRoot(props: Work
                       </div>
                     )}
                   </div>
-                  <div className="w-full flex flex-col items-start justify-start gap-2 px-4 py-2 text-sm">
-                    {isWorkspaceCreationEnabled && (
+                  <div className="flex w-full flex-col items-start justify-start gap-2 px-4 py-2 text-13">
+                    {!isWorkspaceCreationDisabled && (
                       <Link href="/create-workspace" className="w-full">
                         <Menu.Item
                           as="div"
-                          className="flex items-center gap-2 rounded px-2 py-1 text-sm font-medium text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80"
+                          className="flex items-center gap-2 rounded-sm px-2 py-1 text-13 font-medium text-secondary hover:bg-layer-transparent-hover"
                         >
                           <CirclePlus className="size-4 flex-shrink-0" />
                           {t("create_workspace")}
@@ -198,7 +202,7 @@ export const WorkspaceMenuRoot = observer(function WorkspaceMenuRoot(props: Work
                     <Link href="/invitations" className="w-full" onClick={handleItemClick}>
                       <Menu.Item
                         as="div"
-                        className="flex items-center gap-2 rounded px-2 py-1 text-sm font-medium text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80"
+                        className="flex items-center gap-2 rounded-sm px-2 py-1 text-13 font-medium text-secondary hover:bg-layer-transparent-hover"
                       >
                         <Mails className="h-4 w-4 flex-shrink-0" />
                         {t("workspace_invites")}
@@ -209,7 +213,7 @@ export const WorkspaceMenuRoot = observer(function WorkspaceMenuRoot(props: Work
                       <Menu.Item
                         as="button"
                         type="button"
-                        className="flex w-full items-center gap-2 rounded px-2 py-1 text-sm font-medium text-red-600 hover:bg-custom-sidebar-background-80"
+                        className="flex w-full items-center gap-2 rounded-sm px-2 py-1 text-13 font-medium text-danger-primary hover:bg-layer-transparent-hover"
                         onClick={handleSignOut}
                       >
                         <LogOut className="size-4 flex-shrink-0" />
diff --git a/apps/web/core/components/workspace/sidebar/workspace-menu.tsx b/apps/web/core/components/workspace/sidebar/workspace-menu.tsx
index 569c74c4b..d25c59092 100644
--- a/apps/web/core/components/workspace/sidebar/workspace-menu.tsx
+++ b/apps/web/core/components/workspace/sidebar/workspace-menu.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
@@ -63,7 +69,7 @@ export const SidebarWorkspaceMenu = observer(function SidebarWorkspaceMenu() {
         leaveTo="transform scale-95 opacity-0"
       >
         {isWorkspaceMenuOpen && (
-          <Disclosure.Panel as="div" className="flex flex-col mt-0.5 gap-0.5" static>
+          <Disclosure.Panel as="div" className="mt-0.5 flex flex-col gap-0.5" static>
             {SIDEBAR_WORKSPACE_MENU_ITEMS.map((item) => (
               <SidebarWorkspaceMenuItem key={item.key} item={item} />
             ))}
diff --git a/apps/web/core/components/workspace/views/default-view-list-item.tsx b/apps/web/core/components/workspace/views/default-view-list-item.tsx
index fdb1377df..cb5834215 100644
--- a/apps/web/core/components/workspace/views/default-view-list-item.tsx
+++ b/apps/web/core/components/workspace/views/default-view-list-item.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import Link from "next/link";
 import { useParams } from "next/navigation";
@@ -14,13 +20,13 @@ export const GlobalDefaultViewListItem = observer(function GlobalDefaultViewList
   const { t } = useTranslation();
 
   return (
-    <div className="group border-b border-custom-border-200 hover:bg-custom-background-90">
+    <div className="group border-b border-subtle hover:bg-surface-2">
       <Link href={`/${workspaceSlug}/workspace-views/${view.key}`}>
-        <div className="relative flex w-full h-[52px] items-center justify-between rounded px-5 py-4">
+        <div className="relative flex h-[52px] w-full items-center justify-between rounded-sm px-5 py-4">
           <div className="flex w-full items-center justify-between">
             <div className="flex items-center gap-4">
               <div className="flex flex-col">
-                <p className="truncate text-sm font-medium leading-4">{truncateText(t(view.i18n_label), 75)}</p>
+                <p className="truncate text-13 leading-4 font-medium">{truncateText(t(view.i18n_label), 75)}</p>
               </div>
             </div>
           </div>
diff --git a/apps/web/core/components/workspace/views/default-view-quick-action.tsx b/apps/web/core/components/workspace/views/default-view-quick-action.tsx
index daa396994..a37744dbf 100644
--- a/apps/web/core/components/workspace/views/default-view-quick-action.tsx
+++ b/apps/web/core/components/workspace/views/default-view-quick-action.tsx
@@ -1,7 +1,14 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
-import { ExternalLink, LinkIcon } from "lucide-react";
-// plane imports
+
 import { useTranslation } from "@plane/i18n";
+// plane imports
+import { LinkIcon, NewTabIcon } from "@plane/propel/icons";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 // ui
 import type { TStaticViewTypes } from "@plane/types";
@@ -38,7 +45,7 @@ export const DefaultWorkspaceViewQuickActions = observer(function DefaultWorkspa
       key: "open-new-tab",
       action: handleOpenInNewTab,
       title: t("open_in_new_tab"),
-      icon: ExternalLink,
+      icon: NewTabIcon,
     },
     {
       key: "copy-link",
@@ -54,7 +61,7 @@ export const DefaultWorkspaceViewQuickActions = observer(function DefaultWorkspa
         ellipsis
         placement="bottom-end"
         closeOnSelect
-        buttonClassName="flex-shrink-0 flex items-center justify-center size-[26px] bg-custom-background-80/70 rounded"
+        buttonClassName="flex-shrink-0 flex items-center justify-center size-[26px] bg-layer-1/70 rounded-sm"
       >
         {MENU_ITEMS.map((item) => {
           if (item.shouldRender === false) return null;
@@ -67,7 +74,7 @@ export const DefaultWorkspaceViewQuickActions = observer(function DefaultWorkspa
               className={cn(
                 "flex items-center gap-2",
                 {
-                  "text-custom-text-400": item.disabled,
+                  "text-placeholder": item.disabled,
                 },
                 item.className
               )}
@@ -78,8 +85,8 @@ export const DefaultWorkspaceViewQuickActions = observer(function DefaultWorkspa
                 <h5>{t(item.title || "")}</h5>
                 {item.description && (
                   <p
-                    className={cn("text-custom-text-300 whitespace-pre-line", {
-                      "text-custom-text-400": item.disabled,
+                    className={cn("whitespace-pre-line text-tertiary", {
+                      "text-placeholder": item.disabled,
                     })}
                   >
                     {item.description}
diff --git a/apps/web/core/components/workspace/views/delete-view-modal.tsx b/apps/web/core/components/workspace/views/delete-view-modal.tsx
index 744807a0e..365906206 100644
--- a/apps/web/core/components/workspace/views/delete-view-modal.tsx
+++ b/apps/web/core/components/workspace/views/delete-view-modal.tsx
@@ -1,16 +1,18 @@
-import React, { useState } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
-// types
-import { GLOBAL_VIEW_TRACKER_EVENTS } from "@plane/constants";
+// Plane Imports
 import { useTranslation } from "@plane/i18n";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { IWorkspaceView } from "@plane/types";
-// ui
 import { AlertModalCore } from "@plane/ui";
-// constants
 // hooks
-import { captureError, captureSuccess } from "@/helpers/event-tracker.helper";
 import { useGlobalView } from "@/hooks/store/use-global-view";
 
 type Props = {
@@ -32,37 +34,20 @@ export const DeleteGlobalViewModal = observer(function DeleteGlobalViewModal(pro
 
   const handleDeletion = async () => {
     if (!workspaceSlug) return;
-
     setIsDeleteLoading(true);
 
-    await deleteGlobalView(workspaceSlug.toString(), data.id)
-      .then(() => {
-        captureSuccess({
-          eventName: GLOBAL_VIEW_TRACKER_EVENTS.delete,
-          payload: {
-            view_id: data.id,
-          },
-        });
-      })
-      .catch((error: any) => {
-        captureError({
-          eventName: GLOBAL_VIEW_TRACKER_EVENTS.delete,
-          payload: {
-            view_id: data.id,
-          },
-          error: error,
-        });
-        setToast({
-          type: TOAST_TYPE.ERROR,
-          title: "Error!",
-          message: error?.error ?? "Something went wrong while deleting the view. Please try again.",
-        });
-      })
-      .finally(() => {
-        setIsDeleteLoading(false);
-        handleClose();
+    try {
+      await deleteGlobalView(workspaceSlug.toString(), data.id);
+    } catch (_error) {
+      setToast({
+        type: TOAST_TYPE.ERROR,
+        title: "Error!",
+        message: "Failed to delete the view. Please try again.",
       });
+    }
 
+    setIsDeleteLoading(false);
+    handleClose();
     // remove filters from local storage
     localStorage.removeItem(`global_view_filters/${data.id}`);
   };
diff --git a/apps/web/core/components/workspace/views/form.tsx b/apps/web/core/components/workspace/views/form.tsx
index 87d307896..2bbd88672 100644
--- a/apps/web/core/components/workspace/views/form.tsx
+++ b/apps/web/core/components/workspace/views/form.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import { Controller, useForm } from "react-hook-form";
 // plane imports
@@ -71,9 +77,7 @@ export const WorkspaceViewForm = observer(function WorkspaceViewForm(props: Prop
   return (
     <form onSubmit={handleSubmit(handleCreateUpdateView)}>
       <div className="space-y-5 p-5">
-        <h3 className="text-xl font-medium text-custom-text-200">
-          {data ? t("view.update.label") : t("view.create.label")}
-        </h3>
+        <h3 className="text-18 font-medium text-secondary">{data ? t("view.update.label") : t("view.create.label")}</h3>
         <div className="space-y-3">
           <div className="space-y-1">
             <Controller
@@ -96,11 +100,11 @@ export const WorkspaceViewForm = observer(function WorkspaceViewForm(props: Prop
                   ref={ref}
                   hasError={Boolean(errors.name)}
                   placeholder={t("common.title")}
-                  className="w-full text-base"
+                  className="w-full text-14"
                 />
               )}
             />
-            <span className="text-xs text-red-500">{errors?.name?.message}</span>
+            <span className="text-11 text-danger-primary">{errors?.name?.message}</span>
           </div>
           <div>
             <Controller
@@ -113,7 +117,7 @@ export const WorkspaceViewForm = observer(function WorkspaceViewForm(props: Prop
                   value={value}
                   placeholder={t("common.description")}
                   onChange={onChange}
-                  className="w-full text-base resize-none min-h-24"
+                  className="min-h-24 w-full resize-none text-14"
                   hasError={Boolean(errors?.description)}
                 />
               )}
@@ -181,11 +185,11 @@ export const WorkspaceViewForm = observer(function WorkspaceViewForm(props: Prop
           </div>
         </div>
       </div>
-      <div className="px-5 py-4 flex items-center justify-end gap-2 border-t-[0.5px] border-custom-border-200">
-        <Button variant="neutral-primary" size="sm" onClick={handleClose}>
+      <div className="flex items-center justify-end gap-2 border-t-[0.5px] border-subtle px-5 py-4">
+        <Button variant="secondary" onClick={handleClose}>
           {t("common.cancel")}
         </Button>
-        <Button variant="primary" size="sm" type="submit" loading={isSubmitting}>
+        <Button variant="primary" type="submit" loading={isSubmitting}>
           {data
             ? isSubmitting
               ? t("common.updating")
diff --git a/apps/web/core/components/workspace/views/header.tsx b/apps/web/core/components/workspace/views/header.tsx
index 155744f22..f1a92a94f 100644
--- a/apps/web/core/components/workspace/views/header.tsx
+++ b/apps/web/core/components/workspace/views/header.tsx
@@ -1,19 +1,18 @@
-import React, { useEffect, useRef, useState } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useEffect, useRef, useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
-import { Plus } from "lucide-react";
+
 // plane imports
-import {
-  DEFAULT_GLOBAL_VIEWS_LIST,
-  EUserPermissions,
-  EUserPermissionsLevel,
-  GLOBAL_VIEW_TRACKER_ELEMENTS,
-  GLOBAL_VIEW_TRACKER_EVENTS,
-} from "@plane/constants";
+import { DEFAULT_GLOBAL_VIEWS_LIST, EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import { PlusIcon } from "@plane/propel/icons";
 import type { TStaticViewTypes } from "@plane/types";
 import { Header, EHeaderVariant } from "@plane/ui";
-// helpers
-import { captureSuccess } from "@/helpers/event-tracker.helper";
 // hooks
 import { useGlobalView } from "@/hooks/store/use-global-view";
 import { useUserPermissions } from "@/hooks/store/user";
@@ -75,15 +74,6 @@ export const GlobalViewsHeader = observer(function GlobalViewsHeader() {
   // bring the active view to the centre of the header
   useEffect(() => {
     if (globalViewId && currentWorkspaceViews) {
-      captureSuccess({
-        eventName: GLOBAL_VIEW_TRACKER_EVENTS.open,
-        payload: {
-          view_id: globalViewId,
-          view_type: ["all-issues", "assigned", "created", "subscribed"].includes(globalViewId.toString())
-            ? "Default"
-            : "Custom",
-        },
-      });
       const activeTabElement = document.querySelector(`#global-view-${globalViewId.toString()}`);
       if (activeTabElement && containerRef.current) {
         const containerRect = containerRef.current.getBoundingClientRect();
@@ -100,11 +90,11 @@ export const GlobalViewsHeader = observer(function GlobalViewsHeader() {
   );
 
   return (
-    <Header variant={EHeaderVariant.SECONDARY} className="min-h-[44px] z-[12] bg-custom-background-100">
+    <Header variant={EHeaderVariant.SECONDARY} className="z-[12] min-h-[44px] bg-surface-1">
       <CreateUpdateWorkspaceViewModal isOpen={createViewModal} onClose={() => setCreateViewModal(false)} />
       <div
         ref={containerRef}
-        className="flex h-full w-full items-center overflow-y-hidden overflow-x-auto horizontal-scrollbar scrollbar-sm"
+        className="horizontal-scrollbar flex scrollbar-sm h-full w-full items-center overflow-x-auto overflow-y-hidden"
       >
         {DEFAULT_GLOBAL_VIEWS_LIST.map((tab, index) => (
           <DefaultViewTab key={`${tab.key}-${index}`} tab={tab} />
@@ -118,11 +108,10 @@ export const GlobalViewsHeader = observer(function GlobalViewsHeader() {
       {isAuthorizedUser ? (
         <button
           type="button"
-          data-ph-element={GLOBAL_VIEW_TRACKER_ELEMENTS.RIGHT_HEADER_ADD_BUTTON}
-          className="sticky -right-4 flex flex-shrink-0 items-center justify-center border-transparent bg-custom-background-100 py-3 hover:border-custom-border-200 hover:text-custom-text-400"
+          className="sticky -right-4 flex flex-shrink-0 items-center justify-center border-transparent bg-surface-1 py-3 hover:border-subtle hover:text-placeholder"
           onClick={() => setCreateViewModal(true)}
         >
-          <Plus className="h-4 w-4 text-custom-primary-200" />
+          <PlusIcon className="h-4 w-4 text-accent-secondary" />
         </button>
       ) : (
         <></>
diff --git a/apps/web/core/components/workspace/views/modal.tsx b/apps/web/core/components/workspace/views/modal.tsx
index 71483d712..8f9be46fa 100644
--- a/apps/web/core/components/workspace/views/modal.tsx
+++ b/apps/web/core/components/workspace/views/modal.tsx
@@ -1,14 +1,16 @@
-import React from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // plane imports
-import { GLOBAL_VIEW_TRACKER_EVENTS } from "@plane/constants";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { IWorkspaceView } from "@plane/types";
 import { EIssuesStoreType } from "@plane/types";
 import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
-// helpers
-import { captureError, captureSuccess } from "@/helpers/event-tracker.helper";
 // hooks
 import { useGlobalView } from "@/hooks/store/use-global-view";
 import { useWorkItemFilters } from "@/hooks/store/work-item-filters/use-work-item-filters";
@@ -40,83 +42,57 @@ export const CreateUpdateWorkspaceViewModal = observer(function CreateUpdateWork
   const handleCreateView = async (payload: Partial<IWorkspaceView>) => {
     if (!workspaceSlug) return;
 
-    const payloadData: Partial<IWorkspaceView> = {
-      ...payload,
-      rich_filters: {
-        ...payload?.rich_filters,
-      },
-    };
-
-    await createGlobalView(workspaceSlug, payloadData)
-      .then((res) => {
-        captureSuccess({
-          eventName: GLOBAL_VIEW_TRACKER_EVENTS.create,
-          payload: {
-            id: res.id,
-          },
-        });
-        setToast({
-          type: TOAST_TYPE.SUCCESS,
-          title: "Success!",
-          message: "View created successfully.",
-        });
-
-        router.push(`/${workspaceSlug}/workspace-views/${res.id}`);
-        handleClose();
-      })
-      .catch(() => {
-        captureError({
-          eventName: GLOBAL_VIEW_TRACKER_EVENTS.create,
-        });
-        setToast({
-          type: TOAST_TYPE.ERROR,
-          title: "Error!",
-          message: "View could not be created. Please try again.",
-        });
+    try {
+      const payloadData: Partial<IWorkspaceView> = {
+        ...payload,
+        rich_filters: {
+          ...payload?.rich_filters,
+        },
+      };
+      const res = await createGlobalView(workspaceSlug, payloadData);
+      setToast({
+        type: TOAST_TYPE.SUCCESS,
+        title: "Success!",
+        message: "View created successfully.",
       });
+      router.push(`/${workspaceSlug}/workspace-views/${res.id}`);
+      handleClose();
+    } catch (_error) {
+      setToast({
+        type: TOAST_TYPE.ERROR,
+        title: "Error!",
+        message: "View could not be created. Please try again.",
+      });
+    }
   };
 
   const handleUpdateView = async (payload: Partial<IWorkspaceView>) => {
     if (!workspaceSlug || !data) return;
 
-    const payloadData: Partial<IWorkspaceView> = {
-      ...payload,
-      query: {
-        ...payload?.rich_filters,
-      },
-    };
-
-    await updateGlobalView(workspaceSlug, data.id, payloadData)
-      .then((res) => {
-        if (res) {
-          resetExpression(EIssuesStoreType.GLOBAL, data.id, res.rich_filters);
-          captureSuccess({
-            eventName: GLOBAL_VIEW_TRACKER_EVENTS.update,
-            payload: {
-              id: res.id,
-            },
-          });
-          setToast({
-            type: TOAST_TYPE.SUCCESS,
-            title: "Success!",
-            message: "View updated successfully.",
-          });
-          handleClose();
-        }
-      })
-      .catch(() => {
-        captureError({
-          eventName: GLOBAL_VIEW_TRACKER_EVENTS.update,
-          payload: {
-            id: data.id,
-          },
-        });
+    try {
+      const payloadData: Partial<IWorkspaceView> = {
+        ...payload,
+        query: {
+          ...payload?.rich_filters,
+        },
+      };
+      const res = await updateGlobalView(workspaceSlug, data.id, payloadData);
+      if (res) {
+        resetExpression(EIssuesStoreType.GLOBAL, data.id, res.rich_filters);
         setToast({
-          type: TOAST_TYPE.ERROR,
-          title: "Error!",
-          message: "View could not be updated. Please try again.",
+          type: TOAST_TYPE.SUCCESS,
+          title: "Success!",
+          message: "View updated successfully.",
         });
+        handleClose();
+      }
+    } catch (_error) {
+      setToast({
+        type: TOAST_TYPE.ERROR,
+        title: "Error!",
+        message: "View could not be updated. Please try again.",
       });
+    }
   };
 
   const handleFormSubmit = async (formData: Partial<IWorkspaceView>) => {
diff --git a/apps/web/core/components/workspace/views/quick-action.tsx b/apps/web/core/components/workspace/views/quick-action.tsx
index b5adac064..6e24f79cf 100644
--- a/apps/web/core/components/workspace/views/quick-action.tsx
+++ b/apps/web/core/components/workspace/views/quick-action.tsx
@@ -1,17 +1,21 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useState } from "react";
 import { observer } from "mobx-react";
 // plane imports
-import { EUserPermissions, EUserPermissionsLevel, GLOBAL_VIEW_TRACKER_ELEMENTS } from "@plane/constants";
+import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { IWorkspaceView } from "@plane/types";
-import type { TContextMenuItem } from "@plane/ui";
 import { CustomMenu } from "@plane/ui";
 import { copyUrlToClipboard, cn } from "@plane/utils";
 // helpers
-import { captureClick } from "@/helpers/event-tracker.helper";
+import { useViewMenuItems } from "@/components/common/quick-actions-helper";
 // hooks
 import { useUser, useUserPermissions } from "@/hooks/store/user";
-import { useViewMenuItems } from "@/plane-web/components/views/helper";
 // local imports
 import { DeleteGlobalViewModal } from "./delete-view-modal";
 import { CreateUpdateWorkspaceViewModal } from "./modal";
@@ -34,26 +38,26 @@ export const WorkspaceViewQuickActions = observer(function WorkspaceViewQuickAct
   const isAdmin = allowPermissions([EUserPermissions.ADMIN], EUserPermissionsLevel.WORKSPACE);
 
   const viewLink = `${workspaceSlug}/workspace-views/${view.id}`;
-  const handleCopyText = () =>
-    copyUrlToClipboard(viewLink).then(() => {
-      setToast({
-        type: TOAST_TYPE.SUCCESS,
-        title: "Link Copied!",
-        message: "View link copied to clipboard.",
-      });
+  const handleCopyText = async () => {
+    await copyUrlToClipboard(viewLink);
+    setToast({
+      type: TOAST_TYPE.SUCCESS,
+      title: "Link Copied!",
+      message: "View link copied to clipboard.",
     });
+  };
+
   const handleOpenInNewTab = () => window.open(`/${viewLink}`, "_blank");
 
-  const MENU_ITEMS: TContextMenuItem[] = useViewMenuItems({
+  const MENU_ITEMS = useViewMenuItems({
     isOwner,
     isAdmin,
-    setDeleteViewModal,
-    setCreateUpdateViewModal: setUpdateViewModal,
+    handleDelete: () => setDeleteViewModal(true),
+    handleEdit: () => setUpdateViewModal(true),
     handleOpenInNewTab,
-    handleCopyText,
-    isLocked: view.is_locked,
+    handleCopyLink: handleCopyText,
     workspaceSlug,
-    viewId: view.id,
+    view,
   });
 
   return (
@@ -64,23 +68,20 @@ export const WorkspaceViewQuickActions = observer(function WorkspaceViewQuickAct
         ellipsis
         placement="bottom-end"
         closeOnSelect
-        buttonClassName="flex-shrink-0 flex items-center justify-center size-[26px] bg-custom-background-80/70 rounded"
+        buttonClassName="flex-shrink-0 flex items-center justify-center size-[26px] bg-layer-1/70 rounded-sm"
       >
-        {MENU_ITEMS.map((item) => {
+        {MENU_ITEMS.items.map((item) => {
           if (item.shouldRender === false) return null;
           return (
             <CustomMenu.MenuItem
               key={item.key}
               onClick={() => {
-                captureClick({
-                  elementName: GLOBAL_VIEW_TRACKER_ELEMENTS.QUICK_ACTIONS,
-                });
                 item.action();
               }}
               className={cn(
                 "flex items-center gap-2",
                 {
-                  "text-custom-text-400": item.disabled,
+                  "text-placeholder": item.disabled,
                 },
                 item.className
               )}
@@ -91,8 +92,8 @@ export const WorkspaceViewQuickActions = observer(function WorkspaceViewQuickAct
                 <h5>{item.title}</h5>
                 {item.description && (
                   <p
-                    className={cn("text-custom-text-300 whitespace-pre-line", {
-                      "text-custom-text-400": item.disabled,
+                    className={cn("whitespace-pre-line text-tertiary", {
+                      "text-placeholder": item.disabled,
                     })}
                   >
                     {item.description}
diff --git a/apps/web/core/components/workspace/views/view-list-item.tsx b/apps/web/core/components/workspace/views/view-list-item.tsx
index eecfce8de..8c71a05bf 100644
--- a/apps/web/core/components/workspace/views/view-list-item.tsx
+++ b/apps/web/core/components/workspace/views/view-list-item.tsx
@@ -1,14 +1,17 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useState } from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
 import { useParams } from "next/navigation";
-import { Pencil, Trash2 } from "lucide-react";
 // plane imports
-import { GLOBAL_VIEW_TRACKER_ELEMENTS } from "@plane/constants";
+import { EditIcon, TrashIcon } from "@plane/propel/icons";
 import { CustomMenu } from "@plane/ui";
 import { truncateText } from "@plane/utils";
-// helpers
-import { captureClick } from "@/helpers/event-tracker.helper";
 // hooks
 import { useGlobalView } from "@/hooks/store/use-global-view";
 // local imports
@@ -35,14 +38,14 @@ export const GlobalViewListItem = observer(function GlobalViewListItem(props: Pr
     <>
       <CreateUpdateWorkspaceViewModal data={view} isOpen={updateViewModal} onClose={() => setUpdateViewModal(false)} />
       <DeleteGlobalViewModal data={view} isOpen={deleteViewModal} onClose={() => setDeleteViewModal(false)} />
-      <div className="group border-b border-custom-border-200 hover:bg-custom-background-90">
+      <div className="group border-b border-subtle hover:bg-surface-2">
         <Link href={`/${workspaceSlug}/workspace-views/${view.id}`}>
-          <div className="relative flex h-[52px] w-full items-center justify-between rounded p-4">
+          <div className="relative flex h-[52px] w-full items-center justify-between rounded-sm p-4">
             <div className="flex w-full items-center justify-between">
               <div className="flex items-center gap-4">
                 <div className="flex flex-col">
-                  <p className="truncate text-sm font-medium leading-4">{truncateText(view.name, 75)}</p>
-                  {view?.description && <p className="text-xs text-custom-text-200">{view.description}</p>}
+                  <p className="truncate text-13 leading-4 font-medium">{truncateText(view.name, 75)}</p>
+                  {view?.description && <p className="text-11 text-secondary">{view.description}</p>}
                 </div>
               </div>
               <div className="ml-2 flex flex-shrink-0">
@@ -50,27 +53,21 @@ export const GlobalViewListItem = observer(function GlobalViewListItem(props: Pr
                   <CustomMenu ellipsis>
                     <CustomMenu.MenuItem
                       onClick={() => {
-                        captureClick({
-                          elementName: GLOBAL_VIEW_TRACKER_ELEMENTS.LIST_ITEM,
-                        });
                         setUpdateViewModal(true);
                       }}
                     >
                       <span className="flex items-center justify-start gap-2">
-                        <Pencil size={14} strokeWidth={2} />
+                        <EditIcon width={14} height={14} strokeWidth={2} />
                         <span>Edit View</span>
                       </span>
                     </CustomMenu.MenuItem>
                     <CustomMenu.MenuItem
                       onClick={() => {
-                        captureClick({
-                          elementName: GLOBAL_VIEW_TRACKER_ELEMENTS.LIST_ITEM,
-                        });
                         setDeleteViewModal(true);
                       }}
                     >
                       <span className="flex items-center justify-start gap-2">
-                        <Trash2 size={14} strokeWidth={2} />
+                        <TrashIcon width={14} height={14} strokeWidth={2} />
                         <span>Delete View</span>
                       </span>
                     </CustomMenu.MenuItem>
diff --git a/apps/web/core/components/workspace/views/views-list.tsx b/apps/web/core/components/workspace/views/views-list.tsx
index 6adb4e428..34d3c6b80 100644
--- a/apps/web/core/components/workspace/views/views-list.tsx
+++ b/apps/web/core/components/workspace/views/views-list.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 import useSWR from "swr";
diff --git a/apps/web/ce/constants/ai.ts b/apps/web/core/constants/ai.ts
similarity index 56%
rename from apps/web/ce/constants/ai.ts
rename to apps/web/core/constants/ai.ts
index c5c1b04fa..7c670e311 100644
--- a/apps/web/ce/constants/ai.ts
+++ b/apps/web/core/constants/ai.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export enum AI_EDITOR_TASKS {
   ASK_ANYTHING = "ASK_ANYTHING",
 }
diff --git a/apps/web/core/constants/calendar.ts b/apps/web/core/constants/calendar.ts
index 2fca3539d..86d1d6257 100644
--- a/apps/web/core/constants/calendar.ts
+++ b/apps/web/core/constants/calendar.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { TCalendarLayouts } from "@plane/types";
 import { EStartOfTheWeek } from "@plane/types";
 
diff --git a/apps/web/core/constants/editor.ts b/apps/web/core/constants/editor.ts
index dc6d70f29..5cd8b929c 100644
--- a/apps/web/core/constants/editor.ts
+++ b/apps/web/core/constants/editor.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { Styles } from "@react-pdf/renderer";
 import { StyleSheet } from "@react-pdf/renderer";
 import type { LucideIcon } from "lucide-react";
diff --git a/apps/web/core/constants/fetch-keys.ts b/apps/web/core/constants/fetch-keys.ts
index ab7a6d693..abcbcf2bf 100644
--- a/apps/web/core/constants/fetch-keys.ts
+++ b/apps/web/core/constants/fetch-keys.ts
@@ -1,4 +1,10 @@
-import type { IJiraMetadata } from "@plane/types";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { EUserPermissions, IJiraMetadata } from "@plane/types";
 
 const paramsToKey = (params: any) => {
   const {
@@ -70,6 +76,9 @@ export const WORKSPACE_INVITATION = (invitationId: string) => `WORKSPACE_INVITAT
 export const WORKSPACE_MEMBER_ME_INFORMATION = (workspaceSlug: string) =>
   `WORKSPACE_MEMBER_ME_INFORMATION_${workspaceSlug.toUpperCase()}`;
 
+export const WORKSPACE_MEMBER_ACTIVITY = (workspaceSlug: string) =>
+  `WORKSPACE_MEMBER_ACTIVITY_${workspaceSlug.toUpperCase()}`;
+
 export const WORKSPACE_PROJECTS_ROLES_INFORMATION = (workspaceSlug: string) =>
   `WORKSPACE_PROJECTS_ROLES_INFORMATION_${workspaceSlug.toUpperCase()}`;
 
@@ -80,6 +89,9 @@ export const WORKSPACE_STATES = (workspaceSlug: string) => `WORKSPACE_STATES_${w
 export const WORKSPACE_SIDEBAR_PREFERENCES = (workspaceSlug: string) =>
   `WORKSPACE_SIDEBAR_PREFERENCES_${workspaceSlug.toUpperCase()}`;
 
+export const WORKSPACE_PROJECT_NAVIGATION_PREFERENCES = (workspaceSlug: string) =>
+  `WORKSPACE_PROJECT_NAVIGATION_PREFERENCES_${workspaceSlug.toUpperCase()}`;
+
 export const PROJECT_GITHUB_REPOSITORY = (projectId: string) => `PROJECT_GITHUB_REPOSITORY_${projectId.toUpperCase()}`;
 
 // cycles
@@ -154,29 +166,41 @@ export const PROJECT_DETAILS = (workspaceSlug: string, projectId: string) =>
 export const PROJECT_ME_INFORMATION = (workspaceSlug: string, projectId: string) =>
   `PROJECT_ME_INFORMATION_${projectId.toString().toUpperCase()}`;
 
-export const PROJECT_LABELS = (workspaceSlug: string, projectId: string) =>
-  `PROJECT_LABELS_${projectId.toString().toUpperCase()}`;
+export const PROJECT_LABELS = (projectId: string, projectRole: EUserPermissions | undefined) =>
+  `PROJECT_LABELS_${projectId.toString().toUpperCase()}_${projectRole}`;
 
-export const PROJECT_MEMBERS = (workspaceSlug: string, projectId: string) =>
-  `PROJECT_MEMBERS_${projectId.toString().toUpperCase()}`;
+export const PROJECT_MEMBERS = (projectId: string, projectRole: EUserPermissions | undefined) =>
+  `PROJECT_MEMBERS_${projectId.toString().toUpperCase()}_${projectRole}`;
 
-export const PROJECT_STATES = (workspaceSlug: string, projectId: string) =>
-  `PROJECT_STATES_${projectId.toString().toUpperCase()}`;
+export const PROJECT_STATES = (projectId: string, projectRole: EUserPermissions | undefined) =>
+  `PROJECT_STATES_${projectId.toString().toUpperCase()}_${projectRole}`;
 
-export const PROJECT_INTAKE_STATE = (workspaceSlug: string, projectId: string) =>
-  `PROJECT_INTAKE_STATE_${projectId.toString().toUpperCase()}`;
+export const PROJECT_INTAKE_STATE = (projectId: string, projectRole: EUserPermissions | undefined) =>
+  `PROJECT_INTAKE_STATE_${projectId.toString().toUpperCase()}_${projectRole}`;
 
-export const PROJECT_ESTIMATES = (workspaceSlug: string, projectId: string) =>
-  `PROJECT_ESTIMATES_${projectId.toString().toUpperCase()}`;
+export const PROJECT_ESTIMATES = (projectId: string, projectRole: EUserPermissions | undefined) =>
+  `PROJECT_ESTIMATES_${projectId.toString().toUpperCase()}_${projectRole}`;
 
-export const PROJECT_ALL_CYCLES = (workspaceSlug: string, projectId: string) =>
-  `PROJECT_ALL_CYCLES_${projectId.toString().toUpperCase()}`;
+export const PROJECT_ALL_CYCLES = (projectId: string, projectRole: EUserPermissions | undefined) =>
+  `PROJECT_ALL_CYCLES_${projectId.toString().toUpperCase()}_${projectRole}`;
 
-export const PROJECT_MODULES = (workspaceSlug: string, projectId: string) =>
-  `PROJECT_MODULES_${projectId.toString().toUpperCase()}`;
+export const PROJECT_MODULES = (projectId: string, projectRole: EUserPermissions | undefined) =>
+  `PROJECT_MODULES_${projectId.toString().toUpperCase()}_${projectRole}`;
 
-export const PROJECT_VIEWS = (workspaceSlug: string, projectId: string) =>
-  `PROJECT_VIEWS_${projectId.toString().toUpperCase()}`;
+export const PROJECT_VIEWS = (projectId: string, projectRole: EUserPermissions | undefined) =>
+  `PROJECT_VIEWS_${projectId.toString().toUpperCase()}_${projectRole}`;
 
-export const PROJECT_MEMBER_PREFERENCES = (workspaceSlug: string, projectId: string) =>
-  `PROJECT_MEMBER_PREFERENCES_${projectId.toString().toUpperCase()}`;
+export const PROJECT_MEMBER_PREFERENCES = (projectId: string, projectRole: EUserPermissions | undefined) =>
+  `PROJECT_MEMBER_PREFERENCES_${projectId.toString().toUpperCase()}_${projectRole}`;
+
+export const PROJECT_WORKFLOWS = (projectId: string, projectRole: EUserPermissions | undefined) =>
+  `PROJECT_WORKFLOWS_${projectId.toString().toUpperCase()}_${projectRole}`;
+
+export const EPICS_PROPERTIES_AND_OPTIONS = (projectId: string, projectRole: EUserPermissions | undefined) =>
+  `EPICS_PROPERTIES_AND_OPTIONS_${projectId.toString().toUpperCase()}_${projectRole}`;
+
+export const WORK_ITEM_TYPES_PROPERTIES_AND_OPTIONS = (projectId: string, projectRole: EUserPermissions | undefined) =>
+  `WORK_ITEM_TYPES_PROPERTIES_AND_OPTIONS_${projectId.toString().toUpperCase()}_${projectRole}`;
+
+export const PROJECT_MILESTONES = (projectId: string, projectRole: EUserPermissions | undefined) =>
+  `PROJECT_MILESTONES_${projectId.toString().toUpperCase()}_${projectRole}`;
diff --git a/apps/web/core/constants/gantt-chart.ts b/apps/web/core/constants/gantt-chart.ts
new file mode 100644
index 000000000..708755f54
--- /dev/null
+++ b/apps/web/core/constants/gantt-chart.ts
@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { TIssueRelationTypes } from "../../ce/types";
+
+export const REVERSE_RELATIONS: { [key in TIssueRelationTypes]: TIssueRelationTypes } = {
+  blocked_by: "blocking",
+  blocking: "blocked_by",
+  relates_to: "relates_to",
+  duplicate: "duplicate",
+};
diff --git a/apps/web/core/constants/plans.tsx b/apps/web/core/constants/plans.tsx
index 5277bda04..a51afb5d1 100644
--- a/apps/web/core/constants/plans.tsx
+++ b/apps/web/core/constants/plans.tsx
@@ -1,5 +1,10 @@
-import { Mail, MessageCircle } from "lucide-react";
-import { DiscordIcon } from "@plane/propel/icons";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { Mail, MessageCircle, MessageSquare } from "lucide-react";
 import { EProductSubscriptionEnum } from "@plane/types";
 // plane imports
 import { cn } from "@plane/utils";
@@ -45,15 +50,15 @@ type PlanePlans = {
   planComparison: TPlansComparisonDetails[];
 };
 
-function RiDiscordFill({ className }: { className?: string }) {
-  return <DiscordIcon className={cn(className, "size-5 text-custom-text-200")} />;
+function ForumIcon({ className }: { className?: string }) {
+  return <MessageSquare className={cn(className, "size-5 text-secondary")} />;
 }
 
 export function ComingSoonBadge({ className }: { className?: string }) {
   return (
     <span
       className={cn(
-        "bg-[#3f76ff] text-white font-semibold text-[8px] py-0.5 px-1.5 w-fit whitespace-nowrap rounded",
+        "w-fit rounded-sm bg-accent-primary px-1.5 py-0.5 text-9 font-semibold whitespace-nowrap text-on-color",
         className
       )}
     >
@@ -161,13 +166,13 @@ export const PLANS_COMPARISON_LIST: TPlansComparisonDetails[] = [
           one: "Limited props",
           pro: "All props",
           business: (
-            <span className="flex flex-col items-end lg:items-center gap-1">
+            <span className="flex flex-col items-end gap-1 lg:items-center">
               <ComingSoonBadge />
               Work item transfers and conversions
             </span>
           ),
           enterprise: (
-            <span className="flex flex-col items-end lg:items-center gap-1">
+            <span className="flex flex-col items-end gap-1 lg:items-center">
               <ComingSoonBadge />
               Work item transfers and conversions
             </span>
@@ -625,7 +630,7 @@ export const PLANS_COMPARISON_LIST: TPlansComparisonDetails[] = [
       //     one: "Basic text search",
       //     pro: (
       //       <span className="flex flex-col items-end lg:items-center gap-1">
-      //         <span className="bg-[#3f76ff] text-white font-semibold text-[8px] p-0.5 w-fit whitespace-nowrap rounded-sm">
+      //         <span className="bg-[#3f76ff] text-on-color font-semibold text-9 p-0.5 w-fit whitespace-nowrap rounded-xs">
       //           COMING SOON
       //         </span>
       //         Operator capsules from text or PQL
@@ -633,7 +638,7 @@ export const PLANS_COMPARISON_LIST: TPlansComparisonDetails[] = [
       //     ),
       //     business: (
       //       <span className="flex flex-col items-end lg:items-center gap-1">
-      //         <span className="bg-[#3f76ff] text-white font-semibold text-[8px] p-0.5 w-fit whitespace-nowrap rounded-sm">
+      //         <span className="bg-[#3f76ff] text-on-color font-semibold text-9 p-0.5 w-fit whitespace-nowrap rounded-xs">
       //           COMING SOON
       //         </span>
       //         Operator capsules from text or PQL
@@ -641,7 +646,7 @@ export const PLANS_COMPARISON_LIST: TPlansComparisonDetails[] = [
       //     ),
       //     enterprise: (
       //       <span className="flex flex-col items-end lg:items-center gap-1">
-      //         <span className="bg-[#3f76ff] text-white font-semibold text-[8px] p-0.5 w-fit whitespace-nowrap rounded-sm">
+      //         <span className="bg-[#3f76ff] text-on-color font-semibold text-9 p-0.5 w-fit whitespace-nowrap rounded-xs">
       //           COMING SOON
       //         </span>
       //         Operator capsules from text or PQL
@@ -1206,20 +1211,20 @@ export const PLANS_COMPARISON_LIST: TPlansComparisonDetails[] = [
         cloud: {
           free: (
             <>
-              <RiDiscordFill className="size-4" />
+              <ForumIcon className="size-4" />
             </>
           ),
           one: (
             <div className="flex items-center gap-1">
-              <Mail className="flex-shrink-0 size-4" />
-              <RiDiscordFill className="flex-shrink-0 size-4" />
+              <Mail className="size-4 flex-shrink-0" />
+              <ForumIcon className="size-4 flex-shrink-0" />
             </div>
           ),
           pro: (
             <div className="flex items-center gap-1">
-              <Mail className="flex-shrink-0 size-4" />
-              <RiDiscordFill className="flex-shrink-0 size-4" />
-              <MessageCircle className="flex-shrink-0 size-4" />
+              <Mail className="size-4 flex-shrink-0" />
+              <ForumIcon className="size-4 flex-shrink-0" />
+              <MessageCircle className="size-4 flex-shrink-0" />
             </div>
           ),
           business: "Full-suite\nprofessional services",
diff --git a/apps/web/ce/constants/sidebar-favorites.ts b/apps/web/core/constants/sidebar-favorites.ts
similarity index 88%
rename from apps/web/ce/constants/sidebar-favorites.ts
rename to apps/web/core/constants/sidebar-favorites.ts
index aaa615e8a..e2935a6a5 100644
--- a/apps/web/ce/constants/sidebar-favorites.ts
+++ b/apps/web/core/constants/sidebar-favorites.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { LucideIcon } from "lucide-react";
 // plane imports
 import type { ISvgIcons } from "@plane/propel/icons";
diff --git a/apps/web/core/custom-events/chat-support.ts b/apps/web/core/custom-events/chat-support.ts
index 01c27b18e..8c7d0fa5c 100644
--- a/apps/web/core/custom-events/chat-support.ts
+++ b/apps/web/core/custom-events/chat-support.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 type ChatSupportType = "open";
 
 type ChatSupportEventType = `chat-support:${ChatSupportType}`;
diff --git a/apps/web/core/hooks/context/use-issue-modal.tsx b/apps/web/core/hooks/context/use-issue-modal.tsx
index 270731d8d..2cb6a35a5 100644
--- a/apps/web/core/hooks/context/use-issue-modal.tsx
+++ b/apps/web/core/hooks/context/use-issue-modal.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useContext } from "react";
 // components
 import { IssueModalContext } from "@/components/issues/issue-modal/context";
diff --git a/apps/web/core/hooks/editor/index.ts b/apps/web/core/hooks/editor/index.ts
index 532916cd4..90fb1856e 100644
--- a/apps/web/core/hooks/editor/index.ts
+++ b/apps/web/core/hooks/editor/index.ts
@@ -1,2 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./use-editor-config";
 export * from "./use-editor-mention";
diff --git a/apps/web/core/hooks/editor/use-editor-config.ts b/apps/web/core/hooks/editor/use-editor-config.ts
index cee66cca4..98eb92c75 100644
--- a/apps/web/core/hooks/editor/use-editor-config.ts
+++ b/apps/web/core/hooks/editor/use-editor-config.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useCallback } from "react";
 // plane imports
 import type { TFileHandler } from "@plane/editor";
diff --git a/apps/web/core/hooks/editor/use-editor-mention.tsx b/apps/web/core/hooks/editor/use-editor-mention.tsx
index 622fc0438..46aa85229 100644
--- a/apps/web/core/hooks/editor/use-editor-mention.tsx
+++ b/apps/web/core/hooks/editor/use-editor-mention.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useCallback } from "react";
 // plane editor
 import type { TMentionSection, TMentionSuggestion } from "@plane/editor";
diff --git a/apps/web/core/hooks/oauth/core.tsx b/apps/web/core/hooks/oauth/core.tsx
new file mode 100644
index 000000000..1614883fe
--- /dev/null
+++ b/apps/web/core/hooks/oauth/core.tsx
@@ -0,0 +1,88 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// plane imports
+import { useSearchParams } from "next/navigation";
+import { useTheme } from "next-themes";
+import { API_BASE_URL } from "@plane/constants";
+import type { TOAuthConfigs, TOAuthOption } from "@plane/types";
+// assets
+import giteaLogo from "@/app/assets/logos/gitea-logo.svg?url";
+import GithubLightLogo from "@/app/assets/logos/github-black.png?url";
+import GithubDarkLogo from "@/app/assets/logos/github-dark.svg?url";
+import gitlabLogo from "@/app/assets/logos/gitlab-logo.svg?url";
+import googleLogo from "@/app/assets/logos/google-logo.svg?url";
+// hooks
+import { useInstance } from "@/hooks/store/use-instance";
+
+export const useCoreOAuthConfig = (oauthActionText: string): TOAuthConfigs => {
+  //router
+  const searchParams = useSearchParams();
+  // query params
+  const next_path = searchParams.get("next_path");
+  // theme
+  const { resolvedTheme } = useTheme();
+  // store hooks
+  const { config } = useInstance();
+  // derived values
+  const isOAuthEnabled =
+    (config &&
+      (config?.is_google_enabled ||
+        config?.is_github_enabled ||
+        config?.is_gitlab_enabled ||
+        config?.is_gitea_enabled)) ||
+    false;
+  const oAuthOptions: TOAuthOption[] = [
+    {
+      id: "google",
+      text: `${oauthActionText} with Google`,
+      icon: <img src={googleLogo} height={18} width={18} alt="Google Logo" />,
+      onClick: () => {
+        window.location.assign(`${API_BASE_URL}/auth/google/${next_path ? `?next_path=${next_path}` : ``}`);
+      },
+      enabled: config?.is_google_enabled,
+    },
+    {
+      id: "github",
+      text: `${oauthActionText} with GitHub`,
+      icon: (
+        <img
+          src={resolvedTheme === "dark" ? GithubDarkLogo : GithubLightLogo}
+          height={18}
+          width={18}
+          alt="GitHub Logo"
+        />
+      ),
+      onClick: () => {
+        window.location.assign(`${API_BASE_URL}/auth/github/${next_path ? `?next_path=${next_path}` : ``}`);
+      },
+      enabled: config?.is_github_enabled,
+    },
+    {
+      id: "gitlab",
+      text: `${oauthActionText} with GitLab`,
+      icon: <img src={gitlabLogo} height={18} width={18} alt="GitLab Logo" />,
+      onClick: () => {
+        window.location.assign(`${API_BASE_URL}/auth/gitlab/${next_path ? `?next_path=${next_path}` : ``}`);
+      },
+      enabled: config?.is_gitlab_enabled,
+    },
+    {
+      id: "gitea",
+      text: `${oauthActionText} with Gitea`,
+      icon: <img src={giteaLogo} height={18} width={18} alt="Gitea Logo" />,
+      onClick: () => {
+        window.location.assign(`${API_BASE_URL}/auth/gitea/${next_path ? `?next_path=${next_path}` : ``}`);
+      },
+      enabled: config?.is_gitea_enabled,
+    },
+  ];
+
+  return {
+    isOAuthEnabled,
+    oAuthOptions,
+  };
+};
diff --git a/apps/web/core/hooks/oauth/extended.tsx b/apps/web/core/hooks/oauth/extended.tsx
new file mode 100644
index 000000000..01608b6e6
--- /dev/null
+++ b/apps/web/core/hooks/oauth/extended.tsx
@@ -0,0 +1,15 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// plane imports
+import type { TOAuthConfigs } from "@plane/types";
+
+export const useExtendedOAuthConfig = (_oauthActionText: string): TOAuthConfigs => {
+  return {
+    isOAuthEnabled: false,
+    oAuthOptions: [],
+  };
+};
diff --git a/apps/web/core/hooks/oauth/index.ts b/apps/web/core/hooks/oauth/index.ts
new file mode 100644
index 000000000..e88c74399
--- /dev/null
+++ b/apps/web/core/hooks/oauth/index.ts
@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// plane imports
+import type { TOAuthConfigs } from "@plane/types";
+// local imports
+import { useCoreOAuthConfig } from "./core";
+import { useExtendedOAuthConfig } from "./extended";
+
+export const useOAuthConfig = (oauthActionText: string = "Continue"): TOAuthConfigs => {
+  const coreOAuthConfig = useCoreOAuthConfig(oauthActionText);
+  const extendedOAuthConfig = useExtendedOAuthConfig(oauthActionText);
+  return {
+    isOAuthEnabled: coreOAuthConfig.isOAuthEnabled || extendedOAuthConfig.isOAuthEnabled,
+    oAuthOptions: [...coreOAuthConfig.oAuthOptions, ...extendedOAuthConfig.oAuthOptions],
+  };
+};
diff --git a/apps/web/core/hooks/store/estimates/index.ts b/apps/web/core/hooks/store/estimates/index.ts
index 3b22fbb6f..3316d5eca 100644
--- a/apps/web/core/hooks/store/estimates/index.ts
+++ b/apps/web/core/hooks/store/estimates/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./use-project-estimate";
 export * from "./use-estimate";
 export * from "./use-estimate-point";
diff --git a/apps/web/core/hooks/store/estimates/use-estimate-point.ts b/apps/web/core/hooks/store/estimates/use-estimate-point.ts
index ba54a60dc..1478364c5 100644
--- a/apps/web/core/hooks/store/estimates/use-estimate-point.ts
+++ b/apps/web/core/hooks/store/estimates/use-estimate-point.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useContext } from "react";
 // mobx store
 import { StoreContext } from "@/lib/store-context";
diff --git a/apps/web/core/hooks/store/estimates/use-estimate.ts b/apps/web/core/hooks/store/estimates/use-estimate.ts
index b79110459..e01f3f44d 100644
--- a/apps/web/core/hooks/store/estimates/use-estimate.ts
+++ b/apps/web/core/hooks/store/estimates/use-estimate.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useContext } from "react";
 // mobx store
 import { StoreContext } from "@/lib/store-context";
diff --git a/apps/web/core/hooks/store/estimates/use-project-estimate.ts b/apps/web/core/hooks/store/estimates/use-project-estimate.ts
index a848271b0..08b548225 100644
--- a/apps/web/core/hooks/store/estimates/use-project-estimate.ts
+++ b/apps/web/core/hooks/store/estimates/use-project-estimate.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useContext } from "react";
 // context
 import { StoreContext } from "@/lib/store-context";
diff --git a/apps/web/core/hooks/store/notifications/index.ts b/apps/web/core/hooks/store/notifications/index.ts
index 07bcca1cf..7a7b57e5f 100644
--- a/apps/web/core/hooks/store/notifications/index.ts
+++ b/apps/web/core/hooks/store/notifications/index.ts
@@ -1,2 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./use-workspace-notifications";
 export * from "./use-notification";
diff --git a/apps/web/core/hooks/store/notifications/use-notification.ts b/apps/web/core/hooks/store/notifications/use-notification.ts
index 2086b05c9..e4e9ed0d5 100644
--- a/apps/web/core/hooks/store/notifications/use-notification.ts
+++ b/apps/web/core/hooks/store/notifications/use-notification.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useContext } from "react";
 // mobx store
 import { StoreContext } from "@/lib/store-context";
diff --git a/apps/web/core/hooks/store/notifications/use-workspace-notifications.ts b/apps/web/core/hooks/store/notifications/use-workspace-notifications.ts
index 3dcdf46e5..bd5268350 100644
--- a/apps/web/core/hooks/store/notifications/use-workspace-notifications.ts
+++ b/apps/web/core/hooks/store/notifications/use-workspace-notifications.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useContext } from "react";
 // context
 import { StoreContext } from "@/lib/store-context";
diff --git a/apps/web/core/hooks/store/use-analytics.ts b/apps/web/core/hooks/store/use-analytics.ts
index e0494567a..6982f28c4 100644
--- a/apps/web/core/hooks/store/use-analytics.ts
+++ b/apps/web/core/hooks/store/use-analytics.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useContext } from "react";
 // mobx store
 import { StoreContext } from "@/lib/store-context";
diff --git a/apps/web/core/hooks/store/use-app-theme.ts b/apps/web/core/hooks/store/use-app-theme.ts
index f10e89fc2..bd639f09b 100644
--- a/apps/web/core/hooks/store/use-app-theme.ts
+++ b/apps/web/core/hooks/store/use-app-theme.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useContext } from "react";
 // store
 import { StoreContext } from "@/lib/store-context";
diff --git a/apps/web/core/hooks/store/use-calendar-view.ts b/apps/web/core/hooks/store/use-calendar-view.ts
index da3433fa3..cf19bec5b 100644
--- a/apps/web/core/hooks/store/use-calendar-view.ts
+++ b/apps/web/core/hooks/store/use-calendar-view.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useContext } from "react";
 // mobx store
 import { StoreContext } from "@/lib/store-context";
diff --git a/apps/web/core/hooks/store/use-command-palette.ts b/apps/web/core/hooks/store/use-command-palette.ts
index 26d58485c..e08e2b765 100644
--- a/apps/web/core/hooks/store/use-command-palette.ts
+++ b/apps/web/core/hooks/store/use-command-palette.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useContext } from "react";
 // mobx store
 import { StoreContext } from "@/lib/store-context";
diff --git a/apps/web/core/hooks/store/use-cycle-filter.ts b/apps/web/core/hooks/store/use-cycle-filter.ts
index 14754d257..0c533630f 100644
--- a/apps/web/core/hooks/store/use-cycle-filter.ts
+++ b/apps/web/core/hooks/store/use-cycle-filter.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useContext } from "react";
 // mobx store
 import { StoreContext } from "@/lib/store-context";
diff --git a/apps/web/core/hooks/store/use-cycle.ts b/apps/web/core/hooks/store/use-cycle.ts
index 5893d7593..810b94068 100644
--- a/apps/web/core/hooks/store/use-cycle.ts
+++ b/apps/web/core/hooks/store/use-cycle.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useContext } from "react";
 // mobx store
 import { StoreContext } from "@/lib/store-context";
diff --git a/apps/web/core/hooks/store/use-dashboard.ts b/apps/web/core/hooks/store/use-dashboard.ts
index 9b43f54c1..eaba6c5a1 100644
--- a/apps/web/core/hooks/store/use-dashboard.ts
+++ b/apps/web/core/hooks/store/use-dashboard.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useContext } from "react";
 // mobx store
 import { StoreContext } from "@/lib/store-context";
diff --git a/apps/web/core/hooks/store/use-editor-asset.ts b/apps/web/core/hooks/store/use-editor-asset.ts
index 08c9b74dd..ec46c54f2 100644
--- a/apps/web/core/hooks/store/use-editor-asset.ts
+++ b/apps/web/core/hooks/store/use-editor-asset.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useContext } from "react";
 // store
 import { StoreContext } from "@/lib/store-context";
diff --git a/apps/web/core/hooks/store/use-favorite.ts b/apps/web/core/hooks/store/use-favorite.ts
index 6c21a5560..788ec9461 100644
--- a/apps/web/core/hooks/store/use-favorite.ts
+++ b/apps/web/core/hooks/store/use-favorite.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useContext } from "react";
 // mobx store
 import { StoreContext } from "@/lib/store-context";
diff --git a/apps/web/core/hooks/store/use-global-view.ts b/apps/web/core/hooks/store/use-global-view.ts
index 92691be25..10ef617a1 100644
--- a/apps/web/core/hooks/store/use-global-view.ts
+++ b/apps/web/core/hooks/store/use-global-view.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useContext } from "react";
 // mobx store
 import { StoreContext } from "@/lib/store-context";
diff --git a/apps/web/core/hooks/store/use-home.ts b/apps/web/core/hooks/store/use-home.ts
index 40d701ee0..3012ea73b 100644
--- a/apps/web/core/hooks/store/use-home.ts
+++ b/apps/web/core/hooks/store/use-home.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useContext } from "react";
 // mobx store
 import { StoreContext } from "@/lib/store-context";
diff --git a/apps/web/core/hooks/store/use-inbox-issues.ts b/apps/web/core/hooks/store/use-inbox-issues.ts
index 6c46e8ab8..bdd1ebe81 100644
--- a/apps/web/core/hooks/store/use-inbox-issues.ts
+++ b/apps/web/core/hooks/store/use-inbox-issues.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useContext } from "react";
 // mobx store
 import { StoreContext } from "@/lib/store-context";
diff --git a/apps/web/core/hooks/store/use-instance.ts b/apps/web/core/hooks/store/use-instance.ts
index de66b1015..a64b4558d 100644
--- a/apps/web/core/hooks/store/use-instance.ts
+++ b/apps/web/core/hooks/store/use-instance.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useContext } from "react";
 // store
 import { StoreContext } from "@/lib/store-context";
diff --git a/apps/web/core/hooks/store/use-issue-detail.ts b/apps/web/core/hooks/store/use-issue-detail.ts
index d0685f6a2..1d83949f8 100644
--- a/apps/web/core/hooks/store/use-issue-detail.ts
+++ b/apps/web/core/hooks/store/use-issue-detail.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useContext } from "react";
 import type { TIssueServiceType } from "@plane/types";
 import { EIssueServiceType } from "@plane/types";
diff --git a/apps/web/core/hooks/store/use-issues.ts b/apps/web/core/hooks/store/use-issues.ts
index 33e6023fd..816397d84 100644
--- a/apps/web/core/hooks/store/use-issues.ts
+++ b/apps/web/core/hooks/store/use-issues.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useContext } from "react";
 import { merge } from "lodash-es";
 import type { TIssueMap } from "@plane/types";
diff --git a/apps/web/core/hooks/store/use-kanban-view.ts b/apps/web/core/hooks/store/use-kanban-view.ts
index cf217a1e6..d1d4f468e 100644
--- a/apps/web/core/hooks/store/use-kanban-view.ts
+++ b/apps/web/core/hooks/store/use-kanban-view.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useContext } from "react";
 // mobx store
 import { StoreContext } from "@/lib/store-context";
diff --git a/apps/web/core/hooks/store/use-label.ts b/apps/web/core/hooks/store/use-label.ts
index d0412c5eb..abefad405 100644
--- a/apps/web/core/hooks/store/use-label.ts
+++ b/apps/web/core/hooks/store/use-label.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useContext } from "react";
 // mobx store
 import { StoreContext } from "@/lib/store-context";
diff --git a/apps/web/core/hooks/store/use-member.ts b/apps/web/core/hooks/store/use-member.ts
index bf093e960..745bfd366 100644
--- a/apps/web/core/hooks/store/use-member.ts
+++ b/apps/web/core/hooks/store/use-member.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useContext } from "react";
 // mobx store
 import { StoreContext } from "@/lib/store-context";
diff --git a/apps/web/core/hooks/store/use-module-filter.ts b/apps/web/core/hooks/store/use-module-filter.ts
index a9ec42605..6ba4ab518 100644
--- a/apps/web/core/hooks/store/use-module-filter.ts
+++ b/apps/web/core/hooks/store/use-module-filter.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useContext } from "react";
 // mobx store
 import { StoreContext } from "@/lib/store-context";
diff --git a/apps/web/core/hooks/store/use-module.ts b/apps/web/core/hooks/store/use-module.ts
index cf07f4b0f..cf47e4e6e 100644
--- a/apps/web/core/hooks/store/use-module.ts
+++ b/apps/web/core/hooks/store/use-module.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useContext } from "react";
 // mobx store
 import { StoreContext } from "@/lib/store-context";
diff --git a/apps/web/core/hooks/store/use-multiple-select-store.ts b/apps/web/core/hooks/store/use-multiple-select-store.ts
index 1a599bfa7..70d9bae0f 100644
--- a/apps/web/core/hooks/store/use-multiple-select-store.ts
+++ b/apps/web/core/hooks/store/use-multiple-select-store.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useContext } from "react";
 // store
 import { StoreContext } from "@/lib/store-context";
diff --git a/apps/web/core/hooks/store/use-power-k.ts b/apps/web/core/hooks/store/use-power-k.ts
index caf149df3..5a5025d3a 100644
--- a/apps/web/core/hooks/store/use-power-k.ts
+++ b/apps/web/core/hooks/store/use-power-k.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useContext } from "react";
 // mobx store
 import { StoreContext } from "@/lib/store-context";
diff --git a/apps/web/core/hooks/store/use-project-filter.ts b/apps/web/core/hooks/store/use-project-filter.ts
index 0c52ce423..686e3444a 100644
--- a/apps/web/core/hooks/store/use-project-filter.ts
+++ b/apps/web/core/hooks/store/use-project-filter.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useContext } from "react";
 // mobx store
 import { StoreContext } from "@/lib/store-context";
diff --git a/apps/web/core/hooks/store/use-project-inbox.ts b/apps/web/core/hooks/store/use-project-inbox.ts
index d36af8171..18296aa76 100644
--- a/apps/web/core/hooks/store/use-project-inbox.ts
+++ b/apps/web/core/hooks/store/use-project-inbox.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useContext } from "react";
 // mobx store
 import { StoreContext } from "@/lib/store-context";
diff --git a/apps/web/core/hooks/store/use-project-publish.ts b/apps/web/core/hooks/store/use-project-publish.ts
index 76ce87984..5f0f11130 100644
--- a/apps/web/core/hooks/store/use-project-publish.ts
+++ b/apps/web/core/hooks/store/use-project-publish.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useContext } from "react";
 // mobx store
 import { StoreContext } from "@/lib/store-context";
diff --git a/apps/web/core/hooks/store/use-project-state.ts b/apps/web/core/hooks/store/use-project-state.ts
index 106b1c3be..3bfbf2b82 100644
--- a/apps/web/core/hooks/store/use-project-state.ts
+++ b/apps/web/core/hooks/store/use-project-state.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useContext } from "react";
 // mobx store
 import { StoreContext } from "@/lib/store-context";
diff --git a/apps/web/core/hooks/store/use-project-view.ts b/apps/web/core/hooks/store/use-project-view.ts
index 43e43d56d..d26dc0ee4 100644
--- a/apps/web/core/hooks/store/use-project-view.ts
+++ b/apps/web/core/hooks/store/use-project-view.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useContext } from "react";
 // mobx store
 import { StoreContext } from "@/lib/store-context";
diff --git a/apps/web/core/hooks/store/use-project.ts b/apps/web/core/hooks/store/use-project.ts
index 1ee2d7bf6..4694f030d 100644
--- a/apps/web/core/hooks/store/use-project.ts
+++ b/apps/web/core/hooks/store/use-project.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useContext } from "react";
 // mobx store
 import { StoreContext } from "@/lib/store-context";
diff --git a/apps/web/core/hooks/store/use-router-params.ts b/apps/web/core/hooks/store/use-router-params.ts
index 2e420c4bb..19a49ce51 100644
--- a/apps/web/core/hooks/store/use-router-params.ts
+++ b/apps/web/core/hooks/store/use-router-params.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useContext } from "react";
 // store
 import { StoreContext } from "@/lib/store-context";
diff --git a/apps/web/core/hooks/store/use-webhook.ts b/apps/web/core/hooks/store/use-webhook.ts
index 3c2e40e8c..ed8dd139a 100644
--- a/apps/web/core/hooks/store/use-webhook.ts
+++ b/apps/web/core/hooks/store/use-webhook.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useContext } from "react";
 // mobx store
 import { StoreContext } from "@/lib/store-context";
diff --git a/apps/web/core/hooks/store/use-workspace.ts b/apps/web/core/hooks/store/use-workspace.ts
index 4b77c98b8..482e800e1 100644
--- a/apps/web/core/hooks/store/use-workspace.ts
+++ b/apps/web/core/hooks/store/use-workspace.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useContext } from "react";
 // mobx store
 import { StoreContext } from "@/lib/store-context";
diff --git a/apps/web/core/hooks/store/user/index.ts b/apps/web/core/hooks/store/user/index.ts
index 8b00f82b0..845d75184 100644
--- a/apps/web/core/hooks/store/user/index.ts
+++ b/apps/web/core/hooks/store/user/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./user-user";
 export * from "./user-user-profile";
 export * from "./user-user-settings";
diff --git a/apps/web/core/hooks/store/user/user-permissions.ts b/apps/web/core/hooks/store/user/user-permissions.ts
index ce698a9f9..548e2aaaf 100644
--- a/apps/web/core/hooks/store/user/user-permissions.ts
+++ b/apps/web/core/hooks/store/user/user-permissions.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useContext } from "react";
 // mobx store
 import { StoreContext } from "@/lib/store-context";
diff --git a/apps/web/core/hooks/store/user/user-user-profile.ts b/apps/web/core/hooks/store/user/user-user-profile.ts
index c9937cd90..d7393dd9c 100644
--- a/apps/web/core/hooks/store/user/user-user-profile.ts
+++ b/apps/web/core/hooks/store/user/user-user-profile.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useContext } from "react";
 // mobx store
 import { StoreContext } from "@/lib/store-context";
diff --git a/apps/web/core/hooks/store/user/user-user-settings.ts b/apps/web/core/hooks/store/user/user-user-settings.ts
index 85d5fa017..b14a8d1ad 100644
--- a/apps/web/core/hooks/store/user/user-user-settings.ts
+++ b/apps/web/core/hooks/store/user/user-user-settings.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useContext } from "react";
 // mobx store
 import { StoreContext } from "@/lib/store-context";
diff --git a/apps/web/core/hooks/store/user/user-user.ts b/apps/web/core/hooks/store/user/user-user.ts
index e2261e0b1..6c5757927 100644
--- a/apps/web/core/hooks/store/user/user-user.ts
+++ b/apps/web/core/hooks/store/user/user-user.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useContext } from "react";
 // mobx store
 import { StoreContext } from "@/lib/store-context";
diff --git a/apps/web/core/hooks/store/work-item-filters/use-work-item-filter-instance.ts b/apps/web/core/hooks/store/work-item-filters/use-work-item-filter-instance.ts
index 686b5c6e8..fca3685b2 100644
--- a/apps/web/core/hooks/store/work-item-filters/use-work-item-filter-instance.ts
+++ b/apps/web/core/hooks/store/work-item-filters/use-work-item-filter-instance.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // plane imports
 import type { IWorkItemFilterInstance } from "@plane/shared-state";
 import type { EIssuesStoreType } from "@plane/types";
diff --git a/apps/web/core/hooks/store/work-item-filters/use-work-item-filters.ts b/apps/web/core/hooks/store/work-item-filters/use-work-item-filters.ts
index 3c6403321..1a3ac339c 100644
--- a/apps/web/core/hooks/store/work-item-filters/use-work-item-filters.ts
+++ b/apps/web/core/hooks/store/work-item-filters/use-work-item-filters.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useContext } from "react";
 // plane imports
 import type { IWorkItemFilterStore } from "@plane/shared-state";
diff --git a/apps/web/core/hooks/store/workspace-draft/index.ts b/apps/web/core/hooks/store/workspace-draft/index.ts
index 59f8e2d96..5e1485114 100644
--- a/apps/web/core/hooks/store/workspace-draft/index.ts
+++ b/apps/web/core/hooks/store/workspace-draft/index.ts
@@ -1,2 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./use-workspace-draft-issue";
 export * from "./use-workspace-draft-issue-filters";
diff --git a/apps/web/core/hooks/store/workspace-draft/use-workspace-draft-issue-filters.ts b/apps/web/core/hooks/store/workspace-draft/use-workspace-draft-issue-filters.ts
index b0fc6639b..1c0b96ec9 100644
--- a/apps/web/core/hooks/store/workspace-draft/use-workspace-draft-issue-filters.ts
+++ b/apps/web/core/hooks/store/workspace-draft/use-workspace-draft-issue-filters.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useContext } from "react";
 // mobx store
 import { StoreContext } from "@/lib/store-context";
diff --git a/apps/web/core/hooks/store/workspace-draft/use-workspace-draft-issue.ts b/apps/web/core/hooks/store/workspace-draft/use-workspace-draft-issue.ts
index a6301f400..929e156ef 100644
--- a/apps/web/core/hooks/store/workspace-draft/use-workspace-draft-issue.ts
+++ b/apps/web/core/hooks/store/workspace-draft/use-workspace-draft-issue.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useContext } from "react";
 // mobx store
 import { StoreContext } from "@/lib/store-context";
diff --git a/apps/web/core/hooks/use-app-router.tsx b/apps/web/core/hooks/use-app-router.tsx
index 9fb11e2c4..a86920bd0 100644
--- a/apps/web/core/hooks/use-app-router.tsx
+++ b/apps/web/core/hooks/use-app-router.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // router from n-progress-bar
 import { useRouter } from "next/navigation";
 
diff --git a/apps/web/core/hooks/use-auto-save.tsx b/apps/web/core/hooks/use-auto-save.tsx
index 1d8a6b12b..351a34cb3 100644
--- a/apps/web/core/hooks/use-auto-save.tsx
+++ b/apps/web/core/hooks/use-auto-save.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useEffect, useRef } from "react";
 import { debounce } from "lodash-es";
 
diff --git a/apps/web/core/hooks/use-auto-scroller.tsx b/apps/web/core/hooks/use-auto-scroller.tsx
index 48a1ac2c0..bf3e654fb 100644
--- a/apps/web/core/hooks/use-auto-scroller.tsx
+++ b/apps/web/core/hooks/use-auto-scroller.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { RefObject } from "react";
 import { useEffect, useRef } from "react";
 
diff --git a/apps/web/core/hooks/use-chat-support.ts b/apps/web/core/hooks/use-chat-support.ts
index 9e284275d..b4e3e70a0 100644
--- a/apps/web/core/hooks/use-chat-support.ts
+++ b/apps/web/core/hooks/use-chat-support.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useCallback } from "react";
 // custom events
 import { ChatSupportEvent } from "@/custom-events/chat-support";
diff --git a/apps/web/core/hooks/use-collaborative-page-actions.tsx b/apps/web/core/hooks/use-collaborative-page-actions.tsx
index b10d8405d..d212b47da 100644
--- a/apps/web/core/hooks/use-collaborative-page-actions.tsx
+++ b/apps/web/core/hooks/use-collaborative-page-actions.tsx
@@ -1,5 +1,11 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useState, useEffect, useCallback, useMemo } from "react";
-import type { EditorRefApi, TDocumentEventsServer } from "@plane/editor";
+import type { TDocumentEventsServer } from "@plane/editor";
 import type { TDocumentEventsClient } from "@plane/editor/lib";
 import { DocumentCollaborativeEvents, getServerEventName } from "@plane/editor/lib";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
diff --git a/apps/web/core/hooks/use-current-time.tsx b/apps/web/core/hooks/use-current-time.tsx
index 4f361cea8..f703b6341 100644
--- a/apps/web/core/hooks/use-current-time.tsx
+++ b/apps/web/core/hooks/use-current-time.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useEffect, useState } from "react";
 
 export const useCurrentTime = () => {
diff --git a/apps/web/core/hooks/use-debounce.tsx b/apps/web/core/hooks/use-debounce.tsx
index e8e57226b..6e833da12 100644
--- a/apps/web/core/hooks/use-debounce.tsx
+++ b/apps/web/core/hooks/use-debounce.tsx
@@ -1,6 +1,12 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useState, useEffect } from "react";
 
-const useDebounce = (value: any, milliSeconds: number) => {
+const useDebounce = <T,>(value: T, milliSeconds: number): T => {
   const [debouncedValue, setDebouncedValue] = useState(value);
 
   useEffect(() => {
diff --git a/apps/web/core/hooks/use-dropdown-key-down.tsx b/apps/web/core/hooks/use-dropdown-key-down.tsx
index fdb925dc2..ede4c1a8b 100644
--- a/apps/web/core/hooks/use-dropdown-key-down.tsx
+++ b/apps/web/core/hooks/use-dropdown-key-down.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useCallback } from "react";
 
 type TUseDropdownKeyDown = {
diff --git a/apps/web/core/hooks/use-dropdown.ts b/apps/web/core/hooks/use-dropdown.ts
index 5568305e8..ab54a0a5a 100644
--- a/apps/web/core/hooks/use-dropdown.ts
+++ b/apps/web/core/hooks/use-dropdown.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useEffect } from "react";
 // plane helpers
 import { useOutsideClickDetector } from "@plane/hooks";
diff --git a/apps/web/core/hooks/use-expandable-search.ts b/apps/web/core/hooks/use-expandable-search.ts
index 3b9c38068..a63252f18 100644
--- a/apps/web/core/hooks/use-expandable-search.ts
+++ b/apps/web/core/hooks/use-expandable-search.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useCallback, useEffect, useRef, useState } from "react";
 import { useOutsideClickDetector } from "@plane/hooks";
 
diff --git a/apps/web/core/hooks/use-extended-sidebar-overview-outside-click.tsx b/apps/web/core/hooks/use-extended-sidebar-overview-outside-click.tsx
index ebe873f6c..6fecda2f2 100644
--- a/apps/web/core/hooks/use-extended-sidebar-overview-outside-click.tsx
+++ b/apps/web/core/hooks/use-extended-sidebar-overview-outside-click.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type React from "react";
 import { useEffect, useCallback } from "react";
 
diff --git a/apps/web/core/hooks/use-favorite-item-details.tsx b/apps/web/core/hooks/use-favorite-item-details.tsx
index ae8c7638a..b3c9468e3 100644
--- a/apps/web/core/hooks/use-favorite-item-details.tsx
+++ b/apps/web/core/hooks/use-favorite-item-details.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // plane imports
 import type { IFavorite } from "@plane/types";
 // components
diff --git a/apps/web/core/hooks/use-group-dragndrop.ts b/apps/web/core/hooks/use-group-dragndrop.ts
index f1929283b..b21cdcbe1 100644
--- a/apps/web/core/hooks/use-group-dragndrop.ts
+++ b/apps/web/core/hooks/use-group-dragndrop.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useParams } from "next/navigation";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { EIssuesStoreType, TIssue, TIssueGroupByOptions, TIssueOrderByOptions } from "@plane/types";
diff --git a/apps/web/core/hooks/use-integration-popup.tsx b/apps/web/core/hooks/use-integration-popup.tsx
index 371aef006..92fbe2c27 100644
--- a/apps/web/core/hooks/use-integration-popup.tsx
+++ b/apps/web/core/hooks/use-integration-popup.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useRef, useState } from "react";
 import { useParams } from "next/navigation";
 
diff --git a/apps/web/core/hooks/use-intersection-observer.ts b/apps/web/core/hooks/use-intersection-observer.ts
index 982894d13..ea74c0932 100644
--- a/apps/web/core/hooks/use-intersection-observer.ts
+++ b/apps/web/core/hooks/use-intersection-observer.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { RefObject } from "react";
 import { useEffect } from "react";
 
diff --git a/apps/web/core/hooks/use-issue-layout-store.ts b/apps/web/core/hooks/use-issue-layout-store.ts
index f5a8d35fd..dc1bae7e8 100644
--- a/apps/web/core/hooks/use-issue-layout-store.ts
+++ b/apps/web/core/hooks/use-issue-layout-store.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { createContext, useContext } from "react";
 import { useParams } from "next/navigation";
 import { EIssuesStoreType } from "@plane/types";
diff --git a/apps/web/core/hooks/use-issue-peek-overview-redirection.tsx b/apps/web/core/hooks/use-issue-peek-overview-redirection.tsx
index c1d0163d5..5e4f92263 100644
--- a/apps/web/core/hooks/use-issue-peek-overview-redirection.tsx
+++ b/apps/web/core/hooks/use-issue-peek-overview-redirection.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useRouter } from "next/navigation";
 // types
 import type { TIssue } from "@plane/types";
diff --git a/apps/web/core/hooks/use-issues-actions.tsx b/apps/web/core/hooks/use-issues-actions.tsx
index c14c951fa..6e42f6dcf 100644
--- a/apps/web/core/hooks/use-issues-actions.tsx
+++ b/apps/web/core/hooks/use-issues-actions.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 /* eslint-disable react-hooks/exhaustive-deps */
 import { useCallback, useMemo } from "react";
 // types
@@ -15,11 +21,6 @@ import type {
   TSupportedFilterForUpdate,
 } from "@plane/types";
 import { EIssuesStoreType } from "@plane/types";
-import {
-  useTeamIssueActions,
-  useTeamProjectWorkItemsActions,
-  useTeamViewIssueActions,
-} from "@/plane-web/helpers/issue-action-helper";
 import { useIssues } from "./store/use-issues";
 
 export interface IssueActions {
@@ -44,28 +45,21 @@ export interface IssueActions {
 }
 
 export const useIssuesActions = (storeType: EIssuesStoreType): IssueActions => {
-  const teamIssueActions = useTeamIssueActions();
   const projectIssueActions = useProjectIssueActions();
   const projectEpicsActions = useProjectEpicsActions();
   const cycleIssueActions = useCycleIssueActions();
   const moduleIssueActions = useModuleIssueActions();
-  const teamViewIssueActions = useTeamViewIssueActions();
   const projectViewIssueActions = useProjectViewIssueActions();
   const globalIssueActions = useGlobalIssueActions();
   const profileIssueActions = useProfileIssueActions();
   const archivedIssueActions = useArchivedIssueActions();
   const workspaceDraftIssueActions = useWorkspaceDraftIssueActions();
-  const teamProjectWorkItemsActions = useTeamProjectWorkItemsActions();
 
   switch (storeType) {
-    case EIssuesStoreType.TEAM_VIEW:
-      return teamViewIssueActions;
     case EIssuesStoreType.PROJECT_VIEW:
       return projectViewIssueActions;
     case EIssuesStoreType.PROFILE:
       return profileIssueActions;
-    case EIssuesStoreType.TEAM:
-      return teamIssueActions;
     case EIssuesStoreType.ARCHIVED:
       return archivedIssueActions;
     case EIssuesStoreType.CYCLE:
@@ -79,8 +73,6 @@ export const useIssuesActions = (storeType: EIssuesStoreType): IssueActions => {
       return workspaceDraftIssueActions;
     case EIssuesStoreType.EPIC:
       return projectEpicsActions;
-    case EIssuesStoreType.TEAM_PROJECT_WORK_ITEMS:
-      return teamProjectWorkItemsActions;
     case EIssuesStoreType.PROJECT:
     default:
       return projectIssueActions;
diff --git a/apps/web/core/hooks/use-keypress.tsx b/apps/web/core/hooks/use-keypress.tsx
index c7243348d..655b1a8d3 100644
--- a/apps/web/core/hooks/use-keypress.tsx
+++ b/apps/web/core/hooks/use-keypress.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useEffect } from "react";
 
 const useKeypress = (key: string, callback: (event: KeyboardEvent) => void) => {
diff --git a/apps/web/core/hooks/use-local-storage.tsx b/apps/web/core/hooks/use-local-storage.tsx
index 66c92cf9b..e62c89479 100644
--- a/apps/web/core/hooks/use-local-storage.tsx
+++ b/apps/web/core/hooks/use-local-storage.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useState, useEffect, useCallback } from "react";
 
 export const getValueFromLocalStorage = (key: string, defaultValue: any) => {
diff --git a/apps/web/core/hooks/use-multiple-select.ts b/apps/web/core/hooks/use-multiple-select.ts
index 609bf335a..cb55c1c92 100644
--- a/apps/web/core/hooks/use-multiple-select.ts
+++ b/apps/web/core/hooks/use-multiple-select.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useCallback, useEffect, useMemo } from "react";
 // hooks
 import { useMultipleSelectStore } from "@/hooks/store/use-multiple-select-store";
diff --git a/apps/web/core/hooks/use-navigation-preferences.ts b/apps/web/core/hooks/use-navigation-preferences.ts
index 1672936cc..a7a71d09b 100644
--- a/apps/web/core/hooks/use-navigation-preferences.ts
+++ b/apps/web/core/hooks/use-navigation-preferences.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useCallback, useMemo } from "react";
 import { useParams } from "next/navigation";
 import type {
@@ -19,7 +25,6 @@ import {
 import { useWorkspace } from "./store/use-workspace";
 import useLocalStorage from "./use-local-storage";
 
-const PROJECT_PREFERENCES_KEY = "navigation_preferences_projects";
 const APP_RAIL_PREFERENCES_KEY = "app_rail_preferences";
 
 export const usePersonalNavigationPreferences = () => {
@@ -105,49 +110,73 @@ export const usePersonalNavigationPreferences = () => {
 };
 
 export const useProjectNavigationPreferences = () => {
-  const { storedValue, setValue } = useLocalStorage<TProjectNavigationPreferences>(
-    PROJECT_PREFERENCES_KEY,
-    DEFAULT_PROJECT_PREFERENCES
-  );
+  const { workspaceSlug } = useParams();
+  const { getProjectNavigationPreferences, updateProjectNavigationPreferences } = useWorkspace();
 
+  // Get preferences from the store
+  const storePreferences = getProjectNavigationPreferences(workspaceSlug?.toString() || "");
+
+  // Computed preferences with fallback logic: API → defaults
+  const preferences: TProjectNavigationPreferences = useMemo(() => {
+    // 1. Try API data first
+    if (
+      storePreferences &&
+      (storePreferences.navigation_control_preference || storePreferences.navigation_project_limit !== undefined)
+    ) {
+      const limit = storePreferences.navigation_project_limit ?? DEFAULT_PROJECT_PREFERENCES.limitedProjectsCount;
+
+      return {
+        navigationMode: storePreferences.navigation_control_preference || DEFAULT_PROJECT_PREFERENCES.navigationMode,
+        limitedProjectsCount: limit > 0 ? limit : DEFAULT_PROJECT_PREFERENCES.limitedProjectsCount,
+        showLimitedProjects: limit > 0, // Derived: 0 = false, >0 = true
+      };
+    }
+
+    // 2. Fall back to defaults
+    return DEFAULT_PROJECT_PREFERENCES;
+  }, [storePreferences]);
+
+  // Update navigation mode
   const updateNavigationMode = useCallback(
-    (mode: TProjectNavigationMode) => {
-      const currentPreferences = storedValue || DEFAULT_PROJECT_PREFERENCES;
-      setValue({
-        navigationMode: mode,
-        showLimitedProjects: currentPreferences.showLimitedProjects,
-        limitedProjectsCount: currentPreferences.limitedProjectsCount,
+    async (mode: TProjectNavigationMode) => {
+      if (!workspaceSlug) return;
+
+      await updateProjectNavigationPreferences(workspaceSlug.toString(), {
+        navigation_control_preference: mode,
       });
     },
-    [storedValue, setValue]
+    [workspaceSlug, updateProjectNavigationPreferences]
   );
 
+  // Update show limited projects
   const updateShowLimitedProjects = useCallback(
-    (show: boolean) => {
-      const currentPreferences = storedValue || DEFAULT_PROJECT_PREFERENCES;
-      setValue({
-        navigationMode: currentPreferences.navigationMode,
-        showLimitedProjects: show,
-        limitedProjectsCount: currentPreferences.limitedProjectsCount,
+    async (show: boolean) => {
+      if (!workspaceSlug) return;
+
+      // When toggling off, set to 0; when toggling on, use current count or default
+      const newLimit = show ? preferences.limitedProjectsCount || DEFAULT_PROJECT_PREFERENCES.limitedProjectsCount : 0;
+
+      await updateProjectNavigationPreferences(workspaceSlug.toString(), {
+        navigation_project_limit: newLimit,
       });
     },
-    [storedValue, setValue]
+    [workspaceSlug, updateProjectNavigationPreferences, preferences.limitedProjectsCount]
   );
 
+  // Update limited projects count
   const updateLimitedProjectsCount = useCallback(
-    (count: number) => {
-      const currentPreferences = storedValue || DEFAULT_PROJECT_PREFERENCES;
-      setValue({
-        navigationMode: currentPreferences.navigationMode,
-        showLimitedProjects: currentPreferences.showLimitedProjects,
-        limitedProjectsCount: count,
+    async (count: number) => {
+      if (!workspaceSlug) return;
+
+      await updateProjectNavigationPreferences(workspaceSlug.toString(), {
+        navigation_project_limit: count,
       });
     },
-    [storedValue, setValue]
+    [workspaceSlug, updateProjectNavigationPreferences]
   );
 
   return {
-    preferences: storedValue || DEFAULT_PROJECT_PREFERENCES,
+    preferences,
     updateNavigationMode,
     updateShowLimitedProjects,
     updateLimitedProjectsCount,
diff --git a/apps/web/core/hooks/use-online-status.ts b/apps/web/core/hooks/use-online-status.ts
index 610fe1d5d..517738c55 100644
--- a/apps/web/core/hooks/use-online-status.ts
+++ b/apps/web/core/hooks/use-online-status.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useState, useEffect } from "react";
 
 const useOnlineStatus = () => {
diff --git a/apps/web/core/hooks/use-page-fallback.ts b/apps/web/core/hooks/use-page-fallback.ts
index 2b88b0d5a..bbcc328fa 100644
--- a/apps/web/core/hooks/use-page-fallback.ts
+++ b/apps/web/core/hooks/use-page-fallback.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useCallback, useEffect, useRef, useState } from "react";
 import type { EditorRefApi, CollaborationState } from "@plane/editor";
 // plane editor
@@ -59,7 +65,7 @@ export const usePageFallback = (args: TArgs) => {
       await updatePageDescription({
         description_binary: encodedBinary,
         description_html: html,
-        description: json,
+        description_json: json,
       });
     } catch (error: any) {
       console.error(error);
diff --git a/apps/web/core/hooks/use-page-filters.ts b/apps/web/core/hooks/use-page-filters.ts
index b290253a8..df944672c 100644
--- a/apps/web/core/hooks/use-page-filters.ts
+++ b/apps/web/core/hooks/use-page-filters.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useCallback, useMemo } from "react";
 // plane editor
 import type { TEditorFontSize, TEditorFontStyle } from "@plane/editor";
diff --git a/apps/web/core/hooks/use-page-operations.ts b/apps/web/core/hooks/use-page-operations.ts
index 95537ef5d..13b38443e 100644
--- a/apps/web/core/hooks/use-page-operations.ts
+++ b/apps/web/core/hooks/use-page-operations.ts
@@ -1,12 +1,15 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useMemo } from "react";
 // plane imports
-import { IS_FAVORITE_MENU_OPEN, PROJECT_PAGE_TRACKER_EVENTS } from "@plane/constants";
-import type { EditorRefApi } from "@plane/editor";
+import { IS_FAVORITE_MENU_OPEN } from "@plane/constants";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import { EPageAccess } from "@plane/types";
 import { copyUrlToClipboard } from "@plane/utils";
-// helpers
-import { captureSuccess, captureError } from "@/helpers/event-tracker.helper";
 // hooks
 import { useCollaborativePageActions } from "@/hooks/use-collaborative-page-actions";
 // store types
@@ -57,35 +60,23 @@ export const usePageOperations = (
     const pageLink = getRedirectionLink();
 
     return {
-      copyLink: () => {
-        copyUrlToClipboard(pageLink).then(() => {
-          setToast({
-            type: TOAST_TYPE.SUCCESS,
-            title: "Link Copied!",
-            message: "Page link copied to clipboard.",
-          });
+      copyLink: async () => {
+        await copyUrlToClipboard(pageLink);
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
+          title: "Link Copied!",
+          message: "Page link copied to clipboard.",
         });
       },
       duplicate: async () => {
         try {
           await duplicate();
-          captureSuccess({
-            eventName: PROJECT_PAGE_TRACKER_EVENTS.duplicate,
-            payload: {
-              id: page.id,
-              state: "SUCCESS",
-            },
-          });
           setToast({
             type: TOAST_TYPE.SUCCESS,
             title: "Success!",
             message: "Page duplicated successfully.",
           });
-        } catch (error: any) {
-          captureError({
-            eventName: PROJECT_PAGE_TRACKER_EVENTS.duplicate,
-            error,
-          });
+        } catch (_error) {
           setToast({
             type: TOAST_TYPE.ERROR,
             title: "Error!",
@@ -97,33 +88,16 @@ export const usePageOperations = (
       openInNewTab: () => window.open(pageLink, "_blank"),
       toggleAccess: async () => {
         const changedPageType = access === EPageAccess.PUBLIC ? "private" : "public";
-        const eventName = PROJECT_PAGE_TRACKER_EVENTS.access_update;
-
         try {
           if (access === EPageAccess.PUBLIC)
             await executeCollaborativeAction({ type: "sendMessageToServer", message: "make-private" });
           else await executeCollaborativeAction({ type: "sendMessageToServer", message: "make-public" });
-
-          captureSuccess({
-            eventName,
-            payload: {
-              id: page.id,
-              from_access: access === EPageAccess.PUBLIC ? "Public" : "Private",
-              to_access: access === EPageAccess.PUBLIC ? "Private" : "Public",
-              state: "SUCCESS",
-            },
-          });
-
           setToast({
             type: TOAST_TYPE.SUCCESS,
             title: "Success!",
             message: `The page has been marked ${changedPageType} and moved to the ${changedPageType} section.`,
           });
-        } catch (error: any) {
-          captureError({
-            eventName,
-            error,
-          });
+        } catch (_error) {
           setToast({
             type: TOAST_TYPE.ERROR,
             title: "Error!",
@@ -135,23 +109,12 @@ export const usePageOperations = (
         if (archived_at) {
           try {
             await executeCollaborativeAction({ type: "sendMessageToServer", message: "unarchive" });
-            captureSuccess({
-              eventName: PROJECT_PAGE_TRACKER_EVENTS.restore,
-              payload: {
-                id: page.id,
-                state: "SUCCESS",
-              },
-            });
             setToast({
               type: TOAST_TYPE.SUCCESS,
               title: "Success!",
               message: "Page restored successfully.",
             });
-          } catch (error: any) {
-            captureError({
-              eventName: PROJECT_PAGE_TRACKER_EVENTS.restore,
-              error,
-            });
+          } catch (_error) {
             setToast({
               type: TOAST_TYPE.ERROR,
               title: "Error!",
@@ -161,23 +124,12 @@ export const usePageOperations = (
         } else {
           try {
             await executeCollaborativeAction({ type: "sendMessageToServer", message: "archive" });
-            captureSuccess({
-              eventName: PROJECT_PAGE_TRACKER_EVENTS.archive,
-              payload: {
-                id: page.id,
-                state: "SUCCESS",
-              },
-            });
             setToast({
               type: TOAST_TYPE.SUCCESS,
               title: "Success!",
               message: "Page archived successfully.",
             });
-          } catch (error: any) {
-            captureError({
-              eventName: PROJECT_PAGE_TRACKER_EVENTS.archive,
-              error,
-            });
+          } catch (_error) {
             setToast({
               type: TOAST_TYPE.ERROR,
               title: "Error!",
@@ -186,75 +138,50 @@ export const usePageOperations = (
           }
         }
       },
-      toggleFavorite: () => {
+      toggleFavorite: async () => {
         if (is_favorite) {
-          removePageFromFavorites()
-            .then(() => {
-              captureSuccess({
-                eventName: PROJECT_PAGE_TRACKER_EVENTS.unfavorite,
-                payload: {
-                  id: page.id,
-                  state: "SUCCESS",
-                },
-              });
-              setToast({
-                type: TOAST_TYPE.SUCCESS,
-                title: "Success!",
-                message: "Page removed from favorites.",
-              });
-            })
-            .catch((error) => {
-              captureError({
-                eventName: PROJECT_PAGE_TRACKER_EVENTS.unfavorite,
-                error,
-              });
+          try {
+            await removePageFromFavorites();
+            setToast({
+              type: TOAST_TYPE.SUCCESS,
+              title: "Success!",
+              message: "Page removed from favorites.",
             });
+          } catch (_error) {
+            setToast({
+              type: TOAST_TYPE.ERROR,
+              title: "Error!",
+              message: "Page could not be removed from favorites. Please try again later.",
+            });
+          }
         } else {
-          addToFavorites()
-            .then(() => {
-              captureSuccess({
-                eventName: PROJECT_PAGE_TRACKER_EVENTS.favorite,
-                payload: {
-                  id: page.id,
-                  state: "SUCCESS",
-                },
-              });
-              if (!isFavoriteMenuOpen) toggleFavoriteMenu(true);
-              setToast({
-                type: TOAST_TYPE.SUCCESS,
-                title: "Success!",
-                message: "Page added to favorites.",
-              });
-            })
-            .catch((error) => {
-              captureError({
-                eventName: PROJECT_PAGE_TRACKER_EVENTS.favorite,
-                error,
-              });
+          try {
+            await addToFavorites();
+            if (!isFavoriteMenuOpen) toggleFavoriteMenu(true);
+            setToast({
+              type: TOAST_TYPE.SUCCESS,
+              title: "Success!",
+              message: "Page added to favorites.",
             });
+          } catch (_error) {
+            setToast({
+              type: TOAST_TYPE.ERROR,
+              title: "Error!",
+              message: "Page could not be added to favorites. Please try again later.",
+            });
+          }
         }
       },
       toggleLock: async () => {
         if (is_locked) {
           try {
             await executeCollaborativeAction({ type: "sendMessageToServer", message: "unlock" });
-            captureSuccess({
-              eventName: PROJECT_PAGE_TRACKER_EVENTS.unlock,
-              payload: {
-                id: page.id,
-                state: "SUCCESS",
-              },
-            });
             setToast({
               type: TOAST_TYPE.SUCCESS,
               title: "Success!",
               message: "Page unlocked successfully.",
             });
-          } catch (error: any) {
-            captureError({
-              eventName: PROJECT_PAGE_TRACKER_EVENTS.unlock,
-              error,
-            });
+          } catch (_error) {
             setToast({
               type: TOAST_TYPE.ERROR,
               title: "Error!",
@@ -264,23 +191,12 @@ export const usePageOperations = (
         } else {
           try {
             await executeCollaborativeAction({ type: "sendMessageToServer", message: "lock" });
-            captureSuccess({
-              eventName: PROJECT_PAGE_TRACKER_EVENTS.lock,
-              payload: {
-                id: page.id,
-                state: "SUCCESS",
-              },
-            });
             setToast({
               type: TOAST_TYPE.SUCCESS,
               title: "Success!",
               message: "Page locked successfully.",
             });
-          } catch (error: any) {
-            captureError({
-              eventName: PROJECT_PAGE_TRACKER_EVENTS.lock,
-              error,
-            });
+          } catch (_error) {
             setToast({
               type: TOAST_TYPE.ERROR,
               title: "Error!",
@@ -300,7 +216,6 @@ export const usePageOperations = (
     is_favorite,
     is_locked,
     isFavoriteMenuOpen,
-    page.id,
     removePageFromFavorites,
     toggleFavoriteMenu,
   ]);
diff --git a/apps/web/core/hooks/use-parse-editor-content.ts b/apps/web/core/hooks/use-parse-editor-content.ts
index 840317fa6..2bd1b8208 100644
--- a/apps/web/core/hooks/use-parse-editor-content.ts
+++ b/apps/web/core/hooks/use-parse-editor-content.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useCallback } from "react";
 // plane types
 import type { TSearchEntities } from "@plane/types";
@@ -215,7 +221,7 @@ export const useParseEditorContent = (args: TArgs) => {
     (htmlContent: string): TCustomComponentsMetaData => {
       const parser = new DOMParser();
       const doc = parser.parseFromString(htmlContent, "text/html");
-      const imageMetaData: TCustomComponentsMetaData["file_assets"] = [];
+      const filesMetaData: TCustomComponentsMetaData["file_assets"] = [];
       // process image components
       const imageComponents = doc.querySelectorAll("image-component");
       imageComponents.forEach((element) => {
@@ -229,7 +235,7 @@ export const useParseEditorContent = (args: TArgs) => {
                 workspaceSlug,
               });
           if (assetSrc) {
-            imageMetaData.push({
+            filesMetaData.push({
               id: src,
               name: src,
               url: assetSrc,
@@ -258,7 +264,7 @@ export const useParseEditorContent = (args: TArgs) => {
       });
 
       return {
-        file_assets: imageMetaData,
+        file_assets: filesMetaData,
         user_mentions: userMentions,
       };
     },
diff --git a/apps/web/core/hooks/use-peek-overview-outside-click.tsx b/apps/web/core/hooks/use-peek-overview-outside-click.tsx
index 1183a1c12..6fcf11028 100644
--- a/apps/web/core/hooks/use-peek-overview-outside-click.tsx
+++ b/apps/web/core/hooks/use-peek-overview-outside-click.tsx
@@ -1,10 +1,17 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type React from "react";
 import { useEffect, useCallback } from "react";
 
 const usePeekOverviewOutsideClickDetector = (
   ref: React.RefObject<HTMLElement>,
   callback: () => void,
-  issueId: string
+  issueId: string,
+  excludePreventionElementIds?: string[]
 ) => {
   const handleClick = useCallback(
     (event: MouseEvent) => {
@@ -12,9 +19,18 @@ const usePeekOverviewOutsideClickDetector = (
       if (ref.current && !ref.current.contains(event.target)) {
         // check for the closest element with attribute name data-prevent-outside-click
         const preventOutsideClickElement = event.target.closest("[data-prevent-outside-click]");
-        // if the closest element with attribute name data-prevent-outside-click is found, return
+        // if the closest element with attribute name data-prevent-outside-click is found
         if (preventOutsideClickElement) {
-          return;
+          // Check if this element's ID is in the exclusion list
+          const elementId = preventOutsideClickElement.id;
+          const shouldExcludePrevention =
+            excludePreventionElementIds && elementId && excludePreventionElementIds.includes(elementId);
+
+          if (!shouldExcludePrevention && !preventOutsideClickElement.contains(ref.current)) {
+            // Only prevent the callback if the ref is NOT inside the same prevent-outside-click container.
+            // This allows normal outside click detection for elements within the same container
+            return;
+          }
         }
         // check if the click target is the current issue element or its children
         let targetElement: HTMLElement | null = event.target;
@@ -37,7 +53,7 @@ const usePeekOverviewOutsideClickDetector = (
         callback();
       }
     },
-    [ref, callback, issueId]
+    [ref, callback, issueId, excludePreventionElementIds]
   );
 
   useEffect(() => {
diff --git a/apps/web/core/hooks/use-platform-os.tsx b/apps/web/core/hooks/use-platform-os.tsx
index 771706d1d..b531586ab 100644
--- a/apps/web/core/hooks/use-platform-os.tsx
+++ b/apps/web/core/hooks/use-platform-os.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export const usePlatformOS = () => {
   const userAgent = window.navigator.userAgent;
   const isMobile = /iPhone|iPad|iPod|Android/i.test(userAgent);
diff --git a/apps/web/core/hooks/use-project-issue-properties.ts b/apps/web/core/hooks/use-project-issue-properties.ts
index 77904ce3f..2e496eaad 100644
--- a/apps/web/core/hooks/use-project-issue-properties.ts
+++ b/apps/web/core/hooks/use-project-issue-properties.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useProjectEstimates } from "./store/estimates";
 import { useCycle } from "./store/use-cycle";
 import { useLabel } from "./store/use-label";
diff --git a/apps/web/core/hooks/use-query-params.ts b/apps/web/core/hooks/use-query-params.ts
index 84d65bebb..b8ffbf518 100644
--- a/apps/web/core/hooks/use-query-params.ts
+++ b/apps/web/core/hooks/use-query-params.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useCallback } from "react";
 import { useSearchParams, usePathname } from "next/navigation";
 
diff --git a/apps/web/core/hooks/use-realtime-page-events.tsx b/apps/web/core/hooks/use-realtime-page-events.tsx
index 2b849764e..949fe0397 100644
--- a/apps/web/core/hooks/use-realtime-page-events.tsx
+++ b/apps/web/core/hooks/use-realtime-page-events.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useCallback, useMemo } from "react";
 // plane imports
 import type { EventToPayloadMap } from "@plane/editor";
diff --git a/apps/web/core/hooks/use-reload-confirmation.tsx b/apps/web/core/hooks/use-reload-confirmation.tsx
index 6ba324d14..62332f0c1 100644
--- a/apps/web/core/hooks/use-reload-confirmation.tsx
+++ b/apps/web/core/hooks/use-reload-confirmation.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useCallback, useEffect, useState } from "react";
 
 //TODO: remove temp flag isActive later and use showAlert as the source of truth
diff --git a/apps/web/core/hooks/use-stickies.tsx b/apps/web/core/hooks/use-stickies.tsx
index df09a87f5..8e197c3f6 100644
--- a/apps/web/core/hooks/use-stickies.tsx
+++ b/apps/web/core/hooks/use-stickies.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useContext } from "react";
 // context
 import { StoreContext } from "@/lib/store-context";
diff --git a/apps/web/core/hooks/use-table-keyboard-navigation.tsx b/apps/web/core/hooks/use-table-keyboard-navigation.tsx
index 0d1c26f3c..83d46905f 100644
--- a/apps/web/core/hooks/use-table-keyboard-navigation.tsx
+++ b/apps/web/core/hooks/use-table-keyboard-navigation.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export const useTableKeyboardNavigation = () => {
   const getPreviousRow = (element: HTMLElement) => {
     const previousRow = element.closest("tr")?.previousSibling;
diff --git a/apps/web/core/hooks/use-timeline-chart.ts b/apps/web/core/hooks/use-timeline-chart.ts
index 5dec8b5ea..ec8b4f1a0 100644
--- a/apps/web/core/hooks/use-timeline-chart.ts
+++ b/apps/web/core/hooks/use-timeline-chart.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useContext } from "react";
 // types
 import type { TTimelineType } from "@plane/types";
diff --git a/apps/web/core/hooks/use-timer.tsx b/apps/web/core/hooks/use-timer.tsx
index 1edf4931a..c663d8007 100644
--- a/apps/web/core/hooks/use-timer.tsx
+++ b/apps/web/core/hooks/use-timer.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useState, useEffect } from "react";
 
 const TIMER = 30;
diff --git a/apps/web/core/hooks/use-timezone-converter.tsx b/apps/web/core/hooks/use-timezone-converter.tsx
index 6db001d44..d4f6a7533 100644
--- a/apps/web/core/hooks/use-timezone-converter.tsx
+++ b/apps/web/core/hooks/use-timezone-converter.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useCallback } from "react";
 import { format } from "date-fns";
 import { useProject } from "@/hooks/store/use-project";
diff --git a/apps/web/core/hooks/use-timezone.tsx b/apps/web/core/hooks/use-timezone.tsx
index 1f2661642..045356670 100644
--- a/apps/web/core/hooks/use-timezone.tsx
+++ b/apps/web/core/hooks/use-timezone.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import useSWR from "swr";
 import type { TTimezoneObject } from "@plane/types";
 // services
@@ -43,8 +49,8 @@ const useTimezone = () => {
     if (!timezone) return undefined;
     return (
       <div className="flex gap-1.5">
-        <span className="text-custom-text-400">{timezone.utc_offset}</span>
-        <span className="text-custom-text-200">{timezone.label}</span>
+        <span className="text-placeholder">{timezone.utc_offset}</span>
+        <span className="text-secondary">{timezone.label}</span>
       </div>
     );
   };
diff --git a/apps/web/core/hooks/use-window-size.tsx b/apps/web/core/hooks/use-window-size.tsx
index dbe44a777..4516de5e0 100644
--- a/apps/web/core/hooks/use-window-size.tsx
+++ b/apps/web/core/hooks/use-window-size.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useEffect, useState } from "react";
 
 const useSize = () => {
diff --git a/apps/web/core/hooks/use-workspace-invitation.tsx b/apps/web/core/hooks/use-workspace-invitation.tsx
index 483e46e05..1ca94427c 100644
--- a/apps/web/core/hooks/use-workspace-invitation.tsx
+++ b/apps/web/core/hooks/use-workspace-invitation.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useEffect } from "react";
 import type { Control, FieldArrayWithId, FormState, UseFormWatch } from "react-hook-form";
 import { useFieldArray, useForm } from "react-hook-form";
diff --git a/apps/web/core/hooks/use-workspace-issue-properties.ts b/apps/web/core/hooks/use-workspace-issue-properties.ts
index f1491f5a0..3c71503d5 100644
--- a/apps/web/core/hooks/use-workspace-issue-properties.ts
+++ b/apps/web/core/hooks/use-workspace-issue-properties.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import useSWR from "swr";
 // plane web imports
 import { WORKSPACE_ESTIMATES, WORKSPACE_CYCLES, WORKSPACE_LABELS, WORKSPACE_MODULES } from "@/constants/fetch-keys";
diff --git a/apps/web/core/hooks/use-workspace-paths.ts b/apps/web/core/hooks/use-workspace-paths.ts
index f0d1c9b52..7ba6a8d10 100644
--- a/apps/web/core/hooks/use-workspace-paths.ts
+++ b/apps/web/core/hooks/use-workspace-paths.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useParams, usePathname } from "next/navigation";
 
 /**
diff --git a/apps/web/core/layouts/auth-layout/project-wrapper.tsx b/apps/web/core/layouts/auth-layout/project-wrapper.tsx
index 00888ed83..1c4fac1b5 100644
--- a/apps/web/core/layouts/auth-layout/project-wrapper.tsx
+++ b/apps/web/core/layouts/auth-layout/project-wrapper.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { ReactNode } from "react";
 import { useEffect, useState } from "react";
 import { observer } from "mobx-react";
@@ -44,7 +50,7 @@ export const ProjectAuthWrapper = observer(function ProjectAuthWrapper(props: IP
   // states
   const [isJoiningProject, setIsJoiningProject] = useState(false);
   // store hooks
-  const { fetchUserProjectInfo, allowPermissions } = useUserPermissions();
+  const { fetchUserProjectInfo, allowPermissions, getProjectRoleByWorkspaceSlugAndProjectId } = useUserPermissions();
   const { fetchProjectDetails } = useProject();
   const { joinProject } = useUserPermissions();
   const { fetchAllCycles } = useCycle();
@@ -52,7 +58,7 @@ export const ProjectAuthWrapper = observer(function ProjectAuthWrapper(props: IP
   const { initGantt } = useTimeLineChart(GANTT_TIMELINE_TYPE.MODULE);
   const { fetchViews } = useProjectView();
   const {
-    project: { fetchProjectMembers, fetchProjectMemberPreferences },
+    project: { fetchProjectMembers, fetchProjectUserProperties },
   } = useMember();
   const { fetchProjectStates, fetchProjectIntakeState } = useProjectState();
   const { data: currentUserData } = useUser();
@@ -65,8 +71,8 @@ export const ProjectAuthWrapper = observer(function ProjectAuthWrapper(props: IP
     workspaceSlug,
     projectId
   );
+  const currentProjectRole = getProjectRoleByWorkspaceSlugAndProjectId(workspaceSlug, projectId);
   const isWorkspaceAdmin = allowPermissions([EUserPermissions.ADMIN], EUserPermissionsLevel.WORKSPACE, workspaceSlug);
-
   // Initialize module timeline chart
   useEffect(() => {
     initGantt();
@@ -82,50 +88,50 @@ export const ProjectAuthWrapper = observer(function ProjectAuthWrapper(props: IP
   useSWR(PROJECT_ME_INFORMATION(workspaceSlug, projectId), () => fetchUserProjectInfo(workspaceSlug, projectId));
   // fetching project member preferences
   useSWR(
-    currentUserData?.id ? PROJECT_MEMBER_PREFERENCES(workspaceSlug, projectId) : null,
-    currentUserData?.id ? () => fetchProjectMemberPreferences(workspaceSlug, projectId, currentUserData.id) : null,
+    currentUserData?.id ? PROJECT_MEMBER_PREFERENCES(projectId, currentProjectRole) : null,
+    currentUserData?.id ? () => fetchProjectUserProperties(workspaceSlug, projectId) : null,
     { revalidateIfStale: false, revalidateOnFocus: false }
   );
   // fetching project labels
-  useSWR(PROJECT_LABELS(workspaceSlug, projectId), () => fetchProjectLabels(workspaceSlug, projectId), {
+  useSWR(PROJECT_LABELS(projectId, currentProjectRole), () => fetchProjectLabels(workspaceSlug, projectId), {
     revalidateIfStale: false,
     revalidateOnFocus: false,
   });
   // fetching project members
-  useSWR(PROJECT_MEMBERS(workspaceSlug, projectId), () => fetchProjectMembers(workspaceSlug, projectId), {
+  useSWR(PROJECT_MEMBERS(projectId, currentProjectRole), () => fetchProjectMembers(workspaceSlug, projectId), {
     revalidateIfStale: false,
     revalidateOnFocus: false,
   });
   // fetching project states
-  useSWR(PROJECT_STATES(workspaceSlug, projectId), () => fetchProjectStates(workspaceSlug, projectId), {
+  useSWR(PROJECT_STATES(projectId, currentProjectRole), () => fetchProjectStates(workspaceSlug, projectId), {
     revalidateIfStale: false,
     revalidateOnFocus: false,
   });
   // fetching project intake state
-  useSWR(PROJECT_INTAKE_STATE(workspaceSlug, projectId), () => fetchProjectIntakeState(workspaceSlug, projectId), {
+  useSWR(PROJECT_INTAKE_STATE(projectId, currentProjectRole), () => fetchProjectIntakeState(workspaceSlug, projectId), {
     revalidateIfStale: false,
     revalidateOnFocus: false,
   });
   // fetching project estimates
-  useSWR(PROJECT_ESTIMATES(workspaceSlug, projectId), () => getProjectEstimates(workspaceSlug, projectId), {
+  useSWR(PROJECT_ESTIMATES(projectId, currentProjectRole), () => getProjectEstimates(workspaceSlug, projectId), {
     revalidateIfStale: false,
     revalidateOnFocus: false,
   });
   // fetching project cycles
-  useSWR(PROJECT_ALL_CYCLES(workspaceSlug, projectId), () => fetchAllCycles(workspaceSlug, projectId), {
+  useSWR(PROJECT_ALL_CYCLES(projectId, currentProjectRole), () => fetchAllCycles(workspaceSlug, projectId), {
     revalidateIfStale: false,
     revalidateOnFocus: false,
   });
   // fetching project modules
   useSWR(
-    PROJECT_MODULES(workspaceSlug, projectId),
+    PROJECT_MODULES(projectId, currentProjectRole),
     async () => {
       await Promise.all([fetchModulesSlim(workspaceSlug, projectId), fetchModules(workspaceSlug, projectId)]);
     },
     { revalidateIfStale: false, revalidateOnFocus: false }
   );
   // fetching project views
-  useSWR(PROJECT_VIEWS(workspaceSlug, projectId), () => fetchViews(workspaceSlug, projectId), {
+  useSWR(PROJECT_VIEWS(projectId, currentProjectRole), () => fetchViews(workspaceSlug, projectId), {
     revalidateIfStale: false,
     revalidateOnFocus: false,
   });
@@ -133,9 +139,7 @@ export const ProjectAuthWrapper = observer(function ProjectAuthWrapper(props: IP
   // handle join project
   const handleJoinProject = () => {
     setIsJoiningProject(true);
-    joinProject(workspaceSlug, projectId)
-      .then(() => fetchProjectDetails(workspaceSlug, projectId))
-      .finally(() => setIsJoiningProject(false));
+    joinProject(workspaceSlug, projectId).finally(() => setIsJoiningProject(false));
   };
 
   const isProjectLoading = (isParentLoading || isProjectDetailsLoading) && !projectDetailsError;
diff --git a/apps/web/core/layouts/auth-layout/workspace-wrapper.tsx b/apps/web/core/layouts/auth-layout/workspace-wrapper.tsx
index 53618493c..ac8c34fb3 100644
--- a/apps/web/core/layouts/auth-layout/workspace-wrapper.tsx
+++ b/apps/web/core/layouts/auth-layout/workspace-wrapper.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { ReactNode } from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
@@ -24,6 +30,7 @@ import {
   WORKSPACE_FAVORITE,
   WORKSPACE_STATES,
   WORKSPACE_SIDEBAR_PREFERENCES,
+  WORKSPACE_PROJECT_NAVIGATION_PREFERENCES,
 } from "@/constants/fetch-keys";
 // hooks
 import { useFavorite } from "@/hooks/store/use-favorite";
@@ -50,7 +57,7 @@ export const WorkspaceAuthWrapper = observer(function WorkspaceAuthWrapper(props
   const {
     workspace: { fetchWorkspaceMembers },
   } = useMember();
-  const { workspaces, fetchSidebarNavigationPreferences } = useWorkspace();
+  const { workspaces, fetchSidebarNavigationPreferences, fetchProjectNavigationPreferences } = useWorkspace();
   const { isMobile } = usePlatformOS();
   const { loader, workspaceInfoBySlug, fetchUserWorkspaceInfo, fetchUserProjectPermissions, allowPermissions } =
     useUserPermissions();
@@ -113,6 +120,13 @@ export const WorkspaceAuthWrapper = observer(function WorkspaceAuthWrapper(props
     { revalidateIfStale: false, revalidateOnFocus: false }
   );
 
+  // fetch workspace project navigation preferences
+  useSWR(
+    workspaceSlug ? WORKSPACE_PROJECT_NAVIGATION_PREFERENCES(workspaceSlug.toString()) : null,
+    workspaceSlug ? () => fetchProjectNavigationPreferences(workspaceSlug.toString()) : null,
+    { revalidateIfStale: false, revalidateOnFocus: false }
+  );
+
   const handleSignOut = async () => {
     await signOut().catch(() =>
       setToast({
@@ -126,7 +140,7 @@ export const WorkspaceAuthWrapper = observer(function WorkspaceAuthWrapper(props
   // if list of workspaces are not there then we have to render the spinner
   if (isParentLoading || allWorkspaces === undefined || loader) {
     return (
-      <div className="grid h-full place-items-center bg-custom-background-100 p-4 rounded-lg border border-custom-border-200">
+      <div className="grid h-full place-items-center rounded-lg border border-subtle p-4">
         <div className="flex flex-col items-center gap-3 text-center">
           <LogoSpinner />
         </div>
@@ -137,16 +151,16 @@ export const WorkspaceAuthWrapper = observer(function WorkspaceAuthWrapper(props
   // if workspaces are there and we are trying to access the workspace that we are not part of then show the existing workspaces
   if (currentWorkspace === undefined && !currentWorkspaceInfo) {
     return (
-      <div className="relative flex h-full w-full flex-col items-center justify-center bg-custom-background-90 ">
-        <div className="container relative mx-auto flex h-full w-full flex-col overflow-hidden overflow-y-auto px-5 py-14 md:px-0">
+      <div className="relative flex h-full w-full flex-col items-center justify-center bg-surface-2">
+        <div className="relative container mx-auto flex h-full w-full flex-col overflow-hidden overflow-y-auto px-5 py-14 md:px-0">
           <div className="relative flex flex-shrink-0 items-center justify-between gap-4">
-            <div className="z-10 flex-shrink-0 bg-custom-background-90 py-4">
-              <PlaneLogo className="h-9 w-auto text-custom-text-100" />
+            <div className="z-10 flex-shrink-0 bg-surface-2 py-4">
+              <PlaneLogo className="h-9 w-auto text-primary" />
             </div>
             <div className="relative flex items-center gap-2">
-              <div className="text-sm font-medium">{currentUser?.email}</div>
+              <div className="text-13 font-medium">{currentUser?.email}</div>
               <div
-                className="relative flex h-6 w-6 flex-shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded hover:bg-custom-background-80"
+                className="relative flex h-6 w-6 flex-shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-sm hover:bg-layer-1"
                 onClick={handleSignOut}
               >
                 <Tooltip tooltipContent={"Sign out"} position="top" className="ml-2" isMobile={isMobile}>
@@ -157,35 +171,32 @@ export const WorkspaceAuthWrapper = observer(function WorkspaceAuthWrapper(props
           </div>
           <div className="relative flex h-full w-full flex-grow flex-col items-center justify-center space-y-3">
             <div className="relative flex-shrink-0">
-              <img src={WorkSpaceNotAvailable} className="h-[220px] object-cover object-center" alt="Plane logo" />
+              <img src={WorkSpaceNotAvailable} className="h-[220px] object-contain object-center" alt="Plane logo" />
             </div>
-            <h3 className="text-center text-lg font-semibold">Workspace not found</h3>
-            <p className="text-center text-sm text-custom-text-200">
+            <h3 className="text-center text-16 font-semibold">Workspace not found</h3>
+            <p className="text-center text-13 text-secondary">
               No workspace found with the URL. It may not exist or you lack authorization to view it.
             </p>
             <div className="flex items-center justify-center gap-2 pt-4">
               {allWorkspaces && allWorkspaces.length > 0 && (
-                <Link href="/" className={cn(getButtonStyling("primary", "md"))}>
+                <Link href="/" className={cn(getButtonStyling("primary", "base"))}>
                   Go Home
                 </Link>
               )}
               {allWorkspaces?.length > 0 && (
-                <Link
-                  href={`/${allWorkspaces[0].slug}/settings/account`}
-                  className={cn(getButtonStyling("neutral-primary", "md"))}
-                >
+                <Link href="/settings/profile/general/" className={cn(getButtonStyling("secondary", "base"))}>
                   Visit Profile
                 </Link>
               )}
               {allWorkspaces && allWorkspaces.length === 0 && (
-                <Link href={`/`} className={cn(getButtonStyling("neutral-primary", "md"))}>
+                <Link href="/create-workspace/" className={cn(getButtonStyling("secondary", "base"))}>
                   Create new workspace
                 </Link>
               )}
             </div>
           </div>
 
-          <div className="absolute bottom-0 left-4 top-0 w-0 bg-custom-background-80 md:w-0.5" />
+          <div className="absolute top-0 bottom-0 left-4 w-0 bg-layer-1 md:w-0.5" />
         </div>
       </div>
     );
@@ -194,12 +205,12 @@ export const WorkspaceAuthWrapper = observer(function WorkspaceAuthWrapper(props
   // while user does not have access to view that workspace
   if (currentWorkspaceInfo === undefined) {
     return (
-      <div className={`h-screen w-full overflow-hidden bg-custom-background-100`}>
+      <div className={`h-screen w-full overflow-hidden bg-surface-1`}>
         <div className="grid h-full place-items-center p-4">
           <div className="space-y-8 text-center">
             <div className="space-y-2">
-              <h3 className="text-lg font-semibold">Not Authorized!</h3>
-              <p className="mx-auto w-1/2 text-sm text-custom-text-200">
+              <h3 className="text-16 font-semibold">Not Authorized!</h3>
+              <p className="mx-auto w-1/2 text-13 text-secondary">
                 You{"'"}re not a member of this workspace. Please contact the workspace admin to get an invitation or
                 check your pending invitations.
               </p>
@@ -207,16 +218,12 @@ export const WorkspaceAuthWrapper = observer(function WorkspaceAuthWrapper(props
             <div className="flex items-center justify-center gap-2">
               <Link href="/invitations">
                 <span>
-                  <Button variant="neutral-primary" size="sm">
-                    Check pending invites
-                  </Button>
+                  <Button variant="secondary">Check pending invites</Button>
                 </span>
               </Link>
               <Link href="/create-workspace">
                 <span>
-                  <Button variant="primary" size="sm">
-                    Create new workspace
-                  </Button>
+                  <Button variant="primary">Create new workspace</Button>
                 </span>
               </Link>
             </div>
diff --git a/apps/web/core/layouts/default-layout/index.tsx b/apps/web/core/layouts/default-layout/index.tsx
index 8be637db4..850d82892 100644
--- a/apps/web/core/layouts/default-layout/index.tsx
+++ b/apps/web/core/layouts/default-layout/index.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { ReactNode } from "react";
 import { cn } from "@plane/utils";
 
@@ -9,9 +15,7 @@ type Props = {
 
 function DefaultLayout({ children, gradient = false, className }: Props) {
   return (
-    <div className={cn(`h-screen w-full overflow-hidden ${gradient ? "" : "bg-custom-background-100"}`, className)}>
-      {children}
-    </div>
+    <div className={cn(`h-screen w-full overflow-hidden ${gradient ? "" : "bg-surface-1"}`, className)}>{children}</div>
   );
 }
 
diff --git a/apps/web/core/lib/app-rail/context.tsx b/apps/web/core/lib/app-rail/context.tsx
index e2e871e4c..70932d7e5 100644
--- a/apps/web/core/lib/app-rail/context.tsx
+++ b/apps/web/core/lib/app-rail/context.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { createContext, useContext } from "react";
 import type { IAppRailVisibilityContext } from "./types";
 
diff --git a/apps/web/core/lib/app-rail/index.ts b/apps/web/core/lib/app-rail/index.ts
index 053a94f0c..2e5c29a90 100644
--- a/apps/web/core/lib/app-rail/index.ts
+++ b/apps/web/core/lib/app-rail/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./context";
 export * from "./provider";
 export * from "./types";
diff --git a/apps/web/core/lib/app-rail/provider.tsx b/apps/web/core/lib/app-rail/provider.tsx
index e51e82c9c..7788b786b 100644
--- a/apps/web/core/lib/app-rail/provider.tsx
+++ b/apps/web/core/lib/app-rail/provider.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React, { useCallback, useMemo } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
diff --git a/apps/web/core/lib/app-rail/types.ts b/apps/web/core/lib/app-rail/types.ts
index 36dbcb129..459fed892 100644
--- a/apps/web/core/lib/app-rail/types.ts
+++ b/apps/web/core/lib/app-rail/types.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 /**
  * Type definitions for app-rail visibility context
  */
diff --git a/apps/web/core/lib/b-progress/AppProgressBar.tsx b/apps/web/core/lib/b-progress/AppProgressBar.tsx
index 7ad93fc11..c3e0f03cc 100644
--- a/apps/web/core/lib/b-progress/AppProgressBar.tsx
+++ b/apps/web/core/lib/b-progress/AppProgressBar.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useEffect, useRef } from "react";
 import { BProgress } from "@bprogress/core";
 import { useNavigation } from "react-router";
@@ -60,7 +66,7 @@ const PROGRESS_CONFIG: Readonly<ProgressConfig> = {
  * }
  * ```
  */
-export function AppProgressBar(): null {
+export default function AppProgressBar(): null {
   const navigation = useNavigation();
   const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const startedRef = useRef<boolean>(false);
diff --git a/apps/web/core/lib/b-progress/index.tsx b/apps/web/core/lib/b-progress/index.tsx
deleted file mode 100644
index 7b531da2b..000000000
--- a/apps/web/core/lib/b-progress/index.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./AppProgressBar";
diff --git a/apps/web/core/lib/local-storage.ts b/apps/web/core/lib/local-storage.ts
index f81b96d95..b68c12217 100644
--- a/apps/web/core/lib/local-storage.ts
+++ b/apps/web/core/lib/local-storage.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { isEmpty } from "lodash-es";
 
 export const storage = {
diff --git a/apps/web/core/lib/polyfills/index.ts b/apps/web/core/lib/polyfills/index.ts
index e006a090f..2243dc620 100644
--- a/apps/web/core/lib/polyfills/index.ts
+++ b/apps/web/core/lib/polyfills/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 if (typeof window !== "undefined" && window) {
   // Add request callback polyfill to browser in case it does not exist
   window.requestIdleCallback =
diff --git a/apps/web/core/lib/posthog-provider.tsx b/apps/web/core/lib/posthog-provider.tsx
deleted file mode 100644
index cb3d691a9..000000000
--- a/apps/web/core/lib/posthog-provider.tsx
+++ /dev/null
@@ -1,120 +0,0 @@
-import type { ReactNode } from "react";
-import { lazy, Suspense, useEffect, useCallback, useRef, useState } from "react";
-import { PostHogProvider as PHProvider } from "@posthog/react";
-import { observer } from "mobx-react";
-import { useParams } from "next/navigation";
-import posthog from "posthog-js";
-// constants
-import { GROUP_WORKSPACE_TRACKER_EVENT } from "@plane/constants";
-// helpers
-import { getUserRole } from "@plane/utils";
-// hooks
-import { captureClick, joinEventGroup } from "@/helpers/event-tracker.helper";
-import { useInstance } from "@/hooks/store/use-instance";
-import { useWorkspace } from "@/hooks/store/use-workspace";
-import { useUser, useUserPermissions } from "@/hooks/store/user";
-// dynamic imports
-const PostHogPageView = lazy(function PostHogPageView() {
-  return import("@/lib/posthog-view");
-});
-
-export interface IPosthogWrapper {
-  children: ReactNode;
-}
-
-const PostHogProvider = observer(function PostHogProvider(props: IPosthogWrapper) {
-  const { children } = props;
-  const { data: user } = useUser();
-  const { currentWorkspace } = useWorkspace();
-  const { instance } = useInstance();
-  const { workspaceSlug, projectId } = useParams();
-  const { getWorkspaceRoleByWorkspaceSlug, getProjectRoleByWorkspaceSlugAndProjectId } = useUserPermissions();
-  // refs
-  const isInitializedRef = useRef(false);
-  // states
-  const [hydrated, setHydrated] = useState(false);
-  // derived values
-  const currentProjectRole = getProjectRoleByWorkspaceSlugAndProjectId(
-    workspaceSlug?.toString(),
-    projectId?.toString()
-  );
-  const currentWorkspaceRole = getWorkspaceRoleByWorkspaceSlug(workspaceSlug?.toString());
-  const is_telemetry_enabled = instance?.is_telemetry_enabled || false;
-  const is_posthog_enabled = process.env.VITE_POSTHOG_KEY && process.env.VITE_POSTHOG_HOST && is_telemetry_enabled;
-
-  useEffect(() => {
-    if (user && hydrated) {
-      // Identify sends an event, so you want may want to limit how often you call it
-      posthog?.identify(user.email, {
-        id: user.id,
-        first_name: user.first_name,
-        last_name: user.last_name,
-        email: user.email,
-        workspace_role: currentWorkspaceRole ? getUserRole(currentWorkspaceRole) : undefined,
-        project_role: currentProjectRole ? getUserRole(currentProjectRole) : undefined,
-      });
-      if (currentWorkspace) {
-        joinEventGroup(GROUP_WORKSPACE_TRACKER_EVENT, currentWorkspace?.id, {
-          date: new Date().toDateString(),
-          workspace_id: currentWorkspace?.id,
-        });
-      }
-    }
-  }, [user, currentProjectRole, currentWorkspaceRole, currentWorkspace, hydrated]);
-
-  useEffect(() => {
-    if (isInitializedRef.current) return; // prevent multiple initializations
-    const posthogKey = process.env.VITE_POSTHOG_KEY;
-    const posthogHost = process.env.VITE_POSTHOG_HOST;
-    const isDebugMode = process.env.VITE_POSTHOG_DEBUG === "1";
-    if (posthogKey && posthogHost && !posthog.__loaded) {
-      posthog.init(posthogKey, {
-        api_host: posthogHost,
-        ui_host: posthogHost,
-        debug: isDebugMode, // Debug mode based on the environment variable
-        autocapture: false,
-        capture_pageview: false, // Disable automatic pageview capture, as we capture manually
-        capture_pageleave: true,
-        disable_session_recording: true,
-      });
-      isInitializedRef.current = true;
-      setHydrated(true);
-    }
-  }, []);
-
-  const clickHandler = useCallback((event: MouseEvent) => {
-    const target = event.target as HTMLElement;
-    // Use closest to find the nearest parent element with data-ph-element attribute
-    const elementWithAttribute = target.closest("[data-ph-element]") as HTMLElement;
-    if (elementWithAttribute) {
-      const element = elementWithAttribute.getAttribute("data-ph-element");
-      if (element) {
-        captureClick({ elementName: element });
-      }
-    }
-  }, []);
-
-  useEffect(() => {
-    if (!is_posthog_enabled || !hydrated) return;
-
-    document.addEventListener("click", clickHandler);
-
-    return () => {
-      document.removeEventListener("click", clickHandler);
-    };
-  }, [hydrated, is_posthog_enabled, clickHandler]);
-
-  if (is_posthog_enabled && hydrated)
-    return (
-      <PHProvider client={posthog}>
-        <Suspense>
-          <PostHogPageView />
-        </Suspense>
-        {children}
-      </PHProvider>
-    );
-
-  return <>{children}</>;
-});
-
-export default PostHogProvider;
diff --git a/apps/web/core/lib/posthog-view.tsx b/apps/web/core/lib/posthog-view.tsx
deleted file mode 100644
index 1c29ea567..000000000
--- a/apps/web/core/lib/posthog-view.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import { useEffect } from "react";
-import { usePathname, useSearchParams } from "next/navigation";
-// posthog
-import { usePostHog } from "posthog-js/react";
-
-export default function PostHogPageView(): null {
-  const pathname = usePathname();
-  const searchParams = useSearchParams();
-  const posthog = usePostHog();
-  useEffect(() => {
-    // Track pageviews
-    if (pathname && posthog) {
-      let url = window.origin + pathname;
-      if (searchParams.toString()) {
-        url = url + `?${searchParams.toString()}`;
-      }
-      posthog.capture("$pageview", {
-        $current_url: url,
-      });
-    }
-  }, [pathname, searchParams, posthog]);
-
-  return null;
-}
diff --git a/apps/web/core/lib/store-context.tsx b/apps/web/core/lib/store-context.tsx
index 5402bb9fe..6a5f5c210 100644
--- a/apps/web/core/lib/store-context.tsx
+++ b/apps/web/core/lib/store-context.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { ReactElement } from "react";
 import { createContext } from "react";
 // plane web store
diff --git a/apps/web/core/lib/wrappers/authentication-wrapper.tsx b/apps/web/core/lib/wrappers/authentication-wrapper.tsx
index 5d8ae189b..fc142c300 100644
--- a/apps/web/core/lib/wrappers/authentication-wrapper.tsx
+++ b/apps/web/core/lib/wrappers/authentication-wrapper.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { ReactNode } from "react";
 import { observer } from "mobx-react";
 import { useSearchParams, usePathname } from "next/navigation";
diff --git a/apps/web/core/lib/wrappers/instance-wrapper.tsx b/apps/web/core/lib/wrappers/instance-wrapper.tsx
index 817ebc719..c5beae4d0 100644
--- a/apps/web/core/lib/wrappers/instance-wrapper.tsx
+++ b/apps/web/core/lib/wrappers/instance-wrapper.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { ReactNode } from "react";
 import { observer } from "mobx-react";
 import useSWR from "swr";
@@ -11,7 +17,7 @@ type TInstanceWrapper = {
   children: ReactNode;
 };
 
-export const InstanceWrapper = observer(function InstanceWrapper(props: TInstanceWrapper) {
+const InstanceWrapper = observer(function InstanceWrapper(props: TInstanceWrapper) {
   const { children } = props;
   // store
   const { isLoading, instance, error, fetchInstanceInfo } = useInstance();
@@ -40,3 +46,5 @@ export const InstanceWrapper = observer(function InstanceWrapper(props: TInstanc
 
   return <>{children}</>;
 });
+
+export default InstanceWrapper;
diff --git a/apps/web/core/lib/wrappers/store-wrapper.tsx b/apps/web/core/lib/wrappers/store-wrapper.tsx
index b05f578bb..64c094005 100644
--- a/apps/web/core/lib/wrappers/store-wrapper.tsx
+++ b/apps/web/core/lib/wrappers/store-wrapper.tsx
@@ -1,12 +1,18 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { ReactNode } from "react";
-import { useEffect } from "react";
+import { useEffect, useRef } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 import { useTheme } from "next-themes";
 import type { TLanguage } from "@plane/i18n";
 import { useTranslation } from "@plane/i18n";
 // helpers
-import { applyTheme, unsetCustomCssVariables } from "@plane/utils";
+import { applyCustomTheme, clearCustomTheme } from "@plane/utils";
 // hooks
 import { useAppTheme } from "@/hooks/store/use-app-theme";
 import { useRouterParams } from "@/hooks/store/use-router-params";
@@ -16,7 +22,7 @@ type TStoreWrapper = {
   children: ReactNode;
 };
 
-const StoreWrapper = observer(function StoreWrapper(props: TStoreWrapper) {
+function StoreWrapper(props: TStoreWrapper) {
   const { children } = props;
   // theme
   const { setTheme } = useTheme();
@@ -28,6 +34,13 @@ const StoreWrapper = observer(function StoreWrapper(props: TStoreWrapper) {
   const { data: userProfile } = useUserProfile();
   const { changeLanguage } = useTranslation();
 
+  // Track if we've initialized theme from server (one-time only)
+  const hasInitializedThemeRef = useRef(false);
+  // Track current user to reset on logout/login
+  const currentUserIdRef = useRef<string | undefined>(undefined);
+  // Track previous theme to detect transitions from custom theme
+  const previousThemeRef = useRef<string | undefined>(undefined);
+
   /**
    * Sidebar collapsed fetching from local storage
    */
@@ -38,22 +51,61 @@ const StoreWrapper = observer(function StoreWrapper(props: TStoreWrapper) {
   }, [sidebarCollapsed, setTheme, toggleSidebar]);
 
   /**
-   * Setting up the theme of the user by fetching it from local storage
+   * Effect 1: Initial theme sync from server (one-time only)
+   *
+   * This effect runs ONCE per user session to load theme from server.
+   * After initial load, all theme changes are localStorage-driven (next-themes).
+   * This prevents a feedback loop where server updates trigger UI updates in a cycle.
+   */
+  useEffect(() => {
+    const userId = userProfile?.id;
+
+    // Reset initialization flag when user changes (logout/login)
+    // This handles both logout (userId becomes undefined) and login (userId changes)
+    if (userId !== currentUserIdRef.current) {
+      hasInitializedThemeRef.current = false;
+      previousThemeRef.current = undefined;
+      currentUserIdRef.current = userId;
+    }
+
+    // Only initialize theme from server on FIRST load for this user
+    if (!userProfile?.theme?.theme || hasInitializedThemeRef.current) {
+      return; // Skip if already initialized or no profile data
+    }
+
+    // Apply theme from server profile (one-time only)
+    setTheme(userProfile?.theme?.theme || "system");
+
+    // Mark as initialized - prevents future syncs from server
+    hasInitializedThemeRef.current = true;
+  }, [userProfile?.theme?.theme, setTheme]);
+
+  /**
+   * Effect 2: Custom theme CSS application (runs on every change)
+   *
+   * This effect applies or clears custom theme CSS variables whenever
+   * the theme changes. It runs independently of the initial sync effect.
    */
   useEffect(() => {
     if (!userProfile?.theme?.theme) return;
-    const currentTheme = userProfile?.theme?.theme || "system";
-    const currentThemePalette = userProfile?.theme?.palette;
-    if (currentTheme) {
-      setTheme(currentTheme);
-      if (currentTheme === "custom" && currentThemePalette) {
-        applyTheme(
-          currentThemePalette !== ",,,," ? currentThemePalette : "#0d101b,#c5c5c5,#3f76ff,#0d101b,#c5c5c5",
-          false
-        );
-      } else unsetCustomCssVariables();
+
+    const currentTheme = userProfile?.theme?.theme;
+    const previousTheme = previousThemeRef.current;
+    const themeData = userProfile?.theme;
+
+    // Apply custom theme if current theme is custom
+    if (currentTheme === "custom" && themeData.primary && themeData.background && themeData.darkPalette !== undefined) {
+      applyCustomTheme(themeData.primary, themeData.background, themeData.darkPalette ? "dark" : "light");
     }
-  }, [userProfile?.theme?.theme, userProfile?.theme?.palette, setTheme]);
+    // Clear custom theme CSS when switching away from custom
+    else if (previousTheme === "custom" && currentTheme !== "custom") {
+      clearCustomTheme();
+      // No reload needed - let CSS cascade handle it naturally
+    }
+
+    // Update previous theme for next comparison
+    previousThemeRef.current = currentTheme;
+  }, [userProfile?.theme]);
 
   useEffect(() => {
     if (!userProfile?.language) return;
@@ -66,6 +118,6 @@ const StoreWrapper = observer(function StoreWrapper(props: TStoreWrapper) {
   }, [params, setQuery]);
 
   return <>{children}</>;
-});
+}
 
-export default StoreWrapper;
+export default observer(StoreWrapper);
diff --git a/apps/web/core/services/ai.service.ts b/apps/web/core/services/ai.service.ts
index 92f9d30d9..4c7612dfe 100644
--- a/apps/web/core/services/ai.service.ts
+++ b/apps/web/core/services/ai.service.ts
@@ -1,7 +1,13 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // helpers
 import { API_BASE_URL } from "@plane/constants";
 // plane web constants
-import type { AI_EDITOR_TASKS } from "@/plane-web/constants/ai";
+import type { AI_EDITOR_TASKS } from "@/constants/ai";
 // services
 import { APIService } from "@/services/api.service";
 // types
diff --git a/apps/web/core/services/analytics.service.ts b/apps/web/core/services/analytics.service.ts
index e3ccfb500..4480d37bd 100644
--- a/apps/web/core/services/analytics.service.ts
+++ b/apps/web/core/services/analytics.service.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // plane imports
 import { API_BASE_URL } from "@plane/constants";
 import type {
@@ -82,7 +88,7 @@ export class AnalyticsService extends APIService {
       });
   }
 
-  processUrl<T extends string>(
+  processUrl<_T extends string>(
     endpoint: string,
     workspaceSlug: string,
     tab: TAnalyticsGraphsBase | TAnalyticsTabsBase,
diff --git a/apps/web/core/services/api.service.ts b/apps/web/core/services/api.service.ts
index 7c6cd1c6e..4ef1a2a4b 100644
--- a/apps/web/core/services/api.service.ts
+++ b/apps/web/core/services/api.service.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import type { AxiosInstance, AxiosRequestConfig } from "axios";
 import axios from "axios";
diff --git a/apps/web/core/services/app_config.service.ts b/apps/web/core/services/app_config.service.ts
index e930ac232..f7d75c7e7 100644
--- a/apps/web/core/services/app_config.service.ts
+++ b/apps/web/core/services/app_config.service.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // services
 import { API_BASE_URL } from "@plane/constants";
 import { APIService } from "@/services/api.service";
diff --git a/apps/web/core/services/app_installation.service.ts b/apps/web/core/services/app_installation.service.ts
index 6c5f0e4de..d91600c47 100644
--- a/apps/web/core/services/app_installation.service.ts
+++ b/apps/web/core/services/app_installation.service.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // services
 import { API_BASE_URL } from "@plane/constants";
 import { APIService } from "@/services/api.service";
diff --git a/apps/web/core/services/auth.service.ts b/apps/web/core/services/auth.service.ts
index d1360f9ae..c2aff17e5 100644
--- a/apps/web/core/services/auth.service.ts
+++ b/apps/web/core/services/auth.service.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // types
 import { API_BASE_URL } from "@plane/constants";
 import type { ICsrfTokenData, IEmailCheckData, IEmailCheckResponse } from "@plane/types";
diff --git a/apps/web/core/services/cycle.service.ts b/apps/web/core/services/cycle.service.ts
index 222f04bf2..75385ed96 100644
--- a/apps/web/core/services/cycle.service.ts
+++ b/apps/web/core/services/cycle.service.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // services
 import { API_BASE_URL } from "@plane/constants";
 import type {
diff --git a/apps/web/core/services/cycle_archive.service.ts b/apps/web/core/services/cycle_archive.service.ts
index 22b1e9433..564747d03 100644
--- a/apps/web/core/services/cycle_archive.service.ts
+++ b/apps/web/core/services/cycle_archive.service.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // type
 import { API_BASE_URL } from "@plane/constants";
 import type { ICycle } from "@plane/types";
diff --git a/apps/web/core/services/dashboard.service.ts b/apps/web/core/services/dashboard.service.ts
index 211b47173..a6ebc4629 100644
--- a/apps/web/core/services/dashboard.service.ts
+++ b/apps/web/core/services/dashboard.service.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { API_BASE_URL } from "@plane/constants";
 import type { THomeDashboardResponse, TWidget, TWidgetStatsResponse, TWidgetStatsRequestParams } from "@plane/types";
 import { APIService } from "@/services/api.service";
diff --git a/apps/web/ce/services/project/estimate.service.ts b/apps/web/core/services/estimate.service.ts
similarity index 94%
rename from apps/web/ce/services/project/estimate.service.ts
rename to apps/web/core/services/estimate.service.ts
index 95b9a39a4..343d4b016 100644
--- a/apps/web/ce/services/project/estimate.service.ts
+++ b/apps/web/core/services/estimate.service.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 /* eslint-disable no-useless-catch */
 
 // types
diff --git a/apps/web/core/services/favorite/favorite.service.ts b/apps/web/core/services/favorite/favorite.service.ts
index 13168932f..6e8dd9f9a 100644
--- a/apps/web/core/services/favorite/favorite.service.ts
+++ b/apps/web/core/services/favorite/favorite.service.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { API_BASE_URL } from "@plane/constants";
 import type { IFavorite } from "@plane/types";
 // helpers
diff --git a/apps/web/core/services/favorite/index.ts b/apps/web/core/services/favorite/index.ts
index 41df23a17..a789ea33c 100644
--- a/apps/web/core/services/favorite/index.ts
+++ b/apps/web/core/services/favorite/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./favorite.service";
diff --git a/apps/web/core/services/file-upload.service.ts b/apps/web/core/services/file-upload.service.ts
index 1c404cb02..f8f493967 100644
--- a/apps/web/core/services/file-upload.service.ts
+++ b/apps/web/core/services/file-upload.service.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { AxiosRequestConfig } from "axios";
 import axios from "axios";
 // services
diff --git a/apps/web/core/services/file.service.ts b/apps/web/core/services/file.service.ts
index cfa367376..6e252d76a 100644
--- a/apps/web/core/services/file.service.ts
+++ b/apps/web/core/services/file.service.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { AxiosRequestConfig } from "axios";
 // plane types
 import { API_BASE_URL } from "@plane/constants";
diff --git a/apps/web/core/services/inbox/inbox-issue.service.ts b/apps/web/core/services/inbox/inbox-issue.service.ts
index 3cdfc28fc..af0b4dee4 100644
--- a/apps/web/core/services/inbox/inbox-issue.service.ts
+++ b/apps/web/core/services/inbox/inbox-issue.service.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // plane imports
 import { API_BASE_URL } from "@plane/constants";
 import type { TInboxIssue, TIssue, TInboxIssueWithPagination } from "@plane/types";
diff --git a/apps/web/core/services/inbox/index.ts b/apps/web/core/services/inbox/index.ts
index 64bbf162b..03fb81197 100644
--- a/apps/web/core/services/inbox/index.ts
+++ b/apps/web/core/services/inbox/index.ts
@@ -1,2 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./inbox-issue.service";
 export * from "./intake-work_item_version.service";
diff --git a/apps/web/core/services/inbox/intake-work_item_version.service.ts b/apps/web/core/services/inbox/intake-work_item_version.service.ts
index 231ae718c..5d821dbd4 100644
--- a/apps/web/core/services/inbox/intake-work_item_version.service.ts
+++ b/apps/web/core/services/inbox/intake-work_item_version.service.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // plane imports
 import { API_BASE_URL } from "@plane/constants";
 import type { TDescriptionVersionsListResponse, TDescriptionVersionDetails } from "@plane/types";
diff --git a/apps/web/core/services/instance.service.ts b/apps/web/core/services/instance.service.ts
index b85fad7db..875401da3 100644
--- a/apps/web/core/services/instance.service.ts
+++ b/apps/web/core/services/instance.service.ts
@@ -1,6 +1,12 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // types
 import { API_BASE_URL } from "@plane/constants";
-import type { IInstanceInfo, TPage } from "@plane/types";
+import type { IInstanceInfo } from "@plane/types";
 // helpers
 // services
 import { APIService } from "@/services/api.service";
diff --git a/apps/web/core/services/integrations/github.service.ts b/apps/web/core/services/integrations/github.service.ts
index 11fdaf1e0..5992ffad4 100644
--- a/apps/web/core/services/integrations/github.service.ts
+++ b/apps/web/core/services/integrations/github.service.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { API_BASE_URL } from "@plane/constants";
 import type { IGithubRepoInfo, IGithubServiceImportFormData } from "@plane/types";
 import { APIService } from "@/services/api.service";
diff --git a/apps/web/core/services/integrations/index.ts b/apps/web/core/services/integrations/index.ts
index cf9a070ee..595441e0d 100644
--- a/apps/web/core/services/integrations/index.ts
+++ b/apps/web/core/services/integrations/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./github.service";
 export * from "./integration.service";
 export * from "./jira.service";
diff --git a/apps/web/core/services/integrations/integration.service.ts b/apps/web/core/services/integrations/integration.service.ts
index 0f6ef6a0d..e158ef35a 100644
--- a/apps/web/core/services/integrations/integration.service.ts
+++ b/apps/web/core/services/integrations/integration.service.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { API_BASE_URL } from "@plane/constants";
 import type { IAppIntegration, IImporterService, IWorkspaceIntegration, IExportServiceResponse } from "@plane/types";
 import { APIService } from "@/services/api.service";
diff --git a/apps/web/core/services/integrations/jira.service.ts b/apps/web/core/services/integrations/jira.service.ts
index 935b15a33..cbc3e3623 100644
--- a/apps/web/core/services/integrations/jira.service.ts
+++ b/apps/web/core/services/integrations/jira.service.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { API_BASE_URL } from "@plane/constants";
 import type { IJiraMetadata, IJiraResponse, IJiraImporterForm } from "@plane/types";
 import { APIService } from "@/services/api.service";
diff --git a/apps/web/core/services/issue/index.ts b/apps/web/core/services/issue/index.ts
index 08983c0e1..3b3525ec1 100644
--- a/apps/web/core/services/issue/index.ts
+++ b/apps/web/core/services/issue/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./issue_archive.service";
 export * from "./issue.service";
 export * from "./issue_reaction.service";
diff --git a/apps/web/core/services/issue/issue.service.ts b/apps/web/core/services/issue/issue.service.ts
index cae879ff6..f80ed3805 100644
--- a/apps/web/core/services/issue/issue.service.ts
+++ b/apps/web/core/services/issue/issue.service.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // plane imports
 import { API_BASE_URL } from "@plane/constants";
 import { EIssueServiceType } from "@plane/types";
diff --git a/apps/web/core/services/issue/issue_activity.service.ts b/apps/web/core/services/issue/issue_activity.service.ts
index 1a31da5fd..61102f808 100644
--- a/apps/web/core/services/issue/issue_activity.service.ts
+++ b/apps/web/core/services/issue/issue_activity.service.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { API_BASE_URL } from "@plane/constants";
 import type { TIssueActivity, TIssueServiceType } from "@plane/types";
 import { EIssueServiceType } from "@plane/types";
diff --git a/apps/web/core/services/issue/issue_archive.service.ts b/apps/web/core/services/issue/issue_archive.service.ts
index eccd95699..0ebf5abc6 100644
--- a/apps/web/core/services/issue/issue_archive.service.ts
+++ b/apps/web/core/services/issue/issue_archive.service.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { API_BASE_URL } from "@plane/constants";
 import type { TIssue, TIssueServiceType } from "@plane/types";
 import { EIssueServiceType } from "@plane/types";
diff --git a/apps/web/core/services/issue/issue_attachment.service.ts b/apps/web/core/services/issue/issue_attachment.service.ts
index f8bb1df85..98660ae6c 100644
--- a/apps/web/core/services/issue/issue_attachment.service.ts
+++ b/apps/web/core/services/issue/issue_attachment.service.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { AxiosRequestConfig } from "axios";
 import { API_BASE_URL } from "@plane/constants";
 // plane types
diff --git a/apps/web/core/services/issue/issue_comment.service.ts b/apps/web/core/services/issue/issue_comment.service.ts
index 05425f206..873c8a1ca 100644
--- a/apps/web/core/services/issue/issue_comment.service.ts
+++ b/apps/web/core/services/issue/issue_comment.service.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // plane types
 import { API_BASE_URL } from "@plane/constants";
 import type { TIssueComment, TIssueServiceType } from "@plane/types";
diff --git a/apps/web/core/services/issue/issue_label.service.ts b/apps/web/core/services/issue/issue_label.service.ts
index 00971feb7..d07fcd7d7 100644
--- a/apps/web/core/services/issue/issue_label.service.ts
+++ b/apps/web/core/services/issue/issue_label.service.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { API_BASE_URL } from "@plane/constants";
 import type { IIssueLabel } from "@plane/types";
 // services
diff --git a/apps/web/core/services/issue/issue_reaction.service.ts b/apps/web/core/services/issue/issue_reaction.service.ts
index fe5752f16..513631020 100644
--- a/apps/web/core/services/issue/issue_reaction.service.ts
+++ b/apps/web/core/services/issue/issue_reaction.service.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { API_BASE_URL } from "@plane/constants";
 import { EIssueServiceType } from "@plane/types";
 import type { TIssueCommentReaction, TIssueReaction, TIssueServiceType } from "@plane/types";
diff --git a/apps/web/core/services/issue/issue_relation.service.ts b/apps/web/core/services/issue/issue_relation.service.ts
index cb9c46bc7..906cacbd5 100644
--- a/apps/web/core/services/issue/issue_relation.service.ts
+++ b/apps/web/core/services/issue/issue_relation.service.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { API_BASE_URL } from "@plane/constants";
 import type { TIssueRelation, TIssue } from "@plane/types";
 // helpers
diff --git a/apps/web/core/services/issue/work_item_version.service.ts b/apps/web/core/services/issue/work_item_version.service.ts
index 81802aa86..d36cb5241 100644
--- a/apps/web/core/services/issue/work_item_version.service.ts
+++ b/apps/web/core/services/issue/work_item_version.service.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // plane imports
 import { API_BASE_URL } from "@plane/constants";
 import { EIssueServiceType } from "@plane/types";
diff --git a/apps/web/core/services/issue/workspace_draft.service.ts b/apps/web/core/services/issue/workspace_draft.service.ts
index 45626d5d1..f66841eb1 100644
--- a/apps/web/core/services/issue/workspace_draft.service.ts
+++ b/apps/web/core/services/issue/workspace_draft.service.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { API_BASE_URL } from "@plane/constants";
 import type { TIssue, TWorkspaceDraftIssue, TWorkspaceDraftPaginationInfo } from "@plane/types";
 // helpers
diff --git a/apps/web/core/services/issue_filter.service.ts b/apps/web/core/services/issue_filter.service.ts
index d6f67b108..ac3f8fb5a 100644
--- a/apps/web/core/services/issue_filter.service.ts
+++ b/apps/web/core/services/issue_filter.service.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // services
 import { API_BASE_URL } from "@plane/constants";
 import type { IIssueFiltersResponse } from "@plane/types";
@@ -28,26 +34,6 @@ export class IssueFiltersService extends APIService {
   //     });
   // }
 
-  // project issue filters
-  async fetchProjectIssueFilters(workspaceSlug: string, projectId: string): Promise<IIssueFiltersResponse> {
-    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/user-properties/`)
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-  async patchProjectIssueFilters(
-    workspaceSlug: string,
-    projectId: string,
-    data: Partial<IIssueFiltersResponse>
-  ): Promise<any> {
-    return this.patch(`/api/workspaces/${workspaceSlug}/projects/${projectId}/user-properties/`, data)
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
   // epic issue filters
   async fetchProjectEpicFilters(workspaceSlug: string, projectId: string): Promise<IIssueFiltersResponse> {
     return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/epics-user-properties/`)
diff --git a/apps/web/core/services/module.service.ts b/apps/web/core/services/module.service.ts
index cf67fcf94..8546ef087 100644
--- a/apps/web/core/services/module.service.ts
+++ b/apps/web/core/services/module.service.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // types
 import { API_BASE_URL } from "@plane/constants";
 import type { IModule, ILinkDetails, ModuleLink, TIssuesResponse } from "@plane/types";
diff --git a/apps/web/core/services/module_archive.service.ts b/apps/web/core/services/module_archive.service.ts
index 2a7566ec9..be907466b 100644
--- a/apps/web/core/services/module_archive.service.ts
+++ b/apps/web/core/services/module_archive.service.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // type
 import { API_BASE_URL } from "@plane/constants";
 import type { IModule } from "@plane/types";
diff --git a/apps/web/core/services/page/index.ts b/apps/web/core/services/page/index.ts
index b25199e7f..cd5daae28 100644
--- a/apps/web/core/services/page/index.ts
+++ b/apps/web/core/services/page/index.ts
@@ -1,2 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./project-page-version.service";
 export * from "./project-page.service";
diff --git a/apps/web/core/services/page/project-page-version.service.ts b/apps/web/core/services/page/project-page-version.service.ts
index 4d842785a..452014b6b 100644
--- a/apps/web/core/services/page/project-page-version.service.ts
+++ b/apps/web/core/services/page/project-page-version.service.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // plane types
 import { API_BASE_URL } from "@plane/constants";
 import type { TPageVersion } from "@plane/types";
diff --git a/apps/web/core/services/page/project-page.service.ts b/apps/web/core/services/page/project-page.service.ts
index 16a670384..817907e4e 100644
--- a/apps/web/core/services/page/project-page.service.ts
+++ b/apps/web/core/services/page/project-page.service.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // types
 import { API_BASE_URL } from "@plane/constants";
 import type { TDocumentPayload, TPage } from "@plane/types";
diff --git a/apps/web/core/services/project/index.ts b/apps/web/core/services/project/index.ts
index 9b11f60ed..0be71d3eb 100644
--- a/apps/web/core/services/project/index.ts
+++ b/apps/web/core/services/project/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./project.service";
 export * from "./project-export.service";
 export * from "./project-member.service";
diff --git a/apps/web/core/services/project/project-archive.service.ts b/apps/web/core/services/project/project-archive.service.ts
index 8e0d87773..b60763f70 100644
--- a/apps/web/core/services/project/project-archive.service.ts
+++ b/apps/web/core/services/project/project-archive.service.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // helpers
 import { API_BASE_URL } from "@plane/constants";
 // services
diff --git a/apps/web/core/services/project/project-export.service.ts b/apps/web/core/services/project/project-export.service.ts
index 7ae47c6dc..73dd1249c 100644
--- a/apps/web/core/services/project/project-export.service.ts
+++ b/apps/web/core/services/project/project-export.service.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { API_BASE_URL } from "@plane/constants";
 import type { TWorkItemFilterExpression } from "@plane/types";
 import { APIService } from "@/services/api.service";
diff --git a/apps/web/core/services/project/project-member.service.ts b/apps/web/core/services/project/project-member.service.ts
index 04d62d153..037fc1fd7 100644
--- a/apps/web/core/services/project/project-member.service.ts
+++ b/apps/web/core/services/project/project-member.service.ts
@@ -1,12 +1,12 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // types
 import { API_BASE_URL } from "@plane/constants";
-import type {
-  IProjectBulkAddFormData,
-  IProjectMemberPreferencesFullResponse,
-  IProjectMemberPreferencesResponse,
-  IProjectMemberPreferencesUpdate,
-  TProjectMembership,
-} from "@plane/types";
+import type { IProjectBulkAddFormData, TProjectMembership } from "@plane/types";
 // services
 import { APIService } from "@/services/api.service";
 
@@ -71,31 +71,6 @@ export class ProjectMemberService extends APIService {
         throw error?.response?.data;
       });
   }
-
-  async getProjectMemberPreferences(
-    workspaceSlug: string,
-    projectId: string,
-    memberId: string
-  ): Promise<IProjectMemberPreferencesFullResponse> {
-    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/preferences/member/${memberId}/`)
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async updateProjectMemberPreferences(
-    workspaceSlug: string,
-    projectId: string,
-    memberId: string,
-    data: IProjectMemberPreferencesUpdate
-  ): Promise<IProjectMemberPreferencesResponse> {
-    return this.patch(`/api/workspaces/${workspaceSlug}/projects/${projectId}/preferences/member/${memberId}/`, data)
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
 }
 
 const projectMemberService = new ProjectMemberService();
diff --git a/apps/web/core/services/project/project-publish.service.ts b/apps/web/core/services/project/project-publish.service.ts
index 76a931b8f..b027d73d0 100644
--- a/apps/web/core/services/project/project-publish.service.ts
+++ b/apps/web/core/services/project/project-publish.service.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // types
 import { API_BASE_URL } from "@plane/constants";
 import type { TProjectPublishSettings } from "@plane/types";
diff --git a/apps/web/core/services/project/project-state.service.ts b/apps/web/core/services/project/project-state.service.ts
index ca0d344d0..4ec2b97e3 100644
--- a/apps/web/core/services/project/project-state.service.ts
+++ b/apps/web/core/services/project/project-state.service.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // services
 import { API_BASE_URL } from "@plane/constants";
 import type { IIntakeState, IState } from "@plane/types";
diff --git a/apps/web/core/services/project/project.service.ts b/apps/web/core/services/project/project.service.ts
index 5915c7608..885cb1bdd 100644
--- a/apps/web/core/services/project/project.service.ts
+++ b/apps/web/core/services/project/project.service.ts
@@ -1,6 +1,13 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { API_BASE_URL } from "@plane/constants";
 import type {
   GithubRepositoriesResponse,
+  IProjectUserPropertiesResponse,
   ISearchIssueResponse,
   TProjectAnalyticsCount,
   TProjectAnalyticsCountParams,
@@ -90,14 +97,21 @@ export class ProjectService extends APIService {
       });
   }
 
-  async setProjectView(
+  // User Properties
+  async getProjectUserProperties(workspaceSlug: string, projectId: string): Promise<IProjectUserPropertiesResponse> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/user-properties/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async updateProjectUserProperties(
     workspaceSlug: string,
     projectId: string,
-    data: {
-      sort_order?: number;
-    }
-  ): Promise<any> {
-    await this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/project-views/`, data)
+    data: Partial<IProjectUserPropertiesResponse>
+  ): Promise<IProjectUserPropertiesResponse> {
+    return this.patch(`/api/workspaces/${workspaceSlug}/projects/${projectId}/user-properties/`, data)
       .then((response) => response?.data)
       .catch((error) => {
         throw error?.response?.data;
diff --git a/apps/web/core/services/sticky.service.ts b/apps/web/core/services/sticky.service.ts
index e3c470791..ff4491e8e 100644
--- a/apps/web/core/services/sticky.service.ts
+++ b/apps/web/core/services/sticky.service.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // helpers
 import { STICKIES_PER_PAGE, API_BASE_URL } from "@plane/constants";
 import type { TSticky } from "@plane/types";
diff --git a/apps/web/core/services/timezone.service.ts b/apps/web/core/services/timezone.service.ts
index 0b0854232..b66609a41 100644
--- a/apps/web/core/services/timezone.service.ts
+++ b/apps/web/core/services/timezone.service.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { API_BASE_URL } from "@plane/constants";
 import type { TTimezones } from "@plane/types";
 // helpers
diff --git a/apps/web/core/services/user.service.ts b/apps/web/core/services/user.service.ts
index 33fffc2ee..6122c432a 100644
--- a/apps/web/core/services/user.service.ts
+++ b/apps/web/core/services/user.service.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // services
 import { API_BASE_URL } from "@plane/constants";
 import type {
diff --git a/apps/web/core/services/view.service.ts b/apps/web/core/services/view.service.ts
index 96d4c5f31..722128319 100644
--- a/apps/web/core/services/view.service.ts
+++ b/apps/web/core/services/view.service.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { API_BASE_URL } from "@plane/constants";
 import type { IProjectView } from "@plane/types";
 import { APIService } from "@/services/api.service";
diff --git a/apps/web/core/services/webhook.service.ts b/apps/web/core/services/webhook.service.ts
index ab0dd2fbf..3f8e8f4dc 100644
--- a/apps/web/core/services/webhook.service.ts
+++ b/apps/web/core/services/webhook.service.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // api services
 import { API_BASE_URL } from "@plane/constants";
 import type { IWebhook } from "@plane/types";
diff --git a/apps/web/core/services/workspace-notification.service.ts b/apps/web/core/services/workspace-notification.service.ts
index 640fa99a0..fc5c3f86e 100644
--- a/apps/web/core/services/workspace-notification.service.ts
+++ b/apps/web/core/services/workspace-notification.service.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 /* eslint-disable no-useless-catch */
 
 import { API_BASE_URL } from "@plane/constants";
diff --git a/apps/web/core/services/workspace.service.ts b/apps/web/core/services/workspace.service.ts
index 0811a562a..3c2565322 100644
--- a/apps/web/core/services/workspace.service.ts
+++ b/apps/web/core/services/workspace.service.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { API_BASE_URL } from "@plane/constants";
 import type {
   IWorkspace,
@@ -19,6 +25,7 @@ import type {
   TActivityEntityData,
   IWorkspaceSidebarNavigationItem,
   IWorkspaceSidebarNavigation,
+  IWorkspaceUserPropertiesResponse,
 } from "@plane/types";
 // services
 import { APIService } from "@/services/api.service";
@@ -397,4 +404,23 @@ export class WorkspaceService extends APIService {
         throw error?.response;
       });
   }
+
+  async fetchWorkspaceFilters(workspaceSlug: string): Promise<IWorkspaceUserPropertiesResponse> {
+    return this.get(`/api/workspaces/${workspaceSlug}/user-properties/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async patchWorkspaceFilters(
+    workspaceSlug: string,
+    data: Partial<IWorkspaceUserPropertiesResponse>
+  ): Promise<IWorkspaceUserPropertiesResponse> {
+    return this.patch(`/api/workspaces/${workspaceSlug}/user-properties/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
 }
diff --git a/apps/web/core/store/analytics.store.ts b/apps/web/core/store/analytics.store.ts
index 0a949d55e..ca1ffc140 100644
--- a/apps/web/core/store/analytics.store.ts
+++ b/apps/web/core/store/analytics.store.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { action, computed, makeObservable, observable, runInAction } from "mobx";
 import { ANALYTICS_DURATION_FILTER_OPTIONS } from "@plane/constants";
 import type { TAnalyticsTabsBase } from "@plane/types";
diff --git a/apps/web/core/store/base-command-palette.store.ts b/apps/web/core/store/base-command-palette.store.ts
index d48769f7e..e5fe61b34 100644
--- a/apps/web/core/store/base-command-palette.store.ts
+++ b/apps/web/core/store/base-command-palette.store.ts
@@ -1,8 +1,17 @@
-import { observable, action, makeObservable } from "mobx";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observable, action, makeObservable, runInAction } from "mobx";
 import { computedFn } from "mobx-utils";
+// plane imports
 import type { TCreateModalStoreTypes, TCreatePageModal } from "@plane/constants";
 import { DEFAULT_CREATE_PAGE_MODAL_DATA, EPageAccess } from "@plane/constants";
+import type { TProfileSettingsTabs } from "@plane/types";
 import { EIssuesStoreType } from "@plane/types";
+// lib
 import { store } from "@/lib/store-context";
 
 export interface ModalData {
@@ -22,6 +31,10 @@ export interface IBaseCommandPaletteStore {
   isBulkDeleteIssueModalOpen: boolean;
   createIssueStoreType: TCreateModalStoreTypes;
   createWorkItemAllowedProjectIds: string[] | undefined;
+  profileSettingsModal: {
+    activeTab: TProfileSettingsTabs | null;
+    isOpen: boolean;
+  };
   allStickiesModal: boolean;
   projectListOpenMap: Record<string, boolean>;
   getIsProjectListOpen: (projectId: string) => boolean;
@@ -36,6 +49,7 @@ export interface IBaseCommandPaletteStore {
   toggleBulkDeleteIssueModal: (value?: boolean) => void;
   toggleAllStickiesModal: (value?: boolean) => void;
   toggleProjectListOpen: (projectId: string, value?: boolean) => void;
+  toggleProfileSettingsModal: (value: { activeTab?: TProfileSettingsTabs | null; isOpen?: boolean }) => void;
 }
 
 export abstract class BaseCommandPaletteStore implements IBaseCommandPaletteStore {
@@ -50,6 +64,10 @@ export abstract class BaseCommandPaletteStore implements IBaseCommandPaletteStor
   createPageModal: TCreatePageModal = DEFAULT_CREATE_PAGE_MODAL_DATA;
   createIssueStoreType: TCreateModalStoreTypes = EIssuesStoreType.PROJECT;
   createWorkItemAllowedProjectIds: IBaseCommandPaletteStore["createWorkItemAllowedProjectIds"] = undefined;
+  profileSettingsModal: IBaseCommandPaletteStore["profileSettingsModal"] = {
+    activeTab: "general",
+    isOpen: false,
+  };
   allStickiesModal: boolean = false;
   projectListOpenMap: Record<string, boolean> = {};
 
@@ -66,6 +84,7 @@ export abstract class BaseCommandPaletteStore implements IBaseCommandPaletteStor
       createPageModal: observable,
       createIssueStoreType: observable,
       createWorkItemAllowedProjectIds: observable,
+      profileSettingsModal: observable,
       allStickiesModal: observable,
       projectListOpenMap: observable,
       // toggle actions
@@ -79,6 +98,7 @@ export abstract class BaseCommandPaletteStore implements IBaseCommandPaletteStor
       toggleBulkDeleteIssueModal: action,
       toggleAllStickiesModal: action,
       toggleProjectListOpen: action,
+      toggleProfileSettingsModal: action,
     });
   }
 
@@ -240,4 +260,20 @@ export abstract class BaseCommandPaletteStore implements IBaseCommandPaletteStor
       this.allStickiesModal = !this.allStickiesModal;
     }
   };
+
+  /**
+   * Toggles the profile settings modal
+   * @param value
+   * @returns
+   */
+  toggleProfileSettingsModal: IBaseCommandPaletteStore["toggleProfileSettingsModal"] = (payload) => {
+    const updatedSettings: IBaseCommandPaletteStore["profileSettingsModal"] = {
+      ...this.profileSettingsModal,
+      ...payload,
+    };
+
+    runInAction(() => {
+      this.profileSettingsModal = updatedSettings;
+    });
+  };
 }
diff --git a/apps/web/core/store/base-power-k.store.ts b/apps/web/core/store/base-power-k.store.ts
index a5182bd10..ded57f3e6 100644
--- a/apps/web/core/store/base-power-k.store.ts
+++ b/apps/web/core/store/base-power-k.store.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observable, action, makeObservable } from "mobx";
 // plane imports
 import type { EIssuesStoreType } from "@plane/types";
diff --git a/apps/web/core/store/cycle.store.ts b/apps/web/core/store/cycle.store.ts
index e39ad4412..bd84433dc 100644
--- a/apps/web/core/store/cycle.store.ts
+++ b/apps/web/core/store/cycle.store.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { isPast, isToday } from "date-fns";
 import { sortBy, set, isEmpty } from "lodash-es";
 import { action, computed, observable, makeObservable, runInAction } from "mobx";
diff --git a/apps/web/core/store/cycle_filter.store.ts b/apps/web/core/store/cycle_filter.store.ts
index a1b0eca82..a3c72cf34 100644
--- a/apps/web/core/store/cycle_filter.store.ts
+++ b/apps/web/core/store/cycle_filter.store.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { set } from "lodash-es";
 import { action, computed, observable, makeObservable, runInAction, reaction } from "mobx";
 import { computedFn } from "mobx-utils";
diff --git a/apps/web/core/store/dashboard.store.ts b/apps/web/core/store/dashboard.store.ts
index 70f17119f..a8a8186d7 100644
--- a/apps/web/core/store/dashboard.store.ts
+++ b/apps/web/core/store/dashboard.store.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { set } from "lodash-es";
 import { action, computed, makeObservable, observable, runInAction } from "mobx";
 import { computedFn } from "mobx-utils";
diff --git a/apps/web/core/store/editor/asset.store.ts b/apps/web/core/store/editor/asset.store.ts
index 7974f02b9..8469f70b3 100644
--- a/apps/web/core/store/editor/asset.store.ts
+++ b/apps/web/core/store/editor/asset.store.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { debounce, set } from "lodash-es";
 import { action, computed, makeObservable, observable, runInAction } from "mobx";
 import { computedFn } from "mobx-utils";
diff --git a/apps/web/core/store/estimates/estimate-point.ts b/apps/web/core/store/estimates/estimate-point.ts
index 4340e50b0..3671a02ca 100644
--- a/apps/web/core/store/estimates/estimate-point.ts
+++ b/apps/web/core/store/estimates/estimate-point.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 /* eslint-disable no-useless-catch */
 
 import { set } from "lodash-es";
@@ -5,7 +11,7 @@ import { action, computed, makeObservable, observable, runInAction } from "mobx"
 // types
 import type { IEstimate, IEstimatePoint as IEstimatePointType } from "@plane/types";
 // plane web services
-import estimateService from "@/plane-web/services/project/estimate.service";
+import estimateService from "@/services/estimate.service";
 // store
 import type { CoreRootStore } from "@/store/root.store";
 
diff --git a/apps/web/core/store/estimates/project-estimate.store.ts b/apps/web/core/store/estimates/project-estimate.store.ts
index 8bb9184a0..519e0805c 100644
--- a/apps/web/core/store/estimates/project-estimate.store.ts
+++ b/apps/web/core/store/estimates/project-estimate.store.ts
@@ -1,10 +1,16 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { unset, orderBy, set } from "lodash-es";
 import { action, computed, makeObservable, observable, runInAction } from "mobx";
 import { computedFn } from "mobx-utils";
 // types
 import type { IEstimate as IEstimateType, IEstimateFormData, TEstimateSystemKeys } from "@plane/types";
 // plane web services
-import estimateService from "@/plane-web/services/project/estimate.service";
+import estimateService from "@/services/estimate.service";
 // plane web store
 import type { IEstimate } from "@/plane-web/store/estimates/estimate";
 import { Estimate } from "@/plane-web/store/estimates/estimate";
diff --git a/apps/web/core/store/favorite.store.ts b/apps/web/core/store/favorite.store.ts
index 69af5c514..acf87ab02 100644
--- a/apps/web/core/store/favorite.store.ts
+++ b/apps/web/core/store/favorite.store.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { orderBy, uniqBy, set } from "lodash-es";
 import { action, observable, makeObservable, runInAction, computed } from "mobx";
 import { v4 as uuidv4 } from "uuid";
diff --git a/apps/web/core/store/global-view.store.ts b/apps/web/core/store/global-view.store.ts
index fea40218c..185604fa1 100644
--- a/apps/web/core/store/global-view.store.ts
+++ b/apps/web/core/store/global-view.store.ts
@@ -1,10 +1,16 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { set, cloneDeep, isEqual } from "lodash-es";
 import { action, computed, makeObservable, observable, runInAction } from "mobx";
 import { computedFn } from "mobx-utils";
 // plane imports
 import type { IWorkspaceView } from "@plane/types";
 // services
-import { WorkspaceService } from "@/plane-web/services";
+import { WorkspaceService } from "@/services/workspace.service";
 // store
 import type { CoreRootStore } from "./root.store";
 
diff --git a/apps/web/core/store/inbox/inbox-issue.store.ts b/apps/web/core/store/inbox/inbox-issue.store.ts
index 5c099a668..49a7d7884 100644
--- a/apps/web/core/store/inbox/inbox-issue.store.ts
+++ b/apps/web/core/store/inbox/inbox-issue.store.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { clone, set } from "lodash-es";
 import { makeObservable, observable, runInAction, action } from "mobx";
 import type {
@@ -94,6 +100,7 @@ export class InboxIssueStore implements IInboxIssueStore {
     const previousData: Partial<TInboxIssue> = {
       status: this.status,
     };
+    const previousStatus = this.status;
 
     try {
       if (!this.issue.id) return;
@@ -101,7 +108,29 @@ export class InboxIssueStore implements IInboxIssueStore {
       const inboxIssue = await this.inboxIssueService.update(this.workspaceSlug, this.projectId, this.issue.id, {
         status: status,
       });
-      runInAction(() => set(this, "status", inboxIssue?.status));
+      runInAction(() => {
+        set(this, "status", inboxIssue?.status);
+
+        // Handle intake_count transitions
+        if (previousStatus === EInboxIssueStatus.PENDING && inboxIssue.status !== EInboxIssueStatus.PENDING) {
+          // Changed from PENDING to something else: decrement
+          const currentCount = this.store.projectRoot.project.projectMap[this.projectId]?.intake_count ?? 0;
+          set(
+            this.store.projectRoot.project.projectMap,
+            [this.projectId, "intake_count"],
+            Math.max(0, currentCount - 1)
+          );
+        } else if (previousStatus !== EInboxIssueStatus.PENDING && inboxIssue.status === EInboxIssueStatus.PENDING) {
+          // Changed from something else to PENDING: increment
+          const currentCount = this.store.projectRoot.project.projectMap[this.projectId]?.intake_count ?? 0;
+          set(this.store.projectRoot.project.projectMap, [this.projectId, "intake_count"], currentCount + 1);
+        }
+      });
+
+      // Update counts
+      const currentTotalResults = this.store.projectInbox.inboxIssuePaginationInfo?.total_results ?? 0;
+      const updatedCount = currentTotalResults > 0 ? currentTotalResults - 1 : currentTotalResults;
+      set(this.store.projectInbox, ["inboxIssuePaginationInfo", "total_results"], updatedCount);
 
       // If issue accepted sync issue to local db
       if (status === EInboxIssueStatus.ACCEPTED) {
@@ -120,6 +149,7 @@ export class InboxIssueStore implements IInboxIssueStore {
       duplicate_to: this.duplicate_to,
       duplicate_issue_detail: this.duplicate_issue_detail,
     };
+    const wasPending = this.status === EInboxIssueStatus.PENDING;
     try {
       if (!this.issue.id) return;
       const inboxIssue = await this.inboxIssueService.update(this.workspaceSlug, this.projectId, this.issue.id, {
@@ -130,6 +160,15 @@ export class InboxIssueStore implements IInboxIssueStore {
         set(this, "status", inboxIssue?.status);
         set(this, "duplicate_to", inboxIssue?.duplicate_to);
         set(this, "duplicate_issue_detail", inboxIssue?.duplicate_issue_detail);
+        // Decrement intake_count if the issue was PENDING
+        if (wasPending) {
+          const currentCount = this.store.projectRoot.project.projectMap[this.projectId]?.intake_count ?? 0;
+          set(
+            this.store.projectRoot.project.projectMap,
+            [this.projectId, "intake_count"],
+            Math.max(0, currentCount - 1)
+          );
+        }
       });
     } catch {
       runInAction(() => {
@@ -146,6 +185,7 @@ export class InboxIssueStore implements IInboxIssueStore {
       status: this.status,
       snoozed_till: this.snoozed_till,
     };
+    const previousStatus = this.status;
     try {
       if (!this.issue.id) return;
       const inboxIssue = await this.inboxIssueService.update(this.workspaceSlug, this.projectId, this.issue.id, {
@@ -155,6 +195,18 @@ export class InboxIssueStore implements IInboxIssueStore {
       runInAction(() => {
         set(this, "status", inboxIssue?.status);
         set(this, "snoozed_till", inboxIssue?.snoozed_till);
+        // Handle intake_count transitions
+        if (previousStatus === EInboxIssueStatus.PENDING && inboxIssue.status === EInboxIssueStatus.SNOOZED) {
+          const currentCount = this.store.projectRoot.project.projectMap[this.projectId]?.intake_count ?? 0;
+          set(
+            this.store.projectRoot.project.projectMap,
+            [this.projectId, "intake_count"],
+            Math.max(0, currentCount - 1)
+          );
+        } else if (previousStatus !== EInboxIssueStatus.PENDING && inboxIssue.status === EInboxIssueStatus.PENDING) {
+          const currentCount = this.store.projectRoot.project.projectMap[this.projectId]?.intake_count ?? 0;
+          set(this.store.projectRoot.project.projectMap, [this.projectId, "intake_count"], currentCount + 1);
+        }
       });
     } catch {
       runInAction(() => {
diff --git a/apps/web/core/store/inbox/project-inbox.store.ts b/apps/web/core/store/inbox/project-inbox.store.ts
index 788db2dc7..6dc1f96b5 100644
--- a/apps/web/core/store/inbox/project-inbox.store.ts
+++ b/apps/web/core/store/inbox/project-inbox.store.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { uniq, update, isEmpty, omit, set } from "lodash-es";
 import { action, computed, makeObservable, observable, runInAction } from "mobx";
 import { computedFn } from "mobx-utils";
@@ -467,6 +473,11 @@ export class ProjectInboxStore implements IProjectInboxStore {
             ["inboxIssuePaginationInfo", "total_results"],
             (this.inboxIssuePaginationInfo?.total_results || 0) + 1
           );
+          // Increment intake_count if the new issue is PENDING
+          if (inboxIssueResponse.status === EInboxIssueStatus.PENDING) {
+            const currentCount = this.store.projectRoot.project.projectMap[projectId]?.intake_count ?? 0;
+            set(this.store.projectRoot.project.projectMap, [projectId, "intake_count"], currentCount + 1);
+          }
         });
       return inboxIssueResponse;
     } catch (error) {
@@ -483,6 +494,7 @@ export class ProjectInboxStore implements IProjectInboxStore {
    */
   deleteInboxIssue = async (workspaceSlug: string, projectId: string, inboxIssueId: string) => {
     const currentIssue = this.inboxIssues?.[inboxIssueId];
+    const wasPending = currentIssue?.status === EInboxIssueStatus.PENDING;
     try {
       if (!currentIssue) return;
       await this.inboxIssueService.destroy(workspaceSlug, projectId, inboxIssueId).then(() => {
@@ -498,6 +510,11 @@ export class ProjectInboxStore implements IProjectInboxStore {
             ["inboxIssueIds"],
             this.inboxIssueIds.filter((id) => id !== inboxIssueId)
           );
+          // Decrement intake_count if the deleted issue was PENDING
+          if (wasPending) {
+            const currentCount = this.store.projectRoot.project.projectMap[projectId]?.intake_count ?? 0;
+            set(this.store.projectRoot.project.projectMap, [projectId, "intake_count"], Math.max(0, currentCount - 1));
+          }
         });
       });
     } catch (error) {
diff --git a/apps/web/core/store/instance.store.ts b/apps/web/core/store/instance.store.ts
index aaa12ac37..89a283f98 100644
--- a/apps/web/core/store/instance.store.ts
+++ b/apps/web/core/store/instance.store.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observable, action, makeObservable, runInAction } from "mobx";
 // types
 import type { IInstance, IInstanceConfig } from "@plane/types";
diff --git a/apps/web/core/store/issue/archived/filter.store.ts b/apps/web/core/store/issue/archived/filter.store.ts
index 5d4645f7d..add44610b 100644
--- a/apps/web/core/store/issue/archived/filter.store.ts
+++ b/apps/web/core/store/issue/archived/filter.store.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { isEmpty, set } from "lodash-es";
 import { action, computed, makeObservable, observable, runInAction } from "mobx";
 // base class
diff --git a/apps/web/core/store/issue/archived/index.ts b/apps/web/core/store/issue/archived/index.ts
index 0fe6c946b..a21a791fe 100644
--- a/apps/web/core/store/issue/archived/index.ts
+++ b/apps/web/core/store/issue/archived/index.ts
@@ -1,2 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./filter.store";
 export * from "./issue.store";
diff --git a/apps/web/core/store/issue/archived/issue.store.ts b/apps/web/core/store/issue/archived/issue.store.ts
index 72fd4f00c..c3f9a6976 100644
--- a/apps/web/core/store/issue/archived/issue.store.ts
+++ b/apps/web/core/store/issue/archived/issue.store.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { action, makeObservable, runInAction } from "mobx";
 // base class
 import type { TLoader, IssuePaginationOptions, TIssuesResponse, ViewFlags, TBulkOperationsPayload } from "@plane/types";
diff --git a/apps/web/core/store/issue/cycle/filter.store.ts b/apps/web/core/store/issue/cycle/filter.store.ts
index c6544936e..1368005b2 100644
--- a/apps/web/core/store/issue/cycle/filter.store.ts
+++ b/apps/web/core/store/issue/cycle/filter.store.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { isEmpty, set } from "lodash-es";
 import { action, computed, makeObservable, observable, runInAction } from "mobx";
 // base class
diff --git a/apps/web/core/store/issue/cycle/index.ts b/apps/web/core/store/issue/cycle/index.ts
index 0fe6c946b..a21a791fe 100644
--- a/apps/web/core/store/issue/cycle/index.ts
+++ b/apps/web/core/store/issue/cycle/index.ts
@@ -1,2 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./filter.store";
 export * from "./issue.store";
diff --git a/apps/web/core/store/issue/cycle/issue.store.ts b/apps/web/core/store/issue/cycle/issue.store.ts
index a64ac449a..e40bddc77 100644
--- a/apps/web/core/store/issue/cycle/issue.store.ts
+++ b/apps/web/core/store/issue/cycle/issue.store.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { get, set, concat, uniq, update } from "lodash-es";
 import { action, observable, makeObservable, runInAction } from "mobx";
 import { computedFn } from "mobx-utils";
diff --git a/apps/web/core/store/issue/helpers/base-issues-utils.ts b/apps/web/core/store/issue/helpers/base-issues-utils.ts
index b0ae99408..b5b0e6ecf 100644
--- a/apps/web/core/store/issue/helpers/base-issues-utils.ts
+++ b/apps/web/core/store/issue/helpers/base-issues-utils.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { uniq, orderBy, isEmpty, indexOf, groupBy, cloneDeep, set } from "lodash-es";
 import { ALL_ISSUES, EIssueFilterType, FILTER_TO_ISSUE_MAP, ISSUE_PRIORITIES } from "@plane/constants";
 import type {
diff --git a/apps/web/core/store/issue/helpers/base-issues.store.ts b/apps/web/core/store/issue/helpers/base-issues.store.ts
index 294883488..023f6590d 100644
--- a/apps/web/core/store/issue/helpers/base-issues.store.ts
+++ b/apps/web/core/store/issue/helpers/base-issues.store.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { isEqual, concat, get, indexOf, isEmpty, orderBy, pull, set, uniq, update, clone } from "lodash-es";
 import { action, computed, makeObservable, observable, runInAction } from "mobx";
 import { computedFn } from "mobx-utils";
@@ -1198,6 +1204,9 @@ export abstract class BaseIssuesStore implements IBaseIssuesStore {
     const issueId = issue?.id ?? issueBeforeUpdate?.id;
     if (!issueId) return;
 
+    // Get display filters to check if 'Show sub Work items' is enabled - Donot add Work item to main list if disabled.
+    const isShowWorkItemsEnabled = this.issueFilterStore.issueFilters?.displayFilters?.sub_issue ?? false;
+
     // get issueUpdates from another method by passing down the three arguments
     // issueUpdates is nothing but an array of objects that contain the path of the issueId list that need updating and also the action that needs to be performed at the path
     const issueUpdates = this.getUpdateDetails(issue, issueBeforeUpdate, action);
@@ -1207,6 +1216,8 @@ export abstract class BaseIssuesStore implements IBaseIssuesStore {
       for (const issueUpdate of issueUpdates) {
         //if update is add, add it at a particular path
         if (issueUpdate.action === EIssueGroupedAction.ADD) {
+          const isSubIssue = issue?.parent_id;
+          if (isSubIssue && !isShowWorkItemsEnabled) continue;
           // add issue Id at the path
           update(this, ["groupedIssueIds", ...issueUpdate.path], (issueIds: string[] = []) =>
             this.issuesSortWithOrderBy(uniq(concat(issueIds, issueId)), this.orderBy)
@@ -1469,7 +1480,7 @@ export abstract class BaseIssuesStore implements IBaseIssuesStore {
 
     // if the key for accumulator is not the current action,
     // Meaning if the key already has an action ADD and the current one is REMOVE,
-    // The the key is deleted as both the actions cancel each other out
+    // The key is deleted as both the actions cancel each other out
     if (accumulator[key] !== action) {
       delete accumulator[key];
     }
diff --git a/apps/web/core/store/issue/helpers/issue-filter-helper.store.ts b/apps/web/core/store/issue/helpers/issue-filter-helper.store.ts
index b6095044c..fc7e9255d 100644
--- a/apps/web/core/store/issue/helpers/issue-filter-helper.store.ts
+++ b/apps/web/core/store/issue/helpers/issue-filter-helper.store.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { isEmpty } from "lodash-es";
 // plane constants
 import type { EIssueFilterType } from "@plane/constants";
diff --git a/apps/web/core/store/issue/issue-details/attachment.store.ts b/apps/web/core/store/issue/issue-details/attachment.store.ts
index c8eb3e513..c9eeb1158 100644
--- a/apps/web/core/store/issue/issue-details/attachment.store.ts
+++ b/apps/web/core/store/issue/issue-details/attachment.store.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { uniq, pull, set, debounce, update, concat } from "lodash-es";
 import { action, computed, makeObservable, observable, runInAction } from "mobx";
 import { computedFn } from "mobx-utils";
diff --git a/apps/web/core/store/issue/issue-details/comment.store.ts b/apps/web/core/store/issue/issue-details/comment.store.ts
index cd9e1bf5f..b184ec631 100644
--- a/apps/web/core/store/issue/issue-details/comment.store.ts
+++ b/apps/web/core/store/issue/issue-details/comment.store.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { pull, concat, update, uniq, set } from "lodash-es";
 import { action, makeObservable, observable, runInAction } from "mobx";
 // Plane Imports
diff --git a/apps/web/core/store/issue/issue-details/comment_reaction.store.ts b/apps/web/core/store/issue/issue-details/comment_reaction.store.ts
index 7daa80f81..6e5b4d22e 100644
--- a/apps/web/core/store/issue/issue-details/comment_reaction.store.ts
+++ b/apps/web/core/store/issue/issue-details/comment_reaction.store.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { pull, find, concat, update, set } from "lodash-es";
 import { action, makeObservable, observable, runInAction } from "mobx";
 // Plane Imports
diff --git a/apps/web/core/store/issue/issue-details/issue.store.ts b/apps/web/core/store/issue/issue-details/issue.store.ts
index 3533038ba..4abf62b4f 100644
--- a/apps/web/core/store/issue/issue-details/issue.store.ts
+++ b/apps/web/core/store/issue/issue-details/issue.store.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { makeObservable, observable } from "mobx";
 import { computedFn } from "mobx-utils";
 // types
diff --git a/apps/web/core/store/issue/issue-details/link.store.ts b/apps/web/core/store/issue/issue-details/link.store.ts
index bd8c82a56..e08d090e6 100644
--- a/apps/web/core/store/issue/issue-details/link.store.ts
+++ b/apps/web/core/store/issue/issue-details/link.store.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { set } from "lodash-es";
 import { action, computed, makeObservable, observable, runInAction } from "mobx";
 // services
diff --git a/apps/web/core/store/issue/issue-details/reaction.store.ts b/apps/web/core/store/issue/issue-details/reaction.store.ts
index 3e75bcc20..46a68a63a 100644
--- a/apps/web/core/store/issue/issue-details/reaction.store.ts
+++ b/apps/web/core/store/issue/issue-details/reaction.store.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { pull, find, concat, set, update } from "lodash-es";
 import { action, makeObservable, observable, runInAction } from "mobx";
 // Plane Imports
diff --git a/apps/web/core/store/issue/issue-details/relation.store.ts b/apps/web/core/store/issue/issue-details/relation.store.ts
index 5d6097ec2..4cdabd8a8 100644
--- a/apps/web/core/store/issue/issue-details/relation.store.ts
+++ b/apps/web/core/store/issue/issue-details/relation.store.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { uniq, get, set } from "lodash-es";
 import { action, computed, makeObservable, observable, runInAction } from "mobx";
 import { computedFn } from "mobx-utils";
@@ -6,7 +12,7 @@ import type { TIssueRelationIdMap, TIssueRelationMap, TIssueRelation, TIssue } f
 // components
 import type { TRelationObject } from "@/components/issues/issue-detail-widgets/relations";
 // Plane-web
-import { REVERSE_RELATIONS } from "@/plane-web/constants/gantt-chart";
+import { REVERSE_RELATIONS } from "@/constants/gantt-chart";
 import type { TIssueRelationTypes } from "@/plane-web/types";
 // services
 import { IssueRelationService } from "@/services/issue";
@@ -299,7 +305,7 @@ export class IssueRelationStore implements IIssueRelationStore {
           set(this.relationMap, [issueId], issueRelations);
         }
       });
-    } catch (e) {
+    } catch (_e) {
       console.error("Error while extracting issue relations from issues");
     }
   };
diff --git a/apps/web/core/store/issue/issue-details/root.store.ts b/apps/web/core/store/issue/issue-details/root.store.ts
index 42b3cbaa9..77c7b6432 100644
--- a/apps/web/core/store/issue/issue-details/root.store.ts
+++ b/apps/web/core/store/issue/issue-details/root.store.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { action, computed, makeObservable, observable } from "mobx";
 // types
 import type {
@@ -17,7 +23,6 @@ import type {
   IIssueActivityStoreActions,
   TActivityLoader,
 } from "@/plane-web/store/issue/issue-details/activity.store";
-import type { RootStore } from "@/plane-web/store/root.store";
 import type { TIssueRelationTypes } from "@/plane-web/types";
 import type { IIssueRootStore } from "../root.store";
 import { IssueAttachmentStore } from "./attachment.store";
diff --git a/apps/web/core/store/issue/issue-details/sub_issues.store.ts b/apps/web/core/store/issue/issue-details/sub_issues.store.ts
index 18a833d19..7410ce303 100644
--- a/apps/web/core/store/issue/issue-details/sub_issues.store.ts
+++ b/apps/web/core/store/issue/issue-details/sub_issues.store.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { pull, concat, uniq, set, update } from "lodash-es";
 import { action, makeObservable, observable, runInAction } from "mobx";
 import { computedFn } from "mobx-utils";
diff --git a/apps/web/core/store/issue/issue-details/sub_issues_filter.store.ts b/apps/web/core/store/issue/issue-details/sub_issues_filter.store.ts
index ff8367a77..63896f32c 100644
--- a/apps/web/core/store/issue/issue-details/sub_issues_filter.store.ts
+++ b/apps/web/core/store/issue/issue-details/sub_issues_filter.store.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { set } from "lodash-es";
 import { action, makeObservable, observable, runInAction } from "mobx";
 import { computedFn } from "mobx-utils";
diff --git a/apps/web/core/store/issue/issue-details/subscription.store.ts b/apps/web/core/store/issue/issue-details/subscription.store.ts
index 27332f080..0b578cf7f 100644
--- a/apps/web/core/store/issue/issue-details/subscription.store.ts
+++ b/apps/web/core/store/issue/issue-details/subscription.store.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { set } from "lodash-es";
 import { action, makeObservable, observable, runInAction } from "mobx";
 // services
diff --git a/apps/web/core/store/issue/issue.store.ts b/apps/web/core/store/issue/issue.store.ts
index 8d6e9b7ab..ad526ae5e 100644
--- a/apps/web/core/store/issue/issue.store.ts
+++ b/apps/web/core/store/issue/issue.store.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { set, update } from "lodash-es";
 import { action, makeObservable, observable, runInAction } from "mobx";
 import { computedFn } from "mobx-utils";
diff --git a/apps/web/core/store/issue/issue_calendar_view.store.ts b/apps/web/core/store/issue/issue_calendar_view.store.ts
index fc9d34143..4788139f1 100644
--- a/apps/web/core/store/issue/issue_calendar_view.store.ts
+++ b/apps/web/core/store/issue/issue_calendar_view.store.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observable, action, makeObservable, runInAction, computed, reaction } from "mobx";
 
 // helpers
diff --git a/apps/web/core/store/issue/issue_gantt_view.store.ts b/apps/web/core/store/issue/issue_gantt_view.store.ts
index d39b0a273..4a0f5cee1 100644
--- a/apps/web/core/store/issue/issue_gantt_view.store.ts
+++ b/apps/web/core/store/issue/issue_gantt_view.store.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { action, makeObservable, observable, runInAction } from "mobx";
 import { computedFn } from "mobx-utils";
 // helpers
diff --git a/apps/web/core/store/issue/issue_kanban_view.store.ts b/apps/web/core/store/issue/issue_kanban_view.store.ts
index da50efa61..15294099c 100644
--- a/apps/web/core/store/issue/issue_kanban_view.store.ts
+++ b/apps/web/core/store/issue/issue_kanban_view.store.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { action, computed, makeObservable, observable } from "mobx";
 import { computedFn } from "mobx-utils";
 import { DRAG_ALLOWED_GROUPS } from "@plane/constants";
diff --git a/apps/web/core/store/issue/module/filter.store.ts b/apps/web/core/store/issue/module/filter.store.ts
index a2421436f..ccf304be9 100644
--- a/apps/web/core/store/issue/module/filter.store.ts
+++ b/apps/web/core/store/issue/module/filter.store.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { isEmpty, set } from "lodash-es";
 import { action, computed, makeObservable, observable, runInAction } from "mobx";
 // base class
diff --git a/apps/web/core/store/issue/module/index.ts b/apps/web/core/store/issue/module/index.ts
index 0fe6c946b..a21a791fe 100644
--- a/apps/web/core/store/issue/module/index.ts
+++ b/apps/web/core/store/issue/module/index.ts
@@ -1,2 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./filter.store";
 export * from "./issue.store";
diff --git a/apps/web/core/store/issue/module/issue.store.ts b/apps/web/core/store/issue/module/issue.store.ts
index 488d183d3..4f3fbddbf 100644
--- a/apps/web/core/store/issue/module/issue.store.ts
+++ b/apps/web/core/store/issue/module/issue.store.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { action, makeObservable, runInAction } from "mobx";
 // base class
 import type {
@@ -111,7 +117,7 @@ export class ModuleIssues extends BaseIssuesStore implements IModuleIssues {
       const moduleId = id ?? this.moduleId;
 
       moduleId && this.rootIssueStore.rootStore.module.updateModuleDistribution(distributionUpdates, moduleId);
-    } catch (e) {
+    } catch (_e) {
       console.warn("could not update module statistics");
     }
   };
diff --git a/apps/web/core/store/issue/profile/filter.store.ts b/apps/web/core/store/issue/profile/filter.store.ts
index 3e2da337a..78055d100 100644
--- a/apps/web/core/store/issue/profile/filter.store.ts
+++ b/apps/web/core/store/issue/profile/filter.store.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { isEmpty, set } from "lodash-es";
 import { action, computed, makeObservable, observable, runInAction } from "mobx";
 // base class
diff --git a/apps/web/core/store/issue/profile/index.ts b/apps/web/core/store/issue/profile/index.ts
index 0fe6c946b..a21a791fe 100644
--- a/apps/web/core/store/issue/profile/index.ts
+++ b/apps/web/core/store/issue/profile/index.ts
@@ -1,2 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./filter.store";
 export * from "./issue.store";
diff --git a/apps/web/core/store/issue/profile/issue.store.ts b/apps/web/core/store/issue/profile/issue.store.ts
index 41ef339cc..046824eac 100644
--- a/apps/web/core/store/issue/profile/issue.store.ts
+++ b/apps/web/core/store/issue/profile/issue.store.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { action, observable, makeObservable, computed, runInAction } from "mobx";
 // base class
 import type {
diff --git a/apps/web/core/store/issue/project-views/filter.store.ts b/apps/web/core/store/issue/project-views/filter.store.ts
index efeacc8b6..49c20d411 100644
--- a/apps/web/core/store/issue/project-views/filter.store.ts
+++ b/apps/web/core/store/issue/project-views/filter.store.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { isEmpty, set } from "lodash-es";
 import { action, computed, makeObservable, observable, runInAction } from "mobx";
 // base class
@@ -18,7 +24,7 @@ import type {
 import { EIssuesStoreType } from "@plane/types";
 import { handleIssueQueryParamsByLayout } from "@plane/utils";
 // services
-import { ViewService } from "@/plane-web/services";
+import { ViewService } from "@/services/view.service";
 import type { IBaseIssueFilterStore } from "../helpers/issue-filter-helper.store";
 import { IssueFilterHelperStore } from "../helpers/issue-filter-helper.store";
 // helpers
diff --git a/apps/web/core/store/issue/project-views/index.ts b/apps/web/core/store/issue/project-views/index.ts
index 0fe6c946b..a21a791fe 100644
--- a/apps/web/core/store/issue/project-views/index.ts
+++ b/apps/web/core/store/issue/project-views/index.ts
@@ -1,2 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./filter.store";
 export * from "./issue.store";
diff --git a/apps/web/core/store/issue/project-views/issue.store.ts b/apps/web/core/store/issue/project-views/issue.store.ts
index 2d8046264..8dd15759e 100644
--- a/apps/web/core/store/issue/project-views/issue.store.ts
+++ b/apps/web/core/store/issue/project-views/issue.store.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { action, makeObservable, runInAction } from "mobx";
 // base class
 import type {
diff --git a/apps/web/core/store/issue/project/filter.store.ts b/apps/web/core/store/issue/project/filter.store.ts
index 1768606c5..657eee4f9 100644
--- a/apps/web/core/store/issue/project/filter.store.ts
+++ b/apps/web/core/store/issue/project/filter.store.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { isEmpty, set } from "lodash-es";
 import { action, computed, makeObservable, observable, runInAction } from "mobx";
 // base class
@@ -16,12 +22,12 @@ import type {
 } from "@plane/types";
 import { EIssuesStoreType } from "@plane/types";
 import { handleIssueQueryParamsByLayout } from "@plane/utils";
-import { IssueFiltersService } from "@/services/issue_filter.service";
 import type { IBaseIssueFilterStore } from "../helpers/issue-filter-helper.store";
 import { IssueFilterHelperStore } from "../helpers/issue-filter-helper.store";
 // helpers
 // types
 import type { IIssueRootStore } from "../root.store";
+import { ProjectService } from "@/services/project";
 // constants
 // services
 
@@ -56,7 +62,7 @@ export class ProjectIssuesFilter extends IssueFilterHelperStore implements IProj
   // root store
   rootIssueStore: IIssueRootStore;
   // services
-  issueFilterService;
+  projectService;
 
   constructor(_rootStore: IIssueRootStore) {
     super();
@@ -74,7 +80,7 @@ export class ProjectIssuesFilter extends IssueFilterHelperStore implements IProj
     // root store
     this.rootIssueStore = _rootStore;
     // services
-    this.issueFilterService = new IssueFiltersService();
+    this.projectService = new ProjectService();
   }
 
   get issueFilters() {
@@ -129,7 +135,7 @@ export class ProjectIssuesFilter extends IssueFilterHelperStore implements IProj
   );
 
   fetchFilters = async (workspaceSlug: string, projectId: string) => {
-    const _filters = await this.issueFilterService.fetchProjectIssueFilters(workspaceSlug, projectId);
+    const _filters = await this.projectService.getProjectUserProperties(workspaceSlug, projectId);
 
     const richFilters = _filters?.rich_filters;
     const displayFilters = this.computedDisplayFilters(_filters?.display_filters);
@@ -176,7 +182,7 @@ export class ProjectIssuesFilter extends IssueFilterHelperStore implements IProj
       });
 
       this.rootIssueStore.projectIssues.fetchIssuesWithExistingPagination(workspaceSlug, projectId, "mutation");
-      await this.issueFilterService.patchProjectIssueFilters(workspaceSlug, projectId, {
+      await this.projectService.updateProjectUserProperties(workspaceSlug, projectId, {
         rich_filters: filters,
       });
     } catch (error) {
@@ -238,7 +244,7 @@ export class ProjectIssuesFilter extends IssueFilterHelperStore implements IProj
             this.rootIssueStore.projectIssues.fetchIssuesWithExistingPagination(workspaceSlug, projectId, "mutation");
           }
 
-          await this.issueFilterService.patchProjectIssueFilters(workspaceSlug, projectId, {
+          await this.projectService.updateProjectUserProperties(workspaceSlug, projectId, {
             display_filters: _filters.displayFilters,
           });
 
@@ -258,7 +264,7 @@ export class ProjectIssuesFilter extends IssueFilterHelperStore implements IProj
             });
           });
 
-          await this.issueFilterService.patchProjectIssueFilters(workspaceSlug, projectId, {
+          await this.projectService.updateProjectUserProperties(workspaceSlug, projectId, {
             display_properties: _filters.displayProperties,
           });
           break;
diff --git a/apps/web/core/store/issue/project/index.ts b/apps/web/core/store/issue/project/index.ts
index 0fe6c946b..a21a791fe 100644
--- a/apps/web/core/store/issue/project/index.ts
+++ b/apps/web/core/store/issue/project/index.ts
@@ -1,2 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./filter.store";
 export * from "./issue.store";
diff --git a/apps/web/core/store/issue/project/issue.store.ts b/apps/web/core/store/issue/project/issue.store.ts
index a36a58391..234e01865 100644
--- a/apps/web/core/store/issue/project/issue.store.ts
+++ b/apps/web/core/store/issue/project/issue.store.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { action, makeObservable, runInAction } from "mobx";
 // types
 import type {
diff --git a/apps/web/core/store/issue/root.store.ts b/apps/web/core/store/issue/root.store.ts
index ad671a566..d8632f311 100644
--- a/apps/web/core/store/issue/root.store.ts
+++ b/apps/web/core/store/issue/root.store.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { isEmpty } from "lodash-es";
 import { autorun, makeObservable, observable } from "mobx";
 // types
diff --git a/apps/web/core/store/issue/workspace-draft/filter.store.ts b/apps/web/core/store/issue/workspace-draft/filter.store.ts
index 49941ccfc..c02f9c689 100644
--- a/apps/web/core/store/issue/workspace-draft/filter.store.ts
+++ b/apps/web/core/store/issue/workspace-draft/filter.store.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { isEmpty, set } from "lodash-es";
 import { action, computed, makeObservable, observable, runInAction } from "mobx";
 import { computedFn } from "mobx-utils";
diff --git a/apps/web/core/store/issue/workspace-draft/index.ts b/apps/web/core/store/issue/workspace-draft/index.ts
index 53c19d3a8..fa4278d4c 100644
--- a/apps/web/core/store/issue/workspace-draft/index.ts
+++ b/apps/web/core/store/issue/workspace-draft/index.ts
@@ -1,2 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./issue.store";
 export * from "./filter.store";
diff --git a/apps/web/core/store/issue/workspace-draft/issue.store.ts b/apps/web/core/store/issue/workspace-draft/issue.store.ts
index 4c8033f64..850a9e03e 100644
--- a/apps/web/core/store/issue/workspace-draft/issue.store.ts
+++ b/apps/web/core/store/issue/workspace-draft/issue.store.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { clone, update, unset, orderBy, set } from "lodash-es";
 import { action, computed, makeObservable, observable, runInAction } from "mobx";
 import { computedFn } from "mobx-utils";
@@ -385,31 +391,39 @@ export class WorkspaceDraftIssues implements IWorkspaceDraftIssues {
   // dummies
   viewFlags: ViewFlags = { enableQuickAdd: false, enableIssueCreation: false, enableInlineEditing: false };
   groupedIssueIds: TGroupedIssues | TSubGroupedIssues | undefined = undefined;
-  getIssueIds = (groupId?: string, subGroupId?: string) => undefined;
-  getPaginationData = (groupId: string | undefined, subGroupId: string | undefined) => undefined;
-  getIssueLoader = (groupId?: string, subGroupId?: string) => "loaded" as TLoader;
-  getGroupIssueCount = (groupId: string | undefined, subGroupId: string | undefined, isSubGroupCumulative: boolean) =>
-    undefined;
-  removeCycleFromIssue = async (workspaceSlug: string, projectId: string, issueId: string) => {};
+  getIssueIds = (_groupId?: string, _subGroupId?: string) => undefined;
+  getPaginationData = (_groupId: string | undefined, _subGroupId: string | undefined) => undefined;
+  getIssueLoader = (_groupId?: string, _subGroupId?: string) => "loaded" as TLoader;
+  getGroupIssueCount = (
+    _groupId: string | undefined,
+    _subGroupId: string | undefined,
+    _isSubGroupCumulative: boolean
+  ) => undefined;
+  removeCycleFromIssue = async (_workspaceSlug: string, _projectId: string, _issueId: string) => {};
   addIssueToCycle = async (
-    workspaceSlug: string,
-    projectId: string,
-    cycleId: string,
-    issueIds: string[],
-    fetchAddedIssues?: boolean
+    _workspaceSlug: string,
+    _projectId: string,
+    _cycleId: string,
+    _issueIds: string[],
+    _fetchAddedIssues?: boolean
   ) => {};
-  removeIssueFromCycle = async (workspaceSlug: string, projectId: string, cycleId: string, issueId: string) => {};
+  removeIssueFromCycle = async (_workspaceSlug: string, _projectId: string, _cycleId: string, _issueId: string) => {};
 
-  removeIssuesFromModule = async (workspaceSlug: string, projectId: string, moduleId: string, issueIds: string[]) => {};
-  changeModulesInIssue = async (
-    workspaceSlug: string,
-    projectId: string,
-    issueId: string,
-    addModuleIds: string[],
-    removeModuleIds: string[]
+  removeIssuesFromModule = async (
+    _workspaceSlug: string,
+    _projectId: string,
+    _moduleId: string,
+    _issueIds: string[]
   ) => {};
-  archiveIssue = async (workspaceSlug: string, projectId: string, issueId: string) => {};
-  archiveBulkIssues = async (workspaceSlug: string, projectId: string, issueIds: string[]) => {};
-  removeBulkIssues = async (workspaceSlug: string, projectId: string, issueIds: string[]) => {};
-  bulkUpdateProperties = async (workspaceSlug: string, projectId: string, data: TBulkOperationsPayload) => {};
+  changeModulesInIssue = async (
+    _workspaceSlug: string,
+    _projectId: string,
+    _issueId: string,
+    _addModuleIds: string[],
+    _removeModuleIds: string[]
+  ) => {};
+  archiveIssue = async (_workspaceSlug: string, _projectId: string, _issueId: string) => {};
+  archiveBulkIssues = async (_workspaceSlug: string, _projectId: string, _issueIds: string[]) => {};
+  removeBulkIssues = async (_workspaceSlug: string, _projectId: string, _issueIds: string[]) => {};
+  bulkUpdateProperties = async (_workspaceSlug: string, _projectId: string, _data: TBulkOperationsPayload) => {};
 }
diff --git a/apps/web/core/store/issue/workspace/filter.store.ts b/apps/web/core/store/issue/workspace/filter.store.ts
index 630429bb3..5b56a363b 100644
--- a/apps/web/core/store/issue/workspace/filter.store.ts
+++ b/apps/web/core/store/issue/workspace/filter.store.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { isEmpty, set } from "lodash-es";
 import { action, computed, makeObservable, observable, runInAction } from "mobx";
 import { computedFn } from "mobx-utils";
@@ -18,7 +24,7 @@ import type {
 import { EIssuesStoreType, EIssueLayoutTypes, STATIC_VIEW_TYPES } from "@plane/types";
 import { handleIssueQueryParamsByLayout } from "@plane/utils";
 // services
-import { WorkspaceService } from "@/plane-web/services";
+import { WorkspaceService } from "@/services/workspace.service";
 // local imports
 import type { IBaseIssueFilterStore, IIssueFilterHelperStore } from "../helpers/issue-filter-helper.store";
 import { IssueFilterHelperStore } from "../helpers/issue-filter-helper.store";
diff --git a/apps/web/core/store/issue/workspace/index.ts b/apps/web/core/store/issue/workspace/index.ts
index 0fe6c946b..a21a791fe 100644
--- a/apps/web/core/store/issue/workspace/index.ts
+++ b/apps/web/core/store/issue/workspace/index.ts
@@ -1,2 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./filter.store";
 export * from "./issue.store";
diff --git a/apps/web/core/store/issue/workspace/issue.store.ts b/apps/web/core/store/issue/workspace/issue.store.ts
index 9fcf17340..eea233397 100644
--- a/apps/web/core/store/issue/workspace/issue.store.ts
+++ b/apps/web/core/store/issue/workspace/issue.store.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { action, makeObservable, runInAction } from "mobx";
 // base class
 import type {
@@ -9,7 +15,7 @@ import type {
   ViewFlags,
 } from "@plane/types";
 // services
-import { WorkspaceService } from "@/plane-web/services";
+import { WorkspaceService } from "@/services/workspace.service";
 // types
 import type { IBaseIssuesStore } from "../helpers/base-issues.store";
 import { BaseIssuesStore } from "../helpers/base-issues.store";
diff --git a/apps/web/core/store/label.store.ts b/apps/web/core/store/label.store.ts
index 635143d89..637ee84d9 100644
--- a/apps/web/core/store/label.store.ts
+++ b/apps/web/core/store/label.store.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { set, sortBy } from "lodash-es";
 import { action, computed, makeObservable, observable, runInAction } from "mobx";
 import { computedFn } from "mobx-utils";
diff --git a/apps/web/core/store/member/index.ts b/apps/web/core/store/member/index.ts
index 50e51d173..fcce4e1fe 100644
--- a/apps/web/core/store/member/index.ts
+++ b/apps/web/core/store/member/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { makeObservable, observable } from "mobx";
 import { computedFn } from "mobx-utils";
 // plane imports
diff --git a/apps/web/core/store/member/project/base-project-member.store.ts b/apps/web/core/store/member/project/base-project-member.store.ts
index eb135868a..701089a09 100644
--- a/apps/web/core/store/member/project/base-project-member.store.ts
+++ b/apps/web/core/store/member/project/base-project-member.store.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { uniq, unset, set, update, sortBy } from "lodash-es";
 import { action, computed, makeObservable, observable, runInAction } from "mobx";
 import { computedFn } from "mobx-utils";
@@ -6,14 +12,14 @@ import { EUserPermissions } from "@plane/constants";
 import type {
   EUserProjectRoles,
   IProjectBulkAddFormData,
-  IProjectMemberNavigationPreferences,
+  IProjectUserPropertiesResponse,
   IUserLite,
   TProjectMembership,
 } from "@plane/types";
 // plane web imports
 import type { RootStore } from "@/plane-web/store/root.store";
 // services
-import { ProjectMemberService } from "@/services/project";
+import { ProjectMemberService, ProjectService } from "@/services/project";
 // store
 import type { IProjectStore } from "@/store/project/project.store";
 import type { IRouterStore } from "@/store/router.store";
@@ -36,8 +42,8 @@ export interface IBaseProjectMemberStore {
   projectMemberMap: {
     [projectId: string]: Record<string, TProjectMembership>;
   };
-  projectMemberPreferencesMap: {
-    [projectId: string]: IProjectMemberNavigationPreferences;
+  projectUserPropertiesMap: {
+    [projectId: string]: IProjectUserPropertiesResponse;
   };
   // filters store
   filters: IProjectMemberFiltersStore;
@@ -48,25 +54,20 @@ export interface IBaseProjectMemberStore {
   getProjectMemberDetails: (userId: string, projectId: string) => IProjectMemberDetails | null;
   getProjectMemberIds: (projectId: string, includeGuestUsers: boolean) => string[] | null;
   getFilteredProjectMemberDetails: (userId: string, projectId: string) => IProjectMemberDetails | null;
-  getProjectMemberPreferences: (projectId: string) => IProjectMemberNavigationPreferences | null;
+  getProjectUserProperties: (projectId: string) => IProjectUserPropertiesResponse | null;
   // fetch actions
   fetchProjectMembers: (
     workspaceSlug: string,
     projectId: string,
     clearExistingMembers?: boolean
   ) => Promise<TProjectMembership[]>;
-  fetchProjectMemberPreferences: (
-    workspaceSlug: string,
-    projectId: string,
-    memberId: string
-  ) => Promise<IProjectMemberNavigationPreferences>;
+  fetchProjectUserProperties: (workspaceSlug: string, projectId: string) => Promise<IProjectUserPropertiesResponse>;
   // update actions
-  updateProjectMemberPreferences: (
+  updateProjectUserProperties: (
     workspaceSlug: string,
     projectId: string,
-    memberId: string,
-    preferences: IProjectMemberNavigationPreferences
-  ) => Promise<void>;
+    data: Partial<IProjectUserPropertiesResponse>
+  ) => Promise<IProjectUserPropertiesResponse>;
   // bulk operation actions
   bulkAddMembersToProject: (
     workspaceSlug: string,
@@ -91,8 +92,8 @@ export abstract class BaseProjectMemberStore implements IBaseProjectMemberStore
   projectMemberMap: {
     [projectId: string]: Record<string, TProjectMembership>;
   } = {};
-  projectMemberPreferencesMap: {
-    [projectId: string]: IProjectMemberNavigationPreferences;
+  projectUserPropertiesMap: {
+    [projectId: string]: IProjectUserPropertiesResponse;
   } = {};
   // filters store
   filters: IProjectMemberFiltersStore;
@@ -104,18 +105,19 @@ export abstract class BaseProjectMemberStore implements IBaseProjectMemberStore
   rootStore: RootStore;
   // services
   projectMemberService;
+  projectService;
 
   constructor(_memberRoot: IMemberRootStore, _rootStore: RootStore) {
     makeObservable(this, {
       // observables
       projectMemberMap: observable,
-      projectMemberPreferencesMap: observable,
+      projectUserPropertiesMap: observable,
       // computed
       projectMemberIds: computed,
       // actions
       fetchProjectMembers: action,
-      fetchProjectMemberPreferences: action,
-      updateProjectMemberPreferences: action,
+      fetchProjectUserProperties: action,
+      updateProjectUserProperties: action,
       bulkAddMembersToProject: action,
       updateMemberRole: action,
       removeMemberFromProject: action,
@@ -129,6 +131,7 @@ export abstract class BaseProjectMemberStore implements IBaseProjectMemberStore
     this.filters = new ProjectMemberFiltersStore();
     // services
     this.projectMemberService = new ProjectMemberService();
+    this.projectService = new ProjectService();
   }
 
   /**
@@ -440,62 +443,53 @@ export abstract class BaseProjectMemberStore implements IBaseProjectMemberStore
    * @description get project member preferences
    * @param projectId
    */
-  getProjectMemberPreferences = computedFn(
-    (projectId: string): IProjectMemberNavigationPreferences | null =>
-      this.projectMemberPreferencesMap[projectId] || null
+  getProjectUserProperties = computedFn(
+    (projectId: string): IProjectUserPropertiesResponse | null => this.projectUserPropertiesMap[projectId] || null
   );
 
   /**
    * @description fetch project member preferences
    * @param workspaceSlug
    * @param projectId
-   * @param memberId
+   * @param data
    */
-  fetchProjectMemberPreferences = async (
+  fetchProjectUserProperties = async (
     workspaceSlug: string,
-    projectId: string,
-    memberId: string
-  ): Promise<IProjectMemberNavigationPreferences> => {
-    const response = await this.projectMemberService.getProjectMemberPreferences(workspaceSlug, projectId, memberId);
-    const preferences: IProjectMemberNavigationPreferences = {
-      default_tab: response.preferences.navigation.default_tab,
-      hide_in_more_menu: response.preferences.navigation.hide_in_more_menu || [],
-    };
+    projectId: string
+  ): Promise<IProjectUserPropertiesResponse> => {
+    const response = await this.projectService.getProjectUserProperties(workspaceSlug, projectId);
     runInAction(() => {
-      set(this.projectMemberPreferencesMap, [projectId], preferences);
+      set(this.projectUserPropertiesMap, [projectId], response);
     });
-    return preferences;
+    return response;
   };
 
   /**
    * @description update project member preferences
    * @param workspaceSlug
    * @param projectId
-   * @param memberId
-   * @param preferences
+   * @param data
    */
-  updateProjectMemberPreferences = async (
+  updateProjectUserProperties = async (
     workspaceSlug: string,
     projectId: string,
-    memberId: string,
-    preferences: IProjectMemberNavigationPreferences
-  ): Promise<void> => {
-    const previousPreferences = this.projectMemberPreferencesMap[projectId];
+    data: Partial<IProjectUserPropertiesResponse>
+  ): Promise<IProjectUserPropertiesResponse> => {
+    const previousProperties = this.projectUserPropertiesMap[projectId];
     try {
       // Optimistically update the store
       runInAction(() => {
-        set(this.projectMemberPreferencesMap, [projectId], preferences);
-      });
-      await this.projectMemberService.updateProjectMemberPreferences(workspaceSlug, projectId, memberId, {
-        navigation: preferences,
+        set(this.projectUserPropertiesMap, [projectId], data);
       });
+      const response = await this.projectService.updateProjectUserProperties(workspaceSlug, projectId, data);
+      return response;
     } catch (error) {
       // Revert on error
       runInAction(() => {
-        if (previousPreferences) {
-          set(this.projectMemberPreferencesMap, [projectId], previousPreferences);
+        if (previousProperties) {
+          set(this.projectUserPropertiesMap, [projectId], previousProperties);
         } else {
-          unset(this.projectMemberPreferencesMap, [projectId]);
+          unset(this.projectUserPropertiesMap, [projectId]);
         }
       });
       throw error;
diff --git a/apps/web/core/store/member/project/project-member-filters.store.ts b/apps/web/core/store/member/project/project-member-filters.store.ts
index b28f8665c..2d4fa406c 100644
--- a/apps/web/core/store/member/project/project-member-filters.store.ts
+++ b/apps/web/core/store/member/project/project-member-filters.store.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { action, makeObservable, observable } from "mobx";
 import { computedFn } from "mobx-utils";
 // types
diff --git a/apps/web/core/store/member/utils.ts b/apps/web/core/store/member/utils.ts
index 9f13d694d..23767668d 100644
--- a/apps/web/core/store/member/utils.ts
+++ b/apps/web/core/store/member/utils.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // Types and utilities for member filtering
 import type { EUserPermissions, TMemberOrderByOptions } from "@plane/constants";
 import type { IUserLite, TProjectMembership } from "@plane/types";
diff --git a/apps/web/core/store/member/workspace/workspace-member-filters.store.ts b/apps/web/core/store/member/workspace/workspace-member-filters.store.ts
index 6ff5fc747..4041be9ce 100644
--- a/apps/web/core/store/member/workspace/workspace-member-filters.store.ts
+++ b/apps/web/core/store/member/workspace/workspace-member-filters.store.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { action, makeObservable, observable } from "mobx";
 import { computedFn } from "mobx-utils";
 // types
diff --git a/apps/web/core/store/member/workspace/workspace-member.store.ts b/apps/web/core/store/member/workspace/workspace-member.store.ts
index edf9d2a29..cad57f0aa 100644
--- a/apps/web/core/store/member/workspace/workspace-member.store.ts
+++ b/apps/web/core/store/member/workspace/workspace-member.store.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { set, sortBy } from "lodash-es";
 import { action, computed, makeObservable, observable, runInAction } from "mobx";
 import { computedFn } from "mobx-utils";
@@ -6,15 +12,15 @@ import type { EUserPermissions } from "@plane/constants";
 import type { IWorkspaceBulkInviteFormData, IWorkspaceMember, IWorkspaceMemberInvitation } from "@plane/types";
 // plane-web constants
 // services
-import { WorkspaceService } from "@/plane-web/services";
+import { WorkspaceService } from "@/services/workspace.service";
 // types
 import type { IRouterStore } from "@/store/router.store";
 import type { IUserStore } from "@/store/user";
 // store
-import type { CoreRootStore } from "../../root.store";
 import type { IMemberRootStore } from "../index.ts";
 import type { IWorkspaceMemberFiltersStore } from "./workspace-member-filters.store";
 import { WorkspaceMemberFiltersStore } from "./workspace-member-filters.store";
+import type { RootStore } from "@/plane-web/store/root.store";
 
 export interface IWorkspaceMembership {
   id: string;
@@ -72,7 +78,7 @@ export class WorkspaceMemberStore implements IWorkspaceMemberStore {
   // services
   workspaceService;
 
-  constructor(_memberRoot: IMemberRootStore, _rootStore: CoreRootStore) {
+  constructor(_memberRoot: IMemberRootStore, _rootStore: RootStore) {
     makeObservable(this, {
       // observables
       workspaceMemberMap: observable,
diff --git a/apps/web/core/store/module.store.ts b/apps/web/core/store/module.store.ts
index 568ad261b..2605c9c51 100644
--- a/apps/web/core/store/module.store.ts
+++ b/apps/web/core/store/module.store.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { update, concat, set, sortBy } from "lodash-es";
 import { action, computed, observable, makeObservable, runInAction } from "mobx";
 import { computedFn } from "mobx-utils";
diff --git a/apps/web/core/store/module_filter.store.ts b/apps/web/core/store/module_filter.store.ts
index 59fc81b7d..258ca3e38 100644
--- a/apps/web/core/store/module_filter.store.ts
+++ b/apps/web/core/store/module_filter.store.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { set } from "lodash-es";
 import { action, computed, observable, makeObservable, runInAction, reaction } from "mobx";
 import { computedFn } from "mobx-utils";
diff --git a/apps/web/core/store/multiple_select.store.ts b/apps/web/core/store/multiple_select.store.ts
index fb75d6984..e479a2328 100644
--- a/apps/web/core/store/multiple_select.store.ts
+++ b/apps/web/core/store/multiple_select.store.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { differenceWith, remove, isEqual } from "lodash-es";
 import { action, computed, makeObservable, observable, runInAction } from "mobx";
 import { computedFn } from "mobx-utils";
diff --git a/apps/web/core/store/notifications/notification.ts b/apps/web/core/store/notifications/notification.ts
index c89f6d1c9..16681086a 100644
--- a/apps/web/core/store/notifications/notification.ts
+++ b/apps/web/core/store/notifications/notification.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 /* eslint-disable no-useless-catch */
 import { set } from "lodash-es";
 import { action, computed, makeObservable, observable, runInAction } from "mobx";
diff --git a/apps/web/core/store/notifications/workspace-notifications.store.ts b/apps/web/core/store/notifications/workspace-notifications.store.ts
index 076717929..b11f563b2 100644
--- a/apps/web/core/store/notifications/workspace-notifications.store.ts
+++ b/apps/web/core/store/notifications/workspace-notifications.store.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { orderBy, isEmpty, update, set } from "lodash-es";
 import { action, makeObservable, observable, runInAction } from "mobx";
 import { computedFn } from "mobx-utils";
diff --git a/apps/web/core/store/pages/base-page.ts b/apps/web/core/store/pages/base-page.ts
index bf8d53671..1cde3950b 100644
--- a/apps/web/core/store/pages/base-page.ts
+++ b/apps/web/core/store/pages/base-page.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { set } from "lodash-es";
 import { action, computed, makeObservable, observable, reaction, runInAction } from "mobx";
 // plane imports
@@ -80,7 +86,7 @@ export class BasePage extends ExtendedBasePage implements TBasePage {
   id: string | undefined;
   name: string | undefined;
   logo_props: TLogoProps | undefined;
-  description: object | undefined;
+  description_json: object | undefined;
   description_html: string | undefined;
   color: string | undefined;
   label_ids: string[] | undefined;
@@ -117,7 +123,7 @@ export class BasePage extends ExtendedBasePage implements TBasePage {
     this.id = page?.id || undefined;
     this.name = page?.name;
     this.logo_props = page?.logo_props || undefined;
-    this.description = page?.description || undefined;
+    this.description_json = page?.description_json || undefined;
     this.description_html = page?.description_html || undefined;
     this.color = page?.color || undefined;
     this.label_ids = page?.label_ids || undefined;
@@ -142,7 +148,7 @@ export class BasePage extends ExtendedBasePage implements TBasePage {
       id: observable.ref,
       name: observable.ref,
       logo_props: observable.ref,
-      description: observable,
+      description_json: observable.ref,
       description_html: observable.ref,
       color: observable.ref,
       label_ids: observable,
@@ -217,7 +223,7 @@ export class BasePage extends ExtendedBasePage implements TBasePage {
     return {
       id: this.id,
       name: this.name,
-      description: this.description,
+      description_json: this.description_json,
       description_html: this.description_html,
       color: this.color,
       label_ids: this.label_ids,
diff --git a/apps/web/core/store/pages/page-editor-info.ts b/apps/web/core/store/pages/page-editor-info.ts
index 937302443..5048137e5 100644
--- a/apps/web/core/store/pages/page-editor-info.ts
+++ b/apps/web/core/store/pages/page-editor-info.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { action, makeObservable, observable, runInAction } from "mobx";
 // plane imports
 import type { EditorRefApi, TEditorAsset } from "@plane/editor";
diff --git a/apps/web/core/store/pages/project-page.store.ts b/apps/web/core/store/pages/project-page.store.ts
index 040fea59a..abb48ab91 100644
--- a/apps/web/core/store/pages/project-page.store.ts
+++ b/apps/web/core/store/pages/project-page.store.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { unset, set } from "lodash-es";
 import { makeObservable, observable, runInAction, action, reaction, computed } from "mobx";
 import { computedFn } from "mobx-utils";
@@ -322,7 +328,7 @@ export class ProjectPageStore implements IProjectPageStore {
    * @description delete a page
    * @param {string} pageId
    */
-  removePage = async ({ pageId, shouldSync = true }: { pageId: string; shouldSync?: boolean }) => {
+  removePage = async ({ pageId, shouldSync: _shouldSync = true }: { pageId: string; shouldSync?: boolean }) => {
     try {
       const { workspaceSlug, projectId } = this.store.router;
       if (!workspaceSlug || !projectId || !pageId) return undefined;
diff --git a/apps/web/core/store/pages/project-page.ts b/apps/web/core/store/pages/project-page.ts
index d72c58656..b3cc1c992 100644
--- a/apps/web/core/store/pages/project-page.ts
+++ b/apps/web/core/store/pages/project-page.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { computed, makeObservable } from "mobx";
 import { computedFn } from "mobx-utils";
 // constants
diff --git a/apps/web/core/store/project-view.store.ts b/apps/web/core/store/project-view.store.ts
index 17167c0a5..f4e4007a1 100644
--- a/apps/web/core/store/project-view.store.ts
+++ b/apps/web/core/store/project-view.store.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { set } from "lodash-es";
 import { observable, action, makeObservable, runInAction, computed } from "mobx";
 import { computedFn } from "mobx-utils";
@@ -7,7 +13,7 @@ import type { IProjectView, TViewFilters } from "@plane/types";
 // helpers
 import { getValidatedViewFilters, getViewName, orderViews, shouldFilterView } from "@plane/utils";
 // services
-import { ViewService } from "@/plane-web/services";
+import { ViewService } from "@/services/view.service";
 // store
 import type { CoreRootStore } from "./root.store";
 
diff --git a/apps/web/core/store/project/index.ts b/apps/web/core/store/project/index.ts
index 0d128c09d..bd04991c7 100644
--- a/apps/web/core/store/project/index.ts
+++ b/apps/web/core/store/project/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { CoreRootStore } from "../root.store";
 import type { IProjectPublishStore } from "./project-publish.store";
 import { ProjectPublishStore } from "./project-publish.store";
diff --git a/apps/web/core/store/project/project-publish.store.ts b/apps/web/core/store/project/project-publish.store.ts
index cb0c84ccf..f520c3102 100644
--- a/apps/web/core/store/project/project-publish.store.ts
+++ b/apps/web/core/store/project/project-publish.store.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { unset, set } from "lodash-es";
 import { observable, action, makeObservable, runInAction } from "mobx";
 // types
diff --git a/apps/web/core/store/project/project.store.ts b/apps/web/core/store/project/project.store.ts
index 3dce91b05..55e1485fd 100644
--- a/apps/web/core/store/project/project.store.ts
+++ b/apps/web/core/store/project/project.store.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { sortBy, cloneDeep, update, set } from "lodash-es";
 import { observable, action, computed, makeObservable, runInAction } from "mobx";
 import { computedFn } from "mobx-utils";
@@ -30,6 +36,7 @@ export interface IProjectStore {
   joinedProjectIds: string[];
   favoriteProjectIds: string[];
   currentProjectDetails: TProject | undefined;
+  currentProjectNextSequenceId: number | undefined;
   // actions
   getProjectById: (projectId: string | undefined | null) => TProject | undefined;
   getPartialProjectById: (projectId: string | undefined | null) => TPartialProject | undefined;
@@ -107,6 +114,7 @@ export class ProjectStore implements IProjectStore {
       currentProjectDetails: computed,
       joinedProjectIds: computed,
       favoriteProjectIds: computed,
+      currentProjectNextSequenceId: computed,
       // helper actions
       processProjectAfterCreation: action,
       // fetch actions
@@ -216,6 +224,15 @@ export class ProjectStore implements IProjectStore {
     return this.projectMap?.[this.rootStore.router.projectId];
   }
 
+  /**
+   * Returns the next sequence ID for the current project
+   * Used for calculating identifier width in list layouts
+   */
+  get currentProjectNextSequenceId() {
+    if (!this.rootStore.router.projectId) return undefined;
+    return this.currentProjectDetails?.next_work_item_sequence;
+  }
+
   /**
    * Returns joined project IDs belong to the current workspace
    */
@@ -498,7 +515,7 @@ export class ProjectStore implements IProjectStore {
       runInAction(() => {
         set(this.projectMap, [projectId, "sort_order"], viewProps?.sort_order);
       });
-      const response = await this.projectService.setProjectView(workspaceSlug, projectId, viewProps);
+      const response = await this.projectService.updateProjectUserProperties(workspaceSlug, projectId, viewProps);
       return response;
     } catch (error) {
       runInAction(() => {
diff --git a/apps/web/core/store/project/project_filter.store.ts b/apps/web/core/store/project/project_filter.store.ts
index 72b855152..c769d1cb6 100644
--- a/apps/web/core/store/project/project_filter.store.ts
+++ b/apps/web/core/store/project/project_filter.store.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { set } from "lodash-es";
 import { action, computed, observable, makeObservable, runInAction, reaction } from "mobx";
 import { computedFn } from "mobx-utils";
diff --git a/apps/web/core/store/root.store.ts b/apps/web/core/store/root.store.ts
index 0b82f1321..bc36931d8 100644
--- a/apps/web/core/store/root.store.ts
+++ b/apps/web/core/store/root.store.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { enableStaticRendering } from "mobx-react";
 // plane imports
 import { FALLBACK_LANGUAGE, LANGUAGE_STORAGE_KEY } from "@plane/i18n";
@@ -13,6 +19,7 @@ import type { IPowerKStore } from "@/plane-web/store/power-k.store";
 import type { RootStore } from "@/plane-web/store/root.store";
 import type { IStateStore } from "@/plane-web/store/state.store";
 import { StateStore } from "@/plane-web/store/state.store";
+import { WorkspaceRootStore } from "@/plane-web/store/workspace";
 // stores
 import type { ICycleStore } from "./cycle.store";
 import { CycleStore } from "./cycle.store";
@@ -61,7 +68,6 @@ import { ThemeStore } from "./theme.store";
 import type { IUserStore } from "./user";
 import { UserStore } from "./user";
 import type { IWorkspaceRootStore } from "./workspace";
-import { WorkspaceRootStore } from "./workspace";
 
 enableStaticRendering(typeof window === "undefined");
 
@@ -102,7 +108,7 @@ export class CoreRootStore {
     this.instance = new InstanceStore();
     this.user = new UserStore(this as unknown as RootStore);
     this.theme = new ThemeStore();
-    this.workspaceRoot = new WorkspaceRootStore(this);
+    this.workspaceRoot = new WorkspaceRootStore(this as unknown as RootStore);
     this.projectRoot = new ProjectRootStore(this);
     this.memberRoot = new MemberRootStore(this as unknown as RootStore);
     this.cycle = new CycleStore(this);
@@ -136,7 +142,7 @@ export class CoreRootStore {
     this.commandPalette = new CommandPaletteStore();
     this.instance = new InstanceStore();
     this.user = new UserStore(this as unknown as RootStore);
-    this.workspaceRoot = new WorkspaceRootStore(this);
+    this.workspaceRoot = new WorkspaceRootStore(this as unknown as RootStore);
     this.projectRoot = new ProjectRootStore(this);
     this.memberRoot = new MemberRootStore(this as unknown as RootStore);
     this.cycle = new CycleStore(this);
diff --git a/apps/web/core/store/router.store.ts b/apps/web/core/store/router.store.ts
index 68ac0f627..1e15b8e58 100644
--- a/apps/web/core/store/router.store.ts
+++ b/apps/web/core/store/router.store.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { ParsedUrlQuery } from "node:querystring";
 import { action, makeObservable, observable, computed, runInAction } from "mobx";
 
diff --git a/apps/web/core/store/state.store.ts b/apps/web/core/store/state.store.ts
index 91130b826..1e2ad5673 100644
--- a/apps/web/core/store/state.store.ts
+++ b/apps/web/core/store/state.store.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { set, groupBy } from "lodash-es";
 import { action, computed, makeObservable, observable, runInAction } from "mobx";
 import { computedFn } from "mobx-utils";
@@ -7,7 +13,7 @@ import type { IIntakeState, IState } from "@plane/types";
 // helpers
 import { sortStates } from "@plane/utils";
 // plane web
-import { ProjectStateService } from "@/plane-web/services/project/project-state.service";
+import { ProjectStateService } from "@/services/project/project-state.service";
 import type { RootStore } from "@/plane-web/store/root.store";
 
 export interface IStateStore {
diff --git a/apps/web/core/store/sticky/sticky.store.ts b/apps/web/core/store/sticky/sticky.store.ts
index 5f2877a6b..098332145 100644
--- a/apps/web/core/store/sticky/sticky.store.ts
+++ b/apps/web/core/store/sticky/sticky.store.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { orderBy, set } from "lodash-es";
 import { observable, action, makeObservable, runInAction } from "mobx";
 import { computedFn } from "mobx-utils";
diff --git a/apps/web/core/store/theme.store.ts b/apps/web/core/store/theme.store.ts
index e788089e1..78d6cbc00 100644
--- a/apps/web/core/store/theme.store.ts
+++ b/apps/web/core/store/theme.store.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { action, observable, makeObservable, runInAction } from "mobx";
 
 export interface IThemeStore {
diff --git a/apps/web/core/store/timeline/issues-timeline.store.ts b/apps/web/core/store/timeline/issues-timeline.store.ts
index b68ac8fc0..9320bf06a 100644
--- a/apps/web/core/store/timeline/issues-timeline.store.ts
+++ b/apps/web/core/store/timeline/issues-timeline.store.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { autorun } from "mobx";
 // Plane-web
 import type { RootStore } from "@/plane-web/store/root.store";
diff --git a/apps/web/core/store/timeline/modules-timeline.store.ts b/apps/web/core/store/timeline/modules-timeline.store.ts
index 0f0e4cf75..0b5f0317c 100644
--- a/apps/web/core/store/timeline/modules-timeline.store.ts
+++ b/apps/web/core/store/timeline/modules-timeline.store.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { autorun } from "mobx";
 // Store
 import type { RootStore } from "@/plane-web/store/root.store";
diff --git a/apps/web/core/store/user/account.store.ts b/apps/web/core/store/user/account.store.ts
index 0f441586d..47369128f 100644
--- a/apps/web/core/store/user/account.store.ts
+++ b/apps/web/core/store/user/account.store.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { set } from "lodash-es";
 import { makeObservable, observable } from "mobx";
 // types
diff --git a/apps/web/core/store/user/base-permissions.store.ts b/apps/web/core/store/user/base-permissions.store.ts
index 0d9e28612..8810ab26c 100644
--- a/apps/web/core/store/user/base-permissions.store.ts
+++ b/apps/web/core/store/user/base-permissions.store.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { unset, set } from "lodash-es";
 import { action, makeObservable, observable, runInAction } from "mobx";
 import { computedFn } from "mobx-utils";
@@ -11,7 +17,7 @@ import {
 import type { EUserProjectRoles, IUserProjectsRole, IWorkspaceMemberMe, TProjectMembership } from "@plane/types";
 import { EUserWorkspaceRoles } from "@plane/types";
 // plane web imports
-import { WorkspaceService } from "@/plane-web/services";
+import { WorkspaceService } from "@/services/workspace.service";
 import type { RootStore } from "@/plane-web/store/root.store";
 // services
 import projectMemberService from "@/services/project/project-member.service";
@@ -36,6 +42,7 @@ export interface IBaseUserPermissionStore {
     workspaceSlug: string,
     projectId?: string
   ) => EUserPermissions | undefined;
+  fetchWorkspaceLevelProjectEntities: (workspaceSlug: string, projectId: string) => void;
   allowPermissions: (
     allowPermissions: ETempUserRole[],
     level: TUserPermissionsLevel,
@@ -148,6 +155,15 @@ export abstract class BaseUserPermissionStore implements IBaseUserPermissionStor
     projectId?: string
   ) => EUserPermissions | undefined;
 
+  /**
+   * @description Fetches project-level entities that are not automatically loaded by the project wrapper.
+   * This is used when joining a project to ensure all necessary workspace-level project data is available.
+   * @param { string } workspaceSlug
+   * @param { string } projectId
+   * @returns { Promise<void> }
+   */
+  abstract fetchWorkspaceLevelProjectEntities: (workspaceSlug: string, projectId: string) => void;
+
   /**
    * @description Returns whether the user has the permission to access a page
    * @param { string } page
@@ -309,6 +325,7 @@ export abstract class BaseUserPermissionStore implements IBaseUserPermissionStor
         runInAction(() => {
           set(this.workspaceProjectsPermissions, [workspaceSlug, projectId], projectMemberRole);
         });
+        void this.fetchWorkspaceLevelProjectEntities(workspaceSlug, projectId);
       }
     } catch (error) {
       console.error("Error user joining the project", error);
diff --git a/apps/web/core/store/user/index.ts b/apps/web/core/store/user/index.ts
index 1656b0d4a..7181a6ed1 100644
--- a/apps/web/core/store/user/index.ts
+++ b/apps/web/core/store/user/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { cloneDeep, set } from "lodash-es";
 import { action, makeObservable, observable, runInAction, computed } from "mobx";
 // plane imports
diff --git a/apps/web/core/store/user/profile.store.ts b/apps/web/core/store/user/profile.store.ts
index ca8ce0cc5..5f51e4a16 100644
--- a/apps/web/core/store/user/profile.store.ts
+++ b/apps/web/core/store/user/profile.store.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { cloneDeep, set } from "lodash-es";
 import { action, makeObservable, observable, runInAction } from "mobx";
 // types
@@ -36,13 +42,9 @@ export class ProfileStore implements IUserProfileStore {
     last_workspace_id: undefined,
     theme: {
       theme: undefined,
-      text: undefined,
-      palette: undefined,
       primary: undefined,
       background: undefined,
-      darkPalette: undefined,
-      sidebarText: undefined,
-      sidebarBackground: undefined,
+      darkPalette: false,
     },
     onboarding_step: {
       workspace_join: false,
@@ -219,12 +221,14 @@ export class ProfileStore implements IUserProfileStore {
     const currentProfileTheme = cloneDeep(this.data.theme);
     try {
       runInAction(() => {
-        Object.keys(data).forEach((key: string) => {
-          const userKey: keyof IUserTheme = key as keyof IUserTheme;
-          if (this.data.theme) set(this.data.theme, userKey, data[userKey]);
+        Object.keys(data).forEach((key) => {
+          const dataKey = key as keyof IUserTheme;
+          if (this.data.theme) set(this.data.theme, dataKey, data[dataKey]);
         });
       });
-      const userProfile = await this.userService.updateCurrentUserProfile({ theme: this.data.theme });
+      const userProfile = await this.userService.updateCurrentUserProfile({
+        theme: this.data.theme,
+      });
       return userProfile;
     } catch (error) {
       runInAction(() => {
diff --git a/apps/web/core/store/user/settings.store.ts b/apps/web/core/store/user/settings.store.ts
index ae89f0329..ff504d1e6 100644
--- a/apps/web/core/store/user/settings.store.ts
+++ b/apps/web/core/store/user/settings.store.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { action, makeObservable, observable, runInAction } from "mobx";
 // plane imports
 import type { IUserSettings } from "@plane/types";
diff --git a/apps/web/core/store/workspace/api-token.store.ts b/apps/web/core/store/workspace/api-token.store.ts
index 5c290a723..03e95b35d 100644
--- a/apps/web/core/store/workspace/api-token.store.ts
+++ b/apps/web/core/store/workspace/api-token.store.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { action, observable, makeObservable, runInAction } from "mobx";
 import { computedFn } from "mobx-utils";
 // types
diff --git a/apps/web/core/store/workspace/home.ts b/apps/web/core/store/workspace/home.ts
index 7b0f77bb3..de4099dd4 100644
--- a/apps/web/core/store/workspace/home.ts
+++ b/apps/web/core/store/workspace/home.ts
@@ -1,9 +1,15 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { orderBy, clone, set } from "lodash-es";
 import { action, computed, makeObservable, observable, runInAction } from "mobx";
 // plane imports
 import type { THomeWidgetKeys, TWidgetEntityData } from "@plane/types";
 // plane web services
-import { WorkspaceService } from "@/plane-web/services";
+import { WorkspaceService } from "@/services/workspace.service";
 // store
 import type { IWorkspaceLinkStore } from "./link.store";
 import { WorkspaceLinkStore } from "./link.store";
diff --git a/apps/web/core/store/workspace/index.ts b/apps/web/core/store/workspace/index.ts
index 3dd1e0eb9..746c86999 100644
--- a/apps/web/core/store/workspace/index.ts
+++ b/apps/web/core/store/workspace/index.ts
@@ -1,10 +1,21 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { clone, set } from "lodash-es";
 import { action, computed, observable, makeObservable, runInAction } from "mobx";
 // types
 import { computedFn } from "mobx-utils";
-import type { IWorkspaceSidebarNavigationItem, IWorkspace, IWorkspaceSidebarNavigation } from "@plane/types";
+import type {
+  IWorkspaceSidebarNavigationItem,
+  IWorkspace,
+  IWorkspaceSidebarNavigation,
+  IWorkspaceUserPropertiesResponse,
+} from "@plane/types";
 // services
-import { WorkspaceService } from "@/plane-web/services";
+import { WorkspaceService } from "@/services/workspace.service";
 // store
 import type { CoreRootStore } from "@/store/root.store";
 // sub-stores
@@ -23,6 +34,7 @@ export interface IWorkspaceRootStore {
   currentWorkspace: IWorkspace | null;
   workspacesCreatedByCurrentUser: IWorkspace[] | null;
   navigationPreferencesMap: Record<string, IWorkspaceSidebarNavigation>;
+  projectNavigationPreferencesMap: Record<string, IWorkspaceUserPropertiesResponse>;
   getWorkspaceRedirectionUrl: () => string;
   // computed actions
   getWorkspaceBySlug: (workspaceSlug: string) => IWorkspace | null;
@@ -45,17 +57,25 @@ export interface IWorkspaceRootStore {
     data: Array<{ key: string; is_pinned: boolean; sort_order: number }>
   ) => Promise<void>;
   getNavigationPreferences: (workspaceSlug: string) => IWorkspaceSidebarNavigation | undefined;
+  getProjectNavigationPreferences: (workspaceSlug: string) => IWorkspaceUserPropertiesResponse | undefined;
+  fetchProjectNavigationPreferences: (workspaceSlug: string) => Promise<void>;
+  updateProjectNavigationPreferences: (
+    workspaceSlug: string,
+    data: Partial<IWorkspaceUserPropertiesResponse>
+  ) => Promise<void>;
+  mutateWorkspaceMembersActivity: (workspaceSlug: string) => Promise<void>;
   // sub-stores
   webhook: IWebhookStore;
   apiToken: IApiTokenStore;
   home: IHomeStore;
 }
 
-export class WorkspaceRootStore implements IWorkspaceRootStore {
+export abstract class BaseWorkspaceRootStore implements IWorkspaceRootStore {
   loader: boolean = false;
   // observables
   workspaces: Record<string, IWorkspace> = {};
   navigationPreferencesMap: Record<string, IWorkspaceSidebarNavigation> = {};
+  projectNavigationPreferencesMap: Record<string, IWorkspaceUserPropertiesResponse> = {};
   // services
   workspaceService;
   // root store
@@ -72,6 +92,7 @@ export class WorkspaceRootStore implements IWorkspaceRootStore {
       // observables
       workspaces: observable,
       navigationPreferencesMap: observable,
+      projectNavigationPreferencesMap: observable,
       // computed
       currentWorkspace: computed,
       workspacesCreatedByCurrentUser: computed,
@@ -87,6 +108,8 @@ export class WorkspaceRootStore implements IWorkspaceRootStore {
       fetchSidebarNavigationPreferences: action,
       updateSidebarPreference: action,
       updateBulkSidebarPreferences: action,
+      fetchProjectNavigationPreferences: action,
+      updateProjectNavigationPreferences: action,
     });
 
     // services
@@ -205,7 +228,7 @@ export class WorkspaceRootStore implements IWorkspaceRootStore {
    * @param {string} workspaceSlug
    * @param {string} logoURL
    */
-  updateWorkspaceLogo = async (workspaceSlug: string, logoURL: string) => {
+  updateWorkspaceLogo = (workspaceSlug: string, logoURL: string) => {
     const workspaceId = this.getWorkspaceBySlug(workspaceSlug)?.id;
     if (!workspaceId) {
       throw new Error("Workspace not found");
@@ -219,15 +242,19 @@ export class WorkspaceRootStore implements IWorkspaceRootStore {
    * delete workspace using the workspace slug
    * @param workspaceSlug
    */
-  deleteWorkspace = async (workspaceSlug: string) =>
-    await this.workspaceService.deleteWorkspace(workspaceSlug).then(() => {
+  deleteWorkspace = async (workspaceSlug: string) => {
+    try {
+      await this.workspaceService.deleteWorkspace(workspaceSlug);
       const updatedWorkspacesList = this.workspaces;
       const workspaceId = this.getWorkspaceBySlug(workspaceSlug)?.id;
       delete updatedWorkspacesList[`${workspaceId}`];
       runInAction(() => {
         this.workspaces = updatedWorkspacesList;
       });
-    });
+    } catch (error) {
+      console.error("Failed to delete workspace:", error);
+    }
+  };
 
   fetchSidebarNavigationPreferences = async (workspaceSlug: string) => {
     try {
@@ -309,4 +336,55 @@ export class WorkspaceRootStore implements IWorkspaceRootStore {
       throw error;
     }
   };
+
+  getProjectNavigationPreferences = computedFn(
+    (workspaceSlug: string): IWorkspaceUserPropertiesResponse | undefined =>
+      this.projectNavigationPreferencesMap[workspaceSlug]
+  );
+
+  fetchProjectNavigationPreferences = async (workspaceSlug: string) => {
+    try {
+      const response = await this.workspaceService.fetchWorkspaceFilters(workspaceSlug);
+
+      runInAction(() => {
+        this.projectNavigationPreferencesMap[workspaceSlug] = response;
+      });
+    } catch (error) {
+      console.error("Failed to fetch project navigation preferences:", error);
+      throw error;
+    }
+  };
+
+  updateProjectNavigationPreferences = async (
+    workspaceSlug: string,
+    data: Partial<IWorkspaceUserPropertiesResponse>
+  ) => {
+    const beforeUpdateData = clone(this.projectNavigationPreferencesMap[workspaceSlug]);
+
+    try {
+      // Optimistically update store
+      runInAction(() => {
+        this.projectNavigationPreferencesMap[workspaceSlug] = {
+          ...this.projectNavigationPreferencesMap[workspaceSlug],
+          ...data,
+        };
+      });
+
+      // Call API to persist changes
+      await this.workspaceService.patchWorkspaceFilters(workspaceSlug, data);
+    } catch (error) {
+      // Rollback on failure
+      runInAction(() => {
+        this.projectNavigationPreferencesMap[workspaceSlug] = beforeUpdateData;
+      });
+      console.error("Failed to update project navigation preferences:", error);
+      throw error;
+    }
+  };
+
+  /**
+   * Mutate workspace members activity
+   * @param workspaceSlug
+   */
+  abstract mutateWorkspaceMembersActivity(workspaceSlug: string): Promise<void>;
 }
diff --git a/apps/web/core/store/workspace/link.store.ts b/apps/web/core/store/workspace/link.store.ts
index 9ef46bb55..3b6ead0d2 100644
--- a/apps/web/core/store/workspace/link.store.ts
+++ b/apps/web/core/store/workspace/link.store.ts
@@ -1,9 +1,15 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { set } from "lodash-es";
 import { action, makeObservable, observable, runInAction } from "mobx";
 // types
 import type { TLink, TLinkIdMap, TLinkMap } from "@plane/types";
 // services
-import { WorkspaceService } from "@/plane-web/services";
+import { WorkspaceService } from "@/services/workspace.service";
 
 export interface IWorkspaceLinkStoreActions {
   addLinks: (projectId: string, links: TLink[]) => void;
diff --git a/apps/web/core/store/workspace/webhook.store.ts b/apps/web/core/store/workspace/webhook.store.ts
index bd0de1c44..4d4fe782d 100644
--- a/apps/web/core/store/workspace/webhook.store.ts
+++ b/apps/web/core/store/workspace/webhook.store.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // mobx
 import { action, observable, makeObservable, computed, runInAction } from "mobx";
 import { computedFn } from "mobx-utils";
diff --git a/apps/web/core/types/navigation-preferences.ts b/apps/web/core/types/navigation-preferences.ts
index 357593a5a..ae07a9a66 100644
--- a/apps/web/core/types/navigation-preferences.ts
+++ b/apps/web/core/types/navigation-preferences.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export type TPersonalNavigationItemKey = "stickies" | "your_work" | "drafts";
 
 export interface TPersonalNavigationItem {
@@ -11,7 +17,7 @@ export interface TPersonalNavigationItemState {
   sort_order: number;
 }
 
-export type TProjectNavigationMode = "accordion" | "horizontal";
+export type TProjectNavigationMode = "ACCORDION" | "TABBED";
 
 export interface TProjectDisplaySettings {
   navigationMode: TProjectNavigationMode;
@@ -54,7 +60,7 @@ export const DEFAULT_PERSONAL_PREFERENCES: TPersonalNavigationPreferences = {
 };
 
 export const DEFAULT_PROJECT_PREFERENCES: TProjectNavigationPreferences = {
-  navigationMode: "accordion",
+  navigationMode: "ACCORDION",
   showLimitedProjects: false,
   limitedProjectsCount: 10,
 };
diff --git a/apps/web/ee/components/active-cycles/index.ts b/apps/web/ee/components/active-cycles/index.ts
deleted file mode 100644
index 87c131821..000000000
--- a/apps/web/ee/components/active-cycles/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from "./root";
-export * from "./workspace-active-cycles-upgrade";
diff --git a/apps/web/ee/components/active-cycles/root.tsx b/apps/web/ee/components/active-cycles/root.tsx
deleted file mode 100644
index a7810d113..000000000
--- a/apps/web/ee/components/active-cycles/root.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export * from "ce/components/active-cycles/root";
diff --git a/apps/web/ee/components/active-cycles/workspace-active-cycles-upgrade.tsx b/apps/web/ee/components/active-cycles/workspace-active-cycles-upgrade.tsx
deleted file mode 100644
index f35c1f848..000000000
--- a/apps/web/ee/components/active-cycles/workspace-active-cycles-upgrade.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export * from "ce/components/active-cycles/workspace-active-cycles-upgrade";
diff --git a/apps/web/ee/components/app-rail/index.ts b/apps/web/ee/components/app-rail/index.ts
deleted file mode 100644
index 68889686d..000000000
--- a/apps/web/ee/components/app-rail/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "ce/components/app-rail";
diff --git a/apps/web/ee/components/comments/index.ts b/apps/web/ee/components/comments/index.ts
deleted file mode 100644
index 6cff36e71..000000000
--- a/apps/web/ee/components/comments/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "ce/components/comments";
diff --git a/apps/web/ee/components/common/extended-app-header.tsx b/apps/web/ee/components/common/extended-app-header.tsx
deleted file mode 100644
index 2fab142d6..000000000
--- a/apps/web/ee/components/common/extended-app-header.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export * from "ce/components/common/extended-app-header";
diff --git a/apps/web/ee/components/common/index.ts b/apps/web/ee/components/common/index.ts
deleted file mode 100644
index 3719b5662..000000000
--- a/apps/web/ee/components/common/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./extended-app-header";
diff --git a/apps/web/ee/components/cycles/active-cycle/index.ts b/apps/web/ee/components/cycles/active-cycle/index.ts
deleted file mode 100644
index 23c2e7f7f..000000000
--- a/apps/web/ee/components/cycles/active-cycle/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "ce/components/cycles/active-cycle";
diff --git a/apps/web/ee/components/cycles/analytics-sidebar/index.ts b/apps/web/ee/components/cycles/analytics-sidebar/index.ts
deleted file mode 100644
index 1cdbbbe92..000000000
--- a/apps/web/ee/components/cycles/analytics-sidebar/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "ce/components/cycles/analytics-sidebar";
diff --git a/apps/web/ee/components/cycles/end-cycle/index.ts b/apps/web/ee/components/cycles/end-cycle/index.ts
deleted file mode 100644
index 3d772e91c..000000000
--- a/apps/web/ee/components/cycles/end-cycle/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "ce/components/cycles/end-cycle";
diff --git a/apps/web/ee/components/cycles/index.ts b/apps/web/ee/components/cycles/index.ts
deleted file mode 100644
index 30d8e85dd..000000000
--- a/apps/web/ee/components/cycles/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export * from "./active-cycle";
-export * from "./analytics-sidebar";
-export * from "./end-cycle";
-export * from "ce/components/cycles/additional-actions";
diff --git a/apps/web/ee/components/estimates/estimate-list-item-buttons.tsx b/apps/web/ee/components/estimates/estimate-list-item-buttons.tsx
deleted file mode 100644
index 4e5008ea5..000000000
--- a/apps/web/ee/components/estimates/estimate-list-item-buttons.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export * from "ce/components/estimates/estimate-list-item-buttons";
diff --git a/apps/web/ee/components/estimates/index.ts b/apps/web/ee/components/estimates/index.ts
deleted file mode 100644
index 918b72d8d..000000000
--- a/apps/web/ee/components/estimates/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export * from "./estimate-list-item-buttons";
-export * from "./update";
-export * from "./points";
diff --git a/apps/web/ee/components/estimates/points/delete.tsx b/apps/web/ee/components/estimates/points/delete.tsx
deleted file mode 100644
index 6cebb5646..000000000
--- a/apps/web/ee/components/estimates/points/delete.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export * from "ce/components/estimates/points/delete";
diff --git a/apps/web/ee/components/estimates/points/index.ts b/apps/web/ee/components/estimates/points/index.ts
deleted file mode 100644
index fe722bd23..000000000
--- a/apps/web/ee/components/estimates/points/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./delete";
diff --git a/apps/web/ee/components/estimates/update/index.ts b/apps/web/ee/components/estimates/update/index.ts
deleted file mode 100644
index 031608e25..000000000
--- a/apps/web/ee/components/estimates/update/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./modal";
diff --git a/apps/web/ee/components/estimates/update/modal.tsx b/apps/web/ee/components/estimates/update/modal.tsx
deleted file mode 100644
index 5c7d0b725..000000000
--- a/apps/web/ee/components/estimates/update/modal.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export * from "ce/components/estimates/update/modal";
diff --git a/apps/web/ee/components/gantt-chart/blocks/block-row-list.tsx b/apps/web/ee/components/gantt-chart/blocks/block-row-list.tsx
deleted file mode 100644
index 2d50f5e5e..000000000
--- a/apps/web/ee/components/gantt-chart/blocks/block-row-list.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export * from "ce/components/gantt-chart/blocks/block-row-list";
diff --git a/apps/web/ee/components/gantt-chart/blocks/blocks-list.tsx b/apps/web/ee/components/gantt-chart/blocks/blocks-list.tsx
deleted file mode 100644
index ced4c0ed2..000000000
--- a/apps/web/ee/components/gantt-chart/blocks/blocks-list.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export * from "ce/components/gantt-chart/blocks/blocks-list";
diff --git a/apps/web/ee/components/gantt-chart/index.ts b/apps/web/ee/components/gantt-chart/index.ts
deleted file mode 100644
index 5e3c2f377..000000000
--- a/apps/web/ee/components/gantt-chart/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "ce/components/gantt-chart";
diff --git a/apps/web/ee/components/global/index.ts b/apps/web/ee/components/global/index.ts
deleted file mode 100644
index 7a8d522d6..000000000
--- a/apps/web/ee/components/global/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "ce/components/global";
diff --git a/apps/web/ee/components/home/header.tsx b/apps/web/ee/components/home/header.tsx
deleted file mode 100644
index ac905596e..000000000
--- a/apps/web/ee/components/home/header.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-export function HomePageHeader() {
-  return <></>;
-}
diff --git a/apps/web/ee/components/home/index.ts b/apps/web/ee/components/home/index.ts
deleted file mode 100644
index b9ddf3716..000000000
--- a/apps/web/ee/components/home/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "ce/components/home";
diff --git a/apps/web/ee/components/inbox/source-pill.tsx b/apps/web/ee/components/inbox/source-pill.tsx
deleted file mode 100644
index a3be79206..000000000
--- a/apps/web/ee/components/inbox/source-pill.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export * from "ce/components/inbox/source-pill";
diff --git a/apps/web/ee/components/instance/index.ts b/apps/web/ee/components/instance/index.ts
deleted file mode 100644
index e550badbc..000000000
--- a/apps/web/ee/components/instance/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "ce/components/instance";
diff --git a/apps/web/ee/components/instance/maintenance-message.tsx b/apps/web/ee/components/instance/maintenance-message.tsx
deleted file mode 100644
index 314e06454..000000000
--- a/apps/web/ee/components/instance/maintenance-message.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export * from "ce/components/instance/maintenance-message";
diff --git a/apps/web/ee/components/issues/issue-details/sidebar/transfer-hop-info.tsx b/apps/web/ee/components/issues/issue-details/sidebar/transfer-hop-info.tsx
deleted file mode 100644
index e69de29bb..000000000
diff --git a/apps/web/ee/components/navigations/index.ts b/apps/web/ee/components/navigations/index.ts
deleted file mode 100644
index 86a88758b..000000000
--- a/apps/web/ee/components/navigations/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "ce/components/navigations";
diff --git a/apps/web/ee/components/pages/index.ts b/apps/web/ee/components/pages/index.ts
deleted file mode 100644
index 06b906428..000000000
--- a/apps/web/ee/components/pages/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "ce/components/pages";
diff --git a/apps/web/ee/components/projects/create/attributes.tsx b/apps/web/ee/components/projects/create/attributes.tsx
deleted file mode 100644
index 6528de756..000000000
--- a/apps/web/ee/components/projects/create/attributes.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export * from "ce/components/projects/create/attributes";
diff --git a/apps/web/ee/components/projects/create/root.tsx b/apps/web/ee/components/projects/create/root.tsx
deleted file mode 100644
index 28663aefe..000000000
--- a/apps/web/ee/components/projects/create/root.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export * from "ce/components/projects/create/root";
diff --git a/apps/web/ee/components/projects/header.tsx b/apps/web/ee/components/projects/header.tsx
deleted file mode 100644
index 983c3d046..000000000
--- a/apps/web/ee/components/projects/header.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export * from "ce/components/projects/header";
diff --git a/apps/web/ee/components/projects/mobile-header.tsx b/apps/web/ee/components/projects/mobile-header.tsx
deleted file mode 100644
index c845999a1..000000000
--- a/apps/web/ee/components/projects/mobile-header.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export * from "ce/components/projects/mobile-header";
diff --git a/apps/web/ee/components/projects/page.tsx b/apps/web/ee/components/projects/page.tsx
deleted file mode 100644
index 569615c49..000000000
--- a/apps/web/ee/components/projects/page.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export * from "ce/components/projects/page";
diff --git a/apps/web/ee/components/projects/settings/features-list.tsx b/apps/web/ee/components/projects/settings/features-list.tsx
deleted file mode 100644
index 26fc591fd..000000000
--- a/apps/web/ee/components/projects/settings/features-list.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export { ProjectFeaturesList } from "@/components/project/settings/features-list";
diff --git a/apps/web/ee/components/projects/settings/useProjectColumns.tsx b/apps/web/ee/components/projects/settings/useProjectColumns.tsx
deleted file mode 100644
index 2fa541758..000000000
--- a/apps/web/ee/components/projects/settings/useProjectColumns.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export * from "ce/components/projects/settings/useProjectColumns";
diff --git a/apps/web/ee/components/relations/index.tsx b/apps/web/ee/components/relations/index.tsx
deleted file mode 100644
index baf76c90b..000000000
--- a/apps/web/ee/components/relations/index.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export * from "ce/components/relations";
diff --git a/apps/web/ee/components/sidebar/index.ts b/apps/web/ee/components/sidebar/index.ts
deleted file mode 100644
index 144cfa2c2..000000000
--- a/apps/web/ee/components/sidebar/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "ce/components/sidebar";
diff --git a/apps/web/ee/components/views/access-controller.tsx b/apps/web/ee/components/views/access-controller.tsx
deleted file mode 100644
index 926abfbcd..000000000
--- a/apps/web/ee/components/views/access-controller.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export * from "ce/components/views/access-controller";
diff --git a/apps/web/ee/components/views/filters/access-filter.tsx b/apps/web/ee/components/views/filters/access-filter.tsx
deleted file mode 100644
index 9c9d7b751..000000000
--- a/apps/web/ee/components/views/filters/access-filter.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export * from "ce/components/views/filters/access-filter";
diff --git a/apps/web/ee/components/views/publish/index.ts b/apps/web/ee/components/views/publish/index.ts
deleted file mode 100644
index d2680523a..000000000
--- a/apps/web/ee/components/views/publish/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "ce/components/views/publish";
diff --git a/apps/web/ee/components/workflow/index.ts b/apps/web/ee/components/workflow/index.ts
deleted file mode 100644
index 645183ae1..000000000
--- a/apps/web/ee/components/workflow/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "ce/components/workflow";
diff --git a/apps/web/ee/constants/index.ts b/apps/web/ee/constants/index.ts
deleted file mode 100644
index 049f831bd..000000000
--- a/apps/web/ee/constants/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./sidebar-favorites";
diff --git a/apps/web/ee/constants/project/index.ts b/apps/web/ee/constants/project/index.ts
deleted file mode 100644
index dcf101b0c..000000000
--- a/apps/web/ee/constants/project/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./settings";
diff --git a/apps/web/ee/constants/project/settings/features.tsx b/apps/web/ee/constants/project/settings/features.tsx
deleted file mode 100644
index 5a6c17aed..000000000
--- a/apps/web/ee/constants/project/settings/features.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export * from "ce/constants/project/settings/features";
diff --git a/apps/web/ee/constants/project/settings/index.ts b/apps/web/ee/constants/project/settings/index.ts
deleted file mode 100644
index 0e849261a..000000000
--- a/apps/web/ee/constants/project/settings/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./features";
diff --git a/apps/web/ee/constants/project/settings/tabs.ts b/apps/web/ee/constants/project/settings/tabs.ts
deleted file mode 100644
index 0f004a832..000000000
--- a/apps/web/ee/constants/project/settings/tabs.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "ce/constants/project/settings/tabs";
diff --git a/apps/web/ee/constants/sidebar-favorites.ts b/apps/web/ee/constants/sidebar-favorites.ts
deleted file mode 100644
index 540c918e7..000000000
--- a/apps/web/ee/constants/sidebar-favorites.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "ce/constants/sidebar-favorites";
diff --git a/apps/web/ee/helpers/command-palette.ts b/apps/web/ee/helpers/command-palette.ts
deleted file mode 100644
index 7a4518321..000000000
--- a/apps/web/ee/helpers/command-palette.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "ce/helpers/command-palette";
diff --git a/apps/web/ee/helpers/epic-analytics.ts b/apps/web/ee/helpers/epic-analytics.ts
deleted file mode 100644
index 48884d4c1..000000000
--- a/apps/web/ee/helpers/epic-analytics.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "ce/helpers/epic-analytics";
diff --git a/apps/web/ee/helpers/instance.helper.ts b/apps/web/ee/helpers/instance.helper.ts
deleted file mode 100644
index ece25547d..000000000
--- a/apps/web/ee/helpers/instance.helper.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "ce/helpers/instance.helper";
diff --git a/apps/web/ee/helpers/issue-action-helper.ts b/apps/web/ee/helpers/issue-action-helper.ts
deleted file mode 100644
index 1e1ed08f0..000000000
--- a/apps/web/ee/helpers/issue-action-helper.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "ce/helpers/issue-action-helper";
diff --git a/apps/web/ee/helpers/issue-filter.helper.ts b/apps/web/ee/helpers/issue-filter.helper.ts
deleted file mode 100644
index 378b87e72..000000000
--- a/apps/web/ee/helpers/issue-filter.helper.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "ce/helpers/issue-filter.helper";
diff --git a/apps/web/ee/helpers/project-settings.ts b/apps/web/ee/helpers/project-settings.ts
deleted file mode 100644
index ec6ec6b33..000000000
--- a/apps/web/ee/helpers/project-settings.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "ce/helpers/project-settings";
diff --git a/apps/web/ee/helpers/workspace.helper.ts b/apps/web/ee/helpers/workspace.helper.ts
deleted file mode 100644
index 731cd07dc..000000000
--- a/apps/web/ee/helpers/workspace.helper.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "ce/helpers/workspace.helper";
diff --git a/apps/web/ee/hooks/app-rail/index.ts b/apps/web/ee/hooks/app-rail/index.ts
deleted file mode 100644
index 0bfcd74e0..000000000
--- a/apps/web/ee/hooks/app-rail/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "ce/hooks/app-rail";
diff --git a/apps/web/ee/hooks/store/index.ts b/apps/web/ee/hooks/store/index.ts
deleted file mode 100644
index 6ce80b4fb..000000000
--- a/apps/web/ee/hooks/store/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "ce/hooks/store";
diff --git a/apps/web/ee/hooks/use-additional-editor-mention.tsx b/apps/web/ee/hooks/use-additional-editor-mention.tsx
deleted file mode 100644
index 5e9372d08..000000000
--- a/apps/web/ee/hooks/use-additional-editor-mention.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export * from "@/plane-web/hooks/use-additional-editor-mention";
diff --git a/apps/web/ee/hooks/use-additional-favorite-item-details.ts b/apps/web/ee/hooks/use-additional-favorite-item-details.ts
deleted file mode 100644
index c3e863cea..000000000
--- a/apps/web/ee/hooks/use-additional-favorite-item-details.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "ce/hooks/use-additional-favorite-item-details";
diff --git a/apps/web/ee/hooks/use-editor-flagging.ts b/apps/web/ee/hooks/use-editor-flagging.ts
deleted file mode 100644
index 13509de63..000000000
--- a/apps/web/ee/hooks/use-editor-flagging.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "ce/hooks/use-editor-flagging";
diff --git a/apps/web/ee/hooks/use-file-size.ts b/apps/web/ee/hooks/use-file-size.ts
deleted file mode 100644
index 715ab8b90..000000000
--- a/apps/web/ee/hooks/use-file-size.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "ce/hooks/use-file-size";
diff --git a/apps/web/ee/hooks/use-issue-embed.tsx b/apps/web/ee/hooks/use-issue-embed.tsx
deleted file mode 100644
index 96e436e70..000000000
--- a/apps/web/ee/hooks/use-issue-embed.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export * from "ce/hooks/use-issue-embed";
diff --git a/apps/web/ee/hooks/use-issue-properties.tsx b/apps/web/ee/hooks/use-issue-properties.tsx
deleted file mode 100644
index 05a59ba56..000000000
--- a/apps/web/ee/hooks/use-issue-properties.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export * from "ce/hooks/use-issue-properties";
diff --git a/apps/web/ee/hooks/use-page-flag.ts b/apps/web/ee/hooks/use-page-flag.ts
deleted file mode 100644
index 5dbd3aef2..000000000
--- a/apps/web/ee/hooks/use-page-flag.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "ce/hooks/use-page-flag";
diff --git a/apps/web/ee/hooks/use-timeline-chart.ts b/apps/web/ee/hooks/use-timeline-chart.ts
deleted file mode 100644
index 9e31d84e7..000000000
--- a/apps/web/ee/hooks/use-timeline-chart.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-// For now, just re-export from CE
-// In the future, you can extend the timeline store mapping here for EE-specific timeline types
-export * from "ce/hooks/use-timeline-chart";
diff --git a/apps/web/ee/layouts/project-wrapper.tsx b/apps/web/ee/layouts/project-wrapper.tsx
deleted file mode 100644
index 911665c97..000000000
--- a/apps/web/ee/layouts/project-wrapper.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export * from "ce/layouts/project-wrapper";
diff --git a/apps/web/ee/layouts/workspace-wrapper.tsx b/apps/web/ee/layouts/workspace-wrapper.tsx
deleted file mode 100644
index 186266fc1..000000000
--- a/apps/web/ee/layouts/workspace-wrapper.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export * from "ce/layouts/workspace-wrapper";
diff --git a/apps/web/ee/services/index.ts b/apps/web/ee/services/index.ts
deleted file mode 100644
index 7e406b1b4..000000000
--- a/apps/web/ee/services/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from "./project";
-export * from "@/services/workspace.service";
diff --git a/apps/web/ee/services/project/estimate.service.ts b/apps/web/ee/services/project/estimate.service.ts
deleted file mode 100644
index 752dd56ef..000000000
--- a/apps/web/ee/services/project/estimate.service.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "ce/services/project/estimate.service";
diff --git a/apps/web/ee/services/project/index.ts b/apps/web/ee/services/project/index.ts
deleted file mode 100644
index 29b17e55d..000000000
--- a/apps/web/ee/services/project/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./estimate.service";
diff --git a/apps/web/ee/services/project/project-state.service.ts b/apps/web/ee/services/project/project-state.service.ts
deleted file mode 100644
index f4a48ae71..000000000
--- a/apps/web/ee/services/project/project-state.service.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "@/services/project/project-state.service";
diff --git a/apps/web/ee/store/analytics.store.ts b/apps/web/ee/store/analytics.store.ts
deleted file mode 100644
index 9556dcf3a..000000000
--- a/apps/web/ee/store/analytics.store.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import type { IBaseAnalyticsStore } from "@/store/analytics.store";
-import { BaseAnalyticsStore } from "@/store/analytics.store";
-
-// eslint-disable-next-line @typescript-eslint/no-empty-object-type
-export interface IAnalyticsStore extends IBaseAnalyticsStore {
-  //observables
-}
-
-export class AnalyticsStore extends BaseAnalyticsStore {}
diff --git a/apps/web/ee/store/command-palette.store.ts b/apps/web/ee/store/command-palette.store.ts
deleted file mode 100644
index b191f9f2d..000000000
--- a/apps/web/ee/store/command-palette.store.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "ce/store/command-palette.store";
diff --git a/apps/web/ee/store/cycle/index.ts b/apps/web/ee/store/cycle/index.ts
deleted file mode 100644
index 3614d60c0..000000000
--- a/apps/web/ee/store/cycle/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "@/store/cycle.store";
diff --git a/apps/web/ee/store/estimates/estimate.ts b/apps/web/ee/store/estimates/estimate.ts
deleted file mode 100644
index baf2d1af7..000000000
--- a/apps/web/ee/store/estimates/estimate.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "ce/store/estimates/estimate";
diff --git a/apps/web/ee/store/issue/helpers/base-issue.store.ts b/apps/web/ee/store/issue/helpers/base-issue.store.ts
deleted file mode 100644
index ee0c73e56..000000000
--- a/apps/web/ee/store/issue/helpers/base-issue.store.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "ce/store/issue/helpers/base-issue.store";
diff --git a/apps/web/ee/store/issue/issue-details/activity.store.ts b/apps/web/ee/store/issue/issue-details/activity.store.ts
deleted file mode 100644
index cda9d84ae..000000000
--- a/apps/web/ee/store/issue/issue-details/activity.store.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "ce/store/issue/issue-details/activity.store";
diff --git a/apps/web/ee/store/issue/issue-details/root.store.ts b/apps/web/ee/store/issue/issue-details/root.store.ts
deleted file mode 100644
index f80b9384d..000000000
--- a/apps/web/ee/store/issue/issue-details/root.store.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "ce/store/issue/issue-details/root.store";
diff --git a/apps/web/ee/store/issue/team-views/index.ts b/apps/web/ee/store/issue/team-views/index.ts
deleted file mode 100644
index c02c38b4f..000000000
--- a/apps/web/ee/store/issue/team-views/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "ce/store/issue/team-views";
diff --git a/apps/web/ee/store/issue/team/index.ts b/apps/web/ee/store/issue/team/index.ts
deleted file mode 100644
index 2e02634a9..000000000
--- a/apps/web/ee/store/issue/team/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "ce/store/issue/team";
diff --git a/apps/web/ee/store/member/project-member.store.ts b/apps/web/ee/store/member/project-member.store.ts
deleted file mode 100644
index 5ce937d27..000000000
--- a/apps/web/ee/store/member/project-member.store.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "ce/store/member/project-member.store";
diff --git a/apps/web/ee/store/project-inbox.store.ts b/apps/web/ee/store/project-inbox.store.ts
deleted file mode 100644
index 309e1e51e..000000000
--- a/apps/web/ee/store/project-inbox.store.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "ce/store/project-inbox.store";
diff --git a/apps/web/ee/store/root.store.ts b/apps/web/ee/store/root.store.ts
deleted file mode 100644
index c514c4c25..000000000
--- a/apps/web/ee/store/root.store.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "ce/store/root.store";
diff --git a/apps/web/ee/store/state.store.ts b/apps/web/ee/store/state.store.ts
deleted file mode 100644
index a25412ca8..000000000
--- a/apps/web/ee/store/state.store.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "@/store/state.store";
diff --git a/apps/web/ee/store/timeline/base-timeline.store.ts b/apps/web/ee/store/timeline/base-timeline.store.ts
deleted file mode 100644
index ce2bb7df4..000000000
--- a/apps/web/ee/store/timeline/base-timeline.store.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "ce/store/timeline/base-timeline.store";
diff --git a/apps/web/ee/store/user/permission.store.ts b/apps/web/ee/store/user/permission.store.ts
deleted file mode 100644
index 8281689bd..000000000
--- a/apps/web/ee/store/user/permission.store.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "ce/store/user/permission.store";
diff --git a/apps/web/ee/types/index.ts b/apps/web/ee/types/index.ts
deleted file mode 100644
index 0d4b66523..000000000
--- a/apps/web/ee/types/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from "./projects";
-export * from "./issue-types";
diff --git a/apps/web/ee/types/issue-types/index.ts b/apps/web/ee/types/issue-types/index.ts
deleted file mode 100644
index 7259fa351..000000000
--- a/apps/web/ee/types/issue-types/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./issue-property-values.d";
diff --git a/apps/web/ee/types/issue-types/issue-property-values.d.ts b/apps/web/ee/types/issue-types/issue-property-values.d.ts
deleted file mode 100644
index 9aac71088..000000000
--- a/apps/web/ee/types/issue-types/issue-property-values.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "ce/types/issue-types/issue-property-values.d";
diff --git a/apps/web/ee/types/projects/index.ts b/apps/web/ee/types/projects/index.ts
deleted file mode 100644
index 244d8c4df..000000000
--- a/apps/web/ee/types/projects/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./projects";
diff --git a/apps/web/ee/types/projects/projects.ts b/apps/web/ee/types/projects/projects.ts
deleted file mode 100644
index e42a1130f..000000000
--- a/apps/web/ee/types/projects/projects.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "ce/types/projects/projects";
diff --git a/apps/web/helpers/authentication.helper.tsx b/apps/web/helpers/authentication.helper.tsx
index 4a493e5ed..5db2e1aa9 100644
--- a/apps/web/helpers/authentication.helper.tsx
+++ b/apps/web/helpers/authentication.helper.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { ReactNode } from "react";
 import Link from "next/link";
 // plane imports
@@ -41,6 +47,7 @@ export enum EAuthenticationErrorCodes {
   USER_ACCOUNT_DEACTIVATED = "5019",
   // Password strength
   INVALID_PASSWORD = "5020",
+  PASSWORD_TOO_WEAK = "5021",
   SMTP_NOT_CONFIGURED = "5025",
   // Sign Up
   USER_ALREADY_EXIST = "5030",
@@ -101,6 +108,7 @@ export type TAuthErrorInfo = {
   message: ReactNode;
 };
 
+// TODO: move all error messages to translation files
 const errorCodeMessages: {
   [key in EAuthenticationErrorCodes]: { title: string; message: (email?: string) => ReactNode };
 } = {
@@ -137,6 +145,10 @@ const errorCodeMessages: {
     title: `Invalid password`,
     message: () => `Invalid password. Please try again.`,
   },
+  [EAuthenticationErrorCodes.PASSWORD_TOO_WEAK]: {
+    title: `Password too weak`,
+    message: () => `Please use a stronger password.`,
+  },
   [EAuthenticationErrorCodes.SMTP_NOT_CONFIGURED]: {
     title: `SMTP not configured`,
     message: () => `SMTP not configured. Please contact your administrator.`,
@@ -149,7 +161,7 @@ const errorCodeMessages: {
       <div>
         Your account is already registered.&nbsp;
         <Link
-          className="underline underline-offset-4 font-medium hover:font-bold transition-all"
+          className="font-medium underline underline-offset-4 transition-all hover:font-bold"
           href={`/sign-in${email ? `?email=${encodeURIComponent(email)}` : ``}`}
         >
           Sign In
@@ -185,7 +197,7 @@ const errorCodeMessages: {
       <div>
         No account found.&nbsp;
         <Link
-          className="underline underline-offset-4 font-medium hover:font-bold transition-all"
+          className="font-medium underline underline-offset-4 transition-all hover:font-bold"
           href={`/${email ? `?email=${encodeURIComponent(email)}` : ``}`}
         >
           Create one
@@ -331,7 +343,7 @@ const errorCodeMessages: {
     message: () => (
       <div>
         Admin user already exists.&nbsp;
-        <Link className="underline underline-offset-4 font-medium hover:font-bold transition-all" href={`/admin`}>
+        <Link className="font-medium underline underline-offset-4 transition-all hover:font-bold" href={`/admin`}>
           Sign In
         </Link>
         &nbsp;now.
@@ -343,7 +355,7 @@ const errorCodeMessages: {
     message: () => (
       <div>
         Admin user does not exist.&nbsp;
-        <Link className="underline underline-offset-4 font-medium hover:font-bold transition-all" href={`/admin`}>
+        <Link className="font-medium underline underline-offset-4 transition-all hover:font-bold" href={`/admin`}>
           Sign In
         </Link>
         &nbsp;now.
@@ -412,6 +424,7 @@ export const authErrorHandler = (errorCode: EAuthenticationErrorCodes, email?: s
     EAuthenticationErrorCodes.ADMIN_USER_DOES_NOT_EXIST,
     EAuthenticationErrorCodes.ADMIN_USER_DEACTIVATED,
     EAuthenticationErrorCodes.RATE_LIMIT_EXCEEDED,
+    EAuthenticationErrorCodes.PASSWORD_TOO_WEAK,
   ];
 
   if (bannerAlertErrorCodes.includes(errorCode))
@@ -424,3 +437,8 @@ export const authErrorHandler = (errorCode: EAuthenticationErrorCodes, email?: s
 
   return undefined;
 };
+
+export const passwordErrors = [
+  EAuthenticationErrorCodes.PASSWORD_TOO_WEAK,
+  EAuthenticationErrorCodes.INVALID_NEW_PASSWORD,
+];
diff --git a/apps/web/helpers/cover-image.helper.ts b/apps/web/helpers/cover-image.helper.ts
index 23928107d..6ef7b2854 100644
--- a/apps/web/helpers/cover-image.helper.ts
+++ b/apps/web/helpers/cover-image.helper.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { EFileAssetType } from "@plane/types";
 import { getFileURL } from "@plane/utils";
 
@@ -78,7 +84,7 @@ export const DEFAULT_COVER_IMAGE_URL = STATIC_COVER_IMAGES.IMAGE_1;
  */
 const STATIC_COVER_IMAGES_SET = new Set<string>(Object.values(STATIC_COVER_IMAGES));
 
-export type TCoverImageType = "local_static" | "uploaded_asset";
+export type TCoverImageType = "local_static" | "uploaded_asset" | "unsplash";
 
 export type TCoverImageResult = {
   needsUpload: boolean;
@@ -108,6 +114,17 @@ export const getCoverImageType = (imageUrl: string): TCoverImageType => {
   // Check against the explicit set of static images
   if (isStaticCoverImage(imageUrl)) return "local_static";
 
+  // Check if it's an Unsplash image by validating the hostname
+  try {
+    const url = new URL(imageUrl);
+    const hostname = url.hostname.toLowerCase();
+    if (hostname === "unsplash.com" || hostname.endsWith(".unsplash.com")) {
+      return "unsplash";
+    }
+  } catch {
+    // If URL parsing fails (e.g., relative path), fall through to other checks
+  }
+
   if (imageUrl.startsWith("http")) return "uploaded_asset";
 
   return "uploaded_asset";
@@ -130,7 +147,7 @@ export function getCoverImageDisplayURL(
 
   const imageType = getCoverImageType(imageUrl);
 
-  if (imageType === "local_static") {
+  if (imageType === "local_static" || imageType === "unsplash") {
     return imageUrl;
   }
 
@@ -143,6 +160,7 @@ export function getCoverImageDisplayURL(
 
 /**
  * Analyzes cover image change and determines what action to take
+ * Merged with isUnsplashImage logic - now detects unsplash images as a separate type
  */
 export const analyzeCoverImageChange = (
   currentImage: string | null | undefined,
@@ -158,10 +176,18 @@ export const analyzeCoverImageChange = (
     };
   }
 
-  const imageType = getCoverImageType(newImage ?? "");
+  if (!newImage) {
+    return {
+      needsUpload: false,
+      imageType: "uploaded_asset",
+      shouldUpdate: true,
+    };
+  }
+
+  const imageType = getCoverImageType(newImage);
 
   return {
-    needsUpload: imageType === "local_static",
+    needsUpload: imageType === "local_static" || imageType === "unsplash",
     imageType,
     shouldUpdate: hasChanged,
   };
@@ -195,7 +221,7 @@ export const uploadCoverImage = async (
     throw new Error("Invalid file type. Please select an image.");
   }
 
-  const fileName = imageUrl.split("/").pop() || "cover.jpg";
+  const fileName = imageUrl.split("/").pop()?.split("?")[0] || "image.jpg";
   const file = new File([blob], fileName, { type: blob.type });
 
   // Upload based on context
@@ -227,7 +253,6 @@ export const uploadCoverImage = async (
 
 /**
  * Main utility to handle cover image changes with upload
- * Returns the payload fields that should be updated
  */
 export const handleCoverImageChange = async (
   currentImage: string | null | undefined,
@@ -238,42 +263,20 @@ export const handleCoverImageChange = async (
     entityType: EFileAssetType;
     isUserAsset?: boolean;
   }
-): Promise<TCoverImagePayload | null> => {
+): Promise<TCoverImagePayload | undefined> => {
   const analysis = analyzeCoverImageChange(currentImage, newImage);
+  if (!analysis.shouldUpdate) return;
 
-  // No change detected
-  if (!analysis.shouldUpdate) {
-    return null;
-  }
-
-  // Image removed
   if (!newImage) {
-    return {
-      cover_image: null,
-      cover_image_url: null,
-      cover_image_asset: null,
-    };
+    return { cover_image: null, cover_image_url: null, cover_image_asset: null };
   }
 
-  // Local static image - needs upload
   if (analysis.needsUpload) {
-    const uploadedUrl = await uploadCoverImage(newImage, uploadConfig);
-
-    // For BOTH user assets AND project assets:
-    // The backend auto-links when entity_identifier is set correctly
-    // For project assets: auto-linked server-side, no payload needed
-    // For user assets: return URL for immediate UI feedback
-
-    if (uploadConfig.isUserAsset) {
-      return {
-        cover_image_url: uploadedUrl,
-      };
-    } else {
-      return null;
-    }
+    await uploadCoverImage(newImage, uploadConfig);
+    return;
   }
 
-  return null;
+  return { cover_image: newImage };
 };
 
 /**
diff --git a/apps/web/helpers/dashboard.helper.ts b/apps/web/helpers/dashboard.helper.ts
index 1aac6c2af..2d2197567 100644
--- a/apps/web/helpers/dashboard.helper.ts
+++ b/apps/web/helpers/dashboard.helper.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { endOfMonth, endOfWeek, endOfYear, startOfMonth, startOfWeek, startOfYear } from "date-fns";
 // helpers
 // types
diff --git a/apps/web/helpers/emoji.helper.tsx b/apps/web/helpers/emoji.helper.tsx
index 6932f63af..55edd2caa 100644
--- a/apps/web/helpers/emoji.helper.tsx
+++ b/apps/web/helpers/emoji.helper.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 /**
  * Renders an emoji or icon
  * @param {string | { name: string; color: string }} emoji - The emoji or icon to render
diff --git a/apps/web/helpers/event-tracker.helper.ts b/apps/web/helpers/event-tracker.helper.ts
deleted file mode 100644
index 908db1e54..000000000
--- a/apps/web/helpers/event-tracker.helper.ts
+++ /dev/null
@@ -1,146 +0,0 @@
-import posthog from "posthog-js";
-
-export type TEventState = "SUCCESS" | "ERROR";
-export type TElementContext = Record<string, any>;
-export type TEventContext = Record<string, any>;
-export type TInteractionType = "clicked" | "viewed" | "hovered";
-
-/**
- * Join a event group in PostHog
- * @param groupName - The name of the group
- * @param groupId - The ID of the group
- * @param properties - The properties of the group
- */
-export const joinEventGroup = (groupName: string, groupId: string, properties: Record<string, any>) => {
-  posthog?.group(groupName, groupId, properties);
-};
-
-type TCaptureElementParams = {
-  elementName: string;
-  interaction_type: TInteractionType;
-  context?: TElementContext;
-};
-
-/**
- * Capture UI element interactions (clicks, hovers, views, etc.)
- * This helps understand user behavior and interaction patterns
- *
- * @param element - Generic UI element type
- * @param context - Context about where and why the interaction happened
- */
-const captureElement = (params: TCaptureElementParams) => {
-  const { elementName, interaction_type, context } = params;
-  if (!posthog) return;
-
-  const elementEvent = `${elementName}_${interaction_type}`;
-
-  const payload = {
-    element_type: elementName,
-    timestamp: new Date().toISOString(),
-    ...context,
-  };
-
-  posthog.capture(elementEvent, payload);
-};
-
-type TCaptureClickParams = Omit<TCaptureElementParams, "interaction_type">;
-/**
- * Capture click events
- * @param element - The element that was clicked
- * @param context - Additional context
- */
-export const captureClick = (params: TCaptureClickParams) => {
-  captureElement({ ...params, interaction_type: "clicked" });
-};
-
-type TCaptureViewParams = Omit<TCaptureElementParams, "interaction_type">;
-/**
- * Capture view events
- * @param element - The element that was viewed
- * @param context - Additional context
- */
-export const captureView = (params: TCaptureViewParams) => {
-  captureElement({ ...params, interaction_type: "viewed" });
-};
-
-type TCaptureHoverParams = Omit<TCaptureElementParams, "interaction_type">;
-/**
- * Capture hover events
- * @param element - The element that was hovered
- * @param context - Additional context
- */
-export const captureHover = (params: TCaptureHoverParams) => {
-  captureElement({ ...params, interaction_type: "hovered" });
-};
-
-type TCaptureEventParams = {
-  eventName: string;
-  payload?: Record<string, any>;
-  context?: TEventContext;
-  state: TEventState;
-};
-/**
- * Capture business events (outcomes, state changes, etc.)
- * This helps understand business metrics and conversion rates
- *
- * @param eventName - Business event name (e.g., "cycle_created", "project_updated")
- * @param state - Success or error state
- * @param payload - Event-specific data
- * @param context - Additional context
- */
-const captureEvent = (params: TCaptureEventParams) => {
-  const { eventName, payload, context, state } = params;
-  if (!posthog) return;
-
-  const finalPayload = {
-    ...context,
-    ...payload,
-    state,
-    timestamp: new Date().toISOString(),
-  };
-
-  posthog.capture(eventName, finalPayload);
-};
-
-type TCaptureSuccessParams = Omit<TCaptureEventParams, "state">;
-/**
- * Capture success events
- * @param eventName - The name of the event
- * @param payload - Additional payload
- * @param context - Additional context
- */
-export const captureSuccess = (params: TCaptureSuccessParams) => {
-  captureEvent({ ...params, state: "SUCCESS" });
-};
-
-type TCaptureErrorParams = Omit<TCaptureEventParams, "state"> & {
-  error?: Error | string;
-};
-/**
- * Capture error events
- * @param eventName - The name of the event
- * @param error - The error object
- * @param payload - Additional payload
- * @param context - Additional context
- */
-export const captureError = (params: TCaptureErrorParams) => {
-  captureEvent({ ...params, state: "ERROR", payload: { ...params.payload, error: params.error } });
-};
-
-type TCaptureElementAndEventParams = {
-  element: Omit<TCaptureElementParams, "interaction_type">;
-  event: TCaptureEventParams;
-};
-/**
- * Capture both element interaction and business event together
- * @param element - The element that was interacted with
- * @param event - The business event that was triggered
- */
-export const captureElementAndEvent = (params: TCaptureElementAndEventParams) => {
-  const { element, event } = params;
-  // Capture the element interaction first
-  captureElement({ ...element, interaction_type: "clicked" });
-
-  // Then capture the business event
-  captureEvent(event);
-};
diff --git a/apps/web/helpers/graph.helper.ts b/apps/web/helpers/graph.helper.ts
index 0ca5d3ffa..055df63d5 100644
--- a/apps/web/helpers/graph.helper.ts
+++ b/apps/web/helpers/graph.helper.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // ------------ DEPRECATED (Use re-charts and its helpers instead) ------------
 
 export const generateYAxisTickValues = (data: number[]) => {
diff --git a/apps/web/ce/helpers/issue-filter.helper.ts b/apps/web/helpers/issue-filter.helper.ts
similarity index 54%
rename from apps/web/ce/helpers/issue-filter.helper.ts
rename to apps/web/helpers/issue-filter.helper.ts
index 48a893d3c..7e2fff4f7 100644
--- a/apps/web/ce/helpers/issue-filter.helper.ts
+++ b/apps/web/helpers/issue-filter.helper.ts
@@ -1,24 +1,14 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // types
 import type { IIssueDisplayProperties } from "@plane/types";
 // lib
 import { store } from "@/lib/store-context";
 
-export type TShouldRenderDisplayProperty = {
-  workspaceSlug: string;
-  projectId: string | undefined;
-  key: keyof IIssueDisplayProperties;
-};
-
-export const shouldRenderDisplayProperty = (props: TShouldRenderDisplayProperty) => {
-  const { key } = props;
-  switch (key) {
-    case "issue_type":
-      return false;
-    default:
-      return true;
-  }
-};
-
 export const shouldRenderColumn = (key: keyof IIssueDisplayProperties): boolean => {
   const isEstimateEnabled: boolean = store.projectRoot.project.currentProjectDetails?.estimate !== null;
   switch (key) {
diff --git a/apps/web/helpers/react-hook-form.helper.ts b/apps/web/helpers/react-hook-form.helper.ts
index e286ce574..da9a9fc68 100644
--- a/apps/web/helpers/react-hook-form.helper.ts
+++ b/apps/web/helpers/react-hook-form.helper.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { FieldError, FieldValues } from "react-hook-form";
 
 /**
diff --git a/apps/web/helpers/views.helper.ts b/apps/web/helpers/views.helper.ts
index ba1e14c30..5b91810c9 100644
--- a/apps/web/helpers/views.helper.ts
+++ b/apps/web/helpers/views.helper.ts
@@ -1,16 +1,25 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { LucideIcon } from "lucide-react";
-import { Globe2, Lock } from "lucide-react";
 import { VIEW_ACCESS_SPECIFIERS as VIEW_ACCESS_SPECIFIERS_CONSTANTS } from "@plane/constants";
+import { GlobeIcon, LockIcon } from "@plane/propel/icons";
+
+import type { ISvgIcons } from "@plane/propel/icons";
 import { EViewAccess } from "@plane/types";
 
 const VIEW_ACCESS_ICONS = {
-  [EViewAccess.PUBLIC]: Globe2,
-  [EViewAccess.PRIVATE]: Lock,
+  [EViewAccess.PUBLIC]: GlobeIcon,
+  [EViewAccess.PRIVATE]: LockIcon,
 };
+
 export const VIEW_ACCESS_SPECIFIERS: {
   key: EViewAccess;
   i18n_label: string;
-  icon: LucideIcon;
+  icon: LucideIcon | React.FC<ISvgIcons>;
 }[] = VIEW_ACCESS_SPECIFIERS_CONSTANTS.map((option) => ({
   ...option,
   icon: VIEW_ACCESS_ICONS[option.key as keyof typeof VIEW_ACCESS_ICONS],
diff --git a/apps/web/nginx/nginx.conf b/apps/web/nginx/nginx.conf
index 160fcb9be..34e07ba4b 100644
--- a/apps/web/nginx/nginx.conf
+++ b/apps/web/nginx/nginx.conf
@@ -20,6 +20,12 @@ http {
   server {
     listen 3000;
 
+    # Security headers
+    add_header X-Frame-Options "DENY" always;
+    add_header X-Content-Type-Options "nosniff" always;
+    add_header Strict-Transport-Security "max-age=31536000; includeSubDomains" always;
+    add_header X-XSS-Protection "1; mode=block" always;
+
     location / {
       root   /usr/share/nginx/html;
       index  index.html index.htm;
diff --git a/apps/web/package.json b/apps/web/package.json
index 2d474e00c..d84d9ff0f 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -1,6 +1,6 @@
 {
   "name": "web",
-  "version": "1.2.3",
+  "version": "1.3.0",
   "private": true,
   "license": "AGPL-3.0",
   "type": "module",
@@ -10,19 +10,21 @@
     "preview": "react-router build && serve -s build/client -l 3000",
     "start": "serve -s build/client -l 3000",
     "clean": "rm -rf .turbo && rm -rf .next && rm -rf .react-router && rm -rf node_modules && rm -rf dist && rm -rf build",
-    "check:lint": "eslint . --max-warnings=14367",
+    "check:lint": "oxlint --max-warnings=11957 .",
     "check:types": "react-router typegen && tsc --noEmit",
-    "check:format": "prettier --check .",
-    "fix:lint": "eslint . --fix --max-warnings=14367",
-    "fix:format": "prettier --write ."
+    "check:format": "oxfmt --check .",
+    "fix:lint": "oxlint --fix .",
+    "fix:format": "oxfmt ."
   },
   "dependencies": {
     "@atlaskit/pragmatic-drag-and-drop": "catalog:",
     "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "catalog:",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "catalog:",
     "@bprogress/core": "catalog:",
+    "@fontsource-variable/inter": "5.2.8",
+    "@fontsource/ibm-plex-mono": "5.2.7",
+    "@fontsource/material-symbols-rounded": "5.2.30",
     "@headlessui/react": "^1.7.19",
-    "@intercom/messenger-js-sdk": "^0.0.12",
     "@plane/constants": "workspace:*",
     "@plane/editor": "workspace:*",
     "@plane/hooks": "workspace:*",
@@ -34,10 +36,8 @@
     "@plane/ui": "workspace:*",
     "@plane/utils": "workspace:*",
     "@popperjs/core": "^2.11.8",
-    "@posthog/react": "^1.4.0",
     "@react-pdf/renderer": "^3.4.5",
     "@react-router/node": "catalog:",
-    "@sentry/react-router": "catalog:",
     "@tanstack/react-table": "^8.21.3",
     "axios": "catalog:",
     "clsx": "^2.0.0",
@@ -53,7 +53,6 @@
     "mobx-react": "catalog:",
     "mobx-utils": "catalog:",
     "next-themes": "0.4.6",
-    "posthog-js": "^1.255.1",
     "react": "catalog:",
     "react-color": "^2.19.3",
     "react-dom": "catalog:",
@@ -66,25 +65,24 @@
     "react-pdf-html": "^2.1.2",
     "react-popper": "^2.3.0",
     "react-router": "catalog:",
-    "react-router-dom": "catalog:",
     "recharts": "^2.12.7",
     "serve": "14.2.5",
     "smooth-scroll-into-view-if-needed": "^2.0.2",
     "swr": "catalog:",
-    "tailwind-merge": "^2.0.0",
     "use-font-face-observer": "^1.2.2",
     "uuid": "catalog:"
   },
   "devDependencies": {
-    "@dotenvx/dotenvx": "catalog:",
     "@plane/tailwind-config": "workspace:*",
     "@plane/typescript-config": "workspace:*",
     "@react-router/dev": "catalog:",
+    "@tailwindcss/typography": "0.5.19",
     "@types/lodash-es": "catalog:",
     "@types/node": "catalog:",
     "@types/react": "catalog:",
     "@types/react-color": "^3.0.6",
     "@types/react-dom": "catalog:",
+    "dotenv": "catalog:",
     "typescript": "catalog:",
     "vite": "catalog:",
     "vite-tsconfig-paths": "^5.1.4"
diff --git a/apps/web/postcss.config.cjs b/apps/web/postcss.config.cjs
deleted file mode 100644
index 8a677108f..000000000
--- a/apps/web/postcss.config.cjs
+++ /dev/null
@@ -1 +0,0 @@
-module.exports = require("@plane/tailwind-config/postcss.config.js");
diff --git a/apps/web/postcss.config.js b/apps/web/postcss.config.js
new file mode 100644
index 000000000..3ad28f15f
--- /dev/null
+++ b/apps/web/postcss.config.js
@@ -0,0 +1,3 @@
+import postcssConfig from "@plane/tailwind-config/postcss.config.js";
+
+export default postcssConfig;
diff --git a/apps/web/styles/emoji.css b/apps/web/styles/emoji.css
index 2fe3ddab3..50e50648e 100644
--- a/apps/web/styles/emoji.css
+++ b/apps/web/styles/emoji.css
@@ -1,52 +1,53 @@
-.EmojiPickerReact {
-  --epr-category-navigation-button-size: 1.25rem !important;
-  --epr-category-label-height: 1.5rem !important;
-  --epr-emoji-size: 1.25rem !important;
-  --epr-picker-border-radius: 0.25rem !important;
-  --epr-horizontal-padding: 0.5rem !important;
-  --epr-emoji-padding: 0.5rem !important;
-  background-color: rgba(var(--color-background-100)) !important;
-}
+@layer components {
+  .EmojiPickerReact {
+    --epr-category-navigation-button-size: 1.25rem !important;
+    --epr-category-label-height: 1.5rem !important;
+    --epr-emoji-size: 1.25rem !important;
+    --epr-picker-border-radius: 0.25rem !important;
+    --epr-horizontal-padding: 0.5rem !important;
+    --epr-emoji-padding: 0.5rem !important;
+    @apply bg-surface-1!;
+  }
 
-.epr-main {
-  border: none !important;
-  border-radius: 0 !important;
-}
+  .epr-main {
+    border: none !important;
+    border-radius: 0 !important;
+  }
 
-.epr-emoji-category-label {
-  font-size: 0.7875rem !important;
-  color: rgba(var(--color-text-300)) !important;
-  background-color: rgba(var(--color-background-100), 0.8) !important;
-}
+  .epr-emoji-category-label {
+    font-size: 0.7875rem !important;
+    @apply bg-surface-1/80! text-tertiary!;
+  }
 
-.epr-category-nav,
-.epr-header-overlay {
-  padding: 0.5rem !important;
-}
+  .epr-category-nav,
+  .epr-header-overlay {
+    padding: 0.5rem !important;
+  }
 
-button.epr-emoji:hover > *,
-button.epr-emoji:focus > * {
-  background-color: rgba(var(--color-background-80)) !important;
-}
+  button.epr-emoji:hover > *,
+  button.epr-emoji:focus > * {
+    @apply bg-layer-2!;
+  }
 
-input.epr-search {
-  font-size: 0.7875rem !important;
-  height: 2rem !important;
-  background: transparent !important;
-  border-color: rgba(var(--color-border-200)) !important;
-  border-radius: 0.25rem !important;
-}
+  input.epr-search {
+    font-size: 0.7875rem !important;
+    height: 2rem !important;
+    background: transparent !important;
+    @apply border-subtle!;
+    border-radius: 0.25rem !important;
+  }
 
-input.epr-search::placeholder {
-  color: rgba(var(--color-text-400)) !important;
-}
+  input.epr-search::placeholder {
+    @apply text-placeholder!;
+  }
 
-button.epr-btn-clear-search:hover {
-  background-color: rgba(var(--color-background-80)) !important;
-  color: rgba(var(--color-text-300)) !important;
-}
+  button.epr-btn-clear-search:hover {
+    @apply bg-layer-2!;
+    @apply text-tertiary!;
+  }
 
-.epr-emoji-variation-picker {
-  background-color: rgba(var(--color-background-100)) !important;
-  border-color: rgba(var(--color-border-200)) !important;
+  .epr-emoji-variation-picker {
+    @apply bg-surface-1!;
+    @apply border-subtle-1!;
+  }
 }
diff --git a/apps/web/styles/globals.css b/apps/web/styles/globals.css
index 509910022..ab520abe2 100644
--- a/apps/web/styles/globals.css
+++ b/apps/web/styles/globals.css
@@ -1,811 +1,56 @@
-@import "@plane/propel/styles/fonts";
+@import "@plane/tailwind-config/index.css";
 @import "@plane/editor/styles";
+@import "@plane/propel/styles/react-day-picker.css";
+@import "./power-k.css";
+@import "./emoji.css";
+@plugin "@tailwindcss/typography";
+
+/* stickies and editor colors */
+:root {
+  /* text colors */
+  --editor-colors-gray-text: #5c5e63;
+  --editor-colors-peach-text: #ff5b59;
+  --editor-colors-pink-text: #f65385;
+  --editor-colors-orange-text: #fd9038;
+  --editor-colors-green-text: #0fc27b;
+  --editor-colors-light-blue-text: #17bee9;
+  --editor-colors-dark-blue-text: #266df0;
+  --editor-colors-purple-text: #9162f9;
+  /* end text colors */
 
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer components {
-  .text-1\.5xl {
-    font-size: 1.375rem;
-    line-height: 1.875rem;
-  }
-
-  .text-2\.5xl {
-    font-size: 1.75rem;
-    line-height: 2.25rem;
-  }
-}
-
-@layer utilities {
-  @keyframes slide-up {
-    from {
-      transform: translateY(10px);
-      opacity: 0;
-    }
-    to {
-      transform: translateY(0);
-      opacity: 1;
-    }
-  }
-
-  .animate-slide-up {
-    animation: slide-up 0.3s ease-out forwards;
-  }
-}
-
-@layer base {
-  html {
-    font-family: "Inter", sans-serif;
-  }
-
-  :root {
-    color-scheme: light !important;
-
-    --color-primary-10: 229, 243, 250;
-    --color-primary-20: 216, 237, 248;
-    --color-primary-30: 199, 229, 244;
-    --color-primary-40: 169, 214, 239;
-    --color-primary-50: 144, 202, 234;
-    --color-primary-60: 109, 186, 227;
-    --color-primary-70: 75, 170, 221;
-    --color-primary-80: 41, 154, 214;
-    --color-primary-90: 34, 129, 180;
-    --color-primary-100: 0, 99, 153;
-    --color-primary-200: 0, 92, 143;
-    --color-primary-300: 0, 86, 133;
-    --color-primary-400: 0, 77, 117;
-    --color-primary-500: 0, 66, 102;
-    --color-primary-600: 0, 53, 82;
-    --color-primary-700: 0, 43, 66;
-    --color-primary-800: 0, 33, 51;
-    --color-primary-900: 0, 23, 36;
-
-    --color-error-10: 255 252 252;
-    --color-error-20: 255 247 247;
-    --color-error-30: 255, 219, 220;
-    --color-error-100: 244 170 170;
-    --color-error-200: 220 62 62;
-    --color-error-500: 140 51 58;
-
-    --color-background-100: 255, 255, 255; /* primary bg */
-    --color-background-90: 247, 247, 247; /* secondary bg */
-    --color-background-80: 232, 232, 232; /* tertiary bg */
-
-    --color-background-primary: var(--color-primary-10);
-    --color-background-error: var(--color-error-20);
-
-    --color-text-100: 23, 23, 23; /* primary text */
-    --color-text-200: 58, 58, 58; /* secondary text */
-    --color-text-300: 82, 82, 82; /* tertiary text */
-    --color-text-350: 130, 130, 130;
-    --color-text-400: 163, 163, 163; /* placeholder text */
-
-    --color-text-primary: var(--color-primary-100);
-    --color-text-error: var(--color-error-200);
-
-    --color-scrollbar: 163, 163, 163; /* scrollbar thumb */
-
-    --color-border-100: 245, 245, 245; /* subtle border= 1 */
-    --color-border-200: 229, 229, 229; /* subtle border- 2 */
-    --color-border-300: 212, 212, 212; /* strong border- 1 */
-    --color-border-400: 185, 185, 185; /* strong border- 2 */
-
-    --color-border-primary: var(--color-primary-40);
-    --color-border-error: var(--color-error-100);
-
-    --color-shadow-2xs:
-      0px 0px 1px 0px rgba(23, 23, 23, 0.06), 0px 1px 2px 0px rgba(23, 23, 23, 0.06),
-      0px 1px 2px 0px rgba(23, 23, 23, 0.14);
-    --color-shadow-xs:
-      0px 1px 2px 0px rgba(0, 0, 0, 0.16), 0px 2px 4px 0px rgba(16, 24, 40, 0.12),
-      0px 1px 8px -1px rgba(16, 24, 40, 0.1);
-    --color-shadow-sm:
-      0px 1px 4px 0px rgba(0, 0, 0, 0.01), 0px 4px 8px 0px rgba(0, 0, 0, 0.02), 0px 1px 12px 0px rgba(0, 0, 0, 0.12);
-    --color-shadow-rg:
-      0px 3px 6px 0px rgba(0, 0, 0, 0.1), 0px 4px 4px 0px rgba(16, 24, 40, 0.08),
-      0px 1px 12px 0px rgba(16, 24, 40, 0.04);
-    --color-shadow-md:
-      0px 4px 8px 0px rgba(0, 0, 0, 0.12), 0px 6px 12px 0px rgba(16, 24, 40, 0.12),
-      0px 1px 16px 0px rgba(16, 24, 40, 0.12);
-    --color-shadow-lg:
-      0px 6px 12px 0px rgba(0, 0, 0, 0.12), 0px 8px 16px 0px rgba(0, 0, 0, 0.12),
-      0px 1px 24px 0px rgba(16, 24, 40, 0.12);
-    --color-shadow-xl:
-      0px 0px 18px 0px rgba(0, 0, 0, 0.16), 0px 0px 24px 0px rgba(16, 24, 40, 0.16),
-      0px 0px 52px 0px rgba(16, 24, 40, 0.16);
-    --color-shadow-2xl:
-      0px 8px 16px 0px rgba(0, 0, 0, 0.12), 0px 12px 24px 0px rgba(16, 24, 40, 0.12),
-      0px 1px 32px 0px rgba(16, 24, 40, 0.12);
-    --color-shadow-3xl:
-      0px 12px 24px 0px rgba(0, 0, 0, 0.12), 0px 16px 32px 0px rgba(0, 0, 0, 0.12),
-      0px 1px 48px 0px rgba(16, 24, 40, 0.12);
-    --color-shadow-4xl: 0px 8px 40px 0px rgba(0, 0, 61, 0.05), 0px 12px 32px -16px rgba(0, 0, 0, 0.05);
-    --color-shadow-custom: 2px 2px 8px 2px rgba(234, 231, 250, 0.3);
-
-    --color-sidebar-background-100: var(--color-background-100); /* primary sidebar bg */
-    --color-sidebar-background-90: var(--color-background-90); /* secondary sidebar bg */
-    --color-sidebar-background-80: var(--color-background-80); /* tertiary sidebar bg */
-
-    --color-sidebar-text-100: var(--color-text-100); /* primary sidebar text */
-    --color-sidebar-text-200: var(--color-text-200); /* secondary sidebar text */
-    --color-sidebar-text-300: var(--color-text-300); /* tertiary sidebar text */
-    --color-sidebar-text-400: var(--color-text-400); /* sidebar placeholder text */
-
-    --color-sidebar-border-100: var(--color-border-100); /* subtle sidebar border= 1 */
-    --color-sidebar-border-200: var(--color-border-100); /* subtle sidebar border- 2 */
-    --color-sidebar-border-300: var(--color-border-100); /* strong sidebar border- 1 */
-    --color-sidebar-border-400: var(--color-border-100); /* strong sidebar border- 2 */
-
-    --color-sidebar-shadow-2xs: var(--color-shadow-2xs);
-    --color-sidebar-shadow-xs: var(--color-shadow-xs);
-    --color-sidebar-shadow-sm: var(--color-shadow-sm);
-    --color-sidebar-shadow-rg: var(--color-shadow-rg);
-    --color-sidebar-shadow-md: var(--color-shadow-md);
-    --color-sidebar-shadow-lg: var(--color-shadow-lg);
-    --color-sidebar-shadow-xl: var(--color-shadow-xl);
-    --color-sidebar-shadow-2xl: var(--color-shadow-2xl);
-    --color-sidebar-shadow-3xl: var(--color-shadow-3xl);
-    --color-sidebar-shadow-4xl: var(--color-shadow-4xl);
-
-    /* pi */
-    --color-pi-50: var(--color-background-90);
-    --color-pi-100: var(--color-background-90);
-    --color-pi-200: var(--color-primary-200);
-    --color-pi-300: var(--color-primary-200);
-    --color-pi-400: var(--color-primary-200);
-    --color-pi-500: var(--color-primary-200);
-    --color-pi-600: 151, 150, 246;
-    --color-pi-700: var(--color-primary-100);
-    --color-pi-800: 57, 56, 149;
-    --color-pi-900: 30, 29, 78;
-    --color-pi-950: 14, 14, 37;
-
-    /* Plane subscriptions */
-    --color-subscription-free-200: 69, 80, 104;
-    --color-subscription-free-400: 51, 59, 77;
-
-    --color-subscription-one-200: 101, 42, 14;
-    --color-subscription-one-400: 90, 37, 12;
-
-    --color-subscription-pro-200: 32, 128, 138;
-    --color-subscription-pro-400: 24, 96, 104;
-
-    --color-subscription-business-200: 142, 33, 87;
-    --color-subscription-business-400: 103, 24, 63;
-
-    --color-subscription-enterprise-200: 86, 5, 145;
-    --color-subscription-enterprise-400: 73, 4, 123;
-
-    /* toast theme */
-    --color-toast-success-text: 178, 221, 181;
-    --color-toast-error-text: 206, 44, 49;
-    --color-toast-warning-text: 255, 186, 24;
-    --color-toast-info-text: 141, 164, 239;
-    --color-toast-loading-text: 255, 255, 255;
-    --color-toast-secondary-text: 185, 187, 198;
-    --color-toast-tertiary-text: 139, 141, 152;
-
-    --color-toast-success-background: 46, 46, 46;
-    --color-toast-error-background: 46, 46, 46;
-    --color-toast-warning-background: 46, 46, 46;
-    --color-toast-info-background: 46, 46, 46;
-    --color-toast-loading-background: 46, 46, 46;
-
-    --color-toast-success-border: 42, 126, 59;
-    --color-toast-error-border: 100, 23, 35;
-    --color-toast-warning-border: 79, 52, 34;
-    --color-toast-info-border: 58, 91, 199;
-    --color-toast-loading-border: 96, 100, 108;
-  }
-
-  [data-theme="light"],
-  [data-theme="light-contrast"] {
-    color-scheme: light !important;
-
-    --color-background-100: 255, 255, 255; /* primary bg */
-    --color-background-90: 247, 247, 247; /* secondary bg */
-    --color-background-80: 232, 232, 232; /* tertiary bg */
-
-    /* pi */
-    --color-pi-50: var(--color-background-90);
-    --color-pi-100: var(--color-background-90);
-    --color-pi-200: var(--color-primary-200);
-    --color-pi-300: var(--color-primary-200);
-    --color-pi-400: var(--color-primary-200);
-    --color-pi-500: var(--color-primary-200);
-    --color-pi-600: 151, 150, 246;
-    --color-pi-700: var(--color-primary-100);
-    --color-pi-800: 57, 56, 149;
-    --color-pi-900: 30, 29, 78;
-    --color-pi-950: 14, 14, 37;
-
-    /* Plane subscriptions */
-    --color-subscription-free-200: 69, 80, 104;
-    --color-subscription-free-400: 51, 59, 77;
-
-    --color-subscription-one-200: 101, 42, 14;
-    --color-subscription-one-400: 90, 37, 12;
-
-    --color-subscription-pro-200: 32, 128, 138;
-    --color-subscription-pro-400: 24, 96, 104;
-
-    --color-subscription-business-200: 142, 33, 87;
-    --color-subscription-business-400: 103, 24, 63;
-
-    --color-subscription-enterprise-200: 86, 5, 145;
-    --color-subscription-enterprise-400: 73, 4, 123;
-  }
-
-  [data-theme="light"] {
-    --color-text-100: 23, 23, 23; /* primary text */
-    --color-text-200: 58, 58, 58; /* secondary text */
-    --color-text-300: 82, 82, 82; /* tertiary text */
-    --color-text-350: 130, 130, 130;
-    --color-text-400: 163, 163, 163; /* placeholder text */
-
-    --color-scrollbar: 163, 163, 163; /* scrollbar thumb */
-
-    --color-border-100: 245, 245, 245; /* subtle border= 1 */
-    --color-border-200: 229, 229, 229; /* subtle border- 2 */
-    --color-border-300: 212, 212, 212; /* strong border- 1 */
-    --color-border-400: 185, 185, 185; /* strong border- 2 */
-
-    /* onboarding colors */
-    --gradient-onboarding-100: linear-gradient(106deg, #f2f6ff 29.8%, #e1eaff 99.34%);
-    --gradient-onboarding-200: linear-gradient(129deg, rgba(255, 255, 255, 0) -22.23%, rgba(255, 255, 255, 0.8) 62.98%);
-    --gradient-onboarding-300: linear-gradient(164deg, #fff 4.25%, rgba(255, 255, 255, 0.06) 93.5%);
-    --gradient-onboarding-400: linear-gradient(129deg, rgba(255, 255, 255, 0) -22.23%, rgba(255, 255, 255, 0.8) 62.98%);
-
-    --color-onboarding-text-100: 23, 23, 23;
-    --color-onboarding-text-200: 58, 58, 58;
-    --color-onboarding-text-300: 82, 82, 82;
-    --color-onboarding-text-400: 163, 163, 163;
-
-    --color-onboarding-background-100: 236, 241, 255;
-    --color-onboarding-background-200: 255, 255, 255;
-    --color-onboarding-background-300: 236, 241, 255;
-    --color-onboarding-background-400: 177, 206, 250;
-
-    --color-onboarding-border-100: 229, 229, 229;
-    --color-onboarding-border-200: 217, 228, 255;
-    --color-onboarding-border-300: 229, 229, 229, 0.5;
-
-    --color-onboarding-shadow-sm: 0px 4px 20px 0px rgba(126, 139, 171, 0.1);
-
-    /* toast theme */
-    --color-toast-success-text: 62, 155, 79;
-    --color-toast-error-text: var(--color-error-200);
-    --color-toast-warning-text: 255, 186, 24;
-    --color-toast-info-text: 51, 88, 212;
-    --color-toast-loading-text: 28, 32, 36;
-    --color-toast-secondary-text: 128, 131, 141;
-    --color-toast-tertiary-text: 96, 100, 108;
-
-    --color-toast-success-background: 253, 253, 254;
-    --color-toast-error-background: var(--color-error-10);
-    --color-toast-warning-background: 254, 253, 251;
-    --color-toast-info-background: 253, 253, 254;
-    --color-toast-loading-background: 253, 253, 254;
-
-    --color-toast-success-border: 218, 241, 219;
-    --color-toast-error-border: var(--color-error-30);
-    --color-toast-warning-border: 255, 247, 194;
-    --color-toast-info-border: 210, 222, 255;
-    --color-toast-loading-border: 224, 225, 230;
-  }
-
-  [data-theme="light-contrast"] {
-    --color-text-100: 11, 11, 11; /* primary text */
-    --color-text-200: 38, 38, 38; /* secondary text */
-    --color-text-300: 58, 58, 58; /* tertiary text */
-    --color-text-350: 80, 80, 80;
-    --color-text-400: 115, 115, 115; /* placeholder text */
-
-    --color-scrollbar: 115, 115, 115; /* scrollbar thumb */
-
-    --color-border-100: 34, 34, 34; /* subtle border= 1 */
-    --color-border-200: 38, 38, 38; /* subtle border- 2 */
-    --color-border-300: 46, 46, 46; /* strong border- 1 */
-    --color-border-400: 58, 58, 58; /* strong border- 2 */
-  }
-
-  [data-theme="dark"],
-  [data-theme="dark-contrast"] {
-    color-scheme: dark !important;
-
-    --color-primary-10: 8, 31, 43;
-    --color-primary-20: 10, 37, 51;
-    --color-primary-30: 13, 49, 69;
-    --color-primary-40: 16, 58, 81;
-    --color-primary-50: 18, 68, 94;
-    --color-primary-60: 23, 86, 120;
-    --color-primary-70: 28, 104, 146;
-    --color-primary-80: 31, 116, 163;
-    --color-primary-90: 34, 129, 180;
-    --color-primary-100: 40, 146, 204;
-    --color-primary-200: 41, 154, 214;
-    --color-primary-300: 75, 170, 221;
-    --color-primary-400: 109, 186, 227;
-    --color-primary-500: 144, 202, 234;
-    --color-primary-600: 169, 214, 239;
-    --color-primary-700: 199, 229, 244;
-    --color-primary-800: 216, 237, 248;
-    --color-primary-900: 229, 243, 250;
-
-    --color-background-100: 25, 25, 25; /* primary bg */
-    --color-background-90: 32, 32, 32; /* secondary bg */
-    --color-background-80: 44, 44, 44; /* tertiary bg */
-
-    --color-background-primary: var(--color-background-90);
-    --color-background-error: var(--color-background-90);
-
-    --color-text-primary: var(--color-primary-40);
-    --color-text-error: var(--color-error-100);
-
-    --color-border-primary: var(--color-primary-200);
-    --color-border-error: var(--color-error-500);
-
-    --color-shadow-2xs: 0px 0px 1px 0px rgba(0, 0, 0, 0.15), 0px 1px 3px 0px rgba(0, 0, 0, 0.5);
-    --color-shadow-xs: 0px 0px 2px 0px rgba(0, 0, 0, 0.2), 0px 2px 4px 0px rgba(0, 0, 0, 0.5);
-    --color-shadow-sm: 0px 0px 4px 0px rgba(0, 0, 0, 0.2), 0px 2px 6px 0px rgba(0, 0, 0, 0.5);
-    --color-shadow-rg: 0px 0px 6px 0px rgba(0, 0, 0, 0.2), 0px 4px 6px 0px rgba(0, 0, 0, 0.5);
-    --color-shadow-md: 0px 2px 8px 0px rgba(0, 0, 0, 0.2), 0px 4px 8px 0px rgba(0, 0, 0, 0.5);
-    --color-shadow-lg: 0px 4px 12px 0px rgba(0, 0, 0, 0.25), 0px 4px 10px 0px rgba(0, 0, 0, 0.55);
-    --color-shadow-xl: 0px 0px 14px 0px rgba(0, 0, 0, 0.25), 0px 6px 10px 0px rgba(0, 0, 0, 0.55);
-    --color-shadow-2xl: 0px 0px 18px 0px rgba(0, 0, 0, 0.25), 0px 8px 12px 0px rgba(0, 0, 0, 0.6);
-    --color-shadow-3xl: 0px 4px 24px 0px rgba(0, 0, 0, 0.3), 0px 12px 40px 0px rgba(0, 0, 0, 0.65);
-
-    /* pi */
-    --color-pi-50: var(--color-background-90);
-    --color-pi-100: var(--color-background-90);
-    --color-pi-200: var(--color-primary-200);
-    --color-pi-300: var(--color-primary-200);
-    --color-pi-400: var(--color-primary-200);
-    --color-pi-500: var(--color-primary-200);
-    --color-pi-600: 151, 150, 246;
-    --color-pi-700: var(--color-primary-100);
-    --color-pi-800: 57, 56, 149;
-    --color-pi-900: 30, 29, 78;
-    --color-pi-950: 14, 14, 37;
-
-    /* Plane subscriptions */
-    --color-subscription-free-200: 206, 213, 232;
-    --color-subscription-free-400: 152, 166, 206;
-
-    --color-subscription-one-200: 255, 148, 153;
-    --color-subscription-one-400: 200, 118, 121;
-
-    --color-subscription-pro-200: 12, 170, 192;
-    --color-subscription-pro-400: 9, 130, 154;
-
-    --color-subscription-business-200: 206, 34, 119;
-    --color-subscription-business-400: 140, 23, 81;
-
-    --color-subscription-enterprise-200: 182, 71, 255;
-    --color-subscription-enterprise-400: 134, 11, 203;
-  }
-
-  [data-theme="dark"] {
-    --color-text-100: 229, 229, 229; /* primary text */
-    --color-text-200: 163, 163, 163; /* secondary text */
-    --color-text-300: 115, 115, 115; /* tertiary text */
-    --color-text-350: 130, 130, 130;
-    --color-text-400: 82, 82, 82; /* placeholder text */
-
-    --color-scrollbar: 82, 82, 82; /* scrollbar thumb */
-
-    --color-border-100: 34, 34, 34; /* subtle border= 1 */
-    --color-border-200: 38, 38, 38; /* subtle border- 2 */
-    --color-border-300: 46, 46, 46; /* strong border- 1 */
-    --color-border-400: 58, 58, 58; /* strong border- 2 */
-
-    /* onboarding colors */
-    --gradient-onboarding-100: linear-gradient(106deg, #18191b 25.17%, #18191b 99.34%);
-    --gradient-onboarding-200: linear-gradient(129deg, rgba(47, 49, 53, 0.8) -22.23%, rgba(33, 34, 37, 0.8) 62.98%);
-    --gradient-onboarding-300: linear-gradient(167deg, rgba(47, 49, 53, 0.45) 19.22%, #212225 98.48%);
-
-    --color-onboarding-text-100: 237, 238, 240;
-    --color-onboarding-text-200: 176, 180, 187;
-    --color-onboarding-text-300: 118, 123, 132;
-    --color-onboarding-text-400: 105, 110, 119;
-
-    --color-onboarding-background-100: 54, 58, 64;
-    --color-onboarding-background-200: 40, 42, 45;
-    --color-onboarding-background-300: 40, 42, 45;
-    --color-onboarding-background-400: 67, 72, 79;
-
-    --color-onboarding-border-100: 54, 58, 64;
-    --color-onboarding-border-200: 54, 58, 64;
-    --color-onboarding-border-300: 34, 35, 38, 0.5;
-
-    --color-onboarding-shadow-sm: 0px 4px 20px 0px rgba(39, 44, 56, 0.1);
-  }
-
-  [data-theme="dark-contrast"] {
-    --color-text-100: 250, 250, 250; /* primary text */
-    --color-text-200: 241, 241, 241; /* secondary text */
-    --color-text-300: 212, 212, 212; /* tertiary text */
-    --color-text-350: 190, 190, 190 --color-text-400: 115, 115, 115; /* placeholder text */
-
-    --color-scrollbar: 115, 115, 115; /* scrollbar thumb */
-
-    --color-border-100: 245, 245, 245; /* subtle border= 1 */
-    --color-border-200: 229, 229, 229; /* subtle border- 2 */
-    --color-border-300: 212, 212, 212; /* strong border- 1 */
-    --color-border-400: 185, 185, 185; /* strong border- 2 */
-  }
-
-  [data-theme="light"],
-  [data-theme="dark"],
-  [data-theme="light-contrast"],
-  [data-theme="dark-contrast"] {
-    --color-sidebar-background-100: var(--color-background-100); /* primary sidebar bg */
-    --color-sidebar-background-90: var(--color-background-90); /* secondary sidebar bg */
-    --color-sidebar-background-80: var(--color-background-80); /* tertiary sidebar bg */
-
-    --color-sidebar-text-100: var(--color-text-100); /* primary sidebar text */
-    --color-sidebar-text-200: var(--color-text-200); /* secondary sidebar text */
-    --color-sidebar-text-300: var(--color-text-300); /* tertiary sidebar text */
-    --color-sidebar-text-400: var(--color-text-400); /* sidebar placeholder text */
-
-    --color-sidebar-border-100: var(--color-border-100); /* subtle sidebar border= 1 */
-    --color-sidebar-border-200: var(--color-border-200); /* subtle sidebar border- 2 */
-    --color-sidebar-border-300: var(--color-border-300); /* strong sidebar border- 1 */
-    --color-sidebar-border-400: var(--color-border-400); /* strong sidebar border- 2 */
-  }
-
-  /* stickies and editor colors */
-  :root {
-    /* text colors */
-    --editor-colors-gray-text: #5c5e63;
-    --editor-colors-peach-text: #ff5b59;
-    --editor-colors-pink-text: #f65385;
-    --editor-colors-orange-text: #fd9038;
-    --editor-colors-green-text: #0fc27b;
-    --editor-colors-light-blue-text: #17bee9;
-    --editor-colors-dark-blue-text: #266df0;
-    --editor-colors-purple-text: #9162f9;
-    /* end text colors */
-
-    /* background colors */
-    --editor-colors-gray-background: #d6d6d8;
-    --editor-colors-peach-background: #ffd5d7;
-    --editor-colors-pink-background: #fdd4e3;
-    --editor-colors-orange-background: #ffe3cd;
-    --editor-colors-green-background: #c3f0de;
-    --editor-colors-light-blue-background: #c5eff9;
-    --editor-colors-dark-blue-background: #c9dafb;
-    --editor-colors-purple-background: #e3d8fd;
-    /* end background colors */
-  }
   /* background colors */
-  [data-theme*="light"] {
-    --editor-colors-gray-background: #d6d6d8;
-    --editor-colors-peach-background: #ffd5d7;
-    --editor-colors-pink-background: #fdd4e3;
-    --editor-colors-orange-background: #ffe3cd;
-    --editor-colors-green-background: #c3f0de;
-    --editor-colors-light-blue-background: #c5eff9;
-    --editor-colors-dark-blue-background: #c9dafb;
-    --editor-colors-purple-background: #e3d8fd;
-  }
-  [data-theme*="dark"] {
-    --editor-colors-gray-background: #404144;
-    --editor-colors-peach-background: #593032;
-    --editor-colors-pink-background: #562e3d;
-    --editor-colors-orange-background: #583e2a;
-    --editor-colors-green-background: #1d4a3b;
-    --editor-colors-light-blue-background: #1f495c;
-    --editor-colors-dark-blue-background: #223558;
-    --editor-colors-purple-background: #3d325a;
-  }
+  --editor-colors-gray-background: #d6d6d8;
+  --editor-colors-peach-background: #ffd5d7;
+  --editor-colors-pink-background: #fdd4e3;
+  --editor-colors-orange-background: #ffe3cd;
+  --editor-colors-green-background: #c3f0de;
+  --editor-colors-light-blue-background: #c5eff9;
+  --editor-colors-dark-blue-background: #c9dafb;
+  --editor-colors-purple-background: #e3d8fd;
   /* end background colors */
 }
-
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-  -webkit-text-size-adjust: 100%;
-  -ms-text-size-adjust: 100%;
-  font-variant-ligatures: none;
-  -webkit-font-variant-ligatures: none;
-  text-rendering: optimizeLegibility;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
+/* background colors */
+[data-theme*="light"] {
+  --editor-colors-gray-background: #d6d6d8;
+  --editor-colors-peach-background: #ffd5d7;
+  --editor-colors-pink-background: #fdd4e3;
+  --editor-colors-orange-background: #ffe3cd;
+  --editor-colors-green-background: #c3f0de;
+  --editor-colors-light-blue-background: #c5eff9;
+  --editor-colors-dark-blue-background: #c9dafb;
+  --editor-colors-purple-background: #e3d8fd;
 }
-
-body {
-  color: rgba(var(--color-text-100));
-}
-
-/* scrollbar style */
-::-webkit-scrollbar {
-  display: none;
-}
-
-.tags-input-container {
-  border: 2px solid #000;
-  padding: 0.5em;
-  border-radius: 3px;
-  width: min(80vw, 600px);
-  margin-top: 1em;
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: 0.5em;
-}
-
-.tag-item {
-  background-color: rgb(218, 216, 216);
-  display: inline-block;
-  padding: 0.5em 0.75em;
-  border-radius: 20px;
-}
-.tag-item .close {
-  height: 20px;
-  width: 20px;
-  background-color: rgb(48, 48, 48);
-  color: #fff;
-  border-radius: 50%;
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  margin-left: 0.5em;
-  font-size: 18px;
-  cursor: pointer;
-}
-
-.tags-input {
-  flex-grow: 1;
-  padding: 0.5em 0;
-  border: none;
-  outline: none;
-}
-
-/* emoji icon picker */
-.conical-gradient {
-  background: conic-gradient(
-    from 180deg at 50% 50%,
-    #ff6b00 0deg,
-    #f7ae59 70.5deg,
-    #3f76ff 151.12deg,
-    #05c3ff 213deg,
-    #18914f 289.87deg,
-    #f6f172 329.25deg,
-    #ff6b00 360deg
-  );
-}
-
-/* progress bar */
-.progress-bar {
-  fill: currentColor;
-  color: rgba(var(--color-sidebar-background-100));
-}
-
-/* lineclamp */
-.lineclamp {
-  overflow: hidden;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 1;
-  line-clamp: 1;
-}
-
-/* popover2 styling */
-.bp4-popover2-transition-container {
-  z-index: 1 !important;
-}
-
-::-webkit-input-placeholder,
-::placeholder,
-:-ms-input-placeholder {
-  color: rgb(var(--color-text-400));
-}
-
-.bp4-overlay-content {
-  z-index: 555 !important;
-}
-
-.disable-scroll {
-  overflow: hidden !important;
-}
-
-.vertical-lr {
-  writing-mode: vertical-lr;
-  -webkit-writing-mode: vertical-lr;
-  -ms-writing-mode: vertical-lr;
-  width: fit-content;
-}
-
-div.web-view-spinner {
-  position: relative;
-  width: 54px;
-  height: 54px;
-  display: inline-block;
-  margin-left: 50%;
-  margin-right: 50%;
-  padding: 10px;
-  border-radius: 10px;
-}
-
-div.web-view-spinner div {
-  width: 6%;
-  height: 16%;
-  background: rgb(var(--color-text-400));
-  position: absolute;
-  left: 49%;
-  top: 43%;
-  opacity: 0;
-  border-radius: 50px;
-  -webkit-border-radius: 50px;
-  box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
-  -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
-  animation: fade 1s linear infinite;
-  -webkit-animation: fade 1s linear infinite;
-}
-
-@keyframes fade {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0.25;
-  }
-}
-@-webkit-keyframes fade {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0.25;
-  }
-}
-
-div.web-view-spinner div.bar1 {
-  transform: rotate(0deg) translate(0, -130%);
-  -webkit-transform: rotate(0deg) translate(0, -130%);
-  animation-delay: 0s;
-  -webkit-animation-delay: 0s;
-}
-
-div.web-view-spinner div.bar2 {
-  transform: rotate(30deg) translate(0, -130%);
-  -webkit-transform: rotate(30deg) translate(0, -130%);
-  animation-delay: -0.9167s;
-  -webkit-animation-delay: -0.9167s;
-}
-
-div.web-view-spinner div.bar3 {
-  transform: rotate(60deg) translate(0, -130%);
-  -webkit-transform: rotate(60deg) translate(0, -130%);
-  animation-delay: -0.833s;
-  -webkit-animation-delay: -0.833s;
-}
-div.web-view-spinner div.bar4 {
-  transform: rotate(90deg) translate(0, -130%);
-  -webkit-transform: rotate(90deg) translate(0, -130%);
-  animation-delay: -0.7497s;
-  -webkit-animation-delay: -0.7497s;
-}
-div.web-view-spinner div.bar5 {
-  transform: rotate(120deg) translate(0, -130%);
-  -webkit-transform: rotate(120deg) translate(0, -130%);
-  animation-delay: -0.667s;
-  -webkit-animation-delay: -0.667s;
-}
-div.web-view-spinner div.bar6 {
-  transform: rotate(150deg) translate(0, -130%);
-  -webkit-transform: rotate(150deg) translate(0, -130%);
-  animation-delay: -0.5837s;
-  -webkit-animation-delay: -0.5837s;
-}
-div.web-view-spinner div.bar7 {
-  transform: rotate(180deg) translate(0, -130%);
-  -webkit-transform: rotate(180deg) translate(0, -130%);
-  animation-delay: -0.5s;
-  -webkit-animation-delay: -0.5s;
-}
-div.web-view-spinner div.bar8 {
-  transform: rotate(210deg) translate(0, -130%);
-  -webkit-transform: rotate(210deg) translate(0, -130%);
-  animation-delay: -0.4167s;
-  -webkit-animation-delay: -0.4167s;
-}
-div.web-view-spinner div.bar9 {
-  transform: rotate(240deg) translate(0, -130%);
-  -webkit-transform: rotate(240deg) translate(0, -130%);
-  animation-delay: -0.333s;
-  -webkit-animation-delay: -0.333s;
-}
-div.web-view-spinner div.bar10 {
-  transform: rotate(270deg) translate(0, -130%);
-  -webkit-transform: rotate(270deg) translate(0, -130%);
-  animation-delay: -0.2497s;
-  -webkit-animation-delay: -0.2497s;
-}
-div.web-view-spinner div.bar11 {
-  transform: rotate(300deg) translate(0, -130%);
-  -webkit-transform: rotate(300deg) translate(0, -130%);
-  animation-delay: -0.167s;
-  -webkit-animation-delay: -0.167s;
-}
-div.web-view-spinner div.bar12 {
-  transform: rotate(330deg) translate(0, -130%);
-  -webkit-transform: rotate(330deg) translate(0, -130%);
-  animation-delay: -0.0833s;
-  -webkit-animation-delay: -0.0833s;
-}
-
-@-moz-document url-prefix() {
-  * {
-    scrollbar-width: none;
-  }
-  .vertical-scrollbar,
-  .horizontal-scrollbar {
-    scrollbar-width: initial;
-    scrollbar-color: rgba(96, 100, 108, 0.1) transparent;
-  }
-  .vertical-scrollbar:hover,
-  .horizontal-scrollbar:hover {
-    scrollbar-color: rgba(96, 100, 108, 0.25) transparent;
-  }
-  .vertical-scrollbar:active,
-  .horizontal-scrollbar:active {
-    scrollbar-color: rgba(96, 100, 108, 0.7) transparent;
-  }
-}
-
-.vertical-scrollbar {
-  overflow-y: auto;
-}
-.horizontal-scrollbar {
-  overflow-x: auto;
-}
-.vertical-scrollbar::-webkit-scrollbar,
-.horizontal-scrollbar::-webkit-scrollbar {
-  display: block;
-}
-.vertical-scrollbar::-webkit-scrollbar-track,
-.horizontal-scrollbar::-webkit-scrollbar-track {
-  background-color: transparent;
-  border-radius: 9999px;
-}
-.vertical-scrollbar::-webkit-scrollbar-thumb,
-.horizontal-scrollbar::-webkit-scrollbar-thumb {
-  background-clip: padding-box;
-  background-color: rgba(96, 100, 108, 0.1);
-  border-radius: 9999px;
-}
-.vertical-scrollbar:hover::-webkit-scrollbar-thumb,
-.horizontal-scrollbar:hover::-webkit-scrollbar-thumb {
-  background-color: rgba(96, 100, 108, 0.25);
-}
-.vertical-scrollbar::-webkit-scrollbar-thumb:hover,
-.horizontal-scrollbar::-webkit-scrollbar-thumb:hover {
-  background-color: rgba(96, 100, 108, 0.5);
-}
-.vertical-scrollbar::-webkit-scrollbar-thumb:active,
-.horizontal-scrollbar::-webkit-scrollbar-thumb:active {
-  background-color: rgba(96, 100, 108, 0.7);
-}
-.vertical-scrollbar::-webkit-scrollbar-corner,
-.horizontal-scrollbar::-webkit-scrollbar-corner {
-  background-color: transparent;
-}
-.vertical-scrollbar-margin-top-md::-webkit-scrollbar-track {
-  margin-top: 44px;
-}
-
-/* scrollbar xs size */
-.scrollbar-xs::-webkit-scrollbar {
-  height: 10px;
-  width: 10px;
-}
-.scrollbar-xs::-webkit-scrollbar-thumb {
-  border: 3px solid rgba(0, 0, 0, 0);
+[data-theme*="dark"] {
+  --editor-colors-gray-background: #404144;
+  --editor-colors-peach-background: #593032;
+  --editor-colors-pink-background: #562e3d;
+  --editor-colors-orange-background: #583e2a;
+  --editor-colors-green-background: #1d4a3b;
+  --editor-colors-light-blue-background: #1f495c;
+  --editor-colors-dark-blue-background: #223558;
+  --editor-colors-purple-background: #3d325a;
 }
+/* end background colors */
 
 .shadow-custom {
   box-shadow: 2px 2px 8px 2px rgba(234, 231, 250, 0.3); /* Convert #EAE7FA4D to rgba */
@@ -815,61 +60,17 @@ div.web-view-spinner div.bar12 {
   @apply backdrop-filter blur-[9px];
 }
 
-/* scrollbar sm size */
-.scrollbar-sm::-webkit-scrollbar {
-  height: 12px;
-  width: 12px;
-}
-.scrollbar-sm::-webkit-scrollbar-thumb {
-  border: 3px solid rgba(0, 0, 0, 0);
-}
-/* scrollbar md size */
-.scrollbar-md::-webkit-scrollbar {
-  height: 14px;
-  width: 14px;
-}
-.scrollbar-md::-webkit-scrollbar-thumb {
-  border: 3px solid rgba(0, 0, 0, 0);
-}
-/* scrollbar lg size */
-
-.scrollbar-lg::-webkit-scrollbar {
-  height: 16px;
-  width: 16px;
-}
-.scrollbar-lg::-webkit-scrollbar-thumb {
-  border: 4px solid rgba(0, 0, 0, 0);
-}
-
-/* highlight class */
-.highlight {
-  border: 1px solid rgb(var(--color-primary-100)) !important;
-}
-.highlight-with-line {
-  border-left: 5px solid rgb(var(--color-primary-100)) !important;
-  background: rgb(var(--color-background-80));
-}
-
-/* By applying below class, the autofilled text in form fields will not have the default autofill background color and styles applied by WebKit browsers  */
-.disable-autofill-style:-webkit-autofill,
-.disable-autofill-style:-webkit-autofill:hover,
-.disable-autofill-style:-webkit-autofill:focus,
-.disable-autofill-style:-webkit-autofill:active {
-  -webkit-background-clip: text;
-}
-
 .epr-search-container > input {
-  background-color: rgb(var(--color-background-90)) !important;
-  color: rgb(var(--color-text-100)) !important;
+  @apply bg-surface-2! text-primary!;
   border: none !important;
 }
 
 .epr-search-container > input::placeholder {
-  color: rgb(var(--color-text-400)) !important;
+  @apply text-placeholder!;
 }
 
 .epr-search-container > .epr-icn-search {
-  color: rgb(var(--color-text-400)) !important;
+  @apply text-placeholder!;
 }
 
 /* Lock icon animations */
@@ -962,7 +163,7 @@ div.web-view-spinner div.bar12 {
 
 @keyframes highlight {
   0% {
-    background-color: rgba(var(--color-background-90), 1);
+    background-color: var(--background-color-layer-2);
     border-radius: 4px;
   }
   100% {
@@ -973,7 +174,7 @@ div.web-view-spinner div.bar12 {
 
 /* Progress Bar Styles */
 :root {
-  --bprogress-color: rgb(var(--color-primary-100)) !important;
+  --bprogress-color: var(--background-color-accent-primary);
   --bprogress-height: 2.5px !important;
 }
 
@@ -984,8 +185,8 @@ div.web-view-spinner div.bar12 {
 .bprogress .bar {
   background: linear-gradient(
     90deg,
-    rgba(var(--color-primary-100), 0.8) 0%,
-    rgba(var(--color-primary-100), 1) 100%
+    --alpha(var(--background-color-accent-primary) / 80%) 0%,
+    --alpha(var(--background-color-accent-primary) / 100%) 100%
   ) !important;
   will-change: width, opacity;
 }
@@ -993,7 +194,7 @@ div.web-view-spinner div.bar12 {
 .bprogress .peg {
   display: block;
   box-shadow:
-    0 0 8px rgba(var(--color-primary-100), 0.6),
-    0 0 4px rgba(var(--color-primary-100), 0.4) !important;
+    0 0 8px --alpha(var(--background-color-accent-primary) / 60%),
+    0 0 4px --alpha(var(--background-color-accent-primary) / 40%) !important;
   will-change: transform, opacity;
 }
diff --git a/apps/web/styles/power-k.css b/apps/web/styles/power-k.css
index d0fc52dd1..f79546101 100644
--- a/apps/web/styles/power-k.css
+++ b/apps/web/styles/power-k.css
@@ -1,45 +1,27 @@
-[cmdk-group] {
-  padding-left: 0.45rem;
-  padding-right: 0.45rem;
-  margin-top: 0.5rem;
-}
+@layer components {
+  [cmdk-group] {
+    @apply mt-2 px-[0.45rem];
+  }
 
-[cmdk-group-heading] {
-  color: rgba(var(--color-text-300));
-  font-size: 0.75rem;
-  font-weight: 500;
-  margin-bottom: 0.5rem;
-  padding-left: 0.45rem;
-  padding-right: 0.45rem;
-}
+  [cmdk-group-heading] {
+    @apply text-tertiary text-12 font-medium mb-2 px-[0.45rem];
+  }
 
-[cmdk-item] {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  border-radius: 0.375rem;
-  padding: 0.5rem;
-  font-size: 0.825rem;
-  line-height: 1.25rem;
-  cursor: pointer;
-}
+  [cmdk-item] {
+    @apply flex items-center justify-between cursor-pointer bg-layer-transparent text-body-xs-regular p-2 rounded-md;
 
-[cmdk-item]:focus {
-  background-color: rgba(var(--color-background-80));
-}
+    &:focus,
+    &[aria-selected="true"] {
+      @apply bg-layer-transparent-active;
+    }
 
-[cmdk-item][aria-selected="true"] {
-  background-color: rgba(var(--color-background-80));
-}
+    &[aria-disabled="true"],
+    &[data-disabled="true"] {
+      @apply bg-layer-transparent opacity-50 cursor-not-allowed;
 
-[cmdk-item][aria-disabled="true"],
-[cmdk-item][data-disabled="true"] {
-  cursor: not-allowed;
-  opacity: 0.5;
-  background-color: transparent;
-}
-
-[cmdk-item][aria-disabled="true"]:focus,
-[cmdk-item][data-disabled="true"]:focus {
-  background-color: rgba(var(--color-background-80), 0.7);
+      &:focus {
+        @apply bg-layer-1/70;
+      }
+    }
+  }
 }
diff --git a/apps/web/tailwind.config.cjs b/apps/web/tailwind.config.cjs
deleted file mode 100644
index 9bc917eb4..000000000
--- a/apps/web/tailwind.config.cjs
+++ /dev/null
@@ -1,5 +0,0 @@
-const sharedConfig = require("@plane/tailwind-config/tailwind.config.js");
-
-module.exports = {
-  presets: [sharedConfig],
-};
diff --git a/apps/web/tsconfig.json b/apps/web/tsconfig.json
index 3084e156b..2646a6599 100644
--- a/apps/web/tsconfig.json
+++ b/apps/web/tsconfig.json
@@ -5,11 +5,9 @@
       "@/*": ["./core/*"],
       "@/app/*": ["./app/*"],
       "@/helpers/*": ["./helpers/*"],
-      "@/plane-web/*": ["./ce/*"],
       "@/styles/*": ["./styles/*"],
-      "app/*": ["./app/*"],
-      "package.json": ["./package.json"],
-      "ce/*": ["./ce/*"]
+      "@/plane-web/*": ["./ce/*"],
+      "package.json": ["./package.json"]
     },
     "strictNullChecks": true,
     "exactOptionalPropertyTypes": false,
diff --git a/apps/web/vite.config.ts b/apps/web/vite.config.ts
index b80e3b65e..f94ebce9d 100644
--- a/apps/web/vite.config.ts
+++ b/apps/web/vite.config.ts
@@ -1,5 +1,5 @@
 import path from "node:path";
-import * as dotenv from "@dotenvx/dotenvx";
+import * as dotenv from "dotenv";
 import { reactRouter } from "@react-router/dev/vite";
 import { defineConfig } from "vite";
 import tsconfigPaths from "vite-tsconfig-paths";
diff --git a/deployments/aio/community/Dockerfile b/deployments/aio/community/Dockerfile
index 47e1227d9..642c9bac6 100644
--- a/deployments/aio/community/Dockerfile
+++ b/deployments/aio/community/Dockerfile
@@ -6,12 +6,12 @@ FROM --platform=$BUILDPLATFORM tonistiigi/binfmt AS binfmt
 # **************************************************
 FROM node:22-alpine AS node
 
-FROM artifacts.plane.so/makeplane/plane-frontend:${PLANE_VERSION} AS web-img
-FROM artifacts.plane.so/makeplane/plane-backend:${PLANE_VERSION} AS backend-img
-FROM artifacts.plane.so/makeplane/plane-space:${PLANE_VERSION} AS space-img
-FROM artifacts.plane.so/makeplane/plane-admin:${PLANE_VERSION} AS admin-img
-FROM artifacts.plane.so/makeplane/plane-live:${PLANE_VERSION} AS live-img
-FROM artifacts.plane.so/makeplane/plane-proxy:${PLANE_VERSION} AS proxy-img
+FROM makeplane/plane-frontend:${PLANE_VERSION} AS web-img
+FROM makeplane/plane-backend:${PLANE_VERSION} AS backend-img
+FROM makeplane/plane-space:${PLANE_VERSION} AS space-img
+FROM makeplane/plane-admin:${PLANE_VERSION} AS admin-img
+FROM makeplane/plane-live:${PLANE_VERSION} AS live-img
+FROM makeplane/plane-proxy:${PLANE_VERSION} AS proxy-img
 
 # **************************************************
 #  STAGE 1: Runner
diff --git a/deployments/aio/community/README.md b/deployments/aio/community/README.md
index 96aab6737..8e945a826 100644
--- a/deployments/aio/community/README.md
+++ b/deployments/aio/community/README.md
@@ -59,7 +59,7 @@ docker run --name plane-aio --rm -it \
     -e AWS_ACCESS_KEY_ID=your-access-key \
     -e AWS_SECRET_ACCESS_KEY=your-secret-key \
     -e AWS_S3_BUCKET_NAME=your-bucket \
-    artifacts.plane.so/makeplane/plane-aio-community:latest
+    makeplane/plane-aio-community:latest
 ```
 
 ### Example with IP Address
@@ -78,7 +78,7 @@ docker run --name myaio --rm -it \
     -e AWS_S3_BUCKET_NAME=plane-app \
     -e AWS_S3_ENDPOINT_URL=http://${MYIP}:19000 \
     -e FILE_SIZE_LIMIT=10485760 \
-    artifacts.plane.so/makeplane/plane-aio-community:latest
+    makeplane/plane-aio-community:latest
 ```
 
 ## Configuration Options
diff --git a/deployments/aio/community/supervisor.conf b/deployments/aio/community/supervisor.conf
index 33b12985e..4474ee3b5 100644
--- a/deployments/aio/community/supervisor.conf
+++ b/deployments/aio/community/supervisor.conf
@@ -18,8 +18,8 @@ priority=10
 
 
 [program:space]
-directory=/app/space/apps/space/build/server
-command=sh -c "npx react-router-serve index.js"
+directory=/app/space/apps/space
+command=sh -c "npx react-router-serve ./build/server/index.js"
 autostart=true
 autorestart=true
 stdout_logfile=/app/logs/access/space.log
diff --git a/deployments/cli/community/docker-compose.yml b/deployments/cli/community/docker-compose.yml
index d4de33a74..2ed44f037 100644
--- a/deployments/cli/community/docker-compose.yml
+++ b/deployments/cli/community/docker-compose.yml
@@ -61,7 +61,7 @@ x-app-env: &app-env
 
 services:
   web:
-    image: artifacts.plane.so/makeplane/plane-frontend:${APP_RELEASE:-stable}
+    image: makeplane/plane-frontend:${APP_RELEASE:-stable}
     deploy:
       replicas: ${WEB_REPLICAS:-1}
       restart_policy:
@@ -71,7 +71,7 @@ services:
       - worker
 
   space:
-    image: artifacts.plane.so/makeplane/plane-space:${APP_RELEASE:-stable}
+    image: makeplane/plane-space:${APP_RELEASE:-stable}
     deploy:
       replicas: ${SPACE_REPLICAS:-1}
       restart_policy:
@@ -82,7 +82,7 @@ services:
       - web
 
   admin:
-    image: artifacts.plane.so/makeplane/plane-admin:${APP_RELEASE:-stable}
+    image: makeplane/plane-admin:${APP_RELEASE:-stable}
     deploy:
       replicas: ${ADMIN_REPLICAS:-1}
       restart_policy:
@@ -92,7 +92,7 @@ services:
       - web
 
   live:
-    image: artifacts.plane.so/makeplane/plane-live:${APP_RELEASE:-stable}
+    image: makeplane/plane-live:${APP_RELEASE:-stable}
     environment:
       <<: [*live-env, *redis-env]
     deploy:
@@ -104,7 +104,7 @@ services:
       - web
 
   api:
-    image: artifacts.plane.so/makeplane/plane-backend:${APP_RELEASE:-stable}
+    image: makeplane/plane-backend:${APP_RELEASE:-stable}
     command: ./bin/docker-entrypoint-api.sh
     deploy:
       replicas: ${API_REPLICAS:-1}
@@ -120,7 +120,7 @@ services:
       - plane-mq
 
   worker:
-    image: artifacts.plane.so/makeplane/plane-backend:${APP_RELEASE:-stable}
+    image: makeplane/plane-backend:${APP_RELEASE:-stable}
     command: ./bin/docker-entrypoint-worker.sh
     deploy:
       replicas: ${WORKER_REPLICAS:-1}
@@ -137,7 +137,7 @@ services:
       - plane-mq
 
   beat-worker:
-    image: artifacts.plane.so/makeplane/plane-backend:${APP_RELEASE:-stable}
+    image: makeplane/plane-backend:${APP_RELEASE:-stable}
     command: ./bin/docker-entrypoint-beat.sh
     deploy:
       replicas: ${BEAT_WORKER_REPLICAS:-1}
@@ -154,7 +154,7 @@ services:
       - plane-mq
 
   migrator:
-    image: artifacts.plane.so/makeplane/plane-backend:${APP_RELEASE:-stable}
+    image: makeplane/plane-backend:${APP_RELEASE:-stable}
     command: ./bin/docker-entrypoint-migrator.sh
     deploy:
       replicas: 1
@@ -216,7 +216,7 @@ services:
 
   # Comment this if you already have a reverse proxy running
   proxy:
-    image: artifacts.plane.so/makeplane/plane-proxy:${APP_RELEASE:-stable}
+    image: makeplane/plane-proxy:${APP_RELEASE:-stable}
     deploy:
       replicas: 1
       restart_policy:
diff --git a/deployments/cli/community/install.sh b/deployments/cli/community/install.sh
index c26fba22b..accd89c81 100755
--- a/deployments/cli/community/install.sh
+++ b/deployments/cli/community/install.sh
@@ -5,7 +5,7 @@ SCRIPT_DIR=$PWD
 SERVICE_FOLDER=plane-app
 PLANE_INSTALL_DIR=$PWD/$SERVICE_FOLDER
 export APP_RELEASE=stable
-export DOCKERHUB_USER=artifacts.plane.so/makeplane
+export DOCKERHUB_USER=makeplane
 export PULL_POLICY=${PULL_POLICY:-if_not_present}
 export GH_REPO=makeplane/plane
 export RELEASE_DOWNLOAD_URL="https://github.com/$GH_REPO/releases/download"
@@ -23,16 +23,16 @@ function print_header() {
 clear
 
 cat <<"EOF"
---------------------------------------------
- ____  _                          ///////// 
-|  _ \| | __ _ _ __   ___         ///////// 
-| |_) | |/ _` | '_ \ / _ \   /////    ///// 
-|  __/| | (_| | | | |  __/   /////    ///// 
-|_|   |_|\__,_|_| |_|\___|        ////      
-                                  ////      
---------------------------------------------
-Project management tool from the future
---------------------------------------------
+##+.    ##+    .##-                  
+ ######+.######-.######.              
+ #######.   -###    +#####+.          
+ #######.      +       +######.       
+ #######.              .#######       
+ #######.              .#######       
+  #######       +      .#######       
+    .+#####+    ###-   .#######       
+        .######.-#####+.+######       
+            -##.    -##    .+##
 EOF
 }
 
@@ -690,7 +690,7 @@ if [ -f "$DOCKER_ENV_PATH" ]; then
     CUSTOM_BUILD=$(getEnvValue "CUSTOM_BUILD" "$DOCKER_ENV_PATH")
 
     if [ -z "$DOCKERHUB_USER" ]; then
-        DOCKERHUB_USER=artifacts.plane.so/makeplane
+        DOCKERHUB_USER=makeplane
         updateEnvFile "DOCKERHUB_USER" "$DOCKERHUB_USER" "$DOCKER_ENV_PATH"
     fi
 
diff --git a/deployments/swarm/community/swarm.sh b/deployments/swarm/community/swarm.sh
index d496c25e6..02f170f4d 100755
--- a/deployments/swarm/community/swarm.sh
+++ b/deployments/swarm/community/swarm.sh
@@ -5,7 +5,7 @@ SERVICE_FOLDER=plane-app
 SCRIPT_DIR=$PWD
 PLANE_INSTALL_DIR=$PWD/$SERVICE_FOLDER
 export APP_RELEASE="stable"
-export DOCKERHUB_USER=artifacts.plane.so/makeplane
+export DOCKERHUB_USER=makeplane
 
 export GH_REPO=makeplane/plane
 export RELEASE_DOWNLOAD_URL="https://github.com/$GH_REPO/releases/download"
@@ -595,7 +595,7 @@ if [ -f "$DOCKER_ENV_PATH" ]; then
     APP_RELEASE=$(getEnvValue "APP_RELEASE" "$DOCKER_ENV_PATH")
 
     if [ -z "$DOCKERHUB_USER" ]; then
-        DOCKERHUB_USER=artifacts.plane.so/makeplane
+        DOCKERHUB_USER=makeplane
         updateEnvFile "DOCKERHUB_USER" "$DOCKERHUB_USER" "$DOCKER_ENV_PATH"
     fi
 
diff --git a/docker-compose-local.yml b/docker-compose-local.yml
index 5b7cba39e..6bc5ee309 100644
--- a/docker-compose-local.yml
+++ b/docker-compose-local.yml
@@ -63,63 +63,6 @@ services:
     ports:
       - "5432:5432"
 
-  # web:
-  #   build:
-  #     context: .
-  #     dockerfile: ./web/Dockerfile.dev
-  #   restart: unless-stopped
-  #   networks:
-  #     - dev_env
-  #   volumes:
-  #     - ./web:/app/web
-  #   env_file:
-  #     - ./web/.env
-  #   depends_on:
-  #     - api
-  #     - worker
-
-  # space:
-  #   build:
-  #     context: .
-  #     dockerfile: ./space/Dockerfile.dev
-  #   restart: unless-stopped
-  #   networks:
-  #     - dev_env
-  #   volumes:
-  #     - ./space:/app/space
-  #   depends_on:
-  #     - api
-  #     - worker
-  #     - web
-
-  # admin:
-  #   build:
-  #     context: .
-  #     dockerfile: ./admin/Dockerfile.dev
-  #   restart: unless-stopped
-  #   networks:
-  #     - dev_env
-  #   volumes:
-  #     - ./admin:/app/admin
-  #   depends_on:
-  #     - api
-  #     - worker
-  #     - web
-
-  # live:
-  #   build:
-  #     context: .
-  #     dockerfile: ./live/Dockerfile.dev
-  #   restart: unless-stopped
-  #   networks:
-  #     - dev_env
-  #   volumes:
-  #     - ./live:/app/live
-  #   depends_on:
-  #     - api
-  #     - worker
-  #     - web
-
   api:
     build:
       context: ./apps/api
@@ -197,27 +140,6 @@ services:
       - plane-db
       - plane-redis
 
-  # proxy:
-  #   build:
-  #     context: ./apps/proxy
-  #     dockerfile: Dockerfile.ce
-  #   restart: unless-stopped
-  #   networks:
-  #     - dev_env
-  #   ports:
-  #     - ${LISTEN_HTTP_PORT}:80
-  #     - ${LISTEN_HTTPS_PORT}:443
-  #   env_file:
-  #     - .env
-  #   environment:
-  #     FILE_SIZE_LIMIT: ${FILE_SIZE_LIMIT:-5242880}
-  #     BUCKET_NAME: ${AWS_S3_BUCKET_NAME:-uploads}
-  #   depends_on:
-  #     - api
-  #     - web
-  #     - space
-  #     - admin
-
 volumes:
   redisdata:
   uploads:
diff --git a/docs/eslint.md b/docs/eslint.md
deleted file mode 100644
index eeb7b81d3..000000000
--- a/docs/eslint.md
+++ /dev/null
@@ -1,103 +0,0 @@
-# ESLint in Plane - How It Works
-
-We've recently upgraded our ESLint setup to use **typed linting** with a **single root-level configuration**. This means faster lint runs and simpler config management across the entire monorepo.
-
-## Key Changes
-
-1. **Single Root Config** - Instead of individual `eslint.config.mjs` files in every package, we now have one config at the repo root that handles all packages and apps
-2. **Typed Linting Enabled** - ESLint now uses TypeScript's type information for more powerful checks (catching things like floating promises, unsafe any usage, etc.)
-3. **ESLint Flat Config** - We're using ESLint v9's new flat config format
-
-## How to Run ESLint
-
-From the root of the repo:
-
-```bash
-# Check for lint errors
-pnpm check:lint
-
-# Auto-fix lint errors
-pnpm fix:lint
-```
-
-## VS Code Integration
-
-ESLint should work automatically in VS Code. The extension will:
-
-- Show inline errors/warnings as you type
-- Use the root `eslint.config.mjs` for all files in the monorepo
-
-**Tip:** Make sure you have the [ESLint extension](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) installed.
-
-## What Gets Linted
-
-The config applies to all TypeScript and JavaScript files across:
-
-- `apps/web`, `apps/admin`, `apps/space`, `apps/live`
-- All packages in `packages/`
-
-**Ignored paths:**
-
-- `node_modules/`, `dist/`, `build/`, `.next/`, `.turbo/`
-- Config files (`*.config.{js,mjs,cjs,ts}`)
-- Public folders
-
-## Rules Overview
-
-We're enforcing warnings (not errors) for most rules during the transition period. Key categories:
-
-| Category          | What It Catches                                                                  |
-| ----------------- | -------------------------------------------------------------------------------- |
-| **TypeScript**    | `no-explicit-any`, `no-floating-promises`, `no-unsafe-*` family, unused vars     |
-| **React**         | Display names, hooks rules (including new React Compiler rules), refresh exports |
-| **Accessibility** | Alt text, keyboard events, ARIA roles, focus management                          |
-| **Imports**       | Type imports style (`prefer-top-level`), unresolved imports                      |
-| **Promises**      | Always return, catch-or-return                                                   |
-
-## Adding New Packages
-
-When creating a new package, **you don't need to add an ESLint config**. Just ensure:
-
-1. The package has a `tsconfig.json`
-2. The `tsconfig.json` is discoverable via the pattern `{apps,packages}/*/tsconfig.json`
-
-The root config will automatically pick it up.
-
-## Suppressing Warnings
-
-If you need to suppress a specific warning:
-
-```typescript
-// Single line
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const data: any = response;
-
-// Block
-/* eslint-disable @typescript-eslint/no-unsafe-assignment */
-// ... code
-/* eslint-enable @typescript-eslint/no-unsafe-assignment */
-```
-
-**Please use sparingly** - most warnings indicate real issues that should be fixed.
-
-## Pre-commit Hook
-
-Lint-staged runs automatically on commit via Husky:
-
-- Prettier formats your staged files
-- ESLint fixes what it can (with `--max-warnings=0`)
-
-If the commit fails due to lint errors, fix them before committing.
-
-## Reference Files
-
-- [eslint.config.mjs](../eslint.config.mjs) - Full ESLint configuration
-- [package.json](../package.json) - Available scripts
-
-## Help Us Improve!
-
-If you have the time, please consider trying to put up PRs to turn the rules I've set to `warn` to `error`, or getting all of strict mode in TypeScript working for a package (e.g., `noUncheckedIndexAccess`, `strictNullChecks`). It'll help prevent bugs at Plane, and your co-workers will unknowingly thank you for it.
-
-If you do decide to tackle this, please feel free to reach out to [@lifeiscontent](https://github.com/lifeiscontent) for advice on issues you get stuck on.
-
-Thanks!
diff --git a/docs/linting.md b/docs/linting.md
new file mode 100644
index 000000000..d5cdd7545
--- /dev/null
+++ b/docs/linting.md
@@ -0,0 +1,92 @@
+# Linting in Plane - How It Works
+
+We use [OxLint](https://oxc.rs/docs/guide/usage/linter) for linting across the entire monorepo. OxLint is a single Rust binary that's 50-100x faster than ESLint, with zero Node.js dependencies at runtime.
+
+## Key Points
+
+1. **Single Root Config** - One `.oxlintrc.json` at the repo root handles all packages and apps
+2. **No Build Required** - OxLint doesn't need TypeScript build artifacts, so lint runs independently of build
+3. **Plugin Coverage** - react, typescript, jsx-a11y, import, promise, unicorn, oxc
+
+## How to Run
+
+From the root of the repo:
+
+```bash
+# Check for lint errors
+pnpm check:lint
+
+# Auto-fix lint errors
+pnpm fix:lint
+```
+
+To lint a specific package:
+
+```bash
+pnpm turbo run check:lint --filter=@plane/ui
+```
+
+## VS Code Integration
+
+Install the [OxLint extension](https://marketplace.visualstudio.com/items?itemName=nicolo-ribaudo.vscode-oxlint) for inline errors/warnings as you type.
+
+## What Gets Linted
+
+The config applies to all TypeScript and JavaScript files across:
+
+- `apps/web`, `apps/admin`, `apps/space`, `apps/live`
+- All packages in `packages/`
+
+**Ignored paths:**
+
+- `node_modules/`, `dist/`, `build/`, `.next/`, `.turbo/`
+- Config files (`*.config.{js,mjs,cjs,ts}`)
+- Public folders, coverage, storybook-static
+
+## Rules Overview
+
+OxLint uses category-based configuration:
+
+| Category        | Level | What It Catches                                    |
+| --------------- | ----- | -------------------------------------------------- |
+| **correctness** | error | Real bugs that will cause runtime errors            |
+| **suspicious**  | warn  | Code patterns that are likely mistakes              |
+| **perf**        | warn  | Performance anti-patterns                           |
+
+Additional rule overrides:
+- `react/prop-types` off (TypeScript handles prop validation)
+- `no-unused-vars` warns with `_` prefix pattern ignored
+- Several noisy unicorn rules disabled
+
+## Backward Compatibility
+
+OxLint supports `eslint-disable` comments, so existing inline suppressions continue to work.
+
+## Suppressing Warnings
+
+```typescript
+// Single line
+// eslint-disable-next-line no-unused-vars
+const data = response;
+
+// Block
+/* eslint-disable no-unused-vars */
+// ... code
+/* eslint-enable no-unused-vars */
+```
+
+**Please use sparingly** - most warnings indicate real issues that should be fixed.
+
+## Pre-commit Hook
+
+Lint-staged runs automatically on commit via Husky:
+
+- oxfmt formats your staged files
+- OxLint fixes what it can (with `--deny-warnings`)
+
+If the commit fails due to lint errors, fix them before committing.
+
+## Reference Files
+
+- [.oxlintrc.json](../.oxlintrc.json) - OxLint configuration
+- [package.json](../package.json) - Available scripts
diff --git a/eslint.config.mjs b/eslint.config.mjs
deleted file mode 100644
index 17d859f7a..000000000
--- a/eslint.config.mjs
+++ /dev/null
@@ -1,178 +0,0 @@
-// @ts-check
-import { defineConfig, globalIgnores } from "eslint/config";
-
-import eslint from "@eslint/js";
-import tseslint from "typescript-eslint";
-
-import importPlugin from "eslint-plugin-import";
-import jsxA11yPlugin from "eslint-plugin-jsx-a11y";
-import promisePlugin from "eslint-plugin-promise";
-import reactPlugin from "eslint-plugin-react";
-import reactHooksPlugin from "eslint-plugin-react-hooks";
-import reactRefreshPlugin from "eslint-plugin-react-refresh";
-import vitestPlugin from "@vitest/eslint-plugin";
-// import storybookPlugin from "eslint-plugin-storybook";
-
-import prettierConfig from "eslint-config-prettier/flat";
-import globals from "globals";
-
-export default defineConfig([
-  globalIgnores([
-    "**/.cache/**",
-    "**/.env.*",
-    "**/.env",
-    "**/.next/**",
-    "**/.react-router/**",
-    "**/.storybook/**",
-    "**/.turbo/**",
-    "**/.vite/**",
-    "**/*.config.{js,mjs,cjs,ts}",
-    "**/build/**",
-    "**/coverage/**",
-    "**/dist/**",
-    "**/node_modules/**",
-    "**/public/**",
-  ]),
-  eslint.configs.recommended,
-  // @ts-expect-error promise plugin has no flat type definitions
-  promisePlugin.configs["flat/recommended"],
-  reactPlugin.configs.flat.recommended,
-  reactPlugin.configs.flat["jsx-runtime"],
-  reactHooksPlugin.configs.flat.recommended,
-  jsxA11yPlugin.flatConfigs.recommended,
-  reactRefreshPlugin.configs.recommended,
-  reactRefreshPlugin.configs.vite,
-  tseslint.configs.recommendedTypeChecked,
-  vitestPlugin.configs.recommended,
-  // TODO: enable storybook linting once issues are resolved
-  // storybookPlugin.configs["flat/recommended"],
-  {
-    settings: {
-      react: {
-        version: "detect",
-      },
-    },
-    languageOptions: {
-      parserOptions: {
-        ecmaFeatures: {
-          jsx: true,
-        },
-        // @ts-ignore
-        tsconfigRootDir: import.meta.dirname,
-        projectService: true,
-      },
-    },
-    rules: {
-      "@typescript-eslint/await-thenable": "warn",
-      "@typescript-eslint/no-base-to-string": "warn",
-      "@typescript-eslint/no-duplicate-type-constituents": "warn",
-      "@typescript-eslint/no-explicit-any": "warn",
-      "@typescript-eslint/no-floating-promises": "warn",
-      "@typescript-eslint/no-for-in-array": "warn",
-      "@typescript-eslint/no-import-type-side-effects": "error",
-      "@typescript-eslint/no-misused-promises": "warn",
-      "@typescript-eslint/no-redundant-type-constituents": "warn",
-      "@typescript-eslint/no-unnecessary-type-assertion": "warn",
-      "@typescript-eslint/no-unsafe-argument": "warn",
-      "@typescript-eslint/no-unsafe-assignment": "warn",
-      "@typescript-eslint/no-unsafe-call": "warn",
-      "@typescript-eslint/no-unsafe-enum-comparison": "warn",
-      "@typescript-eslint/no-unsafe-member-access": "warn",
-      "@typescript-eslint/no-unsafe-return": "warn",
-      "@typescript-eslint/no-unused-expressions": "warn",
-      "@typescript-eslint/no-unused-vars": [
-        "warn",
-        {
-          args: "all",
-          argsIgnorePattern: "^_",
-          caughtErrors: "all",
-          caughtErrorsIgnorePattern: "^_",
-          destructuredArrayIgnorePattern: "^_",
-          varsIgnorePattern: "^_",
-          ignoreRestSiblings: true,
-        },
-      ],
-      "@typescript-eslint/only-throw-error": "warn",
-      "@typescript-eslint/prefer-promise-reject-errors": "warn",
-      "@typescript-eslint/require-await": "warn",
-      "@typescript-eslint/restrict-plus-operands": "warn",
-      "@typescript-eslint/restrict-template-expressions": "warn",
-      "@typescript-eslint/unbound-method": "warn",
-      "import/consistent-type-specifier-style": ["error", "prefer-top-level"],
-      "jsdoc/require-jsdoc": "off",
-      "jsx-a11y/alt-text": "warn",
-      "jsx-a11y/anchor-is-valid": "warn",
-      "jsx-a11y/click-events-have-key-events": "warn",
-      "jsx-a11y/iframe-has-title": "warn",
-      "jsx-a11y/img-redundant-alt": "warn",
-      "jsx-a11y/interactive-supports-focus": "warn",
-      "jsx-a11y/label-has-associated-control": "warn",
-      "jsx-a11y/mouse-events-have-key-events": "warn",
-      "jsx-a11y/no-autofocus": "warn",
-      "jsx-a11y/no-noninteractive-element-interactions": "warn",
-      "jsx-a11y/no-noninteractive-element-to-interactive-role": "warn",
-      "jsx-a11y/no-noninteractive-tabindex": "warn",
-      "jsx-a11y/no-redundant-roles": "warn",
-      "jsx-a11y/no-static-element-interactions": "warn",
-      "jsx-a11y/tabindex-no-positive": "warn",
-      "no-cond-assign": "warn",
-      "no-constant-binary-expression": "warn",
-      "no-empty-pattern": "warn",
-      "no-empty": "warn",
-      "no-extra-boolean-cast": "warn",
-      "no-prototype-builtins": "warn",
-      "no-unsafe-optional-chaining": "warn",
-      "no-useless-catch": "warn",
-      "no-useless-escape": "warn",
-      "promise/always-return": "warn",
-      "promise/catch-or-return": "warn",
-      "promise/param-names": "warn",
-      "react-hooks/immutability": "warn",
-      "react-hooks/preserve-manual-memoization": "warn",
-      "react-hooks/purity": "warn",
-      "react-hooks/refs": "warn",
-      "react-hooks/rules-of-hooks": "warn",
-      "react-hooks/set-state-in-effect": "warn",
-      "react-hooks/static-components": "warn",
-      "react-refresh/only-export-components": "warn",
-      "react/display-name": "warn",
-      "react/jsx-no-target-blank": "warn",
-      "react/no-unknown-property": "warn",
-      "react/prop-types": "off",
-      "valid-typeof": "warn",
-    },
-  },
-  {
-    files: ["**/*.{ts,tsx}"],
-    extends: [importPlugin.flatConfigs.recommended, importPlugin.flatConfigs.typescript],
-    settings: {
-      "import/ignore": ["next/link", "next/navigation", "next/script"],
-      "import/resolver": {
-        typescript: {
-          alwaysTryTypes: true,
-          project: "{apps,packages}/*/tsconfig.json",
-        },
-      },
-      "import/internal-regex": "^@plane/",
-    },
-    rules: {
-      "import/no-unresolved": ["error", { ignore: ["next/link", "next/navigation", "next/script"] }],
-    },
-  },
-  {
-    files: ["**/*.{js,mjs,cjs,jsx}"],
-    extends: [tseslint.configs.disableTypeChecked],
-  },
-  {
-    files: ["**/*.cjs"],
-    languageOptions: {
-      globals: {
-        ...globals.node,
-      },
-    },
-    rules: {
-      "@typescript-eslint/no-require-imports": "off",
-    },
-  },
-  prettierConfig,
-]);
diff --git a/package.json b/package.json
index 999e41411..ec1fdbc00 100644
--- a/package.json
+++ b/package.json
@@ -1,10 +1,10 @@
 {
   "name": "plane",
-  "description": "Open-source project management that unlocks customer value",
-  "repository": "https://github.com/makeplane/plane.git",
-  "version": "1.2.3",
-  "license": "AGPL-3.0",
+  "version": "1.3.0",
   "private": true,
+  "description": "Open-source project management that unlocks customer value",
+  "license": "AGPL-3.0",
+  "repository": "https://github.com/makeplane/plane.git",
   "scripts": {
     "build": "turbo run build",
     "dev": "turbo run dev --concurrency=18",
@@ -20,36 +20,24 @@
     "prepare": "husky"
   },
   "devDependencies": {
-    "@eslint/js": "9.39.1",
-    "@prettier/plugin-oxc": "0.1.3",
-    "@vitest/eslint-plugin": "1.5.1",
-    "eslint": "9.39.1",
-    "eslint-config-prettier": "10.1.8",
-    "eslint-import-resolver-node": "0.3.9",
-    "eslint-import-resolver-typescript": "4.4.4",
-    "eslint-plugin-import": "2.32.0",
-    "eslint-plugin-jsx-a11y": "6.10.2",
-    "eslint-plugin-n": "17.23.1",
-    "eslint-plugin-promise": "7.2.1",
-    "eslint-plugin-react": "7.37.5",
-    "eslint-plugin-react-hooks": "7.0.1",
-    "eslint-plugin-react-refresh": "0.4.24",
-    "eslint-plugin-storybook": "10.1.4",
-    "globals": "16.5.0",
     "husky": "9.1.7",
     "lint-staged": "16.2.7",
-    "prettier": "3.7.4",
-    "turbo": "2.6.3",
-    "typescript-eslint": "8.48.1"
+    "oxfmt": "0.35.0",
+    "oxlint": "1.51.0",
+    "turbo": "2.9.4"
   },
   "lint-staged": {
     "*.{js,jsx,ts,tsx,cjs,mjs,cts,mts,json,css,md}": [
-      "pnpm exec prettier --write --ignore-unknown"
+      "pnpm exec oxfmt --no-error-on-unmatched-pattern"
     ],
     "*.{js,jsx,ts,tsx,cjs,mjs,cts,mts}": [
-      "pnpm exec eslint --fix --max-warnings=0 --no-warn-ignored"
+      "pnpm exec oxlint --fix --deny-warnings"
     ]
   },
+  "engines": {
+    "node": ">=22.18.0"
+  },
+  "packageManager": "pnpm@10.32.1+sha512.a706938f0e89ac1456b6563eab4edf1d1faf3368d1191fc5c59790e96dc918e4456ab2e67d613de1043d2e8c81f87303e6b40d4ffeca9df15ef1ad567348f2be",
   "pnpm": {
     "overrides": {
       "express": "catalog:",
@@ -57,7 +45,7 @@
       "valibot": "1.2.0",
       "glob": "11.1.0",
       "js-yaml": "4.1.1",
-      "brace-expansion": "2.0.2",
+      "brace-expansion": "5.0.5",
       "nanoid": "3.3.8",
       "esbuild": "0.25.0",
       "@babel/helpers": "7.26.10",
@@ -68,18 +56,37 @@
       "prosemirror-view": "1.40.0",
       "@types/express": "4.17.23",
       "typescript": "catalog:",
-      "vite": "catalog:"
+      "vite": "catalog:",
+      "qs": "6.14.2",
+      "diff": "5.2.2",
+      "webpack": "5.104.1",
+      "lodash-es": "catalog:",
+      "@isaacs/brace-expansion": "5.0.1",
+      "lodash": "4.17.23",
+      "markdown-it": "14.1.1",
+      "rollup": "4.59.0",
+      "minimatch@3": "3.1.4",
+      "minimatch@10": "10.2.3",
+      "serialize-javascript": "7.0.5",
+      "ajv@6": "6.14.0",
+      "ajv@8": "8.18.0",
+      "undici@7": "7.24.0",
+      "flatted": "3.4.2",
+      "picomatch": "2.3.2",
+      "yaml@1": "1.10.3",
+      "yaml@2": "2.8.3",
+      "path-to-regexp": "0.1.13",
+      "defu": "6.1.5"
     },
     "onlyBuiltDependencies": [
-      "@sentry/cli",
+      "@parcel/watcher",
+      "@swc/core",
+      "esbuild",
+      "msgpackr-extract",
       "turbo"
     ],
     "ignoredBuiltDependencies": [
       "sharp"
     ]
-  },
-  "packageManager": "pnpm@10.24.0+sha512.01ff8ae71b4419903b65c60fb2dc9d34cf8bb6e06d03bde112ef38f7a34d6904c424ba66bea5cdcf12890230bf39f9580473140ed9c946fef328b6e5238a345a",
-  "engines": {
-    "node": ">=22.18.0"
   }
 }
diff --git a/packages/codemods/function-declaration.ts b/packages/codemods/function-declaration.ts
index 45f185053..40897d802 100644
--- a/packages/codemods/function-declaration.ts
+++ b/packages/codemods/function-declaration.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { CommentKind } from "ast-types/gen/kinds";
 import {
   API,
diff --git a/packages/codemods/instructions.md b/packages/codemods/instructions.md
index 4848c203a..18212ba0c 100644
--- a/packages/codemods/instructions.md
+++ b/packages/codemods/instructions.md
@@ -62,7 +62,9 @@ Retrieves variable declarators from the current collection.
 - **Parameters**: `callback` (Function)
 - **Example**:
   ```javascript
-  const variableDeclarators = j.find(j.Identifier).getVariableDeclarators((path) => path.value.name);
+  const variableDeclarators = j
+    .find(j.Identifier)
+    .getVariableDeclarators((path) => path.value.name);
   ```
 
 #### `findVariableDeclarators`
@@ -82,7 +84,9 @@ Filters nodes based on a predicate function.
 - **Parameters**: `predicate` (Function)
 - **Example**:
   ```javascript
-  const constDeclarations = j.find(j.VariableDeclaration).filter((path) => path.node.kind === "const");
+  const constDeclarations = j
+    .find(j.VariableDeclaration)
+    .filter((path) => path.node.kind === "const");
   ```
 
 #### `forEach`
@@ -104,7 +108,9 @@ Checks if at least one element in the collection passes the test.
 - **Parameters**: `callback` (Function)
 - **Example**:
   ```javascript
-  const hasVariableA = root.find(j.VariableDeclarator).some((path) => path.node.id.name === "a");
+  const hasVariableA = root
+    .find(j.VariableDeclarator)
+    .some((path) => path.node.id.name === "a");
   ```
 
 #### `every`
@@ -114,7 +120,9 @@ Checks if all elements in the collection pass the test.
 - **Parameters**: `callback` (Function)
 - **Example**:
   ```javascript
-  const allAreConst = root.find(j.VariableDeclaration).every((path) => path.node.kind === "const");
+  const allAreConst = root
+    .find(j.VariableDeclaration)
+    .every((path) => path.node.kind === "const");
   ```
 
 #### `map`
@@ -124,7 +132,9 @@ Maps each node in the collection to a new value.
 - **Parameters**: `callback` (Function)
 - **Example**:
   ```javascript
-  const variableNames = j.find(j.VariableDeclaration).map((path) => path.node.declarations.map((decl) => decl.id.name));
+  const variableNames = j
+    .find(j.VariableDeclaration)
+    .map((path) => path.node.declarations.map((decl) => decl.id.name));
   ```
 
 #### `size`
@@ -207,7 +217,10 @@ Checks if the node in the collection is of a specific type.
 - **Parameters**: `type` (String)
 - **Example**:
   ```javascript
-  const isVariableDeclarator = root.find(j.VariableDeclarator).at(0).isOfType("VariableDeclarator");
+  const isVariableDeclarator = root
+    .find(j.VariableDeclarator)
+    .at(0)
+    .isOfType("VariableDeclarator");
   ```
 
 ### Node Transformation APIs
@@ -219,7 +232,9 @@ Replaces the current node(s) with a new node.
 - **Parameters**: `newNode` (Node or Function)
 - **Example**:
   ```javascript
-  j.find(j.Identifier).replaceWith((path) => j.identifier(path.node.name.toUpperCase()));
+  j.find(j.Identifier).replaceWith((path) =>
+    j.identifier(path.node.name.toUpperCase())
+  );
   ```
 
 #### `insertBefore`
@@ -229,7 +244,9 @@ Inserts a node before the current node.
 - **Parameters**: `newNode` (Node)
 - **Example**:
   ```javascript
-  j.find(j.FunctionDeclaration).insertBefore(j.expressionStatement(j.stringLiteral("Inserted before")));
+  j.find(j.FunctionDeclaration).insertBefore(
+    j.expressionStatement(j.stringLiteral("Inserted before"))
+  );
   ```
 
 #### `insertAfter`
@@ -239,7 +256,9 @@ Inserts a node after the current node.
 - **Parameters**: `newNode` (Node)
 - **Example**:
   ```javascript
-  j.find(j.FunctionDeclaration).insertAfter(j.expressionStatement(j.stringLiteral("Inserted after")));
+  j.find(j.FunctionDeclaration).insertAfter(
+    j.expressionStatement(j.stringLiteral("Inserted after"))
+  );
   ```
 
 #### `remove`
diff --git a/packages/codemods/package.json b/packages/codemods/package.json
index 31b481c34..e335d735b 100644
--- a/packages/codemods/package.json
+++ b/packages/codemods/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@plane/codemods",
-  "version": "1.2.3",
+  "version": "1.3.0",
   "private": true,
   "scripts": {
     "test": "vitest run",
diff --git a/packages/codemods/remove-directives.ts b/packages/codemods/remove-directives.ts
index 3e1e48ca8..5848fa3c2 100644
--- a/packages/codemods/remove-directives.ts
+++ b/packages/codemods/remove-directives.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { API, FileInfo, Options } from "jscodeshift";
 import type { CommentKind, DirectiveKind } from "ast-types/gen/kinds";
 
diff --git a/packages/codemods/tests/function-declaration.spec.ts b/packages/codemods/tests/function-declaration.spec.ts
index 31473548a..7fe5b00f1 100644
--- a/packages/codemods/tests/function-declaration.spec.ts
+++ b/packages/codemods/tests/function-declaration.spec.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { describe, it, expect } from "vitest";
 import { applyTransform } from "@hypermod/utils";
 import * as transformer from "../function-declaration";
diff --git a/packages/codemods/tests/remove-directives.spec.ts b/packages/codemods/tests/remove-directives.spec.ts
index 8dfe6bd42..231236ac4 100644
--- a/packages/codemods/tests/remove-directives.spec.ts
+++ b/packages/codemods/tests/remove-directives.spec.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { describe, it, expect } from "vitest";
 import { applyTransform } from "@hypermod/utils";
 import * as transformer from "../remove-directives";
diff --git a/packages/constants/package.json b/packages/constants/package.json
index 4ac4d295d..dabdd1612 100644
--- a/packages/constants/package.json
+++ b/packages/constants/package.json
@@ -1,17 +1,24 @@
 {
   "name": "@plane/constants",
-  "version": "1.2.3",
+  "version": "1.3.0",
   "private": true,
   "license": "AGPL-3.0",
   "type": "module",
+  "main": "./dist/index.mjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.mts",
+  "exports": {
+    ".": "./dist/index.mjs",
+    "./package.json": "./package.json"
+  },
   "scripts": {
-    "dev": "tsdown --watch",
+    "dev": "tsdown --watch --no-clean",
     "build": "tsdown",
-    "check:lint": "eslint . --max-warnings=30",
+    "check:lint": "oxlint --max-warnings=2 .",
     "check:types": "tsc --noEmit",
-    "check:format": "prettier --check .",
-    "fix:lint": "eslint . --fix --max-warnings=30",
-    "fix:format": "prettier --write .",
+    "check:format": "oxfmt --check .",
+    "fix:lint": "oxlint --fix .",
+    "fix:format": "oxfmt .",
     "clean": "rm -rf .turbo && rm -rf .next && rm -rf node_modules && rm -rf dist"
   },
   "dependencies": {
@@ -23,12 +30,5 @@
     "@types/react": "catalog:",
     "tsdown": "catalog:",
     "typescript": "catalog:"
-  },
-  "main": "./dist/index.mjs",
-  "module": "./dist/index.mjs",
-  "types": "./dist/index.d.mts",
-  "exports": {
-    ".": "./dist/index.mjs",
-    "./package.json": "./package.json"
   }
 }
diff --git a/packages/constants/src/ai.ts b/packages/constants/src/ai.ts
index 812530244..94c859222 100644
--- a/packages/constants/src/ai.ts
+++ b/packages/constants/src/ai.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export enum AI_EDITOR_TASKS {
   ASK_ANYTHING = "ASK_ANYTHING",
 }
diff --git a/packages/constants/src/analytics/common.ts b/packages/constants/src/analytics/common.ts
index a51ceac4d..01c56d155 100644
--- a/packages/constants/src/analytics/common.ts
+++ b/packages/constants/src/analytics/common.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { TAnalyticsTabsBase } from "@plane/types";
 import { ChartXAxisProperty, ChartYAxisMetric } from "@plane/types";
 
diff --git a/packages/constants/src/analytics/index.ts b/packages/constants/src/analytics/index.ts
index 6b5716089..5d755bea3 100644
--- a/packages/constants/src/analytics/index.ts
+++ b/packages/constants/src/analytics/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./common";
diff --git a/packages/constants/src/auth/core.ts b/packages/constants/src/auth/core.ts
index a76934879..a6a26c69f 100644
--- a/packages/constants/src/auth/core.ts
+++ b/packages/constants/src/auth/core.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { TCoreLoginMediums } from "@plane/types";
 
 export const CORE_LOGIN_MEDIUM_LABELS: Record<TCoreLoginMediums, string> = {
diff --git a/packages/constants/src/auth/extended.ts b/packages/constants/src/auth/extended.ts
index 97eb974bd..aaf067a4b 100644
--- a/packages/constants/src/auth/extended.ts
+++ b/packages/constants/src/auth/extended.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { TExtendedLoginMediums } from "@plane/types";
 
 export const EXTENDED_LOGIN_MEDIUM_LABELS: Record<TExtendedLoginMediums, string> = {};
diff --git a/packages/constants/src/auth/index.ts b/packages/constants/src/auth/index.ts
index 2c52598e3..32a7d5eee 100644
--- a/packages/constants/src/auth/index.ts
+++ b/packages/constants/src/auth/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { TLoginMediums } from "@plane/types";
 import { CORE_LOGIN_MEDIUM_LABELS } from "./core";
 import { EXTENDED_LOGIN_MEDIUM_LABELS } from "./extended";
@@ -108,6 +114,7 @@ export enum EAuthErrorCodes {
   USER_ACCOUNT_DEACTIVATED = "5019",
   // Password strength
   INVALID_PASSWORD = "5020",
+  PASSWORD_TOO_WEAK = "5021",
   SMTP_NOT_CONFIGURED = "5025",
   // Sign Up
   USER_ALREADY_EXIST = "5030",
diff --git a/packages/constants/src/chart.ts b/packages/constants/src/chart.ts
index 67141cd57..8a002a54f 100644
--- a/packages/constants/src/chart.ts
+++ b/packages/constants/src/chart.ts
@@ -1,8 +1,14 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { TChartColorScheme } from "@plane/types";
 import { ChartXAxisProperty } from "@plane/types";
 
-export const LABEL_CLASSNAME = "uppercase text-custom-text-300/60 text-sm tracking-wide";
-export const AXIS_LABEL_CLASSNAME = "uppercase text-custom-text-300/60 text-sm tracking-wide";
+export const LABEL_CLASSNAME = "uppercase text-tertiary/60 text-13 tracking-wide";
+export const AXIS_LABEL_CLASSNAME = "uppercase text-tertiary/60 text-13 tracking-wide";
 
 export enum ChartXAxisDateGrouping {
   DAY = "DAY",
diff --git a/packages/constants/src/cycle.ts b/packages/constants/src/cycle.ts
index 752f23dbe..253a8cf69 100644
--- a/packages/constants/src/cycle.ts
+++ b/packages/constants/src/cycle.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // types
 export const CYCLE_STATUS: {
   i18n_label: string;
@@ -28,15 +34,15 @@ export const CYCLE_STATUS: {
     value: "completed",
     i18n_title: "project_cycles.status.completed",
     color: "#16A34A",
-    textColor: "text-green-600",
-    bgColor: "bg-green-50",
+    textColor: "text-success-primary",
+    bgColor: "bg-success-subtle",
   },
   {
     i18n_label: "project_cycles.status.draft",
     value: "draft",
     i18n_title: "project_cycles.status.draft",
     color: "#525252",
-    textColor: "text-custom-text-300",
-    bgColor: "bg-custom-background-90",
+    textColor: "text-tertiary",
+    bgColor: "bg-surface-2",
   },
 ];
diff --git a/packages/constants/src/dashboard.ts b/packages/constants/src/dashboard.ts
index f79bb7c41..dbc097c7f 100644
--- a/packages/constants/src/dashboard.ts
+++ b/packages/constants/src/dashboard.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // types
 import type { TIssuesListTypes } from "@plane/types";
 
@@ -44,8 +50,8 @@ export const DURATION_FILTER_OPTIONS: {
 // random background colors for project cards
 export const PROJECT_BACKGROUND_COLORS = [
   "bg-gray-500/20",
-  "bg-green-500/20",
-  "bg-red-500/20",
+  "bg-success-subtle",
+  "bg-danger-subtle",
   "bg-orange-500/20",
   "bg-blue-500/20",
   "bg-yellow-500/20",
diff --git a/packages/constants/src/emoji.ts b/packages/constants/src/emoji.ts
index 9ba145e1c..1fcc864c0 100644
--- a/packages/constants/src/emoji.ts
+++ b/packages/constants/src/emoji.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export const ISSUE_REACTION_EMOJI_CODES = [
   "128077",
   "128078",
diff --git a/packages/constants/src/endpoints.ts b/packages/constants/src/endpoints.ts
index f077c1ff9..630f07eba 100644
--- a/packages/constants/src/endpoints.ts
+++ b/packages/constants/src/endpoints.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export const API_BASE_URL = process.env.VITE_API_BASE_URL || "";
 export const API_BASE_PATH = process.env.VITE_API_BASE_PATH || "";
 export const API_URL = encodeURI(`${API_BASE_URL}${API_BASE_PATH}`);
diff --git a/packages/constants/src/estimates.ts b/packages/constants/src/estimates.ts
index 092b6b0fb..d8145b7d5 100644
--- a/packages/constants/src/estimates.ts
+++ b/packages/constants/src/estimates.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // plane imports
 import type { TEstimateSystems } from "@plane/types";
 
diff --git a/packages/constants/src/event-tracker/core.ts b/packages/constants/src/event-tracker/core.ts
index e2d305052..7a262088a 100644
--- a/packages/constants/src/event-tracker/core.ts
+++ b/packages/constants/src/event-tracker/core.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { EProductSubscriptionEnum } from "@plane/types";
 
 /**
diff --git a/packages/constants/src/event-tracker/index.ts b/packages/constants/src/event-tracker/index.ts
index 8d119dee8..bcdcb87a1 100644
--- a/packages/constants/src/event-tracker/index.ts
+++ b/packages/constants/src/event-tracker/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./core";
diff --git a/packages/constants/src/file.ts b/packages/constants/src/file.ts
index 9de3b0356..bd784e051 100644
--- a/packages/constants/src/file.ts
+++ b/packages/constants/src/file.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export const MAX_FILE_SIZE = 5 * 1024 * 1024; // 5MB
 
 export const ACCEPTED_AVATAR_IMAGE_MIME_TYPES_FOR_REACT_DROPZONE = {
@@ -12,3 +18,22 @@ export const ACCEPTED_COVER_IMAGE_MIME_TYPES_FOR_REACT_DROPZONE = {
   "image/png": [],
   "image/webp": [],
 };
+
+/**
+ * Dangerous file extensions that should be blocked
+ */
+export const DANGEROUS_EXTENSIONS = [
+  "exe",
+  "bat",
+  "cmd",
+  "sh",
+  "php",
+  "asp",
+  "aspx",
+  "jsp",
+  "cgi",
+  "dll",
+  "vbs",
+  "jar",
+  "ps1",
+];
diff --git a/packages/constants/src/filter.ts b/packages/constants/src/filter.ts
index cc8d98c45..9141a2b5d 100644
--- a/packages/constants/src/filter.ts
+++ b/packages/constants/src/filter.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export enum E_SORT_ORDER {
   ASC = "asc",
   DESC = "desc",
diff --git a/packages/constants/src/graph.ts b/packages/constants/src/graph.ts
index 1ed7e4f9d..6ae605354 100644
--- a/packages/constants/src/graph.ts
+++ b/packages/constants/src/graph.ts
@@ -1,27 +1,33 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export const CHARTS_THEME = {
   background: "transparent",
   text: {
-    color: "rgb(var(--color-text-200))",
+    color: "var(--text-color-secondary)",
   },
   axis: {
     domain: {
       line: {
-        stroke: "rgb(var(--color-background-80))",
+        stroke: "var(--background-color-layer-2)",
         strokeWidth: 0.5,
       },
     },
   },
   tooltip: {
     container: {
-      background: "rgb(var(--color-background-80))",
-      color: "rgb(var(--color-text-200))",
+      background: "var(--background-color-layer-2)",
+      color: "var(--text-color-secondary)",
       fontSize: "0.8rem",
-      border: "1px solid rgb(var(--color-border-300))",
+      border: "1px solid var(--border-color-strong)",
     },
   },
   grid: {
     line: {
-      stroke: "rgb(var(--color-border-100))",
+      stroke: "var(--border-color-subtle)",
     },
   },
 };
diff --git a/packages/constants/src/icon.ts b/packages/constants/src/icon.ts
index 3ee66e31e..06dfa291e 100644
--- a/packages/constants/src/icon.ts
+++ b/packages/constants/src/icon.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export enum EIconSize {
   XS = "xs",
   SM = "sm",
diff --git a/packages/constants/src/index.ts b/packages/constants/src/index.ts
index 7c33d5d3a..822c4e770 100644
--- a/packages/constants/src/index.ts
+++ b/packages/constants/src/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./ai";
 export * from "./analytics";
 export * from "./auth";
diff --git a/packages/constants/src/instance.ts b/packages/constants/src/instance.ts
index f929b2211..29931a7e4 100644
--- a/packages/constants/src/instance.ts
+++ b/packages/constants/src/instance.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export enum EInstanceStatus {
   ERROR = "ERROR",
   NOT_YET_READY = "NOT_YET_READY",
diff --git a/packages/constants/src/intake.ts b/packages/constants/src/intake.ts
index 2dd5fe6ae..40ef3862b 100644
--- a/packages/constants/src/intake.ts
+++ b/packages/constants/src/intake.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { TInboxIssueStatus } from "@plane/types";
 import { EInboxIssueStatus } from "@plane/types";
 
diff --git a/packages/constants/src/issue/common.ts b/packages/constants/src/issue/common.ts
index 43460b051..fe56c44f8 100644
--- a/packages/constants/src/issue/common.ts
+++ b/packages/constants/src/issue/common.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type {
   TIssueGroupByOptions,
   TIssueOrderByOptions,
@@ -169,10 +175,6 @@ export const ISSUE_DISPLAY_PROPERTIES: {
     key: "key",
     titleTranslationKey: "issue.display.properties.id",
   },
-  {
-    key: "issue_type",
-    titleTranslationKey: "issue.display.properties.issue_type",
-  },
   {
     key: "assignee",
     titleTranslationKey: "common.assignee",
diff --git a/packages/constants/src/issue/filter.ts b/packages/constants/src/issue/filter.ts
index 54775ac55..115b8856f 100644
--- a/packages/constants/src/issue/filter.ts
+++ b/packages/constants/src/issue/filter.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type {
   IIssueFilterOptions,
   ILayoutDisplayFiltersOptions,
@@ -61,31 +67,31 @@ export const ISSUE_PRIORITY_FILTERS: TIssueFilterPriorityObject[] = [
   {
     key: "urgent",
     titleTranslationKey: "issue.priority.urgent",
-    className: "bg-red-500 border-red-500 text-white",
+    className: "bg-layer-2 text-priority-urgent border-strong",
     icon: "error",
   },
   {
     key: "high",
     titleTranslationKey: "issue.priority.high",
-    className: "text-orange-500 border-custom-border-300",
+    className: "bg-layer-2 text-priority-high border-strong",
     icon: "signal_cellular_alt",
   },
   {
     key: "medium",
     titleTranslationKey: "issue.priority.medium",
-    className: "text-yellow-500 border-custom-border-300",
+    className: "bg-layer-2 text-priority-medium border-strong",
     icon: "signal_cellular_alt_2_bar",
   },
   {
     key: "low",
     titleTranslationKey: "issue.priority.low",
-    className: "text-green-500 border-custom-border-300",
+    className: "bg-layer-2 text-priority-low border-strong",
     icon: "signal_cellular_alt_1_bar",
   },
   {
     key: "none",
     titleTranslationKey: "common.none",
-    className: "text-gray-500 border-custom-border-300",
+    className: "bg-layer-2 text-priority-none border-strong",
     icon: "block",
   },
 ];
@@ -353,3 +359,10 @@ export const filterActivityOnSelectedFilters = (
   });
 
 export const ENABLE_ISSUE_DEPENDENCIES = false;
+
+export const BASE_ACTIVITY_FILTER_TYPES = [
+  EActivityFilterType.ACTIVITY,
+  EActivityFilterType.STATE,
+  EActivityFilterType.ASSIGNEE,
+  EActivityFilterType.DEFAULT,
+];
diff --git a/packages/constants/src/issue/index.ts b/packages/constants/src/issue/index.ts
index c5cf79081..d5660c674 100644
--- a/packages/constants/src/issue/index.ts
+++ b/packages/constants/src/issue/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./common";
 export * from "./filter";
 export * from "./layout";
diff --git a/packages/constants/src/issue/layout.ts b/packages/constants/src/issue/layout.ts
index 88b740606..a64954342 100644
--- a/packages/constants/src/issue/layout.ts
+++ b/packages/constants/src/issue/layout.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { EIssueLayoutTypes } from "@plane/types";
 
 export type TIssueLayout = "list" | "kanban" | "calendar" | "spreadsheet" | "gantt";
diff --git a/packages/constants/src/issue/modal.ts b/packages/constants/src/issue/modal.ts
index 0a356ddf1..b5ce1f8a2 100644
--- a/packages/constants/src/issue/modal.ts
+++ b/packages/constants/src/issue/modal.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // plane imports
 import type { TIssue } from "@plane/types";
 
diff --git a/packages/constants/src/label.ts b/packages/constants/src/label.ts
index 220e56209..37c360e79 100644
--- a/packages/constants/src/label.ts
+++ b/packages/constants/src/label.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export const LABEL_COLOR_OPTIONS = [
   "#FF6900",
   "#FCB900",
diff --git a/packages/constants/src/members.ts b/packages/constants/src/members.ts
index 355ae81e3..94e1c5199 100644
--- a/packages/constants/src/members.ts
+++ b/packages/constants/src/members.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // Member property constants - Single source of truth for member spreadsheet properties
 
 export type TMemberOrderByOptions =
diff --git a/packages/constants/src/metadata.ts b/packages/constants/src/metadata.ts
index 5bd6e36b4..c44e44105 100644
--- a/packages/constants/src/metadata.ts
+++ b/packages/constants/src/metadata.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export const SITE_NAME = "Plane | Simple, extensible, open-source project management tool.";
 export const SITE_TITLE = "Plane | Simple, extensible, open-source project management tool.";
 export const SITE_DESCRIPTION =
diff --git a/packages/constants/src/module.ts b/packages/constants/src/module.ts
index 1d9a7ab96..b03618079 100644
--- a/packages/constants/src/module.ts
+++ b/packages/constants/src/module.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // types
 import type { TModuleLayoutOptions, TModuleOrderByOptions, TModuleStatus } from "@plane/types";
 
@@ -23,8 +29,8 @@ export const MODULE_STATUS: {
     i18n_label: "project_modules.status.backlog",
     value: "backlog",
     color: MODULE_STATUS_COLORS.backlog,
-    textColor: "text-custom-text-400",
-    bgColor: "bg-custom-background-80",
+    textColor: "text-placeholder",
+    bgColor: "bg-layer-1",
   },
   {
     i18n_label: "project_modules.status.planned",
@@ -44,22 +50,22 @@ export const MODULE_STATUS: {
     i18n_label: "project_modules.status.paused",
     value: "paused",
     color: MODULE_STATUS_COLORS.paused,
-    textColor: "text-custom-text-300",
-    bgColor: "bg-custom-background-90",
+    textColor: "text-tertiary",
+    bgColor: "bg-surface-2",
   },
   {
     i18n_label: "project_modules.status.completed",
     value: "completed",
     color: MODULE_STATUS_COLORS.completed,
-    textColor: "text-green-600",
-    bgColor: "bg-green-100",
+    textColor: "text-success-primary",
+    bgColor: "bg-success-subtle",
   },
   {
     i18n_label: "project_modules.status.cancelled",
     value: "cancelled",
     color: MODULE_STATUS_COLORS.cancelled,
-    textColor: "text-red-500",
-    bgColor: "bg-red-50",
+    textColor: "text-danger-primary",
+    bgColor: "bg-danger-subtle",
   },
 ];
 
diff --git a/packages/constants/src/notification.ts b/packages/constants/src/notification.ts
index 6d2aec2bd..9c560f76d 100644
--- a/packages/constants/src/notification.ts
+++ b/packages/constants/src/notification.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { TUnreadNotificationsCount } from "@plane/types";
 
 export enum ENotificationTab {
diff --git a/packages/constants/src/page.ts b/packages/constants/src/page.ts
index 182cff40e..39f0e5d35 100644
--- a/packages/constants/src/page.ts
+++ b/packages/constants/src/page.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export enum EPageAccess {
   PUBLIC = 0,
   PRIVATE = 1,
diff --git a/packages/constants/src/payment.ts b/packages/constants/src/payment.ts
index 1c08f45a9..19fab65b2 100644
--- a/packages/constants/src/payment.ts
+++ b/packages/constants/src/payment.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { IPaymentProduct, TBillingFrequency, TProductBillingFrequency } from "@plane/types";
 import { EProductSubscriptionEnum } from "@plane/types";
 
diff --git a/packages/constants/src/profile.ts b/packages/constants/src/profile.ts
index cb90d62d3..5af277028 100644
--- a/packages/constants/src/profile.ts
+++ b/packages/constants/src/profile.ts
@@ -1,56 +1,11 @@
-import { EStartOfTheWeek } from "@plane/types";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
 
-export const PROFILE_SETTINGS = {
-  profile: {
-    key: "profile",
-    i18n_label: "profile.actions.profile",
-    href: `/settings/account`,
-    highlight: (pathname: string) => pathname === "/settings/account/",
-  },
-  security: {
-    key: "security",
-    i18n_label: "profile.actions.security",
-    href: `/settings/account/security`,
-    highlight: (pathname: string) => pathname === "/settings/account/security/",
-  },
-  activity: {
-    key: "activity",
-    i18n_label: "profile.actions.activity",
-    href: `/settings/account/activity`,
-    highlight: (pathname: string) => pathname === "/settings/account/activity/",
-  },
-  preferences: {
-    key: "preferences",
-    i18n_label: "profile.actions.preferences",
-    href: `/settings/account/preferences`,
-    highlight: (pathname: string) => pathname === "/settings/account/preferences",
-  },
-  notifications: {
-    key: "notifications",
-    i18n_label: "profile.actions.notifications",
-    href: `/settings/account/notifications`,
-    highlight: (pathname: string) => pathname === "/settings/account/notifications/",
-  },
-  "api-tokens": {
-    key: "api-tokens",
-    i18n_label: "profile.actions.api-tokens",
-    href: `/settings/account/api-tokens`,
-    highlight: (pathname: string) => pathname === "/settings/account/api-tokens/",
-  },
-};
-export const PROFILE_ACTION_LINKS: {
-  key: string;
-  i18n_label: string;
-  href: string;
-  highlight: (pathname: string) => boolean;
-}[] = [
-  PROFILE_SETTINGS["profile"],
-  PROFILE_SETTINGS["security"],
-  PROFILE_SETTINGS["activity"],
-  PROFILE_SETTINGS["preferences"],
-  PROFILE_SETTINGS["notifications"],
-  PROFILE_SETTINGS["api-tokens"],
-];
+// plane imports
+import { EStartOfTheWeek } from "@plane/types";
 
 export const PROFILE_VIEWER_TAB = [
   {
@@ -98,11 +53,6 @@ export const PREFERENCE_OPTIONS: {
     title: "theme",
     description: "select_or_customize_your_interface_color_scheme",
   },
-  {
-    id: "start_of_week",
-    title: "First day of the week",
-    description: "This will change how all calendars in your app look.",
-  },
 ];
 
 /**
diff --git a/packages/constants/src/project.ts b/packages/constants/src/project.ts
index f28f5c933..b8218d696 100644
--- a/packages/constants/src/project.ts
+++ b/packages/constants/src/project.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // plane imports
 import type { TProjectAppliedDisplayFilterKeys, TProjectOrderByOptions } from "@plane/types";
 // local imports
diff --git a/packages/constants/src/rich-filters/index.ts b/packages/constants/src/rich-filters/index.ts
index cf6b76514..ca9f1a5ea 100644
--- a/packages/constants/src/rich-filters/index.ts
+++ b/packages/constants/src/rich-filters/index.ts
@@ -1,2 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./operator-labels";
 export * from "./option";
diff --git a/packages/constants/src/rich-filters/operator-labels/core.ts b/packages/constants/src/rich-filters/operator-labels/core.ts
index ae7ccb23d..a973c5f95 100644
--- a/packages/constants/src/rich-filters/operator-labels/core.ts
+++ b/packages/constants/src/rich-filters/operator-labels/core.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { TCoreSupportedOperators, TCoreSupportedDateFilterOperators } from "@plane/types";
 import { CORE_EQUALITY_OPERATOR, CORE_COLLECTION_OPERATOR, CORE_COMPARISON_OPERATOR } from "@plane/types";
 
diff --git a/packages/constants/src/rich-filters/operator-labels/extended.ts b/packages/constants/src/rich-filters/operator-labels/extended.ts
index 5f4e7514d..2c0209915 100644
--- a/packages/constants/src/rich-filters/operator-labels/extended.ts
+++ b/packages/constants/src/rich-filters/operator-labels/extended.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { TExtendedSupportedOperators } from "@plane/types";
 
 /**
diff --git a/packages/constants/src/rich-filters/operator-labels/index.ts b/packages/constants/src/rich-filters/operator-labels/index.ts
index 24d428e54..488700785 100644
--- a/packages/constants/src/rich-filters/operator-labels/index.ts
+++ b/packages/constants/src/rich-filters/operator-labels/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { TAllAvailableOperatorsForDisplay, TAllAvailableDateFilterOperatorsForDisplay } from "@plane/types";
 import { CORE_OPERATOR_LABELS_MAP, CORE_DATE_OPERATOR_LABELS_MAP } from "./core";
 import {
diff --git a/packages/constants/src/rich-filters/option.ts b/packages/constants/src/rich-filters/option.ts
index 69e66a32d..e937a1d73 100644
--- a/packages/constants/src/rich-filters/option.ts
+++ b/packages/constants/src/rich-filters/option.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { TExternalFilter } from "@plane/types";
 
 /**
diff --git a/packages/constants/src/settings.ts b/packages/constants/src/settings.ts
deleted file mode 100644
index 2c55a6a2d..000000000
--- a/packages/constants/src/settings.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-import { PROFILE_SETTINGS } from "./profile";
-import { WORKSPACE_SETTINGS } from "./workspace";
-
-export enum WORKSPACE_SETTINGS_CATEGORY {
-  ADMINISTRATION = "administration",
-  FEATURES = "features",
-  DEVELOPER = "developer",
-}
-
-export enum PROFILE_SETTINGS_CATEGORY {
-  YOUR_PROFILE = "your profile",
-  DEVELOPER = "developer",
-}
-
-export enum PROJECT_SETTINGS_CATEGORY {
-  PROJECTS = "projects",
-}
-
-export const WORKSPACE_SETTINGS_CATEGORIES = [
-  WORKSPACE_SETTINGS_CATEGORY.ADMINISTRATION,
-  WORKSPACE_SETTINGS_CATEGORY.FEATURES,
-  WORKSPACE_SETTINGS_CATEGORY.DEVELOPER,
-];
-
-export const PROFILE_SETTINGS_CATEGORIES = [
-  PROFILE_SETTINGS_CATEGORY.YOUR_PROFILE,
-  PROFILE_SETTINGS_CATEGORY.DEVELOPER,
-];
-
-export const PROJECT_SETTINGS_CATEGORIES = [PROJECT_SETTINGS_CATEGORY.PROJECTS];
-
-export const GROUPED_WORKSPACE_SETTINGS = {
-  [WORKSPACE_SETTINGS_CATEGORY.ADMINISTRATION]: [
-    WORKSPACE_SETTINGS["general"],
-    WORKSPACE_SETTINGS["members"],
-    WORKSPACE_SETTINGS["billing-and-plans"],
-    WORKSPACE_SETTINGS["export"],
-  ],
-  [WORKSPACE_SETTINGS_CATEGORY.FEATURES]: [],
-  [WORKSPACE_SETTINGS_CATEGORY.DEVELOPER]: [WORKSPACE_SETTINGS["webhooks"]],
-};
-
-export const GROUPED_PROFILE_SETTINGS = {
-  [PROFILE_SETTINGS_CATEGORY.YOUR_PROFILE]: [
-    PROFILE_SETTINGS["profile"],
-    PROFILE_SETTINGS["preferences"],
-    PROFILE_SETTINGS["notifications"],
-    PROFILE_SETTINGS["security"],
-    PROFILE_SETTINGS["activity"],
-  ],
-  [PROFILE_SETTINGS_CATEGORY.DEVELOPER]: [PROFILE_SETTINGS["api-tokens"]],
-};
diff --git a/packages/constants/src/settings/index.ts b/packages/constants/src/settings/index.ts
new file mode 100644
index 000000000..ce07612f7
--- /dev/null
+++ b/packages/constants/src/settings/index.ts
@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./profile";
+export * from "./project";
+export * from "./workspace";
diff --git a/packages/constants/src/settings/profile.ts b/packages/constants/src/settings/profile.ts
new file mode 100644
index 000000000..38edd4ace
--- /dev/null
+++ b/packages/constants/src/settings/profile.ts
@@ -0,0 +1,67 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// plane imports
+import type { TProfileSettingsTabs } from "@plane/types";
+
+export enum PROFILE_SETTINGS_CATEGORY {
+  YOUR_PROFILE = "your profile",
+  DEVELOPER = "developer",
+}
+
+export const PROFILE_SETTINGS_CATEGORIES: PROFILE_SETTINGS_CATEGORY[] = [
+  PROFILE_SETTINGS_CATEGORY.YOUR_PROFILE,
+  PROFILE_SETTINGS_CATEGORY.DEVELOPER,
+];
+
+export const PROFILE_SETTINGS: Record<
+  TProfileSettingsTabs,
+  {
+    key: TProfileSettingsTabs;
+    i18n_label: string;
+  }
+> = {
+  general: {
+    key: "general",
+    i18n_label: "profile.actions.profile",
+  },
+  security: {
+    key: "security",
+    i18n_label: "profile.actions.security",
+  },
+  activity: {
+    key: "activity",
+    i18n_label: "profile.actions.activity",
+  },
+  preferences: {
+    key: "preferences",
+    i18n_label: "profile.actions.preferences",
+  },
+  notifications: {
+    key: "notifications",
+    i18n_label: "profile.actions.notifications",
+  },
+  "api-tokens": {
+    key: "api-tokens",
+    i18n_label: "profile.actions.api-tokens",
+  },
+};
+
+export const PROFILE_SETTINGS_TABS: TProfileSettingsTabs[] = Object.keys(PROFILE_SETTINGS) as TProfileSettingsTabs[];
+
+export const GROUPED_PROFILE_SETTINGS: Record<
+  PROFILE_SETTINGS_CATEGORY,
+  { key: TProfileSettingsTabs; i18n_label: string }[]
+> = {
+  [PROFILE_SETTINGS_CATEGORY.YOUR_PROFILE]: [
+    PROFILE_SETTINGS["general"],
+    PROFILE_SETTINGS["preferences"],
+    PROFILE_SETTINGS["notifications"],
+    PROFILE_SETTINGS["security"],
+    PROFILE_SETTINGS["activity"],
+  ],
+  [PROFILE_SETTINGS_CATEGORY.DEVELOPER]: [PROFILE_SETTINGS["api-tokens"]],
+};
diff --git a/packages/constants/src/settings/project.ts b/packages/constants/src/settings/project.ts
new file mode 100644
index 000000000..898d9ee76
--- /dev/null
+++ b/packages/constants/src/settings/project.ts
@@ -0,0 +1,122 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// plane imports
+import { EUserProjectRoles } from "@plane/types";
+import type { TProjectSettingsItem, TProjectSettingsTabs } from "@plane/types";
+
+export enum PROJECT_SETTINGS_CATEGORY {
+  GENERAL = "general",
+  FEATURES = "features",
+  WORK_STRUCTURE = "work-structure",
+  EXECUTION = "execution",
+}
+
+export const PROJECT_SETTINGS_CATEGORIES: PROJECT_SETTINGS_CATEGORY[] = [
+  PROJECT_SETTINGS_CATEGORY.GENERAL,
+  PROJECT_SETTINGS_CATEGORY.FEATURES,
+  PROJECT_SETTINGS_CATEGORY.WORK_STRUCTURE,
+  PROJECT_SETTINGS_CATEGORY.EXECUTION,
+];
+
+export const PROJECT_SETTINGS: Record<TProjectSettingsTabs, TProjectSettingsItem> = {
+  general: {
+    key: "general",
+    i18n_label: "common.general",
+    href: ``,
+    access: [EUserProjectRoles.ADMIN, EUserProjectRoles.MEMBER, EUserProjectRoles.GUEST],
+    highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/`,
+  },
+  members: {
+    key: "members",
+    i18n_label: "common.members",
+    href: `/members`,
+    access: [EUserProjectRoles.ADMIN, EUserProjectRoles.MEMBER, EUserProjectRoles.GUEST],
+    highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/members/`,
+  },
+  features_cycles: {
+    key: "features_cycles",
+    i18n_label: "project_settings.features.cycles.short_title",
+    href: `/features/cycles`,
+    access: [EUserProjectRoles.ADMIN],
+    highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/features/cycles/`,
+  },
+  features_modules: {
+    key: "features_modules",
+    i18n_label: "project_settings.features.modules.short_title",
+    href: `/features/modules`,
+    access: [EUserProjectRoles.ADMIN],
+    highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/features/modules/`,
+  },
+  features_views: {
+    key: "features_views",
+    i18n_label: "project_settings.features.views.short_title",
+    href: `/features/views`,
+    access: [EUserProjectRoles.ADMIN],
+    highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/features/views/`,
+  },
+  features_pages: {
+    key: "features_pages",
+    i18n_label: "project_settings.features.pages.short_title",
+    href: `/features/pages`,
+    access: [EUserProjectRoles.ADMIN],
+    highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/features/pages/`,
+  },
+  features_intake: {
+    key: "features_intake",
+    i18n_label: "project_settings.features.intake.short_title",
+    href: `/features/intake`,
+    access: [EUserProjectRoles.ADMIN],
+    highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/features/intake/`,
+  },
+  states: {
+    key: "states",
+    i18n_label: "common.states",
+    href: `/states`,
+    access: [EUserProjectRoles.ADMIN, EUserProjectRoles.MEMBER],
+    highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/states/`,
+  },
+  labels: {
+    key: "labels",
+    i18n_label: "common.labels",
+    href: `/labels`,
+    access: [EUserProjectRoles.ADMIN, EUserProjectRoles.MEMBER],
+    highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/labels/`,
+  },
+  estimates: {
+    key: "estimates",
+    i18n_label: "common.estimates",
+    href: `/estimates`,
+    access: [EUserProjectRoles.ADMIN],
+    highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/estimates/`,
+  },
+  automations: {
+    key: "automations",
+    i18n_label: "project_settings.automations.label",
+    href: `/automations`,
+    access: [EUserProjectRoles.ADMIN],
+    highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/automations/`,
+  },
+};
+
+export const PROJECT_SETTINGS_FLAT_MAP: TProjectSettingsItem[] = Object.values(PROJECT_SETTINGS);
+
+export const GROUPED_PROJECT_SETTINGS: Record<PROJECT_SETTINGS_CATEGORY, TProjectSettingsItem[]> = {
+  [PROJECT_SETTINGS_CATEGORY.GENERAL]: [PROJECT_SETTINGS["general"], PROJECT_SETTINGS["members"]],
+  [PROJECT_SETTINGS_CATEGORY.FEATURES]: [
+    PROJECT_SETTINGS["features_cycles"],
+    PROJECT_SETTINGS["features_modules"],
+    PROJECT_SETTINGS["features_views"],
+    PROJECT_SETTINGS["features_pages"],
+    PROJECT_SETTINGS["features_intake"],
+  ],
+  [PROJECT_SETTINGS_CATEGORY.WORK_STRUCTURE]: [
+    PROJECT_SETTINGS["states"],
+    PROJECT_SETTINGS["labels"],
+    PROJECT_SETTINGS["estimates"],
+  ],
+  [PROJECT_SETTINGS_CATEGORY.EXECUTION]: [PROJECT_SETTINGS["automations"]],
+};
diff --git a/packages/constants/src/settings/workspace.ts b/packages/constants/src/settings/workspace.ts
new file mode 100644
index 000000000..f6b944369
--- /dev/null
+++ b/packages/constants/src/settings/workspace.ts
@@ -0,0 +1,74 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// plane imports
+import type { TWorkspaceSettingsItem, TWorkspaceSettingsTabs } from "@plane/types";
+import { EUserWorkspaceRoles } from "@plane/types";
+
+export enum WORKSPACE_SETTINGS_CATEGORY {
+  ADMINISTRATION = "administration",
+  FEATURES = "features",
+  DEVELOPER = "developer",
+}
+
+export const WORKSPACE_SETTINGS_CATEGORIES: WORKSPACE_SETTINGS_CATEGORY[] = [
+  WORKSPACE_SETTINGS_CATEGORY.ADMINISTRATION,
+  WORKSPACE_SETTINGS_CATEGORY.FEATURES,
+  WORKSPACE_SETTINGS_CATEGORY.DEVELOPER,
+];
+
+export const WORKSPACE_SETTINGS: Record<TWorkspaceSettingsTabs, TWorkspaceSettingsItem> = {
+  general: {
+    key: "general",
+    i18n_label: "workspace_settings.settings.general.title",
+    href: `/settings`,
+    access: [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER],
+    highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/`,
+  },
+  members: {
+    key: "members",
+    i18n_label: "workspace_settings.settings.members.title",
+    href: `/settings/members`,
+    access: [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER],
+    highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/members/`,
+  },
+  "billing-and-plans": {
+    key: "billing-and-plans",
+    i18n_label: "workspace_settings.settings.billing_and_plans.title",
+    href: `/settings/billing`,
+    access: [EUserWorkspaceRoles.ADMIN],
+    highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/billing/`,
+  },
+  export: {
+    key: "export",
+    i18n_label: "workspace_settings.settings.exports.title",
+    href: `/settings/exports`,
+    access: [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER],
+    highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/exports/`,
+  },
+  webhooks: {
+    key: "webhooks",
+    i18n_label: "workspace_settings.settings.webhooks.title",
+    href: `/settings/webhooks`,
+    access: [EUserWorkspaceRoles.ADMIN],
+    highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/webhooks/`,
+  },
+};
+
+export const WORKSPACE_SETTINGS_ACCESS = Object.fromEntries(
+  Object.entries(WORKSPACE_SETTINGS).map(([_, { href, access }]) => [href, access])
+);
+
+export const GROUPED_WORKSPACE_SETTINGS: Record<WORKSPACE_SETTINGS_CATEGORY, TWorkspaceSettingsItem[]> = {
+  [WORKSPACE_SETTINGS_CATEGORY.ADMINISTRATION]: [
+    WORKSPACE_SETTINGS["general"],
+    WORKSPACE_SETTINGS["members"],
+    WORKSPACE_SETTINGS["billing-and-plans"],
+    WORKSPACE_SETTINGS["export"],
+  ],
+  [WORKSPACE_SETTINGS_CATEGORY.FEATURES]: [],
+  [WORKSPACE_SETTINGS_CATEGORY.DEVELOPER]: [WORKSPACE_SETTINGS["webhooks"]],
+};
diff --git a/packages/constants/src/sidebar.ts b/packages/constants/src/sidebar.ts
index 746859754..cb7d7f711 100644
--- a/packages/constants/src/sidebar.ts
+++ b/packages/constants/src/sidebar.ts
@@ -1,2 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export const SIDEBAR_WIDTH = 250;
 export const EXTENDED_SIDEBAR_WIDTH = 300;
diff --git a/packages/constants/src/spreadsheet.ts b/packages/constants/src/spreadsheet.ts
index 57723e449..45bf90007 100644
--- a/packages/constants/src/spreadsheet.ts
+++ b/packages/constants/src/spreadsheet.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export const SPREADSHEET_SELECT_GROUP = "spreadsheet-issues";
diff --git a/packages/constants/src/state.ts b/packages/constants/src/state.ts
index 326834aca..36adef17b 100644
--- a/packages/constants/src/state.ts
+++ b/packages/constants/src/state.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { TStateGroups } from "@plane/types";
 
 export type TDraggableData = {
diff --git a/packages/constants/src/stickies.ts b/packages/constants/src/stickies.ts
index 6bf6fd20b..4275393a0 100644
--- a/packages/constants/src/stickies.ts
+++ b/packages/constants/src/stickies.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export const STICKIES_PER_PAGE = 30;
diff --git a/packages/constants/src/subscription.ts b/packages/constants/src/subscription.ts
index c2d2cfa13..eeb948a5a 100644
--- a/packages/constants/src/subscription.ts
+++ b/packages/constants/src/subscription.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export const ENTERPRISE_PLAN_FEATURES = [
   "Private + managed deployments",
   "GAC",
diff --git a/packages/constants/src/swr.ts b/packages/constants/src/swr.ts
index e981dd1d0..faceae263 100644
--- a/packages/constants/src/swr.ts
+++ b/packages/constants/src/swr.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export const DEFAULT_SWR_CONFIG = {
   refreshWhenHidden: false,
   revalidateIfStale: false,
diff --git a/packages/constants/src/tab-indices.ts b/packages/constants/src/tab-indices.ts
index 829584131..2e771a4b6 100644
--- a/packages/constants/src/tab-indices.ts
+++ b/packages/constants/src/tab-indices.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export const ISSUE_FORM_TAB_INDICES = [
   "name",
   "description_html",
diff --git a/packages/constants/src/themes.ts b/packages/constants/src/themes.ts
index bd5d9ba2d..4c2cf21dc 100644
--- a/packages/constants/src/themes.ts
+++ b/packages/constants/src/themes.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export const THEMES = ["light", "dark", "light-contrast", "dark-contrast", "custom"];
 
 export interface I_THEME_OPTION {
diff --git a/packages/constants/src/user.ts b/packages/constants/src/user.ts
index b13c95311..7b65c93f8 100644
--- a/packages/constants/src/user.ts
+++ b/packages/constants/src/user.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export enum EAuthenticationPageType {
   STATIC = "STATIC",
   NOT_AUTHENTICATED = "NOT_AUTHENTICATED",
diff --git a/packages/constants/src/views.ts b/packages/constants/src/views.ts
index 7e9e141ec..90b017d77 100644
--- a/packages/constants/src/views.ts
+++ b/packages/constants/src/views.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { EViewAccess } from "@plane/types";
 
 export const VIEW_ACCESS_SPECIFIERS: {
diff --git a/packages/constants/src/workspace-drafts.ts b/packages/constants/src/workspace-drafts.ts
index 4c1c88f9f..472b0d078 100644
--- a/packages/constants/src/workspace-drafts.ts
+++ b/packages/constants/src/workspace-drafts.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export enum EDraftIssuePaginationType {
   INIT = "INIT",
   NEXT = "NEXT",
diff --git a/packages/constants/src/workspace.ts b/packages/constants/src/workspace.ts
index 9610333c0..6083c7719 100644
--- a/packages/constants/src/workspace.ts
+++ b/packages/constants/src/workspace.ts
@@ -1,9 +1,15 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { TStaticViewTypes, IWorkspaceSearchResults } from "@plane/types";
 import { EUserWorkspaceRoles } from "@plane/types";
 
-export const ORGANIZATION_SIZE = ["Just myself", "2-10", "11-50", "51-200", "201-500", "500+"];
+export const ORGANIZATION_SIZE: string[] = ["Just myself", "2-10", "11-50", "51-200", "201-500", "500+"];
 
-export const RESTRICTED_URLS = [
+export const RESTRICTED_URLS: string[] = [
   "404",
   "accounts",
   "api",
@@ -71,62 +77,6 @@ export const RESTRICTED_URLS = [
   "instance",
 ];
 
-export const WORKSPACE_SETTINGS = {
-  general: {
-    key: "general",
-    i18n_label: "workspace_settings.settings.general.title",
-    href: `/settings`,
-    access: [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER],
-    highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/`,
-  },
-  members: {
-    key: "members",
-    i18n_label: "workspace_settings.settings.members.title",
-    href: `/settings/members`,
-    access: [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER],
-    highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/members/`,
-  },
-  "billing-and-plans": {
-    key: "billing-and-plans",
-    i18n_label: "workspace_settings.settings.billing_and_plans.title",
-    href: `/settings/billing`,
-    access: [EUserWorkspaceRoles.ADMIN],
-    highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/billing/`,
-  },
-  export: {
-    key: "export",
-    i18n_label: "workspace_settings.settings.exports.title",
-    href: `/settings/exports`,
-    access: [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER],
-    highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/exports/`,
-  },
-  webhooks: {
-    key: "webhooks",
-    i18n_label: "workspace_settings.settings.webhooks.title",
-    href: `/settings/webhooks`,
-    access: [EUserWorkspaceRoles.ADMIN],
-    highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/webhooks/`,
-  },
-};
-
-export const WORKSPACE_SETTINGS_ACCESS = Object.fromEntries(
-  Object.entries(WORKSPACE_SETTINGS).map(([_, { href, access }]) => [href, access])
-);
-
-export const WORKSPACE_SETTINGS_LINKS: {
-  key: string;
-  i18n_label: string;
-  href: string;
-  access: EUserWorkspaceRoles[];
-  highlight: (pathname: string, baseUrl: string) => boolean;
-}[] = [
-  WORKSPACE_SETTINGS["general"],
-  WORKSPACE_SETTINGS["members"],
-  WORKSPACE_SETTINGS["billing-and-plans"],
-  WORKSPACE_SETTINGS["export"],
-  WORKSPACE_SETTINGS["webhooks"],
-];
-
 export const ROLE = {
   [EUserWorkspaceRoles.GUEST]: "Guest",
   [EUserWorkspaceRoles.MEMBER]: "Member",
diff --git a/packages/decorators/package.json b/packages/decorators/package.json
index 0418b5a77..d643bcb14 100644
--- a/packages/decorators/package.json
+++ b/packages/decorators/package.json
@@ -1,22 +1,25 @@
 {
   "name": "@plane/decorators",
   "version": "0.1.0",
+  "private": true,
   "description": "Controller and route decorators for Express.js applications",
   "license": "AGPL-3.0",
-  "private": true,
   "type": "module",
+  "main": "./dist/index.mjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.mts",
   "exports": {
     ".": "./dist/index.mjs",
     "./package.json": "./package.json"
   },
   "scripts": {
     "build": "tsdown",
-    "dev": "tsdown --watch",
-    "check:lint": "eslint . --max-warnings=29",
+    "dev": "tsdown --watch --no-clean",
+    "check:lint": "oxlint --max-warnings=3 .",
     "check:types": "tsc --noEmit",
-    "check:format": "prettier --check .",
-    "fix:lint": "eslint . --fix --max-warnings=29",
-    "fix:format": "prettier --write .",
+    "check:format": "oxfmt --check .",
+    "fix:lint": "oxlint --fix .",
+    "fix:format": "oxfmt .",
     "clean": "rm -rf .turbo && rm -rf .next && rm -rf node_modules && rm -rf dist"
   },
   "devDependencies": {
@@ -28,7 +31,9 @@
     "tsdown": "catalog:",
     "typescript": "catalog:"
   },
-  "main": "./dist/index.mjs",
-  "module": "./dist/index.mjs",
-  "types": "./dist/index.d.mts"
+  "inlinedDependencies": {
+    "@types/express": "4.17.23",
+    "@types/express-serve-static-core": "4.19.6",
+    "reflect-metadata": "0.2.2"
+  }
 }
diff --git a/packages/decorators/src/controller.ts b/packages/decorators/src/controller.ts
index 07fe36cfb..779ee80c1 100644
--- a/packages/decorators/src/controller.ts
+++ b/packages/decorators/src/controller.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { RequestHandler, Router, Request } from "express";
 import type { WebSocket } from "ws";
 
diff --git a/packages/decorators/src/index.ts b/packages/decorators/src/index.ts
index 9ca53cfb5..b31ab97ef 100644
--- a/packages/decorators/src/index.ts
+++ b/packages/decorators/src/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./controller";
 export * from "./rest";
 export * from "./websocket";
diff --git a/packages/decorators/src/rest.ts b/packages/decorators/src/rest.ts
index 7de1d92e4..16151955e 100644
--- a/packages/decorators/src/rest.ts
+++ b/packages/decorators/src/rest.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import "reflect-metadata";
 import type { RequestHandler } from "express";
 
diff --git a/packages/decorators/src/websocket.ts b/packages/decorators/src/websocket.ts
index 282df8970..2efbe9f3d 100644
--- a/packages/decorators/src/websocket.ts
+++ b/packages/decorators/src/websocket.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import "reflect-metadata";
 
 /**
diff --git a/packages/editor/package.json b/packages/editor/package.json
index e346b8ba1..9235ba0cb 100644
--- a/packages/editor/package.json
+++ b/packages/editor/package.json
@@ -1,9 +1,16 @@
 {
   "name": "@plane/editor",
-  "version": "1.2.3",
-  "description": "Core Editor that powers Plane",
-  "license": "AGPL-3.0",
+  "version": "1.3.0",
   "private": true,
+  "description": "Core Editor that powers Plane",
+  "keywords": [
+    "editor",
+    "markdown",
+    "nextjs",
+    "react",
+    "rich-text"
+  ],
+  "license": "AGPL-3.0",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -17,18 +24,14 @@
   },
   "scripts": {
     "build": "tsc && tsdown",
-    "dev": "tsdown --watch",
-    "check:lint": "eslint . --max-warnings=1435",
+    "dev": "tsdown --watch --no-clean",
+    "check:lint": "oxlint --max-warnings=416 .",
     "check:types": "tsc --noEmit",
-    "check:format": "prettier --check .",
-    "fix:lint": "eslint . --fix --max-warnings=1435",
-    "fix:format": "prettier --write .",
+    "check:format": "oxfmt --check .",
+    "fix:lint": "oxlint --fix .",
+    "fix:format": "oxfmt .",
     "clean": "rm -rf .turbo && rm -rf .next && rm -rf node_modules && rm -rf dist"
   },
-  "peerDependencies": {
-    "react": "catalog:",
-    "react-dom": "catalog:"
-  },
   "dependencies": {
     "@floating-ui/dom": "^1.7.1",
     "@floating-ui/react": "^0.26.4",
@@ -68,6 +71,7 @@
     "is-emoji-supported": "^0.0.5",
     "jsx-dom-cjs": "^8.0.3",
     "linkifyjs": "^4.3.2",
+    "lodash-es": "catalog:",
     "lowlight": "^3.0.0",
     "lucide-react": "catalog:",
     "prosemirror-codemark": "^0.4.2",
@@ -82,6 +86,7 @@
   "devDependencies": {
     "@plane/tailwind-config": "workspace:*",
     "@plane/typescript-config": "workspace:*",
+    "@types/lodash-es": "catalog:",
     "@types/node": "catalog:",
     "@types/react": "catalog:",
     "@types/react-dom": "catalog:",
@@ -89,11 +94,8 @@
     "tsdown": "catalog:",
     "typescript": "catalog:"
   },
-  "keywords": [
-    "editor",
-    "rich-text",
-    "markdown",
-    "nextjs",
-    "react"
-  ]
+  "peerDependencies": {
+    "react": "catalog:",
+    "react-dom": "catalog:"
+  }
 }
diff --git a/packages/editor/postcss.config.js b/packages/editor/postcss.config.js
index 07aa434b2..3ad28f15f 100644
--- a/packages/editor/postcss.config.js
+++ b/packages/editor/postcss.config.js
@@ -1,9 +1,3 @@
-// If you want to use other PostCSS plugins, see the following:
-// https://tailwindcss.com/docs/using-with-preprocessors
+import postcssConfig from "@plane/tailwind-config/postcss.config.js";
 
-module.exports = {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-};
+export default postcssConfig;
diff --git a/packages/editor/src/ce/components/document-editor-side-effects.ts b/packages/editor/src/ce/components/document-editor-side-effects.ts
index 663fd927b..af00a6433 100644
--- a/packages/editor/src/ce/components/document-editor-side-effects.ts
+++ b/packages/editor/src/ce/components/document-editor-side-effects.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { Editor } from "@tiptap/core";
 import type { ReactElement } from "react";
 import type { IEditorPropsExtended } from "@/types";
diff --git a/packages/editor/src/ce/components/link-container.tsx b/packages/editor/src/ce/components/link-container.tsx
index 4994ae124..eb822fdd1 100644
--- a/packages/editor/src/ce/components/link-container.tsx
+++ b/packages/editor/src/ce/components/link-container.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { Editor } from "@tiptap/core";
 import { LinkViewContainer } from "@/components/editors/link-view-container";
 
diff --git a/packages/editor/src/ce/constants/assets.ts b/packages/editor/src/ce/constants/assets.ts
index 364b60cba..ec6d002e0 100644
--- a/packages/editor/src/ce/constants/assets.ts
+++ b/packages/editor/src/ce/constants/assets.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // helpers
 import type { TAssetMetaDataRecord } from "@/helpers/assets";
 // local imports
diff --git a/packages/editor/src/ce/constants/extensions.ts b/packages/editor/src/ce/constants/extensions.ts
index 2b19b07f0..6674bc58a 100644
--- a/packages/editor/src/ce/constants/extensions.ts
+++ b/packages/editor/src/ce/constants/extensions.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export enum ADDITIONAL_EXTENSIONS {}
 
 export const ADDITIONAL_BLOCK_NODE_TYPES = [];
diff --git a/packages/editor/src/ce/constants/utility.ts b/packages/editor/src/ce/constants/utility.ts
index 767e3ea2e..355c50cc0 100644
--- a/packages/editor/src/ce/constants/utility.ts
+++ b/packages/editor/src/ce/constants/utility.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // plane imports
 import type { ADDITIONAL_EXTENSIONS } from "@plane/utils";
 import { CORE_EXTENSIONS } from "@plane/utils";
diff --git a/packages/editor/src/ce/extensions/core/extensions.ts b/packages/editor/src/ce/extensions/core/extensions.ts
index e09038bca..cf3bddc7e 100644
--- a/packages/editor/src/ce/extensions/core/extensions.ts
+++ b/packages/editor/src/ce/extensions/core/extensions.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { Extensions } from "@tiptap/core";
 // types
 import type { IEditorProps } from "@/types";
diff --git a/packages/editor/src/ce/extensions/core/index.ts b/packages/editor/src/ce/extensions/core/index.ts
index e121e50b0..5c8c992e5 100644
--- a/packages/editor/src/ce/extensions/core/index.ts
+++ b/packages/editor/src/ce/extensions/core/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./extensions";
diff --git a/packages/editor/src/ce/extensions/core/without-props.ts b/packages/editor/src/ce/extensions/core/without-props.ts
index 7689c54c2..e571502d1 100644
--- a/packages/editor/src/ce/extensions/core/without-props.ts
+++ b/packages/editor/src/ce/extensions/core/without-props.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { Extensions } from "@tiptap/core";
 
 export const CoreEditorAdditionalExtensionsWithoutProps: Extensions = [];
diff --git a/packages/editor/src/ce/extensions/document-extensions.tsx b/packages/editor/src/ce/extensions/document-extensions.tsx
index 28a470c67..118364c46 100644
--- a/packages/editor/src/ce/extensions/document-extensions.tsx
+++ b/packages/editor/src/ce/extensions/document-extensions.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { HocuspocusProvider } from "@hocuspocus/provider";
 import type { AnyExtension } from "@tiptap/core";
 import { SlashCommands } from "@/extensions";
diff --git a/packages/editor/src/ce/extensions/index.ts b/packages/editor/src/ce/extensions/index.ts
index c9f58a936..c5929b0eb 100644
--- a/packages/editor/src/ce/extensions/index.ts
+++ b/packages/editor/src/ce/extensions/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./core";
 export * from "./document-extensions";
 export * from "./slash-commands";
diff --git a/packages/editor/src/ce/extensions/rich-text-extensions.tsx b/packages/editor/src/ce/extensions/rich-text-extensions.tsx
index 6cd6ad06c..c59647a00 100644
--- a/packages/editor/src/ce/extensions/rich-text-extensions.tsx
+++ b/packages/editor/src/ce/extensions/rich-text-extensions.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { AnyExtension, Extensions } from "@tiptap/core";
 // extensions
 import { SlashCommands } from "@/extensions/slash-commands/root";
diff --git a/packages/editor/src/ce/extensions/slash-commands.tsx b/packages/editor/src/ce/extensions/slash-commands.tsx
index d61d056c8..370acb077 100644
--- a/packages/editor/src/ce/extensions/slash-commands.tsx
+++ b/packages/editor/src/ce/extensions/slash-commands.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // extensions
 import type { TSlashCommandAdditionalOption } from "@/extensions";
 // types
diff --git a/packages/editor/src/ce/helpers/asset-duplication.ts b/packages/editor/src/ce/helpers/asset-duplication.ts
index 2a2a6e407..84da1a2ef 100644
--- a/packages/editor/src/ce/helpers/asset-duplication.ts
+++ b/packages/editor/src/ce/helpers/asset-duplication.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { v4 as uuidv4 } from "uuid";
 import { ECustomImageAttributeNames, ECustomImageStatus } from "@/extensions/custom-image/types";
 
diff --git a/packages/editor/src/ce/helpers/parser.ts b/packages/editor/src/ce/helpers/parser.ts
index 5b96c9cfd..bc60a82c4 100644
--- a/packages/editor/src/ce/helpers/parser.ts
+++ b/packages/editor/src/ce/helpers/parser.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 /**
  * @description function to extract all additional assets from HTML content
  * @param htmlContent
diff --git a/packages/editor/src/ce/types/asset.ts b/packages/editor/src/ce/types/asset.ts
index 4410c0f2c..9d3f4b824 100644
--- a/packages/editor/src/ce/types/asset.ts
+++ b/packages/editor/src/ce/types/asset.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export type TAdditionalEditorAsset = never;
diff --git a/packages/editor/src/ce/types/config.ts b/packages/editor/src/ce/types/config.ts
index 29693e995..cc8a43e89 100644
--- a/packages/editor/src/ce/types/config.ts
+++ b/packages/editor/src/ce/types/config.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export type TExtendedFileHandler = object;
diff --git a/packages/editor/src/ce/types/editor-extended.ts b/packages/editor/src/ce/types/editor-extended.ts
index 0c3868112..a9b9f2ec7 100644
--- a/packages/editor/src/ce/types/editor-extended.ts
+++ b/packages/editor/src/ce/types/editor-extended.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export type IEditorExtensionOptions = unknown;
 
 export type IEditorPropsExtended = unknown;
diff --git a/packages/editor/src/ce/types/index.ts b/packages/editor/src/ce/types/index.ts
index c2c5d6dfa..2745670e5 100644
--- a/packages/editor/src/ce/types/index.ts
+++ b/packages/editor/src/ce/types/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./issue-embed";
 export * from "./editor-extended";
 export * from "./config";
diff --git a/packages/editor/src/ce/types/issue-embed.ts b/packages/editor/src/ce/types/issue-embed.ts
index d68d182a0..02ecfb2f8 100644
--- a/packages/editor/src/ce/types/issue-embed.ts
+++ b/packages/editor/src/ce/types/issue-embed.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export type TEmbedConfig = {
   issue?: TIssueEmbedConfig;
 };
diff --git a/packages/editor/src/ce/types/storage.ts b/packages/editor/src/ce/types/storage.ts
index 56a49da8c..821c08ec9 100644
--- a/packages/editor/src/ce/types/storage.ts
+++ b/packages/editor/src/ce/types/storage.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // extensions
 import type { ImageExtensionStorage } from "@/extensions/image";
 
diff --git a/packages/editor/src/ce/types/utils.ts b/packages/editor/src/ce/types/utils.ts
index 1f4efd8b7..5900256f6 100644
--- a/packages/editor/src/ce/types/utils.ts
+++ b/packages/editor/src/ce/types/utils.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export type TAdditionalActiveDropbarExtensions = never;
diff --git a/packages/editor/src/core/components/editors/document/collaborative-editor.tsx b/packages/editor/src/core/components/editors/document/collaborative-editor.tsx
index bee6e610a..ba132d53a 100644
--- a/packages/editor/src/core/components/editors/document/collaborative-editor.tsx
+++ b/packages/editor/src/core/components/editors/document/collaborative-editor.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React, { useMemo } from "react";
 // plane imports
 import { cn } from "@plane/utils";
@@ -15,7 +21,7 @@ import { useCollaborativeEditor } from "@/hooks/use-collaborative-editor";
 import type { EditorRefApi, ICollaborativeDocumentEditorProps } from "@/types";
 
 // Inner component that has access to collaboration context
-const CollaborativeDocumentEditorInner: React.FC<ICollaborativeDocumentEditorProps> = (props) => {
+function CollaborativeDocumentEditorInner(props: ICollaborativeDocumentEditorProps) {
   const {
     aiHandler,
     bubbleMenuEnabled = true,
@@ -104,7 +110,7 @@ const CollaborativeDocumentEditorInner: React.FC<ICollaborativeDocumentEditorPro
       <div
         className={cn(
           "transition-opacity duration-200",
-          showContentSkeleton && !isLoading && "opacity-0 pointer-events-none"
+          showContentSkeleton && !isLoading && "pointer-events-none opacity-0"
         )}
       >
         <PageRenderer
@@ -129,10 +135,10 @@ const CollaborativeDocumentEditorInner: React.FC<ICollaborativeDocumentEditorPro
       </div>
     </>
   );
-};
+}
 
 // Outer component that provides collaboration context
-const CollaborativeDocumentEditor: React.FC<ICollaborativeDocumentEditorProps> = (props) => {
+function CollaborativeDocumentEditor(props: ICollaborativeDocumentEditorProps) {
   const { id, realtimeConfig, serverHandler, user } = props;
 
   const token = useMemo(() => JSON.stringify(user), [user]);
@@ -147,13 +153,16 @@ const CollaborativeDocumentEditor: React.FC<ICollaborativeDocumentEditorProps> =
       <CollaborativeDocumentEditorInner {...props} />
     </CollaborationProvider>
   );
-};
+}
 
-const CollaborativeDocumentEditorWithRef = React.forwardRef<EditorRefApi, ICollaborativeDocumentEditorProps>(
-  (props, ref) => (
+const CollaborativeDocumentEditorWithRef = React.forwardRef(function CollaborativeDocumentEditorWithRef(
+  props: ICollaborativeDocumentEditorProps,
+  ref: React.ForwardedRef<EditorRefApi>
+) {
+  return (
     <CollaborativeDocumentEditor key={props.id} {...props} forwardedRef={ref as React.MutableRefObject<EditorRefApi>} />
-  )
-);
+  );
+});
 
 CollaborativeDocumentEditorWithRef.displayName = "CollaborativeDocumentEditorWithRef";
 
diff --git a/packages/editor/src/core/components/editors/document/editor.tsx b/packages/editor/src/core/components/editors/document/editor.tsx
index 9e30e8772..f85b89710 100644
--- a/packages/editor/src/core/components/editors/document/editor.tsx
+++ b/packages/editor/src/core/components/editors/document/editor.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { Extensions } from "@tiptap/core";
 import type { MutableRefObject } from "react";
 import { forwardRef, useMemo } from "react";
diff --git a/packages/editor/src/core/components/editors/document/index.ts b/packages/editor/src/core/components/editors/document/index.ts
index 8a5bffd17..18c289f50 100644
--- a/packages/editor/src/core/components/editors/document/index.ts
+++ b/packages/editor/src/core/components/editors/document/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./collaborative-editor";
 export * from "./editor";
 export * from "./loader";
diff --git a/packages/editor/src/core/components/editors/document/loader.tsx b/packages/editor/src/core/components/editors/document/loader.tsx
index f24eedb01..c4f50f8a4 100644
--- a/packages/editor/src/core/components/editors/document/loader.tsx
+++ b/packages/editor/src/core/components/editors/document/loader.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // plane imports
 import { Loader } from "@plane/ui";
 import { cn } from "@plane/utils";
diff --git a/packages/editor/src/core/components/editors/document/page-renderer.tsx b/packages/editor/src/core/components/editors/document/page-renderer.tsx
index af45e54b2..9171f58e8 100644
--- a/packages/editor/src/core/components/editors/document/page-renderer.tsx
+++ b/packages/editor/src/core/components/editors/document/page-renderer.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { HocuspocusProvider } from "@hocuspocus/provider";
 import type { Editor } from "@tiptap/react";
 // plane imports
@@ -55,7 +61,7 @@ export function PageRenderer(props: Props) {
   } = props;
   return (
     <div
-      className={cn("frame-renderer flex-grow w-full", {
+      className={cn("frame-renderer w-full flex-grow", {
         "wide-layout": displayConfig.wideLayout,
       })}
     >
@@ -76,7 +82,7 @@ export function PageRenderer(props: Props) {
                   editor={titleEditor}
                   id={id + "-title"}
                   tabIndex={tabIndex}
-                  className="no-scrollbar placeholder-custom-text-400 bg-transparent tracking-[-2%] font-bold text-[2rem] leading-[2.375rem] w-full outline-none p-0 border-none resize-none rounded-none"
+                  className="no-scrollbar placeholder-placeholder w-full resize-none rounded-none border-none bg-transparent p-0 text-[2rem] leading-[2.375rem] font-bold tracking-[-2%] outline-none"
                 />
               </EditorContainer>
             </div>
diff --git a/packages/editor/src/core/components/editors/editor-container.tsx b/packages/editor/src/core/components/editors/editor-container.tsx
index 8fb03e893..b9631cbfb 100644
--- a/packages/editor/src/core/components/editors/editor-container.tsx
+++ b/packages/editor/src/core/components/editors/editor-container.tsx
@@ -1,6 +1,12 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { HocuspocusProvider } from "@hocuspocus/provider";
 import type { Editor } from "@tiptap/react";
-import type { FC, ReactNode } from "react";
+import type { ReactNode } from "react";
 import { useCallback, useEffect, useRef } from "react";
 // plane utils
 import { cn } from "@plane/utils";
@@ -26,7 +32,7 @@ type Props = {
   state?: TCollabValue["state"];
 };
 
-export const EditorContainer: FC<Props> = (props) => {
+export function EditorContainer(props: Props) {
   const { children, displayConfig, editor, editorContainerClassName, id, isTouchDevice, provider, state } = props;
   // refs
   const containerRef = useRef<HTMLDivElement>(null);
@@ -162,7 +168,7 @@ export const EditorContainer: FC<Props> = (props) => {
         onClick={handleContainerClick}
         onMouseLeave={handleContainerMouseLeave}
         className={cn(
-          `editor-container cursor-text relative line-spacing-${displayConfig.lineSpacing ?? DEFAULT_DISPLAY_CONFIG.lineSpacing}`,
+          `editor-container relative cursor-text line-spacing-${displayConfig.lineSpacing ?? DEFAULT_DISPLAY_CONFIG.lineSpacing}`,
           {
             "active-editor": editor?.isFocused && editor?.isEditable,
           },
@@ -176,4 +182,4 @@ export const EditorContainer: FC<Props> = (props) => {
       </div>
     </>
   );
-};
+}
diff --git a/packages/editor/src/core/components/editors/editor-content.tsx b/packages/editor/src/core/components/editors/editor-content.tsx
index 23efd5ec6..9179c611f 100644
--- a/packages/editor/src/core/components/editors/editor-content.tsx
+++ b/packages/editor/src/core/components/editors/editor-content.tsx
@@ -1,6 +1,12 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { EditorContent } from "@tiptap/react";
 import type { Editor } from "@tiptap/react";
-import type { FC, ReactNode } from "react";
+import type { ReactNode } from "react";
 
 type Props = {
   className?: string;
@@ -10,7 +16,7 @@ type Props = {
   tabIndex?: number;
 };
 
-export const EditorContentWrapper: FC<Props> = (props) => {
+export function EditorContentWrapper(props: Props) {
   const { editor, className, children, tabIndex, id } = props;
 
   return (
@@ -23,4 +29,4 @@ export const EditorContentWrapper: FC<Props> = (props) => {
       {children}
     </div>
   );
-};
+}
diff --git a/packages/editor/src/core/components/editors/editor-wrapper.tsx b/packages/editor/src/core/components/editors/editor-wrapper.tsx
index 14570a656..69f0fd2ac 100644
--- a/packages/editor/src/core/components/editors/editor-wrapper.tsx
+++ b/packages/editor/src/core/components/editors/editor-wrapper.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { Editor, Extensions } from "@tiptap/core";
 // components
 import { EditorContainer } from "@/components/editors";
@@ -41,6 +47,7 @@ export function EditorWrapper(props: Props) {
     handleEditorReady,
     autofocus,
     placeholder,
+    showPlaceholderOnEmpty,
     tabIndex,
     value,
   } = props;
@@ -67,6 +74,7 @@ export function EditorWrapper(props: Props) {
     handleEditorReady,
     autofocus,
     placeholder,
+    showPlaceholderOnEmpty,
     tabIndex,
     value,
   });
diff --git a/packages/editor/src/core/components/editors/index.ts b/packages/editor/src/core/components/editors/index.ts
index 6248f407d..e32a2a965 100644
--- a/packages/editor/src/core/components/editors/index.ts
+++ b/packages/editor/src/core/components/editors/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./document";
 export * from "./lite-text";
 export * from "./rich-text";
diff --git a/packages/editor/src/core/components/editors/link-view-container.tsx b/packages/editor/src/core/components/editors/link-view-container.tsx
index 3b1c6132a..9b07c63a7 100644
--- a/packages/editor/src/core/components/editors/link-view-container.tsx
+++ b/packages/editor/src/core/components/editors/link-view-container.tsx
@@ -1,7 +1,12 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { autoUpdate, flip, hide, shift, useDismiss, useFloating, useInteractions } from "@floating-ui/react";
 import type { Editor } from "@tiptap/react";
 import { useEditorState } from "@tiptap/react";
-import type { FC } from "react";
 import { useCallback, useEffect, useRef, useState } from "react";
 
 // components
diff --git a/packages/editor/src/core/components/editors/lite-text/editor.tsx b/packages/editor/src/core/components/editors/lite-text/editor.tsx
index 6734058d1..41f986ea0 100644
--- a/packages/editor/src/core/components/editors/lite-text/editor.tsx
+++ b/packages/editor/src/core/components/editors/lite-text/editor.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { forwardRef, useMemo } from "react";
 // components
 import { EditorWrapper } from "@/components/editors/editor-wrapper";
diff --git a/packages/editor/src/core/components/editors/lite-text/index.ts b/packages/editor/src/core/components/editors/lite-text/index.ts
index 8b1fd904b..4c9233aa4 100644
--- a/packages/editor/src/core/components/editors/lite-text/index.ts
+++ b/packages/editor/src/core/components/editors/lite-text/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./editor";
diff --git a/packages/editor/src/core/components/editors/rich-text/editor.tsx b/packages/editor/src/core/components/editors/rich-text/editor.tsx
index 557ab7660..1ab43e8e7 100644
--- a/packages/editor/src/core/components/editors/rich-text/editor.tsx
+++ b/packages/editor/src/core/components/editors/rich-text/editor.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { forwardRef, useCallback } from "react";
 // components
 import { EditorWrapper } from "@/components/editors";
diff --git a/packages/editor/src/core/components/editors/rich-text/index.ts b/packages/editor/src/core/components/editors/rich-text/index.ts
index 8b1fd904b..4c9233aa4 100644
--- a/packages/editor/src/core/components/editors/rich-text/index.ts
+++ b/packages/editor/src/core/components/editors/rich-text/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./editor";
diff --git a/packages/editor/src/core/components/links/index.ts b/packages/editor/src/core/components/links/index.ts
index 4bd24e373..206f7cec4 100644
--- a/packages/editor/src/core/components/links/index.ts
+++ b/packages/editor/src/core/components/links/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./link-edit-view";
 export * from "./link-preview";
 export * from "./link-view";
diff --git a/packages/editor/src/core/components/links/link-edit-view.tsx b/packages/editor/src/core/components/links/link-edit-view.tsx
index d183630fd..3adbefa27 100644
--- a/packages/editor/src/core/components/links/link-edit-view.tsx
+++ b/packages/editor/src/core/components/links/link-edit-view.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { Node } from "@tiptap/pm/model";
 import { Link2Off } from "lucide-react";
 import { useCallback, useEffect, useRef, useState } from "react";
@@ -17,11 +23,11 @@ type InputViewProps = {
 function InputView({ label, value, placeholder, onChange, autoFocus }: InputViewProps) {
   return (
     <div className="flex flex-col gap-1">
-      <label className="inline-block font-semibold text-xs text-custom-text-400">{label}</label>
+      <label className="inline-block text-11 font-semibold text-placeholder">{label}</label>
       <input
         placeholder={placeholder}
         onClick={(e) => e.stopPropagation()}
-        className="w-[280px] outline-none bg-custom-background-90 text-custom-text-900 text-sm border border-custom-border-300 rounded-md p-2"
+        className="w-[280px] rounded-md border border-strong bg-layer-1 p-2 text-13 text-primary outline-none"
         value={value}
         onChange={(e) => onChange(e.target.value)}
         autoFocus={autoFocus}
@@ -132,7 +138,7 @@ export function LinkEditView({ viewProps }: LinkEditViewProps) {
   return (
     <div
       onKeyDown={handleKeyDown}
-      className="shadow-md rounded p-2 flex flex-col gap-3 bg-custom-background-90 border-custom-border-100 border-2 animate-in fade-in translate-y-1"
+      className="shadow-md animate-in fade-in flex translate-y-1 flex-col gap-3 rounded-sm border-2 border-subtle bg-layer-1 p-2"
       style={{
         transition: "all 0.1s cubic-bezier(.55, .085, .68, .53)",
       }}
@@ -140,10 +146,10 @@ export function LinkEditView({ viewProps }: LinkEditViewProps) {
     >
       <InputView label="URL" placeholder="Enter or paste URL" value={localUrl} onChange={setLocalUrl} autoFocus />
       <InputView label="Text" placeholder="Enter Text to display" value={localText} onChange={handleTextChange} />
-      <div className="mb-1 bg-custom-border-300 h-[1px] w-full gap-2" />
-      <div className="flex text-sm text-custom-text-800 gap-2 items-center">
+      <div className="bg-strong mb-1 h-[1px] w-full gap-2" />
+      <div className="flex items-center gap-2 text-13 text-secondary">
         <Link2Off size={14} className="inline-block" />
-        <button onClick={removeLink} className="cursor-pointer hover:text-custom-text-400 transition-colors">
+        <button onClick={removeLink} className="cursor-pointer transition-colors hover:text-placeholder">
           Remove Link
         </button>
       </div>
diff --git a/packages/editor/src/core/components/links/link-preview.tsx b/packages/editor/src/core/components/links/link-preview.tsx
index 8ceb0471e..f47c97bd4 100644
--- a/packages/editor/src/core/components/links/link-preview.tsx
+++ b/packages/editor/src/core/components/links/link-preview.tsx
@@ -1,4 +1,11 @@
-import { Copy, GlobeIcon, Link2Off, PencilIcon } from "lucide-react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { Link2Off } from "lucide-react";
+import { CopyIcon, GlobeIcon, EditIcon } from "@plane/propel/icons";
 // components
 import type { LinkViewProps, LinkViews } from "@/components/links";
 
@@ -23,27 +30,27 @@ export function LinkPreview({
 
   return (
     <div
-      className="absolute left-0 top-0 max-w-max animate-in fade-in translate-y-1"
+      className="animate-in fade-in absolute top-0 left-0 max-w-max translate-y-1"
       style={{
         transition: "all 0.2s cubic-bezier(.55, .085, .68, .53)",
       }}
     >
-      <div className="shadow-md items-center rounded p-2 flex gap-3 bg-custom-background-90 border-custom-border-100 border-2 text-custom-text-300 text-xs">
-        <GlobeIcon size={14} className="inline-block" />
+      <div className="shadow-md flex items-center gap-3 rounded-sm border-2 border-subtle bg-layer-1 p-2 text-11 text-tertiary">
+        <GlobeIcon width={14} height={14} className="inline-block" />
         <p>{url?.length > 40 ? url.slice(0, 40) + "..." : url}</p>
         <div className="flex gap-2">
-          <button onClick={copyLinkToClipboard} className="cursor-pointer hover:text-custom-text-100 transition-colors">
-            <Copy size={14} className="inline-block" />
+          <button onClick={copyLinkToClipboard} className="cursor-pointer transition-colors hover:text-primary">
+            <CopyIcon width={14} height={14} className="inline-block" />
           </button>
           {editor.isEditable && (
             <>
               <button
                 onClick={() => switchView("LinkEditView")}
-                className="cursor-pointer hover:text-custom-text-100 transition-colors"
+                className="cursor-pointer transition-colors hover:text-primary"
               >
-                <PencilIcon size={14} className="inline-block" />
+                <EditIcon width={14} height={14} className="inline-block" />
               </button>
-              <button onClick={removeLink} className="cursor-pointer hover:text-custom-text-100 transition-colors">
+              <button onClick={removeLink} className="cursor-pointer transition-colors hover:text-primary">
                 <Link2Off size={14} className="inline-block" />
               </button>
             </>
diff --git a/packages/editor/src/core/components/links/link-view.tsx b/packages/editor/src/core/components/links/link-view.tsx
index 4bf0996fc..f6d1874e3 100644
--- a/packages/editor/src/core/components/links/link-view.tsx
+++ b/packages/editor/src/core/components/links/link-view.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { Editor } from "@tiptap/react";
 import type { CSSProperties } from "react";
 import { useEffect, useState } from "react";
diff --git a/packages/editor/src/core/components/menus/ai-menu.tsx b/packages/editor/src/core/components/menus/ai-menu.tsx
index be7a4cf98..5a046d816 100644
--- a/packages/editor/src/core/components/menus/ai-menu.tsx
+++ b/packages/editor/src/core/components/menus/ai-menu.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useCallback, useEffect, useRef, useState } from "react";
 import tippy from "tippy.js";
 import type { Instance } from "tippy.js";
@@ -82,8 +88,8 @@ export function AIFeaturesMenu(props: Props) {
 
   return (
     <div
-      className={cn("opacity-0 pointer-events-none fixed inset-0 size-full z-10 transition-opacity", {
-        "opacity-100 pointer-events-auto": isPopupVisible,
+      className={cn("pointer-events-none fixed inset-0 z-10 size-full opacity-0 transition-opacity", {
+        "pointer-events-auto opacity-100": isPopupVisible,
       })}
     >
       <div ref={menuRef} className="z-10">
diff --git a/packages/editor/src/core/components/menus/block-menu-options.tsx b/packages/editor/src/core/components/menus/block-menu-options.tsx
index d260d8a60..9a8b42c7f 100644
--- a/packages/editor/src/core/components/menus/block-menu-options.tsx
+++ b/packages/editor/src/core/components/menus/block-menu-options.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { Node as ProseMirrorNode } from "@tiptap/pm/model";
 import { TableMap } from "@tiptap/pm/tables";
 import type { Editor } from "@tiptap/react";
diff --git a/packages/editor/src/core/components/menus/block-menu.tsx b/packages/editor/src/core/components/menus/block-menu.tsx
index e3fc562ae..c3dff0d20 100644
--- a/packages/editor/src/core/components/menus/block-menu.tsx
+++ b/packages/editor/src/core/components/menus/block-menu.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import {
   useFloating,
   autoUpdate,
@@ -10,8 +16,8 @@ import {
 } from "@floating-ui/react";
 import type { Editor } from "@tiptap/react";
 import type { LucideIcon } from "lucide-react";
-import { Copy, Trash2 } from "lucide-react";
 import { useCallback, useEffect, useRef, useState } from "react";
+import { CopyIcon, TrashIcon } from "@plane/propel/icons";
 import type { ISvgIcons } from "@plane/propel/icons";
 import { cn } from "@plane/utils";
 // constants
@@ -36,7 +42,7 @@ export type BlockMenuOption = {
 };
 
 export function BlockMenu(props: Props) {
-  const { editor, workItemIdentifier } = props;
+  const { editor } = props;
   const [isOpen, setIsOpen] = useState(false);
   const [isAnimatedIn, setIsAnimatedIn] = useState(false);
   const menuRef = useRef<HTMLDivElement | null>(null);
@@ -144,7 +150,7 @@ export function BlockMenu(props: Props) {
 
   const MENU_ITEMS: BlockMenuOption[] = [
     {
-      icon: Trash2,
+      icon: TrashIcon,
       key: "delete",
       label: "Delete",
       onClick: (_e) => {
@@ -153,7 +159,7 @@ export function BlockMenu(props: Props) {
       },
     },
     {
-      icon: Copy,
+      icon: CopyIcon,
       key: "duplicate",
       label: "Duplicate",
       isDisabled:
@@ -216,9 +222,9 @@ export function BlockMenu(props: Props) {
           zIndex: 100,
         }}
         className={cn(
-          "max-h-60 min-w-[7rem] overflow-y-scroll rounded-lg border border-custom-border-200 bg-custom-background-100 p-1.5 shadow-custom-shadow-rg",
-          "transition-all duration-300 transform origin-top-right",
-          isAnimatedIn ? "opacity-100 scale-100" : "opacity-0 scale-75"
+          "max-h-60 min-w-[7rem] overflow-y-scroll rounded-lg border border-subtle bg-surface-1 p-1.5 shadow-raised-200",
+          "origin-top-right transform transition-all duration-300",
+          isAnimatedIn ? "scale-100 opacity-100" : "scale-75 opacity-0"
         )}
         {...getFloatingProps()}
       >
@@ -229,7 +235,7 @@ export function BlockMenu(props: Props) {
             <button
               key={item.key}
               type="button"
-              className="flex w-full items-center gap-1.5 truncate rounded px-1 py-1.5 text-xs text-custom-text-200 hover:bg-custom-background-90"
+              className="flex w-full items-center gap-1.5 truncate rounded-sm px-1 py-1.5 text-11 text-secondary hover:bg-layer-1"
               onClick={(e) => {
                 item.onClick(e);
                 e.preventDefault();
diff --git a/packages/editor/src/core/components/menus/bubble-menu/alignment-selector.tsx b/packages/editor/src/core/components/menus/bubble-menu/alignment-selector.tsx
index 2057a3bcc..0bfad5a67 100644
--- a/packages/editor/src/core/components/menus/bubble-menu/alignment-selector.tsx
+++ b/packages/editor/src/core/components/menus/bubble-menu/alignment-selector.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { Editor } from "@tiptap/core";
 import type { LucideIcon } from "lucide-react";
 import { AlignCenter, AlignLeft, AlignRight } from "lucide-react";
@@ -69,9 +75,9 @@ export function TextAlignmentSelector(props: Props) {
             item.command();
           }}
           className={cn(
-            "size-7 grid place-items-center rounded text-custom-text-300 hover:bg-custom-background-80 active:bg-custom-background-80 transition-colors",
+            "grid size-7 place-items-center rounded-sm text-tertiary transition-colors hover:bg-layer-1 active:bg-layer-1",
             {
-              "bg-custom-background-80 text-custom-text-100": item.isActive(),
+              "bg-layer-1 text-primary": item.isActive(),
             }
           )}
         >
diff --git a/packages/editor/src/core/components/menus/bubble-menu/color-selector.tsx b/packages/editor/src/core/components/menus/bubble-menu/color-selector.tsx
index 83e5a8100..d8151b8b6 100644
--- a/packages/editor/src/core/components/menus/bubble-menu/color-selector.tsx
+++ b/packages/editor/src/core/components/menus/bubble-menu/color-selector.tsx
@@ -1,7 +1,12 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { Editor } from "@tiptap/react";
 import { ALargeSmall, Ban } from "lucide-react";
 import { useMemo } from "react";
-import type { FC } from "react";
 // plane utils
 import { cn } from "@plane/utils";
 // constants
@@ -30,25 +35,22 @@ export function BubbleMenuColorSelector(props: Props) {
       classNames={{
         buttonContainer: "h-full",
         button:
-          "flex items-center gap-1 h-full whitespace-nowrap px-3 text-sm font-medium text-custom-text-300 hover:bg-custom-background-80 active:bg-custom-background-80 rounded transition-colors",
+          "flex items-center gap-1 h-full whitespace-nowrap px-3 text-13 font-medium text-tertiary hover:bg-layer-1 active:bg-layer-1 rounded-sm transition-colors",
       }}
       menuButton={
         <>
           <span>Color</span>
           <span
-            className={cn(
-              "flex-shrink-0 size-6 grid place-items-center rounded border-[0.5px] border-custom-border-300",
-              {
-                "bg-custom-background-100": !activeBackgroundColor,
-              }
-            )}
+            className={cn("grid size-6 flex-shrink-0 place-items-center rounded-sm border-[0.5px] border-strong", {
+              "bg-surface-1": !activeBackgroundColor,
+            })}
             style={{
               backgroundColor: activeBackgroundColor ? activeBackgroundColor.backgroundColor : "transparent",
             }}
           >
             <ALargeSmall
               className={cn("size-3.5", {
-                "text-custom-text-100": !activeTextColor,
+                "text-primary": !activeTextColor,
               })}
               style={{
                 color: activeTextColor ? activeTextColor.textColor : "inherit",
@@ -61,15 +63,15 @@ export function BubbleMenuColorSelector(props: Props) {
       getFloatingProps={getFloatingProps}
       getReferenceProps={getReferenceProps}
     >
-      <section className="mt-1 rounded-md border-[0.5px] border-custom-border-300 bg-custom-background-100 p-2 space-y-2 shadow-custom-shadow-rg">
+      <section className="mt-1 space-y-2 rounded-md border-[0.5px] border-strong bg-surface-1 p-2 shadow-raised-200">
         <div className="space-y-1.5">
-          <p className="text-xs text-custom-text-300 font-semibold">Text colors</p>
+          <p className="text-11 font-semibold text-tertiary">Text colors</p>
           <div className="flex items-center gap-2">
             {COLORS_LIST.map((color) => (
               <button
                 key={color.key}
                 type="button"
-                className="flex-shrink-0 size-6 rounded border-[0.5px] border-custom-border-400 hover:opacity-60 transition-opacity"
+                className="size-6 flex-shrink-0 rounded-sm border-[0.5px] border-strong-1 transition-opacity hover:opacity-60"
                 style={{
                   backgroundColor: color.textColor,
                 }}
@@ -78,7 +80,7 @@ export function BubbleMenuColorSelector(props: Props) {
             ))}
             <button
               type="button"
-              className="flex-shrink-0 size-6 grid place-items-center rounded text-custom-text-300 border-[0.5px] border-custom-border-400 hover:bg-custom-background-80 transition-colors"
+              className="grid size-6 flex-shrink-0 place-items-center rounded-sm border-[0.5px] border-strong-1 text-tertiary transition-colors hover:bg-layer-1"
               onClick={() => TextColorItem(editor).command({ color: undefined })}
             >
               <Ban className="size-4" />
@@ -86,13 +88,13 @@ export function BubbleMenuColorSelector(props: Props) {
           </div>
         </div>
         <div className="space-y-1.5">
-          <p className="text-xs text-custom-text-300 font-semibold">Background colors</p>
+          <p className="text-11 font-semibold text-tertiary">Background colors</p>
           <div className="flex items-center gap-2">
             {COLORS_LIST.map((color) => (
               <button
                 key={color.key}
                 type="button"
-                className="flex-shrink-0 size-6 rounded border-[0.5px] border-custom-border-400 hover:opacity-60 transition-opacity"
+                className="size-6 flex-shrink-0 rounded-sm border-[0.5px] border-strong-1 transition-opacity hover:opacity-60"
                 style={{
                   backgroundColor: color.backgroundColor,
                 }}
@@ -101,7 +103,7 @@ export function BubbleMenuColorSelector(props: Props) {
             ))}
             <button
               type="button"
-              className="flex-shrink-0 size-6 grid place-items-center rounded text-custom-text-300 border-[0.5px] border-custom-border-400 hover:bg-custom-background-80 transition-colors"
+              className="grid size-6 flex-shrink-0 place-items-center rounded-sm border-[0.5px] border-strong-1 text-tertiary transition-colors hover:bg-layer-1"
               onClick={() => BackgroundColorItem(editor).command({ color: undefined })}
             >
               <Ban className="size-4" />
diff --git a/packages/editor/src/core/components/menus/bubble-menu/index.ts b/packages/editor/src/core/components/menus/bubble-menu/index.ts
index f06aeab63..122fad4f1 100644
--- a/packages/editor/src/core/components/menus/bubble-menu/index.ts
+++ b/packages/editor/src/core/components/menus/bubble-menu/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./color-selector";
 export * from "./node-selector";
 export * from "./root";
diff --git a/packages/editor/src/core/components/menus/bubble-menu/link-selector.tsx b/packages/editor/src/core/components/menus/bubble-menu/link-selector.tsx
index 50c062323..074505938 100644
--- a/packages/editor/src/core/components/menus/bubble-menu/link-selector.tsx
+++ b/packages/editor/src/core/components/menus/bubble-menu/link-selector.tsx
@@ -1,7 +1,13 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { Editor } from "@tiptap/core";
-import { Check, Link, Trash2 } from "lucide-react";
-import type { FC } from "react";
+
 import { useCallback, useRef, useState } from "react";
+import { LinkIcon, TrashIcon, CheckIcon } from "@plane/propel/icons";
 // plane imports
 import { cn } from "@plane/utils";
 // constants
@@ -46,10 +52,10 @@ export function BubbleMenuLinkSelector(props: Props) {
       classNames={{
         buttonContainer: "h-full",
         button: cn(
-          "h-full flex items-center gap-1 px-3 text-sm font-medium text-custom-text-300 hover:bg-custom-background-80 active:bg-custom-background-80 rounded whitespace-nowrap transition-colors",
+          "flex h-full items-center gap-1 rounded-sm px-3 text-13 font-medium whitespace-nowrap text-tertiary transition-colors hover:bg-layer-1 active:bg-layer-1",
           {
-            "bg-custom-background-80": context.open,
-            "text-custom-text-100": editor.isActive(CORE_EXTENSIONS.CUSTOM_LINK),
+            "bg-layer-1": context.open,
+            "text-primary": editor.isActive(CORE_EXTENSIONS.CUSTOM_LINK),
           }
         ),
       }}
@@ -58,15 +64,15 @@ export function BubbleMenuLinkSelector(props: Props) {
       menuButton={
         <>
           Link
-          <Link className="shrink-0 size-3" />
+          <LinkIcon className="size-3 shrink-0" />
         </>
       }
       options={options}
     >
-      <div className="w-60 mt-1 rounded-md bg-custom-background-100 shadow-custom-shadow-rg">
+      <div className="mt-1 w-60 rounded-md bg-surface-1 shadow-raised-200">
         <div
-          className={cn("flex rounded  border-[0.5px] border-custom-border-300 transition-colors", {
-            "border-red-500": error,
+          className={cn("flex rounded-sm border-[0.5px] border-strong transition-colors", {
+            "border-danger-strong": error,
           })}
         >
           <input
@@ -74,7 +80,7 @@ export function BubbleMenuLinkSelector(props: Props) {
             type="url"
             placeholder="Enter or paste a link"
             onClick={(e) => e.stopPropagation()}
-            className="flex-1 border-r-[0.5px] border-custom-border-300 bg-custom-background-100 py-2 px-1.5 text-xs outline-none placeholder:text-custom-text-400 rounded"
+            className="flex-1 rounded-sm border-r-[0.5px] border-strong bg-surface-1 px-1.5 py-2 text-11 outline-none placeholder:text-placeholder"
             defaultValue={editor.getAttributes("link").href || ""}
             onKeyDown={(e) => {
               setError(false);
@@ -89,30 +95,30 @@ export function BubbleMenuLinkSelector(props: Props) {
           {editor.getAttributes("link").href ? (
             <button
               type="button"
-              className="grid place-items-center rounded-sm p-1 text-red-500 hover:bg-red-500/20 transition-all"
+              className="grid place-items-center rounded-xs p-1 text-danger-primary transition-all hover:bg-danger-subtle-hover"
               onClick={(e) => {
                 unsetLinkEditor(editor);
                 e.stopPropagation();
                 context.onOpenChange(false);
               }}
             >
-              <Trash2 className="size-4" />
+              <TrashIcon className="size-4" />
             </button>
           ) : (
             <button
               type="button"
-              className="h-full aspect-square grid place-items-center p-1 rounded-sm text-custom-text-300 hover:bg-custom-background-80 transition-all"
+              className="grid aspect-square h-full place-items-center rounded-xs p-1 text-tertiary transition-all hover:bg-layer-1"
               onClick={(e) => {
                 e.stopPropagation();
                 handleLinkSubmit();
               }}
             >
-              <Check className="size-4" />
+              <CheckIcon className="size-4" />
             </button>
           )}
         </div>
         {error && (
-          <p className="text-xs text-red-500 my-1 px-2 pointer-events-none animate-in fade-in slide-in-from-top-0">
+          <p className="animate-in fade-in slide-in-from-top-0 pointer-events-none my-1 px-2 text-11 text-danger-primary">
             Please enter a valid URL
           </p>
         )}
diff --git a/packages/editor/src/core/components/menus/bubble-menu/node-selector.tsx b/packages/editor/src/core/components/menus/bubble-menu/node-selector.tsx
index 9ed91a6bc..e31fe5635 100644
--- a/packages/editor/src/core/components/menus/bubble-menu/node-selector.tsx
+++ b/packages/editor/src/core/components/menus/bubble-menu/node-selector.tsx
@@ -1,7 +1,12 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { Editor } from "@tiptap/react";
-import { Check } from "lucide-react";
-import type { FC } from "react";
-import { ChevronDownIcon } from "@plane/propel/icons";
+
+import { CheckIcon, ChevronDownIcon } from "@plane/propel/icons";
 // plane utils
 import { cn } from "@plane/utils";
 // components
@@ -59,23 +64,23 @@ export function BubbleMenuNodeSelector(props: Props) {
       classNames={{
         buttonContainer: "h-full",
         button: cn(
-          "h-full flex items-center gap-1 px-3 text-sm font-medium text-custom-text-300 hover:bg-custom-background-80 active:bg-custom-background-80 rounded whitespace-nowrap transition-colors",
+          "flex h-full items-center gap-1 rounded-sm px-3 text-13 font-medium whitespace-nowrap text-tertiary transition-colors hover:bg-layer-1 active:bg-layer-1",
           {
-            "bg-custom-background-80": context.open,
+            "bg-layer-1": context.open,
           }
         ),
       }}
       menuButton={
         <>
           <span>{activeItem?.name}</span>
-          <ChevronDownIcon className="shrink-0 size-3" />
+          <ChevronDownIcon className="size-3 shrink-0" />
         </>
       }
       options={options}
       getFloatingProps={getFloatingProps}
       getReferenceProps={getReferenceProps}
     >
-      <section className="w-48 max-h-[90vh] mt-1 flex flex-col overflow-y-scroll rounded-md border-[0.5px] border-custom-border-300 bg-custom-background-100 px-2 py-2.5 shadow-custom-shadow-rg">
+      <section className="mt-1 flex max-h-[90vh] w-48 flex-col overflow-y-scroll rounded-md border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 shadow-raised-200">
         {items.map((item) => (
           <button
             key={item.name}
@@ -86,9 +91,9 @@ export function BubbleMenuNodeSelector(props: Props) {
               e.stopPropagation();
             }}
             className={cn(
-              "flex items-center justify-between rounded px-1 py-1.5 text-sm text-custom-text-200 hover:bg-custom-background-80",
+              "flex items-center justify-between rounded-sm px-1 py-1.5 text-13 text-secondary hover:bg-layer-1",
               {
-                "bg-custom-background-80": activeItem.name === item.name,
+                "bg-layer-1": activeItem.name === item.name,
               }
             )}
           >
@@ -96,7 +101,7 @@ export function BubbleMenuNodeSelector(props: Props) {
               <item.icon className="size-3 flex-shrink-0" />
               <span>{item.name}</span>
             </div>
-            {activeItem.name === item.name && <Check className="size-3 text-custom-text-300 flex-shrink-0" />}
+            {activeItem.name === item.name && <CheckIcon className="size-3 flex-shrink-0 text-tertiary" />}
           </button>
         ))}
       </section>
diff --git a/packages/editor/src/core/components/menus/bubble-menu/root.tsx b/packages/editor/src/core/components/menus/bubble-menu/root.tsx
index 3661f6693..017327514 100644
--- a/packages/editor/src/core/components/menus/bubble-menu/root.tsx
+++ b/packages/editor/src/core/components/menus/bubble-menu/root.tsx
@@ -1,8 +1,13 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { isNodeSelection } from "@tiptap/core";
 import type { Editor } from "@tiptap/core";
 import { BubbleMenu, useEditorState } from "@tiptap/react";
 import type { BubbleMenuProps } from "@tiptap/react";
-import type { FC } from "react";
 import { useEffect, useState, useRef } from "react";
 // plane utils
 import { cn } from "@plane/utils";
@@ -186,7 +191,7 @@ export function EditorBubbleMenu(props: Props) {
       {!isSelecting && (
         <div
           ref={menuRef}
-          className="flex py-2 divide-x divide-custom-border-200 rounded-lg border border-custom-border-200 bg-custom-background-100 shadow-custom-shadow-rg overflow-x-scroll horizontal-scrollbar scrollbar-xs"
+          className="horizontal-scrollbar flex scrollbar-xs divide-x divide-subtle-1 overflow-x-scroll rounded-lg border border-subtle bg-surface-1 py-2 shadow-raised-200"
         >
           <div className="px-2">
             <BubbleMenuNodeSelector editor={editor} />
@@ -211,9 +216,9 @@ export function EditorBubbleMenu(props: Props) {
                   e.stopPropagation();
                 }}
                 className={cn(
-                  "size-7 grid place-items-center rounded text-custom-text-300 hover:bg-custom-background-80 active:bg-custom-background-80 transition-colors",
+                  "grid size-7 place-items-center rounded-sm text-tertiary transition-colors hover:bg-layer-1 active:bg-layer-1",
                   {
-                    "bg-custom-background-80 text-custom-text-100": editorState[item.key],
+                    "bg-layer-1 text-primary": editorState[item.key],
                   }
                 )}
               >
diff --git a/packages/editor/src/core/components/menus/floating-menu/root.tsx b/packages/editor/src/core/components/menus/floating-menu/root.tsx
index 33896c1ce..1bb0882ef 100644
--- a/packages/editor/src/core/components/menus/floating-menu/root.tsx
+++ b/packages/editor/src/core/components/menus/floating-menu/root.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { FloatingOverlay, FloatingPortal } from "@floating-ui/react";
 import type { UseInteractionsReturn, UseFloatingReturn } from "@floating-ui/react";
 
diff --git a/packages/editor/src/core/components/menus/floating-menu/use-floating-menu.ts b/packages/editor/src/core/components/menus/floating-menu/use-floating-menu.ts
index e07d03386..eebeb8eb3 100644
--- a/packages/editor/src/core/components/menus/floating-menu/use-floating-menu.ts
+++ b/packages/editor/src/core/components/menus/floating-menu/use-floating-menu.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import {
   shift,
   flip,
diff --git a/packages/editor/src/core/components/menus/index.ts b/packages/editor/src/core/components/menus/index.ts
index ed4f4e7cc..6e6756359 100644
--- a/packages/editor/src/core/components/menus/index.ts
+++ b/packages/editor/src/core/components/menus/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./ai-menu";
 export * from "./bubble-menu";
 export * from "./block-menu";
diff --git a/packages/editor/src/core/components/menus/menu-items.ts b/packages/editor/src/core/components/menus/menu-items.ts
index 6fc6cfe30..74407c9a0 100644
--- a/packages/editor/src/core/components/menus/menu-items.ts
+++ b/packages/editor/src/core/components/menus/menu-items.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { Editor } from "@tiptap/react";
 import {
   BoldIcon,
@@ -21,9 +27,9 @@ import {
   MinusSquare,
   Palette,
   AlignCenter,
-  LinkIcon,
 } from "lucide-react";
 import type { LucideIcon } from "lucide-react";
+import { LinkIcon } from "@plane/propel/icons";
 // constants
 import { CORE_EXTENSIONS } from "@/constants/extension";
 // helpers
@@ -50,7 +56,7 @@ import {
 } from "@/helpers/editor-commands";
 // types
 import type { TCommandWithProps, TEditorCommands } from "@/types";
-
+import type { ISvgIcons } from "@plane/propel/icons";
 type isActiveFunction<T extends TEditorCommands> = (params?: TCommandWithProps<T>) => boolean;
 type commandFunction<T extends TEditorCommands> = (params?: TCommandWithProps<T>) => void;
 
@@ -58,7 +64,7 @@ export type EditorMenuItem<T extends TEditorCommands> = {
   key: T;
   name: string;
   command: commandFunction<T>;
-  icon: LucideIcon;
+  icon: LucideIcon | React.FC<ISvgIcons>;
   isActive: isActiveFunction<T>;
 };
 
diff --git a/packages/editor/src/core/constants/common.ts b/packages/editor/src/core/constants/common.ts
index cae55c91b..b0617ec79 100644
--- a/packages/editor/src/core/constants/common.ts
+++ b/packages/editor/src/core/constants/common.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { LucideIcon } from "lucide-react";
 import {
   AlignCenter,
diff --git a/packages/editor/src/core/constants/config.ts b/packages/editor/src/core/constants/config.ts
index cdca81459..64508e63e 100644
--- a/packages/editor/src/core/constants/config.ts
+++ b/packages/editor/src/core/constants/config.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // types
 import type { TDisplayConfig } from "@/types";
 
@@ -26,6 +32,7 @@ export const ACCEPTED_ATTACHMENT_MIME_TYPES = [
   "application/vnd.ms-powerpoint",
   "application/vnd.openxmlformats-officedocument.presentationml.presentation",
   "text/plain",
+  "text/markdown",
   "application/rtf",
   "audio/mpeg",
   "audio/wav",
diff --git a/packages/editor/src/core/constants/document-collaborative-events.ts b/packages/editor/src/core/constants/document-collaborative-events.ts
index 6859c588a..e8df6f1de 100644
--- a/packages/editor/src/core/constants/document-collaborative-events.ts
+++ b/packages/editor/src/core/constants/document-collaborative-events.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { EPageAccess } from "@plane/constants";
 import type { TPage } from "@plane/types";
 import type { CreatePayload, BaseActionPayload } from "@/types";
diff --git a/packages/editor/src/core/constants/extension.ts b/packages/editor/src/core/constants/extension.ts
index 369be0648..3226cfd8d 100644
--- a/packages/editor/src/core/constants/extension.ts
+++ b/packages/editor/src/core/constants/extension.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export enum CORE_EXTENSIONS {
   BLOCKQUOTE = "blockquote",
   BOLD = "bold",
diff --git a/packages/editor/src/core/constants/meta.ts b/packages/editor/src/core/constants/meta.ts
index 1a01ecaa5..6a4aa87a6 100644
--- a/packages/editor/src/core/constants/meta.ts
+++ b/packages/editor/src/core/constants/meta.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export enum CORE_EDITOR_META {
   SKIP_FILE_DELETION = "skipFileDeletion",
   INTENTIONAL_DELETION = "intentionalDeletion",
diff --git a/packages/editor/src/core/contexts/collaboration-context.tsx b/packages/editor/src/core/contexts/collaboration-context.tsx
index 272f029df..a4dc1fb41 100644
--- a/packages/editor/src/core/contexts/collaboration-context.tsx
+++ b/packages/editor/src/core/contexts/collaboration-context.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React, { createContext, useContext } from "react";
 // hooks
 import { useYjsSetup } from "@/hooks/use-yjs-setup";
diff --git a/packages/editor/src/core/contexts/index.ts b/packages/editor/src/core/contexts/index.ts
index f536f2b21..45651a3b6 100644
--- a/packages/editor/src/core/contexts/index.ts
+++ b/packages/editor/src/core/contexts/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./collaboration-context";
diff --git a/packages/editor/src/core/extensions/callout/block.tsx b/packages/editor/src/core/extensions/callout/block.tsx
index 906bbb6f4..4d1fb211f 100644
--- a/packages/editor/src/core/extensions/callout/block.tsx
+++ b/packages/editor/src/core/extensions/callout/block.tsx
@@ -1,6 +1,12 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { NodeViewProps } from "@tiptap/react";
 import { NodeViewContent, NodeViewWrapper } from "@tiptap/react";
-import React, { useState } from "react";
+import { useState } from "react";
 // constants
 import { COLORS_LIST } from "@/constants/common";
 // local components
@@ -29,12 +35,14 @@ export function CustomCalloutBlock(props: CustomCalloutNodeViewProps) {
 
   return (
     <NodeViewWrapper
-      className="editor-callout-component group/callout-node relative bg-custom-background-90 rounded-lg text-custom-text-100 p-4 my-2 flex items-start gap-4 transition-colors duration-500 break-words"
+      key={node.attrs[ECalloutAttributeNames.ID]}
+      className="editor-callout-component group/callout-node relative my-2 flex items-start gap-4 rounded-lg bg-layer-3 p-4 break-words text-primary transition-colors duration-500"
       style={{
         backgroundColor: activeBackgroundColor,
       }}
     >
       <CalloutBlockLogoSelector
+        key={node.attrs[ECalloutAttributeNames.ID]}
         blockAttributes={node.attrs}
         disabled={!editor.isEditable}
         isOpen={isEmojiPickerOpen}
diff --git a/packages/editor/src/core/extensions/callout/color-selector.tsx b/packages/editor/src/core/extensions/callout/color-selector.tsx
index 740b7654e..a51e2f4ea 100644
--- a/packages/editor/src/core/extensions/callout/color-selector.tsx
+++ b/packages/editor/src/core/extensions/callout/color-selector.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { Ban } from "lucide-react";
 import { ChevronDownIcon } from "@plane/propel/icons";
 // plane utils
@@ -22,9 +28,9 @@ export function CalloutBlockColorSelector(props: Props) {
 
   return (
     <div
-      className={cn("opacity-0 pointer-events-none absolute top-2 right-2 z-10 transition-opacity", {
-        "group-hover/callout-node:opacity-100 group-hover/callout-node:pointer-events-auto": !disabled,
-        "opacity-100 pointer-events-auto": isOpen,
+      className={cn("pointer-events-none absolute top-2 right-2 z-10 opacity-0 transition-opacity", {
+        "group-hover/callout-node:pointer-events-auto group-hover/callout-node:opacity-100": !disabled,
+        "pointer-events-auto opacity-100": isOpen,
       })}
       contentEditable={false}
     >
@@ -36,24 +42,24 @@ export function CalloutBlockColorSelector(props: Props) {
             e.stopPropagation();
           }}
           className={cn(
-            "flex items-center gap-1 h-full whitespace-nowrap py-1 px-2.5 text-sm font-medium text-custom-text-300 hover:bg-white/10 active:bg-custom-background-80 rounded transition-colors",
+            "flex h-full items-center gap-1 rounded-sm px-2.5 py-1 text-13 font-medium whitespace-nowrap text-tertiary transition-colors hover:bg-layer-1-hover active:bg-layer-1-active",
             {
-              "bg-white/10": isOpen,
+              "bg-layer-1": isOpen,
             }
           )}
           disabled={disabled}
         >
-          <span>Color</span>
-          <ChevronDownIcon className="flex-shrink-0 size-3" />
+          <span className="text-12">Color</span>
+          <ChevronDownIcon className="size-3 flex-shrink-0" />
         </button>
         {isOpen && (
-          <section className="absolute top-full right-0 z-10 mt-1 rounded-md border-[0.5px] border-custom-border-300 bg-custom-background-100 p-2 shadow-custom-shadow-rg animate-in fade-in slide-in-from-top-1">
+          <section className="animate-in fade-in slide-in-from-top-1 absolute top-full right-0 z-10 mt-1 rounded-md border-[0.5px] border-strong bg-surface-1 p-2 shadow-raised-200">
             <div className="flex items-center gap-2">
               {COLORS_LIST.map((color) => (
                 <button
                   key={color.key}
                   type="button"
-                  className="flex-shrink-0 size-6 rounded border-[0.5px] border-custom-border-400 hover:opacity-60 transition-opacity"
+                  className="size-6 flex-shrink-0 rounded-sm border-[0.5px] border-strong-1 transition-opacity hover:opacity-60"
                   style={{
                     backgroundColor: color.backgroundColor,
                   }}
@@ -62,7 +68,7 @@ export function CalloutBlockColorSelector(props: Props) {
               ))}
               <button
                 type="button"
-                className="flex-shrink-0 size-6 grid place-items-center rounded text-custom-text-300 border-[0.5px] border-custom-border-400 hover:bg-custom-background-80 transition-colors"
+                className="grid size-6 flex-shrink-0 place-items-center rounded-sm border-[0.5px] border-strong-1 text-tertiary transition-colors hover:bg-layer-1-hover"
                 onClick={() => handleColorSelect(null)}
               >
                 <Ban className="size-4" />
diff --git a/packages/editor/src/core/extensions/callout/extension-config.ts b/packages/editor/src/core/extensions/callout/extension-config.ts
index f7fe0ce97..dd5ab7834 100644
--- a/packages/editor/src/core/extensions/callout/extension-config.ts
+++ b/packages/editor/src/core/extensions/callout/extension-config.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { Node, mergeAttributes } from "@tiptap/core";
 import type { MarkdownSerializerState } from "@tiptap/pm/markdown";
 import type { Node as ProseMirrorNode } from "@tiptap/pm/model";
diff --git a/packages/editor/src/core/extensions/callout/extension.tsx b/packages/editor/src/core/extensions/callout/extension.tsx
index bb256ca77..5868583e9 100644
--- a/packages/editor/src/core/extensions/callout/extension.tsx
+++ b/packages/editor/src/core/extensions/callout/extension.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { findParentNodeClosestToPos, ReactNodeViewRenderer } from "@tiptap/react";
 import type { Predicate } from "@tiptap/react";
 // constants
diff --git a/packages/editor/src/core/extensions/callout/index.ts b/packages/editor/src/core/extensions/callout/index.ts
index 2ce32da8b..2dcbf265b 100644
--- a/packages/editor/src/core/extensions/callout/index.ts
+++ b/packages/editor/src/core/extensions/callout/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./extension";
diff --git a/packages/editor/src/core/extensions/callout/logo-selector.tsx b/packages/editor/src/core/extensions/callout/logo-selector.tsx
index 1e016356a..a12c1373f 100644
--- a/packages/editor/src/core/extensions/callout/logo-selector.tsx
+++ b/packages/editor/src/core/extensions/callout/logo-selector.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // plane imports
 import { EmojiPicker, EmojiIconPickerTypes, Logo } from "@plane/propel/emoji-icon-picker";
 import type { TLogoProps } from "@plane/types";
@@ -33,12 +39,12 @@ export function CalloutBlockLogoSelector(props: Props) {
   return (
     <div contentEditable={false}>
       <EmojiPicker
-        closeOnSelect={false}
+        closeOnSelect={true}
         isOpen={isOpen}
         handleToggle={handleOpen}
-        className="flex-shrink-0 grid place-items-center"
-        buttonClassName={cn("flex-shrink-0 size-8 grid place-items-center rounded-lg", {
-          "hover:bg-white/10": !disabled,
+        className="grid flex-shrink-0 place-items-center"
+        buttonClassName={cn("grid size-8 flex-shrink-0 place-items-center rounded-lg text-primary", {
+          "hover:bg-layer-1-hover": !disabled,
         })}
         label={<Logo logo={logoValue} size={18} type="lucide" />}
         onChange={(val) => {
diff --git a/packages/editor/src/core/extensions/callout/types.ts b/packages/editor/src/core/extensions/callout/types.ts
index 166297607..3ec0529f4 100644
--- a/packages/editor/src/core/extensions/callout/types.ts
+++ b/packages/editor/src/core/extensions/callout/types.ts
@@ -1,6 +1,13 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { Node as ProseMirrorNode } from "@tiptap/core";
 
 export enum ECalloutAttributeNames {
+  ID = "id",
   ICON_COLOR = "data-icon-color",
   ICON_NAME = "data-icon-name",
   EMOJI_UNICODE = "data-emoji-unicode",
@@ -21,6 +28,7 @@ export type TCalloutBlockEmojiAttributes = {
 };
 
 export type TCalloutBlockAttributes = {
+  [ECalloutAttributeNames.ID]: string | null;
   [ECalloutAttributeNames.LOGO_IN_USE]: "emoji" | "icon";
   [ECalloutAttributeNames.BACKGROUND]: string | undefined;
   [ECalloutAttributeNames.BLOCK_TYPE]: "callout-component";
diff --git a/packages/editor/src/core/extensions/callout/utils.ts b/packages/editor/src/core/extensions/callout/utils.ts
index d6e545dbd..dd83f62e2 100644
--- a/packages/editor/src/core/extensions/callout/utils.ts
+++ b/packages/editor/src/core/extensions/callout/utils.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // plane imports
 import type { TLogoProps } from "@plane/types";
 import { sanitizeHTML } from "@plane/utils";
@@ -6,6 +12,7 @@ import type { TCalloutBlockAttributes, TCalloutBlockEmojiAttributes, TCalloutBlo
 import { ECalloutAttributeNames } from "./types";
 
 export const DEFAULT_CALLOUT_BLOCK_ATTRIBUTES: TCalloutBlockAttributes = {
+  [ECalloutAttributeNames.ID]: null,
   [ECalloutAttributeNames.LOGO_IN_USE]: "emoji",
   [ECalloutAttributeNames.ICON_COLOR]: undefined,
   [ECalloutAttributeNames.ICON_NAME]: undefined,
@@ -31,7 +38,7 @@ export const getStoredLogo = (): TStoredLogoValue => {
     if (storedData) {
       let parsedData: TLogoProps;
       try {
-        parsedData = JSON.parse(storedData);
+        parsedData = JSON.parse(storedData) as TLogoProps;
       } catch (error) {
         console.error(`Error parsing stored callout logo, stored value- ${storedData}`, error);
         localStorage.removeItem("editor-calloutComponent-logo");
diff --git a/packages/editor/src/core/extensions/code-inline/index.tsx b/packages/editor/src/core/extensions/code-inline/index.tsx
index 690f92b99..234461565 100644
--- a/packages/editor/src/core/extensions/code-inline/index.tsx
+++ b/packages/editor/src/core/extensions/code-inline/index.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { Mark, markInputRule, markPasteRule, mergeAttributes } from "@tiptap/core";
 // constants
 import { CORE_EXTENSIONS } from "@/constants/extension";
@@ -35,7 +41,7 @@ export const CustomCodeInlineExtension = Mark.create<InlineCodeOptions>({
     return {
       HTMLAttributes: {
         class:
-          "rounded bg-custom-background-80 px-[6px] py-[1.5px] font-mono font-medium text-orange-500 border-[0.5px] border-custom-border-200",
+          "rounded-sm bg-layer-3 px-[6px] py-[1.5px] font-code font-medium text-(--extended-color-orange-600) border-[0.5px] border-subtle",
         spellcheck: "false",
       },
     };
diff --git a/packages/editor/src/core/extensions/code/code-block-lowlight.ts b/packages/editor/src/core/extensions/code/code-block-lowlight.ts
index b108614ff..6356d071f 100644
--- a/packages/editor/src/core/extensions/code/code-block-lowlight.ts
+++ b/packages/editor/src/core/extensions/code/code-block-lowlight.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // import CodeBlock, { CodeBlockOptions } from "@tiptap/extension-code-block";
 
 import type { CodeBlockOptions } from "./code-block";
diff --git a/packages/editor/src/core/extensions/code/code-block-node-view.tsx b/packages/editor/src/core/extensions/code/code-block-node-view.tsx
index efe50b69d..6df877d44 100644
--- a/packages/editor/src/core/extensions/code/code-block-node-view.tsx
+++ b/packages/editor/src/core/extensions/code/code-block-node-view.tsx
@@ -1,13 +1,23 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { Node as ProseMirrorNode } from "@tiptap/pm/model";
 import { NodeViewWrapper, NodeViewContent } from "@tiptap/react";
 import ts from "highlight.js/lib/languages/typescript";
 import { common, createLowlight } from "lowlight";
-import { CopyIcon, CheckIcon } from "lucide-react";
+import { CheckIcon } from "lucide-react";
 import { useState } from "react";
+import { CopyIcon } from "@plane/propel/icons";
 // ui
-import { Tooltip } from "@plane/ui";
+import { Tooltip } from "@plane/propel/tooltip";
 // plane utils
 import { cn } from "@plane/utils";
+// types
+import type { TCodeBlockAttributes } from "./types";
+import { ECodeBlockAttributeNames } from "./types";
 
 // we just have ts support for now
 const lowlight = createLowlight(common);
@@ -19,6 +29,8 @@ type Props = {
 
 export function CodeBlockComponent({ node }: Props) {
   const [copied, setCopied] = useState(false);
+  // derived values
+  const attrs = node.attrs as TCodeBlockAttributes;
 
   const copyToClipboard = async (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
     try {
@@ -33,27 +45,27 @@ export function CodeBlockComponent({ node }: Props) {
   };
 
   return (
-    <NodeViewWrapper className="code-block relative group/code">
+    <NodeViewWrapper key={attrs[ECodeBlockAttributeNames.ID]} className="code-block group/code relative">
       <Tooltip tooltipContent="Copy code">
         <button
           type="button"
           className={cn(
-            "group/button hidden group-hover/code:flex items-center justify-center absolute top-2 right-2 z-10 size-8 rounded-md bg-custom-background-80 border border-custom-border-200 transition duration-150 ease-in-out backdrop-blur-sm",
+            "group/button absolute top-2 right-2 z-10 hidden size-8 items-center justify-center rounded-md border border-subtle bg-layer-1 backdrop-blur-sm transition duration-150 ease-in-out group-hover/code:flex",
             {
-              "bg-green-500/30 hover:bg-green-500/30 active:bg-green-500/30": copied,
+              "bg-success-subtle hover:bg-success-subtle-1 active:bg-success-subtle-1": copied,
             }
           )}
-          onClick={copyToClipboard}
+          onClick={(e) => void copyToClipboard(e)}
         >
           {copied ? (
-            <CheckIcon className="h-3 w-3 text-green-500" strokeWidth={3} />
+            <CheckIcon className="h-3 w-3 text-success-primary" strokeWidth={3} />
           ) : (
-            <CopyIcon className="h-3 w-3 text-custom-text-300 group-hover/button:text-custom-text-100" />
+            <CopyIcon className="h-3 w-3 text-tertiary group-hover/button:text-primary" />
           )}
         </button>
       </Tooltip>
 
-      <pre className="bg-custom-background-90 text-custom-text-100 rounded-lg p-4 my-2">
+      <pre className="my-2 rounded-lg bg-layer-3 p-4 text-primary">
         <NodeViewContent as="code" className="whitespace-pre-wrap" />
       </pre>
     </NodeViewWrapper>
diff --git a/packages/editor/src/core/extensions/code/code-block.ts b/packages/editor/src/core/extensions/code/code-block.ts
index 8b83c78d7..93c60f5b3 100644
--- a/packages/editor/src/core/extensions/code/code-block.ts
+++ b/packages/editor/src/core/extensions/code/code-block.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { mergeAttributes, Node, textblockTypeInputRule } from "@tiptap/core";
 import { Plugin, PluginKey } from "@tiptap/pm/state";
 // constants
diff --git a/packages/editor/src/core/extensions/code/index.tsx b/packages/editor/src/core/extensions/code/index.tsx
index 7c679e92e..da489c875 100644
--- a/packages/editor/src/core/extensions/code/index.tsx
+++ b/packages/editor/src/core/extensions/code/index.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { Selection } from "@tiptap/pm/state";
 import { ReactNodeViewRenderer } from "@tiptap/react";
 import ts from "highlight.js/lib/languages/typescript";
diff --git a/packages/editor/src/core/extensions/code/lowlight-plugin.ts b/packages/editor/src/core/extensions/code/lowlight-plugin.ts
index 2705b4068..6471f0598 100644
--- a/packages/editor/src/core/extensions/code/lowlight-plugin.ts
+++ b/packages/editor/src/core/extensions/code/lowlight-plugin.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // TODO: check all the type errors and fix them
 
 import { findChildren } from "@tiptap/core";
diff --git a/packages/editor/src/core/extensions/code/types.ts b/packages/editor/src/core/extensions/code/types.ts
new file mode 100644
index 000000000..767cb2d9c
--- /dev/null
+++ b/packages/editor/src/core/extensions/code/types.ts
@@ -0,0 +1,15 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export enum ECodeBlockAttributeNames {
+  ID = "id",
+  LANGUAGE = "language",
+}
+
+export type TCodeBlockAttributes = {
+  [ECodeBlockAttributeNames.ID]: string | null;
+  [ECodeBlockAttributeNames.LANGUAGE]: string | null;
+};
diff --git a/packages/editor/src/core/extensions/code/utils/replace-code-block-with-text.ts b/packages/editor/src/core/extensions/code/utils/replace-code-block-with-text.ts
index dbff2f898..43e43b519 100644
--- a/packages/editor/src/core/extensions/code/utils/replace-code-block-with-text.ts
+++ b/packages/editor/src/core/extensions/code/utils/replace-code-block-with-text.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { Editor } from "@tiptap/core";
 import { findParentNode } from "@tiptap/core";
 
diff --git a/packages/editor/src/core/extensions/code/without-props.tsx b/packages/editor/src/core/extensions/code/without-props.tsx
index c68c79382..50389d08f 100644
--- a/packages/editor/src/core/extensions/code/without-props.tsx
+++ b/packages/editor/src/core/extensions/code/without-props.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { Selection } from "@tiptap/pm/state";
 import ts from "highlight.js/lib/languages/typescript";
 import { common, createLowlight } from "lowlight";
diff --git a/packages/editor/src/core/extensions/core-without-props.ts b/packages/editor/src/core/extensions/core-without-props.ts
index 064f5b3e9..62ef955e4 100644
--- a/packages/editor/src/core/extensions/core-without-props.ts
+++ b/packages/editor/src/core/extensions/core-without-props.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import TaskItem from "@tiptap/extension-task-item";
 import TaskList from "@tiptap/extension-task-list";
 import { TextStyle } from "@tiptap/extension-text-style";
diff --git a/packages/editor/src/core/extensions/custom-color.ts b/packages/editor/src/core/extensions/custom-color.ts
index 8b516e8ec..a7f23e688 100644
--- a/packages/editor/src/core/extensions/custom-color.ts
+++ b/packages/editor/src/core/extensions/custom-color.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { Mark, mergeAttributes } from "@tiptap/core";
 // constants
 import { COLORS_LIST } from "@/constants/common";
diff --git a/packages/editor/src/core/extensions/custom-image/components/block.tsx b/packages/editor/src/core/extensions/custom-image/components/block.tsx
index e8b4d85ed..acb3e260c 100644
--- a/packages/editor/src/core/extensions/custom-image/components/block.tsx
+++ b/packages/editor/src/core/extensions/custom-image/components/block.tsx
@@ -1,8 +1,15 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { NodeSelection } from "@tiptap/pm/state";
 import React, { useRef, useState, useCallback, useLayoutEffect, useEffect } from "react";
 // plane imports
 import { cn } from "@plane/utils";
 // local imports
+import { ECustomImageAttributeNames } from "../types";
 import type { Pixel, TCustomImageAttributes, TCustomImageSize } from "../types";
 import { ensurePixelString, getImageBlockId, isImageDuplicating } from "../utils";
 import type { CustomImageNodeViewProps } from "./node-view";
@@ -59,7 +66,7 @@ export function CustomImageBlock(props: CustomImageBlockProps) {
   const [hasErroredOnFirstLoad, setHasErroredOnFirstLoad] = useState(false);
   const [hasTriedRestoringImageOnce, setHasTriedRestoringImageOnce] = useState(false);
   // extension options
-  const isTouchDevice = !!editor.storage.utility.isTouchDevice;
+  const isTouchDevice = !!(editor.storage.utility as { isTouchDevice?: boolean } | undefined)?.isTouchDevice;
 
   const updateAttributesSafely = useCallback(
     (attributes: Partial<TCustomImageAttributes>, errorMessage: string) => {
@@ -218,7 +225,11 @@ export function CustomImageBlock(props: CustomImageBlockProps) {
 
   return (
     <div
-      id={getImageBlockId(node.attrs.id ?? "")}
+      id={
+        node.attrs[ECustomImageAttributeNames.ID]
+          ? getImageBlockId(node.attrs[ECustomImageAttributeNames.ID])
+          : undefined
+      }
       className={cn("w-fit max-w-full transition-all", {
         "ml-[50%] -translate-x-1/2": nodeAlignment === "center",
         "ml-[100%] -translate-x-full": nodeAlignment === "right",
@@ -234,63 +245,65 @@ export function CustomImageBlock(props: CustomImageBlockProps) {
         }}
       >
         {showImageLoader && (
-          <div
-            className="animate-pulse bg-custom-background-80 rounded-md"
-            style={{ width: size.width, height: size.height }}
-          />
+          <div className="animate-pulse rounded-md bg-layer-1" style={{ width: size.width, height: size.height }} />
         )}
         <img
           ref={imageRef}
           src={displayedImageSrc}
+          alt=""
           onLoad={handleImageLoad}
-          onError={async (e) => {
-            // for old image extension this command doesn't exist or if the image failed to load for the first time
-            if (!extension.options.restoreImage || hasTriedRestoringImageOnce) {
-              setFailedToLoadImage(true);
-              return;
-            }
+          onError={(_e) =>
+            void (async () => {
+              // for old image extension this command doesn't exist or if the image failed to load for the first time
+              if (!extension.options.restoreImage || hasTriedRestoringImageOnce) {
+                setFailedToLoadImage(true);
+                return;
+              }
 
-            try {
-              setHasErroredOnFirstLoad(true);
-              // this is a type error from tiptap, don't remove await until it's fixed
-              if (!imgNodeSrc) {
-                throw new Error("No source image to restore from");
+              try {
+                setHasErroredOnFirstLoad(true);
+                // this is a type error from tiptap, don't remove await until it's fixed
+                if (!imgNodeSrc) {
+                  throw new Error("No source image to restore from");
+                }
+                await extension.options.restoreImage?.(imgNodeSrc);
+                if (!imageRef.current) {
+                  throw new Error("Image reference not found");
+                }
+                if (!resolvedImageSrc) {
+                  throw new Error("No resolved image source available");
+                }
+                if (isTouchDevice) {
+                  const refreshedSrc = await extension.options.getImageSource?.(imgNodeSrc);
+                  imageRef.current.src = refreshedSrc;
+                } else {
+                  imageRef.current.src = resolvedImageSrc;
+                }
+              } catch (error) {
+                // if the image failed to even restore, then show the error state
+                setFailedToLoadImage(true);
+                console.error("Error while loading image", error);
+              } finally {
+                setHasErroredOnFirstLoad(false);
+                setHasTriedRestoringImageOnce(true);
               }
-              await extension.options.restoreImage?.(imgNodeSrc);
-              if (!imageRef.current) {
-                throw new Error("Image reference not found");
-              }
-              if (!resolvedImageSrc) {
-                throw new Error("No resolved image source available");
-              }
-              if (isTouchDevice) {
-                const refreshedSrc = await extension.options.getImageSource?.(imgNodeSrc);
-                imageRef.current.src = refreshedSrc;
-              } else {
-                imageRef.current.src = resolvedImageSrc;
-              }
-            } catch {
-              // if the image failed to even restore, then show the error state
-              setFailedToLoadImage(true);
-              console.error("Error while loading image", e);
-            } finally {
-              setHasErroredOnFirstLoad(false);
-              setHasTriedRestoringImageOnce(true);
-            }
-          }}
+            })()
+          }
           width={size.width}
           className={cn("image-component block rounded-md", {
             // hide the image while the background calculations of the image loader are in progress (to avoid flickering) and show the loader until then
             hidden: showImageLoader,
             "read-only-image": !editor.isEditable,
-            "blur-sm opacity-80 loading-image": !resolvedImageSrc,
+            "loading-image opacity-80 blur-sm": !resolvedImageSrc,
           })}
           style={{
             width: size.width,
             ...(size.aspectRatio && { aspectRatio: size.aspectRatio }),
           }}
         />
-        {showUploadStatus && node.attrs.id && <ImageUploadStatus editor={editor} nodeId={node.attrs.id} />}
+        {showUploadStatus && node.attrs[ECustomImageAttributeNames.ID] && (
+          <ImageUploadStatus editor={editor} nodeId={node.attrs[ECustomImageAttributeNames.ID]} />
+        )}
         {showImageToolbar && (
           <ImageToolbarRoot
             alignment={nodeAlignment ?? "left"}
@@ -307,13 +320,13 @@ export function CustomImageBlock(props: CustomImageBlockProps) {
           />
         )}
         {selected && displayedImageSrc === resolvedImageSrc && (
-          <div className="absolute inset-0 size-full bg-custom-primary-500/30 pointer-events-none" />
+          <div className="pointer-events-none absolute inset-0 size-full bg-accent-primary/30" />
         )}
         {showImageResizer && (
           <>
             <div
               className={cn(
-                "absolute inset-0 border-2 border-custom-primary-100 pointer-events-none rounded-md transition-opacity duration-100 ease-in-out",
+                "pointer-events-none absolute inset-0 rounded-md border-2 border-accent-strong transition-opacity duration-100 ease-in-out",
                 {
                   "opacity-100": isResizing,
                   "opacity-0 group-hover/image-component:opacity-100": !isResizing,
@@ -322,10 +335,10 @@ export function CustomImageBlock(props: CustomImageBlockProps) {
             />
             <div
               className={cn(
-                "absolute bottom-0 translate-y-1/2 size-4 rounded-full bg-custom-primary-100 border-2 border-white transition-opacity duration-100 ease-in-out",
+                "absolute bottom-0 size-4 translate-y-1/2 rounded-full border-2 border-white bg-accent-primary transition-opacity duration-100 ease-in-out",
                 {
-                  "opacity-100 pointer-events-auto": isResizing,
-                  "opacity-0 pointer-events-none group-hover/image-component:opacity-100 group-hover/image-component:pointer-events-auto":
+                  "pointer-events-auto opacity-100": isResizing,
+                  "pointer-events-none opacity-0 group-hover/image-component:pointer-events-auto group-hover/image-component:opacity-100":
                     !isResizing,
                   "left-0 -translate-x-1/2 cursor-nesw-resize": nodeAlignment === "right",
                   "right-0 translate-x-1/2 cursor-nwse-resize": nodeAlignment !== "right",
diff --git a/packages/editor/src/core/extensions/custom-image/components/node-view.tsx b/packages/editor/src/core/extensions/custom-image/components/node-view.tsx
index f8143c52c..6e4104f06 100644
--- a/packages/editor/src/core/extensions/custom-image/components/node-view.tsx
+++ b/packages/editor/src/core/extensions/custom-image/components/node-view.tsx
@@ -1,9 +1,15 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { NodeViewWrapper } from "@tiptap/react";
 import type { NodeViewProps } from "@tiptap/react";
 import { useEffect, useRef, useState } from "react";
 // local imports
 import type { CustomImageExtensionType, TCustomImageAttributes } from "../types";
-import { ECustomImageStatus } from "../types";
+import { ECustomImageAttributeNames, ECustomImageStatus } from "../types";
 import { hasImageDuplicationFailed } from "../utils";
 import { CustomImageBlock } from "./block";
 import { CustomImageUploader } from "./uploader";
@@ -56,16 +62,25 @@ export function CustomImageNodeView(props: CustomImageNodeViewProps) {
       return;
     }
 
-    const getImageSource = async () => {
-      const url = await extension.options.getImageSource?.(imgNodeSrc);
-      setResolvedSrc(url);
-      const downloadUrl = await extension.options.getImageDownloadSource?.(imgNodeSrc);
-      setResolvedDownloadSrc(downloadUrl);
-    };
-    getImageSource();
-  }, [imgNodeSrc, extension.options]);
+    setResolvedSrc(undefined);
+    setResolvedDownloadSrc(undefined);
+    setFailedToLoadImage(false);
+
+    const getImageSource = async () => {
+      try {
+        const url = await extension.options.getImageSource?.(imgNodeSrc);
+        setResolvedSrc(url);
+        const downloadUrl = await extension.options.getImageDownloadSource?.(imgNodeSrc);
+        setResolvedDownloadSrc(downloadUrl);
+      } catch (error) {
+        console.error("Error fetching image source:", error);
+        setFailedToLoadImage(true);
+      }
+    };
+    void getImageSource();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [imgNodeSrc, extension.options.getImageSource, extension.options.getImageDownloadSource]);
 
-  // Handle image duplication when status is duplicating
   useEffect(() => {
     const handleDuplication = async () => {
       if (status !== ECustomImageStatus.DUPLICATING || !extension.options.duplicateImage || !imgNodeSrc) {
@@ -87,11 +102,8 @@ export function CustomImageNodeView(props: CustomImageNodeViewProps) {
           throw new Error("Duplication returned invalid asset ID");
         }
 
-        // Update node with new source and success status
-        updateAttributes({
-          src: newAssetId,
-          status: ECustomImageStatus.UPLOADED,
-        });
+        setFailedToLoadImage(false);
+        updateAttributes({ src: newAssetId, status: ECustomImageStatus.UPLOADED });
       } catch (error: unknown) {
         console.error("Failed to duplicate image:", error);
         // Update status to failed
@@ -101,7 +113,8 @@ export function CustomImageNodeView(props: CustomImageNodeViewProps) {
       }
     };
 
-    handleDuplication();
+    void handleDuplication();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [status, imgNodeSrc, extension.options.duplicateImage, updateAttributes]);
 
   useEffect(() => {
@@ -115,15 +128,17 @@ export function CustomImageNodeView(props: CustomImageNodeViewProps) {
   useEffect(() => {
     if (status === ECustomImageStatus.UPLOADED) {
       hasRetriedOnMount.current = false;
+      setFailedToLoadImage(false);
     }
   }, [status]);
 
   const hasDuplicationFailed = hasImageDuplicationFailed(status);
-  const shouldShowBlock = (isUploaded || imageFromFileSystem) && !failedToLoadImage;
+  const hasValidImageSource = imageFromFileSystem || (isUploaded && resolvedSrc);
+  const shouldShowBlock = hasValidImageSource && !failedToLoadImage && !hasDuplicationFailed;
 
   return (
-    <NodeViewWrapper>
-      <div className="p-0 mx-0 my-2" data-drag-handle ref={imageComponentRef}>
+    <NodeViewWrapper key={node.attrs[ECustomImageAttributeNames.ID]}>
+      <div className="mx-0 my-2 p-0" data-drag-handle ref={imageComponentRef}>
         {shouldShowBlock && !hasDuplicationFailed ? (
           <CustomImageBlock
             editorContainer={editorContainer}
@@ -139,7 +154,7 @@ export function CustomImageNodeView(props: CustomImageNodeViewProps) {
             failedToLoadImage={failedToLoadImage}
             hasDuplicationFailed={hasDuplicationFailed}
             loadImageFromFileSystem={setImageFromFileSystem}
-            maxFileSize={editor.storage.imageComponent?.maxFileSize}
+            maxFileSize={(editor.storage.imageComponent as { maxFileSize?: number } | undefined)?.maxFileSize ?? 0}
             setIsUploaded={setIsUploaded}
             {...props}
           />
diff --git a/packages/editor/src/core/extensions/custom-image/components/toolbar/alignment.tsx b/packages/editor/src/core/extensions/custom-image/components/toolbar/alignment.tsx
index 8d97a676f..ecdcf0c6e 100644
--- a/packages/editor/src/core/extensions/custom-image/components/toolbar/alignment.tsx
+++ b/packages/editor/src/core/extensions/custom-image/components/toolbar/alignment.tsx
@@ -1,8 +1,14 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useEffect, useRef, useState } from "react";
 // plane imports
 import { useOutsideClickDetector } from "@plane/hooks";
 import { ChevronDownIcon } from "@plane/propel/icons";
-import { Tooltip } from "@plane/ui";
+import { Tooltip } from "@plane/propel/tooltip";
 // local imports
 import type { TCustomImageAlignment } from "../../types";
 import { IMAGE_ALIGNMENT_OPTIONS } from "../../utils";
@@ -30,24 +36,24 @@ export function ImageAlignmentAction(props: Props) {
   }, [isDropdownOpen, toggleToolbarViewStatus]);
 
   return (
-    <div ref={dropdownRef} className="h-full relative">
+    <div ref={dropdownRef} className="relative h-full">
       <Tooltip disabled={isTouchDevice} tooltipContent="Align">
         <button
           type="button"
-          className="h-full flex items-center gap-1 text-white/60 hover:text-white transition-colors"
+          className="flex h-full items-center gap-1 text-white/60 transition-colors hover:text-white"
           onClick={() => setIsDropdownOpen((prev) => !prev)}
         >
-          {activeAlignmentDetails && <activeAlignmentDetails.icon className="flex-shrink-0 size-3" />}
-          <ChevronDownIcon className="flex-shrink-0 size-2" />
+          {activeAlignmentDetails && <activeAlignmentDetails.icon className="size-3 flex-shrink-0" />}
+          <ChevronDownIcon className="size-2 flex-shrink-0" />
         </button>
       </Tooltip>
       {isDropdownOpen && (
-        <div className="absolute top-full left-1/2 -translate-x-1/2 mt-0.5 h-7 bg-black/80 flex items-center gap-2 px-2 rounded">
+        <div className="absolute top-full left-1/2 mt-0.5 flex h-7 -translate-x-1/2 items-center gap-2 rounded-sm bg-black/80 px-2">
           {IMAGE_ALIGNMENT_OPTIONS.map((option) => (
             <Tooltip disabled={isTouchDevice} key={option.value} tooltipContent={option.label}>
               <button
                 type="button"
-                className="flex-shrink-0 h-full grid place-items-center text-white/60 hover:text-white transition-colors"
+                className="grid h-full flex-shrink-0 place-items-center text-white/60 transition-colors hover:text-white"
                 onClick={() => {
                   handleChange(option.value);
                   setIsDropdownOpen(false);
diff --git a/packages/editor/src/core/extensions/custom-image/components/toolbar/download.tsx b/packages/editor/src/core/extensions/custom-image/components/toolbar/download.tsx
index 97a2241b0..772ddd0fb 100644
--- a/packages/editor/src/core/extensions/custom-image/components/toolbar/download.tsx
+++ b/packages/editor/src/core/extensions/custom-image/components/toolbar/download.tsx
@@ -1,6 +1,12 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { Download } from "lucide-react";
 // plane imports
-import { Tooltip } from "@plane/ui";
+import { Tooltip } from "@plane/propel/tooltip";
 
 type Props = {
   src: string;
@@ -14,7 +20,7 @@ export function ImageDownloadAction(props: Props) {
       <button
         type="button"
         onClick={() => window.open(src, "_blank")}
-        className="flex-shrink-0 h-full grid place-items-center text-white/60 hover:text-white transition-colors"
+        className="grid h-full flex-shrink-0 place-items-center text-white/60 transition-colors hover:text-white"
         aria-label="Download image"
       >
         <Download className="size-3" />
diff --git a/packages/editor/src/core/extensions/custom-image/components/toolbar/full-screen/index.ts b/packages/editor/src/core/extensions/custom-image/components/toolbar/full-screen/index.ts
index 1efe34c51..d98033459 100644
--- a/packages/editor/src/core/extensions/custom-image/components/toolbar/full-screen/index.ts
+++ b/packages/editor/src/core/extensions/custom-image/components/toolbar/full-screen/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./root";
diff --git a/packages/editor/src/core/extensions/custom-image/components/toolbar/full-screen/modal.tsx b/packages/editor/src/core/extensions/custom-image/components/toolbar/full-screen/modal.tsx
index f292f5b27..044607e9e 100644
--- a/packages/editor/src/core/extensions/custom-image/components/toolbar/full-screen/modal.tsx
+++ b/packages/editor/src/core/extensions/custom-image/components/toolbar/full-screen/modal.tsx
@@ -1,7 +1,13 @@
-import { Download, ExternalLink, Minus, Plus } from "lucide-react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { Download, Minus } from "lucide-react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import ReactDOM from "react-dom";
-import { CloseIcon } from "@plane/propel/icons";
+import { NewTabIcon, PlusIcon, CloseIcon } from "@plane/propel/icons";
 // plane imports
 import { cn } from "@plane/utils";
 
@@ -193,8 +199,8 @@ function ImageFullScreenModalWithoutPortal(props: Props) {
 
   return (
     <div
-      className={cn("fixed inset-0 size-full z-50 bg-black/90 opacity-0 pointer-events-none transition-opacity", {
-        "opacity-100 pointer-events-auto editor-image-full-screen-modal": isFullScreenEnabled,
+      className={cn("pointer-events-none fixed inset-0 z-50 size-full bg-black/90 opacity-0 transition-opacity", {
+        "editor-image-full-screen-modal pointer-events-auto opacity-100": isFullScreenEnabled,
         "cursor-default": !isDragging,
         "cursor-grabbing": isDragging,
       })}
@@ -205,15 +211,15 @@ function ImageFullScreenModalWithoutPortal(props: Props) {
       <div
         ref={modalRef}
         onMouseDown={(e) => e.target === modalRef.current && handleClose()}
-        className="relative size-full grid place-items-center overflow-hidden"
+        className="relative grid size-full place-items-center overflow-hidden"
       >
         <button
           type="button"
           onClick={handleClose}
-          className="absolute top-10 right-10 size-8 grid place-items-center"
+          className="absolute top-10 right-10 grid size-8 place-items-center"
           aria-label="Close image viewer"
         >
-          <CloseIcon className="size-8 text-white/60 hover:text-white transition-colors" />
+          <CloseIcon className="size-8 text-white/60 transition-colors hover:text-white" />
         </button>
         <img
           ref={setImageRef}
@@ -231,7 +237,7 @@ function ImageFullScreenModalWithoutPortal(props: Props) {
           }}
           onMouseDown={handleMouseDown}
         />
-        <div className="fixed bottom-10 left-1/2 -translate-x-1/2 flex items-center justify-center gap-1 rounded-md border border-white/20 py-2 divide-x divide-white/20 bg-black">
+        <div className="fixed bottom-10 left-1/2 flex -translate-x-1/2 items-center justify-center gap-1 divide-x divide-subtle-1 rounded-md border border-subtle-1 bg-black py-2">
           <div className="flex items-center">
             <button
               type="button"
@@ -242,13 +248,13 @@ function ImageFullScreenModalWithoutPortal(props: Props) {
                 }
                 handleMagnification("decrease");
               }}
-              className="size-6 grid place-items-center text-white/60 hover:text-white disabled:text-white/30 transition-colors duration-200"
+              className="grid size-6 place-items-center text-white/60 transition-colors duration-200 hover:text-white disabled:text-white/30"
               disabled={magnification <= MIN_ZOOM}
               aria-label="Zoom out"
             >
               <Minus className="size-4" />
             </button>
-            <span className="text-sm w-12 text-center text-white">{Math.round(100 * magnification)}%</span>
+            <span className="w-12 text-center text-13 text-white">{Math.round(100 * magnification)}%</span>
             <button
               type="button"
               onClick={(e) => {
@@ -258,18 +264,18 @@ function ImageFullScreenModalWithoutPortal(props: Props) {
                 }
                 handleMagnification("increase");
               }}
-              className="size-6 grid place-items-center text-white/60 hover:text-white disabled:text-white/30 transition-colors duration-200"
+              className="grid size-6 place-items-center text-white/60 transition-colors duration-200 hover:text-white disabled:text-white/30"
               disabled={magnification >= MAX_ZOOM}
               aria-label="Zoom in"
             >
-              <Plus className="size-4" />
+              <PlusIcon className="size-4" />
             </button>
           </div>
           {!isTouchDevice && (
             <button
               type="button"
               onClick={() => window.open(downloadSrc, "_blank")}
-              className="flex-shrink-0 size-8 grid place-items-center text-white/60 hover:text-white transition-colors duration-200"
+              className="grid size-8 flex-shrink-0 place-items-center text-white/60 transition-colors duration-200 hover:text-white"
               aria-label="Download image"
             >
               <Download className="size-4" />
@@ -279,10 +285,10 @@ function ImageFullScreenModalWithoutPortal(props: Props) {
             <button
               type="button"
               onClick={() => window.open(src, "_blank")}
-              className="flex-shrink-0 size-8 grid place-items-center text-white/60 hover:text-white transition-colors duration-200"
+              className="grid size-8 flex-shrink-0 place-items-center text-white/60 transition-colors duration-200 hover:text-white"
               aria-label="Open image in new tab"
             >
-              <ExternalLink className="size-4" />
+              <NewTabIcon className="size-4" />
             </button>
           )}
         </div>
diff --git a/packages/editor/src/core/extensions/custom-image/components/toolbar/full-screen/root.tsx b/packages/editor/src/core/extensions/custom-image/components/toolbar/full-screen/root.tsx
index 23a2246bb..79e116a3b 100644
--- a/packages/editor/src/core/extensions/custom-image/components/toolbar/full-screen/root.tsx
+++ b/packages/editor/src/core/extensions/custom-image/components/toolbar/full-screen/root.tsx
@@ -1,7 +1,13 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { Maximize } from "lucide-react";
 import { useEffect, useState } from "react";
 // plane imports
-import { Tooltip } from "@plane/ui";
+import { Tooltip } from "@plane/propel/tooltip";
 // local imports
 import { ImageFullScreenModal } from "./modal";
 
@@ -47,7 +53,7 @@ export function ImageFullScreenActionRoot(props: Props) {
             e.stopPropagation();
             setIsFullScreenEnabled(true);
           }}
-          className="flex-shrink-0 h-full grid place-items-center text-white/60 hover:text-white transition-colors"
+          className="grid h-full flex-shrink-0 place-items-center text-on-color/60 transition-colors hover:text-on-color"
           aria-label="View image in full screen"
         >
           <Maximize className="size-3" />
diff --git a/packages/editor/src/core/extensions/custom-image/components/toolbar/index.ts b/packages/editor/src/core/extensions/custom-image/components/toolbar/index.ts
index 1efe34c51..d98033459 100644
--- a/packages/editor/src/core/extensions/custom-image/components/toolbar/index.ts
+++ b/packages/editor/src/core/extensions/custom-image/components/toolbar/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./root";
diff --git a/packages/editor/src/core/extensions/custom-image/components/toolbar/root.tsx b/packages/editor/src/core/extensions/custom-image/components/toolbar/root.tsx
index efcca6548..51c7f8410 100644
--- a/packages/editor/src/core/extensions/custom-image/components/toolbar/root.tsx
+++ b/packages/editor/src/core/extensions/custom-image/components/toolbar/root.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { Editor } from "@tiptap/core";
 import { useState } from "react";
 // plane imports
@@ -31,9 +37,9 @@ export function ImageToolbarRoot(props: Props) {
     <>
       <div
         className={cn(
-          "absolute top-1 right-1 h-7 z-20 bg-black/80 rounded flex items-center gap-2 px-2 opacity-0 pointer-events-none group-hover/image-component:opacity-100 group-hover/image-component:pointer-events-auto transition-opacity",
+          "pointer-events-none absolute top-1 right-1 z-20 flex h-7 items-center gap-2 rounded-sm bg-black/80 px-2 opacity-0 transition-opacity group-hover/image-component:pointer-events-auto group-hover/image-component:opacity-100",
           {
-            "opacity-100 pointer-events-auto": shouldShowToolbar,
+            "pointer-events-auto opacity-100": shouldShowToolbar,
           }
         )}
       >
diff --git a/packages/editor/src/core/extensions/custom-image/components/upload-status.tsx b/packages/editor/src/core/extensions/custom-image/components/upload-status.tsx
index 2650ac6a2..53191180b 100644
--- a/packages/editor/src/core/extensions/custom-image/components/upload-status.tsx
+++ b/packages/editor/src/core/extensions/custom-image/components/upload-status.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { Editor } from "@tiptap/core";
 import { useEditorState } from "@tiptap/react";
 import { useEffect, useRef, useState } from "react";
@@ -53,7 +59,7 @@ export function ImageUploadStatus(props: Props) {
   if (uploadStatus === undefined) return null;
 
   return (
-    <div className="absolute top-1 right-1 z-20 bg-black/60 rounded text-xs font-medium w-10 text-center">
+    <div className="absolute top-1 right-1 z-20 w-10 rounded-sm bg-black/60 text-center text-11 font-medium">
       {displayStatus}%
     </div>
   );
diff --git a/packages/editor/src/core/extensions/custom-image/components/uploader.tsx b/packages/editor/src/core/extensions/custom-image/components/uploader.tsx
index d7726a81d..13dd5a4ba 100644
--- a/packages/editor/src/core/extensions/custom-image/components/uploader.tsx
+++ b/packages/editor/src/core/extensions/custom-image/components/uploader.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { ImageIcon, RotateCcw } from "lucide-react";
 import type { ChangeEvent } from "react";
 import { useCallback, useEffect, useMemo, useRef } from "react";
@@ -168,9 +174,16 @@ export function CustomImageUploader(props: CustomImageUploaderProps) {
     [uploadFile, editor, getPos]
   );
 
+  const isErrorState = failedToLoadImage || hasDuplicationFailed;
+
+  const borderColor =
+    selected && editor.isEditable && !isErrorState
+      ? "color-mix(in srgb, var(--border-color-accent-strong) 20%, transparent)"
+      : undefined;
+
   const getDisplayMessage = useCallback(() => {
     const isUploading = isImageBeingUploaded;
-    if (failedToLoadImage || hasDuplicationFailed) {
+    if (isErrorState) {
       return "Error loading image";
     }
 
@@ -183,7 +196,7 @@ export function CustomImageUploader(props: CustomImageUploaderProps) {
     }
 
     return "Add an image";
-  }, [draggedInside, editor.isEditable, failedToLoadImage, isImageBeingUploaded, hasDuplicationFailed]);
+  }, [draggedInside, editor.isEditable, isErrorState, isImageBeingUploaded]);
 
   const handleRetryClick = useCallback(
     (e: React.MouseEvent) => {
@@ -198,18 +211,20 @@ export function CustomImageUploader(props: CustomImageUploaderProps) {
   return (
     <div
       className={cn(
-        "image-upload-component flex items-center justify-start gap-2 py-3 px-2 rounded-lg text-custom-text-300 bg-custom-background-90 border border-dashed border-custom-border-300 transition-all duration-200 ease-in-out cursor-default",
+        "image-upload-component flex cursor-default items-center justify-start gap-2 rounded-lg border border-dashed bg-layer-3 px-2 py-3 text-tertiary transition-all duration-200 ease-in-out",
         {
-          "hover:text-custom-text-200 hover:bg-custom-background-80 cursor-pointer": editor.isEditable,
-          "bg-custom-background-80 text-custom-text-200": draggedInside && editor.isEditable,
-          "text-custom-primary-200 bg-custom-primary-100/10 border-custom-primary-200/10 hover:bg-custom-primary-100/10 hover:text-custom-primary-200":
-            selected && editor.isEditable,
-          "text-red-500 cursor-default": failedToLoadImage || hasDuplicationFailed,
-          "hover:text-red-500": (failedToLoadImage || hasDuplicationFailed) && editor.isEditable,
-          "bg-red-500/10": (failedToLoadImage || hasDuplicationFailed) && selected,
-          "hover:bg-red-500/10": (failedToLoadImage || hasDuplicationFailed) && selected && editor.isEditable,
+          "border-subtle": !(selected && editor.isEditable && !isErrorState),
+          "cursor-pointer hover:bg-layer-3-hover hover:text-secondary": editor.isEditable && !isErrorState,
+          "bg-layer-3-hover text-secondary": draggedInside && editor.isEditable && !isErrorState,
+          "bg-accent-primary/10 text-accent-secondary hover:bg-accent-primary/10 hover:text-accent-secondary":
+            selected && editor.isEditable && !isErrorState,
+          "cursor-default bg-danger-subtle text-danger-primary": isErrorState,
+          "hover:bg-danger-subtle-hover hover:text-danger-primary": isErrorState && editor.isEditable,
+          "bg-danger-subtle-selected": isErrorState && selected,
+          "hover:bg-danger-subtle-active": isErrorState && selected && editor.isEditable,
         }
       )}
+      style={borderColor ? { borderColor } : undefined}
       onDrop={onDrop}
       onDragOver={onDragEnter}
       onDragLeave={onDragLeave}
@@ -221,21 +236,21 @@ export function CustomImageUploader(props: CustomImageUploaderProps) {
       }}
     >
       <ImageIcon className="size-4" />
-      <div className="text-base font-medium flex-1">{getDisplayMessage()}</div>
+      <div className="flex-1 text-14 font-medium">{getDisplayMessage()}</div>
       {hasDuplicationFailed && editor.isEditable && (
         <button
           type="button"
           onClick={handleRetryClick}
           className={cn(
-            "flex items-center gap-1 px-2 py-1 text-xs font-medium text-custom-text-300 hover:bg-custom-background-90 hover:text-custom-text-200 rounded-md transition-all duration-200 ease-in-out",
+            "flex items-center gap-1 rounded-md px-2 py-1 font-medium text-danger-primary transition-all duration-200 ease-in-out hover:bg-danger-subtle-hover",
             {
-              "hover:bg-red-500/20": selected,
+              "hover:bg-danger-subtle-hover": selected,
             }
           )}
           title="Retry duplication"
         >
           <RotateCcw className="size-3" />
-          Retry
+          <span className="text-11">Retry</span>
         </button>
       )}
       <input
diff --git a/packages/editor/src/core/extensions/custom-image/extension-config.ts b/packages/editor/src/core/extensions/custom-image/extension-config.ts
index 5ad3b2511..b405451da 100644
--- a/packages/editor/src/core/extensions/custom-image/extension-config.ts
+++ b/packages/editor/src/core/extensions/custom-image/extension-config.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { mergeAttributes } from "@tiptap/core";
 import { Image as BaseImageExtension } from "@tiptap/extension-image";
 // constants
diff --git a/packages/editor/src/core/extensions/custom-image/extension.tsx b/packages/editor/src/core/extensions/custom-image/extension.tsx
index 941ac6686..2d68d50c4 100644
--- a/packages/editor/src/core/extensions/custom-image/extension.tsx
+++ b/packages/editor/src/core/extensions/custom-image/extension.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { ReactNodeViewRenderer } from "@tiptap/react";
 import { v4 as uuidv4 } from "uuid";
 // constants
diff --git a/packages/editor/src/core/extensions/custom-image/types.ts b/packages/editor/src/core/extensions/custom-image/types.ts
index eed345ff7..60bbf902a 100644
--- a/packages/editor/src/core/extensions/custom-image/types.ts
+++ b/packages/editor/src/core/extensions/custom-image/types.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { Node } from "@tiptap/core";
 // types
 import type { TFileHandler } from "@/types";
diff --git a/packages/editor/src/core/extensions/custom-image/utils.ts b/packages/editor/src/core/extensions/custom-image/utils.ts
index 86faf55ec..5e7ed2de7 100644
--- a/packages/editor/src/core/extensions/custom-image/utils.ts
+++ b/packages/editor/src/core/extensions/custom-image/utils.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { Editor } from "@tiptap/core";
 import { AlignCenter, AlignLeft, AlignRight } from "lucide-react";
 import type { LucideIcon } from "lucide-react";
diff --git a/packages/editor/src/core/extensions/custom-link/extension.tsx b/packages/editor/src/core/extensions/custom-link/extension.tsx
index dbc81a2bd..a00585b88 100644
--- a/packages/editor/src/core/extensions/custom-link/extension.tsx
+++ b/packages/editor/src/core/extensions/custom-link/extension.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { PasteRuleMatch } from "@tiptap/core";
 import { Mark, markPasteRule, mergeAttributes } from "@tiptap/core";
 import type { Plugin } from "@tiptap/pm/state";
@@ -124,7 +130,7 @@ export const CustomLinkExtension = Mark.create<LinkOptions, CustomLinkStorage>({
         target: "_blank",
         rel: "noopener noreferrer nofollow",
         class:
-          "text-custom-primary-300 underline underline-offset-[3px] hover:text-custom-primary-500 transition-colors cursor-pointer",
+          "text-accent-secondary underline underline-offset-[3px] hover:text-accent-primary transition-colors cursor-pointer",
       },
       validate: (url: string) => isValidHttpUrl(url).isValid,
     };
diff --git a/packages/editor/src/core/extensions/custom-link/helpers/autolink.ts b/packages/editor/src/core/extensions/custom-link/helpers/autolink.ts
index 709969dee..38a452c0b 100644
--- a/packages/editor/src/core/extensions/custom-link/helpers/autolink.ts
+++ b/packages/editor/src/core/extensions/custom-link/helpers/autolink.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { NodeWithPos } from "@tiptap/core";
 import { combineTransactionSteps, findChildrenInRange, getChangedRanges, getMarksBetween } from "@tiptap/core";
 import type { MarkType } from "@tiptap/pm/model";
diff --git a/packages/editor/src/core/extensions/custom-link/helpers/clickHandler.ts b/packages/editor/src/core/extensions/custom-link/helpers/clickHandler.ts
index c3e1e7994..f101f4c5b 100644
--- a/packages/editor/src/core/extensions/custom-link/helpers/clickHandler.ts
+++ b/packages/editor/src/core/extensions/custom-link/helpers/clickHandler.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { getAttributes } from "@tiptap/core";
 import type { MarkType } from "@tiptap/pm/model";
 import { Plugin, PluginKey } from "@tiptap/pm/state";
diff --git a/packages/editor/src/core/extensions/custom-link/helpers/pasteHandler.ts b/packages/editor/src/core/extensions/custom-link/helpers/pasteHandler.ts
index 0b73748be..0e02c7c40 100644
--- a/packages/editor/src/core/extensions/custom-link/helpers/pasteHandler.ts
+++ b/packages/editor/src/core/extensions/custom-link/helpers/pasteHandler.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { Editor } from "@tiptap/core";
 import type { MarkType } from "@tiptap/pm/model";
 import { Plugin, PluginKey } from "@tiptap/pm/state";
diff --git a/packages/editor/src/core/extensions/custom-link/index.ts b/packages/editor/src/core/extensions/custom-link/index.ts
index 2ce32da8b..2dcbf265b 100644
--- a/packages/editor/src/core/extensions/custom-link/index.ts
+++ b/packages/editor/src/core/extensions/custom-link/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./extension";
diff --git a/packages/editor/src/core/extensions/custom-list-keymap/index.ts b/packages/editor/src/core/extensions/custom-list-keymap/index.ts
index b91209e92..01d23a002 100644
--- a/packages/editor/src/core/extensions/custom-list-keymap/index.ts
+++ b/packages/editor/src/core/extensions/custom-list-keymap/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./list-keymap";
diff --git a/packages/editor/src/core/extensions/custom-list-keymap/list-helpers.ts b/packages/editor/src/core/extensions/custom-list-keymap/list-helpers.ts
index 688d070c0..6f11fc7bd 100644
--- a/packages/editor/src/core/extensions/custom-list-keymap/list-helpers.ts
+++ b/packages/editor/src/core/extensions/custom-list-keymap/list-helpers.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { Editor } from "@tiptap/core";
 import { getNodeType, getNodeAtPosition, isAtEndOfNode, isAtStartOfNode, isNodeActive } from "@tiptap/core";
 import type { Node, NodeType } from "@tiptap/pm/model";
diff --git a/packages/editor/src/core/extensions/custom-list-keymap/list-keymap.ts b/packages/editor/src/core/extensions/custom-list-keymap/list-keymap.ts
index 576888f55..a880b65d3 100644
--- a/packages/editor/src/core/extensions/custom-list-keymap/list-keymap.ts
+++ b/packages/editor/src/core/extensions/custom-list-keymap/list-keymap.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { Extension } from "@tiptap/core";
 // constants
 import { CORE_EXTENSIONS } from "@/constants/extension";
diff --git a/packages/editor/src/core/extensions/emoji/components/emojis-list.tsx b/packages/editor/src/core/extensions/emoji/components/emojis-list.tsx
index df62a97b9..318979b4b 100644
--- a/packages/editor/src/core/extensions/emoji/components/emojis-list.tsx
+++ b/packages/editor/src/core/extensions/emoji/components/emojis-list.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { FloatingOverlay } from "@floating-ui/react";
 import type { SuggestionKeyDownProps, SuggestionProps } from "@tiptap/suggestion";
 import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from "react";
@@ -124,9 +130,9 @@ export const EmojisListDropdown = forwardRef(function EmojisListDropdown(
       <div
         ref={dropdownContainerRef}
         className={cn(
-          "relative max-h-80 w-[14rem] overflow-y-auto rounded-md border-[0.5px] border-custom-border-300 bg-custom-background-100 px-2 py-2.5 shadow-custom-shadow-rg space-y-2 opacity-0 invisible transition-opacity",
+          "invisible relative max-h-80 w-[14rem] space-y-2 overflow-y-auto rounded-md border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 opacity-0 shadow-raised-200 transition-opacity",
           {
-            "opacity-100 visible": isVisible,
+            "visible opacity-100": isVisible,
           }
         )}
         style={{
@@ -150,15 +156,15 @@ export const EmojisListDropdown = forwardRef(function EmojisListDropdown(
                 id={`emoji-item-${index}`}
                 type="button"
                 className={cn(
-                  "flex items-center gap-2 w-full rounded px-2 py-1.5 text-sm text-left truncate text-custom-text-200 hover:bg-custom-background-80 transition-colors duration-150",
+                  "flex w-full items-center gap-2 truncate rounded-sm px-2 py-1.5 text-left text-13 text-secondary transition-colors duration-150 hover:bg-layer-1-hover",
                   {
-                    "bg-custom-background-80": isSelected,
+                    "bg-layer-1-hover": isSelected,
                   }
                 )}
                 onClick={() => selectItem(index)}
                 onMouseEnter={() => setSelectedIndex(index)}
               >
-                <span className="size-5 grid place-items-center flex-shrink-0 text-base">{item.emoji}</span>
+                <span className="grid size-5 flex-shrink-0 place-items-center text-14">{item.emoji}</span>
                 <span className="flex-grow truncate">
                   <span className="font-medium">:{item.name}:</span>
                 </span>
@@ -166,7 +172,7 @@ export const EmojisListDropdown = forwardRef(function EmojisListDropdown(
             );
           })
         ) : (
-          <div className="text-center text-sm text-custom-text-400 py-2">No emojis found</div>
+          <div className="py-2 text-center text-13 text-placeholder">No emojis found</div>
         )}
       </div>
     </>
diff --git a/packages/editor/src/core/extensions/emoji/emoji.ts b/packages/editor/src/core/extensions/emoji/emoji.ts
index d61623c39..63d0ee9d3 100644
--- a/packages/editor/src/core/extensions/emoji/emoji.ts
+++ b/packages/editor/src/core/extensions/emoji/emoji.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import {
   combineTransactionSteps,
   escapeForRegEx,
diff --git a/packages/editor/src/core/extensions/emoji/extension.ts b/packages/editor/src/core/extensions/emoji/extension.ts
index e9be90d39..470fb6d50 100644
--- a/packages/editor/src/core/extensions/emoji/extension.ts
+++ b/packages/editor/src/core/extensions/emoji/extension.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // local imports
 import { gitHubEmojis, shortcodeToEmoji } from "@tiptap/extension-emoji";
 import type { MarkdownSerializerState } from "@tiptap/pm/markdown";
diff --git a/packages/editor/src/core/extensions/emoji/suggestion.ts b/packages/editor/src/core/extensions/emoji/suggestion.ts
index 69750918a..99968ca8c 100644
--- a/packages/editor/src/core/extensions/emoji/suggestion.ts
+++ b/packages/editor/src/core/extensions/emoji/suggestion.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { EmojiOptions, EmojiStorage } from "@tiptap/extension-emoji";
 import { ReactRenderer } from "@tiptap/react";
 import type { Editor } from "@tiptap/react";
diff --git a/packages/editor/src/core/extensions/enter-key.ts b/packages/editor/src/core/extensions/enter-key.ts
index 854a70813..bfe86b1de 100644
--- a/packages/editor/src/core/extensions/enter-key.ts
+++ b/packages/editor/src/core/extensions/enter-key.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { Extension } from "@tiptap/core";
 // constants
 import { CORE_EXTENSIONS } from "@/constants/extension";
diff --git a/packages/editor/src/core/extensions/extensions.ts b/packages/editor/src/core/extensions/extensions.ts
index 79daaccef..420e74950 100644
--- a/packages/editor/src/core/extensions/extensions.ts
+++ b/packages/editor/src/core/extensions/extensions.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { HocuspocusProvider } from "@hocuspocus/provider";
 import type { Extensions } from "@tiptap/core";
 import { CharacterCount } from "@tiptap/extension-character-count";
@@ -47,6 +53,7 @@ type TArguments = Pick<
   | "isTouchDevice"
   | "mentionHandler"
   | "placeholder"
+  | "showPlaceholderOnEmpty"
   | "tabIndex"
   | "extendedEditorProps"
 > & {
@@ -65,6 +72,7 @@ export const CoreEditorExtensions = (args: TArguments): Extensions => {
     isTouchDevice = false,
     mentionHandler,
     placeholder,
+    showPlaceholderOnEmpty,
     tabIndex,
     editable,
     extendedEditorProps,
@@ -108,7 +116,7 @@ export const CoreEditorExtensions = (args: TArguments): Extensions => {
     TableCell,
     TableRow,
     CustomMentionExtension(mentionHandler),
-    CustomPlaceholderExtension({ placeholder }),
+    CustomPlaceholderExtension({ placeholder, showPlaceholderOnEmpty }),
     CharacterCount,
     CustomColorExtension,
     CustomTextAlignExtension,
diff --git a/packages/editor/src/core/extensions/headings-list.ts b/packages/editor/src/core/extensions/headings-list.ts
index 1acb9d446..30b3dd498 100644
--- a/packages/editor/src/core/extensions/headings-list.ts
+++ b/packages/editor/src/core/extensions/headings-list.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { Extension } from "@tiptap/core";
 import { Plugin, PluginKey } from "@tiptap/pm/state";
 // constants
diff --git a/packages/editor/src/core/extensions/horizontal-rule.ts b/packages/editor/src/core/extensions/horizontal-rule.ts
index e5bb1f60b..a442bc9a9 100644
--- a/packages/editor/src/core/extensions/horizontal-rule.ts
+++ b/packages/editor/src/core/extensions/horizontal-rule.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { isNodeSelection, mergeAttributes, Node, nodeInputRule } from "@tiptap/core";
 import { NodeSelection, TextSelection } from "@tiptap/pm/state";
 // constants
@@ -25,7 +31,7 @@ export const CustomHorizontalRule = Node.create<HorizontalRuleOptions>({
   addOptions() {
     return {
       HTMLAttributes: {
-        class: "py-4 border-custom-border-400",
+        class: "py-4 border-strong-1",
       },
     };
   },
diff --git a/packages/editor/src/core/extensions/image/extension-config.tsx b/packages/editor/src/core/extensions/image/extension-config.tsx
index 02091d569..8ac83c883 100644
--- a/packages/editor/src/core/extensions/image/extension-config.tsx
+++ b/packages/editor/src/core/extensions/image/extension-config.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { Image as BaseImageExtension } from "@tiptap/extension-image";
 // local imports
 import type { CustomImageExtensionOptions } from "../custom-image/types";
diff --git a/packages/editor/src/core/extensions/image/extension.tsx b/packages/editor/src/core/extensions/image/extension.tsx
index 61c1421d1..ddec929ec 100644
--- a/packages/editor/src/core/extensions/image/extension.tsx
+++ b/packages/editor/src/core/extensions/image/extension.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { ReactNodeViewRenderer } from "@tiptap/react";
 // constants
 import type { CORE_EXTENSIONS } from "@/constants/extension";
diff --git a/packages/editor/src/core/extensions/image/index.ts b/packages/editor/src/core/extensions/image/index.ts
index 02b5a53d6..1bfe6f315 100644
--- a/packages/editor/src/core/extensions/image/index.ts
+++ b/packages/editor/src/core/extensions/image/index.ts
@@ -1,2 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./extension";
 export * from "./extension-config";
diff --git a/packages/editor/src/core/extensions/index.ts b/packages/editor/src/core/extensions/index.ts
index 48692c091..815f31ed4 100644
--- a/packages/editor/src/core/extensions/index.ts
+++ b/packages/editor/src/core/extensions/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./callout";
 export * from "./code";
 export * from "./code-inline";
diff --git a/packages/editor/src/core/extensions/keymap.ts b/packages/editor/src/core/extensions/keymap.ts
index 7000dc73d..85e13a4b0 100644
--- a/packages/editor/src/core/extensions/keymap.ts
+++ b/packages/editor/src/core/extensions/keymap.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { Extension } from "@tiptap/core";
 import type { NodeType } from "@tiptap/pm/model";
 import type { Transaction } from "@tiptap/pm/state";
@@ -17,22 +23,27 @@ declare module "@tiptap/core" {
   }
 }
 
-function autoJoin(tr: Transaction, newTr: Transaction, nodeTypes: NodeType[]) {
-  // Find all ranges where we might want to join.
+function collectRanges(transactions: readonly Transaction[]): Array<number> {
   const ranges: Array<number> = [];
-  for (let i = 0; i < tr.mapping.maps.length; i++) {
-    const map = tr.mapping.maps[i];
-    for (let j = 0; j < ranges.length; j++) ranges[j] = map.map(ranges[j]);
-    map.forEach((_s, _e, from, to) => ranges.push(from, to));
+  for (const tr of transactions) {
+    for (let i = 0; i < tr.mapping.maps.length; i++) {
+      const map = tr.mapping.maps[i];
+      map.forEach((_s, _e, from, to) => ranges.push(from, to));
+    }
   }
+  return ranges;
+}
 
+function autoJoin(ranges: Array<number>, newTr: Transaction, nodeTypes: NodeType[]) {
+  const doc = newTr.doc;
   // Figure out which joinable points exist inside those ranges,
   // by checking all node boundaries in their parent nodes.
   const joinable: number[] = [];
   for (let i = 0; i < ranges.length; i += 2) {
     const from = ranges[i],
       to = ranges[i + 1];
-    const $from = tr.doc.resolve(from),
+    if (from >= doc.content.size) continue;
+    const $from = doc.resolve(from),
       depth = $from.sharedDepth(to),
       parent = $from.node(depth);
     for (let index = $from.indexAfter(depth), pos = $from.after(depth + 1); pos <= to; ++index) {
@@ -48,10 +59,10 @@ function autoJoin(tr: Transaction, newTr: Transaction, nodeTypes: NodeType[]) {
 
   let joined = false;
 
-  // Join the joinable points
+  // Join the joinable points (reverse order to keep positions stable)
   joinable.sort((a, b) => a - b);
   for (let i = joinable.length - 1; i >= 0; i--) {
-    if (canJoin(tr.doc, joinable[i])) {
+    if (canJoin(doc, joinable[i])) {
       newTr.join(joinable[i]);
       joined = true;
     }
@@ -85,7 +96,6 @@ export const CustomKeymap = Extension.create({
       new Plugin({
         key: new PluginKey("ordered-list-merging"),
         appendTransaction(transactions, oldState, newState) {
-          // Create a new transaction.
           const newTr = newState.tr;
 
           const joinableNodes = [
@@ -94,12 +104,8 @@ export const CustomKeymap = Extension.create({
             newState.schema.nodes[CORE_EXTENSIONS.BULLET_LIST],
           ];
 
-          let joined = false;
-          for (const transaction of transactions) {
-            const anotherJoin = autoJoin(transaction, newTr, joinableNodes);
-            joined = anotherJoin || joined;
-          }
-          if (joined) {
+          const ranges = collectRanges(transactions);
+          if (ranges.length && autoJoin(ranges, newTr, joinableNodes)) {
             return newTr;
           }
         },
diff --git a/packages/editor/src/core/extensions/mentions/extension-config.ts b/packages/editor/src/core/extensions/mentions/extension-config.ts
index 0887e25bd..f3c24511f 100644
--- a/packages/editor/src/core/extensions/mentions/extension-config.ts
+++ b/packages/editor/src/core/extensions/mentions/extension-config.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { mergeAttributes } from "@tiptap/core";
 import type { MentionOptions } from "@tiptap/extension-mention";
 import Mention from "@tiptap/extension-mention";
diff --git a/packages/editor/src/core/extensions/mentions/extension.tsx b/packages/editor/src/core/extensions/mentions/extension.tsx
index 96001cbea..7c82b7ed6 100644
--- a/packages/editor/src/core/extensions/mentions/extension.tsx
+++ b/packages/editor/src/core/extensions/mentions/extension.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { ReactNodeViewRenderer } from "@tiptap/react";
 // types
 import type { TMentionHandler } from "@/types";
diff --git a/packages/editor/src/core/extensions/mentions/index.ts b/packages/editor/src/core/extensions/mentions/index.ts
index 02b5a53d6..1bfe6f315 100644
--- a/packages/editor/src/core/extensions/mentions/index.ts
+++ b/packages/editor/src/core/extensions/mentions/index.ts
@@ -1,2 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./extension";
 export * from "./extension-config";
diff --git a/packages/editor/src/core/extensions/mentions/mention-node-view.tsx b/packages/editor/src/core/extensions/mentions/mention-node-view.tsx
index a7290b453..ff51aa9b0 100644
--- a/packages/editor/src/core/extensions/mentions/mention-node-view.tsx
+++ b/packages/editor/src/core/extensions/mentions/mention-node-view.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { NodeViewProps } from "@tiptap/react";
 import { NodeViewWrapper } from "@tiptap/react";
 // extension config
@@ -19,7 +25,7 @@ export function MentionNodeView(props: MentionNodeViewProps) {
   } = props;
 
   return (
-    <NodeViewWrapper className="mention-component inline w-fit">
+    <NodeViewWrapper key={attrs[EMentionComponentAttributeNames.ID]} className="mention-component inline w-fit">
       {(extension.options as TMentionExtensionOptions).renderComponent({
         entity_identifier: attrs[EMentionComponentAttributeNames.ENTITY_IDENTIFIER] ?? "",
         entity_name: attrs[EMentionComponentAttributeNames.ENTITY_NAME] ?? "user_mention",
diff --git a/packages/editor/src/core/extensions/mentions/mentions-list-dropdown.tsx b/packages/editor/src/core/extensions/mentions/mentions-list-dropdown.tsx
index 191cd5139..37f786484 100644
--- a/packages/editor/src/core/extensions/mentions/mentions-list-dropdown.tsx
+++ b/packages/editor/src/core/extensions/mentions/mentions-list-dropdown.tsx
@@ -1,7 +1,14 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { FloatingOverlay } from "@floating-ui/react";
 import type { SuggestionProps } from "@tiptap/suggestion";
 import { forwardRef, useCallback, useEffect, useImperativeHandle, useLayoutEffect, useRef, useState } from "react";
 import { v4 as uuidv4 } from "uuid";
+import { debounce } from "lodash-es";
 // plane utils
 import { useOutsideClickDetector } from "@plane/hooks";
 import { cn } from "@plane/utils";
@@ -75,12 +82,11 @@ export const MentionsListDropdown = forwardRef(function MentionsListDropdown(pro
     });
   }, [sections]);
 
-  // fetch mention sections based on query
-  useEffect(() => {
-    const fetchSuggestions = async () => {
-      setIsLoading(true);
+  // debounced search callback
+  const debouncedSearchCallback = useCallback(
+    debounce(async (searchQuery: string) => {
       try {
-        const sectionsResponse = await searchCallback?.(query);
+        const sectionsResponse = await searchCallback?.(searchQuery);
         if (sectionsResponse) {
           setSections(sectionsResponse);
         }
@@ -89,9 +95,25 @@ export const MentionsListDropdown = forwardRef(function MentionsListDropdown(pro
       } finally {
         setIsLoading(false);
       }
-    };
-    fetchSuggestions();
-  }, [query, searchCallback]);
+    }, 300),
+    [searchCallback]
+  );
+
+  // trigger debounced search when query changes
+  useEffect(() => {
+    if (query !== undefined && query !== null) {
+      setIsLoading(true);
+      void debouncedSearchCallback(query);
+    }
+  }, [query, debouncedSearchCallback]);
+
+  // cancel pending debounced calls on unmount
+  useEffect(
+    () => () => {
+      debouncedSearchCallback.cancel();
+    },
+    [debouncedSearchCallback]
+  );
 
   // scroll to the dropdown item when navigating via keyboard
   useLayoutEffect(() => {
@@ -124,7 +146,7 @@ export const MentionsListDropdown = forwardRef(function MentionsListDropdown(pro
       />
       <div
         ref={dropdownContainer}
-        className="relative max-h-80 w-[14rem] overflow-y-auto rounded-md border-[0.5px] border-custom-border-300 bg-custom-background-100 px-2 py-2.5 shadow-custom-shadow-rg space-y-2"
+        className="relative max-h-80 w-[14rem] space-y-2 overflow-y-auto rounded-md border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 shadow-raised-200"
         style={{
           zIndex: 100,
         }}
@@ -136,11 +158,11 @@ export const MentionsListDropdown = forwardRef(function MentionsListDropdown(pro
         }}
       >
         {isLoading ? (
-          <div className="text-center text-sm text-custom-text-400">Loading...</div>
+          <div className="text-center text-13 text-placeholder">Loading...</div>
         ) : sections.length ? (
           sections.map((section, sectionIndex) => (
             <div key={section.key} className="space-y-2">
-              {section.title && <h6 className="text-xs font-semibold text-custom-text-300">{section.title}</h6>}
+              {section.title && <h6 className="text-11 font-semibold text-tertiary">{section.title}</h6>}
               {section.items.map((item, itemIndex) => {
                 const isSelected = sectionIndex === selectedIndex.section && itemIndex === selectedIndex.item;
 
@@ -150,9 +172,9 @@ export const MentionsListDropdown = forwardRef(function MentionsListDropdown(pro
                     id={`mention-item-${sectionIndex}-${itemIndex}`}
                     type="button"
                     className={cn(
-                      "flex items-center gap-2 w-full rounded px-1 py-1.5 text-xs text-left truncate text-custom-text-200",
+                      "flex w-full items-center gap-2 truncate rounded-sm px-1 py-1.5 text-left text-11 text-secondary hover:bg-layer-1-hover",
                       {
-                        "bg-custom-background-80": isSelected,
+                        "bg-layer-1-hover": isSelected,
                       }
                     )}
                     onClick={(e) => {
@@ -167,9 +189,9 @@ export const MentionsListDropdown = forwardRef(function MentionsListDropdown(pro
                       })
                     }
                   >
-                    <span className="size-5 grid place-items-center flex-shrink-0">{item.icon}</span>
+                    <span className="grid size-5 flex-shrink-0 place-items-center">{item.icon}</span>
                     {item.subTitle && (
-                      <h5 className="whitespace-nowrap text-xs text-custom-text-300 flex-shrink-0">{item.subTitle}</h5>
+                      <h5 className="flex-shrink-0 text-11 whitespace-nowrap text-tertiary">{item.subTitle}</h5>
                     )}
                     <p className="flex-grow truncate">{item.title}</p>
                   </button>
@@ -178,7 +200,7 @@ export const MentionsListDropdown = forwardRef(function MentionsListDropdown(pro
             </div>
           ))
         ) : (
-          <div className="text-center text-sm text-custom-text-400">No results</div>
+          <div className="text-center text-13 text-placeholder">No results</div>
         )}
       </div>
     </>
diff --git a/packages/editor/src/core/extensions/mentions/types.ts b/packages/editor/src/core/extensions/mentions/types.ts
index cf0d7b23d..9d175bc5f 100644
--- a/packages/editor/src/core/extensions/mentions/types.ts
+++ b/packages/editor/src/core/extensions/mentions/types.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // plane types
 import type { TSearchEntities } from "@plane/types";
 
diff --git a/packages/editor/src/core/extensions/mentions/utils.ts b/packages/editor/src/core/extensions/mentions/utils.ts
index 0ff10675d..810ccbbfe 100644
--- a/packages/editor/src/core/extensions/mentions/utils.ts
+++ b/packages/editor/src/core/extensions/mentions/utils.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { ReactRenderer } from "@tiptap/react";
 import type { Editor } from "@tiptap/react";
 import type { SuggestionOptions } from "@tiptap/suggestion";
diff --git a/packages/editor/src/core/extensions/placeholder.ts b/packages/editor/src/core/extensions/placeholder.ts
index 7a236332c..c22227d71 100644
--- a/packages/editor/src/core/extensions/placeholder.ts
+++ b/packages/editor/src/core/extensions/placeholder.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { Placeholder } from "@tiptap/extension-placeholder";
 // constants
 import { CORE_EXTENSIONS } from "@/constants/extension";
@@ -6,10 +12,11 @@ import type { IEditorProps } from "@/types";
 
 type TArgs = {
   placeholder: IEditorProps["placeholder"];
+  showPlaceholderOnEmpty: IEditorProps["showPlaceholderOnEmpty"];
 };
 
 export const CustomPlaceholderExtension = (args: TArgs) => {
-  const { placeholder } = args;
+  const { placeholder, showPlaceholderOnEmpty = false } = args;
 
   return Placeholder.configure({
     placeholder: ({ editor, node }) => {
@@ -29,6 +36,13 @@ export const CustomPlaceholderExtension = (args: TArgs) => {
 
       if (shouldHidePlaceholder) return "";
 
+      if (showPlaceholderOnEmpty) {
+        const isDocumentEmpty = editor.state.doc.textContent.length === 0;
+        if (!isDocumentEmpty) {
+          return "";
+        }
+      }
+
       if (placeholder) {
         if (typeof placeholder === "string") return placeholder;
         else return placeholder(editor.isFocused, editor.getHTML());
diff --git a/packages/editor/src/core/extensions/quote.ts b/packages/editor/src/core/extensions/quote.ts
index 99a6c10f0..81e19f0da 100644
--- a/packages/editor/src/core/extensions/quote.ts
+++ b/packages/editor/src/core/extensions/quote.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import Blockquote from "@tiptap/extension-blockquote";
 // constants
 import { CORE_EXTENSIONS } from "@/constants/extension";
diff --git a/packages/editor/src/core/extensions/side-menu.ts b/packages/editor/src/core/extensions/side-menu.ts
index 01c95956a..bdba02cf8 100644
--- a/packages/editor/src/core/extensions/side-menu.ts
+++ b/packages/editor/src/core/extensions/side-menu.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { Extension } from "@tiptap/core";
 import { Plugin, PluginKey } from "@tiptap/pm/state";
 import type { EditorView } from "@tiptap/pm/view";
diff --git a/packages/editor/src/core/extensions/slash-commands/command-items-list.tsx b/packages/editor/src/core/extensions/slash-commands/command-items-list.tsx
index 663c940b7..154887fb6 100644
--- a/packages/editor/src/core/extensions/slash-commands/command-items-list.tsx
+++ b/packages/editor/src/core/extensions/slash-commands/command-items-list.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import {
   ALargeSmall,
   CaseSensitive,
@@ -215,14 +221,7 @@ export const getSlashCommandFilteredSections =
             title: "Default",
             description: "Change text color",
             searchTerms: ["color", "text", "default"],
-            icon: (
-              <ALargeSmall
-                className="size-3.5"
-                style={{
-                  color: "rgba(var(--color-text-100))",
-                }}
-              />
-            ),
+            icon: <ALargeSmall className="size-3.5 text-primary" />,
             command: ({ editor, range }) => toggleTextColor(undefined, editor, range),
           },
           ...COLORS_LIST.map(
@@ -261,8 +260,8 @@ export const getSlashCommandFilteredSections =
             icon: <ALargeSmall className="size-3.5" />,
             iconContainerStyle: {
               borderRadius: "4px",
-              backgroundColor: "rgba(var(--color-background-100))",
-              border: "1px solid rgba(var(--color-border-300))",
+              backgroundColor: "var(--background-color-surface-1)",
+              border: "1px solid var(--border-color-strong)",
             },
             command: ({ editor, range }) => toggleTextColor(undefined, editor, range),
           },
diff --git a/packages/editor/src/core/extensions/slash-commands/command-menu-item.tsx b/packages/editor/src/core/extensions/slash-commands/command-menu-item.tsx
index 32943866a..88a39990a 100644
--- a/packages/editor/src/core/extensions/slash-commands/command-menu-item.tsx
+++ b/packages/editor/src/core/extensions/slash-commands/command-menu-item.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // plane utils
 import { cn } from "@plane/utils";
 // types
@@ -30,7 +36,7 @@ const highlightMatch = (text: string, query: string): React.ReactNode => {
     return (
       <>
         {before}
-        <span className="font-medium text-custom-text-100">{match}</span>
+        <span className="font-medium text-primary">{match}</span>
         {after}
       </>
     );
@@ -48,18 +54,18 @@ export function CommandMenuItem(props: Props) {
       type="button"
       id={`item-${sectionIndex}-${itemIndex}`}
       className={cn(
-        "flex items-center gap-2 w-full rounded px-1 py-1.5 text-sm text-left truncate text-custom-text-200",
+        "flex w-full items-center gap-2 truncate rounded-sm px-1 py-1.5 text-left text-13 text-secondary hover:bg-layer-1-hover",
         {
-          "bg-custom-background-80": isSelected,
+          "bg-layer-1-hover": isSelected,
         }
       )}
       onClick={onClick}
       onMouseEnter={onMouseEnter}
     >
-      <span className="size-5 grid place-items-center flex-shrink-0" style={item.iconContainerStyle}>
+      <span className="grid size-5 flex-shrink-0 place-items-center" style={item.iconContainerStyle}>
         {item.icon}
       </span>
-      <p className="flex-grow truncate">{query ? highlightMatch(item.title, query) : item.title}</p>
+      <p className="flex-grow truncate text-12">{query ? highlightMatch(item.title, query) : item.title}</p>
       {item.badge}
     </button>
   );
diff --git a/packages/editor/src/core/extensions/slash-commands/command-menu.tsx b/packages/editor/src/core/extensions/slash-commands/command-menu.tsx
index c5d0eb1cd..2655c3278 100644
--- a/packages/editor/src/core/extensions/slash-commands/command-menu.tsx
+++ b/packages/editor/src/core/extensions/slash-commands/command-menu.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { FloatingOverlay } from "@floating-ui/react";
 import type { SuggestionProps } from "@tiptap/suggestion";
 import { forwardRef, useCallback, useEffect, useImperativeHandle, useLayoutEffect, useRef, useState } from "react";
@@ -131,7 +137,7 @@ export const SlashCommandsMenu = forwardRef(function SlashCommandsMenu(props: Sl
       <div
         id="slash-command"
         ref={commandListContainer}
-        className="relative max-h-80 min-w-[12rem] overflow-y-auto rounded-md border-[0.5px] border-custom-border-300 bg-custom-background-100 px-2 py-2.5 shadow-custom-shadow-rg space-y-2"
+        className="relative max-h-80 min-w-[12rem] space-y-2 overflow-y-auto rounded-md border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 shadow-raised-200"
         style={{
           zIndex: 100,
         }}
@@ -144,7 +150,7 @@ export const SlashCommandsMenu = forwardRef(function SlashCommandsMenu(props: Sl
       >
         {sections.map((section, sectionIndex) => (
           <div key={section.key} className="space-y-2">
-            {section.title && <h6 className="text-xs font-semibold text-custom-text-300">{section.title}</h6>}
+            {section.title && <h6 className="text-11 font-semibold text-tertiary">{section.title}</h6>}
             <div>
               {section.items?.map((item, itemIndex) => (
                 <CommandMenuItem
diff --git a/packages/editor/src/core/extensions/slash-commands/index.ts b/packages/editor/src/core/extensions/slash-commands/index.ts
index 1efe34c51..d98033459 100644
--- a/packages/editor/src/core/extensions/slash-commands/index.ts
+++ b/packages/editor/src/core/extensions/slash-commands/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./root";
diff --git a/packages/editor/src/core/extensions/slash-commands/root.tsx b/packages/editor/src/core/extensions/slash-commands/root.tsx
index 11751e27f..c8e05aecf 100644
--- a/packages/editor/src/core/extensions/slash-commands/root.tsx
+++ b/packages/editor/src/core/extensions/slash-commands/root.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { Extension } from "@tiptap/core";
 import type { Editor } from "@tiptap/core";
 import { ReactRenderer } from "@tiptap/react";
diff --git a/packages/editor/src/core/extensions/starter-kit.ts b/packages/editor/src/core/extensions/starter-kit.ts
index e6a4c968d..1e4e4f79d 100644
--- a/packages/editor/src/core/extensions/starter-kit.ts
+++ b/packages/editor/src/core/extensions/starter-kit.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import StarterKit from "@tiptap/starter-kit";
 
 type TArgs = {
@@ -10,12 +16,12 @@ export const CustomStarterKitExtension = (args: TArgs) => {
   return StarterKit.configure({
     bulletList: {
       HTMLAttributes: {
-        class: "list-disc pl-7 space-y-[--list-spacing-y]",
+        class: "list-disc pl-7 space-y-(--list-spacing-y)",
       },
     },
     orderedList: {
       HTMLAttributes: {
-        class: "list-decimal pl-7 space-y-[--list-spacing-y]",
+        class: "list-decimal pl-7 space-y-(--list-spacing-y)",
       },
     },
     listItem: {
@@ -39,7 +45,7 @@ export const CustomStarterKitExtension = (args: TArgs) => {
     },
     dropcursor: {
       class:
-        "text-custom-text-300 transition-all motion-reduce:transition-none motion-reduce:hover:transform-none duration-200 ease-[cubic-bezier(0.165, 0.84, 0.44, 1)]",
+        "text-tertiary transition-all motion-reduce:transition-none motion-reduce:hover:transform-none duration-200 ease-[cubic-bezier(0.165, 0.84, 0.44, 1)]",
     },
     ...(enableHistory ? {} : { history: false }),
   });
diff --git a/packages/editor/src/core/extensions/table/index.ts b/packages/editor/src/core/extensions/table/index.ts
index 2277e09ae..fe205e4b1 100644
--- a/packages/editor/src/core/extensions/table/index.ts
+++ b/packages/editor/src/core/extensions/table/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./table";
 export * from "./table-cell";
 export * from "./table-header";
diff --git a/packages/editor/src/core/extensions/table/plugins/drag-handles/actions.ts b/packages/editor/src/core/extensions/table/plugins/drag-handles/actions.ts
index 788a17ae7..bd12b0528 100644
--- a/packages/editor/src/core/extensions/table/plugins/drag-handles/actions.ts
+++ b/packages/editor/src/core/extensions/table/plugins/drag-handles/actions.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { Editor } from "@tiptap/core";
 import { Fragment } from "@tiptap/pm/model";
 import type { Node, Node as ProseMirrorNode } from "@tiptap/pm/model";
diff --git a/packages/editor/src/core/extensions/table/plugins/drag-handles/color-selector.tsx b/packages/editor/src/core/extensions/table/plugins/drag-handles/color-selector.tsx
index 6bcdd1b4a..ae555bba8 100644
--- a/packages/editor/src/core/extensions/table/plugins/drag-handles/color-selector.tsx
+++ b/packages/editor/src/core/extensions/table/plugins/drag-handles/color-selector.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { Disclosure } from "@headlessui/react";
 import type { Editor } from "@tiptap/core";
 import { Ban, Palette } from "lucide-react";
@@ -43,31 +49,31 @@ export function TableDragHandleDropdownColorSelector(props: Props) {
       <Disclosure.Button
         as="button"
         type="button"
-        className="flex items-center justify-between gap-2 w-full rounded px-1 py-1.5 text-xs text-left truncate text-custom-text-200 hover:bg-custom-background-80"
+        className="flex w-full items-center justify-between gap-2 truncate rounded-sm px-1 py-1.5 text-left text-11 text-secondary hover:bg-layer-1"
       >
         {({ open }) => (
           <>
             <span className="flex items-center gap-2">
-              <Palette className="shrink-0 size-3" />
+              <Palette className="size-3 shrink-0" />
               Color
             </span>
             <ChevronRightIcon
-              className={cn("shrink-0 size-3 transition-transform duration-200", {
+              className={cn("size-3 shrink-0 transition-transform duration-200", {
                 "rotate-90": open,
               })}
             />
           </>
         )}
       </Disclosure.Button>
-      <Disclosure.Panel className="p-1 space-y-2 mb-1.5">
+      <Disclosure.Panel className="mb-1.5 space-y-2 p-1">
         {/* <div className="space-y-1.5">
-          <p className="text-xs text-custom-text-300 font-semibold">Text colors</p>
+          <p className="text-11 text-tertiary font-semibold">Text colors</p>
           <div className="flex items-center flex-wrap gap-2">
             {COLORS_LIST.map((color) => (
               <button
                 key={color.key}
                 type="button"
-                className="flex-shrink-0 size-6 rounded border-[0.5px] border-custom-border-400 hover:opacity-60 transition-opacity"
+                className="flex-shrink-0 size-6 rounded-sm border-[0.5px] border-strong-1 hover:opacity-60 transition-opacity"
                 style={{
                   backgroundColor: color.textColor,
                 }}
@@ -76,7 +82,7 @@ export function TableDragHandleDropdownColorSelector(props: Props) {
             ))}
             <button
               type="button"
-              className="flex-shrink-0 size-6 grid place-items-center rounded text-custom-text-300 border-[0.5px] border-custom-border-400 hover:bg-custom-background-80 transition-colors"
+              className="flex-shrink-0 size-6 grid place-items-center rounded-sm text-tertiary border-[0.5px] border-strong-1 hover:bg-layer-1 transition-colors"
               onClick={() => handleTextColorChange(editor, null)}
             >
               <Ban className="size-4" />
@@ -84,13 +90,13 @@ export function TableDragHandleDropdownColorSelector(props: Props) {
           </div>
         </div> */}
         <div className="space-y-1">
-          <p className="text-xs text-custom-text-300 font-semibold">Background colors</p>
-          <div className="flex items-center flex-wrap gap-2">
+          <p className="text-11 font-semibold text-tertiary">Background colors</p>
+          <div className="flex flex-wrap items-center gap-2">
             {COLORS_LIST.map((color) => (
               <button
                 key={color.key}
                 type="button"
-                className="flex-shrink-0 size-6 rounded border-[0.5px] border-custom-border-400 hover:opacity-60 transition-opacity"
+                className="size-6 flex-shrink-0 rounded-sm border-[0.5px] border-strong-1 transition-opacity hover:opacity-60"
                 style={{
                   backgroundColor: color.backgroundColor,
                 }}
@@ -102,7 +108,7 @@ export function TableDragHandleDropdownColorSelector(props: Props) {
             ))}
             <button
               type="button"
-              className="flex-shrink-0 size-6 grid place-items-center rounded text-custom-text-300 border-[0.5px] border-custom-border-400 hover:bg-custom-background-80 transition-colors"
+              className="grid size-6 flex-shrink-0 place-items-center rounded-sm border-[0.5px] border-strong-1 text-tertiary transition-colors hover:bg-layer-1-hover"
               onClick={() => {
                 handleBackgroundColorChange(editor, null);
                 onSelect(null);
diff --git a/packages/editor/src/core/extensions/table/plugins/drag-handles/column/drag-handle.tsx b/packages/editor/src/core/extensions/table/plugins/drag-handles/column/drag-handle.tsx
index 30d588336..676d37192 100644
--- a/packages/editor/src/core/extensions/table/plugins/drag-handles/column/drag-handle.tsx
+++ b/packages/editor/src/core/extensions/table/plugins/drag-handles/column/drag-handle.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import {
   shift,
   flip,
@@ -12,7 +18,7 @@ import {
 } from "@floating-ui/react";
 import type { Editor } from "@tiptap/core";
 import { Ellipsis } from "lucide-react";
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 // plane imports
 import { cn } from "@plane/utils";
 // constants
@@ -36,7 +42,7 @@ import {
   updateColDragMarker,
   updateColDropMarker,
 } from "../marker-utils";
-import { updateCellContentVisibility } from "../utils";
+import { showCellContent } from "../utils";
 import { ColumnOptionsDropdown } from "./dropdown";
 import { calculateColumnDropIndex, constructColumnDragPreview, getTableColumnNodesInfo } from "./utils";
 
@@ -49,6 +55,25 @@ export function ColumnDragHandle(props: ColumnDragHandleProps) {
   const { col, editor } = props;
   // states
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  // Track active event listeners for cleanup
+  const activeListenersRef = useRef<{
+    mouseup?: (e: MouseEvent) => void;
+    mousemove?: (e: MouseEvent) => void;
+  }>({});
+
+  // Cleanup window event listeners on unmount
+  useEffect(() => {
+    const listenersRef = activeListenersRef.current;
+    return () => {
+      // Remove any lingering window event listeners when component unmounts
+      if (listenersRef.mouseup) {
+        window.removeEventListener("mouseup", listenersRef.mouseup);
+      }
+      if (listenersRef.mousemove) {
+        window.removeEventListener("mousemove", listenersRef.mousemove);
+      }
+    };
+  }, []);
   // floating ui
   const { refs, floatingStyles, context } = useFloating({
     placement: "bottom-start",
@@ -94,6 +119,17 @@ export function ColumnDragHandle(props: ColumnDragHandleProps) {
       e.stopPropagation();
       e.preventDefault();
 
+      // Prevent multiple simultaneous drag operations
+      // If there are already listeners attached, remove them first
+      if (activeListenersRef.current.mouseup) {
+        window.removeEventListener("mouseup", activeListenersRef.current.mouseup);
+      }
+      if (activeListenersRef.current.mousemove) {
+        window.removeEventListener("mousemove", activeListenersRef.current.mousemove);
+      }
+      activeListenersRef.current.mouseup = undefined;
+      activeListenersRef.current.mousemove = undefined;
+
       const table = findTable(editor.state.selection);
       if (!table) return;
 
@@ -116,8 +152,9 @@ export function ColumnDragHandle(props: ColumnDragHandleProps) {
         hideDropMarker(dropMarker);
         hideDragMarker(dragMarker);
 
+        // Show cell content by clearing decorations
         if (isCellSelection(editor.state.selection)) {
-          updateCellContentVisibility(editor, false);
+          showCellContent(editor);
         }
 
         if (col !== dropIndex) {
@@ -133,6 +170,9 @@ export function ColumnDragHandle(props: ColumnDragHandleProps) {
         }
         window.removeEventListener("mouseup", handleFinish);
         window.removeEventListener("mousemove", handleMove);
+        // Clear the ref
+        activeListenersRef.current.mouseup = undefined;
+        activeListenersRef.current.mousemove = undefined;
       };
 
       let pseudoColumn: HTMLElement | undefined;
@@ -169,6 +209,9 @@ export function ColumnDragHandle(props: ColumnDragHandleProps) {
       };
 
       try {
+        // Store references for cleanup
+        activeListenersRef.current.mouseup = handleFinish;
+        activeListenersRef.current.mousemove = handleMove;
         window.addEventListener("mouseup", handleFinish);
         window.addEventListener("mousemove", handleMove);
       } catch (error) {
@@ -181,21 +224,18 @@ export function ColumnDragHandle(props: ColumnDragHandleProps) {
 
   return (
     <>
-      <div className="table-col-handle-container absolute z-20 top-0 left-0 flex justify-center items-center w-full -translate-y-1/2">
+      <div className="table-col-handle-container absolute top-0 left-0 z-20 flex w-full -translate-y-1/2 items-center justify-center">
         <button
           ref={refs.setReference}
           {...getReferenceProps()}
           type="button"
           onMouseDown={handleMouseDown}
-          className={cn(
-            "px-1 bg-custom-background-90 border border-custom-border-400 rounded outline-none transition-all duration-200",
-            {
-              "!opacity-100 bg-custom-primary-100 border-custom-primary-100": isDropdownOpen,
-              "hover:bg-custom-background-80": !isDropdownOpen,
-            }
-          )}
+          className={cn("rounded-sm border border-strong-1 bg-layer-1 px-1 transition-all duration-200 outline-none", {
+            "border-accent-strong bg-accent-primary !opacity-100": isDropdownOpen,
+            "hover:bg-layer-1-hover": !isDropdownOpen,
+          })}
         >
-          <Ellipsis className="size-4 text-custom-text-100" />
+          <Ellipsis className="size-4 text-primary" />
         </button>
       </div>
       {isDropdownOpen && (
@@ -208,7 +248,7 @@ export function ColumnDragHandle(props: ColumnDragHandleProps) {
             lockScroll
           />
           <div
-            className="max-h-[90vh] w-[12rem] overflow-y-auto rounded-md border-[0.5px] border-custom-border-300 bg-custom-background-100 px-2 py-2.5 shadow-custom-shadow-rg"
+            className="max-h-[90vh] w-[12rem] overflow-y-auto rounded-md border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 shadow-raised-200"
             ref={refs.setFloating}
             {...getFloatingProps()}
             style={{
diff --git a/packages/editor/src/core/extensions/table/plugins/drag-handles/column/dropdown.tsx b/packages/editor/src/core/extensions/table/plugins/drag-handles/column/dropdown.tsx
index 09e2904a3..f1c0ee3e7 100644
--- a/packages/editor/src/core/extensions/table/plugins/drag-handles/column/dropdown.tsx
+++ b/packages/editor/src/core/extensions/table/plugins/drag-handles/column/dropdown.tsx
@@ -1,10 +1,16 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { Editor } from "@tiptap/core";
 import { TableMap } from "@tiptap/pm/tables";
-import { ArrowLeft, ArrowRight, Copy, ToggleRight, Trash2 } from "lucide-react";
+import { ArrowLeft, ArrowRight, ToggleRight } from "lucide-react";
 import type { LucideIcon } from "lucide-react";
 // extensions
 import type { ISvgIcons } from "@plane/propel/icons";
-import { CloseIcon } from "@plane/propel/icons";
+import { CopyIcon, TrashIcon, CloseIcon } from "@plane/propel/icons";
 import { findTable, getSelectedColumns } from "@/extensions/table/table/utilities/helpers";
 // local imports
 import { duplicateColumns } from "../actions";
@@ -31,7 +37,7 @@ const DROPDOWN_ITEMS: {
   {
     key: "duplicate",
     label: "Duplicate",
-    icon: Copy,
+    icon: CopyIcon,
     action: (editor) => {
       const table = findTable(editor.state.selection);
       if (!table) return;
@@ -52,7 +58,7 @@ const DROPDOWN_ITEMS: {
   {
     key: "delete",
     label: "Delete",
-    icon: Trash2,
+    icon: TrashIcon,
     action: (editor) => editor.chain().focus().deleteColumn().run(),
   },
 ];
@@ -69,7 +75,7 @@ export function ColumnOptionsDropdown(props: Props) {
     <>
       <button
         type="button"
-        className="flex items-center justify-between gap-2 w-full rounded px-1 py-1.5 text-xs text-left truncate text-custom-text-200 hover:bg-custom-background-80"
+        className="flex w-full items-center justify-between gap-2 truncate rounded-sm px-1 py-1.5 text-left text-11 text-secondary hover:bg-layer-1"
         onClick={(e) => {
           e.preventDefault();
           e.stopPropagation();
@@ -78,15 +84,15 @@ export function ColumnOptionsDropdown(props: Props) {
         }}
       >
         <div className="flex-grow truncate">Header column</div>
-        <ToggleRight className="shrink-0 size-3" />
+        <ToggleRight className="size-3 shrink-0" />
       </button>
-      <hr className="my-2 border-custom-border-200" />
+      <hr className="my-2 border-subtle" />
       <TableDragHandleDropdownColorSelector editor={editor} onSelect={onClose} />
       {DROPDOWN_ITEMS.map((item) => (
         <button
           key={item.key}
           type="button"
-          className="flex items-center gap-2 w-full rounded px-1 py-1.5 text-xs text-left truncate text-custom-text-200 hover:bg-custom-background-80"
+          className="flex w-full items-center gap-2 truncate rounded-sm px-1 py-1.5 text-left text-11 text-secondary hover:bg-layer-1"
           onClick={(e) => {
             e.preventDefault();
             e.stopPropagation();
@@ -94,7 +100,7 @@ export function ColumnOptionsDropdown(props: Props) {
             onClose();
           }}
         >
-          <item.icon className="shrink-0 size-3" />
+          <item.icon className="size-3 shrink-0" />
           <div className="flex-grow truncate">{item.label}</div>
         </button>
       ))}
diff --git a/packages/editor/src/core/extensions/table/plugins/drag-handles/column/plugin.ts b/packages/editor/src/core/extensions/table/plugins/drag-handles/column/plugin.ts
index e0039ecd2..e42380b6d 100644
--- a/packages/editor/src/core/extensions/table/plugins/drag-handles/column/plugin.ts
+++ b/packages/editor/src/core/extensions/table/plugins/drag-handles/column/plugin.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { Editor } from "@tiptap/core";
 import { Plugin, PluginKey } from "@tiptap/pm/state";
 import { TableMap } from "@tiptap/pm/tables";
@@ -18,6 +24,8 @@ type TableColumnDragHandlePluginState = {
   // track table structure to detect changes
   tableWidth?: number;
   tableNodePos?: number;
+  // track renderers for cleanup
+  renderers?: ReactRenderer[];
 };
 
 const TABLE_COLUMN_DRAG_HANDLE_PLUGIN_KEY = new PluginKey("tableColumnHandlerDecorationPlugin");
@@ -58,11 +66,22 @@ export const TableColumnDragHandlePlugin = (editor: Editor): Plugin<TableColumnD
             decorations: mapped,
             tableWidth: tableMap.width,
             tableNodePos: table.pos,
+            renderers: prev.renderers,
           };
         }
 
+        // Clean up old renderers before creating new ones
+        prev.renderers?.forEach((renderer) => {
+          try {
+            renderer.destroy();
+          } catch (error) {
+            console.error("Error destroying renderer:", error);
+          }
+        });
+
         // recreate all decorations
         const decorations: Decoration[] = [];
+        const renderers: ReactRenderer[] = [];
 
         for (let col = 0; col < tableMap.width; col++) {
           const pos = getTableCellWidgetDecorationPos(table, tableMap, col);
@@ -75,6 +94,7 @@ export const TableColumnDragHandlePlugin = (editor: Editor): Plugin<TableColumnD
             editor,
           });
 
+          renderers.push(dragHandleComponent);
           decorations.push(Decoration.widget(pos, () => dragHandleComponent.element));
         }
 
@@ -82,12 +102,27 @@ export const TableColumnDragHandlePlugin = (editor: Editor): Plugin<TableColumnD
           decorations: DecorationSet.create(newState.doc, decorations),
           tableWidth: tableMap.width,
           tableNodePos: table.pos,
+          renderers,
         };
       },
     },
     props: {
       decorations(state) {
-        return TABLE_COLUMN_DRAG_HANDLE_PLUGIN_KEY.getState(state).decorations;
+        return (TABLE_COLUMN_DRAG_HANDLE_PLUGIN_KEY.getState(state) as TableColumnDragHandlePluginState | undefined)
+          ?.decorations;
       },
     },
+    destroy() {
+      // Clean up all renderers when plugin is destroyed
+      const state =
+        editor.state &&
+        (TABLE_COLUMN_DRAG_HANDLE_PLUGIN_KEY.getState(editor.state) as TableColumnDragHandlePluginState | undefined);
+      state?.renderers?.forEach((renderer: ReactRenderer) => {
+        try {
+          renderer.destroy();
+        } catch (error) {
+          console.error("Error destroying renderer:", error);
+        }
+      });
+    },
   });
diff --git a/packages/editor/src/core/extensions/table/plugins/drag-handles/column/utils.ts b/packages/editor/src/core/extensions/table/plugins/drag-handles/column/utils.ts
index 9baefe216..ec3717d88 100644
--- a/packages/editor/src/core/extensions/table/plugins/drag-handles/column/utils.ts
+++ b/packages/editor/src/core/extensions/table/plugins/drag-handles/column/utils.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { Editor } from "@tiptap/core";
 import type { Selection } from "@tiptap/pm/state";
 import { TableMap } from "@tiptap/pm/tables";
@@ -5,7 +11,7 @@ import { TableMap } from "@tiptap/pm/tables";
 import { getSelectedRect, isCellSelection } from "@/extensions/table/table/utilities/helpers";
 import type { TableNodeLocation } from "@/extensions/table/table/utilities/helpers";
 // local imports
-import { cloneTableCell, constructDragPreviewTable, updateCellContentVisibility } from "../utils";
+import { cloneTableCell, constructDragPreviewTable, getSelectedCellPositions, hideCellContent } from "../utils";
 
 type TableColumn = {
   left: number;
@@ -145,7 +151,9 @@ export const constructColumnDragPreview = (
     }
   });
 
-  updateCellContentVisibility(editor, true);
+  // Hide the selected cells using decorations (local only, not persisted)
+  const cellPositions = getSelectedCellPositions(selection, table);
+  hideCellContent(editor, cellPositions);
 
   return tableElement;
 };
diff --git a/packages/editor/src/core/extensions/table/plugins/drag-handles/marker-utils.ts b/packages/editor/src/core/extensions/table/plugins/drag-handles/marker-utils.ts
index db2095e11..12a13d44a 100644
--- a/packages/editor/src/core/extensions/table/plugins/drag-handles/marker-utils.ts
+++ b/packages/editor/src/core/extensions/table/plugins/drag-handles/marker-utils.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export const DROP_MARKER_CLASS = "table-drop-marker";
 export const COL_DRAG_MARKER_CLASS = "table-col-drag-marker";
 export const ROW_DRAG_MARKER_CLASS = "table-row-drag-marker";
diff --git a/packages/editor/src/core/extensions/table/plugins/drag-handles/row/drag-handle.tsx b/packages/editor/src/core/extensions/table/plugins/drag-handles/row/drag-handle.tsx
index 703a8b8de..ef038f995 100644
--- a/packages/editor/src/core/extensions/table/plugins/drag-handles/row/drag-handle.tsx
+++ b/packages/editor/src/core/extensions/table/plugins/drag-handles/row/drag-handle.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import {
   autoUpdate,
   flip,
@@ -12,7 +18,7 @@ import {
 } from "@floating-ui/react";
 import type { Editor } from "@tiptap/core";
 import { Ellipsis } from "lucide-react";
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 // plane imports
 import { cn } from "@plane/utils";
 // constants
@@ -36,7 +42,7 @@ import {
   updateRowDragMarker,
   updateRowDropMarker,
 } from "../marker-utils";
-import { updateCellContentVisibility } from "../utils";
+import { showCellContent } from "../utils";
 import { RowOptionsDropdown } from "./dropdown";
 import { calculateRowDropIndex, constructRowDragPreview, getTableRowNodesInfo } from "./utils";
 
@@ -49,6 +55,25 @@ export function RowDragHandle(props: RowDragHandleProps) {
   const { editor, row } = props;
   // states
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  // Track active event listeners for cleanup
+  const activeListenersRef = useRef<{
+    mouseup?: (e: MouseEvent) => void;
+    mousemove?: (e: MouseEvent) => void;
+  }>({});
+
+  // Cleanup window event listeners on unmount
+  useEffect(() => {
+    const listenersRef = activeListenersRef.current;
+    return () => {
+      // Remove any lingering window event listeners when component unmounts
+      if (listenersRef.mouseup) {
+        window.removeEventListener("mouseup", listenersRef.mouseup);
+      }
+      if (listenersRef.mousemove) {
+        window.removeEventListener("mousemove", listenersRef.mousemove);
+      }
+    };
+  }, []);
   // floating ui
   const { refs, floatingStyles, context } = useFloating({
     placement: "bottom-start",
@@ -94,6 +119,17 @@ export function RowDragHandle(props: RowDragHandleProps) {
       e.stopPropagation();
       e.preventDefault();
 
+      // Prevent multiple simultaneous drag operations
+      // If there are already listeners attached, remove them first
+      if (activeListenersRef.current.mouseup) {
+        window.removeEventListener("mouseup", activeListenersRef.current.mouseup);
+      }
+      if (activeListenersRef.current.mousemove) {
+        window.removeEventListener("mousemove", activeListenersRef.current.mousemove);
+      }
+      activeListenersRef.current.mouseup = undefined;
+      activeListenersRef.current.mousemove = undefined;
+
       const table = findTable(editor.state.selection);
       if (!table) return;
 
@@ -116,8 +152,9 @@ export function RowDragHandle(props: RowDragHandleProps) {
         hideDropMarker(dropMarker);
         hideDragMarker(dragMarker);
 
+        // Show cell content by clearing decorations
         if (isCellSelection(editor.state.selection)) {
-          updateCellContentVisibility(editor, false);
+          showCellContent(editor);
         }
 
         if (row !== dropIndex) {
@@ -133,6 +170,9 @@ export function RowDragHandle(props: RowDragHandleProps) {
         }
         window.removeEventListener("mouseup", handleFinish);
         window.removeEventListener("mousemove", handleMove);
+        // Clear the ref
+        activeListenersRef.current.mouseup = undefined;
+        activeListenersRef.current.mousemove = undefined;
       };
 
       let pseudoRow: HTMLElement | undefined;
@@ -168,6 +208,9 @@ export function RowDragHandle(props: RowDragHandleProps) {
       };
 
       try {
+        // Store references for cleanup
+        activeListenersRef.current.mouseup = handleFinish;
+        activeListenersRef.current.mousemove = handleMove;
         window.addEventListener("mouseup", handleFinish);
         window.addEventListener("mousemove", handleMove);
       } catch (error) {
@@ -180,21 +223,18 @@ export function RowDragHandle(props: RowDragHandleProps) {
 
   return (
     <>
-      <div className="table-row-handle-container absolute z-20 top-0 left-0 flex justify-center items-center h-full -translate-x-1/2">
+      <div className="table-row-handle-container absolute top-0 left-0 z-20 flex h-full -translate-x-1/2 items-center justify-center">
         <button
           ref={refs.setReference}
           {...getReferenceProps()}
           type="button"
           onMouseDown={handleMouseDown}
-          className={cn(
-            "py-1 bg-custom-background-90 border border-custom-border-400 rounded outline-none transition-all duration-200",
-            {
-              "!opacity-100 bg-custom-primary-100 border-custom-primary-100": isDropdownOpen,
-              "hover:bg-custom-background-80": !isDropdownOpen,
-            }
-          )}
+          className={cn("rounded-sm border border-strong-1 bg-layer-1 py-1 transition-all duration-200 outline-none", {
+            "border-accent-strong bg-accent-primary !opacity-100": isDropdownOpen,
+            "hover:bg-layer-1-hover": !isDropdownOpen,
+          })}
         >
-          <Ellipsis className="size-4 text-custom-text-100 rotate-90" />
+          <Ellipsis className="size-4 rotate-90 text-primary" />
         </button>
       </div>
       {isDropdownOpen && (
@@ -207,7 +247,7 @@ export function RowDragHandle(props: RowDragHandleProps) {
             lockScroll
           />
           <div
-            className="max-h-[90vh] w-[12rem] overflow-y-auto rounded-md border-[0.5px] border-custom-border-300 bg-custom-background-100 px-2 py-2.5 shadow-custom-shadow-rg"
+            className="max-h-[90vh] w-[12rem] overflow-y-auto rounded-md border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 shadow-raised-200"
             ref={refs.setFloating}
             {...getFloatingProps()}
             style={{
diff --git a/packages/editor/src/core/extensions/table/plugins/drag-handles/row/dropdown.tsx b/packages/editor/src/core/extensions/table/plugins/drag-handles/row/dropdown.tsx
index 1f764f737..6359adffa 100644
--- a/packages/editor/src/core/extensions/table/plugins/drag-handles/row/dropdown.tsx
+++ b/packages/editor/src/core/extensions/table/plugins/drag-handles/row/dropdown.tsx
@@ -1,10 +1,16 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { Editor } from "@tiptap/core";
 import { TableMap } from "@tiptap/pm/tables";
-import { ArrowDown, ArrowUp, Copy, ToggleRight, Trash2 } from "lucide-react";
+import { ArrowDown, ArrowUp, ToggleRight } from "lucide-react";
 import type { LucideIcon } from "lucide-react";
 // extensions
 import type { ISvgIcons } from "@plane/propel/icons";
-import { CloseIcon } from "@plane/propel/icons";
+import { CopyIcon, TrashIcon, CloseIcon } from "@plane/propel/icons";
 import { findTable, getSelectedRows } from "@/extensions/table/table/utilities/helpers";
 // local imports
 import { duplicateRows } from "../actions";
@@ -31,7 +37,7 @@ const DROPDOWN_ITEMS: {
   {
     key: "duplicate",
     label: "Duplicate",
-    icon: Copy,
+    icon: CopyIcon,
     action: (editor) => {
       const table = findTable(editor.state.selection);
       if (!table) return;
@@ -52,7 +58,7 @@ const DROPDOWN_ITEMS: {
   {
     key: "delete",
     label: "Delete",
-    icon: Trash2,
+    icon: TrashIcon,
     action: (editor) => editor.chain().focus().deleteRow().run(),
   },
 ];
@@ -69,7 +75,7 @@ export function RowOptionsDropdown(props: Props) {
     <>
       <button
         type="button"
-        className="flex items-center justify-between gap-2 w-full rounded px-1 py-1.5 text-xs text-left truncate text-custom-text-200 hover:bg-custom-background-80"
+        className="flex w-full items-center justify-between gap-2 truncate rounded-sm px-1 py-1.5 text-left text-11 text-secondary hover:bg-layer-1"
         onClick={(e) => {
           e.preventDefault();
           e.stopPropagation();
@@ -78,15 +84,15 @@ export function RowOptionsDropdown(props: Props) {
         }}
       >
         <div className="flex-grow truncate">Header row</div>
-        <ToggleRight className="shrink-0 size-3" />
+        <ToggleRight className="size-3 shrink-0" />
       </button>
-      <hr className="my-2 border-custom-border-200" />
+      <hr className="my-2 border-subtle" />
       <TableDragHandleDropdownColorSelector editor={editor} onSelect={onClose} />
       {DROPDOWN_ITEMS.map((item) => (
         <button
           key={item.key}
           type="button"
-          className="flex items-center gap-2 w-full rounded px-1 py-1.5 text-xs text-left truncate text-custom-text-200 hover:bg-custom-background-80"
+          className="flex w-full items-center gap-2 truncate rounded-sm px-1 py-1.5 text-left text-11 text-secondary hover:bg-layer-1"
           onClick={(e) => {
             e.preventDefault();
             e.stopPropagation();
@@ -94,7 +100,7 @@ export function RowOptionsDropdown(props: Props) {
             onClose();
           }}
         >
-          <item.icon className="shrink-0 size-3" />
+          <item.icon className="size-3 shrink-0" />
           <div className="flex-grow truncate">{item.label}</div>
         </button>
       ))}
diff --git a/packages/editor/src/core/extensions/table/plugins/drag-handles/row/plugin.ts b/packages/editor/src/core/extensions/table/plugins/drag-handles/row/plugin.ts
index 18ac677c4..cc33da4e2 100644
--- a/packages/editor/src/core/extensions/table/plugins/drag-handles/row/plugin.ts
+++ b/packages/editor/src/core/extensions/table/plugins/drag-handles/row/plugin.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { Editor } from "@tiptap/core";
 import { Plugin, PluginKey } from "@tiptap/pm/state";
 import { TableMap } from "@tiptap/pm/tables";
@@ -18,6 +24,8 @@ type TableRowDragHandlePluginState = {
   // track table structure to detect changes
   tableHeight?: number;
   tableNodePos?: number;
+  // track renderers for cleanup
+  renderers?: ReactRenderer[];
 };
 
 const TABLE_ROW_DRAG_HANDLE_PLUGIN_KEY = new PluginKey("tableRowDragHandlePlugin");
@@ -58,11 +66,22 @@ export const TableRowDragHandlePlugin = (editor: Editor): Plugin<TableRowDragHan
             decorations: mapped,
             tableHeight: tableMap.height,
             tableNodePos: table.pos,
+            renderers: prev.renderers,
           };
         }
 
+        // Clean up old renderers before creating new ones
+        prev.renderers?.forEach((renderer) => {
+          try {
+            renderer.destroy();
+          } catch (error) {
+            console.error("Error destroying renderer:", error);
+          }
+        });
+
         // recreate all decorations
         const decorations: Decoration[] = [];
+        const renderers: ReactRenderer[] = [];
 
         for (let row = 0; row < tableMap.height; row++) {
           const pos = getTableCellWidgetDecorationPos(table, tableMap, row * tableMap.width);
@@ -75,6 +94,7 @@ export const TableRowDragHandlePlugin = (editor: Editor): Plugin<TableRowDragHan
             editor,
           });
 
+          renderers.push(dragHandleComponent);
           decorations.push(Decoration.widget(pos, () => dragHandleComponent.element));
         }
 
@@ -82,12 +102,27 @@ export const TableRowDragHandlePlugin = (editor: Editor): Plugin<TableRowDragHan
           decorations: DecorationSet.create(newState.doc, decorations),
           tableHeight: tableMap.height,
           tableNodePos: table.pos,
+          renderers,
         };
       },
     },
     props: {
       decorations(state) {
-        return TABLE_ROW_DRAG_HANDLE_PLUGIN_KEY.getState(state).decorations;
+        return (TABLE_ROW_DRAG_HANDLE_PLUGIN_KEY.getState(state) as TableRowDragHandlePluginState | undefined)
+          ?.decorations;
       },
     },
+    destroy() {
+      // Clean up all renderers when plugin is destroyed
+      const state =
+        editor.state &&
+        (TABLE_ROW_DRAG_HANDLE_PLUGIN_KEY.getState(editor.state) as TableRowDragHandlePluginState | undefined);
+      state?.renderers?.forEach((renderer: ReactRenderer) => {
+        try {
+          renderer.destroy();
+        } catch (error) {
+          console.error("Error destroying renderer:", error);
+        }
+      });
+    },
   });
diff --git a/packages/editor/src/core/extensions/table/plugins/drag-handles/row/utils.ts b/packages/editor/src/core/extensions/table/plugins/drag-handles/row/utils.ts
index c3b62fc0a..d10ec4015 100644
--- a/packages/editor/src/core/extensions/table/plugins/drag-handles/row/utils.ts
+++ b/packages/editor/src/core/extensions/table/plugins/drag-handles/row/utils.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { Editor } from "@tiptap/core";
 import type { Selection } from "@tiptap/pm/state";
 import { TableMap } from "@tiptap/pm/tables";
@@ -5,7 +11,7 @@ import { TableMap } from "@tiptap/pm/tables";
 import { getSelectedRect, isCellSelection } from "@/extensions/table/table/utilities/helpers";
 import type { TableNodeLocation } from "@/extensions/table/table/utilities/helpers";
 // local imports
-import { cloneTableCell, constructDragPreviewTable, updateCellContentVisibility } from "../utils";
+import { cloneTableCell, constructDragPreviewTable, getSelectedCellPositions, hideCellContent } from "../utils";
 
 type TableRow = {
   top: number;
@@ -144,7 +150,9 @@ export const constructRowDragPreview = (
     }
   });
 
-  updateCellContentVisibility(editor, true);
+  // Hide the selected cells using decorations (local only, not persisted)
+  const cellPositions = getSelectedCellPositions(selection, table);
+  hideCellContent(editor, cellPositions);
 
   return tableElement;
 };
diff --git a/packages/editor/src/core/extensions/table/plugins/drag-handles/utils.ts b/packages/editor/src/core/extensions/table/plugins/drag-handles/utils.ts
index 591d43576..9d7e8df83 100644
--- a/packages/editor/src/core/extensions/table/plugins/drag-handles/utils.ts
+++ b/packages/editor/src/core/extensions/table/plugins/drag-handles/utils.ts
@@ -1,7 +1,19 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { Editor } from "@tiptap/core";
+import type { Selection } from "@tiptap/pm/state";
+import { TableMap } from "@tiptap/pm/tables";
 // constants
-import { CORE_EXTENSIONS } from "@/constants/extension";
 import { CORE_EDITOR_META } from "@/constants/meta";
+// extensions
+import { getSelectedRect, isCellSelection } from "@/extensions/table/table/utilities/helpers";
+import type { TableNodeLocation } from "@/extensions/table/table/utilities/helpers";
+// local imports
+import { updateTransactionMeta } from "../drag-state";
 
 /**
  * @description Construct a pseudo table element which will act as a parent for column and row drag previews.
@@ -13,7 +25,7 @@ export const constructDragPreviewTable = (): {
 } => {
   const tableElement = document.createElement("table");
   tableElement.classList.add("table-drag-preview");
-  tableElement.classList.add("bg-custom-background-100");
+  tableElement.classList.add("bg-surface-1");
   tableElement.style.opacity = "0.9";
   const tableBodyElement = document.createElement("tbody");
   tableElement.appendChild(tableBodyElement);
@@ -41,20 +53,41 @@ export const cloneTableCell = (
 };
 
 /**
- * @description This function updates the `hideContent` attribute of the table cells and headers.
- * @param {Editor} editor - The editor instance.
- * @param {boolean} hideContent - Whether to hide the content.
- * @returns {boolean} Whether the content visibility was updated.
+ * @description Get positions of all cells in the current selection.
+ * @param {Selection} selection - The selection.
+ * @param {TableNodeLocation} table - The table node location.
+ * @returns {number[]} Array of cell positions.
  */
-export const updateCellContentVisibility = (editor: Editor, hideContent: boolean): boolean =>
-  editor
-    .chain()
-    .focus()
-    .setMeta(CORE_EDITOR_META.ADD_TO_HISTORY, false)
-    .updateAttributes(CORE_EXTENSIONS.TABLE_CELL, {
-      hideContent,
-    })
-    .updateAttributes(CORE_EXTENSIONS.TABLE_HEADER, {
-      hideContent,
-    })
-    .run();
+export const getSelectedCellPositions = (selection: Selection, table: TableNodeLocation): number[] => {
+  if (!isCellSelection(selection)) return [];
+
+  const tableMap = TableMap.get(table.node);
+  const selectedRect = getSelectedRect(selection, tableMap);
+  const cellsInSelection = tableMap.cellsInRect(selectedRect);
+
+  // Convert relative positions to absolute document positions
+  return cellsInSelection.map((cellPos) => table.start + cellPos);
+};
+
+/**
+ * @description Hide cell content using decorations (local only, not persisted).
+ * @param {Editor} editor - The editor instance.
+ * @param {number[]} cellPositions - Array of cell positions to hide.
+ */
+export const hideCellContent = (editor: Editor, cellPositions: number[]): void => {
+  const tr = editor.view.state.tr;
+  updateTransactionMeta(tr, cellPositions);
+  tr.setMeta(CORE_EDITOR_META.ADD_TO_HISTORY, false);
+  editor.view.dispatch(tr);
+};
+
+/**
+ * @description Show cell content by clearing decorations.
+ * @param {Editor} editor - The editor instance.
+ */
+export const showCellContent = (editor: Editor): void => {
+  const tr = editor.view.state.tr;
+  updateTransactionMeta(tr, null);
+  tr.setMeta(CORE_EDITOR_META.ADD_TO_HISTORY, false);
+  editor.view.dispatch(tr);
+};
diff --git a/packages/editor/src/core/extensions/table/plugins/drag-state.ts b/packages/editor/src/core/extensions/table/plugins/drag-state.ts
new file mode 100644
index 000000000..d7afd2691
--- /dev/null
+++ b/packages/editor/src/core/extensions/table/plugins/drag-state.ts
@@ -0,0 +1,64 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { Transaction } from "@tiptap/pm/state";
+import { Plugin, PluginKey } from "@tiptap/pm/state";
+import { Decoration, DecorationSet } from "@tiptap/pm/view";
+
+const TABLE_DRAG_STATE_PLUGIN_KEY = new PluginKey("tableDragState");
+
+export const updateTransactionMeta = (tr: Transaction, hiddenCellPositions: number[] | null) => {
+  tr.setMeta(TABLE_DRAG_STATE_PLUGIN_KEY, hiddenCellPositions);
+};
+
+/**
+ * @description Plugin to manage table drag state using decorations.
+ * This allows hiding cell content during drag operations without modifying the document.
+ * Decorations are local to each user and not persisted or shared.
+ */
+export const TableDragStatePlugin = new Plugin({
+  key: TABLE_DRAG_STATE_PLUGIN_KEY,
+  state: {
+    init() {
+      return DecorationSet.empty;
+    },
+    apply(tr, oldState) {
+      // Get metadata about which cells to hide
+      const hiddenCellPositions = tr.getMeta(TABLE_DRAG_STATE_PLUGIN_KEY) as number[] | null;
+
+      if (hiddenCellPositions === undefined) {
+        // No change, map decorations through the transaction
+        return oldState.map(tr.mapping, tr.doc);
+      }
+
+      if (hiddenCellPositions === null || !Array.isArray(hiddenCellPositions) || hiddenCellPositions.length === 0) {
+        // Clear all decorations
+        return DecorationSet.empty;
+      }
+
+      // Create decorations for hidden cells
+      const decorations: Decoration[] = [];
+      hiddenCellPositions.forEach((pos) => {
+        if (typeof pos !== "number") return;
+        const node = tr.doc.nodeAt(pos);
+        if (node) {
+          decorations.push(
+            Decoration.node(pos, pos + node.nodeSize, {
+              class: "content-hidden",
+            })
+          );
+        }
+      });
+
+      return DecorationSet.create(tr.doc, decorations);
+    },
+  },
+  props: {
+    decorations(state) {
+      return this.getState(state);
+    },
+  },
+});
diff --git a/packages/editor/src/core/extensions/table/plugins/insert-handlers/plugin.ts b/packages/editor/src/core/extensions/table/plugins/insert-handlers/plugin.ts
index 7188e88d0..075404670 100644
--- a/packages/editor/src/core/extensions/table/plugins/insert-handlers/plugin.ts
+++ b/packages/editor/src/core/extensions/table/plugins/insert-handlers/plugin.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { Editor } from "@tiptap/core";
 import { Plugin, PluginKey } from "@tiptap/pm/state";
 // local imports
diff --git a/packages/editor/src/core/extensions/table/plugins/insert-handlers/utils.ts b/packages/editor/src/core/extensions/table/plugins/insert-handlers/utils.ts
index f760538ab..2cf781070 100644
--- a/packages/editor/src/core/extensions/table/plugins/insert-handlers/utils.ts
+++ b/packages/editor/src/core/extensions/table/plugins/insert-handlers/utils.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { Editor } from "@tiptap/core";
 import type { Node as ProseMirrorNode } from "@tiptap/pm/model";
 import { addColumn, removeColumn, addRow, removeRow, TableMap } from "@tiptap/pm/tables";
diff --git a/packages/editor/src/core/extensions/table/plugins/selection-outline/plugin.ts b/packages/editor/src/core/extensions/table/plugins/selection-outline/plugin.ts
index a13fd1310..f1f04afee 100644
--- a/packages/editor/src/core/extensions/table/plugins/selection-outline/plugin.ts
+++ b/packages/editor/src/core/extensions/table/plugins/selection-outline/plugin.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { findParentNode } from "@tiptap/core";
 import type { Editor } from "@tiptap/core";
 import { Plugin, PluginKey } from "@tiptap/pm/state";
diff --git a/packages/editor/src/core/extensions/table/plugins/selection-outline/utils.ts b/packages/editor/src/core/extensions/table/plugins/selection-outline/utils.ts
index f4c43e77e..9b149b23f 100644
--- a/packages/editor/src/core/extensions/table/plugins/selection-outline/utils.ts
+++ b/packages/editor/src/core/extensions/table/plugins/selection-outline/utils.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { TableMap } from "@tiptap/pm/tables";
 
 /**
diff --git a/packages/editor/src/core/extensions/table/table-cell.ts b/packages/editor/src/core/extensions/table/table-cell.ts
index 9aa284cd1..3bc7c2299 100644
--- a/packages/editor/src/core/extensions/table/table-cell.ts
+++ b/packages/editor/src/core/extensions/table/table-cell.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { mergeAttributes, Node } from "@tiptap/core";
 import { TableMap } from "@tiptap/pm/tables";
 // constants
@@ -47,9 +53,6 @@ export const TableCell = Node.create<TableCellOptions>({
       textColor: {
         default: null,
       },
-      hideContent: {
-        default: false,
-      },
     };
   },
 
@@ -110,7 +113,6 @@ export const TableCell = Node.create<TableCellOptions>({
     return [
       "td",
       mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, {
-        class: node.attrs.hideContent ? "content-hidden" : "",
         style: `background-color: ${node.attrs.background}; color: ${node.attrs.textColor};`,
       }),
       0,
diff --git a/packages/editor/src/core/extensions/table/table-header.ts b/packages/editor/src/core/extensions/table/table-header.ts
index 635fb7ee7..9f939c2a4 100644
--- a/packages/editor/src/core/extensions/table/table-header.ts
+++ b/packages/editor/src/core/extensions/table/table-header.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { mergeAttributes, Node } from "@tiptap/core";
 // constants
 import { CORE_EXTENSIONS } from "@/constants/extension";
@@ -39,9 +45,6 @@ export const TableHeader = Node.create<TableHeaderOptions>({
       background: {
         default: "none",
       },
-      hideContent: {
-        default: false,
-      },
     };
   },
 
@@ -57,7 +60,6 @@ export const TableHeader = Node.create<TableHeaderOptions>({
     return [
       "th",
       mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, {
-        class: node.attrs.hideContent ? "content-hidden" : "",
         style: `background-color: ${node.attrs.background};`,
       }),
       0,
diff --git a/packages/editor/src/core/extensions/table/table-row.ts b/packages/editor/src/core/extensions/table/table-row.ts
index f01c39138..a5a32f361 100644
--- a/packages/editor/src/core/extensions/table/table-row.ts
+++ b/packages/editor/src/core/extensions/table/table-row.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { mergeAttributes, Node } from "@tiptap/core";
 // constants
 import { CORE_EXTENSIONS } from "@/constants/extension";
diff --git a/packages/editor/src/core/extensions/table/table/icons.ts b/packages/editor/src/core/extensions/table/table/icons.ts
index 51c778411..e31f09e02 100644
--- a/packages/editor/src/core/extensions/table/table/icons.ts
+++ b/packages/editor/src/core/extensions/table/table/icons.ts
@@ -1,5 +1,11 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export const icons = {
-  colorPicker: `<svg xmlns="http://www.w3.org/2000/svg" length="24" viewBox="0 0 24 24" style="transform: ;msFilter:;"><path fill="rgb(var(--color-text-300))" d="M20 14c-.092.064-2 2.083-2 3.5 0 1.494.949 2.448 2 2.5.906.044 2-.891 2-2.5 0-1.5-1.908-3.436-2-3.5zM9.586 20c.378.378.88.586 1.414.586s1.036-.208 1.414-.586l7-7-.707-.707L11 4.586 8.707 2.293 7.293 3.707 9.586 6 4 11.586c-.378.378-.586.88-.586 1.414s.208 1.036.586 1.414L9.586 20zM11 7.414 16.586 13H5.414L11 7.414z"></path></svg>`,
+  colorPicker: `<svg xmlns="http://www.w3.org/2000/svg" length="24" viewBox="0 0 24 24" style="transform: ;msFilter:;"><path fill="var(--text-color-tertiary)" d="M20 14c-.092.064-2 2.083-2 3.5 0 1.494.949 2.448 2 2.5.906.044 2-.891 2-2.5 0-1.5-1.908-3.436-2-3.5zM9.586 20c.378.378.88.586 1.414.586s1.036-.208 1.414-.586l7-7-.707-.707L11 4.586 8.707 2.293 7.293 3.707 9.586 6 4 11.586c-.378.378-.586.88-.586 1.414s.208 1.036.586 1.414L9.586 20zM11 7.414 16.586 13H5.414L11 7.414z"></path></svg>`,
   deleteColumn: `<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-trash-2"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/></svg>`,
   deleteRow: `<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-trash-2"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/></svg>`,
   insertLeftTableIcon: `<svg
@@ -9,7 +15,7 @@ export const icons = {
       >
     <path
       d="M224.617-140.001q-30.307 0-51.307-21-21-21-21-51.308v-535.382q0-30.308 21-51.308t51.307-21H360q30.307 0 51.307 21 21 21 21 51.308v535.382q0 30.308-21 51.308t-51.307 21H224.617Zm375.383 0q-30.307 0-51.307-21-21-21-21-51.308v-535.382q0-30.308 21-51.308t51.307-21h135.383q30.307 0 51.307 21 21 21 21 51.308v535.382q0 30.308-21 51.308t-51.307 21H600Zm147.691-607.69q0-4.616-3.846-8.463-3.846-3.846-8.462-3.846H600q-4.616 0-8.462 3.846-3.847 3.847-3.847 8.463v535.382q0 4.616 3.847 8.463Q595.384-200 600-200h135.383q4.616 0 8.462-3.846 3.846-3.847 3.846-8.463v-535.382ZM587.691-200h160-160Z"
-      fill="rgb(var(--color-text-300))"
+      fill="var(--text-color-tertiary)"
     />
   </svg>
 `,
@@ -20,7 +26,7 @@ export const icons = {
   >
     <path
       d="M600-140.001q-30.307 0-51.307-21-21-21-21-51.308v-535.382q0-30.308 21-51.308t51.307-21h135.383q30.307 0 51.307 21 21 21 21 51.308v535.382q0 30.308-21 51.308t-51.307 21H600Zm-375.383 0q-30.307 0-51.307-21-21-21-21-51.308v-535.382q0-30.308 21-51.308t51.307-21H360q30.307 0 51.307 21 21 21 21 51.308v535.382q0 30.308-21 51.308t-51.307 21H224.617Zm-12.308-607.69v535.382q0 4.616 3.846 8.463 3.846 3.846 8.462 3.846H360q4.616 0 8.462-3.846 3.847-3.847 3.847-8.463v-535.382q0-4.616-3.847-8.463Q364.616-760 360-760H224.617q-4.616 0-8.462 3.846-3.846 3.847-3.846 8.463Zm160 547.691h-160 160Z"
-      fill="rgb(var(--color-text-300))"
+      fill="var(--text-color-tertiary)"
     />
   </svg>
 `,
@@ -31,12 +37,12 @@ export const icons = {
   >
     <path
       d="M212.309-527.693q-30.308 0-51.308-21t-21-51.307v-135.383q0-30.307 21-51.307 21-21 51.308-21h535.382q30.308 0 51.308 21t21 51.307V-600q0 30.307-21 51.307-21 21-51.308 21H212.309Zm0 375.383q-30.308 0-51.308-21t-21-51.307V-360q0-30.307 21-51.307 21-21 51.308-21h535.382q30.308 0 51.308 21t21 51.307v135.383q0 30.307-21 51.307-21 21-51.308 21H212.309Zm0-59.999h535.382q4.616 0 8.463-3.846 3.846-3.846 3.846-8.462V-360q0-4.616-3.846-8.462-3.847-3.847-8.463-3.847H212.309q-4.616 0-8.463 3.847Q200-364.616 200-360v135.383q0 4.616 3.846 8.462 3.847 3.846 8.463 3.846Zm-12.309-160v160-160Z"
-      fill="rgb(var(--color-text-300))"
+      fill="var(--text-color-tertiary)"
     />
   </svg>
 `,
-  toggleColumnHeader: `<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="rgb(var(--color-text-300))" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-toggle-right"><rect width="20" height="12" x="2" y="6" rx="6" ry="6"/><circle cx="16" cy="12" r="2"/></svg>`,
-  toggleRowHeader: `<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="rgb(var(--color-text-300))" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-toggle-right"><rect width="20" height="12" x="2" y="6" rx="6" ry="6"/><circle cx="16" cy="12" r="2"/></svg>`,
+  toggleColumnHeader: `<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="var(--text-color-tertiary)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-toggle-right"><rect width="20" height="12" x="2" y="6" rx="6" ry="6"/><circle cx="16" cy="12" r="2"/></svg>`,
+  toggleRowHeader: `<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="var(--text-color-tertiary)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-toggle-right"><rect width="20" height="12" x="2" y="6" rx="6" ry="6"/><circle cx="16" cy="12" r="2"/></svg>`,
   insertBottomTableIcon: `<svg
     xmlns="http://www.w3.org/2000/svg"
     length={24}
@@ -44,7 +50,7 @@ export const icons = {
   >
     <path
       d="M212.309-152.31q-30.308 0-51.308-21t-21-51.307V-360q0-30.307 21-51.307 21-21 51.308-21h535.382q30.308 0 51.308 21t21 51.307v135.383q0 30.307-21 51.307-21 21-51.308 21H212.309Zm0-375.383q-30.308 0-51.308-21t-21-51.307v-135.383q0-30.307 21-51.307 21-21 51.308-21h535.382q30.308 0 51.308 21t21 51.307V-600q0 30.307-21 51.307-21 21-51.308 21H212.309Zm535.382-219.998H212.309q-4.616 0-8.463 3.846-3.846 3.846-3.846 8.462V-600q0 4.616 3.846 8.462 3.847 3.847 8.463 3.847h535.382q4.616 0 8.463-3.847Q760-595.384 760-600v-135.383q0-4.616-3.846-8.462-3.847-3.846-8.463-3.846ZM200-587.691v-160 160Z"
-      fill="rgb(var(--color-text-300))"
+      fill="var(--text-color-tertiary)"
     />
   </svg>
 `,
diff --git a/packages/editor/src/core/extensions/table/table/index.ts b/packages/editor/src/core/extensions/table/table/index.ts
index 328422b73..f66f0adf2 100644
--- a/packages/editor/src/core/extensions/table/table/index.ts
+++ b/packages/editor/src/core/extensions/table/table/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export { Table } from "./table";
 
 export const DEFAULT_COLUMN_WIDTH = 150;
diff --git a/packages/editor/src/core/extensions/table/table/table-view.tsx b/packages/editor/src/core/extensions/table/table/table-view.tsx
index c7f60f514..2d2598c8d 100644
--- a/packages/editor/src/core/extensions/table/table/table-view.tsx
+++ b/packages/editor/src/core/extensions/table/table/table-view.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { Editor, NodeViewProps } from "@tiptap/core";
 import type { Node as ProseMirrorNode, ResolvedPos } from "@tiptap/pm/model";
 import { TableMap, updateColumnsOnResize } from "@tiptap/pm/tables";
diff --git a/packages/editor/src/core/extensions/table/table/table.ts b/packages/editor/src/core/extensions/table/table/table.ts
index a0706db3b..fe8d3e36e 100644
--- a/packages/editor/src/core/extensions/table/table/table.ts
+++ b/packages/editor/src/core/extensions/table/table/table.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { ParentConfig } from "@tiptap/core";
 import { callOrReturn, getExtensionField, mergeAttributes, Node } from "@tiptap/core";
 import { TextSelection } from "@tiptap/pm/state";
@@ -22,6 +28,7 @@ import {
 // constants
 import { CORE_EXTENSIONS } from "@/constants/extension";
 // local imports
+import { TableDragStatePlugin } from "../plugins/drag-state";
 import { TableColumnDragHandlePlugin } from "../plugins/drag-handles/column/plugin";
 import { TableRowDragHandlePlugin } from "../plugins/drag-handles/row/plugin";
 import { TableInsertPlugin } from "../plugins/insert-handlers/plugin";
@@ -275,6 +282,7 @@ export const Table = Node.create<TableOptions>({
       tableEditing({
         allowTableNodeSelection: this.options.allowTableNodeSelection,
       }),
+      TableDragStatePlugin,
       TableInsertPlugin(this.editor),
       TableColumnDragHandlePlugin(this.editor),
       TableRowDragHandlePlugin(this.editor),
diff --git a/packages/editor/src/core/extensions/table/table/utilities/create-cell.ts b/packages/editor/src/core/extensions/table/table/utilities/create-cell.ts
index f28e32785..5a07bb175 100644
--- a/packages/editor/src/core/extensions/table/table/utilities/create-cell.ts
+++ b/packages/editor/src/core/extensions/table/table/utilities/create-cell.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { Fragment, Node as ProsemirrorNode, NodeType } from "@tiptap/pm/model";
 
 export function createCell(
diff --git a/packages/editor/src/core/extensions/table/table/utilities/create-table.ts b/packages/editor/src/core/extensions/table/table/utilities/create-table.ts
index 56c6b31ac..54ba38848 100644
--- a/packages/editor/src/core/extensions/table/table/utilities/create-table.ts
+++ b/packages/editor/src/core/extensions/table/table/utilities/create-table.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { Fragment, Node as ProsemirrorNode, Schema } from "@tiptap/pm/model";
 // extensions
 import { createCell } from "@/extensions/table/table/utilities/create-cell";
diff --git a/packages/editor/src/core/extensions/table/table/utilities/delete-column.ts b/packages/editor/src/core/extensions/table/table/utilities/delete-column.ts
index 9cbcdd0a3..f76544096 100644
--- a/packages/editor/src/core/extensions/table/table/utilities/delete-column.ts
+++ b/packages/editor/src/core/extensions/table/table/utilities/delete-column.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { Command } from "@tiptap/core";
 import { deleteColumn, deleteTable } from "@tiptap/pm/tables";
 // local imports
diff --git a/packages/editor/src/core/extensions/table/table/utilities/delete-key-shortcut.ts b/packages/editor/src/core/extensions/table/table/utilities/delete-key-shortcut.ts
index 4025e9f9c..c415bc8c4 100644
--- a/packages/editor/src/core/extensions/table/table/utilities/delete-key-shortcut.ts
+++ b/packages/editor/src/core/extensions/table/table/utilities/delete-key-shortcut.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { findParentNodeClosestToPos } from "@tiptap/core";
 import type { Editor, KeyboardShortcutCommand } from "@tiptap/core";
 import type { Node as ProseMirrorNode } from "@tiptap/pm/model";
diff --git a/packages/editor/src/core/extensions/table/table/utilities/delete-row.ts b/packages/editor/src/core/extensions/table/table/utilities/delete-row.ts
index 4a7d161d1..b7981829b 100644
--- a/packages/editor/src/core/extensions/table/table/utilities/delete-row.ts
+++ b/packages/editor/src/core/extensions/table/table/utilities/delete-row.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { Command } from "@tiptap/core";
 import { deleteRow, deleteTable } from "@tiptap/pm/tables";
 // local imports
diff --git a/packages/editor/src/core/extensions/table/table/utilities/get-table-node-types.ts b/packages/editor/src/core/extensions/table/table/utilities/get-table-node-types.ts
index 772f805f7..2bb907144 100644
--- a/packages/editor/src/core/extensions/table/table/utilities/get-table-node-types.ts
+++ b/packages/editor/src/core/extensions/table/table/utilities/get-table-node-types.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { NodeType, Schema } from "@tiptap/pm/model";
 
 export function getTableNodeTypes(schema: Schema): { [key: string]: NodeType } {
diff --git a/packages/editor/src/core/extensions/table/table/utilities/helpers.ts b/packages/editor/src/core/extensions/table/table/utilities/helpers.ts
index 45c9af4f6..965b6cdd3 100644
--- a/packages/editor/src/core/extensions/table/table/utilities/helpers.ts
+++ b/packages/editor/src/core/extensions/table/table/utilities/helpers.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { findParentNode } from "@tiptap/core";
 import type { Editor } from "@tiptap/core";
 import type { Node as ProseMirrorNode } from "@tiptap/pm/model";
diff --git a/packages/editor/src/core/extensions/table/table/utilities/insert-line-above-table-action.ts b/packages/editor/src/core/extensions/table/table/utilities/insert-line-above-table-action.ts
index ded1ac392..11f8433d8 100644
--- a/packages/editor/src/core/extensions/table/table/utilities/insert-line-above-table-action.ts
+++ b/packages/editor/src/core/extensions/table/table/utilities/insert-line-above-table-action.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { KeyboardShortcutCommand } from "@tiptap/core";
 // constants
 import { CORE_EXTENSIONS } from "@/constants/extension";
diff --git a/packages/editor/src/core/extensions/table/table/utilities/insert-line-below-table-action.ts b/packages/editor/src/core/extensions/table/table/utilities/insert-line-below-table-action.ts
index 13d412ffe..ef90d25aa 100644
--- a/packages/editor/src/core/extensions/table/table/utilities/insert-line-below-table-action.ts
+++ b/packages/editor/src/core/extensions/table/table/utilities/insert-line-below-table-action.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { KeyboardShortcutCommand } from "@tiptap/core";
 // constants
 import { CORE_EXTENSIONS } from "@/constants/extension";
diff --git a/packages/editor/src/core/extensions/text-align.ts b/packages/editor/src/core/extensions/text-align.ts
index bfe62f6c0..56f8447f8 100644
--- a/packages/editor/src/core/extensions/text-align.ts
+++ b/packages/editor/src/core/extensions/text-align.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import TextAlign from "@tiptap/extension-text-align";
 
 export type TTextAlign = "left" | "center" | "right";
diff --git a/packages/editor/src/core/extensions/title-extension.ts b/packages/editor/src/core/extensions/title-extension.ts
index cf4f52f97..5489c2314 100644
--- a/packages/editor/src/core/extensions/title-extension.ts
+++ b/packages/editor/src/core/extensions/title-extension.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { AnyExtension, Extensions } from "@tiptap/core";
 import Document from "@tiptap/extension-document";
 import Heading from "@tiptap/extension-heading";
diff --git a/packages/editor/src/core/extensions/trailing-node.ts b/packages/editor/src/core/extensions/trailing-node.ts
index 5f9624e96..b41d888fe 100644
--- a/packages/editor/src/core/extensions/trailing-node.ts
+++ b/packages/editor/src/core/extensions/trailing-node.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { Extension } from "@tiptap/core";
 import type { NodeType, Node as ProseMirrorNode } from "@tiptap/pm/model";
 import { Plugin, PluginKey } from "@tiptap/pm/state";
diff --git a/packages/editor/src/core/extensions/unique-id/extension.ts b/packages/editor/src/core/extensions/unique-id/extension.ts
index c07ade359..bd220080c 100644
--- a/packages/editor/src/core/extensions/unique-id/extension.ts
+++ b/packages/editor/src/core/extensions/unique-id/extension.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { HocuspocusProvider } from "@hocuspocus/provider";
 import { Extension } from "@tiptap/core";
 import type { Node as ProseMirrorNode } from "@tiptap/pm/model";
diff --git a/packages/editor/src/core/extensions/unique-id/plugin.ts b/packages/editor/src/core/extensions/unique-id/plugin.ts
index c7f09860b..e2839bdc1 100644
--- a/packages/editor/src/core/extensions/unique-id/plugin.ts
+++ b/packages/editor/src/core/extensions/unique-id/plugin.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { combineTransactionSteps, findChildrenInRange, findDuplicates, getChangedRanges } from "@tiptap/core";
 import { Fragment, Slice } from "@tiptap/pm/model";
 import type { Node as ProseMirrorNode } from "@tiptap/pm/model";
diff --git a/packages/editor/src/core/extensions/unique-id/utils.ts b/packages/editor/src/core/extensions/unique-id/utils.ts
index 22606c9c6..92016e39a 100644
--- a/packages/editor/src/core/extensions/unique-id/utils.ts
+++ b/packages/editor/src/core/extensions/unique-id/utils.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { findChildren } from "@tiptap/core";
 import type { EditorView } from "@tiptap/pm/view";
 // types
diff --git a/packages/editor/src/core/extensions/utility.ts b/packages/editor/src/core/extensions/utility.ts
index 167ba298e..ddc598d0d 100644
--- a/packages/editor/src/core/extensions/utility.ts
+++ b/packages/editor/src/core/extensions/utility.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { Extension } from "@tiptap/core";
 import codemark from "prosemirror-codemark";
 // helpers
@@ -8,8 +14,6 @@ import type { TAdditionalActiveDropbarExtensions } from "@/plane-editor/types/ut
 import { DropHandlerPlugin } from "@/plugins/drop";
 import { FilePlugins } from "@/plugins/file/root";
 import { MarkdownClipboardPlugin } from "@/plugins/markdown-clipboard";
-// types
-import { PasteAssetPlugin } from "@/plugins/paste-asset";
 import type { IEditorProps, TEditorAsset, TFileHandler } from "@/types";
 
 type TActiveDropbarExtensions =
@@ -82,7 +86,6 @@ export const UtilityExtension = (props: Props) => {
           flaggedExtensions,
           editor: this.editor,
         }),
-        PasteAssetPlugin(),
       ];
     },
 
diff --git a/packages/editor/src/core/extensions/work-item-embed/extension-config.ts b/packages/editor/src/core/extensions/work-item-embed/extension-config.ts
index 0ea25c770..fb0fc1ba2 100644
--- a/packages/editor/src/core/extensions/work-item-embed/extension-config.ts
+++ b/packages/editor/src/core/extensions/work-item-embed/extension-config.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { mergeAttributes, Node } from "@tiptap/core";
 // constants
 import { CORE_EXTENSIONS } from "@/constants/extension";
diff --git a/packages/editor/src/core/extensions/work-item-embed/extension.tsx b/packages/editor/src/core/extensions/work-item-embed/extension.tsx
index 819214cef..be9af1193 100644
--- a/packages/editor/src/core/extensions/work-item-embed/extension.tsx
+++ b/packages/editor/src/core/extensions/work-item-embed/extension.tsx
@@ -1,7 +1,15 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { ReactNodeViewRenderer, NodeViewWrapper } from "@tiptap/react";
 import type { NodeViewProps } from "@tiptap/react";
 // local imports
 import { WorkItemEmbedExtensionConfig } from "./extension-config";
+import type { TWorkItemEmbedAttributes } from "./types";
+import { EWorkItemEmbedAttributeNames } from "./types";
 
 type Props = {
   widgetCallback: ({
@@ -18,15 +26,18 @@ type Props = {
 export function WorkItemEmbedExtension(props: Props) {
   return WorkItemEmbedExtensionConfig.extend({
     addNodeView() {
-      return ReactNodeViewRenderer((issueProps: NodeViewProps) => (
-        <NodeViewWrapper>
-          {props.widgetCallback({
-            issueId: issueProps.node.attrs.entity_identifier,
-            projectId: issueProps.node.attrs.project_identifier,
-            workspaceSlug: issueProps.node.attrs.workspace_identifier,
-          })}
-        </NodeViewWrapper>
-      ));
+      return ReactNodeViewRenderer((issueProps: NodeViewProps) => {
+        const attrs = issueProps.node.attrs as TWorkItemEmbedAttributes;
+        return (
+          <NodeViewWrapper key={attrs[EWorkItemEmbedAttributeNames.ID]}>
+            {props.widgetCallback({
+              issueId: attrs[EWorkItemEmbedAttributeNames.ENTITY_IDENTIFIER] ?? "",
+              projectId: attrs[EWorkItemEmbedAttributeNames.PROJECT_IDENTIFIER],
+              workspaceSlug: attrs[EWorkItemEmbedAttributeNames.WORKSPACE_IDENTIFIER],
+            })}
+          </NodeViewWrapper>
+        );
+      });
     },
   });
 }
diff --git a/packages/editor/src/core/extensions/work-item-embed/index.ts b/packages/editor/src/core/extensions/work-item-embed/index.ts
index 2ce32da8b..2dcbf265b 100644
--- a/packages/editor/src/core/extensions/work-item-embed/index.ts
+++ b/packages/editor/src/core/extensions/work-item-embed/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./extension";
diff --git a/packages/editor/src/core/extensions/work-item-embed/types.ts b/packages/editor/src/core/extensions/work-item-embed/types.ts
new file mode 100644
index 000000000..aeb6caf0b
--- /dev/null
+++ b/packages/editor/src/core/extensions/work-item-embed/types.ts
@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export enum EWorkItemEmbedAttributeNames {
+  ID = "id",
+  ENTITY_IDENTIFIER = "entity_identifier",
+  PROJECT_IDENTIFIER = "project_identifier",
+  WORKSPACE_IDENTIFIER = "workspace_identifier",
+  ENTITY_NAME = "entity_name",
+}
+
+export type TWorkItemEmbedAttributes = {
+  [EWorkItemEmbedAttributeNames.ID]: string | undefined;
+  [EWorkItemEmbedAttributeNames.ENTITY_IDENTIFIER]: string | undefined;
+  [EWorkItemEmbedAttributeNames.PROJECT_IDENTIFIER]: string | undefined;
+  [EWorkItemEmbedAttributeNames.WORKSPACE_IDENTIFIER]: string | undefined;
+  [EWorkItemEmbedAttributeNames.ENTITY_NAME]: string | undefined;
+};
diff --git a/packages/editor/src/core/helpers/assets.ts b/packages/editor/src/core/helpers/assets.ts
index 00623cc24..7cc937b2d 100644
--- a/packages/editor/src/core/helpers/assets.ts
+++ b/packages/editor/src/core/helpers/assets.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { Node as ProseMirrorNode } from "@tiptap/pm/model";
 // plane imports
 import type { ADDITIONAL_EXTENSIONS } from "@plane/utils";
diff --git a/packages/editor/src/core/helpers/common.ts b/packages/editor/src/core/helpers/common.ts
index e4a61b3ac..1139bb72f 100644
--- a/packages/editor/src/core/helpers/common.ts
+++ b/packages/editor/src/core/helpers/common.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { Node as ProseMirrorNode } from "@tiptap/pm/model";
 import type { EditorState, Selection } from "@tiptap/pm/state";
 // plane imports
@@ -13,10 +19,10 @@ type EditorClassNameArgs = {
 
 export const getEditorClassNames = ({ noBorder, borderOnFocus, containerClassName }: EditorClassNameArgs) =>
   cn(
-    "w-full max-w-full sm:rounded-lg focus:outline-none focus:border-0",
+    "w-full max-w-full focus:border-0 focus:outline-none sm:rounded-lg",
     {
-      "border border-custom-border-200": !noBorder,
-      "focus:border border-custom-border-300": borderOnFocus,
+      "border border-subtle-1": !noBorder,
+      "border-strong focus:border": borderOnFocus,
     },
     containerClassName
   );
diff --git a/packages/editor/src/core/helpers/editor-commands.ts b/packages/editor/src/core/helpers/editor-commands.ts
index 333bab4f3..58dcd484f 100644
--- a/packages/editor/src/core/helpers/editor-commands.ts
+++ b/packages/editor/src/core/helpers/editor-commands.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { Editor, Range } from "@tiptap/core";
 // constants
 import { CORE_EXTENSIONS } from "@/constants/extension";
diff --git a/packages/editor/src/core/helpers/editor-ref.ts b/packages/editor/src/core/helpers/editor-ref.ts
index bc81364af..81a14cfc6 100644
--- a/packages/editor/src/core/helpers/editor-ref.ts
+++ b/packages/editor/src/core/helpers/editor-ref.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { HocuspocusProvider } from "@hocuspocus/provider";
 import type { Editor } from "@tiptap/core";
 import { DOMSerializer } from "@tiptap/pm/model";
@@ -89,6 +95,27 @@ export const getEditorRefHelpers = (args: TArgs): EditorRefApi => {
       });
       return markdown;
     },
+    copyMarkdownToClipboard: () => {
+      if (!editor) return;
+
+      const html = editor.getHTML();
+      const metaData = getEditorMetaData(html);
+      const markdown = convertHTMLToMarkdown({
+        description_html: html,
+        metaData,
+      });
+
+      const copyHandler = (event: ClipboardEvent) => {
+        event.preventDefault();
+        event.clipboardData?.setData("text/plain", markdown);
+        event.clipboardData?.setData("text/html", html);
+        event.clipboardData?.setData("text/plane-editor-html", html);
+        document.removeEventListener("copy", copyHandler);
+      };
+
+      document.addEventListener("copy", copyHandler);
+      document.execCommand("copy");
+    },
     isAnyDropbarOpen: () => {
       if (!editor) return false;
       const utilityStorage = editor.storage.utility;
diff --git a/packages/editor/src/core/helpers/file.ts b/packages/editor/src/core/helpers/file.ts
index 33d3c7d78..b8284c232 100644
--- a/packages/editor/src/core/helpers/file.ts
+++ b/packages/editor/src/core/helpers/file.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export enum EFileError {
   INVALID_FILE_TYPE = "INVALID_FILE_TYPE",
   FILE_SIZE_TOO_LARGE = "FILE_SIZE_TOO_LARGE",
diff --git a/packages/editor/src/core/helpers/find-suggestion-match.ts b/packages/editor/src/core/helpers/find-suggestion-match.ts
index 1ac439658..d535563b7 100644
--- a/packages/editor/src/core/helpers/find-suggestion-match.ts
+++ b/packages/editor/src/core/helpers/find-suggestion-match.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { escapeForRegEx } from "@tiptap/core";
 import type { Trigger, SuggestionMatch } from "@tiptap/suggestion";
 
diff --git a/packages/editor/src/core/helpers/floating-ui.ts b/packages/editor/src/core/helpers/floating-ui.ts
index 3330d24fa..7c9a317d9 100644
--- a/packages/editor/src/core/helpers/floating-ui.ts
+++ b/packages/editor/src/core/helpers/floating-ui.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { computePosition, flip, shift, autoUpdate } from "@floating-ui/dom";
 import type { Placement, ReferenceElement, Strategy } from "@floating-ui/dom";
 import { posToDOMRect } from "@tiptap/core";
diff --git a/packages/editor/src/core/helpers/get-document-server-event.ts b/packages/editor/src/core/helpers/get-document-server-event.ts
index d364355b7..fd2c50c42 100644
--- a/packages/editor/src/core/helpers/get-document-server-event.ts
+++ b/packages/editor/src/core/helpers/get-document-server-event.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { DocumentCollaborativeEvents } from "@/constants/document-collaborative-events";
 import type {
   TDocumentEventKey,
diff --git a/packages/editor/src/core/helpers/image-helpers.ts b/packages/editor/src/core/helpers/image-helpers.ts
index d09ac5f84..eae46bb83 100644
--- a/packages/editor/src/core/helpers/image-helpers.ts
+++ b/packages/editor/src/core/helpers/image-helpers.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { Editor } from "@tiptap/core";
 // constants
 import { CORE_EXTENSIONS } from "@/constants/extension";
diff --git a/packages/editor/src/core/helpers/insert-content-at-cursor-position.ts b/packages/editor/src/core/helpers/insert-content-at-cursor-position.ts
index 7c535acfc..3aafbbd1e 100644
--- a/packages/editor/src/core/helpers/insert-content-at-cursor-position.ts
+++ b/packages/editor/src/core/helpers/insert-content-at-cursor-position.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { Editor } from "@tiptap/react";
 
 export const insertContentAtSavedSelection = (editor: Editor, content: string) => {
diff --git a/packages/editor/src/core/helpers/insert-empty-paragraph-at-node-boundary.ts b/packages/editor/src/core/helpers/insert-empty-paragraph-at-node-boundary.ts
index 847555dc8..c81588df4 100644
--- a/packages/editor/src/core/helpers/insert-empty-paragraph-at-node-boundary.ts
+++ b/packages/editor/src/core/helpers/insert-empty-paragraph-at-node-boundary.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { KeyboardShortcutCommand } from "@tiptap/core";
 import type { Node as ProseMirrorNode } from "@tiptap/pm/model";
 // constants
@@ -5,10 +11,7 @@ import { CORE_EXTENSIONS } from "@/constants/extension";
 
 type Direction = "up" | "down";
 
-export const insertEmptyParagraphAtNodeBoundaries: (
-  direction: Direction,
-  nodeType: string
-) => KeyboardShortcutCommand =
+export const insertEmptyParagraphAtNodeBoundaries: (direction: Direction, nodeType: string) => KeyboardShortcutCommand =
   (direction, nodeType) =>
   ({ editor }) => {
     try {
diff --git a/packages/editor/src/core/helpers/parser.ts b/packages/editor/src/core/helpers/parser.ts
index d662a3f4b..a96cdf0f5 100644
--- a/packages/editor/src/core/helpers/parser.ts
+++ b/packages/editor/src/core/helpers/parser.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // plane imports
 import type { TDocumentPayload, TDuplicateAssetData, TDuplicateAssetResponse, TEditorAssetType } from "@plane/types";
 // plane web imports
diff --git a/packages/editor/src/core/helpers/paste-asset.ts b/packages/editor/src/core/helpers/paste-asset.ts
new file mode 100644
index 000000000..1c6b3bbc5
--- /dev/null
+++ b/packages/editor/src/core/helpers/paste-asset.ts
@@ -0,0 +1,34 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { assetDuplicationHandlers } from "@/plane-editor/helpers/asset-duplication";
+
+// Utility function to process HTML content with all registered handlers
+export const processAssetDuplication = (htmlContent: string): { processedHtml: string } => {
+  const tempDiv = document.createElement("div");
+  tempDiv.innerHTML = htmlContent;
+
+  let processedHtml = htmlContent;
+
+  // Process each registered component type
+  for (const [componentName, handler] of Object.entries(assetDuplicationHandlers)) {
+    const elements = tempDiv.querySelectorAll(componentName);
+
+    if (elements.length > 0) {
+      elements.forEach((element) => {
+        const result = handler({ element, originalHtml: processedHtml });
+        if (result.shouldProcess) {
+          processedHtml = result.modifiedHtml;
+        }
+      });
+
+      // Update tempDiv with processed HTML for next iteration
+      tempDiv.innerHTML = processedHtml;
+    }
+  }
+
+  return { processedHtml };
+};
diff --git a/packages/editor/src/core/helpers/scroll-to-node.ts b/packages/editor/src/core/helpers/scroll-to-node.ts
index 0cc089c52..43d095747 100644
--- a/packages/editor/src/core/helpers/scroll-to-node.ts
+++ b/packages/editor/src/core/helpers/scroll-to-node.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { Editor } from "@tiptap/react";
 // types
 import type { IMarking } from "@/types";
diff --git a/packages/editor/src/core/helpers/tippy.ts b/packages/editor/src/core/helpers/tippy.ts
index c254bd450..fc285c1bf 100644
--- a/packages/editor/src/core/helpers/tippy.ts
+++ b/packages/editor/src/core/helpers/tippy.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export type CommandListInstance = {
   onKeyDown: (props: { event: KeyboardEvent }) => boolean;
 };
diff --git a/packages/editor/src/core/helpers/yjs-utils.ts b/packages/editor/src/core/helpers/yjs-utils.ts
index bb7d1fef6..74eb57d3c 100644
--- a/packages/editor/src/core/helpers/yjs-utils.ts
+++ b/packages/editor/src/core/helpers/yjs-utils.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { Buffer } from "buffer";
 import type { Extensions, JSONContent } from "@tiptap/core";
 import { getSchema } from "@tiptap/core";
@@ -215,7 +221,7 @@ export const convertHTMLDocumentToAllFormats = (args: TConvertHTMLDocumentToAllF
     const { contentBinaryEncoded, contentHTML, contentJSON } =
       getAllDocumentFormatsFromRichTextEditorBinaryData(contentBinary);
     allFormats = {
-      description: contentJSON,
+      description_json: contentJSON,
       description_html: contentHTML,
       description_binary: contentBinaryEncoded,
     };
@@ -228,7 +234,7 @@ export const convertHTMLDocumentToAllFormats = (args: TConvertHTMLDocumentToAllF
       false
     );
     allFormats = {
-      description: contentJSON,
+      description_json: contentJSON,
       description_html: contentHTML,
       description_binary: contentBinaryEncoded,
     };
diff --git a/packages/editor/src/core/hooks/use-collaborative-editor.ts b/packages/editor/src/core/hooks/use-collaborative-editor.ts
index 40e80bb31..8815c6683 100644
--- a/packages/editor/src/core/hooks/use-collaborative-editor.ts
+++ b/packages/editor/src/core/hooks/use-collaborative-editor.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { HocuspocusProvider } from "@hocuspocus/provider";
 import type { Extensions } from "@tiptap/core";
 import Collaboration from "@tiptap/extension-collaboration";
@@ -54,6 +60,7 @@ export const useCollaborativeEditor = (props: UseCollaborativeEditorArgs) => {
     isTouchDevice,
     onEditorFocus,
     placeholder,
+    showPlaceholderOnEmpty,
     tabIndex,
     titleRef,
     updatePageProperties,
@@ -123,6 +130,7 @@ export const useCollaborativeEditor = (props: UseCollaborativeEditorArgs) => {
       onEditorFocus,
       onTransaction,
       placeholder,
+      showPlaceholderOnEmpty,
       provider,
       tabIndex,
     }),
@@ -147,6 +155,7 @@ export const useCollaborativeEditor = (props: UseCollaborativeEditorArgs) => {
       onEditorFocus,
       onTransaction,
       placeholder,
+      showPlaceholderOnEmpty,
       tabIndex,
     ]
   );
diff --git a/packages/editor/src/core/hooks/use-editor-navigation.ts b/packages/editor/src/core/hooks/use-editor-navigation.ts
index d5bdb1d27..197849831 100644
--- a/packages/editor/src/core/hooks/use-editor-navigation.ts
+++ b/packages/editor/src/core/hooks/use-editor-navigation.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { Editor } from "@tiptap/core";
 import { Extension } from "@tiptap/core";
 import { useCallback, useRef } from "react";
diff --git a/packages/editor/src/core/hooks/use-editor.ts b/packages/editor/src/core/hooks/use-editor.ts
index 5328a3ea5..5cbf10681 100644
--- a/packages/editor/src/core/hooks/use-editor.ts
+++ b/packages/editor/src/core/hooks/use-editor.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useEditorState, useEditor as useTiptapEditor } from "@tiptap/react";
 import { useImperativeHandle, useEffect } from "react";
 import type { MarkdownStorage } from "tiptap-markdown";
@@ -40,6 +46,7 @@ export const useEditor = (props: TEditorHookProps) => {
     onEditorFocus,
     onTransaction,
     placeholder,
+    showPlaceholderOnEmpty,
     tabIndex,
     provider,
     value,
@@ -70,6 +77,7 @@ export const useEditor = (props: TEditorHookProps) => {
           isTouchDevice,
           mentionHandler,
           placeholder,
+          showPlaceholderOnEmpty,
           tabIndex,
           provider,
         }),
diff --git a/packages/editor/src/core/hooks/use-file-upload.ts b/packages/editor/src/core/hooks/use-file-upload.ts
index 86f94633a..e9d3b8d4a 100644
--- a/packages/editor/src/core/hooks/use-file-upload.ts
+++ b/packages/editor/src/core/hooks/use-file-upload.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { Editor, NodeViewProps } from "@tiptap/core";
 import type { DragEvent } from "react";
 import { useCallback, useEffect, useState } from "react";
diff --git a/packages/editor/src/core/hooks/use-title-editor.ts b/packages/editor/src/core/hooks/use-title-editor.ts
index de850bf82..048f21ba6 100644
--- a/packages/editor/src/core/hooks/use-title-editor.ts
+++ b/packages/editor/src/core/hooks/use-title-editor.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { HocuspocusProvider } from "@hocuspocus/provider";
 import type { Extensions } from "@tiptap/core";
 import { Placeholder } from "@tiptap/extension-placeholder";
@@ -13,7 +19,7 @@ import { getEditorRefHelpers } from "@/helpers/editor-ref";
 import type { IEditorPropsExtended, IEditorProps } from "@/types";
 import type { EditorTitleRefApi, ICollaborativeDocumentEditorProps } from "@/types/editor";
 
-type Props = {
+type TUseTitleEditorProps = {
   editable?: boolean;
   provider: HocuspocusProvider;
   titleRef?: React.MutableRefObject<EditorTitleRefApi | null>;
@@ -31,7 +37,7 @@ type Props = {
  * A hook that creates a title editor with collaboration features
  * Uses the same Y.Doc as the main editor but a different field
  */
-export const useTitleEditor = (props: Props) => {
+export const useTitleEditor = (props: TUseTitleEditorProps) => {
   const {
     editable = true,
     id,
diff --git a/packages/editor/src/core/hooks/use-yjs-setup.ts b/packages/editor/src/core/hooks/use-yjs-setup.ts
index 42aecca51..655fb1d18 100644
--- a/packages/editor/src/core/hooks/use-yjs-setup.ts
+++ b/packages/editor/src/core/hooks/use-yjs-setup.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { HocuspocusProvider } from "@hocuspocus/provider";
 // react
 import { useCallback, useEffect, useRef, useState } from "react";
@@ -187,7 +193,7 @@ export const useYjsSetup = ({ docId, serverUrl, authToken, onStateChange }: UseY
 
     provider.on("close", handleClose);
 
-    setYjsSession({ provider, ydoc: provider.document as Y.Doc });
+    setYjsSession({ provider, ydoc: provider.document });
 
     // Handle page visibility changes (sleep/wake, tab switching)
     const handleVisibilityChange = (event?: Event) => {
diff --git a/packages/editor/src/core/plugins/ai-handle.ts b/packages/editor/src/core/plugins/ai-handle.ts
index 6185cc24f..29e6a76c4 100644
--- a/packages/editor/src/core/plugins/ai-handle.ts
+++ b/packages/editor/src/core/plugins/ai-handle.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { NodeSelection } from "@tiptap/pm/state";
 import type { EditorView } from "@tiptap/pm/view";
 // extensions
@@ -88,7 +94,7 @@ export const AIHandlePlugin = (options: SideMenuPluginProps): SideMenuHandleOpti
   const view = (view: EditorView, sideMenu: HTMLDivElement | null) => {
     // create handle element
     const className =
-      "grid place-items-center font-medium size-5 aspect-square text-xs text-custom-text-300 hover:bg-custom-background-80 rounded-sm opacity-100 !outline-none z-[5] transition-[background-color,_opacity] duration-200 ease-linear";
+      "grid place-items-center font-medium size-5 aspect-square text-11 text-tertiary hover:bg-layer-1 rounded-xs opacity-100 !outline-none z-[5] transition-[background-color,_opacity] duration-200 ease-linear";
     aiHandleElement = document.createElement("button");
     aiHandleElement.type = "button";
     aiHandleElement.id = "ai-handle";
diff --git a/packages/editor/src/core/plugins/drag-handle.ts b/packages/editor/src/core/plugins/drag-handle.ts
index a065e46cb..9ecbcd263 100644
--- a/packages/editor/src/core/plugins/drag-handle.ts
+++ b/packages/editor/src/core/plugins/drag-handle.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { Node, Schema } from "@tiptap/pm/model";
 import { Fragment, Slice } from "@tiptap/pm/model";
 import { NodeSelection } from "@tiptap/pm/state";
@@ -42,13 +48,13 @@ const createDragHandleElement = (): HTMLElement => {
   dragHandleElement.draggable = true;
   dragHandleElement.dataset.dragHandle = "";
   dragHandleElement.classList.value =
-    "hidden sm:flex items-center size-5 aspect-square rounded-sm cursor-grab outline-none hover:bg-custom-background-80 active:bg-custom-background-80 active:cursor-grabbing transition-[background-color,_opacity] duration-200 ease-linear";
+    "hidden sm:flex items-center size-5 aspect-square rounded-xs cursor-grab outline-none hover:bg-layer-1-hover active:bg-layer-1 active:cursor-grabbing transition-[background-color,_opacity] duration-200 ease-linear";
 
   const iconElement1 = document.createElement("span");
-  iconElement1.classList.value = "pointer-events-none text-custom-text-300";
+  iconElement1.classList.value = "pointer-events-none text-tertiary";
   iconElement1.innerHTML = verticalEllipsisIcon;
   const iconElement2 = document.createElement("span");
-  iconElement2.classList.value = "pointer-events-none text-custom-text-300 -ml-2.5";
+  iconElement2.classList.value = "pointer-events-none text-tertiary -ml-2.5";
   iconElement2.innerHTML = verticalEllipsisIcon;
 
   dragHandleElement.appendChild(iconElement1);
diff --git a/packages/editor/src/core/plugins/drop.ts b/packages/editor/src/core/plugins/drop.ts
index b0cd873cb..e0e9057a5 100644
--- a/packages/editor/src/core/plugins/drop.ts
+++ b/packages/editor/src/core/plugins/drop.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { Editor } from "@tiptap/core";
 import { Plugin, PluginKey } from "@tiptap/pm/state";
 // constants
diff --git a/packages/editor/src/core/plugins/file/delete.ts b/packages/editor/src/core/plugins/file/delete.ts
index 607ea2044..cb7ed66fa 100644
--- a/packages/editor/src/core/plugins/file/delete.ts
+++ b/packages/editor/src/core/plugins/file/delete.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { Editor } from "@tiptap/core";
 import { Plugin, PluginKey } from "@tiptap/pm/state";
 import type { EditorState, Transaction } from "@tiptap/pm/state";
diff --git a/packages/editor/src/core/plugins/file/restore.ts b/packages/editor/src/core/plugins/file/restore.ts
index 178e41d2b..b222b15fd 100644
--- a/packages/editor/src/core/plugins/file/restore.ts
+++ b/packages/editor/src/core/plugins/file/restore.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { Editor } from "@tiptap/core";
 import { Plugin, PluginKey } from "@tiptap/pm/state";
 import type { EditorState, Transaction } from "@tiptap/pm/state";
diff --git a/packages/editor/src/core/plugins/file/root.ts b/packages/editor/src/core/plugins/file/root.ts
index 7717f7388..9b68513df 100644
--- a/packages/editor/src/core/plugins/file/root.ts
+++ b/packages/editor/src/core/plugins/file/root.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { Editor } from "@tiptap/core";
 import type { Plugin } from "@tiptap/pm/state";
 // types
diff --git a/packages/editor/src/core/plugins/file/types.ts b/packages/editor/src/core/plugins/file/types.ts
index 636737169..9065fe621 100644
--- a/packages/editor/src/core/plugins/file/types.ts
+++ b/packages/editor/src/core/plugins/file/types.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { Node as ProseMirrorNode } from "@tiptap/pm/model";
 
 export type TFileNode = ProseMirrorNode & {
diff --git a/packages/editor/src/core/plugins/highlight.ts b/packages/editor/src/core/plugins/highlight.ts
index 2ea623c6c..06a243cd8 100644
--- a/packages/editor/src/core/plugins/highlight.ts
+++ b/packages/editor/src/core/plugins/highlight.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { Plugin, PluginKey } from "@tiptap/pm/state";
 import { Decoration, DecorationSet } from "@tiptap/pm/view";
 
@@ -18,7 +24,7 @@ const buildDecorations = (doc: Parameters<typeof DecorationSet.create>[0], highl
   }
 
   const decorations: Decoration[] = [];
-  const highlightClassNames = ["bg-custom-primary-100/20", "transition-all", "duration-300", "rounded"];
+  const highlightClassNames = ["bg-accent-primary/20", "transition-all", "duration-300", "rounded"];
 
   doc.descendants((node, pos) => {
     // Check if this node has the id we're looking for
diff --git a/packages/editor/src/core/plugins/markdown-clipboard.ts b/packages/editor/src/core/plugins/markdown-clipboard.ts
index de34a027b..efa5c7668 100644
--- a/packages/editor/src/core/plugins/markdown-clipboard.ts
+++ b/packages/editor/src/core/plugins/markdown-clipboard.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { Editor } from "@tiptap/core";
 import { Plugin, PluginKey } from "@tiptap/pm/state";
 // plane imports
@@ -32,6 +38,7 @@ export const MarkdownClipboardPlugin = (args: TArgs): Plugin => {
             });
             event.clipboardData?.setData("text/plain", markdown);
             event.clipboardData?.setData("text/html", clipboardHTML);
+            event.clipboardData?.setData("text/plane-editor-html", clipboardHTML);
             return true;
           } catch (error) {
             console.error("Failed to copy markdown content to clipboard:", error);
diff --git a/packages/editor/src/core/plugins/paste-asset.ts b/packages/editor/src/core/plugins/paste-asset.ts
deleted file mode 100644
index 67ab9056d..000000000
--- a/packages/editor/src/core/plugins/paste-asset.ts
+++ /dev/null
@@ -1,77 +0,0 @@
-import { Plugin, PluginKey } from "@tiptap/pm/state";
-import { assetDuplicationHandlers } from "@/plane-editor/helpers/asset-duplication";
-
-export const PasteAssetPlugin = (): Plugin =>
-  new Plugin({
-    key: new PluginKey("paste-asset-duplication"),
-    props: {
-      handlePaste: (view, event) => {
-        if (!event.clipboardData) return false;
-
-        const htmlContent = event.clipboardData.getData("text/html");
-        if (!htmlContent || htmlContent.includes('data-uploaded="true"')) return false;
-
-        // Process the HTML content using the registry
-        const { processedHtml, hasChanges } = processAssetDuplication(htmlContent);
-
-        if (!hasChanges) return false;
-
-        event.preventDefault();
-        event.stopPropagation();
-
-        // Mark the content as already processed to avoid infinite loops
-        const tempDiv = document.createElement("div");
-        tempDiv.innerHTML = processedHtml;
-        const metaTag = tempDiv.querySelector("meta[charset='utf-8']");
-        if (metaTag) {
-          metaTag.setAttribute("data-uploaded", "true");
-        }
-        const finalHtml = tempDiv.innerHTML;
-
-        const newDataTransfer = new DataTransfer();
-        newDataTransfer.setData("text/html", finalHtml);
-        if (event.clipboardData) {
-          newDataTransfer.setData("text/plain", event.clipboardData.getData("text/plain"));
-        }
-
-        const pasteEvent = new ClipboardEvent("paste", {
-          clipboardData: newDataTransfer,
-          bubbles: true,
-          cancelable: true,
-        });
-
-        view.dom.dispatchEvent(pasteEvent);
-
-        return true;
-      },
-    },
-  });
-
-// Utility function to process HTML content with all registered handlers
-const processAssetDuplication = (htmlContent: string): { processedHtml: string; hasChanges: boolean } => {
-  const tempDiv = document.createElement("div");
-  tempDiv.innerHTML = htmlContent;
-
-  let processedHtml = htmlContent;
-  let hasChanges = false;
-
-  // Process each registered component type
-  for (const [componentName, handler] of Object.entries(assetDuplicationHandlers)) {
-    const elements = tempDiv.querySelectorAll(componentName);
-
-    if (elements.length > 0) {
-      elements.forEach((element) => {
-        const result = handler({ element, originalHtml: processedHtml });
-        if (result.shouldProcess) {
-          processedHtml = result.modifiedHtml;
-          hasChanges = true;
-        }
-      });
-
-      // Update tempDiv with processed HTML for next iteration
-      tempDiv.innerHTML = processedHtml;
-    }
-  }
-
-  return { processedHtml, hasChanges };
-};
diff --git a/packages/editor/src/core/props.ts b/packages/editor/src/core/props.ts
index 98821d67d..51f9b937a 100644
--- a/packages/editor/src/core/props.ts
+++ b/packages/editor/src/core/props.ts
@@ -1,6 +1,14 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { EditorProps } from "@tiptap/pm/view";
 // plane utils
 import { cn } from "@plane/utils";
+// helpers
+import { processAssetDuplication } from "@/helpers/paste-asset";
 
 type TArgs = {
   editorClassName: string;
@@ -12,7 +20,7 @@ export const CoreEditorProps = (props: TArgs): EditorProps => {
   return {
     attributes: {
       class: cn(
-        "prose prose-brand max-w-full prose-headings:font-display font-default focus:outline-none",
+        "prose-brand prose-headings:font-display font-default max-w-full prose focus:outline-none",
         editorClassName
       ),
     },
@@ -27,5 +35,15 @@ export const CoreEditorProps = (props: TArgs): EditorProps => {
         }
       },
     },
+    handlePaste: (view, event) => {
+      if (!event.clipboardData) return false;
+
+      const htmlContent = event.clipboardData.getData("text/plane-editor-html");
+      if (!htmlContent) return false;
+
+      const { processedHtml } = processAssetDuplication(htmlContent);
+      view.pasteHTML(processedHtml);
+      return true;
+    },
   };
 };
diff --git a/packages/editor/src/core/types/ai.ts b/packages/editor/src/core/types/ai.ts
index 448482e65..de4e6deb7 100644
--- a/packages/editor/src/core/types/ai.ts
+++ b/packages/editor/src/core/types/ai.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export type TAIMenuProps = {
   isOpen: boolean;
   onClose: () => void;
diff --git a/packages/editor/src/core/types/asset.ts b/packages/editor/src/core/types/asset.ts
index dc1e528d6..092698353 100644
--- a/packages/editor/src/core/types/asset.ts
+++ b/packages/editor/src/core/types/asset.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // constants
 import type { CORE_EXTENSIONS } from "@/constants/extension";
 // plane editor imports
diff --git a/packages/editor/src/core/types/collaboration.ts b/packages/editor/src/core/types/collaboration.ts
index b0ef4ca2b..a0542607a 100644
--- a/packages/editor/src/core/types/collaboration.ts
+++ b/packages/editor/src/core/types/collaboration.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export type CollaborationError =
   | { type: "auth-failed"; message: string }
   | { type: "network-error"; message: string }
diff --git a/packages/editor/src/core/types/config.ts b/packages/editor/src/core/types/config.ts
index 0c5c434f0..74fff4dfe 100644
--- a/packages/editor/src/core/types/config.ts
+++ b/packages/editor/src/core/types/config.ts
@@ -1,5 +1,10 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // plane imports
-import type { TWebhookConnectionQueryParams } from "@plane/types";
 import type { TExtendedFileHandler } from "@/plane-editor/types/config";
 
 export type TFileHandler = {
diff --git a/packages/editor/src/core/types/document-collaborative-events.ts b/packages/editor/src/core/types/document-collaborative-events.ts
index 53ca50bba..ba583d108 100644
--- a/packages/editor/src/core/types/document-collaborative-events.ts
+++ b/packages/editor/src/core/types/document-collaborative-events.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { DocumentCollaborativeEvents } from "@/constants/document-collaborative-events";
 
 // Base type for all action payloads
diff --git a/packages/editor/src/core/types/editor.ts b/packages/editor/src/core/types/editor.ts
index 40e7c26d1..5da8e419a 100644
--- a/packages/editor/src/core/types/editor.ts
+++ b/packages/editor/src/core/types/editor.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { Content, Extensions, JSONContent, RawCommands } from "@tiptap/core";
 import type { MarkType, NodeType } from "@tiptap/pm/model";
 import type { Selection } from "@tiptap/pm/state";
@@ -120,6 +126,7 @@ export type CoreEditorRefApi = {
   getDocumentInfo: () => TDocumentInfo;
   getHeadings: () => IMarking[];
   getMarkDown: () => string;
+  copyMarkdownToClipboard: () => void;
   getSelectedText: () => string | null;
   insertText: (contentHTML: string, insertOnNextLine?: boolean) => void;
   isAnyDropbarOpen: () => boolean;
@@ -170,6 +177,7 @@ export type IEditorProps = {
   onEnterKeyPress?: (e?: any) => void;
   onTransaction?: () => void;
   placeholder?: string | ((isFocused: boolean, value: string) => string);
+  showPlaceholderOnEmpty?: boolean;
   tabIndex?: number;
   value?: string | null;
   extendedEditorProps: IEditorPropsExtended;
diff --git a/packages/editor/src/core/types/embed.ts b/packages/editor/src/core/types/embed.ts
index 3acd662be..96ff8cf10 100644
--- a/packages/editor/src/core/types/embed.ts
+++ b/packages/editor/src/core/types/embed.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export type TEmbedItem = {
   id: string;
   title: string;
diff --git a/packages/editor/src/core/types/extensions.ts b/packages/editor/src/core/types/extensions.ts
index 8c1c0a480..2670b6c03 100644
--- a/packages/editor/src/core/types/extensions.ts
+++ b/packages/editor/src/core/types/extensions.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export type TExtensions = "ai" | "collaboration-cursor" | "issue-embed" | "slash-commands" | "enter-key" | "image";
diff --git a/packages/editor/src/core/types/hook.ts b/packages/editor/src/core/types/hook.ts
index 823f66728..b586d0f9f 100644
--- a/packages/editor/src/core/types/hook.ts
+++ b/packages/editor/src/core/types/hook.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { HocuspocusProvider } from "@hocuspocus/provider";
 import type { Content } from "@tiptap/core";
 // local imports
@@ -29,6 +35,7 @@ export type TEditorHookProps = TCoreHookProps &
     | "onChange"
     | "onTransaction"
     | "placeholder"
+    | "showPlaceholderOnEmpty"
     | "tabIndex"
     | "value"
   > & {
@@ -50,6 +57,7 @@ export type TCollaborativeEditorHookProps = TCoreHookProps &
     | "onChange"
     | "onTransaction"
     | "placeholder"
+    | "showPlaceholderOnEmpty"
     | "tabIndex"
   > &
   Pick<
diff --git a/packages/editor/src/core/types/index.ts b/packages/editor/src/core/types/index.ts
index d3a12bfb5..7ba7f104d 100644
--- a/packages/editor/src/core/types/index.ts
+++ b/packages/editor/src/core/types/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./ai";
 export * from "./asset";
 export * from "./collaboration";
diff --git a/packages/editor/src/core/types/mention.ts b/packages/editor/src/core/types/mention.ts
index 4fed4aad8..6481b1659 100644
--- a/packages/editor/src/core/types/mention.ts
+++ b/packages/editor/src/core/types/mention.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // plane types
 import type { TSearchEntities } from "@plane/types";
 
diff --git a/packages/editor/src/core/types/slash-commands-suggestion.ts b/packages/editor/src/core/types/slash-commands-suggestion.ts
index a8690c90f..d0b456287 100644
--- a/packages/editor/src/core/types/slash-commands-suggestion.ts
+++ b/packages/editor/src/core/types/slash-commands-suggestion.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { Editor, Range } from "@tiptap/core";
 import type { CSSProperties } from "react";
 import type { TEditorCommands } from "@/types";
diff --git a/packages/editor/src/ee/extensions/index.ts b/packages/editor/src/ee/extensions/index.ts
index 1c59af5c6..31184b341 100644
--- a/packages/editor/src/ee/extensions/index.ts
+++ b/packages/editor/src/ee/extensions/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "src/ce/extensions";
diff --git a/packages/editor/src/ee/types/index.ts b/packages/editor/src/ee/types/index.ts
index 00cebc05e..2d08dc4be 100644
--- a/packages/editor/src/ee/types/index.ts
+++ b/packages/editor/src/ee/types/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "src/ce/types";
diff --git a/packages/editor/src/index.ts b/packages/editor/src/index.ts
index 3cf3b6fce..fd52c83f5 100644
--- a/packages/editor/src/index.ts
+++ b/packages/editor/src/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // editors
 export {
   CollaborativeDocumentEditorWithRef,
diff --git a/packages/editor/src/lib.ts b/packages/editor/src/lib.ts
index 44388a00e..3acece260 100644
--- a/packages/editor/src/lib.ts
+++ b/packages/editor/src/lib.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "@/extensions/core-without-props";
 export * from "@/constants/document-collaborative-events";
 export * from "@/helpers/get-document-server-event";
diff --git a/packages/editor/src/styles/drag-drop.css b/packages/editor/src/styles/drag-drop.css
index 7b9577cc4..7ccb76163 100644
--- a/packages/editor/src/styles/drag-drop.css
+++ b/packages/editor/src/styles/drag-drop.css
@@ -55,7 +55,7 @@
     left: calc(-1 * var(--horizontal-offset));
     height: 100%;
     width: calc(100% + (var(--horizontal-offset) * 2));
-    background-color: rgba(var(--color-primary-100), 0.2);
+    background-color: --alpha(var(--background-color-accent-primary) / 20%);
     border-radius: 4px;
     pointer-events: none;
   }
@@ -66,7 +66,7 @@
     --horizontal-offset: 0px;
 
     &::after {
-      background-color: rgba(var(--color-background-100), 0.2);
+      background-color: --alpha(var(--background-color-surface-1) / 20%);
     }
   }
 }
diff --git a/packages/editor/src/styles/editor.css b/packages/editor/src/styles/editor.css
index ef5bca263..a842193d1 100644
--- a/packages/editor/src/styles/editor.css
+++ b/packages/editor/src/styles/editor.css
@@ -48,7 +48,7 @@
 .ProseMirror blockquote {
   font-style: normal;
   font-weight: 400;
-  border-left: 3px solid rgb(var(--color-border-300));
+  @apply border-l-[3px] border-strong;
 }
 
 .ProseMirror blockquote p::before,
@@ -76,7 +76,7 @@
     }
 
     &.ProseMirror-selectednode {
-      outline: 3px solid rgba(var(--color-primary-100));
+      outline: 3px solid var(--border-color-accent-strong);
       filter: brightness(90%);
     }
   }
@@ -84,7 +84,7 @@
 
 /* Custom gap cursor styles  */
 .ProseMirror-gapcursor::after {
-  border-top: 1px solid rgb(var(--color-text-100)) !important;
+  @apply border-t! border-strong!;
 }
 
 /* to-do list */
@@ -105,14 +105,14 @@ ul[data-type="taskList"] li > div {
 }
 
 ul[data-type="taskList"] li > label input[type="checkbox"] {
-  border: 1px solid rgba(var(--color-text-100), 0.2) !important;
+  @apply border! border-strong!;
   outline: none;
   border-radius: 2px;
   transform: scale(1.05);
 }
 
 .ProseMirror[contenteditable="true"] input[type="checkbox"]:hover {
-  background-color: rgba(var(--color-text-100), 0.1);
+  background-color: color-mix(in srgb, var(--text-color-primary) 10%, transparent);
 }
 
 .ProseMirror[contenteditable="false"] input[type="checkbox"] {
@@ -120,14 +120,14 @@ ul[data-type="taskList"] li > label input[type="checkbox"] {
 }
 
 ul[data-type="taskList"] li > label input[type="checkbox"]:checked {
-  background-color: rgba(var(--color-primary-100)) !important;
-  border-color: rgba(var(--color-primary-100)) !important;
+  background-color: var(--background-color-accent-primary) !important;
+  border-color: var(--border-color-accent-strong) !important;
   color: white !important;
 }
 
 ul[data-type="taskList"] li > label input[type="checkbox"]:checked:hover {
-  background-color: rgba(var(--color-primary-300)) !important;
-  border-color: rgba(var(--color-primary-300)) !important;
+  background-color: var(--background-color-accent-primary-hover) !important;
+  border-color: var(--border-color-accent-strong) !important;
 }
 
 @media screen and (max-width: 768px) {
@@ -151,12 +151,12 @@ ul[data-type="taskList"] li > label input[type="checkbox"] {
   width: 0.8rem;
   height: 0.8rem;
   position: relative;
-  border: 1.5px solid rgb(var(--color-text-100));
+  @apply border-md border-subtle-1;
   margin-right: 0.2rem;
   margin-top: 0.15rem;
 
   &:active {
-    background-color: rgb(var(--color-background-90));
+    background-color: var(--background-color-layer-1);
   }
 
   /* check sign */
@@ -257,7 +257,7 @@ div[data-type="horizontalRule"] {
   margin-bottom: 0;
 
   & > div {
-    border-bottom: 2px solid rgb(var(--color-border-200));
+    @apply border-b-lg border-subtle-1;
   }
 }
 
diff --git a/packages/editor/src/styles/table.css b/packages/editor/src/styles/table.css
index ef9534866..5066204d4 100644
--- a/packages/editor/src/styles/table.css
+++ b/packages/editor/src/styles/table.css
@@ -3,17 +3,16 @@
   padding-bottom: 26px;
 
   table {
-    position: relative;
     border-collapse: collapse;
     table-layout: fixed;
     margin: 0.5rem 0 0 0;
-    border: 1px solid rgba(var(--color-border-200));
+    @apply relative border border-subtle;
     width: 100%;
 
     td,
     th {
       min-width: 1em;
-      border: 1px solid rgba(var(--color-border-300));
+      @apply border border-strong;
       padding: 7px 10px;
       vertical-align: top;
       box-sizing: border-box;
@@ -38,19 +37,19 @@
         }
 
         &.selectedCell-border-top::after {
-          border-top: 2px solid rgba(var(--color-primary-100));
+          border-top: 2px solid var(--border-color-accent-strong);
         }
 
         &.selectedCell-border-left::after {
-          border-left: 2px solid rgba(var(--color-primary-100));
+          border-left: 2px solid var(--border-color-accent-strong);
         }
 
         &.selectedCell-border-bottom::after {
-          border-bottom: 2px solid rgba(var(--color-primary-100));
+          border-bottom: 2px solid var(--border-color-accent-strong);
         }
 
         &.selectedCell-border-right::after {
-          border-right: 2px solid rgba(var(--color-primary-100));
+          border-right: 2px solid var(--border-color-accent-strong);
         }
       }
       /* End selected cell outline */
@@ -81,34 +80,31 @@
     }
 
     th {
-      font-weight: 500;
-      text-align: left;
+      @apply font-medium text-left;
     }
 
     tr[background="none"],
     tr:not([background]) {
       th {
-        background-color: rgba(var(--color-background-90));
+        @apply bg-layer-3;
       }
     }
 
     .table-drop-marker {
-      background-color: rgba(var(--color-primary-100));
-      position: absolute;
-      z-index: 10;
+      background-color: var(--border-color-accent-strong);
+      @apply absolute z-10;
 
       &.hidden {
-        display: none;
+        @apply hidden;
       }
     }
 
     .table-col-drag-marker,
     .table-row-drag-marker {
-      position: absolute;
-      z-index: 10;
+      @apply absolute z-10;
 
       &.hidden {
-        display: none;
+        @apply hidden;
       }
     }
 
@@ -124,7 +120,7 @@
   /* Selected status */
   &.ProseMirror-selectednode {
     table {
-      background-color: rgba(var(--color-primary-100), 0.2);
+      background-color: color-mix(in srgb, var(--background-color-accent-primary) 20%, transparent);
     }
   }
   /* End selected status */
@@ -138,7 +134,7 @@
   width: 2px;
   height: calc(100% + 2px);
   z-index: 5;
-  background-color: rgba(var(--color-primary-100));
+  background-color: var(--border-color-accent-strong);
   pointer-events: none;
 }
 /* End column resizer */
@@ -156,28 +152,27 @@
   .table-column-insert-button,
   .table-row-insert-button {
     position: absolute;
-    background-color: rgba(var(--color-background-90));
-    color: rgba(var(--color-text-300));
-    border: 1px solid rgba(var(--color-border-200));
+    background-color: var(--background-color-layer-1);
+    @apply text-tertiary border border-subtle-1;
     border-radius: 4px;
     display: grid;
     place-items: center;
     opacity: 0;
     pointer-events: none;
     outline: none;
-    z-index: 10;
+    z-index: 9;
     transition: all 0.2s ease;
 
     &:hover {
-      background-color: rgba(var(--color-background-80));
-      color: rgba(var(--color-text-100));
+      background-color: var(--background-color-layer-1-hover);
+      @apply text-primary;
     }
 
     &.dragging {
       opacity: 1;
       pointer-events: auto;
-      background-color: rgba(var(--color-primary-100), 0.2);
-      color: rgba(var(--color-text-100));
+      background-color: color-mix(in srgb, var(--background-color-accent-primary) 20%, transparent);
+      @apply text-primary;
     }
 
     svg {
diff --git a/packages/editor/src/styles/tailwind.css b/packages/editor/src/styles/tailwind.css
deleted file mode 100644
index b5c61c956..000000000
--- a/packages/editor/src/styles/tailwind.css
+++ /dev/null
@@ -1,3 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
diff --git a/packages/editor/src/styles/variables.css b/packages/editor/src/styles/variables.css
index c7726ce2d..c58361d70 100644
--- a/packages/editor/src/styles/variables.css
+++ b/packages/editor/src/styles/variables.css
@@ -43,7 +43,7 @@
 
 /* font size and style */
 .editor-container {
-  --color-placeholder: rgba(var(--color-text-100), 0.5);
+  --color-placeholder: --alpha(var(--text-color-primary) / 50%);
 
   /* font sizes and line heights */
   &.large-font {
@@ -113,10 +113,10 @@
   /* end font sizes and line heights */
 
   /* font styles */
-  --font-style: "Inter", sans-serif;
+  --font-style: "Inter Variable", sans-serif;
 
   &.sans-serif {
-    --font-style: "Inter", sans-serif;
+    --font-style: "Inter Variable", sans-serif;
   }
   &.serif {
     --font-style: serif;
diff --git a/packages/editor/tailwind.config.js b/packages/editor/tailwind.config.js
deleted file mode 100644
index 4e0b7684e..000000000
--- a/packages/editor/tailwind.config.js
+++ /dev/null
@@ -1,6 +0,0 @@
-import sharedConfig from "@plane/tailwind-config/tailwind.config.js";
-
-export default {
-  // prefix ui lib classes to avoid conflicting with the app
-  ...sharedConfig,
-};
diff --git a/packages/eslint-config/.prettierignore b/packages/eslint-config/.prettierignore
deleted file mode 100644
index d78f7215a..000000000
--- a/packages/eslint-config/.prettierignore
+++ /dev/null
@@ -1,10 +0,0 @@
-.next/
-.react-router/
-.turbo/
-.vite/
-build/
-dist/
-node_modules/
-out/
-pnpm-lock.yaml
-storybook-static/
\ No newline at end of file
diff --git a/packages/hooks/package.json b/packages/hooks/package.json
index 5a706120b..2a6076951 100644
--- a/packages/hooks/package.json
+++ b/packages/hooks/package.json
@@ -1,25 +1,25 @@
 {
   "name": "@plane/hooks",
-  "version": "1.2.3",
-  "license": "AGPL-3.0",
-  "description": "React hooks that are shared across multiple apps internally",
+  "version": "1.3.0",
   "private": true,
+  "description": "React hooks that are shared across multiple apps internally",
+  "license": "AGPL-3.0",
   "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js"
-    },
+    ".": "./dist/index.js",
     "./package.json": "./package.json"
   },
   "scripts": {
     "build": "tsdown",
-    "dev": "tsdown --watch",
-    "check:lint": "eslint . --max-warnings=60",
+    "dev": "tsdown --watch --no-clean",
+    "check:lint": "oxlint --max-warnings=4 .",
     "check:types": "tsc --noEmit",
-    "check:format": "prettier --check .",
-    "fix:lint": "eslint . --fix --max-warnings=60",
-    "fix:format": "prettier --write .",
+    "check:format": "oxfmt --check .",
+    "fix:lint": "oxlint --fix .",
+    "fix:format": "oxfmt .",
     "clean": "rm -rf .turbo && rm -rf .next && rm -rf node_modules && rm -rf dist"
   },
   "dependencies": {
@@ -31,8 +31,5 @@
     "@types/react": "catalog:",
     "tsdown": "catalog:",
     "typescript": "catalog:"
-  },
-  "main": "./dist/index.js",
-  "module": "./dist/index.js",
-  "types": "./dist/index.d.ts"
+  }
 }
diff --git a/packages/hooks/src/index.ts b/packages/hooks/src/index.ts
index a71e06bf5..032a058ed 100644
--- a/packages/hooks/src/index.ts
+++ b/packages/hooks/src/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./use-hash-scroll";
 export * from "./use-local-storage";
 export * from "./use-outside-click-detector";
diff --git a/packages/hooks/src/use-hash-scroll.ts b/packages/hooks/src/use-hash-scroll.ts
index 8265b86d9..c919ef9f8 100644
--- a/packages/hooks/src/use-hash-scroll.ts
+++ b/packages/hooks/src/use-hash-scroll.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useCallback, useEffect, useState } from "react";
 
 type TArgs = {
diff --git a/packages/hooks/src/use-local-storage.tsx b/packages/hooks/src/use-local-storage.tsx
index cb59b6d9e..057e1cce9 100644
--- a/packages/hooks/src/use-local-storage.tsx
+++ b/packages/hooks/src/use-local-storage.tsx
@@ -1,7 +1,13 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useState, useEffect, useCallback } from "react";
 
 export const getValueFromLocalStorage = (key: string, defaultValue: any) => {
-  if (typeof window === undefined || typeof window === "undefined") return defaultValue;
+  if (typeof window === "undefined" || typeof window === "undefined") return defaultValue;
   try {
     const item = window.localStorage.getItem(key);
     return item ? JSON.parse(item) : defaultValue;
@@ -12,7 +18,7 @@ export const getValueFromLocalStorage = (key: string, defaultValue: any) => {
 };
 
 export const setValueIntoLocalStorage = (key: string, value: any) => {
-  if (typeof window === undefined || typeof window === "undefined") return false;
+  if (typeof window === "undefined" || typeof window === "undefined") return false;
   try {
     window.localStorage.setItem(key, JSON.stringify(value));
     return true;
diff --git a/packages/hooks/src/use-outside-click-detector.tsx b/packages/hooks/src/use-outside-click-detector.tsx
index a7c1b8d71..d084fd0dc 100644
--- a/packages/hooks/src/use-outside-click-detector.tsx
+++ b/packages/hooks/src/use-outside-click-detector.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type React from "react";
 import { useEffect } from "react";
 
diff --git a/packages/hooks/src/use-platform-os.tsx b/packages/hooks/src/use-platform-os.tsx
index 3f62e1499..dc78c7682 100644
--- a/packages/hooks/src/use-platform-os.tsx
+++ b/packages/hooks/src/use-platform-os.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useState, useEffect } from "react";
 
 export const usePlatformOS = () => {
diff --git a/packages/hooks/tsdown.config.ts b/packages/hooks/tsdown.config.ts
index 78c3dcba8..92959eaf7 100644
--- a/packages/hooks/tsdown.config.ts
+++ b/packages/hooks/tsdown.config.ts
@@ -5,4 +5,5 @@ export default defineConfig({
   format: ["esm"],
   dts: true,
   platform: "neutral",
+  exports: true,
 });
diff --git a/packages/i18n/package.json b/packages/i18n/package.json
index e11bdcd54..5fd80fca3 100644
--- a/packages/i18n/package.json
+++ b/packages/i18n/package.json
@@ -1,25 +1,25 @@
 {
   "name": "@plane/i18n",
-  "version": "1.2.3",
-  "license": "AGPL-3.0",
-  "description": "I18n shared across multiple apps internally",
+  "version": "1.3.0",
   "private": true,
+  "description": "I18n shared across multiple apps internally",
+  "license": "AGPL-3.0",
   "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js"
-    },
+    ".": "./dist/index.js",
     "./package.json": "./package.json"
   },
   "scripts": {
-    "dev": "tsdown --watch",
+    "dev": "tsdown --watch --no-clean",
     "build": "tsdown",
-    "check:lint": "eslint . --max-warnings=51",
+    "check:lint": "oxlint --max-warnings=2 .",
     "check:types": "tsc --noEmit",
-    "check:format": "prettier --check .",
-    "fix:lint": "eslint . --fix --max-warnings=51",
-    "fix:format": "prettier --write .",
+    "check:format": "oxfmt --check .",
+    "fix:lint": "oxlint --fix .",
+    "fix:format": "oxfmt .",
     "clean": "rm -rf .turbo && rm -rf .next && rm -rf node_modules && rm -rf dist"
   },
   "dependencies": {
@@ -37,8 +37,5 @@
     "@types/react": "catalog:",
     "tsdown": "catalog:",
     "typescript": "catalog:"
-  },
-  "main": "./dist/index.js",
-  "module": "./dist/index.js",
-  "types": "./dist/index.d.ts"
+  }
 }
diff --git a/packages/i18n/src/constants/index.ts b/packages/i18n/src/constants/index.ts
index 1f0daf2fc..94812657c 100644
--- a/packages/i18n/src/constants/index.ts
+++ b/packages/i18n/src/constants/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./language";
diff --git a/packages/i18n/src/constants/language.ts b/packages/i18n/src/constants/language.ts
index 906190256..787d14cb1 100644
--- a/packages/i18n/src/constants/language.ts
+++ b/packages/i18n/src/constants/language.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { TLanguage, ILanguageOption } from "../types";
 
 export const FALLBACK_LANGUAGE: TLanguage = "en";
diff --git a/packages/i18n/src/context/index.tsx b/packages/i18n/src/context/index.tsx
index 22ed0a5e0..1e4b7de06 100644
--- a/packages/i18n/src/context/index.tsx
+++ b/packages/i18n/src/context/index.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import React, { createContext } from "react";
 // store
diff --git a/packages/i18n/src/hooks/index.ts b/packages/i18n/src/hooks/index.ts
index fb4e297e2..4728e511a 100644
--- a/packages/i18n/src/hooks/index.ts
+++ b/packages/i18n/src/hooks/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./use-translation";
diff --git a/packages/i18n/src/hooks/use-translation.ts b/packages/i18n/src/hooks/use-translation.ts
index 329d91e2a..a40a4b333 100644
--- a/packages/i18n/src/hooks/use-translation.ts
+++ b/packages/i18n/src/hooks/use-translation.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useContext } from "react";
 // context
 import { TranslationContext } from "../context";
diff --git a/packages/i18n/src/index.ts b/packages/i18n/src/index.ts
index b2049544e..111d10a2e 100644
--- a/packages/i18n/src/index.ts
+++ b/packages/i18n/src/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./constants";
 export * from "./context";
 export * from "./hooks";
diff --git a/packages/i18n/src/locales/cs/accessibility.ts b/packages/i18n/src/locales/cs/accessibility.ts
index abc14f201..50e28caad 100644
--- a/packages/i18n/src/locales/cs/accessibility.ts
+++ b/packages/i18n/src/locales/cs/accessibility.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export default {
   aria_labels: {
     projects_sidebar: {
diff --git a/packages/i18n/src/locales/cs/editor.ts b/packages/i18n/src/locales/cs/editor.ts
index 927e1a9f2..f90361ce4 100644
--- a/packages/i18n/src/locales/cs/editor.ts
+++ b/packages/i18n/src/locales/cs/editor.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export default {} as const;
diff --git a/packages/i18n/src/locales/cs/empty-state.ts b/packages/i18n/src/locales/cs/empty-state.ts
index ccd545d7d..d28ed0bdc 100644
--- a/packages/i18n/src/locales/cs/empty-state.ts
+++ b/packages/i18n/src/locales/cs/empty-state.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export default {
   common_empty_state: {
     progress: {
diff --git a/packages/i18n/src/locales/cs/translations.ts b/packages/i18n/src/locales/cs/translations.ts
index f9cf54ae1..8a0aded99 100644
--- a/packages/i18n/src/locales/cs/translations.ts
+++ b/packages/i18n/src/locales/cs/translations.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export default {
   sidebar: {
     projects: "Projekty",
@@ -17,6 +23,7 @@ export default {
     favorites: "Oblíbené",
     pro: "Pro",
     upgrade: "Upgrade",
+    stickies: "Poznámky",
   },
   auth: {
     common: {
@@ -401,7 +408,7 @@ export default {
   docs: "Dokumentace",
   full_changelog: "Úplný změnový protokol",
   support: "Podpora",
-  discord: "Discord",
+  forum: "Forum",
   powered_by_plane_pages: "Poháněno Plane Pages",
   please_select_at_least_one_invitation: "Vyberte alespoň jednu pozvánku.",
   please_select_at_least_one_invitation_description:
@@ -1578,6 +1585,7 @@ export default {
         name: "Název pracovního prostoru",
         company_size: "Velikost společnosti",
         url: "URL pracovního prostoru",
+        workspace_timezone: "Časové pásmo pracovního prostoru",
         update_workspace: "Aktualizovat prostor",
         delete_workspace: "Smazat tento prostor",
         delete_workspace_description: "Smazáním prostoru odstraníte všechna data a zdroje. Akce je nevratná.",
@@ -1965,6 +1973,44 @@ export default {
         primary_button: "Přidat systém odhadů",
       },
     },
+    features: {
+      cycles: {
+        title: "Cykly",
+        short_title: "Cykly",
+        description:
+          "Naplánujte práci v flexibilních obdobích, která se přizpůsobí jedinečnému rytmu a tempu tohoto projektu.",
+        toggle_title: "Povolit cykly",
+        toggle_description: "Naplánujte práci v soustředěných časových rámcích.",
+      },
+      modules: {
+        title: "Moduly",
+        short_title: "Moduly",
+        description: "Organizujte práci do dílčích projektů s vyhrazenými vedoucími a přiřazenými osobami.",
+        toggle_title: "Povolit moduly",
+        toggle_description: "Členové projektu budou moci vytvářet a upravovat moduly.",
+      },
+      views: {
+        title: "Zobrazení",
+        short_title: "Zobrazení",
+        description: "Uložte vlastní řazení, filtry a možnosti zobrazení nebo je sdílejte se svým týmem.",
+        toggle_title: "Povolit zobrazení",
+        toggle_description: "Členové projektu budou moci vytvářet a upravovat zobrazení.",
+      },
+      pages: {
+        title: "Stránky",
+        short_title: "Stránky",
+        description: "Vytvářejte a upravujte volný obsah: poznámky, dokumenty, cokoliv.",
+        toggle_title: "Povolit stránky",
+        toggle_description: "Členové projektu budou moci vytvářet a upravovat stránky.",
+      },
+      intake: {
+        title: "Příjem",
+        short_title: "Příjem",
+        description: "Umožněte nečlenům sdílet chyby, zpětnou vazbu a návrhy; bez narušení vašeho pracovního postupu.",
+        toggle_title: "Povolit příjem",
+        toggle_description: "Povolit členům projektu vytvářet žádosti o příjem v aplikaci.",
+      },
+    },
   },
   project_cycles: {
     add_cycle: "Přidat cyklus",
diff --git a/packages/i18n/src/locales/de/accessibility.ts b/packages/i18n/src/locales/de/accessibility.ts
index 3c596734b..243dc9554 100644
--- a/packages/i18n/src/locales/de/accessibility.ts
+++ b/packages/i18n/src/locales/de/accessibility.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export default {
   aria_labels: {
     projects_sidebar: {
diff --git a/packages/i18n/src/locales/de/editor.ts b/packages/i18n/src/locales/de/editor.ts
index 927e1a9f2..f90361ce4 100644
--- a/packages/i18n/src/locales/de/editor.ts
+++ b/packages/i18n/src/locales/de/editor.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export default {} as const;
diff --git a/packages/i18n/src/locales/de/empty-state.ts b/packages/i18n/src/locales/de/empty-state.ts
index 96c47c70d..02601f9dd 100644
--- a/packages/i18n/src/locales/de/empty-state.ts
+++ b/packages/i18n/src/locales/de/empty-state.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export default {
   common_empty_state: {
     progress: {
diff --git a/packages/i18n/src/locales/de/translations.ts b/packages/i18n/src/locales/de/translations.ts
index 74312d663..2d54b10b8 100644
--- a/packages/i18n/src/locales/de/translations.ts
+++ b/packages/i18n/src/locales/de/translations.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export default {
   sidebar: {
     projects: "Projekte",
@@ -17,6 +23,7 @@ export default {
     favorites: "Favoriten",
     pro: "Pro",
     upgrade: "Upgrade",
+    stickies: "Notizen",
   },
   auth: {
     common: {
@@ -412,7 +419,7 @@ export default {
   docs: "Dokumentation",
   full_changelog: "Vollständiges Änderungsprotokoll",
   support: "Support",
-  discord: "Discord",
+  forum: "Forum",
   powered_by_plane_pages: "Bereitgestellt von Plane Pages",
   please_select_at_least_one_invitation: "Bitte wählen Sie mindestens eine Einladung aus.",
   please_select_at_least_one_invitation_description:
@@ -1596,6 +1603,7 @@ export default {
         name: "Name des Arbeitsbereichs",
         company_size: "Unternehmensgröße",
         url: "URL des Arbeitsbereichs",
+        workspace_timezone: "Zeitzone des Arbeitsbereichs",
         update_workspace: "Arbeitsbereich aktualisieren",
         delete_workspace: "Diesen Arbeitsbereich löschen",
         delete_workspace_description:
@@ -1989,6 +1997,46 @@ export default {
         primary_button: "Schätzungssystem hinzufügen",
       },
     },
+    features: {
+      cycles: {
+        title: "Zyklen",
+        short_title: "Zyklen",
+        description:
+          "Planen Sie die Arbeit in flexiblen Zeiträumen, die sich dem einzigartigen Rhythmus und Tempo dieses Projekts anpassen.",
+        toggle_title: "Zyklen aktivieren",
+        toggle_description: "Planen Sie die Arbeit in fokussierten Zeiträumen.",
+      },
+      modules: {
+        title: "Module",
+        short_title: "Module",
+        description: "Organisieren Sie die Arbeit in Teilprojekte mit engagierten Leitern und Verantwortlichen.",
+        toggle_title: "Module aktivieren",
+        toggle_description: "Projektmitglieder können Module erstellen und bearbeiten.",
+      },
+      views: {
+        title: "Ansichten",
+        short_title: "Ansichten",
+        description:
+          "Speichern Sie benutzerdefinierte Sortierungen, Filter und Anzeigeoptionen oder teilen Sie sie mit Ihrem Team.",
+        toggle_title: "Ansichten aktivieren",
+        toggle_description: "Projektmitglieder können Ansichten erstellen und bearbeiten.",
+      },
+      pages: {
+        title: "Seiten",
+        short_title: "Seiten",
+        description: "Erstellen und bearbeiten Sie freie Inhalte: Notizen, Dokumente, alles.",
+        toggle_title: "Seiten aktivieren",
+        toggle_description: "Projektmitglieder können Seiten erstellen und bearbeiten.",
+      },
+      intake: {
+        title: "Aufnahme",
+        short_title: "Aufnahme",
+        description:
+          "Ermöglichen Sie Nicht-Mitgliedern, Fehler, Feedback und Vorschläge zu teilen, ohne Ihren Workflow zu unterbrechen.",
+        toggle_title: "Aufnahme aktivieren",
+        toggle_description: "Projektmitgliedern erlauben, In-App-Aufnahmeanfragen zu erstellen.",
+      },
+    },
   },
   project_cycles: {
     add_cycle: "Zyklus hinzufügen",
diff --git a/packages/i18n/src/locales/en/accessibility.ts b/packages/i18n/src/locales/en/accessibility.ts
index c9fa1b8ba..e9d56aa5c 100644
--- a/packages/i18n/src/locales/en/accessibility.ts
+++ b/packages/i18n/src/locales/en/accessibility.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export default {
   aria_labels: {
     projects_sidebar: {
diff --git a/packages/i18n/src/locales/en/core.ts b/packages/i18n/src/locales/en/core.ts
index 49b8f18a2..0e60e0680 100644
--- a/packages/i18n/src/locales/en/core.ts
+++ b/packages/i18n/src/locales/en/core.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export default {
   sidebar: {
     projects: "Projects",
@@ -17,6 +23,7 @@ export default {
     favorites: "Favorites",
     pro: "Pro",
     upgrade: "Upgrade",
+    stickies: "Stickies",
   },
 
   auth: {
diff --git a/packages/i18n/src/locales/en/editor.ts b/packages/i18n/src/locales/en/editor.ts
index 927e1a9f2..f90361ce4 100644
--- a/packages/i18n/src/locales/en/editor.ts
+++ b/packages/i18n/src/locales/en/editor.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export default {} as const;
diff --git a/packages/i18n/src/locales/en/empty-state.ts b/packages/i18n/src/locales/en/empty-state.ts
index ae9a06357..6848a1aa2 100644
--- a/packages/i18n/src/locales/en/empty-state.ts
+++ b/packages/i18n/src/locales/en/empty-state.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export default {
   common_empty_state: {
     progress: {
diff --git a/packages/i18n/src/locales/en/translations.ts b/packages/i18n/src/locales/en/translations.ts
index 016de5071..9f3eff04d 100644
--- a/packages/i18n/src/locales/en/translations.ts
+++ b/packages/i18n/src/locales/en/translations.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export default {
   submit: "Submit",
   cancel: "Cancel",
@@ -236,7 +242,7 @@ export default {
   docs: "Docs",
   full_changelog: "Full changelog",
   support: "Support",
-  discord: "Discord",
+  forum: "Forum",
   powered_by_plane_pages: "Powered by Plane Pages",
   please_select_at_least_one_invitation: "Please select at least one invitation.",
   please_select_at_least_one_invitation_description: "Please select at least one invitation to join the workspace.",
@@ -840,7 +846,7 @@ export default {
         label: "Remove parent work item",
       },
     },
-    new: "New Work item",
+    new: "New work item",
     adding: "Adding work item",
     create: {
       success: "Work item created successfully",
@@ -980,7 +986,7 @@ export default {
     delete: "Delete attachment",
   },
   label: {
-    select: "Select label",
+    select: "Add labels",
     create: {
       success: "Label created successfully",
       failed: "Label creation failed",
@@ -1236,7 +1242,7 @@ export default {
           comic: {
             title: "Analytics works best with Cycles + Modules",
             description:
-              "First, timebox your issues into Cycles and, if you can, group issues that span more than a cycle into Modules. Check out both on the left nav.",
+              "First, timebox your work items into Cycles and, if you can, group work items that span more than a cycle into Modules. Check out both on the left nav.",
           },
         },
       },
@@ -1431,6 +1437,7 @@ export default {
         name: "Workspace name",
         company_size: "Company size",
         url: "Workspace URL",
+        workspace_timezone: "Workspace Timezone",
         update_workspace: "Update workspace",
         delete_workspace: "Delete this workspace",
         delete_workspace_description:
@@ -1842,6 +1849,43 @@ export default {
         primary_button: "Add estimate system",
       },
     },
+    features: {
+      cycles: {
+        title: "Cycles",
+        short_title: "Cycles",
+        description: "Schedule work in flexible periods that adapt to this project's unique rhythm and pace.",
+        toggle_title: "Enable cycles",
+        toggle_description: "Plan work in focused timeframes.",
+      },
+      modules: {
+        title: "Modules",
+        short_title: "Modules",
+        description: "Organize work into sub-projects with dedicated leads and assignees.",
+        toggle_title: "Enable modules",
+        toggle_description: "Project members will be able to create and edit modules.",
+      },
+      views: {
+        title: "Views",
+        short_title: "Views",
+        description: "Save custom sorts, filters, and display options or share them with your team.",
+        toggle_title: "Enable views",
+        toggle_description: "Project members will be able to create and edit views.",
+      },
+      pages: {
+        title: "Pages",
+        short_title: "Pages",
+        description: "Create and edit free-form content; notes, docs, anything.",
+        toggle_title: "Enable pages",
+        toggle_description: "Project members will be able to create and edit pages.",
+      },
+      intake: {
+        title: "Intake",
+        short_title: "Intake",
+        description: "Let non-members share bugs, feedback, and suggestions; without disrupting your workflow.",
+        toggle_title: "Enable intake",
+        toggle_description: "Let project members create in app intake requests.",
+      },
+    },
   },
   project_cycles: {
     add_cycle: "Add cycle",
@@ -2626,6 +2670,7 @@ export default {
       copy_current_page_url: "Copy current page URL",
       copy_current_page_url_toast_success: "Current page URL copied to clipboard.",
       copy_current_page_url_toast_error: "Some error occurred while copying the current page URL to clipboard.",
+      focus_top_nav_search: "Focus search input",
     },
     preferences_actions: {
       update_theme: "Change interface theme",
@@ -2650,7 +2695,7 @@ export default {
     help_actions: {
       open_keyboard_shortcuts: "Open keyboard shortcuts",
       open_plane_documentation: "Open Plane documentation",
-      join_discord: "Join our Discord",
+      join_forum: "Join our Forum",
       report_bug: "Report a bug",
       chat_with_us: "Chat with us",
     },
@@ -2705,8 +2750,4 @@ export default {
   enter_number_of_projects: "Enter number of projects",
   pin: "Pin",
   unpin: "Unpin",
-  sidebar: {
-    stickies: "Stickies",
-    your_work: "Your work",
-  },
 } as const;
diff --git a/packages/i18n/src/locales/es/accessibility.ts b/packages/i18n/src/locales/es/accessibility.ts
index 83bb5d7d9..c43a0e6fc 100644
--- a/packages/i18n/src/locales/es/accessibility.ts
+++ b/packages/i18n/src/locales/es/accessibility.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export default {
   aria_labels: {
     projects_sidebar: {
diff --git a/packages/i18n/src/locales/es/editor.ts b/packages/i18n/src/locales/es/editor.ts
index 927e1a9f2..f90361ce4 100644
--- a/packages/i18n/src/locales/es/editor.ts
+++ b/packages/i18n/src/locales/es/editor.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export default {} as const;
diff --git a/packages/i18n/src/locales/es/empty-state.ts b/packages/i18n/src/locales/es/empty-state.ts
index 53ccdb8f2..92c9fba8a 100644
--- a/packages/i18n/src/locales/es/empty-state.ts
+++ b/packages/i18n/src/locales/es/empty-state.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export default {
   common_empty_state: {
     progress: {
diff --git a/packages/i18n/src/locales/es/translations.ts b/packages/i18n/src/locales/es/translations.ts
index 647d613ed..0d25038f1 100644
--- a/packages/i18n/src/locales/es/translations.ts
+++ b/packages/i18n/src/locales/es/translations.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export default {
   sidebar: {
     projects: "Proyectos",
@@ -17,6 +23,7 @@ export default {
     favorites: "Favoritos",
     pro: "Pro",
     upgrade: "Mejorar",
+    stickies: "Notas adhesivas",
   },
   auth: {
     common: {
@@ -412,7 +419,7 @@ export default {
   docs: "Documentación",
   full_changelog: "Registro de cambios completo",
   support: "Soporte",
-  discord: "Discord",
+  forum: "Forum",
   powered_by_plane_pages: "Desarrollado por Plane Pages",
   please_select_at_least_one_invitation: "Por favor selecciona al menos una invitación.",
   please_select_at_least_one_invitation_description:
@@ -1600,6 +1607,7 @@ export default {
         name: "Nombre del espacio de trabajo",
         company_size: "Tamaño de la empresa",
         url: "URL del espacio de trabajo",
+        workspace_timezone: "Zona horaria del espacio de trabajo",
         update_workspace: "Actualizar espacio de trabajo",
         delete_workspace: "Eliminar este espacio de trabajo",
         delete_workspace_description:
@@ -1998,6 +2006,46 @@ export default {
         primary_button: "Agregar sistema de estimación",
       },
     },
+    features: {
+      cycles: {
+        title: "Ciclos",
+        short_title: "Ciclos",
+        description:
+          "Programa el trabajo en períodos flexibles que se adaptan al ritmo y al tempo únicos de este proyecto.",
+        toggle_title: "Habilitar ciclos",
+        toggle_description: "Planifica el trabajo en períodos de tiempo enfocados.",
+      },
+      modules: {
+        title: "Módulos",
+        short_title: "Módulos",
+        description: "Organiza el trabajo en subproyectos con líderes y responsables dedicados.",
+        toggle_title: "Habilitar módulos",
+        toggle_description: "Los miembros del proyecto podrán crear y editar módulos.",
+      },
+      views: {
+        title: "Vistas",
+        short_title: "Vistas",
+        description:
+          "Guarda ordenaciones, filtros y opciones de visualización personalizadas o compártelos con tu equipo.",
+        toggle_title: "Habilitar vistas",
+        toggle_description: "Los miembros del proyecto podrán crear y editar vistas.",
+      },
+      pages: {
+        title: "Páginas",
+        short_title: "Páginas",
+        description: "Crea y edita contenido libre: notas, documentos, cualquier cosa.",
+        toggle_title: "Habilitar páginas",
+        toggle_description: "Los miembros del proyecto podrán crear y editar páginas.",
+      },
+      intake: {
+        title: "Recepción",
+        short_title: "Recepción",
+        description:
+          "Permite que los no miembros compartan errores, comentarios y sugerencias; sin interrumpir tu flujo de trabajo.",
+        toggle_title: "Habilitar recepción",
+        toggle_description: "Permitir a los miembros del proyecto crear solicitudes de recepción en la aplicación.",
+      },
+    },
   },
   project_cycles: {
     add_cycle: "Agregar ciclo",
diff --git a/packages/i18n/src/locales/fr/accessibility.ts b/packages/i18n/src/locales/fr/accessibility.ts
index 4dedb604e..b5f2ee88c 100644
--- a/packages/i18n/src/locales/fr/accessibility.ts
+++ b/packages/i18n/src/locales/fr/accessibility.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export default {
   aria_labels: {
     projects_sidebar: {
diff --git a/packages/i18n/src/locales/fr/editor.ts b/packages/i18n/src/locales/fr/editor.ts
index 927e1a9f2..f90361ce4 100644
--- a/packages/i18n/src/locales/fr/editor.ts
+++ b/packages/i18n/src/locales/fr/editor.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export default {} as const;
diff --git a/packages/i18n/src/locales/fr/empty-state.ts b/packages/i18n/src/locales/fr/empty-state.ts
index ca97443ef..58439868f 100644
--- a/packages/i18n/src/locales/fr/empty-state.ts
+++ b/packages/i18n/src/locales/fr/empty-state.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export default {
   common_empty_state: {
     progress: {
diff --git a/packages/i18n/src/locales/fr/translations.ts b/packages/i18n/src/locales/fr/translations.ts
index 4df21715d..38ef52835 100644
--- a/packages/i18n/src/locales/fr/translations.ts
+++ b/packages/i18n/src/locales/fr/translations.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export default {
   sidebar: {
     projects: "Projets",
@@ -17,6 +23,7 @@ export default {
     favorites: "Favoris",
     pro: "Pro",
     upgrade: "Mettre à niveau",
+    stickies: "Post-it",
   },
   auth: {
     common: {
@@ -408,7 +415,7 @@ export default {
   docs: "Documentation",
   full_changelog: "Journal des modifications complet",
   support: "Support",
-  discord: "Discord",
+  forum: "Forum",
   powered_by_plane_pages: "Propulsé par Plane Pages",
   please_select_at_least_one_invitation: "Veuillez sélectionner au moins une invitation.",
   please_select_at_least_one_invitation_description:
@@ -1598,6 +1605,7 @@ export default {
         name: "Nom de l’espace de travail",
         company_size: "Taille de l’entreprise",
         url: "URL de l’espace de travail",
+        workspace_timezone: "Fuseau horaire de l’espace de travail",
         update_workspace: "Mettre à jour l’espace de travail",
         delete_workspace: "Supprimer cet espace de travail",
         delete_workspace_description:
@@ -1996,6 +2004,46 @@ export default {
         primary_button: "Ajouter un système d’estimation",
       },
     },
+    features: {
+      cycles: {
+        title: "Cycles",
+        short_title: "Cycles",
+        description:
+          "Planifiez le travail dans des périodes flexibles qui s'adaptent au rythme et au tempo uniques de ce projet.",
+        toggle_title: "Activer les cycles",
+        toggle_description: "Planifiez le travail dans des périodes ciblées.",
+      },
+      modules: {
+        title: "Modules",
+        short_title: "Modules",
+        description: "Organisez le travail en sous-projets avec des chefs de projet et des responsables dédiés.",
+        toggle_title: "Activer les modules",
+        toggle_description: "Les membres du projet pourront créer et modifier des modules.",
+      },
+      views: {
+        title: "Vues",
+        short_title: "Vues",
+        description:
+          "Enregistrez des tris, des filtres et des options d'affichage personnalisés ou partagez-les avec votre équipe.",
+        toggle_title: "Activer les vues",
+        toggle_description: "Les membres du projet pourront créer et modifier des vues.",
+      },
+      pages: {
+        title: "Pages",
+        short_title: "Pages",
+        description: "Créez et modifiez du contenu libre : notes, documents, n'importe quoi.",
+        toggle_title: "Activer les pages",
+        toggle_description: "Les membres du projet pourront créer et modifier des pages.",
+      },
+      intake: {
+        title: "Réception",
+        short_title: "Réception",
+        description:
+          "Permettez aux non-membres de partager des bugs, des commentaires et des suggestions ; sans perturber votre flux de travail.",
+        toggle_title: "Activer la réception",
+        toggle_description: "Permettre aux membres du projet de créer des demandes de réception dans l'application.",
+      },
+    },
   },
   project_cycles: {
     add_cycle: "Ajouter un cycle",
diff --git a/packages/i18n/src/locales/id/accessibility.ts b/packages/i18n/src/locales/id/accessibility.ts
index 2e9c800a7..e871f4a00 100644
--- a/packages/i18n/src/locales/id/accessibility.ts
+++ b/packages/i18n/src/locales/id/accessibility.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export default {
   aria_labels: {
     projects_sidebar: {
diff --git a/packages/i18n/src/locales/id/editor.ts b/packages/i18n/src/locales/id/editor.ts
index 927e1a9f2..f90361ce4 100644
--- a/packages/i18n/src/locales/id/editor.ts
+++ b/packages/i18n/src/locales/id/editor.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export default {} as const;
diff --git a/packages/i18n/src/locales/id/empty-state.ts b/packages/i18n/src/locales/id/empty-state.ts
index 4cdd36c99..2ac96a88b 100644
--- a/packages/i18n/src/locales/id/empty-state.ts
+++ b/packages/i18n/src/locales/id/empty-state.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export default {
   common_empty_state: {
     progress: {
diff --git a/packages/i18n/src/locales/id/translations.ts b/packages/i18n/src/locales/id/translations.ts
index 16296fa03..dfe4e198d 100644
--- a/packages/i18n/src/locales/id/translations.ts
+++ b/packages/i18n/src/locales/id/translations.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export default {
   sidebar: {
     projects: "Projek",
@@ -17,6 +23,7 @@ export default {
     favorites: "Favorit",
     pro: "Pro",
     upgrade: "Upgrade",
+    stickies: "Catatan tempel",
   },
   auth: {
     common: {
@@ -404,7 +411,7 @@ export default {
   docs: "Dokumen",
   full_changelog: "Changelog lengkap",
   support: "Dukungan",
-  discord: "Discord",
+  forum: "Forum",
   powered_by_plane_pages: "Ditenagai oleh Plane Pages",
   please_select_at_least_one_invitation: "Silakan pilih setidaknya satu undangan.",
   please_select_at_least_one_invitation_description:
@@ -1586,6 +1593,7 @@ export default {
         name: "Nama ruang kerja",
         company_size: "Ukuran perusahaan",
         url: "URL ruang kerja",
+        workspace_timezone: "Zona waktu ruang kerja",
         update_workspace: "Perbarui ruang kerja",
         delete_workspace: "Hapus ruang kerja ini",
         delete_workspace_description:
@@ -1981,6 +1989,44 @@ export default {
         primary_button: "Tambah sistem perkiraan",
       },
     },
+    features: {
+      cycles: {
+        title: "Siklus",
+        short_title: "Siklus",
+        description:
+          "Jadwalkan pekerjaan dalam periode fleksibel yang menyesuaikan dengan ritme dan tempo unik proyek ini.",
+        toggle_title: "Aktifkan siklus",
+        toggle_description: "Rencanakan pekerjaan dalam jangka waktu yang terfokus.",
+      },
+      modules: {
+        title: "Modul",
+        short_title: "Modul",
+        description: "Atur pekerjaan menjadi sub-proyek dengan pemimpin dan penerima tugas khusus.",
+        toggle_title: "Aktifkan modul",
+        toggle_description: "Anggota proyek akan dapat membuat dan mengedit modul.",
+      },
+      views: {
+        title: "Tampilan",
+        short_title: "Tampilan",
+        description: "Simpan pengurutan, filter, dan opsi tampilan kustom atau bagikan dengan tim Anda.",
+        toggle_title: "Aktifkan tampilan",
+        toggle_description: "Anggota proyek akan dapat membuat dan mengedit tampilan.",
+      },
+      pages: {
+        title: "Halaman",
+        short_title: "Halaman",
+        description: "Buat dan edit konten bebas: catatan, dokumen, apa saja.",
+        toggle_title: "Aktifkan halaman",
+        toggle_description: "Anggota proyek akan dapat membuat dan mengedit halaman.",
+      },
+      intake: {
+        title: "Penerimaan",
+        short_title: "Penerimaan",
+        description: "Biarkan non-anggota berbagi bug, umpan balik, dan saran; tanpa mengganggu alur kerja Anda.",
+        toggle_title: "Aktifkan penerimaan",
+        toggle_description: "Izinkan anggota proyek membuat permintaan penerimaan dalam aplikasi.",
+      },
+    },
   },
   project_cycles: {
     add_cycle: "Tambah siklus",
diff --git a/packages/i18n/src/locales/index.ts b/packages/i18n/src/locales/index.ts
index 6bd62cf41..086a42eff 100644
--- a/packages/i18n/src/locales/index.ts
+++ b/packages/i18n/src/locales/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // Export all locale files to make them accessible from the package root
 export { default as enCore } from "./en/core";
 export { default as enTranslations } from "./en/translations";
diff --git a/packages/i18n/src/locales/it/accessibility.ts b/packages/i18n/src/locales/it/accessibility.ts
index 64e53c6af..d7b7e90c9 100644
--- a/packages/i18n/src/locales/it/accessibility.ts
+++ b/packages/i18n/src/locales/it/accessibility.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export default {
   aria_labels: {
     projects_sidebar: {
diff --git a/packages/i18n/src/locales/it/editor.ts b/packages/i18n/src/locales/it/editor.ts
index 927e1a9f2..f90361ce4 100644
--- a/packages/i18n/src/locales/it/editor.ts
+++ b/packages/i18n/src/locales/it/editor.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export default {} as const;
diff --git a/packages/i18n/src/locales/it/empty-state.ts b/packages/i18n/src/locales/it/empty-state.ts
index 0e5e458a9..e43388184 100644
--- a/packages/i18n/src/locales/it/empty-state.ts
+++ b/packages/i18n/src/locales/it/empty-state.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export default {
   common_empty_state: {
     progress: {
diff --git a/packages/i18n/src/locales/it/translations.ts b/packages/i18n/src/locales/it/translations.ts
index 8f7a25423..247a0edee 100644
--- a/packages/i18n/src/locales/it/translations.ts
+++ b/packages/i18n/src/locales/it/translations.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export default {
   sidebar: {
     projects: "Progetti",
@@ -17,6 +23,7 @@ export default {
     favorites: "Preferiti",
     pro: "Pro",
     upgrade: "Aggiorna",
+    stickies: "Stickies",
   },
   auth: {
     common: {
@@ -406,7 +413,7 @@ export default {
   docs: "Documentazione",
   full_changelog: "Changelog completo",
   support: "Supporto",
-  discord: "Discord",
+  forum: "Forum",
   powered_by_plane_pages: "Supportato da Plane Pages",
   please_select_at_least_one_invitation: "Seleziona almeno un invito.",
   please_select_at_least_one_invitation_description: "Seleziona almeno un invito per unirti allo spazio di lavoro.",
@@ -1590,6 +1597,7 @@ export default {
         name: "Nome dello spazio di lavoro",
         company_size: "Dimensione aziendale",
         url: "URL dello spazio di lavoro",
+        workspace_timezone: "Fuso orario dello spazio di lavoro",
         update_workspace: "Aggiorna spazio di lavoro",
         delete_workspace: "Elimina questo spazio di lavoro",
         delete_workspace_description:
@@ -1985,6 +1993,46 @@ export default {
         primary_button: "Aggiungi sistema di stime",
       },
     },
+    features: {
+      cycles: {
+        title: "Cicli",
+        short_title: "Cicli",
+        description:
+          "Pianifica il lavoro in periodi flessibili che si adattano al ritmo e al tempo unici di questo progetto.",
+        toggle_title: "Abilita cicli",
+        toggle_description: "Pianifica il lavoro in periodi di tempo mirati.",
+      },
+      modules: {
+        title: "Moduli",
+        short_title: "Moduli",
+        description: "Organizza il lavoro in sotto-progetti con responsabili e assegnatari dedicati.",
+        toggle_title: "Abilita moduli",
+        toggle_description: "I membri del progetto potranno creare e modificare moduli.",
+      },
+      views: {
+        title: "Viste",
+        short_title: "Viste",
+        description:
+          "Salva ordinamenti, filtri e opzioni di visualizzazione personalizzati o condividili con il tuo team.",
+        toggle_title: "Abilita viste",
+        toggle_description: "I membri del progetto potranno creare e modificare viste.",
+      },
+      pages: {
+        title: "Pagine",
+        short_title: "Pagine",
+        description: "Crea e modifica contenuti liberi: note, documenti, qualsiasi cosa.",
+        toggle_title: "Abilita pagine",
+        toggle_description: "I membri del progetto potranno creare e modificare pagine.",
+      },
+      intake: {
+        title: "Ricezione",
+        short_title: "Ricezione",
+        description:
+          "Consenti ai non membri di condividere bug, feedback e suggerimenti; senza interrompere il tuo flusso di lavoro.",
+        toggle_title: "Abilita ricezione",
+        toggle_description: "Consenti ai membri del progetto di creare richieste di ricezione nell'app.",
+      },
+    },
   },
   project_cycles: {
     add_cycle: "Aggiungi ciclo",
diff --git a/packages/i18n/src/locales/ja/accessibility.ts b/packages/i18n/src/locales/ja/accessibility.ts
index e96c2cf29..d9386758b 100644
--- a/packages/i18n/src/locales/ja/accessibility.ts
+++ b/packages/i18n/src/locales/ja/accessibility.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export default {
   aria_labels: {
     projects_sidebar: {
diff --git a/packages/i18n/src/locales/ja/editor.ts b/packages/i18n/src/locales/ja/editor.ts
index 927e1a9f2..f90361ce4 100644
--- a/packages/i18n/src/locales/ja/editor.ts
+++ b/packages/i18n/src/locales/ja/editor.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export default {} as const;
diff --git a/packages/i18n/src/locales/ja/empty-state.ts b/packages/i18n/src/locales/ja/empty-state.ts
index a5be665bc..c60317a8c 100644
--- a/packages/i18n/src/locales/ja/empty-state.ts
+++ b/packages/i18n/src/locales/ja/empty-state.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export default {
   common_empty_state: {
     progress: {
diff --git a/packages/i18n/src/locales/ja/translations.ts b/packages/i18n/src/locales/ja/translations.ts
index 237d1a412..513d5e132 100644
--- a/packages/i18n/src/locales/ja/translations.ts
+++ b/packages/i18n/src/locales/ja/translations.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export default {
   sidebar: {
     projects: "プロジェクト",
@@ -17,6 +23,7 @@ export default {
     favorites: "お気に入り",
     pro: "プロ",
     upgrade: "アップグレード",
+    stickies: "付箋",
   },
   auth: {
     common: {
@@ -401,7 +408,7 @@ export default {
   docs: "ドキュメント",
   full_changelog: "完全な変更履歴",
   support: "サポート",
-  discord: "Discord",
+  forum: "Forum",
   powered_by_plane_pages: "Powered by Plane Pages",
   please_select_at_least_one_invitation: "少なくとも1つの招待を選択してください。",
   please_select_at_least_one_invitation_description:
@@ -1577,6 +1584,7 @@ export default {
         name: "ワークスペース名",
         company_size: "会社の規模",
         url: "ワークスペースURL",
+        workspace_timezone: "ワークスペースのタイムゾーン",
         update_workspace: "ワークスペースを更新",
         delete_workspace: "このワークスペースを削除",
         delete_workspace_description:
@@ -1970,6 +1978,43 @@ export default {
         primary_button: "見積もりシステムを追加",
       },
     },
+    features: {
+      cycles: {
+        title: "サイクル",
+        short_title: "サイクル",
+        description: "このプロジェクト独自のリズムとペースに適応する柔軟な期間で作業をスケジュールします。",
+        toggle_title: "サイクルを有効にする",
+        toggle_description: "集中的な期間で作業を計画します。",
+      },
+      modules: {
+        title: "モジュール",
+        short_title: "モジュール",
+        description: "専任のリーダーと担当者を持つサブプロジェクトに作業を整理します。",
+        toggle_title: "モジュールを有効にする",
+        toggle_description: "プロジェクトメンバーはモジュールを作成および編集できるようになります。",
+      },
+      views: {
+        title: "ビュー",
+        short_title: "ビュー",
+        description: "カスタムソート、フィルター、表示オプションを保存したり、チームと共有したりします。",
+        toggle_title: "ビューを有効にする",
+        toggle_description: "プロジェクトメンバーはビューを作成および編集できるようになります。",
+      },
+      pages: {
+        title: "ページ",
+        short_title: "ページ",
+        description: "自由形式のコンテンツを作成および編集します：メモ、ドキュメント、何でも。",
+        toggle_title: "ページを有効にする",
+        toggle_description: "プロジェクトメンバーはページを作成および編集できるようになります。",
+      },
+      intake: {
+        title: "受付",
+        short_title: "受付",
+        description: "ワークフローを中断することなく、非メンバーがバグ、フィードバック、提案を共有できるようにします。",
+        toggle_title: "受付を有効にする",
+        toggle_description: "プロジェクトメンバーがアプリ内で受付リクエストを作成できるようにします。",
+      },
+    },
   },
   project_cycles: {
     add_cycle: "サイクルを追加",
diff --git a/packages/i18n/src/locales/ko/accessibility.ts b/packages/i18n/src/locales/ko/accessibility.ts
index 6c3ba882c..31249f0df 100644
--- a/packages/i18n/src/locales/ko/accessibility.ts
+++ b/packages/i18n/src/locales/ko/accessibility.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export default {
   aria_labels: {
     projects_sidebar: {
diff --git a/packages/i18n/src/locales/ko/editor.ts b/packages/i18n/src/locales/ko/editor.ts
index 927e1a9f2..f90361ce4 100644
--- a/packages/i18n/src/locales/ko/editor.ts
+++ b/packages/i18n/src/locales/ko/editor.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export default {} as const;
diff --git a/packages/i18n/src/locales/ko/empty-state.ts b/packages/i18n/src/locales/ko/empty-state.ts
index 80b62d1e0..ccb200883 100644
--- a/packages/i18n/src/locales/ko/empty-state.ts
+++ b/packages/i18n/src/locales/ko/empty-state.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export default {
   common_empty_state: {
     progress: {
diff --git a/packages/i18n/src/locales/ko/translations.ts b/packages/i18n/src/locales/ko/translations.ts
index 74a88d918..5f86903d6 100644
--- a/packages/i18n/src/locales/ko/translations.ts
+++ b/packages/i18n/src/locales/ko/translations.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export default {
   sidebar: {
     projects: "프로젝트",
@@ -17,6 +23,7 @@ export default {
     favorites: "즐겨찾기",
     pro: "프로",
     upgrade: "업그레이드",
+    stickies: "스티키",
   },
   auth: {
     common: {
@@ -396,7 +403,7 @@ export default {
   docs: "문서",
   full_changelog: "전체 변경 로그",
   support: "지원",
-  discord: "디스코드",
+  forum: "Forum",
   powered_by_plane_pages: "Plane Pages 제공",
   please_select_at_least_one_invitation: "최소 하나의 초대를 선택하세요.",
   please_select_at_least_one_invitation_description: "작업 공간에 참여하려면 최소 하나의 초대를 선택하세요.",
@@ -1570,6 +1577,7 @@ export default {
         name: "작업 공간 이름",
         company_size: "회사 규모",
         url: "작업 공간 URL",
+        workspace_timezone: "작업 공간 시간대",
         update_workspace: "작업 공간 업데이트",
         delete_workspace: "이 작업 공간 삭제",
         delete_workspace_description:
@@ -1963,6 +1971,43 @@ export default {
         primary_button: "추정 시스템 추가",
       },
     },
+    features: {
+      cycles: {
+        title: "사이클",
+        short_title: "사이클",
+        description: "이 프로젝트의 고유한 리듬과 속도에 적응하는 유연한 기간으로 작업을 예약합니다.",
+        toggle_title: "사이클 활성화",
+        toggle_description: "집중된 기간에 작업을 계획합니다.",
+      },
+      modules: {
+        title: "모듈",
+        short_title: "모듈",
+        description: "전담 리더와 담당자가 있는 하위 프로젝트로 작업을 구성합니다.",
+        toggle_title: "모듈 활성화",
+        toggle_description: "프로젝트 멤버가 모듈을 생성하고 편집할 수 있습니다.",
+      },
+      views: {
+        title: "보기",
+        short_title: "보기",
+        description: "사용자 정의 정렬, 필터 및 표시 옵션을 저장하거나 팀과 공유합니다.",
+        toggle_title: "보기 활성화",
+        toggle_description: "프로젝트 멤버가 보기를 생성하고 편집할 수 있습니다.",
+      },
+      pages: {
+        title: "페이지",
+        short_title: "페이지",
+        description: "자유 형식 콘텐츠를 생성하고 편집합니다: 메모, 문서, 무엇이든.",
+        toggle_title: "페이지 활성화",
+        toggle_description: "프로젝트 멤버가 페이지를 생성하고 편집할 수 있습니다.",
+      },
+      intake: {
+        title: "접수",
+        short_title: "접수",
+        description: "워크플로를 방해하지 않고 비회원이 버그, 피드백 및 제안을 공유할 수 있도록 합니다.",
+        toggle_title: "접수 활성화",
+        toggle_description: "프로젝트 멤버가 앱 내에서 접수 요청을 생성할 수 있도록 허용합니다.",
+      },
+    },
   },
   project_cycles: {
     add_cycle: "주기 추가",
diff --git a/packages/i18n/src/locales/pl/accessibility.ts b/packages/i18n/src/locales/pl/accessibility.ts
index 444b9539c..34532feff 100644
--- a/packages/i18n/src/locales/pl/accessibility.ts
+++ b/packages/i18n/src/locales/pl/accessibility.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export default {
   aria_labels: {
     projects_sidebar: {
diff --git a/packages/i18n/src/locales/pl/editor.ts b/packages/i18n/src/locales/pl/editor.ts
index 927e1a9f2..f90361ce4 100644
--- a/packages/i18n/src/locales/pl/editor.ts
+++ b/packages/i18n/src/locales/pl/editor.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export default {} as const;
diff --git a/packages/i18n/src/locales/pl/empty-state.ts b/packages/i18n/src/locales/pl/empty-state.ts
index 79951dedd..7a7e7383e 100644
--- a/packages/i18n/src/locales/pl/empty-state.ts
+++ b/packages/i18n/src/locales/pl/empty-state.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export default {
   common_empty_state: {
     progress: {
diff --git a/packages/i18n/src/locales/pl/translations.ts b/packages/i18n/src/locales/pl/translations.ts
index 5f2615013..fab1b96e8 100644
--- a/packages/i18n/src/locales/pl/translations.ts
+++ b/packages/i18n/src/locales/pl/translations.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export default {
   sidebar: {
     projects: "Projekty",
@@ -17,6 +23,7 @@ export default {
     favorites: "Ulubione",
     pro: "Pro",
     upgrade: "Uaktualnij",
+    stickies: "Notatki",
   },
   auth: {
     common: {
@@ -399,7 +406,7 @@ export default {
   docs: "Dokumentację",
   full_changelog: "Pełny dziennik zmian",
   support: "Wsparcie",
-  discord: "Discord",
+  forum: "Forum",
   powered_by_plane_pages: "Oparte na Plane Pages",
   please_select_at_least_one_invitation: "Wybierz co najmniej jedno zaproszenie.",
   please_select_at_least_one_invitation_description:
@@ -1581,6 +1588,7 @@ export default {
         name: "Nazwa przestrzeni roboczej",
         company_size: "Rozmiar firmy",
         url: "URL przestrzeni roboczej",
+        workspace_timezone: "Strefa czasowa przestrzeni roboczej",
         update_workspace: "Zaktualizuj przestrzeń",
         delete_workspace: "Usuń tę przestrzeń",
         delete_workspace_description:
@@ -1968,6 +1976,45 @@ export default {
         primary_button: "Dodaj system szacowania",
       },
     },
+    features: {
+      cycles: {
+        title: "Cykle",
+        short_title: "Cykle",
+        description:
+          "Planuj pracę w elastycznych okresach, które dostosowują się do unikalnego rytmu i tempa tego projektu.",
+        toggle_title: "Włącz cykle",
+        toggle_description: "Planuj pracę w skoncentrowanych ramach czasowych.",
+      },
+      modules: {
+        title: "Moduły",
+        short_title: "Moduły",
+        description: "Organizuj pracę w podprojekty z dedykowanymi liderami i przypisanymi osobami.",
+        toggle_title: "Włącz moduły",
+        toggle_description: "Członkowie projektu będą mogli tworzyć i edytować moduły.",
+      },
+      views: {
+        title: "Widoki",
+        short_title: "Widoki",
+        description: "Zapisuj niestandardowe sortowania, filtry i opcje wyświetlania lub udostępniaj je zespołowi.",
+        toggle_title: "Włącz widoki",
+        toggle_description: "Członkowie projektu będą mogli tworzyć i edytować widoki.",
+      },
+      pages: {
+        title: "Strony",
+        short_title: "Strony",
+        description: "Twórz i edytuj dowolne treści: notatki, dokumenty, cokolwiek.",
+        toggle_title: "Włącz strony",
+        toggle_description: "Członkowie projektu będą mogli tworzyć i edytować strony.",
+      },
+      intake: {
+        title: "Odbiór",
+        short_title: "Odbiór",
+        description:
+          "Pozwól osobom niebędącym członkami dzielić się błędami, opiniami i sugestiami; bez zakłócania przepływu pracy.",
+        toggle_title: "Włącz odbiór",
+        toggle_description: "Pozwól członkom projektu tworzyć żądania odbioru w aplikacji.",
+      },
+    },
   },
   project_cycles: {
     add_cycle: "Dodaj cykl",
diff --git a/packages/i18n/src/locales/pt-BR/accessibility.ts b/packages/i18n/src/locales/pt-BR/accessibility.ts
index 41238b8cc..066a6f305 100644
--- a/packages/i18n/src/locales/pt-BR/accessibility.ts
+++ b/packages/i18n/src/locales/pt-BR/accessibility.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export default {
   aria_labels: {
     projects_sidebar: {
diff --git a/packages/i18n/src/locales/pt-BR/editor.ts b/packages/i18n/src/locales/pt-BR/editor.ts
index 927e1a9f2..f90361ce4 100644
--- a/packages/i18n/src/locales/pt-BR/editor.ts
+++ b/packages/i18n/src/locales/pt-BR/editor.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export default {} as const;
diff --git a/packages/i18n/src/locales/pt-BR/empty-state.ts b/packages/i18n/src/locales/pt-BR/empty-state.ts
index 56712f10e..c34cc617d 100644
--- a/packages/i18n/src/locales/pt-BR/empty-state.ts
+++ b/packages/i18n/src/locales/pt-BR/empty-state.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export default {
   common_empty_state: {
     progress: {
diff --git a/packages/i18n/src/locales/pt-BR/translations.ts b/packages/i18n/src/locales/pt-BR/translations.ts
index 8c410276d..31b17890e 100644
--- a/packages/i18n/src/locales/pt-BR/translations.ts
+++ b/packages/i18n/src/locales/pt-BR/translations.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export default {
   sidebar: {
     projects: "Projetos",
@@ -17,6 +23,7 @@ export default {
     favorites: "Favoritos",
     pro: "Pro",
     upgrade: "Upgrade",
+    stickies: "Anotações",
   },
   auth: {
     common: {
@@ -408,7 +415,7 @@ export default {
   docs: "Documentos",
   full_changelog: "Changelog completo",
   support: "Suporte",
-  discord: "Discord",
+  forum: "Forum",
   powered_by_plane_pages: "Desenvolvido por Plane Pages",
   please_select_at_least_one_invitation: "Selecione pelo menos um convite.",
   please_select_at_least_one_invitation_description:
@@ -1598,6 +1605,7 @@ export default {
         name: "Nome do espaço de trabalho",
         company_size: "Tamanho da empresa",
         url: "URL do espaço de trabalho",
+        workspace_timezone: "Fuso horário do espaço de trabalho",
         update_workspace: "Atualizar espaço de trabalho",
         delete_workspace: "Excluir este espaço de trabalho",
         delete_workspace_description:
@@ -1994,6 +2002,44 @@ export default {
         primary_button: "Adicionar sistema de estimativa",
       },
     },
+    features: {
+      cycles: {
+        title: "Ciclos",
+        short_title: "Ciclos",
+        description: "Agende o trabalho em períodos flexíveis que se adaptam ao ritmo e ao tempo únicos deste projeto.",
+        toggle_title: "Ativar ciclos",
+        toggle_description: "Planeje o trabalho em períodos de tempo focados.",
+      },
+      modules: {
+        title: "Módulos",
+        short_title: "Módulos",
+        description: "Organize o trabalho em subprojetos com líderes e responsáveis dedicados.",
+        toggle_title: "Ativar módulos",
+        toggle_description: "Os membros do projeto poderão criar e editar módulos.",
+      },
+      views: {
+        title: "Visualizações",
+        short_title: "Visualizações",
+        description: "Salve ordenações, filtros e opções de exibição personalizadas ou compartilhe-as com sua equipe.",
+        toggle_title: "Ativar visualizações",
+        toggle_description: "Os membros do projeto poderão criar e editar visualizações.",
+      },
+      pages: {
+        title: "Páginas",
+        short_title: "Páginas",
+        description: "Crie e edite conteúdo livre: notas, documentos, qualquer coisa.",
+        toggle_title: "Ativar páginas",
+        toggle_description: "Os membros do projeto poderão criar e editar páginas.",
+      },
+      intake: {
+        title: "Recepção",
+        short_title: "Recepção",
+        description:
+          "Permita que não membros compartilhem bugs, feedback e sugestões; sem interromper seu fluxo de trabalho.",
+        toggle_title: "Ativar recepção",
+        toggle_description: "Permitir que membros do projeto criem solicitações de recepção no aplicativo.",
+      },
+    },
   },
   project_cycles: {
     add_cycle: "Adicionar ciclo",
diff --git a/packages/i18n/src/locales/ro/accessibility.ts b/packages/i18n/src/locales/ro/accessibility.ts
index 992467931..d5587bf74 100644
--- a/packages/i18n/src/locales/ro/accessibility.ts
+++ b/packages/i18n/src/locales/ro/accessibility.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export default {
   aria_labels: {
     projects_sidebar: {
diff --git a/packages/i18n/src/locales/ro/editor.ts b/packages/i18n/src/locales/ro/editor.ts
index 927e1a9f2..f90361ce4 100644
--- a/packages/i18n/src/locales/ro/editor.ts
+++ b/packages/i18n/src/locales/ro/editor.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export default {} as const;
diff --git a/packages/i18n/src/locales/ro/empty-state.ts b/packages/i18n/src/locales/ro/empty-state.ts
index 539c0e2ac..7627c4a8d 100644
--- a/packages/i18n/src/locales/ro/empty-state.ts
+++ b/packages/i18n/src/locales/ro/empty-state.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export default {
   common_empty_state: {
     progress: {
diff --git a/packages/i18n/src/locales/ro/translations.ts b/packages/i18n/src/locales/ro/translations.ts
index 4d7e21c15..be20aa144 100644
--- a/packages/i18n/src/locales/ro/translations.ts
+++ b/packages/i18n/src/locales/ro/translations.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export default {
   sidebar: {
     projects: "Proiecte",
@@ -17,6 +23,7 @@ export default {
     favorites: "Favorite",
     pro: "Pro",
     upgrade: "Treci la versiunea superioară",
+    stickies: "Notițe",
   },
   auth: {
     common: {
@@ -405,7 +412,7 @@ export default {
   docs: "Documentație",
   full_changelog: "Jurnal complet al modificărilor",
   support: "Suport",
-  discord: "Discord",
+  forum: "Forum",
   powered_by_plane_pages: "Oferit de Plane Documentație",
   please_select_at_least_one_invitation: "Te rugăm să selectezi cel puțin o invitație.",
   please_select_at_least_one_invitation_description:
@@ -1590,6 +1597,7 @@ export default {
         name: "Numele spațiului de lucru",
         company_size: "Dimensiunea companiei",
         url: "URL-ul spațiului de lucru",
+        workspace_timezone: "Fusul orar al spațiului de lucru",
         update_workspace: "Actualizează spațiul de lucru",
         delete_workspace: "Șterge acest spațiu de lucru",
         delete_workspace_description:
@@ -1986,6 +1994,45 @@ export default {
         primary_button: "Adaugă sistem de estimare",
       },
     },
+    features: {
+      cycles: {
+        title: "Cicluri",
+        short_title: "Cicluri",
+        description:
+          "Programați munca în perioade flexibile care se adaptează ritmului și ritmului unic al acestui proiect.",
+        toggle_title: "Activați ciclurile",
+        toggle_description: "Planificați munca în intervale de timp concentrate.",
+      },
+      modules: {
+        title: "Module",
+        short_title: "Module",
+        description: "Organizați munca în subproiecte cu lideri și responsabili dedicați.",
+        toggle_title: "Activați modulele",
+        toggle_description: "Membrii proiectului vor putea crea și edita module.",
+      },
+      views: {
+        title: "Vizualizări",
+        short_title: "Vizualizări",
+        description: "Salvați sortări personalizate, filtre și opțiuni de afișare sau partajați-le cu echipa dvs.",
+        toggle_title: "Activați vizualizările",
+        toggle_description: "Membrii proiectului vor putea crea și edita vizualizări.",
+      },
+      pages: {
+        title: "Pagini",
+        short_title: "Pagini",
+        description: "Creați și editați conținut liber: note, documente, orice.",
+        toggle_title: "Activați paginile",
+        toggle_description: "Membrii proiectului vor putea crea și edita pagini.",
+      },
+      intake: {
+        title: "Recepție",
+        short_title: "Recepție",
+        description:
+          "Permiteți non-membrilor să partajeze erori, feedback și sugestii; fără a perturba fluxul de lucru.",
+        toggle_title: "Activați recepția",
+        toggle_description: "Permiteți membrilor proiectului să creeze solicitări de recepție în aplicație.",
+      },
+    },
   },
   project_cycles: {
     add_cycle: "Adaugă ciclu",
diff --git a/packages/i18n/src/locales/ru/accessibility.ts b/packages/i18n/src/locales/ru/accessibility.ts
index 0156064e6..0690b125c 100644
--- a/packages/i18n/src/locales/ru/accessibility.ts
+++ b/packages/i18n/src/locales/ru/accessibility.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export default {
   aria_labels: {
     projects_sidebar: {
diff --git a/packages/i18n/src/locales/ru/editor.ts b/packages/i18n/src/locales/ru/editor.ts
index 927e1a9f2..f90361ce4 100644
--- a/packages/i18n/src/locales/ru/editor.ts
+++ b/packages/i18n/src/locales/ru/editor.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export default {} as const;
diff --git a/packages/i18n/src/locales/ru/empty-state.ts b/packages/i18n/src/locales/ru/empty-state.ts
index 52f1b0043..9645d419d 100644
--- a/packages/i18n/src/locales/ru/empty-state.ts
+++ b/packages/i18n/src/locales/ru/empty-state.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export default {
   common_empty_state: {
     progress: {
diff --git a/packages/i18n/src/locales/ru/translations.ts b/packages/i18n/src/locales/ru/translations.ts
index a9b7f6182..cbaa0081d 100644
--- a/packages/i18n/src/locales/ru/translations.ts
+++ b/packages/i18n/src/locales/ru/translations.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export default {
   sidebar: {
     projects: "Проекты",
@@ -17,6 +23,7 @@ export default {
     favorites: "Избранное",
     pro: "Pro",
     upgrade: "Обновить",
+    stickies: "Стикеры",
   },
   auth: {
     common: {
@@ -215,6 +222,8 @@ export default {
   security: "Безопасность",
   activity: "Активность",
   appearance: "Внешний вид",
+  preferences: "Настройки",
+  language_and_time: "Язык и время",
   notifications: "Уведомления",
   workspaces: "Рабочие пространства",
   create_workspace: "Создать рабочее пространство",
@@ -227,6 +236,10 @@ export default {
   something_went_wrong_please_try_again: "Что-то пошло не так. Пожалуйста, попробуйте еще раз.",
   load_more: "Загрузить еще",
   select_or_customize_your_interface_color_scheme: "Выберите или настройте цветовую схему интерфейса.",
+  timezone_setting: "Текущий часовой пояс.",
+  language_setting: "Выберите язык интерфейса.",
+  settings_moved_to_preferences: "Настройки часового пояса и языка перемещены в раздел предпочтений.",
+  go_to_preferences: "Перейти к предпочтениям",
   theme: "Тема",
   system_preference: "Системные настройки",
   light: "Светлая",
@@ -402,7 +415,7 @@ export default {
   docs: "Документация",
   full_changelog: "Полный журнал изменений",
   support: "Поддержка",
-  discord: "Discord",
+  forum: "Forum",
   powered_by_plane_pages: "Работает на Plane Pages",
   please_select_at_least_one_invitation: "Пожалуйста, выберите хотя бы одно приглашение.",
   please_select_at_least_one_invitation_description:
@@ -522,6 +535,9 @@ export default {
   new_password_must_be_different_from_old_password: "Новое пароль должен отличаться от старого пароля",
   edited: "Редактировано",
   bot: "Бот",
+  settings_description:
+    "Управляйте настройками аккаунта, рабочего пространства и проекта в одном месте. Переключайтесь между вкладками для настройки.",
+  back_to_workspace: "Вернуться в рабочее пространство",
   project_view: {
     sort_by: {
       created_at: "Дата создания",
@@ -816,6 +832,7 @@ export default {
       show_weekends: "Показывать выходные",
       enable: "Включить",
       disable: "Отключить",
+      copy_markdown: "Копировать markdown",
     },
     name: "Название",
     discard: "Отменить",
@@ -906,6 +923,7 @@ export default {
     paused: "На паузе",
     no_of: "Количество {entity}",
     resolved: "Решено",
+    overview: "Обзор",
   },
   chart: {
     x_axis: "Ось X",
@@ -1567,6 +1585,25 @@ export default {
         },
       },
     },
+    preferences: {
+      heading: "Предпочтения",
+      description: "Настройте приложение под свой стиль работы",
+    },
+    notifications: {
+      heading: "Email-уведомления",
+      description: "Будьте в курсе рабочих элементов, на которые вы подписаны. Включите уведомления.",
+    },
+    security: {
+      heading: "Безопасность",
+    },
+    api_tokens: {
+      heading: "Персональные токены доступа",
+      description: "Создавайте защищённые API-токены для интеграции данных с внешними системами и приложениями.",
+    },
+    activity: {
+      heading: "Активность",
+      description: "Отслеживайте последние действия и изменения во всех проектах и рабочих элементах.",
+    },
   },
   workspace_settings: {
     label: "Настройки пространства",
@@ -1583,6 +1620,7 @@ export default {
         name: "Название пространства",
         company_size: "Размер компании",
         url: "URL пространства",
+        workspace_timezone: "Часовой пояс рабочего пространства",
         update_workspace: "Обновить пространство",
         delete_workspace: "Удалить пространство",
         delete_workspace_description: "Все данные будут безвозвратно удалены.",
@@ -1635,14 +1673,20 @@ export default {
         },
       },
       billing_and_plans: {
+        heading: "Оплата и тарифы",
+        description: "Выберите тариф, управляйте подписками и легко обновляйте их по мере роста потребностей.",
         title: "Оплата и тарифы",
         current_plan: "Текущий тариф",
         free_plan: "Используется бесплатный тариф",
         view_plans: "Посмотреть тарифы",
       },
       exports: {
+        heading: "Экспорт",
+        description: "Экспортируйте данные проекта в различных форматах и просматривайте историю экспортов.",
         title: "Экспорт",
         exporting: "Экспортируется",
+        exporting_projects: "Экспорт проекта",
+        format: "Формат",
         previous_exports: "Предыдущие экспорты",
         export_separate_files: "Экспорт в отдельные файлы",
         filters_info: "Примените фильтры для экспорта конкретных рабочих элементов по вашим критериям.",
@@ -1661,6 +1705,8 @@ export default {
         },
       },
       webhooks: {
+        heading: "Вебхуки",
+        description: "Автоматизируйте уведомления во внешние сервисы при событиях проекта.",
         title: "Вебхуки",
         add_webhook: "Добавить вебхук",
         modal: {
@@ -1784,8 +1830,9 @@ export default {
       profile: "Профиль",
       security: "Безопасность",
       activity: "Активность",
-      appearance: "Внешний вид",
+      preferences: "Предпочтения",
       notifications: "Уведомления",
+      "api-tokens": "Персональные токены доступа",
     },
     tabs: {
       summary: "Сводка",
@@ -1849,6 +1896,8 @@ export default {
       },
     },
     states: {
+      heading: "Статусы",
+      description: "Определяйте и настраивайте статусы рабочего процесса для отслеживания прогресса рабочих элементов.",
       describe_this_state_for_your_members: "Опишите этот статус для участников",
       empty_state: {
         title: "Нет статусов для группы {groupKey}",
@@ -1856,6 +1905,8 @@ export default {
       },
     },
     labels: {
+      heading: "Метки",
+      description: "Создавайте пользовательские метки для категоризации и организации рабочих элементов.",
       label_title: "Название метки",
       label_title_is_required: "Название обязательно",
       label_max_char: "Максимальная длина названия - 255 символов",
@@ -1864,9 +1915,11 @@ export default {
       },
     },
     estimates: {
+      heading: "Оценки",
+      description: "Настройте системы оценок для отслеживания и коммуникации трудозатрат по каждому рабочему элементу.",
       label: "Оценки",
       title: "Включить оценки для моего проекта",
-      description: "Они помогают вам в общении о сложности и рабочей нагрузке команды.",
+      enable_description: "Они помогают вам в общении о сложности и рабочей нагрузке команды.",
       no_estimate: "Без оценки",
       new: "Новая система оценок",
       create: {
@@ -1949,6 +2002,8 @@ export default {
     },
     automations: {
       label: "Автоматизация",
+      heading: "Автоматизация",
+      description: "Настройте автоматические действия для оптимизации рабочего процесса и сокращения ручных задач.",
       "auto-archive": {
         title: "Автоархивация закрытых рабочих элементов",
         description: "Plane будет автоматически архивировать рабочие элементы, которые были завершены или отменены.",
@@ -1972,6 +2027,46 @@ export default {
         primary_button: "Добавить систему оценок",
       },
     },
+    features: {
+      cycles: {
+        title: "Циклы",
+        short_title: "Циклы",
+        description:
+          "Планируйте работу в гибких периодах, которые адаптируются к уникальному ритму и темпу этого проекта.",
+        toggle_title: "Включить циклы",
+        toggle_description: "Планируйте работу в целенаправленные периоды времени.",
+      },
+      modules: {
+        title: "Модули",
+        short_title: "Модули",
+        description: "Организуйте работу в подпроекты с выделенными руководителями и исполнителями.",
+        toggle_title: "Включить модули",
+        toggle_description: "Участники проекта смогут создавать и редактировать модули.",
+      },
+      views: {
+        title: "Представления",
+        short_title: "Представления",
+        description:
+          "Сохраняйте пользовательские сортировки, фильтры и параметры отображения или делитесь ими с командой.",
+        toggle_title: "Включить представления",
+        toggle_description: "Участники проекта смогут создавать и редактировать представления.",
+      },
+      pages: {
+        title: "Страницы",
+        short_title: "Страницы",
+        description: "Создавайте и редактируйте свободный контент: заметки, документы, что угодно.",
+        toggle_title: "Включить страницы",
+        toggle_description: "Участники проекта смогут создавать и редактировать страницы.",
+      },
+      intake: {
+        title: "Приём",
+        short_title: "Приём",
+        description:
+          "Позвольте не-участникам делиться ошибками, отзывами и предложениями; не нарушая ваш рабочий процесс.",
+        toggle_title: "Включить приём",
+        toggle_description: "Разрешить участникам проекта создавать запросы на приём в приложении.",
+      },
+    },
   },
   project_cycles: {
     add_cycle: "Добавить цикл",
@@ -2629,4 +2724,201 @@ export default {
     close_button: "Закрыть панель навигации",
     outline_floating_button: "Открыть структуру",
   },
+  project_members: {
+    full_name: "Полное имя",
+    display_name: "Отображаемое имя",
+    email: "Email",
+    joining_date: "Дата присоединения",
+    role: "Роль",
+  },
+  power_k: {
+    contextual_actions: {
+      work_item: {
+        title: "Действия с рабочим элементом",
+        indicator: "Рабочий элемент",
+        change_state: "Изменить статус",
+        change_priority: "Изменить приоритет",
+        change_assignees: "Назначить",
+        assign_to_me: "Назначить себе",
+        unassign_from_me: "Снять с себя",
+        change_estimate: "Изменить оценку",
+        add_to_cycle: "Добавить в цикл",
+        add_to_modules: "Добавить в модули",
+        add_labels: "Добавить метки",
+        subscribe: "Подписаться на уведомления",
+        unsubscribe: "Отписаться от уведомлений",
+        delete: "Удалить",
+        copy_id: "Копировать ID",
+        copy_id_toast_success: "ID рабочего элемента скопирован в буфер.",
+        copy_id_toast_error: "Ошибка при копировании ID рабочего элемента.",
+        copy_title: "Копировать название",
+        copy_title_toast_success: "Название рабочего элемента скопировано в буфер.",
+        copy_title_toast_error: "Ошибка при копировании названия рабочего элемента.",
+        copy_url: "Копировать URL",
+        copy_url_toast_success: "URL рабочего элемента скопирован в буфер.",
+        copy_url_toast_error: "Ошибка при копировании URL рабочего элемента.",
+      },
+      cycle: {
+        title: "Действия с циклом",
+        indicator: "Цикл",
+        add_to_favorites: "Добавить в избранное",
+        remove_from_favorites: "Удалить из избранного",
+        copy_url: "Копировать URL",
+        copy_url_toast_success: "URL цикла скопирован в буфер.",
+        copy_url_toast_error: "Ошибка при копировании URL цикла.",
+      },
+      module: {
+        title: "Действия с модулем",
+        indicator: "Модуль",
+        add_remove_members: "Добавить/удалить участников",
+        change_status: "Изменить статус",
+        add_to_favorites: "Добавить в избранное",
+        remove_from_favorites: "Удалить из избранного",
+        copy_url: "Копировать URL",
+        copy_url_toast_success: "URL модуля скопирован в буфер.",
+        copy_url_toast_error: "Ошибка при копировании URL модуля.",
+      },
+      page: {
+        title: "Действия со страницей",
+        indicator: "Страница",
+        lock: "Заблокировать",
+        unlock: "Разблокировать",
+        make_private: "Сделать приватной",
+        make_public: "Сделать публичной",
+        archive: "Архивировать",
+        restore: "Восстановить",
+        add_to_favorites: "Добавить в избранное",
+        remove_from_favorites: "Удалить из избранного",
+        copy_url: "Копировать URL",
+        copy_url_toast_success: "URL страницы скопирован в буфер.",
+        copy_url_toast_error: "Ошибка при копировании URL страницы.",
+      },
+    },
+    creation_actions: {
+      create_work_item: "Новый рабочий элемент",
+      create_page: "Новая страница",
+      create_view: "Новое представление",
+      create_cycle: "Новый цикл",
+      create_module: "Новый модуль",
+      create_project: "Новый проект",
+      create_workspace: "Новое рабочее пространство",
+    },
+    navigation_actions: {
+      open_workspace: "Открыть рабочее пространство",
+      nav_home: "Перейти на главную",
+      nav_inbox: "Перейти во входящие",
+      nav_your_work: "Перейти к вашей работе",
+      nav_account_settings: "Перейти к настройкам аккаунта",
+      open_project: "Открыть проект",
+      nav_projects_list: "Перейти к списку проектов",
+      nav_all_workspace_work_items: "Перейти ко всем рабочим элементам",
+      nav_assigned_workspace_work_items: "Перейти к назначенным рабочим элементам",
+      nav_created_workspace_work_items: "Перейти к созданным рабочим элементам",
+      nav_subscribed_workspace_work_items: "Перейти к отслеживаемым рабочим элементам",
+      nav_workspace_analytics: "Перейти к аналитике",
+      nav_workspace_drafts: "Перейти к черновикам",
+      nav_workspace_archives: "Перейти к архивам",
+      open_workspace_setting: "Открыть настройку рабочего пространства",
+      nav_workspace_settings: "Перейти к настройкам рабочего пространства",
+      nav_project_work_items: "Перейти к рабочим элементам",
+      open_project_cycle: "Открыть цикл",
+      nav_project_cycles: "Перейти к циклам",
+      open_project_module: "Открыть модуль",
+      nav_project_modules: "Перейти к модулям",
+      open_project_view: "Открыть представление проекта",
+      nav_project_views: "Перейти к представлениям проекта",
+      nav_project_pages: "Перейти к страницам",
+      nav_project_intake: "Перейти к предложениям",
+      nav_project_archives: "Перейти к архивам проекта",
+      open_project_setting: "Открыть настройку проекта",
+      nav_project_settings: "Перейти к настройкам проекта",
+    },
+    account_actions: {
+      sign_out: "Выйти",
+      workspace_invites: "Приглашения в рабочее пространство",
+    },
+    miscellaneous_actions: {
+      toggle_app_sidebar: "Переключить боковую панель",
+      copy_current_page_url: "Копировать URL текущей страницы",
+      copy_current_page_url_toast_success: "URL текущей страницы скопирован в буфер.",
+      copy_current_page_url_toast_error: "Ошибка при копировании URL текущей страницы.",
+      focus_top_nav_search: "Перейти к поиску",
+    },
+    preferences_actions: {
+      update_theme: "Изменить тему интерфейса",
+      update_timezone: "Изменить часовой пояс",
+      update_start_of_week: "Изменить первый день недели",
+      update_language: "Изменить язык интерфейса",
+      toast: {
+        theme: {
+          success: "Тема успешно обновлена.",
+          error: "Не удалось обновить тему. Попробуйте снова.",
+        },
+        timezone: {
+          success: "Часовой пояс успешно обновлён.",
+          error: "Не удалось обновить часовой пояс. Попробуйте снова.",
+        },
+        generic: {
+          success: "Настройки успешно обновлены.",
+          error: "Не удалось обновить настройки. Попробуйте снова.",
+        },
+      },
+    },
+    help_actions: {
+      open_keyboard_shortcuts: "Открыть горячие клавиши",
+      open_plane_documentation: "Открыть документацию Plane",
+      join_forum: "Присоединиться к Forum",
+      report_bug: "Сообщить об ошибке",
+      chat_with_us: "Написать нам",
+    },
+    page_placeholders: {
+      default: "Введите команду или поиск",
+      open_workspace: "Открыть рабочее пространство",
+      open_project: "Открыть проект",
+      open_workspace_setting: "Открыть настройку рабочего пространства",
+      open_project_cycle: "Открыть цикл",
+      open_project_module: "Открыть модуль",
+      open_project_view: "Открыть представление проекта",
+      open_project_setting: "Открыть настройку проекта",
+      update_work_item_state: "Изменить статус",
+      update_work_item_priority: "Изменить приоритет",
+      update_work_item_assignee: "Назначить",
+      update_work_item_estimate: "Изменить оценку",
+      update_work_item_cycle: "Добавить в цикл",
+      update_work_item_module: "Добавить в модули",
+      update_work_item_labels: "Добавить метки",
+      update_module_member: "Изменить участников",
+      update_module_status: "Изменить статус",
+      update_theme: "Изменить тему",
+      update_timezone: "Изменить часовой пояс",
+      update_start_of_week: "Изменить первый день недели",
+      update_language: "Изменить язык",
+    },
+    search_menu: {
+      no_results: "Ничего не найдено",
+      clear_search: "Очистить поиск",
+    },
+    footer: {
+      workspace_level: "Уровень рабочего пространства",
+    },
+    group_titles: {
+      contextual: "Контекстные",
+      navigation: "Навигация",
+      create: "Создать",
+      general: "Общие",
+      settings: "Настройки",
+      account: "Аккаунт",
+      miscellaneous: "Прочее",
+      preferences: "Предпочтения",
+      help: "Помощь",
+    },
+  },
+  customize_navigation: "Настроить навигацию",
+  personal: "Личное",
+  accordion_navigation_control: "Аккордеонная навигация",
+  horizontal_navigation_bar: "Вкладочная навигация",
+  show_limited_projects_on_sidebar: "Показывать ограниченное число проектов",
+  enter_number_of_projects: "Введите количество проектов",
+  pin: "Закрепить",
+  unpin: "Открепить",
 } as const;
diff --git a/packages/i18n/src/locales/sk/accessibility.ts b/packages/i18n/src/locales/sk/accessibility.ts
index 5038c41be..b7c3f0547 100644
--- a/packages/i18n/src/locales/sk/accessibility.ts
+++ b/packages/i18n/src/locales/sk/accessibility.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export default {
   aria_labels: {
     projects_sidebar: {
diff --git a/packages/i18n/src/locales/sk/editor.ts b/packages/i18n/src/locales/sk/editor.ts
index 927e1a9f2..f90361ce4 100644
--- a/packages/i18n/src/locales/sk/editor.ts
+++ b/packages/i18n/src/locales/sk/editor.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export default {} as const;
diff --git a/packages/i18n/src/locales/sk/empty-state.ts b/packages/i18n/src/locales/sk/empty-state.ts
index a82f47d3e..bb89c93c1 100644
--- a/packages/i18n/src/locales/sk/empty-state.ts
+++ b/packages/i18n/src/locales/sk/empty-state.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export default {
   common_empty_state: {
     progress: {
diff --git a/packages/i18n/src/locales/sk/translations.ts b/packages/i18n/src/locales/sk/translations.ts
index 10f6e1484..9d9343d00 100644
--- a/packages/i18n/src/locales/sk/translations.ts
+++ b/packages/i18n/src/locales/sk/translations.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export default {
   sidebar: {
     projects: "Projekty",
@@ -17,6 +23,7 @@ export default {
     favorites: "Obľúbené",
     pro: "Pro",
     upgrade: "Upgrade",
+    stickies: "Poznámky",
   },
   auth: {
     common: {
@@ -401,7 +408,7 @@ export default {
   docs: "Dokumentáciu",
   full_changelog: "Úplný zmenový protokol",
   support: "Podpora",
-  discord: "Discord",
+  forum: "Forum",
   powered_by_plane_pages: "Poháňa Plane Pages",
   please_select_at_least_one_invitation: "Vyberte aspoň jednu pozvánku.",
   please_select_at_least_one_invitation_description:
@@ -1581,6 +1588,7 @@ export default {
         name: "Názov pracovného priestoru",
         company_size: "Veľkosť spoločnosti",
         url: "URL pracovného priestoru",
+        workspace_timezone: "Časové pásmo pracovného priestoru",
         update_workspace: "Aktualizovať priestor",
         delete_workspace: "Zmazať tento priestor",
         delete_workspace_description: "Zmazaním priestoru odstránite všetky dáta a zdroje. Akcia je nevratná.",
@@ -1966,6 +1974,44 @@ export default {
         primary_button: "Pridať systém odhadov",
       },
     },
+    features: {
+      cycles: {
+        title: "Cykly",
+        short_title: "Cykly",
+        description:
+          "Naplánujte prácu v flexibilných obdobiach, ktoré sa prispôsobia jedinečnému rytmu a tempu tohto projektu.",
+        toggle_title: "Povoliť cykly",
+        toggle_description: "Naplánujte prácu v sústredenej časovej osi.",
+      },
+      modules: {
+        title: "Moduly",
+        short_title: "Moduly",
+        description: "Organizujte prácu do podprojektov s vyčlenenými vedúcimi a priradenými osobami.",
+        toggle_title: "Povoliť moduly",
+        toggle_description: "Členovia projektu budú môcť vytvárať a upravovať moduly.",
+      },
+      views: {
+        title: "Zobrazenia",
+        short_title: "Zobrazenia",
+        description: "Uložte vlastné triedenia, filtre a možnosti zobrazenia alebo ich zdieľajte so svojím tímom.",
+        toggle_title: "Povoliť zobrazenia",
+        toggle_description: "Členovia projektu budú môcť vytvárať a upravovať zobrazenia.",
+      },
+      pages: {
+        title: "Stránky",
+        short_title: "Stránky",
+        description: "Vytvárajte a upravujte voľný obsah: poznámky, dokumenty, čokoľvek.",
+        toggle_title: "Povoliť stránky",
+        toggle_description: "Členovia projektu budú môcť vytvárať a upravovať stránky.",
+      },
+      intake: {
+        title: "Príjem",
+        short_title: "Príjem",
+        description: "Umožnite nečlenom zdieľať chyby, spätnú väzbu a návrhy; bez narušenia vášho pracovného postupu.",
+        toggle_title: "Povoliť príjem",
+        toggle_description: "Povoliť členom projektu vytvárať žiadosti o príjem v aplikácii.",
+      },
+    },
   },
   project_cycles: {
     add_cycle: "Pridať cyklus",
diff --git a/packages/i18n/src/locales/tr-TR/accessibility.ts b/packages/i18n/src/locales/tr-TR/accessibility.ts
index 9675474d0..664fc6cee 100644
--- a/packages/i18n/src/locales/tr-TR/accessibility.ts
+++ b/packages/i18n/src/locales/tr-TR/accessibility.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export default {
   aria_labels: {
     projects_sidebar: {
diff --git a/packages/i18n/src/locales/tr-TR/editor.ts b/packages/i18n/src/locales/tr-TR/editor.ts
index 927e1a9f2..f90361ce4 100644
--- a/packages/i18n/src/locales/tr-TR/editor.ts
+++ b/packages/i18n/src/locales/tr-TR/editor.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export default {} as const;
diff --git a/packages/i18n/src/locales/tr-TR/empty-state.ts b/packages/i18n/src/locales/tr-TR/empty-state.ts
index 64bf46c20..6d66254b8 100644
--- a/packages/i18n/src/locales/tr-TR/empty-state.ts
+++ b/packages/i18n/src/locales/tr-TR/empty-state.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export default {
   common_empty_state: {
     progress: {
diff --git a/packages/i18n/src/locales/tr-TR/translations.ts b/packages/i18n/src/locales/tr-TR/translations.ts
index 6fed3bcdc..4b1240fba 100644
--- a/packages/i18n/src/locales/tr-TR/translations.ts
+++ b/packages/i18n/src/locales/tr-TR/translations.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export default {
   sidebar: {
     projects: "Projeler",
@@ -17,6 +23,7 @@ export default {
     favorites: "Favoriler",
     pro: "Pro",
     upgrade: "Yükselt",
+    stickies: "Yapışkan notlar",
   },
   auth: {
     common: {
@@ -402,7 +409,7 @@ export default {
   docs: "Dokümanlar",
   full_changelog: "Tam Değişiklik Kaydı",
   support: "Destek",
-  discord: "Discord",
+  forum: "Forum",
   powered_by_plane_pages: "Plane Pages tarafından desteklenmektedir",
   please_select_at_least_one_invitation: "Lütfen en az bir davet seçin.",
   please_select_at_least_one_invitation_description: "Çalışma alanına katılmak için lütfen en az bir davet seçin.",
@@ -1586,6 +1593,7 @@ export default {
         name: "Çalışma Alanı Adı",
         company_size: "Şirket Büyüklüğü",
         url: "Çalışma Alanı URL'si",
+        workspace_timezone: "Çalışma Alanı Saat Dilimi",
         update_workspace: "Çalışma Alanını Güncelle",
         delete_workspace: "Bu çalışma alanını sil",
         delete_workspace_description:
@@ -1955,6 +1963,44 @@ export default {
         primary_button: "Tahmin sistemi ekle",
       },
     },
+    features: {
+      cycles: {
+        title: "Döngüler",
+        short_title: "Döngüler",
+        description: "Bu projenin benzersiz ritmine ve hızına uyum sağlayan esnek dönemlerde iş planlayın.",
+        toggle_title: "Döngüleri etkinleştir",
+        toggle_description: "Odaklanmış zaman dilimlerinde iş planlayın.",
+      },
+      modules: {
+        title: "Modüller",
+        short_title: "Modüller",
+        description: "İşi özel liderler ve atananlarla alt projelere organize edin.",
+        toggle_title: "Modülleri etkinleştir",
+        toggle_description: "Proje üyeleri modüller oluşturabilir ve düzenleyebilir.",
+      },
+      views: {
+        title: "Görünümler",
+        short_title: "Görünümler",
+        description: "Özel sıralamalar, filtreler ve görüntüleme seçeneklerini kaydedin veya ekibinizle paylaşın.",
+        toggle_title: "Görünümleri etkinleştir",
+        toggle_description: "Proje üyeleri görünümler oluşturabilir ve düzenleyebilir.",
+      },
+      pages: {
+        title: "Sayfalar",
+        short_title: "Sayfalar",
+        description: "Serbest biçimli içerik oluşturun ve düzenleyin: notlar, belgeler, herhangi bir şey.",
+        toggle_title: "Sayfaları etkinleştir",
+        toggle_description: "Proje üyeleri sayfalar oluşturabilir ve düzenleyebilir.",
+      },
+      intake: {
+        title: "Alım",
+        short_title: "Alım",
+        description:
+          "Üye olmayanların hataları, geri bildirimleri ve önerileri paylaşmasına izin verin; iş akışınızı aksatmadan.",
+        toggle_title: "Alımı etkinleştir",
+        toggle_description: "Proje üyelerinin uygulama içinde alım talepleri oluşturmasına izin verin.",
+      },
+    },
   },
   project_cycles: {
     add_cycle: "Döngü ekle",
diff --git a/packages/i18n/src/locales/ua/accessibility.ts b/packages/i18n/src/locales/ua/accessibility.ts
index 221fcd494..34dea3cd5 100644
--- a/packages/i18n/src/locales/ua/accessibility.ts
+++ b/packages/i18n/src/locales/ua/accessibility.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export default {
   aria_labels: {
     projects_sidebar: {
@@ -13,18 +19,18 @@ export default {
       open_favorites_menu: "Відкрити меню улюблених",
       close_favorites_menu: "Закрити меню улюблених",
       enter_folder_name: "Введіть назву папки",
-      create_new_project: "Створити новий проект",
-      open_projects_menu: "Відкрити меню проектів",
-      close_projects_menu: "Закрити меню проектів",
+      create_new_project: "Створити новий проєкт",
+      open_projects_menu: "Відкрити меню проєктів",
+      close_projects_menu: "Закрити меню проєктів",
       toggle_quick_actions_menu: "Перемкнути меню швидких дій",
-      open_project_menu: "Відкрити меню проекту",
-      close_project_menu: "Закрити меню проекту",
+      open_project_menu: "Відкрити меню проєкту",
+      close_project_menu: "Закрити меню проєкту",
       collapse_sidebar: "Згорнути бічну панель",
       expand_sidebar: "Розгорнути бічну панель",
       edition_badge: "Відкрити модал платних планів",
     },
     auth_forms: {
-      clear_email: "Очистити email",
+      clear_email: "Очистити адресу електронної пошти",
       show_password: "Показати пароль",
       hide_password: "Приховати пароль",
       close_alert: "Закрити сповіщення",
diff --git a/packages/i18n/src/locales/ua/editor.ts b/packages/i18n/src/locales/ua/editor.ts
index 927e1a9f2..f90361ce4 100644
--- a/packages/i18n/src/locales/ua/editor.ts
+++ b/packages/i18n/src/locales/ua/editor.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export default {} as const;
diff --git a/packages/i18n/src/locales/ua/empty-state.ts b/packages/i18n/src/locales/ua/empty-state.ts
index 0ef6232f8..3fe159e16 100644
--- a/packages/i18n/src/locales/ua/empty-state.ts
+++ b/packages/i18n/src/locales/ua/empty-state.ts
@@ -1,27 +1,32 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export default {
   common_empty_state: {
     progress: {
-      title: "Ще немає метрик прогресу для відображення.",
-      description:
-        "Почніть встановлювати значення властивостей у робочих елементах, щоб побачити тут метрики прогресу.",
+      title: "Наразі немає метрик прогресу для відображення.",
+      description: "Почніть встановлювати значення властивостей у робочих одиницях, щоб побачити тут метрики прогресу.",
     },
     updates: {
       title: "Ще немає оновлень.",
-      description: "Як тільки учасники проєкту додадуть оновлення, вони з'являться тут",
+      description: "Коли учасники проєкту додадуть оновлення, вони з’являться тут.",
     },
     search: {
       title: "Немає відповідних результатів.",
       description: "Результатів не знайдено. Спробуйте змінити пошукові терміни.",
     },
     not_found: {
-      title: "Ой! Щось здається не так",
-      description: "Ми не можемо отримати ваш обліковий запис plane зараз. Це може бути помилка мережі.",
-      cta_primary: "Спробуйте перезавантажити",
+      title: "Схоже, сталася помилка",
+      description: "Наразі не вдається отримати дані вашого облікового запису Plane. Можливо, це помилка мережі.",
+      cta_primary: "Спробуйте перезавантажити сторінку",
     },
     server_error: {
       title: "Помилка сервера",
-      description: "Ми не можемо підключитися та отримати дані з нашого сервера. Не хвилюйтеся, ми працюємо над цим.",
-      cta_primary: "Спробуйте перезавантажити",
+      description: "Наразі не вдається підключитися та отримати дані з сервера. Ми вже працюємо над цим.",
+      cta_primary: "Спробуйте перезавантажити сторінку",
     },
   },
   project_empty_state: {
@@ -37,78 +42,77 @@ export default {
       description: "Проєкт, який ви шукаєте, не існує.",
     },
     work_items: {
-      title: "Почніть з вашого першого робочого елемента.",
+      title: "Почніть зі створення першої робочої одиниці.",
       description:
-        "Робочі елементи є будівельними блоками вашого проєкту — призначайте власників, встановлюйте пріоритети та легко відстежуйте прогрес.",
-      cta_primary: "Створіть свій перший робочий елемент",
+        "Робочі одиниці — це будівельні блоки вашого проєкту: призначайте відповідальних, встановлюйте пріоритети та відстежуйте прогрес.",
+      cta_primary: "Створити першу робочу одиницю",
     },
     cycles: {
-      title: "Групуйте та обмежуйте за часом вашу роботу в Циклах.",
+      title: "Групуйте та обмежуйте за часом роботу в циклах.",
       description:
-        "Розділіть роботу на часові блоки, працюйте назад від кінцевого терміну проєкту для встановлення дат і робіть відчутний прогрес як команда.",
-      cta_primary: "Встановіть свій перший цикл",
+        "Розділяйте роботу на часові блоки, відштовхуйтеся від кінцевого терміну проєкту для визначення дат і досягайте відчутного прогресу як команда.",
+      cta_primary: "Налаштувати перший цикл",
     },
     cycle_work_items: {
-      title: "Немає робочих елементів для відображення в цьому циклі",
+      title: "У цьому циклі немає робочих одиниць",
       description:
-        "Створіть робочі елементи, щоб почати моніторинг прогресу вашої команди в цьому циклі та досягти своїх цілей вчасно.",
-      cta_primary: "Створити робочий елемент",
-      cta_secondary: "Додати існуючий робочий елемент",
+        "Створіть робочі одиниці, щоб почати відстежувати прогрес команди в цьому циклі та вчасно досягати цілей.",
+      cta_primary: "Створити робочу одиницю",
+      cta_secondary: "Додати наявну робочу одиницю",
     },
     modules: {
-      title: "Відобразіть цілі вашого проєкту на Модулі та легко відстежуйте.",
+      title: "Відобразіть цілі проєкту у модулях та відстежуйте прогрес.",
       description:
-        "Модулі складаються з взаємопов'язаних робочих елементів. Вони допомагають моніторити прогрес через фази проєкту, кожна з конкретними термінами та аналітикою, щоб показати, наскільки ви близькі до досягнення цих фаз.",
-      cta_primary: "Встановіть свій перший модуль",
+        "Модулі складаються з взаємопов’язаних робочих одиниць. Вони допомагають відстежувати прогрес через фази проєкту, кожна з конкретними термінами та аналітикою.",
+      cta_primary: "Налаштувати перший модуль",
     },
     module_work_items: {
-      title: "Немає робочих елементів для відображення в цьому Модулі",
-      description: "Створіть робочі елементи, щоб почати моніторинг цього модуля.",
-      cta_primary: "Створити робочий елемент",
-      cta_secondary: "Додати існуючий робочий елемент",
+      title: "У цьому модулі немає робочих одиниць",
+      description: "Створіть робочі одиниці, щоб почати відстежувати цей модуль.",
+      cta_primary: "Створити робочу одиницю",
+      cta_secondary: "Додати наявну робочу одиницю",
     },
     views: {
-      title: "Зберігайте власні подання для вашого проєкту",
+      title: "Зберігайте власні подання для проєкту",
       description:
-        "Подання є збереженими фільтрами, які допомагають вам швидко отримувати доступ до інформації, яку ви використовуєте найчастіше. Співпрацюйте без зусиль, оскільки члени команди діляться та адаптують подання до своїх конкретних потреб.",
+        "Подання — це збережені фільтри, які допомагають швидко отримувати доступ до потрібної інформації. Команда може ділитися поданнями та налаштовувати їх під свої потреби.",
       cta_primary: "Створити подання",
     },
     no_work_items_in_project: {
-      title: "У проєкті ще немає робочих елементів",
-      description:
-        "Додайте робочі елементи до свого проєкту та розділіть свою роботу на відстежувані частини з поданнями.",
-      cta_primary: "Додати робочий елемент",
+      title: "У проєкті ще немає робочих одиниць",
+      description: "Додайте робочі одиниці до проєкту та розділіть роботу на відстежувані частини за допомогою подань.",
+      cta_primary: "Додати робочу одиницю",
     },
     work_item_filter: {
-      title: "Робочих елементів не знайдено",
+      title: "Робочих одиниць не знайдено",
       description: "Ваш поточний фільтр не повернув результатів. Спробуйте змінити фільтри.",
-      cta_primary: "Додати робочий елемент",
+      cta_primary: "Додати робочу одиницю",
     },
     pages: {
       title: "Документуйте все — від нотаток до PRD",
       description:
-        "Сторінки дозволяють вам захоплювати та організовувати інформацію в одному місці. Пишіть нотатки зустрічей, проєктну документацію та PRD, вбудовуйте робочі елементи та структуруйте їх за допомогою готових компонентів.",
-      cta_primary: "Створіть свою першу Сторінку",
+        "Сторінки дають змогу збирати та впорядковувати інформацію в одному місці. Пишіть нотатки зустрічей, проєктну документацію та PRD, вбудовуйте робочі одиниці й структуруйте їх за допомогою готових компонентів.",
+      cta_primary: "Створити першу сторінку",
     },
     archive_pages: {
       title: "Ще немає архівованих сторінок",
       description: "Архівуйте сторінки, які не на вашому радарі. Отримуйте до них доступ тут, коли потрібно.",
     },
     intake_sidebar: {
-      title: "Реєструйте запити на вхід",
+      title: "Реєструйте запити надходження",
       description:
-        "Надсилайте нові запити для перегляду, встановлення пріоритетів та відстеження в рамках робочого процесу вашого проєкту.",
-      cta_primary: "Створити запит на вхід",
+        "Надсилайте нові запити для перегляду, пріоритизації та відстеження в межах робочого процесу проєкту.",
+      cta_primary: "Створити запит надходження",
     },
     intake_main: {
-      title: "Виберіть робочий елемент Intake, щоб переглянути його деталі",
+      title: "Виберіть робочу одиницю надходження, щоб переглянути її деталі",
     },
   },
   workspace_empty_state: {
     archive_work_items: {
-      title: "Ще немає архівованих робочих елементів",
+      title: "Ще немає архівованих робочих одиниць",
       description:
-        "Вручну або через автоматизацію ви можете архівувати завершені або скасовані робочі елементи. Знайдіть їх тут після архівування.",
+        "Вручну або через автоматизацію ви можете архівувати завершені або скасовані робочі одиниці. Знайдіть їх тут після архівування.",
       cta_primary: "Налаштувати автоматизацію",
     },
     archive_cycles: {
@@ -124,28 +128,28 @@ export default {
       title: "Тримайте під рукою важливі посилання, ресурси або документи для вашої роботи",
     },
     inbox_sidebar_all: {
-      title: "Оновлення для ваших підписаних робочих елементів з'являться тут",
+      title: "Оновлення для підписаних робочих одиниць з’являться тут",
     },
     inbox_sidebar_mentions: {
-      title: "Згадки для ваших робочих елементів з'являться тут",
+      title: "Згадки про ваші робочі одиниці з’являться тут",
     },
     your_work_by_priority: {
-      title: "Ще не призначено робочого елемента",
+      title: "Ще не призначено робочої одиниці",
     },
     your_work_by_state: {
-      title: "Ще не призначено робочого елемента",
+      title: "Ще не призначено робочої одиниці",
     },
     views: {
-      title: "Ще немає Поданнь",
+      title: "Ще немає подань",
       description:
-        "Додайте робочі елементи до свого проєкту та використовуйте подання для фільтрування, сортування та моніторингу прогресу без зусиль.",
-      cta_primary: "Додати робочий елемент",
+        "Додайте робочі одиниці до проєкту та використовуйте подання для фільтрування, сортування й моніторингу прогресу.",
+      cta_primary: "Додати робочу одиницю",
     },
     drafts: {
-      title: "Напівнаписані робочі елементи",
+      title: "Незавершені робочі одиниці",
       description:
-        "Щоб спробувати це, почніть додавати робочий елемент і залиште його на половині або створіть свій перший чернетка нижче. 😉",
-      cta_primary: "Створити чернетковий робочий елемент",
+        "Щоб спробувати, почніть створювати робочу одиницю та залиште її незавершеною або створіть першу чернетку нижче.",
+      cta_primary: "Створити чернетку робочої одиниці",
     },
     projects_archived: {
       title: "Немає архівованих проєктів",
@@ -156,47 +160,42 @@ export default {
     },
     analytics_work_items: {
       title:
-        "Створіть проєкти з робочими елементами та призначеними особами, щоб почати відстежувати ефективність, прогрес та вплив команди тут.",
+        "Створіть проєкти з робочими одиницями та призначеними виконавцями, щоб почати відстежувати ефективність, прогрес і вплив команди.",
     },
     analytics_no_cycle: {
-      title: "Створіть цикли для організації роботи в часові фази та відстеження прогресу через спринти.",
+      title: "Створіть цикли для організації роботи у часові фази та відстеження прогресу через спринти.",
     },
     analytics_no_module: {
       title: "Створіть модулі для організації вашої роботи та відстеження прогресу через різні фази.",
     },
     analytics_no_intake: {
-      title:
-        "Налаштуйте вхід для управління вхідними запитами та відстеження того, як вони приймаються та відхиляються",
+      title: "Налаштуйте надходження для керування запитами та відстеження того, як їх приймають або відхиляють.",
     },
   },
   settings_empty_state: {
     estimates: {
       title: "Ще немає оцінок",
-      description:
-        "Визначте, як ваша команда вимірює зусилля, та відстежуйте це послідовно для всіх робочих елементів.",
+      description: "Визначте, як команда вимірює зусилля, та відстежуйте це послідовно для всіх робочих одиниць.",
       cta_primary: "Додати систему оцінок",
     },
     labels: {
       title: "Ще немає міток",
-      description:
-        "Створіть персоналізовані мітки для ефективної категоризації та управління вашими робочими елементами.",
+      description: "Створіть персоналізовані мітки для ефективної категоризації та керування робочими одиницями.",
       cta_primary: "Створіть свою першу мітку",
     },
     exports: {
       title: "Ще немає експортів",
-      description:
-        "Ви зараз не маєте жодних записів експорту. Як тільки ви експортуєте дані, усі записи з'являться тут.",
+      description: "Наразі немає жодних записів експорту. Після першого експорту всі записи з’являться тут.",
     },
     tokens: {
-      title: "Ще немає Персонального токена",
-      description:
-        "Генеруйте безпечні API токени для підключення вашого робочого простору до зовнішніх систем та додатків.",
-      cta_primary: "Додати API токен",
+      title: "Ще немає персонального токена",
+      description: "Створюйте безпечні API-токени для підключення робочого простору до зовнішніх систем і застосунків.",
+      cta_primary: "Додати API-токен",
     },
     webhooks: {
-      title: "Ще не додано Webhook",
-      description: "Автоматизуйте сповіщення зовнішнім сервісам, коли відбуваються події проєкту.",
-      cta_primary: "Додати webhook",
+      title: "Ще немає вебхуків",
+      description: "Автоматизуйте сповіщення зовнішнім сервісам про події проєкту.",
+      cta_primary: "Додати вебхук",
     },
   },
 } as const;
diff --git a/packages/i18n/src/locales/ua/translations.ts b/packages/i18n/src/locales/ua/translations.ts
index 743fd7ab6..1da89e4a6 100644
--- a/packages/i18n/src/locales/ua/translations.ts
+++ b/packages/i18n/src/locales/ua/translations.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export default {
   sidebar: {
     projects: "Проєкти",
@@ -5,6 +11,7 @@ export default {
     new_work_item: "Нова робоча одиниця",
     home: "Головна",
     your_work: "Ваша робота",
+    stickies: "Нотатки",
     inbox: "Вхідні",
     workspace: "Робочий простір",
     views: "Подання",
@@ -98,12 +105,12 @@ export default {
           },
           password: {
             header: "Реєстрація",
-            sub_header: "Зареєструйтесь, використовуючи комбінацію електронної пошти та пароля.",
+            sub_header: "Зареєструйтеся, використовуючи комбінацію електронної пошти та пароля.",
           },
           unique_code: {
             header: "Реєстрація",
             sub_header:
-              "Зареєструйтесь за допомогою унікального коду, надісланого на вказану вище адресу електронної пошти.",
+              "Зареєструйтеся за допомогою унікального коду, надісланого на вказану вище адресу електронної пошти.",
           },
         },
       },
@@ -118,15 +125,15 @@ export default {
         label: "Увійдіть і почніть керувати роботою зі своєю командою.",
         step: {
           email: {
-            header: "Увійти або зареєструватись",
+            header: "Увійти або зареєструватися",
             sub_header: "",
           },
           password: {
-            header: "Увійти або зареєструватись",
+            header: "Увійти або зареєструватися",
             sub_header: "Використовуйте комбінацію електронної пошти та пароля, щоб увійти.",
           },
           unique_code: {
-            header: "Увійти або зареєструватись",
+            header: "Увійти або зареєструватися",
             sub_header: "Увійдіть за допомогою унікального коду, надісланого на вказану вище адресу електронної пошти.",
           },
         },
@@ -215,6 +222,7 @@ export default {
   your_account: "Ваш обліковий запис",
   security: "Безпека",
   activity: "Активність",
+  preferences: "Параметри",
   appearance: "Зовнішній вигляд",
   notifications: "Сповіщення",
   workspaces: "Робочі простори",
@@ -228,6 +236,11 @@ export default {
   something_went_wrong_please_try_again: "Щось пішло не так. Будь ласка, спробуйте ще раз.",
   load_more: "Завантажити ще",
   select_or_customize_your_interface_color_scheme: "Виберіть або налаштуйте кольорову схему інтерфейсу.",
+  timezone_setting: "Поточне налаштування часового поясу.",
+  language_setting: "Виберіть мову інтерфейсу.",
+  language_and_time: "Мова та час",
+  settings_moved_to_preferences: "Налаштування часу та мови перенесено до параметрів.",
+  go_to_preferences: "Перейти до параметрів",
   theme: "Тема",
   system_preference: "Системні налаштування",
   light: "Світла",
@@ -328,8 +341,8 @@ export default {
   failed_to_remove_project_from_favorites: "Не вдалося видалити проєкт із вибраного. Спробуйте ще раз.",
   project_created_successfully: "Проєкт успішно створено",
   project_created_successfully_description: "Проєкт успішно створений. Тепер ви можете почати додавати робочі одиниці.",
-  project_name_already_taken: "Назва проекту вже використовується.",
-  project_identifier_already_taken: "Ідентифікатор проекту вже використовується.",
+  project_name_already_taken: "Назва проєкту вже використовується.",
+  project_identifier_already_taken: "Ідентифікатор проєкту вже використовується.",
   project_cover_image_alt: "Обкладинка проєкту",
   name_is_required: "Назва є обов’язковою",
   title_should_be_less_than_255_characters: "Назва має бути коротшою за 255 символів",
@@ -402,7 +415,7 @@ export default {
   docs: "Документацію",
   full_changelog: "Повний журнал змін",
   support: "Підтримка",
-  discord: "Discord",
+  forum: "Forum",
   powered_by_plane_pages: "Працює на Plane Pages",
   please_select_at_least_one_invitation: "Виберіть принаймні одне запрошення.",
   please_select_at_least_one_invitation_description:
@@ -421,7 +434,7 @@ export default {
   workspace_name: "назва-робочого-простору",
   deactivate_your_account: "Деактивувати ваш обліковий запис",
   deactivate_your_account_description:
-    "Після деактивації вас не можна буде призначати на робочі одиниці, і з вас не стягуватиметься плата за робочий простір. Щоб знову активувати обліковий запис, потрібно отримати запрошення на цей e-mail.",
+    "Після деактивації вас не можна буде призначати на робочі одиниці, і з вас не стягуватиметься плата за робочий простір. Щоб знову активувати обліковий запис, потрібно отримати запрошення на цю електронну адресу.",
   deactivating: "Деактивація",
   confirm: "Підтвердити",
   confirming: "Підтвердження",
@@ -490,7 +503,7 @@ export default {
   no_data_yet: "Поки що немає даних",
   syncing: "Синхронізація",
   add_work_item: "Додати робочу одиницю",
-  advanced_description_placeholder: "Натисніть '/' для команд",
+  advanced_description_placeholder: "Натисніть «/» для команд",
   create_work_item: "Створити робочу одиницю",
   attachments: "Вкладення",
   declining: "Відхилення",
@@ -522,6 +535,9 @@ export default {
   new_password_must_be_different_from_old_password: "Новий пароль повинен бути відмінним від старого пароля",
   edited: "Редагувано",
   bot: "Бот",
+  settings_description:
+    "Керуйте налаштуваннями облікового запису, робочого простору та проєкту в одному місці. Перемикайтеся між вкладками для швидкого налаштування.",
+  back_to_workspace: "Повернутися до робочого простору",
   project_view: {
     sort_by: {
       created_at: "Створено",
@@ -674,6 +690,7 @@ export default {
     load_more: "Завантажити ще",
     activity: "Активність",
     analytics: "Аналітика",
+    overview: "Огляд",
     dates: "Дати",
     success: "Успіх!",
     something_went_wrong: "Щось пішло не так",
@@ -769,8 +786,8 @@ export default {
         title: "Помилка!",
         message: "Щось пішло не так. Будь ласка, спробуйте ще раз.",
       },
-      required: "Це поле є обов'язковим",
-      entity_required: "{entity} є обов'язковим",
+      required: "Це поле є обов’язковим",
+      entity_required: "{entity} є обов’язковим",
       restricted_entity: "{entity} обмежено",
     },
     update_link: "Оновити посилання",
@@ -793,7 +810,7 @@ export default {
     week: "Тиждень",
     month: "Місяць",
     quarter: "Квартал",
-    press_for_commands: "Натисніть '/' для команд",
+    press_for_commands: "Натисніть «/» для команд",
     click_to_add_description: "Натисніть, щоб додати опис",
     search: {
       label: "Пошук",
@@ -816,6 +833,7 @@ export default {
       show_weekends: "Показати вихідні",
       enable: "Увімкнути",
       disable: "Вимкнути",
+      copy_markdown: "Копіювати Markdown",
     },
     name: "Назва",
     discard: "Скасувати",
@@ -954,7 +972,7 @@ export default {
       success: "Епік успішно створено",
     },
     add: {
-      press_enter: "Натисніть 'Enter', щоб додати ще один епік",
+      press_enter: "Натисніть «Enter», щоб додати ще один епік",
       label: "Додати епік",
     },
     title: {
@@ -971,7 +989,7 @@ export default {
       required: "Назва робочої одиниці є обов’язковою.",
     },
     add: {
-      press_enter: "Натисніть 'Enter', щоб додати ще одну робочу одиницю",
+      press_enter: "Натисніть «Enter», щоб додати ще одну робочу одиницю",
       label: "Додати робочу одиницю",
       cycle: {
         failed: "Не вдалося додати робочу одиницю в цикл. Спробуйте ще раз.",
@@ -1293,9 +1311,10 @@ export default {
         request_button: "Запитати адміністратора інстанції",
       },
       validation: {
-        name_alphanumeric: "Назви робочих просторів можуть містити лише (' '), ('-'), ('_') і алфанумеричні символи.",
+        name_alphanumeric:
+          "Назви робочих просторів можуть містити лише « » (пробіл), «-», «_» і алфанумеричні символи.",
         name_length: "Назва обмежена 80 символами.",
-        url_alphanumeric: "URL може містити лише ('-') та алфанумеричні символи.",
+        url_alphanumeric: "URL може містити лише «-» та алфанумеричні символи.",
         url_length: "URL обмежений 48 символами.",
         url_already_taken: "URL робочого простору вже зайнято!",
       },
@@ -1532,27 +1551,27 @@ export default {
   account_settings: {
     profile: {
       change_email_modal: {
-        title: "Змінити email",
+        title: "Змінити електронну пошту",
         description: "Введіть нову адресу електронної пошти, щоб отримати посилання для підтвердження.",
         toasts: {
           success_title: "Успіх!",
-          success_message: "Email успішно оновлено. Увійдіть знову.",
+          success_message: "Електронну пошту успішно оновлено. Увійдіть знову.",
         },
         form: {
           email: {
-            label: "Новий email",
-            placeholder: "Введіть свій email",
+            label: "Нова електронна пошта",
+            placeholder: "Введіть адресу електронної пошти",
             errors: {
-              required: "Email є обов’язковим",
-              invalid: "Email недійсний",
-              exists: "Email уже існує. Використайте інший.",
-              validation_failed: "Не вдалося підтвердити email. Спробуйте ще раз.",
+              required: "Електронна пошта є обов’язковою",
+              invalid: "Електронна пошта недійсна",
+              exists: "Електронна пошта вже існує. Використайте іншу.",
+              validation_failed: "Не вдалося підтвердити електронну пошту. Спробуйте ще раз.",
             },
           },
           code: {
             label: "Унікальний код",
             placeholder: "123456",
-            helper_text: "Код підтвердження надіслано на ваш новий email.",
+            helper_text: "Код підтвердження надіслано на вашу нову електронну пошту.",
             errors: {
               required: "Унікальний код є обов’язковим",
               invalid: "Недійсний код підтвердження. Спробуйте ще раз.",
@@ -1569,6 +1588,25 @@ export default {
         },
       },
     },
+    preferences: {
+      heading: "Параметри",
+      description: "Налаштуйте досвід роботи з застосунком відповідно до ваших потреб",
+    },
+    notifications: {
+      heading: "Сповіщення електронною поштою",
+      description: "Будьте в курсі робочих одиниць, на які ви підписані. Увімкніть сповіщення.",
+    },
+    security: {
+      heading: "Безпека",
+    },
+    api_tokens: {
+      heading: "Персональні токени доступу",
+      description: "Створюйте безпечні API-токени для інтеграції з зовнішніми системами та застосунками.",
+    },
+    activity: {
+      heading: "Активність",
+      description: "Відстежуйте останні дії та зміни у всіх проєктах і робочих одиницях.",
+    },
   },
   workspace_settings: {
     label: "Налаштування робочого простору",
@@ -1585,6 +1623,7 @@ export default {
         name: "Назва робочого простору",
         company_size: "Розмір компанії",
         url: "URL робочого простору",
+        workspace_timezone: "Часовий пояс робочого простору",
         update_workspace: "Оновити простір",
         delete_workspace: "Видалити цей простір",
         delete_workspace_description: "Видалення простору призведе до втрати всіх даних і ресурсів. Дія незворотна.",
@@ -1606,6 +1645,7 @@ export default {
           },
           company_size: {
             required: "Розмір компанії є обов’язковим",
+            select_a_range: "Виберіть діапазон розміру організації",
           },
         },
       },
@@ -1636,17 +1676,23 @@ export default {
         },
       },
       billing_and_plans: {
+        heading: "Платежі та плани",
+        description: "Оберіть план, керуйте підписками та легко оновлюйте їх відповідно до ваших потреб.",
         title: "Платежі та плани",
         current_plan: "Поточний план",
         free_plan: "Ви використовуєте безкоштовний план",
         view_plans: "Переглянути плани",
       },
       exports: {
+        heading: "Експорти",
+        description: "Експортуйте дані проєкту у різних форматах і переглядайте історію експортів.",
         title: "Експорти",
         exporting: "Експортування",
+        exporting_projects: "Експортування проєктів",
         previous_exports: "Попередні експорти",
         export_separate_files: "Експортувати дані в окремі файли",
-        filters_info: "Застосуйте фільтри для експорту конкретних робочих елементів за вашими критеріями.",
+        format: "Формат",
+        filters_info: "Застосуйте фільтри для експорту конкретних робочих одиниць за вашими критеріями.",
         modal: {
           title: "Експортувати в",
           toasts: {
@@ -1662,6 +1708,8 @@ export default {
         },
       },
       webhooks: {
+        heading: "Вебхуки",
+        description: "Автоматизуйте сповіщення зовнішнім сервісам про події проєкту.",
         title: "Вебхуки",
         add_webhook: "Додати вебхук",
         modal: {
@@ -1787,6 +1835,8 @@ export default {
       activity: "Активність",
       appearance: "Зовнішній вигляд",
       notifications: "Сповіщення",
+      preferences: "Параметри",
+      "api-tokens": "Персональні токени доступу",
     },
     tabs: {
       summary: "Зведення",
@@ -1848,6 +1898,8 @@ export default {
       },
     },
     states: {
+      heading: "Стани",
+      description: "Визначайте та налаштовуйте стани робочого процесу для відстеження прогресу.",
       describe_this_state_for_your_members: "Опишіть цей стан для учасників.",
       empty_state: {
         title: "Немає станів у групі {groupKey}",
@@ -1855,6 +1907,8 @@ export default {
       },
     },
     labels: {
+      heading: "Мітки",
+      description: "Створюйте власні мітки для категоризації та організації робочих одиниць.",
       label_title: "Назва мітки",
       label_title_is_required: "Назва мітки є обов’язковою",
       label_max_char: "Назва мітки не може перевищувати 255 символів",
@@ -1863,9 +1917,11 @@ export default {
       },
     },
     estimates: {
+      heading: "Оцінки",
       label: "Оцінки",
       title: "Увімкнути оцінки для мого проєкту",
-      description: "Вони допомагають вам повідомляти про складність та навантаження команди.",
+      description: "Вони допомагають повідомляти про складність і навантаження команди.",
+      enable_description: "Допомагають комунікувати складність та навантаження команди.",
       no_estimate: "Без оцінки",
       new: "Нова система оцінок",
       create: {
@@ -1922,7 +1978,7 @@ export default {
         character: "Оцінка має бути символьним значенням.",
         empty: "Значення оцінки не може бути порожнім.",
         already_exists: "Таке значення оцінки вже існує.",
-        unsaved_changes: "У вас є незбережені зміни. Збережіть їх перед тим, як натиснути 'готово'",
+        unsaved_changes: "У вас є незбережені зміни. Збережіть їх перед тим, як натиснути «готово»",
         remove_empty:
           "Оцінка не може бути порожньою. Введіть значення в кожне поле або видаліть ті, для яких у вас немає значень.",
       },
@@ -1948,6 +2004,8 @@ export default {
     },
     automations: {
       label: "Автоматизація",
+      heading: "Автоматизація",
+      description: "Налаштовуйте автоматичні дії, щоб спростити керування проєктом і зменшити ручні операції.",
       "auto-archive": {
         title: "Автоматично архівувати закриті одиниці",
         description: "Plane архівуватиме завершені або скасовані одиниці.",
@@ -1971,6 +2029,45 @@ export default {
         primary_button: "Додати систему оцінок",
       },
     },
+    features: {
+      cycles: {
+        title: "Цикли",
+        short_title: "Цикли",
+        description: "Плануйте роботу в гнучких періодах, що адаптуються до унікального ритму та темпу цього проєкту.",
+        toggle_title: "Увімкнути цикли",
+        toggle_description: "Плануйте роботу в цілеспрямовані періоди часу.",
+      },
+      modules: {
+        title: "Модулі",
+        short_title: "Модулі",
+        description: "Організуйте роботу в підпроєкти з визначеними керівниками та виконавцями.",
+        toggle_title: "Увімкнути модулі",
+        toggle_description: "Учасники проєкту зможуть створювати та редагувати модулі.",
+      },
+      views: {
+        title: "Подання",
+        short_title: "Подання",
+        description:
+          "Зберігайте користувацькі сортування, фільтри та параметри відображення або діліться ними з командою.",
+        toggle_title: "Увімкнути подання",
+        toggle_description: "Учасники проєкту зможуть створювати та редагувати подання.",
+      },
+      pages: {
+        title: "Сторінки",
+        short_title: "Сторінки",
+        description: "Створюйте та редагуйте вільний контент: нотатки, документи, що завгодно.",
+        toggle_title: "Увімкнути сторінки",
+        toggle_description: "Учасники проєкту зможуть створювати та редагувати сторінки.",
+      },
+      intake: {
+        title: "Надходження",
+        short_title: "Надходження",
+        description:
+          "Дозвольте неучасникам ділитися помилками, відгуками та пропозиціями, не порушуючи робочий процес.",
+        toggle_title: "Увімкнути надходження",
+        toggle_description: "Дозволити учасникам проєкту створювати запити надходження у застосунку.",
+      },
+    },
   },
   project_cycles: {
     add_cycle: "Додати цикл",
@@ -2619,4 +2716,201 @@ export default {
     close_button: "Закрити панель навігації",
     outline_floating_button: "Відкрити структуру",
   },
+  project_members: {
+    full_name: "Повне ім’я",
+    display_name: "Відображуване ім’я",
+    email: "Електронна пошта",
+    joining_date: "Дата приєднання",
+    role: "Роль",
+  },
+  power_k: {
+    contextual_actions: {
+      work_item: {
+        title: "Дії з робочою одиницею",
+        indicator: "Робоча одиниця",
+        change_state: "Змінити стан",
+        change_priority: "Змінити пріоритет",
+        change_assignees: "Призначити",
+        assign_to_me: "Призначити мені",
+        unassign_from_me: "Зняти призначення з мене",
+        change_estimate: "Змінити оцінку",
+        add_to_cycle: "Додати до циклу",
+        add_to_modules: "Додати до модулів",
+        add_labels: "Додати мітки",
+        subscribe: "Підписатися на сповіщення",
+        unsubscribe: "Скасувати підписку на сповіщення",
+        delete: "Видалити",
+        copy_id: "Копіювати ID",
+        copy_id_toast_success: "ID робочої одиниці скопійовано до буфера обміну.",
+        copy_id_toast_error: "Під час копіювання ID робочої одиниці сталася помилка.",
+        copy_title: "Копіювати назву",
+        copy_title_toast_success: "Назву робочої одиниці скопійовано до буфера обміну.",
+        copy_title_toast_error: "Під час копіювання назви робочої одиниці сталася помилка.",
+        copy_url: "Копіювати URL",
+        copy_url_toast_success: "URL робочої одиниці скопійовано до буфера обміну.",
+        copy_url_toast_error: "Під час копіювання URL робочої одиниці сталася помилка.",
+      },
+      cycle: {
+        title: "Дії з циклом",
+        indicator: "Цикл",
+        add_to_favorites: "Додати до вибраного",
+        remove_from_favorites: "Вилучити з вибраного",
+        copy_url: "Копіювати URL",
+        copy_url_toast_success: "URL циклу скопійовано до буфера обміну.",
+        copy_url_toast_error: "Під час копіювання URL циклу сталася помилка.",
+      },
+      module: {
+        title: "Дії з модулем",
+        indicator: "Модуль",
+        add_remove_members: "Додати/вилучити учасників",
+        change_status: "Змінити статус",
+        add_to_favorites: "Додати до вибраного",
+        remove_from_favorites: "Вилучити з вибраного",
+        copy_url: "Копіювати URL",
+        copy_url_toast_success: "URL модуля скопійовано до буфера обміну.",
+        copy_url_toast_error: "Під час копіювання URL модуля сталася помилка.",
+      },
+      page: {
+        title: "Дії зі сторінкою",
+        indicator: "Сторінка",
+        lock: "Заблокувати",
+        unlock: "Розблокувати",
+        make_private: "Зробити приватною",
+        make_public: "Зробити публічною",
+        archive: "Заархівувати",
+        restore: "Відновити",
+        add_to_favorites: "Додати до вибраного",
+        remove_from_favorites: "Вилучити з вибраного",
+        copy_url: "Копіювати URL",
+        copy_url_toast_success: "URL сторінки скопійовано до буфера обміну.",
+        copy_url_toast_error: "Під час копіювання URL сторінки сталася помилка.",
+      },
+    },
+    creation_actions: {
+      create_work_item: "Нова робоча одиниця",
+      create_page: "Нова сторінка",
+      create_view: "Нове подання",
+      create_cycle: "Новий цикл",
+      create_module: "Новий модуль",
+      create_project: "Новий проєкт",
+      create_workspace: "Новий робочий простір",
+    },
+    navigation_actions: {
+      open_workspace: "Відкрити робочий простір",
+      nav_home: "Перейти на головну",
+      nav_inbox: "Перейти до вхідних",
+      nav_your_work: "Перейти до вашої роботи",
+      nav_account_settings: "Перейти до налаштувань облікового запису",
+      open_project: "Відкрити проєкт",
+      nav_projects_list: "Перейти до списку проєктів",
+      nav_all_workspace_work_items: "Перейти до всіх робочих одиниць",
+      nav_assigned_workspace_work_items: "Перейти до призначених робочих одиниць",
+      nav_created_workspace_work_items: "Перейти до створених робочих одиниць",
+      nav_subscribed_workspace_work_items: "Перейти до підписаних робочих одиниць",
+      nav_workspace_analytics: "Перейти до аналітики робочого простору",
+      nav_workspace_drafts: "Перейти до чернеток робочого простору",
+      nav_workspace_archives: "Перейти до архівів робочого простору",
+      open_workspace_setting: "Відкрити налаштування робочого простору",
+      nav_workspace_settings: "Перейти до налаштувань робочого простору",
+      nav_project_work_items: "Перейти до робочих одиниць",
+      open_project_cycle: "Відкрити цикл",
+      nav_project_cycles: "Перейти до циклів",
+      open_project_module: "Відкрити модуль",
+      nav_project_modules: "Перейти до модулів",
+      open_project_view: "Відкрити подання проєкту",
+      nav_project_views: "Перейти до подань проєкту",
+      nav_project_pages: "Перейти до сторінок",
+      nav_project_intake: "Перейти до надходжень",
+      nav_project_archives: "Перейти до архівів проєкту",
+      open_project_setting: "Відкрити налаштування проєкту",
+      nav_project_settings: "Перейти до налаштувань проєкту",
+    },
+    account_actions: {
+      sign_out: "Вийти",
+      workspace_invites: "Запрошення до робочого простору",
+    },
+    miscellaneous_actions: {
+      toggle_app_sidebar: "Перемкнути бічну панель застосунку",
+      copy_current_page_url: "Копіювати URL поточної сторінки",
+      copy_current_page_url_toast_success: "URL поточної сторінки скопійовано до буфера обміну.",
+      copy_current_page_url_toast_error: "Під час копіювання URL поточної сторінки сталася помилка.",
+      focus_top_nav_search: "Фокус у полі пошуку",
+    },
+    preferences_actions: {
+      update_theme: "Змінити тему інтерфейсу",
+      update_timezone: "Змінити часовий пояс",
+      update_start_of_week: "Змінити перший день тижня",
+      update_language: "Змінити мову інтерфейсу",
+      toast: {
+        theme: {
+          success: "Тему успішно оновлено.",
+          error: "Не вдалося оновити тему. Спробуйте ще раз.",
+        },
+        timezone: {
+          success: "Часовий пояс успішно оновлено.",
+          error: "Не вдалося оновити часовий пояс. Спробуйте ще раз.",
+        },
+        generic: {
+          success: "Параметри успішно оновлено.",
+          error: "Не вдалося оновити параметри. Спробуйте ще раз.",
+        },
+      },
+    },
+    help_actions: {
+      open_keyboard_shortcuts: "Відкрити гарячі клавіші",
+      open_plane_documentation: "Відкрити документацію Plane",
+      join_forum: "Приєднатися до Forum",
+      report_bug: "Повідомити про помилку",
+      chat_with_us: "Написати нам",
+    },
+    page_placeholders: {
+      default: "Введіть команду або виконайте пошук",
+      open_workspace: "Відкрити робочий простір",
+      open_project: "Відкрити проєкт",
+      open_workspace_setting: "Відкрити налаштування робочого простору",
+      open_project_cycle: "Відкрити цикл",
+      open_project_module: "Відкрити модуль",
+      open_project_view: "Відкрити подання проєкту",
+      open_project_setting: "Відкрити налаштування проєкту",
+      update_work_item_state: "Змінити стан",
+      update_work_item_priority: "Змінити пріоритет",
+      update_work_item_assignee: "Призначити",
+      update_work_item_estimate: "Змінити оцінку",
+      update_work_item_cycle: "Додати до циклу",
+      update_work_item_module: "Додати до модулів",
+      update_work_item_labels: "Додати мітки",
+      update_module_member: "Змінити учасників",
+      update_module_status: "Змінити статус",
+      update_theme: "Змінити тему",
+      update_timezone: "Змінити часовий пояс",
+      update_start_of_week: "Змінити перший день тижня",
+      update_language: "Змінити мову",
+    },
+    search_menu: {
+      no_results: "Результатів не знайдено",
+      clear_search: "Очистити пошук",
+    },
+    footer: {
+      workspace_level: "Рівень робочого простору",
+    },
+    group_titles: {
+      contextual: "Контекстні",
+      navigation: "Навігація",
+      create: "Створення",
+      general: "Загальні",
+      settings: "Налаштування",
+      account: "Обліковий запис",
+      miscellaneous: "Різне",
+      preferences: "Параметри",
+      help: "Довідка",
+    },
+  },
+  customize_navigation: "Налаштувати навігацію",
+  personal: "Особисте",
+  accordion_navigation_control: "Акордеонна навігація бічної панелі",
+  horizontal_navigation_bar: "Навігація вкладками",
+  show_limited_projects_on_sidebar: "Показувати обмежену кількість проєктів на бічній панелі",
+  enter_number_of_projects: "Введіть кількість проєктів",
+  pin: "Закріпити",
+  unpin: "Відкріпити",
 } as const;
diff --git a/packages/i18n/src/locales/vi-VN/accessibility.ts b/packages/i18n/src/locales/vi-VN/accessibility.ts
index 5a0734c9e..cd14dd61e 100644
--- a/packages/i18n/src/locales/vi-VN/accessibility.ts
+++ b/packages/i18n/src/locales/vi-VN/accessibility.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export default {
   aria_labels: {
     projects_sidebar: {
diff --git a/packages/i18n/src/locales/vi-VN/editor.ts b/packages/i18n/src/locales/vi-VN/editor.ts
index 927e1a9f2..f90361ce4 100644
--- a/packages/i18n/src/locales/vi-VN/editor.ts
+++ b/packages/i18n/src/locales/vi-VN/editor.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export default {} as const;
diff --git a/packages/i18n/src/locales/vi-VN/empty-state.ts b/packages/i18n/src/locales/vi-VN/empty-state.ts
index 5d2a6ce21..0d1146eaf 100644
--- a/packages/i18n/src/locales/vi-VN/empty-state.ts
+++ b/packages/i18n/src/locales/vi-VN/empty-state.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export default {
   common_empty_state: {
     progress: {
diff --git a/packages/i18n/src/locales/vi-VN/translations.ts b/packages/i18n/src/locales/vi-VN/translations.ts
index 4e8018299..62036fbe8 100644
--- a/packages/i18n/src/locales/vi-VN/translations.ts
+++ b/packages/i18n/src/locales/vi-VN/translations.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export default {
   sidebar: {
     projects: "Dự án",
@@ -17,6 +23,7 @@ export default {
     favorites: "Yêu thích",
     pro: "Phiên bản Pro",
     upgrade: "Nâng cấp",
+    stickies: "Ghi chú",
   },
   auth: {
     common: {
@@ -405,7 +412,7 @@ export default {
   docs: "Tài liệu",
   full_changelog: "Nhật ký thay đổi đầy đủ",
   support: "Hỗ trợ",
-  discord: "Discord",
+  forum: "Forum",
   powered_by_plane_pages: "Được hỗ trợ bởi Plane Pages",
   please_select_at_least_one_invitation: "Vui lòng chọn ít nhất một lời mời.",
   please_select_at_least_one_invitation_description:
@@ -1587,6 +1594,7 @@ export default {
         name: "Tên không gian làm việc",
         company_size: "Quy mô công ty",
         url: "URL không gian làm việc",
+        workspace_timezone: "Múi giờ không gian làm việc",
         update_workspace: "Cập nhật không gian làm việc",
         delete_workspace: "Xóa không gian làm việc này",
         delete_workspace_description:
@@ -1979,6 +1987,45 @@ export default {
         primary_button: "Thêm hệ thống ước tính",
       },
     },
+    features: {
+      cycles: {
+        title: "Chu kỳ",
+        short_title: "Chu kỳ",
+        description:
+          "Lên lịch công việc trong các khoảng thời gian linh hoạt thích ứng với nhịp điệu và tốc độ độc đáo của dự án này.",
+        toggle_title: "Bật chu kỳ",
+        toggle_description: "Lập kế hoạch công việc trong khung thời gian tập trung.",
+      },
+      modules: {
+        title: "Mô-đun",
+        short_title: "Mô-đun",
+        description: "Tổ chức công việc thành các dự án phụ với người dẫn đầu và người được phân công chuyên trách.",
+        toggle_title: "Bật mô-đun",
+        toggle_description: "Thành viên dự án sẽ có thể tạo và chỉnh sửa mô-đun.",
+      },
+      views: {
+        title: "Chế độ xem",
+        short_title: "Chế độ xem",
+        description: "Lưu các tùy chọn sắp xếp, bộ lọc và hiển thị tùy chỉnh hoặc chia sẻ chúng với nhóm của bạn.",
+        toggle_title: "Bật chế độ xem",
+        toggle_description: "Thành viên dự án sẽ có thể tạo và chỉnh sửa chế độ xem.",
+      },
+      pages: {
+        title: "Trang",
+        short_title: "Trang",
+        description: "Tạo và chỉnh sửa nội dung tự do: ghi chú, tài liệu, bất cứ thứ gì.",
+        toggle_title: "Bật trang",
+        toggle_description: "Thành viên dự án sẽ có thể tạo và chỉnh sửa trang.",
+      },
+      intake: {
+        title: "Tiếp nhận",
+        short_title: "Tiếp nhận",
+        description:
+          "Cho phép những người không phải thành viên chia sẻ lỗi, phản hồi và đề xuất; mà không làm gián đoạn quy trình làm việc của bạn.",
+        toggle_title: "Bật tiếp nhận",
+        toggle_description: "Cho phép thành viên dự án tạo yêu cầu tiếp nhận trong ứng dụng.",
+      },
+    },
   },
   project_cycles: {
     add_cycle: "Thêm chu kỳ",
diff --git a/packages/i18n/src/locales/zh-CN/accessibility.ts b/packages/i18n/src/locales/zh-CN/accessibility.ts
index d537ef62a..d2a5f334f 100644
--- a/packages/i18n/src/locales/zh-CN/accessibility.ts
+++ b/packages/i18n/src/locales/zh-CN/accessibility.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export default {
   aria_labels: {
     projects_sidebar: {
diff --git a/packages/i18n/src/locales/zh-CN/editor.ts b/packages/i18n/src/locales/zh-CN/editor.ts
index 927e1a9f2..f90361ce4 100644
--- a/packages/i18n/src/locales/zh-CN/editor.ts
+++ b/packages/i18n/src/locales/zh-CN/editor.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export default {} as const;
diff --git a/packages/i18n/src/locales/zh-CN/empty-state.ts b/packages/i18n/src/locales/zh-CN/empty-state.ts
index 607c4e05b..3a3c9c831 100644
--- a/packages/i18n/src/locales/zh-CN/empty-state.ts
+++ b/packages/i18n/src/locales/zh-CN/empty-state.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export default {
   common_empty_state: {
     progress: {
diff --git a/packages/i18n/src/locales/zh-CN/translations.ts b/packages/i18n/src/locales/zh-CN/translations.ts
index a8fd61479..9963936a3 100644
--- a/packages/i18n/src/locales/zh-CN/translations.ts
+++ b/packages/i18n/src/locales/zh-CN/translations.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export default {
   sidebar: {
     projects: "项目",
@@ -17,6 +23,7 @@ export default {
     favorites: "收藏",
     pro: "专业版",
     upgrade: "升级",
+    stickies: "便签",
   },
   auth: {
     common: {
@@ -391,7 +398,7 @@ export default {
   docs: "文档",
   full_changelog: "完整更新日志",
   support: "支持",
-  discord: "Discord",
+  forum: "Forum",
   powered_by_plane_pages: "由Plane Pages提供支持",
   please_select_at_least_one_invitation: "请至少选择一个邀请。",
   please_select_at_least_one_invitation_description: "请至少选择一个加入工作区的邀请。",
@@ -1560,6 +1567,7 @@ export default {
         name: "工作区名称",
         company_size: "公司规模",
         url: "工作区网址",
+        workspace_timezone: "工作区时区",
         update_workspace: "更新工作区",
         delete_workspace: "删除此工作区",
         delete_workspace_description: "删除工作区时，该工作区内的所有数据和资源将被永久删除，且无法恢复。",
@@ -1928,6 +1936,43 @@ export default {
         primary_button: "添加估算系统",
       },
     },
+    features: {
+      cycles: {
+        title: "周期",
+        short_title: "周期",
+        description: "在灵活的时间段内安排工作，以适应该项目独特的节奏和步调。",
+        toggle_title: "启用周期",
+        toggle_description: "在集中的时间段内规划工作。",
+      },
+      modules: {
+        title: "模块",
+        short_title: "模块",
+        description: "将工作组织成具有专门负责人和受让人的子项目。",
+        toggle_title: "启用模块",
+        toggle_description: "项目成员将能够创建和编辑模块。",
+      },
+      views: {
+        title: "视图",
+        short_title: "视图",
+        description: "保存自定义排序、过滤器和显示选项，或与团队共享。",
+        toggle_title: "启用视图",
+        toggle_description: "项目成员将能够创建和编辑视图。",
+      },
+      pages: {
+        title: "页面",
+        short_title: "页面",
+        description: "创建和编辑自由格式的内容：笔记、文档、任何内容。",
+        toggle_title: "启用页面",
+        toggle_description: "项目成员将能够创建和编辑页面。",
+      },
+      intake: {
+        title: "接收",
+        short_title: "接收",
+        description: "让非成员分享错误、反馈和建议；而不会中断您的工作流程。",
+        toggle_title: "启用接收",
+        toggle_description: "允许项目成员在应用中创建接收请求。",
+      },
+    },
   },
   project_cycles: {
     add_cycle: "添加周期",
diff --git a/packages/i18n/src/locales/zh-TW/accessibility.ts b/packages/i18n/src/locales/zh-TW/accessibility.ts
index 4f8999f00..b6e593418 100644
--- a/packages/i18n/src/locales/zh-TW/accessibility.ts
+++ b/packages/i18n/src/locales/zh-TW/accessibility.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export default {
   aria_labels: {
     projects_sidebar: {
diff --git a/packages/i18n/src/locales/zh-TW/editor.ts b/packages/i18n/src/locales/zh-TW/editor.ts
index 927e1a9f2..f90361ce4 100644
--- a/packages/i18n/src/locales/zh-TW/editor.ts
+++ b/packages/i18n/src/locales/zh-TW/editor.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export default {} as const;
diff --git a/packages/i18n/src/locales/zh-TW/empty-state.ts b/packages/i18n/src/locales/zh-TW/empty-state.ts
index cae9d83a3..a710dbef6 100644
--- a/packages/i18n/src/locales/zh-TW/empty-state.ts
+++ b/packages/i18n/src/locales/zh-TW/empty-state.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export default {
   common_empty_state: {
     progress: {
diff --git a/packages/i18n/src/locales/zh-TW/translations.ts b/packages/i18n/src/locales/zh-TW/translations.ts
index c000d72f6..e65359c48 100644
--- a/packages/i18n/src/locales/zh-TW/translations.ts
+++ b/packages/i18n/src/locales/zh-TW/translations.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export default {
   sidebar: {
     projects: "專案",
@@ -17,6 +23,7 @@ export default {
     favorites: "收藏",
     pro: "專業版",
     upgrade: "升級",
+    stickies: "便利貼",
   },
   auth: {
     common: {
@@ -390,7 +397,7 @@ export default {
   docs: "文件",
   full_changelog: "完整更新日誌",
   support: "支援",
-  discord: "Discord",
+  forum: "Forum",
   powered_by_plane_pages: "由 Plane Pages 提供",
   please_select_at_least_one_invitation: "請至少選擇一個邀請。",
   please_select_at_least_one_invitation_description: "請至少選擇一個邀請加入工作區。",
@@ -1561,6 +1568,7 @@ export default {
         name: "工作區名稱",
         company_size: "公司規模",
         url: "工作區網址",
+        workspace_timezone: "工作區時區",
         update_workspace: "更新工作區",
         delete_workspace: "刪除此工作區",
         delete_workspace_description: "刪除工作區時，該工作區內的所有資料和資源都將被永久移除且無法復原。",
@@ -1948,6 +1956,43 @@ export default {
         primary_button: "新增評估系統",
       },
     },
+    features: {
+      cycles: {
+        title: "週期",
+        short_title: "週期",
+        description: "在靈活的時間段內安排工作，以適應該專案獨特的節奏和步調。",
+        toggle_title: "啟用週期",
+        toggle_description: "在集中的時間段內規劃工作。",
+      },
+      modules: {
+        title: "模組",
+        short_title: "模組",
+        description: "將工作組織成具有專門負責人和受讓人的子專案。",
+        toggle_title: "啟用模組",
+        toggle_description: "專案成員將能夠建立和編輯模組。",
+      },
+      views: {
+        title: "檢視",
+        short_title: "檢視",
+        description: "儲存自訂排序、篩選器和顯示選項，或與團隊共享。",
+        toggle_title: "啟用檢視",
+        toggle_description: "專案成員將能夠建立和編輯檢視。",
+      },
+      pages: {
+        title: "頁面",
+        short_title: "頁面",
+        description: "建立和編輯自由格式的內容：筆記、文件、任何內容。",
+        toggle_title: "啟用頁面",
+        toggle_description: "專案成員將能夠建立和編輯頁面。",
+      },
+      intake: {
+        title: "接收",
+        short_title: "接收",
+        description: "讓非成員分享錯誤、回饋和建議；而不會中斷您的工作流程。",
+        toggle_title: "啟用接收",
+        toggle_description: "允許專案成員在應用程式中建立接收請求。",
+      },
+    },
   },
   project_cycles: {
     add_cycle: "新增週期",
diff --git a/packages/i18n/src/store/index.ts b/packages/i18n/src/store/index.ts
index c0366a0ea..27a4bb7fd 100644
--- a/packages/i18n/src/store/index.ts
+++ b/packages/i18n/src/store/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import IntlMessageFormat from "intl-messageformat";
 import { get, merge } from "lodash-es";
 import { makeAutoObservable, runInAction } from "mobx";
diff --git a/packages/i18n/src/types/index.ts b/packages/i18n/src/types/index.ts
index d56ad1e16..9e90d6215 100644
--- a/packages/i18n/src/types/index.ts
+++ b/packages/i18n/src/types/index.ts
@@ -1,2 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./language";
 export * from "./translation";
diff --git a/packages/i18n/src/types/language.ts b/packages/i18n/src/types/language.ts
index 72ab64032..a6a766b42 100644
--- a/packages/i18n/src/types/language.ts
+++ b/packages/i18n/src/types/language.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export type TLanguage =
   | "en"
   | "fr"
diff --git a/packages/i18n/src/types/translation.ts b/packages/i18n/src/types/translation.ts
index b75705552..8c2ec591d 100644
--- a/packages/i18n/src/types/translation.ts
+++ b/packages/i18n/src/types/translation.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export interface ITranslation {
   [key: string]: string | ITranslation;
 }
diff --git a/packages/i18n/tsdown.config.ts b/packages/i18n/tsdown.config.ts
index 78c3dcba8..92959eaf7 100644
--- a/packages/i18n/tsdown.config.ts
+++ b/packages/i18n/tsdown.config.ts
@@ -5,4 +5,5 @@ export default defineConfig({
   format: ["esm"],
   dts: true,
   platform: "neutral",
+  exports: true,
 });
diff --git a/packages/logger/package.json b/packages/logger/package.json
index 2d9d6af42..82a149c6d 100644
--- a/packages/logger/package.json
+++ b/packages/logger/package.json
@@ -1,22 +1,25 @@
 {
   "name": "@plane/logger",
-  "version": "1.2.3",
-  "license": "AGPL-3.0",
-  "description": "Logger shared across multiple apps internally",
+  "version": "1.3.0",
   "private": true,
+  "description": "Logger shared across multiple apps internally",
+  "license": "AGPL-3.0",
   "type": "module",
+  "main": "./dist/index.mjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.mts",
   "exports": {
     ".": "./dist/index.mjs",
     "./package.json": "./package.json"
   },
   "scripts": {
     "build": "tsdown",
-    "dev": "tsdown --watch",
-    "check:lint": "eslint . --max-warnings=0",
+    "dev": "tsdown --watch --no-clean",
+    "check:lint": "oxlint --max-warnings=0 .",
     "check:types": "tsc --noEmit",
-    "check:format": "prettier --check .",
-    "fix:lint": "eslint . --fix --max-warnings=0",
-    "fix:format": "prettier --write .",
+    "check:format": "oxfmt --check .",
+    "fix:lint": "oxlint --fix .",
+    "fix:format": "oxfmt .",
     "clean": "rm -rf .turbo && rm -rf .next && rm -rf node_modules && rm -rf dist"
   },
   "dependencies": {
@@ -30,7 +33,8 @@
     "tsdown": "catalog:",
     "typescript": "catalog:"
   },
-  "main": "./dist/index.mjs",
-  "module": "./dist/index.mjs",
-  "types": "./dist/index.d.mts"
+  "inlinedDependencies": {
+    "@types/express": "4.17.23",
+    "@types/express-serve-static-core": "4.19.6"
+  }
 }
diff --git a/packages/logger/src/config.ts b/packages/logger/src/config.ts
index be951eb3e..db534020b 100644
--- a/packages/logger/src/config.ts
+++ b/packages/logger/src/config.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { LoggerOptions } from "winston";
 import { createLogger, format, transports } from "winston";
 
diff --git a/packages/logger/src/index.ts b/packages/logger/src/index.ts
index 715301ad3..dc15ddae6 100644
--- a/packages/logger/src/index.ts
+++ b/packages/logger/src/index.ts
@@ -1,2 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./config";
 export * from "./middleware";
diff --git a/packages/logger/src/middleware.ts b/packages/logger/src/middleware.ts
index b1e9e68cc..d973b51af 100644
--- a/packages/logger/src/middleware.ts
+++ b/packages/logger/src/middleware.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { RequestHandler } from "express";
 import expressWinston from "express-winston";
 import { transports } from "winston";
diff --git a/packages/propel/.storybook/main.ts b/packages/propel/.storybook/main.ts
index 96607e1b5..89ec3a45d 100644
--- a/packages/propel/.storybook/main.ts
+++ b/packages/propel/.storybook/main.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { StorybookConfig } from "@storybook/react-vite";
 
 import { join, dirname } from "path";
diff --git a/packages/propel/.storybook/manager.ts b/packages/propel/.storybook/manager.ts
index b0d3a4022..014936f59 100644
--- a/packages/propel/.storybook/manager.ts
+++ b/packages/propel/.storybook/manager.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { addons } from "storybook/manager-api";
 import { create } from "storybook/theming";
 
diff --git a/packages/propel/.storybook/preview.ts b/packages/propel/.storybook/preview.ts
index b1402e0bd..bf9957c54 100644
--- a/packages/propel/.storybook/preview.ts
+++ b/packages/propel/.storybook/preview.ts
@@ -1,6 +1,11 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { Preview } from "@storybook/react-vite";
-import "@plane/tailwind-config/global.css";
-import "../src/styles/react-day-picker.css";
+import "./tailwind.css";
 
 const parameters: Preview["parameters"] = {
   controls: {
diff --git a/packages/propel/.storybook/tailwind.css b/packages/propel/.storybook/tailwind.css
new file mode 100644
index 000000000..aca4ed08e
--- /dev/null
+++ b/packages/propel/.storybook/tailwind.css
@@ -0,0 +1,2 @@
+@import "@plane/tailwind-config/index.css";
+@import "../src/styles/react-day-picker.css";
diff --git a/packages/propel/package.json b/packages/propel/package.json
index b12950f37..fd0c162ef 100644
--- a/packages/propel/package.json
+++ b/packages/propel/package.json
@@ -1,25 +1,14 @@
 {
   "name": "@plane/propel",
-  "version": "1.2.3",
+  "version": "1.3.0",
   "private": true,
   "license": "AGPL-3.0",
   "type": "module",
-  "scripts": {
-    "dev": "tsdown --watch",
-    "build": "tsdown",
-    "check:lint": "eslint . --max-warnings=1306",
-    "check:types": "tsc --noEmit",
-    "check:format": "prettier --check .",
-    "fix:lint": "eslint . --fix --max-warnings=1306",
-    "fix:format": "prettier --write .",
-    "clean": "rm -rf .turbo && rm -rf .next && rm -rf node_modules && rm -rf dist",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
-  },
   "exports": {
     "./accordion": "./dist/accordion/index.js",
     "./animated-counter": "./dist/animated-counter/index.js",
     "./avatar": "./dist/avatar/index.js",
+    "./badge": "./dist/badge/index.js",
     "./banner": "./dist/banner/index.js",
     "./button": "./dist/button/index.js",
     "./calendar": "./dist/calendar/index.js",
@@ -39,6 +28,7 @@
     "./emoji-icon-picker": "./dist/emoji-icon-picker/index.js",
     "./emoji-reaction": "./dist/emoji-reaction/index.js",
     "./empty-state": "./dist/empty-state/index.js",
+    "./icon-button": "./dist/icon-button/index.js",
     "./icons": "./dist/icons/index.js",
     "./input": "./dist/input/index.js",
     "./menu": "./dist/menu/index.js",
@@ -56,18 +46,29 @@
     "./tooltip": "./dist/tooltip/index.js",
     "./utils": "./dist/utils/index.js",
     "./package.json": "./package.json",
-    "./styles/fonts.css": "./dist/styles/fonts/index.css",
-    "./styles/fonts": "./dist/styles/fonts/index.css",
     "./styles/react-day-picker.css": "./dist/styles/react-day-picker.css",
     "./styles/react-day-picker": "./dist/styles/react-day-picker.css"
   },
+  "scripts": {
+    "dev": "tsdown --watch --no-clean",
+    "build": "tsdown",
+    "check:lint": "oxlint --max-warnings=3605 .",
+    "check:types": "tsc --noEmit",
+    "check:format": "oxfmt --check .",
+    "fix:lint": "oxlint --fix .",
+    "fix:format": "oxfmt .",
+    "clean": "rm -rf .turbo && rm -rf .next && rm -rf node_modules && rm -rf dist",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
   "dependencies": {
     "@base-ui-components/react": "1.0.0-beta.3",
     "@plane/constants": "workspace:*",
     "@plane/hooks": "workspace:*",
     "@plane/types": "workspace:*",
+    "@plane/utils": "workspace:*",
     "@tanstack/react-table": "^8.21.3",
-    "class-variance-authority": "^0.7.1",
+    "class-variance-authority": "0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
     "framer-motion": "^12.23.0",
@@ -77,7 +78,7 @@
     "react-day-picker": "9.5.0",
     "react-dom": "catalog:",
     "recharts": "^2.15.1",
-    "tailwind-merge": "^3.3.1",
+    "tailwind-merge": "3.4.0",
     "use-font-face-observer": "^1.3.0"
   },
   "devDependencies": {
@@ -88,7 +89,7 @@
     "@storybook/react-vite": "9.1.10",
     "@types/react": "catalog:",
     "@types/react-dom": "catalog:",
-    "storybook": "9.1.10",
+    "storybook": "9.1.19",
     "tsdown": "catalog:",
     "typescript": "catalog:"
   }
diff --git a/packages/propel/postcss.config.js b/packages/propel/postcss.config.js
index 8a677108f..3ad28f15f 100644
--- a/packages/propel/postcss.config.js
+++ b/packages/propel/postcss.config.js
@@ -1 +1,3 @@
-module.exports = require("@plane/tailwind-config/postcss.config.js");
+import postcssConfig from "@plane/tailwind-config/postcss.config.js";
+
+export default postcssConfig;
diff --git a/packages/propel/src/accordion/accordion.stories.tsx b/packages/propel/src/accordion/accordion.stories.tsx
index 5850c5062..4f1dbd1d2 100644
--- a/packages/propel/src/accordion/accordion.stories.tsx
+++ b/packages/propel/src/accordion/accordion.stories.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { Accordion } from "./accordion";
 
@@ -176,7 +182,7 @@ export const AsChildTrigger: Story = {
       <Accordion.Root className="w-96">
         <Accordion.Item value="item-1">
           <Accordion.Trigger asChild>
-            <button className="w-full rounded-md bg-blue-500 px-4 py-2 text-left text-white hover:bg-blue-600">
+            <button className="bg-blue-500 hover:bg-blue-600 w-full rounded-md px-4 py-2 text-left text-on-color">
               Custom Button Trigger
             </button>
           </Accordion.Trigger>
@@ -186,7 +192,7 @@ export const AsChildTrigger: Story = {
         </Accordion.Item>
         <Accordion.Item value="item-2">
           <Accordion.Trigger asChild>
-            <button className="w-full rounded-md bg-green-500 px-4 py-2 text-left text-white hover:bg-green-600">
+            <button className="bg-green-500 hover:bg-green-600 w-full rounded-md px-4 py-2 text-left text-on-color">
               Another Custom Trigger
             </button>
           </Accordion.Trigger>
diff --git a/packages/propel/src/accordion/accordion.tsx b/packages/propel/src/accordion/accordion.tsx
index 7743f73c1..1eebc748d 100644
--- a/packages/propel/src/accordion/accordion.tsx
+++ b/packages/propel/src/accordion/accordion.tsx
@@ -1,6 +1,13 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 import { Accordion as BaseAccordion } from "@base-ui-components/react";
-import { PlusIcon } from "lucide-react";
+
+import { PlusIcon } from "../icons";
 
 export interface AccordionRootProps {
   defaultValue?: string[];
@@ -32,7 +39,7 @@ export interface AccordionContentProps {
 
 function AccordionRoot({ defaultValue = [], allowMultiple = false, className = "", children }: AccordionRootProps) {
   return (
-    <BaseAccordion.Root defaultValue={defaultValue} openMultiple={allowMultiple} className={`text-base ${className}`}>
+    <BaseAccordion.Root defaultValue={defaultValue} openMultiple={allowMultiple} className={`text-14 ${className}`}>
       {children}
     </BaseAccordion.Root>
   );
@@ -48,7 +55,7 @@ function AccordionItem({ value, disabled, className = "", children }: AccordionI
 
 function AccordionTrigger({
   className = "",
-  icon = <PlusIcon aria-hidden="true" className="transition-all ease-out  group-data-[panel-open]:rotate-45" />,
+  icon = <PlusIcon aria-hidden="true" className="transition-all ease-out group-data-[panel-open]:rotate-45" />,
   iconClassName = "",
   children,
   asChild = false,
diff --git a/packages/propel/src/accordion/index.ts b/packages/propel/src/accordion/index.ts
index d236f3b99..d0ab5a8db 100644
--- a/packages/propel/src/accordion/index.ts
+++ b/packages/propel/src/accordion/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./accordion";
diff --git a/packages/propel/src/animated-counter/animated-counter.stories.tsx b/packages/propel/src/animated-counter/animated-counter.stories.tsx
index ac6f43340..5a1a64fa6 100644
--- a/packages/propel/src/animated-counter/animated-counter.stories.tsx
+++ b/packages/propel/src/animated-counter/animated-counter.stories.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useState, useEffect } from "react";
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { AnimatedCounter } from "./animated-counter";
@@ -26,16 +32,16 @@ export const Default: Story = {
       <div className="space-y-6 p-4">
         <div className="flex items-center justify-center gap-6">
           <button
-            className="px-4 py-2 bg-red-500 text-white font-medium rounded-lg hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-400 focus:ring-offset-2 transition-colors shadow-md"
+            className="bg-red-500 hover:bg-red-600 shadow-md rounded-lg px-4 py-2 font-medium text-on-color transition-colors focus:ring-2 focus:ring-danger-strong focus:ring-offset-2 focus:outline-none"
             onClick={() => setCount((prev) => Math.max(0, prev - 1))}
           >
             -1
           </button>
-          <div className="flex items-center justify-center min-w-[60px] h-12 bg-gray-50 border border-gray-200 rounded-lg">
+          <div className="bg-gray-50 border-gray-200 flex h-12 min-w-[60px] items-center justify-center rounded-lg border">
             <AnimatedCounter {...args} count={count} />
           </div>
           <button
-            className="px-4 py-2 bg-green-500 text-white font-medium rounded-lg hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-400 focus:ring-offset-2 transition-colors shadow-md"
+            className="bg-green-500 hover:bg-green-600 shadow-md rounded-lg px-4 py-2 font-medium text-on-color transition-colors focus:ring-2 focus:ring-success-strong focus:ring-offset-2 focus:outline-none"
             onClick={() => setCount((prev) => prev + 1)}
           >
             +1
@@ -54,13 +60,13 @@ export const Sizes: Story = {
       <div className="space-y-6 p-4">
         <div className="flex items-center gap-4">
           <button
-            className="px-3 py-1 bg-custom-background-80 text-sm rounded hover:bg-custom-background-90"
+            className="rounded-sm bg-layer-1 px-3 py-1 text-13 hover:bg-surface-2"
             onClick={() => setCount((prev) => Math.max(0, prev - 1))}
           >
             -1
           </button>
           <button
-            className="px-3 py-1 bg-custom-background-80 text-sm rounded hover:bg-custom-background-90"
+            className="rounded-sm bg-layer-1 px-3 py-1 text-13 hover:bg-surface-2"
             onClick={() => setCount((prev) => prev + 1)}
           >
             +1
@@ -68,20 +74,20 @@ export const Sizes: Story = {
         </div>
         <div className="flex flex-col gap-4">
           <div className="flex items-center gap-4">
-            <span className="text-sm text-custom-text-400 w-20">Small:</span>
-            <div className="flex items-center justify-center min-w-[40px] h-8 bg-custom-background-80 border border-custom-border-200 rounded">
+            <span className="w-20 text-13 text-placeholder">Small:</span>
+            <div className="flex h-8 min-w-[40px] items-center justify-center rounded-sm border border-subtle bg-layer-1">
               <AnimatedCounter count={count} size="sm" />
             </div>
           </div>
           <div className="flex items-center gap-4">
-            <span className="text-sm text-custom-text-400 w-20">Medium:</span>
-            <div className="flex items-center justify-center min-w-[50px] h-10 bg-custom-background-80 border border-custom-border-200 rounded">
+            <span className="w-20 text-13 text-placeholder">Medium:</span>
+            <div className="flex h-10 min-w-[50px] items-center justify-center rounded-sm border border-subtle bg-layer-1">
               <AnimatedCounter count={count} size="md" />
             </div>
           </div>
           <div className="flex items-center gap-4">
-            <span className="text-sm text-custom-text-400 w-20">Large:</span>
-            <div className="flex items-center justify-center min-w-[60px] h-12 bg-custom-background-80 border border-custom-border-200 rounded">
+            <span className="w-20 text-13 text-placeholder">Large:</span>
+            <div className="flex h-12 min-w-[60px] items-center justify-center rounded-sm border border-subtle bg-layer-1">
               <AnimatedCounter count={count} size="lg" />
             </div>
           </div>
@@ -99,19 +105,19 @@ export const LargeNumbers: Story = {
       <div className="space-y-6 p-4">
         <div className="flex items-center gap-4">
           <button
-            className="px-3 py-1 bg-red-500 text-white text-sm rounded hover:bg-red-600"
+            className="bg-red-500 hover:bg-red-600 rounded-sm px-3 py-1 text-13 text-on-color"
             onClick={() => setCount((prev) => Math.max(0, prev - 1000))}
           >
             -1000
           </button>
           <button
-            className="px-3 py-1 bg-green-500 text-white text-sm rounded hover:bg-green-600"
+            className="bg-green-500 hover:bg-green-600 rounded-sm px-3 py-1 text-13 text-on-color"
             onClick={() => setCount((prev) => prev + 1000)}
           >
             +1000
           </button>
         </div>
-        <div className="flex items-center justify-center min-w-[100px] h-12 bg-custom-background-80 border border-custom-border-200 rounded-lg">
+        <div className="flex h-12 min-w-[100px] items-center justify-center rounded-lg border border-subtle bg-layer-1">
           <AnimatedCounter count={count} size="lg" />
         </div>
       </div>
@@ -142,11 +148,11 @@ export const Countdown: Story = {
     return (
       <div className="space-y-6 p-4">
         <div className="flex flex-col items-center gap-4">
-          <div className="flex items-center justify-center min-w-[60px] h-16 bg-custom-background-80 border-2 border-custom-border-200 rounded-lg">
-            <AnimatedCounter count={count} size="lg" className="text-2xl" />
+          <div className="flex h-16 min-w-[60px] items-center justify-center rounded-lg border-2 border-subtle bg-layer-1">
+            <AnimatedCounter count={count} size="lg" className="text-20" />
           </div>
           <button
-            className="px-6 py-2 bg-custom-primary-100 text-white font-medium rounded-lg hover:bg-custom-primary-200"
+            className="rounded-lg bg-accent-primary px-6 py-2 font-medium text-on-color hover:bg-accent-primary/80"
             onClick={handleStart}
             disabled={isRunning}
           >
@@ -173,26 +179,26 @@ export const LiveCounter: Story = {
     return (
       <div className="space-y-6 p-4">
         <div className="flex flex-col items-center gap-4">
-          <div className="flex items-center justify-center min-w-[80px] h-16 bg-custom-background-80 border-2 border-custom-border-200 rounded-lg">
-            <AnimatedCounter count={count} size="lg" className="text-2xl" />
+          <div className="flex h-16 min-w-[80px] items-center justify-center rounded-lg border-2 border-subtle bg-layer-1">
+            <AnimatedCounter count={count} size="lg" className="text-20" />
           </div>
           <div className="flex gap-2">
             <button
-              className="px-4 py-2 bg-green-500 text-white font-medium rounded hover:bg-green-600"
+              className="bg-green-500 hover:bg-green-600 rounded-sm px-4 py-2 font-medium text-on-color"
               onClick={() => setIsRunning(true)}
               disabled={isRunning}
             >
               Start
             </button>
             <button
-              className="px-4 py-2 bg-red-500 text-white font-medium rounded hover:bg-red-600"
+              className="bg-red-500 hover:bg-red-600 rounded-sm px-4 py-2 font-medium text-on-color"
               onClick={() => setIsRunning(false)}
               disabled={!isRunning}
             >
               Stop
             </button>
             <button
-              className="px-4 py-2 bg-gray-500 text-white font-medium rounded hover:bg-gray-600"
+              className="bg-gray-500 hover:bg-gray-600 rounded-sm px-4 py-2 font-medium text-on-color"
               onClick={() => {
                 setIsRunning(false);
                 setCount(0);
@@ -215,49 +221,49 @@ export const MultipleCounters: Story = {
 
     return (
       <div className="space-y-6 p-4">
-        <div className="max-w-md border border-custom-border-200 rounded-lg p-4">
-          <div className="flex items-center justify-between mb-4">
+        <div className="max-w-md rounded-lg border border-subtle p-4">
+          <div className="mb-4 flex items-center justify-between">
             <h3 className="font-medium">Engagement Stats</h3>
           </div>
           <div className="flex gap-4">
-            <div className="flex-1 flex flex-col items-center gap-2">
-              <div className="text-custom-text-400 text-sm">Likes</div>
+            <div className="flex flex-1 flex-col items-center gap-2">
+              <div className="text-13 text-placeholder">Likes</div>
               <div className="flex items-center gap-2">
                 <button
-                  className="w-8 h-8 flex items-center justify-center bg-custom-background-80 rounded hover:bg-custom-background-90"
+                  className="flex h-8 w-8 items-center justify-center rounded-sm bg-layer-1 hover:bg-surface-2"
                   onClick={() => setLikes((prev) => prev + 1)}
                 >
                   +
                 </button>
-                <div className="flex items-center justify-center min-w-[40px] h-10 bg-custom-background-80 border border-custom-border-200 rounded">
+                <div className="flex h-10 min-w-[40px] items-center justify-center rounded-sm border border-subtle bg-layer-1">
                   <AnimatedCounter count={likes} size="md" />
                 </div>
               </div>
             </div>
-            <div className="flex-1 flex flex-col items-center gap-2">
-              <div className="text-custom-text-400 text-sm">Comments</div>
+            <div className="flex flex-1 flex-col items-center gap-2">
+              <div className="text-13 text-placeholder">Comments</div>
               <div className="flex items-center gap-2">
                 <button
-                  className="w-8 h-8 flex items-center justify-center bg-custom-background-80 rounded hover:bg-custom-background-90"
+                  className="flex h-8 w-8 items-center justify-center rounded-sm bg-layer-1 hover:bg-surface-2"
                   onClick={() => setComments((prev) => prev + 1)}
                 >
                   +
                 </button>
-                <div className="flex items-center justify-center min-w-[40px] h-10 bg-custom-background-80 border border-custom-border-200 rounded">
+                <div className="flex h-10 min-w-[40px] items-center justify-center rounded-sm border border-subtle bg-layer-1">
                   <AnimatedCounter count={comments} size="md" />
                 </div>
               </div>
             </div>
-            <div className="flex-1 flex flex-col items-center gap-2">
-              <div className="text-custom-text-400 text-sm">Shares</div>
+            <div className="flex flex-1 flex-col items-center gap-2">
+              <div className="text-13 text-placeholder">Shares</div>
               <div className="flex items-center gap-2">
                 <button
-                  className="w-8 h-8 flex items-center justify-center bg-custom-background-80 rounded hover:bg-custom-background-90"
+                  className="flex h-8 w-8 items-center justify-center rounded-sm bg-layer-1 hover:bg-surface-2"
                   onClick={() => setShares((prev) => prev + 1)}
                 >
                   +
                 </button>
-                <div className="flex items-center justify-center min-w-[40px] h-10 bg-custom-background-80 border border-custom-border-200 rounded">
+                <div className="flex h-10 min-w-[40px] items-center justify-center rounded-sm border border-subtle bg-layer-1">
                   <AnimatedCounter count={shares} size="md" />
                 </div>
               </div>
@@ -277,15 +283,13 @@ export const InBadge: Story = {
       <div className="space-y-6 p-4">
         <div className="flex flex-col items-center gap-4">
           <div className="relative">
-            <button className="px-4 py-2 bg-custom-background-80 border border-custom-border-200 rounded-lg">
-              Notifications
-            </button>
-            <div className="absolute -top-2 -right-2 min-w-[24px] h-6 flex items-center justify-center bg-red-500 text-white rounded-full px-1.5">
-              <AnimatedCounter count={notifications} size="sm" className="text-xs font-medium" />
+            <button className="rounded-lg border border-subtle bg-layer-1 px-4 py-2">Notifications</button>
+            <div className="bg-red-500 absolute -top-2 -right-2 flex h-6 min-w-[24px] items-center justify-center rounded-full px-1.5 text-on-color">
+              <AnimatedCounter count={notifications} size="sm" className="text-11 font-medium" />
             </div>
           </div>
           <button
-            className="px-4 py-2 bg-custom-primary-100 text-white rounded hover:bg-custom-primary-200"
+            className="rounded-sm bg-accent-primary px-4 py-2 text-on-color hover:bg-accent-primary/80"
             onClick={() => setNotifications((prev) => prev + 1)}
           >
             Add Notification
@@ -309,20 +313,17 @@ export const FastAnimation: Story = {
     return (
       <div className="space-y-6 p-4">
         <div className="flex flex-col items-center gap-4">
-          <div className="flex items-center justify-center min-w-[60px] h-12 bg-custom-background-80 border border-custom-border-200 rounded-lg">
+          <div className="flex h-12 min-w-[60px] items-center justify-center rounded-lg border border-subtle bg-layer-1">
             <AnimatedCounter count={count} size="lg" />
           </div>
           <div className="flex gap-2">
             <button
-              className="px-4 py-2 bg-custom-primary-100 text-white rounded hover:bg-custom-primary-200"
+              className="rounded-sm bg-accent-primary px-4 py-2 text-on-color hover:bg-accent-primary/80"
               onClick={incrementFast}
             >
               +10 Fast
             </button>
-            <button
-              className="px-4 py-2 bg-custom-background-80 rounded hover:bg-custom-background-90"
-              onClick={() => setCount(0)}
-            >
+            <button className="rounded-sm bg-layer-1 px-4 py-2 hover:bg-surface-2" onClick={() => setCount(0)}>
               Reset
             </button>
           </div>
diff --git a/packages/propel/src/animated-counter/animated-counter.tsx b/packages/propel/src/animated-counter/animated-counter.tsx
index ed4402adb..dd01fadd8 100644
--- a/packages/propel/src/animated-counter/animated-counter.tsx
+++ b/packages/propel/src/animated-counter/animated-counter.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useState, useEffect } from "react";
 import { cn } from "../utils";
 
@@ -8,9 +14,9 @@ export interface AnimatedCounterProps {
 }
 
 const sizeClasses = {
-  sm: "text-xs",
-  md: "text-sm",
-  lg: "text-base",
+  sm: "text-11",
+  md: "text-13",
+  lg: "text-14",
 };
 
 export function AnimatedCounter({ count, className, size = "md" }: AnimatedCounterProps) {
@@ -44,24 +50,22 @@ export function AnimatedCounter({ count, className, size = "md" }: AnimatedCount
   const sizeClass = sizeClasses[size];
 
   return (
-    <div className={cn("relative inline-flex items-center justify-center overflow-hidden min-w-2", sizeClass)}>
+    <div className={cn("relative inline-flex min-w-2 items-center justify-center overflow-hidden", sizeClass)}>
       {/* Previous number sliding out */}
       {isAnimating && (
         <span
           key={`prev-${animationKey}`}
           className={cn(
             "absolute inset-0 flex items-center justify-center font-medium",
-            "animate-[slideOut_0.25s_ease-out_forwards]",
+            "animate-slide-out",
             direction === "up" && "[--slide-out-dir:-100%]",
             direction === "down" && "[--slide-out-dir:100%]",
-            sizeClass
+            sizeClass,
+            {
+              "animate-fade-out animate-slide-out": isAnimating && direction === "up",
+              "animate-fade-out animate-slide-out-down": isAnimating && direction === "down",
+            }
           )}
-          style={{
-            animation:
-              direction === "up"
-                ? "slideOut 0.25s ease-out forwards, fadeOut 0.25s ease-out forwards"
-                : "slideOutDown 0.25s ease-out forwards, fadeOut 0.25s ease-out forwards",
-          }}
         >
           {prevCount}
         </span>
@@ -72,21 +76,14 @@ export function AnimatedCounter({ count, className, size = "md" }: AnimatedCount
         key={`current-${animationKey}`}
         className={cn(
           "flex items-center justify-center font-medium",
-          isAnimating && "animate-[slideIn_0.25s_ease-out_forwards]",
           !isAnimating && "opacity-100",
           sizeClass,
+          {
+            "animate-slide-in-from-bottom": isAnimating && direction === "up",
+            "animate-slide-in-from-top": isAnimating && direction === "down",
+          },
           className
         )}
-        style={
-          isAnimating
-            ? {
-                animation:
-                  direction === "up"
-                    ? "slideInFromBottom 0.25s ease-out forwards"
-                    : "slideInFromTop 0.25s ease-out forwards",
-              }
-            : undefined
-        }
       >
         {displayCount}
       </span>
diff --git a/packages/propel/src/animated-counter/index.ts b/packages/propel/src/animated-counter/index.ts
index 86b4c39b8..35e0d988d 100644
--- a/packages/propel/src/animated-counter/index.ts
+++ b/packages/propel/src/animated-counter/index.ts
@@ -1,2 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export { AnimatedCounter } from "./animated-counter";
 export type { AnimatedCounterProps } from "./animated-counter";
diff --git a/packages/propel/src/avatar/avatar.stories.tsx b/packages/propel/src/avatar/avatar.stories.tsx
index c392af57d..dac386ed9 100644
--- a/packages/propel/src/avatar/avatar.stories.tsx
+++ b/packages/propel/src/avatar/avatar.stories.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { Avatar } from "./avatar";
 
diff --git a/packages/propel/src/avatar/avatar.tsx b/packages/propel/src/avatar/avatar.tsx
index c7e77a3f5..9fc4f53e8 100644
--- a/packages/propel/src/avatar/avatar.tsx
+++ b/packages/propel/src/avatar/avatar.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 import { Avatar as AvatarPrimitive } from "@base-ui-components/react/avatar";
 import { cn } from "../utils/classname";
@@ -26,31 +32,31 @@ export const getSizeInfo = (size: TAvatarSize) => {
     case "sm":
       return {
         avatarSize: "h-4 w-4",
-        fontSize: "text-xs",
+        fontSize: "text-11",
         spacing: "-space-x-1",
       };
     case "md":
       return {
         avatarSize: "h-5 w-5",
-        fontSize: "text-xs",
+        fontSize: "text-11",
         spacing: "-space-x-1",
       };
     case "base":
       return {
         avatarSize: "h-6 w-6",
-        fontSize: "text-sm",
+        fontSize: "text-13",
         spacing: "-space-x-1.5",
       };
     case "lg":
       return {
         avatarSize: "h-7 w-7",
-        fontSize: "text-sm",
+        fontSize: "text-13",
         spacing: "-space-x-1.5",
       };
     default:
       return {
         avatarSize: "h-5 w-5",
-        fontSize: "text-xs",
+        fontSize: "text-11",
         spacing: "-space-x-1",
       };
   }
@@ -66,7 +72,7 @@ export const getBorderRadius = (shape: "circle" | "square") => {
     case "circle":
       return "rounded-full";
     case "square":
-      return "rounded";
+      return "rounded-sm";
     default:
       return "rounded-full";
   }
@@ -107,8 +113,8 @@ export function Avatar(props: Props) {
         <AvatarPrimitive.Fallback
           className={cn(sizeInfo.fontSize, "grid h-full w-full place-items-center", getBorderRadius(shape), className)}
           style={{
-            backgroundColor: fallbackBackgroundColor ?? "rgba(var(--color-primary-500))",
-            color: fallbackTextColor ?? "#ffffff",
+            backgroundColor: fallbackBackgroundColor ?? "var(--background-color-accent-primary)",
+            color: fallbackTextColor ?? "var(--text-color-on-color)",
           }}
         >
           {fallbackLetter}
diff --git a/packages/propel/src/avatar/index.ts b/packages/propel/src/avatar/index.ts
index 90fdb226b..522264e6d 100644
--- a/packages/propel/src/avatar/index.ts
+++ b/packages/propel/src/avatar/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./avatar";
diff --git a/packages/propel/src/badge/badge.stories.tsx b/packages/propel/src/badge/badge.stories.tsx
new file mode 100644
index 000000000..75e34e96d
--- /dev/null
+++ b/packages/propel/src/badge/badge.stories.tsx
@@ -0,0 +1,154 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Badge } from "./badge";
+
+const meta = {
+  title: "Components/Badge",
+  component: Badge,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  args: {
+    children: "Badge",
+  },
+} satisfies Meta<typeof Badge>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const Neutral: Story = {
+  args: {
+    variant: "neutral",
+    children: "Neutral Badge",
+  },
+};
+
+export const Brand: Story = {
+  args: {
+    variant: "brand",
+    children: "Brand Badge",
+  },
+};
+
+export const Warning: Story = {
+  args: {
+    variant: "warning",
+    children: "Warning Badge",
+  },
+};
+
+export const Success: Story = {
+  args: {
+    variant: "success",
+    children: "Success Badge",
+  },
+};
+
+export const Danger: Story = {
+  args: {
+    variant: "danger",
+    children: "Danger Badge",
+  },
+};
+
+export const Small: Story = {
+  args: {
+    size: "sm",
+    children: "Small Badge",
+  },
+};
+
+export const Base: Story = {
+  args: {
+    size: "base",
+    children: "Base Badge",
+  },
+};
+
+export const Large: Story = {
+  args: {
+    size: "lg",
+    children: "Large Badge",
+  },
+};
+
+export const WithPrependIcon: Story = {
+  args: {
+    prependIcon: (
+      <svg
+        width="16"
+        height="16"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <path d="M12 5v14m-7-7h14" />
+      </svg>
+    ),
+    children: "With Prepend Icon",
+  },
+};
+
+export const WithAppendIcon: Story = {
+  args: {
+    appendIcon: (
+      <svg
+        width="16"
+        height="16"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <path d="M9 5l7 7-7 7" />
+      </svg>
+    ),
+    children: "With Append Icon",
+  },
+};
+
+export const AllVariants: Story = {
+  render() {
+    return (
+      <div className="space-y-4">
+        <div className="space-y-2">
+          <h3 className="text-16 font-semibold">Primary Variants</h3>
+          <div className="flex flex-wrap gap-2">
+            <Badge variant="neutral">Neutral</Badge>
+            <Badge variant="brand">Brand</Badge>
+            <Badge variant="warning">Warning</Badge>
+            <Badge variant="success">Success</Badge>
+            <Badge variant="danger">Danger</Badge>
+          </div>
+        </div>
+      </div>
+    );
+  },
+};
+
+export const AllSizes: Story = {
+  render() {
+    return (
+      <div className="space-y-4">
+        <div className="flex items-center gap-2">
+          <Badge size="sm">Small</Badge>
+          <Badge size="base">Base</Badge>
+          <Badge size="lg">Large</Badge>
+        </div>
+      </div>
+    );
+  },
+};
diff --git a/packages/propel/src/badge/badge.tsx b/packages/propel/src/badge/badge.tsx
new file mode 100644
index 000000000..3d34ba702
--- /dev/null
+++ b/packages/propel/src/badge/badge.tsx
@@ -0,0 +1,28 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+import { cn } from "../utils";
+import type { BadgeProps } from "./helper";
+import { getBadgeIconStyling, badgeVariants } from "./helper";
+
+const Badge = React.forwardRef(function Badge(props: BadgeProps, ref: React.ForwardedRef<HTMLSpanElement>) {
+  const { variant = "neutral", size = "base", prependIcon = null, appendIcon = null, children, ...rest } = props;
+
+  const badgeIconStyle = getBadgeIconStyling(size ?? "base");
+
+  return (
+    <span ref={ref} className={cn(badgeVariants({ variant, size }))} {...rest}>
+      {prependIcon && React.cloneElement(prependIcon, { className: cn("shrink-0", badgeIconStyle), strokeWidth: 2 })}
+      {children}
+      {appendIcon && React.cloneElement(appendIcon, { className: cn("shrink-0", badgeIconStyle), strokeWidth: 2 })}
+    </span>
+  );
+});
+
+Badge.displayName = "plane-ui-badge";
+
+export { Badge };
diff --git a/packages/propel/src/badge/helper.tsx b/packages/propel/src/badge/helper.tsx
new file mode 100644
index 000000000..5f2691bb4
--- /dev/null
+++ b/packages/propel/src/badge/helper.tsx
@@ -0,0 +1,52 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { VariantProps } from "class-variance-authority";
+import { cva } from "class-variance-authority";
+
+export const badgeVariants = cva("inline-flex items-center justify-center gap-1 whitespace-nowrap transition-colors", {
+  variants: {
+    variant: {
+      neutral: "bg-layer-3 text-tertiary",
+      brand: "bg-accent-subtle-hover text-accent-primary",
+      warning: "bg-warning-subtle text-warning-primary",
+      success: "bg-success-subtle-1 text-success-primary",
+      danger: "bg-danger-subtle text-danger-primary",
+    },
+    size: {
+      sm: "h-4 rounded-sm px-1 text-caption-sm-medium",
+      base: "h-5 rounded-md px-1.5 text-caption-sm-medium",
+      lg: "h-6 rounded-md px-2 text-caption-md-medium",
+    },
+  },
+  defaultVariants: {
+    variant: "neutral",
+    size: "base",
+  },
+});
+
+export type BadgeProps = Omit<React.HTMLAttributes<HTMLSpanElement>, "className"> &
+  VariantProps<typeof badgeVariants> & {
+    appendIcon?: React.ReactElement;
+    prependIcon?: React.ReactElement;
+  };
+
+export type TBadgeVariant = NonNullable<BadgeProps["variant"]>;
+export type TBadgeSize = NonNullable<BadgeProps["size"]>;
+
+const badgeIconStyling: Record<TBadgeSize, string> = {
+  sm: "size-3.5",
+  base: "size-3.5",
+  lg: "size-4",
+};
+
+export function getBadgeIconStyling(size: TBadgeSize): string {
+  return badgeIconStyling[size];
+}
+
+export function getBadgeStyling(variant: TBadgeVariant, size: TBadgeSize): string {
+  return badgeVariants({ variant, size });
+}
diff --git a/packages/propel/src/badge/index.ts b/packages/propel/src/badge/index.ts
new file mode 100644
index 000000000..7372c7cb4
--- /dev/null
+++ b/packages/propel/src/badge/index.ts
@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export { Badge } from "./badge";
+export { getBadgeStyling } from "./helper";
+export type { BadgeProps, TBadgeVariant, TBadgeSize } from "./helper";
diff --git a/packages/propel/src/banner/banner.stories.tsx b/packages/propel/src/banner/banner.stories.tsx
index 02b184cee..abf347360 100644
--- a/packages/propel/src/banner/banner.stories.tsx
+++ b/packages/propel/src/banner/banner.stories.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { Banner } from "./banner";
 
@@ -44,7 +50,7 @@ function SuccessIcon() {
       strokeWidth="2"
       strokeLinecap="round"
       strokeLinejoin="round"
-      className="text-green-600"
+      className="text-success-primary"
     >
       <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" />
       <polyline points="22 4 12 14.01 9 11.01" />
@@ -63,7 +69,7 @@ function ErrorIcon() {
       strokeWidth="2"
       strokeLinecap="round"
       strokeLinejoin="round"
-      className="text-red-600"
+      className="text-danger-primary"
     >
       <circle cx="12" cy="12" r="10" />
       <line x1="15" y1="9" x2="9" y2="15" />
@@ -116,7 +122,7 @@ function CloseButton({ onClick }: { onClick?: () => void }) {
   return (
     <button
       onClick={onClick}
-      className="rounded p-1 hover:bg-black/5 dark:hover:bg-white/5 transition-colors"
+      className="rounded-sm p-1 transition-colors hover:bg-black/5 dark:hover:bg-white/5"
       aria-label="Dismiss"
     >
       <svg
diff --git a/packages/propel/src/banner/banner.tsx b/packages/propel/src/banner/banner.tsx
index 680c1bba1..6afab1248 100644
--- a/packages/propel/src/banner/banner.tsx
+++ b/packages/propel/src/banner/banner.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 import { cn } from "../utils";
 import type { TBannerVariant } from "./helper";
@@ -106,7 +112,7 @@ export const Banner = React.forwardRef(function Banner(
       {...props}
     >
       {/* Left side: Icon and Title */}
-      <div className="flex items-center gap-3 flex-1 min-w-0">
+      <div className="flex min-w-0 flex-1 items-center gap-3">
         {renderIcon()}
         {title && <div className={cn(titleStyling)}>{title}</div>}
         {children}
diff --git a/packages/propel/src/banner/helper.tsx b/packages/propel/src/banner/helper.tsx
index cf128a209..1384b3109 100644
--- a/packages/propel/src/banner/helper.tsx
+++ b/packages/propel/src/banner/helper.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export type TBannerVariant = "success" | "error" | "warning" | "info";
 
 export interface IBannerStyling {
@@ -7,15 +13,15 @@ export interface IBannerStyling {
 export const bannerSizeStyling = {
   container: "py-3 px-6 h-12",
   icon: "w-5 h-5",
-  title: "text-sm",
+  title: "text-13",
   action: "gap-2",
 };
 
 // TODO: update this with new color once its implemented
 // Banner variant styling
 export const bannerStyling: IBannerStyling = {
-  success: "bg-green-500/10",
-  error: "bg-red-500/10",
+  success: "bg-success-subtle",
+  error: "bg-danger-subtle",
   warning: "bg-yellow-500/10",
   info: "bg-blue-500/10",
 };
@@ -33,14 +39,14 @@ export const getBannerStyling = (variant: TBannerVariant): string => {
 
 // Get title styling
 export const getBannerTitleStyling = (): string =>
-  `font-medium text-custom-text-200 flex-1 min-w-0 ${bannerSizeStyling.title}`;
+  `font-medium text-secondary flex-1 min-w-0 ${bannerSizeStyling.title}`;
 
 // Get action container styling
 export const getBannerActionStyling = (): string => `flex items-center flex-shrink-0 ${bannerSizeStyling.action}`;
 
 // Get dismiss button styling
 export const getBannerDismissStyling = (): string =>
-  "rounded p-1 hover:bg-custom-background-90 transition-colors flex-shrink-0";
+  "rounded-sm p-1 hover:bg-surface-2 transition-colors flex-shrink-0";
 
 // Get dismiss icon styling
-export const getBannerDismissIconStyling = (): string => "text-custom-text-200";
+export const getBannerDismissIconStyling = (): string => "text-secondary";
diff --git a/packages/propel/src/banner/index.ts b/packages/propel/src/banner/index.ts
index 12d0a82b4..1b8f7995e 100644
--- a/packages/propel/src/banner/index.ts
+++ b/packages/propel/src/banner/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export { Banner } from "./banner";
 export type { BannerProps, BannerVariant } from "./banner";
 export type { TBannerVariant } from "./helper";
diff --git a/packages/propel/src/button/button.stories.tsx b/packages/propel/src/button/button.stories.tsx
index d0e445364..3a42c9352 100644
--- a/packages/propel/src/button/button.stories.tsx
+++ b/packages/propel/src/button/button.stories.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { Button } from "./button";
 
@@ -25,73 +31,45 @@ export const Primary: Story = {
   },
 };
 
-export const AccentPrimary: Story = {
+export const ErrorFill: Story = {
   args: {
-    variant: "accent-primary",
-    children: "Accent Primary Button",
+    variant: "error-fill",
+    children: "Error Button",
   },
 };
 
-export const OutlinePrimary: Story = {
+export const ErrorOutline: Story = {
   args: {
-    variant: "outline-primary",
-    children: "Outline Primary Button",
+    variant: "error-outline",
+    children: "Error Outline Button",
   },
 };
 
-export const NeutralPrimary: Story = {
+export const Secondary: Story = {
   args: {
-    variant: "neutral-primary",
-    children: "Neutral Primary Button",
+    variant: "secondary",
+    children: "Secondary Button",
   },
 };
 
-export const LinkPrimary: Story = {
+export const Tertiary: Story = {
   args: {
-    variant: "link-primary",
-    children: "Link Primary Button",
+    variant: "tertiary",
+    children: "Tertiary Button",
   },
 };
 
-export const Danger: Story = {
+export const Ghost: Story = {
   args: {
-    variant: "danger",
-    children: "Danger Button",
+    variant: "ghost",
+    children: "Ghost Button",
   },
 };
 
-export const AccentDanger: Story = {
+export const Link: Story = {
   args: {
-    variant: "accent-danger",
-    children: "Accent Danger Button",
-  },
-};
-
-export const OutlineDanger: Story = {
-  args: {
-    variant: "outline-danger",
-    children: "Outline Danger Button",
-  },
-};
-
-export const LinkDanger: Story = {
-  args: {
-    variant: "link-danger",
-    children: "Link Danger Button",
-  },
-};
-
-export const TertiaryDanger: Story = {
-  args: {
-    variant: "tertiary-danger",
-    children: "Tertiary Danger Button",
-  },
-};
-
-export const LinkNeutral: Story = {
-  args: {
-    variant: "link-neutral",
-    children: "Link Neutral Button",
+    variant: "link",
+    children: "Link Button",
   },
 };
 
@@ -102,10 +80,10 @@ export const Small: Story = {
   },
 };
 
-export const Medium: Story = {
+export const Base: Story = {
   args: {
-    size: "md",
-    children: "Medium Button",
+    size: "base",
+    children: "Base Button",
   },
 };
 
@@ -182,29 +160,15 @@ export const AllVariants: Story = {
     return (
       <div className="space-y-4">
         <div className="space-y-2">
-          <h3 className="text-lg font-semibold">Primary Variants</h3>
+          <h3 className="text-16 font-semibold">Primary Variants</h3>
           <div className="flex flex-wrap gap-2">
             <Button variant="primary">Primary</Button>
-            <Button variant="accent-primary">Accent Primary</Button>
-            <Button variant="outline-primary">Outline Primary</Button>
-            <Button variant="neutral-primary">Neutral Primary</Button>
-            <Button variant="link-primary">Link Primary</Button>
-          </div>
-        </div>
-        <div className="space-y-2">
-          <h3 className="text-lg font-semibold">Danger Variants</h3>
-          <div className="flex flex-wrap gap-2">
-            <Button variant="danger">Danger</Button>
-            <Button variant="accent-danger">Accent Danger</Button>
-            <Button variant="outline-danger">Outline Danger</Button>
-            <Button variant="link-danger">Link Danger</Button>
-            <Button variant="tertiary-danger">Tertiary Danger</Button>
-          </div>
-        </div>
-        <div className="space-y-2">
-          <h3 className="text-lg font-semibold">Other Variants</h3>
-          <div className="flex flex-wrap gap-2">
-            <Button variant="link-neutral">Link Neutral</Button>
+            <Button variant="error-fill">Error Fill</Button>
+            <Button variant="error-outline">Error Outline</Button>
+            <Button variant="secondary">Secondary</Button>
+            <Button variant="tertiary">Tertiary</Button>
+            <Button variant="ghost">Ghost</Button>
+            <Button variant="link">Link</Button>
           </div>
         </div>
       </div>
@@ -218,7 +182,7 @@ export const AllSizes: Story = {
       <div className="space-y-4">
         <div className="flex items-center gap-2">
           <Button size="sm">Small</Button>
-          <Button size="md">Medium</Button>
+          <Button size="base">Base</Button>
           <Button size="lg">Large</Button>
           <Button size="xl">Extra Large</Button>
         </div>
@@ -232,7 +196,7 @@ export const AllStates: Story = {
     return (
       <div className="space-y-4">
         <div className="space-y-2">
-          <h3 className="text-lg font-semibold">Button States</h3>
+          <h3 className="text-16 font-semibold">Button States</h3>
           <div className="flex flex-wrap gap-2">
             <Button>Default</Button>
             <Button loading>Loading</Button>
diff --git a/packages/propel/src/button/button.tsx b/packages/propel/src/button/button.tsx
index 45402f257..6055c75d8 100644
--- a/packages/propel/src/button/button.tsx
+++ b/packages/propel/src/button/button.tsx
@@ -1,23 +1,18 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 import { cn } from "../utils";
-import type { TButtonVariant, TButtonSizes } from "./helper";
-import { getIconStyling, getButtonStyling } from "./helper";
-
-export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  variant?: TButtonVariant;
-  size?: TButtonSizes;
-  className?: string;
-  loading?: boolean;
-  disabled?: boolean;
-  appendIcon?: any;
-  prependIcon?: any;
-  children: React.ReactNode;
-}
+import type { ButtonProps } from "./helper";
+import { getIconStyling, buttonVariants } from "./helper";
 
 const Button = React.forwardRef(function Button(props: ButtonProps, ref: React.ForwardedRef<HTMLButtonElement>) {
   const {
     variant = "primary",
-    size = "md",
+    size = "base",
     className = "",
     type = "button",
     loading = false,
@@ -28,14 +23,19 @@ const Button = React.forwardRef(function Button(props: ButtonProps, ref: React.F
     ...rest
   } = props;
 
-  const buttonStyle = getButtonStyling(variant, size, disabled || loading);
-  const buttonIconStyle = getIconStyling(size);
+  const buttonIconStyle = getIconStyling(size ?? "base");
 
   return (
-    <button ref={ref} type={type} className={cn(buttonStyle, className)} disabled={disabled || loading} {...rest}>
-      {prependIcon && <div className={buttonIconStyle}>{React.cloneElement(prependIcon, { strokeWidth: 2 })}</div>}
+    <button
+      ref={ref}
+      type={type}
+      className={cn(buttonVariants({ variant, size }), className)}
+      disabled={disabled || loading}
+      {...rest}
+    >
+      {prependIcon && React.cloneElement(prependIcon, { className: cn("shrink-0", buttonIconStyle), strokeWidth: 2 })}
       {children}
-      {appendIcon && <div className={buttonIconStyle}>{React.cloneElement(appendIcon, { strokeWidth: 2 })}</div>}
+      {appendIcon && React.cloneElement(appendIcon, { className: cn("shrink-0", buttonIconStyle), strokeWidth: 2 })}
     </button>
   );
 });
diff --git a/packages/propel/src/button/helper.tsx b/packages/propel/src/button/helper.tsx
index 4a823aad7..18130b113 100644
--- a/packages/propel/src/button/helper.tsx
+++ b/packages/propel/src/button/helper.tsx
@@ -1,126 +1,66 @@
-export type TButtonVariant =
-  | "primary"
-  | "accent-primary"
-  | "outline-primary"
-  | "neutral-primary"
-  | "link-primary"
-  | "danger"
-  | "accent-danger"
-  | "outline-danger"
-  | "link-danger"
-  | "tertiary-danger"
-  | "link-neutral";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
 
-export type TButtonSizes = "sm" | "md" | "lg" | "xl";
+import type { VariantProps } from "class-variance-authority";
+import { cva } from "class-variance-authority";
 
-export interface IButtonStyling {
-  [key: string]: {
-    default: string;
-    hover: string;
-    pressed: string;
-    disabled: string;
+export const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-1 whitespace-nowrap transition-colors focus-visible:outline-none disabled:pointer-events-none",
+  {
+    variants: {
+      variant: {
+        primary:
+          "bg-accent-primary text-on-color hover:bg-accent-primary-hover active:bg-accent-primary-active disabled:bg-layer-disabled disabled:text-on-color-disabled",
+        "error-fill":
+          "bg-danger-primary text-on-color hover:bg-danger-primary-hover active:bg-danger-primary-active disabled:bg-layer-disabled disabled:text-disabled",
+        "error-outline":
+          "border border-danger-strong bg-layer-2 text-danger-secondary hover:bg-danger-subtle active:bg-danger-subtle-hover disabled:border-subtle-1 disabled:bg-layer-2 disabled:text-disabled",
+        secondary:
+          "border border-strong bg-layer-2 text-secondary shadow-raised-100 hover:bg-layer-2-hover active:bg-layer-2-active disabled:border-subtle-1 disabled:bg-layer-transparent disabled:text-disabled",
+        tertiary:
+          "bg-layer-3 text-secondary hover:bg-layer-3-hover active:bg-layer-3-active disabled:bg-layer-transparent disabled:text-disabled",
+        ghost:
+          "bg-layer-transparent text-secondary hover:bg-layer-transparent-hover focus:bg-layer-transparent-active active:bg-layer-transparent-active disabled:bg-layer-transparent disabled:text-disabled",
+        link: "px-0 text-link-primary underline hover:text-link-primary-hover focus:text-link-primary-hover active:text-link-primary-hover disabled:text-disabled",
+      },
+      size: {
+        sm: "h-5 rounded-sm px-1.5 text-caption-md-medium",
+        base: "h-6 rounded-md px-2 text-body-xs-medium",
+        lg: "h-7 rounded-md px-2 text-body-xs-medium",
+        xl: "h-8 rounded-md px-2 text-body-sm-medium",
+      },
+    },
+    defaultVariants: {
+      variant: "primary",
+      size: "base",
+    },
+  }
+);
+
+export type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> &
+  VariantProps<typeof buttonVariants> & {
+    appendIcon?: React.ReactElement;
+    loading?: boolean;
+    prependIcon?: React.ReactElement;
   };
-}
 
-enum buttonSizeStyling {
-  sm = `px-3 py-1.5 font-medium text-xs rounded flex items-center gap-1.5 whitespace-nowrap transition-all justify-center`,
-  md = `px-4 py-1.5 font-medium text-sm rounded flex items-center gap-1.5 whitespace-nowrap transition-all justify-center`,
-  lg = `px-5 py-2 font-medium text-sm rounded flex items-center gap-1.5 whitespace-nowrap transition-all justify-center`,
-  xl = `px-5 py-3.5 font-medium text-sm rounded flex items-center gap-1.5 whitespace-nowrap transition-all justify-center`,
-}
+export type TButtonVariant = NonNullable<ButtonProps["variant"]>;
+export type TButtonSize = NonNullable<ButtonProps["size"]>;
 
-enum buttonIconStyling {
-  sm = "h-3 w-3 flex justify-center items-center overflow-hidden my-0.5 flex-shrink-0",
-  md = "h-3.5 w-3.5 flex justify-center items-center overflow-hidden my-0.5 flex-shrink-0",
-  lg = "h-4 w-4 flex justify-center items-center overflow-hidden my-0.5 flex-shrink-0",
-  xl = "h-4 w-4 flex justify-center items-center overflow-hidden my-0.5 flex-shrink-0 ",
-}
-
-export const buttonStyling: IButtonStyling = {
-  primary: {
-    default: `text-white bg-custom-primary-100`,
-    hover: `hover:bg-custom-primary-200`,
-    pressed: `focus:text-custom-brand-40 focus:bg-custom-primary-200`,
-    disabled: `cursor-not-allowed !bg-custom-primary-60 hover:bg-custom-primary-60`,
-  },
-  "accent-primary": {
-    default: `bg-custom-primary-100/20 text-custom-primary-100`,
-    hover: `hover:bg-custom-primary-100/10 hover:text-custom-primary-200`,
-    pressed: `focus:bg-custom-primary-100/10`,
-    disabled: `cursor-not-allowed !text-custom-primary-60`,
-  },
-  "outline-primary": {
-    default: `text-custom-primary-100 bg-transparent border border-custom-primary-100`,
-    hover: `hover:bg-custom-primary-100/20`,
-    pressed: `focus:text-custom-primary-100 focus:bg-custom-primary-100/30`,
-    disabled: `cursor-not-allowed !text-custom-primary-60 !border-custom-primary-60 `,
-  },
-  "neutral-primary": {
-    default: `text-custom-text-200 bg-custom-background-100 border border-custom-border-200`,
-    hover: `hover:bg-custom-background-90`,
-    pressed: `focus:text-custom-text-300 focus:bg-custom-background-90`,
-    disabled: `cursor-not-allowed !text-custom-text-400`,
-  },
-  "link-primary": {
-    default: `text-custom-primary-100 bg-custom-background-100`,
-    hover: `hover:text-custom-primary-200`,
-    pressed: `focus:text-custom-primary-80 `,
-    disabled: `cursor-not-allowed !text-custom-primary-60`,
-  },
-
-  danger: {
-    default: `text-white bg-red-500`,
-    hover: ` hover:bg-red-600`,
-    pressed: `focus:text-red-200 focus:bg-red-600`,
-    disabled: `cursor-not-allowed !bg-red-300`,
-  },
-  "accent-danger": {
-    default: `text-red-500 bg-red-50`,
-    hover: `hover:text-red-600 hover:bg-red-100`,
-    pressed: `focus:text-red-500 focus:bg-red-100`,
-    disabled: `cursor-not-allowed !text-red-300`,
-  },
-  "outline-danger": {
-    default: `text-red-500 bg-transparent border border-red-500`,
-    hover: `hover:text-red-400 hover:border-red-400`,
-    pressed: `focus:text-red-400 focus:border-red-400`,
-    disabled: `cursor-not-allowed !text-red-300 !border-red-300`,
-  },
-  "link-danger": {
-    default: `text-red-500 bg-custom-background-100`,
-    hover: `hover:text-red-400`,
-    pressed: `focus:text-red-400`,
-    disabled: `cursor-not-allowed !text-red-300`,
-  },
-  "tertiary-danger": {
-    default: `text-red-500 bg-custom-background-100 border border-red-200`,
-    hover: `hover:bg-red-50 hover:border-red-300`,
-    pressed: `focus:text-red-400`,
-    disabled: `cursor-not-allowed !text-red-300`,
-  },
-  "link-neutral": {
-    default: `text-custom-text-300`,
-    hover: `hover:text-custom-text-200`,
-    pressed: `focus:text-custom-text-100`,
-    disabled: `cursor-not-allowed !text-custom-text-400`,
-  },
+const buttonIconStyling: Record<TButtonSize, string> = {
+  sm: "size-3.5",
+  base: "size-3.5",
+  lg: "size-4",
+  xl: "size-4 ",
 };
 
-export const getButtonStyling = (variant: TButtonVariant, size: TButtonSizes, disabled: boolean = false): string => {
-  let tempVariant: string = ``;
-  const currentVariant = buttonStyling[variant];
+export function getIconStyling(size: TButtonSize): string {
+  return buttonIconStyling[size];
+}
 
-  tempVariant = `${currentVariant.default} ${disabled ? currentVariant.disabled : currentVariant.hover} ${
-    currentVariant.pressed
-  }`;
-
-  let tempSize: string = ``;
-  if (size) tempSize = buttonSizeStyling[size];
-  return `${tempVariant} ${tempSize}`;
-};
-
-export const getIconStyling = (size: TButtonSizes): string => {
-  let icon: string = ``;
-  if (size) icon = buttonIconStyling[size];
-  return icon;
-};
+export function getButtonStyling(variant: TButtonVariant, size: TButtonSize): string {
+  return buttonVariants({ variant, size });
+}
diff --git a/packages/propel/src/button/index.ts b/packages/propel/src/button/index.ts
index 9596f2440..95ba2dab4 100644
--- a/packages/propel/src/button/index.ts
+++ b/packages/propel/src/button/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export { Button } from "./button";
-export * from "./helper";
-export type { ButtonProps } from "./button";
+export { getButtonStyling } from "./helper";
+export type { ButtonProps, TButtonVariant, TButtonSize } from "./helper";
diff --git a/packages/propel/src/calendar/calendar.stories.tsx b/packages/propel/src/calendar/calendar.stories.tsx
index 2a70fbfb6..a6a7a7a3f 100644
--- a/packages/propel/src/calendar/calendar.stories.tsx
+++ b/packages/propel/src/calendar/calendar.stories.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useState } from "react";
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import type { DateRange } from "react-day-picker";
diff --git a/packages/propel/src/calendar/index.ts b/packages/propel/src/calendar/index.ts
index 33709fd2b..dc603cd89 100644
--- a/packages/propel/src/calendar/index.ts
+++ b/packages/propel/src/calendar/index.ts
@@ -1,2 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./root";
 export type { Matcher, DateRange } from "react-day-picker";
diff --git a/packages/propel/src/calendar/root.tsx b/packages/propel/src/calendar/root.tsx
index 480efd97b..eb962064b 100644
--- a/packages/propel/src/calendar/root.tsx
+++ b/packages/propel/src/calendar/root.tsx
@@ -1,6 +1,12 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 import { DayPicker } from "react-day-picker";
-import { ChevronLeftIcon } from "../icons";
+import { ChevronLeftIcon } from "../icons/arrows/chevron-left";
 
 import { cn } from "../utils";
 
diff --git a/packages/propel/src/card/card.stories.tsx b/packages/propel/src/card/card.stories.tsx
index 62ae0e4bb..03927c21a 100644
--- a/packages/propel/src/card/card.stories.tsx
+++ b/packages/propel/src/card/card.stories.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { Card, ECardVariant, ECardSpacing, ECardDirection } from "./card";
 
@@ -11,8 +17,8 @@ const meta = {
   args: {
     children: (
       <>
-        <h3 className="text-lg font-semibold">Card Title</h3>
-        <p className="text-sm text-gray-600">This is a default card with shadow and large spacing.</p>
+        <h3 className="text-16 font-semibold">Card Title</h3>
+        <p className="text-gray-600 text-13">This is a default card with shadow and large spacing.</p>
       </>
     ),
   },
@@ -28,8 +34,8 @@ export const WithShadow: Story = {
     variant: ECardVariant.WITH_SHADOW,
     children: (
       <>
-        <h3 className="text-lg font-semibold">Card with Shadow</h3>
-        <p className="text-sm text-gray-600">Hover over this card to see the shadow effect.</p>
+        <h3 className="text-16 font-semibold">Card with Shadow</h3>
+        <p className="text-gray-600 text-13">Hover over this card to see the shadow effect.</p>
       </>
     ),
   },
@@ -40,8 +46,8 @@ export const WithoutShadow: Story = {
     variant: ECardVariant.WITHOUT_SHADOW,
     children: (
       <>
-        <h3 className="text-lg font-semibold">Card without Shadow</h3>
-        <p className="text-sm text-gray-600">This card has no shadow effect on hover.</p>
+        <h3 className="text-16 font-semibold">Card without Shadow</h3>
+        <p className="text-gray-600 text-13">This card has no shadow effect on hover.</p>
       </>
     ),
   },
@@ -52,8 +58,8 @@ export const SmallSpacing: Story = {
     spacing: ECardSpacing.SM,
     children: (
       <>
-        <h3 className="text-lg font-semibold">Small Spacing</h3>
-        <p className="text-sm text-gray-600">This card uses small spacing (p-4).</p>
+        <h3 className="text-16 font-semibold">Small Spacing</h3>
+        <p className="text-gray-600 text-13">This card uses small spacing (p-4).</p>
       </>
     ),
   },
@@ -64,8 +70,8 @@ export const LargeSpacing: Story = {
     spacing: ECardSpacing.LG,
     children: (
       <>
-        <h3 className="text-lg font-semibold">Large Spacing</h3>
-        <p className="text-sm text-gray-600">This card uses large spacing (p-6).</p>
+        <h3 className="text-16 font-semibold">Large Spacing</h3>
+        <p className="text-gray-600 text-13">This card uses large spacing (p-6).</p>
       </>
     ),
   },
@@ -76,9 +82,9 @@ export const ColumnDirection: Story = {
     direction: ECardDirection.COLUMN,
     children: (
       <>
-        <h3 className="text-lg font-semibold">Column Direction</h3>
-        <p className="text-sm text-gray-600">Content is arranged vertically.</p>
-        <button className="rounded bg-blue-500 px-4 py-2 text-white">Action</button>
+        <h3 className="text-16 font-semibold">Column Direction</h3>
+        <p className="text-gray-600 text-13">Content is arranged vertically.</p>
+        <button className="bg-blue-500 rounded-sm px-4 py-2 text-on-color">Action</button>
       </>
     ),
   },
@@ -90,11 +96,11 @@ export const RowDirection: Story = {
     children: (
       <>
         <div className="flex-shrink-0">
-          <div className="h-12 w-12 rounded bg-blue-500" />
+          <div className="bg-blue-500 h-12 w-12 rounded-sm" />
         </div>
         <div className="flex-1">
-          <h3 className="text-lg font-semibold">Row Direction</h3>
-          <p className="text-sm text-gray-600">Content is arranged horizontally.</p>
+          <h3 className="text-16 font-semibold">Row Direction</h3>
+          <p className="text-gray-600 text-13">Content is arranged horizontally.</p>
         </div>
       </>
     ),
@@ -108,12 +114,12 @@ export const ProductCard: Story = {
     direction: ECardDirection.COLUMN,
     children: (
       <>
-        <div className="h-48 w-full rounded bg-gray-200" />
-        <h3 className="text-xl font-bold">Product Name</h3>
-        <p className="text-sm text-gray-600">A brief description of the product goes here.</p>
+        <div className="bg-gray-200 h-48 w-full rounded-sm" />
+        <h3 className="text-18 font-bold">Product Name</h3>
+        <p className="text-gray-600 text-13">A brief description of the product goes here.</p>
         <div className="flex items-center justify-between">
-          <span className="text-lg font-semibold">$99.99</span>
-          <button className="rounded bg-blue-500 px-4 py-2 text-white hover:bg-blue-600">Add to Cart</button>
+          <span className="text-16 font-semibold">$99.99</span>
+          <button className="bg-blue-500 hover:bg-blue-600 rounded-sm px-4 py-2 text-on-color">Add to Cart</button>
         </div>
       </>
     ),
@@ -127,11 +133,11 @@ export const UserCard: Story = {
     direction: ECardDirection.ROW,
     children: (
       <>
-        <div className="h-16 w-16 flex-shrink-0 rounded-full bg-blue-500" />
+        <div className="bg-blue-500 h-16 w-16 flex-shrink-0 rounded-full" />
         <div className="flex-1">
-          <h3 className="text-lg font-semibold">John Doe</h3>
-          <p className="text-sm text-gray-600">Software Engineer</p>
-          <p className="text-xs text-gray-500">john.doe@example.com</p>
+          <h3 className="text-16 font-semibold">John Doe</h3>
+          <p className="text-gray-600 text-13">Software Engineer</p>
+          <p className="text-gray-500 text-11">john.doe@example.com</p>
         </div>
       </>
     ),
@@ -147,9 +153,9 @@ export const NotificationCard: Story = {
       <>
         <div className="flex items-start justify-between">
           <h4 className="font-semibold">New Message</h4>
-          <span className="text-xs text-gray-500">2m ago</span>
+          <span className="text-gray-500 text-11">2m ago</span>
         </div>
-        <p className="text-sm text-gray-600">You have received a new message from Alice.</p>
+        <p className="text-gray-600 text-13">You have received a new message from Alice.</p>
       </>
     ),
   },
@@ -161,11 +167,11 @@ export const AllVariants: Story = {
       <div className="space-y-4">
         <Card variant={ECardVariant.WITH_SHADOW}>
           <h3 className="font-semibold">With Shadow</h3>
-          <p className="text-sm text-gray-600">Hover to see the shadow effect</p>
+          <p className="text-gray-600 text-13">Hover to see the shadow effect</p>
         </Card>
         <Card variant={ECardVariant.WITHOUT_SHADOW}>
           <h3 className="font-semibold">Without Shadow</h3>
-          <p className="text-sm text-gray-600">No shadow on hover</p>
+          <p className="text-gray-600 text-13">No shadow on hover</p>
         </Card>
       </div>
     );
@@ -178,11 +184,11 @@ export const AllSpacings: Story = {
       <div className="space-y-4">
         <Card spacing={ECardSpacing.SM}>
           <h3 className="font-semibold">Small Spacing (p-4)</h3>
-          <p className="text-sm text-gray-600">Compact padding</p>
+          <p className="text-gray-600 text-13">Compact padding</p>
         </Card>
         <Card spacing={ECardSpacing.LG}>
           <h3 className="font-semibold">Large Spacing (p-6)</h3>
-          <p className="text-sm text-gray-600">More generous padding</p>
+          <p className="text-gray-600 text-13">More generous padding</p>
         </Card>
       </div>
     );
@@ -195,14 +201,14 @@ export const AllDirections: Story = {
       <div className="space-y-4">
         <Card direction={ECardDirection.COLUMN}>
           <h3 className="font-semibold">Column Direction</h3>
-          <p className="text-sm text-gray-600">Vertical layout</p>
-          <button className="w-fit rounded bg-blue-500 px-4 py-2 text-white">Button</button>
+          <p className="text-gray-600 text-13">Vertical layout</p>
+          <button className="bg-blue-500 w-fit rounded-sm px-4 py-2 text-on-color">Button</button>
         </Card>
         <Card direction={ECardDirection.ROW}>
-          <div className="h-12 w-12 flex-shrink-0 rounded bg-blue-500" />
+          <div className="bg-blue-500 h-12 w-12 flex-shrink-0 rounded-sm" />
           <div>
             <h3 className="font-semibold">Row Direction</h3>
-            <p className="text-sm text-gray-600">Horizontal layout</p>
+            <p className="text-gray-600 text-13">Horizontal layout</p>
           </div>
         </Card>
       </div>
diff --git a/packages/propel/src/card/card.tsx b/packages/propel/src/card/card.tsx
index 90223e2ae..302750098 100644
--- a/packages/propel/src/card/card.tsx
+++ b/packages/propel/src/card/card.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 import { cn } from "../utils/classname";
 import type { TCardDirection, TCardSpacing, TCardVariant } from "./helper";
diff --git a/packages/propel/src/card/helper.tsx b/packages/propel/src/card/helper.tsx
index 8b80d0d93..cc914c5da 100644
--- a/packages/propel/src/card/helper.tsx
+++ b/packages/propel/src/card/helper.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export enum ECardVariant {
   WITHOUT_SHADOW = "without-shadow",
   WITH_SHADOW = "with-shadow",
@@ -18,11 +24,10 @@ export interface ICardProperties {
   [key: string]: string;
 }
 
-const DEFAULT_STYLE =
-  "bg-custom-background-100 rounded-lg border-[0.5px] border-custom-border-200 w-full flex flex-col";
+const DEFAULT_STYLE = "bg-surface-1 rounded-lg border-[0.5px] border-subtle w-full flex flex-col";
 export const containerStyle: ICardProperties = {
   [ECardVariant.WITHOUT_SHADOW]: "",
-  [ECardVariant.WITH_SHADOW]: "hover:shadow-custom-shadow-4xl duration-300",
+  [ECardVariant.WITH_SHADOW]: "hover:shadow-raised-200 duration-300",
 };
 export const spacings = {
   [ECardSpacing.SM]: "p-4",
diff --git a/packages/propel/src/card/index.ts b/packages/propel/src/card/index.ts
index 1d243e763..4260f8508 100644
--- a/packages/propel/src/card/index.ts
+++ b/packages/propel/src/card/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./card";
diff --git a/packages/propel/src/charts/area-chart/index.ts b/packages/propel/src/charts/area-chart/index.ts
index 1efe34c51..d98033459 100644
--- a/packages/propel/src/charts/area-chart/index.ts
+++ b/packages/propel/src/charts/area-chart/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./root";
diff --git a/packages/propel/src/charts/area-chart/root.tsx b/packages/propel/src/charts/area-chart/root.tsx
index 02261b53b..9999c3d0b 100644
--- a/packages/propel/src/charts/area-chart/root.tsx
+++ b/packages/propel/src/charts/area-chart/root.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React, { useMemo, useState } from "react";
 import { Area, Legend, ResponsiveContainer, Tooltip, XAxis, YAxis, Line, ComposedChart, CartesianGrid } from "recharts";
 // plane imports
@@ -112,7 +118,7 @@ export const AreaChart = React.memo(function AreaChart<K extends string, T exten
             left: margin?.left === undefined ? 20 : margin.left,
           }}
         >
-          <CartesianGrid stroke="rgba(var(--color-border-100), 0.8)" vertical={false} />
+          <CartesianGrid stroke="var(--border-color-subtle)" vertical={false} />
           <XAxis
             dataKey={xAxis.key}
             tick={(props) => {
@@ -163,7 +169,7 @@ export const AreaChart = React.memo(function AreaChart<K extends string, T exten
           {showTooltip && (
             <Tooltip
               cursor={{
-                stroke: "rgba(var(--color-text-300))",
+                stroke: "var(--text-color-tertiary)",
                 strokeDasharray: "4 4",
               }}
               wrapperStyle={{
diff --git a/packages/propel/src/charts/bar-chart/bar.tsx b/packages/propel/src/charts/bar-chart/bar.tsx
index f5887b58e..1df9c2188 100644
--- a/packages/propel/src/charts/bar-chart/bar.tsx
+++ b/packages/propel/src/charts/bar-chart/bar.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import React from "react";
 // plane imports
@@ -10,6 +16,7 @@ const BAR_TOP_BORDER_RADIUS = 4; // Border radius for the top of bars
 const BAR_BOTTOM_BORDER_RADIUS = 4; // Border radius for the bottom of bars
 const DEFAULT_LOLLIPOP_LINE_WIDTH = 2; // Width of lollipop stick
 const DEFAULT_LOLLIPOP_CIRCLE_RADIUS = 8; // Radius of lollipop circle
+const DEFAULT_BAR_FILL_COLOR = "#000000"; // Default color when fill is a function - black
 
 // Types
 interface TShapeProps {
@@ -109,9 +116,12 @@ const CustomBar = React.memo(function CustomBar(props: TBarProps) {
     <g>
       <path
         d={getBarPath(x, y, width, height, topBorderRadius, bottomBorderRadius)}
-        className="transition-opacity duration-200"
         fill={fill}
         opacity={opacity}
+        style={{
+          transition: "opacity 200ms",
+          fill: fill,
+        }}
       />
       {showText && (
         <PercentageText x={x + width / 2} y={textY} percentage={currentBarPercentage} className={textClassName} />
@@ -172,6 +182,8 @@ const createShapeVariant =
     );
   };
 
+export { DEFAULT_BAR_FILL_COLOR };
+
 export const barShapeVariants: Record<
   TBarChartShapeVariant,
   (props: TShapeProps, bar: TBarItem<string>, stackKeys: string[]) => React.ReactNode
diff --git a/packages/propel/src/charts/bar-chart/index.ts b/packages/propel/src/charts/bar-chart/index.ts
index 1efe34c51..d98033459 100644
--- a/packages/propel/src/charts/bar-chart/index.ts
+++ b/packages/propel/src/charts/bar-chart/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./root";
diff --git a/packages/propel/src/charts/bar-chart/root.tsx b/packages/propel/src/charts/bar-chart/root.tsx
index 158c08eea..2dd5f2288 100644
--- a/packages/propel/src/charts/bar-chart/root.tsx
+++ b/packages/propel/src/charts/bar-chart/root.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import React, { useCallback, useMemo, useState } from "react";
 import {
@@ -17,9 +23,7 @@ import type { TBarChartProps } from "@plane/types";
 import { getLegendProps } from "../components/legend";
 import { CustomXAxisTick, CustomYAxisTick } from "../components/tick";
 import { CustomTooltip } from "../components/tooltip";
-import { barShapeVariants } from "./bar";
-
-const DEFAULT_BAR_FILL_COLOR = "#000000";
+import { barShapeVariants, DEFAULT_BAR_FILL_COLOR } from "./bar";
 
 export const BarChart = React.memo(function BarChart<K extends string, T extends string>(props: TBarChartProps<K, T>) {
   const {
@@ -129,7 +133,7 @@ export const BarChart = React.memo(function BarChart<K extends string, T extends
           barSize={barSize}
           className="recharts-wrapper"
         >
-          <CartesianGrid stroke="rgba(var(--color-border-100), 0.8)" vertical={false} />
+          <CartesianGrid stroke="var(--border-color-subtle)" vertical={false} />
           <XAxis
             dataKey={xAxis.key}
             tick={(props) => {
@@ -176,8 +180,8 @@ export const BarChart = React.memo(function BarChart<K extends string, T extends
           {showTooltip && (
             <Tooltip
               cursor={{
-                fill: "currentColor",
-                className: "text-custom-background-90/80 cursor-pointer",
+                fill: "var(--alpha-black-300)",
+                className: "bg-layer-1 cursor-pointer",
               }}
               wrapperStyle={{
                 pointerEvents: "auto",
diff --git a/packages/propel/src/charts/components/legend.tsx b/packages/propel/src/charts/components/legend.tsx
index 7ef2d7a39..89da225af 100644
--- a/packages/propel/src/charts/components/legend.tsx
+++ b/packages/propel/src/charts/components/legend.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 import type { LegendProps } from "recharts";
 // plane imports
@@ -44,17 +50,17 @@ const CustomLegend = React.forwardRef(function CustomLegend(
   return (
     <div
       ref={ref}
-      className={cn("flex items-center px-4 overflow-scroll vertical-scrollbar scrollbar-sm", {
+      className={cn("vertical-scrollbar flex scrollbar-sm items-center overflow-scroll px-4", {
         "max-h-full flex-col items-start py-4": layout === "vertical",
       })}
     >
       {payload.map((item, index) => (
         <div
           key={item.value}
-          className={cn("flex items-center gap-1.5 text-custom-text-300 text-sm font-medium whitespace-nowrap", {
+          className={cn("flex items-center gap-1.5 text-13 font-medium whitespace-nowrap text-tertiary", {
             "px-2": layout === "horizontal",
             "py-2": layout === "vertical",
-            "pl-0 pt-0": index === 0,
+            "pt-0 pl-0": index === 0,
             "pr-0 pb-0": index === payload.length - 1,
             "cursor-pointer": !!props.onClick,
           })}
@@ -63,7 +69,7 @@ const CustomLegend = React.forwardRef(function CustomLegend(
           onMouseLeave={(e) => onMouseLeave?.(item, index, e)}
         >
           <div
-            className="flex-shrink-0 size-2 rounded-sm"
+            className="size-2 flex-shrink-0 rounded-xs"
             style={{
               backgroundColor: item.color,
             }}
diff --git a/packages/propel/src/charts/components/tick.tsx b/packages/propel/src/charts/components/tick.tsx
index 30d92cbd5..307b28329 100644
--- a/packages/propel/src/charts/components/tick.tsx
+++ b/packages/propel/src/charts/components/tick.tsx
@@ -1,8 +1,14 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import React from "react";
 
 // Common classnames
-const AXIS_TICK_CLASSNAME = "fill-custom-text-300 text-sm";
+const AXIS_TICK_CLASSNAME = "fill-tertiary text-13";
 
 export const CustomXAxisTick = React.memo(function CustomXAxisTick({ x, y, payload, getLabel }: any) {
   return (
diff --git a/packages/propel/src/charts/components/tooltip.tsx b/packages/propel/src/charts/components/tooltip.tsx
index 830dffb56..cd4b2b0bb 100644
--- a/packages/propel/src/charts/components/tooltip.tsx
+++ b/packages/propel/src/charts/components/tooltip.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 import type { NameType, Payload, ValueType } from "recharts/types/component/DefaultTooltipContent";
 import { Card, ECardSpacing } from "../../card";
@@ -22,34 +28,32 @@ export const CustomTooltip = React.memo(function CustomTooltip(props: Props) {
 
   return (
     <Card
-      className="flex flex-col max-h-[40vh] w-[12rem] overflow-y-scroll vertical-scrollbar scrollbar-sm"
+      className="vertical-scrollbar flex scrollbar-sm max-h-[40vh] w-[12rem] flex-col overflow-y-scroll"
       spacing={ECardSpacing.SM}
     >
-      <p className="flex-shrink-0 text-xs text-custom-text-100 font-medium border-b border-custom-border-200 pb-2 truncate">
-        {label}
-      </p>
+      <p className="flex-shrink-0 truncate border-b border-subtle pb-2 text-11 font-medium text-primary">{label}</p>
       {filteredPayload.map((item) => {
         if (!item.dataKey) return null;
 
         return (
           <div
             key={item?.dataKey}
-            className={cn("flex items-center gap-2 text-xs transition-opacity", {
+            className={cn("flex items-center gap-2 text-11 transition-opacity", {
               "opacity-20": activeKey && item.dataKey !== activeKey,
             })}
           >
             <div className="flex items-center gap-2 truncate">
               {itemDotColors[item?.dataKey] && (
                 <div
-                  className="flex-shrink-0 size-2 rounded-sm"
+                  className="size-2 flex-shrink-0 rounded-xs"
                   style={{
                     backgroundColor: itemDotColors[item?.dataKey],
                   }}
                 />
               )}
-              <span className="text-custom-text-300 truncate">{itemLabels[item?.dataKey]}:</span>
+              <span className="truncate text-tertiary">{itemLabels[item?.dataKey]}:</span>
             </div>
-            <span className="flex-shrink-0 font-medium text-custom-text-200">{item?.value}</span>
+            <span className="flex-shrink-0 font-medium text-secondary">{item?.value}</span>
           </div>
         );
       })}
diff --git a/packages/propel/src/charts/line-chart/index.ts b/packages/propel/src/charts/line-chart/index.ts
index 1efe34c51..d98033459 100644
--- a/packages/propel/src/charts/line-chart/index.ts
+++ b/packages/propel/src/charts/line-chart/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./root";
diff --git a/packages/propel/src/charts/line-chart/root.tsx b/packages/propel/src/charts/line-chart/root.tsx
index 931e51ffa..3e741e591 100644
--- a/packages/propel/src/charts/line-chart/root.tsx
+++ b/packages/propel/src/charts/line-chart/root.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React, { useMemo, useState } from "react";
 import {
   CartesianGrid,
@@ -98,7 +104,7 @@ export const LineChart = React.memo(function LineChart<K extends string, T exten
             left: margin?.left === undefined ? 20 : margin.left,
           }}
         >
-          <CartesianGrid stroke="rgba(var(--color-border-100), 0.8)" vertical={false} />
+          <CartesianGrid stroke="var(--border-color-subtle)" vertical={false} />
           <XAxis
             dataKey={xAxis.key}
             tick={(props) => {
@@ -149,7 +155,7 @@ export const LineChart = React.memo(function LineChart<K extends string, T exten
           {showTooltip && (
             <Tooltip
               cursor={{
-                stroke: "rgba(var(--color-text-300))",
+                stroke: "var(--text-color-tertiary)",
                 strokeDasharray: "4 4",
               }}
               wrapperStyle={{
diff --git a/packages/propel/src/charts/pie-chart/active-shape.tsx b/packages/propel/src/charts/pie-chart/active-shape.tsx
index 28e5a873e..6aeaa7613 100644
--- a/packages/propel/src/charts/pie-chart/active-shape.tsx
+++ b/packages/propel/src/charts/pie-chart/active-shape.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 import { Sector } from "recharts";
 import type { PieSectorDataItem } from "recharts/types/polar/Pie";
diff --git a/packages/propel/src/charts/pie-chart/index.ts b/packages/propel/src/charts/pie-chart/index.ts
index 1efe34c51..d98033459 100644
--- a/packages/propel/src/charts/pie-chart/index.ts
+++ b/packages/propel/src/charts/pie-chart/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./root";
diff --git a/packages/propel/src/charts/pie-chart/root.tsx b/packages/propel/src/charts/pie-chart/root.tsx
index 19609b2e0..7daf03ecd 100644
--- a/packages/propel/src/charts/pie-chart/root.tsx
+++ b/packages/propel/src/charts/pie-chart/root.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React, { useMemo, useState } from "react";
 import { Cell, PieChart as CorePieChart, Label, Legend, Pie, ResponsiveContainer, Tooltip } from "recharts";
 // plane imports
@@ -84,7 +90,7 @@ export const PieChart = React.memo(function PieChart<K extends string, T extends
                       y={props.y}
                       textAnchor={props.textAnchor}
                       dominantBaseline={props.dominantBaseline}
-                      fill="rgba(var(--color-text-200))"
+                      fill="var(--text-color-secondary)"
                       opacity={!!activeLegend && activeLegend !== payload.key ? 0.1 : 1}
                     >
                       {customLabel?.(payload.count) ?? payload.count}
@@ -123,7 +129,7 @@ export const PieChart = React.memo(function PieChart<K extends string, T extends
             <Tooltip
               cursor={{
                 fill: "currentColor",
-                className: "text-custom-background-90/80 cursor-pointer",
+                className: "bg-layer-1-hover cursor-pointer",
               }}
               wrapperStyle={{
                 pointerEvents: "none",
diff --git a/packages/propel/src/charts/pie-chart/tooltip.tsx b/packages/propel/src/charts/pie-chart/tooltip.tsx
index d79ded080..10dd2a940 100644
--- a/packages/propel/src/charts/pie-chart/tooltip.tsx
+++ b/packages/propel/src/charts/pie-chart/tooltip.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 import type { NameType, Payload, ValueType } from "recharts/types/component/DefaultTooltipContent";
 // plane imports
@@ -14,24 +20,22 @@ export const CustomPieChartTooltip = React.memo(function CustomPieChartTooltip(p
 
   return (
     <Card
-      className="flex flex-col max-h-[40vh] w-[12rem] overflow-y-scroll vertical-scrollbar scrollbar-sm"
+      className="vertical-scrollbar flex scrollbar-sm max-h-[40vh] w-[12rem] flex-col overflow-y-scroll"
       spacing={ECardSpacing.SM}
     >
-      <p className="flex-shrink-0 text-xs text-custom-text-100 font-medium border-b border-custom-border-200 pb-2 truncate">
-        {label}
-      </p>
+      <p className="flex-shrink-0 truncate border-b border-subtle pb-2 text-11 font-medium text-primary">{label}</p>
       {payload?.map((item) => (
-        <div key={item?.dataKey} className="flex items-center gap-2 text-xs capitalize">
+        <div key={item?.dataKey} className="flex items-center gap-2 text-11 capitalize">
           <div className="flex items-center gap-2 truncate">
             <div
-              className="flex-shrink-0 size-2 rounded-sm"
+              className="size-2 flex-shrink-0 rounded-xs"
               style={{
                 backgroundColor: dotColor,
               }}
             />
-            <span className="text-custom-text-300 truncate">{item?.name}:</span>
+            <span className="truncate text-tertiary">{item?.name}:</span>
           </div>
-          <span className="flex-shrink-0 font-medium text-custom-text-200">{item?.value}</span>
+          <span className="flex-shrink-0 font-medium text-secondary">{item?.value}</span>
         </div>
       ))}
     </Card>
diff --git a/packages/propel/src/charts/radar-chart/index.ts b/packages/propel/src/charts/radar-chart/index.ts
index 1efe34c51..d98033459 100644
--- a/packages/propel/src/charts/radar-chart/index.ts
+++ b/packages/propel/src/charts/radar-chart/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./root";
diff --git a/packages/propel/src/charts/radar-chart/root.tsx b/packages/propel/src/charts/radar-chart/root.tsx
index 227c5eb02..01ee5fed1 100644
--- a/packages/propel/src/charts/radar-chart/root.tsx
+++ b/packages/propel/src/charts/radar-chart/root.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useMemo, useState } from "react";
 import {
   PolarGrid,
@@ -37,12 +43,12 @@ function RadarChart<T extends string, K extends string>(props: TRadarChartProps<
     <div className={className}>
       <ResponsiveContainer width="100%" height="100%">
         <CoreRadarChart cx="50%" cy="50%" outerRadius="80%" data={data} margin={margin}>
-          <PolarGrid stroke="rgba(var(--color-border-100), 0.9)" />
+          <PolarGrid stroke="var(--border-color-subtle)" />
           <PolarAngleAxis dataKey={angleAxis.key} tick={(props) => <CustomRadarAxisTick {...props} />} />
           {showTooltip && (
             <Tooltip
               cursor={{
-                stroke: "rgba(var(--color-text-300))",
+                stroke: "var(--text-color-tertiary)",
                 strokeDasharray: "4 4",
               }}
               wrapperStyle={{
diff --git a/packages/propel/src/charts/scatter-chart/index.ts b/packages/propel/src/charts/scatter-chart/index.ts
index 1efe34c51..d98033459 100644
--- a/packages/propel/src/charts/scatter-chart/index.ts
+++ b/packages/propel/src/charts/scatter-chart/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./root";
diff --git a/packages/propel/src/charts/scatter-chart/root.tsx b/packages/propel/src/charts/scatter-chart/root.tsx
index e5c71f976..9da497575 100644
--- a/packages/propel/src/charts/scatter-chart/root.tsx
+++ b/packages/propel/src/charts/scatter-chart/root.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React, { useMemo, useState } from "react";
 import {
   CartesianGrid,
@@ -82,7 +88,7 @@ export const ScatterChart = React.memo(function ScatterChart<K extends string, T
             left: margin?.left === undefined ? 20 : margin.left,
           }}
         >
-          <CartesianGrid stroke="rgba(var(--color-border-100), 0.8)" vertical={false} />
+          <CartesianGrid stroke="var(--border-color-subtle)" vertical={false} />
           <XAxis
             dataKey={xAxis.key}
             tick={(props) => {
@@ -133,7 +139,7 @@ export const ScatterChart = React.memo(function ScatterChart<K extends string, T
           {showTooltip && (
             <Tooltip
               cursor={{
-                stroke: "rgba(var(--color-text-300))",
+                stroke: "var(--text-color-tertiary)",
                 strokeDasharray: "4 4",
               }}
               wrapperStyle={{
diff --git a/packages/propel/src/charts/tree-map/index.ts b/packages/propel/src/charts/tree-map/index.ts
index 1efe34c51..d98033459 100644
--- a/packages/propel/src/charts/tree-map/index.ts
+++ b/packages/propel/src/charts/tree-map/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./root";
diff --git a/packages/propel/src/charts/tree-map/map-content.tsx b/packages/propel/src/charts/tree-map/map-content.tsx
index 718a52e11..c6cf9e748 100644
--- a/packages/propel/src/charts/tree-map/map-content.tsx
+++ b/packages/propel/src/charts/tree-map/map-content.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React, { useMemo } from "react";
 // plane imports
 import type { TBottomSectionConfig, TContentVisibility, TTopSectionConfig } from "@plane/types";
@@ -208,7 +214,7 @@ export function CustomTreeMapContent({
               y={pY + LAYOUT.TEXT.PADDING_LEFT}
               width={LAYOUT.ICON.SIZE}
               height={LAYOUT.ICON.SIZE}
-              className={textClassName || "text-custom-text-300"}
+              className={textClassName || "text-tertiary"}
             >
               {React.cloneElement(icon, {
                 className: cn("size-4", icon?.props?.className),
@@ -221,10 +227,7 @@ export function CustomTreeMapContent({
               x={pX + LAYOUT.TEXT.PADDING_LEFT + iconSpace}
               y={pY + LAYOUT.TEXT.VERTICAL_OFFSET}
               textAnchor="start"
-              className={cn(
-                "text-sm font-extralight tracking-wider select-none",
-                textClassName || "text-custom-text-300"
-              )}
+              className={cn("tracking-wider text-13 font-light select-none", textClassName || "text-tertiary")}
               fill="currentColor"
             >
               {top.nameTruncated ? truncateText(name, availableTextWidth, LAYOUT.TEXT.FONT_SIZES.SM, iconSpace) : name}
@@ -240,10 +243,7 @@ export function CustomTreeMapContent({
                 x={pX + LAYOUT.TEXT.PADDING_LEFT}
                 y={pY + pHeight - LAYOUT.TEXT.PADDING_LEFT}
                 textAnchor="start"
-                className={cn(
-                  "text-sm font-extralight tracking-wider select-none",
-                  textClassName || "text-custom-text-300"
-                )}
+                className={cn("tracking-wider text-13 font-light select-none", textClassName || "text-tertiary")}
                 fill="currentColor"
               >
                 {value.toLocaleString()}
diff --git a/packages/propel/src/charts/tree-map/root.tsx b/packages/propel/src/charts/tree-map/root.tsx
index 502adbb87..e529df42c 100644
--- a/packages/propel/src/charts/tree-map/root.tsx
+++ b/packages/propel/src/charts/tree-map/root.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 import { Treemap, ResponsiveContainer, Tooltip } from "recharts";
 // plane imports
@@ -16,8 +22,8 @@ export const TreeMapChart = React.memo(function TreeMapChart(props: TreeMapChart
           data={data}
           nameKey="name"
           dataKey="value"
-          stroke="currentColor"
-          className="text-custom-background-100 bg-custom-background-100"
+          stroke="transparent"
+          className="cursor-pointer bg-layer-1"
           content={<CustomTreeMapContent />}
           animationEasing="ease-out"
           isUpdateAnimationActive={isAnimationActive}
@@ -29,7 +35,7 @@ export const TreeMapChart = React.memo(function TreeMapChart(props: TreeMapChart
               content={({ active, payload }) => <TreeMapTooltip active={active} payload={payload} />}
               cursor={{
                 fill: "currentColor",
-                className: "text-custom-background-90/80 cursor-pointer",
+                className: "bg-layer-1 cursor-pointer",
               }}
               wrapperStyle={{
                 pointerEvents: "auto",
diff --git a/packages/propel/src/charts/tree-map/tooltip.tsx b/packages/propel/src/charts/tree-map/tooltip.tsx
index 4a65e63a3..8fb731cfa 100644
--- a/packages/propel/src/charts/tree-map/tooltip.tsx
+++ b/packages/propel/src/charts/tree-map/tooltip.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 // plane imports
 import { Card, ECardSpacing } from "../../card";
@@ -14,11 +20,11 @@ export const TreeMapTooltip = React.memo(function TreeMapTooltip({ active, paylo
 
   return (
     <Card className="flex flex-col space-y-1.5" spacing={ECardSpacing.SM}>
-      <div className="flex items-center gap-2 border-b border-custom-border-200 pb-2.5">
+      <div className="flex items-center gap-2 border-b border-subtle pb-2.5">
         {data?.icon}
-        <p className="text-xs text-custom-text-100 font-medium capitalize">{data?.name}</p>
+        <p className="text-11 font-medium text-primary capitalize">{data?.name}</p>
       </div>
-      <span className="text-xs font-medium text-custom-text-200">
+      <span className="text-11 font-medium text-secondary">
         {data?.value.toLocaleString()}
         {data.label && ` ${data.label}`}
       </span>
diff --git a/packages/propel/src/collapsible/collapsible.stories.tsx b/packages/propel/src/collapsible/collapsible.stories.tsx
index c7e709857..5669ffac5 100644
--- a/packages/propel/src/collapsible/collapsible.stories.tsx
+++ b/packages/propel/src/collapsible/collapsible.stories.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useState } from "react";
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { useArgs } from "storybook/preview-api";
@@ -26,13 +32,13 @@ const meta = {
 
     return (
       <Collapsible.CollapsibleRoot {...args} isOpen={isOpen} onToggle={toggleOpen} className="w-96">
-        <Collapsible.CollapsibleTrigger className="flex w-full items-center justify-between rounded-md bg-gray-100 px-4 py-2 hover:bg-gray-200">
+        <Collapsible.CollapsibleTrigger className="bg-gray-100 hover:bg-gray-200 flex w-full items-center justify-between rounded-md px-4 py-2">
           <span className="font-semibold">Click to toggle</span>
           <ChevronDownIcon className="h-4 w-4 transition-transform group-data-[panel-open]:rotate-180" />
         </Collapsible.CollapsibleTrigger>
         <Collapsible.CollapsibleContent className="mt-2">
-          <div className="rounded-md border border-gray-200 p-4">
-            <p className="text-sm">This is the collapsible content that can be shown or hidden.</p>
+          <div className="border-gray-200 rounded-md border p-4">
+            <p className="text-13">This is the collapsible content that can be shown or hidden.</p>
           </div>
         </Collapsible.CollapsibleContent>
       </Collapsible.CollapsibleRoot>
@@ -56,25 +62,28 @@ export const Controlled: Story = {
     return (
       <div className="space-y-4">
         <div className="flex gap-2">
-          <button onClick={() => setIsOpen(true)} className="rounded bg-blue-500 px-4 py-2 text-sm text-white">
+          <button onClick={() => setIsOpen(true)} className="bg-blue-500 rounded-sm px-4 py-2 text-13 text-on-color">
             Open
           </button>
-          <button onClick={() => setIsOpen(false)} className="rounded bg-gray-500 px-4 py-2 text-sm text-white">
+          <button onClick={() => setIsOpen(false)} className="bg-gray-500 rounded-sm px-4 py-2 text-13 text-on-color">
             Close
           </button>
-          <button onClick={() => setIsOpen(!isOpen)} className="rounded bg-green-500 px-4 py-2 text-sm text-white">
+          <button
+            onClick={() => setIsOpen(!isOpen)}
+            className="bg-green-500 rounded-sm px-4 py-2 text-13 text-on-color"
+          >
             Toggle
           </button>
         </div>
         <Collapsible.CollapsibleRoot isOpen={isOpen} onToggle={() => setIsOpen(!isOpen)} className="w-96">
-          <Collapsible.CollapsibleTrigger className="flex w-full items-center justify-between rounded-md bg-gray-100 px-4 py-2 hover:bg-gray-200">
+          <Collapsible.CollapsibleTrigger className="bg-gray-100 hover:bg-gray-200 flex w-full items-center justify-between rounded-md px-4 py-2">
             <span className="font-semibold">Controlled Collapsible</span>
             <ChevronDownIcon className="h-4 w-4 transition-transform group-data-[panel-open]:rotate-180" />
           </Collapsible.CollapsibleTrigger>
           <Collapsible.CollapsibleContent className="mt-2">
-            <div className="rounded-md border border-gray-200 p-4">
-              <p className="text-sm">This collapsible is controlled by external state.</p>
-              <p className="mt-2 text-sm">Current state: {isOpen ? "Open" : "Closed"}</p>
+            <div className="border-gray-200 rounded-md border p-4">
+              <p className="text-13">This collapsible is controlled by external state.</p>
+              <p className="mt-2 text-13">Current state: {isOpen ? "Open" : "Closed"}</p>
             </div>
           </Collapsible.CollapsibleContent>
         </Collapsible.CollapsibleRoot>
@@ -88,17 +97,17 @@ export const NestedContent: Story = {
     const [isOpen, setIsOpen] = useState(args.isOpen);
     return (
       <Collapsible.CollapsibleRoot {...args} isOpen={isOpen} onToggle={() => setIsOpen(!isOpen)} className="w-96">
-        <Collapsible.CollapsibleTrigger className="flex w-full items-center justify-between rounded-md bg-gray-100 px-4 py-2 hover:bg-gray-200">
+        <Collapsible.CollapsibleTrigger className="bg-gray-100 hover:bg-gray-200 flex w-full items-center justify-between rounded-md px-4 py-2">
           <span className="font-semibold">Collapsible with Nested Content</span>
           <ChevronDownIcon className="h-4 w-4 transition-transform group-data-[panel-open]:rotate-180" />
         </Collapsible.CollapsibleTrigger>
         <Collapsible.CollapsibleContent className="mt-2">
-          <div className="space-y-2 rounded-md border border-gray-200 p-4">
+          <div className="border-gray-200 space-y-2 rounded-md border p-4">
             <h4 className="font-semibold">Section 1</h4>
-            <p className="text-sm">This is some content in the first section.</p>
+            <p className="text-13">This is some content in the first section.</p>
             <h4 className="font-semibold">Section 2</h4>
-            <p className="text-sm">This is some content in the second section.</p>
-            <ul className="list-inside list-disc text-sm">
+            <p className="text-13">This is some content in the second section.</p>
+            <ul className="list-inside list-disc text-13">
               <li>Item 1</li>
               <li>Item 2</li>
               <li>Item 3</li>
@@ -115,12 +124,12 @@ export const CustomStyling: Story = {
     const [isOpen, setIsOpen] = useState(args.isOpen);
     return (
       <Collapsible.CollapsibleRoot {...args} isOpen={isOpen} onToggle={() => setIsOpen(!isOpen)} className="w-96">
-        <Collapsible.CollapsibleTrigger className="flex w-full items-center justify-between rounded-lg bg-gradient-to-r from-purple-500 to-pink-500 px-6 py-3 text-white shadow-lg transition-all hover:shadow-xl">
-          <span className="text-lg font-bold">Custom Styled Trigger</span>
+        <Collapsible.CollapsibleTrigger className="from-purple-500 to-pink-500 shadow-lg hover:shadow-xl flex w-full items-center justify-between rounded-lg bg-gradient-to-r px-6 py-3 text-on-color transition-all">
+          <span className="text-16 font-bold">Custom Styled Trigger</span>
           <ChevronDownIcon className="h-5 w-5 transition-transform group-data-[panel-open]:rotate-180" />
         </Collapsible.CollapsibleTrigger>
         <Collapsible.CollapsibleContent className="mt-4">
-          <div className="rounded-lg bg-gradient-to-br from-purple-100 to-pink-100 p-6 shadow-md">
+          <div className="from-purple-100 to-pink-100 shadow-md rounded-lg bg-gradient-to-br p-6">
             <p className="text-purple-900">This collapsible has custom styling with gradients, shadows, and colors.</p>
           </div>
         </Collapsible.CollapsibleContent>
@@ -134,37 +143,37 @@ export const MultipleCollapsibles: Story = {
     return (
       <div className="w-96 space-y-2">
         <Collapsible.CollapsibleRoot>
-          <Collapsible.CollapsibleTrigger className="flex w-full items-center justify-between rounded-md bg-gray-100 px-4 py-2 hover:bg-gray-200">
+          <Collapsible.CollapsibleTrigger className="bg-gray-100 hover:bg-gray-200 flex w-full items-center justify-between rounded-md px-4 py-2">
             <span className="font-semibold">First Item</span>
             <ChevronDownIcon className="h-4 w-4 transition-transform group-data-[panel-open]:rotate-180" />
           </Collapsible.CollapsibleTrigger>
           <Collapsible.CollapsibleContent className="mt-2">
-            <div className="rounded-md border border-gray-200 p-4">
-              <p className="text-sm">Content for the first item.</p>
+            <div className="border-gray-200 rounded-md border p-4">
+              <p className="text-13">Content for the first item.</p>
             </div>
           </Collapsible.CollapsibleContent>
         </Collapsible.CollapsibleRoot>
 
         <Collapsible.CollapsibleRoot>
-          <Collapsible.CollapsibleTrigger className="flex w-full items-center justify-between rounded-md bg-gray-100 px-4 py-2 hover:bg-gray-200">
+          <Collapsible.CollapsibleTrigger className="bg-gray-100 hover:bg-gray-200 flex w-full items-center justify-between rounded-md px-4 py-2">
             <span className="font-semibold">Second Item</span>
             <ChevronDownIcon className="h-4 w-4 transition-transform group-data-[panel-open]:rotate-180" />
           </Collapsible.CollapsibleTrigger>
           <Collapsible.CollapsibleContent className="mt-2">
-            <div className="rounded-md border border-gray-200 p-4">
-              <p className="text-sm">Content for the second item.</p>
+            <div className="border-gray-200 rounded-md border p-4">
+              <p className="text-13">Content for the second item.</p>
             </div>
           </Collapsible.CollapsibleContent>
         </Collapsible.CollapsibleRoot>
 
         <Collapsible.CollapsibleRoot>
-          <Collapsible.CollapsibleTrigger className="flex w-full items-center justify-between rounded-md bg-gray-100 px-4 py-2 hover:bg-gray-200">
+          <Collapsible.CollapsibleTrigger className="bg-gray-100 hover:bg-gray-200 flex w-full items-center justify-between rounded-md px-4 py-2">
             <span className="font-semibold">Third Item</span>
             <ChevronDownIcon className="h-4 w-4 transition-transform group-data-[panel-open]:rotate-180" />
           </Collapsible.CollapsibleTrigger>
           <Collapsible.CollapsibleContent className="mt-2">
-            <div className="rounded-md border border-gray-200 p-4">
-              <p className="text-sm">Content for the third item.</p>
+            <div className="border-gray-200 rounded-md border p-4">
+              <p className="text-13">Content for the third item.</p>
             </div>
           </Collapsible.CollapsibleContent>
         </Collapsible.CollapsibleRoot>
diff --git a/packages/propel/src/collapsible/collapsible.tsx b/packages/propel/src/collapsible/collapsible.tsx
index 2ae842da3..9178b44a4 100644
--- a/packages/propel/src/collapsible/collapsible.tsx
+++ b/packages/propel/src/collapsible/collapsible.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React, { useState, useEffect, useCallback, createContext, useContext } from "react";
 import { Collapsible as BaseCollapsible } from "@base-ui-components/react/collapsible";
 import clsx from "clsx";
@@ -85,7 +91,7 @@ function Content({ children, className }: ContentProps) {
   return (
     <BaseCollapsible.Panel
       className={clsx(
-        "flex h-[var(--collapsible-panel-height)] flex-col overflow-hidden text-sm transition-all ease-out data-[ending-style]:h-0 data-[starting-style]:h-0",
+        "flex h-[var(--collapsible-panel-height)] flex-col overflow-hidden text-13 transition-all ease-out data-[ending-style]:h-0 data-[starting-style]:h-0",
         className
       )}
     >
diff --git a/packages/propel/src/collapsible/index.ts b/packages/propel/src/collapsible/index.ts
index dbd926237..7528e0d58 100644
--- a/packages/propel/src/collapsible/index.ts
+++ b/packages/propel/src/collapsible/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./collapsible";
diff --git a/packages/propel/src/combobox/combobox.stories.tsx b/packages/propel/src/combobox/combobox.stories.tsx
index 578951424..86d898154 100644
--- a/packages/propel/src/combobox/combobox.stories.tsx
+++ b/packages/propel/src/combobox/combobox.stories.tsx
@@ -1,7 +1,14 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useState } from "react";
 import type { Meta, StoryObj } from "@storybook/react-vite";
-import { Check, ChevronsUpDown } from "lucide-react";
+import { ChevronsUpDown } from "lucide-react";
 import { useArgs } from "storybook/preview-api";
+import { CheckIcon } from "../icons";
 import { Combobox } from "./combobox";
 
 const frameworks = [
@@ -37,7 +44,7 @@ const meta = {
     const setValue = (newValue: string | string[]) => updateArgs({ value: newValue });
     return (
       <Combobox {...args} value={value} onValueChange={(v) => setValue(v as string)}>
-        <Combobox.Button className="flex w-72 items-center justify-between rounded-md border border-gray-300 bg-white px-4 py-2 hover:bg-gray-50">
+        <Combobox.Button className="border-gray-300 hover:bg-gray-50 flex w-72 items-center justify-between rounded-md border bg-white px-4 py-2">
           <span>{value ? frameworks.find((f) => f.value === value)?.label : "Select framework..."}</span>
           <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
         </Combobox.Button>
@@ -48,7 +55,7 @@ const meta = {
               value={framework.value}
               className="flex items-center gap-2 px-4 py-2"
             >
-              {value === framework.value && <Check className="h-4 w-4" />}
+              {value === framework.value && <CheckIcon className="h-4 w-4" />}
               <span>{framework.label}</span>
             </Combobox.Option>
           ))}
@@ -68,7 +75,7 @@ export const WithoutSearch: Story = {
     const [value, setValue] = useState("");
     return (
       <Combobox value={value} onValueChange={(v) => setValue(v as string)}>
-        <Combobox.Button className="flex w-72 items-center justify-between rounded-md border border-gray-300 bg-white px-4 py-2 hover:bg-gray-50">
+        <Combobox.Button className="border-gray-300 hover:bg-gray-50 flex w-72 items-center justify-between rounded-md border bg-white px-4 py-2">
           <span>{value ? frameworks.find((f) => f.value === value)?.label : "Select framework..."}</span>
           <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
         </Combobox.Button>
@@ -79,7 +86,7 @@ export const WithoutSearch: Story = {
               value={framework.value}
               className="flex items-center gap-2 px-4 py-2"
             >
-              {value === framework.value && <Check className="h-4 w-4" />}
+              {value === framework.value && <CheckIcon className="h-4 w-4" />}
               <span>{framework.label}</span>
             </Combobox.Option>
           ))}
@@ -95,7 +102,7 @@ export const MultiSelect: Story = {
 
     return (
       <Combobox multiSelect value={value} onValueChange={(v) => setValue(v as string[])}>
-        <Combobox.Button className="flex w-72 items-center justify-between rounded-md border border-gray-300 bg-white px-4 py-2 hover:bg-gray-50">
+        <Combobox.Button className="border-gray-300 hover:bg-gray-50 flex w-72 items-center justify-between rounded-md border bg-white px-4 py-2">
           <span className="truncate">{value.length > 0 ? `${value.length} selected` : "Select frameworks..."}</span>
           <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
         </Combobox.Button>
@@ -106,7 +113,7 @@ export const MultiSelect: Story = {
               value={framework.value}
               className="flex items-center gap-2 px-4 py-2"
             >
-              {value.includes(framework.value) && <Check className="h-4 w-4" />}
+              {value.includes(framework.value) && <CheckIcon className="h-4 w-4" />}
               <span>{framework.label}</span>
             </Combobox.Option>
           ))}
@@ -123,7 +130,7 @@ export const MultiSelectWithLimit: Story = {
     return (
       <div className="space-y-2">
         <Combobox multiSelect maxSelections={3} value={value} onValueChange={(v) => setValue(v as string[])}>
-          <Combobox.Button className="flex w-72 items-center justify-between rounded-md border border-gray-300 bg-white px-4 py-2 hover:bg-gray-50">
+          <Combobox.Button className="border-gray-300 hover:bg-gray-50 flex w-72 items-center justify-between rounded-md border bg-white px-4 py-2">
             <span className="truncate">
               {value.length > 0 ? `${value.length}/3 selected` : "Select up to 3 frameworks..."}
             </span>
@@ -136,13 +143,13 @@ export const MultiSelectWithLimit: Story = {
                 value={framework.value}
                 className="flex items-center gap-2 px-4 py-2"
               >
-                {value.includes(framework.value) && <Check className="h-4 w-4" />}
+                {value.includes(framework.value) && <CheckIcon className="h-4 w-4" />}
                 <span>{framework.label}</span>
               </Combobox.Option>
             ))}
           </Combobox.Options>
         </Combobox>
-        <p className="text-xs text-gray-500">Maximum 3 selections allowed</p>
+        <p className="text-gray-500 text-11">Maximum 3 selections allowed</p>
       </div>
     );
   },
@@ -154,7 +161,7 @@ export const Disabled: Story = {
     const [value, setValue] = useState("");
     return (
       <Combobox disabled value={value} onValueChange={(v) => setValue(v as string)}>
-        <Combobox.Button className="flex w-72 items-center justify-between rounded-md border border-gray-300 bg-gray-100 px-4 py-2 opacity-50">
+        <Combobox.Button className="border-gray-300 bg-gray-100 flex w-72 items-center justify-between rounded-md border px-4 py-2 opacity-50">
           <span>{value ? frameworks.find((f) => f.value === value)?.label : "Select framework..."}</span>
           <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
         </Combobox.Button>
@@ -165,7 +172,7 @@ export const Disabled: Story = {
               value={framework.value}
               className="flex items-center gap-2 px-4 py-2"
             >
-              {value === framework.value && <Check className="h-4 w-4" />}
+              {value === framework.value && <CheckIcon className="h-4 w-4" />}
               <span>{framework.label}</span>
             </Combobox.Option>
           ))}
@@ -180,7 +187,7 @@ export const DisabledOptions: Story = {
     const [value, setValue] = useState("");
     return (
       <Combobox value={value} onValueChange={(v) => setValue(v as string)}>
-        <Combobox.Button className="flex w-72 items-center justify-between rounded-md border border-gray-300 bg-white px-4 py-2 hover:bg-gray-50">
+        <Combobox.Button className="border-gray-300 hover:bg-gray-50 flex w-72 items-center justify-between rounded-md border bg-white px-4 py-2">
           <span>{value ? frameworks.find((f) => f.value === value)?.label : "Select framework..."}</span>
           <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
         </Combobox.Button>
@@ -192,7 +199,7 @@ export const DisabledOptions: Story = {
               disabled={framework.value === "angular" || framework.value === "svelte"}
               className="flex items-center gap-2 px-4 py-2"
             >
-              {value === framework.value && <Check className="h-4 w-4" />}
+              {value === framework.value && <CheckIcon className="h-4 w-4" />}
               <span>{framework.label}</span>
             </Combobox.Option>
           ))}
@@ -207,7 +214,7 @@ export const CustomMaxHeight: Story = {
     const [value, setValue] = useState("");
     return (
       <Combobox value={value} onValueChange={(v) => setValue(v as string)}>
-        <Combobox.Button className="flex w-72 items-center justify-between rounded-md border border-gray-300 bg-white px-4 py-2 hover:bg-gray-50">
+        <Combobox.Button className="border-gray-300 hover:bg-gray-50 flex w-72 items-center justify-between rounded-md border bg-white px-4 py-2">
           <span>{value ? frameworks.find((f) => f.value === value)?.label : "Select framework..."}</span>
           <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
         </Combobox.Button>
@@ -218,7 +225,7 @@ export const CustomMaxHeight: Story = {
               value={framework.value}
               className="flex items-center gap-2 px-4 py-2"
             >
-              {value === framework.value && <Check className="h-4 w-4" />}
+              {value === framework.value && <CheckIcon className="h-4 w-4" />}
               <span>{framework.label}</span>
             </Combobox.Option>
           ))}
@@ -233,7 +240,7 @@ export const CustomEmptyMessage: Story = {
     const [value, setValue] = useState("");
     return (
       <Combobox value={value} onValueChange={(v) => setValue(v as string)}>
-        <Combobox.Button className="flex w-72 items-center justify-between rounded-md border border-gray-300 bg-white px-4 py-2 hover:bg-gray-50">
+        <Combobox.Button className="border-gray-300 hover:bg-gray-50 flex w-72 items-center justify-between rounded-md border bg-white px-4 py-2">
           <span>{value ? frameworks.find((f) => f.value === value)?.label : "Select framework..."}</span>
           <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
         </Combobox.Button>
@@ -249,7 +256,7 @@ export const CustomEmptyMessage: Story = {
               value={framework.value}
               className="flex items-center gap-2 px-4 py-2"
             >
-              {value === framework.value && <Check className="h-4 w-4" />}
+              {value === framework.value && <CheckIcon className="h-4 w-4" />}
               <span>{framework.label}</span>
             </Combobox.Option>
           ))}
diff --git a/packages/propel/src/combobox/combobox.tsx b/packages/propel/src/combobox/combobox.tsx
index 94b307533..7967af126 100644
--- a/packages/propel/src/combobox/combobox.tsx
+++ b/packages/propel/src/combobox/combobox.tsx
@@ -1,6 +1,12 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 import { Combobox as BaseCombobox } from "@base-ui-components/react/combobox";
-import { Search } from "lucide-react";
+import { SearchIcon } from "../icons";
 import { cn } from "../utils/classname";
 
 // Type definitions
@@ -168,13 +174,13 @@ function ComboboxOptions({
     <BaseCombobox.Portal>
       <BaseCombobox.Positioner sideOffset={8} className={positionerClassName}>
         <BaseCombobox.Popup
-          className={cn("rounded-md border border-custom-border-200 bg-custom-background-100 p-1 shadow-lg", className)}
+          className={cn("shadow-lg rounded-md border border-subtle bg-surface-1 p-1", className)}
           data-prevent-outside-click={dataPreventOutsideClick}
         >
           <div className="flex flex-col gap-1">
             {showSearch && (
               <div className="relative">
-                <Search className="absolute left-2 top-1/2 h-4 w-4 -translate-y-1/2 text-custom-text-400" />
+                <SearchIcon className="absolute top-1/2 left-2 h-4 w-4 -translate-y-1/2 text-placeholder" />
                 <input
                   type="text"
                   placeholder={searchPlaceholder}
@@ -182,7 +188,7 @@ function ComboboxOptions({
                   onChange={(e) => setSearchQuery(e.target.value)}
                   onKeyDown={onSearchQueryKeyDown}
                   className={cn(
-                    "w-full rounded border border-custom-border-100 bg-custom-background-90 py-1.5 pl-8 pr-2 text-sm outline-none placeholder:text-custom-text-400",
+                    "w-full rounded-sm border border-subtle bg-surface-2 py-1.5 pr-2 pl-8 text-13 outline-none placeholder:text-placeholder",
                     inputClassName
                   )}
                 />
@@ -198,7 +204,7 @@ function ComboboxOptions({
                   React.Children.toArray(filteredChildren).filter(
                     (child) => React.isValidElement(child) && child.type === ComboboxOption
                   )
-                ) === 0 && <div className="px-2 py-1.5 text-sm text-custom-text-400">{emptyMessage}</div>}
+                ) === 0 && <div className="px-2 py-1.5 text-13 text-placeholder">{emptyMessage}</div>}
             </BaseCombobox.List>
           </div>
         </BaseCombobox.Popup>
@@ -213,7 +219,7 @@ function ComboboxOption({ value, children, disabled, className }: ComboboxOption
     <BaseCombobox.Item
       value={value}
       disabled={disabled}
-      className={cn("cursor-pointer rounded px-2 py-1.5 text-sm outline-none transition-colors", className)}
+      className={cn("cursor-pointer rounded-sm px-2 py-1.5 text-13 transition-colors outline-none", className)}
     >
       {children}
     </BaseCombobox.Item>
diff --git a/packages/propel/src/combobox/index.ts b/packages/propel/src/combobox/index.ts
index 1be314de7..8004ba5ec 100644
--- a/packages/propel/src/combobox/index.ts
+++ b/packages/propel/src/combobox/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./combobox";
diff --git a/packages/propel/src/command/command.stories.tsx b/packages/propel/src/command/command.stories.tsx
index 9f41c9b4b..dbdaf2e30 100644
--- a/packages/propel/src/command/command.stories.tsx
+++ b/packages/propel/src/command/command.stories.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { File, Folder, Settings, User } from "lucide-react";
 import { Command } from "./command";
@@ -23,14 +29,14 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {
   render() {
     return (
-      <Command className="w-96 rounded-lg border border-gray-200 p-2">
-        <Command.Input placeholder="Search..." className="h-9 w-full bg-transparent py-3 text-sm outline-none" />
+      <Command className="border-gray-200 w-96 rounded-lg border p-2">
+        <Command.Input placeholder="Search..." className="h-9 w-full bg-transparent py-3 text-13 outline-none" />
         <Command.List className="max-h-80 overflow-auto py-2">
-          <Command.Item className="cursor-pointer rounded px-3 py-2 hover:bg-gray-100">Item 1</Command.Item>
-          <Command.Item className="cursor-pointer rounded px-3 py-2 hover:bg-gray-100">Item 2</Command.Item>
-          <Command.Item className="cursor-pointer rounded px-3 py-2 hover:bg-gray-100">Item 3</Command.Item>
+          <Command.Item className="hover:bg-gray-100 cursor-pointer rounded-sm px-3 py-2">Item 1</Command.Item>
+          <Command.Item className="hover:bg-gray-100 cursor-pointer rounded-sm px-3 py-2">Item 2</Command.Item>
+          <Command.Item className="hover:bg-gray-100 cursor-pointer rounded-sm px-3 py-2">Item 3</Command.Item>
         </Command.List>
-        <Command.Empty className="py-6 text-center text-sm text-gray-500">No results found.</Command.Empty>
+        <Command.Empty className="text-gray-500 py-6 text-center text-13">No results found.</Command.Empty>
       </Command>
     );
   },
@@ -39,30 +45,30 @@ export const Default: Story = {
 export const WithIcons: Story = {
   render() {
     return (
-      <Command className="w-96 rounded-lg border border-gray-200 p-2">
+      <Command className="border-gray-200 w-96 rounded-lg border p-2">
         <Command.Input
           placeholder="Search files and folders..."
-          className="h-9 w-full bg-transparent py-3 text-sm outline-none"
+          className="h-9 w-full bg-transparent py-3 text-13 outline-none"
         />
         <Command.List className="max-h-80 overflow-auto py-2">
-          <Command.Item className="flex cursor-pointer items-center gap-2 rounded px-3 py-2 hover:bg-gray-100">
+          <Command.Item className="hover:bg-gray-100 flex cursor-pointer items-center gap-2 rounded-sm px-3 py-2">
             <Folder className="h-4 w-4" />
             <span>Documents</span>
           </Command.Item>
-          <Command.Item className="flex cursor-pointer items-center gap-2 rounded px-3 py-2 hover:bg-gray-100">
+          <Command.Item className="hover:bg-gray-100 flex cursor-pointer items-center gap-2 rounded-sm px-3 py-2">
             <Folder className="h-4 w-4" />
             <span>Downloads</span>
           </Command.Item>
-          <Command.Item className="flex cursor-pointer items-center gap-2 rounded px-3 py-2 hover:bg-gray-100">
+          <Command.Item className="hover:bg-gray-100 flex cursor-pointer items-center gap-2 rounded-sm px-3 py-2">
             <File className="h-4 w-4" />
             <span>README.md</span>
           </Command.Item>
-          <Command.Item className="flex cursor-pointer items-center gap-2 rounded px-3 py-2 hover:bg-gray-100">
+          <Command.Item className="hover:bg-gray-100 flex cursor-pointer items-center gap-2 rounded-sm px-3 py-2">
             <File className="h-4 w-4" />
             <span>package.json</span>
           </Command.Item>
         </Command.List>
-        <Command.Empty className="py-6 text-center text-sm text-gray-500">No files or folders found.</Command.Empty>
+        <Command.Empty className="text-gray-500 py-6 text-center text-13">No files or folders found.</Command.Empty>
       </Command>
     );
   },
@@ -71,33 +77,33 @@ export const WithIcons: Story = {
 export const WithCategories: Story = {
   render() {
     return (
-      <Command className="w-96 rounded-lg border border-gray-200 p-2">
+      <Command className="border-gray-200 w-96 rounded-lg border p-2">
         <Command.Input
           placeholder="Search commands..."
-          className="h-9 w-full bg-transparent py-3 text-sm outline-none"
+          className="h-9 w-full bg-transparent py-3 text-13 outline-none"
         />
         <Command.List className="max-h-80 overflow-auto py-2">
-          <div className="px-2 py-1.5 text-xs font-semibold text-gray-500">User</div>
-          <Command.Item className="flex cursor-pointer items-center gap-2 rounded px-3 py-2 hover:bg-gray-100">
+          <div className="text-gray-500 px-2 py-1.5 text-11 font-semibold">User</div>
+          <Command.Item className="hover:bg-gray-100 flex cursor-pointer items-center gap-2 rounded-sm px-3 py-2">
             <User className="h-4 w-4" />
             <span>Profile</span>
           </Command.Item>
-          <Command.Item className="flex cursor-pointer items-center gap-2 rounded px-3 py-2 hover:bg-gray-100">
+          <Command.Item className="hover:bg-gray-100 flex cursor-pointer items-center gap-2 rounded-sm px-3 py-2">
             <Settings className="h-4 w-4" />
             <span>Settings</span>
           </Command.Item>
 
-          <div className="mt-2 px-2 py-1.5 text-xs font-semibold text-gray-500">Files</div>
-          <Command.Item className="flex cursor-pointer items-center gap-2 rounded px-3 py-2 hover:bg-gray-100">
+          <div className="text-gray-500 mt-2 px-2 py-1.5 text-11 font-semibold">Files</div>
+          <Command.Item className="hover:bg-gray-100 flex cursor-pointer items-center gap-2 rounded-sm px-3 py-2">
             <Folder className="h-4 w-4" />
             <span>Open Folder</span>
           </Command.Item>
-          <Command.Item className="flex cursor-pointer items-center gap-2 rounded px-3 py-2 hover:bg-gray-100">
+          <Command.Item className="hover:bg-gray-100 flex cursor-pointer items-center gap-2 rounded-sm px-3 py-2">
             <File className="h-4 w-4" />
             <span>New File</span>
           </Command.Item>
         </Command.List>
-        <Command.Empty className="py-6 text-center text-sm text-gray-500">No commands found.</Command.Empty>
+        <Command.Empty className="text-gray-500 py-6 text-center text-13">No commands found.</Command.Empty>
       </Command>
     );
   },
@@ -106,12 +112,12 @@ export const WithCategories: Story = {
 export const EmptyState: Story = {
   render() {
     return (
-      <Command className="w-96 rounded-lg border border-gray-200 p-2">
-        <Command.Input placeholder="Search..." className="h-9 w-full bg-transparent py-3 text-sm outline-none" />
+      <Command className="border-gray-200 w-96 rounded-lg border p-2">
+        <Command.Input placeholder="Search..." className="h-9 w-full bg-transparent py-3 text-13 outline-none" />
         <Command.List className="max-h-80 overflow-auto py-2">{/* No items - will show empty state */}</Command.List>
-        <Command.Empty className="py-6 text-center text-sm text-gray-500">
+        <Command.Empty className="text-gray-500 py-6 text-center text-13">
           <p className="font-semibold">No results found</p>
-          <p className="mt-1 text-xs">Try searching for something else</p>
+          <p className="mt-1 text-11">Try searching for something else</p>
         </Command.Empty>
       </Command>
     );
@@ -121,16 +127,16 @@ export const EmptyState: Story = {
 export const LongList: Story = {
   render() {
     return (
-      <Command className="w-96 rounded-lg border border-gray-200 p-2">
-        <Command.Input placeholder="Search items..." className="h-9 w-full bg-transparent py-3 text-sm outline-none" />
+      <Command className="border-gray-200 w-96 rounded-lg border p-2">
+        <Command.Input placeholder="Search items..." className="h-9 w-full bg-transparent py-3 text-13 outline-none" />
         <Command.List className="max-h-60 overflow-auto py-2">
           {Array.from({ length: 20 }, (_, i) => (
-            <Command.Item key={i} className="cursor-pointer rounded px-3 py-2 hover:bg-gray-100">
+            <Command.Item key={i} className="hover:bg-gray-100 cursor-pointer rounded-sm px-3 py-2">
               Item {i + 1}
             </Command.Item>
           ))}
         </Command.List>
-        <Command.Empty className="py-6 text-center text-sm text-gray-500">No results found.</Command.Empty>
+        <Command.Empty className="text-gray-500 py-6 text-center text-13">No results found.</Command.Empty>
       </Command>
     );
   },
@@ -139,17 +145,17 @@ export const LongList: Story = {
 export const WithoutSearch: Story = {
   render() {
     return (
-      <Command className="w-96 rounded-lg border border-gray-200 p-2">
+      <Command className="border-gray-200 w-96 rounded-lg border p-2">
         <Command.List className="max-h-80 overflow-auto py-2">
-          <Command.Item className="flex cursor-pointer items-center gap-2 rounded px-3 py-2 hover:bg-gray-100">
+          <Command.Item className="hover:bg-gray-100 flex cursor-pointer items-center gap-2 rounded-sm px-3 py-2">
             <User className="h-4 w-4" />
             <span>Profile</span>
           </Command.Item>
-          <Command.Item className="flex cursor-pointer items-center gap-2 rounded px-3 py-2 hover:bg-gray-100">
+          <Command.Item className="hover:bg-gray-100 flex cursor-pointer items-center gap-2 rounded-sm px-3 py-2">
             <Settings className="h-4 w-4" />
             <span>Settings</span>
           </Command.Item>
-          <Command.Item className="flex cursor-pointer items-center gap-2 rounded px-3 py-2 hover:bg-gray-100">
+          <Command.Item className="hover:bg-gray-100 flex cursor-pointer items-center gap-2 rounded-sm px-3 py-2">
             <Folder className="h-4 w-4" />
             <span>Files</span>
           </Command.Item>
@@ -162,23 +168,23 @@ export const WithoutSearch: Story = {
 export const CustomStyling: Story = {
   render() {
     return (
-      <Command className="w-96 rounded-lg border-2 border-blue-300 bg-blue-50 p-2 shadow-lg">
+      <Command className="border-blue-300 bg-blue-50 shadow-lg w-96 rounded-lg border-2 p-2">
         <Command.Input
           placeholder="Search with custom styling..."
-          className="h-9 w-full bg-transparent py-3 text-sm text-blue-900 outline-none placeholder:text-blue-400"
+          className="text-blue-900 placeholder:text-blue-400 h-9 w-full bg-transparent py-3 text-13 outline-none"
         />
         <Command.List className="max-h-80 overflow-auto py-2">
-          <Command.Item className="cursor-pointer rounded px-3 py-2 text-blue-900 hover:bg-blue-200">
+          <Command.Item className="text-blue-900 hover:bg-blue-200 cursor-pointer rounded-sm px-3 py-2">
             Custom Item 1
           </Command.Item>
-          <Command.Item className="cursor-pointer rounded px-3 py-2 text-blue-900 hover:bg-blue-200">
+          <Command.Item className="text-blue-900 hover:bg-blue-200 cursor-pointer rounded-sm px-3 py-2">
             Custom Item 2
           </Command.Item>
-          <Command.Item className="cursor-pointer rounded px-3 py-2 text-blue-900 hover:bg-blue-200">
+          <Command.Item className="text-blue-900 hover:bg-blue-200 cursor-pointer rounded-sm px-3 py-2">
             Custom Item 3
           </Command.Item>
         </Command.List>
-        <Command.Empty className="py-6 text-center text-sm text-blue-500">No matching items found.</Command.Empty>
+        <Command.Empty className="text-blue-500 py-6 text-center text-13">No matching items found.</Command.Empty>
       </Command>
     );
   },
@@ -187,16 +193,16 @@ export const CustomStyling: Story = {
 export const DisabledItems: Story = {
   render() {
     return (
-      <Command className="w-96 rounded-lg border border-gray-200 p-2">
-        <Command.Input placeholder="Search..." className="h-9 w-full bg-transparent py-3 text-sm outline-none" />
+      <Command className="border-gray-200 w-96 rounded-lg border p-2">
+        <Command.Input placeholder="Search..." className="h-9 w-full bg-transparent py-3 text-13 outline-none" />
         <Command.List className="max-h-80 overflow-auto py-2">
-          <Command.Item className="cursor-pointer rounded px-3 py-2 hover:bg-gray-100">Active Item 1</Command.Item>
-          <Command.Item disabled className="cursor-not-allowed rounded px-3 py-2 opacity-50">
+          <Command.Item className="hover:bg-gray-100 cursor-pointer rounded-sm px-3 py-2">Active Item 1</Command.Item>
+          <Command.Item disabled className="cursor-not-allowed rounded-sm px-3 py-2 opacity-50">
             Disabled Item
           </Command.Item>
-          <Command.Item className="cursor-pointer rounded px-3 py-2 hover:bg-gray-100">Active Item 2</Command.Item>
+          <Command.Item className="hover:bg-gray-100 cursor-pointer rounded-sm px-3 py-2">Active Item 2</Command.Item>
         </Command.List>
-        <Command.Empty className="py-6 text-center text-sm text-gray-500">No results found.</Command.Empty>
+        <Command.Empty className="text-gray-500 py-6 text-center text-13">No results found.</Command.Empty>
       </Command>
     );
   },
diff --git a/packages/propel/src/command/command.tsx b/packages/propel/src/command/command.tsx
index e462a7f2d..d87b332a0 100644
--- a/packages/propel/src/command/command.tsx
+++ b/packages/propel/src/command/command.tsx
@@ -1,6 +1,12 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 import { Command as CommandPrimitive } from "cmdk";
-import { SearchIcon } from "lucide-react";
+import { SearchIcon } from "../icons";
 import { cn } from "../utils/classname";
 
 function CommandComponent({ className, ...props }: React.ComponentProps<typeof CommandPrimitive>) {
@@ -11,9 +17,9 @@ function CommandInput({ className, ...props }: React.ComponentProps<typeof Comma
   return (
     <div
       data-slot="command-input-wrapper"
-      className="flex items-center gap-1.5 rounded border border-custom-border-100 bg-custom-background-90 px-2"
+      className="flex items-center gap-1.5 rounded-sm border border-subtle bg-surface-2 px-2"
     >
-      <SearchIcon className="size-3.5 flex-shrink-0 text-custom-text-400" strokeWidth={1.5} />
+      <SearchIcon className="size-3.5 flex-shrink-0 text-placeholder" strokeWidth={1.5} />
       <CommandPrimitive.Input data-slot="command-input" className={cn(className)} {...props} />
     </div>
   );
diff --git a/packages/propel/src/command/index.ts b/packages/propel/src/command/index.ts
index f4c8ea9e0..0fc4f85f9 100644
--- a/packages/propel/src/command/index.ts
+++ b/packages/propel/src/command/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./command";
diff --git a/packages/propel/src/context-menu/context-menu.stories.tsx b/packages/propel/src/context-menu/context-menu.stories.tsx
index a378dbd19..7ce5f3ece 100644
--- a/packages/propel/src/context-menu/context-menu.stories.tsx
+++ b/packages/propel/src/context-menu/context-menu.stories.tsx
@@ -1,5 +1,12 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { Meta, StoryObj } from "@storybook/react-vite";
-import { Copy, Download, Edit, Share, Trash, Star, Archive } from "lucide-react";
+import { Download, Edit, Share, Star, Archive } from "lucide-react";
+import { CopyIcon, TrashIcon } from "../icons";
 import { ChevronRightIcon } from "../icons/arrows/chevron-right";
 import { ContextMenu } from "./context-menu";
 
@@ -33,7 +40,7 @@ export const Default: Story = {
     return (
       <ContextMenu>
         <ContextMenu.Trigger>
-          <div className="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed border-custom-border-300 text-sm">
+          <div className="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed border-strong text-13">
             Right click here
           </div>
         </ContextMenu.Trigger>
@@ -56,14 +63,14 @@ export const WithIcons: Story = {
     return (
       <ContextMenu>
         <ContextMenu.Trigger>
-          <div className="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed border-custom-border-300 text-sm">
+          <div className="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed border-strong text-13">
             Right click here
           </div>
         </ContextMenu.Trigger>
         <ContextMenu.Portal>
           <ContextMenu.Content>
             <ContextMenu.Item>
-              <Copy className="mr-2 h-4 w-4" />
+              <CopyIcon className="mr-2 h-4 w-4" />
               Copy
             </ContextMenu.Item>
             <ContextMenu.Item>
@@ -80,8 +87,8 @@ export const WithIcons: Story = {
               Share
             </ContextMenu.Item>
             <ContextMenu.Item>
-              <Trash className="mr-2 h-4 w-4 text-red-500" />
-              <span className="text-red-500">Delete</span>
+              <TrashIcon className="mr-2 h-4 w-4 text-danger-primary" />
+              <span className="text-danger-primary">Delete</span>
             </ContextMenu.Item>
           </ContextMenu.Content>
         </ContextMenu.Portal>
@@ -95,14 +102,14 @@ export const WithSubmenus: Story = {
     return (
       <ContextMenu>
         <ContextMenu.Trigger>
-          <div className="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed border-custom-border-300 text-sm">
+          <div className="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed border-strong text-13">
             Right click here
           </div>
         </ContextMenu.Trigger>
         <ContextMenu.Portal>
           <ContextMenu.Content>
             <ContextMenu.Item>
-              <Copy className="mr-2 h-4 w-4" />
+              <CopyIcon className="mr-2 h-4 w-4" />
               Copy
             </ContextMenu.Item>
             <ContextMenu.Item>
@@ -126,8 +133,8 @@ export const WithSubmenus: Story = {
             </ContextMenu.Submenu>
             <ContextMenu.Separator />
             <ContextMenu.Item>
-              <Trash className="mr-2 h-4 w-4 text-red-500" />
-              <span className="text-red-500">Delete</span>
+              <TrashIcon className="mr-2 h-4 w-4 text-danger-primary" />
+              <span className="text-danger-primary">Delete</span>
             </ContextMenu.Item>
           </ContextMenu.Content>
         </ContextMenu.Portal>
@@ -141,14 +148,14 @@ export const DisabledItems: Story = {
     return (
       <ContextMenu>
         <ContextMenu.Trigger>
-          <div className="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed border-custom-border-300 text-sm">
+          <div className="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed border-strong text-13">
             Right click here
           </div>
         </ContextMenu.Trigger>
         <ContextMenu.Portal>
           <ContextMenu.Content>
             <ContextMenu.Item>
-              <Copy className="mr-2 h-4 w-4" />
+              <CopyIcon className="mr-2 h-4 w-4" />
               Copy
             </ContextMenu.Item>
             <ContextMenu.Item disabled>
@@ -165,8 +172,8 @@ export const DisabledItems: Story = {
               Share (Disabled)
             </ContextMenu.Item>
             <ContextMenu.Item>
-              <Trash className="mr-2 h-4 w-4 text-red-500" />
-              <span className="text-red-500">Delete</span>
+              <TrashIcon className="mr-2 h-4 w-4 text-danger-primary" />
+              <span className="text-danger-primary">Delete</span>
             </ContextMenu.Item>
           </ContextMenu.Content>
         </ContextMenu.Portal>
@@ -180,14 +187,14 @@ export const OnFileCard: Story = {
     return (
       <ContextMenu>
         <ContextMenu.Trigger>
-          <div className="w-64 p-4 border border-custom-border-200 rounded-lg hover:bg-custom-background-80 cursor-pointer">
+          <div className="w-64 cursor-pointer rounded-lg border border-subtle p-4 hover:bg-layer-1">
             <div className="flex items-center gap-3">
-              <div className="w-12 h-12 bg-custom-primary-100 rounded flex items-center justify-center text-white text-lg">
+              <div className="flex h-12 w-12 items-center justify-center rounded-sm bg-accent-primary text-16 text-on-color">
                 📄
               </div>
               <div className="flex-1">
                 <div className="font-medium">Document.pdf</div>
-                <div className="text-sm text-custom-text-400">2.4 MB</div>
+                <div className="text-13 text-placeholder">2.4 MB</div>
               </div>
             </div>
           </div>
@@ -199,7 +206,7 @@ export const OnFileCard: Story = {
               Download
             </ContextMenu.Item>
             <ContextMenu.Item>
-              <Copy className="mr-2 h-4 w-4" />
+              <CopyIcon className="mr-2 h-4 w-4" />
               Copy Link
             </ContextMenu.Item>
             <ContextMenu.Item>
@@ -212,8 +219,8 @@ export const OnFileCard: Story = {
               Archive
             </ContextMenu.Item>
             <ContextMenu.Item>
-              <Trash className="mr-2 h-4 w-4 text-red-500" />
-              <span className="text-red-500">Delete</span>
+              <TrashIcon className="mr-2 h-4 w-4 text-danger-primary" />
+              <span className="text-danger-primary">Delete</span>
             </ContextMenu.Item>
           </ContextMenu.Content>
         </ContextMenu.Portal>
@@ -227,10 +234,8 @@ export const OnImage: Story = {
     return (
       <ContextMenu>
         <ContextMenu.Trigger>
-          <div className="relative w-80 h-56 bg-custom-background-80 rounded-lg overflow-hidden cursor-pointer">
-            <div className="absolute inset-0 flex items-center justify-center text-custom-text-400">
-              Image Placeholder
-            </div>
+          <div className="relative h-56 w-80 cursor-pointer overflow-hidden rounded-lg bg-layer-1">
+            <div className="absolute inset-0 flex items-center justify-center text-placeholder">Image Placeholder</div>
           </div>
         </ContextMenu.Trigger>
         <ContextMenu.Portal>
@@ -240,11 +245,11 @@ export const OnImage: Story = {
               Save Image
             </ContextMenu.Item>
             <ContextMenu.Item>
-              <Copy className="mr-2 h-4 w-4" />
+              <CopyIcon className="mr-2 h-4 w-4" />
               Copy Image
             </ContextMenu.Item>
             <ContextMenu.Item>
-              <Copy className="mr-2 h-4 w-4" />
+              <CopyIcon className="mr-2 h-4 w-4" />
               Copy Image URL
             </ContextMenu.Item>
             <ContextMenu.Separator />
@@ -261,9 +266,9 @@ export const OnText: Story = {
     return (
       <ContextMenu>
         <ContextMenu.Trigger>
-          <div className="w-96 p-6 border border-custom-border-200 rounded-lg">
-            <h3 className="text-lg font-semibold mb-2">Context Menu on Text</h3>
-            <p className="text-custom-text-300">
+          <div className="w-96 rounded-lg border border-subtle p-6">
+            <h3 className="mb-2 text-16 font-semibold">Context Menu on Text</h3>
+            <p className="text-tertiary">
               Right click anywhere on this text area to see the context menu. This demonstrates how context menus can be
               applied to text content areas.
             </p>
@@ -272,7 +277,7 @@ export const OnText: Story = {
         <ContextMenu.Portal>
           <ContextMenu.Content>
             <ContextMenu.Item>
-              <Copy className="mr-2 h-4 w-4" />
+              <CopyIcon className="mr-2 h-4 w-4" />
               Copy
             </ContextMenu.Item>
             <ContextMenu.Item>
@@ -293,7 +298,7 @@ export const NestedSubmenus: Story = {
     return (
       <ContextMenu>
         <ContextMenu.Trigger>
-          <div className="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed border-custom-border-300 text-sm">
+          <div className="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed border-strong text-13">
             Right click here
           </div>
         </ContextMenu.Trigger>
@@ -329,8 +334,8 @@ export const NestedSubmenus: Story = {
             </ContextMenu.Submenu>
             <ContextMenu.Separator />
             <ContextMenu.Item>
-              <Trash className="mr-2 h-4 w-4 text-red-500" />
-              <span className="text-red-500">Delete</span>
+              <TrashIcon className="mr-2 h-4 w-4 text-danger-primary" />
+              <span className="text-danger-primary">Delete</span>
             </ContextMenu.Item>
           </ContextMenu.Content>
         </ContextMenu.Portal>
@@ -344,32 +349,32 @@ export const WithKeyboardShortcuts: Story = {
     return (
       <ContextMenu>
         <ContextMenu.Trigger>
-          <div className="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed border-custom-border-300 text-sm">
+          <div className="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed border-strong text-13">
             Right click here
           </div>
         </ContextMenu.Trigger>
         <ContextMenu.Portal>
           <ContextMenu.Content>
             <ContextMenu.Item>
-              <Copy className="mr-2 h-4 w-4" />
+              <CopyIcon className="mr-2 h-4 w-4" />
               Copy
-              <span className="ml-auto text-xs text-custom-text-400">⌘C</span>
+              <span className="ml-auto text-11 text-placeholder">⌘C</span>
             </ContextMenu.Item>
             <ContextMenu.Item>
               <Edit className="mr-2 h-4 w-4" />
               Edit
-              <span className="ml-auto text-xs text-custom-text-400">⌘E</span>
+              <span className="ml-auto text-11 text-placeholder">⌘E</span>
             </ContextMenu.Item>
             <ContextMenu.Item>
               <Download className="mr-2 h-4 w-4" />
               Download
-              <span className="ml-auto text-xs text-custom-text-400">⌘D</span>
+              <span className="ml-auto text-11 text-placeholder">⌘D</span>
             </ContextMenu.Item>
             <ContextMenu.Separator />
             <ContextMenu.Item>
-              <Trash className="mr-2 h-4 w-4 text-red-500" />
-              <span className="text-red-500">Delete</span>
-              <span className="ml-auto text-xs text-custom-text-400">⌘⌫</span>
+              <TrashIcon className="mr-2 h-4 w-4 text-danger-primary" />
+              <span className="text-danger-primary">Delete</span>
+              <span className="ml-auto text-11 text-placeholder">⌘⌫</span>
             </ContextMenu.Item>
           </ContextMenu.Content>
         </ContextMenu.Portal>
diff --git a/packages/propel/src/context-menu/context-menu.tsx b/packages/propel/src/context-menu/context-menu.tsx
index c135470e1..e5d0211a8 100644
--- a/packages/propel/src/context-menu/context-menu.tsx
+++ b/packages/propel/src/context-menu/context-menu.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 import { ContextMenu as ContextMenuPrimitive } from "@base-ui-components/react/context-menu";
 import { cn } from "../utils";
@@ -59,7 +65,7 @@ const ContextMenuContent = React.forwardRef(function ContextMenuContent(
     >
       <ContextMenuPrimitive.Popup
         className={cn(
-          "z-50 min-w-32 overflow-hidden rounded-md border border-custom-border-200 bg-custom-background-100 p-1 shadow-md",
+          "shadow-md z-50 min-w-32 overflow-hidden rounded-md border border-subtle bg-surface-1 p-1",
           "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
           "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
           "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2",
@@ -81,8 +87,8 @@ const ContextMenuItem = React.forwardRef(function ContextMenuItem(
     <ContextMenuPrimitive.Item
       ref={ref}
       className={cn(
-        "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none",
-        "focus:bg-custom-background-90 focus:text-custom-text-100",
+        "relative flex cursor-default items-center rounded-xs px-2 py-1.5 text-13 outline-none select-none",
+        "focus:bg-surface-2 focus:text-primary",
         "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
         className
       )}
@@ -99,11 +105,7 @@ const ContextMenuSeparator = React.forwardRef(function ContextMenuSeparator(
   ref: React.ForwardedRef<React.ElementRef<typeof ContextMenuPrimitive.Separator>>
 ) {
   return (
-    <ContextMenuPrimitive.Separator
-      ref={ref}
-      className={cn("-mx-1 my-1 h-px bg-custom-border-200", className)}
-      {...props}
-    />
+    <ContextMenuPrimitive.Separator ref={ref} className={cn("bg-subtle-1 -mx-1 my-1 h-px", className)} {...props} />
   );
 });
 
@@ -117,8 +119,8 @@ const ContextMenuSubmenuTrigger = React.forwardRef(function ContextMenuSubmenuTr
     <ContextMenuPrimitive.SubmenuTrigger
       ref={ref}
       className={cn(
-        "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:outline-none",
-        "focus:bg-custom-background-90 data-[state=open]:bg-custom-background-90",
+        "flex cursor-default items-center rounded-xs px-2 py-1.5 text-13 outline-none select-none focus:outline-none",
+        "focus:bg-surface-2 data-[state=open]:bg-surface-2",
         className
       )}
       {...props}
diff --git a/packages/propel/src/context-menu/index.ts b/packages/propel/src/context-menu/index.ts
index 7a0cbc670..ff80b8eae 100644
--- a/packages/propel/src/context-menu/index.ts
+++ b/packages/propel/src/context-menu/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export { ContextMenu } from "./context-menu";
 export type {
   ContextMenuProps,
diff --git a/packages/propel/src/design-system/design-system-philosophy.stories.tsx b/packages/propel/src/design-system/design-system-philosophy.stories.tsx
new file mode 100644
index 000000000..e6a2167cd
--- /dev/null
+++ b/packages/propel/src/design-system/design-system-philosophy.stories.tsx
@@ -0,0 +1,434 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+const meta = {
+  title: "Design System/Philosophy",
+  parameters: {
+    layout: "fullscreen",
+    docs: {
+      description: {
+        component: `
+# Design System Philosophy
+
+Reusable, composable Storybook stories that demonstrate Canvas, Surface, and Layer concepts.
+
+Key concepts and rules are preserved, but the implementation is componentized for DRYness and clarity.
+        `,
+      },
+    },
+  },
+  tags: ["autodocs"],
+} satisfies Meta;
+
+export default meta;
+export type Story = StoryObj<typeof meta>;
+
+/* -----------------------------
+   Reusable UI building blocks
+   -----------------------------*/
+
+type ContainerProps = {
+  children?: React.ReactNode;
+  className?: string;
+};
+
+const DemoRoot: React.FC<ContainerProps> = ({ children, className = "" }) => (
+  <div className={`p-8 ${className}`}>{children}</div>
+);
+
+const Info: React.FC<{ title: string; children?: React.ReactNode; tone?: "info" | "warn" }> = ({
+  title,
+  children,
+  tone = "info",
+}) => (
+  <div
+    className={`mb-4 rounded-md border ${tone === "warn" ? "bg-red-50 border-danger-strong p-4" : "border-subtle bg-layer-1 p-4"}`}
+  >
+    <h3 className={`mb-2 text-16 font-semibold text-primary`}>{title}</h3>
+    <div className="text-13 text-secondary">{children}</div>
+  </div>
+);
+
+const Surface: React.FC<ContainerProps> = ({ children, className = "bg-surface-1 rounded-md p-6" }) => (
+  <div className={className}>{children}</div>
+);
+
+const Layer: React.FC<ContainerProps & { hover?: boolean }> = ({
+  children,
+  className = "bg-layer-1 hover:bg-layer-1-hover rounded-md p-4",
+}) => <div className={`${className} transition-colors`}>{children}</div>;
+
+/* Small helpers to keep stories concise */
+const TwoColGrid: React.FC<{ children: React.ReactNode }> = ({ children }) => (
+  <div className="grid grid-cols-2 gap-6">{children}</div>
+);
+
+/* -----------------------------
+   Stories (using the building blocks)
+   -----------------------------*/
+
+export const ApplicationRoot: Story = {
+  render: () => (
+    <DemoRoot>
+      <Info title="✅ Application Root Pattern">
+        This is the <strong>bg-canvas</strong> - the application-level background. It should only appear{" "}
+        <strong>once</strong> in your entire application at the root level.
+      </Info>
+
+      <Surface>
+        <h4 className="mb-2 font-semibold text-primary">Page Content (bg-surface-1)</h4>
+        <p className="text-13 text-secondary">Pages use surfaces, not canvas. This is a typical page layout.</p>
+      </Surface>
+    </DemoRoot>
+  ),
+};
+
+export const SurfaceSiblings: Story = {
+  render: () => (
+    <DemoRoot>
+      <Info title="✅ Surface Siblings Pattern">
+        Surfaces are <strong>siblings</strong>, not nested.
+      </Info>
+
+      <TwoColGrid>
+        <Surface>
+          <h4 className="mb-2 font-semibold text-primary">Surface 1</h4>
+          <p className="text-13 text-secondary">This is bg-surface-1 - a primary surface</p>
+        </Surface>
+
+        <Surface className="rounded-md bg-surface-2 p-6">
+          <h4 className="mb-2 font-semibold text-primary">Surface 2</h4>
+          <p className="text-13 text-secondary">This is bg-surface-2 - a secondary surface (sibling to surface-1)</p>
+        </Surface>
+      </TwoColGrid>
+    </DemoRoot>
+  ),
+};
+
+export const LayerStacking: Story = {
+  render: () => (
+    <DemoRoot>
+      <Info title="✅ Layer Stacking Pattern">Layers stack to create depth: Surface → Layer 1 → Layer 2 → Layer 3</Info>
+
+      <Surface>
+        <h4 className="mb-3 font-semibold text-primary">Surface 1</h4>
+
+        <Layer className="mb-4 rounded-md bg-layer-1 p-4 hover:bg-layer-1-hover">
+          <h5 className="mb-2 font-medium text-primary">Layer 1 (First level of depth)</h5>
+          <p className="mb-3 text-13 text-secondary">Hover over me to see the hover state</p>
+
+          <Layer className="rounded-md bg-layer-2 p-3 hover:bg-layer-2-hover">
+            <h6 className="mb-2 text-13 font-medium text-primary">Layer 2 (Second level)</h6>
+            <p className="mb-2 text-13 text-secondary">Nested within Layer 1</p>
+
+            <Layer className="rounded-md bg-layer-3 p-2 hover:bg-layer-3-hover" hover>
+              <p className="text-11 font-medium text-primary">Layer 3 (Third level)</p>
+              <p className="text-11 text-secondary">Deepest nesting level</p>
+            </Layer>
+          </Layer>
+        </Layer>
+      </Surface>
+    </DemoRoot>
+  ),
+};
+
+export const SurfaceLayerAssociation: Story = {
+  render: () => (
+    <DemoRoot>
+      <Info title="✅ Surface-Layer Association">
+        Each surface should use its corresponding layer: surface-1 → layer-1, surface-2 → layer-2. Very rare exception:
+        inputs/buttons can go one level above for visual separation.
+      </Info>
+
+      <TwoColGrid>
+        <Surface>
+          <h4 className="mb-3 font-semibold text-primary">Surface 1</h4>
+          <Layer className="rounded-md bg-layer-1 p-4 hover:bg-layer-1-hover">
+            <h5 className="mb-1 font-medium text-primary">Layer 1</h5>
+            <p className="text-13 text-secondary">Correctly using layer-1 with surface-1</p>
+          </Layer>
+        </Surface>
+
+        <Surface className="rounded-md bg-surface-2 p-6">
+          <h4 className="mb-3 font-semibold text-primary">Surface 2</h4>
+          <Layer className="rounded-md bg-layer-2 p-4 hover:bg-layer-2-hover">
+            <h5 className="mb-1 font-medium text-primary">Layer 2</h5>
+            <p className="text-13 text-secondary">Correctly using layer-2 with surface-2</p>
+          </Layer>
+        </Surface>
+      </TwoColGrid>
+
+      <div className="mt-6">
+        <Info title="✅ Rare Exception: Visual Separation for Form Elements">
+          In very rare cases, form elements (inputs, buttons, switches) can use one level above for visual separation.
+        </Info>
+        <Surface>
+          <h4 className="mb-3 font-semibold text-primary">Modal with Input (Rare Exception)</h4>
+          <div className="space-y-3">
+            <div>
+              <label htmlFor="example-input" className="text-13 text-secondary">
+                Name
+              </label>
+              <input
+                id="example-input"
+                className="mt-1 w-full rounded-md border border-subtle bg-layer-2 px-3 py-2 text-primary"
+                placeholder="Input uses layer-2 for visual separation"
+              />
+              <p className="mt-1 text-11 text-tertiary">
+                Input uses bg-layer-2 (one level above) for visual separation from modal surface
+              </p>
+            </div>
+          </div>
+        </Surface>
+      </div>
+    </DemoRoot>
+  ),
+};
+
+export const ModalException: Story = {
+  render: () => (
+    <DemoRoot>
+      <Info title="✅ Modal Exception Pattern">
+        Modals exist on a <strong>different plane</strong>, so they can use surfaces even when there&apos;s a surface
+        below
+      </Info>
+
+      <Surface>
+        <h4 className="mb-2 font-semibold text-primary">Main Page Content</h4>
+        <p className="text-13 text-secondary">This is the main page using bg-surface-1</p>
+      </Surface>
+
+      <div className="fixed inset-0 z-50 flex items-center justify-center">
+        <div className="absolute inset-0 bg-backdrop" />
+        <div className="shadow-lg relative z-10 max-w-md rounded-lg bg-surface-1 p-6">
+          <h4 className="mb-3 font-semibold text-primary">Modal Dialog</h4>
+          <p className="mb-4 text-13 text-secondary">
+            This modal uses bg-surface-1 even though the page below also uses bg-surface-1. This is allowed because
+            they&apos;re on different planes.
+          </p>
+
+          <Layer className="rounded-md bg-layer-1 p-3 hover:bg-layer-1-hover">
+            <p className="text-13 text-primary">Modal content can use layers as normal</p>
+          </Layer>
+        </div>
+      </div>
+    </DemoRoot>
+  ),
+};
+
+export const CardListPattern: Story = {
+  render: () => (
+    <DemoRoot>
+      <Info title="✅ Card List Pattern">Common pattern: Surface containing multiple layer-1 cards</Info>
+
+      <Surface>
+        <h4 className="mb-4 font-semibold text-primary">Task List</h4>
+        <div className="space-y-3">
+          {[1, 2, 3].map((item) => (
+            <Layer key={item} className="rounded-md bg-layer-1 p-4 hover:bg-layer-1-hover">
+              <h5 className="mb-1 font-medium text-primary">Task {item}</h5>
+              <p className="text-13 text-secondary">This is a task card using bg-layer-1 with hover state</p>
+            </Layer>
+          ))}
+        </div>
+      </Surface>
+    </DemoRoot>
+  ),
+};
+
+export const SidebarLayoutPattern: Story = {
+  render: () => (
+    <DemoRoot>
+      <Info title="✅ Sidebar Layout Pattern">
+        Sidebar and main content are both part of the same surface. Sidebar menu items use transparent backgrounds with
+        hover states.
+      </Info>
+
+      <Surface className="flex rounded-md bg-surface-1">
+        <aside className="w-64 border-r border-subtle p-4">
+          <h4 className="mb-3 font-semibold text-primary">Sidebar</h4>
+          <div className="space-y-2">
+            {["Home", "Projects", "Settings"].map((item) => (
+              <div key={item} className="rounded-md p-2 transition-colors hover:bg-layer-1-hover">
+                <p className="text-13 text-primary">{item}</p>
+              </div>
+            ))}
+          </div>
+        </aside>
+
+        <main className="flex-1 p-6">
+          <h4 className="mb-3 font-semibold text-primary">Main Content</h4>
+          <Layer className="rounded-md bg-layer-1 p-4 hover:bg-layer-1-hover">
+            <p className="text-primary">Content card using layer-1</p>
+          </Layer>
+        </main>
+      </Surface>
+    </DemoRoot>
+  ),
+};
+
+export const StateVariants: Story = {
+  render: () => (
+    <DemoRoot>
+      <Info title="✅ State Variants">Demonstrating hover, active, and selected states</Info>
+
+      <Surface>
+        <div className="space-y-4">
+          <Layer className="rounded-md bg-layer-1 p-4 hover:bg-layer-1-hover">
+            <h5 className="mb-1 font-medium text-primary">Hover State</h5>
+            <p className="text-13 text-secondary">Hover over me to see bg-layer-1-hover</p>
+          </Layer>
+
+          <div className="rounded-md bg-layer-1-active p-4">
+            <h5 className="mb-1 font-medium text-primary">Active State</h5>
+            <p className="text-13 text-secondary">Using bg-layer-1-active (pressed/active)</p>
+          </div>
+
+          <div className="rounded-md bg-layer-1-selected p-4">
+            <h5 className="mb-1 font-medium text-primary">Selected State</h5>
+            <p className="text-13 text-secondary">Using bg-layer-1-selected (when selected)</p>
+          </div>
+        </div>
+      </Surface>
+    </DemoRoot>
+  ),
+};
+
+export const TextColorHierarchy: Story = {
+  render: () => (
+    <DemoRoot>
+      <Info title="✅ Text Color Hierarchy">Semantic text colors for different importance levels</Info>
+
+      <Surface>
+        <div className="rounded-md bg-layer-1 p-4">
+          <h4 className="mb-3 text-16 font-semibold text-primary">Primary Text</h4>
+          <p className="mb-3 text-secondary">Secondary text for descriptions and supporting content</p>
+          <p className="mb-3 text-13 text-tertiary">Tertiary text for labels and metadata</p>
+          <input
+            className="rounded border border-subtle px-3 py-2 placeholder-(--text-color-placeholder)"
+            placeholder="Placeholder text for inputs"
+          />
+        </div>
+      </Surface>
+    </DemoRoot>
+  ),
+};
+
+export const CompleteExample: Story = {
+  render: () => (
+    <DemoRoot>
+      <Info title="✅ Complete Example">A realistic dashboard layout using all design system concepts</Info>
+
+      <div className="mb-6 rounded-md bg-surface-1">
+        <div className="border-b border-subtle p-4">
+          <h1 className="text-18 font-bold text-primary">Dashboard</h1>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-3 gap-6">
+        {[
+          { label: "Total Users", value: "1,234" },
+          { label: "Active Projects", value: "42" },
+          { label: "Completed Tasks", value: "856" },
+        ].map((stat, idx) => (
+          <Surface key={idx}>
+            <Layer className="rounded-md bg-layer-1 p-4 hover:bg-layer-1-hover">
+              <p className="mb-1 text-13 text-tertiary">{stat.label}</p>
+              <p className="text-20 font-bold text-primary">{stat.value}</p>
+            </Layer>
+          </Surface>
+        ))}
+      </div>
+
+      <div className="mt-6 grid grid-cols-2 gap-6">
+        <Surface>
+          <h3 className="mb-4 font-semibold text-primary">Recent Activity</h3>
+          <div className="space-y-2">
+            {[1, 2, 3].map((item) => (
+              <Layer key={item} className="rounded-md bg-layer-1 p-3 hover:bg-layer-1-hover">
+                <p className="mb-1 text-13 font-medium text-primary">Activity {item}</p>
+                <p className="text-11 text-secondary">Description of the activity</p>
+              </Layer>
+            ))}
+          </div>
+        </Surface>
+
+        <Surface className="rounded-md bg-surface-2 p-6">
+          <h3 className="mb-4 font-semibold text-primary">Quick Actions</h3>
+          <div className="space-y-2">
+            {["Create Project", "Invite Team", "View Reports"].map((action) => (
+              <Layer key={action} className="rounded-md bg-layer-2 p-3 hover:bg-layer-2-hover">
+                <p className="text-13 text-primary">{action}</p>
+              </Layer>
+            ))}
+          </div>
+        </Surface>
+      </div>
+    </DemoRoot>
+  ),
+};
+
+export const CommonMistakes: Story = {
+  render: () => (
+    <DemoRoot>
+      <Info title="❌ Common Mistakes to Avoid" tone="warn">
+        These examples show incorrect usage patterns
+      </Info>
+
+      <div className="space-y-6">
+        <div className="rounded-md border-2 border-danger-strong p-4">
+          <h4 className="mb-2 font-semibold text-primary">❌ Mistake 1: Nested Surfaces (Same Plane)</h4>
+          <Surface>
+            <p className="mb-2 text-13 text-secondary">Surface 1</p>
+            <div className="rounded-md bg-surface-2 p-4">
+              <p className="text-13 text-secondary">Surface 2 nested inside Surface 1 - WRONG!</p>
+            </div>
+          </Surface>
+          <p className="mt-2 text-11 text-tertiary">
+            ✅ Fix: Use bg-layer-1 for nested elements, or make them sibling surfaces
+          </p>
+        </div>
+
+        <div className="rounded-md border-2 border-danger-strong p-4">
+          <h4 className="mb-2 font-semibold text-primary">❌ Mistake 2: Wrong Layer-Surface Association</h4>
+          <Surface>
+            <p className="mb-2 text-13 text-secondary">Surface 1</p>
+            <div className="rounded-md bg-layer-2 p-4">
+              <p className="text-13 text-secondary">Using layer-2 with surface-1 for content box - WRONG!</p>
+            </div>
+          </Surface>
+          <p className="mt-2 text-11 text-tertiary">
+            ✅ Fix: Use bg-layer-1 with bg-surface-1 for content boxes. Exception: Very rare cases for inputs/buttons
+            that need visual separation (e.g., input in modal can use bg-layer-2 for separation).
+          </p>
+        </div>
+
+        <div className="rounded-md border-2 border-danger-strong p-4">
+          <h4 className="mb-2 font-semibold text-primary">❌ Mistake 3: Mismatched Hover State</h4>
+          <Surface>
+            <div className="rounded-md bg-layer-1 p-4 transition-colors hover:bg-layer-2-hover">
+              <p className="text-13 text-secondary">bg-layer-1 with hover:bg-layer-2-hover - WRONG!</p>
+            </div>
+          </Surface>
+          <p className="mt-2 text-11 text-tertiary">✅ Fix: Use bg-layer-1 hover:bg-layer-1-hover</p>
+        </div>
+
+        <div className="rounded-md border-2 border-danger-strong p-4">
+          <h4 className="mb-2 font-semibold text-primary">❌ Mistake 4: Canvas for Pages</h4>
+          <div className="rounded-md bg-canvas p-4">
+            <p className="text-13 text-secondary">Using bg-canvas for a page or component - WRONG!</p>
+          </div>
+          <p className="mt-2 text-11 text-tertiary">
+            ✅ Fix: Canvas should only be at application root. Use bg-surface-1 for pages
+          </p>
+        </div>
+      </div>
+    </DemoRoot>
+  ),
+};
diff --git a/packages/propel/src/dialog/dialog.stories.tsx b/packages/propel/src/dialog/dialog.stories.tsx
index cf9ccff56..fb9b17bca 100644
--- a/packages/propel/src/dialog/dialog.stories.tsx
+++ b/packages/propel/src/dialog/dialog.stories.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useState } from "react";
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { useArgs } from "storybook/preview-api";
@@ -26,7 +32,10 @@ const meta = {
 
     return (
       <>
-        <button onClick={() => setOpen(true)} className="rounded bg-blue-500 px-4 py-2 text-white hover:bg-blue-600">
+        <button
+          onClick={() => setOpen(true)}
+          className="bg-blue-500 hover:bg-blue-600 rounded-sm px-4 py-2 text-on-color"
+        >
           Open Dialog
         </button>
         {open && (
@@ -35,18 +44,18 @@ const meta = {
               <div className="p-6">
                 <Dialog.Title>Dialog Title</Dialog.Title>
                 <div className="mt-4">
-                  <p className="text-sm text-gray-600">This is the dialog content. You can put any content here.</p>
+                  <p className="text-gray-600 text-13">This is the dialog content. You can put any content here.</p>
                 </div>
                 <div className="mt-6 flex justify-end gap-2">
                   <button
                     onClick={() => setOpen(false)}
-                    className="rounded bg-gray-200 px-4 py-2 text-sm hover:bg-gray-300"
+                    className="bg-gray-200 hover:bg-gray-300 rounded-sm px-4 py-2 text-13"
                   >
                     Cancel
                   </button>
                   <button
                     onClick={() => setOpen(false)}
-                    className="rounded bg-blue-500 px-4 py-2 text-sm text-white hover:bg-blue-600"
+                    className="bg-blue-500 hover:bg-blue-600 rounded-sm px-4 py-2 text-13 text-on-color"
                   >
                     Confirm
                   </button>
@@ -74,7 +83,10 @@ export const TopPosition: Story = {
     const [open, setOpen] = useState(args.open);
     return (
       <>
-        <button onClick={() => setOpen(true)} className="rounded bg-blue-500 px-4 py-2 text-white hover:bg-blue-600">
+        <button
+          onClick={() => setOpen(true)}
+          className="bg-blue-500 hover:bg-blue-600 rounded-sm px-4 py-2 text-on-color"
+        >
           Open Dialog (Top)
         </button>
         {open && (
@@ -83,14 +95,14 @@ export const TopPosition: Story = {
               <div className="p-6">
                 <Dialog.Title>Top Positioned Dialog</Dialog.Title>
                 <div className="mt-4">
-                  <p className="text-sm text-gray-600">
+                  <p className="text-gray-600 text-13">
                     This dialog appears at the top of the screen instead of centered.
                   </p>
                 </div>
                 <div className="mt-6 flex justify-end gap-2">
                   <button
                     onClick={() => setOpen(false)}
-                    className="rounded bg-gray-200 px-4 py-2 text-sm hover:bg-gray-300"
+                    className="bg-gray-200 hover:bg-gray-300 rounded-sm px-4 py-2 text-13"
                   >
                     Close
                   </button>
@@ -109,7 +121,10 @@ export const SmallWidth: Story = {
     const [open, setOpen] = useState(args.open);
     return (
       <>
-        <button onClick={() => setOpen(true)} className="rounded bg-blue-500 px-4 py-2 text-white hover:bg-blue-600">
+        <button
+          onClick={() => setOpen(true)}
+          className="bg-blue-500 hover:bg-blue-600 rounded-sm px-4 py-2 text-on-color"
+        >
           Open Small Dialog
         </button>
         {open && (
@@ -118,12 +133,12 @@ export const SmallWidth: Story = {
               <div className="p-6">
                 <Dialog.Title>Small Dialog</Dialog.Title>
                 <div className="mt-4">
-                  <p className="text-sm text-gray-600">This is a small dialog.</p>
+                  <p className="text-gray-600 text-13">This is a small dialog.</p>
                 </div>
                 <div className="mt-6 flex justify-end">
                   <button
                     onClick={() => setOpen(false)}
-                    className="rounded bg-blue-500 px-4 py-2 text-sm text-white hover:bg-blue-600"
+                    className="bg-blue-500 hover:bg-blue-600 rounded-sm px-4 py-2 text-13 text-on-color"
                   >
                     Close
                   </button>
@@ -142,7 +157,10 @@ export const LargeWidth: Story = {
     const [open, setOpen] = useState(args.open);
     return (
       <>
-        <button onClick={() => setOpen(true)} className="rounded bg-blue-500 px-4 py-2 text-white hover:bg-blue-600">
+        <button
+          onClick={() => setOpen(true)}
+          className="bg-blue-500 hover:bg-blue-600 rounded-sm px-4 py-2 text-on-color"
+        >
           Open Large Dialog
         </button>
         {open && (
@@ -151,14 +169,14 @@ export const LargeWidth: Story = {
               <div className="p-6">
                 <Dialog.Title>Large Dialog</Dialog.Title>
                 <div className="mt-4">
-                  <p className="text-sm text-gray-600">
+                  <p className="text-gray-600 text-13">
                     This is a large dialog with more horizontal space for content.
                   </p>
                 </div>
                 <div className="mt-6 flex justify-end">
                   <button
                     onClick={() => setOpen(false)}
-                    className="rounded bg-blue-500 px-4 py-2 text-sm text-white hover:bg-blue-600"
+                    className="bg-blue-500 hover:bg-blue-600 rounded-sm px-4 py-2 text-13 text-on-color"
                   >
                     Close
                   </button>
@@ -177,7 +195,10 @@ export const WithCloseButton: Story = {
     const [open, setOpen] = useState(args.open);
     return (
       <>
-        <button onClick={() => setOpen(true)} className="rounded bg-blue-500 px-4 py-2 text-white hover:bg-blue-600">
+        <button
+          onClick={() => setOpen(true)}
+          className="bg-blue-500 hover:bg-blue-600 rounded-sm px-4 py-2 text-on-color"
+        >
           Open Dialog with Close Button
         </button>
         {open && (
@@ -186,12 +207,12 @@ export const WithCloseButton: Story = {
               <div className="p-6">
                 <div className="flex items-start justify-between">
                   <Dialog.Title>Dialog with Close Button</Dialog.Title>
-                  <button onClick={() => setOpen(false)} className="rounded-full p-1 hover:bg-gray-100">
+                  <button onClick={() => setOpen(false)} className="hover:bg-gray-100 rounded-full p-1">
                     <CloseIcon className="h-4 w-4" />
                   </button>
                 </div>
                 <div className="mt-4">
-                  <p className="text-sm text-gray-600">This dialog has a close button in the header.</p>
+                  <p className="text-gray-600 text-13">This dialog has a close button in the header.</p>
                 </div>
               </div>
             </Dialog.Panel>
@@ -211,7 +232,10 @@ export const ConfirmationDialog: Story = {
     };
     return (
       <>
-        <button onClick={() => setOpen(true)} className="rounded bg-red-500 px-4 py-2 text-white hover:bg-red-600">
+        <button
+          onClick={() => setOpen(true)}
+          className="bg-red-500 hover:bg-red-600 rounded-sm px-4 py-2 text-on-color"
+        >
           Delete Item
         </button>
         {open && (
@@ -220,20 +244,20 @@ export const ConfirmationDialog: Story = {
               <div className="p-6">
                 <Dialog.Title>Confirm Deletion</Dialog.Title>
                 <div className="mt-4">
-                  <p className="text-sm text-gray-600">
+                  <p className="text-gray-600 text-13">
                     Are you sure you want to delete this item? This action cannot be undone.
                   </p>
                 </div>
                 <div className="mt-6 flex justify-end gap-2">
                   <button
                     onClick={() => setOpen(false)}
-                    className="rounded bg-gray-200 px-4 py-2 text-sm hover:bg-gray-300"
+                    className="bg-gray-200 hover:bg-gray-300 rounded-sm px-4 py-2 text-13"
                   >
                     Cancel
                   </button>
                   <button
                     onClick={handleConfirm}
-                    className="rounded bg-red-500 px-4 py-2 text-sm text-white hover:bg-red-600"
+                    className="bg-red-500 hover:bg-red-600 rounded-sm px-4 py-2 text-13 text-on-color"
                   >
                     Delete
                   </button>
@@ -257,7 +281,10 @@ export const FormDialog: Story = {
     };
     return (
       <>
-        <button onClick={() => setOpen(true)} className="rounded bg-blue-500 px-4 py-2 text-white hover:bg-blue-600">
+        <button
+          onClick={() => setOpen(true)}
+          className="bg-blue-500 hover:bg-blue-600 rounded-sm px-4 py-2 text-on-color"
+        >
           Open Form
         </button>
         {open && (
@@ -267,24 +294,24 @@ export const FormDialog: Story = {
                 <Dialog.Title>Create New Item</Dialog.Title>
                 <div className="mt-4 space-y-4">
                   <div>
-                    <label htmlFor="name" className="block text-sm font-medium text-gray-700">
+                    <label htmlFor="name" className="text-gray-700 block text-13 font-medium">
                       Name
                     </label>
                     <input
                       type="text"
                       id="name"
-                      className="mt-1 w-full rounded border border-gray-300 px-3 py-2 text-sm"
+                      className="border-gray-300 mt-1 w-full rounded-sm border px-3 py-2 text-13"
                       placeholder="Enter name"
                     />
                   </div>
                   <div>
-                    <label htmlFor="description" className="block text-sm font-medium text-gray-700">
+                    <label htmlFor="description" className="text-gray-700 block text-13 font-medium">
                       Description
                     </label>
                     <textarea
                       id="description"
                       rows={3}
-                      className="mt-1 w-full rounded border border-gray-300 px-3 py-2 text-sm"
+                      className="border-gray-300 mt-1 w-full rounded-sm border px-3 py-2 text-13"
                       placeholder="Enter description"
                     />
                   </div>
@@ -293,11 +320,14 @@ export const FormDialog: Story = {
                   <button
                     type="button"
                     onClick={() => setOpen(false)}
-                    className="rounded bg-gray-200 px-4 py-2 text-sm hover:bg-gray-300"
+                    className="bg-gray-200 hover:bg-gray-300 rounded-sm px-4 py-2 text-13"
                   >
                     Cancel
                   </button>
-                  <button type="submit" className="rounded bg-blue-500 px-4 py-2 text-sm text-white hover:bg-blue-600">
+                  <button
+                    type="submit"
+                    className="bg-blue-500 hover:bg-blue-600 rounded-sm px-4 py-2 text-13 text-on-color"
+                  >
                     Create
                   </button>
                 </div>
@@ -315,7 +345,10 @@ export const ScrollableContent: Story = {
     const [open, setOpen] = useState(args.open);
     return (
       <>
-        <button onClick={() => setOpen(true)} className="rounded bg-blue-500 px-4 py-2 text-white hover:bg-blue-600">
+        <button
+          onClick={() => setOpen(true)}
+          className="bg-blue-500 hover:bg-blue-600 rounded-sm px-4 py-2 text-on-color"
+        >
           Open Scrollable Dialog
         </button>
         {open && (
@@ -325,7 +358,7 @@ export const ScrollableContent: Story = {
                 <Dialog.Title>Scrollable Content</Dialog.Title>
                 <div className="mt-4 max-h-96 overflow-y-auto">
                   {Array.from({ length: 20 }, (_, i) => (
-                    <p key={i} className="mb-2 text-sm text-gray-600">
+                    <p key={i} className="text-gray-600 mb-2 text-13">
                       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut
                       labore et dolore magna aliqua.
                     </p>
@@ -334,7 +367,7 @@ export const ScrollableContent: Story = {
                 <div className="mt-6 flex justify-end">
                   <button
                     onClick={() => setOpen(false)}
-                    className="rounded bg-blue-500 px-4 py-2 text-sm text-white hover:bg-blue-600"
+                    className="bg-blue-500 hover:bg-blue-600 rounded-sm px-4 py-2 text-13 text-on-color"
                   >
                     Close
                   </button>
@@ -368,7 +401,7 @@ export const AllWidths: Story = {
           <button
             key={width}
             onClick={() => setOpenWidth(width)}
-            className="rounded bg-blue-500 px-4 py-2 text-sm text-white hover:bg-blue-600"
+            className="bg-blue-500 hover:bg-blue-600 rounded-sm px-4 py-2 text-13 text-on-color"
           >
             {label}
           </button>
@@ -379,12 +412,12 @@ export const AllWidths: Story = {
               <div className="p-6">
                 <Dialog.Title>{label} Dialog</Dialog.Title>
                 <div className="mt-4">
-                  <p className="text-sm text-gray-600">This dialog uses the {label} width variant.</p>
+                  <p className="text-gray-600 text-13">This dialog uses the {label} width variant.</p>
                 </div>
                 <div className="mt-6 flex justify-end">
                   <button
                     onClick={() => setOpenWidth(null)}
-                    className="rounded bg-blue-500 px-4 py-2 text-sm text-white hover:bg-blue-600"
+                    className="bg-blue-500 hover:bg-blue-600 rounded-sm px-4 py-2 text-13 text-on-color"
                   >
                     Close
                   </button>
diff --git a/packages/propel/src/dialog/index.ts b/packages/propel/src/dialog/index.ts
index 1efe34c51..d98033459 100644
--- a/packages/propel/src/dialog/index.ts
+++ b/packages/propel/src/dialog/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./root";
diff --git a/packages/propel/src/dialog/root.tsx b/packages/propel/src/dialog/root.tsx
index e0a518b22..3a917b2c0 100644
--- a/packages/propel/src/dialog/root.tsx
+++ b/packages/propel/src/dialog/root.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { forwardRef, memo, useMemo } from "react";
 import { Dialog as BaseDialog } from "@base-ui-components/react";
 import { cn } from "../utils/classname";
@@ -35,12 +41,12 @@ export interface DialogTitleProps extends React.ComponentProps<typeof BaseDialog
 }
 
 // Constants
-const OVERLAY_CLASSNAME = cn("fixed inset-0 z-backdrop bg-custom-backdrop");
-const BASE_CLASSNAME = "relative text-left bg-custom-background-100 rounded-lg shadow-md w-full z-modal";
+const OVERLAY_CLASSNAME = cn("fixed inset-0 z-90 bg-backdrop");
+const BASE_CLASSNAME = "relative text-left bg-surface-1 rounded-lg shadow-md w-full z-100 border border-subtle";
 
 // Utility functions
 const getPositionClassNames = (position: DialogPosition) =>
-  cn("isolate fixed z-modal", {
+  cn("fixed isolate z-100", {
     "top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2": position === "center",
     "top-8 left-1/2 -translate-x-1/2": position === "top",
   });
@@ -113,7 +119,7 @@ const DialogTitle = memo(function DialogTitle({ className, children, ...props }:
   return (
     <BaseDialog.Title
       data-slot="dialog-title"
-      className={cn("text-lg leading-none font-semibold", className)}
+      className={cn("text-16 leading-none font-semibold", className)}
       {...props}
     >
       {children}
diff --git a/packages/propel/src/emoji-icon-picker/emoji-picker.stories.tsx b/packages/propel/src/emoji-icon-picker/emoji-picker.stories.tsx
index 87e4b23e1..da03ba4a4 100644
--- a/packages/propel/src/emoji-icon-picker/emoji-picker.stories.tsx
+++ b/packages/propel/src/emoji-icon-picker/emoji-picker.stories.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useState } from "react";
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { EmojiPicker } from "./emoji-picker";
@@ -38,9 +44,9 @@ export const Default: Story = {
           closeOnSelect
         />
         {selectedValue && (
-          <div className="text-sm p-4 bg-custom-background-80 rounded border border-custom-border-200">
-            <div className="font-medium mb-2">Selected:</div>
-            <pre className="text-xs">{JSON.stringify(selectedValue, null, 2)}</pre>
+          <div className="rounded-sm border border-subtle bg-layer-1 p-4 text-13">
+            <div className="mb-2 font-medium">Selected:</div>
+            <pre className="text-11">{JSON.stringify(selectedValue, null, 2)}</pre>
           </div>
         )}
       </div>
@@ -70,7 +76,7 @@ export const OpenToEmojiTab: Story = {
           closeOnSelect
         />
         {selectedValue && (
-          <div className="text-sm">Selected: {selectedValue.type === "emoji" ? selectedValue.value : "Icon"}</div>
+          <div className="text-13">Selected: {selectedValue.type === "emoji" ? selectedValue.value : "Icon"}</div>
         )}
       </div>
     );
@@ -99,7 +105,7 @@ export const OpenToIconTab: Story = {
           closeOnSelect
         />
         {selectedValue && (
-          <div className="text-sm">
+          <div className="text-13">
             Selected:{" "}
             {selectedValue.type === "icon" && typeof selectedValue.value === "object"
               ? selectedValue.value.name
@@ -134,9 +140,9 @@ export const LucideIcons: Story = {
           iconType="lucide"
         />
         {selectedValue && (
-          <div className="text-sm p-4 bg-custom-background-80 rounded border border-custom-border-200">
-            <div className="font-medium mb-2">Selected Icon:</div>
-            <pre className="text-xs">{JSON.stringify(selectedValue, null, 2)}</pre>
+          <div className="rounded-sm border border-subtle bg-layer-1 p-4 text-13">
+            <div className="mb-2 font-medium">Selected Icon:</div>
+            <pre className="text-11">{JSON.stringify(selectedValue, null, 2)}</pre>
           </div>
         )}
       </div>
@@ -167,9 +173,9 @@ export const MaterialIcons: Story = {
           iconType="material"
         />
         {selectedValue && (
-          <div className="text-sm p-4 bg-custom-background-80 rounded border border-custom-border-200">
-            <div className="font-medium mb-2">Selected Icon:</div>
-            <pre className="text-xs">{JSON.stringify(selectedValue, null, 2)}</pre>
+          <div className="rounded-sm border border-subtle bg-layer-1 p-4 text-13">
+            <div className="mb-2 font-medium">Selected Icon:</div>
+            <pre className="text-11">{JSON.stringify(selectedValue, null, 2)}</pre>
           </div>
         )}
       </div>
@@ -194,7 +200,7 @@ export const CloseOnSelectDisabled: Story = {
 
     return (
       <div className="space-y-4 p-4">
-        <div className="flex gap-2 items-center">
+        <div className="flex items-center gap-2">
           <EmojiPicker
             isOpen={isOpen}
             handleToggle={setIsOpen}
@@ -204,18 +210,18 @@ export const CloseOnSelectDisabled: Story = {
             closeOnSelect={false}
           />
           <button
-            className="px-3 py-1.5 text-sm bg-custom-background-80 rounded hover:bg-custom-background-90"
+            className="rounded-sm bg-layer-1 px-3 py-1.5 text-13 hover:bg-surface-2"
             onClick={() => setSelectedValues([])}
           >
             Clear
           </button>
         </div>
         {selectedValues.length > 0 && (
-          <div className="text-sm p-4 bg-custom-background-80 rounded border border-custom-border-200">
-            <div className="font-medium mb-2">Selected ({selectedValues.length}):</div>
-            <div className="flex gap-2 flex-wrap">
+          <div className="rounded-sm border border-subtle bg-layer-1 p-4 text-13">
+            <div className="mb-2 font-medium">Selected ({selectedValues.length}):</div>
+            <div className="flex flex-wrap gap-2">
               {selectedValues.map((val, idx) => (
-                <span key={idx} className="text-lg">
+                <span key={idx} className="text-16">
                   {val.type === "emoji" ? val.value : "🎨"}
                 </span>
               ))}
@@ -249,7 +255,7 @@ export const CustomSearchPlaceholder: Story = {
           closeOnSelect
           searchPlaceholder="Type to find emojis..."
         />
-        {selectedValue && <div className="text-sm">Selected: {JSON.stringify(selectedValue)}</div>}
+        {selectedValue && <div className="text-13">Selected: {JSON.stringify(selectedValue)}</div>}
       </div>
     );
   },
@@ -277,7 +283,7 @@ export const SearchDisabled: Story = {
           closeOnSelect
           searchDisabled
         />
-        {selectedValue && <div className="text-sm">Selected: {JSON.stringify(selectedValue)}</div>}
+        {selectedValue && <div className="text-13">Selected: {JSON.stringify(selectedValue)}</div>}
       </div>
     );
   },
@@ -306,8 +312,8 @@ export const CustomIconColor: Story = {
           defaultIconColor="#FF5733"
         />
         {selectedValue && (
-          <div className="text-sm p-4 bg-custom-background-80 rounded border border-custom-border-200">
-            <pre className="text-xs">{JSON.stringify(selectedValue, null, 2)}</pre>
+          <div className="rounded-sm border border-subtle bg-layer-1 p-4 text-13">
+            <pre className="text-11">{JSON.stringify(selectedValue, null, 2)}</pre>
           </div>
         )}
       </div>
@@ -329,9 +335,9 @@ export const DifferentPlacements: Story = {
     const [isOpen4, setIsOpen4] = useState(false);
 
     return (
-      <div className="p-8 space-y-8">
-        <div className="flex gap-4 items-center">
-          <span className="text-sm w-32">Bottom Start:</span>
+      <div className="space-y-8 p-8">
+        <div className="flex items-center gap-4">
+          <span className="w-32 text-13">Bottom Start:</span>
           <EmojiPicker
             isOpen={isOpen1}
             handleToggle={setIsOpen1}
@@ -340,8 +346,8 @@ export const DifferentPlacements: Story = {
             placement="bottom-start"
           />
         </div>
-        <div className="flex gap-4 items-center">
-          <span className="text-sm w-32">Bottom End:</span>
+        <div className="flex items-center gap-4">
+          <span className="w-32 text-13">Bottom End:</span>
           <EmojiPicker
             isOpen={isOpen2}
             handleToggle={setIsOpen2}
@@ -350,8 +356,8 @@ export const DifferentPlacements: Story = {
             placement="bottom-end"
           />
         </div>
-        <div className="flex gap-4 items-center">
-          <span className="text-sm w-32">Top Start:</span>
+        <div className="flex items-center gap-4">
+          <span className="w-32 text-13">Top Start:</span>
           <EmojiPicker
             isOpen={isOpen3}
             handleToggle={setIsOpen3}
@@ -360,8 +366,8 @@ export const DifferentPlacements: Story = {
             placement="top-start"
           />
         </div>
-        <div className="flex gap-4 items-center">
-          <span className="text-sm w-32">Top End:</span>
+        <div className="flex items-center gap-4">
+          <span className="w-32 text-13">Top End:</span>
           <EmojiPicker
             isOpen={isOpen4}
             handleToggle={setIsOpen4}
@@ -400,19 +406,19 @@ export const InFormContext: Story = {
 
     return (
       <div className="max-w-md p-4">
-        <form onSubmit={handleSubmit} className="space-y-4 p-6 border border-custom-border-200 rounded-lg">
+        <form onSubmit={handleSubmit} className="space-y-4 rounded-lg border border-subtle p-6">
           <div>
-            <label className="block text-sm font-medium mb-2">Project Title</label>
+            <label className="mb-2 block text-13 font-medium">Project Title</label>
             <input
               type="text"
               value={formData.title}
               onChange={(e) => setFormData((prev) => ({ ...prev, title: e.target.value }))}
-              className="w-full px-3 py-2 bg-custom-background-80 border border-custom-border-200 rounded"
+              className="w-full rounded-sm border border-subtle bg-layer-1 px-3 py-2"
               placeholder="Enter project title"
             />
           </div>
           <div>
-            <label className="block text-sm font-medium mb-2">Project Icon</label>
+            <label className="mb-2 block text-13 font-medium">Project Icon</label>
             <EmojiPicker
               isOpen={isOpen}
               handleToggle={setIsOpen}
@@ -420,12 +426,12 @@ export const InFormContext: Story = {
               label={formData.emoji && formData.emoji.type === "emoji" ? formData.emoji.value : "Click to select icon"}
               defaultOpen={EmojiIconPickerTypes.EMOJI}
               closeOnSelect
-              buttonClassName="px-4 py-2 bg-custom-background-80 border border-custom-border-200 rounded hover:bg-custom-background-90 w-full text-left"
+              buttonClassName="px-4 py-2 bg-layer-1 border border-subtle rounded-sm hover:bg-surface-2 w-full text-left"
             />
           </div>
           <button
             type="submit"
-            className="w-full px-4 py-2 bg-custom-primary-100 text-white rounded hover:bg-custom-primary-200"
+            className="w-full rounded-sm bg-accent-primary px-4 py-2 text-on-color hover:bg-accent-primary/80"
           >
             Create Project
           </button>
diff --git a/packages/propel/src/emoji-icon-picker/emoji-picker.tsx b/packages/propel/src/emoji-icon-picker/emoji-picker.tsx
index 8ef39fa13..9fc781276 100644
--- a/packages/propel/src/emoji-icon-picker/emoji-picker.tsx
+++ b/packages/propel/src/emoji-icon-picker/emoji-picker.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useMemo, useCallback } from "react";
 import { Tabs } from "@base-ui-components/react";
 import { Popover } from "../popover";
@@ -100,10 +106,7 @@ export function EmojiPicker(props: TCustomEmojiPicker) {
       </Popover.Button>
       <Popover.Panel
         positionerClassName="z-50"
-        className={cn(
-          "w-80 bg-custom-background-100 rounded-md border-[0.5px] border-custom-border-300 overflow-hidden",
-          dropdownClassName
-        )}
+        className={cn("w-80 overflow-hidden rounded-md border-[0.5px] border-strong bg-surface-1", dropdownClassName)}
         side={finalSide}
         align={finalAlign}
         sideOffset={8}
@@ -129,9 +132,9 @@ export function EmojiPicker(props: TCustomEmojiPicker) {
                 key={tab.key}
                 value={tab.key}
                 className={({ selected }) =>
-                  cn("py-1 text-sm rounded border border-custom-border-200 bg-custom-background-80", {
-                    "bg-custom-background-100 text-custom-text-100": selected,
-                    "text-custom-text-400 hover:text-custom-text-300 hover:bg-custom-background-80/60": !selected,
+                  cn("rounded-sm border border-subtle bg-layer-1 py-1 text-13", {
+                    "bg-surface-1 text-primary": selected,
+                    "text-placeholder hover:bg-layer-1/60 hover:text-tertiary": !selected,
                   })
                 }
               >
diff --git a/packages/propel/src/emoji-icon-picker/emoji/emoji.tsx b/packages/propel/src/emoji-icon-picker/emoji/emoji.tsx
index 546d6ee95..13fc675f7 100644
--- a/packages/propel/src/emoji-icon-picker/emoji/emoji.tsx
+++ b/packages/propel/src/emoji-icon-picker/emoji/emoji.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useEffect, useRef } from "react";
 import { EmojiPicker } from "frimousse";
 import { cn } from "../../utils";
@@ -28,20 +34,20 @@ export function EmojiRoot(props: EmojiRootProps) {
   return (
     <EmojiPicker.Root
       data-slot="emoji-picker"
-      className="isolate flex flex-col rounded-md h-full w-full border-none p-2"
+      className="isolate flex h-full w-full flex-col rounded-md border-none p-2"
       onEmojiSelect={(val) => onChange(val.emoji)}
     >
-      <div className="flex items-center gap-2 justify-between [&>[data-slot='emoji-picker-search-wrapper']]:flex-grow [&>[data-slot='emoji-picker-search-wrapper']]:p-0 px-1.5 py-2 sticky top-0 z-10 bg-custom-background-100">
+      <div className="sticky top-0 z-10 flex items-center justify-between gap-2 bg-surface-1 px-1.5 py-2 [&>[data-slot='emoji-picker-search-wrapper']]:flex-grow [&>[data-slot='emoji-picker-search-wrapper']]:p-0">
         <div ref={searchWrapperRef} data-slot="emoji-picker-search-wrapper" className="p-2">
           <EmojiPicker.Search
             placeholder={searchPlaceholder}
             disabled={searchDisabled}
-            className="block rounded-md bg-transparent placeholder-custom-text-400 focus:outline-none px-3 py-2 border-[0.5px] border-custom-border-200 text-[1rem] p-0 h-full w-full flex-grow-0 focus:border-custom-primary-100"
+            className="block h-full w-full flex-grow-0 rounded-md border-[0.5px] border-subtle bg-transparent p-0 px-3 py-2 text-16 placeholder-(--text-color-placeholder) focus:border-accent-strong focus:outline-none"
           />
         </div>
         <EmojiPicker.SkinToneSelector
           data-slot="emoji-picker-skin-tone-selector"
-          className="bg-custom-background-100 hover:bg-accent mx-2 mb-1.5 size-8 rounded-md text-lg flex-shrink-0"
+          className="hover:bg-accent mx-2 mb-1.5 size-8 flex-shrink-0 rounded-md bg-surface-1 text-16"
         />
       </div>
       <EmojiPicker.Viewport data-slot="emoji-picker-content" className={cn("relative flex-1 outline-none")}>
@@ -52,7 +58,7 @@ export function EmojiRoot(props: EmojiRootProps) {
             CategoryHeader: ({ category, ...props }) => (
               <div
                 data-slot="emoji-picker-list-category-header"
-                className="bg-custom-background-100 text-custom-text-300 px-3 pb-1.5 text-xs font-medium"
+                className="bg-surface-1 px-3 pb-1.5 text-11 font-medium text-tertiary"
                 {...props}
               >
                 {category.label}
@@ -68,7 +74,7 @@ export function EmojiRoot(props: EmojiRootProps) {
                 type="button"
                 aria-label={emoji?.label ?? emoji?.emoji}
                 data-slot="emoji-picker-list-emoji"
-                className="data-active:bg-accent flex size-8 items-center justify-center rounded-md text-lg"
+                className="data-active:bg-accent flex size-8 items-center justify-center rounded-md text-16"
                 {...props}
               >
                 {emoji.emoji}
diff --git a/packages/propel/src/emoji-icon-picker/emoji/index.ts b/packages/propel/src/emoji-icon-picker/emoji/index.ts
index ebaf40c17..82988cb55 100644
--- a/packages/propel/src/emoji-icon-picker/emoji/index.ts
+++ b/packages/propel/src/emoji-icon-picker/emoji/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./emoji";
diff --git a/packages/propel/src/emoji-icon-picker/helper.tsx b/packages/propel/src/emoji-icon-picker/helper.tsx
index 072b07d47..090d9269d 100644
--- a/packages/propel/src/emoji-icon-picker/helper.tsx
+++ b/packages/propel/src/emoji-icon-picker/helper.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { TPlacement, TSide, TAlign } from "../utils/placement";
 
 export const EmojiIconPickerTypes = {
diff --git a/packages/propel/src/emoji-icon-picker/icon/icon-root.tsx b/packages/propel/src/emoji-icon-picker/icon/icon-root.tsx
index bd203bb8e..9e61a8d4e 100644
--- a/packages/propel/src/emoji-icon-picker/icon/icon-root.tsx
+++ b/packages/propel/src/emoji-icon-picker/icon/icon-root.tsx
@@ -1,5 +1,12 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React, { useEffect, useState } from "react";
-import { InfoIcon, Search } from "lucide-react";
+import { InfoIcon } from "lucide-react";
+import { SearchIcon } from "../../icons";
 import { cn } from "../../utils/classname";
 import { adjustColorForContrast, DEFAULT_COLORS } from "../helper";
 import { LucideIconsList } from "./lucide-root";
@@ -31,42 +38,39 @@ export function IconRoot(props: IconRootProps) {
 
   return (
     <>
-      <div className="flex flex-col sticky top-0 bg-custom-background-100">
+      <div className="sticky top-0 flex flex-col bg-surface-1">
         {!searchDisabled && (
-          <div className="flex items-center px-2 py-[15px] w-full ">
+          <div className="flex w-full items-center px-2 py-[15px]">
             <div
-              className={cn(
-                "relative flex items-center gap-2 bg-custom-background-90 h-10 rounded-lg w-full px-[30px] border",
-                {
-                  "border-custom-primary-100": isInputFocused,
-                  "border-transparent": !isInputFocused,
-                }
-              )}
+              className={cn("relative flex h-10 w-full items-center gap-2 rounded-lg border bg-surface-2 px-[30px]", {
+                "border-accent-strong": isInputFocused,
+                "border-transparent": !isInputFocused,
+              })}
               onFocus={() => setIsInputFocused(true)}
               onBlur={() => setIsInputFocused(false)}
             >
-              <Search className="absolute left-2.5 bottom-3 h-3.5 w-3.5 text-custom-text-400" />
+              <SearchIcon className="absolute bottom-3 left-2.5 h-3.5 w-3.5 text-placeholder" />
 
               <input
                 placeholder="Search"
                 value={query}
                 onChange={(e) => setQuery(e.target.value)}
-                className="block rounded-md bg-transparent placeholder-custom-text-400 focus:outline-none px-3 py-2 border-[0.5px] border-custom-border-200 text-[1rem] border-none p-0 h-full w-full"
+                className="block h-full w-full rounded-md border-[0.5px] border-none border-subtle bg-transparent p-0 px-3 py-2 text-16 placeholder-(--text-color-placeholder) focus:outline-none"
               />
             </div>
           </div>
         )}
-        <div className="grid grid-cols-9 gap-2 items-center justify-items-center px-2.5 py-1 h-9">
+        <div className="grid h-9 grid-cols-9 items-center justify-items-center gap-2 px-2.5 py-1">
           {showHexInput ? (
-            <div className="col-span-8 flex items-center gap-1 justify-self-stretch ml-2">
+            <div className="col-span-8 ml-2 flex items-center gap-1 justify-self-stretch">
               <span
-                className="h-4 w-4 flex-shrink-0 rounded-full mr-1"
+                className="mr-1 h-4 w-4 flex-shrink-0 rounded-full"
                 style={{
                   backgroundColor: `#${hexValue}`,
                 }}
               />
-              <span className="text-xs text-custom-text-300 flex-shrink-0">HEX</span>
-              <span className="text-xs text-custom-text-200 flex-shrink-0 -mr-1">#</span>
+              <span className="flex-shrink-0 text-11 text-tertiary">HEX</span>
+              <span className="-mr-1 flex-shrink-0 text-11 text-secondary">#</span>
               <input
                 type="text"
                 value={hexValue}
@@ -75,7 +79,7 @@ export function IconRoot(props: IconRootProps) {
                   setHexValue(value);
                   if (/^[0-9A-Fa-f]{6}$/.test(value)) setActiveColor(adjustColorForContrast(`#${value}`));
                 }}
-                className="block placeholder-custom-text-400 focus:outline-none px-3 py-2 border-[0.5px] border-custom-border-200 flex-grow pl-0 text-xs text-custom-text-200 rounded border-none bg-transparent ring-0"
+                className="block flex-grow rounded-sm border-[0.5px] border-none border-subtle bg-transparent px-3 py-2 pl-0 text-11 text-secondary placeholder-(--text-color-placeholder) ring-0 focus:outline-none"
                 autoFocus
               />
             </div>
@@ -84,7 +88,7 @@ export function IconRoot(props: IconRootProps) {
               <button
                 key={curCol}
                 type="button"
-                className="grid place-items-center size-5"
+                className="grid size-5 place-items-center"
                 onClick={() => {
                   setActiveColor(curCol);
                   setHexValue(curCol.slice(1, 7));
@@ -96,8 +100,8 @@ export function IconRoot(props: IconRootProps) {
           )}
           <button
             type="button"
-            className={cn("grid place-items-center h-4 w-4 rounded-full border border-transparent", {
-              "border-custom-border-400": !showHexInput,
+            className={cn("grid h-4 w-4 place-items-center rounded-full border border-transparent", {
+              "border-strong-1": !showHexInput,
             })}
             onClick={() => {
               setShowHexInput((prevData) => !prevData);
@@ -105,18 +109,18 @@ export function IconRoot(props: IconRootProps) {
             }}
           >
             {showHexInput ? (
-              <span className="conical-gradient h-4 w-4 rounded-full" />
+              <span className="h-4 w-4 rounded-full conical-gradient" />
             ) : (
-              <span className="text-custom-text-300 text-[0.6rem] grid place-items-center">#</span>
+              <span className="grid place-items-center text-10 text-tertiary">#</span>
             )}
           </button>
         </div>
-        <div className="flex items-center gap-2 w-full pl-4 pr-3 py-1 h-6">
+        <div className="flex h-6 w-full items-center gap-2 py-1 pr-3 pl-4">
           <InfoIcon className="h-3 w-3" />
-          <p className="text-xs"> Colors will be adjusted to ensure sufficient contrast.</p>
+          <p className="text-11"> Colors will be adjusted to ensure sufficient contrast.</p>
         </div>
       </div>
-      <div className="grid grid-cols-8 gap-1 px-2.5 justify-items-center mt-2">
+      <div className="mt-2 grid grid-cols-8 justify-items-center gap-1 px-2.5">
         {iconType === "material" ? (
           <MaterialIconList query={query} onChange={onChange} activeColor={activeColor} />
         ) : (
diff --git a/packages/propel/src/emoji-icon-picker/icon/index.ts b/packages/propel/src/emoji-icon-picker/icon/index.ts
index a5a2e5197..03ca33434 100644
--- a/packages/propel/src/emoji-icon-picker/icon/index.ts
+++ b/packages/propel/src/emoji-icon-picker/icon/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./icon-root";
diff --git a/packages/propel/src/emoji-icon-picker/icon/lucide-root.tsx b/packages/propel/src/emoji-icon-picker/icon/lucide-root.tsx
index 4582195f0..5b24eaa7e 100644
--- a/packages/propel/src/emoji-icon-picker/icon/lucide-root.tsx
+++ b/packages/propel/src/emoji-icon-picker/icon/lucide-root.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 import { LUCIDE_ICONS_LIST } from "../lucide-icons";
 
@@ -18,7 +24,7 @@ export function LucideIconsList(props: LucideIconsListProps) {
         <button
           key={icon.name}
           type="button"
-          className="h-9 w-9 select-none text-lg grid place-items-center rounded hover:bg-custom-background-80"
+          className="grid h-9 w-9 place-items-center rounded-sm text-16 select-none hover:bg-layer-1"
           onClick={() => {
             onChange({
               name: icon.name,
diff --git a/packages/propel/src/emoji-icon-picker/icon/material-root.tsx b/packages/propel/src/emoji-icon-picker/icon/material-root.tsx
index 199728e59..1f2c4348f 100644
--- a/packages/propel/src/emoji-icon-picker/icon/material-root.tsx
+++ b/packages/propel/src/emoji-icon-picker/icon/material-root.tsx
@@ -1,4 +1,9 @@
-import React from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import useFontFaceObserver from "use-font-face-observer";
 import { MATERIAL_ICONS_LIST } from "../material-icons";
 
@@ -28,7 +33,7 @@ export function MaterialIconList(props: MaterialIconListProps) {
         <button
           key={icon.name}
           type="button"
-          className="h-9 w-9 select-none text-lg grid place-items-center rounded hover:bg-custom-background-80"
+          className="grid h-9 w-9 place-items-center rounded-sm text-16 select-none hover:bg-layer-1"
           onClick={() => {
             onChange({
               name: icon.name,
@@ -37,14 +42,11 @@ export function MaterialIconList(props: MaterialIconListProps) {
           }}
         >
           {isMaterialSymbolsFontLoaded ? (
-            <span
-              style={{ color: activeColor }}
-              className="material-symbols-rounded !text-[1.25rem] !leading-[1.25rem]"
-            >
+            <span style={{ color: activeColor }} className="material-symbols-rounded text-20! leading-5!">
               {icon.name}
             </span>
           ) : (
-            <span className="size-5 rounded animate-pulse bg-custom-background-80" />
+            <span className="size-5 animate-pulse rounded-sm bg-layer-1" />
           )}
         </button>
       ))}
diff --git a/packages/propel/src/emoji-icon-picker/index.ts b/packages/propel/src/emoji-icon-picker/index.ts
index a662c48d7..3b1a9ab61 100644
--- a/packages/propel/src/emoji-icon-picker/index.ts
+++ b/packages/propel/src/emoji-icon-picker/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./emoji-picker";
 export * from "./helper";
 export * from "./logo";
diff --git a/packages/propel/src/emoji-icon-picker/logo.tsx b/packages/propel/src/emoji-icon-picker/logo.tsx
index da235617c..5b59dfa46 100644
--- a/packages/propel/src/emoji-icon-picker/logo.tsx
+++ b/packages/propel/src/emoji-icon-picker/logo.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // Due to some weird issue with the import order, the import of useFontFaceObserver
 // should be after the imported here rather than some below helper functions as it is in the original file
 
@@ -10,46 +15,33 @@ import { getEmojiSize, stringToEmoji } from "./helper";
 import { LUCIDE_ICONS_LIST } from "./lucide-icons";
 
 type Props = {
-  logo: TLogoProps;
+  logo?: TLogoProps;
   size?: number;
   type?: "lucide" | "material";
 };
 
-export function Logo(props: Props) {
-  const { logo, size = 16, type = "material" } = props;
-
-  // destructuring the logo object
-  const { in_use, emoji, icon } = logo;
-
-  // derived values
-  const value = in_use === "emoji" ? emoji?.value : icon?.name;
-  const color = icon?.color;
-  const lucideIcon = LUCIDE_ICONS_LIST.find((item) => item.name === value);
-
+export function Logo({ logo, size = 16, type = "material" }: Props) {
   const isMaterialSymbolsFontLoaded = useFontFaceObserver([
     {
-      family: `Material Symbols Rounded`,
-      style: `normal`,
-      weight: `normal`,
-      stretch: `condensed`,
+      family: "Material Symbols Rounded",
+      style: "normal",
+      weight: "normal",
+      stretch: "condensed",
     },
   ]);
-  // if no value, return empty fragment
-  if (!value) return <></>;
 
-  if (!isMaterialSymbolsFontLoaded) {
-    return (
-      <span
-        style={{
-          height: size,
-          width: size,
-        }}
-        className="rounded animate-pulse bg-custom-background-80"
-      />
-    );
-  }
+  // Reusable loading skeleton
+  const loadingSkeleton = <span style={{ height: size, width: size }} className="rounded-sm bg-layer-1" />;
 
-  // emoji
+  // Early returns for loading/empty states
+  if (!logo || !logo.in_use) return loadingSkeleton;
+
+  const { in_use, emoji, icon } = logo;
+  const value = in_use === "emoji" ? emoji?.value : icon?.name;
+
+  if (!value) return loadingSkeleton;
+
+  // Emoji rendering
   if (in_use === "emoji") {
     return (
       <span
@@ -66,38 +58,35 @@ export function Logo(props: Props) {
     );
   }
 
-  // icon
+  // Icon rendering
   if (in_use === "icon") {
+    const color = icon?.color;
+
+    // Lucide icon
+    if (type === "lucide") {
+      const lucideIcon = LUCIDE_ICONS_LIST.find((item) => item.name === value);
+      if (!lucideIcon) return null;
+
+      const LucideIconElement = lucideIcon.element;
+      return <LucideIconElement style={{ color, height: size, width: size }} />;
+    }
+
+    if (!isMaterialSymbolsFontLoaded) return loadingSkeleton;
+
+    // Material icon
     return (
-      <>
-        {type === "lucide" ? (
-          <>
-            {lucideIcon && (
-              <lucideIcon.element
-                style={{
-                  color: color,
-                  height: size,
-                  width: size,
-                }}
-              />
-            )}
-          </>
-        ) : (
-          <span
-            className="material-symbols-rounded"
-            style={{
-              fontSize: size,
-              color: color,
-              scale: "115%",
-            }}
-          >
-            {value}
-          </span>
-        )}
-      </>
+      <span
+        className="material-symbols-rounded"
+        style={{
+          fontSize: size,
+          color,
+          scale: "115%",
+        }}
+      >
+        {value}
+      </span>
     );
   }
 
-  // if no value, return empty fragment
-  return <></>;
+  return null;
 }
diff --git a/packages/propel/src/emoji-icon-picker/lucide-icons.tsx b/packages/propel/src/emoji-icon-picker/lucide-icons.tsx
index f40f583b7..903fc2253 100644
--- a/packages/propel/src/emoji-icon-picker/lucide-icons.tsx
+++ b/packages/propel/src/emoji-icon-picker/lucide-icons.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import {
   Activity,
   Airplay,
@@ -35,6 +41,10 @@ import {
   Check,
   CheckCircle,
   CheckSquare,
+  ChevronDown,
+  ChevronLeft,
+  ChevronRight,
+  ChevronUp,
   Clipboard,
   Clock,
   Cloud,
@@ -151,7 +161,6 @@ import {
   Search,
   User,
 } from "lucide-react";
-import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon } from "../icons";
 
 export const LUCIDE_ICONS_LIST = [
   { name: "Activity", element: Activity },
@@ -191,10 +200,10 @@ export const LUCIDE_ICONS_LIST = [
   { name: "Check", element: Check },
   { name: "CheckCircle", element: CheckCircle },
   { name: "CheckSquare", element: CheckSquare },
-  { name: "ChevronDown", element: ChevronDownIcon },
-  { name: "ChevronLeft", element: ChevronLeftIcon },
-  { name: "ChevronRight", element: ChevronRightIcon },
-  { name: "ChevronUp", element: ChevronUpIcon },
+  { name: "ChevronDown", element: ChevronDown },
+  { name: "ChevronLeft", element: ChevronLeft },
+  { name: "ChevronRight", element: ChevronRight },
+  { name: "ChevronUp", element: ChevronUp },
   { name: "Clipboard", element: Clipboard },
   { name: "Clock", element: Clock },
   { name: "Cloud", element: Cloud },
diff --git a/packages/propel/src/emoji-icon-picker/material-icons.tsx b/packages/propel/src/emoji-icon-picker/material-icons.tsx
index d77c7444e..70fd6ada8 100644
--- a/packages/propel/src/emoji-icon-picker/material-icons.tsx
+++ b/packages/propel/src/emoji-icon-picker/material-icons.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export const MATERIAL_ICONS_LIST = [
   {
     name: "search",
diff --git a/packages/propel/src/emoji-reaction/emoji-reaction-picker.stories.tsx b/packages/propel/src/emoji-reaction/emoji-reaction-picker.stories.tsx
index 790e4cc97..9da607975 100644
--- a/packages/propel/src/emoji-reaction/emoji-reaction-picker.stories.tsx
+++ b/packages/propel/src/emoji-reaction/emoji-reaction-picker.stories.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useState } from "react";
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { SmilePlus } from "lucide-react";
@@ -37,15 +43,13 @@ export const Default: Story = {
           onChange={setSelectedEmoji}
           closeOnSelect
           label={
-            <span className="flex items-center justify-center rounded-md px-2 size-8 text-xl">
-              {selectedEmoji ? stringToEmoji(selectedEmoji) : <SmilePlus className="h-6 text-custom-text-100" />}
+            <span className="flex size-8 items-center justify-center rounded-md px-2 text-18">
+              {selectedEmoji ? stringToEmoji(selectedEmoji) : <SmilePlus className="h-6 text-primary" />}
             </span>
           }
         />
         {selectedEmoji && (
-          <div className="text-sm p-4 bg-custom-background-80 rounded border border-custom-border-200">
-            Selected: {selectedEmoji}
-          </div>
+          <div className="rounded-sm border border-subtle bg-layer-1 p-4 text-13">Selected: {selectedEmoji}</div>
         )}
       </div>
     );
@@ -71,13 +75,13 @@ export const WithCustomLabel: Story = {
           onChange={setSelectedEmoji}
           closeOnSelect
           label={
-            <button className="px-4 py-2 bg-custom-background-80 border border-custom-border-200 rounded hover:bg-custom-background-90 flex items-center gap-2">
+            <button className="flex items-center gap-2 rounded-sm border border-subtle bg-layer-1 px-4 py-2 hover:bg-surface-2">
               {selectedEmoji ? stringToEmoji(selectedEmoji) : <SmilePlus className="h-4 w-4" />}
-              <span className="text-sm">Add Reaction</span>
+              <span className="text-13">Add Reaction</span>
             </button>
           }
         />
-        {selectedEmoji && <div className="text-sm">Selected: {selectedEmoji}</div>}
+        {selectedEmoji && <div className="text-13">Selected: {selectedEmoji}</div>}
       </div>
     );
   },
@@ -136,7 +140,7 @@ export const InlineReactions: Story = {
           onChange={handleReactionAdd}
           closeOnSelect
           label={
-            <button className="inline-flex items-center justify-center rounded-full border border-dashed border-custom-border-300 bg-custom-background-100 text-custom-text-400 transition-all duration-200 hover:border-custom-primary-100 hover:text-custom-primary-100 hover:bg-custom-primary-100/5 h-7 w-7">
+            <button className="inline-flex h-7 w-7 items-center justify-center rounded-full border border-dashed border-strong bg-surface-1 text-placeholder transition-all duration-200 hover:border-accent-strong hover:bg-accent-primary/5 hover:text-accent-primary">
               <SmilePlus className="h-3.5 w-3.5" />
             </button>
           }
@@ -160,9 +164,9 @@ export const DifferentPlacements: Story = {
     const [isOpen4, setIsOpen4] = useState(false);
 
     return (
-      <div className="p-8 space-y-8">
-        <div className="flex gap-4 items-center">
-          <span className="text-sm w-32">Bottom Start:</span>
+      <div className="space-y-8 p-8">
+        <div className="flex items-center gap-4">
+          <span className="w-32 text-13">Bottom Start:</span>
           <EmojiReactionPicker
             isOpen={isOpen1}
             handleToggle={setIsOpen1}
@@ -171,8 +175,8 @@ export const DifferentPlacements: Story = {
             label={<SmilePlus className="h-6 w-6" />}
           />
         </div>
-        <div className="flex gap-4 items-center">
-          <span className="text-sm w-32">Bottom End:</span>
+        <div className="flex items-center gap-4">
+          <span className="w-32 text-13">Bottom End:</span>
           <EmojiReactionPicker
             isOpen={isOpen2}
             handleToggle={setIsOpen2}
@@ -181,8 +185,8 @@ export const DifferentPlacements: Story = {
             label={<SmilePlus className="h-6 w-6" />}
           />
         </div>
-        <div className="flex gap-4 items-center">
-          <span className="text-sm w-32">Top Start:</span>
+        <div className="flex items-center gap-4">
+          <span className="w-32 text-13">Top Start:</span>
           <EmojiReactionPicker
             isOpen={isOpen3}
             handleToggle={setIsOpen3}
@@ -191,8 +195,8 @@ export const DifferentPlacements: Story = {
             label={<SmilePlus className="h-6 w-6" />}
           />
         </div>
-        <div className="flex gap-4 items-center">
-          <span className="text-sm w-32">Top End:</span>
+        <div className="flex items-center gap-4">
+          <span className="w-32 text-13">Top End:</span>
           <EmojiReactionPicker
             isOpen={isOpen4}
             handleToggle={setIsOpen4}
@@ -226,12 +230,12 @@ export const SearchDisabled: Story = {
           closeOnSelect
           searchDisabled
           label={
-            <button className="px-4 py-2 bg-custom-background-80 border border-custom-border-200 rounded hover:bg-custom-background-90">
+            <button className="rounded-sm border border-subtle bg-layer-1 px-4 py-2 hover:bg-surface-2">
               No Search
             </button>
           }
         />
-        {selectedEmoji && <div className="text-sm">Selected: {selectedEmoji}</div>}
+        {selectedEmoji && <div className="text-13">Selected: {selectedEmoji}</div>}
       </div>
     );
   },
@@ -257,12 +261,12 @@ export const CustomSearchPlaceholder: Story = {
           closeOnSelect
           searchPlaceholder="Find your emoji..."
           label={
-            <button className="px-4 py-2 bg-custom-background-80 border border-custom-border-200 rounded hover:bg-custom-background-90">
+            <button className="rounded-sm border border-subtle bg-layer-1 px-4 py-2 hover:bg-surface-2">
               Custom Search
             </button>
           }
         />
-        {selectedEmoji && <div className="text-sm">Selected: {selectedEmoji}</div>}
+        {selectedEmoji && <div className="text-13">Selected: {selectedEmoji}</div>}
       </div>
     );
   },
@@ -285,31 +289,31 @@ export const CloseOnSelectDisabled: Story = {
 
     return (
       <div className="space-y-4 p-4">
-        <div className="flex gap-2 items-center">
+        <div className="flex items-center gap-2">
           <EmojiReactionPicker
             isOpen={isOpen}
             handleToggle={setIsOpen}
             onChange={handleChange}
             closeOnSelect={false}
             label={
-              <button className="px-4 py-2 bg-custom-background-80 border border-custom-border-200 rounded hover:bg-custom-background-90">
+              <button className="rounded-sm border border-subtle bg-layer-1 px-4 py-2 hover:bg-surface-2">
                 Select Multiple (Stays Open)
               </button>
             }
           />
           <button
-            className="px-3 py-1.5 text-sm bg-custom-background-80 rounded hover:bg-custom-background-90"
+            className="rounded-sm bg-layer-1 px-3 py-1.5 text-13 hover:bg-surface-2"
             onClick={() => setSelectedEmojis([])}
           >
             Clear
           </button>
         </div>
         {selectedEmojis.length > 0 && (
-          <div className="text-sm p-4 bg-custom-background-80 rounded border border-custom-border-200">
-            <div className="font-medium mb-2">Selected ({selectedEmojis.length}):</div>
-            <div className="flex gap-2 flex-wrap">
+          <div className="rounded-sm border border-subtle bg-layer-1 p-4 text-13">
+            <div className="mb-2 font-medium">Selected ({selectedEmojis.length}):</div>
+            <div className="flex flex-wrap gap-2">
               {selectedEmojis.map((emoji, idx) => (
-                <span key={idx} className="text-xl">
+                <span key={idx} className="text-18">
                   {emoji}
                 </span>
               ))}
@@ -360,14 +364,14 @@ export const InMessageContext: Story = {
     };
 
     return (
-      <div className="max-w-md border border-custom-border-200 rounded-lg p-4 space-y-3">
+      <div className="max-w-md space-y-3 rounded-lg border border-subtle p-4">
         <div className="flex items-start gap-3">
-          <div className="w-8 h-8 rounded-full bg-custom-primary-100 flex items-center justify-center text-white text-sm">
+          <div className="flex h-8 w-8 items-center justify-center rounded-full bg-accent-primary text-13 text-on-color">
             AB
           </div>
           <div className="flex-1">
-            <div className="font-medium text-sm">Alice Brown</div>
-            <div className="text-sm text-custom-text-300 mt-1">
+            <div className="text-13 font-medium">Alice Brown</div>
+            <div className="mt-1 text-13 text-tertiary">
               Just finished the design for the new dashboard! Would love to hear your thoughts.
             </div>
           </div>
@@ -380,7 +384,7 @@ export const InMessageContext: Story = {
             onChange={handleReactionAdd}
             closeOnSelect
             label={
-              <button className="inline-flex items-center justify-center rounded-full border border-dashed border-custom-border-300 bg-custom-background-100 text-custom-text-400 transition-all duration-200 hover:border-custom-primary-100 hover:text-custom-primary-100 hover:bg-custom-primary-100/5 h-7 w-7">
+              <button className="inline-flex h-7 w-7 items-center justify-center rounded-full border border-dashed border-strong bg-surface-1 text-placeholder transition-all duration-200 hover:border-accent-strong hover:bg-accent-primary/5 hover:text-accent-primary">
                 <SmilePlus className="h-3.5 w-3.5" />
               </button>
             }
diff --git a/packages/propel/src/emoji-reaction/emoji-reaction-picker.tsx b/packages/propel/src/emoji-reaction/emoji-reaction-picker.tsx
index e1cb4740b..4e3b326e6 100644
--- a/packages/propel/src/emoji-reaction/emoji-reaction-picker.tsx
+++ b/packages/propel/src/emoji-reaction/emoji-reaction-picker.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React, { useMemo, useCallback } from "react";
 import { EmojiRoot } from "../emoji-icon-picker/emoji/emoji";
 import { emojiToString } from "../emoji-icon-picker/helper";
@@ -64,10 +70,7 @@ export function EmojiReactionPicker(props: EmojiReactionPickerProps) {
       </Popover.Button>
       <Popover.Panel
         positionerClassName="z-50"
-        className={cn(
-          "w-80 bg-custom-background-100 rounded-md border-[0.5px] border-custom-border-300 overflow-hidden",
-          dropdownClassName
-        )}
+        className={cn("w-80 overflow-hidden rounded-md border-[0.5px] border-strong bg-surface-1", dropdownClassName)}
         side={finalSide}
         align={finalAlign}
         sideOffset={8}
diff --git a/packages/propel/src/emoji-reaction/emoji-reaction.stories.tsx b/packages/propel/src/emoji-reaction/emoji-reaction.stories.tsx
index 7fb063e07..ebfb2a67c 100644
--- a/packages/propel/src/emoji-reaction/emoji-reaction.stories.tsx
+++ b/packages/propel/src/emoji-reaction/emoji-reaction.stories.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useState } from "react";
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import type { EmojiReactionType } from "./emoji-reaction";
@@ -48,7 +54,7 @@ export const Interactive: Story = {
     };
 
     return (
-      <div className="flex flex-col gap-4 items-center">
+      <div className="flex flex-col items-center gap-4">
         <EmojiReaction
           emoji="👍"
           count={count}
@@ -56,7 +62,7 @@ export const Interactive: Story = {
           users={["Alice", "Bob", "Charlie"]}
           onReactionClick={handleClick}
         />
-        <p className="text-sm text-custom-text-400">Click to toggle reaction</p>
+        <p className="text-13 text-placeholder">Click to toggle reaction</p>
       </div>
     );
   },
@@ -207,14 +213,14 @@ export const InMessageContext: Story = {
     };
 
     return (
-      <div className="max-w-md border border-custom-border-200 rounded-lg p-4 space-y-3">
+      <div className="max-w-md space-y-3 rounded-lg border border-subtle p-4">
         <div className="flex items-start gap-3">
-          <div className="w-8 h-8 rounded-full bg-custom-primary-100 flex items-center justify-center text-white text-sm">
+          <div className="flex h-8 w-8 items-center justify-center rounded-full bg-accent-primary text-13 text-on-color">
             AB
           </div>
           <div className="flex-1">
-            <div className="font-medium text-sm">Alice Brown</div>
-            <div className="text-sm text-custom-text-300 mt-1">
+            <div className="text-13 font-medium">Alice Brown</div>
+            <div className="mt-1 text-13 text-tertiary">
               Hey everyone! Just wanted to share some exciting news about our project launch next week!
             </div>
           </div>
diff --git a/packages/propel/src/emoji-reaction/emoji-reaction.tsx b/packages/propel/src/emoji-reaction/emoji-reaction.tsx
index 4f1b9c50a..b71b62304 100644
--- a/packages/propel/src/emoji-reaction/emoji-reaction.tsx
+++ b/packages/propel/src/emoji-reaction/emoji-reaction.tsx
@@ -1,9 +1,16 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 import { AnimatedCounter } from "../animated-counter";
 import { stringToEmoji } from "../emoji-icon-picker";
 import { AddReactionIcon } from "../icons";
 import { Tooltip } from "../tooltip";
 import { cn } from "../utils";
+import { IconButton } from "../icon-button";
 
 export interface EmojiReactionType {
   emoji: string;
@@ -60,8 +67,8 @@ const EmojiReaction = React.forwardRef(function EmojiReaction(
     const remainingCount = users.length - displayUsers.length;
 
     return (
-      <div className="text-xs">
-        <div className="font-medium mb-1">{stringToEmoji(emoji)}</div>
+      <div className="text-11">
+        <div className="mb-1 font-medium">{stringToEmoji(emoji)}</div>
         <div>
           {displayUsers.join(", ")}
           {remainingCount > 0 && ` and ${remainingCount} more`}
@@ -75,16 +82,16 @@ const EmojiReaction = React.forwardRef(function EmojiReaction(
       ref={ref}
       onClick={handleClick}
       className={cn(
-        "inline-flex items-center rounded-full border px-1.5 text-xs gap-0.5 transition-all duration-200",
+        "inline-flex items-center gap-0.5 rounded-full border px-1.5 text-11 transition-all duration-200",
         reacted
-          ? "bg-custom-primary-100/10 border-custom-primary-100 text-custom-primary-100"
-          : "bg-custom-background-100 border-custom-border-200 text-custom-text-300 hover:border-custom-border-300 hover:bg-custom-background-90",
+          ? "border-accent-strong bg-accent-primary/10 text-accent-primary"
+          : "border-subtle bg-surface-1 text-tertiary hover:border-strong hover:bg-surface-2",
         className
       )}
       {...props}
     >
-      <span className="text-base leading-unset">{emoji}</span>
-      {showCount && count > 0 && <AnimatedCounter count={count} size="sm" className="text-xs leading-normal" />}
+      <span className="leading-unset text-14">{emoji}</span>
+      {showCount && count > 0 && <AnimatedCounter count={count} size="sm" className="text-11 leading-normal" />}
     </button>
   );
 
@@ -100,22 +107,17 @@ const EmojiReactionButton = React.forwardRef(function EmojiReactionButton(
   ref: React.ForwardedRef<HTMLButtonElement>
 ) {
   return (
-    <button
-      ref={ref}
-      onClick={onAddReaction}
-      className={cn(
-        "inline-flex items-center justify-center rounded-full border border-dashed border-custom-border-300",
-        "bg-custom-background-100 text-custom-text-400 transition-all duration-200",
-        "hover:border-custom-primary-100 hover:text-custom-primary-100 hover:bg-custom-primary-100/5",
-        "focus:outline-none focus:ring-2 focus:ring-custom-primary-100/20 focus:ring-offset-1",
-        "h-6 w-6",
-        className
-      )}
-      title="Add reaction"
-      {...props}
-    >
-      <AddReactionIcon className="h-3 w-3" />
-    </button>
+    <Tooltip tooltipContent="Add reaction">
+      <IconButton
+        ref={ref}
+        icon={AddReactionIcon}
+        variant="ghost"
+        size="sm"
+        onClick={onAddReaction}
+        className={className}
+        {...props}
+      />
+    </Tooltip>
   );
 });
 
diff --git a/packages/propel/src/emoji-reaction/index.ts b/packages/propel/src/emoji-reaction/index.ts
index 151af7bb2..574cdf83b 100644
--- a/packages/propel/src/emoji-reaction/index.ts
+++ b/packages/propel/src/emoji-reaction/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export { EmojiReaction, EmojiReactionGroup, EmojiReactionButton } from "./emoji-reaction";
 export type {
   EmojiReactionProps,
diff --git a/packages/propel/src/empty-state/assets-showcase.stories.tsx b/packages/propel/src/empty-state/assets-showcase.stories.tsx
index da35189fc..ca4d7c162 100644
--- a/packages/propel/src/empty-state/assets-showcase.stories.tsx
+++ b/packages/propel/src/empty-state/assets-showcase.stories.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { HorizontalStackAssetsMap } from "./assets/horizontal-stack/constant";
 import { IllustrationMap } from "./assets/illustration/constant";
@@ -31,18 +37,18 @@ export const HorizontalStackAssets: Story = {
   render: () => (
     <div className="p-8">
       <div className="mb-6">
-        <h2 className="text-xl font-semibold text-custom-text-100">Horizontal Stack Assets</h2>
-        <p className="text-sm text-custom-text-300">Used primarily in EmptyStateCompact component</p>
+        <h2 className="text-18 font-semibold text-primary">Horizontal Stack Assets</h2>
+        <p className="text-13 text-tertiary">Used primarily in EmptyStateCompact component</p>
       </div>
       <div className="grid w-full grid-cols-12 gap-6">
         {HorizontalStackAssetsMap.map((item) => (
           <div
             key={item.title}
-            className="col-span-6 flex flex-col items-center justify-center gap-3 rounded-lg border border-custom-border-200 bg-custom-background-100 p-6 sm:col-span-4 lg:col-span-3"
+            className="col-span-6 flex flex-col items-center justify-center gap-3 rounded-lg border border-subtle bg-surface-1 p-6 sm:col-span-4 lg:col-span-3"
           >
             <div className="flex h-24 w-24 items-center justify-center">{item.asset}</div>
-            <p className="text-center text-xs font-medium text-custom-text-200">{item.title}</p>
-            <code className="rounded bg-custom-background-80 px-2 py-1 text-xs text-custom-text-300">
+            <p className="text-center text-11 font-medium text-secondary">{item.title}</p>
+            <code className="rounded-sm bg-layer-1 px-2 py-1 text-11 text-tertiary">
               {item.title.toLowerCase().replace(/\s+/g, "-")}
             </code>
           </div>
@@ -64,20 +70,20 @@ export const VerticalStackAssets: Story = {
   render: () => (
     <div className="p-8">
       <div className="mb-6">
-        <h2 className="text-xl font-semibold text-custom-text-100">Vertical Stack Assets</h2>
-        <p className="text-sm text-custom-text-300">Used primarily in EmptyStateDetailed component</p>
+        <h2 className="text-18 font-semibold text-primary">Vertical Stack Assets</h2>
+        <p className="text-13 text-tertiary">Used primarily in EmptyStateDetailed component</p>
       </div>
       <div className="grid w-full grid-cols-12 gap-6">
         {VerticalStackAssetsMap.map((item) => (
           <div
             key={item.title}
-            className="col-span-6 flex flex-col items-center justify-center gap-3 rounded-lg border border-custom-border-200 bg-custom-background-100 p-6 sm:col-span-4 lg:col-span-3"
+            className="col-span-6 flex flex-col items-center justify-center gap-3 rounded-lg border border-subtle bg-surface-1 p-6 sm:col-span-4 lg:col-span-3"
           >
             <div className="flex h-32 w-32 items-center justify-center">{item.asset}</div>
-            <p className="text-center text-xs font-medium text-custom-text-200">
+            <p className="text-center text-11 font-medium text-secondary">
               {item.title.replace(/VerticalStackIllustration$/, "")}
             </p>
-            <code className="rounded bg-custom-background-80 px-2 py-1 text-xs text-custom-text-300">
+            <code className="rounded-sm bg-layer-1 px-2 py-1 text-11 text-tertiary">
               {item.title
                 .replace(/VerticalStackIllustration$/, "")
                 .replace(/([A-Z])/g, "-$1")
@@ -102,20 +108,18 @@ export const IllustrationAssets: Story = {
   render: () => (
     <div className="p-8">
       <div className="mb-6">
-        <h2 className="text-xl font-semibold text-custom-text-100">Illustration Assets</h2>
-        <p className="text-sm text-custom-text-300">Available in both EmptyStateCompact and EmptyStateDetailed</p>
+        <h2 className="text-18 font-semibold text-primary">Illustration Assets</h2>
+        <p className="text-13 text-tertiary">Available in both EmptyStateCompact and EmptyStateDetailed</p>
       </div>
       <div className="grid w-full grid-cols-12 gap-6">
         {IllustrationMap.map((item) => (
           <div
             key={item.title}
-            className="col-span-6 flex flex-col items-center justify-center gap-3 rounded-lg border border-custom-border-200 bg-custom-background-100 p-6 sm:col-span-4 lg:col-span-3"
+            className="col-span-6 flex flex-col items-center justify-center gap-3 rounded-lg border border-subtle bg-surface-1 p-6 sm:col-span-4 lg:col-span-3"
           >
             <div className="flex h-24 w-24 items-center justify-center">{item.asset}</div>
-            <p className="text-center text-xs font-medium text-custom-text-200">{item.title}</p>
-            <code className="rounded bg-custom-background-80 px-2 py-1 text-xs text-custom-text-300">
-              {item.title.toLowerCase()}
-            </code>
+            <p className="text-center text-11 font-medium text-secondary">{item.title}</p>
+            <code className="rounded-sm bg-layer-1 px-2 py-1 text-11 text-tertiary">{item.title.toLowerCase()}</code>
           </div>
         ))}
       </div>
@@ -136,19 +140,17 @@ export const AllAssets: Story = {
       {/* Horizontal Stack */}
       <div>
         <div className="mb-6">
-          <h2 className="text-xl font-semibold text-custom-text-100">Horizontal Stack Assets</h2>
-          <p className="text-sm text-custom-text-300">
-            For EmptyStateCompact - {HorizontalStackAssetsMap.length} assets
-          </p>
+          <h2 className="text-18 font-semibold text-primary">Horizontal Stack Assets</h2>
+          <p className="text-13 text-tertiary">For EmptyStateCompact - {HorizontalStackAssetsMap.length} assets</p>
         </div>
         <div className="grid w-full grid-cols-12 gap-4">
           {HorizontalStackAssetsMap.map((item) => (
             <div
               key={item.title}
-              className="col-span-6 flex flex-col items-center justify-center gap-2 rounded border border-custom-border-200 bg-custom-background-100 p-4 sm:col-span-3 lg:col-span-2"
+              className="col-span-6 flex flex-col items-center justify-center gap-2 rounded-sm border border-subtle bg-surface-1 p-4 sm:col-span-3 lg:col-span-2"
             >
               <div className="flex h-16 w-16 items-center justify-center">{item.asset}</div>
-              <code className="text-[10px] text-custom-text-400">{item.title.toLowerCase().replace(/\s+/g, "-")}</code>
+              <code className="text-10 text-placeholder">{item.title.toLowerCase().replace(/\s+/g, "-")}</code>
             </div>
           ))}
         </div>
@@ -157,19 +159,17 @@ export const AllAssets: Story = {
       {/* Vertical Stack */}
       <div>
         <div className="mb-6">
-          <h2 className="text-xl font-semibold text-custom-text-100">Vertical Stack Assets</h2>
-          <p className="text-sm text-custom-text-300">
-            For EmptyStateDetailed - {VerticalStackAssetsMap.length} assets
-          </p>
+          <h2 className="text-18 font-semibold text-primary">Vertical Stack Assets</h2>
+          <p className="text-13 text-tertiary">For EmptyStateDetailed - {VerticalStackAssetsMap.length} assets</p>
         </div>
         <div className="grid w-full grid-cols-12 gap-4">
           {VerticalStackAssetsMap.map((item) => (
             <div
               key={item.title}
-              className="col-span-6 flex flex-col items-center justify-center gap-2 rounded border border-custom-border-200 bg-custom-background-100 p-4 sm:col-span-3 lg:col-span-2"
+              className="col-span-6 flex flex-col items-center justify-center gap-2 rounded-sm border border-subtle bg-surface-1 p-4 sm:col-span-3 lg:col-span-2"
             >
               <div className="flex h-20 w-20 items-center justify-center">{item.asset}</div>
-              <code className="text-center text-[10px] text-custom-text-400">
+              <code className="text-center text-10 text-placeholder">
                 {item.title
                   .replace(/VerticalStackIllustration$/, "")
                   .replace(/([A-Z])/g, "-$1")
@@ -184,17 +184,17 @@ export const AllAssets: Story = {
       {/* Illustrations */}
       <div>
         <div className="mb-6">
-          <h2 className="text-xl font-semibold text-custom-text-100">Illustration Assets</h2>
-          <p className="text-sm text-custom-text-300">For both components - {IllustrationMap.length} assets</p>
+          <h2 className="text-18 font-semibold text-primary">Illustration Assets</h2>
+          <p className="text-13 text-tertiary">For both components - {IllustrationMap.length} assets</p>
         </div>
         <div className="grid w-full grid-cols-12 gap-4">
           {IllustrationMap.map((item) => (
             <div
               key={item.title}
-              className="col-span-6 flex flex-col items-center justify-center gap-2 rounded border border-custom-border-200 bg-custom-background-100 p-4 sm:col-span-3 lg:col-span-2"
+              className="col-span-6 flex flex-col items-center justify-center gap-2 rounded-sm border border-subtle bg-surface-1 p-4 sm:col-span-3 lg:col-span-2"
             >
               <div className="flex h-16 w-16 items-center justify-center">{item.asset}</div>
-              <code className="text-[10px] text-custom-text-400">{item.title.toLowerCase()}</code>
+              <code className="text-10 text-placeholder">{item.title.toLowerCase()}</code>
             </div>
           ))}
         </div>
diff --git a/packages/propel/src/empty-state/assets/asset-registry.tsx b/packages/propel/src/empty-state/assets/asset-registry.tsx
index e1eb823c6..f9af6d7d4 100644
--- a/packages/propel/src/empty-state/assets/asset-registry.tsx
+++ b/packages/propel/src/empty-state/assets/asset-registry.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 import type {
   CompactAssetType,
diff --git a/packages/propel/src/empty-state/assets/asset-types.ts b/packages/propel/src/empty-state/assets/asset-types.ts
index 23fb810ad..d86f579e3 100644
--- a/packages/propel/src/empty-state/assets/asset-types.ts
+++ b/packages/propel/src/empty-state/assets/asset-types.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // Horizontal Stack Asset Types
 export type HorizontalStackAssetType =
   | "customer"
diff --git a/packages/propel/src/empty-state/assets/helper.tsx b/packages/propel/src/empty-state/assets/helper.tsx
index 0ef1a1114..408500621 100644
--- a/packages/propel/src/empty-state/assets/helper.tsx
+++ b/packages/propel/src/empty-state/assets/helper.tsx
@@ -1,12 +1,20 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export const ILLUSTRATION_COLOR_TOKEN_MAP = {
   fill: {
-    primary: "rgba(var(--color-background-100))", // white or #fff,
-    secondary: "rgba(var(--color-background-90))", // #F4F5F5
-    tertiary: "rgba(var(--color-background-80))", // #E5E7E8
+    primary: "var(--illustration-fill-primary)", // #FFFFFF
+    secondary: "var(--illustration-fill-secondary)", // #F4F5F5
+    tertiary: "var(--illustration-fill-tertiary)", // #eaebeb
+    quaternary: "var(--illustration-fill-quaternary)", // #CFD2D3
   },
   stroke: {
-    primary: "rgba(var(--color-text-200))", // #1D1F20
-    secondary: "rgba(var(--color-border-400))", // #7A8185 or #CFD2D3
+    primary: "var(--illustration-stroke-primary)", //#CFD2D3
+    secondary: "var(--illustration-stroke-secondary)", // #8A9093
+    tertiary: "var(--illustration-stroke-tertiary)", // #1d1f20
   },
 };
 
diff --git a/packages/propel/src/empty-state/assets/horizontal-stack/constant.tsx b/packages/propel/src/empty-state/assets/horizontal-stack/constant.tsx
index 2328b58e5..fa16d771a 100644
--- a/packages/propel/src/empty-state/assets/horizontal-stack/constant.tsx
+++ b/packages/propel/src/empty-state/assets/horizontal-stack/constant.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import {
   CustomerHorizontalStackIllustration,
   EpicHorizontalStackIllustration,
@@ -23,83 +29,83 @@ import {
 
 export const HorizontalStackAssetsMap = [
   {
-    asset: <CustomerHorizontalStackIllustration className="w-20 h-20" />,
+    asset: <CustomerHorizontalStackIllustration className="h-20 w-20" />,
     title: "Customer",
   },
   {
-    asset: <EpicHorizontalStackIllustration className="w-20 h-20" />,
+    asset: <EpicHorizontalStackIllustration className="h-20 w-20" />,
     title: "Epic",
   },
   {
-    asset: <EstimateHorizontalStackIllustration className="w-20 h-20" />,
+    asset: <EstimateHorizontalStackIllustration className="h-20 w-20" />,
     title: "Estimate",
   },
   {
-    asset: <ExportHorizontalStackIllustration className="w-20 h-20" />,
+    asset: <ExportHorizontalStackIllustration className="h-20 w-20" />,
     title: "Export",
   },
   {
-    asset: <IntakeHorizontalStackIllustration className="w-20 h-20" />,
+    asset: <IntakeHorizontalStackIllustration className="h-20 w-20" />,
     title: "Intake",
   },
   {
-    asset: <LabelHorizontalStackIllustration className="w-20 h-20" />,
+    asset: <LabelHorizontalStackIllustration className="h-20 w-20" />,
     title: "Label",
   },
   {
-    asset: <LinkHorizontalStackIllustration className="w-20 h-20" />,
+    asset: <LinkHorizontalStackIllustration className="h-20 w-20" />,
     title: "Link",
   },
   {
-    asset: <MembersHorizontalStackIllustration className="w-20 h-20" />,
+    asset: <MembersHorizontalStackIllustration className="h-20 w-20" />,
     title: "Members",
   },
   {
-    asset: <NoteHorizontalStackIllustration className="w-20 h-20" />,
+    asset: <NoteHorizontalStackIllustration className="h-20 w-20" />,
     title: "Note",
   },
   {
-    asset: <PriorityHorizontalStackIllustration className="w-20 h-20" />,
+    asset: <PriorityHorizontalStackIllustration className="h-20 w-20" />,
     title: "Priority",
   },
   {
-    asset: <ProjectHorizontalStackIllustration className="w-20 h-20" />,
+    asset: <ProjectHorizontalStackIllustration className="h-20 w-20" />,
     title: "Project",
   },
   {
-    asset: <SettingsHorizontalStackIllustration className="w-20 h-20" />,
+    asset: <SettingsHorizontalStackIllustration className="h-20 w-20" />,
     title: "Settings",
   },
   {
-    asset: <StateHorizontalStackIllustration className="w-20 h-20" />,
+    asset: <StateHorizontalStackIllustration className="h-20 w-20" />,
     title: "State",
   },
   {
-    asset: <TemplateHorizontalStackIllustration className="w-20 h-20" />,
+    asset: <TemplateHorizontalStackIllustration className="h-20 w-20" />,
     title: "Template",
   },
   {
-    asset: <TokenHorizontalStackIllustration className="w-20 h-20" />,
+    asset: <TokenHorizontalStackIllustration className="h-20 w-20" />,
     title: "Token",
   },
   {
-    asset: <UnknownHorizontalStackIllustration className="w-20 h-20" />,
+    asset: <UnknownHorizontalStackIllustration className="h-20 w-20" />,
     title: "Unknown",
   },
   {
-    asset: <UpdateHorizontalStackIllustration className="w-20 h-20" />,
+    asset: <UpdateHorizontalStackIllustration className="h-20 w-20" />,
     title: "Update",
   },
   {
-    asset: <WebhookHorizontalStackIllustration className="w-20 h-20" />,
+    asset: <WebhookHorizontalStackIllustration className="h-20 w-20" />,
     title: "Webhook",
   },
   {
-    asset: <WorkItemHorizontalStackIllustration className="w-20 h-20" />,
+    asset: <WorkItemHorizontalStackIllustration className="h-20 w-20" />,
     title: "WorkItem",
   },
   {
-    asset: <WorklogHorizontalStackIllustration className="w-20 h-20" />,
+    asset: <WorklogHorizontalStackIllustration className="h-20 w-20" />,
     title: "Worklog",
   },
 ];
diff --git a/packages/propel/src/empty-state/assets/horizontal-stack/customer.tsx b/packages/propel/src/empty-state/assets/horizontal-stack/customer.tsx
index dbe8e38a2..94e0015a1 100644
--- a/packages/propel/src/empty-state/assets/horizontal-stack/customer.tsx
+++ b/packages/propel/src/empty-state/assets/horizontal-stack/customer.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper";
 import type { TIllustrationAssetProps } from "../helper";
 
@@ -13,17 +19,17 @@ export function CustomerHorizontalStackIllustration({ className }: TIllustration
     >
       <g opacity="0.2">
         <path
-          d="M47.8782 2.57309C46.9628 2.10751 45.787 2.14718 44.5087 2.79426L9.267 20.7542C6.37097 22.2299 4.0195 26.2861 4.0195 29.8055V72.6934C4.0195 74.6583 4.74547 76.0394 5.88968 76.6313L2.37019 74.84C1.22598 74.256 0.5 72.867 0.5 70.9021V28.0142C0.5 24.4869 2.85157 20.4386 5.7476 18.9629L40.9893 1.00296C42.2755 0.347996 43.4513 0.316215 44.3588 0.781791L47.8782 2.57309Z"
+          d="M47.6282 2.35629C46.7128 1.89072 45.537 1.93039 44.2587 2.57746L9.017 20.5374C6.12097 22.0131 3.7695 26.0693 3.7695 29.5887V72.4766C3.7695 74.4415 4.49547 75.8226 5.63968 76.4145L2.12019 74.6232C0.975977 74.0392 0.25 72.6502 0.25 70.6853V27.7974C0.25 24.2701 2.60157 20.2218 5.4976 18.7462L40.7393 0.786161C42.0255 0.131199 43.2013 0.0994185 44.1088 0.564994L47.6282 2.35629Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.5"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
         <path
-          d="M47.878 2.57281C49.0222 3.15675 49.7482 4.54577 49.7482 6.51066V49.3986C49.7482 52.9259 47.3966 56.9742 44.5006 58.4498L9.25889 76.4102C7.97264 77.0652 6.79695 77.0966 5.88947 76.631C4.74526 76.0471 4.01929 74.658 4.01929 72.6931V29.8052C4.01929 26.2779 6.37076 22.2296 9.26679 20.754L44.5085 2.79397C45.7947 2.13901 46.9705 2.10723 47.878 2.57281Z"
+          d="M47.628 2.35601C48.7722 2.93995 49.4982 4.32897 49.4982 6.29386V49.1818C49.4982 52.7091 47.1466 56.7574 44.2506 58.233L9.00889 76.1934C7.72264 76.8484 6.54695 76.8798 5.63947 76.4142C4.49526 75.8303 3.76929 74.4412 3.76929 72.4763V29.5884C3.76929 26.0611 6.12076 22.0128 9.01679 20.5372L44.2585 2.57718C45.5447 1.92221 46.7205 1.89043 47.628 2.35601Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.5"
           strokeLinecap="round"
           strokeLinejoin="round"
@@ -31,34 +37,34 @@ export function CustomerHorizontalStackIllustration({ className }: TIllustration
       </g>
       <g opacity="0.6">
         <path
-          d="M63.2578 9.36801C62.3425 8.90244 61.1667 8.94211 59.8883 9.58918L24.6466 27.5492C21.7506 29.0248 19.3991 33.081 19.3991 36.6004V79.4887C19.3991 81.4536 20.1251 82.8344 21.2693 83.4262L17.7498 81.6349C16.6056 81.0509 15.8796 79.6623 15.8796 77.6974V34.8091C15.8796 31.2818 18.2312 27.2335 21.1272 25.7579L56.3689 7.79788C57.6552 7.14292 58.8309 7.11114 59.7384 7.57671L63.2578 9.36801Z"
+          d="M63.0078 9.15121C62.0925 8.68564 60.9167 8.72531 59.6383 9.37238L24.3966 27.3324C21.5006 28.808 19.1491 32.8642 19.1491 36.3836V79.2719C19.1491 81.2368 19.8751 82.6176 21.0193 83.2094L17.4998 81.4181C16.3556 80.8342 15.6296 79.4455 15.6296 77.4806V34.5924C15.6296 31.065 17.9812 27.0167 20.8772 25.5411L56.1189 7.58108C57.4052 6.92612 58.5809 6.89434 59.4884 7.35992L63.0078 9.15121Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.5"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
         <path
-          d="M63.2584 9.36578C64.4026 9.94972 65.1285 11.3387 65.1285 13.3036V56.1919C65.1285 59.7192 62.777 63.7672 59.8809 65.2428L24.6394 83.2032C23.3531 83.8581 22.1773 83.8895 21.2698 83.424C20.1256 82.84 19.3997 81.4514 19.3997 79.4865V36.5982C19.3997 33.0709 21.7511 29.0226 24.6472 27.5469L59.8888 9.58694C61.1751 8.93198 62.3509 8.9002 63.2584 9.36578Z"
+          d="M63.0084 9.14898C64.1526 9.73292 64.8785 11.1219 64.8785 13.0868V55.9751C64.8785 59.5024 62.527 63.5504 59.6309 65.026L24.3894 82.9864C23.1031 83.6413 21.9273 83.6727 21.0198 83.2072C19.8756 82.6232 19.1497 81.2346 19.1497 79.2697V36.3814C19.1497 32.8541 21.5011 28.8058 24.3972 27.3301L59.6388 9.37015C60.9251 8.71518 62.1009 8.6834 63.0084 9.14898Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.5"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
       </g>
       <path
-        d="M78.6299 16.1631C77.7145 15.6975 76.5387 15.7368 75.2604 16.3839L40.0188 34.3442C37.1228 35.8199 34.7712 39.8757 34.7712 43.3951V86.2834C34.7712 88.2483 35.4972 89.6294 36.6414 90.2213L33.122 88.43C31.9778 87.846 31.2517 86.457 31.2517 84.4921V41.6038C31.2517 38.0765 33.6033 34.0286 36.4993 32.5529L71.741 14.5926C73.0272 13.9376 74.203 13.9062 75.1105 14.3718L78.6299 16.1631Z"
+        d="M78.3799 15.9463C77.4645 15.4807 76.2887 15.52 75.0104 16.1671L39.7688 34.1275C36.8728 35.6031 34.5212 39.6589 34.5212 43.1783V86.0666C34.5212 88.0315 35.2472 89.4126 36.3914 90.0045L32.872 88.2132C31.7278 87.6292 31.0017 86.2402 31.0017 84.2753V41.387C31.0017 37.8597 33.3533 33.8118 36.2493 32.3362L71.491 14.3758C72.7772 13.7208 73.953 13.6894 74.8605 14.155L78.3799 15.9463Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.5"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
       <path
-        d="M78.6299 16.1609C79.7741 16.7448 80.5001 18.1334 80.5001 20.0983V62.9866C80.5001 66.5139 78.1486 70.5622 75.2525 72.0379L40.0109 89.9979C38.7247 90.6528 37.5489 90.6846 36.6414 90.219C35.4972 89.6351 34.7712 88.2461 34.7712 86.2812V43.3929C34.7712 39.8656 37.1228 35.8177 40.0188 34.342L75.2604 16.3816C76.5467 15.7267 77.7225 15.6953 78.6299 16.1609Z"
+        d="M78.3799 15.9441C79.5241 16.528 80.2501 17.9166 80.2501 19.8815V62.7698C80.2501 66.2971 77.8986 70.3454 75.0025 71.8211L39.7609 89.7811C38.4747 90.436 37.2989 90.4678 36.3914 90.0022C35.2472 89.4183 34.5212 88.0293 34.5212 86.0644V43.1761C34.5212 39.6488 36.8728 35.6009 39.7688 34.1252L75.0104 16.1648C76.2967 15.5099 77.4725 15.4785 78.3799 15.9441Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.5"
         strokeLinecap="round"
         strokeLinejoin="round"
@@ -66,8 +72,8 @@ export function CustomerHorizontalStackIllustration({ className }: TIllustration
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M46.6233 45.5414C46.6233 44.9023 47.0494 44.1683 47.5702 43.9L62.7685 36.1588C63.2893 35.8905 63.7154 36.1904 63.7154 36.8296C63.7154 37.4688 63.2893 38.2027 62.7685 38.471V43.0951L70.3676 39.2205C70.8884 38.9522 71.3145 39.2521 71.3145 39.8913C71.3145 40.5305 70.8884 41.2644 70.3676 41.5327V60.0294L71.3145 59.5482C71.8353 59.2799 72.2615 59.5798 72.2615 60.219C72.2615 60.8582 71.8353 61.5917 71.3145 61.86L46.6154 74.4465C46.0946 74.7148 45.6685 74.4149 45.6685 73.7757C45.6685 73.1365 46.0946 72.4026 46.6154 72.1343L47.5623 71.653V46.22C47.0415 46.4883 46.6154 46.1883 46.6154 45.5492L46.6233 45.5414ZM49.472 45.2417V70.6747L51.3737 69.7041V65.6557C51.3737 64.0617 52.439 62.2233 53.7489 61.5525L56.5977 60.1003C57.9076 59.4296 58.9728 60.1874 58.9728 61.7814V65.8295L60.8746 64.8589V39.4258L49.4799 45.2336L49.472 45.2417ZM62.7764 45.4074V63.9041L68.4738 61V42.5033L62.7764 45.4074ZM57.0712 66.8001V62.752C57.0712 62.4364 56.8581 62.2863 56.5977 62.4126L53.7489 63.8644C53.4885 63.9985 53.2755 64.3695 53.2755 64.6851V68.7332L57.0712 66.8001ZM51.3737 48.9029C51.3737 48.2637 51.7999 47.5298 52.3207 47.2615L53.2676 46.7802C53.7884 46.5119 54.2146 46.8119 54.2146 47.451C54.2146 48.0902 53.7884 48.8242 53.2676 49.0925L52.3207 49.5737C51.7999 49.842 51.3737 49.5421 51.3737 48.9029ZM56.1242 46.4804C56.1242 45.8413 56.5503 45.1073 57.0712 44.839L58.018 44.3578C58.5389 44.0895 58.965 44.3894 58.965 45.0286C58.965 45.6678 58.5389 46.4013 58.018 46.6696L57.0712 47.1513C56.5503 47.4196 56.1242 47.1196 56.1242 46.4804ZM51.3737 53.5273C51.3737 52.8882 51.7999 52.1542 52.3207 51.8859L53.2676 51.4043C53.7884 51.136 54.2146 51.4359 54.2146 52.0751C54.2146 52.7143 53.7884 53.4482 53.2676 53.7165L52.3207 54.1978C51.7999 54.4661 51.3737 54.1665 51.3737 53.5273ZM56.1242 51.1045C56.1242 50.4653 56.5503 49.7314 57.0712 49.4631L58.018 48.9819C58.5389 48.7136 58.965 49.0135 58.965 49.6527C58.965 50.2919 58.5389 51.0258 58.018 51.2941L57.0712 51.7754C56.5503 52.0436 56.1242 51.7437 56.1242 51.1045ZM64.6703 49.0609C64.6703 48.4217 65.0964 47.6877 65.6172 47.4194H65.6251C66.1459 47.1433 66.572 47.4509 66.572 48.0822V48.098C66.572 48.7372 66.1459 49.4711 65.6251 49.7394H65.6172C65.0964 50.0156 64.6703 49.7079 64.6703 49.0767V49.0609ZM51.3737 58.1433C51.3737 57.5042 51.7999 56.7702 52.3207 56.5019L53.2676 56.0207C53.7884 55.7524 54.2146 56.0523 54.2146 56.6915C54.2146 57.3307 53.7884 58.0646 53.2676 58.3329L52.3207 58.8142C51.7999 59.0825 51.3737 58.7825 51.3737 58.1433ZM56.1242 55.7286C56.1242 55.0894 56.5503 54.3559 57.0712 54.0876L58.018 53.606C58.5389 53.3377 58.965 53.6376 58.965 54.2768C58.965 54.916 58.5389 55.6499 58.018 55.9182L57.0712 56.3994C56.5503 56.6677 56.1242 56.3678 56.1242 55.7286ZM64.6703 53.6849C64.6703 53.0458 65.0964 52.3118 65.6172 52.0435H65.6251C66.1459 51.7673 66.572 52.0754 66.572 52.7066V52.7224C66.572 53.3616 66.1459 54.0952 65.6251 54.3635H65.6172C65.0964 54.6397 64.6703 54.332 64.6703 53.7007V53.6849ZM64.6703 58.309C64.6703 57.6698 65.0964 56.9363 65.6172 56.668H65.6251C66.1459 56.3918 66.572 56.6994 66.572 57.3307V57.3465C66.572 57.9857 66.1459 58.7196 65.6251 58.9879H65.6172C65.0964 59.2641 64.6703 58.9561 64.6703 58.3248V58.309Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M46.3733 45.3247C46.3733 44.6855 46.7994 43.9515 47.3202 43.6832L62.5185 35.942C63.0393 35.6737 63.4654 35.9737 63.4654 36.6128C63.4654 37.252 63.0393 37.9859 62.5185 38.2542V42.8783L70.1176 39.0037C70.6384 38.7354 71.0645 39.0353 71.0645 39.6745C71.0645 40.3137 70.6384 41.0476 70.1176 41.3159V59.8126L71.0645 59.3314C71.5853 59.0631 72.0115 59.363 72.0115 60.0022C72.0115 60.6414 71.5853 61.3749 71.0645 61.6432L46.3654 74.2297C45.8446 74.498 45.4185 74.1981 45.4185 73.5589C45.4185 72.9197 45.8446 72.1858 46.3654 71.9175L47.3123 71.4362V46.0032C46.7915 46.2715 46.3654 45.9715 46.3654 45.3324L46.3733 45.3247ZM49.222 45.0249V70.4579L51.1237 69.4873V65.4389C51.1237 63.8449 52.189 62.0065 53.4989 61.3358L56.3477 59.8835C57.6576 59.2128 58.7228 59.9706 58.7228 61.5646V65.6127L60.6246 64.6421V39.209L49.2299 45.0168L49.222 45.0249ZM62.5264 45.1906V63.6873L68.2238 60.7832V42.2865L62.5264 45.1906ZM56.8212 66.5833V62.5352C56.8212 62.2196 56.6081 62.0695 56.3477 62.1958L53.4989 63.6476C53.2385 63.7818 53.0255 64.1527 53.0255 64.4683V68.5164L56.8212 66.5833ZM51.1237 48.6861C51.1237 48.0469 51.5499 47.313 52.0707 47.0447L53.0176 46.5634C53.5384 46.2951 53.9646 46.5951 53.9646 47.2342C53.9646 47.8734 53.5384 48.6074 53.0176 48.8757L52.0707 49.3569C51.5499 49.6252 51.1237 49.3253 51.1237 48.6861ZM55.8742 46.2636C55.8742 45.6245 56.3003 44.8905 56.8212 44.6222L57.768 44.141C58.2889 43.8727 58.715 44.1726 58.715 44.8118C58.715 45.451 58.2889 46.1845 57.768 46.4528L56.8212 46.9345C56.3003 47.2028 55.8742 46.9028 55.8742 46.2636ZM51.1237 53.3106C51.1237 52.6714 51.5499 51.9374 52.0707 51.6691L53.0176 51.1875C53.5384 50.9192 53.9646 51.2191 53.9646 51.8583C53.9646 52.4975 53.5384 53.2314 53.0176 53.4997L52.0707 53.981C51.5499 54.2493 51.1237 53.9497 51.1237 53.3106ZM55.8742 50.8877C55.8742 50.2486 56.3003 49.5146 56.8212 49.2463L57.768 48.7651C58.2889 48.4968 58.715 48.7967 58.715 49.4359C58.715 50.0751 58.2889 50.809 57.768 51.0773L56.8212 51.5586C56.3003 51.8269 55.8742 51.5269 55.8742 50.8877ZM64.4203 48.8441C64.4203 48.2049 64.8464 47.4709 65.3672 47.2026H65.3751C65.8959 46.9265 66.322 47.2341 66.322 47.8654V47.8812C66.322 48.5204 65.8959 49.2543 65.3751 49.5226H65.3672C64.8464 49.7988 64.4203 49.4911 64.4203 48.8599V48.8441ZM51.1237 57.9265C51.1237 57.2874 51.5499 56.5534 52.0707 56.2851L53.0176 55.8039C53.5384 55.5356 53.9646 55.8355 53.9646 56.4747C53.9646 57.1139 53.5384 57.8478 53.0176 58.1161L52.0707 58.5974C51.5499 58.8657 51.1237 58.5657 51.1237 57.9265ZM55.8742 55.5118C55.8742 54.8726 56.3003 54.1391 56.8212 53.8708L57.768 53.3892C58.2889 53.1209 58.715 53.4208 58.715 54.06C58.715 54.6992 58.2889 55.4331 57.768 55.7014L56.8212 56.1826C56.3003 56.4509 55.8742 56.151 55.8742 55.5118ZM64.4203 53.4681C64.4203 52.829 64.8464 52.095 65.3672 51.8267H65.3751C65.8959 51.5505 66.322 51.8586 66.322 52.4898V52.5056C66.322 53.1448 65.8959 53.8784 65.3751 54.1467H65.3672C64.8464 54.4229 64.4203 54.1152 64.4203 53.4839V53.4681ZM64.4203 58.0922C64.4203 57.453 64.8464 56.7195 65.3672 56.4512H65.3751C65.8959 56.175 66.322 56.4826 66.322 57.1139V57.1297C66.322 57.7689 65.8959 58.5028 65.3751 58.7711H65.3672C64.8464 59.0473 64.4203 58.7393 64.4203 58.108V58.0922Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
     </svg>
   );
diff --git a/packages/propel/src/empty-state/assets/horizontal-stack/epic.tsx b/packages/propel/src/empty-state/assets/horizontal-stack/epic.tsx
index 037d7ef85..d4d682ee0 100644
--- a/packages/propel/src/empty-state/assets/horizontal-stack/epic.tsx
+++ b/packages/propel/src/empty-state/assets/horizontal-stack/epic.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper";
 import type { TIllustrationAssetProps } from "../helper";
 
@@ -13,17 +19,17 @@ export function EpicHorizontalStackIllustration({ className }: TIllustrationAsse
     >
       <g opacity="0.2">
         <path
-          d="M47.8729 3.07316C46.9576 2.60763 45.782 2.6473 44.5038 3.2943L9.26602 21.2523C6.37031 22.7277 4.01901 26.7835 4.01901 30.3025V73.1855C4.01901 75.1502 4.7449 76.5312 5.88899 77.1229L2.36998 75.3318C1.2259 74.748 0.5 73.3595 0.5 71.3948V28.5114C0.5 24.9845 2.8513 20.9366 5.74701 19.4612L40.9848 1.5032C42.2709 0.848314 43.4464 0.816538 44.3538 1.28206L47.8729 3.07316Z"
+          d="M47.6229 2.35611C46.7076 1.89059 45.532 1.93026 44.2538 2.57726L9.01602 20.5352C6.12031 22.0107 3.76901 26.0664 3.76901 29.5855V72.4685C3.76901 74.4332 4.4949 75.8141 5.63899 76.4059L2.11998 74.6148C0.975896 74.0309 0.25 72.6424 0.25 70.6778V27.7944C0.25 24.2674 2.6013 20.2196 5.49701 18.7441L40.7348 0.786161C42.0209 0.131273 43.1964 0.0994966 44.1038 0.56502L47.6229 2.35611Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.5"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
         <path
-          d="M47.8722 3.07317C49.0163 3.65704 49.7422 5.04591 49.7422 7.01057V49.894C49.7422 53.4209 47.3909 57.4684 44.4952 58.9439L9.25743 76.9022C7.97132 77.5571 6.79566 77.5885 5.88829 77.1229C4.74421 76.5391 4.01831 75.1502 4.01831 73.1855V30.3025C4.01831 26.7756 6.36962 22.7277 9.26533 21.2523L44.5031 3.29431C45.7892 2.63942 46.9648 2.60764 47.8722 3.07317Z"
+          d="M47.6222 2.35613C48.7663 2.94 49.4922 4.32887 49.4922 6.29353V49.1769C49.4922 52.7039 47.1409 56.7513 44.2452 58.2268L9.00743 76.1852C7.72132 76.84 6.54566 76.8714 5.63829 76.4059C4.49421 75.822 3.76831 74.4332 3.76831 72.4685V29.5855C3.76831 26.0585 6.11962 22.0107 9.01533 20.5352L44.2531 2.57727C45.5392 1.92238 46.7148 1.8906 47.6222 2.35613Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.5"
           strokeLinecap="round"
           strokeLinejoin="round"
@@ -31,41 +37,41 @@ export function EpicHorizontalStackIllustration({ className }: TIllustrationAsse
       </g>
       <g opacity="0.6">
         <path
-          d="M63.2511 9.86669C62.3358 9.40117 61.1602 9.44084 59.8819 10.0878L24.6442 28.0458C21.7485 29.5213 19.3972 33.577 19.3972 37.096V79.9795C19.3972 81.9441 20.1231 83.3247 21.2672 83.9165L17.7482 82.1254C16.6041 81.5415 15.8782 80.153 15.8782 78.1884V35.3049C15.8782 31.778 18.2295 27.7302 21.1252 26.2547L56.3629 8.29674C57.649 7.64185 58.8246 7.61046 59.732 8.07598L63.2511 9.86669Z"
+          d="M63.0011 9.14965C62.0858 8.68413 60.9102 8.7238 59.6319 9.37079L24.3942 27.3287C21.4985 28.8042 19.1472 32.86 19.1472 36.379V79.2624C19.1472 81.2271 19.8731 82.6077 21.0172 83.1994L17.4982 81.4083C16.3541 80.8245 15.6282 79.436 15.6282 77.4713V34.5879C15.6282 31.061 17.9795 27.0131 20.8752 25.5377L56.1129 7.5797C57.399 6.92481 58.5746 6.89342 59.482 7.35894L63.0011 9.14965Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.5"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
         <path
-          d="M63.2519 9.86653C64.3959 10.4504 65.1218 11.8393 65.1218 13.8039V56.6874C65.1218 60.2143 62.7705 64.2617 59.8748 65.7372L24.6371 83.6956C23.351 84.3504 22.1753 84.3818 21.2679 83.9163C20.1238 83.3324 19.3979 81.944 19.3979 79.9793V37.0959C19.3979 33.569 21.7493 29.5211 24.645 28.0456L59.8827 10.0877C61.1688 9.43279 62.3445 9.40101 63.2519 9.86653Z"
+          d="M63.0019 9.14949C64.1459 9.73337 64.8718 11.1222 64.8718 13.0869V55.9703C64.8718 59.4972 62.5205 63.5447 59.6248 65.0202L24.3871 82.9785C23.101 83.6334 21.9253 83.6648 21.0179 83.1993C19.8738 82.6154 19.1479 81.2269 19.1479 79.2623V36.3788C19.1479 32.8519 21.4993 28.8041 24.395 27.3286L59.6327 9.37063C60.9188 8.71575 62.0945 8.68397 63.0019 9.14949Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.5"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
       </g>
       <path
-        d="M78.6293 16.668C77.714 16.2025 76.5383 16.2421 75.2601 16.8891L40.0224 34.8471C37.1267 36.3225 34.7755 40.3783 34.7755 43.8973V86.7807C34.7755 88.7454 35.5013 90.126 36.6454 90.7178L33.1263 88.9267C31.9822 88.3428 31.2563 86.9543 31.2563 84.9896V42.1062C31.2563 38.5793 33.6077 34.5314 36.5034 33.056L71.7411 15.098C73.0272 14.4431 74.2029 14.4114 75.1102 14.8769L78.6293 16.668Z"
+        d="M78.3793 15.9509C77.464 15.4854 76.2883 15.5251 75.0101 16.1721L39.7724 34.13C36.8767 35.6055 34.5255 39.6612 34.5255 43.1803V86.0637C34.5255 88.0284 35.2513 89.409 36.3954 90.0007L32.8763 88.2096C31.7322 87.6257 31.0063 86.2373 31.0063 84.2726V41.3892C31.0063 37.8623 33.3577 33.8144 36.2534 32.3389L71.4911 14.381C72.7772 13.7261 73.9529 13.6943 74.8602 14.1598L78.3793 15.9509Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.5"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
       <path
-        d="M78.6299 16.668C79.774 17.2519 80.4999 18.6407 80.4999 20.6054V63.4888C80.4999 67.0157 78.1486 71.0632 75.2529 72.5387L40.0151 90.497C38.729 91.1519 37.5535 91.1833 36.6461 90.7178C35.502 90.1339 34.7761 88.7454 34.7761 86.7807V43.8973C34.7761 40.3704 37.1273 36.3225 40.023 34.8471L75.2608 16.8891C76.5469 16.2342 77.7225 16.2025 78.6299 16.668Z"
+        d="M78.3799 15.9509C79.524 16.5348 80.2499 17.9237 80.2499 19.8883V62.7718C80.2499 66.2987 77.8986 70.3462 75.0029 71.8216L39.7651 89.78C38.479 90.4349 37.3035 90.4662 36.3961 90.0007C35.252 89.4168 34.5261 88.0284 34.5261 86.0637V43.1803C34.5261 39.6534 36.8773 35.6055 39.773 34.13L75.0108 16.1721C76.2969 15.5172 77.4725 15.4854 78.3799 15.9509Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.5"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
       <path
-        d="M73.7365 51.6298V55.4643C73.7365 55.8589 73.6103 56.2928 73.4051 56.6795C73.1842 57.0661 72.9001 57.3741 72.5924 57.524L47.4226 70.3533C46.7914 70.6768 46.2786 70.2743 46.2786 69.4537V63.3469L53.9084 46.7774C54.3345 46.0042 54.8315 45.3175 55.4391 45.0098C56.0466 44.7021 56.5359 44.8836 56.962 45.2229L63.5582 54.6044L66.4065 50.0441C66.8326 49.2708 67.4164 48.663 68.024 48.3473C68.6315 48.0317 69.2154 48.0555 69.6336 48.3947L73.7365 51.6221V51.6298Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M73.4865 50.9128V54.7473C73.4865 55.1418 73.3603 55.5758 73.1551 55.9624C72.9342 56.349 72.6501 56.657 72.3424 56.8069L47.1726 69.6362C46.5414 69.9597 46.0286 69.5572 46.0286 68.7366V62.6298L53.6584 46.0604C54.0845 45.2871 54.5815 44.6005 55.1891 44.2928C55.7966 43.985 56.2859 44.1665 56.712 44.5058L63.3082 53.8874L66.1565 49.327C66.5826 48.5538 67.1664 47.9459 67.774 47.6303C68.3815 47.3147 68.9654 47.3384 69.3836 47.6777L73.4865 50.9051V50.9128Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
     </svg>
   );
diff --git a/packages/propel/src/empty-state/assets/horizontal-stack/estimate.tsx b/packages/propel/src/empty-state/assets/horizontal-stack/estimate.tsx
index 42c3dfa31..4d5ff1d82 100644
--- a/packages/propel/src/empty-state/assets/horizontal-stack/estimate.tsx
+++ b/packages/propel/src/empty-state/assets/horizontal-stack/estimate.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper";
 import type { TIllustrationAssetProps } from "../helper";
 
@@ -13,17 +19,17 @@ export function EstimateHorizontalStackIllustration({ className }: TIllustration
     >
       <g opacity="0.2">
         <path
-          d="M47.8734 3.07267C46.9581 2.60715 45.7825 2.6466 44.5042 3.2936L9.26616 21.2519C6.37042 22.7274 4.01909 26.783 4.01909 30.3021V73.1858C4.01909 75.1505 4.745 76.5313 5.88909 77.1231L2.37005 75.332C1.22595 74.7481 0.5 73.3594 0.5 71.3948V28.511C0.5 24.984 2.85133 20.9363 5.74707 19.4608L40.9851 1.5025C42.2713 0.847607 43.4469 0.816046 44.3543 1.28157L47.8734 3.07267Z"
+          d="M47.6234 2.35621C46.7081 1.89069 45.5325 1.93014 44.2542 2.57714L9.01616 20.5355C6.12042 22.0109 3.76909 26.0666 3.76909 29.5856V72.4694C3.76909 74.4341 4.495 75.8149 5.63909 76.4067L2.12005 74.6155C0.975952 74.0317 0.25 72.643 0.25 70.6783V27.7945C0.25 24.2676 2.60133 20.2198 5.49707 18.7444L40.7351 0.78604C42.0213 0.131145 43.1969 0.0995852 44.1043 0.565113L47.6234 2.35621Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.5"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
         <path
-          d="M47.8732 3.07177C49.0173 3.65565 49.7432 5.04434 49.7432 7.00903V49.8928C49.7432 53.4197 47.3919 57.4675 44.4962 58.943L9.25809 76.9013C7.97197 77.5562 6.7963 77.5877 5.88892 77.1222C4.74482 76.5383 4.01892 75.1496 4.01892 73.1849V30.3012C4.01892 26.7742 6.37025 22.7265 9.26599 21.251L44.5041 3.29269C45.7902 2.6378 46.9658 2.60624 47.8732 3.07177Z"
+          d="M47.6232 2.3553C48.7673 2.93919 49.4932 4.32788 49.4932 6.29257V49.1763C49.4932 52.7033 47.1419 56.751 44.2462 58.2265L9.00809 76.1848C7.72197 76.8397 6.5463 76.8713 5.63892 76.4057C4.49482 75.8219 3.76892 74.4332 3.76892 72.4685V29.5847C3.76892 26.0578 6.12025 22.01 9.01599 20.5345L44.2541 2.57623C45.5402 1.92134 46.7158 1.88978 47.6232 2.3553Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.5"
           strokeLinecap="round"
           strokeLinejoin="round"
@@ -31,34 +37,34 @@ export function EstimateHorizontalStackIllustration({ className }: TIllustration
       </g>
       <g opacity="0.6">
         <path
-          d="M63.2514 9.86595C62.3361 9.40042 61.1605 9.43987 59.8822 10.0869L24.6442 28.0452C21.7484 29.5207 19.3971 33.5763 19.3971 37.0954V79.9791C19.3971 81.9438 20.123 83.3246 21.2671 83.9164L17.748 82.1253C16.604 81.5414 15.8781 80.1527 15.8781 78.188V35.3043C15.8781 31.7773 18.2293 27.7296 21.1251 26.2541L56.3632 8.29578C57.6493 7.64088 58.8249 7.60932 59.7323 8.07485L63.2514 9.86595Z"
+          d="M63.0014 9.14949C62.0861 8.68396 60.9105 8.72341 59.6322 9.37041L24.3942 27.3287C21.4984 28.8042 19.1471 32.8598 19.1471 36.3789V79.2627C19.1471 81.2273 19.873 82.6081 21.0171 83.1999L17.498 81.4088C16.354 80.8249 15.6281 79.4363 15.6281 77.4716V34.5878C15.6281 31.0608 17.9793 27.0131 20.8751 25.5376L56.1132 7.57931C57.3993 6.92442 58.5749 6.89286 59.4823 7.35839L63.0014 9.14949Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.5"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
         <path
-          d="M63.2514 9.86614C64.3955 10.45 65.1214 11.8387 65.1214 13.8034V56.6872C65.1214 60.2141 62.7701 64.2618 59.8743 65.7373L24.6363 83.6956C23.3501 84.3505 22.1745 84.3821 21.2671 83.9166C20.123 83.3327 19.3971 81.944 19.3971 79.9793V37.0955C19.3971 33.5686 21.7484 29.5209 24.6442 28.0454L59.8822 10.0871C61.1684 9.43217 62.344 9.40061 63.2514 9.86614Z"
+          d="M63.0014 9.14968C64.1455 9.73356 64.8714 11.1223 64.8714 13.0869V55.9707C64.8714 59.4977 62.5201 63.5454 59.6243 65.0209L24.3863 82.9792C23.1001 83.6341 21.9245 83.6656 21.0171 83.2001C19.873 82.6162 19.1471 81.2275 19.1471 79.2628V36.3791C19.1471 32.8521 21.4984 28.8044 24.3942 27.3289L59.6322 9.3706C60.9184 8.71571 62.094 8.68415 63.0014 9.14968Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.5"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
       </g>
       <path
-        d="M78.6301 16.6678C77.7148 16.2023 76.5391 16.2417 75.2609 16.8887L40.0228 34.8471C37.1271 36.3225 34.7758 40.3781 34.7758 43.8972V86.781C34.7758 88.7457 35.5017 90.1265 36.6458 90.7182L33.1267 88.9271C31.9826 88.3433 31.2567 86.9546 31.2567 84.9899V42.1061C31.2567 38.5792 33.608 34.5315 36.5037 33.056L71.7419 15.0977C73.028 14.4428 74.2036 14.4112 75.111 14.8767L78.6301 16.6678Z"
+        d="M78.3801 15.9514C77.4648 15.4858 76.2891 15.5253 75.0109 16.1723L39.7728 34.1306C36.8771 35.6061 34.5258 39.6617 34.5258 43.1808V86.0645C34.5258 88.0292 35.2517 89.41 36.3958 90.0018L32.8767 88.2107C31.7326 87.6268 31.0067 86.2381 31.0067 84.2734V41.3897C31.0067 37.8627 33.358 33.815 36.2537 32.3395L71.4919 14.3812C72.778 13.7263 73.9536 13.6947 74.861 14.1603L78.3801 15.9514Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.5"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
       <path
-        d="M78.6299 16.668C79.774 17.2519 80.4999 18.6406 80.4999 20.6053V63.489C80.4999 67.016 78.1487 71.0637 75.2529 72.5392L40.0148 90.4975C38.7287 91.1524 37.553 91.184 36.6456 90.7184C35.5015 90.1346 34.7756 88.7459 34.7756 86.7812V43.8974C34.7756 40.3705 37.127 36.3227 40.0227 34.8473L75.2608 16.8889C76.5469 16.2341 77.7226 16.2025 78.6299 16.668Z"
+        d="M78.3799 15.9516C79.524 16.5354 80.2499 17.9241 80.2499 19.8888V62.7726C80.2499 66.2995 77.8987 70.3473 75.0029 71.8228L39.7648 89.7811C38.4787 90.4359 37.303 90.4675 36.3956 90.002C35.2515 89.4181 34.5256 88.0294 34.5256 86.0647V43.181C34.5256 39.654 36.877 35.6063 39.7727 34.1308L75.0108 16.1725C76.2969 15.5176 77.4726 15.486 78.3799 15.9516Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.5"
         strokeLinecap="round"
         strokeLinejoin="round"
@@ -66,8 +72,8 @@ export function EstimateHorizontalStackIllustration({ className }: TIllustration
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M57.2395 40.7963C57.7524 40.1808 58.3283 39.6916 58.9201 39.3918C59.5119 39.092 60.0879 38.9815 60.6008 39.0841C61.1136 39.1788 61.5397 39.4786 61.8316 39.952L70.8029 54.4938C71.0949 54.9673 71.2527 55.5906 71.2527 56.3086C71.2527 57.0266 71.0949 57.8156 70.8029 58.5889C70.511 59.3621 70.0849 60.0959 69.572 60.7193C69.0592 61.3426 68.4832 61.8239 67.8914 62.1238L49.9331 71.2686C49.3413 71.5684 48.7653 71.671 48.2524 71.5763C47.7395 71.4738 47.3135 71.1739 47.0215 70.7005C46.7296 70.2271 46.5718 69.6038 46.5718 68.8857C46.5718 68.1677 46.7296 67.3866 47.0215 66.6133L56.0007 42.9188C56.3005 42.1455 56.7187 41.4117 57.2316 40.7963H57.2395ZM58.9201 42.1218C58.7229 42.2244 58.5335 42.3822 58.3599 42.5874C58.1942 42.7925 58.0522 43.0371 57.9496 43.2896L48.9705 66.9763C48.8758 67.2367 48.8205 67.4971 48.8205 67.7338C48.8205 67.9705 48.8758 68.1835 48.9705 68.3413C49.0651 68.4991 49.2071 68.6017 49.3807 68.6332C49.5543 68.6648 49.7437 68.6332 49.941 68.5307L67.8914 59.3858C68.0886 59.2832 68.278 59.1254 68.4516 58.9203C68.6252 58.7151 68.7672 58.4706 68.8619 58.2102C68.9566 57.9498 69.0118 57.6894 69.0118 57.4527C69.0118 57.216 68.9566 57.0029 68.8619 56.8451L59.8906 42.3033C59.7959 42.1455 59.6539 42.0508 59.4803 42.0193C59.3067 41.9877 59.1174 42.0193 58.9201 42.1218Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M56.9895 40.0798C57.5024 39.4644 58.0783 38.9752 58.6701 38.6753C59.2619 38.3755 59.8379 38.2651 60.3508 38.3676C60.8636 38.4623 61.2897 38.7621 61.5816 39.2356L70.5529 53.7774C70.8449 54.2508 71.0027 54.8741 71.0027 55.5921C71.0027 56.3102 70.8449 57.0992 70.5529 57.8724C70.261 58.6457 69.8349 59.3795 69.322 60.0028C68.8092 60.6262 68.2332 61.1075 67.6414 61.4073L49.6831 70.5521C49.0913 70.852 48.5153 70.9546 48.0024 70.8599C47.4895 70.7573 47.0635 70.4575 46.7715 69.984C46.4796 69.5106 46.3218 68.8873 46.3218 68.1693C46.3218 67.4513 46.4796 66.6701 46.7715 65.8969L55.7507 42.2023C56.0505 41.4291 56.4687 40.6953 56.9816 40.0798H56.9895ZM58.6701 41.4054C58.4729 41.508 58.2835 41.6658 58.1099 41.8709C57.9442 42.0761 57.8022 42.3207 57.6996 42.5732L48.7205 66.2598C48.6258 66.5202 48.5705 66.7806 48.5705 67.0173C48.5705 67.254 48.6258 67.467 48.7205 67.6248C48.8151 67.7827 48.9571 67.8852 49.1307 67.9168C49.3043 67.9483 49.4937 67.9168 49.691 67.8142L67.6414 58.6694C67.8386 58.5668 68.028 58.409 68.2016 58.2038C68.3752 57.9987 68.5172 57.7541 68.6119 57.4937C68.7066 57.2333 68.7618 56.973 68.7618 56.7362C68.7618 56.4995 68.7066 56.2865 68.6119 56.1287L59.6406 41.5869C59.5459 41.4291 59.4039 41.3344 59.2303 41.3028C59.0567 41.2712 58.8674 41.3028 58.6701 41.4054Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
     </svg>
   );
diff --git a/packages/propel/src/empty-state/assets/horizontal-stack/export.tsx b/packages/propel/src/empty-state/assets/horizontal-stack/export.tsx
index bc974d859..0ff4f3f52 100644
--- a/packages/propel/src/empty-state/assets/horizontal-stack/export.tsx
+++ b/packages/propel/src/empty-state/assets/horizontal-stack/export.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper";
 import type { TIllustrationAssetProps } from "../helper";
 
@@ -5,25 +11,25 @@ export function ExportHorizontalStackIllustration({ className }: TIllustrationAs
   return (
     <svg
       width="71"
-      height="81"
-      viewBox="0 0 71 81"
+      height="80"
+      viewBox="0 0 71 80"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       className={className}
     >
       <g opacity="0.2">
         <path
-          d="M41.9519 2.94243C41.151 2.53509 40.1223 2.5698 39.0038 3.13593L8.17037 18.8494C5.63659 20.1404 3.57921 23.6892 3.57921 26.7684V64.2916C3.57921 66.0107 4.21438 67.2191 5.21547 67.7369L2.13625 66.1696C1.13517 65.6587 0.5 64.4435 0.5 62.7244V25.2012C0.5 22.1151 2.55742 18.5732 5.0912 17.2821L35.9246 1.5687C37.05 0.995669 38.0787 0.967864 38.8726 1.3752L41.9519 2.94243Z"
+          d="M41.6519 2.04204C40.851 1.6347 39.8223 1.66941 38.7038 2.23554L7.87038 17.949C5.3366 19.24 3.27923 22.7888 3.27923 25.868V63.3912C3.27923 65.1103 3.91439 66.3187 4.91548 66.8365L1.83627 65.2692C0.83518 64.7584 0.200012 63.5431 0.200012 61.824V24.3008C0.200012 21.2147 2.25743 17.6728 4.79121 16.3817L35.6246 0.668313C36.75 0.095278 37.7787 0.0674731 38.5726 0.474811L41.6519 2.04204Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.4"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
         <path
-          d="M41.9519 2.94356C42.9529 3.45446 43.5881 4.66973 43.5881 6.38884V43.912C43.5881 46.9981 41.5307 50.54 38.9969 51.8311L8.16351 67.5448C7.03816 68.1179 6.00944 68.1453 5.21548 67.738C4.21439 67.2271 3.57922 66.0118 3.57922 64.2927V26.7696C3.57922 23.6835 5.6366 20.1415 8.17038 18.8505L39.0038 3.13706C40.1292 2.56403 41.1579 2.53622 41.9519 2.94356Z"
+          d="M41.6519 2.04317C42.653 2.55407 43.2881 3.76934 43.2881 5.48845V43.0116C43.2881 46.0977 41.2307 49.6396 38.6969 50.9307L7.86352 66.6444C6.73817 67.2175 5.70945 67.2449 4.91549 66.8376C3.9144 66.3267 3.27924 65.1114 3.27924 63.3923V25.8692C3.27924 22.7831 5.33661 19.2411 7.87039 17.9501L38.7038 2.23667C39.8292 1.66364 40.8579 1.63583 41.6519 2.04317Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.4"
           strokeLinecap="round"
           strokeLinejoin="round"
@@ -31,34 +37,34 @@ export function ExportHorizontalStackIllustration({ className }: TIllustrationAs
       </g>
       <g opacity="0.6">
         <path
-          d="M55.4078 8.88579C54.6069 8.47845 53.5782 8.51316 52.4597 9.07929L21.6263 24.7927C19.0926 26.0838 17.0351 29.6326 17.0351 32.7118V70.2353C17.0351 71.9544 17.6703 73.1624 18.6714 73.6802L15.5922 72.113C14.5911 71.6021 13.9559 70.3872 13.9559 68.6681V31.1446C13.9559 28.0585 16.0134 24.5165 18.5471 23.2255L49.3805 7.51206C50.5059 6.93903 51.5346 6.91122 52.3286 7.31856L55.4078 8.88579Z"
+          d="M55.1078 7.9854C54.3069 7.57806 53.2782 7.61277 52.1598 8.1789L21.3264 23.8923C18.7926 25.1834 16.7352 28.7322 16.7352 31.8114V69.3349C16.7352 71.054 17.3703 72.262 18.3714 72.7798L15.2922 71.2126C14.2911 70.7017 13.6559 69.4868 13.6559 67.7677V30.2442C13.6559 27.1581 15.7134 23.6161 18.2471 22.3251L49.0805 6.61167C50.2059 6.03864 51.2346 6.01083 52.0286 6.41817L55.1078 7.9854Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.4"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
         <path
-          d="M55.4079 8.88692C56.4089 9.39782 57.0441 10.6131 57.0441 12.3322V49.8557C57.0441 52.9418 54.9867 56.4834 52.4529 57.7744L21.6195 73.4882C20.4941 74.0612 19.4654 74.0887 18.6715 73.6814C17.6704 73.1704 17.0352 71.9555 17.0352 70.2364V32.7129C17.0352 29.6268 19.0926 26.0849 21.6264 24.7938L52.4598 9.08042C53.5852 8.50739 54.6139 8.47958 55.4079 8.88692Z"
+          d="M55.1079 7.98653C56.109 8.49743 56.7441 9.7127 56.7441 11.4318V48.9553C56.7441 52.0414 54.6867 55.583 52.1529 56.874L21.3195 72.5878C20.1942 73.1608 19.1654 73.1883 18.3715 72.781C17.3704 72.2701 16.7352 71.0551 16.7352 69.336V31.8125C16.7352 28.7264 18.7926 25.1845 21.3264 23.8935L52.1598 8.18003C53.2852 7.607 54.3139 7.57919 55.1079 7.98653Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.4"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
       </g>
       <path
-        d="M68.8637 14.8332C68.0629 14.4259 67.0342 14.4602 65.9157 15.0264L35.0823 30.7401C32.5485 32.0312 30.4911 35.5797 30.4911 38.6589V76.1824C30.4911 77.9015 31.1263 79.1098 32.1274 79.6276L29.0482 78.0604C28.0471 77.5495 27.4119 76.3342 27.4119 74.6151V37.0916C27.4119 34.0055 29.4693 30.4639 32.0031 29.1729L62.8365 13.4591C63.9619 12.8861 64.9906 12.8586 65.7845 13.266L68.8637 14.8332Z"
+        d="M68.5637 13.9328C67.7629 13.5255 66.7342 13.5598 65.6157 14.126L34.7823 29.8397C32.2485 31.1308 30.1911 34.6793 30.1911 37.7585V75.282C30.1911 77.0011 30.8263 78.2094 31.8274 78.7272L28.7482 77.16C27.7471 76.6491 27.1119 75.4338 27.1119 73.7147V36.1912C27.1119 33.1051 29.1693 29.5636 31.7031 28.2725L62.5365 12.5587C63.6619 11.9857 64.6906 11.9582 65.4845 12.3656L68.5637 13.9328Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.4"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
       <path
-        d="M68.8637 14.8304C69.8648 15.3413 70.5 16.5563 70.5 18.2754V55.7989C70.5 58.885 68.4426 62.4269 65.9088 63.7179L35.0754 79.4313C33.95 80.0044 32.9213 80.0322 32.1273 79.6248C31.1263 79.1139 30.4911 77.8987 30.4911 76.1796V38.6561C30.4911 35.57 32.5485 32.0284 35.0823 30.7373L65.9157 15.0236C67.041 14.4505 68.0698 14.4231 68.8637 14.8304Z"
+        d="M68.5637 13.93C69.5648 14.4409 70.2 15.6559 70.2 17.375V54.8985C70.2 57.9846 68.1426 61.5265 65.6088 62.8175L34.7754 78.531C33.65 79.104 32.6213 79.1318 31.8274 78.7245C30.8263 78.2136 30.1911 76.9983 30.1911 75.2792V37.7557C30.1911 34.6696 32.2485 31.128 34.7823 29.837L65.6157 14.1232C66.7411 13.5502 67.7698 13.5227 68.5637 13.93Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.4"
         strokeLinecap="round"
         strokeLinejoin="round"
@@ -66,14 +72,14 @@ export function ExportHorizontalStackIllustration({ className }: TIllustrationAs
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M43.5881 41.1008C43.5881 40.4104 44.0438 39.6233 44.6099 39.3333L58.9289 32.0359C59.495 31.7459 59.9507 32.0702 59.9507 32.7607C59.9507 33.4511 59.495 34.2382 58.9289 34.5281L44.6099 41.8259C44.0438 42.1159 43.5881 41.7912 43.5881 41.1008Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M43.2881 40.2004C43.2881 39.51 43.7438 38.7229 44.3099 38.4329L58.6289 31.1355C59.195 30.8455 59.6507 31.1699 59.6507 31.8603C59.6507 32.5507 59.195 33.3378 58.6289 33.6277L44.3099 40.9255C43.7438 41.2155 43.2881 40.8908 43.2881 40.2004Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M58.639 46.7626C58.2385 47.453 57.5895 47.7774 57.1891 47.5013L52.7981 44.3944V58.81C52.7981 59.5004 52.3356 60.2875 51.7764 60.5775C51.2171 60.8674 50.7546 60.5362 50.7546 59.8527V45.43L46.3636 53.0107C45.9631 53.7011 45.3142 54.0323 44.9137 53.7493C44.5202 53.4662 44.5202 52.6793 44.9137 51.9889L51.0514 41.3982C51.0514 41.3982 51.0928 41.336 51.1135 41.3014C51.1205 41.2945 51.1274 41.2878 51.1274 41.2809C51.2033 41.1704 51.2862 41.0598 51.3759 40.9701C51.4104 40.9355 51.445 40.9009 51.4795 40.8733C51.5071 40.8457 51.5416 40.8182 51.5761 40.7975C51.6107 40.7698 51.6521 40.7421 51.6866 40.7145C51.7211 40.6938 51.7487 40.68 51.7833 40.6592C51.8178 40.6385 51.8523 40.6248 51.8868 40.611C52.018 40.5558 52.1492 40.5419 52.2666 40.5558C52.2942 40.5558 52.3218 40.5628 52.3494 40.5767C52.3494 40.5767 52.4046 40.5972 52.4322 40.611C52.4737 40.6318 52.5082 40.6525 52.5427 40.6801L58.6459 44.9952C59.0394 45.2782 59.0394 46.0652 58.6459 46.7556L58.639 46.7626Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M58.339 45.8623C57.9385 46.5527 57.2895 46.877 56.8891 46.6009L52.4981 43.494V57.9096C52.4981 58.6 52.0356 59.3871 51.4764 59.6771C50.9171 59.967 50.4546 59.6358 50.4546 58.9523V44.5297L46.0636 52.1103C45.6631 52.8007 45.0142 53.1319 44.6138 52.8489C44.2202 52.5658 44.2202 51.7789 44.6138 51.0885L50.7514 40.4978C50.7514 40.4978 50.7928 40.4356 50.8136 40.4011C50.8205 40.3941 50.8274 40.3874 50.8274 40.3805C50.9033 40.27 50.9862 40.1594 51.0759 40.0697C51.1104 40.0352 51.145 40.0005 51.1795 39.9729C51.2071 39.9453 51.2416 39.9178 51.2762 39.8971C51.3107 39.8695 51.3521 39.8418 51.3866 39.8141C51.4211 39.7934 51.4488 39.7796 51.4833 39.7589C51.5178 39.7381 51.5523 39.7245 51.5868 39.7106C51.718 39.6554 51.8492 39.6416 51.9666 39.6554C51.9942 39.6554 52.0218 39.6625 52.0494 39.6763C52.0494 39.6763 52.1046 39.6968 52.1323 39.7106C52.1737 39.7314 52.2082 39.7521 52.2427 39.7798L58.3459 44.0948C58.7394 44.3778 58.7394 45.1648 58.3459 45.8552L58.339 45.8623Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
     </svg>
   );
diff --git a/packages/propel/src/empty-state/assets/horizontal-stack/index.ts b/packages/propel/src/empty-state/assets/horizontal-stack/index.ts
index 35bda744d..ce49bb59f 100644
--- a/packages/propel/src/empty-state/assets/horizontal-stack/index.ts
+++ b/packages/propel/src/empty-state/assets/horizontal-stack/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./customer";
 export * from "./epic";
 export * from "./estimate";
diff --git a/packages/propel/src/empty-state/assets/horizontal-stack/intake.tsx b/packages/propel/src/empty-state/assets/horizontal-stack/intake.tsx
index f26a721b6..f3bf4f551 100644
--- a/packages/propel/src/empty-state/assets/horizontal-stack/intake.tsx
+++ b/packages/propel/src/empty-state/assets/horizontal-stack/intake.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper";
 import type { TIllustrationAssetProps } from "../helper";
 
@@ -13,17 +19,17 @@ export function IntakeHorizontalStackIllustration({ className }: TIllustrationAs
     >
       <g opacity="0.2">
         <path
-          d="M41.9519 2.42126C41.151 2.01392 40.1223 2.04846 39.0038 2.61459L8.1704 18.3282C5.63661 19.6192 3.57922 23.1679 3.57922 26.2471V63.7706C3.57922 65.4897 4.21438 66.6979 5.21547 67.2157L2.13625 65.6485C1.13517 65.1376 0.5 63.9225 0.5 62.2034V24.6799C0.5 21.5938 2.55742 18.052 5.0912 16.761L35.9246 1.04736C37.05 0.47433 38.0787 0.446693 38.8727 0.854032L41.9519 2.42126Z"
+          d="M41.6519 2.04294C40.851 1.6356 39.8223 1.67014 38.7038 2.23627L7.87039 17.9499C5.33661 19.2409 3.27921 22.7896 3.27921 25.8688V63.3923C3.27921 65.1114 3.91438 66.3196 4.91547 66.8374L1.83625 65.2702C0.835165 64.7593 0.199997 63.5442 0.199997 61.8251V24.3015C0.199997 21.2154 2.25742 17.6737 4.7912 16.3826L35.6246 0.669039C36.75 0.0960034 37.7787 0.068367 38.5726 0.475705L41.6519 2.04294Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.4"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
         <path
-          d="M41.952 2.4216C42.953 2.9325 43.5882 4.1476 43.5882 5.86671V43.3902C43.5882 46.4763 41.5308 50.0181 38.997 51.3091L8.16357 67.0227C7.03821 67.5958 6.00952 67.6234 5.21555 67.216C4.21447 66.7052 3.5793 65.49 3.5793 63.7709V26.2474C3.5793 23.1613 5.6367 19.6196 8.17048 18.3285L39.0039 2.61493C40.1293 2.0419 41.158 2.01426 41.952 2.4216Z"
+          d="M41.6519 2.04327C42.653 2.55417 43.2882 3.76927 43.2882 5.48838V43.0119C43.2882 46.098 41.2308 49.6397 38.697 50.9308L7.86357 66.6444C6.73821 67.2174 5.70951 67.2451 4.91555 66.8377C3.91446 66.3268 3.2793 65.1117 3.2793 63.3926V25.8691C3.2793 22.783 5.3367 19.2413 7.87048 17.9502L38.7039 2.2366C39.8293 1.66357 40.858 1.63593 41.6519 2.04327Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.4"
           strokeLinecap="round"
           strokeLinejoin="round"
@@ -31,34 +37,34 @@ export function IntakeHorizontalStackIllustration({ className }: TIllustrationAs
       </g>
       <g opacity="0.6">
         <path
-          d="M55.4078 8.39993C54.607 7.99259 53.5783 8.02713 52.4598 8.59326L21.6264 24.3069C19.0926 25.5979 17.0352 29.1466 17.0352 32.2258V69.7493C17.0352 71.4684 17.6704 72.6766 18.6714 73.1944L15.5923 71.6272C14.5912 71.1163 13.956 69.9012 13.956 68.1821V30.6585C13.956 27.5724 16.0134 24.0307 18.5472 22.7396L49.3806 7.02603C50.506 6.453 51.5347 6.42536 52.3286 6.8327L55.4078 8.39993Z"
+          d="M55.1078 8.0216C54.307 7.61427 53.2783 7.64881 52.1598 8.21494L21.3264 23.9285C18.7926 25.2196 16.7352 28.7682 16.7352 31.8474V69.371C16.7352 71.0901 17.3704 72.2983 18.3714 72.8161L15.2923 71.2488C14.2912 70.7379 13.656 69.5228 13.656 67.8037V30.2802C13.656 27.1941 15.7134 23.6524 18.2472 22.3613L49.0806 6.64771C50.2059 6.07467 51.2347 6.04704 52.0286 6.45437L55.1078 8.0216Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.4"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
         <path
-          d="M55.4079 8.40042C56.409 8.91132 57.0442 10.1264 57.0442 11.8455V49.369C57.0442 52.4551 54.9867 55.9969 52.4529 57.2879L21.6195 73.0015C20.4942 73.5746 19.4655 73.6022 18.6715 73.1949C17.6704 72.684 17.0352 71.4689 17.0352 69.7498V32.2263C17.0352 29.1402 19.0926 25.5984 21.6264 24.3073L52.4599 8.59375C53.5852 8.02072 54.6139 7.99308 55.4079 8.40042Z"
+          d="M55.1079 8.02209C56.109 8.53299 56.7441 9.74809 56.7441 11.4672V48.9907C56.7441 52.0768 54.6867 55.6186 52.1529 56.9096L21.3195 72.6232C20.1942 73.1963 19.1655 73.2239 18.3715 72.8165C17.3704 72.3056 16.7352 71.0905 16.7352 69.3714V31.8479C16.7352 28.7618 18.7926 25.2201 21.3264 23.929L52.1599 8.21543C53.2852 7.64239 54.3139 7.61475 55.1079 8.02209Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.4"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
       </g>
       <path
-        d="M68.8638 14.3513C68.0629 13.944 67.0342 13.9785 65.9157 14.5446L35.0823 30.2582C32.5485 31.5493 30.4911 35.098 30.4911 38.1772V75.7005C30.4911 77.4196 31.1263 78.6278 32.1274 79.1456L29.0482 77.5785C28.0471 77.0676 27.4119 75.8524 27.4119 74.1333V36.6099C27.4119 33.5238 29.4693 29.9821 32.0031 28.691L62.8365 12.9774C63.9619 12.4044 64.9906 12.3767 65.7845 12.7841L68.8638 14.3513Z"
+        d="M68.5638 13.973C67.7629 13.5657 66.7342 13.6002 65.6157 14.1663L34.7823 29.8799C32.2485 31.171 30.1911 34.7196 30.1911 37.7988V75.3222C30.1911 77.0413 30.8263 78.2495 31.8274 78.7673L28.7482 77.2002C27.7471 76.6893 27.1119 75.474 27.1119 73.7549V36.2316C27.1119 33.1455 29.1693 29.6037 31.7031 28.3127L62.5365 12.5991C63.6619 12.0261 64.6906 11.9984 65.4845 12.4058L68.5638 13.973Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.4"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
       <path
-        d="M68.8636 14.3517C69.8647 14.8626 70.4999 16.0777 70.4999 17.7968V55.3201C70.4999 58.4062 68.4425 61.9481 65.9087 63.2392L35.0753 78.9528C33.9499 79.5258 32.9212 79.5533 32.1273 79.1459C31.1262 78.635 30.491 77.4199 30.491 75.7008V38.1775C30.491 35.0914 32.5484 31.5496 35.0822 30.2586L65.9156 14.545C67.041 13.9719 68.0697 13.9443 68.8636 14.3517Z"
+        d="M68.5636 13.9733C69.5647 14.4842 70.1999 15.6993 70.1999 17.4184V54.9418C70.1999 58.0279 68.1425 61.5698 65.6087 62.8609L34.7753 78.5744C33.6499 79.1475 32.6212 79.1749 31.8272 78.7676C30.8262 78.2567 30.191 77.0416 30.191 75.3225V37.7992C30.191 34.7131 32.2484 31.1713 34.7822 29.8803L65.6156 14.1667C66.741 13.5936 67.7697 13.566 68.5636 13.9733Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.4"
         strokeLinecap="round"
         strokeLinejoin="round"
@@ -66,26 +72,26 @@ export function IntakeHorizontalStackIllustration({ className }: TIllustrationAs
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M57.8519 35.2914C58.1349 35.3467 58.3075 35.6296 58.3075 36.0369V46.4414C58.3075 46.8349 58.1419 47.2836 57.8726 47.6288L52.1699 54.8159C51.8937 55.168 51.5485 55.3476 51.2654 55.2924C50.9824 55.2372 50.8097 54.954 50.8097 54.5467V44.0941C50.8097 43.7005 50.9754 43.2447 51.2516 42.8995L56.9543 35.7608C57.2305 35.4156 57.5757 35.2362 57.8588 35.2914H57.8519ZM52.5979 43.8178V51.647L56.5056 46.7244V38.9297L52.5979 43.8178Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M57.5519 34.9131C57.8349 34.9683 58.0075 35.2513 58.0075 35.6586V46.0631C58.0075 46.4566 57.8419 46.9053 57.5726 47.2505L51.8699 54.4376C51.5937 54.7897 51.2485 54.9693 50.9654 54.9141C50.6824 54.8589 50.5097 54.5757 50.5097 54.1684V43.7158C50.5097 43.3222 50.6754 42.8664 50.9516 42.5212L56.6543 35.3825C56.9305 35.0373 57.2757 34.8579 57.5588 34.9131H57.5519ZM52.2979 43.4395V51.2687L56.2056 46.3461V38.5514L52.2979 43.4395Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M55.3249 34.8766C55.5804 35.284 55.4354 36.0434 55.0073 36.575L49.7395 43.1615V52.979C49.7395 53.6004 49.3391 54.3115 48.842 54.5601C48.3449 54.8086 47.9445 54.5118 47.9445 53.8973V43.4445C47.9445 43.051 48.1102 42.5953 48.3863 42.2501L54.0891 35.1114C54.5171 34.5798 55.0695 34.4693 55.3249 34.8766Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M55.0249 34.4983C55.2804 34.9057 55.1354 35.6651 54.7073 36.1967L49.4395 42.7832V52.6007C49.4395 53.2221 49.0391 53.9332 48.542 54.1817C48.0449 54.4303 47.6445 54.1334 47.6445 53.519V43.0662C47.6445 42.6726 47.8102 42.217 48.0863 41.8718L53.7891 34.7331C54.2171 34.2015 54.7695 34.091 55.0249 34.4983Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M52.4253 34.1796C52.6808 34.587 52.5358 35.3464 52.1077 35.878L46.84 42.4645V52.282C46.84 52.9034 46.4395 53.6145 45.9424 53.8631C45.4454 54.1116 45.0449 53.8148 45.0449 53.2003V42.7475C45.0449 42.354 45.2106 41.8983 45.4868 41.5531L51.1895 34.4144C51.6175 33.8828 52.1699 33.7723 52.4253 34.1796Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M52.1253 33.8013C52.3808 34.2087 52.2358 34.9681 51.8077 35.4997L46.54 42.0862V51.9037C46.54 52.5251 46.1395 53.2362 45.6424 53.4848C45.1454 53.7333 44.7449 53.4365 44.7449 52.822V42.3692C44.7449 41.9757 44.9106 41.52 45.1868 41.1748L50.8895 34.0361C51.3175 33.5045 51.8699 33.394 52.1253 33.8013Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M42.0347 52.1577C42.5318 51.9023 42.9323 52.206 42.9323 52.8205V60.8223C42.9323 61.5749 43.4293 61.9407 44.03 61.6369L59.2465 53.8837C59.8471 53.5799 60.3442 52.71 60.3442 51.9575V43.9556C60.3442 43.3343 60.7446 42.6231 61.2417 42.3746C61.7388 42.126 62.1393 42.423 62.1393 43.0375V51.0392C62.1393 53.0344 60.8413 55.3198 59.2465 56.1344L44.03 63.8877C42.4351 64.7023 41.1372 63.7357 41.1372 61.7473V53.7457C41.1372 53.1243 41.5376 52.4132 42.0347 52.1646V52.1577Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M41.7347 51.7794C42.2318 51.5239 42.6322 51.8277 42.6322 52.4421V60.444C42.6322 61.1965 43.1293 61.5624 43.73 61.2586L58.9465 53.5054C59.5471 53.2016 60.0442 52.3317 60.0442 51.5791V43.5773C60.0442 42.9559 60.4446 42.2448 60.9417 41.9963C61.4388 41.7477 61.8393 42.0447 61.8393 42.6592V50.6609C61.8393 52.6561 60.5413 54.9414 58.9465 55.7561L43.73 63.5093C42.1351 64.324 40.8372 63.3574 40.8372 61.369V53.3673C40.8372 52.746 41.2376 52.0348 41.7347 51.7863V51.7794Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
     </svg>
   );
diff --git a/packages/propel/src/empty-state/assets/horizontal-stack/label.tsx b/packages/propel/src/empty-state/assets/horizontal-stack/label.tsx
index 5e43bccc8..d625e48fd 100644
--- a/packages/propel/src/empty-state/assets/horizontal-stack/label.tsx
+++ b/packages/propel/src/empty-state/assets/horizontal-stack/label.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper";
 import type { TIllustrationAssetProps } from "../helper";
 
@@ -13,17 +19,17 @@ export function LabelHorizontalStackIllustration({ className }: TIllustrationAss
     >
       <g opacity="0.2">
         <path
-          d="M47.8737 2.47584C46.9585 2.00383 45.7828 2.04383 44.5045 2.69984L9.2662 20.9079C6.37044 22.4039 4.01909 26.5159 4.01909 30.0839V73.5641C4.01909 75.5561 4.745 76.9561 5.88911 77.5561L2.37001 75.7401C1.22591 75.1481 0.5 73.7401 0.5 71.7481V28.2679C0.5 24.6919 2.85132 20.5879 5.74708 19.0919L40.9854 0.883826C42.2716 0.219824 43.4472 0.187824 44.3546 0.659826L47.8737 2.47584Z"
+          d="M47.6237 2.3855C46.7085 1.9135 45.5328 1.9535 44.2545 2.6095L9.0162 20.8176C6.12044 22.3136 3.76909 26.4256 3.76909 29.9936V73.4738C3.76909 75.4658 4.495 76.8658 5.63911 77.4658L2.12001 75.6498C0.975909 75.0578 0.25 73.6498 0.25 71.6578V28.1776C0.25 24.6016 2.60132 20.4976 5.49708 19.0016L40.7354 0.793494C42.0216 0.129492 43.1972 0.0974924 44.1046 0.569494L47.6237 2.3855Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.5"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
         <path
-          d="M47.8737 2.47547C49.0178 3.06747 49.7437 4.47548 49.7437 6.46749V49.9476C49.7437 53.5237 47.3924 57.6277 44.4966 59.1237L9.25828 77.3318C7.97216 77.9958 6.79648 78.0278 5.88909 77.5558C4.74498 76.9638 4.01907 75.5557 4.01907 73.5637V30.0836C4.01907 26.5076 6.37042 22.4035 9.26618 20.9075L44.5045 2.69947C45.7906 2.03547 46.9663 2.00347 47.8737 2.47547Z"
+          d="M47.6237 2.38514C48.7678 2.97714 49.4937 4.38515 49.4937 6.37716V49.8573C49.4937 53.4333 47.1424 57.5373 44.2466 59.0334L9.00828 77.2414C7.72216 77.9054 6.54648 77.9374 5.63909 77.4654C4.49498 76.8734 3.76907 75.4654 3.76907 73.4734V29.9932C3.76907 26.4172 6.12042 22.3132 9.01618 20.8172L44.2545 2.60914C45.5406 1.94513 46.7163 1.91314 47.6237 2.38514Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.5"
           strokeLinecap="round"
           strokeLinejoin="round"
@@ -31,34 +37,34 @@ export function LabelHorizontalStackIllustration({ className }: TIllustrationAss
       </g>
       <g opacity="0.6">
         <path
-          d="M63.2522 9.36414C62.337 8.89214 61.1613 8.93214 59.883 9.58814L24.6447 27.7962C21.749 29.2922 19.3976 33.4042 19.3976 36.9722V80.4524C19.3976 82.4444 20.1235 83.8444 21.2676 84.4444L17.7485 82.6284C16.6044 82.0364 15.8785 80.6284 15.8785 78.6364V35.1562C15.8785 31.5802 18.2299 27.4762 21.1256 25.9802L56.364 7.77213C57.6501 7.10813 58.8257 7.07613 59.7331 7.54813L63.2522 9.36414Z"
+          d="M63.0022 9.27381C62.087 8.80181 60.9113 8.84181 59.633 9.49781L24.3947 27.7059C21.499 29.2019 19.1476 33.3139 19.1476 36.8819V80.3621C19.1476 82.3541 19.8735 83.7541 21.0176 84.3541L17.4985 82.5381C16.3544 81.9461 15.6285 80.5381 15.6285 78.5461V35.0659C15.6285 31.4899 17.9799 27.3859 20.8756 25.8899L56.114 7.6818C57.4001 7.0178 58.5757 6.9858 59.4831 7.4578L63.0022 9.27381Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.5"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
         <path
-          d="M63.2521 9.36378C64.3962 9.95578 65.1221 11.3638 65.1221 13.3558V56.836C65.1221 60.412 62.7708 64.516 59.8751 66.012L24.6367 84.22C23.3505 84.8841 22.1749 84.9161 21.2675 84.4441C20.1234 83.8521 19.3975 82.4441 19.3975 80.452V36.9719C19.3975 33.3959 21.7488 29.2918 24.6446 27.7958L59.8829 9.58778C61.169 8.92377 62.3447 8.89177 63.2521 9.36378Z"
+          d="M63.0021 9.27344C64.1462 9.86545 64.8721 11.2735 64.8721 13.2655V56.7456C64.8721 60.3216 62.5208 64.4257 59.6251 65.9217L24.3867 84.1297C23.1005 84.7937 21.9249 84.8257 21.0175 84.3537C19.8734 83.7617 19.1475 82.3537 19.1475 80.3617V36.8815C19.1475 33.3055 21.4988 29.2015 24.3946 27.7055L59.6329 9.49744C60.919 8.83344 62.0947 8.80144 63.0021 9.27344Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.5"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
       </g>
       <path
-        d="M78.6303 16.2602C77.715 15.7882 76.5394 15.8282 75.2612 16.4842L40.0228 34.6923C37.127 36.1883 34.7757 40.3003 34.7757 43.8683V87.3485C34.7757 89.3405 35.5016 90.7405 36.6457 91.3405L33.1266 89.5245C31.9825 88.9325 31.2566 87.5245 31.2566 85.5325V42.0523C31.2566 38.4763 33.6079 34.3723 36.5037 32.8763L71.7421 14.6682C73.0282 14.0042 74.2039 13.9722 75.1113 14.4443L78.6303 16.2602Z"
+        d="M78.3803 16.1699C77.465 15.6979 76.2894 15.7379 75.0112 16.3939L39.7728 34.602C36.877 36.098 34.5257 40.21 34.5257 43.778V87.2582C34.5257 89.2502 35.2516 90.6502 36.3957 91.2502L32.8766 89.4342C31.7325 88.8422 31.0066 87.4342 31.0066 85.4422V41.962C31.0066 38.386 33.3579 34.282 36.2537 32.786L71.4921 14.5779C72.7782 13.9139 73.9539 13.8819 74.8613 14.3539L78.3803 16.1699Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.5"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
       <path
-        d="M78.6301 16.2599C79.7742 16.8519 80.5001 18.2599 80.5001 20.2519V63.7321C80.5001 67.3081 78.1488 71.4121 75.2531 72.9081L40.0147 91.1162C38.7286 91.7802 37.5529 91.8122 36.6455 91.3402C35.5014 90.7482 34.7755 89.3402 34.7755 87.3482V43.868C34.7755 40.292 37.1268 36.188 40.0226 34.692L75.261 16.4839C76.5471 15.8199 77.7227 15.7879 78.6301 16.2599Z"
+        d="M78.3801 16.1696C79.5242 16.7616 80.2501 18.1696 80.2501 20.1616V63.6417C80.2501 67.2178 77.8988 71.3218 75.0031 72.8178L39.7647 91.0258C38.4786 91.6898 37.3029 91.7218 36.3955 91.2498C35.2514 90.6578 34.5255 89.2498 34.5255 87.2578V43.7777C34.5255 40.2016 36.8768 36.0976 39.7726 34.6016L75.011 16.3936C76.2971 15.7296 77.4727 15.6976 78.3801 16.1696Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.5"
         strokeLinecap="round"
         strokeLinejoin="round"
@@ -66,12 +72,12 @@ export function LabelHorizontalStackIllustration({ className }: TIllustrationAss
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M49.8068 47.9642C50.4143 46.9082 51.227 46.0682 52.087 45.6282L59.788 41.6522C60.6402 41.2122 61.4608 41.2042 62.0684 41.6362L71.4106 48.3402C72.097 48.8362 72.4758 49.7882 72.4758 50.9882C72.4758 52.1882 72.0891 53.5322 71.4106 54.7402L64.3487 67.1083C63.6622 68.3163 62.7311 69.2683 61.7606 69.7723C60.7901 70.2763 59.8591 70.2843 59.1726 69.7963L49.8304 63.0922C49.2229 62.6602 48.8836 61.8282 48.8836 60.7722V51.2762C48.8836 50.2202 49.2229 49.0362 49.8304 47.9802L49.8068 47.9642ZM52.087 48.2762C51.803 48.4202 51.5269 48.7002 51.3296 49.0522C51.1323 49.4042 51.014 49.7962 51.014 50.1482V59.6442C51.014 59.9962 51.1245 60.2762 51.3296 60.4202L60.6718 67.1163C60.9558 67.3163 61.3503 67.3163 61.7527 67.1083C62.1551 66.9003 62.5418 66.5003 62.8338 66.0043L69.8956 53.6522C70.1796 53.1482 70.3375 52.5882 70.3375 52.0922C70.3375 51.5962 70.1796 51.1962 69.8956 50.9882L60.5534 44.2922C60.3562 44.1482 60.08 44.1482 59.7959 44.2922L52.0949 48.2682L52.087 48.2762Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M49.5568 47.8738C50.1643 46.8178 50.977 45.9779 51.837 45.5379L59.538 41.5618C60.3902 41.1218 61.2108 41.1138 61.8184 41.5458L71.1606 48.2498C71.847 48.7459 72.2258 49.6979 72.2258 50.8979C72.2258 52.0979 71.8391 53.4419 71.1606 54.6499L64.0987 67.0179C63.4122 68.2259 62.4811 69.1779 61.5106 69.6819C60.5401 70.1859 59.6091 70.1939 58.9226 69.7059L49.5804 63.0019C48.9729 62.5699 48.6336 61.7379 48.6336 60.6819V51.1859C48.6336 50.1299 48.9729 48.9459 49.5804 47.8899L49.5568 47.8738ZM51.837 48.1859C51.553 48.3299 51.2769 48.6099 51.0796 48.9619C50.8823 49.3139 50.764 49.7059 50.764 50.0579V59.5539C50.764 59.9059 50.8745 60.1859 51.0796 60.3299L60.4218 67.0259C60.7058 67.2259 61.1003 67.2259 61.5027 67.0179C61.9051 66.8099 62.2918 66.4099 62.5838 65.9139L69.6456 53.5619C69.9296 53.0579 70.0875 52.4979 70.0875 52.0019C70.0875 51.5059 69.9296 51.1059 69.6456 50.8979L60.3034 44.2018C60.1062 44.0578 59.83 44.0578 59.5459 44.2018L51.8449 48.1779L51.837 48.1859Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
-        d="M59.7802 51.2521C59.7802 53.4442 58.3363 55.9722 56.561 56.8842C54.7857 57.8042 53.3417 56.7722 53.3417 54.5721C53.3417 52.3721 54.7857 49.8521 56.561 48.9401C58.3363 48.0201 59.7802 49.0521 59.7802 51.2521Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M59.5302 51.1618C59.5302 53.3538 58.0863 55.8818 56.311 56.7938C54.5357 57.7138 53.0917 56.6818 53.0917 54.4818C53.0917 52.2818 54.5357 49.7618 56.311 48.8498C58.0863 47.9298 59.5302 48.9618 59.5302 51.1618Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
     </svg>
   );
diff --git a/packages/propel/src/empty-state/assets/horizontal-stack/link.tsx b/packages/propel/src/empty-state/assets/horizontal-stack/link.tsx
index 67a6d0f8d..e9770e653 100644
--- a/packages/propel/src/empty-state/assets/horizontal-stack/link.tsx
+++ b/packages/propel/src/empty-state/assets/horizontal-stack/link.tsx
@@ -1,29 +1,35 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper";
 import type { TIllustrationAssetProps } from "../helper";
 
 export function LinkHorizontalStackIllustration({ className }: TIllustrationAssetProps) {
   return (
     <svg
-      width="52"
-      height="59"
-      viewBox="0 0 52 59"
+      width="51"
+      height="58"
+      viewBox="0 0 51 58"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       className={className}
     >
       <g opacity="0.2">
         <path
-          d="M30.6725 2.33465C30.0925 2.03965 29.3475 2.06465 28.5375 2.47465L6.20747 13.8546C4.37247 14.7896 2.88247 17.3596 2.88247 19.5896V46.7646C2.88247 48.0096 3.34246 48.8846 4.06746 49.2596L1.83746 48.1246C1.11246 47.7547 0.652466 46.8746 0.652466 45.6296V18.4546C0.652466 16.2196 2.14246 13.6546 3.97746 12.7196L26.3075 1.33964C27.1225 0.924644 27.8675 0.904645 28.4425 1.19964L30.6725 2.33465Z"
+          d="M30.145 1.45971C29.565 1.16471 28.82 1.18971 28.01 1.59971L5.68 12.9797C3.845 13.9147 2.355 16.4847 2.355 18.7147V45.8897C2.355 47.1347 2.815 48.0097 3.54 48.3847L1.31 47.2497C0.584998 46.8797 0.125 45.9997 0.125 44.7547V17.5797C0.125 15.3447 1.615 12.7797 3.45 11.8447L25.78 0.464705C26.595 0.0497054 27.34 0.029706 27.915 0.324706L30.145 1.45971Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.25"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
         <path
-          d="M30.6724 2.33465C31.3974 2.70465 31.8574 3.58465 31.8574 4.82965V32.0046C31.8574 34.2396 30.3674 36.8046 28.5324 37.7396L6.20245 49.1197C5.38745 49.5347 4.64244 49.5546 4.06744 49.2597C3.34244 48.8897 2.88245 48.0097 2.88245 46.7647V19.5897C2.88245 17.3547 4.37245 14.7897 6.20745 13.8547L28.5374 2.47465C29.3524 2.05965 30.0974 2.03965 30.6724 2.33465Z"
+          d="M30.145 1.45972C30.87 1.82972 31.33 2.70971 31.33 3.95471V31.1297C31.33 33.3647 29.84 35.9297 28.005 36.8647L5.67498 48.2447C4.85998 48.6597 4.11498 48.6797 3.53998 48.3847C2.81498 48.0147 2.35498 47.1347 2.35498 45.8897V18.7147C2.35498 16.4797 3.84498 13.9147 5.67998 12.9797L28.01 1.59972C28.825 1.18472 29.57 1.16472 30.145 1.45972Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.25"
           strokeLinecap="round"
           strokeLinejoin="round"
@@ -31,34 +37,34 @@ export function LinkHorizontalStackIllustration({ className }: TIllustrationAsse
       </g>
       <g opacity="0.6">
         <path
-          d="M40.4175 6.66967C39.8375 6.37467 39.0925 6.39967 38.2825 6.80967L15.9525 18.1897C14.1175 19.1247 12.6275 21.6947 12.6275 23.9247V51.0997C12.6275 52.3447 13.0875 53.2197 13.8125 53.5947L11.5825 52.4597C10.8575 52.0897 10.3975 51.2097 10.3975 49.9647V22.7897C10.3975 20.5547 11.8875 17.9897 13.7225 17.0547L36.0525 5.67467C36.8675 5.25967 37.6125 5.23967 38.1875 5.53467L40.4175 6.66967Z"
+          d="M39.89 5.79473C39.31 5.49973 38.565 5.52473 37.755 5.93473L15.425 17.3147C13.59 18.2497 12.1 20.8197 12.1 23.0497V50.2247C12.1 51.4697 12.56 52.3447 13.285 52.7197L11.055 51.5847C10.33 51.2147 9.87 50.3347 9.87 49.0897V21.9147C9.87 19.6797 11.36 17.1147 13.195 16.1797L35.525 4.79973C36.34 4.38473 37.085 4.36473 37.66 4.65973L39.89 5.79473Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.25"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
         <path
-          d="M40.4174 6.66974C41.1424 7.03974 41.6024 7.91973 41.6024 9.16473V36.3397C41.6024 38.5747 40.1124 41.1397 38.2774 42.0747L15.9474 53.4547C15.1324 53.8697 14.3874 53.8897 13.8124 53.5947C13.0874 53.2247 12.6274 52.3447 12.6274 51.0997V23.9247C12.6274 21.6897 14.1174 19.1247 15.9524 18.1897L38.2824 6.80974C39.0974 6.39474 39.8424 6.37474 40.4174 6.66974Z"
+          d="M39.89 5.7948C40.615 6.1648 41.075 7.04479 41.075 8.28979V35.4648C41.075 37.6998 39.585 40.2648 37.75 41.1998L15.42 52.5798C14.605 52.9948 13.86 53.0148 13.285 52.7198C12.56 52.3498 12.1 51.4698 12.1 50.2248V23.0498C12.1 20.8148 13.59 18.2498 15.425 17.3148L37.755 5.9348C38.57 5.5198 39.315 5.4998 39.89 5.7948Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.25"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
       </g>
       <path
-        d="M50.1625 10.9747C49.5825 10.6797 48.8375 10.7047 48.0275 11.1147L25.6975 22.4947C23.8625 23.4297 22.3725 25.9997 22.3725 28.2297V55.4047C22.3725 56.6497 22.8325 57.5247 23.5575 57.8997L21.3275 56.7647C20.6025 56.3947 20.1425 55.5147 20.1425 54.2697V27.0947C20.1425 24.8597 21.6325 22.2947 23.4675 21.3597L45.7975 9.97966C46.6125 9.56466 47.3575 9.54466 47.9325 9.83966L50.1625 10.9747Z"
+        d="M49.635 10.0997C49.055 9.80472 48.31 9.82972 47.5 10.2397L25.17 21.6197C23.335 22.5547 21.845 25.1247 21.845 27.3547V54.5297C21.845 55.7747 22.305 56.6497 23.03 57.0247L20.8 55.8897C20.075 55.5197 19.615 54.6397 19.615 53.3947V26.2197C19.615 23.9847 21.105 21.4197 22.94 20.4847L45.27 9.10472C46.085 8.68972 46.83 8.66972 47.405 8.96472L49.635 10.0997Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.25"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
       <path
-        d="M50.1624 10.9747C50.8874 11.3447 51.3474 12.2247 51.3474 13.4697V40.6447C51.3474 42.8797 49.8574 45.4447 48.0224 46.3797L25.6924 57.7597C24.8774 58.1747 24.1324 58.1947 23.5574 57.8997C22.8324 57.5297 22.3724 56.6497 22.3724 55.4047V28.2297C22.3724 25.9947 23.8624 23.4297 25.6974 22.4947L48.0274 11.1147C48.8424 10.6997 49.5874 10.6797 50.1624 10.9747Z"
+        d="M49.635 10.0997C50.36 10.4697 50.82 11.3497 50.82 12.5947V39.7697C50.82 42.0047 49.33 44.5697 47.495 45.5047L25.165 56.8847C24.35 57.2997 23.605 57.3197 23.03 57.0247C22.305 56.6547 21.845 55.7747 21.845 54.5297V27.3547C21.845 25.1197 23.335 22.5547 25.17 21.6197L47.5 10.2397C48.315 9.82473 49.06 9.80473 49.635 10.0997Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.25"
         strokeLinecap="round"
         strokeLinejoin="round"
@@ -66,20 +72,20 @@ export function LinkHorizontalStackIllustration({ className }: TIllustrationAsse
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M33.0175 38.0797C32.4625 39.0347 32.1525 40.1097 32.1525 41.0597C32.1525 42.0097 32.4625 42.7697 33.0175 43.1597C33.5725 43.5497 34.3225 43.5497 35.1025 43.1497C35.8825 42.7497 36.6375 41.9897 37.1875 41.0347L38.2325 39.2347C38.5225 38.7347 38.9875 38.4997 39.2775 38.7047C39.5675 38.9097 39.5675 39.4797 39.2775 39.9747L38.2325 41.7747C37.4025 43.2097 36.2775 44.3497 35.1025 44.9497C33.9275 45.5497 32.8025 45.5547 31.9725 44.9647C31.1425 44.3797 30.6775 43.2447 30.6775 41.8147C30.6775 40.3847 31.1425 38.7797 31.9725 37.3447L33.0175 35.5447C33.3075 35.0447 33.7725 34.8097 34.0625 35.0147C34.3525 35.2197 34.3525 35.7847 34.0625 36.2847L33.0175 38.0847V38.0797Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M32.49 37.2048C31.935 38.1598 31.625 39.2347 31.625 40.1847C31.625 41.1347 31.935 41.8948 32.49 42.2848C33.045 42.6748 33.795 42.6747 34.575 42.2747C35.355 41.8747 36.11 41.1148 36.66 40.1598L37.705 38.3598C37.995 37.8598 38.46 37.6248 38.75 37.8298C39.04 38.0348 39.04 38.6047 38.75 39.0997L37.705 40.8997C36.875 42.3347 35.75 43.4747 34.575 44.0747C33.4 44.6747 32.275 44.6797 31.445 44.0897C30.615 43.5047 30.15 42.3698 30.15 40.9398C30.15 39.5098 30.615 37.9048 31.445 36.4698L32.49 34.6697C32.78 34.1697 33.245 33.9348 33.535 34.1398C33.825 34.3448 33.825 34.9098 33.535 35.4098L32.49 37.2097V37.2048Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M36.1474 31.3997C35.8574 31.1947 35.8574 30.6297 36.1474 30.1297L37.1924 28.3297C38.0224 26.8947 39.1474 25.7547 40.3224 25.1547C41.4974 24.5547 42.6224 24.5497 43.4524 25.1397C44.2824 25.7247 44.7474 26.8597 44.7474 28.2897C44.7474 29.7197 44.2824 31.3247 43.4524 32.7597L42.4074 34.5597C42.1174 35.0597 41.6524 35.2947 41.3624 35.0897C41.0724 34.8847 41.0724 34.3147 41.3624 33.8197L42.4074 32.0197C42.9624 31.0647 43.2724 29.9897 43.2724 29.0397C43.2724 28.0897 42.9624 27.3297 42.4074 26.9397C41.8524 26.5497 41.1024 26.5497 40.3224 26.9497C39.5374 27.3497 38.7874 28.1097 38.2374 29.0647L37.1924 30.8647C36.9024 31.3647 36.4374 31.5997 36.1474 31.3947V31.3997Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M35.62 30.5248C35.33 30.3198 35.33 29.7548 35.62 29.2548L36.665 27.4548C37.495 26.0198 38.62 24.8798 39.795 24.2798C40.97 23.6798 42.095 23.6748 42.925 24.2648C43.755 24.8498 44.22 25.9848 44.22 27.4148C44.22 28.8448 43.755 30.4498 42.925 31.8848L41.88 33.6848C41.59 34.1848 41.125 34.4198 40.835 34.2148C40.545 34.0098 40.545 33.4398 40.835 32.9448L41.88 31.1448C42.435 30.1898 42.745 29.1148 42.745 28.1648C42.745 27.2148 42.435 26.4548 41.88 26.0648C41.325 25.6748 40.575 25.6748 39.795 26.0748C39.01 26.4748 38.26 27.2348 37.71 28.1898L36.665 29.9898C36.375 30.4898 35.91 30.7248 35.62 30.5198V30.5248Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M35.1025 39.5547C34.8125 39.3497 34.8125 38.7847 35.1025 38.2847L39.2775 31.0797C39.5675 30.5797 40.0325 30.3447 40.3225 30.5497C40.6125 30.7547 40.6125 31.3197 40.3225 31.8197L36.1475 39.0247C35.8575 39.5197 35.3925 39.7597 35.1025 39.5547Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M34.575 38.6798C34.285 38.4748 34.285 37.9098 34.575 37.4098L38.75 30.2048C39.04 29.7048 39.505 29.4698 39.795 29.6748C40.085 29.8798 40.085 30.4448 39.795 30.9448L35.62 38.1498C35.33 38.6448 34.865 38.8848 34.575 38.6798Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
     </svg>
   );
diff --git a/packages/propel/src/empty-state/assets/horizontal-stack/members.tsx b/packages/propel/src/empty-state/assets/horizontal-stack/members.tsx
index 756ff4390..7eb72f94d 100644
--- a/packages/propel/src/empty-state/assets/horizontal-stack/members.tsx
+++ b/packages/propel/src/empty-state/assets/horizontal-stack/members.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper";
 import type { TIllustrationAssetProps } from "../helper";
 
@@ -13,17 +19,17 @@ export function MembersHorizontalStackIllustration({ className }: TIllustrationA
     >
       <g opacity="0.2">
         <path
-          d="M41.9518 2.84283C41.151 2.43551 40.1223 2.47003 39.0038 3.03614L8.17039 18.7493C5.6366 20.0403 3.5792 23.5889 3.5792 26.668V64.1904C3.5792 65.9094 4.21437 67.1176 5.21546 67.6354L2.13626 66.0682C1.13517 65.5573 0.5 64.3423 0.5 62.6232V25.1008C0.5 22.0148 2.5574 18.4731 5.09119 17.1821L35.9246 1.46898C37.05 0.895957 38.0787 0.868332 38.8726 1.27566L41.9518 2.84283Z"
+          d="M41.6017 1.99286C40.8009 1.58553 39.7722 1.62005 38.6537 2.18616L7.82029 17.8993C5.28651 19.1903 3.2291 22.7389 3.2291 25.818V63.3404C3.2291 65.0594 3.86428 66.2676 4.86536 66.7854L1.78616 65.2182C0.785076 64.7073 0.149902 63.4923 0.149902 61.7732V24.2508C0.149902 21.1648 2.20731 17.6232 4.74109 16.3321L35.5745 0.619001C36.6999 0.0459819 37.7286 0.0183569 38.5225 0.425683L41.6017 1.99286Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.3"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
         <path
-          d="M41.9515 2.84317C42.9526 3.35405 43.5877 4.56913 43.5877 6.28819V43.8106C43.5877 46.8966 41.5303 50.4383 38.9966 51.7293L8.16314 67.4424C7.03778 68.0154 6.00908 68.043 5.21512 67.6357C4.21403 67.1248 3.57886 65.9098 3.57886 64.1907V26.6683C3.57886 23.5823 5.63626 20.0406 8.17004 18.7496L39.0035 3.03647C40.1288 2.46346 41.1575 2.43584 41.9515 2.84317Z"
+          d="M41.6014 1.99319C42.6025 2.50408 43.2377 3.71916 43.2377 5.43821V42.9606C43.2377 46.0466 41.1803 49.5883 38.6465 50.8793L7.81304 66.5924C6.68768 67.1654 5.65898 67.1931 4.86502 66.7857C3.86393 66.2748 3.22876 65.0598 3.22876 63.3407V25.8183C3.22876 22.7323 5.28616 19.1907 7.81995 17.8996L38.6534 2.1865C39.7787 1.61348 40.8074 1.58587 41.6014 1.99319Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.3"
           strokeLinecap="round"
           strokeLinejoin="round"
@@ -31,34 +37,34 @@ export function MembersHorizontalStackIllustration({ className }: TIllustrationA
       </g>
       <g opacity="0.6">
         <path
-          d="M55.4077 8.82148C54.6068 8.41415 53.5781 8.44867 52.4596 9.01478L21.6262 24.7279C19.0924 26.0189 17.035 29.5675 17.035 32.6466V70.169C17.035 71.8881 17.6702 73.0962 18.6713 73.614L15.5921 72.0468C14.591 71.536 13.9558 70.3209 13.9558 68.6018V31.0795C13.9558 27.9934 16.0132 24.4518 18.547 23.1608L49.3804 7.44761C50.5058 6.87459 51.5345 6.84697 52.3284 7.2543L55.4077 8.82148Z"
+          d="M55.0576 7.9715C54.2567 7.56417 53.228 7.59869 52.1095 8.16481L21.2761 23.8779C18.7423 25.169 16.6849 28.7175 16.6849 31.7966V69.319C16.6849 71.0381 17.3201 72.2462 18.3212 72.764L15.242 71.1969C14.2409 70.686 13.6057 69.4709 13.6057 67.7519V30.2295C13.6057 27.1435 15.6631 23.6018 18.1969 22.3108L49.0303 6.59763C50.1557 6.02461 51.1844 5.997 51.9784 6.40433L55.0576 7.9715Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.3"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
         <path
-          d="M55.4076 8.82181C56.4086 9.33269 57.0438 10.5478 57.0438 12.2668V49.7892C57.0438 52.8752 54.9864 56.4169 52.4526 57.7079L21.6192 73.421C20.4938 73.9941 19.4651 74.0217 18.6712 73.6143C17.6701 73.1035 17.0349 71.8884 17.0349 70.1693V32.647C17.0349 29.5609 19.0923 26.0193 21.6261 24.7282L52.4595 9.01511C53.5849 8.44209 54.6136 8.41448 55.4076 8.82181Z"
+          d="M55.0575 7.97183C56.0585 8.48271 56.6937 9.69779 56.6937 11.4169V48.9392C56.6937 52.0252 54.6363 55.5669 52.1025 56.8579L21.2691 72.5711C20.1437 73.1441 19.115 73.1717 18.3211 72.7644C17.32 72.2535 16.6848 71.0384 16.6848 69.3194V31.797C16.6848 28.711 18.7422 25.1693 21.276 23.8783L52.1094 8.16514C53.2348 7.59212 54.2635 7.5645 55.0575 7.97183Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.3"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
       </g>
       <path
-        d="M68.8637 14.7732C68.0628 14.3659 67.0341 14.4004 65.9157 14.9666L35.0823 30.6797C32.5485 31.9707 30.4911 35.5193 30.4911 38.5984V76.1208C30.4911 77.8398 31.1262 79.048 32.1273 79.5658L29.0481 77.9986C28.047 77.4877 27.4119 76.2727 27.4119 74.5536V37.0312C27.4119 33.9452 29.4693 30.4035 32.003 29.1125L62.8365 13.3994C63.9618 12.8264 64.9905 12.7988 65.7845 13.2061L68.8637 14.7732Z"
+        d="M68.5136 13.9233C67.7127 13.5159 66.684 13.5505 65.5656 14.1166L34.7322 29.8297C32.1984 31.1207 30.141 34.6693 30.141 37.7484V75.2708C30.141 76.9899 30.7761 78.198 31.7772 78.7158L28.698 77.1486C27.6969 76.6378 27.0618 75.4227 27.0618 73.7036V36.1813C27.0618 33.0952 29.1192 29.5536 31.6529 28.2626L62.4864 12.5494C63.6117 11.9764 64.6404 11.9488 65.4344 12.3561L68.5136 13.9233Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.3"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
       <path
-        d="M68.8638 14.7736C69.8649 15.2845 70.5001 16.4996 70.5001 18.2186V55.741C70.5001 58.827 68.4427 62.3687 65.9089 63.6597L35.0755 79.3728C33.9501 79.9458 32.9214 79.9734 32.1275 79.5661C31.1264 79.0552 30.4912 77.8402 30.4912 76.1211V38.5987C30.4912 35.5127 32.5486 31.9711 35.0824 30.68L65.9158 14.9669C67.0412 14.3939 68.0699 14.3663 68.8638 14.7736Z"
+        d="M68.5138 13.9236C69.5148 14.4345 70.15 15.6496 70.15 17.3686V54.891C70.15 57.977 68.0926 61.5187 65.5588 62.8097L34.7254 78.5228C33.6 79.0959 32.5713 79.1235 31.7774 78.7161C30.7763 78.2053 30.1411 76.9902 30.1411 75.2711V37.7488C30.1411 34.6627 32.1985 31.1211 34.7323 29.8301L65.5657 14.1169C66.6911 13.5439 67.7198 13.5163 68.5138 13.9236Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.3"
         strokeLinecap="round"
         strokeLinejoin="round"
@@ -66,26 +72,26 @@ export function MembersHorizontalStackIllustration({ className }: TIllustrationA
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M47.6061 52.5984C48.8696 50.4168 50.5887 48.6771 52.3699 47.7657C54.1581 46.8544 55.8703 46.8476 57.1337 47.7381C58.3972 48.6356 59.1083 50.3547 59.1083 52.5294C59.1083 53.1784 58.6802 53.924 58.1417 54.1932C57.6032 54.4625 57.1751 54.1587 57.1751 53.5097C57.1751 51.9564 56.6711 50.7206 55.7667 50.0854C54.8623 49.4434 53.6403 49.4503 52.363 50.1062C51.0858 50.7551 49.8638 51.9978 48.9593 53.5581C48.0549 55.1183 47.5509 56.865 47.5509 58.4184C47.5509 59.0673 47.1229 59.8129 46.5913 60.0822C46.0596 60.3514 45.6316 60.0477 45.6316 59.3987C45.6316 57.224 46.3427 54.7732 47.6061 52.5915V52.5984Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M47.256 51.7485C48.5195 49.5668 50.2386 47.8271 52.0198 46.9158C53.808 46.0045 55.5202 45.9976 56.7836 46.8882C58.0471 47.7857 58.7582 49.5047 58.7582 51.6794C58.7582 52.3284 58.3301 53.074 57.7916 53.3432C57.2531 53.6125 56.825 53.3087 56.825 52.6598C56.825 51.1064 56.321 49.8706 55.4166 49.2355C54.5122 48.5934 53.2902 48.6003 52.0129 49.2562C50.7357 49.9051 49.5137 51.1478 48.6092 52.7081C47.7048 54.2684 47.2008 56.015 47.2008 57.5684C47.2008 58.2174 46.7728 58.963 46.2412 59.2322C45.7095 59.5015 45.2815 59.1977 45.2815 58.5487C45.2815 56.374 45.9926 53.9232 47.256 51.7416V51.7485Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M52.3766 40.7308C50.7818 41.5454 49.4907 43.7754 49.4907 45.7153C49.4907 47.6553 50.7818 48.5735 52.3766 47.7589C53.9715 46.9442 55.2625 44.7143 55.2625 42.7743C55.2625 40.8343 53.9715 39.9161 52.3766 40.7308ZM47.5576 46.7026C47.5576 43.4647 49.7117 39.7435 52.3697 38.3904C55.0278 37.0372 57.1818 38.563 57.1818 41.794C57.1818 45.025 55.0278 48.753 52.3697 50.1062C49.7117 51.4593 47.5576 49.9336 47.5576 46.7026Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M52.0265 39.8808C50.4317 40.6954 49.1407 42.9254 49.1407 44.8654C49.1407 46.8053 50.4317 47.7236 52.0265 46.9089C53.6214 46.0943 54.9124 43.8643 54.9124 41.9243C54.9124 39.9844 53.6214 39.0661 52.0265 39.8808ZM47.2075 45.8526C47.2075 42.6147 49.3616 38.8935 52.0196 37.5404C54.6777 36.1872 56.8317 37.713 56.8317 40.944C56.8317 44.175 54.6777 47.9031 52.0196 49.2562C49.3616 50.6094 47.2075 49.0836 47.2075 45.8526Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M57.189 38.2798C57.189 37.6308 57.617 36.8852 58.1555 36.616C59.274 36.0498 60.3372 36.0636 61.1174 36.6367C61.8975 37.2166 62.3325 38.3074 62.3325 39.6743C62.3325 41.0413 61.8975 42.5809 61.1174 43.9478C61.0828 44.01 61.0483 44.0721 61.0138 44.1273C61.4626 44.2171 61.8837 44.3966 62.2565 44.6727C63.3405 45.4736 63.9411 46.9924 63.9411 48.891C63.9411 49.5399 63.5131 50.2856 62.9746 50.5548C62.436 50.8241 62.0149 50.5203 62.0149 49.8713C62.0149 48.5734 61.6007 47.5447 60.8757 47.0062C60.1508 46.4677 59.1773 46.4608 58.1624 46.9786C57.6308 47.2479 57.1959 46.9441 57.1959 46.2951C57.1959 45.6462 57.6239 44.9006 58.1624 44.6313C58.7493 44.3345 59.3154 43.7476 59.7435 43.002C60.1646 42.2564 60.4132 41.4003 60.4132 40.634C60.4132 39.8677 60.1715 39.267 59.7435 38.9495C59.3223 38.6319 58.7493 38.6319 58.1624 38.9357C57.6308 39.2049 57.1959 38.9011 57.1959 38.2522L57.189 38.2798Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M56.8389 37.4298C56.8389 36.7808 57.2669 36.0352 57.8054 35.766C58.9239 35.1999 59.9871 35.2137 60.7673 35.7867C61.5474 36.3666 61.9824 37.4574 61.9824 38.8244C61.9824 40.1913 61.5474 41.7309 60.7673 43.0979C60.7327 43.16 60.6982 43.2221 60.6637 43.2774C61.1125 43.3671 61.5336 43.5466 61.9064 43.8228C62.9904 44.6236 63.591 46.1424 63.591 48.041C63.591 48.69 63.163 49.4356 62.6245 49.7048C62.0859 49.9741 61.6648 49.6703 61.6648 49.0214C61.6648 47.7234 61.2506 46.6948 60.5256 46.1563C59.8007 45.6178 58.8272 45.6109 57.8123 46.1286C57.2807 46.3979 56.8458 46.0941 56.8458 45.4452C56.8458 44.7962 57.2738 44.0506 57.8123 43.7813C58.3992 43.4845 58.9653 42.8976 59.3934 42.152C59.8145 41.4064 60.0631 40.5503 60.0631 39.784C60.0631 39.0177 59.8214 38.4171 59.3934 38.0995C58.9722 37.7819 58.3992 37.7819 57.8123 38.0857C57.2807 38.3549 56.8458 38.0511 56.8458 37.4022L56.8389 37.4298Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M47.5577 43.1888C47.5577 42.5399 47.1297 42.2361 46.5981 42.5054C45.4796 43.0715 44.4164 44.1692 43.6362 45.543C42.8561 46.9169 42.4211 48.4565 42.4211 49.8165C42.4211 51.1766 42.8561 52.2812 43.6362 52.8542C43.6708 52.8818 43.7053 52.9025 43.7398 52.9302C43.291 53.4825 42.8699 54.09 42.4971 54.7459C41.4131 56.6513 40.8125 58.7846 40.8125 60.6832C40.8125 61.3321 41.2405 61.6359 41.7722 61.3667C42.3038 61.0974 42.7318 60.3518 42.7318 59.7028C42.7318 58.4049 43.1461 56.9551 43.871 55.6779C44.5959 54.4007 45.5694 53.3996 46.5843 52.8818C47.1159 52.6126 47.5439 51.867 47.5439 51.218C47.5439 50.569 47.1159 50.2653 46.5843 50.5345C45.9974 50.8314 45.4313 50.8314 45.0032 50.5207C44.5821 50.2031 44.3336 49.6025 44.3336 48.8362C44.3336 48.0699 44.5752 47.2207 45.0032 46.4751C45.4244 45.7294 45.9974 45.1495 46.5843 44.8458C47.1159 44.5765 47.5439 43.8309 47.5439 43.1819L47.5577 43.1888Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M47.2076 42.3389C47.2076 41.6899 46.7796 41.3861 46.248 41.6554C45.1295 42.2215 44.0663 43.3192 43.2862 44.6931C42.506 46.0669 42.071 47.6065 42.071 48.9665C42.071 50.3266 42.506 51.4312 43.2862 52.0042C43.3207 52.0319 43.3552 52.0526 43.3897 52.0802C42.9409 52.6325 42.5198 53.24 42.147 53.8959C41.063 55.8014 40.4624 57.9346 40.4624 59.8332C40.4624 60.4822 40.8905 60.7859 41.4221 60.5167C41.9537 60.2474 42.3817 59.5018 42.3817 58.8528C42.3817 57.5549 42.796 56.1051 43.5209 54.8279C44.2458 53.5507 45.2193 52.5496 46.2342 52.0318C46.7658 51.7626 47.1938 51.017 47.1938 50.368C47.1938 49.7191 46.7658 49.4153 46.2342 49.6845C45.6473 49.9814 45.0812 49.9814 44.6531 49.6707C44.232 49.3532 43.9835 48.7525 43.9835 47.9862C43.9835 47.2199 44.2251 46.3707 44.6531 45.6251C45.0743 44.8795 45.6473 44.2996 46.2342 43.9958C46.7658 43.7265 47.1938 42.9809 47.1938 42.332L47.2076 42.3389Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
     </svg>
   );
diff --git a/packages/propel/src/empty-state/assets/horizontal-stack/note.tsx b/packages/propel/src/empty-state/assets/horizontal-stack/note.tsx
index 4effbb45c..03dbad572 100644
--- a/packages/propel/src/empty-state/assets/horizontal-stack/note.tsx
+++ b/packages/propel/src/empty-state/assets/horizontal-stack/note.tsx
@@ -1,29 +1,35 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper";
 import type { TIllustrationAssetProps } from "../helper";
 
 export function NoteHorizontalStackIllustration({ className }: TIllustrationAssetProps) {
   return (
     <svg
-      width="52"
-      height="59"
-      viewBox="0 0 52 59"
+      width="51"
+      height="58"
+      viewBox="0 0 51 58"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       className={className}
     >
       <g opacity="0.2">
         <path
-          d="M30.6721 2.43395C30.0921 2.13895 29.3471 2.16395 28.5371 2.57395L6.20711 13.9539C4.37211 14.8889 2.8821 17.4589 2.8821 19.6889V46.864C2.8821 48.109 3.34211 48.9839 4.06711 49.3589L1.8371 48.224C1.1121 47.854 0.6521 46.9739 0.6521 45.7289V18.5539C0.6521 16.3189 2.1421 13.7539 3.9771 12.8189L26.3071 1.43895C27.1221 1.02395 27.8671 1.00395 28.4421 1.29895L30.6721 2.43395Z"
+          d="M30.145 1.45968C29.565 1.16468 28.82 1.18968 28.01 1.59968L5.68001 12.9797C3.84501 13.9147 2.355 16.4847 2.355 18.7147V45.8897C2.355 47.1347 2.81501 48.0097 3.54001 48.3847L1.31 47.2497C0.584998 46.8797 0.125 45.9997 0.125 44.7547V17.5797C0.125 15.3447 1.615 12.7797 3.45 11.8447L25.78 0.464675C26.595 0.0496749 27.34 0.0296755 27.915 0.324675L30.145 1.45968Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.25"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
         <path
-          d="M30.6721 2.43393C31.3971 2.80393 31.8571 3.68392 31.8571 4.92892V32.1039C31.8571 34.3389 30.3671 36.9039 28.5321 37.8389L6.20209 49.2189C5.38709 49.6339 4.64209 49.6539 4.06709 49.3589C3.34209 48.9889 2.88208 48.1089 2.88208 46.8639V19.6889C2.88208 17.4539 4.37209 14.8889 6.20709 13.9539L28.5371 2.57393C29.3521 2.15893 30.0971 2.13893 30.6721 2.43393Z"
+          d="M30.145 1.45965C30.87 1.82965 31.33 2.70965 31.33 3.95465V31.1296C31.33 33.3646 29.84 35.9296 28.005 36.8646L5.67499 48.2447C4.85999 48.6597 4.11499 48.6796 3.53999 48.3847C2.81499 48.0147 2.35498 47.1347 2.35498 45.8897V18.7147C2.35498 16.4797 3.84499 13.9147 5.67999 12.9797L28.01 1.59965C28.825 1.18465 29.57 1.16465 30.145 1.45965Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.25"
           strokeLinecap="round"
           strokeLinejoin="round"
@@ -31,41 +37,41 @@ export function NoteHorizontalStackIllustration({ className }: TIllustrationAsse
       </g>
       <g opacity="0.6">
         <path
-          d="M40.4171 6.76894C39.8371 6.47394 39.0921 6.49894 38.2821 6.90894L15.9521 18.2889C14.1171 19.2239 12.6271 21.7939 12.6271 24.0239V51.1989C12.6271 52.4439 13.0871 53.3189 13.8121 53.6939L11.5821 52.5589C10.8571 52.1889 10.3971 51.3089 10.3971 50.0639V22.8889C10.3971 20.6539 11.8871 18.0889 13.7221 17.1539L36.0521 5.77394C36.8671 5.35894 37.6121 5.33894 38.1871 5.63394L40.4171 6.76894Z"
+          d="M39.89 5.79467C39.31 5.49967 38.565 5.52467 37.755 5.93467L15.425 17.3147C13.59 18.2497 12.1 20.8197 12.1 23.0497V50.2247C12.1 51.4697 12.56 52.3447 13.285 52.7197L11.055 51.5847C10.33 51.2147 9.87 50.3347 9.87 49.0897V21.9147C9.87 19.6797 11.36 17.1147 13.195 16.1797L35.525 4.79967C36.34 4.38467 37.085 4.36467 37.66 4.65967L39.89 5.79467Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.25"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
         <path
-          d="M40.4171 6.76892C41.1421 7.13892 41.6021 8.01892 41.6021 9.26392V36.4389C41.6021 38.6739 40.1121 41.2389 38.2771 42.1739L15.9471 53.5539C15.1321 53.9689 14.3871 53.9889 13.8121 53.6939C13.0871 53.3239 12.6271 52.4439 12.6271 51.1989V24.0239C12.6271 21.7889 14.1171 19.2239 15.9521 18.2889L38.2821 6.90892C39.0971 6.49392 39.8421 6.47392 40.4171 6.76892Z"
+          d="M39.89 5.79465C40.615 6.16465 41.075 7.04464 41.075 8.28964V35.4646C41.075 37.6996 39.585 40.2646 37.75 41.1996L15.42 52.5797C14.605 52.9947 13.86 53.0146 13.285 52.7197C12.56 52.3497 12.1 51.4696 12.1 50.2246V23.0497C12.1 20.8147 13.59 18.2496 15.425 17.3146L37.755 5.93465C38.57 5.51965 39.315 5.49965 39.89 5.79465Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.25"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
       </g>
       <path
-        d="M50.1621 11.0739C49.5821 10.7789 48.8371 10.8039 48.0271 11.2139L25.6971 22.5939C23.8621 23.5289 22.3721 26.0989 22.3721 28.3289V55.5039C22.3721 56.7489 22.8321 57.6239 23.5571 57.9989L21.3271 56.8639C20.6021 56.4939 20.1421 55.6139 20.1421 54.3689V27.1939C20.1421 24.9589 21.6321 22.3939 23.4671 21.4589L45.7971 10.0789C46.6121 9.66393 47.3571 9.64393 47.9321 9.93893L50.1621 11.0739Z"
+        d="M49.635 10.0997C49.055 9.80466 48.31 9.82966 47.5 10.2397L25.17 21.6197C23.335 22.5547 21.845 25.1247 21.845 27.3547V54.5297C21.845 55.7747 22.305 56.6497 23.03 57.0247L20.8 55.8897C20.075 55.5197 19.615 54.6397 19.615 53.3947V26.2197C19.615 23.9847 21.105 21.4197 22.94 20.4847L45.27 9.10466C46.085 8.68966 46.83 8.66966 47.405 8.96466L49.635 10.0997Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.25"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
       <path
-        d="M50.1621 11.0739C50.8871 11.4439 51.3471 12.3239 51.3471 13.5689V40.7439C51.3471 42.9789 49.8571 45.5439 48.0221 46.4789L25.6921 57.8589C24.8771 58.2739 24.1321 58.2939 23.5571 57.9989C22.8321 57.6289 22.3721 56.7489 22.3721 55.5039V28.3289C22.3721 26.0939 23.8621 23.5289 25.6971 22.5939L48.0271 11.2139C48.8421 10.7989 49.5871 10.7789 50.1621 11.0739Z"
+        d="M49.635 10.0996C50.36 10.4696 50.82 11.3496 50.82 12.5946V39.7696C50.82 42.0046 49.33 44.5696 47.495 45.5046L25.165 56.8846C24.35 57.2996 23.605 57.3196 23.03 57.0246C22.305 56.6546 21.845 55.7746 21.845 54.5296V27.3546C21.845 25.1196 23.335 22.5546 25.17 21.6196L47.5 10.2396C48.315 9.82464 49.06 9.80464 49.635 10.0996Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.25"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
       <path
-        d="M43.5321 23.1439L32.4371 28.7939C31.1271 29.4639 30.0621 31.2989 30.0621 32.8939V46.3939C30.0621 47.9889 31.1271 48.7439 32.4371 48.0789L41.1521 43.6389C41.3621 43.5289 41.5671 43.3239 41.7171 43.0689L45.6771 36.2289C45.8271 35.9739 45.9071 35.6839 45.9071 35.4239V24.8189C45.9071 23.2239 44.8371 22.4739 43.5271 23.1389L43.5321 23.1439ZM44.3221 34.3089L41.9471 35.5189C40.6371 36.1889 39.5671 38.0289 39.5671 39.6239V42.5139L32.4371 46.1489C32.0021 46.3689 31.6471 46.1239 31.6471 45.5889V32.0889C31.6471 31.5539 32.0021 30.9439 32.4371 30.7239L43.5321 25.0739C43.9721 24.8489 44.3221 25.0989 44.3221 25.6339V34.3139V34.3089Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M43.005 22.1696L31.91 27.8196C30.6 28.4896 29.535 30.3246 29.535 31.9196V45.4196C29.535 47.0146 30.6 47.7696 31.91 47.1046L40.625 42.6646C40.835 42.5546 41.04 42.3496 41.19 42.0947L45.15 35.2546C45.3 34.9996 45.38 34.7096 45.38 34.4496V23.8447C45.38 22.2497 44.31 21.4996 43 22.1646L43.005 22.1696ZM43.795 33.3346L41.42 34.5446C40.11 35.2146 39.04 37.0546 39.04 38.6496V41.5396L31.91 45.1747C31.475 45.3947 31.12 45.1496 31.12 44.6146V31.1146C31.12 30.5796 31.475 29.9696 31.91 29.7496L43.005 24.0996C43.445 23.8746 43.795 24.1247 43.795 24.6597V33.3396V33.3346Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
     </svg>
   );
diff --git a/packages/propel/src/empty-state/assets/horizontal-stack/priority.tsx b/packages/propel/src/empty-state/assets/horizontal-stack/priority.tsx
index c7a0d819d..209b14e79 100644
--- a/packages/propel/src/empty-state/assets/horizontal-stack/priority.tsx
+++ b/packages/propel/src/empty-state/assets/horizontal-stack/priority.tsx
@@ -1,29 +1,35 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper";
 import type { TIllustrationAssetProps } from "../helper";
 
 export function PriorityHorizontalStackIllustration({ className }: TIllustrationAssetProps) {
   return (
     <svg
-      width="72"
-      height="81"
-      viewBox="0 0 72 81"
+      width="71"
+      height="80"
+      viewBox="0 0 71 80"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       className={className}
     >
       <g opacity="0.2">
         <path
-          d="M42.4518 2.93859C41.651 2.53126 40.6222 2.5658 39.5038 3.13193L8.67038 18.8454C6.1366 20.1365 4.0792 23.6852 4.0792 26.7644V64.2878C4.0792 66.0069 4.71437 67.2151 5.71546 67.7329L2.63626 66.1657C1.63517 65.6548 1 64.4397 1 62.7206V25.1972C1 22.1111 3.0574 18.5693 5.59118 17.2783L36.4246 1.5647C37.5499 0.991664 38.5787 0.964028 39.3726 1.37137L42.4518 2.93859Z"
+          d="M41.5768 1.96789C40.776 1.56055 39.7472 1.59509 38.6288 2.16122L7.79538 17.8747C5.2616 19.1658 3.2042 22.7145 3.2042 25.7937V63.3171C3.2042 65.0362 3.83937 66.2444 4.84046 66.7622L1.76126 65.195C0.760173 64.6841 0.125 63.469 0.125 61.7499V24.2265C0.125 21.1404 2.1824 17.5986 4.71618 16.3076L35.5496 0.593996C36.6749 0.0209608 37.7037 -0.00667559 38.4976 0.400662L41.5768 1.96789Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.25"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
         <path
-          d="M42.4519 2.9385C43.4529 3.4494 44.0881 4.66451 44.0881 6.38361V43.907C44.0881 46.9931 42.0307 50.5349 39.4969 51.8259L8.6635 67.5395C7.53814 68.1125 6.50945 68.1402 5.71548 67.7328C4.7144 67.2219 4.07922 66.0068 4.07922 64.2877V26.7643C4.07922 23.6782 6.13663 20.1364 8.67041 18.8453L39.5038 3.13184C40.6292 2.5588 41.6579 2.53117 42.4519 2.9385Z"
+          d="M41.5769 1.9678C42.5779 2.4787 43.2131 3.6938 43.2131 5.41291V42.9363C43.2131 46.0224 41.1557 49.5642 38.6219 50.8552L7.7885 66.5688C6.66314 67.1418 5.63445 67.1695 4.84048 66.7621C3.8394 66.2512 3.20422 65.0361 3.20422 63.317V25.7936C3.20422 22.7075 5.26163 19.1657 7.79541 17.8746L38.6288 2.16113C39.7542 1.5881 40.7829 1.56046 41.5769 1.9678Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.25"
           strokeLinecap="round"
           strokeLinejoin="round"
@@ -31,53 +37,53 @@ export function PriorityHorizontalStackIllustration({ className }: TIllustration
       </g>
       <g opacity="0.6">
         <path
-          d="M55.9078 8.88293C55.1069 8.47559 54.0782 8.51013 52.9598 9.07626L22.1264 24.7899C19.5926 26.0809 17.5352 29.6296 17.5352 32.7088V70.2322C17.5352 71.9513 18.1704 73.1595 19.1715 73.6773L16.0923 72.11C15.0912 71.5991 14.456 70.384 14.456 68.6649V31.1415C14.456 28.0554 16.5134 24.5137 19.0472 23.2226L49.8806 7.50903C51.006 6.936 52.0347 6.90836 52.8286 7.3157L55.9078 8.88293Z"
+          d="M55.0328 7.91223C54.2319 7.50489 53.2032 7.53943 52.0848 8.10556L21.2514 23.8191C18.7176 25.1102 16.6602 28.6589 16.6602 31.7381V69.2615C16.6602 70.9806 17.2954 72.1888 18.2965 72.7066L15.2173 71.1393C14.2162 70.6284 13.581 69.4133 13.581 67.6942V30.1708C13.581 27.0847 15.6384 23.543 18.1722 22.2519L49.0056 6.53833C50.131 5.9653 51.1597 5.93766 51.9536 6.345L55.0328 7.91223Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.25"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
         <path
-          d="M55.9079 8.88284C56.909 9.39374 57.5441 10.6088 57.5441 12.3279V49.8514C57.5441 52.9375 55.4867 56.4792 52.9529 57.7703L22.1195 73.4838C20.9942 74.0569 19.9655 74.0845 19.1715 73.6772C18.1704 73.1663 17.5352 71.9512 17.5352 70.2321V32.7087C17.5352 29.6226 19.5926 26.0808 22.1264 24.7898L52.9598 9.07617C54.0852 8.50314 55.1139 8.4755 55.9079 8.88284Z"
+          d="M55.0329 7.91214C56.034 8.42304 56.6691 9.63814 56.6691 11.3572V48.8806C56.6691 51.9668 54.6117 55.5085 52.0779 56.7996L21.2445 72.5131C20.1192 73.0862 19.0905 73.1138 18.2965 72.7065C17.2954 72.1956 16.6602 70.9805 16.6602 69.2614V31.738C16.6602 28.6519 18.7176 25.1101 21.2514 23.8191L52.0848 8.10547C53.2102 7.53244 54.2389 7.5048 55.0329 7.91214Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.25"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
       </g>
       <path
-        d="M69.3638 14.8343C68.5629 14.427 67.5342 14.4615 66.4158 15.0277L35.5823 30.7413C33.0486 32.0323 30.9912 35.581 30.9912 38.6602V76.1836C30.9912 77.9027 31.6263 79.1109 32.6274 79.6287L29.5482 78.0615C28.5471 77.5506 27.912 76.3355 27.912 74.6163V37.0929C27.912 34.0068 29.9694 30.4651 32.5031 29.174L63.3366 13.4605C64.4619 12.8874 65.4906 12.8598 66.2846 13.2671L69.3638 14.8343Z"
+        d="M68.4888 13.8636C67.6879 13.4563 66.6592 13.4908 65.5408 14.057L34.7073 29.7706C32.1736 31.0616 30.1162 34.6103 30.1162 37.6895V75.2129C30.1162 76.932 30.7513 78.1402 31.7524 78.658L28.6732 77.0908C27.6721 76.5798 27.037 75.3647 27.037 73.6456V36.1222C27.037 33.0361 29.0944 29.4944 31.6281 28.2033L62.4616 12.4897C63.5869 11.9167 64.6156 11.8891 65.4096 12.2964L68.4888 13.8636Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.25"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
       <path
-        d="M69.3638 14.8343C70.3649 15.3452 71.0001 16.5603 71.0001 18.2794V55.8028C71.0001 58.8889 68.9427 62.4306 66.4089 63.7217L35.5755 79.4353C34.4501 80.0083 33.4214 80.0359 32.6275 79.6286C31.6264 79.1177 30.9912 77.9026 30.9912 76.1835V38.6601C30.9912 35.574 33.0486 32.0322 35.5824 30.7412L66.4158 15.0276C67.5412 14.4546 68.5699 14.4269 69.3638 14.8343Z"
+        d="M68.4888 13.8636C69.4899 14.3745 70.1251 15.5896 70.1251 17.3087V54.8321C70.1251 57.9182 68.0677 61.4599 65.5339 62.751L34.7005 78.4646C33.5751 79.0376 32.5464 79.0652 31.7525 78.6579C30.7514 78.147 30.1162 76.9319 30.1162 75.2128V37.6894C30.1162 34.6033 32.1736 31.0615 34.7074 29.7705L65.5408 14.0569C66.6662 13.4839 67.6949 13.4562 68.4888 13.8636Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.25"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
       <path
-        d="M41.9065 64.3778C41.1954 64.7369 40.6154 64.3364 40.6154 63.4734C40.6154 62.6104 41.1816 61.6162 41.8927 61.2572H41.9065C42.6176 60.8913 43.1906 61.2987 43.1906 62.1617C43.1906 63.0247 42.6176 64.0188 41.9065 64.3778Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M41.0315 63.4071C40.3204 63.7662 39.7404 63.3657 39.7404 62.5027C39.7404 61.6397 40.3066 60.6455 41.0177 60.2865H41.0315C41.7426 59.9206 42.3156 60.328 42.3156 61.191C42.3156 62.054 41.7426 63.0481 41.0315 63.4071Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
-        d="M48.3203 61.112C47.6092 61.471 47.0362 61.0636 47.0362 60.2006V53.9456C47.0362 53.0826 47.6092 52.0883 48.3203 51.7293C49.0314 51.3703 49.6045 51.7777 49.6045 52.6407V58.8957C49.6045 59.7587 49.0314 60.7529 48.3203 61.112Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M47.4453 60.1413C46.7342 60.5003 46.1612 60.0929 46.1612 59.2299V52.9749C46.1612 52.1119 46.7342 51.1176 47.4453 50.7586C48.1564 50.3996 48.7295 50.807 48.7295 51.67V57.925C48.7295 58.788 48.1564 59.7822 47.4453 60.1413Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
-        d="M54.748 57.8396C54.0369 58.1986 53.4638 57.7913 53.4638 56.9283V44.4182C53.4638 43.5551 54.0369 42.561 54.748 42.202C55.4591 41.843 56.0321 42.2503 56.0321 43.1133V55.6234C56.0321 56.4864 55.4591 57.4806 54.748 57.8396Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M53.873 56.8689C53.1619 57.2279 52.5888 56.8206 52.5888 55.9576V43.4474C52.5888 42.5844 53.1619 41.5903 53.873 41.2313C54.5841 40.8723 55.1571 41.2796 55.1571 42.1426V54.6527C55.1571 55.5157 54.5841 56.5099 53.873 56.8689Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
-        d="M61.1687 54.5603C60.4576 54.9193 59.8846 54.5119 59.8846 53.6489V34.8838C59.8846 34.0208 60.4576 33.0266 61.1687 32.6675C61.8798 32.3085 62.4529 32.7159 62.4529 33.5789V52.344C62.4529 53.207 61.8798 54.2013 61.1687 54.5603Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M60.2937 53.5896C59.5826 53.9486 59.0096 53.5412 59.0096 52.6782V33.9131C59.0096 33.0501 59.5826 32.0559 60.2937 31.6968C61.0048 31.3378 61.5779 31.7452 61.5779 32.6082V51.3733C61.5779 52.2363 61.0048 53.2306 60.2937 53.5896Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
     </svg>
   );
diff --git a/packages/propel/src/empty-state/assets/horizontal-stack/project.tsx b/packages/propel/src/empty-state/assets/horizontal-stack/project.tsx
index e372175fc..6b6c4cf2b 100644
--- a/packages/propel/src/empty-state/assets/horizontal-stack/project.tsx
+++ b/packages/propel/src/empty-state/assets/horizontal-stack/project.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper";
 import type { TIllustrationAssetProps } from "../helper";
 
@@ -13,17 +19,17 @@ export function ProjectHorizontalStackIllustration({ className }: TIllustrationA
     >
       <g opacity="0.2">
         <path
-          d="M60.2802 2.91929C59.1202 2.32929 57.6302 2.37929 56.0102 3.19929L11.3502 25.9593C7.68023 27.8293 4.70023 32.9693 4.70023 37.4293V91.7793C4.70023 94.2693 5.62023 96.0193 7.07023 96.7693L2.61023 94.4993C1.16023 93.7593 0.240234 91.9993 0.240234 89.5093V35.1593C0.240234 30.6893 3.22023 25.5593 6.89023 23.6893L51.5602 0.929289C53.1902 0.0992895 54.6802 0.0592895 55.8302 0.649289L60.2902 2.91929H60.2802Z"
+          d="M60.2802 2.91941C59.1202 2.32941 57.6302 2.37941 56.0102 3.19941L11.3502 25.9594C7.68023 27.8294 4.70023 32.9694 4.70023 37.4294V91.7794C4.70023 94.2694 5.62023 96.0194 7.07023 96.7694L2.61023 94.4994C1.16023 93.7594 0.240234 91.9994 0.240234 89.5094V35.1594C0.240234 30.6894 3.22023 25.5594 6.89023 23.6894L51.5602 0.929412C53.1902 0.0994115 54.6802 0.0594115 55.8302 0.649411L60.2902 2.91941H60.2802Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.5"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
         <path
-          d="M60.2802 2.91882C61.7302 3.65882 62.6502 5.41882 62.6502 7.90882V62.2588C62.6502 66.7288 59.6702 71.8588 56.0002 73.7288L11.3402 96.4888C9.7102 97.3188 8.2202 97.3588 7.0702 96.7688C5.6202 96.0288 4.7002 94.2688 4.7002 91.7788V37.4288C4.7002 32.9588 7.6802 27.8288 11.3502 25.9588L56.0102 3.19882C57.6402 2.36882 59.1302 2.32882 60.2802 2.91882Z"
+          d="M60.2812 2.91943C61.7312 3.65943 62.6512 5.41943 62.6512 7.90943V62.2594C62.6512 66.7294 59.6712 71.8594 56.0012 73.7294L11.3412 96.4894C9.71117 97.3194 8.22117 97.3594 7.07117 96.7694C5.62117 96.0294 4.70117 94.2694 4.70117 91.7794V37.4294C4.70117 32.9594 7.68117 27.8294 11.3512 25.9594L56.0112 3.19943C57.6412 2.36943 59.1312 2.32943 60.2812 2.91943Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.5"
           strokeLinecap="round"
           strokeLinejoin="round"
@@ -31,41 +37,41 @@ export function ProjectHorizontalStackIllustration({ className }: TIllustrationA
       </g>
       <g opacity="0.6">
         <path
-          d="M79.7705 11.5892C78.6105 10.9992 77.1205 11.0492 75.5005 11.8692L30.8405 34.6292C27.1705 36.4992 24.1905 41.6392 24.1905 46.0992V100.449C24.1905 102.939 25.1105 104.689 26.5605 105.439L22.1005 103.169C20.6505 102.429 19.7305 100.669 19.7305 98.1792V43.8292C19.7305 39.3592 22.7105 34.2292 26.3805 32.3592L71.0405 9.59921C72.6705 8.76921 74.1605 8.72921 75.3105 9.31921L79.7705 11.5892Z"
+          d="M79.7705 11.5895C78.6105 10.9995 77.1205 11.0495 75.5005 11.8695L30.8405 34.6295C27.1705 36.4995 24.1905 41.6395 24.1905 46.0995V100.449C24.1905 102.939 25.1105 104.689 26.5605 105.439L22.1005 103.169C20.6505 102.429 19.7305 100.669 19.7305 98.1795V43.8295C19.7305 39.3595 22.7105 34.2295 26.3805 32.3595L71.0405 9.59946C72.6705 8.76946 74.1605 8.72946 75.3105 9.31946L79.7705 11.5895Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.5"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
         <path
-          d="M79.7704 11.5887C81.2204 12.3287 82.1404 14.0887 82.1404 16.5787V70.9287C82.1404 75.3987 79.1604 80.5287 75.4904 82.3987L30.8304 105.159C29.2004 105.989 27.7104 106.029 26.5604 105.439C25.1104 104.699 24.1904 102.939 24.1904 100.449V46.0987C24.1904 41.6287 27.1704 36.4987 30.8404 34.6287L75.5004 11.8687C77.1304 11.0387 78.6204 10.9987 79.7704 11.5887Z"
+          d="M79.7714 11.5895C81.2214 12.3295 82.1414 14.0895 82.1414 16.5795V70.9295C82.1414 75.3995 79.1614 80.5295 75.4914 82.3995L30.8314 105.159C29.2014 105.989 27.7114 106.029 26.5614 105.439C25.1114 104.699 24.1914 102.939 24.1914 100.449V46.0995C24.1914 41.6295 27.1714 36.4995 30.8414 34.6295L75.5014 11.8695C77.1314 11.0395 78.6214 10.9995 79.7714 11.5895Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.5"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
       </g>
       <path
-        d="M99.2602 20.1986C98.1002 19.6086 96.6102 19.6586 94.9902 20.4786L50.3302 43.2386C46.6602 45.1086 43.6802 50.2486 43.6802 54.7086V109.059C43.6802 111.549 44.6002 113.299 46.0502 114.049L41.5902 111.779C40.1402 111.039 39.2202 109.279 39.2202 106.789V52.4386C39.2202 47.9686 42.2002 42.8386 45.8702 40.9686L90.5302 18.2086C92.1602 17.3786 93.6502 17.3386 94.8002 17.9286L99.2602 20.1986Z"
+        d="M99.2607 20.1994C98.1007 19.6094 96.6107 19.6594 94.9907 20.4794L50.3307 43.2394C46.6607 45.1094 43.6807 50.2494 43.6807 54.7094V109.059C43.6807 111.549 44.6007 113.299 46.0507 114.049L41.5907 111.779C40.1407 111.039 39.2207 109.279 39.2207 106.789V52.4394C39.2207 47.9694 42.2007 42.8394 45.8707 40.9694L90.5307 18.2094C92.1607 17.3794 93.6507 17.3394 94.8007 17.9294L99.2607 20.1994Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.5"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
       <path
-        d="M99.2602 20.1981C100.71 20.9381 101.63 22.6981 101.63 25.1881V79.5381C101.63 84.0081 98.6502 89.1381 94.9802 91.0081L50.3202 113.768C48.6902 114.598 47.2002 114.638 46.0502 114.048C44.6002 113.308 43.6802 111.548 43.6802 109.058V54.7081C43.6802 50.2381 46.6602 45.1081 50.3302 43.2381L94.9902 20.4781C96.6202 19.6481 98.1102 19.6081 99.2602 20.1981Z"
+        d="M99.2616 20.1995C100.712 20.9395 101.632 22.6995 101.632 25.1895V79.5395C101.632 84.0095 98.6516 89.1395 94.9816 91.0095L50.3216 113.769C48.6916 114.599 47.2016 114.639 46.0516 114.049C44.6016 113.309 43.6816 111.549 43.6816 109.059V54.7095C43.6816 50.2395 46.6616 45.1095 50.3316 43.2395L94.9916 20.4795C96.6216 19.6495 98.1116 19.6095 99.2616 20.1995Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.5"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
       <path
-        d="M85.8902 51.3399L81.9602 53.3399V51.7399C81.9602 49.0999 80.2002 47.8499 78.0302 48.9599L72.7802 51.6299C70.6102 52.7399 68.8502 55.7799 68.8502 58.4199V60.0199L64.9202 62.0199C62.7502 63.1299 60.9902 66.1699 60.9902 68.8099V84.7699C60.9902 87.4099 62.7502 88.6599 64.9202 87.5499L85.9002 76.8599C88.0702 75.7499 89.8302 72.7099 89.8302 70.0699V54.1099C89.8302 51.4699 88.0702 50.2199 85.9002 51.3299L85.8902 51.3399ZM71.4602 57.0899C71.4602 56.2099 72.0502 55.1899 72.7702 54.8299L78.0202 52.1599C78.7402 51.7899 79.3302 52.2099 79.3302 53.0899V54.6899L71.4602 58.6999V57.0999V57.0899ZM79.3302 57.8699V77.0199L71.4602 81.0299V61.8799L79.3302 57.8699ZM63.5902 83.4399V67.4799C63.5902 66.5999 64.1802 65.5799 64.9002 65.2199L68.8302 63.2199V82.3699L64.9002 84.3699C64.1802 84.7399 63.5902 84.3199 63.5902 83.4399ZM87.2002 71.4099C87.2002 72.2899 86.6102 73.3099 85.8902 73.6699L81.9602 75.6699V56.5199L85.8902 54.5199C86.6102 54.1499 87.2002 54.5699 87.2002 55.4499V71.4099Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M85.8902 51.3394L81.9602 53.3394V51.7394C81.9602 49.0994 80.2002 47.8494 78.0302 48.9594L72.7802 51.6294C70.6102 52.7394 68.8502 55.7794 68.8502 58.4194V60.0194L64.9202 62.0194C62.7502 63.1294 60.9902 66.1694 60.9902 68.8094V84.7694C60.9902 87.4094 62.7502 88.6594 64.9202 87.5494L85.9002 76.8594C88.0702 75.7494 89.8302 72.7094 89.8302 70.0694V54.1094C89.8302 51.4694 88.0702 50.2194 85.9002 51.3294L85.8902 51.3394ZM71.4602 57.0894C71.4602 56.2094 72.0502 55.1894 72.7702 54.8294L78.0202 52.1594C78.7402 51.7894 79.3302 52.2094 79.3302 53.0894V54.6894L71.4602 58.6994V57.0994V57.0894ZM79.3302 57.8694V77.0194L71.4602 81.0294V61.8794L79.3302 57.8694ZM63.5902 83.4394V67.4794C63.5902 66.5994 64.1802 65.5794 64.9002 65.2194L68.8302 63.2194V82.3694L64.9002 84.3694C64.1802 84.7394 63.5902 84.3194 63.5902 83.4394ZM87.2002 71.4094C87.2002 72.2894 86.6102 73.3094 85.8902 73.6694L81.9602 75.6694V56.5194L85.8902 54.5194C86.6102 54.1494 87.2002 54.5694 87.2002 55.4494V71.4094Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
     </svg>
   );
diff --git a/packages/propel/src/empty-state/assets/horizontal-stack/settings.tsx b/packages/propel/src/empty-state/assets/horizontal-stack/settings.tsx
index 12db92477..58bea8ece 100644
--- a/packages/propel/src/empty-state/assets/horizontal-stack/settings.tsx
+++ b/packages/propel/src/empty-state/assets/horizontal-stack/settings.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper";
 import type { TIllustrationAssetProps } from "../helper";
 
@@ -13,17 +19,17 @@ export function SettingsHorizontalStackIllustration({ className }: TIllustration
     >
       <g opacity="0.2">
         <path
-          d="M41.9517 2.43803C41.1509 2.0307 40.1222 2.0654 39.0037 2.63153L8.17035 18.3449C5.63658 19.636 3.57916 23.1848 3.57916 26.264V63.787C3.57916 65.5061 4.21433 66.7145 5.21541 67.2323L2.13625 65.6651C1.13517 65.1542 0.5 63.9393 0.5 62.2202V24.6967C0.5 21.6107 2.55741 18.0687 5.09119 16.7777L35.9246 1.06431C37.0499 0.491274 38.0785 0.46347 38.8725 0.870807L41.9517 2.43803Z"
+          d="M41.6268 2.01787C40.8259 1.61053 39.7972 1.64524 38.6788 2.21137L7.8454 17.9247C5.31163 19.2158 3.25421 22.7646 3.25421 25.8438V63.3669C3.25421 65.086 3.88938 66.2943 4.89046 66.8121L1.8113 65.2449C0.810215 64.734 0.175049 63.5191 0.175049 61.8V24.2766C0.175049 21.1905 2.23246 17.6486 4.76624 16.3575L35.5996 0.644142C36.725 0.0711084 37.7536 0.0433035 38.5475 0.450641L41.6268 2.01787Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.35"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
         <path
-          d="M41.9518 2.4388C42.9529 2.9497 43.5881 4.16497 43.5881 5.88407V43.4075C43.5881 46.4936 41.5306 50.0351 38.9969 51.3262L8.1635 67.0399C7.03815 67.6129 6.00943 67.6404 5.21547 67.2331C4.21439 66.7222 3.57922 65.5069 3.57922 63.7878V26.2647C3.57922 23.1786 5.63664 19.6367 8.17041 18.3457L39.0038 2.6323C40.1291 2.05927 41.1578 2.03146 41.9518 2.4388Z"
+          d="M41.6269 2.01863C42.6279 2.52953 43.2631 3.7448 43.2631 5.4639V42.9873C43.2631 46.0734 41.2057 49.615 38.6719 50.906L7.83855 66.6197C6.7132 67.1928 5.68448 67.2202 4.89052 66.8129C3.88944 66.302 3.25427 65.0867 3.25427 63.3676V25.8446C3.25427 22.7585 5.31169 19.2166 7.84546 17.9255L38.6788 2.21214C39.8042 1.6391 40.8329 1.6113 41.6269 2.01863Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.35"
           strokeLinecap="round"
           strokeLinejoin="round"
@@ -31,45 +37,45 @@ export function SettingsHorizontalStackIllustration({ className }: TIllustration
       </g>
       <g opacity="0.6">
         <path
-          d="M55.4078 8.38193C54.6069 7.97459 53.5782 8.0093 52.4598 8.57543L21.6264 24.2888C19.0926 25.5799 17.0352 29.1287 17.0352 32.2079V69.7313C17.0352 71.4504 17.6705 72.6584 18.6716 73.1762L15.5923 71.609C14.5912 71.0981 13.9561 69.8831 13.9561 68.164V30.6406C13.9561 27.5545 16.0135 24.0126 18.5472 22.7216L49.3806 7.0082C50.506 6.43517 51.5347 6.4077 52.3286 6.81504L55.4078 8.38193Z"
+          d="M55.0829 7.96176C54.282 7.55442 53.2533 7.58913 52.1348 8.15526L21.3015 23.8686C18.7677 25.1597 16.7103 28.7085 16.7103 31.7877V69.3111C16.7103 71.0302 17.3455 72.2382 18.3466 72.756L15.2674 71.1888C14.2663 70.6779 13.6311 69.463 13.6311 67.7439V30.2205C13.6311 27.1344 15.6885 23.5925 18.2223 22.3014L49.0557 6.58804C50.181 6.015 51.2097 5.98754 52.0037 6.39487L55.0829 7.96176Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.35"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
         <path
-          d="M55.4079 8.38106C56.4089 8.89196 57.0441 10.1072 57.0441 11.8263V49.3497C57.0441 52.4358 54.9867 55.9774 52.4529 57.2685L21.6196 72.9822C20.4942 73.5552 19.4656 73.5827 18.6716 73.1753C17.6705 72.6644 17.0353 71.4495 17.0353 69.7304V32.207C17.0353 29.1209 19.0927 25.579 21.6265 24.2879L52.4598 8.57456C53.5852 8.00153 54.6139 7.97372 55.4079 8.38106Z"
+          d="M55.0829 7.96089C56.084 8.47179 56.7192 9.68706 56.7192 11.4062V48.9296C56.7192 52.0157 54.6617 55.5572 52.128 56.8483L21.2946 72.562C20.1693 73.135 19.1406 73.1625 18.3467 72.7552C17.3456 72.2443 16.7103 71.0293 16.7103 69.3102V31.7868C16.7103 28.7007 18.7677 25.1588 21.3015 23.8678L52.1349 8.1544C53.2602 7.58136 54.289 7.55356 55.0829 7.96089Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.35"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
       </g>
       <path
-        d="M68.8636 14.3338C68.0627 13.9264 67.034 13.9612 65.9156 14.5273L35.0822 30.2407C32.5484 31.5317 30.4911 35.0805 30.4911 38.1597V75.6831C30.4911 77.4022 31.1263 78.6103 32.1274 79.1281L29.0481 77.5608C28.047 77.0499 27.4119 75.835 27.4119 74.1159V36.5925C27.4119 33.5064 29.4693 29.9645 32.0031 28.6734L62.8364 12.9601C63.9618 12.387 64.9905 12.3592 65.7844 12.7666L68.8636 14.3338Z"
+        d="M68.5387 13.9136C67.7378 13.5063 66.7091 13.541 65.5906 14.1071L34.7573 29.8205C32.2235 31.1116 30.1662 34.6604 30.1662 37.7396V75.263C30.1662 76.9821 30.8013 78.1901 31.8024 78.7079L28.7232 77.1407C27.7221 76.6298 27.0869 75.4148 27.0869 73.6957V36.1723C27.0869 33.0862 29.1443 29.5443 31.6781 28.2533L62.5115 12.5399C63.6368 11.9669 64.6655 11.9391 65.4595 12.3464L68.5387 13.9136Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.35"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
       <path
-        d="M68.8636 14.3347C69.8647 14.8456 70.4998 16.0608 70.4998 17.7799V55.3033C70.4998 58.3894 68.4424 61.931 65.9086 63.2221L35.0753 78.9358C33.9499 79.5088 32.9213 79.5363 32.1273 79.129C31.1263 78.618 30.4911 77.4031 30.4911 75.684V38.1606C30.4911 35.0745 32.5484 31.5326 35.0822 30.2416L65.9156 14.5282C67.0409 13.9551 68.0696 13.9273 68.8636 14.3347Z"
+        d="M68.5386 13.9145C69.5397 14.4254 70.1749 15.6407 70.1749 17.3598V54.8832C70.1749 57.9693 68.1175 61.5108 65.5837 62.8019L34.7503 78.5156C33.625 79.0887 32.5963 79.1161 31.8024 78.7088C30.8013 78.1979 30.1661 76.983 30.1661 75.2639V37.7404C30.1661 34.6544 32.2235 31.1124 34.7572 29.8214L65.5906 14.108C66.716 13.535 67.7447 13.5072 68.5386 13.9145Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.35"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
       <path
-        d="M50.7681 61.8964C50.6645 61.9516 50.5609 62.0001 50.4574 62.0346C48.9178 62.6422 47.6889 61.7721 47.5439 59.9701C47.5163 59.5559 47.3506 59.2589 47.0813 59.1277C46.8189 58.9896 46.4876 59.0313 46.1355 59.2454C45.9836 59.3351 45.8386 59.4592 45.7005 59.6111C44.0642 61.3509 42.1449 61.4475 41.4062 59.8458C40.771 58.465 41.2129 56.2075 42.4695 54.4746C42.7594 54.0741 42.9528 53.6184 43.008 53.1696C43.0632 52.7209 42.9941 52.3413 42.7939 52.0996C42.7042 51.9961 42.6006 51.9201 42.4764 51.8718C41.7653 51.6163 41.3027 50.9397 41.1646 49.9731C41.0265 49.0066 41.2267 47.8604 41.7307 46.7558C42.6282 44.7812 44.2921 43.3866 45.6936 43.4487C46.3495 43.4832 47.1227 42.7515 47.4265 41.8056C47.4886 41.6054 47.5301 41.412 47.5439 41.2187C47.5439 41.1842 47.5439 41.1498 47.5508 41.1152C47.6475 40.052 48.0548 38.9335 48.7038 37.9531C49.3735 36.9452 50.2157 36.1997 51.0718 35.8614C52.6114 35.2538 53.8403 36.1236 53.9853 37.9255C54.0198 38.3397 54.1787 38.6368 54.4479 38.7679C54.7172 38.8991 55.0486 38.8577 55.3938 38.6506C55.5457 38.554 55.6906 38.4366 55.8287 38.2916C57.4581 36.5587 59.3843 36.4552 60.123 38.057C60.7582 39.4378 60.3095 41.6952 59.0598 43.4282C58.4661 44.2359 58.3279 45.2991 58.7353 45.8031C58.825 45.9067 58.9287 45.9825 59.0529 46.0239C59.764 46.2793 60.2265 46.9561 60.3715 47.9158C60.5096 48.8823 60.3163 50.0216 59.8124 51.1331C58.9148 53.1146 57.251 54.5091 55.8425 54.4469C55.5181 54.4262 55.1659 54.592 54.8414 54.9027C54.5169 55.2134 54.2546 55.6343 54.1096 56.09C54.0475 56.2902 54.006 56.4905 53.9922 56.6769C53.9094 57.7747 53.4952 58.9278 52.8324 59.9358C52.2456 60.8195 51.5276 61.5029 50.775 61.8826L50.7681 61.8964ZM46.2528 56.829C47.0123 56.4423 47.7372 56.3939 48.3241 56.6907C48.9868 57.029 49.3942 57.7676 49.4701 58.7825C49.5254 59.4936 50.0224 59.846 50.6369 59.6044C50.9821 59.4732 51.3204 59.1695 51.5896 58.769C51.8589 58.3617 52.0246 57.899 52.0522 57.4641C52.0868 57.0015 52.1834 56.5045 52.3422 56.0074C52.7081 54.8683 53.3571 53.8117 54.1648 53.0385C54.9795 52.2652 55.8564 51.8647 56.6365 51.9061C57.1888 51.9268 57.8585 51.3678 58.2175 50.5739C58.4177 50.1251 58.5006 49.6694 58.4454 49.2827C58.3901 48.8961 58.2037 48.6268 57.9207 48.5232C57.6238 48.4197 57.3545 48.2332 57.1405 47.964C56.1187 46.7074 56.4708 44.0701 57.9276 42.0817C58.4247 41.3982 58.6042 40.4941 58.3487 39.9418C58.0518 39.2997 57.2786 39.341 56.6296 40.0314C56.2982 40.3904 55.9323 40.6941 55.5595 40.9288C54.7034 41.4604 53.861 41.5639 53.1982 41.2326C52.5355 40.8943 52.1282 40.1555 52.0522 39.1475C51.997 38.4295 51.4999 38.0843 50.8854 38.326C50.1743 38.5952 49.5392 39.569 49.4701 40.4734C49.4701 40.501 49.4701 40.5284 49.4632 40.556C49.4218 41.0047 49.332 41.4606 49.1801 41.93C48.4276 44.2843 46.4945 46.1206 44.879 46.0239C44.3266 46.0032 43.6569 46.5627 43.2979 47.3498C43.0977 47.7985 43.0149 48.2539 43.0701 48.6406C43.1253 49.0272 43.3118 49.2965 43.5948 49.4001C43.8917 49.5036 44.161 49.6902 44.375 49.9526C44.8721 50.5601 45.0653 51.5059 44.9134 52.6174C44.7615 53.729 44.2921 54.8752 43.5879 55.8348C43.0908 56.5183 42.9113 57.4225 43.1668 57.9748C43.4636 58.6169 44.2369 58.5755 44.8859 57.8851C45.2173 57.5261 45.5831 57.2225 45.9629 56.9877C46.0595 56.9256 46.1562 56.8702 46.2528 56.8219V56.829Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M50.4432 61.4762C50.3396 61.5315 50.236 61.5799 50.1324 61.6144C48.5928 62.222 47.3639 61.3519 47.2189 59.55C47.1913 59.1357 47.0256 58.8387 46.7563 58.7075C46.494 58.5695 46.1626 58.6112 45.8105 58.8252C45.6586 58.9149 45.5136 59.0391 45.3755 59.191C43.7393 60.9308 41.82 61.0273 41.0813 59.4256C40.4461 58.0448 40.888 55.7873 42.1445 54.0544C42.4345 53.654 42.6278 53.1982 42.683 52.7495C42.7383 52.3007 42.6692 51.9211 42.469 51.6795C42.3792 51.5759 42.2757 51.4999 42.1514 51.4516C41.4403 51.1961 40.9777 50.5195 40.8396 49.553C40.7016 48.5864 40.9017 47.4402 41.4057 46.3356C42.3033 44.3611 43.9671 42.9664 45.3686 43.0285C46.0245 43.0631 46.7978 42.3313 47.1015 41.3855C47.1637 41.1853 47.2051 40.9919 47.2189 40.7986C47.2189 40.764 47.219 40.7296 47.2259 40.6951C47.3225 39.6319 47.7299 38.5133 48.3789 37.533C49.0485 36.525 49.8908 35.7795 50.7469 35.4412C52.2865 34.8337 53.5154 35.7034 53.6604 37.5053C53.6949 37.9196 53.8537 38.2166 54.123 38.3478C54.3922 38.479 54.7236 38.4376 55.0688 38.2305C55.2207 38.1338 55.3657 38.0164 55.5038 37.8714C57.1331 36.1385 59.0593 36.0351 59.798 37.6368C60.4332 39.0176 59.9845 41.2751 58.7349 43.008C58.1411 43.8158 58.003 44.8789 58.4103 45.3829C58.5001 45.4865 58.6037 45.5623 58.728 45.6037C59.4391 45.8592 59.9016 46.5359 60.0466 47.4956C60.1847 48.4622 59.9914 49.6014 59.4874 50.713C58.5899 52.6944 56.926 54.0889 55.5176 54.0268C55.1931 54.0061 54.8409 54.1719 54.5165 54.4825C54.192 54.7932 53.9297 55.2142 53.7847 55.6698C53.7225 55.8701 53.6811 56.0703 53.6673 56.2568C53.5844 57.3545 53.1702 58.5076 52.5074 59.5156C51.9206 60.3993 51.2026 61.0827 50.4501 61.4624L50.4432 61.4762ZM45.9279 56.4088C46.6873 56.0222 47.4123 55.9737 47.9991 56.2706C48.6619 56.6089 49.0693 57.3475 49.1452 58.3623C49.2004 59.0735 49.6975 59.4259 50.3119 59.1842C50.6571 59.053 50.9954 58.7493 51.2647 58.3489C51.5339 57.9415 51.6997 57.4789 51.7273 57.0439C51.7618 56.5813 51.8584 56.0843 52.0172 55.5873C52.3831 54.4481 53.0321 53.3916 53.8399 52.6183C54.6546 51.8451 55.5314 51.4445 56.3116 51.486C56.8639 51.5067 57.5335 50.9477 57.8925 50.1537C58.0927 49.705 58.1756 49.2492 58.1204 48.8626C58.0652 48.476 57.8788 48.2066 57.5957 48.1031C57.2988 47.9995 57.0296 47.8131 56.8155 47.5438C55.7938 46.2873 56.1459 43.6499 57.6026 41.6616C58.0997 40.9781 58.2792 40.0739 58.0238 39.5216C57.7269 38.8795 56.9536 38.9209 56.3047 39.6113C55.9733 39.9703 55.6073 40.2739 55.2345 40.5087C54.3784 41.0403 53.5361 41.1438 52.8733 40.8124C52.2105 40.4741 51.8032 39.7353 51.7273 38.7274C51.6721 38.0093 51.1749 37.6642 50.5605 37.9058C49.8494 38.1751 49.2142 39.1488 49.1452 40.0532C49.1452 40.0808 49.1452 40.1082 49.1383 40.1358C49.0969 40.5846 49.0071 41.0404 48.8552 41.5099C48.1027 43.8641 46.1695 45.7004 44.554 45.6037C44.0017 45.583 43.332 46.1425 42.973 46.9296C42.7727 47.3784 42.6899 47.8338 42.7452 48.2204C42.8004 48.607 42.9868 48.8763 43.2699 48.9799C43.5667 49.0835 43.836 49.2701 44.05 49.5324C44.5471 50.14 44.7404 51.0857 44.5885 52.1973C44.4366 53.3088 43.9672 54.455 43.263 55.4147C42.7659 56.0982 42.5864 57.0023 42.8418 57.5546C43.1387 58.1967 43.9119 58.1554 44.5609 57.465C44.8923 57.1059 45.2582 56.8023 45.6379 56.5676C45.7346 56.5054 45.8312 56.45 45.9279 56.4017V56.4088Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
-        d="M50.7612 53.673C48.6279 54.7639 46.8881 53.5351 46.8881 50.9323C46.8881 48.3295 48.6279 45.3332 50.7612 44.2424C52.8945 43.1515 54.6343 44.3803 54.6343 46.9831C54.6343 49.5859 52.8945 52.5822 50.7612 53.673ZM50.7612 46.6035C49.6911 47.1489 48.8211 48.647 48.8211 49.9449C48.8211 51.2429 49.6911 51.8573 50.7612 51.3119C51.8313 50.7665 52.7012 49.2684 52.7012 47.9705C52.7012 46.6725 51.8313 46.0581 50.7612 46.6035Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M50.4363 53.2529C48.3029 54.3437 46.5631 53.115 46.5631 50.5122C46.5631 47.9093 48.3029 44.913 50.4363 43.8222C52.5696 42.7314 54.3094 43.9601 54.3094 46.5629C54.3094 49.1657 52.5696 52.162 50.4363 53.2529ZM50.4363 46.1833C49.3661 46.7287 48.4962 48.2268 48.4962 49.5248C48.4962 50.8227 49.3661 51.4372 50.4363 50.8917C51.5064 50.3463 52.3762 48.8483 52.3762 47.5503C52.3762 46.2524 51.5064 45.6379 50.4363 46.1833Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
     </svg>
   );
diff --git a/packages/propel/src/empty-state/assets/horizontal-stack/state.tsx b/packages/propel/src/empty-state/assets/horizontal-stack/state.tsx
index 306a79d97..a4cdc80c6 100644
--- a/packages/propel/src/empty-state/assets/horizontal-stack/state.tsx
+++ b/packages/propel/src/empty-state/assets/horizontal-stack/state.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper";
 import type { TIllustrationAssetProps } from "../helper";
 
@@ -13,17 +19,17 @@ export function StateHorizontalStackIllustration({ className }: TIllustrationAss
     >
       <g opacity="0.2">
         <path
-          d="M42.4518 2.9386C41.651 2.53126 40.6223 2.5658 39.5038 3.13193L8.6704 18.8454C6.13661 20.1365 4.07922 23.6852 4.07922 26.7644V64.2879C4.07922 66.007 4.71436 67.2152 5.71545 67.733L2.63625 66.1657C1.63517 65.6548 1 64.4397 1 62.7206V25.1972C1 22.1111 3.0574 18.5693 5.59118 17.2783L36.4246 1.5647C37.55 0.991664 38.5787 0.964027 39.3726 1.37137L42.4518 2.9386Z"
+          d="M41.5768 1.96789C40.776 1.56055 39.7473 1.59509 38.6288 2.16123L7.7954 17.8747C5.26161 19.1658 3.20422 22.7145 3.20422 25.7937V63.3172C3.20422 65.0363 3.83936 66.2445 4.84045 66.7623L1.76125 65.195C0.760168 64.6841 0.125 63.469 0.125 61.7499V24.2265C0.125 21.1404 2.1824 17.5986 4.71618 16.3076L35.5496 0.593996C36.675 0.0209607 37.7037 -0.00667566 38.4976 0.400663L41.5768 1.96789Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.25"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
         <path
-          d="M42.4519 2.9385C43.453 3.4494 44.0882 4.66451 44.0882 6.38361V43.907C44.0882 46.9931 42.0307 50.5349 39.497 51.8259L8.66355 67.5395C7.5382 68.1126 6.50948 68.1402 5.71552 67.7329C4.71443 67.222 4.07928 66.0069 4.07928 64.2878V26.7643C4.07928 23.6782 6.13668 20.1364 8.67046 18.8453L39.5039 3.13184C40.6292 2.5588 41.6579 2.53117 42.4519 2.9385Z"
+          d="M41.5769 1.9678C42.578 2.4787 43.2132 3.6938 43.2132 5.41291V42.9363C43.2132 46.0224 41.1557 49.5642 38.622 50.8552L7.78855 66.5688C6.6632 67.1419 5.63448 67.1695 4.84052 66.7622C3.83943 66.2513 3.20428 65.0362 3.20428 63.3171V25.7936C3.20428 22.7075 5.26168 19.1657 7.79546 17.8746L38.6289 2.16113C39.7542 1.5881 40.7829 1.56046 41.5769 1.9678Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.25"
           strokeLinecap="round"
           strokeLinejoin="round"
@@ -31,41 +37,41 @@ export function StateHorizontalStackIllustration({ className }: TIllustrationAss
       </g>
       <g opacity="0.6">
         <path
-          d="M55.9078 8.88293C55.1069 8.47559 54.0782 8.51013 52.9597 9.07626L22.1263 24.7899C19.5925 26.0809 17.5351 29.6296 17.5351 32.7088V70.2322C17.5351 71.9513 18.1703 73.1595 19.1714 73.6773L16.0922 72.1101C15.0911 71.5992 14.4559 70.3841 14.4559 68.665V31.1415C14.4559 28.0554 16.5133 24.5137 19.0471 23.2226L49.8805 7.50903C51.0059 6.936 52.0346 6.90836 52.8286 7.3157L55.9078 8.88293Z"
+          d="M55.0328 7.91223C54.2319 7.50489 53.2032 7.53943 52.0847 8.10556L21.2513 23.8192C18.7175 25.1102 16.6601 28.6589 16.6601 31.7381V69.2615C16.6601 70.9806 17.2953 72.1888 18.2964 72.7066L15.2172 71.1394C14.2161 70.6285 13.5809 69.4134 13.5809 67.6943V30.1708C13.5809 27.0847 15.6383 23.543 18.1721 22.2519L49.0055 6.53833C50.1309 5.9653 51.1596 5.93766 51.9536 6.345L55.0328 7.91223Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.25"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
         <path
-          d="M55.9078 8.88284C56.9089 9.39374 57.5441 10.6088 57.5441 12.3279V49.8514C57.5441 52.9375 55.4867 56.4792 52.9529 57.7703L22.1194 73.4839C20.9941 74.0569 19.9654 74.0845 19.1715 73.6772C18.1704 73.1663 17.5352 71.9512 17.5352 70.2321V32.7087C17.5352 29.6226 19.5926 26.0808 22.1264 24.7898L52.9598 9.07617C54.0851 8.50314 55.1138 8.4755 55.9078 8.88284Z"
+          d="M55.0328 7.91214C56.0339 8.42304 56.6691 9.63814 56.6691 11.3572V48.8807C56.6691 51.9668 54.6117 55.5085 52.0779 56.7996L21.2444 72.5132C20.1191 73.0862 19.0904 73.1138 18.2965 72.7065C17.2954 72.1956 16.6602 70.9805 16.6602 69.2614V31.738C16.6602 28.6519 18.7176 25.1101 21.2514 23.8191L52.0848 8.10547C53.2101 7.53244 54.2388 7.5048 55.0328 7.91214Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.25"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
       </g>
       <path
-        d="M69.3638 14.8343C68.5629 14.427 67.5342 14.4615 66.4158 15.0277L35.5823 30.7413C33.0485 32.0323 30.9911 35.581 30.9911 38.6602V76.1836C30.9911 77.9027 31.6263 79.1109 32.6274 79.6287L29.5482 78.0615C28.5471 77.5506 27.9119 76.3355 27.9119 74.6164V37.093C27.9119 34.0069 29.9693 30.4651 32.5031 29.174L63.3365 13.4605C64.4619 12.8874 65.4906 12.8598 66.2846 13.2671L69.3638 14.8343Z"
+        d="M68.4888 13.8636C67.6879 13.4563 66.6592 13.4908 65.5408 14.057L34.7073 29.7706C32.1735 31.0616 30.1161 34.6103 30.1161 37.6895V75.2129C30.1161 76.932 30.7513 78.1402 31.7524 78.658L28.6732 77.0908C27.6721 76.5799 27.0369 75.3648 27.0369 73.6457V36.1223C27.0369 33.0361 29.0943 29.4944 31.6281 28.2033L62.4615 12.4897C63.5869 11.9167 64.6156 11.8891 65.4096 12.2964L68.4888 13.8636Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.25"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
       <path
-        d="M69.3638 14.8343C70.3649 15.3452 71.0001 16.5603 71.0001 18.2794V55.8028C71.0001 58.8889 68.9427 62.4306 66.4089 63.7217L35.5755 79.4353C34.4501 80.0083 33.4214 80.036 32.6275 79.6286C31.6264 79.1177 30.9912 77.9026 30.9912 76.1835V38.6601C30.9912 35.574 33.0486 32.0322 35.5824 30.7412L66.4158 15.0276C67.5412 14.4546 68.5699 14.4269 69.3638 14.8343Z"
+        d="M68.4888 13.8636C69.4899 14.3745 70.1251 15.5896 70.1251 17.3087V54.8321C70.1251 57.9182 68.0677 61.4599 65.5339 62.751L34.7005 78.4646C33.5751 79.0376 32.5464 79.0653 31.7525 78.6579C30.7514 78.147 30.1162 76.9319 30.1162 75.2128V37.6894C30.1162 34.6033 32.1736 31.0615 34.7074 29.7705L65.5408 14.0569C66.6662 13.4839 67.6949 13.4562 68.4888 13.8636Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.25"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
       <path
-        d="M51.9864 33.7926C45.2411 37.2308 39.78 46.6686 39.78 54.8706C39.78 63.0726 45.248 66.9389 51.9864 63.5076C58.7316 60.0694 64.1927 50.6316 64.1927 42.4296C64.1927 34.2276 58.7247 30.3613 51.9864 33.7926ZM46.9602 54.4772L44.8131 56.9764C44.1986 55.8994 43.8534 54.484 43.8534 52.7994C43.8534 51.1148 44.1986 49.3405 44.8131 47.6421L46.9602 47.9528C46.5322 49.1403 46.2905 50.3761 46.2905 51.5636C46.2905 52.7511 46.5322 53.7314 46.9602 54.4909V54.4772ZM51.9864 58.5505C50.5986 59.2547 49.2938 59.5032 48.1477 59.3444L49.3007 56.141C50.1015 56.2514 51.006 56.0858 51.9864 55.5887C52.9667 55.0916 53.8781 54.3321 54.672 53.407L55.825 55.4367C54.6858 56.7623 53.3741 57.8532 51.9864 58.5574V58.5505ZM54.672 41.1592C53.8781 41.0488 52.9667 41.2144 51.9864 41.7115C51.006 42.2086 50.1015 42.9681 49.3007 43.8932L48.1477 41.8635C49.2869 40.5379 50.5986 39.447 51.9864 38.7428C53.3741 38.0386 54.6789 37.7901 55.825 37.9488L54.672 41.1523V41.1592ZM59.1734 49.6581L57.0194 49.3543C57.4474 48.1668 57.6891 46.931 57.6891 45.7435C57.6891 44.556 57.4474 43.5688 57.0194 42.8162L59.1734 40.317C59.781 41.394 60.1331 42.8093 60.1331 44.5008C60.1331 46.1854 59.7879 47.9597 59.1734 49.6581Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M51.1114 32.8219C44.3661 36.2601 38.905 45.6979 38.905 53.8999C38.905 62.1019 44.373 65.9682 51.1114 62.5369C57.8566 59.0987 63.3177 49.6609 63.3177 41.4589C63.3177 33.2569 57.8497 29.3906 51.1114 32.8219ZM46.0852 53.5065L43.9381 56.0057C43.3236 54.9287 42.9784 53.5133 42.9784 51.8287C42.9784 50.1441 43.3236 48.3698 43.9381 46.6714L46.0852 46.9821C45.6572 48.1696 45.4155 49.4054 45.4155 50.5929C45.4155 51.7804 45.6572 52.7607 46.0852 53.5202V53.5065ZM51.1114 57.5798C49.7236 58.284 48.4188 58.5325 47.2727 58.3737L48.4257 55.1703C49.2265 55.2807 50.131 55.1151 51.1114 54.618C52.0917 54.1209 53.0031 53.3614 53.797 52.4363L54.95 54.466C53.8108 55.7916 52.4991 56.8825 51.1114 57.5867V57.5798ZM53.797 40.1885C53.0031 40.0781 52.0917 40.2437 51.1114 40.7408C50.131 41.2379 49.2265 41.9974 48.4257 42.9225L47.2727 40.8928C48.4119 39.5672 49.7236 38.4763 51.1114 37.7721C52.4991 37.0679 53.8039 36.8193 54.95 36.9781L53.797 40.1816V40.1885ZM58.2984 48.6874L56.1444 48.3836C56.5724 47.1961 56.8141 45.9603 56.8141 44.7728C56.8141 43.5853 56.5724 42.5981 56.1444 41.8455L58.2984 39.3463C58.906 40.4233 59.2581 41.8386 59.2581 43.5301C59.2581 45.2147 58.9129 46.989 58.2984 48.6874Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
     </svg>
   );
diff --git a/packages/propel/src/empty-state/assets/horizontal-stack/template.tsx b/packages/propel/src/empty-state/assets/horizontal-stack/template.tsx
index 5d89e7c9b..13caf1042 100644
--- a/packages/propel/src/empty-state/assets/horizontal-stack/template.tsx
+++ b/packages/propel/src/empty-state/assets/horizontal-stack/template.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper";
 import type { TIllustrationAssetProps } from "../helper";
 
@@ -13,17 +19,17 @@ export function TemplateHorizontalStackIllustration({ className }: TIllustration
     >
       <g opacity="0.2">
         <path
-          d="M47.8783 2.45609C46.9629 1.98409 45.7871 2.02411 44.5088 2.68011L9.26704 20.8881C6.37099 22.3841 4.01943 26.4961 4.01943 30.0641V73.5441C4.01943 75.5361 4.74542 76.9361 5.88964 77.5361L2.37019 75.72C1.22598 75.128 0.5 73.7201 0.5 71.7281V28.2481C0.5 24.6721 2.85155 20.5681 5.74759 19.0721L40.9893 0.864095C42.2756 0.200096 43.4514 0.168121 44.3588 0.640121L47.8783 2.45609Z"
+          d="M47.6283 2.38547C46.7129 1.91347 45.5371 1.95349 44.2588 2.60949L9.01704 20.8175C6.12099 22.3135 3.76943 26.4255 3.76943 29.9935V73.4734C3.76943 75.4654 4.49542 76.8654 5.63964 77.4654L2.12019 75.6494C0.975979 75.0574 0.25 73.6494 0.25 71.6574V28.1774C0.25 24.6014 2.60155 20.4975 5.49759 19.0015L40.7393 0.793477C42.0256 0.129478 43.2014 0.0975032 44.1088 0.569503L47.6283 2.38547Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.5"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
         <path
-          d="M47.8784 2.45571C49.0226 3.04771 49.7486 4.4557 49.7486 6.4477V49.9277C49.7486 53.5037 47.397 57.6077 44.501 59.1037L9.25923 77.3117C7.97298 77.9757 6.79721 78.0077 5.88973 77.5357C4.74552 76.9437 4.01953 75.5357 4.01953 73.5437V30.0637C4.01953 26.4877 6.37109 22.3837 9.26713 20.8877L44.5089 2.67974C45.7951 2.01574 46.9709 1.98371 47.8784 2.45571Z"
+          d="M47.6284 2.3851C48.7726 2.97709 49.4986 4.38509 49.4986 6.37708V49.8571C49.4986 53.4331 47.147 57.537 44.251 59.033L9.00923 77.241C7.72298 77.905 6.54721 77.9371 5.63973 77.4651C4.49552 76.8731 3.76953 75.4651 3.76953 73.4731V29.9931C3.76953 26.4171 6.12109 22.3131 9.01713 20.8171L44.2589 2.60912C45.5451 1.94512 46.7209 1.9131 47.6284 2.3851Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.5"
           strokeLinecap="round"
           strokeLinejoin="round"
@@ -31,34 +37,34 @@ export function TemplateHorizontalStackIllustration({ className }: TIllustration
       </g>
       <g opacity="0.6">
         <path
-          d="M63.2587 9.39208C62.3433 8.92008 61.1675 8.96005 59.8891 9.61605L24.6474 27.824C21.7514 29.32 19.3998 33.432 19.3998 37V80.48C19.3998 82.472 20.1258 83.872 21.27 84.472L17.7506 82.656C16.6064 82.064 15.8804 80.656 15.8804 78.664V35.1841C15.8804 31.6081 18.2319 27.504 21.128 26.008L56.3697 7.80004C57.656 7.13604 58.8317 7.10406 59.7392 7.57606L63.2587 9.39208Z"
+          d="M63.0087 9.32146C62.0933 8.84946 60.9175 8.88944 59.6391 9.54544L24.3974 27.7534C21.5014 29.2494 19.1498 33.3614 19.1498 36.9294V80.4094C19.1498 82.4014 19.8758 83.8014 21.02 84.4014L17.5006 82.5854C16.3564 81.9934 15.6304 80.5854 15.6304 78.5934V35.1134C15.6304 31.5374 17.9819 27.4334 20.878 25.9374L56.1197 7.72942C57.406 7.06542 58.5817 7.03345 59.4892 7.50545L63.0087 9.32146Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.5"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
         <path
-          d="M63.2583 9.39247C64.4025 9.98447 65.1285 11.3925 65.1285 13.3845V56.8644C65.1285 60.4404 62.7769 64.5444 59.8809 66.0404L24.6391 84.2484C23.3529 84.9124 22.1771 84.9444 21.2696 84.4724C20.1254 83.8804 19.3994 82.4724 19.3994 80.4804V37.0004C19.3994 33.4244 21.751 29.3204 24.647 27.8244L59.8888 9.61644C61.175 8.95245 62.3508 8.92047 63.2583 9.39247Z"
+          d="M63.0083 9.32185C64.1525 9.91385 64.8785 11.3218 64.8785 13.3138V56.7938C64.8785 60.3698 62.5269 64.4738 59.6309 65.9698L24.3891 84.1777C23.1029 84.8417 21.9271 84.8738 21.0196 84.4018C19.8754 83.8098 19.1494 82.4018 19.1494 80.4098V36.9298C19.1494 33.3538 21.501 29.2498 24.397 27.7538L59.6388 9.54583C60.925 8.88183 62.1008 8.84985 63.0083 9.32185Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.5"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
       </g>
       <path
-        d="M78.6297 16.2803C77.7144 15.8083 76.5386 15.8483 75.2602 16.5043L40.0185 34.7123C37.1225 36.2083 34.7709 40.3203 34.7709 43.8883V87.3683C34.7709 89.3603 35.4969 90.7603 36.6411 91.3603L33.1217 89.5443C31.9774 88.9523 31.2515 87.5443 31.2515 85.5522V42.0723C31.2515 38.4963 33.603 34.3923 36.4991 32.8963L71.7408 14.6883C73.0271 14.0243 74.2028 13.9923 75.1103 14.4643L78.6297 16.2803Z"
+        d="M78.3797 16.2097C77.4644 15.7377 76.2886 15.7777 75.0102 16.4337L39.7685 34.6417C36.8725 36.1377 34.5209 40.2497 34.5209 43.8177V87.2976C34.5209 89.2896 35.2469 90.6896 36.3911 91.2896L32.8717 89.4737C31.7274 88.8817 31.0015 87.4736 31.0015 85.4816V42.0017C31.0015 38.4257 33.353 34.3217 36.2491 32.8257L71.4908 14.6177C72.7771 13.9537 73.9528 13.9217 74.8603 14.3937L78.3797 16.2097Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.5"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
       <path
-        d="M78.6298 16.28C79.7741 16.872 80.5 18.2799 80.5 20.2719V63.7519C80.5 67.3279 78.1485 71.4319 75.2524 72.9279L40.0107 91.1359C38.7244 91.7999 37.5487 91.8319 36.6412 91.3599C35.497 90.7679 34.771 89.3599 34.771 87.3679V43.8879C34.771 40.3119 37.1226 36.2079 40.0186 34.7119L75.2603 16.5039C76.5466 15.8399 77.7224 15.808 78.6298 16.28Z"
+        d="M78.3798 16.2093C79.5241 16.8013 80.25 18.2093 80.25 20.2013V63.6813C80.25 67.2573 77.8985 71.3613 75.0024 72.8573L39.7607 91.0653C38.4744 91.7293 37.2987 91.7613 36.3912 91.2893C35.247 90.6973 34.521 89.2893 34.521 87.2973V43.8173C34.521 40.2413 36.8726 36.1373 39.7686 34.6413L75.0103 16.4333C76.2966 15.7693 77.4724 15.7373 78.3798 16.2093Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.5"
         strokeLinecap="round"
         strokeLinejoin="round"
@@ -66,20 +72,20 @@ export function TemplateHorizontalStackIllustration({ className }: TIllustration
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M59.384 41.4397L55.6989 50.5676L63.0298 46.7837L59.384 41.4476V41.4397ZM59.313 38.2556C59.6523 38.0636 59.9838 37.9836 60.2836 38.0236C60.5835 38.0636 60.836 38.2156 61.0175 38.4636L61.0333 38.4797L65.2787 44.6877C65.4681 44.9437 65.5865 45.2956 65.6023 45.7036C65.6259 46.1276 65.547 46.6076 65.3892 47.0796C65.2235 47.5516 64.9788 48.0076 64.6711 48.3996C64.3633 48.7836 64.0161 49.0876 63.661 49.2716L55.1465 53.6716C54.7993 53.8636 54.4521 53.9436 54.1522 53.8956C53.8366 53.8476 53.5683 53.6716 53.3947 53.3756C53.2132 53.0876 53.1264 52.6956 53.1343 52.2476C53.1422 51.7996 53.2526 51.3196 53.442 50.8476L57.7111 40.2797C57.8768 39.8477 58.1057 39.4397 58.3819 39.0877C58.666 38.7197 58.9974 38.4317 59.3367 38.2397L59.313 38.2556Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M59.134 41.369L55.4489 50.497L62.7798 46.713L59.134 41.377V41.369ZM59.063 38.185C59.4023 37.993 59.7338 37.913 60.0336 37.953C60.3335 37.993 60.586 38.145 60.7675 38.393L60.7833 38.409L65.0287 44.617C65.2181 44.873 65.3365 45.225 65.3523 45.633C65.3759 46.057 65.297 46.537 65.1392 47.009C64.9735 47.481 64.7288 47.937 64.4211 48.329C64.1133 48.713 63.7661 49.017 63.411 49.201L54.8965 53.601C54.5493 53.793 54.2021 53.873 53.9022 53.825C53.5866 53.777 53.3183 53.601 53.1447 53.305C52.9632 53.017 52.8764 52.625 52.8843 52.177C52.8922 51.729 53.0026 51.249 53.192 50.777L57.4611 40.209C57.6268 39.777 57.8557 39.369 58.1319 39.017C58.416 38.649 58.7474 38.361 59.0867 38.169L59.063 38.185Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M47.8789 63.1118C47.8789 61.5438 48.9048 59.7438 50.1752 59.0878L55.92 56.1198C57.1904 55.4638 58.2163 56.1998 58.2163 57.7678V64.8558C58.2163 66.4237 57.1904 68.2238 55.92 68.8798L50.1752 71.8477C48.9048 72.5037 47.8789 71.7677 47.8789 70.1997V63.1118ZM55.92 58.9518L50.1752 61.9198V69.0077L55.92 66.0398V58.9518Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M47.6289 63.0411C47.6289 61.4731 48.6548 59.6732 49.9252 59.0172L55.67 56.0492C56.9404 55.3932 57.9663 56.1292 57.9663 57.6971V64.7851C57.9663 66.3531 56.9404 68.1532 55.67 68.8092L49.9252 71.7771C48.6548 72.4331 47.6289 71.6971 47.6289 70.1291V63.0411ZM55.67 58.8811L49.9252 61.8491V68.9371L55.67 65.9692V58.8811Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M65.6887 53.9033C64.1026 54.7193 62.8163 56.9753 62.8163 58.9353C62.8163 60.8953 64.1026 61.8153 65.6887 60.9993C67.2748 60.1833 68.5611 57.9273 68.5611 55.9673C68.5611 54.0073 67.2748 53.0873 65.6887 53.9033ZM60.52 60.1193C60.52 56.5993 62.8321 52.5433 65.6887 51.0633C68.5453 49.5913 70.8574 51.2473 70.8574 54.7753C70.8574 58.2953 68.5453 62.3513 65.6887 63.8313C62.8321 65.3033 60.52 63.6473 60.52 60.1193Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M65.4387 53.8327C63.8526 54.6487 62.5663 56.9047 62.5663 58.8647C62.5663 60.8247 63.8526 61.7447 65.4387 60.9287C67.0248 60.1127 68.3111 57.8567 68.3111 55.8967C68.3111 53.9367 67.0248 53.0167 65.4387 53.8327ZM60.27 60.0487C60.27 56.5287 62.5821 52.4727 65.4387 50.9927C68.2953 49.5207 70.6074 51.1767 70.6074 54.7047C70.6074 58.2247 68.2953 62.2807 65.4387 63.7607C62.5821 65.2327 60.27 63.5767 60.27 60.0487Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
     </svg>
   );
diff --git a/packages/propel/src/empty-state/assets/horizontal-stack/token.tsx b/packages/propel/src/empty-state/assets/horizontal-stack/token.tsx
index bc625e754..4b02f7af5 100644
--- a/packages/propel/src/empty-state/assets/horizontal-stack/token.tsx
+++ b/packages/propel/src/empty-state/assets/horizontal-stack/token.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper";
 import type { TIllustrationAssetProps } from "../helper";
 
@@ -13,17 +19,17 @@ export function TokenHorizontalStackIllustration({ className }: TIllustrationAss
     >
       <g opacity="0.2">
         <path
-          d="M47.8735 3.05272C46.9582 2.58718 45.7826 2.62663 44.5043 3.27365L9.26615 21.2323C6.3704 22.7078 4.01908 26.7634 4.01908 30.2826V73.167C4.01908 75.1317 4.74499 76.5126 5.88909 77.1043L2.37001 75.3132C1.22591 74.7293 0.5 73.3406 0.5 71.3759V28.4914C0.5 24.9644 2.85132 20.9166 5.74706 19.4411L40.9931 1.48252C42.2793 0.827616 43.4549 0.796055 44.3623 1.26159L47.8814 3.05272H47.8735Z"
+          d="M47.6235 2.3563C46.7082 1.89077 45.5326 1.93022 44.2543 2.57724L9.01615 20.5358C6.1204 22.0113 3.76908 26.067 3.76908 29.5862V72.4706C3.76908 74.4353 4.49499 75.8161 5.63909 76.4079L2.12001 74.6168C0.97591 74.0329 0.25 72.6442 0.25 70.6795V27.795C0.25 24.268 2.60132 20.2202 5.49706 18.7447L40.7431 0.78611C42.0293 0.131205 43.2049 0.0996434 44.1123 0.565178L47.6314 2.3563H47.6235Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.5"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
         <path
-          d="M47.8735 3.05224C49.0176 3.63613 49.7435 5.02484 49.7435 6.98956V49.874C49.7435 53.401 47.3922 57.4488 44.4965 58.9243L9.25828 76.8829C7.97216 77.5378 6.7965 77.5694 5.88911 77.1039C4.74501 76.52 4.0191 75.1313 4.0191 73.1665V30.2821C4.0191 26.7551 6.37042 22.7073 9.26617 21.2318L44.5044 3.27317C45.7905 2.61827 46.9661 2.5867 47.8735 3.05224Z"
+          d="M47.6235 2.35583C48.7676 2.93972 49.4935 4.32843 49.4935 6.29315V49.1776C49.4935 52.7046 47.1422 56.7524 44.2465 58.2279L9.00828 76.1865C7.72216 76.8414 6.5465 76.873 5.63911 76.4075C4.49501 75.8236 3.7691 74.4348 3.7691 72.4701V29.5857C3.7691 26.0587 6.12042 22.0109 9.01617 20.5354L44.2544 2.57676C45.5405 1.92185 46.7161 1.89029 47.6235 2.35583Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.5"
           strokeLinecap="round"
           strokeLinejoin="round"
@@ -31,49 +37,49 @@ export function TokenHorizontalStackIllustration({ className }: TIllustrationAss
       </g>
       <g opacity="0.6">
         <path
-          d="M63.2517 9.89232C62.3365 9.42678 61.1608 9.46623 59.8826 10.1132L24.6444 28.0719C21.7486 29.5474 19.3973 33.603 19.3973 37.1222V80.0066C19.3973 81.9713 20.1232 83.3522 21.2673 83.9439L17.7482 82.1528C16.6041 81.5689 15.8782 80.1802 15.8782 78.2155V35.331C15.8782 31.804 18.2296 27.7562 21.1253 26.2807L56.3635 8.32212C57.6496 7.66722 58.8253 7.63565 59.7326 8.10119L63.2517 9.89232Z"
+          d="M63.0017 9.1959C62.0865 8.73037 60.9108 8.76982 59.6326 9.41684L24.3944 27.3754C21.4986 28.851 19.1473 32.9066 19.1473 36.4258V79.3102C19.1473 81.2749 19.8732 82.6558 21.0173 83.2475L17.4982 81.4564C16.3541 80.8725 15.6282 79.4838 15.6282 77.5191V34.6346C15.6282 31.1076 17.9796 27.0598 20.8753 25.5843L56.1135 7.62571C57.3996 6.9708 58.5753 6.93924 59.4826 7.40478L63.0017 9.1959Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.5"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
         <path
-          d="M63.2518 9.89184C64.3958 10.4757 65.1218 11.8644 65.1218 13.8292V56.7136C65.1218 60.2406 62.7704 64.2884 59.8747 65.7639L24.6365 83.7225C23.3504 84.3774 22.1747 84.409 21.2673 83.9435C20.1232 83.3596 19.3973 81.9709 19.3973 80.0061V37.1217C19.3973 33.5947 21.7487 29.5469 24.6444 28.0714L59.8826 10.1128C61.1687 9.45787 62.3444 9.4263 63.2518 9.89184Z"
+          d="M63.0018 9.19543C64.1458 9.77932 64.8718 11.168 64.8718 13.1327V56.0172C64.8718 59.5442 62.5204 63.592 59.6247 65.0675L24.3865 83.0261C23.1004 83.681 21.9247 83.7126 21.0173 83.2471C19.8732 82.6632 19.1473 81.2744 19.1473 79.3097V36.4253C19.1473 32.8983 21.4987 28.8505 24.3944 27.375L59.6326 9.41636C60.9187 8.76145 62.0944 8.72989 63.0018 9.19543Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.5"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
       </g>
       <path
-        d="M78.63 16.6875C77.7147 16.2219 76.539 16.2614 75.2608 16.9084L40.0226 34.867C37.1269 36.3425 34.7756 40.3982 34.7756 43.9173V86.8018C34.7756 88.7665 35.5015 90.1473 36.6456 90.7391L33.1265 88.948C31.9824 88.3641 31.2565 86.9754 31.2565 85.0107V42.1262C31.2565 38.5992 33.6078 34.5514 36.5035 33.0759L71.7417 15.1173C73.0278 14.4624 74.2035 14.4308 75.1109 14.8964L78.63 16.6875Z"
+        d="M78.38 15.9911C77.4647 15.5255 76.289 15.565 75.0108 16.212L39.7726 34.1706C36.8769 35.6461 34.5256 39.7018 34.5256 43.2209V86.1054C34.5256 88.0701 35.2515 89.4509 36.3956 90.0427L32.8765 88.2516C31.7324 87.6677 31.0065 86.279 31.0065 84.3142V41.4298C31.0065 37.9028 33.3578 33.855 36.2535 32.3795L71.4917 14.4209C72.7778 13.766 73.9535 13.7344 74.8609 14.1999L78.38 15.9911Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.5"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
       <path
-        d="M78.63 16.6869C79.7741 17.2708 80.5 18.6595 80.5 20.6242V63.5087C80.5 67.0357 78.1487 71.0835 75.2529 72.559L40.0147 90.5176C38.7286 91.1725 37.553 91.204 36.6456 90.7385C35.5015 90.1546 34.7756 88.7659 34.7756 86.8012V43.9167C34.7756 40.3897 37.1269 36.3419 40.0226 34.8664L75.2608 16.9078C76.5469 16.2529 77.7226 16.2213 78.63 16.6869Z"
+        d="M78.38 15.9905C79.5241 16.5744 80.25 17.9631 80.25 19.9278V62.8122C80.25 66.3393 77.8987 70.3871 75.0029 71.8626L39.7647 89.8212C38.4786 90.4761 37.303 90.5076 36.3956 90.0421C35.2515 89.4582 34.5256 88.0695 34.5256 86.1048V43.2203C34.5256 39.6933 36.8769 35.6455 39.7726 34.17L75.0108 16.2114C76.2969 15.5565 77.4726 15.5249 78.38 15.9905Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.5"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
       <path
-        d="M53.4204 72.4882L50.43 74.011C49.3332 74.5712 48.4337 73.94 48.4337 72.5986V69.9632C48.4337 68.9848 48.7493 67.9117 49.3095 66.9412L55.6849 55.934C55.322 54.3954 55.3851 52.5254 55.8664 50.5922C57.2235 45.1636 61.5001 40.4688 65.3979 40.1374C67.2837 39.9796 68.8065 40.8476 69.6745 42.5992C70.5424 44.343 70.6608 46.7575 70.0059 49.385C68.7197 54.5374 64.814 59.0192 61.0898 59.753L60.6953 60.4237C60.1272 61.4021 59.3776 62.1596 58.5807 62.5699L58.4071 62.6567V63.8718C58.4071 65.2132 57.5155 66.7597 56.4108 67.3199L55.4166 67.8249V69.04C55.4166 70.3814 54.525 71.9279 53.4204 72.4882ZM62.944 43.3094C60.6716 44.4693 58.5412 47.2782 57.7601 50.4344C57.3577 52.0598 57.3577 53.6143 57.7601 54.8294C57.8863 55.2081 57.7916 55.7368 57.5234 56.2102L50.7219 67.9433C50.5325 68.2668 50.43 68.6297 50.43 68.9532V71.5886L53.4204 70.0658V68.8507C53.4204 67.5093 54.312 65.9628 55.4166 65.4026L56.4108 64.8976V63.6824C56.4108 62.3411 57.3024 60.7945 58.4071 60.2343L58.5807 60.1475C58.8411 60.0134 59.1014 59.753 59.2829 59.4295L60.0956 58.025C60.3639 57.5595 60.7663 57.2439 61.1292 57.2123C63.9855 56.9677 67.118 53.5275 68.1122 49.5428C68.5935 47.6096 68.5067 45.8422 67.8676 44.5639C67.2285 43.2857 66.1159 42.6387 64.7351 42.7649C64.1433 42.8123 63.5358 43.0016 62.9361 43.3094H62.944Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M53.1704 71.7917L50.18 73.3146C49.0832 73.8748 48.1837 73.2436 48.1837 71.9022V69.2668C48.1837 68.2884 48.4993 67.2153 49.0595 66.2448L55.4349 55.2376C55.072 53.699 55.1351 51.829 55.6164 49.8958C56.9735 44.4672 61.2501 39.7724 65.1479 39.441C67.0337 39.2832 68.5565 40.1511 69.4245 41.9028C70.2924 43.6466 70.4108 46.0611 69.7559 48.6886C68.4697 53.841 64.564 58.3228 60.8398 59.0566L60.4453 59.7273C59.8772 60.7057 59.1276 61.4632 58.3307 61.8735L58.1571 61.9603V63.1754C58.1571 64.5168 57.2655 66.0633 56.1608 66.6235L55.1666 67.1285V68.3436C55.1666 69.685 54.275 71.2315 53.1704 71.7917ZM62.694 42.613C60.4216 43.7728 58.2912 46.5818 57.5101 49.738C57.1077 51.3634 57.1077 52.9178 57.5101 54.133C57.6363 54.5117 57.5416 55.0404 57.2734 55.5138L50.4719 67.2469C50.2825 67.5704 50.18 67.9333 50.18 68.2568V70.8922L53.1704 69.3694V68.1543C53.1704 66.8129 54.062 65.2664 55.1666 64.7061L56.1608 64.2012V62.986C56.1608 61.6447 57.0524 60.0981 58.1571 59.5379L58.3307 59.4511C58.5911 59.317 58.8514 59.0566 59.0329 58.7331L59.8456 57.3286C60.1139 56.8631 60.5163 56.5474 60.8792 56.5159C63.7355 56.2713 66.868 52.8311 67.8622 48.8464C68.3435 46.9132 68.2567 45.1458 67.6176 43.8675C66.9785 42.5893 65.8659 41.9423 64.4851 42.0685C63.8933 42.1159 63.2858 42.3052 62.6861 42.613H62.694Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
-        d="M63.8988 47.7273C64.1749 47.5853 64.3959 47.7431 64.3959 48.0824C64.3959 48.4217 64.1749 48.8004 63.8988 48.9424C63.6226 49.0845 63.4017 48.9267 63.4017 48.5874C63.4017 48.2481 63.6226 47.8693 63.8988 47.7273Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M63.6488 47.0309C63.9249 46.8889 64.1459 47.0467 64.1459 47.386C64.1459 47.7253 63.9249 48.104 63.6488 48.246C63.3726 48.3881 63.1517 48.2303 63.1517 47.891C63.1517 47.5517 63.3726 47.1729 63.6488 47.0309Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
-        d="M63.8987 50.157C63.0702 50.5751 62.3995 50.1017 62.3995 49.0996C62.3995 48.0976 63.0702 46.9377 63.8987 46.5195C64.7272 46.1013 65.3979 46.5747 65.3979 47.5768C65.3979 48.5789 64.7272 49.7388 63.8987 50.157ZM63.8987 47.7267C63.6225 47.8687 63.4016 48.2554 63.4016 48.5868C63.4016 48.9182 63.6225 49.076 63.8987 48.9418C64.1749 48.8077 64.3958 48.4132 64.3958 48.0818C64.3958 47.7504 64.1749 47.5926 63.8987 47.7267Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M63.6487 49.4605C62.8202 49.8787 62.1495 49.4053 62.1495 48.4032C62.1495 47.4011 62.8202 46.2413 63.6487 45.8231C64.4772 45.4049 65.1479 45.8783 65.1479 46.8804C65.1479 47.8825 64.4772 49.0424 63.6487 49.4605ZM63.6487 47.0303C63.3725 47.1723 63.1516 47.559 63.1516 47.8904C63.1516 48.2217 63.3725 48.3796 63.6487 48.2454C63.9249 48.1113 64.1458 47.7168 64.1458 47.3854C64.1458 47.054 63.9249 46.8962 63.6487 47.0303Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
     </svg>
   );
diff --git a/packages/propel/src/empty-state/assets/horizontal-stack/unknown.tsx b/packages/propel/src/empty-state/assets/horizontal-stack/unknown.tsx
index caf9a0c3f..58816495e 100644
--- a/packages/propel/src/empty-state/assets/horizontal-stack/unknown.tsx
+++ b/packages/propel/src/empty-state/assets/horizontal-stack/unknown.tsx
@@ -1,79 +1,85 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper";
 import type { TIllustrationAssetProps } from "../helper";
 
 export function UnknownHorizontalStackIllustration({ className }: TIllustrationAssetProps) {
   return (
     <svg
-      width="101"
-      height="114"
-      viewBox="0 0 101 114"
+      width="71"
+      height="80"
+      viewBox="0 0 71 80"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       className={className}
     >
       <g opacity="0.2">
         <path
-          d="M59.7226 3.31093C58.5784 2.72896 57.1087 2.77828 55.5108 3.58712L11.4588 26.0373C7.83873 27.8818 4.8993 32.9518 4.8993 37.3511V90.9612C4.8993 93.4173 5.80678 95.1435 7.23704 95.8833L2.83776 93.6442C1.4075 92.9143 0.5 91.1782 0.5 88.7221V35.112C0.5 30.7029 3.43946 25.6427 7.05949 23.7982L51.1115 1.34802C52.7193 0.529321 54.189 0.489863 55.3234 1.07183L59.7226 3.31093Z"
+          d="M41.6309 2.01885C40.8299 1.61147 39.8011 1.64599 38.6826 2.21218L7.84613 17.9273C5.3121 19.2185 3.2545 22.7675 3.2545 25.847V63.3741C3.2545 65.0934 3.88973 66.3017 4.89092 66.8196L1.81142 65.2522C0.810239 64.7412 0.174988 63.526 0.174988 61.8067V24.2796C0.174988 21.1932 2.23261 17.6511 4.76664 16.3599L35.6031 0.644812C36.7285 0.071721 37.7573 0.0441004 38.5514 0.451478L41.6309 2.01885Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-          strokeWidth="0.5"
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.35"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
         <path
-          d="M59.7228 3.31097C61.153 4.04089 62.0605 5.77694 62.0605 8.23304V61.8431C62.0605 66.2523 59.1211 71.3124 55.501 73.157L11.449 95.6071C9.84119 96.4258 8.37149 96.4653 7.23714 95.8833C5.80688 95.1534 4.89941 93.4174 4.89941 90.9613V37.3512C4.89941 32.942 7.83884 27.8819 11.4589 26.0373L55.5109 3.58716C57.1187 2.76845 58.5884 2.729 59.7228 3.31097Z"
+          d="M41.6309 2.01984C42.6321 2.53079 43.2674 3.74602 43.2674 5.46529V42.9924C43.2674 46.0788 41.2098 49.6209 38.6757 50.9121L7.83929 66.6272C6.71383 67.2003 5.68503 67.2279 4.89099 66.8205C3.88981 66.3096 3.25458 65.0944 3.25458 63.3751V25.848C3.25458 22.7616 5.31218 19.2195 7.84621 17.9283L38.6826 2.21317C39.8081 1.64008 40.8369 1.61246 41.6309 2.01984Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-          strokeWidth="0.5"
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.35"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
       </g>
       <g opacity="0.6">
         <path
-          d="M78.9375 11.853C77.7933 11.2711 76.3235 11.3204 74.7256 12.1292L30.6736 34.5794C27.0536 36.4239 24.1141 41.4939 24.1141 45.8932V99.5033C24.1141 101.959 25.0216 103.686 26.4519 104.425L22.0526 102.186C20.6223 101.456 19.7148 99.7203 19.7148 97.2642V43.6541C19.7148 39.245 22.6543 34.1848 26.2743 32.3403L70.3263 9.89014C71.9341 9.07144 73.4039 9.03198 74.5382 9.61395L78.9375 11.853Z"
+          d="M55.0813 7.99932C54.2804 7.59194 53.2516 7.62646 52.133 8.19265L21.2966 23.9078C18.7625 25.1989 16.7049 28.748 16.7049 31.8275V69.3546C16.7049 71.0738 17.3402 72.2822 18.3414 72.8L15.2618 71.2327C14.2607 70.7217 13.6254 69.5065 13.6254 67.7872V30.2601C13.6254 27.1737 15.683 23.6316 18.2171 22.3404L49.0535 6.62528C50.179 6.05219 51.2078 6.02457 52.0018 6.43195L55.0813 7.99932Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-          strokeWidth="0.5"
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.35"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
         <path
-          d="M78.9376 11.8531C80.3679 12.583 81.2754 14.319 81.2754 16.7752V70.3852C81.2754 74.7944 78.3359 79.8546 74.7159 81.6991L30.6639 104.149C29.0561 104.968 27.5864 105.007 26.452 104.425C25.0218 103.696 24.1143 101.959 24.1143 99.5034V45.8933C24.1143 41.4841 27.0537 36.424 30.6738 34.5794L74.7257 12.1293C76.3335 11.3106 77.8033 11.2711 78.9376 11.8531Z"
+          d="M55.0813 8.00031C56.0825 8.51126 56.7177 9.72649 56.7177 11.4458V48.9729C56.7177 52.0593 54.6601 55.6014 52.1261 56.8926L21.2896 72.6077C20.1642 73.1808 19.1354 73.2084 18.3413 72.801C17.3401 72.2901 16.7049 71.0748 16.7049 69.3556V31.8285C16.7049 28.7421 18.7625 25.1999 21.2965 23.9088L52.133 8.19364C53.2584 7.62055 54.2872 7.59293 55.0813 8.00031Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-          strokeWidth="0.5"
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.35"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
       </g>
       <path
-        d="M98.1621 20.3557C97.0179 19.7738 95.5482 19.8231 93.9502 20.6319L49.8982 43.0821C46.2782 44.9266 43.3388 49.9966 43.3388 54.3959V108.006C43.3388 110.462 44.2462 112.188 45.6765 112.928L41.2772 110.689C39.847 109.959 38.9395 108.223 38.9395 105.767V52.1568C38.9395 47.7477 41.8789 42.6875 45.4989 40.843L89.5509 18.3928C91.1587 17.5741 92.6285 17.5347 93.7628 18.1166L98.1621 20.3557Z"
+        d="M68.5386 13.9505C67.7376 13.5431 66.7089 13.5776 65.5903 14.1438L34.7538 29.8589C32.2198 31.1501 30.1622 34.6991 30.1622 37.7786V75.3057C30.1622 77.025 30.7974 78.2333 31.7986 78.7512L28.7191 77.1838C27.718 76.6729 27.0827 75.4576 27.0827 73.7384V36.2113C27.0827 33.1249 29.1403 29.5828 31.6744 28.2916L62.5108 12.5765C63.6362 12.0034 64.6651 11.9757 65.4591 12.3831L68.5386 13.9505Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-        strokeWidth="0.5"
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.35"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
       <path
-        d="M98.1622 20.3558C99.5925 21.0857 100.5 22.8217 100.5 25.2778V78.8879C100.5 83.2971 97.5605 88.3572 93.9405 90.2018L49.8885 112.652C48.2806 113.471 46.8109 113.51 45.6766 112.928C44.2463 112.198 43.3389 110.462 43.3389 108.006V54.396C43.3389 49.9868 46.2783 44.9267 49.8983 43.0821L93.9503 20.632C95.5582 19.8133 97.0279 19.7738 98.1622 20.3558Z"
+        d="M68.5386 13.9515C69.5398 14.4624 70.175 15.6777 70.175 17.3969V54.924C70.175 58.0104 68.1174 61.5526 65.5834 62.8437L34.7469 78.5589C33.6215 79.132 32.5927 79.1596 31.7986 78.7522C30.7975 78.2412 30.1622 77.026 30.1622 75.3067V37.7796C30.1622 34.6932 32.2198 31.1511 34.7539 29.8599L65.5903 14.1448C66.7158 13.5717 67.7446 13.5441 68.5386 13.9515Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-        strokeWidth="0.5"
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.35"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
       <path
-        d="M73.3248 76.3332C72.6146 76.6982 72.0425 76.2937 72.0425 75.4356C72.0425 74.5774 72.6047 73.591 73.3149 73.2261H73.3248C74.035 72.8611 74.6071 73.2655 74.6071 74.1237C74.6071 74.9818 74.035 75.9682 73.3248 76.3332Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M51.1524 53.1343C50.6553 53.3898 50.2548 53.1067 50.2548 52.506C50.2548 51.9053 50.6484 51.2148 51.1455 50.9593H51.1524C51.6496 50.7038 52.0501 50.9869 52.0501 51.5876C52.0501 52.1884 51.6496 52.8788 51.1524 53.1343Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
-        d="M80.9988 80.2194L65.6407 88.0415C63.52 89.1166 61.8037 87.9034 61.8037 85.3289V60.4128C61.8037 57.8383 63.5299 54.8594 65.6407 53.7843L77.1617 47.9153C77.4971 47.7377 77.8226 47.7377 78.0692 47.9153L84.4708 52.4428C84.7076 52.6105 84.8457 52.936 84.8457 53.3503V73.5909C84.8457 76.1654 83.1195 79.1443 81.0087 80.2194H80.9988ZM65.6407 56.8914C64.9305 57.2465 64.3584 58.2427 64.3584 59.1009V84.017C64.3584 84.8752 64.9305 85.2796 65.6407 84.9245L80.9988 77.1024C81.709 76.7473 82.2811 75.7511 82.2811 74.8929V55.2934L76.6291 51.2986L65.6407 56.9012V56.8914Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M56.5244 55.8546L45.7738 61.33C44.2892 62.0826 43.0878 61.2333 43.0878 59.4312V41.9899C43.0878 40.1878 44.2961 38.1026 45.7738 37.35L53.8384 33.2417C54.0732 33.1174 54.3011 33.1174 54.4737 33.2417L58.9548 36.4109C59.1206 36.5283 59.2172 36.7562 59.2172 37.0461V51.2146C59.2172 53.0167 58.0089 55.102 56.5313 55.8546H56.5244ZM45.7738 39.5249C45.2766 39.7735 44.8761 40.4709 44.8761 41.0716V58.5129C44.8761 59.1136 45.2766 59.3967 45.7738 59.1481L56.5244 53.6727C57.0215 53.4241 57.422 52.7267 57.422 52.126V38.4064L53.4656 35.61L45.7738 39.5318V39.5249Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
-        d="M73.2167 70.1681C72.6841 70.4443 72.181 70.2865 72.0035 69.7242C71.7766 69.0239 72.1416 67.9586 72.8123 67.347C73.5817 66.6368 75.7813 64.2498 75.7813 62.642C75.7813 61.3597 75.0909 60.541 74.0946 60.61C73.4535 60.6593 72.7531 61.044 72.1416 61.7148C71.5201 62.3855 71.0565 63.2437 70.8198 64.1511C70.5732 65.0882 69.8433 65.8675 69.1824 65.9168C68.5215 65.9661 68.1763 65.246 68.413 64.309C69.3797 60.5903 72.3191 57.4141 74.9725 57.2366C76.9748 57.0985 78.3262 58.7457 78.3459 61.3301C78.3459 65.463 74.1143 69.448 73.631 69.8919C73.4929 70.0201 73.3647 70.1089 73.2266 70.178L73.2167 70.1681Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M51.0766 48.8175C50.7037 49.0108 50.3516 48.9003 50.2273 48.5068C50.0685 48.0165 50.324 47.2708 50.7935 46.8427C51.3321 46.3456 52.8718 44.6747 52.8718 43.5492C52.8718 42.6516 52.3885 42.0785 51.6911 42.1268C51.2423 42.1613 50.7521 42.4306 50.324 42.9001C49.889 43.3697 49.5645 43.9704 49.3987 44.6056C49.2261 45.2616 48.7152 45.807 48.2526 45.8416C47.7899 45.8761 47.5483 45.372 47.714 44.7161C48.3907 42.113 50.4483 39.8897 52.3056 39.7654C53.7073 39.6687 54.6532 40.8218 54.667 42.6309C54.667 45.5239 51.7049 48.3134 51.3666 48.6242C51.2699 48.7139 51.1802 48.7761 51.0835 48.8244L51.0766 48.8175Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
     </svg>
   );
diff --git a/packages/propel/src/empty-state/assets/horizontal-stack/update.tsx b/packages/propel/src/empty-state/assets/horizontal-stack/update.tsx
index bcdc70bcf..4dc144040 100644
--- a/packages/propel/src/empty-state/assets/horizontal-stack/update.tsx
+++ b/packages/propel/src/empty-state/assets/horizontal-stack/update.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper";
 import type { TIllustrationAssetProps } from "../helper";
 
diff --git a/packages/propel/src/empty-state/assets/horizontal-stack/webhook.tsx b/packages/propel/src/empty-state/assets/horizontal-stack/webhook.tsx
index 97ba93593..52ae90240 100644
--- a/packages/propel/src/empty-state/assets/horizontal-stack/webhook.tsx
+++ b/packages/propel/src/empty-state/assets/horizontal-stack/webhook.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper";
 import type { TIllustrationAssetProps } from "../helper";
 
@@ -13,17 +19,17 @@ export function WebhookHorizontalStackIllustration({ className }: TIllustrationA
     >
       <g opacity="0.2">
         <path
-          d="M47.8736 2.5768C46.9583 2.11126 45.7826 2.15093 44.5044 2.79794L9.26615 20.7562C6.3704 22.2317 4.01906 26.2876 4.01906 29.8067V72.6905C4.01906 74.6552 4.74496 76.0362 5.88906 76.628L2.37 74.8369C1.22591 74.253 0.5 72.8641 0.5 70.8994V28.0155C0.5 24.4885 2.85134 20.4406 5.74709 18.9651L40.9853 1.00681C42.2715 0.351913 43.447 0.320136 44.3544 0.785668L47.8736 2.5768Z"
+          d="M47.6236 2.35609C46.7083 1.89056 45.5326 1.93023 44.2544 2.57724L9.01615 20.5355C6.1204 22.011 3.76906 26.0669 3.76906 29.586V72.4698C3.76906 74.4345 4.49496 75.8155 5.63906 76.4073L2.12 74.6161C0.975907 74.0323 0.25 72.6434 0.25 70.6787V27.7948C0.25 24.2678 2.60134 20.2199 5.49709 18.7444L40.7353 0.786111C42.0215 0.13121 43.197 0.0994328 44.1044 0.564965L47.6236 2.35609Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.5"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
         <path
-          d="M47.8736 2.57668C49.0177 3.16057 49.7436 4.54946 49.7436 6.51416V49.398C49.7436 52.925 47.3922 56.9729 44.4965 58.4484L9.25823 76.4071C7.97211 77.062 6.79644 77.0934 5.88905 76.6279C4.74495 76.044 4.01904 74.6551 4.01904 72.6904V29.8065C4.01904 26.2796 6.37038 22.2316 9.26613 20.7561L44.5044 2.79783C45.7905 2.14293 46.9662 2.11115 47.8736 2.57668Z"
+          d="M47.6236 2.35598C48.7677 2.93987 49.4936 4.32876 49.4936 6.29346V49.1773C49.4936 52.7043 47.1422 56.7522 44.2465 58.2277L9.00823 76.1864C7.72211 76.8413 6.54644 76.8727 5.63905 76.4072C4.49495 75.8233 3.76904 74.4344 3.76904 72.4697V29.5858C3.76904 26.0588 6.12038 22.0109 9.01613 20.5354L44.2544 2.57713C45.5405 1.92223 46.7162 1.89045 47.6236 2.35598Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.5"
           strokeLinecap="round"
           strokeLinejoin="round"
@@ -31,41 +37,41 @@ export function WebhookHorizontalStackIllustration({ className }: TIllustrationA
       </g>
       <g opacity="0.6">
         <path
-          d="M63.2515 9.37172C62.3362 8.90619 61.1606 8.94585 59.8823 9.59286L24.6441 27.5512C21.7483 29.0267 19.397 33.0825 19.397 36.6016V79.4858C19.397 81.4505 20.1229 82.8311 21.267 83.4229L17.7479 81.6318C16.6038 81.0479 15.8779 79.6594 15.8779 77.6947V34.8105C15.8779 31.2835 18.2293 27.2355 21.125 25.76L56.3633 7.80174C57.6494 7.14683 58.825 7.11506 59.7324 7.58059L63.2515 9.37172Z"
+          d="M63.0015 9.15102C62.0862 8.68548 60.9106 8.72515 59.6323 9.37216L24.3941 27.3305C21.4983 28.806 19.147 32.8618 19.147 36.3809V79.2651C19.147 81.2298 19.8729 82.6104 21.017 83.2022L17.4979 81.4111C16.3538 80.8272 15.6279 79.4387 15.6279 77.474V34.5898C15.6279 31.0628 17.9793 27.0148 20.875 25.5393L56.1133 7.58103C57.3994 6.92613 58.575 6.89435 59.4824 7.35989L63.0015 9.15102Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.5"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
         <path
-          d="M63.252 9.36965C64.3961 9.95354 65.122 11.3424 65.122 13.3071V56.1914C65.122 59.7184 62.7707 63.7659 59.8749 65.2414L24.6367 83.2001C23.3505 83.855 22.1749 83.8864 21.2675 83.4208C20.1234 82.837 19.3975 81.4484 19.3975 79.4837V36.5995C19.3975 33.0725 21.7488 29.0246 24.6446 27.5491L59.8828 9.5908C61.1689 8.9359 62.3446 8.90412 63.252 9.36965Z"
+          d="M63.002 9.14895C64.1461 9.73284 64.872 11.1217 64.872 13.0864V55.9707C64.872 59.4977 62.5207 63.5452 59.6249 65.0207L24.3867 82.9794C23.1005 83.6343 21.9249 83.6657 21.0175 83.2001C19.8734 82.6162 19.1475 81.2277 19.1475 79.263V36.3788C19.1475 32.8518 21.4988 28.8039 24.3946 27.3284L59.6328 9.37009C60.9189 8.71519 62.0946 8.68342 63.002 9.14895Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.5"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
       </g>
       <path
-        d="M78.6304 16.1648C77.7151 15.6993 76.5395 15.7386 75.2612 16.3856L40.023 34.3443C37.1272 35.8198 34.7759 39.8752 34.7759 43.3943V86.2786C34.7759 88.2433 35.5019 89.6243 36.646 90.216L33.1268 88.4249C31.9827 87.841 31.2568 86.4521 31.2568 84.4874V41.6032C31.2568 38.0762 33.6082 34.0287 36.5039 32.5532L71.7422 14.5945C73.0283 13.9396 74.204 13.9082 75.1114 14.3737L78.6304 16.1648Z"
+        d="M78.3804 15.9441C77.4651 15.4786 76.2895 15.5179 75.0112 16.1649L39.773 34.1236C36.8772 35.5991 34.5259 39.6545 34.5259 43.1736V86.0579C34.5259 88.0226 35.2519 89.4035 36.396 89.9953L32.8768 88.2042C31.7327 87.6203 31.0068 86.2314 31.0068 84.2667V41.3825C31.0068 37.8555 33.3582 33.808 36.2539 32.3325L71.4922 14.3738C72.7783 13.7189 73.954 13.6875 74.8614 14.153L78.3804 15.9441Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.5"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
       <path
-        d="M78.6299 16.1647C79.774 16.7486 80.4999 18.1371 80.4999 20.1018V62.9861C80.4999 66.5131 78.1486 70.561 75.2528 72.0365L40.0146 89.9948C38.7285 90.6497 37.5529 90.6814 36.6455 90.2159C35.5014 89.632 34.7754 88.2431 34.7754 86.2784V43.3942C34.7754 39.8672 37.1267 35.8197 40.0225 34.3442L75.2607 16.3855C76.5469 15.7306 77.7225 15.6992 78.6299 16.1647Z"
+        d="M78.3799 15.944C79.524 16.5279 80.2499 17.9164 80.2499 19.8811V62.7654C80.2499 66.2924 77.8986 70.3403 75.0028 71.8158L39.7646 89.7741C38.4785 90.429 37.3029 90.4607 36.3955 89.9952C35.2514 89.4113 34.5254 88.0224 34.5254 86.0577V43.1735C34.5254 39.6465 36.8767 35.599 39.7725 34.1235L75.0107 16.1648C76.2969 15.5099 77.4725 15.4785 78.3799 15.944Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.5"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
       <path
-        d="M58.4468 44.0802C58.9439 43.4963 59.5594 43.37 59.875 43.7724L59.9302 43.8595L63.3546 49.7375L63.4098 49.8165C63.7175 50.1953 64.4672 50.1637 65.5324 49.6193L65.8006 49.4929C67.1499 48.8853 68.4359 48.9249 69.3986 49.6035C70.4243 50.3294 71.0003 51.7261 71.0003 53.4936C71.0003 55.261 70.4243 57.2415 69.3986 59.0168C68.3728 60.7843 66.9842 62.1964 65.5324 62.9381C64.9248 63.2458 64.4356 62.8987 64.4356 62.1649C64.4356 61.4311 64.9248 60.5867 65.5324 60.279C66.4003 59.8371 67.2366 58.9929 67.8521 57.9277C68.4675 56.8625 68.8147 55.6712 68.8147 54.6139C68.8147 53.5566 68.4675 52.7203 67.8521 52.2784C67.3155 51.8997 66.6054 51.8524 65.8558 52.1443L65.5324 52.2942C64.3015 52.9254 62.4393 53.4934 61.5161 52.1363L61.4293 52.0022L58.005 46.1237L57.9576 46.0212C57.7445 45.5083 57.9419 44.672 58.439 44.096L58.4468 44.0802ZM47.7948 61.8335C48.1341 61.1234 48.7575 60.658 49.2388 60.7764C49.7517 60.9026 49.9095 61.6363 49.5938 62.4253L49.4913 62.7016C49.2624 63.3407 49.1441 64.0111 49.1362 64.6345C49.1362 65.5182 49.3808 66.2602 49.8306 66.7257C50.2803 67.1992 50.9116 67.3725 51.6217 67.2304C52.3318 67.0805 53.0814 66.6231 53.7521 65.9209C54.4227 65.2187 54.9672 64.3192 55.3143 63.3565V63.3326C55.9298 61.6757 57.1449 59.1902 58.9913 58.2513L65.5403 54.9137L65.6506 54.8663C66.203 54.6532 66.6291 55.0005 66.6291 55.6869C66.6291 56.3734 66.1951 57.1625 65.6506 57.5096L65.5403 57.5728L58.9913 60.9104C58.4389 61.1945 57.7841 62.1569 57.2396 63.6482C56.6636 65.242 55.7562 66.7413 54.6437 67.9012C53.5311 69.069 52.2766 69.8424 51.1009 70.0791C49.9174 70.3237 48.8679 70.0239 48.1184 69.2427C47.3688 68.4537 46.9585 67.2228 46.9585 65.7394V65.7236L46.9743 65.2817C47.0374 64.2402 47.2899 63.1039 47.7396 61.9834L47.8027 61.8413L47.7948 61.8335ZM58.2732 38.7384C58.9991 38.2492 59.7329 37.9335 60.4351 37.8072C61.1374 37.681 61.8002 37.752 62.3762 38.0045C62.8812 38.2254 63.3073 38.5886 63.6466 39.0778L63.7806 39.2909L63.8675 39.4959C64.0174 40.0087 63.8123 40.7742 63.3546 41.3186C62.8891 41.863 62.3288 42.0129 61.9974 41.7131L61.8712 41.5551L61.6977 41.3028C61.5083 41.074 61.2873 40.8924 61.0269 40.7819C60.6797 40.632 60.2853 40.5847 59.8671 40.6636C59.441 40.7425 59.007 40.9242 58.573 41.2161C58.1391 41.508 57.7209 41.8944 57.3422 42.36C56.9635 42.8255 56.6321 43.3543 56.3717 43.9145C56.1113 44.4748 55.9219 45.0586 55.8193 45.6267C55.7167 46.1948 55.701 46.7393 55.772 47.2364C55.843 47.7256 55.9929 48.1436 56.2217 48.475C56.5926 48.9879 56.9476 49.6667 57.1055 50.5031C57.2711 51.3474 57.2554 52.4283 56.8056 53.6592L53.3812 63.0961L53.326 63.246C53.0103 63.964 52.4028 64.4608 51.9057 64.3898C51.3771 64.3109 51.1798 63.6008 51.4638 62.8118L54.8883 53.3749L54.9277 53.2331C55.0224 52.9175 55.0461 52.5543 54.9672 52.1598C54.8962 51.8126 54.7621 51.4735 54.5806 51.1658L54.3833 50.866C54.3833 50.866 54.3833 50.8502 54.3754 50.8502C53.9888 50.2979 53.7284 49.5876 53.6101 48.767C53.4917 47.9465 53.5233 47.0391 53.6969 46.0844C53.8705 45.1297 54.186 44.1591 54.62 43.228C55.0539 42.2969 55.6063 41.4134 56.2296 40.6401C56.8609 39.8669 57.5552 39.2197 58.2811 38.7384H58.2732Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M58.1968 43.8595C58.6939 43.2756 59.3094 43.1493 59.625 43.5517L59.6802 43.6388L63.1046 49.5168L63.1598 49.5958C63.4675 49.9746 64.2172 49.943 65.2824 49.3986L65.5506 49.2722C66.8999 48.6646 68.1859 48.7042 69.1486 49.3828C70.1743 50.1087 70.7503 51.5054 70.7503 53.2729C70.7503 55.0403 70.1743 57.0208 69.1486 58.7961C68.1228 60.5636 66.7342 61.9757 65.2824 62.7174C64.6748 63.0251 64.1856 62.678 64.1856 61.9442C64.1856 61.2104 64.6748 60.366 65.2824 60.0583C66.1503 59.6164 66.9866 58.7722 67.6021 57.707C68.2175 56.6418 68.5647 55.4505 68.5647 54.3932C68.5647 53.3359 68.2175 52.4996 67.6021 52.0577C67.0655 51.679 66.3554 51.6317 65.6058 51.9236L65.2824 52.0735C64.0515 52.7047 62.1893 53.2727 61.2661 51.9156L61.1793 51.7815L57.755 45.903L57.7076 45.8005C57.4945 45.2876 57.6919 44.4513 58.189 43.8753L58.1968 43.8595ZM47.5448 61.6128C47.8841 60.9027 48.5075 60.4373 48.9888 60.5557C49.5017 60.6819 49.6595 61.4156 49.3438 62.2046L49.2413 62.4809C49.0124 63.12 48.8941 63.7904 48.8862 64.4138C48.8862 65.2975 49.1308 66.0395 49.5806 66.505C50.0303 66.9785 50.6616 67.1518 51.3717 67.0097C52.0818 66.8598 52.8314 66.4024 53.5021 65.7002C54.1727 64.998 54.7172 64.0984 55.0643 63.1358V63.1119C55.6798 61.455 56.8949 58.9695 58.7413 58.0306L65.2903 54.693L65.4006 54.6456C65.953 54.4325 66.3791 54.7798 66.3791 55.4662C66.3791 56.1527 65.9451 56.9418 65.4006 57.2889L65.2903 57.3521L58.7413 60.6897C58.1889 60.9738 57.5341 61.9362 56.9896 63.4275C56.4136 65.0213 55.5062 66.5206 54.3937 67.6805C53.2811 68.8483 52.0266 69.6217 50.8509 69.8584C49.6674 70.103 48.6179 69.8032 47.8684 69.022C47.1188 68.233 46.7085 67.0021 46.7085 65.5187V65.5029L46.7243 65.061C46.7874 64.0195 47.0399 62.8831 47.4896 61.7627L47.5527 61.6206L47.5448 61.6128ZM58.0232 38.5177C58.7491 38.0285 59.4829 37.7128 60.1851 37.5865C60.8874 37.4603 61.5502 37.5313 62.1262 37.7838C62.6312 38.0047 63.0573 38.3679 63.3966 38.8571L63.5306 39.0702L63.6175 39.2752C63.7674 39.788 63.5623 40.5534 63.1046 41.0979C62.6391 41.6423 62.0788 41.7922 61.7474 41.4924L61.6212 41.3344L61.4477 41.0821C61.2583 40.8533 61.0373 40.6717 60.7769 40.5612C60.4297 40.4113 60.0353 40.364 59.6171 40.4429C59.191 40.5218 58.757 40.7035 58.323 40.9954C57.8891 41.2873 57.4709 41.6737 57.0922 42.1393C56.7135 42.6048 56.3821 43.1336 56.1217 43.6938C55.8613 44.2541 55.6719 44.8379 55.5693 45.406C55.4667 45.9741 55.451 46.5186 55.522 47.0157C55.593 47.5049 55.7429 47.9229 55.9717 48.2543C56.3426 48.7672 56.6976 49.446 56.8555 50.2824C57.0211 51.1267 57.0054 52.2076 56.5556 53.4385L53.1312 62.8754L53.076 63.0253C52.7603 63.7433 52.1528 64.2401 51.6557 64.1691C51.1271 64.0902 50.9298 63.3801 51.2138 62.5911L54.6383 53.1542L54.6777 53.0124C54.7724 52.6968 54.7961 52.3336 54.7172 51.9391C54.6462 51.5919 54.5121 51.2528 54.3306 50.9451L54.1333 50.6453C54.1333 50.6453 54.1333 50.6295 54.1254 50.6295C53.7388 50.0772 53.4784 49.3669 53.3601 48.5463C53.2417 47.7257 53.2733 46.8184 53.4469 45.8637C53.6205 44.909 53.936 43.9384 54.37 43.0073C54.8039 42.0762 55.3563 41.1927 55.9796 40.4194C56.6109 39.6462 57.3052 38.999 58.0311 38.5177H58.0232Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
     </svg>
   );
diff --git a/packages/propel/src/empty-state/assets/horizontal-stack/work-item.tsx b/packages/propel/src/empty-state/assets/horizontal-stack/work-item.tsx
index e2156e5b9..8548bf025 100644
--- a/packages/propel/src/empty-state/assets/horizontal-stack/work-item.tsx
+++ b/packages/propel/src/empty-state/assets/horizontal-stack/work-item.tsx
@@ -1,29 +1,35 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper";
 import type { TIllustrationAssetProps } from "../helper";
 
 export function WorkItemHorizontalStackIllustration({ className }: TIllustrationAssetProps) {
   return (
     <svg
-      width="72"
+      width="71"
       height="80"
-      viewBox="0 0 72 80"
+      viewBox="0 0 71 80"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       className={className}
     >
       <g opacity="0.2">
         <path
-          d="M42.4518 2.44207C41.651 2.03473 40.6223 2.06925 39.5038 2.63538L8.67038 18.349C6.1366 19.64 4.0792 23.1887 4.0792 26.2679V63.7913C4.0792 65.5104 4.71437 66.7186 5.71546 67.2364L2.63625 65.6692C1.63517 65.1583 1 63.9432 1 62.2241V24.7007C1 21.6146 3.0574 18.0728 5.59118 16.7818L36.4246 1.06817C37.55 0.495131 38.5787 0.467515 39.3726 0.874853L42.4518 2.44207Z"
+          d="M41.6017 1.99291C40.8009 1.58558 39.7722 1.6201 38.6537 2.18623L7.82029 17.8998C5.2865 19.1909 3.22911 22.7395 3.22911 25.8187V63.3422C3.22911 65.0613 3.86427 66.2695 4.86536 66.7873L1.78616 65.2201C0.78507 64.7092 0.149902 63.494 0.149902 61.7749V24.2515C0.149902 21.1654 2.2073 17.6237 4.74108 16.3326L35.5745 0.619008C36.6999 0.0459728 37.7286 0.0183575 38.5225 0.425696L41.6017 1.99291Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.3"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
         <path
-          d="M42.4515 2.44211C43.4526 2.95301 44.0877 4.16813 44.0877 5.88723V43.4106C44.0877 46.4967 42.0303 50.0385 39.4965 51.3296L8.66314 67.0432C7.53778 67.6162 6.50907 67.6438 5.71511 67.2365C4.71403 66.7256 4.07886 65.5105 4.07886 63.7914V26.2679C4.07886 23.1818 6.13626 19.6401 8.67004 18.349L39.5035 2.63543C40.6288 2.06239 41.6575 2.03478 42.4515 2.44211Z"
+          d="M41.6014 1.99296C42.6025 2.50385 43.2376 3.71897 43.2376 5.43807V42.9615C43.2376 46.0476 41.1802 49.5894 38.6465 50.8804L7.81304 66.594C6.68768 67.167 5.65898 67.1946 4.86501 66.7873C3.86393 66.2764 3.22876 65.0613 3.22876 63.3422V25.8188C3.22876 22.7327 5.28616 19.1909 7.81994 17.8998L38.6534 2.18627C39.7787 1.61323 40.8074 1.58562 41.6014 1.99296Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.3"
           strokeLinecap="round"
           strokeLinejoin="round"
@@ -31,34 +37,34 @@ export function WorkItemHorizontalStackIllustration({ className }: TIllustration
       </g>
       <g opacity="0.6">
         <path
-          d="M55.9076 8.38648C55.1068 7.97914 54.0781 8.01366 52.9596 8.57979L22.1262 24.2934C19.5924 25.5844 17.535 29.1331 17.535 32.2123V69.7357C17.535 71.4548 18.1702 72.6631 19.1713 73.1809L16.0921 71.6136C15.091 71.1027 14.4558 69.8876 14.4558 68.1685V30.6451C14.4558 27.559 16.5132 24.0172 19.047 22.7262L49.8804 7.01256C51.0058 6.43953 52.0345 6.41191 52.8284 6.81925L55.9076 8.38648Z"
+          d="M55.0575 7.93732C54.2567 7.52998 53.228 7.5645 52.1095 8.13063L21.2761 23.8442C18.7423 25.1353 16.6849 28.6839 16.6849 31.7631V69.2866C16.6849 71.0057 17.3201 72.2139 18.3212 72.7317L15.242 71.1645C14.2409 70.6536 13.6057 69.4385 13.6057 67.7194V30.1959C13.6057 27.1098 15.6631 23.5681 18.1969 22.277L49.0303 6.5634C50.1557 5.99037 51.1844 5.96275 51.9783 6.37009L55.0575 7.93732Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.3"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
         <path
-          d="M55.9075 8.38645C56.9086 8.89735 57.5438 10.1125 57.5438 11.8316V49.355C57.5438 52.4411 55.4864 55.9829 52.9526 57.2739L22.1192 72.9875C20.9938 73.5605 19.9651 73.5882 19.1712 73.1808C18.1701 72.6699 17.5349 71.4548 17.5349 69.7357V32.2123C17.5349 29.1262 19.5923 25.5844 22.1261 24.2933L52.9595 8.57976C54.0849 8.00673 55.1136 7.97911 55.9075 8.38645Z"
+          d="M55.0574 7.93729C56.0585 8.44819 56.6937 9.66329 56.6937 11.3824V48.9058C56.6937 51.9919 54.6363 55.5337 52.1025 56.8248L21.2691 72.5384C20.1437 73.1114 19.115 73.139 18.3211 72.7317C17.32 72.2208 16.6848 71.0056 16.6848 69.2865V31.7631C16.6848 28.677 18.7422 25.1352 21.276 23.8442L52.1094 8.1306C53.2348 7.55757 54.2635 7.52995 55.0574 7.93729Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.3"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
       </g>
       <path
-        d="M69.3637 14.3309C68.5628 13.9235 67.5341 13.958 66.4157 14.5242L35.5822 30.2378C33.0485 31.5288 30.9911 35.0775 30.9911 38.1567V75.6801C30.9911 77.3992 31.6262 78.6074 32.6273 79.1252L29.5481 77.558C28.547 77.0471 27.9119 75.832 27.9119 74.1129V36.5895C27.9119 33.5034 29.9693 29.9616 32.5031 28.6706L63.3365 12.957C64.4618 12.3839 65.4905 12.3563 66.2845 12.7636L69.3637 14.3309Z"
+        d="M68.5136 13.8817C67.7127 13.4744 66.684 13.5089 65.5656 14.075L34.7322 29.7886C32.1984 31.0797 30.141 34.6283 30.141 37.7075V75.231C30.141 76.9501 30.7761 78.1583 31.7772 78.6761L28.698 77.1089C27.6969 76.598 27.0618 75.3828 27.0618 73.6637V36.1403C27.0618 33.0542 29.1192 29.5124 31.653 28.2214L62.4864 12.5078C63.6117 11.9348 64.6404 11.9072 65.4344 12.3145L68.5136 13.8817Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.3"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
       <path
-        d="M69.3636 14.3308C70.3647 14.8417 70.9998 16.0569 70.9998 17.776V55.2994C70.9998 58.3855 68.9424 61.9273 66.4087 63.2183L35.5752 78.9319C34.4499 79.5049 33.4212 79.5326 32.6272 79.1252C31.6261 78.6143 30.991 77.3992 30.991 75.6801V38.1567C30.991 35.0706 33.0484 31.5288 35.5821 30.2377L66.4156 14.5242C67.5409 13.9511 68.5696 13.9235 69.3636 14.3308Z"
+        d="M68.5135 13.8817C69.5146 14.3926 70.1497 15.6077 70.1497 17.3268V54.8502C70.1497 57.9363 68.0924 61.4781 65.5586 62.7692L34.7251 78.4827C33.5998 79.0558 32.5711 79.0834 31.7771 78.6761C30.776 78.1652 30.1409 76.9501 30.1409 75.231V37.7075C30.1409 34.6214 32.1983 31.0796 34.732 29.7886L65.5655 14.075C66.6908 13.502 67.7195 13.4744 68.5135 13.8817Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.3"
         strokeLinecap="round"
         strokeLinejoin="round"
@@ -66,20 +72,20 @@ export function WorkItemHorizontalStackIllustration({ className }: TIllustration
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M53.5394 40.4351C53.7258 40.8562 54.14 41.0081 54.6302 40.7665C55.293 40.4351 55.8384 39.4892 55.8453 38.6538V37.1211C55.8591 36.6241 55.6658 36.2512 55.3344 36.1339C55.0099 36.0165 54.5888 36.1684 54.216 36.5343L46.3868 44.2875C45.9242 44.7501 45.6135 45.4612 45.6135 46.0895V56.6388C45.6135 57.1636 45.8345 57.5433 46.1935 57.633C46.5525 57.7228 47.0012 57.5088 47.3741 57.0807L48.4925 55.7828C49.0793 55.0993 49.3072 54.0705 49.0034 53.4906C48.8032 53.1109 48.4235 53.0142 48.023 53.1868V45.91L53.5394 40.4489V40.4351Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M52.6893 39.9859C52.8757 40.4071 53.2899 40.559 53.7801 40.3173C54.4429 39.9859 54.9883 39.0401 54.9952 38.2047V36.672C55.009 36.1749 54.8157 35.8021 54.4843 35.6847C54.1598 35.5673 53.7387 35.7192 53.3659 36.0851L45.5367 43.8384C45.0741 44.3009 44.7634 45.0121 44.7634 45.6403V56.1897C44.7634 56.7144 44.9844 57.0941 45.3434 57.1839C45.7024 57.2736 46.1511 57.0596 46.524 56.6316L47.6424 55.3336C48.2293 54.6501 48.4571 53.6214 48.1533 53.0414C47.9531 52.6617 47.5734 52.5651 47.1729 52.7377V45.4608L52.6893 39.9997V39.9859Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M48.7274 38.3707C48.9138 38.7918 49.328 38.9437 49.8182 38.7021C50.481 38.3707 51.0264 37.4249 51.0333 36.5895V35.0568C51.0471 34.5597 50.8538 34.1868 50.5224 34.0695C50.191 33.9521 49.7768 34.104 49.4039 34.4699L41.5748 42.2231C41.1122 42.6857 40.8015 43.3968 40.8015 44.0251V54.5745C40.8015 55.0992 41.0225 55.4789 41.3815 55.5687C41.7405 55.6584 42.1892 55.4513 42.562 55.0163L43.6805 53.7184C44.2673 53.0349 44.4952 52.0062 44.1914 51.4262C43.9912 51.0465 43.6115 50.9499 43.211 51.1225V43.8456L48.7274 38.3845V38.3707Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M47.8773 37.9215C48.0637 38.3427 48.4779 38.4946 48.9681 38.2529C49.6309 37.9215 50.1763 36.9757 50.1832 36.1403V34.6076C50.197 34.1105 50.0037 33.7377 49.6723 33.6203C49.3409 33.503 48.9267 33.6549 48.5538 34.0208L40.7247 41.774C40.2621 42.2366 39.9514 42.9477 39.9514 43.5759V54.1253C39.9514 54.65 40.1724 55.0297 40.5314 55.1195C40.8904 55.2092 41.3391 55.0021 41.7119 54.5672L42.8304 53.2692C43.4173 52.5857 43.6451 51.557 43.3413 50.9771C43.1411 50.5974 42.7614 50.5007 42.3609 50.6733V43.3964L47.8773 37.9353V37.9215Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M61.1825 49.431C61.1825 50.0524 60.8787 50.7704 60.4092 51.226L52.5869 58.9793C52.2141 59.3452 51.7999 59.4971 51.4754 59.3797C51.1509 59.2623 50.9507 58.9033 50.9507 58.4062V47.8569C50.9507 47.2355 51.2545 46.5175 51.7239 46.0549L59.5531 38.3017C59.9259 37.9358 60.3402 37.7839 60.6647 37.9013C60.9891 38.0186 61.1894 38.3846 61.1894 38.8747V49.4241L61.1825 49.431ZM58.7799 42.306L53.3602 47.6705V54.9888L58.773 49.6243V42.306H58.7799Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M60.3324 48.9818C60.3324 49.6032 60.0286 50.3212 59.5591 50.7769L51.7368 58.5301C51.364 58.896 50.9498 59.0479 50.6253 58.9306C50.3008 58.8132 50.1006 58.4542 50.1006 57.9571V47.4077C50.1006 46.7864 50.4044 46.0683 50.8738 45.6058L58.703 37.8525C59.0758 37.4866 59.4901 37.3347 59.8146 37.4521C60.139 37.5695 60.3393 37.9354 60.3393 38.4256V48.9749L60.3324 48.9818ZM57.9298 41.8569L52.5101 47.2213V54.5396L57.9229 49.1751V41.8569H57.9298Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
     </svg>
   );
diff --git a/packages/propel/src/empty-state/assets/horizontal-stack/worklog.tsx b/packages/propel/src/empty-state/assets/horizontal-stack/worklog.tsx
index 7d91b2e04..23dc8a6c1 100644
--- a/packages/propel/src/empty-state/assets/horizontal-stack/worklog.tsx
+++ b/packages/propel/src/empty-state/assets/horizontal-stack/worklog.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper";
 import type { TIllustrationAssetProps } from "../helper";
 
@@ -13,17 +19,17 @@ export function WorklogHorizontalStackIllustration({ className }: TIllustrationA
     >
       <g opacity="0.2">
         <path
-          d="M47.8736 2.5768C46.9583 2.11127 45.7826 2.15093 44.5044 2.79795L9.26614 20.7563C6.37039 22.2318 4.01915 26.2876 4.01915 29.8067V72.6906C4.01915 74.6553 4.74506 76.0363 5.88915 76.6281L2.37 74.837C1.22591 74.2531 0.5 72.8642 0.5 70.8995V28.0156C0.5 24.4886 2.85134 20.4406 5.74709 18.9651L40.9853 1.00681C42.2714 0.351913 43.4471 0.320136 44.3545 0.785668L47.8736 2.5768Z"
+          d="M47.6236 2.3561C46.7083 1.89056 45.5326 1.93023 44.2544 2.57724L9.01614 20.5356C6.12039 22.0111 3.76915 26.0669 3.76915 29.586V72.4699C3.76915 74.4346 4.49506 75.8156 5.63915 76.4074L2.12 74.6163C0.975906 74.0324 0.25 72.6435 0.25 70.6788V27.7949C0.25 24.2679 2.60134 20.2199 5.49709 18.7444L40.7353 0.786111C42.0214 0.13121 43.1971 0.0994326 44.1045 0.564965L47.6236 2.3561Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.5"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
         <path
-          d="M47.8737 2.57668C49.0178 3.16057 49.7437 4.54946 49.7437 6.51417V49.3981C49.7437 52.9251 47.3924 56.973 44.4966 58.4485L9.25838 76.4072C7.97226 77.0621 6.79668 77.0935 5.88929 76.628C4.74519 76.0441 4.01929 74.6552 4.01929 72.6905V29.8066C4.01929 26.2796 6.37053 22.2316 9.26628 20.7561L44.5045 2.79783C45.7906 2.14293 46.9663 2.11115 47.8737 2.57668Z"
+          d="M47.6237 2.35598C48.7678 2.93987 49.4937 4.32876 49.4937 6.29346V49.1774C49.4937 52.7044 47.1424 56.7523 44.2466 58.2278L9.00838 76.1865C7.72226 76.8414 6.54668 76.8728 5.63929 76.4073C4.49519 75.8234 3.76929 74.4345 3.76929 72.4698V29.5859C3.76929 26.0589 6.12053 22.0109 9.01628 20.5354L44.2545 2.57713C45.5406 1.92223 46.7163 1.89045 47.6237 2.35598Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.5"
           strokeLinecap="round"
           strokeLinejoin="round"
@@ -31,49 +37,49 @@ export function WorklogHorizontalStackIllustration({ className }: TIllustrationA
       </g>
       <g opacity="0.6">
         <path
-          d="M63.252 9.37172C62.3367 8.90619 61.161 8.94586 59.8828 9.59287L24.6446 27.5512C21.7488 29.0267 19.3976 33.0825 19.3976 36.6016V79.4859C19.3976 81.4506 20.1235 82.8312 21.2676 83.423L17.7484 81.6319C16.6043 81.048 15.8784 79.6595 15.8784 77.6948V34.8105C15.8784 31.2835 18.2298 27.2356 21.1255 25.7601L56.3637 7.80174C57.6499 7.14683 58.8255 7.11506 59.7329 7.58059L63.252 9.37172Z"
+          d="M63.002 9.15102C62.0867 8.68549 60.911 8.72515 59.6328 9.37216L24.3946 27.3305C21.4988 28.806 19.1476 32.8618 19.1476 36.3809V79.2652C19.1476 81.2299 19.8735 82.6105 21.0176 83.2023L17.4984 81.4112C16.3543 80.8273 15.6284 79.4388 15.6284 77.4741V34.5898C15.6284 31.0628 17.9798 27.0149 20.8755 25.5394L56.1137 7.58103C57.3999 6.92613 58.5755 6.89435 59.4829 7.35989L63.002 9.15102Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.5"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
         <path
-          d="M63.2521 9.36965C64.3962 9.95354 65.1221 11.3424 65.1221 13.3071V56.1914C65.1221 59.7184 62.7708 63.766 59.875 65.2415L24.6369 83.2002C23.3508 83.8551 22.1751 83.8865 21.2677 83.4209C20.1236 82.8371 19.3977 81.4485 19.3977 79.4838V36.5996C19.3977 33.0726 21.7489 29.0246 24.6447 27.5491L59.8829 9.5908C61.169 8.9359 62.3447 8.90412 63.2521 9.36965Z"
+          d="M63.0021 9.14895C64.1462 9.73284 64.8721 11.1217 64.8721 13.0864V55.9707C64.8721 59.4977 62.5208 63.5453 59.625 65.0208L24.3869 82.9795C23.1008 83.6344 21.9251 83.6658 21.0177 83.2002C19.8736 82.6163 19.1477 81.2278 19.1477 79.2631V36.3788C19.1477 32.8518 21.4989 28.8039 24.3947 27.3284L59.6329 9.3701C60.919 8.71519 62.0947 8.68342 63.0021 9.14895Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.5"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
       </g>
       <path
-        d="M78.6299 16.1649C77.7146 15.6993 76.5389 15.7386 75.2607 16.3856L40.0226 34.3443C37.1268 35.8198 34.7755 39.8753 34.7755 43.3944V86.2786C34.7755 88.2433 35.5014 89.6244 36.6455 90.2161L33.1264 88.425C31.9823 87.8411 31.2563 86.4522 31.2563 84.4875V41.6032C31.2563 38.0762 33.6077 34.0287 36.5034 32.5532L71.7417 14.5945C73.0278 13.9396 74.2035 13.9082 75.1108 14.3737L78.6299 16.1649Z"
+        d="M78.3799 15.9441C77.4646 15.4786 76.2889 15.5179 75.0107 16.1649L39.7726 34.1236C36.8768 35.5991 34.5255 39.6546 34.5255 43.1737V86.0579C34.5255 88.0226 35.2514 89.4036 36.3955 89.9954L32.8764 88.2043C31.7323 87.6204 31.0063 86.2315 31.0063 84.2668V41.3825C31.0063 37.8555 33.3577 33.808 36.2534 32.3325L71.4917 14.3738C72.7778 13.7189 73.9535 13.6875 74.8608 14.153L78.3799 15.9441Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.5"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
       <path
-        d="M78.63 16.1647C79.7741 16.7486 80.5 18.1371 80.5 20.1018V62.9861C80.5 66.5131 78.1487 70.5611 75.253 72.0366L40.0148 89.9949C38.7287 90.6498 37.553 90.6815 36.6456 90.216C35.5015 89.6321 34.7756 88.2432 34.7756 86.2785V43.3942C34.7756 39.8672 37.127 35.8197 40.0227 34.3442L75.2609 16.3855C76.547 15.7306 77.7226 15.6992 78.63 16.1647Z"
+        d="M78.38 15.944C79.5241 16.5279 80.25 17.9164 80.25 19.8811V62.7654C80.25 66.2924 77.8987 70.3403 75.003 71.8158L39.7648 89.7742C38.4787 90.4291 37.303 90.4608 36.3956 89.9953C35.2515 89.4114 34.5256 88.0225 34.5256 86.0578V43.1735C34.5256 39.6465 36.877 35.599 39.7727 34.1235L75.0109 16.1648C76.297 15.5099 77.4726 15.4785 78.38 15.944Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.5"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
       <path
-        d="M61.7446 39.5835L57.3813 41.8088C56.7817 42.1165 56.2925 41.7694 56.2925 41.0356C56.2925 40.3018 56.7817 39.4574 57.3813 39.1497L61.7446 36.9247C62.3443 36.617 62.8335 36.9641 62.8335 37.6979C62.8335 38.4318 62.3443 39.2757 61.7446 39.5835Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M61.4946 39.3628L57.1313 41.5881C56.5317 41.8958 56.0425 41.5487 56.0425 40.8149C56.0425 40.0811 56.5317 39.2367 57.1313 38.929L61.4946 36.704C62.0943 36.3963 62.5835 36.7434 62.5835 37.4772C62.5835 38.211 62.0943 39.055 61.4946 39.3628Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
-        d="M59.5591 56.6164C59.2829 56.7584 58.9989 56.7742 58.7859 56.6164C58.3598 56.3165 58.3598 55.472 58.7859 54.7382L62.0604 49.0889C62.4864 48.3551 63.1809 48.0001 63.599 48.2999C64.0251 48.5997 64.0251 49.4439 63.599 50.1777L60.3245 55.8273C60.1115 56.1982 59.8354 56.4663 59.5513 56.6083L59.5591 56.6164Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M59.3091 56.3957C59.0329 56.5377 58.7489 56.5535 58.5359 56.3957C58.1098 56.0958 58.1098 55.2513 58.5359 54.5175L61.8104 48.8682C62.2364 48.1344 62.9309 47.7794 63.349 48.0792C63.7751 48.379 63.7751 49.2232 63.349 49.957L60.0745 55.6066C59.8615 55.9775 59.5854 56.2456 59.3013 56.3876L59.3091 56.3957Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
-        d="M59.5592 67.2388C54.1464 70.0005 49.7437 66.8835 49.7437 60.2951C49.7437 53.7066 54.1464 46.1082 59.5592 43.3466C64.9719 40.5849 69.3748 43.7019 69.3748 50.2903C69.3748 56.8788 64.9719 64.4772 59.5592 67.2388ZM59.5592 46.0057C55.3457 48.1519 51.9214 54.0619 51.9214 59.1828C51.9214 64.3036 55.3457 66.7259 59.5592 64.5797C63.7726 62.4335 67.1971 56.5235 67.1971 51.4026C67.1971 46.2817 63.7726 43.8595 59.5592 46.0057Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M59.3092 67.0181C53.8964 69.7798 49.4937 66.6628 49.4937 60.0744C49.4937 53.4859 53.8964 45.8875 59.3092 43.1258C64.7219 40.3642 69.1248 43.4811 69.1248 50.0696C69.1248 56.6581 64.7219 64.2565 59.3092 67.0181ZM59.3092 45.785C55.0957 47.9312 51.6714 53.8412 51.6714 58.9621C51.6714 64.0829 55.0957 66.5052 59.3092 64.359C63.5226 62.2128 66.9471 56.3028 66.9471 51.1819C66.9471 46.061 63.5226 43.6388 59.3092 45.785Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
     </svg>
   );
diff --git a/packages/propel/src/empty-state/assets/illustration/constant.tsx b/packages/propel/src/empty-state/assets/illustration/constant.tsx
index 31da2e49e..45faced13 100644
--- a/packages/propel/src/empty-state/assets/illustration/constant.tsx
+++ b/packages/propel/src/empty-state/assets/illustration/constant.tsx
@@ -1,12 +1,18 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { InboxIllustration, SearchIllustration } from "./";
 
 export const IllustrationMap = [
   {
-    asset: <InboxIllustration className="w-20 h-20" />,
+    asset: <InboxIllustration className="h-20 w-20" />,
     title: "Inbox",
   },
   {
-    asset: <SearchIllustration className="w-20 h-20" />,
+    asset: <SearchIllustration className="h-20 w-20" />,
     title: "Search",
   },
 ];
diff --git a/packages/propel/src/empty-state/assets/illustration/inbox.tsx b/packages/propel/src/empty-state/assets/illustration/inbox.tsx
index 62dd62a0d..11feb4453 100644
--- a/packages/propel/src/empty-state/assets/illustration/inbox.tsx
+++ b/packages/propel/src/empty-state/assets/illustration/inbox.tsx
@@ -1,7 +1,13 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper";
 import type { TIllustrationAssetProps } from "../helper";
 
-export function InboxIllustration({ className, ...rest }: TIllustrationAssetProps) {
+export function InboxIllustration({ className }: TIllustrationAssetProps) {
   return (
     <svg
       width="100"
@@ -10,42 +16,17 @@ export function InboxIllustration({ className, ...rest }: TIllustrationAssetProp
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       className={className}
-      {...rest}
     >
       <path
-        d="M47.9704 90.9139C45.6095 90.9139 43.3811 90.4381 41.6888 89.5768L3.42089 70.0815C1.60205 69.1601 0.602295 67.8772 0.602295 66.48V46.5631C0.602295 45.1719 1.60205 43.8951 3.42089 42.9676L45.748 21.4005C47.4344 20.5393 49.6628 20.0635 52.0236 20.0635C54.3845 20.0635 56.6129 20.5393 58.2992 21.4005L96.5732 40.9018C98.392 41.8233 99.3917 43.1061 99.3917 44.5034V64.4202C99.3917 65.8115 98.392 67.0883 96.5732 68.0158L54.246 89.5829C52.5597 90.4441 50.3313 90.9199 47.9644 90.9199L47.9704 90.9139Z"
+        d="M47.9704 90.4361C45.6096 90.4361 43.3812 89.9603 41.6888 89.0991L3.42092 69.6038C1.60208 68.6823 0.602325 67.3995 0.602325 66.0022V46.0853C0.602325 44.6941 1.60208 43.4173 3.42092 42.4898L45.7481 20.9227C47.4344 20.0615 49.6628 19.5857 52.0237 19.5857C54.3845 19.5857 56.6129 20.0615 58.2993 20.9227L96.5732 40.424C98.392 41.3455 99.3918 42.6283 99.3918 44.0256V63.9425C99.3918 65.3337 98.392 66.6105 96.5732 67.538L54.246 89.1051C52.5597 89.9663 50.3313 90.4421 47.9644 90.4421L47.9704 90.4361Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
       />
       <path
-        d="M52.0296 20.6717C54.2038 20.6717 56.3719 21.0933 58.0282 21.9425L96.3021 41.4438C97.9643 42.287 98.7894 43.3952 98.7894 44.5094V64.4263C98.7894 65.5344 97.9583 66.6426 96.3021 67.4858L53.9749 89.0528C52.3187 89.902 50.1445 90.3236 47.9703 90.3236C45.7962 90.3236 43.622 89.902 41.9658 89.0528L3.69185 69.5455C2.0296 68.7023 1.2045 67.5942 1.2045 66.486V46.5691C1.2045 45.4609 2.03562 44.3588 3.69185 43.5096L46.019 21.9425C47.6752 21.0933 49.8494 20.6717 52.0236 20.6717M52.0296 19.4672C49.5724 19.4672 47.2476 19.9671 45.477 20.8705L3.14981 42.4316C1.12018 43.4674 -3.05176e-05 44.9309 -3.05176e-05 46.5631V66.48C-3.05176e-05 67.4255 0.409509 69.2263 3.14981 70.6175L41.4177 90.1189C43.1884 91.0223 45.5131 91.5221 47.9703 91.5221C50.4276 91.5221 52.7523 91.0223 54.523 90.1189L96.8501 68.5518C98.8798 67.5159 100 66.0524 100 64.4202V44.5033C100 43.5578 99.5904 41.757 96.8501 40.3658L58.5762 20.8645C56.8116 19.9611 54.4808 19.4612 52.0296 19.4612V19.4672Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
-      />
-      <path
-        d="M86.7922 46.4305C86.6838 46.4968 86.5754 46.563 86.455 46.6233L79.4085 50.2128L79.3844 50.2308L79.3964 50.2128L86.7982 46.4366L86.7922 46.4305Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-        strokeWidth="0.3024"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <path
-        d="M76.6561 56.5847L76.114 57.8495L75.1504 60.0899C74.6806 61.186 73.9098 62.0894 73.0606 62.5231L64.3699 66.9557L62.6595 64.7033L56.8115 61.722H56.7934L51.7765 64.2756C49.0724 65.4862 44.9589 65.426 42.3812 64.113L28.2159 56.8919L47.8618 46.8883C50.5479 45.5211 54.9083 45.5211 57.5944 46.8883L71.7597 54.1094L76.644 56.5908L76.6561 56.5847Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-        strokeWidth="0.3024"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <path
-        d="M88.4665 44.142C88.4665 44.9611 87.9064 45.7742 86.7922 46.4306L79.3904 50.2068L79.3783 50.2249L76.6561 56.5848L71.7717 54.1035L57.6065 46.8823C54.9204 45.5152 50.56 45.5152 47.8739 46.8823L28.228 56.886L13.5448 49.4058C12.2018 48.7193 11.5272 47.8219 11.5272 46.9245C11.5272 46.0271 12.2018 45.1298 13.5448 44.4432L47.8679 26.9594C50.554 25.5923 54.9144 25.5923 57.6005 26.9594L86.4489 41.6547C87.792 42.3413 88.4665 43.2386 88.4665 44.136V44.142Z"
+        d="M52.0296 20.1939C54.2038 20.1939 56.372 20.6155 58.0282 21.4647L96.3021 40.9661C97.9643 41.8092 98.7895 42.9174 98.7895 44.0316V63.9485C98.7895 65.0566 97.9583 66.1648 96.3021 67.008L53.9749 88.5751C52.3187 89.4243 50.1445 89.8458 47.9704 89.8458C45.7962 89.8458 43.622 89.4243 41.9658 88.5751L3.69188 69.0677C2.02963 68.2246 1.20453 67.1164 1.20453 66.0082V46.0913C1.20453 44.9832 2.03565 43.881 3.69188 43.0318L46.019 21.4647C47.6753 20.6155 49.8494 20.1939 52.0236 20.1939M52.0296 18.9894C49.5724 18.9894 47.2477 19.4893 45.477 20.3927L3.14984 41.9538C1.12021 42.9897 0 44.4532 0 46.0853V66.0022C0 66.9477 0.40954 68.7485 3.14984 70.1398L41.4177 89.6411C43.1884 90.5445 45.5131 91.0443 47.9704 91.0443C50.4276 91.0443 52.7523 90.5445 54.523 89.6411L96.8502 68.074C98.8798 67.0381 100 65.5746 100 63.9424V44.0256C100 43.08 99.5905 41.2792 96.8502 39.888L58.5762 20.3867C56.8116 19.4833 54.4809 18.9834 52.0296 18.9834V18.9894Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-        strokeWidth="0.3024"
-        strokeLinecap="round"
-        strokeLinejoin="round"
       />
       <path
-        d="M98.7954 44.5034C98.7954 45.5995 97.9763 46.6896 96.3562 47.5328L88.4666 51.5499L85.2505 53.1881L79.4025 50.2068L86.449 46.6173C86.5694 46.5571 86.6839 46.4969 86.7862 46.4246C87.9064 45.7742 88.4605 44.9551 88.4605 44.136C88.4605 43.2326 87.786 42.3352 86.4429 41.6547L57.5945 26.9594C54.9084 25.5923 50.548 25.5923 47.8619 26.9594L13.5388 44.4432C12.1958 45.1298 11.5212 46.0271 11.5212 46.9245C11.5212 47.8219 12.1958 48.7253 13.5388 49.4058L28.222 56.886L42.3873 64.1071C44.965 65.4261 49.0785 65.4803 51.7826 64.2697C51.9031 64.2155 52.0175 64.1613 52.1259 64.1071L56.8115 61.7161L62.6595 64.6973L53.9688 69.124C53.0956 69.5696 52.0838 69.9009 50.9997 70.1057C49.2832 70.4429 47.4042 70.4851 45.6576 70.2321C44.3025 70.0334 43.0257 69.672 41.9597 69.124L23.0787 59.5058L11.5212 53.6157L3.68578 49.6226C2.02353 48.7795 1.19843 47.6713 1.19843 46.5571C1.19843 45.4429 2.02955 44.3468 3.68578 43.4976L46.0129 21.9305C49.3314 20.2382 54.7096 20.2382 58.0161 21.9305L96.29 41.4319C97.9522 42.275 98.7773 43.3832 98.7773 44.4974L98.7954 44.5034Z"
+        d="M86.7923 45.9528C86.6838 46.019 86.5754 46.0853 86.455 46.1455L79.4085 49.735L79.3844 49.7531L79.3964 49.735L86.7983 45.9588L86.7923 45.9528Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
         stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
         strokeWidth="0.3024"
@@ -53,7 +34,7 @@ export function InboxIllustration({ className, ...rest }: TIllustrationAssetProp
         strokeLinejoin="round"
       />
       <path
-        d="M86.7921 46.4305C86.6837 46.4968 86.5753 46.563 86.4549 46.6233L79.4084 50.2128H79.3903L86.7921 46.4366V46.4305Z"
+        d="M76.6561 56.1069L76.1141 57.3717L75.1504 59.6121C74.6807 60.7082 73.9098 61.6116 73.0606 62.0453L64.3699 66.4779L62.6595 64.2255L56.8115 61.2443H56.7934L51.7766 63.7979C49.0724 65.0084 44.9589 64.9482 42.3812 63.6353L28.216 56.4141L47.8618 46.4105C50.5479 45.0433 54.9083 45.0433 57.5944 46.4105L71.7597 53.6316L76.6441 56.113L76.6561 56.1069Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
         stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
         strokeWidth="0.3024"
@@ -61,7 +42,15 @@ export function InboxIllustration({ className, ...rest }: TIllustrationAssetProp
         strokeLinejoin="round"
       />
       <path
-        d="M85.2503 53.1939L82.5161 59.5719L81.0164 63.0771C80.5467 64.1732 79.7758 65.0766 78.9266 65.5102L68.9651 70.5873C68.3869 70.8824 67.8268 70.9126 67.3872 70.6837C67.2005 70.5934 67.0379 70.4548 66.8993 70.2742L64.3759 66.9497L73.0665 62.517C73.9157 62.0894 74.6866 61.18 75.1564 60.0838L76.12 57.8434L76.6621 56.5787L79.3843 50.2188L79.4084 50.2007L85.2564 53.1819L85.2503 53.1939Z"
+        d="M88.4665 43.6643C88.4665 44.4833 87.9064 45.2964 86.7923 45.9529L79.3904 49.7291L79.3784 49.7471L76.6561 56.107L71.7718 53.6257L57.6065 46.4046C54.9204 45.0374 50.56 45.0374 47.8739 46.4046L28.228 56.4082L13.5448 48.9281C12.2018 48.2415 11.5273 47.3441 11.5273 46.4467C11.5273 45.5493 12.2018 44.652 13.5448 43.9654L47.8679 26.4817C50.554 25.1145 54.9144 25.1145 57.6005 26.4817L86.449 41.1769C87.792 41.8635 88.4665 42.7609 88.4665 43.6582V43.6643Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.3024"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M98.7954 44.0256C98.7954 45.1217 97.9763 46.2118 96.3562 47.055L88.4666 51.0721L85.2505 52.7103L79.4025 49.7291L86.449 46.1396C86.5694 46.0793 86.6839 46.0191 86.7863 45.9468C87.9065 45.2964 88.4606 44.4773 88.4606 43.6582C88.4606 42.7548 87.786 41.8575 86.443 41.1769L57.5945 26.4817C54.9084 25.1145 50.548 25.1145 47.8619 26.4817L13.5389 43.9654C12.1958 44.652 11.5213 45.5493 11.5213 46.4467C11.5213 47.3441 12.1958 48.2475 13.5389 48.928L28.2221 56.4082L42.3873 63.6293C44.965 64.9483 49.0785 65.0025 51.7827 63.7919C51.9031 63.7377 52.0175 63.6835 52.1259 63.6293L56.8116 61.2383L62.6596 64.2195L53.9689 68.6462C53.0956 69.0919 52.0838 69.4231 50.9997 69.6279C49.2833 69.9652 47.4042 70.0073 45.6576 69.7544C44.3025 69.5556 43.0257 69.1943 41.9597 68.6462L23.0787 59.028L11.5213 53.1379L3.68581 49.1449C2.02356 48.3017 1.19846 47.1935 1.19846 46.0793C1.19846 44.9652 2.02958 43.869 3.68581 43.0198L46.013 21.4527C49.3314 19.7604 54.7097 19.7604 58.0161 21.4527L96.29 40.9541C97.9522 41.7972 98.7773 42.9054 98.7773 44.0196L98.7954 44.0256Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
         stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
         strokeWidth="0.3024"
@@ -69,7 +58,7 @@ export function InboxIllustration({ className, ...rest }: TIllustrationAssetProp
         strokeLinejoin="round"
       />
       <path
-        d="M79.4025 50.2067L79.3783 50.2249L79.3904 50.2007L79.4025 50.2067Z"
+        d="M86.7922 45.9528C86.6838 46.019 86.5754 46.0853 86.4549 46.1455L79.4084 49.735H79.3904L86.7922 45.9588V45.9528Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
         stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
         strokeWidth="0.3024"
@@ -77,15 +66,55 @@ export function InboxIllustration({ className, ...rest }: TIllustrationAssetProp
         strokeLinejoin="round"
       />
       <path
-        d="M98.7953 44.5034V64.4203C98.7953 65.5285 97.9642 66.6366 96.308 67.4798L53.9808 89.0469C50.6624 90.7393 45.2841 90.7393 41.9717 89.0469L3.69176 69.5456C2.02951 68.7024 1.20441 67.5942 1.20441 66.4861V46.5692C1.20441 47.6774 2.02951 48.7855 3.69176 49.6347L11.5272 53.6277L23.0847 59.5179L41.9657 69.136C43.0317 69.6841 44.3145 70.0515 45.6636 70.2442C47.4162 70.4911 49.2952 70.449 51.0057 70.1177C52.0897 69.913 53.1015 69.5817 53.9748 69.136L62.6655 64.7094L64.3759 66.9619L66.8994 70.2864C67.0379 70.467 67.2006 70.6056 67.3873 70.6959C67.8269 70.9248 68.387 70.9007 68.9652 70.5995L78.9266 65.5224C79.7758 65.0948 80.5467 64.1854 81.0165 63.0893L82.5161 59.5841L85.2504 53.2061L88.4665 51.568L96.3562 47.5509C97.9763 46.7077 98.7953 45.6176 98.7953 44.5215V44.5034Z"
+        d="M85.2504 52.7162L82.5161 59.0941L81.0165 62.5993C80.5467 63.6954 79.7758 64.5988 78.9266 65.0325L68.9651 70.1096C68.387 70.4047 67.8269 70.4348 67.3872 70.2059C67.2005 70.1156 67.0379 69.9771 66.8994 69.7964L64.3759 66.4719L73.0666 62.0392C73.9158 61.6116 74.6867 60.7022 75.1564 59.6061L76.12 57.3656L76.6621 56.1009L79.3843 49.741L79.4084 49.7229L85.2564 52.7041L85.2504 52.7162Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.3024"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M79.4025 49.7289L79.3783 49.7471L79.3904 49.7229L79.4025 49.7289Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.3024"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M98.7954 44.0256V63.9425C98.7954 65.0507 97.9643 66.1589 96.308 67.002L53.9809 88.5691C50.6624 90.2615 45.2842 90.2615 41.9717 88.5691L3.69179 69.0678C2.02954 68.2246 1.20444 67.1165 1.20444 66.0083V46.0914C1.20444 47.1996 2.02954 48.3077 3.69179 49.1569L11.5273 53.1499L23.0847 59.0401L41.9657 68.6583C43.0317 69.2063 44.3145 69.5737 45.6636 69.7664C47.4162 70.0133 49.2953 69.9712 51.0057 69.6399C52.0898 69.4352 53.1016 69.1039 53.9749 68.6583L62.6655 64.2316L64.376 66.4841L66.8995 69.8086C67.038 69.9893 67.2006 70.1278 67.3873 70.2181C67.8269 70.447 68.387 70.4229 68.9652 70.1218L78.9267 65.0447C79.7759 64.6171 80.5468 63.7076 81.0165 62.6115L82.5162 59.1063L85.2505 52.7284L88.4665 51.0902L96.3562 47.0731C97.9763 46.2299 98.7954 45.1398 98.7954 44.0437V44.0256Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.3024"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M56.8176 61.2383L52.132 63.6293C52.0175 63.6895 51.9091 63.7437 51.7887 63.7919L56.8055 61.2323H56.8236L56.8176 61.2383Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.3024"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M43.333 50.3074C42.8211 50.3074 42.3453 50.193 41.9116 49.9761L36.5455 47.2419C35.3168 46.6155 34.6062 45.1942 34.6062 43.3512V23.3922C34.6062 23.3922 34.6062 23.3561 34.6062 23.332V21.5493C34.6062 18.3452 36.7623 14.6413 39.4062 13.2922L63.2679 1.13249C63.9485 0.783177 64.623 0.608521 65.2675 0.608521C65.7794 0.608521 66.2552 0.722951 66.6828 0.939766L72.049 3.67405C73.2776 4.3004 73.9822 5.72175 73.9822 7.5707V9.36545C73.9822 9.36545 73.9822 9.40158 73.9822 9.42567V29.3727C73.9822 32.5767 71.8261 36.2806 69.1822 37.6297L45.3205 49.7894C44.6399 50.1327 43.9714 50.3134 43.333 50.3134V50.3074Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+      />
+      <path
+        d="M65.2734 1.21067C65.689 1.21067 66.0744 1.30101 66.4177 1.47567L71.7839 4.20995C72.7656 4.70983 73.3859 5.89629 73.3859 7.57059V9.36534C73.3859 9.36534 73.3859 9.38943 73.3859 9.40147V29.3605C73.3859 32.3538 71.3744 35.8288 68.9111 37.0815L45.0494 49.2413C44.4411 49.5484 43.8629 49.699 43.3329 49.699C42.9113 49.699 42.5259 49.6087 42.1826 49.434L36.8164 46.6997C35.8347 46.1998 35.2084 45.0194 35.2084 43.3451V23.3861C35.2084 23.3861 35.2084 23.368 35.2084 23.362V21.5491C35.2084 18.5559 37.2199 15.0808 39.6832 13.8281L63.5449 1.66839C64.1592 1.35522 64.7374 1.21067 65.2674 1.21067M65.2734 0.00614485C64.5326 0.00614485 63.7738 0.204892 63.0029 0.596364L39.1411 12.7561C36.2623 14.2196 34.0099 18.0861 34.0099 21.5552V23.3138C34.0099 23.3138 34.0099 23.368 34.0099 23.3921V43.3511C34.0099 45.4289 34.835 47.043 36.2744 47.7778L41.6405 50.512C42.1585 50.777 42.7306 50.9095 43.3389 50.9095C44.0737 50.9095 44.8386 50.7108 45.6035 50.3253L69.4652 38.1656C72.344 36.7021 74.5965 32.8356 74.5965 29.3665V9.44363C74.5965 9.44363 74.5965 9.38943 74.5965 9.35931V7.56457C74.5965 5.48073 73.7714 3.86666 72.332 3.1319L66.9658 0.397617C66.4478 0.13262 65.8817 0.00012207 65.2734 0.00012207V0.00614485Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+      />
+      <path
+        d="M72.85 8.28736C72.3682 8.04043 71.6576 8.3235 71.0854 9.05224L70.3988 9.92552L57.7392 26.1927C57.2755 26.7528 56.6973 27.0539 56.2938 26.9636L43.5559 23.5969L42.8693 23.4223C42.1707 23.2356 41.2432 23.9583 40.8096 25.0122C40.647 25.4037 40.5687 25.7892 40.5687 26.1144V46.0734C40.5687 47.7417 41.195 48.9282 42.1767 49.4281L36.8105 46.6938C35.8288 46.1939 35.2025 45.0135 35.2025 43.3392V23.3801C35.2025 23.0549 35.2748 22.6694 35.4434 22.278C35.877 21.224 36.7985 20.4953 37.5031 20.688L38.1897 20.8626L50.9276 24.2293C51.3311 24.3136 51.9093 24.0185 52.373 23.4584L65.0326 7.19124L65.7192 6.31796C66.2854 5.58922 67.0021 5.30615 67.4839 5.55308L72.85 8.28736Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
         stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
         strokeWidth="0.3024"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
       <path
-        d="M56.8175 61.7161L52.1319 64.1071C52.0175 64.1673 51.9091 64.2215 51.7886 64.2697L56.8055 61.7101H56.8236L56.8175 61.7161Z"
+        d="M72.85 8.28729C72.9644 8.34752 73.0608 8.43183 73.1451 8.54627C73.3077 8.7691 73.386 9.07626 73.386 9.4075V29.3665C73.386 32.3598 71.3744 35.8349 68.9112 37.0876L45.0494 49.2473C43.9593 49.8014 42.9596 49.8315 42.1827 49.434C41.201 48.9341 40.5746 47.7537 40.5746 46.0794V26.1203C40.5746 25.7951 40.6469 25.4097 40.8155 25.0182C41.2491 23.9642 42.1706 23.2355 42.8753 23.4282L43.5618 23.6029L56.2997 26.9695C56.7033 27.0539 57.2814 26.7587 57.7452 26.1986L70.4048 9.93147L71.0914 9.05819C71.6575 8.32945 72.3742 8.04639 72.856 8.29331L72.85 8.28729Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
         stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
         strokeWidth="0.3024"
@@ -93,39 +122,15 @@ export function InboxIllustration({ className, ...rest }: TIllustrationAssetProp
         strokeLinejoin="round"
       />
       <path
-        d="M43.333 50.7852C42.821 50.7852 42.3452 50.6707 41.9116 50.4539L36.5454 47.7196C35.3168 47.0933 34.6061 45.6719 34.6061 43.829V23.87C34.6061 23.87 34.6061 23.8338 34.6061 23.8097V22.027C34.6061 18.823 36.7622 15.1191 39.4062 13.77L63.2679 1.61027C63.9485 1.26096 64.623 1.0863 65.2674 1.0863C65.7794 1.0863 66.2551 1.20073 66.6828 1.41755L72.0489 4.15183C73.2775 4.77819 73.9822 6.19953 73.9822 8.04848V9.84323C73.9822 9.84323 73.9822 9.87937 73.9822 9.90346V29.8505C73.9822 33.0545 71.8261 36.7584 69.1821 38.1075L45.3204 50.2672C44.6399 50.6105 43.9714 50.7912 43.333 50.7912V50.7852Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-      />
-      <path
-        d="M65.2734 1.68846C65.6889 1.68846 66.0744 1.7788 66.4177 1.95345L71.7839 4.68773C72.7656 5.18761 73.3859 6.37408 73.3859 8.04837V9.84312C73.3859 9.84312 73.3859 9.86721 73.3859 9.87926V29.8383C73.3859 32.8316 71.3743 36.3066 68.9111 37.5593L45.0493 49.7191C44.4411 50.0262 43.8629 50.1768 43.3329 50.1768C42.9113 50.1768 42.5258 50.0864 42.1826 49.9118L36.8164 47.1775C35.8347 46.6776 35.2083 45.4972 35.2083 43.8229V23.8638C35.2083 23.8638 35.2083 23.8458 35.2083 23.8397V22.0269C35.2083 19.0337 37.2199 15.5586 39.6832 14.3059L63.5449 2.14618C64.1592 1.833 64.7374 1.68846 65.2674 1.68846M65.2734 0.483928C64.5326 0.483928 63.7737 0.682675 63.0028 1.07415L39.1411 13.2339C36.2623 14.6974 34.0098 18.5639 34.0098 22.033V23.7916C34.0098 23.7916 34.0098 23.8458 34.0098 23.8699V43.8289C34.0098 45.9067 34.8349 47.5208 36.2743 48.2556L41.6405 50.9898C42.1585 51.2548 42.7306 51.3873 43.3389 51.3873C44.0737 51.3873 44.8385 51.1886 45.6034 50.8031L69.4651 38.6434C72.344 37.1799 74.5964 33.3134 74.5964 29.8443V9.92141C74.5964 9.92141 74.5964 9.86721 74.5964 9.8371V8.04235C74.5964 5.95851 73.7713 4.34444 72.3319 3.60968L66.9657 0.8754C66.4478 0.610404 65.8817 0.477905 65.2734 0.477905V0.483928Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
-      />
-      <path
-        d="M72.85 8.76514C72.3682 8.51822 71.6575 8.80128 71.0854 9.53002L70.3988 10.4033L57.7392 26.6705C57.2755 27.2306 56.6973 27.5317 56.2938 27.4414L43.5559 24.0747L42.8693 23.9001C42.1707 23.7134 41.2432 24.4361 40.8095 25.49C40.6469 25.8815 40.5686 26.267 40.5686 26.5922V46.5512C40.5686 48.2195 41.195 49.406 42.1767 49.9058L36.8105 47.1716C35.8288 46.6717 35.2025 45.4912 35.2025 43.8169V23.8579C35.2025 23.5327 35.2747 23.1472 35.4434 22.7557C35.877 21.7018 36.7985 20.973 37.5031 21.1658L38.1897 21.3404L50.9276 24.7071C51.3311 24.7914 51.9093 24.4963 52.373 23.9362L65.0326 7.66902L65.7192 6.79574C66.2853 6.067 67.002 5.78393 67.4838 6.03086L72.85 8.76514Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+        d="M71.784 4.21002C71.0071 3.81253 70.0073 3.84866 68.9172 4.40275L45.0555 16.5625C42.5922 17.8152 40.5807 21.2902 40.5807 24.2835V26.0963C40.5807 26.6143 40.7674 27.0238 41.1106 27.1985L35.7445 24.4642C35.4012 24.2895 35.2145 23.88 35.2145 23.362V21.5492C35.2145 18.556 37.226 15.0809 39.6893 13.8282L63.551 1.66847C64.6411 1.11438 65.6409 1.07825 66.4178 1.47574L71.784 4.21002Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
         stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
         strokeWidth="0.3024"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
       <path
-        d="M72.8499 8.76507C72.9644 8.8253 73.0607 8.90962 73.145 9.02405C73.3077 9.24689 73.386 9.55404 73.386 9.88529V29.8443C73.386 32.8376 71.3744 36.3127 68.9111 37.5654L45.0494 49.7251C43.9593 50.2792 42.9596 50.3093 42.1826 49.9118C41.2009 49.4119 40.5746 48.2315 40.5746 46.5572V26.5981C40.5746 26.2729 40.6469 25.8875 40.8155 25.496C41.2491 24.442 42.1706 23.7133 42.8752 23.906L43.5618 24.0807L56.2997 27.4473C56.7032 27.5316 57.2814 27.2365 57.7451 26.6764L70.4047 10.4093L71.0913 9.53597C71.6575 8.80723 72.3741 8.52417 72.856 8.7711L72.8499 8.76507Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-        strokeWidth="0.3024"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <path
-        d="M71.784 4.68781C71.007 4.29031 70.0073 4.32645 68.9172 4.88053L45.0554 17.0403C42.5922 18.293 40.5806 21.768 40.5806 24.7613V26.5741C40.5806 27.092 40.7673 27.5016 41.1106 27.6762L35.7444 24.942C35.4011 24.7673 35.2144 24.3578 35.2144 23.8398V22.027C35.2144 19.0337 37.226 15.5587 39.6893 14.306L63.551 2.14625C64.6411 1.59217 65.6409 1.55603 66.4178 1.95352L71.784 4.68781Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-        strokeWidth="0.3024"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <path
-        d="M71.784 4.68778C72.7656 5.18766 73.386 6.37412 73.386 8.04239V9.83714C73.386 10.4514 73.1451 11.1561 72.6994 11.7282L70.4048 14.6793L59.293 28.959C58.5642 29.8383 57.7693 30.4948 56.9803 30.8983C56.1913 31.3018 55.4264 31.4524 54.7459 31.3139L43.5618 28.3387L41.2793 27.7425C41.219 27.7244 41.1648 27.7063 41.1106 27.6762C40.7673 27.5016 40.5806 27.092 40.5806 26.5741V24.7613C40.5806 21.768 42.5922 18.2929 45.0555 17.0402L68.9172 4.8805C70.0073 4.32642 71.007 4.29028 71.784 4.68778Z"
+        d="M71.784 4.20999C72.7657 4.70987 73.386 5.89634 73.386 7.56461V9.35936C73.386 9.97367 73.1451 10.6783 72.6994 11.2505L70.4048 14.2016L59.293 28.4813C58.5643 29.3606 57.7693 30.017 56.9803 30.4205C56.1914 30.8241 55.4265 30.9746 54.7459 30.8361L43.5619 27.8609L41.2793 27.2647C41.2191 27.2466 41.1649 27.2285 41.1107 27.1984C40.7674 27.0238 40.5807 26.6142 40.5807 26.0963V24.2835C40.5807 21.2902 42.5922 17.8152 45.0555 16.5624L68.9172 4.40272C70.0073 3.84864 71.0071 3.8125 71.784 4.20999Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
         stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
         strokeWidth="0.3024"
diff --git a/packages/propel/src/empty-state/assets/illustration/index.ts b/packages/propel/src/empty-state/assets/illustration/index.ts
index 0a9791fe4..6d1e11cee 100644
--- a/packages/propel/src/empty-state/assets/illustration/index.ts
+++ b/packages/propel/src/empty-state/assets/illustration/index.ts
@@ -1,2 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./inbox";
 export * from "./search";
diff --git a/packages/propel/src/empty-state/assets/illustration/search.tsx b/packages/propel/src/empty-state/assets/illustration/search.tsx
index 12a16c4f2..c51c82b8a 100644
--- a/packages/propel/src/empty-state/assets/illustration/search.tsx
+++ b/packages/propel/src/empty-state/assets/illustration/search.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper";
 import type { TIllustrationAssetProps } from "../helper";
 
@@ -13,39 +19,39 @@ export function SearchIllustration({ className, ...rest }: TIllustrationAssetPro
       {...rest}
     >
       <path
-        d="M144.84 4.63218C142.624 3.50452 139.768 3.59686 136.656 5.18614L20.4472 64.3983C13.4043 67.9857 7.69345 77.8445 7.69345 86.4108V156.537C7.69345 161.318 9.46737 164.688 12.2569 166.106L5.5634 162.696C2.77391 161.272 1 157.902 1 153.128V83.0015C1 74.4286 6.71087 64.5764 13.7538 60.989L129.962 1.77674C133.082 0.187462 135.93 0.0951613 138.146 1.22282L144.84 4.63218Z"
+        d="M144.09 4.41578C141.874 3.28812 139.018 3.38046 135.906 4.96974L19.6972 64.1819C12.6543 67.7693 6.94345 77.6281 6.94345 86.1944V156.321C6.94345 161.102 8.71737 164.471 11.5069 165.889L4.8134 162.48C2.02391 161.055 0.25 157.686 0.25 152.911V82.7851C0.25 74.2122 5.96087 64.36 13.0038 60.7726L129.212 1.56034C132.332 -0.0289381 135.18 -0.121239 137.396 1.00642L144.09 4.41578Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.5"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
       <path
-        d="M144.84 4.6322C147.629 6.05662 149.403 9.42642 149.403 14.2009V84.327C149.403 92.8998 143.692 102.752 136.649 106.339L20.4407 165.552C17.3215 167.141 14.4726 167.233 12.2569 166.106C9.4674 164.681 7.69348 161.311 7.69348 156.537V86.4109C7.69348 77.838 13.4043 67.9858 20.4473 64.3983L136.656 5.18616C139.775 3.59688 142.624 3.50454 144.84 4.6322Z"
+        d="M144.09 4.4158C146.879 5.84022 148.653 9.21002 148.653 13.9845V84.1106C148.653 92.6834 142.942 102.536 135.899 106.123L19.6907 165.335C16.5715 166.925 13.7226 167.017 11.5069 165.889C8.7174 164.465 6.94348 161.095 6.94348 156.321V86.1945C6.94348 77.6216 12.6543 67.7694 19.6973 64.1819L135.906 4.96976C139.025 3.38048 141.874 3.28814 144.09 4.4158Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.5"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
       <path
-        d="M151.843 141.244C151.019 141.244 150.28 141.013 149.641 140.558L147.108 138.771C146.772 138.844 146.436 138.883 146.112 138.883C145.295 138.883 144.55 138.653 143.91 138.204L121.119 122.081C113.252 131.399 103.611 136.945 95.2226 136.945C91.7803 136.945 88.661 136.035 85.9441 134.241C83.702 133.792 81.6247 132.902 79.7782 131.59C68.1521 123.366 68.0663 100.49 79.587 80.5944C88.0939 65.9018 100.821 56.4123 111.999 56.4123C115.448 56.4123 118.574 57.3224 121.291 59.1227C123.539 59.5777 125.61 60.4679 127.457 61.7671C137.764 69.0606 139.215 87.6901 130.978 106.221L158.418 125.628C160.944 127.415 161.029 132.091 158.609 136.265C157.475 138.224 155.958 139.76 154.329 140.585C153.479 141.02 152.641 141.238 151.837 141.238L151.843 141.244ZM90.8636 123.657C91.3252 123.709 91.8066 123.736 92.2814 123.736C100.287 123.736 109.467 116.818 115.666 106.115C123.777 92.115 124.074 75.8332 116.371 69.6937C115.91 69.6409 115.428 69.6145 114.947 69.6145C106.941 69.6145 97.7615 76.5322 91.5626 87.2285C83.4514 101.229 83.1546 117.511 90.857 123.65L90.8636 123.657Z"
+        d="M151.093 141.028C150.269 141.028 149.53 140.797 148.891 140.342L146.358 138.555C146.022 138.627 145.686 138.667 145.362 138.667C144.545 138.667 143.8 138.436 143.16 137.988L120.369 121.864C112.502 131.182 102.861 136.728 94.4726 136.728C91.0303 136.728 87.911 135.818 85.1941 134.024C82.952 133.576 80.8747 132.686 79.0282 131.373C67.4021 123.15 67.3163 100.274 78.837 80.378C87.3439 65.6854 100.071 56.1959 111.249 56.1959C114.698 56.1959 117.824 57.106 120.541 58.9063C122.789 59.3613 124.86 60.2515 126.707 61.5507C137.014 68.8442 138.465 87.4737 130.228 106.004L157.668 125.412C160.194 127.199 160.279 131.875 157.859 136.049C156.725 138.008 155.208 139.544 153.579 140.368C152.729 140.804 151.891 141.021 151.087 141.021L151.093 141.028ZM90.1136 123.44C90.5752 123.493 91.0566 123.519 91.5314 123.519C99.5372 123.519 108.717 116.602 114.916 105.899C123.027 91.8986 123.324 75.6168 115.621 69.4773C115.16 69.4245 114.678 69.3981 114.197 69.3981C106.191 69.3981 97.0115 76.3158 90.8126 87.0121C82.7014 101.012 82.4046 117.294 90.107 123.434L90.1136 123.44Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
       />
       <path
-        d="M112.006 57.0718C115.277 57.0718 118.35 57.9291 121.04 59.7425C123.197 60.158 125.234 61.0021 127.081 62.3078C137.309 69.542 138.344 88.4287 130.16 106.452L158.049 126.176C160.271 127.745 160.271 132.111 158.049 135.942C156.941 137.855 155.49 139.266 154.039 140.004C153.294 140.387 152.549 140.585 151.843 140.585C151.184 140.585 150.564 140.407 150.023 140.024L147.247 138.059C146.864 138.165 146.482 138.224 146.112 138.224C145.453 138.224 144.833 138.046 144.292 137.663L121.007 121.19C113.107 130.752 103.525 136.285 95.2292 136.285C91.9649 136.285 88.8985 135.428 86.2079 133.621C84.0449 133.205 82.0138 132.361 80.1673 131.056C68.7917 123.01 68.7917 100.569 80.1673 80.9307C88.7797 66.0667 101.435 57.0784 112.012 57.0784M92.288 124.395C100.241 124.395 109.764 117.629 116.246 106.445C124.667 91.9106 124.792 75.3452 116.642 69.0606C116.088 68.9881 115.527 68.9551 114.96 68.9551C107.007 68.9551 97.4845 75.7211 91.0087 86.8988C82.5875 101.433 82.4622 117.999 90.613 124.283C91.167 124.356 91.7275 124.389 92.2946 124.389M112.006 55.7529C100.591 55.7529 87.6455 65.3743 79.0198 80.2647C73.4013 89.9586 70.3085 100.642 70.3085 110.336C70.3085 120.241 73.5332 127.983 79.3957 132.131C81.2884 133.469 83.4052 134.386 85.6869 134.861C88.483 136.681 91.6879 137.604 95.216 137.604C103.65 137.604 113.305 132.15 121.218 122.964L143.514 138.738C144.259 139.266 145.15 139.543 146.093 139.543C146.37 139.543 146.653 139.516 146.937 139.47L149.238 141.099C149.983 141.627 150.874 141.904 151.823 141.904C152.773 141.904 153.67 141.66 154.613 141.178C156.354 140.295 157.969 138.666 159.163 136.602C161.755 132.131 161.583 127.079 158.781 125.094L131.776 105.997C139.894 87.3472 138.285 68.6386 127.813 61.2329C125.933 59.9008 123.816 58.9842 121.522 58.5028C118.719 56.6827 115.507 55.7529 111.973 55.7529H112.006ZM91.1274 123.024C83.8206 116.983 84.2361 101.202 92.1364 87.5648C98.1242 77.2246 107.297 70.274 114.947 70.274C115.336 70.274 115.725 70.2938 116.107 70.3267C123.414 76.3607 122.992 92.1414 115.092 105.785C109.104 116.126 99.9311 123.076 92.2748 123.076C91.8857 123.076 91.4967 123.057 91.1208 123.024H91.1274Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
-      />
-      <path
-        d="M152.311 123.815L124.423 104.091C132.607 86.0679 131.572 67.1877 121.343 59.947C109.968 51.9016 91.5296 61.2922 80.1541 80.9307C68.7785 100.569 68.7785 123.01 80.1541 131.056C89.914 137.96 104.897 132.012 116.134 117.755L144.279 137.663C145.387 138.448 146.844 138.382 148.295 137.644C149.746 136.905 151.197 135.487 152.305 133.581C154.527 129.75 154.527 125.384 152.305 123.815H152.311ZM85.2715 122.239C76.7184 116.185 76.7184 99.3162 85.2715 84.5445C93.8245 69.7794 107.693 62.7101 116.246 68.7638C124.799 74.811 124.799 91.6864 116.246 106.452C107.693 121.217 93.8245 128.286 85.2781 122.239H85.2715Z"
+        d="M111.256 56.8554C114.527 56.8554 117.6 57.7127 120.29 59.5261C122.447 59.9416 124.484 60.7857 126.331 62.0914C136.559 69.3256 137.594 88.2123 129.41 106.235L157.299 125.959C159.521 127.529 159.521 131.894 157.299 135.726C156.191 137.638 154.74 139.049 153.289 139.788C152.544 140.171 151.799 140.368 151.093 140.368C150.434 140.368 149.814 140.19 149.273 139.808L146.497 137.843C146.114 137.948 145.732 138.008 145.362 138.008C144.703 138.008 144.083 137.829 143.542 137.447L120.257 120.974C112.357 130.536 102.775 136.069 94.4792 136.069C91.2149 136.069 88.1485 135.211 85.4579 133.405C83.2949 132.989 81.2638 132.145 79.4173 130.839C68.0417 122.794 68.0417 100.353 79.4173 80.7143C88.0297 65.8503 100.685 56.862 111.262 56.862M91.538 124.179C99.491 124.179 109.014 117.413 115.496 106.229C123.917 91.6942 124.042 75.1288 115.892 68.8442C115.338 68.7717 114.777 68.7387 114.21 68.7387C106.257 68.7387 96.7345 75.5047 90.2587 86.6824C81.8375 101.217 81.7122 117.782 89.863 124.067C90.417 124.139 90.9775 124.172 91.5446 124.172M111.256 55.5365C99.8405 55.5365 86.8955 65.1579 78.2698 80.0483C72.6513 89.7422 69.5585 100.425 69.5585 110.119C69.5585 120.024 72.7832 127.766 78.6457 131.914C80.5384 133.253 82.6552 134.169 84.9369 134.644C87.733 136.464 90.9379 137.388 94.466 137.388C102.9 137.388 112.555 131.934 120.468 122.748L142.764 138.522C143.509 139.049 144.4 139.326 145.343 139.326C145.62 139.326 145.903 139.3 146.187 139.254L148.488 140.883C149.233 141.41 150.124 141.687 151.073 141.687C152.023 141.687 152.92 141.443 153.863 140.962C155.604 140.078 157.219 138.449 158.413 136.385C161.005 131.914 160.833 126.863 158.031 124.878L131.026 105.78C139.144 87.1308 137.535 68.4222 127.063 61.0165C125.183 59.6844 123.066 58.7678 120.772 58.2864C117.969 56.4663 114.757 55.5365 111.223 55.5365H111.256ZM90.3774 122.807C83.0706 116.767 83.4861 100.986 91.3864 87.3484C97.3742 77.0082 106.547 70.0576 114.197 70.0576C114.586 70.0576 114.975 70.0774 115.357 70.1103C122.664 76.1443 122.242 91.925 114.342 105.569C108.354 115.909 99.1811 122.86 91.5248 122.86C91.1357 122.86 90.7467 122.84 90.3708 122.807H90.3774Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+      />
+      <path
+        d="M151.561 123.598L123.673 103.874C131.857 85.8515 130.822 66.9713 120.593 59.7306C109.218 51.6852 90.7796 61.0758 79.4041 80.7143C68.0285 100.353 68.0285 122.794 79.4041 130.839C89.164 137.744 104.147 131.795 115.384 117.538L143.529 137.447C144.637 138.232 146.094 138.166 147.545 137.427C148.996 136.689 150.447 135.271 151.555 133.365C153.777 129.534 153.777 125.168 151.555 123.598H151.561ZM84.5215 122.022C75.9684 115.969 75.9684 99.0998 84.5215 84.3281C93.0745 69.563 106.943 62.4937 115.496 68.5474C124.049 74.5946 124.049 91.47 115.496 106.235C106.943 121 93.0745 128.07 84.5281 122.022H84.5215Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
         stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
         strokeWidth="0.5"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
       <path
-        d="M158.042 126.176L130.154 106.452C138.338 88.4287 137.302 69.5486 127.074 62.3078C115.699 54.2625 97.2603 63.6531 85.8847 83.2916C74.5092 102.93 74.5092 125.371 85.8847 133.416C95.6446 140.321 110.627 134.373 121.864 120.115L150.01 140.024C151.118 140.809 152.575 140.743 154.026 140.004C155.477 139.266 156.928 137.848 158.035 135.942C160.258 132.111 160.258 127.745 158.035 126.176H158.042ZM91.0021 124.6C82.449 118.546 82.449 101.677 91.0021 86.9053C99.5552 72.1402 113.423 65.0709 121.977 71.1247C130.53 77.1718 130.53 94.0472 121.977 108.812C113.423 123.577 99.5552 130.647 91.0087 124.6H91.0021Z"
+        d="M157.292 125.959L129.404 106.235C137.588 88.2123 136.552 69.3322 126.324 62.0914C114.949 54.0461 96.5103 63.4367 85.1347 83.0752C73.7592 102.714 73.7592 125.155 85.1347 133.2C94.8946 140.105 109.877 134.156 121.114 119.899L149.26 139.808C150.368 140.593 151.825 140.527 153.276 139.788C154.727 139.049 156.178 137.632 157.285 135.726C159.508 131.894 159.508 127.529 157.285 125.959H157.292ZM90.2521 124.383C81.699 118.329 81.699 101.461 90.2521 86.6889C98.8052 71.9238 112.673 64.8545 121.227 70.9083C129.78 76.9554 129.78 93.8308 121.227 108.596C112.673 123.361 98.8052 130.43 90.2587 124.383H90.2521Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
         stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
         strokeWidth="0.5"
@@ -53,8 +59,8 @@ export function SearchIllustration({ className, ...rest }: TIllustrationAssetPro
         strokeLinejoin="round"
       />
       <path
-        d="M37.1248 108.984C28.6904 113.283 21.8256 108.43 21.8256 98.1622C21.8256 87.8945 28.6904 76.0441 37.1248 71.7445C45.5592 67.4449 52.4241 72.2984 52.4241 82.5661C52.4241 92.8338 45.5592 104.684 37.1248 108.984ZM37.1248 74.6065C29.9829 78.2467 24.1798 88.2704 24.1798 96.962C24.1798 105.654 29.9895 109.755 37.1248 106.122C44.2667 102.482 50.0699 92.4579 50.0699 83.7663C50.0699 75.0813 44.2601 70.9729 37.1248 74.6065ZM37.138 101.829C36.4852 102.158 35.951 101.796 35.951 101.004C35.951 100.213 36.4786 99.2898 37.1248 98.9601H37.138C37.7909 98.6238 38.3119 98.9931 38.3119 99.7844C38.3119 100.576 37.7843 101.499 37.138 101.829ZM37.1248 96.0915C36.472 96.4212 35.951 96.0519 35.951 95.2606V93.8296C35.951 91.9237 37.0523 89.5761 38.8922 87.5516C39.1889 87.2284 39.4527 86.8855 39.6769 86.5228C40.31 85.5205 40.6595 84.4719 40.6595 83.5487C40.6595 82.6255 40.31 81.9264 39.6835 81.5769C38.2986 80.8054 35.9576 81.999 34.5793 84.1818C34.0913 84.9467 33.3462 85.2699 32.9175 84.894C32.4889 84.5181 32.5416 83.5883 33.0296 82.8167C35.2982 79.2557 38.9713 77.3763 41.2398 78.6358C42.3873 79.2755 43.0203 80.5943 43.0203 82.3551C43.0203 84.1158 42.3873 86.0744 41.2398 87.8813C40.8573 88.488 40.4155 89.0749 39.9275 89.6091C39.1493 90.4663 38.3185 91.7061 38.3185 92.6294V94.0604C38.3185 94.8517 37.7909 95.7618 37.1446 96.0915H37.1248Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M36.3748 108.767C27.9404 113.067 21.0756 108.213 21.0756 97.9458C21.0756 87.6781 27.9404 75.8277 36.3748 71.5281C44.8092 67.2285 51.6741 72.082 51.6741 82.3497C51.6741 92.6174 44.8092 104.468 36.3748 108.767ZM36.3748 74.3901C29.2329 78.0303 23.4298 88.054 23.4298 96.7456C23.4298 105.437 29.2395 109.539 36.3748 105.905C43.5167 102.265 49.3199 92.2415 49.3199 83.5499C49.3199 74.8649 43.5101 70.7565 36.3748 74.3901ZM36.388 101.612C35.7352 101.942 35.201 101.579 35.201 100.788C35.201 99.9967 35.7286 99.0734 36.3748 98.7437H36.388C37.0409 98.4074 37.5619 98.7767 37.5619 99.568C37.5619 100.359 37.0343 101.283 36.388 101.612ZM36.3748 95.8751C35.722 96.2048 35.201 95.8355 35.201 95.0442V93.6132C35.201 91.7073 36.3023 89.3597 38.1422 87.3352C38.4389 87.012 38.7027 86.6691 38.9269 86.3064C39.56 85.3041 39.9095 84.2555 39.9095 83.3323C39.9095 82.4091 39.56 81.71 38.9335 81.3605C37.5486 80.589 35.2076 81.7826 33.8293 83.9654C33.3413 84.7303 32.5962 85.0535 32.1675 84.6776C31.7389 84.3017 31.7916 83.3719 32.2796 82.6003C34.5482 79.0393 38.2213 77.1599 40.4898 78.4194C41.6373 79.0591 42.2703 80.3779 42.2703 82.1387C42.2703 83.8994 41.6373 85.858 40.4898 87.6649C40.1073 88.2716 39.6655 88.8585 39.1775 89.3927C38.3993 90.2499 37.5685 91.4897 37.5685 92.413V93.844C37.5685 94.6353 37.0409 95.5454 36.3946 95.8751H36.3748Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
     </svg>
   );
diff --git a/packages/propel/src/empty-state/assets/index.ts b/packages/propel/src/empty-state/assets/index.ts
index c5431d804..fbf8b46e3 100644
--- a/packages/propel/src/empty-state/assets/index.ts
+++ b/packages/propel/src/empty-state/assets/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./asset-registry";
 export * from "./asset-types";
 export * from "./helper";
diff --git a/packages/propel/src/empty-state/assets/vertical-stack/404-error.tsx b/packages/propel/src/empty-state/assets/vertical-stack/404-error.tsx
index ac2544043..4cfe6c2e4 100644
--- a/packages/propel/src/empty-state/assets/vertical-stack/404-error.tsx
+++ b/packages/propel/src/empty-state/assets/vertical-stack/404-error.tsx
@@ -1,29 +1,35 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper";
 import type { TIllustrationAssetProps } from "../helper";
 
 export function Error404VerticalStackIllustration({ className }: TIllustrationAssetProps) {
   return (
     <svg
-      width="162"
+      width="161"
       height="173"
-      viewBox="0 0 162 173"
+      viewBox="0 0 161 173"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       className={className}
     >
       <g opacity="0.2">
         <path
-          d="M1 138.476C1 140.5 2.51532 142.519 5.54055 144.066L44.4938 163.915C50.5496 166.999 60.3642 166.999 66.42 163.915L148.273 122.209C151.298 120.667 152.813 118.649 152.813 116.625V123.088C152.813 125.111 151.298 127.13 148.273 128.672L66.42 170.378C60.3642 173.462 50.5496 173.462 44.4938 170.378L5.54055 150.529C2.50996 148.987 1 146.963 1 144.939V138.476Z"
+          d="M0.25 138.417C0.25 140.441 1.76532 142.46 4.79055 144.007L43.7438 163.856C49.7996 166.94 59.6142 166.94 65.67 163.856L147.523 122.15C150.548 120.608 152.063 118.59 152.063 116.566V123.028C152.063 125.052 150.548 127.071 147.523 128.613L65.67 170.318C59.6142 173.403 49.7996 173.403 43.7438 170.318L4.79055 150.47C1.75996 148.928 0.25 146.904 0.25 144.88V138.417Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.5"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
         <path
-          d="M1 138.476C1 136.452 2.51532 134.433 5.54055 132.891L87.3932 91.1859C93.449 88.1018 103.264 88.1018 109.319 91.1859L148.273 111.035C151.303 112.577 152.813 114.601 152.813 116.625C152.813 118.649 151.298 120.667 148.273 122.209L66.42 163.915C60.3642 166.999 50.5496 166.999 44.4938 163.915L5.54055 144.066C2.50996 142.524 1 140.5 1 138.476Z"
+          d="M0.25 138.417C0.25 136.393 1.76532 134.374 4.79055 132.832L86.6432 91.1268C92.699 88.0427 102.514 88.0427 108.569 91.1268L147.523 110.976C150.553 112.518 152.063 114.542 152.063 116.566C152.063 118.59 150.548 120.608 147.523 122.15L65.67 163.856C59.6142 166.94 49.7996 166.94 43.7438 163.856L4.79055 144.007C1.75996 142.465 0.25 140.441 0.25 138.417Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.5"
           strokeLinecap="round"
           strokeLinejoin="round"
@@ -31,34 +37,34 @@ export function Error404VerticalStackIllustration({ className }: TIllustrationAs
       </g>
       <g opacity="0.6">
         <path
-          d="M1 118.06C1 120.084 2.51532 122.102 5.54055 123.65L44.4938 143.499C50.5496 146.583 60.3642 146.583 66.42 143.499L148.273 101.793C151.298 100.251 152.813 98.2325 152.813 96.2085V102.671C152.813 104.695 151.298 106.714 148.273 108.256L66.42 149.961C60.3642 153.045 50.5496 153.045 44.4938 149.961L5.54055 130.113C2.50996 128.57 1 126.546 1 124.523V118.06Z"
+          d="M0.25 118.001C0.25 120.025 1.76532 122.043 4.79055 123.591L43.7438 143.439C49.7996 146.524 59.6142 146.524 65.67 143.439L147.523 101.734C150.548 100.192 152.063 98.1734 152.063 96.1494V102.612C152.063 104.636 150.548 106.655 147.523 108.197L65.67 149.902C59.6142 152.986 49.7996 152.986 43.7438 149.902L4.79055 130.053C1.75996 128.511 0.25 126.487 0.25 124.463V118.001Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.5"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
         <path
-          d="M1 118.06C1 116.036 2.51532 114.017 5.54055 112.475L87.3932 70.7696C93.449 67.6855 103.264 67.6855 109.319 70.7696L148.273 90.6184C151.303 92.1605 152.813 94.1844 152.813 96.2084C152.813 98.2323 151.298 100.251 148.273 101.793L66.42 143.498C60.3642 146.583 50.5496 146.583 44.4938 143.498L5.54055 123.65C2.50996 122.108 1 120.084 1 118.06Z"
+          d="M0.25 118.001C0.25 115.977 1.76532 113.958 4.79055 112.416L86.6432 70.7106C92.699 67.6264 102.514 67.6264 108.569 70.7106L147.523 90.5593C150.553 92.1014 152.063 94.1253 152.063 96.1493C152.063 98.1733 150.548 100.192 147.523 101.734L65.67 143.439C59.6142 146.523 49.7996 146.523 43.7438 143.439L4.79055 123.591C1.75996 122.048 0.25 120.025 0.25 118.001Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.5"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
       </g>
       <path
-        d="M1 97.6435C1 99.6675 2.51532 101.686 5.54055 103.234L44.4938 123.082C50.5496 126.166 60.3642 126.166 66.42 123.082L148.273 81.3769C151.298 79.8348 152.813 77.8162 152.813 75.7922V82.255C152.813 84.279 151.298 86.2976 148.273 87.8396L66.42 129.545C60.3642 132.629 50.5496 132.629 44.4938 129.545L5.54055 109.696C2.50996 108.154 1 106.13 1 104.106V97.6435Z"
+        d="M0.25 97.5844C0.25 99.6084 1.76532 101.627 4.79055 103.174L43.7438 123.023C49.7996 126.107 59.6142 126.107 65.67 123.023L147.523 81.3178C150.548 79.7757 152.063 77.7571 152.063 75.7332V82.1959C152.063 84.2199 150.548 86.2385 147.523 87.7805L65.67 129.486C59.6142 132.57 49.7996 132.57 43.7438 129.486L4.79055 109.637C1.75996 108.095 0.25 106.071 0.25 104.047V97.5844Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.5"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
       <path
-        d="M1 97.6434C1 95.6194 2.51532 93.6008 5.54055 92.0588L87.3932 50.3534C93.449 47.2693 103.264 47.2693 109.319 50.3534L148.273 70.2021C151.303 71.7442 152.813 73.7681 152.813 75.7921C152.813 77.8161 151.298 79.8347 148.273 81.3767L66.42 123.082C60.3642 126.166 50.5496 126.166 44.4938 123.082L5.54055 103.233C2.50996 101.691 1 99.6674 1 97.6434Z"
+        d="M0.25 97.5843C0.25 95.5603 1.76532 93.5417 4.79055 91.9997L86.6432 50.2943C92.699 47.2102 102.514 47.2102 108.569 50.2943L147.523 70.143C150.553 71.6851 152.063 73.7091 152.063 75.733C152.063 77.757 150.548 79.7756 147.523 81.3177L65.67 123.023C59.6142 126.107 49.7996 126.107 43.7438 123.023L4.79055 103.174C1.75996 101.632 0.25 99.6083 0.25 97.5843Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.5"
         strokeLinecap="round"
         strokeLinejoin="round"
@@ -66,9 +72,9 @@ export function Error404VerticalStackIllustration({ className }: TIllustrationAs
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M157.632 39.0343C158.232 38.7291 158.612 38.0062 158.612 36.9782V23.8492C158.612 22.0073 157.386 19.887 155.87 19.1159L121.897 1.80518C121.228 1.4625 120.612 1.44644 120.135 1.68738L122.523 0.471936C123 0.230988 123.616 0.247052 124.285 0.589733L158.259 17.9005C159.774 18.6715 161 20.7919 161 22.6338V35.7628C161 36.7908 160.62 37.5136 160.02 37.8188L157.632 39.0343Z"
+        d="M156.882 38.9752C157.482 38.67 157.862 37.9472 157.862 36.9191V23.7901C157.862 21.9482 156.636 19.8279 155.12 19.0569L121.147 1.7461C120.478 1.40342 119.862 1.38735 119.385 1.6283L121.773 0.412854C122.25 0.171906 122.866 0.18797 123.535 0.530651L157.509 17.8414C159.024 18.6124 160.25 20.7328 160.25 22.5747V35.7037C160.25 36.7317 159.87 37.4546 159.27 37.7598L156.882 38.9752Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.5"
         strokeLinecap="round"
         strokeLinejoin="round"
@@ -76,31 +82,31 @@ export function Error404VerticalStackIllustration({ className }: TIllustrationAs
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M157.632 39.0342C157.155 39.2751 156.54 39.2591 155.87 38.9164L121.897 21.6056C120.381 20.8346 119.155 18.7142 119.155 16.8723V3.74336C119.155 2.71531 119.536 1.99247 120.135 1.68727C120.612 1.44632 121.227 1.46238 121.897 1.80507L155.87 19.1158C157.386 19.8869 158.612 22.0072 158.612 23.8491V36.9781C158.612 38.0061 158.232 38.729 157.632 39.0342Z"
+        d="M156.882 38.9751C156.405 39.216 155.79 39.2 155.12 38.8573L121.147 21.5465C119.631 20.7755 118.405 18.6552 118.405 16.8132V3.68427C118.405 2.65623 118.786 1.93339 119.385 1.62819C119.862 1.38724 120.477 1.4033 121.147 1.74598L155.12 19.0567C156.636 19.8278 157.862 21.9481 157.862 23.79V36.919C157.862 37.947 157.482 38.6699 156.882 38.9751Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.5"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
       <path
-        d="M134.105 24.1008C133.843 23.9669 133.586 23.7527 133.355 23.4743C132.632 22.6015 132.386 21.3486 132.804 20.6847L136.825 14.1684C136.959 13.9488 137.157 13.8096 137.393 13.7668C137.741 13.7025 138.153 13.8525 138.538 14.1791C138.929 14.5057 139.25 14.9822 139.449 15.507L143.47 26.1247C143.604 26.4674 143.673 26.8208 143.673 27.1421C143.673 28.154 142.999 28.6359 142.163 28.2129L134.116 24.1115C134.116 24.1115 134.105 24.1115 134.105 24.1061V24.1008ZM138.137 15.1268C138.051 15.084 137.965 15.0679 137.89 15.0786C137.81 15.0947 137.746 15.1375 137.703 15.2125L133.677 21.7341C133.537 21.959 133.618 22.3766 133.859 22.6658C133.934 22.7622 134.03 22.8371 134.116 22.88L142.169 26.9814C142.447 27.1206 142.672 26.96 142.672 26.6227C142.672 26.5156 142.651 26.3978 142.602 26.2854L138.576 15.6622C138.506 15.4855 138.399 15.3249 138.271 15.2178C138.228 15.1803 138.18 15.1482 138.137 15.1268Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M133.355 24.0417C133.093 23.9078 132.836 23.6936 132.605 23.4152C131.882 22.5425 131.636 21.2895 132.054 20.6256L136.075 14.1093C136.209 13.8898 136.407 13.7505 136.643 13.7077C136.991 13.6434 137.403 13.7934 137.788 14.12C138.179 14.4466 138.5 14.9231 138.699 15.4479L142.72 26.0656C142.854 26.4083 142.923 26.7617 142.923 27.083C142.923 28.095 142.249 28.5769 141.413 28.1539L133.366 24.0524C133.366 24.0524 133.355 24.0524 133.355 24.047V24.0417ZM137.387 15.0677C137.301 15.0249 137.215 15.0088 137.14 15.0195C137.06 15.0356 136.996 15.0784 136.953 15.1534L132.927 21.675C132.787 21.8999 132.868 22.3176 133.109 22.6067C133.184 22.7031 133.28 22.778 133.366 22.8209L141.419 26.9223C141.697 27.0616 141.922 26.9009 141.922 26.5636C141.922 26.4565 141.901 26.3387 141.852 26.2263L137.826 15.6032C137.756 15.4265 137.649 15.2658 137.521 15.1587C137.478 15.1213 137.43 15.0891 137.387 15.0677Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
-        d="M138.142 21.263C137.864 21.1237 137.639 20.7329 137.639 20.3955V17.9486C137.639 17.6113 137.864 17.4506 138.142 17.5952C138.421 17.7398 138.645 18.1253 138.645 18.4626V20.9096C138.645 21.2469 138.421 21.4075 138.142 21.263Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M137.392 21.2039C137.114 21.0647 136.889 20.6738 136.889 20.3365V17.8895C136.889 17.5522 137.114 17.3916 137.392 17.5361C137.671 17.6807 137.895 18.0662 137.895 18.4035V20.8505C137.895 21.1878 137.671 21.3484 137.392 21.2039Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
-        d="M138.147 23.7153C137.869 23.576 137.644 23.1852 137.644 22.8478C137.644 22.5105 137.869 22.3499 138.142 22.4891C138.421 22.6337 138.645 23.0245 138.645 23.3619C138.645 23.6992 138.421 23.8598 138.142 23.7153H138.147Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M137.397 23.6562C137.119 23.517 136.894 23.1261 136.894 22.7888C136.894 22.4514 137.119 22.2908 137.392 22.43C137.671 22.5746 137.895 22.9655 137.895 23.3028C137.895 23.6401 137.671 23.8007 137.392 23.6562H137.397Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M17.1274 48.2278C15.9602 47.6334 14.4609 47.6816 12.8171 48.5223C9.10654 50.4124 6.10273 55.6061 6.10273 60.1145C6.10273 62.6311 7.03975 64.4087 8.51221 65.1584L6.12414 63.9429C4.65168 63.1933 3.71466 61.4156 3.71466 58.8991C3.71466 54.3853 6.72385 49.1916 10.4291 47.3068C12.0675 46.4715 13.5721 46.418 14.7394 47.0123L17.1274 48.2278Z"
+        d="M16.3774 48.1687C15.2102 47.5743 13.7109 47.6225 12.0671 48.4632C8.35654 50.3533 5.35273 55.547 5.35273 60.0554C5.35273 62.572 6.28975 64.3497 7.76221 65.0993L5.37414 63.8838C3.90168 63.1342 2.96466 61.3566 2.96466 58.84C2.96466 54.3262 5.97385 49.1325 9.67909 47.2477C11.3175 46.4124 12.8221 46.3589 13.9894 46.9532L16.3774 48.1687Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.5"
         strokeLinecap="round"
         strokeLinejoin="round"
@@ -108,7 +114,87 @@ export function Error404VerticalStackIllustration({ className }: TIllustrationAs
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M17.1275 48.2276C18.5999 48.9773 19.5369 50.7549 19.5369 53.2715C19.5369 57.7852 16.5278 62.979 12.8225 64.8637C11.1841 65.699 9.67952 65.7526 8.51226 65.1582C7.0398 64.4086 6.10278 62.631 6.10278 60.1144C6.10278 55.6006 9.11194 50.4069 12.8172 48.5221C14.4556 47.6869 15.9602 47.6333 17.1275 48.2276Z"
+        d="M16.3775 48.1686C17.8499 48.9182 18.7869 50.6958 18.7869 53.2124C18.7869 57.7262 15.7778 62.9199 12.0725 64.8047C10.4341 65.6399 8.92952 65.6935 7.76226 65.0992C6.2898 64.3495 5.35278 62.5719 5.35278 60.0553C5.35278 55.5416 8.36194 50.3478 12.0672 48.4631C13.7056 47.6278 15.2102 47.5742 16.3775 48.1686Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M14.7443 58.9846C14.6479 59.0328 14.5516 59.0382 14.4766 58.9846L9.12221 55.1991C8.97228 55.092 8.97228 54.8028 9.12221 54.5458C9.27213 54.2888 9.50772 54.171 9.65765 54.2728L15.012 58.0583C15.162 58.1654 15.162 58.4545 15.012 58.7116C14.9371 58.8401 14.8407 58.9311 14.7443 58.9846Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M12.0671 61.6993C9.7701 62.8719 7.90143 61.5493 7.90143 58.7543C7.90143 55.9593 9.7701 52.736 12.0671 51.5634C14.3642 50.3908 16.2329 51.7133 16.2329 54.5083C16.2329 57.3033 14.3642 60.5266 12.0671 61.6993ZM12.0671 52.4843C10.1877 53.4428 8.66174 56.0825 8.66174 58.3688C8.66174 60.6551 10.1931 61.7367 12.0671 60.7783C13.9412 59.8199 15.4725 57.1801 15.4725 54.8938C15.4725 52.6075 13.9412 51.5259 12.0671 52.4843Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M51.4595 105.22C51.3738 105.22 51.2935 105.198 51.2185 105.161L46.4478 102.73C46.2711 102.639 46.1533 102.457 46.1533 102.253V97.263L36.4136 102.227C36.3387 102.264 36.253 102.285 36.1727 102.285C36.0924 102.285 36.0067 102.264 35.9317 102.227L31.161 99.7956C30.9843 99.7046 30.8665 99.5226 30.8665 99.3191V93.0063C30.8665 92.9259 30.8825 92.8456 30.92 92.776L45.9337 61.3832C45.9819 61.2761 46.0676 61.1905 46.1747 61.1369L52.1448 58.0956C52.2198 58.0581 52.3055 58.0367 52.3858 58.0367C52.4661 58.0367 52.5518 58.0581 52.6267 58.0956L57.3975 60.5265C57.5742 60.6175 57.692 60.7996 57.692 61.0031V80.6108L59.0788 81.3176C58.9128 79.5667 58.8325 77.5856 58.8325 75.4117C58.8325 60.5426 62.618 51.9809 71.1047 47.6545C73.1662 46.6051 74.9224 46.0911 76.4645 46.0911C77.4015 46.0911 78.2636 46.2892 79.0239 46.6747L83.7946 49.1056C86.3701 50.4174 87.848 53.8174 88.3941 59.7287L101.025 33.3101C101.073 33.203 101.159 33.1174 101.266 33.0638L107.236 30.0225C107.311 29.985 107.397 29.9636 107.477 29.9636C107.557 29.9636 107.643 29.985 107.718 30.0225L112.489 32.4534C112.666 32.5444 112.783 32.7265 112.783 32.93V52.5378L116.392 54.3797C116.569 54.4707 116.687 54.6527 116.687 54.8562V61.0031C116.687 61.2065 116.574 61.3886 116.392 61.4796L112.783 63.3215V73.7197C112.783 73.9232 112.671 74.1053 112.489 74.1963L106.797 77.0984C106.722 77.1358 106.636 77.1573 106.556 77.1573C106.476 77.1573 106.39 77.1358 106.315 77.0984L101.544 74.6675C101.368 74.5764 101.25 74.3944 101.25 74.1909V69.2006L91.5103 74.1642C91.4354 74.2016 91.3497 74.2231 91.2694 74.2231C91.1891 74.2231 91.1034 74.2016 91.0284 74.1642L88.3031 72.7774C87.2215 83.2398 83.4145 89.8043 76.3681 93.3918C74.3227 94.4359 72.5772 94.9446 71.0298 94.9446C70.1195 94.9446 69.2842 94.7625 68.54 94.3984C68.5132 94.3877 68.4811 94.377 68.4543 94.3663L63.6836 91.9354C62.7412 91.4535 61.9327 90.6664 61.2687 89.5848L57.6974 91.4053V101.804C57.6974 102.007 57.5849 102.189 57.4028 102.28L51.7111 105.182C51.6362 105.22 51.5505 105.241 51.4702 105.241L51.4595 105.22ZM45.8481 85.2103L46.1533 85.055V84.5731L45.8481 85.2103ZM76.2289 57.3567C72.106 59.5413 70.4943 64.4727 70.4943 74.8656C70.4943 78.8439 70.7353 81.7406 71.2279 83.6736C75.3454 81.489 76.9571 76.5576 76.9571 66.17C76.9571 62.1275 76.7268 59.3004 76.2289 57.3621V57.3567ZM100.939 57.1372L101.245 56.9819V56.5L100.939 57.1372Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+      />
+      <path
+        d="M107.472 30.4991L112.243 32.93V52.8644L116.146 54.8509V60.9977L112.243 62.9842V73.7091L106.551 76.6111L101.78 74.1803V68.3172L91.264 73.6769L87.8372 71.9314C86.9323 82.1422 83.5376 89.1244 76.1164 92.9046C74.1407 93.9112 72.454 94.3984 71.0244 94.3984C70.1141 94.3984 69.3057 94.2003 68.5935 93.8148C68.6257 93.8309 68.6578 93.8577 68.6899 93.8737L63.9191 91.4428C62.7037 90.8217 61.7613 89.6598 61.0545 87.9892V89.0708L57.1512 91.0573V101.782L51.4594 104.684L46.6887 102.253V96.3903L36.1727 101.75L31.4019 99.3191V93.0063L46.4156 61.6135L52.3857 58.5722L57.1565 61.0031V80.9375L59.7106 82.2386C59.475 80.2414 59.3625 77.9658 59.3625 75.4064C59.3625 61.6617 62.4841 52.6449 71.3456 48.1258C73.3321 47.1138 75.0241 46.6212 76.4645 46.6212C77.3265 46.6212 78.0975 46.7979 78.7775 47.1459L83.5483 49.5768C83.5001 49.55 83.4466 49.5286 83.393 49.5072C86.2576 50.8351 87.6445 55.0651 87.9979 61.7795L101.502 33.5404L107.472 30.4991ZM81.2299 49.0574C81.2299 49.0574 81.1977 49.0574 81.1817 49.0574C81.1817 49.0574 81.1764 49.0574 81.171 49.0574C81.171 49.0574 81.1763 49.0574 81.1817 49.0574C81.1977 49.0574 81.2138 49.0574 81.2299 49.0574C81.3691 49.0574 81.5083 49.0574 81.6422 49.0735C81.6422 49.0735 81.6529 49.0735 81.6582 49.0735C81.6582 49.0735 81.6743 49.0735 81.685 49.0735C81.6743 49.0735 81.6689 49.0735 81.6582 49.0735C81.6582 49.0735 81.6475 49.0735 81.6422 49.0735C81.5083 49.0628 81.3691 49.0574 81.2299 49.0574ZM80.598 49.0896C80.748 49.0735 80.8979 49.0681 81.0425 49.0628C80.8979 49.0628 80.748 49.0735 80.598 49.0896ZM82.2097 49.1431C82.0759 49.1217 81.9366 49.1003 81.7974 49.0896C81.9366 49.1056 82.0759 49.1217 82.2097 49.1431ZM82.788 49.277C82.6434 49.2341 82.4989 49.1966 82.3489 49.1645C82.4989 49.1966 82.6434 49.2288 82.788 49.277ZM83.2752 49.4537C83.1307 49.3894 82.9808 49.3305 82.8255 49.2877C82.9808 49.3359 83.1307 49.3948 83.2752 49.4537ZM78.5581 49.5286C78.7348 49.4697 78.9061 49.4215 79.0721 49.3733C78.9007 49.4215 78.7294 49.4697 78.5581 49.5286ZM77.7549 49.8178C77.9798 49.7267 78.1993 49.6464 78.4188 49.5768C78.2047 49.6518 77.9798 49.7321 77.7549 49.8178ZM99.7722 58.3366L101.78 57.3139V54.1495L99.7722 58.3366ZM79.5647 56.4144C79.6718 56.4733 79.7788 56.5375 79.8806 56.6125C79.7788 56.5375 79.6718 56.4679 79.5647 56.4144ZM70.8905 84.4286C71.0405 84.3643 71.1904 84.2947 71.3403 84.2144C75.9772 81.8531 77.4925 76.3863 77.4925 66.1647C77.4925 61.8437 77.2248 58.6686 76.5662 56.5964C76.4163 56.6607 76.2663 56.7303 76.1111 56.8106C71.4742 59.1719 69.9589 64.5798 69.9589 74.8603C69.9589 79.1705 70.2319 82.3511 70.8852 84.4232M80.7801 57.6887C80.6998 57.5495 80.6195 57.421 80.5338 57.2978C80.6195 57.4156 80.6998 57.5495 80.7801 57.6887ZM81.0157 58.1599C80.9622 58.0368 80.9032 57.9243 80.8443 57.8119C80.9032 57.9243 80.9568 58.0368 81.0157 58.1599ZM81.0746 58.2938C81.1442 58.4544 81.2085 58.6257 81.2673 58.8024C81.2085 58.6257 81.1389 58.4544 81.0746 58.2938ZM81.6315 60.1143C81.5886 59.9269 81.5458 59.7502 81.503 59.5788C81.5458 59.7502 81.5886 59.9322 81.6315 60.1143ZM81.9099 61.7366C81.8831 61.5332 81.851 61.3351 81.8242 61.1423C81.8564 61.3351 81.8831 61.5332 81.9099 61.7366ZM82.0331 62.7915C82.0063 62.5023 81.9741 62.2292 81.9366 61.9615C81.9688 62.2292 82.0009 62.5077 82.0331 62.7915ZM82.108 63.7017C82.0866 63.4286 82.0652 63.1609 82.0438 62.9039C82.0705 63.1609 82.092 63.4286 82.108 63.7017ZM82.1776 64.7619C82.1616 64.4941 82.1508 64.2371 82.1294 63.9801C82.1455 64.2318 82.1616 64.4941 82.1776 64.7619ZM82.2258 65.9934C82.2151 65.64 82.2044 65.3027 82.1883 64.9707C82.2044 65.3027 82.2151 65.6453 82.2258 65.9934ZM82.2525 67.1178C82.2525 66.8233 82.2419 66.5342 82.2312 66.2557C82.2365 66.5395 82.2472 66.8233 82.2525 67.1178ZM82.2633 68.5956C82.2633 68.1994 82.2633 67.8085 82.2579 67.4337C82.2579 67.8139 82.2633 68.1994 82.2633 68.5956ZM64.1547 79.7328C64.1547 79.5882 64.1494 79.4436 64.144 79.2991C64.144 79.4436 64.1494 79.5882 64.1547 79.7328ZM64.2029 81.1784C64.1975 81.0285 64.1922 80.8732 64.1868 80.718C64.1922 80.8732 64.1975 81.0232 64.2029 81.1784ZM64.2779 82.5063C64.2725 82.3993 64.2672 82.2868 64.2565 82.1797C64.2618 82.2868 64.2672 82.3993 64.2779 82.5063ZM44.6808 86.4043L46.6887 85.3816V82.2172L44.6808 86.4043ZM75.6399 86.8702C75.7952 86.8006 75.9504 86.731 76.1164 86.6453C75.9558 86.731 75.7952 86.8006 75.6399 86.8702ZM75.1794 87.0522C75.2811 87.0147 75.3882 86.9773 75.4953 86.9291C75.3882 86.9719 75.2811 87.0147 75.1794 87.0522ZM72.9895 87.1754C72.9145 87.1486 72.8449 87.1165 72.7699 87.0843C72.8395 87.1165 72.9145 87.1486 72.9895 87.1754ZM73.3322 87.2664C73.2519 87.2503 73.1769 87.2343 73.0965 87.2129C73.1715 87.2343 73.2519 87.2557 73.3322 87.2664ZM74.2745 87.2771C74.3763 87.261 74.4833 87.245 74.5904 87.2182C74.4833 87.2396 74.3763 87.261 74.2745 87.2771ZM74.1728 87.2932C74.055 87.3039 73.9372 87.3146 73.8247 87.3146C73.8247 87.3146 73.8141 87.3146 73.8087 87.3146C73.8141 87.3146 73.8194 87.3146 73.8247 87.3146C73.9372 87.3146 74.055 87.3092 74.1728 87.2932ZM65.5254 89.633C65.4879 89.5313 65.4558 89.4242 65.4237 89.3225C65.4558 89.4296 65.4933 89.5313 65.5254 89.633ZM65.836 90.4362C65.8039 90.3612 65.7717 90.2809 65.745 90.2006C65.7771 90.2809 65.8039 90.3612 65.836 90.4362ZM66.682 92.0157C66.6338 91.9408 66.5856 91.8712 66.5374 91.7962C66.5856 91.8712 66.6338 91.9461 66.682 92.0157ZM67.5601 93.0706C67.5601 93.0706 67.528 93.0384 67.5173 93.0224C67.5334 93.0384 67.5494 93.0545 67.5601 93.0706ZM68.2133 93.5846C68.1598 93.5471 68.1009 93.515 68.0474 93.4721C68.1009 93.5096 68.1544 93.5471 68.2133 93.5846ZM107.472 29.4282C107.306 29.4282 107.14 29.4657 106.985 29.546L101.014 32.5873C100.806 32.6944 100.634 32.8657 100.532 33.0799L88.6993 57.8226C88.0085 52.9019 86.52 49.9516 84.1106 48.6773C84.0838 48.6612 84.0516 48.6451 84.0249 48.6291L79.2541 46.1982C78.4188 45.7698 77.4764 45.5557 76.4538 45.5557C74.8207 45.5557 72.9895 46.0857 70.8477 47.1727C62.1575 51.6008 58.2809 60.307 58.2809 75.4064C58.2809 77.2108 58.3398 78.8814 58.4523 80.4021L58.2167 80.2843V61.0084C58.2167 60.6069 57.9918 60.2374 57.6331 60.0554L52.8623 57.6245C52.707 57.5442 52.541 57.5067 52.3751 57.5067C52.2091 57.5067 52.0431 57.5442 51.8878 57.6245L45.9177 60.6658C45.7088 60.7728 45.5375 60.9442 45.4357 61.1584L30.422 92.5512C30.3524 92.6958 30.3149 92.851 30.3149 93.0117V99.3245C30.3149 99.7261 30.5398 100.096 30.8986 100.278L35.6693 102.708C35.8246 102.789 35.9906 102.826 36.1566 102.826C36.3226 102.826 36.4886 102.789 36.6438 102.708L45.6017 98.1412V102.259C45.6017 102.66 45.8266 103.03 46.1854 103.212L50.9561 105.643C51.1114 105.723 51.2774 105.76 51.4434 105.76C51.6094 105.76 51.7754 105.723 51.9306 105.643L57.6224 102.741C57.9811 102.559 58.206 102.189 58.206 101.788V91.7159L61.0545 90.2649C61.7185 91.2233 62.5056 91.9354 63.4158 92.4013L68.1866 94.8322C69.0272 95.2551 69.975 95.4747 71.003 95.4747C72.6308 95.4747 74.4566 94.95 76.5823 93.8684C83.634 90.2756 87.516 83.8128 88.7207 73.602L90.7553 74.6407C90.9106 74.7211 91.0766 74.7585 91.2426 74.7585C91.4086 74.7585 91.5746 74.7211 91.7299 74.6407L100.688 70.0734V74.191C100.688 74.5925 100.913 74.962 101.271 75.1441L106.042 77.5749C106.197 77.6553 106.363 77.6927 106.529 77.6927C106.695 77.6927 106.861 77.6553 107.017 77.5749L112.708 74.6729C113.067 74.4908 113.292 74.1214 113.292 73.7198V63.6482L116.612 61.9562C116.97 61.7741 117.195 61.4047 117.195 61.0031V54.8562C117.195 54.4547 116.97 54.0852 116.612 53.9032L113.292 52.2112V32.9353C113.292 32.5338 113.067 32.1643 112.708 31.9823L107.938 29.5514C107.782 29.4711 107.616 29.4336 107.45 29.4336L107.472 29.4282ZM71.592 82.8383C71.2172 80.975 71.0351 78.346 71.0351 74.8656C71.0351 65.2545 72.4058 60.4409 75.8701 58.192C76.2449 60.0554 76.427 62.6844 76.427 66.1647C76.427 75.7759 75.0563 80.5895 71.592 82.8383Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+      />
+      <path
+        d="M106.551 65.8862V76.6111L101.78 74.1802V63.4553L106.551 65.8862Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M116.146 54.8508L112.243 56.8427L107.472 54.4118L111.375 52.4253L116.146 54.8508Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M96.6826 64.7726L106.551 59.7449L101.78 57.314L91.9119 62.3417L96.6826 64.7726Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M106.551 59.7448V44.2117L101.78 41.7808V57.3139L106.551 59.7448Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M112.242 32.9299L106.278 35.9712L101.507 33.5403L107.472 30.499L112.242 32.9299Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M106.278 35.9712L91.264 67.364L86.4932 64.9331L101.507 33.5403L106.278 35.9712Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M91.264 67.364V73.6768L86.4932 71.2459V64.9331L91.264 67.364Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M112.243 32.9299V56.8427L116.146 54.8562V61.003L112.243 62.9895V73.7144L106.551 76.6164V65.8916L91.264 73.6822V67.3694L106.278 35.9766L112.248 32.9353L112.243 32.9299ZM106.551 59.7447V44.2116L96.6827 64.7725L106.551 59.7447Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
         stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
         strokeWidth="0.5"
@@ -116,23 +202,7 @@ export function Error404VerticalStackIllustration({ className }: TIllustrationAs
         strokeLinejoin="round"
       />
       <path
-        d="M15.4943 59.0437C15.3979 59.0919 15.3016 59.0972 15.2266 59.0437L9.87221 55.2582C9.72228 55.1511 9.72228 54.8619 9.87221 54.6049C10.0221 54.3479 10.2577 54.2301 10.4076 54.3318L15.762 58.1174C15.912 58.2245 15.912 58.5136 15.762 58.7706C15.6871 58.8991 15.5907 58.9902 15.4943 59.0437Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      />
-      <path
-        d="M12.8171 61.7583C10.5201 62.931 8.65143 61.6084 8.65143 58.8134C8.65143 56.0184 10.5201 52.7951 12.8171 51.6225C15.1142 50.4499 16.9829 51.7724 16.9829 54.5674C16.9829 57.3624 15.1142 60.5857 12.8171 61.7583ZM12.8171 52.5434C10.9377 53.5019 9.41174 56.1416 9.41174 58.4279C9.41174 60.7142 10.9431 61.7958 12.8171 60.8374C14.6912 59.8789 16.2225 57.2392 16.2225 54.9529C16.2225 52.6666 14.6912 51.585 12.8171 52.5434Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      />
-      <path
-        d="M52.2095 105.279C52.1238 105.279 52.0435 105.257 51.9685 105.22L47.1978 102.789C47.0211 102.698 46.9033 102.516 46.9033 102.312V97.3221L37.1636 102.286C37.0887 102.323 37.003 102.345 36.9227 102.345C36.8424 102.345 36.7567 102.323 36.6817 102.286L31.911 99.8547C31.7343 99.7637 31.6165 99.5816 31.6165 99.3782V93.0653C31.6165 92.985 31.6325 92.9047 31.67 92.8351L46.6837 61.4423C46.7319 61.3352 46.8176 61.2495 46.9247 61.196L52.8948 58.1547C52.9698 58.1172 53.0555 58.0958 53.1358 58.0958C53.2161 58.0958 53.3018 58.1172 53.3767 58.1547L58.1475 60.5856C58.3242 60.6766 58.442 60.8587 58.442 61.0621V80.6699L59.8288 81.3767C59.6628 79.6258 59.5825 77.6447 59.5825 75.4708C59.5825 60.6017 63.368 52.04 71.8547 47.7136C73.9162 46.6642 75.6724 46.1501 77.2145 46.1501C78.1515 46.1501 79.0136 46.3483 79.7739 46.7338L84.5446 49.1647C87.1201 50.4765 88.598 53.8765 89.1441 59.7878L101.775 33.3692C101.823 33.2621 101.909 33.1764 102.016 33.1229L107.986 30.0816C108.061 30.0441 108.147 30.0227 108.227 30.0227C108.307 30.0227 108.393 30.0441 108.468 30.0816L113.239 32.5125C113.416 32.6035 113.533 32.7856 113.533 32.989V52.5968L117.142 54.4387C117.319 54.5298 117.437 54.7118 117.437 54.9153V61.0621C117.437 61.2656 117.324 61.4476 117.142 61.5387L113.533 63.3806V73.7788C113.533 73.9823 113.421 74.1643 113.239 74.2554L107.547 77.1574C107.472 77.1949 107.386 77.2163 107.306 77.2163C107.226 77.2163 107.14 77.1949 107.065 77.1574L102.294 74.7265C102.118 74.6355 102 74.4535 102 74.25V69.2597L92.2603 74.2232C92.1854 74.2607 92.0997 74.2821 92.0194 74.2821C91.9391 74.2821 91.8534 74.2607 91.7784 74.2232L89.0531 72.8364C87.9715 83.2989 84.1645 89.8634 77.1181 93.4509C75.0727 94.495 73.3272 95.0036 71.7798 95.0036C70.8695 95.0036 70.0342 94.8216 69.29 94.4575C69.2632 94.4468 69.2311 94.4361 69.2043 94.4254L64.4336 91.9945C63.4912 91.5126 62.6827 90.7255 62.0187 89.6439L58.4474 91.4644V101.863C58.4474 102.066 58.3349 102.248 58.1528 102.339L52.4611 105.241C52.3862 105.279 52.3005 105.3 52.2202 105.3L52.2095 105.279ZM46.5981 85.2693L46.9033 85.1141V84.6322L46.5981 85.2693ZM76.9789 57.4158C72.856 59.6004 71.2443 64.5318 71.2443 74.9247C71.2443 78.903 71.4853 81.7997 71.9779 83.7326C76.0954 81.548 77.7071 76.6166 77.7071 66.2291C77.7071 62.1866 77.4768 59.3594 76.9789 57.4211V57.4158ZM101.689 57.1963L101.995 57.041V56.5591L101.689 57.1963Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-      />
-      <path
-        d="M108.222 30.5582L112.993 32.9891V52.9235L116.896 54.91V61.0568L112.993 63.0433V73.7682L107.301 76.6702L102.53 74.2393V68.3763L92.014 73.736L88.5872 71.9905C87.6823 82.2013 84.2876 89.1835 76.8664 92.9637C74.8907 93.9703 73.204 94.4575 71.7744 94.4575C70.8641 94.4575 70.0557 94.2594 69.3435 93.8739C69.3757 93.89 69.4078 93.9167 69.4399 93.9328L64.6691 91.5019C63.4537 90.8808 62.5113 89.7189 61.8045 88.0483V89.1299L57.9012 91.1164V101.841L52.2094 104.743L47.4387 102.312V96.4494L36.9227 101.809L32.1519 99.3782V93.0654L47.1656 61.6726L53.1357 58.6313L57.9065 61.0622V80.9966L60.4606 82.2977C60.225 80.3005 60.1125 78.0249 60.1125 75.4655C60.1125 61.7208 63.2341 52.704 72.0956 48.1849C74.0821 47.1729 75.7741 46.6803 77.2145 46.6803C78.0765 46.6803 78.8475 46.857 79.5275 47.205L84.2983 49.6359C84.2501 49.6091 84.1966 49.5877 84.143 49.5663C87.0076 50.8942 88.3945 55.1241 88.7479 61.8386L102.252 33.5995L108.222 30.5582ZM81.9799 49.1165C81.9799 49.1165 81.9477 49.1165 81.9317 49.1165C81.9317 49.1165 81.9264 49.1165 81.921 49.1165C81.921 49.1165 81.9263 49.1165 81.9317 49.1165C81.9477 49.1165 81.9638 49.1165 81.9799 49.1165C82.1191 49.1165 82.2583 49.1165 82.3922 49.1326C82.3922 49.1326 82.4029 49.1326 82.4082 49.1326C82.4082 49.1326 82.4243 49.1326 82.435 49.1326C82.4243 49.1326 82.4189 49.1326 82.4082 49.1326C82.4082 49.1326 82.3975 49.1326 82.3922 49.1326C82.2583 49.1219 82.1191 49.1165 81.9799 49.1165ZM81.348 49.1486C81.498 49.1326 81.6479 49.1272 81.7925 49.1219C81.6479 49.1219 81.498 49.1326 81.348 49.1486ZM82.9597 49.2022C82.8259 49.1808 82.6866 49.1594 82.5474 49.1486C82.6866 49.1647 82.8259 49.1808 82.9597 49.2022ZM83.538 49.336C83.3934 49.2932 83.2489 49.2557 83.0989 49.2236C83.2489 49.2557 83.3934 49.2879 83.538 49.336ZM84.0252 49.5127C83.8807 49.4485 83.7308 49.3896 83.5755 49.3468C83.7308 49.3949 83.8807 49.4538 84.0252 49.5127ZM79.3081 49.5877C79.4848 49.5288 79.6561 49.4806 79.8221 49.4324C79.6507 49.4806 79.4794 49.5288 79.3081 49.5877ZM78.5049 49.8768C78.7298 49.7858 78.9493 49.7055 79.1688 49.6359C78.9547 49.7109 78.7298 49.7912 78.5049 49.8768ZM100.522 58.3957L102.53 57.373V54.2085L100.522 58.3957ZM80.3147 56.4735C80.4218 56.5324 80.5288 56.5966 80.6306 56.6716C80.5288 56.5966 80.4218 56.527 80.3147 56.4735ZM71.6405 84.4876C71.7905 84.4234 71.9404 84.3538 72.0903 84.2735C76.7272 81.9122 78.2425 76.4453 78.2425 66.2238C78.2425 61.9028 77.9748 58.7276 77.3162 56.6555C77.1663 56.7198 77.0163 56.7894 76.8611 56.8697C72.2242 59.231 70.7089 64.6389 70.7089 74.9193C70.7089 79.2296 70.9819 82.4101 71.6352 84.4823M81.5301 57.7478C81.4498 57.6086 81.3695 57.4801 81.2838 57.3569C81.3695 57.4747 81.4498 57.6086 81.5301 57.7478ZM81.7657 58.219C81.7122 58.0958 81.6532 57.9834 81.5943 57.8709C81.6532 57.9834 81.7068 58.0958 81.7657 58.219ZM81.8246 58.3528C81.8942 58.5135 81.9585 58.6848 82.0173 58.8615C81.9585 58.6848 81.8889 58.5135 81.8246 58.3528ZM82.3815 60.1733C82.3386 59.9859 82.2958 59.8092 82.253 59.6379C82.2958 59.8092 82.3386 59.9913 82.3815 60.1733ZM82.6599 61.7957C82.6331 61.5923 82.601 61.3941 82.5742 61.2014C82.6064 61.3941 82.6331 61.5923 82.6599 61.7957ZM82.7831 62.8505C82.7563 62.5614 82.7241 62.2883 82.6866 62.0206C82.7188 62.2883 82.7509 62.5668 82.7831 62.8505ZM82.858 63.7608C82.8366 63.4877 82.8152 63.22 82.7938 62.963C82.8205 63.22 82.842 63.4877 82.858 63.7608ZM82.9276 64.821C82.9116 64.5532 82.9008 64.2962 82.8794 64.0392C82.8955 64.2909 82.9116 64.5532 82.9276 64.821ZM82.9758 66.0525C82.9651 65.6991 82.9544 65.3618 82.9383 65.0298C82.9544 65.3618 82.9651 65.7044 82.9758 66.0525ZM83.0025 67.1769C83.0025 66.8824 82.9919 66.5933 82.9812 66.3148C82.9865 66.5986 82.9972 66.8824 83.0025 67.1769ZM83.0133 68.6547C83.0133 68.2585 83.0133 67.8676 83.0079 67.4928C83.0079 67.873 83.0133 68.2585 83.0133 68.6547ZM64.9047 79.7918C64.9047 79.6473 64.8994 79.5027 64.894 79.3581C64.894 79.5027 64.8994 79.6473 64.9047 79.7918ZM64.9529 81.2375C64.9475 81.0876 64.9422 80.9323 64.9368 80.7771C64.9422 80.9323 64.9475 81.0823 64.9529 81.2375ZM65.0279 82.5654C65.0225 82.4583 65.0172 82.3459 65.0065 82.2388C65.0118 82.3459 65.0172 82.4583 65.0279 82.5654ZM45.4308 86.4634L47.4387 85.4407V82.2763L45.4308 86.4634ZM76.3899 86.9293C76.5452 86.8596 76.7004 86.79 76.8664 86.7044C76.7058 86.79 76.5452 86.8596 76.3899 86.9293ZM75.9294 87.1113C76.0311 87.0738 76.1382 87.0363 76.2453 86.9882C76.1382 87.031 76.0311 87.0738 75.9294 87.1113ZM73.7395 87.2344C73.6645 87.2077 73.5949 87.1756 73.5199 87.1434C73.5895 87.1756 73.6645 87.2077 73.7395 87.2344ZM74.0822 87.3255C74.0019 87.3094 73.9269 87.2934 73.8465 87.2719C73.9215 87.2934 74.0019 87.3148 74.0822 87.3255ZM75.0245 87.3362C75.1263 87.3201 75.2333 87.3041 75.3404 87.2773C75.2333 87.2987 75.1263 87.3201 75.0245 87.3362ZM74.9228 87.3522C74.805 87.363 74.6872 87.3737 74.5747 87.3737C74.5747 87.3737 74.5641 87.3737 74.5587 87.3737C74.5641 87.3737 74.5694 87.3737 74.5747 87.3737C74.6872 87.3737 74.805 87.3683 74.9228 87.3522ZM66.2754 89.6921C66.2379 89.5904 66.2058 89.4833 66.1737 89.3816C66.2058 89.4887 66.2433 89.5904 66.2754 89.6921ZM66.586 90.4953C66.5539 90.4203 66.5217 90.34 66.495 90.2597C66.5271 90.34 66.5539 90.4203 66.586 90.4953ZM67.432 92.0748C67.3838 91.9999 67.3356 91.9303 67.2874 91.8553C67.3356 91.9303 67.3838 92.0052 67.432 92.0748ZM68.3101 93.1296C68.3101 93.1296 68.278 93.0975 68.2673 93.0815C68.2834 93.0975 68.2994 93.1136 68.3101 93.1296ZM68.9633 93.6437C68.9098 93.6062 68.8509 93.5741 68.7974 93.5312C68.8509 93.5687 68.9044 93.6062 68.9633 93.6437ZM108.222 29.4873C108.056 29.4873 107.89 29.5248 107.735 29.6051L101.764 32.6464C101.556 32.7535 101.384 32.9248 101.282 33.139L89.4493 57.8817C88.7585 52.961 87.27 50.0107 84.8606 48.7364C84.8338 48.7203 84.8016 48.7042 84.7749 48.6882L80.0041 46.2573C79.1688 45.8289 78.2264 45.6147 77.2038 45.6147C75.5707 45.6147 73.7395 46.1448 71.5977 47.2318C62.9075 51.6599 59.0309 60.3661 59.0309 75.4655C59.0309 77.2699 59.0898 78.9405 59.2023 80.4611L58.9667 80.3433V61.0675C58.9667 60.6659 58.7418 60.2965 58.3831 60.1144L53.6123 57.6835C53.457 57.6032 53.291 57.5658 53.1251 57.5658C52.9591 57.5658 52.7931 57.6032 52.6378 57.6835L46.6677 60.7248C46.4588 60.8319 46.2875 61.0033 46.1857 61.2174L31.172 92.6103C31.1024 92.7548 31.0649 92.9101 31.0649 93.0707V99.3836C31.0649 99.7851 31.2898 100.155 31.6486 100.337L36.4193 102.768C36.5746 102.848 36.7406 102.885 36.9066 102.885C37.0726 102.885 37.2386 102.848 37.3938 102.768L46.3517 98.2003V102.318C46.3517 102.719 46.5766 103.089 46.9354 103.271L51.7061 105.702C51.8614 105.782 52.0274 105.82 52.1934 105.82C52.3594 105.82 52.5254 105.782 52.6806 105.702L58.3724 102.8C58.7311 102.618 58.956 102.248 58.956 101.847V91.775L61.8045 90.3239C62.4685 91.2824 63.2556 91.9945 64.1658 92.4603L68.9366 94.8912C69.7772 95.3142 70.725 95.5338 71.753 95.5338C73.3808 95.5338 75.2066 95.009 77.3323 93.9274C84.384 90.3346 88.266 83.8719 89.4707 73.6611L91.5053 74.6998C91.6606 74.7801 91.8266 74.8176 91.9926 74.8176C92.1586 74.8176 92.3246 74.7801 92.4799 74.6998L101.438 70.1325V74.25C101.438 74.6516 101.663 75.0211 102.021 75.2031L106.792 77.634C106.947 77.7143 107.113 77.7518 107.279 77.7518C107.445 77.7518 107.611 77.7143 107.767 77.634L113.458 74.7319C113.817 74.5499 114.042 74.1804 114.042 73.7789V63.7072L117.362 62.0153C117.72 61.8332 117.945 61.4638 117.945 61.0622V54.9153C117.945 54.5137 117.72 54.1443 117.362 53.9622L114.042 52.2703V32.9944C114.042 32.5929 113.817 32.2234 113.458 32.0413L108.688 29.6105C108.532 29.5301 108.366 29.4927 108.2 29.4927L108.222 29.4873ZM72.342 82.8974C71.9672 81.0341 71.7851 78.4051 71.7851 74.9247C71.7851 65.3136 73.1558 60.5 76.6201 58.2511C76.9949 60.1144 77.177 62.7435 77.177 66.2238C77.177 75.8349 75.8063 80.6485 72.342 82.8974Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
-      />
-      <path
-        d="M107.301 65.9453V76.6701L102.53 74.2393V63.5144L107.301 65.9453Z"
+        d="M72.695 87.0575C73.5731 87.5072 74.6975 87.368 76.1111 86.6505C80.748 84.2892 82.2633 78.8224 82.2633 68.6009C82.2633 61.4688 81.5351 57.4209 79.5379 56.4036L74.7671 53.9727C76.7643 54.99 77.4926 59.0326 77.4926 66.17C77.4926 76.3915 75.9772 81.8583 71.3403 84.2196C69.9267 84.9425 68.8024 85.0763 67.9243 84.6266L72.695 87.0575Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
         stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
         strokeWidth="0.5"
@@ -140,7 +210,7 @@ export function Error404VerticalStackIllustration({ className }: TIllustrationAs
         strokeLinejoin="round"
       />
       <path
-        d="M116.896 54.9099L112.993 56.9018L108.222 54.4709L112.125 52.4844L116.896 54.9099Z"
+        d="M83.5483 49.582C81.7278 48.6557 79.2862 48.9448 76.1164 50.5618C67.2549 55.0756 64.1333 64.0978 64.1333 77.8425C64.1333 86.6344 65.4184 92.2137 68.6899 93.8789L63.9191 91.448C60.6476 89.7828 59.3625 84.2035 59.3625 75.4116C59.3625 61.6669 62.4841 52.6501 71.3457 48.1309C74.5208 46.5139 76.9571 46.2248 78.7776 47.1511L83.5483 49.582Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
         stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
         strokeWidth="0.5"
@@ -148,47 +218,7 @@ export function Error404VerticalStackIllustration({ className }: TIllustrationAs
         strokeLinejoin="round"
       />
       <path
-        d="M97.4326 64.8317L107.301 59.8039L102.53 57.373L92.6619 62.4008L97.4326 64.8317Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-        strokeWidth="0.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <path
-        d="M107.301 59.8038V44.2707L102.53 41.8398V57.3729L107.301 59.8038Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-        strokeWidth="0.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <path
-        d="M112.992 32.989L107.028 36.0303L102.257 33.5994L108.222 30.5581L112.992 32.989Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-        strokeWidth="0.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <path
-        d="M107.028 36.0303L92.014 67.4231L87.2432 64.9922L102.257 33.5994L107.028 36.0303Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-        strokeWidth="0.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <path
-        d="M92.014 67.4231V73.7359L87.2432 71.305V64.9922L92.014 67.4231Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-        strokeWidth="0.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <path
-        d="M112.993 32.989V56.9017L116.896 54.9153V61.0621L112.993 63.0486V73.7734L107.301 76.6755V65.9507L92.014 73.7413V67.4285L107.028 36.0357L112.998 32.9944L112.993 32.989ZM107.301 59.8038V44.2707L97.4327 64.8316L107.301 59.8038Z"
+        d="M76.1164 50.5564C84.978 46.0427 88.0996 51.879 88.0996 65.6237C88.0996 79.3684 84.978 88.3852 76.1164 92.9043C67.2549 97.4181 64.1333 91.5229 64.1333 77.8371C64.1333 64.1512 67.2549 55.0755 76.1164 50.5564ZM69.9642 74.8654C69.9642 85.0869 71.4795 89.0117 76.1164 86.6451C80.7533 84.2838 82.2686 78.8169 82.2686 68.5954C82.2686 58.3738 80.7533 54.4491 76.1164 56.8157C71.4795 59.177 69.9642 64.5849 69.9642 74.8654Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
         stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
         strokeWidth="0.5"
@@ -196,7 +226,7 @@ export function Error404VerticalStackIllustration({ className }: TIllustrationAs
         strokeLinejoin="round"
       />
       <path
-        d="M73.445 87.1166C74.3231 87.5663 75.4475 87.4271 76.8611 86.7096C81.498 84.3483 83.0133 78.8815 83.0133 68.6599C83.0133 61.5279 82.2851 57.48 80.2879 56.4626L75.5171 54.0317C77.5143 55.0491 78.2426 59.0916 78.2426 66.229C78.2426 76.4506 76.7272 81.9174 72.0903 84.2787C70.6767 85.0016 69.5524 85.1354 68.6743 84.6856L73.445 87.1166Z"
+        d="M51.4594 93.9592V104.684L46.6887 102.253V91.5283L51.4594 93.9592Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
         stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
         strokeWidth="0.5"
@@ -204,7 +234,7 @@ export function Error404VerticalStackIllustration({ className }: TIllustrationAs
         strokeLinejoin="round"
       />
       <path
-        d="M84.2983 49.6411C82.4778 48.7148 80.0362 49.0039 76.8664 50.6209C68.0049 55.1347 64.8833 64.1568 64.8833 77.9016C64.8833 86.6935 66.1684 92.2728 69.4399 93.938L64.6691 91.5071C61.3976 89.8419 60.1125 84.2626 60.1125 75.4707C60.1125 61.7259 63.2341 52.7091 72.0957 48.19C75.2708 46.573 77.7071 46.2839 79.5276 47.2102L84.2983 49.6411Z"
+        d="M61.0545 82.9238L57.1512 84.9103L52.3804 82.4794L56.2838 80.4929L61.0545 82.9238Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
         stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
         strokeWidth="0.5"
@@ -212,15 +242,7 @@ export function Error404VerticalStackIllustration({ className }: TIllustrationAs
         strokeLinejoin="round"
       />
       <path
-        d="M76.8664 50.6155C85.728 46.1018 88.8496 51.938 88.8496 65.6828C88.8496 79.4275 85.728 88.4443 76.8664 92.9634C68.0049 97.4772 64.8833 91.582 64.8833 77.8962C64.8833 64.2103 68.0049 55.1346 76.8664 50.6155ZM70.7142 74.9245C70.7142 85.146 72.2295 89.0708 76.8664 86.7041C81.5033 84.3428 83.0186 78.876 83.0186 68.6545C83.0186 58.4329 81.5033 54.5082 76.8664 56.8748C72.2295 59.2361 70.7142 64.644 70.7142 74.9245Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-        strokeWidth="0.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <path
-        d="M52.2094 94.0183V104.743L47.4387 102.312V91.5874L52.2094 94.0183Z"
+        d="M41.5913 92.8403L51.4594 87.8125L46.6887 85.3816L36.8205 90.4094L41.5913 92.8403Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
         stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
         strokeWidth="0.5"
@@ -228,7 +250,7 @@ export function Error404VerticalStackIllustration({ className }: TIllustrationAs
         strokeLinejoin="round"
       />
       <path
-        d="M61.8045 82.9829L57.9012 84.9694L53.1304 82.5385L57.0338 80.552L61.8045 82.9829Z"
+        d="M51.4594 87.8124V72.2847L46.6887 69.8538V85.3815L51.4594 87.8124Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
         stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
         strokeWidth="0.5"
@@ -236,7 +258,7 @@ export function Error404VerticalStackIllustration({ className }: TIllustrationAs
         strokeLinejoin="round"
       />
       <path
-        d="M42.3413 92.8993L52.2094 87.8716L47.4387 85.4407L37.5705 90.4685L42.3413 92.8993Z"
+        d="M57.1511 61.0029L51.1863 64.0442L46.4156 61.6133L52.3804 58.572L57.1511 61.0029Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
         stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
         strokeWidth="0.5"
@@ -244,7 +266,7 @@ export function Error404VerticalStackIllustration({ className }: TIllustrationAs
         strokeLinejoin="round"
       />
       <path
-        d="M52.2094 87.8715V72.3437L47.4387 69.9128V85.4406L52.2094 87.8715Z"
+        d="M51.1864 64.0442L36.1726 95.437L31.4019 93.0061L46.4156 61.6133L51.1864 64.0442Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
         stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
         strokeWidth="0.5"
@@ -252,7 +274,7 @@ export function Error404VerticalStackIllustration({ className }: TIllustrationAs
         strokeLinejoin="round"
       />
       <path
-        d="M57.9011 61.062L51.9363 64.1033L47.1656 61.6724L53.1304 58.6311L57.9011 61.062Z"
+        d="M36.1726 95.437V101.75L31.4019 99.3189V93.0061L36.1726 95.437Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
         stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
         strokeWidth="0.5"
@@ -260,23 +282,7 @@ export function Error404VerticalStackIllustration({ className }: TIllustrationAs
         strokeLinejoin="round"
       />
       <path
-        d="M51.9364 64.1033L36.9226 95.4961L32.1519 93.0652L47.1656 61.6724L51.9364 64.1033Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-        strokeWidth="0.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <path
-        d="M36.9226 95.4961V101.809L32.1519 99.378V93.0652L36.9226 95.4961Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-        strokeWidth="0.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <path
-        d="M57.9012 61.062V84.9747L61.8045 82.9883V89.1351L57.9012 91.1216V101.846L52.2095 104.749V94.0237L36.9227 101.814V95.5015L51.9364 64.1087L57.9065 61.0674L57.9012 61.062ZM52.2095 87.8715V72.3384L42.3413 92.8992L52.2095 87.8715Z"
+        d="M57.1512 61.0029V84.9157L61.0545 82.9292V89.076L57.1512 91.0625V101.787L51.4595 104.689V93.9646L36.1727 101.755V95.4424L51.1864 64.0496L57.1565 61.0083L57.1512 61.0029ZM51.4595 87.8124V72.2793L41.5913 92.8402L51.4595 87.8124Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
         stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
         strokeWidth="0.5"
diff --git a/packages/propel/src/empty-state/assets/vertical-stack/archived-cycle.tsx b/packages/propel/src/empty-state/assets/vertical-stack/archived-cycle.tsx
index c5a5fceab..fd81f1bd1 100644
--- a/packages/propel/src/empty-state/assets/vertical-stack/archived-cycle.tsx
+++ b/packages/propel/src/empty-state/assets/vertical-stack/archived-cycle.tsx
@@ -1,29 +1,35 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper";
 import type { TIllustrationAssetProps } from "../helper";
 
 export function ArchivedCycleVerticalStackIllustration({ className }: TIllustrationAssetProps) {
   return (
     <svg
-      width="162"
-      height="175"
-      viewBox="0 0 162 175"
+      width="161"
+      height="174"
+      viewBox="0 0 161 174"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       className={className}
     >
       <g opacity="0.2">
         <path
-          d="M1 139.94C1 141.957 2.50994 143.968 5.52448 145.51L44.34 165.289C50.3744 168.362 60.1543 168.362 66.1888 165.289L147.752 123.731C150.767 122.194 152.277 120.183 152.277 118.166V124.606C152.277 126.623 150.767 128.634 147.752 130.171L66.1888 171.729C60.1543 174.802 50.3744 174.802 44.34 171.729L5.52448 151.95C2.5046 150.414 1 148.397 1 146.38V139.94Z"
+          d="M0.25 139.223C0.25 141.24 1.75994 143.252 4.77448 144.793L43.59 164.572C49.6244 167.645 59.4043 167.645 65.4388 164.572L147.002 123.014C150.017 121.477 151.527 119.466 151.527 117.449V123.889C151.527 125.906 150.017 127.917 147.002 129.454L65.4388 171.012C59.4043 174.085 49.6244 174.085 43.59 171.012L4.77448 151.233C1.7546 149.697 0.25 147.68 0.25 145.663V139.223Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.5"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
         <path
-          d="M1 139.94C1 137.923 2.50994 135.911 5.52448 134.375L87.0878 92.8166C93.1222 89.7434 102.902 89.7434 108.937 92.8166L147.752 112.595C150.772 114.132 152.277 116.149 152.277 118.165C152.277 120.182 150.767 122.194 147.752 123.73L66.1888 165.288C60.1543 168.362 50.3744 168.362 44.34 165.288L5.52448 145.51C2.5046 143.973 1 141.956 1 139.94Z"
+          d="M0.25 139.223C0.25 137.206 1.75994 135.194 4.77448 133.658L86.3378 92.0998C92.3722 89.0266 102.152 89.0266 108.187 92.0998L147.002 111.878C150.022 113.415 151.527 115.432 151.527 117.449C151.527 119.465 150.017 121.477 147.002 123.014L65.4388 164.572C59.4043 167.645 49.6244 167.645 43.59 164.572L4.77448 144.793C1.7546 143.256 0.25 141.24 0.25 139.223Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.5"
           strokeLinecap="round"
           strokeLinejoin="round"
@@ -31,50 +37,50 @@ export function ArchivedCycleVerticalStackIllustration({ className }: TIllustrat
       </g>
       <g opacity="0.6">
         <path
-          d="M1 119.596C1 121.613 2.50994 123.625 5.52448 125.167L44.34 144.945C50.3744 148.018 60.1543 148.018 66.1888 144.945L147.752 103.387C150.767 101.851 152.277 99.8391 152.277 97.8223V104.262C152.277 106.279 150.767 108.29 147.752 109.827L66.1888 151.385C60.1543 154.458 50.3744 154.458 44.34 151.385L5.52448 131.601C2.5046 130.065 1 128.048 1 126.031V119.591V119.596Z"
+          d="M0.25 118.88C0.25 120.896 1.75994 122.908 4.77448 124.45L43.59 144.228C49.6244 147.302 59.4043 147.302 65.4388 144.228L147.002 102.67C150.017 101.134 151.527 99.1223 151.527 97.1055V103.545C151.527 105.562 150.017 107.574 147.002 109.11L65.4388 150.668C59.4043 153.741 49.6244 153.741 43.59 150.668L4.77448 130.884C1.7546 129.348 0.25 127.331 0.25 125.314V118.874V118.88Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.5"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
         <path
-          d="M1 119.596C1 117.579 2.50994 115.567 5.52448 114.031L87.0878 72.4729C93.1222 69.3997 102.902 69.3997 108.937 72.4729L147.752 92.2515C150.772 93.7881 152.277 95.8049 152.277 97.8217C152.277 99.8385 150.767 101.85 147.752 103.387L66.1888 144.945C60.1543 148.018 50.3744 148.018 44.34 144.945L5.52448 125.161C2.5046 123.624 1 121.607 1 119.59V119.596Z"
+          d="M0.25 118.879C0.25 116.862 1.75994 114.851 4.77448 113.314L86.3378 71.7561C92.3722 68.6829 102.152 68.6829 108.187 71.7561L147.002 91.5347C150.022 93.0713 151.527 95.0881 151.527 97.1049C151.527 99.1217 150.017 101.133 147.002 102.67L65.4388 144.228C59.4043 147.301 49.6244 147.301 43.59 144.228L4.77448 124.444C1.7546 122.907 0.25 120.89 0.25 118.874V118.879Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.5"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
       </g>
       <path
-        d="M1 99.2467C1 101.264 2.50994 103.275 5.52448 104.817L44.34 124.596C50.3744 127.669 60.1543 127.669 66.1888 124.596L147.752 83.0376C150.767 81.5009 152.277 79.4895 152.277 77.4727V83.9126C152.277 85.9294 150.767 87.9408 147.752 89.4775L66.1888 131.035C60.1543 134.109 50.3744 134.109 44.34 131.035L5.52448 111.257C2.5046 109.72 1 107.703 1 105.687V99.2467Z"
+        d="M0.25 98.5299C0.25 100.547 1.75994 102.558 4.77448 104.1L43.59 123.879C49.6244 126.952 59.4043 126.952 65.4388 123.879L147.002 82.3208C150.017 80.7841 151.527 78.7727 151.527 76.7559V83.1958C151.527 85.2126 150.017 87.224 147.002 88.7607L65.4388 130.319C59.4043 133.392 49.6244 133.392 43.59 130.319L4.77448 110.54C1.7546 109.003 0.25 106.987 0.25 104.97V98.5299Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.5"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
       <path
-        d="M1 99.2461C1 97.2293 2.50994 95.2179 5.52448 93.6813L87.0878 52.1233C93.1222 49.0501 102.902 49.0501 108.937 52.1233L147.752 71.9019C150.772 73.4385 152.277 75.4553 152.277 77.4721C152.277 79.4889 150.767 81.5004 147.752 83.037L66.1888 124.595C60.1543 127.668 50.3744 127.668 44.34 124.595L5.52448 104.816C2.5046 103.28 1 101.263 1 99.2461Z"
+        d="M0.25 98.5293C0.25 96.5125 1.75994 94.5011 4.77448 92.9645L86.3378 51.4065C92.3722 48.3333 102.152 48.3333 108.187 51.4065L147.002 71.1851C150.022 72.7217 151.527 74.7385 151.527 76.7553C151.527 78.7721 150.017 80.7836 147.002 82.3202L65.4388 123.878C59.4043 126.951 49.6244 126.951 43.59 123.878L4.77448 104.1C1.7546 102.563 0.25 100.546 0.25 98.5293Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.5"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
       <path
-        d="M65.0365 96.1829C64.2682 96.1829 63.5586 96.0175 62.913 95.6867L58.1591 93.2644C56.4358 92.3894 55.3793 90.4046 55.2513 87.8168L53.9281 61.1288C53.9174 60.9208 54.0295 60.7233 54.2162 60.6273L56.7079 59.3575L51.97 56.9458C50.7375 56.3162 50.0332 54.8863 50.0332 53.0243V50.7887C50.0332 47.5234 52.2261 43.7512 54.9205 42.38L97.1881 20.8407C97.8764 20.4886 98.554 20.3125 99.2049 20.3125C99.7171 20.3125 100.192 20.4245 100.624 20.6433L105.378 23.0656C106.611 23.6952 107.315 25.1251 107.315 26.9925V29.2281C107.315 32.4934 105.122 36.2602 102.428 37.6368L99.6797 39.0347L103.132 40.7954C103.319 40.8914 103.431 41.0888 103.42 41.2969L102.097 69.3348C101.857 74.3501 98.5059 79.8883 94.4616 81.9425L68.1044 95.3719C67.048 95.9108 66.0129 96.1829 65.0259 96.1829H65.0365Z"
+        d="M64.2865 95.4661C63.5182 95.4661 62.8086 95.3007 62.163 94.9699L57.4091 92.5476C55.6858 91.6726 54.6293 89.6878 54.5013 87.1001L53.1781 60.412C53.1674 60.204 53.2795 60.0065 53.4662 59.9105L55.9579 58.6407L51.22 56.229C49.9875 55.5994 49.2832 54.1695 49.2832 52.3075V50.0719C49.2832 46.8066 51.4761 43.0344 54.1705 41.6632L96.4381 20.1239C97.1264 19.7718 97.804 19.5957 98.4549 19.5957C98.9671 19.5957 99.4419 19.7077 99.8741 19.9265L104.628 22.3488C105.861 22.9784 106.565 24.4083 106.565 26.2757V28.5113C106.565 31.7766 104.372 35.5434 101.678 36.92L98.9297 38.3179L102.382 40.0786C102.569 40.1746 102.681 40.372 102.67 40.5801L101.347 68.618C101.107 73.6333 97.7559 79.1716 93.7116 81.2257L67.3544 94.6551C66.298 95.194 65.2629 95.4661 64.2759 95.4661H64.2865Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
       />
       <path
-        d="M99.2048 20.8464C99.6316 20.8464 100.032 20.9424 100.379 21.1185L105.132 23.5408C106.141 24.053 106.776 25.2695 106.776 26.9875V29.2231C106.776 32.307 104.716 35.8604 102.182 37.1569L98.5005 39.035L102.886 41.2706L101.563 69.3085C101.334 74.1531 98.1163 79.4885 94.2214 81.468L67.8642 94.8974C66.8612 95.4096 65.9061 95.6497 65.0311 95.6497C64.3428 95.6497 63.7132 95.5003 63.1477 95.2122L58.3938 92.7899C56.8945 92.0269 55.9021 90.2822 55.7794 87.7959L54.4562 61.1078L58.2711 59.1657C58.2284 59.1657 58.1804 59.1657 58.1377 59.1657C57.7108 59.1657 57.316 59.075 56.9639 58.8936L52.21 56.4713C51.2016 55.9591 50.5666 54.7426 50.5666 53.0246V50.789C50.5666 47.7051 52.6208 44.1517 55.1605 42.8552L97.4281 21.3159C98.0576 20.9958 98.6552 20.8464 99.1994 20.8464M99.2048 19.7793C98.4738 19.7793 97.7108 19.9767 96.9479 20.3662L54.6803 41.9055C51.7778 43.3834 49.5049 47.2836 49.5049 50.789V53.0246C49.5049 55.1001 50.3159 56.7007 51.7351 57.4264L55.5393 59.3631L53.9813 60.1581C53.6079 60.3502 53.3784 60.7397 53.3998 61.1612L54.723 87.8492C54.8564 90.629 56.0248 92.7792 57.9189 93.7449L62.6728 96.1672C63.3931 96.5353 64.1881 96.7221 65.0364 96.7221C66.1035 96.7221 67.224 96.4286 68.3551 95.8524L94.7123 82.423C98.9807 80.2568 102.385 74.6386 102.635 69.3618L103.959 41.3239C103.98 40.9024 103.751 40.5129 103.377 40.3209L100.859 39.035L102.673 38.112C105.575 36.634 107.848 32.7285 107.848 29.2284V26.9929C107.848 24.9174 107.037 23.3167 105.618 22.5911L100.864 20.1688C100.357 19.9127 99.797 19.7793 99.2048 19.7793Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        d="M98.4548 20.1296C98.8816 20.1296 99.2818 20.2256 99.6286 20.4017L104.382 22.824C105.391 23.3362 106.026 24.5527 106.026 26.2707V28.5063C106.026 31.5902 103.966 35.1436 101.432 36.4401L97.7505 38.3182L102.136 40.5538L100.813 68.5917C100.584 73.4363 97.3663 78.7717 93.4714 80.7512L67.1142 94.1806C66.1112 94.6928 65.1561 94.9329 64.2811 94.9329C63.5928 94.9329 62.9632 94.7835 62.3977 94.4954L57.6438 92.0731C56.1445 91.3101 55.1521 89.5654 55.0294 87.0791L53.7062 60.391L57.5211 58.4489C57.4784 58.4489 57.4304 58.4489 57.3877 58.4489C56.9608 58.4489 56.566 58.3582 56.2139 58.1768L51.46 55.7545C50.4516 55.2423 49.8166 54.0258 49.8166 52.3078V50.0722C49.8166 46.9883 51.8708 43.4349 54.4105 42.1384L96.6781 20.5991C97.3076 20.279 97.9052 20.1296 98.4494 20.1296M98.4548 19.0625C97.7238 19.0625 96.9608 19.2599 96.1979 19.6494L53.9303 41.1887C51.0278 42.6666 48.7549 46.5668 48.7549 50.0722V52.3078C48.7549 54.3833 49.5659 55.9839 50.9851 56.7096L54.7893 58.6463L53.2313 59.4413C52.8579 59.6334 52.6284 60.0229 52.6498 60.4444L53.973 87.1324C54.1064 89.9122 55.2748 92.0624 57.1689 93.0281L61.9228 95.4504C62.6431 95.8186 63.4381 96.0053 64.2864 96.0053C65.3535 96.0053 66.474 95.7118 67.6051 95.1356L93.9623 81.7062C98.2307 79.54 101.635 73.9218 101.885 68.645L103.209 40.6071C103.23 40.1856 103.001 39.7961 102.627 39.6041L100.109 38.3182L101.923 37.3952C104.825 35.9172 107.098 32.0117 107.098 28.5116V26.2761C107.098 24.2006 106.287 22.5999 104.868 21.8743L100.114 19.452C99.6072 19.1959 99.047 19.0625 98.4548 19.0625Z"
+        fill="var(--illustration-stroke-tertiary)"
       />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M102.891 41.27L59.2153 63.5295L54.4614 61.1072L98.1376 38.8477L102.891 41.27Z"
+        d="M102.141 40.5532L58.4653 62.8127L53.7114 60.3904L97.3876 38.1309L102.141 40.5532Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
         stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
         strokeWidth="0.5"
@@ -84,7 +90,7 @@ export function ArchivedCycleVerticalStackIllustration({ className }: TIllustrat
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M59.2153 63.5297L60.5385 90.2177C60.6612 92.7041 61.6536 94.4488 63.1529 95.2117L58.399 92.7894C56.8997 92.0265 55.9073 90.2818 55.7846 87.7954L54.4614 61.1074L59.2153 63.5297Z"
+        d="M58.4653 62.8129L59.7885 89.5009C59.9112 91.9873 60.9036 93.732 62.4029 94.4949L57.649 92.0726C56.1497 91.3097 55.1573 89.565 55.0346 87.0786L53.7114 60.3906L58.4653 62.8129Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
         stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
         strokeWidth="0.5"
@@ -94,7 +100,7 @@ export function ArchivedCycleVerticalStackIllustration({ className }: TIllustrat
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M102.891 41.2695L101.568 69.3074C101.339 74.152 98.1216 79.4875 94.2267 81.467L67.8695 94.8963C66.0821 95.8087 64.4334 95.8674 63.1529 95.2111C61.6536 94.4481 60.6612 92.7034 60.5385 90.2171L59.2153 63.5291L102.891 41.2695Z"
+        d="M102.141 40.5527L100.818 68.5906C100.589 73.4352 97.3716 78.7707 93.4767 80.7502L67.1195 94.1795C65.3321 95.0919 63.6834 95.1506 62.4029 94.4943C60.9036 93.7313 59.9112 91.9867 59.7885 89.5003L58.4653 62.8123L102.141 40.5527Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
         stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
         strokeWidth="0.5"
@@ -102,7 +108,7 @@ export function ArchivedCycleVerticalStackIllustration({ className }: TIllustrat
         strokeLinejoin="round"
       />
       <path
-        d="M105.138 23.5408C104.337 23.1353 103.313 23.1673 102.187 23.7382L59.9195 45.2775C57.3798 46.5687 55.3257 50.1221 55.3257 53.2113V55.4469C55.3257 57.1702 55.9659 58.3814 56.969 58.8936L52.2151 56.4713C51.2067 55.9591 50.5718 54.7426 50.5718 53.0246V50.789C50.5718 47.7051 52.6259 44.1517 55.1656 42.8552L97.4332 21.3159C98.5536 20.745 99.5834 20.7076 100.384 21.1185L105.138 23.5408Z"
+        d="M104.388 22.824C103.587 22.4185 102.563 22.4505 101.437 23.0214L59.1695 44.5607C56.6298 45.8519 54.5757 49.4053 54.5757 52.4945V54.7301C54.5757 56.4534 55.2159 57.6646 56.219 58.1768L51.4651 55.7545C50.4567 55.2423 49.8218 54.0258 49.8218 52.3078V50.0722C49.8218 46.9883 51.8759 43.4349 54.4156 42.1384L96.6832 20.5991C97.8036 20.0282 98.8334 19.9908 99.6337 20.4017L104.388 22.824Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
         stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
         strokeWidth="0.5"
@@ -110,7 +116,7 @@ export function ArchivedCycleVerticalStackIllustration({ className }: TIllustrat
         strokeLinejoin="round"
       />
       <path
-        d="M105.138 23.5403C106.146 24.0526 106.781 25.269 106.781 26.9871V29.2226C106.781 32.3065 104.721 35.8599 102.187 37.1565L59.9195 58.6957C58.7991 59.2666 57.7693 59.304 56.969 58.8932C55.9606 58.381 55.3257 57.1645 55.3257 55.4464V53.2109C55.3257 50.127 57.3798 46.5736 59.9195 45.277L102.187 23.7378C103.308 23.1669 104.337 23.1295 105.138 23.5403Z"
+        d="M104.388 22.8236C105.396 23.3358 106.031 24.5522 106.031 26.2703V28.5058C106.031 31.5897 103.971 35.1431 101.437 36.4397L59.1695 57.9789C58.0491 58.5498 57.0193 58.5872 56.219 58.1764C55.2106 57.6642 54.5757 56.4477 54.5757 54.7296V52.4941C54.5757 49.4102 56.6298 45.8568 59.1695 44.5602L101.437 23.021C102.558 22.4501 103.587 22.4127 104.388 22.8236Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
         stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
         strokeWidth="0.5"
@@ -120,17 +126,17 @@ export function ArchivedCycleVerticalStackIllustration({ className }: TIllustrat
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M86.0156 83.9164C85.7595 83.9164 85.5248 83.8631 85.306 83.751C85.2526 83.7243 85.2046 83.6977 85.1566 83.6603L80.4347 81.254C80.4347 81.254 80.392 81.2273 80.3707 81.2167L73.0184 76.0199C72.0474 75.4117 71.9246 73.731 72.7676 72.2104C73.3866 71.0793 74.3736 70.3483 75.286 70.3483C75.5421 70.3483 75.7822 70.407 76.0009 70.5191L79.6024 72.3545V59.3519C79.6024 57.9113 80.5361 56.3107 81.7312 55.7025C82.0514 55.5424 82.3715 55.457 82.6809 55.457C82.9371 55.457 83.1825 55.5157 83.4012 55.6278L88.1551 58.0501C88.7581 58.3595 89.1049 59.0318 89.1049 59.9015V63.0814C89.4303 62.9107 89.7665 62.8146 90.0866 62.8146C90.3427 62.8146 90.5774 62.868 90.7962 62.98L95.5501 65.4023C95.5875 65.4237 95.6248 65.445 95.6621 65.4664C96.6545 66.0906 96.7773 67.7713 95.9396 69.2919C95.9129 69.3453 95.8702 69.42 95.8275 69.484L88.4913 82.1504C87.8617 83.2442 86.9173 83.9218 86.021 83.9218L86.0156 83.9164Z"
+        d="M85.2656 83.1996C85.0095 83.1996 84.7748 83.1463 84.556 83.0342C84.5026 83.0076 84.4546 82.9809 84.4066 82.9435L79.6847 80.5372C79.6847 80.5372 79.642 80.5106 79.6207 80.4999L72.2684 75.3031C71.2974 74.6949 71.1746 73.0142 72.0176 71.4936C72.6366 70.3625 73.6236 69.6315 74.536 69.6315C74.7921 69.6315 75.0322 69.6902 75.2509 69.8023L78.8524 71.6377V58.6351C78.8524 57.1946 79.7861 55.5939 80.9812 54.9857C81.3014 54.8256 81.6215 54.7402 81.9309 54.7402C82.1871 54.7402 82.4325 54.7989 82.6512 54.911L87.4051 57.3333C88.0081 57.6427 88.3549 58.315 88.3549 59.1847V62.3646C88.6803 62.1939 89.0165 62.0978 89.3366 62.0978C89.5927 62.0978 89.8274 62.1512 90.0462 62.2632L94.8001 64.6855C94.8375 64.7069 94.8748 64.7282 94.9121 64.7496C95.9045 65.3738 96.0273 67.0545 95.1896 68.5751C95.1629 68.6285 95.1202 68.7032 95.0775 68.7672L87.7413 81.4336C87.1117 82.5274 86.1673 83.205 85.271 83.205L85.2656 83.1996Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
       />
       <path
-        d="M82.6754 55.9851C82.8515 55.9851 83.0115 56.0224 83.1556 56.0971L87.9095 58.5194C88.3097 58.7222 88.5658 59.2077 88.5658 59.896V64.1643C89.0406 63.6415 89.5955 63.3427 90.081 63.3427C90.2464 63.3427 90.4012 63.38 90.5452 63.4494L95.2991 65.8717C95.2991 65.8717 95.3471 65.8984 95.3738 65.9144C96.1154 66.3786 96.1581 67.7711 95.4645 69.0303C95.4378 69.0836 95.4058 69.137 95.3738 69.185L88.0215 81.8781C87.4773 82.8171 86.6823 83.3827 86.0154 83.3827C85.85 83.3827 85.6899 83.3453 85.5459 83.276C85.5032 83.2546 85.4658 83.2333 85.4285 83.2013L80.6746 80.779L73.3223 75.5822C72.5807 75.1181 72.538 73.7202 73.2316 72.4663C73.7705 71.4846 74.5922 70.8817 75.2858 70.8817C75.4565 70.8817 75.6166 70.919 75.7606 70.9937L80.1357 73.224V59.3517C80.1357 58.1192 80.9574 56.6947 81.9711 56.1771C82.2219 56.0491 82.4566 55.9904 82.6754 55.9904M82.6754 54.918C82.2806 54.918 81.8857 55.0193 81.4909 55.2168C80.109 55.921 79.0686 57.6977 79.0686 59.3464V71.4793L76.2462 70.0387C75.9527 69.8893 75.6272 69.8146 75.2858 69.8146C74.1653 69.8146 73.0182 70.6363 72.2979 71.9541C71.3108 73.7362 71.4976 75.6676 72.7301 76.4679L80.061 81.6487C80.1037 81.6807 80.1464 81.7073 80.1944 81.7287L84.8896 84.1243C84.9483 84.1617 85.007 84.1937 85.0657 84.2257C85.3591 84.3751 85.6793 84.4498 86.0154 84.4498C87.0985 84.4498 88.2189 83.6708 88.9446 82.4116L96.2808 69.7452C96.3289 69.6705 96.3715 69.6012 96.4089 69.5265C97.3906 67.7284 97.1879 65.7917 95.9394 65.0073C95.8914 64.9753 95.838 64.9486 95.7846 64.922L91.0307 62.4997C90.7373 62.3503 90.4172 62.2756 90.081 62.2756C89.9316 62.2756 89.7822 62.2916 89.6328 62.3183V59.896C89.6328 58.8182 89.1793 57.9699 88.395 57.5697L83.6411 55.1474C83.3423 54.998 83.0222 54.918 82.6754 54.918Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        d="M81.9254 55.2683C82.1015 55.2683 82.2615 55.3056 82.4056 55.3803L87.1595 57.8026C87.5597 58.0054 87.8158 58.4909 87.8158 59.1792V63.4475C88.2906 62.9247 88.8455 62.6259 89.331 62.6259C89.4964 62.6259 89.6512 62.6632 89.7952 62.7326L94.5491 65.1549C94.5491 65.1549 94.5971 65.1816 94.6238 65.1976C95.3654 65.6618 95.4081 67.0543 94.7145 68.3135C94.6878 68.3668 94.6558 68.4202 94.6238 68.4682L87.2715 81.1613C86.7273 82.1003 85.9323 82.6659 85.2654 82.6659C85.1 82.6659 84.9399 82.6285 84.7959 82.5592C84.7532 82.5378 84.7158 82.5165 84.6785 82.4845L79.9246 80.0622L72.5723 74.8654C71.8307 74.4013 71.788 73.0034 72.4816 71.7495C73.0205 70.7678 73.8422 70.1649 74.5358 70.1649C74.7065 70.1649 74.8666 70.2022 75.0106 70.2769L79.3857 72.5072V58.6349C79.3857 57.4025 80.2074 55.9779 81.2211 55.4603C81.4719 55.3323 81.7066 55.2736 81.9254 55.2736M81.9254 54.2012C81.5306 54.2012 81.1357 54.3025 80.7409 54.5C79.359 55.2042 78.3186 56.9809 78.3186 58.6296V70.7625L75.4962 69.3219C75.2027 69.1725 74.8772 69.0978 74.5358 69.0978C73.4153 69.0978 72.2682 69.9195 71.5479 71.2373C70.5608 73.0194 70.7476 74.9508 71.9801 75.7511L79.311 80.9319C79.3537 80.9639 79.3964 80.9906 79.4444 81.0119L84.1396 83.4075C84.1983 83.4449 84.257 83.4769 84.3157 83.5089C84.6091 83.6583 84.9293 83.733 85.2654 83.733C86.3485 83.733 87.4689 82.954 88.1946 81.6948L95.5308 69.0284C95.5789 68.9537 95.6215 68.8844 95.6589 68.8097C96.6406 67.0116 96.4379 65.0749 95.1894 64.2905C95.1414 64.2585 95.088 64.2319 95.0346 64.2052L90.2807 61.7829C89.9873 61.6335 89.6672 61.5588 89.331 61.5588C89.1816 61.5588 89.0322 61.5748 88.8828 61.6015V59.1792C88.8828 58.1014 88.4293 57.2531 87.645 56.8529L82.8911 54.4306C82.5923 54.2812 82.2722 54.2012 81.9254 54.2012Z"
+        fill="var(--illustration-stroke-tertiary)"
       />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M95.3046 65.8708C94.563 65.492 93.4479 66.1322 92.781 67.3487L88.5713 74.6263L83.8174 72.204L88.0271 64.9264C88.6993 63.7099 89.8091 63.0697 90.5507 63.4485L95.3046 65.8708Z"
+        d="M94.5546 65.154C93.813 64.7752 92.6979 65.4154 92.031 66.6319L87.8213 73.9095L83.0674 71.4872L87.2771 64.2096C87.9493 62.9931 89.0591 62.3529 89.8007 62.7317L94.5546 65.154Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
         stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
         strokeWidth="0.5"
@@ -140,7 +146,7 @@ export function ArchivedCycleVerticalStackIllustration({ className }: TIllustrat
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M80.5147 73.4103C79.7678 73.0262 78.6526 73.6664 77.9857 74.8883C77.2921 76.1421 77.3348 77.54 78.0764 78.0042L85.4287 83.2009L80.6748 80.7786L73.3225 75.5819C72.5809 75.1177 72.5382 73.7198 73.2318 72.466C73.8988 71.2441 75.0085 70.6092 75.7608 70.988L80.5147 73.4103Z"
+        d="M79.7647 72.6935C79.0178 72.3094 77.9026 72.9496 77.2357 74.1715C76.5421 75.4253 76.5848 76.8232 77.3264 77.2874L84.6787 82.4841L79.9248 80.0618L72.5725 74.8651C71.8309 74.4009 71.7882 73.003 72.4818 71.7492C73.1488 70.5273 74.2585 69.8924 75.0108 70.2712L79.7647 72.6935Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
         stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
         strokeWidth="0.5"
@@ -150,7 +156,7 @@ export function ArchivedCycleVerticalStackIllustration({ className }: TIllustrat
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M87.9095 58.5191C87.5894 58.3537 87.1732 58.3644 86.725 58.5938C85.7113 59.1114 84.8896 60.5359 84.8896 61.7684V76.4997L80.1357 74.0774V59.3461C80.1357 58.1136 80.9574 56.6891 81.9711 56.1715C82.4193 55.9421 82.8355 55.9314 83.1556 56.0968L87.9095 58.5191Z"
+        d="M87.1595 57.8023C86.8394 57.6369 86.4232 57.6476 85.975 57.877C84.9613 58.3946 84.1396 59.8191 84.1396 61.0516V75.7829L79.3857 73.3606V58.6293C79.3857 57.3968 80.2074 55.9723 81.2211 55.4547C81.6693 55.2253 82.0855 55.2146 82.4056 55.38L87.1595 57.8023Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
         stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
         strokeWidth="0.5"
@@ -160,7 +166,7 @@ export function ArchivedCycleVerticalStackIllustration({ className }: TIllustrat
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M87.9097 58.5187C88.3099 58.7214 88.566 59.207 88.566 59.8952V74.6265L92.7756 67.3489C93.4479 66.1324 94.5577 65.4922 95.2993 65.871C95.326 65.8816 95.3473 65.8977 95.374 65.9137C96.1157 66.3778 96.1583 67.7704 95.4647 69.0296C95.438 69.0829 95.406 69.1363 95.374 69.1843L88.0217 81.8774C87.3441 83.0458 86.2664 83.6381 85.5461 83.2753C85.5034 83.2539 85.4661 83.2326 85.4287 83.2006L78.0764 78.0038C77.3348 77.5396 77.2921 76.1418 77.9857 74.8879C78.6527 73.6661 79.7624 73.0312 80.5147 73.41C80.5414 73.4207 80.5628 73.4367 80.5841 73.4527C80.6108 73.474 80.6428 73.4954 80.6748 73.5167L84.8898 76.4992V61.768C84.8898 60.5355 85.7115 59.1109 86.7252 58.5934C87.1734 58.364 87.5896 58.3533 87.9097 58.5187Z"
+        d="M87.1597 57.8019C87.5599 58.0046 87.816 58.4902 87.816 59.1784V73.9097L92.0256 66.6321C92.6979 65.4156 93.8077 64.7754 94.5493 65.1542C94.576 65.1648 94.5973 65.1809 94.624 65.1969C95.3657 65.661 95.4083 67.0536 94.7147 68.3128C94.688 68.3661 94.656 68.4195 94.624 68.4675L87.2717 81.1606C86.5941 82.329 85.5164 82.9213 84.7961 82.5585C84.7534 82.5371 84.7161 82.5158 84.6787 82.4838L77.3264 77.287C76.5848 76.8228 76.5421 75.425 77.2357 74.1711C77.9027 72.9493 79.0124 72.3144 79.7647 72.6932C79.7914 72.7039 79.8128 72.7199 79.8341 72.7359C79.8608 72.7572 79.8928 72.7786 79.9248 72.7999L84.1398 75.7824V61.0512C84.1398 59.8187 84.9615 58.3941 85.9752 57.8766C86.4234 57.6472 86.8396 57.6365 87.1597 57.8019Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
         stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
         strokeWidth="0.5"
@@ -170,9 +176,9 @@ export function ArchivedCycleVerticalStackIllustration({ className }: TIllustrat
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M157.644 42.7875C158.242 42.4834 158.62 41.7631 158.62 40.7387V27.6562C158.62 25.8208 157.399 23.7079 155.889 22.9396L122.035 5.69003C121.368 5.34856 120.755 5.33255 120.28 5.57265L122.659 4.3615C123.134 4.1214 123.748 4.13741 124.415 4.47888L158.268 21.7284C159.778 22.4968 161 24.6096 161 26.445V39.5276C161 40.552 160.621 41.2723 160.024 41.5764L157.644 42.7875Z"
+        d="M156.894 42.0707C157.492 41.7666 157.87 41.0463 157.87 40.0219V26.9394C157.87 25.104 156.649 22.9911 155.139 22.2228L121.285 4.97323C120.618 4.63176 120.005 4.61576 119.53 4.85585L121.909 3.6447C122.384 3.4046 122.998 3.42061 123.665 3.76208L157.518 21.0117C159.028 21.78 160.25 23.8928 160.25 25.7282V38.8108C160.25 39.8352 159.871 40.5555 159.274 40.8596L156.894 42.0707Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.5"
         strokeLinecap="round"
         strokeLinejoin="round"
@@ -180,83 +186,83 @@ export function ArchivedCycleVerticalStackIllustration({ className }: TIllustrat
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M157.644 42.7878C157.169 43.0279 156.555 43.0119 155.889 42.6705L122.035 25.4209C120.525 24.6526 119.303 22.5397 119.303 20.7043V7.62711C119.303 6.6027 119.682 5.88242 120.28 5.57829C120.754 5.3382 121.368 5.3542 122.035 5.69567L155.889 22.9452C157.398 23.7135 158.62 25.8264 158.62 27.6618V40.7444C158.62 41.7688 158.241 42.4891 157.644 42.7932V42.7878Z"
+        d="M156.894 42.0711C156.419 42.3111 155.805 42.2951 155.139 41.9537L121.285 24.7041C119.775 23.9358 118.553 21.823 118.553 19.9875V6.91032C118.553 5.88591 118.932 5.16562 119.53 4.8615C120.004 4.6214 120.618 4.63741 121.285 4.97888L155.139 22.2284C156.648 22.9968 157.87 25.1096 157.87 26.945V40.0276C157.87 41.052 157.491 41.7723 156.894 42.0764V42.0711Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.5"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
       <path
-        d="M133.199 17.6289C133.219 17.6148 133.303 17.5662 133.508 17.6709L133.509 17.6719L141.362 21.6729L141.364 21.6738C141.577 21.781 141.806 22.0073 141.983 22.3145C142.16 22.619 142.258 22.9562 142.258 23.2441C142.258 23.5356 142.163 23.6422 142.127 23.668C142.108 23.6818 142.023 23.7323 141.817 23.627L141.816 23.626L133.963 19.624L133.961 19.623L133.881 19.5781C133.692 19.459 133.498 19.2522 133.343 18.9834C133.166 18.6787 133.067 18.3408 133.067 18.0527C133.067 17.7603 133.164 17.654 133.199 17.6289Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M132.449 16.9121C132.469 16.898 132.553 16.8494 132.758 16.9541L132.759 16.9551L140.612 20.9561L140.614 20.957C140.827 21.0642 141.056 21.2905 141.233 21.5977C141.41 21.9022 141.508 22.2394 141.508 22.5273C141.508 22.8188 141.413 22.9254 141.377 22.9512C141.358 22.965 141.273 23.0155 141.067 22.9102L141.066 22.9092L133.213 18.9072L133.211 18.9062L133.131 18.8613C132.942 18.7422 132.748 18.5354 132.593 18.2666C132.416 17.9619 132.317 17.624 132.317 17.3359C132.317 17.0435 132.414 16.9372 132.449 16.9121Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
       />
       <path
-        d="M133.425 23.0605C133.53 22.9867 133.732 22.9327 134.07 23.1035V23.1025L145.082 28.7158C145.424 28.8901 145.77 29.2403 146.033 29.6934C146.294 30.1441 146.446 30.6509 146.446 31.0986C146.446 31.5487 146.298 31.7691 146.178 31.8535C146.074 31.9272 145.871 31.9802 145.534 31.8096L134.523 26.1973C134.181 26.023 133.834 25.6737 133.571 25.2207C133.309 24.77 133.158 24.2632 133.158 23.8154C133.158 23.3652 133.306 23.145 133.425 23.0605Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M132.675 22.3438C132.78 22.27 132.982 22.2159 133.32 22.3867V22.3857L144.332 27.999C144.674 28.1733 145.02 28.5235 145.283 28.9766C145.544 29.4273 145.696 29.9341 145.696 30.3818C145.696 30.8319 145.548 31.0523 145.428 31.1367C145.324 31.2104 145.121 31.2635 144.784 31.0928L133.773 25.4805C133.431 25.3062 133.084 24.9569 132.821 24.5039C132.559 24.0532 132.408 23.5464 132.408 23.0986C132.408 22.6484 132.556 22.4282 132.675 22.3438Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
       />
       <mask id="path-24-inside-1_637_1524" fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}>
         <path
           fillRule="evenodd"
           clipRule="evenodd"
-          d="M127.141 16.0095C127.194 16.1855 127.317 16.3563 127.456 16.4256C127.648 16.527 127.808 16.4096 127.808 16.1695V15.7267C127.808 15.5826 127.754 15.4172 127.658 15.2892C127.562 15.1611 127.445 15.0811 127.333 15.0757L125.065 15.0117C124.932 15.0117 124.841 15.1238 124.841 15.3052V18.3571C124.841 18.5118 124.905 18.6825 125.007 18.8159C125.113 18.9493 125.241 19.0187 125.348 19.0026L125.674 18.9546C125.844 18.928 125.908 18.6985 125.823 18.4424C125.764 18.2717 125.658 18.133 125.54 18.0636V15.9561L127.136 15.9988L127.141 16.0095Z"
+          d="M126.391 15.2927C126.444 15.4687 126.567 15.6395 126.706 15.7088C126.898 15.8102 127.058 15.6928 127.058 15.4527V15.0099C127.058 14.8658 127.004 14.7004 126.908 14.5724C126.812 14.4443 126.695 14.3643 126.583 14.3589L124.315 14.2949C124.182 14.2949 124.091 14.407 124.091 14.5884V17.6403C124.091 17.795 124.155 17.9657 124.257 18.0991C124.363 18.2325 124.491 18.3019 124.598 18.2859L124.924 18.2378C125.094 18.2112 125.158 17.9817 125.073 17.7256C125.014 17.5549 124.908 17.4162 124.79 17.3468V15.2393L126.386 15.282L126.391 15.2927Z"
         />
       </mask>
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M127.141 16.0095C127.194 16.1855 127.317 16.3563 127.456 16.4256C127.648 16.527 127.808 16.4096 127.808 16.1695V15.7267C127.808 15.5826 127.754 15.4172 127.658 15.2892C127.562 15.1611 127.445 15.0811 127.333 15.0757L125.065 15.0117C124.932 15.0117 124.841 15.1238 124.841 15.3052V18.3571C124.841 18.5118 124.905 18.6825 125.007 18.8159C125.113 18.9493 125.241 19.0187 125.348 19.0026L125.674 18.9546C125.844 18.928 125.908 18.6985 125.823 18.4424C125.764 18.2717 125.658 18.133 125.54 18.0636V15.9561L127.136 15.9988L127.141 16.0095Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M126.391 15.2927C126.444 15.4687 126.567 15.6395 126.706 15.7088C126.898 15.8102 127.058 15.6928 127.058 15.4527V15.0099C127.058 14.8658 127.004 14.7004 126.908 14.5724C126.812 14.4443 126.695 14.3643 126.583 14.3589L124.315 14.2949C124.182 14.2949 124.091 14.407 124.091 14.5884V17.6403C124.091 17.795 124.155 17.9657 124.257 18.0991C124.363 18.2325 124.491 18.3019 124.598 18.2859L124.924 18.2378C125.094 18.2112 125.158 17.9817 125.073 17.7256C125.014 17.5549 124.908 17.4162 124.79 17.3468V15.2393L126.386 15.282L126.391 15.2927Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
-        d="M127.141 16.0095L128.098 15.7194L128.073 15.6383L128.035 15.5624L127.141 16.0095ZM127.456 16.4256L127.922 15.5412L127.913 15.5361L127.903 15.5312L127.456 16.4256ZM127.333 15.0757L127.381 14.0769L127.371 14.0764L127.361 14.0761L127.333 15.0757ZM125.065 15.0117L125.094 14.0121L125.08 14.0117H125.065V15.0117ZM125.007 18.8159L124.211 19.421L124.218 19.4309L124.226 19.4406L125.007 18.8159ZM125.348 19.0026L125.202 18.0134L125.2 18.0137L125.348 19.0026ZM125.674 18.9546L125.82 19.944L125.828 19.9426L125.674 18.9546ZM125.823 18.4424L126.772 18.1262L126.769 18.1173L125.823 18.4424ZM125.54 18.0636H124.54V18.6342L125.032 18.9245L125.54 18.0636ZM125.54 15.9561L125.567 14.9565L124.54 14.929V15.9561H125.54ZM127.136 15.9988L128.03 15.5518L127.762 15.0152L127.162 14.9991L127.136 15.9988ZM127.141 16.0095L126.184 16.2995C126.29 16.6492 126.551 17.0915 127.008 17.32L127.456 16.4256L127.903 15.5312C127.961 15.5601 128 15.5907 128.023 15.6111C128.046 15.6319 128.06 15.6493 128.068 15.6599C128.082 15.6782 128.091 15.6954 128.098 15.7194L127.141 16.0095ZM127.456 16.4256L126.989 17.31C127.335 17.4926 127.848 17.5584 128.293 17.2336C128.699 16.9373 128.808 16.4882 128.808 16.1695H127.808H126.808C126.808 16.0909 126.836 15.8206 127.115 15.6176C127.432 15.3862 127.769 15.46 127.922 15.5412L127.456 16.4256ZM127.808 16.1695H128.808V15.7267H127.808H126.808V16.1695H127.808ZM127.808 15.7267H128.808C128.808 15.3625 128.682 14.9873 128.458 14.6892L127.658 15.2892L126.858 15.8892C126.837 15.8611 126.827 15.8379 126.821 15.8207C126.816 15.8042 126.808 15.774 126.808 15.7267H127.808ZM127.658 15.2892L128.458 14.6892C128.279 14.4497 127.919 14.1025 127.381 14.0769L127.333 15.0757L127.285 16.0746C127.12 16.0667 127.006 16.0074 126.949 15.97C126.892 15.932 126.865 15.8981 126.858 15.8892L127.658 15.2892ZM127.333 15.0757L127.361 14.0761L125.094 14.0121L125.065 15.0117L125.037 16.0113L127.305 16.0753L127.333 15.0757ZM125.065 15.0117V14.0117C124.69 14.0117 124.342 14.1822 124.113 14.4772C123.902 14.7493 123.841 15.0586 123.841 15.3052H124.841H125.841C125.841 15.3703 125.826 15.533 125.693 15.7036C125.543 15.8973 125.307 16.0117 125.065 16.0117V15.0117ZM124.841 15.3052H123.841V18.3571H124.841H125.841V15.3052H124.841ZM124.841 18.3571H123.841C123.841 18.7636 123.999 19.1421 124.211 19.421L125.007 18.8159L125.803 18.2108C125.814 18.2249 125.82 18.2375 125.826 18.2521C125.83 18.2654 125.841 18.3002 125.841 18.3571H124.841ZM125.007 18.8159L124.226 19.4406C124.421 19.6852 124.867 20.086 125.497 19.9916L125.348 19.0026L125.2 18.0137C125.417 17.9811 125.579 18.0452 125.656 18.0874C125.736 18.131 125.775 18.176 125.788 18.1912L125.007 18.8159ZM125.348 19.0026L125.494 19.9919L125.82 19.9439L125.674 18.9546L125.528 17.9653L125.202 18.0134L125.348 19.0026ZM125.674 18.9546L125.828 19.9426C126.405 19.8525 126.705 19.411 126.805 19.0611C126.901 18.7278 126.861 18.3946 126.772 18.1262L125.823 18.4424L124.874 18.7587C124.87 18.7464 124.841 18.6559 124.883 18.508C124.906 18.4294 124.957 18.3118 125.067 18.1994C125.184 18.0795 125.343 17.9942 125.519 17.9666L125.674 18.9546ZM125.823 18.4424L126.769 18.1173C126.652 17.7768 126.416 17.4197 126.049 17.2027L125.54 18.0636L125.032 18.9245C124.957 18.8807 124.919 18.8361 124.905 18.8163C124.888 18.7942 124.881 18.7777 124.877 18.7675L125.823 18.4424ZM125.54 18.0636H126.54V15.9561H125.54H124.54V18.0636H125.54ZM125.54 15.9561L125.514 16.9557L127.109 16.9984L127.136 15.9988L127.162 14.9991L125.567 14.9565L125.54 15.9561ZM127.136 15.9988L126.241 16.4458L126.246 16.4565L127.141 16.0095L128.035 15.5624L128.03 15.5518L127.136 15.9988Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M126.391 15.2927L127.348 15.0026L127.323 14.9215L127.285 14.8456L126.391 15.2927ZM126.706 15.7088L127.172 14.8244L127.163 14.8193L127.153 14.8144L126.706 15.7088ZM126.583 14.3589L126.631 13.3601L126.621 13.3596L126.611 13.3593L126.583 14.3589ZM124.315 14.2949L124.344 13.2953L124.33 13.2949H124.315V14.2949ZM124.257 18.0991L123.461 18.7042L123.468 18.7141L123.476 18.7238L124.257 18.0991ZM124.598 18.2859L124.452 17.2966L124.45 17.2969L124.598 18.2859ZM124.924 18.2378L125.07 19.2272L125.078 19.2258L124.924 18.2378ZM125.073 17.7256L126.022 17.4094L126.019 17.4005L125.073 17.7256ZM124.79 17.3468H123.79V17.9174L124.282 18.2077L124.79 17.3468ZM124.79 15.2393L124.817 14.2397L123.79 14.2122V15.2393H124.79ZM126.386 15.282L127.28 14.835L127.012 14.2984L126.412 14.2823L126.386 15.282ZM126.391 15.2927L125.434 15.5827C125.54 15.9324 125.801 16.3747 126.258 16.6032L126.706 15.7088L127.153 14.8144C127.211 14.8433 127.25 14.8739 127.273 14.8943C127.296 14.9151 127.31 14.9325 127.318 14.9431C127.332 14.9614 127.341 14.9786 127.348 15.0026L126.391 15.2927ZM126.706 15.7088L126.239 16.5932C126.585 16.7758 127.098 16.8416 127.543 16.5168C127.949 16.2205 128.058 15.7714 128.058 15.4527H127.058H126.058C126.058 15.3742 126.086 15.1038 126.365 14.9008C126.682 14.6694 127.019 14.7432 127.172 14.8244L126.706 15.7088ZM127.058 15.4527H128.058V15.0099H127.058H126.058V15.4527H127.058ZM127.058 15.0099H128.058C128.058 14.6457 127.932 14.2705 127.708 13.9724L126.908 14.5724L126.108 15.1724C126.087 15.1443 126.077 15.1212 126.071 15.1039C126.066 15.0874 126.058 15.0572 126.058 15.0099H127.058ZM126.908 14.5724L127.708 13.9724C127.529 13.7329 127.169 13.3857 126.631 13.3601L126.583 14.3589L126.535 15.3578C126.37 15.3499 126.256 15.2906 126.199 15.2532C126.142 15.2152 126.115 15.1813 126.108 15.1724L126.908 14.5724ZM126.583 14.3589L126.611 13.3593L124.344 13.2953L124.315 14.2949L124.287 15.2945L126.555 15.3585L126.583 14.3589ZM124.315 14.2949V13.2949C123.94 13.2949 123.592 13.4654 123.363 13.7604C123.152 14.0325 123.091 14.3418 123.091 14.5884H124.091H125.091C125.091 14.6535 125.076 14.8162 124.943 14.9868C124.793 15.1805 124.557 15.2949 124.315 15.2949V14.2949ZM124.091 14.5884H123.091V17.6403H124.091H125.091V14.5884H124.091ZM124.091 17.6403H123.091C123.091 18.0468 123.249 18.4253 123.461 18.7042L124.257 18.0991L125.053 17.494C125.064 17.5081 125.07 17.5207 125.076 17.5353C125.08 17.5486 125.091 17.5834 125.091 17.6403H124.091ZM124.257 18.0991L123.476 18.7238C123.671 18.9684 124.117 19.3692 124.747 19.2748L124.598 18.2859L124.45 17.2969C124.667 17.2643 124.829 17.3284 124.906 17.3706C124.986 17.4142 125.025 17.4592 125.038 17.4744L124.257 18.0991ZM124.598 18.2859L124.744 19.2751L125.07 19.2271L124.924 18.2378L124.778 17.2485L124.452 17.2966L124.598 18.2859ZM124.924 18.2378L125.078 19.2258C125.655 19.1357 125.955 18.6942 126.055 18.3443C126.151 18.011 126.111 17.6778 126.022 17.4094L125.073 17.7256L124.124 18.0419C124.12 18.0296 124.091 17.9391 124.133 17.7912C124.156 17.7126 124.207 17.595 124.317 17.4826C124.434 17.3627 124.593 17.2774 124.769 17.2498L124.924 18.2378ZM125.073 17.7256L126.019 17.4005C125.902 17.06 125.666 16.7029 125.299 16.4859L124.79 17.3468L124.282 18.2077C124.207 18.1639 124.169 18.1193 124.155 18.0995C124.138 18.0774 124.131 18.0609 124.127 18.0507L125.073 17.7256ZM124.79 17.3468H125.79V15.2393H124.79H123.79V17.3468H124.79ZM124.79 15.2393L124.764 16.2389L126.359 16.2816L126.386 15.282L126.412 14.2823L124.817 14.2397L124.79 15.2393ZM126.386 15.282L125.491 15.729L125.496 15.7397L126.391 15.2927L127.285 14.8456L127.28 14.835L126.386 15.282Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
         mask="url(#path-24-inside-1_637_1524)"
       />
       <mask id="path-26-inside-2_637_1524" fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}>
         <path
           fillRule="evenodd"
           clipRule="evenodd"
-          d="M125.748 13.9919C125.802 14.1679 125.924 14.3387 126.063 14.408C126.255 14.5094 126.415 14.392 126.415 14.1519V13.7091C126.415 13.565 126.362 13.3996 126.266 13.2716C126.17 13.1435 126.052 13.0635 125.94 13.0582L123.673 12.9941C123.539 12.9941 123.449 13.1062 123.449 13.2876V16.3395C123.449 16.4942 123.513 16.6649 123.614 16.7983C123.721 16.9317 123.849 17.0011 123.956 16.9851L124.281 16.9371C124.452 16.9104 124.516 16.6809 124.43 16.4248C124.372 16.2541 124.265 16.1154 124.148 16.046V13.9385L125.743 13.9812L125.748 13.9919Z"
+          d="M124.998 13.2751C125.052 13.4511 125.174 13.6219 125.313 13.6912C125.505 13.7926 125.665 13.6752 125.665 13.4351V12.9923C125.665 12.8482 125.612 12.6828 125.516 12.5548C125.42 12.4267 125.302 12.3467 125.19 12.3414L122.923 12.2773C122.789 12.2773 122.699 12.3894 122.699 12.5708V15.6227C122.699 15.7774 122.763 15.9481 122.864 16.0815C122.971 16.2149 123.099 16.2843 123.206 16.2683L123.531 16.2203C123.702 16.1936 123.766 15.9642 123.68 15.708C123.622 15.5373 123.515 15.3986 123.398 15.3292V13.2217L124.993 13.2644L124.998 13.2751Z"
         />
       </mask>
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M125.748 13.9919C125.802 14.1679 125.924 14.3387 126.063 14.408C126.255 14.5094 126.415 14.392 126.415 14.1519V13.7091C126.415 13.565 126.362 13.3996 126.266 13.2716C126.17 13.1435 126.052 13.0635 125.94 13.0582L123.673 12.9941C123.539 12.9941 123.449 13.1062 123.449 13.2876V16.3395C123.449 16.4942 123.513 16.6649 123.614 16.7983C123.721 16.9317 123.849 17.0011 123.956 16.9851L124.281 16.9371C124.452 16.9104 124.516 16.6809 124.43 16.4248C124.372 16.2541 124.265 16.1154 124.148 16.046V13.9385L125.743 13.9812L125.748 13.9919Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M124.998 13.2751C125.052 13.4511 125.174 13.6219 125.313 13.6912C125.505 13.7926 125.665 13.6752 125.665 13.4351V12.9923C125.665 12.8482 125.612 12.6828 125.516 12.5548C125.42 12.4267 125.302 12.3467 125.19 12.3414L122.923 12.2773C122.789 12.2773 122.699 12.3894 122.699 12.5708V15.6227C122.699 15.7774 122.763 15.9481 122.864 16.0815C122.971 16.2149 123.099 16.2843 123.206 16.2683L123.531 16.2203C123.702 16.1936 123.766 15.9642 123.68 15.708C123.622 15.5373 123.515 15.3986 123.398 15.3292V13.2217L124.993 13.2644L124.998 13.2751Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
-        d="M125.748 13.9919L126.705 13.7019L126.681 13.6207L126.643 13.5449L125.748 13.9919ZM126.063 14.408L126.53 13.5237L126.52 13.5185L126.51 13.5136L126.063 14.408ZM125.94 13.0582L125.988 12.0593L125.978 12.0588L125.969 12.0586L125.94 13.0582ZM123.673 12.9941L123.701 11.9945L123.687 11.9941H123.673V12.9941ZM123.614 16.7983L122.818 17.4034L122.825 17.4133L122.833 17.423L123.614 16.7983ZM123.956 16.9851L123.81 15.9958L123.807 15.9961L123.956 16.9851ZM124.281 16.9371L124.427 17.9264L124.435 17.9251L124.281 16.9371ZM124.43 16.4248L125.379 16.1086L125.376 16.0998L124.43 16.4248ZM124.148 16.046H123.148V16.6167L123.639 16.907L124.148 16.046ZM124.148 13.9385L124.174 12.9389L123.148 12.9114V13.9385H124.148ZM125.743 13.9812L126.638 13.5342L126.369 12.9976L125.77 12.9816L125.743 13.9812ZM125.748 13.9919L124.791 14.2819C124.897 14.6316 125.159 15.074 125.616 15.3025L126.063 14.408L126.51 13.5136C126.568 13.5425 126.607 13.5731 126.63 13.5935C126.653 13.6143 126.668 13.6317 126.675 13.6423C126.689 13.6606 126.698 13.6778 126.705 13.7019L125.748 13.9919ZM126.063 14.408L125.596 15.2924C125.942 15.475 126.455 15.5408 126.9 15.216C127.307 14.9197 127.415 14.4706 127.415 14.1519H126.415H125.415C125.415 14.0734 125.444 13.803 125.722 13.6C126.039 13.3686 126.376 13.4425 126.53 13.5237L126.063 14.408ZM126.415 14.1519H127.415V13.7091H126.415H125.415V14.1519H126.415ZM126.415 13.7091H127.415C127.415 13.345 127.289 12.9697 127.066 12.6716L126.266 13.2716L125.466 13.8716C125.445 13.8435 125.435 13.8204 125.429 13.8031C125.423 13.7866 125.415 13.7564 125.415 13.7091H126.415ZM126.266 13.2716L127.066 12.6716C126.886 12.4321 126.526 12.0849 125.988 12.0593L125.94 13.0582L125.893 14.057C125.728 14.0492 125.613 13.9898 125.557 13.9524C125.499 13.9144 125.473 13.8805 125.466 13.8716L126.266 13.2716ZM125.94 13.0582L125.969 12.0586L123.701 11.9945L123.673 12.9941L123.645 13.9937L125.912 14.0578L125.94 13.0582ZM123.673 12.9941V11.9941C123.298 11.9941 122.95 12.1646 122.721 12.4596C122.51 12.7317 122.449 13.041 122.449 13.2876H123.449H124.449C124.449 13.3528 124.433 13.5154 124.301 13.6861C124.15 13.8797 123.915 13.9941 123.673 13.9941V12.9941ZM123.449 13.2876H122.449V16.3395H123.449H124.449V13.2876H123.449ZM123.449 16.3395H122.449C122.449 16.746 122.606 17.1245 122.818 17.4034L123.614 16.7983L124.41 16.1932C124.421 16.2073 124.428 16.22 124.433 16.2345C124.438 16.2479 124.449 16.2826 124.449 16.3395H123.449ZM123.614 16.7983L122.833 17.423C123.029 17.6676 123.475 18.0684 124.104 17.974L123.956 16.9851L123.807 15.9961C124.024 15.9635 124.186 16.0277 124.264 16.0698C124.344 16.1134 124.383 16.1584 124.395 16.1736L123.614 16.7983ZM123.956 16.9851L124.102 17.9744L124.427 17.9263L124.281 16.9371L124.135 15.9478L123.81 15.9958L123.956 16.9851ZM124.281 16.9371L124.435 17.9251C125.012 17.8349 125.312 17.3935 125.413 17.0435C125.509 16.7102 125.469 16.377 125.379 16.1086L124.43 16.4248L123.482 16.7411C123.478 16.7288 123.448 16.6384 123.491 16.4904C123.513 16.4118 123.564 16.2943 123.674 16.1818C123.792 16.0619 123.95 15.9766 124.127 15.949L124.281 16.9371ZM124.43 16.4248L125.376 16.0998C125.259 15.7592 125.024 15.4021 124.656 15.1851L124.148 16.046L123.639 16.907C123.565 16.8631 123.527 16.8185 123.512 16.7987C123.495 16.7766 123.488 16.7601 123.485 16.7499L124.43 16.4248ZM124.148 16.046H125.148V13.9385H124.148H123.148V16.046H124.148ZM124.148 13.9385L124.121 14.9382L125.716 14.9808L125.743 13.9812L125.77 12.9816L124.174 12.9389L124.148 13.9385ZM125.743 13.9812L124.848 14.4282L124.854 14.4389L125.748 13.9919L126.643 13.5449L126.638 13.5342L125.743 13.9812Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M124.998 13.2751L125.955 12.9851L125.931 12.9039L125.893 12.8281L124.998 13.2751ZM125.313 13.6912L125.78 12.8069L125.77 12.8017L125.76 12.7968L125.313 13.6912ZM125.19 12.3414L125.238 11.3425L125.228 11.342L125.219 11.3418L125.19 12.3414ZM122.923 12.2773L122.951 11.2777L122.937 11.2773H122.923V12.2773ZM122.864 16.0815L122.068 16.6866L122.075 16.6965L122.083 16.7062L122.864 16.0815ZM123.206 16.2683L123.06 15.279L123.057 15.2793L123.206 16.2683ZM123.531 16.2203L123.677 17.2096L123.685 17.2083L123.531 16.2203ZM123.68 15.708L124.629 15.3918L124.626 15.383L123.68 15.708ZM123.398 15.3292H122.398V15.8999L122.889 16.1902L123.398 15.3292ZM123.398 13.2217L123.424 12.2221L122.398 12.1946V13.2217H123.398ZM124.993 13.2644L125.888 12.8174L125.619 12.2808L125.02 12.2648L124.993 13.2644ZM124.998 13.2751L124.041 13.5651C124.147 13.9148 124.409 14.3572 124.866 14.5857L125.313 13.6912L125.76 12.7968C125.818 12.8257 125.857 12.8563 125.88 12.8767C125.903 12.8976 125.918 12.9149 125.925 12.9255C125.939 12.9438 125.948 12.961 125.955 12.9851L124.998 13.2751ZM125.313 13.6912L124.846 14.5756C125.192 14.7582 125.705 14.824 126.15 14.4993C126.557 14.2029 126.665 13.7538 126.665 13.4351H125.665H124.665C124.665 13.3566 124.694 13.0862 124.972 12.8832C125.289 12.6519 125.626 12.7257 125.78 12.8069L125.313 13.6912ZM125.665 13.4351H126.665V12.9923H125.665H124.665V13.4351H125.665ZM125.665 12.9923H126.665C126.665 12.6282 126.539 12.2529 126.316 11.9548L125.516 12.5548L124.716 13.1548C124.695 13.1267 124.685 13.1036 124.679 13.0863C124.673 13.0698 124.665 13.0396 124.665 12.9923H125.665ZM125.516 12.5548L126.316 11.9548C126.136 11.7153 125.776 11.3681 125.238 11.3425L125.19 12.3414L125.143 13.3402C124.978 13.3324 124.863 13.273 124.807 13.2357C124.749 13.1976 124.723 13.1638 124.716 13.1548L125.516 12.5548ZM125.19 12.3414L125.219 11.3418L122.951 11.2777L122.923 12.2773L122.895 13.2769L125.162 13.341L125.19 12.3414ZM122.923 12.2773V11.2773C122.548 11.2773 122.2 11.4478 121.971 11.7428C121.76 12.0149 121.699 12.3242 121.699 12.5708H122.699H123.699C123.699 12.636 123.683 12.7986 123.551 12.9693C123.4 13.1629 123.165 13.2773 122.923 13.2773V12.2773ZM122.699 12.5708H121.699V15.6227H122.699H123.699V12.5708H122.699ZM122.699 15.6227H121.699C121.699 16.0292 121.856 16.4077 122.068 16.6866L122.864 16.0815L123.66 15.4764C123.671 15.4905 123.678 15.5032 123.683 15.5177C123.688 15.5311 123.699 15.5658 123.699 15.6227H122.699ZM122.864 16.0815L122.083 16.7062C122.279 16.9508 122.725 17.3516 123.354 17.2572L123.206 16.2683L123.057 15.2793C123.274 15.2468 123.436 15.3109 123.514 15.353C123.594 15.3966 123.633 15.4416 123.645 15.4568L122.864 16.0815ZM123.206 16.2683L123.352 17.2576L123.677 17.2095L123.531 16.2203L123.385 15.231L123.06 15.279L123.206 16.2683ZM123.531 16.2203L123.685 17.2083C124.262 17.1182 124.562 16.6767 124.663 16.3267C124.759 15.9934 124.719 15.6602 124.629 15.3918L123.68 15.708L122.732 16.0243C122.728 16.012 122.698 15.9216 122.741 15.7736C122.763 15.695 122.814 15.5775 122.924 15.465C123.042 15.3451 123.2 15.2598 123.377 15.2322L123.531 16.2203ZM123.68 15.708L124.626 15.383C124.509 15.0424 124.274 14.6853 123.906 14.4683L123.398 15.3292L122.889 16.1902C122.815 16.1464 122.777 16.1017 122.762 16.0819C122.745 16.0598 122.738 16.0433 122.735 16.0331L123.68 15.708ZM123.398 15.3292H124.398V13.2217H123.398H122.398V15.3292H123.398ZM123.398 13.2217L123.371 14.2214L124.966 14.264L124.993 13.2644L125.02 12.2648L123.424 12.2221L123.398 13.2217ZM124.993 13.2644L124.098 13.7114L124.104 13.7221L124.998 13.2751L125.893 12.8281L125.888 12.8174L124.993 13.2644Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
         mask="url(#path-26-inside-2_637_1524)"
       />
       <mask id="path-28-inside-3_637_1524" fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}>
         <path
           fillRule="evenodd"
           clipRule="evenodd"
-          d="M129.206 17.379C129.11 17.2456 128.992 17.1656 128.886 17.1656L126.618 17.1016C126.485 17.1016 126.394 17.2189 126.394 17.3897V20.4469C126.394 20.591 126.447 20.751 126.543 20.8791C126.645 21.0125 126.762 21.0925 126.869 21.0925L129.131 21.1565C129.27 21.1672 129.361 21.0498 129.361 20.8684V17.8112C129.361 17.6671 129.307 17.5071 129.206 17.379ZM128.662 20.2175L127.093 20.1695V18.0513L128.662 18.0993V20.2175Z"
+          d="M128.456 16.6622C128.36 16.5288 128.242 16.4488 128.136 16.4488L125.868 16.3848C125.735 16.3848 125.644 16.5021 125.644 16.6729V19.7301C125.644 19.8742 125.697 20.0342 125.793 20.1623C125.895 20.2957 126.012 20.3757 126.119 20.3757L128.381 20.4397C128.52 20.4504 128.611 20.333 128.611 20.1516V17.0944C128.611 16.9503 128.557 16.7903 128.456 16.6622ZM127.912 19.5007L126.343 19.4527V17.3345L127.912 17.3825V19.5007Z"
         />
       </mask>
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M129.206 17.379C129.11 17.2456 128.992 17.1656 128.886 17.1656L126.618 17.1016C126.485 17.1016 126.394 17.2189 126.394 17.3897V20.4469C126.394 20.591 126.447 20.751 126.543 20.8791C126.645 21.0125 126.762 21.0925 126.869 21.0925L129.131 21.1565C129.27 21.1672 129.361 21.0498 129.361 20.8684V17.8112C129.361 17.6671 129.307 17.5071 129.206 17.379ZM128.662 20.2175L127.093 20.1695V18.0513L128.662 18.0993V20.2175Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M128.456 16.6622C128.36 16.5288 128.242 16.4488 128.136 16.4488L125.868 16.3848C125.735 16.3848 125.644 16.5021 125.644 16.6729V19.7301C125.644 19.8742 125.697 20.0342 125.793 20.1623C125.895 20.2957 126.012 20.3757 126.119 20.3757L128.381 20.4397C128.52 20.4504 128.611 20.333 128.611 20.1516V17.0944C128.611 16.9503 128.557 16.7903 128.456 16.6622ZM127.912 19.5007L126.343 19.4527V17.3345L127.912 17.3825V19.5007Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
-        d="M129.206 17.379L128.394 17.9633L128.408 17.9818L128.422 17.9997L129.206 17.379ZM128.886 17.1656L128.857 18.1652L128.872 18.1656H128.886V17.1656ZM126.618 17.1016L126.646 16.102L126.632 16.1016H126.618V17.1016ZM126.543 20.8791L125.743 21.4791L125.747 21.4842L126.543 20.8791ZM126.869 21.0925L126.897 20.0929L126.883 20.0925H126.869V21.0925ZM129.131 21.1565L129.208 20.1595L129.184 20.1576L129.159 20.1569L129.131 21.1565ZM128.662 20.2175L128.631 21.217L129.662 21.2486V20.2175H128.662ZM127.093 20.1695H126.093V21.1393L127.062 21.169L127.093 20.1695ZM127.093 18.0513L127.124 17.0517L126.093 17.0202V18.0513H127.093ZM128.662 18.0993H129.662V17.1294L128.692 17.0998L128.662 18.0993ZM129.206 17.379L130.017 16.7947C129.848 16.5591 129.469 16.1656 128.886 16.1656V17.1656V18.1656C128.689 18.1656 128.554 18.0936 128.493 18.0528C128.429 18.0101 128.401 17.9721 128.394 17.9633L129.206 17.379ZM128.886 17.1656L128.914 16.166L126.646 16.102L126.618 17.1016L126.59 18.1012L128.857 18.1652L128.886 17.1656ZM126.618 17.1016V16.1016C126.229 16.1016 125.886 16.285 125.666 16.5684C125.461 16.8329 125.394 17.1363 125.394 17.3897H126.394H127.394C127.394 17.4723 127.373 17.6317 127.246 17.7948C127.105 17.9768 126.874 18.1016 126.618 18.1016V17.1016ZM126.394 17.3897H125.394V20.4469H126.394H127.394V17.3897H126.394ZM126.394 20.4469H125.394C125.394 20.8186 125.524 21.1871 125.743 21.4791L126.543 20.8791L127.343 20.2791C127.361 20.3025 127.372 20.3243 127.379 20.3451C127.386 20.3651 127.394 20.3984 127.394 20.4469H126.394ZM126.543 20.8791L125.747 21.4842C125.912 21.7003 126.288 22.0925 126.869 22.0925V21.0925V20.0925C127.066 20.0925 127.2 20.1647 127.257 20.2022C127.316 20.2414 127.34 20.2739 127.34 20.274L126.543 20.8791ZM126.869 21.0925L126.841 22.0921L129.103 22.1561L129.131 21.1565L129.159 20.1569L126.897 20.0929L126.869 21.0925ZM129.131 21.1565L129.054 22.1536C129.459 22.1847 129.838 22.0139 130.083 21.7041C130.302 21.4269 130.361 21.1106 130.361 20.8684H129.361H128.361C128.361 20.8076 128.374 20.6407 128.513 20.4648C128.677 20.2565 128.942 20.139 129.208 20.1595L129.131 21.1565ZM129.361 20.8684H130.361V17.8112H129.361H128.361V20.8684H129.361ZM129.361 17.8112H130.361C130.361 17.4375 130.228 17.0596 129.99 16.7583L129.206 17.379L128.422 17.9997C128.4 17.9727 128.387 17.9461 128.378 17.9206C128.369 17.8959 128.361 17.86 128.361 17.8112H129.361ZM128.662 20.2175L128.692 19.2179L127.124 19.1699L127.093 20.1695L127.062 21.169L128.631 21.217L128.662 20.2175ZM127.093 20.1695H128.093V18.0513H127.093H126.093V20.1695H127.093ZM127.093 18.0513L127.062 19.0508L128.631 19.0988L128.662 18.0993L128.692 17.0998L127.124 17.0517L127.093 18.0513ZM128.662 18.0993H127.662V20.2175H128.662H129.662V18.0993H128.662Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M128.456 16.6622L127.644 17.2465L127.658 17.265L127.672 17.2829L128.456 16.6622ZM128.136 16.4488L128.107 17.4484L128.122 17.4488H128.136V16.4488ZM125.868 16.3848L125.896 15.3852L125.882 15.3848H125.868V16.3848ZM125.793 20.1623L124.993 20.7623L124.997 20.7674L125.793 20.1623ZM126.119 20.3757L126.147 19.3761L126.133 19.3757H126.119V20.3757ZM128.381 20.4397L128.458 19.4427L128.434 19.4408L128.409 19.4401L128.381 20.4397ZM127.912 19.5007L127.881 20.5002L128.912 20.5318V19.5007H127.912ZM126.343 19.4527H125.343V20.4225L126.312 20.4522L126.343 19.4527ZM126.343 17.3345L126.374 16.3349L125.343 16.3034V17.3345H126.343ZM127.912 17.3825H128.912V16.4126L127.942 16.383L127.912 17.3825ZM128.456 16.6622L129.267 16.0779C129.098 15.8423 128.719 15.4488 128.136 15.4488V16.4488V17.4488C127.939 17.4488 127.804 17.3768 127.743 17.336C127.679 17.2933 127.651 17.2553 127.644 17.2465L128.456 16.6622ZM128.136 16.4488L128.164 15.4492L125.896 15.3852L125.868 16.3848L125.84 17.3844L128.107 17.4484L128.136 16.4488ZM125.868 16.3848V15.3848C125.479 15.3848 125.136 15.5682 124.916 15.8516C124.711 16.1161 124.644 16.4195 124.644 16.6729H125.644H126.644C126.644 16.7555 126.623 16.9149 126.496 17.078C126.355 17.26 126.124 17.3848 125.868 17.3848V16.3848ZM125.644 16.6729H124.644V19.7301H125.644H126.644V16.6729H125.644ZM125.644 19.7301H124.644C124.644 20.1018 124.774 20.4703 124.993 20.7623L125.793 20.1623L126.593 19.5623C126.611 19.5857 126.622 19.6076 126.629 19.6283C126.636 19.6483 126.644 19.6816 126.644 19.7301H125.644ZM125.793 20.1623L124.997 20.7674C125.162 20.9835 125.538 21.3757 126.119 21.3757V20.3757V19.3757C126.316 19.3757 126.45 19.4479 126.507 19.4854C126.566 19.5246 126.59 19.5571 126.59 19.5572L125.793 20.1623ZM126.119 20.3757L126.091 21.3753L128.353 21.4393L128.381 20.4397L128.409 19.4401L126.147 19.3761L126.119 20.3757ZM128.381 20.4397L128.304 21.4368C128.709 21.4679 129.088 21.2971 129.333 20.9873C129.552 20.7101 129.611 20.3938 129.611 20.1516H128.611H127.611C127.611 20.0908 127.624 19.9239 127.763 19.748C127.927 19.5397 128.192 19.4222 128.458 19.4427L128.381 20.4397ZM128.611 20.1516H129.611V17.0944H128.611H127.611V20.1516H128.611ZM128.611 17.0944H129.611C129.611 16.7207 129.478 16.3428 129.24 16.0415L128.456 16.6622L127.672 17.2829C127.65 17.2559 127.637 17.2293 127.628 17.2038C127.619 17.1791 127.611 17.1432 127.611 17.0944H128.611ZM127.912 19.5007L127.942 18.5011L126.374 18.4531L126.343 19.4527L126.312 20.4522L127.881 20.5002L127.912 19.5007ZM126.343 19.4527H127.343V17.3345H126.343H125.343V19.4527H126.343ZM126.343 17.3345L126.312 18.334L127.881 18.382L127.912 17.3825L127.942 16.383L126.374 16.3349L126.343 17.3345ZM127.912 17.3825H126.912V19.5007H127.912H128.912V17.3825H127.912Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
         mask="url(#path-28-inside-3_637_1524)"
       />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M6.50079 63.4029C5.03354 62.6559 4.09983 60.8899 4.09983 58.3769C4.09983 53.8791 7.09837 48.7037 10.7905 46.8256L35.5471 34.2125C37.1797 33.3802 38.6737 33.3268 39.8368 33.9191L37.4572 32.7079C36.2941 32.1157 34.8001 32.1691 33.1675 33.0014L8.41089 45.6144C4.71341 47.4979 1.72021 52.6733 1.72021 57.1657C1.72021 59.6787 2.65392 61.4448 4.12118 62.1917L6.50079 63.4029Z"
+        d="M5.75079 62.6861C4.28354 61.9391 3.34983 60.1731 3.34983 57.6601C3.34983 53.1623 6.34837 47.9869 10.0405 46.1088L34.7971 33.4957C36.4297 32.6634 37.9237 32.6101 39.0868 33.2023L36.7072 31.9911C35.5441 31.3989 34.0501 31.4523 32.4175 32.2846L7.66089 44.8976C3.96341 46.7811 0.970215 51.9565 0.970215 56.4489C0.970215 58.9619 1.90392 60.728 3.37118 61.4749L5.75079 62.6861Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.5"
         strokeLinecap="round"
         strokeLinejoin="round"
@@ -264,72 +270,72 @@ export function ArchivedCycleVerticalStackIllustration({ className }: TIllustrat
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M6.50057 63.4027C7.6637 63.9949 9.15763 63.9416 10.7903 63.1092L35.5469 50.4962C39.2443 48.6128 42.2375 43.4373 42.2375 38.9449C42.2375 36.4319 41.3038 34.6658 39.8366 33.9189C38.6734 33.3266 37.1795 33.38 35.5469 34.2123L10.7903 46.8254C7.09281 48.7088 4.09961 53.8842 4.09961 58.3767C4.09961 60.8897 5.03332 62.6557 6.50057 63.4027Z"
+        d="M5.75057 62.6859C6.9137 63.2781 8.40763 63.2248 10.0403 62.3924L34.7969 49.7794C38.4943 47.896 41.4875 42.7205 41.4875 38.2281C41.4875 35.7151 40.5538 33.949 39.0866 33.2021C37.9234 32.6098 36.4295 32.6632 34.7969 33.4955L10.0403 46.1086C6.34281 47.992 3.34961 53.1674 3.34961 57.6599C3.34961 60.1729 4.28332 61.9389 5.75057 62.6859Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.5"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
       <mask id="path-32-inside-4_637_1524" fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}>
-        <path d="M14.1791 51.6711C14.2698 51.5324 14.4032 51.4737 14.4886 51.5324C14.574 51.5911 14.5793 51.7511 14.5046 51.9005L14.4886 51.9326L11.2553 57.5188C11.1646 57.6735 11.0205 57.7482 10.9298 57.6842C10.8391 57.6202 10.8391 57.4441 10.9298 57.284L14.1631 51.6978L14.1791 51.6711Z" />
+        <path d="M13.4291 50.9543C13.5198 50.8156 13.6532 50.7569 13.7386 50.8156C13.824 50.8743 13.8293 51.0344 13.7546 51.1837L13.7386 51.2158L10.5053 56.802C10.4146 56.9567 10.2705 57.0314 10.1798 56.9674C10.0891 56.9034 10.0891 56.7273 10.1798 56.5672L13.4131 50.981L13.4291 50.9543Z" />
       </mask>
       <path
-        d="M14.1791 51.6711C14.2698 51.5324 14.4032 51.4737 14.4886 51.5324C14.574 51.5911 14.5793 51.7511 14.5046 51.9005L14.4886 51.9326L11.2553 57.5188C11.1646 57.6735 11.0205 57.7482 10.9298 57.6842C10.8391 57.6202 10.8391 57.4441 10.9298 57.284L14.1631 51.6978L14.1791 51.6711Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M13.4291 50.9543C13.5198 50.8156 13.6532 50.7569 13.7386 50.8156C13.824 50.8743 13.8293 51.0344 13.7546 51.1837L13.7386 51.2158L10.5053 56.802C10.4146 56.9567 10.2705 57.0314 10.1798 56.9674C10.0891 56.9034 10.0891 56.7273 10.1798 56.5672L13.4131 50.981L13.4291 50.9543Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
-        d="M14.1791 51.6711L13.3422 51.1239L13.3316 51.14L13.3217 51.1566L14.1791 51.6711ZM14.5046 51.9005L13.6102 51.4533L13.6102 51.4534L14.5046 51.9005ZM14.4886 51.9326L15.3541 52.4335L15.3694 52.4071L15.3831 52.3797L14.4886 51.9326ZM11.2553 57.5188L12.118 58.0245L12.1208 58.0197L11.2553 57.5188ZM10.9298 57.284L10.0643 56.7831L10.0598 56.791L10.9298 57.284ZM14.1631 51.6978L13.3057 51.1833L13.3016 51.19L13.2977 51.1969L14.1631 51.6978ZM14.1791 51.6711L15.0161 52.2184C14.9808 52.2724 14.8999 52.3711 14.743 52.4411C14.5825 52.5126 14.2477 52.5803 13.9221 52.3564L14.4886 51.5324L15.0551 50.7084C14.6441 50.4258 14.1999 50.4935 13.9287 50.6144C13.6611 50.7337 13.4682 50.9311 13.3422 51.1239L14.1791 51.6711ZM14.4886 51.5324L13.9221 52.3564C13.6072 52.14 13.5618 51.8301 13.5574 51.7228C13.5523 51.595 13.5841 51.5055 13.6102 51.4533L14.5046 51.9005L15.399 52.3478C15.4998 52.1462 15.5663 51.902 15.5558 51.6421C15.5461 51.4027 15.4553 50.9835 15.0551 50.7084L14.4886 51.5324ZM14.5046 51.9005L13.6102 51.4534L13.5942 51.4854L14.4886 51.9326L15.3831 52.3797L15.3991 52.3477L14.5046 51.9005ZM14.4886 51.9326L13.6231 51.4316L10.3898 57.0179L11.2553 57.5188L12.1208 58.0197L15.3541 52.4335L14.4886 51.9326ZM11.2553 57.5188L10.3926 57.0131C10.4213 56.9642 10.4908 56.8681 10.6373 56.7932C10.7818 56.7193 11.1467 56.6132 11.5065 56.8672L10.9298 57.6842L10.3532 58.5012C10.8037 58.8192 11.286 58.7078 11.5479 58.5739C11.8117 58.4389 11.9986 58.2281 12.118 58.0245L11.2553 57.5188ZM10.9298 57.6842L11.5065 56.8672C11.8308 57.0961 11.8618 57.42 11.8618 57.5201C11.8618 57.6453 11.8268 57.7295 11.7999 57.777L10.9298 57.284L10.0598 56.791C9.94216 56.9987 9.86182 57.2509 9.86182 57.5201C9.86182 57.7643 9.9382 58.2082 10.3532 58.5012L10.9298 57.6842ZM10.9298 57.284L11.7953 57.785L15.0286 52.1987L14.1631 51.6978L13.2977 51.1969L10.0644 56.7831L10.9298 57.284ZM14.1631 51.6978L15.0206 52.2123L15.0366 52.1857L14.1791 51.6711L13.3217 51.1566L13.3057 51.1833L14.1631 51.6978Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M13.4291 50.9543L12.5922 50.4071L12.5816 50.4232L12.5717 50.4398L13.4291 50.9543ZM13.7546 51.1837L12.8602 50.7365L12.8602 50.7366L13.7546 51.1837ZM13.7386 51.2158L14.6041 51.7167L14.6194 51.6903L14.6331 51.6629L13.7386 51.2158ZM10.5053 56.802L11.368 57.3077L11.3708 57.3029L10.5053 56.802ZM10.1798 56.5672L9.31432 56.0663L9.30982 56.0742L10.1798 56.5672ZM13.4131 50.981L12.5557 50.4665L12.5516 50.4732L12.5477 50.4801L13.4131 50.981ZM13.4291 50.9543L14.2661 51.5016C14.2308 51.5556 14.1499 51.6543 13.993 51.7243C13.8325 51.7958 13.4977 51.8635 13.1721 51.6396L13.7386 50.8156L14.3051 49.9916C13.8941 49.709 13.4499 49.7767 13.1787 49.8976C12.9111 50.0169 12.7182 50.2143 12.5922 50.4071L13.4291 50.9543ZM13.7386 50.8156L13.1721 51.6396C12.8572 51.4232 12.8118 51.1133 12.8074 51.006C12.8023 50.8782 12.8341 50.7887 12.8602 50.7365L13.7546 51.1837L14.649 51.631C14.7498 51.4294 14.8163 51.1852 14.8058 50.9253C14.7961 50.6859 14.7053 50.2667 14.3051 49.9916L13.7386 50.8156ZM13.7546 51.1837L12.8602 50.7366L12.8442 50.7686L13.7386 51.2158L14.6331 51.6629L14.6491 51.6309L13.7546 51.1837ZM13.7386 51.2158L12.8731 50.7148L9.63982 56.3011L10.5053 56.802L11.3708 57.3029L14.6041 51.7167L13.7386 51.2158ZM10.5053 56.802L9.64261 56.2963C9.67128 56.2474 9.74082 56.1513 9.88729 56.0764C10.0318 56.0025 10.3967 55.8964 10.7565 56.1504L10.1798 56.9674L9.60316 57.7844C10.0537 58.1024 10.536 57.991 10.7979 57.8571C11.0617 57.7221 11.2486 57.5114 11.368 57.3077L10.5053 56.802ZM10.1798 56.9674L10.7565 56.1504C11.0808 56.3793 11.1118 56.7032 11.1118 56.8033C11.1118 56.9285 11.0768 57.0127 11.0499 57.0602L10.1798 56.5672L9.30982 56.0742C9.19216 56.2819 9.11182 56.5341 9.11182 56.8033C9.11182 57.0475 9.1882 57.4914 9.60316 57.7844L10.1798 56.9674ZM10.1798 56.5672L11.0453 57.0682L14.2786 51.4819L13.4131 50.981L12.5477 50.4801L9.31436 56.0663L10.1798 56.5672ZM13.4131 50.981L14.2706 51.4955L14.2866 51.4689L13.4291 50.9543L12.5717 50.4398L12.5557 50.4665L13.4131 50.981Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
         mask="url(#path-32-inside-4_637_1524)"
       />
       <mask id="path-34-inside-5_637_1524" fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}>
-        <path d="M11.7833 53.5338C11.7833 53.299 11.6286 53.1923 11.4365 53.2884C11.2444 53.3844 11.0897 53.6512 11.0897 53.8859C11.0897 54.1207 11.2444 54.2274 11.4365 54.1314C11.6286 54.0353 11.7833 53.7685 11.7833 53.5338ZM12.2475 53.2937C12.2475 53.8379 11.8847 54.4622 11.4365 54.6916C10.9883 54.921 10.6255 54.6649 10.6255 54.1207C10.6255 53.5765 10.9883 52.9522 11.4365 52.7228C11.8847 52.4934 12.2475 52.7495 12.2475 53.2937Z" />
+        <path d="M11.0333 52.817C11.0333 52.5822 10.8786 52.4755 10.6865 52.5716C10.4944 52.6676 10.3397 52.9344 10.3397 53.1691C10.3397 53.4039 10.4944 53.5106 10.6865 53.4146C10.8786 53.3185 11.0333 53.0517 11.0333 52.817ZM11.4975 52.5769C11.4975 53.1211 11.1347 53.7454 10.6865 53.9748C10.2383 54.2042 9.87549 53.9481 9.87549 53.4039C9.87549 52.8597 10.2383 52.2354 10.6865 52.006C11.1347 51.7766 11.4975 52.0327 11.4975 52.5769Z" />
       </mask>
       <path
-        d="M11.7833 53.5338C11.7833 53.299 11.6286 53.1923 11.4365 53.2884C11.2444 53.3844 11.0897 53.6512 11.0897 53.8859C11.0897 54.1207 11.2444 54.2274 11.4365 54.1314C11.6286 54.0353 11.7833 53.7685 11.7833 53.5338ZM12.2475 53.2937C12.2475 53.8379 11.8847 54.4622 11.4365 54.6916C10.9883 54.921 10.6255 54.6649 10.6255 54.1207C10.6255 53.5765 10.9883 52.9522 11.4365 52.7228C11.8847 52.4934 12.2475 52.7495 12.2475 53.2937Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M11.0333 52.817C11.0333 52.5822 10.8786 52.4755 10.6865 52.5716C10.4944 52.6676 10.3397 52.9344 10.3397 53.1691C10.3397 53.4039 10.4944 53.5106 10.6865 53.4146C10.8786 53.3185 11.0333 53.0517 11.0333 52.817ZM11.4975 52.5769C11.4975 53.1211 11.1347 53.7454 10.6865 53.9748C10.2383 54.2042 9.87549 53.9481 9.87549 53.4039C9.87549 52.8597 10.2383 52.2354 10.6865 52.006C11.1347 51.7766 11.4975 52.0327 11.4975 52.5769Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
-        d="M11.7833 53.5338H12.7833C12.7833 53.2204 12.6769 52.7637 12.2565 52.4686C11.8092 52.1545 11.3108 52.2332 10.9893 52.3939L11.4365 53.2884L11.8837 54.1828C11.7542 54.2475 11.4293 54.3315 11.1073 54.1054C10.8123 53.8983 10.7833 53.6124 10.7833 53.5338H11.7833ZM11.4365 53.2884L10.9893 52.3939C10.6733 52.5519 10.4577 52.8064 10.3261 53.0332C10.1917 53.2649 10.0897 53.5617 10.0897 53.8859H11.0897H12.0897C12.0897 53.9754 12.065 54.0214 12.056 54.037C12.0488 54.0494 12.0362 54.0681 12.014 54.0907C11.9926 54.1124 11.951 54.1491 11.8837 54.1828L11.4365 53.2884ZM11.0897 53.8859H10.0897C10.0897 54.1993 10.1961 54.656 10.6164 54.9511C11.0638 55.2652 11.5621 55.1866 11.8837 55.0258L11.4365 54.1314L10.9893 53.2369C11.1187 53.1722 11.4437 53.0882 11.7657 53.3143C12.0606 53.5214 12.0897 53.8073 12.0897 53.8859H11.0897ZM11.4365 54.1314L11.8837 55.0258C12.1997 54.8678 12.4152 54.6133 12.5468 54.3865C12.6813 54.1548 12.7833 53.858 12.7833 53.5338H11.7833H10.7833C10.7833 53.4443 10.8079 53.3983 10.817 53.3827C10.8242 53.3703 10.8367 53.3516 10.859 53.329C10.8803 53.3073 10.9219 53.2706 10.9893 53.2369L11.4365 54.1314ZM12.2475 53.2937H11.2475C11.2475 53.357 11.2213 53.4776 11.1452 53.6087C11.11 53.6693 11.0717 53.7185 11.0371 53.7539C11.0016 53.7903 10.9802 53.8018 10.9808 53.8014L11.4365 54.6916L11.8921 55.5817C12.3309 55.3571 12.66 54.983 12.8749 54.6127C13.0923 54.2383 13.2475 53.7746 13.2475 53.2937H12.2475ZM11.4365 54.6916L10.9808 53.8014C10.9826 53.8005 11.0323 53.7755 11.1233 53.7757C11.2207 53.776 11.3357 53.8061 11.4389 53.8788C11.6468 54.0253 11.6255 54.1939 11.6255 54.1207H10.6255H9.62549C9.62549 54.5917 9.78557 55.1605 10.287 55.5137C10.8187 55.8884 11.4365 55.815 11.8921 55.5817L11.4365 54.6916ZM10.6255 54.1207H11.6255C11.6255 54.0574 11.6517 53.9368 11.7278 53.8057C11.763 53.745 11.8012 53.6959 11.8359 53.6604C11.8714 53.6241 11.8928 53.6126 11.8921 53.6129L11.4365 52.7228L10.9808 51.8326C10.5421 52.0572 10.213 52.4314 9.99806 52.8017C9.7807 53.1761 9.62549 53.6397 9.62549 54.1207H10.6255ZM11.4365 52.7228L11.8921 53.6129C11.8904 53.6139 11.8407 53.6389 11.7497 53.6387C11.6522 53.6384 11.5372 53.6083 11.4341 53.5356C11.2261 53.3891 11.2475 53.2205 11.2475 53.2937H12.2475H13.2475C13.2475 52.8227 13.0874 52.2539 12.586 51.9006C12.0542 51.526 11.4364 51.5994 10.9808 51.8326L11.4365 52.7228Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M11.0333 52.817H12.0333C12.0333 52.5036 11.9269 52.0469 11.5065 51.7518C11.0592 51.4377 10.5608 51.5164 10.2393 51.6771L10.6865 52.5716L11.1337 53.466C11.0042 53.5307 10.6793 53.6147 10.3573 53.3886C10.0623 53.1816 10.0333 52.8956 10.0333 52.817H11.0333ZM10.6865 52.5716L10.2393 51.6771C9.92326 51.8351 9.70772 52.0896 9.57611 52.3164C9.44169 52.5481 9.33967 52.8449 9.33967 53.1691H10.3397H11.3397C11.3397 53.2586 11.315 53.3046 11.306 53.3202C11.2988 53.3326 11.2862 53.3513 11.264 53.3739C11.2426 53.3956 11.201 53.4323 11.1337 53.466L10.6865 52.5716ZM10.3397 53.1691H9.33967C9.33967 53.4825 9.4461 53.9392 9.86642 54.2343C10.3138 54.5484 10.8121 54.4698 11.1337 54.309L10.6865 53.4146L10.2393 52.5201C10.3687 52.4554 10.6937 52.3714 11.0157 52.5975C11.3106 52.8046 11.3397 53.0905 11.3397 53.1691H10.3397ZM10.6865 53.4146L11.1337 54.309C11.4497 54.151 11.6652 53.8965 11.7968 53.6697C11.9313 53.438 12.0333 53.1412 12.0333 52.817H11.0333H10.0333C10.0333 52.7275 10.0579 52.6815 10.067 52.6659C10.0742 52.6535 10.0867 52.6348 10.109 52.6122C10.1303 52.5905 10.1719 52.5538 10.2393 52.5201L10.6865 53.4146ZM11.4975 52.5769H10.4975C10.4975 52.6402 10.4713 52.7608 10.3952 52.8919C10.36 52.9525 10.3217 53.0017 10.2871 53.0372C10.2516 53.0735 10.2302 53.085 10.2308 53.0846L10.6865 53.9748L11.1421 54.8649C11.5809 54.6403 11.91 54.2662 12.1249 53.8959C12.3423 53.5215 12.4975 53.0578 12.4975 52.5769H11.4975ZM10.6865 53.9748L10.2308 53.0846C10.2326 53.0837 10.2823 53.0587 10.3733 53.0589C10.4707 53.0592 10.5857 53.0893 10.6889 53.162C10.8968 53.3085 10.8755 53.4771 10.8755 53.4039H9.87549H8.87549C8.87549 53.8749 9.03557 54.4437 9.53696 54.7969C10.0687 55.1716 10.6865 55.0982 11.1421 54.8649L10.6865 53.9748ZM9.87549 53.4039H10.8755C10.8755 53.3406 10.9017 53.22 10.9778 53.0889C11.013 53.0282 11.0512 52.9791 11.0859 52.9436C11.1214 52.9073 11.1428 52.8958 11.1421 52.8961L10.6865 52.006L10.2308 51.1158C9.79209 51.3404 9.463 51.7146 9.24806 52.0849C9.0307 52.4593 8.87549 52.9229 8.87549 53.4039H9.87549ZM10.6865 52.006L11.1421 52.8961C11.1404 52.8971 11.0907 52.9221 10.9997 52.9219C10.9022 52.9216 10.7872 52.8915 10.6841 52.8188C10.4761 52.6723 10.4975 52.5037 10.4975 52.5769H11.4975H12.4975C12.4975 52.1059 12.3374 51.5371 11.836 51.1838C11.3042 50.8092 10.6864 50.8826 10.2308 51.1158L10.6865 52.006Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
         mask="url(#path-34-inside-5_637_1524)"
       />
       <mask id="path-36-inside-6_637_1524" fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}>
-        <path d="M14.3228 55.3307C14.3228 55.0959 14.1681 54.9892 13.976 55.0852C13.784 55.1813 13.6292 55.448 13.6292 55.6828C13.6292 55.9176 13.784 56.0243 13.976 55.9282C14.1681 55.8322 14.3228 55.5654 14.3228 55.3307ZM14.787 55.0906C14.787 55.6348 14.4242 56.259 13.976 56.4885C13.5279 56.7179 13.165 56.4618 13.165 55.9176C13.165 55.3733 13.5279 54.7491 13.976 54.5197C14.4242 54.2902 14.787 54.5463 14.787 55.0906Z" />
+        <path d="M13.5728 54.6139C13.5728 54.3791 13.4181 54.2724 13.226 54.3684C13.034 54.4645 12.8792 54.7312 12.8792 54.966C12.8792 55.2008 13.034 55.3075 13.226 55.2114C13.4181 55.1154 13.5728 54.8486 13.5728 54.6139ZM14.037 54.3738C14.037 54.918 13.6742 55.5422 13.226 55.7717C12.7779 56.0011 12.415 55.745 12.415 55.2008C12.415 54.6565 12.7779 54.0323 13.226 53.8029C13.6742 53.5734 14.037 53.8295 14.037 54.3738Z" />
       </mask>
       <path
-        d="M14.3228 55.3307C14.3228 55.0959 14.1681 54.9892 13.976 55.0852C13.784 55.1813 13.6292 55.448 13.6292 55.6828C13.6292 55.9176 13.784 56.0243 13.976 55.9282C14.1681 55.8322 14.3228 55.5654 14.3228 55.3307ZM14.787 55.0906C14.787 55.6348 14.4242 56.259 13.976 56.4885C13.5279 56.7179 13.165 56.4618 13.165 55.9176C13.165 55.3733 13.5279 54.7491 13.976 54.5197C14.4242 54.2902 14.787 54.5463 14.787 55.0906Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M13.5728 54.6139C13.5728 54.3791 13.4181 54.2724 13.226 54.3684C13.034 54.4645 12.8792 54.7312 12.8792 54.966C12.8792 55.2008 13.034 55.3075 13.226 55.2114C13.4181 55.1154 13.5728 54.8486 13.5728 54.6139ZM14.037 54.3738C14.037 54.918 13.6742 55.5422 13.226 55.7717C12.7779 56.0011 12.415 55.745 12.415 55.2008C12.415 54.6565 12.7779 54.0323 13.226 53.8029C13.6742 53.5734 14.037 53.8295 14.037 54.3738Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
-        d="M14.3228 55.3307H15.3228C15.3228 55.0172 15.2164 54.5606 14.7961 54.2655C14.3487 53.9514 13.8504 54.03 13.5288 54.1908L13.976 55.0852L14.4232 55.9797C14.2938 56.0444 13.9688 56.1284 13.6468 55.9023C13.3519 55.6952 13.3228 55.4093 13.3228 55.3307H14.3228ZM13.976 55.0852L13.5288 54.1908C13.2128 54.3488 12.9973 54.6033 12.8657 54.8301C12.7312 55.0618 12.6292 55.3585 12.6292 55.6828H13.6292H14.6292C14.6292 55.7723 14.6046 55.8183 14.5955 55.8339C14.5883 55.8463 14.5758 55.8649 14.5535 55.8875C14.5322 55.9092 14.4906 55.946 14.4232 55.9797L13.976 55.0852ZM13.6292 55.6828H12.6292C12.6292 55.9962 12.7356 56.4529 13.156 56.748C13.6034 57.0621 14.1017 56.9834 14.4232 56.8227L13.976 55.9282L13.5288 55.0338C13.6583 54.9691 13.9832 54.8851 14.3052 55.1111C14.6002 55.3182 14.6292 55.6042 14.6292 55.6828H13.6292ZM13.976 55.9282L14.4232 56.8227C14.7393 56.6647 14.9548 56.4102 15.0864 56.1833C15.2208 55.9517 15.3228 55.6549 15.3228 55.3307H14.3228H13.3228C13.3228 55.2412 13.3475 55.1952 13.3565 55.1796C13.3637 55.1672 13.3763 55.1485 13.3985 55.1259C13.4199 55.1042 13.4615 55.0675 13.5288 55.0338L13.976 55.9282ZM14.787 55.0906H13.787C13.787 55.1538 13.7608 55.2744 13.6847 55.4055C13.6495 55.4662 13.6113 55.5154 13.5767 55.5508C13.5411 55.5872 13.5197 55.5986 13.5204 55.5983L13.976 56.4885L14.4317 57.3786C14.8704 57.154 15.1995 56.7799 15.4144 56.4096C15.6318 56.0351 15.787 55.5715 15.787 55.0906H14.787ZM13.976 56.4885L13.5204 55.5983C13.5222 55.5974 13.5718 55.5723 13.6628 55.5726C13.7603 55.5728 13.8753 55.603 13.9784 55.6756C14.1864 55.8221 14.165 55.9908 14.165 55.9176H13.165H12.165C12.165 56.3885 12.3251 56.9574 12.8265 57.3106C13.3583 57.6853 13.9761 57.6118 14.4317 57.3786L13.976 56.4885ZM13.165 55.9176H14.165C14.165 55.8543 14.1912 55.7337 14.2673 55.6026C14.3025 55.5419 14.3408 55.4927 14.3754 55.4573C14.4109 55.4209 14.4324 55.4095 14.4317 55.4098L13.976 54.5197L13.5204 53.6295C13.0816 53.8541 12.7526 54.2283 12.5376 54.5985C12.3203 54.973 12.165 55.4366 12.165 55.9176H13.165ZM13.976 54.5197L14.4317 55.4098C14.4299 55.4107 14.3802 55.4358 14.2892 55.4355C14.1918 55.4353 14.0768 55.4051 13.9736 55.3325C13.7657 55.186 13.787 55.0173 13.787 55.0906H14.787H15.787C15.787 54.6196 15.6269 54.0508 15.1255 53.6975C14.5938 53.3229 13.976 53.3963 13.5204 53.6295L13.976 54.5197Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M13.5728 54.6139H14.5728C14.5728 54.3005 14.4664 53.8438 14.0461 53.5487C13.5987 53.2346 13.1004 53.3132 12.7788 53.474L13.226 54.3684L13.6732 55.2629C13.5438 55.3276 13.2188 55.4116 12.8968 55.1855C12.6019 54.9784 12.5728 54.6925 12.5728 54.6139H13.5728ZM13.226 54.3684L12.7788 53.474C12.4628 53.632 12.2473 53.8865 12.1157 54.1133C11.9812 54.345 11.8792 54.6417 11.8792 54.966H12.8792H13.8792C13.8792 55.0555 13.8546 55.1015 13.8455 55.1171C13.8383 55.1295 13.8258 55.1482 13.8035 55.1707C13.7822 55.1924 13.7406 55.2292 13.6732 55.2629L13.226 54.3684ZM12.8792 54.966H11.8792C11.8792 55.2794 11.9856 55.7361 12.406 56.0312C12.8534 56.3453 13.3517 56.2666 13.6732 56.1059L13.226 55.2114L12.7788 54.317C12.9083 54.2523 13.2332 54.1683 13.5552 54.3944C13.8502 54.6014 13.8792 54.8874 13.8792 54.966H12.8792ZM13.226 55.2114L13.6732 56.1059C13.9893 55.9479 14.2048 55.6934 14.3364 55.4665C14.4708 55.2349 14.5728 54.9381 14.5728 54.6139H13.5728H12.5728C12.5728 54.5244 12.5975 54.4784 12.6065 54.4628C12.6137 54.4504 12.6263 54.4317 12.6485 54.4091C12.6699 54.3874 12.7115 54.3507 12.7788 54.317L13.226 55.2114ZM14.037 54.3738H13.037C13.037 54.437 13.0108 54.5576 12.9347 54.6887C12.8995 54.7494 12.8613 54.7986 12.8267 54.834C12.7911 54.8704 12.7697 54.8818 12.7704 54.8815L13.226 55.7717L13.6817 56.6618C14.1204 56.4372 14.4495 56.0631 14.6644 55.6928C14.8818 55.3183 15.037 54.8547 15.037 54.3738H14.037ZM13.226 55.7717L12.7704 54.8815C12.7722 54.8806 12.8218 54.8555 12.9128 54.8558C13.0103 54.856 13.1253 54.8862 13.2284 54.9588C13.4364 55.1054 13.415 55.274 13.415 55.2008H12.415H11.415C11.415 55.6717 11.5751 56.2406 12.0765 56.5938C12.6083 56.9685 13.2261 56.895 13.6817 56.6618L13.226 55.7717ZM12.415 55.2008H13.415C13.415 55.1375 13.4412 55.0169 13.5173 54.8858C13.5525 54.8251 13.5908 54.7759 13.6254 54.7405C13.6609 54.7041 13.6824 54.6927 13.6817 54.693L13.226 53.8029L12.7704 52.9127C12.3316 53.1373 12.0026 53.5115 11.7876 53.8817C11.5703 54.2562 11.415 54.7198 11.415 55.2008H12.415ZM13.226 53.8029L13.6817 54.693C13.6799 54.6939 13.6302 54.719 13.5392 54.7187C13.4418 54.7185 13.3268 54.6883 13.2236 54.6157C13.0157 54.4692 13.037 54.3005 13.037 54.3738H14.037H15.037C15.037 53.9028 14.8769 53.334 14.3755 52.9807C13.8438 52.6061 13.226 52.6795 12.7704 52.9127L13.226 53.8029Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
         mask="url(#path-36-inside-6_637_1524)"
       />
       <mask id="path-38-inside-7_637_1524" fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}>
-        <path d="M12.6314 49.6269C12.6314 49.4775 12.7328 49.3067 12.8555 49.2481C13.5758 48.9279 14.2748 48.8212 14.899 48.9546C15.5873 49.0987 16.1475 49.5202 16.537 50.1711C16.9211 50.822 17.1132 51.6864 17.0919 52.6627C17.0705 53.6445 16.8304 54.7062 16.4089 55.7413C15.9821 56.7764 15.3845 57.7475 14.6802 58.5531C13.9706 59.3588 13.181 59.967 12.386 60.3138C11.591 60.6606 10.8227 60.7407 10.1611 60.5379C9.56353 60.3512 9.06733 59.9457 8.72586 59.3481C8.66717 59.2467 8.71519 59.06 8.82724 58.9373C8.93928 58.8145 9.07267 58.8039 9.13136 58.9052C9.44082 59.4335 9.87832 59.7909 10.4119 59.9563C11.0094 60.1377 11.6977 60.0684 12.4127 59.7536C13.1276 59.4388 13.8426 58.8946 14.4775 58.169C15.1124 57.4433 15.6513 56.5736 16.0355 55.6399C16.4196 54.7062 16.6277 53.7512 16.649 52.8655C16.6704 51.9851 16.4996 51.2062 16.1528 50.6193C15.806 50.0324 15.2992 49.6535 14.6802 49.5255C14.1254 49.4081 13.5064 49.4988 12.8662 49.7816C12.7435 49.835 12.6421 49.7656 12.6421 49.6162L12.6314 49.6269Z" />
+        <path d="M11.8814 48.9101C11.8814 48.7607 11.9828 48.5899 12.1055 48.5313C12.8258 48.2111 13.5248 48.1044 14.149 48.2378C14.8373 48.3819 15.3975 48.8034 15.787 49.4543C16.1711 50.1052 16.3632 50.9696 16.3419 51.946C16.3205 52.9277 16.0804 53.9894 15.6589 55.0245C15.2321 56.0596 14.6345 57.0307 13.9302 57.8363C13.2206 58.642 12.431 59.2502 11.636 59.597C10.841 59.9438 10.0727 60.0239 9.4111 59.8211C8.81353 59.6344 8.31733 59.2289 7.97586 58.6313C7.91717 58.5299 7.96519 58.3432 8.07724 58.2205C8.18928 58.0977 8.32267 58.0871 8.38136 58.1885C8.69082 58.7167 9.12832 59.0741 9.66187 59.2395C10.2594 59.4209 10.9477 59.3516 11.6627 59.0368C12.3776 58.722 13.0926 58.1778 13.7275 57.4522C14.3624 56.7265 14.9013 55.8569 15.2855 54.9231C15.6696 53.9894 15.8777 53.0344 15.899 52.1487C15.9204 51.2684 15.7496 50.4894 15.4028 49.9025C15.056 49.3156 14.5492 48.9367 13.9302 48.8087C13.3754 48.6913 12.7564 48.782 12.1162 49.0648C11.9935 49.1182 11.8921 49.0488 11.8921 48.8994L11.8814 48.9101Z" />
       </mask>
       <path
-        d="M12.6314 49.6269C12.6314 49.4775 12.7328 49.3067 12.8555 49.2481C13.5758 48.9279 14.2748 48.8212 14.899 48.9546C15.5873 49.0987 16.1475 49.5202 16.537 50.1711C16.9211 50.822 17.1132 51.6864 17.0919 52.6627C17.0705 53.6445 16.8304 54.7062 16.4089 55.7413C15.9821 56.7764 15.3845 57.7475 14.6802 58.5531C13.9706 59.3588 13.181 59.967 12.386 60.3138C11.591 60.6606 10.8227 60.7407 10.1611 60.5379C9.56353 60.3512 9.06733 59.9457 8.72586 59.3481C8.66717 59.2467 8.71519 59.06 8.82724 58.9373C8.93928 58.8145 9.07267 58.8039 9.13136 58.9052C9.44082 59.4335 9.87832 59.7909 10.4119 59.9563C11.0094 60.1377 11.6977 60.0684 12.4127 59.7536C13.1276 59.4388 13.8426 58.8946 14.4775 58.169C15.1124 57.4433 15.6513 56.5736 16.0355 55.6399C16.4196 54.7062 16.6277 53.7512 16.649 52.8655C16.6704 51.9851 16.4996 51.2062 16.1528 50.6193C15.806 50.0324 15.2992 49.6535 14.6802 49.5255C14.1254 49.4081 13.5064 49.4988 12.8662 49.7816C12.7435 49.835 12.6421 49.7656 12.6421 49.6162L12.6314 49.6269Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M11.8814 48.9101C11.8814 48.7607 11.9828 48.5899 12.1055 48.5313C12.8258 48.2111 13.5248 48.1044 14.149 48.2378C14.8373 48.3819 15.3975 48.8034 15.787 49.4543C16.1711 50.1052 16.3632 50.9696 16.3419 51.946C16.3205 52.9277 16.0804 53.9894 15.6589 55.0245C15.2321 56.0596 14.6345 57.0307 13.9302 57.8363C13.2206 58.642 12.431 59.2502 11.636 59.597C10.841 59.9438 10.0727 60.0239 9.4111 59.8211C8.81353 59.6344 8.31733 59.2289 7.97586 58.6313C7.91717 58.5299 7.96519 58.3432 8.07724 58.2205C8.18928 58.0977 8.32267 58.0871 8.38136 58.1885C8.69082 58.7167 9.12832 59.0741 9.66187 59.2395C10.2594 59.4209 10.9477 59.3516 11.6627 59.0368C12.3776 58.722 13.0926 58.1778 13.7275 57.4522C14.3624 56.7265 14.9013 55.8569 15.2855 54.9231C15.6696 53.9894 15.8777 53.0344 15.899 52.1487C15.9204 51.2684 15.7496 50.4894 15.4028 49.9025C15.056 49.3156 14.5492 48.9367 13.9302 48.8087C13.3754 48.6913 12.7564 48.782 12.1162 49.0648C11.9935 49.1182 11.8921 49.0488 11.8921 48.8994L11.8814 48.9101Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
-        d="M12.6314 49.6269H11.6314V52.0414L13.3386 50.3339L12.6314 49.6269ZM12.8555 49.2481L12.4494 48.3342L12.4366 48.3399L12.4241 48.3459L12.8555 49.2481ZM14.899 48.9546L14.69 49.9325L14.6941 49.9334L14.899 48.9546ZM16.537 50.1711L17.3982 49.6628L17.3951 49.6576L16.537 50.1711ZM17.0919 52.6627L16.0921 52.6409L16.0921 52.641L17.0919 52.6627ZM16.4089 55.7413L17.3334 56.1226L17.3351 56.1185L16.4089 55.7413ZM14.6802 58.5531L15.4307 59.2141L15.4331 59.2113L14.6802 58.5531ZM10.1611 60.5379L9.86283 61.4924L9.8681 61.494L10.1611 60.5379ZM8.72586 59.3481L9.59412 58.8519L9.59129 58.8471L8.72586 59.3481ZM9.13136 58.9052L8.26592 59.4063L8.26853 59.4107L9.13136 58.9052ZM10.4119 59.9563L10.1158 60.9115L10.1214 60.9132L10.4119 59.9563ZM16.649 52.8655L15.6493 52.8413L15.6493 52.8414L16.649 52.8655ZM14.6802 49.5255L14.4733 50.5039L14.4776 50.5048L14.6802 49.5255ZM12.8662 49.7816L13.2649 50.6987L13.2702 50.6964L12.8662 49.7816ZM12.6421 49.6162H13.6421V47.2017L11.9349 48.9092L12.6421 49.6162ZM12.6314 49.6269H13.6314C13.6314 49.7646 13.5901 49.8587 13.5579 49.913C13.5288 49.9621 13.4526 50.071 13.287 50.1502L12.8555 49.2481L12.4241 48.3459C12.1358 48.4838 11.9475 48.7074 11.837 48.8939C11.7235 49.0856 11.6314 49.3397 11.6314 49.6269H12.6314ZM12.8555 49.2481L13.2617 50.1619C13.8447 49.9027 14.3251 49.8546 14.69 49.9325L14.899 48.9546L15.108 47.9767C14.2244 47.7879 13.3069 47.9531 12.4494 48.3342L12.8555 49.2481ZM14.899 48.9546L14.6941 49.9334C15.0795 50.014 15.4163 50.2457 15.6789 50.6845L16.537 50.1711L17.3951 49.6576C16.8787 48.7947 16.0951 48.1833 15.1039 47.9758L14.899 48.9546ZM16.537 50.1711L15.6758 50.6793C15.9411 51.129 16.1106 51.7966 16.0921 52.6409L17.0919 52.6627L18.0916 52.6846C18.1159 51.5761 17.9011 50.515 17.3982 49.6628L16.537 50.1711ZM17.0919 52.6627L16.0921 52.641C16.0739 53.4811 15.8663 54.4223 15.4828 55.3642L16.4089 55.7413L17.3351 56.1185C17.7946 54.9902 18.0672 53.8078 18.0916 52.6845L17.0919 52.6627ZM16.4089 55.7413L15.4845 55.3601C15.0975 56.2984 14.5567 57.175 13.9274 57.895L14.6802 58.5531L15.4331 59.2113C16.2124 58.3199 16.8667 57.2544 17.3334 56.1225L16.4089 55.7413ZM14.6802 58.5531L13.9298 57.8921C13.2931 58.615 12.6174 59.1218 11.9861 59.3972L12.386 60.3138L12.7858 61.2304C13.7445 60.8122 14.6481 60.1025 15.4307 59.2141L14.6802 58.5531ZM12.386 60.3138L11.9861 59.3972C11.3489 59.6752 10.8309 59.6973 10.4541 59.5818L10.1611 60.5379L9.8681 61.494C10.8145 61.784 11.8331 61.646 12.7858 61.2304L12.386 60.3138ZM10.1611 60.5379L10.4594 59.5834C10.1205 59.4775 9.81975 59.2468 9.59411 58.852L8.72586 59.3481L7.85762 59.8442C8.31492 60.6445 9.00659 61.2248 9.86283 61.4924L10.1611 60.5379ZM8.72586 59.3481L9.59129 58.8471C9.67218 58.9868 9.6945 59.1162 9.69943 59.1991C9.70445 59.2837 9.69354 59.3497 9.68267 59.3932C9.66228 59.4747 9.62472 59.5469 9.56572 59.6115L8.82724 58.9373L8.08875 58.263C7.91771 58.4503 7.80011 58.6772 7.74238 58.9081C7.69157 59.1114 7.64868 59.4834 7.86044 59.8491L8.72586 59.3481ZM8.82724 58.9373L9.56572 59.6115C9.51185 59.6705 9.36053 59.8067 9.0964 59.8325C8.95667 59.8461 8.78955 59.8262 8.62497 59.7433C8.45877 59.6596 8.33993 59.5341 8.26593 59.4063L9.13136 58.9052L9.99679 58.4042C9.765 58.0039 9.33453 57.7998 8.90221 57.8419C8.5287 57.8784 8.25467 58.0813 8.08875 58.263L8.82724 58.9373ZM9.13136 58.9052L8.26853 59.4107C8.69234 60.1341 9.32239 60.6655 10.1158 60.9115L10.4119 59.9563L10.708 59.0012C10.4343 58.9163 10.1893 58.7328 9.99419 58.3998L9.13136 58.9052ZM10.4119 59.9563L10.1214 60.9132C11.0001 61.18 11.938 61.0552 12.8156 60.6688L12.4127 59.7536L12.0097 58.8384C11.4574 59.0815 11.0187 59.0955 10.7024 58.9995L10.4119 59.9563ZM12.4127 59.7536L12.8156 60.6688C13.6886 60.2844 14.5178 59.6415 15.2301 58.8275L14.4775 58.169L13.7249 57.5104C13.1674 58.1477 12.5666 58.5932 12.0097 58.8384L12.4127 59.7536ZM14.4775 58.169L15.2301 58.8275C15.9388 58.0174 16.5353 57.0534 16.9602 56.0204L16.0355 55.6399L15.1107 55.2595C14.7674 56.0939 14.286 56.8692 13.7249 57.5104L14.4775 58.169ZM16.0355 55.6399L16.9602 56.0204C17.3859 54.9859 17.6241 53.9104 17.6487 52.8896L16.649 52.8655L15.6493 52.8414C15.6312 53.592 15.4533 54.4266 15.1107 55.2595L16.0355 55.6399ZM16.649 52.8655L17.6487 52.8897C17.6733 51.878 17.4807 50.9007 17.0138 50.1105L16.1528 50.6193L15.2919 51.128C15.5186 51.5116 15.6675 52.0923 15.6493 52.8413L16.649 52.8655ZM16.1528 50.6193L17.0138 50.1105C16.538 49.3055 15.8043 48.7369 14.8829 48.5462L14.6802 49.5255L14.4776 50.5048C14.794 50.5702 15.074 50.7593 15.2919 51.128L16.1528 50.6193ZM14.6802 49.5255L14.8872 48.5471C14.0782 48.376 13.243 48.522 12.4622 48.8668L12.8662 49.7816L13.2702 50.6964C13.7699 50.4757 14.1725 50.4402 14.4733 50.5038L14.6802 49.5255ZM12.8662 49.7816L12.4675 48.8645C12.6447 48.7875 12.9796 48.7378 13.2931 48.9639C13.5906 49.1784 13.6421 49.4789 13.6421 49.6162H12.6421H11.6421C11.6421 49.9029 11.7443 50.3127 12.1231 50.586C12.518 50.8708 12.965 50.8291 13.2649 50.6987L12.8662 49.7816ZM12.6421 49.6162L11.9349 48.9092L11.9243 48.9198L12.6314 49.6269L13.3386 50.3339L13.3493 50.3232L12.6421 49.6162Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M11.8814 48.9101H10.8814V51.3246L12.5886 49.6171L11.8814 48.9101ZM12.1055 48.5313L11.6994 47.6174L11.6866 47.6231L11.6741 47.6291L12.1055 48.5313ZM14.149 48.2378L13.94 49.2157L13.9441 49.2166L14.149 48.2378ZM15.787 49.4543L16.6482 48.946L16.6451 48.9408L15.787 49.4543ZM16.3419 51.946L15.3421 51.9241L15.3421 51.9242L16.3419 51.946ZM15.6589 55.0245L16.5834 55.4058L16.5851 55.4017L15.6589 55.0245ZM13.9302 57.8363L14.6807 58.4973L14.6831 58.4945L13.9302 57.8363ZM9.4111 59.8211L9.11283 60.7756L9.1181 60.7772L9.4111 59.8211ZM7.97586 58.6313L8.84412 58.1352L8.84129 58.1303L7.97586 58.6313ZM8.38136 58.1885L7.51592 58.6895L7.51853 58.6939L8.38136 58.1885ZM9.66187 59.2395L9.36577 60.1947L9.37139 60.1964L9.66187 59.2395ZM15.899 52.1487L14.8993 52.1245L14.8993 52.1246L15.899 52.1487ZM13.9302 48.8087L13.7233 49.7871L13.7276 49.788L13.9302 48.8087ZM12.1162 49.0648L12.5149 49.9819L12.5202 49.9796L12.1162 49.0648ZM11.8921 48.8994H12.8921V46.4849L11.1849 48.1924L11.8921 48.8994ZM11.8814 48.9101H12.8814C12.8814 49.0478 12.8401 49.1419 12.8079 49.1962C12.7788 49.2453 12.7026 49.3542 12.537 49.4334L12.1055 48.5313L11.6741 47.6291C11.3858 47.767 11.1975 47.9906 11.087 48.1771C10.9735 48.3688 10.8814 48.6229 10.8814 48.9101H11.8814ZM12.1055 48.5313L12.5117 49.4451C13.0947 49.1859 13.5751 49.1378 13.94 49.2157L14.149 48.2378L14.358 47.2599C13.4744 47.0711 12.5569 47.2363 11.6994 47.6174L12.1055 48.5313ZM14.149 48.2378L13.9441 49.2166C14.3295 49.2972 14.6663 49.5289 14.9289 49.9678L15.787 49.4543L16.6451 48.9408C16.1287 48.0779 15.3451 47.4665 14.3539 47.259L14.149 48.2378ZM15.787 49.4543L14.9258 49.9625C15.1911 50.4122 15.3606 51.0798 15.3421 51.9241L16.3419 51.946L17.3416 51.9678C17.3659 50.8593 17.1511 49.7982 16.6482 48.946L15.787 49.4543ZM16.3419 51.946L15.3421 51.9242C15.3239 52.7643 15.1163 53.7055 14.7328 54.6474L15.6589 55.0245L16.5851 55.4017C17.0446 54.2734 17.3172 53.091 17.3416 51.9677L16.3419 51.946ZM15.6589 55.0245L14.7345 54.6433C14.3475 55.5816 13.8067 56.4582 13.1774 57.1782L13.9302 57.8363L14.6831 58.4945C15.4624 57.6031 16.1167 56.5376 16.5834 55.4057L15.6589 55.0245ZM13.9302 57.8363L13.1798 57.1753C12.5431 57.8982 11.8674 58.405 11.2361 58.6804L11.636 59.597L12.0358 60.5136C12.9945 60.0954 13.8981 59.3857 14.6807 58.4973L13.9302 57.8363ZM11.636 59.597L11.2361 58.6804C10.5989 58.9584 10.0809 58.9805 9.70411 58.865L9.4111 59.8211L9.1181 60.7772C10.0645 61.0672 11.0831 60.9292 12.0358 60.5136L11.636 59.597ZM9.4111 59.8211L9.70938 58.8666C9.37048 58.7607 9.06975 58.53 8.84411 58.1352L7.97586 58.6313L7.10762 59.1274C7.56492 59.9277 8.25659 60.508 9.11283 60.7756L9.4111 59.8211ZM7.97586 58.6313L8.84129 58.1303C8.92218 58.27 8.9445 58.3994 8.94943 58.4823C8.95445 58.5669 8.94354 58.6329 8.93267 58.6764C8.91228 58.758 8.87472 58.8301 8.81572 58.8947L8.07724 58.2205L7.33875 57.5462C7.16771 57.7335 7.05011 57.9604 6.99238 58.1913C6.94157 58.3946 6.89868 58.7666 7.11044 59.1323L7.97586 58.6313ZM8.07724 58.2205L8.81572 58.8947C8.76185 58.9537 8.61053 59.0899 8.3464 59.1157C8.20667 59.1293 8.03955 59.1094 7.87497 59.0265C7.70877 58.9428 7.58993 58.8173 7.51593 58.6895L8.38136 58.1885L9.24679 57.6874C9.015 57.2871 8.58453 57.083 8.15221 57.1251C7.7787 57.1616 7.50467 57.3645 7.33875 57.5462L8.07724 58.2205ZM8.38136 58.1885L7.51853 58.6939C7.94234 59.4173 8.57239 59.9487 9.36577 60.1947L9.66187 59.2395L9.95797 58.2844C9.68426 58.1995 9.43929 58.016 9.24419 57.683L8.38136 58.1885ZM9.66187 59.2395L9.37139 60.1964C10.2501 60.4632 11.188 60.3384 12.0656 59.952L11.6627 59.0368L11.2597 58.1216C10.7074 58.3647 10.2687 58.3787 9.95235 58.2827L9.66187 59.2395ZM11.6627 59.0368L12.0656 59.952C12.9386 59.5676 13.7678 58.9247 14.4801 58.1107L13.7275 57.4522L12.9749 56.7937C12.4174 57.4309 11.8166 57.8764 11.2597 58.1216L11.6627 59.0368ZM13.7275 57.4522L14.4801 58.1107C15.1888 57.3006 15.7853 56.3366 16.2102 55.3036L15.2855 54.9231L14.3607 54.5427C14.0174 55.3771 13.536 56.1524 12.9749 56.7937L13.7275 57.4522ZM15.2855 54.9231L16.2102 55.3036C16.6359 54.2691 16.8741 53.1936 16.8987 52.1728L15.899 52.1487L14.8993 52.1246C14.8812 52.8752 14.7033 53.7098 14.3607 54.5427L15.2855 54.9231ZM15.899 52.1487L16.8987 52.1729C16.9233 51.1612 16.7307 50.1839 16.2638 49.3937L15.4028 49.9025L14.5419 50.4112C14.7686 50.7948 14.9175 51.3755 14.8993 52.1245L15.899 52.1487ZM15.4028 49.9025L16.2638 49.3937C15.788 48.5887 15.0543 48.0201 14.1329 47.8294L13.9302 48.8087L13.7276 49.788C14.044 49.8534 14.324 50.0425 14.5419 50.4112L15.4028 49.9025ZM13.9302 48.8087L14.1372 47.8303C13.3282 47.6592 12.493 47.8052 11.7122 48.1501L12.1162 49.0648L12.5202 49.9796C13.0199 49.7589 13.4225 49.7234 13.7233 49.787L13.9302 48.8087ZM12.1162 49.0648L11.7175 48.1477C11.8947 48.0707 12.2296 48.021 12.5431 48.2471C12.8406 48.4616 12.8921 48.7621 12.8921 48.8994H11.8921H10.8921C10.8921 49.1861 10.9943 49.5959 11.3731 49.8692C11.768 50.154 12.215 50.1123 12.5149 49.9819L12.1162 49.0648ZM11.8921 48.8994L11.1849 48.1924L11.1743 48.203L11.8814 48.9101L12.5886 49.6171L12.5993 49.6064L11.8921 48.8994Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
         mask="url(#path-38-inside-7_637_1524)"
       />
       <path
-        d="M32.6416 43.9189C32.8989 43.7886 33.0298 43.841 33.082 43.8779C33.1494 43.9259 33.2655 44.0754 33.2656 44.4287C33.2656 44.7781 33.1461 45.1793 32.9375 45.5391C32.7276 45.901 32.4543 46.1752 32.1895 46.3096H32.1885L23.1289 50.9248C22.8717 51.0551 22.7416 51.0037 22.6895 50.9668C22.6221 50.919 22.506 50.7697 22.5059 50.416C22.5059 50.0667 22.6245 49.6653 22.833 49.3057C23.043 48.9437 23.3171 48.6695 23.582 48.5352H23.583L32.6416 43.9189Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M31.8916 43.2021C32.1489 43.0718 32.2798 43.1242 32.332 43.1611C32.3994 43.2091 32.5155 43.3587 32.5156 43.7119C32.5156 44.0613 32.3961 44.4626 32.1875 44.8223C31.9776 45.1842 31.7043 45.4584 31.4395 45.5928H31.4385L22.3789 50.208C22.1217 50.3383 21.9916 50.2869 21.9395 50.25C21.8721 50.2022 21.756 50.0529 21.7559 49.6992C21.7559 49.3499 21.8745 48.9485 22.083 48.5889C22.293 48.2269 22.5671 47.9527 22.832 47.8184H22.833L31.8916 43.2021Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
       />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M49.4459 2.57338C48.2828 1.98115 46.7889 2.02916 45.1509 2.86683C41.4534 4.75025 38.4602 9.92566 38.4602 14.4181C38.4602 16.9258 39.3939 18.6972 40.8611 19.4441L38.4815 18.233C37.0143 17.486 36.0806 15.7146 36.0806 13.207C36.0806 8.70917 39.0791 3.53377 42.7712 1.65568C44.4039 0.823348 45.9032 0.769994 47.0663 1.36223L49.4459 2.57338Z"
+        d="M48.6959 1.85659C47.5328 1.26435 46.0389 1.31237 44.4009 2.15004C40.7034 4.03346 37.7102 9.20886 37.7102 13.7013C37.7102 16.209 38.6439 17.9804 40.1111 18.7273L37.7315 17.5162C36.2643 16.7692 35.3306 14.9978 35.3306 12.4902C35.3306 7.99237 38.3291 2.81697 42.0212 0.938885C43.6539 0.106552 45.1532 0.0531968 46.3163 0.645434L48.6959 1.85659Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.5"
         strokeLinecap="round"
         strokeLinejoin="round"
@@ -337,22 +343,22 @@ export function ArchivedCycleVerticalStackIllustration({ className }: TIllustrat
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M49.4457 2.57317C50.9129 3.32013 51.8467 5.09151 51.8467 7.59918C51.8467 12.097 48.8481 17.2724 45.156 19.1505C43.5233 19.9828 42.0241 20.0362 40.8609 19.4439C39.3937 18.697 38.46 16.9256 38.46 14.4179C38.46 9.92011 41.4585 4.7447 45.1506 2.86662C46.7833 2.03429 48.2826 1.98093 49.4457 2.57317Z"
+        d="M48.6957 1.85637C50.1629 2.60334 51.0967 4.37471 51.0967 6.88238C51.0967 11.3802 48.0981 16.5556 44.406 18.4337C42.7733 19.266 41.2741 19.3194 40.1109 18.7271C38.6437 17.9802 37.71 16.2088 37.71 13.7011C37.71 9.20331 40.7085 4.02791 44.4006 2.14982C46.0333 1.31749 47.5326 1.26413 48.6957 1.85637Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.5"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
       <path
-        d="M43.2979 15.4766C43.2572 15.4566 43.2179 15.4351 43.1797 15.4121C43.2187 15.4347 43.2578 15.4566 43.2979 15.4766Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M42.5479 14.7598C42.5072 14.7398 42.4679 14.7184 42.4297 14.6953C42.4687 14.7179 42.5078 14.7398 42.5479 14.7598Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
       />
       <path
-        d="M44.0566 13.6064C44.14 13.661 44.226 13.7069 44.3154 13.7422C44.2284 13.7154 44.1512 13.6777 44.085 13.6309C44.0749 13.6238 44.0666 13.6142 44.0566 13.6064ZM46.8799 8.31543C46.9113 8.32939 46.9406 8.34529 46.9688 8.3623C46.9394 8.34564 46.9099 8.32983 46.8799 8.31543Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M43.3066 12.8896C43.39 12.9442 43.476 12.9901 43.5654 13.0254C43.4784 12.9986 43.4012 12.9609 43.335 12.9141C43.3249 12.907 43.3166 12.8974 43.3066 12.8896ZM46.1299 7.59863C46.1613 7.61259 46.1906 7.62849 46.2188 7.64551C46.1894 7.62884 46.1599 7.61303 46.1299 7.59863Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
       />
     </svg>
   );
diff --git a/packages/propel/src/empty-state/assets/vertical-stack/archived-module.tsx b/packages/propel/src/empty-state/assets/vertical-stack/archived-module.tsx
index 625a9a20c..5086aa1e5 100644
--- a/packages/propel/src/empty-state/assets/vertical-stack/archived-module.tsx
+++ b/packages/propel/src/empty-state/assets/vertical-stack/archived-module.tsx
@@ -1,12 +1,18 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper";
 import type { TIllustrationAssetProps } from "../helper";
 
 export function ArchivedModuleVerticalStackIllustration({ className }: TIllustrationAssetProps) {
   return (
     <svg
-      width="162"
-      height="183"
-      viewBox="0 0 162 183"
+      width="161"
+      height="182"
+      viewBox="0 0 161 182"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       className={className}
@@ -14,9 +20,9 @@ export function ArchivedModuleVerticalStackIllustration({ className }: TIllustra
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M25.9452 34.658C24.4766 33.9103 23.542 32.1426 23.542 29.6273C23.542 25.1253 26.5433 19.945 30.2389 18.0652L55.0187 5.43502C56.6528 4.6019 58.1482 4.5485 59.3124 5.14129L56.9305 3.92901C55.7663 3.33622 54.271 3.38962 52.6368 4.22273L27.8571 16.8529C24.1562 18.7381 21.1602 23.9183 21.1602 28.415C21.1602 30.9304 22.0947 32.6981 23.5634 33.4457L25.9452 34.658Z"
+        d="M25.1952 33.908C23.7266 33.1603 22.792 31.3926 22.792 28.8773C22.792 24.3753 25.7933 19.195 29.4889 17.3152L54.2687 4.68502C55.9028 3.8519 57.3982 3.7985 58.5624 4.39129L56.1805 3.17901C55.0163 2.58622 53.521 2.63962 51.8868 3.47273L27.1071 16.1029C23.4062 17.9881 20.4102 23.1683 20.4102 27.665C20.4102 30.1804 21.3447 31.9481 22.8134 32.6957L25.1952 33.908Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.5"
         strokeLinecap="round"
         strokeLinejoin="round"
@@ -24,41 +30,41 @@ export function ArchivedModuleVerticalStackIllustration({ className }: TIllustra
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M25.9452 34.6572C27.1094 35.25 28.6047 35.1966 30.2389 34.3634L55.0187 21.7386C58.7196 19.8534 61.7156 14.6732 61.7156 10.1765C61.7156 7.66116 60.781 5.89347 59.3124 5.1458C58.1482 4.55301 56.6528 4.60642 55.0187 5.43953L30.2389 18.0644C26.538 19.9496 23.542 25.1298 23.542 29.6265C23.542 32.1418 24.4766 33.9095 25.9452 34.6572Z"
+        d="M25.1952 33.9072C26.3594 34.5 27.8547 34.4466 29.4889 33.6134L54.2687 20.9886C57.9696 19.1034 60.9656 13.9232 60.9656 9.42651C60.9656 6.91116 60.031 5.14347 58.5624 4.3958C57.3982 3.80301 55.9028 3.85642 54.2687 4.68953L29.4889 17.3144C25.788 19.1996 22.792 24.3798 22.792 28.8765C22.792 31.3918 23.7266 33.1595 25.1952 33.9072Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.5"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
       <path
-        d="M33.6249 22.9154C33.7157 22.7766 33.8492 22.7178 33.9346 22.7766C34.0201 22.8353 34.0254 22.9955 33.9506 23.145L33.9346 23.1771L30.6983 28.7686C30.6075 28.9234 30.4633 28.9982 30.3725 28.9341C30.2817 28.87 30.2817 28.6938 30.3725 28.5336L33.6089 22.9421L33.6249 22.9154Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M32.8749 22.1654C32.9657 22.0266 33.0992 21.9678 33.1846 22.0266C33.2701 22.0853 33.2754 22.2455 33.2006 22.395L33.1846 22.4271L29.9483 28.0186C29.8575 28.1734 29.7133 28.2482 29.6225 28.1841C29.5317 28.12 29.5317 27.9438 29.6225 27.7836L32.8589 22.1921L32.8749 22.1654Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
-        d="M31.227 24.7793C31.227 24.5443 31.0721 24.4375 30.8799 24.5336C30.6876 24.6297 30.5327 24.8968 30.5327 25.1317C30.5327 25.3667 30.6876 25.4735 30.8799 25.3774C31.0721 25.2813 31.227 25.0143 31.227 24.7793ZM31.6916 24.5443C31.6916 25.089 31.3285 25.7139 30.8799 25.9435C30.4313 26.1731 30.0681 25.9168 30.0681 25.3721C30.0681 24.8273 30.4313 24.2025 30.8799 23.9729C31.3285 23.7432 31.6916 23.9996 31.6916 24.5443Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M30.477 24.0293C30.477 23.7943 30.3221 23.6875 30.1299 23.7836C29.9376 23.8797 29.7827 24.1468 29.7827 24.3817C29.7827 24.6167 29.9376 24.7235 30.1299 24.6274C30.3221 24.5313 30.477 24.2643 30.477 24.0293ZM30.9416 23.7943C30.9416 24.339 30.5785 24.9639 30.1299 25.1935C29.6813 25.4231 29.3181 25.1668 29.3181 24.6221C29.3181 24.0773 29.6813 23.4525 30.1299 23.2229C30.5785 22.9932 30.9416 23.2496 30.9416 23.7943Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
-        d="M33.7743 26.5781C33.7743 26.3431 33.6195 26.2363 33.4272 26.3324C33.2349 26.4286 33.0801 26.6956 33.0801 26.9306C33.0801 27.1656 33.2349 27.2724 33.4272 27.1762C33.6195 27.0801 33.7743 26.8131 33.7743 26.5781ZM34.2336 26.3431C34.2336 26.8879 33.8705 27.5127 33.4219 27.7423C32.9733 27.972 32.6101 27.7156 32.6101 27.1709C32.6101 26.6262 32.9733 26.0013 33.4219 25.7717C33.8705 25.5421 34.2336 25.7984 34.2336 26.3431Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M33.0243 25.8281C33.0243 25.5931 32.8695 25.4863 32.6772 25.5824C32.4849 25.6786 32.3301 25.9456 32.3301 26.1806C32.3301 26.4156 32.4849 26.5224 32.6772 26.4262C32.8695 26.3301 33.0243 26.0631 33.0243 25.8281ZM33.4836 25.5931C33.4836 26.1379 33.1205 26.7627 32.6719 26.9923C32.2233 27.222 31.8601 26.9656 31.8601 26.4209C31.8601 25.8762 32.2233 25.2513 32.6719 25.0217C33.1205 24.7921 33.4836 25.0484 33.4836 25.5931Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
-        d="M32.076 20.8697C32.076 20.7202 32.1775 20.5493 32.3003 20.4906C33.0213 20.1701 33.7209 20.0633 34.3457 20.1968C35.0346 20.341 35.5954 20.7629 35.9852 21.4145C36.3697 22.066 36.562 22.9312 36.5406 23.9085C36.5193 24.8911 36.279 25.9539 35.8571 26.9899C35.4298 28.026 34.8317 28.9979 34.1268 29.8043C33.4165 30.6107 32.6261 31.2195 31.8304 31.5667C31.0346 31.9138 30.2656 31.9939 29.6034 31.791C29.0053 31.6041 28.5086 31.1982 28.1668 30.6001C28.1081 30.4986 28.1561 30.3117 28.2683 30.1888C28.3804 30.066 28.5139 30.0553 28.5727 30.1568C28.8824 30.6855 29.3203 31.0433 29.8544 31.2089C30.4525 31.3904 31.1414 31.321 31.8571 31.0059C32.5727 30.6908 33.2883 30.1461 33.9238 29.4198C34.5593 28.6935 35.0987 27.823 35.4832 26.8884C35.8677 25.9539 36.076 24.9979 36.0974 24.1114C36.1187 23.2302 35.9479 22.4505 35.6007 21.8631C35.2536 21.2756 34.7462 20.8964 34.1268 20.7683C33.5713 20.6508 32.9519 20.7416 32.311 21.0246C32.1882 21.078 32.0867 21.0086 32.0867 20.8591L32.076 20.8697Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M31.326 20.1197C31.326 19.9702 31.4275 19.7993 31.5503 19.7406C32.2713 19.4201 32.9709 19.3133 33.5957 19.4468C34.2846 19.591 34.8454 20.0129 35.2352 20.6645C35.6197 21.316 35.812 22.1812 35.7906 23.1585C35.7693 24.1411 35.529 25.2039 35.1071 26.2399C34.6798 27.276 34.0817 28.2479 33.3768 29.0543C32.6665 29.8607 31.8761 30.4695 31.0804 30.8167C30.2846 31.1638 29.5156 31.2439 28.8534 31.041C28.2553 30.8541 27.7586 30.4482 27.4168 29.8501C27.3581 29.7486 27.4061 29.5617 27.5183 29.4388C27.6304 29.316 27.7639 29.3053 27.8227 29.4068C28.1324 29.9355 28.5703 30.2933 29.1044 30.4589C29.7025 30.6404 30.3914 30.571 31.1071 30.2559C31.8227 29.9408 32.5383 29.3961 33.1738 28.6698C33.8093 27.9435 34.3487 27.073 34.7332 26.1384C35.1177 25.2039 35.326 24.2479 35.3474 23.3614C35.3687 22.4802 35.1979 21.7005 34.8507 21.1131C34.5036 20.5256 33.9962 20.1464 33.3768 20.0183C32.8213 19.9008 32.2019 19.9916 31.561 20.2746C31.4382 20.328 31.3367 20.2586 31.3367 20.1091L31.326 20.1197Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M51.8838 17.9949L42.8157 22.6144C42.0681 22.9936 41.4646 22.5664 41.4646 21.6585C41.4646 20.7506 42.0681 19.7092 42.8157 19.33L51.8838 14.7105C52.6315 14.3314 53.235 14.7586 53.235 15.6665C53.235 16.5744 52.6315 17.6158 51.8838 17.9949Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M51.1338 17.2449L42.0657 21.8644C41.3181 22.2436 40.7146 21.8164 40.7146 20.9085C40.7146 20.0006 41.3181 18.9592 42.0657 18.58L51.1338 13.9605C51.8815 13.5814 52.485 14.0086 52.485 14.9165C52.485 15.8244 51.8815 16.8658 51.1338 17.2449Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M157.636 39.6191C158.234 39.3147 158.613 38.5937 158.613 37.5683V24.4735C158.613 22.6364 157.39 20.5216 155.879 19.7526L121.999 2.4922C121.331 2.15041 120.717 2.13439 120.242 2.37471L122.624 1.16243C123.099 0.92211 123.713 0.938131 124.381 1.27992L158.266 18.5456C159.777 19.3146 161 21.4295 161 23.2666V36.3614C161 37.3868 160.621 38.1077 160.023 38.4121L157.641 39.6244L157.636 39.6191Z"
+        d="M156.886 38.8691C157.484 38.5647 157.863 37.8437 157.863 36.8183V23.7235C157.863 21.8864 156.64 19.7716 155.129 19.0026L121.249 1.7422C120.581 1.40041 119.967 1.38439 119.492 1.62471L121.874 0.41243C122.349 0.17211 122.963 0.188131 123.631 0.52992L157.516 17.7956C159.027 18.5646 160.25 20.6795 160.25 22.5166V35.6114C160.25 36.6368 159.871 37.3577 159.273 37.6621L156.891 38.8744L156.886 38.8691Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.5"
         strokeLinecap="round"
         strokeLinejoin="round"
@@ -66,9 +72,9 @@ export function ArchivedModuleVerticalStackIllustration({ className }: TIllustra
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M157.636 39.6197C157.16 39.86 156.546 39.844 155.879 39.5022L121.993 22.2365C120.482 21.4675 119.259 19.3526 119.259 17.5155V4.42606C119.259 3.40069 119.638 2.67973 120.236 2.37532C120.712 2.135 121.326 2.15102 121.993 2.49281L155.879 19.7585C157.39 20.5275 158.613 22.6424 158.613 24.4795V37.5743C158.613 38.5996 158.234 39.3206 157.636 39.625V39.6197Z"
+        d="M156.886 38.8697C156.41 39.11 155.796 39.094 155.129 38.7522L121.243 21.4865C119.732 20.7175 118.509 18.6026 118.509 16.7655V3.67606C118.509 2.65069 118.888 1.92973 119.486 1.62532C119.962 1.385 120.576 1.40102 121.243 1.74281L155.129 19.0085C156.64 19.7775 157.863 21.8924 157.863 23.7295V36.8243C157.863 37.8496 157.484 38.5706 156.886 38.875V38.8697Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.5"
         strokeLinecap="round"
         strokeLinejoin="round"
@@ -76,46 +82,46 @@ export function ArchivedModuleVerticalStackIllustration({ className }: TIllustra
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M133.705 16.8793L141.566 20.8847C142.212 21.2158 142.736 20.8419 142.736 20.0569C142.736 19.2719 142.212 18.364 141.566 18.0382L133.705 14.0329C133.059 13.7018 132.535 14.0756 132.535 14.8606C132.535 15.6457 133.059 16.5536 133.705 16.8793Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M132.955 16.1293L140.816 20.1347C141.462 20.4658 141.986 20.0919 141.986 19.3069C141.986 18.5219 141.462 17.614 140.816 17.2882L132.955 13.2829C132.309 12.9518 131.785 13.3256 131.785 14.1106C131.785 14.8957 132.309 15.8036 132.955 16.1293Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M134.266 23.4595L145.288 29.0776C146.196 29.5369 146.928 29.0189 146.928 27.9187C146.928 26.8133 146.191 25.5476 145.288 25.0883L134.266 19.4701C133.358 19.0109 132.626 19.5289 132.626 20.629C132.626 21.7345 133.363 23.0002 134.266 23.4595Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M133.516 22.7095L144.538 28.3276C145.446 28.7869 146.178 28.2689 146.178 27.1687C146.178 26.0633 145.441 24.7976 144.538 24.3383L133.516 18.7201C132.608 18.2609 131.876 18.7789 131.876 19.879C131.876 20.9845 132.613 22.2502 133.516 22.7095Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M127.104 12.817C127.158 12.9933 127.28 13.1642 127.419 13.2336C127.612 13.335 127.772 13.2176 127.772 12.9772V12.534C127.772 12.3898 127.718 12.2242 127.622 12.0961C127.526 11.9679 127.409 11.8878 127.296 11.8824L125.027 11.8184C124.893 11.8184 124.802 11.9305 124.802 12.1121V15.1668C124.802 15.3217 124.867 15.4926 124.968 15.6261C125.075 15.7596 125.203 15.829 125.31 15.813L125.636 15.765C125.806 15.7383 125.871 15.5086 125.785 15.2523C125.726 15.0814 125.62 14.9425 125.502 14.8731V12.7636L127.099 12.8063L127.104 12.817Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M126.354 12.067C126.408 12.2433 126.53 12.4142 126.669 12.4836C126.862 12.585 127.022 12.4676 127.022 12.2272V11.784C127.022 11.6398 126.968 11.4742 126.872 11.3461C126.776 11.2179 126.659 11.1378 126.546 11.1324L124.277 11.0684C124.143 11.0684 124.052 11.1805 124.052 11.3621V14.4168C124.052 14.5717 124.117 14.7426 124.218 14.8761C124.325 15.0096 124.453 15.079 124.56 15.063L124.886 15.015C125.056 14.9883 125.121 14.7586 125.035 14.5023C124.976 14.3314 124.87 14.1925 124.752 14.1231V12.0136L126.349 12.0563L126.354 12.067Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M125.71 10.7975C125.764 10.9737 125.887 11.1446 126.026 11.214C126.218 11.3155 126.378 11.198 126.378 10.9577V10.5144C126.378 10.3703 126.325 10.2047 126.228 10.0765C126.132 9.94836 126.015 9.86825 125.903 9.86291L123.633 9.79883C123.499 9.79883 123.409 9.91098 123.409 10.0926V13.1473C123.409 13.3022 123.473 13.4731 123.574 13.6066C123.681 13.7401 123.809 13.8095 123.916 13.7935L124.242 13.7454C124.413 13.7187 124.477 13.4891 124.391 13.2327C124.333 13.0618 124.226 12.923 124.108 12.8536V10.7441L125.705 10.7868L125.71 10.7975Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M124.96 10.0475C125.014 10.2237 125.137 10.3946 125.276 10.464C125.468 10.5655 125.628 10.448 125.628 10.2077V9.76445C125.628 9.62026 125.575 9.4547 125.478 9.32653C125.382 9.19836 125.265 9.11825 125.153 9.11291L122.883 9.04883C122.749 9.04883 122.659 9.16098 122.659 9.34255V12.3973C122.659 12.5522 122.723 12.7231 122.824 12.8566C122.931 12.9901 123.059 13.0595 123.166 13.0435L123.492 12.9954C123.663 12.9687 123.727 12.7391 123.641 12.4827C123.583 12.3118 123.476 12.173 123.358 12.1036V9.99409L124.955 10.0368L124.96 10.0475Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M129.171 14.1879C129.075 14.0543 128.957 13.9742 128.851 13.9742L126.581 13.9102C126.447 13.9102 126.357 14.0276 126.357 14.1985V17.2586C126.357 17.4028 126.41 17.563 126.506 17.6912C126.608 17.8247 126.725 17.9048 126.832 17.9048L129.096 17.9689C129.235 17.9796 129.326 17.8621 129.326 17.6805V14.6204C129.326 14.4762 129.273 14.316 129.171 14.1879ZM128.626 17.029L127.056 16.9809V14.8608L128.626 14.9088V17.029Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M128.421 13.4379C128.325 13.3043 128.207 13.2242 128.101 13.2242L125.831 13.1602C125.697 13.1602 125.607 13.2776 125.607 13.4485V16.5086C125.607 16.6528 125.66 16.813 125.756 16.9412C125.858 17.0747 125.975 17.1548 126.082 17.1548L128.346 17.2189C128.485 17.2296 128.576 17.1121 128.576 16.9305V13.8704C128.576 13.7262 128.523 13.566 128.421 13.4379ZM127.876 16.279L126.306 16.2309V14.1108L127.876 14.1588V16.279Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <g opacity="0.2">
         <path
-          d="M1 147.833C1 149.852 2.51135 151.866 5.52871 153.409L44.3805 173.206C50.4206 176.282 60.2097 176.282 66.2497 173.206L147.889 131.609C150.907 130.071 152.418 128.058 152.418 126.039V132.485C152.418 134.504 150.907 136.517 147.889 138.055L66.2497 179.652C60.2097 182.728 50.4206 182.728 44.3805 179.652L5.52871 159.855C2.50601 158.317 1 156.298 1 154.279V147.833Z"
+          d="M0.25 147.083C0.25 149.102 1.76135 151.116 4.77871 152.659L43.6305 172.456C49.6706 175.532 59.4597 175.532 65.4997 172.456L147.139 130.859C150.157 129.321 151.668 127.308 151.668 125.289V131.735C151.668 133.754 150.157 135.767 147.139 137.305L65.4997 178.902C59.4597 181.978 49.6706 181.978 43.6305 178.902L4.77871 159.105C1.75601 157.567 0.25 155.548 0.25 153.529V147.083Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.5"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
         <path
-          d="M1 147.833C1 145.815 2.51135 143.801 5.52871 142.263L87.1683 100.666C93.2083 97.5903 102.997 97.5903 109.037 100.666L147.889 120.464C150.912 122.002 152.418 124.02 152.418 126.039C152.418 128.058 150.907 130.071 147.889 131.609L66.2497 173.206C60.2097 176.282 50.4206 176.282 44.3805 173.206L5.52871 153.409C2.50601 151.871 1 149.852 1 147.833Z"
+          d="M0.25 147.083C0.25 145.065 1.76135 143.051 4.77871 141.513L86.4183 99.9165C92.4583 96.8403 102.247 96.8403 108.287 99.9165L147.139 119.714C150.162 121.252 151.668 123.27 151.668 125.289C151.668 127.308 150.157 129.321 147.139 130.859L65.4997 172.456C59.4597 175.532 49.6706 175.532 43.6305 172.456L4.77871 152.659C1.75601 151.121 0.25 149.102 0.25 147.083Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.5"
           strokeLinecap="round"
           strokeLinejoin="round"
@@ -123,50 +129,50 @@ export function ArchivedModuleVerticalStackIllustration({ className }: TIllustra
       </g>
       <g opacity="0.6">
         <path
-          d="M1 127.47C1 129.489 2.51135 131.502 5.52871 133.046L44.3805 152.843C50.4206 155.919 60.2097 155.919 66.2497 152.843L147.889 111.246C150.907 109.708 152.418 107.694 152.418 105.676V112.122C152.418 114.14 150.907 116.154 147.889 117.692L66.2497 159.289C60.2097 162.365 50.4206 162.365 44.3805 159.289L5.52871 139.492C2.50601 137.954 1 135.935 1 133.916V127.47Z"
+          d="M0.25 126.72C0.25 128.739 1.76135 130.752 4.77871 132.296L43.6305 152.093C49.6706 155.169 59.4597 155.169 65.4997 152.093L147.139 110.496C150.157 108.958 151.668 106.944 151.668 104.926V111.372C151.668 113.39 150.157 115.404 147.139 116.942L65.4997 158.539C59.4597 161.615 49.6706 161.615 43.6305 158.539L4.77871 138.742C1.75601 137.204 0.25 135.185 0.25 133.166V126.72Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.5"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
         <path
-          d="M1 127.47C1 125.451 2.51135 123.438 5.52871 121.9L87.1683 80.3032C93.2083 77.2271 102.997 77.2271 109.037 80.3032L147.889 100.1C150.912 101.638 152.418 103.657 152.418 105.676C152.418 107.694 150.907 109.708 147.889 111.246L66.2497 152.843C60.2097 155.919 50.4206 155.919 44.3805 152.843L5.52871 133.046C2.50601 131.507 1 129.489 1 127.47Z"
+          d="M0.25 126.72C0.25 124.701 1.76135 122.688 4.77871 121.15L86.4183 79.5532C92.4583 76.4771 102.247 76.4771 108.287 79.5532L147.139 99.3503C150.162 100.888 151.668 102.907 151.668 104.926C151.668 106.944 150.157 108.958 147.139 110.496L65.4997 152.093C59.4597 155.169 49.6706 155.169 43.6305 152.093L4.77871 132.296C1.75601 130.757 0.25 128.739 0.25 126.72Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.5"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
       </g>
       <path
-        d="M1 107.107C1 109.126 2.51135 111.139 5.52871 112.682L44.3805 132.479C50.4206 135.556 60.2097 135.556 66.2497 132.479L147.889 90.8826C150.907 89.3445 152.418 87.3312 152.418 85.3125V91.7584C152.418 93.7771 150.907 95.7905 147.889 97.3285L66.2497 138.925C60.2097 142.001 50.4206 142.001 44.3805 138.925L5.52871 119.123C2.50601 117.585 1 115.566 1 113.547V107.102V107.107Z"
+        d="M0.25 106.357C0.25 108.376 1.76135 110.389 4.77871 111.932L43.6305 131.729C49.6706 134.806 59.4597 134.806 65.4997 131.729L147.139 90.1326C150.157 88.5945 151.668 86.5812 151.668 84.5625V91.0084C151.668 93.0271 150.157 95.0405 147.139 96.5785L65.4997 138.175C59.4597 141.251 49.6706 141.251 43.6305 138.175L4.77871 118.373C1.75601 116.835 0.25 114.816 0.25 112.797V106.352V106.357Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.5"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
       <path
-        d="M1 107.107C1 105.088 2.51135 103.075 5.52871 101.537L87.1683 59.9399C93.2083 56.8638 102.997 56.8638 109.037 59.9399L147.889 79.737C150.912 81.275 152.418 83.2937 152.418 85.3124C152.418 87.3311 150.907 89.3444 147.889 90.8825L66.2497 132.479C60.2097 135.555 50.4206 135.555 44.3805 132.479L5.52871 112.677C2.50601 111.139 1 109.12 1 107.101V107.107Z"
+        d="M0.25 106.357C0.25 104.338 1.76135 102.325 4.77871 100.787L86.4183 59.1899C92.4583 56.1138 102.247 56.1138 108.287 59.1899L147.139 78.987C150.162 80.525 151.668 82.5437 151.668 84.5624C151.668 86.5811 150.157 88.5944 147.139 90.1325L65.4997 131.729C59.4597 134.805 49.6706 134.805 43.6305 131.729L4.77871 111.927C1.75601 110.389 0.25 108.37 0.25 106.351V106.357Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.5"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
       <path
-        d="M65.0962 104.037C64.3272 104.037 63.6116 103.871 62.9707 103.54L58.2124 101.116C56.4874 100.24 55.43 98.2533 55.3018 95.6632L53.9774 68.9502C53.9667 68.7419 54.0789 68.5443 54.2658 68.4482L56.7598 67.1772L52.0174 64.7633C50.7838 64.1331 50.0789 62.7019 50.0789 60.8381V58.6004C50.0789 55.332 52.2738 51.5563 54.9707 50.1838L97.2778 28.6244C97.9667 28.2719 98.645 28.0957 99.2965 28.0957C99.8092 28.0957 100.285 28.2079 100.717 28.4268L105.475 30.8514C106.709 31.4816 107.414 32.9128 107.414 34.782V37.0196C107.414 40.288 105.219 44.0583 102.522 45.4362L99.7718 46.8354L103.227 48.5977C103.414 48.6938 103.526 48.8914 103.515 49.0997L102.191 77.1638C101.951 82.1839 98.5969 87.7272 94.5488 89.7833L68.167 103.225C67.1096 103.765 66.0735 104.037 65.0855 104.037H65.0962Z"
+        d="M64.3462 103.287C63.5772 103.287 62.8616 103.121 62.2207 102.79L57.4624 100.366C55.7374 99.4899 54.68 97.5033 54.5518 94.9132L53.2274 68.2002C53.2167 67.9919 53.3289 67.7943 53.5158 67.6982L56.0098 66.4272L51.2674 64.0133C50.0338 63.3831 49.3289 61.9519 49.3289 60.0881V57.8504C49.3289 54.582 51.5238 50.8063 54.2207 49.4338L96.5278 27.8744C97.2167 27.5219 97.895 27.3457 98.5465 27.3457C99.0592 27.3457 99.5345 27.4579 99.9671 27.6768L104.725 30.1014C105.959 30.7316 106.664 32.1628 106.664 34.032V36.2696C106.664 39.538 104.469 43.3083 101.772 44.6862L99.0218 46.0854L102.477 47.8477C102.664 47.9438 102.776 48.1414 102.765 48.3497L101.441 76.4138C101.201 81.4339 97.8469 86.9772 93.7988 89.0333L67.417 102.475C66.3596 103.015 65.3235 103.287 64.3355 103.287H64.3462Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
       />
       <path
-        d="M99.2964 28.6345C99.7236 28.6345 100.124 28.7306 100.471 28.9069L105.23 31.3314C106.239 31.8441 106.875 33.0617 106.875 34.7814V37.019C106.875 40.1058 104.813 43.6625 102.276 44.9603L98.5915 46.8401L102.981 49.0778L101.657 77.1419C101.427 81.991 98.207 87.3315 94.3084 89.3128L67.9266 102.755C66.9226 103.267 65.9666 103.508 65.0908 103.508C64.4019 103.508 63.7717 103.358 63.2056 103.07L58.4472 100.645C56.9466 99.8815 55.9533 98.1352 55.8304 95.6466L54.506 68.9336L58.3244 66.9897C58.2817 66.9897 58.2336 66.9897 58.1909 66.9897C57.7637 66.9897 57.3685 66.8989 57.016 66.7173L52.2577 64.2927C51.2483 63.7801 50.6128 62.5624 50.6128 60.8428V58.6052C50.6128 55.5184 52.6689 51.9616 55.2109 50.6639L97.518 29.1045C98.1482 28.784 98.7463 28.6345 99.2911 28.6345M99.2964 27.5664C98.5648 27.5664 97.8011 27.764 97.0374 28.1539L54.7303 49.7133C51.8251 51.1926 49.55 55.0965 49.55 58.6052V60.8428C49.55 62.9202 50.3618 64.5224 51.7824 65.2487L55.5901 67.1873L54.0307 67.983C53.6569 68.1753 53.4272 68.5651 53.4486 68.987L54.773 95.7C54.9065 98.4824 56.0761 100.635 57.9719 101.601L62.7303 104.026C63.4513 104.394 64.247 104.581 65.0961 104.581C66.1642 104.581 67.2857 104.287 68.4179 103.711L94.7997 90.2687C99.0721 88.1005 102.479 82.477 102.73 77.1953L104.055 49.1312C104.076 48.7093 103.846 48.3194 103.473 48.1272L100.952 46.8401L102.768 45.9162C105.673 44.4369 107.948 40.5277 107.948 37.0244V34.7867C107.948 32.7093 107.136 31.1071 105.716 30.3808L100.957 27.9563C100.45 27.6999 99.8892 27.5664 99.2964 27.5664Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        d="M98.5464 27.8845C98.9736 27.8845 99.3742 27.9806 99.7213 28.1569L104.48 30.5814C105.489 31.0941 106.125 32.3117 106.125 34.0314V36.269C106.125 39.3558 104.063 42.9125 101.526 44.2103L97.8415 46.0901L102.231 48.3278L100.907 76.3919C100.677 81.241 97.457 86.5815 93.5584 88.5628L67.1766 102.005C66.1726 102.517 65.2166 102.758 64.3408 102.758C63.6519 102.758 63.0217 102.608 62.4556 102.32L57.6972 99.8952C56.1966 99.1315 55.2033 97.3852 55.0804 94.8966L53.756 68.1836L57.5744 66.2397C57.5317 66.2397 57.4836 66.2397 57.4409 66.2397C57.0137 66.2397 56.6185 66.1489 56.266 65.9673L51.5077 63.5427C50.4983 63.0301 49.8628 61.8124 49.8628 60.0928V57.8552C49.8628 54.7684 51.9189 51.2116 54.4609 49.9139L96.768 28.3545C97.3982 28.034 97.9963 27.8845 98.5411 27.8845M98.5464 26.8164C97.8148 26.8164 97.0511 27.014 96.2874 27.4039L53.9803 48.9633C51.0751 50.4426 48.8 54.3465 48.8 57.8552V60.0928C48.8 62.1702 49.6118 63.7724 51.0324 64.4987L54.8401 66.4373L53.2807 67.233C52.9069 67.4253 52.6772 67.8151 52.6986 68.237L54.023 94.95C54.1565 97.7324 55.3261 99.8846 57.2219 100.851L61.9803 103.276C62.7013 103.644 63.497 103.831 64.3461 103.831C65.4142 103.831 66.5357 103.537 67.6679 102.961L94.0497 89.5187C98.3221 87.3505 101.729 81.727 101.98 76.4453L103.305 48.3812C103.326 47.9593 103.096 47.5694 102.723 47.3772L100.202 46.0901L102.018 45.1662C104.923 43.6869 107.198 39.7777 107.198 36.2744V34.0367C107.198 31.9593 106.386 30.3571 104.966 29.6308L100.207 27.2063C99.6999 26.9499 99.1392 26.8164 98.5464 26.8164Z"
+        fill="var(--illustration-stroke-tertiary)"
       />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M102.987 49.073L59.2698 71.3534L54.5115 68.9288L98.2285 46.6484L102.987 49.073Z"
+        d="M102.237 48.323L58.5198 70.6034L53.7615 68.1788L97.4785 45.8984L102.237 48.323Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
         stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
         strokeWidth="0.5"
@@ -176,7 +182,7 @@ export function ArchivedModuleVerticalStackIllustration({ className }: TIllustra
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M59.2698 71.3543L60.5943 98.0672C60.7171 100.556 61.7104 102.302 63.2111 103.066L58.4527 100.641C56.9521 99.8776 55.9587 98.1313 55.8359 95.6427L54.5115 68.9297L59.2698 71.3543Z"
+        d="M58.5198 70.6043L59.8443 97.3172C59.9671 99.8059 60.9604 101.552 62.4611 102.316L57.7027 99.8913C56.2021 99.1276 55.2087 97.3813 55.0859 94.8927L53.7615 68.1797L58.5198 70.6043Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
         stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
         strokeWidth="0.5"
@@ -186,7 +192,7 @@ export function ArchivedModuleVerticalStackIllustration({ className }: TIllustra
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M102.987 49.0723L101.662 77.1364C101.433 81.9855 98.2124 87.326 94.3139 89.3073L67.932 102.749C66.1429 103.662 64.4927 103.721 63.211 103.064C61.7104 102.301 60.717 100.554 60.5942 98.0656L59.2698 71.3527L102.987 49.0723Z"
+        d="M102.237 48.3223L100.912 76.3864C100.683 81.2355 97.4624 86.576 93.5639 88.5573L67.182 101.999C65.3929 102.912 63.7427 102.971 62.461 102.314C60.9604 101.551 59.967 99.8043 59.8442 97.3156L58.5198 70.6027L102.237 48.3223Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
         stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
         strokeWidth="0.5"
@@ -194,7 +200,7 @@ export function ArchivedModuleVerticalStackIllustration({ className }: TIllustra
         strokeLinejoin="round"
       />
       <path
-        d="M105.235 31.3324C104.434 30.9265 103.409 30.9585 102.282 31.53L59.9746 53.0894C57.4326 54.3818 55.3765 57.9385 55.3765 61.0306V63.2683C55.3765 64.9933 56.0174 66.2055 57.0214 66.7182L52.263 64.2937C51.2537 63.781 50.6182 62.5634 50.6182 60.8437V58.6061C50.6182 55.5193 52.6742 51.9625 55.2163 50.6648L97.5234 29.1054C98.6449 28.534 99.6756 28.4966 100.477 28.9078L105.235 31.3324Z"
+        d="M104.485 30.5824C103.684 30.1765 102.659 30.2085 101.532 30.78L59.2246 52.3394C56.6826 53.6318 54.6265 57.1885 54.6265 60.2806V62.5183C54.6265 64.2433 55.2674 65.4555 56.2714 65.9682L51.513 63.5437C50.5037 63.031 49.8682 61.8134 49.8682 60.0937V57.8561C49.8682 54.7693 51.9242 51.2125 54.4663 49.9148L96.7734 28.3554C97.8949 27.784 98.9256 27.7466 99.7267 28.1578L104.485 30.5824Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
         stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
         strokeWidth="0.5"
@@ -202,7 +208,7 @@ export function ArchivedModuleVerticalStackIllustration({ className }: TIllustra
         strokeLinejoin="round"
       />
       <path
-        d="M105.235 31.3316C106.244 31.8443 106.88 33.0619 106.88 34.7816V37.0192C106.88 40.106 104.818 43.6627 102.282 44.9605L59.9746 66.5199C58.8531 67.0913 57.8224 67.1287 57.0213 66.7175C56.012 66.2048 55.3765 64.9872 55.3765 63.2676V61.0299C55.3765 57.9431 57.4325 54.3864 59.9746 53.0886L102.282 31.5292C103.403 30.9578 104.434 30.9204 105.235 31.3316Z"
+        d="M104.485 30.5816C105.494 31.0943 106.13 32.3119 106.13 34.0316V36.2692C106.13 39.356 104.068 42.9127 101.532 44.2105L59.2246 65.7699C58.1031 66.3413 57.0724 66.3787 56.2713 65.9675C55.262 65.4548 54.6265 64.2372 54.6265 62.5176V60.2799C54.6265 57.1931 56.6825 53.6364 59.2246 52.3386L101.532 30.7792C102.653 30.2078 103.684 30.1704 104.485 30.5816Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
         stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
         strokeWidth="0.5"
@@ -212,17 +218,17 @@ export function ArchivedModuleVerticalStackIllustration({ className }: TIllustra
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M86.0947 91.7575C85.8384 91.7575 85.6034 91.7041 85.3844 91.5919C85.331 91.5652 85.2829 91.5385 85.2349 91.5011L80.5086 89.0926C80.5086 89.0926 80.4658 89.0659 80.4445 89.0552L73.0853 83.8536C72.1134 83.2448 71.9905 81.5625 72.8343 80.0405C73.4538 78.9083 74.4418 78.1767 75.355 78.1767C75.6114 78.1767 75.8517 78.2354 76.0707 78.3476L79.6755 80.1847V67.17C79.6755 65.7281 80.61 64.126 81.8063 63.5171C82.1267 63.3569 82.4472 63.2715 82.7569 63.2715C83.0132 63.2715 83.2589 63.3302 83.4779 63.4424L88.2362 65.8669C88.8397 66.1767 89.1868 66.8496 89.1868 67.7201V70.903C89.5126 70.7321 89.849 70.636 90.1695 70.636C90.4258 70.636 90.6608 70.6894 90.8797 70.8015L95.6381 73.2261C95.6755 73.2475 95.7182 73.2688 95.7556 73.2902C96.7489 73.9097 96.8664 75.5919 96.0279 77.1193C96.0012 77.1727 95.9585 77.2475 95.9158 77.3115L88.5727 89.9845C87.9425 91.0792 86.9972 91.7575 86.1 91.7575H86.0947Z"
+        d="M85.3447 91.0075C85.0884 91.0075 84.8534 90.9541 84.6344 90.8419C84.581 90.8152 84.5329 90.7885 84.4849 90.7511L79.7586 88.3426C79.7586 88.3426 79.7158 88.3159 79.6945 88.3052L72.3353 83.1036C71.3634 82.4948 71.2405 80.8125 72.0843 79.2905C72.7038 78.1583 73.6918 77.4267 74.605 77.4267C74.8614 77.4267 75.1017 77.4854 75.3207 77.5976L78.9255 79.4347V66.42C78.9255 64.9781 79.86 63.376 81.0563 62.7671C81.3767 62.6069 81.6972 62.5215 82.0069 62.5215C82.2632 62.5215 82.5089 62.5802 82.7279 62.6924L87.4862 65.1169C88.0897 65.4267 88.4368 66.0996 88.4368 66.9701V70.153C88.7626 69.9821 89.099 69.886 89.4195 69.886C89.6758 69.886 89.9108 69.9394 90.1297 70.0515L94.8881 72.4761C94.9255 72.4975 94.9682 72.5188 95.0056 72.5402C95.9989 73.1597 96.1164 74.8419 95.2779 76.3693C95.2512 76.4227 95.2085 76.4975 95.1658 76.5615L87.8227 89.2345C87.1925 90.3292 86.2472 91.0075 85.35 91.0075H85.3447Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
       />
       <path
-        d="M82.7516 63.8005C82.9278 63.8005 83.0881 63.8379 83.2322 63.9127L87.9906 66.3372C88.3911 66.5402 88.6475 67.0262 88.6475 67.7151V71.9874C89.1228 71.4641 89.6782 71.165 90.1642 71.165C90.3297 71.165 90.4899 71.2024 90.6288 71.2718L95.3871 73.6964C95.3871 73.6964 95.4352 73.7231 95.4619 73.7391C96.2042 74.2037 96.2469 75.5976 95.5527 76.8579C95.526 76.9113 95.4939 76.9647 95.4619 77.0128L88.1027 89.7178C87.558 90.6577 86.7623 91.2238 86.0947 91.2238C85.9292 91.2238 85.769 91.1864 85.6248 91.117C85.5821 91.0956 85.5447 91.0742 85.5073 91.0422L80.7489 88.6176L73.3898 83.416C72.6475 82.9514 72.6047 81.5522 73.299 80.2972C73.8384 79.3145 74.6608 78.7111 75.3551 78.7111C75.5206 78.7111 75.6862 78.7485 75.8304 78.8232L80.2096 81.0555V67.1703C80.2096 65.9367 81.032 64.5108 82.0467 63.9928C82.2977 63.8646 82.5326 63.8059 82.7516 63.8059M82.7516 62.7324C82.3564 62.7324 81.9612 62.8339 81.566 63.0315C80.1828 63.7364 79.1415 65.5148 79.1415 67.165V79.3092L76.3164 77.8673C76.0226 77.7177 75.6969 77.643 75.3551 77.643C74.2336 77.643 73.0854 78.4654 72.3644 79.7845C71.3764 81.5682 71.5634 83.5015 72.797 84.3025L80.1348 89.4881C80.1775 89.5202 80.2202 89.5469 80.2683 89.5682L84.9679 91.9661C85.0266 92.0035 85.0854 92.0355 85.1441 92.0676C85.4379 92.2171 85.7583 92.2919 86.0947 92.2919C87.1788 92.2919 88.3003 91.5122 89.0266 90.2518L96.3698 77.5736C96.4178 77.4988 96.4606 77.4294 96.4979 77.3546C97.4806 75.5549 97.2777 73.6163 96.028 72.8312C95.9799 72.7992 95.9265 72.7725 95.8731 72.7458L91.1148 70.3212C90.821 70.1717 90.5006 70.0969 90.1642 70.0969C90.0146 70.0969 89.8651 70.1129 89.7156 70.1396V67.7151C89.7156 66.6363 89.2616 65.7872 88.4766 65.3866L83.7182 62.9621C83.4192 62.8125 83.0987 62.7324 82.7516 62.7324Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        d="M82.0016 63.0505C82.1778 63.0505 82.3381 63.0879 82.4822 63.1627L87.2406 65.5872C87.6411 65.7902 87.8975 66.2762 87.8975 66.9651V71.2374C88.3728 70.7141 88.9282 70.415 89.4142 70.415C89.5797 70.415 89.7399 70.4524 89.8788 70.5218L94.6371 72.9464C94.6371 72.9464 94.6852 72.9731 94.7119 72.9891C95.4542 73.4537 95.4969 74.8476 94.8027 76.1079C94.776 76.1613 94.7439 76.2147 94.7119 76.2628L87.3527 88.9678C86.808 89.9077 86.0123 90.4738 85.3447 90.4738C85.1792 90.4738 85.019 90.4364 84.8748 90.367C84.8321 90.3456 84.7947 90.3242 84.7573 90.2922L79.9989 87.8676L72.6398 82.666C71.8975 82.2014 71.8547 80.8022 72.549 79.5472C73.0884 78.5645 73.9108 77.9611 74.6051 77.9611C74.7706 77.9611 74.9362 77.9985 75.0804 78.0732L79.4596 80.3055V66.4203C79.4596 65.1867 80.282 63.7608 81.2967 63.2428C81.5477 63.1146 81.7826 63.0559 82.0016 63.0559M82.0016 61.9824C81.6064 61.9824 81.2112 62.0839 80.816 62.2815C79.4328 62.9864 78.3915 64.7648 78.3915 66.415V78.5592L75.5664 77.1173C75.2726 76.9677 74.9469 76.893 74.6051 76.893C73.4836 76.893 72.3354 77.7154 71.6144 79.0345C70.6264 80.8182 70.8134 82.7515 72.047 83.5525L79.3848 88.7381C79.4275 88.7702 79.4702 88.7969 79.5183 88.8182L84.2179 91.2161C84.2766 91.2535 84.3354 91.2855 84.3941 91.3176C84.6879 91.4671 85.0083 91.5419 85.3447 91.5419C86.4288 91.5419 87.5503 90.7622 88.2766 89.5018L95.6198 76.8236C95.6678 76.7488 95.7106 76.6794 95.7479 76.6046C96.7306 74.8049 96.5277 72.8663 95.278 72.0812C95.2299 72.0492 95.1765 72.0225 95.1231 71.9958L90.3648 69.5712C90.071 69.4217 89.7506 69.3469 89.4142 69.3469C89.2646 69.3469 89.1151 69.3629 88.9656 69.3896V66.9651C88.9656 65.8863 88.5116 65.0372 87.7266 64.6366L82.9682 62.2121C82.6692 62.0625 82.3487 61.9824 82.0016 61.9824Z"
+        fill="var(--illustration-stroke-tertiary)"
       />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M95.3923 73.6974C94.65 73.3182 93.5338 73.9591 92.8663 75.1767L88.6526 82.4611L83.8943 80.0365L88.1079 72.7521C88.7808 71.5345 89.8916 70.8936 90.6339 71.2728L95.3923 73.6974Z"
+        d="M94.6423 72.9474C93.9 72.5682 92.7838 73.2091 92.1163 74.4267L87.9026 81.7111L83.1443 79.2865L87.3579 72.0021C88.0308 70.7845 89.1416 70.1436 89.8839 70.5228L94.6423 72.9474Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
         stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
         strokeWidth="0.5"
@@ -232,7 +238,7 @@ export function ArchivedModuleVerticalStackIllustration({ className }: TIllustra
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M80.5887 81.2486C79.841 80.8641 78.7248 81.505 78.0573 82.728C77.363 83.983 77.4057 85.3822 78.1481 85.8468L85.5072 91.0484L80.7489 88.6238L73.3897 83.4222C72.6474 82.9576 72.6047 81.5584 73.2989 80.3034C73.9665 79.0804 75.0773 78.4449 75.8303 78.8241L80.5887 81.2486Z"
+        d="M79.8387 80.4986C79.091 80.1141 77.9748 80.755 77.3073 81.978C76.613 83.233 76.6557 84.6322 77.3981 85.0968L84.7572 90.2984L79.9989 87.8738L72.6397 82.6722C71.8974 82.2076 71.8547 80.8084 72.5489 79.5534C73.2165 78.3304 74.3273 77.6949 75.0803 78.0741L79.8387 80.4986Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
         stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
         strokeWidth="0.5"
@@ -242,7 +248,7 @@ export function ArchivedModuleVerticalStackIllustration({ className }: TIllustra
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M87.9905 66.3379C87.6701 66.1723 87.2535 66.183 86.8049 66.4127C85.7902 66.9307 84.9678 68.3566 84.9678 69.5902V84.3352L80.2095 81.9107V67.1657C80.2095 65.932 81.0319 64.5061 82.0466 63.9881C82.4952 63.7585 82.9117 63.7478 83.2322 63.9133L87.9905 66.3379Z"
+        d="M87.2405 65.5879C86.9201 65.4223 86.5035 65.433 86.0549 65.6627C85.0402 66.1807 84.2178 67.6066 84.2178 68.8402V83.5852L79.4595 81.1607V66.4157C79.4595 65.182 80.2819 63.7561 81.2966 63.2381C81.7452 63.0085 82.1617 62.9978 82.4822 63.1633L87.2405 65.5879Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
         stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
         strokeWidth="0.5"
@@ -252,7 +258,7 @@ export function ArchivedModuleVerticalStackIllustration({ className }: TIllustra
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M87.9905 66.3372C88.391 66.5401 88.6474 67.0261 88.6474 67.715V82.46L92.861 75.1756C93.5339 73.958 94.6447 73.3171 95.387 73.6963C95.4137 73.707 95.4351 73.723 95.4618 73.739C96.2041 74.2037 96.2468 75.5975 95.5526 76.8579C95.5259 76.9113 95.4938 76.9647 95.4618 77.0127L88.1026 89.7177C87.4244 90.8872 86.3456 91.48 85.6247 91.1169C85.5819 91.0955 85.5446 91.0742 85.5072 91.0421L78.148 85.8405C77.4057 85.3759 77.363 83.9767 78.0572 82.7217C78.7248 81.4987 79.8356 80.8632 80.5886 81.2424C80.6153 81.2531 80.6367 81.2691 80.658 81.2851C80.6847 81.3065 80.7168 81.3278 80.7488 81.3492L84.9678 84.3345V69.5895C84.9678 68.3559 85.7902 66.93 86.8049 66.4119C87.2535 66.1823 87.6701 66.1716 87.9905 66.3372Z"
+        d="M87.2405 65.5872C87.641 65.7901 87.8974 66.2761 87.8974 66.965V81.71L92.111 74.4256C92.7839 73.208 93.8947 72.5671 94.637 72.9463C94.6637 72.957 94.6851 72.973 94.7118 72.989C95.4541 73.4537 95.4968 74.8475 94.8026 76.1079C94.7759 76.1613 94.7438 76.2147 94.7118 76.2627L87.3526 88.9677C86.6744 90.1372 85.5956 90.73 84.8747 90.3669C84.8319 90.3455 84.7946 90.3242 84.7572 90.2921L77.398 85.0905C76.6557 84.6259 76.613 83.2267 77.3072 81.9717C77.9748 80.7487 79.0856 80.1132 79.8386 80.4924C79.8653 80.5031 79.8867 80.5191 79.908 80.5351C79.9347 80.5565 79.9668 80.5778 79.9988 80.5992L84.2178 83.5845V68.8395C84.2178 67.6059 85.0402 66.18 86.0549 65.6619C86.5035 65.4323 86.9201 65.4216 87.2405 65.5872Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
         stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
         strokeWidth="0.5"
@@ -262,9 +268,9 @@ export function ArchivedModuleVerticalStackIllustration({ className }: TIllustra
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M21.9345 49.7917C20.7703 49.1989 19.2749 49.247 17.6354 50.0854C13.9345 51.9706 10.9385 57.1508 10.9385 61.6475C10.9385 64.1575 11.8731 65.9305 13.3417 66.6782L10.9598 65.4659C9.49122 64.7183 8.55664 62.9452 8.55664 60.4352C8.55664 55.9332 11.558 50.753 15.2536 48.8731C16.8878 48.04 18.3884 47.9866 19.5526 48.5794L21.9345 49.7917Z"
+        d="M21.1845 49.0417C20.0203 48.4489 18.5249 48.497 16.8854 49.3354C13.1845 51.2206 10.1885 56.4008 10.1885 60.8975C10.1885 63.4075 11.1231 65.1805 12.5917 65.9282L10.2098 64.7159C8.74122 63.9683 7.80664 62.1952 7.80664 59.6852C7.80664 55.1832 10.808 50.003 14.5036 48.1231C16.1378 47.29 17.6384 47.2366 18.8026 47.8294L21.1845 49.0417Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.5"
         strokeLinecap="round"
         strokeLinejoin="round"
@@ -272,24 +278,24 @@ export function ArchivedModuleVerticalStackIllustration({ className }: TIllustra
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M21.9345 49.7923C23.4031 50.54 24.3377 52.313 24.3377 54.823C24.3377 59.325 21.3363 64.5052 17.6408 66.3851C16.0066 67.2182 14.5059 67.2716 13.3417 66.6788C11.8731 65.9311 10.9385 64.1581 10.9385 61.6481C10.9385 57.1461 13.9398 51.9659 17.6354 50.086C19.2696 49.2529 20.7703 49.1995 21.9345 49.7923Z"
+        d="M21.1845 49.0423C22.6531 49.79 23.5877 51.563 23.5877 54.073C23.5877 58.575 20.5863 63.7552 16.8908 65.6351C15.2566 66.4682 13.7559 66.5216 12.5917 65.9288C11.1231 65.1811 10.1885 63.4081 10.1885 60.8981C10.1885 56.3961 13.1898 51.2159 16.8854 49.336C18.5196 48.5029 20.0203 48.4495 21.1845 49.0423Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.5"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
       <path
-        d="M19.9479 58.7846L19.5741 58.6938V58.0369C19.5741 57.818 19.4245 57.7112 19.243 57.8019C19.0614 57.8927 18.9119 58.1491 18.9119 58.368V59.2492C18.9119 59.3881 18.9706 59.4842 19.0667 59.5109L19.5954 59.6444C19.6488 59.6604 19.7076 59.6444 19.7717 59.6177C19.8838 59.5643 19.9906 59.4415 20.0494 59.2866C20.1455 59.0516 20.0974 58.8273 19.9426 58.7899L19.9479 58.7846Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M19.1979 58.0346L18.8241 57.9438V57.2869C18.8241 57.068 18.6745 56.9612 18.493 57.0519C18.3114 57.1427 18.1619 57.3991 18.1619 57.618V58.4992C18.1619 58.6381 18.2206 58.7342 18.3167 58.7609L18.8454 58.8944C18.8988 58.9104 18.9576 58.8944 19.0217 58.8677C19.1338 58.8143 19.2406 58.6915 19.2994 58.5366C19.3955 58.3016 19.3474 58.0773 19.1926 58.0399L19.1979 58.0346Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
-        d="M16.781 62.262L15.6274 62.8495C15.4458 62.9403 15.2963 62.8388 15.2963 62.6145V59.0097L16.6101 58.3368C16.7916 58.246 16.9412 57.9897 16.9412 57.7707C16.9412 57.5517 16.7916 57.4449 16.6101 57.5357L15.2963 58.2086V57.007C15.2963 56.7881 15.4458 56.5317 15.6274 56.4409L16.2843 56.1045V56.505C16.2843 56.724 16.4338 56.8308 16.6154 56.74C16.797 56.6492 16.9465 56.3929 16.9465 56.1739V55.7734L18.9225 54.7694V55.1699C18.9225 55.3889 19.072 55.4957 19.2536 55.4049C19.4352 55.3141 19.5847 55.0578 19.5847 54.8388V54.4383L20.2416 54.1018C20.4232 54.011 20.5727 54.1125 20.5727 54.3368V54.9349C20.5727 55.1539 20.7222 55.2607 20.9038 55.1699C21.0854 55.0791 21.2349 54.8228 21.2349 54.6038V54.0057C21.2349 53.3435 20.7916 53.0284 20.2469 53.3061L19.59 53.6425V53.242C19.59 53.023 19.4405 52.9162 19.2589 53.007C19.0774 53.0978 18.9278 53.3541 18.9278 53.5731V53.9736L16.9519 54.9776V54.5771C16.9519 54.3582 16.8023 54.2513 16.6207 54.3421C16.4392 54.4329 16.2896 54.6893 16.2896 54.9082V55.3088L15.6328 55.6452C15.088 55.9229 14.6448 56.6866 14.6448 57.3488V62.951C14.6448 63.6132 15.088 63.9283 15.6328 63.6505L16.7863 63.0631C16.9679 62.9723 17.1174 62.716 17.1174 62.497C17.1174 62.2781 16.9679 62.1712 16.7863 62.262H16.781Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M16.031 61.512L14.8774 62.0995C14.6958 62.1903 14.5463 62.0888 14.5463 61.8645V58.2597L15.8601 57.5868C16.0416 57.496 16.1912 57.2397 16.1912 57.0207C16.1912 56.8017 16.0416 56.6949 15.8601 56.7857L14.5463 57.4586V56.257C14.5463 56.0381 14.6958 55.7817 14.8774 55.6909L15.5343 55.3545V55.755C15.5343 55.974 15.6838 56.0808 15.8654 55.99C16.047 55.8992 16.1965 55.6429 16.1965 55.4239V55.0234L18.1725 54.0194V54.4199C18.1725 54.6389 18.322 54.7457 18.5036 54.6549C18.6852 54.5641 18.8347 54.3078 18.8347 54.0888V53.6883L19.4916 53.3518C19.6732 53.261 19.8227 53.3625 19.8227 53.5868V54.1849C19.8227 54.4039 19.9722 54.5107 20.1538 54.4199C20.3354 54.3291 20.4849 54.0728 20.4849 53.8538V53.2557C20.4849 52.5935 20.0416 52.2784 19.4969 52.5561L18.84 52.8925V52.492C18.84 52.273 18.6905 52.1662 18.5089 52.257C18.3274 52.3478 18.1778 52.6041 18.1778 52.8231V53.2236L16.2019 54.2276V53.8271C16.2019 53.6082 16.0523 53.5013 15.8707 53.5921C15.6892 53.6829 15.5396 53.9393 15.5396 54.1582V54.5588L14.8828 54.8952C14.338 55.1729 13.8948 55.9366 13.8948 56.5988V62.201C13.8948 62.8632 14.338 63.1783 14.8828 62.9005L16.0363 62.3131C16.2179 62.2223 16.3674 61.966 16.3674 61.747C16.3674 61.5281 16.2179 61.4212 16.0363 61.512H16.031Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
-        d="M19.2483 56.2C17.9772 56.8462 16.9465 58.6299 16.9465 60.1733C16.9465 61.7167 17.9772 62.4484 19.2483 61.8022C20.5193 61.156 21.55 59.3723 21.55 57.8289C21.55 56.2855 20.5193 55.5538 19.2483 56.2ZM19.2483 61.0064C18.3404 61.4711 17.6034 60.9477 17.6034 59.8422C17.6034 58.7367 18.3404 57.4657 19.2483 57.0011C20.1561 56.5365 20.8931 57.0598 20.8931 58.1653C20.8931 59.2708 20.1561 60.5418 19.2483 61.0064Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M18.4983 55.45C17.2272 56.0962 16.1965 57.8799 16.1965 59.4233C16.1965 60.9667 17.2272 61.6984 18.4983 61.0522C19.7693 60.406 20.8 58.6223 20.8 57.0789C20.8 55.5355 19.7693 54.8038 18.4983 55.45ZM18.4983 60.2564C17.5904 60.7211 16.8534 60.1977 16.8534 59.0922C16.8534 57.9867 17.5904 56.7157 18.4983 56.2511C19.4061 55.7865 20.1431 56.3098 20.1431 57.4153C20.1431 58.5208 19.4061 59.7918 18.4983 60.2564Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
     </svg>
   );
diff --git a/packages/propel/src/empty-state/assets/vertical-stack/archived-work-item.tsx b/packages/propel/src/empty-state/assets/vertical-stack/archived-work-item.tsx
index adf06c9be..78967aa08 100644
--- a/packages/propel/src/empty-state/assets/vertical-stack/archived-work-item.tsx
+++ b/packages/propel/src/empty-state/assets/vertical-stack/archived-work-item.tsx
@@ -1,29 +1,35 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper";
 import type { TIllustrationAssetProps } from "../helper";
 
 export function ArchivedWorkItemVerticalStackIllustration({ className }: TIllustrationAssetProps) {
   return (
     <svg
-      width="162"
+      width="161"
       height="176"
-      viewBox="0 0 162 176"
+      viewBox="0 0 161 176"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       className={className}
     >
       <g opacity="0.2">
         <path
-          d="M1 142.417C1 144.386 2.47405 146.349 5.41695 147.855L43.31 167.163C49.2011 170.163 58.7486 170.163 64.6396 167.163L144.265 126.593C147.207 125.093 148.681 123.129 148.681 121.16V127.447C148.681 129.416 147.207 131.38 144.265 132.88L64.6396 173.45C58.7486 176.45 49.2011 176.45 43.31 173.45L5.41695 154.141C2.46885 152.641 1 150.672 1 148.704V142.417Z"
+          d="M0.25 141.667C0.25 143.636 1.72405 145.599 4.66695 147.105L42.56 166.413C48.4511 169.413 57.9986 169.413 63.8896 166.413L143.515 125.843C146.457 124.343 147.931 122.379 147.931 120.41V126.697C147.931 128.666 146.457 130.63 143.515 132.13L63.8896 172.7C57.9986 175.7 48.4511 175.7 42.56 172.7L4.66695 153.391C1.71885 151.891 0.25 149.922 0.25 147.954V141.667Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.5"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
         <path
-          d="M1 142.415C1 140.446 2.47405 138.483 5.41695 136.983L85.0419 96.4123C90.9329 93.4121 100.48 93.4121 106.371 96.4123L144.265 115.721C147.213 117.221 148.681 119.19 148.681 121.159C148.681 123.128 147.207 125.091 144.265 126.591L64.6396 167.162C58.7486 170.162 49.2011 170.162 43.31 167.162L5.41695 147.853C2.46885 146.353 1 144.384 1 142.415Z"
+          d="M0.25 141.665C0.25 139.696 1.72405 137.733 4.66695 136.233L84.2919 95.6623C90.1829 92.6621 99.7304 92.6621 105.621 95.6623L143.515 114.971C146.463 116.471 147.931 118.44 147.931 120.409C147.931 122.378 146.457 124.341 143.515 125.841L63.8896 166.412C57.9986 169.412 48.4511 169.412 42.56 166.412L4.66695 147.103C1.71885 145.603 0.25 143.634 0.25 141.665Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.5"
           strokeLinecap="round"
           strokeLinejoin="round"
@@ -31,50 +37,50 @@ export function ArchivedWorkItemVerticalStackIllustration({ className }: TIllust
       </g>
       <g opacity="0.6">
         <path
-          d="M1 122.555C1 124.524 2.47405 126.488 5.41695 127.993L43.31 147.302C49.2011 150.302 58.7486 150.302 64.6396 147.302L144.265 106.731C147.207 105.231 148.681 103.268 148.681 101.299V107.586C148.681 109.555 147.207 111.518 144.265 113.018L64.6396 153.589C58.7486 156.589 49.2011 156.589 43.31 153.589L5.41695 134.28C2.46885 132.78 1 130.811 1 128.842V122.555Z"
+          d="M0.25 121.805C0.25 123.774 1.72405 125.738 4.66695 127.243L42.56 146.552C48.4511 149.552 57.9986 149.552 63.8896 146.552L143.515 105.981C146.457 104.481 147.931 102.518 147.931 100.549V106.836C147.931 108.805 146.457 110.768 143.515 112.268L63.8896 152.839C57.9986 155.839 48.4511 155.839 42.56 152.839L4.66695 133.53C1.71885 132.03 0.25 130.061 0.25 128.092V121.805Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.5"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
         <path
-          d="M1 122.556C1 120.587 2.47405 118.623 5.41695 117.123L85.0419 76.5529C90.9329 73.5527 100.48 73.5527 106.371 76.5529L144.265 95.8614C147.213 97.3615 148.681 99.3304 148.681 101.299C148.681 103.268 147.207 105.232 144.265 106.732L64.6396 147.302C58.7486 150.302 49.2011 150.302 43.31 147.302L5.41695 127.989C2.46885 126.488 1 124.52 1 122.551V122.556Z"
+          d="M0.25 121.806C0.25 119.837 1.72405 117.873 4.66695 116.373L84.2919 75.8029C90.1829 72.8027 99.7304 72.8027 105.621 75.8029L143.515 95.1114C146.463 96.6115 147.931 98.5804 147.931 100.549C147.931 102.518 146.457 104.482 143.515 105.982L63.8896 146.552C57.9986 149.552 48.4511 149.552 42.56 146.552L4.66695 127.239C1.71885 125.738 0.25 123.77 0.25 121.801V121.806Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.5"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
       </g>
       <path
-        d="M1 102.69C1 104.659 2.47405 106.623 5.41695 108.128L43.31 127.437C49.2011 130.437 58.7486 130.437 64.6396 127.437L144.265 86.8662C147.207 85.3661 148.681 83.4025 148.681 81.4336V87.7205C148.681 89.6893 147.207 91.653 144.265 93.1531L64.6396 133.723C58.7486 136.724 49.2011 136.724 43.31 133.723L5.41695 114.415C2.46885 112.915 1 110.946 1 108.977V102.69Z"
+        d="M0.25 101.94C0.25 103.909 1.72405 105.873 4.66695 107.378L42.56 126.687C48.4511 129.687 57.9986 129.687 63.8896 126.687L143.515 86.1162C146.457 84.6161 147.931 82.6525 147.931 80.6836V86.9705C147.931 88.9393 146.457 90.903 143.515 92.4031L63.8896 132.973C57.9986 135.974 48.4511 135.974 42.56 132.973L4.66695 113.665C1.71885 112.165 0.25 110.196 0.25 108.227V101.94Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.5"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
       <path
-        d="M1 102.691C1 100.722 2.47405 98.7581 5.41695 97.258L85.0419 56.6876C90.9329 53.6875 100.48 53.6875 106.371 56.6876L144.265 75.9962C147.213 77.4963 148.681 79.4652 148.681 81.434C148.681 83.4029 147.207 85.3666 144.265 86.8667L64.6396 127.437C58.7486 130.437 49.2011 130.437 43.31 127.437L5.41695 108.128C2.46885 106.628 1 104.66 1 102.691Z"
+        d="M0.25 101.941C0.25 99.9718 1.72405 98.0081 4.66695 96.508L84.2919 55.9376C90.1829 52.9375 99.7304 52.9375 105.621 55.9376L143.515 75.2462C146.463 76.7463 147.931 78.7152 147.931 80.684C147.931 82.6529 146.457 84.6166 143.515 86.1167L63.8896 126.687C57.9986 129.687 48.4511 129.687 42.56 126.687L4.66695 107.378C1.71885 105.878 0.25 103.91 0.25 101.941Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.5"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
       <path
-        d="M63.5145 99.7001C62.7644 99.7001 62.0717 99.5387 61.4414 99.2157L56.8005 96.851C55.1181 95.9968 54.0868 94.0591 53.9618 91.5329L52.67 65.4792C52.6596 65.276 52.769 65.0833 52.9513 64.9895L55.3837 63.7499L50.7584 61.3956C49.5552 60.7809 48.8677 59.385 48.8677 57.5672V55.3848C48.8677 52.197 51.0084 48.5145 53.6388 47.1759L94.9019 26.1485C95.5738 25.8047 96.2353 25.6328 96.8708 25.6328C97.3708 25.6328 97.8344 25.7422 98.2563 25.9557L102.897 28.3205C104.1 28.9351 104.788 30.331 104.788 32.1541V34.3365C104.788 37.5242 102.647 41.2067 100.017 42.5454L97.3344 43.91L100.704 45.6289C100.887 45.7227 100.996 45.9154 100.986 46.1185L99.6939 73.4901C99.4595 78.3862 96.1885 83.7928 92.2403 85.7982L66.5094 98.9084C65.4781 99.4345 64.4676 99.7001 63.504 99.7001H63.5145Z"
+        d="M62.7645 98.9501C62.0144 98.9501 61.3217 98.7887 60.6914 98.4657L56.0505 96.101C54.3681 95.2468 53.3368 93.3091 53.2118 90.7829L51.92 64.7292C51.9096 64.526 52.019 64.3333 52.2013 64.2395L54.6337 62.9999L50.0084 60.6456C48.8052 60.0309 48.1177 58.635 48.1177 56.8172V54.6348C48.1177 51.447 50.2584 47.7645 52.8888 46.4259L94.1519 25.3985C94.8238 25.0547 95.4853 24.8828 96.1208 24.8828C96.6208 24.8828 97.0844 24.9922 97.5063 25.2057L102.147 27.5705C103.35 28.1851 104.038 29.581 104.038 31.4041V33.5865C104.038 36.7742 101.897 40.4567 99.2668 41.7954L96.5844 43.16L99.9544 44.8789C100.137 44.9727 100.246 45.1654 100.236 45.3685L98.9439 72.7401C98.7095 77.6362 95.4385 83.0428 91.4903 85.0482L65.7594 98.1584C64.7281 98.6845 63.7176 98.9501 62.754 98.9501H62.7645Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
       />
       <path
-        d="M96.8708 26.1531C97.2875 26.1531 97.6782 26.2468 98.0167 26.4187L102.658 28.7834C103.642 29.2835 104.262 30.4711 104.262 32.1482V34.3307C104.262 37.3413 102.251 40.8103 99.7773 42.076L96.1833 43.9094L100.465 46.0919L99.1731 73.4634C98.9491 78.1929 95.8083 83.4016 92.0059 85.334L66.2751 98.4442C65.2959 98.9443 64.3635 99.1787 63.5093 99.1787C62.8374 99.1787 62.2227 99.0328 61.6706 98.7515L57.0297 96.3868C55.5661 95.642 54.5972 93.9387 54.4774 91.5115L53.1857 65.4577L56.9099 63.5618C56.8682 63.5618 56.8213 63.5618 56.7797 63.5618C56.363 63.5618 55.9775 63.4732 55.6338 63.2961L50.9928 60.9314C50.0084 60.4313 49.3886 59.2438 49.3886 57.5666V55.3841C49.3886 52.3735 51.3939 48.9045 53.8732 47.6388L95.1363 26.6114C95.751 26.2989 96.3343 26.1531 96.8656 26.1531M96.8708 25.1113C96.1572 25.1113 95.4124 25.304 94.6676 25.6843L53.4045 46.7117C50.5709 48.1545 48.3521 51.962 48.3521 55.3841V57.5666C48.3521 59.5927 49.1438 61.1553 50.5293 61.8637L54.2431 63.7545L52.7221 64.5306C52.3575 64.7181 52.1335 65.0983 52.1544 65.5098L53.4461 91.5636C53.5763 94.2773 54.717 96.3764 56.5661 97.3192L61.2071 99.6839C61.9102 100.043 62.6863 100.226 63.5145 100.226C64.5562 100.226 65.65 99.9391 66.7543 99.3766L92.4851 86.2664C96.6521 84.1516 99.9752 78.6669 100.22 73.5155L101.512 46.1439C101.533 45.7325 101.309 45.3522 100.944 45.1647L98.4855 43.9094L100.256 43.0083C103.09 41.5655 105.309 37.7528 105.309 34.3359V32.1535C105.309 30.1273 104.517 28.5647 103.132 27.8563L98.4907 25.4916C97.9959 25.2415 97.449 25.1113 96.8708 25.1113Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        d="M96.1208 25.4031C96.5375 25.4031 96.9282 25.4968 97.2667 25.6687L101.908 28.0334C102.892 28.5335 103.512 29.7211 103.512 31.3982V33.5807C103.512 36.5913 101.501 40.0603 99.0273 41.326L95.4333 43.1594L99.7148 45.3419L98.4231 72.7134C98.1991 77.4429 95.0583 82.6516 91.2559 84.584L65.5251 97.6942C64.5459 98.1943 63.6135 98.4287 62.7593 98.4287C62.0874 98.4287 61.4727 98.2828 60.9206 98.0015L56.2797 95.6368C54.8161 94.892 53.8472 93.1887 53.7274 90.7615L52.4357 64.7077L56.1599 62.8118C56.1182 62.8118 56.0713 62.8118 56.0297 62.8118C55.613 62.8118 55.2275 62.7232 54.8838 62.5461L50.2428 60.1814C49.2584 59.6813 48.6386 58.4938 48.6386 56.8166V54.6341C48.6386 51.6235 50.6439 48.1545 53.1232 46.8888L94.3863 25.8614C95.001 25.5489 95.5843 25.4031 96.1156 25.4031M96.1208 24.3613C95.4072 24.3613 94.6624 24.554 93.9176 24.9343L52.6545 45.9617C49.8209 47.4045 47.6021 51.212 47.6021 54.6341V56.8166C47.6021 58.8427 48.3938 60.4053 49.7793 61.1137L53.4931 63.0045L51.9721 63.7806C51.6075 63.9681 51.3835 64.3483 51.4044 64.7598L52.6961 90.8136C52.8263 93.5273 53.967 95.6264 55.8161 96.5692L60.4571 98.9339C61.1602 99.2933 61.9363 99.4756 62.7645 99.4756C63.8062 99.4756 64.9 99.1891 66.0043 98.6266L91.7351 85.5164C95.9021 83.4016 99.2252 77.9169 99.47 72.7655L100.762 45.3939C100.783 44.9825 100.559 44.6022 100.194 44.4147L97.7355 43.1594L99.5065 42.2583C102.34 40.8155 104.559 37.0028 104.559 33.5859V31.4035C104.559 29.3773 103.767 27.8147 102.382 27.1063L97.7407 24.7416C97.2459 24.4915 96.699 24.3613 96.1208 24.3613Z"
+        fill="var(--illustration-stroke-tertiary)"
       />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M100.47 46.0913L57.8318 67.8219L53.1909 65.4571L95.8291 43.7266L100.47 46.0913Z"
+        d="M99.72 45.3413L57.0818 67.0719L52.4409 64.7071L95.0791 42.9766L99.72 45.3413Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
         stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
         strokeWidth="0.5"
@@ -84,7 +90,7 @@ export function ArchivedWorkItemVerticalStackIllustration({ className }: TIllust
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M57.8318 67.8218L59.1236 93.8755C59.2434 96.3028 60.2122 98.006 61.6758 98.7509L57.0349 96.3861C55.5713 95.6413 54.6025 93.9381 54.4827 91.5108L53.1909 65.457L57.8318 67.8218Z"
+        d="M57.0818 67.0718L58.3736 93.1255C58.4934 95.5528 59.4622 97.256 60.9258 98.0009L56.2849 95.6361C54.8213 94.8913 53.8525 93.1881 53.7327 90.7608L52.4409 64.707L57.0818 67.0718Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
         stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
         strokeWidth="0.5"
@@ -94,7 +100,7 @@ export function ArchivedWorkItemVerticalStackIllustration({ className }: TIllust
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M100.47 46.0898L99.1785 73.4614C98.9545 78.1909 95.8137 83.3996 92.0113 85.332L66.2805 98.4422C64.5356 99.3329 62.9261 99.3902 61.676 98.7495C60.2124 98.0047 59.2436 96.3014 59.1238 93.8742L57.832 67.8204L100.47 46.0898Z"
+        d="M99.7202 45.3398L98.4285 72.7114C98.2045 77.4409 95.0637 82.6496 91.2613 84.582L65.5305 97.6922C63.7856 98.5829 62.1761 98.6402 60.926 97.9995C59.4624 97.2547 58.4936 95.5514 58.3738 93.1242L57.082 67.0704L99.7202 45.3398Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
         stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
         strokeWidth="0.5"
@@ -102,7 +108,7 @@ export function ArchivedWorkItemVerticalStackIllustration({ className }: TIllust
         strokeLinejoin="round"
       />
       <path
-        d="M102.663 28.7833C101.882 28.3875 100.882 28.4187 99.7827 28.976L58.5196 50.0035C56.0403 51.264 54.035 54.7329 54.035 57.7488V59.9312C54.035 61.6136 54.66 62.796 55.6392 63.296L50.9983 60.9312C50.0139 60.4312 49.394 59.2436 49.394 57.5664V55.384C49.394 52.3734 51.3994 48.9044 53.8787 47.6387L95.1418 26.6113C96.2356 26.054 97.2409 26.0175 98.0222 26.4186L102.663 28.7833Z"
+        d="M101.913 28.0333C101.132 27.6375 100.132 27.6687 99.0327 28.226L57.7696 49.2535C55.2903 50.514 53.285 53.9829 53.285 56.9988V59.1812C53.285 60.8636 53.91 62.046 54.8892 62.546L50.2483 60.1812C49.2639 59.6812 48.644 58.4936 48.644 56.8164V54.634C48.644 51.6234 50.6494 48.1544 53.1287 46.8887L94.3918 25.8613C95.4856 25.304 96.4909 25.2675 97.2722 25.6686L101.913 28.0333Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
         stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
         strokeWidth="0.5"
@@ -110,7 +116,7 @@ export function ArchivedWorkItemVerticalStackIllustration({ className }: TIllust
         strokeLinejoin="round"
       />
       <path
-        d="M102.663 28.7819C103.647 29.2819 104.267 30.4695 104.267 32.1467V34.3291C104.267 37.3397 102.257 40.8087 99.7824 42.0744L58.5193 63.1018C57.4255 63.6591 56.4202 63.6956 55.6389 63.2945C54.6545 62.7945 54.0347 61.6069 54.0347 59.9297V57.7473C54.0347 54.7367 56.04 51.2677 58.5193 50.002L99.7824 28.9746C100.876 28.4173 101.882 28.3808 102.663 28.7819Z"
+        d="M101.913 28.0319C102.897 28.5319 103.517 29.7195 103.517 31.3967V33.5791C103.517 36.5897 101.507 40.0587 99.0324 41.3244L57.7693 62.3518C56.6755 62.9091 55.6702 62.9456 54.8889 62.5445C53.9045 62.0445 53.2847 60.8569 53.2847 59.1797V56.9973C53.2847 53.9867 55.29 50.5177 57.7693 49.252L99.0324 28.2246C100.126 27.6673 101.132 27.6308 101.913 28.0319Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
         stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
         strokeWidth="0.5"
@@ -120,17 +126,17 @@ export function ArchivedWorkItemVerticalStackIllustration({ className }: TIllust
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M83.995 87.7245C83.745 87.7245 83.5158 87.6724 83.3023 87.563C83.2502 87.537 83.2033 87.5109 83.1564 87.4744L78.5468 85.1253C78.5468 85.1253 78.5051 85.0993 78.4843 85.0889L71.3067 80.0156C70.3587 79.4218 70.2389 77.7811 71.0619 76.2966C71.6661 75.1924 72.6297 74.4788 73.5204 74.4788C73.7704 74.4788 74.0048 74.5361 74.2184 74.6455L77.7342 76.4373V63.7437C77.7342 62.3374 78.6457 60.7748 79.8125 60.181C80.125 60.0247 80.4375 59.9414 80.7396 59.9414C80.9896 59.9414 81.2292 59.9987 81.4428 60.1081L86.0837 62.4728C86.6723 62.7749 87.0109 63.4312 87.0109 64.2802V67.3846C87.3286 67.2179 87.6567 67.1242 87.9693 67.1242C88.2141 67.1242 88.4485 67.1763 88.662 67.2856L93.3029 69.6504C93.3394 69.6712 93.3759 69.692 93.4123 69.7129C94.3863 70.3223 94.5009 71.963 93.6832 73.4475C93.6571 73.4996 93.6155 73.5725 93.5738 73.635L86.4119 86.0004C85.7972 87.0682 84.8753 87.7297 84.0003 87.7297L83.995 87.7245Z"
+        d="M83.245 86.9745C82.995 86.9745 82.7658 86.9224 82.5523 86.813C82.5002 86.787 82.4533 86.7609 82.4064 86.7244L77.7968 84.3753C77.7968 84.3753 77.7551 84.3493 77.7343 84.3389L70.5567 79.2656C69.6087 78.6718 69.4889 77.0311 70.3119 75.5466C70.9161 74.4424 71.8797 73.7288 72.7704 73.7288C73.0204 73.7288 73.2548 73.7861 73.4684 73.8955L76.9842 75.6873V62.9937C76.9842 61.5874 77.8957 60.0248 79.0625 59.431C79.375 59.2747 79.6875 59.1914 79.9896 59.1914C80.2396 59.1914 80.4792 59.2487 80.6928 59.3581L85.3337 61.7228C85.9223 62.0249 86.2609 62.6812 86.2609 63.5302V66.6346C86.5786 66.4679 86.9067 66.3742 87.2193 66.3742C87.4641 66.3742 87.6985 66.4263 87.912 66.5356L92.5529 68.9004C92.5894 68.9212 92.6259 68.942 92.6623 68.9629C93.6363 69.5723 93.7509 71.213 92.9332 72.6975C92.9071 72.7496 92.8655 72.8225 92.8238 72.885L85.6619 85.2504C85.0472 86.3182 84.1253 86.9797 83.2503 86.9797L83.245 86.9745Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
       />
       <path
-        d="M80.7346 60.4578C80.9064 60.4578 81.0627 60.4942 81.2033 60.5671L85.8443 62.9319C86.2349 63.1298 86.4849 63.6038 86.4849 64.2757V68.4426C86.9485 67.9322 87.4902 67.6405 87.9642 67.6405C88.1257 67.6405 88.2819 67.677 88.4173 67.7447L93.0583 70.1094C93.0583 70.1094 93.1052 70.1355 93.1312 70.1511C93.8552 70.6042 93.8969 71.9637 93.2197 73.193C93.1937 73.245 93.1624 73.2971 93.1312 73.344L85.9536 85.7354C85.4224 86.6522 84.6463 87.2043 83.9952 87.2043C83.8337 87.2043 83.6775 87.1678 83.5368 87.1001C83.4951 87.0793 83.4587 87.0584 83.4222 87.0272L78.7813 84.6624L71.6037 79.5892C70.8797 79.1361 70.8381 77.7714 71.5152 76.5473C72.0413 75.5889 72.8434 75.0004 73.5205 75.0004C73.682 75.0004 73.8435 75.0368 73.9841 75.1097L78.2552 77.287V63.7444C78.2552 62.5412 79.0574 61.1505 80.047 60.6453C80.2918 60.5203 80.521 60.463 80.7346 60.463M80.7346 59.416C80.3491 59.416 79.9637 59.515 79.5782 59.7077C78.2292 60.3952 77.2135 62.1297 77.2135 63.7392V75.5837L74.4581 74.1774C74.1716 74.0316 73.8539 73.9586 73.5205 73.9586C72.4267 73.9586 71.3069 74.7608 70.6037 76.0473C69.6401 77.787 69.8224 79.6725 71.0256 80.4538L78.1823 85.5115C78.224 85.5427 78.2656 85.5688 78.3125 85.5896L82.8961 87.9283C82.9534 87.9647 83.0107 87.996 83.068 88.0273C83.3545 88.1731 83.667 88.246 83.9952 88.246C85.0525 88.246 86.1464 87.4855 86.8547 86.2563L94.0167 73.8909C94.0635 73.818 94.1052 73.7503 94.1417 73.6774C95.1001 71.922 94.9021 70.0313 93.6833 69.2656C93.6364 69.2344 93.5843 69.2083 93.5323 69.1823L88.8913 66.8175C88.6049 66.6717 88.2923 66.5988 87.9642 66.5988C87.8183 66.5988 87.6725 66.6144 87.5267 66.6404V64.2757C87.5267 63.2236 87.0839 62.3954 86.3182 62.0047L81.6773 59.64C81.3856 59.4941 81.0731 59.416 80.7346 59.416Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        d="M79.9846 59.7078C80.1564 59.7078 80.3127 59.7442 80.4533 59.8171L85.0943 62.1819C85.4849 62.3798 85.7349 62.8538 85.7349 63.5257V67.6926C86.1985 67.1822 86.7402 66.8905 87.2142 66.8905C87.3757 66.8905 87.5319 66.927 87.6673 66.9947L92.3083 69.3594C92.3083 69.3594 92.3552 69.3855 92.3812 69.4011C93.1052 69.8542 93.1469 71.2137 92.4697 72.443C92.4437 72.495 92.4124 72.5471 92.3812 72.594L85.2036 84.9854C84.6724 85.9022 83.8963 86.4543 83.2452 86.4543C83.0837 86.4543 82.9275 86.4178 82.7868 86.3501C82.7451 86.3293 82.7087 86.3084 82.6722 86.2772L78.0313 83.9124L70.8537 78.8392C70.1297 78.3861 70.0881 77.0214 70.7652 75.7973C71.2913 74.8389 72.0934 74.2504 72.7705 74.2504C72.932 74.2504 73.0935 74.2868 73.2341 74.3597L77.5052 76.537V62.9944C77.5052 61.7912 78.3074 60.4005 79.297 59.8953C79.5418 59.7703 79.771 59.713 79.9846 59.713M79.9846 58.666C79.5991 58.666 79.2137 58.765 78.8282 58.9577C77.4792 59.6452 76.4635 61.3797 76.4635 62.9892V74.8337L73.7081 73.4274C73.4216 73.2816 73.1039 73.2086 72.7705 73.2086C71.6767 73.2086 70.5569 74.0108 69.8537 75.2973C68.8901 77.037 69.0724 78.9225 70.2756 79.7038L77.4323 84.7615C77.474 84.7927 77.5156 84.8188 77.5625 84.8396L82.1461 87.1783C82.2034 87.2147 82.2607 87.246 82.318 87.2773C82.6045 87.4231 82.917 87.496 83.2452 87.496C84.3025 87.496 85.3964 86.7355 86.1047 85.5063L93.2667 73.1409C93.3135 73.068 93.3552 73.0003 93.3917 72.9274C94.3501 71.172 94.1521 69.2813 92.9333 68.5156C92.8864 68.4844 92.8343 68.4583 92.7823 68.4323L88.1413 66.0675C87.8549 65.9217 87.5423 65.8488 87.2142 65.8488C87.0683 65.8488 86.9225 65.8644 86.7767 65.8904V63.5257C86.7767 62.4736 86.3339 61.6454 85.5682 61.2547L80.9273 58.89C80.6356 58.7441 80.3231 58.666 79.9846 58.666Z"
+        fill="var(--illustration-stroke-tertiary)"
       />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M93.0634 70.1095C92.3394 69.7397 91.2508 70.3647 90.5997 71.5523L86.4901 78.6569L81.8491 76.2922L85.9588 69.1875C86.6151 68 87.6985 67.3749 88.4225 67.7447L93.0634 70.1095Z"
+        d="M92.3134 69.3595C91.5894 68.9897 90.5008 69.6147 89.8497 70.8023L85.7401 77.9069L81.0991 75.5422L85.2088 68.4375C85.8651 67.25 86.9485 66.6249 87.6725 66.9947L92.3134 69.3595Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
         stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
         strokeWidth="0.5"
@@ -140,7 +146,7 @@ export function ArchivedWorkItemVerticalStackIllustration({ className }: TIllust
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M78.6248 77.4693C77.8956 77.0943 76.807 77.7193 76.1559 78.9121C75.4788 80.1362 75.5205 81.5008 76.2445 81.954L83.422 87.0272L78.7811 84.6625L71.6035 79.5893C70.8795 79.1361 70.8379 77.7714 71.515 76.5474C72.1661 75.3546 73.2495 74.7348 73.9839 75.1046L78.6248 77.4693Z"
+        d="M77.8748 76.7193C77.1456 76.3443 76.057 76.9693 75.4059 78.1621C74.7288 79.3862 74.7705 80.7508 75.4945 81.204L82.672 86.2772L78.0311 83.9125L70.8535 78.8393C70.1295 78.3861 70.0879 77.0214 70.765 75.7974C71.4161 74.6046 72.4995 73.9848 73.2339 74.3546L77.8748 76.7193Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
         stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
         strokeWidth="0.5"
@@ -150,7 +156,7 @@ export function ArchivedWorkItemVerticalStackIllustration({ className }: TIllust
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M85.8439 62.9315C85.5314 62.7701 85.1251 62.7805 84.6876 63.0045C83.6979 63.5097 82.8958 64.9004 82.8958 66.1036V80.4848L78.2549 78.12V63.7389C78.2549 62.5357 79.057 61.145 80.0467 60.6397C80.4842 60.4158 80.8905 60.4053 81.203 60.5668L85.8439 62.9315Z"
+        d="M85.0939 62.1815C84.7814 62.0201 84.3751 62.0305 83.9376 62.2545C82.9479 62.7597 82.1458 64.1504 82.1458 65.3536V79.7348L77.5049 77.37V62.9889C77.5049 61.7857 78.307 60.395 79.2967 59.8897C79.7342 59.6658 80.1405 59.6553 80.453 59.8168L85.0939 62.1815Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
         stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
         strokeWidth="0.5"
@@ -160,7 +166,7 @@ export function ArchivedWorkItemVerticalStackIllustration({ className }: TIllust
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M85.8442 62.932C86.2349 63.13 86.4849 63.604 86.4849 64.2759V78.657L90.5946 71.5524C91.2508 70.3648 92.3343 69.7398 93.0583 70.1096C93.0843 70.12 93.1051 70.1356 93.1312 70.1513C93.8552 70.6044 93.8969 71.9639 93.2197 73.1931C93.1937 73.2452 93.1624 73.2973 93.1312 73.3442L85.9536 85.7356C85.2921 86.8763 84.24 87.4545 83.5368 87.1003C83.4951 87.0794 83.4587 87.0586 83.4222 87.0274L76.2447 81.9541C75.5207 81.501 75.479 80.1363 76.1561 78.9123C76.8072 77.7195 77.8906 77.0996 78.625 77.4694C78.6511 77.4799 78.6719 77.4955 78.6927 77.5111C78.7188 77.532 78.75 77.5528 78.7813 77.5736L82.8961 80.4853V66.1041C82.8961 64.9009 83.6983 63.5102 84.6879 63.005C85.1254 62.781 85.5317 62.7706 85.8442 62.932Z"
+        d="M85.0942 62.182C85.4849 62.38 85.7349 62.854 85.7349 63.5259V77.907L89.8446 70.8024C90.5008 69.6148 91.5843 68.9898 92.3083 69.3596C92.3343 69.37 92.3551 69.3856 92.3812 69.4013C93.1052 69.8544 93.1469 71.2139 92.4697 72.4431C92.4437 72.4952 92.4124 72.5473 92.3812 72.5942L85.2036 84.9856C84.5421 86.1263 83.49 86.7045 82.7868 86.3503C82.7451 86.3294 82.7087 86.3086 82.6722 86.2774L75.4947 81.2041C74.7707 80.751 74.729 79.3863 75.4061 78.1623C76.0572 76.9695 77.1406 76.3496 77.875 76.7194C77.9011 76.7299 77.9219 76.7455 77.9427 76.7611C77.9688 76.782 78 76.8028 78.0313 76.8236L82.1461 79.7353V65.3541C82.1461 64.1509 82.9483 62.7602 83.9379 62.255C84.3754 62.031 84.7817 62.0206 85.0942 62.182Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
         stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
         strokeWidth="0.5"
@@ -170,9 +176,9 @@ export function ArchivedWorkItemVerticalStackIllustration({ className }: TIllust
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M147.952 47.5821C149.088 47.0039 150.546 47.0508 152.145 47.8686C155.755 49.7072 158.677 54.7596 158.677 59.1453C158.677 61.5934 157.765 63.3227 156.333 64.0519L158.656 62.8695C160.088 62.1403 161 60.411 161 57.963C161 53.572 158.073 48.5196 154.468 46.6862C152.874 45.8736 151.411 45.8215 150.275 46.3997L147.952 47.5821Z"
+        d="M147.202 46.8321C148.338 46.2539 149.796 46.3008 151.395 47.1186C155.005 48.9572 157.927 54.0096 157.927 58.3953C157.927 60.8434 157.015 62.5727 155.583 63.3019L157.906 62.1195C159.338 61.3903 160.25 59.661 160.25 57.213C160.25 52.822 157.323 47.7696 153.718 45.9362C152.124 45.1236 150.661 45.0715 149.525 45.6497L147.202 46.8321Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.5"
         strokeLinecap="round"
         strokeLinejoin="round"
@@ -180,9 +186,9 @@ export function ArchivedWorkItemVerticalStackIllustration({ className }: TIllust
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M147.952 47.5813C146.52 48.3106 145.608 50.0398 145.608 52.4879C145.608 56.8788 148.536 61.9312 152.14 63.7647C153.734 64.5772 155.198 64.6293 156.333 64.0512C157.765 63.322 158.677 61.5927 158.677 59.1446C158.677 54.7537 155.75 49.7013 152.145 47.8678C150.551 47.0553 149.088 47.0032 147.952 47.5813Z"
+        d="M147.202 46.8313C145.77 47.5606 144.858 49.2898 144.858 51.7379C144.858 56.1288 147.786 61.1812 151.39 63.0147C152.984 63.8272 154.448 63.8793 155.583 63.3012C157.015 62.572 157.927 60.8427 157.927 58.3946C157.927 54.0037 155 48.9513 151.395 47.1178C149.801 46.3053 148.338 46.2532 147.202 46.8313Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.5"
         strokeLinecap="round"
         strokeLinejoin="round"
@@ -191,26 +197,26 @@ export function ArchivedWorkItemVerticalStackIllustration({ className }: TIllust
         <path
           fillRule="evenodd"
           clipRule="evenodd"
-          d="M153.937 53.9148C153.755 53.6023 153.51 53.3523 153.249 53.2221C152.994 53.0919 152.744 53.0919 152.562 53.2221L149.796 55.1753C149.494 55.3889 149.322 55.8004 149.322 56.3212C149.322 56.8421 149.494 57.4255 149.796 57.9515C150.098 58.4724 150.51 58.8891 150.937 59.1079C151.364 59.3266 151.775 59.3266 152.078 59.1131L155.041 57.0192C155.166 56.9306 155.369 57.0348 155.5 57.2536C155.625 57.4723 155.625 57.7172 155.5 57.8109L152.536 59.9048C152.114 60.2069 151.536 60.2017 150.937 59.8944C150.338 59.5871 149.765 59.0089 149.338 58.2745C148.916 57.5453 148.676 56.7223 148.676 55.9931C148.676 55.2639 148.916 54.6857 149.338 54.3888L152.098 52.4356C152.4 52.222 152.812 52.222 153.239 52.4356C153.666 52.6543 154.078 53.071 154.38 53.5919C154.682 54.1128 154.854 54.7013 154.854 55.2222C154.854 55.7431 154.682 56.1545 154.38 56.3733L151.609 58.3266C151.426 58.4568 151.182 58.4516 150.926 58.3266C150.671 58.1963 150.421 57.9463 150.244 57.6338C150.067 57.3213 149.963 56.9671 149.963 56.6546C149.963 56.3421 150.067 56.0973 150.244 55.967L152.984 54.0346C153.109 53.9461 153.312 54.0502 153.442 54.269C153.567 54.4878 153.567 54.7326 153.442 54.8211L150.702 56.7535C150.64 56.7952 150.609 56.8786 150.609 56.9827C150.609 57.0869 150.645 57.2015 150.702 57.3109C150.765 57.415 150.843 57.4984 150.932 57.5401C151.02 57.5817 151.098 57.5817 151.161 57.5401L153.932 55.5868C154.114 55.4566 154.213 55.2118 154.213 54.8993C154.213 54.5867 154.109 54.2325 153.927 53.92L153.937 53.9148Z"
+          d="M153.187 53.1648C153.005 52.8523 152.76 52.6023 152.499 52.4721C152.244 52.3419 151.994 52.3419 151.812 52.4721L149.046 54.4253C148.744 54.6389 148.572 55.0504 148.572 55.5712C148.572 56.0921 148.744 56.6755 149.046 57.2015C149.348 57.7224 149.76 58.1391 150.187 58.3579C150.614 58.5766 151.025 58.5766 151.328 58.3631L154.291 56.2692C154.416 56.1806 154.619 56.2848 154.75 56.5036C154.875 56.7223 154.875 56.9672 154.75 57.0609L151.786 59.1548C151.364 59.4569 150.786 59.4517 150.187 59.1444C149.588 58.8371 149.015 58.2589 148.588 57.5245C148.166 56.7953 147.926 55.9723 147.926 55.2431C147.926 54.5139 148.166 53.9357 148.588 53.6388L151.348 51.6856C151.65 51.472 152.062 51.472 152.489 51.6856C152.916 51.9043 153.328 52.321 153.63 52.8419C153.932 53.3628 154.104 53.9513 154.104 54.4722C154.104 54.9931 153.932 55.4045 153.63 55.6233L150.859 57.5766C150.676 57.7068 150.432 57.7016 150.176 57.5766C149.921 57.4463 149.671 57.1963 149.494 56.8838C149.317 56.5713 149.213 56.2171 149.213 55.9046C149.213 55.5921 149.317 55.3473 149.494 55.217L152.234 53.2846C152.359 53.1961 152.562 53.3002 152.692 53.519C152.817 53.7378 152.817 53.9826 152.692 54.0711L149.952 56.0035C149.89 56.0452 149.859 56.1286 149.859 56.2327C149.859 56.3369 149.895 56.4515 149.952 56.5609C150.015 56.665 150.093 56.7484 150.182 56.7901C150.27 56.8317 150.348 56.8317 150.411 56.7901L153.182 54.8368C153.364 54.7066 153.463 54.4618 153.463 54.1493C153.463 53.8367 153.359 53.4825 153.177 53.17L153.187 53.1648Z"
         />
       </mask>
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M153.937 53.9148C153.755 53.6023 153.51 53.3523 153.249 53.2221C152.994 53.0919 152.744 53.0919 152.562 53.2221L149.796 55.1753C149.494 55.3889 149.322 55.8004 149.322 56.3212C149.322 56.8421 149.494 57.4255 149.796 57.9515C150.098 58.4724 150.51 58.8891 150.937 59.1079C151.364 59.3266 151.775 59.3266 152.078 59.1131L155.041 57.0192C155.166 56.9306 155.369 57.0348 155.5 57.2536C155.625 57.4723 155.625 57.7172 155.5 57.8109L152.536 59.9048C152.114 60.2069 151.536 60.2017 150.937 59.8944C150.338 59.5871 149.765 59.0089 149.338 58.2745C148.916 57.5453 148.676 56.7223 148.676 55.9931C148.676 55.2639 148.916 54.6857 149.338 54.3888L152.098 52.4356C152.4 52.222 152.812 52.222 153.239 52.4356C153.666 52.6543 154.078 53.071 154.38 53.5919C154.682 54.1128 154.854 54.7013 154.854 55.2222C154.854 55.7431 154.682 56.1545 154.38 56.3733L151.609 58.3266C151.426 58.4568 151.182 58.4516 150.926 58.3266C150.671 58.1963 150.421 57.9463 150.244 57.6338C150.067 57.3213 149.963 56.9671 149.963 56.6546C149.963 56.3421 150.067 56.0973 150.244 55.967L152.984 54.0346C153.109 53.9461 153.312 54.0502 153.442 54.269C153.567 54.4878 153.567 54.7326 153.442 54.8211L150.702 56.7535C150.64 56.7952 150.609 56.8786 150.609 56.9827C150.609 57.0869 150.645 57.2015 150.702 57.3109C150.765 57.415 150.843 57.4984 150.932 57.5401C151.02 57.5817 151.098 57.5817 151.161 57.5401L153.932 55.5868C154.114 55.4566 154.213 55.2118 154.213 54.8993C154.213 54.5867 154.109 54.2325 153.927 53.92L153.937 53.9148Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M153.187 53.1648C153.005 52.8523 152.76 52.6023 152.499 52.4721C152.244 52.3419 151.994 52.3419 151.812 52.4721L149.046 54.4253C148.744 54.6389 148.572 55.0504 148.572 55.5712C148.572 56.0921 148.744 56.6755 149.046 57.2015C149.348 57.7224 149.76 58.1391 150.187 58.3579C150.614 58.5766 151.025 58.5766 151.328 58.3631L154.291 56.2692C154.416 56.1806 154.619 56.2848 154.75 56.5036C154.875 56.7223 154.875 56.9672 154.75 57.0609L151.786 59.1548C151.364 59.4569 150.786 59.4517 150.187 59.1444C149.588 58.8371 149.015 58.2589 148.588 57.5245C148.166 56.7953 147.926 55.9723 147.926 55.2431C147.926 54.5139 148.166 53.9357 148.588 53.6388L151.348 51.6856C151.65 51.472 152.062 51.472 152.489 51.6856C152.916 51.9043 153.328 52.321 153.63 52.8419C153.932 53.3628 154.104 53.9513 154.104 54.4722C154.104 54.9931 153.932 55.4045 153.63 55.6233L150.859 57.5766C150.676 57.7068 150.432 57.7016 150.176 57.5766C149.921 57.4463 149.671 57.1963 149.494 56.8838C149.317 56.5713 149.213 56.2171 149.213 55.9046C149.213 55.5921 149.317 55.3473 149.494 55.217L152.234 53.2846C152.359 53.1961 152.562 53.3002 152.692 53.519C152.817 53.7378 152.817 53.9826 152.692 54.0711L149.952 56.0035C149.89 56.0452 149.859 56.1286 149.859 56.2327C149.859 56.3369 149.895 56.4515 149.952 56.5609C150.015 56.665 150.093 56.7484 150.182 56.7901C150.27 56.8317 150.348 56.8317 150.411 56.7901L153.182 54.8368C153.364 54.7066 153.463 54.4618 153.463 54.1493C153.463 53.8367 153.359 53.4825 153.177 53.17L153.187 53.1648Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
-        d="M153.937 53.9148L154.385 54.8091L155.338 54.332L154.801 53.4109L153.937 53.9148ZM153.249 53.2221L152.795 54.1129L152.802 54.1165L153.249 53.2221ZM152.562 53.2221L153.139 54.0389L153.143 54.0358L152.562 53.2221ZM149.796 55.1753L149.219 54.3585L149.219 54.3587L149.796 55.1753ZM149.796 57.9515L148.929 58.4495L148.931 58.4533L149.796 57.9515ZM152.078 59.1131L151.501 58.2963L151.5 58.2965L152.078 59.1131ZM155.041 57.0192L155.618 57.8359L155.619 57.8352L155.041 57.0192ZM155.5 57.2536L156.368 56.7574L156.363 56.7497L156.359 56.7421L155.5 57.2536ZM155.5 57.8109L156.077 58.6276L156.088 58.6194L156.1 58.6109L155.5 57.8109ZM152.536 59.9048L151.959 59.088L151.954 59.0917L152.536 59.9048ZM149.338 58.2745L148.472 58.7753L148.473 58.7772L149.338 58.2745ZM149.338 54.3888L149.913 55.2066L149.915 55.2051L149.338 54.3888ZM152.098 52.4356L151.521 51.619L151.521 51.6192L152.098 52.4356ZM153.239 52.4356L153.695 51.5455L153.686 51.5411L153.239 52.4356ZM154.38 56.3733L154.956 57.1907L154.966 57.1833L154.38 56.3733ZM151.609 58.3266L151.033 57.5092L151.028 57.5128L151.609 58.3266ZM150.926 58.3266L150.472 59.2173L150.479 59.221L150.487 59.2246L150.926 58.3266ZM150.244 55.967L149.668 55.1499L149.66 55.1555L149.652 55.1614L150.244 55.967ZM152.984 54.0346L153.56 54.8518L153.562 54.8506L152.984 54.0346ZM153.442 54.269L154.31 53.7729L154.306 53.7652L154.302 53.7575L153.442 54.269ZM153.442 54.8211L154.019 55.6383L154.02 55.6372L153.442 54.8211ZM150.702 56.7535L151.257 57.5856L151.268 57.5783L151.279 57.5707L150.702 56.7535ZM150.702 57.3109L149.817 57.7749L149.83 57.8005L149.845 57.8254L150.702 57.3109ZM151.161 57.5401L151.716 58.3721L151.726 58.3649L151.737 58.3574L151.161 57.5401ZM153.932 55.5868L154.508 56.4042L154.513 56.4005L153.932 55.5868ZM153.927 53.92L153.479 53.0257L152.526 53.5029L153.063 54.4239L153.927 53.92ZM153.937 53.9148L154.801 53.4109C154.549 52.9788 154.175 52.5668 153.697 52.3276L153.249 53.2221L152.802 54.1165C152.845 54.1378 152.961 54.2258 153.073 54.4187L153.937 53.9148ZM153.249 53.2221L153.704 52.3313C153.226 52.0872 152.555 51.998 151.981 52.4083L152.562 53.2221L153.143 54.0358C153.051 54.1018 152.952 54.1244 152.878 54.1244C152.811 54.1244 152.782 54.1064 152.795 54.1128L153.249 53.2221ZM152.562 53.2221L151.985 52.4052L149.219 54.3585L149.796 55.1753L150.373 55.9922L153.139 54.0389L152.562 53.2221ZM149.796 55.1753L149.219 54.3587C148.557 54.827 148.322 55.6129 148.322 56.3212H149.322H150.322C150.322 56.1673 150.348 56.0682 150.37 56.0161C150.39 55.9662 150.401 55.9727 150.373 55.9919L149.796 55.1753ZM149.322 56.3212H148.322C148.322 57.0475 148.557 57.8009 148.929 58.4495L149.796 57.9515L150.663 57.4536C150.432 57.05 150.322 56.6367 150.322 56.3212H149.322ZM149.796 57.9515L148.931 58.4533C149.305 59.0985 149.845 59.672 150.481 59.9979L150.937 59.1079L151.393 58.2178C151.175 58.1062 150.891 57.8463 150.661 57.4498L149.796 57.9515ZM150.937 59.1079L150.481 59.9979C151.13 60.3303 151.96 60.4207 152.655 59.9297L152.078 59.1131L151.5 58.2965C151.513 58.2874 151.528 58.2803 151.542 58.2762C151.555 58.2722 151.561 58.2726 151.557 58.2726C151.548 58.2726 151.493 58.2692 151.393 58.2178L150.937 59.1079ZM152.078 59.1131L152.655 59.9298L155.618 57.8359L155.041 57.0192L154.464 56.2025L151.501 58.2963L152.078 59.1131ZM155.041 57.0192L155.619 57.8352C155.271 58.0816 154.927 57.9696 154.813 57.9113C154.693 57.85 154.649 57.78 154.64 57.7651L155.5 57.2536L156.359 56.7421C156.22 56.5084 156.009 56.2769 155.724 56.131C155.445 55.988 154.936 55.8683 154.463 56.2032L155.041 57.0192ZM155.5 57.2536L154.631 57.7497C154.619 57.7282 154.593 57.6748 154.593 57.5791C154.593 57.5061 154.615 57.2241 154.9 57.0109L155.5 57.8109L156.1 58.6109C156.509 58.3039 156.593 57.8526 156.593 57.5791C156.593 57.2829 156.505 56.9977 156.368 56.7574L155.5 57.2536ZM155.5 57.8109L154.923 56.9942L151.959 59.0881L152.536 59.9048L153.113 60.7215L156.077 58.6276L155.5 57.8109ZM152.536 59.9048L151.954 59.0917C151.932 59.1072 151.779 59.2024 151.393 59.0046L150.937 59.8944L150.48 60.7841C151.293 61.201 152.296 61.3066 153.118 60.7178L152.536 59.9048ZM150.937 59.8944L151.393 59.0046C151.002 58.804 150.557 58.3818 150.202 57.7718L149.338 58.2745L148.473 58.7772C148.973 59.636 149.673 60.3701 150.48 60.7841L150.937 59.8944ZM149.338 58.2745L150.203 57.7737C149.855 57.1716 149.676 56.5195 149.676 55.9931H148.676H147.676C147.676 56.925 147.977 57.919 148.472 58.7753L149.338 58.2745ZM148.676 55.9931H149.676C149.676 55.4474 149.856 55.2472 149.913 55.2066L149.338 54.3888L148.762 53.571C147.976 54.1242 147.676 55.0803 147.676 55.9931H148.676ZM149.338 54.3888L149.915 55.2051L152.676 53.2519L152.098 52.4356L151.521 51.6192L148.76 53.5725L149.338 54.3888ZM152.098 52.4356L152.676 53.2521C152.663 53.2613 152.648 53.2681 152.635 53.2721C152.622 53.276 152.617 53.2754 152.622 53.2754C152.633 53.2754 152.69 53.2792 152.792 53.33L153.239 52.4356L153.686 51.5411C153.041 51.2187 152.214 51.129 151.521 51.619L152.098 52.4356ZM153.239 52.4356L152.783 53.3256C153.001 53.4373 153.285 53.6972 153.515 54.0936L154.38 53.5919L155.245 53.0902C154.871 52.4449 154.331 51.8714 153.695 51.5455L153.239 52.4356ZM154.38 53.5919L153.515 54.0936C153.743 54.4874 153.854 54.9047 153.854 55.2222H154.854H155.854C155.854 54.4979 155.621 53.7381 155.245 53.0902L154.38 53.5919ZM154.854 55.2222H153.854C153.854 55.3758 153.828 55.4754 153.806 55.5291C153.785 55.5804 153.772 55.5787 153.793 55.5634L154.38 56.3733L154.966 57.1833C155.617 56.7117 155.854 55.9346 155.854 55.2222H154.854ZM154.38 56.3733L153.804 55.556L151.033 57.5092L151.609 58.3266L152.185 59.1439L154.956 57.1907L154.38 56.3733ZM151.609 58.3266L151.028 57.5128C151.123 57.4444 151.226 57.4219 151.301 57.4223C151.366 57.4227 151.389 57.4398 151.366 57.4285L150.926 58.3266L150.487 59.2246C150.94 59.4468 151.606 59.5576 152.19 59.1403L151.609 58.3266ZM150.926 58.3266L151.381 57.4358C151.333 57.4112 151.214 57.3176 151.114 57.1408L150.244 57.6338L149.374 58.1268C149.628 58.575 150.01 58.9815 150.472 59.2173L150.926 58.3266ZM150.244 57.6338L151.114 57.1408C151.005 56.949 150.963 56.7632 150.963 56.6546H149.963H148.963C148.963 57.171 149.129 57.6936 149.374 58.1268L150.244 57.6338ZM149.963 56.6546H150.963C150.963 56.6066 150.971 56.6004 150.961 56.6245C150.951 56.6503 150.917 56.7137 150.836 56.7727L150.244 55.967L149.652 55.1614C149.133 55.5425 148.963 56.1466 148.963 56.6546H149.963ZM150.244 55.967L150.82 56.7842L153.56 54.8518L152.984 54.0346L152.407 53.2174L149.668 55.1499L150.244 55.967ZM152.984 54.0346L153.562 54.8506C153.214 55.097 152.869 54.985 152.755 54.9268C152.636 54.8655 152.592 54.7954 152.583 54.7805L153.442 54.269L154.302 53.7575C154.162 53.5239 153.952 53.2923 153.667 53.1464C153.387 53.0035 152.879 52.8837 152.406 53.2186L152.984 54.0346ZM153.442 54.269L152.574 54.7651C152.562 54.7442 152.536 54.6907 152.536 54.5939C152.536 54.5239 152.557 54.2227 152.864 54.0051L153.442 54.8211L154.02 55.6372C154.453 55.331 154.536 54.8631 154.536 54.5939C154.536 54.2978 154.447 54.0126 154.31 53.7729L153.442 54.269ZM153.442 54.8211L152.866 54.0039L150.126 55.9364L150.702 56.7535L151.279 57.5707L154.019 55.6383L153.442 54.8211ZM150.702 56.7535L150.148 55.9215C149.682 56.2319 149.609 56.729 149.609 56.9827H150.609H151.609C151.609 57.025 151.603 57.11 151.561 57.2161C151.516 57.3269 151.425 57.4735 151.257 57.5856L150.702 56.7535ZM150.609 56.9827H149.609C149.609 57.3044 149.715 57.5817 149.817 57.7749L150.702 57.3109L151.588 56.8469C151.585 56.8406 151.588 56.8455 151.593 56.8627C151.598 56.8789 151.609 56.9204 151.609 56.9827H150.609ZM150.702 57.3109L149.845 57.8254C149.963 58.0227 150.171 58.2873 150.506 58.4449L150.932 57.5401L151.357 56.6352C151.442 56.6749 151.494 56.7212 151.52 56.7478C151.547 56.7748 151.558 56.7937 151.56 56.7964L150.702 57.3109ZM150.932 57.5401L150.506 58.4449C150.802 58.5843 151.273 58.6669 151.716 58.3721L151.161 57.5401L150.606 56.708C150.745 56.6157 150.904 56.5713 151.056 56.5713C151.198 56.5713 151.302 56.6094 151.357 56.6352L150.932 57.5401ZM151.161 57.5401L151.737 58.3574L154.508 56.4042L153.932 55.5868L153.356 54.7695L150.585 56.7227L151.161 57.5401ZM153.932 55.5868L154.513 56.4005C155.056 56.0125 155.213 55.3916 155.213 54.8993H154.213H153.213C153.213 54.9538 153.204 54.9604 153.215 54.9338C153.227 54.9035 153.265 54.8343 153.351 54.7731L153.932 55.5868ZM154.213 54.8993H155.213C155.213 54.3819 155.047 53.8557 154.79 53.4162L153.927 53.92L153.063 54.4239C153.171 54.6094 153.213 54.7916 153.213 54.8993H154.213ZM153.927 53.92L154.374 54.8143L154.385 54.8091L153.937 53.9148L153.49 53.0205L153.479 53.0257L153.927 53.92Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M153.187 53.1648L153.635 54.0591L154.588 53.582L154.051 52.6609L153.187 53.1648ZM152.499 52.4721L152.045 53.3629L152.052 53.3665L152.499 52.4721ZM151.812 52.4721L152.389 53.2889L152.393 53.2858L151.812 52.4721ZM149.046 54.4253L148.469 53.6085L148.469 53.6087L149.046 54.4253ZM149.046 57.2015L148.179 57.6995L148.181 57.7033L149.046 57.2015ZM151.328 58.3631L150.751 57.5463L150.75 57.5465L151.328 58.3631ZM154.291 56.2692L154.868 57.0859L154.869 57.0852L154.291 56.2692ZM154.75 56.5036L155.618 56.0074L155.613 55.9997L155.609 55.9921L154.75 56.5036ZM154.75 57.0609L155.327 57.8776L155.338 57.8694L155.35 57.8609L154.75 57.0609ZM151.786 59.1548L151.209 58.338L151.204 58.3417L151.786 59.1548ZM148.588 57.5245L147.722 58.0253L147.723 58.0272L148.588 57.5245ZM148.588 53.6388L149.163 54.4566L149.165 54.4551L148.588 53.6388ZM151.348 51.6856L150.771 50.869L150.771 50.8692L151.348 51.6856ZM152.489 51.6856L152.945 50.7955L152.936 50.7911L152.489 51.6856ZM153.63 55.6233L154.206 56.4407L154.216 56.4333L153.63 55.6233ZM150.859 57.5766L150.283 56.7592L150.278 56.7628L150.859 57.5766ZM150.176 57.5766L149.722 58.4673L149.729 58.471L149.737 58.4746L150.176 57.5766ZM149.494 55.217L148.918 54.3999L148.91 54.4055L148.902 54.4114L149.494 55.217ZM152.234 53.2846L152.81 54.1018L152.812 54.1006L152.234 53.2846ZM152.692 53.519L153.56 53.0229L153.556 53.0152L153.552 53.0075L152.692 53.519ZM152.692 54.0711L153.269 54.8883L153.27 54.8872L152.692 54.0711ZM149.952 56.0035L150.507 56.8356L150.518 56.8283L150.529 56.8207L149.952 56.0035ZM149.952 56.5609L149.067 57.0249L149.08 57.0505L149.095 57.0754L149.952 56.5609ZM150.411 56.7901L150.966 57.6221L150.976 57.6149L150.987 57.6074L150.411 56.7901ZM153.182 54.8368L153.758 55.6542L153.763 55.6505L153.182 54.8368ZM153.177 53.17L152.729 52.2757L151.776 52.7529L152.313 53.6739L153.177 53.17ZM153.187 53.1648L154.051 52.6609C153.799 52.2288 153.425 51.8168 152.947 51.5776L152.499 52.4721L152.052 53.3665C152.095 53.3878 152.211 53.4758 152.323 53.6687L153.187 53.1648ZM152.499 52.4721L152.954 51.5813C152.476 51.3372 151.805 51.248 151.231 51.6583L151.812 52.4721L152.393 53.2858C152.301 53.3518 152.202 53.3744 152.128 53.3744C152.061 53.3744 152.032 53.3564 152.045 53.3628L152.499 52.4721ZM151.812 52.4721L151.235 51.6552L148.469 53.6085L149.046 54.4253L149.623 55.2422L152.389 53.2889L151.812 52.4721ZM149.046 54.4253L148.469 53.6087C147.807 54.077 147.572 54.8629 147.572 55.5712H148.572H149.572C149.572 55.4173 149.598 55.3182 149.62 55.2661C149.64 55.2162 149.651 55.2227 149.623 55.2419L149.046 54.4253ZM148.572 55.5712H147.572C147.572 56.2975 147.807 57.0509 148.179 57.6995L149.046 57.2015L149.913 56.7036C149.682 56.3 149.572 55.8867 149.572 55.5712H148.572ZM149.046 57.2015L148.181 57.7033C148.555 58.3485 149.095 58.922 149.731 59.2479L150.187 58.3579L150.643 57.4678C150.425 57.3562 150.141 57.0963 149.911 56.6998L149.046 57.2015ZM150.187 58.3579L149.731 59.2479C150.38 59.5803 151.21 59.6707 151.905 59.1797L151.328 58.3631L150.75 57.5465C150.763 57.5374 150.778 57.5303 150.792 57.5262C150.805 57.5222 150.811 57.5226 150.807 57.5226C150.798 57.5226 150.743 57.5192 150.643 57.4678L150.187 58.3579ZM151.328 58.3631L151.905 59.1798L154.868 57.0859L154.291 56.2692L153.714 55.4525L150.751 57.5463L151.328 58.3631ZM154.291 56.2692L154.869 57.0852C154.521 57.3316 154.177 57.2196 154.063 57.1613C153.943 57.1 153.899 57.03 153.89 57.0151L154.75 56.5036L155.609 55.9921C155.47 55.7584 155.259 55.5269 154.974 55.381C154.695 55.238 154.186 55.1183 153.713 55.4532L154.291 56.2692ZM154.75 56.5036L153.881 56.9997C153.869 56.9782 153.843 56.9248 153.843 56.8291C153.843 56.7561 153.865 56.4741 154.15 56.2609L154.75 57.0609L155.35 57.8609C155.759 57.5539 155.843 57.1026 155.843 56.8291C155.843 56.5329 155.755 56.2477 155.618 56.0074L154.75 56.5036ZM154.75 57.0609L154.173 56.2442L151.209 58.3381L151.786 59.1548L152.363 59.9715L155.327 57.8776L154.75 57.0609ZM151.786 59.1548L151.204 58.3417C151.182 58.3572 151.029 58.4524 150.643 58.2546L150.187 59.1444L149.73 60.0341C150.543 60.451 151.546 60.5566 152.368 59.9678L151.786 59.1548ZM150.187 59.1444L150.643 58.2546C150.252 58.054 149.807 57.6318 149.452 57.0218L148.588 57.5245L147.723 58.0272C148.223 58.886 148.923 59.6201 149.73 60.0341L150.187 59.1444ZM148.588 57.5245L149.453 57.0237C149.105 56.4216 148.926 55.7695 148.926 55.2431H147.926H146.926C146.926 56.175 147.227 57.169 147.722 58.0253L148.588 57.5245ZM147.926 55.2431H148.926C148.926 54.6974 149.106 54.4972 149.163 54.4566L148.588 53.6388L148.012 52.821C147.226 53.3742 146.926 54.3303 146.926 55.2431H147.926ZM148.588 53.6388L149.165 54.4551L151.926 52.5019L151.348 51.6856L150.771 50.8692L148.01 52.8225L148.588 53.6388ZM151.348 51.6856L151.926 52.5021C151.913 52.5113 151.898 52.5181 151.885 52.5221C151.872 52.526 151.867 52.5254 151.872 52.5254C151.883 52.5254 151.94 52.5292 152.042 52.58L152.489 51.6856L152.936 50.7911C152.291 50.4687 151.464 50.379 150.771 50.869L151.348 51.6856ZM152.489 51.6856L152.033 52.5756C152.251 52.6873 152.535 52.9472 152.765 53.3436L153.63 52.8419L154.495 52.3402C154.121 51.6949 153.581 51.1214 152.945 50.7955L152.489 51.6856ZM153.63 52.8419L152.765 53.3436C152.993 53.7374 153.104 54.1547 153.104 54.4722H154.104H155.104C155.104 53.7479 154.871 52.9881 154.495 52.3402L153.63 52.8419ZM154.104 54.4722H153.104C153.104 54.6258 153.078 54.7254 153.056 54.7791C153.035 54.8304 153.022 54.8287 153.043 54.8134L153.63 55.6233L154.216 56.4333C154.867 55.9617 155.104 55.1846 155.104 54.4722H154.104ZM153.63 55.6233L153.054 54.806L150.283 56.7592L150.859 57.5766L151.435 58.3939L154.206 56.4407L153.63 55.6233ZM150.859 57.5766L150.278 56.7628C150.373 56.6944 150.476 56.6719 150.551 56.6723C150.616 56.6727 150.639 56.6898 150.616 56.6785L150.176 57.5766L149.737 58.4746C150.19 58.6968 150.856 58.8076 151.44 58.3903L150.859 57.5766ZM150.176 57.5766L150.631 56.6858C150.583 56.6612 150.464 56.5676 150.364 56.3908L149.494 56.8838L148.624 57.3768C148.878 57.825 149.26 58.2315 149.722 58.4673L150.176 57.5766ZM149.494 56.8838L150.364 56.3908C150.255 56.199 150.213 56.0132 150.213 55.9046H149.213H148.213C148.213 56.421 148.379 56.9436 148.624 57.3768L149.494 56.8838ZM149.213 55.9046H150.213C150.213 55.8566 150.221 55.8504 150.211 55.8745C150.201 55.9003 150.167 55.9637 150.086 56.0227L149.494 55.217L148.902 54.4114C148.383 54.7925 148.213 55.3966 148.213 55.9046H149.213ZM149.494 55.217L150.07 56.0342L152.81 54.1018L152.234 53.2846L151.657 52.4674L148.918 54.3999L149.494 55.217ZM152.234 53.2846L152.812 54.1006C152.464 54.347 152.119 54.235 152.005 54.1768C151.886 54.1155 151.842 54.0454 151.833 54.0305L152.692 53.519L153.552 53.0075C153.412 52.7739 153.202 52.5423 152.917 52.3964C152.637 52.2535 152.129 52.1337 151.656 52.4686L152.234 53.2846ZM152.692 53.519L151.824 54.0151C151.812 53.9942 151.786 53.9407 151.786 53.8439C151.786 53.7739 151.807 53.4727 152.114 53.2551L152.692 54.0711L153.27 54.8872C153.703 54.581 153.786 54.1131 153.786 53.8439C153.786 53.5478 153.697 53.2626 153.56 53.0229L152.692 53.519ZM152.692 54.0711L152.116 53.2539L149.376 55.1864L149.952 56.0035L150.529 56.8207L153.269 54.8883L152.692 54.0711ZM149.952 56.0035L149.398 55.1715C148.932 55.4819 148.859 55.979 148.859 56.2327H149.859H150.859C150.859 56.275 150.853 56.36 150.811 56.4661C150.766 56.5769 150.675 56.7235 150.507 56.8356L149.952 56.0035ZM149.859 56.2327H148.859C148.859 56.5544 148.965 56.8317 149.067 57.0249L149.952 56.5609L150.838 56.0969C150.835 56.0906 150.838 56.0955 150.843 56.1127C150.848 56.1289 150.859 56.1704 150.859 56.2327H149.859ZM149.952 56.5609L149.095 57.0754C149.213 57.2727 149.421 57.5373 149.756 57.6949L150.182 56.7901L150.607 55.8852C150.692 55.9249 150.744 55.9712 150.77 55.9978C150.797 56.0248 150.808 56.0437 150.81 56.0464L149.952 56.5609ZM150.182 56.7901L149.756 57.6949C150.052 57.8343 150.523 57.9169 150.966 57.6221L150.411 56.7901L149.856 55.958C149.995 55.8657 150.154 55.8213 150.306 55.8213C150.448 55.8213 150.552 55.8594 150.607 55.8852L150.182 56.7901ZM150.411 56.7901L150.987 57.6074L153.758 55.6542L153.182 54.8368L152.606 54.0195L149.835 55.9727L150.411 56.7901ZM153.182 54.8368L153.763 55.6505C154.306 55.2625 154.463 54.6416 154.463 54.1493H153.463H152.463C152.463 54.2038 152.454 54.2104 152.465 54.1838C152.477 54.1535 152.515 54.0843 152.601 54.0231L153.182 54.8368ZM153.463 54.1493H154.463C154.463 53.6319 154.297 53.1057 154.04 52.6662L153.177 53.17L152.313 53.6739C152.421 53.8594 152.463 54.0416 152.463 54.1493H153.463ZM153.177 53.17L153.624 54.0643L153.635 54.0591L153.187 53.1648L152.74 52.2705L152.729 52.2757L153.177 53.17Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
         mask="url(#path-22-inside-1_637_1592)"
       />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M145.66 31.3567C147.093 30.6275 148.004 28.9035 148.004 26.4502C148.004 22.0593 145.077 17.0068 141.473 15.1734L117.304 2.85488C115.711 2.04233 114.252 1.99024 113.117 2.56841L115.44 1.38604C116.575 0.807874 118.034 0.859961 119.628 1.67251L143.796 13.9858C147.405 15.8245 150.327 20.8769 150.327 25.2626C150.327 27.7159 149.416 29.4399 147.984 30.1692L145.66 31.3515V31.3567Z"
+        d="M144.91 30.6067C146.343 29.8775 147.254 28.1535 147.254 25.7002C147.254 21.3093 144.327 16.2568 140.723 14.4234L116.554 2.10488C114.961 1.29233 113.502 1.24024 112.367 1.81841L114.69 0.636036C115.825 0.0578738 117.284 0.109961 118.878 0.922513L143.046 13.2358C146.655 15.0745 149.577 20.1269 149.577 24.5126C149.577 26.9659 148.666 28.6899 147.234 29.4192L144.91 30.6015V30.6067Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.5"
         strokeLinecap="round"
         strokeLinejoin="round"
@@ -218,82 +224,82 @@ export function ArchivedWorkItemVerticalStackIllustration({ className }: TIllust
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M145.661 31.3567C144.525 31.9348 143.067 31.8827 141.473 31.0702L117.305 18.7569C113.695 16.9182 110.773 11.8658 110.773 7.48011C110.773 5.02682 111.684 3.30275 113.117 2.57354C114.252 1.99537 115.711 2.04746 117.305 2.86001L141.473 15.1733C145.082 17.012 148.005 22.0644 148.005 26.4501C148.005 28.9034 147.093 30.6274 145.661 31.3567Z"
+        d="M144.911 30.6067C143.775 31.1848 142.317 31.1327 140.723 30.3202L116.555 18.0069C112.945 16.1682 110.023 11.1158 110.023 6.73011C110.023 4.27682 110.934 2.55275 112.367 1.82354C113.502 1.24537 114.961 1.29746 116.555 2.11001L140.723 14.4233C144.332 16.262 147.255 21.3144 147.255 25.7001C147.255 28.1534 146.343 29.8774 144.911 30.6067Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.5"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
       <path
-        d="M118.058 13.2158C117.924 13.2467 117.793 13.3006 117.671 13.3867C117.64 13.4092 117.611 13.4349 117.583 13.46C117.629 13.3916 117.678 13.3404 117.727 13.3057C117.804 13.2514 117.913 13.2113 118.058 13.2158Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M117.308 12.4658C117.174 12.4967 117.043 12.5506 116.921 12.6367C116.89 12.6592 116.861 12.6849 116.833 12.71C116.879 12.6416 116.928 12.5904 116.977 12.5557C117.054 12.5014 117.163 12.4613 117.308 12.4658Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
       />
       <path
-        d="M123.195 13.1484C123.154 13.2058 123.112 13.2504 123.068 13.2812C122.993 13.3343 122.894 13.3704 122.763 13.3701C122.89 13.3379 123.013 13.2848 123.125 13.2051C123.15 13.1876 123.172 13.1676 123.195 13.1484Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M122.445 12.3984C122.404 12.4558 122.362 12.5004 122.318 12.5312C122.243 12.5843 122.144 12.6204 122.013 12.6201C122.14 12.5879 122.263 12.5348 122.375 12.4551C122.4 12.4376 122.422 12.4176 122.445 12.3984Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
       />
       <mask id="path-28-inside-2_637_1592" fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}>
-        <path d="M124.633 19.4853C124.43 19.3811 124.263 19.0946 124.263 18.8498V17.9539C124.263 17.3393 123.925 16.6309 123.435 16.2299C123.237 16.0684 123.117 15.7611 123.169 15.5475C123.221 15.334 123.419 15.2923 123.617 15.4538C124.43 16.1257 124.998 17.3029 124.998 18.3238V19.2197C124.998 19.4697 124.831 19.5843 124.628 19.4801L124.633 19.4853Z" />
+        <path d="M123.883 18.7353C123.68 18.6311 123.513 18.3446 123.513 18.0998V17.2039C123.513 16.5893 123.175 15.8809 122.685 15.4799C122.487 15.3184 122.367 15.0111 122.419 14.7975C122.471 14.584 122.669 14.5423 122.867 14.7038C123.68 15.3757 124.248 16.5529 124.248 17.5738V18.4697C124.248 18.7197 124.081 18.8343 123.878 18.7301L123.883 18.7353Z" />
       </mask>
       <path
-        d="M124.633 19.4853C124.43 19.3811 124.263 19.0946 124.263 18.8498V17.9539C124.263 17.3393 123.925 16.6309 123.435 16.2299C123.237 16.0684 123.117 15.7611 123.169 15.5475C123.221 15.334 123.419 15.2923 123.617 15.4538C124.43 16.1257 124.998 17.3029 124.998 18.3238V19.2197C124.998 19.4697 124.831 19.5843 124.628 19.4801L124.633 19.4853Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M123.883 18.7353C123.68 18.6311 123.513 18.3446 123.513 18.0998V17.2039C123.513 16.5893 123.175 15.8809 122.685 15.4799C122.487 15.3184 122.367 15.0111 122.419 14.7975C122.471 14.584 122.669 14.5423 122.867 14.7038C123.68 15.3757 124.248 16.5529 124.248 17.5738V18.4697C124.248 18.7197 124.081 18.8343 123.878 18.7301L123.883 18.7353Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
-        d="M124.633 19.4853L124.177 20.3751L125.34 18.7785L124.633 19.4853ZM123.435 16.2299L124.069 15.4563L124.067 15.455L123.435 16.2299ZM123.617 15.4538L124.255 14.6831L124.249 14.6789L123.617 15.4538ZM124.628 19.4801L125.084 18.5903L123.92 20.1869L124.628 19.4801ZM124.633 19.4853L125.089 18.5955C125.152 18.6277 125.189 18.6614 125.206 18.6784C125.223 18.6966 125.232 18.7101 125.236 18.7174C125.241 18.7248 125.246 18.7353 125.251 18.7514C125.255 18.7667 125.263 18.7998 125.263 18.8498H124.263H123.263C123.263 19.1842 123.371 19.489 123.508 19.7233C123.642 19.9535 123.86 20.2125 124.177 20.3751L124.633 19.4853ZM124.263 18.8498H125.263V17.9539H124.263H123.263V18.8498H124.263ZM124.263 17.9539H125.263C125.263 17.0323 124.784 16.0426 124.069 15.4563L123.435 16.2299L122.801 17.0035C123.065 17.2193 123.263 17.6464 123.263 17.9539H124.263ZM123.435 16.2299L124.067 15.455C124.098 15.4805 124.115 15.502 124.123 15.5132C124.131 15.5248 124.136 15.535 124.14 15.5453C124.144 15.5551 124.151 15.5754 124.155 15.6082C124.158 15.6393 124.161 15.7014 124.141 15.7845L123.169 15.5475L122.198 15.3106C122.109 15.6763 122.18 16.0228 122.277 16.2712C122.377 16.5291 122.55 16.7981 122.803 17.0047L123.435 16.2299ZM123.169 15.5475L124.141 15.7845C124.098 15.9613 123.924 16.2591 123.544 16.3387C123.226 16.4054 123.024 16.2604 122.985 16.2287L123.617 15.4538L124.249 14.6789C124.013 14.4858 123.613 14.2808 123.133 14.3813C122.592 14.4948 122.293 14.9203 122.198 15.3106L123.169 15.5475ZM123.617 15.4538L122.98 16.2244C123.573 16.7146 123.998 17.6136 123.998 18.3238H124.998H125.998C125.998 16.9921 125.287 15.5368 124.255 14.6831L123.617 15.4538ZM124.998 18.3238H123.998V19.2197H124.998H125.998V18.3238H124.998ZM124.998 19.2197H123.998C123.998 19.1454 124.026 18.866 124.316 18.6631C124.634 18.4405 124.956 18.5244 125.084 18.5903L124.628 19.4801L124.172 20.3699C124.503 20.54 125.009 20.6187 125.462 20.3023C125.886 20.0057 125.998 19.5439 125.998 19.2197H124.998ZM124.628 19.4801L123.92 20.1869L123.926 20.1921L124.633 19.4853L125.34 18.7785L125.335 18.7733L124.628 19.4801Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M123.883 18.7353L123.427 19.6251L124.59 18.0285L123.883 18.7353ZM122.685 15.4799L123.319 14.7063L123.317 14.705L122.685 15.4799ZM122.867 14.7038L123.505 13.9331L123.499 13.9289L122.867 14.7038ZM123.878 18.7301L124.334 17.8403L123.17 19.4369L123.878 18.7301ZM123.883 18.7353L124.339 17.8455C124.402 17.8777 124.439 17.9114 124.456 17.9284C124.473 17.9466 124.482 17.9601 124.486 17.9674C124.491 17.9748 124.496 17.9853 124.501 18.0014C124.505 18.0167 124.513 18.0498 124.513 18.0998H123.513H122.513C122.513 18.4342 122.621 18.739 122.758 18.9733C122.892 19.2035 123.11 19.4625 123.427 19.6251L123.883 18.7353ZM123.513 18.0998H124.513V17.2039H123.513H122.513V18.0998H123.513ZM123.513 17.2039H124.513C124.513 16.2823 124.034 15.2926 123.319 14.7063L122.685 15.4799L122.051 16.2535C122.315 16.4693 122.513 16.8964 122.513 17.2039H123.513ZM122.685 15.4799L123.317 14.705C123.348 14.7305 123.365 14.752 123.373 14.7632C123.381 14.7748 123.386 14.785 123.39 14.7953C123.394 14.8051 123.401 14.8254 123.405 14.8582C123.408 14.8893 123.411 14.9514 123.391 15.0345L122.419 14.7975L121.448 14.5606C121.359 14.9263 121.43 15.2728 121.527 15.5212C121.627 15.7791 121.8 16.0481 122.053 16.2547L122.685 15.4799ZM122.419 14.7975L123.391 15.0345C123.348 15.2113 123.174 15.5091 122.794 15.5887C122.476 15.6554 122.274 15.5104 122.235 15.4787L122.867 14.7038L123.499 13.9289C123.263 13.7358 122.863 13.5308 122.383 13.6313C121.842 13.7448 121.543 14.1703 121.448 14.5606L122.419 14.7975ZM122.867 14.7038L122.23 15.4744C122.823 15.9646 123.248 16.8636 123.248 17.5738H124.248H125.248C125.248 16.2421 124.537 14.7868 123.505 13.9331L122.867 14.7038ZM124.248 17.5738H123.248V18.4697H124.248H125.248V17.5738H124.248ZM124.248 18.4697H123.248C123.248 18.3954 123.276 18.116 123.566 17.9131C123.884 17.6905 124.206 17.7744 124.334 17.8403L123.878 18.7301L123.422 19.6199C123.753 19.79 124.259 19.8687 124.712 19.5523C125.136 19.2557 125.248 18.7939 125.248 18.4697H124.248ZM123.878 18.7301L123.17 19.4369L123.176 19.4421L123.883 18.7353L124.59 18.0285L124.585 18.0233L123.878 18.7301Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
         mask="url(#path-28-inside-2_637_1592)"
       />
       <path
-        d="M121.009 12C120.962 12.0714 120.911 12.1244 120.861 12.1602C120.783 12.2152 120.672 12.2539 120.524 12.248C120.66 12.2176 120.793 12.1649 120.916 12.0781C120.949 12.0544 120.979 12.0267 121.009 12ZM119.163 8.39746C119.028 8.42835 118.897 8.48227 118.776 8.56836C118.744 8.59085 118.716 8.61651 118.687 8.6416C118.733 8.57328 118.782 8.52201 118.832 8.4873C118.908 8.43304 119.018 8.39298 119.163 8.39746Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M120.259 11.25C120.212 11.3214 120.161 11.3744 120.111 11.4102C120.033 11.4652 119.922 11.5039 119.774 11.498C119.91 11.4676 120.043 11.4149 120.166 11.3281C120.199 11.3044 120.229 11.2767 120.259 11.25ZM118.413 7.64746C118.278 7.67835 118.147 7.73227 118.026 7.81836C117.994 7.84085 117.966 7.86651 117.937 7.8916C117.983 7.82328 118.032 7.77201 118.082 7.7373C118.158 7.68304 118.268 7.64298 118.413 7.64746Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
       />
       <mask id="path-31-inside-3_637_1592" fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}>
-        <path d="M135.671 23.9392C135.467 23.835 135.301 23.5485 135.301 23.3037V18.8242C135.301 18.5742 135.467 18.4596 135.671 18.5638C135.874 18.668 136.04 18.9545 136.04 19.1993V23.6787C136.04 23.9287 135.874 24.0433 135.671 23.9392Z" />
+        <path d="M134.921 23.1892C134.717 23.085 134.551 22.7985 134.551 22.5537V18.0742C134.551 17.8242 134.717 17.7096 134.921 17.8138C135.124 17.918 135.29 18.2045 135.29 18.4493V22.9287C135.29 23.1787 135.124 23.2933 134.921 23.1892Z" />
       </mask>
       <path
-        d="M135.671 23.9392C135.467 23.835 135.301 23.5485 135.301 23.3037V18.8242C135.301 18.5742 135.467 18.4596 135.671 18.5638C135.874 18.668 136.04 18.9545 136.04 19.1993V23.6787C136.04 23.9287 135.874 24.0433 135.671 23.9392Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M134.921 23.1892C134.717 23.085 134.551 22.7985 134.551 22.5537V18.0742C134.551 17.8242 134.717 17.7096 134.921 17.8138C135.124 17.918 135.29 18.2045 135.29 18.4493V22.9287C135.29 23.1787 135.124 23.2933 134.921 23.1892Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
-        d="M135.671 23.9392L136.127 23.0493C136.19 23.0815 136.227 23.1152 136.243 23.1323C136.261 23.1504 136.27 23.1639 136.274 23.1712C136.278 23.1787 136.283 23.1891 136.288 23.2053C136.293 23.2206 136.301 23.2537 136.301 23.3037H135.301H134.301C134.301 23.6381 134.409 23.9428 134.545 24.1771C134.679 24.4073 134.897 24.6664 135.214 24.829L135.671 23.9392ZM135.301 23.3037H136.301V18.8242H135.301H134.301V23.3037H135.301ZM135.301 18.8242H136.301C136.301 18.8985 136.273 19.1779 135.982 19.3808C135.664 19.6034 135.343 19.5195 135.214 19.4536L135.671 18.5638L136.127 17.674C135.795 17.5039 135.289 17.4252 134.837 17.7416C134.412 18.0382 134.301 18.5 134.301 18.8242H135.301ZM135.671 18.5638L135.214 19.4536C135.151 19.4214 135.115 19.3877 135.098 19.3707C135.08 19.3525 135.072 19.339 135.067 19.3317C135.063 19.3243 135.058 19.3138 135.053 19.2977C135.048 19.2824 135.04 19.2493 135.04 19.1993H136.04H137.04C137.04 18.8649 136.932 18.5601 136.796 18.3258C136.662 18.0956 136.444 17.8366 136.127 17.674L135.671 18.5638ZM136.04 19.1993H135.04V23.6787H136.04H137.04V19.1993H136.04ZM136.04 23.6787H135.04C135.04 23.6045 135.068 23.325 135.359 23.1222C135.677 22.8996 135.998 22.9835 136.127 23.0493L135.671 23.9392L135.214 24.829C135.546 24.999 136.052 25.0777 136.505 24.7614C136.929 24.4647 137.04 24.003 137.04 23.6787H136.04Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M134.921 23.1892L135.377 22.2993C135.44 22.3315 135.477 22.3652 135.493 22.3823C135.511 22.4004 135.52 22.4139 135.524 22.4212C135.528 22.4287 135.533 22.4391 135.538 22.4553C135.543 22.4706 135.551 22.5037 135.551 22.5537H134.551H133.551C133.551 22.8881 133.659 23.1928 133.795 23.4271C133.929 23.6573 134.147 23.9164 134.464 24.079L134.921 23.1892ZM134.551 22.5537H135.551V18.0742H134.551H133.551V22.5537H134.551ZM134.551 18.0742H135.551C135.551 18.1485 135.523 18.4279 135.232 18.6308C134.914 18.8534 134.593 18.7695 134.464 18.7036L134.921 17.8138L135.377 16.924C135.045 16.7539 134.539 16.6752 134.087 16.9916C133.662 17.2882 133.551 17.75 133.551 18.0742H134.551ZM134.921 17.8138L134.464 18.7036C134.401 18.6714 134.365 18.6377 134.348 18.6207C134.33 18.6025 134.322 18.589 134.317 18.5817C134.313 18.5743 134.308 18.5638 134.303 18.5477C134.298 18.5324 134.29 18.4993 134.29 18.4493H135.29H136.29C136.29 18.1149 136.182 17.8101 136.046 17.5758C135.912 17.3456 135.694 17.0866 135.377 16.924L134.921 17.8138ZM135.29 18.4493H134.29V22.9287H135.29H136.29V18.4493H135.29ZM135.29 22.9287H134.29C134.29 22.8545 134.318 22.575 134.609 22.3722C134.927 22.1496 135.248 22.2335 135.377 22.2993L134.921 23.1892L134.464 24.079C134.796 24.249 135.302 24.3277 135.755 24.0114C136.179 23.7147 136.29 23.253 136.29 22.9287H135.29Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
         mask="url(#path-31-inside-3_637_1592)"
       />
       <mask id="path-33-inside-4_637_1592" fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}>
-        <path d="M137.879 25.0695C137.675 24.9654 137.509 24.6789 137.509 24.4341V17.2617C137.509 17.0117 137.675 16.8971 137.879 17.0013C138.082 17.1055 138.248 17.392 138.248 17.6368V24.8091C138.248 25.0591 138.082 25.1737 137.879 25.0695Z" />
+        <path d="M137.129 24.3195C136.925 24.2154 136.759 23.9289 136.759 23.6841V16.5117C136.759 16.2617 136.925 16.1471 137.129 16.2513C137.332 16.3555 137.498 16.642 137.498 16.8868V24.0591C137.498 24.3091 137.332 24.4237 137.129 24.3195Z" />
       </mask>
       <path
-        d="M137.879 25.0695C137.675 24.9654 137.509 24.6789 137.509 24.4341V17.2617C137.509 17.0117 137.675 16.8971 137.879 17.0013C138.082 17.1055 138.248 17.392 138.248 17.6368V24.8091C138.248 25.0591 138.082 25.1737 137.879 25.0695Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M137.129 24.3195C136.925 24.2154 136.759 23.9289 136.759 23.6841V16.5117C136.759 16.2617 136.925 16.1471 137.129 16.2513C137.332 16.3555 137.498 16.642 137.498 16.8868V24.0591C137.498 24.3091 137.332 24.4237 137.129 24.3195Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
-        d="M137.879 25.0695L138.335 24.1797C138.398 24.2119 138.435 24.2456 138.451 24.2627C138.469 24.2808 138.478 24.2943 138.482 24.3016C138.486 24.3091 138.491 24.3195 138.496 24.3357C138.501 24.351 138.509 24.3841 138.509 24.4341H137.509H136.509C136.509 24.7684 136.617 25.0732 136.753 25.3075C136.887 25.5377 137.105 25.7967 137.422 25.9594L137.879 25.0695ZM137.509 24.4341H138.509V17.2617H137.509H136.509V24.4341H137.509ZM137.509 17.2617H138.509C138.509 17.336 138.481 17.6154 138.19 17.8183C137.872 18.0409 137.551 17.957 137.422 17.8911L137.879 17.0013L138.335 16.1115C138.003 15.9414 137.497 15.8627 137.045 16.1791C136.62 16.4757 136.509 16.9375 136.509 17.2617H137.509ZM137.879 17.0013L137.422 17.8911C137.359 17.8589 137.323 17.8252 137.306 17.8082C137.288 17.7901 137.28 17.7765 137.275 17.7693C137.271 17.7618 137.266 17.7513 137.261 17.7352C137.257 17.7199 137.248 17.6868 137.248 17.6368H138.248H139.248C139.248 17.3024 139.14 16.9976 139.004 16.7633C138.87 16.5331 138.652 16.2741 138.335 16.1115L137.879 17.0013ZM138.248 17.6368H137.248V24.8091H138.248H139.248V17.6368H138.248ZM138.248 24.8091H137.248C137.248 24.7349 137.277 24.4554 137.567 24.2525C137.885 24.0299 138.206 24.1138 138.335 24.1797L137.879 25.0695L137.422 25.9594C137.754 26.1294 138.26 26.2081 138.713 25.8918C139.137 25.5951 139.248 25.1334 139.248 24.8091H138.248Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M137.129 24.3195L137.585 23.4297C137.648 23.4619 137.685 23.4956 137.701 23.5127C137.719 23.5308 137.728 23.5443 137.732 23.5516C137.736 23.5591 137.741 23.5695 137.746 23.5857C137.751 23.601 137.759 23.6341 137.759 23.6841H136.759H135.759C135.759 24.0184 135.867 24.3232 136.003 24.5575C136.137 24.7877 136.355 25.0467 136.672 25.2094L137.129 24.3195ZM136.759 23.6841H137.759V16.5117H136.759H135.759V23.6841H136.759ZM136.759 16.5117H137.759C137.759 16.586 137.731 16.8654 137.44 17.0683C137.122 17.2909 136.801 17.207 136.672 17.1411L137.129 16.2513L137.585 15.3615C137.253 15.1914 136.747 15.1127 136.295 15.4291C135.87 15.7257 135.759 16.1875 135.759 16.5117H136.759ZM137.129 16.2513L136.672 17.1411C136.609 17.1089 136.573 17.0752 136.556 17.0582C136.538 17.0401 136.53 17.0265 136.525 17.0193C136.521 17.0118 136.516 17.0013 136.511 16.9852C136.507 16.9699 136.498 16.9368 136.498 16.8868H137.498H138.498C138.498 16.5524 138.39 16.2476 138.254 16.0133C138.12 15.7831 137.902 15.5241 137.585 15.3615L137.129 16.2513ZM137.498 16.8868H136.498V24.0591H137.498H138.498V16.8868H137.498ZM137.498 24.0591H136.498C136.498 23.9849 136.527 23.7054 136.817 23.5025C137.135 23.2799 137.456 23.3638 137.585 23.4297L137.129 24.3195L136.672 25.2094C137.004 25.3794 137.51 25.4581 137.963 25.1418C138.387 24.8451 138.498 24.3834 138.498 24.0591H137.498Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
         mask="url(#path-33-inside-4_637_1592)"
       />
       <mask id="path-35-inside-5_637_1592" fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}>
-        <path d="M133.462 22.814C133.258 22.7098 133.092 22.4233 133.092 22.1785V20.3867C133.092 20.1367 133.258 20.0221 133.462 20.1263C133.665 20.2305 133.831 20.517 133.831 20.7618V22.5535C133.831 22.8036 133.665 22.9182 133.462 22.814Z" />
+        <path d="M132.712 22.064C132.508 21.9598 132.342 21.6733 132.342 21.4285V19.6367C132.342 19.3867 132.508 19.2721 132.712 19.3763C132.915 19.4805 133.081 19.767 133.081 20.0118V21.8035C133.081 22.0536 132.915 22.1682 132.712 22.064Z" />
       </mask>
       <path
-        d="M133.462 22.814C133.258 22.7098 133.092 22.4233 133.092 22.1785V20.3867C133.092 20.1367 133.258 20.0221 133.462 20.1263C133.665 20.2305 133.831 20.517 133.831 20.7618V22.5535C133.831 22.8036 133.665 22.9182 133.462 22.814Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M132.712 22.064C132.508 21.9598 132.342 21.6733 132.342 21.4285V19.6367C132.342 19.3867 132.508 19.2721 132.712 19.3763C132.915 19.4805 133.081 19.767 133.081 20.0118V21.8035C133.081 22.0536 132.915 22.1682 132.712 22.064Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
-        d="M133.462 22.814L133.918 21.9242C133.981 21.9564 134.018 21.9901 134.034 22.0071C134.052 22.0252 134.061 22.0387 134.065 22.046C134.069 22.0535 134.074 22.0639 134.079 22.0801C134.084 22.0954 134.092 22.1285 134.092 22.1785H133.092H132.092C132.092 22.5129 132.2 22.8177 132.336 23.052C132.47 23.2822 132.688 23.5412 133.005 23.7038L133.462 22.814ZM133.092 22.1785H134.092V20.3867H133.092H132.092V22.1785H133.092ZM133.092 20.3867H134.092C134.092 20.461 134.064 20.7404 133.773 20.9433C133.455 21.1659 133.134 21.082 133.005 21.0161L133.462 20.1263L133.918 19.2365C133.586 19.0664 133.08 18.9877 132.628 19.3041C132.203 19.6007 132.092 20.0625 132.092 20.3867H133.092ZM133.462 20.1263L133.005 21.0161C132.942 20.9839 132.906 20.9502 132.889 20.9332C132.871 20.915 132.863 20.9015 132.858 20.8942C132.854 20.8868 132.849 20.8763 132.844 20.8602C132.84 20.8449 132.831 20.8118 132.831 20.7618H133.831H134.831C134.831 20.4274 134.723 20.1226 134.587 19.8883C134.453 19.6581 134.235 19.3991 133.918 19.2365L133.462 20.1263ZM133.831 20.7618H132.831V22.5535H133.831H134.831V20.7618H133.831ZM133.831 22.5535H132.831C132.831 22.4793 132.86 22.1999 133.15 21.997C133.468 21.7744 133.789 21.8583 133.918 21.9242L133.462 22.814L133.005 23.7038C133.337 23.8738 133.843 23.9525 134.296 23.6362C134.72 23.3395 134.831 22.8778 134.831 22.5535H133.831Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M132.712 22.064L133.168 21.1742C133.231 21.2064 133.268 21.2401 133.284 21.2571C133.302 21.2752 133.311 21.2887 133.315 21.296C133.319 21.3035 133.324 21.3139 133.329 21.3301C133.334 21.3454 133.342 21.3785 133.342 21.4285H132.342H131.342C131.342 21.7629 131.45 22.0677 131.586 22.302C131.72 22.5322 131.938 22.7912 132.255 22.9538L132.712 22.064ZM132.342 21.4285H133.342V19.6367H132.342H131.342V21.4285H132.342ZM132.342 19.6367H133.342C133.342 19.711 133.314 19.9904 133.023 20.1933C132.705 20.4159 132.384 20.332 132.255 20.2661L132.712 19.3763L133.168 18.4865C132.836 18.3164 132.33 18.2377 131.878 18.5541C131.453 18.8507 131.342 19.3125 131.342 19.6367H132.342ZM132.712 19.3763L132.255 20.2661C132.192 20.2339 132.156 20.2002 132.139 20.1832C132.121 20.165 132.113 20.1515 132.108 20.1442C132.104 20.1368 132.099 20.1263 132.094 20.1102C132.09 20.0949 132.081 20.0618 132.081 20.0118H133.081H134.081C134.081 19.6774 133.973 19.3726 133.837 19.1383C133.703 18.9081 133.485 18.6491 133.168 18.4865L132.712 19.3763ZM133.081 20.0118H132.081V21.8035H133.081H134.081V20.0118H133.081ZM133.081 21.8035H132.081C132.081 21.7293 132.11 21.4499 132.4 21.247C132.718 21.0244 133.039 21.1083 133.168 21.1742L132.712 22.064L132.255 22.9538C132.587 23.1238 133.093 23.2025 133.546 22.8862C133.97 22.5895 134.081 22.1278 134.081 21.8035H133.081Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
         mask="url(#path-35-inside-5_637_1592)"
       />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M33.8041 22.6582C32.6686 22.0801 31.2102 22.127 29.6111 22.9447C26.0015 24.7834 23.0794 29.8358 23.0794 34.2215C23.0794 36.6696 23.9909 38.3989 25.4233 39.1281L23.1003 37.9457C21.6679 37.2165 20.7563 35.4872 20.7563 33.0391C20.7563 28.6482 23.6836 23.5958 27.288 21.7624C28.8819 20.9498 30.3455 20.8977 31.481 21.4759L33.8041 22.6582Z"
+        d="M33.0541 21.9082C31.9186 21.3301 30.4602 21.377 28.8611 22.1947C25.2515 24.0334 22.3294 29.0858 22.3294 33.4715C22.3294 35.9196 23.2409 37.6489 24.6733 38.3781L22.3503 37.1957C20.9179 36.4665 20.0063 34.7372 20.0063 32.2891C20.0063 27.8982 22.9336 22.8458 26.538 21.0124C28.1319 20.1998 29.5955 20.1477 30.731 20.7259L33.0541 21.9082Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.5"
         strokeLinecap="round"
         strokeLinejoin="round"
@@ -301,9 +307,9 @@ export function ArchivedWorkItemVerticalStackIllustration({ className }: TIllust
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M33.8042 22.6575C35.2366 23.3867 36.1482 25.116 36.1482 27.5641C36.1482 31.955 33.2209 37.0074 29.6165 38.8409C28.0226 39.6534 26.559 39.7055 25.4235 39.1273C23.9911 38.3981 23.0796 36.6688 23.0796 34.2208C23.0796 29.8299 26.0069 24.7775 29.6113 22.944C31.2051 22.1314 32.6688 22.0794 33.8042 22.6575Z"
+        d="M33.0542 21.9075C34.4866 22.6367 35.3982 24.366 35.3982 26.8141C35.3982 31.205 32.4709 36.2574 28.8665 38.0909C27.2726 38.9034 25.809 38.9555 24.6735 38.3773C23.2411 37.6481 22.3296 35.9188 22.3296 33.4708C22.3296 29.0799 25.2569 24.0275 28.8613 22.194C30.4551 21.3814 31.9188 21.3294 33.0542 21.9075Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.5"
         strokeLinecap="round"
         strokeLinejoin="round"
@@ -311,20 +317,20 @@ export function ArchivedWorkItemVerticalStackIllustration({ className }: TIllust
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M30.658 29.1273C30.7101 29.2367 30.8247 29.2628 30.9601 29.1794C31.1424 29.0648 31.2935 28.7836 31.2935 28.5544V28.1325C31.2935 27.9971 31.2414 27.8981 31.1528 27.8773C31.0643 27.8564 30.9497 27.9137 30.8455 28.0283L28.6891 30.4451C28.5589 30.591 28.4756 30.7941 28.4756 30.966V33.8672C28.4756 34.0131 28.5381 34.1068 28.6371 34.1173C28.736 34.1277 28.861 34.0548 28.96 33.9245L29.2673 33.5287C29.4288 33.3203 29.4913 33.0286 29.4079 32.8776C29.3506 32.7786 29.2465 32.7682 29.1371 32.8307V30.8254L30.6528 29.1221L30.658 29.1273Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M29.908 28.3773C29.9601 28.4867 30.0747 28.5128 30.2101 28.4294C30.3924 28.3148 30.5435 28.0336 30.5435 27.8044V27.3825C30.5435 27.2471 30.4914 27.1481 30.4028 27.1273C30.3143 27.1064 30.1997 27.1637 30.0955 27.2783L27.9391 29.6951C27.8089 29.841 27.7256 30.0441 27.7256 30.216V33.1172C27.7256 33.2631 27.7881 33.3568 27.8871 33.3673C27.986 33.3777 28.111 33.3048 28.21 33.1745L28.5173 32.7787C28.6788 32.5703 28.7413 32.2786 28.6579 32.1276C28.6006 32.0286 28.4965 32.0182 28.3871 32.0807V30.0754L29.9028 28.3721L29.908 28.3773Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M29.3299 28.7328C29.382 28.8422 29.4966 28.8682 29.632 28.7849C29.8143 28.6703 29.9654 28.389 29.9654 28.1599V27.738C29.9654 27.6025 29.9133 27.5036 29.8247 27.4827C29.7362 27.4619 29.6216 27.5192 29.5174 27.6338L27.361 30.0506C27.2308 30.1965 27.1475 30.3996 27.1475 30.5715V33.4727C27.1475 33.6185 27.21 33.7123 27.3089 33.7227C27.4079 33.7331 27.5329 33.6602 27.6319 33.53L27.9392 33.1341C28.1006 32.9258 28.1632 32.6341 28.0798 32.4831C28.0225 32.3841 27.9183 32.3737 27.809 32.4362V30.4308L29.3247 28.7276L29.3299 28.7328Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M28.5799 27.9828C28.632 28.0922 28.7466 28.1182 28.882 28.0349C29.0643 27.9203 29.2154 27.639 29.2154 27.4099V26.988C29.2154 26.8525 29.1633 26.7536 29.0747 26.7327C28.9862 26.7119 28.8716 26.7692 28.7674 26.8838L26.611 29.3006C26.4808 29.4465 26.3975 29.6496 26.3975 29.8215V32.7227C26.3975 32.8685 26.46 32.9623 26.5589 32.9727C26.6579 32.9831 26.7829 32.9102 26.8819 32.78L27.1892 32.3841C27.3506 32.1758 27.4132 31.8841 27.3298 31.7331C27.2725 31.6341 27.1683 31.6237 27.059 31.6862V29.6808L28.5747 27.9776L28.5799 27.9828Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M32.7627 31.3306C32.7627 31.5025 32.6794 31.7108 32.5492 31.8515L30.398 34.2631C30.2938 34.3777 30.1792 34.435 30.0907 34.4141C30.0021 34.3933 29.9448 34.2995 29.9448 34.1641V31.2629C29.9448 31.091 30.0282 30.8826 30.1584 30.742L32.3148 28.3252C32.4189 28.2106 32.5335 28.1533 32.6221 28.1741C32.7106 28.195 32.7679 28.2887 32.7679 28.4242V31.3306H32.7627ZM32.1012 29.4555L30.6115 31.1275V33.1432L32.1012 31.4712V29.4555Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M32.0127 30.5806C32.0127 30.7525 31.9294 30.9608 31.7992 31.1015L29.648 33.5131C29.5438 33.6277 29.4292 33.685 29.3407 33.6641C29.2521 33.6433 29.1948 33.5495 29.1948 33.4141V30.5129C29.1948 30.341 29.2782 30.1326 29.4084 29.992L31.5648 27.5752C31.6689 27.4606 31.7835 27.4033 31.8721 27.4241C31.9606 27.445 32.0179 27.5387 32.0179 27.6742V30.5806H32.0127ZM31.3512 28.7055L29.8615 30.3775V32.3932L31.3512 30.7212V28.7055Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
     </svg>
   );
diff --git a/packages/propel/src/empty-state/assets/vertical-stack/changelog.tsx b/packages/propel/src/empty-state/assets/vertical-stack/changelog.tsx
index b36d137d3..408bc10c6 100644
--- a/packages/propel/src/empty-state/assets/vertical-stack/changelog.tsx
+++ b/packages/propel/src/empty-state/assets/vertical-stack/changelog.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper";
 import type { TIllustrationAssetProps } from "../helper";
 
@@ -96,7 +102,7 @@ export function ChangelogVerticalStackIllustration({ className, ...rest }: TIllu
       />
       <path
         d="M94.5717 1.39958L99.5854 3.95427L114.672 14.6232V62.3576C114.672 66.4147 111.971 71.0796 108.634 72.7789L72.4235 91.2301C71.5964 91.6521 70.8086 91.8491 70.0939 91.8491C69.5312 91.8491 69.0135 91.7253 68.5521 91.4889L63.5384 88.9342C62.216 88.259 61.3776 86.6665 61.3776 84.4045V25.6579C61.3776 21.6008 64.0786 16.9359 67.4098 15.2365L94.5661 1.39958M94.5717 0.27417C94.3972 0.27417 94.2228 0.313559 94.0596 0.397965L66.9034 14.2349C63.1726 16.1369 60.2522 21.1506 60.2522 25.6579V84.4045C60.2522 87.021 61.2651 89.0412 63.032 89.9359L68.0457 92.4906C68.6703 92.8113 69.3624 92.9689 70.0995 92.9689C71.0168 92.9689 71.9734 92.7213 72.9412 92.2261L109.151 73.7749C112.882 71.873 115.803 66.8593 115.803 62.352V14.6288C115.803 14.2631 115.628 13.9198 115.324 13.7116L100.238 3.04269C100.193 3.00892 100.148 2.98079 100.097 2.95828L95.0837 0.403592C94.9206 0.319186 94.7461 0.279797 94.5717 0.279797V0.27417Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
       />
       <path
         d="M99.5855 3.95386L72.4292 17.7908C69.098 19.4902 66.397 24.155 66.397 28.2122V86.9587C66.397 89.2208 67.2355 90.8133 68.5578 91.4885L63.5441 88.9338C62.2217 88.2586 61.3833 86.6661 61.3833 84.4041V25.6575C61.3833 21.6003 64.0843 16.9355 67.4155 15.2361L94.5717 1.39917L99.5855 3.95386Z"
diff --git a/packages/propel/src/empty-state/assets/vertical-stack/constant.tsx b/packages/propel/src/empty-state/assets/vertical-stack/constant.tsx
index 2f16f116d..c8d6dba62 100644
--- a/packages/propel/src/empty-state/assets/vertical-stack/constant.tsx
+++ b/packages/propel/src/empty-state/assets/vertical-stack/constant.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import {
   ArchivedCycleVerticalStackIllustration,
   ArchivedModuleVerticalStackIllustration,
diff --git a/packages/propel/src/empty-state/assets/vertical-stack/customer.tsx b/packages/propel/src/empty-state/assets/vertical-stack/customer.tsx
index c89a00d15..0495d970c 100644
--- a/packages/propel/src/empty-state/assets/vertical-stack/customer.tsx
+++ b/packages/propel/src/empty-state/assets/vertical-stack/customer.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper";
 import type { TIllustrationAssetProps } from "../helper";
 
@@ -13,17 +19,17 @@ export function CustomerVerticalStackIllustration({ className }: TIllustrationAs
     >
       <g opacity="0.2">
         <path
-          d="M16.4846 137.74C16.4846 139.667 17.9271 141.589 20.8069 143.062L57.8876 161.956C63.6523 164.892 72.9951 164.892 78.7598 161.956L156.678 122.256C159.558 120.788 161 118.866 161 116.939V123.092C161 125.018 159.558 126.94 156.678 128.408L78.7598 168.108C72.9951 171.044 63.6523 171.044 57.8876 168.108L20.8069 149.214C17.922 147.746 16.4846 145.819 16.4846 143.892V137.74Z"
+          d="M15.6846 137.248C15.6846 139.175 17.1271 141.096 20.0069 142.569L57.0876 161.464C62.8523 164.4 72.1951 164.4 77.9598 161.464L155.878 121.763C158.758 120.295 160.2 118.374 160.2 116.447V122.599C160.2 124.526 158.758 126.448 155.878 127.916L77.9598 167.616C72.1951 170.552 62.8523 170.552 57.0876 167.616L20.0069 148.722C17.122 147.254 15.6846 145.327 15.6846 143.4V137.248Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.4"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
         <path
-          d="M16.4846 137.74C16.4846 135.813 17.9271 133.892 20.8069 132.424L98.7248 92.7234C104.49 89.7875 113.832 89.7875 119.597 92.7234L156.678 111.618C159.563 113.086 161 115.013 161 116.939C161 118.866 159.558 120.787 156.678 122.255L78.7598 161.956C72.9951 164.892 63.6523 164.892 57.8876 161.956L20.8069 143.061C17.922 141.593 16.4846 139.667 16.4846 137.74Z"
+          d="M15.6846 137.248C15.6846 135.321 17.1271 133.4 20.0069 131.932L97.9248 92.2312C103.69 89.2953 113.032 89.2953 118.797 92.2312L155.878 111.126C158.763 112.594 160.2 114.52 160.2 116.447C160.2 118.374 158.758 120.295 155.878 121.763L77.9598 161.464C72.1951 164.4 62.8523 164.4 57.0876 161.464L20.0069 142.569C17.122 141.101 15.6846 139.175 15.6846 137.248Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.4"
           strokeLinecap="round"
           strokeLinejoin="round"
@@ -31,32 +37,212 @@ export function CustomerVerticalStackIllustration({ className }: TIllustrationAs
       </g>
       <g opacity="0.6">
         <path
-          d="M16.4846 118.307C16.4846 120.233 17.9271 122.155 20.8069 123.628L57.8876 142.523C63.6523 145.458 72.9951 145.458 78.7598 142.523L156.678 102.822C159.558 101.354 161 99.4325 161 97.5059V103.658C161 105.585 159.558 107.506 156.678 108.974L78.7598 148.675C72.9951 151.61 63.6523 151.61 57.8876 148.675L20.8069 129.78C17.922 128.312 16.4846 126.385 16.4846 124.459V118.307Z"
+          d="M15.6846 117.814C15.6846 119.741 17.1271 121.663 20.0069 123.136L57.0876 142.03C62.8523 144.966 72.1951 144.966 77.9598 142.03L155.878 102.33C158.758 100.862 160.2 98.9403 160.2 97.0137V103.166C160.2 105.092 158.758 107.014 155.878 108.482L77.9598 148.182C72.1951 151.118 62.8523 151.118 57.0876 148.182L20.0069 129.288C17.122 127.82 15.6846 125.893 15.6846 123.967V117.814Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.4"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
         <path
-          d="M16.4846 118.306C16.4846 116.38 17.9271 114.458 20.8069 112.99L98.7248 73.2898C104.49 70.3539 113.832 70.3539 119.597 73.2898L156.678 92.1843C159.563 93.6522 161 95.579 161 97.5057C161 99.4323 159.558 101.354 156.678 102.822L78.7598 142.522C72.9951 145.458 63.6523 145.458 57.8876 142.522L20.8069 123.628C17.922 122.16 16.4846 120.233 16.4846 118.306Z"
+          d="M15.6846 117.814C15.6846 115.888 17.1271 113.966 20.0069 112.498L97.9248 72.7976C103.69 69.8617 113.032 69.8617 118.797 72.7976L155.878 91.6921C158.763 93.16 160.2 95.0868 160.2 97.0135C160.2 98.9401 158.758 100.862 155.878 102.33L77.9598 142.03C72.1951 144.966 62.8523 144.966 57.0876 142.03L20.0069 123.136C17.122 121.668 15.6846 119.741 15.6846 117.814Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.4"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
       </g>
       <path
-        d="M16.4846 98.8712C16.4846 100.798 17.9271 102.719 20.8069 104.192L57.8876 123.087C63.6523 126.023 72.9951 126.023 78.7598 123.087L156.678 83.3865C159.558 81.9185 161 79.997 161 78.0703V84.2224C161 86.1491 159.558 88.0706 156.678 89.5386L78.7598 129.239C72.9951 132.175 63.6523 132.175 57.8876 129.239L20.8069 110.345C17.922 108.877 16.4846 106.95 16.4846 105.023V98.8712Z"
+        d="M15.6846 98.379C15.6846 100.306 17.1271 102.227 20.0069 103.7L57.0876 122.595C62.8523 125.531 72.1951 125.531 77.9598 122.595L155.878 82.8943C158.758 81.4263 160.2 79.5048 160.2 77.5781V83.7302C160.2 85.6569 158.758 87.5784 155.878 89.0464L77.9598 128.747C72.1951 131.683 62.8523 131.683 57.0876 128.747L20.0069 109.852C17.122 108.384 15.6846 106.458 15.6846 104.531V98.379Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M15.6846 98.3788C15.6846 96.4522 17.1271 94.5306 20.0069 93.0627L97.9248 53.3621C103.69 50.4262 113.032 50.4262 118.797 53.3621L155.878 72.2567C158.763 73.7246 160.2 75.6513 160.2 77.5779C160.2 79.5046 158.758 81.4261 155.878 82.8941L77.9598 122.595C72.1951 125.531 62.8523 125.531 57.0876 122.595L20.0069 103.7C17.122 102.232 15.6846 100.306 15.6846 98.3788Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M63.3877 98.7299C63.1583 98.7299 62.9391 98.684 62.7353 98.6025C62.6996 98.5923 62.6588 98.5821 62.6231 98.5617L58.0817 96.2477C57.4497 95.9266 57.0827 95.213 57.0827 94.2905C57.0827 92.7461 58.0868 91.0233 59.3662 90.3709L61.094 89.4891V37.1734L60.0848 36.6586C59.4528 36.3375 59.0909 35.624 59.0909 34.6963C59.0909 33.1519 60.095 31.4342 61.3744 30.7817L93.46 14.4357C93.8015 14.2624 94.1379 14.1758 94.4692 14.1758C94.7343 14.1758 94.9891 14.2369 95.2134 14.349L99.7548 16.6631V16.6733C100.382 16.9944 100.749 17.708 100.749 18.6204C100.749 20.0526 99.8873 21.6326 98.7405 22.3768V26.3831L109.505 20.8987C109.847 20.7254 110.183 20.6387 110.509 20.6387C110.775 20.6387 111.029 20.7 111.254 20.8121L115.795 23.126V23.1362C116.422 23.4573 116.789 24.1761 116.789 25.0884C116.789 26.5156 115.928 28.0957 114.786 28.8399V64.4934L117.798 66.0276V66.0378C118.42 66.3589 118.792 67.0775 118.792 67.9899C118.792 69.5343 117.788 71.252 116.509 71.9044L64.3714 98.47C64.035 98.6382 63.7037 98.7248 63.3826 98.7248L63.3877 98.7299ZM79.4178 76.1706C79.0304 76.3694 78.694 76.9606 78.694 77.4448V80.5234L81.1507 79.2696V75.2837L79.4178 76.1655V76.1706Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+      />
+      <path
+        d="M94.4692 14.6866C94.6578 14.6866 94.8311 14.7274 94.984 14.8038L99.5255 17.1179C99.4949 17.1026 99.4592 17.0975 99.4286 17.0822C99.923 17.2759 100.244 17.8162 100.244 18.6215C100.244 19.9722 99.3471 21.5217 98.2359 22.0875V27.215L109.74 21.3534C110.015 21.2158 110.275 21.1496 110.51 21.1496C110.698 21.1496 110.871 21.1903 111.024 21.2668L115.566 23.5809C115.535 23.5656 115.499 23.5604 115.469 23.5451C115.958 23.7388 116.284 24.2842 116.284 25.0845C116.284 26.4301 115.387 27.9796 114.281 28.5453V64.8054L117.574 66.4823C117.543 66.467 117.508 66.4619 117.477 66.4466C117.966 66.6403 118.288 67.1857 118.288 67.9859C118.288 69.3315 117.39 70.881 116.284 71.4468L64.1472 98.0124C63.877 98.15 63.6222 98.2163 63.3877 98.2163C63.1736 98.2163 62.9748 98.1602 62.8015 98.0582C62.8219 98.0684 62.8372 98.0888 62.8576 98.099L58.3162 95.785C57.8778 95.5607 57.5975 95.0306 57.5975 94.2814C57.5975 92.9307 58.4997 91.3812 59.6057 90.8154L61.6089 89.796V36.8586L60.3193 36.201C59.881 35.9768 59.6006 35.4467 59.6006 34.6924C59.6006 33.3467 60.4977 31.7972 61.6038 31.2315L93.6894 14.8853C93.9646 14.7426 94.2246 14.6764 94.4641 14.6764M98.8934 17.0108C98.924 17.0108 98.9495 17.0056 98.975 17.0056C98.9495 17.0056 98.9189 17.0057 98.8934 17.0108ZM99.2094 17.021C99.24 17.021 99.2757 17.0312 99.3063 17.0414C99.2757 17.0312 99.2451 17.0261 99.2094 17.021C99.1789 17.021 99.1432 17.0108 99.1075 17.0108C99.1432 17.0108 99.1738 17.0159 99.2094 17.021ZM98.4296 17.1179C98.3634 17.1434 98.3022 17.1688 98.2359 17.2045C98.3022 17.1688 98.3685 17.1434 98.4296 17.1179ZM114.944 23.4738C114.893 23.4789 114.842 23.4892 114.786 23.4994C114.837 23.4892 114.893 23.4789 114.944 23.4738C114.969 23.4738 114.995 23.4738 115.02 23.4687C114.995 23.4687 114.969 23.4687 114.944 23.4738ZM115.26 23.4891C115.224 23.4891 115.194 23.4789 115.158 23.4789C115.194 23.4789 115.229 23.4841 115.26 23.4891ZM114.475 23.5809C114.536 23.5554 114.602 23.5349 114.664 23.5196C114.602 23.5349 114.541 23.5554 114.475 23.5809ZM89.6424 34.5292C89.6679 34.5496 89.6984 34.5699 89.7239 34.5954C89.6984 34.5699 89.673 34.5496 89.6424 34.5292C89.6169 34.5088 89.5863 34.4884 89.5557 34.4731C89.5863 34.4884 89.6118 34.5088 89.6424 34.5292ZM89.9584 34.886C89.9176 34.8197 89.8768 34.7535 89.831 34.6975C89.8768 34.7535 89.9227 34.8197 89.9584 34.886ZM90.0807 35.1408C90.096 35.1918 90.1113 35.2428 90.1266 35.2938C90.1113 35.2428 90.096 35.1867 90.0807 35.1408C90.0654 35.1001 90.0552 35.0593 90.0348 35.0236C90.0501 35.0593 90.0654 35.1001 90.0807 35.1408ZM90.2183 35.9309C90.2183 35.7525 90.1979 35.5894 90.1725 35.4365C90.203 35.5894 90.2183 35.7525 90.2183 35.9309ZM79.6115 39.6364C79.6369 39.6568 79.6624 39.6771 79.693 39.7026C79.6675 39.6771 79.642 39.6568 79.6115 39.6364C79.586 39.616 79.5554 39.5956 79.5299 39.5803C79.5605 39.5956 79.586 39.616 79.6115 39.6364ZM79.8714 39.8964C79.8918 39.927 79.9122 39.9575 79.9326 39.9932C79.9122 39.9626 79.8918 39.927 79.8714 39.8964ZM85.0653 40.5539C85.0653 40.5539 85.1111 40.5691 85.1366 40.5793C85.1111 40.5742 85.0856 40.5641 85.0653 40.5539ZM80.1925 41.0381C80.1925 40.8597 80.1721 40.6966 80.1467 40.5437C80.1772 40.6966 80.1925 40.8597 80.1925 41.0381ZM85.8247 40.5641C85.8247 40.5641 85.7839 40.5743 85.7635 40.5743C85.7432 40.5743 85.7228 40.5793 85.7024 40.5844C85.7228 40.5844 85.7432 40.5794 85.7635 40.5743C85.7839 40.5692 85.8043 40.5692 85.8247 40.5641ZM85.3354 40.6099C85.3762 40.6099 85.4119 40.6201 85.4526 40.6201H85.4628C85.4628 40.6201 85.4577 40.6201 85.4526 40.6201C85.4119 40.6201 85.3711 40.615 85.3303 40.6099C85.3303 40.6099 85.3303 40.6099 85.3252 40.6099C85.3252 40.6099 85.3252 40.6099 85.3303 40.6099M105.693 40.9667C105.693 40.9667 105.703 40.9769 105.708 40.9769C105.703 40.9769 105.698 40.9667 105.693 40.9667ZM105.932 41.1961C105.932 41.1961 105.937 41.2063 105.943 41.2063C105.943 41.2063 105.937 41.1961 105.932 41.1961C105.932 41.1961 105.927 41.191 105.922 41.1859C105.922 41.1859 105.927 41.191 105.932 41.1961ZM106.259 42.1084C106.233 41.8434 106.167 41.6192 106.075 41.4255C106.182 41.6599 106.238 41.9147 106.259 42.1084ZM106.279 42.3583C106.279 42.3939 106.279 42.4194 106.279 42.4194C106.279 43.5968 105.596 44.9271 104.673 45.6254C105.591 44.9322 106.279 43.5968 106.279 42.4194V42.3939C106.279 42.3939 106.279 42.3734 106.279 42.3632M89.7188 44.3512C89.6679 44.3053 89.6118 44.2645 89.5557 44.2288C89.6169 44.2645 89.6679 44.3053 89.7188 44.3512ZM89.9125 44.5754C89.9278 44.6009 89.9431 44.6213 89.9533 44.6468C89.938 44.6213 89.9227 44.6009 89.9125 44.5754C89.887 44.5346 89.8565 44.4938 89.8259 44.4582C89.8565 44.4938 89.8819 44.5346 89.9125 44.5754ZM90.1266 45.0545C90.1011 44.9627 90.0756 44.8659 90.0348 44.7843C90.0705 44.8659 90.1011 44.9576 90.1266 45.0545ZM90.2183 45.6916C90.2183 45.5132 90.1979 45.3501 90.1725 45.1972C90.203 45.3501 90.2183 45.5132 90.2183 45.6916ZM75.7989 45.6763C75.7989 45.6763 75.7581 45.6865 75.7377 45.6865C75.7174 45.6865 75.697 45.6916 75.6766 45.6967C75.697 45.6967 75.7174 45.6916 75.7377 45.6865C75.7581 45.6865 75.7785 45.6814 75.7989 45.6763ZM75.3708 45.7222C75.3708 45.7222 75.4115 45.7222 75.4268 45.7222C75.4268 45.7222 75.4319 45.7222 75.437 45.7222C75.437 45.7222 75.4319 45.7222 75.4268 45.7222C75.4064 45.7222 75.3861 45.7222 75.3708 45.7222C75.3504 45.7222 75.3249 45.7222 75.3045 45.7171C75.3249 45.7171 75.3504 45.7171 75.3708 45.7222ZM103.124 46.0281C103.124 46.0281 103.175 46.0434 103.2 46.0485C103.175 46.0434 103.149 46.0332 103.124 46.0281C103.098 46.0179 103.068 46.0077 103.042 45.9975C103.068 46.0077 103.093 46.0179 103.124 46.0281ZM103.771 46.0536C103.771 46.0536 103.741 46.0535 103.725 46.0586C103.741 46.0586 103.756 46.0587 103.771 46.0536C103.807 46.0536 103.838 46.0434 103.873 46.0332C103.838 46.0434 103.802 46.0485 103.771 46.0536ZM103.435 46.0841C103.435 46.0841 103.481 46.0841 103.506 46.0841C103.511 46.0841 103.522 46.0841 103.527 46.0841C103.522 46.0841 103.516 46.0841 103.506 46.0841C103.481 46.0841 103.46 46.0841 103.435 46.0841C103.404 46.0841 103.379 46.079 103.348 46.0739C103.379 46.0739 103.404 46.079 103.435 46.0841ZM79.693 49.4635C79.6421 49.4176 79.586 49.3717 79.5248 49.336C79.586 49.3717 79.637 49.4125 79.693 49.4635ZM79.8612 49.6469C79.8867 49.6826 79.9071 49.7233 79.9326 49.759C79.9071 49.7182 79.8867 49.6826 79.8612 49.6469ZM80.0753 50.07C80.0855 50.1006 80.0957 50.1311 80.1008 50.1668C80.0906 50.1362 80.0855 50.1057 80.0753 50.07ZM85.0653 50.3146C85.0653 50.3146 85.1162 50.3299 85.1417 50.3401C85.1162 50.335 85.0907 50.3248 85.0653 50.3146ZM80.1925 50.8039C80.1925 50.6255 80.1721 50.4624 80.1467 50.3095C80.1772 50.4624 80.1925 50.6255 80.1925 50.8039ZM85.6973 50.3452C85.7381 50.335 85.7788 50.335 85.8247 50.3248C85.7788 50.335 85.7381 50.3401 85.6973 50.3452ZM85.3864 50.3707C85.3864 50.3707 85.4322 50.3707 85.4577 50.3707C85.4577 50.3707 85.4628 50.3707 85.4679 50.3707C85.4679 50.3707 85.4628 50.3707 85.4577 50.3707C85.4322 50.3707 85.4119 50.3707 85.3864 50.3707C85.366 50.3707 85.3507 50.3707 85.3303 50.3656C85.3507 50.3656 85.366 50.3656 85.3864 50.3707ZM105.739 50.7733C105.739 50.7733 105.774 50.8039 105.79 50.8192C105.774 50.8039 105.754 50.7886 105.739 50.7733C105.698 50.7427 105.657 50.7122 105.616 50.6867C105.662 50.7122 105.703 50.7427 105.739 50.7733ZM105.983 51.0384C105.983 51.0384 106.014 51.0894 106.029 51.1149C106.014 51.0894 105.999 51.0638 105.983 51.0384C105.958 50.9925 105.927 50.9517 105.892 50.916C105.922 50.9517 105.953 50.9976 105.983 51.0384ZM106.177 51.4614C106.187 51.492 106.192 51.5226 106.203 51.5481C106.197 51.5175 106.187 51.4869 106.177 51.4614ZM106.279 52.1598C106.279 53.5054 105.397 55.0395 104.291 55.6206C104.286 55.6206 104.276 55.6257 104.271 55.6308H104.261C104.261 55.6308 104.281 55.6257 104.291 55.6206C105.392 55.0446 106.279 53.5105 106.279 52.17V52.1445C106.279 51.9661 106.259 51.803 106.233 51.6501C106.264 51.8081 106.279 51.9763 106.279 52.1598ZM89.7188 54.117C89.6679 54.0711 89.6118 54.0252 89.5557 53.9946C89.6169 54.0303 89.6679 54.0711 89.7188 54.117ZM89.9584 54.4075C89.9176 54.3413 89.8768 54.2749 89.831 54.2189C89.8768 54.2749 89.9227 54.3413 89.9584 54.4075ZM90.1266 54.8153C90.1011 54.7185 90.0756 54.6267 90.0348 54.5452C90.0705 54.6267 90.1011 54.7236 90.1266 54.8153ZM90.2183 55.4524C90.2183 55.274 90.1979 55.111 90.1725 54.958C90.203 55.111 90.2183 55.274 90.2183 55.4524ZM75.0497 55.4269C75.0497 55.4269 75.0904 55.4422 75.1108 55.4473C75.0904 55.4422 75.07 55.4371 75.0497 55.4269C75.0293 55.4218 75.0089 55.4116 74.9885 55.4014C75.0089 55.4116 75.0293 55.4167 75.0497 55.4269ZM75.7989 55.432C75.7989 55.432 75.7581 55.4422 75.7428 55.4422C75.7174 55.4422 75.697 55.4473 75.6715 55.4524C75.697 55.4524 75.7174 55.4473 75.7428 55.4422C75.7632 55.4422 75.7785 55.4371 75.7989 55.432ZM75.3555 55.4831C75.3555 55.4831 75.4014 55.4831 75.4268 55.4831C75.4014 55.4831 75.381 55.4831 75.3555 55.4831C75.3351 55.4831 75.3198 55.483 75.2994 55.478C75.3198 55.478 75.3351 55.478 75.3555 55.4831ZM104.266 55.641C104.266 55.641 104.22 55.6563 104.199 55.6665C104.22 55.6563 104.24 55.6512 104.261 55.641H104.266ZM103.2 55.8092C103.144 55.7939 103.093 55.7786 103.047 55.7582C103.098 55.7786 103.149 55.799 103.2 55.8092ZM103.44 55.8449C103.44 55.8449 103.481 55.8449 103.506 55.8449C103.506 55.8449 103.522 55.8449 103.527 55.8449C103.522 55.8449 103.511 55.8449 103.506 55.8449C103.486 55.8449 103.46 55.8449 103.44 55.8449C103.409 55.8449 103.384 55.8398 103.353 55.8347C103.384 55.8347 103.409 55.8398 103.44 55.8449ZM79.6115 59.1529C79.642 59.1733 79.6675 59.1987 79.693 59.2191C79.6675 59.1936 79.6369 59.1733 79.6115 59.1529C79.586 59.1325 79.5605 59.1171 79.5299 59.0967C79.5554 59.112 79.586 59.1325 79.6115 59.1529ZM79.9326 59.5147C79.8918 59.4485 79.8561 59.3873 79.8051 59.3312C79.851 59.3873 79.8918 59.4485 79.9326 59.5147ZM85.0653 60.0753C85.0653 60.0753 85.1162 60.0907 85.1417 60.1008C85.1162 60.0957 85.0907 60.0855 85.0653 60.0753C85.05 60.0702 85.0347 60.0652 85.0194 60.055C85.0347 60.0602 85.05 60.0651 85.0653 60.0753ZM80.1925 60.5545C80.1925 60.3762 80.1721 60.2131 80.1467 60.0653C80.1772 60.2182 80.1925 60.3812 80.1925 60.5545ZM85.8247 60.0855C85.7839 60.0957 85.7432 60.1008 85.7024 60.1059C85.7432 60.0958 85.7839 60.0957 85.8247 60.0855ZM85.3966 60.1366C85.3966 60.1366 85.4373 60.1366 85.4577 60.1366C85.4577 60.1366 85.4628 60.1366 85.4679 60.1366C85.4679 60.1366 85.4628 60.1366 85.4577 60.1366C85.4373 60.1366 85.417 60.1366 85.3966 60.1366C85.3762 60.1366 85.3507 60.1366 85.3303 60.1315C85.3507 60.1315 85.3762 60.1315 85.3966 60.1366ZM105.749 60.5392C105.749 60.5392 105.779 60.5648 105.79 60.575C105.774 60.5597 105.759 60.5494 105.749 60.5392C105.708 60.5036 105.662 60.473 105.616 60.4424C105.662 60.4679 105.708 60.5036 105.749 60.5392ZM106.029 60.8756C105.988 60.8042 105.943 60.7329 105.892 60.6769C105.943 60.738 105.983 60.8042 106.029 60.8756ZM106.203 61.314C106.177 61.2019 106.141 61.0948 106.101 61.003C106.141 61.0999 106.177 61.207 106.203 61.314ZM106.279 61.9256C106.279 63.2865 105.382 64.836 104.261 65.4069C104.23 65.4222 104.205 65.4272 104.179 65.4425C104.205 65.4323 104.23 65.4273 104.255 65.412L104.276 65.4018C105.387 64.836 106.284 63.2865 106.284 61.9409V61.9154C106.284 61.737 106.264 61.5688 106.233 61.4159C106.264 61.5739 106.284 61.7421 106.284 61.9256M75.7989 65.1927C75.7989 65.1927 75.7632 65.2029 75.7428 65.2029C75.7174 65.2029 75.697 65.2081 75.6715 65.2132C75.697 65.2132 75.7174 65.208 75.7428 65.2029C75.7632 65.2029 75.7785 65.1978 75.7989 65.1927ZM75.3555 65.2438C75.3555 65.2438 75.4014 65.2438 75.4268 65.2438C75.4268 65.2438 75.4319 65.2438 75.437 65.2438C75.437 65.2438 75.4319 65.2438 75.4268 65.2438C75.4014 65.2438 75.381 65.2438 75.3555 65.2438C75.3351 65.2438 75.3198 65.2438 75.2994 65.2387C75.3198 65.2387 75.3351 65.2387 75.3555 65.2438ZM103.119 65.5496C103.119 65.5496 103.17 65.5648 103.195 65.575C103.17 65.5699 103.144 65.5598 103.119 65.5496C103.093 65.5394 103.073 65.5292 103.047 65.5241C103.073 65.5343 103.093 65.5445 103.119 65.5496ZM103.797 65.5699C103.766 65.5699 103.736 65.5801 103.705 65.5852C103.736 65.5852 103.766 65.575 103.797 65.5699C103.822 65.5699 103.853 65.5597 103.883 65.5546C103.853 65.5648 103.827 65.5699 103.797 65.5699ZM103.45 65.6056C103.45 65.6056 103.486 65.6056 103.506 65.6056C103.506 65.6056 103.522 65.6056 103.527 65.6056C103.522 65.6056 103.511 65.6056 103.506 65.6056C103.486 65.6056 103.471 65.6056 103.45 65.6056C103.42 65.6056 103.384 65.6005 103.353 65.5954C103.384 65.5954 103.42 65.6005 103.45 65.6056ZM116.809 66.4008C116.809 66.4008 116.799 66.4008 116.794 66.4008C116.799 66.4008 116.804 66.4008 116.809 66.4008C116.881 66.3855 116.957 66.3753 117.023 66.3753C116.952 66.3753 116.881 66.3906 116.809 66.4008ZM117.258 66.3906C117.289 66.3906 117.324 66.4008 117.355 66.411C117.324 66.4008 117.294 66.3957 117.258 66.3906C117.222 66.3855 117.192 66.3804 117.161 66.3804C117.192 66.3804 117.227 66.3855 117.258 66.3906ZM116.478 66.4874C116.539 66.4619 116.606 66.4416 116.667 66.4263C116.606 66.4416 116.544 66.4619 116.478 66.4874ZM85.9572 72.6904C85.9572 72.6904 85.9063 72.6497 85.8757 72.6293C85.9063 72.6446 85.9317 72.6649 85.9572 72.6904ZM86.0439 72.7874C86.0439 72.7874 86.0643 72.8179 86.0745 72.8332C86.0643 72.8179 86.0541 72.8027 86.0439 72.7874C86.0337 72.7721 86.0235 72.7567 86.0133 72.7465C86.0235 72.7618 86.0337 72.7721 86.0439 72.7874ZM86.1611 73.0371C86.1509 72.9912 86.1356 72.9454 86.1152 72.9046C86.1356 72.9454 86.1458 72.9912 86.1611 73.0371ZM78.1843 81.3553L81.6605 79.5816V74.449L79.1833 75.713C78.6278 75.9934 78.1792 76.7681 78.1792 77.4409V81.3503M62.2256 97.2224C62.2154 97.1816 62.195 97.1408 62.1899 97.0949C62.2001 97.1408 62.2154 97.1816 62.2256 97.2224ZM62.3836 97.6199C62.3836 97.6199 62.3938 97.6353 62.3989 97.6455C62.3938 97.6353 62.3887 97.6301 62.3836 97.6199C62.3632 97.5843 62.3377 97.5537 62.3224 97.5129C62.3428 97.5537 62.3632 97.5843 62.3836 97.6199ZM62.6384 97.9359C62.6028 97.9053 62.562 97.8697 62.5314 97.834C62.5671 97.8748 62.6028 97.9053 62.6384 97.9359ZM94.4692 13.6672C94.0615 13.6672 93.6435 13.7742 93.2307 13.9832L61.145 30.3293C59.7077 31.0633 58.5863 32.9798 58.5863 34.6975C58.5863 35.8188 59.0501 36.7006 59.8606 37.1134L60.5895 37.4855V89.1742L59.1419 89.9132C57.7045 90.6472 56.5781 92.5688 56.5781 94.2865C56.5781 95.4078 57.042 96.2845 57.8524 96.6974L62.3938 99.0114C62.455 99.042 62.5161 99.0674 62.5773 99.0827C62.8321 99.1847 63.1074 99.2357 63.3877 99.2357C63.7904 99.2357 64.2032 99.1287 64.611 98.9248L116.748 72.3592C118.186 71.6252 119.307 69.7087 119.307 67.991C119.307 66.8748 118.833 65.993 118.028 65.5852V65.575L115.296 64.1836V29.1061C116.453 28.2192 117.299 26.5779 117.299 25.0896C117.299 23.9733 116.825 23.0915 116.019 22.6838V22.6736L111.483 20.3595C111.182 20.2066 110.851 20.1302 110.504 20.1302C110.097 20.1302 109.684 20.2372 109.271 20.4461L99.2502 25.5533V22.643C100.428 21.7561 101.258 20.1353 101.258 18.6164C101.258 17.5766 100.846 16.7407 100.142 16.3023C100.096 16.2666 100.04 16.231 99.9893 16.2055L95.4478 13.8914C95.1471 13.7385 94.8209 13.6621 94.4692 13.6621V13.6672ZM79.2037 79.6938V77.446C79.2037 77.13 79.4535 76.7223 79.6471 76.6254L80.6411 76.1208V78.9649L79.2037 79.6988V79.6938Z"
+        fill="var(--illustration-stroke-tertiary)"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M117.574 66.4863C117.227 66.3079 116.779 66.3231 116.284 66.5729L114.281 67.5923L109.74 65.2783L111.743 64.2589C112.232 64.0092 112.681 63.9938 113.033 64.1722L117.574 66.4863Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
         stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
         strokeWidth="0.4"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
       <path
-        d="M16.4846 98.871C16.4846 96.9444 17.9271 95.0228 20.8069 93.5549L98.7248 53.8542C104.49 50.9184 113.832 50.9184 119.597 53.8542L156.678 72.7489C159.563 74.2168 161 76.1435 161 78.0701C161 79.9968 159.558 81.9183 156.678 83.3863L78.7598 123.087C72.9951 126.023 63.6523 126.023 57.8876 123.087L20.8069 104.192C17.922 102.724 16.4846 100.798 16.4846 98.871Z"
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M102.961 65.4927C103.313 65.6711 103.766 65.6558 104.266 65.406C105.387 64.8352 106.284 63.2857 106.284 61.9248C106.284 61.1602 106.009 60.6301 105.571 60.4059L101.029 58.0918C101.467 58.3161 101.743 58.8461 101.743 59.6107C101.743 60.9716 100.846 62.5211 99.7243 63.092C99.2248 63.3468 98.7711 63.3621 98.4194 63.1786L102.961 65.4927Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M102.966 55.727C103.318 55.9054 103.766 55.89 104.266 55.6352C105.387 55.0643 106.284 53.5149 106.284 52.154C106.284 51.3946 106.009 50.8645 105.571 50.6402L101.029 48.3262C101.467 48.5504 101.743 49.0805 101.743 49.84C101.743 50.5994 100.846 52.7503 99.7243 53.3211C99.2299 53.576 98.7763 53.5914 98.4246 53.413L102.966 55.727Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M106.279 42.4205C106.279 43.7661 105.382 45.3157 104.266 45.8865C103.766 46.1414 103.313 46.1515 102.961 45.9731L98.4194 43.6591C98.7711 43.8375 99.2248 43.8273 99.7243 43.5725C100.841 43.0016 101.738 41.4521 101.738 40.1065C101.738 40.1065 101.462 38.7965 101.024 38.5723L105.565 40.8863C106.294 41.2023 106.279 42.4205 106.279 42.4205Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M78.1843 85.9839L86.207 81.8961L81.6656 79.582L73.6429 83.6698L78.1843 85.9839Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M86.207 81.8957V73.3582C86.207 72.981 86.0694 72.7211 85.8502 72.609L81.3088 70.2949C81.5279 70.4071 81.6656 70.6721 81.6656 71.0442V79.5816L86.207 81.8957Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M115.571 23.5801C115.224 23.4017 114.776 23.4169 114.281 23.6667L98.236 31.8423L93.6945 29.5282L109.74 21.3526C110.229 21.1029 110.678 21.0876 111.029 21.266L115.571 23.5801Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M84.9175 60.0244C85.2641 60.2028 85.7126 60.1876 86.207 59.9378L88.2102 58.9184C89.3213 58.3526 90.2184 56.8031 90.2184 55.4524C90.2184 54.7032 89.938 54.1731 89.4997 53.9488L84.9583 51.6348C85.3966 51.859 85.6769 52.3891 85.6769 53.1384C85.6769 54.4891 84.7799 56.0386 83.6687 56.6043L81.6656 57.6237C81.1763 57.8735 80.7277 57.8887 80.376 57.7104L84.9175 60.0244Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M84.9175 50.2627C85.2641 50.4411 85.7177 50.4258 86.207 50.1761L88.2102 49.1567C89.3213 48.5909 90.2184 47.0414 90.2184 45.6958C90.2184 44.9465 89.938 44.4114 89.4997 44.1871L84.9583 41.873C85.3966 42.0973 85.6769 42.6274 85.6769 43.3817C85.6769 44.7273 84.7799 46.2769 83.6687 46.8426L81.6656 47.862C81.1763 48.1118 80.7277 48.1272 80.376 47.9488L84.9175 50.2627Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M66.1503 38.4332V92.1149L61.6089 89.8008V36.1191L66.1503 38.4332Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M66.1503 92.1148L64.1472 93.1342C63.0411 93.7 62.139 95.2495 62.139 96.6002C62.139 97.3495 62.4193 97.8796 62.8576 98.1038L58.3162 95.7898C57.8779 95.5655 57.5975 95.0354 57.5975 94.2862C57.5975 92.9355 58.4997 91.3859 59.6057 90.8202L61.6089 89.8008L66.1503 92.1148Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M74.8917 65.1311C75.2383 65.3095 75.6868 65.2941 76.1812 65.0443L78.1894 64.02C79.2955 63.4542 80.1925 61.9047 80.1925 60.554C80.1925 59.8047 79.9173 59.2747 79.479 59.0504L74.9375 56.7363C75.3759 56.9606 75.6511 57.4907 75.6511 58.2399C75.6511 58.9892 74.754 61.1401 73.648 61.7059L71.6398 62.7304C71.1505 62.9802 70.7019 62.9954 70.3502 62.817L74.8917 65.1311Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M84.9175 40.5029C85.2641 40.6813 85.7126 40.6661 86.207 40.4163L88.2102 39.3969C89.3213 38.8312 90.2184 37.2816 90.2184 35.9309C90.2184 35.1817 89.938 34.6516 89.4997 34.4273L84.9583 32.1133C85.3966 32.3375 85.6769 32.8676 85.6769 33.6169C85.6769 34.9676 84.7799 36.5171 83.6687 37.0829L81.6656 38.1023C81.1763 38.352 80.7277 38.3673 80.376 38.1889L84.9175 40.5029Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M74.8917 55.3713C75.2383 55.5497 75.6919 55.5345 76.1812 55.2847L78.1894 54.2602C79.2955 53.6944 80.1925 52.1449 80.1925 50.7993C80.1925 49.4537 79.9122 49.5149 79.4739 49.2906L74.9324 46.9766C75.3708 47.2008 75.6511 47.7309 75.6511 48.4853C75.6511 49.8309 74.754 51.3804 73.648 51.9461L71.6398 52.9706C71.1505 53.2204 70.7019 53.2358 70.3502 53.0574L74.8917 55.3713Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M74.8917 45.6096C75.2383 45.788 75.6868 45.7727 76.1812 45.523L78.1894 44.4985C79.2955 43.9327 80.1925 42.3832 80.1925 41.0325C80.1925 40.2832 79.9173 39.7532 79.479 39.5289L74.9375 37.2148C75.3759 37.4391 75.6511 37.9692 75.6511 38.7184C75.6511 40.0691 74.754 41.6187 73.648 42.1844L71.6398 43.2089C71.1505 43.4587 70.7019 43.4739 70.3502 43.2955L74.8917 45.6096Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M99.5255 17.1172C99.1789 16.9388 98.7252 16.954 98.2359 17.2038L66.1503 33.5499C65.0442 34.1157 64.1472 35.6651 64.1472 37.0107C64.1472 38.3563 64.4275 38.2952 64.8658 38.5195L60.3244 36.2054C59.8861 35.9812 59.6057 35.4511 59.6057 34.6967C59.6057 33.3511 60.5028 31.8016 61.6089 31.2359L93.6945 14.8897C94.1838 14.64 94.6374 14.6247 94.984 14.8031L99.5255 17.1172Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M104.256 60.4989L104.276 60.4887C105.387 59.923 106.284 60.5601 106.284 61.9108V61.9363C106.284 63.2819 105.387 64.8314 104.276 65.3972L104.256 65.4074C103.144 65.9732 102.247 65.336 102.247 63.9904V63.9649C102.247 62.6142 103.144 61.0647 104.256 60.4989ZM102.247 54.2296V54.2042C102.247 52.8586 103.144 51.3091 104.256 50.7433L104.276 50.7331C105.387 50.1673 106.284 50.8045 106.284 52.1501V52.1755C106.284 53.5211 105.387 55.0706 104.276 55.6364L104.256 55.6466C103.144 56.2123 102.247 55.5752 102.247 54.2296ZM106.279 42.4148C106.279 43.7604 105.382 45.3099 104.271 45.8757L104.25 45.8859C103.139 46.4516 102.242 45.8145 102.242 44.4689V44.4434C102.242 43.0927 103.139 41.5431 104.25 40.9774L104.271 40.9672C105.382 40.4014 106.279 41.0386 106.279 42.3893V42.4148ZM76.1812 40.6461L78.1894 39.6216C79.2955 39.0559 80.1926 39.693 80.1926 41.0386C80.1926 42.3842 79.2955 43.9388 78.1894 44.5046L76.1812 45.5291C75.0752 46.0949 74.1781 45.4577 74.1781 44.107C74.1781 42.7563 75.0752 41.2119 76.1812 40.6461ZM76.1812 50.4017L78.1894 49.3772C79.2955 48.8115 80.1926 49.4537 80.1926 50.7993C80.1926 52.1449 79.2955 53.6944 78.1894 54.2602L76.1812 55.2847C75.0752 55.8505 74.1781 55.2133 74.1781 53.8677C74.1781 52.5221 75.0752 50.9675 76.1812 50.4017ZM74.173 63.6235C74.173 62.2778 75.0701 60.7283 76.1761 60.1626L78.1843 59.1381C79.2904 58.5723 80.1875 59.2094 80.1875 60.555C80.1875 61.9007 79.2904 63.4553 78.1843 64.021L76.1761 65.0454C75.0701 65.6112 74.173 64.9742 74.173 63.6235ZM86.207 81.8961L78.1894 85.9839V77.4465C78.1894 76.7686 78.638 75.999 79.1936 75.7186L85.208 72.6553C85.7585 72.375 86.2121 72.691 86.2121 73.3638V81.9012L86.207 81.8961ZM88.2102 58.9189L86.207 59.9383C85.101 60.5041 84.2039 59.867 84.2039 58.5162C84.2039 57.1655 85.101 55.6211 86.207 55.0554L88.2102 54.036C89.3213 53.4702 90.2184 54.1073 90.2184 55.4529C90.2184 56.7985 89.3213 58.3532 88.2102 58.9189ZM88.2102 49.153L86.207 50.1724C85.101 50.7382 84.2039 50.101 84.2039 48.7554C84.2039 47.4098 85.101 45.8553 86.207 45.2895L88.2102 44.2701C89.3213 43.7044 90.2184 44.3414 90.2184 45.6921C90.2184 47.0428 89.3213 48.5872 88.2102 49.153ZM88.2102 39.3974L86.207 40.4168C85.101 40.9825 84.2039 40.3454 84.2039 38.9947C84.2039 37.644 85.101 36.0996 86.207 35.5338L88.2102 34.5144C89.3213 33.9486 90.2184 34.5858 90.2184 35.9314C90.2184 37.277 89.3213 38.8316 88.2102 39.3974ZM116.284 66.5695L114.281 67.5889V28.5458C115.387 27.9801 116.284 26.4306 116.284 25.085C116.284 23.7342 115.387 23.0971 114.281 23.6629L98.236 31.8385V22.0778C99.3471 21.512 100.244 19.9625 100.244 18.6118C100.244 17.2662 99.3471 16.629 98.236 17.1948L66.1503 33.5409C65.0443 34.1067 64.1472 35.6562 64.1472 37.0018C64.1472 38.3474 65.0443 38.9895 66.1503 38.4238V92.1054L64.1472 93.1248C63.0411 93.6906 62.139 95.2401 62.139 96.5908C62.139 97.9415 63.0411 98.5685 64.1472 98.0078L116.284 71.4422C117.39 70.8764 118.288 69.3269 118.288 67.9813C118.288 66.6357 117.39 65.9936 116.284 66.5593V66.5695Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
         stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
         strokeWidth="0.4"
@@ -66,189 +252,9 @@ export function CustomerVerticalStackIllustration({ className }: TIllustrationAs
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M64.1877 99.2221C63.9583 99.2221 63.7391 99.1762 63.5353 99.0947C63.4996 99.0845 63.4588 99.0743 63.4231 99.0539L58.8817 96.7399C58.2497 96.4188 57.8827 95.7052 57.8827 94.7826C57.8827 93.2382 58.8868 91.5155 60.1661 90.8631L61.894 89.9813V37.6656L60.8848 37.1508C60.2528 36.8297 59.8909 36.1162 59.8909 35.1885C59.8909 33.6441 60.895 31.9263 62.1744 31.2739L94.26 14.9279C94.6015 14.7546 94.9379 14.668 95.2692 14.668C95.5342 14.668 95.7891 14.7291 96.0134 14.8412L100.555 17.1552V17.1655C101.182 17.4866 101.549 18.2002 101.549 19.1125C101.549 20.5448 100.687 22.1248 99.5405 22.869V26.8753L110.305 21.3909C110.647 21.2176 110.983 21.1309 111.309 21.1309C111.575 21.1309 111.829 21.1921 112.054 21.3043L116.595 23.6182V23.6284C117.222 23.9495 117.589 24.6682 117.589 25.5806C117.589 27.0078 116.728 28.5879 115.586 29.3321V64.9856L118.598 66.5198V66.53C119.22 66.8511 119.592 67.5697 119.592 68.482C119.592 70.0264 118.588 71.7442 117.309 72.3966L65.1714 98.9622C64.835 99.1304 64.5037 99.217 64.1826 99.217L64.1877 99.2221ZM80.2178 76.6628C79.8304 76.8615 79.494 77.4528 79.494 77.937V81.0156L81.9507 79.7618V75.7759L80.2178 76.6577V76.6628Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-      />
-      <path
-        d="M95.2692 15.1788C95.4578 15.1788 95.6311 15.2196 95.784 15.296L100.325 17.6101C100.295 17.5948 100.259 17.5897 100.229 17.5744C100.723 17.7681 101.044 18.3083 101.044 19.1137C101.044 20.4644 100.147 22.0139 99.0359 22.5797V27.7072L110.54 21.8456C110.815 21.708 111.075 21.6418 111.31 21.6418C111.498 21.6418 111.671 21.6825 111.824 21.759L116.366 24.073C116.335 24.0578 116.299 24.0526 116.269 24.0373C116.758 24.231 117.084 24.7764 117.084 25.5766C117.084 26.9222 116.187 28.4718 115.081 29.0375V65.2976L118.374 66.9745C118.343 66.9592 118.308 66.9541 118.277 66.9388C118.766 67.1325 119.088 67.6779 119.088 68.4781C119.088 69.8237 118.19 71.3732 117.084 71.939L64.9472 98.5046C64.677 98.6422 64.4222 98.7084 64.1877 98.7084C63.9736 98.7084 63.7748 98.6523 63.6015 98.5504C63.6219 98.5606 63.6372 98.581 63.6576 98.5912L59.1162 96.2772C58.6778 96.0529 58.3975 95.5228 58.3975 94.7736C58.3975 93.4229 59.2997 91.8734 60.4057 91.3076L62.4089 90.2882V37.3508L61.1193 36.6932C60.681 36.469 60.4006 35.9389 60.4006 35.1845C60.4006 33.8389 61.2977 32.2894 62.4038 31.7237L94.4894 15.3775C94.7646 15.2348 95.0246 15.1686 95.2641 15.1686M99.6934 17.5029C99.724 17.5029 99.7495 17.4978 99.775 17.4978C99.7495 17.4978 99.7189 17.4978 99.6934 17.5029ZM100.009 17.5131C100.04 17.5131 100.076 17.5234 100.106 17.5336C100.076 17.5234 100.045 17.5182 100.009 17.5131C99.9788 17.5131 99.9432 17.5029 99.9075 17.5029C99.9432 17.5029 99.9737 17.508 100.009 17.5131ZM99.2296 17.6101C99.1633 17.6356 99.1022 17.661 99.0359 17.6967C99.1022 17.661 99.1684 17.6356 99.2296 17.6101ZM115.744 23.966C115.693 23.9711 115.642 23.9813 115.586 23.9915C115.637 23.9813 115.693 23.9711 115.744 23.966C115.769 23.966 115.795 23.966 115.82 23.9609C115.795 23.9609 115.769 23.9609 115.744 23.966ZM116.06 23.9813C116.024 23.9813 115.994 23.9711 115.958 23.9711C115.994 23.9711 116.029 23.9762 116.06 23.9813ZM115.275 24.073C115.336 24.0476 115.402 24.0271 115.464 24.0118C115.402 24.0271 115.341 24.0476 115.275 24.073ZM90.4424 35.0214C90.4679 35.0418 90.4984 35.0621 90.5239 35.0876C90.4984 35.0621 90.473 35.0418 90.4424 35.0214C90.4169 35.001 90.3863 34.9806 90.3557 34.9653C90.3863 34.9806 90.4118 35.001 90.4424 35.0214ZM90.7584 35.3782C90.7176 35.3119 90.6768 35.2457 90.631 35.1896C90.6768 35.2457 90.7227 35.3119 90.7584 35.3782ZM90.8807 35.633C90.896 35.684 90.9113 35.735 90.9266 35.786C90.9113 35.735 90.896 35.6789 90.8807 35.633C90.8654 35.5922 90.8552 35.5515 90.8348 35.5158C90.8501 35.5515 90.8654 35.5922 90.8807 35.633ZM91.0183 36.4231C91.0183 36.2447 90.9979 36.0816 90.9725 35.9287C91.003 36.0816 91.0183 36.2447 91.0183 36.4231ZM80.4114 40.1286C80.4369 40.149 80.4624 40.1693 80.493 40.1948C80.4675 40.1693 80.442 40.149 80.4114 40.1286C80.386 40.1082 80.3554 40.0878 80.3299 40.0725C80.3605 40.0878 80.386 40.1082 80.4114 40.1286ZM80.6714 40.3886C80.6918 40.4191 80.7122 40.4497 80.7326 40.4854C80.7122 40.4548 80.6918 40.4191 80.6714 40.3886ZM85.8652 41.0461C85.8652 41.0461 85.9111 41.0613 85.9366 41.0715C85.9111 41.0664 85.8856 41.0563 85.8652 41.0461ZM80.9925 41.5303C80.9925 41.3519 80.9721 41.1888 80.9467 41.0359C80.9772 41.1888 80.9925 41.3519 80.9925 41.5303ZM86.6247 41.0563C86.6247 41.0563 86.5839 41.0665 86.5635 41.0665C86.5431 41.0665 86.5228 41.0715 86.5024 41.0766C86.5228 41.0766 86.5431 41.0716 86.5635 41.0665C86.5839 41.0614 86.6043 41.0614 86.6247 41.0563ZM86.1354 41.1021C86.1762 41.1021 86.2118 41.1123 86.2526 41.1123H86.2628C86.2628 41.1123 86.2577 41.1123 86.2526 41.1123C86.2118 41.1123 86.1711 41.1072 86.1303 41.1021C86.1303 41.1021 86.1303 41.1021 86.1252 41.1021C86.1252 41.1021 86.1252 41.1021 86.1303 41.1021M106.493 41.4589C106.493 41.4589 106.503 41.4691 106.508 41.4691C106.503 41.4691 106.498 41.4589 106.493 41.4589ZM106.732 41.6883C106.732 41.6883 106.737 41.6985 106.743 41.6985C106.743 41.6985 106.737 41.6883 106.732 41.6883C106.732 41.6883 106.727 41.6832 106.722 41.6781C106.722 41.6781 106.727 41.6832 106.732 41.6883ZM107.059 42.6006C107.033 42.3355 106.967 42.1113 106.875 41.9177C106.982 42.1521 107.038 42.4069 107.059 42.6006ZM107.079 42.8505C107.079 42.8861 107.079 42.9116 107.079 42.9116C107.079 44.089 106.396 45.4193 105.473 46.1176C106.391 45.4244 107.079 44.089 107.079 42.9116V42.886C107.079 42.886 107.079 42.8656 107.079 42.8554M90.5188 44.8433C90.4678 44.7975 90.4118 44.7567 90.3557 44.721C90.4169 44.7567 90.4678 44.7975 90.5188 44.8433ZM90.7125 45.0676C90.7278 45.0931 90.7431 45.1135 90.7533 45.139C90.738 45.1135 90.7227 45.0931 90.7125 45.0676C90.687 45.0268 90.6564 44.986 90.6259 44.9504C90.6564 44.986 90.6819 45.0268 90.7125 45.0676ZM90.9266 45.5467C90.9011 45.4549 90.8756 45.3581 90.8348 45.2765C90.8705 45.3581 90.9011 45.4498 90.9266 45.5467ZM91.0183 46.1838C91.0183 46.0054 90.9979 45.8423 90.9725 45.6894C91.003 45.8423 91.0183 46.0054 91.0183 46.1838ZM76.5989 46.1685C76.5989 46.1685 76.5581 46.1787 76.5377 46.1787C76.5173 46.1787 76.497 46.1838 76.4766 46.1889C76.497 46.1889 76.5173 46.1838 76.5377 46.1787C76.5581 46.1787 76.5785 46.1736 76.5989 46.1685ZM76.1708 46.2144C76.1708 46.2144 76.2115 46.2144 76.2268 46.2144C76.2268 46.2144 76.2319 46.2144 76.237 46.2144C76.237 46.2144 76.2319 46.2144 76.2268 46.2144C76.2064 46.2144 76.1861 46.2144 76.1708 46.2144C76.1504 46.2144 76.1249 46.2144 76.1045 46.2093C76.1249 46.2093 76.1504 46.2093 76.1708 46.2144ZM103.924 46.5203C103.924 46.5203 103.975 46.5356 104 46.5407C103.975 46.5356 103.949 46.5254 103.924 46.5203C103.898 46.5101 103.868 46.4999 103.842 46.4897C103.868 46.4999 103.893 46.5101 103.924 46.5203ZM104.571 46.5458C104.571 46.5458 104.541 46.5457 104.525 46.5508C104.541 46.5508 104.556 46.5509 104.571 46.5458C104.607 46.5458 104.638 46.5356 104.673 46.5254C104.638 46.5356 104.602 46.5407 104.571 46.5458ZM104.235 46.5763C104.235 46.5763 104.281 46.5763 104.306 46.5763C104.311 46.5763 104.322 46.5763 104.327 46.5763C104.322 46.5763 104.316 46.5763 104.306 46.5763C104.281 46.5763 104.26 46.5763 104.235 46.5763C104.204 46.5763 104.179 46.5712 104.148 46.5661C104.179 46.5661 104.204 46.5712 104.235 46.5763ZM80.493 49.9557C80.442 49.9098 80.386 49.8639 80.3248 49.8282C80.386 49.8639 80.4369 49.9047 80.493 49.9557ZM80.6612 50.1391C80.6867 50.1748 80.7071 50.2155 80.7326 50.2512C80.7071 50.2104 80.6867 50.1748 80.6612 50.1391ZM80.8753 50.5622C80.8855 50.5927 80.8957 50.6233 80.9008 50.659C80.8906 50.6284 80.8855 50.5978 80.8753 50.5622ZM85.8652 50.8068C85.8652 50.8068 85.9162 50.8221 85.9417 50.8323C85.9162 50.8272 85.8907 50.817 85.8652 50.8068ZM80.9925 51.2961C80.9925 51.1177 80.9721 50.9546 80.9467 50.8017C80.9772 50.9546 80.9925 51.1177 80.9925 51.2961ZM86.4973 50.8374C86.538 50.8272 86.5788 50.8272 86.6247 50.817C86.5788 50.8272 86.538 50.8323 86.4973 50.8374ZM86.1864 50.8629C86.1864 50.8629 86.2322 50.8629 86.2577 50.8629C86.2577 50.8629 86.2628 50.8629 86.2679 50.8629C86.2679 50.8629 86.2628 50.8629 86.2577 50.8629C86.2322 50.8629 86.2118 50.8629 86.1864 50.8629C86.166 50.8629 86.1507 50.8629 86.1303 50.8578C86.1507 50.8578 86.166 50.8578 86.1864 50.8629ZM106.539 51.2655C106.539 51.2655 106.574 51.2961 106.59 51.3114C106.574 51.2961 106.554 51.2808 106.539 51.2655C106.498 51.2349 106.457 51.2044 106.416 51.1789C106.462 51.2044 106.503 51.2349 106.539 51.2655ZM106.783 51.5305C106.783 51.5305 106.814 51.5816 106.829 51.6071C106.814 51.5816 106.799 51.556 106.783 51.5305C106.758 51.4847 106.727 51.4439 106.692 51.4082C106.722 51.4439 106.753 51.4898 106.783 51.5305ZM106.977 51.9536C106.987 51.9842 106.992 52.0148 107.003 52.0402C106.997 52.0097 106.987 51.9791 106.977 51.9536ZM107.079 52.652C107.079 53.9976 106.197 55.5317 105.091 56.1127C105.086 56.1127 105.076 56.1179 105.071 56.123H105.061C105.061 56.123 105.081 56.1178 105.091 56.1127C106.192 55.5368 107.079 54.0027 107.079 52.6622V52.6367C107.079 52.4583 107.059 52.2952 107.033 52.1423C107.064 52.3003 107.079 52.4685 107.079 52.652ZM90.5188 54.6092C90.4678 54.5633 90.4118 54.5174 90.3557 54.4868C90.4169 54.5225 90.4678 54.5633 90.5188 54.6092ZM90.7584 54.8997C90.7176 54.8335 90.6768 54.7671 90.631 54.7111C90.6768 54.7671 90.7227 54.8335 90.7584 54.8997ZM90.9266 55.3075C90.9011 55.2107 90.8756 55.1189 90.8348 55.0373C90.8705 55.1189 90.9011 55.2158 90.9266 55.3075ZM91.0183 55.9446C91.0183 55.7662 90.9979 55.6031 90.9725 55.4502C91.003 55.6031 91.0183 55.7662 91.0183 55.9446ZM75.8496 55.9191C75.8496 55.9191 75.8904 55.9344 75.9108 55.9395C75.8904 55.9344 75.87 55.9293 75.8496 55.9191C75.8293 55.914 75.8089 55.9038 75.7885 55.8936C75.8089 55.9038 75.8293 55.9089 75.8496 55.9191ZM76.5989 55.9242C76.5989 55.9242 76.5581 55.9344 76.5428 55.9344C76.5173 55.9344 76.497 55.9395 76.4715 55.9446C76.497 55.9446 76.5173 55.9395 76.5428 55.9344C76.5632 55.9344 76.5785 55.9293 76.5989 55.9242ZM76.1555 55.9752C76.1555 55.9752 76.2013 55.9752 76.2268 55.9752C76.2013 55.9752 76.1809 55.9752 76.1555 55.9752C76.1351 55.9752 76.1198 55.9752 76.0994 55.9701C76.1198 55.9701 76.1351 55.9701 76.1555 55.9752ZM105.066 56.1332C105.066 56.1332 105.02 56.1485 104.999 56.1587C105.02 56.1485 105.04 56.1433 105.061 56.1332H105.066ZM104 56.3014C103.944 56.2861 103.893 56.2708 103.847 56.2504C103.898 56.2708 103.949 56.2912 104 56.3014ZM104.24 56.3371C104.24 56.3371 104.281 56.3371 104.306 56.3371C104.306 56.3371 104.322 56.3371 104.327 56.3371C104.322 56.3371 104.311 56.3371 104.306 56.3371C104.286 56.3371 104.26 56.3371 104.24 56.3371C104.209 56.3371 104.184 56.332 104.153 56.3269C104.184 56.3269 104.209 56.332 104.24 56.3371ZM80.4114 59.6451C80.442 59.6654 80.4675 59.6909 80.493 59.7113C80.4675 59.6858 80.4369 59.6654 80.4114 59.6451C80.386 59.6247 80.3605 59.6093 80.3299 59.5889C80.3554 59.6042 80.386 59.6247 80.4114 59.6451ZM80.7326 60.0069C80.6918 59.9407 80.6561 59.8794 80.6051 59.8234C80.651 59.8794 80.6918 59.9407 80.7326 60.0069ZM85.8652 60.5675C85.8652 60.5675 85.9162 60.5828 85.9417 60.593C85.9162 60.5879 85.8907 60.5777 85.8652 60.5675C85.85 60.5624 85.8347 60.5574 85.8194 60.5472C85.8347 60.5523 85.85 60.5573 85.8652 60.5675ZM80.9925 61.0467C80.9925 60.8683 80.9721 60.7053 80.9467 60.5574C80.9772 60.7104 80.9925 60.8734 80.9925 61.0467ZM86.6247 60.5777C86.5839 60.5879 86.5431 60.593 86.5024 60.5981C86.5431 60.5879 86.5839 60.5879 86.6247 60.5777ZM86.1966 60.6287C86.1966 60.6287 86.2373 60.6287 86.2577 60.6287C86.2577 60.6287 86.2628 60.6287 86.2679 60.6287C86.2679 60.6287 86.2628 60.6287 86.2577 60.6287C86.2373 60.6287 86.2169 60.6287 86.1966 60.6287C86.1762 60.6287 86.1507 60.6287 86.1303 60.6236C86.1507 60.6236 86.1762 60.6236 86.1966 60.6287ZM106.549 61.0314C106.549 61.0314 106.579 61.0569 106.59 61.0671C106.574 61.0519 106.559 61.0416 106.549 61.0314C106.508 60.9958 106.462 60.9652 106.416 60.9346C106.462 60.9601 106.508 60.9958 106.549 61.0314ZM106.829 61.3678C106.788 61.2964 106.743 61.2251 106.692 61.1691C106.743 61.2302 106.783 61.2964 106.829 61.3678ZM107.003 61.8062C106.977 61.694 106.941 61.587 106.901 61.4952C106.941 61.5921 106.977 61.6991 107.003 61.8062ZM107.079 62.4178C107.079 63.7787 106.182 65.3282 105.061 65.8991C105.03 65.9144 105.004 65.9194 104.979 65.9347C105.004 65.9245 105.03 65.9195 105.055 65.9042L105.076 65.894C106.187 65.3282 107.084 63.7787 107.084 62.4331V62.4076C107.084 62.2292 107.064 62.061 107.033 61.9081C107.064 62.0661 107.084 62.2343 107.084 62.4178M76.5989 65.6849C76.5989 65.6849 76.5632 65.6951 76.5428 65.6951C76.5173 65.6951 76.497 65.7002 76.4715 65.7053C76.497 65.7053 76.5173 65.7002 76.5428 65.6951C76.5632 65.6951 76.5785 65.69 76.5989 65.6849ZM76.1555 65.736C76.1555 65.736 76.2013 65.736 76.2268 65.736C76.2268 65.736 76.2319 65.736 76.237 65.736C76.237 65.736 76.2319 65.736 76.2268 65.736C76.2013 65.736 76.1809 65.736 76.1555 65.736C76.1351 65.736 76.1198 65.736 76.0994 65.7309C76.1198 65.7309 76.1351 65.7309 76.1555 65.736ZM103.919 66.0418C103.919 66.0418 103.97 66.057 103.995 66.0672C103.97 66.0621 103.944 66.052 103.919 66.0418C103.893 66.0316 103.873 66.0214 103.847 66.0163C103.873 66.0265 103.893 66.0367 103.919 66.0418ZM104.597 66.0621C104.566 66.0621 104.536 66.0723 104.505 66.0774C104.536 66.0774 104.566 66.0672 104.597 66.0621C104.622 66.0621 104.653 66.0519 104.683 66.0468C104.653 66.057 104.627 66.0621 104.597 66.0621ZM104.25 66.0978C104.25 66.0978 104.286 66.0978 104.306 66.0978C104.306 66.0978 104.322 66.0978 104.327 66.0978C104.322 66.0978 104.311 66.0978 104.306 66.0978C104.286 66.0978 104.271 66.0978 104.25 66.0978C104.22 66.0978 104.184 66.0927 104.153 66.0876C104.184 66.0876 104.22 66.0927 104.25 66.0978ZM117.609 66.893C117.609 66.893 117.599 66.893 117.594 66.893C117.599 66.893 117.604 66.893 117.609 66.893C117.681 66.8777 117.757 66.8675 117.823 66.8675C117.752 66.8675 117.681 66.8828 117.609 66.893ZM118.058 66.8828C118.089 66.8828 118.124 66.893 118.155 66.9032C118.124 66.893 118.094 66.8879 118.058 66.8828C118.022 66.8777 117.992 66.8726 117.961 66.8726C117.992 66.8726 118.027 66.8777 118.058 66.8828ZM117.278 66.9796C117.339 66.9541 117.405 66.9338 117.467 66.9185C117.405 66.9338 117.344 66.9541 117.278 66.9796ZM86.7572 73.1826C86.7572 73.1826 86.7063 73.1419 86.6757 73.1215C86.7063 73.1368 86.7317 73.1571 86.7572 73.1826ZM86.8439 73.2795C86.8439 73.2795 86.8643 73.31 86.8745 73.3253C86.8643 73.31 86.8541 73.2948 86.8439 73.2795C86.8337 73.2643 86.8235 73.2489 86.8133 73.2387C86.8235 73.254 86.8337 73.2643 86.8439 73.2795ZM86.9611 73.5293C86.9509 73.4834 86.9356 73.4375 86.9152 73.3968C86.9356 73.4375 86.9458 73.4834 86.9611 73.5293ZM78.9843 81.8475L82.4604 80.0738V74.9412L79.9833 76.2052C79.4277 76.4856 78.9792 77.2602 78.9792 77.9331V81.8425M63.0256 97.7146C63.0154 97.6738 62.995 97.633 62.9899 97.5871C63.0001 97.633 63.0154 97.6738 63.0256 97.7146ZM63.1836 98.1121C63.1836 98.1121 63.1938 98.1274 63.1989 98.1376C63.1938 98.1274 63.1887 98.1223 63.1836 98.1121C63.1632 98.0765 63.1377 98.0459 63.1224 98.0051C63.1428 98.0459 63.1632 98.0765 63.1836 98.1121ZM63.4384 98.4281C63.4027 98.3975 63.362 98.3618 63.3314 98.3262C63.3671 98.3669 63.4027 98.3975 63.4384 98.4281ZM95.2692 14.1594C94.8615 14.1594 94.4435 14.2664 94.0307 14.4753L61.945 30.8215C60.5077 31.5554 59.3863 33.472 59.3863 35.1896C59.3863 36.311 59.8501 37.1928 60.6606 37.6056L61.3895 37.9777V89.6664L59.9419 90.4054C58.5045 91.1394 57.3781 93.061 57.3781 94.7787C57.3781 95.9 57.8419 96.7767 58.6524 97.1895L63.1938 99.5036C63.2549 99.5342 63.3161 99.5596 63.3773 99.5749C63.6321 99.6768 63.9074 99.7278 64.1877 99.7278C64.5904 99.7278 65.0032 99.6209 65.411 99.417L117.548 72.8514C118.986 72.1174 120.107 70.2009 120.107 68.4832C120.107 67.3669 119.633 66.4852 118.828 66.0774V66.0672L116.096 64.6757V29.5982C117.253 28.7114 118.099 27.0701 118.099 25.5817C118.099 24.4655 117.625 23.5837 116.819 23.176V23.1658L112.283 20.8517C111.982 20.6988 111.651 20.6224 111.304 20.6224C110.897 20.6224 110.484 20.7293 110.071 20.9383L100.05 26.0455V23.1352C101.228 22.2483 102.058 20.6275 102.058 19.1086C102.058 18.0688 101.646 17.2329 100.942 16.7945C100.896 16.7588 100.84 16.7232 100.789 16.6977L96.2478 14.3836C95.9471 14.2307 95.6209 14.1543 95.2692 14.1543V14.1594ZM80.0037 80.186V77.9382C80.0037 77.6221 80.2534 77.2144 80.4471 77.1176L81.441 76.613V79.457L80.0037 80.191V80.186Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M118.374 66.9785C118.027 66.8001 117.579 66.8153 117.084 67.0651L115.081 68.0845L110.54 65.7705L112.543 64.7511C113.032 64.5014 113.481 64.486 113.833 64.6644L118.374 66.9785Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-        strokeWidth="0.4"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M103.761 65.9848C104.113 66.1632 104.566 66.148 105.066 65.8982C106.187 65.3274 107.084 63.7778 107.084 62.4169C107.084 61.6524 106.809 61.1223 106.371 60.898L101.829 58.584C102.267 58.8083 102.543 59.3383 102.543 60.1029C102.543 61.4638 101.646 63.0133 100.524 63.5842C100.025 63.839 99.5711 63.8543 99.2194 63.6708L103.761 65.9848Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-        strokeWidth="0.4"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M103.766 56.2192C104.118 56.3976 104.566 56.3822 105.066 56.1274C106.187 55.5565 107.084 54.0071 107.084 52.6462C107.084 51.8868 106.809 51.3567 106.371 51.1324L101.829 48.8184C102.267 49.0426 102.543 49.5727 102.543 50.3322C102.543 51.0916 101.646 53.2425 100.524 53.8133C100.03 54.0682 99.5762 54.0836 99.2245 53.9052L103.766 56.2192Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-        strokeWidth="0.4"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M107.079 42.9127C107.079 44.2583 106.182 45.8078 105.066 46.3787C104.566 46.6336 104.113 46.6437 103.761 46.4653L99.2194 44.1513C99.5711 44.3296 100.025 44.3195 100.524 44.0646C101.64 43.4938 102.538 41.9443 102.538 40.5987C102.538 40.5987 102.262 39.2887 101.824 39.0645L106.365 41.3785C107.094 41.6945 107.079 42.9127 107.079 42.9127Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-        strokeWidth="0.4"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M78.9843 86.4761L87.007 82.3883L82.4655 80.0742L74.4429 84.162L78.9843 86.4761Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-        strokeWidth="0.4"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M87.007 82.3879V73.8504C87.007 73.4732 86.8694 73.2133 86.6502 73.1012L82.1088 70.7871C82.3279 70.8992 82.4656 71.1643 82.4656 71.5364V80.0738L87.007 82.3879Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-        strokeWidth="0.4"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M116.371 24.0723C116.024 23.8939 115.576 23.9091 115.081 24.1589L99.036 32.3345L94.4945 30.0204L110.54 21.8448C111.029 21.5951 111.478 21.5798 111.829 21.7582L116.371 24.0723Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-        strokeWidth="0.4"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M85.7175 60.5166C86.0641 60.695 86.5126 60.6797 87.007 60.43L89.0101 59.4106C90.1213 58.8448 91.0184 57.2953 91.0184 55.9446C91.0184 55.1953 90.738 54.6653 90.2997 54.441L85.7583 52.127C86.1966 52.3512 86.4769 52.8813 86.4769 53.6305C86.4769 54.9813 85.5798 56.5308 84.4687 57.0965L82.4656 58.1159C81.9763 58.3657 81.5277 58.3809 81.176 58.2025L85.7175 60.5166Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-        strokeWidth="0.4"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M85.7175 50.7549C86.0641 50.9333 86.5177 50.918 87.007 50.6683L89.0101 49.6489C90.1213 49.0831 91.0184 47.5336 91.0184 46.188C91.0184 45.4387 90.738 44.9036 90.2997 44.6793L85.7583 42.3652C86.1966 42.5895 86.4769 43.1196 86.4769 43.8739C86.4769 45.2195 85.5798 46.769 84.4687 47.3348L82.4656 48.3542C81.9763 48.604 81.5277 48.6193 81.176 48.4409L85.7175 50.7549Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-        strokeWidth="0.4"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M66.9503 38.9254V92.6071L62.4089 90.293V36.6113L66.9503 38.9254Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-        strokeWidth="0.4"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M66.9503 92.607L64.9472 93.6264C63.8411 94.1922 62.9389 95.7417 62.9389 97.0924C62.9389 97.8417 63.2193 98.3717 63.6576 98.596L59.1162 96.2819C58.6778 96.0577 58.3975 95.5276 58.3975 94.7784C58.3975 93.4277 59.2997 91.8781 60.4057 91.3124L62.4089 90.293L66.9503 92.607Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-        strokeWidth="0.4"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M75.6917 65.6233C76.0383 65.8017 76.4868 65.7863 76.9812 65.5365L78.9894 64.5122C80.0955 63.9464 80.9925 62.3969 80.9925 61.0462C80.9925 60.2969 80.7173 59.7668 80.279 59.5426L75.7375 57.2285C76.1759 57.4528 76.4511 57.9828 76.4511 58.7321C76.4511 59.4814 75.554 61.6323 74.448 62.1981L72.4398 63.2226C71.9505 63.4724 71.5019 63.4876 71.1502 63.3092L75.6917 65.6233Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-        strokeWidth="0.4"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M85.7175 40.9951C86.0641 41.1735 86.5126 41.1583 87.007 40.9085L89.0101 39.8891C90.1213 39.3233 91.0184 37.7738 91.0184 36.4231C91.0184 35.6739 90.738 35.1438 90.2997 34.9195L85.7583 32.6055C86.1966 32.8297 86.4769 33.3598 86.4769 34.1091C86.4769 35.4598 85.5798 37.0093 84.4687 37.575L82.4656 38.5944C81.9763 38.8442 81.5277 38.8595 81.176 38.6811L85.7175 40.9951Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-        strokeWidth="0.4"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M75.6917 55.8635C76.0383 56.0419 76.4919 56.0266 76.9812 55.7769L78.9894 54.7524C80.0955 54.1866 80.9925 52.6371 80.9925 51.2915C80.9925 49.9459 80.7122 50.0071 80.2739 49.7828L75.7324 47.4688C76.1708 47.693 76.4511 48.2231 76.4511 48.9774C76.4511 50.3231 75.554 51.8726 74.448 52.4383L72.4398 53.4628C71.9505 53.7126 71.5019 53.728 71.1502 53.5496L75.6917 55.8635Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-        strokeWidth="0.4"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M75.6917 46.1018C76.0383 46.2802 76.4868 46.2649 76.9812 46.0152L78.9894 44.9907C80.0955 44.4249 80.9925 42.8754 80.9925 41.5247C80.9925 40.7754 80.7173 40.2454 80.279 40.0211L75.7375 37.707C76.1759 37.9313 76.4511 38.4614 76.4511 39.2106C76.4511 40.5613 75.554 42.1108 74.448 42.6766L72.4398 43.7011C71.9505 43.9509 71.5019 43.9661 71.1502 43.7877L75.6917 46.1018Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-        strokeWidth="0.4"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M100.325 17.6094C99.9788 17.431 99.5252 17.4462 99.0359 17.696L66.9503 34.0421C65.8442 34.6079 64.9471 36.1573 64.9471 37.5029C64.9471 38.8485 65.2275 38.7874 65.6658 39.0117L61.1244 36.6976C60.6861 36.4734 60.4057 35.9433 60.4057 35.1889C60.4057 33.8433 61.3028 32.2938 62.4089 31.728L94.4945 15.3819C94.9838 15.1322 95.4374 15.1169 95.784 15.2953L100.325 17.6094Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-        strokeWidth="0.4"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M105.056 60.9911L105.076 60.9809C106.187 60.4151 107.084 61.0523 107.084 62.403V62.4285C107.084 63.7741 106.187 65.3236 105.076 65.8894L105.056 65.8996C103.944 66.4654 103.047 65.8282 103.047 64.4826V64.4571C103.047 63.1064 103.944 61.5569 105.056 60.9911ZM103.047 54.7218V54.6964C103.047 53.3508 103.944 51.8013 105.056 51.2355L105.076 51.2253C106.187 50.6595 107.084 51.2967 107.084 52.6423V52.6677C107.084 54.0133 106.187 55.5628 105.076 56.1286L105.056 56.1388C103.944 56.7045 103.047 56.0674 103.047 54.7218ZM107.079 42.907C107.079 44.2526 106.182 45.8021 105.071 46.3678L105.05 46.378C103.939 46.9438 103.042 46.3067 103.042 44.9611V44.9356C103.042 43.5848 103.939 42.0353 105.05 41.4696L105.071 41.4594C106.182 40.8936 107.079 41.5307 107.079 42.8814V42.907ZM76.9812 41.1383L78.9894 40.1138C80.0955 39.548 80.9925 40.1852 80.9925 41.5308C80.9925 42.8764 80.0955 44.431 78.9894 44.9968L76.9812 46.0213C75.8752 46.587 74.9781 45.9499 74.9781 44.5992C74.9781 43.2485 75.8752 41.7041 76.9812 41.1383ZM76.9812 50.8939L78.9894 49.8694C80.0955 49.3036 80.9925 49.9459 80.9925 51.2915C80.9925 52.6371 80.0955 54.1866 78.9894 54.7524L76.9812 55.7769C75.8752 56.3427 74.9781 55.7055 74.9781 54.3599C74.9781 53.0143 75.8752 51.4597 76.9812 50.8939ZM74.973 64.1156C74.973 62.77 75.8701 61.2205 76.9761 60.6548L78.9843 59.6303C80.0904 59.0645 80.9874 59.7016 80.9874 61.0472C80.9874 62.3928 80.0904 63.9475 78.9843 64.5132L76.9761 65.5376C75.8701 66.1034 74.973 65.4663 74.973 64.1156ZM87.007 82.3883L78.9894 86.4761V77.9386C78.9894 77.2607 79.438 76.4912 79.9935 76.2108L86.008 73.1475C86.5585 72.8672 87.0121 73.1831 87.0121 73.8559V82.3934L87.007 82.3883ZM89.0102 59.4111L87.007 60.4305C85.901 60.9963 85.0039 60.3591 85.0039 59.0084C85.0039 57.6577 85.901 56.1133 87.007 55.5475L89.0102 54.5281C90.1213 53.9624 91.0184 54.5995 91.0184 55.9451C91.0184 57.2907 90.1213 58.8453 89.0102 59.4111ZM89.0102 49.6452L87.007 50.6646C85.901 51.2303 85.0039 50.5932 85.0039 49.2476C85.0039 47.902 85.901 46.3475 87.007 45.7817L89.0102 44.7623C90.1213 44.1966 91.0184 44.8336 91.0184 46.1843C91.0184 47.535 90.1213 49.0794 89.0102 49.6452ZM89.0102 39.8896L87.007 40.909C85.901 41.4747 85.0039 40.8376 85.0039 39.4869C85.0039 38.1362 85.901 36.5918 87.007 36.026L89.0102 35.0066C90.1213 34.4408 91.0184 35.078 91.0184 36.4236C91.0184 37.7692 90.1213 39.3238 89.0102 39.8896ZM117.084 67.0617L115.081 68.0811V29.038C116.187 28.4723 117.084 26.9228 117.084 25.5771C117.084 24.2264 116.187 23.5893 115.081 24.1551L99.0359 32.3307V22.57C100.147 22.0042 101.044 20.4547 101.044 19.104C101.044 17.7584 100.147 17.1212 99.0359 17.687L66.9503 34.0331C65.8443 34.5989 64.9472 36.1484 64.9472 37.494C64.9472 38.8396 65.8443 39.4817 66.9503 38.916V92.5976L64.9472 93.617C63.8411 94.1828 62.939 95.7323 62.939 97.083C62.939 98.4337 63.8411 99.0607 64.9472 98.5L117.084 71.9344C118.19 71.3686 119.088 69.8191 119.088 68.4735C119.088 67.1279 118.19 66.4858 117.084 67.0515V67.0617Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-        strokeWidth="0.4"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M150.704 52.0596C152.106 51.3461 152.998 49.659 152.998 47.2583C152.998 42.9615 150.133 38.0175 146.606 36.2233C145.046 35.4282 143.619 35.3772 142.508 35.943L144.781 34.786C145.892 34.2202 147.32 34.2712 148.879 35.0663C152.412 36.8656 155.271 41.8096 155.271 46.1013C155.271 48.502 154.379 50.189 152.977 50.9026L150.704 52.0596Z"
+        d="M149.904 51.5675C151.306 50.8539 152.198 49.1668 152.198 46.7661C152.198 42.4693 149.333 37.5253 145.806 35.7312C144.246 34.936 142.819 34.885 141.708 35.4508L143.981 34.2938C145.092 33.728 146.52 33.779 148.079 34.5741C151.612 36.3734 154.471 41.3174 154.471 45.6091C154.471 48.0098 153.579 49.6968 152.177 50.4104L149.904 51.5675Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.4"
         strokeLinecap="round"
         strokeLinejoin="round"
@@ -256,43 +262,43 @@ export function CustomerVerticalStackIllustration({ className }: TIllustrationAs
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M150.704 52.0589C149.593 52.6246 148.166 52.5736 146.606 51.7785C143.074 49.9793 140.214 45.0352 140.214 40.7435C140.214 38.3429 141.106 36.6558 142.508 35.9422C143.619 35.3764 145.046 35.4274 146.606 36.2226C150.138 38.0218 152.998 42.9658 152.998 47.2575C152.998 49.6582 152.106 51.3453 150.704 52.0589Z"
+        d="M149.904 51.5667C148.793 52.1324 147.366 52.0814 145.806 51.2863C142.274 49.4871 139.414 44.543 139.414 40.2514C139.414 37.8507 140.306 36.1636 141.708 35.45C142.819 34.8842 144.246 34.9352 145.806 35.7304C149.338 37.5296 152.198 42.4737 152.198 46.7653C152.198 49.166 151.306 50.8531 149.904 51.5667Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.4"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
       <path
-        d="M146.209 46.1358C146.051 46.0542 145.923 45.8351 145.923 45.6414V43.2101C145.923 43.0164 146.051 42.9297 146.209 43.0062C146.367 43.0826 146.494 43.3069 146.494 43.5005V45.9318C146.494 46.1255 146.367 46.2122 146.209 46.1358Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M145.409 45.6436C145.251 45.562 145.123 45.3429 145.123 45.1492V42.7179C145.123 42.5242 145.251 42.4375 145.409 42.514C145.567 42.5904 145.694 42.8147 145.694 43.0084V45.4396C145.694 45.6333 145.567 45.72 145.409 45.6436Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
-        d="M149.211 43.8417L144.343 41.3594C144.144 41.2575 143.971 41.0026 143.925 40.7427C143.879 40.4827 143.976 40.2891 144.154 40.2738L146.402 40.08C146.642 40.0597 146.917 40.2024 147.157 40.4674L149.399 42.9497C149.578 43.1485 149.675 43.439 149.629 43.6531C149.583 43.8671 149.409 43.9487 149.211 43.8417ZM144.96 40.9822L148.594 42.8325L146.902 40.9618C146.82 40.8701 146.728 40.8242 146.652 40.8293L144.96 40.9771V40.9822Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M148.411 43.3495L143.543 40.8672C143.344 40.7653 143.171 40.5104 143.125 40.2505C143.079 39.9905 143.176 39.7969 143.354 39.7816L145.602 39.5879C145.842 39.5675 146.117 39.7102 146.357 39.9752L148.599 42.4575C148.778 42.6563 148.875 42.9468 148.829 43.1609C148.783 43.3749 148.609 43.4565 148.411 43.3495ZM144.16 40.49L147.794 42.3403L146.102 40.4696C146.02 40.3779 145.928 40.332 145.852 40.3371L144.16 40.4849V40.49Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
-        d="M147.35 46.7177C147.192 46.6362 147.065 46.417 147.065 46.2233V43.792C147.065 43.5983 147.192 43.5117 147.35 43.5882C147.508 43.6647 147.636 43.8889 147.636 44.0826V46.5139C147.636 46.7076 147.508 46.7942 147.35 46.7177Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M146.55 46.2255C146.392 46.144 146.265 45.9248 146.265 45.7311V43.2998C146.265 43.1062 146.392 43.0196 146.55 43.096C146.708 43.1725 146.836 43.3967 146.836 43.5904V46.0217C146.836 46.2154 146.708 46.302 146.55 46.2255Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
-        d="M148.492 47.2979C148.334 47.2163 148.207 46.9971 148.207 46.8034V44.3722C148.207 44.1785 148.334 44.0918 148.492 44.1683C148.65 44.2447 148.777 44.469 148.777 44.6627V47.0939C148.777 47.2876 148.65 47.3743 148.492 47.2979Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M147.692 46.8057C147.534 46.7242 147.407 46.5049 147.407 46.3112V43.88C147.407 43.6863 147.534 43.5996 147.692 43.6761C147.85 43.7525 147.977 43.9768 147.977 44.1705V46.6017C147.977 46.7954 147.85 46.8822 147.692 46.8057Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
-        d="M149.348 49.1231L144.21 46.5033C144.052 46.4218 143.925 46.2026 143.925 46.0089C143.925 45.8152 144.052 45.7285 144.21 45.805L149.348 48.4249C149.506 48.5065 149.634 48.7256 149.634 48.9193C149.634 49.113 149.506 49.1996 149.348 49.1231Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M148.548 48.6309L143.41 46.0111C143.252 45.9296 143.125 45.7104 143.125 45.5167C143.125 45.3231 143.252 45.2363 143.41 45.3128L148.548 47.9327C148.706 48.0143 148.834 48.2334 148.834 48.4271C148.834 48.6208 148.706 48.7074 148.548 48.6309Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
-        d="M145.067 45.5497C144.909 45.4682 144.781 45.249 144.781 45.0553V42.6241C144.781 42.4304 144.909 42.3438 145.067 42.4202C145.225 42.4967 145.352 42.7209 145.352 42.9146V45.3459C145.352 45.5396 145.225 45.6262 145.067 45.5497Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M144.267 45.0576C144.109 44.976 143.981 44.7568 143.981 44.5632V42.1319C143.981 41.9382 144.109 41.8516 144.267 41.928C144.425 42.0045 144.552 42.2288 144.552 42.4224V44.8537C144.552 45.0474 144.425 45.134 144.267 45.0576Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M8.16802 89.1169C5.96802 87.9969 4.56802 85.349 4.56802 81.581C4.56802 74.837 9.064 67.0771 14.6 64.2611L51.72 45.349C54.168 44.101 56.408 44.0209 58.152 44.9089L54.584 43.0929C52.84 42.2049 50.6 42.2849 48.152 43.5329L11.032 62.445C5.48803 65.269 1 73.029 1 79.765C1 83.533 2.4 86.1809 4.6 87.3009L8.16802 89.1169Z"
+        d="M7.36803 88.6247C5.16803 87.5047 3.76803 84.8568 3.76803 81.0888C3.76803 74.3448 8.26401 66.5849 13.8 63.7689L50.92 44.8568C53.368 43.6088 55.608 43.5287 57.352 44.4167L53.784 42.6007C52.04 41.7127 49.8 41.7927 47.352 43.0407L10.232 61.9529C4.68804 64.7769 0.200012 72.5368 0.200012 79.2728C0.200012 83.0408 1.60001 85.6887 3.80001 86.8087L7.36803 88.6247Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.4"
         strokeLinecap="round"
         strokeLinejoin="round"
@@ -300,55 +306,55 @@ export function CustomerVerticalStackIllustration({ className }: TIllustrationAs
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M8.16799 89.1173C9.91199 90.0053 12.152 89.9253 14.6 88.6773L51.72 69.7654C57.264 66.9414 61.752 59.1814 61.752 52.4454C61.752 48.6774 60.352 46.0293 58.152 44.9093C56.408 44.0213 54.168 44.1013 51.72 45.3493L14.6 64.2615C9.05598 67.0855 4.56799 74.8454 4.56799 81.5814C4.56799 85.3494 5.96799 87.9973 8.16799 89.1173Z"
+        d="M7.36801 88.6251C9.11201 89.5131 11.352 89.4331 13.8 88.1851L50.92 69.2732C56.464 66.4492 60.952 58.6892 60.952 51.9532C60.952 48.1852 59.552 45.5371 57.352 44.4171C55.608 43.5291 53.368 43.6092 50.92 44.8572L13.8 63.7693C8.25599 66.5933 3.76801 74.3532 3.76801 81.0892C3.76801 84.8572 5.16801 87.5051 7.36801 88.6251Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.4"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
       <path
-        d="M24.3996 71.6036C24.0956 71.7556 23.8556 71.5876 23.8556 71.2196V68.5716C23.8556 68.2036 24.0956 67.7876 24.3996 67.6276C24.7036 67.4676 24.9436 67.6436 24.9436 68.0116V70.6596C24.9436 71.0276 24.7036 71.4436 24.3996 71.6036Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M23.5996 71.1114C23.2956 71.2634 23.0556 71.0954 23.0556 70.7274V68.0794C23.0556 67.7114 23.2956 67.2954 23.5996 67.1354C23.9036 66.9754 24.1436 67.1514 24.1436 67.5194V70.1675C24.1436 70.5355 23.9036 70.9514 23.5996 71.1114Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
-        d="M25.4877 77.6756C25.1837 77.8276 24.9436 77.6596 24.9436 77.2916V75.2996C24.9436 74.9316 24.6956 74.7636 24.3996 74.9156C24.1036 75.0676 23.8556 75.4917 23.8556 75.8597V77.8517C23.8556 78.2197 23.6156 78.6357 23.3116 78.7957C23.0076 78.9557 22.7676 78.7797 22.7676 78.4117V76.4197C22.7676 75.3237 23.5036 74.0597 24.3996 73.5957C25.2956 73.1317 26.0317 73.6516 26.0317 74.7476V76.7396C26.0317 77.1076 25.7917 77.5236 25.4877 77.6836V77.6756Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M24.6877 77.1834C24.3837 77.3354 24.1436 77.1674 24.1436 76.7994V74.8074C24.1436 74.4394 23.8956 74.2714 23.5996 74.4234C23.3036 74.5754 23.0556 74.9995 23.0556 75.3675V77.3595C23.0556 77.7275 22.8156 78.1435 22.5116 78.3035C22.2076 78.4635 21.9677 78.2875 21.9677 77.9195V75.9275C21.9677 74.8315 22.7036 73.5675 23.5996 73.1035C24.4956 72.6395 25.2317 73.1594 25.2317 74.2554V76.2474C25.2317 76.6154 24.9917 77.0314 24.6877 77.1914V77.1834Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
-        d="M25.4877 69.7158L23.3116 70.8279C23.0076 70.9799 22.7676 70.812 22.7676 70.444C22.7676 70.076 23.0076 69.6598 23.3116 69.4998L25.4877 68.3879C25.7917 68.2359 26.0317 68.4039 26.0317 68.7719C26.0317 69.1399 25.7917 69.5558 25.4877 69.7158Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M24.6877 69.2237L22.5116 70.3358C22.2076 70.4878 21.9677 70.3198 21.9677 69.9518C21.9677 69.5838 22.2076 69.1676 22.5116 69.0076L24.6877 67.8957C24.9917 67.7437 25.2317 67.9117 25.2317 68.2797C25.2317 68.6477 24.9917 69.0637 24.6877 69.2237Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
-        d="M28.7596 76.013L20.0476 80.453C19.1436 80.909 18.4156 80.3969 18.4156 79.3009V73.3329C18.4156 72.2369 19.1516 70.9729 20.0476 70.5089L21.1357 69.957C21.4397 69.805 21.6797 69.9729 21.6797 70.3409C21.6797 70.7089 21.4397 71.1249 21.1357 71.2849L20.0476 71.837C19.7436 71.989 19.5036 72.413 19.5036 72.781V78.7489C19.5036 79.1169 19.7516 79.2849 20.0476 79.1329L28.7596 74.6929C29.0636 74.5409 29.3036 74.1169 29.3036 73.7489V69.773C29.3036 69.405 29.0556 69.237 28.7596 69.389L27.6717 69.9409C27.3677 70.0929 27.1277 69.925 27.1277 69.557C27.1277 69.189 27.3677 68.773 27.6717 68.613L28.7596 68.0611C29.6636 67.6051 30.3916 68.117 30.3916 69.213V73.189C30.3916 74.285 29.6556 75.549 28.7596 76.013Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M27.9597 75.5208L19.2476 79.9609C18.3436 80.4169 17.6157 79.9047 17.6157 78.8087V72.8407C17.6157 71.7447 18.3516 70.4807 19.2476 70.0167L20.3357 69.4648C20.6397 69.3128 20.8797 69.4807 20.8797 69.8487C20.8797 70.2167 20.6397 70.6327 20.3357 70.7927L19.2476 71.3448C18.9436 71.4968 18.7036 71.9208 18.7036 72.2888V78.2568C18.7036 78.6248 18.9516 78.7927 19.2476 78.6407L27.9597 74.2007C28.2637 74.0487 28.5036 73.6248 28.5036 73.2568V69.2808C28.5036 68.9128 28.2557 68.7448 27.9597 68.8968L26.8717 69.4487C26.5677 69.6007 26.3277 69.4328 26.3277 69.0648C26.3277 68.6968 26.5677 68.2808 26.8717 68.1208L27.9597 67.5689C28.8637 67.1129 29.5916 67.6248 29.5916 68.7208V72.6968C29.5916 73.7928 28.8557 75.0568 27.9597 75.5208Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
-        d="M27.6636 76.5638C27.3596 76.7158 27.1196 76.5478 27.1196 76.1798V65.5718C27.1196 65.2038 26.8716 65.0358 26.5756 65.1878L22.2156 67.4118C21.9116 67.5638 21.6716 67.9877 21.6716 68.3557V78.9638C21.6716 79.3318 21.4316 79.7477 21.1276 79.9077C20.8236 80.0677 20.5836 79.8917 20.5836 79.5237V68.9157C20.5836 67.8197 21.3196 66.5557 22.2156 66.0917L26.5756 63.8677C27.4796 63.4117 28.2076 63.9238 28.2076 65.0198V75.6278C28.2076 75.9958 27.9676 76.4118 27.6636 76.5718V76.5638Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M26.8636 76.0716C26.5596 76.2236 26.3196 76.0556 26.3196 75.6876V65.0796C26.3196 64.7116 26.0716 64.5436 25.7756 64.6956L21.4156 66.9196C21.1116 67.0716 20.8716 67.4956 20.8716 67.8636V78.4716C20.8716 78.8396 20.6316 79.2555 20.3276 79.4155C20.0236 79.5755 19.7836 79.3995 19.7836 79.0315V68.4235C19.7836 67.3275 20.5196 66.0635 21.4156 65.5995L25.7756 63.3755C26.6796 62.9195 27.4076 63.4316 27.4076 64.5276V75.1356C27.4076 75.5036 27.1676 75.9196 26.8636 76.0796V76.0716Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
-        d="M43.9842 64.9721C43.6722 65.1321 43.4161 64.9561 43.4161 64.5721C43.4161 64.1881 43.6641 63.7561 43.9761 63.5961C44.2881 63.4361 44.5441 63.6121 44.5441 63.9961C44.5441 64.3801 44.2881 64.8121 43.9761 64.9721H43.9842Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M43.1842 64.4799C42.8722 64.6399 42.6161 64.4639 42.6161 64.0799C42.6161 63.6959 42.8642 63.2639 43.1762 63.1039C43.4882 62.9439 43.7441 63.1199 43.7441 63.5039C43.7441 63.8879 43.4882 64.3199 43.1762 64.4799H43.1842Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
-        d="M46.2481 63.8217C45.9361 63.9817 45.6801 63.8057 45.6801 63.4217C45.6801 63.0377 45.9281 62.6057 46.2401 62.4457C46.5521 62.2857 46.8081 62.4617 46.8081 62.8457C46.8081 63.2297 46.5521 63.6617 46.2401 63.8217H46.2481Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M45.4481 63.3295C45.1361 63.4895 44.8801 63.3135 44.8801 62.9295C44.8801 62.5455 45.1281 62.1135 45.4401 61.9535C45.7521 61.7935 46.0081 61.9695 46.0081 62.3535C46.0081 62.7375 45.7521 63.1695 45.4401 63.3295H45.4481Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
-        d="M47.9441 66.3976L40.0241 70.4297C39.0881 70.9097 38.3281 70.3657 38.3281 69.2297V59.5896C38.3281 58.4536 39.0881 57.1337 40.0241 56.6617L41.1521 56.0855C42.0881 55.6055 42.8481 56.1495 42.8481 57.2855V60.4457L44.9361 57.7576C45.2641 57.3336 45.7201 57.1656 45.9921 57.3576C46.1521 57.4696 46.2401 57.6856 46.2401 57.9656V58.7176L48.3281 56.0297C48.6561 55.6057 49.1121 55.4377 49.3841 55.6297C49.5441 55.7417 49.6321 55.9577 49.6321 56.2377V63.4617C49.6321 64.5977 48.8721 65.9176 47.9361 66.3896L47.9441 66.3976ZM40.0241 58.0457C39.7121 58.2057 39.4561 58.6457 39.4561 59.0217V68.6617C39.4561 69.0377 39.7121 69.2217 40.0241 69.0617L47.9441 65.0297C48.2561 64.8697 48.5121 64.4297 48.5121 64.0537V57.4537L46.4241 60.1416C46.2321 60.3896 46.0081 60.5497 45.7841 60.6057C45.5601 60.6617 45.3761 60.5977 45.2481 60.4217C45.1601 60.3017 45.1121 60.1336 45.1121 59.9336V59.1816L43.0241 61.8695C42.8321 62.1175 42.6081 62.2776 42.3841 62.3336C42.1601 62.3896 41.9761 62.3256 41.8481 62.1576C41.7601 62.0376 41.7121 61.8617 41.7121 61.6617V57.8775C41.7121 57.5015 41.4561 57.3175 41.1441 57.4775L40.0161 58.0537L40.0241 58.0457Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M47.1441 65.9055L39.2241 69.9375C38.2881 70.4175 37.5281 69.8735 37.5281 68.7375V59.0975C37.5281 57.9615 38.2881 56.6415 39.2241 56.1695L40.3521 55.5933C41.2881 55.1133 42.0481 55.6573 42.0481 56.7933V59.9535L44.1361 57.2654C44.4641 56.8414 44.9201 56.6734 45.1921 56.8654C45.3521 56.9774 45.4401 57.1934 45.4401 57.4734V58.2254L47.5281 55.5375C47.8561 55.1135 48.3121 54.9455 48.5841 55.1375C48.7441 55.2495 48.8321 55.4655 48.8321 55.7455V62.9695C48.8321 64.1055 48.0721 65.4255 47.1361 65.8975L47.1441 65.9055ZM39.2241 57.5535C38.9121 57.7135 38.6561 58.1535 38.6561 58.5295V68.1695C38.6561 68.5455 38.9121 68.7295 39.2241 68.5695L47.1441 64.5375C47.4561 64.3775 47.7121 63.9375 47.7121 63.5615V56.9615L45.6241 59.6494C45.4321 59.8974 45.2081 60.0575 44.9841 60.1135C44.7601 60.1695 44.5761 60.1055 44.4481 59.9295C44.3601 59.8095 44.3121 59.6414 44.3121 59.4414V58.6894L42.2241 61.3773C42.0321 61.6253 41.8081 61.7854 41.5841 61.8414C41.3601 61.8974 41.1761 61.8334 41.0481 61.6654C40.9601 61.5454 40.9121 61.3695 40.9121 61.1695V57.3853C40.9121 57.0093 40.6561 56.8253 40.3441 56.9853L39.2161 57.5615L39.2241 57.5535Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
-        d="M41.7281 66.1244C41.4161 66.2844 41.1601 66.1084 41.1601 65.7244C41.1601 65.3404 41.4081 64.9085 41.7201 64.7485C42.0321 64.5885 42.2881 64.7645 42.2881 65.1485C42.2881 65.5325 42.0321 65.9644 41.7201 66.1244H41.7281Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M40.9281 65.6322C40.6161 65.7922 40.3601 65.6162 40.3601 65.2322C40.3601 64.8482 40.6081 64.4163 40.9201 64.2563C41.2321 64.0963 41.4881 64.2723 41.4881 64.6563C41.4881 65.0403 41.2321 65.4722 40.9201 65.6322H40.9281Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M47.7547 2.22619C46.6435 1.66042 45.2163 1.70632 43.6515 2.50655C40.1193 4.30579 37.2599 9.24996 37.2599 13.5416C37.2599 15.9372 38.1519 17.6294 39.5536 18.343L37.2803 17.1859C35.8786 16.4724 34.9866 14.7802 34.9866 12.3846C34.9866 8.08783 37.8512 3.14366 41.3783 1.34952C42.938 0.554384 44.3702 0.503389 45.4814 1.06916L47.7547 2.22619Z"
+        d="M46.9547 1.734C45.8435 1.16823 44.4163 1.21413 42.8516 2.01436C39.3193 3.8136 36.4599 8.75777 36.4599 13.0494C36.4599 15.445 37.3519 17.1372 38.7536 17.8508L36.4803 16.6938C35.0786 15.9802 34.1866 14.288 34.1866 11.8924C34.1866 7.59564 37.0512 2.65147 40.5783 0.857329C42.138 0.0621964 43.5702 0.0112014 44.6814 0.576969L46.9547 1.734Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.4"
         strokeLinecap="round"
         strokeLinejoin="round"
@@ -356,20 +362,20 @@ export function CustomerVerticalStackIllustration({ className }: TIllustrationAs
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M47.7546 2.22736C49.1563 2.94094 50.0483 4.63323 50.0483 7.02882C50.0483 11.3256 47.1837 16.2696 43.6566 18.0638C42.0969 18.8589 40.6647 18.9099 39.5535 18.3441C38.1519 17.6306 37.2599 15.9384 37.2599 13.5428C37.2599 9.24603 40.1244 4.30187 43.6515 2.50772C45.2112 1.71259 46.6435 1.66159 47.7546 2.22736Z"
+        d="M46.9546 1.73517C48.3563 2.44875 49.2483 4.14104 49.2483 6.53663C49.2483 10.8334 46.3838 15.7775 42.8566 17.5716C41.297 18.3667 39.8647 18.4177 38.7536 17.852C37.3519 17.1384 36.4599 15.4462 36.4599 13.0506C36.4599 8.75385 39.3244 3.80968 42.8515 2.01553C44.4112 1.2204 45.8435 1.1694 46.9546 1.73517Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.4"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
       <path
-        d="M47.2551 9.3276C47.0564 9.42954 46.8933 9.3174 46.8933 9.07275V6.88101L45.0889 7.7985C44.8901 7.90044 44.7271 7.7883 44.7271 7.54365C44.7271 7.29899 44.8901 7.02364 45.0889 6.9217L47.25 5.82079C47.4488 5.71885 47.6119 5.83099 47.6119 6.07564V8.70565C47.6119 8.95031 47.4488 9.22566 47.25 9.3276H47.2551Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M46.4552 8.83541C46.2564 8.93735 46.0933 8.82522 46.0933 8.58056V6.38882L44.2889 7.30631C44.0901 7.40825 43.9271 7.29611 43.9271 7.05146C43.9271 6.8068 44.0901 6.53145 44.2889 6.42951L46.4501 5.32861C46.6488 5.22667 46.812 5.3388 46.812 5.58346V8.21347C46.812 8.45812 46.6488 8.73347 46.4501 8.83541H46.4552Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
-        d="M40.048 14.7549C39.9562 14.8008 39.8645 14.8059 39.7931 14.7549C39.6504 14.653 39.6504 14.3777 39.7931 14.1331L42.1377 10.0912C42.2805 9.84653 42.5047 9.73439 42.6474 9.83123L44.1969 10.927L47.0054 6.07978C47.1481 5.83513 47.3724 5.72299 47.5151 5.81983C47.6578 5.92177 47.6578 6.19699 47.5151 6.44165L44.4518 11.7324C44.3091 11.9771 44.0848 12.0892 43.9421 11.9924L42.3926 10.8964L40.3028 14.5C40.2315 14.6224 40.1397 14.709 40.048 14.76V14.7549Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M39.248 14.2627C39.1562 14.3086 39.0645 14.3137 38.9931 14.2627C38.8504 14.1608 38.8504 13.8855 38.9931 13.6409L41.3378 9.599C41.4805 9.35434 41.7047 9.2422 41.8475 9.33905L43.3969 10.4349L46.2054 5.5876C46.3481 5.34294 46.5724 5.2308 46.7151 5.32764C46.8578 5.42958 46.8578 5.70481 46.7151 5.94946L43.6518 11.2402C43.5091 11.4849 43.2848 11.597 43.1421 11.5002L41.5926 10.4042L39.5028 14.0079C39.4315 14.1302 39.3397 14.2168 39.248 14.2678V14.2627Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
     </svg>
   );
diff --git a/packages/propel/src/empty-state/assets/vertical-stack/cycle.tsx b/packages/propel/src/empty-state/assets/vertical-stack/cycle.tsx
index 4db79f6c0..15c3ca0ae 100644
--- a/packages/propel/src/empty-state/assets/vertical-stack/cycle.tsx
+++ b/packages/propel/src/empty-state/assets/vertical-stack/cycle.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper";
 import type { TIllustrationAssetProps } from "../helper";
 
@@ -14,17 +20,17 @@ export function CycleVerticalStackIllustration({ className }: TIllustrationAsset
       <g clipPath="url(#clip0_446_128653)">
         <g opacity="0.2">
           <path
-            d="M10.364 131.59C10.364 133.53 11.8174 135.464 14.7191 136.947L52.0819 155.967C57.8905 158.923 67.3043 158.923 73.1129 155.967L151.624 116.002C154.525 114.525 155.979 112.59 155.979 110.651V116.844C155.979 118.783 154.525 120.718 151.624 122.195L73.1129 162.16C67.3043 165.116 57.8905 165.116 52.0819 162.16L14.7191 143.14C11.8123 141.662 10.364 139.723 10.364 137.783V131.59Z"
+            d="M10.364 131.09C10.364 133.03 11.8174 134.964 14.7191 136.447L52.0819 155.467C57.8905 158.423 67.3043 158.423 73.1129 155.467L151.624 115.502C154.525 114.025 155.979 112.09 155.979 110.151V116.344C155.979 118.283 154.525 120.218 151.624 121.695L73.1129 161.66C67.3043 164.616 57.8905 164.616 52.0819 161.66L14.7191 142.64C11.8123 141.162 10.364 139.223 10.364 137.283V131.09Z"
             fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-            stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+            stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
             strokeWidth="0.5"
             strokeLinecap="round"
             strokeLinejoin="round"
           />
           <path
-            d="M10.364 131.59C10.364 129.651 11.8174 127.716 14.7191 126.239L93.2298 86.2737C99.0383 83.3183 108.452 83.3183 114.261 86.2737L151.624 105.294C154.53 106.772 155.979 108.711 155.979 110.651C155.979 112.59 154.525 114.525 151.624 116.002L73.1129 155.967C67.3043 158.923 57.8905 158.923 52.0819 155.967L14.7191 136.947C11.8123 135.469 10.364 133.53 10.364 131.59Z"
+            d="M10.364 131.09C10.364 129.151 11.8174 127.216 14.7191 125.739L93.2298 85.7737C99.0383 82.8183 108.452 82.8183 114.261 85.7737L151.624 104.794C154.53 106.272 155.979 108.211 155.979 110.151C155.979 112.09 154.525 114.025 151.624 115.502L73.1129 155.467C67.3043 158.423 57.8905 158.423 52.0819 155.467L14.7191 136.447C11.8123 134.969 10.364 133.03 10.364 131.09Z"
             fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-            stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+            stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
             strokeWidth="0.5"
             strokeLinecap="round"
             strokeLinejoin="round"
@@ -32,34 +38,34 @@ export function CycleVerticalStackIllustration({ className }: TIllustrationAsset
         </g>
         <g opacity="0.6">
           <path
-            d="M10.364 112.021C10.364 113.96 11.8174 115.895 14.7191 117.377L52.0819 136.398C57.8905 139.353 67.3043 139.353 73.1129 136.398L151.624 96.433C154.525 94.9553 155.979 93.0209 155.979 91.0814V97.2745C155.979 99.214 154.525 101.148 151.624 102.626L73.1129 142.591C67.3043 145.546 57.8905 145.546 52.0819 142.591L14.7191 123.57C11.8123 122.093 10.364 120.153 10.364 118.214V112.021Z"
+            d="M10.364 111.521C10.364 113.46 11.8174 115.395 14.7191 116.877L52.0819 135.898C57.8905 138.853 67.3043 138.853 73.1129 135.898L151.624 95.933C154.525 94.4553 155.979 92.5209 155.979 90.5814V96.7745C155.979 98.714 154.525 100.648 151.624 102.126L73.1129 142.091C67.3043 145.046 57.8905 145.046 52.0819 142.091L14.7191 123.07C11.8123 121.593 10.364 119.653 10.364 117.714V111.521Z"
             fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-            stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+            stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
             strokeWidth="0.5"
             strokeLinecap="round"
             strokeLinejoin="round"
           />
           <path
-            d="M10.364 112.021C10.364 110.081 11.8174 108.147 14.7191 106.669L93.2298 66.7044C99.0383 63.7489 108.452 63.7489 114.261 66.7044L151.624 85.7247C154.53 87.2024 155.979 89.1419 155.979 91.0814C155.979 93.0209 154.525 94.9553 151.624 96.433L73.1129 136.398C67.3043 139.353 57.8905 139.353 52.0819 136.398L14.7191 117.377C11.8123 115.9 10.364 113.96 10.364 112.021Z"
+            d="M10.364 111.521C10.364 109.581 11.8174 107.647 14.7191 106.169L93.2298 66.2044C99.0383 63.2489 108.452 63.2489 114.261 66.2044L151.624 85.2247C154.53 86.7024 155.979 88.6419 155.979 90.5814C155.979 92.5209 154.525 94.4553 151.624 95.933L73.1129 135.898C67.3043 138.853 57.8905 138.853 52.0819 135.898L14.7191 116.877C11.8123 115.4 10.364 113.46 10.364 111.521Z"
             fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-            stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+            stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
             strokeWidth="0.5"
             strokeLinecap="round"
             strokeLinejoin="round"
           />
         </g>
         <path
-          d="M10.364 92.4565C10.364 94.396 11.8174 96.3304 14.7191 97.8132L52.0819 116.834C57.8905 119.789 67.3043 119.789 73.1129 116.834L151.624 76.8688C154.525 75.3911 155.979 73.4567 155.979 71.5172V77.7102C155.979 79.6497 154.525 81.5841 151.624 83.0618L73.1129 123.027C67.3043 125.982 57.8905 125.982 52.0819 123.027L14.7191 104.006C11.8123 102.529 10.364 100.589 10.364 98.6496V92.4565Z"
+          d="M10.364 91.9565C10.364 93.896 11.8174 95.8304 14.7191 97.3132L52.0819 116.334C57.8905 119.289 67.3043 119.289 73.1129 116.334L151.624 76.3688C154.525 74.8911 155.979 72.9567 155.979 71.0172V77.2102C155.979 79.1497 154.525 81.0841 151.624 82.5618L73.1129 122.527C67.3043 125.482 57.8905 125.482 52.0819 122.527L14.7191 103.506C11.8123 102.029 10.364 100.089 10.364 98.1496V91.9565Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.5"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
         <path
-          d="M10.364 92.4565C10.364 90.5171 11.8174 88.5827 14.7191 87.105L93.2298 47.1401C99.0383 44.1847 108.452 44.1847 114.261 47.1401L151.624 66.1605C154.53 67.6382 155.979 69.5777 155.979 71.5172C155.979 73.4567 154.525 75.3911 151.624 76.8688L73.1129 116.834C67.3043 119.789 57.8905 119.789 52.0819 116.834L14.7191 97.8132C11.8123 96.3355 10.364 94.396 10.364 92.4565Z"
+          d="M10.364 91.9565C10.364 90.0171 11.8174 88.0827 14.7191 86.605L93.2298 46.6401C99.0383 43.6847 108.452 43.6847 114.261 46.6401L151.624 65.6605C154.53 67.1382 155.979 69.0777 155.979 71.0172C155.979 72.9567 154.525 74.8911 151.624 76.3688L73.1129 116.334C67.3043 119.289 57.8905 119.289 52.0819 116.334L14.7191 97.3132C11.8123 95.8355 10.364 93.896 10.364 91.9565Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.5"
           strokeLinecap="round"
           strokeLinejoin="round"
@@ -67,17 +73,17 @@ export function CycleVerticalStackIllustration({ className }: TIllustrationAsset
         <path
           fillRule="evenodd"
           clipRule="evenodd"
-          d="M75.3829 85.4324C72.8304 85.4324 70.4628 84.868 68.3418 83.7597C68.3418 83.7597 68.3212 83.7494 68.3109 83.7443L64.1818 81.6457C58.0548 78.5261 54.5419 71.2197 54.5419 61.5992C54.5419 43.9231 66.3799 23.5174 80.9347 16.1083C84.4989 14.292 87.9707 13.3735 91.2473 13.3735C93.7433 13.3735 96.0698 13.9123 98.1601 14.9795L102.253 17.0627C102.294 17.0832 102.325 17.1037 102.361 17.1242C108.529 20.1772 112.088 27.5041 112.088 37.2016C112.088 54.8777 100.25 75.2885 85.6956 82.6976C82.1313 84.5139 78.6647 85.4324 75.388 85.4324H75.3829Z"
+          d="M75.3829 84.9324C72.8304 84.9324 70.4628 84.368 68.3418 83.2597C68.3418 83.2597 68.3212 83.2494 68.3109 83.2443L64.1818 81.1457C58.0548 78.0261 54.5419 70.7197 54.5419 61.0992C54.5419 43.4231 66.3799 23.0174 80.9347 15.6083C84.4989 13.792 87.9707 12.8735 91.2473 12.8735C93.7433 12.8735 96.0698 13.4123 98.1601 14.4795L102.253 16.5627C102.294 16.5832 102.325 16.6037 102.361 16.6242C108.529 19.6772 112.088 27.0041 112.088 36.7016C112.088 54.3777 100.25 74.7885 85.6956 82.1976C82.1313 84.0139 78.6647 84.9324 75.388 84.9324H75.3829Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
         />
         <path
-          d="M91.2422 13.8867C93.6766 13.8867 95.926 14.4203 97.9187 15.4362L102.012 17.5194C102.043 17.5348 102.063 17.5501 102.089 17.5604C107.882 20.4286 111.57 27.3554 111.57 37.2016C111.57 54.734 99.8754 74.8986 85.4593 82.241C81.8899 84.0573 78.4849 84.9193 75.388 84.9193C72.9023 84.9193 70.6066 84.3652 68.5831 83.3082C68.5677 83.3082 68.5575 83.2979 68.5421 83.2877L64.4129 81.1891C58.6916 78.2747 55.0555 71.3788 55.0555 61.6043C55.0555 44.0719 66.7497 23.9125 81.1658 16.5701C84.7352 14.7538 88.1402 13.8918 91.2422 13.8918M91.2422 12.8605C87.8834 12.8605 84.3346 13.7994 80.6984 15.6517C73.5494 19.2895 66.8421 26.0726 61.8142 34.749C56.7914 43.41 54.0284 52.9433 54.0284 61.5992C54.0284 71.4198 57.6439 78.8904 63.9507 82.1024L68.049 84.1856C68.0798 84.2061 68.1158 84.2215 68.1466 84.2369C70.3293 85.3708 72.7688 85.9455 75.388 85.9455C78.7468 85.9455 82.2905 85.0065 85.9267 83.1543C93.0757 79.5164 99.783 72.7333 104.811 64.0569C109.834 55.3959 112.597 45.8575 112.597 37.2016C112.597 27.3194 108.945 19.8334 102.582 16.6574C102.546 16.6368 102.51 16.6163 102.469 16.5958L98.3861 14.5178C96.2239 13.4146 93.8204 12.8605 91.2422 12.8605Z"
-          fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          d="M91.2422 13.3867C93.6766 13.3867 95.926 13.9203 97.9187 14.9362L102.012 17.0194C102.043 17.0348 102.063 17.0501 102.089 17.0604C107.882 19.9286 111.57 26.8554 111.57 36.7016C111.57 54.234 99.8754 74.3986 85.4593 81.741C81.8899 83.5573 78.4849 84.4193 75.388 84.4193C72.9023 84.4193 70.6066 83.8652 68.5831 82.8082C68.5677 82.8082 68.5575 82.7979 68.5421 82.7877L64.4129 80.6891C58.6916 77.7747 55.0555 70.8788 55.0555 61.1043C55.0555 43.5719 66.7497 23.4125 81.1658 16.0701C84.7352 14.2538 88.1402 13.3918 91.2422 13.3918M91.2422 12.3605C87.8834 12.3605 84.3346 13.2994 80.6984 15.1517C73.5494 18.7895 66.8421 25.5726 61.8142 34.249C56.7914 42.91 54.0284 52.4433 54.0284 61.0992C54.0284 70.9198 57.6439 78.3904 63.9507 81.6024L68.049 83.6856C68.0798 83.7061 68.1158 83.7215 68.1466 83.7369C70.3293 84.8708 72.7688 85.4455 75.388 85.4455C78.7468 85.4455 82.2905 84.5065 85.9267 82.6543C93.0757 79.0164 99.783 72.2333 104.811 63.5569C109.834 54.8959 112.597 45.3575 112.597 36.7016C112.597 26.8194 108.945 19.3334 102.582 16.1574C102.546 16.1368 102.51 16.1163 102.469 16.0958L98.3861 14.0178C96.2239 12.9146 93.8204 12.3605 91.2422 12.3605Z"
+          fill="var(--illustration-stroke-tertiary)"
         />
         <path
           fillRule="evenodd"
           clipRule="evenodd"
-          d="M102.012 17.5193C100.677 16.8677 99.2283 16.4265 97.6876 16.2212C97.5489 16.2007 97.4103 16.1802 97.2613 16.1699C95.7668 16.0057 94.185 16.057 92.5364 16.3341C92.1615 16.3957 91.7866 16.4675 91.4014 16.5547C91.3244 16.5752 91.2473 16.5906 91.1651 16.606C90.8365 16.6881 90.5026 16.7754 90.1688 16.8728C89.4909 17.0678 88.7976 17.3038 88.094 17.5706C87.6625 17.74 87.2209 17.9247 86.7792 18.1197C86.3427 18.3146 85.8958 18.5301 85.449 18.7559C71.0278 26.0983 59.3387 46.2577 59.3387 63.7901C59.3387 64.4058 59.3541 65.0112 59.3798 65.6116C59.3952 65.8938 59.4106 66.1811 59.4312 66.4582V66.4735C59.4466 66.7096 59.4671 66.9405 59.4877 67.1662C59.4877 67.2586 59.5031 67.3509 59.5185 67.4382C59.539 67.6639 59.5596 67.8846 59.5904 68.1052C59.6263 68.3976 59.6674 68.6901 59.7085 68.9774C59.7393 69.1776 59.7701 69.3777 59.8061 69.5726V69.588C59.8318 69.7266 59.8523 69.8651 59.8831 70.0036C59.9242 70.214 59.9602 70.4295 60.0064 70.6347C60.0475 70.8554 60.104 71.0811 60.1553 71.3018C60.2272 71.6045 60.2991 71.9021 60.3813 72.1945C60.4378 72.3998 60.4994 72.605 60.5611 72.8051C60.633 73.0463 60.7049 73.2823 60.787 73.5132C60.8487 73.7082 60.9103 73.8877 60.9822 74.0776C61.0079 74.1443 61.0284 74.2059 61.0541 74.2726C61.1311 74.4727 61.2133 74.6728 61.2955 74.8678C61.3828 75.0884 61.4752 75.3039 61.5728 75.5245C61.6498 75.7041 61.732 75.8785 61.8193 76.0479C61.8655 76.1556 61.9169 76.2531 61.9734 76.3557C62.035 76.4943 62.1069 76.6277 62.1788 76.7662C62.4664 77.3101 62.7746 77.8232 63.1084 78.3106C63.1649 78.4081 63.2317 78.5056 63.3036 78.5928C63.4217 78.7673 63.5449 78.9366 63.6682 79.1008C63.7504 79.2137 63.8325 79.3111 63.9198 79.4189C64.2023 79.7832 64.5053 80.1321 64.8186 80.4656C64.9162 80.5682 65.0138 80.6708 65.1113 80.7683C65.1524 80.8042 65.1884 80.8402 65.2295 80.8812C65.3065 80.9582 65.3835 81.03 65.4606 81.1018C65.5838 81.2198 65.7122 81.3327 65.8406 81.4456C66.005 81.5893 66.1693 81.7278 66.3388 81.8612C66.4415 81.9433 66.5391 82.0254 66.6469 82.1024C66.8062 82.2204 66.9654 82.3384 67.1348 82.4564C67.2684 82.5488 67.407 82.636 67.5406 82.7232C67.6279 82.7796 67.7203 82.8412 67.8076 82.8874C68.0439 83.0311 68.2853 83.1696 68.5318 83.2979L64.4026 81.1993C58.6814 78.285 55.0452 71.389 55.0452 61.6146C55.0452 44.0822 66.7394 23.9227 81.1555 16.5804C87.5342 13.3376 93.3787 13.1375 97.9136 15.4464L102.007 17.5296L102.012 17.5193Z"
+          d="M102.012 17.0193C100.677 16.3677 99.2283 15.9265 97.6876 15.7212C97.5489 15.7007 97.4103 15.6802 97.2613 15.6699C95.7668 15.5057 94.185 15.557 92.5364 15.8341C92.1615 15.8957 91.7866 15.9675 91.4014 16.0547C91.3244 16.0752 91.2473 16.0906 91.1651 16.106C90.8365 16.1881 90.5026 16.2754 90.1688 16.3728C89.4909 16.5678 88.7976 16.8038 88.094 17.0706C87.6625 17.24 87.2209 17.4247 86.7792 17.6197C86.3427 17.8146 85.8958 18.0301 85.449 18.2559C71.0278 25.5983 59.3387 45.7577 59.3387 63.2901C59.3387 63.9058 59.3541 64.5112 59.3798 65.1116C59.3952 65.3938 59.4106 65.6811 59.4312 65.9582V65.9735C59.4466 66.2096 59.4671 66.4405 59.4877 66.6662C59.4877 66.7586 59.5031 66.8509 59.5185 66.9382C59.539 67.1639 59.5596 67.3846 59.5904 67.6052C59.6263 67.8976 59.6674 68.1901 59.7085 68.4774C59.7393 68.6776 59.7701 68.8777 59.8061 69.0726V69.088C59.8318 69.2266 59.8523 69.3651 59.8831 69.5036C59.9242 69.714 59.9602 69.9295 60.0064 70.1347C60.0475 70.3554 60.104 70.5811 60.1553 70.8018C60.2272 71.1045 60.2991 71.4021 60.3813 71.6945C60.4378 71.8998 60.4994 72.105 60.5611 72.3051C60.633 72.5463 60.7049 72.7823 60.787 73.0132C60.8487 73.2082 60.9103 73.3877 60.9822 73.5776C61.0079 73.6443 61.0284 73.7059 61.0541 73.7726C61.1311 73.9727 61.2133 74.1728 61.2955 74.3678C61.3828 74.5884 61.4752 74.8039 61.5728 75.0245C61.6498 75.2041 61.732 75.3785 61.8193 75.5479C61.8655 75.6556 61.9169 75.7531 61.9734 75.8557C62.035 75.9943 62.1069 76.1277 62.1788 76.2662C62.4664 76.8101 62.7746 77.3232 63.1084 77.8106C63.1649 77.9081 63.2317 78.0056 63.3036 78.0928C63.4217 78.2673 63.5449 78.4366 63.6682 78.6008C63.7504 78.7137 63.8325 78.8111 63.9198 78.9189C64.2023 79.2832 64.5053 79.6321 64.8186 79.9656C64.9162 80.0682 65.0138 80.1708 65.1113 80.2683C65.1524 80.3042 65.1884 80.3402 65.2295 80.3812C65.3065 80.4582 65.3835 80.53 65.4606 80.6018C65.5838 80.7198 65.7122 80.8327 65.8406 80.9456C66.005 81.0893 66.1693 81.2278 66.3388 81.3612C66.4415 81.4433 66.5391 81.5254 66.6469 81.6024C66.8062 81.7204 66.9654 81.8384 67.1348 81.9564C67.2684 82.0488 67.407 82.136 67.5406 82.2232C67.6279 82.2796 67.7203 82.3412 67.8076 82.3874C68.0439 82.5311 68.2853 82.6696 68.5318 82.7979L64.4026 80.6993C58.6814 77.785 55.0452 70.889 55.0452 61.1146C55.0452 43.5822 66.7394 23.4227 81.1555 16.0804C87.5342 12.8376 93.3787 12.6375 97.9136 14.9464L102.007 17.0296L102.012 17.0193Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
           stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
           strokeWidth="0.5"
@@ -87,7 +93,7 @@ export function CycleVerticalStackIllustration({ className }: TIllustrationAsset
         <path
           fillRule="evenodd"
           clipRule="evenodd"
-          d="M111.57 37.2016C111.57 54.734 99.8754 74.8986 85.4593 82.2409C79.0242 85.5145 73.1334 85.6838 68.5831 83.3031C68.5677 83.3031 68.5575 83.2928 68.542 83.2825C68.2955 83.1594 68.0541 83.0157 67.8179 82.872C67.7306 82.8207 67.6381 82.7643 67.5508 82.7079C67.4173 82.6206 67.2786 82.5334 67.1451 82.4411C66.9756 82.323 66.8164 82.2102 66.6572 82.087C66.5494 82.0101 66.4518 81.928 66.3491 81.8459C66.1796 81.7176 66.0152 81.5739 65.8509 81.4303C65.7225 81.3174 65.5941 81.2096 65.4708 81.0865C65.3938 81.0146 65.3168 80.9428 65.2397 80.8659C65.1986 80.8248 65.1627 80.7889 65.1216 80.753C65.024 80.6555 64.9265 80.5529 64.8289 80.4502C64.5156 80.1167 64.2126 79.773 63.9301 79.4035C63.8428 79.2958 63.7606 79.1983 63.6785 79.0854C63.5552 78.9212 63.4319 78.7519 63.3138 78.5775C63.2471 78.4851 63.1854 78.3876 63.1187 78.2953C62.7848 77.8078 62.4767 77.2947 62.1891 76.7508C62.1172 76.6174 62.0453 76.4789 61.9837 76.3404C61.9272 76.2378 61.8758 76.1403 61.8296 76.0325C61.7423 75.8581 61.6601 75.6836 61.5831 75.5092C61.4803 75.2937 61.3879 75.0782 61.3057 74.8524C61.2236 74.6574 61.1414 74.4573 61.0644 74.2572C61.0387 74.1905 61.0181 74.1289 60.9924 74.0622C60.9257 73.8724 60.8641 73.6928 60.7973 73.4978C60.7151 73.2669 60.6432 73.0309 60.5713 72.7898C60.5097 72.5897 60.4532 72.3844 60.3916 72.1792C60.3094 71.8918 60.2375 71.5943 60.1656 71.2864C60.1142 71.0658 60.0577 70.84 60.0167 70.6194C59.9704 70.4141 59.9293 70.1986 59.8934 69.9883C59.8626 69.8549 59.842 69.7163 59.8164 69.5727V69.5573C59.7804 69.3623 59.7496 69.1622 59.7188 68.9621C59.6777 68.6799 59.6315 68.3823 59.6007 68.0898C59.5698 67.8692 59.5493 67.6486 59.5288 67.4228C59.5133 67.3304 59.5031 67.2381 59.4979 67.1509C59.4723 66.9251 59.4569 66.6942 59.4414 66.4582V66.4428C59.4158 66.1657 59.4004 65.8784 59.3901 65.5962C59.3593 65.001 59.349 64.3904 59.349 63.7747C59.349 46.2423 71.0432 26.0829 85.4593 18.7405C85.9061 18.5148 86.3529 18.3044 86.7895 18.1043C87.2311 17.9093 87.6728 17.7246 88.1042 17.5553C88.8027 17.2833 89.496 17.0473 90.1791 16.8575C90.518 16.76 90.8467 16.6728 91.1754 16.5907C91.2576 16.5701 91.3346 16.5547 91.4117 16.5393C91.7917 16.4521 92.1666 16.3803 92.5467 16.3187C94.1952 16.0468 95.7771 15.9903 97.2716 16.1545C97.4154 16.1699 97.554 16.1904 97.6978 16.2058C99.2334 16.4111 100.687 16.8575 102.022 17.504C102.053 17.5194 102.074 17.5348 102.099 17.545C107.892 20.4132 111.58 27.34 111.58 37.1862L111.57 37.2016Z"
+          d="M111.57 36.7016C111.57 54.234 99.8754 74.3986 85.4593 81.7409C79.0242 85.0145 73.1334 85.1838 68.5831 82.8031C68.5677 82.8031 68.5575 82.7928 68.542 82.7825C68.2955 82.6594 68.0541 82.5157 67.8179 82.372C67.7306 82.3207 67.6381 82.2643 67.5508 82.2079C67.4173 82.1206 67.2786 82.0334 67.1451 81.9411C66.9756 81.823 66.8164 81.7102 66.6572 81.587C66.5494 81.5101 66.4518 81.428 66.3491 81.3459C66.1796 81.2176 66.0152 81.0739 65.8509 80.9303C65.7225 80.8174 65.5941 80.7096 65.4708 80.5865C65.3938 80.5146 65.3168 80.4428 65.2397 80.3659C65.1986 80.3248 65.1627 80.2889 65.1216 80.253C65.024 80.1555 64.9265 80.0529 64.8289 79.9502C64.5156 79.6167 64.2126 79.273 63.9301 78.9035C63.8428 78.7958 63.7606 78.6983 63.6785 78.5854C63.5552 78.4212 63.4319 78.2519 63.3138 78.0775C63.2471 77.9851 63.1854 77.8876 63.1187 77.7953C62.7848 77.3078 62.4767 76.7947 62.1891 76.2508C62.1172 76.1174 62.0453 75.9789 61.9837 75.8404C61.9272 75.7378 61.8758 75.6403 61.8296 75.5325C61.7423 75.3581 61.6601 75.1836 61.5831 75.0092C61.4803 74.7937 61.3879 74.5782 61.3057 74.3524C61.2236 74.1574 61.1414 73.9573 61.0644 73.7572C61.0387 73.6905 61.0181 73.6289 60.9924 73.5622C60.9257 73.3724 60.8641 73.1928 60.7973 72.9978C60.7151 72.7669 60.6432 72.5309 60.5713 72.2898C60.5097 72.0897 60.4532 71.8844 60.3916 71.6792C60.3094 71.3918 60.2375 71.0943 60.1656 70.7864C60.1142 70.5658 60.0577 70.34 60.0167 70.1194C59.9704 69.9141 59.9293 69.6986 59.8934 69.4883C59.8626 69.3549 59.842 69.2163 59.8164 69.0727V69.0573C59.7804 68.8623 59.7496 68.6622 59.7188 68.4621C59.6777 68.1799 59.6315 67.8823 59.6007 67.5898C59.5698 67.3692 59.5493 67.1486 59.5288 66.9228C59.5133 66.8304 59.5031 66.7381 59.4979 66.6509C59.4723 66.4251 59.4569 66.1942 59.4414 65.9582V65.9428C59.4158 65.6657 59.4004 65.3784 59.3901 65.0962C59.3593 64.501 59.349 63.8904 59.349 63.2747C59.349 45.7423 71.0432 25.5829 85.4593 18.2405C85.9061 18.0148 86.3529 17.8044 86.7895 17.6043C87.2311 17.4093 87.6728 17.2246 88.1042 17.0553C88.8027 16.7833 89.496 16.5473 90.1791 16.3575C90.518 16.26 90.8467 16.1728 91.1754 16.0907C91.2576 16.0701 91.3346 16.0547 91.4117 16.0393C91.7917 15.9521 92.1666 15.8803 92.5467 15.8187C94.1952 15.5468 95.7771 15.4903 97.2716 15.6545C97.4154 15.6699 97.554 15.6904 97.6978 15.7058C99.2334 15.9111 100.687 16.3575 102.022 17.004C102.053 17.0194 102.074 17.0348 102.099 17.045C107.892 19.9132 111.58 26.84 111.58 36.6862L111.57 36.7016Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
           stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
           strokeWidth="0.5"
@@ -95,23 +101,23 @@ export function CycleVerticalStackIllustration({ className }: TIllustrationAsset
           strokeLinejoin="round"
         />
         <path
-          d="M89.1108 69.7574C88.9618 69.7574 88.8232 69.7266 88.6999 69.6599L84.4064 67.4741C84.0726 67.3048 83.8826 66.9559 83.8826 66.5095V30.1158C83.8826 29.4437 84.3345 28.7099 84.9046 28.4534C86.81 27.5914 88.6742 27.1553 90.4461 27.1553C91.9817 27.1553 93.4094 27.4837 94.6882 28.1353L98.9817 30.3211C99.3515 30.5109 99.7162 30.7315 100.065 30.9727C103.162 33.1636 104.872 37.2632 104.872 42.5224C104.872 47.7816 103.219 53.4051 100.214 58.5822C97.3999 63.4361 93.6559 67.3459 89.6655 69.5984C89.4857 69.701 89.2957 69.7523 89.1108 69.7523V69.7574Z"
+          d="M89.1108 69.2574C88.9618 69.2574 88.8232 69.2266 88.6999 69.1599L84.4064 66.9741C84.0726 66.8048 83.8826 66.4559 83.8826 66.0095V29.6158C83.8826 28.9437 84.3345 28.2099 84.9046 27.9534C86.81 27.0914 88.6742 26.6553 90.4461 26.6553C91.9817 26.6553 93.4094 26.9837 94.6882 27.6353L98.9817 29.8211C99.3515 30.0109 99.7162 30.2315 100.065 30.4727C103.162 32.6636 104.872 36.7632 104.872 42.0224C104.872 47.2816 103.219 52.9051 100.214 58.0822C97.3999 62.9361 93.6559 66.8459 89.6655 69.0984C89.4857 69.201 89.2957 69.2523 89.1108 69.2523V69.2574Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
         />
         <path
-          d="M90.4461 27.6633C91.8893 27.6633 93.24 27.9711 94.452 28.5868L98.7455 30.7726C99.0999 30.9522 99.4389 31.1574 99.7624 31.3883C102.7 33.4664 104.354 37.4685 104.354 42.5225C104.354 47.5764 102.705 53.2564 99.7624 58.3257C96.9942 63.0975 93.3016 66.9559 89.4087 69.1571C89.3008 69.2187 89.1981 69.2443 89.1057 69.2443C89.0389 69.2443 88.9773 69.229 88.9259 69.2033L84.6324 67.0175C84.4835 66.9406 84.391 66.7661 84.391 66.5096V30.1159C84.391 29.6387 84.7197 29.0948 85.1152 28.9204C86.9641 28.084 88.7616 27.6633 90.4461 27.6633ZM90.4461 26.6371C88.6024 26.6371 86.6662 27.0886 84.694 27.9814C83.9391 28.3252 83.369 29.2385 83.369 30.1107V66.5044C83.369 67.1407 83.6669 67.6692 84.1702 67.9257L88.4637 70.1115C88.664 70.2141 88.8797 70.2654 89.1108 70.2654C89.3881 70.2654 89.6552 70.1884 89.9171 70.0448C93.9847 67.7461 97.8006 63.7645 100.656 58.8388C103.707 53.5796 105.381 47.7868 105.381 42.5225C105.381 37.2581 103.599 32.8404 100.358 30.552C99.9935 30.2954 99.6083 30.0594 99.2129 29.8593L94.9194 27.6735C93.5687 26.986 92.0588 26.6371 90.4461 26.6371Z"
-          fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          d="M90.4461 27.1633C91.8893 27.1633 93.24 27.4711 94.452 28.0868L98.7455 30.2726C99.0999 30.4522 99.4389 30.6574 99.7624 30.8883C102.7 32.9664 104.354 36.9685 104.354 42.0225C104.354 47.0764 102.705 52.7564 99.7624 57.8257C96.9942 62.5975 93.3016 66.4559 89.4087 68.6571C89.3008 68.7187 89.1981 68.7443 89.1057 68.7443C89.0389 68.7443 88.9773 68.729 88.9259 68.7033L84.6324 66.5175C84.4835 66.4406 84.391 66.2661 84.391 66.0096V29.6159C84.391 29.1387 84.7197 28.5948 85.1152 28.4204C86.9641 27.584 88.7616 27.1633 90.4461 27.1633ZM90.4461 26.1371C88.6024 26.1371 86.6662 26.5886 84.694 27.4814C83.9391 27.8252 83.369 28.7385 83.369 29.6107V66.0044C83.369 66.6407 83.6669 67.1692 84.1702 67.4257L88.4637 69.6115C88.664 69.7141 88.8797 69.7654 89.1108 69.7654C89.3881 69.7654 89.6552 69.6884 89.9171 69.5448C93.9847 67.2461 97.8006 63.2645 100.656 58.3388C103.707 53.0796 105.381 47.2868 105.381 42.0225C105.381 36.7581 103.599 32.3404 100.358 30.052C99.9935 29.7954 99.6083 29.5594 99.2129 29.3593L94.9194 27.1735C93.5687 26.486 92.0588 26.1371 90.4461 26.1371Z"
+          fill="var(--illustration-stroke-tertiary)"
         />
         <path
-          d="M98.7455 30.7725C96.1212 29.4385 92.8394 29.5462 89.4087 31.1009C89.0184 31.2805 88.6846 31.8192 88.6846 32.2964V68.6901C88.6846 68.9467 88.777 69.1211 88.9259 69.1981L84.6324 67.0123C84.4835 66.9353 84.3911 66.7609 84.3911 66.5043V30.1158C84.3911 29.6386 84.7197 29.0947 85.1152 28.9203C88.5459 27.3656 91.8277 27.2578 94.452 28.5919L98.7455 30.7777V30.7725Z"
+          d="M98.7455 30.2725C96.1212 28.9385 92.8394 29.0462 89.4087 30.6009C89.0184 30.7805 88.6846 31.3192 88.6846 31.7964V68.1901C88.6846 68.4467 88.777 68.6211 88.9259 68.6981L84.6324 66.5123C84.4835 66.4353 84.3911 66.2609 84.3911 66.0043V29.6158C84.3911 29.1386 84.7197 28.5947 85.1152 28.4203C88.5459 26.8656 91.8277 26.7578 94.452 28.0919L98.7455 30.2777V30.2725Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.5"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
         <path
-          d="M98.7456 30.7725C99.0999 30.9521 99.4389 31.1574 99.7624 31.3882C102.7 33.4663 104.349 37.4684 104.349 42.5224C104.349 47.5763 102.7 53.2563 99.7624 58.3256C96.9943 63.0974 93.3016 66.9559 89.4087 69.157C89.2238 69.2597 89.0595 69.2699 88.926 69.2032C88.777 69.1263 88.6846 68.9518 88.6846 68.6953V32.3016C88.6846 31.8244 89.0133 31.2805 89.4087 31.106C92.8394 29.5514 96.1212 29.4436 98.7456 30.7777V30.7725Z"
+          d="M98.7456 30.2725C99.0999 30.4521 99.4389 30.6574 99.7624 30.8882C102.7 32.9663 104.349 36.9684 104.349 42.0224C104.349 47.0763 102.7 52.7563 99.7624 57.8256C96.9943 62.5974 93.3016 66.4559 89.4087 68.657C89.2238 68.7597 89.0595 68.7699 88.926 68.7032C88.777 68.6263 88.6846 68.4518 88.6846 68.1953V31.8016C88.6846 31.3244 89.0133 30.7805 89.4087 30.606C92.8394 29.0514 96.1212 28.9436 98.7456 30.2777V30.2725Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
           stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
           strokeWidth="0.5"
@@ -121,9 +127,9 @@ export function CycleVerticalStackIllustration({ className }: TIllustrationAsset
         <path
           fillRule="evenodd"
           clipRule="evenodd"
-          d="M52.5236 2.17268C51.404 1.60315 49.966 1.64933 48.3893 2.45488C44.8302 4.2661 41.949 9.24311 41.949 13.5634C41.949 15.9749 42.8478 17.6784 44.2601 18.3967L41.9695 17.232C40.5572 16.5136 39.6584 14.8102 39.6584 12.3986C39.6584 8.07326 42.5448 3.09625 46.0987 1.29016C47.6703 0.489736 49.1134 0.438427 50.233 1.00796L52.5236 2.17268Z"
+          d="M52.5236 1.67268C51.404 1.10315 49.966 1.14933 48.3893 1.95488C44.8302 3.7661 41.949 8.74311 41.949 13.0634C41.949 15.4749 42.8478 17.1784 44.2601 17.8967L41.9695 16.732C40.5572 16.0136 39.6584 14.3102 39.6584 11.8986C39.6584 7.57326 42.5448 2.59625 46.0987 0.790162C47.6703 -0.0102638 49.1134 -0.0615732 50.233 0.507961L52.5236 1.67268Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.5"
           strokeLinecap="round"
           strokeLinejoin="round"
@@ -131,23 +137,23 @@ export function CycleVerticalStackIllustration({ className }: TIllustrationAsset
         <path
           fillRule="evenodd"
           clipRule="evenodd"
-          d="M52.5236 2.17263C53.9359 2.89096 54.8347 4.59443 54.8347 7.00597C54.8347 11.3313 51.9484 16.3084 48.3944 18.1144C46.8229 18.9149 45.3797 18.9662 44.2601 18.3966C42.8478 17.6783 41.949 15.9748 41.949 13.5633C41.949 9.23793 44.8353 4.26092 48.3893 2.45483C49.9608 1.65441 51.404 1.6031 52.5236 2.17263Z"
+          d="M52.5236 1.67263C53.9359 2.39096 54.8347 4.09443 54.8347 6.50597C54.8347 10.8313 51.9484 15.8084 48.3944 17.6144C46.8229 18.4149 45.3797 18.4662 44.2601 17.8966C42.8478 17.1783 41.949 15.4748 41.949 13.0633C41.949 8.73793 44.8353 3.76092 48.3893 1.95483C49.9608 1.15441 51.404 1.1031 52.5236 1.67263Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.5"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
         <path
-          d="M49.0158 7.01632C50.7363 6.13894 52.1332 7.12407 52.1332 9.21749C52.1332 11.3109 50.7363 13.7173 49.0158 14.5896C47.2953 15.4618 45.8984 14.4818 45.8984 12.3884C45.8984 10.295 47.2953 7.88858 49.0158 7.01632ZM49.0158 7.8578C47.6754 8.54021 46.5917 10.413 46.5917 12.0395C46.5917 13.666 47.6754 14.4357 49.0158 13.7532C50.3563 13.0708 51.4399 11.198 51.4399 9.57153C51.4399 7.94502 50.3563 7.17538 49.0158 7.8578ZM49.8427 8.8532C49.9814 8.60691 50.2073 8.49403 50.3511 8.59665C50.4898 8.69927 50.4898 8.97634 50.3511 9.22263L49.2777 11.0954C49.1391 11.3417 48.908 11.4546 48.7693 11.352C48.6306 11.2493 48.6306 10.9723 48.7693 10.726L49.8478 8.8532H49.8427ZM49.7092 5.10249C49.8992 5.005 50.0532 5.11275 50.0532 5.34877C50.0532 5.58479 49.8992 5.8516 49.7092 5.94396L48.3225 6.6469C48.1325 6.74439 47.9784 6.6315 47.9784 6.40061C47.9784 6.16972 48.1325 5.90291 48.3225 5.80542L49.7092 5.10249Z"
-          fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          d="M49.0158 6.51632C50.7363 5.63894 52.1332 6.62407 52.1332 8.71749C52.1332 10.8109 50.7363 13.2173 49.0158 14.0896C47.2953 14.9618 45.8984 13.9818 45.8984 11.8884C45.8984 9.79499 47.2953 7.38858 49.0158 6.51632ZM49.0158 7.3578C47.6754 8.04021 46.5917 9.913 46.5917 11.5395C46.5917 13.166 47.6754 13.9357 49.0158 13.2532C50.3563 12.5708 51.4399 10.698 51.4399 9.07153C51.4399 7.44502 50.3563 6.67538 49.0158 7.3578ZM49.8427 8.3532C49.9814 8.10691 50.2073 7.99403 50.3511 8.09665C50.4898 8.19927 50.4898 8.47634 50.3511 8.72263L49.2777 10.5954C49.1391 10.8417 48.908 10.9546 48.7693 10.852C48.6306 10.7493 48.6306 10.4723 48.7693 10.226L49.8478 8.3532H49.8427ZM49.7092 4.60249C49.8992 4.505 50.0532 4.61275 50.0532 4.84877C50.0532 5.08479 49.8992 5.3516 49.7092 5.44396L48.3225 6.1469C48.1325 6.24439 47.9784 6.1315 47.9784 5.90061C47.9784 5.66972 48.1325 5.40291 48.3225 5.30542L49.7092 4.60249Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
         />
         <path
           fillRule="evenodd"
           clipRule="evenodd"
-          d="M156.646 39.1513C157.222 38.8588 157.586 38.1661 157.586 37.181V24.5999C157.586 22.8349 156.41 20.8031 154.957 20.0642L122.375 3.48102C121.733 3.15264 121.143 3.13725 120.686 3.36814L122.976 2.20342C123.433 1.97253 124.024 1.98792 124.666 2.3163L157.252 18.9046C158.706 19.6435 159.882 21.6753 159.882 23.4404V36.0214C159.882 37.0065 159.517 37.6992 158.942 37.9917L156.651 39.1564L156.646 39.1513Z"
+          d="M156.646 38.6513C157.222 38.3588 157.586 37.6661 157.586 36.681V24.0999C157.586 22.3349 156.41 20.3031 154.957 19.5642L122.375 2.98102C121.733 2.65264 121.143 2.63725 120.686 2.86814L122.976 1.70342C123.433 1.47253 124.024 1.48792 124.666 1.8163L157.252 18.4046C158.706 19.1435 159.882 21.1753 159.882 22.9404V35.5214C159.882 36.5065 159.517 37.1992 158.942 37.4917L156.651 38.6564L156.646 38.6513Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.5"
           strokeLinecap="round"
           strokeLinejoin="round"
@@ -155,9 +161,9 @@ export function CycleVerticalStackIllustration({ className }: TIllustrationAsset
         <path
           fillRule="evenodd"
           clipRule="evenodd"
-          d="M156.646 39.1512C156.189 39.3821 155.599 39.3667 154.957 39.0383L122.37 22.45C120.917 21.7112 119.741 19.6793 119.741 17.9143V5.33837C119.741 4.35323 120.105 3.66056 120.68 3.36809C121.138 3.1372 121.728 3.15259 122.37 3.48097L154.957 20.0693C156.41 20.8081 157.586 22.84 157.586 24.605V37.1861C157.586 38.1712 157.222 38.8639 156.646 39.1563V39.1512Z"
+          d="M156.646 38.6512C156.189 38.8821 155.599 38.8667 154.957 38.5383L122.37 21.95C120.917 21.2112 119.741 19.1793 119.741 17.4143V4.83837C119.741 3.85323 120.105 3.16056 120.68 2.86809C121.138 2.6372 121.728 2.65259 122.37 2.98097L154.957 19.5693C156.41 20.3081 157.586 22.34 157.586 24.105V36.6861C157.586 37.6712 157.222 38.3639 156.646 38.6563V38.6512Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.5"
           strokeLinecap="round"
           strokeLinejoin="round"
@@ -165,39 +171,39 @@ export function CycleVerticalStackIllustration({ className }: TIllustrationAsset
         <path
           fillRule="evenodd"
           clipRule="evenodd"
-          d="M133.628 17.3038L141.188 21.152C141.809 21.4701 142.312 21.111 142.312 20.3567C142.312 19.6025 141.809 18.7302 141.188 18.4172L133.628 14.569C133.006 14.2509 132.503 14.6101 132.503 15.3643C132.503 16.1186 133.006 16.9908 133.628 17.3038Z"
-          fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          d="M133.628 16.8038L141.188 20.652C141.809 20.9701 142.312 20.611 142.312 19.8567C142.312 19.1025 141.809 18.2302 141.188 17.9172L133.628 14.069C133.006 13.7509 132.503 14.1101 132.503 14.8643C132.503 15.6186 133.006 16.4908 133.628 16.8038Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
         />
         <path
           fillRule="evenodd"
           clipRule="evenodd"
-          d="M134.167 23.6251L144.767 29.0229C145.64 29.4641 146.344 28.9664 146.344 27.9094C146.344 26.8473 145.635 25.6313 144.767 25.1901L134.167 19.7923C133.294 19.351 132.59 19.8488 132.59 20.9057C132.59 21.9678 133.299 23.1839 134.167 23.6251Z"
-          fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          d="M134.167 23.1251L144.767 28.5229C145.64 28.9641 146.344 28.4664 146.344 27.4094C146.344 26.3473 145.635 25.1313 144.767 24.6901L134.167 19.2923C133.294 18.851 132.59 19.3488 132.59 20.4057C132.59 21.4678 133.299 22.6839 134.167 23.1251Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
         />
         <path
           fillRule="evenodd"
           clipRule="evenodd"
-          d="M127.285 13.3991C127.336 13.5684 127.455 13.7326 127.588 13.7993C127.773 13.8968 127.927 13.7839 127.927 13.553V13.1271C127.927 12.9886 127.876 12.8295 127.783 12.7064C127.691 12.5832 127.578 12.5063 127.47 12.5011L125.287 12.4396C125.159 12.4396 125.072 12.5473 125.072 12.7218V15.6567C125.072 15.8055 125.133 15.9697 125.231 16.0979C125.333 16.2262 125.457 16.2929 125.559 16.2775L125.873 16.2313C126.037 16.2057 126.099 15.985 126.017 15.7388C125.96 15.5746 125.857 15.4412 125.744 15.3745V13.3478L127.28 13.3888L127.285 13.3991Z"
-          fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          d="M127.285 12.8991C127.336 13.0684 127.455 13.2326 127.588 13.2993C127.773 13.3968 127.927 13.2839 127.927 13.053V12.6271C127.927 12.4886 127.876 12.3295 127.783 12.2064C127.691 12.0832 127.578 12.0063 127.47 12.0011L125.287 11.9396C125.159 11.9396 125.072 12.0473 125.072 12.2218V15.1567C125.072 15.3055 125.133 15.4697 125.231 15.5979C125.333 15.7262 125.457 15.7929 125.559 15.7775L125.873 15.7313C126.037 15.7057 126.099 15.485 126.017 15.2388C125.96 15.0746 125.857 14.9412 125.744 14.8745V12.8478L127.28 12.8888L127.285 12.8991Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
         />
         <path
           fillRule="evenodd"
           clipRule="evenodd"
-          d="M125.939 11.4596C125.991 11.6289 126.109 11.7931 126.242 11.8598C126.427 11.9573 126.581 11.8444 126.581 11.6135V11.1877C126.581 11.0491 126.53 10.8901 126.438 10.7669C126.345 10.6438 126.232 10.5668 126.124 10.5617L123.942 10.5001C123.813 10.5001 123.726 10.6079 123.726 10.7823V13.7172C123.726 13.866 123.788 14.0302 123.885 14.1585C123.988 14.2868 124.111 14.3535 124.214 14.3381L124.527 14.2919C124.691 14.2662 124.753 14.0456 124.671 13.7993C124.614 13.6351 124.512 13.5017 124.399 13.435V11.4083L125.934 11.4493L125.939 11.4596Z"
-          fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          d="M125.939 10.9596C125.991 11.1289 126.109 11.2931 126.242 11.3598C126.427 11.4573 126.581 11.3444 126.581 11.1135V10.6877C126.581 10.5491 126.53 10.3901 126.438 10.2669C126.345 10.1438 126.232 10.0668 126.124 10.0617L123.942 10.0001C123.813 10.0001 123.726 10.1079 123.726 10.2823V13.2172C123.726 13.366 123.788 13.5302 123.885 13.6585C123.988 13.7868 124.111 13.8535 124.214 13.8381L124.527 13.7919C124.691 13.7662 124.753 13.5456 124.671 13.2993C124.614 13.1351 124.512 13.0017 124.399 12.935V10.9083L125.934 10.9493L125.939 10.9596Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
         />
         <path
           fillRule="evenodd"
           clipRule="evenodd"
-          d="M129.267 14.7177C129.175 14.5895 129.062 14.5125 128.959 14.5125L126.777 14.4509C126.648 14.4509 126.561 14.5638 126.561 14.728V17.668C126.561 17.8066 126.612 17.9605 126.705 18.0836C126.802 18.2119 126.915 18.2889 127.018 18.2889L129.196 18.3504C129.329 18.3607 129.416 18.2478 129.416 18.0734V15.1333C129.416 14.9948 129.365 14.8409 129.267 14.7177ZM128.744 17.4474L127.234 17.4012V15.3642L128.744 15.4104V17.4474Z"
-          fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          d="M129.267 14.2177C129.175 14.0895 129.062 14.0125 128.959 14.0125L126.777 13.9509C126.648 13.9509 126.561 14.0638 126.561 14.228V17.168C126.561 17.3066 126.612 17.4605 126.705 17.5836C126.802 17.7119 126.915 17.7889 127.018 17.7889L129.196 17.8504C129.329 17.8607 129.416 17.7478 129.416 17.5734V14.6333C129.416 14.4948 129.365 14.3409 129.267 14.2177ZM128.744 16.9474L127.234 16.9012V14.8642L128.744 14.9104V16.9474Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
         />
         <path
           fillRule="evenodd"
           clipRule="evenodd"
-          d="M4.73004 55.0521C3.3177 54.3338 2.41894 52.6354 2.41894 50.2188C2.41894 45.8934 5.30525 40.9164 8.85921 39.1103L32.6892 26.9808C34.2608 26.1803 35.6988 26.129 36.8184 26.6986L34.5278 25.5338C33.4082 24.9643 31.9702 25.0156 30.3987 25.816L6.56865 37.9456C3.01469 39.7517 0.128387 44.7287 0.128387 49.054C0.128387 51.4707 1.02715 53.169 2.43949 53.8874L4.73004 55.0521Z"
+          d="M4.73004 54.5521C3.3177 53.8338 2.41894 52.1354 2.41894 49.7188C2.41894 45.3934 5.30525 40.4164 8.85921 38.6103L32.6892 26.4808C34.2608 25.6803 35.6988 25.629 36.8184 26.1986L34.5278 25.0338C33.4082 24.4643 31.9702 24.5156 30.3987 25.316L6.56865 37.4456C3.01469 39.2517 0.128387 44.2287 0.128387 48.554C0.128387 50.9707 1.02715 52.669 2.43949 53.3874L4.73004 54.5521Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.5"
           strokeLinecap="round"
           strokeLinejoin="round"
@@ -205,44 +211,39 @@ export function CycleVerticalStackIllustration({ className }: TIllustrationAsset
         <path
           fillRule="evenodd"
           clipRule="evenodd"
-          d="M4.73004 55.052C5.84964 55.6216 7.28766 55.5703 8.85921 54.7698L32.6892 42.6403C36.2483 40.8291 39.1295 35.8521 39.1295 31.5318C39.1295 29.1152 38.2307 27.4168 36.8184 26.6985C35.6988 26.129 34.2608 26.1803 32.6892 26.9807L8.85921 39.1102C5.30012 40.9215 2.41895 45.8985 2.41895 50.2187C2.41895 52.6354 3.31771 54.3337 4.73004 55.052Z"
+          d="M4.73004 54.552C5.84964 55.1216 7.28766 55.0703 8.85921 54.2698L32.6892 42.1403C36.2483 40.3291 39.1295 35.3521 39.1295 31.0318C39.1295 28.6152 38.2307 26.9168 36.8184 26.1985C35.6988 25.629 34.2608 25.6803 32.6892 26.4807L8.85921 38.6102C5.30012 40.4215 2.41895 45.3985 2.41895 49.7187C2.41895 52.1354 3.31771 53.8337 4.73004 54.552Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.5"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
         <path
-          d="M12.1153 43.7692C12.2026 43.6358 12.331 43.5793 12.4132 43.6358C12.4953 43.6922 12.5005 43.8461 12.4286 43.9898L12.4132 44.0206L9.30088 49.3927C9.21357 49.5415 9.07491 49.6133 8.9876 49.5517C8.90029 49.4902 8.90029 49.3208 8.9876 49.1669L12.0999 43.7948L12.1153 43.7692Z"
-          fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          d="M12.1153 43.2692C12.2026 43.1358 12.331 43.0793 12.4132 43.1358C12.4953 43.1922 12.5005 43.3461 12.4286 43.4898L12.4132 43.5206L9.30088 48.8927C9.21357 49.0415 9.07491 49.1133 8.9876 49.0517C8.90029 48.9902 8.90029 48.8208 8.9876 48.6669L12.0999 43.2948L12.1153 43.2692Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
         />
         <path
-          d="M9.80932 45.5548C9.80932 45.329 9.66038 45.2264 9.47549 45.3187C9.29061 45.4111 9.14167 45.6676 9.14167 45.8934C9.14167 46.1192 9.29061 46.2218 9.47549 46.1294C9.66038 46.0371 9.80932 45.7805 9.80932 45.5548ZM10.2561 45.329C10.2561 45.8524 9.9069 46.4527 9.47549 46.6733C9.04409 46.8939 8.69485 46.6476 8.69485 46.1243C8.69485 45.6009 9.04409 45.0006 9.47549 44.78C9.9069 44.5594 10.2561 44.8056 10.2561 45.329Z"
-          fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          d="M9.80932 45.0548C9.80932 44.829 9.66038 44.7264 9.47549 44.8187C9.29061 44.9111 9.14167 45.1676 9.14167 45.3934C9.14167 45.6192 9.29061 45.7218 9.47549 45.6294C9.66038 45.5371 9.80932 45.2805 9.80932 45.0548ZM10.2561 44.829C10.2561 45.3524 9.9069 45.9527 9.47549 46.1733C9.04409 46.3939 8.69485 46.1476 8.69485 45.6243C8.69485 45.1009 9.04409 44.5006 9.47549 44.28C9.9069 44.0594 10.2561 44.3056 10.2561 44.829Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
         />
         <path
-          d="M12.2591 47.2839C12.2591 47.0581 12.1102 46.9555 11.9253 47.0479C11.7404 47.1402 11.5914 47.3968 11.5914 47.6225C11.5914 47.8483 11.7404 47.9509 11.9253 47.8586C12.1102 47.7662 12.2591 47.5096 12.2591 47.2839ZM12.7008 47.0581C12.7008 47.5815 12.3515 48.1818 11.9201 48.4024C11.4887 48.6231 11.1395 48.3768 11.1395 47.8534C11.1395 47.3301 11.4887 46.7297 11.9201 46.5091C12.3515 46.2885 12.7008 46.5348 12.7008 47.0581Z"
-          fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          d="M12.2591 46.7839C12.2591 46.5581 12.1102 46.4555 11.9253 46.5479C11.7404 46.6402 11.5914 46.8968 11.5914 47.1225C11.5914 47.3483 11.7404 47.4509 11.9253 47.3586C12.1102 47.2662 12.2591 47.0096 12.2591 46.7839ZM12.7008 46.5581C12.7008 47.0815 12.3515 47.6818 11.9201 47.9024C11.4887 48.1231 11.1395 47.8768 11.1395 47.3534C11.1395 46.8301 11.4887 46.2297 11.9201 46.0091C12.3515 45.7885 12.7008 46.0348 12.7008 46.5581Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
         />
         <path
-          d="M10.6259 41.7989C10.6259 41.6552 10.7235 41.491 10.8416 41.4346C11.5349 41.1267 12.2077 41.0241 12.8086 41.1524C13.4711 41.2909 14.0104 41.6963 14.3853 42.3223C14.7551 42.9482 14.94 43.7794 14.9194 44.7184C14.8989 45.6625 14.6678 46.6835 14.262 47.6789C13.8512 48.6743 13.276 49.6082 12.5981 50.3829C11.915 51.1577 11.1549 51.7426 10.3897 52.0762C9.62443 52.4097 8.88488 52.4866 8.24805 52.2917C7.67284 52.1121 7.19521 51.7221 6.86652 51.1475C6.81003 51.05 6.85625 50.8704 6.9641 50.7524C7.07195 50.6344 7.20035 50.6241 7.25684 50.7216C7.55472 51.2295 7.97585 51.5733 8.48943 51.7324C9.06464 51.9068 9.72715 51.8401 10.4153 51.5374C11.1035 51.2347 11.7917 50.7113 12.4029 50.0135C13.014 49.3157 13.5328 48.4794 13.9025 47.5815C14.2723 46.6835 14.4726 45.7651 14.4932 44.9134C14.5137 44.0668 14.3494 43.3177 14.0155 42.7532C13.6817 42.1888 13.1938 41.8246 12.5981 41.7014C12.0639 41.5885 11.4682 41.6758 10.8519 41.9477C10.7338 41.999 10.6362 41.9323 10.6362 41.7886L10.6259 41.7989Z"
-          fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          d="M10.6259 41.2989C10.6259 41.1552 10.7235 40.991 10.8416 40.9346C11.5349 40.6267 12.2077 40.5241 12.8086 40.6524C13.4711 40.7909 14.0104 41.1963 14.3853 41.8223C14.7551 42.4482 14.94 43.2794 14.9194 44.2184C14.8989 45.1625 14.6678 46.1835 14.262 47.1789C13.8512 48.1743 13.276 49.1082 12.5981 49.8829C11.915 50.6577 11.1549 51.2426 10.3897 51.5762C9.62443 51.9097 8.88488 51.9866 8.24805 51.7917C7.67284 51.6121 7.19521 51.2221 6.86652 50.6475C6.81003 50.55 6.85625 50.3704 6.9641 50.2524C7.07195 50.1344 7.20035 50.1241 7.25684 50.2216C7.55472 50.7295 7.97585 51.0733 8.48943 51.2324C9.06464 51.4068 9.72715 51.3401 10.4153 51.0374C11.1035 50.7347 11.7917 50.2113 12.4029 49.5135C13.014 48.8157 13.5328 47.9794 13.9025 47.0815C14.2723 46.1835 14.4726 45.2651 14.4932 44.4134C14.5137 43.5668 14.3494 42.8177 14.0155 42.2532C13.6817 41.6888 13.1938 41.3246 12.5981 41.2014C12.0639 41.0885 11.4682 41.1758 10.8519 41.4477C10.7338 41.499 10.6362 41.4323 10.6362 41.2886L10.6259 41.2989Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
         />
         <path
           fillRule="evenodd"
           clipRule="evenodd"
-          d="M29.6745 39.0385L20.954 43.4768C20.2349 43.8411 19.6546 43.4306 19.6546 42.5583C19.6546 41.6861 20.2349 40.6855 20.954 40.3212L29.6745 35.883C30.3935 35.5187 30.9739 35.9292 30.9739 36.8014C30.9739 37.6737 30.3935 38.6742 29.6745 39.0385Z"
-          fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          d="M29.6745 38.5385L20.954 42.9768C20.2349 43.3411 19.6546 42.9306 19.6546 42.0583C19.6546 41.1861 20.2349 40.1855 20.954 39.8212L29.6745 35.383C30.3935 35.0187 30.9739 35.4292 30.9739 36.3014C30.9739 37.1737 30.3935 38.1742 29.6745 38.5385Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
         />
       </g>
       <defs>
         <clipPath id="clip0_446_128653">
-          <rect
-            width="160"
-            height="164"
-            fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-            transform="translate(0 0.5)"
-          />
+          <rect width="160" height="164" fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary} />
         </clipPath>
       </defs>
     </svg>
diff --git a/packages/propel/src/empty-state/assets/vertical-stack/dashboard.tsx b/packages/propel/src/empty-state/assets/vertical-stack/dashboard.tsx
index 16cae33ef..ebc142854 100644
--- a/packages/propel/src/empty-state/assets/vertical-stack/dashboard.tsx
+++ b/packages/propel/src/empty-state/assets/vertical-stack/dashboard.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper";
 import type { TIllustrationAssetProps } from "../helper";
 
@@ -13,17 +19,17 @@ export function DashboardVerticalStackIllustration({ className }: TIllustrationA
     >
       <g opacity="0.2">
         <path
-          d="M15.0806 131.544C15.0806 133.489 16.537 135.43 19.4448 136.917L56.8858 155.995C62.7065 158.96 72.1401 158.96 77.9608 155.995L156.636 115.909C159.544 114.427 161 112.486 161 110.541V116.753C161 118.698 159.544 120.638 156.636 122.121L77.9608 162.207C72.1401 165.171 62.7065 165.171 56.8858 162.207L19.4448 143.129C16.5319 141.647 15.0806 139.701 15.0806 137.756V131.544Z"
+          d="M14.2806 131.177C14.2806 133.122 15.737 135.062 18.6448 136.55L56.0858 155.628C61.9065 158.592 71.3401 158.592 77.1608 155.628L155.836 115.542C158.744 114.06 160.2 112.119 160.2 110.174V116.386C160.2 118.331 158.744 120.271 155.836 121.754L77.1608 161.84C71.3401 164.804 61.9065 164.804 56.0858 161.84L18.6448 142.762C15.7319 141.279 14.2806 139.334 14.2806 137.389V131.177Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.4"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
         <path
-          d="M15.0806 131.545C15.0806 129.599 16.537 127.659 19.4448 126.177L98.1197 86.0905C103.94 83.1261 113.374 83.1261 119.195 86.0905L156.636 105.169C159.549 106.651 161 108.596 161 110.542C161 112.487 159.544 114.427 156.636 115.91L77.9608 155.996C72.1401 158.96 62.7065 158.96 56.8858 155.996L19.4448 136.918C16.5319 135.435 15.0806 133.49 15.0806 131.545Z"
+          d="M14.2806 131.177C14.2806 129.232 15.737 127.292 18.6448 125.81L97.3197 85.7233C103.14 82.7589 112.574 82.7589 118.395 85.7233L155.836 104.802C158.749 106.284 160.2 108.229 160.2 110.174C160.2 112.12 158.744 114.06 155.836 115.542L77.1608 155.629C71.3401 158.593 61.9065 158.593 56.0858 155.629L18.6448 136.55C15.7319 135.068 14.2806 133.123 14.2806 131.177Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.4"
           strokeLinecap="round"
           strokeLinejoin="round"
@@ -31,72 +37,72 @@ export function DashboardVerticalStackIllustration({ className }: TIllustrationA
       </g>
       <g opacity="0.6">
         <path
-          d="M15.0806 111.921C15.0806 113.866 16.537 115.807 19.4448 117.294L56.8858 136.372C62.7065 139.337 72.1401 139.337 77.9608 136.372L156.636 96.2858C159.544 94.8036 161 92.8634 161 90.918V97.1299C161 99.0752 159.544 101.015 156.636 102.498L77.9608 142.584C72.1401 145.548 62.7065 145.548 56.8858 142.584L19.4448 123.506C16.5319 122.024 15.0806 120.078 15.0806 118.133V111.921Z"
+          d="M14.2806 111.554C14.2806 113.499 15.737 115.439 18.6448 116.927L56.0858 136.005C61.9065 138.969 71.3401 138.969 77.1608 136.005L155.836 95.9186C158.744 94.4364 160.2 92.4962 160.2 90.5508V96.7627C160.2 98.7081 158.744 100.648 155.836 102.13L77.1608 142.217C71.3401 145.181 61.9065 145.181 56.0858 142.217L18.6448 123.139C15.7319 121.656 14.2806 119.711 14.2806 117.766V111.554Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.4"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
         <path
-          d="M15.0806 111.922C15.0806 109.976 16.537 108.036 19.4448 106.554L98.1197 66.4674C103.94 63.503 113.374 63.503 119.195 66.4674L156.636 85.5456C159.549 87.0278 161 88.9732 161 90.9186C161 92.864 159.544 94.8042 156.636 96.2864L77.9608 136.373C72.1401 139.337 62.7065 139.337 56.8858 136.373L19.4448 117.295C16.5319 115.812 15.0806 113.867 15.0806 111.922Z"
+          d="M14.2806 111.554C14.2806 109.609 15.737 107.669 18.6448 106.186L97.3197 66.1003C103.14 63.1359 112.574 63.1359 118.395 66.1003L155.836 85.1785C158.749 86.6607 160.2 88.606 160.2 90.5514C160.2 92.4968 158.744 94.437 155.836 95.9192L77.1608 136.006C71.3401 138.97 61.9065 138.97 56.0858 136.006L18.6448 116.927C15.7319 115.445 14.2806 113.5 14.2806 111.554Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.4"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
       </g>
       <path
-        d="M15.0806 92.2979C15.0806 94.2433 16.537 96.1835 19.4448 97.6709L56.8858 116.749C62.7065 119.713 72.1401 119.713 77.9608 116.749L156.636 76.6628C159.544 75.1806 161 73.2403 161 71.2949V77.5068C161 79.4522 159.544 81.3924 156.636 82.8746L77.9608 122.961C72.1401 125.925 62.7065 125.925 56.8858 122.961L19.4448 103.883C16.5319 102.401 15.0806 100.455 15.0806 98.5098V92.2979Z"
+        d="M14.2806 91.9307C14.2806 93.8761 15.737 95.8163 18.6448 97.3037L56.0858 116.382C61.9065 119.346 71.3401 119.346 77.1608 116.382L155.836 76.2957C158.744 74.8135 160.2 72.8731 160.2 70.9277V77.1396C160.2 79.085 158.744 81.0252 155.836 82.5074L77.1608 122.594C71.3401 125.558 61.9065 125.558 56.0858 122.594L18.6448 103.516C15.7319 102.033 14.2806 100.088 14.2806 98.1426V91.9307Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.4"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
       <path
-        d="M15.0806 92.2985C15.0806 90.3532 16.537 88.4129 19.4448 86.9308L98.1197 46.8444C103.94 43.88 113.374 43.88 119.195 46.8444L156.636 65.9226C159.549 67.4048 161 69.3502 161 71.2955C161 73.2409 159.544 75.1813 156.636 76.6635L77.9608 116.75C72.1401 119.714 62.7065 119.714 56.8858 116.75L19.4448 97.6715C16.5319 96.1893 15.0806 94.2439 15.0806 92.2985Z"
+        d="M14.2806 91.9314C14.2806 89.986 15.737 88.0458 18.6448 86.5636L97.3197 46.4772C103.14 43.5128 112.574 43.5128 118.395 46.4772L155.836 65.5554C158.749 67.0376 160.2 68.983 160.2 70.9284C160.2 72.8737 158.744 74.8141 155.836 76.2963L77.1608 116.383C71.3401 119.347 61.9065 119.347 56.0858 116.383L18.6448 97.3043C15.7319 95.8221 14.2806 93.8767 14.2806 91.9314Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.4"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
       <path
-        d="M99.4889 82.3507C98.8198 82.3507 98.1971 82.2067 97.631 81.9185L93.0454 79.5819C91.4242 78.7534 90.4927 76.8543 90.4927 74.3583V64.0652C90.4927 59.6341 93.4623 54.5132 97.1163 52.6553L105.577 48.3477C106.498 47.8794 107.399 47.6426 108.259 47.6426C108.928 47.6426 109.55 47.7867 110.116 48.0749L114.702 50.4115C116.323 51.2401 117.255 53.1391 117.255 55.6351V65.9282C117.255 70.3594 114.285 75.475 110.631 77.338L102.17 81.6457C101.249 82.114 100.348 82.3507 99.4889 82.3507Z"
+        d="M98.6889 81.9835C98.0198 81.9835 97.3971 81.8395 96.831 81.5513L92.2454 79.2148C90.6242 78.3862 89.6927 76.4871 89.6927 73.9911V63.698C89.6927 59.2669 92.6623 54.146 96.3163 52.2881L104.777 47.9805C105.698 47.5122 106.599 47.2754 107.459 47.2754C108.128 47.2754 108.75 47.4195 109.316 47.7077L113.902 50.0443C115.523 50.8729 116.455 52.7719 116.455 55.268V65.561C116.455 69.9922 113.485 75.1078 109.831 76.9708L101.37 81.2785C100.449 81.7468 99.5483 81.9835 98.6889 81.9835Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
       />
       <path
-        d="M108.259 48.1524C108.85 48.1524 109.396 48.281 109.88 48.528L114.465 50.8646C115.855 51.5748 116.74 53.2474 116.74 55.6251V65.9182C116.74 70.1795 113.899 75.0841 110.394 76.87L101.933 81.1777C101.064 81.6203 100.24 81.8312 99.4837 81.8312C98.8918 81.8312 98.3463 81.7025 97.8625 81.4555L93.277 79.1191C91.8874 78.4089 91.0022 76.7362 91.0022 74.3585V64.0655C91.0022 59.8042 93.8431 54.8995 97.3478 53.1137L105.809 48.806C106.679 48.3634 107.502 48.1524 108.259 48.1524ZM108.259 47.123C107.317 47.123 106.339 47.3804 105.34 47.8847L96.8796 52.1924C93.0094 54.1635 89.9729 59.377 89.9729 64.0603V74.3534C89.9729 77.045 91.0074 79.1138 92.8086 80.035L97.3942 82.3716C98.0324 82.6958 98.7323 82.8605 99.4837 82.8605C100.425 82.8605 101.403 82.6032 102.397 82.0988L110.857 77.7912C114.728 75.8201 117.764 70.6067 117.764 65.9233V55.6303C117.764 52.9386 116.73 50.8697 114.928 49.9485L110.343 47.6119C109.705 47.2877 109.005 47.123 108.253 47.123H108.259Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        d="M107.459 47.7852C108.05 47.7852 108.596 47.9138 109.08 48.1609L113.665 50.4974C115.055 51.2076 115.94 52.8802 115.94 55.2579V65.551C115.94 69.8123 113.099 74.717 109.594 76.5028L101.133 80.8105C100.264 81.2531 99.4402 81.464 98.6837 81.464C98.0918 81.464 97.5463 81.3353 97.0625 81.0883L92.477 78.7519C91.0874 78.0417 90.2022 76.369 90.2022 73.9914V63.6983C90.2022 59.437 93.0431 54.5323 96.5479 52.7465L105.009 48.4388C105.879 47.9962 106.702 47.7852 107.459 47.7852ZM107.459 46.7559C106.517 46.7559 105.539 47.0132 104.54 47.5175L96.0796 51.8252C92.2094 53.7964 89.1729 59.0098 89.1729 63.6932V73.9862C89.1729 76.6778 90.2074 78.7466 92.0087 79.6679L96.5942 82.0044C97.2324 82.3286 97.9323 82.4933 98.6837 82.4933C99.6255 82.4933 100.603 82.236 101.597 81.7316L110.057 77.424C113.928 75.4529 116.964 70.2395 116.964 65.5561V55.2631C116.964 52.5714 115.93 50.5025 114.128 49.5813L109.543 47.2448C108.905 46.9205 108.205 46.7559 107.453 46.7559H107.459Z"
+        fill="var(--illustration-stroke-tertiary)"
       />
       <path
-        d="M99.4889 43.8658C98.8198 43.8658 98.1971 43.7216 97.631 43.4334L93.0454 41.0969C91.4242 40.2683 90.4927 38.3693 90.4927 35.8732V25.5801C90.4927 21.149 93.4623 16.0281 97.1163 14.1702L105.577 9.86263C106.498 9.3943 107.399 9.15234 108.259 9.15234C108.928 9.15234 109.55 9.29649 110.116 9.5847L114.702 11.9212C116.323 12.7498 117.255 14.6488 117.255 17.1449V27.438C117.255 31.8691 114.285 36.99 110.631 38.8479L102.17 43.1555C101.249 43.6238 100.348 43.8606 99.4889 43.8606V43.8658Z"
+        d="M98.6889 43.4986C98.0198 43.4986 97.3971 43.3544 96.831 43.0662L92.2454 40.7297C90.6242 39.9011 89.6927 38.0021 89.6927 35.506V25.2129C89.6927 20.7818 92.6623 15.6609 96.3163 13.803L104.777 9.49544C105.698 9.02711 106.599 8.78516 107.459 8.78516C108.128 8.78516 108.75 8.9293 109.316 9.21751L113.902 11.5541C115.523 12.3826 116.455 14.2817 116.455 16.7777V27.0708C116.455 31.5019 113.485 36.6228 109.831 38.4807L101.37 42.7883C100.449 43.2566 99.5483 43.4934 98.6889 43.4934V43.4986Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
       />
       <path
-        d="M108.259 9.67188C108.85 9.67188 109.396 9.80054 109.88 10.0476L114.465 12.3841C115.855 13.0943 116.74 14.767 116.74 17.1446V27.4377C116.74 31.699 113.899 36.6037 110.394 38.3895L101.933 42.6972C101.064 43.1398 100.24 43.3508 99.4837 43.3508C98.8918 43.3508 98.3463 43.2221 97.8625 42.975L93.277 40.6386C91.8874 39.9284 91.0022 38.2558 91.0022 35.8781V25.585C91.0022 21.3237 93.8431 16.419 97.3478 14.6332L105.809 10.3255C106.679 9.8829 107.502 9.67188 108.259 9.67188ZM108.259 8.64258C107.317 8.64258 106.339 8.89989 105.34 9.40425L96.8796 13.712C93.0094 15.6831 89.9729 20.8965 89.9729 25.5799V35.8729C89.9729 38.5646 91.0074 40.6334 92.8086 41.5546L97.3942 43.8911C98.0324 44.2154 98.7323 44.3801 99.4837 44.3801C100.425 44.3801 101.403 44.1227 102.402 43.6183L110.863 39.3108C114.733 37.3396 117.769 32.1262 117.769 27.4428V17.1498C117.769 14.4582 116.735 12.3892 114.934 11.468L110.348 9.13147C109.71 8.80724 109.01 8.64258 108.259 8.64258Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        d="M107.459 9.3047C108.05 9.3047 108.596 9.43335 109.08 9.68038L113.665 12.0169C115.055 12.7271 115.94 14.3998 115.94 16.7775V27.0705C115.94 31.3318 113.099 36.2365 109.594 38.0223L101.133 42.33C100.264 42.7726 99.4402 42.9837 98.6837 42.9837C98.0918 42.9837 97.5463 42.8549 97.0625 42.6078L92.477 40.2714C91.0874 39.5612 90.2022 37.8886 90.2022 35.5109V25.2178C90.2022 20.9565 93.0431 16.0519 96.5479 14.266L105.009 9.95831C105.879 9.51571 106.702 9.3047 107.459 9.3047ZM107.459 8.27539C106.517 8.27539 105.539 8.53271 104.54 9.03707L96.0796 13.3448C92.2094 15.3159 89.1729 20.5293 89.1729 25.2127V35.5057C89.1729 38.1974 90.2074 40.2662 92.0087 41.1874L96.5942 43.5239C97.2324 43.8482 97.9323 44.013 98.6837 44.013C99.6255 44.013 100.603 43.7555 101.602 43.2512L110.063 38.9436C113.933 36.9725 116.969 31.759 116.969 27.0757V16.7826C116.969 14.091 115.935 12.0221 114.134 11.1008L109.548 8.76429C108.91 8.44005 108.21 8.27539 107.459 8.27539Z"
+        fill="var(--illustration-stroke-tertiary)"
       />
       <path
-        d="M68.4862 96.5089C67.8171 96.5089 67.1944 96.3649 66.6283 96.0767L62.0427 93.7401C60.4216 92.9116 59.4901 91.0124 59.4901 88.5163V78.2233C59.4901 73.7921 62.4596 68.6714 66.1136 66.8135L74.5745 62.5059C75.4957 62.0376 76.3964 61.8008 77.2559 61.8008C77.9249 61.8008 78.5476 61.9449 79.1138 62.2331L83.6993 64.5697C85.3205 65.3983 86.252 67.3024 86.252 69.7933V80.0864C86.252 84.5176 83.2824 89.6332 79.6284 91.4962L71.1675 95.8039C70.2463 96.2722 69.3456 96.5089 68.4862 96.5089Z"
+        d="M67.6862 96.1417C67.0171 96.1417 66.3944 95.9977 65.8283 95.7095L61.2427 93.373C59.6216 92.5444 58.6901 90.6452 58.6901 88.1492V77.8561C58.6901 73.425 61.6596 68.3042 65.3136 66.4463L73.7745 62.1387C74.6957 61.6704 75.5964 61.4336 76.4559 61.4336C77.1249 61.4336 77.7476 61.5777 78.3138 61.8659L82.8993 64.2025C84.5205 65.0311 85.452 66.9352 85.452 69.4262V79.7192C85.452 84.1504 82.4825 89.266 78.8284 91.129L70.3675 95.4367C69.4463 95.9051 68.5456 96.1417 67.6862 96.1417Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
       />
       <path
-        d="M77.2559 62.3164C77.8477 62.3164 78.3933 62.4451 78.8771 62.6921L83.4626 65.0286C84.8521 65.7389 85.7374 67.4115 85.7374 69.7892V80.0822C85.7374 84.3436 82.8965 89.2482 79.3917 91.034L70.9308 95.3416C70.061 95.7842 69.2376 95.9952 68.481 95.9952C67.8892 95.9952 67.3436 95.8666 66.8599 95.6196L62.2744 93.283C60.8848 92.5728 59.9996 90.9002 59.9996 88.5225V78.2294C59.9996 73.9681 62.8404 69.0636 66.3452 67.2777L74.8061 62.97C75.6759 62.5274 76.4994 62.3164 77.2559 62.3164ZM77.2559 61.2871C76.3141 61.2871 75.3362 61.5444 74.3378 62.0488L65.8769 66.3565C62.0067 68.3276 58.9703 73.5409 58.9703 78.2243V88.5173C58.9703 91.209 60.0047 93.2779 61.806 94.1991L66.3916 96.5357C67.0298 96.8599 67.7297 97.0245 68.481 97.0245C69.4229 97.0245 70.4007 96.7672 71.394 96.2629L79.8549 91.9553C83.725 89.9842 86.7615 84.7707 86.7615 80.0874V69.7943C86.7615 67.1027 85.7271 65.0338 83.9258 64.1125L79.3402 61.776C78.702 61.4518 78.0021 61.2871 77.2507 61.2871H77.2559Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        d="M76.4559 61.9492C77.0478 61.9492 77.5933 62.0779 78.0771 62.3249L82.6626 64.6615C84.0521 65.3717 84.9374 67.0443 84.9374 69.422V79.715C84.9374 83.9764 82.0965 88.881 78.5917 90.6669L70.1308 94.9744C69.261 95.417 68.4376 95.6281 67.6811 95.6281C67.0892 95.6281 66.5437 95.4994 66.0599 95.2524L61.4744 92.9158C60.0848 92.2056 59.1996 90.533 59.1996 88.1553V77.8622C59.1996 73.6009 62.0405 68.6964 65.5452 66.9105L74.0062 62.6028C74.8759 62.1602 75.6994 61.9492 76.4559 61.9492ZM76.4559 60.9199C75.5141 60.9199 74.5362 61.1772 73.5378 61.6816L65.0769 65.9893C61.2068 67.9604 58.1703 73.1738 58.1703 77.8571V88.1501C58.1703 90.8418 59.2047 92.9107 61.006 93.8319L65.5916 96.1685C66.2298 96.4927 66.9297 96.6574 67.6811 96.6574C68.6229 96.6574 69.6007 96.4 70.594 95.8957L79.0549 91.5881C82.9251 89.617 85.9615 84.4035 85.9615 79.7202V69.4271C85.9615 66.7355 84.9271 64.6666 83.1258 63.7454L78.5402 61.4088C77.902 61.0846 77.2021 60.9199 76.4508 60.9199H76.4559Z"
+        fill="var(--illustration-stroke-tertiary)"
       />
       <path
-        d="M68.4862 58.0297C67.8171 58.0297 67.1944 57.8857 66.6283 57.5975L62.0427 55.2609C60.4216 54.4323 59.4901 52.5333 59.4901 50.0372V39.7442C59.4901 35.313 62.4596 30.1973 66.1136 28.3343L74.5745 24.0267C75.4957 23.5584 76.3964 23.3164 77.2559 23.3164C77.9249 23.3164 78.5476 23.4606 79.1138 23.7488L83.6993 26.0853C85.3205 26.9139 86.252 28.8181 86.252 31.309V41.602C86.252 46.0332 83.2824 51.1488 79.6284 53.0118L71.1675 57.3195C70.2463 57.7879 69.3456 58.0245 68.4862 58.0245V58.0297Z"
+        d="M67.6862 57.6625C67.0171 57.6625 66.3944 57.5185 65.8283 57.2303L61.2427 54.8937C59.6216 54.0651 58.6901 52.1661 58.6901 49.6701V39.377C58.6901 34.9459 61.6596 29.8301 65.3136 27.9671L73.7745 23.6595C74.6957 23.1912 75.5964 22.9492 76.4559 22.9492C77.1249 22.9492 77.7476 23.0934 78.3138 23.3816L82.8993 25.7181C84.5205 26.5467 85.452 28.4509 85.452 30.9418V41.2348C85.452 45.666 82.4825 50.7816 78.8284 52.6446L70.3675 56.9523C69.4463 57.4207 68.5456 57.6574 67.6862 57.6574V57.6625Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
       />
       <path
-        d="M77.2559 23.8359C77.8477 23.8359 78.3933 23.9646 78.8771 24.2116L83.4626 26.5482C84.8521 27.2584 85.7374 28.931 85.7374 31.3087V41.6018C85.7374 45.8631 82.8965 50.7677 79.3917 52.5536L70.9308 56.8613C70.061 57.3039 69.2376 57.5148 68.481 57.5148C67.8892 57.5148 67.3436 57.3861 66.8599 57.1391L62.2744 54.8027C60.8848 54.0925 59.9996 52.4198 59.9996 50.0421V39.7491C59.9996 35.4878 62.8404 30.5831 66.3452 28.7973L74.8061 24.4896C75.6759 24.047 76.4994 23.8359 77.2559 23.8359ZM77.2559 22.8066C76.3141 22.8066 75.3362 23.064 74.3378 23.5683L65.8769 27.876C62.0067 29.8471 58.9703 35.0606 58.9703 39.7439V50.037C58.9703 52.7286 60.0047 54.7974 61.806 55.7186L66.3916 58.0552C67.0298 58.3794 67.7297 58.5441 68.481 58.5441C69.4229 58.5441 70.4007 58.2868 71.3991 57.7824L79.86 53.4748C83.7302 51.5037 86.7667 46.2902 86.7667 41.6069V31.3139C86.7667 28.6222 85.7322 26.5533 83.9309 25.6321L79.3454 23.2955C78.7072 22.9713 78.0073 22.8066 77.2559 22.8066Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        d="M76.4559 23.4688C77.0478 23.4688 77.5933 23.5974 78.0771 23.8444L82.6626 26.181C84.0521 26.8912 84.9374 28.5638 84.9374 30.9415V41.2346C84.9374 45.4959 82.0965 50.4005 78.5917 52.1864L70.1308 56.4941C69.261 56.9367 68.4376 57.1476 67.6811 57.1476C67.0892 57.1476 66.5437 57.0189 66.0599 56.7719L61.4744 54.4355C60.0848 53.7253 59.1996 52.0526 59.1996 49.6749V39.3819C59.1996 35.1206 62.0405 30.2159 65.5452 28.4301L74.0062 24.1224C74.8759 23.6798 75.6994 23.4688 76.4559 23.4688ZM76.4559 22.4395C75.5141 22.4395 74.5362 22.6968 73.5378 23.2011L65.0769 27.5088C61.2068 29.4799 58.1703 34.6934 58.1703 39.3767V49.6698C58.1703 52.3614 59.2047 54.4302 61.006 55.3515L65.5916 57.688C66.2298 58.0122 66.9297 58.1769 67.6811 58.1769C68.6229 58.1769 69.6007 57.9196 70.5992 57.4152L79.06 53.1076C82.9302 51.1365 85.9667 45.9231 85.9667 41.2397V30.9467C85.9667 28.255 84.9322 26.1861 83.1309 25.2649L78.5454 22.9283C77.9072 22.6041 77.2073 22.4395 76.4559 22.4395Z"
+        fill="var(--illustration-stroke-tertiary)"
       />
       <path
-        d="M114.465 50.8651C113.364 50.3041 111.943 50.3505 110.394 51.143L101.933 55.4506C98.4287 57.2364 95.5878 62.1411 95.5878 66.4024V76.6955C95.5878 79.0732 96.473 80.7509 97.8626 81.456L93.277 79.1196C91.8875 78.4094 91.0023 76.7367 91.0023 74.3591V64.066C91.0023 59.8047 93.8431 54.9 97.3479 53.1142L105.809 48.8065C107.358 48.0191 108.778 47.9676 109.88 48.5285L114.465 50.8651Z"
+        d="M113.665 50.4979C112.564 49.9369 111.144 49.9833 109.594 50.7758L101.133 55.0834C97.6287 56.8693 94.7878 61.7739 94.7878 66.0352V76.3283C94.7878 78.706 95.673 80.3837 97.0626 81.0888L92.4771 78.7524C91.0875 78.0422 90.2023 76.3696 90.2023 73.9919V63.6988C90.2023 59.4375 93.0431 54.5328 96.5479 52.747L105.009 48.4393C106.558 47.6519 107.978 47.6004 109.08 48.1614L113.665 50.4979Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
         stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
         strokeWidth="0.4"
@@ -104,7 +110,7 @@ export function DashboardVerticalStackIllustration({ className }: TIllustrationA
         strokeLinejoin="round"
       />
       <path
-        d="M114.465 50.8645C115.855 51.5747 116.74 53.2473 116.74 55.625V65.9181C116.74 70.1794 113.899 75.084 110.394 76.8699L101.933 81.1776C100.384 81.965 98.9639 82.0164 97.8626 81.4554C96.473 80.7452 95.5878 79.0726 95.5878 76.6949V66.4018C95.5878 62.1405 98.4287 57.2358 101.933 55.45L110.394 51.1424C111.943 50.355 113.364 50.3035 114.465 50.8645Z"
+        d="M113.665 50.4973C115.055 51.2075 115.94 52.8801 115.94 55.2578V65.5509C115.94 69.8122 113.099 74.7169 109.594 76.5027L101.133 80.8104C99.5844 81.5978 98.1639 81.6492 97.0626 81.0882C95.673 80.378 94.7878 78.7054 94.7878 76.3277V66.0346C94.7878 61.7733 97.6287 56.8687 101.133 55.0828L109.594 50.7752C111.144 49.9878 112.564 49.9363 113.665 50.4973Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
         stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
         strokeWidth="0.4"
@@ -112,7 +118,7 @@ export function DashboardVerticalStackIllustration({ className }: TIllustrationA
         strokeLinejoin="round"
       />
       <path
-        d="M114.465 12.3846C113.364 11.8237 111.943 11.87 110.394 12.6626L101.933 16.9703C98.4287 18.7561 95.5878 23.6606 95.5878 27.922V38.215C95.5878 40.5927 96.473 42.2705 97.8626 42.9755L93.277 40.6391C91.8875 39.9289 91.0023 38.2563 91.0023 35.8786V25.5855C91.0023 21.3242 93.8431 16.4196 97.3479 14.6337L105.809 10.326C107.358 9.5386 108.778 9.48711 109.88 10.0481L114.465 12.3846Z"
+        d="M113.665 12.0174C112.564 11.4565 111.144 11.5028 109.594 12.2954L101.133 16.6031C97.6287 18.3889 94.7878 23.2934 94.7878 27.5548V37.8478C94.7878 40.2255 95.673 41.9033 97.0626 42.6083L92.4771 40.2719C91.0875 39.5617 90.2023 37.8891 90.2023 35.5114V25.2183C90.2023 20.957 93.0431 16.0524 96.5479 14.2665L105.009 9.95883C106.558 9.17141 107.978 9.11992 109.08 9.68089L113.665 12.0174Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
         stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
         strokeWidth="0.4"
@@ -120,7 +126,7 @@ export function DashboardVerticalStackIllustration({ className }: TIllustrationA
         strokeLinejoin="round"
       />
       <path
-        d="M114.465 12.384C115.855 13.0942 116.74 14.7669 116.74 17.1446V27.4376C116.74 31.6989 113.899 36.6036 110.394 38.3894L101.933 42.6971C100.384 43.4845 98.9639 43.5359 97.8626 42.9749C96.473 42.2647 95.5878 40.5921 95.5878 38.2144V27.9213C95.5878 23.66 98.4287 18.7555 101.933 16.9697L110.394 12.662C111.943 11.8745 113.364 11.823 114.465 12.384Z"
+        d="M113.665 12.0168C115.055 12.7271 115.94 14.3997 115.94 16.7774V27.0704C115.94 31.3317 113.099 36.2364 109.594 38.0222L101.133 42.3299C99.5844 43.1174 98.1639 43.1687 97.0626 42.6077C95.673 41.8975 94.7878 40.2249 94.7878 37.8472V27.5542C94.7878 23.2928 97.6287 18.3883 101.133 16.6025L109.594 12.2948C111.144 11.5073 112.564 11.4559 113.665 12.0168Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
         stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
         strokeWidth="0.4"
@@ -128,7 +134,7 @@ export function DashboardVerticalStackIllustration({ className }: TIllustrationA
         strokeLinejoin="round"
       />
       <path
-        d="M114.465 12.3846C113.364 11.8237 111.943 11.87 110.394 12.6626L101.933 16.9703C98.4287 18.7561 95.5878 23.6606 95.5878 27.922V38.215C95.5878 40.5927 96.473 42.2705 97.8626 42.9755L93.277 40.6391C91.8875 39.9289 91.0023 38.2563 91.0023 35.8786V25.5855C91.0023 21.3242 93.8431 16.4196 97.3479 14.6337L105.809 10.326C107.358 9.5386 108.778 9.48711 109.88 10.0481L114.465 12.3846Z"
+        d="M113.665 12.0174C112.564 11.4565 111.144 11.5028 109.594 12.2954L101.133 16.6031C97.6287 18.3889 94.7878 23.2934 94.7878 27.5548V37.8478C94.7878 40.2255 95.673 41.9033 97.0626 42.6083L92.4771 40.2719C91.0875 39.5617 90.2023 37.8891 90.2023 35.5114V25.2183C90.2023 20.957 93.0431 16.0524 96.5479 14.2665L105.009 9.95883C106.558 9.17141 107.978 9.11992 109.08 9.68089L113.665 12.0174Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
         stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
         strokeWidth="0.4"
@@ -136,7 +142,7 @@ export function DashboardVerticalStackIllustration({ className }: TIllustrationA
         strokeLinejoin="round"
       />
       <path
-        d="M114.465 12.384C115.855 13.0942 116.74 14.7669 116.74 17.1446V27.4376C116.74 31.6989 113.899 36.6036 110.394 38.3894L101.933 42.6971C100.384 43.4845 98.9639 43.5359 97.8626 42.9749C96.473 42.2647 95.5878 40.5921 95.5878 38.2144V27.9213C95.5878 23.66 98.4287 18.7555 101.933 16.9697L110.394 12.662C111.943 11.8745 113.364 11.823 114.465 12.384Z"
+        d="M113.665 12.0168C115.055 12.7271 115.94 14.3997 115.94 16.7774V27.0704C115.94 31.3317 113.099 36.2364 109.594 38.0222L101.133 42.3299C99.5844 43.1174 98.1639 43.1687 97.0626 42.6077C95.673 41.8975 94.7878 40.2249 94.7878 37.8472V27.5542C94.7878 23.2928 97.6287 18.3883 101.133 16.6025L109.594 12.2948C111.144 11.5073 112.564 11.4559 113.665 12.0168Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
         stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
         strokeWidth="0.4"
@@ -144,7 +150,7 @@ export function DashboardVerticalStackIllustration({ className }: TIllustrationA
         strokeLinejoin="round"
       />
       <path
-        d="M83.4626 65.0292C82.3612 64.4682 80.9408 64.5145 79.3917 65.3071L70.9308 69.6147C67.426 71.4005 64.5851 76.3052 64.5851 80.5665V90.8595C64.5851 93.2372 65.4703 94.915 66.8599 95.6201L62.2744 93.2835C60.8848 92.5733 59.9996 90.9007 59.9996 88.523V78.2299C59.9996 73.9686 62.8404 69.0641 66.3452 67.2782L74.8061 62.9705C76.3552 62.1831 77.7757 62.1316 78.8771 62.6926L83.4626 65.0292Z"
+        d="M82.6626 64.662C81.5612 64.101 80.1408 64.1473 78.5917 64.9399L70.1308 69.2475C66.626 71.0333 63.7852 75.938 63.7852 80.1993V90.4923C63.7852 92.87 64.6703 94.5478 66.0599 95.2529L61.4744 92.9163C60.0848 92.2061 59.1996 90.5335 59.1996 88.1558V77.8628C59.1996 73.6014 62.0404 68.6969 65.5452 66.9111L74.0061 62.6034C75.5553 61.8159 76.9757 61.7645 78.0771 62.3254L82.6626 64.662Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
         stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
         strokeWidth="0.4"
@@ -152,7 +158,7 @@ export function DashboardVerticalStackIllustration({ className }: TIllustrationA
         strokeLinejoin="round"
       />
       <path
-        d="M83.4626 65.0285C84.8521 65.7388 85.7374 67.4114 85.7374 69.7891V80.0821C85.7374 84.3435 82.8965 89.2481 79.3917 91.034L70.9308 95.3415C69.3817 96.129 67.9612 96.1804 66.8599 95.6195C65.4703 94.9092 64.5851 93.2366 64.5851 90.8589V80.5659C64.5851 76.3046 67.426 71.3999 70.9308 69.6141L79.3917 65.3065C80.9408 64.5191 82.3612 64.4676 83.4626 65.0285Z"
+        d="M82.6626 64.6614C84.0521 65.3716 84.9374 67.0442 84.9374 69.4219V79.7149C84.9374 83.9763 82.0965 88.8809 78.5917 90.6668L70.1308 94.9743C68.5817 95.7618 67.1612 95.8132 66.0599 95.2523C64.6703 94.5421 63.7852 92.8694 63.7852 90.4917V80.1987C63.7852 75.9374 66.626 71.0327 70.1308 69.2469L78.5917 64.9393C80.1408 64.1519 81.5612 64.1004 82.6626 64.6614Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
         stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
         strokeWidth="0.4"
@@ -160,7 +166,7 @@ export function DashboardVerticalStackIllustration({ className }: TIllustrationA
         strokeLinejoin="round"
       />
       <path
-        d="M83.4626 26.5487C82.3612 25.9877 80.9408 26.0341 79.3917 26.8266L70.9308 31.1342C67.426 32.92 64.5851 37.8247 64.5851 42.086V52.3791C64.5851 54.7568 65.4703 56.4345 66.8599 57.1396L62.2744 54.8032C60.8848 54.093 59.9996 52.4203 59.9996 50.0426V39.7496C59.9996 35.4883 62.8404 30.5836 66.3452 28.7978L74.8061 24.4901C76.3552 23.7027 77.7757 23.6512 78.8771 24.2121L83.4626 26.5487Z"
+        d="M82.6626 26.1815C81.5612 25.6205 80.1408 25.6669 78.5917 26.4594L70.1308 30.767C66.626 32.5529 63.7852 37.4575 63.7852 41.7188V52.0119C63.7852 54.3896 64.6703 56.0673 66.0599 56.7724L61.4744 54.436C60.0848 53.7258 59.1996 52.0532 59.1996 49.6755V39.3824C59.1996 35.1211 62.0404 30.2164 65.5452 28.4306L74.0061 24.1229C75.5553 23.3355 76.9757 23.284 78.0771 23.845L82.6626 26.1815Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
         stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
         strokeWidth="0.4"
@@ -168,7 +174,7 @@ export function DashboardVerticalStackIllustration({ className }: TIllustrationA
         strokeLinejoin="round"
       />
       <path
-        d="M83.4626 26.5481C84.8521 27.2583 85.7374 28.9309 85.7374 31.3086V41.6017C85.7374 45.863 82.8965 50.7676 79.3917 52.5535L70.9308 56.8612C69.3817 57.6486 67.9612 57.7 66.8599 57.139C65.4703 56.4288 64.5851 54.7562 64.5851 52.3785V42.0854C64.5851 37.8241 67.426 32.9194 70.9308 31.1336L79.3917 26.826C80.9408 26.0386 82.3612 25.9871 83.4626 26.5481Z"
+        d="M82.6626 26.1809C84.0521 26.8911 84.9374 28.5637 84.9374 30.9414V41.2345C84.9374 45.4958 82.0965 50.4005 78.5917 52.1863L70.1308 56.494C68.5817 57.2814 67.1612 57.3328 66.0599 56.7718C64.6703 56.0616 63.7852 54.389 63.7852 52.0113V41.7182C63.7852 37.4569 66.626 32.5522 70.1308 30.7664L78.5917 26.4588C80.1408 25.6714 81.5612 25.6199 82.6626 26.1809Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
         stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
         strokeWidth="0.4"
@@ -176,7 +182,7 @@ export function DashboardVerticalStackIllustration({ className }: TIllustrationA
         strokeLinejoin="round"
       />
       <path
-        d="M83.4626 26.5487C82.3612 25.9877 80.9408 26.0341 79.3917 26.8266L70.9308 31.1342C67.426 32.92 64.5851 37.8247 64.5851 42.086V52.3791C64.5851 54.7568 65.4703 56.4345 66.8599 57.1396L62.2744 54.8032C60.8848 54.093 59.9996 52.4203 59.9996 50.0426V39.7496C59.9996 35.4883 62.8404 30.5836 66.3452 28.7978L74.8061 24.4901C76.3552 23.7027 77.7757 23.6512 78.8771 24.2121L83.4626 26.5487Z"
+        d="M82.6626 26.1815C81.5612 25.6205 80.1408 25.6669 78.5917 26.4594L70.1308 30.767C66.626 32.5529 63.7852 37.4575 63.7852 41.7188V52.0119C63.7852 54.3896 64.6703 56.0673 66.0599 56.7724L61.4744 54.436C60.0848 53.7258 59.1996 52.0532 59.1996 49.6755V39.3824C59.1996 35.1211 62.0404 30.2164 65.5452 28.4306L74.0061 24.1229C75.5553 23.3355 76.9757 23.284 78.0771 23.845L82.6626 26.1815Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
         stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
         strokeWidth="0.4"
@@ -184,7 +190,7 @@ export function DashboardVerticalStackIllustration({ className }: TIllustrationA
         strokeLinejoin="round"
       />
       <path
-        d="M83.4626 26.5481C84.8521 27.2583 85.7374 28.9309 85.7374 31.3086V41.6017C85.7374 45.863 82.8965 50.7676 79.3917 52.5535L70.9308 56.8612C69.3817 57.6486 67.9612 57.7 66.8599 57.139C65.4703 56.4288 64.5851 54.7562 64.5851 52.3785V42.0854C64.5851 37.8241 67.426 32.9194 70.9308 31.1336L79.3917 26.826C80.9408 26.0386 82.3612 25.9871 83.4626 26.5481Z"
+        d="M82.6626 26.1809C84.0521 26.8911 84.9374 28.5637 84.9374 30.9414V41.2345C84.9374 45.4958 82.0965 50.4005 78.5917 52.1863L70.1308 56.494C68.5817 57.2814 67.1612 57.3328 66.0599 56.7718C64.6703 56.0616 63.7852 54.389 63.7852 52.0113V41.7182C63.7852 37.4569 66.626 32.5522 70.1308 30.7664L78.5917 26.4588C80.1408 25.6714 81.5612 25.6199 82.6626 26.1809Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
         stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
         strokeWidth="0.4"
@@ -194,9 +200,9 @@ export function DashboardVerticalStackIllustration({ className }: TIllustrationA
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M5.6113 65.9744C4.196 65.2539 3.29536 63.5503 3.29536 61.1263C3.29536 56.7878 6.1877 51.7957 9.74909 49.9841L36.3515 36.4539C37.9263 35.651 39.3673 35.5995 40.4893 36.1708L38.1939 35.0025C37.072 34.4312 35.631 34.4827 34.0561 35.2856L7.45376 48.8158C3.88722 50.6326 1 55.6246 1 59.958C1 62.382 1.90064 64.0856 3.31594 64.8061L5.6113 65.9744Z"
+        d="M4.81131 65.6072C3.39602 64.8867 2.49537 63.1831 2.49537 60.7591C2.49537 56.4206 5.38771 51.4285 8.9491 49.6169L35.5515 36.0867C37.1264 35.2838 38.5673 35.2323 39.6893 35.8036L37.394 34.6353C36.272 34.0641 34.831 34.1156 33.2561 34.9184L6.65377 48.4486C3.08723 50.2654 0.200012 55.2574 0.200012 59.5908C0.200012 62.0148 1.10065 63.7184 2.51595 64.4389L4.81131 65.6072Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.4"
         strokeLinecap="round"
         strokeLinejoin="round"
@@ -204,63 +210,63 @@ export function DashboardVerticalStackIllustration({ className }: TIllustrationA
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M5.61129 65.9741C6.73323 66.5454 8.17424 66.4939 9.74908 65.691L36.3515 52.1608C39.918 50.344 42.8052 45.352 42.8052 41.0186C42.8052 38.5946 41.9046 36.891 40.4893 36.1705C39.3673 35.5992 37.9263 35.6507 36.3515 36.4536L9.74908 49.9838C6.18254 51.8005 3.29535 56.7926 3.29535 61.126C3.29535 63.55 4.19599 65.2536 5.61129 65.9741Z"
+        d="M4.8113 65.6069C5.93324 66.1782 7.37426 66.1267 8.94909 65.3238L35.5515 51.7936C39.1181 49.9769 42.0052 44.9848 42.0052 40.6514C42.0052 38.2274 41.1046 36.5238 39.6893 35.8033C38.5673 35.232 37.1264 35.2835 35.5515 36.0864L8.94909 49.6166C5.38255 51.4333 2.49536 56.4254 2.49536 60.7588C2.49536 63.1828 3.396 64.8864 4.8113 65.6069Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.4"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
       <path
-        d="M13.4083 56.0933C13.0634 56.2683 12.7804 56.0728 12.7804 55.6508V52.5938C12.7804 52.3777 12.8525 52.1357 12.9811 51.9299C13.1046 51.7292 13.2693 51.5799 13.4391 51.513C15.0654 50.88 16.3675 51.8012 16.5322 53.7003C16.5476 53.8958 16.4962 54.1223 16.383 54.3333C16.2646 54.5494 16.0999 54.7244 15.9249 54.8119L13.4134 56.0933H13.4083ZM13.4083 52.2901V55.3265L15.9043 54.0553C15.7602 52.5423 14.7155 51.8012 13.4083 52.2901Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M12.6083 55.7262C12.2635 55.9011 11.9804 55.7056 11.9804 55.2836V52.2266C11.9804 52.0105 12.0525 51.7686 12.1811 51.5627C12.3046 51.362 12.4693 51.2127 12.6391 51.1458C14.2654 50.5128 15.5675 51.434 15.7322 53.3331C15.7477 53.5286 15.6962 53.7551 15.583 53.9661C15.4646 54.1822 15.2999 54.3572 15.1249 54.4447L12.6134 55.7262H12.6083ZM12.6083 51.9229V54.9593L15.1044 53.6882C14.9602 52.1751 13.9155 51.434 12.6083 51.9229Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
-        d="M13.0892 60.071C12.6414 60.2975 12.1886 60.4261 11.746 60.421C10.8968 60.421 10.238 59.9371 9.88807 59.0725C9.5381 58.2079 9.54839 57.0602 9.90864 55.8456C10.2535 54.6722 10.8916 53.5607 11.7099 52.7115C11.8695 52.5468 12.0547 52.5416 12.1216 52.696C12.1885 52.8504 12.1217 53.118 11.957 53.2827C11.2931 53.9775 10.7681 54.8884 10.4851 55.8456C10.1917 56.8389 10.1866 57.7808 10.4696 58.4859C10.7527 59.191 11.2931 59.582 11.9879 59.5872C13.4237 59.5923 15.086 57.9249 15.6933 55.8714C15.7602 55.645 15.9455 55.4597 16.1051 55.4597C16.2646 55.4597 16.3418 55.645 16.2697 55.8766C15.7139 57.7602 14.4324 59.3814 13.084 60.0659L13.0892 60.071Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M12.2892 59.7039C11.8415 59.9303 11.3886 60.0589 10.946 60.0538C10.0968 60.0538 9.43804 59.57 9.08808 58.7053C8.73812 57.8407 8.7484 56.693 9.10865 55.4785C9.45347 54.3051 10.0916 53.1935 10.9099 52.3443C11.0695 52.1796 11.2547 52.1745 11.3217 52.3289C11.3886 52.4832 11.3217 52.7508 11.157 52.9155C10.4931 53.6103 9.96812 54.5212 9.68506 55.4785C9.39171 56.4717 9.38658 57.4136 9.66964 58.1187C9.9527 58.8238 10.4931 59.2148 11.1879 59.22C12.6238 59.2251 14.2861 57.5577 14.8933 55.5042C14.9602 55.2778 15.1455 55.0925 15.3051 55.0925C15.4646 55.0925 15.5418 55.2778 15.4698 55.5094C14.9139 57.393 13.6324 59.0142 12.2841 59.6987L12.2892 59.7039Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
-        d="M23.444 50.0725C23.269 50.16 23.1249 50.0622 23.1249 49.846V48.3021C23.1249 48.0911 23.269 47.844 23.444 47.7565C23.6189 47.669 23.763 47.7669 23.763 47.9831V49.527C23.763 49.738 23.6189 49.985 23.444 50.0725Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M22.644 49.7053C22.469 49.7928 22.3249 49.695 22.3249 49.4789V47.9349C22.3249 47.7239 22.469 47.4768 22.644 47.3893C22.819 47.3018 22.9631 47.3997 22.9631 47.6159V49.1598C22.9631 49.3708 22.819 49.6178 22.644 49.7053Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
-        d="M23.7579 52.2282L23.1249 52.5524C22.7749 52.7325 22.4919 52.5318 22.4919 52.1046V50.5607C22.4919 50.1335 22.7749 49.6446 23.1249 49.4645L23.7579 49.1403C24.1079 48.9602 24.3909 49.1609 24.3909 49.588V51.132C24.3909 51.5591 24.1079 52.0481 23.7579 52.2282ZM23.1249 50.2365V51.7804L23.7579 51.4563V49.9123L23.1249 50.2365Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M22.9579 51.8611L22.3249 52.1852C21.9749 52.3654 21.6919 52.1646 21.6919 51.7374V50.1935C21.6919 49.7663 21.9749 49.2774 22.3249 49.0973L22.9579 48.7731C23.3079 48.593 23.5909 48.7937 23.5909 49.2208V50.7648C23.5909 51.1919 23.3079 51.6809 22.9579 51.8611ZM22.3249 49.8693V51.4132L22.9579 51.0891V49.5451L22.3249 49.8693Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
-        d="M23.444 53.1599C23.269 53.2473 23.1249 53.1496 23.1249 52.9334V52.1615C23.1249 51.9505 23.269 51.7034 23.444 51.6159C23.6189 51.5284 23.763 51.6263 23.763 51.8424V52.6144C23.763 52.8254 23.6189 53.0724 23.444 53.1599Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M22.644 52.7927C22.469 52.8802 22.3249 52.7824 22.3249 52.5663V51.7943C22.3249 51.5833 22.469 51.3362 22.644 51.2487C22.819 51.1612 22.9631 51.2591 22.9631 51.4753V52.2472C22.9631 52.4582 22.819 52.7052 22.644 52.7927Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
-        d="M25.9761 47.2419C25.8011 47.3294 25.657 47.2316 25.657 47.0155V46.2435C25.657 46.0325 25.8011 45.7854 25.9761 45.6979C26.151 45.6104 26.2951 45.7083 26.2951 45.9245V46.6965C26.2951 46.9075 26.151 47.1544 25.9761 47.2419Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M25.1761 46.8747C25.0011 46.9622 24.857 46.8644 24.857 46.6483V45.8763C24.857 45.6653 25.0011 45.4182 25.1761 45.3307C25.3511 45.2433 25.4952 45.3411 25.4952 45.5573V46.3293C25.4952 46.5403 25.3511 46.7872 25.1761 46.8747Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
-        d="M26.2951 50.165L25.6621 50.4892C25.3122 50.6693 25.0291 50.4686 25.0291 50.0415V47.7306C25.0291 47.3034 25.3122 46.8146 25.6621 46.6344L26.2951 46.3103C26.6451 46.1301 26.9282 46.3308 26.9282 46.7579V49.0687C26.9282 49.4959 26.6451 49.9849 26.2951 50.165ZM25.6621 47.4013V49.712L26.2951 49.3879V47.0771L25.6621 47.4013Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M25.4952 49.7978L24.8621 50.122C24.5122 50.3021 24.2291 50.1015 24.2291 49.6743V47.3634C24.2291 46.9362 24.5122 46.4474 24.8621 46.2672L25.4952 45.9431C25.8451 45.7629 26.1282 45.9636 26.1282 46.3907V48.7015C26.1282 49.1287 25.8451 49.6177 25.4952 49.7978ZM24.8621 47.0341V49.3448L25.4952 49.0207V46.7099L24.8621 47.0341Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
-        d="M25.9761 51.4833C25.8011 51.5708 25.657 51.4731 25.657 51.2569V50.099C25.657 49.888 25.8011 49.6409 25.9761 49.5534C26.151 49.4659 26.2951 49.5638 26.2951 49.7799V50.9379C26.2951 51.1489 26.151 51.3959 25.9761 51.4833Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M25.1761 51.1162C25.0011 51.2036 24.857 51.1059 24.857 50.8897V49.7318C24.857 49.5208 25.0011 49.2737 25.1761 49.1862C25.3511 49.0987 25.4952 49.1966 25.4952 49.4128V50.5707C25.4952 50.7817 25.3511 51.0287 25.1761 51.1162Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
-        d="M27.2421 52.7632L22.1728 55.3468C21.6479 55.6144 21.2207 55.3109 21.2207 54.6727V48.5071C21.2207 48.296 21.3648 48.0491 21.5398 47.9616C21.7148 47.8741 21.8589 47.9719 21.8589 48.188V54.3536C21.8589 54.5646 22.003 54.6675 22.1779 54.58L27.2473 51.9964C27.4222 51.9089 27.5663 52.0068 27.5663 52.223C27.5663 52.4391 27.4222 52.6809 27.2473 52.7684L27.2421 52.7632Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M26.4421 52.3961L21.3728 54.9796C20.8479 55.2472 20.4207 54.9437 20.4207 54.3055V48.1399C20.4207 47.9289 20.5648 47.6819 20.7398 47.5944C20.9148 47.5069 21.0589 47.6047 21.0589 47.8209V53.9864C21.0589 54.1974 21.203 54.3003 21.378 54.2128L26.4473 51.6292C26.6223 51.5417 26.7664 51.6396 26.7664 51.8558C26.7664 52.0719 26.6223 52.3137 26.4473 52.4012L26.4421 52.3961Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
-        d="M36.6139 48.178L31.8585 50.602C31.3696 50.8541 30.9682 50.5711 30.9682 49.9741V44.1894C30.9682 43.9887 31.1021 43.7622 31.2667 43.6748C31.4314 43.5873 31.5652 43.685 31.5652 43.8857V49.6704C31.5652 49.8711 31.699 49.9638 31.8637 49.8815L36.6191 47.4575C36.7838 47.3752 36.9176 47.4677 36.9176 47.6685C36.9176 47.8692 36.7838 48.0956 36.6191 48.1831L36.6139 48.178Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M35.8139 47.8108L31.0586 50.2348C30.5696 50.4869 30.1682 50.2039 30.1682 49.6069V43.8222C30.1682 43.6215 30.3021 43.3951 30.4668 43.3076C30.6314 43.2201 30.7652 43.3178 30.7652 43.5185V49.3032C30.7652 49.5039 30.899 49.5966 31.0637 49.5143L35.8191 47.0903C35.9838 47.008 36.1176 47.1006 36.1176 47.3013C36.1176 47.502 35.9838 47.7284 35.8191 47.8159L35.8139 47.8108Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
-        d="M32.4556 48.4928C32.4556 48.4928 32.4092 48.5133 32.3835 48.5184C32.224 48.5493 32.1262 48.4052 32.1674 48.1891L32.2034 47.9883C32.3835 46.9796 32.7232 45.1012 33.6444 44.6329C34.1025 44.4013 34.3238 44.6945 34.4833 44.9055C34.6326 45.1011 34.7046 45.1732 34.8281 45.1115C35.2758 44.885 35.8369 43.2638 36.0273 42.2448C36.0684 42.0287 36.228 41.8332 36.3875 41.7971C36.547 41.7663 36.6449 41.9103 36.6037 42.1265C36.5985 42.1573 35.9964 45.2401 34.8281 45.8319C34.3701 46.0635 34.1487 45.7702 33.9892 45.5591C33.84 45.3636 33.7679 45.2916 33.6444 45.3533C33.1915 45.5849 32.893 47.242 32.7798 47.8648L32.7438 48.0707C32.7078 48.2508 32.5894 48.4259 32.4556 48.4928Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M31.6556 48.1256C31.6556 48.1256 31.6092 48.1461 31.5835 48.1512C31.424 48.1821 31.3262 48.038 31.3674 47.8219L31.4034 47.6211C31.5835 46.6124 31.9232 44.734 32.8444 44.2657C33.3025 44.0341 33.5238 44.3273 33.6833 44.5383C33.8326 44.7339 33.9046 44.806 34.0281 44.7443C34.4759 44.5178 35.0369 42.8966 35.2273 41.8776C35.2685 41.6615 35.428 41.466 35.5875 41.4299C35.7471 41.3991 35.8449 41.5431 35.8037 41.7593C35.7985 41.7901 35.1964 44.8729 34.0281 45.4647C33.5701 45.6963 33.3488 45.403 33.1892 45.192C33.04 44.9964 32.968 44.9244 32.8444 44.9861C32.3915 45.2177 32.093 46.8749 31.9798 47.4976L31.9438 47.7035C31.9078 47.8837 31.7894 48.0587 31.6556 48.1256Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M144.032 28.6205C145.252 27.9978 146.827 28.0493 148.545 28.9242C152.431 30.9056 155.581 36.3403 155.581 41.0648C155.581 43.6998 154.603 45.5628 153.059 46.3451L155.555 45.0739C157.094 44.2865 158.077 42.4286 158.077 39.7936C158.077 35.0691 154.927 29.6293 151.042 27.653C149.323 26.7781 147.753 26.7266 146.528 27.3493L144.032 28.6205Z"
+        d="M143.232 28.2533C144.452 27.6306 146.027 27.6821 147.746 28.557C151.631 30.5384 154.781 35.9731 154.781 40.6976C154.781 43.3326 153.803 45.1957 152.259 45.9779L154.755 44.7068C156.294 43.9193 157.277 42.0614 157.277 39.4264C157.277 34.7019 154.127 29.2621 150.242 27.2858C148.523 26.4109 146.953 26.3594 145.728 26.9822L143.232 28.2533Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.4"
         strokeLinecap="round"
         strokeLinejoin="round"
@@ -268,9 +274,9 @@ export function DashboardVerticalStackIllustration({ className }: TIllustrationA
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M144.032 28.6208C142.493 29.4082 141.51 31.2661 141.51 33.9012C141.51 38.6257 144.66 44.0656 148.546 46.0419C150.264 46.9168 151.834 46.9682 153.059 46.3454C154.598 45.558 155.581 43.7001 155.581 41.0651C155.581 36.3406 152.431 30.9008 148.546 28.9245C146.827 28.0496 145.257 27.9981 144.032 28.6208Z"
+        d="M143.232 28.2536C141.693 29.0411 140.71 30.899 140.71 33.534C140.71 38.2585 143.86 43.6984 147.746 45.6747C149.464 46.5496 151.034 46.601 152.259 45.9782C153.798 45.1908 154.781 43.3329 154.781 40.6979C154.781 35.9734 151.631 30.5336 147.746 28.5573C146.027 27.6824 144.457 27.6309 143.232 28.2536Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.4"
         strokeLinecap="round"
         strokeLinejoin="round"
@@ -278,21 +284,21 @@ export function DashboardVerticalStackIllustration({ className }: TIllustrationA
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M144.773 36.3409C144.773 38.5899 146.271 41.1786 148.123 42.1204C149.976 43.0622 151.474 42.002 151.474 39.753C151.474 37.5039 149.976 34.9152 148.123 33.9734C146.276 33.0316 144.773 34.0919 144.773 36.3409ZM148.123 43.0262C145.864 41.8734 144.032 38.7083 144.032 35.96C144.032 33.2118 145.864 31.9148 148.123 33.0625C150.383 34.2102 152.215 37.3805 152.215 40.1288C152.215 42.877 150.383 44.1739 148.123 43.0262Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M143.973 35.9737C143.973 38.2227 145.471 40.8114 147.323 41.7532C149.176 42.6951 150.674 41.6348 150.674 39.3858C150.674 37.1368 149.176 34.5481 147.323 33.6062C145.476 32.6644 143.973 33.7247 143.973 35.9737ZM147.323 42.659C145.064 41.5062 143.232 38.3411 143.232 35.5929C143.232 32.8446 145.064 31.5476 147.323 32.6953C149.583 33.843 151.415 37.0134 151.415 39.7616C151.415 42.5098 149.583 43.8067 147.323 42.659Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M146.26 37.0973C146.26 38.3479 147.094 39.7838 148.118 40.3087C149.148 40.8336 149.981 40.2418 149.981 38.9912C149.981 37.7406 149.148 36.3047 148.118 35.7797C147.089 35.2548 146.26 35.8467 146.26 37.0973ZM148.123 41.2145C146.682 40.4837 145.519 38.4663 145.519 36.7164C145.519 34.9666 146.688 34.1431 148.123 34.8739C149.559 35.6047 150.728 37.6222 150.728 39.372C150.728 41.1218 149.559 41.9453 148.123 41.2145Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M145.46 36.7301C145.46 37.9807 146.294 39.4166 147.318 39.9415C148.348 40.4665 149.181 39.8746 149.181 38.624C149.181 37.3734 148.348 35.9375 147.318 35.4125C146.289 34.8876 145.46 35.4795 145.46 36.7301ZM147.323 40.8473C145.882 40.1165 144.719 38.0991 144.719 36.3492C144.719 34.5994 145.888 33.7759 147.323 34.5067C148.759 35.2376 149.928 37.255 149.928 39.0048C149.928 40.7546 148.759 41.5781 147.323 40.8473Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M48.0959 2.1161C46.9739 1.54483 45.5329 1.59118 43.9529 2.39918C40.3863 4.2159 37.4992 9.20798 37.4992 13.5414C37.4992 15.9602 38.3998 17.669 39.8151 18.3895L37.5197 17.2212C36.1044 16.5007 35.2038 14.792 35.2038 12.3731C35.2038 8.03457 38.0962 3.04249 41.6576 1.23091C43.2324 0.428053 44.6786 0.376562 45.8005 0.947826L48.0959 2.1161Z"
+        d="M47.2959 1.74891C46.1739 1.17765 44.7329 1.22399 43.1529 2.03199C39.5864 3.84872 36.6992 8.8408 36.6992 13.1742C36.6992 15.593 37.5998 17.3018 39.0151 18.0223L36.7197 16.854C35.3045 16.1335 34.4038 14.4248 34.4038 12.0059C34.4038 7.66738 37.2962 2.6753 40.8576 0.863723C42.4324 0.0608651 43.8786 0.00937468 45.0005 0.580639L47.2959 1.74891Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.4"
         strokeLinecap="round"
         strokeLinejoin="round"
@@ -300,20 +306,20 @@ export function DashboardVerticalStackIllustration({ className }: TIllustrationA
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M48.0959 2.1158C49.5112 2.83631 50.4118 4.54492 50.4118 6.96378C50.4118 11.3023 47.5195 16.2945 43.9581 18.1061C42.3832 18.9089 40.9371 18.9604 39.8151 18.3892C38.3998 17.6687 37.4992 15.9599 37.4992 13.5411C37.4992 9.20254 40.3915 4.21046 43.9529 2.39888C45.5277 1.59602 46.9739 1.54453 48.0959 2.1158Z"
+        d="M47.2959 1.74861C48.7112 2.46912 49.6118 4.17773 49.6118 6.59659C49.6118 10.9351 46.7195 15.9273 43.1581 17.7389C41.5832 18.5418 40.1371 18.5932 39.0152 18.022C37.5999 17.3015 36.6992 15.5927 36.6992 13.1739C36.6992 8.83535 39.5915 3.84327 43.1529 2.03169C44.7278 1.22883 46.174 1.17734 47.2959 1.74861Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.4"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
       <path
-        d="M47.5915 9.28574C47.3908 9.38867 47.2262 9.27544 47.2262 9.02841V6.81538L45.4043 7.74178C45.2035 7.84471 45.0389 7.73149 45.0389 7.48445C45.0389 7.23742 45.2035 6.95952 45.4043 6.85659L47.5864 5.74499C47.7871 5.64206 47.9518 5.75528 47.9518 6.00231V8.65787C47.9518 8.90491 47.7871 9.18281 47.5864 9.28574H47.5915Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M46.7915 8.91855C46.5908 9.02148 46.4262 8.90826 46.4262 8.66122V6.44819L44.6043 7.37459C44.4036 7.47752 44.2389 7.3643 44.2389 7.11726C44.2389 6.87023 44.4036 6.59233 44.6043 6.4894L46.7864 5.3778C46.9871 5.27487 47.1518 5.38809 47.1518 5.63513V8.29069C47.1518 8.53772 46.9871 8.81562 46.7864 8.91855H46.7915Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
-        d="M40.3144 14.7678C40.2217 14.8141 40.1291 14.8193 40.0571 14.7678C39.9129 14.6649 39.9129 14.387 40.0571 14.14L42.4244 10.0587C42.5685 9.81164 42.795 9.69842 42.9391 9.7962L44.5037 10.9028L47.3394 6.00843C47.4835 5.76139 47.7099 5.64817 47.854 5.74595C47.9982 5.84888 47.9982 6.12678 47.854 6.37381L44.761 11.7158C44.6169 11.9629 44.3904 12.0761 44.2463 11.9783L42.6818 10.8719L40.5717 14.5105C40.4997 14.634 40.407 14.7215 40.3144 14.773V14.7678Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M39.5144 14.4006C39.4218 14.447 39.3291 14.4521 39.2571 14.4006C39.113 14.2977 39.113 14.0198 39.2571 13.7728L41.6245 9.69149C41.7686 9.44446 41.995 9.33123 42.1391 9.42901L43.7037 10.5356L46.5394 5.64124C46.6835 5.39421 46.91 5.28098 47.0541 5.37876C47.1982 5.48169 47.1982 5.75959 47.0541 6.00662L43.961 11.3487C43.8169 11.5957 43.5904 11.7089 43.4463 11.6111L41.8818 10.5047L39.7717 14.1433C39.6997 14.2668 39.607 14.3543 39.5144 14.4058V14.4006Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
     </svg>
   );
diff --git a/packages/propel/src/empty-state/assets/vertical-stack/draft.tsx b/packages/propel/src/empty-state/assets/vertical-stack/draft.tsx
index f2ffcf8f6..dc3ddbfe0 100644
--- a/packages/propel/src/empty-state/assets/vertical-stack/draft.tsx
+++ b/packages/propel/src/empty-state/assets/vertical-stack/draft.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper";
 import type { TIllustrationAssetProps } from "../helper";
 
@@ -13,17 +19,17 @@ export function DraftVerticalStackIllustration({ className }: TIllustrationAsset
     >
       <g opacity="0.2">
         <path
-          d="M14.7751 141.405C14.7751 143.355 16.2347 145.299 19.1485 146.79L56.6679 165.908C62.5008 168.878 71.9541 168.878 77.787 165.908L156.627 125.737C159.54 124.252 161 122.308 161 120.358V126.583C161 128.533 159.54 130.477 156.627 131.962L77.787 172.133C71.9541 175.103 62.5008 175.103 56.6679 172.133L19.1485 153.014C16.2295 151.529 14.7751 149.58 14.7751 147.63V141.405Z"
+          d="M13.9752 140.966C13.9752 142.915 15.4347 144.86 18.3486 146.35L55.8679 165.468C61.7008 168.439 71.1541 168.439 76.987 165.468L155.827 125.298C158.741 123.813 160.2 121.868 160.2 119.919V126.144C160.2 128.093 158.741 130.038 155.827 131.523L76.987 171.693C71.1541 174.664 61.7008 174.664 55.8679 171.693L18.3486 152.575C15.4295 151.09 13.9752 149.14 13.9752 147.191V140.966Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.4"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
         <path
-          d="M14.7751 141.405C14.7751 139.456 16.2347 137.511 19.1485 136.026L97.9882 95.8559C103.821 92.8853 113.274 92.8853 119.107 95.8559L156.627 114.974C159.546 116.459 161 118.409 161 120.358C161 122.308 159.54 124.252 156.627 125.737L77.787 165.907C71.9541 168.878 62.5008 168.878 56.6679 165.907L19.1485 146.789C16.2295 145.304 14.7751 143.355 14.7751 141.405Z"
+          d="M13.9752 140.966C13.9752 139.016 15.4347 137.072 18.3486 135.587L97.1882 95.4164C103.021 92.4458 112.474 92.4458 118.307 95.4164L155.827 114.535C158.746 116.02 160.2 117.969 160.2 119.919C160.2 121.868 158.741 123.812 155.827 125.298L76.987 165.468C71.1541 168.439 61.7008 168.439 55.8679 165.468L18.3486 146.35C15.4295 144.865 13.9752 142.915 13.9752 140.966Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.4"
           strokeLinecap="round"
           strokeLinejoin="round"
@@ -31,48 +37,48 @@ export function DraftVerticalStackIllustration({ className }: TIllustrationAsset
       </g>
       <g opacity="0.6">
         <path
-          d="M14.7751 121.74C14.7751 123.69 16.2347 125.634 19.1485 127.125L56.6679 146.243C62.5008 149.213 71.9541 149.213 77.787 146.243L156.627 106.072C159.54 104.587 161 102.643 161 100.693V106.918C161 108.868 159.54 110.812 156.627 112.297L77.787 152.467C71.9541 155.438 62.5008 155.438 56.6679 152.467L19.1485 133.349C16.2295 131.864 14.7751 129.915 14.7751 127.965V121.74Z"
+          d="M13.9752 121.301C13.9752 123.25 15.4347 125.195 18.3486 126.685L55.8679 145.803C61.7008 148.774 71.1541 148.774 76.987 145.803L155.827 105.633C158.741 104.148 160.2 102.203 160.2 100.254V106.479C160.2 108.428 158.741 110.373 155.827 111.858L76.987 152.028C71.1541 154.999 61.7008 154.999 55.8679 152.028L18.3486 132.91C15.4295 131.425 13.9752 129.475 13.9752 127.526V121.301Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.4"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
         <path
-          d="M14.7751 121.74C14.7751 119.791 16.2347 117.846 19.1485 116.361L97.9882 76.1908C103.821 73.2202 113.274 73.2202 119.107 76.1908L156.627 95.3089C159.546 96.7942 161 98.7437 161 100.693C161 102.643 159.54 104.587 156.627 106.072L77.787 146.242C71.9541 149.213 62.5008 149.213 56.6679 146.242L19.1485 127.124C16.2295 125.639 14.7751 123.69 14.7751 121.74Z"
+          d="M13.9752 121.301C13.9752 119.351 15.4347 117.407 18.3486 115.922L97.1882 75.7514C103.021 72.7808 112.474 72.7808 118.307 75.7514L155.827 94.8695C158.746 96.3548 160.2 98.3042 160.2 100.254C160.2 102.203 158.741 104.147 155.827 105.633L76.987 145.803C71.1541 148.774 61.7008 148.774 55.8679 145.803L18.3486 126.685C15.4295 125.2 13.9752 123.25 13.9752 121.301Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.4"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
       </g>
       <path
-        d="M14.7751 102.075C14.7751 104.025 16.2347 105.969 19.1485 107.459L56.6679 126.578C62.5008 129.548 71.9541 129.548 77.787 126.578L156.627 86.4074C159.54 84.9221 161 82.9778 161 81.0283V87.2532C161 89.2026 159.54 91.1469 156.627 92.6322L77.787 132.802C71.9541 135.773 62.5008 135.773 56.6679 132.802L19.1485 113.684C16.2295 112.199 14.7751 110.25 14.7751 108.3V102.075Z"
+        d="M13.9752 101.636C13.9752 103.585 15.4347 105.53 18.3486 107.02L55.8679 126.138C61.7008 129.109 71.1541 129.109 76.987 126.138L155.827 85.9679C158.741 84.4826 160.2 82.5383 160.2 80.5889V86.8137C160.2 88.7632 158.741 90.7075 155.827 92.1928L76.987 132.363C71.1541 135.334 61.7008 135.334 55.8679 132.363L18.3486 113.245C15.4295 111.76 13.9752 109.81 13.9752 107.861V101.636Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.4"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
       <path
-        d="M14.7751 102.075C14.7751 100.126 16.2347 98.1813 19.1485 96.696L97.9882 56.5258C103.821 53.5552 113.274 53.5552 119.107 56.5258L156.627 75.6439C159.546 77.1292 161 79.0787 161 81.0281C161 82.9776 159.54 84.9219 156.627 86.4072L77.787 126.577C71.9541 129.548 62.5008 129.548 56.6679 126.577L19.1485 107.459C16.2295 105.974 14.7751 104.025 14.7751 102.075Z"
+        d="M13.9752 101.636C13.9752 99.6861 15.4347 97.7418 18.3486 96.2565L97.1882 56.0864C103.021 53.1157 112.474 53.1157 118.307 56.0864L155.827 75.2045C158.746 76.6898 160.2 78.6392 160.2 80.5887C160.2 82.5381 158.741 84.4824 155.827 85.9677L76.987 126.138C71.1541 129.109 61.7008 129.109 55.8679 126.138L18.3486 107.02C15.4295 105.535 13.9752 103.585 13.9752 101.636Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.4"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
       <path
-        d="M72.3151 95.154C71.4126 95.154 70.5668 94.9581 69.8087 94.5713L65.5023 92.3743C63.3001 91.25 62.0366 88.6507 62.0366 85.2417V52.6992C62.0366 46.562 66.1521 39.4707 71.2063 36.892L97.952 23.2664C99.2156 22.6218 100.448 22.2969 101.619 22.2969C102.521 22.2969 103.367 22.4929 104.125 22.8797L108.432 25.0767C110.634 26.2009 111.897 28.8002 111.897 32.2092V64.7518C111.897 70.8889 107.782 77.9802 102.728 80.5589L75.9819 94.1845C74.7184 94.8291 73.4858 95.154 72.3151 95.154Z"
+        d="M71.5151 94.7146C70.6126 94.7146 69.7668 94.5186 69.0087 94.1318L64.7023 91.9348C62.5002 90.8105 61.2366 88.2112 61.2366 84.8022V52.2597C61.2366 46.1225 65.3521 39.0312 70.4063 36.4526L97.1521 22.827C98.4156 22.1823 99.6482 21.8574 100.819 21.8574C101.721 21.8574 102.567 22.0534 103.325 22.4402L107.632 24.6372C109.834 25.7615 111.097 28.3608 111.097 31.7697V64.3123C111.097 70.4495 106.982 77.5408 101.928 80.1194L75.182 93.745C73.9184 94.3897 72.6858 94.7146 71.5151 94.7146Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
       />
       <path
-        d="M101.614 22.8127C102.444 22.8127 103.207 22.9932 103.888 23.3388L108.194 25.5358C110.139 26.526 111.382 28.8777 111.382 32.2093V64.7519C111.382 70.7292 107.4 77.5987 102.49 80.1L75.7447 93.7256C74.5276 94.3444 73.3672 94.6384 72.3151 94.6384C71.4848 94.6384 70.7215 94.4579 70.0408 94.1124L65.7344 91.9153C63.785 90.9251 62.5472 88.5734 62.5472 85.2418V52.6993C62.5472 46.7219 66.5286 39.8524 71.4384 37.3511L98.1841 23.7256C99.4012 23.1067 100.556 22.8127 101.614 22.8127ZM101.614 21.7812C100.361 21.7812 99.0506 22.1268 97.7148 22.8076L70.9691 36.4331C65.7551 39.0891 61.5157 46.3867 61.5157 52.6993V85.2418C61.5157 88.8519 62.8824 91.6214 65.2651 92.8333L69.5714 95.0304C70.4069 95.4533 71.3249 95.6699 72.3151 95.6699C73.5684 95.6699 74.8783 95.3243 76.214 94.6436L102.96 81.018C108.174 78.362 112.413 71.0644 112.413 64.7519V32.2093C112.413 28.5992 111.046 25.8297 108.664 24.6178L104.357 22.4208C103.522 21.9979 102.604 21.7812 101.614 21.7812Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        d="M100.814 22.3733C101.644 22.3733 102.407 22.5538 103.088 22.8993L107.394 25.0963C109.339 26.0865 110.582 28.4382 110.582 31.7699V64.3124C110.582 70.2897 106.6 77.1592 101.69 79.6605L74.9448 93.2861C73.7276 93.905 72.5672 94.1989 71.5151 94.1989C70.6848 94.1989 69.9216 94.0184 69.2408 93.6729L64.9344 91.4759C62.985 90.4857 61.7472 88.134 61.7472 84.8023V52.2598C61.7472 46.2825 65.7286 39.413 70.6384 36.9117L97.3841 23.2861C98.6013 22.6672 99.7565 22.3733 100.814 22.3733ZM100.814 21.3418C99.5605 21.3418 98.2506 21.6873 96.9148 22.3681L70.1691 35.9937C64.9551 38.6497 60.7158 45.9473 60.7158 52.2598V84.8023C60.7158 88.4125 62.0825 91.1819 64.4651 92.3939L68.7715 94.5909C69.6069 95.0138 70.5249 95.2304 71.5151 95.2304C72.7684 95.2304 74.0783 94.8849 75.4141 94.2041L102.16 80.5785C107.374 77.9225 111.613 70.6249 111.613 64.3124V31.7699C111.613 28.1597 110.246 25.3903 107.864 24.1783L103.557 21.9813C102.722 21.5584 101.804 21.3418 100.814 21.3418Z"
+        fill="var(--illustration-stroke-tertiary)"
       />
       <path
-        d="M108.194 25.5359C106.652 24.7468 104.662 24.8139 102.49 25.9227L75.7447 39.5483C70.835 42.0496 66.8535 48.9191 66.8535 54.8964V87.4389C66.8535 90.7706 68.0913 93.1223 70.0407 94.1125L65.7344 91.9155C63.7849 90.9253 62.5472 88.5735 62.5472 85.2419V52.6994C62.5472 46.7221 66.5286 39.8526 71.4384 37.3513L98.1841 23.7257C100.355 22.6169 102.346 22.555 103.888 23.3389L108.194 25.5359Z"
+        d="M107.394 25.0964C105.852 24.3074 103.862 24.3744 101.69 25.4832L74.9447 39.1088C70.035 41.6101 66.0535 48.4796 66.0535 54.4569V86.9995C66.0535 90.3311 67.2913 92.6828 69.2408 93.673L64.9344 91.476C62.9849 90.4858 61.7472 88.1341 61.7472 84.8025V52.2599C61.7472 46.2826 65.7286 39.4131 70.6384 36.9118L97.3841 23.2862C99.5553 22.1774 101.546 22.1155 103.088 22.8994L107.394 25.0964Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
         stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
         strokeWidth="0.4"
@@ -80,7 +86,7 @@ export function DraftVerticalStackIllustration({ className }: TIllustrationAsset
         strokeLinejoin="round"
       />
       <path
-        d="M108.194 25.5352C110.144 26.5254 111.382 28.8771 111.382 32.2087V64.7513C111.382 70.7286 107.4 77.5981 102.49 80.0994L75.7447 93.725C73.5735 94.8338 71.5828 94.8957 70.0408 94.1118C68.0913 93.1216 66.8535 90.7698 66.8535 87.4382V54.8957C66.8535 48.9184 70.835 42.0488 75.7447 39.5476L102.49 25.922C104.662 24.8132 106.652 24.7513 108.194 25.5352Z"
+        d="M107.394 25.0957C109.344 26.0859 110.582 28.4376 110.582 31.7693V64.3118C110.582 70.2891 106.6 77.1586 101.69 79.6599L74.9447 93.2855C72.7735 94.3943 70.7828 94.4562 69.2408 93.6723C67.2913 92.6821 66.0535 90.3304 66.0535 86.9988V54.4562C66.0535 48.4789 70.035 41.6094 74.9447 39.1081L101.69 25.4825C103.862 24.3737 105.852 24.3118 107.394 25.0957Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
         stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
         strokeWidth="0.4"
@@ -88,23 +94,23 @@ export function DraftVerticalStackIllustration({ className }: TIllustrationAsset
         strokeLinejoin="round"
       />
       <path
-        d="M125.497 23.1279C125.42 23.1279 125.337 23.1073 125.265 23.0712L120.443 20.6163C120.443 20.6163 120.402 20.5906 120.381 20.5802L112.037 14.6751C111.82 14.5204 111.753 14.2264 111.887 13.9944L114.486 9.50236C115.652 7.49101 117.209 5.91804 118.87 5.07224C119.731 4.63387 120.577 4.41211 121.382 4.41211C122.011 4.41211 122.599 4.55136 123.13 4.81954L127.952 7.27441C128.102 7.35177 128.251 7.4446 128.396 7.54259C129.649 8.42964 130.34 10.0697 130.34 12.1635C130.34 14.2574 129.7 16.377 128.54 18.3832L125.941 22.8752C125.848 23.0403 125.673 23.1331 125.492 23.1331L125.497 23.1279Z"
+        d="M124.697 22.6885C124.62 22.6885 124.537 22.6679 124.465 22.6318L119.643 20.1769C119.643 20.1769 119.602 20.1511 119.581 20.1408L111.237 14.2357C111.02 14.081 110.953 13.787 111.087 13.5549L113.686 9.06291C114.852 7.05156 116.409 5.47859 118.07 4.63279C118.931 4.19442 119.777 3.97266 120.582 3.97266C121.211 3.97266 121.799 4.1119 122.33 4.38008L127.152 6.83496C127.302 6.91232 127.451 7.00515 127.596 7.10314C128.849 7.99019 129.54 9.63021 129.54 11.7241C129.54 13.8179 128.9 15.9376 127.74 17.9438L125.141 22.4358C125.048 22.6008 124.873 22.6936 124.692 22.6936L124.697 22.6885Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
       />
       <path
-        d="M121.382 4.92794C121.928 4.92794 122.439 5.04656 122.893 5.27864L127.715 7.73352C127.849 7.80056 127.973 7.87792 128.096 7.96559C129.205 8.7495 129.824 10.2606 129.824 12.1636C129.824 14.0667 129.2 16.2121 128.096 18.1203L125.497 22.6123L120.675 20.1574L112.331 14.2523L114.93 9.76033C116.039 7.85213 117.539 6.33073 119.102 5.53135C119.891 5.12908 120.665 4.92794 121.382 4.92794ZM121.382 3.89648C120.489 3.89648 119.566 4.13888 118.633 4.61335C116.879 5.50556 115.25 7.15074 114.038 9.2446L111.438 13.7366C111.17 14.2008 111.299 14.7887 111.737 15.0981L120.082 21.0032C120.123 21.0342 120.165 21.06 120.211 21.0806L125.033 23.5355C125.183 23.6128 125.342 23.6489 125.502 23.6489C125.858 23.6489 126.204 23.4633 126.395 23.1332L128.994 18.6412C130.195 16.5628 130.861 14.2627 130.861 12.1636C130.861 9.89958 130.092 8.11 128.695 7.12495C128.53 7.00634 128.359 6.90319 128.184 6.81551L123.362 4.36064C122.759 4.05636 122.093 3.89648 121.382 3.89648Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        d="M120.582 4.48849C121.128 4.48849 121.639 4.60711 122.093 4.83919L126.915 7.29406C127.049 7.36111 127.173 7.43846 127.296 7.52614C128.405 8.31005 129.024 9.82114 129.024 11.7242C129.024 13.6272 128.4 15.7727 127.296 17.6809L124.697 22.1729L119.875 19.718L111.531 13.8129L114.13 9.32088C115.239 7.41268 116.739 5.89127 118.302 5.09189C119.091 4.68962 119.865 4.48849 120.582 4.48849ZM120.582 3.45703C119.689 3.45703 118.766 3.69942 117.833 4.1739C116.079 5.06611 114.45 6.71128 113.238 8.80515L110.638 13.2972C110.37 13.7613 110.499 14.3492 110.938 14.6587L119.282 20.5638C119.323 20.5947 119.365 20.6205 119.411 20.6411L124.233 23.096C124.383 23.1734 124.542 23.2095 124.702 23.2095C125.058 23.2095 125.404 23.0238 125.595 22.6938L128.194 18.2017C129.395 16.1234 130.061 13.8232 130.061 11.7242C130.061 9.46013 129.292 7.67054 127.895 6.6855C127.73 6.56688 127.559 6.46373 127.384 6.37606L122.562 3.92119C121.959 3.61691 121.293 3.45703 120.582 3.45703Z"
+        fill="var(--illustration-stroke-tertiary)"
       />
       <path
-        d="M92.0727 71.7772C91.8303 71.7772 91.6085 71.7205 91.4023 71.6122C91.3919 71.6122 91.3455 71.5813 91.2991 71.5555L86.477 69.0954C86.477 69.0954 86.4358 69.0697 86.4152 69.0593C86.1006 68.8376 85.8685 68.4714 85.7705 68.0279C85.6777 67.6411 85.6828 67.1769 85.786 66.7025L87.5858 58.4405C88.1583 55.8102 89.2053 53.1439 90.608 50.72L109.499 18.1104C109.592 17.9454 109.767 17.8525 109.948 17.8525C110.025 17.8525 110.108 17.8732 110.18 17.9093L115.002 20.3693C115.002 20.3693 115.043 20.3951 115.064 20.4054L123.408 26.3053C123.625 26.4601 123.692 26.754 123.558 26.9861L116.529 39.1315L104.672 59.5957C103.259 62.0299 101.505 64.2012 99.5869 65.8721L93.5477 71.1377C93.1867 71.4472 92.7947 71.6535 92.4182 71.736C92.2996 71.7618 92.1862 71.7721 92.0727 71.7721V71.7772Z"
+        d="M91.2727 71.3378C91.0303 71.3378 90.8086 71.2811 90.6023 71.1728C90.592 71.1728 90.5455 71.1418 90.4991 71.116L85.6771 68.656C85.6771 68.656 85.6358 68.6302 85.6152 68.6199C85.3006 68.3981 85.0685 68.032 84.9705 67.5884C84.8777 67.2016 84.8828 66.7375 84.986 66.263L86.7859 58.001C87.3583 55.3708 88.4053 52.7045 89.8081 50.2805L108.699 17.671C108.792 17.5059 108.967 17.4131 109.148 17.4131C109.225 17.4131 109.308 17.4337 109.38 17.4698L114.202 19.9298C114.202 19.9298 114.243 19.9556 114.264 19.9659L122.608 25.8659C122.825 26.0206 122.892 26.3146 122.758 26.5467L115.729 38.6921L103.872 59.1562C102.459 61.5905 100.705 63.7617 98.7869 65.4327L92.7477 70.6983C92.3867 71.0077 91.9947 71.214 91.6182 71.2965C91.4996 71.3223 91.3862 71.3326 91.2727 71.3326V71.3378Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
       />
       <path
-        d="M109.943 18.3723L114.765 20.8323L123.109 26.7323L116.08 38.8777L111.346 47.0469L104.223 59.3419C102.836 61.7348 101.124 63.8493 99.2466 65.4894L93.2073 70.755C92.9134 71.0077 92.6039 71.1727 92.31 71.2346C92.2275 71.2501 92.1449 71.2604 92.0676 71.2604C91.9129 71.2604 91.7685 71.2243 91.6395 71.1572C91.6034 71.1418 91.5673 71.116 91.5312 71.0953L86.7091 68.6353C86.4977 68.4857 86.343 68.233 86.2708 67.9133C86.1934 67.5935 86.1986 67.2119 86.2863 66.8148L88.0862 58.5528C88.6483 55.9793 89.6643 53.3749 91.0516 50.9819L109.943 18.3723ZM109.943 17.3408C109.587 17.3408 109.241 17.5265 109.051 17.8566L90.1594 50.4661C88.7308 52.9313 87.6632 55.6544 87.0805 58.3362L85.2806 66.5982C85.162 67.1449 85.1568 67.6864 85.2703 68.1608C85.394 68.7075 85.6932 69.182 86.1161 69.4811C86.1573 69.512 86.1986 69.5378 86.245 69.5585L91.0361 72.003C91.0722 72.0237 91.1238 72.0598 91.1908 72.0907C91.4642 72.2299 91.7581 72.297 92.0727 72.297C92.2223 72.297 92.3719 72.2815 92.5214 72.2506C92.9856 72.1526 93.4549 71.9102 93.883 71.544L99.9273 66.2733C101.887 64.561 103.682 62.3486 105.121 59.8679L112.243 47.5729L116.977 39.4037L124.007 27.2583C124.275 26.7942 124.146 26.2062 123.708 25.9019L115.363 20.002C115.322 19.971 115.281 19.9504 115.234 19.9246L110.412 17.4646C110.263 17.3872 110.103 17.3511 109.943 17.3511V17.3408Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        d="M109.143 17.9328L113.965 20.3929L122.309 26.2928L115.28 38.4382L110.546 46.6074L103.423 58.9024C102.036 61.2954 100.324 63.4099 98.4466 65.0499L92.4074 70.3155C92.1134 70.5682 91.804 70.7332 91.51 70.7951C91.4275 70.8106 91.3449 70.8209 91.2676 70.8209C91.1129 70.8209 90.9685 70.7848 90.8396 70.7178C90.8035 70.7023 90.7673 70.6765 90.7312 70.6559L85.9091 68.1959C85.6977 68.0463 85.543 67.7936 85.4708 67.4738C85.3934 67.1541 85.3986 66.7724 85.4863 66.3753L87.2862 58.1133C87.8483 55.5398 88.8643 52.9354 90.2516 50.5424L109.143 17.9328ZM109.143 16.9014C108.787 16.9014 108.441 17.087 108.251 17.4171L89.3594 50.0267C87.9308 52.4919 86.8633 55.2149 86.2805 57.8967L84.4806 66.1587C84.362 66.7054 84.3568 67.2469 84.4703 67.7214C84.594 68.2681 84.8932 68.7425 85.3161 69.0417C85.3573 69.0726 85.3986 69.0984 85.445 69.119L90.2361 71.5636C90.2722 71.5842 90.3238 71.6203 90.3908 71.6512C90.6642 71.7905 90.9582 71.8575 91.2727 71.8575C91.4223 71.8575 91.5719 71.8421 91.7214 71.8111C92.1856 71.7131 92.6549 71.4707 93.083 71.1046L99.1273 65.8338C101.087 64.1216 102.882 61.9091 104.321 59.4284L111.443 47.1335L116.177 38.9643L123.207 26.8189C123.475 26.3547 123.346 25.7668 122.908 25.4625L114.563 19.5625C114.522 19.5316 114.481 19.511 114.434 19.4852L109.612 17.0251C109.463 16.9478 109.303 16.9117 109.143 16.9117V16.9014Z"
+        fill="var(--illustration-stroke-tertiary)"
       />
       <path
-        d="M127.715 7.73365C126.658 7.19213 125.317 7.2798 123.924 7.98635C122.356 8.78573 120.856 10.3071 119.752 12.2153L117.153 16.7073L112.331 14.2525L114.93 9.76046C116.039 7.85226 117.539 6.33086 119.102 5.53148C120.495 4.81977 121.835 4.73725 122.893 5.27877L127.715 7.73365Z"
+        d="M126.915 7.29419C125.858 6.75268 124.517 6.84035 123.124 7.5469C121.556 8.34628 120.056 9.86769 118.952 11.7759L116.353 16.2679L111.531 13.813L114.13 9.32101C115.239 7.41281 116.739 5.89141 118.302 5.09202C119.695 4.38032 121.035 4.2978 122.093 4.83932L126.915 7.29419Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
         stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
         strokeWidth="0.4"
@@ -112,7 +118,7 @@ export function DraftVerticalStackIllustration({ className }: TIllustrationAsset
         strokeLinejoin="round"
       />
       <path
-        d="M117.153 16.712L125.497 22.6119L120.675 20.1571L112.331 14.252L117.153 16.712Z"
+        d="M116.353 16.2725L124.697 22.1725L119.875 19.7176L111.531 13.8125L116.353 16.2725Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
         stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
         strokeWidth="0.4"
@@ -120,7 +126,7 @@ export function DraftVerticalStackIllustration({ className }: TIllustrationAsset
         strokeLinejoin="round"
       />
       <path
-        d="M127.715 7.73287C127.849 7.79992 127.973 7.87728 128.096 7.96495C129.205 8.74886 129.824 10.2599 129.824 12.163C129.824 14.066 129.2 16.2115 128.096 18.1197L125.497 22.6117L117.153 16.7066L119.752 12.2146C120.861 10.3064 122.362 8.78496 123.924 7.98558C125.317 7.27387 126.658 7.19136 127.715 7.73287Z"
+        d="M126.915 7.29342C127.049 7.36046 127.173 7.43782 127.296 7.5255C128.405 8.30941 129.024 9.82049 129.024 11.7235C129.024 13.6266 128.4 15.772 127.296 17.6802L124.697 22.1722L116.353 16.2671L118.952 11.7751C120.061 9.86691 121.562 8.34551 123.124 7.54613C124.517 6.83442 125.858 6.7519 126.915 7.29342Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
         stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
         strokeWidth="0.4"
@@ -128,7 +134,7 @@ export function DraftVerticalStackIllustration({ className }: TIllustrationAsset
         strokeLinejoin="round"
       />
       <path
-        d="M114.765 20.8279L95.8788 53.4375C94.4915 55.8305 93.4703 58.4349 92.9082 61.0084L91.1083 69.2704C91.0206 69.6675 91.0155 70.0492 91.0877 70.3689C91.1599 70.6887 91.3146 70.9414 91.5312 71.0909L86.7091 68.6361C86.4925 68.4814 86.343 68.2338 86.2656 67.9141C86.1934 67.5943 86.1986 67.2127 86.2862 66.8155L88.0861 58.5536C88.6483 55.9801 89.6643 53.3756 91.0567 50.9826L109.943 18.373L114.765 20.8279Z"
+        d="M113.965 20.3885L95.0788 52.9981C93.6915 55.3911 92.6704 57.9955 92.1082 60.569L90.3083 68.831C90.2206 69.2281 90.2155 69.6097 90.2877 69.9295C90.3599 70.2492 90.5146 70.5019 90.7312 70.6515L85.9091 68.1966C85.6925 68.0419 85.543 67.7944 85.4656 67.4746C85.3934 67.1549 85.3986 66.7732 85.4863 66.3761L87.2862 58.1141C87.8483 55.5406 88.8643 52.9362 90.2568 50.5432L109.143 17.9336L113.965 20.3885Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
         stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
         strokeWidth="0.4"
@@ -136,7 +142,7 @@ export function DraftVerticalStackIllustration({ className }: TIllustrationAsset
         strokeLinejoin="round"
       />
       <path
-        d="M114.765 20.8271L123.109 26.7323L104.223 59.3418C102.836 61.74 101.124 63.8493 99.2465 65.4893L93.2073 70.7549C92.9185 71.0077 92.6091 71.1727 92.31 71.2346C92.0624 71.2861 91.8355 71.2604 91.6395 71.1572C91.6034 71.1366 91.5673 71.116 91.5312 71.0902C91.3146 70.9355 91.1651 70.6879 91.0877 70.3681C91.0155 70.0484 91.0206 69.6668 91.1083 69.2696L92.9082 61.0077C93.4703 58.4342 94.4863 55.8297 95.8788 53.4367L114.765 20.8271Z"
+        d="M113.965 20.3877L122.309 26.2928L103.423 58.9024C102.036 61.3005 100.324 63.4099 98.4466 65.0499L92.4073 70.3155C92.1185 70.5682 91.8091 70.7332 91.51 70.7951C91.2624 70.8467 91.0355 70.8209 90.8395 70.7178C90.8034 70.6971 90.7673 70.6765 90.7312 70.6507C90.5146 70.496 90.3651 70.2485 90.2877 69.9287C90.2155 69.6089 90.2206 69.2273 90.3083 68.8302L92.1082 60.5682C92.6704 57.9947 93.6864 55.3903 95.0788 52.9973L113.965 20.3877Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
         stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
         strokeWidth="0.4"
@@ -146,9 +152,9 @@ export function DraftVerticalStackIllustration({ className }: TIllustrationAsset
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M146.936 37.7746C148.06 37.2022 149.504 37.2486 151.088 38.0583C154.662 39.8788 157.555 44.8814 157.555 49.2238C157.555 51.6477 156.652 53.36 155.234 54.082L157.534 52.9113C158.953 52.1893 159.855 50.477 159.855 48.0531C159.855 43.7055 156.957 38.7029 153.388 36.8876C151.81 36.083 150.36 36.0314 149.236 36.6039L146.936 37.7746Z"
+        d="M146.136 37.3352C147.26 36.7627 148.704 36.8091 150.288 37.6188C153.862 39.4393 156.755 44.4419 156.755 48.7844C156.755 51.2083 155.852 52.9205 154.434 53.6425L156.734 52.4718C158.153 51.7498 159.055 50.0376 159.055 47.6137C159.055 43.2661 156.157 38.2635 152.588 36.4481C151.01 35.6436 149.561 35.592 148.436 36.1645L146.136 37.3352Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.4"
         strokeLinecap="round"
         strokeLinejoin="round"
@@ -156,9 +162,9 @@ export function DraftVerticalStackIllustration({ className }: TIllustrationAsset
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M146.936 37.7738C145.518 38.4959 144.615 40.2081 144.615 42.632C144.615 46.9796 147.514 51.9822 151.083 53.7976C152.661 54.6021 154.11 54.6537 155.234 54.0812C156.652 53.3592 157.555 51.647 157.555 49.223C157.555 44.8754 154.657 39.8729 151.088 38.0575C149.51 37.2529 148.06 37.2014 146.936 37.7738Z"
+        d="M146.136 37.3344C144.718 38.0564 143.815 39.7686 143.815 42.1926C143.815 46.5402 146.714 51.5427 150.283 53.3581C151.861 54.1626 153.31 54.2142 154.434 53.6418C155.852 52.9197 156.755 51.2075 156.755 48.7836C156.755 44.436 153.857 39.4334 150.288 37.618C148.71 36.8135 147.26 36.7619 146.136 37.3344Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.4"
         strokeLinecap="round"
         strokeLinejoin="round"
@@ -166,15 +172,15 @@ export function DraftVerticalStackIllustration({ className }: TIllustrationAsset
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M152.867 44.0461C152.686 43.7367 152.444 43.4891 152.186 43.3602C151.933 43.2313 151.686 43.2313 151.505 43.3602L148.767 45.2942C148.468 45.5056 148.298 45.9131 148.298 46.4288C148.298 46.9445 148.468 47.5221 148.767 48.043C149.066 48.5588 149.473 48.9713 149.896 49.1879C150.319 49.4045 150.727 49.4045 151.026 49.1931L153.96 47.1199C154.084 47.0322 154.285 47.1353 154.414 47.3519C154.538 47.5685 154.538 47.8109 154.414 47.9038L151.48 49.977C151.062 50.2761 150.489 50.271 149.896 49.9667C149.303 49.6624 148.736 49.09 148.313 48.3628C147.895 47.6408 147.658 46.8259 147.658 46.1039C147.658 45.3819 147.895 44.8094 148.313 44.5154L151.046 42.5814C151.346 42.37 151.753 42.37 152.176 42.5814C152.599 42.798 153.006 43.2106 153.305 43.7264C153.604 44.2421 153.775 44.8249 153.775 45.3406C153.775 45.8563 153.604 46.2637 153.305 46.4804L150.562 48.4143C150.381 48.5433 150.139 48.5381 149.886 48.4143C149.633 48.2906 149.386 48.0379 149.21 47.7284C149.035 47.419 148.932 47.0683 148.932 46.7589C148.932 46.4494 149.035 46.207 149.21 46.0781L151.923 44.1647C152.047 44.0771 152.248 44.1802 152.377 44.3968C152.501 44.6134 152.501 44.8558 152.377 44.9435L149.664 46.8568C149.602 46.8981 149.571 46.9806 149.571 47.0838C149.571 47.1869 149.608 47.3004 149.664 47.4087C149.726 47.5118 149.803 47.5943 149.891 47.6356C149.979 47.6769 150.056 47.6769 150.118 47.6356L152.862 45.7016C153.042 45.5727 153.14 45.3303 153.14 45.0208C153.14 44.7114 153.037 44.3607 152.857 44.0513L152.867 44.0461Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M152.067 43.6067C151.886 43.2972 151.644 43.0497 151.386 42.9207C151.133 42.7918 150.886 42.7918 150.705 42.9207L147.967 44.8547C147.668 45.0662 147.498 45.4736 147.498 45.9893C147.498 46.5051 147.668 47.0827 147.967 47.6036C148.266 48.1193 148.673 48.5319 149.096 48.7485C149.519 48.9651 149.927 48.9651 150.226 48.7536L153.16 46.6804C153.284 46.5927 153.485 46.6959 153.614 46.9125C153.738 47.1291 153.738 47.3715 153.614 47.4643L150.68 49.5376C150.262 49.8367 149.689 49.8315 149.096 49.5272C148.503 49.223 147.936 48.6505 147.513 47.9233C147.095 47.2013 146.858 46.3864 146.858 45.6644C146.858 44.9424 147.095 44.3699 147.513 44.076L150.246 42.142C150.546 41.9305 150.953 41.9305 151.376 42.142C151.799 42.3586 152.206 42.7712 152.505 43.2869C152.804 43.8026 152.975 44.3854 152.975 44.9011C152.975 45.4169 152.804 45.8243 152.505 46.0409L149.762 47.9749C149.581 48.1038 149.339 48.0987 149.086 47.9749C148.833 47.8511 148.586 47.5984 148.41 47.289C148.235 46.9795 148.132 46.6288 148.132 46.3194C148.132 46.01 148.235 45.7676 148.41 45.6386L151.123 43.7253C151.247 43.6376 151.448 43.7407 151.577 43.9574C151.701 44.174 151.701 44.4164 151.577 44.504L148.864 46.4174C148.802 46.4586 148.771 46.5412 148.771 46.6443C148.771 46.7475 148.808 46.8609 148.864 46.9692C148.926 47.0724 149.004 47.1549 149.091 47.1961C149.179 47.2374 149.256 47.2374 149.318 47.1961L152.062 45.2622C152.242 45.1332 152.34 44.8908 152.34 44.5814C152.34 44.272 152.237 43.9213 152.057 43.6118L152.067 43.6067Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M23.8262 37.9394C23.2486 37.6454 22.8824 36.9492 22.8824 35.959V23.3133C22.8824 21.5392 24.0635 19.4969 25.523 18.7542L58.246 2.08067C58.8907 1.75061 59.4838 1.73514 59.9428 1.96722L57.6426 0.796508C57.1836 0.564429 56.5905 0.579902 55.9459 0.909969L23.2228 17.5835C21.7633 18.3262 20.5823 20.3685 20.5823 22.1426V34.7883C20.5823 35.7785 20.9485 36.4747 21.5261 36.7687L23.8262 37.9394Z"
+        d="M23.0262 37.4999C22.4486 37.206 22.0825 36.5097 22.0825 35.5195V22.8738C22.0825 21.0997 23.2635 19.0574 24.723 18.3148L57.446 1.64122C58.0907 1.31115 58.6838 1.29569 59.1428 1.52776L56.8426 0.357054C56.3836 0.124976 55.7905 0.140449 55.1459 0.470516L22.4228 17.1441C20.9633 17.8867 19.7823 19.929 19.7823 21.7031V34.3488C19.7823 35.339 20.1485 36.0353 20.7261 36.3292L23.0262 37.4999Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.4"
         strokeLinecap="round"
         strokeLinejoin="round"
@@ -182,9 +188,9 @@ export function DraftVerticalStackIllustration({ className }: TIllustrationAsset
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M23.8262 37.9386C24.2852 38.1707 24.8783 38.1552 25.523 37.8251L58.246 21.1516C59.7056 20.4089 60.8866 18.3666 60.8866 16.5925V3.94683C60.8866 2.95663 60.5204 2.2604 59.9428 1.96643C59.4838 1.73435 58.8907 1.74982 58.246 2.07989L25.523 18.7534C24.0635 19.4961 22.8824 21.5384 22.8824 23.3125V35.9582C22.8824 36.9484 23.2486 37.6446 23.8262 37.9386Z"
+        d="M23.0262 37.4991C23.4852 37.7312 24.0783 37.7157 24.723 37.3857L57.4461 20.7121C58.9056 19.9695 60.0866 17.9272 60.0866 16.1531V3.50738C60.0866 2.51718 59.7204 1.82094 59.1428 1.52698C58.6838 1.2949 58.0907 1.31037 57.4461 1.64044L24.723 18.314C23.2635 19.0566 22.0825 21.0989 22.0825 22.873V35.5187C22.0825 36.5089 22.4486 37.2052 23.0262 37.4991Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.4"
         strokeLinecap="round"
         strokeLinejoin="round"
@@ -192,39 +198,39 @@ export function DraftVerticalStackIllustration({ className }: TIllustrationAsset
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M47.4982 15.6389L39.9066 19.5069C39.2826 19.8266 38.7772 19.4656 38.7772 18.7075C38.7772 17.9494 39.2826 17.0726 39.9066 16.758L47.4982 12.8901C48.1222 12.5703 48.6276 12.9313 48.6276 13.6894C48.6276 14.4476 48.1222 15.3243 47.4982 15.6389Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M46.6982 15.1994L39.1067 19.0674C38.4826 19.3872 37.9772 19.0262 37.9772 18.268C37.9772 17.5099 38.4826 16.6332 39.1067 16.3186L46.6982 12.4506C47.3222 12.1308 47.8277 12.4919 47.8277 13.25C47.8277 14.0081 47.3222 14.8848 46.6982 15.1994Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M51.0052 20.2192L40.3605 25.6447C39.4837 26.0883 38.7772 25.588 38.7772 24.5256C38.7772 23.458 39.4889 22.2358 40.3605 21.7922L51.0052 16.3667C51.8819 15.9232 52.5884 16.4235 52.5884 17.4859C52.5884 18.5534 51.8767 19.7757 51.0052 20.2192Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M50.2052 19.7798L39.5605 25.2053C38.6838 25.6488 37.9772 25.1485 37.9772 24.0861C37.9772 23.0186 38.6889 21.7963 39.5605 21.3528L50.2052 15.9273C51.0819 15.4838 51.7885 15.984 51.7885 17.0464C51.7885 18.114 51.0768 19.3363 50.2052 19.7798Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M31.459 23.711C31.526 23.8606 31.6704 23.9121 31.8406 23.8296C32.0727 23.711 32.2635 23.3809 32.2635 23.0921V22.5558C32.2635 22.3804 32.2016 22.2515 32.0882 22.2102C31.9747 22.169 31.8251 22.2205 31.6962 22.3495L28.9628 25.057C28.803 25.2169 28.6946 25.4696 28.6946 25.6862V29.3685C28.6946 29.5542 28.772 29.6831 28.8958 29.7141C29.0196 29.745 29.1794 29.6728 29.3084 29.5181L29.7003 29.0643C29.9066 28.827 29.984 28.466 29.8808 28.2649C29.8086 28.1308 29.6797 28.0999 29.5353 28.1566V25.614L31.4641 23.7058L31.459 23.711Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M30.659 23.2715C30.726 23.4211 30.8704 23.4727 31.0406 23.3902C31.2727 23.2715 31.4635 22.9415 31.4635 22.6527V22.1163C31.4635 21.941 31.4016 21.812 31.2882 21.7708C31.1747 21.7295 31.0251 21.7811 30.8962 21.91L28.1628 24.6176C28.003 24.7775 27.8947 25.0302 27.8947 25.2468V28.9291C27.8947 29.1148 27.972 29.2437 28.0958 29.2746C28.2196 29.3056 28.3794 29.2334 28.5084 29.0787L28.9003 28.6248C29.1066 28.3876 29.184 28.0266 29.0809 27.8254C29.0087 27.6913 28.8797 27.6604 28.7353 27.7171V25.1746L30.6641 23.2664L30.659 23.2715Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M29.7778 22.9883C29.8448 23.1379 29.9892 23.1895 30.1594 23.107C30.3915 22.9883 30.5823 22.6583 30.5823 22.3695V21.8331C30.5823 21.6577 30.5204 21.5288 30.4069 21.4876C30.2935 21.4463 30.1439 21.4979 30.015 21.6268L27.2816 24.3344C27.1217 24.4943 27.0134 24.747 27.0134 24.9636V28.6459C27.0134 28.8316 27.0908 28.9605 27.2146 28.9914C27.3383 29.0224 27.4982 28.9502 27.6271 28.7955L28.0191 28.3416C28.2254 28.1044 28.3028 27.7434 28.1996 27.5422C28.1274 27.4081 27.9985 27.3772 27.8541 27.4339V24.8914L29.7829 22.9832L29.7778 22.9883Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M28.9778 22.5489C29.0448 22.6984 29.1892 22.75 29.3594 22.6675C29.5915 22.5489 29.7823 22.2188 29.7823 21.93V21.3936C29.7823 21.2183 29.7204 21.0894 29.607 21.0481C29.4935 21.0068 29.3439 21.0584 29.215 21.1874L26.4816 23.8949C26.3218 24.0548 26.2134 24.3075 26.2134 24.5241V28.2064C26.2134 28.3921 26.2908 28.521 26.4146 28.552C26.5384 28.5829 26.6982 28.5107 26.8272 28.356L27.2191 27.9022C27.4254 27.6649 27.5028 27.3039 27.3996 27.1028C27.3274 26.9687 27.1985 26.9377 27.0541 26.9945V24.4519L28.9829 22.5437L28.9778 22.5489Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M34.1305 26.8511C34.1305 27.0677 34.0221 27.3204 33.8623 27.4803L31.1289 30.1878C31 30.3168 30.8556 30.3683 30.7421 30.3271C30.6286 30.2858 30.5616 30.1621 30.5616 29.9867V26.3044C30.5616 26.0878 30.6699 25.8351 30.8298 25.6752L33.5631 22.9676C33.6921 22.8387 33.8365 22.7871 33.9499 22.8284C34.0634 22.8696 34.1305 22.9986 34.1305 23.1688V26.8562V26.8511ZM33.2898 24.3601L31.3971 26.2373V28.7954L33.2898 26.9233V24.3653V24.3601Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M33.3305 26.4116C33.3305 26.6282 33.2222 26.8809 33.0623 27.0408L30.3289 29.7484C30.2 29.8773 30.0556 29.9289 29.9421 29.8876C29.8287 29.8464 29.7616 29.7226 29.7616 29.5473V25.8649C29.7616 25.6483 29.8699 25.3956 30.0298 25.2358L32.7631 22.5282C32.8921 22.3992 33.0365 22.3477 33.1499 22.3889C33.2634 22.4302 33.3305 22.5591 33.3305 22.7293V26.4168V26.4116ZM32.4898 23.9206L30.5971 25.7979V28.3559L32.4898 26.4838V23.9258V23.9206Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M5.62093 81.4623C4.20268 80.7403 3.30015 79.0332 3.30015 76.6041C3.30015 72.2565 6.19856 67.254 9.76741 65.4386L33.6973 53.2467C35.2754 52.4422 36.7194 52.3906 37.8437 52.9631L35.5436 51.7924C34.4193 51.2199 32.9752 51.2715 31.3971 52.076L7.46726 64.2679C3.89325 66.0884 1 71.091 1 75.4334C1 77.8625 1.90253 79.5696 3.32078 80.2916L5.62093 81.4623Z"
+        d="M4.82095 81.0229C3.40269 80.3009 2.50016 78.5938 2.50016 76.1647C2.50016 71.8171 5.39857 66.8145 8.96742 64.9991L32.8973 52.8073C34.4754 52.0028 35.9194 51.9512 37.0437 52.5236L34.7436 51.3529C33.6193 50.7805 32.1752 50.832 30.5971 51.6366L6.66727 63.8284C3.09326 65.649 0.200012 70.6515 0.200012 74.994C0.200012 77.4231 1.10254 79.1301 2.5208 79.8522L4.82095 81.0229Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.4"
         strokeLinecap="round"
         strokeLinejoin="round"
@@ -232,9 +238,9 @@ export function DraftVerticalStackIllustration({ className }: TIllustrationAsset
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M5.62095 81.4615C6.74525 82.034 8.18929 81.9824 9.76743 81.1779L33.6973 68.986C37.2713 67.1655 40.1645 62.1629 40.1645 57.8205C40.1645 55.3914 39.262 53.6843 37.8437 52.9623C36.7195 52.3898 35.2754 52.4414 33.6973 53.246L9.76743 65.4378C6.19342 67.2583 3.30017 72.2609 3.30017 76.6034C3.30017 79.0324 4.2027 80.7395 5.62095 81.4615Z"
+        d="M4.82097 81.0221C5.94526 81.5945 7.38931 81.543 8.96744 80.7384L32.8973 68.5466C36.4713 66.7261 39.3645 61.7235 39.3645 57.381C39.3645 54.9519 38.462 53.2449 37.0438 52.5229C35.9195 51.9504 34.4754 52.002 32.8973 52.8065L8.96744 64.9984C5.39343 66.8189 2.50018 71.8215 2.50018 76.1639C2.50018 78.593 3.40271 80.3001 4.82097 81.0221Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.4"
         strokeLinecap="round"
         strokeLinejoin="round"
@@ -242,26 +248,26 @@ export function DraftVerticalStackIllustration({ className }: TIllustrationAsset
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M30.6699 65.3707L21.9128 69.8318C21.1908 70.1979 20.608 69.7854 20.608 68.9086C20.608 68.0319 21.1908 67.0262 21.9128 66.66L30.6699 62.199C31.3919 61.8328 31.9747 62.2454 31.9747 63.1221C31.9747 63.9989 31.3919 65.0045 30.6699 65.3707Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M29.8699 64.9313L21.1129 69.3923C20.3908 69.7585 19.808 69.3459 19.808 68.4692C19.808 67.5924 20.3908 66.5867 21.1129 66.2206L29.8699 61.7595C30.592 61.3933 31.1747 61.8059 31.1747 62.6827C31.1747 63.5594 30.592 64.5651 29.8699 64.9313Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M9.87575 73.9533C9.6282 74.3865 9.4838 74.8661 9.4838 75.2993C9.4838 75.7274 9.62304 76.0678 9.87575 76.2483C10.1233 76.4236 10.4637 76.4236 10.8195 76.2483C11.1754 76.0729 11.5106 75.7274 11.7633 75.2942L12.2326 74.4793C12.3616 74.2524 12.573 74.1492 12.702 74.2369C12.8309 74.3298 12.8309 74.5876 12.702 74.8094L12.2326 75.6242C11.8562 76.2689 11.3507 76.7846 10.8195 77.058C10.2883 77.3261 9.78291 77.3313 9.40643 77.0631C9.02995 76.8001 8.82367 76.2895 8.82367 75.6449C8.82367 75.0002 9.03511 74.273 9.40643 73.6284L9.87575 72.8135C10.0047 72.5866 10.2161 72.4834 10.3451 72.5711C10.474 72.6588 10.474 72.9218 10.3451 73.1436L9.87575 73.9584V73.9533Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M9.07576 73.5138C8.82821 73.947 8.68382 74.4267 8.68382 74.8599C8.68382 75.2879 8.82305 75.6283 9.07576 75.8088C9.32331 75.9842 9.6637 75.9842 10.0196 75.8088C10.3754 75.6335 10.7106 75.2879 10.9633 74.8547L11.4326 74.0399C11.5616 73.8129 11.773 73.7098 11.902 73.7975C12.0309 73.8903 12.0309 74.1482 11.902 74.3699L11.4326 75.1848C11.0562 75.8294 10.5508 76.3452 10.0196 76.6185C9.48835 76.8867 8.98293 76.8919 8.60644 76.6237C8.22996 76.3607 8.02368 75.8501 8.02368 75.2054C8.02368 74.5608 8.23512 73.8336 8.60644 73.1889L9.07576 72.3741C9.20469 72.1471 9.41614 72.044 9.54508 72.1317C9.67401 72.2193 9.67401 72.4824 9.54508 72.7041L9.07576 73.519V73.5138Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M11.2888 70.9456C11.1599 70.8528 11.1599 70.5949 11.2888 70.3732L11.7582 69.5583C12.1346 68.9137 12.64 68.3979 13.1712 68.1246C13.7025 67.8513 14.2079 67.8513 14.5843 68.1194C14.9608 68.3825 15.1671 68.893 15.1671 69.5377C15.1671 70.1824 14.9557 70.9095 14.5843 71.5542L14.115 72.3691C13.9861 72.596 13.7746 72.6991 13.6457 72.6115C13.5168 72.5186 13.5168 72.2608 13.6457 72.039L14.115 71.2241C14.3626 70.7909 14.507 70.3113 14.507 69.8781C14.507 69.4449 14.3677 69.1096 14.115 68.9291C13.8675 68.7538 13.5271 68.7538 13.1712 68.9291C12.8206 69.1096 12.4802 69.45 12.2275 69.8832L11.7582 70.6981C11.6292 70.925 11.4178 71.0282 11.2888 70.9405V70.9456Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M10.4889 70.5062C10.3599 70.4134 10.3599 70.1555 10.4889 69.9337L10.9582 69.1189C11.3346 68.4742 11.8401 67.9585 12.3713 67.6851C12.9025 67.4118 13.4079 67.4118 13.7844 67.68C14.1608 67.943 14.3671 68.4536 14.3671 69.0982C14.3671 69.7429 14.1557 70.4701 13.7844 71.1148L13.315 71.9296C13.1861 72.1565 12.9747 72.2597 12.8457 72.172C12.7168 72.0792 12.7168 71.8213 12.8457 71.5995L13.315 70.7847C13.5626 70.3515 13.707 69.8718 13.707 69.4386C13.707 69.0054 13.5677 68.6702 13.315 68.4897C13.0675 68.3143 12.7271 68.3143 12.3713 68.4897C12.0206 68.6702 11.6802 69.0106 11.4275 69.4438L10.9582 70.2586C10.8292 70.4856 10.6178 70.5887 10.4889 70.501V70.5062Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M10.8195 74.6185C10.6906 74.5256 10.6906 74.2678 10.8195 74.046L12.7019 70.7969C12.8309 70.57 13.0423 70.4668 13.1713 70.5545C13.3002 70.6473 13.3002 70.9052 13.1713 71.127L11.2889 74.3761C11.1599 74.603 10.9485 74.7061 10.8195 74.6185Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M10.0196 74.179C9.89062 74.0862 9.89062 73.8283 10.0196 73.6066L11.902 70.3575C12.0309 70.1305 12.2423 70.0274 12.3713 70.1151C12.5002 70.2079 12.5002 70.4658 12.3713 70.6875L10.4889 73.9366C10.3599 74.1635 10.1485 74.2667 10.0196 74.179Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
     </svg>
   );
diff --git a/packages/propel/src/empty-state/assets/vertical-stack/epic.tsx b/packages/propel/src/empty-state/assets/vertical-stack/epic.tsx
index e0c7c662f..ec22fafa9 100644
--- a/packages/propel/src/empty-state/assets/vertical-stack/epic.tsx
+++ b/packages/propel/src/empty-state/assets/vertical-stack/epic.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper";
 import type { TIllustrationAssetProps } from "../helper";
 
@@ -14,9 +20,9 @@ export function EpicVerticalStackIllustration({ className }: TIllustrationAssetP
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M146.362 35.9625C146.905 35.6869 147.249 35.0343 147.249 34.1061V22.2529C147.249 20.5899 146.139 18.6756 144.766 17.9795L114.001 2.35075C113.395 2.04136 112.837 2.02685 112.406 2.24438L114.568 1.14702C115 0.929488 115.557 0.944006 116.163 1.25339L146.929 16.8822C148.301 17.5783 149.411 19.4926 149.411 21.1555V33.0088C149.411 33.937 149.067 34.5896 148.524 34.8651L146.362 35.9625Z"
+        d="M145.537 35.1375C146.08 34.862 146.424 34.2094 146.424 33.2812V21.4279C146.424 19.765 145.314 17.8506 143.941 17.1545L113.176 1.5258C112.57 1.21641 112.012 1.20189 111.581 1.41943L113.743 0.322073C114.175 0.104537 114.732 0.119055 115.338 0.428439L146.104 16.0572C147.476 16.7533 148.586 18.6676 148.586 20.3306V32.1839C148.586 33.112 148.242 33.7646 147.699 34.0402L145.537 35.1375Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.35"
         strokeLinecap="round"
         strokeLinejoin="round"
@@ -24,9 +30,9 @@ export function EpicVerticalStackIllustration({ className }: TIllustrationAssetP
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M146.362 35.9625C145.93 36.18 145.372 36.1655 144.766 35.8561L114.001 20.2274C112.629 19.5312 111.518 17.6169 111.518 15.954V4.1007C111.518 3.17254 111.863 2.51992 112.406 2.24438C112.837 2.02684 113.395 2.04136 114.001 2.35074L144.766 17.9795C146.139 18.6756 147.249 20.5899 147.249 22.2529V34.1061C147.249 35.0343 146.905 35.6869 146.362 35.9625Z"
+        d="M145.537 35.1375C145.105 35.355 144.547 35.3406 143.941 35.0312L113.176 19.4024C111.804 18.7063 110.693 16.792 110.693 15.129V3.27574C110.693 2.34759 111.038 1.69497 111.581 1.41942C112.012 1.20189 112.57 1.21641 113.176 1.52579L143.941 17.1545C145.314 17.8506 146.424 19.765 146.424 21.4279V33.2812C146.424 34.2093 146.08 34.862 145.537 35.1375Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.35"
         strokeLinecap="round"
         strokeLinejoin="round"
@@ -34,46 +40,46 @@ export function EpicVerticalStackIllustration({ className }: TIllustrationAssetP
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M124.634 15.3787L131.772 19.0043C132.358 19.304 132.833 18.9657 132.833 18.255C132.833 17.5444 132.358 16.7226 131.772 16.4277L124.634 12.8021C124.048 12.5024 123.572 12.8408 123.572 13.5514C123.572 14.2621 124.048 15.0838 124.634 15.3787Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M123.809 14.5538L130.947 18.1794C131.533 18.4791 132.008 18.1407 132.008 17.4301C132.008 16.7195 131.533 15.8977 130.947 15.6028L123.809 11.9772C123.223 11.6775 122.747 12.0159 122.747 12.7265C122.747 13.4371 123.223 14.2589 123.809 14.5538Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M125.143 21.3344L135.151 26.4199C135.976 26.8356 136.64 26.3667 136.64 25.3709C136.64 24.3702 135.971 23.2245 135.151 22.8088L125.143 17.7233C124.319 17.3075 123.655 17.7765 123.655 18.7723C123.655 19.7729 124.324 20.9186 125.143 21.3344Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M124.318 20.5094L134.326 25.5949C135.151 26.0107 135.815 25.5418 135.815 24.5459C135.815 23.5453 135.146 22.3996 134.326 21.9838L124.318 16.8983C123.494 16.4826 122.83 16.9515 122.83 17.9473C122.83 18.948 123.499 20.0937 124.318 20.5094Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M118.641 11.6999C118.69 11.8595 118.801 12.0142 118.927 12.077C119.102 12.1689 119.247 12.0625 119.247 11.845V11.4437C119.247 11.3132 119.199 11.1634 119.111 11.0473C119.024 10.9313 118.918 10.8588 118.816 10.854L116.755 10.796C116.634 10.796 116.551 10.8975 116.551 11.0618V13.827C116.551 13.9672 116.609 14.1218 116.702 14.2427C116.799 14.3636 116.915 14.4264 117.012 14.4119L117.308 14.3684C117.463 14.3442 117.521 14.1363 117.443 13.9043C117.39 13.7496 117.293 13.6239 117.186 13.5611V11.6516L118.636 11.6903L118.641 11.6999Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M117.816 10.875C117.865 11.0345 117.976 11.1892 118.102 11.2521C118.277 11.3439 118.422 11.2375 118.422 11.02V10.6188C118.422 10.4883 118.374 10.3384 118.286 10.2224C118.199 10.1064 118.093 10.0338 117.991 10.029L115.93 9.97101C115.809 9.97101 115.726 10.0725 115.726 10.2369V13.002C115.726 13.1422 115.784 13.2969 115.877 13.4177C115.974 13.5386 116.09 13.6014 116.187 13.5869L116.483 13.5434C116.638 13.5193 116.696 13.3114 116.618 13.0794C116.565 12.9247 116.468 12.799 116.361 12.7361V10.8267L117.811 10.8653L117.816 10.875Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M117.376 9.87267C117.424 10.0322 117.536 10.1869 117.662 10.2497C117.836 10.3416 117.982 10.2352 117.982 10.0177V9.61645C117.982 9.48592 117.933 9.33606 117.846 9.22004C117.759 9.10402 117.652 9.03153 117.55 9.0267L115.489 8.96866C115.368 8.96866 115.286 9.0702 115.286 9.23456V11.9997C115.286 12.1399 115.344 12.2945 115.436 12.4154C115.533 12.5363 115.649 12.5991 115.746 12.5846L116.042 12.5411C116.197 12.5169 116.256 12.3091 116.178 12.077C116.125 11.9223 116.028 11.7966 115.921 11.7338V9.82431L117.371 9.86299L117.376 9.87267Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M116.551 9.04772C116.599 9.20724 116.711 9.36192 116.837 9.42476C117.011 9.51661 117.157 9.41027 117.157 9.19274V8.79149C117.157 8.66097 117.108 8.51111 117.021 8.39509C116.934 8.27907 116.827 8.20658 116.725 8.20174L114.664 8.14371C114.543 8.14371 114.461 8.24525 114.461 8.40961V11.1747C114.461 11.3149 114.519 11.4696 114.611 11.5904C114.708 11.7113 114.824 11.7742 114.921 11.7597L115.217 11.7161C115.372 11.692 115.431 11.4841 115.353 11.2521C115.3 11.0974 115.203 10.9717 115.096 10.9088V8.99936L116.546 9.03804L116.551 9.04772Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M120.518 12.9423C120.43 12.8215 120.324 12.749 120.227 12.749L118.166 12.6909C118.045 12.6909 117.962 12.7973 117.962 12.952V15.722C117.962 15.8525 118.011 15.9975 118.098 16.1135C118.19 16.2344 118.297 16.3069 118.394 16.3069L120.45 16.3649C120.576 16.3746 120.658 16.2682 120.658 16.1038V13.3339C120.658 13.2034 120.61 13.0584 120.518 12.9423ZM120.023 15.5141L118.597 15.4706V13.5514L120.023 13.5949V15.5141Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M119.693 12.1174C119.605 11.9965 119.499 11.924 119.402 11.924L117.341 11.866C117.22 11.866 117.137 11.9724 117.137 12.1271V14.897C117.137 15.0275 117.186 15.1726 117.273 15.2886C117.365 15.4094 117.472 15.4819 117.569 15.4819L119.625 15.54C119.751 15.5496 119.833 15.4433 119.833 15.2789V12.5089C119.833 12.3784 119.785 12.2334 119.693 12.1174ZM119.198 14.6891L117.772 14.6456V12.7265L119.198 12.77V14.6891Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <g opacity="0.2">
         <path
-          d="M7.92419 134.11C7.92419 135.937 9.29639 137.76 12.0359 139.157L47.3107 157.077C52.7947 159.861 61.6825 159.861 67.1664 157.077L141.29 119.424C144.029 118.032 145.401 116.209 145.401 114.382V120.217C145.401 122.044 144.029 123.866 141.29 125.259L67.1664 162.912C61.6825 165.696 52.7947 165.696 47.3107 162.912L12.0359 144.991C9.29155 143.599 7.92419 141.772 7.92419 139.945V134.11Z"
+          d="M7.0992 133.285C7.0992 135.112 8.4714 136.935 11.211 138.332L46.4857 156.252C51.9697 159.036 60.8575 159.036 66.3414 156.252L140.465 118.599C143.204 117.207 144.576 115.384 144.576 113.557V119.392C144.576 121.219 143.204 123.041 140.465 124.434L66.3414 162.087C60.8575 164.871 51.9697 164.871 46.4857 162.087L11.211 144.167C8.46655 142.774 7.0992 140.947 7.0992 139.12V133.285Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.35"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
         <path
-          d="M7.92419 134.11C7.92419 132.283 9.29639 130.46 12.0359 129.068L86.1591 91.4148C91.643 88.6304 100.531 88.6304 106.015 91.4148L141.29 109.335C144.034 110.727 145.401 112.554 145.401 114.382C145.401 116.209 144.029 118.032 141.29 119.424L67.1664 157.077C61.6825 159.861 52.7947 159.861 47.3107 157.077L12.0359 139.157C9.29154 137.764 7.92419 135.937 7.92419 134.11Z"
+          d="M7.09919 133.285C7.09919 131.458 8.47139 129.635 11.2109 128.243L85.3341 90.5899C90.818 87.8054 99.7058 87.8054 105.19 90.5899L140.465 108.51C143.209 109.902 144.576 111.73 144.576 113.557C144.576 115.384 143.204 117.207 140.465 118.599L66.3414 156.252C60.8575 159.036 51.9697 159.036 46.4857 156.252L11.2109 138.332C8.46654 136.94 7.09919 135.112 7.09919 133.285Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.35"
           strokeLinecap="round"
           strokeLinejoin="round"
@@ -81,48 +87,48 @@ export function EpicVerticalStackIllustration({ className }: TIllustrationAssetP
       </g>
       <g opacity="0.6">
         <path
-          d="M7.92419 115.677C7.92419 117.505 9.29639 119.327 12.0359 120.724L47.3107 138.644C52.7947 141.429 61.6825 141.429 67.1664 138.644L141.29 100.991C144.029 99.599 145.401 97.7765 145.401 95.9492V101.784C145.401 103.611 144.029 105.434 141.29 106.826L67.1664 144.479C61.6825 147.264 52.7947 147.264 47.3107 144.479L12.0359 126.559C9.29155 125.167 7.92419 123.339 7.92419 121.512V115.677Z"
+          d="M7.0992 114.852C7.0992 116.68 8.4714 118.502 11.211 119.899L46.4857 137.819C51.9697 140.604 60.8575 140.604 66.3414 137.819L140.465 100.166C143.204 98.774 144.576 96.9516 144.576 95.1243V100.959C144.576 102.786 143.204 104.609 140.465 106.001L66.3414 143.654C60.8575 146.439 51.9697 146.439 46.4857 143.654L11.211 125.734C8.46655 124.342 7.0992 122.514 7.0992 120.687V114.852Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.35"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
         <path
-          d="M7.92419 115.677C7.92419 113.85 9.29639 112.028 12.0359 110.635L86.1591 72.9823C91.643 70.1978 100.531 70.1978 106.015 72.9823L141.29 90.9024C144.034 92.2946 145.401 94.1219 145.401 95.9492C145.401 97.7765 144.029 99.599 141.29 100.991L67.1664 138.644C61.6825 141.429 52.7947 141.429 47.3107 138.644L12.0359 120.724C9.29154 119.332 7.92419 117.505 7.92419 115.677Z"
+          d="M7.09919 114.852C7.09919 113.025 8.47139 111.203 11.2109 109.81L85.3341 72.1573C90.818 69.3729 99.7058 69.3729 105.19 72.1573L140.465 90.0775C143.209 91.4697 144.576 93.297 144.576 95.1243C144.576 96.9516 143.204 98.7741 140.465 100.166L66.3414 137.819C60.8575 140.604 51.9697 140.604 46.4857 137.819L11.2109 119.899C8.46654 118.507 7.09919 116.68 7.09919 114.852Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.35"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
       </g>
       <path
-        d="M7.92419 97.2399C7.92419 99.0672 9.29639 100.89 12.0359 102.287L47.3107 120.207C52.7947 122.991 61.6825 122.991 67.1664 120.207L141.29 82.5538C144.029 81.1616 145.401 79.3391 145.401 77.5118V83.3466C145.401 85.1739 144.029 86.9964 141.29 88.3886L67.1664 126.042C61.6825 128.826 52.7947 128.826 47.3107 126.042L12.0359 108.122C9.29154 106.729 7.92419 104.902 7.92419 103.075V97.2399Z"
+        d="M7.09919 96.415C7.09919 98.2423 8.47139 100.065 11.2109 101.462L46.4857 119.382C51.9697 122.166 60.8575 122.166 66.3414 119.382L140.465 81.7289C143.204 80.3367 144.576 78.5142 144.576 76.6869V82.5217C144.576 84.349 143.204 86.1715 140.465 87.5637L66.3414 125.217C60.8575 128.001 51.9697 128.001 46.4857 125.217L11.2109 107.297C8.46654 105.904 7.09919 104.077 7.09919 102.25V96.415Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.35"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
       <path
-        d="M7.92418 97.24C7.92418 95.4127 9.29638 93.5902 12.0359 92.198L86.1591 54.5449C91.643 51.7604 100.531 51.7604 106.015 54.5449L141.29 72.465C144.034 73.8573 145.401 75.6846 145.401 77.5119C145.401 79.3392 144.029 81.1616 141.29 82.5539L67.1664 120.207C61.6825 122.991 52.7947 122.991 47.3107 120.207L12.0359 102.287C9.29153 100.895 7.92418 99.0673 7.92418 97.24Z"
+        d="M7.09918 96.415C7.09918 94.5877 8.47138 92.7652 11.2109 91.373L85.3341 53.7199C90.818 50.9355 99.7058 50.9355 105.19 53.7199L140.465 71.6401C143.209 73.0323 144.576 74.8596 144.576 76.6869C144.576 78.5142 143.204 80.3367 140.465 81.7289L66.3414 119.382C60.8575 122.166 51.9697 122.166 46.4857 119.382L11.2109 101.462C8.46653 100.07 7.09918 98.2423 7.09918 96.415Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.35"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
       <path
-        d="M45.6234 106.575C45.2695 106.575 44.9397 106.497 44.6391 106.343L40.3189 104.148C39.4121 103.689 38.8933 102.62 38.8933 101.228V85.0918C38.8933 85.0241 38.9079 84.9516 38.937 84.8887L59.1418 41.1447C60.5867 38.5391 61.9395 36.997 63.4039 36.2525C64.0148 35.9431 64.6306 35.7836 65.2318 35.7836C65.8331 35.7836 66.4004 35.9334 66.9725 36.2235L71.2928 38.4182C71.6177 38.5826 71.9377 38.7904 72.2771 39.0611C72.3159 39.0901 72.345 39.124 72.3741 39.1627L86.4064 59.0648L92.2589 49.7253C93.4371 47.6031 95.0324 45.9498 96.7343 45.0845C97.5634 44.6639 98.3829 44.4512 99.1684 44.4512C99.7987 44.4512 100.385 44.5865 100.919 44.8621L105.239 47.0568C105.452 47.168 105.661 47.2985 105.855 47.4484L116.726 55.9758C116.842 56.0676 116.91 56.2078 116.91 56.3577V66.49C116.91 67.6164 116.575 68.8442 115.96 69.9464C115.344 71.0583 114.51 71.9236 113.613 72.378L46.9471 106.246C46.4962 106.473 46.0501 106.589 45.6186 106.589L45.6234 106.575Z"
+        d="M44.7984 105.75C44.4445 105.75 44.1147 105.672 43.8141 105.518L39.4939 103.323C38.5871 102.864 38.0683 101.795 38.0683 100.403V84.2668C38.0683 84.1991 38.0829 84.1266 38.112 84.0638L58.3168 40.3197C59.7617 37.7141 61.1145 36.172 62.5789 35.4275C63.1898 35.1182 63.8056 34.9586 64.4068 34.9586C65.0081 34.9586 65.5754 35.1085 66.1475 35.3985L70.4678 37.5933C70.7927 37.7576 71.1127 37.9655 71.4521 38.2362C71.4909 38.2652 71.52 38.299 71.5491 38.3377L85.5814 58.2398L91.4339 48.9003C92.6121 46.7781 94.2074 45.1248 95.9093 44.2595C96.7384 43.8389 97.5579 43.6262 98.3434 43.6262C98.9737 43.6262 99.5604 43.7616 100.094 44.0371L104.414 46.2319C104.627 46.343 104.836 46.4736 105.03 46.6234L115.901 55.1508C116.017 55.2427 116.085 55.3829 116.085 55.5327V65.6651C116.085 66.7914 115.75 68.0193 115.135 69.1215C114.519 70.2333 113.685 71.0986 112.788 71.553L46.1221 105.421C45.6712 105.648 45.2251 105.764 44.7936 105.764L44.7984 105.75Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
       />
       <path
-        d="M65.2318 36.2622C65.7749 36.2622 66.2792 36.4072 66.7543 36.6489L71.0746 38.8436C71.3898 39.0031 71.6904 39.2062 71.9813 39.4334L86.4307 59.9301L92.671 49.9718C93.8056 47.9269 95.3475 46.322 96.9525 45.505C97.7186 45.1183 98.4701 44.9249 99.1684 44.9249C99.7163 44.9249 100.235 45.0458 100.701 45.2827L105.021 47.4774C105.205 47.5741 105.384 47.6853 105.554 47.8206L116.425 56.348V66.4804C116.425 67.5197 116.11 68.675 115.538 69.7047C114.971 70.7247 114.2 71.5272 113.395 71.9381L46.7289 105.806C46.3362 106.004 45.9628 106.096 45.6186 106.096C45.3422 106.096 45.0852 106.033 44.8525 105.917L40.5322 103.723C39.8243 103.365 39.3733 102.48 39.3733 101.233V85.0966L59.5782 41.3525C60.7128 39.3077 62.0122 37.5046 63.6172 36.6876C64.1893 36.3975 64.7227 36.2719 65.227 36.2719M65.2318 35.2954C64.553 35.2954 63.8645 35.4694 63.1808 35.8174C61.1395 36.8568 59.6654 39.2013 58.7345 40.8739C58.7248 40.8933 58.7102 40.9174 58.7005 40.9368L38.4957 84.6809C38.4375 84.8066 38.4084 84.9467 38.4084 85.0869V101.223C38.4084 102.809 39.0242 104.032 40.0958 104.578L44.4161 106.773C44.7894 106.961 45.1919 107.058 45.6234 107.058C46.1325 107.058 46.6514 106.923 47.1702 106.662L113.836 72.7937C114.815 72.2958 115.722 71.3628 116.386 70.1688C117.036 68.9989 117.395 67.684 117.395 66.4755V56.3432C117.395 56.0483 117.259 55.7679 117.026 55.5842L106.155 47.0568C105.937 46.8876 105.705 46.7378 105.462 46.6121L101.142 44.4174C100.541 44.1128 99.8763 43.9533 99.1684 43.9533C98.3053 43.9533 97.4131 44.1853 96.5112 44.6397C94.7318 45.5437 93.0686 47.2598 91.8322 49.4739L86.3773 58.1753L72.7668 38.8678C72.7135 38.7904 72.6456 38.7228 72.5729 38.6648C72.2092 38.3795 71.8601 38.1523 71.5061 37.9735L67.1859 35.7788C66.541 35.45 65.8816 35.2857 65.2221 35.2857L65.2318 35.2954Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        d="M64.4068 35.4372C64.9499 35.4372 65.4542 35.5822 65.9293 35.824L70.2496 38.0187C70.5648 38.1782 70.8654 38.3812 71.1563 38.6084L85.6057 59.1052L91.846 49.1468C92.9806 47.102 94.5225 45.4971 96.1275 44.6801C96.8936 44.2934 97.6451 44.1 98.3434 44.1C98.8913 44.1 99.4101 44.2209 99.8756 44.4577L104.196 46.6524C104.38 46.7491 104.559 46.8603 104.729 46.9957L115.6 55.523V65.6554C115.6 66.6947 115.285 67.8501 114.713 68.8798C114.146 69.8998 113.375 70.7022 112.57 71.1131L45.9039 104.981C45.5112 105.179 45.1378 105.271 44.7936 105.271C44.5172 105.271 44.2602 105.208 44.0275 105.092L39.7072 102.898C38.9993 102.54 38.5484 101.655 38.5484 100.408V84.2717L58.7532 40.5276C59.8878 38.4827 61.1872 36.6796 62.7922 35.8626C63.3643 35.5726 63.8977 35.4469 64.402 35.4469M64.4068 34.4704C63.728 34.4704 63.0395 34.6444 62.3558 34.9925C60.3145 36.0318 58.8405 38.3764 57.9095 40.049C57.8998 40.0683 57.8852 40.0925 57.8755 40.1118L37.6707 83.8559C37.6125 83.9816 37.5834 84.1218 37.5834 84.262V100.398C37.5834 101.984 38.1992 103.207 39.2708 103.753L43.5911 105.948C43.9644 106.136 44.3669 106.233 44.7984 106.233C45.3075 106.233 45.8264 106.098 46.3452 105.837L113.011 71.9688C113.99 71.4709 114.897 70.5379 115.561 69.3438C116.211 68.174 116.57 66.8591 116.57 65.6506V55.5182C116.57 55.2233 116.434 54.943 116.201 54.7593L105.33 46.2319C105.112 46.0627 104.88 45.9128 104.637 45.7871L100.317 43.5924C99.7156 43.2879 99.0513 43.1284 98.3434 43.1284C97.4803 43.1284 96.5881 43.3604 95.6862 43.8148C93.9068 44.7188 92.2436 46.4349 91.0072 48.6489L85.5523 57.3504L71.9418 38.0428C71.8885 37.9655 71.8206 37.8978 71.7479 37.8398C71.3842 37.5546 71.0351 37.3274 70.6811 37.1485L66.3609 34.9538C65.716 34.6251 65.0566 34.4607 64.3971 34.4607L64.4068 34.4704Z"
+        fill="var(--illustration-stroke-tertiary)"
       />
       <path
-        d="M105.026 47.4774C103.964 46.936 102.645 47.0085 101.278 47.7046C99.6726 48.5215 98.1307 50.1265 96.9961 52.1713L89.4514 64.2083L85.1311 62.0136L92.6758 49.9766C93.8104 47.9318 95.3523 46.3269 96.9573 45.5099C98.3246 44.8186 99.6435 44.7461 100.705 45.2827L105.026 47.4774Z"
+        d="M104.201 46.6524C103.139 46.111 101.82 46.1835 100.453 46.8796C98.8476 47.6966 97.3057 49.3016 96.1711 51.3464L88.6264 63.3834L84.3062 61.1887L91.8508 49.1517C92.9854 47.1068 94.5273 45.5019 96.1323 44.6849C97.4996 43.9937 98.8185 43.9212 99.8804 44.4578L104.201 46.6524Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
         stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
         strokeWidth="0.35"
@@ -130,7 +136,7 @@ export function EpicVerticalStackIllustration({ className }: TIllustrationAssetP
         strokeLinejoin="round"
       />
       <path
-        d="M71.0746 38.8485C70.163 38.3844 69.1351 38.2732 67.9423 38.8775C66.3325 39.6944 65.0379 41.4975 63.9033 43.5424L43.6984 87.2865L39.3782 85.0918L59.583 41.3477C60.7176 39.3029 62.0171 37.4997 63.622 36.6827C64.8148 36.0785 65.8379 36.1897 66.7543 36.6537L71.0746 38.8485Z"
+        d="M70.2496 38.0235C69.338 37.5594 68.3101 37.4482 67.1173 38.0525C65.5075 38.8695 64.2129 40.6726 63.0783 42.7174L42.8735 86.4615L38.5532 84.2668L58.758 40.5227C59.8926 38.4779 61.1921 36.6748 62.797 35.8578C63.9898 35.2535 65.0129 35.3647 65.9293 35.8288L70.2496 38.0235Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
         stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
         strokeWidth="0.35"
@@ -138,7 +144,7 @@ export function EpicVerticalStackIllustration({ className }: TIllustrationAssetP
         strokeLinejoin="round"
       />
       <path
-        d="M43.6984 87.2865V103.423C43.6984 104.67 44.1542 105.555 44.8573 105.912L40.537 103.718C39.8291 103.36 39.3782 102.475 39.3782 101.228V85.0918L43.6984 87.2865Z"
+        d="M42.8734 86.4615V102.598C42.8734 103.845 43.3292 104.73 44.0323 105.087L39.712 102.893C39.0041 102.535 38.5532 101.65 38.5532 100.403V84.2668L42.8734 86.4615Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
         stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
         strokeWidth="0.35"
@@ -146,7 +152,7 @@ export function EpicVerticalStackIllustration({ className }: TIllustrationAssetP
         strokeLinejoin="round"
       />
       <path
-        d="M105.026 47.4774C105.21 47.5741 105.389 47.6853 105.559 47.8206L116.43 56.348V66.4804C116.43 67.5197 116.115 68.6751 115.543 69.7047C114.975 70.7247 114.204 71.5272 113.399 71.9381L46.7337 105.806C46.0258 106.164 45.3761 106.183 44.8621 105.922C44.1542 105.564 43.7033 104.68 43.7033 103.432V87.2962L63.9081 43.5521C65.0427 41.5072 66.3422 39.7041 67.9471 38.8871C69.1399 38.2829 70.163 38.394 71.0794 38.8581C71.3946 39.0176 71.6952 39.2207 71.9861 39.4479L89.4514 64.2228L96.9961 52.1858C98.1307 50.141 99.6726 48.5361 101.278 47.7191C102.645 47.0278 103.964 46.9553 105.026 47.4919V47.4774Z"
+        d="M104.201 46.6524C104.385 46.7491 104.564 46.8603 104.734 46.9957L115.605 55.5231V65.6554C115.605 66.6948 115.29 67.8501 114.718 68.8798C114.15 69.8998 113.379 70.7022 112.574 71.1131L45.9087 104.981C45.2008 105.339 44.5511 105.358 44.0371 105.097C43.3292 104.739 42.8783 103.855 42.8783 102.608V86.4712L63.0831 42.7271C64.2177 40.6823 65.5172 38.8791 67.1221 38.0622C68.3149 37.4579 69.338 37.5691 70.2544 38.0332C70.5696 38.1927 70.8702 38.3957 71.1611 38.623L88.6264 63.3979L96.1711 51.3609C97.3057 49.316 98.8476 47.7111 100.453 46.8941C101.82 46.2029 103.139 46.1303 104.201 46.6669V46.6524Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
         stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
         strokeWidth="0.35"
@@ -156,9 +162,9 @@ export function EpicVerticalStackIllustration({ className }: TIllustrationAssetP
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M5.34449 57.5372C4.01108 56.8604 3.16255 55.2603 3.16255 52.9834C3.16255 48.9083 5.88756 44.2191 9.24291 42.5175L31.7412 31.0896C33.2249 30.3355 34.5826 30.2872 35.6396 30.8238L33.4771 29.7264C32.42 29.1898 31.0624 29.2382 29.5786 29.9923L7.08035 41.4202C3.72016 43.1266 1 47.8157 1 51.8861C1 54.163 1.84853 55.7631 3.18195 56.4398L5.34449 57.5372Z"
+        d="M4.5195 56.7122C3.18608 56.0355 2.33755 54.4354 2.33755 52.1585C2.33755 48.0833 5.06256 43.3942 8.41791 41.6926L30.9162 30.2647C32.3999 29.5106 33.7576 29.4622 34.8146 29.9988L32.6521 28.9015C31.595 28.3649 30.2374 28.4132 28.7536 29.1674L6.25536 40.5952C2.89516 42.3017 0.175003 46.9908 0.175003 51.0611C0.175003 53.338 1.02354 54.9381 2.35695 55.6149L4.5195 56.7122Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.35"
         strokeLinecap="round"
         strokeLinejoin="round"
@@ -166,41 +172,41 @@ export function EpicVerticalStackIllustration({ className }: TIllustrationAssetP
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M5.34449 57.5372C6.40152 58.0738 7.75918 58.0254 9.2429 57.2713L31.7412 45.8434C35.1014 44.137 37.8215 39.4479 37.8215 35.3775C37.8215 33.1006 36.973 31.5005 35.6396 30.8238C34.5826 30.2872 33.2249 30.3355 31.7412 31.0896L9.2429 42.5175C5.88271 44.224 3.16254 48.9131 3.16254 52.9834C3.16254 55.2603 4.01108 56.8604 5.34449 57.5372Z"
+        d="M4.51949 56.7122C5.57652 57.2488 6.93418 57.2005 8.41791 56.4464L30.9162 45.0185C34.2764 43.312 36.9966 38.6229 36.9966 34.5526C36.9966 32.2757 36.148 30.6756 34.8146 29.9988C33.7576 29.4622 32.3999 29.5106 30.9162 30.2647L8.41791 41.6926C5.05771 43.399 2.33755 48.0882 2.33755 52.1585C2.33755 54.4354 3.18608 56.0355 4.51949 56.7122Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.35"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
       <path
-        d="M12.317 46.9069C12.3995 46.7812 12.5207 46.7281 12.5983 46.7812C12.6758 46.8344 12.6807 46.9794 12.6128 47.1148L12.5983 47.1438L9.6599 52.2051C9.57748 52.3453 9.44656 52.413 9.36413 52.355C9.2817 52.297 9.2817 52.1375 9.36413 51.9924L12.3025 46.9311L12.317 46.9069Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M11.492 46.082C11.5745 45.9563 11.6957 45.9031 11.7733 45.9563C11.8508 46.0095 11.8557 46.1545 11.7878 46.2899L11.7733 46.3189L8.83491 51.3802C8.75248 51.5204 8.62156 51.588 8.53913 51.53C8.4567 51.472 8.4567 51.3125 8.53913 51.1675L11.4775 46.1062L11.492 46.082Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
-        d="M10.1399 48.5941C10.1399 48.3814 9.99932 48.2847 9.82476 48.3717C9.6502 48.4587 9.50959 48.7004 9.50959 48.9131C9.50959 49.1258 9.6502 49.2225 9.82476 49.1355C9.99932 49.0485 10.1399 48.8068 10.1399 48.5941ZM10.5618 48.3765C10.5618 48.8696 10.2321 49.4352 9.82476 49.6431C9.41746 49.8509 9.08775 49.6189 9.08775 49.1258C9.08775 48.6327 9.41746 48.0671 9.82476 47.8593C10.2321 47.6514 10.5618 47.8834 10.5618 48.3765Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M9.31494 47.7691C9.31494 47.5564 9.17432 47.4597 8.99976 47.5467C8.82521 47.6337 8.6846 47.8754 8.6846 48.0881C8.6846 48.3008 8.82521 48.3975 8.99976 48.3105C9.17432 48.2235 9.31494 47.9818 9.31494 47.7691ZM9.73678 47.5515C9.73678 48.0446 9.40706 48.6102 8.99976 48.8181C8.59247 49.0259 8.26275 48.7939 8.26275 48.3008C8.26275 47.8077 8.59247 47.2422 8.99976 47.0343C9.40706 46.8264 9.73678 47.0585 9.73678 47.5515Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
-        d="M12.4528 50.2232C12.4528 50.0105 12.3122 49.9138 12.1376 50.0008C11.9631 50.0878 11.8225 50.3295 11.8225 50.5422C11.8225 50.7549 11.9631 50.8516 12.1376 50.7646C12.3122 50.6776 12.4528 50.4359 12.4528 50.2232ZM12.8698 50.0056C12.8698 50.4987 12.5401 51.0643 12.1328 51.2722C11.7255 51.48 11.3958 51.248 11.3958 50.7549C11.3958 50.2618 11.7255 49.6963 12.1328 49.4884C12.5401 49.2805 12.8698 49.5126 12.8698 50.0056Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M11.6278 49.3982C11.6278 49.1855 11.4872 49.0888 11.3126 49.1759C11.1381 49.2629 10.9975 49.5046 10.9975 49.7173C10.9975 49.93 11.1381 50.0267 11.3126 49.9397C11.4872 49.8526 11.6278 49.6109 11.6278 49.3982ZM12.0448 49.1807C12.0448 49.6738 11.7151 50.2394 11.3078 50.4472C10.9005 50.6551 10.5708 50.4231 10.5708 49.93C10.5708 49.4369 10.9005 48.8713 11.3078 48.6634C11.7151 48.4556 12.0448 48.6876 12.0448 49.1807Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
-        d="M10.9109 45.0554C10.9109 44.9201 11.003 44.7654 11.1145 44.7122C11.7691 44.4222 12.4043 44.3255 12.9716 44.4463C13.5971 44.5769 14.1062 44.9588 14.4602 45.5485C14.8093 46.1383 14.9839 46.9214 14.9645 47.8061C14.9451 48.6955 14.7269 49.6575 14.3438 50.5954C13.9559 51.5332 13.4129 52.413 12.7728 53.1429C12.1279 53.8729 11.4103 54.424 10.6878 54.7382C9.96538 55.0524 9.26716 55.1249 8.66591 54.9412C8.12285 54.7721 7.67191 54.4047 7.36159 53.8632C7.30825 53.7714 7.35189 53.6022 7.45372 53.491C7.55554 53.3798 7.67676 53.3702 7.7301 53.462C8.01133 53.9406 8.40893 54.2645 8.8938 54.4143C9.43686 54.5787 10.0624 54.5158 10.7121 54.2306C11.3618 53.9454 12.0116 53.4523 12.5886 52.7949C13.1656 52.1375 13.6553 51.3495 14.0044 50.5035C14.3535 49.6575 14.5426 48.7922 14.562 47.9898C14.5814 47.1921 14.4262 46.4863 14.1111 45.9546C13.7959 45.4228 13.3353 45.0796 12.7728 44.9636C12.2685 44.8572 11.7061 44.9394 11.1242 45.1956C11.0127 45.244 10.9206 45.1811 10.9206 45.0458L10.9109 45.0554Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M10.0859 44.2305C10.0859 44.0951 10.178 43.9404 10.2895 43.8873C10.9441 43.5972 11.5793 43.5005 12.1466 43.6214C12.7721 43.7519 13.2812 44.1338 13.6352 44.7236C13.9843 45.3133 14.1589 46.0965 14.1395 46.9811C14.1201 47.8706 13.9019 48.8326 13.5188 49.7704C13.1309 50.7082 12.5879 51.588 11.9478 52.318C11.3029 53.0479 10.5853 53.5991 9.86285 53.9133C9.14038 54.2275 8.44216 54.3 7.84091 54.1163C7.29785 53.9471 6.84691 53.5797 6.53659 53.0383C6.48326 52.9464 6.5269 52.7772 6.62872 52.6661C6.73054 52.5549 6.85177 52.5452 6.9051 52.6371C7.18633 53.1156 7.58393 53.4395 8.06881 53.5894C8.61187 53.7537 9.23736 53.6909 9.88709 53.4057C10.5368 53.1205 11.1866 52.6274 11.7636 51.9699C12.3406 51.3125 12.8303 50.5245 13.1794 49.6786C13.5285 48.8326 13.7176 47.9673 13.737 47.1648C13.7564 46.3672 13.6012 45.6614 13.2861 45.1296C12.9709 44.5979 12.5103 44.2547 11.9478 44.1386C11.4435 44.0323 10.8811 44.1145 10.2992 44.3707C10.1877 44.419 10.0956 44.3562 10.0956 44.2208L10.0859 44.2305Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M28.895 42.4547L20.6618 46.6363C19.9829 46.9795 19.435 46.5927 19.435 45.7709C19.435 44.9491 19.9829 44.0065 20.6618 43.6632L28.895 39.4817C29.5738 39.1385 30.1217 39.5252 30.1217 40.347C30.1217 41.1688 29.5738 42.1115 28.895 42.4547Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M28.07 41.6298L19.8368 45.8113C19.1579 46.1545 18.61 45.7678 18.61 44.946C18.61 44.1242 19.1579 43.1815 19.8368 42.8383L28.07 38.6568C28.7488 38.3136 29.2967 38.7003 29.2967 39.5221C29.2967 40.3439 28.7488 41.2865 28.07 41.6298Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M148.854 47.9076C149.911 47.371 151.269 47.4145 152.757 48.1735C156.117 49.88 158.837 54.569 158.837 58.6394C158.837 60.9114 157.989 62.5164 156.655 63.1932L158.818 62.0958C160.151 61.419 161 59.8141 161 57.5421C161 53.4669 158.275 48.7778 154.92 47.0761C153.436 46.322 152.073 46.2737 151.016 46.8103L148.854 47.9076Z"
+        d="M148.029 47.0827C149.086 46.5461 150.444 46.5896 151.932 47.3486C155.292 49.055 158.012 53.7441 158.012 57.8144C158.012 60.0865 157.164 61.6914 155.83 62.3682L157.993 61.2709C159.326 60.5941 160.175 58.9892 160.175 56.7171C160.175 52.6419 157.45 47.9528 154.095 46.2512C152.611 45.4971 151.248 45.4487 150.191 45.9853L148.029 47.0827Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.35"
         strokeLinecap="round"
         strokeLinejoin="round"
@@ -208,9 +214,9 @@ export function EpicVerticalStackIllustration({ className }: TIllustrationAssetP
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M148.854 47.9076C147.52 48.5844 146.672 50.1893 146.672 52.4614C146.672 56.5365 149.397 61.2257 152.752 62.9273C154.236 63.6814 155.598 63.7297 156.655 63.1932C157.989 62.5164 158.837 60.9114 158.837 58.6394C158.837 54.5642 156.112 49.8751 152.757 48.1735C151.273 47.4194 149.911 47.371 148.854 47.9076Z"
+        d="M148.029 47.0827C146.695 47.7595 145.847 49.3644 145.847 51.6365C145.847 55.7116 148.572 60.4007 151.927 62.1024C153.411 62.8565 154.773 62.9048 155.83 62.3682C157.164 61.6915 158.012 60.0865 158.012 57.8145C158.012 53.7393 155.287 49.0502 151.932 47.3486C150.448 46.5945 149.086 46.5461 148.029 47.0827Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.35"
         strokeLinecap="round"
         strokeLinejoin="round"
@@ -218,8 +224,8 @@ export function EpicVerticalStackIllustration({ className }: TIllustrationAssetP
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M152.151 51.6299C152.296 51.7024 152.418 51.9103 152.418 52.0892V52.4131L154.013 53.2252V52.9013C154.013 52.7224 154.134 52.6403 154.28 52.7128C154.425 52.7853 154.546 52.9931 154.546 53.172V53.4959L155.08 53.7666C155.293 53.873 155.497 54.0808 155.642 54.3371C155.792 54.5933 155.875 54.8833 155.875 55.1395V56.4302V57.7209C155.875 57.8998 155.754 57.982 155.608 57.9095C155.463 57.837 155.341 57.6291 155.341 57.4502V56.4834L151.084 54.3177V57.223C151.084 57.31 151.113 57.4067 151.162 57.4889C151.21 57.5759 151.278 57.6436 151.351 57.6774L153.48 58.7603C153.625 58.8328 153.746 59.0407 153.746 59.2195C153.746 59.3984 153.625 59.4806 153.48 59.4081L151.351 58.3252C151.138 58.2189 150.934 58.011 150.788 57.7548C150.638 57.4986 150.556 57.2085 150.556 56.9523V52.4324C150.556 52.1762 150.638 51.9732 150.788 51.8668C150.939 51.7605 151.142 51.7605 151.351 51.8668L151.884 52.1375V51.8136C151.884 51.6348 152.006 51.5526 152.151 51.6251V51.6299ZM155.346 54.864V55.8308L151.089 53.6651V52.6983C151.089 52.6113 151.118 52.5436 151.167 52.5097C151.215 52.4759 151.283 52.4759 151.356 52.5097L151.889 52.7804V53.1044C151.889 53.2832 152.01 53.4862 152.156 53.5636C152.301 53.6409 152.423 53.5539 152.423 53.3751V53.0512L154.018 53.8633V54.1872C154.018 54.3661 154.139 54.5691 154.284 54.6464C154.43 54.7238 154.551 54.6368 154.551 54.4579V54.134L155.084 54.4047C155.157 54.4386 155.225 54.5111 155.274 54.5932C155.322 54.6803 155.351 54.777 155.351 54.8591L155.346 54.864ZM156.064 59.3355C156.166 59.263 156.166 59.06 156.064 58.8811C155.962 58.7023 155.792 58.6153 155.686 58.6878L154.808 59.3065L154.464 58.7119C154.362 58.5331 154.192 58.4461 154.086 58.5186C153.984 58.5911 153.984 58.7941 154.086 58.973L154.619 59.8915C154.721 60.0703 154.891 60.1574 154.997 60.0848L156.064 59.3355Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M151.326 50.805C151.471 50.8775 151.593 51.0854 151.593 51.2642V51.5881L153.188 52.4003V52.0764C153.188 51.8975 153.309 51.8153 153.455 51.8878C153.6 51.9604 153.721 52.1682 153.721 52.3471V52.671L154.255 52.9417C154.468 53.048 154.672 53.2559 154.817 53.5121C154.967 53.7683 155.05 54.0583 155.05 54.3146V55.6053V56.896C155.05 57.0749 154.929 57.157 154.783 57.0845C154.638 57.012 154.516 56.8042 154.516 56.6253V55.6585L150.259 53.4928V56.3981C150.259 56.4851 150.288 56.5818 150.337 56.664C150.385 56.751 150.453 56.8186 150.526 56.8525L152.655 57.9353C152.8 58.0078 152.921 58.2157 152.921 58.3946C152.921 58.5734 152.8 58.6556 152.655 58.5831L150.526 57.5003C150.313 57.3939 150.109 57.186 149.963 56.9298C149.813 56.6736 149.731 56.3836 149.731 56.1274V51.6075C149.731 51.3512 149.813 51.1482 149.963 51.0419C150.114 50.9355 150.317 50.9355 150.526 51.0419L151.059 51.3126V50.9887C151.059 50.8098 151.181 50.7276 151.326 50.8002V50.805ZM154.521 54.039V55.0058L150.264 52.8402V51.8733C150.264 51.7863 150.293 51.7186 150.342 51.6848C150.39 51.6509 150.458 51.6509 150.531 51.6848L151.064 51.9555V52.2794C151.064 52.4583 151.185 52.6613 151.331 52.7386C151.476 52.816 151.598 52.729 151.598 52.5501V52.2262L153.193 53.0384V53.3622C153.193 53.5411 153.314 53.7441 153.459 53.8215C153.605 53.8988 153.726 53.8118 153.726 53.633V53.3091L154.259 53.5798C154.332 53.6136 154.4 53.6861 154.449 53.7683C154.497 53.8553 154.526 53.952 154.526 54.0342L154.521 54.039ZM155.239 58.5106C155.341 58.4381 155.341 58.235 155.239 58.0562C155.137 57.8773 154.967 57.7903 154.861 57.8628L153.983 58.4816L153.639 57.887C153.537 57.7081 153.367 57.6211 153.261 57.6936C153.159 57.7661 153.159 57.9692 153.261 58.148L153.794 59.0665C153.896 59.2454 154.066 59.3324 154.172 59.2599L155.239 58.5106Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
     </svg>
   );
diff --git a/packages/propel/src/empty-state/assets/vertical-stack/index.ts b/packages/propel/src/empty-state/assets/vertical-stack/index.ts
index 2a9372167..71ba35553 100644
--- a/packages/propel/src/empty-state/assets/vertical-stack/index.ts
+++ b/packages/propel/src/empty-state/assets/vertical-stack/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./404-error";
 export * from "./archived-cycle";
 export * from "./archived-module";
diff --git a/packages/propel/src/empty-state/assets/vertical-stack/initiative.tsx b/packages/propel/src/empty-state/assets/vertical-stack/initiative.tsx
index 431998d20..4eac0c4ca 100644
--- a/packages/propel/src/empty-state/assets/vertical-stack/initiative.tsx
+++ b/packages/propel/src/empty-state/assets/vertical-stack/initiative.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper";
 import type { TIllustrationAssetProps } from "../helper";
 
@@ -13,17 +19,17 @@ export function InitiativeVerticalStackIllustration({ className }: TIllustration
     >
       <g opacity="0.2">
         <path
-          d="M11.214 138.932C11.214 140.799 12.6117 142.661 15.4023 144.088L51.3337 162.397C56.9198 165.242 65.973 165.242 71.5591 162.397L147.062 123.927C149.853 122.504 151.25 120.642 151.25 118.775V124.737C151.25 126.604 149.853 128.466 147.062 129.888L71.5591 168.358C65.973 171.203 56.9198 171.203 51.3337 168.358L15.4023 150.049C12.6068 148.627 11.214 146.76 11.214 144.893V138.932Z"
+          d="M10.414 138.624C10.414 140.491 11.8117 142.353 14.6023 143.78L50.5337 162.089C56.1198 164.934 65.173 164.934 70.7591 162.089L146.262 123.619C149.053 122.197 150.45 120.335 150.45 118.468V124.429C150.45 126.296 149.053 128.158 146.262 129.581L70.7591 168.051C65.173 170.896 56.1198 170.896 50.5337 168.051L14.6023 149.742C11.8068 148.319 10.414 146.452 10.414 144.585V138.624Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.4"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
         <path
-          d="M11.214 138.931C11.214 137.064 12.6117 135.202 15.4023 133.78L90.9053 95.3094C96.4913 92.4646 105.545 92.4646 111.131 95.3094L147.062 113.618C149.858 115.041 151.25 116.908 151.25 118.775C151.25 120.642 149.853 122.504 147.062 123.926L71.5591 162.396C65.973 165.241 56.9198 165.241 51.3337 162.396L15.4023 144.087C12.6068 142.665 11.214 140.798 11.214 138.931Z"
+          d="M10.414 138.623C10.414 136.756 11.8117 134.894 14.6023 133.472L90.1053 95.0018C95.6913 92.1569 104.745 92.1569 110.331 95.0018L146.262 113.311C149.058 114.733 150.45 116.6 150.45 118.467C150.45 120.334 149.053 122.196 146.262 123.619L70.7591 162.089C65.173 164.934 56.1198 164.934 50.5337 162.089L14.6023 143.78C11.8068 142.357 10.414 140.49 10.414 138.623Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.4"
           strokeLinecap="round"
           strokeLinejoin="round"
@@ -31,34 +37,34 @@ export function InitiativeVerticalStackIllustration({ className }: TIllustration
       </g>
       <g opacity="0.6">
         <path
-          d="M11.214 120.094C11.214 121.961 12.6117 123.823 15.4023 125.25L51.3337 143.559C56.9198 146.404 65.973 146.404 71.5591 143.559L147.062 105.089C149.853 103.666 151.25 101.804 151.25 99.9375V105.899C151.25 107.766 149.853 109.628 147.062 111.05L71.5591 149.52C65.973 152.365 56.9198 152.365 51.3337 149.52L15.4023 131.211C12.6068 129.789 11.214 127.922 11.214 126.055V120.094Z"
+          d="M10.414 119.786C10.414 121.653 11.8117 123.515 14.6023 124.942L50.5337 143.251C56.1198 146.096 65.173 146.096 70.7591 143.251L146.262 104.781C149.053 103.359 150.45 101.497 150.45 99.6299V105.591C150.45 107.458 149.053 109.32 146.262 110.743L70.7591 149.213C65.173 152.058 56.1198 152.058 50.5337 149.213L14.6023 130.904C11.8068 129.481 10.414 127.614 10.414 125.747V119.786Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.4"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
         <path
-          d="M11.2139 120.094C11.2139 118.227 12.6117 116.365 15.4022 114.943L90.9052 76.4725C96.4913 73.6276 105.545 73.6276 111.131 76.4725L147.062 94.7815C149.858 96.204 151.25 98.0709 151.25 99.9379C151.25 101.805 149.853 103.667 147.062 105.089L71.559 143.559C65.973 146.404 56.9197 146.404 51.3337 143.559L15.4022 125.25C12.6067 123.828 11.2139 121.961 11.2139 120.094Z"
+          d="M10.4139 119.786C10.4139 117.92 11.8117 116.057 14.6022 114.635L90.1053 76.1649C95.6913 73.32 104.745 73.32 110.331 76.1649L146.262 94.4739C149.058 95.8963 150.45 97.7633 150.45 99.6303C150.45 101.497 149.053 103.359 146.262 104.782L70.7591 143.252C65.173 146.097 56.1198 146.097 50.5337 143.252L14.6022 124.943C11.8067 123.52 10.4139 121.653 10.4139 119.786Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.4"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
       </g>
       <path
-        d="M11.214 101.262C11.214 103.129 12.6117 104.991 15.4023 106.418L51.3337 124.727C56.9198 127.572 65.973 127.572 71.5591 124.727L147.062 86.2569C149.853 84.8344 151.25 82.9724 151.25 81.1055V87.0669C151.25 88.9338 149.853 90.7959 147.062 92.2183L71.5591 130.688C65.973 133.533 56.9198 133.533 51.3337 130.688L15.4023 112.379C12.6068 110.957 11.214 109.09 11.214 107.223V101.262Z"
+        d="M10.414 100.954C10.414 102.821 11.8117 104.683 14.6023 106.11L50.5337 124.419C56.1198 127.264 65.173 127.264 70.7591 124.419L146.262 85.9493C149.053 84.5268 150.45 82.6648 150.45 80.7979V86.7593C150.45 88.6262 149.053 90.4882 146.262 91.9107L70.7591 130.381C65.173 133.226 56.1198 133.226 50.5337 130.381L14.6023 112.072C11.8068 110.649 10.414 108.782 10.414 106.915V100.954Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.4"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
       <path
-        d="M11.214 101.262C11.214 99.3951 12.6117 97.5331 15.4023 96.1106L90.9053 57.6405C96.4913 54.7956 105.545 54.7956 111.131 57.6405L147.062 75.9495C149.858 77.3719 151.25 79.2389 151.25 81.1058C151.25 82.9728 149.853 84.8348 147.062 86.2573L71.5591 124.727C65.973 127.572 56.9198 127.572 51.3337 124.727L15.4023 106.418C12.6068 104.996 11.214 103.129 11.214 101.262Z"
+        d="M10.414 100.954C10.414 99.0875 11.8117 97.2255 14.6023 95.803L90.1053 57.3329C95.6913 54.488 104.745 54.488 110.331 57.3329L146.262 75.6419C149.058 77.0643 150.45 78.9313 150.45 80.7982C150.45 82.6652 149.053 84.5272 146.262 85.9496L70.7591 124.42C65.173 127.265 56.1198 127.265 50.5337 124.42L14.6023 106.111C11.8068 104.688 10.414 102.821 10.414 100.954Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.4"
         strokeLinecap="round"
         strokeLinejoin="round"
@@ -66,8 +72,42 @@ export function InitiativeVerticalStackIllustration({ className }: TIllustration
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M148.628 49.0214C149.704 48.4732 151.087 48.5176 152.604 49.293C156.026 51.0365 158.797 55.8274 158.797 59.986C158.797 62.3074 157.933 63.9472 156.575 64.6386L158.777 63.5175C160.136 62.826 161 61.1862 161 58.8649C161 54.7013 158.224 49.9104 154.806 48.1719C153.295 47.4014 151.907 47.352 150.83 47.9002L148.628 49.0214Z"
+        d="M147.828 48.7138C148.904 48.1655 150.287 48.21 151.804 48.9854C155.226 50.7289 157.997 55.5198 157.997 59.6784C157.997 61.9998 157.133 63.6395 155.775 64.331L157.977 63.2098C159.336 62.5184 160.2 60.8786 160.2 58.5573C160.2 54.3937 157.424 49.6028 154.006 47.8643C152.495 47.0938 151.107 47.0444 150.031 47.5926L147.828 48.7138Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M147.828 48.7137C146.469 49.4052 145.605 51.0449 145.605 53.3663C145.605 57.5299 148.381 62.3207 151.799 64.0593C153.31 64.8298 154.698 64.8792 155.775 64.3309C157.133 63.6395 157.997 61.9997 157.997 59.6784C157.997 55.5148 155.221 50.7239 151.804 48.9854C150.292 48.2149 148.904 48.1655 147.828 48.7137Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M153.508 54.7235C153.335 54.4272 153.103 54.1901 152.856 54.0666C152.614 53.9431 152.377 53.9431 152.204 54.0666L149.581 55.9187C149.295 56.1212 149.132 56.5114 149.132 57.0053C149.132 57.4992 149.295 58.0524 149.581 58.5513C149.868 59.0452 150.258 59.4403 150.663 59.6477C151.068 59.8552 151.458 59.8552 151.744 59.6527L154.555 57.6672C154.673 57.5832 154.866 57.682 154.989 57.8894C155.108 58.0969 155.108 58.329 154.989 58.4179L152.179 60.4034C151.779 60.6899 151.231 60.6849 150.663 60.3935C150.095 60.1021 149.551 59.5539 149.146 58.8575C148.746 58.166 148.519 57.3856 148.519 56.6942C148.519 56.0027 148.746 55.4545 149.146 55.173L151.764 53.3208C152.051 53.1183 152.441 53.1183 152.846 53.3208C153.251 53.5283 153.641 53.9234 153.927 54.4173C154.214 54.9112 154.377 55.4693 154.377 55.9632C154.377 56.4571 154.214 56.8473 153.927 57.0547L151.3 58.9069C151.127 59.0303 150.895 59.0254 150.653 58.9069C150.411 58.7883 150.174 58.5463 150.006 58.25C149.838 57.9536 149.739 57.6178 149.739 57.3214C149.739 57.0251 149.838 56.793 150.006 56.6695L152.604 54.8371C152.722 54.7531 152.915 54.8519 153.038 55.0594C153.157 55.2668 153.157 55.4989 153.038 55.5829L150.44 57.4153C150.381 57.4548 150.352 57.5338 150.352 57.6326C150.352 57.7314 150.386 57.84 150.44 57.9438C150.5 58.0425 150.574 58.1216 150.658 58.1611C150.742 58.2006 150.816 58.2006 150.875 58.1611L153.503 56.3089C153.676 56.1855 153.769 55.9533 153.769 55.657C153.769 55.3606 153.671 55.0248 153.498 54.7284L153.508 54.7235Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M78.0145 95.1603C77.9256 95.1603 77.8416 95.1553 77.7576 95.1405C77.6095 95.1208 77.4514 95.0714 77.2934 95.0022L72.8828 92.755C72.7495 92.6858 72.6309 92.5969 72.5124 92.4883C72.2704 92.2364 72.1123 91.9499 72.0234 91.619C71.9345 91.3078 71.9049 90.9572 71.9345 90.5769C71.9691 90.1916 72.0531 89.8163 72.1913 89.4458C72.3346 89.0655 72.5124 88.7099 72.7297 88.3889C72.9371 88.0728 73.189 87.7863 73.4706 87.5344L70.9516 86.2503C70.764 86.1614 70.5862 86.0132 70.433 85.8156C70.0577 85.3464 69.9145 84.6402 70.0281 83.8351C70.0774 83.4745 70.1812 83.0992 70.3441 82.7139C70.4923 82.3534 70.6948 82.0076 70.9368 81.6817C71.164 81.3656 71.4357 81.089 71.732 80.8667C72.0234 80.6395 72.3346 80.4765 72.6507 80.3926C72.8532 80.3333 73.0606 80.274 73.273 80.2098L70.9467 79.0245C70.8282 78.9701 70.7047 78.8812 70.5763 78.7627C70.2059 78.3972 70.0034 77.8687 69.9836 77.2217C69.9688 76.634 69.8404 76.1104 69.6082 75.6511C69.2773 75.5177 68.981 75.3844 68.7093 75.2461L64.3086 73.0038C61.5823 71.6159 59.419 69.1365 58.0608 65.8372C56.2481 61.4069 55.9222 55.5591 57.1471 49.3705C58.3769 43.1967 61.1082 36.8303 64.847 31.4418C68.5908 26.0336 73.2631 21.7317 78.0046 19.3214C80.9186 17.8348 83.7635 17.0791 86.4652 17.0791C88.2185 17.0791 89.878 17.4051 91.3943 18.0472C91.6462 18.1558 91.8981 18.2743 92.1401 18.3978L96.5408 20.6401C100.047 22.4281 102.522 25.8755 103.697 30.6022C104.927 35.5412 104.616 41.7002 102.808 47.9431C101.006 54.1663 97.7706 60.3154 93.691 65.2643C91.9771 67.3486 90.9251 69.7045 90.8757 71.5616C90.8609 72.1592 90.6831 72.8161 90.3818 73.4088C90.0855 74.0113 89.6755 74.5299 89.1964 74.9102C88.8458 75.1868 88.4704 75.4733 88.0456 75.7894L89.962 76.7673C90.1694 76.876 90.3522 77.0242 90.5003 77.2168C90.6979 77.4835 90.8263 77.7946 90.8905 78.1552C90.9449 78.5157 90.9449 78.8812 90.8806 79.2615C90.8214 79.632 90.7028 80.0172 90.53 80.3975C90.362 80.7729 90.1546 81.1236 89.9077 81.4347C89.6459 81.7607 89.3644 82.0274 89.0779 82.225C88.1148 82.9411 87.0924 83.6375 86.0305 84.2994L87.9567 85.2822C88.5 85.5539 88.8507 86.1416 88.9199 86.8973C88.9841 87.5789 88.8161 88.3642 88.4506 89.105C88.0802 89.8459 87.5517 90.4534 86.964 90.8288C84.2376 92.5673 81.4668 93.9799 78.7207 95.0269C78.4837 95.1208 78.2417 95.1652 78.0046 95.1652L78.0145 95.1603Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+      />
+      <path
+        d="M86.4701 17.5631C88.1494 17.5631 89.7447 17.8693 91.2066 18.4917C91.4487 18.5954 91.6907 18.709 91.9228 18.8275L96.3235 21.0698C99.6721 22.7787 102.087 26.1373 103.223 30.7108C104.443 35.6005 104.127 41.6113 102.339 47.7949C100.546 53.9885 97.3755 60.0141 93.3156 64.9383C91.5425 67.0967 90.4411 69.5761 90.3868 71.5369C90.372 72.0604 90.2188 72.6383 89.9472 73.1766C89.6805 73.715 89.3101 74.1842 88.8952 74.5151C88.3074 74.9843 87.7098 75.4239 87.1073 75.8536L89.7447 77.197C89.8879 77.2711 90.0114 77.3748 90.1151 77.5082C90.2584 77.7008 90.3571 77.9428 90.4065 78.2293C90.451 78.5157 90.451 78.8368 90.3966 79.1726C90.3423 79.5085 90.2337 79.8542 90.0855 80.1851C89.9373 80.521 89.7496 80.8371 89.5274 81.1186C89.3051 81.3952 89.0631 81.6322 88.8063 81.8101C87.5567 82.7386 86.2923 83.5733 85.0279 84.329L87.7394 85.7119C88.1346 85.9095 88.3815 86.349 88.4358 86.9318C88.4902 87.5245 88.3371 88.2259 88.016 88.8778C87.6901 89.5298 87.2208 90.078 86.7072 90.404C84.0006 92.1277 81.2644 93.5205 78.5528 94.5577C78.3701 94.6318 78.1874 94.6664 78.0145 94.6664C77.9503 94.6664 77.891 94.6664 77.8317 94.6515C77.7181 94.6367 77.6095 94.6022 77.5058 94.5528L73.1051 92.3104C73.0112 92.2611 72.9273 92.1968 72.8483 92.1228C72.6902 91.9598 72.5667 91.7474 72.4976 91.4856C72.4235 91.2239 72.3988 90.9275 72.4235 90.6065C72.4531 90.2805 72.5272 89.9446 72.6507 89.6088C72.7742 89.2779 72.9372 88.9519 73.1347 88.6556C73.3323 88.3592 73.5595 88.1024 73.8015 87.8851C74.0139 87.7073 74.2312 87.569 74.4485 87.4751L71.169 85.8008C71.0356 85.7366 70.9171 85.6329 70.8183 85.5045C70.5269 85.139 70.4183 84.5562 70.5121 83.8943C70.5565 83.5684 70.6553 83.2276 70.7936 82.8966C70.9319 82.5657 71.1147 82.2546 71.327 81.973C71.5345 81.6866 71.7715 81.4446 72.0234 81.2569C72.2704 81.0643 72.5272 80.9309 72.7791 80.8618C73.3619 80.6988 73.9546 80.5062 74.5424 80.2938L71.169 78.575C71.0751 78.5305 70.9912 78.4663 70.9122 78.3922C70.6405 78.1255 70.4923 77.7057 70.4775 77.197C70.4578 76.4561 70.275 75.7943 69.9589 75.2461C69.6132 75.1127 69.2675 74.9646 68.9365 74.7966L64.5359 72.5543C61.9132 71.2208 59.8438 68.855 58.5201 65.6397C56.7322 61.2736 56.421 55.5887 57.636 49.4545C58.856 43.3202 61.5329 37.0822 65.257 31.7134C68.9761 26.3447 73.5397 22.1367 78.2318 19.7511C81.0767 18.299 83.8771 17.5631 86.4701 17.5631ZM86.4701 16.5753C83.6894 16.5753 80.7655 17.3458 77.7824 18.872C72.9717 21.3168 68.2352 25.6779 64.447 31.1504C60.6735 36.5932 57.9077 43.0238 56.668 49.2618C55.4233 55.5492 55.7543 61.4958 57.6064 66.015C59.014 69.4279 61.2514 71.9962 64.0864 73.4335L68.4871 75.6758C68.7242 75.7943 68.9711 75.9079 69.2428 76.0215C69.3959 76.3771 69.4749 76.7772 69.4897 77.2217C69.5144 78.0021 69.7663 78.6491 70.2207 79.0936C70.3985 79.2615 70.5615 79.3751 70.7294 79.4591L71.9987 80.1061C71.8012 80.2049 71.6036 80.3283 71.4159 80.4765C71.0949 80.7136 70.7936 81.0248 70.5269 81.3902C70.2701 81.731 70.0478 82.1163 69.8799 82.5114C69.7021 82.9312 69.5836 83.351 69.5292 83.756C69.3959 84.6945 69.5786 85.5341 70.0429 86.1169C70.2306 86.3589 70.4676 86.5565 70.7393 86.6898L72.6458 87.6628C72.5272 87.806 72.4136 87.9542 72.3148 88.1073C72.0778 88.4629 71.8802 88.8482 71.7271 89.2631C71.574 89.6779 71.4802 90.0978 71.4406 90.5176C71.4061 90.972 71.4406 91.3819 71.5493 91.7573C71.653 92.1573 71.8555 92.5179 72.142 92.8142C72.1519 92.8241 72.1667 92.8389 72.1765 92.8488C72.3297 92.992 72.4828 93.1007 72.6458 93.1896L77.0563 95.4369C77.0563 95.4369 77.0711 95.4467 77.081 95.4467C77.2786 95.5406 77.486 95.6048 77.6934 95.6295C77.7972 95.6443 77.9058 95.6542 78.0145 95.6542C78.3108 95.6542 78.6171 95.5949 78.9134 95.4764C81.6793 94.4194 84.4846 92.992 87.2357 91.2337C87.8975 90.8139 88.4902 90.1323 88.8952 89.3174C89.3002 88.4926 89.4879 87.6134 89.4138 86.838C89.3249 85.9095 88.8754 85.1735 88.1741 84.8229L87.0282 84.2351C87.8382 83.7116 88.6235 83.1634 89.3792 82.6052C89.7002 82.383 90.0065 82.0866 90.2929 81.731C90.5695 81.3804 90.8016 80.9951 90.9844 80.5753C91.1721 80.1604 91.3005 79.7357 91.3647 79.3208C91.4338 78.8911 91.4388 78.4713 91.3746 78.0712C91.2956 77.6168 91.1375 77.2316 90.9004 76.9105C90.6979 76.6488 90.4609 76.4512 90.1892 76.3129L88.9742 75.6955C89.157 75.5523 89.3348 75.4189 89.5027 75.2807C90.0361 74.8559 90.4905 74.278 90.8214 73.6063C91.1573 72.9445 91.3449 72.2333 91.3647 71.5566C91.4141 69.828 92.4513 67.5313 94.0713 65.5557C98.1904 60.5623 101.46 54.349 103.283 48.0616C105.11 41.7347 105.431 35.4869 104.177 30.4639C102.966 25.594 100.403 22.0379 96.768 20.1808L92.3673 17.9385C92.1154 17.8101 91.8537 17.6866 91.5919 17.573C90.0114 16.9062 88.2877 16.5654 86.4652 16.5654L86.4701 16.5753Z"
+        fill="var(--illustration-stroke-tertiary)"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M87.7394 85.7114C87.3295 85.5138 86.8208 85.5879 86.3071 85.9139C83.8623 87.4697 81.4026 88.7242 78.9578 89.6626C78.7059 89.7565 78.4491 89.9145 78.2071 90.1269C77.9601 90.3442 77.7329 90.601 77.5354 90.8974C77.3428 91.1937 77.1748 91.5197 77.0563 91.8506C76.9328 92.1865 76.8587 92.5223 76.8291 92.8483C76.8044 93.1693 76.8291 93.4657 76.8982 93.7275C76.9723 93.9892 77.0909 94.2016 77.2489 94.3646C77.3279 94.4387 77.4168 94.5029 77.5107 94.5523L73.11 92.31C73.0162 92.2606 72.9273 92.1964 72.8482 92.1223C72.6902 91.9593 72.5717 91.7469 72.4976 91.4851C72.4235 91.2234 72.4037 90.927 72.4284 90.606C72.4581 90.28 72.5321 89.9442 72.6556 89.6083C72.7742 89.2774 72.9421 88.9514 73.1347 88.6551C73.3323 88.3587 73.5595 88.1019 73.8064 87.8846C74.0138 87.7018 74.2312 87.5586 74.4485 87.4697C74.4831 87.4499 74.5226 87.4351 74.5571 87.4203C74.6954 87.366 74.8337 87.3116 74.972 87.2573C77.2786 86.3387 79.5999 85.1385 81.9064 83.6716C82.4201 83.3456 82.9288 83.2715 83.3387 83.4691L85.0378 84.3334L87.7394 85.7114Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
         stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
         strokeWidth="0.4"
         strokeLinecap="round"
@@ -76,7 +116,7 @@ export function InitiativeVerticalStackIllustration({ className }: TIllustration
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M148.628 49.0213C147.269 49.7128 146.405 51.3525 146.405 53.6739C146.405 57.8375 149.181 62.6284 152.599 64.3669C154.11 65.1374 155.498 65.1868 156.575 64.6385C157.933 63.9471 158.797 62.3073 158.797 59.986C158.797 55.8224 156.021 51.0315 152.604 49.293C151.092 48.5225 149.704 48.4731 148.628 49.0213Z"
+        d="M87.7394 85.7116C88.1346 85.9141 88.3815 86.3487 88.4358 86.9315C88.4902 87.5291 88.3371 88.2255 88.016 88.8775C87.6901 89.5294 87.2208 90.0777 86.7121 90.4036C84.0006 92.1274 81.2693 93.5251 78.5578 94.5574C78.3059 94.6561 78.0589 94.6858 77.8367 94.6512C77.7231 94.6314 77.6144 94.5969 77.5156 94.5475C77.4218 94.4981 77.3329 94.4388 77.2539 94.3598C77.0958 94.2017 76.9724 93.9844 76.9032 93.7227C76.8291 93.4658 76.8094 93.1646 76.8341 92.8435C76.8637 92.5225 76.9378 92.1866 77.0613 91.8508C77.1798 91.5149 77.3477 91.1939 77.5403 90.8975C77.7379 90.6012 77.9651 90.3394 78.212 90.127C78.459 89.9147 78.7109 89.7566 78.9677 89.6578C81.4125 88.7244 83.8722 87.4698 86.317 85.914C86.8307 85.5881 87.3394 85.514 87.7493 85.7066L87.7394 85.7116Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
         stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
         strokeWidth="0.4"
@@ -86,21 +126,7 @@ export function InitiativeVerticalStackIllustration({ className }: TIllustration
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M154.308 55.0311C154.135 54.7348 153.903 54.4977 153.656 54.3742C153.414 54.2508 153.177 54.2508 153.004 54.3742L150.381 56.2264C150.095 56.4289 149.932 56.8191 149.932 57.313C149.932 57.8069 150.095 58.36 150.381 58.8589C150.668 59.3528 151.058 59.7479 151.463 59.9553C151.868 60.1628 152.258 60.1628 152.544 59.9603L155.355 57.9748C155.473 57.8908 155.666 57.9896 155.789 58.197C155.908 58.4045 155.908 58.6366 155.789 58.7255L152.979 60.711C152.579 60.9975 152.031 60.9925 151.463 60.7011C150.895 60.4097 150.351 59.8615 149.946 59.1651C149.546 58.4736 149.319 57.6933 149.319 57.0018C149.319 56.3103 149.546 55.7621 149.946 55.4806L152.564 53.6284C152.851 53.4259 153.241 53.4259 153.646 53.6284C154.051 53.8359 154.441 54.231 154.727 54.7249C155.014 55.2188 155.177 55.7769 155.177 56.2708C155.177 56.7647 155.014 57.1549 154.727 57.3623L152.1 59.2145C151.927 59.338 151.695 59.333 151.453 59.2145C151.211 59.0959 150.974 58.8539 150.806 58.5576C150.638 58.2612 150.539 57.9254 150.539 57.6291C150.539 57.3327 150.638 57.1006 150.806 56.9771L153.404 55.1447C153.522 55.0608 153.715 55.1595 153.838 55.367C153.957 55.5744 153.957 55.8065 153.838 55.8905L151.24 57.7229C151.181 57.7624 151.152 57.8414 151.152 57.9402C151.152 58.039 151.186 58.1477 151.24 58.2514C151.3 58.3502 151.374 58.4292 151.458 58.4687C151.542 58.5082 151.616 58.5082 151.675 58.4687L154.303 56.6166C154.476 56.4931 154.569 56.2609 154.569 55.9646C154.569 55.6683 154.471 55.3324 154.298 55.0361L154.308 55.0311Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      />
-      <path
-        d="M78.8145 95.4679C78.7256 95.4679 78.6416 95.463 78.5576 95.4482C78.4095 95.4284 78.2514 95.379 78.0934 95.3099L73.6828 93.0626C73.5494 92.9935 73.4309 92.9045 73.3124 92.7959C73.0704 92.544 72.9123 92.2575 72.8234 91.9266C72.7345 91.6155 72.7049 91.2648 72.7345 90.8845C72.7691 90.4992 72.853 90.1239 72.9913 89.7534C73.1346 89.3731 73.3124 89.0175 73.5297 88.6965C73.7371 88.3804 73.989 88.0939 74.2705 87.842L71.7516 86.5579C71.564 86.469 71.3861 86.3208 71.233 86.1233C70.8577 85.654 70.7144 84.9478 70.828 84.1427C70.8774 83.7822 70.9811 83.4068 71.1441 83.0215C71.2923 82.661 71.4948 82.3153 71.7368 81.9893C71.964 81.6732 72.2357 81.3966 72.532 81.1743C72.8234 80.9472 73.1346 80.7842 73.4507 80.7002C73.6532 80.6409 73.8606 80.5817 74.073 80.5175L71.7467 79.3321C71.6282 79.2778 71.5047 79.1889 71.3763 79.0703C71.0058 78.7048 70.8033 78.1763 70.7836 77.5293C70.7688 76.9416 70.6404 76.4181 70.4082 75.9587C70.0773 75.8254 69.781 75.692 69.5093 75.5537L65.1086 73.3114C62.3823 71.9235 60.219 69.4441 58.8608 66.1449C57.0481 61.7146 56.7222 55.8667 57.947 49.6781C59.1769 43.5043 61.9081 37.1379 65.647 31.7494C69.3908 26.3412 74.0631 22.0393 78.8046 19.629C81.7186 18.1424 84.5635 17.3867 87.2651 17.3867C89.0185 17.3867 90.678 17.7127 92.1943 18.3548C92.4462 18.4634 92.6981 18.582 92.9401 18.7054L97.3408 20.9478C100.847 22.7357 103.322 26.1831 104.497 30.9098C105.727 35.8488 105.416 42.0078 103.608 48.2507C101.806 54.4739 98.5706 60.623 94.4909 65.5719C92.7771 67.6562 91.7251 70.0121 91.6757 71.8692C91.6609 72.4668 91.4831 73.1237 91.1818 73.7164C90.8854 74.319 90.4755 74.8376 89.9964 75.2179C89.6458 75.4945 89.2704 75.7809 88.8456 76.097L90.762 77.0749C90.9694 77.1836 91.1522 77.3318 91.3003 77.5244C91.4979 77.7911 91.6263 78.1023 91.6905 78.4628C91.7448 78.8234 91.7448 79.1889 91.6806 79.5692C91.6214 79.9396 91.5028 80.3248 91.33 80.7051C91.162 81.0805 90.9546 81.4312 90.7076 81.7423C90.4459 82.0683 90.1644 82.335 89.8779 82.5326C88.9148 83.2487 87.8924 83.9451 86.8305 84.607L88.7567 85.5898C89.3 85.8615 89.6507 86.4492 89.7198 87.2049C89.784 87.8865 89.6161 88.6718 89.2506 89.4127C88.8802 90.1535 88.3517 90.761 87.764 91.1364C85.0376 92.8749 82.2668 94.2875 79.5207 95.3346C79.2837 95.4284 79.0416 95.4728 78.8046 95.4728L78.8145 95.4679Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-      />
-      <path
-        d="M87.2701 17.8707C88.9494 17.8707 90.5447 18.177 92.0066 18.7993C92.2486 18.903 92.4907 19.0166 92.7228 19.1351L97.1235 21.3774C100.472 23.0864 102.887 26.4449 104.023 31.0184C105.243 35.9081 104.927 41.9189 103.139 48.1026C101.346 54.2961 98.1755 60.3217 94.1156 65.2459C92.3425 67.4043 91.2411 69.8837 91.1868 71.8445C91.1719 72.368 91.0188 72.9459 90.7472 73.4842C90.4805 74.0226 90.11 74.4918 89.6952 74.8227C89.1074 75.2919 88.5098 75.7315 87.9072 76.1612L90.5447 77.5046C90.6879 77.5787 90.8114 77.6824 90.9151 77.8158C91.0583 78.0084 91.1571 78.2504 91.2065 78.5369C91.251 78.8233 91.251 79.1444 91.1966 79.4802C91.1423 79.8161 91.0336 80.1618 90.8855 80.4927C90.7373 80.8286 90.5496 81.1447 90.3274 81.4262C90.1051 81.7028 89.8631 81.9399 89.6063 82.1177C88.3567 83.0462 87.0923 83.8809 85.8279 84.6366L88.5394 86.0195C88.9346 86.2171 89.1815 86.6566 89.2358 87.2395C89.2902 87.8321 89.1371 88.5335 88.816 89.1854C88.49 89.8374 88.0208 90.3856 87.5072 90.7116C84.8006 92.4353 82.0644 93.8281 79.3528 94.8653C79.1701 94.9394 78.9873 94.974 78.8145 94.974C78.7503 94.974 78.691 94.974 78.6317 94.9592C78.5181 94.9443 78.4095 94.9098 78.3058 94.8604L73.9051 92.6181C73.8112 92.5687 73.7273 92.5045 73.6482 92.4304C73.4902 92.2674 73.3667 92.055 73.2976 91.7932C73.2235 91.5315 73.1988 91.2351 73.2235 90.9141C73.2531 90.5881 73.3272 90.2523 73.4507 89.9164C73.5742 89.5855 73.7372 89.2595 73.9347 88.9632C74.1323 88.6668 74.3595 88.41 74.6015 88.1927C74.8139 88.0149 75.0312 87.8766 75.2485 87.7827L71.969 86.1084C71.8356 86.0442 71.7171 85.9405 71.6183 85.8121C71.3269 85.4466 71.2182 84.8638 71.3121 84.2019C71.3565 83.876 71.4553 83.5352 71.5936 83.2043C71.7319 82.8733 71.9146 82.5622 72.127 82.2807C72.3345 81.9942 72.5715 81.7522 72.8234 81.5645C73.0704 81.3719 73.3272 81.2385 73.5791 81.1694C74.1619 81.0064 74.7546 80.8138 75.3423 80.6014L71.969 78.8826C71.8751 78.8382 71.7912 78.7739 71.7121 78.6999C71.4405 78.4332 71.2923 78.0133 71.2775 77.5046C71.2578 76.7638 71.075 76.1019 70.7589 75.5537C70.4132 75.4203 70.0674 75.2722 69.7365 75.1042L65.3359 72.8619C62.7132 71.5284 60.6438 69.1626 59.3201 65.9473C57.5322 61.5812 57.221 55.8963 58.436 49.7621C59.656 43.6278 62.3329 37.3898 66.057 32.0211C69.776 26.6523 74.3397 22.4443 79.0318 20.0587C81.8767 18.6066 84.6771 17.8707 87.2701 17.8707ZM87.2701 16.8829C84.4894 16.8829 81.5655 17.6534 78.5823 19.1796C73.7717 21.6244 69.0352 25.9856 65.247 31.458C61.4735 36.9008 58.7077 43.3314 57.468 49.5694C56.2233 55.8568 56.5543 61.8034 58.4064 66.3226C59.814 69.7355 62.0514 72.3038 64.8864 73.7411L69.2871 75.9834C69.5242 76.1019 69.7711 76.2155 70.0427 76.3291C70.1959 76.6847 70.2749 77.0848 70.2897 77.5293C70.3144 78.3097 70.5663 78.9567 71.0207 79.4012C71.1985 79.5691 71.3615 79.6827 71.5294 79.7667L72.7987 80.4137C72.6012 80.5125 72.4036 80.636 72.2159 80.7841C71.8949 81.0212 71.5936 81.3324 71.3269 81.6979C71.0701 82.0387 70.8478 82.4239 70.6799 82.819C70.5021 83.2388 70.3835 83.6587 70.3292 84.0637C70.1959 85.0021 70.3786 85.8417 70.8429 86.4245C71.0306 86.6665 71.2676 86.8641 71.5393 86.9974L73.4457 87.9704C73.3272 88.1137 73.2136 88.2618 73.1148 88.4149C72.8778 88.7706 72.6802 89.1558 72.5271 89.5707C72.374 89.9856 72.2801 90.4054 72.2406 90.8252C72.2061 91.2796 72.2406 91.6895 72.3493 92.0649C72.453 92.465 72.6555 92.8255 72.942 93.1218C72.9518 93.1317 72.9667 93.1465 72.9765 93.1564C73.1296 93.2996 73.2828 93.4083 73.4457 93.4972L77.8563 95.7445C77.8563 95.7445 77.8711 95.7543 77.881 95.7543C78.0786 95.8482 78.286 95.9124 78.4934 95.9371C78.5972 95.9519 78.7058 95.9618 78.8145 95.9618C79.1108 95.9618 79.417 95.9025 79.7134 95.784C82.4792 94.727 85.2846 93.2996 88.0357 91.5414C88.6975 91.1215 89.2902 90.4399 89.6952 89.625C90.1002 88.8002 90.2879 87.921 90.2138 87.1456C90.1249 86.2171 89.6754 85.4812 88.9741 85.1305L87.8282 84.5427C88.6382 84.0192 89.4235 83.471 90.1792 82.9129C90.5002 82.6906 90.8064 82.3943 91.0929 82.0387C91.3695 81.688 91.6016 81.3027 91.7844 80.8829C91.9721 80.468 92.1005 80.0433 92.1647 79.6284C92.2338 79.1987 92.2388 78.7789 92.1746 78.3788C92.0955 77.9244 91.9375 77.5392 91.7004 77.2182C91.4979 76.9564 91.2608 76.7588 90.9892 76.6205L89.7742 76.0032C89.9569 75.8599 90.1347 75.7266 90.3027 75.5883C90.8361 75.1635 91.2905 74.5856 91.6214 73.9139C91.9572 73.2521 92.1449 72.5409 92.1647 71.8642C92.2141 70.1356 93.2513 67.8389 94.8713 65.8633C98.9904 60.87 102.26 54.6567 104.083 48.3693C105.91 42.0424 106.231 35.7945 104.977 30.7715C103.766 25.9016 101.203 22.3455 97.568 20.4884L93.1673 18.2461C92.9154 18.1177 92.6536 17.9942 92.3919 17.8806C90.8114 17.2138 89.0877 16.873 87.2652 16.873L87.2701 16.8829Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M88.5394 86.019C88.1295 85.8215 87.6208 85.8955 87.1071 86.2215C84.6623 87.7773 82.2026 89.0318 79.7578 89.9703C79.5059 90.0641 79.2491 90.2221 79.0071 90.4345C78.7601 90.6518 78.5329 90.9087 78.3354 91.205C78.1427 91.5014 77.9748 91.8273 77.8563 92.1582C77.7328 92.4941 77.6587 92.8299 77.6291 93.1559C77.6044 93.477 77.6291 93.7733 77.6982 94.0351C77.7723 94.2968 77.8909 94.5092 78.0489 94.6722C78.1279 94.7463 78.2168 94.8105 78.3107 94.8599L73.91 92.6176C73.8161 92.5682 73.7272 92.504 73.6482 92.4299C73.4902 92.2669 73.3716 92.0545 73.2976 91.7928C73.2235 91.531 73.2037 91.2346 73.2284 90.9136C73.258 90.5876 73.3321 90.2518 73.4556 89.9159C73.5741 89.585 73.7421 89.259 73.9347 88.9627C74.1322 88.6663 74.3594 88.4095 74.6064 88.1922C74.8138 88.0095 75.0312 87.8662 75.2485 87.7773C75.283 87.7576 75.3226 87.7427 75.3571 87.7279C75.4954 87.6736 75.6337 87.6193 75.772 87.5649C78.0785 86.6463 80.3999 85.4461 82.7064 83.9792C83.2201 83.6532 83.7288 83.5791 84.1387 83.7767L85.8378 84.641L88.5394 86.019Z"
+        d="M75.5697 80.8173L74.5522 80.2987C74.7054 80.2493 74.8535 80.1901 75.0066 80.1357C75.0264 80.1851 75.0462 80.2345 75.0659 80.279C75.1104 80.3679 75.1647 80.4518 75.224 80.5259C75.2536 80.5654 75.2832 80.6 75.3178 80.6346C75.3919 80.7087 75.4808 80.7729 75.5697 80.8173Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
         stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
         strokeWidth="0.4"
@@ -110,7 +136,49 @@ export function InitiativeVerticalStackIllustration({ className }: TIllustration
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M88.5394 86.0192C88.9346 86.2217 89.1815 86.6563 89.2358 87.2391C89.2902 87.8367 89.1371 88.5331 88.816 89.1851C88.49 89.837 88.0208 90.3853 87.5121 90.7113C84.8006 92.435 82.0693 93.8327 79.3578 94.865C79.1059 94.9638 78.8589 94.9934 78.6367 94.9588C78.5231 94.9391 78.4144 94.9045 78.3156 94.8551C78.2218 94.8057 78.1329 94.7464 78.0539 94.6674C77.8958 94.5094 77.7723 94.2921 77.7032 94.0303C77.6291 93.7735 77.6094 93.4722 77.634 93.1511C77.6637 92.8301 77.7378 92.4942 77.8612 92.1584C77.9798 91.8225 78.1477 91.5015 78.3403 91.2052C78.5379 90.9088 78.7651 90.647 79.012 90.4347C79.259 90.2223 79.5109 90.0642 79.7677 89.9655C82.2125 89.032 84.6722 87.7775 87.117 86.2217C87.6307 85.8957 88.1394 85.8216 88.5493 86.0142L88.5394 86.0192Z"
+        d="M75.5746 88.0431L74.4485 87.4702C74.4831 87.4504 74.5226 87.4356 74.5571 87.4208C74.6954 87.3665 74.8337 87.3121 74.972 87.2578C74.9868 87.3023 75.0017 87.3467 75.0165 87.3862C75.0313 87.4257 75.051 87.4653 75.0659 87.5048C75.1103 87.5937 75.1597 87.6727 75.219 87.7468C75.3178 87.8752 75.4412 87.9789 75.5746 88.0431Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M90.3967 79.1725C90.3423 79.5083 90.2386 79.8541 90.0904 80.185C89.9373 80.5208 89.7496 80.8369 89.5323 81.1185C89.3101 81.3951 89.0631 81.6321 88.8112 81.8099C87.5617 82.7335 86.3022 83.5781 85.0378 84.3338C82.1732 86.0476 79.2888 87.3169 76.4587 88.1072C76.1278 88.1961 75.8265 88.1714 75.5746 88.043C75.4413 87.9788 75.3178 87.8751 75.219 87.7466C75.1597 87.6726 75.1104 87.5935 75.0659 87.5046C75.0511 87.4651 75.0313 87.4256 75.0165 87.3861C75.0017 87.3466 74.9869 87.3021 74.9721 87.2577C74.9671 87.2429 74.9622 87.228 74.9622 87.2132C74.9474 87.1737 74.9375 87.1342 74.9325 87.0947C74.9177 87.0453 74.9128 86.991 74.9029 86.9366C74.8733 86.6946 74.8733 86.423 74.9177 86.1365C74.9622 85.8105 75.056 85.4698 75.1993 85.1388C75.3376 84.8079 75.5154 84.4968 75.7277 84.2152C75.9401 83.9288 76.1722 83.6868 76.4241 83.4991C76.676 83.3065 76.9329 83.1731 77.1847 83.104C80.7853 82.1013 84.4846 80.2146 88.0852 77.5475C88.3371 77.35 88.5989 77.2117 88.8557 77.1425C89.1125 77.0685 89.3545 77.0635 89.5718 77.1277C89.6015 77.1376 89.6311 77.1475 89.6608 77.1574C89.6904 77.1722 89.7151 77.1821 89.7447 77.1969C89.8879 77.271 90.0114 77.3747 90.1151 77.508C90.2584 77.7007 90.3572 77.9427 90.4065 78.2291C90.4559 78.5156 90.451 78.8366 90.3967 79.1725Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M75.5697 80.8172L74.5522 80.2986L71.169 78.5749C71.0801 78.5304 70.9912 78.4662 70.9171 78.3921C70.6455 78.1254 70.4923 77.7056 70.4775 77.1969C70.4578 76.456 70.28 75.8041 69.9639 75.2559C70.5961 75.5028 71.2628 75.6954 71.9494 75.8288C72.3198 75.9029 72.6655 76.0214 72.9767 76.1795C74.1423 76.7721 74.8387 77.9328 74.8782 79.4392C74.8782 79.617 74.9078 79.785 74.9424 79.9381C74.9622 80.0072 74.9819 80.0714 75.0066 80.1356C75.0264 80.185 75.0461 80.2344 75.0659 80.2789C75.1103 80.3678 75.1647 80.4517 75.2239 80.5258C75.2536 80.5653 75.2832 80.5999 75.3178 80.6345C75.3919 80.7086 75.4808 80.7728 75.5697 80.8172Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M89.6608 77.1574C89.6311 77.1475 89.6015 77.1376 89.5719 77.1277C89.3545 77.0635 89.1125 77.0685 88.8557 77.1426C88.5989 77.2117 88.3371 77.35 88.0852 77.5476C84.4847 80.2146 80.7853 82.1014 77.1848 83.104C76.9329 83.1731 76.676 83.3065 76.4242 83.4991C76.1723 83.6868 75.9401 83.9288 75.7277 84.2153C75.5154 84.4968 75.3376 84.8079 75.1993 85.1389C75.056 85.4698 74.9622 85.8106 74.9177 86.1365C74.8733 86.4181 74.8684 86.6947 74.9029 86.9367C74.9128 86.991 74.9177 87.0453 74.9326 87.0947C74.9326 87.1342 74.9474 87.1737 74.9622 87.2133C74.9622 87.2281 74.9622 87.2429 74.9721 87.2577C74.8338 87.312 74.6955 87.3664 74.5572 87.4207C74.5226 87.4355 74.4831 87.4503 74.4485 87.4701L71.174 85.8007C71.0406 85.7365 70.9171 85.6328 70.8183 85.5044C70.5269 85.1389 70.4183 84.5561 70.5171 83.8942C70.5615 83.5682 70.6554 83.2275 70.7986 82.8965C70.9369 82.5656 71.1147 82.2545 71.3271 81.9729C71.5394 81.6865 71.7716 81.4445 72.0235 81.2568C72.2754 81.0642 72.5322 80.9308 72.7791 80.8617C73.3669 80.6987 73.9596 80.511 74.5523 80.2986L75.5697 80.8172C75.8018 80.9357 76.0735 80.9654 76.3698 80.9012C77.2786 80.6987 78.2071 80.432 79.1456 80.101C79.9803 79.8047 80.6964 78.6243 80.6964 77.597V62.9428C80.5235 63.0071 80.3507 63.0713 80.1729 63.1305C79.5357 63.3429 78.8986 63.5158 78.2714 63.6392C78.0293 63.6837 77.7972 63.6689 77.5898 63.5849C77.57 63.58 77.5453 63.5701 77.5256 63.5553C77.5157 63.5503 77.5009 63.5454 77.491 63.5355C77.3329 63.4516 77.1946 63.3182 77.0909 63.1552C76.9576 62.9577 76.8736 62.7058 76.839 62.4144C76.8045 62.1279 76.8143 61.8069 76.8835 61.4759C76.9082 61.3377 76.9427 61.1944 76.9872 61.0561C77.0465 60.8635 77.1206 60.6659 77.2095 60.4783C77.3626 60.1523 77.5502 59.8461 77.7725 59.5794C77.9898 59.3077 78.2318 59.0805 78.4837 58.9126C78.7406 58.7397 78.9924 58.6261 79.2394 58.5767C79.8963 58.4483 80.5631 58.2557 81.2348 57.9939C82.835 57.3815 84.46 56.4134 86.0256 55.1194C86.2775 54.9021 86.5393 54.744 86.7961 54.6502C87.053 54.5564 87.2999 54.5317 87.5222 54.5761C87.6259 54.5909 87.7197 54.6255 87.8086 54.67C87.9173 54.7243 88.0161 54.8033 88.105 54.8972C88.263 55.0651 88.3766 55.2923 88.4408 55.5639C88.505 55.8405 88.5198 56.1517 88.4803 56.4826C88.4408 56.8135 88.3519 57.1592 88.2186 57.4951C88.0803 57.8359 87.9074 58.1569 87.695 58.4483C87.4826 58.7397 87.2456 58.9916 86.9937 59.1941C86.1985 59.8461 85.3885 60.4388 84.5736 60.9672V75.6213C84.5736 76.1597 84.7662 76.54 85.0773 76.6981C85.3589 76.8413 85.7244 76.8067 86.1244 76.5449C86.4553 76.3227 86.7862 76.0955 87.1172 75.8584L89.6608 77.1574Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M96.3284 21.0701C96.0914 20.9516 95.8543 20.838 95.6073 20.7342C91.8882 19.1587 87.3246 19.5983 82.6325 21.9937C77.9404 24.3793 73.3817 28.5873 69.6577 33.956C65.9336 39.3248 63.2616 45.5628 62.0417 51.697C60.8217 57.8313 61.1329 63.5162 62.9257 67.8823C64.2445 71.0976 66.3189 73.4634 68.9415 74.7969L64.5408 72.5546C61.9182 71.2211 59.8438 68.8553 58.5251 65.6399C56.7322 61.2738 56.421 55.589 57.641 49.4547C58.8609 43.3204 61.5329 37.0824 65.257 31.7137C68.981 26.345 73.5397 22.1369 78.2318 19.7514C82.9239 17.3559 87.4876 16.9164 91.2066 18.4919C91.4536 18.5956 91.6907 18.7092 91.9278 18.8278L96.3284 21.0701Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M102.344 47.7951C100.551 53.9886 97.3805 60.0143 93.3206 64.9385C91.5475 67.0968 90.4411 69.5762 90.3868 71.537C90.3769 72.0606 90.2238 72.6384 89.9522 73.1768C89.6805 73.7151 89.315 74.1843 88.8952 74.5153C88.3075 74.9845 87.7148 75.4339 87.1172 75.8587C86.7862 76.0957 86.4553 76.3229 86.1244 76.5452C85.7243 76.807 85.3589 76.8415 85.0773 76.6983C84.7662 76.5403 84.5736 76.16 84.5736 75.6216V60.9675C85.3885 60.439 86.1985 59.8463 86.9937 59.1944C87.2456 58.9919 87.4826 58.74 87.695 58.4486C87.9074 58.1572 88.0803 57.8361 88.2186 57.4953C88.3519 57.1595 88.4408 56.8138 88.4803 56.4828C88.5198 56.1519 88.505 55.8408 88.4408 55.5642C88.3766 55.2925 88.263 55.0653 88.105 54.8974C88.0161 54.8036 87.9173 54.7245 87.8086 54.6702C87.7197 54.6258 87.6259 54.5912 87.5222 54.5764C87.2999 54.5319 87.0529 54.5566 86.7961 54.6505C86.5393 54.7443 86.2775 54.9024 86.0256 55.1197C84.46 56.4137 82.835 57.3817 81.2348 57.9942C80.5631 58.256 79.8963 58.4486 79.2394 58.577C78.9924 58.6264 78.7406 58.74 78.4837 58.9128C78.2318 59.0808 77.9898 59.308 77.7725 59.5796C77.5502 59.8463 77.3626 60.1525 77.2094 60.4785C77.1205 60.6662 77.0465 60.8638 76.9872 61.0564C76.9427 61.1947 76.9082 61.3379 76.8835 61.4762C76.8143 61.8071 76.8044 62.1282 76.839 62.4146C76.8736 62.706 76.9576 62.9579 77.0909 63.1555C77.1946 63.3185 77.3329 63.4518 77.491 63.5358C77.5009 63.5457 77.5157 63.5506 77.5255 63.5555C77.5453 63.5704 77.57 63.5802 77.5898 63.5852C77.7972 63.6691 78.0293 63.684 78.2713 63.6395C78.8986 63.516 79.5357 63.3432 80.1729 63.1308C80.3507 63.0715 80.5235 63.0073 80.6964 62.9431V77.5972C80.6964 78.6245 79.9802 79.805 79.1455 80.1013C78.2071 80.4322 77.2786 80.6989 76.3698 80.9014C76.0735 80.9656 75.8018 80.936 75.5697 80.8175C75.4808 80.773 75.3919 80.7088 75.3178 80.6347C75.2832 80.6001 75.2536 80.5656 75.224 80.5261C75.1647 80.452 75.1104 80.368 75.0659 80.2791C75.0462 80.2347 75.0264 80.1853 75.0066 80.1359C74.9819 80.0717 74.9622 80.0075 74.9424 79.9383C74.9079 79.7852 74.8832 79.6173 74.8782 79.4395C74.8387 77.9331 74.1423 76.7724 72.9767 76.1797C72.6655 76.0217 72.3198 75.9031 71.9494 75.829C71.2629 75.6957 70.5961 75.5031 69.9639 75.2561C69.6132 75.1178 69.2724 74.9647 68.9415 74.7968C66.3189 73.4632 64.2445 71.0974 62.9258 67.8821C61.1329 63.516 60.8217 57.8312 62.0417 51.6969C63.2616 45.5626 65.9336 39.3246 69.6577 33.9559C73.3817 28.5872 77.9404 24.3791 82.6325 21.9936C87.3246 19.5981 91.8883 19.1586 95.6073 20.7341C95.8543 20.8378 96.0914 20.9514 96.3285 21.07C99.6771 22.7789 102.092 26.1374 103.228 30.711C104.443 35.6006 104.132 41.6114 102.344 47.7951Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
         stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
         strokeWidth="0.4"
@@ -120,71 +188,9 @@ export function InitiativeVerticalStackIllustration({ className }: TIllustration
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M76.3697 81.1249L75.3522 80.6063C75.5053 80.557 75.6535 80.4977 75.8066 80.4434C75.8264 80.4927 75.8461 80.5421 75.8659 80.5866C75.9103 80.6755 75.9647 80.7595 76.0239 80.8335C76.0536 80.8731 76.0832 80.9076 76.1178 80.9422C76.1919 81.0163 76.2808 81.0805 76.3697 81.1249Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-        strokeWidth="0.4"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M76.3746 88.3507L75.2485 87.7778C75.283 87.7581 75.3226 87.7432 75.3571 87.7284C75.4954 87.6741 75.6337 87.6198 75.772 87.5654C75.7868 87.6099 75.8016 87.6543 75.8165 87.6938C75.8313 87.7334 75.851 87.7729 75.8659 87.8124C75.9103 87.9013 75.9597 87.9803 76.019 88.0544C76.1177 88.1828 76.2412 88.2865 76.3746 88.3507Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-        strokeWidth="0.4"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M91.1967 79.4801C91.1423 79.816 91.0386 80.1617 90.8904 80.4926C90.7373 80.8285 90.5496 81.1446 90.3323 81.4261C90.1101 81.7027 89.8631 81.9397 89.6112 82.1175C88.3616 83.0411 87.1022 83.8857 85.8378 84.6414C82.9732 86.3552 80.0888 87.6246 77.2587 88.4148C76.9278 88.5037 76.6265 88.479 76.3746 88.3506C76.2413 88.2864 76.1178 88.1827 76.019 88.0543C75.9597 87.9802 75.9103 87.9012 75.8659 87.8122C75.8511 87.7727 75.8313 87.7332 75.8165 87.6937C75.8017 87.6542 75.7869 87.6097 75.7721 87.5653C75.7671 87.5505 75.7622 87.5357 75.7622 87.5208C75.7474 87.4813 75.7375 87.4418 75.7325 87.4023C75.7177 87.3529 75.7128 87.2986 75.7029 87.2443C75.6733 87.0023 75.6733 86.7306 75.7177 86.4441C75.7622 86.1182 75.856 85.7774 75.9992 85.4465C76.1375 85.1155 76.3153 84.8044 76.5277 84.5229C76.7401 84.2364 76.9722 83.9944 77.2241 83.8067C77.476 83.6141 77.7328 83.4807 77.9847 83.4116C81.5853 82.409 85.2846 80.5222 88.8852 77.8552C89.1371 77.6576 89.3988 77.5193 89.6557 77.4502C89.9125 77.3761 90.1545 77.3711 90.3718 77.4353C90.4015 77.4452 90.4311 77.4551 90.4607 77.465C90.4904 77.4798 90.5151 77.4897 90.5447 77.5045C90.6879 77.5786 90.8114 77.6823 90.9151 77.8156C91.0584 78.0083 91.1571 78.2503 91.2065 78.5367C91.2559 78.8232 91.251 79.1442 91.1967 79.4801Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-        strokeWidth="0.4"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <path
-        d="M76.3697 81.1248L75.3522 80.6062L71.969 78.8825C71.8801 78.838 71.7912 78.7738 71.7171 78.6998C71.4454 78.4331 71.2923 78.0132 71.2775 77.5045C71.2578 76.7637 71.08 76.1117 70.7639 75.5635C71.3961 75.8104 72.0628 76.003 72.7493 76.1364C73.1198 76.2105 73.4655 76.329 73.7767 76.4871C74.9423 77.0798 75.6387 78.2404 75.6782 79.7468C75.6782 79.9246 75.7078 80.0926 75.7424 80.2457C75.7622 80.3148 75.7819 80.379 75.8066 80.4432C75.8264 80.4926 75.8461 80.542 75.8659 80.5865C75.9103 80.6754 75.9647 80.7593 76.0239 80.8334C76.0536 80.8729 76.0832 80.9075 76.1178 80.9421C76.1919 81.0162 76.2808 81.0804 76.3697 81.1248Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-        strokeWidth="0.4"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <path
-        d="M90.4608 77.465C90.4311 77.4551 90.4015 77.4452 90.3718 77.4354C90.1545 77.3712 89.9125 77.3761 89.6557 77.4502C89.3989 77.5193 89.1371 77.6576 88.8852 77.8552C85.2846 80.5223 81.5853 82.409 77.9847 83.4116C77.7329 83.4807 77.476 83.6141 77.2241 83.8067C76.9722 83.9944 76.7401 84.2364 76.5277 84.5229C76.3154 84.8044 76.1376 85.1156 75.9993 85.4465C75.856 85.7774 75.7622 86.1182 75.7177 86.4442C75.6733 86.7257 75.6683 87.0023 75.7029 87.2443C75.7128 87.2986 75.7177 87.3529 75.7325 87.4023C75.7325 87.4418 75.7474 87.4814 75.7622 87.5209C75.7622 87.5357 75.7622 87.5505 75.7721 87.5653C75.6338 87.6197 75.4955 87.674 75.3572 87.7283C75.3226 87.7431 75.2831 87.7579 75.2485 87.7777L71.9739 86.1083C71.8406 86.0441 71.7171 85.9404 71.6183 85.812C71.3269 85.4465 71.2183 84.8637 71.3171 84.2018C71.3615 83.8759 71.4553 83.5351 71.5986 83.2042C71.7369 82.8732 71.9147 82.5621 72.1271 82.2806C72.3394 81.9941 72.5716 81.7521 72.8235 81.5644C73.0753 81.3718 73.3322 81.2384 73.5791 81.1693C74.1669 81.0063 74.7596 80.8186 75.3522 80.6062L76.3697 81.1248C76.6018 81.2434 76.8735 81.273 77.1698 81.2088C78.0786 81.0063 79.0071 80.7396 79.9455 80.4087C80.7802 80.1123 81.4964 78.9319 81.4964 77.9046V63.2505C81.3235 63.3147 81.1507 63.3789 80.9729 63.4381C80.3357 63.6505 79.6986 63.8234 79.0713 63.9469C78.8293 63.9913 78.5972 63.9765 78.3898 63.8925C78.37 63.8876 78.3453 63.8777 78.3255 63.8629C78.3157 63.858 78.3009 63.853 78.291 63.8431C78.1329 63.7592 77.9946 63.6258 77.8909 63.4628C77.7576 63.2653 77.6736 63.0134 77.639 62.722C77.6044 62.4355 77.6143 62.1145 77.6835 61.7836C77.7082 61.6453 77.7427 61.502 77.7872 61.3637C77.8465 61.1711 77.9205 60.9736 78.0094 60.7859C78.1626 60.4599 78.3502 60.1537 78.5725 59.887C78.7898 59.6153 79.0318 59.3881 79.2837 59.2202C79.5405 59.0473 79.7924 58.9337 80.0394 58.8844C80.6963 58.7559 81.3631 58.5633 82.0348 58.3016C83.635 57.6891 85.2599 56.7211 86.8256 55.427C87.0775 55.2097 87.3393 55.0517 87.5961 54.9578C87.8529 54.864 88.0999 54.8393 88.3221 54.8837C88.4259 54.8986 88.5197 54.9331 88.6086 54.9776C88.7173 55.0319 88.816 55.1109 88.9049 55.2048C89.063 55.3727 89.1766 55.5999 89.2408 55.8715C89.305 56.1481 89.3198 56.4593 89.2803 56.7902C89.2408 57.1211 89.1519 57.4669 89.0186 57.8027C88.8803 58.1435 88.7074 58.4645 88.495 58.7559C88.2826 59.0473 88.0456 59.2992 87.7937 59.5017C86.9985 60.1537 86.1885 60.7464 85.3735 61.2748V75.929C85.3735 76.4673 85.5662 76.8476 85.8773 77.0057C86.1589 77.1489 86.5243 77.1143 86.9244 76.8526C87.2553 76.6303 87.5862 76.4031 87.9171 76.166L90.4608 77.465Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-        strokeWidth="0.4"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <path
-        d="M97.1284 21.3777C96.8913 21.2592 96.6543 21.1456 96.4073 21.0419C92.6882 19.4663 88.1246 19.9059 83.4325 22.3013C78.7404 24.6869 74.1817 28.8949 70.4576 34.2637C66.7336 39.6324 64.0616 45.8704 62.8416 52.0047C61.6217 58.1389 61.9329 63.8238 63.7257 68.1899C65.0445 71.4052 67.1188 73.771 69.7415 75.1045L65.3408 72.8622C62.7182 71.5287 60.6438 69.1629 59.3251 65.9476C57.5322 61.5815 57.221 55.8966 58.441 49.7623C59.6609 43.6281 62.3329 37.3901 66.057 32.0213C69.781 26.6526 74.3397 22.4445 79.0318 20.059C83.7239 17.6636 88.2875 17.224 92.0066 18.7995C92.2536 18.9033 92.4907 19.0169 92.7277 19.1354L97.1284 21.3777Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-        strokeWidth="0.4"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <path
-        d="M103.144 48.1027C101.351 54.2962 98.1804 60.3219 94.1206 65.2461C92.3474 67.4044 91.2411 69.8838 91.1868 71.8446C91.1769 72.3682 91.0238 72.946 90.7521 73.4844C90.4805 74.0227 90.115 74.492 89.6952 74.8229C89.1074 75.2921 88.5148 75.7415 87.9171 76.1663C87.5862 76.4034 87.2553 76.6306 86.9244 76.8528C86.5243 77.1146 86.1588 77.1492 85.8773 77.0059C85.5662 76.8479 85.3735 76.4676 85.3735 75.9292V61.2751C86.1885 60.7466 86.9985 60.1539 87.7937 59.502C88.0456 59.2995 88.2826 59.0476 88.495 58.7562C88.7074 58.4648 88.8803 58.1438 89.0185 57.803C89.1519 57.4671 89.2408 57.1214 89.2803 56.7905C89.3198 56.4595 89.305 56.1484 89.2408 55.8718C89.1766 55.6001 89.063 55.373 88.9049 55.205C88.816 55.1112 88.7173 55.0322 88.6086 54.9778C88.5197 54.9334 88.4259 54.8988 88.3221 54.884C88.0999 54.8395 87.8529 54.8642 87.5961 54.9581C87.3393 55.0519 87.0775 55.21 86.8256 55.4273C85.2599 56.7213 83.635 57.6894 82.0348 58.3018C81.363 58.5636 80.6963 58.7562 80.0394 58.8846C79.7924 58.934 79.5405 59.0476 79.2837 59.2205C79.0318 59.3884 78.7898 59.6156 78.5725 59.8872C78.3502 60.1539 78.1625 60.4602 78.0094 60.7861C77.9205 60.9738 77.8464 61.1714 77.7872 61.364C77.7427 61.5023 77.7082 61.6455 77.6835 61.7838C77.6143 62.1147 77.6044 62.4358 77.639 62.7222C77.6736 63.0136 77.7575 63.2655 77.8909 63.4631C77.9946 63.6261 78.1329 63.7594 78.291 63.8434C78.3008 63.8533 78.3157 63.8582 78.3255 63.8632C78.3453 63.878 78.37 63.8878 78.3897 63.8928C78.5972 63.9768 78.8293 63.9916 79.0713 63.9471C79.6986 63.8236 80.3357 63.6508 80.9729 63.4384C81.1507 63.3791 81.3235 63.3149 81.4964 63.2507V77.9048C81.4964 78.9321 80.7802 80.1126 79.9455 80.4089C79.0071 80.7398 78.0786 81.0065 77.1698 81.209C76.8735 81.2732 76.6018 81.2436 76.3697 81.1251C76.2808 81.0806 76.1919 81.0164 76.1178 80.9423C76.0832 80.9078 76.0536 80.8732 76.0239 80.8337C75.9647 80.7596 75.9103 80.6756 75.8659 80.5867C75.8461 80.5423 75.8264 80.4929 75.8066 80.4435C75.7819 80.3793 75.7622 80.3151 75.7424 80.2459C75.7078 80.0928 75.6832 79.9249 75.6782 79.7471C75.6387 78.2407 74.9423 77.08 73.7767 76.4873C73.4655 76.3293 73.1198 76.2107 72.7494 76.1367C72.0628 76.0033 71.3961 75.8107 70.7639 75.5637C70.4132 75.4254 70.0724 75.2723 69.7415 75.1044C67.1189 73.7709 65.0445 71.4051 63.7258 68.1897C61.9329 63.8236 61.6217 58.1388 62.8417 52.0045C64.0616 45.8703 66.7336 39.6322 70.4577 34.2635C74.1817 28.8948 78.7404 24.6867 83.4325 22.3012C88.1246 19.9058 92.6882 19.4662 96.4073 21.0417C96.6543 21.1454 96.8914 21.259 97.1284 21.3776C100.477 23.0865 102.892 26.445 104.028 31.0186C105.243 35.9082 104.932 41.919 103.144 48.1027Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-        strokeWidth="0.4"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M5.42537 64.2881C4.06714 63.5967 3.20281 61.9618 3.20281 59.6356C3.20281 55.472 5.97855 50.6811 9.39636 48.9425L32.3135 37.2667C33.8248 36.4962 35.2077 36.4468 36.2845 36.995L34.0816 35.8739C33.0049 35.3256 31.622 35.375 30.1107 36.1455L7.19355 47.8214C3.77574 49.5599 1 54.3508 1 58.5144C1 60.8407 1.86433 62.4755 3.22257 63.167L5.42537 64.2881Z"
+        d="M4.62539 63.9805C3.26715 63.289 2.40282 61.6542 2.40282 59.3279C2.40282 55.1643 5.17856 50.3735 8.59637 48.6349L31.5135 36.9591C33.0248 36.1886 34.4078 36.1392 35.4845 36.6874L33.2817 35.5662C32.205 35.018 30.822 35.0674 29.3107 35.8379L6.39356 47.5138C2.97575 49.2523 0.200012 54.0432 0.200012 58.2068C0.200012 60.5331 1.06434 62.1679 2.42258 62.8593L4.62539 63.9805Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.4"
         strokeLinecap="round"
         strokeLinejoin="round"
@@ -192,58 +198,58 @@ export function InitiativeVerticalStackIllustration({ className }: TIllustration
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M5.42538 64.2881C6.50209 64.8363 7.88502 64.7869 9.39637 64.0164L32.3135 52.3405C35.7362 50.5971 38.507 45.8062 38.507 41.6475C38.507 39.3212 37.6427 37.6864 36.2845 36.995C35.2078 36.4467 33.8248 36.4961 32.3135 37.2666L9.39637 48.9425C5.97362 50.686 3.20282 55.4768 3.20282 59.6355C3.20282 61.9618 4.06715 63.5966 5.42538 64.2881Z"
+        d="M4.6254 63.9804C5.70211 64.5287 7.08504 64.4793 8.59638 63.7088L31.5135 52.0329C34.9362 50.2894 37.707 45.4986 37.707 41.3399C37.707 39.0136 36.8427 37.3788 35.4845 36.6873C34.4078 36.1391 33.0248 36.1885 31.5135 36.959L8.59638 48.6349C5.17363 50.3783 2.40283 55.1692 2.40283 59.3279C2.40283 61.6542 3.26716 63.289 4.6254 63.9804Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.4"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
       <path
-        d="M12.5277 53.4267C12.6117 53.2983 12.7351 53.244 12.8142 53.2983C12.8932 53.3526 12.8981 53.5008 12.829 53.6391L12.8142 53.6687L9.8211 58.8399C9.73714 58.9831 9.60378 59.0523 9.51982 58.993C9.43586 58.9337 9.43586 58.7707 9.51982 58.6226L12.5129 53.4514L12.5277 53.4267Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M11.7277 53.1191C11.8117 52.9907 11.9351 52.9363 12.0142 52.9907C12.0932 53.045 12.0981 53.1932 12.029 53.3315L12.0142 53.3611L9.02111 58.5323C8.93715 58.6755 8.8038 58.7447 8.71983 58.6854C8.63587 58.6261 8.63587 58.4631 8.71983 58.315L11.7129 53.1438L11.7277 53.1191Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
-        d="M10.3101 55.1508C10.3101 54.9335 10.1669 54.8347 9.98905 54.9236C9.81124 55.0125 9.66801 55.2595 9.66801 55.4768C9.66801 55.6941 9.81124 55.7929 9.98905 55.704C10.1669 55.6151 10.3101 55.3681 10.3101 55.1508ZM10.7398 54.9335C10.7398 55.4373 10.4039 56.0151 9.98905 56.2275C9.57417 56.4399 9.23831 56.2028 9.23831 55.699C9.23831 55.1953 9.57417 54.6174 9.98905 54.405C10.4039 54.1926 10.7398 54.4297 10.7398 54.9335Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M9.51009 54.8432C9.51009 54.6259 9.36686 54.5271 9.18906 54.616C9.01125 54.7049 8.86802 54.9519 8.86802 55.1692C8.86802 55.3865 9.01125 55.4853 9.18906 55.3964C9.36686 55.3075 9.51009 55.0605 9.51009 54.8432ZM9.93979 54.6259C9.93979 55.1297 9.60394 55.7075 9.18906 55.9199C8.77418 56.1323 8.43832 55.8952 8.43832 55.3914C8.43832 54.8876 8.77418 54.3098 9.18906 54.0974C9.60394 53.885 9.93979 54.1221 9.93979 54.6259Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
-        d="M12.666 56.8159C12.666 56.5985 12.5227 56.4998 12.3449 56.5887C12.1671 56.6776 12.0239 56.9245 12.0239 57.1418C12.0239 57.3591 12.1671 57.4579 12.3449 57.369C12.5227 57.2801 12.666 57.0332 12.666 56.8159ZM13.0907 56.5985C13.0907 57.1023 12.7549 57.6802 12.34 57.8926C11.9251 58.1049 11.5893 57.8679 11.5893 57.3641C11.5893 56.8603 11.9251 56.2824 12.34 56.0701C12.7549 55.8577 13.0907 56.0948 13.0907 56.5985Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M11.866 56.5082C11.866 56.2909 11.7228 56.1921 11.5449 56.281C11.3671 56.3699 11.2239 56.6169 11.2239 56.8342C11.2239 57.0515 11.3671 57.1503 11.5449 57.0614C11.7228 56.9725 11.866 56.7256 11.866 56.5082ZM12.2907 56.2909C12.2907 56.7947 11.9549 57.3726 11.54 57.5849C11.1251 57.7973 10.7893 57.5602 10.7893 57.0565C10.7893 56.5527 11.1251 55.9748 11.54 55.7624C11.9549 55.5501 12.2907 55.7871 12.2907 56.2909Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
-        d="M11.0953 51.5356C11.0953 51.3973 11.1892 51.2393 11.3028 51.185C11.9696 50.8886 12.6166 50.7898 13.1944 50.9133C13.8316 51.0467 14.3502 51.4369 14.7107 52.0394C15.0663 52.642 15.2441 53.4421 15.2244 54.3459C15.2046 55.2547 14.9824 56.2376 14.5922 57.1958C14.1971 58.1539 13.6439 59.0528 12.9919 59.7986C12.335 60.5444 11.6041 61.1075 10.8682 61.4285C10.1322 61.7496 9.42101 61.8236 8.80857 61.636C8.2554 61.4631 7.79607 61.0877 7.47997 60.5346C7.42564 60.4407 7.4701 60.2678 7.57382 60.1543C7.67754 60.0407 7.80101 60.0308 7.85534 60.1246C8.1418 60.6136 8.54681 60.9445 9.04071 61.0976C9.59388 61.2655 10.231 61.2013 10.8928 60.9099C11.5547 60.6185 12.2165 60.1147 12.8043 59.443C13.392 58.7713 13.8908 57.9663 14.2464 57.1019C14.6021 56.2376 14.7947 55.3535 14.8144 54.5336C14.8342 53.7187 14.6761 52.9976 14.3551 52.4543C14.0341 51.911 13.5649 51.5603 12.9919 51.4418C12.4783 51.3331 11.9053 51.4171 11.3127 51.6789C11.1991 51.7283 11.1052 51.6641 11.1052 51.5258L11.0953 51.5356Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M10.2954 51.228C10.2954 51.0897 10.3892 50.9317 10.5028 50.8773C11.1696 50.581 11.8166 50.4822 12.3944 50.6057C13.0316 50.7391 13.5502 51.1292 13.9107 51.7318C14.2663 52.3344 14.4441 53.1345 14.4244 54.0383C14.4046 54.9471 14.1824 55.93 13.7922 56.8881C13.3971 57.8463 12.8439 58.7452 12.1919 59.491C11.5351 60.2368 10.8041 60.7999 10.0682 61.1209C9.33225 61.4419 8.62103 61.516 8.00859 61.3283C7.45541 61.1555 6.99608 60.7801 6.67999 60.2269C6.62566 60.1331 6.67011 59.9602 6.77383 59.8466C6.87755 59.733 7.00102 59.7232 7.05535 59.817C7.34182 60.306 7.74682 60.6369 8.24072 60.79C8.79389 60.9579 9.43103 60.8937 10.0929 60.6023C10.7547 60.3109 11.4165 59.8071 12.0043 59.1354C12.592 58.4637 13.0909 57.6586 13.4465 56.7943C13.8021 55.93 13.9947 55.0459 14.0145 54.226C14.0342 53.4111 13.8762 52.69 13.5551 52.1467C13.2341 51.6034 12.7649 51.2527 12.1919 51.1342C11.6783 51.0255 11.1054 51.1095 10.5127 51.3712C10.3991 51.4206 10.3052 51.3564 10.3052 51.2181L10.2954 51.228Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M29.4143 48.8783L21.0278 53.1505C20.3363 53.5012 19.7782 53.1061 19.7782 52.2665C19.7782 51.4268 20.3363 50.4637 21.0278 50.113L29.4143 45.8408C30.1057 45.4901 30.6639 45.8852 30.6639 46.7249C30.6639 47.5645 30.1057 48.5276 29.4143 48.8783Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M28.6143 48.5707L20.2278 52.8429C19.5364 53.1936 18.9782 52.7985 18.9782 51.9588C18.9782 51.1192 19.5364 50.1561 20.2278 49.8054L28.6143 45.5332C29.3058 45.1825 29.8639 45.5776 29.8639 46.4172C29.8639 47.2569 29.3058 48.22 28.6143 48.5707Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
-        d="M113.63 2.0262C114.79 1.43351 116.292 1.4829 117.927 2.3176L149.225 18.2657C152.92 20.1475 155.918 25.3187 155.918 29.8181C155.918 32.3272 154.984 34.0953 153.522 34.8411L155.725 33.72C157.192 32.9742 158.121 31.206 158.121 28.697C158.121 24.2025 155.123 19.0264 151.428 17.1446L120.125 1.19644C118.49 0.361744 116.993 0.312354 115.828 0.905038L113.625 2.0262H113.63Z"
+        d="M112.83 1.71858C113.99 1.1259 115.492 1.17529 117.127 2.00998L148.425 17.9581C152.12 19.8399 155.118 25.0111 155.118 29.5105C155.118 32.0196 154.184 33.7877 152.722 34.5335L154.925 33.4124C156.392 32.6666 157.321 30.8984 157.321 28.3894C157.321 23.8948 154.323 18.7187 150.628 16.837L119.325 0.888823C117.69 0.0541267 116.193 0.00473632 115.028 0.59742L112.825 1.71858H112.83Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.4"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
       <path
-        d="M113.63 2.02613C112.163 2.77193 111.234 4.5401 111.234 7.04913C111.234 11.5436 114.232 16.7198 117.927 18.6015L149.225 34.5497C150.86 35.3844 152.357 35.4338 153.522 34.8411C154.989 34.0953 155.918 32.3271 155.918 29.8181C155.918 25.3236 152.92 20.1474 149.225 18.2657L117.922 2.31753C116.287 1.48284 114.79 1.43345 113.625 2.02613H113.63Z"
+        d="M112.83 1.71851C111.363 2.46431 110.434 4.23248 110.434 6.74151C110.434 11.236 113.432 16.4121 117.127 18.2939L148.425 34.242C150.06 35.0767 151.557 35.1261 152.722 34.5335C154.189 33.7877 155.118 32.0195 155.118 29.5105C155.118 25.0159 152.12 19.8398 148.425 17.9581L117.122 2.00992C115.487 1.17522 113.99 1.12583 112.825 1.71851H112.83Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.4"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
       <path
-        d="M120.179 10.3487V15.0309C120.179 15.8063 120.693 16.7003 121.335 17.0263L127.494 20.1626C128.131 20.4885 128.649 20.1231 128.649 19.3476V14.6654C128.649 13.8949 128.131 12.996 127.494 12.67L126.338 12.0823V11.6131C126.338 10.8426 125.819 9.9437 125.182 9.61773L123.641 8.83242C123.004 8.50644 122.485 8.87687 122.485 9.64736V10.1166L121.33 9.52882C120.693 9.20285 120.174 9.57328 120.174 10.3438L120.179 10.3487ZM127.494 19.2291L126.338 18.6413V13.0207L127.494 13.6085C127.706 13.7171 127.879 14.0135 127.879 14.2752V18.9574C127.879 19.2143 127.706 19.3377 127.494 19.2291ZM123.261 11.4501L125.572 12.6256V18.2462L123.261 17.0707V11.4501ZM123.261 10.0425C123.261 9.78565 123.434 9.66218 123.646 9.77084L125.187 10.5561C125.399 10.6648 125.572 10.9611 125.572 11.2229V11.6921L123.261 10.5166V10.0474V10.0425ZM120.949 10.7389C120.949 10.4821 121.122 10.3586 121.335 10.4672L122.49 11.055V16.6756L121.335 16.0879C121.122 15.9792 120.949 15.6829 120.949 15.4211V10.7389Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M119.379 10.0411V14.7233C119.379 15.4987 119.893 16.3927 120.535 16.7187L126.694 19.8549C127.331 20.1809 127.849 19.8154 127.849 19.04V14.3578C127.849 13.5873 127.331 12.6884 126.694 12.3624L125.538 11.7747V11.3055C125.538 10.535 125.019 9.63609 124.382 9.31011L122.841 8.5248C122.204 8.19883 121.685 8.56925 121.685 9.33974V9.80895L120.53 9.22121C119.893 8.89523 119.374 9.26566 119.374 10.0361L119.379 10.0411ZM126.694 18.9215L125.538 18.3337V12.7131L126.694 13.3008C126.906 13.4095 127.079 13.7058 127.079 13.9676V18.6498C127.079 18.9067 126.906 19.0301 126.694 18.9215ZM122.461 11.1425L124.772 12.318V17.9386L122.461 16.7631V11.1425ZM122.461 9.73487C122.461 9.47804 122.634 9.35456 122.846 9.46322L124.387 10.2485C124.599 10.3572 124.772 10.6535 124.772 10.9153V11.3845L122.461 10.209V9.73981V9.73487ZM120.149 10.4313C120.149 10.1744 120.322 10.051 120.535 10.1596L121.69 10.7474V16.368L120.535 15.7802C120.322 15.6716 120.149 15.3752 120.149 15.1135V10.4313Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
-        d="M145.398 26.5392V27.9617C145.398 28.1098 145.353 28.2234 145.274 28.2876C145.195 28.3469 145.086 28.3519 144.978 28.2926L135.653 23.5412C135.421 23.4227 135.233 23.077 135.233 22.7757V20.5136L138.058 17.2538C138.216 17.1304 138.399 17.0612 138.621 17.1748C138.844 17.2884 139.026 17.5452 139.184 17.8317L141.629 23.7981L142.686 23.1856C142.844 23.0572 143.061 23.0523 143.284 23.1659C143.506 23.2795 143.723 23.5067 143.881 23.7981L145.403 26.5392H145.398Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M144.598 26.2316V27.6541C144.598 27.8022 144.553 27.9158 144.474 27.98C144.395 28.0393 144.286 28.0442 144.178 27.985L134.853 23.2336C134.621 23.1151 134.433 22.7694 134.433 22.4681V20.206L137.258 16.9462C137.416 16.8228 137.599 16.7536 137.821 16.8672C138.044 16.9808 138.226 17.2376 138.384 17.5241L140.829 23.4905L141.886 22.878C142.044 22.7496 142.261 22.7447 142.484 22.8583C142.706 22.9719 142.923 23.199 143.081 23.4905L144.603 26.2316H144.598Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
     </svg>
   );
diff --git a/packages/propel/src/empty-state/assets/vertical-stack/invalid-link.tsx b/packages/propel/src/empty-state/assets/vertical-stack/invalid-link.tsx
index d2563cc9c..c0004443d 100644
--- a/packages/propel/src/empty-state/assets/vertical-stack/invalid-link.tsx
+++ b/packages/propel/src/empty-state/assets/vertical-stack/invalid-link.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper";
 import type { TIllustrationAssetProps } from "../helper";
 
@@ -13,17 +19,17 @@ export function InvalidLinkVerticalStackIllustration({ className }: TIllustratio
     >
       <g opacity="0.2">
         <path
-          d="M0.5 113.76C0.5 115.893 2.09703 118.021 5.28541 119.652L46.3393 140.571C52.7217 143.821 63.0656 143.821 69.4479 140.571L155.715 96.6163C158.903 94.991 160.5 92.8636 160.5 90.7305V97.5417C160.5 99.6749 158.903 101.802 155.715 103.428L69.4479 147.382C63.0656 150.632 52.7217 150.632 46.3393 147.382L5.28541 126.463C2.09139 124.838 0.5 122.705 0.5 120.571V113.76Z"
+          d="M0.25 113.58C0.25 115.713 1.84703 117.84 5.03541 119.471L46.0893 140.39C52.4717 143.641 62.8156 143.641 69.1979 140.39L155.465 96.4359C158.653 94.8106 160.25 92.6832 160.25 90.55V97.3613C160.25 99.4944 158.653 101.622 155.465 103.247L69.1979 147.202C62.8156 150.452 52.4717 150.452 46.0893 147.202L5.03541 126.282C1.84139 124.657 0.25 122.524 0.25 120.391V113.58Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.5"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
         <path
-          d="M0.5 113.76C0.5 111.627 2.09703 109.499 5.28541 107.874L91.5521 63.9198C97.9345 60.6693 108.278 60.6693 114.661 63.9198L155.715 84.8389C158.909 86.4641 160.5 88.5972 160.5 90.7303C160.5 92.8634 158.903 94.9909 155.715 96.6161L69.4479 140.571C63.0656 143.821 52.7217 143.821 46.3393 140.571L5.28541 119.651C2.09139 118.026 0.5 115.893 0.5 113.76Z"
+          d="M0.25 113.58C0.25 111.446 1.84703 109.319 5.03541 107.694L91.3021 63.7394C97.6845 60.4889 108.028 60.4889 114.411 63.7394L155.465 84.6585C158.659 86.2837 160.25 88.4168 160.25 90.5499C160.25 92.683 158.653 94.8105 155.465 96.4357L69.1979 140.39C62.8156 143.641 52.4717 143.641 46.0893 140.39L5.03541 119.471C1.84139 117.846 0.25 115.713 0.25 113.58Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.5"
           strokeLinecap="round"
           strokeLinejoin="round"
@@ -31,32 +37,64 @@ export function InvalidLinkVerticalStackIllustration({ className }: TIllustratio
       </g>
       <g opacity="0.6">
         <path
-          d="M0.5 92.2428C0.5 94.3759 2.09703 96.5034 5.28541 98.1342L46.3393 119.053C52.7217 122.304 63.0656 122.304 69.4479 119.053L155.715 75.0989C158.903 73.4737 160.5 71.3462 160.5 69.2131V76.0244C160.5 78.1575 158.903 80.285 155.715 81.9102L69.4479 125.865C63.0656 129.115 52.7217 129.115 46.3393 125.865L5.28541 104.946C2.09139 103.32 0.5 101.187 0.5 99.0541V92.2428Z"
+          d="M0.25 92.0624C0.25 94.1955 1.84703 96.323 5.03541 97.9538L46.0893 118.873C52.4717 122.123 62.8156 122.123 69.1979 118.873L155.465 74.9185C158.653 73.2933 160.25 71.1658 160.25 69.0327V75.844C160.25 77.9771 158.653 80.1046 155.465 81.7298L69.1979 125.684C62.8156 128.935 52.4717 128.935 46.0893 125.684L5.03541 104.765C1.84139 103.14 0.25 101.007 0.25 98.8736V92.0624Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.5"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
         <path
-          d="M0.5 92.2427C0.5 90.1096 2.09703 87.9821 5.28541 86.3569L91.5521 42.4024C97.9345 39.152 108.278 39.152 114.661 42.4024L155.715 63.3216C158.909 64.9468 160.5 67.0799 160.5 69.213C160.5 71.3461 158.903 73.4736 155.715 75.0988L69.4479 119.053C63.0656 122.304 52.7217 122.304 46.3393 119.053L5.28541 98.1341C2.09139 96.5089 0.5 94.3758 0.5 92.2427Z"
+          d="M0.25 92.0623C0.25 89.9291 1.84703 87.8017 5.03541 86.1765L91.3021 42.222C97.6845 38.9716 108.028 38.9716 114.411 42.222L155.465 63.1411C158.659 64.7664 160.25 66.8995 160.25 69.0326C160.25 71.1657 158.653 73.2932 155.465 74.9184L69.1979 118.873C62.8156 122.123 52.4717 122.123 46.0893 118.873L5.03541 97.9537C1.84139 96.3285 0.25 94.1954 0.25 92.0623Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.5"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
       </g>
       <path
-        d="M0.5 70.7255C0.5 72.8586 2.09703 74.986 5.28541 76.6169L46.3393 97.536C52.7217 100.786 63.0656 100.786 69.4479 97.536L155.715 53.5816C158.903 51.9564 160.5 49.8289 160.5 47.6958V54.5071C160.5 56.6402 158.903 58.7676 155.715 60.3929L69.4479 104.347C63.0656 107.598 52.7217 107.598 46.3393 104.347L5.28541 83.4282C2.09139 81.8029 0.5 79.6698 0.5 77.5367V70.7255Z"
+        d="M0.25 70.545C0.25 72.6782 1.84703 74.8056 5.03541 76.4365L46.0893 97.3556C52.4717 100.606 62.8156 100.606 69.1979 97.3556L155.465 53.4012C158.653 51.776 160.25 49.6485 160.25 47.5154V54.3267C160.25 56.4598 158.653 58.5872 155.465 60.2125L69.1979 104.167C62.8156 107.417 52.4717 107.417 46.0893 104.167L5.03541 83.2478C1.84139 81.6225 0.25 79.4894 0.25 77.3563V70.545Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.5"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
       <path
-        d="M0.5 70.7253C0.5 68.5922 2.09703 66.4648 5.28541 64.8395L91.5521 20.8851C97.9345 17.6347 108.278 17.6347 114.661 20.8851L155.715 41.8042C158.909 43.4295 160.5 45.5626 160.5 47.6957C160.5 49.8288 158.903 51.9562 155.715 53.5815L69.4479 97.5359C63.0656 100.786 52.7217 100.786 46.3393 97.5359L5.28541 76.6168C2.09139 74.9916 0.5 72.8584 0.5 70.7253Z"
+        d="M0.25 70.5449C0.25 68.4118 1.84703 66.2843 5.03541 64.6591L91.3021 20.7047C97.6845 17.4542 108.028 17.4542 114.411 20.7047L155.465 41.6238C158.659 43.249 160.25 45.3821 160.25 47.5153C160.25 49.6484 158.653 51.7758 155.465 53.4011L69.1979 97.3555C62.8156 100.606 52.4717 100.606 46.0893 97.3555L5.03541 76.4364C1.84139 74.8111 0.25 72.678 0.25 70.5449Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M110.33 39.7446C110.014 39.7446 109.709 39.6881 109.433 39.5753C109.371 39.5527 109.314 39.5245 109.258 39.4963L104.23 36.9343C102.627 36.116 102.3 33.6218 103.468 31.1275C105.082 27.6852 105.974 23.9889 105.974 20.7215C105.974 17.7307 105.257 15.2364 103.903 13.487C103.835 13.487 103.761 13.487 103.688 13.487C102.215 13.487 100.641 13.9046 99.0156 14.7342L92.6163 17.9959C92.1084 18.2555 91.6062 18.3853 91.1265 18.3853C90.7371 18.3853 90.3759 18.3006 90.0486 18.1313L85.0206 15.5694C84.1008 15.101 83.5703 14.0401 83.5703 12.6631C83.5703 10.2874 85.1109 7.64074 87.0804 6.63626L93.4797 3.37452C96.1207 2.03145 98.6939 1.34863 101.126 1.34863C102.994 1.34863 104.738 1.75494 106.301 2.55062L111.329 5.11261C115.9 7.44323 118.524 12.8776 118.524 20.0218C118.524 25.1288 117.141 30.8848 114.63 36.2402C113.97 37.651 112.943 38.7909 111.814 39.3665C111.306 39.6261 110.81 39.7559 110.33 39.7559V39.7446Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+      />
+      <path
+        d="M101.132 1.90744C102.926 1.90744 104.58 2.29681 106.053 3.04735L111.081 5.60934C115.291 7.75373 117.965 12.8269 117.965 20.0163C117.965 25.0387 116.6 30.7157 114.122 35.992C113.496 37.3294 112.531 38.3565 111.56 38.8531C111.143 39.0675 110.725 39.1804 110.33 39.1804C110.093 39.1804 109.862 39.1409 109.642 39.0506C109.597 39.0337 109.551 39.0111 109.506 38.9885L104.478 36.4265C103.18 35.7663 102.949 33.5485 103.976 31.359C105.624 27.8433 106.538 24.0624 106.538 20.7104C106.538 17.3584 105.663 14.7117 104.185 12.9229C104.021 12.9116 103.857 12.9059 103.694 12.9059C102.176 12.9059 100.511 13.3235 98.7674 14.2151L92.3681 17.4769C91.9279 17.7026 91.5159 17.8042 91.1322 17.8042C90.8331 17.8042 90.5566 17.7365 90.3083 17.6123L85.2803 15.0503C84.5805 14.6948 84.1403 13.8483 84.1403 12.652C84.1403 10.5019 85.5737 8.03025 87.34 7.12735L93.7393 3.86561C96.3578 2.53383 98.852 1.90179 101.132 1.90179M101.132 0.778809C98.6094 0.778809 95.9458 1.4842 93.2258 2.86677L86.8265 6.12851C84.6877 7.21764 83.0117 10.0844 83.0117 12.6576C83.0117 14.2546 83.655 15.4961 84.7724 16.0661L89.8004 18.6281C90.2067 18.8369 90.6582 18.9441 91.1378 18.9441C91.7078 18.9441 92.2947 18.7917 92.8872 18.4926L99.2865 15.2309C100.805 14.4578 102.266 14.0571 103.626 14.0458C104.8 15.6823 105.415 17.9735 105.415 20.716C105.415 23.9044 104.546 27.516 102.96 30.885C101.657 33.6614 102.097 36.4773 103.976 37.4367L109.004 39.9986C109.077 40.0382 109.151 40.072 109.23 40.1002C109.58 40.2413 109.952 40.309 110.336 40.309C110.906 40.309 111.493 40.1567 112.08 39.8576C113.315 39.2255 114.438 37.9897 115.149 36.4717C117.694 31.0486 119.094 25.2023 119.094 20.0163C119.094 12.652 116.357 7.03705 111.589 4.60486L106.561 2.04287C104.913 1.20204 103.084 0.778809 101.126 0.778809H101.132Z"
+        fill="var(--illustration-stroke-tertiary)"
+      />
+      <path
+        d="M59.3729 71.9951C57.505 71.9951 55.7613 71.5888 54.1982 70.7931L49.1701 68.2311C44.5992 65.9005 41.9751 60.4661 41.9751 53.3219C41.9751 40.2467 50.7276 25.1513 61.4834 19.6718C61.9913 19.4123 62.4936 19.2825 62.9732 19.2825C63.3626 19.2825 63.7238 19.3671 64.0511 19.5364L69.0791 22.0984C69.999 22.5668 70.5294 23.6277 70.5294 25.0046C70.5294 27.3804 68.9888 30.027 67.0194 31.0315C60.1291 34.5415 54.5255 44.2308 54.5255 52.6278C54.5255 55.6187 55.2421 58.1129 56.5965 59.8623C56.6642 59.8623 56.7376 59.8623 56.8109 59.8623C58.2838 59.8623 59.8582 59.4447 61.4834 58.6152L67.8828 55.3534C68.3907 55.0939 68.8929 54.9641 69.3726 54.9641C69.762 54.9641 70.1231 55.0487 70.4504 55.218L75.4784 57.78C76.3983 58.2484 76.9287 59.3093 76.9287 60.6806C76.9287 63.0563 75.3882 65.703 73.4187 66.7074L67.0194 69.9692C64.3784 71.3122 61.8051 71.9951 59.3729 71.9951Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+      />
+      <path
+        d="M62.9731 19.8525C63.2722 19.8525 63.5487 19.9203 63.797 20.0444L68.825 22.6064C69.5248 22.9619 69.9706 23.8084 69.9706 25.0047C69.9706 27.1548 68.5372 29.6265 66.7709 30.5294C59.7114 34.124 53.9723 44.039 53.9723 52.6279C53.9723 55.9743 54.847 58.6266 56.3255 60.4154C56.4892 60.4267 56.6528 60.4324 56.8165 60.4324C58.3345 60.4324 59.9992 60.0148 61.7429 59.1232L68.1422 55.8614C68.5824 55.6357 68.9943 55.5341 69.3781 55.5341C69.6771 55.5341 69.9537 55.6018 70.202 55.726L75.23 58.288C75.9298 58.6435 76.3756 59.49 76.3756 60.6863C76.3756 62.8363 74.9422 65.308 73.1759 66.2109L66.7766 69.4727C64.1582 70.8045 61.6639 71.4365 59.3841 71.4365C57.5896 71.4365 55.9361 71.0471 54.4632 70.2966L49.4352 67.7346C45.2254 65.5902 42.5506 60.517 42.5506 53.3277C42.5506 40.4444 51.162 25.5747 61.7486 20.1798C62.1887 19.9541 62.6007 19.8525 62.9844 19.8525M62.9731 18.7239C62.4031 18.7239 61.8163 18.8763 61.2237 19.1754C50.2986 24.7451 41.4106 40.0606 41.4106 53.3277C41.4106 60.692 44.1476 66.3069 48.9161 68.7391L53.9441 71.3011C55.5919 72.1419 57.4203 72.5651 59.3784 72.5651C61.9009 72.5651 64.5645 71.8597 67.2845 70.4772L73.6838 67.2154C75.8225 66.1263 77.4985 63.2539 77.4985 60.6863C77.4985 59.0893 76.8552 57.8478 75.7379 57.2779L70.7099 54.7159C70.3036 54.5071 69.8521 54.3999 69.3724 54.3999C68.8025 54.3999 68.2156 54.5522 67.623 54.8513L61.2237 58.113C59.7057 58.8861 58.2442 59.2868 56.8842 59.2981C55.7104 57.6616 55.0953 55.3705 55.0953 52.6279C55.0953 44.4228 60.5635 34.9592 67.2788 31.5338C69.4176 30.4447 71.0936 27.5724 71.0936 25.0047C71.0936 23.4077 70.4503 22.1662 69.3329 21.5963L64.3049 19.0343C63.8986 18.8255 63.4471 18.7183 62.9675 18.7183L62.9731 18.7239Z"
+        fill="var(--illustration-stroke-tertiary)"
+      />
+      <path
+        d="M68.7349 49.259C68.3455 49.259 67.9843 49.1744 67.657 49.0051L62.629 46.4431C61.7092 45.9747 61.1787 44.9138 61.1787 43.5369C61.1787 41.1611 62.7193 38.5145 64.6887 37.51L77.4874 30.9865C77.9953 30.727 78.4975 30.5972 78.9772 30.5972C79.3665 30.5972 79.7277 30.6818 80.055 30.8511L85.0831 33.4131C86.0029 33.8815 86.5333 34.9424 86.5333 36.3193C86.5333 38.6951 84.9928 41.3417 83.0233 42.3462L70.2247 48.8697C69.7168 49.1293 69.2146 49.259 68.7349 49.259Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+      />
+      <path
+        d="M78.9717 31.167C79.2707 31.167 79.5473 31.2347 79.7956 31.3588L84.8236 33.9208C85.5234 34.2763 85.9635 35.1228 85.9635 36.3191C85.9635 38.4692 84.5302 40.9409 82.7639 41.8438L69.9652 48.3673C69.5251 48.593 69.1131 48.6946 68.7294 48.6946C68.4303 48.6946 68.1538 48.6268 67.9055 48.5027L62.8774 45.9407C62.1777 45.5852 61.7375 44.7387 61.7375 43.5424C61.7375 41.3923 63.1709 38.9206 64.9372 38.0177L77.7358 31.4943C78.176 31.2685 78.5879 31.167 78.9717 31.167ZM78.9717 30.0383C78.4017 30.0383 77.8148 30.1907 77.2223 30.4898L64.4237 37.0133C62.2849 38.1024 60.6089 40.9691 60.6089 43.5424C60.6089 45.1394 61.2522 46.3809 62.3695 46.9508L67.3976 49.5128C67.8039 49.7216 68.2554 49.8288 68.735 49.8288C69.305 49.8288 69.8919 49.6765 70.4844 49.3774L83.283 42.8539C85.4218 41.7648 87.0978 38.8981 87.0978 36.3248C87.0978 34.7278 86.4545 33.4863 85.3371 32.9163L80.3091 30.3543C79.9028 30.1455 79.4513 30.0383 78.9717 30.0383Z"
+        fill="var(--illustration-stroke-tertiary)"
+      />
+      <path
+        d="M106.972 13.6731C109.777 15.1008 111.566 18.4867 111.566 23.2777C111.566 26.6297 110.657 30.4106 109.004 33.9263C107.977 36.1158 108.214 38.3336 109.506 38.9939L104.478 36.4319C103.18 35.7716 102.949 33.5539 103.976 31.3643C105.624 27.8486 106.538 24.0677 106.538 20.7157C106.538 15.9247 104.749 12.5388 101.944 11.1111L106.972 13.6731Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
         stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
         strokeWidth="0.5"
@@ -64,87 +102,7 @@ export function InvalidLinkVerticalStackIllustration({ className }: TIllustratio
         strokeLinejoin="round"
       />
       <path
-        d="M110.58 39.925C110.264 39.925 109.959 39.8686 109.683 39.7557C109.621 39.7331 109.564 39.7049 109.508 39.6767L104.48 37.1147C102.877 36.2965 102.55 33.8022 103.718 31.3079C105.332 27.8656 106.224 24.1693 106.224 20.902C106.224 17.9111 105.507 15.4168 104.153 13.6675C104.085 13.6675 104.011 13.6675 103.938 13.6675C102.465 13.6675 100.891 14.085 99.2656 14.9146L92.8663 18.1763C92.3584 18.4359 91.8562 18.5657 91.3765 18.5657C90.9871 18.5657 90.6259 18.4811 90.2986 18.3118L85.2706 15.7498C84.3508 15.2814 83.8203 14.2205 83.8203 12.8436C83.8203 10.4678 85.3609 7.82116 87.3304 6.81668L93.7297 3.55494C96.3707 2.21187 98.9439 1.52905 101.376 1.52905C103.244 1.52905 104.988 1.93536 106.551 2.73104L111.579 5.29303C116.15 7.62365 118.774 13.058 118.774 20.2022C118.774 25.3093 117.391 31.0653 114.88 36.4206C114.22 37.8314 113.193 38.9713 112.064 39.5469C111.556 39.8065 111.06 39.9363 110.58 39.9363V39.925Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-      />
-      <path
-        d="M101.382 2.08786C103.176 2.08786 104.83 2.47723 106.303 3.22777L111.331 5.78976C115.541 7.93415 118.215 13.0073 118.215 20.1967C118.215 25.2191 116.85 30.8961 114.372 36.1724C113.746 37.5099 112.781 38.5369 111.81 39.0335C111.393 39.248 110.975 39.3608 110.58 39.3608C110.343 39.3608 110.112 39.3213 109.892 39.231C109.847 39.2141 109.801 39.1915 109.756 39.1689L104.728 36.607C103.43 35.9467 103.199 33.729 104.226 31.5394C105.874 28.0237 106.788 24.2428 106.788 20.8908C106.788 17.5388 105.913 14.8921 104.435 13.1033C104.271 13.092 104.107 13.0863 103.944 13.0863C102.426 13.0863 100.761 13.5039 99.0174 14.3956L92.6181 17.6573C92.1779 17.883 91.7659 17.9846 91.3822 17.9846C91.0831 17.9846 90.8066 17.9169 90.5583 17.7927L85.5303 15.2307C84.8305 14.8752 84.3903 14.0287 84.3903 12.8324C84.3903 10.6824 85.8237 8.21067 87.59 7.30777L93.9893 4.04603C96.6078 2.71425 99.102 2.08221 101.382 2.08221M101.382 0.959229C98.8594 0.959229 96.1958 1.66462 93.4758 3.04719L87.0765 6.30893C84.9377 7.39806 83.2617 10.2648 83.2617 12.838C83.2617 14.4351 83.905 15.6765 85.0224 16.2465L90.0504 18.8085C90.4567 19.0173 90.9082 19.1245 91.3878 19.1245C91.9578 19.1245 92.5447 18.9721 93.1372 18.6731L99.5365 15.4113C101.055 14.6382 102.516 14.2375 103.876 14.2263C105.05 15.8628 105.665 18.1539 105.665 20.8965C105.665 24.0848 104.796 27.6964 103.21 31.0654C101.907 33.8418 102.347 36.6577 104.226 37.6171L109.254 40.1791C109.327 40.2186 109.401 40.2524 109.48 40.2806C109.83 40.4217 110.202 40.4894 110.586 40.4894C111.156 40.4894 111.743 40.3371 112.33 40.038C113.565 39.406 114.688 38.1701 115.399 36.6521C117.944 31.229 119.344 25.3828 119.344 20.1967C119.344 12.8324 116.607 7.21747 111.839 4.78528L106.811 2.22329C105.163 1.38246 103.334 0.959229 101.376 0.959229H101.382Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
-      />
-      <path
-        d="M59.6229 72.1755C57.755 72.1755 56.0113 71.7692 54.4482 70.9735L49.4201 68.4115C44.8492 66.0809 42.2251 60.6465 42.2251 53.5023C42.2251 40.4272 50.9776 25.3318 61.7334 19.8523C62.2413 19.5927 62.7436 19.4629 63.2232 19.4629C63.6126 19.4629 63.9738 19.5475 64.3011 19.7168L69.3291 22.2788C70.249 22.7472 70.7794 23.8081 70.7794 25.185C70.7794 27.5608 69.2388 30.2074 67.2694 31.2119C60.3791 34.7219 54.7755 44.4112 54.7755 52.8082C54.7755 55.7991 55.4921 58.2934 56.8465 60.0427C56.9142 60.0427 56.9876 60.0427 57.0609 60.0427C58.5338 60.0427 60.1082 59.6251 61.7334 58.7956L68.1328 55.5339C68.6407 55.2743 69.1429 55.1445 69.6226 55.1445C70.012 55.1445 70.3731 55.2291 70.7004 55.3984L75.7284 57.9604C76.6483 58.4288 77.1787 59.4897 77.1787 60.861C77.1787 63.2367 75.6382 65.8834 73.6687 66.8879L67.2694 70.1496C64.6284 71.4927 62.0551 72.1755 59.6229 72.1755Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-      />
-      <path
-        d="M63.2231 20.033C63.5222 20.033 63.7987 20.1007 64.047 20.2248L69.075 22.7868C69.7748 23.1423 70.2206 23.9888 70.2206 25.1851C70.2206 27.3352 68.7872 29.8069 67.0209 30.7098C59.9614 34.3045 54.2223 44.2195 54.2223 52.8083C54.2223 56.1547 55.097 58.807 56.5755 60.5959C56.7392 60.6071 56.9028 60.6128 57.0665 60.6128C58.5845 60.6128 60.2492 60.1952 61.9929 59.3036L68.3922 56.0419C68.8324 55.8161 69.2443 55.7145 69.6281 55.7145C69.9271 55.7145 70.2037 55.7823 70.452 55.9064L75.48 58.4684C76.1798 58.8239 76.6256 59.6704 76.6256 60.8667C76.6256 63.0168 75.1922 65.4885 73.4259 66.3914L67.0266 69.6531C64.4082 70.9849 61.9139 71.6169 59.6341 71.6169C57.8396 71.6169 56.1861 71.2275 54.7132 70.477L49.6852 67.915C45.4754 65.7706 42.8006 60.6974 42.8006 53.5081C42.8006 40.6248 51.412 25.7551 61.9986 20.3603C62.4387 20.1345 62.8507 20.033 63.2344 20.033M63.2231 18.9043C62.6531 18.9043 62.0663 19.0567 61.4737 19.3558C50.5486 24.9256 41.6606 40.241 41.6606 53.5081C41.6606 60.8724 44.3976 66.4873 49.1661 68.9195L54.1941 71.4815C55.8419 72.3223 57.6703 72.7455 59.6284 72.7455C62.1509 72.7455 64.8145 72.0402 67.5345 70.6576L73.9338 67.3959C76.0725 66.3067 77.7485 63.4344 77.7485 60.8667C77.7485 59.2697 77.1052 58.0282 75.9879 57.4583L70.9599 54.8963C70.5536 54.6875 70.1021 54.5803 69.6224 54.5803C69.0525 54.5803 68.4656 54.7326 67.873 55.0317L61.4737 58.2935C59.9557 59.0666 58.4942 59.4672 57.1342 59.4785C55.9604 57.842 55.3453 55.5509 55.3453 52.8083C55.3453 44.6032 60.8135 35.1396 67.5288 31.7143C69.6676 30.6251 71.3436 27.7528 71.3436 25.1851C71.3436 23.5881 70.7003 22.3466 69.5829 21.7767L64.5549 19.2147C64.1486 19.0059 63.6971 18.8987 63.2175 18.8987L63.2231 18.9043Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
-      />
-      <path
-        d="M68.9849 49.4395C68.5955 49.4395 68.2343 49.3548 67.907 49.1855L62.879 46.6235C61.9592 46.1552 61.4287 45.0942 61.4287 43.7173C61.4287 41.3416 62.9693 38.6949 64.9387 37.6904L77.7374 31.167C78.2453 30.9074 78.7475 30.7776 79.2272 30.7776C79.6165 30.7776 79.9777 30.8622 80.305 31.0315L85.3331 33.5935C86.2529 34.0619 86.7833 35.1228 86.7833 36.4997C86.7833 38.8755 85.2428 41.5221 83.2733 42.5266L70.4747 49.0501C69.9668 49.3097 69.4646 49.4395 68.9849 49.4395Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-      />
-      <path
-        d="M79.2217 31.3474C79.5207 31.3474 79.7973 31.4151 80.0456 31.5392L85.0736 34.1012C85.7734 34.4567 86.2135 35.3032 86.2135 36.4996C86.2135 38.6496 84.7802 41.1213 83.0139 42.0242L70.2152 48.5477C69.7751 48.7734 69.3631 48.875 68.9794 48.875C68.6803 48.875 68.4038 48.8073 68.1555 48.6831L63.1274 46.1211C62.4277 45.7656 61.9875 44.9191 61.9875 43.7228C61.9875 41.5728 63.4209 39.1011 65.1872 38.1982L77.9858 31.6747C78.426 31.449 78.8379 31.3474 79.2217 31.3474ZM79.2217 30.2188C78.6517 30.2188 78.0648 30.3711 77.4723 30.6702L64.6737 37.1937C62.5349 38.2828 60.8589 41.1495 60.8589 43.7228C60.8589 45.3198 61.5022 46.5613 62.6195 47.1312L67.6476 49.6932C68.0539 49.902 68.5054 50.0093 68.985 50.0093C69.555 50.0093 70.1419 49.8569 70.7344 49.5578L83.533 43.0343C85.6718 41.9452 87.3478 39.0785 87.3478 36.5052C87.3478 34.9082 86.7045 33.6667 85.5871 33.0968L80.5591 30.5348C80.1528 30.326 79.7013 30.2188 79.2217 30.2188Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
-      />
-      <path
-        d="M107.222 13.8535C110.027 15.2812 111.816 18.6671 111.816 23.4581C111.816 26.8101 110.907 30.5911 109.254 34.1067C108.227 36.2963 108.464 38.514 109.756 39.1743L104.728 36.6123C103.43 35.952 103.199 33.7343 104.226 31.5447C105.874 28.0291 106.788 24.2482 106.788 20.8961C106.788 16.1051 104.999 12.7192 102.194 11.2915L107.222 13.8535Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
-        strokeWidth="0.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <path
-        d="M111.331 5.79515C107.995 4.09657 103.701 4.232 99.0172 6.61905L92.6178 9.88078C90.8515 10.7837 89.4182 13.2554 89.4182 15.4054C89.4182 16.6018 89.864 17.4482 90.5637 17.8038L85.5357 15.2418C84.8359 14.8863 84.3901 14.0398 84.3901 12.8434C84.3901 10.6934 85.8235 8.2217 87.5898 7.3188L93.9891 4.05706C98.6729 1.67001 102.967 1.53458 106.302 3.23316L111.331 5.79515Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
-        strokeWidth="0.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <path
-        d="M111.331 5.7952C115.54 7.9396 118.215 13.0128 118.215 20.2021C118.215 25.2245 116.85 30.9015 114.372 36.1779C113.746 37.5153 112.781 38.5424 111.81 39.039C111.144 39.3775 110.467 39.4678 109.892 39.2365C109.846 39.2195 109.801 39.197 109.756 39.1744C108.458 38.5141 108.227 36.2964 109.254 34.1068C110.902 30.5912 111.816 26.8103 111.816 23.4582C111.816 18.6672 110.027 15.2813 107.222 13.8536C104.999 12.7193 102.138 12.8153 99.0172 14.401L92.6179 17.6627C91.8335 18.0634 91.1168 18.086 90.5582 17.7982C89.8584 17.4427 89.4126 16.5962 89.4126 15.3998C89.4126 13.2498 90.846 10.7781 92.6123 9.8752L99.0116 6.61346C103.695 4.22641 107.99 4.09097 111.325 5.78956L111.331 5.7952Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
-        strokeWidth="0.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <path
-        d="M75.474 58.4626C74.9153 58.1805 74.1986 58.2031 73.4142 58.5981L67.0149 61.8598C63.8943 63.4512 61.0332 63.5415 58.8098 62.4072L53.7817 59.8452C56.0051 60.9795 58.8662 60.8835 61.9869 59.2978L68.3862 56.0361C69.1706 55.6354 69.8872 55.6129 70.4459 55.9007L75.474 58.4626Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
-        strokeWidth="0.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <path
-        d="M69.0748 22.7869C68.5162 22.5047 67.7995 22.5273 67.0151 22.9223C56.4286 28.3171 47.8171 43.1868 47.8171 56.0701C47.8171 63.2538 50.4976 68.3327 54.7018 70.4771L49.6737 67.9151C45.4639 65.7707 42.7891 60.6975 42.7891 53.5081C42.7891 40.6248 51.4005 25.7552 61.987 20.3603C62.7714 19.9596 63.4881 19.9371 64.0468 20.2249L69.0748 22.7869Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
-        strokeWidth="0.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <path
-        d="M69.075 22.7869C69.7748 23.1424 70.2206 23.9889 70.2206 25.1852C70.2206 27.3353 68.7872 29.807 67.0209 30.7099C59.9613 34.3045 54.2223 44.2195 54.2223 52.8084C54.2223 57.5994 56.0112 60.9853 58.8158 62.413C61.0392 63.5473 63.9003 63.4514 67.0209 61.8657L73.4202 58.6039C74.2046 58.2033 74.9213 58.1807 75.48 58.4685C76.1798 58.824 76.6256 59.6705 76.6256 60.8668C76.6256 63.0168 75.1922 65.4885 73.4259 66.3915L67.0266 69.6532C62.3428 72.0402 58.0483 72.1757 54.7132 70.4771C50.5034 68.3327 47.8286 63.2595 47.8286 56.0701C47.8286 43.1868 56.44 28.3172 67.0266 22.9223C67.811 22.5217 68.5277 22.4991 69.0863 22.7869H69.075Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
-        strokeWidth="0.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <path
-        d="M85.0729 34.1013C84.5143 33.8192 83.7976 33.8417 83.0132 34.2368L70.2145 40.7602C68.4482 41.6631 67.0149 44.1348 67.0149 46.2849C67.0149 47.4812 67.4607 48.3277 68.1604 48.6832L63.1324 46.1212C62.4326 45.7657 61.9868 44.9192 61.9868 43.7229C61.9868 41.5728 63.4202 39.1011 65.1865 38.1982L77.9851 31.6748C78.7695 31.2741 79.4862 31.2515 80.0449 31.5393L85.0729 34.1013Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-        strokeWidth="0.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <path
-        d="M85.0727 34.1013C85.7725 34.4569 86.2182 35.3033 86.2182 36.4997C86.2182 38.6497 84.7849 41.1214 83.0186 42.0243L70.2199 48.5478C69.4356 48.9485 68.7189 48.971 68.1602 48.6832C67.4604 48.3277 67.0146 47.4812 67.0146 46.2849C67.0146 44.1348 68.448 41.6632 70.2143 40.7602L83.0129 34.2368C83.7973 33.8361 84.514 33.8135 85.0727 34.1013Z"
+        d="M111.081 5.61473C107.745 3.91615 103.451 4.05158 98.7672 6.43863L92.3678 9.70037C90.6015 10.6033 89.1682 13.075 89.1682 15.225C89.1682 16.4213 89.614 17.2678 90.3137 17.6233L85.2857 15.0614C84.5859 14.7058 84.1401 13.8594 84.1401 12.663C84.1401 10.513 85.5735 8.04128 87.3398 7.13838L93.7391 3.87664C98.4229 1.48959 102.717 1.35416 106.052 3.05274L111.081 5.61473Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
         stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
         strokeWidth="0.5"
@@ -152,23 +110,71 @@ export function InvalidLinkVerticalStackIllustration({ className }: TIllustratio
         strokeLinejoin="round"
       />
       <path
-        d="M111.269 58.1467C110.885 58.1467 110.518 58.062 110.191 57.8927L105.163 55.3307C105.067 55.28 104.977 55.2292 104.886 55.1614L40.8876 9.89216C39.3808 8.82561 39.3131 6.08304 40.7239 3.6452C41.7453 1.88454 43.3085 0.744629 44.7136 0.744629C45.0974 0.744629 45.4585 0.829275 45.7858 0.99857L50.8139 3.56056C50.9098 3.61135 51.0001 3.66778 51.0904 3.72985L115.089 48.9991C116.596 50.0657 116.664 52.8083 115.253 55.2461C114.593 56.3804 113.707 57.2776 112.759 57.7573C112.251 58.0169 111.748 58.1467 111.269 58.1467Z"
+        d="M111.081 5.61478C115.29 7.75918 117.965 12.8324 117.965 20.0217C117.965 25.0441 116.6 30.7211 114.122 35.9975C113.496 37.3349 112.531 38.3619 111.56 38.8585C110.894 39.1971 110.217 39.2874 109.642 39.056C109.596 39.0391 109.551 39.0165 109.506 38.994C108.208 38.3337 107.977 36.116 109.004 33.9264C110.652 30.4108 111.566 26.6298 111.566 23.2778C111.566 18.4868 109.777 15.1009 106.972 13.6732C104.749 12.5389 101.888 12.6349 98.7672 14.2206L92.3679 17.4823C91.5835 17.883 90.8668 17.9055 90.3082 17.6177C89.6084 17.2622 89.1626 16.4158 89.1626 15.2194C89.1626 13.0694 90.596 10.5977 92.3623 9.69478L98.7616 6.43304C103.445 4.04599 107.74 3.91055 111.075 5.60914L111.081 5.61478Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-      />
-      <path
-        d="M44.7138 1.30905C45.0016 1.30905 45.2781 1.37112 45.532 1.50092L50.56 4.0629C50.6334 4.09676 50.7011 4.14191 50.7688 4.18705L114.768 49.4563C116.021 50.3423 116.021 52.8027 114.768 54.964C114.141 56.0419 113.323 56.8432 112.505 57.2552C112.082 57.4696 111.664 57.5825 111.269 57.5825C110.976 57.5825 110.699 57.5204 110.451 57.3906L105.423 54.8286C105.349 54.7948 105.282 54.7496 105.214 54.7045L41.215 9.43517C39.9622 8.5492 39.9622 6.08879 41.215 3.92747C42.1631 2.29095 43.5513 1.30905 44.7138 1.30905ZM44.7138 0.18042C43.0885 0.18042 41.373 1.39934 40.2388 3.36315C38.6812 6.05493 38.8223 9.1248 40.566 10.355L104.565 55.6243C104.678 55.7033 104.791 55.771 104.909 55.8331L109.937 58.3951C110.343 58.6039 110.795 58.7111 111.269 58.7111C111.839 58.7111 112.431 58.5587 113.018 58.2596C114.062 57.7292 115.033 56.7586 115.744 55.5284C117.301 52.8366 117.16 49.7667 115.417 48.5365L51.4178 3.26722C51.305 3.18821 51.1921 3.1205 51.0736 3.05842L46.0455 0.496436C45.6392 0.287639 45.1934 0.186063 44.7138 0.186063V0.18042Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
-      />
-      <path
-        d="M50.56 4.06297C49.3016 3.41966 47.4281 4.45235 46.243 6.49517C44.9902 8.65085 44.9902 11.1169 46.243 12.0029L110.242 57.2722C110.31 57.3173 110.377 57.3625 110.451 57.3963L105.423 54.8343C105.349 54.8005 105.282 54.7553 105.214 54.7102L41.215 9.44089C39.9622 8.55492 39.9622 6.09451 41.215 3.93318C42.4 1.89036 44.2736 0.857669 45.532 1.50099L50.56 4.06297Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
         stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
         strokeWidth="0.5"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
       <path
-        d="M50.5598 4.06278C50.6332 4.09664 50.7009 4.14179 50.7686 4.18693L114.768 49.4562C116.02 50.3422 116.02 52.8026 114.768 54.9639C114.141 56.0418 113.323 56.8431 112.505 57.255C111.771 57.6275 111.043 57.6952 110.451 57.3905C110.377 57.3566 110.309 57.3115 110.242 57.2663L46.2428 11.997C44.99 11.1111 44.99 8.65066 46.2428 6.48934C47.4279 4.44652 49.3014 3.41382 50.5598 4.05714V4.06278Z"
+        d="M75.224 58.2822C74.6653 58.0001 73.9486 58.0226 73.1642 58.4177L66.7649 61.6794C63.6443 63.2708 60.7832 63.361 58.5598 62.2268L53.5317 59.6648C55.7551 60.7991 58.6162 60.7031 61.7369 59.1174L68.1362 55.8557C68.9206 55.455 69.6372 55.4324 70.1959 55.7202L75.224 58.2822Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M68.8248 22.6064C68.2662 22.3243 67.5495 22.3469 66.7651 22.7419C56.1786 28.1367 47.5671 43.0064 47.5671 55.8897C47.5671 63.0734 50.2476 68.1522 54.4518 70.2966L49.4237 67.7347C45.2139 65.5903 42.5391 60.5171 42.5391 53.3277C42.5391 40.4444 51.1505 25.5747 61.737 20.1799C62.5214 19.7792 63.2381 19.7567 63.7968 20.0445L68.8248 22.6064Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M68.825 22.6065C69.5248 22.962 69.9706 23.8085 69.9706 25.0048C69.9706 27.1548 68.5372 29.6265 66.7709 30.5294C59.7113 34.1241 53.9723 44.0391 53.9723 52.628C53.9723 57.419 55.7612 60.8049 58.5658 62.2326C60.7892 63.3669 63.6503 63.271 66.7709 61.6852L73.1702 58.4235C73.9546 58.0228 74.6713 58.0003 75.23 58.2881C75.9298 58.6436 76.3756 59.49 76.3756 60.6864C76.3756 62.8364 74.9422 65.3081 73.1759 66.211L66.7766 69.4728C62.0928 71.8598 57.7983 71.9952 54.4632 70.2967C50.2534 68.1523 47.5786 63.0791 47.5786 55.8897C47.5786 43.0064 56.19 28.1367 66.7766 22.7419C67.561 22.3412 68.2777 22.3187 68.8363 22.6065H68.825Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M84.8229 33.9209C84.2643 33.6387 83.5476 33.6613 82.7632 34.0563L69.9645 40.5798C68.1982 41.4827 66.7649 43.9544 66.7649 46.1044C66.7649 47.3008 67.2107 48.1473 67.9104 48.5028L62.8824 45.9408C62.1826 45.5853 61.7368 44.7388 61.7368 43.5425C61.7368 41.3924 63.1702 38.9207 64.9365 38.0178L77.7351 31.4943C78.5195 31.0937 79.2362 31.0711 79.7949 31.3589L84.8229 33.9209Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M84.8227 33.9209C85.5225 34.2764 85.9682 35.1229 85.9682 36.3193C85.9682 38.4693 84.5349 40.941 82.7686 41.8439L69.9699 48.3674C69.1856 48.768 68.4689 48.7906 67.9102 48.5028C67.2104 48.1473 66.7646 47.3008 66.7646 46.1045C66.7646 43.9544 68.198 41.4827 69.9643 40.5798L82.7629 34.0564C83.5473 33.6557 84.264 33.6331 84.8227 33.9209Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M111.019 57.9663C110.635 57.9663 110.268 57.8816 109.941 57.7123L104.913 55.1503C104.817 55.0995 104.727 55.0487 104.636 54.981L40.6376 9.71174C39.1308 8.64519 39.0631 5.90262 40.4739 3.46478C41.4953 1.70412 43.0585 0.564209 44.4636 0.564209C44.8474 0.564209 45.2085 0.648855 45.5358 0.81815L50.5639 3.38014C50.6598 3.43093 50.7501 3.48736 50.8404 3.54943L114.839 48.8187C116.346 49.8853 116.414 52.6278 115.003 55.0657C114.343 56.2 113.457 57.0972 112.509 57.5769C112.001 57.8365 111.498 57.9663 111.019 57.9663Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+      />
+      <path
+        d="M44.4638 1.12863C44.7516 1.12863 45.0281 1.1907 45.282 1.3205L50.31 3.88248C50.3834 3.91634 50.4511 3.96149 50.5188 4.00663L114.518 49.2759C115.771 50.1619 115.771 52.6223 114.518 54.7836C113.891 55.8615 113.073 56.6628 112.255 57.0747C111.832 57.2892 111.414 57.402 111.019 57.402C110.726 57.402 110.449 57.34 110.201 57.2102L105.173 54.6482C105.099 54.6143 105.032 54.5692 104.964 54.524L40.965 9.25475C39.7122 8.36878 39.7122 5.90837 40.965 3.74705C41.9131 2.11053 43.3013 1.12863 44.4638 1.12863ZM44.4638 0C42.8385 0 41.123 1.21892 39.9888 3.18273C38.4312 5.87451 38.5723 8.94438 40.316 10.1746L104.315 55.4439C104.428 55.5229 104.541 55.5906 104.659 55.6527L109.687 58.2147C110.093 58.4235 110.545 58.5307 111.019 58.5307C111.589 58.5307 112.181 58.3783 112.768 58.0792C113.812 57.5488 114.783 56.5781 115.494 55.3479C117.051 52.6562 116.91 49.5863 115.167 48.3561L51.1678 3.0868C51.055 3.00779 50.9421 2.94008 50.8236 2.878L45.7955 0.316016C45.3892 0.107219 44.9434 0.00564327 44.4638 0.00564327V0Z"
+        fill="var(--illustration-stroke-tertiary)"
+      />
+      <path
+        d="M50.31 3.88255C49.0516 3.23924 47.1781 4.27193 45.993 6.31475C44.7402 8.47043 44.7402 10.9365 45.993 11.8225L109.992 57.0917C110.06 57.1369 110.127 57.182 110.201 57.2159L105.173 54.6539C105.099 54.6201 105.032 54.5749 104.964 54.5298L40.965 9.26047C39.7122 8.3745 39.7122 5.91409 40.965 3.75276C42.15 1.70994 44.0236 0.677249 45.282 1.32057L50.31 3.88255Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M50.3098 3.88236C50.3832 3.91622 50.4509 3.96137 50.5186 4.00651L114.518 49.2758C115.77 50.1618 115.77 52.6222 114.518 54.7835C113.891 55.8614 113.073 56.6627 112.255 57.0746C111.521 57.4471 110.793 57.5148 110.201 57.2101C110.127 57.1762 110.059 57.1311 109.992 57.0859L45.9928 11.8166C44.74 10.9306 44.74 8.47024 45.9928 6.30892C47.1779 4.2661 49.0514 3.2334 50.3098 3.87672V3.88236Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
         stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
         strokeWidth="0.5"
diff --git a/packages/propel/src/empty-state/assets/vertical-stack/module.tsx b/packages/propel/src/empty-state/assets/vertical-stack/module.tsx
index 328f125bb..f006e4501 100644
--- a/packages/propel/src/empty-state/assets/vertical-stack/module.tsx
+++ b/packages/propel/src/empty-state/assets/vertical-stack/module.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper";
 import type { TIllustrationAssetProps } from "../helper";
 
@@ -13,17 +19,17 @@ export function ModuleVerticalStackIllustration({ className }: TIllustrationAsse
     >
       <g opacity="0.2">
         <path
-          d="M13.5711 136.431C13.5711 138.262 14.9421 140.088 17.6793 141.489L52.9231 159.447C58.4023 162.238 67.2823 162.238 72.7614 159.447L146.82 121.713C149.557 120.318 150.928 118.492 150.928 116.66V122.508C150.928 124.339 149.557 126.165 146.82 127.561L72.7614 165.294C67.2823 168.085 58.4023 168.085 52.9231 165.294L17.6793 147.336C14.9373 145.941 13.5711 144.109 13.5711 142.278V136.431Z"
+          d="M12.7461 135.993C12.7461 137.824 14.1171 139.651 16.8542 141.051L52.0981 159.009C57.5773 161.8 66.4573 161.8 71.9364 159.009L145.995 121.275C148.732 119.88 150.103 118.054 150.103 116.223V122.07C150.103 123.901 148.732 125.728 145.995 127.123L71.9364 164.857C66.4573 167.647 57.5773 167.647 52.0981 164.857L16.8542 146.898C14.1122 145.503 12.7461 143.672 12.7461 141.84V135.993Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.35"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
         <path
-          d="M13.5711 136.431C13.5711 134.599 14.9421 132.773 17.6793 131.378L91.7374 93.644C97.2166 90.8536 106.097 90.8536 111.576 93.644L146.82 111.603C149.562 112.998 150.928 114.829 150.928 116.66C150.928 118.492 149.557 120.318 146.82 121.713L72.7614 159.447C67.2823 162.237 58.4023 162.237 52.9231 159.447L17.6793 141.488C14.9373 140.093 13.5711 138.262 13.5711 136.431Z"
+          d="M12.7461 135.993C12.7461 134.162 14.1171 132.335 16.8542 130.94L90.9124 93.2063C96.3916 90.4159 105.272 90.4159 110.751 93.2063L145.995 111.165C148.737 112.56 150.103 114.391 150.103 116.223C150.103 118.054 148.732 119.88 145.995 121.275L71.9364 159.009C66.4573 161.8 57.5773 161.8 52.0981 159.009L16.8542 141.051C14.1122 139.656 12.7461 137.824 12.7461 135.993Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.35"
           strokeLinecap="round"
           strokeLinejoin="round"
@@ -31,52 +37,52 @@ export function ModuleVerticalStackIllustration({ className }: TIllustrationAsse
       </g>
       <g opacity="0.6">
         <path
-          d="M13.5711 117.959C13.5711 119.79 14.9421 121.616 17.6793 123.016L52.9231 140.975C58.4023 143.765 67.2823 143.765 72.7614 140.975L146.82 103.241C149.557 101.846 150.928 100.019 150.928 98.1882V104.036C150.928 105.867 149.557 107.693 146.82 109.088L72.7614 146.822C67.2823 149.613 58.4023 149.613 52.9231 146.822L17.6793 128.864C14.9373 127.468 13.5711 125.637 13.5711 123.806V117.959Z"
+          d="M12.7461 117.521C12.7461 119.352 14.1171 121.179 16.8542 122.579L52.0981 140.537C57.5773 143.328 66.4573 143.328 71.9364 140.537L145.995 102.803C148.732 101.408 150.103 99.5817 150.103 97.7505V103.598C150.103 105.429 148.732 107.255 145.995 108.651L71.9364 146.385C66.4573 149.175 57.5773 149.175 52.0981 146.385L16.8542 128.426C14.1122 127.031 12.7461 125.2 12.7461 123.368V117.521Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.35"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
         <path
-          d="M13.5711 117.959C13.5711 116.127 14.9421 114.301 17.6793 112.906L91.7374 75.1718C97.2166 72.3814 106.097 72.3814 111.576 75.1718L146.82 93.1305C149.562 94.5257 150.928 96.3569 150.928 98.1881C150.928 100.019 149.557 101.846 146.82 103.241L72.7614 140.975C67.2823 143.765 58.4023 143.765 52.9231 140.975L17.6793 123.016C14.9373 121.621 13.5711 119.79 13.5711 117.959Z"
+          d="M12.7461 117.521C12.7461 115.69 14.1171 113.863 16.8542 112.468L90.9124 74.7341C96.3916 71.9437 105.272 71.9437 110.751 74.7341L145.995 92.6928C148.737 94.088 150.103 95.9192 150.103 97.7504C150.103 99.5817 148.732 101.408 145.995 102.803L71.9364 140.537C66.4573 143.328 57.5773 143.328 52.0981 140.537L16.8542 122.579C14.1122 121.183 12.7461 119.352 12.7461 117.521Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.35"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
       </g>
       <path
-        d="M13.5711 99.4866C13.5711 101.318 14.9421 103.144 17.6793 104.544L52.9231 122.503C58.4023 125.293 67.2823 125.293 72.7614 122.503L146.82 84.7688C149.557 83.3736 150.928 81.5473 150.928 79.716V85.5633C150.928 87.3945 149.557 89.221 146.82 90.6162L72.7614 128.35C67.2823 131.141 58.4023 131.141 52.9231 128.35L17.6793 110.391C14.9373 108.996 13.5711 107.165 13.5711 105.334V99.4866Z"
+        d="M12.7461 99.0489C12.7461 100.88 14.1171 102.706 16.8542 104.107L52.0981 122.065C57.5773 124.856 66.4573 124.856 71.9364 122.065L145.995 84.3312C148.732 82.936 150.103 81.1096 150.103 79.2784V85.1256C150.103 86.9569 148.732 88.7833 145.995 90.1785L71.9364 127.912C66.4573 130.703 57.5773 130.703 52.0981 127.912L16.8542 109.954C14.1122 108.559 12.7461 106.727 12.7461 104.896V99.0489Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.35"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
       <path
-        d="M13.5711 99.4865C13.5711 97.6553 14.9421 95.8288 17.6793 94.4336L91.7374 56.6997C97.2166 53.9092 106.097 53.9092 111.576 56.6997L146.82 74.6584C149.562 76.0536 150.928 77.8848 150.928 79.716C150.928 81.5472 149.557 83.3736 146.82 84.7688L72.7614 122.503C67.2823 125.293 58.4023 125.293 52.9231 122.503L17.6793 104.544C14.9373 103.149 13.5711 101.318 13.5711 99.4865Z"
+        d="M12.7461 99.0489C12.7461 97.2176 14.1171 95.3912 16.8542 93.9959L90.9124 56.262C96.3916 53.4716 105.272 53.4716 110.751 56.262L145.995 74.2207C148.737 75.6159 150.103 77.4471 150.103 79.2783C150.103 81.1096 148.732 82.9359 145.995 84.3311L71.9364 122.065C66.4573 124.855 57.5773 124.855 52.0981 122.065L16.8542 104.107C14.1122 102.711 12.7461 100.88 12.7461 99.0489Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.35"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
       <path
-        d="M64.7245 99.2927C63.9446 99.2927 63.2179 99.1134 62.5687 98.7646L58.3346 96.6088C56.5228 95.6835 55.4812 93.5472 55.4812 90.747V49.6509C55.4812 44.6272 58.8433 38.8283 62.9805 36.7258L96.7565 19.518C97.7932 18.99 98.8057 18.7235 99.765 18.7235C100.516 18.7235 101.213 18.8882 101.843 19.2079L106.097 21.3783C107.947 22.2793 109.013 24.4304 109.013 27.2693V68.3605C109.013 73.3794 105.651 79.1783 101.514 81.2857L67.7378 98.4934C66.7011 99.0215 65.6886 99.2927 64.7245 99.2927Z"
+        d="M63.8995 98.855C63.1196 98.855 62.3929 98.6758 61.7437 98.3269L57.5096 96.1712C55.6978 95.2459 54.6562 93.1095 54.6562 90.3094V49.2133C54.6562 44.1895 58.0183 38.3906 62.1555 36.2881L95.9315 19.0804C96.9682 18.5523 97.9807 18.2858 98.9399 18.2858C99.6908 18.2858 100.388 18.4505 101.018 18.7703L105.272 20.9406C107.122 21.8417 108.188 23.9927 108.188 26.8316V67.9229C108.188 72.9418 104.826 78.7406 100.689 80.848L66.9128 98.0557C65.8761 98.5838 64.8636 98.855 63.8995 98.855Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
       />
       <path
-        d="M99.7698 19.2079C100.448 19.2079 101.073 19.3582 101.625 19.6392L105.879 21.8095C107.497 22.5991 108.529 24.5273 108.529 27.2693V68.3605C108.529 73.2244 105.288 78.8197 101.296 80.8544L67.5199 98.0622C66.5316 98.566 65.5869 98.8083 64.7246 98.8083C64.0173 98.8083 63.373 98.6484 62.8013 98.3384L58.5575 96.1777C56.9733 95.3687 55.9705 93.4551 55.9705 90.747V49.6509C55.9705 44.787 59.2067 39.1916 63.2034 37.1569L96.9794 19.9492C97.9677 19.4453 98.9075 19.2079 99.7698 19.2079ZM99.7698 18.239C98.7331 18.239 97.6479 18.5249 96.5434 19.0868L62.7674 36.2946C58.417 38.5085 55.0065 44.3801 55.0065 49.6509V90.747C55.0065 93.7361 56.1401 96.0276 58.1215 97.0401L62.3653 99.2007C63.0629 99.5786 63.8671 99.7772 64.7294 99.7772C65.771 99.7772 66.861 99.4913 67.9656 98.9245L101.742 81.7168C106.092 79.498 109.502 73.6314 109.502 68.3605V27.2693C109.502 24.2366 108.34 21.9306 106.31 20.9375L102.071 18.7768C101.373 18.4183 100.598 18.239 99.7747 18.239H99.7698Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        d="M98.9448 18.7703C99.6231 18.7703 100.248 18.9205 100.8 19.2015L105.054 21.3718C106.672 22.1615 107.704 24.0896 107.704 26.8316V67.9229C107.704 72.7868 104.463 78.3821 100.471 80.4168L66.6949 97.6245C65.7066 98.1284 64.7619 98.3706 63.8996 98.3706C63.1923 98.3706 62.5479 98.2107 61.9763 97.9007L57.7325 95.7401C56.1483 94.931 55.1455 93.0175 55.1455 90.3094V49.2133C55.1455 44.3494 58.3817 38.7539 62.3784 36.7192L96.1544 19.5115C97.1427 19.0077 98.0825 18.7703 98.9448 18.7703ZM98.9448 17.8014C97.9081 17.8014 96.8229 18.0872 95.7184 18.6492L61.9424 35.8569C57.592 38.0708 54.1815 43.9424 54.1815 49.2133V90.3094C54.1815 93.2984 55.3151 95.5899 57.2965 96.6024L61.5403 98.763C62.2379 99.1409 63.0421 99.3395 63.9044 99.3395C64.946 99.3395 66.036 99.0537 67.1405 98.4869L100.917 81.2791C105.267 79.0603 108.677 73.1937 108.677 67.9229V26.8316C108.677 23.7989 107.515 21.4929 105.485 20.4998L101.246 18.3392C100.548 17.9807 99.7732 17.8014 98.9497 17.8014H98.9448Z"
+        fill="var(--illustration-stroke-tertiary)"
       />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M102.909 27.9572C102.88 27.9378 102.851 27.9233 102.822 27.9088L102.846 27.9184C102.87 27.9281 102.89 27.9426 102.909 27.9572Z"
+        d="M102.084 27.5195C102.055 27.5001 102.026 27.4857 101.997 27.4711L102.021 27.4807C102.045 27.4904 102.065 27.505 102.084 27.5195Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.35"
         strokeLinecap="round"
         strokeLinejoin="round"
@@ -84,9 +90,9 @@ export function ModuleVerticalStackIllustration({ className }: TIllustrationAsse
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M105.879 21.8095C105.811 21.7756 105.743 21.7466 105.675 21.7175C105.607 21.6884 105.535 21.6593 105.462 21.6351C105.181 21.5333 104.886 21.4704 104.58 21.4365C104.517 21.4268 104.45 21.4219 104.382 21.4171C103.447 21.3541 102.4 21.5867 101.296 22.1486L67.5199 39.3564C63.5231 41.3911 60.287 46.9865 60.287 51.8504V92.9465C60.287 93.1354 60.2918 93.3243 60.3015 93.5036C60.3112 93.6489 60.3209 93.7893 60.3354 93.925V93.9347C60.35 94.0703 60.3645 94.2011 60.3839 94.3319C60.4275 94.6517 60.4905 94.957 60.568 95.2476C60.6019 95.3687 60.6358 95.485 60.6745 95.5964C60.7085 95.7127 60.7472 95.8192 60.7908 95.9258C60.8247 96.0082 60.8586 96.0905 60.8926 96.1729C60.9652 96.3328 61.0427 96.4878 61.1251 96.6331C61.159 96.7009 61.2026 96.7687 61.2414 96.8365C61.2462 96.8462 61.251 96.8559 61.2607 96.8656C61.2995 96.9286 61.3431 96.9916 61.3867 97.0546C61.4594 97.1612 61.5369 97.2629 61.6192 97.3598C61.6774 97.4324 61.7403 97.5002 61.8033 97.5681C61.8663 97.6359 61.9341 97.7038 62.0019 97.7668C62.0601 97.82 62.1182 97.8684 62.1763 97.9168C62.3701 98.0767 62.5784 98.2173 62.8013 98.3384L58.5575 96.1777C56.9733 95.3687 55.9705 93.4551 55.9705 90.7471V49.651C55.9705 44.7871 59.2067 39.1916 63.2034 37.1569L96.9794 19.9492C98.7476 19.0481 100.366 18.9949 101.625 19.6392L105.879 21.8095Z"
+        d="M105.054 21.3719C104.986 21.338 104.918 21.3089 104.85 21.2798C104.782 21.2508 104.71 21.2216 104.637 21.1974C104.356 21.0957 104.061 21.0327 103.755 20.9988C103.692 20.9891 103.625 20.9843 103.557 20.9794C102.622 20.9165 101.575 21.149 100.471 21.711L66.6948 38.9187C62.6981 40.9534 59.462 46.5488 59.462 51.4127V92.5088C59.462 92.6978 59.4668 92.8867 59.4765 93.0659C59.4862 93.2112 59.4959 93.3517 59.5104 93.4873V93.497C59.525 93.6327 59.5395 93.7635 59.5589 93.8943C59.6025 94.214 59.6654 94.5193 59.743 94.81C59.7769 94.9311 59.8108 95.0473 59.8495 95.1588C59.8834 95.275 59.9222 95.3816 59.9658 95.4882C59.9997 95.5705 60.0336 95.6529 60.0675 95.7352C60.1402 95.8951 60.2177 96.0501 60.3001 96.1954C60.334 96.2633 60.3776 96.331 60.4163 96.3989C60.4212 96.4086 60.426 96.4183 60.4357 96.428C60.4745 96.4909 60.5181 96.554 60.5617 96.617C60.6343 96.7235 60.7119 96.8252 60.7942 96.9221C60.8524 96.9948 60.9153 97.0626 60.9783 97.1304C61.0413 97.1982 61.1091 97.2661 61.1769 97.3291C61.2351 97.3824 61.2932 97.4307 61.3513 97.4792C61.5451 97.6391 61.7534 97.7796 61.9763 97.9007L57.7325 95.7401C56.1483 94.931 55.1455 93.0175 55.1455 90.3094V49.2133C55.1455 44.3494 58.3816 38.754 62.3784 36.7193L96.1544 19.5115C97.9226 18.6104 99.5407 18.5572 100.8 19.2015L105.054 21.3719Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.35"
         strokeLinecap="round"
         strokeLinejoin="round"
@@ -94,9 +100,9 @@ export function ModuleVerticalStackIllustration({ className }: TIllustrationAsse
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M102.846 27.9184L102.822 27.9088C102.851 27.9233 102.88 27.9378 102.909 27.9572C102.89 27.9426 102.87 27.9281 102.846 27.9184Z"
+        d="M102.021 27.4807L101.997 27.4711C102.026 27.4857 102.055 27.5001 102.084 27.5195C102.065 27.505 102.045 27.4904 102.021 27.4807Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.35"
         strokeLinecap="round"
         strokeLinejoin="round"
@@ -104,7 +110,7 @@ export function ModuleVerticalStackIllustration({ className }: TIllustrationAsse
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M105.879 21.8095C105.811 21.7756 105.743 21.7465 105.675 21.7174C105.607 21.6884 105.535 21.6592 105.462 21.635C105.181 21.5333 104.886 21.4703 104.58 21.4364C104.517 21.4267 104.45 21.4219 104.382 21.417C103.447 21.3541 102.4 21.5866 101.296 22.1486L67.5199 39.3563C63.5231 41.391 60.287 46.9864 60.287 51.8503V92.9464C60.287 93.1354 60.2918 93.3243 60.3015 93.5035C60.3112 93.6488 60.3209 93.7893 60.3354 93.9249V93.9346C60.35 94.0703 60.3645 94.2011 60.3839 94.3319C60.4275 94.6516 60.4905 94.9569 60.568 95.2476C60.6019 95.3687 60.6358 95.4849 60.6745 95.5964C60.7085 95.7126 60.7472 95.8192 60.7908 95.9258C60.8247 96.0081 60.8586 96.0905 60.8926 96.1728C60.9652 96.3327 61.0427 96.4877 61.1251 96.633C61.159 96.7009 61.2026 96.7687 61.2414 96.8365C61.2462 96.8462 61.251 96.8559 61.2607 96.8656C61.2995 96.9286 61.3431 96.9916 61.3867 97.0546C61.4594 97.1612 61.5369 97.2628 61.6192 97.3597C61.6774 97.4324 61.7403 97.5002 61.8033 97.568C61.8663 97.6358 61.9341 97.7037 62.0019 97.7667C62.0601 97.82 62.1182 97.8684 62.1763 97.9168C62.3701 98.0767 62.5784 98.2172 62.8013 98.3383C64.0657 99.0214 65.7177 98.9826 67.5199 98.0622L101.296 80.8544C105.288 78.8197 108.529 73.2244 108.529 68.3605V27.2692C108.529 24.5273 107.497 22.5991 105.879 21.8095Z"
+        d="M105.054 21.3718C104.986 21.3379 104.918 21.3089 104.85 21.2798C104.782 21.2507 104.71 21.2216 104.637 21.1974C104.356 21.0956 104.061 21.0327 103.755 20.9988C103.692 20.9891 103.625 20.9842 103.557 20.9794C102.622 20.9164 101.575 21.1489 100.471 21.7109L66.6948 38.9186C62.6981 40.9533 59.462 46.5488 59.462 51.4127V92.5088C59.462 92.6977 59.4668 92.8866 59.4765 93.0658C59.4862 93.2112 59.4959 93.3516 59.5104 93.4873V93.497C59.5249 93.6326 59.5395 93.7634 59.5589 93.8942C59.6025 94.214 59.6654 94.5192 59.743 94.8099C59.7769 94.931 59.8108 95.0473 59.8495 95.1587C59.8834 95.275 59.9222 95.3815 59.9658 95.4881C59.9997 95.5705 60.0336 95.6528 60.0675 95.7352C60.1402 95.8951 60.2177 96.05 60.3001 96.1954C60.334 96.2632 60.3776 96.331 60.4163 96.3988C60.4212 96.4085 60.426 96.4182 60.4357 96.4279C60.4745 96.4909 60.5181 96.5539 60.5617 96.6169C60.6343 96.7235 60.7119 96.8252 60.7942 96.9221C60.8524 96.9947 60.9153 97.0625 60.9783 97.1303C61.0413 97.1982 61.1091 97.2661 61.1769 97.329C61.2351 97.3823 61.2932 97.4307 61.3513 97.4791C61.5451 97.639 61.7534 97.7796 61.9763 97.9007C63.2407 98.5837 64.8927 98.545 66.6948 97.6245L100.471 80.4168C104.463 78.3821 107.704 72.7867 107.704 67.9228V26.8316C107.704 24.0896 106.672 22.1615 105.054 21.3718Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
         stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
         strokeWidth="0.35"
@@ -112,47 +118,47 @@ export function ModuleVerticalStackIllustration({ className }: TIllustrationAsse
         strokeLinejoin="round"
       />
       <path
-        d="M94.1502 73.9753C94.0097 73.9753 93.8741 73.9414 93.7529 73.8832L89.4365 71.6838C89.1167 71.5191 88.9278 71.1703 88.9278 70.7392V63.5983C88.9278 62.954 89.3347 62.2612 89.8773 61.9851L95.744 58.996C95.9039 58.9137 96.0686 58.8749 96.2285 58.8749C96.369 58.8749 96.5046 58.9088 96.6257 58.9669L100.942 61.1664C101.262 61.3262 101.451 61.6799 101.451 62.111V69.2519C101.451 69.8962 101.044 70.589 100.501 70.8651L94.6347 73.8541C94.4748 73.9365 94.3101 73.9753 94.1502 73.9753Z"
+        d="M93.3252 73.5376C93.1847 73.5376 93.049 73.5037 92.9279 73.4456L88.6115 71.2461C88.2917 71.0814 88.1028 70.7326 88.1028 70.3015V63.1607C88.1028 62.5163 88.5097 61.8235 89.0523 61.5474L94.919 58.5584C95.0789 58.476 95.2436 58.4373 95.4035 58.4373C95.544 58.4373 95.6796 58.4711 95.8007 58.5293L100.117 60.7287C100.437 60.8886 100.626 61.2422 100.626 61.6734V68.8142C100.626 69.4585 100.219 70.1513 99.6763 70.4274L93.8096 73.4165C93.6498 73.4988 93.4851 73.5376 93.3252 73.5376Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
       />
       <path
-        d="M96.2285 59.3594C96.2915 59.3594 96.3545 59.3739 96.4078 59.3982L100.724 61.5975C100.874 61.675 100.966 61.8543 100.966 62.111V69.2518C100.966 69.7121 100.661 70.2401 100.283 70.4339L94.4167 73.423C94.3246 73.4715 94.2326 73.4908 94.1551 73.4908C94.0921 73.4908 94.0291 73.4762 93.9758 73.452L89.6593 71.2527C89.5092 71.1752 89.4171 70.9959 89.4171 70.7391V63.5983C89.4171 63.1381 89.7223 62.6101 90.1002 62.4163L95.9669 59.4271C96.059 59.3787 96.151 59.3594 96.2285 59.3594ZM96.2285 58.3905C95.9911 58.3905 95.7538 58.4485 95.5261 58.5648L89.6593 61.554C88.9569 61.9125 88.4434 62.7748 88.4434 63.5983V70.7391C88.4434 71.3544 88.734 71.868 89.2185 72.115L93.535 74.3143C93.7287 74.4112 93.9322 74.4597 94.1502 74.4597C94.3876 74.4597 94.625 74.4016 94.8527 74.2854L100.719 71.2962C101.422 70.9377 101.935 70.0754 101.935 69.2518V62.111C101.935 61.4958 101.645 60.9822 101.165 60.7351L96.8486 58.5358C96.6548 58.4389 96.4514 58.3905 96.2334 58.3905H96.2285Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        d="M95.4035 58.9217C95.4665 58.9217 95.5294 58.9363 95.5827 58.9605L99.8992 61.1598C100.049 61.2373 100.141 61.4166 100.141 61.6734V68.8142C100.141 69.2744 99.8362 69.8024 99.4584 69.9962L93.5916 72.9854C93.4996 73.0338 93.4076 73.0531 93.33 73.0531C93.2671 73.0531 93.2041 73.0386 93.1508 73.0143L88.8343 70.815C88.6841 70.7375 88.5921 70.5582 88.5921 70.3015V63.1607C88.5921 62.7004 88.8973 62.1724 89.2752 61.9786L95.1419 58.9895C95.2339 58.941 95.326 58.9217 95.4035 58.9217ZM95.4035 57.9528C95.1661 57.9528 94.9287 58.0109 94.701 58.1271L88.8343 61.1163C88.1319 61.4748 87.6183 62.3371 87.6183 63.1607V70.3015C87.6183 70.9167 87.909 71.4303 88.3935 71.6774L92.7099 73.8767C92.9037 73.9736 93.1072 74.022 93.3252 74.022C93.5626 74.022 93.8 73.964 94.0277 73.8477L99.8944 70.8586C100.597 70.5001 101.11 69.6377 101.11 68.8142V61.6734C101.11 61.0581 100.82 60.5445 100.34 60.2975L96.0236 58.0982C95.8298 58.0013 95.6263 57.9528 95.4083 57.9528H95.4035Z"
+        fill="var(--illustration-stroke-tertiary)"
       />
       <path
-        d="M94.1502 53.4297C94.0097 53.4297 93.8741 53.3958 93.7529 53.3377L89.4365 51.1382C89.1167 50.9735 88.9278 50.6247 88.9278 50.1936V43.0526C88.9278 42.4083 89.3347 41.7156 89.8773 41.4395L95.744 38.4504C95.9039 38.368 96.0686 38.3292 96.2285 38.3292C96.369 38.3292 96.5046 38.3632 96.6257 38.4214L100.942 40.6208C101.262 40.7807 101.451 41.1343 101.451 41.5655V48.7063C101.451 49.3506 101.044 50.0433 100.501 50.3194L94.6347 53.3086C94.4748 53.3909 94.3101 53.4297 94.1502 53.4297Z"
+        d="M93.3252 52.992C93.1847 52.992 93.049 52.9581 92.9279 52.9L88.6115 50.7006C88.2917 50.5359 88.1028 50.1871 88.1028 49.7559V42.615C88.1028 41.9707 88.5097 41.278 89.0523 41.0018L94.919 38.0127C95.0789 37.9303 95.2436 37.8916 95.4035 37.8916C95.544 37.8916 95.6796 37.9256 95.8007 37.9837L100.117 40.1831C100.437 40.343 100.626 40.6966 100.626 41.1278V48.2686C100.626 48.9129 100.219 49.6056 99.6763 49.8818L93.8096 52.8709C93.6498 52.9533 93.4851 52.992 93.3252 52.992Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
       />
       <path
-        d="M96.2285 38.809C96.2915 38.809 96.3545 38.8234 96.4078 38.8476L100.724 41.0471C100.874 41.1246 100.966 41.3039 100.966 41.5606V48.7014C100.966 49.1617 100.661 49.6897 100.283 49.8835L94.4167 52.8725C94.3246 52.9209 94.2326 52.9404 94.1551 52.9404C94.0921 52.9404 94.0291 52.9258 93.9758 52.9016L89.6593 50.7022C89.5092 50.6247 89.4171 50.4455 89.4171 50.1887V43.0479C89.4171 42.5877 89.7223 42.0595 90.1002 41.8658L95.9669 38.8767C96.059 38.8283 96.151 38.809 96.2285 38.809ZM96.2285 37.8401C95.9911 37.8401 95.7538 37.8981 95.5261 38.0144L89.6593 41.0034C88.9569 41.3619 88.4434 42.2243 88.4434 43.0479V50.1887C88.4434 50.804 88.734 51.3174 89.2185 51.5645L93.535 53.7639C93.7287 53.8608 93.9322 53.9093 94.1502 53.9093C94.3876 53.9093 94.625 53.8511 94.8527 53.7348L100.719 50.7458C101.422 50.3873 101.935 49.525 101.935 48.7014V41.5606C101.935 40.9454 101.645 40.4318 101.165 40.1847L96.8486 37.9853C96.6548 37.8884 96.4514 37.8401 96.2334 37.8401H96.2285Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        d="M95.4035 38.3713C95.4665 38.3713 95.5294 38.3857 95.5827 38.41L99.8992 40.6094C100.049 40.6869 100.141 40.8662 100.141 41.1229V48.2638C100.141 48.724 99.8362 49.252 99.4584 49.4458L93.5916 52.4348C93.4996 52.4833 93.4076 52.5027 93.33 52.5027C93.2671 52.5027 93.2041 52.4881 93.1508 52.4639L88.8343 50.2645C88.6841 50.187 88.5921 50.0078 88.5921 49.7511V42.6102C88.5921 42.15 88.8973 41.6219 89.2752 41.4281L95.1419 38.4391C95.2339 38.3906 95.326 38.3713 95.4035 38.3713ZM95.4035 37.4024C95.1661 37.4024 94.9287 37.4605 94.701 37.5767L88.8343 40.5658C88.1319 40.9243 87.6183 41.7867 87.6183 42.6102V49.7511C87.6183 50.3663 87.909 50.8798 88.3935 51.1268L92.7099 53.3263C92.9037 53.4232 93.1072 53.4716 93.3252 53.4716C93.5626 53.4716 93.8 53.4134 94.0277 53.2972L99.8944 50.3081C100.597 49.9496 101.11 49.0873 101.11 48.2638V41.1229C101.11 40.5077 100.82 39.9941 100.34 39.7471L96.0236 37.5476C95.8298 37.4507 95.6263 37.4024 95.4083 37.4024H95.4035Z"
+        fill="var(--illustration-stroke-tertiary)"
       />
       <path
-        d="M77.267 82.5791C77.1265 82.5791 76.9909 82.5452 76.8698 82.4871L72.5533 80.2877C72.2335 80.1278 72.0446 79.7742 72.0446 79.343V72.2022C72.0446 71.5579 72.4516 70.8651 72.9941 70.5889L78.8608 67.5999C79.0207 67.5176 79.1854 67.4788 79.3453 67.4788C79.4858 67.4788 79.6214 67.5127 79.7426 67.5708L84.059 69.7702C84.3788 69.9301 84.5677 70.2837 84.5677 70.7149V77.8557C84.5677 78.5 84.1608 79.1928 83.6182 79.469L77.7515 82.458C77.5916 82.5404 77.4269 82.5791 77.267 82.5791Z"
+        d="M76.442 82.1415C76.3015 82.1415 76.1659 82.1076 76.0447 82.0494L71.7283 79.85C71.4085 79.6901 71.2196 79.3365 71.2196 78.9054V71.7645C71.2196 71.1202 71.6265 70.4274 72.1691 70.1513L78.0358 67.1622C78.1957 67.0799 78.3604 67.0411 78.5203 67.0411C78.6608 67.0411 78.7964 67.075 78.9175 67.1331L83.234 69.3326C83.5537 69.4924 83.7427 69.8461 83.7427 70.2772V77.4181C83.7427 78.0624 83.3357 78.7552 82.7932 79.0313L76.9264 82.0203C76.7666 82.1027 76.6019 82.1415 76.442 82.1415Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
       />
       <path
-        d="M79.3453 67.9632C79.4083 67.9632 79.4713 67.9777 79.5246 68.0019L83.841 70.2013C83.9912 70.2789 84.0833 70.4581 84.0833 70.7149V77.8557C84.0833 78.3159 83.7781 78.844 83.4002 79.0377L77.5335 82.0269C77.4414 82.0753 77.3494 82.0947 77.2719 82.0947C77.2089 82.0947 77.1459 82.0801 77.0926 82.0559L72.7761 79.8566C72.626 79.779 72.5339 79.5998 72.5339 79.343V72.2022C72.5339 71.742 72.8391 71.2139 73.217 71.0202L79.0837 68.031C79.1758 67.9826 79.2678 67.9632 79.3453 67.9632ZM79.3453 66.9943C79.1079 66.9943 78.8706 67.0524 78.6429 67.1687L72.7761 70.1578C72.0737 70.5163 71.5602 71.3786 71.5602 72.2022V79.343C71.5602 79.9583 71.8508 80.4717 72.3353 80.7188L76.6518 82.9182C76.8407 83.0151 77.049 83.0636 77.267 83.0636C77.5044 83.0636 77.7418 83.0055 77.9695 82.8892L83.8362 79.9001C84.5386 79.5416 85.0522 78.6793 85.0522 77.8557V70.7149C85.0522 70.0996 84.7615 69.5861 84.277 69.339L79.9606 67.1397C79.7716 67.0428 79.5633 66.9943 79.3453 66.9943Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        d="M78.5203 67.5256C78.5833 67.5256 78.6463 67.54 78.6996 67.5643L83.016 69.7637C83.1662 69.8412 83.2582 70.0205 83.2582 70.2772V77.418C83.2582 77.8783 82.953 78.4063 82.5752 78.6001L76.7085 81.5892C76.6164 81.6377 76.5244 81.657 76.4468 81.657C76.3839 81.657 76.3209 81.6424 76.2676 81.6182L71.9511 79.4189C71.801 79.3414 71.7089 79.1621 71.7089 78.9053V71.7645C71.7089 71.3043 72.0141 70.7763 72.392 70.5825L78.2587 67.5933C78.3508 67.5449 78.4428 67.5256 78.5203 67.5256ZM78.5203 66.5567C78.2829 66.5567 78.0455 66.6147 77.8179 66.731L71.9511 69.7202C71.2487 70.0787 70.7352 70.941 70.7352 71.7645V78.9053C70.7352 79.5206 71.0258 80.034 71.5103 80.2811L75.8267 82.4805C76.0157 82.5774 76.224 82.6259 76.442 82.6259C76.6794 82.6259 76.9168 82.5678 77.1445 82.4516L83.0112 79.4624C83.7136 79.1039 84.2271 78.2416 84.2271 77.418V70.2772C84.2271 69.662 83.9365 69.1484 83.452 68.9013L79.1356 66.702C78.9466 66.6051 78.7383 66.5567 78.5203 66.5567Z"
+        fill="var(--illustration-stroke-tertiary)"
       />
       <path
-        d="M77.267 62.0335C77.1265 62.0335 76.9909 61.9997 76.8698 61.9415L72.5533 59.7421C72.2335 59.5822 72.0446 59.2285 72.0446 58.7973V51.6565C72.0446 51.0122 72.4516 50.3195 72.9941 50.0434L78.8608 47.0542C79.0207 46.9719 79.1854 46.9331 79.3453 46.9331C79.4858 46.9331 79.6214 46.9671 79.7426 47.0252L84.059 49.2247C84.3788 49.3845 84.5677 49.7382 84.5677 50.1693V57.3101C84.5677 57.9545 84.1608 58.6471 83.6182 58.9233L77.7515 61.9124C77.5916 61.9948 77.4269 62.0335 77.267 62.0335Z"
+        d="M76.442 61.5959C76.3015 61.5959 76.1659 61.562 76.0447 61.5039L71.7283 59.3044C71.4085 59.1446 71.2196 58.7908 71.2196 58.3597V51.2188C71.2196 50.5745 71.6265 49.8818 72.1691 49.6057L78.0358 46.6165C78.1957 46.5342 78.3604 46.4954 78.5203 46.4954C78.6608 46.4954 78.7964 46.5294 78.9175 46.5876L83.234 48.787C83.5537 48.9469 83.7427 49.3005 83.7427 49.7317V56.8725C83.7427 57.5168 83.3357 58.2095 82.7932 58.4856L76.9264 61.4748C76.7666 61.5571 76.6019 61.5959 76.442 61.5959Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
       />
       <path
-        d="M79.3453 47.4127C79.4083 47.4127 79.4713 47.4273 79.5246 47.4564L83.841 49.6558C83.9912 49.7333 84.0833 49.9126 84.0833 50.1693V57.3102C84.0833 57.7704 83.7781 58.2984 83.4002 58.4922L77.5335 61.4812C77.4414 61.5297 77.3494 61.5491 77.2719 61.5491C77.2089 61.5491 77.1459 61.5345 77.0926 61.5103L72.7761 59.3109C72.626 59.2334 72.5339 59.0541 72.5339 58.7973V51.6565C72.5339 51.1963 72.8391 50.6683 73.217 50.4745L79.0837 47.4855C79.1758 47.437 79.2678 47.4127 79.3453 47.4127ZM79.3453 46.4438C79.1079 46.4438 78.8706 46.502 78.6429 46.6183L72.7761 49.6073C72.0737 49.9658 71.5602 50.8281 71.5602 51.6517V58.7926C71.5602 59.4079 71.8508 59.9213 72.3353 60.1684L76.6518 62.3678C76.8407 62.4647 77.049 62.5132 77.267 62.5132C77.5044 62.5132 77.7418 62.455 77.9695 62.3387L83.8362 59.3497C84.5386 58.9912 85.0522 58.1289 85.0522 57.3053V50.1645C85.0522 49.5492 84.7615 49.0357 84.277 48.7886L79.9606 46.5892C79.7716 46.4923 79.5633 46.4438 79.3453 46.4438Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        d="M78.5203 46.975C78.5833 46.975 78.6463 46.9896 78.6996 47.0187L83.016 49.2181C83.1662 49.2956 83.2582 49.4749 83.2582 49.7317V56.8725C83.2582 57.3327 82.953 57.8607 82.5752 58.0545L76.7085 61.0435C76.6164 61.092 76.5244 61.1114 76.4468 61.1114C76.3839 61.1114 76.3209 61.0969 76.2676 61.0726L71.9511 58.8732C71.801 58.7957 71.7089 58.6164 71.7089 58.3597V51.2188C71.7089 50.7586 72.0141 50.2306 72.392 50.0368L78.2587 47.0478C78.3508 46.9993 78.4428 46.975 78.5203 46.975ZM78.5203 46.0061C78.2829 46.0061 78.0455 46.0643 77.8179 46.1806L71.9511 49.1696C71.2487 49.5281 70.7352 50.3904 70.7352 51.214V58.3549C70.7352 58.9702 71.0258 59.4836 71.5103 59.7307L75.8267 61.9301C76.0157 62.027 76.224 62.0755 76.442 62.0755C76.6794 62.0755 76.9168 62.0173 77.1445 61.901L83.0112 58.912C83.7136 58.5535 84.2271 57.6912 84.2271 56.8676V49.7268C84.2271 49.1116 83.9365 48.598 83.452 48.3509L79.1356 46.1515C78.9466 46.0546 78.7383 46.0061 78.5203 46.0061Z"
+        fill="var(--illustration-stroke-tertiary)"
       />
       <path
-        d="M100.724 61.5975C100.603 61.5345 100.453 61.5393 100.283 61.6265L94.4167 64.6156C94.0388 64.8094 93.7336 65.3375 93.7336 65.7977V72.9385C93.7336 73.1953 93.8256 73.3745 93.9758 73.452L89.6593 71.2527C89.5092 71.1752 89.4171 70.9959 89.4171 70.7391V63.5983C89.4171 63.1381 89.7223 62.61 90.1002 62.4163L95.9669 59.4271C96.1365 59.3399 96.2866 59.3352 96.4078 59.3981L100.724 61.5975Z"
+        d="M99.8992 61.1598C99.7781 61.0968 99.6279 61.1017 99.4584 61.1889L93.5916 64.1779C93.2138 64.3717 92.9086 64.8998 92.9086 65.3601V72.5009C92.9086 72.7576 93.0006 72.9368 93.1508 73.0143L88.8343 70.815C88.6841 70.7375 88.5921 70.5582 88.5921 70.3014V63.1606C88.5921 62.7004 88.8973 62.1724 89.2752 61.9786L95.1419 58.9894C95.3115 58.9022 95.4616 58.8975 95.5827 58.9605L99.8992 61.1598Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.35"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
       <path
-        d="M100.724 61.5975C100.874 61.675 100.966 61.8543 100.966 62.1111V69.2519C100.966 69.7121 100.661 70.2401 100.283 70.4339L94.4167 73.4231C94.2471 73.5103 94.0969 73.515 93.9758 73.4521C93.8256 73.3745 93.7336 73.1954 93.7336 72.9386V65.7978C93.7336 65.3376 94.0388 64.8094 94.4167 64.6157L100.283 61.6266C100.453 61.5394 100.603 61.5346 100.724 61.5975Z"
+        d="M99.8992 61.1599C100.049 61.2374 100.141 61.4167 100.141 61.6734V68.8142C100.141 69.2745 99.8362 69.8025 99.4584 69.9963L93.5916 72.9854C93.4221 73.0726 93.2719 73.0774 93.1508 73.0144C93.0006 72.9369 92.9086 72.7577 92.9086 72.501V65.3601C92.9086 64.8999 93.2138 64.3718 93.5916 64.178L99.4584 61.189C99.6279 61.1018 99.7781 61.0969 99.8992 61.1599Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
         stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
         strokeWidth="0.35"
@@ -160,15 +166,15 @@ export function ModuleVerticalStackIllustration({ className }: TIllustrationAsse
         strokeLinejoin="round"
       />
       <path
-        d="M100.724 41.052C100.603 40.989 100.453 40.9939 100.283 41.0811L94.4167 44.0701C94.0388 44.2639 93.7336 44.7919 93.7336 45.2521V52.3929C93.7336 52.6497 93.8256 52.829 93.9758 52.9065L89.6593 50.7071C89.5092 50.6295 89.4171 50.4504 89.4171 50.1936V43.0527C89.4171 42.5925 89.7223 42.0644 90.1002 41.8707L95.9669 38.8816C96.1365 38.7944 96.2866 38.7895 96.4078 38.8525L100.724 41.052Z"
+        d="M99.8992 40.6143C99.7781 40.5513 99.6279 40.5562 99.4584 40.6434L93.5916 43.6324C93.2138 43.8262 92.9086 44.3542 92.9086 44.8145V51.9553C92.9086 52.212 93.0006 52.3913 93.1508 52.4688L88.8343 50.2694C88.6841 50.1919 88.5921 50.0127 88.5921 49.756V42.615C88.5921 42.1548 88.8973 41.6268 89.2752 41.433L95.1419 38.444C95.3115 38.3568 95.4616 38.3519 95.5827 38.4149L99.8992 40.6143Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.35"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
       <path
-        d="M100.724 41.052C100.874 41.1295 100.966 41.3087 100.966 41.5655V48.7063C100.966 49.1666 100.661 49.6946 100.283 49.8884L94.4167 52.8774C94.2471 52.9646 94.0969 52.9695 93.9758 52.9065C93.8256 52.829 93.7336 52.6497 93.7336 52.3929V45.2521C93.7336 44.7919 94.0388 44.2639 94.4167 44.0701L100.283 41.0811C100.453 40.9939 100.603 40.989 100.724 41.052Z"
+        d="M99.8992 40.6143C100.049 40.6918 100.141 40.8711 100.141 41.1278V48.2687C100.141 48.7289 99.8362 49.2569 99.4584 49.4507L93.5916 52.4397C93.4221 52.5269 93.2719 52.5318 93.1508 52.4688C93.0006 52.3913 92.9086 52.212 92.9086 51.9553V44.8145C92.9086 44.3542 93.2138 43.8262 93.5916 43.6324L99.4584 40.6434C99.6279 40.5562 99.7781 40.5513 99.8992 40.6143Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
         stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
         strokeWidth="0.35"
@@ -176,15 +182,15 @@ export function ModuleVerticalStackIllustration({ className }: TIllustrationAsse
         strokeLinejoin="round"
       />
       <path
-        d="M83.8362 70.2014C83.7151 70.1384 83.5649 70.1433 83.3954 70.2305L77.5286 73.2195C77.1508 73.4133 76.8456 73.9414 76.8456 74.4017V81.5425C76.8456 81.7993 76.9376 81.9784 77.0878 82.0559L72.7713 79.8566C72.6212 79.7791 72.5291 79.5998 72.5291 79.3431V72.2022C72.5291 71.742 72.8343 71.214 73.2122 71.0202L79.0789 68.0311C79.2485 67.9439 79.3986 67.939 79.5198 68.002L83.8362 70.2014Z"
+        d="M83.0112 69.7637C82.8901 69.7007 82.7399 69.7056 82.5704 69.7928L76.7036 72.7819C76.3258 72.9756 76.0206 73.5038 76.0206 73.964V81.1048C76.0206 81.3616 76.1126 81.5407 76.2628 81.6183L71.9463 79.4189C71.7961 79.3414 71.7041 79.1622 71.7041 78.9054V71.7646C71.7041 71.3043 72.0093 70.7763 72.3872 70.5825L78.2539 67.5934C78.4234 67.5062 78.5736 67.5013 78.6947 67.5643L83.0112 69.7637Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.35"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
       <path
-        d="M83.8362 70.2014C83.9864 70.2789 84.0784 70.4582 84.0784 70.7149V77.8558C84.0784 78.316 83.7732 78.844 83.3954 79.0378L77.5286 82.0269C77.3591 82.1141 77.2089 82.1189 77.0878 82.0559C76.9376 81.9784 76.8456 81.7993 76.8456 81.5425V74.4017C76.8456 73.9414 77.1508 73.4133 77.5286 73.2195L83.3954 70.2305C83.5649 70.1433 83.7151 70.1384 83.8362 70.2014Z"
+        d="M83.0112 69.7637C83.1614 69.8412 83.2534 70.0205 83.2534 70.2773V77.4181C83.2534 77.8783 82.9482 78.4063 82.5704 78.6001L76.7036 81.5893C76.5341 81.6765 76.3839 81.6812 76.2628 81.6183C76.1126 81.5407 76.0206 81.3616 76.0206 81.1048V73.964C76.0206 73.5038 76.3258 72.9756 76.7036 72.7819L82.5704 69.7928C82.7399 69.7056 82.8901 69.7008 83.0112 69.7637Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
         stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
         strokeWidth="0.35"
@@ -192,15 +198,15 @@ export function ModuleVerticalStackIllustration({ className }: TIllustrationAsse
         strokeLinejoin="round"
       />
       <path
-        d="M83.8362 49.6558C83.7151 49.5928 83.5649 49.5977 83.3954 49.6849L77.5286 52.674C77.1508 52.8677 76.8456 53.3958 76.8456 53.856V60.9968C76.8456 61.2536 76.9376 61.4328 77.0878 61.5104L72.7713 59.3109C72.6212 59.2334 72.5291 59.0541 72.5291 58.7974V51.6566C72.5291 51.1963 72.8343 50.6683 73.2122 50.4745L79.0789 47.4855C79.2485 47.3983 79.3986 47.3934 79.5198 47.4564L83.8362 49.6558Z"
+        d="M83.0112 49.2182C82.8901 49.1552 82.7399 49.1601 82.5704 49.2473L76.7036 52.2363C76.3258 52.4301 76.0206 52.9581 76.0206 53.4183V60.5591C76.0206 60.8159 76.1126 60.9952 76.2628 61.0727L71.9463 58.8733C71.7961 58.7957 71.7041 58.6165 71.7041 58.3597V51.2189C71.7041 50.7587 72.0093 50.2306 72.3872 50.0369L78.2539 47.0478C78.4234 46.9606 78.5736 46.9557 78.6947 47.0187L83.0112 49.2182Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.35"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
       <path
-        d="M83.8362 49.6558C83.9864 49.7333 84.0784 49.9126 84.0784 50.1694V57.3102C84.0784 57.7704 83.7732 58.2984 83.3954 58.4922L77.5286 61.4812C77.3591 61.5684 77.2089 61.5733 77.0878 61.5103C76.9376 61.4328 76.8456 61.2536 76.8456 60.9968V53.856C76.8456 53.3958 77.1508 52.8677 77.5286 52.6739L83.3954 49.6849C83.5649 49.5977 83.7151 49.5928 83.8362 49.6558Z"
+        d="M83.0112 49.2182C83.1614 49.2957 83.2534 49.4749 83.2534 49.7317V56.8725C83.2534 57.3327 82.9482 57.8608 82.5704 58.0546L76.7036 61.0436C76.5341 61.1308 76.3839 61.1357 76.2628 61.0727C76.1126 60.9952 76.0206 60.8159 76.0206 60.5591V53.4183C76.0206 52.9581 76.3258 52.4301 76.7036 52.2363L82.5704 49.2472C82.7399 49.16 82.8901 49.1552 83.0112 49.2182Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
         stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
         strokeWidth="0.35"
@@ -208,83 +214,83 @@ export function ModuleVerticalStackIllustration({ className }: TIllustrationAsse
         strokeLinejoin="round"
       />
       <path
-        d="M52.2549 9.2767C51.1164 8.69536 49.6437 8.74379 48.0401 9.56251L11.6675 28.0977C8.04379 29.9434 5.10316 35.0156 5.10316 39.4289C5.10316 41.8899 6.01877 43.6244 7.45275 44.3559L5.2921 43.2562C3.85328 42.5246 2.9425 40.7902 2.9425 38.3292C2.9425 33.9207 5.88313 28.8437 9.50683 26.9979L45.8795 8.4628C47.483 7.64407 48.9509 7.59565 50.0942 8.17699L52.2549 9.2767Z"
+        d="M51.4299 8.83904C50.2914 8.25769 48.8187 8.30612 47.2151 9.12485L10.8425 27.66C7.21878 29.5057 4.27815 34.5779 4.27815 38.9913C4.27815 41.4523 5.19376 43.1867 6.62774 43.9182L4.46709 42.8185C3.02827 42.087 2.11749 40.3526 2.11749 37.8915C2.11749 33.483 5.05812 28.406 8.68182 26.5603L45.0545 8.02513C46.658 7.20641 48.1259 7.15798 49.2692 7.73932L51.4299 8.83904Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.35"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
       <path
-        d="M52.2549 9.2767C53.6937 10.0082 54.6044 11.7425 54.6044 14.2035C54.6044 18.6121 51.6638 23.6891 48.0401 25.5349L11.6675 44.07C10.0639 44.8887 8.59604 44.9372 7.45274 44.3559C6.01391 43.6244 5.10315 41.8899 5.10315 39.4289C5.10315 35.0204 8.04377 29.9434 11.6675 28.0976L48.0401 9.56251C49.6437 8.74379 51.1116 8.69536 52.2549 9.2767Z"
+        d="M51.4298 8.83903C52.8687 9.57055 53.7794 11.3049 53.7794 13.7659C53.7794 18.1744 50.8388 23.2514 47.2151 25.0972L10.8425 43.6323C9.23893 44.4511 7.77103 44.4996 6.62772 43.9182C5.1889 43.1867 4.27814 41.4523 4.27814 38.9913C4.27814 34.5827 7.21876 29.5057 10.8425 27.66L47.2151 9.12484C48.8187 8.30612 50.2865 8.25769 51.4298 8.83903Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.35"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
       <path
-        d="M13.2275 35.8925C12.9852 36.0136 12.7914 35.8779 12.7914 35.5872C12.7914 35.2966 12.9852 34.9574 13.2226 34.8363C13.4648 34.7104 13.6586 34.8509 13.6586 35.1416C13.6586 35.4322 13.4648 35.7714 13.2226 35.8925H13.2275Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M12.4024 35.4548C12.1602 35.5759 11.9664 35.4402 11.9664 35.1496C11.9664 34.8589 12.1602 34.5198 12.3976 34.3986C12.6398 34.2727 12.8336 34.4132 12.8336 34.7039C12.8336 34.9946 12.6398 35.3337 12.3976 35.4548H12.4024Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
-        d="M13.2275 39.0704C12.9852 39.1915 12.7914 39.0559 12.7914 38.7653C12.7914 38.4746 12.9852 38.1355 13.2226 38.0143C13.4648 37.8884 13.6586 38.0289 13.6586 38.3196C13.6586 38.6103 13.4648 38.9493 13.2226 39.0704H13.2275Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M12.4024 38.6327C12.1602 38.7539 11.9664 38.6183 11.9664 38.3276C11.9664 38.0369 12.1602 37.6978 12.3976 37.5767C12.6398 37.4507 12.8336 37.5913 12.8336 37.8819C12.8336 38.1726 12.6398 38.5116 12.3976 38.6327H12.4024Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
-        d="M13.2275 32.7145C12.9852 32.8356 12.7914 32.6999 12.7914 32.4092C12.7914 32.1185 12.9852 31.7795 13.2226 31.6584C13.4648 31.5325 13.6586 31.6729 13.6586 31.9636C13.6586 32.2542 13.4648 32.5934 13.2226 32.7145H13.2275Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M12.4024 32.2768C12.1602 32.3979 11.9664 32.2622 11.9664 31.9715C11.9664 31.6809 12.1602 31.3419 12.3976 31.2207C12.6398 31.0948 12.8336 31.2352 12.8336 31.5259C12.8336 31.8166 12.6398 32.1557 12.3976 32.2768H12.4024Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
-        d="M21.061 31.9006L15.4026 34.7831C15.1604 34.9042 14.9666 34.7685 14.9666 34.473C14.9666 34.1775 15.1604 33.8433 15.4026 33.7222L21.061 30.8396C21.3032 30.7185 21.497 30.8542 21.497 31.1497C21.497 31.4452 21.3032 31.7795 21.061 31.9006Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M20.236 31.463L14.5776 34.3454C14.3354 34.4665 14.1416 34.3308 14.1416 34.0353C14.1416 33.7398 14.3354 33.4056 14.5776 33.2845L20.236 30.4019C20.4782 30.2808 20.672 30.4165 20.672 30.712C20.672 31.0076 20.4782 31.3419 20.236 31.463Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
-        d="M21.061 35.0785L15.4026 37.9611C15.1604 38.0822 14.9666 37.9465 14.9666 37.651C14.9666 37.3555 15.1604 37.0212 15.4026 36.9001L21.061 34.0176C21.3032 33.8965 21.497 34.0322 21.497 34.3277C21.497 34.6233 21.3032 34.9574 21.061 35.0785Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M20.236 34.6409L14.5776 37.5235C14.3354 37.6446 14.1416 37.5089 14.1416 37.2133C14.1416 36.9178 14.3354 36.5835 14.5776 36.4624L20.236 33.58C20.4782 33.4588 20.672 33.5946 20.672 33.8901C20.672 34.1856 20.4782 34.5198 20.236 34.6409Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
-        d="M21.061 28.7226L15.4026 31.6051C15.1604 31.7262 14.9666 31.5906 14.9666 31.2951C14.9666 30.9996 15.1604 30.6653 15.4026 30.5442L21.061 27.6617C21.3032 27.5406 21.497 27.6762 21.497 27.9717C21.497 28.2672 21.3032 28.6015 21.061 28.7226Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M20.236 28.2849L14.5776 31.1674C14.3354 31.2885 14.1416 31.1529 14.1416 30.8574C14.1416 30.5619 14.3354 30.2276 14.5776 30.1065L20.236 27.224C20.4782 27.1029 20.672 27.2385 20.672 27.534C20.672 27.8295 20.4782 28.1638 20.236 28.2849Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
-        d="M46.0878 23.2968L41.2917 25.7383C40.7249 26.029 40.2647 25.6996 40.2647 25.0116V19.1741C40.2647 18.4862 40.7249 17.6867 41.2917 17.4009L46.0878 14.9593C46.6546 14.6686 47.1149 14.9981 47.1149 15.686V21.5236C47.1149 22.2115 46.6546 23.0109 46.0878 23.2968ZM41.2917 18.239C41.1028 18.3359 40.9478 18.6023 40.9478 18.83V24.6677C40.9478 24.8954 41.1028 25.0068 41.2917 24.9099L46.0878 22.4683C46.2768 22.3714 46.4318 22.1049 46.4318 21.8772V16.0396C46.4318 15.8119 46.2768 15.7005 46.0878 15.7974L41.2917 18.239Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M45.2628 22.8591L40.4667 25.3006C39.8999 25.5913 39.4397 25.2619 39.4397 24.574V18.7364C39.4397 18.0485 39.8999 17.2491 40.4667 16.9632L45.2628 14.5216C45.8296 14.231 46.2898 14.5604 46.2898 15.2483V21.0859C46.2898 21.7739 45.8296 22.5733 45.2628 22.8591ZM40.4667 17.8013C40.2778 17.8982 40.1228 18.1647 40.1228 18.3924V24.23C40.1228 24.4577 40.2778 24.5691 40.4667 24.4723L45.2628 22.0306C45.4517 21.9337 45.6068 21.6673 45.6068 21.4396V15.602C45.6068 15.3743 45.4517 15.2629 45.2628 15.3597L40.4667 17.8013Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
-        d="M45.0608 18.3989L42.6628 19.6198C42.4738 19.7167 42.3188 19.6101 42.3188 19.3775C42.3188 19.145 42.4738 18.8834 42.6628 18.7865L45.0608 17.5657C45.2497 17.4688 45.4048 17.5754 45.4048 17.8079C45.4048 18.0405 45.2497 18.302 45.0608 18.3989Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M44.2358 17.9613L41.8377 19.1821C41.6488 19.279 41.4938 19.1724 41.4938 18.9399C41.4938 18.7073 41.6488 18.4457 41.8377 18.3489L44.2358 17.128C44.4247 17.0311 44.5797 17.1377 44.5797 17.3703C44.5797 17.6028 44.4247 17.8644 44.2358 17.9613Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
-        d="M44.3729 20.4191L42.3188 21.4656C42.1299 21.5624 41.9749 21.4559 41.9749 21.2233C41.9749 20.9908 42.1299 20.7292 42.3188 20.6323L44.3729 19.5858C44.5618 19.4889 44.7169 19.5955 44.7169 19.828C44.7169 20.0606 44.5618 20.3222 44.3729 20.4191Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M43.5479 19.9814L41.4938 21.0279C41.3049 21.1248 41.1498 21.0182 41.1498 20.7857C41.1498 20.5531 41.3049 20.2915 41.4938 20.1946L43.5479 19.1482C43.7368 19.0513 43.8918 19.1578 43.8918 19.3904C43.8918 19.6229 43.7368 19.8845 43.5479 19.9814Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
-        d="M45.0608 21.7368L43.3459 22.6088C43.1569 22.7057 43.0019 22.5991 43.0019 22.3666C43.0019 22.134 43.1569 21.8724 43.3459 21.7756L45.0608 20.9035C45.2497 20.8066 45.4048 20.9132 45.4048 21.1457C45.4048 21.3783 45.2497 21.6399 45.0608 21.7368Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M44.2358 21.2991L42.5208 22.1711C42.3319 22.268 42.1769 22.1614 42.1769 21.9289C42.1769 21.6964 42.3319 21.4348 42.5208 21.3379L44.2358 20.4659C44.4247 20.369 44.5798 20.4755 44.5798 20.7081C44.5798 20.9406 44.4247 21.2022 44.2358 21.2991Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
-        d="M29.8538 26.9205L28.1388 27.7925C27.761 27.9862 27.4557 27.7682 27.4557 27.308V25.225C27.4557 24.7647 27.761 24.2366 28.1388 24.0428L29.8538 23.1709C30.2317 22.9771 30.5369 23.1951 30.5369 23.6553V25.7384C30.5369 26.1986 30.2317 26.7268 29.8538 26.9205ZM28.1388 24.8762V26.9592L29.8538 26.0873V24.0041L28.1388 24.8762Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M29.0288 26.4829L27.3138 27.3548C26.9359 27.5486 26.6307 27.3306 26.6307 26.8703V24.7873C26.6307 24.3271 26.9359 23.7989 27.3138 23.6051L29.0288 22.7332C29.4066 22.5394 29.7119 22.7574 29.7119 23.2177V25.3007C29.7119 25.7609 29.4066 26.2891 29.0288 26.4829ZM27.3138 24.4385V26.5215L29.0288 25.6496V23.5665L27.3138 24.4385Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
-        d="M33.618 24.9973L31.903 25.8692C31.5252 26.063 31.22 25.845 31.22 25.3847V23.3017C31.22 22.8415 31.5252 22.3133 31.903 22.1195L33.618 21.2476C33.9959 21.0538 34.3011 21.2718 34.3011 21.7321V23.8151C34.3011 24.2754 33.9959 24.8035 33.618 24.9973ZM31.9079 22.9528V25.036L33.6228 24.1639V22.0809L31.9079 22.9528Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M32.793 24.5596L31.078 25.4315C30.7002 25.6253 30.395 25.4073 30.395 24.9471V22.864C30.395 22.4038 30.7002 21.8757 31.078 21.6819L32.793 20.81C33.1709 20.6162 33.4761 20.8342 33.4761 21.2944V23.3775C33.4761 23.8377 33.1709 24.3658 32.793 24.5596ZM31.0829 22.5151V24.5983L32.7978 23.7262V21.6432L31.0829 22.5151Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
-        d="M33.618 29.585L31.903 30.4569C31.5252 30.6507 31.22 30.4327 31.22 29.9725V27.8894C31.22 27.4292 31.5252 26.9011 31.903 26.7073L33.618 25.8354C33.9959 25.6416 34.3011 25.8596 34.3011 26.3198V28.4029C34.3011 28.8631 33.9959 29.3912 33.618 29.585ZM31.9079 27.5406V29.6237L33.6228 28.7518V26.6686L31.9079 27.5406Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M32.793 29.1474L31.078 30.0193C30.7002 30.2131 30.395 29.995 30.395 29.5348V27.4518C30.395 26.9915 30.7002 26.4634 31.078 26.2696L32.793 25.3977C33.1709 25.2039 33.4761 25.4219 33.4761 25.8822V27.9652C33.4761 28.4254 33.1709 28.9536 32.793 29.1474ZM31.0829 27.103V29.186L32.7978 28.3141V26.2309L31.0829 27.103Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
-        d="M29.8538 31.5034L28.1388 32.3755C27.761 32.5693 27.4557 32.3512 27.4557 31.891V29.8079C27.4557 29.3476 27.761 28.8196 28.1388 28.6258L29.8538 27.7538C30.2317 27.56 30.5369 27.778 30.5369 28.2382V30.3214C30.5369 30.7816 30.2317 31.3097 29.8538 31.5034ZM28.1388 29.4591V31.5422L29.8538 30.6702V28.587L28.1388 29.4591Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M29.0288 31.0658L27.3138 31.9378C26.9359 32.1316 26.6307 31.9136 26.6307 31.4533V29.3702C26.6307 28.91 26.9359 28.3819 27.3138 28.1881L29.0288 27.3161C29.4066 27.1223 29.7119 27.3403 29.7119 27.8006V29.8837C29.7119 30.344 29.4066 30.872 29.0288 31.0658ZM27.3138 29.0214V31.1046L29.0288 30.2325V28.1494L27.3138 29.0214Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M5.34069 77.846C4.00845 77.1677 3.16066 75.5642 3.16066 73.2825C3.16066 69.1985 5.88328 64.4993 9.23568 62.794L31.7143 51.3416C33.1967 50.5859 34.5531 50.5374 35.6092 51.0752L33.4486 49.9754C32.3925 49.4377 31.036 49.4862 29.5536 50.2419L7.07502 61.6944C3.71777 63.4045 1 68.1037 1 72.1828C1 74.4645 1.84779 76.068 3.18003 76.7463L5.34069 77.846Z"
+        d="M4.51568 77.4083C3.18344 76.7301 2.33565 75.1266 2.33565 72.8448C2.33565 68.7609 5.05826 64.0616 8.41067 62.3564L30.8892 50.904C32.3717 50.1482 33.7281 50.0997 34.7842 50.6375L32.6236 49.5378C31.5675 49 30.211 49.0485 28.7286 49.8042L6.25001 61.2568C2.89276 62.9669 0.174988 67.666 0.174988 71.7451C0.174988 74.0269 1.02278 75.6304 2.35502 76.3086L4.51568 77.4083Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.35"
         strokeLinecap="round"
         strokeLinejoin="round"
@@ -292,41 +298,41 @@ export function ModuleVerticalStackIllustration({ className }: TIllustrationAsse
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M5.34068 77.846C6.39678 78.3837 7.75325 78.3352 9.23567 77.5795L31.7142 66.1271C35.0715 64.417 37.7893 59.7179 37.7893 55.6388C37.7893 53.357 36.9415 51.7534 35.6092 51.0751C34.5531 50.5374 33.1967 50.5859 31.7142 51.3416L9.23567 62.794C5.87842 64.5041 3.16064 69.2034 3.16064 73.2825C3.16064 75.5642 4.00844 77.1677 5.34068 77.846Z"
+        d="M4.51567 77.4083C5.57177 77.946 6.92823 77.8976 8.41066 77.1418L30.8892 65.6894C34.2465 63.9793 36.9643 59.2802 36.9643 55.2011C36.9643 52.9193 36.1165 51.3157 34.7842 50.6375C33.7281 50.0997 32.3716 50.1482 30.8892 50.904L8.41066 62.3563C5.0534 64.0665 2.33563 68.7657 2.33563 72.8448C2.33563 75.1266 3.18342 76.7301 4.51567 77.4083Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.35"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
       <path
-        d="M12.312 67.1929C12.3944 67.0669 12.5155 67.0137 12.593 67.0669C12.6705 67.1202 12.6754 67.2655 12.6075 67.4012L12.593 67.4303L9.65721 72.5025C9.57485 72.643 9.44405 72.7108 9.36169 72.6527C9.27934 72.5946 9.27934 72.4347 9.36169 72.2893L12.2975 67.2171L12.312 67.1929Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M11.487 66.7552C11.5694 66.6293 11.6905 66.576 11.768 66.6293C11.8455 66.6826 11.8503 66.8279 11.7825 66.9635L11.768 66.9926L8.8322 72.0648C8.74984 72.2053 8.61904 72.2732 8.53668 72.215C8.45433 72.1569 8.45433 71.997 8.53668 71.8517L11.4725 66.7795L11.487 66.7552Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
-        d="M10.1368 68.8836C10.1368 68.6705 9.99631 68.5736 9.82191 68.6608C9.6475 68.748 9.50701 68.9903 9.50701 69.2035C9.50701 69.4166 9.6475 69.5135 9.82191 69.4263C9.99631 69.3391 10.1368 69.0968 10.1368 68.8836ZM10.5534 68.6705C10.5534 69.1646 10.224 69.7314 9.81706 69.9397C9.41012 70.148 9.08069 69.9156 9.08069 69.4214C9.08069 68.9273 9.41012 68.3604 9.81706 68.1521C10.224 67.9438 10.5534 68.1764 10.5534 68.6705Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M9.31179 68.446C9.31179 68.2328 9.1713 68.1359 8.99689 68.2231C8.82249 68.3103 8.682 68.5526 8.682 68.7658C8.682 68.9789 8.82249 69.0758 8.99689 68.9886C9.1713 68.9014 9.31179 68.6591 9.31179 68.446ZM9.72841 68.2328C9.72841 68.727 9.39899 69.2937 8.99205 69.502C8.58511 69.7104 8.25568 69.4779 8.25568 68.9838C8.25568 68.4896 8.58511 67.9228 8.99205 67.7144C9.39899 67.5061 9.72841 67.7387 9.72841 68.2328Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
-        d="M12.4428 70.5163C12.4428 70.3032 12.3023 70.2063 12.1279 70.2935C11.9535 70.3807 11.813 70.6229 11.813 70.836C11.813 71.0492 11.9535 71.146 12.1279 71.0588C12.3023 70.9716 12.4428 70.7295 12.4428 70.5163ZM12.8643 70.3031C12.8643 70.7972 12.5348 71.3641 12.1279 71.5724C11.721 71.7807 11.3915 71.5481 11.3915 71.054C11.3915 70.5599 11.721 69.9931 12.1279 69.7848C12.5348 69.5765 12.8643 69.8089 12.8643 70.3031Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M11.6178 70.0786C11.6178 69.8655 11.4773 69.7686 11.3029 69.8558C11.1285 69.943 10.988 70.1852 10.988 70.3983C10.988 70.6115 11.1285 70.7084 11.3029 70.6212C11.4773 70.534 11.6178 70.2918 11.6178 70.0786ZM12.0393 69.8654C12.0393 70.3595 11.7098 70.9264 11.3029 71.1347C10.896 71.343 10.5665 71.1105 10.5665 70.6163C10.5665 70.1222 10.896 69.5554 11.3029 69.3471C11.7098 69.1388 12.0393 69.3713 12.0393 69.8654Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
-        d="M10.9071 65.3375C10.9071 65.2018 10.9991 65.0468 11.1105 64.9935C11.7645 64.7029 12.3992 64.6061 12.966 64.7272C13.5909 64.858 14.0996 65.2406 14.4533 65.8316C14.8021 66.4227 14.9765 67.2075 14.9571 68.0941C14.9377 68.9855 14.7197 69.9496 14.337 70.8894C13.9494 71.8292 13.4068 72.7109 12.7674 73.4425C12.123 74.174 11.4061 74.7262 10.6842 75.0411C9.96238 75.356 9.26477 75.4287 8.66405 75.2446C8.12146 75.0751 7.67093 74.7069 7.36088 74.1643C7.30759 74.0722 7.35118 73.9027 7.45292 73.7913C7.55465 73.6798 7.67577 73.6701 7.72906 73.7622C8.01004 74.2418 8.40729 74.5663 8.89174 74.7165C9.43433 74.8812 10.0593 74.8183 10.7084 74.5325C11.3576 74.2467 12.0068 73.7524 12.5833 73.0936C13.1598 72.4347 13.6491 71.645 13.9979 70.7973C14.3467 69.9495 14.5356 69.0823 14.555 68.2781C14.5744 67.4788 14.4193 66.7715 14.1044 66.2386C13.7896 65.7057 13.3293 65.3617 12.7674 65.2455C12.2635 65.1389 11.7016 65.2212 11.1202 65.478C11.0088 65.5264 10.9168 65.4635 10.9168 65.3279L10.9071 65.3375Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M10.082 64.8998C10.082 64.7642 10.1741 64.6092 10.2855 64.5559C10.9395 64.2652 11.5742 64.1684 12.141 64.2895C12.7659 64.4203 13.2746 64.8029 13.6282 65.394C13.977 65.985 14.1514 66.7699 14.1321 67.6564C14.1127 68.5478 13.8947 69.5119 13.512 70.4517C13.1244 71.3916 12.5818 72.2733 11.9423 73.0048C11.298 73.7363 10.581 74.2885 9.85921 74.6034C9.13737 74.9183 8.43975 74.991 7.83903 74.8069C7.29645 74.6374 6.84591 74.2692 6.53586 73.7266C6.48257 73.6346 6.52617 73.465 6.6279 73.3536C6.72964 73.2422 6.85076 73.2324 6.90405 73.3245C7.18503 73.8041 7.58228 74.1287 8.06673 74.2788C8.60931 74.4436 9.23426 74.3806 9.88342 74.0948C10.5326 73.809 11.1818 73.3147 11.7583 72.6559C12.3348 71.997 12.824 71.2074 13.1729 70.3596C13.5217 69.5118 13.7106 68.6447 13.73 67.8405C13.7494 67.0411 13.5943 66.3338 13.2794 65.8009C12.9645 65.268 12.5043 64.9241 11.9423 64.8078C11.4385 64.7012 10.8766 64.7836 10.2952 65.0403C10.1838 65.0888 10.0917 65.0259 10.0917 64.8902L10.082 64.8998Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M28.8705 62.7311L20.6445 66.9216C19.9663 67.2655 19.4189 66.8781 19.4189 66.0545C19.4189 65.2309 19.9663 64.2862 20.6445 63.9422L28.8705 59.7518C29.5488 59.4078 30.0962 59.7953 30.0962 60.6188C30.0962 61.4424 29.5488 62.3871 28.8705 62.7311Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M28.0455 62.2934L19.8195 66.4839C19.1413 66.8279 18.5939 66.4404 18.5939 65.6168C18.5939 64.7933 19.1413 63.8485 19.8195 63.5046L28.0455 59.3141C28.7238 58.9701 29.2712 59.3576 29.2712 60.1812C29.2712 61.0047 28.7238 61.9495 28.0455 62.2934Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M157.953 35.6503C158.495 35.3742 158.839 34.7201 158.839 33.79V21.9112C158.839 20.2447 157.73 18.3262 156.359 17.6286L125.62 1.96632C125.015 1.65627 124.458 1.64175 124.027 1.85975L126.187 0.760037C126.618 0.542033 127.176 0.556612 127.781 0.866661L158.52 16.5289C159.891 17.2265 161 19.145 161 20.8115V32.6903C161 33.6204 160.656 34.2745 160.113 34.5506L157.953 35.6503Z"
+        d="M157.128 35.2127C157.67 34.9365 158.014 34.2825 158.014 33.3523V21.4736C158.014 19.807 156.905 17.8886 155.534 17.191L124.795 1.52865C124.19 1.2186 123.633 1.20408 123.202 1.42208L125.362 0.322369C125.793 0.104365 126.351 0.118944 126.956 0.428993L157.695 16.0912C159.066 16.7889 160.175 18.7073 160.175 20.3738V32.2526C160.175 33.1828 159.831 33.8368 159.288 34.113L157.128 35.2127Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.35"
         strokeLinecap="round"
         strokeLinejoin="round"
@@ -334,9 +340,9 @@ export function ModuleVerticalStackIllustration({ className }: TIllustrationAsse
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M157.953 35.6503C157.522 35.8683 156.965 35.8537 156.359 35.5436L125.62 19.8814C124.249 19.1838 123.14 17.2653 123.14 15.5988V3.72C123.14 2.78985 123.484 2.13585 124.027 1.85972C124.458 1.64171 125.015 1.65623 125.62 1.96628L156.359 17.6286C157.73 18.3262 158.839 20.2447 158.839 21.9112V33.79C158.839 34.7201 158.495 35.3742 157.953 35.6503Z"
+        d="M157.128 35.2126C156.697 35.4306 156.139 35.416 155.534 35.1059L124.795 19.4437C123.424 18.7461 122.315 16.8276 122.315 15.1611V3.28233C122.315 2.35218 122.659 1.69819 123.202 1.42205C123.633 1.20405 124.19 1.21856 124.795 1.52861L155.534 17.1909C156.905 17.8885 158.014 19.807 158.014 21.4735V33.3523C158.014 34.2824 157.67 34.9365 157.128 35.2126Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.35"
         strokeLinecap="round"
         strokeLinejoin="round"
@@ -344,32 +350,32 @@ export function ModuleVerticalStackIllustration({ className }: TIllustrationAsse
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M136.244 15.0223L143.376 18.6557C143.962 18.9561 144.437 18.6169 144.437 17.9048C144.437 17.1927 143.962 16.3691 143.376 16.0736L136.244 12.4402C135.658 12.1398 135.184 12.4789 135.184 13.1911C135.184 13.9032 135.658 14.7268 136.244 15.0223Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M135.419 14.5847L142.551 18.2181C143.137 18.5184 143.612 18.1793 143.612 17.4671C143.612 16.755 143.137 15.9314 142.551 15.6359L135.419 12.0025C134.833 11.7021 134.359 12.0413 134.359 12.7534C134.359 13.4656 134.833 14.2891 135.419 14.5847Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M136.753 20.9908L146.752 26.0872C147.576 26.5039 148.24 26.0339 148.24 25.0359C148.24 24.0331 147.571 22.8849 146.752 22.4683L136.753 17.372C135.93 16.9553 135.266 17.4252 135.266 18.4232C135.266 19.426 135.934 20.5742 136.753 20.9908Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M135.928 20.5531L145.927 25.6496C146.751 26.0662 147.415 25.5962 147.415 24.5982C147.415 23.5954 146.746 22.4472 145.927 22.0306L135.928 16.9343C135.105 16.5177 134.441 16.9875 134.441 17.9855C134.441 18.9883 135.109 20.1365 135.928 20.5531Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M130.262 11.3356C130.31 11.4955 130.421 11.6505 130.547 11.7135C130.722 11.8055 130.867 11.699 130.867 11.4809V11.0789C130.867 10.9481 130.819 10.7979 130.731 10.6817C130.644 10.5654 130.538 10.4927 130.436 10.4879L128.377 10.4297C128.256 10.4297 128.174 10.5314 128.174 10.6961V13.4672C128.174 13.6077 128.232 13.7628 128.324 13.8839C128.421 14.005 128.537 14.068 128.634 14.0534L128.929 14.0098C129.084 13.9856 129.142 13.7773 129.065 13.5447C129.012 13.3897 128.915 13.2638 128.808 13.2008V11.2872L130.257 11.3259L130.262 11.3356Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M129.436 10.898C129.485 11.0578 129.596 11.2128 129.722 11.2758C129.897 11.3679 130.042 11.2613 130.042 11.0433V10.6412C130.042 10.5104 129.994 10.3603 129.906 10.244C129.819 10.1277 129.713 10.055 129.611 10.0502L127.552 9.99206C127.431 9.99206 127.349 10.0938 127.349 10.2585V13.0296C127.349 13.1701 127.407 13.3251 127.499 13.4462C127.596 13.5673 127.712 13.6303 127.809 13.6157L128.104 13.5722C128.259 13.5479 128.317 13.3396 128.24 13.1071C128.187 12.952 128.09 12.8261 127.983 12.7631V10.8495L129.432 10.8883L129.436 10.898Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M128.992 9.5044C129.041 9.66427 129.152 9.81931 129.278 9.88229C129.453 9.97434 129.598 9.86777 129.598 9.64976V9.24763C129.598 9.11683 129.549 8.96667 129.462 8.8504C129.375 8.73414 129.268 8.66146 129.167 8.65661L127.108 8.59848C126.987 8.59848 126.904 8.70024 126.904 8.86495V11.636C126.904 11.7765 126.962 11.9315 127.054 12.0526C127.151 12.1737 127.268 12.2367 127.365 12.2222L127.66 12.1786C127.815 12.1544 127.873 11.946 127.796 11.7135C127.742 11.5584 127.646 11.4325 127.539 11.3695V9.45597L128.987 9.4947L128.992 9.5044Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M128.167 9.06674C128.216 9.2266 128.327 9.38164 128.453 9.44462C128.627 9.53667 128.773 9.4301 128.773 9.21209V8.80996C128.773 8.67916 128.724 8.52901 128.637 8.41274C128.55 8.29647 128.443 8.22379 128.342 8.21894L126.283 8.16081C126.162 8.16081 126.079 8.26257 126.079 8.42728V11.1983C126.079 11.3388 126.137 11.4938 126.229 11.615C126.326 11.7361 126.443 11.799 126.54 11.7845L126.835 11.7409C126.99 11.7167 127.048 11.5083 126.971 11.2758C126.917 11.1208 126.82 10.9948 126.714 10.9319V9.0183L128.162 9.05704L128.167 9.06674Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M132.132 12.5807C132.044 12.4596 131.938 12.3869 131.841 12.3869L129.782 12.3287C129.661 12.3287 129.578 12.4353 129.578 12.5904V15.3663C129.578 15.4971 129.627 15.6424 129.714 15.7587C129.806 15.8798 129.913 15.9524 130.01 15.9524L132.064 16.0106C132.19 16.0203 132.272 15.9137 132.272 15.749V12.9731C132.272 12.8423 132.224 12.6969 132.132 12.5807ZM131.637 15.158L130.213 15.1143V13.1911L131.637 13.2347V15.158Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M131.307 12.143C131.219 12.0219 131.113 11.9492 131.016 11.9492L128.957 11.8911C128.836 11.8911 128.753 11.9977 128.753 12.1527V14.9286C128.753 15.0594 128.802 15.2048 128.889 15.321C128.981 15.4421 129.088 15.5148 129.185 15.5148L131.239 15.573C131.365 15.5826 131.447 15.476 131.447 15.3113V12.5354C131.447 12.4046 131.399 12.2593 131.307 12.143ZM130.812 14.7203L129.388 14.6767V12.7534L130.812 12.797V14.7203Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
     </svg>
   );
diff --git a/packages/propel/src/empty-state/assets/vertical-stack/no-access.tsx b/packages/propel/src/empty-state/assets/vertical-stack/no-access.tsx
index 25bbe5675..a74ad6eff 100644
--- a/packages/propel/src/empty-state/assets/vertical-stack/no-access.tsx
+++ b/packages/propel/src/empty-state/assets/vertical-stack/no-access.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper";
 import type { TIllustrationAssetProps } from "../helper";
 
@@ -13,17 +19,17 @@ export function NoAccessVerticalStackIllustration({ className }: TIllustrationAs
     >
       <g opacity="0.2">
         <path
-          d="M0.5 131.812C0.5 133.945 2.097 136.072 5.28537 137.703L46.3392 158.622C52.7216 161.873 63.0656 161.873 69.4479 158.622L155.715 114.668C158.903 113.043 160.5 110.915 160.5 108.782V115.593C160.5 117.726 158.903 119.854 155.715 121.479L69.4479 165.433C63.0656 168.684 52.7216 168.684 46.3392 165.433L5.28537 144.514C2.09135 142.889 0.5 140.756 0.5 138.623V131.812Z"
+          d="M0.25 131.683C0.25 133.816 1.847 135.943 5.03537 137.574L46.0892 158.493C52.4716 161.744 62.8156 161.744 69.1979 158.493L155.465 114.539C158.653 112.914 160.25 110.786 160.25 108.653V115.464C160.25 117.597 158.653 119.725 155.465 121.35L69.1979 165.304C62.8156 168.555 52.4716 168.555 46.0892 165.304L5.03537 144.385C1.84135 142.76 0.25 140.627 0.25 138.494V131.683Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.5"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
         <path
-          d="M0.5 131.811C0.5 129.678 2.097 127.551 5.28537 125.926L91.5521 81.9713C97.9344 78.7208 108.278 78.7208 114.661 81.9713L155.715 102.89C158.909 104.516 160.5 106.649 160.5 108.782C160.5 110.915 158.903 113.042 155.715 114.668L69.4479 158.622C63.0656 161.872 52.7216 161.872 46.3392 158.622L5.28537 137.703C2.09135 136.078 0.5 133.944 0.5 131.811Z"
+          d="M0.25 131.682C0.25 129.549 1.847 127.422 5.03537 125.797L91.3021 81.8424C97.6844 78.5919 108.028 78.5919 114.411 81.8424L155.465 102.761C158.659 104.387 160.25 106.52 160.25 108.653C160.25 110.786 158.653 112.913 155.465 114.539L69.1979 158.493C62.8156 161.743 52.4716 161.743 46.0892 158.493L5.03537 137.574C1.84135 135.949 0.25 133.816 0.25 131.682Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.5"
           strokeLinecap="round"
           strokeLinejoin="round"
@@ -31,48 +37,48 @@ export function NoAccessVerticalStackIllustration({ className }: TIllustrationAs
       </g>
       <g opacity="0.6">
         <path
-          d="M0.5 110.294C0.5 112.427 2.097 114.555 5.28537 116.186L46.3392 137.105C52.7216 140.355 63.0656 140.355 69.4479 137.105L155.715 93.1504C158.903 91.5252 160.5 89.3978 160.5 87.2646V94.076C160.5 96.2091 158.903 98.3365 155.715 99.9617L69.4479 143.916C63.0656 147.167 52.7216 147.167 46.3392 143.916L5.28537 122.997C2.09135 121.372 0.5 119.239 0.5 117.106V110.294Z"
+          d="M0.25 110.165C0.25 112.299 1.847 114.426 5.03537 116.057L46.0892 136.976C52.4716 140.226 62.8156 140.226 69.1979 136.976L155.465 93.0215C158.653 91.3963 160.25 89.2688 160.25 87.1357V93.947C160.25 96.0802 158.653 98.2076 155.465 99.8328L69.1979 143.787C62.8156 147.038 52.4716 147.038 46.0892 143.787L5.03537 122.868C1.84135 121.243 0.25 119.11 0.25 116.977V110.165Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.5"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
         <path
-          d="M0.5 110.294C0.5 108.161 2.097 106.034 5.28537 104.408L91.5521 60.4539C97.9344 57.2035 108.278 57.2035 114.661 60.4539L155.715 81.3731C158.909 82.9983 160.5 85.1314 160.5 87.2645C160.5 89.3976 158.903 91.525 155.715 93.1502L69.4479 137.105C63.0656 140.355 52.7216 140.355 46.3392 137.105L5.28537 116.186C2.09135 114.56 0.5 112.427 0.5 110.294Z"
+          d="M0.25 110.165C0.25 108.032 1.847 105.905 5.03537 104.28L91.3021 60.325C97.6844 57.0746 108.028 57.0746 114.411 60.325L155.465 81.2442C158.659 82.8694 160.25 85.0025 160.25 87.1356C160.25 89.2687 158.653 91.3961 155.465 93.0213L69.1979 136.976C62.8156 140.226 52.4716 140.226 46.0892 136.976L5.03537 116.057C1.84135 114.431 0.25 112.298 0.25 110.165Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.5"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
       </g>
       <path
-        d="M0.5 88.7768C0.5 90.91 2.097 93.0375 5.28537 94.6684L46.3392 115.587C52.7216 118.838 63.0656 118.838 69.4479 115.587L155.715 71.6331C158.903 70.0078 160.5 67.8804 160.5 65.7473V72.5585C160.5 74.6916 158.903 76.8191 155.715 78.4444L69.4479 122.399C63.0656 125.649 52.7216 125.649 46.3392 122.399L5.28537 101.48C2.09135 99.8543 0.5 97.7213 0.5 95.5882V88.7768Z"
+        d="M0.25 88.6479C0.25 90.781 1.847 92.9086 5.03537 94.5395L46.0892 115.458C52.4716 118.709 62.8156 118.709 69.1979 115.458L155.465 71.5042C158.653 69.8789 160.25 67.7515 160.25 65.6184V72.4296C160.25 74.5627 158.653 76.6902 155.465 78.3155L69.1979 122.27C62.8156 125.52 52.4716 125.52 46.0892 122.27L5.03537 101.351C1.84135 99.7254 0.25 97.5924 0.25 95.4592V88.6479Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.5"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
       <path
-        d="M0.5 88.7767C0.5 86.6436 2.097 84.5162 5.28537 82.8909L91.5521 38.9366C97.9344 35.6862 108.278 35.6862 114.661 38.9366L155.715 59.8556C158.909 61.4808 160.5 63.6141 160.5 65.7472C160.5 67.8803 158.903 70.0077 155.715 71.6329L69.4479 115.587C63.0656 118.838 52.7216 118.838 46.3392 115.587L5.28537 94.6682C2.09135 93.043 0.5 90.9098 0.5 88.7767Z"
+        d="M0.25 88.6478C0.25 86.5147 1.847 84.3873 5.03537 82.762L91.3021 38.8077C97.6844 35.5573 108.028 35.5573 114.411 38.8077L155.465 59.7267C158.659 61.3519 160.25 63.4851 160.25 65.6183C160.25 67.7514 158.653 69.8788 155.465 71.504L69.1979 115.458C62.8156 118.709 52.4716 118.709 46.0892 115.458L5.03537 94.5393C1.84135 92.9141 0.25 90.7809 0.25 88.6478Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.5"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
       <path
-        d="M79.0808 85.8819C76.1633 85.8819 73.4546 85.2611 71.0055 84.0366C70.966 84.0253 70.9323 84.0139 70.8928 83.9914L65.8646 81.4295C58.6245 77.7389 54.4712 69.1104 54.4712 57.7508C54.4712 47.7794 57.637 36.7415 63.3817 26.6685C63.3817 26.6685 63.7767 25.9856 63.805 25.9349C69.6625 15.9465 77.4276 8.11946 85.6666 3.91532C89.8651 1.77658 93.9562 0.693115 97.8162 0.693115C100.768 0.693115 103.516 1.33071 105.982 2.58913L111.004 5.14549C111.004 5.14549 111.038 5.16245 111.055 5.17373C118.267 8.87563 122.403 17.487 122.403 28.8297C122.403 38.8181 119.232 49.8674 113.47 59.946C113.385 60.1097 113.165 60.4878 113.064 60.6514C107.206 70.6511 99.4414 78.4668 91.2081 82.6653C87.0209 84.7984 82.9351 85.8819 79.0808 85.8819ZM72.6422 74.3473C73.7765 74.6351 74.9728 74.7875 76.2031 74.7875C79.1996 74.7875 82.3822 73.9409 85.6721 72.2649C91.1685 69.4659 96.5689 64.4606 100.914 58.1403L71.0903 37.0349C67.9189 43.8856 66.2427 50.9282 66.2427 57.4517C66.2427 64.9514 68.5114 70.9445 72.6422 74.353V74.3473ZM105.801 49.5513C108.967 42.6949 110.643 35.6466 110.643 29.1345C110.643 21.6404 108.375 15.6474 104.244 12.239C103.109 11.9455 101.907 11.7988 100.672 11.7988C97.6751 11.7988 94.4922 12.6452 91.2136 14.3212C85.7228 17.1202 80.328 22.1257 75.9771 28.446L105.801 49.5513Z"
+        d="M78.8308 85.753C75.9133 85.753 73.2046 85.1322 70.7555 83.9077C70.716 83.8964 70.6823 83.885 70.6428 83.8625L65.6146 81.3006C58.3745 77.61 54.2212 68.9815 54.2212 57.6219C54.2212 47.6505 57.387 36.6126 63.1317 26.5396C63.1317 26.5396 63.5267 25.8567 63.555 25.8059C69.4125 15.8176 77.1776 7.99055 85.4166 3.78642C89.6151 1.64767 93.7062 0.564209 97.5662 0.564209C100.518 0.564209 103.266 1.20181 105.732 2.46023L110.754 5.01658C110.754 5.01658 110.788 5.03354 110.805 5.04483C118.017 8.74672 122.153 17.3581 122.153 28.7008C122.153 38.6892 118.982 49.7385 113.22 59.8171C113.135 59.9808 112.915 60.3589 112.814 60.5225C106.956 70.5222 99.1914 78.3379 90.9581 82.5364C86.7709 84.6695 82.6851 85.753 78.8308 85.753ZM72.3922 74.2184C73.5265 74.5062 74.7228 74.6586 75.9531 74.6586C78.9496 74.6586 82.1322 73.812 85.4221 72.136C90.9185 69.337 96.3189 64.3317 100.664 58.0114L70.8403 36.906C67.6689 43.7567 65.9927 50.7993 65.9927 57.3228C65.9927 64.8225 68.2614 70.8156 72.3922 74.2241V74.2184ZM105.551 49.4224C108.717 42.566 110.393 35.5177 110.393 29.0056C110.393 21.5115 108.125 15.5185 103.994 12.11C102.859 11.8166 101.657 11.6699 100.422 11.6699C97.4251 11.6699 94.2422 12.5163 90.9636 14.1923C85.4728 16.9913 80.078 21.9968 75.7271 28.3171L105.551 49.4224Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
       />
       <path
-        d="M97.8215 1.25753C100.705 1.25753 103.369 1.88956 105.733 3.09155L110.761 5.65356C110.733 5.63663 110.699 5.6253 110.671 5.61402C117.494 9.0394 121.845 17.2219 121.845 28.8355C121.845 39.0721 118.464 50.0876 112.985 59.6696C112.973 59.6979 112.601 60.3412 112.579 60.3694C107.009 69.8724 99.3678 77.8743 90.9539 82.1631C86.7497 84.3075 82.7374 85.3177 79.0807 85.3177C76.0503 85.3177 73.2627 84.6235 70.8136 83.2974C70.9264 83.3595 71.0393 83.4329 71.1522 83.4893L66.1241 80.9273C59.3523 77.4737 55.0354 69.3137 55.0354 57.7509C55.0354 47.5255 58.41 36.5215 63.8726 26.9508C63.8782 26.9395 64.2675 26.2679 64.2788 26.251C69.8598 16.731 77.5065 8.71768 85.926 4.42326C90.1414 2.27886 94.1591 1.26318 97.8215 1.26318M102.85 3.81954C102.443 3.81954 102.031 3.83073 101.614 3.85894C102.031 3.83637 102.443 3.81954 102.85 3.81954ZM104.244 3.87024C103.894 3.84767 103.544 3.83083 103.188 3.82519C103.544 3.83083 103.894 3.84202 104.244 3.87024ZM101.247 3.89283C100.92 3.92105 100.587 3.94922 100.254 3.98872C100.587 3.94922 100.92 3.91541 101.247 3.89283H101.264C101.264 3.89283 101.253 3.89283 101.247 3.89283ZM105.096 3.96062C105.237 3.97755 105.372 3.99439 105.508 4.01132C105.372 3.99439 105.231 3.97755 105.096 3.96062C104.955 3.94369 104.819 3.93236 104.678 3.91543C104.819 3.92672 104.955 3.94369 105.096 3.96062ZM99.3114 4.1298C99.1647 4.15237 99.0179 4.18067 98.8656 4.20888C99.0123 4.18067 99.1647 4.15802 99.3114 4.1298ZM107.59 4.4402C107.471 4.40634 107.347 4.37817 107.229 4.34431C107.347 4.37253 107.471 4.40634 107.59 4.4402ZM96.2529 4.84649C96.1682 4.86906 96.0892 4.89735 96.0046 4.91992C96.0892 4.89171 96.1682 4.86906 96.2529 4.84649C96.4617 4.78442 96.6649 4.72809 96.8737 4.67166C96.6705 4.72809 96.4617 4.78442 96.2529 4.84649ZM108.803 4.82403C108.911 4.86354 109.018 4.90302 109.119 4.94252C109.012 4.90302 108.905 4.86354 108.803 4.82403C108.674 4.77889 108.549 4.73361 108.419 4.68847C108.549 4.73361 108.679 4.77325 108.803 4.82403ZM95.4064 5.1117C95.1073 5.20764 94.8138 5.32053 94.5147 5.42775C94.8138 5.31489 95.1129 5.20764 95.4064 5.1117C95.4064 5.1117 95.4063 5.1117 95.4119 5.1117C95.4119 5.1117 95.412 5.1117 95.4064 5.1117ZM110.287 5.4334C110.05 5.32054 109.808 5.20764 109.565 5.1117C109.808 5.21328 110.05 5.32618 110.287 5.4334ZM91.8568 6.53943C92.06 6.4435 92.2575 6.35321 92.455 6.26292C92.2575 6.35321 92.0543 6.4435 91.8568 6.53943ZM106.021 50.4035C109.272 43.5753 111.202 36.1377 111.202 29.1346C111.202 21.11 108.657 15.0945 104.503 11.7256C103.29 11.4039 102.009 11.2346 100.671 11.2346C97.6806 11.2346 94.3963 12.0641 90.9597 13.8135C85.0005 16.8495 79.5209 22.1653 75.1983 28.5816L106.027 50.3979M109.683 14.4061C109.745 14.4569 109.808 14.5075 109.87 14.564C109.808 14.5132 109.745 14.4569 109.683 14.4061C109.582 14.3214 109.475 14.2367 109.368 14.152C109.475 14.2367 109.576 14.3214 109.683 14.4061ZM110.705 15.3428C110.552 15.1904 110.394 15.038 110.236 14.8913C110.394 15.038 110.547 15.1904 110.705 15.3428ZM111.489 16.2062H111.495C111.495 16.2062 111.495 16.2062 111.489 16.2062C111.348 16.0369 111.202 15.8675 111.055 15.7039C111.202 15.8675 111.348 16.0313 111.489 16.2062ZM112.245 17.1768C112.104 16.9793 111.958 16.7818 111.811 16.5899C111.958 16.7761 112.104 16.9793 112.245 17.1768ZM112.996 18.3167C112.838 18.0571 112.68 17.8031 112.516 17.5548C112.686 17.8031 112.844 18.0571 112.996 18.3167ZM113.752 19.6823C113.566 19.3042 113.369 18.9375 113.165 18.5876C113.369 18.9431 113.566 19.3099 113.752 19.6823ZM114.65 21.7985C114.689 21.9001 114.723 22.0017 114.762 22.1089C114.728 22.0073 114.689 21.9001 114.65 21.7985C114.593 21.6461 114.537 21.4937 114.475 21.3414C114.531 21.4937 114.593 21.6461 114.65 21.7985ZM115.169 23.4294C115.095 23.1642 115.016 22.9102 114.932 22.6506C115.011 22.9046 115.095 23.1642 115.169 23.4294ZM115.423 24.4113C115.457 24.5468 115.485 24.6822 115.519 24.8176C115.49 24.6822 115.457 24.5468 115.423 24.4113C115.389 24.2759 115.355 24.1405 115.321 24.0107C115.355 24.1461 115.389 24.2759 115.423 24.4113ZM115.795 26.268C115.75 25.9858 115.699 25.7035 115.643 25.427C115.699 25.7035 115.744 25.9858 115.795 26.268ZM116.015 27.831C115.981 27.5206 115.942 27.2046 115.902 26.8999C115.947 27.2046 115.981 27.515 116.015 27.831ZM116.156 29.5071C116.134 29.1459 116.111 28.7904 116.077 28.4405C116.111 28.7904 116.134 29.1516 116.156 29.5071ZM116.23 31.6514C116.23 31.6514 116.23 31.6796 116.23 31.6909C116.23 31.6796 116.23 31.6627 116.23 31.6514C116.23 31.104 116.213 30.5623 116.19 30.0319C116.213 30.5623 116.23 31.0984 116.23 31.6514ZM76.2029 75.3519C79.1994 75.3519 82.4837 74.5224 85.926 72.7673C91.8852 69.7313 97.3703 64.4155 101.693 57.9993L70.8643 36.1885C67.6082 43.0167 65.6782 50.4543 65.6782 57.4518C65.6782 65.482 68.2234 71.4976 72.3767 74.8666C73.5843 75.1882 74.8653 75.3519 76.1971 75.3519M60.1536 62.9821C60.1423 62.7677 60.1198 62.5533 60.1142 62.3388C60.1255 62.5589 60.1423 62.7677 60.1536 62.9821ZM60.2498 64.3026C60.2723 64.5453 60.3003 64.788 60.3286 65.0306C60.3003 64.788 60.2723 64.5509 60.2498 64.3026C60.2498 64.3026 60.2498 64.297 60.2498 64.2913C60.2498 64.2913 60.2498 64.297 60.2498 64.3026ZM60.5939 66.9153C60.5544 66.667 60.5093 66.4188 60.4754 66.1705C60.5093 66.4245 60.5544 66.6727 60.5939 66.9153ZM60.9381 68.71C60.8873 68.4673 60.8308 68.2246 60.7857 67.982C60.8365 68.2303 60.8873 68.4729 60.9381 68.71ZM61.3613 70.4029C61.2992 70.1772 61.2371 69.9458 61.175 69.7088C61.2371 69.9402 61.2936 70.1715 61.3613 70.4029ZM63.0939 74.9851C63.0375 74.8666 62.9809 74.7368 62.9245 74.6183C62.9809 74.7425 63.0318 74.8666 63.0939 74.9851ZM89.3232 76.0854C89.4586 76.029 89.5941 75.9727 89.7238 75.9106C89.5884 75.9727 89.453 76.0234 89.3232 76.0854ZM63.9627 76.5765C63.9176 76.4975 63.8669 76.4241 63.8161 76.3451C63.8613 76.4241 63.9119 76.4975 63.9627 76.5765ZM88.5104 76.4241C88.3918 76.4692 88.2735 76.5144 88.1607 76.5539C88.2792 76.5087 88.3975 76.4692 88.5104 76.4241ZM75.1476 76.5934C75.0404 76.5426 74.933 76.4975 74.8257 76.4467C74.933 76.4975 75.0404 76.5483 75.1476 76.5934ZM76.1012 76.9997C75.9771 76.9546 75.8473 76.9038 75.7232 76.853C75.8473 76.9038 75.9714 76.9489 76.1012 76.9997ZM87.066 76.9376C86.9869 76.9658 86.9022 76.9884 86.8232 77.011C86.9022 76.9884 86.9869 76.9601 87.066 76.9376ZM76.9025 77.2762C76.8235 77.2536 76.7388 77.2255 76.6598 77.1973C76.7388 77.2255 76.8235 77.248 76.9025 77.2762ZM78.0537 77.5753C77.9127 77.5471 77.7715 77.5133 77.636 77.4738C77.7771 77.5076 77.9127 77.5415 78.0537 77.5753ZM64.6174 77.6092C64.7133 77.7446 64.8094 77.8744 64.9053 78.0098C64.8094 77.8744 64.7077 77.7446 64.6174 77.6092C64.6174 77.6092 64.6174 77.6092 64.6174 77.6035C64.6174 77.6035 64.6174 77.6036 64.6174 77.6092ZM78.9002 77.7333C78.951 77.7446 79.0073 77.7503 79.0581 77.7559C79.0073 77.7503 78.951 77.739 78.9002 77.7333C78.8099 77.7164 78.7253 77.7051 78.6406 77.6881C78.7253 77.7051 78.8156 77.7164 78.9002 77.7333ZM83.776 77.7107C83.6292 77.7333 83.4825 77.7558 83.3414 77.7727C83.4881 77.7558 83.6349 77.7277 83.776 77.7107ZM79.8145 77.8405C79.775 77.8405 79.741 77.8349 79.7015 77.8292C79.741 77.8292 79.775 77.8349 79.8145 77.8405ZM82.2296 77.8801C82.3425 77.8744 82.4554 77.8575 82.5683 77.8518C82.4554 77.8631 82.3425 77.8744 82.2296 77.8801ZM81.152 77.9138C81.0617 77.9138 80.9768 77.9083 80.8921 77.9026C80.9768 77.9026 81.0673 77.9138 81.152 77.9138ZM65.6556 78.9917C65.5936 78.9184 65.5374 78.8506 65.481 78.7772C65.5374 78.8506 65.5992 78.924 65.6556 78.9917ZM66.8069 80.2727C66.6714 80.1373 66.5418 80.0019 66.412 79.8608C66.5418 80.0019 66.6771 80.1373 66.8069 80.2727ZM67.4109 80.8596C67.5519 80.9894 67.6872 81.1135 67.8283 81.2377C67.6872 81.1135 67.5463 80.9894 67.4109 80.8596C67.4109 80.8596 67.4107 80.8596 67.4051 80.854C67.4051 80.854 67.4052 80.854 67.4109 80.8596ZM68.7991 82.0164C68.6862 81.9317 68.5788 81.8471 68.4659 81.7568C68.5788 81.8415 68.6862 81.9317 68.7991 82.0164ZM69.9164 82.7783C69.9615 82.8065 70.001 82.8346 70.0462 82.8572C70.001 82.829 69.9615 82.8008 69.9164 82.7783ZM97.8215 0.128906C93.8657 0.128906 89.6956 1.235 85.4124 3.41325C77.0775 7.66253 69.2278 15.5685 63.3025 25.6754C63.2066 25.8334 62.9696 26.251 62.8906 26.3864C57.0951 36.5384 53.9067 47.6779 53.9067 57.7452C53.9067 69.325 58.1731 78.1396 65.6107 81.9318L70.6386 84.4938V84.4825C73.2006 85.7861 76.0334 86.4463 79.0807 86.4463C83.0309 86.4463 87.1956 85.3402 91.4675 83.1676C99.7968 78.924 107.641 71.0293 113.555 60.9394C113.673 60.7475 113.865 60.4202 113.967 60.2283C119.774 50.0707 122.973 38.9198 122.973 28.8355C122.973 17.2501 118.707 8.44126 111.269 4.65471L106.241 2.08706C103.691 0.789137 100.858 0.128906 97.816 0.128906H97.8215ZM76.7559 28.305C80.9996 22.2725 86.1912 17.5098 91.4675 14.818C94.6671 13.1871 97.7653 12.3575 100.671 12.3575C101.817 12.3575 102.929 12.4873 103.978 12.7469C107.912 16.0594 110.073 21.8606 110.073 29.1233C110.073 35.3646 108.515 42.1026 105.564 48.6881L76.7501 28.2994L76.7559 28.305ZM72.9016 73.8338C68.9684 70.527 66.8069 64.7202 66.8069 57.4518C66.8069 51.2105 68.3644 44.4726 71.3214 37.8927L100.135 58.2758C95.8916 64.3027 90.6999 69.0711 85.4179 71.7628C82.2126 73.3937 79.1146 74.2233 76.2084 74.2233C75.0685 74.2233 73.9624 74.0934 72.9071 73.8338H72.9016Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        d="M97.5715 1.12863C100.455 1.12863 103.119 1.76066 105.483 2.96265L110.511 5.52465C110.483 5.50772 110.449 5.4964 110.421 5.48511C117.244 8.9105 121.595 17.093 121.595 28.7066C121.595 38.9432 118.214 49.9587 112.735 59.5407C112.723 59.569 112.351 60.2123 112.329 60.2405C106.759 69.7435 99.1178 77.7454 90.7039 82.0342C86.4997 84.1786 82.4874 85.1888 78.8307 85.1888C75.8003 85.1888 73.0127 84.4946 70.5636 83.1685C70.6764 83.2306 70.7893 83.304 70.9022 83.3604L65.8741 80.7984C59.1023 77.3448 54.7854 69.1848 54.7854 57.622C54.7854 47.3966 58.16 36.3926 63.6226 26.8218C63.6282 26.8106 64.0175 26.139 64.0288 26.1221C69.6098 16.6021 77.2565 8.58878 85.676 4.29435C89.8914 2.14996 93.9091 1.13428 97.5715 1.13428M102.6 3.69063C102.193 3.69063 101.781 3.70182 101.364 3.73004C101.781 3.70746 102.193 3.69063 102.6 3.69063ZM103.994 3.74133C103.644 3.71876 103.294 3.70193 102.938 3.69628C103.294 3.70193 103.644 3.71312 103.994 3.74133ZM100.997 3.76393C100.67 3.79214 100.337 3.82032 100.004 3.85982C100.337 3.82032 100.67 3.7865 100.997 3.76393H101.014C101.014 3.76393 101.003 3.76393 100.997 3.76393ZM104.846 3.83171C104.987 3.84864 105.122 3.86548 105.258 3.88241C105.122 3.86548 104.981 3.84864 104.846 3.83171C104.705 3.81478 104.569 3.80345 104.428 3.78652C104.569 3.79781 104.705 3.81478 104.846 3.83171ZM99.0614 4.0009C98.9147 4.02347 98.7679 4.05176 98.6156 4.07998C98.7623 4.05176 98.9147 4.02911 99.0614 4.0009ZM107.34 4.3113C107.221 4.27744 107.097 4.24927 106.979 4.21541C107.097 4.24362 107.221 4.27744 107.34 4.3113ZM96.0029 4.71759C95.9182 4.74016 95.8392 4.76845 95.7546 4.79102C95.8392 4.7628 95.9182 4.74016 96.0029 4.71759C96.2117 4.65551 96.4149 4.59918 96.6237 4.54275C96.4205 4.59918 96.2117 4.65551 96.0029 4.71759ZM108.553 4.69513C108.661 4.73463 108.768 4.77411 108.869 4.81361C108.762 4.77411 108.655 4.73463 108.553 4.69513C108.424 4.64998 108.299 4.60471 108.169 4.55956C108.299 4.60471 108.429 4.64434 108.553 4.69513ZM95.1564 4.9828C94.8573 5.07873 94.5638 5.19163 94.2647 5.29884C94.5638 5.18598 94.8629 5.07873 95.1564 4.9828C95.1564 4.9828 95.1563 4.9828 95.1619 4.9828C95.1619 4.9828 95.162 4.9828 95.1564 4.9828ZM110.037 5.30449C109.8 5.19163 109.558 5.07873 109.315 4.9828C109.558 5.08437 109.8 5.19727 110.037 5.30449ZM91.6068 6.41053C91.81 6.31459 92.0075 6.22431 92.205 6.13402C92.0075 6.22431 91.8043 6.31459 91.6068 6.41053ZM105.771 50.2746C109.022 43.4464 110.952 36.0088 110.952 29.0057C110.952 20.9811 108.407 14.9656 104.253 11.5967C103.04 11.275 101.759 11.1057 100.421 11.1057C97.4306 11.1057 94.1463 11.9352 90.7097 13.6846C84.7505 16.7206 79.2709 22.0364 74.9483 28.4527L105.777 50.269M109.433 14.2772C109.495 14.328 109.558 14.3786 109.62 14.435C109.558 14.3843 109.495 14.328 109.433 14.2772C109.332 14.1925 109.225 14.1078 109.118 14.0231C109.225 14.1078 109.326 14.1925 109.433 14.2772ZM110.455 15.2139C110.302 15.0615 110.144 14.9091 109.986 14.7624C110.144 14.9091 110.297 15.0615 110.455 15.2139ZM111.239 16.0773H111.245C111.245 16.0773 111.245 16.0773 111.239 16.0773C111.098 15.908 110.952 15.7386 110.805 15.575C110.952 15.7386 111.098 15.9024 111.239 16.0773ZM111.995 17.0479C111.854 16.8504 111.708 16.6529 111.561 16.461C111.708 16.6472 111.854 16.8504 111.995 17.0479ZM112.746 18.1878C112.588 17.9282 112.43 17.6742 112.266 17.4259C112.436 17.6742 112.594 17.9282 112.746 18.1878ZM113.502 19.5534C113.316 19.1753 113.119 18.8086 112.915 18.4587C113.119 18.8142 113.316 19.181 113.502 19.5534ZM114.4 21.6696C114.439 21.7712 114.473 21.8728 114.512 21.98C114.478 21.8784 114.439 21.7712 114.4 21.6696C114.343 21.5172 114.287 21.3648 114.225 21.2125C114.281 21.3648 114.343 21.5172 114.4 21.6696ZM114.919 23.3005C114.845 23.0353 114.766 22.7813 114.682 22.5217C114.761 22.7757 114.845 23.0353 114.919 23.3005ZM115.173 24.2824C115.207 24.4179 115.235 24.5533 115.269 24.6887C115.24 24.5533 115.207 24.4179 115.173 24.2824C115.139 24.147 115.105 24.0116 115.071 23.8818C115.105 24.0172 115.139 24.147 115.173 24.2824ZM115.545 26.139C115.5 25.8569 115.449 25.5746 115.393 25.2981C115.449 25.5746 115.494 25.8569 115.545 26.139ZM115.765 27.7021C115.731 27.3917 115.692 27.0757 115.652 26.771C115.697 27.0757 115.731 27.3861 115.765 27.7021ZM115.906 29.3782C115.884 29.017 115.861 28.6614 115.827 28.3116C115.861 28.6614 115.884 29.0227 115.906 29.3782ZM115.98 31.5225C115.98 31.5225 115.98 31.5507 115.98 31.562C115.98 31.5507 115.98 31.5338 115.98 31.5225C115.98 30.9751 115.963 30.4334 115.94 29.903C115.963 30.4334 115.98 30.9695 115.98 31.5225ZM75.9529 75.223C78.9494 75.223 82.2337 74.3935 85.676 72.6384C91.6352 69.6024 97.1203 64.2866 101.443 57.8704L70.6143 36.0596C67.3582 42.8878 65.4282 50.3254 65.4282 57.3229C65.4282 65.3531 67.9734 71.3687 72.1267 74.7377C73.3343 75.0593 74.6153 75.223 75.9471 75.223M59.9036 62.8532C59.8923 62.6387 59.8698 62.4244 59.8642 62.2099C59.8755 62.43 59.8923 62.6387 59.9036 62.8532ZM59.9998 64.1737C60.0223 64.4164 60.0503 64.6591 60.0786 64.9017C60.0503 64.6591 60.0223 64.422 59.9998 64.1737C59.9998 64.1737 59.9998 64.1681 59.9998 64.1624C59.9998 64.1624 59.9998 64.1681 59.9998 64.1737ZM60.3439 66.7864C60.3044 66.5381 60.2593 66.2899 60.2254 66.0416C60.2593 66.2956 60.3044 66.5438 60.3439 66.7864ZM60.6881 68.5811C60.6373 68.3384 60.5808 68.0957 60.5357 67.8531C60.5865 68.1014 60.6373 68.344 60.6881 68.5811ZM61.1113 70.274C61.0492 70.0483 60.9871 69.8169 60.925 69.5799C60.9871 69.8113 61.0436 70.0426 61.1113 70.274ZM62.8439 74.8561C62.7875 74.7376 62.7309 74.6079 62.6745 74.4894C62.7309 74.6135 62.7818 74.7376 62.8439 74.8561ZM89.0732 75.9565C89.2086 75.9001 89.3441 75.8438 89.4738 75.7817C89.3384 75.8438 89.203 75.8945 89.0732 75.9565ZM63.7127 76.4476C63.6676 76.3686 63.6169 76.2952 63.5661 76.2162C63.6113 76.2952 63.6619 76.3686 63.7127 76.4476ZM88.2604 76.2952C88.1418 76.3403 88.0235 76.3855 87.9107 76.425C88.0292 76.3798 88.1475 76.3403 88.2604 76.2952ZM74.8976 76.4645C74.7904 76.4137 74.683 76.3686 74.5757 76.3178C74.683 76.3686 74.7904 76.4194 74.8976 76.4645ZM75.8512 76.8708C75.7271 76.8256 75.5973 76.7748 75.4732 76.7241C75.5973 76.7748 75.7214 76.82 75.8512 76.8708ZM86.816 76.8087C86.7369 76.8369 86.6522 76.8595 86.5732 76.8821C86.6522 76.8595 86.7369 76.8312 86.816 76.8087ZM76.6525 77.1473C76.5735 77.1247 76.4888 77.0966 76.4098 77.0684C76.4888 77.0966 76.5735 77.1191 76.6525 77.1473ZM77.8037 77.4464C77.6627 77.4182 77.5215 77.3844 77.386 77.3449C77.5271 77.3787 77.6627 77.4125 77.8037 77.4464ZM64.3674 77.4803C64.4633 77.6157 64.5594 77.7455 64.6553 77.8809C64.5594 77.7455 64.4577 77.6157 64.3674 77.4803C64.3674 77.4803 64.3674 77.4803 64.3674 77.4746C64.3674 77.4746 64.3674 77.4746 64.3674 77.4803ZM78.6502 77.6044C78.701 77.6157 78.7573 77.6214 78.8081 77.627C78.7573 77.6214 78.701 77.6101 78.6502 77.6044C78.5599 77.5875 78.4753 77.5762 78.3906 77.5592C78.4753 77.5762 78.5656 77.5875 78.6502 77.6044ZM83.526 77.5818C83.3792 77.6044 83.2325 77.6269 83.0914 77.6438C83.2381 77.6269 83.3849 77.5988 83.526 77.5818ZM79.5645 77.7116C79.525 77.7116 79.491 77.706 79.4515 77.7003C79.491 77.7003 79.525 77.706 79.5645 77.7116ZM81.9796 77.7512C82.0925 77.7455 82.2054 77.7286 82.3183 77.7229C82.2054 77.7342 82.0925 77.7455 81.9796 77.7512ZM80.902 77.7849C80.8117 77.7849 80.7268 77.7794 80.6421 77.7737C80.7268 77.7737 80.8173 77.7849 80.902 77.7849ZM65.4056 78.8628C65.3436 78.7895 65.2874 78.7217 65.231 78.6483C65.2874 78.7217 65.3492 78.7951 65.4056 78.8628ZM66.5569 80.1438C66.4214 80.0084 66.2918 79.873 66.162 79.7319C66.2918 79.873 66.4271 80.0084 66.5569 80.1438ZM67.1609 80.7307C67.3019 80.8605 67.4372 80.9846 67.5783 81.1088C67.4372 80.9846 67.2963 80.8605 67.1609 80.7307C67.1609 80.7307 67.1607 80.7307 67.1551 80.7251C67.1551 80.7251 67.1552 80.7251 67.1609 80.7307ZM68.5491 81.8875C68.4362 81.8028 68.3288 81.7182 68.2159 81.6279C68.3288 81.7126 68.4362 81.8028 68.5491 81.8875ZM69.6664 82.6494C69.7115 82.6776 69.751 82.7057 69.7962 82.7283C69.751 82.7001 69.7115 82.6719 69.6664 82.6494ZM97.5715 0C93.6157 0 89.4456 1.10609 85.1624 3.28434C76.8275 7.53363 68.9778 15.4396 63.0525 25.5465C62.9566 25.7045 62.7196 26.1221 62.6406 26.2575C56.8451 36.4095 53.6567 47.549 53.6567 57.6163C53.6567 69.1961 57.9231 78.0107 65.3607 81.8029L70.3886 84.3649V84.3536C72.9506 85.6572 75.7834 86.3174 78.8307 86.3174C82.7809 86.3174 86.9456 85.2113 91.2175 83.0387C99.5468 78.7951 107.391 70.9004 113.305 60.8104C113.423 60.6186 113.615 60.2913 113.717 60.0994C119.524 49.9418 122.723 38.7908 122.723 28.7066C122.723 17.1212 118.457 8.31235 111.019 4.52581L105.991 1.95815C103.441 0.66023 100.608 0 97.566 0H97.5715ZM76.5059 28.1761C80.7496 22.1436 85.9412 17.3809 91.2175 14.6891C94.4171 13.0582 97.5153 12.2286 100.421 12.2286C101.567 12.2286 102.679 12.3584 103.728 12.618C107.662 15.9305 109.823 21.7317 109.823 28.9944C109.823 35.2357 108.265 41.9737 105.314 48.5592L76.5001 28.1705L76.5059 28.1761ZM72.6516 73.7049C68.7184 70.398 66.5569 64.5912 66.5569 57.3229C66.5569 51.0816 68.1144 44.3437 71.0714 37.7638L99.8853 58.1469C95.6416 64.1738 90.4499 68.9422 85.1679 71.6339C81.9626 73.2648 78.8646 74.0944 75.9584 74.0944C74.8185 74.0944 73.7124 73.9645 72.6571 73.7049H72.6516Z"
+        fill="var(--illustration-stroke-tertiary)"
       />
       <path
-        d="M110.693 53.7047C114.158 46.679 116.229 38.9479 116.229 31.6909C116.229 22.233 112.702 15.5516 107.161 12.7244L102.133 10.1624C107.674 12.9839 111.202 19.6653 111.202 29.1289C111.202 36.3859 109.13 44.117 105.666 51.1427L110.693 53.7047Z"
+        d="M110.443 53.5758C113.908 46.5501 115.979 38.819 115.979 31.562C115.979 22.1041 112.452 15.4227 106.911 12.5955L101.883 10.0334C107.424 12.855 110.952 19.5364 110.952 29C110.952 36.257 108.88 43.9881 105.416 51.0138L110.443 53.5758Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
         stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
         strokeWidth="0.5"
@@ -80,7 +86,7 @@ export function NoAccessVerticalStackIllustration({ className }: TIllustrationAs
         strokeLinejoin="round"
       />
       <path
-        d="M74.7525 76.4128C79.1428 78.6531 84.7974 78.4669 90.9597 75.3293C96.9188 72.2933 102.404 66.9774 106.727 60.5611L101.698 57.9993C97.3758 64.4155 91.8907 69.7313 85.9315 72.7673C79.7692 75.9049 74.115 76.0911 69.7246 73.8507L74.7525 76.4128Z"
+        d="M74.5025 76.2838C78.8928 78.5242 84.5474 78.338 90.7097 75.2004C96.6688 72.1644 102.154 66.8485 106.477 60.4322L101.448 57.8704C97.1258 64.2866 91.6407 69.6024 85.6815 72.6384C79.5192 75.776 73.865 75.9622 69.4746 73.7218L74.5025 76.2838Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
         stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
         strokeWidth="0.5"
@@ -88,7 +94,7 @@ export function NoAccessVerticalStackIllustration({ className }: TIllustrationAs
         strokeLinejoin="round"
       />
       <path
-        d="M106.721 60.5611L71.22 35.438L66.1919 32.876L101.693 57.9992L106.721 60.5611Z"
+        d="M106.471 60.4322L70.97 35.3091L65.9419 32.7471L101.443 57.8703L106.471 60.4322Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
         stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
         strokeWidth="0.5"
@@ -96,7 +102,7 @@ export function NoAccessVerticalStackIllustration({ className }: TIllustrationAs
         strokeLinejoin="round"
       />
       <path
-        d="M110.761 5.65368C105.395 2.9224 98.4873 3.14804 90.9537 6.97973C82.5341 11.2742 74.8877 19.2875 69.3067 28.8075C69.2954 28.8244 68.9059 29.4959 68.9002 29.5072C63.4377 39.078 60.0633 50.082 60.0633 60.3074C60.0633 71.8702 64.3802 80.0358 71.152 83.4838L66.1239 80.9218C59.3521 77.4738 55.0352 69.3082 55.0352 57.7454C55.0352 47.52 58.4098 36.516 63.8724 26.9452C63.878 26.9339 64.2673 26.2624 64.2785 26.2455C69.8596 16.7255 77.5063 8.71215 85.9258 4.41772C93.4594 0.580392 100.366 0.354749 105.733 3.09167L110.761 5.65368Z"
+        d="M110.511 5.52477C105.145 2.79349 98.2373 3.01914 90.7037 6.85082C82.2841 11.1453 74.6377 19.1586 69.0567 28.6786C69.0454 28.6955 68.6559 29.367 68.6502 29.3783C63.1877 38.9491 59.8133 49.9531 59.8133 60.1785C59.8133 71.7412 64.1302 79.9069 70.902 83.3549L65.8739 80.7929C59.1021 77.3449 54.7852 69.1792 54.7852 57.6165C54.7852 47.3911 58.1598 36.3871 63.6224 26.8163C63.628 26.805 64.0173 26.1335 64.0285 26.1166C69.6096 16.5966 77.2563 8.58325 85.6758 4.28882C93.2094 0.451486 100.116 0.225843 105.483 2.96276L110.511 5.52477Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
         stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
         strokeWidth="0.5"
@@ -104,7 +110,7 @@ export function NoAccessVerticalStackIllustration({ className }: TIllustrationAs
         strokeLinejoin="round"
       />
       <path
-        d="M90.9539 75.3238C77.021 82.4228 65.6782 74.404 65.6782 57.4464C65.6782 50.1949 67.7494 42.4638 71.22 35.4381L106.721 60.5556C102.398 66.9718 96.913 72.2878 90.9539 75.3238ZM110.694 53.7049L75.1928 28.5816C79.5154 22.1654 84.9947 16.8496 90.9539 13.8136C104.892 6.70888 116.229 14.7334 116.229 31.691C116.229 38.9481 114.158 46.6792 110.694 53.7049ZM90.9539 6.97969C82.5343 11.2741 74.8879 19.2875 69.3069 28.8074C69.2956 28.8244 68.9061 29.4959 68.9004 29.5072C63.4379 39.0779 60.0635 50.082 60.0635 60.3073C60.0635 81.0346 73.9229 90.8367 90.9539 82.1575C99.3678 77.8688 107.009 69.8669 112.579 60.3638C112.601 60.3356 112.973 59.6923 112.985 59.6641C118.464 50.082 121.845 39.0665 121.845 28.8299C121.845 8.10265 107.99 -1.69946 90.9539 6.97969Z"
+        d="M90.7039 75.1949C76.771 82.2939 65.4282 74.2751 65.4282 57.3174C65.4282 50.066 67.4994 42.3349 70.97 35.3092L106.471 60.4267C102.148 66.8429 96.663 72.1589 90.7039 75.1949ZM110.444 53.576L74.9428 28.4527C79.2654 22.0365 84.7447 16.7207 90.7039 13.6847C104.642 6.57997 115.979 14.6045 115.979 31.5621C115.979 38.8192 113.908 46.5503 110.444 53.576ZM90.7039 6.85078C82.2843 11.1452 74.6379 19.1586 69.0569 28.6785C69.0456 28.6955 68.6561 29.367 68.6504 29.3783C63.1879 38.949 59.8135 49.9531 59.8135 60.1784C59.8135 80.9057 73.6729 90.7078 90.7039 82.0286C99.1178 77.7398 106.759 69.7379 112.329 60.2349C112.351 60.2067 112.723 59.5634 112.735 59.5352C118.214 49.9531 121.595 38.9376 121.595 28.701C121.595 7.97375 107.74 -1.82836 90.7039 6.85078Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
         stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
         strokeWidth="0.5"
@@ -114,17 +120,17 @@ export function NoAccessVerticalStackIllustration({ className }: TIllustrationAs
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M88.9565 64.3195C88.697 64.3195 88.4431 64.3139 88.1892 64.3026C88.0311 64.297 87.8788 64.2575 87.7433 64.1841L82.7152 61.6221C82.2976 61.4077 82.055 60.9393 82.0663 60.3694C82.1566 53.4339 86.6033 45.573 92.1675 42.2548L89.2445 40.7651C87.7378 39.9976 86.8743 38.2369 86.8743 35.9345C86.8743 31.8771 89.6 27.182 92.9464 25.4778C93.7985 25.0433 94.6337 24.8232 95.4293 24.8232C96.0557 24.8232 96.6369 24.9587 97.1617 25.2295L102.19 27.7915C103.697 28.559 104.56 30.3196 104.56 32.622C104.56 35.7483 102.963 39.2922 100.599 41.5494L105.277 43.9308C107.827 45.2287 109.317 48.2309 109.368 52.1642C109.379 52.7737 109.103 53.4508 108.657 53.9248C105.452 57.3502 102.032 59.9969 98.4879 61.7914C95.1979 63.4674 91.9871 64.3195 88.9623 64.3195H88.9565Z"
+        d="M88.7065 64.1906C88.447 64.1906 88.1931 64.185 87.9392 64.1737C87.7811 64.1681 87.6288 64.1286 87.4933 64.0552L82.4652 61.4932C82.0476 61.2788 81.805 60.8104 81.8163 60.2404C81.9066 53.305 86.3533 45.4441 91.9175 42.1259L88.9945 40.6362C87.4878 39.8687 86.6243 38.108 86.6243 35.8056C86.6243 31.7482 89.35 27.0531 92.6964 25.3489C93.5485 24.9144 94.3837 24.6943 95.1793 24.6943C95.8057 24.6943 96.3869 24.8298 96.9117 25.1006L101.94 27.6626C103.447 28.4301 104.31 30.1907 104.31 32.4931C104.31 35.6193 102.713 39.1633 100.349 41.4205L105.027 43.8019C107.577 45.0998 109.067 48.102 109.118 52.0353C109.129 52.6448 108.853 53.3219 108.407 53.7959C105.202 57.2213 101.782 59.868 98.2379 61.6625C94.9479 63.3385 91.7371 64.1906 88.7123 64.1906H88.7065Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
       />
       <path
-        d="M95.4233 25.3877C95.9594 25.3877 96.4617 25.5061 96.9019 25.7318L101.93 28.2938C103.194 28.9371 103.995 30.4607 103.995 32.6221C103.995 35.9346 102.11 39.6647 99.5711 41.6963C99.7121 41.7527 99.8533 41.8035 99.9888 41.8712L105.017 44.4332C107.291 45.5901 108.753 48.3101 108.803 52.17C108.809 52.6327 108.589 53.1688 108.245 53.5412C105.101 56.8932 101.687 59.5399 98.2336 61.2949C94.9493 62.9709 91.8175 63.761 88.9621 63.761C88.7138 63.761 88.4654 63.7553 88.2228 63.744C88.1438 63.744 88.0705 63.7214 88.0084 63.6876L82.9803 61.1255C82.7602 61.0127 82.6305 60.7476 82.6361 60.3864C82.7264 53.2365 87.5344 45.116 93.3694 42.2549C93.3694 42.2549 93.375 42.2549 93.3807 42.2549L89.5038 40.2798C88.2397 39.6365 87.4383 38.1129 87.4383 35.9516C87.4383 32.0748 90.0173 27.6166 93.2057 25.997C93.9958 25.5964 94.7463 25.4046 95.4291 25.4046M95.4233 24.259C94.5373 24.259 93.6177 24.5017 92.6866 24.9757C89.1088 26.7985 86.3042 31.612 86.3042 35.9346C86.3042 38.4571 87.2804 40.3983 88.9847 41.2674L91.0331 42.3114C85.7116 45.9851 81.5864 53.6033 81.5017 60.3582C81.4904 61.1482 81.8517 61.8084 82.4612 62.1187L87.4893 64.6808C87.6981 64.788 87.9238 64.8444 88.1608 64.8614C88.426 64.8727 88.6911 64.8783 88.9563 64.8783C92.0769 64.8783 95.3671 64.0092 98.7417 62.2881C102.336 60.4597 105.813 57.7736 109.063 54.3031C109.605 53.7218 109.938 52.8979 109.926 52.1474C109.875 47.9997 108.267 44.8226 105.525 43.4231L101.535 41.3915C103.696 39.0327 105.124 35.6411 105.124 32.6221C105.124 30.0996 104.148 28.1584 102.444 27.2893L97.4155 24.7273C96.8117 24.4169 96.14 24.259 95.4233 24.259Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        d="M95.1733 25.2588C95.7094 25.2588 96.2117 25.3772 96.6519 25.6029L101.68 28.1649C102.944 28.8082 103.745 30.3318 103.745 32.4932C103.745 35.8057 101.86 39.5358 99.3211 41.5674C99.4621 41.6238 99.6033 41.6746 99.7388 41.7423L104.767 44.3043C107.041 45.4612 108.503 48.1812 108.553 52.0411C108.559 52.5038 108.339 53.0399 107.995 53.4123C104.851 56.7643 101.437 59.4109 97.9836 61.166C94.6993 62.842 91.5675 63.6321 88.7121 63.6321C88.4638 63.6321 88.2154 63.6264 87.9728 63.6151C87.8938 63.6151 87.8205 63.5925 87.7584 63.5587L82.7303 60.9966C82.5102 60.8838 82.3805 60.6187 82.3861 60.2575C82.4764 53.1076 87.2844 44.9871 93.1194 42.126C93.1194 42.126 93.125 42.126 93.1307 42.126L89.2538 40.1509C87.9897 39.5076 87.1883 37.984 87.1883 35.8227C87.1883 31.9459 89.7673 27.4877 92.9557 25.8681C93.7458 25.4675 94.4963 25.2757 95.1791 25.2757M95.1733 24.1301C94.2873 24.1301 93.3677 24.3728 92.4366 24.8468C88.8588 26.6695 86.0542 31.4831 86.0542 35.8057C86.0542 38.3282 87.0304 40.2694 88.7347 41.1385L90.7831 42.1825C85.4616 45.8562 81.3364 53.4744 81.2517 60.2293C81.2404 61.0193 81.6017 61.6795 82.2112 61.9898L87.2393 64.5518C87.4481 64.6591 87.6738 64.7155 87.9108 64.7325C88.176 64.7438 88.4411 64.7494 88.7063 64.7494C91.8269 64.7494 95.1171 63.8803 98.4917 62.1592C102.086 60.3308 105.563 57.6447 108.813 54.1742C109.355 53.5929 109.688 52.769 109.676 52.0185C109.625 47.8708 108.017 44.6937 105.275 43.2942L101.285 41.2626C103.446 38.9038 104.874 35.5122 104.874 32.4932C104.874 29.9707 103.898 28.0295 102.194 27.1604L97.1655 24.5984C96.5617 24.288 95.89 24.1301 95.1733 24.1301Z"
+        fill="var(--illustration-stroke-tertiary)"
       />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M105.011 44.4331C103.216 43.5189 100.908 43.5697 98.3914 44.8112C92.5564 47.6722 87.7485 55.7928 87.6582 62.9426C87.6582 63.3038 87.7823 63.5746 88.0023 63.6818L82.9745 61.1198C82.7544 61.0069 82.6244 60.7361 82.6301 60.3806C82.7203 53.2308 87.5283 45.1102 93.3633 42.2491C95.8858 41.0133 98.1882 40.9569 99.9827 41.8711L105.011 44.4331Z"
+        d="M104.761 44.3042C102.966 43.39 100.658 43.4408 98.1414 44.6822C92.3064 47.5433 87.4985 55.6639 87.4082 62.8137C87.4082 63.1749 87.5323 63.4456 87.7523 63.5529L82.7245 60.9909C82.5044 60.878 82.3744 60.6072 82.3801 60.2517C82.4703 53.1019 87.2783 44.9813 93.1133 42.1202C95.6358 40.8844 97.9382 40.828 99.7327 41.7422L104.761 44.3042Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
         stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
         strokeWidth="0.5"
@@ -134,7 +140,7 @@ export function NoAccessVerticalStackIllustration({ className }: TIllustrationAs
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M105.011 44.4331C107.285 45.5899 108.747 48.3099 108.798 52.1698C108.803 52.6325 108.583 53.1686 108.239 53.541C105.096 56.8931 101.682 59.5397 98.228 61.2947C94.6559 63.1118 91.2642 63.8962 88.2169 63.7439C88.1379 63.7439 88.0646 63.7212 88.0025 63.6874C87.7825 63.5745 87.6527 63.3038 87.6584 62.9482C87.7487 55.7984 92.5566 47.6778 98.3916 44.8168C100.914 43.5809 103.217 43.5245 105.011 44.4387V44.4331Z"
+        d="M104.761 44.3042C107.035 45.461 108.497 48.181 108.548 52.0409C108.553 52.5036 108.333 53.0397 107.989 53.4121C104.846 56.7642 101.432 59.4108 97.978 61.1658C94.4059 62.9829 91.0142 63.7673 87.9669 63.615C87.8879 63.615 87.8146 63.5923 87.7525 63.5585C87.5325 63.4456 87.4027 63.1749 87.4084 62.8193C87.4987 55.6695 92.3066 47.5489 98.1416 44.6879C100.664 43.452 102.967 43.3956 104.761 44.3098V44.3042Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
         stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
         strokeWidth="0.5"
@@ -144,7 +150,7 @@ export function NoAccessVerticalStackIllustration({ className }: TIllustrationAs
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M101.93 28.2937C100.925 27.7858 99.6387 27.8253 98.2279 28.5419C95.0451 30.1672 92.4605 34.6197 92.4605 38.4965C92.4605 40.6578 93.2619 42.1814 94.5259 42.8247L89.4978 40.2627C88.2338 39.6194 87.4326 38.0958 87.4326 35.9345C87.4326 32.0577 90.0114 27.5996 93.1997 25.9801C94.6105 25.2634 95.9028 25.2181 96.9017 25.7317L101.93 28.2937Z"
+        d="M101.68 28.1648C100.675 27.6569 99.3887 27.6963 97.9779 28.413C94.7951 30.0382 92.2105 34.4908 92.2105 38.3676C92.2105 40.5289 93.0119 42.0525 94.2759 42.6958L89.2478 40.1338C87.9838 39.4905 87.1826 37.9669 87.1826 35.8056C87.1826 31.9288 89.7614 27.4707 92.9497 25.8512C94.3605 25.1345 95.6528 25.0892 96.6517 25.6028L101.68 28.1648Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
         stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
         strokeWidth="0.5"
@@ -154,7 +160,7 @@ export function NoAccessVerticalStackIllustration({ className }: TIllustrationAs
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M101.93 28.2937C103.194 28.937 103.995 30.4606 103.995 32.622C103.995 36.4988 101.416 40.957 98.2279 42.5765C96.8171 43.2932 95.5248 43.3383 94.5259 42.8248C93.2619 42.1815 92.4604 40.6579 92.4604 38.4966C92.4604 34.6197 95.0395 30.1616 98.2279 28.542C99.6386 27.8253 100.931 27.7802 101.93 28.2937Z"
+        d="M101.68 28.1648C102.944 28.8081 103.745 30.3317 103.745 32.4931C103.745 36.3699 101.166 40.8281 97.9779 42.4476C96.5671 43.1643 95.2748 43.2094 94.2759 42.6959C93.0119 42.0526 92.2104 40.529 92.2104 38.3677C92.2104 34.4908 94.7895 30.0327 97.9779 28.4131C99.3886 27.6964 100.681 27.6513 101.68 28.1648Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
         stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
         strokeWidth="0.5"
diff --git a/packages/propel/src/empty-state/assets/vertical-stack/page.tsx b/packages/propel/src/empty-state/assets/vertical-stack/page.tsx
index d790f529c..59400321a 100644
--- a/packages/propel/src/empty-state/assets/vertical-stack/page.tsx
+++ b/packages/propel/src/empty-state/assets/vertical-stack/page.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper";
 import type { TIllustrationAssetProps } from "../helper";
 
@@ -14,9 +20,9 @@ export function PageVerticalStackIllustration({ className }: TIllustrationAssetP
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M15.0958 52.8764C13.8691 52.2518 12.2935 52.3024 10.566 53.1859C6.66646 55.1722 3.50967 60.6305 3.50967 65.3685C3.50967 68.0132 4.4944 69.8814 6.04185 70.6692L3.53218 69.3918C1.98474 68.604 1 66.7359 1 64.0911C1 59.3475 4.1624 53.8893 8.05633 51.9085C9.77821 51.0307 11.3594 50.9744 12.5861 51.5991L15.0958 52.8764Z"
+        d="M14.2958 52.3993C13.0691 51.7747 11.4935 51.8254 9.76603 52.7088C5.86647 54.6952 2.70968 60.1534 2.70968 64.8914C2.70968 67.5362 3.69442 69.4043 5.24186 70.1921L2.73219 68.9148C1.18475 68.127 0.200012 66.2588 0.200012 63.6141C0.200012 58.8705 3.36241 53.4122 7.25634 51.4315C8.97823 50.5537 10.5594 50.4974 11.7861 51.122L14.2958 52.3993Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.4"
         strokeLinecap="round"
         strokeLinejoin="round"
@@ -24,9 +30,9 @@ export function PageVerticalStackIllustration({ className }: TIllustrationAssetP
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M15.0957 52.8766C16.6432 53.6644 17.6279 55.5326 17.6279 58.1773C17.6279 62.921 14.4655 68.3792 10.5715 70.3599C8.84966 71.2378 7.26846 71.294 6.04176 70.6694C4.49432 69.8816 3.50958 68.0135 3.50958 65.3687C3.50958 60.6251 6.672 55.1669 10.5659 53.1861C12.2878 52.3083 13.869 52.252 15.0957 52.8766Z"
+        d="M14.2957 52.3996C15.8432 53.1874 16.8279 55.0556 16.8279 57.7003C16.8279 62.4439 13.6655 67.9022 9.77156 69.8829C8.04968 70.7607 6.46848 70.817 5.24178 70.1924C3.69433 69.4046 2.70959 67.5364 2.70959 64.8917C2.70959 60.1481 5.87201 54.6898 9.76594 52.7091C11.4878 51.8313 13.069 51.775 14.2957 52.3996Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.4"
         strokeLinecap="round"
         strokeLinejoin="round"
@@ -34,40 +40,40 @@ export function PageVerticalStackIllustration({ className }: TIllustrationAssetP
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M12.2541 62.4879C12.451 62.1503 12.7155 61.8802 12.9969 61.7339L14.5837 60.9236C14.775 60.8279 14.9326 60.9348 14.9326 61.1712C14.9326 61.4075 14.775 61.6776 14.5837 61.7733L12.9969 62.5836C12.9068 62.6286 12.8168 62.7186 12.7493 62.8368C12.6818 62.955 12.648 63.0787 12.648 63.1913V65.1214C12.648 65.3577 12.4904 65.6278 12.2991 65.7235C12.1078 65.8191 11.9502 65.7122 11.9502 65.4759V63.5458C11.9502 63.2082 12.0628 62.8255 12.2597 62.4879H12.2541Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M11.4541 62.0109C11.6511 61.6732 11.9155 61.4031 12.1969 61.2568L13.7837 60.4465C13.975 60.3509 14.1326 60.4578 14.1326 60.6941C14.1326 60.9305 13.975 61.2006 13.7837 61.2962L12.1969 62.1065C12.1068 62.1515 12.0168 62.2416 11.9493 62.3597C11.8818 62.4779 11.848 62.6017 11.848 62.7142V64.6443C11.848 64.8807 11.6904 65.1508 11.4991 65.2464C11.3078 65.3421 11.1502 65.2352 11.1502 64.9988V63.0687C11.1502 62.7311 11.2628 62.3485 11.4597 62.0109H11.4541Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M9.50252 58.5546C9.69384 58.4589 9.85139 58.5658 9.85139 58.8022V59.5112C9.85139 59.7363 9.92455 59.9163 10.054 60.0064C10.1834 60.0964 10.3635 60.0964 10.5492 60.0064C10.8249 59.8657 11.095 59.8657 11.2919 60.0064C11.4889 60.147 11.6014 60.4115 11.6014 60.7548C11.6014 60.9855 11.759 61.098 11.9503 61.0024C12.0403 60.9573 12.1304 60.8673 12.1979 60.7491C12.2654 60.6366 12.2992 60.5072 12.2992 60.3946C12.2992 59.6913 12.7719 58.8753 13.3458 58.5827L14.4543 58.02C14.6457 57.9244 14.8032 58.0313 14.8032 58.2676C14.8032 58.5039 14.6457 58.774 14.4543 58.8697L13.3458 59.4324C13.1545 59.5281 12.9969 59.8038 12.9969 60.0345C12.9969 60.3721 12.8844 60.7548 12.6874 61.0924C12.4905 61.43 12.226 61.7001 11.9447 61.8464C11.3651 62.139 10.898 61.807 10.898 61.1036C10.898 60.9911 10.8587 60.9011 10.7968 60.8561C10.7349 60.811 10.6448 60.811 10.5492 60.8561C10.1778 61.0474 9.82326 61.0474 9.55879 60.8561C9.29432 60.6704 9.14801 60.3102 9.14801 59.8601V59.1511C9.14801 58.9147 9.30557 58.6446 9.49689 58.549L9.50252 58.5546Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M8.70253 58.0775C8.89385 57.9819 9.05141 58.0888 9.05141 58.3251V59.0341C9.05141 59.2592 9.12457 59.4393 9.25399 59.5293C9.38341 59.6194 9.56348 59.6194 9.74917 59.5293C10.0249 59.3886 10.295 59.3886 10.4919 59.5293C10.6889 59.67 10.8014 59.9345 10.8014 60.2777C10.8014 60.5084 10.959 60.621 11.1503 60.5253C11.2403 60.4803 11.3304 60.3903 11.3979 60.2721C11.4654 60.1596 11.4992 60.0301 11.4992 59.9176C11.4992 59.2142 11.9719 58.3983 12.5458 58.1057L13.6544 57.543C13.8457 57.4473 14.0032 57.5542 14.0032 57.7906C14.0032 58.0269 13.8457 58.297 13.6544 58.3927L12.5458 58.9554C12.3545 59.051 12.1969 59.3267 12.1969 59.5575C12.1969 59.8951 12.0844 60.2777 11.8875 60.6153C11.6905 60.953 11.426 61.2231 11.1447 61.3694C10.5651 61.662 10.098 61.33 10.098 60.6266C10.098 60.5141 10.0587 60.424 9.99677 60.379C9.93487 60.334 9.84483 60.334 9.74917 60.379C9.37779 60.5703 9.02328 60.5703 8.7588 60.379C8.49433 60.1933 8.34802 59.8332 8.34802 59.383V58.674C8.34802 58.4377 8.50558 58.1676 8.6969 58.0719L8.70253 58.0775Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M7.42047 63.2983C7.42047 63.062 7.57803 62.7919 7.76935 62.6962L8.79909 62.1729C9.07482 62.0322 9.34492 62.0322 9.54187 62.1729C9.73882 62.3136 9.85135 62.578 9.85135 62.9213V63.3489C9.85135 63.4615 9.89075 63.5515 9.95265 63.5965C10.0202 63.6416 10.1046 63.6416 10.2002 63.5965C10.476 63.4559 10.7461 63.4559 10.943 63.5965C11.14 63.7372 11.2525 64.0017 11.2525 64.3449V66.0274C11.2525 66.2638 11.0949 66.5339 10.9036 66.6295C10.7123 66.7252 10.5547 66.6183 10.5547 66.3819V64.6994C10.5547 64.5869 10.5153 64.4969 10.4535 64.4519C10.3859 64.4068 10.3015 64.4068 10.2059 64.4519C9.93013 64.5925 9.66003 64.5925 9.46308 64.4519C9.26614 64.3112 9.1536 64.0467 9.1536 63.7035V63.2758C9.1536 63.1633 9.11422 63.0732 9.05232 63.0282C8.98479 62.9832 8.90039 62.9832 8.80473 63.0282L7.77496 63.5515C7.58364 63.6472 7.42609 63.5403 7.42609 63.3039L7.42047 63.2983Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M6.62048 62.8213C6.62048 62.5849 6.77804 62.3148 6.96936 62.2192L7.9991 61.6958C8.27483 61.5552 8.54493 61.5552 8.74188 61.6958C8.93883 61.8365 9.05136 62.101 9.05136 62.4442V62.8719C9.05136 62.9844 9.09077 63.0745 9.15266 63.1195C9.22019 63.1645 9.30458 63.1645 9.40024 63.1195C9.67597 62.9788 9.94607 62.9788 10.143 63.1195C10.34 63.2602 10.4525 63.5246 10.4525 63.8679V65.5504C10.4525 65.7867 10.2949 66.0568 10.1036 66.1525C9.9123 66.2481 9.75475 66.1412 9.75475 65.9049V64.2224C9.75475 64.1099 9.71536 64.0198 9.65346 63.9748C9.58594 63.9298 9.50153 63.9298 9.40587 63.9748C9.13015 64.1155 8.86004 64.1155 8.66309 63.9748C8.46615 63.8341 8.35361 63.5697 8.35361 63.2264V62.7987C8.35361 62.6862 8.31423 62.5962 8.25233 62.5512C8.1848 62.5061 8.1004 62.5061 8.00474 62.5512L6.97497 63.0745C6.78365 63.1701 6.6261 63.0632 6.6261 62.8269L6.62048 62.8213Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M11.2469 57.9466C9.50811 58.8301 8.10135 61.2666 8.10135 63.3824C8.10135 65.4981 9.50811 66.4941 11.2469 65.6107C12.9856 64.7272 14.3924 62.2907 14.3924 60.1749C14.3924 58.0591 12.9856 57.0632 11.2469 57.9466ZM7.40359 63.7369C7.40359 61.154 9.12548 58.1773 11.2525 57.0969C13.3795 56.0165 15.1014 57.232 15.1014 59.8204C15.1014 62.4089 13.3795 65.38 11.2525 66.4604C9.12548 67.5408 7.40359 66.3253 7.40359 63.7369Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M10.4469 57.4696C8.70812 58.353 7.30136 60.7895 7.30136 62.9053C7.30136 65.0211 8.70812 66.0171 10.4469 65.1336C12.1857 64.2502 13.5924 61.8136 13.5924 59.6979C13.5924 57.5821 12.1857 56.5861 10.4469 57.4696ZM6.60361 63.2598C6.60361 60.677 8.32549 57.7003 10.4525 56.6199C12.5796 55.5395 14.3014 56.7549 14.3014 59.3434C14.3014 61.9318 12.5796 64.9029 10.4525 65.9833C8.32549 67.0637 6.60361 65.8483 6.60361 63.2598Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <g opacity="0.2">
         <path
-          d="M1.45563 140.366C1.45563 142.493 3.04808 144.614 6.22737 146.241L47.1643 167.1C53.5285 170.341 63.8429 170.341 70.2071 167.1L156.228 123.271C159.407 121.65 161 119.529 161 117.402V124.194C161 126.321 159.407 128.442 156.228 130.063L70.2071 173.892C63.8429 177.133 53.5285 177.133 47.1643 173.892L6.22737 153.033C3.04245 151.412 1.45563 149.285 1.45563 147.158V140.366Z"
+          d="M0.65564 139.889C0.65564 142.016 2.24809 144.137 5.42738 145.764L46.3643 166.623C52.7285 169.864 63.0429 169.864 69.4072 166.623L155.428 122.794C158.607 121.173 160.2 119.052 160.2 116.925V123.717C160.2 125.844 158.607 127.965 155.428 129.586L69.4072 173.415C63.0429 176.656 52.7285 176.656 46.3643 173.415L5.42738 152.556C2.24246 150.935 0.65564 148.808 0.65564 146.681V139.889Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.4"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
         <path
-          d="M1.45569 140.366C1.45569 138.239 3.04814 136.118 6.22743 134.497L92.2484 90.6678C98.6126 87.4266 108.927 87.4266 115.291 90.6678L156.228 111.527C159.413 113.148 161 115.275 161 117.402C161 119.529 159.407 121.65 156.228 123.271L70.2072 167.1C63.843 170.341 53.5286 170.341 47.1644 167.1L6.22743 146.241C3.04251 144.62 1.45569 142.493 1.45569 140.366Z"
+          d="M0.655701 139.889C0.655701 137.762 2.24815 135.641 5.42744 134.02L91.4484 90.1908C97.8126 86.9496 108.127 86.9496 114.491 90.1908L155.428 111.05C158.613 112.671 160.2 114.798 160.2 116.925C160.2 119.052 158.607 121.173 155.428 122.794L69.4072 166.623C63.043 169.864 52.7286 169.864 46.3644 166.623L5.42744 145.764C2.24252 144.143 0.655701 142.016 0.655701 139.889Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.4"
           strokeLinecap="round"
           strokeLinejoin="round"
@@ -75,48 +81,48 @@ export function PageVerticalStackIllustration({ className }: TIllustrationAssetP
       </g>
       <g opacity="0.6">
         <path
-          d="M1.45563 118.91C1.45563 121.037 3.04808 123.159 6.22737 124.785L47.1643 145.644C53.5285 148.886 63.8429 148.886 70.2071 145.644L156.228 101.815C159.407 100.195 161 98.0732 161 95.9462V102.738C161 104.865 159.407 106.986 156.228 108.607L70.2071 152.436C63.8429 155.677 53.5285 155.677 47.1643 152.436L6.22737 131.577C3.04245 129.956 1.45563 127.829 1.45563 125.702V118.91Z"
+          d="M0.65564 118.433C0.65564 120.56 2.24809 122.682 5.42738 124.308L46.3643 145.167C52.7285 148.409 63.0429 148.409 69.4072 145.167L155.428 101.338C158.607 99.7176 160.2 97.5961 160.2 95.4691V102.261C160.2 104.388 158.607 106.509 155.428 108.13L69.4072 151.959C63.0429 155.2 52.7285 155.2 46.3643 151.959L5.42738 131.1C2.24246 129.479 0.65564 127.352 0.65564 125.225V118.433Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.4"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
         <path
-          d="M1.45569 118.91C1.45569 116.783 3.04814 114.662 6.22743 113.041L92.2484 69.2119C98.6126 65.9707 108.927 65.9707 115.291 69.2119L156.228 90.0714C159.413 91.692 161 93.8191 161 95.9461C161 98.0731 159.407 100.195 156.228 101.815L70.2072 145.644C63.843 148.886 53.5286 148.886 47.1644 145.644L6.22743 124.785C3.04251 123.164 1.45569 121.037 1.45569 118.91Z"
+          d="M0.655701 118.433C0.655701 116.306 2.24815 114.185 5.42744 112.564L91.4484 68.7348C97.8126 65.4937 108.127 65.4937 114.491 68.7348L155.428 89.5944C158.613 91.215 160.2 93.342 160.2 95.469C160.2 97.5961 158.607 99.7175 155.428 101.338L69.4072 145.167C63.043 148.408 52.7286 148.408 46.3644 145.167L5.42744 124.308C2.24252 122.687 0.655701 120.56 0.655701 118.433Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.4"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
       </g>
       <path
-        d="M1.45569 97.4541C1.45569 99.5811 3.04814 101.702 6.22743 103.329L47.1644 124.188C53.5286 127.429 63.843 127.429 70.2072 124.188L156.228 80.359C159.407 78.7384 161 76.617 161 74.49V81.2819C161 83.4089 159.407 85.5303 156.228 87.1509L70.2072 130.98C63.843 134.221 53.5286 134.221 47.1644 130.98L6.22743 110.121C3.04251 108.5 1.45569 106.373 1.45569 104.246V97.4541Z"
+        d="M0.655701 96.977C0.655701 99.104 2.24815 101.225 5.42744 102.852L46.3644 123.711C52.7286 126.952 63.043 126.952 69.4072 123.711L155.428 79.882C158.607 78.2614 160.2 76.14 160.2 74.0129V80.8048C160.2 82.9318 158.607 85.0532 155.428 86.6738L69.4072 130.503C63.043 133.744 52.7286 133.744 46.3644 130.503L5.42744 109.644C2.24252 108.023 0.655701 105.896 0.655701 103.769V96.977Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.4"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
       <path
-        d="M1.45575 97.454C1.45575 95.327 3.0482 93.2056 6.22749 91.585L92.2485 47.7557C98.6127 44.5145 108.927 44.5145 115.291 47.7557L156.228 68.6153C159.413 70.2359 161 72.3629 161 74.4899C161 76.617 159.408 78.7384 156.228 80.359L70.2073 124.188C63.8431 127.429 53.5286 127.429 47.1644 124.188L6.22749 103.329C3.04257 101.708 1.45575 99.581 1.45575 97.454Z"
+        d="M0.655762 96.9769C0.655762 94.8499 2.24821 92.7285 5.4275 91.1079L91.4485 47.2787C97.8127 44.0375 108.127 44.0375 114.491 47.2787L155.428 68.1382C158.613 69.7588 160.2 71.8858 160.2 74.0129C160.2 76.1399 158.608 78.2613 155.428 79.8819L69.4073 123.711C63.0431 126.952 52.7286 126.952 46.3644 123.711L5.4275 102.852C2.24258 101.231 0.655762 99.104 0.655762 96.9769Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.4"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
       <path
-        d="M69.352 97.8585C68.7049 97.8585 68.0972 97.7178 67.5514 97.4364L62.5377 94.8818C60.9677 94.0827 60.0674 92.2483 60.0674 89.8512V31.1046C60.0674 26.8674 62.9147 21.9662 66.4091 20.1824L93.5653 6.34547C93.6441 6.30608 93.7341 6.28357 93.8185 6.28357C93.9029 6.28357 93.993 6.30608 94.0717 6.34547L99.0855 8.90016C99.0855 8.90016 99.1305 8.92829 99.153 8.93954L114.239 19.6085C114.391 19.7154 114.475 19.8842 114.475 20.0699V67.8043C114.475 72.0415 111.628 76.9427 108.134 78.7264L71.9236 97.1776C71.0345 97.6278 70.168 97.8585 69.3408 97.8585H69.352Z"
+        d="M68.552 97.3814C67.9049 97.3814 67.2972 97.2407 66.7514 96.9594L61.7377 94.4047C60.1677 93.6057 59.2674 91.7712 59.2674 89.3741V30.6275C59.2674 26.3903 62.1147 21.4892 65.6091 19.7054L92.7653 5.86842C92.8441 5.82903 92.9341 5.80652 93.0186 5.80652C93.103 5.80652 93.193 5.82903 93.2717 5.86842L98.2855 8.4231C98.2855 8.4231 98.3305 8.45124 98.353 8.46249L113.439 19.1314C113.591 19.2383 113.675 19.4071 113.675 19.5928V67.3273C113.675 71.5644 110.828 76.4656 107.334 78.2494L71.1236 96.7005C70.2345 97.1507 69.368 97.3814 68.5408 97.3814H68.552Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
       />
       <path
-        d="M93.8241 6.84648L98.8378 9.40117L113.924 20.0701V67.8045C113.924 71.8616 111.223 76.5265 107.886 78.2258L71.676 96.677C70.8488 97.099 70.061 97.296 69.3464 97.296C68.7837 97.296 68.266 97.1722 67.8046 96.9358L62.7908 94.3811C61.4685 93.7059 60.6301 92.1134 60.6301 89.8514V31.1048C60.6301 27.0477 63.331 22.3828 66.6623 20.6834L93.8185 6.84648M93.8241 5.72107C93.6497 5.72107 93.4752 5.76046 93.3121 5.84486L66.1558 19.6818C62.4251 21.5838 59.5046 26.5975 59.5046 31.1048V89.8514C59.5046 92.4679 60.5175 94.4881 62.2844 95.3828L67.2981 97.9375C67.9227 98.2582 68.6148 98.4158 69.352 98.4158C70.2692 98.4158 71.2258 98.1682 72.1937 97.673L108.404 79.2218C112.135 77.3199 115.055 72.3062 115.055 67.7989V20.0757C115.055 19.71 114.881 19.3667 114.577 19.1585L99.4906 8.48959C99.4455 8.45582 99.4005 8.42769 99.3499 8.40518L94.3362 5.85049C94.173 5.76609 93.9985 5.7267 93.8241 5.7267V5.72107Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        d="M93.0241 6.36943L98.0378 8.92412L113.124 19.593V67.3275C113.124 71.3846 110.423 76.0494 107.086 77.7488L70.876 96.1999C70.0488 96.622 69.261 96.8189 68.5464 96.8189C67.9837 96.8189 67.466 96.6951 67.0046 96.4588L61.9909 93.9041C60.6685 93.2288 59.8301 91.6364 59.8301 89.3743V30.6277C59.8301 26.5706 62.5311 21.9058 65.8623 20.2064L93.0185 6.36943M93.0241 5.24402C92.8497 5.24402 92.6753 5.28341 92.5121 5.36781L65.3558 19.2048C61.6251 21.1067 58.7047 26.1204 58.7047 30.6277V89.3743C58.7047 91.9909 59.7175 94.011 61.4844 94.9057L66.4981 97.4604C67.1227 97.7812 67.8149 97.9387 68.552 97.9387C69.4692 97.9387 70.4258 97.6911 71.3937 97.1959L107.604 78.7448C111.335 76.8428 114.255 71.8291 114.255 67.3218V19.5987C114.255 19.2329 114.081 18.8897 113.777 18.6815L98.6906 8.01254C98.6456 7.97877 98.6005 7.95064 98.5499 7.92813L93.5362 5.37344C93.373 5.28903 93.1986 5.24965 93.0241 5.24965V5.24402Z"
+        fill="var(--illustration-stroke-tertiary)"
       />
       <path
-        d="M98.8378 9.40088L71.6816 23.2378C68.3503 24.9372 65.6493 29.6021 65.6493 33.6592V92.4058C65.6493 94.6678 66.4878 96.2603 67.8101 96.9356L62.7964 94.3809C61.4741 93.7056 60.6356 92.1132 60.6356 89.8511V31.1045C60.6356 27.0474 63.3366 22.3825 66.6678 20.6832L93.8241 6.84619L98.8378 9.40088Z"
+        d="M98.0378 8.92383L70.8816 22.7608C67.5503 24.4602 64.8494 29.125 64.8494 33.1821V91.9287C64.8494 94.1908 65.6878 95.7833 67.0101 96.4585L61.9964 93.9038C60.6741 93.2286 59.8356 91.6361 59.8356 89.374V30.6274C59.8356 26.5703 62.5366 21.9055 65.8679 20.2061L93.0241 6.36914L98.0378 8.92383Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
         stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
         strokeWidth="0.4"
@@ -124,7 +130,7 @@ export function PageVerticalStackIllustration({ className }: TIllustrationAssetP
         strokeLinejoin="round"
       />
       <path
-        d="M98.8376 9.40088L113.924 20.0754V67.8098C113.924 71.867 111.223 76.5318 107.892 78.2312L71.6814 96.6823C70.2071 97.4307 68.8566 97.4757 67.81 96.9468C66.4876 96.2716 65.6492 94.6791 65.6492 92.417V33.6704C65.6492 29.6133 68.3502 24.9485 71.6814 23.2491L98.8376 9.41213V9.40088Z"
+        d="M98.0376 8.92383L113.124 19.5984V67.3328C113.124 71.3899 110.423 76.0547 107.092 77.7541L70.8814 96.2053C69.4071 96.9537 68.0566 96.9987 67.01 96.4697C65.6876 95.7945 64.8492 94.202 64.8492 91.94V33.1934C64.8492 29.1363 67.5502 24.4714 70.8814 22.772L98.0376 8.93508V8.92383Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
         stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
         strokeWidth="0.4"
@@ -132,34 +138,30 @@ export function PageVerticalStackIllustration({ className }: TIllustrationAssetP
         strokeLinejoin="round"
       />
       <path
-        d="M98.8376 9.40088V20.4187C98.8376 24.4758 101.539 26.3834 104.87 24.6896L113.924 20.0754"
+        d="M98.0377 8.92383V19.9416C98.0377 23.9987 100.739 25.9063 104.07 24.2126L113.124 19.5984"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
       />
       <path
-        d="M98.8376 9.40088V20.4187C98.8376 24.4758 101.539 26.3834 104.87 24.6896L113.924 20.0754"
+        d="M98.0377 8.92383V19.9416C98.0377 23.9987 100.739 25.9063 104.07 24.2126L113.124 19.5984"
         stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
         strokeWidth="0.4"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
       <path
-        d="M94.3305 36.4898L77.0329 45.3018C75.9638 45.8476 75.0972 45.2343 75.0972 43.9344C75.0972 42.6346 75.9638 41.1434 77.0329 40.5976L94.3305 31.7856C95.3997 31.2398 96.2663 31.8531 96.2663 33.153C96.2663 34.4528 95.3997 35.944 94.3305 36.4898Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M93.5306 66.0128L76.233 74.8248C75.1638 75.3706 74.2972 74.7572 74.2972 73.4574C74.2972 72.1575 75.1638 70.6664 76.233 70.1205L93.5306 61.3086C94.5997 60.7627 95.4663 61.3761 95.4663 62.6759C95.4663 63.9758 94.5997 65.467 93.5306 66.0128Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
-        d="M102.535 48.1601L77.033 61.153C75.9639 61.6988 75.0973 61.0855 75.0973 59.7856C75.0973 58.4858 75.9639 56.9946 77.033 56.4488L102.535 43.4559C103.604 42.9101 104.471 43.5234 104.471 44.8233C104.471 46.1231 103.604 47.6143 102.535 48.1601Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      />
-      <path
-        d="M102.535 61.9242L77.033 74.9171C75.9639 75.4629 75.0973 74.8495 75.0973 73.5497C75.0973 72.2498 75.9639 70.7587 77.033 70.2128L102.535 57.2199C103.604 56.6741 104.471 57.2875 104.471 58.5873C104.471 59.8872 103.604 61.3783 102.535 61.9242Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M101.735 47.6831L76.233 60.676C75.1639 61.2218 74.2973 60.6084 74.2973 59.3086C74.2973 58.0087 75.1639 56.5176 76.233 55.9717L101.735 42.9788C102.804 42.433 103.671 43.0464 103.671 44.3462C103.671 45.6461 102.804 47.1372 101.735 47.6831Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M137.828 7.34112C139.054 6.71651 140.63 6.76716 142.357 7.65061C146.257 9.63696 149.414 15.0952 149.414 19.8332C149.414 22.4779 148.429 24.3461 146.882 25.1339L149.391 23.8566C150.939 23.0688 151.923 21.2006 151.923 18.5559C151.923 13.8122 148.761 8.35399 144.867 6.37326C143.145 5.49544 141.564 5.43917 140.337 6.06377L137.828 7.34112Z"
+        d="M137.028 6.86407C138.254 6.23946 139.83 6.29011 141.557 7.17356C145.457 9.15991 148.614 14.6182 148.614 19.3562C148.614 22.0009 147.629 23.8691 146.082 24.6569L148.591 23.3795C150.139 22.5917 151.123 20.7235 151.123 18.0788C151.123 13.3352 147.961 7.87694 144.067 5.89621C142.345 5.01839 140.764 4.96212 139.537 5.58672L137.028 6.86407Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.4"
         strokeLinecap="round"
         strokeLinejoin="round"
@@ -167,9 +169,9 @@ export function PageVerticalStackIllustration({ className }: TIllustrationAssetP
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M137.828 7.34148C136.28 8.12927 135.295 9.99746 135.295 12.6422C135.295 17.3858 138.458 22.8441 142.352 24.8248C144.074 25.7026 145.655 25.7589 146.882 25.1343C148.429 24.3465 149.414 22.4783 149.414 19.8336C149.414 15.09 146.251 9.6317 142.357 7.65097C140.636 6.77315 139.054 6.71688 137.828 7.34148Z"
+        d="M137.028 6.86443C135.48 7.65222 134.495 9.52041 134.495 12.1651C134.495 16.9088 137.658 22.367 141.552 24.3477C143.274 25.2256 144.855 25.2818 146.082 24.6572C147.629 23.8694 148.614 22.0012 148.614 19.3565C148.614 14.6129 145.451 9.15465 141.557 7.17392C139.836 6.2961 138.254 6.23983 137.028 6.86443Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.4"
         strokeLinecap="round"
         strokeLinejoin="round"
@@ -177,15 +179,15 @@ export function PageVerticalStackIllustration({ className }: TIllustrationAssetP
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M138.711 12.13C138.711 11.8712 138.886 11.7474 139.094 11.8599L146.021 15.3881C146.235 15.495 146.403 15.7932 146.403 16.0521C146.403 16.3109 146.229 16.4347 146.021 16.3222L139.094 12.794C138.88 12.6871 138.711 12.3889 138.711 12.13ZM138.711 14.4709C138.711 14.212 138.886 14.0882 139.094 14.2008L142.943 16.1646C143.157 16.2715 143.325 16.5698 143.325 16.8286C143.325 17.0875 143.151 17.2113 142.943 17.0987L139.094 15.1349C138.88 15.028 138.711 14.7297 138.711 14.4709ZM139.099 16.0746C138.886 15.9677 138.717 16.0858 138.717 16.3447C138.717 16.6035 138.891 16.9018 139.099 17.0087L141.795 18.3817C142.009 18.4886 142.177 18.3704 142.177 18.1116C142.177 17.8527 142.003 17.5545 141.795 17.4476L139.099 16.0746ZM138.711 18.2185C138.711 17.9597 138.886 17.8359 139.094 17.9484L140.636 18.7306C140.849 18.8375 141.018 19.1357 141.018 19.3946C141.018 19.6534 140.844 19.7772 140.636 19.6647L139.094 18.8825C138.88 18.7756 138.711 18.4773 138.711 18.2185ZM145.497 18.1679C145.638 18.241 145.773 18.3761 145.869 18.5449C145.97 18.7137 146.021 18.905 146.021 19.0794C146.021 19.2539 145.964 19.3833 145.869 19.4565L145.638 19.6196L144.895 18.331L145.126 18.1679C145.227 18.1003 145.357 18.1003 145.497 18.1679ZM144.681 18.4773L145.424 19.7659L143.736 20.9589C143.612 21.0489 143.46 21.0771 143.292 21.0545L142.751 20.9758C142.751 20.9758 142.695 20.9589 142.673 20.9364C142.644 20.9139 142.622 20.8857 142.605 20.852C142.588 20.8182 142.571 20.7844 142.566 20.7451C142.56 20.7113 142.56 20.6775 142.566 20.6494L142.729 20.0754C142.779 19.8954 142.87 19.7547 142.993 19.6703L144.681 18.4773Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M137.911 11.653C137.911 11.3941 138.086 11.2703 138.294 11.3829L145.221 14.911C145.435 15.0179 145.603 15.3162 145.603 15.575C145.603 15.8339 145.429 15.9577 145.221 15.8451L138.294 12.317C138.08 12.21 137.911 11.9118 137.911 11.653ZM137.911 13.9938C137.911 13.735 138.086 13.6112 138.294 13.7237L142.143 15.6876C142.357 15.7945 142.525 16.0927 142.525 16.3516C142.525 16.6104 142.351 16.7342 142.143 16.6217L138.294 14.6578C138.08 14.5509 137.911 14.2527 137.911 13.9938ZM138.299 15.5975C138.086 15.4906 137.917 15.6088 137.917 15.8676C137.917 16.1265 138.091 16.4247 138.299 16.5316L140.995 17.9046C141.209 18.0115 141.377 17.8934 141.377 17.6345C141.377 17.3757 141.203 17.0775 140.995 16.9705L138.299 15.5975ZM137.911 17.7415C137.911 17.4826 138.086 17.3588 138.294 17.4714L139.836 18.2535C140.049 18.3604 140.218 18.6587 140.218 18.9175C140.218 19.1764 140.044 19.3001 139.836 19.1876L138.294 18.4054C138.08 18.2985 137.911 18.0003 137.911 17.7415ZM144.697 17.6908C144.838 17.764 144.973 17.899 145.069 18.0678C145.17 18.2366 145.221 18.428 145.221 18.6024C145.221 18.7768 145.164 18.9063 145.069 18.9794L144.838 19.1426L144.095 17.854L144.326 17.6908C144.427 17.6233 144.557 17.6233 144.697 17.6908ZM143.881 18.0003L144.624 19.2889L142.936 20.4818C142.812 20.5719 142.66 20.6 142.492 20.5775L141.951 20.4987C141.951 20.4987 141.895 20.4818 141.873 20.4593C141.844 20.4368 141.822 20.4087 141.805 20.3749C141.788 20.3412 141.771 20.3074 141.766 20.268C141.76 20.2342 141.76 20.2005 141.766 20.1723L141.929 19.5984C141.98 19.4183 142.07 19.2776 142.193 19.1932L143.881 18.0003Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M8.24198 41.3744C7.61174 41.0537 7.21221 40.294 7.21221 39.2136V25.4161C7.21221 23.4803 8.50083 21.252 10.0933 20.4417L45.797 2.24941C46.5004 1.88928 47.1475 1.8724 47.6483 2.12562L45.1387 0.848271C44.6379 0.595053 43.9907 0.611935 43.2874 0.972067L7.5836 19.1644C5.99114 19.9747 4.70255 22.203 4.70255 24.1387V37.9363C4.70255 39.0167 5.10208 39.7763 5.73231 40.0971L8.24198 41.3744Z"
+        d="M7.44199 40.8974C6.81176 40.5766 6.41223 39.817 6.41223 38.7366V24.939C6.41223 23.0033 7.70084 20.775 9.2933 19.9647L44.997 1.77236C45.7004 1.41223 46.3475 1.39535 46.8483 1.64857L44.3387 0.371221C43.8379 0.118003 43.1908 0.134884 42.4874 0.495016L6.78361 18.6873C5.19115 19.4976 3.90256 21.7259 3.90256 23.6617V37.4592C3.90256 38.5396 4.30209 39.2993 4.93232 39.62L7.44199 40.8974Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.4"
         strokeLinecap="round"
         strokeLinejoin="round"
@@ -193,9 +195,9 @@ export function PageVerticalStackIllustration({ className }: TIllustrationAssetP
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M8.2418 41.3747C8.74261 41.6279 9.38973 41.611 10.0931 41.2509L45.7968 23.0586C47.3893 22.2483 48.6779 20.0199 48.6779 18.0842V4.28665C48.6779 3.20626 48.2784 2.4466 47.6482 2.12586C47.1474 1.87264 46.5002 1.88952 45.7968 2.24965L10.0931 20.442C8.50065 21.2523 7.21204 23.4806 7.21204 25.4163V39.2139C7.21204 40.2943 7.61157 41.0539 8.2418 41.3747Z"
+        d="M7.44181 40.8976C7.94262 41.1508 8.58974 41.1339 9.29312 40.7738L44.9969 22.5815C46.5893 21.7712 47.8779 19.5429 47.8779 17.6072V3.8096C47.8779 2.72921 47.4784 1.96955 46.8482 1.64881C46.3474 1.39559 45.7002 1.41247 44.9969 1.7726L9.29312 19.9649C7.70066 20.7752 6.41205 23.0035 6.41205 24.9392V38.7368C6.41205 39.8172 6.81158 40.5769 7.44181 40.8976Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.4"
         strokeLinecap="round"
         strokeLinejoin="round"
@@ -203,56 +205,56 @@ export function PageVerticalStackIllustration({ className }: TIllustrationAssetP
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M29.6699 20.87C29.6699 20.628 29.5067 20.5155 29.3098 20.6168L25.7028 22.4568C25.5059 22.5581 25.3427 22.8395 25.3427 23.0814C25.3427 23.3234 25.5059 23.4359 25.7028 23.3347L29.3098 21.4946C29.5067 21.3933 29.6699 21.112 29.6699 20.87Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M28.8699 20.3929C28.8699 20.151 28.7067 20.0384 28.5098 20.1397L24.9028 21.9798C24.7059 22.0811 24.5427 22.3624 24.5427 22.6044C24.5427 22.8463 24.7059 22.9589 24.9028 22.8576L28.5098 21.0176C28.7067 20.9163 28.8699 20.6349 28.8699 20.3929Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M30.3902 23.1375C30.3902 22.8955 30.227 22.783 30.0301 22.8842L24.9769 25.4558C24.78 25.5571 24.6168 25.8384 24.6168 26.0804C24.6168 26.3224 24.78 26.4349 24.9769 26.3336L30.0301 23.7621C30.227 23.6608 30.3902 23.3794 30.3902 23.1375Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M29.5902 22.6604C29.5902 22.4184 29.427 22.3059 29.2301 22.4072L24.177 24.9788C23.98 25.08 23.8168 25.3614 23.8168 25.6034C23.8168 25.8453 23.98 25.9579 24.177 25.8566L29.2301 23.285C29.427 23.1837 29.5902 22.9024 29.5902 22.6604Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M31.1105 17.4994C31.1105 17.2574 30.9473 17.1449 30.7504 17.2462L24.2567 20.5549C24.0598 20.6562 23.8966 20.9375 23.8966 21.1795C23.8966 21.4215 24.0598 21.534 24.2567 21.4327L30.7504 18.124C30.9473 18.0227 31.1105 17.7414 31.1105 17.4994Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M30.3105 17.0223C30.3105 16.7804 30.1473 16.6678 29.9504 16.7691L23.4567 20.0778C23.2598 20.1791 23.0966 20.4605 23.0966 20.7024C23.0966 20.9444 23.2598 21.057 23.4567 20.9557L29.9504 17.6469C30.1473 17.5457 30.3105 17.2643 30.3105 17.0223Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M15.6305 28.0209C15.6305 27.7789 15.4673 27.6664 15.2703 27.7677L10.9431 29.9735C10.7462 30.0748 10.583 30.3561 10.583 30.5981C10.583 30.84 10.7462 30.9526 10.9431 30.8513L15.2703 28.6455C15.4673 28.5442 15.6305 28.2628 15.6305 28.0209Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M14.8305 27.5438C14.8305 27.3019 14.6673 27.1893 14.4704 27.2906L10.1431 29.4964C9.9462 29.5977 9.78302 29.8791 9.78302 30.121C9.78302 30.363 9.9462 30.4755 10.1431 30.3742L14.4704 28.1684C14.6673 28.0671 14.8305 27.7858 14.8305 27.5438Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M16.3507 30.2891C16.3507 30.0471 16.1875 29.9346 15.9906 30.0358L10.9375 32.6074C10.7405 32.7087 10.5773 32.9901 10.5773 33.232C10.5773 33.474 10.7405 33.5865 10.9375 33.4852L15.9906 30.9137C16.1875 30.8124 16.3507 30.531 16.3507 30.2891Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M15.5507 29.812C15.5507 29.5701 15.3875 29.4575 15.1906 29.5588L10.1375 32.1304C9.94054 32.2317 9.77734 32.513 9.77734 32.755C9.77734 32.9969 9.94054 33.1095 10.1375 33.0082L15.1906 30.4366C15.3875 30.3353 15.5507 30.054 15.5507 29.812Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M17.7911 24.2848C17.7911 24.0428 17.628 23.9303 17.431 24.0316L10.9374 27.3403C10.7404 27.4416 10.5772 27.7229 10.5772 27.9649C10.5772 28.2069 10.7404 28.3194 10.9374 28.2181L17.431 24.9094C17.628 24.8081 17.7911 24.5268 17.7911 24.2848Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M16.9912 23.8077C16.9912 23.5658 16.828 23.4532 16.631 23.5545L10.1374 26.8632C9.94045 26.9645 9.77725 27.2459 9.77725 27.4878C9.77725 27.7298 9.94045 27.8424 10.1374 27.7411L16.631 24.4323C16.828 24.3311 16.9912 24.0497 16.9912 23.8077Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M45.3018 12.9015C45.3018 12.6595 45.1387 12.547 44.9417 12.6483L40.6145 14.8541C40.4176 14.9554 40.2544 15.2367 40.2544 15.4787C40.2544 15.7207 40.4176 15.8332 40.6145 15.7319L44.9417 13.5261C45.1387 13.4248 45.3018 13.1435 45.3018 12.9015Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M44.5019 12.4244C44.5019 12.1825 44.3387 12.0699 44.1417 12.1712L39.8145 14.377C39.6176 14.4783 39.4544 14.7597 39.4544 15.0016C39.4544 15.2436 39.6176 15.3561 39.8145 15.2549L44.1417 13.049C44.3387 12.9478 44.5019 12.6664 44.5019 12.4244Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M45.3017 15.535C45.3017 15.2931 45.1385 15.1805 44.9416 15.2818L39.8884 17.8534C39.6915 17.9547 39.5283 18.236 39.5283 18.478C39.5283 18.72 39.6915 18.8325 39.8884 18.7312L44.9416 16.1596C45.1385 16.0584 45.3017 15.777 45.3017 15.535Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M44.5017 15.058C44.5017 14.816 44.3385 14.7035 44.1416 14.8048L39.0885 17.3763C38.8915 17.4776 38.7283 17.759 38.7283 18.0009C38.7283 18.2429 38.8915 18.3555 39.0885 18.2542L44.1416 15.6826C44.3385 15.5813 44.5017 15.3 44.5017 15.058Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M45.3019 10.2681C45.3019 10.0261 45.1387 9.91357 44.9418 10.0149L38.4481 13.3236C38.2512 13.4249 38.088 13.7062 38.088 13.9482C38.088 14.1901 38.2512 14.3027 38.4481 14.2014L44.9418 10.8927C45.1387 10.7914 45.3019 10.51 45.3019 10.2681Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M44.5019 9.79102C44.5019 9.54906 44.3387 9.43651 44.1418 9.5378L37.6481 12.8465C37.4512 12.9478 37.288 13.2292 37.288 13.4711C37.288 13.7131 37.4512 13.8256 37.6481 13.7243L44.1418 10.4156C44.3387 10.3143 44.5019 10.033 44.5019 9.79102Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
     </svg>
   );
diff --git a/packages/propel/src/empty-state/assets/vertical-stack/project.tsx b/packages/propel/src/empty-state/assets/vertical-stack/project.tsx
index 2186a5e7a..4385ccc73 100644
--- a/packages/propel/src/empty-state/assets/vertical-stack/project.tsx
+++ b/packages/propel/src/empty-state/assets/vertical-stack/project.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper";
 import type { TIllustrationAssetProps } from "../helper";
 
@@ -11,20 +17,20 @@ export function ProjectVerticalStackIllustration({ className }: TIllustrationAss
       xmlns="http://www.w3.org/2000/svg"
       className={className}
     >
-      <g clipPath="url(#clip0_145_15535)">
+      <g clipPath="url(#clip0_1047_10396)">
         <g opacity="0.2">
           <path
-            d="M16.9216 113.94C16.9216 115.622 18.1809 117.299 20.6948 118.585L53.0651 135.079C58.0975 137.642 66.2534 137.642 71.2858 135.079L139.306 100.422C141.82 99.1406 143.079 97.4632 143.079 95.7812V101.152C143.079 102.834 141.82 104.511 139.306 105.793L71.2858 140.45C66.2534 143.013 58.0975 143.013 53.0651 140.45L20.6948 123.956C18.1764 122.674 16.9216 120.992 16.9216 119.31V113.94Z"
+            d="M16.9216 113.312C16.9216 114.994 18.1809 116.671 20.6948 117.957L53.0651 134.451C58.0975 137.014 66.2534 137.014 71.2858 134.451L139.306 99.7941C141.82 98.5127 143.079 96.8352 143.079 95.1533V100.524C143.079 102.206 141.82 103.883 139.306 105.165L71.2858 139.822C66.2534 142.385 58.0975 142.385 53.0651 139.822L20.6948 123.328C18.1764 122.046 16.9216 120.364 16.9216 118.682V113.312Z"
             fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-            stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+            stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
             strokeWidth="0.4"
             strokeLinecap="round"
             strokeLinejoin="round"
           />
           <path
-            d="M16.9216 113.94C16.9216 112.258 18.1809 110.581 20.6948 109.299L88.7146 74.6419C93.747 72.079 101.903 72.079 106.935 74.6419L139.306 91.1363C141.824 92.4178 143.079 94.0996 143.079 95.7816C143.079 97.4635 141.82 99.1409 139.306 100.422L71.2858 135.08C66.2534 137.643 58.0975 137.643 53.0651 135.08L20.6948 118.585C18.1764 117.304 16.9216 115.622 16.9216 113.94Z"
+            d="M16.9216 113.312C16.9216 111.63 18.1809 109.953 20.6948 108.671L88.7146 74.014C93.747 71.4511 101.903 71.4511 106.935 74.014L139.306 90.5084C141.824 91.7898 143.079 93.4717 143.079 95.1536C143.079 96.8356 141.82 98.513 139.306 99.7944L71.2858 134.452C66.2534 137.015 58.0975 137.015 53.0651 134.452L20.6948 117.957C18.1764 116.676 16.9216 114.994 16.9216 113.312Z"
             fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-            stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+            stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
             strokeWidth="0.4"
             strokeLinecap="round"
             strokeLinejoin="round"
@@ -32,48 +38,48 @@ export function ProjectVerticalStackIllustration({ className }: TIllustrationAss
         </g>
         <g opacity="0.6">
           <path
-            d="M16.9216 96.9689C16.9216 98.6509 18.1809 100.328 20.6948 101.614L53.0651 118.109C58.0975 120.672 66.2534 120.672 71.2858 118.109L139.306 83.4514C141.82 82.1699 143.079 80.4925 143.079 78.8105V84.181C143.079 85.8629 141.82 87.5405 139.306 88.822L71.2858 123.479C66.2534 126.042 58.0975 126.042 53.0651 123.479L20.6948 106.985C18.1764 105.703 16.9216 104.021 16.9216 102.34V96.9689Z"
+            d="M16.9216 96.341C16.9216 98.0229 18.1809 99.7005 20.6948 100.986L53.0651 117.481C58.0975 120.044 66.2534 120.044 71.2858 117.481L139.306 82.8234C141.82 81.542 143.079 79.8645 143.079 78.1826V83.5531C143.079 85.235 141.82 86.9126 139.306 88.194L71.2858 122.851C66.2534 125.414 58.0975 125.414 53.0651 122.851L20.6948 106.357C18.1764 105.075 16.9216 103.394 16.9216 101.712V96.341Z"
             fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-            stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+            stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
             strokeWidth="0.4"
             strokeLinecap="round"
             strokeLinejoin="round"
           />
           <path
-            d="M16.9216 96.9692C16.9216 95.2873 18.1809 93.6099 20.6948 92.3284L88.7146 57.6712C93.747 55.1083 101.903 55.1083 106.935 57.6712L139.306 74.1655C141.824 75.4469 143.079 77.1289 143.079 78.8109C143.079 80.4928 141.82 82.1702 139.306 83.4517L71.2858 118.109C66.2534 120.672 58.0975 120.672 53.0651 118.109L20.6948 101.615C18.1764 100.333 16.9216 98.6512 16.9216 96.9692Z"
+            d="M16.9216 96.3413C16.9216 94.6594 18.1809 92.982 20.6948 91.7005L88.7146 57.0433C93.747 54.4804 101.903 54.4804 106.935 57.0433L139.306 73.5376C141.824 74.819 143.079 76.501 143.079 78.1829C143.079 79.8648 141.82 81.5423 139.306 82.8237L71.2858 117.481C66.2534 120.044 58.0975 120.044 53.0651 117.481L20.6948 100.987C18.1764 99.7052 16.9216 98.0232 16.9216 96.3413Z"
             fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-            stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+            stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
             strokeWidth="0.4"
             strokeLinecap="round"
             strokeLinejoin="round"
           />
         </g>
         <path
-          d="M16.9216 80.0032C16.9216 81.6851 18.1809 83.3626 20.6948 84.6485L53.0651 101.143C58.0975 103.706 66.2534 103.706 71.2858 101.143L139.306 66.4855C141.82 65.2041 143.079 63.5266 143.079 61.8447V67.2153C143.079 68.8972 141.82 70.5747 139.306 71.8561L71.2858 106.513C66.2534 109.076 58.0975 109.076 53.0651 106.513L20.6948 90.0191C18.1764 88.7376 16.9216 87.0557 16.9216 85.3738V80.0032Z"
+          d="M16.9216 79.3753C16.9216 81.0572 18.1809 82.7346 20.6948 84.0206L53.0651 100.515C58.0975 103.078 66.2534 103.078 71.2858 100.515L139.306 65.8576C141.82 64.5761 143.079 62.8987 143.079 61.2168V66.5874C143.079 68.2693 141.82 69.9467 139.306 71.2282L71.2858 105.886C66.2534 108.448 58.0975 108.448 53.0651 105.886L20.6948 89.3912C18.1764 88.1097 16.9216 86.4278 16.9216 84.7459V79.3753Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.4"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
         <path
-          d="M16.9216 80.0035C16.9216 78.3216 18.1809 76.6442 20.6948 75.3627L88.7146 40.7054C93.747 38.1425 101.903 38.1425 106.935 40.7054L139.306 57.1998C141.824 58.4812 143.079 60.1631 143.079 61.845C143.079 63.527 141.82 65.2044 139.306 66.4859L71.2858 101.143C66.2534 103.706 58.0975 103.706 53.0651 101.143L20.6948 84.6488C18.1764 83.3673 16.9216 81.6855 16.9216 80.0035Z"
+          d="M16.9216 79.3756C16.9216 77.6937 18.1809 76.0163 20.6948 74.7348L88.7146 40.0775C93.747 37.5145 101.903 37.5145 106.935 40.0775L139.306 56.5718C141.824 57.8533 143.079 59.5352 143.079 61.2171C143.079 62.899 141.82 64.5765 139.306 65.8579L71.2858 100.515C66.2534 103.078 58.0975 103.078 53.0651 100.515L20.6948 84.0209C18.1764 82.7394 16.9216 81.0575 16.9216 79.3756Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.4"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
         <path
-          d="M64.2952 82.8691C63.8191 82.8691 63.3697 82.7712 62.9648 82.5755C62.9381 82.5666 62.9114 82.5576 62.8847 82.5443L58.9202 80.5242C57.701 79.9012 57.0024 78.4774 57.0024 76.6175V49.3954C57.0024 46.1072 59.2094 42.3028 61.9236 40.9235L70.9072 36.3449V28.9009C70.9072 25.6127 73.1141 21.8084 75.8283 20.429L86.3114 15.0851C87.0011 14.7336 87.6774 14.5557 88.3181 14.5557C88.8209 14.5557 89.2926 14.6669 89.7197 14.8805L93.6842 16.9006C93.6842 16.9006 93.7065 16.9139 93.7154 16.9184C94.9168 17.5502 95.602 18.9607 95.602 20.8073V23.7572L100.221 21.4035C100.91 21.052 101.587 20.874 102.227 20.874C102.73 20.874 103.202 20.9852 103.629 21.1988C103.629 21.1988 107.611 23.2278 107.62 23.2367C108.821 23.8685 109.511 25.279 109.511 27.13V54.3521C109.511 57.6403 107.304 61.4446 104.59 62.824L66.293 82.3352C65.6078 82.6822 64.9359 82.8602 64.2952 82.8602V82.8691ZM80.9809 26.7918C80.0153 27.2813 79.2011 28.7007 79.2011 29.8887V32.1223L87.317 27.9887V23.5659L80.9809 26.7918Z"
+          d="M64.2952 82.2411C63.8191 82.2411 63.3697 82.1433 62.9648 81.9475C62.9381 81.9386 62.9114 81.9297 62.8847 81.9163L58.9202 79.8962C57.701 79.2733 57.0024 77.8495 57.0024 75.9896V48.7675C57.0024 45.4793 59.2094 41.6749 61.9236 40.2956L70.9072 35.717V28.273C70.9072 24.9848 73.1141 21.1804 75.8283 19.8011L86.3114 14.4572C87.0011 14.1057 87.6774 13.9277 88.3181 13.9277C88.8209 13.9277 89.2926 14.039 89.7197 14.2525L93.6842 16.2726C93.6842 16.2726 93.7065 16.286 93.7154 16.2905C94.9168 16.9223 95.602 18.3328 95.602 20.1793V23.1293L100.221 20.7756C100.91 20.4241 101.587 20.246 102.227 20.246C102.73 20.246 103.202 20.3573 103.629 20.5708C103.629 20.5708 107.611 22.5998 107.62 22.6087C108.821 23.2406 109.511 24.6511 109.511 26.5021V53.7242C109.511 57.0124 107.304 60.8167 104.59 62.1961L66.293 81.7072C65.6078 82.0543 64.9359 82.2322 64.2952 82.2322V82.2411ZM80.9809 26.1639C80.0153 26.6533 79.2011 28.0727 79.2011 29.2607V31.4944L87.317 27.3608V22.938L80.9809 26.1639Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
         />
         <path
-          d="M88.3226 15.0003C88.7586 15.0003 89.1635 15.0937 89.5195 15.2762L93.484 17.2963C93.484 17.2963 93.4751 17.2963 93.4707 17.2918C94.503 17.8124 95.1615 19.0493 95.1615 20.8113V24.4911L100.425 21.808C101.066 21.4832 101.676 21.3275 102.232 21.3275C102.668 21.3275 103.073 21.4209 103.429 21.6034L107.393 23.6235C107.393 23.6235 107.384 23.6235 107.38 23.619C108.412 24.1352 109.071 25.3765 109.071 27.1385V54.3606C109.071 57.5065 106.975 61.1195 104.394 62.4366L66.0973 81.9476C65.461 82.2725 64.8558 82.4238 64.3041 82.4238C63.828 82.4238 63.3875 82.3081 63.0048 82.0945C63.036 82.1123 63.0627 82.1346 63.0938 82.1524L59.1293 80.1323C58.1059 79.6117 57.4563 78.3747 57.4563 76.6216V49.3995C57.4563 46.2537 59.552 42.6407 62.1328 41.3237L71.361 36.6205V28.9005C71.361 25.7547 73.4568 22.1418 76.0375 20.8247L86.5205 15.4808C87.1613 15.156 87.7709 15.0003 88.327 15.0003M91.9756 17.0426C92.0557 17.0337 92.1358 17.0293 92.2115 17.0293C92.1314 17.0293 92.0557 17.0382 91.9756 17.0426ZM92.6075 17.0426C92.5318 17.0337 92.4562 17.0293 92.3805 17.0248C92.4562 17.0248 92.5318 17.0337 92.6075 17.0426ZM91.6731 17.0826C91.7176 17.0737 91.7576 17.0649 91.8021 17.0604C91.7621 17.0649 91.7176 17.0737 91.6731 17.0826ZM92.9901 17.1138C92.9189 17.096 92.8433 17.0738 92.7676 17.0649C92.8433 17.0782 92.9145 17.096 92.9901 17.1138ZM91.0813 17.2473C91.1792 17.2117 91.2771 17.1806 91.3749 17.1539C91.2771 17.1806 91.1792 17.2161 91.0813 17.2473ZM93.3728 17.2517C93.2927 17.2161 93.2126 17.1806 93.1325 17.1539C93.2171 17.1806 93.2927 17.2161 93.3728 17.2517ZM90.4806 17.5009C90.6319 17.4208 90.7832 17.3586 90.9345 17.2963C90.7832 17.3541 90.6363 17.4208 90.4806 17.5009ZM91.1436 21.8526C91.1124 21.8303 91.0813 21.8125 91.0457 21.7902C91.0768 21.808 91.1124 21.8303 91.1436 21.8526ZM91.2815 21.9683C91.2593 21.946 91.2326 21.9237 91.2103 21.9059C91.2326 21.9282 91.2593 21.946 91.2815 21.9683ZM91.4016 22.1106C91.3838 22.0839 91.3616 22.0617 91.3438 22.035C91.366 22.0572 91.3838 22.0839 91.4016 22.1106ZM91.504 22.2753C91.4862 22.2441 91.4728 22.2174 91.455 22.1863C91.4728 22.213 91.4906 22.2441 91.504 22.2753ZM91.5885 22.4666C91.5752 22.431 91.5618 22.3954 91.544 22.3642C91.5574 22.3998 91.5707 22.431 91.5885 22.4666ZM91.6553 22.6846C91.6464 22.6401 91.633 22.6 91.6197 22.56C91.633 22.6 91.6419 22.6445 91.6553 22.6846ZM91.6998 22.9382C91.6909 22.8848 91.6864 22.8314 91.6775 22.7825C91.6864 22.8314 91.6953 22.8848 91.6998 22.9382ZM78.7561 32.8473L87.7619 28.2598V22.8404L80.7807 26.4C79.6638 26.9695 78.7561 28.5312 78.7561 29.8928V32.8518M91.7264 23.2808C91.7264 23.1919 91.722 23.1028 91.7131 23.0227C91.722 23.1073 91.7264 23.1919 91.7264 23.2808ZM106 23.3565C105.96 23.3565 105.92 23.3609 105.88 23.3654C105.92 23.3654 105.96 23.3565 106 23.3565C106.041 23.3565 106.081 23.3565 106.121 23.352C106.081 23.352 106.041 23.352 106 23.3565ZM106.517 23.3698C106.441 23.3609 106.365 23.3565 106.29 23.352C106.365 23.352 106.441 23.3609 106.517 23.3698ZM105.453 23.4365C105.538 23.4187 105.627 23.401 105.711 23.3876C105.627 23.401 105.542 23.4187 105.453 23.4365ZM106.899 23.441C106.828 23.4232 106.752 23.4054 106.677 23.3921C106.752 23.4054 106.824 23.4232 106.899 23.441ZM107.278 23.5745C107.197 23.5389 107.117 23.5033 107.037 23.4766C107.122 23.5033 107.197 23.5389 107.278 23.5745ZM104.39 23.8237C104.541 23.7436 104.692 23.6813 104.844 23.619C104.692 23.6769 104.546 23.7436 104.39 23.8237ZM61.4653 79.4293C61.4564 79.367 61.4475 79.3047 61.4386 79.2424C61.4431 79.3092 61.4564 79.367 61.4653 79.4293ZM61.7234 80.506C61.6967 80.4393 61.6744 80.377 61.6522 80.3058C61.6744 80.3725 61.6967 80.4393 61.7234 80.506ZM62.1594 81.3337C62.1238 81.2803 62.0882 81.2268 62.0526 81.1734C62.0882 81.2268 62.1238 81.2847 62.1594 81.3337ZM62.4398 81.6674C62.3953 81.6229 62.3597 81.5784 62.3196 81.5339C62.3597 81.5784 62.3997 81.6273 62.4398 81.6674ZM62.7512 81.9387C62.7067 81.9076 62.6667 81.8675 62.6266 81.8319C62.6667 81.8675 62.7067 81.9031 62.7512 81.9387ZM88.3226 14.1104C87.6107 14.1104 86.8631 14.3062 86.1156 14.6888L75.6326 20.0327C72.7359 21.5099 70.4667 25.4032 70.4667 28.9005V36.0732L61.7234 40.5272C58.8267 42.0044 56.5575 45.8977 56.5575 49.395V76.6171C56.5575 78.655 57.3451 80.2213 58.72 80.9199L62.6845 82.9399C63.1739 83.1846 63.7168 83.3092 64.2952 83.3092C65.0071 83.3092 65.7458 83.1179 66.4933 82.7352L104.79 63.2242C107.687 61.7469 109.956 57.8535 109.956 54.3562V27.1341C109.956 25.1229 109.186 23.5656 107.843 22.8537C107.829 22.8448 107.811 22.8359 107.794 22.827L103.829 20.8069C103.34 20.5577 102.801 20.4331 102.227 20.4331C101.515 20.4331 100.768 20.6289 100.02 21.0116L96.0514 23.0361V20.8113C96.0514 18.7957 95.2816 17.2428 93.9334 16.5309C93.9245 16.5309 93.9201 16.5221 93.9112 16.5176C93.9023 16.5176 93.8934 16.5087 93.8889 16.5042L89.9289 14.4841C89.4394 14.235 88.901 14.1104 88.327 14.1104H88.3226ZM79.646 31.3923V29.8839C79.646 28.8649 80.3624 27.6013 81.1811 27.1875L86.8676 24.2909V27.7125L79.6416 31.3923H79.646Z"
-          fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          d="M88.3226 14.3723C88.7586 14.3723 89.1635 14.4658 89.5195 14.6482L93.484 16.6683C93.484 16.6683 93.4751 16.6683 93.4707 16.6639C94.503 17.1845 95.1615 18.4214 95.1615 20.1834V23.8632L100.425 21.1801C101.066 20.8553 101.676 20.6995 102.232 20.6995C102.668 20.6995 103.073 20.793 103.429 20.9754L107.393 22.9955C107.393 22.9955 107.384 22.9955 107.38 22.9911C108.412 23.5072 109.071 24.7486 109.071 26.5106V53.7327C109.071 56.8785 106.975 60.4916 104.394 61.8087L66.0973 81.3197C65.461 81.6445 64.8558 81.7958 64.3041 81.7958C63.828 81.7958 63.3875 81.6802 63.0048 81.4666C63.036 81.4844 63.0627 81.5067 63.0938 81.5245L59.1293 79.5044C58.1059 78.9838 57.4563 77.7468 57.4563 75.9936V48.7715C57.4563 45.6257 59.552 42.0128 62.1328 40.6957L71.361 35.9926V28.2726C71.361 25.1268 73.4568 21.5138 76.0375 20.1968L86.5205 14.8529C87.1613 14.5281 87.7709 14.3723 88.327 14.3723M91.9756 16.4147C92.0557 16.4058 92.1358 16.4013 92.2115 16.4013C92.1314 16.4013 92.0557 16.4102 91.9756 16.4147ZM92.6075 16.4147C92.5318 16.4058 92.4562 16.4013 92.3805 16.3969C92.4562 16.3969 92.5318 16.4058 92.6075 16.4147ZM91.6731 16.4547C91.7176 16.4458 91.7576 16.437 91.8021 16.4325C91.7621 16.437 91.7176 16.4458 91.6731 16.4547ZM92.9901 16.4858C92.9189 16.468 92.8433 16.4459 92.7676 16.437C92.8433 16.4503 92.9145 16.468 92.9901 16.4858ZM91.0813 16.6194C91.1792 16.5838 91.2771 16.5526 91.3749 16.5259C91.2771 16.5526 91.1792 16.5882 91.0813 16.6194ZM93.3728 16.6238C93.2927 16.5882 93.2126 16.5526 93.1325 16.5259C93.2171 16.5526 93.2927 16.5882 93.3728 16.6238ZM90.4806 16.873C90.6319 16.7929 90.7832 16.7306 90.9345 16.6683C90.7832 16.7262 90.6363 16.7929 90.4806 16.873ZM91.1436 21.2246C91.1124 21.2024 91.0813 21.1845 91.0457 21.1623C91.0768 21.1801 91.1124 21.2024 91.1436 21.2246ZM91.2815 21.3403C91.2593 21.3181 91.2326 21.2958 91.2103 21.278C91.2326 21.3002 91.2593 21.3181 91.2815 21.3403ZM91.4016 21.4826C91.3838 21.4559 91.3616 21.4337 91.3438 21.407C91.366 21.4293 91.3838 21.4559 91.4016 21.4826ZM91.504 21.6473C91.4862 21.6162 91.4728 21.5895 91.455 21.5584C91.4728 21.5851 91.4906 21.6162 91.504 21.6473ZM91.5885 21.8386C91.5752 21.803 91.5618 21.7674 91.544 21.7363C91.5574 21.7719 91.5707 21.803 91.5885 21.8386ZM91.6553 22.0566C91.6464 22.0122 91.633 21.9721 91.6197 21.932C91.633 21.9721 91.6419 22.0166 91.6553 22.0566ZM91.6998 22.3103C91.6909 22.2569 91.6864 22.2035 91.6775 22.1545C91.6864 22.2035 91.6953 22.2569 91.6998 22.3103ZM78.7561 32.2194L87.7619 27.6319V22.2124L80.7807 25.772C79.6638 26.3416 78.7561 27.9033 78.7561 29.2648V32.2238M91.7264 22.6529C91.7264 22.5639 91.722 22.4749 91.7131 22.3948C91.722 22.4794 91.7264 22.5639 91.7264 22.6529ZM106 22.7285C105.96 22.7285 105.92 22.733 105.88 22.7374C105.92 22.7374 105.96 22.7285 106 22.7285C106.041 22.7285 106.081 22.7285 106.121 22.7241C106.081 22.7241 106.041 22.7241 106 22.7285ZM106.517 22.7419C106.441 22.733 106.365 22.7285 106.29 22.7241C106.365 22.7241 106.441 22.733 106.517 22.7419ZM105.453 22.8086C105.538 22.7908 105.627 22.7731 105.711 22.7597C105.627 22.7731 105.542 22.7908 105.453 22.8086ZM106.899 22.813C106.828 22.7952 106.752 22.7775 106.677 22.7642C106.752 22.7775 106.824 22.7952 106.899 22.813ZM107.278 22.9465C107.197 22.911 107.117 22.8754 107.037 22.8487C107.122 22.8754 107.197 22.911 107.278 22.9465ZM104.39 23.1957C104.541 23.1157 104.692 23.0534 104.844 22.9911C104.692 23.0489 104.546 23.1157 104.39 23.1957ZM61.4653 78.8013C61.4564 78.739 61.4475 78.6768 61.4386 78.6145C61.4431 78.6812 61.4564 78.739 61.4653 78.8013ZM61.7234 79.8781C61.6967 79.8113 61.6744 79.7491 61.6522 79.6779C61.6744 79.7446 61.6967 79.8113 61.7234 79.8781ZM62.1594 80.7057C62.1238 80.6523 62.0882 80.5989 62.0526 80.5455C62.0882 80.5989 62.1238 80.6568 62.1594 80.7057ZM62.4398 81.0394C62.3953 80.9949 62.3597 80.9504 62.3196 80.9059C62.3597 80.9504 62.3997 80.9994 62.4398 81.0394ZM62.7512 81.3108C62.7067 81.2797 62.6667 81.2396 62.6266 81.204C62.6667 81.2396 62.7067 81.2752 62.7512 81.3108ZM88.3226 13.4824C87.6107 13.4824 86.8631 13.6782 86.1156 14.0609L75.6326 19.4048C72.7359 20.882 70.4667 24.7753 70.4667 28.2726V35.4453L61.7234 39.8992C58.8267 41.3765 56.5575 45.2698 56.5575 48.7671V75.9892C56.5575 78.0271 57.3451 79.5934 58.72 80.292L62.6845 82.3119C63.1739 82.5567 63.7168 82.6813 64.2952 82.6813C65.0071 82.6813 65.7458 82.4899 66.4933 82.1073L104.79 62.5962C107.687 61.119 109.956 57.2256 109.956 53.7283V26.5062C109.956 24.495 109.186 22.9377 107.843 22.2258C107.829 22.2169 107.811 22.208 107.794 22.1991L103.829 20.179C103.34 19.9298 102.801 19.8052 102.227 19.8052C101.515 19.8052 100.768 20.001 100.02 20.3836L96.0514 22.4082V20.1834C96.0514 18.1678 95.2816 16.6149 93.9334 15.9029C93.9245 15.9029 93.9201 15.8941 93.9112 15.8897C93.9023 15.8897 93.8934 15.8808 93.8889 15.8763L89.9289 13.8562C89.4394 13.607 88.901 13.4824 88.327 13.4824H88.3226ZM79.646 30.7644V29.2559C79.646 28.237 80.3624 26.9734 81.1811 26.5596L86.8676 23.663V27.0846L79.6416 30.7644H79.646Z"
+          fill="var(--illustration-stroke-tertiary)"
         />
         <path
-          d="M107.393 23.6231C106.579 23.2093 105.533 23.2449 104.39 23.8278L95.1614 28.531L91.1969 26.5109L100.425 21.8077C101.569 21.2248 102.614 21.1892 103.429 21.6031L107.393 23.6231Z"
+          d="M107.393 22.9952C106.579 22.5814 105.533 22.617 104.39 23.1999L95.1614 27.903L91.1969 25.8829L100.425 21.1798C101.569 20.5969 102.614 20.5613 103.429 20.9751L107.393 22.9952Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
           stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
           strokeWidth="0.4"
@@ -81,7 +87,7 @@ export function ProjectVerticalStackIllustration({ className }: TIllustrationAss
           strokeLinejoin="round"
         />
         <path
-          d="M78.756 36.8834L91.7264 30.276L87.7619 28.2559L74.7915 34.8634L78.756 36.8834Z"
+          d="M78.756 36.2555L91.7264 29.648L87.7619 27.6279L74.7915 34.2355L78.756 36.2555Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
           stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
           strokeWidth="0.4"
@@ -89,7 +95,7 @@ export function ProjectVerticalStackIllustration({ className }: TIllustrationAss
           strokeLinejoin="round"
         />
         <path
-          d="M91.7263 30.2757V23.2766C91.7263 22.5202 91.446 21.9862 91.0055 21.7592L87.041 19.7393C87.4815 19.9662 87.7618 20.5001 87.7618 21.2565V28.2556L91.7263 30.2757Z"
+          d="M91.7263 29.6477V22.6487C91.7263 21.8923 91.446 21.3582 91.0055 21.1313L87.041 19.1113C87.4815 19.3383 87.7618 19.8722 87.7618 20.6286V27.6277L91.7263 29.6477Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
           stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
           strokeWidth="0.4"
@@ -97,7 +103,7 @@ export function ProjectVerticalStackIllustration({ className }: TIllustrationAss
           strokeLinejoin="round"
         />
         <path
-          d="M93.4839 17.296C92.6697 16.8822 91.624 16.9178 90.4805 17.5007L79.9975 22.8445C77.4123 24.1616 75.321 27.779 75.321 30.9204V38.6403L71.3565 36.6202V28.9003C71.3565 25.7545 73.4522 22.1415 76.033 20.8244L86.516 15.4806C87.6595 14.8977 88.7052 14.8621 89.5194 15.2759L93.4839 17.296Z"
+          d="M93.4839 16.6681C92.6697 16.2543 91.624 16.2898 90.4805 16.8727L79.9975 22.2166C77.4123 23.5337 75.321 27.1511 75.321 30.2924V38.0124L71.3565 35.9923V28.2723C71.3565 25.1265 73.4522 21.5136 76.033 20.1965L86.516 14.8526C87.6595 14.2697 88.7052 14.2342 89.5194 14.648L93.4839 16.6681Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
           stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
           strokeWidth="0.4"
@@ -105,7 +111,7 @@ export function ProjectVerticalStackIllustration({ className }: TIllustrationAss
           strokeLinejoin="round"
         />
         <path
-          d="M75.321 38.6363L66.0927 43.3394C63.5076 44.6564 61.4163 48.2739 61.4163 51.4153V78.6374C61.4163 80.3905 62.0659 81.6275 63.0893 82.1481L59.1248 80.128C58.1014 79.6074 57.4518 78.3704 57.4518 76.6173V49.3952C57.4518 46.2494 59.5475 42.6364 62.1282 41.3194L71.3565 36.6162L75.321 38.6363Z"
+          d="M75.321 38.0084L66.0927 42.7114C63.5076 44.0285 61.4163 47.646 61.4163 50.7874V78.0095C61.4163 79.7626 62.0659 80.9996 63.0893 81.5202L59.1248 79.5001C58.1014 78.9795 57.4518 77.7425 57.4518 75.9894V48.7673C57.4518 45.6215 59.5475 42.0085 62.1282 40.6914L71.3565 35.9883L75.321 38.0084Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
           stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
           strokeWidth="0.4"
@@ -113,7 +119,7 @@ export function ProjectVerticalStackIllustration({ className }: TIllustrationAss
           strokeLinejoin="round"
         />
         <path
-          d="M95.1615 28.5268V20.8068C95.1615 17.661 93.0657 16.1794 90.485 17.4964L80.002 22.8403C77.4168 24.1574 75.3255 27.7748 75.3255 30.9161V38.6361L66.0972 43.3391C63.5121 44.6562 61.4208 48.2737 61.4208 51.4151V78.6372C61.4208 81.783 63.5165 83.2646 66.0972 81.9476L104.394 62.4365C106.979 61.1195 109.071 57.5019 109.071 54.3606V27.1385C109.071 23.9927 106.975 22.511 104.394 23.8281L95.1659 28.5312L95.1615 28.5268ZM78.7561 36.8829V29.8838C78.7561 28.5267 79.6638 26.9605 80.7806 26.391L89.7063 21.8436C90.8232 21.2741 91.7309 21.9148 91.7309 23.2763V30.2754L78.7605 36.8829H78.7561Z"
+          d="M95.1615 27.8989V20.1789C95.1615 17.0331 93.0657 15.5514 90.485 16.8685L80.002 22.2124C77.4168 23.5294 75.3255 27.1468 75.3255 30.2882V38.0081L66.0972 42.7112C63.5121 44.0283 61.4208 47.6458 61.4208 50.7871V78.0092C61.4208 81.1551 63.5165 82.6367 66.0972 81.3197L104.394 61.8086C106.979 60.4915 109.071 56.874 109.071 53.7327V26.5106C109.071 23.3648 106.975 21.8831 104.394 23.2001L95.1659 27.9033L95.1615 27.8989ZM78.7561 36.255V29.2559C78.7561 27.8988 79.6638 26.3326 80.7806 25.7631L89.7063 21.2157C90.8232 20.6461 91.7309 21.2869 91.7309 22.6484V29.6475L78.7605 36.255H78.7561Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
           stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
           strokeWidth="0.4"
@@ -123,9 +129,9 @@ export function ProjectVerticalStackIllustration({ className }: TIllustrationAss
         <path
           fillRule="evenodd"
           clipRule="evenodd"
-          d="M144.881 26.5558C146.104 25.9328 146.883 24.4601 146.883 22.3644C146.883 18.6134 144.382 14.2974 141.303 12.7312L120.657 2.21249C119.296 1.51836 118.05 1.47385 117.08 1.96774L119.064 0.957693C120.034 0.463797 121.28 0.508314 122.642 1.20244L143.288 11.7212C146.371 13.2918 148.867 17.6078 148.867 21.3543C148.867 23.45 148.089 24.9228 146.865 25.5457L144.881 26.5558Z"
+          d="M144.881 25.9278C146.104 25.3049 146.883 23.8321 146.883 21.7364C146.883 17.9855 144.382 13.6695 141.303 12.1033L120.657 1.58456C119.296 0.890433 118.05 0.845916 117.08 1.33981L119.064 0.329763C120.034 -0.164133 121.28 -0.119616 122.642 0.574508L143.288 11.0932C146.371 12.6639 148.867 16.9799 148.867 20.7264C148.867 22.8221 148.089 24.2949 146.865 24.9178L144.881 25.9278Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.4"
           strokeLinecap="round"
           strokeLinejoin="round"
@@ -133,9 +139,9 @@ export function ProjectVerticalStackIllustration({ className }: TIllustrationAss
         <path
           fillRule="evenodd"
           clipRule="evenodd"
-          d="M144.881 26.5555C143.911 27.0494 142.665 27.005 141.303 26.3108L120.657 15.7921C117.574 14.2215 115.078 9.90547 115.078 6.15898C115.078 4.06325 115.856 2.59039 117.08 1.96746C118.05 1.47356 119.296 1.51808 120.657 2.2122L141.303 12.7309C144.387 14.3016 146.883 18.6176 146.883 22.3641C146.883 24.4598 146.104 25.9326 144.881 26.5555Z"
+          d="M144.881 25.9276C143.911 26.4214 142.665 26.377 141.303 25.6829L120.657 15.1642C117.574 13.5935 115.078 9.27754 115.078 5.53105C115.078 3.43532 115.856 1.96246 117.08 1.33953C118.05 0.845633 119.296 0.89015 120.657 1.58427L141.303 12.103C144.387 13.6737 146.883 17.9897 146.883 21.7361C146.883 23.8319 146.104 25.3046 144.881 25.9276Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.4"
           strokeLinecap="round"
           strokeLinejoin="round"
@@ -143,21 +149,21 @@ export function ProjectVerticalStackIllustration({ className }: TIllustrationAss
         <path
           fillRule="evenodd"
           clipRule="evenodd"
-          d="M121.218 6.35522C120.795 6.14164 120.453 6.38191 120.453 6.89805V8.23736C120.453 8.48653 120.533 8.7624 120.675 9.01157L123.118 13.2297C123.354 13.6346 123.728 13.9105 124.021 13.826C124.573 13.6658 125.049 13.3321 125.41 12.8426C125.601 12.5801 125.534 12.0906 125.298 11.6857L122.856 7.4676C122.713 7.21843 122.517 7.02266 122.313 6.92032L121.209 6.35968L121.218 6.35522ZM121.507 8.13057C121.668 8.21066 121.797 8.12169 121.797 7.92591C121.797 7.73013 121.668 7.51206 121.507 7.43197C121.347 7.35188 121.218 7.44085 121.218 7.63663C121.218 7.83241 121.347 8.05048 121.507 8.13057Z"
-          fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          d="M121.218 5.72729C120.795 5.51371 120.453 5.75398 120.453 6.27012V7.60943C120.453 7.8586 120.533 8.13447 120.675 8.38364L123.118 12.6018C123.354 13.0067 123.728 13.2826 124.021 13.198C124.573 13.0379 125.049 12.7042 125.41 12.2147C125.601 11.9522 125.534 11.4627 125.298 11.0578L122.856 6.83967C122.713 6.5905 122.517 6.39473 122.313 6.29239L121.209 5.73175L121.218 5.72729ZM121.507 7.50264C121.668 7.58273 121.797 7.49376 121.797 7.29798C121.797 7.1022 121.668 6.88413 121.507 6.80404C121.347 6.72395 121.218 6.81292 121.218 7.0087C121.218 7.20448 121.347 7.42255 121.507 7.50264Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
         />
         <path
           fillRule="evenodd"
           clipRule="evenodd"
-          d="M139.71 20.6159L130.108 15.7215C129.196 15.2543 128.453 13.9772 128.453 12.8693C128.453 11.7569 129.192 11.2364 130.108 11.6991L139.71 16.5936C140.622 17.0608 141.365 18.3377 141.365 19.4457C141.365 20.558 140.627 21.0787 139.71 20.6159Z"
-          fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          d="M139.71 19.988L130.108 15.0936C129.196 14.6264 128.453 13.3493 128.453 12.2413C128.453 11.129 129.192 10.6084 130.108 11.0712L139.71 15.9656C140.622 16.4328 141.365 17.7098 141.365 18.8177C141.365 19.9301 140.627 20.4508 139.71 19.988Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
         />
         <path
           fillRule="evenodd"
           clipRule="evenodd"
-          d="M46.1459 19.1032C45.5986 18.8229 44.8956 18.8496 44.1258 19.2411L5.13028 39.1126C3.39052 39.9981 1.98447 42.4321 1.98447 44.5456V59.616C1.98447 60.7952 2.42053 61.6272 3.11021 61.9787L1.12571 60.9687C0.436038 60.6172 0 59.7851 0 58.606V43.5355C0 41.422 1.4105 38.9881 3.14581 38.1027L42.1413 18.2311C42.9111 17.8395 43.6141 17.8173 44.1614 18.0931L46.1459 19.1032Z"
+          d="M46.1459 18.4752C45.5986 18.1949 44.8956 18.2217 44.1258 18.6132L5.13028 38.4847C3.39052 39.3702 1.98447 41.8041 1.98447 43.9177V58.9881C1.98447 60.1672 2.42053 60.9993 3.11021 61.3508L1.12571 60.3408C0.436038 59.9893 0 59.1572 0 57.9781V42.9076C0 40.7941 1.4105 38.3602 3.14581 37.4748L42.1413 17.6032C42.9111 17.2116 43.6141 17.1893 44.1614 17.4652L46.1459 18.4752Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.4"
           strokeLinecap="round"
           strokeLinejoin="round"
@@ -165,9 +171,9 @@ export function ProjectVerticalStackIllustration({ className }: TIllustrationAss
         <path
           fillRule="evenodd"
           clipRule="evenodd"
-          d="M46.1459 19.1029C46.8355 19.4544 47.2716 20.2865 47.2716 21.4656V36.5362C47.2716 38.6497 45.8611 41.0836 44.1258 41.969L5.13025 61.8405C4.36048 62.2321 3.65747 62.2543 3.11018 61.9785C2.4205 61.627 1.98444 60.7949 1.98444 59.6157V44.5453C1.98444 42.4318 3.39494 39.9978 5.13025 39.1124L44.1258 19.2409C44.8956 18.8493 45.5986 18.827 46.1459 19.1029Z"
+          d="M46.1459 18.475C46.8355 18.8265 47.2716 19.6586 47.2716 20.8377V35.9082C47.2716 38.0218 45.8611 40.4556 44.1258 41.3411L5.13025 61.2126C4.36048 61.6041 3.65747 61.6264 3.11018 61.3505C2.4205 60.999 1.98444 60.1669 1.98444 58.9878V43.9174C1.98444 41.8039 3.39494 39.3699 5.13025 38.4844L44.1258 18.6129C44.8956 18.2214 45.5986 18.1991 46.1459 18.475Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.4"
           strokeLinecap="round"
           strokeLinejoin="round"
@@ -175,39 +181,39 @@ export function ProjectVerticalStackIllustration({ className }: TIllustrationAss
         <path
           fillRule="evenodd"
           clipRule="evenodd"
-          d="M9.63761 42.8364C9.69545 42.9654 9.82449 43.0144 9.97132 42.9387C10.176 42.8364 10.3406 42.5472 10.3451 42.2891V41.8174C10.3451 41.6617 10.2872 41.5505 10.1893 41.5149C10.087 41.4793 9.95799 41.5238 9.84675 41.6395L7.444 44.0199C7.30162 44.1623 7.20819 44.3803 7.20819 44.5717V47.8109C7.20819 47.9711 7.27492 48.0868 7.38616 48.1179C7.49739 48.1446 7.63533 48.0824 7.75102 47.9489L8.09364 47.5485C8.27607 47.3393 8.3428 47.0234 8.24936 46.8454C8.18707 46.7297 8.07138 46.6986 7.9468 46.752V44.5139L9.64206 42.8364H9.63761Z"
-          fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          d="M9.63761 42.2085C9.69545 42.3375 9.82449 42.3864 9.97132 42.3108C10.176 42.2084 10.3406 41.9192 10.3451 41.6612V41.1895C10.3451 41.0338 10.2872 40.9226 10.1893 40.887C10.087 40.8514 9.95799 40.8959 9.84675 41.0116L7.444 43.392C7.30162 43.5344 7.20819 43.7524 7.20819 43.9437V47.183C7.20819 47.3432 7.27492 47.4588 7.38616 47.49C7.49739 47.5167 7.63533 47.4544 7.75102 47.3209L8.09364 46.9205C8.27607 46.7114 8.3428 46.3955 8.24936 46.2175C8.18707 46.1018 8.07138 46.0707 7.9468 46.1241V43.8859L9.64206 42.2085H9.63761Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
         />
         <path
           fillRule="evenodd"
           clipRule="evenodd"
-          d="M8.16037 42.2007C8.21822 42.3297 8.34725 42.3786 8.49409 42.303C8.69877 42.2006 8.86341 41.9114 8.86786 41.6534V41.1817C8.86786 41.026 8.81003 40.9148 8.71214 40.8792C8.61425 40.8436 8.48075 40.888 8.36952 41.0037L5.96677 43.3842C5.82438 43.5266 5.73096 43.7446 5.73096 43.9359V47.1752C5.73096 47.3354 5.79768 47.451 5.90892 47.4822C6.02016 47.5089 6.1581 47.4466 6.27378 47.3131L6.61641 46.9126C6.79884 46.7035 6.86557 46.3877 6.77213 46.2097C6.70984 46.094 6.59415 46.0627 6.46956 46.1161V43.8781L8.16483 42.2007H8.16037Z"
-          fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          d="M8.16037 41.5727C8.21822 41.7018 8.34725 41.7507 8.49409 41.6751C8.69877 41.5727 8.86341 41.2835 8.86786 41.0254V40.5538C8.86786 40.398 8.81003 40.2868 8.71214 40.2512C8.61425 40.2156 8.48075 40.26 8.36952 40.3757L5.96677 42.7563C5.82438 42.8986 5.73096 43.1167 5.73096 43.308V46.5473C5.73096 46.7074 5.79768 46.8231 5.90892 46.8542C6.02016 46.8809 6.1581 46.8187 6.27378 46.6852L6.61641 46.2847C6.79884 46.0756 6.86557 45.7597 6.77213 45.5817C6.70984 45.4661 6.59415 45.4348 6.46956 45.4882V43.2502L8.16483 41.5727H8.16037Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
         />
         <path
           fillRule="evenodd"
           clipRule="evenodd"
-          d="M11.8268 42.0622C11.7289 42.0222 11.5998 42.0667 11.4841 42.1868L9.08139 44.5672C8.93901 44.7096 8.84558 44.9321 8.84558 45.1145V48.3582C8.84558 48.5095 8.90341 48.6208 9.0013 48.6564C9.10809 48.692 9.23269 48.6475 9.34838 48.5318L11.7466 46.1513C11.8935 46.0133 11.9869 45.7909 11.9869 45.5995V42.3558C11.9869 42.2045 11.9291 42.0933 11.8223 42.0622H11.8268ZM11.2483 45.6574L9.58419 47.3037V45.0567L11.2483 43.4104V45.6574Z"
-          fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          d="M11.8268 41.4343C11.7289 41.3942 11.5998 41.4387 11.4841 41.5589L9.08139 43.9393C8.93901 44.0817 8.84558 44.3041 8.84558 44.4866V47.7303C8.84558 47.8816 8.90341 47.9929 9.0013 48.0285C9.10809 48.0641 9.23269 48.0196 9.34838 47.9039L11.7466 45.5233C11.8935 45.3854 11.9869 45.1629 11.9869 44.9716V41.7279C11.9869 41.5766 11.9291 41.4654 11.8223 41.4343H11.8268ZM11.2483 45.0295L9.58419 46.6758V44.4288L11.2483 42.7825V45.0295Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
         />
         <path
           fillRule="evenodd"
           clipRule="evenodd"
-          d="M24.37 39.6108L16.6501 43.5442C16.0138 43.869 15.5021 43.5041 15.5021 42.7299C15.5021 41.9557 16.0182 41.0703 16.6501 40.7454L24.37 36.812C25.0062 36.4872 25.5179 36.8521 25.5179 37.6263C25.5179 38.4006 25.0018 39.286 24.37 39.6108Z"
-          fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          d="M24.37 38.9829L16.6501 42.9163C16.0138 43.2411 15.5021 42.8762 15.5021 42.102C15.5021 41.3278 16.0182 40.4423 16.6501 40.1175L24.37 36.1841C25.0062 35.8593 25.5179 36.2242 25.5179 36.9984C25.5179 37.7726 25.0018 38.6581 24.37 38.9829Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
         />
         <path
           fillRule="evenodd"
           clipRule="evenodd"
-          d="M41.0556 38.0092L16.877 50.33C16.1161 50.7171 15.5021 50.281 15.5021 49.3599C15.5021 48.4344 16.1161 47.3755 16.877 46.9884L41.0556 34.6676C41.8165 34.2805 42.4305 34.7167 42.4305 35.6377C42.4305 36.5632 41.8165 37.6221 41.0556 38.0092Z"
-          fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          d="M41.0556 37.3813L16.877 49.7021C16.1161 50.0892 15.5021 49.6531 15.5021 48.732C15.5021 47.8065 16.1161 46.7476 16.877 46.3605L41.0556 34.0397C41.8165 33.6526 42.4305 34.0887 42.4305 35.0098C42.4305 35.9353 41.8165 36.9942 41.0556 37.3813Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
         />
         <path
           fillRule="evenodd"
           clipRule="evenodd"
-          d="M156.013 57.7686C157.237 57.1457 158.016 55.6728 158.016 53.5771C158.016 49.8261 155.515 45.5102 152.436 43.9439C151.074 43.2498 149.828 43.2053 148.858 43.6992L150.843 42.6891C151.813 42.1952 153.059 42.2398 154.42 42.9339C157.504 44.5046 160 48.8205 160 52.567C160 54.6628 159.221 56.1356 157.998 56.7586L156.013 57.7686Z"
+          d="M156.013 57.1407C157.237 56.5177 158.016 55.0449 158.016 52.9492C158.016 49.1982 155.515 44.8822 152.436 43.316C151.074 42.6219 149.828 42.5774 148.858 43.0713L150.843 42.0612C151.813 41.5673 153.059 41.6118 154.42 42.306C157.504 43.8766 160 48.1926 160 51.9391C160 54.0348 159.221 55.5077 157.998 56.1306L156.013 57.1407Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.4"
           strokeLinecap="round"
           strokeLinejoin="round"
@@ -215,34 +221,29 @@ export function ProjectVerticalStackIllustration({ className }: TIllustrationAss
         <path
           fillRule="evenodd"
           clipRule="evenodd"
-          d="M156.013 57.7683C155.043 58.2622 153.797 58.2177 152.436 57.5236C149.352 55.9529 146.856 51.6369 146.856 47.8904C146.856 45.7947 147.635 44.3218 148.858 43.6989C149.828 43.205 151.074 43.2495 152.436 43.9436C155.519 45.5143 158.016 49.8303 158.016 53.5768C158.016 55.6725 157.237 57.1454 156.013 57.7683Z"
+          d="M156.013 57.1404C155.043 57.6343 153.797 57.5898 152.436 56.8956C149.352 55.325 146.856 51.009 146.856 47.2625C146.856 45.1668 147.635 43.6939 148.858 43.071C149.828 42.5771 151.074 42.6216 152.436 43.3157C155.519 44.8864 158.016 49.2024 158.016 52.9489C158.016 55.0446 157.237 56.5175 156.013 57.1404Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.4"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
         <path
-          d="M155.212 51.0894L149.659 48.2594C149.49 48.1704 149.352 47.9346 149.352 47.7255C149.352 47.5164 149.49 47.4185 149.659 47.5075L155.212 50.3374C155.381 50.4264 155.519 50.6622 155.519 50.8714C155.519 51.0805 155.381 51.1784 155.212 51.0894Z"
-          fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          d="M155.212 50.4614L149.659 47.6315C149.49 47.5425 149.352 47.3067 149.352 47.0976C149.352 46.8885 149.49 46.7906 149.659 46.8796L155.212 49.7095C155.381 49.7985 155.519 50.0343 155.519 50.2434C155.519 50.4526 155.381 50.5504 155.212 50.4614Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
         />
         <path
-          d="M153.98 52.7139L150.896 51.1432C150.727 51.0542 150.589 50.8184 150.589 50.6093C150.589 50.4002 150.727 50.3023 150.896 50.3913L153.98 51.962C154.149 52.051 154.287 52.2868 154.287 52.4959C154.287 52.705 154.149 52.8029 153.98 52.7139Z"
-          fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          d="M153.98 52.086L150.896 50.5153C150.727 50.4263 150.589 50.1905 150.589 49.9814C150.589 49.7722 150.727 49.6744 150.896 49.7634L153.98 51.334C154.149 51.423 154.287 51.6588 154.287 51.868C154.287 52.0771 154.149 52.175 153.98 52.086Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
         />
         <path
-          d="M153.054 54.4932L151.822 53.8659C151.653 53.7769 151.515 53.5411 151.515 53.332C151.515 53.1228 151.653 53.025 151.822 53.1139L153.054 53.7413C153.223 53.8303 153.361 54.0661 153.361 54.2752C153.361 54.4843 153.223 54.5822 153.054 54.4932Z"
-          fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          d="M153.054 53.8653L151.822 53.238C151.653 53.149 151.515 52.9132 151.515 52.704C151.515 52.4949 151.653 52.397 151.822 52.486L153.054 53.1134C153.223 53.2023 153.361 53.4381 153.361 53.6473C153.361 53.8564 153.223 53.9543 153.054 53.8653Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
         />
       </g>
       <defs>
-        <clipPath id="clip0_145_15535">
-          <rect
-            width="160"
-            height="141.745"
-            fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-            transform="translate(0 0.62793)"
-          />
+        <clipPath id="clip0_1047_10396">
+          <rect width="160" height="141.745" fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary} />
         </clipPath>
       </defs>
     </svg>
diff --git a/packages/propel/src/empty-state/assets/vertical-stack/server-error.tsx b/packages/propel/src/empty-state/assets/vertical-stack/server-error.tsx
index cdf0cadcd..9611cea6e 100644
--- a/packages/propel/src/empty-state/assets/vertical-stack/server-error.tsx
+++ b/packages/propel/src/empty-state/assets/vertical-stack/server-error.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper";
 import type { TIllustrationAssetProps } from "../helper";
 
@@ -13,17 +19,17 @@ export function ServerErrorVerticalStackIllustration({ className }: TIllustratio
     >
       <g opacity="0.2">
         <path
-          d="M1 147.661C1 149.794 2.597 151.922 5.78537 153.552L46.8392 174.472C53.2216 177.722 63.5656 177.722 69.9479 174.472L156.215 130.517C159.403 128.892 161 126.764 161 124.631V131.443C161 133.576 159.403 135.703 156.215 137.328L69.9479 181.283C63.5656 184.533 53.2216 184.533 46.8392 181.283L5.78537 160.364C2.59135 158.738 1 156.605 1 154.472V147.661Z"
+          d="M0.25 147.382C0.25 149.515 1.847 151.642 5.03537 153.273L46.0892 174.192C52.4716 177.443 62.8156 177.443 69.1979 174.192L155.465 130.238C158.653 128.613 160.25 126.485 160.25 124.352V131.163C160.25 133.296 158.653 135.424 155.465 137.049L69.1979 181.004C62.8156 184.254 52.4716 184.254 46.0892 181.004L5.03537 160.084C1.84135 158.459 0.25 156.326 0.25 154.193V147.382Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.5"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
         <path
-          d="M1 147.661C1 145.528 2.597 143.401 5.78537 141.775L92.0521 97.8209C98.4344 94.5704 108.778 94.5704 115.161 97.8209L156.215 118.74C159.409 120.365 161 122.498 161 124.631C161 126.765 159.403 128.892 156.215 130.517L69.9479 174.472C63.5656 177.722 53.2216 177.722 46.8392 174.472L5.78537 153.553C2.59135 151.927 1 149.794 1 147.661Z"
+          d="M0.25 147.382C0.25 145.249 1.847 143.121 5.03537 141.496L91.3021 97.5416C97.6844 94.2911 108.028 94.2911 114.411 97.5416L155.465 118.461C158.659 120.086 160.25 122.219 160.25 124.352C160.25 126.485 158.653 128.613 155.465 130.238L69.1979 174.192C62.8156 177.443 52.4716 177.443 46.0892 174.192L5.03537 153.273C1.84135 151.648 0.25 149.515 0.25 147.382Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.5"
           strokeLinecap="round"
           strokeLinejoin="round"
@@ -31,32 +37,48 @@ export function ServerErrorVerticalStackIllustration({ className }: TIllustratio
       </g>
       <g opacity="0.6">
         <path
-          d="M1 126.144C1 128.277 2.597 130.404 5.78537 132.035L46.8392 152.954C53.2216 156.205 63.5656 156.205 69.9479 152.954L156.215 109C159.403 107.375 161 105.247 161 103.114V109.925C161 112.058 159.403 114.186 156.215 115.811L69.9479 159.766C63.5656 163.016 53.2216 163.016 46.8392 159.766L5.78537 138.846C2.59135 137.221 1 135.088 1 132.955V126.144Z"
+          d="M0.25 125.864C0.25 127.997 1.847 130.125 5.03537 131.756L46.0892 152.675C52.4716 155.925 62.8156 155.925 69.1979 152.675L155.465 108.721C158.653 107.095 160.25 104.968 160.25 102.835V109.646C160.25 111.779 158.653 113.907 155.465 115.532L69.1979 159.486C62.8156 162.737 52.4716 162.737 46.0892 159.486L5.03537 138.567C1.84135 136.942 0.25 134.809 0.25 132.676V125.864Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.5"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
         <path
-          d="M1 126.144C1 124.011 2.597 121.883 5.78537 120.258L92.0521 76.3036C98.4344 73.0531 108.778 73.0531 115.161 76.3036L156.215 97.2226C159.409 98.8479 161 100.981 161 103.114C161 105.247 159.403 107.375 156.215 109L69.9479 152.954C63.5656 156.205 53.2216 156.205 46.8392 152.954L5.78537 132.035C2.59135 130.41 1 128.277 1 126.144Z"
+          d="M0.25 125.864C0.25 123.731 1.847 121.604 5.03537 119.979L91.3021 76.0243C97.6844 72.7738 108.028 72.7738 114.411 76.0243L155.465 96.9433C158.659 98.5686 160.25 100.702 160.25 102.835C160.25 104.968 158.653 107.095 155.465 108.721L69.1979 152.675C62.8156 155.925 52.4716 155.925 46.0892 152.675L5.03537 131.756C1.84135 130.131 0.25 127.998 0.25 125.864Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.5"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
       </g>
       <path
-        d="M1 104.621C1 106.754 2.597 108.881 5.78537 110.512L46.8392 131.431C53.2216 134.682 63.5656 134.682 69.9479 131.431L156.215 87.4769C159.403 85.8516 161 83.7242 161 81.5911V88.4023C161 90.5354 159.403 92.6629 156.215 94.2881L69.9479 138.243C63.5656 141.493 53.2216 141.493 46.8392 138.243L5.78537 117.323C2.59135 115.698 1 113.565 1 111.432V104.621Z"
+        d="M0.25 104.341C0.25 106.475 1.847 108.602 5.03537 110.233L46.0892 131.152C52.4716 134.402 62.8156 134.402 69.1979 131.152L155.465 87.1976C158.653 85.5723 160.25 83.4449 160.25 81.3118V88.123C160.25 90.2561 158.653 92.3836 155.465 94.0088L69.1979 137.963C62.8156 141.214 52.4716 141.214 46.0892 137.963L5.03537 117.044C1.84135 115.419 0.25 113.286 0.25 111.153V104.341Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.5"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
       <path
-        d="M1 104.621C1 102.488 2.597 100.36 5.78537 98.735L92.0521 54.7806C98.4344 51.5302 108.778 51.5302 115.161 54.7806L156.215 75.6997C159.409 77.3249 161 79.458 161 81.5912C161 83.7243 159.403 85.8517 156.215 87.4769L69.9479 131.431C63.5656 134.682 53.2216 134.682 46.8392 131.431L5.78537 110.512C2.59135 108.887 1 106.754 1 104.621Z"
+        d="M0.25 104.341C0.25 102.208 1.847 100.081 5.03537 98.4557L91.3021 54.5013C97.6844 51.2509 108.028 51.2509 114.411 54.5013L155.465 75.4204C158.659 77.0456 160.25 79.1788 160.25 81.3119C160.25 83.445 158.653 85.5724 155.465 87.1976L69.1979 131.152C62.8156 134.402 52.4716 134.402 46.0892 131.152L5.03537 110.233C1.84135 108.608 0.25 106.475 0.25 104.341Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M80.2527 111.503C78.0575 111.503 75.9808 111.063 74.412 110.261L41.5071 93.4956C39.8142 92.6322 38.8828 91.4415 38.8828 90.1436V78.8573C38.8828 77.5594 39.8142 76.3743 41.5071 75.5109L42.4833 75.0143L41.5071 74.5177C39.8142 73.6543 38.8828 72.4636 38.8828 71.1657V59.8794C38.8828 58.5815 39.8142 57.3964 41.5071 56.533L42.4833 56.0364L41.5071 55.5398C39.8142 54.6764 38.8828 53.4857 38.8828 52.1878V40.9016C38.8828 39.6036 39.8142 38.4186 41.5071 37.5552L42.4833 37.0586L41.5071 36.562C39.8142 35.6986 38.8828 34.5079 38.8828 33.21V21.9237C38.8828 20.6258 39.8142 19.4407 41.5071 18.5773L74.412 1.81157C75.9808 1.01024 78.0575 0.570068 80.2527 0.570068C82.4479 0.570068 84.5246 1.01024 86.0934 1.81157L118.999 18.5773C120.691 19.4407 121.623 20.6314 121.623 21.9293V33.2156C121.623 34.5135 120.691 35.6986 118.999 36.562L118.022 37.0586L118.999 37.5552C120.691 38.4186 121.623 39.6093 121.623 40.9072V52.1935C121.623 53.4914 120.691 54.6764 118.999 55.5398L118.022 56.0364L118.999 56.533C120.691 57.3964 121.623 58.5871 121.623 59.8851V71.1713C121.623 72.4693 120.691 73.6543 118.999 74.5177L118.022 75.0143L118.999 75.5109C120.691 76.3743 121.623 77.565 121.623 78.8629V90.1492C121.623 91.4471 120.691 92.6322 118.999 93.4956L86.0934 110.261C84.5246 111.063 82.4479 111.503 80.2527 111.503Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+      />
+      <path
+        d="M80.2528 1.12863C82.273 1.12863 84.2989 1.52366 85.8394 2.30806L118.745 19.0738C120.291 19.8582 121.058 20.8909 121.058 21.9236V33.2099C121.058 34.2369 120.285 35.2696 118.745 36.054L116.781 37.0529L118.745 38.0517C120.291 38.8361 121.058 39.8687 121.058 40.9014V52.1877C121.058 53.2148 120.285 54.2475 118.745 55.0319L116.781 56.0307L118.745 57.0295C120.291 57.8139 121.058 58.8466 121.058 59.8793V71.1656C121.058 72.1926 120.285 73.2253 118.745 74.0098L116.781 75.0086L118.745 76.0074C120.291 76.7918 121.058 77.8245 121.058 78.8572V90.1435C121.058 91.1705 120.285 92.2032 118.745 92.9876L85.8394 109.753C84.2989 110.538 82.273 110.933 80.2528 110.933C78.2325 110.933 76.2067 110.538 74.6661 109.753L41.761 92.9876C40.2148 92.2032 39.4472 91.1705 39.4472 90.1378V78.8515C39.4472 77.8245 40.2204 76.7918 41.761 76.0074L43.7248 75.0086L41.761 74.0098C40.2148 73.2253 39.4472 72.1927 39.4472 71.16V59.8737C39.4472 58.8466 40.2204 57.8139 41.761 57.0295L43.7248 56.0307L41.761 55.0319C40.2148 54.2475 39.4472 53.2148 39.4472 52.1821V40.8958C39.4472 39.8688 40.2204 38.8361 41.761 38.0517L43.7248 37.0529L41.761 36.054C40.2148 35.2696 39.4472 34.2369 39.4472 33.2042V21.918C39.4472 20.8909 40.2204 19.8582 41.761 19.0738L74.6661 2.30806C76.2067 1.52366 78.2325 1.12863 80.2528 1.12863ZM80.2528 0C77.9673 0 75.8003 0.462736 74.1525 1.30356L41.2474 18.0693C39.3569 19.0343 38.3186 20.4 38.3186 21.918V33.2042C38.3186 34.0846 38.6968 35.7549 41.2418 37.0529C38.7024 38.3508 38.3186 40.0211 38.3186 40.8958V52.1821C38.3186 53.0624 38.6968 54.7328 41.2418 56.0307C38.7024 57.3286 38.3186 58.999 38.3186 59.8737V71.16C38.3186 72.0403 38.6968 73.7106 41.2418 75.0086C38.7024 76.3065 38.3186 77.9769 38.3186 78.8515V90.1378C38.3186 91.0181 38.6967 92.6942 41.2474 93.9921L74.1525 110.758C75.8003 111.599 77.9673 112.061 80.2528 112.061C82.5383 112.061 84.7052 111.599 86.353 110.758L119.258 93.9921C121.809 92.6942 122.187 91.0238 122.187 90.1435V78.8572C122.187 77.9769 121.809 76.3065 119.264 75.0086C121.803 73.7106 122.187 72.0403 122.187 71.1656V59.8793C122.187 58.999 121.809 57.3286 119.264 56.0307C121.803 54.7328 122.187 53.0624 122.187 52.1877V40.9014C122.187 40.0211 121.809 38.3508 119.264 37.0529C121.803 35.7549 122.187 34.0846 122.187 33.2099V21.9236C122.187 21.0433 121.809 19.3673 119.258 18.0693L86.353 1.30356C84.7052 0.462736 82.5383 0 80.2528 0Z"
+        fill="var(--illustration-stroke-tertiary)"
+      />
+      <path
+        d="M39.4473 78.8572C39.4473 79.8899 40.2148 80.9169 41.761 81.707L74.6662 98.4727C77.753 100.047 82.7527 100.047 85.8395 98.4727L118.745 81.707C120.285 80.9226 121.058 79.8899 121.058 78.8628V90.1491C121.058 91.1762 120.285 92.2088 118.745 92.9932L85.8395 109.759C82.7527 111.333 77.753 111.333 74.6662 109.759L41.761 92.9932C40.2148 92.2088 39.4473 91.1761 39.4473 90.1435V78.8572Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
         stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
         strokeWidth="0.5"
@@ -64,15 +86,51 @@ export function ServerErrorVerticalStackIllustration({ className }: TIllustratio
         strokeLinejoin="round"
       />
       <path
-        d="M81.0027 111.782C78.8075 111.782 76.7308 111.342 75.162 110.541L42.2571 93.7749C40.5642 92.9115 39.6328 91.7208 39.6328 90.4229V79.1366C39.6328 77.8387 40.5642 76.6536 42.2571 75.7902L43.2333 75.2936L42.2571 74.797C40.5642 73.9336 39.6328 72.7429 39.6328 71.445V60.1587C39.6328 58.8608 40.5642 57.6757 42.2571 56.8123L43.2333 56.3157L42.2571 55.8191C40.5642 54.9557 39.6328 53.765 39.6328 52.4671V41.1808C39.6328 39.8829 40.5642 38.6979 42.2571 37.8345L43.2333 37.3379L42.2571 36.8413C40.5642 35.9779 39.6328 34.7872 39.6328 33.4893V22.203C39.6328 20.9051 40.5642 19.72 42.2571 18.8566L75.162 2.09086C76.7308 1.28954 78.8075 0.849365 81.0027 0.849365C83.1979 0.849365 85.2746 1.28954 86.8434 2.09086L119.749 18.8566C121.441 19.72 122.373 20.9107 122.373 22.2086V33.4949C122.373 34.7928 121.441 35.9779 119.749 36.8413L118.772 37.3379L119.749 37.8345C121.441 38.6979 122.373 39.8886 122.373 41.1865V52.4728C122.373 53.7707 121.441 54.9557 119.749 55.8191L118.772 56.3157L119.749 56.8123C121.441 57.6757 122.373 58.8664 122.373 60.1644V71.4506C122.373 72.7486 121.441 73.9336 119.749 74.797L118.772 75.2936L119.749 75.7902C121.441 76.6536 122.373 77.8443 122.373 79.1422V90.4285C122.373 91.7264 121.441 92.9115 119.749 93.7749L86.8434 110.541C85.2746 111.342 83.1979 111.782 81.0027 111.782Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        d="M39.4473 78.8571C39.4473 77.8301 40.2204 76.7974 41.761 76.013L74.6662 59.2472C77.753 57.6728 82.7527 57.6728 85.8395 59.2472L118.745 76.013C120.291 76.7974 121.058 77.8301 121.058 78.8628C121.058 79.8955 120.285 80.9225 118.745 81.7069L85.8395 98.4727C82.7527 100.047 77.753 100.047 74.6662 98.4727L41.761 81.7069C40.2148 80.9225 39.4473 79.8898 39.4473 78.8571Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
       />
       <path
-        d="M81.0028 1.40792C83.023 1.40792 85.0489 1.80296 86.5894 2.58735L119.495 19.3531C121.041 20.1375 121.808 21.1702 121.808 22.2029V33.4892C121.808 34.5162 121.035 35.5489 119.495 36.3333L117.531 37.3321L119.495 38.331C121.041 39.1154 121.808 40.148 121.808 41.1807V52.467C121.808 53.4941 121.035 54.5268 119.495 55.3112L117.531 56.31L119.495 57.3088C121.041 58.0932 121.808 59.1259 121.808 60.1586V71.4449C121.808 72.4719 121.035 73.5046 119.495 74.289L117.531 75.2879L119.495 76.2867C121.041 77.0711 121.808 78.1038 121.808 79.1365V90.4228C121.808 91.4498 121.035 92.4825 119.495 93.2669L86.5894 110.033C85.0489 110.817 83.023 111.212 81.0028 111.212C78.9825 111.212 76.9567 110.817 75.4161 110.033L42.511 93.2669C40.9648 92.4825 40.1972 91.4498 40.1972 90.4171V79.1308C40.1972 78.1038 40.9704 77.0711 42.511 76.2867L44.4748 75.2879L42.511 74.289C40.9648 73.5046 40.1972 72.472 40.1972 71.4393V60.153C40.1972 59.1259 40.9704 58.0932 42.511 57.3088L44.4748 56.31L42.511 55.3112C40.9648 54.5268 40.1972 53.4941 40.1972 52.4614V41.1751C40.1972 40.1481 40.9704 39.1154 42.511 38.331L44.4748 37.3321L42.511 36.3333C40.9648 35.5489 40.1972 34.5162 40.1972 33.4835V22.1973C40.1972 21.1702 40.9704 20.1375 42.511 19.3531L75.4161 2.58735C76.9567 1.80296 78.9825 1.40792 81.0028 1.40792ZM81.0028 0.279297C78.7173 0.279297 76.5503 0.742033 74.9025 1.58286L41.9974 18.3486C40.1069 19.3136 39.0686 20.6793 39.0686 22.1973V33.4835C39.0686 34.3639 39.4468 36.0342 41.9918 37.3321C39.4524 38.6301 39.0686 40.3004 39.0686 41.1751V52.4614C39.0686 53.3417 39.4468 55.0121 41.9918 56.31C39.4524 57.6079 39.0686 59.2783 39.0686 60.153V71.4393C39.0686 72.3196 39.4468 73.9899 41.9918 75.2879C39.4524 76.5858 39.0686 78.2561 39.0686 79.1308V90.4171C39.0686 91.2974 39.4467 92.9735 41.9974 94.2714L74.9025 111.037C76.5503 111.878 78.7173 112.341 81.0028 112.341C83.2883 112.341 85.4552 111.878 87.103 111.037L120.008 94.2714C122.559 92.9735 122.937 91.3031 122.937 90.4228V79.1365C122.937 78.2561 122.559 76.5858 120.014 75.2879C122.553 73.9899 122.937 72.3196 122.937 71.4449V60.1586C122.937 59.2783 122.559 57.6079 120.014 56.31C122.553 55.0121 122.937 53.3417 122.937 52.467V41.1807C122.937 40.3004 122.559 38.6301 120.014 37.3321C122.553 36.0342 122.937 34.3639 122.937 33.4892V22.2029C122.937 21.3226 122.559 19.6466 120.008 18.3486L87.103 1.58286C85.4552 0.742033 83.2883 0.279297 81.0028 0.279297Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        d="M105.196 96.9265L104.106 97.4795C103.886 97.5924 103.706 97.4682 103.706 97.1973V92.4684C103.706 92.1975 103.886 91.8928 104.106 91.7799L105.196 91.2269C105.416 91.1141 105.596 91.2382 105.596 91.5091V96.238C105.596 96.5089 105.416 96.8136 105.196 96.9265Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
-        d="M40.1973 79.1365C40.1973 80.1692 40.9648 81.1962 42.511 81.9863L75.4162 98.752C78.503 100.326 83.5027 100.326 86.5895 98.752L119.495 81.9863C121.035 81.2019 121.808 80.1692 121.808 79.1421V90.4284C121.808 91.4554 121.035 92.4881 119.495 93.2725L86.5895 110.038C83.5027 111.613 78.503 111.613 75.4162 110.038L42.511 93.2725C40.9648 92.4881 40.1973 91.4554 40.1973 90.4227V79.1365Z"
+        d="M107.713 95.6455L106.623 96.1985C106.403 96.3114 106.223 96.1872 106.223 95.9164V91.1874C106.223 90.9165 106.403 90.6118 106.623 90.4989L107.713 89.9459C107.933 89.8331 108.113 89.9572 108.113 90.2281V94.957C108.113 95.2279 107.933 95.5326 107.713 95.6455Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M110.229 94.3645L109.14 94.9175C108.92 95.0304 108.74 94.9062 108.74 94.6354V89.9064C108.74 89.6355 108.92 89.3308 109.14 89.218L110.229 88.6649C110.449 88.552 110.63 88.6762 110.63 88.9471V93.676C110.63 93.9469 110.449 94.2516 110.229 94.3645Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M112.752 93.0778L111.663 93.6309C111.443 93.7437 111.262 93.6196 111.262 93.3487V88.6198C111.262 88.3489 111.443 88.0442 111.663 87.9313L112.752 87.3783C112.972 87.2654 113.152 87.3896 113.152 87.6604V92.3894C113.152 92.6603 112.972 92.965 112.752 93.0778Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M115.269 91.7968L114.179 92.3499C113.959 92.4627 113.779 92.3386 113.779 92.0677V87.3388C113.779 87.0679 113.959 86.7632 114.179 86.6503L115.269 86.0973C115.489 85.9844 115.669 86.1086 115.669 86.3794V91.1084C115.669 91.3793 115.489 91.684 115.269 91.7968Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M117.786 90.5159L116.696 91.0689C116.476 91.1817 116.296 91.0576 116.296 90.7867V86.0578C116.296 85.7869 116.476 85.4822 116.696 85.3693L117.786 84.8163C118.006 84.7034 118.186 84.8276 118.186 85.0984V89.8274C118.186 90.0983 118.006 90.403 117.786 90.5159Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M87.843 102.869C87.843 103.772 87.2393 104.81 86.5 105.188C85.7608 105.566 85.1567 105.143 85.1567 104.24C85.1567 103.337 85.7608 102.299 86.5 101.921C87.2393 101.542 87.843 101.966 87.843 102.869Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M92.0188 100.741C92.0188 101.644 91.415 102.682 90.6758 103.061C89.9365 103.439 89.3328 103.015 89.3328 102.112C89.3328 101.21 89.9365 100.171 90.6758 99.7931C91.415 99.415 92.0188 99.8383 92.0188 100.741Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M96.1948 98.6137C96.1948 99.5166 95.591 100.555 94.8518 100.933C94.1125 101.311 93.5088 100.888 93.5088 99.985C93.5088 99.0821 94.1125 98.0438 94.8518 97.6657C95.591 97.2876 96.1948 97.7108 96.1948 98.6137Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M39.4473 59.8794C39.4473 60.9121 40.2148 61.9392 41.761 62.7292L74.6662 79.4949C77.753 81.0694 82.7527 81.0694 85.8395 79.4949L118.745 62.7292C120.285 61.9448 121.058 60.9121 121.058 59.885V71.1713C121.058 72.1984 120.285 73.2311 118.745 74.0155L85.8395 90.7812C82.7527 92.3557 77.753 92.3557 74.6662 90.7812L41.761 74.0155C40.2148 73.2311 39.4473 72.1984 39.4473 71.1657V59.8794Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
         stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
         strokeWidth="0.5"
@@ -80,7 +138,7 @@ export function ServerErrorVerticalStackIllustration({ className }: TIllustratio
         strokeLinejoin="round"
       />
       <path
-        d="M40.1973 79.1364C40.1973 78.1094 40.9704 77.0767 42.511 76.2923L75.4162 59.5265C78.503 57.9521 83.5027 57.9521 86.5895 59.5265L119.495 76.2923C121.041 77.0767 121.808 78.1094 121.808 79.1421C121.808 80.1748 121.035 81.2018 119.495 81.9862L86.5895 98.752C83.5027 100.326 78.503 100.326 75.4162 98.752L42.511 81.9862C40.9648 81.2018 40.1973 80.1691 40.1973 79.1364Z"
+        d="M39.4473 59.8793C39.4473 58.8523 40.2204 57.8196 41.761 57.0352L74.6662 40.2694C77.753 38.695 82.7527 38.695 85.8395 40.2694L118.745 57.0352C120.291 57.8196 121.058 58.8523 121.058 59.885C121.058 60.9177 120.285 61.9448 118.745 62.7292L85.8395 79.4949C82.7527 81.0693 77.753 81.0693 74.6662 79.4949L41.761 62.7292C40.2148 61.9448 39.4473 60.912 39.4473 59.8793Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
         stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
         strokeWidth="0.5"
@@ -88,43 +146,43 @@ export function ServerErrorVerticalStackIllustration({ className }: TIllustratio
         strokeLinejoin="round"
       />
       <path
-        d="M105.946 97.2058L104.856 97.7588C104.636 97.8717 104.456 97.7475 104.456 97.4766V92.7477C104.456 92.4768 104.636 92.1721 104.856 92.0592L105.946 91.5062C106.166 91.3934 106.346 91.5175 106.346 91.7884V96.5173C106.346 96.7882 106.166 97.0929 105.946 97.2058Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M105.196 77.9487L104.106 78.5017C103.886 78.6146 103.706 78.4904 103.706 78.2196V73.4906C103.706 73.2197 103.886 72.915 104.106 72.8022L105.196 72.2491C105.416 72.1363 105.596 72.2604 105.596 72.5313V77.2602C105.596 77.5311 105.416 77.8358 105.196 77.9487Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
-        d="M108.463 95.9248L107.373 96.4778C107.153 96.5907 106.973 96.4665 106.973 96.1957V91.4667C106.973 91.1958 107.153 90.8911 107.373 90.7782L108.463 90.2252C108.683 90.1123 108.863 90.2365 108.863 90.5074V95.2363C108.863 95.5072 108.683 95.8119 108.463 95.9248Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M107.713 76.6621L106.623 77.2151C106.403 77.328 106.223 77.2038 106.223 76.933V72.204C106.223 71.9331 106.403 71.6284 106.623 71.5155L107.713 70.9625C107.933 70.8497 108.113 70.9738 108.113 71.2447V75.9736C108.113 76.2445 107.933 76.5492 107.713 76.6621Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
-        d="M110.979 94.6438L109.89 95.1968C109.67 95.3097 109.49 95.1855 109.49 94.9147V90.1857C109.49 89.9148 109.67 89.6101 109.89 89.4973L110.979 88.9442C111.199 88.8313 111.38 88.9555 111.38 89.2264V93.9553C111.38 94.2262 111.199 94.5309 110.979 94.6438Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M110.229 75.3811L109.14 75.9341C108.92 76.047 108.74 75.9228 108.74 75.652V70.923C108.74 70.6521 108.92 70.3474 109.14 70.2346L110.229 69.6815C110.449 69.5686 110.63 69.6928 110.63 69.9637V74.6926C110.63 74.9635 110.449 75.2682 110.229 75.3811Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
-        d="M113.502 93.3571L112.413 93.9102C112.193 94.023 112.012 93.8989 112.012 93.628V88.899C112.012 88.6282 112.193 88.3235 112.413 88.2106L113.502 87.6576C113.722 87.5447 113.902 87.6689 113.902 87.9397V92.6687C113.902 92.9396 113.722 93.2443 113.502 93.3571Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M112.752 74.1001L111.663 74.6531C111.443 74.7659 111.262 74.6418 111.262 74.3709V69.642C111.262 69.3711 111.443 69.0664 111.663 68.9535L112.752 68.4005C112.972 68.2876 113.152 68.4118 113.152 68.6827V73.4116C113.152 73.6825 112.972 73.9872 112.752 74.1001Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
-        d="M116.019 92.0761L114.929 92.6292C114.709 92.742 114.529 92.6179 114.529 92.347V87.6181C114.529 87.3472 114.709 87.0425 114.929 86.9296L116.019 86.3766C116.239 86.2637 116.419 86.3879 116.419 86.6587V91.3877C116.419 91.6586 116.239 91.9633 116.019 92.0761Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M115.269 72.8135L114.179 73.3665C113.959 73.4794 113.779 73.3552 113.779 73.0843V68.3554C113.779 68.0845 113.959 67.7798 114.179 67.6669L115.269 67.1139C115.489 67.001 115.669 67.1252 115.669 67.396V72.125C115.669 72.3959 115.489 72.7006 115.269 72.8135Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
-        d="M118.536 90.7952L117.446 91.3482C117.226 91.461 117.046 91.3369 117.046 91.066V86.3371C117.046 86.0662 117.226 85.7615 117.446 85.6486L118.536 85.0956C118.756 84.9827 118.936 85.1069 118.936 85.3777V90.1067C118.936 90.3776 118.756 90.6823 118.536 90.7952Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M117.786 71.5324L116.696 72.0854C116.476 72.1983 116.296 72.0742 116.296 71.8033V67.0743C116.296 66.8035 116.476 66.4988 116.696 66.3859L117.786 65.8329C118.006 65.72 118.186 65.8442 118.186 66.115V70.844C118.186 71.1148 118.006 71.4196 117.786 71.5324Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
-        d="M88.593 103.148C88.593 104.051 87.9893 105.089 87.25 105.467C86.5108 105.845 85.9067 105.422 85.9067 104.519C85.9067 103.616 86.5108 102.578 87.25 102.2C87.9893 101.822 88.593 102.245 88.593 103.148Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M87.843 83.8852C87.843 84.7881 87.2393 85.8265 86.5 86.2045C85.7608 86.5826 85.1567 86.1594 85.1567 85.2565C85.1567 84.3536 85.7608 83.3153 86.5 82.9372C87.2393 82.5591 87.843 82.9823 87.843 83.8852Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
-        d="M92.7688 101.02C92.7688 101.923 92.165 102.962 91.4258 103.34C90.6865 103.718 90.0828 103.295 90.0828 102.392C90.0828 101.489 90.6865 100.451 91.4258 100.072C92.165 99.6943 92.7688 100.118 92.7688 101.02Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M92.0188 81.7578C92.0188 82.6607 91.415 83.699 90.6758 84.0771C89.9365 84.4552 89.3328 84.032 89.3328 83.1291C89.3328 82.2262 89.9365 81.1878 90.6758 80.8097C91.415 80.4316 92.0188 80.8549 92.0188 81.7578Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
-        d="M96.9448 98.893C96.9448 99.7959 96.341 100.834 95.6018 101.212C94.8625 101.59 94.2588 101.167 94.2588 100.264C94.2588 99.3614 94.8625 98.3231 95.6018 97.945C96.341 97.5669 96.9448 97.9901 96.9448 98.893Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M96.1948 79.6303C96.1948 80.5332 95.591 81.5716 94.8518 81.9497C94.1125 82.3278 93.5088 81.9045 93.5088 81.0016C93.5088 80.0987 94.1125 79.0604 94.8518 78.6823C95.591 78.3042 96.1948 78.7274 96.1948 79.6303Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
-        d="M40.1973 60.1587C40.1973 61.1914 40.9648 62.2185 42.511 63.0085L75.4162 79.7742C78.503 81.3487 83.5027 81.3487 86.5895 79.7742L119.495 63.0085C121.035 62.2241 121.808 61.1914 121.808 60.1643V71.4506C121.808 72.4777 121.035 73.5104 119.495 74.2948L86.5895 91.0605C83.5027 92.6349 78.503 92.6349 75.4162 91.0605L42.511 74.2948C40.9648 73.5104 40.1973 72.4777 40.1973 71.445V60.1587Z"
+        d="M39.4473 40.8958C39.4473 41.9284 40.2148 42.9555 41.761 43.7455L74.6662 60.5113C77.753 62.0857 82.7527 62.0857 85.8395 60.5113L118.745 43.7455C120.285 42.9611 121.058 41.9284 121.058 40.9014V52.1876C121.058 53.2147 120.285 54.2474 118.745 55.0318L85.8395 71.7975C82.7527 73.372 77.753 73.372 74.6662 71.7975L41.761 55.0318C40.2148 54.2474 39.4473 53.2147 39.4473 52.182V40.8958Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
         stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
         strokeWidth="0.5"
@@ -132,7 +190,7 @@ export function ServerErrorVerticalStackIllustration({ className }: TIllustratio
         strokeLinejoin="round"
       />
       <path
-        d="M40.1973 60.1586C40.1973 59.1316 40.9704 58.0989 42.511 57.3145L75.4162 40.5487C78.503 38.9743 83.5027 38.9743 86.5895 40.5487L119.495 57.3145C121.041 58.0989 121.808 59.1316 121.808 60.1643C121.808 61.197 121.035 62.2241 119.495 63.0085L86.5895 79.7742C83.5027 81.3486 78.503 81.3486 75.4162 79.7742L42.511 63.0085C40.9648 62.2241 40.1973 61.1913 40.1973 60.1586Z"
+        d="M39.4473 40.8957C39.4473 39.8687 40.2204 38.8359 41.761 38.0515L74.6662 21.2858C77.753 19.7114 82.7527 19.7114 85.8395 21.2858L118.745 38.0515C120.291 38.8359 121.058 39.8686 121.058 40.9013C121.058 41.934 120.285 42.9611 118.745 43.7455L85.8395 60.5112C82.7527 62.0857 77.753 62.0857 74.6662 60.5112L41.761 43.7455C40.2148 42.9611 39.4473 41.9284 39.4473 40.8957Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
         stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
         strokeWidth="0.5"
@@ -140,43 +198,43 @@ export function ServerErrorVerticalStackIllustration({ className }: TIllustratio
         strokeLinejoin="round"
       />
       <path
-        d="M105.946 78.228L104.856 78.781C104.636 78.8939 104.456 78.7697 104.456 78.4988V73.7699C104.456 73.499 104.636 73.1943 104.856 73.0815L105.946 72.5284C106.166 72.4156 106.346 72.5397 106.346 72.8106V77.5395C106.346 77.8104 106.166 78.1151 105.946 78.228Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M105.196 58.965L104.106 59.5181C103.886 59.631 103.706 59.5068 103.706 59.2359V54.507C103.706 54.2361 103.886 53.9314 104.106 53.8185L105.196 53.2655C105.416 53.1526 105.596 53.2768 105.596 53.5477V58.2766C105.596 58.5475 105.416 58.8522 105.196 58.965Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
-        d="M108.463 76.9414L107.373 77.4944C107.153 77.6073 106.973 77.4831 106.973 77.2123V72.4833C106.973 72.2124 107.153 71.9077 107.373 71.7948L108.463 71.2418C108.683 71.129 108.863 71.2531 108.863 71.524V76.2529C108.863 76.5238 108.683 76.8285 108.463 76.9414Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M107.713 57.6841L106.623 58.2371C106.403 58.35 106.223 58.2258 106.223 57.9549V53.226C106.223 52.9551 106.403 52.6504 106.623 52.5375L107.713 51.9845C107.933 51.8716 108.113 51.9958 108.113 52.2666V56.9956C108.113 57.2665 107.933 57.5712 107.713 57.6841Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
-        d="M110.979 75.6604L109.89 76.2134C109.67 76.3263 109.49 76.2021 109.49 75.9313V71.2023C109.49 70.9314 109.67 70.6267 109.89 70.5139L110.979 69.9608C111.199 69.8479 111.38 69.9721 111.38 70.243V74.9719C111.38 75.2428 111.199 75.5475 110.979 75.6604Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M110.229 56.3974L109.14 56.9504C108.92 57.0633 108.74 56.9392 108.74 56.6683V51.9393C108.74 51.6685 108.92 51.3637 109.14 51.2509L110.229 50.6979C110.449 50.585 110.63 50.7092 110.63 50.98V55.709C110.63 55.9798 110.449 56.2846 110.229 56.3974Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
-        d="M113.502 74.3794L112.413 74.9324C112.193 75.0452 112.012 74.9211 112.012 74.6502V69.9213C112.012 69.6504 112.193 69.3457 112.413 69.2328L113.502 68.6798C113.722 68.5669 113.902 68.6911 113.902 68.962V73.6909C113.902 73.9618 113.722 74.2665 113.502 74.3794Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M112.752 55.1164L111.663 55.6695C111.443 55.7823 111.262 55.6582 111.262 55.3873V50.6584C111.262 50.3875 111.443 50.0827 111.663 49.9699L112.752 49.4169C112.972 49.304 113.152 49.4281 113.152 49.699V54.428C113.152 54.6988 112.972 55.0036 112.752 55.1164Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
-        d="M116.019 73.0928L114.929 73.6458C114.709 73.7586 114.529 73.6345 114.529 73.3636V68.6347C114.529 68.3638 114.709 68.0591 114.929 67.9462L116.019 67.3932C116.239 67.2803 116.419 67.4045 116.419 67.6753V72.4043C116.419 72.6752 116.239 72.9799 116.019 73.0928Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M115.269 53.8354L114.179 54.3885C113.959 54.5013 113.779 54.3772 113.779 54.1063V49.3774C113.779 49.1065 113.959 48.8018 114.179 48.6889L115.269 48.1359C115.489 48.023 115.669 48.1471 115.669 48.418V53.147C115.669 53.4178 115.489 53.7226 115.269 53.8354Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
-        d="M118.536 71.8117L117.446 72.3647C117.226 72.4776 117.046 72.3535 117.046 72.0826V67.3536C117.046 67.0828 117.226 66.7781 117.446 66.6652L118.536 66.1122C118.756 65.9993 118.936 66.1235 118.936 66.3943V71.1232C118.936 71.3941 118.756 71.6989 118.536 71.8117Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M117.786 52.5488L116.696 53.1018C116.476 53.2147 116.296 53.0906 116.296 52.8197V48.0907C116.296 47.8199 116.476 47.5151 116.696 47.4023L117.786 46.8492C118.006 46.7364 118.186 46.8605 118.186 47.1314V51.8603C118.186 52.1312 118.006 52.4359 117.786 52.5488Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
-        d="M88.593 84.1645C88.593 85.0674 87.9893 86.1058 87.25 86.4838C86.5108 86.8619 85.9067 86.4387 85.9067 85.5358C85.9067 84.6329 86.5108 83.5946 87.25 83.2165C87.9893 82.8384 88.593 83.2616 88.593 84.1645Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M87.843 64.9072C87.843 65.8101 87.2393 66.8484 86.5 67.2265C85.7608 67.6046 85.1567 67.1814 85.1567 66.2785C85.1567 65.3756 85.7608 64.3372 86.5 63.9592C87.2393 63.5811 87.843 64.0043 87.843 64.9072Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
-        d="M92.7688 82.0371C92.7688 82.94 92.165 83.9783 91.4258 84.3564C90.6865 84.7345 90.0828 84.3113 90.0828 83.4084C90.0828 82.5055 90.6865 81.4671 91.4258 81.089C92.165 80.7109 92.7688 81.1342 92.7688 82.0371Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M92.0188 62.7741C92.0188 63.677 91.415 64.7154 90.6758 65.0935C89.9365 65.4716 89.3328 65.0483 89.3328 64.1454C89.3328 63.2425 89.9365 62.2042 90.6758 61.8261C91.415 61.448 92.0188 61.8712 92.0188 62.7741Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
-        d="M96.9448 79.9096C96.9448 80.8125 96.341 81.8509 95.6018 82.229C94.8625 82.6071 94.2588 82.1838 94.2588 81.2809C94.2588 80.378 94.8625 79.3397 95.6018 78.9616C96.341 78.5835 96.9448 79.0067 96.9448 79.9096Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M96.1948 60.6467C96.1948 61.5496 95.591 62.588 94.8518 62.966C94.1125 63.3441 93.5088 62.9209 93.5088 62.018C93.5088 61.1151 94.1125 60.0767 94.8518 59.6986C95.591 59.3206 96.1948 59.7438 96.1948 60.6467Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
-        d="M40.1973 41.175C40.1973 42.2077 40.9648 43.2348 42.511 44.0248L75.4162 60.7906C78.503 62.365 83.5027 62.365 86.5895 60.7906L119.495 44.0248C121.035 43.2404 121.808 42.2077 121.808 41.1807V52.4669C121.808 53.494 121.035 54.5267 119.495 55.3111L86.5895 72.0768C83.5027 73.6513 78.503 73.6513 75.4162 72.0768L42.511 55.3111C40.9648 54.5267 40.1973 53.494 40.1973 52.4613V41.175Z"
+        d="M39.4473 21.918C39.4473 22.9507 40.2148 23.9777 41.761 24.7677L74.6662 41.5335C77.753 43.108 82.7527 43.108 85.8395 41.5335L118.745 24.7677C120.285 23.9833 121.058 22.9507 121.058 21.9236V33.2099C121.058 34.2369 120.285 35.2696 118.745 36.054L85.8395 52.8198C82.7527 54.3942 77.753 54.3942 74.6662 52.8198L41.761 36.054C40.2148 35.2696 39.4473 34.2369 39.4473 33.2042V21.918Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
         stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
         strokeWidth="0.5"
@@ -184,7 +242,7 @@ export function ServerErrorVerticalStackIllustration({ className }: TIllustratio
         strokeLinejoin="round"
       />
       <path
-        d="M40.1973 41.175C40.1973 40.148 40.9704 39.1152 42.511 38.3308L75.4162 21.5651C78.503 19.9907 83.5027 19.9907 86.5895 21.5651L119.495 38.3308C121.041 39.1152 121.808 40.1479 121.808 41.1806C121.808 42.2133 121.035 43.2404 119.495 44.0248L86.5895 60.7905C83.5027 62.365 78.503 62.365 75.4162 60.7905L42.511 44.0248C40.9648 43.2404 40.1973 42.2077 40.1973 41.175Z"
+        d="M39.4473 21.9179C39.4473 20.8909 40.2204 19.8582 41.761 19.0738L74.6662 2.30802C77.753 0.733588 82.7527 0.733588 85.8395 2.30802L118.745 19.0738C120.291 19.8582 121.058 20.8909 121.058 21.9236C121.058 22.9563 120.285 23.9833 118.745 24.7677L85.8395 41.5335C82.7527 43.1079 77.753 43.1079 74.6662 41.5335L41.761 24.7677C40.2148 23.9833 39.4473 22.9506 39.4473 21.9179Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
         stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
         strokeWidth="0.5"
@@ -192,103 +250,51 @@ export function ServerErrorVerticalStackIllustration({ className }: TIllustratio
         strokeLinejoin="round"
       />
       <path
-        d="M105.946 59.2443L104.856 59.7974C104.636 59.9103 104.456 59.7861 104.456 59.5152V54.7863C104.456 54.5154 104.636 54.2107 104.856 54.0978L105.946 53.5448C106.166 53.4319 106.346 53.5561 106.346 53.8269V58.5559C106.346 58.8268 106.166 59.1315 105.946 59.2443Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M105.196 39.9817L104.106 40.5347C103.886 40.6476 103.706 40.5234 103.706 40.2525V35.5236C103.706 35.2527 103.886 34.948 104.106 34.8351L105.196 34.2821C105.416 34.1692 105.596 34.2934 105.596 34.5643V39.2932C105.596 39.5641 105.416 39.8688 105.196 39.9817Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
-        d="M108.463 57.9634L107.373 58.5164C107.153 58.6293 106.973 58.5051 106.973 58.2342V53.5053C106.973 53.2344 107.153 52.9297 107.373 52.8168L108.463 52.2638C108.683 52.1509 108.863 52.2751 108.863 52.5459V57.2749C108.863 57.5458 108.683 57.8505 108.463 57.9634Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M107.713 38.7007L106.623 39.2537C106.403 39.3666 106.223 39.2424 106.223 38.9715V34.2426C106.223 33.9717 106.403 33.667 106.623 33.5541L107.713 33.0011C107.933 32.8882 108.113 33.0124 108.113 33.2832V38.0122C108.113 38.2831 107.933 38.5878 107.713 38.7007Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
-        d="M110.979 56.6767L109.89 57.2297C109.67 57.3426 109.49 57.2184 109.49 56.9476V52.2186C109.49 51.9478 109.67 51.643 109.89 51.5302L110.979 50.9772C111.199 50.8643 111.38 50.9885 111.38 51.2593V55.9883C111.38 56.2591 111.199 56.5639 110.979 56.6767Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M110.229 37.4196L109.14 37.9727C108.92 38.0855 108.74 37.9614 108.74 37.6905V32.9616C108.74 32.6907 108.92 32.386 109.14 32.2731L110.229 31.7201C110.449 31.6072 110.63 31.7314 110.63 32.0022V36.7312C110.63 37.0021 110.449 37.3068 110.229 37.4196Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
-        d="M113.502 55.3957L112.413 55.9488C112.193 56.0616 112.012 55.9375 112.012 55.6666V50.9377C112.012 50.6668 112.193 50.362 112.413 50.2492L113.502 49.6962C113.722 49.5833 113.902 49.7074 113.902 49.9783V54.7073C113.902 54.9781 113.722 55.2829 113.502 55.3957Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M112.752 36.1331L111.663 36.6861C111.443 36.7989 111.262 36.6748 111.262 36.4039V31.675C111.262 31.4041 111.443 31.0994 111.663 30.9865L112.752 30.4335C112.972 30.3206 113.152 30.4448 113.152 30.7156V35.4446C113.152 35.7154 112.972 36.0202 112.752 36.1331Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
-        d="M116.019 54.1147L114.929 54.6678C114.709 54.7806 114.529 54.6565 114.529 54.3856V49.6567C114.529 49.3858 114.709 49.0811 114.929 48.9682L116.019 48.4152C116.239 48.3023 116.419 48.4264 116.419 48.6973V53.4263C116.419 53.6971 116.239 54.0019 116.019 54.1147Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M115.269 34.852L114.179 35.405C113.959 35.5179 113.779 35.3937 113.779 35.1229V30.3939C113.779 30.123 113.959 29.8183 114.179 29.7055L115.269 29.1525C115.489 29.0396 115.669 29.1637 115.669 29.4346V34.1635C115.669 34.4344 115.489 34.7391 115.269 34.852Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
-        d="M118.536 52.8281L117.446 53.3811C117.226 53.494 117.046 53.3699 117.046 53.099V48.37C117.046 48.0992 117.226 47.7944 117.446 47.6815L118.536 47.1285C118.756 47.0157 118.936 47.1398 118.936 47.4107V52.1396C118.936 52.4105 118.756 52.7152 118.536 52.8281Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M117.786 33.571L116.696 34.1241C116.476 34.2369 116.296 34.1128 116.296 33.8419V29.1129C116.296 28.8421 116.476 28.5373 116.696 28.4245L117.786 27.8715C118.006 27.7586 118.186 27.8827 118.186 28.1536V32.8826C118.186 33.1534 118.006 33.4581 117.786 33.571Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
-        d="M88.593 65.1865C88.593 66.0894 87.9893 67.1277 87.25 67.5058C86.5108 67.8839 85.9067 67.4607 85.9067 66.5578C85.9067 65.6549 86.5108 64.6165 87.25 64.2384C87.9893 63.8604 88.593 64.2836 88.593 65.1865Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M87.843 45.9238C87.843 46.8267 87.2393 47.865 86.5 48.2431C85.7608 48.6212 85.1567 48.198 85.1567 47.2951C85.1567 46.3922 85.7608 45.3538 86.5 44.9758C87.2393 44.5977 87.843 45.0209 87.843 45.9238Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
-        d="M92.7688 63.0534C92.7688 63.9563 92.165 64.9947 91.4258 65.3728C90.6865 65.7509 90.0828 65.3276 90.0828 64.4247C90.0828 63.5218 90.6865 62.4835 91.4258 62.1054C92.165 61.7273 92.7688 62.1505 92.7688 63.0534Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M92.0188 43.7964C92.0188 44.6993 91.415 45.7376 90.6758 46.1157C89.9365 46.4938 89.3328 46.0705 89.3328 45.1676C89.3328 44.2647 89.9365 43.2264 90.6758 42.8483C91.415 42.4702 92.0188 42.8935 92.0188 43.7964Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
-        d="M96.9448 60.926C96.9448 61.8289 96.341 62.8673 95.6018 63.2453C94.8625 63.6234 94.2588 63.2002 94.2588 62.2973C94.2588 61.3944 94.8625 60.356 95.6018 59.9779C96.341 59.5999 96.9448 60.0231 96.9448 60.926Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M96.1948 41.6689C96.1948 42.5718 95.591 43.6101 94.8518 43.9882C94.1125 44.3663 93.5088 43.9431 93.5088 43.0402C93.5088 42.1373 94.1125 41.099 94.8518 40.7209C95.591 40.3428 96.1948 40.766 96.1948 41.6689Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
-        d="M40.1973 22.1973C40.1973 23.23 40.9648 24.257 42.511 25.047L75.4162 41.8128C78.503 43.3872 83.5027 43.3872 86.5895 41.8128L119.495 25.047C121.035 24.2626 121.808 23.23 121.808 22.2029V33.4892C121.808 34.5162 121.035 35.5489 119.495 36.3333L86.5895 53.0991C83.5027 54.6735 78.503 54.6735 75.4162 53.0991L42.511 36.3333C40.9648 35.5489 40.1973 34.5162 40.1973 33.4835V22.1973Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-        strokeWidth="0.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <path
-        d="M40.1973 22.1972C40.1973 21.1702 40.9704 20.1375 42.511 19.3531L75.4162 2.58732C78.503 1.01289 83.5027 1.01289 86.5895 2.58732L119.495 19.3531C121.041 20.1375 121.808 21.1702 121.808 22.2029C121.808 23.2356 121.035 24.2626 119.495 25.047L86.5895 41.8128C83.5027 43.3872 78.503 43.3872 75.4162 41.8128L42.511 25.047C40.9648 24.2626 40.1973 23.2299 40.1973 22.1972Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-        strokeWidth="0.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <path
-        d="M105.946 40.261L104.856 40.814C104.636 40.9269 104.456 40.8027 104.456 40.5318V35.8029C104.456 35.532 104.636 35.2273 104.856 35.1144L105.946 34.5614C106.166 34.4485 106.346 34.5727 106.346 34.8436V39.5725C106.346 39.8434 106.166 40.1481 105.946 40.261Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      />
-      <path
-        d="M108.463 38.98L107.373 39.533C107.153 39.6459 106.973 39.5217 106.973 39.2508V34.5219C106.973 34.251 107.153 33.9463 107.373 33.8334L108.463 33.2804C108.683 33.1675 108.863 33.2917 108.863 33.5625V38.2915C108.863 38.5624 108.683 38.8671 108.463 38.98Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      />
-      <path
-        d="M110.979 37.6989L109.89 38.252C109.67 38.3648 109.49 38.2407 109.49 37.9698V33.2409C109.49 32.97 109.67 32.6653 109.89 32.5524L110.979 31.9994C111.199 31.8865 111.38 32.0107 111.38 32.2815V37.0105C111.38 37.2814 111.199 37.5861 110.979 37.6989Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      />
-      <path
-        d="M113.502 36.4123L112.413 36.9654C112.193 37.0782 112.012 36.9541 112.012 36.6832V31.9543C112.012 31.6834 112.193 31.3787 112.413 31.2658L113.502 30.7128C113.722 30.5999 113.902 30.724 113.902 30.9949V35.7239C113.902 35.9947 113.722 36.2995 113.502 36.4123Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      />
-      <path
-        d="M116.019 35.1313L114.929 35.6843C114.709 35.7972 114.529 35.673 114.529 35.4022V30.6732C114.529 30.4023 114.709 30.0976 114.929 29.9848L116.019 29.4318C116.239 29.3189 116.419 29.443 116.419 29.7139V34.4428C116.419 34.7137 116.239 35.0184 116.019 35.1313Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      />
-      <path
-        d="M118.536 33.8503L117.446 34.4034C117.226 34.5162 117.046 34.3921 117.046 34.1212V29.3922C117.046 29.1214 117.226 28.8166 117.446 28.7038L118.536 28.1507C118.756 28.0379 118.936 28.162 118.936 28.4329V33.1619C118.936 33.4327 118.756 33.7374 118.536 33.8503Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      />
-      <path
-        d="M88.593 46.2031C88.593 47.106 87.9893 48.1443 87.25 48.5224C86.5108 48.9005 85.9067 48.4773 85.9067 47.5744C85.9067 46.6715 86.5108 45.6331 87.25 45.2551C87.9893 44.877 88.593 45.3002 88.593 46.2031Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      />
-      <path
-        d="M92.7688 44.0757C92.7688 44.9786 92.165 46.0169 91.4258 46.395C90.6865 46.7731 90.0828 46.3498 90.0828 45.4469C90.0828 44.544 90.6865 43.5057 91.4258 43.1276C92.165 42.7495 92.7688 43.1728 92.7688 44.0757Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      />
-      <path
-        d="M96.9448 41.9482C96.9448 42.8511 96.341 43.8894 95.6018 44.2675C94.8625 44.6456 94.2588 44.2224 94.2588 43.3195C94.2588 42.4166 94.8625 41.3783 95.6018 41.0002C96.341 40.6221 96.9448 41.0453 96.9448 41.9482Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      />
-      <path
-        d="M111.323 50.7628C110.945 50.7628 110.584 50.6782 110.263 50.5145L105.234 47.9525C105.139 47.9017 105.048 47.851 104.958 47.7832C103.474 46.7336 103.406 44.0306 104.8 41.6209L111.216 30.5378L104.958 26.1136C103.474 25.064 103.401 22.3553 104.794 19.9513C105.799 18.2188 107.339 17.0959 108.722 17.0959C109.106 17.0959 109.461 17.1805 109.783 17.3442L114.811 19.9062C114.907 19.9513 114.997 20.0077 115.082 20.0698L116.634 21.1702L122.593 10.8828C123.603 9.14468 125.143 8.02173 126.526 8.02173C126.904 8.02173 127.26 8.10638 127.581 8.27003L132.609 10.832C132.705 10.8828 132.796 10.9336 132.886 10.9956C134.37 12.0453 134.443 14.754 133.049 17.158L126.633 28.2411L132.892 32.6653C134.376 33.7149 134.443 36.418 133.055 38.8163C132.045 40.5544 130.504 41.683 129.122 41.683C128.744 41.683 128.388 41.5984 128.067 41.4347L123.039 38.8727C122.943 38.8276 122.852 38.7712 122.762 38.7091L121.21 37.6087L115.251 47.8961C114.247 49.6342 112.7 50.7572 111.318 50.7572L111.323 50.7628Z"
+        d="M110.573 50.4835C110.195 50.4835 109.834 50.3989 109.513 50.2352L104.484 47.6732C104.389 47.6224 104.298 47.5717 104.208 47.5039C102.724 46.4543 102.656 43.7513 104.05 41.3417L110.466 30.2585L104.208 25.8343C102.724 24.7847 102.651 22.076 104.044 19.672C105.049 17.9396 106.589 16.8166 107.972 16.8166C108.356 16.8166 108.711 16.9012 109.033 17.0649L114.061 19.6269C114.157 19.672 114.247 19.7284 114.332 19.7905L115.884 20.8909L121.843 10.6035C122.853 8.86539 124.393 7.74243 125.776 7.74243C126.154 7.74243 126.51 7.82708 126.831 7.99073L131.859 10.5527C131.955 10.6035 132.046 10.6543 132.136 10.7163C133.62 11.766 133.693 14.4747 132.299 16.8787L125.883 27.9618L132.142 32.386C133.626 33.4356 133.693 36.1387 132.305 38.537C131.295 40.2751 129.754 41.4037 128.372 41.4037C127.994 41.4037 127.638 41.3191 127.317 41.1554L122.289 38.5934C122.193 38.5483 122.102 38.4919 122.012 38.4298L120.46 37.3294L114.501 47.6168C113.497 49.3549 111.95 50.4779 110.568 50.4779L110.573 50.4835Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
       />
       <path
-        d="M126.543 8.58594C126.825 8.58594 127.096 8.64799 127.344 8.77213L132.372 11.3341C132.446 11.368 132.513 11.4131 132.581 11.4583C133.811 12.3273 133.811 14.7595 132.581 16.8757L125.905 28.4046L132.581 33.1279C133.811 33.997 133.811 36.4179 132.581 38.5397C131.65 40.148 130.279 41.1242 129.139 41.1242C128.857 41.1242 128.586 41.0622 128.337 40.938L123.309 38.376C123.236 38.3422 123.168 38.297 123.101 38.2519L121.041 36.796L114.771 47.6195C113.84 49.2278 112.469 50.1984 111.323 50.1984C111.035 50.1984 110.765 50.1363 110.522 50.0122L105.494 47.4502C105.426 47.4164 105.353 47.3712 105.291 47.326C104.061 46.457 104.066 44.0305 105.291 41.9086L111.967 30.3797L105.291 25.6564C104.061 24.7874 104.061 22.3608 105.291 20.239C106.222 18.6363 107.588 17.6657 108.733 17.6657C109.021 17.6657 109.292 17.7278 109.54 17.852L114.568 20.4139C114.636 20.4478 114.704 20.493 114.771 20.5381L116.831 21.994L123.101 11.1705C124.032 9.56217 125.403 8.58594 126.548 8.58594M126.543 7.45731C124.94 7.45731 123.247 8.66491 122.118 10.6005L116.47 20.3519L115.42 19.6126C115.307 19.5336 115.194 19.4659 115.076 19.4038L110.048 16.8418C109.647 16.6387 109.201 16.5314 108.727 16.5314C107.125 16.5314 105.432 17.7334 104.309 19.669C102.768 22.3269 102.915 25.3573 104.636 26.5763L110.471 30.7014L104.309 41.3387C102.768 43.9966 102.909 47.027 104.631 48.2402C104.738 48.3192 104.856 48.387 104.975 48.449L110.003 51.011C110.403 51.2142 110.849 51.3214 111.318 51.3214C112.92 51.3214 114.619 50.1194 115.742 48.1782L121.391 38.4268L122.44 39.1661C122.553 39.2451 122.672 39.3185 122.79 39.3749L127.818 41.9369C128.219 42.14 128.659 42.2472 129.133 42.2472C130.736 42.2472 132.429 41.0396 133.552 39.0983C135.087 36.4461 134.945 33.4157 133.224 32.2024L127.389 28.0773L133.552 17.44C135.092 14.7821 134.945 11.7517 133.224 10.5328C133.111 10.4538 132.999 10.3861 132.88 10.324L127.852 7.76203C127.451 7.55887 127.011 7.45166 126.543 7.45166V7.45731Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        d="M125.793 8.30664C126.075 8.30664 126.346 8.36869 126.594 8.49284L131.622 11.0548C131.696 11.0887 131.763 11.1338 131.831 11.179C133.061 12.048 133.061 14.4802 131.831 16.5964L125.155 28.1253L131.831 32.8486C133.061 33.7177 133.061 36.1386 131.831 38.2604C130.9 39.8687 129.529 40.8449 128.389 40.8449C128.107 40.8449 127.836 40.7829 127.587 40.6587L122.559 38.0967C122.486 38.0629 122.418 38.0177 122.351 37.9726L120.291 36.5167L114.021 47.3402C113.09 48.9485 111.719 49.9191 110.573 49.9191C110.285 49.9191 110.015 49.857 109.772 49.7329L104.744 47.1709C104.676 47.1371 104.603 47.0919 104.541 47.0467C103.311 46.1777 103.316 43.7512 104.541 41.6294L111.217 30.1004L104.541 25.3771C103.311 24.5081 103.311 22.0815 104.541 19.9597C105.472 18.357 106.838 17.3864 107.983 17.3864C108.271 17.3864 108.542 17.4485 108.79 17.5727L113.818 20.1346C113.886 20.1685 113.954 20.2137 114.021 20.2588L116.081 21.7147L122.351 10.8912C123.282 9.28288 124.653 8.30664 125.798 8.30664M125.793 7.17801C124.19 7.17801 122.497 8.38561 121.368 10.3212L115.72 20.0726L114.67 19.3333C114.557 19.2543 114.444 19.1866 114.326 19.1245L109.298 16.5626C108.897 16.3594 108.451 16.2522 107.977 16.2522C106.375 16.2522 104.682 17.4541 103.559 19.3897C102.018 22.0477 102.165 25.078 103.886 26.297L109.721 30.4221L103.559 41.0594C102.018 43.7173 102.159 46.7477 103.881 47.9609C103.988 48.0399 104.106 48.1077 104.225 48.1697L109.253 50.7317C109.653 50.9349 110.099 51.0421 110.568 51.0421C112.17 51.0421 113.869 49.8401 114.992 47.8989L120.641 38.1475L121.69 38.8868C121.803 38.9658 121.922 39.0392 122.04 39.0956L127.068 41.6576C127.469 41.8607 127.909 41.9679 128.383 41.9679C129.986 41.9679 131.679 40.7603 132.802 38.819C134.337 36.1668 134.195 33.1364 132.474 31.9232L126.639 27.798L132.802 17.1607C134.342 14.5028 134.195 11.4724 132.474 10.2535C132.361 10.1745 132.249 10.1068 132.13 10.0447L127.102 7.48273C126.701 7.27958 126.261 7.17236 125.793 7.17236V7.17801Z"
+        fill="var(--illustration-stroke-tertiary)"
       />
       <path
-        d="M121.447 36.0906L128.123 40.8139C128.191 40.859 128.258 40.9041 128.332 40.938L123.304 38.376C123.23 38.3422 123.163 38.297 123.095 38.2519L116.419 33.5286L121.447 36.0906Z"
+        d="M120.697 35.8113L127.373 40.5346C127.441 40.5797 127.508 40.6248 127.582 40.6587L122.554 38.0967C122.48 38.0629 122.413 38.0177 122.345 37.9726L115.669 33.2493L120.697 35.8113Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
         stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
         strokeWidth="0.5"
@@ -296,7 +302,7 @@ export function ServerErrorVerticalStackIllustration({ className }: TIllustratio
         strokeLinejoin="round"
       />
       <path
-        d="M132.367 11.3341C131.131 10.702 129.285 11.7234 128.123 13.7324L121.447 25.2613L116.419 22.6993L123.095 11.1704C124.258 9.16709 126.103 8.14568 127.338 8.77207L132.367 11.3341Z"
+        d="M131.617 11.0548C130.381 10.4227 128.535 11.4442 127.373 13.4531L120.697 24.982L115.669 22.42L122.345 10.8911C123.508 8.88779 125.353 7.86638 126.588 8.49277L131.617 11.0548Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
         stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
         strokeWidth="0.5"
@@ -304,7 +310,7 @@ export function ServerErrorVerticalStackIllustration({ className }: TIllustratio
         strokeLinejoin="round"
       />
       <path
-        d="M114.568 20.4139C113.332 19.7818 111.481 20.792 110.319 22.8009C109.089 24.9284 109.089 27.3549 110.319 28.2183L116.995 32.9416L111.967 30.3797L105.291 25.6564C104.061 24.7873 104.061 22.3607 105.291 20.2389C106.453 18.23 108.299 17.2255 109.54 17.8519L114.568 20.4139Z"
+        d="M113.818 20.1346C112.582 19.5025 110.731 20.5127 109.569 22.5216C108.339 24.6491 108.339 27.0756 109.569 27.939L116.245 32.6623L111.217 30.1004L104.541 25.3771C103.311 24.508 103.311 22.0814 104.541 19.9596C105.703 17.9507 107.549 16.9462 108.79 17.5726L113.818 20.1346Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
         stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
         strokeWidth="0.5"
@@ -312,7 +318,7 @@ export function ServerErrorVerticalStackIllustration({ className }: TIllustratio
         strokeLinejoin="round"
       />
       <path
-        d="M117 32.9416L110.324 44.4705C109.094 46.5924 109.094 49.0189 110.324 49.888C110.392 49.9331 110.46 49.9782 110.528 50.0121L105.5 47.4501C105.426 47.4163 105.359 47.3711 105.297 47.326C104.066 46.4569 104.072 44.0304 105.297 41.9086L111.972 30.3796L117 32.9416Z"
+        d="M116.25 32.6623L109.574 44.1912C108.344 46.3131 108.344 48.7396 109.574 49.6087C109.642 49.6538 109.71 49.6989 109.778 49.7328L104.75 47.1708C104.676 47.137 104.609 47.0918 104.547 47.0467C103.316 46.1776 103.322 43.7511 104.547 41.6293L111.222 30.1003L116.25 32.6623Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
         stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
         strokeWidth="0.5"
@@ -320,7 +326,7 @@ export function ServerErrorVerticalStackIllustration({ className }: TIllustratio
         strokeLinejoin="round"
       />
       <path
-        d="M132.367 11.3341C132.44 11.3679 132.508 11.4131 132.575 11.4582C133.806 12.3273 133.806 14.7595 132.575 16.8756L125.9 28.4046L132.575 33.1279C133.806 33.9969 133.806 36.4178 132.575 38.5396C131.413 40.5486 129.568 41.5643 128.332 40.938C128.258 40.9041 128.191 40.859 128.123 40.8138L121.447 36.0905L114.771 47.6194C113.609 49.6228 111.763 50.6442 110.522 50.0121C110.449 49.9783 110.381 49.9331 110.319 49.888C109.089 49.0189 109.094 46.5924 110.319 44.4706L116.995 32.9416L110.319 28.2183C109.089 27.3493 109.089 24.9228 110.319 22.8009C111.481 20.792 113.327 19.7875 114.568 20.4139C114.636 20.4477 114.704 20.4929 114.771 20.538L121.447 25.2613L128.123 13.7324C129.285 11.7291 131.131 10.7077 132.367 11.3341Z"
+        d="M131.617 11.0548C131.69 11.0886 131.758 11.1338 131.825 11.1789C133.056 12.048 133.056 14.4802 131.825 16.5963L125.15 28.1253L131.825 32.8486C133.056 33.7176 133.056 36.1385 131.825 38.2603C130.663 40.2693 128.818 41.285 127.582 40.6587C127.508 40.6248 127.441 40.5797 127.373 40.5345L120.697 35.8112L114.021 47.3401C112.859 49.3435 111.013 50.3649 109.772 49.7328C109.699 49.699 109.631 49.6538 109.569 49.6087C108.339 48.7397 108.344 46.3131 109.569 44.1913L116.245 32.6623L109.569 27.939C108.339 27.07 108.339 24.6435 109.569 22.5216C110.731 20.5127 112.577 19.5082 113.818 20.1346C113.886 20.1684 113.954 20.2136 114.021 20.2587L120.697 24.982L127.373 13.4531C128.535 11.4498 130.381 10.4284 131.617 11.0548Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
         stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
         strokeWidth="0.5"
diff --git a/packages/propel/src/empty-state/assets/vertical-stack/teamspace.tsx b/packages/propel/src/empty-state/assets/vertical-stack/teamspace.tsx
index adf19b290..49e222873 100644
--- a/packages/propel/src/empty-state/assets/vertical-stack/teamspace.tsx
+++ b/packages/propel/src/empty-state/assets/vertical-stack/teamspace.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper";
 import type { TIllustrationAssetProps } from "../helper";
 
@@ -13,17 +19,17 @@ export function TeamspaceVerticalStackIllustration({ className }: TIllustrationA
     >
       <g opacity="0.2">
         <path
-          d="M13.3344 153.703C13.3344 155.665 14.8035 157.623 17.7366 159.123L55.503 178.367C61.3744 181.357 70.8899 181.357 76.7613 178.367L156.12 137.932C159.053 136.437 160.522 134.48 160.522 132.518V138.783C160.522 140.746 159.053 142.703 156.12 144.198L76.7613 184.633C70.8899 187.623 61.3744 187.623 55.503 184.633L17.7366 165.389C14.7983 163.894 13.3344 161.931 13.3344 159.969V153.703Z"
+          d="M12.5344 152.778C12.5344 154.741 14.0035 156.698 16.9366 158.198L54.703 177.442C60.5744 180.432 70.09 180.432 75.9613 177.442L155.32 137.007C158.253 135.512 159.722 133.555 159.722 131.593V137.859C159.722 139.821 158.253 141.778 155.32 143.273L75.9613 183.708C70.09 186.698 60.5744 186.698 54.703 183.708L16.9366 164.464C13.9983 162.969 12.5344 161.006 12.5344 159.044V152.778Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.4"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
         <path
-          d="M13.3344 153.703C13.3344 151.741 14.8035 149.784 17.7366 148.289L97.0955 107.854C102.967 104.864 112.482 104.864 118.354 107.854L156.12 127.098C159.058 128.593 160.522 130.555 160.522 132.518C160.522 134.48 159.053 136.437 156.12 137.932L76.7613 178.367C70.89 181.357 61.3744 181.357 55.5031 178.367L17.7366 159.123C14.7983 157.628 13.3344 155.666 13.3344 153.703Z"
+          d="M12.5344 152.778C12.5344 150.816 14.0036 148.859 16.9366 147.364L96.2955 106.929C102.167 103.939 111.682 103.939 117.554 106.929L155.32 126.173C158.258 127.668 159.722 129.631 159.722 131.593C159.722 133.555 158.253 135.512 155.32 137.007L75.9613 177.442C70.09 180.432 60.5744 180.432 54.7031 177.442L16.9366 158.198C13.9984 156.703 12.5344 154.741 12.5344 152.778Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.4"
           strokeLinecap="round"
           strokeLinejoin="round"
@@ -31,34 +37,34 @@ export function TeamspaceVerticalStackIllustration({ className }: TIllustrationA
       </g>
       <g opacity="0.6">
         <path
-          d="M13.3344 133.909C13.3344 135.871 14.8035 137.829 17.7366 139.329L55.503 158.573C61.3744 161.563 70.8899 161.563 76.7613 158.573L156.12 118.138C159.053 116.643 160.522 114.686 160.522 112.724V118.989C160.522 120.952 159.053 122.909 156.12 124.404L76.7613 164.839C70.8899 167.829 61.3744 167.829 55.503 164.839L17.7366 145.595C14.7983 144.1 13.3344 142.137 13.3344 140.175V133.909Z"
+          d="M12.5344 132.984C12.5344 134.947 14.0035 136.904 16.9366 138.404L54.703 157.648C60.5744 160.638 70.09 160.638 75.9613 157.648L155.32 117.213C158.253 115.718 159.722 113.761 159.722 111.799V118.065C159.722 120.027 158.253 121.984 155.32 123.479L75.9613 163.914C70.09 166.904 60.5744 166.904 54.703 163.914L16.9366 144.67C13.9983 143.175 12.5344 141.213 12.5344 139.25V132.984Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.4"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
         <path
-          d="M13.3344 133.909C13.3344 131.947 14.8035 129.99 17.7366 128.495L97.0955 88.06C102.967 85.0698 112.482 85.0698 118.354 88.06L156.12 107.304C159.058 108.799 160.522 110.761 160.522 112.724C160.522 114.686 159.053 116.643 156.12 118.138L76.7613 158.573C70.8899 161.563 61.3744 161.563 55.503 158.573L17.7366 139.329C14.7983 137.834 13.3344 135.872 13.3344 133.909Z"
+          d="M12.5344 132.984C12.5344 131.022 14.0035 129.065 16.9366 127.57L96.2955 87.1352C102.167 84.145 111.682 84.145 117.554 87.1352L155.32 106.379C158.258 107.874 159.722 109.837 159.722 111.799C159.722 113.761 158.253 115.718 155.32 117.213L75.9613 157.648C70.09 160.638 60.5744 160.638 54.703 157.648L16.9366 138.404C13.9983 136.909 12.5344 134.947 12.5344 132.984Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.4"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
       </g>
       <path
-        d="M13.3344 114.109C13.3344 116.072 14.8035 118.029 17.7366 119.529L55.5031 138.773C61.3744 141.763 70.89 141.763 76.7613 138.773L156.12 98.3383C159.053 96.8432 160.522 94.8861 160.522 92.9238V99.1897C160.522 101.152 159.053 103.109 156.12 104.604L76.7613 145.039C70.89 148.029 61.3744 148.029 55.5031 145.039L17.7366 125.795C14.7983 124.3 13.3344 122.338 13.3344 120.375V114.109Z"
+        d="M12.5344 113.185C12.5344 115.147 14.0036 117.104 16.9366 118.604L54.7031 137.848C60.5744 140.838 70.09 140.838 75.9613 137.848L155.32 97.4135C158.253 95.9184 159.722 93.9613 159.722 91.999V98.2649C159.722 100.227 158.253 102.184 155.32 103.679L75.9613 144.114C70.09 147.104 60.5744 147.104 54.7031 144.114L16.9366 124.87C13.9984 123.375 12.5344 121.413 12.5344 119.45V113.185Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.4"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
       <path
-        d="M13.3344 114.109C13.3344 112.147 14.8036 110.19 17.7366 108.695L97.0955 68.2602C102.967 65.27 112.482 65.27 118.354 68.2602L156.12 87.5042C159.058 88.9993 160.522 90.9616 160.522 92.9239C160.522 94.8862 159.053 96.8433 156.12 98.3384L76.7613 138.773C70.89 141.763 61.3744 141.763 55.5031 138.773L17.7366 119.529C14.7984 118.034 13.3344 116.072 13.3344 114.109Z"
+        d="M12.5345 113.185C12.5345 111.222 14.0036 109.265 16.9366 107.77L96.2955 67.3354C102.167 64.3452 111.682 64.3452 117.554 67.3354L155.32 86.5794C158.258 88.0745 159.722 90.0368 159.722 91.9991C159.722 93.9614 158.253 95.9185 155.32 97.4136L75.9613 137.848C70.09 140.839 60.5744 140.839 54.7031 137.848L16.9366 118.604C13.9984 117.109 12.5345 115.147 12.5345 113.185Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.4"
         strokeLinecap="round"
         strokeLinejoin="round"
@@ -66,47 +72,47 @@ export function TeamspaceVerticalStackIllustration({ className }: TIllustrationA
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M54.2572 118.419C53.3643 118.419 52.487 118.336 51.646 118.18C51.5266 118.16 51.4176 118.118 51.3138 118.066L47.2231 115.979C47.0517 115.891 46.9064 115.767 46.787 115.606C46.6157 115.377 46.5119 115.076 46.4807 114.744C46.2575 112.371 47.3009 107.923 47.9446 105.483C48.2042 104.496 48.5157 103.624 48.8998 102.814C49.9433 100.618 51.2359 98.6042 52.7466 96.8288C54.5479 94.7056 56.5933 93.0288 58.6646 91.9802C60.3362 91.1288 61.9766 90.6927 63.534 90.6927C63.6275 90.6927 63.7157 90.6927 63.8092 90.6927C64.8993 90.7291 65.9168 90.9834 66.8357 91.4558L70.9316 93.5427C71.404 93.7815 71.8504 94.0826 72.2657 94.4304C72.3021 94.4616 72.3384 94.4927 72.3695 94.5239C72.7174 93.5012 73.1275 92.5252 73.5791 91.622C74.9444 88.8965 76.5952 86.3944 78.4849 84.1725C80.9507 81.2706 83.7488 78.976 86.5832 77.5329C88.8622 76.37 91.0841 75.7782 93.1969 75.7782C93.3215 75.7782 93.4513 75.7782 93.5759 75.7834C95.0398 75.8301 96.4155 76.1779 97.6562 76.8113L101.269 78.649C101.295 78.5452 101.321 78.4517 101.347 78.3583C101.607 77.3719 101.918 76.4998 102.302 75.69C103.346 73.4941 104.638 71.4799 106.149 69.7044C107.95 67.5812 109.996 65.9044 112.067 64.8558C113.739 64.0044 115.374 63.5684 116.937 63.5684C117.03 63.5684 117.118 63.5684 117.212 63.5684C118.302 63.6047 119.319 63.8591 120.238 64.3263L124.334 66.4132C124.807 66.652 125.253 66.9531 125.668 67.3061C126.878 68.3339 127.766 69.7667 128.311 71.5681C128.845 73.3331 129.017 75.3525 128.825 77.5692C128.799 77.8859 128.71 78.2233 128.575 78.54C128.44 78.8566 128.259 79.1629 128.046 79.4173C124.583 83.5963 120.638 86.8823 116.641 88.9121C113.645 90.4384 110.723 91.2378 107.945 91.2845C107.961 92.193 107.93 93.1274 107.847 94.0722C107.81 94.4875 107.696 94.934 107.52 95.3545C107.343 95.775 107.099 96.1747 106.819 96.5121C102.064 102.254 96.6491 106.765 91.1567 109.553C86.9103 111.717 82.7832 112.813 78.8898 112.813C77.675 112.813 76.4758 112.704 75.3286 112.486C75.1936 112.46 75.0638 112.418 74.9392 112.356L71.0665 110.383C68.554 112.771 65.9272 114.666 63.2485 116.031C60.1493 117.609 57.1332 118.409 54.2832 118.409L54.2572 118.419Z"
+        d="M53.4572 117.494C52.5643 117.494 51.687 117.411 50.846 117.256C50.7266 117.235 50.6176 117.193 50.5138 117.141L46.4231 115.055C46.2518 114.966 46.1064 114.842 45.987 114.681C45.8157 114.452 45.7119 114.151 45.6807 113.819C45.4575 111.447 46.5009 106.998 47.1447 104.558C47.4042 103.571 47.7157 102.699 48.0998 101.89C49.1433 99.6936 50.4359 97.6794 51.9466 95.904C53.7479 93.7808 55.7933 92.104 57.8646 91.0553C59.5362 90.204 61.1766 89.7679 62.734 89.7679C62.8275 89.7679 62.9157 89.7679 63.0092 89.7679C64.0993 89.8043 65.1168 90.0586 66.0357 90.531L70.1316 92.6179C70.604 92.8567 71.0504 93.1578 71.4657 93.5056C71.5021 93.5368 71.5384 93.5679 71.5696 93.5991C71.9174 92.5764 72.3275 91.6004 72.7791 90.6972C74.1444 87.9717 75.7952 85.4695 77.6849 83.2477C80.1507 80.3458 82.9488 78.0512 85.7833 76.6081C88.0622 75.4452 90.2841 74.8534 92.3969 74.8534C92.5215 74.8534 92.6513 74.8534 92.7759 74.8586C94.2398 74.9053 95.6155 75.2531 96.8562 75.8865L100.469 77.7242C100.495 77.6204 100.521 77.5269 100.547 77.4335C100.807 76.4471 101.118 75.575 101.502 74.7652C102.546 72.5693 103.838 70.555 105.349 68.7796C107.151 66.6564 109.196 64.9796 111.267 63.931C112.939 63.0796 114.574 62.6436 116.137 62.6436C116.23 62.6436 116.318 62.6436 116.412 62.6436C117.502 62.6799 118.519 62.9343 119.438 63.4015L123.534 65.4884C124.007 65.7272 124.453 66.0283 124.868 66.3813C126.078 67.4091 126.966 68.8419 127.511 70.6433C128.045 72.4083 128.217 74.4277 128.025 76.6444C127.999 76.9611 127.91 77.2985 127.775 77.6152C127.64 77.9318 127.459 78.2381 127.246 78.4925C123.783 82.6715 119.838 85.9575 115.841 87.9873C112.845 89.5135 109.923 90.313 107.145 90.3597C107.161 91.2682 107.13 92.2026 107.047 93.1474C107.01 93.5627 106.896 94.0092 106.72 94.4297C106.543 94.8502 106.299 95.2499 106.019 95.5873C101.264 101.329 95.8491 105.84 90.3568 108.628C86.1103 110.793 81.9832 111.888 78.0898 111.888C76.875 111.888 75.6758 111.779 74.5286 111.561C74.3936 111.535 74.2638 111.493 74.1392 111.431L70.2666 109.458C67.754 111.846 65.1272 113.741 62.4485 115.106C59.3493 116.685 56.3332 117.484 53.4832 117.484L53.4572 117.494Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
       />
       <path
-        d="M116.916 64.0968C117.004 64.0968 117.087 64.0968 117.175 64.0968C118.188 64.1332 119.132 64.372 119.984 64.8029L124.08 66.8897C124.516 67.113 124.931 67.3881 125.31 67.7152C126.431 68.6704 127.278 70.0408 127.791 71.7332C128.305 73.4255 128.472 75.4034 128.285 77.537C128.264 77.8018 128.191 78.0821 128.077 78.3521C127.963 78.622 127.807 78.8816 127.625 79.0996C124.204 83.2318 120.326 86.4608 116.381 88.4647C113.287 90.0376 110.344 90.7851 107.655 90.7851C107.566 90.7851 107.478 90.7851 107.39 90.7851C107.431 91.8338 107.405 92.9239 107.307 94.0453C107.276 94.4086 107.177 94.798 107.016 95.1718C106.86 95.5455 106.647 95.8985 106.393 96.1996C101.679 101.894 96.3324 106.349 90.8972 109.105C86.6351 111.275 82.5704 112.308 78.8638 112.308C77.6698 112.308 76.5122 112.199 75.4012 111.991C75.3078 111.976 75.2195 111.945 75.1365 111.903C75.0015 111.836 74.8821 111.732 74.7835 111.597C74.7835 111.597 74.7835 111.597 74.7835 111.592V111.597C74.8769 111.722 74.9911 111.825 75.1261 111.893L71.0406 109.811C71.0146 109.796 70.9887 109.775 70.9627 109.759C68.4242 112.215 65.7247 114.193 62.9941 115.579C59.9001 117.152 56.9515 117.904 54.2676 117.904C53.4007 117.904 52.5597 117.826 51.755 117.676C51.6875 117.666 51.6201 117.64 51.563 117.608L47.467 115.522C47.3684 115.47 47.2802 115.397 47.2075 115.298C47.0933 115.143 47.0206 114.935 46.9998 114.696C46.7818 112.37 47.8668 107.844 48.4534 105.617C48.687 104.734 48.9829 103.867 49.3774 103.042C50.3897 100.908 51.6772 98.9043 53.1463 97.1704C54.9113 95.0939 56.8892 93.469 58.9034 92.4464C60.4971 91.6313 62.0701 91.216 63.534 91.216C63.6223 91.216 63.7053 91.216 63.7936 91.216C64.8059 91.2524 65.7507 91.4912 66.602 91.922L70.698 94.0089C71.134 94.2321 71.5493 94.5073 71.9283 94.8343C72.1671 95.0368 72.3903 95.2652 72.6031 95.504C72.9821 94.2529 73.4597 93.033 74.0463 91.8649C75.3857 89.2018 77.0261 86.7048 78.8846 84.5193C81.3141 81.6589 84.0447 79.4163 86.822 78.0094C89.0127 76.8881 91.1827 76.3119 93.2021 76.3119C93.3215 76.3119 93.4409 76.3119 93.5603 76.3171C94.9567 76.3638 96.2597 76.6961 97.4226 77.2879L101.519 79.3747C101.394 79.3124 101.264 79.2502 101.129 79.193C101.259 79.2502 101.389 79.3124 101.519 79.3799C101.55 79.3955 101.581 79.4163 101.612 79.4318C101.695 79.0944 101.778 78.7881 101.851 78.513C102.084 77.6305 102.38 76.7635 102.775 75.9381C103.787 73.8045 105.075 71.8007 106.544 70.0668C108.309 67.9903 110.287 66.3654 112.301 65.3427C113.894 64.5277 115.467 64.1124 116.931 64.1124M98.6945 78.487C98.6945 78.487 98.6737 78.487 98.6685 78.487C98.6789 78.487 98.6893 78.487 98.6945 78.487ZM101.056 79.1567C101.056 79.1567 101.02 79.1411 101.005 79.1359C101.02 79.1411 101.041 79.1515 101.056 79.1567ZM79.1649 92.0207C79.248 91.8701 79.3362 91.7248 79.4193 91.5742C79.331 91.7196 79.248 91.8701 79.1649 92.0207ZM78.8119 92.6384C78.7133 92.8149 78.625 92.9914 78.5264 93.1679C78.6198 92.9914 78.7133 92.8149 78.8119 92.6384ZM78.0592 94.0868C78.0176 94.1699 77.9761 94.2529 77.9346 94.3412C77.9761 94.2581 78.0176 94.175 78.0592 94.0868C78.1215 93.9622 78.1786 93.8428 78.2409 93.7234C78.1786 93.8428 78.1163 93.9674 78.0592 94.0868ZM75.801 101.007C76.045 99.9529 76.2889 99.0029 76.4914 98.2398C76.8029 97.051 77.2078 95.8882 77.7269 94.772C77.6906 94.8499 77.6491 94.9278 77.6127 95.0056C77.1922 95.9141 76.8548 96.8589 76.6004 97.8297C76.3824 98.6395 76.0969 99.7505 75.8062 101.002M75.7854 101.069C75.7594 101.178 75.7335 101.282 75.7127 101.391C75.6868 101.515 75.6556 101.635 75.6297 101.759C75.6556 101.635 75.6868 101.51 75.7127 101.391C75.7387 101.282 75.7646 101.173 75.7854 101.069ZM75.3857 102.881C75.3493 103.057 75.313 103.239 75.2767 103.421C75.313 103.239 75.3493 103.062 75.3857 102.881C75.3857 102.881 75.3857 102.876 75.3857 102.87C75.3857 102.87 75.3857 102.876 75.3857 102.881ZM74.9392 105.181C74.9652 105.03 74.9911 104.879 75.0223 104.729C74.9963 104.879 74.9652 105.03 74.9392 105.181ZM74.5239 108.29C74.5135 108.399 74.5032 108.508 74.498 108.612C74.5032 108.508 74.5187 108.394 74.5239 108.29ZM74.472 109.095C74.472 109.147 74.4668 109.204 74.4616 109.256C74.4616 109.302 74.4616 109.344 74.4564 109.391C74.4564 109.349 74.4564 109.302 74.4616 109.256C74.4616 109.204 74.4668 109.147 74.472 109.095ZM74.4772 110.564C74.4772 110.626 74.4772 110.699 74.4876 110.756C74.4876 110.756 74.4876 110.756 74.4876 110.761C74.4876 110.761 74.4876 110.761 74.4876 110.751C74.4824 110.688 74.4824 110.621 74.4772 110.559M75.1209 111.888H75.1313C75.1313 111.888 75.1261 111.888 75.1209 111.888ZM116.916 63.0586C115.275 63.0586 113.557 63.5102 111.813 64.4031C109.684 65.4829 107.587 67.2064 105.739 69.3764C104.202 71.1881 102.884 73.2387 101.82 75.4761C101.467 76.2236 101.171 77.0231 100.922 77.9056L97.8846 76.3586C96.5712 75.6889 95.1229 75.3256 93.5811 75.2788C93.4513 75.2788 93.3215 75.2736 93.1865 75.2736C90.9906 75.2736 88.6857 75.881 86.334 77.0854C83.4425 78.5545 80.5873 80.8958 78.0799 83.8496C76.1644 86.1026 74.4928 88.6411 73.1067 91.4029C72.7433 92.1245 72.4163 92.8824 72.1152 93.6819C71.8089 93.4586 71.487 93.2666 71.1548 93.0953L67.0589 91.0084C66.0725 90.5048 64.9824 90.2297 63.8143 90.1933C63.7157 90.1933 63.6171 90.1933 63.5236 90.1933C61.8832 90.1933 60.1649 90.645 58.4206 91.5379C56.2922 92.6177 54.1949 94.3412 52.3468 96.5111C50.8102 98.3229 49.4916 100.373 48.4274 102.611C48.0277 103.452 47.7058 104.35 47.4359 105.367C46.7818 107.844 45.7228 112.36 45.9564 114.81C45.9979 115.241 46.1381 115.631 46.3665 115.932C46.5326 116.16 46.7455 116.337 46.9894 116.461L51.0854 118.548C51.2359 118.626 51.3916 118.678 51.5578 118.709C52.4299 118.875 53.3384 118.958 54.2624 118.958C57.1955 118.958 60.2895 118.138 63.4613 116.523C66.0881 115.189 68.6682 113.346 71.134 111.041L74.6537 112.832C74.6537 112.832 74.6641 112.838 74.6693 112.838C74.6745 112.838 74.6797 112.843 74.6848 112.848C74.851 112.931 75.0275 112.988 75.2092 113.025C76.3876 113.248 77.6179 113.362 78.8638 113.362C82.8455 113.362 87.0504 112.246 91.3696 110.045C96.9242 107.226 102.396 102.668 107.198 96.8745C107.509 96.4955 107.779 96.0543 107.976 95.5871C108.174 95.1147 108.303 94.6163 108.345 94.1491C108.412 93.3652 108.449 92.5813 108.449 91.8182C111.148 91.6832 113.972 90.8734 116.853 89.4043C120.918 87.3433 124.916 84.0105 128.425 79.7797C128.674 79.4786 128.876 79.1411 129.032 78.7777C129.188 78.404 129.287 78.025 129.318 77.646C129.52 75.3671 129.338 73.2802 128.783 71.4529C128.207 69.5581 127.267 68.0422 125.98 66.9469C125.538 66.5679 125.056 66.246 124.547 65.9917L120.451 63.9048C119.465 63.4012 118.375 63.1261 117.207 63.0897C117.108 63.0897 117.009 63.0897 116.916 63.0897V63.0586Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        d="M116.116 63.172C116.204 63.172 116.287 63.172 116.375 63.172C117.388 63.2084 118.332 63.4472 119.184 63.8781L123.28 65.9649C123.716 66.1882 124.131 66.4633 124.51 66.7904C125.631 67.7455 126.478 69.116 126.992 70.8084C127.505 72.5007 127.672 74.4786 127.485 76.6122C127.464 76.877 127.391 77.1573 127.277 77.4273C127.163 77.6972 127.007 77.9568 126.825 78.1748C123.404 82.307 119.526 85.536 115.581 87.5398C112.487 89.1128 109.544 89.8603 106.855 89.8603C106.766 89.8603 106.678 89.8603 106.59 89.8603C106.631 90.909 106.605 91.9991 106.507 93.1205C106.476 93.4838 106.377 93.8732 106.216 94.247C106.06 94.6207 105.847 94.9737 105.593 95.2748C100.879 100.97 95.5324 105.424 90.0972 108.18C85.8352 110.35 81.7704 111.383 78.0638 111.383C76.8698 111.383 75.7122 111.274 74.6013 111.067C74.5078 111.051 74.4196 111.02 74.3365 110.978C74.2015 110.911 74.0821 110.807 73.9835 110.672C73.9835 110.672 73.9835 110.672 73.9835 110.667V110.672C74.0769 110.797 74.1911 110.901 74.3261 110.968L70.2406 108.886C70.2146 108.871 70.1887 108.85 70.1627 108.834C67.6242 111.29 64.9247 113.268 62.1941 114.654C59.1001 116.227 56.1515 116.98 53.4676 116.98C52.6007 116.98 51.7597 116.902 50.955 116.751C50.8876 116.741 50.8201 116.715 50.763 116.684L46.6671 114.597C46.5684 114.545 46.4802 114.472 46.4075 114.373C46.2933 114.218 46.2206 114.01 46.1998 113.771C45.9818 111.446 47.0668 106.919 47.6534 104.692C47.887 103.809 48.1829 102.942 48.5774 102.117C49.5897 99.9833 50.8772 97.9795 52.3463 96.2456C54.1113 94.1691 56.0892 92.5442 58.1034 91.5215C59.6971 90.7065 61.2701 90.2912 62.734 90.2912C62.8223 90.2912 62.9053 90.2912 62.9936 90.2912C64.0059 90.3275 64.9507 90.5663 65.8021 90.9972L69.898 93.0841C70.334 93.3073 70.7493 93.5825 71.1283 93.9095C71.3671 94.112 71.5903 94.3404 71.8032 94.5792C72.1821 93.3281 72.6597 92.1082 73.2463 90.9401C74.5857 88.277 76.2261 85.78 78.0846 83.5945C80.5141 80.7341 83.2447 78.4915 86.022 77.0846C88.2128 75.9633 90.3827 75.3871 92.4021 75.3871C92.5215 75.3871 92.6409 75.3871 92.7603 75.3923C94.1567 75.439 95.4598 75.7712 96.6226 76.3631L100.719 78.4499C100.594 78.3876 100.464 78.3253 100.329 78.2682C100.459 78.3253 100.589 78.3876 100.719 78.4551C100.75 78.4707 100.781 78.4915 100.812 78.507C100.895 78.1696 100.978 77.8633 101.051 77.5882C101.284 76.7057 101.58 75.8387 101.975 75.0133C102.987 72.8797 104.275 70.8759 105.744 69.142C107.509 67.0655 109.487 65.4406 111.501 64.4179C113.094 63.6029 114.667 63.1876 116.131 63.1876M97.8945 77.5622C97.8945 77.5622 97.8737 77.5622 97.8685 77.5622C97.8789 77.5622 97.8893 77.5622 97.8945 77.5622ZM100.256 78.2319C100.256 78.2319 100.22 78.2163 100.205 78.2111C100.22 78.2163 100.241 78.2267 100.256 78.2319ZM78.3649 91.0959C78.448 90.9453 78.5362 90.8 78.6193 90.6494C78.531 90.7948 78.448 90.9453 78.3649 91.0959ZM78.0119 91.7136C77.9133 91.8901 77.825 92.0666 77.7264 92.2431C77.8198 92.0666 77.9133 91.8901 78.0119 91.7136ZM77.2592 93.162C77.2177 93.245 77.1761 93.3281 77.1346 93.4164C77.1761 93.3333 77.2177 93.2502 77.2592 93.162C77.3215 93.0374 77.3786 92.918 77.4409 92.7986C77.3786 92.918 77.3163 93.0426 77.2592 93.162ZM75.001 100.082C75.245 99.0281 75.489 98.0781 75.6914 97.315C76.0029 96.1262 76.4078 94.9634 76.9269 93.8472C76.8906 93.9251 76.8491 94.003 76.8127 94.0808C76.3922 94.9893 76.0548 95.9341 75.8004 96.9049C75.5824 97.7147 75.2969 98.8257 75.0062 100.077M74.9854 100.144C74.9594 100.253 74.9335 100.357 74.9127 100.466C74.8868 100.591 74.8556 100.71 74.8297 100.835C74.8556 100.71 74.8868 100.585 74.9127 100.466C74.9387 100.357 74.9646 100.248 74.9854 100.144ZM74.5857 101.956C74.5493 102.132 74.513 102.314 74.4767 102.496C74.513 102.314 74.5493 102.138 74.5857 101.956C74.5857 101.956 74.5857 101.951 74.5857 101.946C74.5857 101.946 74.5857 101.951 74.5857 101.956ZM74.1392 104.256C74.1652 104.105 74.1911 103.955 74.2223 103.804C74.1963 103.955 74.1652 104.105 74.1392 104.256ZM73.7239 107.365C73.7135 107.474 73.7032 107.583 73.698 107.687C73.7032 107.583 73.7187 107.469 73.7239 107.365ZM73.672 108.17C73.672 108.222 73.6668 108.279 73.6616 108.331C73.6616 108.378 73.6616 108.419 73.6564 108.466C73.6564 108.424 73.6564 108.378 73.6616 108.331C73.6616 108.279 73.6668 108.222 73.672 108.17ZM73.6772 109.639C73.6772 109.701 73.6772 109.774 73.6876 109.831C73.6876 109.831 73.6876 109.831 73.6876 109.836C73.6876 109.836 73.6876 109.836 73.6876 109.826C73.6824 109.764 73.6824 109.696 73.6772 109.634M74.3209 110.963H74.3313C74.3313 110.963 74.3261 110.963 74.3209 110.963ZM116.116 62.1338C114.475 62.1338 112.757 62.5854 111.013 63.4783C108.884 64.5581 106.787 66.2816 104.939 68.4516C103.402 70.2633 102.084 72.3139 101.02 74.5513C100.667 75.2988 100.371 76.0983 100.122 76.9808L97.0846 75.4338C95.7712 74.7641 94.3229 74.4007 92.7811 74.354C92.6513 74.354 92.5215 74.3488 92.3865 74.3488C90.1906 74.3488 87.8857 74.9562 85.5341 76.1606C82.6425 77.6297 79.7873 79.971 77.2799 82.9248C75.3644 85.1778 73.6928 87.7163 72.3067 90.4781C71.9433 91.1997 71.6163 91.9576 71.3152 92.7571C71.0089 92.5338 70.687 92.3418 70.3548 92.1705L66.2589 90.0836C65.2725 89.58 64.1824 89.3049 63.0143 89.2685C62.9157 89.2685 62.8171 89.2685 62.7236 89.2685C61.0832 89.2685 59.3649 89.7202 57.6206 90.6131C55.4922 91.6929 53.3949 93.4164 51.5468 95.5863C50.0102 97.3981 48.6916 99.4486 47.6274 101.686C47.2277 102.527 46.9059 103.425 46.6359 104.443C45.9818 106.919 44.9228 111.435 45.1564 113.886C45.1979 114.316 45.3381 114.706 45.5665 115.007C45.7326 115.235 45.9455 115.412 46.1895 115.536L50.2854 117.623C50.4359 117.701 50.5917 117.753 50.7578 117.784C51.6299 117.95 52.5384 118.033 53.4624 118.033C56.3955 118.033 59.4895 117.213 62.6613 115.599C65.2881 114.264 67.8682 112.422 70.334 110.117L73.8537 111.908C73.8537 111.908 73.8641 111.913 73.8693 111.913C73.8745 111.913 73.8797 111.918 73.8849 111.923C74.051 112.006 74.2275 112.063 74.4092 112.1C75.5876 112.323 76.8179 112.437 78.0638 112.437C82.0455 112.437 86.2505 111.321 90.5696 109.12C96.1242 106.301 101.596 101.743 106.398 95.9497C106.709 95.5707 106.979 95.1295 107.176 94.6623C107.374 94.1899 107.503 93.6915 107.545 93.2243C107.613 92.4404 107.649 91.6565 107.649 90.8934C110.348 90.7584 113.172 89.9486 116.054 88.4795C120.118 86.4185 124.116 83.0857 127.625 78.8549C127.874 78.5538 128.076 78.2163 128.232 77.8529C128.388 77.4792 128.487 77.1002 128.518 76.7212C128.72 74.4423 128.538 72.3554 127.983 70.5281C127.407 68.6333 126.467 67.1174 125.18 66.022C124.738 65.6431 124.256 65.3212 123.747 65.0669L119.651 62.98C118.665 62.4764 117.575 62.2013 116.407 62.1649C116.308 62.1649 116.209 62.1649 116.116 62.1649V62.1338Z"
+        fill="var(--illustration-stroke-tertiary)"
       />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M114.019 63.3399C113.318 63.3399 112.664 63.1893 112.078 62.8883L107.982 60.8014C107.81 60.7131 107.644 60.6145 107.488 60.5003C106.092 59.5087 105.318 57.6814 105.318 55.3453C105.318 53.0093 106.035 50.6161 107.338 48.3683C108.646 46.1153 110.39 44.3502 112.254 43.4002C113.214 42.9123 114.159 42.6631 115.057 42.6631C115.758 42.6631 116.412 42.8136 116.999 43.1147L121.095 45.2016C121.266 45.2899 121.432 45.3885 121.588 45.5027C122.984 46.4942 123.758 48.3216 123.758 50.6576C123.758 52.9937 123.041 55.3869 121.738 57.6347C120.43 59.8877 118.686 61.6579 116.822 62.6027C115.862 63.0907 114.917 63.3399 114.019 63.3399Z"
+        d="M113.219 62.4151C112.518 62.4151 111.864 62.2645 111.278 61.9635L107.182 59.8766C107.01 59.7883 106.844 59.6897 106.688 59.5755C105.292 58.5839 104.518 56.7566 104.518 54.4205C104.518 52.0845 105.235 49.6913 106.538 47.4435C107.846 45.1905 109.59 43.4254 111.454 42.4754C112.414 41.9875 113.359 41.7383 114.257 41.7383C114.958 41.7383 115.612 41.8888 116.199 42.1899L120.295 44.2768C120.466 44.3651 120.632 44.4637 120.788 44.5779C122.184 45.5694 122.958 47.3968 122.958 49.7328C122.958 52.0689 122.241 54.4621 120.938 56.7099C119.63 58.9629 117.886 60.7331 116.022 61.6779C115.062 62.1659 114.117 62.4151 113.219 62.4151Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
       />
       <path
-        d="M115.057 43.1818C115.67 43.1818 116.246 43.3116 116.76 43.5763L120.856 45.6632C121.007 45.7411 121.147 45.8242 121.287 45.9228C122.533 46.8053 123.234 48.508 123.234 50.652C123.234 52.796 122.533 55.2152 121.287 57.3695C120.041 59.5239 118.349 61.237 116.584 62.1351C115.691 62.5868 114.819 62.8152 114.014 62.8152C113.401 62.8152 112.825 62.6854 112.311 62.4206L108.215 60.3338C108.065 60.2559 107.925 60.1728 107.784 60.0742C106.538 59.1917 105.838 57.4889 105.838 55.3449C105.838 53.201 106.538 50.7818 107.784 48.6274C109.03 46.4731 110.723 44.76 112.488 43.8619C113.381 43.4102 114.253 43.1818 115.057 43.1818ZM115.057 42.1436C114.076 42.1436 113.053 42.4083 112.015 42.9378C110.063 43.9345 108.241 45.7722 106.886 48.1083C105.542 50.434 104.799 53.0037 104.799 55.3449C104.799 57.8523 105.646 59.8354 107.187 60.9256C107.364 61.0501 107.556 61.1644 107.748 61.263L111.844 63.3499C112.503 63.6873 113.235 63.8586 114.019 63.8586C115 63.8586 116.023 63.5939 117.061 63.0644C119.013 62.0676 120.835 60.2299 122.19 57.8939C123.535 55.5682 124.277 52.9985 124.277 50.6572C124.277 48.1499 123.431 46.1668 121.889 45.0766C121.713 44.952 121.52 44.8378 121.328 44.7392L117.232 42.6523C116.573 42.3149 115.841 42.1436 115.057 42.1436Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        d="M114.257 42.257C114.87 42.257 115.446 42.3868 115.96 42.6515L120.056 44.7384C120.207 44.8163 120.347 44.8994 120.487 44.998C121.733 45.8805 122.434 47.5832 122.434 49.7272C122.434 51.8712 121.733 54.2904 120.487 56.4447C119.241 58.5991 117.549 60.3122 115.784 61.2103C114.891 61.662 114.019 61.8904 113.214 61.8904C112.601 61.8904 112.025 61.7606 111.511 61.4958L107.415 59.4089C107.265 59.3311 107.125 59.248 106.984 59.1494C105.738 58.2669 105.038 56.5641 105.038 54.4201C105.038 52.2761 105.738 49.857 106.984 47.7026C108.23 45.5483 109.923 43.8351 111.688 42.9371C112.581 42.4854 113.453 42.257 114.257 42.257ZM114.257 41.2188C113.276 41.2188 112.254 41.4835 111.215 42.013C109.263 43.0097 107.441 44.8474 106.086 47.1835C104.742 49.5092 103.999 52.0789 103.999 54.4201C103.999 56.9275 104.846 58.9106 106.387 60.0007C106.564 60.1253 106.756 60.2395 106.948 60.3382L111.044 62.4251C111.703 62.7625 112.435 62.9338 113.219 62.9338C114.2 62.9338 115.223 62.6691 116.261 62.1395C118.213 61.1428 120.035 59.3051 121.39 56.969C122.735 54.6434 123.477 52.0737 123.477 49.7324C123.477 47.225 122.631 45.242 121.089 44.1518C120.913 44.0272 120.72 43.913 120.528 43.8144L116.432 41.7275C115.773 41.3901 115.041 41.2188 114.257 41.2188Z"
+        fill="var(--illustration-stroke-tertiary)"
       />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M60.6269 90.459C59.9261 90.459 59.272 90.3085 58.6854 90.0074L54.5894 87.9205C54.4181 87.8323 54.252 87.7336 54.0963 87.6194C52.6998 86.6331 51.9315 84.8006 51.9315 82.4645C51.9315 80.1284 52.6479 77.7352 53.9509 75.4874C55.2591 73.2344 57.0034 71.4694 58.8671 70.5194C59.8274 70.0314 60.7722 69.7822 61.6703 69.7822C62.3712 69.7822 63.0253 69.9328 63.6119 70.2339L67.7078 72.3208C67.8791 72.409 68.0452 72.5076 68.2009 72.6218C69.5974 73.6082 70.3709 75.4407 70.3709 77.7768C70.3709 80.1128 69.6545 82.506 68.3515 84.7538C67.0433 87.0068 65.299 88.7719 63.4354 89.7219C62.475 90.2099 61.5302 90.459 60.6321 90.459H60.6269Z"
+        d="M59.8269 89.5342C59.1261 89.5342 58.472 89.3837 57.8854 89.0826L53.7895 86.9957C53.6181 86.9075 53.452 86.8088 53.2963 86.6946C51.8998 85.7083 51.1315 83.8758 51.1315 81.5397C51.1315 79.2036 51.8479 76.8104 53.1509 74.5626C54.4591 72.3096 56.2034 70.5446 58.0671 69.5946C59.0274 69.1066 59.9723 68.8574 60.8703 68.8574C61.5712 68.8574 62.2253 69.008 62.8119 69.3091L66.9078 71.396C67.0791 71.4842 67.2452 71.5828 67.401 71.697C68.7974 72.6834 69.5709 74.5159 69.5709 76.852C69.5709 79.188 68.8545 81.5812 67.5515 83.829C66.2433 86.082 64.499 87.8471 62.6354 88.7971C61.675 89.2851 60.7302 89.5342 59.8321 89.5342H59.8269Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
       />
       <path
-        d="M61.6704 70.3009C62.2829 70.3009 62.8592 70.4307 63.3731 70.6955L67.469 72.7824C67.6195 72.8602 67.7597 72.9433 67.8999 73.0419C69.1458 73.9245 69.8466 75.6272 69.8466 77.7712C69.8466 79.9152 69.1458 82.3343 67.8999 84.4887C66.654 86.6431 64.9616 88.3562 63.1966 89.2543C62.3037 89.7059 61.4316 89.9343 60.6269 89.9343C60.0143 89.9343 59.4381 89.8045 58.9242 89.5398L54.8283 87.4529C54.6777 87.375 54.5376 87.292 54.3974 87.1933C53.1515 86.3108 52.4507 84.6081 52.4507 82.4641C52.4507 80.3201 53.1515 77.901 54.3974 75.7466C55.6433 73.5922 57.3356 71.8791 59.1007 70.981C59.9936 70.5294 60.8657 70.3009 61.6704 70.3009ZM61.6704 69.2627C60.6892 69.2627 59.6665 69.5274 58.6283 70.057C56.6764 71.0537 54.8542 72.8914 53.4993 75.2275C52.1548 77.5531 51.4124 80.1228 51.4124 82.4641C51.4124 84.9715 52.2586 86.9545 53.8004 88.0447C53.9769 88.1693 54.169 88.2835 54.3611 88.3821L58.457 90.469C59.1163 90.8064 59.8482 90.9778 60.6321 90.9778C61.6133 90.9778 62.6359 90.713 63.6742 90.1835C65.6261 89.1868 67.4482 87.3491 68.8032 85.013C70.1477 82.6873 70.89 80.1176 70.89 77.7764C70.89 75.269 70.0439 73.2859 68.5021 72.1958C68.3256 72.0712 68.1387 71.957 67.9414 71.8583L63.8455 69.7714C63.1862 69.434 62.4542 69.2627 61.6704 69.2627Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        d="M60.8704 69.3761C61.4829 69.3761 62.0592 69.5059 62.5731 69.7707L66.669 71.8576C66.8196 71.9354 66.9597 72.0185 67.0999 72.1171C68.3458 72.9996 69.0466 74.7024 69.0466 76.8464C69.0466 78.9904 68.3458 81.4095 67.0999 83.5639C65.854 85.7182 64.1616 87.4314 62.3966 88.3295C61.5037 88.7811 60.6316 89.0095 59.8269 89.0095C59.2144 89.0095 58.6381 88.8797 58.1242 88.615L54.0283 86.5281C53.8777 86.4502 53.7376 86.3672 53.5974 86.2685C52.3515 85.386 51.6507 83.6833 51.6507 81.5393C51.6507 79.3953 52.3515 76.9762 53.5974 74.8218C54.8433 72.6674 56.5357 70.9543 58.3007 70.0562C59.1936 69.6046 60.0657 69.3761 60.8704 69.3761ZM60.8704 68.3379C59.8892 68.3379 58.8665 68.6026 57.8283 69.1322C55.8764 70.1289 54.0542 71.9666 52.6993 74.3027C51.3548 76.6283 50.6124 79.198 50.6124 81.5393C50.6124 84.0467 51.4586 86.0297 53.0004 87.1199C53.1769 87.2445 53.369 87.3587 53.5611 87.4573L57.657 89.5442C58.3163 89.8816 59.0482 90.053 59.8321 90.053C60.8133 90.053 61.8359 89.7882 62.8742 89.2587C64.8261 88.262 66.6482 86.4243 68.0032 84.0882C69.3477 81.7625 70.0901 79.1928 70.0901 76.8516C70.0901 74.3442 69.2439 72.3611 67.7021 71.271C67.5256 71.1464 67.3387 71.0322 67.1414 70.9335L63.0455 68.8466C62.3862 68.5092 61.6542 68.3379 60.8704 68.3379Z"
+        fill="var(--illustration-stroke-tertiary)"
       />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M87.6423 74.2721C86.7078 74.2721 85.8409 74.0697 85.057 73.67L80.9611 71.5831C80.7379 71.4689 80.5147 71.3339 80.3018 71.1833C78.4278 69.8596 77.3947 67.3885 77.3947 64.2374C77.3947 61.0863 78.3759 57.7847 80.1513 54.7166C81.9319 51.6434 84.3095 49.2347 86.848 47.942C88.1458 47.2827 89.4125 46.9453 90.6272 46.9453C91.5617 46.9453 92.4338 47.1478 93.2125 47.5475L97.3084 49.6344C97.5368 49.7486 97.7549 49.8836 97.9677 50.0341C99.8417 51.3579 100.875 53.8289 100.875 56.98C100.875 60.1311 99.8989 63.4328 98.1182 66.5008C96.3376 69.574 93.96 71.9828 91.4215 73.2754C90.1237 73.9347 88.857 74.2721 87.6423 74.2721Z"
+        d="M86.8423 73.3473C85.9079 73.3473 85.0409 73.1449 84.257 72.7451L80.1611 70.6583C79.9379 70.544 79.7147 70.4091 79.5018 70.2585C77.6278 68.9348 76.5947 66.4637 76.5947 63.3126C76.5947 60.1615 77.5759 56.8599 79.3513 53.7918C81.1319 50.7186 83.5095 48.3099 86.048 47.0172C87.3458 46.3579 88.6125 46.0205 89.8273 46.0205C90.7617 46.0205 91.6338 46.223 92.4125 46.6227L96.5084 48.7096C96.7368 48.8238 96.9549 48.9588 97.1677 49.1093C99.0418 50.4331 100.075 52.9041 100.075 56.0552C100.075 59.2063 99.0989 62.508 97.3183 65.576C95.5377 68.6492 93.1601 71.058 90.6215 72.3506C89.3237 73.0099 88.057 73.3473 86.8423 73.3473Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
       />
       <path
-        d="M90.6272 47.4748C91.4734 47.4748 92.2676 47.6565 92.9788 48.0199L97.0748 50.1067C97.2824 50.2106 97.4797 50.33 97.6666 50.4649C99.3849 51.6797 100.35 54.0262 100.35 56.9852C100.35 59.9442 99.3849 63.277 97.6666 66.2464C95.9483 69.2158 93.6122 71.5778 91.1827 72.8185C89.9523 73.4467 88.7532 73.7582 87.6422 73.7582C86.7961 73.7582 86.0018 73.5765 85.2906 73.2131L81.1947 71.1262C80.9922 71.0224 80.7898 70.903 80.6029 70.768C78.8846 69.5532 77.919 67.2068 77.919 64.2478C77.919 61.2887 78.8846 57.9559 80.6029 54.9865C82.3212 52.0171 84.6573 49.6551 87.0868 48.4144C88.3171 47.7863 89.5163 47.4748 90.6272 47.4748ZM90.6272 46.4365C89.3346 46.4365 87.9849 46.7895 86.6144 47.4903C83.9876 48.8297 81.5321 51.3059 79.7048 54.4674C77.8827 57.6133 76.8807 61.0863 76.8807 64.2478C76.8807 67.5754 77.9917 70.1918 80.0059 71.6194C80.2343 71.7803 80.4783 71.9308 80.7275 72.0554L84.8234 74.1423C85.6799 74.5784 86.6299 74.8016 87.6422 74.8016C88.9349 74.8016 90.2846 74.4486 91.6551 73.7478C94.2819 72.4084 96.7373 69.9322 98.5647 66.7707C100.387 63.6248 101.389 60.1518 101.389 56.9904C101.389 53.6628 100.278 51.0464 98.2636 49.6188C98.03 49.4527 97.7912 49.3073 97.542 49.1827L93.4461 47.0958C92.5895 46.6598 91.6395 46.4365 90.6272 46.4365Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        d="M89.8272 46.55C90.6734 46.55 91.4677 46.7317 92.1789 47.0951L96.2748 49.1819C96.4824 49.2858 96.6797 49.4052 96.8666 49.5401C98.5849 50.7549 99.5505 53.1013 99.5505 56.0604C99.5505 59.0194 98.5849 62.3522 96.8666 65.3216C95.1483 68.291 92.8122 70.653 90.3827 71.8937C89.1524 72.5219 87.9532 72.8334 86.8422 72.8334C85.9961 72.8334 85.2018 72.6517 84.4906 72.2883L80.3947 70.2014C80.1922 70.0976 79.9898 69.9782 79.8029 69.8432C78.0846 68.6284 77.119 66.282 77.119 63.323C77.119 60.3639 78.0846 57.0311 79.8029 54.0617C81.5212 51.0923 83.8573 48.7303 86.2868 47.4896C87.5171 46.8614 88.7163 46.55 89.8272 46.55ZM89.8272 45.5117C88.5346 45.5117 87.1849 45.8647 85.8144 46.5655C83.1876 47.9049 80.7321 50.3811 78.9048 53.5426C77.0827 56.6885 76.0807 60.1615 76.0807 63.323C76.0807 66.6506 77.1917 69.2669 79.2059 70.6945C79.4343 70.8555 79.6783 71.006 79.9275 71.1306L84.0234 73.2175C84.8799 73.6536 85.8299 73.8768 86.8422 73.8768C88.1349 73.8768 89.4846 73.5238 90.8551 72.823C93.4819 71.4836 95.9373 69.0074 97.7647 65.8459C99.5868 62.7 100.589 59.227 100.589 56.0656C100.589 52.738 99.4778 50.1216 97.4636 48.694C97.23 48.5278 96.9912 48.3825 96.742 48.2579L92.6461 46.171C91.7895 45.7349 90.8395 45.5117 89.8272 45.5117Z"
+        fill="var(--illustration-stroke-tertiary)"
       />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M124.075 66.89C123.228 66.4591 122.284 66.2203 121.266 66.184C119.729 66.1321 118.063 66.5474 116.376 67.4091C114.362 68.4318 112.384 70.0567 110.619 72.1332C109.144 73.8671 107.862 75.8657 106.85 78.0045C106.455 78.8299 106.159 79.6969 105.926 80.5794C105.339 82.8064 104.254 87.3332 104.472 89.6589C104.493 89.8977 104.566 90.1053 104.68 90.2611C104.753 90.3597 104.836 90.4324 104.94 90.4843L100.844 88.3974C100.745 88.3455 100.657 88.2728 100.584 88.1742C100.47 88.0184 100.397 87.8108 100.376 87.572C100.158 85.2463 101.243 80.7195 101.83 78.4925C102.064 77.61 102.359 76.743 102.754 75.9176C103.766 73.784 105.054 71.7802 106.523 70.0463C108.288 67.9698 110.266 66.3449 112.28 65.3222C113.967 64.4605 115.634 64.0452 117.17 64.0971C118.182 64.1334 119.127 64.3722 119.979 64.8031L124.075 66.89Z"
+        d="M123.275 65.9652C122.428 65.5343 121.484 65.2955 120.466 65.2592C118.929 65.2073 117.263 65.6226 115.576 66.4843C113.562 67.507 111.584 69.1319 109.819 71.2084C108.344 72.9423 107.062 74.9409 106.05 77.0797C105.655 77.9051 105.36 78.7721 105.126 79.6546C104.539 81.8816 103.454 86.4084 103.672 88.7341C103.693 88.9729 103.766 89.1805 103.88 89.3363C103.953 89.4349 104.036 89.5076 104.14 89.5595L100.044 87.4726C99.945 87.4207 99.8568 87.348 99.7841 87.2494C99.6699 87.0936 99.5972 86.886 99.5764 86.6472C99.3584 84.3215 100.443 79.7947 101.03 77.5677C101.264 76.6852 101.559 75.8182 101.954 74.9928C102.966 72.8592 104.254 70.8554 105.723 69.1215C107.488 67.045 109.466 65.4201 111.48 64.3974C113.167 63.5357 114.834 63.1204 116.37 63.1723C117.382 63.2086 118.327 63.4474 119.179 63.8783L123.275 65.9652Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
         stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
         strokeWidth="0.4"
@@ -116,7 +122,7 @@ export function TeamspaceVerticalStackIllustration({ className }: TIllustrationA
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M124.075 66.8897C124.511 67.1129 124.926 67.3881 125.305 67.7151C126.426 68.6703 127.272 70.0408 127.786 71.7332C128.3 73.4255 128.466 75.4034 128.28 77.537C128.259 77.8018 128.186 78.0821 128.072 78.352C127.958 78.622 127.802 78.8815 127.62 79.0996C124.199 83.2318 120.321 86.4608 116.376 88.4646C112.285 90.5463 108.444 91.1848 105.132 90.5567C105.064 90.5463 104.997 90.5204 104.94 90.4892C104.841 90.4373 104.753 90.3646 104.68 90.266C104.566 90.1103 104.493 89.9026 104.472 89.6638C104.254 87.3381 105.339 82.8113 105.926 80.5843C106.16 79.7018 106.455 78.8348 106.85 78.0094C107.862 75.8758 109.15 73.872 110.619 72.1381C112.384 70.0616 114.362 68.4367 116.376 67.414C118.063 66.5523 119.729 66.137 121.266 66.1889C122.278 66.2252 123.223 66.464 124.075 66.8949V66.8897Z"
+        d="M123.275 65.9649C123.711 66.1881 124.126 66.4633 124.505 66.7903C125.626 67.7455 126.472 69.116 126.986 70.8084C127.5 72.5007 127.666 74.4786 127.48 76.6122C127.459 76.877 127.386 77.1573 127.272 77.4272C127.158 77.6972 127.002 77.9567 126.82 78.1748C123.399 82.307 119.521 85.536 115.576 87.5398C111.485 89.6215 107.644 90.26 104.332 89.6319C104.264 89.6215 104.197 89.5956 104.14 89.5644C104.041 89.5125 103.953 89.4398 103.88 89.3412C103.766 89.1855 103.693 88.9778 103.672 88.739C103.454 86.4133 104.539 81.8865 105.126 79.6595C105.36 78.777 105.655 77.91 106.05 77.0846C107.062 74.951 108.35 72.9472 109.819 71.2133C111.584 69.1368 113.562 67.5119 115.576 66.4892C117.263 65.6275 118.93 65.2122 120.466 65.2641C121.478 65.3004 122.423 65.5392 123.275 65.9701V65.9649Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
         stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
         strokeWidth="0.4"
@@ -126,7 +132,7 @@ export function TeamspaceVerticalStackIllustration({ className }: TIllustrationA
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M120.861 45.6629C119.667 45.0555 118.157 45.149 116.589 45.9484C114.824 46.8465 113.131 48.5648 111.886 50.714C110.64 52.8684 109.939 55.2823 109.939 57.4315C109.939 59.5807 110.64 61.2782 111.886 62.1607C112.026 62.2594 112.166 62.3476 112.316 62.4203L108.22 60.3334C108.07 60.2556 107.93 60.1725 107.79 60.0739C106.544 59.1913 105.843 57.4886 105.843 55.3446C105.843 53.1954 106.544 50.7815 107.79 48.6271C109.036 46.4727 110.728 44.7596 112.493 43.8615C114.061 43.0621 115.571 42.9686 116.765 43.576L120.861 45.6629Z"
+        d="M120.061 44.7381C118.867 44.1307 117.357 44.2242 115.789 45.0236C114.024 45.9217 112.331 47.64 111.086 49.7892C109.84 51.9436 109.139 54.3575 109.139 56.5067C109.139 58.6559 109.84 60.3534 111.086 61.2359C111.226 61.3346 111.366 61.4228 111.516 61.4955L107.421 59.4086C107.27 59.3307 107.13 59.2477 106.99 59.1491C105.744 58.2665 105.043 56.5638 105.043 54.4198C105.043 52.2706 105.744 49.8567 106.99 47.7023C108.236 45.5479 109.928 43.8348 111.693 42.9367C113.261 42.1373 114.771 42.0438 115.965 42.6512L120.061 44.7381Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
         stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
         strokeWidth="0.4"
@@ -136,7 +142,7 @@ export function TeamspaceVerticalStackIllustration({ className }: TIllustrationA
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M120.861 45.6629C121.012 45.7408 121.152 45.8239 121.292 45.9225C122.538 46.805 123.239 48.5077 123.239 50.6517C123.239 52.7957 122.538 55.2149 121.292 57.3692C120.046 59.5236 118.354 61.2367 116.589 62.1348C115.021 62.9343 113.51 63.0277 112.316 62.4203C112.166 62.3425 112.026 62.2594 111.886 62.1608C110.64 61.2783 109.939 59.5755 109.939 57.4315C109.939 55.2823 110.64 52.8684 111.886 50.714C113.131 48.5597 114.824 46.8465 116.589 45.9484C118.157 45.149 119.667 45.0556 120.861 45.6629Z"
+        d="M120.061 44.7381C120.212 44.816 120.352 44.8991 120.492 44.9977C121.738 45.8802 122.439 47.5829 122.439 49.7269C122.439 51.8709 121.738 54.2901 120.492 56.4444C119.246 58.5988 117.554 60.3119 115.789 61.21C114.221 62.0095 112.71 62.1029 111.516 61.4955C111.366 61.4177 111.226 61.3346 111.086 61.236C109.84 60.3535 109.139 58.6507 109.139 56.5067C109.139 54.3575 109.84 51.9436 111.086 49.7892C112.331 47.6348 114.024 45.9217 115.789 45.0236C117.357 44.2242 118.867 44.1307 120.061 44.7381Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
         stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
         strokeWidth="0.4"
@@ -146,7 +152,7 @@ export function TeamspaceVerticalStackIllustration({ className }: TIllustrationA
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M70.6824 94.0091C69.8362 93.5783 68.8914 93.3395 67.8739 93.3031C66.3373 93.2512 64.6709 93.6665 62.9838 94.5283C60.9695 95.551 58.9917 97.1758 57.2266 99.2523C55.7523 100.986 54.4701 102.985 53.4578 105.124C53.0632 105.949 52.7673 106.816 52.5337 107.699C51.9471 109.926 50.8621 114.452 51.0802 116.778C51.1009 117.017 51.1736 117.224 51.2878 117.38C51.3605 117.479 51.4436 117.552 51.5474 117.603L47.4515 115.517C47.3529 115.465 47.2646 115.392 47.1919 115.293C47.0777 115.138 47.005 114.93 46.9843 114.691C46.7662 112.365 47.8512 107.839 48.4378 105.612C48.6714 104.729 48.9673 103.862 49.3619 103.037C50.3742 100.903 51.6616 98.8993 53.1307 97.1654C54.8958 95.0889 56.8736 93.4641 58.8878 92.4414C60.575 91.5796 62.2414 91.1643 63.778 91.2162C64.7903 91.2526 65.7351 91.4914 66.5865 91.9223L70.6824 94.0091Z"
+        d="M69.8824 93.0843C69.0362 92.6535 68.0914 92.4147 67.0739 92.3783C65.5373 92.3264 63.8709 92.7417 62.1838 93.6035C60.1696 94.6261 58.1917 96.251 56.4266 98.3275C54.9523 100.061 53.6701 102.06 52.6578 104.199C52.2633 105.024 51.9674 105.891 51.7337 106.774C51.1471 109.001 50.0622 113.528 50.2802 115.853C50.301 116.092 50.3736 116.3 50.4878 116.455C50.5605 116.554 50.6436 116.627 50.7474 116.679L46.6515 114.592C46.5529 114.54 46.4646 114.467 46.3919 114.369C46.2777 114.213 46.205 114.005 46.1843 113.766C45.9663 111.441 47.0512 106.914 47.6378 104.687C47.8714 103.804 48.1673 102.937 48.5619 102.112C49.5742 99.9783 50.8616 97.9745 52.3307 96.2406C54.0958 94.1641 56.0736 92.5393 58.0879 91.5166C59.775 90.6548 61.4414 90.2395 62.978 90.2914C63.9903 90.3278 64.9351 90.5666 65.7865 90.9975L69.8824 93.0843Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
         stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
         strokeWidth="0.4"
@@ -156,7 +162,7 @@ export function TeamspaceVerticalStackIllustration({ className }: TIllustrationA
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M70.6824 94.0089C71.1184 94.2321 71.5337 94.5072 71.9127 94.8343C73.034 95.7895 73.8802 97.16 74.3941 98.8523C74.9081 100.545 75.0742 102.523 74.8873 104.656C74.8665 104.921 74.7939 105.201 74.6796 105.471C74.5654 105.741 74.4097 106.001 74.228 106.219C70.807 110.351 66.9291 113.58 62.9837 115.584C58.893 117.665 55.0515 118.304 51.7394 117.676C51.672 117.665 51.6045 117.64 51.5474 117.608C51.4487 117.556 51.3605 117.484 51.2878 117.385C51.1736 117.229 51.1009 117.022 51.0802 116.783C50.8621 114.457 51.9471 109.93 52.5337 107.703C52.7673 106.821 53.0632 105.954 53.4578 105.129C54.4701 102.995 55.7575 100.991 57.2266 99.2572C58.9916 97.1807 60.9695 95.5559 62.9837 94.5332C64.6709 93.6714 66.3373 93.2561 67.8739 93.308C68.8862 93.3444 69.831 93.5832 70.6824 94.014V94.0089Z"
+        d="M69.8824 93.0841C70.3185 93.3073 70.7338 93.5824 71.1127 93.9095C72.234 94.8647 73.0802 96.2352 73.5941 97.9275C74.1081 99.6199 74.2742 101.598 74.0873 103.731C74.0666 103.996 73.9939 104.276 73.8797 104.546C73.7655 104.816 73.6097 105.076 73.428 105.294C70.007 109.426 66.1291 112.655 62.1837 114.659C58.093 116.741 54.2515 117.379 50.9395 116.751C50.872 116.741 50.8045 116.715 50.7474 116.684C50.6488 116.632 50.5605 116.559 50.4878 116.46C50.3736 116.305 50.3009 116.097 50.2802 115.858C50.0621 113.532 51.1471 109.006 51.7337 106.779C51.9673 105.896 52.2632 105.029 52.6578 104.204C53.6701 102.07 54.9575 100.066 56.4266 98.3324C58.1917 96.2559 60.1695 94.631 62.1837 93.6084C63.8709 92.7466 65.5373 92.3313 67.0739 92.3832C68.0862 92.4196 69.031 92.6584 69.8824 93.0892V93.0841Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
         stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
         strokeWidth="0.4"
@@ -166,7 +172,7 @@ export function TeamspaceVerticalStackIllustration({ className }: TIllustrationA
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M67.469 72.7772C66.275 72.1698 64.7643 72.2632 63.1965 73.0627C61.4315 73.9608 59.7392 75.6791 58.4933 77.8283C57.2474 79.9826 56.5465 82.3966 56.5465 84.5458C56.5465 86.6949 57.2474 88.3925 58.4933 89.275C58.6334 89.3736 58.7736 89.4619 58.9241 89.5346L54.8282 87.4477C54.6777 87.3698 54.5375 87.2867 54.3973 87.1881C53.1514 86.3056 52.4506 84.6029 52.4506 82.4589C52.4506 80.3097 53.1514 77.8957 54.3973 75.7414C55.6433 73.587 57.3356 71.8739 59.1006 70.9758C60.6684 70.1763 62.1791 70.0829 63.373 70.6903L67.469 72.7772Z"
+        d="M66.669 71.8524C65.475 71.245 63.9643 71.3384 62.3966 72.1379C60.6315 73.036 58.9392 74.7543 57.6933 76.9035C56.4474 79.0578 55.7465 81.4718 55.7465 83.621C55.7465 85.7701 56.4474 87.4677 57.6933 88.3502C57.8334 88.4488 57.9736 88.5371 58.1241 88.6098L54.0282 86.5229C53.8777 86.445 53.7375 86.3619 53.5974 86.2633C52.3515 85.3808 51.6506 83.6781 51.6506 81.5341C51.6506 79.3849 52.3515 76.9709 53.5974 74.8166C54.8433 72.6622 56.5356 70.9491 58.3006 70.051C59.8684 69.2515 61.3791 69.1581 62.5731 69.7655L66.669 71.8524Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
         stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
         strokeWidth="0.4"
@@ -176,7 +182,7 @@ export function TeamspaceVerticalStackIllustration({ className }: TIllustrationA
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M67.469 72.7772C67.6195 72.8551 67.7597 72.9381 67.8999 73.0367C69.1458 73.9193 69.8466 75.622 69.8466 77.766C69.8466 79.91 69.1458 82.3291 67.8999 84.4835C66.654 86.6379 64.9616 88.351 63.1966 89.2491C61.6288 90.0485 60.1182 90.142 58.9242 89.5346C58.7736 89.4567 58.6335 89.3737 58.4933 89.275C57.2474 88.3925 56.5466 86.6898 56.5466 84.5458C56.5466 82.3966 57.2474 79.9827 58.4933 77.8283C59.7392 75.6739 61.4315 73.9608 63.1966 73.0627C64.7643 72.2633 66.275 72.1698 67.469 72.7772Z"
+        d="M66.669 71.8524C66.8195 71.9303 66.9597 72.0133 67.0999 72.1119C68.3458 72.9945 69.0466 74.6972 69.0466 76.8412C69.0466 78.9852 68.3458 81.4043 67.0999 83.5587C65.854 85.7131 64.1616 87.4262 62.3966 88.3243C60.8288 89.1237 59.3182 89.2172 58.1242 88.6098C57.9736 88.5319 57.8335 88.4489 57.6933 88.3502C56.4474 87.4677 55.7466 85.765 55.7466 83.621C55.7466 81.4718 56.4474 79.0579 57.6933 76.9035C58.9392 74.7491 60.6316 73.036 62.3966 72.1379C63.9644 71.3384 65.475 71.245 66.669 71.8524Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
         stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
         strokeWidth="0.4"
@@ -186,7 +192,7 @@ export function TeamspaceVerticalStackIllustration({ className }: TIllustrationA
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M101.503 79.3645C100.335 78.7727 99.0371 78.4405 97.6406 78.3937C95.5174 78.3211 93.2177 78.8973 90.8972 80.0861C88.1199 81.4981 85.3945 83.7355 82.9597 86.5959C80.8573 89.0722 79.03 91.9429 77.6076 95.0058C77.1871 95.9143 76.8496 96.8591 76.5953 97.8298C75.8218 100.716 74.1709 107.397 74.4876 110.756C74.5187 111.088 74.6226 111.374 74.7783 111.587C74.8769 111.716 74.9963 111.82 75.1313 111.888L71.0354 109.801C70.8952 109.733 70.7758 109.624 70.6824 109.5C70.5215 109.282 70.4228 109.001 70.3917 108.669C70.1062 105.601 71.4559 99.761 72.2813 96.5735C72.7018 94.9435 73.2728 93.3602 74.0308 91.8547C75.3701 89.1916 77.0106 86.6946 78.869 84.509C81.2985 81.6487 84.0291 79.406 86.8065 77.9992C89.127 76.8156 91.4267 76.2342 93.5499 76.3068C94.9464 76.3536 96.2494 76.6858 97.4122 77.2776L101.508 79.3645H101.503Z"
+        d="M100.703 78.4397C99.5349 77.8479 98.2371 77.5156 96.8407 77.4689C94.7174 77.3962 92.4177 77.9725 90.0972 79.1613C87.3199 80.5733 84.5945 82.8107 82.1598 85.6711C80.0573 88.1474 78.23 91.0181 76.8076 94.081C76.3871 94.9894 76.0496 95.9343 75.7953 96.905C75.0218 99.7914 73.3709 106.473 73.6876 109.831C73.7188 110.164 73.8226 110.449 73.9783 110.662C74.077 110.792 74.1964 110.895 74.3313 110.963L70.2354 108.876C70.0953 108.809 69.9759 108.7 69.8824 108.575C69.7215 108.357 69.6228 108.077 69.5917 107.744C69.3062 104.676 70.6559 98.8362 71.4813 95.6487C71.9018 94.0187 72.4729 92.4353 73.2308 90.9299C74.5701 88.2668 76.2106 85.7698 78.069 83.5842C80.4986 80.7238 83.2292 78.4812 86.0065 77.0744C88.327 75.8908 90.6267 75.3094 92.7499 75.382C94.1464 75.4288 95.4494 75.761 96.6122 76.3528L100.708 78.4397H100.703Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
         stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
         strokeWidth="0.4"
@@ -196,7 +202,7 @@ export function TeamspaceVerticalStackIllustration({ className }: TIllustrationA
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M101.503 79.3703C102.105 79.6766 102.676 80.0555 103.2 80.5072C104.747 81.8258 105.916 83.7102 106.622 86.0463C107.328 88.3771 107.561 91.1026 107.302 94.046C107.27 94.4094 107.172 94.7987 107.011 95.1725C106.85 95.5463 106.642 95.8993 106.388 96.2004C101.669 101.895 96.3272 106.349 90.892 109.106C85.2543 111.977 79.9592 112.854 75.3961 111.992C75.3026 111.977 75.2144 111.945 75.1313 111.904C74.9963 111.836 74.8769 111.733 74.7783 111.598C74.6226 111.385 74.5187 111.099 74.4876 110.767C74.1865 107.559 75.6816 101.319 76.4862 98.2509C76.8081 97.031 77.2182 95.837 77.7581 94.7001C79.1545 91.7567 80.9248 88.9949 82.9545 86.6069C85.3892 83.7465 88.1147 81.5091 90.8868 80.0971C93.2073 78.9135 95.507 78.3372 97.6302 78.4047C99.0267 78.4514 100.33 78.7785 101.498 79.3755L101.503 79.3703Z"
+        d="M100.703 78.4455C101.305 78.7518 101.876 79.1307 102.4 79.5824C103.947 80.901 105.116 82.7854 105.822 85.1215C106.528 87.4523 106.761 90.1778 106.502 93.1212C106.47 93.4846 106.372 93.8739 106.211 94.2477C106.05 94.6215 105.842 94.9745 105.588 95.2756C100.869 100.97 95.5273 105.425 90.092 108.181C84.4543 111.052 79.1592 111.929 74.5961 111.067C74.5026 111.052 74.4144 111.021 74.3313 110.979C74.1963 110.912 74.0769 110.808 73.9783 110.673C73.8226 110.46 73.7187 110.175 73.6876 109.842C73.3865 106.634 74.8816 100.394 75.6862 97.3261C76.0081 96.1062 76.4182 94.9122 76.9581 93.7753C78.3545 90.8319 80.1248 88.0701 82.1545 85.6821C84.5893 82.8217 87.3147 80.5843 90.0868 79.1723C92.4073 77.9887 94.707 77.4124 96.8303 77.4799C98.2267 77.5266 99.5297 77.8537 100.698 78.4507L100.703 78.4455Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
         stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
         strokeWidth="0.4"
@@ -206,7 +212,7 @@ export function TeamspaceVerticalStackIllustration({ className }: TIllustrationA
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M97.0748 50.1017C95.4292 49.2659 93.3475 49.3957 91.1827 50.4963C88.748 51.737 86.4171 54.099 84.6988 57.0684C82.9805 60.0378 82.0149 63.3706 82.0149 66.3296C82.0149 69.2886 82.9805 71.6351 84.6988 72.8498C84.8909 72.9848 85.0881 73.1042 85.2906 73.208L81.1947 71.1212C80.9922 71.0173 80.7898 70.8979 80.6029 70.763C78.8846 69.5482 77.919 67.2017 77.919 64.2427C77.919 61.2837 78.8846 57.9509 80.6029 54.9815C82.3212 52.0121 84.6573 49.6501 87.0868 48.4094C89.2515 47.3088 91.3332 47.179 92.9789 48.0148L97.0748 50.1017Z"
+        d="M96.2748 49.1769C94.6292 48.3411 92.5475 48.4709 90.3827 49.5714C87.948 50.8122 85.6171 53.1742 83.8988 56.1436C82.1805 59.113 81.2149 62.4458 81.2149 65.4048C81.2149 68.3638 82.1805 70.7103 83.8988 71.925C84.0909 72.06 84.2882 72.1794 84.4906 72.2832L80.3947 70.1963C80.1922 70.0925 79.9898 69.9731 79.8029 69.8382C78.0846 68.6234 77.119 66.2769 77.119 63.3179C77.119 60.3589 78.0846 57.0261 79.8029 54.0567C81.5212 51.0873 83.8573 48.7253 86.2868 47.4846C88.4516 46.384 90.5332 46.2542 92.1789 47.09L96.2748 49.1769Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
         stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
         strokeWidth="0.4"
@@ -216,7 +222,7 @@ export function TeamspaceVerticalStackIllustration({ className }: TIllustrationA
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M97.0748 50.1017C97.2773 50.2056 97.4797 50.325 97.6666 50.4599C99.3849 51.6747 100.351 54.0211 100.351 56.9802C100.351 59.9392 99.3849 63.272 97.6666 66.2414C95.9483 69.2108 93.6122 71.5728 91.1827 72.8135C89.018 73.9141 86.9363 74.0439 85.2906 73.2081C85.0882 73.1042 84.8857 72.9848 84.6988 72.8499C82.9805 71.6351 82.015 69.2887 82.015 66.3296C82.015 63.3706 82.9805 60.0378 84.6988 57.0684C86.4171 54.099 88.7532 51.737 91.1827 50.4963C93.3475 49.3957 95.4292 49.2659 97.0748 50.1017Z"
+        d="M96.2748 49.1769C96.4773 49.2808 96.6798 49.4002 96.8666 49.5351C98.5849 50.7499 99.5505 53.0963 99.5505 56.0554C99.5505 59.0144 98.5849 62.3472 96.8666 65.3166C95.1483 68.286 92.8123 70.648 90.3827 71.8887C88.218 72.9893 86.1363 73.1191 84.4907 72.2833C84.2882 72.1794 84.0857 72.06 83.8988 71.9251C82.1805 70.7103 81.215 68.3639 81.215 65.4048C81.215 62.4458 82.1805 59.113 83.8988 56.1436C85.6172 53.1742 87.9532 50.8122 90.3827 49.5715C92.5475 48.4709 94.6292 48.3411 96.2748 49.1769Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
         stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
         strokeWidth="0.4"
@@ -226,9 +232,9 @@ export function TeamspaceVerticalStackIllustration({ className }: TIllustrationA
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M156.157 76.1567C157.641 75.3988 158.591 73.6078 158.591 71.0641C158.591 66.5061 155.554 61.2629 151.811 59.3578C150.155 58.5168 148.64 58.4597 147.466 59.0618L149.875 57.8367C151.054 57.2397 152.569 57.2916 154.22 58.1326C157.963 60.043 161 65.281 161 69.8389C161 72.3826 160.05 74.1736 158.565 74.9315L156.157 76.1567Z"
+        d="M155.357 75.2319C156.841 74.474 157.791 72.683 157.791 70.1393C157.791 65.5813 154.754 60.3381 151.011 58.4329C149.355 57.592 147.84 57.5349 146.666 58.137L149.075 56.9119C150.254 56.3149 151.769 56.3668 153.42 57.2078C157.163 59.1182 160.2 64.3562 160.2 68.9141C160.2 71.4578 159.25 73.2488 157.765 74.0067L155.357 75.2319Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.4"
         strokeLinecap="round"
         strokeLinejoin="round"
@@ -236,35 +242,35 @@ export function TeamspaceVerticalStackIllustration({ className }: TIllustrationA
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M156.157 76.1571C154.978 76.7541 153.462 76.7022 151.811 75.8612C148.069 73.9509 145.032 68.7129 145.032 64.1549C145.032 61.6112 145.982 59.8202 147.466 59.0623C148.645 58.4653 150.161 58.5172 151.811 59.3582C155.554 61.2686 158.591 66.5066 158.591 71.0645C158.591 73.6082 157.641 75.3992 156.157 76.1571Z"
+        d="M155.357 75.2323C154.178 75.8293 152.662 75.7774 151.011 74.9364C147.269 73.026 144.232 67.7881 144.232 63.2301C144.232 60.6864 145.182 58.8954 146.666 58.1375C147.845 57.5405 149.361 57.5924 151.011 58.4334C154.754 60.3438 157.791 65.5818 157.791 70.1397C157.791 72.6834 156.841 74.4744 155.357 75.2323Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.4"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
       <path
-        d="M153.478 72.6109C153.286 72.5122 153.135 72.2475 153.135 72.0139V71.1729C153.135 70.4773 152.673 69.6778 152.102 69.3871L150.031 68.3333C149.46 68.0426 148.998 68.3696 148.998 69.0652V69.9062C148.998 70.1398 148.842 70.2488 148.655 70.1502C148.468 70.0516 148.313 69.7868 148.313 69.5532V68.7122C148.313 67.5546 149.086 67.0095 150.036 67.4923L152.107 68.5461C153.057 69.0289 153.831 70.3682 153.831 71.5259V72.3669C153.831 72.6005 153.675 72.7095 153.488 72.6109H153.478Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M152.678 71.6861C152.486 71.5874 152.335 71.3227 152.335 71.0891V70.2481C152.335 69.5525 151.873 68.753 151.302 68.4623L149.231 67.4085C148.66 67.1178 148.198 67.4448 148.198 68.1404V68.9814C148.198 69.215 148.042 69.324 147.855 69.2254C147.668 69.1268 147.513 68.862 147.513 68.6284V67.7874C147.513 66.6298 148.286 66.0847 149.236 66.5675L151.307 67.6213C152.257 68.1041 153.031 69.4434 153.031 70.6011V71.4421C153.031 71.6757 152.875 71.7847 152.688 71.6861H152.678Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
-        d="M153.478 68.3591C153.322 68.2812 153.182 68.0839 153.146 67.8763C153.099 67.6271 153.208 67.4558 153.395 67.4921C153.758 67.5648 154.044 67.3623 154.137 66.9678C154.283 66.3708 153.945 65.5091 153.395 65.0574C153.208 64.9069 153.099 64.6214 153.146 64.4189C153.192 64.2164 153.379 64.1801 153.566 64.3306C154.013 64.6992 154.386 65.2339 154.62 65.8361C154.854 66.4383 154.921 67.0353 154.802 67.5181C154.646 68.1774 154.168 68.5096 153.566 68.3954C153.535 68.3902 153.509 68.3798 153.478 68.3643V68.3591Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M152.678 67.4343C152.522 67.3564 152.382 67.1591 152.346 66.9515C152.299 66.7023 152.408 66.531 152.595 66.5673C152.958 66.64 153.244 66.4375 153.337 66.043C153.483 65.446 153.145 64.5843 152.595 64.1326C152.408 63.9821 152.299 63.6965 152.346 63.4941C152.392 63.2916 152.579 63.2553 152.766 63.4058C153.213 63.7744 153.586 64.3091 153.82 64.9113C154.054 65.5135 154.121 66.1105 154.002 66.5933C153.846 67.2526 153.368 67.5848 152.766 67.4706C152.735 67.4654 152.709 67.455 152.678 67.4395V67.4343Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
-        d="M155.544 73.6646C155.352 73.5659 155.201 73.3012 155.201 73.0676V72.2266C155.201 71.6504 154.88 70.9911 154.428 70.6121C154.241 70.4616 154.132 70.176 154.179 69.9736C154.225 69.7711 154.412 69.7348 154.599 69.8853C155.362 70.5135 155.892 71.6192 155.892 72.5744V73.4154C155.892 73.649 155.736 73.758 155.549 73.6594L155.544 73.6646Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M154.744 72.7398C154.552 72.6411 154.401 72.3764 154.401 72.1428V71.3018C154.401 70.7256 154.08 70.0663 153.628 69.6873C153.441 69.5368 153.332 69.2512 153.379 69.0488C153.425 68.8463 153.612 68.81 153.799 68.9605C154.562 69.5887 155.092 70.6944 155.092 71.6496V72.4906C155.092 72.7242 154.936 72.8332 154.749 72.7346L154.744 72.7398Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
-        d="M151.064 67.1813C150.114 66.6985 149.34 65.3591 149.34 64.2015C149.34 63.0438 150.114 62.4988 151.064 62.9815C152.014 63.4643 152.787 64.8037 152.787 65.9613C152.787 67.119 152.014 67.6641 151.064 67.1813ZM151.064 63.8277C150.493 63.537 150.031 63.8641 150.031 64.5597C150.031 65.2553 150.493 66.0548 151.064 66.3455C151.635 66.6362 152.097 66.3091 152.097 65.6135C152.097 64.9179 151.635 64.1184 151.064 63.8277Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M150.264 66.2565C149.314 65.7737 148.54 64.4343 148.54 63.2767C148.54 62.119 149.314 61.5739 150.264 62.0567C151.214 62.5395 151.987 63.8789 151.987 65.0365C151.987 66.1942 151.214 66.7393 150.264 66.2565ZM150.264 62.9029C149.693 62.6122 149.231 62.9393 149.231 63.6349C149.231 64.3305 149.693 65.13 150.264 65.4207C150.835 65.7114 151.297 65.3843 151.297 64.6887C151.297 63.9931 150.835 63.1936 150.264 62.9029Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M5.65137 80.0187C4.22378 79.2919 3.3153 77.5736 3.3153 75.1285C3.3153 70.7522 6.2328 65.7167 9.82515 63.8894L33.9126 51.6172C35.5012 50.8074 36.9547 50.7555 38.0864 51.3317L35.7711 50.1533C34.6394 49.5771 33.1858 49.629 31.5973 50.4388L7.50985 62.711C3.9123 64.5435 1 69.579 1 73.9501C1 76.3951 1.90847 78.1135 3.33607 78.8402L5.65137 80.0187Z"
+        d="M4.85139 79.0938C3.42379 78.3671 2.51532 76.6488 2.51532 74.2037C2.51532 69.8274 5.43281 64.7919 9.02516 62.9646L33.1126 50.6924C34.7012 49.8826 36.1547 49.8307 37.2864 50.4069L34.9711 49.2285C33.8394 48.6523 32.3859 48.7042 30.7973 49.514L6.70986 61.7862C3.11231 63.6187 0.200012 68.6542 0.200012 73.0253C0.200012 75.4703 1.10848 77.1887 2.53608 77.9154L4.85139 79.0938Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.4"
         strokeLinecap="round"
         strokeLinejoin="round"
@@ -272,82 +278,82 @@ export function TeamspaceVerticalStackIllustration({ className }: TIllustrationA
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M5.65141 80.0189C6.7831 80.5952 8.23666 80.5433 9.82519 79.7334L33.9127 67.4613C37.5102 65.6288 40.4225 60.5932 40.4225 56.2222C40.4225 53.7771 39.514 52.0588 38.0864 51.332C36.9547 50.7558 35.5012 50.8077 33.9127 51.6175L9.82519 63.8897C6.22764 65.7222 3.31534 70.7577 3.31534 75.1288C3.31534 77.5739 4.22381 79.2922 5.65141 80.0189Z"
+        d="M4.85142 79.0941C5.98312 79.6704 7.43667 79.6185 9.0252 78.8086L33.1127 66.5365C36.7102 64.704 39.6225 59.6684 39.6225 55.2974C39.6225 52.8523 38.7141 51.134 37.2865 50.4072C36.1548 49.831 34.7012 49.8829 33.1127 50.6927L9.0252 62.9649C5.42765 64.7974 2.51535 69.8329 2.51535 74.204C2.51535 76.6491 3.42382 78.3674 4.85142 79.0941Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.4"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
       <path
-        d="M13.1164 68.6033C13.2046 68.4683 13.3344 68.4112 13.4175 68.4683C13.5005 68.5254 13.5057 68.6812 13.433 68.8265L13.4175 68.8577L10.2716 74.2929C10.1833 74.4435 10.0431 74.5161 9.95489 74.4538C9.86664 74.3915 9.86664 74.2202 9.95489 74.0645L13.1008 68.6292L13.1164 68.6033Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M12.3164 67.6785C12.4046 67.5435 12.5344 67.4864 12.6175 67.5435C12.7005 67.6006 12.7057 67.7563 12.6331 67.9017L12.6175 67.9328L9.47157 73.3681C9.38332 73.5187 9.24315 73.5913 9.1549 73.529C9.06665 73.4667 9.06665 73.2954 9.1549 73.1397L12.3008 67.7044L12.3164 67.6785Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
-        d="M10.7855 70.4155C10.7855 70.1871 10.635 70.0833 10.4481 70.1767C10.2612 70.2702 10.1106 70.5297 10.1106 70.7582C10.1106 70.9866 10.2612 71.0904 10.4481 70.9969C10.635 70.9035 10.7855 70.6439 10.7855 70.4155ZM11.2371 70.1871C11.2371 70.7166 10.8841 71.324 10.4481 71.5472C10.012 71.7704 9.659 71.5213 9.659 70.9918C9.659 70.4623 10.012 69.8549 10.4481 69.6317C10.8841 69.4084 11.2371 69.6576 11.2371 70.1871Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M9.98551 69.4907C9.98551 69.2623 9.83497 69.1585 9.64808 69.2519C9.4612 69.3454 9.31065 69.6049 9.31065 69.8333C9.31065 70.0618 9.4612 70.1656 9.64808 70.0721C9.83497 69.9787 9.98551 69.7191 9.98551 69.4907ZM10.4372 69.2623C10.4372 69.7918 10.0841 70.3992 9.64808 70.6224C9.21202 70.8456 8.85901 70.5965 8.85901 70.067C8.85901 69.5374 9.21202 68.9301 9.64808 68.7068C10.0841 68.4836 10.4372 68.7328 10.4372 69.2623Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
-        d="M13.2618 72.1646C13.2618 71.9361 13.1112 71.8323 12.9243 71.9258C12.7374 72.0192 12.5869 72.2788 12.5869 72.5072C12.5869 72.7356 12.7374 72.8394 12.9243 72.746C13.1112 72.6525 13.2618 72.393 13.2618 72.1646ZM13.7082 71.9361C13.7082 72.4656 13.3552 73.073 12.9191 73.2963C12.4831 73.5195 12.1301 73.2703 12.1301 72.7408C12.1301 72.2113 12.4831 71.6039 12.9191 71.3807C13.3552 71.1574 13.7082 71.4066 13.7082 71.9361Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M12.4618 71.2397C12.4618 71.0113 12.3112 70.9075 12.1243 71.001C11.9375 71.0944 11.7869 71.354 11.7869 71.5824C11.7869 71.8108 11.9375 71.9146 12.1243 71.8212C12.3112 71.7277 12.4618 71.4682 12.4618 71.2397ZM12.9082 71.0113C12.9082 71.5408 12.5552 72.1482 12.1191 72.3714C11.6831 72.5947 11.3301 72.3455 11.3301 71.816C11.3301 71.2865 11.6831 70.6791 12.1191 70.4559C12.5552 70.2326 12.9082 70.4818 12.9082 71.0113Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
-        d="M11.6109 66.615C11.6109 66.4696 11.7096 66.3035 11.829 66.2464C12.5298 65.9349 13.2099 65.8311 13.8172 65.9609C14.4869 66.1011 15.032 66.5112 15.411 67.1445C15.7847 67.7778 15.9716 68.6188 15.9508 69.5688C15.9301 70.524 15.6965 71.5571 15.2864 72.5642C14.8711 73.5713 14.2896 74.5161 13.6044 75.3C12.914 76.0839 12.1456 76.6757 11.3721 77.0131C10.5986 77.3505 9.8511 77.4284 9.20739 77.2311C8.62597 77.0494 8.14318 76.6549 7.81094 76.0735C7.75383 75.9748 7.80056 75.7932 7.90957 75.6738C8.01859 75.5544 8.14837 75.544 8.20547 75.6426C8.50657 76.1565 8.93225 76.5044 9.45138 76.6653C10.0328 76.8418 10.7025 76.7743 11.3981 76.468C12.0937 76.1617 12.7894 75.6322 13.4071 74.9262C14.0249 74.2202 14.5492 73.374 14.923 72.4656C15.2967 71.5571 15.4992 70.6278 15.52 69.7661C15.5407 68.9095 15.3746 68.1516 15.0372 67.5806C14.6997 67.0095 14.2066 66.641 13.6044 66.5164C13.0645 66.4022 12.4623 66.4904 11.8394 66.7655C11.72 66.8175 11.6213 66.75 11.6213 66.6046L11.6109 66.615Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M10.811 65.6902C10.811 65.5448 10.9096 65.3787 11.029 65.3216C11.7298 65.0101 12.4099 64.9063 13.0172 65.0361C13.6869 65.1763 14.232 65.5864 14.611 66.2197C14.9847 66.853 15.1716 67.694 15.1509 68.644C15.1301 69.5992 14.8965 70.6323 14.4864 71.6394C14.0711 72.6465 13.4896 73.5913 12.8044 74.3752C12.114 75.1591 11.3457 75.7509 10.5722 76.0883C9.79866 76.4257 9.05112 76.5036 8.4074 76.3063C7.82598 76.1246 7.34319 75.7301 7.01095 75.1487C6.95385 75.05 7.00057 74.8684 7.10958 74.749C7.2186 74.6296 7.34838 74.6192 7.40549 74.7178C7.70658 75.2317 8.13226 75.5795 8.65139 75.7405C9.23281 75.917 9.90248 75.8495 10.5981 75.5432C11.2937 75.2369 11.9894 74.7074 12.6071 74.0014C13.2249 73.2954 13.7492 72.4492 14.123 71.5407C14.4968 70.6323 14.6992 69.703 14.72 68.8413C14.7407 67.9847 14.5746 67.2268 14.2372 66.6558C13.8998 66.0847 13.4066 65.7161 12.8044 65.5916C12.2645 65.4773 11.6623 65.5656 11.0394 65.8407C10.92 65.8927 10.8213 65.8252 10.8213 65.6798L10.811 65.6902Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M30.8653 63.8222L22.0506 68.3126C21.3238 68.6812 20.7372 68.2659 20.7372 67.3834C20.7372 66.5009 21.3238 65.4886 22.0506 65.12L30.8653 60.6295C31.5921 60.261 32.1787 60.6763 32.1787 61.5588C32.1787 62.4413 31.5921 63.4536 30.8653 63.8222Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M30.0654 62.8974L21.2506 67.3878C20.5238 67.7564 19.9372 67.3411 19.9372 66.4586C19.9372 65.576 20.5238 64.5638 21.2506 64.1952L30.0654 59.7047C30.7921 59.3362 31.3787 59.7515 31.3787 60.634C31.3787 61.5165 30.7921 62.5288 30.0654 62.8974Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
-        d="M101.394 2.72093C102.614 2.09798 104.192 2.14989 105.91 3.02721L144.886 22.889C148.769 24.8669 151.921 30.3021 151.921 35.0314C151.921 37.6685 150.939 39.527 149.403 40.3109L151.718 39.1325C153.26 38.3486 154.236 36.4901 154.236 33.853C154.236 29.1289 151.085 23.6885 147.202 21.7106L108.22 1.8488C106.502 0.971472 104.929 0.919559 103.704 1.54251L101.389 2.72093H101.394Z"
+        d="M100.594 1.79612C101.814 1.17317 103.392 1.22508 105.11 2.10241L144.086 21.9642C147.969 23.9421 151.121 29.3773 151.121 34.1066C151.121 36.7437 150.139 38.6022 148.603 39.3861L150.918 38.2077C152.46 37.4238 153.436 35.5653 153.436 32.9281C153.436 28.2041 150.285 22.7636 146.402 20.7858L107.421 0.923991C105.702 0.0466671 104.129 -0.0052456 102.904 0.617706L100.589 1.79612H100.594Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.4"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
       <path
-        d="M101.394 2.72025C99.8521 3.50413 98.8762 5.3626 98.8762 7.99976C98.8762 12.7238 102.027 18.1643 105.91 20.1421L144.886 40.0039C146.605 40.8812 148.178 40.9332 149.403 40.3102C150.945 39.5263 151.921 37.6678 151.921 35.0307C151.921 30.3066 148.769 24.8662 144.886 22.8883L105.91 3.02653C104.192 2.14921 102.619 2.09729 101.394 2.72025Z"
+        d="M100.594 1.79544C99.0521 2.57932 98.0762 4.43779 98.0762 7.07496C98.0762 11.799 101.227 17.2395 105.11 19.2173L144.086 39.0791C145.805 39.9564 147.378 40.0084 148.603 39.3854C150.145 38.6015 151.121 36.743 151.121 34.1059C151.121 29.3818 147.969 23.9414 144.086 21.9635L105.11 2.10173C103.392 1.2244 101.819 1.17249 100.594 1.79544Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.4"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
       <path
-        d="M106.424 9.66657V14.5879C106.424 15.4029 106.964 16.3425 107.639 16.6852L114.113 19.9816C114.782 20.3242 115.327 19.9401 115.327 19.1251V14.2037C115.327 13.3939 114.782 12.4491 114.113 12.1065L112.898 11.4887V10.9955C112.898 10.1857 112.353 9.24088 111.683 8.89826L110.063 8.07285C109.394 7.73023 108.849 8.11957 108.849 8.92941V9.42258L107.634 8.80482C106.964 8.46219 106.419 8.85154 106.419 9.66138L106.424 9.66657ZM114.113 19.0005L112.898 18.3827V12.475L114.113 13.0928C114.336 13.207 114.517 13.5185 114.517 13.7936V18.7149C114.517 18.9849 114.336 19.1147 114.113 19.0005ZM109.664 10.8242L112.093 12.0597V17.9674L109.664 16.7319V10.8242ZM109.664 9.34471C109.664 9.07476 109.845 8.94498 110.069 9.05919L111.688 9.8846C111.911 9.99881 112.093 10.3103 112.093 10.5854V11.0786L109.664 9.84307V9.3499V9.34471ZM107.234 10.0767C107.234 9.80673 107.416 9.67695 107.639 9.79116L108.854 10.4089V16.3166L107.639 15.6988C107.416 15.5846 107.234 15.2731 107.234 14.998V10.0767Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M105.624 8.74176V13.6631C105.624 14.4781 106.164 15.4177 106.839 15.7604L113.313 19.0568C113.982 19.3994 114.527 19.0153 114.527 18.2002V13.2789C114.527 12.4691 113.982 11.5243 113.313 11.1817L112.098 10.5639V10.0707C112.098 9.26089 111.553 8.31608 110.883 7.97346L109.263 7.14805C108.594 6.80542 108.049 7.19477 108.049 8.0046V8.49777L106.834 7.88001C106.164 7.53739 105.619 7.92674 105.619 8.73657L105.624 8.74176ZM113.313 18.0757L112.098 17.4579V11.5502L113.313 12.168C113.536 12.2822 113.717 12.5937 113.717 12.8688V17.7901C113.717 18.0601 113.536 18.1899 113.313 18.0757ZM108.864 9.89942L111.293 11.1349V17.0426L108.864 15.8071V9.89942ZM108.864 8.41991C108.864 8.14996 109.045 8.02018 109.269 8.13439L110.888 8.9598C111.111 9.07401 111.293 9.38548 111.293 9.66062V10.1538L108.864 8.91827V8.4251V8.41991ZM106.434 9.15187C106.434 8.88193 106.616 8.75215 106.839 8.86635L108.054 9.48411V15.3918L106.839 14.774C106.616 14.6598 106.434 14.3483 106.434 14.0732V9.15187Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M126.675 20.5009C126.743 20.7189 126.888 20.9214 127.06 21.0096C127.293 21.1342 127.485 20.9941 127.49 20.6982V20.1583C127.49 19.9818 127.428 19.7793 127.309 19.6236C127.195 19.4626 127.044 19.364 126.914 19.364L124.142 19.2861C123.976 19.2861 123.867 19.4263 123.867 19.6443V23.3769C123.867 23.5637 123.945 23.7766 124.075 23.9375C124.204 24.0984 124.36 24.1867 124.495 24.1659L124.89 24.1088C125.097 24.0777 125.18 23.7973 125.071 23.4807C124.999 23.273 124.864 23.1017 124.724 23.0187V20.4438L126.675 20.5009Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M125.875 19.5761C125.943 19.7941 126.088 19.9966 126.26 20.0848C126.493 20.2094 126.685 20.0693 126.69 19.7734V19.2335C126.69 19.057 126.628 18.8545 126.509 18.6988C126.395 18.5378 126.244 18.4392 126.114 18.4392L123.342 18.3613C123.176 18.3613 123.067 18.5015 123.067 18.7195V22.452C123.067 22.6389 123.145 22.8518 123.275 23.0127C123.404 23.1736 123.56 23.2619 123.695 23.2411L124.09 23.184C124.297 23.1529 124.38 22.8725 124.271 22.5559C124.199 22.3482 124.064 22.1769 123.924 22.0938V19.519L125.875 19.5761Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M124.967 18.0351C125.035 18.2531 125.18 18.4556 125.352 18.5438C125.585 18.6684 125.777 18.5282 125.782 18.2323V17.6924C125.782 17.5159 125.72 17.3135 125.601 17.1577C125.481 17.002 125.336 16.8982 125.206 16.8982L122.434 16.8203C122.268 16.8203 122.159 16.9605 122.159 17.1785V20.911C122.159 21.0979 122.237 21.3108 122.367 21.4717C122.496 21.6326 122.652 21.7209 122.787 21.7001L123.182 21.643C123.389 21.6119 123.472 21.3315 123.363 21.0149C123.291 20.8072 123.156 20.6359 123.016 20.5528V17.978L124.967 18.0351Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M124.167 17.1103C124.235 17.3283 124.38 17.5308 124.552 17.619C124.785 17.7436 124.977 17.6034 124.983 17.3075V16.7676C124.983 16.5911 124.92 16.3887 124.801 16.2329C124.681 16.0772 124.536 15.9734 124.406 15.9734L121.634 15.8955C121.468 15.8955 121.359 16.0357 121.359 16.2537V19.9862C121.359 20.1731 121.437 20.386 121.567 20.5469C121.696 20.7078 121.852 20.7961 121.987 20.7753L122.382 20.7182C122.589 20.687 122.672 20.4067 122.563 20.0901C122.491 19.8824 122.356 19.7111 122.216 19.628V17.0532L124.167 17.1103Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M129.193 22.1783C129.079 22.0173 128.934 21.9187 128.799 21.9187L126.027 21.8408C125.866 21.8408 125.757 21.981 125.757 22.1938V25.9315C125.757 26.108 125.824 26.3053 125.938 26.4559C126.058 26.622 126.203 26.7154 126.338 26.7206L129.1 26.7985C129.271 26.8089 129.38 26.6687 129.38 26.4455V22.7078C129.38 22.5313 129.313 22.334 129.193 22.1783ZM128.529 25.646L126.613 25.5889V22.9985L128.529 23.0556V25.646Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M128.393 21.2534C128.279 21.0925 128.134 20.9939 127.999 20.9939L125.227 20.916C125.066 20.916 124.957 21.0562 124.957 21.269V25.0067C124.957 25.1832 125.024 25.3805 125.138 25.5311C125.258 25.6972 125.403 25.7906 125.538 25.7958L128.3 25.8737C128.471 25.8841 128.58 25.7439 128.58 25.5207V21.783C128.58 21.6065 128.513 21.4092 128.393 21.2534ZM127.729 24.7212L125.813 24.6641V22.0737L127.729 22.1308V24.7212Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M140.671 25.9108C138.999 25.0594 137.65 26.0198 137.65 28.0496C137.65 30.0794 139.005 32.4154 140.671 33.2668C142.343 34.1182 143.692 33.1578 143.692 31.128C143.692 29.0982 142.337 26.7622 140.671 25.9108ZM140.671 24.8622C138.527 23.7668 136.783 24.9971 136.783 27.6083C136.783 30.2195 138.522 33.2253 140.671 34.3154C142.815 35.4108 144.559 34.1805 144.559 31.5693C144.559 28.9581 142.82 25.9523 140.671 24.8622Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M139.871 24.986C138.199 24.1346 136.85 25.095 136.85 27.1248C136.85 29.1546 138.205 31.4906 139.871 32.342C141.543 33.1934 142.892 32.233 142.892 30.2032C142.892 28.1734 141.537 25.8374 139.871 24.986ZM139.871 23.9373C137.727 22.842 135.983 24.0723 135.983 26.6835C135.983 29.2947 137.722 32.3005 139.871 33.3906C142.015 34.486 143.759 33.2557 143.759 30.6445C143.759 28.0333 142.02 25.0275 139.871 23.9373Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
-        d="M140.671 32.4247C141.289 32.7414 141.881 32.7414 142.322 32.4351C142.763 32.1288 143.007 31.5318 143.007 30.7791C143.007 30.0264 142.763 29.1802 142.322 28.4274C141.886 27.6747 141.294 27.0725 140.671 26.7559V32.4299V32.4247Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M139.871 31.4999C140.489 31.8166 141.081 31.8166 141.522 31.5103C141.963 31.204 142.207 30.607 142.207 29.8543C142.207 29.1016 141.963 28.2554 141.522 27.5026C141.086 26.7499 140.494 26.1477 139.871 25.8311V31.5051V31.4999Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
     </svg>
   );
diff --git a/packages/propel/src/empty-state/assets/vertical-stack/view.tsx b/packages/propel/src/empty-state/assets/vertical-stack/view.tsx
index 693fbea94..77ba74470 100644
--- a/packages/propel/src/empty-state/assets/vertical-stack/view.tsx
+++ b/packages/propel/src/empty-state/assets/vertical-stack/view.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper";
 import type { TIllustrationAssetProps } from "../helper";
 
@@ -12,26 +18,26 @@ export function ViewVerticalStackIllustration({ className }: TIllustrationAssetP
       className={className}
     >
       <path
-        d="M62.9863 126.722L62.6748 126.88C62.7412 126.845 62.8076 126.809 62.8739 126.773C62.9097 126.753 62.9505 126.737 62.9863 126.722Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M62.1863 125.972L61.8748 126.13C61.9412 126.094 62.0076 126.059 62.074 126.023C62.1097 126.003 62.1505 125.987 62.1863 125.972Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
-        d="M71.028 130.72L70.8289 130.827C70.7932 130.847 70.7523 130.863 70.7166 130.878L71.028 130.72Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M70.2281 129.969L70.0289 130.077C69.9932 130.097 69.9523 130.112 69.9166 130.128L70.2281 129.969Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <g opacity="0.2">
         <path
-          d="M13.2695 129.423C13.2695 131.353 14.7145 133.278 17.5993 134.754L54.7451 153.681C60.52 156.622 69.8791 156.622 75.654 153.681L153.709 113.911C156.593 112.441 158.038 110.516 158.038 108.586V114.749C158.038 116.679 156.593 118.604 153.709 120.074L75.654 159.844C69.8791 162.785 60.52 162.785 54.7451 159.844L17.5993 140.917C14.7094 139.446 13.2695 137.516 13.2695 135.586V129.423Z"
+          d="M12.4695 128.673C12.4695 130.603 13.9145 132.528 16.7993 134.003L53.9451 152.931C59.72 155.872 69.0792 155.872 74.854 152.931L152.909 113.161C155.794 111.69 157.238 109.765 157.238 107.835V113.998C157.238 115.928 155.794 117.853 152.909 119.324L74.854 159.094C69.0792 162.035 59.72 162.035 53.9451 159.094L16.7993 140.166C13.9094 138.696 12.4695 136.766 12.4695 134.836V128.673Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.4"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
         <path
-          d="M13.2695 129.423C13.2695 127.493 14.7145 125.568 17.5993 124.098L95.654 84.3276C101.429 81.3866 110.788 81.3866 116.563 84.3276L153.709 103.255C156.599 104.726 158.038 106.656 158.038 108.586C158.038 110.516 156.593 112.441 153.709 113.911L75.654 153.682C69.8791 156.623 60.52 156.623 54.7451 153.682L17.5993 134.754C14.7094 133.283 13.2695 131.353 13.2695 129.423Z"
+          d="M12.4695 128.673C12.4695 126.743 13.9145 124.818 16.7993 123.348L94.854 83.5774C100.629 80.6363 109.988 80.6363 115.763 83.5774L152.909 102.505C155.799 103.976 157.238 105.906 157.238 107.836C157.238 109.766 155.794 111.691 152.909 113.161L74.854 152.931C69.0792 155.872 59.72 155.872 53.9451 152.931L16.7993 134.004C13.9094 132.533 12.4695 130.603 12.4695 128.673Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.4"
           strokeLinecap="round"
           strokeLinejoin="round"
@@ -39,34 +45,34 @@ export function ViewVerticalStackIllustration({ className }: TIllustrationAssetP
       </g>
       <g opacity="0.6">
         <path
-          d="M13.2695 109.954C13.2695 111.884 14.7145 113.809 17.5993 115.285L54.7451 134.212C60.52 137.153 69.8791 137.153 75.654 134.212L153.709 94.4422C156.593 92.9717 158.038 91.0467 158.038 89.1167V95.2796C158.038 97.2096 156.593 99.1346 153.709 100.605L75.654 140.375C69.8791 143.316 60.52 143.316 54.7451 140.375L17.5993 121.448C14.7094 119.977 13.2695 118.047 13.2695 116.117V109.954Z"
+          d="M12.4695 109.204C12.4695 111.134 13.9145 113.059 16.7993 114.534L53.9451 133.462C59.72 136.403 69.0792 136.403 74.854 133.462L152.909 93.692C155.794 92.2214 157.238 90.2965 157.238 88.3665V94.5293C157.238 96.4594 155.794 98.3843 152.909 99.8548L74.854 139.625C69.0792 142.566 59.72 142.566 53.9451 139.625L16.7993 120.697C13.9094 119.227 12.4695 117.297 12.4695 115.367V109.204Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.4"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
         <path
-          d="M13.2695 109.954C13.2695 108.024 14.7145 106.099 17.5993 104.629L95.654 64.8584C101.429 61.9173 110.788 61.9173 116.563 64.8584L153.709 83.7861C156.599 85.2566 158.038 87.1866 158.038 89.1167C158.038 91.0467 156.593 92.9717 153.709 94.4422L75.654 134.212C69.8791 137.153 60.52 137.153 54.7451 134.212L17.5993 115.285C14.7094 113.814 13.2695 111.884 13.2695 109.954Z"
+          d="M12.4695 109.204C12.4695 107.274 13.9145 105.349 16.7993 103.878L94.854 64.1081C100.629 61.1671 109.988 61.1671 115.763 64.1081L152.909 83.0358C155.799 84.5064 157.238 86.4364 157.238 88.3664C157.238 90.2965 155.794 92.2214 152.909 93.692L74.854 133.462C69.0792 136.403 59.72 136.403 53.9451 133.462L16.7993 114.534C13.9094 113.064 12.4695 111.134 12.4695 109.204Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.4"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
       </g>
       <path
-        d="M13.2695 90.4858C13.2695 92.4158 14.7145 94.3408 17.5993 95.8164L54.7451 114.744C60.52 117.685 69.8791 117.685 75.654 114.744L153.709 74.9739C156.593 73.5034 158.038 71.5785 158.038 69.6484V75.8113C158.038 77.7414 156.593 79.6663 153.709 81.1368L75.654 120.907C69.8791 123.848 60.52 123.848 54.7451 120.907L17.5993 101.979C14.7094 100.509 13.2695 98.5787 13.2695 96.6487V90.4858Z"
+        d="M12.4695 89.7356C12.4695 91.6656 13.9145 93.5905 16.7993 95.0662L53.9451 113.994C59.72 116.935 69.0792 116.935 74.854 113.994L152.909 74.2237C155.794 72.7532 157.238 70.8282 157.238 68.8982V75.0611C157.238 76.9911 155.794 78.9161 152.909 80.3866L74.854 120.157C69.0792 123.098 59.72 123.098 53.9451 120.157L16.7993 101.229C13.9094 99.7585 12.4695 97.8285 12.4695 95.8984V89.7356Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.4"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
       <path
-        d="M13.2695 90.4858C13.2695 88.5558 14.7145 86.6308 17.5993 85.1603L95.654 45.3901C101.429 42.4491 110.788 42.4491 116.563 45.3901L153.709 64.3178C156.599 65.7883 158.038 67.7184 158.038 69.6484C158.038 71.5785 156.593 73.5034 153.709 74.9739L75.654 114.744C69.8791 117.685 60.52 117.685 54.7451 114.744L17.5993 95.8164C14.7094 94.3459 13.2695 92.4158 13.2695 90.4858Z"
+        d="M12.4695 89.7356C12.4695 87.8055 13.9145 85.8806 16.7993 84.41L94.854 44.6399C100.629 41.6988 109.988 41.6988 115.763 44.6399L152.909 63.5676C155.799 65.0381 157.238 66.9681 157.238 68.8982C157.238 70.8282 155.794 72.7532 152.909 74.2237L74.854 113.994C69.0792 116.935 59.72 116.935 53.9451 113.994L16.7993 95.0662C13.9094 93.5956 12.4695 91.6656 12.4695 89.7356Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.4"
         strokeLinecap="round"
         strokeLinejoin="round"
@@ -74,9 +80,9 @@ export function ViewVerticalStackIllustration({ className }: TIllustrationAssetP
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M131.809 3.76634C132.958 3.17916 134.434 3.23022 136.047 4.05227C139.698 5.91084 142.654 11.0219 142.654 15.4641C142.654 17.9404 141.735 19.6867 140.285 20.427L142.634 19.2322C144.084 18.497 145.003 16.7457 145.003 14.2693C145.003 9.8271 142.041 4.72115 138.396 2.85748C136.782 2.03542 135.302 1.98437 134.158 2.57155L131.809 3.76634Z"
+        d="M131.009 3.0161C132.158 2.42891 133.634 2.47997 135.247 3.30203C138.898 5.16059 141.854 10.2716 141.854 14.7138C141.854 17.1902 140.935 18.9364 139.485 19.6768L141.834 18.482C143.284 17.7467 144.203 15.9954 144.203 13.519C144.203 9.07685 141.242 3.97091 137.596 2.10724C135.982 1.28518 134.502 1.23412 133.358 1.8213L131.009 3.0161Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.4"
         strokeLinecap="round"
         strokeLinejoin="round"
@@ -84,103 +90,103 @@ export function ViewVerticalStackIllustration({ className }: TIllustrationAssetP
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M131.809 3.76637C130.359 4.50163 129.44 6.25297 129.44 8.72935C129.44 13.1715 132.402 18.2775 136.047 20.1411C137.661 20.9632 139.141 21.0143 140.285 20.4271C141.735 19.6918 142.654 17.9405 142.654 15.4641C142.654 11.0219 139.693 5.91598 136.047 4.05231C134.434 3.23025 132.953 3.17919 131.809 3.76637Z"
+        d="M131.009 3.01613C129.559 3.75139 128.64 5.50272 128.64 7.97911C128.64 12.4213 131.602 17.5272 135.247 19.3909C136.861 20.213 138.341 20.264 139.485 19.6768C140.935 18.9416 141.854 17.1902 141.854 14.7138C141.854 10.2717 138.893 5.16573 135.247 3.30206C133.634 2.48 132.153 2.42895 131.009 3.01613Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.4"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
       <path
-        d="M134.643 8.83126C134.444 8.72914 134.28 8.44831 134.28 8.20833V6.45189C134.28 6.2068 134.444 6.09447 134.643 6.19659C134.842 6.29871 135.006 6.57954 135.006 6.81952V8.57596C135.006 8.82105 134.842 8.93338 134.643 8.83126Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M133.843 8.08101C133.644 7.9789 133.48 7.69807 133.48 7.45809V5.70164C133.48 5.45656 133.644 5.34423 133.843 5.44635C134.042 5.54847 134.206 5.82929 134.206 6.06927V7.82572C134.206 8.0708 134.042 8.18313 133.843 8.08101Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
-        d="M137.533 10.3071C137.334 10.205 137.17 9.92414 137.17 9.68416V7.92772C137.17 7.68263 137.334 7.5703 137.533 7.67242C137.732 7.77454 137.896 8.05537 137.896 8.29535V10.0518C137.896 10.2969 137.732 10.4092 137.533 10.3071Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M136.733 9.55684C136.534 9.45473 136.37 9.1739 136.37 8.93392V7.17748C136.37 6.93239 136.534 6.82006 136.733 6.92218C136.932 7.0243 137.096 7.30512 137.096 7.5451V9.30155C137.096 9.54663 136.932 9.65896 136.733 9.55684Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
-        d="M138.615 17.8841L133.561 15.3107C132.963 15.0044 132.478 14.167 132.478 13.442V7.2893C132.478 6.56426 132.963 6.21705 133.561 6.52341L138.615 9.09681C139.213 9.40316 139.698 10.2405 139.698 10.9656V17.1182C139.698 17.8433 139.213 18.1905 138.615 17.8841ZM133.561 7.40163C133.361 7.29951 133.198 7.41695 133.198 7.65693V13.8096C133.198 14.0496 133.361 14.3304 133.561 14.4325L138.615 17.0059C138.815 17.108 138.978 16.9906 138.978 16.7506V10.598C138.978 10.358 138.815 10.0771 138.615 9.97503L133.561 7.40163Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M137.815 17.1339L132.761 14.5605C132.163 14.2541 131.678 13.4168 131.678 12.6917V6.53906C131.678 5.81401 132.163 5.46681 132.761 5.77317L137.815 8.34656C138.413 8.65292 138.898 9.49029 138.898 10.2153V16.368C138.898 17.093 138.413 17.4403 137.815 17.1339ZM132.761 6.65139C132.561 6.54927 132.398 6.66671 132.398 6.90669V13.0593C132.398 13.2993 132.561 13.5802 132.761 13.6823L137.815 16.2557C138.015 16.3578 138.178 16.2404 138.178 16.0004V9.84771C138.178 9.60773 138.015 9.3269 137.815 9.22479L132.761 6.65139Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
-        d="M139.335 12.9826L132.835 9.66883C132.636 9.56671 132.473 9.28589 132.473 9.04591C132.473 8.80593 132.636 8.68849 132.835 8.79061L139.335 12.1044C139.534 12.2065 139.698 12.4873 139.698 12.7273C139.698 12.9673 139.534 13.0847 139.335 12.9826Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M138.535 12.2323L132.035 8.91859C131.836 8.81647 131.673 8.53564 131.673 8.29566C131.673 8.05568 131.836 7.93825 132.035 8.04037L138.535 11.3541C138.734 11.4562 138.898 11.7371 138.898 11.977C138.898 12.217 138.734 12.3345 138.535 12.2323Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
-        d="M52.9734 2.51989C51.7735 1.90718 50.2213 1.95824 48.5313 2.82114L10.1958 22.3565C6.37655 24.3019 3.27725 29.6478 3.27725 34.2993C3.27725 36.8931 4.24228 38.721 5.75364 39.492L3.47637 38.333C1.95991 37.562 1 35.7341 1 33.1402C1 28.4938 4.0993 23.1428 7.91855 21.1974L46.2591 1.6621C47.9492 0.79919 49.4963 0.748131 50.7013 1.36084L52.9786 2.51989H52.9734Z"
+        d="M52.1735 1.76965C50.9736 1.15694 49.4213 1.208 47.7313 2.0709L9.39582 21.6062C5.57657 23.5516 2.47726 28.8975 2.47726 33.549C2.47726 36.1429 3.44229 37.9708 4.95365 38.7418L2.67638 37.5827C1.15992 36.8117 0.200012 34.9838 0.200012 32.39C0.200012 27.7436 3.29932 22.3926 7.11857 20.4472L45.4592 0.911851C47.1492 0.0489463 48.6963 -0.00211319 49.9013 0.6106L52.1786 1.76965H52.1735Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.4"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
       <path
-        d="M52.9734 2.52027C54.4898 3.29127 55.4498 5.11919 55.4498 7.71301C55.4498 12.3594 52.3504 17.7105 48.5312 19.6558L10.1957 39.1912C8.50565 40.0541 6.95855 40.1051 5.75355 39.4924C4.23708 38.7214 3.27716 36.8935 3.27716 34.2997C3.27716 29.6533 6.37647 24.3022 10.1957 22.3569L48.5312 2.82152C50.2212 1.95861 51.7684 1.90755 52.9734 2.52027Z"
+        d="M52.1734 1.77002C53.6898 2.54102 54.6498 4.36895 54.6498 6.96277C54.6498 11.6092 51.5504 16.9602 47.7312 18.9056L9.39573 38.4409C7.70566 39.3038 6.15857 39.3549 4.95356 38.7422C3.43709 37.9712 2.47717 36.1432 2.47717 33.5494C2.47717 28.903 5.57648 23.552 9.39573 21.6066L47.7312 2.07127C49.4213 1.20837 50.9684 1.15731 52.1734 1.77002Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.4"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
       <path
-        d="M27.8317 25.3737C27.5764 25.5013 27.3671 25.3584 27.3671 25.0469V18.8585C27.3671 18.547 27.5764 18.1896 27.8317 18.062C28.087 17.9343 28.2964 18.0773 28.2964 18.3888V24.5772C28.2964 24.8886 28.087 25.246 27.8317 25.3737Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M27.0317 24.6234C26.7764 24.7511 26.5671 24.6081 26.5671 24.2967V18.1083C26.5671 17.7968 26.7764 17.4394 27.0317 17.3117C27.287 17.1841 27.4964 17.3271 27.4964 17.6385V23.8269C27.4964 24.1384 27.287 24.4958 27.0317 24.6234Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
-        d="M30.6094 21.1463C30.3541 21.2739 30.1447 21.1309 30.1447 20.8195V17.4444C30.1447 17.133 30.3541 16.7756 30.6094 16.6479C30.8647 16.5203 31.074 16.6632 31.074 16.9747V20.3497C31.074 20.6612 30.8647 21.0186 30.6094 21.1463Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M29.8094 20.396C29.5541 20.5237 29.3448 20.3807 29.3448 20.0692V16.6942C29.3448 16.3827 29.5541 16.0253 29.8094 15.8977C30.0647 15.77 30.274 15.913 30.274 16.2245V19.5995C30.274 19.9109 30.0647 20.2684 29.8094 20.396Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
-        d="M33.3819 24.2305C33.1266 24.3582 32.9173 24.2152 32.9173 23.9037V16.0253C32.9173 15.7138 33.1266 15.3564 33.3819 15.2287C33.6372 15.1011 33.8466 15.244 33.8466 15.5555V23.434C33.8466 23.7454 33.6372 24.1029 33.3819 24.2305Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M32.5819 23.4803C32.3266 23.6079 32.1173 23.4649 32.1173 23.1535V15.275C32.1173 14.9635 32.3266 14.6061 32.5819 14.4785C32.8372 14.3508 33.0466 14.4938 33.0466 14.8053V22.6837C33.0466 22.9952 32.8372 23.3526 32.5819 23.4803Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
-        d="M13.4382 29.9341C13.1829 30.0618 12.9787 29.9188 12.9787 29.6125C12.9787 29.3061 13.1829 28.9487 13.4331 28.821C13.6884 28.6883 13.8927 28.8364 13.8927 29.1427C13.8927 29.4491 13.6884 29.8065 13.4331 29.9341H13.4382Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M12.6382 29.1839C12.3829 29.3115 12.1787 29.1686 12.1787 28.8622C12.1787 28.5559 12.3829 28.1984 12.6331 28.0708C12.8884 27.938 13.0927 28.0861 13.0927 28.3925C13.0927 28.6988 12.8884 29.0562 12.6331 29.1839H12.6382Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
-        d="M13.4382 33.2835C13.1829 33.4112 12.9787 33.2682 12.9787 32.9618C12.9787 32.6555 13.1829 32.2981 13.4331 32.1704C13.6884 32.0377 13.8927 32.1857 13.8927 32.4921C13.8927 32.7984 13.6884 33.1559 13.4331 33.2835H13.4382Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M12.6382 32.5333C12.3829 32.6609 12.1787 32.5179 12.1787 32.2116C12.1787 31.9052 12.3829 31.5478 12.6331 31.4202C12.8884 31.2874 13.0927 31.4355 13.0927 31.7418C13.0927 32.0482 12.8884 32.4056 12.6331 32.5333H12.6382Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
-        d="M13.4382 26.5845C13.1829 26.7122 12.9787 26.5692 12.9787 26.2629C12.9787 25.9565 13.1829 25.5991 13.4331 25.4714C13.6884 25.3387 13.8927 25.4868 13.8927 25.7931C13.8927 26.0995 13.6884 26.4569 13.4331 26.5845H13.4382Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M12.6382 25.8343C12.3829 25.9619 12.1787 25.819 12.1787 25.5126C12.1787 25.2063 12.3829 24.8488 12.6331 24.7212C12.8884 24.5884 13.0927 24.7365 13.0927 25.0429C13.0927 25.3492 12.8884 25.7066 12.6331 25.8343H12.6382Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
-        d="M21.6946 25.7266L15.7308 28.7646C15.4755 28.8923 15.2713 28.7493 15.2713 28.4378C15.2713 28.1264 15.4755 27.774 15.7308 27.6464L21.6946 24.6084C21.9499 24.4807 22.1541 24.6237 22.1541 24.9351C22.1541 25.2466 21.9499 25.5989 21.6946 25.7266Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M20.8946 24.9763L14.9308 28.0144C14.6755 28.142 14.4713 27.999 14.4713 27.6876C14.4713 27.3761 14.6755 27.0238 14.9308 26.8962L20.8946 23.8581C21.1499 23.7305 21.3541 23.8734 21.3541 24.1849C21.3541 24.4964 21.1499 24.8487 20.8946 24.9763Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
-        d="M21.6946 29.0762L15.7308 32.1142C15.4755 32.2419 15.2713 32.0989 15.2713 31.7874C15.2713 31.476 15.4755 31.1237 15.7308 30.996L21.6946 27.958C21.9499 27.8303 22.1541 27.9733 22.1541 28.2848C22.1541 28.5962 21.9499 28.9485 21.6946 29.0762Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M20.8946 28.3259L14.9308 31.364C14.6755 31.4916 14.4713 31.3487 14.4713 31.0372C14.4713 30.7257 14.6755 30.3734 14.9308 30.2458L20.8946 27.2077C21.1499 27.0801 21.3541 27.223 21.3541 27.5345C21.3541 27.846 21.1499 28.1983 20.8946 28.3259Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
-        d="M21.6946 22.3772L15.7308 25.4152C15.4755 25.5429 15.2713 25.3999 15.2713 25.0885C15.2713 24.777 15.4755 24.4247 15.7308 24.297L21.6946 21.259C21.9499 21.1314 22.1541 21.2743 22.1541 21.5858C22.1541 21.8972 21.9499 22.2496 21.6946 22.3772Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M20.8946 21.627L14.9308 24.665C14.6755 24.7926 14.4713 24.6497 14.4713 24.3382C14.4713 24.0268 14.6755 23.6744 14.9308 23.5468L20.8946 20.5088C21.1499 20.3811 21.3541 20.5241 21.3541 20.8355C21.3541 21.147 21.1499 21.4993 20.8946 21.627Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
-        d="M46.4737 17.3022L41.4188 19.8756C40.8214 20.1819 40.3364 19.8347 40.3364 19.1097V12.957C40.3364 12.232 40.8214 11.3895 41.4188 11.0883L46.4737 8.51487C47.0711 8.20851 47.5562 8.55571 47.5562 9.28076V15.4334C47.5562 16.1585 47.0711 17.0009 46.4737 17.3022ZM41.4188 11.9665C41.2197 12.0686 41.0563 12.3494 41.0563 12.5894V18.7421C41.0563 18.9821 41.2197 19.0995 41.4188 18.9974L46.4737 16.424C46.6729 16.3219 46.8362 16.041 46.8362 15.801V9.64839C46.8362 9.40841 46.6729 9.29097 46.4737 9.39309L41.4188 11.9665Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M45.6737 16.552L40.6188 19.1253C40.0214 19.4317 39.5364 19.0845 39.5364 18.3595V12.2068C39.5364 11.4817 40.0214 10.6393 40.6188 10.338L45.6737 7.76462C46.2711 7.45827 46.7562 7.80547 46.7562 8.53051V14.6832C46.7562 15.4082 46.2711 16.2507 45.6737 16.552ZM40.6188 11.2162C40.4197 11.3184 40.2563 11.5992 40.2563 11.8392V17.9918C40.2563 18.2318 40.4197 18.3492 40.6188 18.2471L45.6737 15.6737C45.8729 15.5716 46.0362 15.2908 46.0362 15.0508V8.89814C46.0362 8.65816 45.8729 8.54073 45.6737 8.64284L40.6188 11.2162Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
-        d="M45.3913 12.1402L42.8639 13.4269C42.6647 13.5291 42.5013 13.4167 42.5013 13.1716C42.5013 12.9266 42.6647 12.6508 42.8639 12.5487L45.3913 11.262C45.5905 11.1599 45.7538 11.2722 45.7538 11.5173C45.7538 11.7624 45.5905 12.0381 45.3913 12.1402Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M44.5913 11.39L42.0639 12.6767C41.8648 12.7788 41.7014 12.6665 41.7014 12.4214C41.7014 12.1763 41.8648 11.9006 42.0639 11.7985L44.5913 10.5118C44.7905 10.4097 44.9538 10.522 44.9538 10.7671C44.9538 11.0122 44.7905 11.2879 44.5913 11.39Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
-        d="M44.6662 14.2643L42.5013 15.3672C42.3021 15.4693 42.1388 15.3569 42.1388 15.1119C42.1388 14.8668 42.3021 14.591 42.5013 14.4889L44.6662 13.386C44.8653 13.2839 45.0287 13.3963 45.0287 13.6413C45.0287 13.8864 44.8653 14.1621 44.6662 14.2643Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M43.8662 13.514L41.7013 14.6169C41.5021 14.719 41.3388 14.6067 41.3388 14.3616C41.3388 14.1165 41.5021 13.8408 41.7013 13.7387L43.8662 12.6358C44.0653 12.5337 44.2287 12.646 44.2287 12.8911C44.2287 13.1362 44.0653 13.4119 43.8662 13.514Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
-        d="M45.3913 15.6581L43.5838 16.5771C43.3846 16.6793 43.2213 16.5669 43.2213 16.3218C43.2213 16.0768 43.3846 15.801 43.5838 15.6989L45.3913 14.7798C45.5904 14.6777 45.7538 14.7901 45.7538 15.0351C45.7538 15.2802 45.5904 15.5559 45.3913 15.6581Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M44.5913 14.9078L42.7838 15.8269C42.5846 15.929 42.4213 15.8167 42.4213 15.5716C42.4213 15.3265 42.5846 15.0508 42.7838 14.9487L44.5913 14.0296C44.7904 13.9275 44.9538 14.0398 44.9538 14.2849C44.9538 14.53 44.7904 14.8057 44.5913 14.9078Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M147.806 26.2112C148.955 25.624 150.431 25.675 152.044 26.4971C155.695 28.3557 158.651 33.4667 158.651 37.9089C158.651 40.3853 157.732 42.1315 156.282 42.8719L158.631 41.6771C160.081 40.9418 161 39.1905 161 36.7141C161 32.2719 158.039 27.166 154.393 25.3023C152.779 24.4802 151.299 24.4292 150.155 25.0164L147.806 26.2112Z"
+        d="M147.006 25.4609C148.155 24.8737 149.631 24.9248 151.244 25.7469C154.895 27.6054 157.851 32.7165 157.851 37.1586C157.851 39.635 156.932 41.3813 155.482 42.1216L157.831 40.9268C159.281 40.1916 160.2 38.4402 160.2 35.9638C160.2 31.5217 157.239 26.4157 153.593 24.5521C151.979 23.73 150.499 23.6789 149.355 24.2661L147.006 25.4609Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.4"
         strokeLinecap="round"
         strokeLinejoin="round"
@@ -188,67 +194,67 @@ export function ViewVerticalStackIllustration({ className }: TIllustrationAssetP
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M147.806 26.2112C146.356 26.9465 145.437 28.6978 145.437 31.1742C145.437 35.6163 148.399 40.7223 152.044 42.586C153.658 43.408 155.138 43.4591 156.282 42.8719C157.732 42.1366 158.651 40.3853 158.651 37.9089C158.651 33.4667 155.69 28.3608 152.044 26.4971C150.431 25.6751 148.95 25.624 147.806 26.2112Z"
+        d="M147.006 25.461C145.556 26.1962 144.637 27.9475 144.637 30.4239C144.637 34.8661 147.599 39.972 151.244 41.8357C152.858 42.6578 154.338 42.7088 155.482 42.1216C156.932 41.3864 157.851 39.6351 157.851 37.1587C157.851 32.7165 154.89 27.6106 151.244 25.7469C149.631 24.9248 148.15 24.8738 147.006 25.461Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.4"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
       <path
-        d="M154.664 40.4408L149.609 37.8674C149.011 37.561 148.526 36.7236 148.526 35.9986V29.8459C148.526 29.1209 149.011 28.7737 149.609 29.0801L154.664 31.6534C155.261 31.9598 155.746 32.7972 155.746 33.5222V39.6749C155.746 40.3999 155.261 40.7471 154.664 40.4408ZM149.609 29.9532C149.41 29.851 149.246 29.9685 149.246 30.2085V36.3611C149.246 36.6011 149.41 36.8819 149.609 36.9841L154.664 39.5575C154.863 39.6596 155.026 39.5421 155.026 39.3022V33.1495C155.026 32.9095 154.863 32.6287 154.664 32.5266L149.609 29.9532Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M153.864 39.6905L148.809 37.1171C148.211 36.8108 147.726 35.9734 147.726 35.2484V29.0957C147.726 28.3707 148.211 28.0235 148.809 28.3298L153.864 30.9032C154.461 31.2096 154.946 32.0469 154.946 32.772V38.9246C154.946 39.6497 154.461 39.9969 153.864 39.6905ZM148.809 29.2029C148.61 29.1008 148.446 29.2182 148.446 29.4582V35.6109C148.446 35.8509 148.61 36.1317 148.809 36.2338L153.864 38.8072C154.063 38.9093 154.226 38.7919 154.226 38.5519V32.3992C154.226 32.1593 154.063 31.8784 153.864 31.7763L148.809 29.2029Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
-        d="M155.389 35.5341L148.889 32.2203C148.69 32.1182 148.526 31.8374 148.526 31.5974C148.526 31.3574 148.69 31.24 148.889 31.3421L155.389 34.6559C155.588 34.758 155.751 35.0388 155.751 35.2788C155.751 35.5188 155.588 35.6362 155.389 35.5341Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M154.589 34.7839L148.089 31.4701C147.89 31.368 147.726 31.0872 147.726 30.8472C147.726 30.6072 147.89 30.4898 148.089 30.5919L154.589 33.9056C154.788 34.0078 154.951 34.2886 154.951 34.5286C154.951 34.7685 154.788 34.886 154.589 34.7839Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
-        d="M155.389 38.1689L148.889 34.8551C148.69 34.753 148.526 34.4722 148.526 34.2322C148.526 33.9922 148.69 33.8748 148.889 33.9769L155.389 37.2906C155.588 37.3928 155.751 37.6736 155.751 37.9136C155.751 38.1536 155.588 38.271 155.389 38.1689Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M154.589 37.4186L148.089 34.1049C147.89 34.0027 147.726 33.7219 147.726 33.4819C147.726 33.242 147.89 33.1245 148.089 33.2266L154.589 36.5404C154.788 36.6425 154.951 36.9233 154.951 37.1633C154.951 37.4033 154.788 37.5207 154.589 37.4186Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
-        d="M151.054 38.5975C150.855 38.4954 150.691 38.2146 150.691 37.9746V32.7002C150.691 32.4551 150.855 32.3428 151.054 32.4449C151.253 32.547 151.416 32.8278 151.416 33.0678V38.3422C151.416 38.5873 151.253 38.6997 151.054 38.5975Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M150.254 37.8473C150.055 37.7452 149.891 37.4644 149.891 37.2244V31.9499C149.891 31.7049 150.055 31.5925 150.254 31.6946C150.453 31.7968 150.616 32.0776 150.616 32.3176V37.592C150.616 37.8371 150.453 37.9494 150.254 37.8473Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
-        d="M153.219 39.7057C153.02 39.6036 152.856 39.3228 152.856 39.0828V33.8083C152.856 33.5632 153.02 33.4509 153.219 33.553C153.418 33.6552 153.581 33.936 153.581 34.176V39.4504C153.581 39.6955 153.418 39.8078 153.219 39.7057Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M152.419 38.9555C152.22 38.8533 152.056 38.5725 152.056 38.3325V33.0581C152.056 32.813 152.22 32.7007 152.419 32.8028C152.618 32.9049 152.781 33.1857 152.781 33.4257V38.7002C152.781 38.9452 152.618 39.0576 152.419 38.9555Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M82.2561 58.3329C80.3158 58.3329 78.4827 57.9448 77.0939 57.2351L51.0332 43.9596C49.5371 43.1988 48.71 42.1419 48.71 40.988V35.882C48.71 34.7332 49.532 33.6814 51.0281 32.9155L77.0888 19.64C78.4776 18.9303 80.3107 18.5422 82.2509 18.5422C84.1912 18.5422 86.0293 18.9303 87.4182 19.64L113.474 32.9155C114.97 33.6763 115.797 34.7332 115.797 35.8871V40.9931C115.797 42.1419 114.975 43.1988 113.474 43.9596L87.4182 57.2351C86.0293 57.9448 84.1963 58.3329 82.2509 58.3329H82.2561ZM79.5754 44.7613C80.2852 45.1238 81.2349 45.3229 82.2561 45.3229C83.2772 45.3229 84.232 45.1238 84.9418 44.7613L97.3543 38.435L84.9418 32.1138C84.232 31.7513 83.2772 31.5522 82.2561 31.5522C81.2349 31.5522 80.2801 31.7513 79.5754 32.1138L67.1628 38.435L79.5754 44.7613Z"
+        d="M81.4561 57.5826C79.5158 57.5826 77.6827 57.1946 76.2939 56.4848L50.2332 43.2094C48.7371 42.4486 47.91 41.3917 47.91 40.2377V35.1318C47.91 33.9829 48.732 32.9311 50.2281 32.1652L76.2888 18.8898C77.6776 18.18 79.5107 17.792 81.451 17.792C83.3912 17.792 85.2294 18.18 86.6182 18.8898L112.674 32.1652C114.17 32.926 114.997 33.9829 114.997 35.1369V40.2428C114.997 41.3917 114.175 42.4486 112.674 43.2094L86.6182 56.4848C85.2294 57.1946 83.3963 57.5826 81.451 57.5826H81.4561ZM78.7754 44.011C79.4852 44.3735 80.4349 44.5727 81.4561 44.5727C82.4773 44.5727 83.432 44.3735 84.1418 44.011L96.5543 37.6848L84.1418 31.3636C83.432 31.0011 82.4773 30.8019 81.4561 30.8019C80.4349 30.8019 79.4801 31.0011 78.7754 31.3636L66.3629 37.6848L78.7754 44.011Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
       />
       <path
-        d="M82.256 19.0529C84.0431 19.0529 85.8251 19.4001 87.1884 20.0945L113.244 33.37C114.607 34.0644 115.286 34.9784 115.286 35.8872V40.9932C115.286 41.902 114.607 42.8109 113.244 43.5053L87.1884 56.7808C85.8251 57.4752 84.038 57.8224 82.256 57.8224C80.4741 57.8224 78.687 57.4752 77.3237 56.7808L51.2629 43.5053C49.8996 42.8109 49.2205 41.8969 49.2205 40.9881V35.8821C49.2205 34.9733 49.9047 34.0644 51.2629 33.37L77.3237 20.0945C78.687 19.4001 80.4689 19.0529 82.256 19.0529ZM82.256 45.8336C83.313 45.8336 84.3648 45.6294 85.1715 45.2158L98.4776 38.4351L85.1715 31.6595C84.3648 31.251 83.3079 31.0417 82.256 31.0417C81.2042 31.0417 80.1473 31.2459 79.3405 31.6595L66.0344 38.4351L79.3405 45.2158C80.1473 45.6243 81.1991 45.8336 82.256 45.8336ZM82.256 18.0317C80.2341 18.0317 78.3193 18.4402 76.859 19.1857L50.7983 32.4611C49.1235 33.3189 48.1993 34.5342 48.1993 35.8821V40.9881C48.1993 41.7744 48.5363 43.2653 50.7983 44.4142L76.859 57.6896C78.3142 58.4351 80.229 58.8435 82.2509 58.8435C84.2729 58.8435 86.1876 58.4351 87.6479 57.6896L113.704 44.4142C115.965 43.2602 116.302 41.7744 116.302 40.9932V35.8872C116.302 35.1009 115.965 33.61 113.704 32.4611L87.6479 19.1857C86.1876 18.4402 84.2729 18.0317 82.2509 18.0317H82.256ZM68.2912 38.4351L79.8103 32.5684C80.4383 32.2467 81.3318 32.0629 82.2611 32.0629C83.1904 32.0629 84.0839 32.2467 84.7171 32.5684L96.2361 38.4351L84.7171 44.3069C84.089 44.6286 83.1904 44.8124 82.2611 44.8124C81.3318 44.8124 80.4383 44.6286 79.8103 44.3069L68.2912 38.4351Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        d="M81.456 18.3027C83.2431 18.3027 85.0251 18.6499 86.3884 19.3443L112.444 32.6198C113.807 33.3142 114.486 34.2281 114.486 35.137V40.2429C114.486 41.1518 113.807 42.0606 112.444 42.755L86.3884 56.0305C85.0251 56.7249 83.238 57.0721 81.456 57.0721C79.6741 57.0721 77.887 56.7249 76.5237 56.0305L50.4629 42.755C49.0996 42.0606 48.4205 41.1467 48.4205 40.2378V35.1319C48.4205 34.223 49.1047 33.3142 50.4629 32.6198L76.5237 19.3443C77.887 18.6499 79.669 18.3027 81.456 18.3027ZM81.456 45.0834C82.513 45.0834 83.5648 44.8791 84.3715 44.4655L97.6776 37.6848L84.3715 30.9093C83.5648 30.5008 82.5079 30.2914 81.456 30.2914C80.4042 30.2914 79.3473 30.4957 78.5405 30.9093L65.2344 37.6848L78.5405 44.4655C79.3473 44.874 80.3991 45.0834 81.456 45.0834ZM81.456 17.2815C79.4341 17.2815 77.5193 17.69 76.059 18.4354L49.9983 31.7109C48.3235 32.5687 47.3994 33.7839 47.3994 35.1319V40.2378C47.3994 41.0241 47.7363 42.5151 49.9983 43.6639L76.059 56.9394C77.5142 57.6848 79.429 58.0933 81.4509 58.0933C83.4729 58.0933 85.3876 57.6848 86.8479 56.9394L112.904 43.6639C115.165 42.51 115.503 41.0241 115.503 40.2429V35.137C115.503 34.3507 115.165 32.8597 112.904 31.7109L86.8479 18.4354C85.3876 17.69 83.4729 17.2815 81.4509 17.2815H81.456ZM67.4913 37.6848L79.0103 31.8181C79.6383 31.4964 80.5318 31.3126 81.4611 31.3126C82.3904 31.3126 83.2839 31.4964 83.9171 31.8181L95.4361 37.6848L83.9171 43.5567C83.289 43.8784 82.3904 44.0622 81.4611 44.0622C80.5318 44.0622 79.6383 43.8784 79.0103 43.5567L67.4913 37.6848Z"
+        fill="var(--illustration-stroke-tertiary)"
       />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M82.0263 93.9614C79.6163 93.9614 77.4871 93.5785 76.1851 92.9147L50.2724 79.7158C49.9915 79.5728 49.7362 79.4197 49.486 79.2461C49.4707 79.2359 49.4554 79.2205 49.4401 79.2103C48.8682 78.7099 48.567 78.1228 48.567 77.51V72.4041C48.567 71.5157 49.1899 70.714 50.3183 70.1371C51.3395 69.6163 52.6874 69.3303 54.112 69.3303C55.3374 69.3303 56.5374 69.5499 57.4922 69.9481C57.6147 70.0043 57.8343 70.1166 58.304 70.3566L77.5687 80.1754C78.8146 80.8085 80.4842 81.1557 82.2662 81.1557C84.0482 81.1557 85.723 80.8085 86.9688 80.1754L106.228 70.3617C106.708 70.1166 106.923 69.9992 107.045 69.9532C108 69.5499 109.2 69.3303 110.42 69.3303C111.845 69.3303 113.188 69.6163 114.209 70.1371C115.337 70.7089 115.96 71.5157 115.96 72.4041V77.51C115.96 78.133 115.644 78.7304 115.052 79.2359C114.781 79.4299 114.536 79.5728 114.26 79.7158L88.6691 92.7513C87.1833 93.507 84.7069 93.9614 82.0364 93.9614H82.0263Z"
+        d="M81.2263 93.2112C78.8163 93.2112 76.6871 92.8282 75.3851 92.1644L49.4724 78.9656C49.1915 78.8226 48.9362 78.6694 48.686 78.4958C48.6707 78.4856 48.6554 78.4703 48.6401 78.4601C48.0682 77.9597 47.767 77.3725 47.767 76.7598V71.6539C47.767 70.7654 48.3899 69.9638 49.5183 69.3868C50.5395 68.866 51.8875 68.5801 53.312 68.5801C54.5374 68.5801 55.7374 68.7996 56.6922 69.1979C56.8147 69.2541 57.0343 69.3664 57.504 69.6064L76.7688 79.4251C78.0146 80.0582 79.6843 80.4054 81.4662 80.4054C83.2482 80.4054 84.923 80.0582 86.1688 79.4251L105.428 69.6115C105.908 69.3664 106.123 69.249 106.245 69.203C107.2 68.7996 108.4 68.5801 109.62 68.5801C111.045 68.5801 112.388 68.866 113.409 69.3868C114.537 69.9587 115.16 70.7654 115.16 71.6539V76.7598C115.16 77.3827 114.844 77.9801 114.252 78.4856C113.981 78.6796 113.736 78.8226 113.46 78.9656L87.8691 92.001C86.3833 92.7567 83.9069 93.2112 81.2365 93.2112H81.2263Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
       />
       <path
-        d="M110.415 69.8412C111.702 69.8412 112.989 70.0914 113.969 70.5918C114.955 71.0922 115.445 71.7457 115.445 72.4044V77.5103C115.445 77.9699 115.2 78.4345 114.715 78.8481C114.495 79.0013 114.27 79.134 114.02 79.2617L113.407 79.5731L88.4291 92.2972C86.9535 93.0477 84.4618 93.4511 82.0263 93.4511C79.8563 93.4511 77.7322 93.1345 76.4149 92.4606L51.1455 79.5885L50.5022 79.2617C50.2418 79.1289 50.0018 78.986 49.772 78.8277C49.3073 78.4192 49.0725 77.9648 49.0725 77.5103V72.4044C49.0725 71.7457 49.5626 71.0922 50.543 70.5918C51.5284 70.0914 52.8152 69.8412 54.1019 69.8412C55.2303 69.8412 56.3587 70.0352 57.288 70.4182C57.2931 70.4182 58.0641 70.8114 58.0641 70.8114L77.3288 80.6301C78.6921 81.3245 80.4741 81.6666 82.2611 81.6666C84.0482 81.6666 85.8302 81.3194 87.1935 80.6301L106.453 70.8165C106.453 70.8165 107.224 70.4182 107.234 70.4182C108.159 70.0301 109.287 69.8412 110.415 69.8412ZM110.415 68.82C109.108 68.82 107.873 69.0498 106.841 69.4787C106.683 69.5502 106.438 69.6778 105.983 69.9127L86.7288 79.7212C85.5698 80.3084 83.941 80.6454 82.2561 80.6454C80.5711 80.6454 78.9474 80.3084 77.7884 79.7161L58.5236 69.8974C58.0743 69.6676 57.8343 69.5451 57.676 69.4736C56.6446 69.0396 55.409 68.8098 54.0967 68.8098C52.5956 68.8098 51.1659 69.1162 50.0733 69.6727C48.3066 70.5714 48.0462 71.7662 48.0462 72.3942V77.5001C48.0462 78.0312 48.23 78.8226 49.0929 79.5834C49.1236 79.6089 49.1542 79.6344 49.1899 79.6599C49.4605 79.8438 49.7363 80.0123 50.0375 80.1603L50.6809 80.4871L75.9502 93.3592C77.8292 94.3191 80.5609 94.4621 82.0263 94.4621C84.7733 94.4621 87.3416 93.9872 88.8938 93.1958L113.872 80.4718L114.485 80.1603C114.781 80.0072 115.046 79.8489 115.302 79.6753C115.327 79.6548 115.353 79.6344 115.378 79.614C116.277 78.8481 116.466 78.0414 116.466 77.5001V72.3942C116.466 71.7611 116.2 70.5714 114.434 69.6727C113.346 69.1162 111.917 68.8098 110.415 68.8098V68.82Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        d="M109.615 69.091C110.902 69.091 112.189 69.3412 113.169 69.8415C114.155 70.3419 114.645 70.9955 114.645 71.6542V76.7601C114.645 77.2196 114.4 77.6843 113.915 78.0979C113.695 78.251 113.47 78.3838 113.22 78.5114L112.607 78.8229L87.6292 91.5469C86.1535 92.2975 83.6618 92.7009 81.2263 92.7009C79.0563 92.7009 76.9322 92.3843 75.6149 91.7103L50.3455 78.8382L49.7022 78.5114C49.4418 78.3787 49.2018 78.2357 48.972 78.0774C48.5074 77.669 48.2725 77.2145 48.2725 76.7601V71.6542C48.2725 70.9955 48.7627 70.3419 49.743 69.8415C50.7284 69.3412 52.0152 69.091 53.3019 69.091C54.4303 69.091 55.5587 69.285 56.488 69.6679C56.4931 69.6679 57.2641 70.0611 57.2641 70.0611L76.5288 79.8798C77.8921 80.5742 79.6741 80.9163 81.4612 80.9163C83.2482 80.9163 85.0302 80.5691 86.3935 79.8798L105.653 70.0662C105.653 70.0662 106.424 69.6679 106.434 69.6679C107.359 69.2799 108.487 69.091 109.615 69.091ZM109.615 68.0698C108.308 68.0698 107.073 68.2996 106.041 68.7285C105.883 68.7999 105.638 68.9276 105.183 69.1625L85.9289 78.971C84.7698 79.5582 83.141 79.8952 81.4561 79.8952C79.7711 79.8952 78.1474 79.5582 76.9884 78.9659L57.7236 69.1471C57.2743 68.9174 57.0343 68.7948 56.876 68.7233C55.8446 68.2893 54.609 68.0596 53.2968 68.0596C51.7956 68.0596 50.3659 68.3659 49.2733 68.9225C47.5066 69.8211 47.2462 71.0159 47.2462 71.6439V76.7499C47.2462 77.2809 47.43 78.0723 48.2929 78.8331C48.3236 78.8586 48.3542 78.8842 48.3899 78.9097C48.6606 79.0935 48.9363 79.262 49.2375 79.4101L49.8809 79.7369L75.1502 92.609C77.0292 93.5689 79.7609 93.7118 81.2263 93.7118C83.9733 93.7118 86.5416 93.237 88.0938 92.4456L113.072 79.7216L113.685 79.4101C113.981 79.2569 114.246 79.0986 114.502 78.925C114.527 78.9046 114.553 78.8842 114.578 78.8638C115.477 78.0979 115.666 77.2911 115.666 76.7499V71.6439C115.666 71.0108 115.4 69.8211 113.634 68.9225C112.546 68.3659 111.117 68.0596 109.615 68.0596V68.0698Z"
+        fill="var(--illustration-stroke-tertiary)"
       />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M82.0262 76.1474C79.6162 76.1474 77.487 75.7645 76.1799 75.1007L50.2672 61.9018C49.9864 61.7589 49.7311 61.6057 49.4809 61.4321C49.4656 61.4219 49.4502 61.4066 49.4349 61.3964C48.8631 60.896 48.5618 60.3088 48.5618 59.6961V54.5901C48.5618 53.7017 49.1847 52.9001 50.3131 52.3231C51.3343 51.8023 52.6823 51.5164 54.1069 51.5164C55.3323 51.5164 56.5322 51.7359 57.487 52.1342C57.6096 52.1903 57.8291 52.3027 58.2988 52.5427L77.5636 62.3614C78.8095 62.9945 80.4791 63.3417 82.2611 63.3417C84.043 63.3417 85.7178 62.9945 86.9637 62.3614L106.223 52.5478C106.703 52.3027 106.918 52.1852 107.04 52.1393C107.995 51.7359 109.195 51.5164 110.415 51.5164C111.84 51.5164 113.183 51.8023 114.204 52.3231C115.332 52.895 115.955 53.7017 115.955 54.5901V59.6961C115.955 60.319 115.639 60.9164 115.046 61.4219C114.776 61.6159 114.531 61.7589 114.255 61.9018L88.6639 74.9373C87.1781 75.693 84.7017 76.1474 82.0313 76.1474H82.0262Z"
+        d="M81.2262 75.3972C78.8162 75.3972 76.687 75.0142 75.3799 74.3505L49.4672 61.1516C49.1864 61.0086 48.9311 60.8555 48.6809 60.6819C48.6656 60.6716 48.6503 60.6563 48.6349 60.6461C48.0631 60.1457 47.7618 59.5586 47.7618 58.9458V53.8399C47.7618 52.9515 48.3847 52.1498 49.5131 51.5729C50.5343 51.052 51.8823 50.7661 53.3069 50.7661C54.5323 50.7661 55.7322 50.9857 56.687 51.3839C56.8096 51.4401 57.0291 51.5524 57.4989 51.7924L76.7636 61.6111C78.0095 62.2443 79.6791 62.5915 81.4611 62.5915C83.243 62.5915 84.9178 62.2443 86.1637 61.6111L105.423 51.7975C105.903 51.5524 106.118 51.435 106.24 51.389C107.195 50.9857 108.395 50.7661 109.615 50.7661C111.04 50.7661 112.383 51.052 113.404 51.5729C114.532 52.1447 115.155 52.9515 115.155 53.8399V58.9458C115.155 59.5688 114.839 60.1662 114.246 60.6716C113.976 60.8657 113.731 61.0086 113.455 61.1516L87.864 74.1871C86.3781 74.9428 83.9017 75.3972 81.2313 75.3972H81.2262Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
       />
       <path
-        d="M110.415 52.0272C111.702 52.0272 112.989 52.2774 113.969 52.7778C114.955 53.2782 115.445 53.9318 115.445 54.5904V59.6964C115.445 60.1559 115.2 60.6206 114.715 61.0341C114.495 61.1873 114.27 61.3201 114.02 61.4477L113.407 61.7592L88.4291 74.4832C86.9535 75.2338 84.4618 75.6371 82.0263 75.6371C79.8563 75.6371 77.7322 75.3206 76.4149 74.6466L51.1455 61.7745L50.5022 61.4477C50.2418 61.315 50.0018 61.172 49.772 61.0137C49.3073 60.6052 49.0725 60.1508 49.0725 59.6964V54.5904C49.0725 53.9318 49.5626 53.2782 50.543 52.7778C51.5284 52.2774 52.8152 52.0272 54.1019 52.0272C55.2303 52.0272 56.3587 52.2213 57.288 52.6042C57.2931 52.6042 58.0641 52.9974 58.0641 52.9974L77.3288 62.8161C78.6921 63.5054 80.4741 63.8526 82.2611 63.8526C84.0482 63.8526 85.8302 63.5054 87.1935 62.8161L106.453 53.0025C106.453 53.0025 107.224 52.6042 107.234 52.6042C108.159 52.2162 109.287 52.0272 110.415 52.0272ZM110.415 51.0061C109.108 51.0061 107.873 51.2358 106.841 51.6647C106.683 51.7362 106.438 51.8639 105.983 52.0987L86.7288 61.9073C85.5698 62.4944 83.941 62.8314 82.2561 62.8314C80.5711 62.8314 78.9474 62.4944 77.7884 61.9021L58.5236 52.0834C58.0743 51.8536 57.8343 51.7311 57.676 51.6596C56.6446 51.2256 55.409 50.9958 54.0967 50.9958C52.5956 50.9958 51.1659 51.3022 50.0733 51.8588C48.3066 52.7574 48.0462 53.9522 48.0462 54.5802V59.6862C48.0462 60.2172 48.23 61.0086 49.0929 61.7694C49.1236 61.7949 49.1542 61.8205 49.1899 61.8409C49.4605 62.0247 49.7363 62.1932 50.0375 62.3464L50.6809 62.6731L75.9502 75.5452C77.8292 76.5051 80.5609 76.6481 82.0263 76.6481C84.7733 76.6481 87.3416 76.1733 88.8938 75.3818L113.872 62.6578L114.485 62.3464C114.781 62.1932 115.052 62.0349 115.302 61.8613C115.327 61.8409 115.353 61.8204 115.378 61.8C116.277 61.0341 116.466 60.2274 116.466 59.6862V54.5802C116.466 53.9471 116.2 52.7574 114.434 51.8588C113.346 51.3022 111.917 50.9958 110.415 50.9958V51.0061Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        d="M109.615 51.277C110.902 51.277 112.189 51.5272 113.169 52.0276C114.155 52.528 114.645 53.1815 114.645 53.8402V58.9461C114.645 59.4057 114.4 59.8703 113.915 60.2839C113.695 60.4371 113.47 60.5698 113.22 60.6975L112.607 61.0089L87.6292 73.7329C86.1535 74.4835 83.6618 74.8869 81.2263 74.8869C79.0563 74.8869 76.9322 74.5703 75.6149 73.8963L50.3455 61.0243L49.7022 60.6975C49.4418 60.5647 49.2018 60.4218 48.972 60.2635C48.5074 59.855 48.2725 59.4006 48.2725 58.9461V53.8402C48.2725 53.1815 48.7627 52.528 49.743 52.0276C50.7284 51.5272 52.0152 51.277 53.3019 51.277C54.4303 51.277 55.5587 51.471 56.488 51.854C56.4931 51.854 57.2641 52.2471 57.2641 52.2471L76.5288 62.0659C77.8921 62.7552 79.6741 63.1024 81.4612 63.1024C83.2482 63.1024 85.0302 62.7552 86.3935 62.0659L105.653 52.2522C105.653 52.2522 106.424 51.854 106.434 51.854C107.359 51.4659 108.487 51.277 109.615 51.277ZM109.615 50.2558C108.308 50.2558 107.073 50.4856 106.041 50.9145C105.883 50.986 105.638 51.1136 105.183 51.3485L85.9289 61.157C84.7698 61.7442 83.141 62.0812 81.4561 62.0812C79.7711 62.0812 78.1474 61.7442 76.9884 61.1519L57.7236 51.3332C57.2743 51.1034 57.0343 50.9809 56.876 50.9094C55.8446 50.4754 54.609 50.2456 53.2968 50.2456C51.7956 50.2456 50.3659 50.552 49.2733 51.1085C47.5066 52.0072 47.2462 53.2019 47.2462 53.83V58.9359C47.2462 59.4669 47.43 60.2584 48.2929 61.0191C48.3236 61.0447 48.3542 61.0702 48.3899 61.0906C48.6606 61.2744 48.9363 61.4429 49.2375 61.5961L49.8809 61.9229L75.1502 74.795C77.0292 75.7549 79.7609 75.8979 81.2263 75.8979C83.9733 75.8979 86.5416 75.423 88.0938 74.6316L113.072 61.9076L113.685 61.5961C113.981 61.4429 114.252 61.2847 114.502 61.1111C114.527 61.0906 114.553 61.0702 114.578 61.0498C115.477 60.2839 115.666 59.4772 115.666 58.9359V53.83C115.666 53.1968 115.4 52.0072 113.634 51.1085C112.546 50.552 111.117 50.2456 109.615 50.2456V50.2558Z"
+        fill="var(--illustration-stroke-tertiary)"
       />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M101.786 35.8865C101.786 35.3453 101.383 34.8091 100.576 34.3956L85.1765 26.5528C83.563 25.7308 80.9539 25.7308 79.3455 26.5528L63.946 34.3956C63.1392 34.8091 62.7359 35.3453 62.7359 35.8814V40.9873C62.7359 40.4512 63.1392 39.9151 63.946 39.5015L79.3455 31.6588C80.9539 30.8367 83.563 30.8367 85.1765 31.6588L100.576 39.5015C101.383 39.9151 101.786 40.4512 101.786 40.9924V35.8865Z"
+        d="M100.986 35.1362C100.986 34.595 100.583 34.0589 99.7761 33.6453L84.3765 25.8026C82.7631 24.9805 80.1539 24.9805 78.5455 25.8026L63.146 33.6453C62.3393 34.0589 61.9359 34.595 61.9359 35.1311V40.2371C61.9359 39.701 62.3393 39.1648 63.146 38.7513L78.5455 30.9085C80.1539 30.0865 82.7631 30.0865 84.3765 30.9085L99.7761 38.7513C100.583 39.1648 100.986 39.701 100.986 40.2422V35.1362Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
         stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
         strokeWidth="0.4"
@@ -258,7 +264,7 @@ export function ViewVerticalStackIllustration({ className }: TIllustrationAssetP
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M49.2255 35.8818C49.2255 36.7907 49.9046 37.7047 51.2679 38.3991L77.3286 51.6745C80.0501 53.0633 84.4668 53.0633 87.1933 51.6745L113.249 38.3991C114.612 37.7047 115.291 36.7958 115.291 35.8869V40.9929C115.291 41.9017 114.612 42.8106 113.249 43.505L87.1933 56.7805C84.4668 58.1693 80.0501 58.1693 77.3286 56.7805L51.2679 43.505C49.9046 42.8106 49.2255 41.8966 49.2255 40.9878V35.8818Z"
+        d="M48.4255 35.1316C48.4255 36.0404 49.1046 36.9544 50.4679 37.6488L76.5286 50.9243C79.2501 52.3131 83.6668 52.3131 86.3933 50.9243L112.449 37.6488C113.812 36.9544 114.491 36.0456 114.491 35.1367V40.2426C114.491 41.1515 113.812 42.0604 112.449 42.7548L86.3933 56.0302C83.6668 57.419 79.2501 57.419 76.5286 56.0302L50.4679 42.7548C49.1046 42.0604 48.4255 41.1464 48.4255 40.2375V35.1316Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
         stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
         strokeWidth="0.4"
@@ -268,7 +274,7 @@ export function ViewVerticalStackIllustration({ className }: TIllustrationAssetP
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M113.249 33.37L87.1933 20.0946C84.4668 18.7058 80.0501 18.7058 77.3286 20.0946L51.2679 33.37C49.9097 34.0645 49.2255 34.9733 49.2255 35.8822C49.2255 36.791 49.9046 37.705 51.2679 38.3994L77.3286 51.6749C80.0501 53.0637 84.4668 53.0637 87.1933 51.6749L113.249 38.3994C114.612 37.705 115.291 36.7961 115.291 35.8873C115.291 34.9784 114.612 34.0645 113.249 33.37ZM100.576 37.368L85.1765 45.2158C83.563 46.0379 80.9539 46.0379 79.3455 45.2158L63.9459 37.368C63.1392 36.9595 62.7358 36.4234 62.7358 35.8822C62.7358 35.3409 63.1392 34.8099 63.9459 34.3963L79.3455 26.5536C80.9539 25.7316 83.563 25.7316 85.1765 26.5536L100.576 34.3963C101.383 34.8099 101.786 35.346 101.786 35.8873C101.786 36.4285 101.383 36.9595 100.576 37.368Z"
+        d="M112.449 32.6198L86.3933 19.3443C83.6668 17.9555 79.2501 17.9555 76.5286 19.3443L50.4679 32.6198C49.1097 33.3142 48.4255 34.2231 48.4255 35.1319C48.4255 36.0408 49.1046 36.9547 50.4679 37.6492L76.5286 50.9246C79.2501 52.3134 83.6668 52.3134 86.3933 50.9246L112.449 37.6492C113.812 36.9547 114.491 36.0459 114.491 35.137C114.491 34.2282 113.812 33.3142 112.449 32.6198ZM99.776 36.6178L84.3765 44.4656C82.763 45.2877 80.1539 45.2877 78.5455 44.4656L63.1459 36.6178C62.3392 36.2093 61.9358 35.6732 61.9358 35.1319C61.9358 34.5907 62.3392 34.0597 63.1459 33.6461L78.5455 25.8034C80.1539 24.9813 82.763 24.9813 84.3765 25.8034L99.776 33.6461C100.583 34.0597 100.986 34.5958 100.986 35.137C100.986 35.6783 100.583 36.2093 99.776 36.6178Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
         stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
         strokeWidth="0.4"
@@ -278,7 +284,7 @@ export function ViewVerticalStackIllustration({ className }: TIllustrationAssetP
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M115.444 72.4053V77.5112C115.444 77.9708 115.199 78.4354 114.714 78.849C114.495 79.0022 114.27 79.1349 114.02 79.2626L113.407 79.574L88.4287 92.298C85.6358 93.7226 79.2074 93.886 76.4144 92.4614L51.1451 79.5893L50.5017 79.2626C50.2413 79.1298 50.0013 78.9868 49.7716 78.8286C49.3069 78.4201 49.0721 77.9656 49.0721 77.5112V72.4053C49.0721 72.8597 49.3069 73.3141 49.7716 73.7226C50.0013 73.8809 50.2413 74.0239 50.5017 74.1566L51.1451 74.4834L76.4144 87.3555C79.2074 88.78 85.6358 88.6166 88.4287 87.1921L113.407 74.4681L114.02 74.1566C114.27 74.029 114.495 73.8962 114.714 73.743C115.199 73.3294 115.444 72.8648 115.444 72.4053Z"
+        d="M114.644 71.655V76.761C114.644 77.2205 114.399 77.6851 113.914 78.0987C113.695 78.2519 113.47 78.3847 113.22 78.5123L112.607 78.8238L87.6287 91.5478C84.8358 92.9723 78.4074 93.1357 75.6144 91.7112L50.3451 78.8391L49.7018 78.5123C49.4414 78.3796 49.2013 78.2366 48.9716 78.0783C48.5069 77.6698 48.2721 77.2154 48.2721 76.761V71.655C48.2721 72.1095 48.5069 72.5639 48.9716 72.9724C49.2013 73.1306 49.4414 73.2736 49.7018 73.4064L50.3451 73.7331L75.6144 86.6052C78.4074 88.0298 84.8358 87.8664 87.6287 86.4418L112.607 73.7178L113.22 73.4064C113.47 73.2787 113.695 73.146 113.914 72.9928C114.399 72.5792 114.644 72.1146 114.644 71.655Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
         stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
         strokeWidth="0.4"
@@ -288,7 +294,7 @@ export function ViewVerticalStackIllustration({ className }: TIllustrationAssetP
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M115.445 72.4047C115.445 72.8642 115.199 73.3289 114.714 73.7424C114.495 73.8956 114.27 74.0284 114.02 74.156L113.407 74.4675L88.429 87.1915C85.636 88.616 79.2076 88.7794 76.4147 87.3549L51.1453 74.4828L50.502 74.156C50.2416 74.0233 50.0016 73.8803 49.7718 73.722C49.3072 73.3135 49.0723 72.8591 49.0723 72.4047C49.0723 71.746 49.5625 71.0924 50.5428 70.5921C52.3861 69.6526 55.3016 69.5913 57.2878 70.4185C57.2929 70.4185 58.0639 70.8116 58.0639 70.8116L77.3286 80.6304C80.0501 82.0141 84.4668 82.0141 87.1933 80.6304L106.453 70.8167C106.453 70.8167 107.224 70.4185 107.234 70.4185C109.215 69.5913 112.131 69.6526 113.969 70.5921C114.954 71.0924 115.445 71.746 115.445 72.4047Z"
+        d="M114.645 71.6544C114.645 72.114 114.399 72.5786 113.914 72.9922C113.695 73.1454 113.47 73.2781 113.22 73.4058L112.607 73.7172L87.629 86.4412C84.836 87.8658 78.4076 88.0292 75.6147 86.6046L50.3453 73.7325L49.702 73.4058C49.4416 73.273 49.2016 73.1301 48.9718 72.9718C48.5072 72.5633 48.2723 72.1089 48.2723 71.6544C48.2723 70.9958 48.7625 70.3422 49.7428 69.8418C51.5861 68.9023 54.5016 68.8411 56.4878 69.6682C56.4929 69.6682 57.2639 70.0614 57.2639 70.0614L76.5286 79.8801C79.2501 81.2638 83.6668 81.2638 86.3933 79.8801L105.653 70.0665C105.653 70.0665 106.424 69.6682 106.434 69.6682C108.415 68.8411 111.331 68.9023 113.169 69.8418C114.154 70.3422 114.645 70.9958 114.645 71.6544Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
         stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
         strokeWidth="0.4"
@@ -298,7 +304,7 @@ export function ViewVerticalStackIllustration({ className }: TIllustrationAssetP
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M115.444 54.5898V59.6958C115.444 60.1553 115.199 60.62 114.714 61.0335C114.495 61.1867 114.27 61.3195 114.02 61.4471L113.407 61.7586L88.4288 74.4826C85.6359 75.9072 79.2075 76.0706 76.4146 74.646L51.1452 61.7739L50.5019 61.4471C50.2415 61.3144 50.0015 61.1714 49.7717 61.0131C49.307 60.6046 49.0722 60.1502 49.0722 59.6958V54.5898C49.0722 55.0443 49.307 55.4987 49.7717 55.9072C50.0015 56.0655 50.2415 56.2084 50.5019 56.3412L51.1452 56.668L76.4146 69.54C79.2075 70.9646 85.6359 70.8012 88.4288 69.3767L113.407 56.6526L114.02 56.3412C114.27 56.2135 114.495 56.0808 114.714 55.9276C115.199 55.514 115.444 55.0494 115.444 54.5898Z"
+        d="M114.644 53.8396V58.9455C114.644 59.4051 114.399 59.8697 113.914 60.2833C113.695 60.4365 113.47 60.5692 113.22 60.6969L112.607 61.0083L87.6288 73.7324C84.8359 75.1569 78.4075 75.3203 75.6146 73.8957L50.3452 61.0237L49.7019 60.6969C49.4415 60.5641 49.2015 60.4212 48.9717 60.2629C48.5071 59.8544 48.2722 59.4 48.2722 58.9455V53.8396C48.2722 54.294 48.5071 54.7485 48.9717 55.1569C49.2015 55.3152 49.4415 55.4582 49.7019 55.5909L50.3452 55.9177L75.6146 68.7898C78.4075 70.2144 84.8359 70.051 87.6288 68.6264L112.607 55.9024L113.22 55.5909C113.47 55.4633 113.695 55.3305 113.914 55.1774C114.399 54.7638 114.644 54.2991 114.644 53.8396Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
         stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
         strokeWidth="0.4"
@@ -308,7 +314,7 @@ export function ViewVerticalStackIllustration({ className }: TIllustrationAssetP
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M115.445 54.59C115.445 55.0495 115.199 55.5142 114.714 55.9277C114.495 56.0809 114.27 56.2137 114.02 56.3413L113.407 56.6528L88.429 69.3768C85.636 70.8014 79.2076 70.9647 76.4147 69.5402L51.1453 56.6681L50.502 56.3413C50.2416 56.2086 50.0016 56.0656 49.7718 55.9073C49.3072 55.4988 49.0723 55.0444 49.0723 54.59C49.0723 53.9313 49.5625 53.2778 50.5428 52.7774C52.3861 51.8379 55.3016 51.7766 57.2878 52.6038C57.2929 52.6038 58.0639 52.9969 58.0639 52.9969L77.3286 62.8157C80.0501 64.1994 84.4668 64.1994 87.1933 62.8157L106.453 53.002C106.453 53.002 107.224 52.6038 107.234 52.6038C109.215 51.7766 112.131 51.8379 113.969 52.7774C114.954 53.2778 115.445 53.9313 115.445 54.59Z"
+        d="M114.645 53.8397C114.645 54.2993 114.399 54.7639 113.914 55.1775C113.695 55.3307 113.47 55.4634 113.22 55.5911L112.607 55.9025L87.629 68.6265C84.836 70.0511 78.4076 70.2145 75.6147 68.7899L50.3453 55.9179L49.702 55.5911C49.4416 55.4583 49.2016 55.3154 48.9718 55.1571C48.5072 54.7486 48.2723 54.2942 48.2723 53.8397C48.2723 53.1811 48.7625 52.5275 49.7428 52.0271C51.5861 51.0876 54.5016 51.0264 56.4878 51.8535C56.4929 51.8535 57.2639 52.2467 57.2639 52.2467L76.5286 62.0654C79.2501 63.4491 83.6668 63.4491 86.3933 62.0654L105.653 52.2518C105.653 52.2518 106.424 51.8535 106.434 51.8535C108.415 51.0264 111.331 51.0876 113.169 52.0271C114.154 52.5275 114.645 53.1811 114.645 53.8397Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
         stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
         strokeWidth="0.4"
diff --git a/packages/propel/src/empty-state/assets/vertical-stack/work-item.tsx b/packages/propel/src/empty-state/assets/vertical-stack/work-item.tsx
index 3ddd2e16a..dcd6f30f5 100644
--- a/packages/propel/src/empty-state/assets/vertical-stack/work-item.tsx
+++ b/packages/propel/src/empty-state/assets/vertical-stack/work-item.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper";
 import type { TIllustrationAssetProps } from "../helper";
 
@@ -13,17 +19,17 @@ export function WorkItemVerticalStackIllustration({ className }: TIllustrationAs
     >
       <g opacity="0.2">
         <path
-          d="M1 143.605C1 145.738 2.597 147.865 5.78537 149.496L46.8392 170.415C53.2216 173.666 63.5655 173.666 69.9479 170.415L156.215 126.461C159.403 124.835 161 122.708 161 120.575V127.386C161 129.519 159.403 131.647 156.215 133.272L69.9479 177.226C63.5655 180.477 53.2216 180.477 46.8392 177.226L5.78537 156.307C2.59135 154.682 1 152.549 1 150.416V143.605Z"
+          d="M0.200012 143.469C0.200012 145.602 1.79701 147.729 4.98538 149.36L46.0392 170.279C52.4216 173.53 62.7655 173.53 69.1479 170.279L155.415 126.325C158.603 124.7 160.2 122.572 160.2 120.439V127.25C160.2 129.384 158.603 131.511 155.415 133.136L69.1479 177.091C62.7655 180.341 52.4216 180.341 46.0392 177.091L4.98538 156.172C1.79137 154.546 0.200012 152.413 0.200012 150.28V143.469Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.4"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
         <path
-          d="M1 143.605C1 141.471 2.597 139.344 5.78537 137.719L92.052 93.7643C98.4344 90.5139 108.778 90.5139 115.161 93.7643L156.215 114.683C159.409 116.309 161 118.442 161 120.575C161 122.708 159.403 124.835 156.215 126.461L69.9479 170.415C63.5655 173.666 53.2216 173.666 46.8392 170.415L5.78537 149.496C2.59135 147.871 1 145.738 1 143.605Z"
+          d="M0.200012 143.469C0.200012 141.336 1.79701 139.208 4.98538 137.583L91.252 93.6286C97.6344 90.3781 107.978 90.3781 114.361 93.6286L155.415 114.548C158.609 116.173 160.2 118.306 160.2 120.439C160.2 122.572 158.603 124.7 155.415 126.325L69.1479 170.279C62.7655 173.53 52.4216 173.53 46.0392 170.279L4.98538 149.36C1.79137 147.735 0.200012 145.602 0.200012 143.469Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.4"
           strokeLinecap="round"
           strokeLinejoin="round"
@@ -31,34 +37,34 @@ export function WorkItemVerticalStackIllustration({ className }: TIllustrationAs
       </g>
       <g opacity="0.6">
         <path
-          d="M1 122.087C1 124.22 2.597 126.348 5.78537 127.979L46.8392 148.898C53.2216 152.148 63.5655 152.148 69.9479 148.898L156.215 104.943C159.403 103.318 161 101.191 161 99.0576V105.869C161 108.002 159.403 110.129 156.215 111.755L69.9479 155.709C63.5655 158.96 53.2216 158.96 46.8392 155.709L5.78537 134.79C2.59135 133.165 1 131.032 1 128.898V122.087Z"
+          d="M0.200012 121.952C0.200012 124.085 1.79701 126.212 4.98538 127.843L46.0392 148.762C52.4216 152.013 62.7655 152.013 69.1479 148.762L155.415 104.808C158.603 103.182 160.2 101.055 160.2 98.9219V105.733C160.2 107.866 158.603 109.994 155.415 111.619L69.1479 155.573C62.7655 158.824 52.4216 158.824 46.0392 155.573L4.98538 134.654C1.79137 133.029 0.200012 130.896 0.200012 128.763V121.952Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.4"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
         <path
-          d="M1 122.087C1 119.954 2.597 117.827 5.78537 116.201L92.052 72.247C98.4344 68.9966 108.778 68.9966 115.161 72.247L156.215 93.1661C159.409 94.7914 161 96.9245 161 99.0576C161 101.191 159.403 103.318 156.215 104.943L69.9479 148.898C63.5655 152.148 53.2216 152.148 46.8392 148.898L5.78537 127.979C2.59135 126.353 1 124.22 1 122.087Z"
+          d="M0.200012 121.952C0.200012 119.818 1.79701 117.691 4.98538 116.066L91.252 72.1113C97.6344 68.8608 107.978 68.8608 114.361 72.1113L155.415 93.0304C158.609 94.6556 160.2 96.7887 160.2 98.9218C160.2 101.055 158.603 103.182 155.415 104.808L69.1479 148.762C62.7655 152.013 52.4216 152.013 46.0392 148.762L4.98538 127.843C1.79137 126.218 0.200012 124.085 0.200012 121.952Z"
           fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
           strokeWidth="0.4"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
       </g>
       <path
-        d="M1 100.564C1 102.697 2.597 104.825 5.78537 106.456L46.8392 127.375C53.2216 130.625 63.5655 130.625 69.9479 127.375L156.215 83.4204C159.403 81.7952 161 79.6677 161 77.5346V84.3459C161 86.479 159.403 88.6065 156.215 90.2317L69.9479 134.186C63.5655 137.437 53.2216 137.437 46.8392 134.186L5.78537 113.267C2.59135 111.642 1 109.509 1 107.376V100.564Z"
+        d="M0.200012 100.429C0.200012 102.562 1.79701 104.689 4.98538 106.32L46.0392 127.239C52.4216 130.49 62.7655 130.49 69.1479 127.239L155.415 83.2847C158.603 81.6595 160.2 79.532 160.2 77.3989V84.2102C160.2 86.3433 158.603 88.4707 155.415 90.096L69.1479 134.05C62.7655 137.301 52.4216 137.301 46.0392 134.05L4.98538 113.131C1.79137 111.506 0.200012 109.373 0.200012 107.24V100.429Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.4"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
       <path
-        d="M1 100.564C1 98.4312 2.597 96.3037 5.78537 94.6785L92.052 50.7241C98.4344 47.4736 108.778 47.4736 115.161 50.7241L156.215 71.6432C159.409 73.2684 161 75.4015 161 77.5346C161 79.6677 159.403 81.7952 156.215 83.4204L69.9479 127.375C63.5655 130.625 53.2216 130.625 46.8392 127.375L5.78537 106.456C2.59135 104.831 1 102.697 1 100.564Z"
+        d="M0.200012 100.429C0.200012 98.2954 1.79701 96.168 4.98538 94.5428L91.252 50.5883C97.6344 47.3379 107.978 47.3379 114.361 50.5883L155.415 71.5075C158.609 73.1327 160.2 75.2658 160.2 77.3989C160.2 79.532 158.603 81.6595 155.415 83.2847L69.1479 127.239C62.7655 130.49 52.4216 130.49 46.0392 127.239L4.98538 106.32C1.79137 104.695 0.200012 102.562 0.200012 100.429Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.4"
         strokeLinecap="round"
         strokeLinejoin="round"
@@ -66,9 +72,9 @@ export function WorkItemVerticalStackIllustration({ className }: TIllustrationAs
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M17.8899 23.8006C16.6597 23.1743 15.0796 23.225 13.3471 24.111C9.43643 26.103 6.27074 31.5769 6.27074 36.3284C6.27074 38.9807 7.25829 40.8542 8.81015 41.6443L6.2932 40.3633C4.74133 39.5732 3.75378 37.6997 3.75378 35.0474C3.75378 30.2903 6.92525 24.8164 10.8303 22.83C12.5571 21.9497 14.1429 21.8933 15.3731 22.5197L17.8899 23.8006Z"
+        d="M17.0899 23.6649C15.8597 23.0385 14.2796 23.0893 12.5471 23.9753C8.63644 25.9673 5.47075 31.4412 5.47075 36.1927C5.47075 38.845 6.4583 40.7185 8.01017 41.5085L5.49321 40.2275C3.94135 39.4375 2.9538 37.564 2.9538 34.9117C2.9538 30.1545 6.12526 24.6807 10.0303 22.6943C11.7571 21.814 13.3429 21.7575 14.5731 22.3839L17.0899 23.6649Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.4"
         strokeLinecap="round"
         strokeLinejoin="round"
@@ -76,9 +82,9 @@ export function WorkItemVerticalStackIllustration({ className }: TIllustrationAs
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M17.8899 23.8007C19.4418 24.5907 20.4293 26.4642 20.4293 29.1165C20.4293 33.8737 17.2578 39.3475 13.3528 41.3339C11.626 42.2142 10.0404 42.2707 8.81017 41.6443C7.2583 40.8542 6.27075 38.9807 6.27075 36.3284C6.27075 31.5713 9.44208 26.0974 13.3471 24.111C15.0739 23.2307 16.6597 23.1743 17.8899 23.8007Z"
+        d="M17.0899 23.6649C18.6418 24.455 19.6293 26.3285 19.6293 28.9808C19.6293 33.7379 16.4579 39.2118 12.5528 41.1982C10.826 42.0785 9.24038 42.1349 8.01018 41.5085C6.45831 40.7185 5.47076 38.845 5.47076 36.1927C5.47076 31.4355 8.64209 25.9617 12.5471 23.9753C14.2739 23.095 15.8597 23.0385 17.0899 23.6649Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.4"
         strokeLinecap="round"
         strokeLinejoin="round"
@@ -86,21 +92,21 @@ export function WorkItemVerticalStackIllustration({ className }: TIllustrationAs
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M13.7704 29.1842C11.9081 30.1323 10.4014 32.7394 10.4014 35.0023C10.4014 37.2652 11.9081 38.3374 13.7704 37.3837C15.6326 36.43 17.1393 33.8285 17.1393 31.5656C17.1393 29.3027 15.6326 28.2305 13.7704 29.1842ZM9.651 35.386C9.651 32.6152 11.4962 29.4325 13.7704 28.2757C16.0446 27.1188 17.8899 28.4224 17.8899 31.1875C17.8899 33.9527 16.0446 37.141 13.7704 38.2979C11.4962 39.4547 9.651 38.1512 9.651 35.386Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M12.9704 29.0485C11.1082 29.9965 9.60146 32.6037 9.60146 34.8666C9.60146 37.1295 11.1082 38.2017 12.9704 37.248C14.8326 36.2943 16.3393 33.6928 16.3393 31.4299C16.3393 29.167 14.8326 28.0948 12.9704 29.0485ZM8.85101 35.2503C8.85101 32.4795 10.6962 29.2968 12.9704 28.1399C15.2446 26.9831 17.0899 28.2867 17.0899 31.0518C17.0899 33.8169 15.2446 37.0053 12.9704 38.1622C10.6962 39.319 8.85101 38.0154 8.85101 35.2503Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M13.7704 31.0069C12.7377 31.5318 11.8969 32.982 11.8969 34.2405C11.8969 35.4989 12.7377 36.0914 13.7704 35.5666C14.8031 35.0418 15.6439 33.5915 15.6439 32.3331C15.6439 31.0747 14.8031 30.4821 13.7704 31.0069ZM11.1464 34.6242C11.1464 32.8635 12.3201 30.8376 13.7704 30.0984C15.2207 29.3591 16.3945 30.1887 16.3945 31.955C16.3945 33.7213 15.2207 35.7415 13.7704 36.4808C12.3201 37.22 11.1464 36.3905 11.1464 34.6242Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M12.9704 30.8712C11.9377 31.396 11.097 32.8463 11.097 34.1047C11.097 35.3632 11.9377 35.9557 12.9704 35.4309C14.0031 34.9061 14.8439 33.4558 14.8439 32.1974C14.8439 30.9389 14.0031 30.3464 12.9704 30.8712ZM10.3464 34.4885C10.3464 32.7278 11.5201 30.7019 12.9704 29.9627C14.4207 29.2234 15.5945 30.053 15.5945 31.8193C15.5945 33.5856 14.4207 35.6058 12.9704 36.3451C11.5201 37.0843 10.3464 36.2548 10.3464 34.4885Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M147.152 33.219C148.703 32.429 149.691 30.5611 149.691 27.9032C149.691 23.146 146.52 17.6722 142.614 15.6858L116.43 2.34538C114.704 1.46505 113.123 1.40862 111.893 2.03501L114.41 0.754017C115.64 0.127628 117.22 0.184061 118.947 1.06439L145.131 14.4048C149.042 16.3968 152.208 21.8707 152.208 26.6222C152.208 29.2801 151.22 31.148 149.668 31.938L147.152 33.219Z"
+        d="M146.352 33.0833C147.903 32.2932 148.891 30.4254 148.891 27.7674C148.891 23.0103 145.72 17.5364 141.814 15.55L115.63 2.20966C113.904 1.32933 112.323 1.2729 111.093 1.89929L113.61 0.618291C114.84 -0.00809748 116.42 0.0483357 118.147 0.928666L144.331 14.2691C148.242 16.2611 151.408 21.7349 151.408 26.4864C151.408 29.1444 150.42 31.0122 148.868 31.8023L146.352 33.0833Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.4"
         strokeLinecap="round"
         strokeLinejoin="round"
@@ -108,55 +114,55 @@ export function WorkItemVerticalStackIllustration({ className }: TIllustrationAs
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M147.152 33.219C145.921 33.8454 144.341 33.789 142.614 32.9086L116.43 19.5683C112.52 17.5762 109.354 12.1024 109.354 7.35085C109.354 4.69293 110.341 2.82505 111.893 2.03501C113.123 1.40863 114.704 1.46505 116.43 2.34538L142.614 15.6858C146.525 17.6778 149.691 23.1516 149.691 27.9032C149.691 30.5611 148.703 32.429 147.152 33.219Z"
+        d="M146.352 33.0833C145.121 33.7097 143.541 33.6532 141.814 32.7729L115.63 19.4325C111.72 17.4405 108.554 11.9667 108.554 7.21513C108.554 4.55721 109.541 2.68933 111.093 1.89929C112.323 1.2729 113.904 1.32933 115.63 2.20966L141.814 15.55C145.725 17.5421 148.891 23.0159 148.891 27.7674C148.891 30.4254 147.903 32.2932 146.352 33.0833Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
         strokeWidth="0.4"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
       <path
-        d="M121.972 19.1394C121.752 19.0265 121.571 18.7161 121.571 18.4509V17.4803C121.571 16.679 121.035 15.7478 120.375 15.4149L117.982 14.196C117.322 13.8574 116.786 14.2411 116.786 15.0425V16.0131C116.786 16.2839 116.605 16.4081 116.385 16.2952C116.165 16.1824 115.984 15.872 115.984 15.6068V14.6361C115.984 13.2987 116.882 12.6667 117.982 13.2254L120.375 14.4443C121.475 15.003 122.373 16.5492 122.373 17.8866V18.8572C122.373 19.1281 122.192 19.2522 121.972 19.1394Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M121.172 19.0036C120.952 18.8908 120.771 18.5804 120.771 18.3152V17.3446C120.771 16.5432 120.235 15.6121 119.575 15.2792L117.182 14.0603C116.522 13.7217 115.986 14.1054 115.986 14.9067V15.8773C115.986 16.1482 115.805 16.2724 115.585 16.1595C115.365 16.0466 115.185 15.7363 115.185 15.471V14.5004C115.185 13.163 116.082 12.531 117.182 13.0896L119.575 14.3086C120.675 14.8672 121.573 16.4134 121.573 17.7509V18.7215C121.573 18.9924 121.392 19.1165 121.172 19.0036Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
-        d="M121.972 14.2242C121.797 14.1339 121.633 13.9082 121.588 13.6655C121.532 13.3777 121.661 13.1802 121.876 13.2197C122.299 13.2987 122.626 13.0674 122.734 12.6103C122.897 11.9162 122.514 10.923 121.876 10.3981C121.661 10.2232 121.537 9.89026 121.588 9.65889C121.645 9.42752 121.859 9.38238 122.073 9.55732C122.587 9.98055 123.021 10.6013 123.292 11.2954C123.563 11.9895 123.637 12.6836 123.507 13.2423C123.326 14.0041 122.779 14.3878 122.073 14.2524C122.04 14.2468 122.006 14.2355 121.972 14.2186V14.2242Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M121.172 14.0885C120.997 13.9982 120.833 13.7725 120.788 13.5298C120.732 13.242 120.861 13.0445 121.076 13.084C121.499 13.163 121.826 12.9316 121.934 12.4745C122.097 11.7804 121.714 10.7872 121.076 10.2624C120.861 10.0875 120.737 9.75454 120.788 9.52317C120.845 9.2918 121.059 9.24665 121.273 9.42159C121.787 9.84483 122.221 10.4656 122.492 11.1597C122.763 11.8538 122.837 12.5479 122.707 13.1066C122.526 13.8684 121.979 14.2521 121.273 14.1167C121.24 14.111 121.206 14.0998 121.172 14.0828V14.0885Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
-        d="M124.364 20.3583C124.144 20.2454 123.964 19.9351 123.964 19.6698V18.6992C123.964 18.0333 123.597 17.2658 123.067 16.8313C122.852 16.6564 122.722 16.3234 122.779 16.0921C122.835 15.8607 123.05 15.8156 123.264 15.9905C124.144 16.7185 124.76 17.9938 124.76 19.0999V20.0705C124.76 20.3414 124.579 20.4655 124.359 20.3526L124.364 20.3583Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M123.564 20.2226C123.344 20.1097 123.164 19.7993 123.164 19.5341V18.5635C123.164 17.8976 122.797 17.1301 122.267 16.6956C122.052 16.5207 121.922 16.1877 121.979 15.9563C122.035 15.725 122.25 15.6798 122.464 15.8548C123.344 16.5827 123.96 17.8581 123.96 18.9641V19.9348C123.96 20.2056 123.779 20.3298 123.559 20.2169L123.564 20.2226Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
-        d="M119.178 12.8586C118.078 12.2999 117.181 10.7537 117.181 9.41624C117.181 8.07882 118.078 7.44678 119.178 8.00546C120.279 8.56413 121.176 10.1104 121.176 11.4478C121.176 12.7852 120.279 13.4172 119.178 12.8586ZM119.178 8.97608C118.518 8.63749 117.982 9.02122 117.982 9.82255C117.982 10.6239 118.518 11.555 119.178 11.8879C119.839 12.2209 120.375 11.8428 120.375 11.0415C120.375 10.2401 119.839 9.30902 119.178 8.97608Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M118.378 12.7228C117.278 12.1642 116.381 10.6179 116.381 9.28051C116.381 7.94309 117.278 7.31106 118.378 7.86973C119.479 8.4284 120.376 9.97462 120.376 11.312C120.376 12.6495 119.479 13.2815 118.378 12.7228ZM118.378 8.84035C117.718 8.50176 117.182 8.8855 117.182 9.68682C117.182 10.4881 117.718 11.4193 118.378 11.7522C119.039 12.0852 119.575 11.7071 119.575 10.9057C119.575 10.1044 119.039 9.1733 118.378 8.84035Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
-        d="M136.328 25.1888C136.108 25.076 135.927 24.7656 135.927 24.5004V19.6473C135.927 19.3764 136.108 19.2522 136.328 19.3651C136.548 19.478 136.729 19.7883 136.729 20.0536V24.9067C136.729 25.1775 136.548 25.3017 136.328 25.1888Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M135.528 25.0531C135.308 24.9402 135.127 24.6299 135.127 24.3646V19.5115C135.127 19.2407 135.308 19.1165 135.528 19.2294C135.748 19.3422 135.929 19.6526 135.929 19.9178V24.7709C135.929 25.0418 135.748 25.166 135.528 25.0531Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
-        d="M138.721 26.4077C138.501 26.2949 138.32 25.9845 138.32 25.7193V17.9487C138.32 17.6778 138.501 17.5537 138.721 17.6665C138.941 17.7794 139.121 18.0898 139.121 18.355V26.1256C139.121 26.3965 138.941 26.5206 138.721 26.4077Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M137.921 26.272C137.701 26.1592 137.52 25.8488 137.52 25.5836V17.8129C137.52 17.5421 137.701 17.4179 137.921 17.5308C138.141 17.6437 138.321 17.954 138.321 18.2193V25.9899C138.321 26.2607 138.141 26.3849 137.921 26.272Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
-        d="M133.93 23.9699C133.71 23.857 133.529 23.5467 133.529 23.2814V21.3402C133.529 21.0693 133.71 20.9452 133.93 21.058C134.15 21.1709 134.33 21.4813 134.33 21.7465V23.6877C134.33 23.9586 134.15 24.0828 133.93 23.9699Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        d="M133.13 23.8342C132.91 23.7213 132.729 23.4109 132.729 23.1457V21.2045C132.729 20.9336 132.91 20.8095 133.13 20.9223C133.35 21.0352 133.53 21.3456 133.53 21.6108V23.552C133.53 23.8229 133.35 23.947 133.13 23.8342Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
       />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M48.2836 89.9382C47.6403 89.9382 47.0364 89.7971 46.4947 89.5206L41.4667 86.9586C39.9092 86.163 39.0118 84.3459 39.0118 81.9645V50.4024C39.0118 46.1926 41.8335 41.3338 45.304 39.5675L71.2455 26.3513C72.1259 25.9055 72.9893 25.6741 73.8132 25.6741C74.4565 25.6741 75.0603 25.8152 75.602 26.0917L80.63 28.6537C82.1875 29.4494 83.0848 31.2665 83.0848 33.6479V65.21C83.0848 69.4141 80.2633 74.2785 76.7928 76.0448L50.8513 89.261C49.9709 89.7125 49.1075 89.9382 48.2836 89.9382Z"
+        d="M47.4836 89.8025C46.8403 89.8025 46.2364 89.6614 45.6947 89.3849L40.6667 86.8229C39.1092 86.0272 38.2119 84.2101 38.2119 81.8287V50.2666C38.2119 46.0569 41.0335 41.1981 44.504 39.4318L70.4455 26.2156C71.3259 25.7698 72.1893 25.5384 73.0132 25.5384C73.6565 25.5384 74.2603 25.6795 74.802 25.956L79.83 28.518C81.3875 29.3137 82.2848 31.1308 82.2848 33.5122V65.0742C82.2848 69.2784 79.4633 74.1428 75.9928 75.9091L50.0513 89.1253C49.171 89.5768 48.3075 89.8025 47.4836 89.8025Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
       />
       <path
-        d="M73.8132 26.2328C74.3718 26.2328 74.8853 26.3569 75.3424 26.5883L80.3704 29.1503C81.6796 29.8162 82.5148 31.4019 82.5148 33.6422V65.2043C82.5148 69.2279 79.8344 73.8553 76.5275 75.5369L50.5859 88.7532C49.7677 89.1708 48.989 89.3683 48.278 89.3683C47.7193 89.3683 47.2058 89.2441 46.7487 89.0127L41.7206 86.4508C40.4114 85.7849 39.5761 84.1991 39.5761 81.9588V50.3967C39.5761 46.3732 42.2567 41.7458 45.5636 40.0641L71.5051 26.8479C72.3233 26.4303 73.1021 26.2328 73.8132 26.2328ZM73.8132 25.1042C72.899 25.1042 71.9509 25.3525 70.9916 25.8434L45.0501 39.0597C41.3482 40.9445 38.4475 45.9274 38.4475 50.3967V81.9588C38.4475 84.5603 39.4521 86.5636 41.2071 87.4609L46.2351 90.0229C46.8558 90.3389 47.5443 90.5025 48.278 90.5025C49.1921 90.5025 50.1402 90.2542 51.0995 89.7633L77.041 76.547C80.7429 74.6622 83.6435 69.6793 83.6435 65.21V33.6479C83.6435 31.0464 82.6391 29.0431 80.884 28.1515L75.8559 25.5895C75.2352 25.2735 74.5468 25.1098 73.8132 25.1098V25.1042Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        d="M73.0132 26.0971C73.5718 26.0971 74.0854 26.2212 74.5424 26.4526L79.5704 29.0146C80.8796 29.6805 81.7149 31.2662 81.7149 33.5065V65.0686C81.7149 69.0922 79.0344 73.7195 75.7276 75.4012L49.7859 88.6174C48.9677 89.035 48.189 89.2325 47.478 89.2325C46.9193 89.2325 46.4058 89.1084 45.9487 88.877L40.9206 86.315C39.6114 85.6491 38.7762 84.0634 38.7762 81.8231V50.261C38.7762 46.2374 41.4567 41.6101 44.7636 39.9284L70.7051 26.7122C71.5233 26.2946 72.3021 26.0971 73.0132 26.0971ZM73.0132 24.9684C72.099 24.9684 71.1509 25.2167 70.1916 25.7077L44.2501 38.9239C40.5482 40.8087 37.6475 45.7916 37.6475 50.261V81.8231C37.6475 84.4246 38.6521 86.4279 40.4071 87.3251L45.4351 89.8871C46.0558 90.2032 46.7444 90.3668 47.478 90.3668C48.3922 90.3668 49.3402 90.1185 50.2995 89.6275L76.241 76.4113C79.9429 74.5265 82.8435 69.5436 82.8435 65.0742V33.5122C82.8435 30.9107 81.8391 28.9073 80.084 28.0157L75.0559 25.4537C74.4352 25.1377 73.7468 24.9741 73.0132 24.9741V24.9684Z"
+        fill="var(--illustration-stroke-tertiary)"
       />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M80.3706 29.1504C79.3323 28.6199 77.9893 28.6651 76.5277 29.41L50.5861 42.6262C47.2792 44.3078 44.5988 48.9352 44.5988 52.9588V84.5209C44.5988 86.7668 45.434 88.3469 46.7432 89.0128L41.7151 86.4508C40.4059 85.7849 39.5707 84.1992 39.5707 81.9589V50.3968C39.5707 46.3732 42.2512 41.7459 45.5581 40.0642L71.4996 26.848C72.9612 26.1031 74.2986 26.0579 75.3426 26.5884L80.3706 29.1504Z"
+        d="M79.5706 29.0146C78.5323 28.4842 77.1893 28.5293 75.7278 29.2742L49.7861 42.4905C46.4792 44.1721 43.7988 48.7995 43.7988 52.8231V84.3851C43.7988 86.6311 44.634 88.2112 45.9432 88.8771L40.9151 86.3151C39.6059 85.6492 38.7707 84.0635 38.7707 81.8232V50.2611C38.7707 46.2375 41.4512 41.6101 44.7581 39.9285L70.6996 26.7122C72.1612 25.9673 73.4987 25.9222 74.5426 26.4527L79.5706 29.0146Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
         stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
         strokeWidth="0.4"
@@ -166,7 +172,7 @@ export function WorkItemVerticalStackIllustration({ className }: TIllustrationAs
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M80.3706 29.1504C81.6798 29.8163 82.515 31.402 82.515 33.6423V65.2044C82.515 69.228 79.8346 73.8553 76.5278 75.537L50.5861 88.7532C49.1245 89.4981 47.7872 89.5433 46.7432 89.0128C45.434 88.3469 44.5988 86.7612 44.5988 84.5209V52.9588C44.5988 48.9352 47.2792 44.3078 50.5861 42.6262L76.5278 29.41C77.9893 28.6651 79.3266 28.6199 80.3706 29.1504Z"
+        d="M79.5706 29.0146C80.8798 29.6805 81.7151 31.2663 81.7151 33.5066V65.0687C81.7151 69.0922 79.0346 73.7196 75.7278 75.4013L49.7861 88.6175C48.3246 89.3624 46.9872 89.4075 45.9432 88.8771C44.634 88.2112 43.7988 86.6255 43.7988 84.3851V52.8231C43.7988 48.7995 46.4792 44.1721 49.7861 42.4905L75.7278 29.2742C77.1893 28.5293 78.5267 28.4842 79.5706 29.0146Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
         stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
         strokeWidth="0.4"
@@ -176,17 +182,17 @@ export function WorkItemVerticalStackIllustration({ className }: TIllustrationAs
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M66.4997 99.272C65.8564 99.272 65.2525 99.1309 64.7107 98.8544L59.6827 96.2924C58.1252 95.4967 57.2279 93.6796 57.2279 91.2982V59.7361C57.2279 55.532 60.0496 50.6676 63.5201 48.9013L89.4559 35.6851C90.3363 35.2393 91.1997 35.0079 92.0236 35.0079C92.6669 35.0079 93.2707 35.149 93.8124 35.4255L98.8404 37.9875C100.398 38.7832 101.295 40.6002 101.295 42.9817V74.5437C101.295 78.7535 98.4737 83.6123 95.0032 85.3786L69.0616 98.5948C68.1812 99.0406 67.3179 99.272 66.494 99.272H66.4997Z"
+        d="M65.6997 99.1363C65.0564 99.1363 64.4525 98.9952 63.9107 98.7187L58.8827 96.1567C57.3252 95.361 56.4279 93.5439 56.4279 91.1625V59.6004C56.4279 55.3963 59.2496 50.5319 62.7201 48.7656L88.656 35.5493C89.5363 35.1035 90.3997 34.8722 91.2236 34.8722C91.8669 34.8722 92.4707 35.0132 93.0124 35.2898L98.0404 37.8517C99.5979 38.6474 100.495 40.4645 100.495 42.8459V74.408C100.495 78.6178 97.6737 83.4765 94.2032 85.2429L68.2616 98.4591C67.3812 98.9049 66.5179 99.1363 65.694 99.1363H65.6997Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
       />
       <path
-        d="M92.0293 35.5666C92.5879 35.5666 93.1014 35.6907 93.5585 35.9221L98.5865 38.4841C99.8957 39.15 100.731 40.7357 100.731 42.976V74.5381C100.731 78.5617 98.0504 83.189 94.7435 84.8707L68.802 98.0869C67.9837 98.5045 67.2051 98.702 66.494 98.702C65.9354 98.702 65.4217 98.5779 64.9646 98.3465L59.9367 95.7845C58.6274 95.1186 57.7922 93.5329 57.7922 91.2926V59.7305C57.7922 55.7069 60.4728 51.0796 63.7797 49.3979L89.7155 36.1817C90.5338 35.7641 91.3126 35.5666 92.0236 35.5666M92.0293 34.4379C91.1151 34.4379 90.167 34.6862 89.2077 35.1772L63.2717 48.3934C59.5698 50.2782 56.6693 55.2611 56.6693 59.7305V91.2926C56.6693 93.8941 57.6738 95.8974 59.4288 96.789L64.4568 99.351C65.0776 99.667 65.7661 99.8307 66.4997 99.8307C67.4139 99.8307 68.3619 99.5824 69.3213 99.0914L95.2628 85.8752C98.9647 83.9904 101.865 79.0075 101.865 74.5381V42.976C101.865 40.3745 100.861 38.3712 99.1056 37.4796L94.0777 34.9176C93.4569 34.6016 92.7685 34.4379 92.0349 34.4379H92.0293Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        d="M91.2293 35.4308C91.7879 35.4308 92.3014 35.555 92.7585 35.7864L97.7865 38.3483C99.0957 39.0142 99.931 40.6 99.931 42.8403V74.4024C99.931 78.4259 97.2504 83.0533 93.9435 84.735L68.002 97.9512C67.1838 98.3688 66.4051 98.5663 65.6941 98.5663C65.1354 98.5663 64.6217 98.4422 64.1647 98.2108L59.1367 95.6488C57.8275 94.9829 56.9922 93.3972 56.9922 91.1569V59.5948C56.9922 55.5712 59.6728 50.9438 62.9797 49.2622L88.9155 36.0459C89.7338 35.6284 90.5126 35.4308 91.2236 35.4308M91.2293 34.3022C90.3151 34.3022 89.367 34.5505 88.4077 35.0415L62.4717 48.2577C58.7698 50.1425 55.8693 55.1254 55.8693 59.5948V91.1569C55.8693 93.7584 56.8738 95.7617 58.6288 96.6533L63.6568 99.2153C64.2776 99.5313 64.9661 99.6949 65.6997 99.6949C66.6139 99.6949 67.5619 99.4466 68.5213 98.9557L94.4628 85.7394C98.1647 83.8546 101.065 78.8717 101.065 74.4024V42.8403C101.065 40.2388 100.061 38.2355 98.3057 37.3439L93.2777 34.7819C92.6569 34.4659 91.9685 34.3022 91.2349 34.3022H91.2293Z"
+        fill="var(--illustration-stroke-tertiary)"
       />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M98.5923 38.4841C97.554 37.9537 96.2109 37.9988 94.7493 38.7437L68.8078 51.96C65.5009 53.6416 62.8205 58.269 62.8205 62.2926V93.8546C62.8205 96.1006 63.6556 97.6807 64.9648 98.3466L59.9368 95.7846C58.6276 95.1187 57.7924 93.533 57.7924 91.2927V59.7306C57.7924 55.707 60.4729 51.0796 63.7798 49.398L89.7213 36.1817C91.1829 35.4368 92.5203 35.3917 93.5643 35.9222L98.5923 38.4841Z"
+        d="M97.7923 38.3484C96.754 37.818 95.4109 37.8631 93.9493 38.608L68.0078 51.8242C64.7009 53.5059 62.0205 58.1333 62.0205 62.1568V93.7189C62.0205 95.9649 62.8556 97.545 64.1648 98.2109L59.1368 95.6489C57.8276 94.983 56.9924 93.3973 56.9924 91.1569V59.5948C56.9924 55.5713 59.6729 50.9439 62.9798 49.2622L88.9213 36.046C90.3829 35.3011 91.7203 35.256 92.7643 35.7864L97.7923 38.3484Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
         stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
         strokeWidth="0.4"
@@ -196,7 +202,7 @@ export function WorkItemVerticalStackIllustration({ className }: TIllustrationAs
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M98.5923 38.4841C99.9015 39.15 100.737 40.7358 100.737 42.9761V74.5382C100.737 78.5617 98.0562 83.1891 94.7493 84.8708L68.8078 98.087C67.3462 98.8319 66.0088 98.877 64.9648 98.3466C63.6556 97.6807 62.8205 96.095 62.8205 93.8546V62.2926C62.8205 58.269 65.5009 53.6416 68.8078 51.96L94.7493 38.7437C96.2109 37.9988 97.5483 37.9537 98.5923 38.4841Z"
+        d="M97.7923 38.3484C99.1015 39.0143 99.9367 40.6 99.9367 42.8404V74.4024C99.9367 78.426 97.2562 83.0534 93.9493 84.735L68.0078 97.9513C66.5462 98.6962 65.2088 98.7413 64.1648 98.2109C62.8556 97.545 62.0205 95.9592 62.0205 93.7189V62.1568C62.0205 58.1333 64.7009 53.5059 68.0078 51.8242L93.9493 38.608C95.4109 37.8631 96.7483 37.818 97.7923 38.3484Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
         stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
         strokeWidth="0.4"
@@ -206,17 +212,27 @@ export function WorkItemVerticalStackIllustration({ className }: TIllustrationAs
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M84.6766 108.6C84.0671 108.6 83.4915 108.476 82.9723 108.228C82.9385 108.216 82.9103 108.205 82.8764 108.188L77.8483 105.626C76.2908 104.831 75.3936 103.013 75.3936 100.632V69.0643C75.3936 64.8601 78.2151 59.9958 81.6857 58.2295L107.622 45.0132C108.502 44.5674 109.365 44.336 110.189 44.336C110.832 44.336 111.436 44.4771 111.978 44.7536C111.978 44.7536 117.029 47.3269 117.04 47.3382C118.575 48.1395 119.455 49.951 119.455 52.3154V83.8832C119.455 88.093 116.634 92.9517 113.163 94.718L87.2273 107.934C86.3526 108.38 85.4948 108.606 84.6766 108.606V108.6ZM90.3423 68.2235C89.1459 68.8329 88.1357 70.5879 88.1357 72.0608V93.0589L104.506 84.7184C105.703 84.1089 106.713 82.3539 106.713 80.881V59.8829L90.3423 68.2235Z"
+        d="M83.8766 108.464C83.2671 108.464 82.6915 108.34 82.1723 108.092C82.1385 108.081 82.1103 108.069 82.0764 108.052L77.0483 105.49C75.4908 104.695 74.5936 102.878 74.5936 100.496V68.9286C74.5936 64.7244 77.4151 59.86 80.8857 58.0937L106.822 44.8775C107.702 44.4317 108.565 44.2003 109.389 44.2003C110.033 44.2003 110.636 44.3414 111.178 44.6179C111.178 44.6179 116.229 47.1912 116.24 47.2025C117.775 48.0038 118.655 49.8152 118.655 52.1797V83.7474C118.655 87.9572 115.834 92.816 112.363 94.5823L86.4273 107.799C85.5526 108.244 84.6948 108.47 83.8766 108.47V108.464ZM89.5423 68.0877C88.346 68.6972 87.3357 70.4522 87.3357 71.9251V92.9232L103.707 84.5826C104.903 83.9732 105.913 82.2182 105.913 80.7453V59.7472L89.5423 68.0877Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
       />
       <path
-        d="M110.189 44.9003C110.748 44.9003 111.261 45.0245 111.718 45.2559L116.746 47.8178C116.746 47.8178 116.735 47.8179 116.73 47.8122C118.05 48.4781 118.891 50.0638 118.891 52.3098V83.8775C118.891 87.8954 116.216 92.5228 112.904 94.2101L86.9677 107.426C86.1551 107.838 85.3763 108.036 84.6709 108.036C84.0614 108.036 83.5028 107.889 83.0175 107.618C83.057 107.641 83.0908 107.669 83.1247 107.686L78.0965 105.124C76.7873 104.458 75.9523 102.872 75.9523 100.632V69.0643C75.9523 65.0464 78.6327 60.4133 81.9396 58.7317L107.875 45.5155C108.694 45.0979 109.472 44.9003 110.184 44.9003M114.822 47.4906C114.924 47.4793 115.031 47.4736 115.127 47.4736C115.025 47.4736 114.924 47.4849 114.822 47.4906ZM115.635 47.4906C115.539 47.4793 115.443 47.4736 115.341 47.468C115.443 47.468 115.539 47.4793 115.635 47.4906ZM114.602 47.5131C114.495 47.5301 114.382 47.5526 114.269 47.5752C114.382 47.5526 114.489 47.5244 114.602 47.5131ZM116.12 47.5865C116.024 47.5639 115.928 47.5357 115.832 47.5188C115.928 47.5357 116.024 47.5583 116.12 47.5865ZM113.677 47.7501C113.801 47.705 113.931 47.6598 114.055 47.626C113.931 47.6598 113.806 47.705 113.677 47.7501ZM111.589 57.6821C111.549 57.6539 111.504 57.6256 111.465 57.6031C111.51 57.6256 111.549 57.6539 111.589 57.6821ZM111.758 57.8288C111.758 57.8288 111.701 57.778 111.673 57.7498C111.701 57.7724 111.73 57.8006 111.758 57.8288ZM111.905 58.0037C111.882 57.9699 111.859 57.9417 111.831 57.9134C111.854 57.9417 111.882 57.9699 111.905 58.0037ZM112.034 58.2069C112.018 58.173 111.995 58.1335 111.972 58.0997C111.995 58.1335 112.012 58.1674 112.034 58.2069ZM112.142 58.4439C112.125 58.3987 112.108 58.3592 112.091 58.3197C112.108 58.3592 112.125 58.4044 112.142 58.4439ZM87.5771 93.9788L104.772 85.2206C106.16 84.5152 107.283 82.5683 107.283 80.881V58.9631L90.0882 67.7212C88.7 68.4266 87.5771 70.3735 87.5771 72.0608V93.9788ZM112.311 59.4597C112.311 59.3468 112.311 59.2396 112.294 59.138C112.305 59.2396 112.311 59.3468 112.311 59.4597ZM89.6706 97.991C89.8061 97.9515 89.9471 97.8951 90.0882 97.8217C89.9471 97.8951 89.8061 97.9459 89.6706 97.991ZM88.7961 98.0418C88.6832 98.0192 88.5759 97.9797 88.4744 97.929C88.5759 97.9797 88.6832 98.0136 88.7961 98.0418ZM89.6199 98.0023C89.4901 98.0362 89.3659 98.0588 89.2418 98.07C89.3659 98.0588 89.4901 98.0418 89.6199 98.0023ZM89.1176 98.0757C89.1176 98.0757 89.1685 98.0757 89.1911 98.0757C89.1685 98.0757 89.1458 98.0757 89.1176 98.0757ZM81.0535 104.204C81.0423 104.125 81.0311 104.046 81.0198 103.961C81.0254 104.046 81.0423 104.119 81.0535 104.204ZM81.189 104.938C81.1664 104.853 81.1439 104.763 81.127 104.673C81.1439 104.763 81.1664 104.847 81.189 104.938ZM81.3357 105.457C81.3526 105.496 81.364 105.542 81.3809 105.581C81.364 105.542 81.3526 105.502 81.3357 105.457C81.3188 105.412 81.3076 105.372 81.2907 105.327C81.3019 105.372 81.3188 105.417 81.3357 105.457ZM81.9396 106.642C81.8944 106.574 81.8493 106.507 81.8041 106.439C81.8493 106.507 81.8944 106.58 81.9396 106.642ZM82.3008 107.065C82.25 107.009 82.1992 106.952 82.1484 106.896C82.1992 106.952 82.25 107.014 82.3008 107.065ZM82.7014 107.415C82.645 107.376 82.5942 107.325 82.5434 107.285C82.5942 107.33 82.645 107.376 82.7014 107.415ZM110.189 43.7717C109.275 43.7717 108.327 44.02 107.368 44.511L81.4317 57.7272C77.7298 59.612 74.8293 64.5949 74.8293 69.0643V100.632C74.8293 103.234 75.8337 105.237 77.5887 106.128L82.6167 108.69C82.6675 108.713 82.7126 108.736 82.7634 108.752C83.3503 109.023 83.9937 109.164 84.6765 109.164C85.5851 109.164 86.5275 108.916 87.4812 108.431L113.417 95.2146C117.119 93.3298 120.019 88.3469 120.019 83.8775V52.3098C120.019 49.7365 119.032 47.7501 117.311 46.8416C117.294 46.8303 117.277 46.819 117.254 46.8134L112.226 44.2514C111.606 43.9354 110.917 43.7717 110.184 43.7717H110.189ZM88.7057 92.1334V72.0608C88.7057 70.8024 89.5917 69.2392 90.6018 68.7257L106.154 60.8027V80.881C106.154 82.1394 105.268 83.7026 104.258 84.2161L88.7057 92.1391V92.1334Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        d="M109.389 44.7646C109.948 44.7646 110.461 44.8888 110.918 45.1201L115.946 47.6821C115.946 47.6821 115.935 47.6821 115.93 47.6765C117.25 48.3424 118.091 49.9281 118.091 52.1741V83.7418C118.091 87.7597 115.416 92.3871 112.104 94.0744L86.1677 107.291C85.3551 107.703 84.5763 107.9 83.8709 107.9C83.2614 107.9 82.7028 107.753 82.2175 107.482C82.257 107.505 82.2908 107.533 82.3247 107.55L77.2966 104.988C75.9874 104.322 75.1523 102.737 75.1523 100.496V68.9286C75.1523 64.9106 77.8327 60.2776 81.1396 58.596L107.075 45.3797C107.894 44.9621 108.672 44.7646 109.384 44.7646M114.022 47.3548C114.124 47.3435 114.231 47.3379 114.327 47.3379C114.225 47.3379 114.124 47.3492 114.022 47.3548ZM114.835 47.3548C114.739 47.3435 114.643 47.3379 114.541 47.3323C114.643 47.3323 114.739 47.3435 114.835 47.3548ZM113.802 47.3774C113.695 47.3943 113.582 47.4169 113.469 47.4395C113.582 47.4169 113.689 47.3887 113.802 47.3774ZM115.32 47.4508C115.224 47.4282 115.128 47.4 115.032 47.383C115.128 47.4 115.224 47.4225 115.32 47.4508ZM112.877 47.6144C113.001 47.5693 113.131 47.5241 113.255 47.4903C113.131 47.5241 113.006 47.5693 112.877 47.6144ZM110.789 57.5463C110.749 57.5181 110.704 57.4899 110.665 57.4673C110.71 57.4899 110.749 57.5181 110.789 57.5463ZM110.958 57.6931C110.958 57.6931 110.901 57.6423 110.873 57.6141C110.901 57.6366 110.93 57.6648 110.958 57.6931ZM111.105 57.868C111.082 57.8341 111.059 57.8059 111.031 57.7777C111.054 57.8059 111.082 57.8341 111.105 57.868ZM111.234 58.0711C111.218 58.0373 111.195 57.9978 111.172 57.9639C111.195 57.9978 111.212 58.0316 111.234 58.0711ZM111.342 58.3082C111.325 58.263 111.308 58.2235 111.291 58.184C111.308 58.2235 111.325 58.2687 111.342 58.3082ZM86.7771 93.843L103.972 85.0849C105.36 84.3795 106.483 82.4326 106.483 80.7453V58.8273L89.2882 67.5855C87.9 68.2909 86.7771 70.2378 86.7771 71.9251V93.843ZM111.511 59.3239C111.511 59.2111 111.511 59.1038 111.494 59.0023C111.505 59.1038 111.511 59.2111 111.511 59.3239ZM88.8706 97.8553C89.0061 97.8158 89.1472 97.7594 89.2882 97.686C89.1472 97.7594 89.0061 97.8102 88.8706 97.8553ZM87.9961 97.9061C87.8832 97.8835 87.776 97.844 87.6744 97.7932C87.776 97.844 87.8832 97.8779 87.9961 97.9061ZM88.8199 97.8666C88.6902 97.9004 88.5659 97.923 88.4418 97.9343C88.5659 97.923 88.6902 97.9061 88.8199 97.8666ZM88.3176 97.9399C88.3176 97.9399 88.3685 97.9399 88.3911 97.9399C88.3685 97.9399 88.3458 97.9399 88.3176 97.9399ZM80.2536 104.068C80.2423 103.989 80.2311 103.91 80.2198 103.826C80.2254 103.91 80.2423 103.984 80.2536 104.068ZM80.389 104.802C80.3664 104.717 80.3439 104.627 80.327 104.537C80.3439 104.627 80.3664 104.712 80.389 104.802ZM80.5357 105.321C80.5526 105.361 80.564 105.406 80.5809 105.445C80.564 105.406 80.5526 105.366 80.5357 105.321C80.5188 105.276 80.5076 105.237 80.4907 105.191C80.502 105.237 80.5188 105.282 80.5357 105.321ZM81.1396 106.506C81.0944 106.439 81.0493 106.371 81.0041 106.303C81.0493 106.371 81.0944 106.444 81.1396 106.506ZM81.5008 106.929C81.45 106.873 81.3992 106.817 81.3484 106.76C81.3992 106.817 81.45 106.879 81.5008 106.929ZM81.9015 107.279C81.845 107.24 81.7942 107.189 81.7434 107.15C81.7942 107.195 81.845 107.24 81.9015 107.279ZM109.389 43.636C108.475 43.636 107.527 43.8843 106.568 44.3752L80.6317 57.5915C76.9298 59.4763 74.0293 64.4592 74.0293 68.9286V100.496C74.0293 103.098 75.0337 105.101 76.7887 105.993L81.8167 108.555C81.8675 108.577 81.9127 108.6 81.9634 108.617C82.5503 108.888 83.1937 109.029 83.8766 109.029C84.7851 109.029 85.7275 108.78 86.6812 108.295L112.617 95.0789C116.319 93.1941 119.219 88.2112 119.219 83.7418V52.1741C119.219 49.6008 118.232 47.6144 116.511 46.7059C116.494 46.6946 116.477 46.6833 116.454 46.6776L111.426 44.1157C110.806 43.7996 110.117 43.636 109.384 43.636H109.389ZM87.9057 91.9977V71.9251C87.9057 70.6666 88.7917 69.1035 89.8018 68.59L105.354 60.667V80.7453C105.354 82.0037 104.468 83.5669 103.458 84.0804L87.9057 92.0034V91.9977Z"
+        fill="var(--illustration-stroke-tertiary)"
       />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M88.5306 97.9289C88.9707 98.1546 89.5295 98.1377 90.1502 97.8217L109.856 87.7825C111.244 87.0771 112.367 85.1302 112.367 83.4429V59.4596C112.367 58.5172 112.017 57.8513 111.47 57.5748L106.442 55.0128C106.989 55.2949 107.339 55.9552 107.339 56.8976V80.8809C107.339 82.5682 106.216 84.5151 104.828 85.2205L85.1222 95.2597C84.5071 95.5757 83.9427 95.5926 83.5026 95.3669L88.5306 97.9289Z"
+        d="M87.7306 97.7932C88.1707 98.0189 88.7295 98.0019 89.3502 97.6859L109.056 87.6468C110.444 86.9414 111.567 84.9945 111.567 83.3072V59.3239C111.567 58.3814 111.217 57.7156 110.67 57.439L105.642 54.8771C106.189 55.1592 106.539 55.8195 106.539 56.7619V80.7452C106.539 82.4325 105.416 84.3794 104.028 85.0848L84.3222 95.1239C83.7071 95.44 83.1427 95.4569 82.7026 95.2312L87.7306 97.7932Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M116.008 47.6821C114.97 47.1516 113.627 47.1967 112.165 47.9416L86.2295 61.1579C82.9283 62.8395 80.2422 67.4726 80.2422 71.4905V103.058C80.2422 105.299 81.0773 106.884 82.3865 107.55L77.3585 104.988C76.0493 104.322 75.2141 102.737 75.2141 100.496V68.9285C75.2141 64.9106 77.8947 60.2776 81.2015 58.5959L107.137 45.3797C108.599 44.6348 109.942 44.5896 110.98 45.1201L116.008 47.6821Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
         stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
         strokeWidth="0.4"
@@ -226,17 +242,7 @@ export function WorkItemVerticalStackIllustration({ className }: TIllustrationAs
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M116.808 47.8178C115.77 47.2873 114.427 47.3325 112.965 48.0774L87.0295 61.2936C83.7283 62.9753 81.0422 67.6083 81.0422 71.6262V103.194C81.0422 105.434 81.8773 107.02 83.1865 107.686L78.1585 105.124C76.8493 104.458 76.0141 102.872 76.0141 100.632V69.0642C76.0141 65.0463 78.6947 60.4133 82.0015 58.7316L107.937 45.5154C109.399 44.7705 110.742 44.7253 111.78 45.2558L116.808 47.8178Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-        strokeWidth="0.4"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M112.971 48.0774L87.0352 61.2936C83.7339 62.9753 81.0477 67.6083 81.0477 71.6262V103.194C81.0477 107.212 83.7283 109.114 87.0352 107.426L112.971 94.21C116.278 92.5227 118.958 87.8954 118.958 83.8774V52.3097C118.958 48.2918 116.284 46.3901 112.971 48.0774ZM112.373 83.4373C112.373 85.1246 111.25 87.0715 109.862 87.7769L90.1558 97.816C88.7676 98.5214 87.6447 97.7257 87.6447 96.0384V72.0551C87.6447 70.3678 88.7676 68.4209 90.1558 67.7155L109.862 57.6763C111.25 56.9709 112.373 57.7666 112.373 59.4539V83.4373Z"
+        d="M112.171 47.9416L86.2352 61.1579C82.9339 62.8395 80.2477 67.4725 80.2477 71.4905V103.058C80.2477 107.076 82.9283 108.978 86.2352 107.291L112.171 94.0743C115.478 92.387 118.158 87.7596 118.158 83.7417V52.174C118.158 48.1561 115.484 46.2543 112.171 47.9416ZM111.573 83.3016C111.573 84.9889 110.45 86.9357 109.062 87.6411L89.3558 97.6803C87.9676 98.3857 86.8447 97.59 86.8447 95.9027V71.9193C86.8447 70.232 87.9676 68.2852 89.3558 67.5798L109.062 57.5406C110.45 56.8352 111.573 57.6309 111.573 59.3182V83.3016Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
         stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
         strokeWidth="0.4"
diff --git a/packages/propel/src/empty-state/compact-empty-state.stories.tsx b/packages/propel/src/empty-state/compact-empty-state.stories.tsx
index d49d5f10b..4020b424f 100644
--- a/packages/propel/src/empty-state/compact-empty-state.stories.tsx
+++ b/packages/propel/src/empty-state/compact-empty-state.stories.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { EmptyStateCompact } from "./compact-empty-state";
 import type { BaseEmptyStateCommonProps } from "./types";
@@ -110,7 +116,7 @@ export const WithAssetKeyAndMultipleActions: Story = {
       {
         label: "Import",
         onClick: () => console.log("import-clicked"),
-        variant: "outline-primary",
+        variant: "secondary",
       },
     ],
   },
diff --git a/packages/propel/src/empty-state/compact-empty-state.tsx b/packages/propel/src/empty-state/compact-empty-state.tsx
index 4664fa2d8..7f13486e2 100644
--- a/packages/propel/src/empty-state/compact-empty-state.tsx
+++ b/packages/propel/src/empty-state/compact-empty-state.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 import { Button } from "../button/button";
 import { cn } from "../utils/classname";
@@ -26,18 +32,18 @@ export function EmptyStateCompact({
   return (
     <div className={cn("flex size-full items-center justify-center", rootAlignClasses, rootClassName)}>
       <div
-        className={cn("flex max-w-[25rem] size-full flex-col justify-center gap-3", containerAlignClasses, className)}
+        className={cn("flex size-full max-w-[25rem] flex-col justify-center gap-3", containerAlignClasses, className)}
       >
         {resolvedAsset && <div className="flex max-w-40 items-center">{resolvedAsset}</div>}
 
         <div className="flex flex-col gap-4">
           {title && description ? (
             <div className="flex flex-col gap-2">
-              {title && <h3 className="text-lg font-semibold leading-7 text-custom-text-100">{title}</h3>}
-              {description && <p className="text-sm leading-5 text-custom-text-300">{description}</p>}
+              {title && <h3 className="text-16 leading-7 font-semibold text-primary">{title}</h3>}
+              {description && <p className="text-13 leading-5 text-tertiary">{description}</p>}
             </div>
           ) : (
-            title && <p className="text-sm leading-5 text-custom-text-300">{title}</p>
+            title && <p className="text-13 leading-5 text-tertiary">{title}</p>
           )}
 
           {customButton
@@ -48,7 +54,7 @@ export function EmptyStateCompact({
                   {actions.map((action, index) => {
                     const { label, variant, ...rest } = action;
                     return (
-                      <Button key={index} variant={variant} {...rest}>
+                      <Button key={index} variant={variant} size="base" {...rest}>
                         {label}
                       </Button>
                     );
diff --git a/packages/propel/src/empty-state/detailed-empty-state.stories.tsx b/packages/propel/src/empty-state/detailed-empty-state.stories.tsx
index a06d2cbca..1e3e92368 100644
--- a/packages/propel/src/empty-state/detailed-empty-state.stories.tsx
+++ b/packages/propel/src/empty-state/detailed-empty-state.stories.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { EmptyStateDetailed } from "./detailed-empty-state";
 import type { BaseEmptyStateCommonProps } from "./types";
@@ -122,7 +128,7 @@ export const WithMultipleActions: Story = {
       {
         label: "Import Modules",
         onClick: () => console.log("import-clicked"),
-        variant: "outline-primary",
+        variant: "secondary",
       },
     ],
   },
@@ -169,7 +175,7 @@ export const ServerErrorState: Story = {
       {
         label: "Contact Support",
         onClick: () => console.log("support-clicked"),
-        variant: "outline-primary",
+        variant: "secondary",
       },
     ],
   },
diff --git a/packages/propel/src/empty-state/detailed-empty-state.tsx b/packages/propel/src/empty-state/detailed-empty-state.tsx
index 82f7103b6..be6d2255f 100644
--- a/packages/propel/src/empty-state/detailed-empty-state.tsx
+++ b/packages/propel/src/empty-state/detailed-empty-state.tsx
@@ -1,4 +1,10 @@
-import React from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// local imports
 import { Button } from "../button/button";
 import { cn } from "../utils/classname";
 import { getDetailedAsset } from "./assets/asset-registry";
@@ -24,7 +30,7 @@ export function EmptyStateDetailed({
     <div className={cn("flex size-full items-center justify-center", rootClassName)}>
       <div
         className={cn(
-          "flex max-w-[25rem] size-full flex-col justify-center gap-6 text-left",
+          "flex size-full max-w-[25rem] flex-col justify-center gap-6 text-left",
           {
             "items-center text-center": align === "center",
           },
@@ -40,8 +46,8 @@ export function EmptyStateDetailed({
         >
           {(title || description) && (
             <div className="flex flex-col gap-2">
-              {title && <h3 className="text-lg font-semibold leading-7 text-custom-text-100">{title}</h3>}
-              {description && <p className="text-sm leading-5 text-custom-text-300">{description}</p>}
+              {title && <h3 className="text-16 leading-7 font-semibold text-primary">{title}</h3>}
+              {description && <p className="text-13 leading-5 text-tertiary">{description}</p>}
             </div>
           )}
 
@@ -53,7 +59,7 @@ export function EmptyStateDetailed({
                   {actions.map((action, index) => {
                     const { label, variant, ...rest } = action;
                     return (
-                      <Button key={index} variant={variant} {...rest}>
+                      <Button key={index} variant={variant} size="xl" {...rest}>
                         {label}
                       </Button>
                     );
diff --git a/packages/propel/src/empty-state/empty-state.tsx b/packages/propel/src/empty-state/empty-state.tsx
index fd2f24467..982fff0b5 100644
--- a/packages/propel/src/empty-state/empty-state.tsx
+++ b/packages/propel/src/empty-state/empty-state.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 import type { CompactAssetType, DetailedAssetType } from "./assets/asset-types";
 import { EmptyStateCompact } from "./compact-empty-state";
diff --git a/packages/propel/src/empty-state/index.ts b/packages/propel/src/empty-state/index.ts
index b38181d5e..f69424c50 100644
--- a/packages/propel/src/empty-state/index.ts
+++ b/packages/propel/src/empty-state/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./assets";
 export * from "./compact-empty-state";
 export * from "./detailed-empty-state";
diff --git a/packages/propel/src/empty-state/types.ts b/packages/propel/src/empty-state/types.ts
index ae161bdb0..c1cd894f5 100644
--- a/packages/propel/src/empty-state/types.ts
+++ b/packages/propel/src/empty-state/types.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { TButtonVariant } from "../button/helper";
 import type { TAlign } from "../utils/placement";
 import type { CompactAssetType, DetailedAssetType } from "./assets/asset-types";
diff --git a/packages/propel/src/icon-button/helper.tsx b/packages/propel/src/icon-button/helper.tsx
new file mode 100644
index 000000000..a4e421cb9
--- /dev/null
+++ b/packages/propel/src/icon-button/helper.tsx
@@ -0,0 +1,56 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { VariantProps } from "class-variance-authority";
+import { cva } from "class-variance-authority";
+import type React from "react";
+
+export const iconButtonVariants = cva(
+  "inline-flex aspect-square items-center justify-center gap-1 whitespace-nowrap transition-colors focus-visible:outline-none disabled:pointer-events-none",
+  {
+    variants: {
+      variant: {
+        primary:
+          "bg-accent-primary text-on-color hover:bg-accent-primary-hover focus:bg-accent-primary-active active:bg-accent-primary-active disabled:bg-layer-disabled disabled:text-on-color-disabled",
+        "error-fill":
+          "bg-danger-primary text-on-color hover:bg-danger-primary-hover focus:bg-danger-primary-active active:bg-danger-primary-active disabled:bg-layer-disabled disabled:text-disabled",
+        "error-outline":
+          "border border-danger-strong bg-layer-2 text-danger-primary hover:bg-danger-subtle focus:bg-danger-subtle-hover active:bg-danger-subtle-hover disabled:border-subtle-1 disabled:bg-layer-2 disabled:text-disabled",
+        secondary:
+          "border border-strong bg-layer-2 text-secondary shadow-raised-100 hover:bg-layer-2-hover focus:bg-layer-2-active active:bg-layer-2-active disabled:border-subtle-1 disabled:bg-layer-transparent disabled:text-disabled",
+        tertiary:
+          "bg-layer-3 text-secondary hover:bg-layer-3-hover focus:bg-layer-3-active active:bg-layer-3-active disabled:bg-layer-transparent disabled:text-disabled",
+        ghost:
+          "bg-layer-transparent text-secondary hover:bg-layer-transparent-hover focus:bg-layer-transparent-active active:bg-layer-transparent-active disabled:bg-layer-transparent disabled:text-disabled",
+      },
+      size: {
+        sm: "size-5 rounded-sm",
+        base: "size-6 rounded-md",
+        lg: "size-7 rounded-md",
+        xl: "size-8 rounded-md",
+      },
+    },
+    defaultVariants: {
+      variant: "primary",
+      size: "base",
+    },
+  }
+);
+
+type IconButtonPropsWithChildren = React.ButtonHTMLAttributes<HTMLButtonElement> &
+  VariantProps<typeof iconButtonVariants> & {
+    icon: React.FC<{ className?: string }>;
+    loading?: boolean;
+    iconClassName?: string;
+  };
+export type IconButtonProps = Omit<IconButtonPropsWithChildren, "children">;
+
+export function getIconButtonStyling(
+  variant: NonNullable<IconButtonProps["variant"]>,
+  size: NonNullable<IconButtonProps["size"]>
+): string {
+  return iconButtonVariants({ variant, size });
+}
diff --git a/packages/propel/src/icon-button/icon-button.stories.tsx b/packages/propel/src/icon-button/icon-button.stories.tsx
new file mode 100644
index 000000000..c23aad60b
--- /dev/null
+++ b/packages/propel/src/icon-button/icon-button.stories.tsx
@@ -0,0 +1,180 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { IconButton } from "./icon-button";
+
+const icon = () => (
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <path d="M12 5v14m-7-7h14" />
+  </svg>
+);
+
+const meta = {
+  title: "Components/IconButton",
+  component: IconButton,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  args: {
+    icon,
+  },
+} satisfies Meta<typeof IconButton>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    icon,
+  },
+};
+
+export const Primary: Story = {
+  args: {
+    variant: "primary",
+    icon,
+  },
+};
+
+export const ErrorFill: Story = {
+  args: {
+    variant: "error-fill",
+    icon,
+  },
+};
+
+export const ErrorOutline: Story = {
+  args: {
+    variant: "error-outline",
+    icon,
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    variant: "secondary",
+    icon,
+  },
+};
+
+export const Tertiary: Story = {
+  args: {
+    variant: "tertiary",
+    icon,
+  },
+};
+
+export const Ghost: Story = {
+  args: {
+    variant: "ghost",
+    icon,
+  },
+};
+
+export const Small: Story = {
+  args: {
+    size: "sm",
+    icon,
+  },
+};
+
+export const Base: Story = {
+  args: {
+    size: "base",
+    icon,
+  },
+};
+
+export const Large: Story = {
+  args: {
+    size: "lg",
+    icon,
+  },
+};
+
+export const ExtraLarge: Story = {
+  args: {
+    size: "xl",
+    icon,
+  },
+};
+
+export const Loading: Story = {
+  args: {
+    loading: true,
+    icon,
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+    icon,
+  },
+};
+
+export const AllVariants: Story = {
+  render() {
+    return (
+      <div className="space-y-4">
+        <div className="space-y-2">
+          <h3 className="text-16 font-semibold">Primary Variants</h3>
+          <div className="flex flex-wrap gap-2">
+            <IconButton variant="primary" icon={icon} />
+            <IconButton variant="error-fill" icon={icon} />
+            <IconButton variant="error-outline" icon={icon} />
+            <IconButton variant="secondary" icon={icon} />
+            <IconButton variant="tertiary" icon={icon} />
+            <IconButton variant="ghost" icon={icon} />
+          </div>
+        </div>
+      </div>
+    );
+  },
+};
+
+export const AllSizes: Story = {
+  render() {
+    return (
+      <div className="space-y-4">
+        <div className="flex items-center gap-2">
+          <IconButton size="sm" icon={icon} />
+          <IconButton size="base" icon={icon} />
+          <IconButton size="lg" icon={icon} />
+          <IconButton size="xl" icon={icon} />
+        </div>
+      </div>
+    );
+  },
+};
+
+export const AllStates: Story = {
+  render() {
+    return (
+      <div className="space-y-4">
+        <div className="space-y-2">
+          <h3 className="text-16 font-semibold">Button States</h3>
+          <div className="flex flex-wrap gap-2">
+            <IconButton icon={icon} />
+            <IconButton loading icon={icon} />
+            <IconButton disabled icon={icon} />
+          </div>
+        </div>
+      </div>
+    );
+  },
+};
diff --git a/packages/propel/src/icon-button/icon-button.tsx b/packages/propel/src/icon-button/icon-button.tsx
new file mode 100644
index 000000000..626d9826c
--- /dev/null
+++ b/packages/propel/src/icon-button/icon-button.tsx
@@ -0,0 +1,52 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+import { cn } from "../utils";
+import type { IconButtonProps } from "./helper";
+import { iconButtonVariants } from "./helper";
+
+const IconButton = React.forwardRef(function IconButton(
+  props: IconButtonProps,
+  ref: React.ForwardedRef<HTMLButtonElement>
+) {
+  const {
+    variant = "primary",
+    size = "base",
+    className = "",
+    type = "button",
+    loading = false,
+    disabled = false,
+    icon: Icon,
+    iconClassName = "",
+    ...rest
+  } = props;
+
+  return (
+    <button
+      ref={ref}
+      type={type}
+      className={cn(iconButtonVariants({ variant, size }), className)}
+      disabled={disabled || loading}
+      {...rest}
+    >
+      <Icon
+        className={cn(
+          {
+            "size-3.5": size === "sm",
+            "size-4": size === "base" || size === "lg",
+            "size-5": size === "xl",
+          },
+          iconClassName
+        )}
+      />
+    </button>
+  );
+});
+
+IconButton.displayName = "plane-ui-icon-button";
+
+export { IconButton };
diff --git a/packages/propel/src/icon-button/index.ts b/packages/propel/src/icon-button/index.ts
new file mode 100644
index 000000000..3788f834e
--- /dev/null
+++ b/packages/propel/src/icon-button/index.ts
@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export { IconButton } from "./icon-button";
+export { getIconButtonStyling } from "./helper";
+export type { IconButtonProps } from "./helper";
diff --git a/packages/propel/src/icons/actions/add-circle-icon.tsx b/packages/propel/src/icons/actions/add-circle-icon.tsx
index 319e89a9a..2fcf3df1a 100644
--- a/packages/propel/src/icons/actions/add-circle-icon.tsx
+++ b/packages/propel/src/icons/actions/add-circle-icon.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 
 import { IconWrapper } from "../icon-wrapper";
diff --git a/packages/propel/src/icons/actions/add-icon.tsx b/packages/propel/src/icons/actions/add-icon.tsx
index d6a85e0e7..2ec08e4f0 100644
--- a/packages/propel/src/icons/actions/add-icon.tsx
+++ b/packages/propel/src/icons/actions/add-icon.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 
 import { IconWrapper } from "../icon-wrapper";
diff --git a/packages/propel/src/icons/actions/add-reaction-icon.tsx b/packages/propel/src/icons/actions/add-reaction-icon.tsx
index b1c3ae3d0..6942f8327 100644
--- a/packages/propel/src/icons/actions/add-reaction-icon.tsx
+++ b/packages/propel/src/icons/actions/add-reaction-icon.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 
 import { IconWrapper } from "../icon-wrapper";
diff --git a/packages/propel/src/icons/actions/add-workitem-icon.tsx b/packages/propel/src/icons/actions/add-workitem-icon.tsx
index 554dfe644..83668de37 100644
--- a/packages/propel/src/icons/actions/add-workitem-icon.tsx
+++ b/packages/propel/src/icons/actions/add-workitem-icon.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 
 import { IconWrapper } from "../icon-wrapper";
diff --git a/packages/propel/src/icons/actions/check-icon.tsx b/packages/propel/src/icons/actions/check-icon.tsx
new file mode 100644
index 000000000..cc32efaf8
--- /dev/null
+++ b/packages/propel/src/icons/actions/check-icon.tsx
@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import { IconWrapper } from "../icon-wrapper";
+import type { ISvgIcons } from "../type";
+
+export const CheckIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => (
+  <IconWrapper color={color} {...rest}>
+    <path
+      d="M12.9746 3.78242C13.2185 3.53862 13.6143 3.53873 13.8584 3.78242C14.1024 4.0265 14.1024 4.42311 13.8584 4.66719L6.52534 12.0002C6.28132 12.2442 5.88565 12.2441 5.64155 12.0002L2.30757 8.66719C2.06349 8.42311 2.06349 8.0265 2.30757 7.78242C2.55165 7.53835 2.94826 7.53835 3.19234 7.78242L6.08296 10.674L12.9746 3.78242Z"
+      fill={color}
+    />
+  </IconWrapper>
+);
diff --git a/packages/propel/src/icons/actions/close-icon.tsx b/packages/propel/src/icons/actions/close-icon.tsx
index e0fa242b9..aaeaff96a 100644
--- a/packages/propel/src/icons/actions/close-icon.tsx
+++ b/packages/propel/src/icons/actions/close-icon.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 
 import { IconWrapper } from "../icon-wrapper";
diff --git a/packages/propel/src/icons/actions/copy-icon.tsx b/packages/propel/src/icons/actions/copy-icon.tsx
new file mode 100644
index 000000000..7d3aaf193
--- /dev/null
+++ b/packages/propel/src/icons/actions/copy-icon.tsx
@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import { IconWrapper } from "../icon-wrapper";
+import type { ISvgIcons } from "../type";
+
+export const CopyIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => (
+  <IconWrapper color={color} {...rest}>
+    <path
+      d="M12.8751 8.13965C12.8751 7.73983 12.8748 7.46942 12.8614 7.26075C12.8483 7.05591 12.8244 6.95774 12.7999 6.89649C12.735 6.73455 12.6426 6.63099 12.5597 6.57715C12.5561 6.57481 12.528 6.55459 12.3976 6.54102C12.254 6.52612 12.0611 6.52539 11.7403 6.52539H8.11045C7.78934 6.52539 7.5959 6.52608 7.45225 6.54102C7.32361 6.5544 7.29534 6.57436 7.29112 6.57715C7.20815 6.63096 7.11485 6.73431 7.04991 6.89649C7.02538 6.95774 7.00153 7.05591 6.98838 7.26075C6.975 7.46942 6.97471 7.73985 6.97471 8.13965V12.7598C6.97471 13.1599 6.97498 13.4309 6.98838 13.6397C7.0015 13.8439 7.02545 13.9417 7.04991 14.0029C7.11485 14.1652 7.20813 14.2694 7.29112 14.3232C7.29593 14.3264 7.32527 14.3462 7.45225 14.3594C7.5959 14.3743 7.78934 14.375 8.11045 14.375H11.7403C12.061 14.375 12.254 14.3743 12.3976 14.3594C12.528 14.3458 12.5561 14.3256 12.5597 14.3232C12.6426 14.2694 12.735 14.1651 12.7999 14.0029C12.8244 13.9417 12.8483 13.844 12.8614 13.6397C12.8748 13.4309 12.8751 13.1599 12.8751 12.7598V8.13965ZM9.02549 3.09961C9.02549 2.39729 9.01698 2.19651 8.97178 2.05762C8.90057 1.8389 8.77938 1.71171 8.67979 1.65918C8.67912 1.65883 8.67283 1.6557 8.65538 1.65137C8.63581 1.64655 8.60298 1.64052 8.54795 1.63574C8.42783 1.62531 8.26723 1.625 8.0001 1.625H4.25987C3.93918 1.625 3.74622 1.62573 3.60264 1.64063C3.47216 1.6542 3.44414 1.67442 3.44053 1.67676C3.35757 1.73059 3.26522 1.8349 3.2003 1.99707C3.17582 2.05833 3.1519 2.15596 3.13877 2.36035C3.12537 2.56912 3.1251 2.84008 3.1251 3.24024V8C3.1251 8.70196 3.13274 8.90309 3.17784 9.042C3.24905 9.26082 3.37119 9.38792 3.4708 9.44043C3.47181 9.44097 3.4776 9.44411 3.49424 9.44825C3.51376 9.45308 3.5472 9.45906 3.60264 9.46387C3.72273 9.47427 3.88361 9.47461 4.15049 9.47461C4.49536 9.47482 4.77528 9.75474 4.77549 10.0996C4.77549 10.4447 4.49549 10.7244 4.15049 10.7246C3.90511 10.7246 3.68091 10.7252 3.49424 10.709C3.29805 10.692 3.0914 10.6532 2.8878 10.5459C2.4484 10.3142 2.14142 9.89594 1.98936 9.42871C1.86727 9.05317 1.8751 8.60175 1.8751 8V3.24024C1.8751 2.85632 1.87513 2.53842 1.8917 2.28028C1.90853 2.01827 1.94479 1.7704 2.04014 1.53223C2.18612 1.16761 2.42988 0.842556 2.76084 0.627932C2.99239 0.477856 3.23654 0.422046 3.47276 0.397464C3.6959 0.37426 3.96501 0.375002 4.25987 0.375003H8.0001C8.24551 0.375003 8.46967 0.374417 8.65635 0.390628C8.85246 0.407678 9.0593 0.446434 9.2628 0.553714C9.7021 0.785394 10.0082 1.20375 10.1603 1.6709C10.2825 2.04646 10.2755 2.49781 10.2755 3.09961C10.2755 3.44466 9.99549 3.7244 9.65049 3.72461C9.30531 3.72461 9.02549 3.44479 9.02549 3.09961ZM14.1251 12.7598C14.1251 13.1437 14.1251 13.4616 14.1085 13.7197C14.0917 13.9817 14.0554 14.2296 13.9601 14.4678C13.8141 14.8324 13.5703 15.1574 13.2394 15.3721C13.0078 15.5221 12.7637 15.578 12.5274 15.6025C12.3043 15.6257 12.0352 15.625 11.7403 15.625H8.11045C7.81566 15.625 7.54647 15.6257 7.32334 15.6025C7.08697 15.578 6.84215 15.5223 6.61045 15.3721C6.27949 15.1574 6.03573 14.8324 5.88975 14.4678C5.79443 14.2296 5.75814 13.9817 5.74131 13.7197C5.72474 13.4616 5.72471 13.1437 5.72471 12.7598V8.13965C5.72471 7.756 5.72476 7.43869 5.74131 7.18067C5.75814 6.91859 5.79438 6.66987 5.88975 6.43164C6.03572 6.06725 6.2797 5.74288 6.61045 5.52832C6.84215 5.37807 7.08697 5.32243 7.32334 5.29785C7.54648 5.27468 7.81565 5.27539 8.11045 5.27539H11.7403C12.0352 5.27539 12.3043 5.27465 12.5274 5.29785C12.7637 5.32245 13.0078 5.37817 13.2394 5.52832C13.5702 5.74285 13.8141 6.06723 13.9601 6.43164C14.0554 6.66987 14.0917 6.91859 14.1085 7.18067C14.1251 7.43869 14.1251 7.75599 14.1251 8.13965V12.7598Z"
+      fill={color}
+    />
+  </IconWrapper>
+);
diff --git a/packages/propel/src/icons/actions/copy-link.tsx b/packages/propel/src/icons/actions/copy-link.tsx
new file mode 100644
index 000000000..acbb3cc1d
--- /dev/null
+++ b/packages/propel/src/icons/actions/copy-link.tsx
@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { IconWrapper } from "../icon-wrapper";
+import type { ISvgIcons } from "../type";
+
+export function CopyLinkIcon({ color = "currentColor", ...rest }: ISvgIcons) {
+  return (
+    <IconWrapper color={color} clipPathId="clip0_2890_23" {...rest}>
+      <path
+        d="M3.30277 7.07328C3.54686 6.8296 3.94261 6.82939 4.18656 7.07328C4.43064 7.31736 4.43064 7.71397 4.18656 7.95805L3.2432 8.90043C2.18575 9.95806 2.18572 11.6729 3.2432 12.7305C4.30081 13.7882 6.01563 13.788 7.07328 12.7305L8.01664 11.7881C8.26073 11.5441 8.65636 11.544 8.90043 11.7881C9.14426 12.0322 9.14443 12.4279 8.90043 12.6719L7.95707 13.6143C6.41125 15.16 3.90517 15.1601 2.35941 13.6143C0.813772 12.0685 0.813807 9.56242 2.35941 8.01664L3.30277 7.07328ZM9.87797 5.21195C10.122 4.96788 10.5187 4.96787 10.7627 5.21195C11.0064 5.45601 11.0066 5.85177 10.7627 6.09574L6.09574 10.7618C5.85166 11.0058 5.45603 11.0058 5.21195 10.7618C4.96799 10.5177 4.96791 10.122 5.21195 9.87797L9.87797 5.21195ZM8.01664 2.35941C9.56242 0.813804 12.0685 0.813775 13.6143 2.35941C15.16 3.90517 15.1599 6.41121 13.6143 7.95707L12.6719 8.90043C12.4279 9.14442 12.0322 9.14425 11.7881 8.90043C11.544 8.65635 11.544 8.26072 11.7881 8.01664L12.7305 7.07328C13.788 6.01556 13.7881 4.3008 12.7305 3.2432C11.6729 2.18572 9.95805 2.18575 8.90043 3.2432L7.95707 4.18656C7.71296 4.4303 7.31724 4.43053 7.07328 4.18656C6.82935 3.94259 6.82956 3.54686 7.07328 3.30277L8.01664 2.35941Z"
+        fill={color}
+      />
+    </IconWrapper>
+  );
+}
diff --git a/packages/propel/src/icons/actions/edit-icon.tsx b/packages/propel/src/icons/actions/edit-icon.tsx
new file mode 100644
index 000000000..a260d498b
--- /dev/null
+++ b/packages/propel/src/icons/actions/edit-icon.tsx
@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import { IconWrapper } from "../icon-wrapper";
+import type { ISvgIcons } from "../type";
+
+export const EditIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => {
+  const clipPathId = React.useId();
+  return (
+    <IconWrapper color={color} clipPathId={clipPathId} {...rest}>
+      <path
+        d="M10.7494 1.63573C11.7299 0.655278 13.3197 0.655278 14.3002 1.63573C15.2806 2.61619 15.2807 4.20607 14.3002 5.18651L5.49553 13.9902C5.31697 14.1688 5.16873 14.3209 4.99065 14.4385C4.84347 14.5355 4.68368 14.6127 4.51604 14.667C4.31301 14.7326 4.10085 14.7533 3.85002 14.7812L1.59416 15.0322C1.40546 15.0532 1.2167 14.9868 1.08244 14.8525C0.948476 14.7183 0.882789 14.5303 0.903733 14.3418L1.15471 12.0859C1.18258 11.8351 1.2032 11.6231 1.26897 11.4199C1.3233 11.2521 1.39958 11.0924 1.49651 10.9453C1.61409 10.7669 1.76748 10.6187 1.94573 10.4404L10.7494 1.63573ZM2.82951 11.3242C2.61594 11.5378 2.57192 11.5851 2.54045 11.6328C2.50525 11.6862 2.47707 11.7441 2.45744 11.8047C2.43982 11.8591 2.43027 11.9232 2.3969 12.2236L2.23186 13.7031L3.71233 13.539C3.86263 13.5223 3.95375 13.5118 4.01408 13.5029L4.13127 13.4775C4.19171 13.4579 4.24916 13.4304 4.30217 13.3955C4.35014 13.3638 4.39813 13.32 4.61174 13.1064L10.974 6.74413L9.19084 4.96092L2.82951 11.3242ZM13.4164 2.51952C12.9241 2.02721 12.1255 2.02721 11.6332 2.51952L10.0746 4.07713L11.8578 5.86034L13.4164 4.30272C13.9087 3.81043 13.9087 3.01182 13.4164 2.51952Z"
+        fill={color}
+      />
+    </IconWrapper>
+  );
+};
diff --git a/packages/propel/src/icons/actions/filter-applied-icon.tsx b/packages/propel/src/icons/actions/filter-applied-icon.tsx
new file mode 100644
index 000000000..5dae6e5e7
--- /dev/null
+++ b/packages/propel/src/icons/actions/filter-applied-icon.tsx
@@ -0,0 +1,27 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import { IconWrapper } from "../icon-wrapper";
+import type { ISvgIcons } from "../type";
+
+export function FilterAppliedIcon({ color = "text-icon-brand", ...rest }: ISvgIcons) {
+  const clipPathId = React.useId();
+
+  return (
+    <IconWrapper color={color} clipPathId={clipPathId} {...rest}>
+      <path
+        d="M15.3 3.65C15.3 5.11355 14.1136 6.3 12.65 6.3C11.1864 6.3 10 5.11355 10 3.65C10 2.18645 11.1864 1 12.65 1C14.1136 1 15.3 2.18645 15.3 3.65Z"
+        fill={color}
+      />
+      <path
+        d="M9.99984 12.3333C10.368 12.3333 10.6665 12.6318 10.6665 13C10.6665 13.3682 10.368 13.6667 9.99984 13.6667H5.99984C5.63165 13.6667 5.33317 13.3682 5.33317 13C5.33317 12.6318 5.63165 12.3333 5.99984 12.3333H9.99984ZM11.9998 7.66667C12.368 7.66667 12.6665 7.96514 12.6665 8.33333C12.6665 8.70152 12.368 9 11.9998 9H3.99984C3.63165 9 3.33317 8.70152 3.33317 8.33333C3.33317 7.96514 3.63165 7.66667 3.99984 7.66667H11.9998ZM7.99984 3C8.36803 3 8.6665 3.29848 8.6665 3.66667C8.6665 4.03486 8.36803 4.33333 7.99984 4.33333H1.33317C0.964981 4.33333 0.666504 4.03486 0.666504 3.66667C0.666504 3.29848 0.964981 3 1.33317 3H7.99984Z"
+        fill={color}
+      />
+    </IconWrapper>
+  );
+}
diff --git a/packages/propel/src/icons/actions/filter-icon.tsx b/packages/propel/src/icons/actions/filter-icon.tsx
new file mode 100644
index 000000000..8243d2eff
--- /dev/null
+++ b/packages/propel/src/icons/actions/filter-icon.tsx
@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import { IconWrapper } from "../icon-wrapper";
+import type { ISvgIcons } from "../type";
+
+export function FilterIcon({ color = "currentColor", ...rest }: ISvgIcons) {
+  const clipPathId = React.useId();
+
+  return (
+    <IconWrapper color={color} clipPathId={clipPathId} {...rest}>
+      <path
+        d="M9.9751 11.3496C10.3203 11.3496 10.6001 11.6294 10.6001 11.9746C10.6001 12.3198 10.3203 12.5996 9.9751 12.5996H5.9751C5.62992 12.5996 5.3501 12.3198 5.3501 11.9746C5.3501 11.6294 5.62992 11.3496 5.9751 11.3496H9.9751ZM11.9751 7.34961C12.3203 7.34961 12.6001 7.62943 12.6001 7.97461C12.6001 8.31979 12.3203 8.59961 11.9751 8.59961H3.9751C3.62992 8.59961 3.3501 8.31979 3.3501 7.97461C3.3501 7.62943 3.62992 7.34961 3.9751 7.34961H11.9751ZM13.9751 3.34961C14.3203 3.34961 14.6001 3.62943 14.6001 3.97461C14.6001 4.31979 14.3203 4.59961 13.9751 4.59961H1.9751C1.62992 4.59961 1.3501 4.31979 1.3501 3.97461C1.3501 3.62943 1.62992 3.34961 1.9751 3.34961H13.9751Z"
+        fill={color}
+      />
+    </IconWrapper>
+  );
+}
diff --git a/packages/propel/src/icons/actions/globe-icon.tsx b/packages/propel/src/icons/actions/globe-icon.tsx
new file mode 100644
index 000000000..1ed2cf379
--- /dev/null
+++ b/packages/propel/src/icons/actions/globe-icon.tsx
@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import { IconWrapper } from "../icon-wrapper";
+import type { ISvgIcons } from "../type";
+
+export const GlobeIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => {
+  const clipPathId = React.useId();
+  return (
+    <IconWrapper color={color} clipPathId={clipPathId} {...rest}>
+      <path
+        d="M8.00195 0.709961C12.0288 0.710137 15.293 3.97498 15.293 8.00195C15.2928 12.0287 12.0287 15.2928 8.00195 15.293C3.97498 15.293 0.710137 12.0288 0.709961 8.00195C0.709961 3.97488 3.97488 0.709961 8.00195 0.709961ZM1.99219 8.62695C2.25614 11.1937 4.12706 13.2827 6.58203 13.874C5.52513 12.3194 4.88848 10.5118 4.74219 8.62695H1.99219ZM11.2607 8.62695C11.1145 10.5117 10.4787 12.3194 9.42188 13.874C11.8765 13.2825 13.7468 11.1935 14.0107 8.62695H11.2607ZM5.99609 8.62695C6.15854 10.4767 6.85546 12.2382 8.00098 13.6982C9.14679 12.2381 9.84438 10.4769 10.0068 8.62695H5.99609ZM9.42188 2.12891C10.4789 3.68372 11.1146 5.49193 11.2607 7.37695H14.0107C13.747 4.81011 11.8768 2.72047 9.42188 2.12891ZM8.00098 2.30469C6.85524 3.7649 6.15844 5.5269 5.99609 7.37695H10.0068C9.84448 5.52664 9.14701 3.76502 8.00098 2.30469ZM6.58105 2.12891C4.12629 2.72057 2.25586 4.81019 1.99219 7.37695H4.74219C4.88837 5.49198 5.52413 3.6837 6.58105 2.12891Z"
+        fill={color}
+      />
+    </IconWrapper>
+  );
+};
diff --git a/packages/propel/src/icons/actions/index.ts b/packages/propel/src/icons/actions/index.ts
index 60a0f1ef1..b09761131 100644
--- a/packages/propel/src/icons/actions/index.ts
+++ b/packages/propel/src/icons/actions/index.ts
@@ -1,7 +1,26 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./add-circle-icon";
 export * from "./add-icon";
 export * from "./add-workitem-icon";
 export * from "./add-reaction-icon";
+export * from "./check-icon";
 export * from "./close-icon";
+export * from "./filter-icon";
+export * from "./filter-applied-icon";
+export * from "./copy-icon";
+export * from "./edit-icon";
+export * from "./globe-icon";
+export * from "./link-icon";
+export * from "./lock-icon";
+export * from "./new-tab-icon";
 export * from "./search-icon";
+export * from "./plus-icon";
 export * from "./preferences-icon";
+export * from "./copy-link";
+export * from "./upgrade-icon";
+export * from "./trash-icon";
diff --git a/packages/propel/src/icons/actions/link-icon.tsx b/packages/propel/src/icons/actions/link-icon.tsx
new file mode 100644
index 000000000..907e76f31
--- /dev/null
+++ b/packages/propel/src/icons/actions/link-icon.tsx
@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import { IconWrapper } from "../icon-wrapper";
+import type { ISvgIcons } from "../type";
+
+export const LinkIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => (
+  <IconWrapper color={color} {...rest}>
+    <path
+      d="M3.30277 7.07328C3.54686 6.8296 3.94261 6.82939 4.18656 7.07328C4.43064 7.31736 4.43064 7.71397 4.18656 7.95805L3.2432 8.90043C2.18575 9.95806 2.18572 11.6729 3.2432 12.7305C4.30081 13.7882 6.01563 13.788 7.07328 12.7305L8.01664 11.7881C8.26073 11.5441 8.65636 11.544 8.90043 11.7881C9.14426 12.0322 9.14443 12.4279 8.90043 12.6719L7.95707 13.6143C6.41125 15.16 3.90517 15.1601 2.35941 13.6143C0.813772 12.0685 0.813807 9.56242 2.35941 8.01664L3.30277 7.07328ZM9.87797 5.21195C10.122 4.96788 10.5187 4.96787 10.7627 5.21195C11.0064 5.45601 11.0066 5.85177 10.7627 6.09574L6.09574 10.7618C5.85166 11.0058 5.45603 11.0058 5.21195 10.7618C4.96799 10.5177 4.96791 10.122 5.21195 9.87797L9.87797 5.21195ZM8.01664 2.35941C9.56242 0.813804 12.0685 0.813775 13.6143 2.35941C15.16 3.90517 15.1599 6.41121 13.6143 7.95707L12.6719 8.90043C12.4279 9.14442 12.0322 9.14425 11.7881 8.90043C11.544 8.65635 11.544 8.26072 11.7881 8.01664L12.7305 7.07328C13.788 6.01556 13.7881 4.3008 12.7305 3.2432C11.6729 2.18572 9.95805 2.18575 8.90043 3.2432L7.95707 4.18656C7.71296 4.4303 7.31724 4.43053 7.07328 4.18656C6.82935 3.94259 6.82956 3.54686 7.07328 3.30277L8.01664 2.35941Z"
+      fill={color}
+    />
+  </IconWrapper>
+);
diff --git a/packages/propel/src/icons/actions/lock-icon.tsx b/packages/propel/src/icons/actions/lock-icon.tsx
new file mode 100644
index 000000000..0248dd52d
--- /dev/null
+++ b/packages/propel/src/icons/actions/lock-icon.tsx
@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import { IconWrapper } from "../icon-wrapper";
+import type { ISvgIcons } from "../type";
+
+export const LockIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => (
+  <IconWrapper color={color} {...rest}>
+    <path
+      d="M13.3501 10.5078C13.3501 9.9375 13.3494 9.54724 13.3247 9.24512C13.3006 8.95048 13.2573 8.79472 13.2007 8.68359C13.0689 8.42488 12.8578 8.21482 12.5991 8.08301C12.488 8.0264 12.3323 7.98209 12.0376 7.95801C11.7355 7.93334 11.3452 7.93262 10.7749 7.93262H5.17529C4.60506 7.93262 4.21472 7.93334 3.9126 7.95801C3.61782 7.98209 3.46218 8.02641 3.35107 8.08301C3.09235 8.21483 2.88133 8.42488 2.74951 8.68359C2.69292 8.79472 2.64957 8.95048 2.62549 9.24512C2.6008 9.54724 2.6001 9.9375 2.6001 10.5078V10.7744C2.6001 11.3447 2.60082 11.735 2.62549 12.0371C2.64955 12.3316 2.69298 12.4875 2.74951 12.5986C2.88133 12.8573 3.09235 13.0684 3.35107 13.2002C3.46216 13.2567 3.61805 13.3002 3.9126 13.3242C4.21472 13.3489 4.60504 13.3496 5.17529 13.3496H10.7749C11.3452 13.3496 11.7355 13.3489 12.0376 13.3242C12.3321 13.3002 12.488 13.2567 12.5991 13.2002C12.8578 13.0684 13.0689 12.8573 13.2007 12.5986C13.2572 12.4875 13.3006 12.3316 13.3247 12.0371C13.3494 11.735 13.3501 11.3447 13.3501 10.7744V10.5078ZM10.6831 5.30762C10.6829 3.812 9.47075 2.59961 7.9751 2.59961C6.47944 2.59961 5.26727 3.812 5.26709 5.30762V6.68262H10.6831V5.30762ZM11.9331 6.69922C12.0046 6.7028 12.0733 6.70654 12.1392 6.71191C12.5112 6.74231 12.8499 6.80753 13.1665 6.96875C13.6604 7.2204 14.0623 7.62227 14.314 8.11621L14.3696 8.23633C14.4906 8.51833 14.5442 8.81795 14.5708 9.14355C14.6006 9.50836 14.6001 9.95818 14.6001 10.5078V10.7744C14.6001 11.3239 14.6006 11.7739 14.5708 12.1387C14.5404 12.5107 14.4752 12.8494 14.314 13.166C14.0623 13.66 13.6605 14.0618 13.1665 14.3135C12.8499 14.4747 12.5112 14.5399 12.1392 14.5703C11.7744 14.6001 11.3244 14.5996 10.7749 14.5996H5.17529C4.62577 14.5996 4.17582 14.6001 3.81104 14.5703C3.43898 14.5399 3.10032 14.4748 2.78369 14.3135C2.28977 14.0618 1.88791 13.66 1.63623 13.166C1.47496 12.8494 1.40979 12.5107 1.3794 12.1387C1.34962 11.7739 1.3501 11.3239 1.3501 10.7744V10.5078C1.3501 9.95817 1.3496 9.50836 1.3794 9.14355C1.4098 8.7714 1.47488 8.43292 1.63623 8.11621L1.73779 7.93555C1.99002 7.52435 2.35152 7.18894 2.78369 6.96875C3.10029 6.80752 3.43903 6.74231 3.81104 6.71191C3.87691 6.70654 3.94559 6.7028 4.01709 6.69922V5.30762C4.01727 3.12164 5.78908 1.34961 7.9751 1.34961C10.1611 1.34961 11.9329 3.12164 11.9331 5.30762V6.69922Z"
+      fill={color}
+    />
+  </IconWrapper>
+);
diff --git a/packages/propel/src/icons/actions/new-tab-icon.tsx b/packages/propel/src/icons/actions/new-tab-icon.tsx
new file mode 100644
index 000000000..281f517e9
--- /dev/null
+++ b/packages/propel/src/icons/actions/new-tab-icon.tsx
@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import { IconWrapper } from "../icon-wrapper";
+import type { ISvgIcons } from "../type";
+
+export const NewTabIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => (
+  <IconWrapper color={color} {...rest}>
+    <path
+      d="M1.3501 10.7744V6.50781C1.3501 5.95818 1.3496 5.50837 1.3794 5.14355C1.4098 4.7714 1.47486 4.43291 1.63623 4.11621C1.8879 3.62229 2.28977 3.22041 2.78369 2.96875C3.10029 2.80752 3.43903 2.74231 3.81104 2.71191C4.17581 2.68214 4.62578 2.68262 5.17529 2.68262H6.64209C6.98701 2.68279 7.26691 2.9627 7.26709 3.30762C7.26709 3.65269 6.98712 3.93244 6.64209 3.93262H5.17529C4.60506 3.93262 4.21472 3.93334 3.9126 3.95801C3.61782 3.98209 3.46219 4.02641 3.35107 4.08301C3.09235 4.21483 2.88134 4.42487 2.74951 4.68359C2.69293 4.79469 2.64958 4.95043 2.62549 5.24512C2.6008 5.54724 2.6001 5.93752 2.6001 6.50781V10.7744C2.6001 11.3447 2.60082 11.735 2.62549 12.0371C2.64955 12.3316 2.69298 12.4875 2.74951 12.5986C2.88133 12.8573 3.09235 13.0684 3.35107 13.2002C3.46216 13.2567 3.61805 13.3002 3.9126 13.3242C4.21472 13.3489 4.60504 13.3496 5.17529 13.3496H9.4419C10.0122 13.3496 10.4025 13.3489 10.7046 13.3242C10.9992 13.3001 11.155 13.2568 11.2661 13.2002C11.5248 13.0684 11.7349 12.8573 11.8667 12.5986C11.9233 12.4875 11.9676 12.3318 11.9917 12.0371C12.0164 11.735 12.0171 11.3447 12.0171 10.7744V9.30762C12.0173 8.96259 12.297 8.68262 12.6421 8.68262C12.987 8.68279 13.2669 8.9627 13.2671 9.30762V10.7744C13.2671 11.3239 13.2676 11.7739 13.2378 12.1387C13.2074 12.5107 13.1422 12.8494 12.981 13.166C12.7608 13.5982 12.4253 13.9597 12.0142 14.2119L11.8335 14.3135C11.5168 14.4748 11.1783 14.5399 10.8062 14.5703C10.4413 14.6001 9.99153 14.5996 9.4419 14.5996H5.17529C4.62577 14.5996 4.17582 14.6001 3.81104 14.5703C3.43898 14.5399 3.10032 14.4748 2.78369 14.3135C2.28977 14.0618 1.88791 13.66 1.63623 13.166C1.47496 12.8494 1.40979 12.5107 1.3794 12.1387C1.34962 11.7739 1.3501 11.3239 1.3501 10.7744ZM14.6001 5.97461C14.6001 6.31979 14.3203 6.59961 13.9751 6.59961C13.6299 6.59961 13.3501 6.31979 13.3501 5.97461V3.4834L9.0835 7.75C8.83941 7.99391 8.44373 7.99402 8.19971 7.75C7.95568 7.50598 7.95579 7.1103 8.19971 6.86621L12.4653 2.59961H9.9751C9.62992 2.59961 9.3501 2.31979 9.3501 1.97461C9.3501 1.62943 9.62992 1.34961 9.9751 1.34961H13.9751C14.3203 1.34961 14.6001 1.62943 14.6001 1.97461V5.97461Z"
+      fill={color}
+    />
+  </IconWrapper>
+);
diff --git a/packages/propel/src/icons/actions/plus-icon.tsx b/packages/propel/src/icons/actions/plus-icon.tsx
new file mode 100644
index 000000000..9e09c0a0f
--- /dev/null
+++ b/packages/propel/src/icons/actions/plus-icon.tsx
@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import { IconWrapper } from "../icon-wrapper";
+import type { ISvgIcons } from "../type";
+
+export const PlusIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => (
+  <IconWrapper color={color} {...rest}>
+    <path
+      d="M7.37549 12.666V8.625H3.3335C2.98843 8.625 2.70867 8.34503 2.7085 8C2.7085 7.65482 2.98832 7.375 3.3335 7.375H7.37549V3.33301C7.37549 2.98783 7.65531 2.70801 8.00049 2.70801C8.34552 2.70818 8.62549 2.98794 8.62549 3.33301V7.375H12.6665C13.0117 7.375 13.2915 7.65482 13.2915 8C13.2913 8.34503 13.0116 8.625 12.6665 8.625H8.62549V12.666C8.62549 13.0111 8.34552 13.2908 8.00049 13.291C7.65531 13.291 7.37549 13.0112 7.37549 12.666Z"
+      fill={color}
+    />
+  </IconWrapper>
+);
diff --git a/packages/propel/src/icons/actions/preferences-icon.tsx b/packages/propel/src/icons/actions/preferences-icon.tsx
index 60a3ec3eb..de08dc8b6 100644
--- a/packages/propel/src/icons/actions/preferences-icon.tsx
+++ b/packages/propel/src/icons/actions/preferences-icon.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 
 import { IconWrapper } from "../icon-wrapper";
diff --git a/packages/propel/src/icons/actions/search-icon.tsx b/packages/propel/src/icons/actions/search-icon.tsx
index 19a2ca34a..6cd03244e 100644
--- a/packages/propel/src/icons/actions/search-icon.tsx
+++ b/packages/propel/src/icons/actions/search-icon.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 
 import { IconWrapper } from "../icon-wrapper";
diff --git a/packages/propel/src/icons/actions/trash-icon.tsx b/packages/propel/src/icons/actions/trash-icon.tsx
new file mode 100644
index 000000000..d6262bd82
--- /dev/null
+++ b/packages/propel/src/icons/actions/trash-icon.tsx
@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import { IconWrapper } from "../icon-wrapper";
+import type { ISvgIcons } from "../type";
+
+export const TrashIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => (
+  <IconWrapper color={color} {...rest}>
+    <path
+      d="M13.9751 3.40039C14.3203 3.40039 14.6001 3.68021 14.6001 4.02539C14.6001 4.37057 14.3203 4.65039 13.9751 4.65039H13.2261L12.7974 11.0801C12.763 11.596 12.7354 12.0193 12.6851 12.3623C12.6336 12.713 12.553 13.0307 12.3853 13.3252C12.1227 13.7861 11.7258 14.1564 11.2485 14.3877C10.9437 14.5354 10.6222 14.595 10.269 14.623C9.92331 14.6505 9.49827 14.6504 8.98096 14.6504H6.96924C6.45193 14.6504 6.02688 14.6505 5.68115 14.623C5.32804 14.595 5.00647 14.5354 4.70166 14.3877C4.22433 14.1564 3.82754 13.7861 3.56494 13.3252C3.39718 13.0307 3.31662 12.713 3.26514 12.3623C3.21479 12.0193 3.18625 11.596 3.15186 11.0801L2.72412 4.65039H1.9751C1.62992 4.65039 1.3501 4.37057 1.3501 4.02539C1.3501 3.68021 1.62992 3.40039 1.9751 3.40039H13.9751ZM4.3999 10.9971C4.4356 11.5326 4.46 11.8981 4.50146 12.1807C4.54186 12.4558 4.59237 12.6016 4.65186 12.7061C4.78941 12.9474 4.99659 13.1415 5.24658 13.2627C5.35474 13.3151 5.50355 13.3549 5.78076 13.377C6.06553 13.3995 6.43224 13.4004 6.96924 13.4004H8.98096C9.51795 13.4004 9.88467 13.3995 10.1694 13.377C10.4466 13.355 10.5955 13.3151 10.7036 13.2627C10.9536 13.1415 11.1608 12.9474 11.2983 12.7061C11.3578 12.6017 11.4083 12.4558 11.4487 12.1807C11.4902 11.8981 11.5146 11.5326 11.5503 10.9971L11.9731 4.65039H3.97705L4.3999 10.9971ZM6.01709 10.3584V7.02539C6.01709 6.68021 6.29691 6.40039 6.64209 6.40039C6.98712 6.40057 7.26709 6.68032 7.26709 7.02539V10.3584C7.26709 10.7035 6.98712 10.9832 6.64209 10.9834C6.29691 10.9834 6.01709 10.7036 6.01709 10.3584ZM8.68311 10.3584V7.02539C8.68311 6.68032 8.96308 6.40057 9.30811 6.40039C9.65328 6.40039 9.93311 6.68021 9.93311 7.02539V10.3584C9.93311 10.7036 9.65328 10.9834 9.30811 10.9834C8.96308 10.9832 8.68311 10.7035 8.68311 10.3584ZM9.9751 1.40039C10.3203 1.40039 10.6001 1.68021 10.6001 2.02539C10.6001 2.37057 10.3203 2.65039 9.9751 2.65039H5.9751C5.62992 2.65039 5.3501 2.37057 5.3501 2.02539C5.3501 1.68021 5.62992 1.40039 5.9751 1.40039H9.9751Z"
+      fill={color}
+    />
+  </IconWrapper>
+);
diff --git a/packages/propel/src/icons/actions/upgrade-icon.tsx b/packages/propel/src/icons/actions/upgrade-icon.tsx
new file mode 100644
index 000000000..9c8b9d47a
--- /dev/null
+++ b/packages/propel/src/icons/actions/upgrade-icon.tsx
@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { IconWrapper } from "../icon-wrapper";
+import type { ISvgIcons } from "../type";
+
+export function UpgradeIcon({ color = "currentColor", ...rest }: ISvgIcons) {
+  return (
+    <IconWrapper color={color} {...rest}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M8 1C4.13401 1 1 4.13401 1 8C1 11.866 4.13401 15 8 15C11.866 15 15 11.866 15 8C15 4.13401 11.866 1 8 1ZM5.00457 7.55003L7.55003 5.00457C7.79853 4.75605 8.20147 4.75605 8.44997 5.00457L10.9954 7.55003C11.2439 7.79853 11.2439 8.20147 10.9954 8.44997C10.7469 8.69847 10.344 8.69847 10.0955 8.44997L8.63636 6.99085V10.5455C8.63636 10.8969 8.35146 11.1818 8 11.1818C7.64854 11.1818 7.36364 10.8969 7.36364 10.5455V6.99085L5.90452 8.44997C5.65601 8.69847 5.25309 8.69847 5.00457 8.44997C4.75605 8.20147 4.75605 7.79853 5.00457 7.55003Z"
+        fill={color}
+      />
+    </IconWrapper>
+  );
+}
diff --git a/packages/propel/src/icons/activity-icon.tsx b/packages/propel/src/icons/activity-icon.tsx
index deb9118b1..304500589 100644
--- a/packages/propel/src/icons/activity-icon.tsx
+++ b/packages/propel/src/icons/activity-icon.tsx
@@ -1,4 +1,8 @@
-import * as React from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
 
 import type { ISvgIcons } from "./type";
 
@@ -16,7 +20,7 @@ export function ActivityIcon({ className = "text-current", ...rest }: ISvgIcons)
       <g clipPath="url(#clip0_15681_9387)">
         <path
           d="M14.6666 8.00001H13.0133C12.7219 7.99939 12.4384 8.09421 12.206 8.26999C11.9736 8.44576 11.8053 8.69281 11.7266 8.97334L10.1599 14.5467C10.1498 14.5813 10.1288 14.6117 10.0999 14.6333C10.0711 14.655 10.036 14.6667 9.99992 14.6667C9.96386 14.6667 9.92877 14.655 9.89992 14.6333C9.87107 14.6117 9.85002 14.5813 9.83992 14.5467L6.15992 1.45334C6.14982 1.41872 6.12877 1.38831 6.09992 1.36668C6.07107 1.34504 6.03598 1.33334 5.99992 1.33334C5.96386 1.33334 5.92877 1.34504 5.89992 1.36668C5.87107 1.38831 5.85002 1.41872 5.83992 1.45334L4.27325 7.02668C4.1949 7.30611 4.02751 7.55235 3.79649 7.72802C3.56548 7.90368 3.28347 7.99918 2.99325 8.00001H1.33325"
-          stroke="#8591AD"
+          stroke="currentColor"
           strokeWidth="2"
           strokeLinecap="round"
           strokeLinejoin="round"
diff --git a/packages/propel/src/icons/ai-icon.tsx b/packages/propel/src/icons/ai-icon.tsx
index 962e56051..0c12a6e32 100644
--- a/packages/propel/src/icons/ai-icon.tsx
+++ b/packages/propel/src/icons/ai-icon.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 
 import type { ISvgIcons } from "./type";
diff --git a/packages/propel/src/icons/arrows/chevron-down.tsx b/packages/propel/src/icons/arrows/chevron-down.tsx
index 848c3b828..8869c9459 100644
--- a/packages/propel/src/icons/arrows/chevron-down.tsx
+++ b/packages/propel/src/icons/arrows/chevron-down.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 
 import { IconWrapper } from "../icon-wrapper";
diff --git a/packages/propel/src/icons/arrows/chevron-left.tsx b/packages/propel/src/icons/arrows/chevron-left.tsx
index 4b8001267..1b34ed3b4 100644
--- a/packages/propel/src/icons/arrows/chevron-left.tsx
+++ b/packages/propel/src/icons/arrows/chevron-left.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 
 import { IconWrapper } from "../icon-wrapper";
diff --git a/packages/propel/src/icons/arrows/chevron-right.tsx b/packages/propel/src/icons/arrows/chevron-right.tsx
index 029b62212..22c8b2a13 100644
--- a/packages/propel/src/icons/arrows/chevron-right.tsx
+++ b/packages/propel/src/icons/arrows/chevron-right.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 
 import { IconWrapper } from "../icon-wrapper";
diff --git a/packages/propel/src/icons/arrows/chevron-up.tsx b/packages/propel/src/icons/arrows/chevron-up.tsx
index 3d28ac516..c176d1d9e 100644
--- a/packages/propel/src/icons/arrows/chevron-up.tsx
+++ b/packages/propel/src/icons/arrows/chevron-up.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 
 import { IconWrapper } from "../icon-wrapper";
diff --git a/packages/propel/src/icons/arrows/index.ts b/packages/propel/src/icons/arrows/index.ts
index eca5a8dee..736f5146d 100644
--- a/packages/propel/src/icons/arrows/index.ts
+++ b/packages/propel/src/icons/arrows/index.ts
@@ -1,4 +1,11 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./chevron-down";
 export * from "./chevron-left";
 export * from "./chevron-right";
 export * from "./chevron-up";
+export * from "./reply-icon";
diff --git a/packages/propel/src/icons/arrows/reply-icon.tsx b/packages/propel/src/icons/arrows/reply-icon.tsx
new file mode 100644
index 000000000..08a828e6e
--- /dev/null
+++ b/packages/propel/src/icons/arrows/reply-icon.tsx
@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { IconWrapper } from "../icon-wrapper";
+import type { ISvgIcons } from "../type";
+
+export function ReplyIcon({ color = "currentColor", ...rest }: ISvgIcons) {
+  return (
+    <IconWrapper color={color} clipPathId="clip0_2890_23" {...rest}>
+      <path
+        d="M5.52865 4.19526C5.789 3.93491 6.211 3.93491 6.47135 4.19526C6.73168 4.45561 6.7317 4.87763 6.47135 5.13797L4.27604 7.33328H10.6667C11.5507 7.33328 12.3983 7.68472 13.0234 8.30985C13.6485 8.93496 14 9.78257 14 10.6666V11.9999C14 12.3681 13.7015 12.6666 13.3333 12.6666C12.9652 12.6666 12.6667 12.3681 12.6667 11.9999V10.6666C12.6667 10.1362 12.4558 9.62762 12.0807 9.25255C11.7526 8.92442 11.3223 8.72189 10.8646 8.67638L10.6667 8.66662H4.27604L6.47135 10.8619C6.73168 11.1223 6.7317 11.5443 6.47135 11.8046C6.21101 12.065 5.78899 12.065 5.52865 11.8046L2.19531 8.4713C2.1642 8.4402 2.13648 8.40583 2.11198 8.36909C2.09464 8.3431 2.07971 8.31603 2.06641 8.28836C2.05178 8.25798 2.03859 8.22669 2.02865 8.19396C2.02526 8.18281 2.02297 8.17139 2.02018 8.16011C2.0075 8.10875 2 8.05523 2 7.99995C2 7.94683 2.00649 7.89518 2.01823 7.84565C2.02148 7.83195 2.02452 7.81815 2.02865 7.80464C2.03858 7.77214 2.05185 7.74107 2.06641 7.71089C2.07918 7.68436 2.09353 7.65841 2.11003 7.63341C2.13495 7.59564 2.16344 7.56047 2.19531 7.5286L5.52865 4.19526Z"
+        fill={color}
+      />
+    </IconWrapper>
+  );
+}
diff --git a/packages/propel/src/icons/at-risk-icon.tsx b/packages/propel/src/icons/at-risk-icon.tsx
index 994ed711e..3ffe03542 100644
--- a/packages/propel/src/icons/at-risk-icon.tsx
+++ b/packages/propel/src/icons/at-risk-icon.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 
 import type { ISvgIcons } from "./type";
diff --git a/packages/propel/src/icons/attachments/audio-file-icon.tsx b/packages/propel/src/icons/attachments/audio-file-icon.tsx
index 4ede9d537..1640c2922 100644
--- a/packages/propel/src/icons/attachments/audio-file-icon.tsx
+++ b/packages/propel/src/icons/attachments/audio-file-icon.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 
 import { IconWrapper } from "../icon-wrapper";
diff --git a/packages/propel/src/icons/attachments/code-file-icon.tsx b/packages/propel/src/icons/attachments/code-file-icon.tsx
index 4c8e6ac81..e4d3e2c29 100644
--- a/packages/propel/src/icons/attachments/code-file-icon.tsx
+++ b/packages/propel/src/icons/attachments/code-file-icon.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 
 import { IconWrapper } from "../icon-wrapper";
diff --git a/packages/propel/src/icons/attachments/document-file-icon.tsx b/packages/propel/src/icons/attachments/document-file-icon.tsx
index d6602bce8..a02645053 100644
--- a/packages/propel/src/icons/attachments/document-file-icon.tsx
+++ b/packages/propel/src/icons/attachments/document-file-icon.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 
 import { IconWrapper } from "../icon-wrapper";
diff --git a/packages/propel/src/icons/attachments/image-file-icon.tsx b/packages/propel/src/icons/attachments/image-file-icon.tsx
index 3dd36580a..cf458b7e9 100644
--- a/packages/propel/src/icons/attachments/image-file-icon.tsx
+++ b/packages/propel/src/icons/attachments/image-file-icon.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 
 import { IconWrapper } from "../icon-wrapper";
diff --git a/packages/propel/src/icons/attachments/index.ts b/packages/propel/src/icons/attachments/index.ts
index 408dc37a3..dd8e0d8f1 100644
--- a/packages/propel/src/icons/attachments/index.ts
+++ b/packages/propel/src/icons/attachments/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./audio-file-icon";
 export * from "./code-file-icon";
 export * from "./document-file-icon";
diff --git a/packages/propel/src/icons/attachments/video-file-icon.tsx b/packages/propel/src/icons/attachments/video-file-icon.tsx
index 4d6203e06..a0613b78f 100644
--- a/packages/propel/src/icons/attachments/video-file-icon.tsx
+++ b/packages/propel/src/icons/attachments/video-file-icon.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 
 import { IconWrapper } from "../icon-wrapper";
diff --git a/packages/propel/src/icons/bar-icon.tsx b/packages/propel/src/icons/bar-icon.tsx
index 9225f3a4a..16ae988e2 100644
--- a/packages/propel/src/icons/bar-icon.tsx
+++ b/packages/propel/src/icons/bar-icon.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 
 import type { ISvgIcons } from "./type";
diff --git a/packages/propel/src/icons/blocked-icon.tsx b/packages/propel/src/icons/blocked-icon.tsx
index a11bb2bf2..5cb2dfdff 100644
--- a/packages/propel/src/icons/blocked-icon.tsx
+++ b/packages/propel/src/icons/blocked-icon.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 
 import type { ISvgIcons } from "./type";
diff --git a/packages/propel/src/icons/blocker-icon.tsx b/packages/propel/src/icons/blocker-icon.tsx
index 2548156d6..16c53e016 100644
--- a/packages/propel/src/icons/blocker-icon.tsx
+++ b/packages/propel/src/icons/blocker-icon.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 
 import type { ISvgIcons } from "./type";
diff --git a/packages/propel/src/icons/brand/accenture-logo.tsx b/packages/propel/src/icons/brand/accenture-logo.tsx
index 9b526d4b7..50a9daf90 100644
--- a/packages/propel/src/icons/brand/accenture-logo.tsx
+++ b/packages/propel/src/icons/brand/accenture-logo.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 
 import type { ISvgIcons } from "../type";
diff --git a/packages/propel/src/icons/brand/dolby-logo.tsx b/packages/propel/src/icons/brand/dolby-logo.tsx
index 1638e96c7..d037f5b8a 100644
--- a/packages/propel/src/icons/brand/dolby-logo.tsx
+++ b/packages/propel/src/icons/brand/dolby-logo.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 
 import type { ISvgIcons } from "../type";
diff --git a/packages/propel/src/icons/brand/index.ts b/packages/propel/src/icons/brand/index.ts
index 10f7c42e0..6e6ba6e07 100644
--- a/packages/propel/src/icons/brand/index.ts
+++ b/packages/propel/src/icons/brand/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./accenture-logo";
 export * from "./dolby-logo";
 export * from "./sony-logo";
diff --git a/packages/propel/src/icons/brand/plane-lockup.tsx b/packages/propel/src/icons/brand/plane-lockup.tsx
index 6e697f177..0caf46cff 100644
--- a/packages/propel/src/icons/brand/plane-lockup.tsx
+++ b/packages/propel/src/icons/brand/plane-lockup.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 
 import type { ISvgIcons } from "../type";
diff --git a/packages/propel/src/icons/brand/plane-logo.tsx b/packages/propel/src/icons/brand/plane-logo.tsx
index 92fc4d754..3b6f8f30c 100644
--- a/packages/propel/src/icons/brand/plane-logo.tsx
+++ b/packages/propel/src/icons/brand/plane-logo.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 
 import type { ISvgIcons } from "../type";
diff --git a/packages/propel/src/icons/brand/plane-wordmark.tsx b/packages/propel/src/icons/brand/plane-wordmark.tsx
index 47efad29c..e3554585e 100644
--- a/packages/propel/src/icons/brand/plane-wordmark.tsx
+++ b/packages/propel/src/icons/brand/plane-wordmark.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 
 import type { ISvgIcons } from "../type";
diff --git a/packages/propel/src/icons/brand/sony-logo.tsx b/packages/propel/src/icons/brand/sony-logo.tsx
index 7f93005f3..1f9f2a0c1 100644
--- a/packages/propel/src/icons/brand/sony-logo.tsx
+++ b/packages/propel/src/icons/brand/sony-logo.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 
 import type { ISvgIcons } from "../type";
diff --git a/packages/propel/src/icons/brand/zerodha-logo.tsx b/packages/propel/src/icons/brand/zerodha-logo.tsx
index 9f407f8bf..03259e48b 100644
--- a/packages/propel/src/icons/brand/zerodha-logo.tsx
+++ b/packages/propel/src/icons/brand/zerodha-logo.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 
 import type { ISvgIcons } from "../type";
diff --git a/packages/propel/src/icons/calendar-after-icon.tsx b/packages/propel/src/icons/calendar-after-icon.tsx
index 3cb03c116..37c7c68e4 100644
--- a/packages/propel/src/icons/calendar-after-icon.tsx
+++ b/packages/propel/src/icons/calendar-after-icon.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 
 import type { ISvgIcons } from "./type";
@@ -8,7 +14,7 @@ export function CalendarAfterIcon({ className = "fill-current", ...rest }: ISvgI
       <g clipPath="url(#clip0_3309_70901)">
         <path
           d="M10.6125 17V15.875H14.625V7.8125H3.375V11.9375H2.25V4.25C2.25 3.95 2.3625 3.6875 2.5875 3.4625C2.8125 3.2375 3.075 3.125 3.375 3.125H4.59375V2H5.8125V3.125H12.1875V2H13.4063V3.125H14.625C14.925 3.125 15.1875 3.2375 15.4125 3.4625C15.6375 3.6875 15.75 3.95 15.75 4.25V15.875C15.75 16.175 15.6375 16.4375 15.4125 16.6625C15.1875 16.8875 14.925 17 14.625 17H10.6125ZM6 18.2375L5.2125 17.45L7.33125 15.3125H0.9375V14.1875H7.33125L5.2125 12.05L6 11.2625L9.4875 14.75L6 18.2375ZM3.375 6.6875H14.625V4.25H3.375V6.6875Z"
-          fill="rgb(var(--color-text-200))"
+          fill="var(--text-color-secondary)"
         />
       </g>
       <defs>
diff --git a/packages/propel/src/icons/calendar-before-icon.tsx b/packages/propel/src/icons/calendar-before-icon.tsx
index d832ca9ad..3f9a3200e 100644
--- a/packages/propel/src/icons/calendar-before-icon.tsx
+++ b/packages/propel/src/icons/calendar-before-icon.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 
 import type { ISvgIcons } from "./type";
@@ -8,13 +14,13 @@ export function CalendarBeforeIcon({ className = "fill-current", ...rest }: ISvg
       <g clipPath="url(#clip0_3309_70907)">
         <path
           d="M10.6125 16.5V15.375H14.625V7.3125H3.375V11.4375H2.25V3.75C2.25 3.45 2.3625 3.1875 2.5875 2.9625C2.8125 2.7375 3.075 2.625 3.375 2.625H4.59375V1.5H5.8125V2.625H12.1875V1.5H13.4062V2.625H14.625C14.925 2.625 15.1875 2.7375 15.4125 2.9625C15.6375 3.1875 15.75 3.45 15.75 3.75V15.375C15.75 15.675 15.6375 15.9375 15.4125 16.1625C15.1875 16.3875 14.925 16.5 14.625 16.5H10.6125ZM3.375 6.1875H14.625V3.75H3.375V6.1875Z"
-          fill="rgb(var(--color-text-200))"
+          fill="var(--text-color-secondary)"
         />
         <g clipPath="url(#clip1_3309_70907)">
           <path
             d="M3.99967 17.1667L1.33301 14.5L3.99967 11.8334L4.34967 12.1834L2.28301 14.25H8V14.75H2.28301L4.34967 16.8167L3.99967 17.1667Z"
-            fill="rgb(var(--color-text-200))"
-            stroke="rgb(var(--color-text-200))"
+            fill="var(--text-color-secondary)"
+            stroke="var(--text-color-secondary)"
             strokeWidth="0.5"
           />
         </g>
diff --git a/packages/propel/src/icons/center-panel-icon.tsx b/packages/propel/src/icons/center-panel-icon.tsx
index c8d6c8a44..6278b5da1 100644
--- a/packages/propel/src/icons/center-panel-icon.tsx
+++ b/packages/propel/src/icons/center-panel-icon.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 
 import type { ISvgIcons } from "./type";
diff --git a/packages/propel/src/icons/comment-fill-icon.tsx b/packages/propel/src/icons/comment-fill-icon.tsx
index 806d114dd..76be517dc 100644
--- a/packages/propel/src/icons/comment-fill-icon.tsx
+++ b/packages/propel/src/icons/comment-fill-icon.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 
 import type { ISvgIcons } from "./type";
diff --git a/packages/propel/src/icons/constants.tsx b/packages/propel/src/icons/constants.tsx
index 13fbe1ce9..b668b9b6e 100644
--- a/packages/propel/src/icons/constants.tsx
+++ b/packages/propel/src/icons/constants.tsx
@@ -1,11 +1,30 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { Icon } from "./icon";
 export const ActionsIconsMap = [
   { icon: <Icon name="action.add" />, title: "AddIcon" },
   { icon: <Icon name="action.add-workitem" />, title: "AddWorkItemIcon" },
   { icon: <Icon name="action.add-reaction" />, title: "AddReactionIcon" },
+  { icon: <Icon name="action.check" />, title: "CheckIcon" },
   { icon: <Icon name="action.close" />, title: "CloseIcon" },
+  { icon: <Icon name="action.copy" />, title: "CopyIcon" },
+  { icon: <Icon name="action.edit" />, title: "EditIcon" },
+  { icon: <Icon name="action.globe" />, title: "GlobeIcon" },
+  { icon: <Icon name="action.link" />, title: "LinkIcon" },
+  { icon: <Icon name="action.lock" />, title: "LockIcon" },
+  { icon: <Icon name="action.new-tab" />, title: "NewTabIcon" },
+  { icon: <Icon name="action.filter" />, title: "FilterIcon" },
+  { icon: <Icon name="action.filter-applied" />, title: "FilterAppliedIcon" },
   { icon: <Icon name="action.search" />, title: "SearchIcon" },
+  { icon: <Icon name="action.plus" />, title: "PlusIcon" },
   { icon: <Icon name="action.preferences" />, title: "PreferencesIcon" },
+  { icon: <Icon name="action.trash" />, title: "TrashIcon" },
+  { icon: <Icon name="action.copy-link" />, title: "CopyLinkIcon" },
+  { icon: <Icon name="action.upgrade" />, title: "UpgradeIcon" },
 ];
 
 export const ArrowsIconsMap = [
@@ -13,6 +32,7 @@ export const ArrowsIconsMap = [
   { icon: <Icon name="arrow.chevron-left" />, title: "ChevronLeftIcon" },
   { icon: <Icon name="arrow.chevron-right" />, title: "ChevronRightIcon" },
   { icon: <Icon name="arrow.chevron-up" />, title: "ChevronUpIcon" },
+  { icon: <Icon name="arrow.reply" />, title: "ReplyIcon" },
 ];
 
 export const WorkspaceIconsMap = [
@@ -74,4 +94,7 @@ export const PropertyIconsMap = [
   { icon: <Icon name="property.user" />, title: "UserPropertyIcon" },
   { icon: <Icon name="property.user-square" />, title: "UserSquarePropertyIcon" },
   { icon: <Icon name="property.workflows" />, title: "WorkflowsPropertyIcon" },
+  { icon: <Icon name="property.label-filled" />, title: "LabelFilledIcon" },
 ];
+
+export const MiscIconsMap = [{ icon: <Icon name="misc.info" />, title: "InfoIcon" }];
diff --git a/packages/propel/src/icons/create-icon.tsx b/packages/propel/src/icons/create-icon.tsx
index 7c69d2b47..fa9da4002 100644
--- a/packages/propel/src/icons/create-icon.tsx
+++ b/packages/propel/src/icons/create-icon.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 
 import type { ISvgIcons } from "./type";
diff --git a/packages/propel/src/icons/cycle/circle-dot-full-icon.tsx b/packages/propel/src/icons/cycle/circle-dot-full-icon.tsx
index 021d385aa..f6ac49b59 100644
--- a/packages/propel/src/icons/cycle/circle-dot-full-icon.tsx
+++ b/packages/propel/src/icons/cycle/circle-dot-full-icon.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 
 import type { ISvgIcons } from "../type";
diff --git a/packages/propel/src/icons/cycle/contrast-icon.tsx b/packages/propel/src/icons/cycle/contrast-icon.tsx
index b7e46a11c..8392fe841 100644
--- a/packages/propel/src/icons/cycle/contrast-icon.tsx
+++ b/packages/propel/src/icons/cycle/contrast-icon.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 
 import type { ISvgIcons } from "../type";
diff --git a/packages/propel/src/icons/cycle/cycle-group-icon.tsx b/packages/propel/src/icons/cycle/cycle-group-icon.tsx
index 0d5dd3aa5..6545d1a0c 100644
--- a/packages/propel/src/icons/cycle/cycle-group-icon.tsx
+++ b/packages/propel/src/icons/cycle/cycle-group-icon.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 import { CircleDotDashed, Circle } from "lucide-react";
 
diff --git a/packages/propel/src/icons/cycle/double-circle-icon.tsx b/packages/propel/src/icons/cycle/double-circle-icon.tsx
index 5f7e7a4d3..d034a1a17 100644
--- a/packages/propel/src/icons/cycle/double-circle-icon.tsx
+++ b/packages/propel/src/icons/cycle/double-circle-icon.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 
 import type { ISvgIcons } from "../type";
diff --git a/packages/propel/src/icons/cycle/helper.tsx b/packages/propel/src/icons/cycle/helper.tsx
index c53069bc7..d2019ffe5 100644
--- a/packages/propel/src/icons/cycle/helper.tsx
+++ b/packages/propel/src/icons/cycle/helper.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export interface ICycleGroupIcon {
   className?: string;
   color?: string;
diff --git a/packages/propel/src/icons/cycle/index.ts b/packages/propel/src/icons/cycle/index.ts
index 374f3b42e..3dfff06ca 100644
--- a/packages/propel/src/icons/cycle/index.ts
+++ b/packages/propel/src/icons/cycle/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./circle-dot-full-icon";
 export * from "./contrast-icon";
 export * from "./cycle-group-icon";
diff --git a/packages/propel/src/icons/default-icon.tsx b/packages/propel/src/icons/default-icon.tsx
index 12fd0be2e..0c05c0f1b 100644
--- a/packages/propel/src/icons/default-icon.tsx
+++ b/packages/propel/src/icons/default-icon.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 
 import { IconWrapper } from "./icon-wrapper";
diff --git a/packages/propel/src/icons/dice-icon.tsx b/packages/propel/src/icons/dice-icon.tsx
index 5624006fd..9d93e1bcc 100644
--- a/packages/propel/src/icons/dice-icon.tsx
+++ b/packages/propel/src/icons/dice-icon.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 
 import type { ISvgIcons } from "./type";
diff --git a/packages/propel/src/icons/discord-icon.tsx b/packages/propel/src/icons/discord-icon.tsx
deleted file mode 100644
index 452233a9e..000000000
--- a/packages/propel/src/icons/discord-icon.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import * as React from "react";
-
-import type { ISvgIcons } from "./type";
-
-export function DiscordIcon({ width = "24", height = "24", className }: ISvgIcons) {
-  return (
-    <svg
-      width={width}
-      height={height}
-      className={className}
-      viewBox="0 0 24 24"
-      fill="currentColor"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <g clipPath="url(#clip0_4112_17440)">
-        <mask id="mask0_4112_17440" maskUnits="userSpaceOnUse" x="0" y="0" width={width} height={height}>
-          <path d="M24 0H0V24H24V0Z" fill="white" />
-        </mask>
-        <g mask="url(#mask0_4112_17440)">
-          <path
-            d="M18.9312 5.63864C17.6346 5.0435 16.2662 4.61913 14.8604 4.37614C14.8476 4.37364 14.8343 4.37528 14.8225 4.38082C14.8106 4.38636 14.8009 4.39552 14.7946 4.40697C14.6196 4.71947 14.4246 5.12697 14.2879 5.44864C12.7724 5.21846 11.2309 5.21846 9.7154 5.44864C9.5633 5.09222 9.39165 4.74447 9.20123 4.40697C9.19467 4.39578 9.18486 4.38684 9.1731 4.38133C9.16135 4.37583 9.1482 4.37402 9.1354 4.37614C7.72944 4.61862 6.36101 5.04302 5.06457 5.63864C5.05359 5.64324 5.04429 5.65109 5.0379 5.66114C2.44457 9.5353 1.73373 13.3137 2.0829 17.0445C2.08375 17.0538 2.08648 17.0627 2.09092 17.0709C2.09536 17.0791 2.10142 17.0863 2.10873 17.092C3.6184 18.2105 5.30716 19.0643 7.1029 19.617C7.11556 19.6207 7.12903 19.6204 7.14153 19.6162C7.15403 19.6121 7.16497 19.6042 7.1729 19.5937C7.55895 19.0691 7.90069 18.5133 8.19457 17.932C8.19866 17.924 8.20103 17.9153 8.2015 17.9064C8.20198 17.8974 8.20056 17.8885 8.19733 17.8802C8.1941 17.8718 8.18914 17.8642 8.18278 17.858C8.17641 17.8517 8.16878 17.8468 8.1604 17.8437C7.62159 17.6375 7.09995 17.3889 6.6004 17.1003C6.59124 17.095 6.58354 17.0876 6.57797 17.0786C6.5724 17.0696 6.56914 17.0593 6.56848 17.0488C6.56782 17.0382 6.56978 17.0277 6.57418 17.0181C6.57859 17.0084 6.58531 17.0001 6.59373 16.9937C6.69893 16.915 6.80229 16.8338 6.90373 16.7503C6.91261 16.7431 6.92331 16.7385 6.93464 16.7371C6.94597 16.7356 6.95748 16.7373 6.9679 16.742C10.2412 18.2362 13.7846 18.2362 17.0196 16.742C17.0301 16.7371 17.0418 16.7353 17.0533 16.7368C17.0648 16.7383 17.0756 16.743 17.0846 16.7503C17.1846 16.832 17.2896 16.9153 17.3954 16.9937C17.4037 17 17.4104 17.0082 17.4148 17.0176C17.4193 17.0271 17.4213 17.0375 17.4208 17.0479C17.4203 17.0583 17.4173 17.0685 17.412 17.0775C17.4067 17.0865 17.3993 17.094 17.3904 17.0995C16.892 17.3908 16.3699 17.6395 15.8296 17.8428C15.8212 17.8461 15.8135 17.851 15.8071 17.8574C15.8008 17.8637 15.7958 17.8714 15.7926 17.8798C15.7894 17.8882 15.788 17.8972 15.7884 17.9062C15.7889 17.9152 15.7913 17.924 15.7954 17.932C16.0954 18.5137 16.4387 19.067 16.8162 19.5928C16.824 19.6035 16.8349 19.6116 16.8475 19.6157C16.86 19.6199 16.8736 19.6201 16.8862 19.6162C18.685 19.0652 20.3765 18.2113 21.8879 17.0912C21.8953 17.086 21.9014 17.0793 21.906 17.0715C21.9106 17.0638 21.9135 17.0551 21.9146 17.0462C22.3312 12.732 21.2162 8.98447 18.9571 5.6628C18.9518 5.6516 18.9426 5.64355 18.9312 5.63864ZM8.68373 14.772C7.6979 14.772 6.88623 13.8678 6.88623 12.7562C6.88623 11.6453 7.6829 10.7403 8.68373 10.7403C9.69207 10.7403 10.4971 11.6536 10.4812 12.757C10.4812 13.8678 9.68457 14.772 8.68373 14.772ZM15.3296 14.772C14.3437 14.772 13.5321 13.8678 13.5321 12.7562C13.5321 11.6453 14.3279 10.7403 15.3296 10.7403C16.3379 10.7403 17.1429 11.6536 17.1271 12.757C17.1271 13.8678 16.3387 14.772 15.3296 14.772Z"
-            fill="currentColor"
-            stroke="currentColor"
-          />
-        </g>
-      </g>
-      <defs>
-        <clipPath id="clip0_4112_17440">
-          <rect width={width} height={height} fill="white" />
-        </clipPath>
-      </defs>
-    </svg>
-  );
-}
diff --git a/packages/propel/src/icons/display-properties.tsx b/packages/propel/src/icons/display-properties.tsx
index bfe5b648c..8c7caf1fa 100644
--- a/packages/propel/src/icons/display-properties.tsx
+++ b/packages/propel/src/icons/display-properties.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 
 import type { ISvgIcons } from "./type";
diff --git a/packages/propel/src/icons/done-icon.tsx b/packages/propel/src/icons/done-icon.tsx
index a00f60465..fe1b2fa7e 100644
--- a/packages/propel/src/icons/done-icon.tsx
+++ b/packages/propel/src/icons/done-icon.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 
 import type { ISvgIcons } from "./type";
diff --git a/packages/propel/src/icons/dropdown-icon.tsx b/packages/propel/src/icons/dropdown-icon.tsx
index dc9079abf..519cde3b2 100644
--- a/packages/propel/src/icons/dropdown-icon.tsx
+++ b/packages/propel/src/icons/dropdown-icon.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 
 import type { ISvgIcons } from "./type";
diff --git a/packages/propel/src/icons/favorite-folder-icon.tsx b/packages/propel/src/icons/favorite-folder-icon.tsx
index bf2733a98..890c1e26f 100644
--- a/packages/propel/src/icons/favorite-folder-icon.tsx
+++ b/packages/propel/src/icons/favorite-folder-icon.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 
 import type { ISvgIcons } from "./type";
diff --git a/packages/propel/src/icons/full-screen-panel-icon.tsx b/packages/propel/src/icons/full-screen-panel-icon.tsx
index 2bcc76b4a..61cb71e4f 100644
--- a/packages/propel/src/icons/full-screen-panel-icon.tsx
+++ b/packages/propel/src/icons/full-screen-panel-icon.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 
 import type { ISvgIcons } from "./type";
diff --git a/packages/propel/src/icons/github-icon.tsx b/packages/propel/src/icons/github-icon.tsx
index 9ed2d8909..175b207a0 100644
--- a/packages/propel/src/icons/github-icon.tsx
+++ b/packages/propel/src/icons/github-icon.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 
 import type { ISvgIcons } from "./type";
@@ -17,7 +23,7 @@ export function GithubIcon({ width = "24", height = "24", className, color }: IS
           fillRule="evenodd"
           clipRule="evenodd"
           d="M10 0C4.475 0 0 4.475 0 10C0 14.425 2.8625 18.1625 6.8375 19.4875C7.3375 19.575 7.525 19.275 7.525 19.0125C7.525 18.775 7.5125 17.9875 7.5125 17.15C5 17.6125 4.35 16.5375 4.15 15.975C4.0375 15.6875 3.55 14.8 3.125 14.5625C2.775 14.375 2.275 13.9125 3.1125 13.9C3.9 13.8875 4.4625 14.625 4.65 14.925C5.55 16.4375 6.9875 16.0125 7.5625 15.75C7.65 15.1 7.9125 14.6625 8.2 14.4125C5.975 14.1625 3.65 13.3 3.65 9.475C3.65 8.3875 4.0375 7.4875 4.675 6.7875C4.575 6.5375 4.225 5.5125 4.775 4.1375C4.775 4.1375 5.6125 3.875 7.525 5.1625C8.325 4.9375 9.175 4.825 10.025 4.825C10.875 4.825 11.725 4.9375 12.525 5.1625C14.4375 3.8625 15.275 4.1375 15.275 4.1375C15.825 5.5125 15.475 6.5375 15.375 6.7875C16.0125 7.4875 16.4 8.375 16.4 9.475C16.4 13.3125 14.0625 14.1625 11.8375 14.4125C12.2 14.725 12.5125 15.325 12.5125 16.2625C12.5125 17.6 12.5 18.675 12.5 19.0125C12.5 19.275 12.6875 19.5875 13.1875 19.4875C15.1726 18.8173 16.8976 17.5414 18.1197 15.8395C19.3418 14.1375 19.9994 12.0952 20 10C20 4.475 15.525 0 10 0Z"
-          fill={color ? color : "rgb(var(--color-text-200))"}
+          fill={color ? color : "var(--text-color-secondary)"}
         />
       </g>
       <defs>
diff --git a/packages/propel/src/icons/gitlab-icon.tsx b/packages/propel/src/icons/gitlab-icon.tsx
index ae29da747..9d8368421 100644
--- a/packages/propel/src/icons/gitlab-icon.tsx
+++ b/packages/propel/src/icons/gitlab-icon.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 
 import type { ISvgIcons } from "./type";
@@ -17,7 +23,7 @@ export function GitlabIcon({ width = "24", height = "24", className, color }: IS
           fillRule="evenodd"
           clipRule="evenodd"
           d="M10 0C4.475 0 0 4.475 0 10C0 14.425 2.8625 18.1625 6.8375 19.4875C7.3375 19.575 7.525 19.275 7.525 19.0125C7.525 18.775 7.5125 17.9875 7.5125 17.15C5 17.6125 4.35 16.5375 4.15 15.975C4.0375 15.6875 3.55 14.8 3.125 14.5625C2.775 14.375 2.275 13.9125 3.1125 13.9C3.9 13.8875 4.4625 14.625 4.65 14.925C5.55 16.4375 6.9875 16.0125 7.5625 15.75C7.65 15.1 7.9125 14.6625 8.2 14.4125C5.975 14.1625 3.65 13.3 3.65 9.475C3.65 8.3875 4.0375 7.4875 4.675 6.7875C4.575 6.5375 4.225 5.5125 4.775 4.1375C4.775 4.1375 5.6125 3.875 7.525 5.1625C8.325 4.9375 9.175 4.825 10.025 4.825C10.875 4.825 11.725 4.9375 12.525 5.1625C14.4375 3.8625 15.275 4.1375 15.275 4.1375C15.825 5.5125 15.475 6.5375 15.375 6.7875C16.0125 7.4875 16.4 8.375 16.4 9.475C16.4 13.3125 14.0625 14.1625 11.8375 14.4125C12.2 14.725 12.5125 15.325 12.5125 16.2625C12.5125 17.6 12.5 18.675 12.5 19.0125C12.5 19.275 12.6875 19.5875 13.1875 19.4875C15.1726 18.8173 16.8976 17.5414 18.1197 15.8395C19.3418 14.1375 19.9994 12.0952 20 10C20 4.475 15.525 0 10 0Z"
-          fill={color ? color : "rgb(var(--color-text-200))"}
+          fill={color ? color : "var(--text-color-secondary)"}
         />
       </g>
       <defs>
diff --git a/packages/propel/src/icons/helpers.ts b/packages/propel/src/icons/helpers.ts
index e40068df8..f717c350a 100644
--- a/packages/propel/src/icons/helpers.ts
+++ b/packages/propel/src/icons/helpers.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { IconName } from "./registry";
 import { ICON_REGISTRY } from "./registry";
 
diff --git a/packages/propel/src/icons/icon-wrapper.tsx b/packages/propel/src/icons/icon-wrapper.tsx
index fbfedbafb..e7129e58e 100644
--- a/packages/propel/src/icons/icon-wrapper.tsx
+++ b/packages/propel/src/icons/icon-wrapper.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 
 import type { ISvgIcons } from "./type";
diff --git a/packages/propel/src/icons/icon.tsx b/packages/propel/src/icons/icon.tsx
index 2b80d943d..e2fe4af1e 100644
--- a/packages/propel/src/icons/icon.tsx
+++ b/packages/propel/src/icons/icon.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 
 import type { IconName } from "./registry";
diff --git a/packages/propel/src/icons/icons.stories.tsx b/packages/propel/src/icons/icons.stories.tsx
index 6e203504e..27c3c46c9 100644
--- a/packages/propel/src/icons/icons.stories.tsx
+++ b/packages/propel/src/icons/icons.stories.tsx
@@ -1,8 +1,15 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import {
   ActionsIconsMap,
   ArrowsIconsMap,
   LayoutIconsMap,
+  MiscIconsMap,
   ProjectIconsMap,
   PropertyIconsMap,
   SubBrandIconsMap,
@@ -33,82 +40,94 @@ export const AllIcons: Story = {
   render: () => (
     <div className="space-y-12">
       <div className="space-y-4">
-        <h3 className="text-lg font-semibold text-custom-text-100">Sub-Brand Icons</h3>
-        <div className="grid grid-cols-12 gap-6 w-full">
+        <h3 className="text-16 font-semibold text-primary">Sub-Brand Icons</h3>
+        <div className="grid w-full grid-cols-12 gap-6">
           {SubBrandIconsMap.map((item) => (
-            <div key={item.title} className="flex flex-col items-center justify-center gap-3 p-4 col-span-2">
-              <div className="text-custom-text-200">{item.icon}</div>
-              <p className="text-xs text-custom-text-300 text-center">{item.title}</p>
+            <div key={item.title} className="col-span-2 flex flex-col items-center justify-center gap-3 p-4">
+              <div className="text-secondary">{item.icon}</div>
+              <p className="text-center text-11 text-tertiary">{item.title}</p>
             </div>
           ))}
         </div>
       </div>
 
       <div className="space-y-4">
-        <h3 className="text-lg font-semibold text-custom-text-100">Workspace Icons</h3>
-        <div className="grid grid-cols-12 gap-6 w-full">
+        <h3 className="text-16 font-semibold text-primary">Workspace Icons</h3>
+        <div className="grid w-full grid-cols-12 gap-6">
           {WorkspaceIconsMap.map((item) => (
-            <div key={item.title} className="flex flex-col items-center justify-center gap-3 p-4 col-span-2">
-              <div className="text-custom-text-200">{item.icon}</div>
-              <p className="text-xs text-custom-text-300 text-center">{item.title}</p>
+            <div key={item.title} className="col-span-2 flex flex-col items-center justify-center gap-3 p-4">
+              <div className="text-secondary">{item.icon}</div>
+              <p className="text-center text-11 text-tertiary">{item.title}</p>
             </div>
           ))}
         </div>
       </div>
 
       <div className="space-y-4">
-        <h3 className="text-lg font-semibold text-custom-text-100">Project Icons</h3>
-        <div className="grid grid-cols-12 gap-6 w-full">
+        <h3 className="text-16 font-semibold text-primary">Project Icons</h3>
+        <div className="grid w-full grid-cols-12 gap-6">
           {ProjectIconsMap.map((item) => (
-            <div key={item.title} className="flex flex-col items-center justify-center gap-3 p-4 col-span-2">
-              <div className="text-custom-text-200">{item.icon}</div>
-              <p className="text-xs text-custom-text-300 text-center">{item.title}</p>
+            <div key={item.title} className="col-span-2 flex flex-col items-center justify-center gap-3 p-4">
+              <div className="text-secondary">{item.icon}</div>
+              <p className="text-center text-11 text-tertiary">{item.title}</p>
             </div>
           ))}
         </div>
       </div>
 
       <div className="space-y-4">
-        <h3 className="text-lg font-semibold text-custom-text-100">Layout Icons</h3>
-        <div className="grid grid-cols-12 gap-6 w-full">
+        <h3 className="text-16 font-semibold text-primary">Layout Icons</h3>
+        <div className="grid w-full grid-cols-12 gap-6">
           {LayoutIconsMap.map((item) => (
-            <div key={item.title} className="flex flex-col items-center justify-center gap-3 p-4 col-span-2">
-              <div className="text-custom-text-200">{item.icon}</div>
-              <p className="text-xs text-custom-text-300 text-center">{item.title}</p>
+            <div key={item.title} className="col-span-2 flex flex-col items-center justify-center gap-3 p-4">
+              <div className="text-secondary">{item.icon}</div>
+              <p className="text-center text-11 text-tertiary">{item.title}</p>
             </div>
           ))}
         </div>
       </div>
 
       <div className="space-y-4">
-        <h3 className="text-lg font-semibold text-custom-text-100">Property Icons</h3>
-        <div className="grid grid-cols-12 gap-6 w-full">
+        <h3 className="text-16 font-semibold text-primary">Property Icons</h3>
+        <div className="grid w-full grid-cols-12 gap-6">
           {PropertyIconsMap.map((item) => (
-            <div key={item.title} className="flex flex-col items-center justify-center gap-3 p-4 col-span-2">
-              <div className="text-custom-text-200">{item.icon}</div>
-              <p className="text-xs text-custom-text-300 text-center">{item.title}</p>
+            <div key={item.title} className="col-span-2 flex flex-col items-center justify-center gap-3 p-4">
+              <div className="text-secondary">{item.icon}</div>
+              <p className="text-center text-11 text-tertiary">{item.title}</p>
             </div>
           ))}
         </div>
       </div>
 
       <div className="space-y-4">
-        <h3 className="text-lg font-semibold text-custom-text-100">Actions Icons</h3>
-        <div className="grid grid-cols-12 gap-6 w-full">
+        <h3 className="text-16 font-semibold text-primary">Actions Icons</h3>
+        <div className="grid w-full grid-cols-12 gap-6">
           {ActionsIconsMap.map((item) => (
-            <div key={item.title} className="flex flex-col items-center justify-center gap-3 p-4 col-span-2">
-              <div className="text-custom-text-200">{item.icon}</div>
-              <p className="text-xs text-custom-text-300 text-center">{item.title}</p>
+            <div key={item.title} className="col-span-2 flex flex-col items-center justify-center gap-3 p-4">
+              <div className="text-secondary">{item.icon}</div>
+              <p className="text-center text-11 text-tertiary">{item.title}</p>
             </div>
           ))}
         </div>
       </div>
 
       <div className="space-y-4">
-        <h3 className="text-lg font-semibold text-custom-text-100">Arrows Icons</h3>
-        <div className="grid grid-cols-12 gap-6 w-full">
+        <h3 className="text-16 font-semibold text-primary">Arrows Icons</h3>
+        <div className="grid w-full grid-cols-12 gap-6">
           {ArrowsIconsMap.map((item) => (
-            <div key={item.title} className="flex flex-col items-center justify-center gap-3 p-4 col-span-2">
+            <div key={item.title} className="col-span-2 flex flex-col items-center justify-center gap-3 p-4">
+              <div className="text-secondary">{item.icon}</div>
+              <p className="text-center text-11 text-tertiary">{item.title}</p>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      <div className="space-y-4">
+        <h3 className="text-lg text-custom-text-100 font-semibold">Misc Icons</h3>
+        <div className="grid w-full grid-cols-12 gap-6">
+          {MiscIconsMap.map((item) => (
+            <div key={item.title} className="col-span-2 flex flex-col items-center justify-center gap-3 p-4">
               <div className="text-custom-text-200">{item.icon}</div>
               <p className="text-xs text-custom-text-300 text-center">{item.title}</p>
             </div>
@@ -123,48 +142,48 @@ export const RegistryUsage: Story = {
   render: () => (
     <div className="space-y-8">
       <div className="space-y-4">
-        <h3 className="text-lg font-semibold text-custom-text-100">Registry-Based Usage</h3>
-        <p className="text-sm text-custom-text-300">
-          Use the <code className="px-1 py-0.5 bg-custom-background-80 rounded">Icon</code> component with{" "}
-          <code className="px-1 py-0.5 bg-custom-background-80 rounded">name</code> prop for dynamic icon selection.
+        <h3 className="text-16 font-semibold text-primary">Registry-Based Usage</h3>
+        <p className="text-13 text-tertiary">
+          Use the <code className="rounded-sm bg-layer-1 px-1 py-0.5">Icon</code> component with{" "}
+          <code className="rounded-sm bg-layer-1 px-1 py-0.5">name</code> prop for dynamic icon selection.
         </p>
-        <div className="grid grid-cols-12 gap-6 w-full">
-          <div className="flex flex-col items-center justify-center gap-3 p-4 col-span-2">
-            <Icon name="workspace.home" className="text-custom-text-200" />
-            <p className="text-xs text-custom-text-300 text-center">workspace.home</p>
+        <div className="grid w-full grid-cols-12 gap-6">
+          <div className="col-span-2 flex flex-col items-center justify-center gap-3 p-4">
+            <Icon name="workspace.home" className="text-secondary" />
+            <p className="text-center text-11 text-tertiary">workspace.home</p>
           </div>
-          <div className="flex flex-col items-center justify-center gap-3 p-4 col-span-2">
-            <Icon name="project.cycle" className="text-custom-text-200" />
-            <p className="text-xs text-custom-text-300 text-center">project.cycle</p>
+          <div className="col-span-2 flex flex-col items-center justify-center gap-3 p-4">
+            <Icon name="project.cycle" className="text-secondary" />
+            <p className="text-center text-11 text-tertiary">project.cycle</p>
           </div>
-          <div className="flex flex-col items-center justify-center gap-3 p-4 col-span-2">
-            <Icon name="layout.board" className="text-custom-text-200" />
-            <p className="text-xs text-custom-text-300 text-center">layout.board</p>
+          <div className="col-span-2 flex flex-col items-center justify-center gap-3 p-4">
+            <Icon name="layout.board" className="text-secondary" />
+            <p className="text-center text-11 text-tertiary">layout.board</p>
           </div>
-          <div className="flex flex-col items-center justify-center gap-3 p-4 col-span-2">
-            <Icon name="property.priority" className="text-custom-text-200" />
-            <p className="text-xs text-custom-text-300 text-center">property.priority</p>
+          <div className="col-span-2 flex flex-col items-center justify-center gap-3 p-4">
+            <Icon name="property.priority" className="text-secondary" />
+            <p className="text-center text-11 text-tertiary">property.priority</p>
           </div>
         </div>
       </div>
 
       <div className="space-y-4">
-        <h3 className="text-lg font-semibold text-custom-text-100">Direct Import Usage</h3>
-        <p className="text-sm text-custom-text-300">
+        <h3 className="text-16 font-semibold text-primary">Direct Import Usage</h3>
+        <p className="text-13 text-tertiary">
           Import icon components directly for better tree-shaking and type safety.
         </p>
-        <div className="grid grid-cols-12 gap-6 w-full">
-          <div className="flex flex-col items-center justify-center gap-3 p-4 col-span-2">
-            <HomeIcon className="text-custom-text-200" />
-            <p className="text-xs text-custom-text-300 text-center">HomeIcon</p>
+        <div className="grid w-full grid-cols-12 gap-6">
+          <div className="col-span-2 flex flex-col items-center justify-center gap-3 p-4">
+            <HomeIcon className="text-secondary" />
+            <p className="text-center text-11 text-tertiary">HomeIcon</p>
           </div>
-          <div className="flex flex-col items-center justify-center gap-3 p-4 col-span-2">
-            <CycleIcon className="text-custom-text-200" />
-            <p className="text-xs text-custom-text-300 text-center">CycleIcon</p>
+          <div className="col-span-2 flex flex-col items-center justify-center gap-3 p-4">
+            <CycleIcon className="text-secondary" />
+            <p className="text-center text-11 text-tertiary">CycleIcon</p>
           </div>
-          <div className="flex flex-col items-center justify-center gap-3 p-4 col-span-2">
-            <ProjectIcon className="text-custom-text-200" />
-            <p className="text-xs text-custom-text-300 text-center">ProjectIcon</p>
+          <div className="col-span-2 flex flex-col items-center justify-center gap-3 p-4">
+            <ProjectIcon className="text-secondary" />
+            <p className="text-center text-11 text-tertiary">ProjectIcon</p>
           </div>
         </div>
       </div>
@@ -176,32 +195,30 @@ export const IconSizes: Story = {
   render: () => (
     <div className="space-y-6">
       <div className="space-y-4">
-        <h3 className="text-lg font-semibold text-custom-text-100">Icon Sizes</h3>
-        <p className="text-sm text-custom-text-300">
-          Icons can be rendered in different sizes using width and height props.
-        </p>
+        <h3 className="text-16 font-semibold text-primary">Icon Sizes</h3>
+        <p className="text-13 text-tertiary">Icons can be rendered in different sizes using width and height props.</p>
       </div>
 
       <div className="flex items-end gap-8">
         <div className="flex flex-col items-center gap-2">
-          <Icon name="workspace.home" width="12" height="12" className="text-custom-text-200" />
-          <p className="text-xs text-custom-text-300">12x12</p>
+          <Icon name="workspace.home" width="12" height="12" className="text-secondary" />
+          <p className="text-11 text-tertiary">12x12</p>
         </div>
         <div className="flex flex-col items-center gap-2">
-          <Icon name="workspace.home" width="16" height="16" className="text-custom-text-200" />
-          <p className="text-xs text-custom-text-300">16x16 (default)</p>
+          <Icon name="workspace.home" width="16" height="16" className="text-secondary" />
+          <p className="text-11 text-tertiary">16x16 (default)</p>
         </div>
         <div className="flex flex-col items-center gap-2">
-          <Icon name="workspace.home" width="24" height="24" className="text-custom-text-200" />
-          <p className="text-xs text-custom-text-300">24x24</p>
+          <Icon name="workspace.home" width="24" height="24" className="text-secondary" />
+          <p className="text-11 text-tertiary">24x24</p>
         </div>
         <div className="flex flex-col items-center gap-2">
-          <Icon name="workspace.home" width="32" height="32" className="text-custom-text-200" />
-          <p className="text-xs text-custom-text-300">32x32</p>
+          <Icon name="workspace.home" width="32" height="32" className="text-secondary" />
+          <p className="text-11 text-tertiary">32x32</p>
         </div>
         <div className="flex flex-col items-center gap-2">
-          <Icon name="workspace.home" width="48" height="48" className="text-custom-text-200" />
-          <p className="text-xs text-custom-text-300">48x48</p>
+          <Icon name="workspace.home" width="48" height="48" className="text-secondary" />
+          <p className="text-11 text-tertiary">48x48</p>
         </div>
       </div>
     </div>
diff --git a/packages/propel/src/icons/in-progress-icon.tsx b/packages/propel/src/icons/in-progress-icon.tsx
index 574b0a553..fe903567e 100644
--- a/packages/propel/src/icons/in-progress-icon.tsx
+++ b/packages/propel/src/icons/in-progress-icon.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 
 import type { ISvgIcons } from "./type";
diff --git a/packages/propel/src/icons/index.ts b/packages/propel/src/icons/index.ts
index 01a0aa791..047df91e1 100644
--- a/packages/propel/src/icons/index.ts
+++ b/packages/propel/src/icons/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export type { ISvgIcons } from "./type";
 export type { IconName } from "./registry";
 export { ICON_REGISTRY } from "./registry";
@@ -19,7 +25,6 @@ export * from "./create-icon";
 export * from "./cycle";
 export * from "./default-icon";
 export * from "./dice-icon";
-export * from "./discord-icon";
 export * from "./display-properties";
 export * from "./done-icon";
 export * from "./dropdown-icon";
@@ -32,12 +37,12 @@ export * from "./icon-wrapper";
 export * from "./icon";
 export * from "./in-progress-icon";
 export * from "./info-fill-icon";
-export * from "./info-icon";
 export * from "./intake";
 export * from "./layer-stack";
 export * from "./layers-icon";
 export * from "./layouts";
 export * from "./lead-icon";
+export * from "./misc";
 export * from "./module";
 export * from "./monospace-icon";
 export * from "./multiple-sticky";
diff --git a/packages/propel/src/icons/info-fill-icon.tsx b/packages/propel/src/icons/info-fill-icon.tsx
index b5428910d..3cc649a78 100644
--- a/packages/propel/src/icons/info-fill-icon.tsx
+++ b/packages/propel/src/icons/info-fill-icon.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 
 import type { ISvgIcons } from "./type";
diff --git a/packages/propel/src/icons/info-icon.tsx b/packages/propel/src/icons/info-icon.tsx
deleted file mode 100644
index 3e2f3609e..000000000
--- a/packages/propel/src/icons/info-icon.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import * as React from "react";
-
-import type { ISvgIcons } from "./type";
-
-export function InfoIcon({ className = "text-current", ...rest }: ISvgIcons) {
-  return (
-    <svg
-      viewBox="0 0 24 24"
-      className={`${className} stroke-2`}
-      stroke="currentColor"
-      fill="none"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      xmlns="http://www.w3.org/2000/svg"
-      {...rest}
-    >
-      <circle cx="12" cy="12" r="10" />
-      <path d="M12 16v-4" />
-      <path d="M12 8h.01" />
-    </svg>
-  );
-}
diff --git a/packages/propel/src/icons/intake.tsx b/packages/propel/src/icons/intake.tsx
index 9d45f01e2..4471dd060 100644
--- a/packages/propel/src/icons/intake.tsx
+++ b/packages/propel/src/icons/intake.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 
 import type { ISvgIcons } from "./type";
diff --git a/packages/propel/src/icons/layer-stack.tsx b/packages/propel/src/icons/layer-stack.tsx
index 109da58ad..3534c778c 100644
--- a/packages/propel/src/icons/layer-stack.tsx
+++ b/packages/propel/src/icons/layer-stack.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 
 import type { ISvgIcons } from "./type";
diff --git a/packages/propel/src/icons/layers-icon.tsx b/packages/propel/src/icons/layers-icon.tsx
index c571df4d4..ba54ea73d 100644
--- a/packages/propel/src/icons/layers-icon.tsx
+++ b/packages/propel/src/icons/layers-icon.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 
 import type { ISvgIcons } from "./type";
diff --git a/packages/propel/src/icons/layouts/board-icon.tsx b/packages/propel/src/icons/layouts/board-icon.tsx
index 42987f541..9bdebaf8f 100644
--- a/packages/propel/src/icons/layouts/board-icon.tsx
+++ b/packages/propel/src/icons/layouts/board-icon.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 
 import { IconWrapper } from "../icon-wrapper";
diff --git a/packages/propel/src/icons/layouts/calendar-icon.tsx b/packages/propel/src/icons/layouts/calendar-icon.tsx
index 5d36401a5..f88ae3a92 100644
--- a/packages/propel/src/icons/layouts/calendar-icon.tsx
+++ b/packages/propel/src/icons/layouts/calendar-icon.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 
 import { IconWrapper } from "../icon-wrapper";
diff --git a/packages/propel/src/icons/layouts/card-icon.tsx b/packages/propel/src/icons/layouts/card-icon.tsx
index 480ba7dd8..fa7c54687 100644
--- a/packages/propel/src/icons/layouts/card-icon.tsx
+++ b/packages/propel/src/icons/layouts/card-icon.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 
 import { IconWrapper } from "../icon-wrapper";
diff --git a/packages/propel/src/icons/layouts/grid-icon.tsx b/packages/propel/src/icons/layouts/grid-icon.tsx
index 7cbc9900b..af7af3621 100644
--- a/packages/propel/src/icons/layouts/grid-icon.tsx
+++ b/packages/propel/src/icons/layouts/grid-icon.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 
 import { IconWrapper } from "../icon-wrapper";
diff --git a/packages/propel/src/icons/layouts/index.ts b/packages/propel/src/icons/layouts/index.ts
index 649d93d3b..4bf2f7473 100644
--- a/packages/propel/src/icons/layouts/index.ts
+++ b/packages/propel/src/icons/layouts/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./calendar-icon";
 export * from "./card-icon";
 export * from "./timeline-icon";
diff --git a/packages/propel/src/icons/layouts/list-icon.tsx b/packages/propel/src/icons/layouts/list-icon.tsx
index 14fe11150..30c44676e 100644
--- a/packages/propel/src/icons/layouts/list-icon.tsx
+++ b/packages/propel/src/icons/layouts/list-icon.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 
 import { IconWrapper } from "../icon-wrapper";
diff --git a/packages/propel/src/icons/layouts/sheet-icon.tsx b/packages/propel/src/icons/layouts/sheet-icon.tsx
index 9f2e4eb96..de1f194bd 100644
--- a/packages/propel/src/icons/layouts/sheet-icon.tsx
+++ b/packages/propel/src/icons/layouts/sheet-icon.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 
 import { IconWrapper } from "../icon-wrapper";
diff --git a/packages/propel/src/icons/layouts/timeline-icon.tsx b/packages/propel/src/icons/layouts/timeline-icon.tsx
index 91a01cb6b..5a3e7443f 100644
--- a/packages/propel/src/icons/layouts/timeline-icon.tsx
+++ b/packages/propel/src/icons/layouts/timeline-icon.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 
 import { IconWrapper } from "../icon-wrapper";
diff --git a/packages/propel/src/icons/lead-icon.tsx b/packages/propel/src/icons/lead-icon.tsx
index bd7c107e5..b7251d731 100644
--- a/packages/propel/src/icons/lead-icon.tsx
+++ b/packages/propel/src/icons/lead-icon.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 
 import type { ISvgIcons } from "./type";
diff --git a/packages/propel/src/icons/misc/check-circle-filled-icon.tsx b/packages/propel/src/icons/misc/check-circle-filled-icon.tsx
new file mode 100644
index 000000000..c0227cbc3
--- /dev/null
+++ b/packages/propel/src/icons/misc/check-circle-filled-icon.tsx
@@ -0,0 +1,25 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import { IconWrapper } from "../icon-wrapper";
+import type { ISvgIcons } from "../type";
+
+export const CheckCircleFilledIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => {
+  const clipPathId = React.useId();
+
+  return (
+    <IconWrapper color={color} clipPathId={clipPathId} {...rest}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M7.99984 0.666992C3.94975 0.666992 0.666504 3.95024 0.666504 8.00033C0.666504 12.0504 3.94975 15.3337 7.99984 15.3337C12.0499 15.3337 15.3332 12.0504 15.3332 8.00033C15.3332 3.95024 12.0499 0.666992 7.99984 0.666992ZM11.4712 6.47173C11.7316 6.21138 11.7316 5.78927 11.4712 5.52892C11.2109 5.26857 10.7888 5.26857 10.5284 5.52892L6.99984 9.05752L5.47124 7.52892C5.21089 7.26857 4.78878 7.26857 4.52843 7.52892C4.26808 7.78927 4.26808 8.21138 4.52843 8.47173L6.52843 10.4717C6.78878 10.7321 7.21089 10.7321 7.47124 10.4717L11.4712 6.47173Z"
+        fill={color}
+      />
+    </IconWrapper>
+  );
+};
diff --git a/packages/propel/src/icons/misc/close-circle-filled-icon.tsx b/packages/propel/src/icons/misc/close-circle-filled-icon.tsx
new file mode 100644
index 000000000..2b927d62c
--- /dev/null
+++ b/packages/propel/src/icons/misc/close-circle-filled-icon.tsx
@@ -0,0 +1,25 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import { IconWrapper } from "../icon-wrapper";
+import type { ISvgIcons } from "../type";
+
+export const CloseCircleFilledIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => {
+  const clipPathId = React.useId();
+
+  return (
+    <IconWrapper color={color} clipPathId={clipPathId} {...rest}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M7.99984 0.666992C3.94975 0.666992 0.666504 3.95024 0.666504 8.00033C0.666504 12.0504 3.94975 15.3337 7.99984 15.3337C12.0499 15.3337 15.3332 12.0504 15.3332 8.00033C15.3332 3.95024 12.0499 0.666992 7.99984 0.666992ZM10.4712 5.52892C10.7316 5.78927 10.7316 6.21138 10.4712 6.47173L8.94265 8.00033L10.4712 9.52892C10.7316 9.78927 10.7316 10.2114 10.4712 10.4717C10.2109 10.7321 9.78878 10.7321 9.52843 10.4717L7.99984 8.94313L6.47124 10.4717C6.21089 10.7321 5.78878 10.7321 5.52843 10.4717C5.26808 10.2114 5.26808 9.78927 5.52843 9.52892L7.05703 8.00033L5.52843 6.47173C5.26808 6.21138 5.26808 5.78927 5.52843 5.52892C5.78878 5.26857 6.21089 5.26857 6.47124 5.52892L7.99984 7.05752L9.52843 5.52892C9.78878 5.26857 10.2109 5.26857 10.4712 5.52892Z"
+        fill={color}
+      />
+    </IconWrapper>
+  );
+};
diff --git a/packages/propel/src/icons/misc/index.ts b/packages/propel/src/icons/misc/index.ts
new file mode 100644
index 000000000..34716ecbe
--- /dev/null
+++ b/packages/propel/src/icons/misc/index.ts
@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./check-circle-filled-icon";
+export * from "./close-circle-filled-icon";
+export * from "./info-icon";
diff --git a/packages/propel/src/icons/misc/info-icon.tsx b/packages/propel/src/icons/misc/info-icon.tsx
new file mode 100644
index 000000000..2e007d3fb
--- /dev/null
+++ b/packages/propel/src/icons/misc/info-icon.tsx
@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import { IconWrapper } from "../icon-wrapper";
+import type { ISvgIcons } from "../type";
+
+export const InfoIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => {
+  const clipPathId = React.useId();
+
+  return (
+    <IconWrapper color={color} clipPathId={clipPathId} {...rest}>
+      <path
+        d="M14.041 8C14.041 4.66339 11.3365 1.95818 8 1.95801C4.66328 1.95801 1.95801 4.66328 1.95801 8C1.95818 11.3365 4.66339 14.041 8 14.041C11.3364 14.0408 14.0408 11.3364 14.041 8ZM7.375 10.666V8C7.375 7.65482 7.65482 7.375 8 7.375C8.34503 7.37518 8.625 7.65493 8.625 8V10.666C8.625 11.0111 8.34503 11.2908 8 11.291C7.65482 11.291 7.375 11.0112 7.375 10.666ZM8.00586 4.70801C8.35104 4.70801 8.63086 4.98783 8.63086 5.33301C8.63086 5.67819 8.35104 5.95801 8.00586 5.95801H8C7.65482 5.95801 7.375 5.67819 7.375 5.33301C7.375 4.98783 7.65482 4.70801 8 4.70801H8.00586ZM15.291 8C15.2908 12.0268 12.0268 15.2908 8 15.291C3.97303 15.291 0.708184 12.0269 0.708008 8C0.708008 3.97292 3.97292 0.708008 8 0.708008C12.0269 0.708184 15.291 3.97303 15.291 8Z"
+        fill={color}
+      />
+    </IconWrapper>
+  );
+};
diff --git a/packages/propel/src/icons/module/backlog.tsx b/packages/propel/src/icons/module/backlog.tsx
index 1a4ff0a6c..2a99d682d 100644
--- a/packages/propel/src/icons/module/backlog.tsx
+++ b/packages/propel/src/icons/module/backlog.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 
 import type { ISvgIcons } from "../type";
diff --git a/packages/propel/src/icons/module/cancelled.tsx b/packages/propel/src/icons/module/cancelled.tsx
index c8498cf60..75575f136 100644
--- a/packages/propel/src/icons/module/cancelled.tsx
+++ b/packages/propel/src/icons/module/cancelled.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 
 import type { ISvgIcons } from "../type";
diff --git a/packages/propel/src/icons/module/completed.tsx b/packages/propel/src/icons/module/completed.tsx
index 77d432d58..31e2459bd 100644
--- a/packages/propel/src/icons/module/completed.tsx
+++ b/packages/propel/src/icons/module/completed.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 
 import type { ISvgIcons } from "../type";
diff --git a/packages/propel/src/icons/module/in-progress.tsx b/packages/propel/src/icons/module/in-progress.tsx
index 8fa4681de..01ffce825 100644
--- a/packages/propel/src/icons/module/in-progress.tsx
+++ b/packages/propel/src/icons/module/in-progress.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 
 import type { ISvgIcons } from "../type";
diff --git a/packages/propel/src/icons/module/index.ts b/packages/propel/src/icons/module/index.ts
index e82014b2f..f4d38c437 100644
--- a/packages/propel/src/icons/module/index.ts
+++ b/packages/propel/src/icons/module/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./backlog";
 export * from "./cancelled";
 export * from "./completed";
diff --git a/packages/propel/src/icons/module/module-status-icon.tsx b/packages/propel/src/icons/module/module-status-icon.tsx
index 875dd5ed4..e19242e29 100644
--- a/packages/propel/src/icons/module/module-status-icon.tsx
+++ b/packages/propel/src/icons/module/module-status-icon.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 
 import { ModuleBacklogIcon } from "./backlog";
diff --git a/packages/propel/src/icons/module/paused.tsx b/packages/propel/src/icons/module/paused.tsx
index d3afc0b52..df1c99b21 100644
--- a/packages/propel/src/icons/module/paused.tsx
+++ b/packages/propel/src/icons/module/paused.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 
 import type { ISvgIcons } from "../type";
diff --git a/packages/propel/src/icons/module/planned.tsx b/packages/propel/src/icons/module/planned.tsx
index 6dba8888a..3d0485f31 100644
--- a/packages/propel/src/icons/module/planned.tsx
+++ b/packages/propel/src/icons/module/planned.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 
 import type { ISvgIcons } from "../type";
diff --git a/packages/propel/src/icons/monospace-icon.tsx b/packages/propel/src/icons/monospace-icon.tsx
index a227a7386..42221b6da 100644
--- a/packages/propel/src/icons/monospace-icon.tsx
+++ b/packages/propel/src/icons/monospace-icon.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 
 import type { ISvgIcons } from "./type";
diff --git a/packages/propel/src/icons/multiple-sticky.tsx b/packages/propel/src/icons/multiple-sticky.tsx
index 2c1a7eb44..f61bdee7a 100644
--- a/packages/propel/src/icons/multiple-sticky.tsx
+++ b/packages/propel/src/icons/multiple-sticky.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 
 import type { ISvgIcons } from "./type";
diff --git a/packages/propel/src/icons/off-track-icon.tsx b/packages/propel/src/icons/off-track-icon.tsx
index 76ee3a113..c26c5ebf3 100644
--- a/packages/propel/src/icons/off-track-icon.tsx
+++ b/packages/propel/src/icons/off-track-icon.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 
 import type { ISvgIcons } from "./type";
diff --git a/packages/propel/src/icons/on-track-icon.tsx b/packages/propel/src/icons/on-track-icon.tsx
index 53a977799..b735a993d 100644
--- a/packages/propel/src/icons/on-track-icon.tsx
+++ b/packages/propel/src/icons/on-track-icon.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 
 import type { ISvgIcons } from "./type";
diff --git a/packages/propel/src/icons/overview-icon.tsx b/packages/propel/src/icons/overview-icon.tsx
index 99f99728c..513c1f5dd 100644
--- a/packages/propel/src/icons/overview-icon.tsx
+++ b/packages/propel/src/icons/overview-icon.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 
 import type { ISvgIcons } from "./type";
diff --git a/packages/propel/src/icons/pending-icon.tsx b/packages/propel/src/icons/pending-icon.tsx
index ba97a4b49..6b0b9cb96 100644
--- a/packages/propel/src/icons/pending-icon.tsx
+++ b/packages/propel/src/icons/pending-icon.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 
 import type { ISvgIcons } from "./type";
diff --git a/packages/propel/src/icons/photo-filter-icon.tsx b/packages/propel/src/icons/photo-filter-icon.tsx
index 9546bd262..2043cd34f 100644
--- a/packages/propel/src/icons/photo-filter-icon.tsx
+++ b/packages/propel/src/icons/photo-filter-icon.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 
 import type { ISvgIcons } from "./type";
diff --git a/packages/propel/src/icons/planned-icon.tsx b/packages/propel/src/icons/planned-icon.tsx
index 298960c4c..8d5791989 100644
--- a/packages/propel/src/icons/planned-icon.tsx
+++ b/packages/propel/src/icons/planned-icon.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 
 import type { ISvgIcons } from "./type";
diff --git a/packages/propel/src/icons/priority-icon.tsx b/packages/propel/src/icons/priority-icon.tsx
index 1b518e75b..050b32cd7 100644
--- a/packages/propel/src/icons/priority-icon.tsx
+++ b/packages/propel/src/icons/priority-icon.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 import { AlertCircle, Ban, SignalHigh, SignalLow, SignalMedium } from "lucide-react";
 import { cn } from "../utils";
@@ -16,11 +22,11 @@ export function PriorityIcon(props: IPriorityIcon) {
   const { priority, className = "", containerClassName = "", size = 14, withContainer = false } = props;
 
   const priorityClasses = {
-    urgent: "bg-red-600/20 text-red-600 border-red-600",
-    high: "bg-orange-500/20 text-orange-500 border-orange-500",
-    medium: "bg-yellow-500/20 text-yellow-500 border-yellow-500",
-    low: "bg-custom-primary-100/20 text-custom-primary-100 border-custom-primary-100",
-    none: "bg-custom-background-80 text-custom-text-200 border-custom-border-300",
+    urgent: "bg-layer-2 text-priority-urgent border-priority-urgent",
+    high: "bg-layer-2 text-priority-high border-priority-high",
+    medium: "bg-layer-2 text-priority-medium border-priority-medium",
+    low: "bg-layer-2 text-priority-low border-priority-low",
+    none: "bg-layer-2 text-priority-none border-priority-none",
   };
 
   // get priority icon
@@ -40,7 +46,7 @@ export function PriorityIcon(props: IPriorityIcon) {
       {withContainer ? (
         <div
           className={cn(
-            "flex items-center justify-center border rounded p-0.5 flex-shrink-0",
+            "flex flex-shrink-0 items-center justify-center rounded-sm border p-0.5",
             priorityClasses[priority ?? "none"],
             containerClassName
           )}
@@ -63,11 +69,11 @@ export function PriorityIcon(props: IPriorityIcon) {
           className={cn(
             "flex-shrink-0",
             {
-              "text-red-600": priority === "urgent",
-              "text-orange-500": priority === "high",
-              "text-yellow-500": priority === "medium",
-              "text-custom-primary-100": priority === "low",
-              "text-custom-text-200": priority === "none",
+              "text-priority-urgent": priority === "urgent",
+              "text-priority-high": priority === "high",
+              "text-priority-medium": priority === "medium",
+              "text-priority-low": priority === "low",
+              "text-priority-none": priority === "none",
             },
             className
           )}
diff --git a/packages/propel/src/icons/project/cycle-icon.tsx b/packages/propel/src/icons/project/cycle-icon.tsx
index 645f8af56..afba0fedf 100644
--- a/packages/propel/src/icons/project/cycle-icon.tsx
+++ b/packages/propel/src/icons/project/cycle-icon.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 
 import { IconWrapper } from "../icon-wrapper";
diff --git a/packages/propel/src/icons/project/epic-icon.tsx b/packages/propel/src/icons/project/epic-icon.tsx
index f241d01aa..132d9732f 100644
--- a/packages/propel/src/icons/project/epic-icon.tsx
+++ b/packages/propel/src/icons/project/epic-icon.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 
 import { IconWrapper } from "../icon-wrapper";
diff --git a/packages/propel/src/icons/project/index.ts b/packages/propel/src/icons/project/index.ts
index 0ace8ff74..37be25295 100644
--- a/packages/propel/src/icons/project/index.ts
+++ b/packages/propel/src/icons/project/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./cycle-icon";
 export * from "./epic-icon";
 export * from "./intake-icon";
diff --git a/packages/propel/src/icons/project/intake-icon.tsx b/packages/propel/src/icons/project/intake-icon.tsx
index f3bd24d32..96d33fb3c 100644
--- a/packages/propel/src/icons/project/intake-icon.tsx
+++ b/packages/propel/src/icons/project/intake-icon.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 
 import { IconWrapper } from "../icon-wrapper";
diff --git a/packages/propel/src/icons/project/module-icon.tsx b/packages/propel/src/icons/project/module-icon.tsx
index 51a707747..fae636290 100644
--- a/packages/propel/src/icons/project/module-icon.tsx
+++ b/packages/propel/src/icons/project/module-icon.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 
 import { IconWrapper } from "../icon-wrapper";
diff --git a/packages/propel/src/icons/project/page-icon.tsx b/packages/propel/src/icons/project/page-icon.tsx
index 2ab9b764c..feefbb7ef 100644
--- a/packages/propel/src/icons/project/page-icon.tsx
+++ b/packages/propel/src/icons/project/page-icon.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 
 import { IconWrapper } from "../icon-wrapper";
diff --git a/packages/propel/src/icons/project/view-icon.tsx b/packages/propel/src/icons/project/view-icon.tsx
index f597943c4..11fb1d392 100644
--- a/packages/propel/src/icons/project/view-icon.tsx
+++ b/packages/propel/src/icons/project/view-icon.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 
 import { IconWrapper } from "../icon-wrapper";
diff --git a/packages/propel/src/icons/project/work-items-icon.tsx b/packages/propel/src/icons/project/work-items-icon.tsx
index 586f0a597..54eeb067e 100644
--- a/packages/propel/src/icons/project/work-items-icon.tsx
+++ b/packages/propel/src/icons/project/work-items-icon.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 
 import { IconWrapper } from "../icon-wrapper";
diff --git a/packages/propel/src/icons/properties/boolean-icon.tsx b/packages/propel/src/icons/properties/boolean-icon.tsx
index d80eb44ac..7e31ad75b 100644
--- a/packages/propel/src/icons/properties/boolean-icon.tsx
+++ b/packages/propel/src/icons/properties/boolean-icon.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 
 import { IconWrapper } from "../icon-wrapper";
diff --git a/packages/propel/src/icons/properties/comment-reply-icon.tsx b/packages/propel/src/icons/properties/comment-reply-icon.tsx
new file mode 100644
index 000000000..ac7ddb154
--- /dev/null
+++ b/packages/propel/src/icons/properties/comment-reply-icon.tsx
@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import { IconWrapper } from "../icon-wrapper";
+import type { ISvgIcons } from "../type";
+
+export function CommentReplyIcon({ color = "currentColor", ...rest }: ISvgIcons) {
+  return (
+    <IconWrapper color={color} {...rest}>
+      <path
+        d="M13.375 8.79981V5.2002C13.375 4.62994 13.3743 4.23962 13.3497 3.9375C13.3256 3.64296 13.2822 3.48707 13.2256 3.37598C13.0938 3.11725 12.8828 2.90624 12.6241 2.77441C12.513 2.71788 12.3571 2.67446 12.0625 2.65039C11.7604 2.62572 11.3701 2.625 10.7998 2.625H5.20024C4.62999 2.625 4.23967 2.62572 3.93754 2.65039C3.643 2.67446 3.48712 2.71788 3.37602 2.77441C3.1173 2.90624 2.90628 3.11725 2.77446 3.37598C2.71793 3.48707 2.6745 3.64296 2.65044 3.9375C2.62576 4.23962 2.62504 4.62995 2.62504 5.2002V9.33301C2.62504 9.9927 2.63053 10.2007 2.67192 10.3555C2.79906 10.83 3.17007 11.201 3.64458 11.3281C3.79936 11.3695 4.00735 11.375 4.66704 11.375C5.01207 11.3752 5.29204 11.6549 5.29204 12V13.3652L6.73344 12.2129C7.03847 11.9689 7.25663 11.79 7.50688 11.6621C7.7175 11.5545 7.94219 11.4763 8.17387 11.4287C8.44928 11.3722 8.73134 11.375 9.12212 11.375H10.7998C11.3701 11.375 11.7604 11.3743 12.0625 11.3496C12.3571 11.3255 12.513 11.2821 12.6241 11.2256C12.8828 11.0938 13.0938 10.8827 13.2256 10.624C13.2822 10.5129 13.3256 10.357 13.3497 10.0625C13.3743 9.76038 13.375 9.37006 13.375 8.79981ZM14.625 8.79981C14.625 9.34933 14.6255 9.79928 14.5957 10.1641C14.5653 10.5361 14.5002 10.8748 14.3389 11.1914C14.0872 11.6853 13.6854 12.0872 13.1915 12.3389C12.8748 12.5001 12.5362 12.5653 12.1641 12.5957C11.7993 12.6255 11.3494 12.625 10.7998 12.625H9.12212C8.68139 12.625 8.54724 12.6282 8.42485 12.6533C8.30369 12.6782 8.18638 12.7191 8.07622 12.7754C7.96492 12.8322 7.85814 12.9139 7.51372 13.1895L5.92387 14.4619C5.79493 14.5651 5.6641 14.6693 5.55083 14.7441C5.44715 14.8127 5.25268 14.9314 5.00102 14.9316C4.70926 14.9319 4.43308 14.7993 4.25102 14.5713C4.09396 14.3745 4.06499 14.1481 4.05376 14.0244C4.04148 13.8892 4.04204 13.7217 4.04204 13.5566V12.6191C3.76509 12.6115 3.53206 12.5919 3.32036 12.5352C2.41479 12.2924 1.70767 11.5853 1.46489 10.6797C1.37008 10.3258 1.37504 9.91275 1.37504 9.33301V5.2002C1.37504 4.65067 1.37457 4.20072 1.40434 3.83594C1.43474 3.46388 1.4999 3.12523 1.66118 2.80859C1.91285 2.31467 2.31471 1.9128 2.80864 1.66113C3.12527 1.49985 3.46392 1.4347 3.83598 1.4043C4.20076 1.37452 4.65072 1.375 5.20024 1.375H10.7998C11.3494 1.375 11.7993 1.37452 12.1641 1.4043C12.5362 1.4347 12.8748 1.49986 13.1915 1.66113C13.6854 1.9128 14.0872 2.31467 14.3389 2.80859C14.5002 3.12523 14.5653 3.46388 14.5957 3.83594C14.6255 4.20072 14.625 4.65067 14.625 5.2002V8.79981Z"
+        fill={color}
+      />
+    </IconWrapper>
+  );
+}
diff --git a/packages/propel/src/icons/properties/dropdown-icon.tsx b/packages/propel/src/icons/properties/dropdown-icon.tsx
index 7143ced3e..b4178aaaf 100644
--- a/packages/propel/src/icons/properties/dropdown-icon.tsx
+++ b/packages/propel/src/icons/properties/dropdown-icon.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 
 import { IconWrapper } from "../icon-wrapper";
diff --git a/packages/propel/src/icons/properties/due-date-icon.tsx b/packages/propel/src/icons/properties/due-date-icon.tsx
index 170ea39a0..2def4a901 100644
--- a/packages/propel/src/icons/properties/due-date-icon.tsx
+++ b/packages/propel/src/icons/properties/due-date-icon.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 
 import { IconWrapper } from "../icon-wrapper";
diff --git a/packages/propel/src/icons/properties/duplicate-icon.tsx b/packages/propel/src/icons/properties/duplicate-icon.tsx
index 0e4fa89f9..c376fb78c 100644
--- a/packages/propel/src/icons/properties/duplicate-icon.tsx
+++ b/packages/propel/src/icons/properties/duplicate-icon.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 
 import { IconWrapper } from "../icon-wrapper";
diff --git a/packages/propel/src/icons/properties/estimate-icon.tsx b/packages/propel/src/icons/properties/estimate-icon.tsx
index 2df27ff77..1d1bcc7f8 100644
--- a/packages/propel/src/icons/properties/estimate-icon.tsx
+++ b/packages/propel/src/icons/properties/estimate-icon.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 
 import { IconWrapper } from "../icon-wrapper";
diff --git a/packages/propel/src/icons/properties/hash-icon.tsx b/packages/propel/src/icons/properties/hash-icon.tsx
index cb67ec13c..be2ed0186 100644
--- a/packages/propel/src/icons/properties/hash-icon.tsx
+++ b/packages/propel/src/icons/properties/hash-icon.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 
 import { IconWrapper } from "../icon-wrapper";
diff --git a/packages/propel/src/icons/properties/index.ts b/packages/propel/src/icons/properties/index.ts
index 52e36a7f4..2b504e5aa 100644
--- a/packages/propel/src/icons/properties/index.ts
+++ b/packages/propel/src/icons/properties/index.ts
@@ -1,4 +1,11 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./boolean-icon";
+export * from "./comment-reply-icon";
 export * from "./dropdown-icon";
 export * from "./due-date-icon";
 export * from "./duplicate-icon";
@@ -18,3 +25,4 @@ export * from "./user-circle-icon";
 export * from "./user-icon";
 export * from "./user-square-icon";
 export * from "./workflows-icon";
+export * from "./label-filled-icon";
diff --git a/packages/propel/src/icons/properties/label-filled-icon.tsx b/packages/propel/src/icons/properties/label-filled-icon.tsx
new file mode 100644
index 000000000..951f6ca64
--- /dev/null
+++ b/packages/propel/src/icons/properties/label-filled-icon.tsx
@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import { IconWrapper } from "../icon-wrapper";
+import type { ISvgIcons } from "../type";
+
+export function LabelFilledIcon({ color = "currentColor", ...rest }: ISvgIcons) {
+  return (
+    <IconWrapper color={color} {...rest}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M0.884559 1.75908C1.07631 1.38275 1.38227 1.07679 1.75859 0.885047C2.01084 0.756518 2.27299 0.708974 2.53655 0.68744C2.78627 0.667037 3.08945 0.667048 3.44088 0.66706L6.50513 0.667026C6.77639 0.666773 7.01555 0.666551 7.24784 0.72232C7.45191 0.771314 7.647 0.852122 7.82595 0.96178C8.02964 1.0866 8.1986 1.25588 8.39023 1.44787L13.5614 6.61904C13.9408 6.9985 14.254 7.31168 14.4883 7.58765C14.7316 7.87428 14.9287 8.16432 15.041 8.50968C15.215 9.04526 15.215 9.62219 15.041 10.1578C14.9287 10.5031 14.7316 10.7932 14.4883 11.0798C14.254 11.3558 13.9408 11.6689 13.5614 12.0484L12.0479 13.5619C11.6685 13.9413 11.3553 14.2545 11.0793 14.4888C10.7927 14.7321 10.5026 14.9292 10.1573 15.0414C9.6217 15.2155 9.04477 15.2155 8.50919 15.0414C8.16383 14.9292 7.87379 14.7321 7.58716 14.4888C7.3112 14.2545 6.99802 13.9413 6.61856 13.5619L1.44738 8.39072C1.25539 8.19909 1.08611 8.03013 0.961291 7.82644C0.851634 7.64749 0.770825 7.4524 0.721832 7.24833C0.666062 7.01603 0.666285 6.77687 0.666537 6.5056L0.666571 3.44136C0.666559 3.08993 0.666549 2.78676 0.686952 2.53704C0.708486 2.27348 0.75603 2.01133 0.884559 1.75908ZM5.33325 4.00033C4.59687 4.00033 3.99992 4.59728 3.99992 5.33366C3.99992 6.07004 4.59687 6.66699 5.33325 6.66699C6.06963 6.66699 6.66658 6.07004 6.66658 5.33366C6.66658 4.59728 6.06963 4.00033 5.33325 4.00033Z"
+        fill={color}
+      />
+    </IconWrapper>
+  );
+}
diff --git a/packages/propel/src/icons/properties/label-icon.tsx b/packages/propel/src/icons/properties/label-icon.tsx
index 5f0df4f68..a70dc194c 100644
--- a/packages/propel/src/icons/properties/label-icon.tsx
+++ b/packages/propel/src/icons/properties/label-icon.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 
 import { IconWrapper } from "../icon-wrapper";
diff --git a/packages/propel/src/icons/properties/members-icon.tsx b/packages/propel/src/icons/properties/members-icon.tsx
index ec6733dc7..5804ee5c6 100644
--- a/packages/propel/src/icons/properties/members-icon.tsx
+++ b/packages/propel/src/icons/properties/members-icon.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 
 import { IconWrapper } from "../icon-wrapper";
diff --git a/packages/propel/src/icons/properties/overdue-date-icon.tsx b/packages/propel/src/icons/properties/overdue-date-icon.tsx
index a53c0edd7..0358902f4 100644
--- a/packages/propel/src/icons/properties/overdue-date-icon.tsx
+++ b/packages/propel/src/icons/properties/overdue-date-icon.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 
 import { IconWrapper } from "../icon-wrapper";
diff --git a/packages/propel/src/icons/properties/parent-icon.tsx b/packages/propel/src/icons/properties/parent-icon.tsx
index 5e941aefc..ba8e8294b 100644
--- a/packages/propel/src/icons/properties/parent-icon.tsx
+++ b/packages/propel/src/icons/properties/parent-icon.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 
 import { IconWrapper } from "../icon-wrapper";
diff --git a/packages/propel/src/icons/properties/priority-icon.tsx b/packages/propel/src/icons/properties/priority-icon.tsx
index ed1ea3202..05ea78d9f 100644
--- a/packages/propel/src/icons/properties/priority-icon.tsx
+++ b/packages/propel/src/icons/properties/priority-icon.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 
 import { IconWrapper } from "../icon-wrapper";
diff --git a/packages/propel/src/icons/properties/relates-to-icon.tsx b/packages/propel/src/icons/properties/relates-to-icon.tsx
index 02da39f2f..618358471 100644
--- a/packages/propel/src/icons/properties/relates-to-icon.tsx
+++ b/packages/propel/src/icons/properties/relates-to-icon.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 
 import { IconWrapper } from "../icon-wrapper";
diff --git a/packages/propel/src/icons/properties/relation-icon.tsx b/packages/propel/src/icons/properties/relation-icon.tsx
index 370406c71..293f15174 100644
--- a/packages/propel/src/icons/properties/relation-icon.tsx
+++ b/packages/propel/src/icons/properties/relation-icon.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 
 import { IconWrapper } from "../icon-wrapper";
diff --git a/packages/propel/src/icons/properties/scope-icon.tsx b/packages/propel/src/icons/properties/scope-icon.tsx
index 4cdd28739..a49045ac1 100644
--- a/packages/propel/src/icons/properties/scope-icon.tsx
+++ b/packages/propel/src/icons/properties/scope-icon.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 
 import { IconWrapper } from "../icon-wrapper";
diff --git a/packages/propel/src/icons/properties/start-date-icon.tsx b/packages/propel/src/icons/properties/start-date-icon.tsx
index 31ec2b9aa..abd1b873e 100644
--- a/packages/propel/src/icons/properties/start-date-icon.tsx
+++ b/packages/propel/src/icons/properties/start-date-icon.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 
 import { IconWrapper } from "../icon-wrapper";
diff --git a/packages/propel/src/icons/properties/state-icon.tsx b/packages/propel/src/icons/properties/state-icon.tsx
index 6d3f73894..350ef354c 100644
--- a/packages/propel/src/icons/properties/state-icon.tsx
+++ b/packages/propel/src/icons/properties/state-icon.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 
 import { IconWrapper } from "../icon-wrapper";
diff --git a/packages/propel/src/icons/properties/user-circle-icon.tsx b/packages/propel/src/icons/properties/user-circle-icon.tsx
index 0fc747d09..8fe424b35 100644
--- a/packages/propel/src/icons/properties/user-circle-icon.tsx
+++ b/packages/propel/src/icons/properties/user-circle-icon.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 
 import { IconWrapper } from "../icon-wrapper";
diff --git a/packages/propel/src/icons/properties/user-icon.tsx b/packages/propel/src/icons/properties/user-icon.tsx
index 05a139007..17f0aa471 100644
--- a/packages/propel/src/icons/properties/user-icon.tsx
+++ b/packages/propel/src/icons/properties/user-icon.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 
 import { IconWrapper } from "../icon-wrapper";
diff --git a/packages/propel/src/icons/properties/user-square-icon.tsx b/packages/propel/src/icons/properties/user-square-icon.tsx
index 55d709527..a46a76666 100644
--- a/packages/propel/src/icons/properties/user-square-icon.tsx
+++ b/packages/propel/src/icons/properties/user-square-icon.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 
 import { IconWrapper } from "../icon-wrapper";
diff --git a/packages/propel/src/icons/properties/workflows-icon.tsx b/packages/propel/src/icons/properties/workflows-icon.tsx
index 79ebd8900..114104e87 100644
--- a/packages/propel/src/icons/properties/workflows-icon.tsx
+++ b/packages/propel/src/icons/properties/workflows-icon.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 
 import { IconWrapper } from "../icon-wrapper";
diff --git a/packages/propel/src/icons/registry.ts b/packages/propel/src/icons/registry.ts
index 94f93b88a..64a69347f 100644
--- a/packages/propel/src/icons/registry.ts
+++ b/packages/propel/src/icons/registry.ts
@@ -1,57 +1,87 @@
-import { AddReactionIcon, AddWorkItemIcon, PreferencesIcon, SearchIcon } from "./actions";
-import { AddIcon } from "./actions/add-icon";
-import { CloseIcon } from "./actions/close-icon";
-import { ChevronDownIcon } from "./arrows/chevron-down";
-import { ChevronLeftIcon } from "./arrows/chevron-left";
-import { ChevronRightIcon } from "./arrows/chevron-right";
-import { ChevronUpIcon } from "./arrows/chevron-up";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// Action icons
+import {
+  AddIcon,
+  AddReactionIcon,
+  AddWorkItemIcon,
+  CheckIcon,
+  CloseIcon,
+  CopyIcon,
+  EditIcon,
+  FilterAppliedIcon,
+  FilterIcon,
+  GlobeIcon,
+  LinkIcon,
+  LockIcon,
+  NewTabIcon,
+  PlusIcon,
+  PreferencesIcon,
+  SearchIcon,
+  TrashIcon,
+  UpgradeIcon,
+} from "./actions";
+// Arrow icons
+import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ReplyIcon } from "./arrows";
+// Default icon
 import { DefaultIcon } from "./default-icon";
-import { BoardLayoutIcon } from "./layouts/board-icon";
-import { CalendarLayoutIcon } from "./layouts/calendar-icon";
-import { CardLayoutIcon } from "./layouts/card-icon";
-import { GridLayoutIcon } from "./layouts/grid-icon";
-import { ListLayoutIcon } from "./layouts/list-icon";
-import { SheetLayoutIcon } from "./layouts/sheet-icon";
-import { TimelineLayoutIcon } from "./layouts/timeline-icon";
-import { CycleIcon } from "./project/cycle-icon";
-import { EpicIcon } from "./project/epic-icon";
-import { IntakeIcon } from "./project/intake-icon";
-import { ModuleIcon } from "./project/module-icon";
-import { PageIcon } from "./project/page-icon";
-import { ViewsIcon } from "./project/view-icon";
-import { WorkItemsIcon } from "./project/work-items-icon";
-import { BooleanPropertyIcon } from "./properties/boolean-icon";
-import { DropdownPropertyIcon } from "./properties/dropdown-icon";
-import { DueDatePropertyIcon } from "./properties/due-date-icon";
-import { DuplicatePropertyIcon } from "./properties/duplicate-icon";
-import { EstimatePropertyIcon } from "./properties/estimate-icon";
-import { HashPropertyIcon } from "./properties/hash-icon";
-import { LabelPropertyIcon } from "./properties/label-icon";
-import { MembersPropertyIcon } from "./properties/members-icon";
-import { OverdueDatePropertyIcon } from "./properties/overdue-date-icon";
-import { ParentPropertyIcon } from "./properties/parent-icon";
-import { PriorityPropertyIcon } from "./properties/priority-icon";
-import { RelatesToPropertyIcon } from "./properties/relates-to-icon";
-import { RelationPropertyIcon } from "./properties/relation-icon";
-import { ScopePropertyIcon } from "./properties/scope-icon";
-import { StartDatePropertyIcon } from "./properties/start-date-icon";
-import { StatePropertyIcon } from "./properties/state-icon";
-import { UserCirclePropertyIcon } from "./properties/user-circle-icon";
-import { UserPropertyIcon } from "./properties/user-icon";
-import { UserSquarePropertyIcon } from "./properties/user-square-icon";
-import { WorkflowsPropertyIcon } from "./properties/workflows-icon";
-import { PiChatLogo } from "./sub-brand/pi-chat";
-import { PlaneNewIcon } from "./sub-brand/plane-icon";
-import { WikiIcon } from "./sub-brand/wiki-icon";
-import { AnalyticsIcon } from "./workspace/analytics-icon";
-import { ArchiveIcon } from "./workspace/archive-icon";
-import { DashboardIcon } from "./workspace/dashboard-icon";
-import { DraftIcon } from "./workspace/draft-icon";
-import { HomeIcon } from "./workspace/home-icon";
-import { InboxIcon } from "./workspace/inbox-icon";
-import { MultipleStickyIcon } from "./workspace/multiple-sticky-icon";
-import { ProjectIcon } from "./workspace/project-icon";
-import { YourWorkIcon } from "./workspace/your-work-icon";
+// Layout icons
+import {
+  BoardLayoutIcon,
+  CalendarLayoutIcon,
+  CardLayoutIcon,
+  GridLayoutIcon,
+  ListLayoutIcon,
+  SheetLayoutIcon,
+  TimelineLayoutIcon,
+} from "./layouts";
+// Misc icons
+import { InfoIcon } from "./misc";
+// Project icons
+import { CycleIcon, EpicIcon, IntakeIcon, ModuleIcon, PageIcon, ViewsIcon, WorkItemsIcon } from "./project";
+// Property icons
+import {
+  BooleanPropertyIcon,
+  DropdownPropertyIcon,
+  DueDatePropertyIcon,
+  DuplicatePropertyIcon,
+  EstimatePropertyIcon,
+  HashPropertyIcon,
+  LabelPropertyIcon,
+  MembersPropertyIcon,
+  OverdueDatePropertyIcon,
+  ParentPropertyIcon,
+  PriorityPropertyIcon,
+  RelatesToPropertyIcon,
+  RelationPropertyIcon,
+  ScopePropertyIcon,
+  StartDatePropertyIcon,
+  StatePropertyIcon,
+  UserCirclePropertyIcon,
+  UserPropertyIcon,
+  UserSquarePropertyIcon,
+  WorkflowsPropertyIcon,
+} from "./properties";
+// Sub-brand icons
+import { CopyLinkIcon } from "./actions/copy-link";
+import { LabelFilledIcon } from "./properties/label-filled-icon";
+import { PiChatLogo, PlaneNewIcon, WikiIcon } from "./sub-brand";
+// Workspace icons
+import {
+  AnalyticsIcon,
+  ArchiveIcon,
+  DashboardIcon,
+  DraftIcon,
+  HomeIcon,
+  InboxIcon,
+  MultipleStickyIcon,
+  ProjectIcon,
+  YourWorkIcon,
+} from "./workspace";
 
 export const ICON_REGISTRY = {
   // Sub-brand icons
@@ -112,14 +142,28 @@ export const ICON_REGISTRY = {
   "property.user": UserPropertyIcon,
   "property.user-square": UserSquarePropertyIcon,
   "property.workflows": WorkflowsPropertyIcon,
+  "property.label-filled": LabelFilledIcon,
 
   // Action icons
   "action.add": AddIcon,
   "action.add-workitem": AddWorkItemIcon,
   "action.add-reaction": AddReactionIcon,
+  "action.check": CheckIcon,
   "action.close": CloseIcon,
+  "action.copy": CopyIcon,
+  "action.edit": EditIcon,
+  "action.globe": GlobeIcon,
+  "action.link": LinkIcon,
+  "action.lock": LockIcon,
+  "action.new-tab": NewTabIcon,
+  "action.filter": FilterIcon,
+  "action.filter-applied": FilterAppliedIcon,
   "action.search": SearchIcon,
+  "action.plus": PlusIcon,
   "action.preferences": PreferencesIcon,
+  "action.trash": TrashIcon,
+  "action.copy-link": CopyLinkIcon,
+  "action.upgrade": UpgradeIcon,
 
   // Arrow icons
   "arrow.chevron-down": ChevronDownIcon,
@@ -127,6 +171,10 @@ export const ICON_REGISTRY = {
   "arrow.chevron-right": ChevronRightIcon,
   "arrow.chevron-up": ChevronUpIcon,
 
+  // Misc icons
+  "misc.info": InfoIcon,
+  "arrow.reply": ReplyIcon,
+
   // Default fallback
   default: DefaultIcon,
 } as const;
diff --git a/packages/propel/src/icons/related-icon.tsx b/packages/propel/src/icons/related-icon.tsx
index d94cf73a0..1f5c46bbc 100644
--- a/packages/propel/src/icons/related-icon.tsx
+++ b/packages/propel/src/icons/related-icon.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 
 import type { ISvgIcons } from "./type";
diff --git a/packages/propel/src/icons/sans-serif-icon.tsx b/packages/propel/src/icons/sans-serif-icon.tsx
index 4c56e0fe8..17c3348a1 100644
--- a/packages/propel/src/icons/sans-serif-icon.tsx
+++ b/packages/propel/src/icons/sans-serif-icon.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 
 import type { ISvgIcons } from "./type";
diff --git a/packages/propel/src/icons/serif-icon.tsx b/packages/propel/src/icons/serif-icon.tsx
index 7ee42628b..c14c8eb50 100644
--- a/packages/propel/src/icons/serif-icon.tsx
+++ b/packages/propel/src/icons/serif-icon.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 
 import type { ISvgIcons } from "./type";
diff --git a/packages/propel/src/icons/set-as-default-icon.tsx b/packages/propel/src/icons/set-as-default-icon.tsx
index 155438d20..674a739f2 100644
--- a/packages/propel/src/icons/set-as-default-icon.tsx
+++ b/packages/propel/src/icons/set-as-default-icon.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { ISvgIcons } from "./type";
 
 export function SetAsDefaultIcon({ className = "text-current", ...rest }: ISvgIcons) {
diff --git a/packages/propel/src/icons/side-panel-icon.tsx b/packages/propel/src/icons/side-panel-icon.tsx
index be2de3bd4..810e9a995 100644
--- a/packages/propel/src/icons/side-panel-icon.tsx
+++ b/packages/propel/src/icons/side-panel-icon.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 
 import type { ISvgIcons } from "./type";
diff --git a/packages/propel/src/icons/state/backlog-group-icon.tsx b/packages/propel/src/icons/state/backlog-group-icon.tsx
index d394c46cd..a42e24f7f 100644
--- a/packages/propel/src/icons/state/backlog-group-icon.tsx
+++ b/packages/propel/src/icons/state/backlog-group-icon.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 
 import type { ISvgIcons } from "../type";
diff --git a/packages/propel/src/icons/state/cancelled-group-icon.tsx b/packages/propel/src/icons/state/cancelled-group-icon.tsx
index 6bd25d329..4ce8c7d30 100644
--- a/packages/propel/src/icons/state/cancelled-group-icon.tsx
+++ b/packages/propel/src/icons/state/cancelled-group-icon.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 
 import type { ISvgIcons } from "../type";
diff --git a/packages/propel/src/icons/state/completed-group-icon.tsx b/packages/propel/src/icons/state/completed-group-icon.tsx
index b6be3dfa0..1d97af67c 100644
--- a/packages/propel/src/icons/state/completed-group-icon.tsx
+++ b/packages/propel/src/icons/state/completed-group-icon.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 
 import type { ISvgIcons } from "../type";
diff --git a/packages/propel/src/icons/state/dashed-circle.tsx b/packages/propel/src/icons/state/dashed-circle.tsx
index 541053ea3..3cba92d6b 100644
--- a/packages/propel/src/icons/state/dashed-circle.tsx
+++ b/packages/propel/src/icons/state/dashed-circle.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 
 interface DashedCircleProps {
diff --git a/packages/propel/src/icons/state/helper.tsx b/packages/propel/src/icons/state/helper.tsx
index 2e73e7569..2ceb3c7fe 100644
--- a/packages/propel/src/icons/state/helper.tsx
+++ b/packages/propel/src/icons/state/helper.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { EIconSize } from "@plane/constants";
 import type { TIntakeStateGroups } from "@plane/types";
 
diff --git a/packages/propel/src/icons/state/index.ts b/packages/propel/src/icons/state/index.ts
index c050c1c32..a531eab14 100644
--- a/packages/propel/src/icons/state/index.ts
+++ b/packages/propel/src/icons/state/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./backlog-group-icon";
 export * from "./cancelled-group-icon";
 export * from "./completed-group-icon";
diff --git a/packages/propel/src/icons/state/intake-state-group-icon.tsx b/packages/propel/src/icons/state/intake-state-group-icon.tsx
index ece3a1aab..18e6d725b 100644
--- a/packages/propel/src/icons/state/intake-state-group-icon.tsx
+++ b/packages/propel/src/icons/state/intake-state-group-icon.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 
 import { EIconSize } from "@plane/constants";
diff --git a/packages/propel/src/icons/state/progress-circle.tsx b/packages/propel/src/icons/state/progress-circle.tsx
index d86de0b13..e0f9663d4 100644
--- a/packages/propel/src/icons/state/progress-circle.tsx
+++ b/packages/propel/src/icons/state/progress-circle.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 
 interface ProgressCircleProps {
diff --git a/packages/propel/src/icons/state/started-group-icon.tsx b/packages/propel/src/icons/state/started-group-icon.tsx
index 019a99118..cf8e6eafa 100644
--- a/packages/propel/src/icons/state/started-group-icon.tsx
+++ b/packages/propel/src/icons/state/started-group-icon.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 
 import type { ISvgIcons } from "../type";
diff --git a/packages/propel/src/icons/state/state-group-icon.tsx b/packages/propel/src/icons/state/state-group-icon.tsx
index e94fdc40f..e6f1a51cf 100644
--- a/packages/propel/src/icons/state/state-group-icon.tsx
+++ b/packages/propel/src/icons/state/state-group-icon.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 
 import { EIconSize } from "@plane/constants";
diff --git a/packages/propel/src/icons/state/triage-group-icon.tsx b/packages/propel/src/icons/state/triage-group-icon.tsx
index d4956ff5b..7ce4e78f9 100644
--- a/packages/propel/src/icons/state/triage-group-icon.tsx
+++ b/packages/propel/src/icons/state/triage-group-icon.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 
 import type { ISvgIcons } from "../type";
diff --git a/packages/propel/src/icons/state/unstarted-group-icon.tsx b/packages/propel/src/icons/state/unstarted-group-icon.tsx
index be136dccf..422969992 100644
--- a/packages/propel/src/icons/state/unstarted-group-icon.tsx
+++ b/packages/propel/src/icons/state/unstarted-group-icon.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 
 import type { ISvgIcons } from "../type";
diff --git a/packages/propel/src/icons/sticky-note-icon.tsx b/packages/propel/src/icons/sticky-note-icon.tsx
index 7323fe4c8..2d3456f66 100644
--- a/packages/propel/src/icons/sticky-note-icon.tsx
+++ b/packages/propel/src/icons/sticky-note-icon.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 
 import type { ISvgIcons } from "./type";
diff --git a/packages/propel/src/icons/sub-brand/index.ts b/packages/propel/src/icons/sub-brand/index.ts
index 7a0d0cefb..d7c76f910 100644
--- a/packages/propel/src/icons/sub-brand/index.ts
+++ b/packages/propel/src/icons/sub-brand/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./pi-chat";
 export * from "./plane-icon";
 export * from "./wiki-icon";
diff --git a/packages/propel/src/icons/sub-brand/pi-chat.tsx b/packages/propel/src/icons/sub-brand/pi-chat.tsx
index 9e2641d4f..9bf8a825b 100644
--- a/packages/propel/src/icons/sub-brand/pi-chat.tsx
+++ b/packages/propel/src/icons/sub-brand/pi-chat.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 
 import { IconWrapper } from "../icon-wrapper";
diff --git a/packages/propel/src/icons/sub-brand/plane-icon.tsx b/packages/propel/src/icons/sub-brand/plane-icon.tsx
index 978cc1e72..25acfebbf 100644
--- a/packages/propel/src/icons/sub-brand/plane-icon.tsx
+++ b/packages/propel/src/icons/sub-brand/plane-icon.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 
 import { IconWrapper } from "../icon-wrapper";
diff --git a/packages/propel/src/icons/sub-brand/wiki-icon.tsx b/packages/propel/src/icons/sub-brand/wiki-icon.tsx
index d062f448b..92e6fde98 100644
--- a/packages/propel/src/icons/sub-brand/wiki-icon.tsx
+++ b/packages/propel/src/icons/sub-brand/wiki-icon.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 
 import { IconWrapper } from "../icon-wrapper";
diff --git a/packages/propel/src/icons/suspended-user.tsx b/packages/propel/src/icons/suspended-user.tsx
index eaf09af31..6be2ce329 100644
--- a/packages/propel/src/icons/suspended-user.tsx
+++ b/packages/propel/src/icons/suspended-user.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 
 import type { ISvgIcons } from "./type";
diff --git a/packages/propel/src/icons/teams.tsx b/packages/propel/src/icons/teams.tsx
index 9475bd59b..cb09b169c 100644
--- a/packages/propel/src/icons/teams.tsx
+++ b/packages/propel/src/icons/teams.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 
 import type { ISvgIcons } from "./type";
diff --git a/packages/propel/src/icons/transfer-icon.tsx b/packages/propel/src/icons/transfer-icon.tsx
index badf2b098..c2e30cb4c 100644
--- a/packages/propel/src/icons/transfer-icon.tsx
+++ b/packages/propel/src/icons/transfer-icon.tsx
@@ -1,10 +1,22 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 
 import type { ISvgIcons } from "./type";
 
 export function TransferIcon({ className = "fill-current", ...rest }: ISvgIcons) {
   return (
-    <svg viewBox="0 0 24 20" className={`${className} `} fill="none" xmlns="http://www.w3.org/2000/svg" {...rest}>
+    <svg
+      viewBox="0 0 24 20"
+      className={`${className} `}
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+      {...rest}
+    >
       <path d="M6.16683 14.6667C4.54183 14.6667 3.16336 14.1007 2.03141 12.9688C0.899468 11.8368 0.333496 10.4583 0.333496 8.83333C0.333496 7.125 0.941135 5.73264 2.15641 4.65625C3.37169 3.57986 4.72933 3.09028 6.22933 3.1875L4.87516 1.83333C4.75016 1.70833 4.68766 1.55903 4.68766 1.38542C4.68766 1.21181 4.75016 1.0625 4.87516 0.9375C5.00016 0.8125 5.14947 0.75 5.32308 0.75C5.49669 0.75 5.646 0.8125 5.771 0.9375L8.22933 3.39583C8.29877 3.46528 8.34739 3.53472 8.37516 3.60417C8.40294 3.67361 8.41683 3.75 8.41683 3.83333C8.41683 3.91667 8.40294 3.99306 8.37516 4.0625C8.34739 4.13194 8.29877 4.20139 8.22933 4.27083L5.771 6.72917C5.646 6.85417 5.50016 6.91319 5.3335 6.90625C5.16683 6.89931 5.021 6.83333 4.896 6.70833C4.771 6.58333 4.7085 6.43403 4.7085 6.26042C4.7085 6.08681 4.771 5.9375 4.896 5.8125L6.29183 4.41667C4.97239 4.38889 3.8578 4.79167 2.94808 5.625C2.03836 6.45833 1.5835 7.52778 1.5835 8.83333C1.5835 10.0972 2.03141 11.1771 2.92725 12.0729C3.82308 12.9688 4.90294 13.4167 6.16683 13.4167H8.04183C8.22239 13.4167 8.37169 13.4757 8.48975 13.5938C8.6078 13.7118 8.66683 13.8611 8.66683 14.0417C8.66683 14.2222 8.6078 14.3715 8.48975 14.4896C8.37169 14.6076 8.22239 14.6667 8.04183 14.6667H6.16683ZM11.5835 14.6667C11.2363 14.6667 10.9411 14.5451 10.6981 14.3021C10.455 14.059 10.3335 13.7639 10.3335 13.4167V10.0833C10.3335 9.73611 10.455 9.44097 10.6981 9.19792C10.9411 8.95486 11.2363 8.83333 11.5835 8.83333H16.5835C16.9307 8.83333 17.2259 8.95486 17.4689 9.19792C17.712 9.44097 17.8335 9.73611 17.8335 10.0833V13.4167C17.8335 13.7639 17.712 14.059 17.4689 14.3021C17.2259 14.5451 16.9307 14.6667 16.5835 14.6667H11.5835ZM11.5835 13.4167H16.5835V10.0833H11.5835V13.4167ZM11.5835 7.16667C11.2363 7.16667 10.9411 7.04514 10.6981 6.80208C10.455 6.55903 10.3335 6.26389 10.3335 5.91667V2.58333C10.3335 2.23611 10.455 1.94097 10.6981 1.69792C10.9411 1.45486 11.2363 1.33333 11.5835 1.33333H16.5835C16.9307 1.33333 17.2259 1.45486 17.4689 1.69792C17.712 1.94097 17.8335 2.23611 17.8335 2.58333V5.91667C17.8335 6.26389 17.712 6.55903 17.4689 6.80208C17.2259 7.04514 16.9307 7.16667 16.5835 7.16667H11.5835Z" />
     </svg>
   );
diff --git a/packages/propel/src/icons/tree-map-icon.tsx b/packages/propel/src/icons/tree-map-icon.tsx
index 5356d958b..e389402f8 100644
--- a/packages/propel/src/icons/tree-map-icon.tsx
+++ b/packages/propel/src/icons/tree-map-icon.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 
 import type { ISvgIcons } from "./type";
diff --git a/packages/propel/src/icons/type.ts b/packages/propel/src/icons/type.ts
index 09e605629..e5bdc1005 100644
--- a/packages/propel/src/icons/type.ts
+++ b/packages/propel/src/icons/type.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export interface ISvgIcons extends React.SVGAttributes<SVGElement> {
   className?: string | undefined;
   percentage?: number;
diff --git a/packages/propel/src/icons/updates-icon.tsx b/packages/propel/src/icons/updates-icon.tsx
index bdcb52d26..a81d7cdd2 100644
--- a/packages/propel/src/icons/updates-icon.tsx
+++ b/packages/propel/src/icons/updates-icon.tsx
@@ -1,4 +1,8 @@
-import * as React from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
 
 import type { ISvgIcons } from "./type";
 
@@ -16,11 +20,11 @@ export function UpdatesIcon({ className = "text-current" }: ISvgIcons) {
         fillRule="evenodd"
         clipRule="evenodd"
         d="M6.54325 5.056C8.46325 2.58867 11.4633 1 14.8333 1C14.9659 1 15.093 1.05268 15.1868 1.14645C15.2806 1.24021 15.3333 1.36739 15.3333 1.5C15.3333 4.87067 13.7446 7.87 11.2773 9.79067C11.3799 10.4335 11.3418 11.0909 11.1656 11.7176C10.9895 12.3443 10.6795 12.9253 10.257 13.4205C9.83454 13.9158 9.30964 14.3135 8.71854 14.5862C8.12744 14.8588 7.48422 15 6.83325 15C6.70064 15 6.57347 14.9473 6.4797 14.8536C6.38593 14.7598 6.33325 14.6326 6.33325 14.5V11.746C5.6852 11.2342 5.09942 10.6482 4.58792 10H1.83325C1.70064 10 1.57347 9.94732 1.4797 9.85355C1.38593 9.75979 1.33325 9.63261 1.33325 9.5C1.3332 8.84897 1.47441 8.20568 1.74713 7.61453C2.01986 7.02337 2.41761 6.49843 2.91293 6.07594C3.40824 5.65345 3.98934 5.34346 4.6161 5.16737C5.24287 4.99128 5.90038 4.95328 6.54325 5.056ZM10.3333 4.5C9.93543 4.5 9.5539 4.65804 9.27259 4.93934C8.99129 5.22064 8.83325 5.60218 8.83325 6C8.83325 6.39782 8.99129 6.77936 9.27259 7.06066C9.5539 7.34196 9.93543 7.5 10.3333 7.5C10.7311 7.5 11.1126 7.34196 11.3939 7.06066C11.6752 6.77936 11.8333 6.39782 11.8333 6C11.8333 5.60218 11.6752 5.22064 11.3939 4.93934C11.1126 4.65804 10.7311 4.5 10.3333 4.5Z"
-        fill="#8591AD"
+        fill="currentColor"
       />
       <path
         d="M3.83994 11.4947C3.8926 11.4554 3.93701 11.4062 3.97064 11.3497C4.00426 11.2933 4.02645 11.2308 4.03592 11.1658C4.04539 11.1008 4.04197 11.0346 4.02584 10.9709C4.00972 10.9072 3.98121 10.8473 3.94194 10.7947C3.90268 10.742 3.85342 10.6976 3.797 10.664C3.74057 10.6304 3.67807 10.6082 3.61307 10.5987C3.54807 10.5892 3.48184 10.5927 3.41816 10.6088C3.35448 10.6249 3.2946 10.6534 3.24194 10.6927C2.73054 11.0731 2.33288 11.5861 2.092 12.1762C1.85111 12.7663 1.77617 13.4111 1.87528 14.0407C1.89139 14.1455 1.94045 14.2426 2.01536 14.3177C2.09026 14.3929 2.18713 14.4422 2.29194 14.4587C2.92163 14.5577 3.56641 14.4827 4.15652 14.2417C4.74664 14.0007 5.25961 13.6029 5.63994 13.0913C5.68047 13.0388 5.71015 12.9788 5.72723 12.9147C5.74432 12.8506 5.74848 12.7837 5.73948 12.718C5.73047 12.6522 5.70847 12.589 5.67476 12.5318C5.64105 12.4747 5.59631 12.4248 5.54315 12.3852C5.48998 12.3455 5.42945 12.3168 5.36508 12.3007C5.30071 12.2847 5.23379 12.2816 5.16821 12.2917C5.10264 12.3017 5.03973 12.3248 4.98314 12.3594C4.92655 12.394 4.87742 12.4395 4.83861 12.4933C4.60612 12.806 4.30366 13.0599 3.95544 13.2347C3.60722 13.4095 3.22291 13.5004 2.83328 13.5C2.83328 12.68 3.22794 11.9513 3.83994 11.4947Z"
-        fill="#8591AD"
+        fill="currentColor"
       />
     </svg>
   );
diff --git a/packages/propel/src/icons/user-activity-icon.tsx b/packages/propel/src/icons/user-activity-icon.tsx
index 367920155..cf7da470b 100644
--- a/packages/propel/src/icons/user-activity-icon.tsx
+++ b/packages/propel/src/icons/user-activity-icon.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 
 import type { ISvgIcons } from "./type";
diff --git a/packages/propel/src/icons/workspace-icon.tsx b/packages/propel/src/icons/workspace-icon.tsx
index 770133ddc..ae6ded007 100644
--- a/packages/propel/src/icons/workspace-icon.tsx
+++ b/packages/propel/src/icons/workspace-icon.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 
 import type { ISvgIcons } from "./type";
diff --git a/packages/propel/src/icons/workspace/analytics-icon.tsx b/packages/propel/src/icons/workspace/analytics-icon.tsx
index cc8bd16d6..c2c097557 100644
--- a/packages/propel/src/icons/workspace/analytics-icon.tsx
+++ b/packages/propel/src/icons/workspace/analytics-icon.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 
 import { IconWrapper } from "../icon-wrapper";
diff --git a/packages/propel/src/icons/workspace/archive-icon.tsx b/packages/propel/src/icons/workspace/archive-icon.tsx
index b4dd0d0bb..0aa49bf79 100644
--- a/packages/propel/src/icons/workspace/archive-icon.tsx
+++ b/packages/propel/src/icons/workspace/archive-icon.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 
 import { IconWrapper } from "../icon-wrapper";
diff --git a/packages/propel/src/icons/workspace/dashboard-icon.tsx b/packages/propel/src/icons/workspace/dashboard-icon.tsx
index 2d3785afd..b8e8ae452 100644
--- a/packages/propel/src/icons/workspace/dashboard-icon.tsx
+++ b/packages/propel/src/icons/workspace/dashboard-icon.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 
 import { IconWrapper } from "../icon-wrapper";
diff --git a/packages/propel/src/icons/workspace/draft-icon.tsx b/packages/propel/src/icons/workspace/draft-icon.tsx
index 8ec7f498f..85a63c30f 100644
--- a/packages/propel/src/icons/workspace/draft-icon.tsx
+++ b/packages/propel/src/icons/workspace/draft-icon.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 
 import { IconWrapper } from "../icon-wrapper";
diff --git a/packages/propel/src/icons/workspace/home-icon.tsx b/packages/propel/src/icons/workspace/home-icon.tsx
index ba3034fb5..30f53eaf8 100644
--- a/packages/propel/src/icons/workspace/home-icon.tsx
+++ b/packages/propel/src/icons/workspace/home-icon.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 
 import { IconWrapper } from "../icon-wrapper";
diff --git a/packages/propel/src/icons/workspace/inbox-icon.tsx b/packages/propel/src/icons/workspace/inbox-icon.tsx
index 243c61012..66814a85f 100644
--- a/packages/propel/src/icons/workspace/inbox-icon.tsx
+++ b/packages/propel/src/icons/workspace/inbox-icon.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 
 import { IconWrapper } from "../icon-wrapper";
diff --git a/packages/propel/src/icons/workspace/index.ts b/packages/propel/src/icons/workspace/index.ts
index 99ef75d7f..ddcbd68f8 100644
--- a/packages/propel/src/icons/workspace/index.ts
+++ b/packages/propel/src/icons/workspace/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./analytics-icon";
 export * from "./archive-icon";
 export * from "./dashboard-icon";
diff --git a/packages/propel/src/icons/workspace/multiple-sticky-icon.tsx b/packages/propel/src/icons/workspace/multiple-sticky-icon.tsx
index fd1e58dc4..7c56fe1c6 100644
--- a/packages/propel/src/icons/workspace/multiple-sticky-icon.tsx
+++ b/packages/propel/src/icons/workspace/multiple-sticky-icon.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 
 import { IconWrapper } from "../icon-wrapper";
diff --git a/packages/propel/src/icons/workspace/project-icon.tsx b/packages/propel/src/icons/workspace/project-icon.tsx
index 99fe2bb5c..655556eb6 100644
--- a/packages/propel/src/icons/workspace/project-icon.tsx
+++ b/packages/propel/src/icons/workspace/project-icon.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 
 import { IconWrapper } from "../icon-wrapper";
diff --git a/packages/propel/src/icons/workspace/your-work-icon.tsx b/packages/propel/src/icons/workspace/your-work-icon.tsx
index edd5885f2..c993bf971 100644
--- a/packages/propel/src/icons/workspace/your-work-icon.tsx
+++ b/packages/propel/src/icons/workspace/your-work-icon.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 
 import { IconWrapper } from "../icon-wrapper";
diff --git a/packages/propel/src/input/index.ts b/packages/propel/src/input/index.ts
index 4ce4a8893..485961666 100644
--- a/packages/propel/src/input/index.ts
+++ b/packages/propel/src/input/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./input";
diff --git a/packages/propel/src/input/input.stories.tsx b/packages/propel/src/input/input.stories.tsx
index 76648eaf8..343f0033e 100644
--- a/packages/propel/src/input/input.stories.tsx
+++ b/packages/propel/src/input/input.stories.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { Input } from "./index";
 
@@ -46,13 +52,13 @@ const createShowcaseStory = (
   sections: Array<{ label: string; props: Partial<React.ComponentProps<typeof Input>> }>
 ): Story => ({
   render: () => (
-    <div className="space-y-4 w-[400px]">
+    <div className="w-[400px] space-y-4">
       <div className="space-y-2">
-        <h3 className="text-sm font-medium">{title}</h3>
+        <h3 className="text-13 font-medium">{title}</h3>
         <div className="space-y-2">
           {sections.map(({ label, props }, index) => (
             <div key={index} className="w-full">
-              <label className="text-xs text-gray-500">{label}</label>
+              <label className="text-gray-500 text-11">{label}</label>
               <Input className="w-full" {...props} />
             </div>
           ))}
diff --git a/packages/propel/src/input/input.tsx b/packages/propel/src/input/input.tsx
index 5d3b6a544..e6b8c094d 100644
--- a/packages/propel/src/input/input.tsx
+++ b/packages/propel/src/input/input.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 import { Input as BaseInput } from "@base-ui-components/react/input";
 // helpers
@@ -29,13 +35,13 @@ const Input = React.forwardRef(function Input(props: InputProps, ref: React.Forw
       type={type}
       name={name}
       className={cn(
-        "block rounded-md bg-transparent text-sm placeholder-custom-text-400 focus:outline-none",
+        "placeholder-tertiary block rounded-md border-subtle-1 bg-layer-2 text-13 focus:outline-none",
         {
-          "rounded-md border-[0.5px] border-custom-border-200": mode === "primary",
-          "rounded border-none bg-transparent ring-0 transition-all focus:ring-1 focus:ring-custom-primary":
+          "rounded-md border-[0.5px]": mode === "primary",
+          "rounded-sm border-none bg-transparent ring-0 transition-all focus:ring-1 focus:ring-accent-strong":
             mode === "transparent",
-          "rounded border-none bg-transparent ring-0": mode === "true-transparent",
-          "border-red-500": hasError,
+          "rounded-sm border-none bg-transparent ring-0": mode === "true-transparent",
+          "border-danger-strong": hasError,
           "px-1.5 py-1": inputSize === "xs",
           "px-3 py-2": inputSize === "sm",
           "p-3": inputSize === "md",
diff --git a/packages/propel/src/menu/index.ts b/packages/propel/src/menu/index.ts
index 660d3ef02..9b2b1a9f0 100644
--- a/packages/propel/src/menu/index.ts
+++ b/packages/propel/src/menu/index.ts
@@ -1,2 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./menu";
 export * from "./types";
diff --git a/packages/propel/src/menu/menu.stories.tsx b/packages/propel/src/menu/menu.stories.tsx
index 9af39a0c5..1bd39d03b 100644
--- a/packages/propel/src/menu/menu.stories.tsx
+++ b/packages/propel/src/menu/menu.stories.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { Settings, User, LogOut, Mail, Bell, HelpCircle } from "lucide-react";
 import { Menu } from "./menu";
@@ -142,7 +148,7 @@ export const CustomButton: Story = {
     return (
       <Menu
         customButton={
-          <button className="rounded bg-blue-500 px-4 py-2 text-white hover:bg-blue-600">Custom Button</button>
+          <button className="bg-blue-500 hover:bg-blue-600 rounded-sm px-4 py-2 text-on-color">Custom Button</button>
         }
       >
         <Menu.MenuItem onClick={() => alert("Option 1")}>Option 1</Menu.MenuItem>
@@ -161,7 +167,7 @@ export const WithSubmenu: Story = {
         <Menu.MenuItem onClick={() => alert("Open")}>Open</Menu.MenuItem>
         <Menu.SubMenu
           trigger="Export"
-          className="min-w-[12rem] rounded-md border-[0.5px] border-custom-border-300 bg-custom-background-100 px-2 py-2.5 text-xs shadow-custom-shadow-rg"
+          className="min-w-[12rem] rounded-md border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 text-11 shadow-raised-200"
         >
           <Menu.MenuItem onClick={() => alert("Export as PDF")}>Export as PDF</Menu.MenuItem>
           <Menu.MenuItem onClick={() => alert("Export as CSV")}>Export as CSV</Menu.MenuItem>
@@ -209,7 +215,7 @@ export const ComplexMenu: Story = {
           <div className="flex items-center gap-2">
             <Bell className="h-4 w-4" />
             <span>Notifications</span>
-            <span className="ml-auto rounded bg-red-500 px-2 py-0.5 text-xs text-white">3</span>
+            <span className="bg-red-500 ml-auto rounded-sm px-2 py-0.5 text-11 text-on-color">3</span>
           </div>
         </Menu.MenuItem>
         <Menu.MenuItem onClick={() => alert("Help")}>
@@ -220,15 +226,15 @@ export const ComplexMenu: Story = {
         </Menu.MenuItem>
         <Menu.SubMenu
           trigger="Settings"
-          className="min-w-[12rem] rounded-md border-[0.5px] border-custom-border-300 bg-custom-background-100 px-2 py-2.5 text-xs shadow-custom-shadow-rg"
+          className="min-w-[12rem] rounded-md border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 text-11 shadow-raised-200"
         >
           <Menu.MenuItem onClick={() => alert("General Settings")}>General</Menu.MenuItem>
           <Menu.MenuItem onClick={() => alert("Privacy Settings")}>Privacy</Menu.MenuItem>
           <Menu.MenuItem onClick={() => alert("Security Settings")}>Security</Menu.MenuItem>
         </Menu.SubMenu>
-        <div className="my-1 border-t border-gray-200" />
+        <div className="border-gray-200 my-1 border-t" />
         <Menu.MenuItem onClick={() => alert("Logout")}>
-          <div className="flex items-center gap-2 text-red-500">
+          <div className="flex items-center gap-2 text-danger-primary">
             <LogOut className="h-4 w-4" />
             <span>Logout</span>
           </div>
@@ -243,7 +249,7 @@ export const CustomStyles: Story = {
     return (
       <Menu
         label="Styled Menu"
-        buttonClassName="bg-purple-500 text-white hover:bg-purple-600"
+        buttonClassName="bg-purple-500 text-on-color hover:bg-purple-600"
         optionsClassName="bg-purple-50 border-purple-300"
       >
         <Menu.MenuItem onClick={() => alert("Item 1")} className="hover:bg-purple-200">
diff --git a/packages/propel/src/menu/menu.tsx b/packages/propel/src/menu/menu.tsx
index 72081e838..edf43acf6 100644
--- a/packages/propel/src/menu/menu.tsx
+++ b/packages/propel/src/menu/menu.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 import { Menu as BaseMenu } from "@base-ui-components/react/menu";
 import { MoreHorizontal } from "lucide-react";
@@ -44,9 +50,9 @@ function MenuItem(props: TMenuItemProps) {
     <BaseMenu.Item
       disabled={disabled}
       className={cn(
-        "w-full select-none truncate rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-custom-background-80 cursor-pointer outline-none",
+        "w-full cursor-pointer truncate rounded-sm px-1 py-1.5 text-left text-secondary outline-none select-none hover:bg-layer-1",
         {
-          "text-custom-text-400": disabled,
+          "text-placeholder": disabled,
         },
         className
       )}
@@ -142,8 +148,8 @@ function Menu(props: TMenuProps) {
               type="button"
               onClick={handleMenuButtonClick}
               disabled={disabled}
-              className={`relative grid place-items-center rounded p-1 text-custom-text-200 outline-none hover:text-custom-text-100 ${
-                disabled ? "cursor-not-allowed" : "cursor-pointer hover:bg-custom-background-80"
+              className={`relative grid place-items-center rounded-sm p-1 text-secondary outline-none hover:text-primary ${
+                disabled ? "cursor-not-allowed" : "cursor-pointer hover:bg-layer-1"
               } ${buttonClassName}`}
               tabIndex={customButtonTabIndex}
               aria-label={ariaLabel}
@@ -153,10 +159,10 @@ function Menu(props: TMenuProps) {
           ) : (
             <BaseMenu.Trigger
               type="button"
-              className={`flex items-center justify-between gap-1 whitespace-nowrap rounded-md px-2.5 py-1 text-xs duration-300 outline-none ${
-                isOpen ? "bg-custom-background-90 text-custom-text-100" : "text-custom-text-200"
-              } ${noBorder ? "" : "border border-custom-border-300 shadow-sm focus:outline-none"} ${
-                disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80"
+              className={`flex items-center justify-between gap-1 rounded-md px-2.5 py-1 text-11 whitespace-nowrap duration-300 outline-none ${
+                isOpen ? "bg-surface-2 text-primary" : "text-secondary"
+              } ${noBorder ? "" : "shadow-sm border border-strong focus:outline-none"} ${
+                disabled ? "cursor-not-allowed text-secondary" : "cursor-pointer hover:bg-layer-1"
               } ${buttonClassName}`}
               onClick={handleMenuButtonClick}
               tabIndex={customButtonTabIndex}
@@ -180,7 +186,7 @@ function Menu(props: TMenuProps) {
           <BaseMenu.Popup
             tabIndex={tabIndex}
             className={cn(
-              "my-1 overflow-y-scroll rounded-md border-[0.5px] border-custom-border-300 bg-custom-background-100 px-2 py-2.5 text-xs shadow-custom-shadow-rg focus:outline-none min-w-[12rem] whitespace-nowrap",
+              "my-1 min-w-[12rem] overflow-y-scroll rounded-md border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 text-11 whitespace-nowrap shadow-raised-200 focus:outline-none",
               {
                 "max-h-60": maxHeight === "lg",
                 "max-h-48": maxHeight === "md",
diff --git a/packages/propel/src/menu/types.ts b/packages/propel/src/menu/types.ts
index 1e8a46d6c..ef8093bb4 100644
--- a/packages/propel/src/menu/types.ts
+++ b/packages/propel/src/menu/types.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export type TPlacement = "top" | "bottom" | "left" | "right";
 
 export type TMenuProps = {
diff --git a/packages/propel/src/pill/index.ts b/packages/propel/src/pill/index.ts
index 523ccb2b0..a8b491d60 100644
--- a/packages/propel/src/pill/index.ts
+++ b/packages/propel/src/pill/index.ts
@@ -1,2 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export { Pill, EPillVariant, EPillSize } from "./pill";
 export type { PillProps } from "./pill";
diff --git a/packages/propel/src/pill/pill.stories.tsx b/packages/propel/src/pill/pill.stories.tsx
index 00fc405f3..36ca66112 100644
--- a/packages/propel/src/pill/pill.stories.tsx
+++ b/packages/propel/src/pill/pill.stories.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { Pill, EPillVariant, EPillSize } from "./pill";
 
@@ -125,7 +131,7 @@ export const StatusExamples: Story = {
     return (
       <div className="space-y-4">
         <div className="space-y-2">
-          <h3 className="text-sm font-medium">Task Status</h3>
+          <h3 className="text-13 font-medium">Task Status</h3>
           <div className="flex flex-wrap gap-2">
             <Pill variant={EPillVariant.DEFAULT}>Draft</Pill>
             <Pill variant={EPillVariant.WARNING}>In Progress</Pill>
diff --git a/packages/propel/src/pill/pill.tsx b/packages/propel/src/pill/pill.tsx
index 7a0841cc7..52275cdb1 100644
--- a/packages/propel/src/pill/pill.tsx
+++ b/packages/propel/src/pill/pill.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 import { cn } from "../utils";
 
@@ -17,6 +23,13 @@ export enum EPillSize {
   XS = "xs",
 }
 
+export enum ERadius {
+  SQUARE = "square",
+  CIRCLE = "circle",
+}
+
+export type TRadius = ERadius.SQUARE | ERadius.CIRCLE;
+
 export type TPillVariant =
   | EPillVariant.DEFAULT
   | EPillVariant.PRIMARY
@@ -31,26 +44,39 @@ export interface PillProps extends React.HTMLAttributes<HTMLSpanElement> {
   size?: TPillSize;
   className?: string;
   children: React.ReactNode;
+  radius?: TRadius;
 }
 
 const pillVariants = {
-  [EPillVariant.DEFAULT]: "bg-custom-background-90 text-custom-text-200 border border-custom-border-200",
-  [EPillVariant.PRIMARY]: "bg-custom-primary-100/10 text-custom-primary-100 border border-custom-primary-100/20",
-  [EPillVariant.SUCCESS]: "bg-green-50 text-green-700 border border-green-200",
+  [EPillVariant.DEFAULT]: "bg-surface-2 text-secondary border border-subtle-1",
+  [EPillVariant.PRIMARY]: "bg-accent-primary/10 text-accent-primary border border-accent-strong/20",
+  [EPillVariant.SUCCESS]: "bg-green-50 text-success-primary border border-success-subtle",
   [EPillVariant.WARNING]: "bg-amber-50 text-amber-700 border border-amber-200",
-  [EPillVariant.ERROR]: "bg-red-50 text-red-700 border border-red-200",
+  [EPillVariant.ERROR]: "bg-red-50 text-danger-primary border border-danger-subtle",
   [EPillVariant.INFO]: "bg-blue-50 text-blue-700 border border-blue-200",
 };
 
 const pillSizes = {
-  [EPillSize.XS]: "px-1.5 py-0.5 text-xs",
-  [EPillSize.SM]: "px-2 py-0.5 text-xs",
-  [EPillSize.MD]: "px-2.5 py-1 text-sm",
-  [EPillSize.LG]: "px-3 py-1.5 text-base",
+  [EPillSize.XS]: "px-1.5 py-0.5 text-11",
+  [EPillSize.SM]: "px-2 py-0.5 text-11",
+  [EPillSize.MD]: "px-2.5 py-1 text-13",
+  [EPillSize.LG]: "px-3 py-1.5 text-14",
+};
+
+const pillRadius = {
+  [ERadius.SQUARE]: "rounded",
+  [ERadius.CIRCLE]: "rounded-full",
 };
 
 const Pill = React.forwardRef(function Pill(
-  { variant = EPillVariant.DEFAULT, size = EPillSize.MD, className, children, ...props }: PillProps,
+  {
+    variant = EPillVariant.DEFAULT,
+    size = EPillSize.MD,
+    radius = ERadius.CIRCLE,
+    className,
+    children,
+    ...props
+  }: PillProps,
   ref: React.ForwardedRef<HTMLSpanElement>
 ) {
   return (
@@ -63,6 +89,8 @@ const Pill = React.forwardRef(function Pill(
         pillVariants[variant],
         // Size styles
         pillSizes[size],
+        // Radius styles
+        pillRadius[radius],
         className
       )}
       {...props}
diff --git a/packages/propel/src/popover/index.ts b/packages/propel/src/popover/index.ts
index 1efe34c51..d98033459 100644
--- a/packages/propel/src/popover/index.ts
+++ b/packages/propel/src/popover/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./root";
diff --git a/packages/propel/src/popover/popover.stories.tsx b/packages/propel/src/popover/popover.stories.tsx
index 2a0d60c0a..c5f37f794 100644
--- a/packages/propel/src/popover/popover.stories.tsx
+++ b/packages/propel/src/popover/popover.stories.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useState } from "react";
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { useArgs } from "storybook/preview-api";
@@ -27,12 +33,12 @@ const meta: Meta<typeof Popover> = {
 
     return (
       <Popover {...args} open={open} onOpenChange={setOpen}>
-        <Popover.Button className="rounded bg-blue-500 px-4 py-2 text-white hover:bg-blue-600">
+        <Popover.Button className="bg-blue-500 hover:bg-blue-600 rounded-sm px-4 py-2 text-on-color">
           Open Popover
         </Popover.Button>
-        <Popover.Panel className="w-64 rounded-lg border border-gray-200 bg-white p-4 shadow-lg">
-          <h3 className="text-sm font-semibold">Popover Title</h3>
-          <p className="mt-2 text-sm text-gray-600">This is the popover content. You can put any content here.</p>
+        <Popover.Panel className="border-gray-200 shadow-lg w-64 rounded-lg border bg-white p-4">
+          <h3 className="text-13 font-semibold">Popover Title</h3>
+          <p className="text-gray-600 mt-2 text-13">This is the popover content. You can put any content here.</p>
         </Popover.Panel>
       </Popover>
     );
@@ -55,25 +61,25 @@ export const Controlled: Story = {
     return (
       <div className="space-y-4">
         <div className="flex gap-2">
-          <button onClick={() => setOpen(true)} className="rounded bg-blue-500 px-3 py-1.5 text-sm text-white">
+          <button onClick={() => setOpen(true)} className="bg-blue-500 rounded-sm px-3 py-1.5 text-13 text-on-color">
             Open
           </button>
-          <button onClick={() => setOpen(false)} className="rounded bg-gray-500 px-3 py-1.5 text-sm text-white">
+          <button onClick={() => setOpen(false)} className="bg-gray-500 rounded-sm px-3 py-1.5 text-13 text-on-color">
             Close
           </button>
         </div>
         <Popover open={open} onOpenChange={setOpen}>
-          <Popover.Button className="rounded bg-blue-500 px-4 py-2 text-white hover:bg-blue-600">
+          <Popover.Button className="bg-blue-500 hover:bg-blue-600 rounded-sm px-4 py-2 text-on-color">
             Controlled Popover
           </Popover.Button>
-          <Popover.Panel className="w-64 rounded-lg border border-gray-200 bg-white p-4 shadow-lg">
+          <Popover.Panel className="border-gray-200 shadow-lg w-64 rounded-lg border bg-white p-4">
             <div className="flex items-start justify-between">
-              <h3 className="text-sm font-semibold">Controlled State</h3>
-              <button onClick={() => setOpen(false)} className="rounded-full p-1 hover:bg-gray-100">
+              <h3 className="text-13 font-semibold">Controlled State</h3>
+              <button onClick={() => setOpen(false)} className="hover:bg-gray-100 rounded-full p-1">
                 <CloseIcon className="h-4 w-4" />
               </button>
             </div>
-            <p className="mt-2 text-sm text-gray-600">Current state: {open ? "Open" : "Closed"}</p>
+            <p className="text-gray-600 mt-2 text-13">Current state: {open ? "Open" : "Closed"}</p>
           </Popover.Panel>
         </Popover>
       </div>
@@ -86,12 +92,12 @@ export const SideTop: Story = {
     const [open, setOpen] = useState(args.open);
     return (
       <Popover {...args} open={open} onOpenChange={setOpen}>
-        <Popover.Button className="rounded bg-blue-500 px-4 py-2 text-white hover:bg-blue-600">
+        <Popover.Button className="bg-blue-500 hover:bg-blue-600 rounded-sm px-4 py-2 text-on-color">
           Open Above
         </Popover.Button>
-        <Popover.Panel side="top" className="w-64 rounded-lg border border-gray-200 bg-white p-4 shadow-lg">
-          <h3 className="text-sm font-semibold">Top Positioned</h3>
-          <p className="mt-2 text-sm text-gray-600">This popover appears above the button.</p>
+        <Popover.Panel side="top" className="border-gray-200 shadow-lg w-64 rounded-lg border bg-white p-4">
+          <h3 className="text-13 font-semibold">Top Positioned</h3>
+          <p className="text-gray-600 mt-2 text-13">This popover appears above the button.</p>
         </Popover.Panel>
       </Popover>
     );
@@ -103,12 +109,12 @@ export const SideBottom: Story = {
     const [open, setOpen] = useState(args.open);
     return (
       <Popover {...args} open={open} onOpenChange={setOpen}>
-        <Popover.Button className="rounded bg-blue-500 px-4 py-2 text-white hover:bg-blue-600">
+        <Popover.Button className="bg-blue-500 hover:bg-blue-600 rounded-sm px-4 py-2 text-on-color">
           Open Below
         </Popover.Button>
-        <Popover.Panel side="bottom" className="w-64 rounded-lg border border-gray-200 bg-white p-4 shadow-lg">
-          <h3 className="text-sm font-semibold">Bottom Positioned</h3>
-          <p className="mt-2 text-sm text-gray-600">This popover appears below the button.</p>
+        <Popover.Panel side="bottom" className="border-gray-200 shadow-lg w-64 rounded-lg border bg-white p-4">
+          <h3 className="text-13 font-semibold">Bottom Positioned</h3>
+          <p className="text-gray-600 mt-2 text-13">This popover appears below the button.</p>
         </Popover.Panel>
       </Popover>
     );
@@ -120,12 +126,12 @@ export const SideLeft: Story = {
     const [open, setOpen] = useState(args.open);
     return (
       <Popover {...args} open={open} onOpenChange={setOpen}>
-        <Popover.Button className="rounded bg-blue-500 px-4 py-2 text-white hover:bg-blue-600">
+        <Popover.Button className="bg-blue-500 hover:bg-blue-600 rounded-sm px-4 py-2 text-on-color">
           Open Left
         </Popover.Button>
-        <Popover.Panel side="left" className="w-64 rounded-lg border border-gray-200 bg-white p-4 shadow-lg">
-          <h3 className="text-sm font-semibold">Left Positioned</h3>
-          <p className="mt-2 text-sm text-gray-600">This popover appears to the left of the button.</p>
+        <Popover.Panel side="left" className="border-gray-200 shadow-lg w-64 rounded-lg border bg-white p-4">
+          <h3 className="text-13 font-semibold">Left Positioned</h3>
+          <p className="text-gray-600 mt-2 text-13">This popover appears to the left of the button.</p>
         </Popover.Panel>
       </Popover>
     );
@@ -137,12 +143,12 @@ export const SideRight: Story = {
     const [open, setOpen] = useState(args.open);
     return (
       <Popover {...args} open={open} onOpenChange={setOpen}>
-        <Popover.Button className="rounded bg-blue-500 px-4 py-2 text-white hover:bg-blue-600">
+        <Popover.Button className="bg-blue-500 hover:bg-blue-600 rounded-sm px-4 py-2 text-on-color">
           Open Right
         </Popover.Button>
-        <Popover.Panel side="right" className="w-64 rounded-lg border border-gray-200 bg-white p-4 shadow-lg">
-          <h3 className="text-sm font-semibold">Right Positioned</h3>
-          <p className="mt-2 text-sm text-gray-600">This popover appears to the right of the button.</p>
+        <Popover.Panel side="right" className="border-gray-200 shadow-lg w-64 rounded-lg border bg-white p-4">
+          <h3 className="text-13 font-semibold">Right Positioned</h3>
+          <p className="text-gray-600 mt-2 text-13">This popover appears to the right of the button.</p>
         </Popover.Panel>
       </Popover>
     );
@@ -154,12 +160,12 @@ export const AlignStart: Story = {
     const [open, setOpen] = useState(args.open);
     return (
       <Popover {...args} open={open} onOpenChange={setOpen}>
-        <Popover.Button className="rounded bg-blue-500 px-4 py-2 text-white hover:bg-blue-600">
+        <Popover.Button className="bg-blue-500 hover:bg-blue-600 rounded-sm px-4 py-2 text-on-color">
           Align Start
         </Popover.Button>
-        <Popover.Panel align="start" className="w-64 rounded-lg border border-gray-200 bg-white p-4 shadow-lg">
-          <h3 className="text-sm font-semibold">Start Aligned</h3>
-          <p className="mt-2 text-sm text-gray-600">This popover is aligned to the start.</p>
+        <Popover.Panel align="start" className="border-gray-200 shadow-lg w-64 rounded-lg border bg-white p-4">
+          <h3 className="text-13 font-semibold">Start Aligned</h3>
+          <p className="text-gray-600 mt-2 text-13">This popover is aligned to the start.</p>
         </Popover.Panel>
       </Popover>
     );
@@ -171,12 +177,12 @@ export const AlignEnd: Story = {
     const [open, setOpen] = useState(args.open);
     return (
       <Popover {...args} open={open} onOpenChange={setOpen}>
-        <Popover.Button className="rounded bg-blue-500 px-4 py-2 text-white hover:bg-blue-600">
+        <Popover.Button className="bg-blue-500 hover:bg-blue-600 rounded-sm px-4 py-2 text-on-color">
           Align End
         </Popover.Button>
-        <Popover.Panel align="end" className="w-64 rounded-lg border border-gray-200 bg-white p-4 shadow-lg">
-          <h3 className="text-sm font-semibold">End Aligned</h3>
-          <p className="mt-2 text-sm text-gray-600">This popover is aligned to the end.</p>
+        <Popover.Panel align="end" className="border-gray-200 shadow-lg w-64 rounded-lg border bg-white p-4">
+          <h3 className="text-13 font-semibold">End Aligned</h3>
+          <p className="text-gray-600 mt-2 text-13">This popover is aligned to the end.</p>
         </Popover.Panel>
       </Popover>
     );
@@ -188,12 +194,12 @@ export const CustomOffset: Story = {
     const [open, setOpen] = useState(args.open);
     return (
       <Popover {...args} open={open} onOpenChange={setOpen}>
-        <Popover.Button className="rounded bg-blue-500 px-4 py-2 text-white hover:bg-blue-600">
+        <Popover.Button className="bg-blue-500 hover:bg-blue-600 rounded-sm px-4 py-2 text-on-color">
           Custom Offset
         </Popover.Button>
-        <Popover.Panel sideOffset={20} className="w-64 rounded-lg border border-gray-200 bg-white p-4 shadow-lg">
-          <h3 className="text-sm font-semibold">Custom Side Offset</h3>
-          <p className="mt-2 text-sm text-gray-600">This popover has a custom side offset of 20px.</p>
+        <Popover.Panel sideOffset={20} className="border-gray-200 shadow-lg w-64 rounded-lg border bg-white p-4">
+          <h3 className="text-13 font-semibold">Custom Side Offset</h3>
+          <p className="text-gray-600 mt-2 text-13">This popover has a custom side offset of 20px.</p>
         </Popover.Panel>
       </Popover>
     );
@@ -210,31 +216,31 @@ export const WithForm: Story = {
     };
     return (
       <Popover {...args} open={open} onOpenChange={setOpen}>
-        <Popover.Button className="rounded bg-blue-500 px-4 py-2 text-white hover:bg-blue-600">
+        <Popover.Button className="bg-blue-500 hover:bg-blue-600 rounded-sm px-4 py-2 text-on-color">
           Open Form
         </Popover.Button>
-        <Popover.Panel className="w-72 rounded-lg border border-gray-200 bg-white p-4 shadow-lg">
-          <h3 className="text-sm font-semibold">Quick Form</h3>
+        <Popover.Panel className="border-gray-200 shadow-lg w-72 rounded-lg border bg-white p-4">
+          <h3 className="text-13 font-semibold">Quick Form</h3>
           <form onSubmit={handleSubmit} className="mt-3 space-y-3">
             <div>
-              <label htmlFor="name" className="block text-xs font-medium text-gray-700">
+              <label htmlFor="name" className="text-gray-700 block text-11 font-medium">
                 Name
               </label>
               <input
                 type="text"
                 id="name"
-                className="mt-1 w-full rounded border border-gray-300 px-2 py-1.5 text-sm"
+                className="border-gray-300 mt-1 w-full rounded-sm border px-2 py-1.5 text-13"
                 placeholder="Enter name"
               />
             </div>
             <div>
-              <label htmlFor="email" className="block text-xs font-medium text-gray-700">
+              <label htmlFor="email" className="text-gray-700 block text-11 font-medium">
                 Email
               </label>
               <input
                 type="email"
                 id="email"
-                className="mt-1 w-full rounded border border-gray-300 px-2 py-1.5 text-sm"
+                className="border-gray-300 mt-1 w-full rounded-sm border px-2 py-1.5 text-13"
                 placeholder="Enter email"
               />
             </div>
@@ -242,11 +248,14 @@ export const WithForm: Story = {
               <button
                 type="button"
                 onClick={() => setOpen(false)}
-                className="rounded bg-gray-200 px-3 py-1.5 text-xs hover:bg-gray-300"
+                className="bg-gray-200 hover:bg-gray-300 rounded-sm px-3 py-1.5 text-11"
               >
                 Cancel
               </button>
-              <button type="submit" className="rounded bg-blue-500 px-3 py-1.5 text-xs text-white hover:bg-blue-600">
+              <button
+                type="submit"
+                className="bg-blue-500 hover:bg-blue-600 rounded-sm px-3 py-1.5 text-11 text-on-color"
+              >
                 Submit
               </button>
             </div>
@@ -262,15 +271,15 @@ export const WithList: Story = {
     const [open, setOpen] = useState(args.open);
     return (
       <Popover {...args} open={open} onOpenChange={setOpen}>
-        <Popover.Button className="rounded bg-blue-500 px-4 py-2 text-white hover:bg-blue-600">
+        <Popover.Button className="bg-blue-500 hover:bg-blue-600 rounded-sm px-4 py-2 text-on-color">
           Show Options
         </Popover.Button>
-        <Popover.Panel className="w-56 rounded-lg border border-gray-200 bg-white shadow-lg">
+        <Popover.Panel className="border-gray-200 shadow-lg w-56 rounded-lg border bg-white">
           <div className="p-2">
-            <h3 className="px-2 py-1.5 text-xs font-semibold text-gray-500">Options</h3>
-            <button className="w-full rounded px-2 py-1.5 text-left text-sm hover:bg-gray-100">Option 1</button>
-            <button className="w-full rounded px-2 py-1.5 text-left text-sm hover:bg-gray-100">Option 2</button>
-            <button className="w-full rounded px-2 py-1.5 text-left text-sm hover:bg-gray-100">Option 3</button>
+            <h3 className="text-gray-500 px-2 py-1.5 text-11 font-semibold">Options</h3>
+            <button className="hover:bg-gray-100 w-full rounded-sm px-2 py-1.5 text-left text-13">Option 1</button>
+            <button className="hover:bg-gray-100 w-full rounded-sm px-2 py-1.5 text-left text-13">Option 2</button>
+            <button className="hover:bg-gray-100 w-full rounded-sm px-2 py-1.5 text-left text-13">Option 3</button>
           </div>
         </Popover.Panel>
       </Popover>
@@ -285,18 +294,18 @@ export const ColorPicker: Story = {
 
     return (
       <Popover>
-        <Popover.Button className="flex items-center gap-2 rounded border border-gray-300 bg-white px-4 py-2 hover:bg-gray-50">
-          <div className="h-4 w-4 rounded" style={{ backgroundColor: selectedColor }} />
-          <span className="text-sm">Pick Color</span>
+        <Popover.Button className="border-gray-300 hover:bg-gray-50 flex items-center gap-2 rounded-sm border bg-white px-4 py-2">
+          <div className="h-4 w-4 rounded-sm" style={{ backgroundColor: selectedColor }} />
+          <span className="text-13">Pick Color</span>
         </Popover.Button>
-        <Popover.Panel className="w-48 rounded-lg border border-gray-200 bg-white p-3 shadow-lg">
-          <h3 className="mb-2 text-xs font-semibold">Select Color</h3>
+        <Popover.Panel className="border-gray-200 shadow-lg w-48 rounded-lg border bg-white p-3">
+          <h3 className="mb-2 text-11 font-semibold">Select Color</h3>
           <div className="grid grid-cols-5 gap-2">
             {colors.map((color) => (
               <button
                 key={color}
                 onClick={() => setSelectedColor(color)}
-                className="h-8 w-8 rounded border-2 transition-transform hover:scale-110"
+                className="h-8 w-8 rounded-sm border-2 transition-transform hover:scale-110"
                 style={{
                   backgroundColor: color,
                   borderColor: selectedColor === color ? "#000" : "transparent",
diff --git a/packages/propel/src/popover/root.tsx b/packages/propel/src/popover/root.tsx
index d7d9ac40b..35ab032eb 100644
--- a/packages/propel/src/popover/root.tsx
+++ b/packages/propel/src/popover/root.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { memo, useMemo } from "react";
 import { Popover as BasePopover } from "@base-ui-components/react/popover";
 import type { TPlacement, TSide, TAlign } from "../utils/placement";
diff --git a/packages/propel/src/portal/constants.ts b/packages/propel/src/portal/constants.ts
index d147ebe81..8851089e6 100644
--- a/packages/propel/src/portal/constants.ts
+++ b/packages/propel/src/portal/constants.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export enum EPortalWidth {
   QUARTER = "quarter",
   HALF = "half",
diff --git a/packages/propel/src/portal/index.ts b/packages/propel/src/portal/index.ts
index 3594f5781..9b0da01e0 100644
--- a/packages/propel/src/portal/index.ts
+++ b/packages/propel/src/portal/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./modal-portal";
 export * from "./portal-wrapper";
 export * from "./constants";
diff --git a/packages/propel/src/portal/modal-portal.tsx b/packages/propel/src/portal/modal-portal.tsx
index 6ada05e1f..655d68719 100644
--- a/packages/propel/src/portal/modal-portal.tsx
+++ b/packages/propel/src/portal/modal-portal.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React, { useCallback, useMemo, useRef, useEffect } from "react";
 import { cn } from "../utils";
 import {
@@ -78,7 +84,7 @@ export function ModalPortal({
     const positionClass = fullScreen ? "" : PORTAL_POSITION_CLASSES[position];
 
     return cn(
-      "top-0 h-full bg-white shadow-lg absolute transition-transform duration-300 ease-out",
+      "shadow-lg absolute top-0 h-full bg-white transition-transform duration-300 ease-out",
       widthClass,
       positionClass,
       contentClassName
@@ -95,7 +101,7 @@ export function ModalPortal({
     >
       {showOverlay && (
         <div
-          className={cn("absolute inset-0 bg-black bg-opacity-50 transition-opacity duration-300", overlayClassName)}
+          className={cn("absolute inset-0 bg-black/50 transition-colors duration-300", overlayClassName)}
           onClick={handleOverlayClick}
           aria-hidden="true"
         />
diff --git a/packages/propel/src/portal/portal-wrapper.tsx b/packages/propel/src/portal/portal-wrapper.tsx
index 7f1c08860..e65481ce9 100644
--- a/packages/propel/src/portal/portal-wrapper.tsx
+++ b/packages/propel/src/portal/portal-wrapper.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React, { useLayoutEffect, useState, useMemo } from "react";
 import { createPortal } from "react-dom";
 import { DEFAULT_PORTAL_ID } from "./constants";
diff --git a/packages/propel/src/portal/portal.stories.tsx b/packages/propel/src/portal/portal.stories.tsx
index 24526a592..0c47b5754 100644
--- a/packages/propel/src/portal/portal.stories.tsx
+++ b/packages/propel/src/portal/portal.stories.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React, { useState } from "react";
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { Button } from "../button/button";
@@ -75,25 +81,25 @@ function ModalContent({
   onClose?: () => void;
 }) {
   return (
-    <div className="flex flex-col h-full bg-white">
-      <div className="flex items-center justify-between p-6 border-b border-gray-200">
+    <div className="flex h-full flex-col bg-white">
+      <div className="border-gray-200 flex items-center justify-between border-b p-6">
         <div>
-          <h2 className="text-xl font-semibold text-gray-900">{title}</h2>
-          <p className="text-sm text-gray-500 mt-1">Modal demonstration</p>
+          <h2 className="text-gray-900 text-18 font-semibold">{title}</h2>
+          <p className="text-gray-500 mt-1 text-13">Modal demonstration</p>
         </div>
         {showCloseButton && onClose && (
-          <Button variant="link-neutral" size="sm" onClick={onClose} aria-label="Close modal">
+          <Button variant="ghost" onClick={onClose} aria-label="Close modal">
             ✕
           </Button>
         )}
       </div>
-      <div className="flex-1 p-6 overflow-y-auto">
+      <div className="flex-1 overflow-y-auto p-6">
         <p className="text-gray-600 mb-6">{description}</p>
 
         <div className="space-y-4">
-          <div className="bg-gray-50 p-4 rounded-lg">
-            <h3 className="font-medium text-gray-900 mb-2">Feature Highlights</h3>
-            <ul className="text-sm text-gray-600 space-y-1">
+          <div className="bg-gray-50 rounded-lg p-4">
+            <h3 className="text-gray-900 mb-2 font-medium">Feature Highlights</h3>
+            <ul className="text-gray-600 space-y-1 text-13">
               <li>• ESC key closes the modal</li>
               <li>• Click outside overlay to close</li>
             </ul>
@@ -115,7 +121,7 @@ export const Positions: Story = {
       <div className="flex gap-3">
         {Object.values(EPortalPosition).map((position) => (
           <React.Fragment key={position}>
-            <Button variant="outline-primary" onClick={() => setActiveModal(position)}>
+            <Button variant="secondary" onClick={() => setActiveModal(position)}>
               {position.charAt(0).toUpperCase() + position.slice(1)}
             </Button>
             <ModalPortal
@@ -146,7 +152,7 @@ export const Widths: Story = {
       <div className="flex gap-3">
         {Object.values(EPortalWidth).map((width) => (
           <React.Fragment key={width}>
-            <Button variant="neutral-primary" onClick={() => setActiveModal(width)}>
+            <Button variant="secondary" onClick={() => setActiveModal(width)}>
               {width.replace("_", " ").replace(/\b\w/g, (l) => l.toUpperCase())}
             </Button>
             <ModalPortal
@@ -174,7 +180,7 @@ export const BasicPortal: Story = {
       <div className="relative">
         <p>This content renders in the normal document flow.</p>
         <PortalWrapper portalId="storybook-portal">
-          <div className="fixed top-4 right-4 p-4 bg-blue-500 text-white rounded shadow-lg z-50">
+          <div className="bg-blue-500 shadow-lg fixed top-4 right-4 z-50 rounded-sm p-4 text-on-color">
             This content is rendered in a portal!
           </div>
         </PortalWrapper>
diff --git a/packages/propel/src/portal/types.ts b/packages/propel/src/portal/types.ts
index 8a229bc8d..023622545 100644
--- a/packages/propel/src/portal/types.ts
+++ b/packages/propel/src/portal/types.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { ReactNode, MouseEvent as ReactMouseEvent } from "react";
 import type { EPortalWidth, EPortalPosition } from "./constants";
 
diff --git a/packages/propel/src/scrollarea/index.ts b/packages/propel/src/scrollarea/index.ts
index d0025852d..3528c5195 100644
--- a/packages/propel/src/scrollarea/index.ts
+++ b/packages/propel/src/scrollarea/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./scrollarea";
diff --git a/packages/propel/src/scrollarea/scrollarea.stories.tsx b/packages/propel/src/scrollarea/scrollarea.stories.tsx
index 1841bc99e..0acab6661 100644
--- a/packages/propel/src/scrollarea/scrollarea.stories.tsx
+++ b/packages/propel/src/scrollarea/scrollarea.stories.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { ScrollArea } from "./scrollarea";
 
@@ -26,9 +32,9 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {
   render(args) {
     return (
-      <ScrollArea {...args} className="h-64 w-80 border rounded-lg">
-        <div className="p-4 space-y-4">
-          <h3 className="text-lg font-semibold">Long Text Content</h3>
+      <ScrollArea {...args} className="h-64 w-80 rounded-lg border">
+        <div className="space-y-4 p-4">
+          <h3 className="text-16 font-semibold">Long Text Content</h3>
           <p>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et
             dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
@@ -56,7 +62,7 @@ export const Default: Story = {
 export const Sizes: Story = {
   render() {
     const content = (
-      <div className="p-4 space-y-2">
+      <div className="space-y-2 p-4">
         {[...Array(10)].map((_, i) => (
           <p key={i}>Line {i + 1}: This is some scrollable content to demonstrate different sizes.</p>
         ))}
@@ -66,20 +72,20 @@ export const Sizes: Story = {
     return (
       <div className="flex flex-col gap-6">
         <div className="space-y-2">
-          <div className="text-sm font-medium">Small</div>
-          <ScrollArea className="h-48 w-80 border rounded-lg" size="sm">
+          <div className="text-13 font-medium">Small</div>
+          <ScrollArea className="h-48 w-80 rounded-lg border" size="sm">
             {content}
           </ScrollArea>
         </div>
         <div className="space-y-2">
-          <div className="text-sm font-medium">Medium</div>
-          <ScrollArea className="h-48 w-80 border rounded-lg" size="md">
+          <div className="text-13 font-medium">Medium</div>
+          <ScrollArea className="h-48 w-80 rounded-lg border" size="md">
             {content}
           </ScrollArea>
         </div>
         <div className="space-y-2">
-          <div className="text-sm font-medium">Large</div>
-          <ScrollArea className="h-48 w-80 border rounded-lg" size="lg">
+          <div className="text-13 font-medium">Large</div>
+          <ScrollArea className="h-48 w-80 rounded-lg border" size="lg">
             {content}
           </ScrollArea>
         </div>
@@ -91,9 +97,9 @@ export const Sizes: Story = {
 export const ScrollTypeAlways: Story = {
   render() {
     return (
-      <ScrollArea className="h-64 w-80 border rounded-lg" scrollType="always">
-        <div className="p-4 space-y-2">
-          <h3 className="text-lg font-semibold">Always Visible Scrollbar</h3>
+      <ScrollArea className="h-64 w-80 rounded-lg border" scrollType="always">
+        <div className="space-y-2 p-4">
+          <h3 className="text-16 font-semibold">Always Visible Scrollbar</h3>
           {[...Array(15)].map((_, i) => (
             <p key={i}>Line {i + 1}: The scrollbar is always visible.</p>
           ))}
@@ -106,10 +112,10 @@ export const ScrollTypeAlways: Story = {
 export const ScrollTypeScroll: Story = {
   render() {
     return (
-      <ScrollArea className="h-64 w-80 border rounded-lg" scrollType="scroll">
-        <div className="p-4 space-y-2">
-          <h3 className="text-lg font-semibold">Scroll to Show</h3>
-          <p className="text-sm text-custom-text-400">Scrollbar appears when scrolling</p>
+      <ScrollArea className="h-64 w-80 rounded-lg border" scrollType="scroll">
+        <div className="space-y-2 p-4">
+          <h3 className="text-16 font-semibold">Scroll to Show</h3>
+          <p className="text-13 text-placeholder">Scrollbar appears when scrolling</p>
           {[...Array(15)].map((_, i) => (
             <p key={i}>Line {i + 1}: Try scrolling to see the scrollbar appear.</p>
           ))}
@@ -122,10 +128,10 @@ export const ScrollTypeScroll: Story = {
 export const ScrollTypeHover: Story = {
   render() {
     return (
-      <ScrollArea className="h-64 w-80 border rounded-lg" scrollType="hover">
-        <div className="p-4 space-y-2">
-          <h3 className="text-lg font-semibold">Hover to Show</h3>
-          <p className="text-sm text-custom-text-400">Scrollbar appears on hover</p>
+      <ScrollArea className="h-64 w-80 rounded-lg border" scrollType="hover">
+        <div className="space-y-2 p-4">
+          <h3 className="text-16 font-semibold">Hover to Show</h3>
+          <p className="text-13 text-placeholder">Scrollbar appears on hover</p>
           {[...Array(15)].map((_, i) => (
             <p key={i}>Line {i + 1}: Hover over the area to see the scrollbar.</p>
           ))}
@@ -138,13 +144,10 @@ export const ScrollTypeHover: Story = {
 export const HorizontalScroll: Story = {
   render() {
     return (
-      <ScrollArea className="h-32 w-96 border rounded-lg" orientation="horizontal">
-        <div className="flex gap-4 p-4 w-[1200px]">
+      <ScrollArea className="h-32 w-96 rounded-lg border" orientation="horizontal">
+        <div className="flex w-[1200px] gap-4 p-4">
           {[...Array(12)].map((_, i) => (
-            <div
-              key={i}
-              className="flex-shrink-0 w-32 h-20 bg-custom-background-80 rounded flex items-center justify-center"
-            >
+            <div key={i} className="flex h-20 w-32 flex-shrink-0 items-center justify-center rounded-sm bg-layer-1">
               Item {i + 1}
             </div>
           ))}
@@ -157,10 +160,10 @@ export const HorizontalScroll: Story = {
 export const BothDirections: Story = {
   render() {
     return (
-      <ScrollArea className="h-64 w-96 border rounded-lg">
-        <div className="w-[800px] p-4 space-y-2">
-          <h3 className="text-lg font-semibold">Both Directions</h3>
-          <p className="text-sm text-custom-text-400">Content scrolls both vertically and horizontally</p>
+      <ScrollArea className="h-64 w-96 rounded-lg border">
+        <div className="w-[800px] space-y-2 p-4">
+          <h3 className="text-16 font-semibold">Both Directions</h3>
+          <p className="text-13 text-placeholder">Content scrolls both vertically and horizontally</p>
           {[...Array(20)].map((_, i) => (
             <p key={i}>
               Line {i + 1}: This line is very long and extends beyond the container width to demonstrate horizontal
@@ -176,21 +179,21 @@ export const BothDirections: Story = {
 export const ListExample: Story = {
   render() {
     return (
-      <ScrollArea className="h-80 w-96 border rounded-lg">
+      <ScrollArea className="h-80 w-96 rounded-lg border">
         <div className="p-4">
-          <h3 className="text-lg font-semibold mb-4">User List</h3>
+          <h3 className="mb-4 text-16 font-semibold">User List</h3>
           <div className="space-y-2">
             {[...Array(25)].map((_, i) => (
               <div
                 key={i}
-                className="flex items-center gap-3 p-3 bg-custom-background-80 rounded hover:bg-custom-background-90 cursor-pointer"
+                className="flex cursor-pointer items-center gap-3 rounded-sm bg-layer-1 p-3 hover:bg-surface-2"
               >
-                <div className="w-10 h-10 rounded-full bg-custom-primary-100 flex items-center justify-center text-white font-medium">
+                <div className="flex h-10 w-10 items-center justify-center rounded-full bg-accent-primary font-medium text-on-color">
                   {String.fromCharCode(65 + (i % 26))}
                 </div>
                 <div>
                   <div className="font-medium">User {i + 1}</div>
-                  <div className="text-sm text-custom-text-400">user{i + 1}@example.com</div>
+                  <div className="text-13 text-placeholder">user{i + 1}@example.com</div>
                 </div>
               </div>
             ))}
@@ -235,8 +238,8 @@ async function fetchData() {
 }`;
 
     return (
-      <ScrollArea className="h-96 w-full max-w-2xl border rounded-lg bg-custom-background-100">
-        <pre className="p-4 text-sm">
+      <ScrollArea className="h-96 w-full max-w-2xl rounded-lg border bg-surface-1">
+        <pre className="p-4 text-13">
           <code>{code}</code>
         </pre>
       </ScrollArea>
@@ -247,16 +250,14 @@ async function fetchData() {
 export const ChatMessages: Story = {
   render() {
     return (
-      <ScrollArea className="h-96 w-full max-w-md border rounded-lg">
-        <div className="p-4 space-y-4">
+      <ScrollArea className="h-96 w-full max-w-md rounded-lg border">
+        <div className="space-y-4 p-4">
           {[...Array(20)].map((_, i) => (
             <div key={i} className={`flex ${i % 3 === 0 ? "justify-end" : "justify-start"}`}>
               <div
-                className={`max-w-[70%] p-3 rounded-lg ${
-                  i % 3 === 0 ? "bg-custom-primary-100 text-white" : "bg-custom-background-80"
-                }`}
+                className={`max-w-[70%] rounded-lg p-3 ${i % 3 === 0 ? "bg-accent-primary text-on-color" : "bg-layer-1"}`}
               >
-                <div className="text-sm">{i % 3 === 0 ? "You" : `User ${i + 1}`}</div>
+                <div className="text-13">{i % 3 === 0 ? "You" : `User ${i + 1}`}</div>
                 <div className="mt-1">Message content for message number {i + 1}</div>
               </div>
             </div>
@@ -270,9 +271,9 @@ export const ChatMessages: Story = {
 export const DataTable: Story = {
   render() {
     return (
-      <ScrollArea className="h-96 w-full max-w-3xl border rounded-lg">
+      <ScrollArea className="h-96 w-full max-w-3xl rounded-lg border">
         <table className="w-full">
-          <thead className="bg-custom-background-80 sticky top-0">
+          <thead className="sticky top-0 bg-layer-1">
             <tr>
               <th className="px-4 py-2 text-left">ID</th>
               <th className="px-4 py-2 text-left">Name</th>
@@ -282,13 +283,13 @@ export const DataTable: Story = {
           </thead>
           <tbody>
             {[...Array(50)].map((_, i) => (
-              <tr key={i} className="border-t border-custom-border-200 hover:bg-custom-background-80">
+              <tr key={i} className="border-t border-subtle hover:bg-layer-1">
                 <td className="px-4 py-2">#{i + 1}</td>
                 <td className="px-4 py-2">User {i + 1}</td>
                 <td className="px-4 py-2">user{i + 1}@example.com</td>
                 <td className="px-4 py-2">
                   <span
-                    className={`px-2 py-1 rounded text-xs ${i % 3 === 0 ? "bg-green-500/20 text-green-500" : "bg-gray-500/20 text-gray-500"}`}
+                    className={`rounded-sm px-2 py-1 text-11 ${i % 3 === 0 ? "bg-success-primary text-success-primary" : "bg-gray-500/20 text-gray-500"}`}
                   >
                     {i % 3 === 0 ? "Active" : "Inactive"}
                   </span>
diff --git a/packages/propel/src/scrollarea/scrollarea.tsx b/packages/propel/src/scrollarea/scrollarea.tsx
index ca9f93828..4c52e98dc 100644
--- a/packages/propel/src/scrollarea/scrollarea.tsx
+++ b/packages/propel/src/scrollarea/scrollarea.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 import { ScrollArea as BaseScrollArea } from "@base-ui-components/react/scroll-area";
 
@@ -76,12 +82,11 @@ const ScrollBar = React.memo(function ScrollBar({
       data-slot="scroll-area-scrollbar"
       orientation={orientation}
       className={cn(
-        "group/track mr-1 flex justify-center rounded bg-transparent opacity-0 transition-opacity delay-300 ",
+        "group/track mr-1 flex justify-center rounded-sm bg-transparent opacity-0 transition-opacity delay-300",
         orientation === "vertical" && verticalSizeStyles[size],
         orientation === "horizontal" && horizontalSizeStyles[size],
         scrollType === "always" && "opacity-100",
-        scrollType === "scroll" &&
-          "data-[scrolling]:opacity-100  data-[scrolling]:delay-0 data-[scrolling]:duration-75",
+        scrollType === "scroll" && "data-[scrolling]:opacity-100 data-[scrolling]:delay-0 data-[scrolling]:duration-75",
         scrollType === "hover" && "data-[hovering]:opacity-100 data-[hovering]:delay-0 data-[hovering]:duration-75",
         className
       )}
@@ -90,7 +95,7 @@ const ScrollBar = React.memo(function ScrollBar({
       <BaseScrollArea.Thumb
         data-slot="scroll-area-thumb"
         className={cn(
-          "relative flex-1 rounded-[10px] bg-custom-scrollbar-neutral group-hover:bg-custom-scrollbar-hover group-active/track:bg-custom-scrollbar-active data-[scrolling]:bg-custom-scrollbar-active",
+          "relative flex-1 rounded-[10px] bg-scrollbar-thumb group-hover/track:bg-scrollbar-thumb-hover group-active/track:bg-scrollbar-thumb-active data-[scrolling]:bg-scrollbar-thumb-active",
           thumbSizeStyles[size]
         )}
       />
diff --git a/packages/propel/src/separator/separator.stories.tsx b/packages/propel/src/separator/separator.stories.tsx
index 1484ce8f3..3b7b8d7ff 100644
--- a/packages/propel/src/separator/separator.stories.tsx
+++ b/packages/propel/src/separator/separator.stories.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { Separator } from "./separator";
 
@@ -40,15 +46,15 @@ export const Vertical: Story = {
 export const WithinContainer: Story = {
   render() {
     return (
-      <div className="w-[300px] rounded-lg border p-6 space-y-4">
+      <div className="w-[300px] space-y-4 rounded-lg border p-6">
         <div className="space-y-2">
-          <h4 className="font-medium leading-none">Section 1</h4>
-          <p className="text-sm text-muted-foreground">Description for section 1</p>
+          <h4 className="leading-none font-medium">Section 1</h4>
+          <p className="text-muted-foreground text-13">Description for section 1</p>
         </div>
         <Separator />
         <div className="space-y-2">
-          <h4 className="font-medium leading-none">Section 2</h4>
-          <p className="text-sm text-muted-foreground">Description for section 2</p>
+          <h4 className="leading-none font-medium">Section 2</h4>
+          <p className="text-muted-foreground text-13">Description for section 2</p>
         </div>
       </div>
     );
diff --git a/packages/propel/src/separator/separator.tsx b/packages/propel/src/separator/separator.tsx
index 08791679e..22030e2a9 100644
--- a/packages/propel/src/separator/separator.tsx
+++ b/packages/propel/src/separator/separator.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 import { Separator as SeparatorPrimitive } from "@base-ui-components/react/separator";
 import { cn } from "../utils";
@@ -11,7 +17,7 @@ interface SeparatorProps extends React.ComponentProps<typeof SeparatorPrimitive>
 }
 
 const Separator = React.forwardRef(function Separator(
-  { orientation = "horizontal", ...props }: SeparatorProps,
+  { orientation = "horizontal", className, ...props }: SeparatorProps,
   ref: React.ForwardedRef<React.ElementRef<typeof SeparatorPrimitive>>
 ) {
   return (
@@ -21,7 +27,7 @@ const Separator = React.forwardRef(function Separator(
       data-slot="separator"
       data-orientation={orientation}
       {...props}
-      className={cn("bg-custom-border-200", "shrink-0", orientation === "horizontal" ? "h-px w-full" : "h-full w-px")}
+      className={cn("bg-subtle-1", "shrink-0", orientation === "horizontal" ? "h-px w-full" : "h-full w-px", className)}
     />
   );
 });
diff --git a/packages/propel/src/skeleton/index.ts b/packages/propel/src/skeleton/index.ts
index 1efe34c51..d98033459 100644
--- a/packages/propel/src/skeleton/index.ts
+++ b/packages/propel/src/skeleton/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./root";
diff --git a/packages/propel/src/skeleton/root.tsx b/packages/propel/src/skeleton/root.tsx
index 03bb61bd3..1d09e5537 100644
--- a/packages/propel/src/skeleton/root.tsx
+++ b/packages/propel/src/skeleton/root.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 // helpers
 import { cn } from "../utils/classname";
@@ -23,13 +29,7 @@ type ItemProps = {
 };
 
 function SkeletonItem({ height = "auto", width = "auto", className = "" }: ItemProps) {
-  return (
-    <div
-      data-slot="skeleton-item"
-      className={cn("rounded-md bg-custom-background-80", className)}
-      style={{ height, width }}
-    />
-  );
+  return <div data-slot="skeleton-item" className={cn("rounded-md bg-layer-1", className)} style={{ height, width }} />;
 }
 
 const Skeleton = Object.assign(SkeletonRoot, { Item: SkeletonItem });
diff --git a/packages/propel/src/skeleton/skeleton.stories.tsx b/packages/propel/src/skeleton/skeleton.stories.tsx
index 470395922..7a5be9863 100644
--- a/packages/propel/src/skeleton/skeleton.stories.tsx
+++ b/packages/propel/src/skeleton/skeleton.stories.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { Skeleton } from "./index";
 
@@ -18,7 +24,7 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {
   render() {
     return (
-      <Skeleton className="w-80 flex flex-col gap-2">
+      <Skeleton className="flex w-80 flex-col gap-2">
         <Skeleton.Item height="40px" width="100%" />
       </Skeleton>
     );
@@ -28,7 +34,7 @@ export const Default: Story = {
 export const Card: Story = {
   render() {
     return (
-      <Skeleton className="w-80 flex flex-col gap-4">
+      <Skeleton className="flex w-80 flex-col gap-4">
         <Skeleton.Item height="200px" width="100%" />
         <div className="flex flex-col gap-2">
           <Skeleton.Item height="20px" width="60%" />
@@ -42,11 +48,11 @@ export const Card: Story = {
 export const List: Story = {
   render() {
     return (
-      <Skeleton className="w-96 flex flex-col gap-3">
+      <Skeleton className="flex w-96 flex-col gap-3">
         {[...Array(5)].map((_, i) => (
           <div key={i} className="flex gap-3">
             <Skeleton.Item height="40px" width="40px" className="rounded-full" />
-            <div className="flex-1 flex flex-col gap-2">
+            <div className="flex flex-1 flex-col gap-2">
               <Skeleton.Item height="16px" width="70%" />
               <Skeleton.Item height="12px" width="50%" />
             </div>
@@ -60,7 +66,7 @@ export const List: Story = {
 export const Table: Story = {
   render() {
     return (
-      <Skeleton className="w-full flex flex-col gap-3">
+      <Skeleton className="flex w-full flex-col gap-3">
         <div className="flex gap-4">
           <Skeleton.Item height="20px" width="150px" />
           <Skeleton.Item height="20px" width="200px" />
@@ -81,10 +87,10 @@ export const Table: Story = {
 export const Profile: Story = {
   render() {
     return (
-      <Skeleton className="w-80 flex flex-col gap-4">
+      <Skeleton className="flex w-80 flex-col gap-4">
         <div className="flex items-center gap-4">
           <Skeleton.Item height="80px" width="80px" className="rounded-full" />
-          <div className="flex-1 flex flex-col gap-2">
+          <div className="flex flex-1 flex-col gap-2">
             <Skeleton.Item height="20px" width="60%" />
             <Skeleton.Item height="16px" width="40%" />
           </div>
@@ -124,7 +130,7 @@ export const AvatarGroup: Story = {
 export const Text: Story = {
   render() {
     return (
-      <Skeleton className="w-96 flex flex-col gap-2">
+      <Skeleton className="flex w-96 flex-col gap-2">
         <Skeleton.Item height="16px" width="100%" />
         <Skeleton.Item height="16px" width="95%" />
         <Skeleton.Item height="16px" width="90%" />
@@ -147,7 +153,7 @@ export const Button: Story = {
 export const Input: Story = {
   render() {
     return (
-      <Skeleton className="w-80 flex flex-col gap-2">
+      <Skeleton className="flex w-80 flex-col gap-2">
         <Skeleton.Item height="14px" width="80px" />
         <Skeleton.Item height="40px" width="100%" className="rounded-md" />
       </Skeleton>
@@ -158,7 +164,7 @@ export const Input: Story = {
 export const Form: Story = {
   render() {
     return (
-      <Skeleton className="w-96 flex flex-col gap-4">
+      <Skeleton className="flex w-96 flex-col gap-4">
         <div className="flex flex-col gap-2">
           <Skeleton.Item height="14px" width="80px" />
           <Skeleton.Item height="40px" width="100%" className="rounded-md" />
@@ -180,7 +186,7 @@ export const Form: Story = {
 export const ProductCard: Story = {
   render() {
     return (
-      <Skeleton className="w-72 flex flex-col gap-3 p-4 border rounded-lg">
+      <Skeleton className="flex w-72 flex-col gap-3 rounded-lg border p-4">
         <Skeleton.Item height="200px" width="100%" className="rounded-md" />
         <div className="flex flex-col gap-2">
           <Skeleton.Item height="20px" width="80%" />
diff --git a/packages/propel/src/spinners/circular-bar-spinner.stories.tsx b/packages/propel/src/spinners/circular-bar-spinner.stories.tsx
index 4a76d4a84..2ca8b3ac6 100644
--- a/packages/propel/src/spinners/circular-bar-spinner.stories.tsx
+++ b/packages/propel/src/spinners/circular-bar-spinner.stories.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { CircularBarSpinner } from "./circular-bar-spinner";
 
@@ -49,7 +55,7 @@ export const ExtraLarge: Story = {
 
 export const CustomColor: Story = {
   args: {
-    className: "text-green-500",
+    className: "text-success-primary",
   },
 };
 
@@ -59,23 +65,23 @@ export const AllSizes: Story = {
       <div className="flex items-center gap-6">
         <div className="text-center">
           <CircularBarSpinner height="12px" width="12px" />
-          <p className="mt-2 text-xs text-gray-600">Small</p>
+          <p className="text-gray-600 mt-2 text-11">Small</p>
         </div>
         <div className="text-center">
           <CircularBarSpinner height="16px" width="16px" />
-          <p className="mt-2 text-xs text-gray-600">Default</p>
+          <p className="text-gray-600 mt-2 text-11">Default</p>
         </div>
         <div className="text-center">
           <CircularBarSpinner height="24px" width="24px" />
-          <p className="mt-2 text-xs text-gray-600">Medium</p>
+          <p className="text-gray-600 mt-2 text-11">Medium</p>
         </div>
         <div className="text-center">
           <CircularBarSpinner height="32px" width="32px" />
-          <p className="mt-2 text-xs text-gray-600">Large</p>
+          <p className="text-gray-600 mt-2 text-11">Large</p>
         </div>
         <div className="text-center">
           <CircularBarSpinner height="48px" width="48px" />
-          <p className="mt-2 text-xs text-gray-600">XL</p>
+          <p className="text-gray-600 mt-2 text-11">XL</p>
         </div>
       </div>
     );
@@ -88,23 +94,23 @@ export const ColorVariations: Story = {
       <div className="flex items-center gap-6">
         <div className="text-center">
           <CircularBarSpinner className="text-blue-500" height="24px" width="24px" />
-          <p className="mt-2 text-xs text-gray-600">Blue</p>
+          <p className="text-gray-600 mt-2 text-11">Blue</p>
         </div>
         <div className="text-center">
-          <CircularBarSpinner className="text-green-500" height="24px" width="24px" />
-          <p className="mt-2 text-xs text-gray-600">Green</p>
+          <CircularBarSpinner className="text-success-primary" height="24px" width="24px" />
+          <p className="text-gray-600 mt-2 text-11">Green</p>
         </div>
         <div className="text-center">
-          <CircularBarSpinner className="text-red-500" height="24px" width="24px" />
-          <p className="mt-2 text-xs text-gray-600">Red</p>
+          <CircularBarSpinner className="text-danger-primary" height="24px" width="24px" />
+          <p className="text-gray-600 mt-2 text-11">Red</p>
         </div>
         <div className="text-center">
           <CircularBarSpinner className="text-purple-500" height="24px" width="24px" />
-          <p className="mt-2 text-xs text-gray-600">Purple</p>
+          <p className="text-gray-600 mt-2 text-11">Purple</p>
         </div>
         <div className="text-center">
           <CircularBarSpinner className="text-orange-500" height="24px" width="24px" />
-          <p className="mt-2 text-xs text-gray-600">Orange</p>
+          <p className="text-gray-600 mt-2 text-11">Orange</p>
         </div>
       </div>
     );
@@ -114,7 +120,7 @@ export const ColorVariations: Story = {
 export const InButton: Story = {
   render() {
     return (
-      <button className="flex items-center gap-2 rounded bg-green-500 px-4 py-2 text-white">
+      <button className="bg-green-500 flex items-center gap-2 rounded-sm px-4 py-2 text-on-color">
         <CircularBarSpinner height="16px" width="16px" />
         <span>Processing...</span>
       </button>
@@ -125,10 +131,10 @@ export const InButton: Story = {
 export const CenteredInCard: Story = {
   render() {
     return (
-      <div className="w-96 rounded-lg border border-gray-200 bg-white p-8 shadow-md">
+      <div className="border-gray-200 shadow-md w-96 rounded-lg border bg-white p-8">
         <div className="flex flex-col items-center justify-center space-y-4">
           <CircularBarSpinner height="48px" width="48px" />
-          <p className="text-sm text-gray-600">Processing data...</p>
+          <p className="text-gray-600 text-13">Processing data...</p>
         </div>
       </div>
     );
diff --git a/packages/propel/src/spinners/circular-bar-spinner.tsx b/packages/propel/src/spinners/circular-bar-spinner.tsx
index ab6b002ed..60f57b92a 100644
--- a/packages/propel/src/spinners/circular-bar-spinner.tsx
+++ b/packages/propel/src/spinners/circular-bar-spinner.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 
 export interface ICircularBarSpinner extends React.SVGAttributes<SVGElement> {
diff --git a/packages/propel/src/spinners/circular-spinner.stories.tsx b/packages/propel/src/spinners/circular-spinner.stories.tsx
index fec8b05a8..c9bcfb2f7 100644
--- a/packages/propel/src/spinners/circular-spinner.stories.tsx
+++ b/packages/propel/src/spinners/circular-spinner.stories.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { Spinner } from "./circular-spinner";
 
@@ -59,23 +65,23 @@ export const AllSizes: Story = {
       <div className="flex items-center gap-6">
         <div className="text-center">
           <Spinner height="16px" width="16px" />
-          <p className="mt-2 text-xs text-gray-600">Small</p>
+          <p className="text-gray-600 mt-2 text-11">Small</p>
         </div>
         <div className="text-center">
           <Spinner height="24px" width="24px" />
-          <p className="mt-2 text-xs text-gray-600">Medium</p>
+          <p className="text-gray-600 mt-2 text-11">Medium</p>
         </div>
         <div className="text-center">
           <Spinner height="32px" width="32px" />
-          <p className="mt-2 text-xs text-gray-600">Default</p>
+          <p className="text-gray-600 mt-2 text-11">Default</p>
         </div>
         <div className="text-center">
           <Spinner height="48px" width="48px" />
-          <p className="mt-2 text-xs text-gray-600">Large</p>
+          <p className="text-gray-600 mt-2 text-11">Large</p>
         </div>
         <div className="text-center">
           <Spinner height="64px" width="64px" />
-          <p className="mt-2 text-xs text-gray-600">XL</p>
+          <p className="text-gray-600 mt-2 text-11">XL</p>
         </div>
       </div>
     );
@@ -88,23 +94,23 @@ export const ColorVariations: Story = {
       <div className="flex items-center gap-6">
         <div className="text-center">
           <Spinner className="text-blue-500" />
-          <p className="mt-2 text-xs text-gray-600">Blue</p>
+          <p className="text-gray-600 mt-2 text-11">Blue</p>
         </div>
         <div className="text-center">
-          <Spinner className="text-green-500" />
-          <p className="mt-2 text-xs text-gray-600">Green</p>
+          <Spinner className="text-success-primary" />
+          <p className="text-gray-600 mt-2 text-11">Green</p>
         </div>
         <div className="text-center">
-          <Spinner className="text-red-500" />
-          <p className="mt-2 text-xs text-gray-600">Red</p>
+          <Spinner className="text-danger-primary" />
+          <p className="text-gray-600 mt-2 text-11">Red</p>
         </div>
         <div className="text-center">
           <Spinner className="text-purple-500" />
-          <p className="mt-2 text-xs text-gray-600">Purple</p>
+          <p className="text-gray-600 mt-2 text-11">Purple</p>
         </div>
         <div className="text-center">
           <Spinner className="text-orange-500" />
-          <p className="mt-2 text-xs text-gray-600">Orange</p>
+          <p className="text-gray-600 mt-2 text-11">Orange</p>
         </div>
       </div>
     );
@@ -114,7 +120,7 @@ export const ColorVariations: Story = {
 export const InButton: Story = {
   render() {
     return (
-      <button className="flex items-center gap-2 rounded bg-blue-500 px-4 py-2 text-white">
+      <button className="bg-blue-500 flex items-center gap-2 rounded-sm px-4 py-2 text-on-color">
         <Spinner height="16px" width="16px" />
         <span>Loading...</span>
       </button>
@@ -125,10 +131,10 @@ export const InButton: Story = {
 export const CenteredInCard: Story = {
   render() {
     return (
-      <div className="w-96 rounded-lg border border-gray-200 bg-white p-8 shadow-md">
+      <div className="border-gray-200 shadow-md w-96 rounded-lg border bg-white p-8">
         <div className="flex flex-col items-center justify-center space-y-4">
           <Spinner height="48px" width="48px" />
-          <p className="text-sm text-gray-600">Loading content...</p>
+          <p className="text-gray-600 text-13">Loading content...</p>
         </div>
       </div>
     );
diff --git a/packages/propel/src/spinners/circular-spinner.tsx b/packages/propel/src/spinners/circular-spinner.tsx
index 479fb8215..e64f8c08a 100644
--- a/packages/propel/src/spinners/circular-spinner.tsx
+++ b/packages/propel/src/spinners/circular-spinner.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 // helpers
 import clsx from "clsx";
@@ -15,7 +21,7 @@ export function Spinner({ height = "32px", width = "32px", className = "" }: ISp
         aria-hidden="true"
         height={height}
         width={width}
-        className={clsx("animate-spin text-custom-text-200", className)}
+        className={clsx("animate-spin text-secondary", className)}
         viewBox="0 0 100 101"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
@@ -25,7 +31,7 @@ export function Spinner({ height = "32px", width = "32px", className = "" }: ISp
           fill="currentColor"
         />
         <path
-          className="fill-custom-primary-100"
+          className="fill-accent-primary"
           d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
         />
       </svg>
diff --git a/packages/propel/src/spinners/index.ts b/packages/propel/src/spinners/index.ts
index a871a9b77..45fa139d5 100644
--- a/packages/propel/src/spinners/index.ts
+++ b/packages/propel/src/spinners/index.ts
@@ -1,2 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./circular-spinner";
 export * from "./circular-bar-spinner";
diff --git a/packages/propel/src/styles/fonts/Inter/LICENSE b/packages/propel/src/styles/fonts/Inter/LICENSE
deleted file mode 100644
index 46d45c6a1..000000000
--- a/packages/propel/src/styles/fonts/Inter/LICENSE
+++ /dev/null
@@ -1 +0,0 @@
-Inter[slnt,wght].ttf: Copyright 2020 The Inter Project Authors (https://github.com/rsms/inter)
\ No newline at end of file
diff --git a/packages/propel/src/styles/fonts/Inter/inter-v13-latin-200.woff2 b/packages/propel/src/styles/fonts/Inter/inter-v13-latin-200.woff2
deleted file mode 100644
index c59d2397e..000000000
Binary files a/packages/propel/src/styles/fonts/Inter/inter-v13-latin-200.woff2 and /dev/null differ
diff --git a/packages/propel/src/styles/fonts/Inter/inter-v13-latin-300.woff2 b/packages/propel/src/styles/fonts/Inter/inter-v13-latin-300.woff2
deleted file mode 100644
index 2d99c5bcf..000000000
Binary files a/packages/propel/src/styles/fonts/Inter/inter-v13-latin-300.woff2 and /dev/null differ
diff --git a/packages/propel/src/styles/fonts/Inter/inter-v13-latin-500.woff2 b/packages/propel/src/styles/fonts/Inter/inter-v13-latin-500.woff2
deleted file mode 100644
index 21db79416..000000000
Binary files a/packages/propel/src/styles/fonts/Inter/inter-v13-latin-500.woff2 and /dev/null differ
diff --git a/packages/propel/src/styles/fonts/Inter/inter-v13-latin-600.woff2 b/packages/propel/src/styles/fonts/Inter/inter-v13-latin-600.woff2
deleted file mode 100644
index da1c039b7..000000000
Binary files a/packages/propel/src/styles/fonts/Inter/inter-v13-latin-600.woff2 and /dev/null differ
diff --git a/packages/propel/src/styles/fonts/Inter/inter-v13-latin-700.woff2 b/packages/propel/src/styles/fonts/Inter/inter-v13-latin-700.woff2
deleted file mode 100644
index 775f7575e..000000000
Binary files a/packages/propel/src/styles/fonts/Inter/inter-v13-latin-700.woff2 and /dev/null differ
diff --git a/packages/propel/src/styles/fonts/Inter/inter-v13-latin-800.woff2 b/packages/propel/src/styles/fonts/Inter/inter-v13-latin-800.woff2
deleted file mode 100644
index 39b9673d8..000000000
Binary files a/packages/propel/src/styles/fonts/Inter/inter-v13-latin-800.woff2 and /dev/null differ
diff --git a/packages/propel/src/styles/fonts/Inter/inter-v13-latin-regular.woff2 b/packages/propel/src/styles/fonts/Inter/inter-v13-latin-regular.woff2
deleted file mode 100644
index d228a4af2..000000000
Binary files a/packages/propel/src/styles/fonts/Inter/inter-v13-latin-regular.woff2 and /dev/null differ
diff --git a/packages/propel/src/styles/fonts/Material-Symbols-Rounded/LICENSE b/packages/propel/src/styles/fonts/Material-Symbols-Rounded/LICENSE
deleted file mode 100644
index c86ff014a..000000000
--- a/packages/propel/src/styles/fonts/Material-Symbols-Rounded/LICENSE
+++ /dev/null
@@ -1 +0,0 @@
-MaterialSymbolsRounded[FILL,GRAD,opsz,wght].ttf: Copyright 2022, 2022 Google LLC. All Rights Reserved.
diff --git a/packages/propel/src/styles/fonts/Material-Symbols-Rounded/material-symbols-rounded-v168-latin-regular.woff2 b/packages/propel/src/styles/fonts/Material-Symbols-Rounded/material-symbols-rounded-v168-latin-regular.woff2
deleted file mode 100644
index 03d95f1b0..000000000
Binary files a/packages/propel/src/styles/fonts/Material-Symbols-Rounded/material-symbols-rounded-v168-latin-regular.woff2 and /dev/null differ
diff --git a/packages/propel/src/styles/fonts/index.css b/packages/propel/src/styles/fonts/index.css
deleted file mode 100644
index 7d6779d22..000000000
--- a/packages/propel/src/styles/fonts/index.css
+++ /dev/null
@@ -1,87 +0,0 @@
-/* inter-200 - latin */
-@font-face {
-  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
-  font-family: Inter;
-  font-style: normal;
-  font-weight: 200;
-  src: url("./Inter/inter-v13-latin-200.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
-}
-
-/* inter-300 - latin */
-@font-face {
-  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
-  font-family: Inter;
-  font-style: normal;
-  font-weight: 300;
-  src: url("./Inter/inter-v13-latin-300.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
-}
-
-/* inter-regular - latin */
-@font-face {
-  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
-  font-family: Inter;
-  font-style: normal;
-  font-weight: 405;
-  src: url("./Inter/inter-v13-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
-}
-
-/* inter-500 - latin */
-@font-face {
-  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
-  font-family: Inter;
-  font-style: normal;
-  font-weight: 500;
-  src: url("./Inter/inter-v13-latin-500.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
-}
-
-/* inter-600 - latin */
-@font-face {
-  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
-  font-family: Inter;
-  font-style: normal;
-  font-weight: 600;
-  src: url("./Inter/inter-v13-latin-600.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
-}
-
-/* inter-700 - latin */
-@font-face {
-  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
-  font-family: Inter;
-  font-style: normal;
-  font-weight: 700;
-  src: url("./Inter/inter-v13-latin-700.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
-}
-
-/* inter-800 - latin */
-@font-face {
-  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
-  font-family: Inter;
-  font-style: normal;
-  font-weight: 800;
-  src: url("./Inter/inter-v13-latin-800.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
-}
-
-/* material-symbols-rounded-regular - latin */
-@font-face {
-  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
-  font-family: "Material Symbols Rounded";
-  font-style: normal;
-  font-weight: 400;
-  src: url("./Material-Symbols-Rounded/material-symbols-rounded-v168-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
-}
-
-.material-symbols-rounded {
-  font-family: "Material Symbols Rounded";
-  font-weight: normal;
-  font-style: normal;
-  font-size: 24px;
-  line-height: 1;
-  letter-spacing: normal;
-  text-transform: none;
-  display: inline-block;
-  white-space: nowrap;
-  word-wrap: normal;
-  direction: ltr;
-  font-feature-settings: "liga";
-  -webkit-font-smoothing: antialiased;
-}
diff --git a/packages/propel/src/styles/react-day-picker.css b/packages/propel/src/styles/react-day-picker.css
index 7373b3f9c..1a541c46c 100644
--- a/packages/propel/src/styles/react-day-picker.css
+++ b/packages/propel/src/styles/react-day-picker.css
@@ -1,311 +1,313 @@
-.rdp-root {
-  font-size: 12px;
+@layer components {
+  .rdp-root {
+    font-size: 12px;
 
-  --rdp-cell-size: 40px;
-  /* Size of the day cells. */
-  --rdp-caption-font-size: 1rem;
-  /* Font size for the caption labels. */
-  --rdp-caption-navigation-size: 1.25rem;
-  /* Font size for the caption labels. */
-  --rdp-accent-color: rgba(var(--color-primary-100));
-  /* Accent color for the background of selected days. */
-  --rdp-background-color: rgba(var(--color-primary-100), 0.5);
-  /* Background color for the hovered/focused elements. */
-  --rdp-dark-background-color: rgba(var(--color-primary-300));
-  /* Background color for the hovered/focused, already selected elements. */
-  --rdp-outline: 2px solid var(--rdp-accent-color);
-  /* Outline border for focused elements */
-  --rdp-selected-color: #ffffff;
-  /* Color of selected day text */
+    --rdp-cell-size: 40px;
+    /* Size of the day cells. */
+    --rdp-caption-font-size: 1rem;
+    /* Font size for the caption labels. */
+    --rdp-caption-navigation-size: 1.25rem;
+    /* Font size for the caption labels. */
+    --rdp-accent-color: var(--background-color-accent-primary);
+    /* Accent color for the background of selected days. */
+    --rdp-background-color: --alpha(var(--background-color-accent-primary) / 50%);
+    /* Background color for the hovered/focused elements. */
+    --rdp-dark-background-color: var(--background-color-accent-primary-hover);
+    /* Background color for the hovered/focused, already selected elements. */
+    --rdp-outline: 2px solid var(--rdp-accent-color);
+    /* Outline border for focused elements */
+    --rdp-selected-color: var(--text-color-on-color);
+    /* Color of selected day text */
 
-  background: transparent;
-}
-
-.rdp-root {
-  position: relative; /* Required to position the nav. */
-  box-sizing: border-box;
-}
-
-/* ---------- */
-/* Day Buttons */
-/* ----------- */
-
-.rdp-day_button {
-  display: flex;
-  overflow: hidden;
-  align-items: center;
-  justify-content: center;
-  box-sizing: border-box;
-  width: var(--rdp-cell-size);
-  max-width: var(--rdp-cell-size);
-  height: var(--rdp-cell-size);
-  margin: 0;
-  border: 2px solid transparent;
-  border-radius: 50%;
-}
-
-.rdp-day.rdp-outside:not(.rdp-selected) .rdp-day_button {
-  opacity: 0.5;
-}
-
-.rdp-day.rdp-disabled:not(.rdp-selected) .rdp-day_button {
-  opacity: 0.25;
-}
-
-.rdp-day:not(.rdp-disabled) .rdp-day_button {
-  cursor: pointer;
-}
-
-.rdp-day:not(.rdp-selected, .rdp-disabled) .rdp-day_button:focus-visible {
-  color: inherit;
-  background-color: var(--rdp-background-color);
-}
-
-.rdp-selected:not(.rdp-range_middle, .rdp-disabled) .rdp-day_button:focus-visible {
-  outline: var(--rdp-outline);
-  outline-offset: 2px;
-  background-color: var(--rdp-dark-background-color);
-  outline-width: thin;
-}
-
-.rdp-day:not(.rdp-disabled) .rdp-day_button:hover {
-  background-color: var(--rdp-background-color);
-}
-
-.rdp-selected .rdp-day_button {
-  background-color: var(--rdp-accent-color);
-  border-radius: 50%;
-  color: var(--rdp-selected-color);
-  z-index: 1;
-}
-
-.rdp-selected .rdp-day_button:hover:not(.rdp-disabled) {
-  background-color: var(--rdp-dark-background-color);
-}
-
-.rdp-week {
-  margin: 0;
-  padding: 0;
-}
-
-.rdp-today:not(.rdp-outside) {
-  position: relative;
-}
-
-.rdp-today:not(.rdp-outside)::after {
-  content: "";
-  position: absolute;
-  left: 50%;
-  bottom: 2px;
-  width: 0.5em;
-  height: 0.5em;
-  background-color: var(--rdp-background-color);
-  border-radius: 100%;
-  transform: translate(-50%, 0);
-}
-
-.rdp-selected .rdp-day_button:focus-visible,
-.rdp-selected .rdp-day_button:hover {
-  color: var(--rdp-selected-color);
-  opacity: 1;
-  background-color: var(--rdp-accent-color);
-}
-
-.rdp-weekday {
-  vertical-align: middle;
-  font-weight: 700;
-  text-align: center;
-  font-size: 0.75em;
-  height: var(--rdp-cell-size);
-  padding: 0;
-  text-transform: uppercase;
-}
-
-/* ---------- */
-/* Top Nav  */
-/* ---------- */
-
-.rdp-nav {
-  box-sizing: border-box;
-  position: absolute;
-  padding: inherit;
-
-  top: 1.2em;
-  right: 1em;
-
-  display: flex;
-  align-items: center;
-}
-
-.rdp-button_next,
-.rdp-button_previous {
-  border: none;
-  background: none;
-  padding: 0;
-  margin: 0;
-  cursor: pointer;
-  font: inherit;
-  -moz-appearance: none;
-  -webkit-appearance: none;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-  appearance: none;
-  width: var(--rdp-caption-navigation-size);
-  height: var(--rdp-caption-navigation-size);
-  padding: 0.25em;
-  border-radius: 2px;
-}
-
-.rdp-chevron {
-  fill: rgba(var(--color-text-200));
-  height: 0.75rem;
-  width: 0.75rem;
-}
-
-.rdp-button_next:hover,
-.rdp-button_previous:hover,
-.rdp-button_next:focus-visible,
-.rdp-button_previous:focus-visible {
-  background-color: rgba(var(--color-background-80)) !important;
-}
-
-/* ---------- */
-/* Dropdowns  */
-/* ---------- */
-
-.rdp-dropdowns {
-  position: relative;
-  /* width: 100%; */
-  display: inline-flex;
-  align-items: center;
-}
-
-.rdp-dropdown {
-  appearance: none;
-  --webkit-appearance: none;
-  --moz-appearance: none;
-  position: absolute;
-  z-index: 2;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  margin: 0;
-  padding: 0;
-  opacity: 0;
-  border: none;
-  font-family: inherit;
-  font-size: 1rem;
-  line-height: inherit;
-  cursor: pointer;
-  background: transparent;
-
-  &:hover {
-    background-color: rgba(var(--color-background-80)) !important;
-  }
-}
-
-.rdp-dropdown_root {
-  margin: 0;
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-}
-
-.rdp-months_dropdown {
-  text-transform: capitalize;
-}
-
-.rdp-dropdown[data-disabled="true"] {
-  opacity: unset;
-  color: unset;
-}
-
-.rdp-caption_label {
-  z-index: 1;
-  display: inline-flex;
-  align-items: center;
-  gap: 0.25rem;
-  margin: 0;
-  padding: 0 0.25em;
-  white-space: nowrap;
-  color: currentColor;
-  border: 0;
-  border: 2px solid transparent;
-  font-family: inherit;
-  font-size: var(--rdp-caption-font-size);
-  font-weight: 600;
-  background: transparent;
-  border-radius: 4px;
-}
-
-.rdp-dropdown:not([data-disabled="true"]) {
-  &:focus-visible + .rdp-caption_label {
-    border: var(--rdp-outline);
-    border-radius: 6px;
+    background: transparent;
   }
 
-  &:hover {
-    & + .rdp-caption_label {
-      background-color: rgba(var(--color-background-80)) !important;
+  .rdp-root {
+    position: relative; /* Required to position the nav. */
+    box-sizing: border-box;
+  }
+
+  /* ---------- */
+  /* Day Buttons */
+  /* ----------- */
+
+  .rdp-day_button {
+    display: flex;
+    overflow: hidden;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    width: var(--rdp-cell-size);
+    max-width: var(--rdp-cell-size);
+    height: var(--rdp-cell-size);
+    margin: 0;
+    border: 2px solid transparent;
+    border-radius: 50%;
+  }
+
+  .rdp-day.rdp-outside:not(.rdp-selected) .rdp-day_button {
+    opacity: 0.5;
+  }
+
+  .rdp-day.rdp-disabled:not(.rdp-selected) .rdp-day_button {
+    opacity: 0.25;
+  }
+
+  .rdp-day:not(.rdp-disabled) .rdp-day_button {
+    cursor: pointer;
+  }
+
+  .rdp-day:not(.rdp-selected, .rdp-disabled) .rdp-day_button:focus-visible {
+    color: inherit;
+    background-color: var(--rdp-background-color);
+  }
+
+  .rdp-selected:not(.rdp-range_middle, .rdp-disabled) .rdp-day_button:focus-visible {
+    outline: var(--rdp-outline);
+    outline-offset: 2px;
+    background-color: var(--rdp-dark-background-color);
+    outline-width: thin;
+  }
+
+  .rdp-day:not(.rdp-disabled) .rdp-day_button:hover {
+    background-color: var(--rdp-background-color);
+  }
+
+  .rdp-selected .rdp-day_button {
+    background-color: var(--rdp-accent-color);
+    border-radius: 50%;
+    color: var(--rdp-selected-color);
+    z-index: 1;
+  }
+
+  .rdp-selected .rdp-day_button:hover:not(.rdp-disabled) {
+    background-color: var(--rdp-dark-background-color);
+  }
+
+  .rdp-week {
+    margin: 0;
+    padding: 0;
+  }
+
+  .rdp-today:not(.rdp-outside) {
+    position: relative;
+  }
+
+  .rdp-today:not(.rdp-outside)::after {
+    content: "";
+    position: absolute;
+    left: 50%;
+    bottom: 2px;
+    width: 0.5em;
+    height: 0.5em;
+    background-color: var(--rdp-background-color);
+    border-radius: 100%;
+    transform: translate(-50%, 0);
+  }
+
+  .rdp-selected .rdp-day_button:focus-visible,
+  .rdp-selected .rdp-day_button:hover {
+    color: var(--rdp-selected-color);
+    opacity: 1;
+    background-color: var(--rdp-accent-color);
+  }
+
+  .rdp-weekday {
+    vertical-align: middle;
+    font-weight: 700;
+    text-align: center;
+    font-size: 0.75em;
+    height: var(--rdp-cell-size);
+    padding: 0;
+    text-transform: uppercase;
+  }
+
+  /* ---------- */
+  /* Top Nav  */
+  /* ---------- */
+
+  .rdp-nav {
+    box-sizing: border-box;
+    position: absolute;
+    padding: inherit;
+
+    top: 1.2em;
+    right: 1em;
+
+    display: flex;
+    align-items: center;
+  }
+
+  .rdp-button_next,
+  .rdp-button_previous {
+    border: none;
+    background: none;
+    padding: 0;
+    margin: 0;
+    cursor: pointer;
+    font: inherit;
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    appearance: none;
+    width: var(--rdp-caption-navigation-size);
+    height: var(--rdp-caption-navigation-size);
+    padding: 0.25em;
+    border-radius: 2px;
+  }
+
+  .rdp-chevron {
+    @apply fill-secondary;
+    height: 0.75rem;
+    width: 0.75rem;
+  }
+
+  .rdp-button_next:hover,
+  .rdp-button_previous:hover,
+  .rdp-button_next:focus-visible,
+  .rdp-button_previous:focus-visible {
+    @apply bg-layer-transparent-hover!;
+  }
+
+  /* ---------- */
+  /* Dropdowns  */
+  /* ---------- */
+
+  .rdp-dropdowns {
+    position: relative;
+    /* width: 100%; */
+    display: inline-flex;
+    align-items: center;
+  }
+
+  .rdp-dropdown {
+    appearance: none;
+    --webkit-appearance: none;
+    --moz-appearance: none;
+    position: absolute;
+    z-index: 2;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    margin: 0;
+    padding: 0;
+    opacity: 0;
+    border: none;
+    font-family: inherit;
+    font-size: 1rem;
+    line-height: inherit;
+    cursor: pointer;
+    background: transparent;
+
+    &:hover {
+      @apply bg-layer-transparent-hover!;
     }
   }
-}
 
-.rdp-dropdown_icon {
-  margin: 0 0 0 5px;
-}
+  .rdp-dropdown_root {
+    margin: 0;
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+  }
 
-/* --------------- */
-/* Range selection */
-/* --------------- */
+  .rdp-months_dropdown {
+    text-transform: capitalize;
+  }
 
-.rdp-range_start,
-.rdp-range_middle,
-.rdp-range_end {
-  position: relative;
-}
+  .rdp-dropdown[data-disabled="true"] {
+    opacity: unset;
+    color: unset;
+  }
 
-.rdp-range_start::before,
-.rdp-range_middle::before,
-.rdp-range_end::before {
-  content: "";
-  position: absolute;
-  background-color: var(--rdp-background-color);
-  top: 50%;
-  height: 100%;
-  width: 50%;
-  transform: translate(0, -50%);
-  z-index: -1;
-}
+  .rdp-caption_label {
+    z-index: 1;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+    margin: 0;
+    padding: 0 0.25em;
+    white-space: nowrap;
+    color: currentColor;
+    border: 0;
+    border: 2px solid transparent;
+    font-family: inherit;
+    font-size: var(--rdp-caption-font-size);
+    font-weight: 600;
+    background: transparent;
+    border-radius: 4px;
+  }
 
-.rdp-range_start::before {
-  left: 50%;
-}
+  .rdp-dropdown:not([data-disabled="true"]) {
+    &:focus-visible + .rdp-caption_label {
+      border: var(--rdp-outline);
+      border-radius: 6px;
+    }
 
-.rdp-range_middle::before {
-  left: 50%;
-  width: 100%;
-  transform: translate(-50%, -50%);
-}
+    &:hover {
+      & + .rdp-caption_label {
+        @apply bg-layer-transparent-hover!;
+      }
+    }
+  }
 
-.rdp-range_end::before {
-  right: 50%;
-}
+  .rdp-dropdown_icon {
+    margin: 0 0 0 5px;
+  }
 
-.rdp-range_start.rdp-range_end::before {
-  display: none;
-}
+  /* --------------- */
+  /* Range selection */
+  /* --------------- */
 
-.rdp-range_middle .rdp-day_button {
-  background-color: transparent;
-  color: inherit;
-}
+  .rdp-range_start,
+  .rdp-range_middle,
+  .rdp-range_end {
+    position: relative;
+  }
 
-.rdp-day.rdp-range_middle .rdp-day_button:hover,
-.rdp-day.rdp-range_middle .rdp-day_button:focus-visible {
-  background-color: var(--rdp-background-color);
-  color: inherit;
+  .rdp-range_start::before,
+  .rdp-range_middle::before,
+  .rdp-range_end::before {
+    content: "";
+    position: absolute;
+    background-color: var(--rdp-background-color);
+    top: 50%;
+    height: 100%;
+    width: 50%;
+    transform: translate(0, -50%);
+    z-index: -1;
+  }
+
+  .rdp-range_start::before {
+    left: 50%;
+  }
+
+  .rdp-range_middle::before {
+    left: 50%;
+    width: 100%;
+    transform: translate(-50%, -50%);
+  }
+
+  .rdp-range_end::before {
+    right: 50%;
+  }
+
+  .rdp-range_start.rdp-range_end::before {
+    display: none;
+  }
+
+  .rdp-range_middle .rdp-day_button {
+    background-color: transparent;
+    color: inherit;
+  }
+
+  .rdp-day.rdp-range_middle .rdp-day_button:hover,
+  .rdp-day.rdp-range_middle .rdp-day_button:focus-visible {
+    background-color: var(--rdp-background-color);
+    color: inherit;
+  }
 }
diff --git a/packages/propel/src/switch/index.ts b/packages/propel/src/switch/index.ts
index 1efe34c51..d98033459 100644
--- a/packages/propel/src/switch/index.ts
+++ b/packages/propel/src/switch/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./root";
diff --git a/packages/propel/src/switch/root.tsx b/packages/propel/src/switch/root.tsx
index c83dec4d5..0c3e87c27 100644
--- a/packages/propel/src/switch/root.tsx
+++ b/packages/propel/src/switch/root.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 import { Switch as BaseSwitch } from "@base-ui-components/react/switch";
 import { cn } from "../utils/classname";
@@ -19,15 +25,15 @@ function Switch({ value, onChange, label, size = "sm", disabled, className }: IT
       onCheckedChange={onChange}
       aria-label={label}
       className={cn(
-        "relative inline-flex flex-shrink-0 cursor-pointer rounded-full border border-custom-border-200 transition-colors duration-200 ease-in-out focus:outline-none",
+        "relative inline-flex flex-shrink-0 cursor-pointer rounded-full border border-subtle transition-colors duration-200 ease-in-out focus:outline-none",
         // size
         size === "sm" ? "h-4 w-6" : size === "md" ? "h-5 w-8" : "h-6 w-10",
         // state
         disabled
-          ? "cursor-not-allowed bg-custom-background-80"
+          ? "cursor-not-allowed bg-layer-1"
           : value
-            ? "cursor-pointer bg-custom-primary-100"
-            : "cursor-pointer bg-custom-background-90",
+            ? "cursor-pointer bg-accent-primary"
+            : "cursor-pointer bg-surface-2",
         className
       )}
     >
@@ -35,7 +41,7 @@ function Switch({ value, onChange, label, size = "sm", disabled, className }: IT
       <BaseSwitch.Thumb
         aria-hidden="true"
         className={cn(
-          "inline-block self-center rounded-full shadow ring-0 transition-transform duration-200 ease-in-out",
+          "shadow inline-block self-center rounded-full ring-0 transition-transform duration-200 ease-in-out",
           // size
           size === "sm" ? "h-3 w-3" : size === "md" ? "h-4 w-4" : "h-5 w-5",
           // position + color by state
@@ -45,9 +51,9 @@ function Switch({ value, onChange, label, size = "sm", disabled, className }: IT
               : size === "md"
                 ? "translate-x-4 bg-white"
                 : "translate-x-5 bg-white"
-            : "translate-x-0.5 bg-custom-background-90",
+            : "translate-x-0.5 bg-surface-2",
           // disabled
-          disabled && "cursor-not-allowed bg-custom-background-90"
+          disabled && "cursor-not-allowed bg-surface-2"
         )}
       />
     </BaseSwitch.Root>
diff --git a/packages/propel/src/switch/switch.stories.tsx b/packages/propel/src/switch/switch.stories.tsx
index c9e12b1cf..3e41d6e7d 100644
--- a/packages/propel/src/switch/switch.stories.tsx
+++ b/packages/propel/src/switch/switch.stories.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useState } from "react";
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { useArgs } from "storybook/preview-api";
@@ -33,7 +39,7 @@ export const WithLabel: Story = {
     return (
       <div className="flex items-center gap-2">
         <Switch {...args} value={value} onChange={setValue} label="Enable notifications" />
-        <label className="text-sm">Enable notifications</label>
+        <label className="text-13">Enable notifications</label>
       </div>
     );
   },
@@ -69,15 +75,15 @@ export const AllSizes: Story = {
       <div className="flex items-center gap-6">
         <div className="text-center">
           <Switch value={small} onChange={setSmall} size="sm" />
-          <p className="mt-2 text-xs text-gray-600">Small</p>
+          <p className="text-gray-600 mt-2 text-11">Small</p>
         </div>
         <div className="text-center">
           <Switch value={medium} onChange={setMedium} size="md" />
-          <p className="mt-2 text-xs text-gray-600">Medium</p>
+          <p className="text-gray-600 mt-2 text-11">Medium</p>
         </div>
         <div className="text-center">
           <Switch value={large} onChange={setLarge} size="lg" />
-          <p className="mt-2 text-xs text-gray-600">Large</p>
+          <p className="text-gray-600 mt-2 text-11">Large</p>
         </div>
       </div>
     );
@@ -95,19 +101,19 @@ export const AllStates: Story = {
       <div className="space-y-4">
         <div className="flex items-center gap-4">
           <Switch value={unchecked} onChange={setUnchecked} />
-          <span className="text-sm text-gray-600">Unchecked</span>
+          <span className="text-gray-600 text-13">Unchecked</span>
         </div>
         <div className="flex items-center gap-4">
           <Switch value={checked} onChange={setChecked} />
-          <span className="text-sm text-gray-600">Checked</span>
+          <span className="text-gray-600 text-13">Checked</span>
         </div>
         <div className="flex items-center gap-4">
           <Switch value={disabledUnchecked} onChange={() => {}} disabled />
-          <span className="text-sm text-gray-600">Disabled Unchecked</span>
+          <span className="text-gray-600 text-13">Disabled Unchecked</span>
         </div>
         <div className="flex items-center gap-4">
           <Switch value={disabledChecked} onChange={() => {}} disabled />
-          <span className="text-sm text-gray-600">Disabled Checked</span>
+          <span className="text-gray-600 text-13">Disabled Checked</span>
         </div>
       </div>
     );
@@ -121,27 +127,27 @@ export const InForm: Story = {
     const [updates, setUpdates] = useState(true);
 
     return (
-      <div className="w-80 rounded-lg border border-gray-200 bg-white p-6 shadow-md">
-        <h3 className="text-lg font-semibold">Notification Settings</h3>
+      <div className="border-gray-200 shadow-md w-80 rounded-lg border bg-white p-6">
+        <h3 className="text-16 font-semibold">Notification Settings</h3>
         <div className="mt-4 space-y-4">
           <div className="flex items-center justify-between">
             <div>
-              <p className="text-sm font-medium">Push Notifications</p>
-              <p className="text-xs text-gray-500">Receive push notifications on your device</p>
+              <p className="text-13 font-medium">Push Notifications</p>
+              <p className="text-gray-500 text-11">Receive push notifications on your device</p>
             </div>
             <Switch value={notifications} onChange={setNotifications} size="md" />
           </div>
           <div className="flex items-center justify-between">
             <div>
-              <p className="text-sm font-medium">Marketing Emails</p>
-              <p className="text-xs text-gray-500">Receive emails about new features</p>
+              <p className="text-13 font-medium">Marketing Emails</p>
+              <p className="text-gray-500 text-11">Receive emails about new features</p>
             </div>
             <Switch value={marketing} onChange={setMarketing} size="md" />
           </div>
           <div className="flex items-center justify-between">
             <div>
-              <p className="text-sm font-medium">Product Updates</p>
-              <p className="text-xs text-gray-500">Get notified about product updates</p>
+              <p className="text-13 font-medium">Product Updates</p>
+              <p className="text-gray-500 text-11">Get notified about product updates</p>
             </div>
             <Switch value={updates} onChange={setUpdates} size="md" />
           </div>
@@ -156,11 +162,11 @@ export const WithDescription: Story = {
     const [enabled, setEnabled] = useState(false);
 
     return (
-      <div className="w-96 rounded-lg border border-gray-200 bg-white p-6">
+      <div className="border-gray-200 w-96 rounded-lg border bg-white p-6">
         <div className="flex items-start justify-between">
           <div className="flex-1">
-            <h4 className="text-sm font-semibold">Enable Two-Factor Authentication</h4>
-            <p className="mt-1 text-xs text-gray-500">
+            <h4 className="text-13 font-semibold">Enable Two-Factor Authentication</h4>
+            <p className="text-gray-500 mt-1 text-11">
               Add an extra layer of security to your account by enabling two-factor authentication.
             </p>
           </div>
@@ -176,16 +182,16 @@ export const Interactive: Story = {
     const [enabled, setEnabled] = useState(false);
 
     return (
-      <div className="w-80 space-y-4 rounded-lg border border-gray-200 bg-white p-6">
+      <div className="border-gray-200 w-80 space-y-4 rounded-lg border bg-white p-6">
         <div className="flex items-center justify-between">
-          <span className="text-sm font-medium">Feature Toggle</span>
+          <span className="text-13 font-medium">Feature Toggle</span>
           <Switch value={enabled} onChange={setEnabled} size="md" />
         </div>
-        <div className="rounded bg-gray-50 p-4">
-          <p className="text-sm text-gray-700">
+        <div className="bg-gray-50 rounded-sm p-4">
+          <p className="text-gray-700 text-13">
             Status: <span className="font-semibold">{enabled ? "Enabled" : "Disabled"}</span>
           </p>
-          {enabled && <p className="mt-2 text-xs text-green-600">Feature is now active and ready to use!</p>}
+          {enabled && <p className="mt-2 text-11 text-success-primary">Feature is now active and ready to use!</p>}
         </div>
       </div>
     );
@@ -202,9 +208,9 @@ export const CustomStyles: Story = {
           value={value}
           onChange={setValue}
           size="lg"
-          className="border-2 border-purple-300 data-[state=checked]:bg-purple-500"
+          className="border-purple-300 data-[state=checked]:bg-purple-500 border-2"
         />
-        <span className="text-sm">Custom styled switch</span>
+        <span className="text-13">Custom styled switch</span>
       </div>
     );
   },
@@ -225,12 +231,12 @@ export const MultipleControls: Story = {
     };
 
     return (
-      <div className="w-96 rounded-lg border border-gray-200 bg-white p-6">
-        <h3 className="mb-4 text-lg font-semibold">Feature Flags</h3>
+      <div className="border-gray-200 w-96 rounded-lg border bg-white p-6">
+        <h3 className="mb-4 text-16 font-semibold">Feature Flags</h3>
         <div className="space-y-3">
           {Object.entries(settings).map(([key, value]) => (
             <div key={key} className="flex items-center justify-between">
-              <span className="text-sm capitalize">{key.replace(/([A-Z])/g, " $1").trim()}</span>
+              <span className="text-13 capitalize">{key.replace(/([A-Z])/g, " $1").trim()}</span>
               <Switch value={value} onChange={() => toggleSetting(key as keyof typeof settings)} size="sm" />
             </div>
           ))}
diff --git a/packages/propel/src/tab-navigation/index.ts b/packages/propel/src/tab-navigation/index.ts
index 4dcc80d10..4229ac232 100644
--- a/packages/propel/src/tab-navigation/index.ts
+++ b/packages/propel/src/tab-navigation/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export { TabNavigationItem } from "./tab-navigation-item";
 export { TabNavigationList } from "./tab-navigation-list";
 export type { TTabNavigationItemProps, TTabNavigationListProps } from "./tab-navigation-types";
diff --git a/packages/propel/src/tab-navigation/tab-navigation-item.tsx b/packages/propel/src/tab-navigation/tab-navigation-item.tsx
index 640d0a0c5..0980be8a9 100644
--- a/packages/propel/src/tab-navigation/tab-navigation-item.tsx
+++ b/packages/propel/src/tab-navigation/tab-navigation-item.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { motion, AnimatePresence } from "framer-motion";
 import { cn } from "../utils";
 import type { TTabNavigationItemProps } from "./tab-navigation-types";
@@ -7,15 +12,15 @@ export function TabNavigationItem({ children, isActive, className }: TTabNavigat
   return (
     <div
       className={cn(
-        "relative flex items-center gap-2 rounded-md px-2 py-1.5 text-sm font-medium transition-colors z-10",
-        isActive ? "text-custom-text-100" : "text-custom-text-200 hover:text-custom-text-100",
+        "relative z-10 flex items-center gap-2 rounded-md px-2 py-1.5 text-13 font-medium transition-colors",
+        isActive ? "text-primary" : "text-secondary hover:bg-layer-transparent-hover hover:text-primary",
         className
       )}
     >
       <AnimatePresence>
         {isActive && (
           <motion.div
-            className="absolute inset-0 bg-custom-background-90 rounded-md -z-10"
+            className="absolute inset-0 -z-10 rounded-md bg-layer-transparent-active"
             initial={{ opacity: 0, scale: 0.9 }}
             animate={{ opacity: 1, scale: 1 }}
             exit={{ opacity: 0, scale: 0.9 }}
diff --git a/packages/propel/src/tab-navigation/tab-navigation-list.tsx b/packages/propel/src/tab-navigation/tab-navigation-list.tsx
index c57239477..d4a7c98f0 100644
--- a/packages/propel/src/tab-navigation/tab-navigation-list.tsx
+++ b/packages/propel/src/tab-navigation/tab-navigation-list.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { LayoutGroup } from "framer-motion";
 import { cn } from "../utils";
 import type { TTabNavigationListProps } from "./tab-navigation-types";
diff --git a/packages/propel/src/tab-navigation/tab-navigation-types.ts b/packages/propel/src/tab-navigation/tab-navigation-types.ts
index 211612324..4cfce16e9 100644
--- a/packages/propel/src/tab-navigation/tab-navigation-types.ts
+++ b/packages/propel/src/tab-navigation/tab-navigation-types.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { ReactNode } from "react";
 
 export type TTabNavigationItemProps = {
diff --git a/packages/propel/src/tab-navigation/tab-navigation.stories.tsx b/packages/propel/src/tab-navigation/tab-navigation.stories.tsx
index e736ec9a5..076e341df 100644
--- a/packages/propel/src/tab-navigation/tab-navigation.stories.tsx
+++ b/packages/propel/src/tab-navigation/tab-navigation.stories.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useState } from "react";
 import type { Meta, StoryObj } from "@storybook/react-vite";
 // icons import
@@ -20,7 +26,7 @@ const meta: Meta<typeof TabNavigationList> = {
   },
   decorators: [
     (Story) => (
-      <div className="w-[900px] p-8 bg-custom-background-100">
+      <div className="w-[900px] bg-surface-1 p-8">
         <Story />
       </div>
     ),
@@ -49,7 +55,7 @@ export const Default: Story = {
       <div className="space-y-8">
         {/* Example 1: Navigation with anchor tags (simulating React Router Link) */}
         <div className="space-y-3">
-          <div className="text-xs font-medium text-custom-text-300 uppercase tracking-wide">
+          <div className="text-11 font-medium tracking-wide text-tertiary uppercase">
             With Navigation Links (e.g., React Router)
           </div>
           <TabNavigationList>
@@ -63,7 +69,7 @@ export const Default: Story = {
                 }}
               >
                 <TabNavigationItem isActive={activeNavTab === item.key}>
-                  <div className="flex items-center gap-2 z-10">
+                  <div className="z-10 flex items-center gap-2">
                     <item.icon className="h-4 w-4" />
                     <span>{item.name}</span>
                   </div>
@@ -71,15 +77,15 @@ export const Default: Story = {
               </a>
             ))}
           </TabNavigationList>
-          <div className="text-xs text-custom-text-300">
-            Active: <span className="font-mono text-custom-text-100">{activeNavTab}</span>
+          <div className="text-11 text-tertiary">
+            Active: <span className="font-mono text-primary">{activeNavTab}</span>
           </div>
         </div>
 
         {/* Code example */}
-        <div className="mt-6 p-4 bg-custom-background-80 rounded-md">
-          <div className="text-xs font-medium text-custom-text-200 mb-2">Example Code:</div>
-          <pre className="text-xs text-custom-text-300 overflow-x-auto">
+        <div className="mt-6 rounded-md bg-layer-1 p-4">
+          <div className="mb-2 text-11 font-medium text-secondary">Example Code:</div>
+          <pre className="overflow-x-auto text-11 text-tertiary">
             {`// With React Router Link
 <TabNavigationList>
   {items.map(item => (
diff --git a/packages/propel/src/table/core.tsx b/packages/propel/src/table/core.tsx
index d3492f010..e13dfb14f 100644
--- a/packages/propel/src/table/core.tsx
+++ b/packages/propel/src/table/core.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 
 import { cn } from "../utils/classname";
@@ -8,7 +14,7 @@ const Table = React.forwardRef(function Table(
 ) {
   return (
     <div className="relative w-full overflow-auto">
-      <table ref={ref} className={cn("w-full caption-bottom text-sm", className)} {...props} />
+      <table ref={ref} className={cn("w-full caption-bottom text-13", className)} {...props} />
     </div>
   );
 });
@@ -18,13 +24,7 @@ const TableHeader = React.forwardRef(function TableHeader(
   { className, ...props }: React.ComponentPropsWithoutRef<"thead">,
   ref: React.ForwardedRef<React.ComponentRef<"thead">>
 ) {
-  return (
-    <thead
-      ref={ref}
-      className={cn("bg-custom-background-80 py-4 border-y border-custom-border-200", className)}
-      {...props}
-    />
-  );
+  return <thead ref={ref} className={cn("border-y border-subtle bg-layer-1 py-4", className)} {...props} />;
 });
 TableHeader.displayName = "TableHeader";
 
@@ -40,7 +40,7 @@ const TableFooter = React.forwardRef(function TableFooter(
   { className, ...props }: React.ComponentPropsWithoutRef<"tfoot">,
   ref: React.ForwardedRef<React.ComponentRef<"tfoot">>
 ) {
-  return <tfoot ref={ref} className={cn("bg-custom-background-300 font-medium", className)} {...props} />;
+  return <tfoot ref={ref} className={cn("bg-layer-1 font-medium", className)} {...props} />;
 });
 TableFooter.displayName = "TableFooter";
 
@@ -48,13 +48,7 @@ const TableRow = React.forwardRef(function TableRow(
   { className, ...props }: React.ComponentPropsWithoutRef<"tr">,
   ref: React.ForwardedRef<React.ComponentRef<"tr">>
 ) {
-  return (
-    <tr
-      ref={ref}
-      className={cn("transition-colors data-[state=selected]:bg-custom-background-100", className)}
-      {...props}
-    />
-  );
+  return <tr ref={ref} className={cn("transition-colors data-[state=selected]:bg-surface-1", className)} {...props} />;
 });
 TableRow.displayName = "TableRow";
 
@@ -66,7 +60,7 @@ const TableHead = React.forwardRef(function TableHead(
     <th
       ref={ref}
       className={cn(
-        "h-10 px-2 text-left align-middle font-medium text-custom-text-300 [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        "h-10 px-2 text-left align-middle font-medium text-tertiary [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
         className
       )}
       {...props}
@@ -93,7 +87,7 @@ const TableCaption = React.forwardRef(function TableCaption(
   { className, ...props }: React.ComponentPropsWithoutRef<"caption">,
   ref: React.ForwardedRef<React.ComponentRef<"caption">>
 ) {
-  return <caption ref={ref} className={cn("mt-4 text-sm text-custom-text-300", className)} {...props} />;
+  return <caption ref={ref} className={cn("mt-4 text-13 text-tertiary", className)} {...props} />;
 });
 TableCaption.displayName = "TableCaption";
 
diff --git a/packages/propel/src/table/index.ts b/packages/propel/src/table/index.ts
index 8d119dee8..bcdcb87a1 100644
--- a/packages/propel/src/table/index.ts
+++ b/packages/propel/src/table/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./core";
diff --git a/packages/propel/src/table/table.stories.tsx b/packages/propel/src/table/table.stories.tsx
index c38edcef1..5aa46c50e 100644
--- a/packages/propel/src/table/table.stories.tsx
+++ b/packages/propel/src/table/table.stories.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption } from "./core";
 
@@ -138,8 +144,8 @@ export const WithActions: Story = {
             <TableCell>john@example.com</TableCell>
             <TableCell>Admin</TableCell>
             <TableCell className="text-right">
-              <button className="mr-2 text-blue-500 hover:underline">Edit</button>
-              <button className="text-red-500 hover:underline">Delete</button>
+              <button className="text-blue-500 mr-2 hover:underline">Edit</button>
+              <button className="text-danger-primary hover:underline">Delete</button>
             </TableCell>
           </TableRow>
           <TableRow>
@@ -147,8 +153,8 @@ export const WithActions: Story = {
             <TableCell>jane@example.com</TableCell>
             <TableCell>User</TableCell>
             <TableCell className="text-right">
-              <button className="mr-2 text-blue-500 hover:underline">Edit</button>
-              <button className="text-red-500 hover:underline">Delete</button>
+              <button className="text-blue-500 mr-2 hover:underline">Edit</button>
+              <button className="text-danger-primary hover:underline">Delete</button>
             </TableCell>
           </TableRow>
         </TableBody>
@@ -173,30 +179,30 @@ export const WithBadges: Story = {
           <TableRow>
             <TableCell>Website Redesign</TableCell>
             <TableCell>
-              <span className="rounded-full bg-green-100 px-2 py-1 text-xs text-green-800">In Progress</span>
+              <span className="bg-green-100 rounded-full px-2 py-1 text-11 text-success-primary">In Progress</span>
             </TableCell>
             <TableCell>
-              <span className="rounded-full bg-red-100 px-2 py-1 text-xs text-red-800">High</span>
+              <span className="bg-red-100 rounded-full px-2 py-1 text-11 text-danger-primary">High</span>
             </TableCell>
             <TableCell>John Doe</TableCell>
           </TableRow>
           <TableRow>
             <TableCell>Mobile App</TableCell>
             <TableCell>
-              <span className="rounded-full bg-blue-100 px-2 py-1 text-xs text-blue-800">Planned</span>
+              <span className="bg-blue-100 text-blue-800 rounded-full px-2 py-1 text-11">Planned</span>
             </TableCell>
             <TableCell>
-              <span className="rounded-full bg-yellow-100 px-2 py-1 text-xs text-yellow-800">Medium</span>
+              <span className="bg-yellow-100 text-yellow-800 rounded-full px-2 py-1 text-11">Medium</span>
             </TableCell>
             <TableCell>Jane Smith</TableCell>
           </TableRow>
           <TableRow>
             <TableCell>API Integration</TableCell>
             <TableCell>
-              <span className="rounded-full bg-gray-100 px-2 py-1 text-xs text-gray-800">Completed</span>
+              <span className="bg-gray-100 text-gray-800 rounded-full px-2 py-1 text-11">Completed</span>
             </TableCell>
             <TableCell>
-              <span className="rounded-full bg-green-100 px-2 py-1 text-xs text-green-800">Low</span>
+              <span className="bg-green-100 rounded-full px-2 py-1 text-11 text-success-primary">Low</span>
             </TableCell>
             <TableCell>Bob Wilson</TableCell>
           </TableRow>
@@ -296,8 +302,8 @@ export const LargeDataset: Story = {
               <TableCell>{["Engineering", "Sales", "Marketing", "Support"][i % 4]}</TableCell>
               <TableCell>
                 <span
-                  className={`rounded-full px-2 py-1 text-xs ${
-                    i % 2 === 0 ? "bg-green-100 text-green-800" : "bg-gray-100 text-gray-800"
+                  className={`rounded-full px-2 py-1 text-11 ${
+                    i % 2 === 0 ? "bg-green-100 text-success-primary" : "bg-gray-100 text-gray-800"
                   }`}
                 >
                   {i % 2 === 0 ? "Active" : "Inactive"}
@@ -314,7 +320,7 @@ export const LargeDataset: Story = {
 export const CustomStyling: Story = {
   render() {
     return (
-      <Table className="border-2 border-blue-200">
+      <Table className="border-blue-200 border-2">
         <TableHeader>
           <TableRow className="bg-blue-100">
             <TableHead className="text-blue-900">Name</TableHead>
diff --git a/packages/propel/src/tabs/index.ts b/packages/propel/src/tabs/index.ts
index 811d3d4a7..897436907 100644
--- a/packages/propel/src/tabs/index.ts
+++ b/packages/propel/src/tabs/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./tabs";
diff --git a/packages/propel/src/tabs/tabs.stories.tsx b/packages/propel/src/tabs/tabs.stories.tsx
index a0a5614fb..434221b9e 100644
--- a/packages/propel/src/tabs/tabs.stories.tsx
+++ b/packages/propel/src/tabs/tabs.stories.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useState } from "react";
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { Settings, User, Bell } from "lucide-react";
@@ -51,9 +57,9 @@ export const Basic: Story = {
           </Tabs.List>
           {tabOptions.map((option) => (
             <Tabs.Content key={option.value} value={option.value} className="p-4">
-              <div className="text-sm">
-                <h3 className="font-medium mb-2">{option.label}</h3>
-                <p className="text-custom-text-300">Content for the {option.label.toLowerCase()} tab.</p>
+              <div className="text-13">
+                <h3 className="mb-2 font-medium">{option.label}</h3>
+                <p className="text-tertiary">Content for the {option.label.toLowerCase()} tab.</p>
               </div>
             </Tabs.Content>
           ))}
@@ -72,10 +78,10 @@ export const Sizes: Story = {
       lg: "Large",
     };
     return (
-      <div className="w-[400px] grid gap-4">
+      <div className="grid w-[400px] gap-4">
         {sizes.map((size) => (
           <div key={size} className="flex flex-col gap-2">
-            <div className="text-sm font-medium">{sizeLabels[size]}</div>
+            <div className="text-13 font-medium">{sizeLabels[size]}</div>
             <Tabs defaultValue={defaultValue}>
               <Tabs.List>
                 {tabOptions.map((option) => (
@@ -99,7 +105,7 @@ export const Controlled: Story = {
 
     return (
       <div className="w-[400px]">
-        <div className="mb-4 text-sm">
+        <div className="mb-4 text-13">
           Active tab: <span className="font-medium">{activeTab}</span>
         </div>
         <Tabs value={activeTab} onValueChange={(value) => value && setActiveTab(value)}>
@@ -113,7 +119,7 @@ export const Controlled: Story = {
           </Tabs.List>
           {tabOptions.map((option) => (
             <Tabs.Content key={option.value} value={option.value} className="p-4">
-              <div className="text-sm">Content for {option.label}</div>
+              <div className="text-13">Content for {option.label}</div>
             </Tabs.Content>
           ))}
         </Tabs>
@@ -136,13 +142,13 @@ export const DisabledTab: Story = {
             <Tabs.Indicator />
           </Tabs.List>
           <Tabs.Content value="account" className="p-4">
-            <div className="text-sm">Account content</div>
+            <div className="text-13">Account content</div>
           </Tabs.Content>
           <Tabs.Content value="password" className="p-4">
-            <div className="text-sm">Password content (disabled)</div>
+            <div className="text-13">Password content (disabled)</div>
           </Tabs.Content>
           <Tabs.Content value="notifications" className="p-4">
-            <div className="text-sm">Notifications content</div>
+            <div className="text-13">Notifications content</div>
           </Tabs.Content>
         </Tabs>
       </div>
@@ -165,7 +171,7 @@ export const WithIcons: Story = {
           <Tabs.List>
             {tabsWithIcons.map((tab) => (
               <Tabs.Trigger key={tab.value} value={tab.value}>
-                <tab.icon className="w-4 h-4 mr-2" />
+                <tab.icon className="mr-2 h-4 w-4" />
                 {tab.label}
               </Tabs.Trigger>
             ))}
@@ -173,7 +179,7 @@ export const WithIcons: Story = {
           </Tabs.List>
           {tabsWithIcons.map((tab) => (
             <Tabs.Content key={tab.value} value={tab.value} className="p-4">
-              <div className="text-sm">Content for {tab.label}</div>
+              <div className="text-13">Content for {tab.label}</div>
             </Tabs.Content>
           ))}
         </Tabs>
@@ -197,14 +203,14 @@ export const IconsOnly: Story = {
           <Tabs.List>
             {iconTabs.map((tab) => (
               <Tabs.Trigger key={tab.value} value={tab.value}>
-                <tab.icon className="w-4 h-4" />
+                <tab.icon className="h-4 w-4" />
               </Tabs.Trigger>
             ))}
             <Tabs.Indicator />
           </Tabs.List>
           {iconTabs.map((tab) => (
             <Tabs.Content key={tab.value} value={tab.value} className="p-4">
-              <div className="text-sm">Content for {tab.value}</div>
+              <div className="text-13">Content for {tab.value}</div>
             </Tabs.Content>
           ))}
         </Tabs>
@@ -237,10 +243,7 @@ export const DynamicTabs: Story = {
     return (
       <div className="w-[500px]">
         <div className="mb-4">
-          <button
-            onClick={addTab}
-            className="px-3 py-1.5 text-sm bg-custom-background-80 rounded hover:bg-custom-background-90"
-          >
+          <button onClick={addTab} className="rounded-sm bg-layer-1 px-3 py-1.5 text-13 hover:bg-surface-2">
             Add Tab
           </button>
         </div>
@@ -255,7 +258,7 @@ export const DynamicTabs: Story = {
                       e.stopPropagation();
                       removeTab(tab.value);
                     }}
-                    className="ml-2 hover:text-red-500"
+                    className="ml-2 hover:text-danger-primary"
                   >
                     ×
                   </button>
@@ -266,7 +269,7 @@ export const DynamicTabs: Story = {
           </Tabs.List>
           {tabs.map((tab) => (
             <Tabs.Content key={tab.value} value={tab.value} className="p-4">
-              <div className="text-sm">Content for {tab.label}</div>
+              <div className="text-13">Content for {tab.label}</div>
             </Tabs.Content>
           ))}
         </Tabs>
@@ -294,7 +297,7 @@ export const FullWidth: Story = {
           </Tabs.List>
           {tabOptions.map((option) => (
             <Tabs.Content key={option.value} value={option.value} className="p-4">
-              <div className="text-sm">Content for {option.label}</div>
+              <div className="text-13">Content for {option.label}</div>
             </Tabs.Content>
           ))}
         </Tabs>
@@ -319,35 +322,35 @@ export const WithComplexContent: Story = {
           <Tabs.Content value="account" className="p-4">
             <div className="space-y-4">
               <div>
-                <label className="text-sm font-medium">Username</label>
-                <input type="text" className="mt-1 w-full px-3 py-2 bg-custom-background-80 rounded" />
+                <label className="text-13 font-medium">Username</label>
+                <input type="text" className="mt-1 w-full rounded-sm bg-layer-1 px-3 py-2" />
               </div>
               <div>
-                <label className="text-sm font-medium">Email</label>
-                <input type="email" className="mt-1 w-full px-3 py-2 bg-custom-background-80 rounded" />
+                <label className="text-13 font-medium">Email</label>
+                <input type="email" className="mt-1 w-full rounded-sm bg-layer-1 px-3 py-2" />
               </div>
             </div>
           </Tabs.Content>
           <Tabs.Content value="password" className="p-4">
             <div className="space-y-4">
               <div>
-                <label className="text-sm font-medium">Current Password</label>
-                <input type="password" className="mt-1 w-full px-3 py-2 bg-custom-background-80 rounded" />
+                <label className="text-13 font-medium">Current Password</label>
+                <input type="password" className="mt-1 w-full rounded-sm bg-layer-1 px-3 py-2" />
               </div>
               <div>
-                <label className="text-sm font-medium">New Password</label>
-                <input type="password" className="mt-1 w-full px-3 py-2 bg-custom-background-80 rounded" />
+                <label className="text-13 font-medium">New Password</label>
+                <input type="password" className="mt-1 w-full rounded-sm bg-layer-1 px-3 py-2" />
               </div>
             </div>
           </Tabs.Content>
           <Tabs.Content value="notifications" className="p-4">
             <div className="space-y-3">
               <div className="flex items-center justify-between">
-                <span className="text-sm">Email notifications</span>
+                <span className="text-13">Email notifications</span>
                 <input type="checkbox" />
               </div>
               <div className="flex items-center justify-between">
-                <span className="text-sm">Push notifications</span>
+                <span className="text-13">Push notifications</span>
                 <input type="checkbox" />
               </div>
             </div>
diff --git a/packages/propel/src/tabs/tabs.tsx b/packages/propel/src/tabs/tabs.tsx
index c86be241f..56c55a987 100644
--- a/packages/propel/src/tabs/tabs.tsx
+++ b/packages/propel/src/tabs/tabs.tsx
@@ -1,17 +1,36 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 import { Tabs as TabsPrimitive } from "@base-ui-components/react/tabs";
 import { cn } from "../utils/classname";
 
+type TabsVariant = "contained";
+
+type TabsContextType = {
+  variant?: TabsVariant;
+};
+
+const TabsContext = React.createContext<TabsContextType | undefined>(undefined);
+
 type TabsCompound = React.ForwardRefExoticComponent<
-  React.ComponentProps<typeof TabsPrimitive.Root> & React.RefAttributes<React.ElementRef<typeof TabsPrimitive.Root>>
+  React.ComponentProps<typeof TabsPrimitive.Root> & {
+    variant?: TabsVariant;
+  } & React.RefAttributes<React.ElementRef<typeof TabsPrimitive.Root>>
 > & {
   List: React.ForwardRefExoticComponent<
-    React.ComponentProps<typeof TabsPrimitive.List> & React.RefAttributes<React.ElementRef<typeof TabsPrimitive.List>>
+    React.ComponentProps<typeof TabsPrimitive.List> & {
+      background?: TabsVariant;
+    } & React.RefAttributes<React.ElementRef<typeof TabsPrimitive.List>>
   >;
   Trigger: React.ForwardRefExoticComponent<
-    React.ComponentProps<typeof TabsPrimitive.Tab> & { size?: "sm" | "md" | "lg" } & React.RefAttributes<
-        React.ElementRef<typeof TabsPrimitive.Tab>
-      >
+    React.ComponentProps<typeof TabsPrimitive.Tab> & {
+      size?: "sm" | "md" | "lg";
+      variant?: TabsVariant;
+    } & React.RefAttributes<React.ElementRef<typeof TabsPrimitive.Tab>>
   >;
   Content: React.ForwardRefExoticComponent<
     React.ComponentProps<typeof TabsPrimitive.Panel> & React.RefAttributes<React.ElementRef<typeof TabsPrimitive.Panel>>
@@ -20,28 +39,39 @@ type TabsCompound = React.ForwardRefExoticComponent<
 };
 
 const TabsRoot = React.forwardRef(function TabsRoot(
-  { className, ...props }: React.ComponentProps<typeof TabsPrimitive.Root>,
+  { className, variant, ...props }: React.ComponentProps<typeof TabsPrimitive.Root> & { variant?: TabsVariant },
   ref: React.ForwardedRef<React.ElementRef<typeof TabsPrimitive.Root>>
 ) {
   return (
-    <TabsPrimitive.Root
-      data-slot="tabs"
-      className={cn("flex flex-col w-full h-full", className)}
-      {...props}
-      ref={ref}
-    />
+    <TabsContext.Provider value={{ variant }}>
+      <TabsPrimitive.Root
+        data-slot="tabs"
+        className={cn("flex h-full w-full flex-col", className)}
+        {...props}
+        ref={ref}
+      />
+    </TabsContext.Provider>
   );
 });
 
 const TabsList = React.forwardRef(function TabsList(
-  { className, ...props }: React.ComponentProps<typeof TabsPrimitive.List>,
+  {
+    className,
+    background = "contained",
+    ...props
+  }: React.ComponentProps<typeof TabsPrimitive.List> & {
+    background?: TabsVariant;
+  },
   ref: React.ForwardedRef<React.ElementRef<typeof TabsPrimitive.List>>
 ) {
   return (
     <TabsPrimitive.List
       data-slot="tabs-list"
       className={cn(
-        "flex w-full items-center justify-between gap-1.5 rounded-md text-sm p-0.5 bg-custom-background-80/60 relative overflow-auto",
+        "relative flex w-full items-center justify-between gap-1.5 overflow-auto rounded-lg p-0.5 text-13",
+        {
+          "bg-layer-3": background === "contained",
+        },
         className
       )}
       {...props}
@@ -51,21 +81,25 @@ const TabsList = React.forwardRef(function TabsList(
 });
 
 const TabsTrigger = React.forwardRef(function TabsTrigger(
-  { className, size = "md", ...props }: React.ComponentProps<typeof TabsPrimitive.Tab> & { size?: "sm" | "md" | "lg" },
+  {
+    className,
+    size = "md",
+    ...props
+  }: React.ComponentProps<typeof TabsPrimitive.Tab> & { size?: "sm" | "md" | "lg"; variant?: TabsVariant },
   ref: React.ForwardedRef<React.ElementRef<typeof TabsPrimitive.Tab>>
 ) {
   return (
     <TabsPrimitive.Tab
       data-slot="tabs-trigger"
       className={cn(
-        "flex items-center justify-center p-1 min-w-fit w-full font-medium text-custom-text-100 outline-none focus:outline-none cursor-pointer transition-all duration-200 ease-in-out rounded",
-        "data-[selected]:bg-custom-background-100 data-[selected]:text-custom-text-100 data-[selected]:shadow-sm",
-        "text-custom-text-400 hover:text-custom-text-300 hover:bg-custom-background-80/60",
-        "disabled:text-custom-text-400 disabled:cursor-not-allowed",
+        "flex w-full min-w-fit cursor-pointer items-center justify-center rounded-md border border-transparent p-1 font-medium text-primary transition-all duration-200 ease-in-out outline-none focus:outline-none",
+        "data-[selected]:shadow-sm data-[selected]:raised-200 data-[selected]:border data-[selected]:border-subtle-1 data-[selected]:bg-layer-2 data-[selected]:text-primary",
+        "text-placeholder hover:bg-layer-transparent-hover hover:text-tertiary",
+        "disabled:cursor-not-allowed disabled:text-placeholder",
         {
-          "text-xs": size === "sm",
-          "text-sm": size === "md",
-          "text-base": size === "lg",
+          "text-11": size === "sm",
+          "text-13": size === "md",
+          "text-14": size === "lg",
         },
         className
       )}
@@ -95,7 +129,7 @@ const TabsIndicator = React.forwardRef(function TabsIndicator(
   return (
     <div
       className={cn(
-        "absolute left-0 top-[50%] z-[-1] h-6 w-[var(--active-tab-width)] translate-x-[var(--active-tab-left)] -translate-y-[50%] rounded-sm bg-custom-background-100 shadow-sm transition-[width,transform] duration-200 ease-in-out",
+        "shadow-sm absolute top-[50%] left-0 z-[-1] h-6 w-[var(--active-tab-width)] translate-x-[var(--active-tab-left)] -translate-y-[50%] rounded-xs bg-surface-1 transition-[width,transform] duration-200 ease-in-out",
         className
       )}
       {...props}
diff --git a/packages/propel/src/toast/index.ts b/packages/propel/src/toast/index.ts
index da089861b..2ca91d546 100644
--- a/packages/propel/src/toast/index.ts
+++ b/packages/propel/src/toast/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./toast";
diff --git a/packages/propel/src/toast/toast.stories.tsx b/packages/propel/src/toast/toast.stories.tsx
index dd72bf4ac..1c1a961a1 100644
--- a/packages/propel/src/toast/toast.stories.tsx
+++ b/packages/propel/src/toast/toast.stories.tsx
@@ -1,5 +1,11 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { Meta, StoryObj } from "@storybook/react-vite";
-import { Toast, setToast, updateToast, setPromiseToast, TOAST_TYPE } from "./toast";
+import { Toast, ToastStatic, setToast, updateToast, setPromiseToast, TOAST_TYPE } from "./toast";
 
 const meta = {
   title: "Components/Toast",
@@ -22,10 +28,10 @@ export const Provider: Story = {
       <div>
         <Toast theme="light" />
         <div className="space-y-2">
-          <p className="text-sm text-gray-600">
+          <p className="text-gray-600 text-13">
             Toast provider is required to display toasts. It should be added to your app root.
           </p>
-          <code className="block rounded bg-gray-100 p-2 text-xs">{`<Toast theme="light" />`}</code>
+          <code className="bg-gray-100 block rounded-sm p-2 text-11">{`<Toast theme="light" />`}</code>
         </div>
       </div>
     );
@@ -45,7 +51,7 @@ export const Success: Story = {
               message: "Your changes have been saved successfully.",
             })
           }
-          className="rounded bg-green-500 px-4 py-2 text-white hover:bg-green-600"
+          className="rounded-sm bg-success-primary px-4 py-2 text-13 text-on-color hover:bg-success-primary/90"
         >
           Show Success Toast
         </button>
@@ -67,7 +73,7 @@ export const Error: Story = {
               message: "Something went wrong. Please try again.",
             })
           }
-          className="rounded bg-red-500 px-4 py-2 text-white hover:bg-red-600"
+          className="rounded-sm bg-danger-primary px-4 py-2 text-13 text-on-color hover:bg-danger-primary/90"
         >
           Show Error Toast
         </button>
@@ -89,7 +95,7 @@ export const Warning: Story = {
               message: "This action cannot be undone.",
             })
           }
-          className="rounded bg-yellow-500 px-4 py-2 text-white hover:bg-yellow-600"
+          className="rounded-sm bg-warning-primary px-4 py-2 text-13 text-on-color hover:bg-warning-primary/90"
         >
           Show Warning Toast
         </button>
@@ -111,7 +117,7 @@ export const Info: Story = {
               message: "Here's some helpful information for you.",
             })
           }
-          className="rounded bg-blue-500 px-4 py-2 text-white hover:bg-blue-600"
+          className="rounded-sm bg-accent-primary px-4 py-2 text-13 text-on-color hover:bg-accent-primary/90"
         >
           Show Info Toast
         </button>
@@ -132,7 +138,7 @@ export const Loading: Story = {
               title: "Loading...",
             })
           }
-          className="rounded bg-gray-500 px-4 py-2 text-white hover:bg-gray-600"
+          className="rounded-sm border border-subtle bg-layer-2 px-4 py-2 text-13 text-primary hover:bg-layer-1"
         >
           Show Loading Toast
         </button>
@@ -153,23 +159,14 @@ export const WithActionItems: Story = {
               title: "File uploaded",
               message: "Your file has been uploaded successfully.",
               actionItems: (
-                <div className="flex items-center gap-1 text-xs text-custom-text-200">
-                  <a
-                    href="#"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className="text-custom-primary px-2 py-1 hover:bg-custom-background-90 font-medium rounded"
-                  >
-                    {`View work item`}
-                  </a>
-                  <button className="cursor-pointer hidden group-hover:flex px-2 py-1 text-custom-text-300 hover:text-custom-text-200 hover:bg-custom-background-90 rounded">
-                    Copy link
-                  </button>
-                </div>
+                <>
+                  <button className="text-13 font-medium text-primary hover:text-secondary">Button</button>
+                  <button className="text-13 font-medium text-primary hover:text-secondary">Button</button>
+                </>
               ),
             })
           }
-          className="rounded bg-green-500 px-4 py-2 text-white hover:bg-green-600"
+          className="rounded-sm bg-success-primary px-4 py-2 text-13 text-on-color hover:bg-success-primary/90"
         >
           Show Toast with Action
         </button>
@@ -198,7 +195,10 @@ export const UpdateToast: Story = {
     return (
       <>
         <Toast theme="light" />
-        <button onClick={handleUpdate} className="rounded bg-blue-500 px-4 py-2 text-white hover:bg-blue-600">
+        <button
+          onClick={handleUpdate}
+          className="rounded-sm bg-accent-primary px-4 py-2 text-13 text-on-color hover:bg-accent-primary/90"
+        >
           Update Toast After 2s
         </button>
       </>
@@ -231,7 +231,10 @@ export const PromiseToast: Story = {
     return (
       <>
         <Toast theme="light" />
-        <button onClick={handlePromise} className="rounded bg-purple-500 px-4 py-2 text-white hover:bg-purple-600">
+        <button
+          onClick={handlePromise}
+          className="rounded-sm bg-accent-primary px-4 py-2 text-13 text-on-color hover:bg-accent-primary/90"
+        >
           Show Promise Toast
         </button>
       </>
@@ -253,7 +256,7 @@ export const AllTypes: Story = {
                 message: "Operation successful",
               })
             }
-            className="rounded bg-green-500 px-3 py-2 text-sm text-white hover:bg-green-600"
+            className="rounded-sm bg-success-primary px-3 py-2 text-13 text-on-color hover:bg-success-primary/90"
           >
             Success
           </button>
@@ -265,7 +268,7 @@ export const AllTypes: Story = {
                 message: "Operation failed",
               })
             }
-            className="rounded bg-red-500 px-3 py-2 text-sm text-white hover:bg-red-600"
+            className="rounded-sm bg-danger-primary px-3 py-2 text-13 text-on-color hover:bg-danger-primary/90"
           >
             Error
           </button>
@@ -277,7 +280,7 @@ export const AllTypes: Story = {
                 message: "Please be careful",
               })
             }
-            className="rounded bg-yellow-500 px-3 py-2 text-sm text-white hover:bg-yellow-600"
+            className="rounded-sm bg-warning-primary px-3 py-2 text-13 text-on-color hover:bg-warning-primary/90"
           >
             Warning
           </button>
@@ -289,7 +292,7 @@ export const AllTypes: Story = {
                 message: "Here's some info",
               })
             }
-            className="rounded bg-blue-500 px-3 py-2 text-sm text-white hover:bg-blue-600"
+            className="rounded-sm bg-accent-primary px-3 py-2 text-13 text-on-color hover:bg-accent-primary/90"
           >
             Info
           </button>
@@ -300,7 +303,7 @@ export const AllTypes: Story = {
                 title: "Loading",
               })
             }
-            className="rounded bg-gray-500 px-3 py-2 text-sm text-white hover:bg-gray-600"
+            className="rounded-sm border border-subtle bg-layer-2 px-3 py-2 text-13 text-primary hover:bg-layer-1"
           >
             Loading
           </button>
@@ -337,7 +340,7 @@ export const MultipleToasts: Story = {
               });
             }, 1000);
           }}
-          className="rounded bg-blue-500 px-4 py-2 text-white hover:bg-blue-600"
+          className="rounded-sm bg-accent-primary px-4 py-2 text-13 text-on-color hover:bg-accent-primary/90"
         >
           Show Multiple Toasts
         </button>
@@ -358,7 +361,7 @@ export const TitleOnly: Story = {
               title: "Saved!",
             })
           }
-          className="rounded bg-green-500 px-4 py-2 text-white hover:bg-green-600"
+          className="rounded-sm bg-success-primary px-4 py-2 text-13 text-on-color hover:bg-success-primary/90"
         >
           Show Title Only
         </button>
@@ -381,7 +384,7 @@ export const LongMessage: Story = {
                 "This is a longer message that provides more detailed information about what happened and what the user should do next.",
             })
           }
-          className="rounded bg-blue-500 px-4 py-2 text-white hover:bg-blue-600"
+          className="rounded-sm bg-accent-primary px-4 py-2 text-13 text-on-color hover:bg-accent-primary/90"
         >
           Show Long Message
         </button>
@@ -389,3 +392,318 @@ export const LongMessage: Story = {
     );
   },
 };
+
+// ========== Static Variants ==========
+
+export const StaticVariants: Story = {
+  render() {
+    return (
+      <div className="grid grid-cols-1 gap-4">
+        <div>
+          <p className="mb-2 text-13 font-medium text-secondary">All toast variants (static):</p>
+        </div>
+        <div className="flex flex-col gap-3">
+          <ToastStatic type={TOAST_TYPE.SUCCESS} title="Success" message="Your changes have been saved successfully." />
+          <ToastStatic type={TOAST_TYPE.ERROR} title="Error" message="Something went wrong. Please try again." />
+          <ToastStatic type={TOAST_TYPE.WARNING} title="Warning" message="This action cannot be undone." />
+          <ToastStatic type={TOAST_TYPE.INFO} title="Information" message="Here's some helpful information for you." />
+          <ToastStatic type={TOAST_TYPE.LOADING} title="Loading..." />
+        </div>
+      </div>
+    );
+  },
+};
+
+export const StaticSuccess: Story = {
+  render() {
+    return (
+      <ToastStatic
+        type={TOAST_TYPE.SUCCESS}
+        title="Changes saved"
+        message="Your changes have been saved successfully."
+      />
+    );
+  },
+};
+
+export const StaticError: Story = {
+  render() {
+    return <ToastStatic type={TOAST_TYPE.ERROR} title="Upload failed" message="Failed to upload file. Try again." />;
+  },
+};
+
+export const StaticWarning: Story = {
+  render() {
+    return (
+      <ToastStatic
+        type={TOAST_TYPE.WARNING}
+        title="Unsaved changes"
+        message="You have unsaved changes. Save before leaving."
+      />
+    );
+  },
+};
+
+export const StaticInfo: Story = {
+  render() {
+    return (
+      <ToastStatic
+        type={TOAST_TYPE.INFO}
+        title="New feature available"
+        message="Check out our latest feature in settings."
+      />
+    );
+  },
+};
+
+export const StaticLoading: Story = {
+  render() {
+    return <ToastStatic type={TOAST_TYPE.LOADING} title="Processing your request..." />;
+  },
+};
+
+export const StaticWithActions: Story = {
+  render() {
+    return (
+      <ToastStatic
+        type={TOAST_TYPE.SUCCESS}
+        title="File uploaded"
+        message="Your file has been uploaded successfully."
+        actionItems={
+          <>
+            <button className="text-13 font-medium text-primary hover:text-secondary">Button</button>
+            <button className="text-13 font-medium text-primary hover:text-secondary">Button</button>
+          </>
+        }
+      />
+    );
+  },
+};
+
+export const StaticDarkMode: Story = {
+  render() {
+    return (
+      <div className="flex flex-col gap-3 rounded-lg bg-canvas p-6" data-theme="dark">
+        <p className="mb-2 text-13 font-medium text-secondary">Toast variants in dark mode:</p>
+        <ToastStatic
+          type={TOAST_TYPE.SUCCESS}
+          title="Success"
+          message="Operation completed successfully."
+          theme="dark"
+        />
+        <ToastStatic type={TOAST_TYPE.ERROR} title="Error" message="An error occurred." theme="dark" />
+        <ToastStatic type={TOAST_TYPE.WARNING} title="Warning" message="Please proceed with caution." theme="dark" />
+        <ToastStatic type={TOAST_TYPE.INFO} title="Information" message="Here's some useful info." theme="dark" />
+        <ToastStatic type={TOAST_TYPE.LOADING} title="Loading..." theme="dark" />
+      </div>
+    );
+  },
+};
+
+// ========== Design Tokens Documentation ==========
+
+export const DesignTokens: Story = {
+  render() {
+    return (
+      <div className="space-y-6">
+        <div>
+          <h2 className="mb-2 text-16 font-semibold text-primary">Toast Design Tokens</h2>
+          <p className="text-13 text-secondary">
+            The toast component uses semantic design tokens from the Plane design system.
+          </p>
+        </div>
+
+        <div>
+          <h3 className="mb-3 text-14 font-semibold text-primary">Token Mapping by Variant</h3>
+          <div className="overflow-x-auto">
+            <table className="w-full rounded-lg border border-subtle text-11">
+              <thead>
+                <tr className="bg-layer-1">
+                  <th className="border-b border-subtle px-3 py-2 text-left font-semibold text-primary">Variant</th>
+                  <th className="border-b border-subtle px-3 py-2 text-left font-semibold text-primary">Title Text</th>
+                  <th className="border-b border-subtle px-3 py-2 text-left font-semibold text-primary">Icon BG</th>
+                  <th className="border-b border-subtle px-3 py-2 text-left font-semibold text-primary">Toast BG</th>
+                  <th className="border-b border-subtle px-3 py-2 text-left font-semibold text-primary">Border</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr className="border-b border-subtle">
+                  <td className="px-3 py-2 font-medium text-primary">Success</td>
+                  <td className="px-3 py-2">
+                    <code className="rounded bg-layer-1 px-1.5 py-0.5 text-10">text-primary</code>
+                  </td>
+                  <td className="px-3 py-2">
+                    <code className="rounded bg-layer-1 px-1.5 py-0.5 text-10">bg-success-primary</code>
+                  </td>
+                  <td className="px-3 py-2">
+                    <code className="rounded bg-layer-1 px-1.5 py-0.5 text-10">bg-surface-1</code>
+                  </td>
+                  <td className="px-3 py-2">
+                    <code className="rounded bg-layer-1 px-1.5 py-0.5 text-10">border-subtle</code>
+                  </td>
+                </tr>
+                <tr className="border-b border-subtle">
+                  <td className="px-3 py-2 font-medium text-primary">Error</td>
+                  <td className="px-3 py-2">
+                    <code className="rounded bg-layer-1 px-1.5 py-0.5 text-10">text-primary</code>
+                  </td>
+                  <td className="px-3 py-2">
+                    <code className="rounded bg-layer-1 px-1.5 py-0.5 text-10">bg-danger-primary</code>
+                  </td>
+                  <td className="px-3 py-2">
+                    <code className="rounded bg-layer-1 px-1.5 py-0.5 text-10">bg-surface-1</code>
+                  </td>
+                  <td className="px-3 py-2">
+                    <code className="rounded bg-layer-1 px-1.5 py-0.5 text-10">border-subtle</code>
+                  </td>
+                </tr>
+                <tr className="border-b border-subtle">
+                  <td className="px-3 py-2 font-medium text-primary">Warning</td>
+                  <td className="px-3 py-2">
+                    <code className="rounded bg-layer-1 px-1.5 py-0.5 text-10">text-primary</code>
+                  </td>
+                  <td className="px-3 py-2">
+                    <code className="rounded bg-layer-1 px-1.5 py-0.5 text-10">bg-warning-primary</code>
+                  </td>
+                  <td className="px-3 py-2">
+                    <code className="rounded bg-layer-1 px-1.5 py-0.5 text-10">bg-surface-1</code>
+                  </td>
+                  <td className="px-3 py-2">
+                    <code className="rounded bg-layer-1 px-1.5 py-0.5 text-10">border-subtle</code>
+                  </td>
+                </tr>
+                <tr className="border-b border-subtle">
+                  <td className="px-3 py-2 font-medium text-primary">Info</td>
+                  <td className="px-3 py-2">
+                    <code className="rounded bg-layer-1 px-1.5 py-0.5 text-10">text-primary</code>
+                  </td>
+                  <td className="px-3 py-2">
+                    <code className="rounded bg-layer-1 px-1.5 py-0.5 text-10">bg-accent-primary</code>
+                  </td>
+                  <td className="px-3 py-2">
+                    <code className="rounded bg-layer-1 px-1.5 py-0.5 text-10">bg-surface-1</code>
+                  </td>
+                  <td className="px-3 py-2">
+                    <code className="rounded bg-layer-1 px-1.5 py-0.5 text-10">border-subtle</code>
+                  </td>
+                </tr>
+                <tr>
+                  <td className="px-3 py-2 font-medium text-primary">Loading</td>
+                  <td className="px-3 py-2">
+                    <code className="rounded bg-layer-1 px-1.5 py-0.5 text-10">text-primary</code>
+                  </td>
+                  <td className="px-3 py-2">
+                    <code className="rounded bg-layer-1 px-1.5 py-0.5 text-10">bg-layer-2</code>
+                  </td>
+                  <td className="px-3 py-2">
+                    <code className="rounded bg-layer-1 px-1.5 py-0.5 text-10">bg-surface-1</code>
+                  </td>
+                  <td className="px-3 py-2">
+                    <code className="rounded bg-layer-1 px-1.5 py-0.5 text-10">border-subtle</code>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+
+        <div className="grid grid-cols-2 gap-4">
+          <div>
+            <h3 className="mb-3 text-14 font-semibold text-primary">Typography</h3>
+            <ul className="space-y-2 text-12 text-secondary">
+              <li>
+                <span className="font-medium text-primary">Title:</span>{" "}
+                <code className="rounded bg-layer-1 px-1.5 py-0.5 text-10">text-14 font-semibold</code>
+              </li>
+              <li>
+                <span className="font-medium text-primary">Message:</span>{" "}
+                <code className="rounded bg-layer-1 px-1.5 py-0.5 text-10">text-13</code>
+              </li>
+              <li>
+                <span className="font-medium text-primary">Message Color:</span>{" "}
+                <code className="rounded bg-layer-1 px-1.5 py-0.5 text-10">text-secondary</code>
+              </li>
+              <li>
+                <span className="font-medium text-primary">Action Button:</span>{" "}
+                <code className="rounded bg-layer-1 px-1.5 py-0.5 text-10">text-13 font-medium</code>
+              </li>
+            </ul>
+          </div>
+
+          <div>
+            <h3 className="mb-3 text-14 font-semibold text-primary">Dimensions & Styling</h3>
+            <ul className="space-y-2 text-12 text-secondary">
+              <li>
+                <span className="font-medium text-primary">Width:</span> 350px
+              </li>
+              <li>
+                <span className="font-medium text-primary">Padding:</span> 16px (p-4)
+              </li>
+              <li>
+                <span className="font-medium text-primary">Border Radius:</span> 8px (rounded-lg)
+              </li>
+              <li>
+                <span className="font-medium text-primary">Shadow:</span>{" "}
+                <code className="rounded bg-layer-1 px-1.5 py-0.5 text-10">shadow-raised-200</code>
+              </li>
+              <li>
+                <span className="font-medium text-primary">Border Width:</span> 1px
+              </li>
+            </ul>
+          </div>
+        </div>
+
+        <div>
+          <h3 className="mb-3 text-14 font-semibold text-primary">Icon Specifications</h3>
+          <ul className="space-y-2 text-12 text-secondary">
+            <li>
+              <span className="font-medium text-primary">Icon Size:</span> 20x20px
+            </li>
+            <li>
+              <span className="font-medium text-primary">Icon Stroke Width:</span> 2px
+            </li>
+            <li>
+              <span className="font-medium text-primary">Icon Container:</span> 40x40px circular (w-10 h-10
+              rounded-full)
+            </li>
+            <li>
+              <span className="font-medium text-primary">Icon Color:</span>{" "}
+              <code className="rounded bg-layer-1 px-1.5 py-0.5 text-10">text-on-color</code>
+            </li>
+            <li>
+              <span className="font-medium text-primary">Icon Background:</span>{" "}
+              <code className="rounded bg-layer-1 px-1.5 py-0.5 text-10">
+                bg-{"{"}variant{"}"}-primary
+              </code>
+            </li>
+            <li>
+              <span className="font-medium text-primary">Close Icon Size:</span> 16x16px
+            </li>
+            <li>
+              <span className="font-medium text-primary">Close Icon Color:</span>{" "}
+              <code className="rounded bg-layer-1 px-1.5 py-0.5 text-10">
+                text-icon-secondary hover:text-icon-tertiary
+              </code>
+            </li>
+          </ul>
+        </div>
+
+        <div className="rounded-lg bg-layer-1 p-4">
+          <h3 className="mb-2 text-14 font-semibold text-primary">Visual Examples</h3>
+          <p className="mb-4 text-12 text-secondary">See how the tokens are applied across all toast variants:</p>
+          <div className="flex flex-col gap-3">
+            <ToastStatic
+              type={TOAST_TYPE.SUCCESS}
+              title="Success"
+              message="Your changes have been saved successfully."
+            />
+            <ToastStatic type={TOAST_TYPE.ERROR} title="Error" message="Something went wrong. Please try again." />
+            <ToastStatic type={TOAST_TYPE.WARNING} title="Warning" message="This action cannot be undone." />
+            <ToastStatic type={TOAST_TYPE.INFO} title="Information" message="Here's some helpful information." />
+            <ToastStatic type={TOAST_TYPE.LOADING} title="Loading..." />
+          </div>
+        </div>
+      </div>
+    );
+  },
+};
diff --git a/packages/propel/src/toast/toast.tsx b/packages/propel/src/toast/toast.tsx
index 060200f2e..c4c8fad44 100644
--- a/packages/propel/src/toast/toast.tsx
+++ b/packages/propel/src/toast/toast.tsx
@@ -1,7 +1,13 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 import { Toast as BaseToast } from "@base-ui-components/react/toast";
-import { AlertTriangle, CheckCircle2, XCircle } from "lucide-react";
-import { CloseIcon } from "../icons";
+import { AlertTriangle, CheckIcon, InfoIcon, XIcon } from "lucide-react";
+import { CloseIcon } from "../icons/actions/close-icon";
 // spinner
 import { CircularBarSpinner } from "../spinners/circular-bar-spinner";
 import { cn } from "../utils/classname";
@@ -63,40 +69,40 @@ export function Toast(props: ToastProps) {
 
 const TOAST_DATA = {
   [TOAST_TYPE.SUCCESS]: {
-    icon: <CheckCircle2 width={24} height={24} strokeWidth={1.5} className="text-toast-text-success" />,
-    textColorClassName: "text-toast-text-success",
-    backgroundColorClassName: "bg-toast-background-success",
-    borderColorClassName: "border-toast-border-success",
+    icon: <CheckIcon width={12} height={12} className="text-on-color" />,
+    iconBgClassName: "bg-success-primary",
+    backgroundColorClassName: "!bg-surface-1",
+    borderColorClassName: "border-subtle",
   },
   [TOAST_TYPE.ERROR]: {
-    icon: <XCircle width={24} height={24} strokeWidth={1.5} className="text-toast-text-error" />,
-    textColorClassName: "text-toast-text-error",
-    backgroundColorClassName: "bg-toast-background-error",
-    borderColorClassName: "border-toast-border-error",
+    icon: <XIcon width={12} height={12} className="text-on-color" />,
+    iconBgClassName: "bg-danger-primary",
+    backgroundColorClassName: "bg-surface-1",
+    borderColorClassName: "border-subtle",
   },
   [TOAST_TYPE.WARNING]: {
-    icon: <AlertTriangle width={24} height={24} strokeWidth={1.5} className="text-toast-text-warning" />,
-    textColorClassName: "text-toast-text-warning",
-    backgroundColorClassName: "bg-toast-background-warning",
-    borderColorClassName: "border-toast-border-warning",
+    icon: <AlertTriangle width={12} height={12} className="text-on-color" />,
+    iconBgClassName: "bg-warning-primary",
+    backgroundColorClassName: "bg-surface-1",
+    borderColorClassName: "border-subtle",
   },
   [TOAST_TYPE.INFO]: {
-    icon: <></>,
-    textColorClassName: "text-toast-text-info",
-    backgroundColorClassName: "bg-toast-background-info",
-    borderColorClassName: "border-toast-border-info",
+    icon: <InfoIcon width={12} height={12} className="text-on-color" />,
+    iconBgClassName: "bg-accent-primary",
+    backgroundColorClassName: "bg-surface-1",
+    borderColorClassName: "border-subtle",
   },
   [TOAST_TYPE.LOADING]: {
-    icon: <CircularBarSpinner className="text-toast-text-tertiary" />,
-    textColorClassName: "text-toast-text-loading",
-    backgroundColorClassName: "bg-toast-background-loading",
-    borderColorClassName: "border-toast-border-loading",
+    icon: <CircularBarSpinner className="text-on-color" />,
+    iconBgClassName: "bg-layer-2",
+    backgroundColorClassName: "bg-surface-1",
+    borderColorClassName: "border-subtle",
   },
   [TOAST_TYPE.LOADING_TOAST]: {
-    icon: <CircularBarSpinner className="text-toast-text-tertiary" />,
-    textColorClassName: "text-toast-text-loading",
-    backgroundColorClassName: "bg-toast-background-loading",
-    borderColorClassName: "border-toast-border-loading",
+    icon: <CircularBarSpinner className="text-on-color" />,
+    iconBgClassName: "bg-layer-2",
+    backgroundColorClassName: "bg-surface-1",
+    borderColorClassName: "border-subtle",
   },
 };
 
@@ -116,9 +122,9 @@ function ToastRender({ id, toast }: { id: React.Key; toast: BaseToast.Root.Toast
       key={id}
       className={cn(
         // Base layout and positioning
-        "flex group items-center rounded-lg border shadow-sm p-2 w-[350px]",
+        "group flex w-[350px] items-center rounded-lg border shadow-raised-200",
         "absolute right-3 bottom-3 z-[calc(1000-var(--toast-index))]",
-        "select-none transition-[opacity,transform] duration-500 ease-&lsqb;cubic-bezier(0.22,1,0.36,1)&rsqb;",
+        "ease-&lsqb;cubic-bezier(0.22,1,0.36,1)&rsqb; transition-[opacity,transform] duration-500 select-none",
 
         // Default transform with stacking and scaling
         "[transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)+calc(min(var(--toast-index),10)*-10px)))_scale(calc(max(0,1-(var(--toast-index)*0.1))))]",
@@ -157,45 +163,88 @@ function ToastRender({ id, toast }: { id: React.Key; toast: BaseToast.Root.Toast
         e.preventDefault();
       }}
     >
-      {toastData.type === TOAST_TYPE.LOADING ? (
-        <div className="w-full h-full flex items-center justify-center px-4 py-2">
-          {data.icon && <div className="flex items-center justify-center">{data.icon}</div>}
-          <div className={cn("w-full flex items-center gap-0.5 pr-1", data.icon ? "pl-4" : "pl-1")}>
-            <div className={cn("grow text-sm font-semibold", data.textColorClassName)}>
-              {toastData.title ?? "Loading..."}
-            </div>
-            <BaseToast.Close
-              className="absolute top-2 right-2.5 text-toast-text-secondary hover:text-toast-text-tertiary cursor-pointer"
-              aria-label="Close"
+      <BaseToast.Close className="absolute top-3 right-3 cursor-pointer text-icon-secondary hover:text-icon-tertiary">
+        <CloseIcon strokeWidth={1.5} width={16} height={16} />
+      </BaseToast.Close>
+      <div className="flex w-full items-start gap-2 p-4">
+        <div className="py-1">
+          {data.icon && (
+            <div
+              className={cn("flex size-4 flex-shrink-0 items-center justify-center rounded-full", data.iconBgClassName)}
             >
-              <CloseIcon strokeWidth={1.5} width={14} height={14} />
-            </BaseToast.Close>
+              {data.icon}
+            </div>
+          )}
+        </div>
+        <div className="flex min-w-0 flex-1 flex-col gap-1">
+          <BaseToast.Title className="text-h6-medium text-primary">
+            {toastData.type === TOAST_TYPE.LOADING ? (toastData.title ?? "Loading...") : toastData.title}
+          </BaseToast.Title>
+          {toastData.type !== TOAST_TYPE.LOADING && toastData.message && (
+            <BaseToast.Description className="text-body-xs-regular text-tertiary">
+              {toastData.message}
+            </BaseToast.Description>
+          )}
+          {toastData.type !== TOAST_TYPE.LOADING && toastData.actionItems && (
+            <div className="flex items-center gap-2">{toastData.actionItems}</div>
+          )}
+        </div>
+      </div>
+    </BaseToast.Root>
+  );
+}
+
+// Static toast component for Storybook and documentation
+export type ToastStaticProps = {
+  type: TOAST_TYPE;
+  title: string;
+  message?: string;
+  actionItems?: React.ReactNode;
+  theme?: "light" | "dark";
+};
+
+export function ToastStatic({ type, title, message, actionItems, theme = "light" }: ToastStaticProps) {
+  const data = TOAST_DATA[type];
+
+  return (
+    <div data-theme={theme} className="inline-block">
+      <div
+        className={cn(
+          // Base layout and positioning
+          "group flex w-[350px] items-start rounded-lg border border-subtle-1 shadow-overlay-100",
+          "relative",
+          data.backgroundColorClassName,
+          data.borderColorClassName
+        )}
+      >
+        <div className="absolute top-1 right-1 cursor-default text-icon-tertiary">
+          <CloseIcon strokeWidth={1.5} width={14} height={14} />
+        </div>
+        <div className="flex w-full items-start gap-3 p-4">
+          <div className="py-1">
+            {data.icon && (
+              <div
+                className={cn(
+                  "flex size-4 flex-shrink-0 items-center justify-center rounded-full",
+                  data.iconBgClassName
+                )}
+              >
+                {data.icon}
+              </div>
+            )}
+          </div>
+          <div className="flex min-w-0 flex-1 flex-col gap-1">
+            <div className="text-h6-medium text-primary">
+              {type === TOAST_TYPE.LOADING ? (title ?? "Loading...") : title}
+            </div>
+            {type !== TOAST_TYPE.LOADING && message && (
+              <div className="text-body-xs-regular text-tertiary">{message}</div>
+            )}
+            {type !== TOAST_TYPE.LOADING && actionItems && <div className="flex items-center gap-2">{actionItems}</div>}
           </div>
         </div>
-      ) : (
-        <>
-          <BaseToast.Close className="absolute top-2 right-2.5 text-toast-text-secondary hover:text-toast-text-tertiary cursor-pointer">
-            <CloseIcon strokeWidth={1.5} width={14} height={14} />
-          </BaseToast.Close>
-          <div className="w-full flex flex-col gap-2 p-2">
-            <div className="flex items-center w-full">
-              {data.icon && <div className="flex items-center justify-center">{data.icon}</div>}
-              <div className={cn("flex flex-col gap-0.5 pr-1", data.icon ? "pl-4" : "pl-1")}>
-                <BaseToast.Title className={cn("text-sm font-semibold", data.textColorClassName)}>
-                  {toastData.title}
-                </BaseToast.Title>
-                {toastData.message && (
-                  <BaseToast.Description className="text-toast-text-secondary text-xs font-medium">
-                    {toastData.message}
-                  </BaseToast.Description>
-                )}
-              </div>
-            </div>
-            {toastData.actionItems && <div className="flex items-center pl-[32px]">{toastData.actionItems}</div>}
-          </div>
-        </>
-      )}
-    </BaseToast.Root>
+      </div>
+    </div>
   );
 }
 
diff --git a/packages/propel/src/toolbar/index.ts b/packages/propel/src/toolbar/index.ts
index da2a48965..239fac163 100644
--- a/packages/propel/src/toolbar/index.ts
+++ b/packages/propel/src/toolbar/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export { Toolbar } from "./toolbar";
 export type {
   ToolbarProps,
diff --git a/packages/propel/src/toolbar/toolbar.stories.tsx b/packages/propel/src/toolbar/toolbar.stories.tsx
index b66371063..42ed52185 100644
--- a/packages/propel/src/toolbar/toolbar.stories.tsx
+++ b/packages/propel/src/toolbar/toolbar.stories.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import {
   Bold,
@@ -5,7 +11,6 @@ import {
   Underline,
   Strikethrough,
   Code,
-  Link,
   ListOrdered,
   Quote,
   AlignLeft,
@@ -13,9 +18,8 @@ import {
   AlignRight,
   Undo,
   Redo,
-  Globe2,
-  Lock,
 } from "lucide-react";
+import { LinkIcon, GlobeIcon, LockIcon } from "../icons";
 import { ListLayoutIcon } from "../icons/layouts/list-icon";
 import { Toolbar } from "./toolbar";
 
@@ -37,8 +41,8 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {
   render() {
     return (
-      <div className="p-4 space-y-4">
-        <div className="w-96 border rounded">
+      <div className="space-y-4 p-4">
+        <div className="w-96 rounded-sm border">
           <Toolbar>
             <Toolbar.Group isFirst>
               <Toolbar.Item icon={Undo} tooltip="Undo" />
@@ -61,7 +65,7 @@ export const Default: Story = {
               <Toolbar.Item icon={AlignRight} tooltip="Align Right" />
             </Toolbar.Group>
             <Toolbar.Group>
-              <Toolbar.Item icon={Link} tooltip="Link" />
+              <Toolbar.Item icon={LinkIcon} tooltip="Link" />
               <Toolbar.Item icon={Code} tooltip="Code" />
             </Toolbar.Group>
           </Toolbar>
@@ -100,17 +104,17 @@ export const WithActiveStates: Story = {
 export const CommentToolbar: Story = {
   render() {
     return (
-      <div className="p-4 space-y-4">
-        <h3 className="text-sm font-medium">Comment Toolbar with Access Control</h3>
-        <div className="rounded border-[0.5px] border-custom-border-200 p-1">
+      <div className="space-y-4 p-4">
+        <h3 className="text-13 font-medium">Comment Toolbar with Access Control</h3>
+        <div className="rounded-sm border-[0.5px] border-subtle p-1">
           <Toolbar>
             {/* Access Specifier */}
-            <div className="flex flex-shrink-0 items-stretch gap-0.5 rounded border-[0.5px] border-custom-border-200 p-1">
-              <Toolbar.Item icon={Lock} tooltip="Private" isActive />
-              <Toolbar.Item icon={Globe2} tooltip="Public" />
+            <div className="flex flex-shrink-0 items-stretch gap-0.5 rounded-sm border-[0.5px] border-subtle p-1">
+              <Toolbar.Item icon={LockIcon} tooltip="Private" isActive />
+              <Toolbar.Item icon={GlobeIcon} tooltip="Public" />
             </div>
 
-            <div className="flex w-full items-stretch justify-between gap-2 rounded border-[0.5px] border-custom-border-200 p-1">
+            <div className="flex w-full items-stretch justify-between gap-2 rounded-sm border-[0.5px] border-subtle p-1">
               <div className="flex items-stretch">
                 <Toolbar.Group isFirst>
                   <Toolbar.Item icon={Bold} tooltip="Bold" shortcut={["Cmd", "B"]} />
diff --git a/packages/propel/src/toolbar/toolbar.tsx b/packages/propel/src/toolbar/toolbar.tsx
index b939ad1ca..ca7565c79 100644
--- a/packages/propel/src/toolbar/toolbar.tsx
+++ b/packages/propel/src/toolbar/toolbar.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 import type { LucideIcon } from "lucide-react";
 import type { ISvgIcons } from "../icons";
@@ -42,7 +48,7 @@ const ToolbarRoot = React.forwardRef(function ToolbarRoot(
   return (
     <div
       ref={ref}
-      className={cn("flex h-9 w-full items-stretch gap-1.5 bg-custom-background-90 overflow-x-scroll", className)}
+      className={cn("flex h-9 w-full items-stretch gap-1.5 overflow-x-scroll bg-surface-2", className)}
       {...props}
     >
       {children}
@@ -58,7 +64,7 @@ const ToolbarGroup = React.forwardRef(function ToolbarGroup(
     <div
       ref={ref}
       className={cn(
-        "flex items-stretch gap-0.5 border-r border-custom-border-200 px-2.5",
+        "flex items-stretch gap-0.5 border-r border-subtle px-2.5",
         {
           "pl-0": isFirst,
         },
@@ -80,9 +86,9 @@ const ToolbarItem = React.forwardRef(function ToolbarItem(
       ref={ref}
       type="button"
       className={cn(
-        "grid place-items-center aspect-square rounded-sm p-0.5 text-custom-text-400 hover:bg-custom-background-80 transition-colors",
+        "grid aspect-square place-items-center rounded-xs p-0.5 text-placeholder transition-colors hover:bg-layer-1",
         {
-          "bg-custom-background-80 text-custom-text-100": isActive,
+          "bg-layer-1 text-primary": isActive,
         },
         className
       )}
@@ -90,7 +96,7 @@ const ToolbarItem = React.forwardRef(function ToolbarItem(
     >
       <Icon
         className={cn("h-3.5 w-3.5", {
-          "text-custom-text-100": isActive,
+          "text-primary": isActive,
         })}
         strokeWidth={2.5}
       />
@@ -102,9 +108,9 @@ const ToolbarItem = React.forwardRef(function ToolbarItem(
     return (
       <Tooltip
         tooltipContent={
-          <div className="flex flex-col gap-1 text-center text-xs">
+          <div className="flex flex-col gap-1 text-center text-11">
             <span className="font-medium">{tooltip}</span>
-            {shortcut && <kbd className="text-custom-text-400">{shortcut.join(" + ")}</kbd>}
+            {shortcut && <kbd className="text-placeholder">{shortcut.join(" + ")}</kbd>}
           </div>
         }
       >
@@ -120,17 +126,16 @@ const ToolbarSeparator = React.forwardRef(function ToolbarSeparator(
   { className, ...props }: ToolbarSeparatorProps,
   ref: React.ForwardedRef<HTMLDivElement>
 ) {
-  return <div ref={ref} className={cn("h-full w-px bg-custom-border-200 mx-1", className)} {...props} />;
+  return <div ref={ref} className={cn("bg-subtle-1 mx-1 h-full w-px", className)} {...props} />;
 });
 
 const buttonVariants = {
-  primary: "bg-custom-primary-100 text-white hover:bg-custom-primary-200 focus:bg-custom-primary-200",
-  secondary:
-    "bg-custom-background-100 text-custom-text-200 border border-custom-border-200 hover:bg-custom-background-90 focus:bg-custom-background-90",
+  primary: "bg-accent-primary text-on-color hover:bg-accent-primary/80 focus:bg-accent-primary/80",
+  secondary: "bg-surface-1 text-secondary border border-subtle hover:bg-surface-2 focus:bg-surface-2",
   outline:
-    "border border-custom-primary-100 text-custom-primary-100 bg-transparent hover:bg-custom-primary-100/10 focus:bg-custom-primary-100/20",
-  ghost: "text-custom-text-200 hover:bg-custom-background-90 focus:bg-custom-background-90",
-  destructive: "bg-red-500 text-white hover:bg-red-600 focus:bg-red-600",
+    "border border-accent-strong text-accent-primary bg-transparent hover:bg-accent-primary/10 focus:bg-accent-primary/20",
+  ghost: "text-secondary hover:bg-surface-2 focus:bg-surface-2",
+  destructive: "bg-danger-primary text-on-color hover:bg-danger-primary-hover focus:bg-danger-primary-selected",
 };
 
 const ToolbarSubmitButton = React.forwardRef(function ToolbarSubmitButton(
@@ -142,9 +147,9 @@ const ToolbarSubmitButton = React.forwardRef(function ToolbarSubmitButton(
       <button
         ref={ref}
         className={cn(
-          "inline-flex items-center justify-center gap-2 rounded-md px-2.5 py-1.5 text-xs font-medium transition-colors duration-200",
-          "focus:outline-none focus:ring-2 focus:ring-custom-primary-100/20 focus:ring-offset-2",
-          "disabled:opacity-50 disabled:pointer-events-none",
+          "inline-flex items-center justify-center gap-2 rounded-md px-2.5 py-1.5 text-11 font-medium transition-colors duration-200",
+          "focus:ring-2 focus:ring-accent-strong/20 focus:ring-offset-2 focus:outline-none",
+          "disabled:pointer-events-none disabled:opacity-50",
           buttonVariants[variant],
           className
         )}
diff --git a/packages/propel/src/tooltip/index.ts b/packages/propel/src/tooltip/index.ts
index 1efe34c51..d98033459 100644
--- a/packages/propel/src/tooltip/index.ts
+++ b/packages/propel/src/tooltip/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./root";
diff --git a/packages/propel/src/tooltip/root.tsx b/packages/propel/src/tooltip/root.tsx
index 590f3e5dd..1c83e2e1b 100644
--- a/packages/propel/src/tooltip/root.tsx
+++ b/packages/propel/src/tooltip/root.tsx
@@ -1,6 +1,12 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 import { Tooltip as BaseTooltip } from "@base-ui-components/react/tooltip";
-import { cn } from "../utils/classname";
+import { cn } from "../utils";
 import type { TPlacement, TSide, TAlign } from "../utils/placement";
 import { convertPlacementToSideAndAlign } from "../utils/placement";
 
@@ -50,7 +56,7 @@ export function Tooltip(props: ITooltipProps) {
         <BaseTooltip.Portal>
           <BaseTooltip.Positioner
             className={cn(
-              "z-tooltip max-w-xs gap-1 overflow-hidden break-words rounded-md bg-custom-background-100 p-2 text-xs text-custom-text-200 shadow-custom-shadow-xs",
+              "z-50 max-w-xs gap-1 overflow-hidden rounded-lg border border-subtle-1 bg-layer-2 px-2 py-1.5 break-words shadow-overlay-200",
               {
                 hidden: isMobile,
               },
@@ -61,8 +67,16 @@ export function Tooltip(props: ITooltipProps) {
             align={finalAlign}
             render={
               <BaseTooltip.Popup>
-                {tooltipHeading && <h5 className="font-medium text-custom-text-100">{tooltipHeading}</h5>}
-                {tooltipContent && tooltipContent}
+                {tooltipHeading && <p className="text-caption-md-medium text-primary">{tooltipHeading}</p>}
+                {tooltipContent && (
+                  <p
+                    className={cn("text-caption-sm-regular text-secondary", {
+                      "mt-1": tooltipHeading && tooltipHeading !== "",
+                    })}
+                  >
+                    {tooltipContent}
+                  </p>
+                )}
               </BaseTooltip.Popup>
             }
           />
diff --git a/packages/propel/src/tooltip/tooltip.stories.tsx b/packages/propel/src/tooltip/tooltip.stories.tsx
index d9cf4bf56..8560481c3 100644
--- a/packages/propel/src/tooltip/tooltip.stories.tsx
+++ b/packages/propel/src/tooltip/tooltip.stories.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { HelpCircle } from "lucide-react";
 import { Tooltip } from "./root";
@@ -17,7 +23,7 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {
   args: {
     tooltipContent: "This is a tooltip",
-    children: <button className="rounded bg-blue-500 px-4 py-2 text-white">Hover me</button>,
+    children: <button className="bg-blue-500 rounded-sm px-4 py-2 text-on-color">Hover me</button>,
   },
 };
 
@@ -25,7 +31,7 @@ export const WithHeading: Story = {
   args: {
     tooltipHeading: "Tooltip Title",
     tooltipContent: "This is the tooltip content with a heading.",
-    children: <button className="rounded bg-blue-500 px-4 py-2 text-white">Hover me</button>,
+    children: <button className="bg-blue-500 rounded-sm px-4 py-2 text-on-color">Hover me</button>,
   },
 };
 
@@ -33,7 +39,7 @@ export const PositionTop: Story = {
   args: {
     tooltipContent: "Tooltip on top",
     position: "top",
-    children: <button className="rounded bg-blue-500 px-4 py-2 text-white">Top</button>,
+    children: <button className="bg-blue-500 rounded-sm px-4 py-2 text-on-color">Top</button>,
   },
 };
 
@@ -41,7 +47,7 @@ export const PositionBottom: Story = {
   args: {
     tooltipContent: "Tooltip on bottom",
     position: "bottom",
-    children: <button className="rounded bg-blue-500 px-4 py-2 text-white">Bottom</button>,
+    children: <button className="bg-blue-500 rounded-sm px-4 py-2 text-on-color">Bottom</button>,
   },
 };
 
@@ -49,7 +55,7 @@ export const PositionLeft: Story = {
   args: {
     tooltipContent: "Tooltip on left",
     position: "left",
-    children: <button className="rounded bg-blue-500 px-4 py-2 text-white">Left</button>,
+    children: <button className="bg-blue-500 rounded-sm px-4 py-2 text-on-color">Left</button>,
   },
 };
 
@@ -57,7 +63,7 @@ export const PositionRight: Story = {
   args: {
     tooltipContent: "Tooltip on right",
     position: "right",
-    children: <button className="rounded bg-blue-500 px-4 py-2 text-white">Right</button>,
+    children: <button className="bg-blue-500 rounded-sm px-4 py-2 text-on-color">Right</button>,
   },
 };
 
@@ -65,8 +71,8 @@ export const WithIcon: Story = {
   args: {
     tooltipContent: "Click here for help",
     children: (
-      <button className="rounded-full p-2 hover:bg-gray-100">
-        <HelpCircle className="h-5 w-5 text-gray-600" />
+      <button className="hover:bg-gray-100 rounded-full p-2">
+        <HelpCircle className="text-gray-600 h-5 w-5" />
       </button>
     ),
   },
@@ -76,7 +82,7 @@ export const Disabled: Story = {
   args: {
     tooltipContent: "This tooltip is disabled",
     disabled: true,
-    children: <button className="rounded bg-gray-400 px-4 py-2 text-white">Hover me (disabled)</button>,
+    children: <button className="bg-gray-400 rounded-sm px-4 py-2 text-on-color">Hover me (disabled)</button>,
   },
 };
 
@@ -85,7 +91,7 @@ export const LongContent: Story = {
     tooltipHeading: "Important Information",
     tooltipContent:
       "This is a longer tooltip with more detailed information that wraps to multiple lines. It provides comprehensive details about the element.",
-    children: <button className="rounded bg-blue-500 px-4 py-2 text-white">Long content</button>,
+    children: <button className="bg-blue-500 rounded-sm px-4 py-2 text-on-color">Long content</button>,
   },
 };
 
@@ -93,7 +99,7 @@ export const CustomDelay: Story = {
   args: {
     tooltipContent: "This tooltip has a custom delay",
     openDelay: 1000,
-    children: <button className="rounded bg-blue-500 px-4 py-2 text-white">Custom delay (1s)</button>,
+    children: <button className="bg-blue-500 rounded-sm px-4 py-2 text-on-color">Custom delay (1s)</button>,
   },
 };
 
@@ -101,7 +107,7 @@ export const CustomOffset: Story = {
   args: {
     tooltipContent: "Custom offset tooltip",
     sideOffset: 20,
-    children: <button className="rounded bg-blue-500 px-4 py-2 text-white">Custom offset</button>,
+    children: <button className="bg-blue-500 rounded-sm px-4 py-2 text-on-color">Custom offset</button>,
   },
 };
 
@@ -113,18 +119,18 @@ export const AllPositions: Story = {
     return (
       <div className="flex flex-col items-center gap-4">
         <Tooltip tooltipContent="Top position" position="top">
-          <button className="rounded bg-blue-500 px-4 py-2 text-sm text-white">Top</button>
+          <button className="bg-blue-500 rounded-sm px-4 py-2 text-13 text-on-color">Top</button>
         </Tooltip>
         <div className="flex gap-4">
           <Tooltip tooltipContent="Left position" position="left">
-            <button className="rounded bg-blue-500 px-4 py-2 text-sm text-white">Left</button>
+            <button className="bg-blue-500 rounded-sm px-4 py-2 text-13 text-on-color">Left</button>
           </Tooltip>
           <Tooltip tooltipContent="Right position" position="right">
-            <button className="rounded bg-blue-500 px-4 py-2 text-sm text-white">Right</button>
+            <button className="bg-blue-500 rounded-sm px-4 py-2 text-13 text-on-color">Right</button>
           </Tooltip>
         </div>
         <Tooltip tooltipContent="Bottom position" position="bottom">
-          <button className="rounded bg-blue-500 px-4 py-2 text-sm text-white">Bottom</button>
+          <button className="bg-blue-500 rounded-sm px-4 py-2 text-13 text-on-color">Bottom</button>
         </Tooltip>
       </div>
     );
@@ -137,10 +143,10 @@ export const OnText: Story = {
   },
   render() {
     return (
-      <p className="text-sm text-gray-700">
+      <p className="text-gray-700 text-13">
         This is some text with a{" "}
         <Tooltip tooltipContent="Additional information about this word" position="top">
-          <span className="cursor-help border-b border-dashed border-blue-500 text-blue-500">tooltip</span>
+          <span className="border-blue-500 text-blue-500 cursor-help border-b border-dashed">tooltip</span>
         </Tooltip>{" "}
         in it.
       </p>
@@ -155,7 +161,7 @@ export const OnDisabledButton: Story = {
   render() {
     return (
       <Tooltip tooltipContent="This feature is currently unavailable" position="top">
-        <button className="cursor-not-allowed rounded bg-gray-300 px-4 py-2 text-gray-500" disabled>
+        <button className="bg-gray-300 text-gray-500 cursor-not-allowed rounded-sm px-4 py-2" disabled>
           Disabled Button
         </button>
       </Tooltip>
@@ -169,19 +175,19 @@ export const ComplexContent: Story = {
     tooltipContent: (
       <div className="space-y-1">
         <p className="font-semibold">John Doe</p>
-        <p className="text-xs">john@example.com</p>
-        <p className="text-xs text-gray-400">Last seen: 2 hours ago</p>
+        <p className="text-11">john@example.com</p>
+        <p className="text-gray-400 text-11">Last seen: 2 hours ago</p>
       </div>
     ),
-    children: <button className="rounded bg-blue-500 px-4 py-2 text-white">View User</button>,
+    children: <button className="bg-blue-500 rounded-sm px-4 py-2 text-on-color">View User</button>,
   },
 };
 
 export const WithCustomStyling: Story = {
   args: {
     tooltipContent: "Custom styled tooltip",
-    className: "bg-purple-500 text-white",
-    children: <button className="rounded bg-purple-500 px-4 py-2 text-white">Custom style</button>,
+    className: "bg-purple-500 text-on-color",
+    children: <button className="bg-purple-500 rounded-sm px-4 py-2 text-on-color">Custom style</button>,
   },
 };
 
@@ -193,16 +199,16 @@ export const MultipleTooltips: Story = {
     return (
       <div className="flex gap-4">
         <Tooltip tooltipContent="Save your work" position="top">
-          <button className="rounded bg-green-500 px-4 py-2 text-sm text-white">Save</button>
+          <button className="bg-green-500 rounded-sm px-4 py-2 text-13 text-on-color">Save</button>
         </Tooltip>
         <Tooltip tooltipContent="Discard changes" position="top">
-          <button className="rounded bg-red-500 px-4 py-2 text-sm text-white">Cancel</button>
+          <button className="bg-red-500 rounded-sm px-4 py-2 text-13 text-on-color">Cancel</button>
         </Tooltip>
         <Tooltip tooltipContent="Export to PDF" position="top">
-          <button className="rounded bg-blue-500 px-4 py-2 text-sm text-white">Export</button>
+          <button className="bg-blue-500 rounded-sm px-4 py-2 text-13 text-on-color">Export</button>
         </Tooltip>
         <Tooltip tooltipContent="Share with team" position="top">
-          <button className="rounded bg-purple-500 px-4 py-2 text-sm text-white">Share</button>
+          <button className="bg-purple-500 rounded-sm px-4 py-2 text-13 text-on-color">Share</button>
         </Tooltip>
       </div>
     );
@@ -217,9 +223,9 @@ export const IconButtons: Story = {
     return (
       <div className="flex gap-2">
         <Tooltip tooltipContent="Edit" position="top">
-          <button className="rounded p-2 hover:bg-gray-100">
+          <button className="hover:bg-gray-100 rounded-sm p-2">
             <svg
-              className="h-5 w-5 text-gray-600"
+              className="text-gray-600 h-5 w-5"
               fill="none"
               stroke="currentColor"
               viewBox="0 0 24 24"
@@ -235,9 +241,9 @@ export const IconButtons: Story = {
           </button>
         </Tooltip>
         <Tooltip tooltipContent="Delete" position="top">
-          <button className="rounded p-2 hover:bg-gray-100">
+          <button className="hover:bg-gray-100 rounded-sm p-2">
             <svg
-              className="h-5 w-5 text-red-600"
+              className="h-5 w-5 text-danger-primary"
               fill="none"
               stroke="currentColor"
               viewBox="0 0 24 24"
@@ -253,9 +259,9 @@ export const IconButtons: Story = {
           </button>
         </Tooltip>
         <Tooltip tooltipContent="Share" position="top">
-          <button className="rounded p-2 hover:bg-gray-100">
+          <button className="hover:bg-gray-100 rounded-sm p-2">
             <svg
-              className="h-5 w-5 text-blue-600"
+              className="text-blue-600 h-5 w-5"
               fill="none"
               stroke="currentColor"
               viewBox="0 0 24 24"
@@ -282,19 +288,19 @@ export const InFormField: Story = {
   render() {
     return (
       <div className="w-80">
-        <label className="mb-1 flex items-center gap-2 text-sm font-medium text-gray-700">
+        <label className="text-gray-700 mb-1 flex items-center gap-2 text-13 font-medium">
           Email Address
           <Tooltip
             tooltipHeading="Email Requirements"
             tooltipContent="Enter a valid email address that you have access to. We'll send a verification link."
             position="right"
           >
-            <HelpCircle className="h-4 w-4 cursor-help text-gray-400" />
+            <HelpCircle className="text-gray-400 h-4 w-4 cursor-help" />
           </Tooltip>
         </label>
         <input
           type="email"
-          className="w-full rounded border border-gray-300 px-3 py-2 text-sm"
+          className="border-gray-300 w-full rounded-sm border px-3 py-2 text-13"
           placeholder="you@example.com"
         />
       </div>
diff --git a/packages/propel/src/utils/classname.tsx b/packages/propel/src/utils/classname.tsx
index 7b3aeb2f8..6d0ca1c48 100644
--- a/packages/propel/src/utils/classname.tsx
+++ b/packages/propel/src/utils/classname.tsx
@@ -1,5 +1,69 @@
-import clsx from "clsx";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { clsx } from "clsx";
 import type { ClassValue } from "clsx";
-import { twMerge } from "tailwind-merge";
+
+import { extendTailwindMerge } from "tailwind-merge";
+
+// Support email can be configured by the application
+export const getSupportEmail = (defaultEmail: string = ""): string => defaultEmail;
+
+// Matches custom typography classes: text-h1-semibold, text-body-md-regular, text-caption-xs-medium, etc.
+const isCustomTypography = (value: string) =>
+  !/^(h[1-6]|body-(xs|sm|md)|caption-(xs|sm|md))-(regular|medium|semibold|bold)$/.test(value);
+
+// Matches custom font size classes: text-9, text-10, text-11, text-12, text-13, text-14, text-16, text-18, text-20, text-24, text-28, text-32, text-40
+const isCustomFontSize = (value: string) => /^(9|10|11|12|13|14|16|18|20|24|28|32|40)$/.test(value);
+
+// Matches custom text color classes: text-primary, text-on-color, text-secondary, etc.
+const CUSTOM_TEXT_COLORS = [
+  "primary",
+  "secondary",
+  "tertiary",
+  "placeholder",
+  "disabled",
+  "accent-primary",
+  "accent-secondary",
+  "on-color",
+  "on-color-disabled",
+  "inverse",
+  "success",
+  "success-primary",
+  "success-secondary",
+  "warning",
+  "warning-primary",
+  "warning-secondary",
+  "danger",
+  "danger-primary",
+  "danger-secondary",
+];
+const isCustomTextColor = (value: string) => CUSTOM_TEXT_COLORS.includes(value);
+
+const twMerge = extendTailwindMerge<"custom-typography" | "custom-text-color">({
+  override: {
+    classGroups: {
+      // Override font-size to include custom numeric sizes and exclude custom typography/colors
+      "font-size": [
+        {
+          text: [
+            (value: string) => isCustomFontSize(value) || (!isCustomTypography(value) && !isCustomTextColor(value)),
+          ],
+        },
+      ],
+    },
+  },
+  extend: {
+    classGroups: {
+      // Custom typography in its own group
+      "custom-typography": [{ text: [isCustomTypography] }],
+      // Custom text colors in their own group (won't conflict with font sizes)
+      "custom-text-color": [{ text: [isCustomTextColor] }],
+    },
+  },
+});
 
 export const cn = (...inputs: ClassValue[]) => twMerge(clsx(inputs));
diff --git a/packages/propel/src/utils/index.ts b/packages/propel/src/utils/index.ts
index e429b296a..f52eda255 100644
--- a/packages/propel/src/utils/index.ts
+++ b/packages/propel/src/utils/index.ts
@@ -1,2 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./classname";
 export * from "./placement";
diff --git a/packages/propel/src/utils/placement.ts b/packages/propel/src/utils/placement.ts
index b15012737..eace1b8a0 100644
--- a/packages/propel/src/utils/placement.ts
+++ b/packages/propel/src/utils/placement.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // types
 export type TPlacement =
   | "auto"
diff --git a/packages/propel/tailwind.config.ts b/packages/propel/tailwind.config.ts
deleted file mode 100644
index 859971bab..000000000
--- a/packages/propel/tailwind.config.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import type { Config } from "tailwindcss";
-import sharedConfig from "@plane/tailwind-config/tailwind.config";
-
-export default {
-  ...sharedConfig,
-  content: ["./src/**/*.{ts,tsx}"],
-} satisfies Config;
diff --git a/packages/propel/tsdown.config.ts b/packages/propel/tsdown.config.ts
index 93d04c386..8c3c3d8e7 100644
--- a/packages/propel/tsdown.config.ts
+++ b/packages/propel/tsdown.config.ts
@@ -5,6 +5,7 @@ export default defineConfig({
     "src/accordion/index.ts",
     "src/animated-counter/index.ts",
     "src/avatar/index.ts",
+    "src/badge/index.ts",
     "src/banner/index.ts",
     "src/button/index.ts",
     "src/calendar/index.ts",
@@ -19,6 +20,7 @@ export default defineConfig({
     "src/emoji-icon-picker/index.ts",
     "src/emoji-reaction/index.ts",
     "src/emoji-reaction-picker/index.ts",
+    "src/icon-button/index.ts",
     "src/icons/index.ts",
     "src/input/index.ts",
     "src/menu/index.ts",
@@ -42,8 +44,6 @@ export default defineConfig({
   exports: {
     customExports: (exports) => ({
       ...exports,
-      "./styles/fonts.css": "./dist/styles/fonts/index.css",
-      "./styles/fonts": "./dist/styles/fonts/index.css",
       "./styles/react-day-picker.css": "./dist/styles/react-day-picker.css",
       "./styles/react-day-picker": "./dist/styles/react-day-picker.css",
     }),
diff --git a/packages/services/package.json b/packages/services/package.json
index 3e42079ba..e4590d179 100644
--- a/packages/services/package.json
+++ b/packages/services/package.json
@@ -1,38 +1,35 @@
 {
   "name": "@plane/services",
-  "version": "1.2.3",
-  "license": "AGPL-3.0",
+  "version": "1.3.0",
   "private": true,
+  "license": "AGPL-3.0",
   "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "exports": {
-    ".": {
-      "types": "./dist/index-BliaS-AT.d.ts",
-      "import": "./dist/index.js"
-    },
+    ".": "./dist/index.js",
     "./package.json": "./package.json"
   },
   "scripts": {
     "build": "tsdown",
-    "dev": "tsdown --watch",
-    "check:lint": "eslint . --max-warnings=1131",
+    "dev": "tsdown --watch --no-clean",
+    "check:lint": "oxlint --max-warnings=6 .",
     "check:types": "tsc --noEmit",
-    "check:format": "prettier --check .",
-    "fix:lint": "eslint . --fix --max-warnings=1131",
-    "fix:format": "prettier --write .",
+    "check:format": "oxfmt --check .",
+    "fix:lint": "oxlint --fix .",
+    "fix:format": "oxfmt .",
     "clean": "rm -rf .turbo && rm -rf .next && rm -rf node_modules && rm -rf dist"
   },
   "dependencies": {
     "@plane/constants": "workspace:*",
     "@plane/types": "workspace:*",
     "axios": "catalog:",
-    "file-type": "^21.0.0"
+    "file-type": "^21.3.1"
   },
   "devDependencies": {
     "@plane/typescript-config": "workspace:*",
     "tsdown": "catalog:",
     "typescript": "catalog:"
-  },
-  "main": "./dist/index.js",
-  "module": "./dist/index.js",
-  "types": "./dist/index.d.ts"
+  }
 }
diff --git a/packages/services/src/ai/ai.service.ts b/packages/services/src/ai/ai.service.ts
index 3f2054ac7..7a34a8ca5 100644
--- a/packages/services/src/ai/ai.service.ts
+++ b/packages/services/src/ai/ai.service.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // plane web constants
 import type { AI_EDITOR_TASKS } from "@plane/constants";
 import { API_BASE_URL } from "@plane/constants";
diff --git a/packages/services/src/ai/index.ts b/packages/services/src/ai/index.ts
index bce346aa6..0b701ad5d 100644
--- a/packages/services/src/ai/index.ts
+++ b/packages/services/src/ai/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./ai.service";
diff --git a/packages/services/src/api.service.ts b/packages/services/src/api.service.ts
index 7cdeb3f28..3284a8aad 100644
--- a/packages/services/src/api.service.ts
+++ b/packages/services/src/api.service.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { AxiosInstance, AxiosRequestConfig } from "axios";
 import axios from "axios";
 
diff --git a/packages/services/src/auth/auth.service.ts b/packages/services/src/auth/auth.service.ts
index c32c93e66..8b38b5e0f 100644
--- a/packages/services/src/auth/auth.service.ts
+++ b/packages/services/src/auth/auth.service.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { API_BASE_URL } from "@plane/constants";
 // types
 import type { ICsrfTokenData, IEmailCheckData, IEmailCheckResponse } from "@plane/types";
diff --git a/packages/services/src/auth/index.ts b/packages/services/src/auth/index.ts
index 340b36856..032df6138 100644
--- a/packages/services/src/auth/index.ts
+++ b/packages/services/src/auth/index.ts
@@ -1,2 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./auth.service";
 export * from "./sites-auth.service";
diff --git a/packages/services/src/auth/sites-auth.service.ts b/packages/services/src/auth/sites-auth.service.ts
index 8e2bf8ea5..a23ea576f 100644
--- a/packages/services/src/auth/sites-auth.service.ts
+++ b/packages/services/src/auth/sites-auth.service.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { API_BASE_URL } from "@plane/constants";
 // types
 import type { IEmailCheckData, IEmailCheckResponse } from "@plane/types";
diff --git a/packages/services/src/cycle/cycle-analytics.service.ts b/packages/services/src/cycle/cycle-analytics.service.ts
index c9e14441e..0e9c46489 100644
--- a/packages/services/src/cycle/cycle-analytics.service.ts
+++ b/packages/services/src/cycle/cycle-analytics.service.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { API_BASE_URL } from "@plane/constants";
 import type { TCycleDistribution, TProgressSnapshot, TCycleEstimateDistribution } from "@plane/types";
 import { APIService } from "../api.service";
diff --git a/packages/services/src/cycle/cycle-archive.service.ts b/packages/services/src/cycle/cycle-archive.service.ts
index 09d3e9687..fc005fb26 100644
--- a/packages/services/src/cycle/cycle-archive.service.ts
+++ b/packages/services/src/cycle/cycle-archive.service.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { API_BASE_URL } from "@plane/constants";
 import type { ICycle } from "@plane/types";
 import { APIService } from "../api.service";
diff --git a/packages/services/src/cycle/cycle-operations.service.ts b/packages/services/src/cycle/cycle-operations.service.ts
index 43c01396c..77a8643aa 100644
--- a/packages/services/src/cycle/cycle-operations.service.ts
+++ b/packages/services/src/cycle/cycle-operations.service.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { API_BASE_URL } from "@plane/constants";
 import { APIService } from "../api.service";
 
diff --git a/packages/services/src/cycle/cycle.service.ts b/packages/services/src/cycle/cycle.service.ts
index 961e5588a..8dadeedf2 100644
--- a/packages/services/src/cycle/cycle.service.ts
+++ b/packages/services/src/cycle/cycle.service.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { API_BASE_URL } from "@plane/constants";
 import type { CycleDateCheckData, ICycle, TIssuesResponse, IWorkspaceActiveCyclesResponse } from "@plane/types";
 import { APIService } from "../api.service";
diff --git a/packages/services/src/cycle/index.ts b/packages/services/src/cycle/index.ts
index 6f5dbc679..d53702a15 100644
--- a/packages/services/src/cycle/index.ts
+++ b/packages/services/src/cycle/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./cycle-analytics.service";
 export * from "./cycle-archive.service";
 export * from "./cycle-operations.service";
diff --git a/packages/services/src/cycle/sites-cycle.service.ts b/packages/services/src/cycle/sites-cycle.service.ts
index 0fb17407b..4a9017318 100644
--- a/packages/services/src/cycle/sites-cycle.service.ts
+++ b/packages/services/src/cycle/sites-cycle.service.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // plane imports
 import { API_BASE_URL } from "@plane/constants";
 import type { TPublicCycle } from "@plane/types";
diff --git a/packages/services/src/dashboard/dashboard.service.ts b/packages/services/src/dashboard/dashboard.service.ts
index 2934b4f6a..9b987e93a 100644
--- a/packages/services/src/dashboard/dashboard.service.ts
+++ b/packages/services/src/dashboard/dashboard.service.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { API_BASE_URL } from "@plane/constants";
 import type { THomeDashboardResponse, TWidget, TWidgetStatsResponse, TWidgetStatsRequestParams } from "@plane/types";
 import { APIService } from "../api.service";
diff --git a/packages/services/src/dashboard/index.ts b/packages/services/src/dashboard/index.ts
index 79e3f0400..52a2e8675 100644
--- a/packages/services/src/dashboard/index.ts
+++ b/packages/services/src/dashboard/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./dashboard.service";
diff --git a/packages/services/src/developer/api-token.service.ts b/packages/services/src/developer/api-token.service.ts
index 229d62c33..b318053a4 100644
--- a/packages/services/src/developer/api-token.service.ts
+++ b/packages/services/src/developer/api-token.service.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { API_BASE_URL } from "@plane/constants";
 import type { IApiToken } from "@plane/types";
 import { APIService } from "../api.service";
diff --git a/packages/services/src/developer/index.ts b/packages/services/src/developer/index.ts
index a78a7b092..b27617136 100644
--- a/packages/services/src/developer/index.ts
+++ b/packages/services/src/developer/index.ts
@@ -1,2 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./api-token.service";
 export * from "./webhook.service";
diff --git a/packages/services/src/developer/webhook.service.ts b/packages/services/src/developer/webhook.service.ts
index a9bb7d799..7ae343652 100644
--- a/packages/services/src/developer/webhook.service.ts
+++ b/packages/services/src/developer/webhook.service.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { API_BASE_URL } from "@plane/constants";
 import type { IWebhook } from "@plane/types";
 import { APIService } from "../api.service";
diff --git a/packages/services/src/file/file-upload.service.ts b/packages/services/src/file/file-upload.service.ts
index 6613cf1d5..32ca4de51 100644
--- a/packages/services/src/file/file-upload.service.ts
+++ b/packages/services/src/file/file-upload.service.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import axios from "axios";
 // api service
 import { APIService } from "../api.service";
diff --git a/packages/services/src/file/file.service.ts b/packages/services/src/file/file.service.ts
index fe1e747d4..725bc891c 100644
--- a/packages/services/src/file/file.service.ts
+++ b/packages/services/src/file/file.service.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // plane imports
 import { API_BASE_URL } from "@plane/constants";
 // api service
diff --git a/packages/services/src/file/helper.ts b/packages/services/src/file/helper.ts
index 499d943b4..b8e962839 100644
--- a/packages/services/src/file/helper.ts
+++ b/packages/services/src/file/helper.ts
@@ -1,7 +1,53 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // external imports
 import { fileTypeFromBuffer } from "file-type";
 // plane imports
 import type { TFileMetaDataLite, TFileSignedURLResponse } from "@plane/types";
+import { DANGEROUS_EXTENSIONS } from "@plane/constants";
+
+/**
+ * @description Filename validation - checks for double extensions and dangerous patterns
+ * @param {string} filename
+ * @returns {string | null} Error message if invalid, null if valid
+ */
+const validateFilename = (filename: string): string | null => {
+  if (!filename || filename.trim().length === 0) {
+    return "Filename cannot be empty";
+  }
+
+  // Check for dot files (e.g., .htaccess, .env)
+  if (filename.startsWith(".")) {
+    return "Hidden files (starting with dot) are not allowed";
+  }
+
+  // Check for path separators
+  if (filename.includes("/") || filename.includes("\\")) {
+    return "Filename cannot contain path separators";
+  }
+
+  const parts = filename.split(".");
+
+  // Check for double extensions with dangerous patterns
+  if (parts.length >= 3) {
+    const secondLastExt = parts[parts.length - 2]?.toLowerCase() || "";
+    if (DANGEROUS_EXTENSIONS.includes(secondLastExt)) {
+      return "File has suspicious double extension";
+    }
+  }
+
+  // Check if the actual extension is dangerous
+  const extension = parts[parts.length - 1]?.toLowerCase() || "";
+  if (DANGEROUS_EXTENSIONS.includes(extension)) {
+    return `File extension '${extension}' is not allowed`;
+  }
+
+  return null;
+};
 
 /**
  * @description from the provided signed URL response, generate a payload to be used to upload the file
@@ -36,28 +82,29 @@ const detectMimeTypeFromSignature = async (file: File): Promise<string> => {
 };
 
 /**
- * @description Determine the MIME type of a file using multiple detection methods
+ * @description Validate and detect the MIME type of a file using signature detection
+ * Also performs basic security checks on filename
  * @param {File} file
- * @returns {Promise<string>} detected MIME type
+ * @returns {Promise<string>} validated and detected MIME type
  */
-const detectFileType = async (file: File): Promise<string> => {
-  // check if the file has a MIME type
-  if (file.type && file.type.trim() !== "") {
-    return file.type;
+const validateAndDetectFileType = async (file: File): Promise<string> => {
+  // Basic filename validation
+  const filenameError = validateFilename(file.name);
+  if (filenameError) {
+    console.warn(`File validation warning: ${filenameError}`);
   }
 
-  // detect from file signature using file-type library
   try {
     const signatureType = await detectMimeTypeFromSignature(file);
     if (signatureType) {
       return signatureType;
     }
   } catch (_error) {
-    console.error("Error detecting file type from signature:", _error);
+    console.warn("Error detecting file type from signature:", _error);
   }
 
   // fallback for unknown files
-  return "application/octet-stream";
+  return "";
 };
 
 /**
@@ -66,7 +113,7 @@ const detectFileType = async (file: File): Promise<string> => {
  * @returns {Promise<TFileMetaDataLite>} payload with file info
  */
 export const getFileMetaDataForUpload = async (file: File): Promise<TFileMetaDataLite> => {
-  const fileType = await detectFileType(file);
+  const fileType = await validateAndDetectFileType(file);
   return {
     name: file.name,
     size: file.size,
diff --git a/packages/services/src/file/index.ts b/packages/services/src/file/index.ts
index d3b2a5290..e09f8e00a 100644
--- a/packages/services/src/file/index.ts
+++ b/packages/services/src/file/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./file-upload.service";
 export * from "./sites-file.service";
 export * from "./file.service";
diff --git a/packages/services/src/file/sites-file.service.ts b/packages/services/src/file/sites-file.service.ts
index fa2713282..debe945f8 100644
--- a/packages/services/src/file/sites-file.service.ts
+++ b/packages/services/src/file/sites-file.service.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // plane imports
 import { API_BASE_URL } from "@plane/constants";
 // local services
diff --git a/packages/services/src/index.ts b/packages/services/src/index.ts
index b1f966840..9ec22ae0b 100644
--- a/packages/services/src/index.ts
+++ b/packages/services/src/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./ai";
 export * from "./developer";
 export * from "./auth";
diff --git a/packages/services/src/indexedDB.service.ts b/packages/services/src/indexedDB.service.ts
index 1b568f2ae..bb89d51e2 100644
--- a/packages/services/src/indexedDB.service.ts
+++ b/packages/services/src/indexedDB.service.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export abstract class IndexedDBService {
   private dbName: string;
   private version: number;
diff --git a/packages/services/src/instance/index.ts b/packages/services/src/instance/index.ts
index dd3d4a663..3fbe347b5 100644
--- a/packages/services/src/instance/index.ts
+++ b/packages/services/src/instance/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./instance.service";
diff --git a/packages/services/src/instance/instance.service.ts b/packages/services/src/instance/instance.service.ts
index 6af821d9b..39acb9572 100644
--- a/packages/services/src/instance/instance.service.ts
+++ b/packages/services/src/instance/instance.service.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // plane imports
 import { API_BASE_URL } from "@plane/constants";
 import type {
diff --git a/packages/services/src/intake/index.ts b/packages/services/src/intake/index.ts
index cde9ddbd3..0cf9b3466 100644
--- a/packages/services/src/intake/index.ts
+++ b/packages/services/src/intake/index.ts
@@ -1,2 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./intake.service";
 export * from "./issue.service";
diff --git a/packages/services/src/intake/intake.service.ts b/packages/services/src/intake/intake.service.ts
index 576790ef4..81deb1035 100644
--- a/packages/services/src/intake/intake.service.ts
+++ b/packages/services/src/intake/intake.service.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { API_BASE_URL } from "@plane/constants";
 import { APIService } from "../api.service";
 
diff --git a/packages/services/src/intake/issue.service.ts b/packages/services/src/intake/issue.service.ts
index 009bc0c2f..be6430eed 100644
--- a/packages/services/src/intake/issue.service.ts
+++ b/packages/services/src/intake/issue.service.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { API_BASE_URL } from "@plane/constants";
 import { APIService } from "../api.service";
 
diff --git a/packages/services/src/issue/index.ts b/packages/services/src/issue/index.ts
index 79d4537cd..0e0f73c98 100644
--- a/packages/services/src/issue/index.ts
+++ b/packages/services/src/issue/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./sites-issue.service";
diff --git a/packages/services/src/issue/sites-issue.service.ts b/packages/services/src/issue/sites-issue.service.ts
index a715f2093..788c82ff7 100644
--- a/packages/services/src/issue/sites-issue.service.ts
+++ b/packages/services/src/issue/sites-issue.service.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // plane imports
 import { API_BASE_URL } from "@plane/constants";
 import type { IPublicIssue, TIssuePublicComment, TPublicIssuesResponse } from "@plane/types";
diff --git a/packages/services/src/label/index.ts b/packages/services/src/label/index.ts
index 5bf89fa96..f3fdc38c0 100644
--- a/packages/services/src/label/index.ts
+++ b/packages/services/src/label/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./sites-label.service";
diff --git a/packages/services/src/label/sites-label.service.ts b/packages/services/src/label/sites-label.service.ts
index 0fb924f34..493880d06 100644
--- a/packages/services/src/label/sites-label.service.ts
+++ b/packages/services/src/label/sites-label.service.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // plane imports
 import { API_BASE_URL } from "@plane/constants";
 import type { IIssueLabel } from "@plane/types";
diff --git a/packages/services/src/live.service.ts b/packages/services/src/live.service.ts
index ae4b80864..89009f6fe 100644
--- a/packages/services/src/live.service.ts
+++ b/packages/services/src/live.service.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { API_BASE_URL } from "@plane/constants";
 import { APIService } from "./api.service";
 
diff --git a/packages/services/src/module/index.ts b/packages/services/src/module/index.ts
index ad4921228..9eea4f1a5 100644
--- a/packages/services/src/module/index.ts
+++ b/packages/services/src/module/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./link.service";
 export * from "./module.service";
 export * from "./operations.service";
diff --git a/packages/services/src/module/link.service.ts b/packages/services/src/module/link.service.ts
index 8c8ec3f47..b0a0e7118 100644
--- a/packages/services/src/module/link.service.ts
+++ b/packages/services/src/module/link.service.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // types
 import type { ILinkDetails, ModuleLink } from "@plane/types";
 // services
@@ -12,9 +18,6 @@ export class ModuleLinkService extends APIService {
    * Creates an instance of ModuleLinkService.
    * @param {string} baseURL - The base URL for the API endpoints
    */
-  constructor(baseURL: string) {
-    super(baseURL);
-  }
 
   /**
    * Creates a new module link.
diff --git a/packages/services/src/module/module.service.ts b/packages/services/src/module/module.service.ts
index 21321b36e..01bd30ef7 100644
--- a/packages/services/src/module/module.service.ts
+++ b/packages/services/src/module/module.service.ts
@@ -1,13 +1,15 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // types
 import type { IModule, ILinkDetails, ModuleLink, TIssuesResponse } from "@plane/types";
 // services
 import { APIService } from "../api.service";
 
 export class ModuleService extends APIService {
-  constructor(baseURL: string) {
-    super(baseURL);
-  }
-
   async workspaceModulesList(workspaceSlug: string): Promise<IModule[]> {
     return this.get(`/api/workspaces/${workspaceSlug}/modules/`)
       .then((response) => response?.data)
diff --git a/packages/services/src/module/operations.service.ts b/packages/services/src/module/operations.service.ts
index 9185873da..99b14269b 100644
--- a/packages/services/src/module/operations.service.ts
+++ b/packages/services/src/module/operations.service.ts
@@ -1,13 +1,15 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // types
 // import type { IModule, ILinkDetails, ModuleLink, TIssuesResponse } from "@plane/types";
 // services
 import { APIService } from "../api.service";
 
 export class ModuleOperationService extends APIService {
-  constructor(baseURL: string) {
-    super(baseURL);
-  }
-
   /**
    * Add issues to a module
    * @param {string} workspaceSlug - The slug of the workspace
diff --git a/packages/services/src/module/sites-module.service.ts b/packages/services/src/module/sites-module.service.ts
index b99b57955..d6f61c2b7 100644
--- a/packages/services/src/module/sites-module.service.ts
+++ b/packages/services/src/module/sites-module.service.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // plane imports
 import { API_BASE_URL } from "@plane/constants";
 // api service
diff --git a/packages/services/src/project/index.ts b/packages/services/src/project/index.ts
index 4cc54d2c2..58b39cccb 100644
--- a/packages/services/src/project/index.ts
+++ b/packages/services/src/project/index.ts
@@ -1,2 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./view.service";
 export * from "./sites-publish.service";
diff --git a/packages/services/src/project/sites-publish.service.ts b/packages/services/src/project/sites-publish.service.ts
index af2c41a4f..bc14da8e7 100644
--- a/packages/services/src/project/sites-publish.service.ts
+++ b/packages/services/src/project/sites-publish.service.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // plane imports
 import { API_BASE_URL } from "@plane/constants";
 import type { TProjectPublishSettings } from "@plane/types";
diff --git a/packages/services/src/project/view.service.ts b/packages/services/src/project/view.service.ts
index 7eef71911..02782cd2c 100644
--- a/packages/services/src/project/view.service.ts
+++ b/packages/services/src/project/view.service.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // plane imports
 import { API_BASE_URL } from "@plane/constants";
 // api services
diff --git a/packages/services/src/state/index.ts b/packages/services/src/state/index.ts
index 5b49aad0e..4c0838924 100644
--- a/packages/services/src/state/index.ts
+++ b/packages/services/src/state/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./sites-state.service";
diff --git a/packages/services/src/state/sites-state.service.ts b/packages/services/src/state/sites-state.service.ts
index 7cf325e49..32c563a23 100644
--- a/packages/services/src/state/sites-state.service.ts
+++ b/packages/services/src/state/sites-state.service.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // plane imports
 import { API_BASE_URL } from "@plane/constants";
 import type { IState } from "@plane/types";
diff --git a/packages/services/src/user/favorite.service.ts b/packages/services/src/user/favorite.service.ts
index 0c6e0497f..e832b73cd 100644
--- a/packages/services/src/user/favorite.service.ts
+++ b/packages/services/src/user/favorite.service.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { API_BASE_URL } from "@plane/constants";
 import type { IFavorite } from "@plane/types";
 import { APIService } from "../api.service";
diff --git a/packages/services/src/user/index.ts b/packages/services/src/user/index.ts
index f01a1a47b..96e196364 100644
--- a/packages/services/src/user/index.ts
+++ b/packages/services/src/user/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./favorite.service";
 export * from "./user.service";
 export * from "./sites-member.service";
diff --git a/packages/services/src/user/sites-member.service.ts b/packages/services/src/user/sites-member.service.ts
index 33a4ef4f0..c9a641f6d 100644
--- a/packages/services/src/user/sites-member.service.ts
+++ b/packages/services/src/user/sites-member.service.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // plane imports
 import { API_BASE_URL } from "@plane/constants";
 import type { TPublicMember } from "@plane/types";
diff --git a/packages/services/src/user/user.service.ts b/packages/services/src/user/user.service.ts
index c177b1ffd..9ede9a791 100644
--- a/packages/services/src/user/user.service.ts
+++ b/packages/services/src/user/user.service.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // plane imports
 import { API_BASE_URL } from "@plane/constants";
 import type { IUser, TUserProfile } from "@plane/types";
diff --git a/packages/services/src/workspace/index.ts b/packages/services/src/workspace/index.ts
index a48efdee2..6b67a9b65 100644
--- a/packages/services/src/workspace/index.ts
+++ b/packages/services/src/workspace/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./invitation.service";
 export * from "./member.service";
 export * from "./notification.service";
diff --git a/packages/services/src/workspace/instance-workspace.service.ts b/packages/services/src/workspace/instance-workspace.service.ts
index 7ac3d4ce4..c38fb665a 100644
--- a/packages/services/src/workspace/instance-workspace.service.ts
+++ b/packages/services/src/workspace/instance-workspace.service.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { API_BASE_URL } from "@plane/constants";
 import type { IWorkspace, TWorkspacePaginationInfo } from "@plane/types";
 import { APIService } from "../api.service";
diff --git a/packages/services/src/workspace/invitation.service.ts b/packages/services/src/workspace/invitation.service.ts
index 5cc74f5d5..392cdde8c 100644
--- a/packages/services/src/workspace/invitation.service.ts
+++ b/packages/services/src/workspace/invitation.service.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { API_BASE_URL } from "@plane/constants";
 import type { IWorkspaceMemberInvitation, IWorkspaceBulkInviteFormData, IWorkspaceMember } from "@plane/types";
 import { APIService } from "../api.service";
diff --git a/packages/services/src/workspace/member.service.ts b/packages/services/src/workspace/member.service.ts
index af9333669..ace8df389 100644
--- a/packages/services/src/workspace/member.service.ts
+++ b/packages/services/src/workspace/member.service.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { API_BASE_URL } from "@plane/constants";
 import type { IWorkspaceMemberMe, IWorkspaceMember, IUserProjectsRole } from "@plane/types";
 import { APIService } from "../api.service";
diff --git a/packages/services/src/workspace/notification.service.ts b/packages/services/src/workspace/notification.service.ts
index 30c588a04..c82ac55fa 100644
--- a/packages/services/src/workspace/notification.service.ts
+++ b/packages/services/src/workspace/notification.service.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { API_BASE_URL } from "@plane/constants";
 import type {
   TUnreadNotificationsCount,
diff --git a/packages/services/src/workspace/view.service.ts b/packages/services/src/workspace/view.service.ts
index 995a16eb3..99b8b6489 100644
--- a/packages/services/src/workspace/view.service.ts
+++ b/packages/services/src/workspace/view.service.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { API_BASE_URL } from "@plane/constants";
 import type { IWorkspaceView, TIssuesResponse } from "@plane/types";
 import { APIService } from "../api.service";
diff --git a/packages/services/src/workspace/workspace.service.ts b/packages/services/src/workspace/workspace.service.ts
index 14e84d2a2..3f1ad42e9 100644
--- a/packages/services/src/workspace/workspace.service.ts
+++ b/packages/services/src/workspace/workspace.service.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { API_BASE_URL } from "@plane/constants";
 import type { IWorkspace, ILastActiveWorkspaceDetails, IWorkspaceSearchResults } from "@plane/types";
 import { APIService } from "../api.service";
diff --git a/packages/services/tsdown.config.ts b/packages/services/tsdown.config.ts
index 78c3dcba8..92959eaf7 100644
--- a/packages/services/tsdown.config.ts
+++ b/packages/services/tsdown.config.ts
@@ -5,4 +5,5 @@ export default defineConfig({
   format: ["esm"],
   dts: true,
   platform: "neutral",
+  exports: true,
 });
diff --git a/packages/shared-state/package.json b/packages/shared-state/package.json
index a98d5eaed..87a2df2ab 100644
--- a/packages/shared-state/package.json
+++ b/packages/shared-state/package.json
@@ -1,17 +1,25 @@
 {
   "name": "@plane/shared-state",
-  "version": "1.2.3",
-  "license": "AGPL-3.0",
-  "description": "Shared state shared across multiple apps internally",
+  "version": "1.3.0",
   "private": true,
-  "main": "./src/index.ts",
-  "types": "./src/index.ts",
+  "description": "Shared state shared across multiple apps internally",
+  "license": "AGPL-3.0",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": "./dist/index.js",
+    "./package.json": "./package.json"
+  },
   "scripts": {
-    "check:lint": "eslint . --max-warnings=191",
+    "build": "tsdown",
+    "dev": "tsdown --watch --no-clean",
+    "check:lint": "oxlint --max-warnings=0 .",
     "check:types": "tsc --noEmit",
-    "check:format": "prettier --check .",
-    "fix:lint": "eslint . --fix --max-warnings=191",
-    "fix:format": "prettier --write .",
+    "check:format": "oxfmt --check .",
+    "fix:lint": "oxlint --fix .",
+    "fix:format": "oxfmt .",
     "clean": "rm -rf .turbo && rm -rf .next && rm -rf node_modules && rm -rf dist"
   },
   "dependencies": {
@@ -28,6 +36,7 @@
     "@plane/typescript-config": "workspace:*",
     "@types/lodash-es": "catalog:",
     "@types/node": "catalog:",
+    "tsdown": "catalog:",
     "typescript": "catalog:"
   }
 }
diff --git a/packages/shared-state/src/index.ts b/packages/shared-state/src/index.ts
index faaf31f83..7511c9629 100644
--- a/packages/shared-state/src/index.ts
+++ b/packages/shared-state/src/index.ts
@@ -1,2 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./store";
 export * from "./utils";
diff --git a/packages/shared-state/src/store/index.ts b/packages/shared-state/src/store/index.ts
index 186307610..b222ec93a 100644
--- a/packages/shared-state/src/store/index.ts
+++ b/packages/shared-state/src/store/index.ts
@@ -1,2 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./rich-filters";
 export * from "./work-item-filters";
diff --git a/packages/shared-state/src/store/rich-filters/adapter.ts b/packages/shared-state/src/store/rich-filters/adapter.ts
index ec9fe58c5..92e211a6f 100644
--- a/packages/shared-state/src/store/rich-filters/adapter.ts
+++ b/packages/shared-state/src/store/rich-filters/adapter.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // plane imports
 import type { IFilterAdapter, TExternalFilter, TFilterExpression, TFilterProperty } from "@plane/types";
 
diff --git a/packages/shared-state/src/store/rich-filters/config-manager.ts b/packages/shared-state/src/store/rich-filters/config-manager.ts
index 62c079a88..80b23e995 100644
--- a/packages/shared-state/src/store/rich-filters/config-manager.ts
+++ b/packages/shared-state/src/store/rich-filters/config-manager.ts
@@ -1,9 +1,15 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { action, computed, makeObservable, observable } from "mobx";
 import { computedFn } from "mobx-utils";
 // plane imports
 import type { TConfigOptions } from "@plane/constants";
 import { DEFAULT_FILTER_CONFIG_OPTIONS } from "@plane/constants";
-import type { TExternalFilter, TFilterConfig, TFilterProperty, TFilterValue } from "@plane/types";
+import type { TExternalFilter, TFilterConfig, TFilterProperty } from "@plane/types";
 // local imports
 import type { IFilterConfig } from "./config";
 import { FilterConfig } from "./config";
@@ -24,17 +30,17 @@ import type { IFilterInstance } from "./filter";
  */
 export interface IFilterConfigManager<P extends TFilterProperty> {
   // observables
-  filterConfigs: Map<P, IFilterConfig<P, TFilterValue>>; // filter property -> config
+  filterConfigs: Map<P, IFilterConfig<P>>; // filter property -> config
   configOptions: TConfigOptions;
   areConfigsReady: boolean;
   // computed
-  allAvailableConfigs: IFilterConfig<P, TFilterValue>[];
+  allAvailableConfigs: IFilterConfig<P>[];
   // computed functions
-  getConfigByProperty: (property: P) => IFilterConfig<P, TFilterValue> | undefined;
+  getConfigByProperty: (property: P) => IFilterConfig<P> | undefined;
   // helpers
-  register: <C extends TFilterConfig<P, TFilterValue>>(config: C) => void;
-  registerAll: (configs: TFilterConfig<P, TFilterValue>[]) => void;
-  updateConfigByProperty: (property: P, configUpdates: Partial<TFilterConfig<P, TFilterValue>>) => void;
+  register: <C extends TFilterConfig<P>>(config: C) => void;
+  registerAll: (configs: TFilterConfig<P>[]) => void;
+  updateConfigByProperty: (property: P, configUpdates: Partial<TFilterConfig<P>>) => void;
   setAreConfigsReady: (value: boolean) => void;
 }
 
@@ -115,7 +121,7 @@ export class FilterConfigManager<
    * @returns The config for the property, or undefined if not found.
    */
   getConfigByProperty: IFilterConfigManager<P>["getConfigByProperty"] = computedFn(
-    (property) => this.filterConfigs.get(property) as IFilterConfig<P, TFilterValue>
+    (property) => this.filterConfigs.get(property) as IFilterConfig<P>
   );
 
   // ------------ helpers ------------
@@ -165,7 +171,7 @@ export class FilterConfigManager<
 
   // ------------ private computed ------------
 
-  private get _allConfigs(): IFilterConfig<P, TFilterValue>[] {
+  private get _allConfigs(): IFilterConfig<P>[] {
     return Array.from(this.filterConfigs.values());
   }
 
@@ -173,7 +179,7 @@ export class FilterConfigManager<
    * Returns all enabled filterConfigs.
    * @returns All enabled filterConfigs.
    */
-  private get _allEnabledConfigs(): IFilterConfig<P, TFilterValue>[] {
+  private get _allEnabledConfigs(): IFilterConfig<P>[] {
     return this._allConfigs.filter((config) => config.isEnabled);
   }
 
diff --git a/packages/shared-state/src/store/rich-filters/config.ts b/packages/shared-state/src/store/rich-filters/config.ts
index 3eb0cec0a..3b2e9b163 100644
--- a/packages/shared-state/src/store/rich-filters/config.ts
+++ b/packages/shared-state/src/store/rich-filters/config.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { set } from "lodash-es";
 import { action, computed, makeObservable, observable, runInAction } from "mobx";
 import { computedFn } from "mobx-utils";
@@ -25,41 +31,35 @@ type TOperatorOptionForDisplay = {
   label: string;
 };
 
-export interface IFilterConfig<P extends TFilterProperty, V extends TFilterValue = TFilterValue> extends TFilterConfig<
-  P,
-  V
-> {
+export interface IFilterConfig<P extends TFilterProperty> extends TFilterConfig<P> {
   // computed
   allEnabledSupportedOperators: TSupportedOperators[];
   firstOperator: TSupportedOperators | undefined;
   // computed functions
   getOperatorConfig: (
     operator: TAllAvailableOperatorsForDisplay
-  ) => TOperatorSpecificConfigs<V>[keyof TOperatorSpecificConfigs<V>] | undefined;
+  ) => TOperatorSpecificConfigs[keyof TOperatorSpecificConfigs] | undefined;
   getLabelForOperator: (operator: TAllAvailableOperatorsForDisplay | undefined) => string;
-  getDisplayOperatorByValue: <T extends TSupportedOperators>(operator: T, value: V) => T;
-  getAllDisplayOperatorOptionsByValue: (value: V) => TOperatorOptionForDisplay[];
+  getDisplayOperatorByValue: <T extends TSupportedOperators>(operator: T, value: TFilterValue) => T;
+  getAllDisplayOperatorOptionsByValue: (value: TFilterValue) => TOperatorOptionForDisplay[];
   // actions
-  mutate: (updates: Partial<TFilterConfig<P, V>>) => void;
+  mutate: (updates: Partial<TFilterConfig<P>>) => void;
 }
 
-export class FilterConfig<P extends TFilterProperty, V extends TFilterValue = TFilterValue> implements IFilterConfig<
-  P,
-  V
-> {
+export class FilterConfig<P extends TFilterProperty> implements IFilterConfig<P> {
   // observables
-  id: IFilterConfig<P, V>["id"];
-  label: IFilterConfig<P, V>["label"];
-  icon?: IFilterConfig<P, V>["icon"];
-  isEnabled: IFilterConfig<P, V>["isEnabled"];
-  supportedOperatorConfigsMap: IFilterConfig<P, V>["supportedOperatorConfigsMap"];
-  allowMultipleFilters: IFilterConfig<P, V>["allowMultipleFilters"];
+  id: IFilterConfig<P>["id"];
+  label: IFilterConfig<P>["label"];
+  icon?: IFilterConfig<P>["icon"];
+  isEnabled: IFilterConfig<P>["isEnabled"];
+  supportedOperatorConfigsMap: IFilterConfig<P>["supportedOperatorConfigsMap"];
+  allowMultipleFilters: IFilterConfig<P>["allowMultipleFilters"];
 
   /**
    * Creates a new FilterConfig instance.
    * @param params - The parameters for the filter config.
    */
-  constructor(params: TFilterConfig<P, V>) {
+  constructor(params: TFilterConfig<P>) {
     this.id = params.id;
     this.label = params.label;
     this.icon = params.icon;
@@ -88,7 +88,7 @@ export class FilterConfig<P extends TFilterProperty, V extends TFilterValue = TF
    * Returns all supported operators.
    * @returns All supported operators.
    */
-  get allEnabledSupportedOperators(): IFilterConfig<P, V>["allEnabledSupportedOperators"] {
+  get allEnabledSupportedOperators(): IFilterConfig<P>["allEnabledSupportedOperators"] {
     return Array.from(this.supportedOperatorConfigsMap.entries())
       .filter(([, operatorConfig]) => operatorConfig.isOperatorEnabled)
       .map(([operator]) => operator);
@@ -98,7 +98,7 @@ export class FilterConfig<P extends TFilterProperty, V extends TFilterValue = TF
    * Returns the first operator.
    * @returns The first operator.
    */
-  get firstOperator(): IFilterConfig<P, V>["firstOperator"] {
+  get firstOperator(): IFilterConfig<P>["firstOperator"] {
     return this.allEnabledSupportedOperators[0];
   }
 
@@ -109,7 +109,7 @@ export class FilterConfig<P extends TFilterProperty, V extends TFilterValue = TF
    * @param operator - The operator.
    * @returns The operator config.
    */
-  getOperatorConfig: IFilterConfig<P, V>["getOperatorConfig"] = computedFn((operator) =>
+  getOperatorConfig: IFilterConfig<P>["getOperatorConfig"] = computedFn((operator) =>
     this.supportedOperatorConfigsMap.get(getOperatorForPayload(operator).operator)
   );
 
@@ -118,7 +118,7 @@ export class FilterConfig<P extends TFilterProperty, V extends TFilterValue = TF
    * @param operator - The operator.
    * @returns The label for the operator.
    */
-  getLabelForOperator: IFilterConfig<P, V>["getLabelForOperator"] = computedFn((operator) => {
+  getLabelForOperator: IFilterConfig<P>["getLabelForOperator"] = computedFn((operator) => {
     if (!operator) return EMPTY_OPERATOR_LABEL;
 
     const operatorConfig = this.getOperatorConfig(operator);
@@ -139,7 +139,7 @@ export class FilterConfig<P extends TFilterProperty, V extends TFilterValue = TF
    * @param value - The value.
    * @returns The operator for the value.
    */
-  getDisplayOperatorByValue: IFilterConfig<P, V>["getDisplayOperatorByValue"] = computedFn((operator, value) => {
+  getDisplayOperatorByValue: IFilterConfig<P>["getDisplayOperatorByValue"] = computedFn((operator, value) => {
     const operatorConfig = this.getOperatorConfig(operator);
     if (operatorConfig?.type === FILTER_FIELD_TYPE.MULTI_SELECT && (Array.isArray(value) ? value.length : 0) <= 1) {
       return operatorConfig.singleValueOperator as typeof operator;
@@ -155,28 +155,26 @@ export class FilterConfig<P extends TFilterProperty, V extends TFilterValue = TF
    * @param value - The current filter value used to determine the appropriate operator variant
    * @returns Array of operator options with their display labels and values
    */
-  getAllDisplayOperatorOptionsByValue: IFilterConfig<P, V>["getAllDisplayOperatorOptionsByValue"] = computedFn(
-    (value) => {
-      const operatorOptions: TOperatorOptionForDisplay[] = [];
+  getAllDisplayOperatorOptionsByValue: IFilterConfig<P>["getAllDisplayOperatorOptionsByValue"] = computedFn((value) => {
+    const operatorOptions: TOperatorOptionForDisplay[] = [];
 
-      // Process each supported operator to build display options
-      for (const operator of this.allEnabledSupportedOperators) {
-        const displayOperator = this.getDisplayOperatorByValue(operator, value);
-        const displayOperatorLabel = this.getLabelForOperator(displayOperator);
-        operatorOptions.push({
-          value: operator,
-          label: displayOperatorLabel,
-        });
+    // Process each supported operator to build display options
+    for (const operator of this.allEnabledSupportedOperators) {
+      const displayOperator = this.getDisplayOperatorByValue(operator, value);
+      const displayOperatorLabel = this.getLabelForOperator(displayOperator);
+      operatorOptions.push({
+        value: operator,
+        label: displayOperatorLabel,
+      });
 
-        const additionalOperatorOption = this._getAdditionalOperatorOptions(operator, value);
-        if (additionalOperatorOption) {
-          operatorOptions.push(additionalOperatorOption);
-        }
+      const additionalOperatorOption = this._getAdditionalOperatorOptions(operator, value);
+      if (additionalOperatorOption) {
+        operatorOptions.push(additionalOperatorOption);
       }
-
-      return operatorOptions;
     }
-  );
+
+    return operatorOptions;
+  });
 
   // ------------ actions ------------
 
@@ -184,11 +182,11 @@ export class FilterConfig<P extends TFilterProperty, V extends TFilterValue = TF
    * Mutates the config.
    * @param updates - The updates to apply to the config.
    */
-  mutate: IFilterConfig<P, V>["mutate"] = action((updates) => {
+  mutate: IFilterConfig<P>["mutate"] = action((updates) => {
     runInAction(() => {
       for (const key in updates) {
         if (updates.hasOwnProperty(key)) {
-          const configKey = key as keyof TFilterConfig<P, V>;
+          const configKey = key as keyof TFilterConfig<P>;
           set(this, configKey, updates[configKey]);
         }
       }
@@ -199,6 +197,6 @@ export class FilterConfig<P extends TFilterProperty, V extends TFilterValue = TF
 
   private _getAdditionalOperatorOptions = (
     _operator: TSupportedOperators,
-    _value: V
+    _value: TFilterValue
   ): TOperatorOptionForDisplay | undefined => undefined;
 }
diff --git a/packages/shared-state/src/store/rich-filters/filter-helpers.ts b/packages/shared-state/src/store/rich-filters/filter-helpers.ts
index 0c8a80757..40d615965 100644
--- a/packages/shared-state/src/store/rich-filters/filter-helpers.ts
+++ b/packages/shared-state/src/store/rich-filters/filter-helpers.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { cloneDeep } from "lodash-es";
 import { action, makeObservable, observable, toJS } from "mobx";
 // plane imports
diff --git a/packages/shared-state/src/store/rich-filters/filter.ts b/packages/shared-state/src/store/rich-filters/filter.ts
index 9166dd6fe..240c2f3a8 100644
--- a/packages/shared-state/src/store/rich-filters/filter.ts
+++ b/packages/shared-state/src/store/rich-filters/filter.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { cloneDeep, isEqual } from "lodash-es";
 import { action, computed, makeObservable, observable, toJS } from "mobx";
 import { computedFn } from "mobx-utils";
@@ -110,7 +116,11 @@ export interface IFilterInstance<P extends TFilterProperty, E extends TExternalF
     isNegation: boolean
   ) => void;
   updateConditionOperator: (conditionId: string, operator: TSupportedOperators, isNegation: boolean) => void;
-  updateConditionValue: <V extends TFilterValue>(conditionId: string, value: SingleOrArray<V>) => void;
+  updateConditionValue: <V extends TFilterValue>(
+    conditionId: string,
+    value: SingleOrArray<V>,
+    forceUpdate?: boolean
+  ) => void;
   removeCondition: (conditionId: string) => void;
   // config actions
   clearFilters: () => Promise<void>;
@@ -439,9 +449,10 @@ export class FilterInstance<P extends TFilterProperty, E extends TExternalFilter
    * Updates the value of a condition in the filter expression with automatic optimization.
    * @param conditionId - The id of the condition to update.
    * @param value - The new value for the condition.
+   * @param forceUpdate - Whether to force the update even if the value is the same as the condition before update.
    */
   updateConditionValue: IFilterInstance<P, E>["updateConditionValue"] = action(
-    <V extends TFilterValue>(conditionId: string, value: SingleOrArray<V>) => {
+    <V extends TFilterValue>(conditionId: string, value: SingleOrArray<V>, forceUpdate: boolean = false) => {
       // If the expression is not valid, return
       if (!this.expression) return;
 
@@ -458,7 +469,7 @@ export class FilterInstance<P extends TFilterProperty, E extends TExternalFilter
       }
 
       // If the value is the same as the condition before update, return
-      if (isEqual(conditionBeforeUpdate.value, value)) {
+      if (!forceUpdate && isEqual(conditionBeforeUpdate.value, value)) {
         return;
       }
 
diff --git a/packages/shared-state/src/store/rich-filters/index.ts b/packages/shared-state/src/store/rich-filters/index.ts
index eb3564ddc..d5d9fe0c0 100644
--- a/packages/shared-state/src/store/rich-filters/index.ts
+++ b/packages/shared-state/src/store/rich-filters/index.ts
@@ -1,2 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./adapter";
 export * from "./filter";
diff --git a/packages/shared-state/src/store/user.store.ts b/packages/shared-state/src/store/user.store.ts
index 2a0c30ef0..b288d25a8 100644
--- a/packages/shared-state/src/store/user.store.ts
+++ b/packages/shared-state/src/store/user.store.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { makeObservable, observable } from "mobx";
 import type { IWorkspaceStore } from "./workspace.store";
 
diff --git a/packages/shared-state/src/store/work-item-filters/adapter.ts b/packages/shared-state/src/store/work-item-filters/adapter.ts
index 155561dd5..8d009f415 100644
--- a/packages/shared-state/src/store/work-item-filters/adapter.ts
+++ b/packages/shared-state/src/store/work-item-filters/adapter.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // plane imports
 import { isEmpty } from "lodash-es";
 import type {
diff --git a/packages/shared-state/src/store/work-item-filters/filter.store.ts b/packages/shared-state/src/store/work-item-filters/filter.store.ts
index beaa4cd36..f7826ccc9 100644
--- a/packages/shared-state/src/store/work-item-filters/filter.store.ts
+++ b/packages/shared-state/src/store/work-item-filters/filter.store.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { action, makeObservable, observable } from "mobx";
 import { computedFn } from "mobx-utils";
 // plane imports
diff --git a/packages/shared-state/src/store/work-item-filters/index.ts b/packages/shared-state/src/store/work-item-filters/index.ts
index 073c940fe..00dd59cab 100644
--- a/packages/shared-state/src/store/work-item-filters/index.ts
+++ b/packages/shared-state/src/store/work-item-filters/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./adapter";
 export * from "./filter.store";
 export * from "./shared";
diff --git a/packages/shared-state/src/store/work-item-filters/shared.ts b/packages/shared-state/src/store/work-item-filters/shared.ts
index c2a4056ca..272f27b7b 100644
--- a/packages/shared-state/src/store/work-item-filters/shared.ts
+++ b/packages/shared-state/src/store/work-item-filters/shared.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // plane imports
 import type { EIssuesStoreType, TWorkItemFilterExpression, TWorkItemFilterProperty } from "@plane/types";
 // local imports
diff --git a/packages/shared-state/src/store/workspace.store.ts b/packages/shared-state/src/store/workspace.store.ts
index 18af2840a..74521cb6b 100644
--- a/packages/shared-state/src/store/workspace.store.ts
+++ b/packages/shared-state/src/store/workspace.store.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { makeObservable, observable } from "mobx";
 
 export interface IWorkspaceStore {
diff --git a/packages/shared-state/src/utils/index.ts b/packages/shared-state/src/utils/index.ts
index 38083592b..74153e61d 100644
--- a/packages/shared-state/src/utils/index.ts
+++ b/packages/shared-state/src/utils/index.ts
@@ -1,2 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./rich-filter.helper";
 export * from "./work-item-filters.helper";
diff --git a/packages/shared-state/src/utils/rich-filter.helper.ts b/packages/shared-state/src/utils/rich-filter.helper.ts
index 255be5c87..576533f8f 100644
--- a/packages/shared-state/src/utils/rich-filter.helper.ts
+++ b/packages/shared-state/src/utils/rich-filter.helper.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // plane imports
 import type { TBuildFilterExpressionParams, TExternalFilter, TFilterProperty, TFilterValue } from "@plane/types";
 import { LOGICAL_OPERATOR } from "@plane/types";
diff --git a/packages/shared-state/src/utils/work-item-filters.helper.ts b/packages/shared-state/src/utils/work-item-filters.helper.ts
index 8e815743d..b5c5819a9 100644
--- a/packages/shared-state/src/utils/work-item-filters.helper.ts
+++ b/packages/shared-state/src/utils/work-item-filters.helper.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // plane imports
 import type {
   TBuildFilterExpressionParams,
diff --git a/packages/shared-state/tsdown.config.ts b/packages/shared-state/tsdown.config.ts
new file mode 100644
index 000000000..92959eaf7
--- /dev/null
+++ b/packages/shared-state/tsdown.config.ts
@@ -0,0 +1,9 @@
+import { defineConfig } from "tsdown";
+
+export default defineConfig({
+  entry: ["src/index.ts"],
+  format: ["esm"],
+  dts: true,
+  platform: "neutral",
+  exports: true,
+});
diff --git a/packages/tailwind-config/AGENTS.md b/packages/tailwind-config/AGENTS.md
new file mode 100644
index 000000000..57e4876ae
--- /dev/null
+++ b/packages/tailwind-config/AGENTS.md
@@ -0,0 +1,667 @@
+# Design System Philosophy Guide
+
+## Overview
+
+This guide explains the semantic design system philosophy for building consistent, maintainable UIs. The system is built on three core concepts: **Canvas**, **Surface**, and **Layer**.
+
+## Core Concepts
+
+### 1. Canvas (`bg-canvas`)
+
+**What it is**: The application-level background that serves as the foundation for all content. The canvas is the **entire application background**, not individual pages. There is only **one canvas** in the entire application, used at the root level.
+
+**When to use**:
+
+- **Only at the application root** - the single root container that wraps the entire application
+- The main application background (not page backgrounds)
+
+**When NOT to use**:
+
+- ❌ Page-level backgrounds
+- ❌ Nested containers
+- ❌ Cards or components
+- ❌ Modals or dropdowns
+- ❌ Sidebars or panels
+- ❌ Anywhere else in the application
+
+**Critical Rule**: Canvas should only appear **once** in your entire application - at the root level. All pages, routes, and components sit on top of this single canvas.
+
+**Example**:
+
+```tsx
+// ✅ Correct: Canvas at application root (only place it should be)
+// App.tsx or root layout
+<div className="bg-canvas min-h-screen">
+  {/* All application content goes here */}
+  <Routes>
+    <Route path="/" element={<Page />} />
+  </Routes>
+</div>;
+
+// ✅ Correct: Pages use surfaces, not canvas
+function Page() {
+  return <div className="bg-surface-1">{/* Page content */}</div>;
+}
+
+// ❌ Wrong: Canvas used for a page
+function Page() {
+  return <div className="bg-canvas">{/* Don't use canvas here */}</div>;
+}
+
+// ❌ Wrong: Canvas used for a card
+<div className="bg-canvas p-4 rounded-md">{/* Card content */}</div>;
+```
+
+### 2. Surface (`bg-surface-1`, `bg-surface-2`, `bg-surface-3`)
+
+**What it is**: Top-level containers that sit directly on the canvas. Surfaces never overlap each other - they are siblings in the layout hierarchy.
+
+**When to use**:
+
+- Main content areas
+- Sections of a page
+- Primary containers
+- Panels that sit side-by-side
+
+**Surface hierarchy**:
+
+- `bg-surface-1`: Primary surface (most common)
+- `bg-surface-2`: Secondary surface (for variation)
+- `bg-surface-3`: Tertiary surface (rare, for special cases)
+
+**Rules**:
+
+- Surfaces are **siblings**, not nested (in the same plane)
+- Each surface should use its corresponding layer for nested elements
+- Surfaces provide the base for stacking layers
+
+**Exception - Different Planes**:
+
+- Modals, overlays, and popovers exist on a **different plane** (different z-index/stacking context)
+- In these cases, it's acceptable to use a surface even when there's a surface below
+- This is because they are visually and functionally separate from the underlying content
+
+**Example**:
+
+```tsx
+// ✅ Correct: Surfaces as siblings
+<div className="bg-canvas">
+  <div className="bg-surface-1">
+    {/* Main content area */}
+  </div>
+  <div className="bg-surface-2">
+    {/* Secondary content area - sibling, not nested */}
+  </div>
+</div>
+
+// ✅ Correct: Page with header and main (same surface)
+<div className="bg-surface-1">
+  <header className="border-b border-subtle">
+    {/* Header is part of the surface, not a separate surface */}
+  </header>
+  <main>
+    {/* Main is part of the surface, not a separate surface */}
+  </main>
+</div>
+
+// ❌ Wrong: Surface nested in surface (same plane)
+<div className="bg-surface-1">
+  <div className="bg-surface-2">
+    {/* This breaks the philosophy */}
+  </div>
+</div>
+
+// ✅ Correct: Modal on different plane
+<div className="bg-canvas">
+  {/* Main page content */}
+  <div className="bg-surface-1">
+    Page content
+  </div>
+
+  {/* Modal overlay - different plane */}
+  <div className="fixed inset-0 z-50">
+    <div className="bg-backdrop fixed inset-0" />
+    <div className="bg-surface-1 rounded-lg shadow-lg p-6">
+      {/* Modal can use surface-1 even though page uses surface-1 */}
+      Modal content
+    </div>
+  </div>
+</div>
+```
+
+### 3. Layer (`bg-layer-1`, `bg-layer-2`, `bg-layer-3`)
+
+**What it is**: Stacking layers that create depth within a surface. Layers stack on top of each other in a specific order.
+
+**When to use**:
+
+- Cards within a surface
+- Group headers
+- Nested containers
+- Dropdowns and modals
+- Sidebars
+- Any element that needs to appear "on top" of a surface
+
+**Layer hierarchy**:
+
+- `bg-layer-1`: First layer (closest to surface)
+- `bg-layer-2`: Second layer (on top of layer-1)
+- `bg-layer-3`: Third layer (on top of layer-2)
+
+**Critical Rule - Layer-to-Surface Association**:
+
+- `bg-surface-1` → use `bg-layer-1` for nested elements
+- `bg-surface-2` → use `bg-layer-2` for nested elements
+- `bg-surface-3` → use `bg-layer-3` for nested elements
+
+**Rare Exception - Visual Separation**:
+
+In very rare cases, you may go one level above for visual separation when needed for specific UI elements:
+
+- Inputs in modals (modal has `bg-surface-1`, input can use `bg-layer-2` for separation)
+- Buttons, switches, and form controls that need more visual distinction
+- **Important**: This is very rare and should only be used for interactive form elements, not for content boxes or cards
+
+**Example**:
+
+```tsx
+// ✅ Correct: Surface-1 with layer-1
+<div className="bg-surface-1 p-4">
+  <div className="bg-layer-1 hover:bg-layer-1-hover rounded-md p-3">
+    Card content
+  </div>
+</div>
+
+// ✅ Correct: Surface-2 with layer-2
+<div className="bg-surface-2 p-4">
+  <div className="bg-layer-2 hover:bg-layer-2-hover rounded-md p-3">
+    Card content
+  </div>
+</div>
+
+// ❌ Wrong: Surface-1 with layer-2 (for content boxes)
+<div className="bg-surface-1 p-4">
+  <div className="bg-layer-2">
+    {/* Wrong layer for this surface - use layer-1 for content boxes */}
+  </div>
+</div>
+
+// ✅ Correct: Rare exception - Input in modal for visual separation
+<div className="bg-surface-1 rounded-lg p-6">
+  <form>
+    <input className="bg-layer-2 border border-subtle rounded-md px-3 py-2" />
+    {/* Input uses layer-2 for visual separation from modal surface */}
+  </form>
+</div>
+```
+
+## Stacking Layers
+
+### How to Stack Layers
+
+Layers stack in order: surface → layer-1 → layer-2 → layer-3
+
+**Pattern**:
+
+```
+Canvas
+  └── Surface
+      └── Layer 1 (first level of depth)
+          └── Layer 2 (second level of depth)
+              └── Layer 3 (third level of depth)
+```
+
+**Example - Proper Stacking**:
+
+```tsx
+// ✅ Correct: Proper layer stacking
+<div className="bg-surface-1 p-4">
+  {/* Layer 1: Card */}
+  <div className="bg-layer-1 hover:bg-layer-1-hover rounded-md p-4">
+    <h3>Card Title</h3>
+
+    {/* Layer 2: Nested section */}
+    <div className="bg-layer-2 hover:bg-layer-2-hover rounded p-2 mt-2">
+      Nested content
+      {/* Layer 3: Deeply nested */}
+      <div className="bg-layer-3 hover:bg-layer-3-hover rounded p-1 mt-1">Deep content</div>
+    </div>
+  </div>
+</div>
+```
+
+**When to use each layer**:
+
+- **Layer 1**: Most common - cards, headers, primary nested elements
+- **Layer 2**: Secondary depth - nested cards, sub-sections
+- **Layer 3**: Deep nesting - rarely needed, for complex hierarchies
+
+## State Variants
+
+### Hover States
+
+**Critical Rule**: Hover must always match the base background layer.
+
+**Pattern**: `bg-layer-X hover:bg-layer-X-hover`
+
+**Examples**:
+
+```tsx
+// ✅ Correct: Matching hover
+<div className="bg-layer-1 hover:bg-layer-1-hover">
+  Hoverable element
+</div>
+
+<div className="bg-layer-2 hover:bg-layer-2-hover">
+  Hoverable element
+</div>
+
+// ❌ Wrong: Mismatched hover
+<div className="bg-layer-1 hover:bg-layer-2-hover">
+  {/* Never do this */}
+</div>
+```
+
+### Active States
+
+Use `-active` variants when an element is in an active/pressed state.
+
+```tsx
+// ✅ Correct: Active state
+<button
+  className={cn("bg-layer-1 hover:bg-layer-1-hover", {
+    "bg-layer-1-active": isActive,
+  })}
+>
+  Button
+</button>
+```
+
+### Selected States
+
+Use `-selected` variants only when there's actual selection logic.
+
+```tsx
+// ✅ Correct: Selected state with logic
+<div className={cn(
+  "bg-layer-1 hover:bg-layer-1-hover",
+  {
+    "bg-layer-1-selected": isSelected
+  }
+)}>
+  Selectable item
+</div>
+
+// ✅ Correct: With data attribute
+<div className="bg-layer-1 hover:bg-layer-1-hover data-[selected]:bg-layer-1-selected">
+  Selectable item
+</div>
+```
+
+## Common Patterns
+
+### Pattern 1: Application Root Layout
+
+```tsx
+// ✅ Correct: Application root (only place for canvas)
+// App.tsx or root layout
+<div className="bg-canvas min-h-screen">
+  <Routes>
+    <Route path="/" element={<HomePage />} />
+    <Route path="/dashboard" element={<DashboardPage />} />
+  </Routes>
+</div>;
+
+// ✅ Correct: Individual page structure
+function HomePage() {
+  return (
+    <div className="bg-surface-1">
+      {/* Header - part of the page surface, uses layer for depth */}
+      <header className="border-b border-subtle">
+        <div className="bg-layer-1 hover:bg-layer-1-hover px-4 py-2">Header content</div>
+      </header>
+
+      {/* Main content - part of the page surface */}
+      <main className="p-6">
+        <div className="bg-layer-1 hover:bg-layer-1-hover rounded-md p-4">Content card</div>
+      </main>
+    </div>
+  );
+}
+```
+
+### Pattern 2: Card with Nested Elements
+
+```tsx
+// ✅ Correct: Card with proper layering
+<div className="bg-surface-1 p-4">
+  <div className="bg-layer-1 hover:bg-layer-1-hover rounded-md p-4">
+    <h3 className="text-primary font-semibold">Card Title</h3>
+
+    {/* Nested section */}
+    <div className="bg-layer-2 hover:bg-layer-2-hover rounded p-3 mt-3">
+      <p className="text-secondary">Nested content</p>
+    </div>
+  </div>
+</div>
+```
+
+### Pattern 3: Dropdown/Modal
+
+```tsx
+// ✅ Correct: Modal structure (different plane exception)
+function PageWithModal() {
+  return (
+    <div className="bg-surface-1">
+      {/* Main page content */}
+      <div>Page content</div>
+
+      {/* Modal - different plane, can use surface even with surface below */}
+      {isModalOpen && (
+        <div className="fixed inset-0 z-50">
+          <div className="bg-backdrop fixed inset-0" />
+          <div className="bg-surface-1 rounded-lg shadow-lg p-6">
+            <div className="bg-layer-1 hover:bg-layer-1-hover rounded p-2">Modal content</div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+```
+
+### Pattern 4: Sidebar Layout
+
+```tsx
+// ✅ Correct: Sidebar with main content (page level, not app root)
+// Both sidebar and main are siblings on the same surface
+// Sidebar menu items use transparent backgrounds with hover states
+function DashboardPage() {
+  return (
+    <div className="bg-surface-1 flex">
+      {/* Sidebar - part of the page surface */}
+      <aside className="border-r border-subtle w-64">
+        <div className="hover:bg-layer-1-hover p-4">Sidebar item</div>
+      </aside>
+
+      {/* Main content - part of the page surface */}
+      <main className="flex-1 p-6">
+        <div className="bg-layer-1 hover:bg-layer-1-hover rounded-md p-4">Main content</div>
+      </main>
+    </div>
+  );
+}
+```
+
+### Pattern 5: List with Items
+
+```tsx
+// ✅ Correct: List structure
+<div className="bg-surface-1 p-4">
+  <div className="bg-layer-1 hover:bg-layer-1-hover rounded-md mb-2 p-3">List item 1</div>
+  <div className="bg-layer-1 hover:bg-layer-1-hover rounded-md mb-2 p-3">List item 2</div>
+  <div className="bg-layer-1 hover:bg-layer-1-hover rounded-md p-3">List item 3</div>
+</div>
+```
+
+### Pattern 6: Form with Inputs
+
+```tsx
+// ✅ Correct: Form structure
+<div className="bg-surface-1 p-6">
+  <form className="bg-layer-1 rounded-md p-4 space-y-4">
+    <div>
+      <label className="text-primary font-medium">Name</label>
+      {/* Input can use bg-surface-1 or bg-layer-2 for visual separation (rare exception) */}
+      <input className="bg-surface-1 border border-subtle rounded-md px-3 py-2 text-primary" type="text" />
+    </div>
+
+    <button className="bg-layer-2 hover:bg-layer-2-hover rounded-md px-4 py-2 text-primary">Submit</button>
+  </form>
+</div>
+
+// ✅ Correct: Input in modal (rare exception for visual separation)
+<div className="bg-surface-1 rounded-lg p-6">
+  <form>
+    <label className="text-primary font-medium">Name</label>
+    {/* Input uses layer-2 for visual separation from modal surface - rare exception */}
+    <input className="bg-layer-2 border border-subtle rounded-md px-3 py-2 text-primary" type="text" />
+  </form>
+</div>
+```
+
+## Decision Tree
+
+### When to use Canvas?
+
+```
+Is this the root container of the entire application?
+(Only one place in the whole app)
+├─ YES → Use bg-canvas (application root only)
+└─ NO → Continue to Surface decision
+```
+
+### When to use Surface?
+
+```
+Is this a top-level container that sits on canvas?
+AND
+Is it a sibling to other containers (not nested)?
+OR
+Is this a modal/overlay on a different plane (z-index)?
+├─ YES → Use bg-surface-1 (or surface-2/3 for variation)
+└─ NO → Continue to Layer decision
+```
+
+### When to use Layer?
+
+```
+Is this nested within a surface?
+├─ YES → Use bg-layer-1 (or layer-2/3 for deeper nesting)
+│         Match layer number to surface number
+└─ NO → Re-evaluate: Should this be a surface?
+```
+
+## Text Colors
+
+Use semantic text colors that match the hierarchy:
+
+- `text-primary`: Main text, headings, important content
+- `text-secondary`: Secondary text, descriptions
+- `text-tertiary`: Tertiary text, labels, metadata
+- `text-placeholder`: Placeholder text, hints
+
+**Example**:
+
+```tsx
+<div className="bg-layer-1 p-4">
+  <h2 className="text-primary font-semibold">Title</h2>
+  <p className="text-secondary">Description text</p>
+  <span className="text-tertiary text-13">Metadata</span>
+  <input className="placeholder-(--text-color-placeholder)" placeholder="Enter text..." />
+</div>
+```
+
+## Border Colors
+
+Use semantic border colors:
+
+- `border-subtle`: Subtle borders, dividers
+- `border-subtle-1`: Slightly more visible borders
+- `border-strong`: Strong borders, emphasis
+- `border-strong-1`: Very strong borders
+
+**Example**:
+
+```tsx
+<div className="bg-layer-1 border border-subtle rounded-md p-4">
+  <div className="border-b border-subtle-1 pb-2 mb-2">Section with divider</div>
+</div>
+```
+
+## Common Mistakes to Avoid
+
+### ❌ Mistake 1: Canvas for Pages or Cards
+
+```tsx
+// ❌ Wrong: Canvas used for a page
+function Page() {
+  return <div className="bg-canvas">Page content</div>;
+}
+
+// ❌ Wrong: Canvas used for a card
+<div className="bg-canvas rounded-md p-4">Card content</div>;
+
+// ✅ Correct: Pages use surfaces
+function Page() {
+  return (
+    <div className="bg-surface-1">
+      <div className="bg-layer-1 rounded-md p-4">Card content</div>
+    </div>
+  );
+}
+```
+
+### ❌ Mistake 2: Nested Surfaces (Same Plane)
+
+```tsx
+// ❌ Wrong: Nested surfaces in same plane
+<div className="bg-surface-1">
+  <div className="bg-surface-2">
+    Nested surface
+  </div>
+</div>
+
+// ✅ Correct: Use layer instead
+<div className="bg-surface-1">
+  <div className="bg-layer-1">
+    Nested layer
+  </div>
+</div>
+
+// ✅ Correct: Exception - Modal on different plane
+<div className="bg-canvas">
+  <div className="bg-surface-1">Page content</div>
+  <div className="fixed inset-0 z-50">
+    <div className="bg-surface-1">Modal (different plane)</div>
+  </div>
+</div>
+```
+
+### ❌ Mistake 3: Wrong Layer for Surface
+
+```tsx
+// ❌ Wrong: surface-1 with layer-2 (for content boxes)
+<div className="bg-surface-1">
+  <div className="bg-layer-2">
+    Content box
+  </div>
+</div>
+
+// ✅ Correct: surface-1 with layer-1 (for content boxes)
+<div className="bg-surface-1">
+  <div className="bg-layer-1">
+    Content box
+  </div>
+</div>
+
+// ✅ Correct: Rare exception - Input/button for visual separation
+<div className="bg-surface-1">
+  <input className="bg-layer-2" />
+  {/* Input uses layer-2 for visual separation - very rare exception */}
+</div>
+```
+
+**Note**: Going one level above (e.g., `bg-layer-2` with `bg-surface-1`) is only valid in very rare cases for interactive form elements (inputs, buttons, switches) that need extra visual separation. For content boxes, cards, and normal nested elements, always match the layer number to the surface number.
+
+### ❌ Mistake 4: Mismatched Hover
+
+```tsx
+// ❌ Wrong
+<div className="bg-layer-1 hover:bg-layer-2-hover">
+  Content
+</div>
+
+// ✅ Correct
+<div className="bg-layer-1 hover:bg-layer-1-hover">
+  Content
+</div>
+```
+
+### ❌ Mistake 5: Missing Hover Prefix
+
+```tsx
+// ❌ Wrong
+<div className="bg-layer-1-hover">
+  Content
+</div>
+
+// ✅ Correct
+<div className="bg-layer-1 hover:bg-layer-1-hover">
+  Content
+</div>
+```
+
+## Best Practices
+
+1. **Canvas is Application Root Only**: Canvas should only appear once in your entire application - at the root level (App.tsx or root layout). All pages use surfaces, not canvas.
+
+2. **Use Surfaces for Pages and Top-Level Containers**: Surfaces are siblings, not nested (except modals/overlays on different planes)
+
+3. **Match Layers to Surfaces**: surface-1 → layer-1, surface-2 → layer-2, etc. (Very rare exception: form elements can go one level above for visual separation)
+
+4. **Stack Layers Properly**: Use layer-1 first, then layer-2, then layer-3 as needed
+
+5. **Always Match Hover States**: If base is `bg-layer-X`, hover must be `hover:bg-layer-X-hover`
+
+6. **Use Semantic Text Colors**: Match text color to importance (primary, secondary, tertiary, placeholder)
+
+7. **Keep It Simple**: Don't over-nest. Most components only need layer-1
+
+8. **Test Visual Hierarchy**: Ensure the stacking creates clear visual depth
+
+## Quick Reference
+
+### Hierarchy Structure
+
+```
+Canvas (one per page)
+  └── Surface 1 (top-level container)
+      └── Layer 1 (first level of depth)
+          └── Layer 2 (second level)
+              └── Layer 3 (third level)
+```
+
+### Common Combinations
+
+- Application Root: `bg-canvas` (only one place in entire app)
+- Single Surface Page: `bg-surface-1` → `bg-layer-1`
+- Multiple Surfaces Page: Grid of `bg-surface-1` (or `bg-surface-2`) as siblings
+- Card: `bg-surface-1` → `bg-layer-1 hover:bg-layer-1-hover`
+- Nested Card: `bg-surface-1` → `bg-layer-1` → `bg-layer-2`
+- Sidebar Layout: `bg-surface-1` (sidebar) + `bg-surface-1` (main) - both siblings
+- Sidebar Menu Items: Transparent background with `hover:bg-layer-1-hover` (no base `bg-layer-1`)
+
+### State Variants
+
+- Hover: `bg-layer-X hover:bg-layer-X-hover`
+- Active: `bg-layer-X-active` (when pressed/active)
+- Selected: `bg-layer-X-selected` (when selected)
+
+## Alignment Checklist
+
+When reviewing components, ensure:
+
+- [ ] Canvas is only used at the application root (one place in entire app)
+- [ ] Pages use surfaces, not canvas
+- [ ] Surfaces are siblings, not nested (except modals/overlays on different planes)
+- [ ] Layers match their surface (surface-1 → layer-1) - except rare cases for form elements
+- [ ] Sidebar menu items use transparent backgrounds with hover states
+- [ ] Hover states match base layers
+- [ ] Layers stack properly (1 → 2 → 3)
+- [ ] Text colors are semantic (primary, secondary, tertiary, placeholder)
+- [ ] Borders use semantic colors (subtle, strong)
+- [ ] No unnecessary nesting
+- [ ] Visual hierarchy is clear
+- [ ] State variants are used correctly
+- [ ] Modals/overlays use surfaces (exception to nesting rule)
diff --git a/packages/tailwind-config/animations.css b/packages/tailwind-config/animations.css
new file mode 100644
index 000000000..04835346c
--- /dev/null
+++ b/packages/tailwind-config/animations.css
@@ -0,0 +1,88 @@
+@theme {
+  /* slide up */
+  --animate-slide-up: slide-up 0.3s ease-out forwards;
+  @keyframes slide-up {
+    from {
+      transform: translateY(10px);
+      opacity: 0;
+    }
+    to {
+      transform: translateY(0);
+      opacity: 1;
+    }
+  }
+
+  /* slide in from bottom */
+  --animate-slide-in-from-bottom: slideInFromBottom 0.25s ease-out forwards;
+  @keyframes slideInFromBottom {
+    0% {
+      transform: translateY(100%);
+      opacity: 0;
+    }
+    100% {
+      transform: translateY(0);
+      opacity: 1;
+    }
+  }
+
+  /* slide in from top */
+  --animate-slide-in-from-top: slideInFromTop 0.25s ease-out forwards;
+  @keyframes slideInFromTop {
+    0% {
+      transform: translateY(-100%);
+      opacity: 0;
+    }
+    100% {
+      transform: translateY(0);
+      opacity: 1;
+    }
+  }
+
+  /* slide out */
+  --animate-slide-out: slideOut 0.25s ease-out forwards;
+  @keyframes slideOut {
+    0% {
+      transform: translateY(0);
+      opacity: 1;
+    }
+    100% {
+      transform: translateY(-100%);
+      opacity: 0;
+    }
+  }
+
+  /* slide out down */
+  --animate-slide-out-down: slideOutDown 0.25s ease-out forwards;
+  @keyframes slideOutDown {
+    0% {
+      transform: translateY(0);
+      opacity: 1;
+    }
+    100% {
+      transform: translateY(100%);
+      opacity: 0;
+    }
+  }
+
+  /* fade out */
+  --animate-fade-out: fadeOut 0.25s ease-out forwards;
+  @keyframes fadeOut {
+    0% {
+      opacity: 1;
+    }
+    100% {
+      opacity: 0;
+    }
+  }
+
+  /* fade in */
+  --animate-fade-in: fadeIn 0.25s ease-out forwards;
+  @keyframes fadeIn {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+}
diff --git a/packages/tailwind-config/global.css b/packages/tailwind-config/global.css
deleted file mode 100644
index 95a3b70c7..000000000
--- a/packages/tailwind-config/global.css
+++ /dev/null
@@ -1,833 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer components {
-  .text-1\.5xl {
-    font-size: 1.375rem;
-    line-height: 1.875rem;
-  }
-
-  .text-2\.5xl {
-    font-size: 1.75rem;
-    line-height: 2.25rem;
-  }
-}
-
-@layer base {
-  html {
-    font-family: "Inter", sans-serif;
-  }
-
-  :root {
-    color-scheme: light !important;
-
-    --color-primary-10: 229, 243, 250;
-    --color-primary-20: 216, 237, 248;
-    --color-primary-30: 199, 229, 244;
-    --color-primary-40: 169, 214, 239;
-    --color-primary-50: 144, 202, 234;
-    --color-primary-60: 109, 186, 227;
-    --color-primary-70: 75, 170, 221;
-    --color-primary-80: 41, 154, 214;
-    --color-primary-90: 34, 129, 180;
-    --color-primary-100: 0, 99, 153;
-    --color-primary-200: 0, 92, 143;
-    --color-primary-300: 0, 86, 133;
-    --color-primary-400: 0, 77, 117;
-    --color-primary-500: 0, 66, 102;
-    --color-primary-600: 0, 53, 82;
-    --color-primary-700: 0, 43, 66;
-    --color-primary-800: 0, 33, 51;
-    --color-primary-900: 0, 23, 36;
-
-    --color-background-100: 255, 255, 255; /* primary bg */
-    --color-background-90: 247, 247, 247; /* secondary bg */
-    --color-background-80: 232, 232, 232; /* tertiary bg */
-
-    --color-text-100: 23, 23, 23; /* primary text */
-    --color-text-200: 58, 58, 58; /* secondary text */
-    --color-text-300: 82, 82, 82; /* tertiary text */
-    --color-text-400: 163, 163, 163; /* placeholder text */
-
-    --color-scrollbar: 163, 163, 163; /* scrollbar thumb */
-
-    --color-border-100: 245, 245, 245; /* subtle border= 1 */
-    --color-border-200: 229, 229, 229; /* subtle border- 2 */
-    --color-border-300: 212, 212, 212; /* strong border- 1 */
-    --color-border-400: 185, 185, 185; /* strong border- 2 */
-
-    --color-shadow-2xs:
-      0px 0px 1px 0px rgba(23, 23, 23, 0.06),
-      0px 1px 2px 0px rgba(23, 23, 23, 0.06),
-      0px 1px 2px 0px rgba(23, 23, 23, 0.14);
-    --color-shadow-xs:
-      0px 1px 2px 0px rgba(0, 0, 0, 0.16),
-      0px 2px 4px 0px rgba(16, 24, 40, 0.12),
-      0px 1px 8px -1px rgba(16, 24, 40, 0.1);
-    --color-shadow-sm:
-      0px 1px 4px 0px rgba(0, 0, 0, 0.01), 0px 4px 8px 0px rgba(0, 0, 0, 0.02),
-      0px 1px 12px 0px rgba(0, 0, 0, 0.12);
-    --color-shadow-rg:
-      0px 3px 6px 0px rgba(0, 0, 0, 0.1),
-      0px 4px 4px 0px rgba(16, 24, 40, 0.08),
-      0px 1px 12px 0px rgba(16, 24, 40, 0.04);
-    --color-shadow-md:
-      0px 4px 8px 0px rgba(0, 0, 0, 0.12),
-      0px 6px 12px 0px rgba(16, 24, 40, 0.12),
-      0px 1px 16px 0px rgba(16, 24, 40, 0.12);
-    --color-shadow-lg:
-      0px 6px 12px 0px rgba(0, 0, 0, 0.12),
-      0px 8px 16px 0px rgba(0, 0, 0, 0.12),
-      0px 1px 24px 0px rgba(16, 24, 40, 0.12);
-    --color-shadow-xl:
-      0px 0px 18px 0px rgba(0, 0, 0, 0.16),
-      0px 0px 24px 0px rgba(16, 24, 40, 0.16),
-      0px 0px 52px 0px rgba(16, 24, 40, 0.16);
-    --color-shadow-2xl:
-      0px 8px 16px 0px rgba(0, 0, 0, 0.12),
-      0px 12px 24px 0px rgba(16, 24, 40, 0.12),
-      0px 1px 32px 0px rgba(16, 24, 40, 0.12);
-    --color-shadow-3xl:
-      0px 12px 24px 0px rgba(0, 0, 0, 0.12),
-      0px 16px 32px 0px rgba(0, 0, 0, 0.12),
-      0px 1px 48px 0px rgba(16, 24, 40, 0.12);
-    --color-shadow-4xl:
-      0px 8px 40px 0px rgba(0, 0, 61, 0.05),
-      0px 12px 32px -16px rgba(0, 0, 0, 0.05);
-
-    --color-sidebar-background-100: var(
-      --color-background-100
-    ); /* primary sidebar bg */
-    --color-sidebar-background-90: var(
-      --color-background-90
-    ); /* secondary sidebar bg */
-    --color-sidebar-background-80: var(
-      --color-background-80
-    ); /* tertiary sidebar bg */
-
-    --color-sidebar-text-100: var(--color-text-100); /* primary sidebar text */
-    --color-sidebar-text-200: var(
-      --color-text-200
-    ); /* secondary sidebar text */
-    --color-sidebar-text-300: var(--color-text-300); /* tertiary sidebar text */
-    --color-sidebar-text-400: var(
-      --color-text-400
-    ); /* sidebar placeholder text */
-
-    --color-sidebar-border-100: var(
-      --color-border-100
-    ); /* subtle sidebar border= 1 */
-    --color-sidebar-border-200: var(
-      --color-border-100
-    ); /* subtle sidebar border- 2 */
-    --color-sidebar-border-300: var(
-      --color-border-100
-    ); /* strong sidebar border- 1 */
-    --color-sidebar-border-400: var(
-      --color-border-100
-    ); /* strong sidebar border- 2 */
-
-    --color-sidebar-shadow-2xs: var(--color-shadow-2xs);
-    --color-sidebar-shadow-xs: var(--color-shadow-xs);
-    --color-sidebar-shadow-sm: var(--color-shadow-sm);
-    --color-sidebar-shadow-rg: var(--color-shadow-rg);
-    --color-sidebar-shadow-md: var(--color-shadow-md);
-    --color-sidebar-shadow-lg: var(--color-shadow-lg);
-    --color-sidebar-shadow-xl: var(--color-shadow-xl);
-    --color-sidebar-shadow-2xl: var(--color-shadow-2xl);
-    --color-sidebar-shadow-3xl: var(--color-shadow-3xl);
-    --color-sidebar-shadow-4xl: var(--color-shadow-4xl);
-
-    /* pi */
-    --color-pi-50: var(--color-background-90);
-    --color-pi-100: var(--color-background-90);
-    --color-pi-200: var(--color-primary-200);
-    --color-pi-300: var(--color-primary-200);
-    --color-pi-400: var(--color-primary-200);
-    --color-pi-500: var(--color-primary-200);
-    --color-pi-600: 151, 150, 246;
-    --color-pi-700: var(--color-primary-100);
-    --color-pi-800: 57, 56, 149;
-    --color-pi-900: 30, 29, 78;
-    --color-pi-950: 14, 14, 37;
-  }
-
-  [data-theme="light"],
-  [data-theme="light-contrast"] {
-    color-scheme: light !important;
-
-    --color-background-100: 255, 255, 255; /* primary bg */
-    --color-background-90: 247, 247, 247; /* secondary bg */
-    --color-background-80: 232, 232, 232; /* tertiary bg */
-
-    /* pi */
-    --color-pi-50: var(--color-background-90);
-    --color-pi-100: var(--color-background-90);
-    --color-pi-200: var(--color-primary-200);
-    --color-pi-300: var(--color-primary-200);
-    --color-pi-400: var(--color-primary-200);
-    --color-pi-500: var(--color-primary-200);
-    --color-pi-600: 151, 150, 246;
-    --color-pi-700: var(--color-primary-100);
-    --color-pi-800: 57, 56, 149;
-    --color-pi-900: 30, 29, 78;
-    --color-pi-950: 14, 14, 37;
-  }
-
-  [data-theme="light"] {
-    --color-text-100: 23, 23, 23; /* primary text */
-    --color-text-200: 58, 58, 58; /* secondary text */
-    --color-text-300: 82, 82, 82; /* tertiary text */
-    --color-text-400: 163, 163, 163; /* placeholder text */
-
-    --color-scrollbar: 163, 163, 163; /* scrollbar thumb */
-
-    --color-border-100: 245, 245, 245; /* subtle border= 1 */
-    --color-border-200: 229, 229, 229; /* subtle border- 2 */
-    --color-border-300: 212, 212, 212; /* strong border- 1 */
-    --color-border-400: 185, 185, 185; /* strong border- 2 */
-
-    /* onboarding colors */
-    --gradient-onboarding-100: linear-gradient(
-      106deg,
-      #f2f6ff 29.8%,
-      #e1eaff 99.34%
-    );
-    --gradient-onboarding-200: linear-gradient(
-      129deg,
-      rgba(255, 255, 255, 0) -22.23%,
-      rgba(255, 255, 255, 0.8) 62.98%
-    );
-    --gradient-onboarding-300: linear-gradient(
-      164deg,
-      #fff 4.25%,
-      rgba(255, 255, 255, 0.06) 93.5%
-    );
-    --gradient-onboarding-400: linear-gradient(
-      129deg,
-      rgba(255, 255, 255, 0) -22.23%,
-      rgba(255, 255, 255, 0.8) 62.98%
-    );
-
-    --color-onboarding-text-100: 23, 23, 23;
-    --color-onboarding-text-200: 58, 58, 58;
-    --color-onboarding-text-300: 82, 82, 82;
-    --color-onboarding-text-400: 163, 163, 163;
-
-    --color-onboarding-background-100: 236, 241, 255;
-    --color-onboarding-background-200: 255, 255, 255;
-    --color-onboarding-background-300: 236, 241, 255;
-    --color-onboarding-background-400: 177, 206, 250;
-
-    --color-onboarding-border-100: 229, 229, 229;
-    --color-onboarding-border-200: 217, 228, 255;
-    --color-onboarding-border-300: 229, 229, 229, 0.5;
-
-    --color-onboarding-shadow-sm: 0px 4px 20px 0px rgba(126, 139, 171, 0.1);
-
-    /* toast theme */
-    --color-toast-success-text: 62, 155, 79;
-    --color-toast-error-text: 220, 62, 66;
-    --color-toast-warning-text: 255, 186, 24;
-    --color-toast-info-text: 51, 88, 212;
-    --color-toast-loading-text: 28, 32, 36;
-    --color-toast-secondary-text: 128, 131, 141;
-    --color-toast-tertiary-text: 96, 100, 108;
-
-    --color-toast-success-background: 253, 253, 254;
-    --color-toast-error-background: 255, 252, 252;
-    --color-toast-warning-background: 254, 253, 251;
-    --color-toast-info-background: 253, 253, 254;
-    --color-toast-loading-background: 253, 253, 254;
-
-    --color-toast-success-border: 218, 241, 219;
-    --color-toast-error-border: 255, 219, 220;
-    --color-toast-warning-border: 255, 247, 194;
-    --color-toast-info-border: 210, 222, 255;
-    --color-toast-loading-border: 224, 225, 230;
-  }
-
-  [data-theme="light-contrast"] {
-    --color-text-100: 11, 11, 11; /* primary text */
-    --color-text-200: 38, 38, 38; /* secondary text */
-    --color-text-300: 58, 58, 58; /* tertiary text */
-    --color-text-400: 115, 115, 115; /* placeholder text */
-
-    --color-scrollbar: 115, 115, 115; /* scrollbar thumb */
-
-    --color-border-100: 34, 34, 34; /* subtle border= 1 */
-    --color-border-200: 38, 38, 38; /* subtle border- 2 */
-    --color-border-300: 46, 46, 46; /* strong border- 1 */
-    --color-border-400: 58, 58, 58; /* strong border- 2 */
-  }
-
-  [data-theme="dark"],
-  [data-theme="dark-contrast"] {
-    color-scheme: dark !important;
-
-    --color-primary-10: 8, 31, 43;
-    --color-primary-20: 10, 37, 51;
-    --color-primary-30: 13, 49, 69;
-    --color-primary-40: 16, 58, 81;
-    --color-primary-50: 18, 68, 94;
-    --color-primary-60: 23, 86, 120;
-    --color-primary-70: 28, 104, 146;
-    --color-primary-80: 31, 116, 163;
-    --color-primary-90: 34, 129, 180;
-    --color-primary-100: 40, 146, 204;
-    --color-primary-200: 41, 154, 214;
-    --color-primary-300: 75, 170, 221;
-    --color-primary-400: 109, 186, 227;
-    --color-primary-500: 144, 202, 234;
-    --color-primary-600: 169, 214, 239;
-    --color-primary-700: 199, 229, 244;
-    --color-primary-800: 216, 237, 248;
-    --color-primary-900: 229, 243, 250;
-
-    --color-background-100: 25, 25, 25; /* primary bg */
-    --color-background-90: 32, 32, 32; /* secondary bg */
-    --color-background-80: 44, 44, 44; /* tertiary bg */
-
-    --color-shadow-2xs:
-      0px 0px 1px 0px rgba(0, 0, 0, 0.15), 0px 1px 3px 0px rgba(0, 0, 0, 0.5);
-    --color-shadow-xs:
-      0px 0px 2px 0px rgba(0, 0, 0, 0.2), 0px 2px 4px 0px rgba(0, 0, 0, 0.5);
-    --color-shadow-sm:
-      0px 0px 4px 0px rgba(0, 0, 0, 0.2), 0px 2px 6px 0px rgba(0, 0, 0, 0.5);
-    --color-shadow-rg:
-      0px 0px 6px 0px rgba(0, 0, 0, 0.2), 0px 4px 6px 0px rgba(0, 0, 0, 0.5);
-    --color-shadow-md:
-      0px 2px 8px 0px rgba(0, 0, 0, 0.2), 0px 4px 8px 0px rgba(0, 0, 0, 0.5);
-    --color-shadow-lg:
-      0px 4px 12px 0px rgba(0, 0, 0, 0.25), 0px 4px 10px 0px rgba(0, 0, 0, 0.55);
-    --color-shadow-xl:
-      0px 0px 14px 0px rgba(0, 0, 0, 0.25), 0px 6px 10px 0px rgba(0, 0, 0, 0.55);
-    --color-shadow-2xl:
-      0px 0px 18px 0px rgba(0, 0, 0, 0.25), 0px 8px 12px 0px rgba(0, 0, 0, 0.6);
-    --color-shadow-3xl:
-      0px 4px 24px 0px rgba(0, 0, 0, 0.3), 0px 12px 40px 0px rgba(0, 0, 0, 0.65);
-    /* pi */
-    --color-pi-50: var(--color-background-90);
-    --color-pi-100: var(--color-background-90);
-    --color-pi-200: var(--color-primary-200);
-    --color-pi-300: var(--color-primary-200);
-    --color-pi-400: var(--color-primary-200);
-    --color-pi-500: var(--color-primary-200);
-    --color-pi-600: 151, 150, 246;
-    --color-pi-700: var(--color-primary-100);
-    --color-pi-800: 57, 56, 149;
-    --color-pi-900: 30, 29, 78;
-    --color-pi-950: 14, 14, 37;
-  }
-
-  [data-theme="dark"] {
-    --color-text-100: 229, 229, 229; /* primary text */
-    --color-text-200: 163, 163, 163; /* secondary text */
-    --color-text-300: 115, 115, 115; /* tertiary text */
-    --color-text-400: 82, 82, 82; /* placeholder text */
-
-    --color-scrollbar: 82, 82, 82; /* scrollbar thumb */
-
-    --color-border-100: 34, 34, 34; /* subtle border= 1 */
-    --color-border-200: 38, 38, 38; /* subtle border- 2 */
-    --color-border-300: 46, 46, 46; /* strong border- 1 */
-    --color-border-400: 58, 58, 58; /* strong border- 2 */
-
-    /* onboarding colors */
-    --gradient-onboarding-100: linear-gradient(
-      106deg,
-      #18191b 25.17%,
-      #18191b 99.34%
-    );
-    --gradient-onboarding-200: linear-gradient(
-      129deg,
-      rgba(47, 49, 53, 0.8) -22.23%,
-      rgba(33, 34, 37, 0.8) 62.98%
-    );
-    --gradient-onboarding-300: linear-gradient(
-      167deg,
-      rgba(47, 49, 53, 0.45) 19.22%,
-      #212225 98.48%
-    );
-
-    --color-onboarding-text-100: 237, 238, 240;
-    --color-onboarding-text-200: 176, 180, 187;
-    --color-onboarding-text-300: 118, 123, 132;
-    --color-onboarding-text-400: 105, 110, 119;
-
-    --color-onboarding-background-100: 54, 58, 64;
-    --color-onboarding-background-200: 40, 42, 45;
-    --color-onboarding-background-300: 40, 42, 45;
-    --color-onboarding-background-400: 67, 72, 79;
-
-    --color-onboarding-border-100: 54, 58, 64;
-    --color-onboarding-border-200: 54, 58, 64;
-    --color-onboarding-border-300: 34, 35, 38, 0.5;
-
-    --color-onboarding-shadow-sm: 0px 4px 20px 0px rgba(39, 44, 56, 0.1);
-
-    /* toast theme */
-    --color-toast-success-text: 178, 221, 181;
-    --color-toast-error-text: 206, 44, 49;
-    --color-toast-warning-text: 255, 186, 24;
-    --color-toast-info-text: 141, 164, 239;
-    --color-toast-loading-text: 255, 255, 255;
-    --color-toast-secondary-text: 185, 187, 198;
-    --color-toast-tertiary-text: 139, 141, 152;
-
-    --color-toast-success-background: 46, 46, 46;
-    --color-toast-error-background: 46, 46, 46;
-    --color-toast-warning-background: 46, 46, 46;
-    --color-toast-info-background: 46, 46, 46;
-    --color-toast-loading-background: 46, 46, 46;
-
-    --color-toast-success-border: 42, 126, 59;
-    --color-toast-error-border: 100, 23, 35;
-    --color-toast-warning-border: 79, 52, 34;
-    --color-toast-info-border: 58, 91, 199;
-    --color-toast-loading-border: 96, 100, 108;
-  }
-
-  [data-theme="dark-contrast"] {
-    --color-text-100: 250, 250, 250; /* primary text */
-    --color-text-200: 241, 241, 241; /* secondary text */
-    --color-text-300: 212, 212, 212; /* tertiary text */
-    --color-text-400: 115, 115, 115; /* placeholder text */
-
-    --color-scrollbar: 115, 115, 115; /* scrollbar thumb */
-
-    --color-border-100: 245, 245, 245; /* subtle border= 1 */
-    --color-border-200: 229, 229, 229; /* subtle border- 2 */
-    --color-border-300: 212, 212, 212; /* strong border- 1 */
-    --color-border-400: 185, 185, 185; /* strong border- 2 */
-  }
-
-  [data-theme="light"],
-  [data-theme="dark"],
-  [data-theme="light-contrast"],
-  [data-theme="dark-contrast"] {
-    --color-sidebar-background-100: var(
-      --color-background-100
-    ); /* primary sidebar bg */
-    --color-sidebar-background-90: var(
-      --color-background-90
-    ); /* secondary sidebar bg */
-    --color-sidebar-background-80: var(
-      --color-background-80
-    ); /* tertiary sidebar bg */
-
-    --color-sidebar-text-100: var(--color-text-100); /* primary sidebar text */
-    --color-sidebar-text-200: var(
-      --color-text-200
-    ); /* secondary sidebar text */
-    --color-sidebar-text-300: var(--color-text-300); /* tertiary sidebar text */
-    --color-sidebar-text-400: var(
-      --color-text-400
-    ); /* sidebar placeholder text */
-
-    --color-sidebar-border-100: var(
-      --color-border-100
-    ); /* subtle sidebar border= 1 */
-    --color-sidebar-border-200: var(
-      --color-border-200
-    ); /* subtle sidebar border- 2 */
-    --color-sidebar-border-300: var(
-      --color-border-300
-    ); /* strong sidebar border- 1 */
-    --color-sidebar-border-400: var(
-      --color-border-400
-    ); /* strong sidebar border- 2 */
-  }
-}
-
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-  -webkit-text-size-adjust: 100%;
-  -ms-text-size-adjust: 100%;
-  font-variant-ligatures: none;
-  -webkit-font-variant-ligatures: none;
-  text-rendering: optimizeLegibility;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
-}
-
-body {
-  color: rgba(var(--color-text-100));
-}
-
-/* scrollbar style */
-::-webkit-scrollbar {
-  display: none;
-}
-
-.tags-input-container {
-  border: 2px solid #000;
-  padding: 0.5em;
-  border-radius: 3px;
-  width: min(80vw, 600px);
-  margin-top: 1em;
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: 0.5em;
-}
-
-.tag-item {
-  background-color: rgb(218, 216, 216);
-  display: inline-block;
-  padding: 0.5em 0.75em;
-  border-radius: 20px;
-}
-.tag-item .close {
-  height: 20px;
-  width: 20px;
-  background-color: rgb(48, 48, 48);
-  color: #fff;
-  border-radius: 50%;
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  margin-left: 0.5em;
-  font-size: 18px;
-  cursor: pointer;
-}
-
-.tags-input {
-  flex-grow: 1;
-  padding: 0.5em 0;
-  border: none;
-  outline: none;
-}
-
-/* emoji icon picker */
-.conical-gradient {
-  background: conic-gradient(
-    from 180deg at 50% 50%,
-    #ff6b00 0deg,
-    #f7ae59 70.5deg,
-    #3f76ff 151.12deg,
-    #05c3ff 213deg,
-    #18914f 289.87deg,
-    #f6f172 329.25deg,
-    #ff6b00 360deg
-  );
-}
-
-/* progress bar */
-.progress-bar {
-  fill: currentColor;
-  color: rgba(var(--color-sidebar-background-100));
-}
-
-/* lineclamp */
-.lineclamp {
-  overflow: hidden;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 1;
-}
-
-/* popover2 styling */
-.bp4-popover2-transition-container {
-  z-index: 1 !important;
-}
-
-::-webkit-input-placeholder,
-::placeholder,
-:-ms-input-placeholder {
-  color: rgb(var(--color-text-400));
-}
-
-.bp4-overlay-content {
-  z-index: 555 !important;
-}
-
-.disable-scroll {
-  overflow: hidden !important;
-}
-
-.vertical-lr {
-  writing-mode: vertical-lr;
-  -webkit-writing-mode: vertical-lr;
-  -ms-writing-mode: vertical-lr;
-  width: fit-content;
-}
-
-div.web-view-spinner {
-  position: relative;
-  width: 54px;
-  height: 54px;
-  display: inline-block;
-  margin-left: 50%;
-  margin-right: 50%;
-  padding: 10px;
-  border-radius: 10px;
-}
-
-div.web-view-spinner div {
-  width: 6%;
-  height: 16%;
-  background: rgb(var(--color-text-400));
-  position: absolute;
-  left: 49%;
-  top: 43%;
-  opacity: 0;
-  border-radius: 50px;
-  -webkit-border-radius: 50px;
-  box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
-  -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
-  animation: fade 1s linear infinite;
-  -webkit-animation: fade 1s linear infinite;
-}
-
-@keyframes fade {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0.25;
-  }
-}
-@-webkit-keyframes fade {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0.25;
-  }
-}
-
-div.web-view-spinner div.bar1 {
-  transform: rotate(0deg) translate(0, -130%);
-  -webkit-transform: rotate(0deg) translate(0, -130%);
-  animation-delay: 0s;
-  -webkit-animation-delay: 0s;
-}
-
-div.web-view-spinner div.bar2 {
-  transform: rotate(30deg) translate(0, -130%);
-  -webkit-transform: rotate(30deg) translate(0, -130%);
-  animation-delay: -0.9167s;
-  -webkit-animation-delay: -0.9167s;
-}
-
-div.web-view-spinner div.bar3 {
-  transform: rotate(60deg) translate(0, -130%);
-  -webkit-transform: rotate(60deg) translate(0, -130%);
-  animation-delay: -0.833s;
-  -webkit-animation-delay: -0.833s;
-}
-div.web-view-spinner div.bar4 {
-  transform: rotate(90deg) translate(0, -130%);
-  -webkit-transform: rotate(90deg) translate(0, -130%);
-  animation-delay: -0.7497s;
-  -webkit-animation-delay: -0.7497s;
-}
-div.web-view-spinner div.bar5 {
-  transform: rotate(120deg) translate(0, -130%);
-  -webkit-transform: rotate(120deg) translate(0, -130%);
-  animation-delay: -0.667s;
-  -webkit-animation-delay: -0.667s;
-}
-div.web-view-spinner div.bar6 {
-  transform: rotate(150deg) translate(0, -130%);
-  -webkit-transform: rotate(150deg) translate(0, -130%);
-  animation-delay: -0.5837s;
-  -webkit-animation-delay: -0.5837s;
-}
-div.web-view-spinner div.bar7 {
-  transform: rotate(180deg) translate(0, -130%);
-  -webkit-transform: rotate(180deg) translate(0, -130%);
-  animation-delay: -0.5s;
-  -webkit-animation-delay: -0.5s;
-}
-div.web-view-spinner div.bar8 {
-  transform: rotate(210deg) translate(0, -130%);
-  -webkit-transform: rotate(210deg) translate(0, -130%);
-  animation-delay: -0.4167s;
-  -webkit-animation-delay: -0.4167s;
-}
-div.web-view-spinner div.bar9 {
-  transform: rotate(240deg) translate(0, -130%);
-  -webkit-transform: rotate(240deg) translate(0, -130%);
-  animation-delay: -0.333s;
-  -webkit-animation-delay: -0.333s;
-}
-div.web-view-spinner div.bar10 {
-  transform: rotate(270deg) translate(0, -130%);
-  -webkit-transform: rotate(270deg) translate(0, -130%);
-  animation-delay: -0.2497s;
-  -webkit-animation-delay: -0.2497s;
-}
-div.web-view-spinner div.bar11 {
-  transform: rotate(300deg) translate(0, -130%);
-  -webkit-transform: rotate(300deg) translate(0, -130%);
-  animation-delay: -0.167s;
-  -webkit-animation-delay: -0.167s;
-}
-div.web-view-spinner div.bar12 {
-  transform: rotate(330deg) translate(0, -130%);
-  -webkit-transform: rotate(330deg) translate(0, -130%);
-  animation-delay: -0.0833s;
-  -webkit-animation-delay: -0.0833s;
-}
-
-@-moz-document url-prefix() {
-  * {
-    scrollbar-width: none;
-  }
-  .vertical-scrollbar,
-  .horizontal-scrollbar {
-    scrollbar-width: initial;
-    scrollbar-color: rgba(96, 100, 108, 0.1) transparent;
-  }
-  .vertical-scrollbar:hover,
-  .horizontal-scrollbar:hover {
-    scrollbar-color: rgba(96, 100, 108, 0.25) transparent;
-  }
-  .vertical-scrollbar:active,
-  .horizontal-scrollbar:active {
-    scrollbar-color: rgba(96, 100, 108, 0.7) transparent;
-  }
-}
-
-.vertical-scrollbar {
-  overflow-y: auto;
-}
-.horizontal-scrollbar {
-  overflow-x: auto;
-}
-.vertical-scrollbar::-webkit-scrollbar,
-.horizontal-scrollbar::-webkit-scrollbar {
-  display: block;
-}
-.vertical-scrollbar::-webkit-scrollbar-track,
-.horizontal-scrollbar::-webkit-scrollbar-track {
-  background-color: transparent;
-  border-radius: 9999px;
-}
-.vertical-scrollbar::-webkit-scrollbar-thumb,
-.horizontal-scrollbar::-webkit-scrollbar-thumb {
-  background-clip: padding-box;
-  background-color: rgba(96, 100, 108, 0.1);
-  border-radius: 9999px;
-}
-.vertical-scrollbar:hover::-webkit-scrollbar-thumb,
-.horizontal-scrollbar:hover::-webkit-scrollbar-thumb {
-  background-color: rgba(96, 100, 108, 0.25);
-}
-.vertical-scrollbar::-webkit-scrollbar-thumb:hover,
-.horizontal-scrollbar::-webkit-scrollbar-thumb:hover {
-  background-color: rgba(96, 100, 108, 0.5);
-}
-.vertical-scrollbar::-webkit-scrollbar-thumb:active,
-.horizontal-scrollbar::-webkit-scrollbar-thumb:active {
-  background-color: rgba(96, 100, 108, 0.7);
-}
-.vertical-scrollbar::-webkit-scrollbar-corner,
-.horizontal-scrollbar::-webkit-scrollbar-corner {
-  background-color: transparent;
-}
-.vertical-scrollbar-margin-top-md::-webkit-scrollbar-track {
-  margin-top: 44px;
-}
-
-/* scrollbar sm size */
-.scrollbar-sm::-webkit-scrollbar {
-  height: 12px;
-  width: 12px;
-}
-.scrollbar-sm::-webkit-scrollbar-thumb {
-  border: 3px solid rgba(0, 0, 0, 0);
-}
-/* scrollbar md size */
-.scrollbar-md::-webkit-scrollbar {
-  height: 14px;
-  width: 14px;
-}
-.scrollbar-md::-webkit-scrollbar-thumb {
-  border: 3px solid rgba(0, 0, 0, 0);
-}
-/* scrollbar lg size */
-
-.scrollbar-lg::-webkit-scrollbar {
-  height: 16px;
-  width: 16px;
-}
-.scrollbar-lg::-webkit-scrollbar-thumb {
-  border: 4px solid rgba(0, 0, 0, 0);
-}
-
-/* highlight class */
-.highlight {
-  border: 1px solid rgb(var(--color-primary-100)) !important;
-}
-.highlight-with-line {
-  border-left: 5px solid rgb(var(--color-primary-100)) !important;
-  background: rgb(var(--color-background-80));
-}
-
-/* By applying below class, the autofilled text in form fields will not have the default autofill background color and styles applied by WebKit browsers  */
-
-.disable-autofill-style:-webkit-autofill,
-.disable-autofill-style:-webkit-autofill:hover,
-.disable-autofill-style:-webkit-autofill:focus,
-.disable-autofill-style:-webkit-autofill:active {
-  -webkit-background-clip: text;
-}
-
-@keyframes slideInFromBottom {
-  0% {
-    transform: translateY(100%);
-    opacity: 0;
-  }
-  100% {
-    transform: translateY(0);
-    opacity: 1;
-  }
-}
-
-@keyframes slideInFromTop {
-  0% {
-    transform: translateY(-100%);
-    opacity: 0;
-  }
-  100% {
-    transform: translateY(0);
-    opacity: 1;
-  }
-}
-
-@keyframes slideOut {
-  0% {
-    transform: translateY(0);
-    opacity: 1;
-  }
-  100% {
-    transform: translateY(-100%);
-    opacity: 0;
-  }
-}
-
-@keyframes slideOutDown {
-  0% {
-    transform: translateY(0);
-    opacity: 1;
-  }
-  100% {
-    transform: translateY(100%);
-    opacity: 0;
-  }
-}
-
-@keyframes fadeOut {
-  0% {
-    opacity: 1;
-  }
-  100% {
-    opacity: 0;
-  }
-}
diff --git a/packages/tailwind-config/index.css b/packages/tailwind-config/index.css
new file mode 100644
index 000000000..ecebd1a56
--- /dev/null
+++ b/packages/tailwind-config/index.css
@@ -0,0 +1,203 @@
+@import "tailwindcss";
+@import "./variables.css";
+@import "./animations.css";
+@source "../**/*.{ts,tsx}";
+
+* {
+  -webkit-text-size-adjust: 100%;
+  -ms-text-size-adjust: 100%;
+  font-variant-ligatures: none;
+  -webkit-font-variant-ligatures: none;
+  text-rendering: optimizeLegibility;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+}
+
+body {
+  @apply font-body bg-canvas text-primary;
+}
+
+/* emoji icon picker */
+@utility conical-gradient {
+  background: conic-gradient(
+    from 180deg at 50% 50%,
+    #ff6b00 0deg,
+    #f7ae59 70.5deg,
+    #3f76ff 151.12deg,
+    #05c3ff 213deg,
+    #18914f 289.87deg,
+    #f6f172 329.25deg,
+    #ff6b00 360deg
+  );
+}
+
+/* progress bar */
+@utility progress-bar {
+  fill: currentColor;
+  color: var(--text-color-secondary);
+}
+
+::-webkit-input-placeholder,
+::placeholder,
+:-ms-input-placeholder {
+  @apply text-placeholder;
+}
+
+@utility vertical-lr {
+  writing-mode: vertical-lr;
+  width: fit-content;
+}
+
+@-moz-document url-prefix() {
+  * {
+    scrollbar-width: none;
+  }
+  .vertical-scrollbar,
+  .horizontal-scrollbar {
+    scrollbar-width: initial;
+    scrollbar-color: rgba(96, 100, 108, 0.1) transparent;
+
+    &:hover {
+      scrollbar-color: rgba(96, 100, 108, 0.25) transparent;
+    }
+
+    &:active {
+      scrollbar-color: rgba(96, 100, 108, 0.7) transparent;
+    }
+  }
+}
+
+/* ---------- Scrollbar utilities ----------- */
+::-webkit-scrollbar {
+  @apply hidden;
+}
+
+.vertical-scrollbar {
+  @apply overflow-y-auto;
+}
+
+.horizontal-scrollbar {
+  @apply overflow-x-auto;
+}
+
+.vertical-scrollbar,
+.horizontal-scrollbar {
+  &::-webkit-scrollbar {
+    @apply block;
+  }
+
+  &::-webkit-scrollbar-track {
+    @apply bg-layer-transparent rounded-full;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-clip: padding-box;
+    @apply bg-scrollbar-thumb rounded-full;
+
+    &:hover {
+      @apply bg-scrollbar-thumb-hover;
+    }
+
+    &:active {
+      @apply bg-scrollbar-thumb-active;
+    }
+  }
+
+  &:hover::-webkit-scrollbar-thumb {
+    @apply bg-scrollbar-thumb-surface-hover;
+  }
+
+  &::-webkit-scrollbar-corner {
+    @apply bg-layer-transparent;
+  }
+}
+
+.vertical-scrollbar-margin-top-md::-webkit-scrollbar-track {
+  margin-top: 44px;
+}
+
+/* Scrollbar variants */
+@utility scrollbar-xs {
+  &::-webkit-scrollbar {
+    height: 10px;
+    width: 10px;
+  }
+  &::-webkit-scrollbar-thumb {
+    border: 3px solid rgba(0, 0, 0, 0);
+  }
+}
+@utility scrollbar-sm {
+  &::-webkit-scrollbar {
+    height: 12px;
+    width: 12px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    border: 3px solid rgba(0, 0, 0, 0);
+  }
+}
+@utility scrollbar-md {
+  &::-webkit-scrollbar {
+    height: 14px;
+    width: 14px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    border: 3px solid rgba(0, 0, 0, 0);
+  }
+}
+@utility scrollbar-lg {
+  &::-webkit-scrollbar {
+    height: 16px;
+    width: 16px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    border: 4px solid rgba(0, 0, 0, 0);
+  }
+}
+
+.hide-vertical-scrollbar::-webkit-scrollbar {
+  width: 0 !important;
+}
+
+.hide-horizontal-scrollbar::-webkit-scrollbar {
+  height: 0 !important;
+}
+
+.hide-both-scrollbars::-webkit-scrollbar {
+  height: 0 !important;
+  width: 0 !important;
+}
+
+/* highlight class */
+@utility highlight {
+  border: 1px solid var(--border-color-accent-strong) !important;
+}
+
+@utility highlight-with-line {
+  border-left: 5px solid var(--border-color-accent-strong) !important;
+  background: var(--background-color-layer-2);
+}
+
+/* By applying below class, the autofilled text in form fields will not have the default autofill background color and styles applied by WebKit browsers  */
+@utility disable-autofill-style {
+  &:-webkit-autofill,
+  &:-webkit-autofill:hover,
+  &:-webkit-autofill:focus,
+  &:-webkit-autofill:active {
+    -webkit-background-clip: text;
+  }
+}
+
+@layer base {
+  button:not(:disabled),
+  [role="button"]:not(:disabled) {
+    cursor: pointer;
+  }
+
+  input::placeholder,
+  textarea::placeholder {
+    @apply text-placeholder;
+  }
+}
diff --git a/packages/tailwind-config/package.json b/packages/tailwind-config/package.json
index 73858f9cf..80ab13ff0 100644
--- a/packages/tailwind-config/package.json
+++ b/packages/tailwind-config/package.json
@@ -1,16 +1,22 @@
 {
   "name": "@plane/tailwind-config",
-  "version": "1.2.3",
-  "license": "AGPL-3.0",
-  "description": "common tailwind configuration across monorepo",
-  "main": "tailwind.config.js",
+  "version": "1.3.0",
   "private": true,
+  "description": "common tailwind configuration across monorepo",
+  "license": "AGPL-3.0",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "main": "tailwind.config.js",
+  "exports": {
+    "./index.css": "./index.css",
+    "./postcss.config.js": "./postcss.config.js"
+  },
+  "dependencies": {
+    "@tailwindcss/postcss": "4.1.17",
+    "postcss": "8.5.6"
+  },
   "devDependencies": {
-    "@tailwindcss/container-queries": "^0.1.1",
-    "@tailwindcss/typography": "^0.5.9",
-    "autoprefixer": "^10.4.14",
-    "postcss": "^8.4.38",
-    "tailwindcss": "^3.4.17",
-    "tailwindcss-animate": "^1.0.6"
+    "tailwindcss": "4.1.17"
   }
 }
diff --git a/packages/tailwind-config/postcss.config.js b/packages/tailwind-config/postcss.config.js
index cbfea5ea2..48431249a 100644
--- a/packages/tailwind-config/postcss.config.js
+++ b/packages/tailwind-config/postcss.config.js
@@ -1,7 +1,6 @@
-module.exports = {
+export default {
   plugins: {
-    "tailwindcss/nesting": {},
-    tailwindcss: {},
-    autoprefixer: {},
+    // "tailwindcss/nesting": {},
+    "@tailwindcss/postcss": {},
   },
 };
diff --git a/packages/tailwind-config/tailwind.config.js b/packages/tailwind-config/tailwind.config.js
deleted file mode 100644
index cc8c11392..000000000
--- a/packages/tailwind-config/tailwind.config.js
+++ /dev/null
@@ -1,492 +0,0 @@
-const convertToRGB = (variableName) => `rgba(var(${variableName}))`;
-const convertToRGBA = (variableName, alpha) =>
-  `rgba(var(${variableName}), ${alpha})`;
-
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  darkMode: "class",
-  content: {
-    relative: true,
-    files: [
-      "./app/**/*.{js,ts,jsx,tsx}",
-      "./core/**/*.{js,ts,jsx,tsx}",
-      "./ce/**/*.{js,ts,jsx,tsx}",
-      "./ee/**/*.{js,ts,jsx,tsx}",
-      "./components/**/*.tsx",
-      "./constants/**/*.{js,ts,jsx,tsx}",
-      "./layouts/**/*.tsx",
-      "./pages/**/*.tsx",
-      "./app/**/*.tsx",
-      "./ui/**/*.tsx",
-      "../../packages/ui/src/**/*.{js,ts,jsx,tsx}",
-      "../../packages/propel/src/**/*.{js,ts,jsx,tsx}",
-      "../../packages/editor/src/**/*.{js,ts,jsx,tsx}",
-      "!../../packages/ui/**/*.stories{js,ts,jsx,tsx}",
-    ],
-  },
-  theme: {
-    extend: {
-      boxShadow: {
-        "custom-shadow": "var(--color-shadow-custom)",
-        "custom-shadow-2xs": "var(--color-shadow-2xs)",
-        "custom-shadow-xs": "var(--color-shadow-xs)",
-        "custom-shadow-sm": "var(--color-shadow-sm)",
-        "custom-shadow-rg": "var(--color-shadow-rg)",
-        "custom-shadow-md": "var(--color-shadow-md)",
-        "custom-shadow-lg": "var(--color-shadow-lg)",
-        "custom-shadow-xl": "var(--color-shadow-xl)",
-        "custom-shadow-2xl": "var(--color-shadow-2xl)",
-        "custom-shadow-3xl": "var(--color-shadow-3xl)",
-        "custom-shadow-4xl": "var(--color-shadow-4xl)",
-        "custom-sidebar-shadow-2xs": "var(--color-sidebar-shadow-2xs)",
-        "custom-sidebar-shadow-xs": "var(--color-sidebar-shadow-xs)",
-        "custom-sidebar-shadow-sm": "var(--color-sidebar-shadow-sm)",
-        "custom-sidebar-shadow-rg": "var(--color-sidebar-shadow-rg)",
-        "custom-sidebar-shadow-md": "var(--color-sidebar-shadow-md)",
-        "custom-sidebar-shadow-lg": "var(--color-sidebar-shadow-lg)",
-        "custom-sidebar-shadow-xl": "var(--color-sidebar-shadow-xl)",
-        "custom-sidebar-shadow-2xl": "var(--color-sidebar-shadow-2xl)",
-        "custom-sidebar-shadow-3xl": "var(--color-sidebar-shadow-3xl)",
-        "custom-sidebar-shadow-4xl": "var(--color-sidebar-shadow-4xl)",
-      },
-      colors: {
-        custom: {
-          primary: {
-            0: "rgb(255, 255, 255)",
-            10: convertToRGB("--color-primary-10"),
-            20: convertToRGB("--color-primary-20"),
-            30: convertToRGB("--color-primary-30"),
-            40: convertToRGB("--color-primary-40"),
-            50: convertToRGB("--color-primary-50"),
-            60: convertToRGB("--color-primary-60"),
-            70: convertToRGB("--color-primary-70"),
-            80: convertToRGB("--color-primary-80"),
-            90: convertToRGB("--color-primary-90"),
-            100: convertToRGB("--color-primary-100"),
-            200: convertToRGB("--color-primary-200"),
-            300: convertToRGB("--color-primary-300"),
-            400: convertToRGB("--color-primary-400"),
-            500: convertToRGB("--color-primary-500"),
-            600: convertToRGB("--color-primary-600"),
-            700: convertToRGB("--color-primary-700"),
-            800: convertToRGB("--color-primary-800"),
-            900: convertToRGB("--color-primary-900"),
-            1000: "rgb(0, 0, 0)",
-            DEFAULT: convertToRGB("--color-primary-100"),
-          },
-          background: {
-            0: "rgb(255, 255, 255)",
-            10: convertToRGB("--color-background-10"),
-            20: convertToRGB("--color-background-20"),
-            30: convertToRGB("--color-background-30"),
-            40: convertToRGB("--color-background-40"),
-            50: convertToRGB("--color-background-50"),
-            60: convertToRGB("--color-background-60"),
-            70: convertToRGB("--color-background-70"),
-            80: convertToRGB("--color-background-80"),
-            90: convertToRGB("--color-background-90"),
-            100: convertToRGB("--color-background-100"),
-            200: convertToRGB("--color-background-200"),
-            300: convertToRGB("--color-background-300"),
-            400: convertToRGB("--color-background-400"),
-            500: convertToRGB("--color-background-500"),
-            600: convertToRGB("--color-background-600"),
-            700: convertToRGB("--color-background-700"),
-            800: convertToRGB("--color-background-800"),
-            900: convertToRGB("--color-background-900"),
-            1000: "rgb(0, 0, 0)",
-            overlay: convertToRGBA("--color-background-80", 0.95),
-            primary: convertToRGB(" --color-background-primary"),
-            error: convertToRGB(" --color-background-error"),
-            DEFAULT: convertToRGB("--color-background-100"),
-          },
-          text: {
-            0: "rgb(255, 255, 255)",
-            10: convertToRGB("--color-text-10"),
-            20: convertToRGB("--color-text-20"),
-            30: convertToRGB("--color-text-30"),
-            40: convertToRGB("--color-text-40"),
-            50: convertToRGB("--color-text-50"),
-            60: convertToRGB("--color-text-60"),
-            70: convertToRGB("--color-text-70"),
-            80: convertToRGB("--color-text-80"),
-            90: convertToRGB("--color-text-90"),
-            100: convertToRGB("--color-text-100"),
-            200: convertToRGB("--color-text-200"),
-            300: convertToRGB("--color-text-300"),
-            350: convertToRGB("--color-text-350"),
-            400: convertToRGB("--color-text-400"),
-            500: convertToRGB("--color-text-500"),
-            600: convertToRGB("--color-text-600"),
-            700: convertToRGB("--color-text-700"),
-            800: convertToRGB("--color-text-800"),
-            900: convertToRGB("--color-text-900"),
-            1000: "rgb(0, 0, 0)",
-            primary: convertToRGB("--color-text-primary"),
-            error: convertToRGB("--color-text-error"),
-            DEFAULT: convertToRGB("--color-text-100"),
-          },
-          border: {
-            0: "rgb(255, 255, 255)",
-            100: convertToRGB("--color-border-100"),
-            200: convertToRGB("--color-border-200"),
-            300: convertToRGB("--color-border-300"),
-            400: convertToRGB("--color-border-400"),
-            1000: "rgb(0, 0, 0)",
-            primary: convertToRGB("--color-border-primary"),
-            error: convertToRGB("--color-border-error"),
-            DEFAULT: convertToRGB("--color-border-200"),
-          },
-          error: {
-            10: convertToRGB("--color-error-10"),
-            20: convertToRGB("--color-error-20"),
-            30: convertToRGB("--color-error-30"),
-            100: convertToRGB("--color-error-100"),
-            200: convertToRGB("--color-error-200"),
-            500: convertToRGB("--color-error-500"),
-          },
-          sidebar: {
-            background: {
-              0: "rgb(255, 255, 255)",
-              10: convertToRGB("--color-sidebar-background-10"),
-              20: convertToRGB("--color-sidebar-background-20"),
-              30: convertToRGB("--color-sidebar-background-30"),
-              40: convertToRGB("--color-sidebar-background-40"),
-              50: convertToRGB("--color-sidebar-background-50"),
-              60: convertToRGB("--color-sidebar-background-60"),
-              70: convertToRGB("--color-sidebar-background-70"),
-              80: convertToRGB("--color-sidebar-background-80"),
-              90: convertToRGB("--color-sidebar-background-90"),
-              100: convertToRGB("--color-sidebar-background-100"),
-              200: convertToRGB("--color-sidebar-background-200"),
-              300: convertToRGB("--color-sidebar-background-300"),
-              400: convertToRGB("--color-sidebar-background-400"),
-              500: convertToRGB("--color-sidebar-background-500"),
-              600: convertToRGB("--color-sidebar-background-600"),
-              700: convertToRGB("--color-sidebar-background-700"),
-              800: convertToRGB("--color-sidebar-background-800"),
-              900: convertToRGB("--color-sidebar-background-900"),
-              1000: "rgb(0, 0, 0)",
-              DEFAULT: convertToRGB("--color-sidebar-background-100"),
-            },
-            text: {
-              0: "rgb(255, 255, 255)",
-              10: convertToRGB("--color-sidebar-text-10"),
-              20: convertToRGB("--color-sidebar-text-20"),
-              30: convertToRGB("--color-sidebar-text-30"),
-              40: convertToRGB("--color-sidebar-text-40"),
-              50: convertToRGB("--color-sidebar-text-50"),
-              60: convertToRGB("--color-sidebar-text-60"),
-              70: convertToRGB("--color-sidebar-text-70"),
-              80: convertToRGB("--color-sidebar-text-80"),
-              90: convertToRGB("--color-sidebar-text-90"),
-              100: convertToRGB("--color-sidebar-text-100"),
-              200: convertToRGB("--color-sidebar-text-200"),
-              300: convertToRGB("--color-sidebar-text-300"),
-              400: convertToRGB("--color-sidebar-text-400"),
-              500: convertToRGB("--color-sidebar-text-500"),
-              600: convertToRGB("--color-sidebar-text-600"),
-              700: convertToRGB("--color-sidebar-text-700"),
-              800: convertToRGB("--color-sidebar-text-800"),
-              900: convertToRGB("--color-sidebar-text-900"),
-              1000: "rgb(0, 0, 0)",
-              DEFAULT: convertToRGB("--color-sidebar-text-100"),
-            },
-            border: {
-              0: "rgb(255, 255, 255)",
-              100: convertToRGB("--color-sidebar-border-100"),
-              200: convertToRGB("--color-sidebar-border-200"),
-              300: convertToRGB("--color-sidebar-border-300"),
-              400: convertToRGB("--color-sidebar-border-400"),
-              1000: "rgb(0, 0, 0)",
-              DEFAULT: convertToRGB("--color-sidebar-border-200"),
-            },
-          },
-          backdrop: "rgba(0, 0, 0, 0.25)",
-          scrollbar: {
-            neutral: "rgba(96, 100, 108, 0.1)",
-            hover: "rgba(96, 100, 108, 0.25)",
-            active: "rgba(96, 100, 108, 0.7)",
-          },
-          subscription: {
-            free: {
-              200: convertToRGB("--color-subscription-free-200"),
-              400: convertToRGB("--color-subscription-free-400"),
-            },
-            one: {
-              200: convertToRGB("--color-subscription-one-200"),
-              400: convertToRGB("--color-subscription-one-400"),
-            },
-            pro: {
-              200: convertToRGB("--color-subscription-pro-200"),
-              400: convertToRGB("--color-subscription-pro-400"),
-            },
-            business: {
-              200: convertToRGB("--color-subscription-business-200"),
-              400: convertToRGB("--color-subscription-business-400"),
-            },
-            enterprise: {
-              200: convertToRGB("--color-subscription-enterprise-200"),
-              400: convertToRGB("--color-subscription-enterprise-400"),
-            },
-          },
-        },
-        toast: {
-          text: {
-            success: convertToRGB("--color-toast-success-text"),
-            error: convertToRGB("--color-toast-error-text"),
-            warning: convertToRGB("--color-toast-warning-text"),
-            info: convertToRGB("--color-toast-info-text"),
-            loading: convertToRGB("--color-toast-loading-text"),
-            secondary: convertToRGB("--color-toast-secondary-text"),
-            tertiary: convertToRGB("--color-toast-tertiary-text"),
-          },
-          background: {
-            success: convertToRGB("--color-toast-success-background"),
-            error: convertToRGB("--color-toast-error-background"),
-            warning: convertToRGB("--color-toast-warning-background"),
-            info: convertToRGB("--color-toast-info-background"),
-            loading: convertToRGB("--color-toast-loading-background"),
-          },
-          border: {
-            success: convertToRGB("--color-toast-success-border"),
-            error: convertToRGB("--color-toast-error-border"),
-            warning: convertToRGB("--color-toast-warning-border"),
-            info: convertToRGB("--color-toast-info-border"),
-            loading: convertToRGB("--color-toast-loading-border"),
-          },
-        },
-      },
-      keyframes: {
-        leftToaster: {
-          "0%": { left: "-20rem" },
-          "100%": { left: "0" },
-        },
-        rightToaster: {
-          "0%": { right: "-20rem" },
-          "100%": { right: "0" },
-        },
-        "bar-loader": {
-          from: { left: "-100%" },
-          to: { left: "100%" },
-        },
-      },
-      typography: () => ({
-        brand: {
-          css: {
-            "--tw-prose-body": convertToRGB("--color-text-100"),
-            "--tw-prose-p": convertToRGB("--color-text-100"),
-            "--tw-prose-headings": convertToRGB("--color-text-100"),
-            "--tw-prose-lead": convertToRGB("--color-text-100"),
-            "--tw-prose-links": convertToRGB("--color-primary-100"),
-            "--tw-prose-bold": "inherit",
-            "--tw-prose-counters": convertToRGB("--color-text-100"),
-            "--tw-prose-bullets": convertToRGB("--color-text-100"),
-            "--tw-prose-hr": convertToRGB("--color-text-100"),
-            "--tw-prose-quotes": convertToRGB("--color-text-100"),
-            "--tw-prose-quote-borders": convertToRGB("--color-border-200"),
-            "--tw-prose-code": convertToRGB("--color-text-100"),
-            "--tw-prose-pre-code": convertToRGB("--color-text-100"),
-            "--tw-prose-pre-bg": convertToRGB("--color-background-100"),
-            "--tw-prose-th-borders": convertToRGB("--color-border-200"),
-            "--tw-prose-td-borders": convertToRGB("--color-border-200"),
-          },
-        },
-      }),
-      screens: {
-        "3xl": "1792px",
-      },
-      // scale down font sizes to 90% of default
-      fontSize: {
-        "2xs": "0.5625rem",
-        xs: "0.675rem",
-        sm: "0.7875rem",
-        base: "0.9rem",
-        lg: "1.0125rem",
-        xl: "1.125rem",
-        "2xl": "1.35rem",
-        "3xl": "1.6875rem",
-        "4xl": "2.25rem",
-        "5xl": "2.7rem",
-        "6xl": "3.375rem",
-        "7xl": "4.05rem",
-        "8xl": "5.4rem",
-        "9xl": "7.2rem",
-      },
-      // scale down spacing to 90% of default
-      padding: {
-        0: "0",
-        0.5: "0.1125rem",
-        1: "0.225rem",
-        1.5: "0.3375rem",
-        2: "0.45rem",
-        2.5: "0.5625rem",
-        3: "0.675rem",
-        3.5: "0.7875rem",
-        4: "0.9rem",
-        5: "1.125rem",
-        6: "1.35rem",
-        7: "1.575rem",
-        8: "1.8rem",
-        9: "2.025rem",
-        10: "2.25rem",
-        11: "2.475rem",
-        12: "2.7rem",
-        16: "3.6rem",
-        20: "4.5rem",
-        24: "5.4rem",
-        32: "7.2rem",
-        40: "9rem",
-        48: "10.8rem",
-        56: "12.6rem",
-        64: "14.4rem",
-        72: "16.2rem",
-        80: "18rem",
-        96: "21.6rem",
-        "page-x": "1.35rem",
-        "page-y": "1.35rem",
-      },
-      margin: {
-        0: "0",
-        0.5: "0.1125rem",
-        1: "0.225rem",
-        1.5: "0.3375rem",
-        2: "0.45rem",
-        2.5: "0.5625rem",
-        3: "0.675rem",
-        3.5: "0.7875rem",
-        4: "0.9rem",
-        5: "1.125rem",
-        6: "1.35rem",
-        7: "1.575rem",
-        8: "1.8rem",
-        9: "2.025rem",
-        10: "2.25rem",
-        11: "2.475rem",
-        12: "2.7rem",
-        16: "3.6rem",
-        20: "4.5rem",
-        24: "5.4rem",
-        32: "7.2rem",
-        40: "9rem",
-        48: "10.8rem",
-        56: "12.6rem",
-        64: "14.4rem",
-        72: "16.2rem",
-        80: "18rem",
-        96: "21.6rem",
-      },
-      height: {
-        header: "3.25rem",
-      },
-      space: {
-        0: "0",
-        0.5: "0.1125rem",
-        1: "0.225rem",
-        1.5: "0.3375rem",
-        2: "0.45rem",
-        2.5: "0.5625rem",
-        3: "0.675rem",
-        3.5: "0.7875rem",
-        4: "0.9rem",
-        5: "1.125rem",
-        6: "1.35rem",
-        7: "1.575rem",
-        8: "1.8rem",
-        9: "2.025rem",
-        10: "2.25rem",
-        11: "2.475rem",
-        12: "2.7rem",
-        16: "3.6rem",
-        20: "4.5rem",
-        24: "5.4rem",
-        32: "7.2rem",
-        40: "9rem",
-        48: "10.8rem",
-        56: "12.6rem",
-        64: "14.4rem",
-        72: "16.2rem",
-        80: "18rem",
-        96: "21.6rem",
-      },
-      gap: {
-        0: "0",
-        0.5: "0.1125rem",
-        1: "0.225rem",
-        1.5: "0.3375rem",
-        2: "0.45rem",
-        2.5: "0.5625rem",
-        3: "0.675rem",
-        3.5: "0.7875rem",
-        4: "0.9rem",
-        5: "1.125rem",
-        6: "1.35rem",
-        7: "1.575rem",
-        8: "1.8rem",
-        9: "2.025rem",
-        10: "2.25rem",
-        11: "2.475rem",
-        12: "2.7rem",
-        16: "3.6rem",
-        20: "4.5rem",
-        24: "5.4rem",
-        32: "7.2rem",
-        40: "9rem",
-        48: "10.8rem",
-        56: "12.6rem",
-        64: "14.4rem",
-        72: "16.2rem",
-        80: "18rem",
-        96: "21.6rem",
-      },
-      fontFamily: {
-        custom: ["Inter", "sans-serif"],
-      },
-      zIndex: {
-        base: 0 /* default content */,
-        header: 10 /* sticky headers, navbars */,
-        sidebar: 20 /* sidebars, drawers */,
-        dropdown: 30 /* dropdowns, select menus */,
-        popover: 40 /* popovers, hovercards */,
-        tooltip: 50 /* tooltips, hints */,
-        sticky: 60 /* sticky UI */,
-        backdrop: 90 /* backdrop / overlay */,
-        modal: 100 /* dialogs, modals */,
-        toast: 110 /* toast, alerts */,
-        loader: 120 /* blocking loader/spinner */,
-        max: 9999 /* emergency override (rare use) */,
-      },
-    },
-  },
-  plugins: [
-    require("tailwindcss-animate"),
-    require("@tailwindcss/typography"),
-    require("@tailwindcss/container-queries"),
-    function ({ addUtilities }) {
-      const newUtilities = {
-        // Mobile screens
-        ".px-page-x": {
-          paddingLeft: "1.25rem",
-          paddingRight: "1.25rem",
-        },
-        // Medium screens (768px and up)
-        "@media (min-width: 768px)": {
-          ".px-page-x": {
-            paddingLeft: "1.35rem",
-            paddingRight: "1.35rem",
-          },
-        },
-        // Hide scrollbar but keep functionality
-        ".scrollbar-hide": {
-          "-ms-overflow-style": "none" /* IE and Edge */,
-          "scrollbar-width": "none" /* Firefox */,
-          "&::-webkit-scrollbar": {
-            display: "none" /* Chrome, Safari and Opera */,
-          },
-        },
-      };
-
-      addUtilities(newUtilities, ["responsive"]);
-    },
-  ],
-};
diff --git a/packages/tailwind-config/variables.css b/packages/tailwind-config/variables.css
new file mode 100644
index 000000000..1f697cdb5
--- /dev/null
+++ b/packages/tailwind-config/variables.css
@@ -0,0 +1,1309 @@
+@custom-variant dark (&:where([data-theme*="dark"], [data-theme*="dark"] *));
+@custom-variant dark-high-contrast (&:where([data-theme="dark-contrast"], [data-theme="dark-contrast"] *));
+@custom-variant light-high-contrast (&:where([data-theme="light-contrast"], [data-theme="light-contrast"] *));
+
+@layer base {
+  :root,
+  :host {
+    /* ---------- Alpha colors ---------- */
+    /* White alpha */
+    --alpha-white-0: oklch(1 0 0 / 0%);
+    --alpha-white-100: oklch(1 0 0 / 5%);
+    --alpha-white-200: oklch(1 0 0 / 10%);
+    --alpha-white-300: oklch(1 0 0 / 15%);
+    --alpha-white-400: oklch(1 0 0 / 20%);
+    --alpha-white-500: oklch(1 0 0 / 30%);
+    --alpha-white-600: oklch(1 0 0 / 40%);
+    --alpha-white-700: oklch(1 0 0 / 50%);
+    --alpha-white-800: oklch(1 0 0 / 60%);
+    --alpha-white-900: oklch(1 0 0 / 70%);
+    --alpha-white-1000: oklch(1 0 0 / 80%);
+    --alpha-white-1100: oklch(1 0 0 / 90%);
+    --alpha-white-1200: oklch(1 0 0 / 95%);
+    /* Black alpha */
+    --alpha-black-0: oklch(0.1482 0.0034 196.79 / 0%);
+    --alpha-black-100: oklch(0.1482 0.0034 196.79 / 5%);
+    --alpha-black-200: oklch(0.1482 0.0034 196.79 / 10%);
+    --alpha-black-300: oklch(0.1482 0.0034 196.79 / 15%);
+    --alpha-black-400: oklch(0.1482 0.0034 196.79 / 20%);
+    --alpha-black-500: oklch(0.1482 0.0034 196.79 / 30%);
+    --alpha-black-600: oklch(0.1482 0.0034 196.79 / 40%);
+    --alpha-black-700: oklch(0.1482 0.0034 196.79 / 50%);
+    --alpha-black-800: oklch(0.1482 0.0034 196.79 / 60%);
+    --alpha-black-900: oklch(0.1482 0.0034 196.79 / 70%);
+    --alpha-black-1000: oklch(0.1482 0.0034 196.79 / 80%);
+    --alpha-black-1100: oklch(0.1482 0.0034 196.79 / 90%);
+    --alpha-black-1200: oklch(0.1482 0.0034 196.79 / 95%);
+    /* --------- Extended colors ---------- */
+    /* Purple */
+    --extended-color-purple-25: oklch(0.981 0.0054 297.73);
+    --extended-color-purple-50: oklch(0.9421 0.0162 293.74);
+    --extended-color-purple-100: oklch(0.8808 0.0343 293.03);
+    --extended-color-purple-200: oklch(0.779 0.0639 293.01);
+    --extended-color-purple-300: oklch(0.6978 0.0888 291.44);
+    --extended-color-purple-400: oklch(0.6139 0.1164 290.19);
+    --extended-color-purple-500: oklch(0.5527 0.1361 288.8);
+    --extended-color-purple-600: oklch(0.4895 0.157 286.65);
+    --extended-color-purple-700: oklch(0.42 0.1303 287.25);
+    --extended-color-purple-800: oklch(0.3617 0.1077 287.53);
+    --extended-color-purple-900: oklch(0.2861 0.0795 287.41);
+    --extended-color-purple-950: oklch(0.219 0.0552 288.93);
+    /* Orange */
+    --extended-color-orange-25: oklch(0.9856 0.0084 56.32);
+    --extended-color-orange-50: oklch(0.964 0.0219 58.79);
+    --extended-color-orange-100: oklch(0.9152 0.0522 56.77);
+    --extended-color-orange-200: oklch(0.8504 0.097 56.87);
+    --extended-color-orange-300: oklch(0.801 0.1323 55.27);
+    --extended-color-orange-400: oklch(0.7563 0.1644 52.56);
+    --extended-color-orange-500: oklch(0.7177 0.1905 47.86);
+    --extended-color-orange-600: oklch(0.6601 0.1884 45.09);
+    --extended-color-orange-700: oklch(0.5737 0.162 45.72);
+    --extended-color-orange-800: oklch(0.5059 0.141467 46.3267);
+    --extended-color-orange-900: oklch(0.3897 0.105571 48.3415);
+    --extended-color-orange-950: oklch(0.2896 0.0746 51.86);
+    /* Crimson */
+    --extended-color-crimson-25: oklch(0.9805 0.0066 28.83);
+    --extended-color-crimson-50: oklch(0.9503 0.0186 21.57);
+    --extended-color-crimson-100: oklch(0.8847 0.0455 23.1);
+    --extended-color-crimson-200: oklch(0.791 0.0874 23.59);
+    --extended-color-crimson-300: oklch(0.72 0.124 24.83);
+    --extended-color-crimson-400: oklch(0.6556 0.1604 26.47);
+    --extended-color-crimson-500: oklch(0.5954 0.1956 28.51);
+    --extended-color-crimson-600: oklch(0.5284 0.185 28.96);
+    --extended-color-crimson-700: oklch(0.4754 0.1647 28.98);
+    --extended-color-crimson-800: oklch(0.4209 0.1438 29.01);
+    --extended-color-crimson-900: oklch(0.3249 0.106 28.39);
+    --extended-color-crimson-950: oklch(0.2457 0.0742 27.56);
+    /* Emerald */
+    --extended-color-emerald-25: oklch(0.9884 0.0082 157.1);
+    --extended-color-emerald-50: oklch(0.9563 0.0256 154.47);
+    --extended-color-emerald-100: oklch(0.9153 0.0531 153.59);
+    --extended-color-emerald-200: oklch(0.8679 0.0829 153.02);
+    --extended-color-emerald-300: oklch(0.8221 0.1121 152.16);
+    --extended-color-emerald-400: oklch(0.7785 0.1398 151.07);
+    --extended-color-emerald-500: oklch(0.7401 0.166 149.61);
+    --extended-color-emerald-600: oklch(0.6567 0.1599 148.98);
+    --extended-color-emerald-700: oklch(0.5883 0.1413 149.06);
+    --extended-color-emerald-800: oklch(0.4965 0.1172 149.18);
+    --extended-color-emerald-900: oklch(0.4003 0.0918 149.37);
+    --extended-color-emerald-950: oklch(0.2982 0.0631 150.55);
+    /* Pink */
+    --extended-color-pink-25: oklch(0.9828 0.005 345.28);
+    --extended-color-pink-50: oklch(0.9394 0.0201 340.71);
+    --extended-color-pink-100: oklch(0.8759 0.0418 339.71);
+    --extended-color-pink-200: oklch(0.805 0.0664 341.18);
+    --extended-color-pink-300: oklch(0.736 0.0938 342.16);
+    --extended-color-pink-400: oklch(0.6673 0.1206 342.89);
+    --extended-color-pink-500: oklch(0.6185 0.1388 344.06);
+    --extended-color-pink-600: oklch(0.5704 0.1574 345.25);
+    --extended-color-pink-700: oklch(0.4947 0.1333 344.88);
+    --extended-color-pink-800: oklch(0.4162 0.1108 344.66);
+    --extended-color-pink-900: oklch(0.326 0.0807 344.57);
+    --extended-color-pink-950: oklch(0.2474 0.0553 344.95);
+    /* Yellow */
+    --extended-color-yellow-25: oklch(0.989 0.0073 80.72);
+    --extended-color-yellow-50: oklch(0.9631 0.0268 85.66);
+    --extended-color-yellow-100: oklch(0.9297 0.0545 86.15);
+    --extended-color-yellow-200: oklch(0.8893 0.0843 85.3);
+    --extended-color-yellow-300: oklch(0.8522 0.1121 85.14);
+    --extended-color-yellow-400: oklch(0.8167 0.1342 83.9);
+    --extended-color-yellow-500: oklch(0.79 0.1466 82.04);
+    --extended-color-yellow-600: oklch(0.7399 0.1487 79.36);
+    --extended-color-yellow-700: oklch(0.683 0.1365 79.84);
+    --extended-color-yellow-800: oklch(0.5522 0.1093 80.44);
+    --extended-color-yellow-900: oklch(0.425 0.0824 81.46);
+    --extended-color-yellow-950: oklch(0.3142 0.0586 82.21);
+    /* Indigo */
+    --extended-color-indigo-25: oklch(0.9813 0.0074 260.73);
+    --extended-color-indigo-50: oklch(0.9415 0.022 263.19);
+    --extended-color-indigo-100: oklch(0.8828 0.045 263.07);
+    --extended-color-indigo-200: oklch(0.7852 0.086 263.89);
+    --extended-color-indigo-300: oklch(0.7066 0.121 263.57);
+    --extended-color-indigo-400: oklch(0.6322 0.1556 262.59);
+    --extended-color-indigo-500: oklch(0.579 0.1807 262.31);
+    --extended-color-indigo-600: oklch(0.5291 0.2045 262.05);
+    --extended-color-indigo-700: oklch(0.458 0.1753 262.2);
+    --extended-color-indigo-800: oklch(0.3862 0.1436 262.12);
+    --extended-color-indigo-900: oklch(0.3019 0.1051 262.16);
+    --extended-color-indigo-950: oklch(0.2308 0.0713 261.96);
+    /* Grey */
+    --extended-color-grey-25: oklch(0.9851 0 0);
+    --extended-color-grey-50: oklch(0.9461 0 0);
+    --extended-color-grey-100: oklch(0.9067 0 0);
+    --extended-color-grey-200: oklch(0.8297 0 0);
+    --extended-color-grey-300: oklch(0.7668 0 0);
+    --extended-color-grey-400: oklch(0.6993 0 0);
+    --extended-color-grey-500: oklch(0.65 0 0);
+    --extended-color-grey-600: oklch(0.5999 0 0);
+    --extended-color-grey-700: oklch(0.5208 0 0);
+    --extended-color-grey-800: oklch(0.4386 0 0);
+    --extended-color-grey-900: oklch(0.3407 0 0);
+    --extended-color-grey-950: oklch(0.2603 0 0);
+    /* Priority */
+    --priority-urgent: oklch(0.5798 0.1766 26.99);
+    --priority-high: oklch(0.6802 0.1633 50.67);
+    --priority-medium: oklch(0.79 0.1466 82.04);
+    --priority-low: oklch(0.579 0.1807 262.31);
+    --priority-none: oklch(0.6376 0.0129 231.77);
+
+    /* -------------------- Light mode color tokens -------------------- */
+    /* Neutral colors */
+    --neutral-white: oklch(1 0 0);
+    --neutral-100: oklch(0.9848 0.0003 230.66);
+    --neutral-200: oklch(0.9696 0.0007 230.67);
+    --neutral-300: oklch(0.9543 0.001 230.67);
+    --neutral-400: oklch(0.9389 0.0014 230.68);
+    --neutral-500: oklch(0.9235 0.001733 230.6853);
+    --neutral-600: oklch(0.8925 0.0024 230.7);
+    --neutral-700: oklch(0.8612 0.0032 230.71);
+    --neutral-800: oklch(0.6668 0.0079 230.82);
+    --neutral-900: oklch(0.6161 0.009153 230.867);
+    --neutral-1000: oklch(0.5288 0.0083 230.88);
+    --neutral-1100: oklch(0.4377 0.0066 230.87);
+    --neutral-1200: oklch(0.2378 0.0029 230.83);
+    --neutral-black: oklch(0.1472 0.0034 230.83);
+    /* Brand colors */
+    --brand-100: oklch(0.9847 0.0083 236.56);
+    --brand-200: oklch(0.9715 0.0167 230.9);
+    --brand-300: oklch(0.9428 0.0341 230.22);
+    --brand-400: oklch(0.9008 0.0587 232);
+    --brand-500: oklch(0.8414 0.0947 233.08);
+    --brand-600: oklch(0.7649 0.1392 236.3);
+    --brand-700: oklch(0.6766 0.1665 243.91);
+    --brand-900: oklch(0.4347 0.104093 242.4823);
+    --brand-1000: oklch(0.3399 0.0783 240.32);
+    --brand-1100: oklch(0.2626 0.0578 237.5);
+    --brand-1200: oklch(0.2093 0.0438 234.02);
+    --brand-default: oklch(0.4799 0.1158 242.91);
+    /* Green/Success colors */
+    --green-100: oklch(0.9819 0.0181 155.83);
+    --green-200: oklch(0.9624 0.0434 156.74);
+    --green-300: oklch(0.9258 0.0845 155.86);
+    --green-400: oklch(0.8704 0.149 154.62);
+    --green-500: oklch(0.7914 0.2091 151.66);
+    --green-600: oklch(0.7289 0.2119 147.82);
+    --green-700: oklch(0.632 0.185972 147.3695);
+    --green-800: oklch(0.5296 0.149485 148.9899);
+    --green-900: oklch(0.4468 0.1187 151.4);
+    --green-1000: oklch(0.3935 0.0957 152.28);
+    --green-1100: oklch(0.2654 0.0651 152.77);
+    /* Amber/Warning colors */
+    --amber-100: oklch(0.9869 0.0214 95.28);
+    --amber-200: oklch(0.9617 0.0592 95.89);
+    --amber-300: oklch(0.9244 0.1203 95.85);
+    --amber-400: oklch(0.8781 0.1688 91.86);
+    --amber-500: oklch(0.829 0.1712 81.04);
+    --amber-600: oklch(0.7724 0.172798 65.367);
+    --amber-700: oklch(0.6671 0.1685 53.38);
+    --amber-800: oklch(0.557 0.158291 45.3594);
+    --amber-900: oklch(0.4747 0.135757 44.9806);
+    --amber-1000: oklch(0.4149 0.1126 45.88);
+    --amber-1100: oklch(0.279 0.0773 45.6);
+    /* Red/Danger colors */
+    --red-100: oklch(0.9705 0.0129 17.38);
+    --red-200: oklch(0.9365 0.032 17.74);
+    --red-300: oklch(0.8834 0.0616 18.39);
+    --red-400: oklch(0.8053 0.1109 19.78);
+    --red-500: oklch(0.7022 0.1892 22.23);
+    --red-600: oklch(0.6378 0.2373 25.44);
+    --red-700: oklch(0.583 0.238666 28.4765);
+    --red-800: oklch(0.5095 0.208583 28.513);
+    --red-900: oklch(0.4446 0.1774 26.79);
+    --red-1000: oklch(0.3967 0.1408 25.71);
+    --red-1100: oklch(0.3493 0.1215 25.21);
+
+    /* -------------------- Light mode custom(derived) colors -------------------- */
+    /* Scrollbar colors */
+    --scrollbar-thumb: var(--alpha-black-200);
+    --scrollbar-thumb-surface-hover: var(--alpha-black-300);
+    --scrollbar-thumb-hover: var(--alpha-black-400);
+    --scrollbar-thumb-active: var(--alpha-black-500);
+    /* Background colors */
+    --bg-canvas: var(--neutral-300);
+    --bg-surface-1: var(--neutral-white);
+    --bg-surface-2: var(--neutral-100);
+    --bg-layer-1: var(--neutral-200);
+    --bg-layer-1-hover: var(--neutral-300);
+    --bg-layer-1-active: var(--neutral-400);
+    --bg-layer-1-selected: var(--neutral-400);
+    --bg-layer-2: var(--neutral-white);
+    --bg-layer-2-hover: var(--neutral-100);
+    --bg-layer-2-active: var(--neutral-200);
+    --bg-layer-2-selected: var(--neutral-200);
+    --bg-layer-3: var(--neutral-300);
+    --bg-layer-3-hover: var(--neutral-400);
+    --bg-layer-3-active: var(--neutral-500);
+    --bg-layer-3-selected: var(--neutral-500);
+    --bg-layer-transparent: var(--alpha-white-0);
+    --bg-layer-transparent-hover: var(--alpha-black-100);
+    --bg-layer-transparent-active: var(--alpha-black-200);
+    --bg-layer-transparent-selected: var(--alpha-black-300);
+    --bg-layer-disabled: var(--neutral-400);
+    --bg-accent-primary: var(--brand-default);
+    --bg-accent-primary-hover: var(--brand-900);
+    --bg-accent-primary-active: var(--brand-1000);
+    --bg-accent-subtle: var(--brand-100);
+    --bg-accent-subtle-hover: var(--brand-200);
+    --bg-accent-subtle-active: var(--brand-300);
+    --bg-success-primary: var(--green-700);
+    --bg-success-subtle: var(--green-100);
+    --bg-success-subtle-1: var(--green-200);
+    --bg-warning-primary: var(--amber-600);
+    --bg-warning-subtle: var(--amber-100);
+    --bg-danger-primary: var(--red-700);
+    --bg-danger-primary-hover: var(--red-800);
+    --bg-danger-primary-active: var(--red-900);
+    --bg-danger-primary-selected: var(--red-900);
+    --bg-danger-subtle: var(--red-100);
+    --bg-danger-subtle-hover: var(--red-200);
+    --bg-danger-subtle-active: var(--red-300);
+    --bg-danger-subtle-selected: var(--red-300);
+    --bg-danger-transparent: var(--red-100);
+    --bg-danger-transparent-hover: var(--red-100);
+    --bg-danger-transparent-active: var(--red-100);
+    --bg-danger-transparent-selected: var(--red-100);
+    --bg-backdrop: var(--alpha-black-500);
+    --bg-inverse: var(--alpha-black-1000);
+    /* Border colors */
+    --border-subtle: var(--neutral-400);
+    --border-subtle-1: var(--neutral-500);
+    --border-strong: var(--neutral-600);
+    --border-strong-1: var(--neutral-700);
+    --border-inverse: var(--neutral-white);
+    --border-disabled: var(--neutral-300);
+    --border-accent-strong: var(--brand-default);
+    --border-accent-subtle: var(--brand-300);
+    --border-success-strong: var(--green-700);
+    --border-success-subtle: var(--green-300);
+    --border-warning-strong: var(--amber-700);
+    --border-warning-subtle: var(--amber-400);
+    --border-danger-strong: var(--red-700);
+    --border-danger-subtle: var(--red-400);
+    /* Text colors */
+    --txt-primary: var(--neutral-1200);
+    --txt-secondary: var(--neutral-1100);
+    --txt-tertiary: var(--neutral-1000);
+    --txt-placeholder: var(--neutral-900);
+    --txt-disabled: var(--neutral-800);
+    --txt-accent-primary: var(--brand-default);
+    --txt-accent-secondary: var(--brand-700);
+    --txt-on-color: var(--neutral-100);
+    --txt-on-color-disabled: var(--alpha-black-400);
+    --txt-inverse: var(--neutral-white);
+    --txt-success-primary: var(--green-900);
+    --txt-success-secondary: var(--green-700);
+    --txt-warning-primary: var(--amber-900);
+    --txt-warning-secondary: var(--amber-700);
+    --txt-danger-primary: var(--red-900);
+    --txt-danger-secondary: var(--red-700);
+    /* Icon colors */
+    --txt-icon-primary: var(--neutral-1200);
+    --txt-icon-accent-subtle: var(--brand-500);
+    --txt-icon-accent-primary: var(--brand-default);
+    --txt-icon-danger-primary: var(--red-900);
+    --txt-icon-danger-secondary: var(--red-700);
+    --txt-icon-success-primary: var(--green-900);
+    --txt-icon-success-secondary: var(--green-700);
+    --txt-icon-warning-primary: var(--amber-900);
+    --txt-icon-warning-secondary: var(--amber-700);
+    --txt-icon-accent-primary-inverse: var(--brand-900);
+    --txt-icon-accent-secondary: var(--brand-1200);
+    --txt-icon-secondary: var(--neutral-1100);
+    --txt-icon-tertiary: var(--neutral-900);
+    --txt-icon-placeholder: var(--neutral-800);
+    --txt-icon-disabled: var(--neutral-700);
+    --txt-icon-danger: var(--red-700);
+    --txt-icon-on-color: var(--neutral-white);
+    --txt-icon-on-color-disabled: var(--alpha-black-400);
+    --txt-icon-inverse: var(--neutral-white);
+    /* Link colors */
+    --txt-link-primary: var(--brand-default);
+    --txt-link-primary-hover: var(--brand-900);
+    --txt-link-secondary: var(--neutral-900);
+    /* Label colors */
+    --label-indigo-bg: var(--extended-color-indigo-50);
+    --label-indigo-bg-strong: var(--extended-color-indigo-700);
+    --label-indigo-hover: var(--extended-color-indigo-100);
+    --label-indigo-icon: var(--extended-color-indigo-700);
+    --label-indigo-text: var(--extended-color-indigo-700);
+    --label-indigo-border: var(--extended-color-indigo-700);
+    --label-indigo-focus: var(--extended-color-indigo-500);
+    --label-emerald-bg: var(--extended-color-emerald-50);
+    --label-emerald-bg-strong: var(--extended-color-emerald-600);
+    --label-emerald-hover: var(--extended-color-emerald-200);
+    --label-emerald-icon: var(--extended-color-emerald-800);
+    --label-emerald-text: var(--extended-color-emerald-800);
+    --label-emerald-border: var(--extended-color-emerald-800);
+    --label-emerald-focus: var(--extended-color-emerald-700);
+    --label-grey-bg: var(--extended-color-grey-50);
+    --label-grey-bg-strong: var(--extended-color-grey-700);
+    --label-grey-hover: var(--extended-color-grey-100);
+    --label-grey-icon: var(--extended-color-grey-700);
+    --label-grey-text: var(--extended-color-grey-700);
+    --label-grey-border: var(--extended-color-grey-700);
+    --label-grey-focus: var(--extended-color-grey-500);
+    --label-crimson-bg: var(--extended-color-crimson-50);
+    --label-crimson-bg-strong: var(--extended-color-crimson-700);
+    --label-crimson-hover: var(--extended-color-crimson-100);
+    --label-crimson-icon: var(--extended-color-crimson-700);
+    --label-crimson-text: var(--extended-color-crimson-700);
+    --label-crimson-border: var(--extended-color-crimson-700);
+    --label-crimson-focus: var(--extended-color-crimson-500);
+    --label-yellow-bg: var(--extended-color-yellow-50);
+    --label-yellow-bg-strong: var(--extended-color-yellow-600);
+    --label-yellow-hover: var(--extended-color-yellow-100);
+    --label-yellow-icon: var(--extended-color-yellow-700);
+    --label-yellow-text: var(--extended-color-yellow-700);
+    --label-yellow-border: var(--extended-color-yellow-600);
+    --label-yellow-focus: var(--extended-color-yellow-400);
+    --label-orange-bg: var(--extended-color-orange-50);
+    --label-orange-bg-strong: var(--extended-color-orange-600);
+    --label-orange-hover: var(--extended-color-orange-100);
+    --label-orange-icon: var(--extended-color-orange-600);
+    --label-orange-text: var(--extended-color-orange-600);
+    --label-orange-border: var(--extended-color-orange-600);
+    --label-orange-focus: var(--extended-color-orange-300);
+    --label-pink-bg: var(--extended-color-pink-50);
+    --label-pink-bg-strong: var(--extended-color-pink-600);
+    --label-pink-hover: var(--extended-color-pink-100);
+    --label-pink-icon: var(--extended-color-pink-600);
+    --label-pink-text: var(--extended-color-pink-600);
+    --label-pink-border: var(--extended-color-pink-600);
+    --label-pink-focus: var(--extended-color-pink-400);
+    --label-purple-bg: var(--extended-color-purple-50);
+    --label-purple-bg-strong: var(--extended-color-purple-500);
+    --label-purple-hover: var(--extended-color-purple-100);
+    --label-purple-icon: var(--extended-color-purple-500);
+    --label-purple-text: var(--extended-color-purple-600);
+    --label-purple-border: var(--extended-color-purple-600);
+    --label-purple-focus: var(--extended-color-purple-300);
+    /* Illustration colors */
+    --illustration-fill-primary: var(--neutral-white);
+    --illustration-fill-secondary: var(--neutral-200);
+    --illustration-fill-tertiary: var(--neutral-400);
+    --illustration-fill-quaternary: var(--neutral-700);
+    --illustration-stroke-primary: var(--neutral-700);
+    --illustration-stroke-secondary: var(--neutral-800);
+    --illustration-stroke-tertiary: var(--neutral-1200);
+    /* Neutral plan colors */
+    --txt-plans-neutral-primary: var(--neutral-1000);
+    --txt-plans-neutral-color: var(--neutral-100);
+    --bg-plans-neutral-subtle: var(--neutral-400);
+    --bg-plans-neutral-solid: var(--neutral-1200);
+    /* Brand plan colors */
+    --txt-plans-brand-primary: var(--brand-1200);
+    --txt-plans-brand-color: var(--neutral-100);
+    --bg-plans-brand-subtle: var(--brand-200);
+    --bg-plans-brand-solid: var(--brand-1200);
+
+    /* ---------- Dark mode color tokens ---------- */
+    @variant dark {
+      /* Neutral colors */
+      --neutral-black: oklch(0.1689 0.0021 230.81);
+      --neutral-100: oklch(0.1932 0.002 230.81);
+      --neutral-200: oklch(0.2158 0.0025 230.82);
+      --neutral-300: oklch(0.2378 0.0029 230.83);
+      --neutral-400: oklch(0.2593 0.0033 230.84);
+      --neutral-500: oklch(0.3011 0.0041 230.85);
+      --neutral-600: oklch(0.3415 0.0049 230.86);
+      --neutral-700: oklch(0.3999 0.0059 230.87);
+      --neutral-800: oklch(0.5989 0.0096 230.88);
+      --neutral-900: oklch(0.6835 0.0074 230.81);
+      --neutral-1000: oklch(0.7655 0.0054 230.76);
+      --neutral-1100: oklch(0.8455 0.0035 230.72);
+      --neutral-1200: oklch(0.9235 0.001733 230.6853);
+      --neutral-white: oklch(0.9702 0 0);
+      /* Brand colors */
+      --brand-100: oklch(0.2029 0.03 232.24);
+      --brand-200: oklch(0.2513 0.0418 234.6);
+      --brand-300: oklch(0.3208 0.05806 236.44);
+      --brand-400: oklch(0.4088 0.077702 237.13);
+      --brand-500: oklch(0.4511 0.087024 237.37);
+      --brand-700: oklch(0.7408 0.100309 233.89);
+      --brand-800: oklch(0.8318 0.065614 232.07);
+      --brand-900: oklch(0.8969 0.040089 231.35);
+      --brand-1000: oklch(0.9409 0.022883 231.01);
+      --brand-1100: oklch(0.9704 0.011421 230.82);
+      --brand-1200: oklch(0.9856 0.005 228.82);
+      --brand-default: oklch(0.6311 0.126281 238.01);
+      /* Green colors */
+      --green-100: oklch(0.2721 0.067322 152.52);
+      --green-200: oklch(0.3935 0.0957 152.28);
+      --green-300: oklch(0.4468 0.1187 151.4);
+      --green-400: oklch(0.5296 0.149485 148.9899);
+      --green-500: oklch(0.632 0.185972 147.3695);
+      --green-600: oklch(0.7289 0.2119 147.82);
+      --green-700: oklch(0.7914 0.2091 151.66);
+      --green-800: oklch(0.8704 0.149 154.62);
+      --green-900: oklch(0.9258 0.0845 155.86);
+      --green-1000: oklch(0.9624 0.0434 156.74);
+      --green-1100: oklch(0.9819 0.0181 155.83);
+      /* Amber colors */
+      --amber-100: oklch(0.3042 0.0853 45.16);
+      --amber-200: oklch(0.4149 0.1126 45.88);
+      --amber-300: oklch(0.4747 0.135757 44.9806);
+      --amber-400: oklch(0.557 0.158291 45.3594);
+      --amber-500: oklch(0.6671 0.1685 53.38);
+      --amber-600: oklch(0.7724 0.172798 65.367);
+      --amber-700: oklch(0.829 0.1712 81.04);
+      --amber-800: oklch(0.8781 0.1688 91.86);
+      --amber-900: oklch(0.9244 0.1203 95.85);
+      --amber-1000: oklch(0.9617 0.0592 95.89);
+      --amber-1100: oklch(0.9869 0.0214 95.28);
+      /* Red colors */
+      --red-100: oklch(0.2615 0.085 24.41);
+      --red-200: oklch(0.3967 0.1408 25.71);
+      --red-300: oklch(0.4446 0.1774 26.79);
+      --red-400: oklch(0.5095 0.208583 28.513);
+      --red-500: oklch(0.583 0.238666 28.4765);
+      --red-600: oklch(0.6378 0.2373 25.44);
+      --red-700: oklch(0.7022 0.1892 22.23);
+      --red-800: oklch(0.8053 0.1109 19.78);
+      --red-900: oklch(0.8834 0.0616 18.39);
+      --red-1000: oklch(0.9365 0.032 17.74);
+      --red-1100: oklch(0.9705 0.0129 17.38);
+      /* -------------------- Dark mode derived colors -------------------- */
+      /* Scrollbar colors */
+      --scrollbar-thumb: var(--alpha-white-200);
+      --scrollbar-thumb-surface-hover: var(--alpha-white-300);
+      --scrollbar-thumb-hover: var(--alpha-white-400);
+      --scrollbar-thumb-active: var(--alpha-white-500);
+      /* Background colors */
+      --bg-canvas: var(--neutral-black);
+      --bg-surface-1: var(--neutral-100);
+      --bg-surface-2: var(--neutral-200);
+      --bg-layer-1: var(--neutral-200);
+      --bg-layer-1-hover: var(--neutral-300);
+      --bg-layer-1-active: var(--neutral-400);
+      --bg-layer-1-selected: var(--neutral-400);
+      --bg-layer-2: var(--neutral-300);
+      --bg-layer-2-hover: var(--neutral-400);
+      --bg-layer-2-active: var(--neutral-500);
+      --bg-layer-2-selected: var(--neutral-500);
+      --bg-layer-3: var(--neutral-400);
+      --bg-layer-3-hover: var(--neutral-500);
+      --bg-layer-3-active: var(--neutral-600);
+      --bg-layer-3-selected: var(--neutral-600);
+      --bg-layer-transparent: var(--alpha-black-0);
+      --bg-layer-transparent-hover: var(--alpha-white-100);
+      --bg-layer-transparent-active: var(--alpha-white-200);
+      --bg-layer-transparent-selected: var(--alpha-white-300);
+      --bg-layer-disabled: var(--neutral-700);
+      --bg-accent-primary: var(--brand-default);
+      --bg-accent-primary-hover: var(--brand-500);
+      --bg-accent-primary-active: var(--brand-400);
+      --bg-accent-subtle: var(--brand-100);
+      --bg-accent-subtle-hover: var(--brand-200);
+      --bg-accent-subtle-active: var(--brand-300);
+      --bg-success-primary: var(--green-700);
+      --bg-success-subtle: var(--green-100);
+      --bg-success-subtle-1: var(--green-100);
+      --bg-warning-primary: var(--amber-600);
+      --bg-warning-subtle: var(--amber-100);
+      --bg-danger-primary: var(--red-300);
+      --bg-danger-primary-hover: var(--red-400);
+      --bg-danger-primary-active: var(--red-500);
+      --bg-danger-primary-selected: var(--red-500);
+      --bg-danger-subtle: var(--red-100);
+      --bg-danger-subtle-hover: var(--red-200);
+      --bg-danger-subtle-active: var(--red-300);
+      --bg-danger-subtle-selected: var(--red-300);
+      --bg-danger-transparent: var(--red-100);
+      --bg-danger-transparent-hover: var(--red-100);
+      --bg-danger-transparent-active: var(--red-100);
+      --bg-danger-transparent-selected: var(--red-100);
+      --bg-backdrop: var(--alpha-black-1000);
+      --bg-inverse: var(--alpha-white-1000);
+      /* Border colors */
+      --border-subtle: var(--neutral-400);
+      --border-subtle-1: var(--neutral-500);
+      --border-strong: var(--neutral-600);
+      --border-strong-1: var(--neutral-700);
+      --border-inverse: var(--neutral-100);
+      --border-disabled: var(--neutral-300);
+      --border-accent-strong: var(--brand-default);
+      --border-accent-subtle: var(--brand-300);
+      --border-success-strong: var(--green-400);
+      --border-success-subtle: var(--green-200);
+      --border-warning-strong: var(--amber-400);
+      --border-warning-subtle: var(--amber-200);
+      --border-danger-strong: var(--red-700);
+      --border-danger-subtle: var(--red-200);
+      /* Text colors */
+      --txt-primary: var(--neutral-1200);
+      --txt-secondary: var(--neutral-1100);
+      --txt-tertiary: var(--neutral-1000);
+      --txt-placeholder: var(--neutral-900);
+      --txt-disabled: var(--neutral-800);
+      --txt-accent-primary: var(--brand-default);
+      --txt-accent-secondary: var(--brand-700);
+      --txt-on-color: var(--neutral-1200);
+      --txt-on-color-disabled: var(--alpha-white-400);
+      --txt-inverse: var(--neutral-black);
+      --txt-success-primary: var(--green-900);
+      --txt-success-secondary: var(--green-700);
+      --txt-warning-primary: var(--amber-900);
+      --txt-warning-secondary: var(--amber-700);
+      --txt-danger-primary: var(--red-900);
+      --txt-danger-secondary: var(--red-700);
+      /* Icon colors */
+      --txt-icon-primary: var(--neutral-1200);
+      --txt-icon-accent-subtle: var(--brand-700);
+      --txt-icon-accent-primary: var(--brand-default);
+      --txt-icon-accent-primary-inverse: var(--brand-900);
+      --txt-icon-accent-secondary: var(--brand-1200);
+      --txt-icon-danger-primary: var(--red-900);
+      --txt-icon-danger-secondary: var(--red-700);
+      --txt-icon-success-primary: var(--green-900);
+      --txt-icon-success-secondary: var(--green-700);
+      --txt-icon-warning-primary: var(--amber-900);
+      --txt-icon-warning-secondary: var(--amber-700);
+      --txt-icon-secondary: var(--neutral-1100);
+      --txt-icon-tertiary: var(--neutral-1000);
+      --txt-icon-placeholder: var(--neutral-800);
+      --txt-icon-disabled: var(--neutral-700);
+      --txt-icon-danger: var(--red-700);
+      --txt-icon-on-color: var(--neutral-white);
+      --txt-icon-on-color-disabled: var(--alpha-white-400);
+      --txt-icon-inverse: var(--neutral-black);
+      /* Link colors */
+      --txt-link-primary: var(--brand-default);
+      --txt-link-primary-hover: var(--brand-700);
+      --txt-link-secondary: var(--neutral-1100);
+      /* Label colors */
+      --label-indigo-bg: var(--extended-color-indigo-900);
+      --label-indigo-bg-strong: var(--extended-color-indigo-500);
+      --label-indigo-hover: var(--extended-color-indigo-800);
+      --label-indigo-icon: var(--extended-color-indigo-400);
+      --label-indigo-text: var(--extended-color-indigo-400);
+      --label-indigo-border: var(--extended-color-indigo-400);
+      --label-indigo-focus: var(--extended-color-indigo-400);
+      --label-emerald-bg: var(--extended-color-emerald-950);
+      --label-emerald-bg-strong: var(--extended-color-emerald-600);
+      --label-emerald-hover: var(--extended-color-emerald-900);
+      --label-emerald-icon: var(--extended-color-emerald-400);
+      --label-emerald-text: var(--extended-color-emerald-400);
+      --label-emerald-border: var(--extended-color-emerald-400);
+      --label-emerald-focus: var(--extended-color-emerald-700);
+      --label-grey-bg: var(--extended-color-grey-900);
+      --label-grey-bg-strong: var(--extended-color-grey-500);
+      --label-grey-hover: var(--extended-color-grey-800);
+      --label-grey-icon: var(--extended-color-grey-400);
+      --label-grey-text: var(--extended-color-grey-400);
+      --label-grey-border: var(--extended-color-grey-400);
+      --label-grey-focus: var(--extended-color-grey-400);
+      --label-crimson-bg: var(--extended-color-crimson-950);
+      --label-crimson-bg-strong: var(--extended-color-crimson-500);
+      --label-crimson-hover: var(--extended-color-crimson-900);
+      --label-crimson-icon: var(--extended-color-crimson-400);
+      --label-crimson-text: var(--extended-color-crimson-400);
+      --label-crimson-border: var(--extended-color-crimson-400);
+      --label-crimson-focus: var(--extended-color-crimson-400);
+      --label-yellow-bg: var(--extended-color-yellow-950);
+      --label-yellow-bg-strong: var(--extended-color-yellow-500);
+      --label-yellow-hover: var(--extended-color-yellow-900);
+      --label-yellow-icon: var(--extended-color-yellow-500);
+      --label-yellow-text: var(--extended-color-yellow-500);
+      --label-yellow-border: var(--extended-color-yellow-500);
+      --label-yellow-focus: var(--extended-color-yellow-400);
+      --label-orange-bg: var(--extended-color-orange-950);
+      --label-orange-bg-strong: var(--extended-color-orange-400);
+      --label-orange-hover: var(--extended-color-orange-900);
+      --label-orange-icon: var(--extended-color-orange-300);
+      --label-orange-text: var(--extended-color-orange-300);
+      --label-orange-border: var(--extended-color-orange-300);
+      --label-orange-focus: var(--extended-color-orange-300);
+      --label-pink-bg: var(--extended-color-pink-900);
+      --label-pink-bg-strong: var(--extended-color-pink-500);
+      --label-pink-hover: var(--extended-color-pink-800);
+      --label-pink-icon: var(--extended-color-pink-400);
+      --label-pink-text: var(--extended-color-pink-400);
+      --label-pink-border: var(--extended-color-pink-400);
+      --label-pink-focus: var(--extended-color-pink-400);
+      --label-purple-bg: var(--extended-color-purple-900);
+      --label-purple-bg-strong: var(--extended-color-purple-400);
+      --label-purple-hover: var(--extended-color-purple-800);
+      --label-purple-icon: var(--extended-color-purple-400);
+      --label-purple-text: var(--extended-color-purple-400);
+      --label-purple-border: var(--extended-color-purple-400);
+      --label-purple-focus: var(--extended-color-purple-300);
+      /* Illustration colors */
+      --illustration-fill-primary: var(--neutral-400);
+      --illustration-fill-secondary: var(--neutral-500);
+      --illustration-fill-tertiary: var(--neutral-700);
+      --illustration-fill-quaternary: var(--neutral-700);
+      --illustration-stroke-primary: var(--neutral-700);
+      --illustration-stroke-secondary: var(--neutral-800);
+      --illustration-stroke-tertiary: var(--neutral-1000);
+      /* Neutral plan colors */
+      --txt-plans-neutral-primary: var(--neutral-1000);
+      --txt-plans-neutral-color: var(--neutral-100);
+      --bg-plans-neutral-subtle: var(--neutral-500);
+      --bg-plans-neutral-solid: var(--neutral-1100);
+      /* Brand plan colors */
+      --txt-plans-brand-primary: var(--brand-1000);
+      --txt-plans-brand-color: var(--brand-100);
+      --bg-plans-brand-subtle: var(--brand-200);
+      --bg-plans-brand-solid: var(--brand-1100);
+    }
+
+    /* -------------------- Dark high contrast mode color tokens -------------------- */
+    @variant dark-high-contrast {
+      /* Border colors */
+      --border-subtle: var(--neutral-1200);
+      --border-subtle-1: var(--neutral-1100);
+      --border-strong: var(--neutral-1000);
+      --border-strong-1: var(--neutral-900);
+      --border-inverse: var(--neutral-white);
+      --border-disabled: var(--neutral-700);
+      --border-accent-strong: var(--brand-default);
+      --border-accent-subtle: var(--brand-300);
+      --border-success-strong: var(--green-400);
+      --border-success-subtle: var(--green-200);
+      --border-warning-strong: var(--amber-400);
+      --border-warning-subtle: var(--amber-200);
+      --border-danger-strong: var(--red-400);
+      --border-danger-subtle: var(--red-200);
+    }
+
+    /* -------------------- Light high contrast mode color tokens -------------------- */
+
+    @variant light-high-contrast {
+      /* Border colors */
+      --border-subtle: var(--neutral-1200);
+      --border-subtle-1: var(--neutral-1100);
+      --border-strong: var(--neutral-1000);
+      --border-strong-1: var(--neutral-900);
+      --border-inverse: var(--neutral-black);
+      --border-disabled: var(--neutral-700);
+      --border-accent-strong: var(--brand-default);
+      --border-accent-subtle: var(--brand-300);
+      --border-success-strong: var(--green-700);
+      --border-success-subtle: var(--green-600);
+      --border-warning-strong: var(--amber-700);
+      --border-warning-subtle: var(--amber-400);
+      --border-danger-strong: var(--red-700);
+      --border-danger-subtle: var(--red-400);
+    }
+  }
+}
+
+/* -------------------- Theme tokens -------------------- */
+@theme {
+  --color-*: initial;
+  --color-white: oklch(1 0 0);
+  --color-black: oklch(0.1482 0.0034 196.79);
+  /* ---------- Border radius ---------- */
+  --radius-4xl: initial;
+  /* ---------- Border width ---------- */
+  --border-width-*: initial;
+  --border-width-sm: 1px;
+  --border-width-md: 1.5px;
+  --border-width-lg: 2px;
+  --border-width-xl: 2.5px;
+  --default-border-width: 1px;
+  /* ---------- Outline width ---------- */
+  --outline-width-*: initial;
+  /* ---------- Ring width ---------- */
+  --ring-width-*: initial;
+  /* ---------- Shadow ---------- */
+  --shadow-*: initial;
+  --shadow-raised-100: 0px 1px 6px -1px #292f3d08, 0px 1px 4px 0px #292f3d0a;
+  --shadow-raised-200: 0px 1px 2px -1px #292f3d0f, 0px 1px 3px 0px #292f3d0d;
+  --shadow-raised-300: 0px 2px 4px -1px #292f3d0a, 0px 4px 6px -1px #292f3d0d;
+  --shadow-overlay-100: 0px 10px 10px -5px #292f3d0a, 0px 10px 40px -5px #292f3d0a;
+  --shadow-overlay-200: 0px 10px 10px -10px #292f3d0a, 0px 30px 60px -12px #292f3d1a;
+  --shadow-direction-left: -10px 0px 30px -5px #292f3d05, -5px 0px 80px -5px #292f3d0a;
+  --shadow-direction-right: 10px 0px 30px -5px #0000000a, 5px 0px 80px -5px #0000000a;
+  /* --------- Height --------- */
+  --height-header: 3.25rem;
+  /* --------- Padding --------- */
+  --padding-page: 1.35rem;
+  --padding-page-x: 1.35rem;
+  --padding-page-y: 1.35rem;
+}
+
+/* -------------------- Semantic colors (Final colors to be used in components) -------------------- */
+@theme inline {
+  /* ---------- Outline width ---------- */
+  --outline-width-sm: var(--border-width-sm);
+  --outline-width-md: var(--border-width-md);
+  --outline-width-lg: var(--border-width-lg);
+  --outline-width-xl: var(--border-width-xl);
+  --default-outline-width: var(--default-border-width);
+  /* ---------- Ring width ---------- */
+  --ring-width-sm: var(--border-width-sm);
+  --ring-width-md: var(--border-width-md);
+  --ring-width-lg: var(--border-width-lg);
+  --ring-width-xl: var(--border-width-xl);
+  --default-ring-width: var(--default-border-width);
+  /* Scrollbar colors */
+  --background-color-scrollbar-thumb: var(--scrollbar-thumb);
+  --background-color-scrollbar-thumb-surface-hover: var(--scrollbar-thumb-surface-hover);
+  --background-color-scrollbar-thumb-hover: var(--scrollbar-thumb-hover);
+  --background-color-scrollbar-thumb-active: var(--scrollbar-thumb-active);
+  /* Background colors */
+  --background-color-canvas: var(--bg-canvas);
+  --background-color-surface-1: var(--bg-surface-1);
+  --background-color-surface-2: var(--bg-surface-2);
+  --background-color-layer-1: var(--bg-layer-1);
+  --background-color-layer-1-hover: var(--bg-layer-1-hover);
+  --background-color-layer-1-active: var(--bg-layer-1-active);
+  --background-color-layer-1-selected: var(--bg-layer-1-selected);
+  --background-color-layer-2: var(--bg-layer-2);
+  --background-color-layer-2-hover: var(--bg-layer-2-hover);
+  --background-color-layer-2-active: var(--bg-layer-2-active);
+  --background-color-layer-2-selected: var(--bg-layer-2-selected);
+  --background-color-layer-3: var(--bg-layer-3);
+  --background-color-layer-3-hover: var(--bg-layer-3-hover);
+  --background-color-layer-3-active: var(--bg-layer-3-active);
+  --background-color-layer-3-selected: var(--bg-layer-3-selected);
+  --background-color-layer-transparent: var(--bg-layer-transparent);
+  --background-color-layer-transparent-hover: var(--bg-layer-transparent-hover);
+  --background-color-layer-transparent-active: var(--bg-layer-transparent-active);
+  --background-color-layer-transparent-selected: var(--bg-layer-transparent-selected);
+  --background-color-layer-disabled: var(--bg-layer-disabled);
+  --background-color-accent-primary: var(--bg-accent-primary);
+  --background-color-accent-primary-hover: var(--bg-accent-primary-hover);
+  --background-color-accent-primary-active: var(--bg-accent-primary-active);
+  --background-color-accent-subtle: var(--bg-accent-subtle);
+  --background-color-accent-subtle-hover: var(--bg-accent-subtle-hover);
+  --background-color-accent-subtle-active: var(--bg-accent-subtle-active);
+  --background-color-success-primary: var(--bg-success-primary);
+  --background-color-success-subtle: var(--bg-success-subtle);
+  --background-color-success-subtle-1: var(--bg-success-subtle-1);
+  --background-color-warning-primary: var(--bg-warning-primary);
+  --background-color-warning-subtle: var(--bg-warning-subtle);
+  --background-color-danger-primary: var(--bg-danger-primary);
+  --background-color-danger-primary-hover: var(--bg-danger-primary-hover);
+  --background-color-danger-primary-active: var(--bg-danger-primary-active);
+  --background-color-danger-primary-selected: var(--bg-danger-primary-selected);
+  --background-color-danger-subtle: var(--bg-danger-subtle);
+  --background-color-danger-subtle-hover: var(--bg-danger-subtle-hover);
+  --background-color-danger-subtle-active: var(--bg-danger-subtle-active);
+  --background-color-danger-subtle-selected: var(--bg-danger-subtle-selected);
+  --background-color-danger-transparent: var(--bg-danger-transparent);
+  --background-color-danger-transparent-hover: var(--bg-danger-transparent-hover);
+  --background-color-danger-transparent-active: var(--bg-danger-transparent-active);
+  --background-color-danger-transparent-selected: var(--bg-danger-transparent-selected);
+  --background-color-backdrop: var(--bg-backdrop);
+  --background-color-inverse: var(--bg-inverse);
+  /* Border colors */
+  --border-color-subtle: var(--border-subtle);
+  --border-color-subtle-1: var(--border-subtle-1);
+  --border-color-strong: var(--border-strong);
+  --border-color-strong-1: var(--border-strong-1);
+  --border-color-inverse: var(--border-inverse);
+  --border-color-disabled: var(--border-disabled);
+  --border-color-accent-strong: var(--border-accent-strong);
+  --border-color-accent-subtle: var(--border-accent-subtle);
+  --border-color-success-strong: var(--border-success-strong);
+  --border-color-success-subtle: var(--border-success-subtle);
+  --border-color-warning-strong: var(--border-warning-strong);
+  --border-color-warning-subtle: var(--border-warning-subtle);
+  --border-color-danger-strong: var(--border-danger-strong);
+  --border-color-danger-subtle: var(--border-danger-subtle);
+  /* Outline colors */
+  --outline-color-subtle: var(--border-color-subtle);
+  --outline-color-subtle-1: var(--border-color-subtle-1);
+  --outline-color-strong: var(--border-color-strong);
+  --outline-color-strong-1: var(--border-color-strong-1);
+  --outline-color-inverse: var(--border-color-inverse);
+  --outline-color-disabled: var(--border-color-disabled);
+  --outline-color-accent-strong: var(--border-color-accent-strong);
+  --outline-color-accent-subtle: var(--border-color-accent-subtle);
+  --outline-color-success-strong: var(--border-color-success-strong);
+  --outline-color-success-subtle: var(--border-color-success-subtle);
+  --outline-color-warning-strong: var(--border-color-warning-strong);
+  --outline-color-warning-subtle: var(--border-color-warning-subtle);
+  --outline-color-danger-strong: var(--border-color-danger-strong);
+  --outline-color-danger-subtle: var(--border-color-danger-subtle);
+  /* Ring colors */
+  --ring-color-subtle: var(--border-color-subtle);
+  --ring-color-subtle-1: var(--border-color-subtle-1);
+  --ring-color-strong: var(--border-color-strong);
+  --ring-color-strong-1: var(--border-color-strong-1);
+  --ring-color-inverse: var(--border-color-inverse);
+  --ring-color-disabled: var(--border-color-disabled);
+  --ring-color-accent-strong: var(--border-color-accent-strong);
+  --ring-color-accent-subtle: var(--border-color-accent-subtle);
+  --ring-color-success-strong: var(--border-color-success-strong);
+  --ring-color-success-subtle: var(--border-color-success-subtle);
+  --ring-color-warning-strong: var(--border-color-warning-strong);
+  --ring-color-warning-subtle: var(--border-color-warning-subtle);
+  --ring-color-danger-strong: var(--border-color-danger-strong);
+  --ring-color-danger-subtle: var(--border-color-danger-subtle);
+  /* Text colors */
+  --text-color-primary: var(--txt-primary);
+  --text-color-secondary: var(--txt-secondary);
+  --text-color-tertiary: var(--txt-tertiary);
+  --text-color-placeholder: var(--txt-placeholder);
+  --text-color-disabled: var(--txt-disabled);
+  --text-color-accent-primary: var(--txt-accent-primary);
+  --text-color-accent-secondary: var(--txt-accent-secondary);
+  --text-color-on-color: var(--txt-on-color);
+  --text-color-on-color-disabled: var(--txt-on-color-disabled);
+  --text-color-inverse: var(--txt-inverse);
+  --text-color-success-primary: var(--txt-success-primary);
+  --text-color-success-secondary: var(--txt-success-secondary);
+  --text-color-warning-primary: var(--txt-warning-primary);
+  --text-color-warning-secondary: var(--txt-warning-secondary);
+  --text-color-danger-primary: var(--txt-danger-primary);
+  --text-color-danger-secondary: var(--txt-danger-secondary);
+  /* Stroke colors */
+  --stroke-primary: var(--text-color-primary);
+  --stroke-secondary: var(--text-color-secondary);
+  --stroke-tertiary: var(--text-color-tertiary);
+  --stroke-placeholder: var(--text-color-placeholder);
+  --stroke-disabled: var(--text-color-disabled);
+  --stroke-accent-primary: var(--text-color-accent-primary);
+  --stroke-accent-secondary: var(--text-color-accent-secondary);
+  --stroke-on-color: var(--text-color-on-color);
+  --stroke-on-color-disabled: var(--text-color-on-color-disabled);
+  --stroke-inverse: var(--text-color-inverse);
+  --stroke-success: var(--text-color-success);
+  --stroke-success-primary: var(--text-color-success-primary);
+  --stroke-success-secondary: var(--text-color-success-secondary);
+  --stroke-warning: var(--text-color-warning);
+  --stroke-warning-primary: var(--text-color-warning-primary);
+  --stroke-warning-secondary: var(--text-color-warning-secondary);
+  --stroke-danger: var(--text-color-danger);
+  --stroke-danger-primary: var(--text-color-danger-primary);
+  --stroke-danger-secondary: var(--text-color-danger-secondary);
+  /* Fill colors */
+  --fill-primary: var(--text-color-primary);
+  --fill-secondary: var(--text-color-secondary);
+  --fill-tertiary: var(--text-color-tertiary);
+  --fill-placeholder: var(--text-color-placeholder);
+  --fill-disabled: var(--text-color-disabled);
+  --fill-accent-primary: var(--text-color-accent-primary);
+  --fill-accent-secondary: var(--text-color-accent-secondary);
+  --fill-on-color: var(--text-color-on-color);
+  --fill-on-color-disabled: var(--text-color-on-color-disabled);
+  --fill-inverse: var(--text-color-inverse);
+  --fill-success: var(--text-color-success);
+  --fill-success-primary: var(--text-color-success-primary);
+  --fill-success-secondary: var(--text-color-success-secondary);
+  --fill-warning: var(--text-color-warning);
+  --fill-warning-primary: var(--text-color-warning-primary);
+  --fill-warning-secondary: var(--text-color-warning-secondary);
+  --fill-danger: var(--text-color-danger);
+  --fill-danger-primary: var(--text-color-danger-primary);
+  --fill-danger-secondary: var(--text-color-danger-secondary);
+  /* Icon colors */
+  --text-color-icon-primary: var(--txt-icon-primary);
+  --text-color-icon-accent-subtle: var(--txt-icon-accent-subtle);
+  --text-color-icon-accent-primary: var(--txt-icon-accent-primary);
+  --text-color-icon-danger-primary: var(--txt-icon-danger-primary);
+  --text-color-icon-danger-secondary: var(--txt-icon-danger-secondary);
+  --text-color-icon-success-primary: var(--txt-icon-success-primary);
+  --text-color-icon-success-secondary: var(--txt-icon-success-secondary);
+  --text-color-icon-warning-primary: var(--txt-icon-warning-primary);
+  --text-color-icon-warning-secondary: var(--txt-icon-warning-secondary);
+  --text-color-icon-accent-primary-inverse: var(--txt-icon-accent-primary-inverse);
+  --text-color-icon-accent-secondary: var(--txt-icon-accent-secondary);
+  --text-color-icon-secondary: var(--txt-icon-secondary);
+  --text-color-icon-tertiary: var(--txt-icon-tertiary);
+  --text-color-icon-placeholder: var(--txt-icon-placeholder);
+  --text-color-icon-disabled: var(--txt-icon-disabled);
+  --text-color-icon-danger: var(--txt-icon-danger);
+  --text-color-icon-on-color: var(--txt-icon-on-color);
+  --text-color-icon-on-color-disabled: var(--txt-icon-on-color-disabled);
+  --text-color-icon-inverse: var(--txt-icon-inverse);
+  /* Link colors */
+  --text-color-link-primary: var(--txt-link-primary);
+  --text-color-link-primary-hover: var(--txt-link-primary-hover);
+  --text-color-link-secondary: var(--txt-link-secondary);
+  /* Neutral plan colors */
+  --text-color-plans-neutral-primary: var(--txt-plans-neutral-primary);
+  --text-color-plans-neutral-color: var(--txt-plans-neutral-color);
+  --background-color-plans-neutral-subtle: var(--bg-plans-neutral-subtle);
+  --background-color-plans-neutral-solid: var(--bg-plans-neutral-solid);
+  /* Brand plan colors */
+  --text-color-plans-brand-primary: var(--txt-plans-brand-primary);
+  --text-color-plans-brand-color: var(--txt-plans-brand-color);
+  --background-color-plans-brand-subtle: var(--bg-plans-brand-subtle);
+  --background-color-plans-brand-solid: var(--bg-plans-brand-solid);
+  /* Label colors */
+  --color-label-indigo-bg: var(--label-indigo-bg);
+  --color-label-indigo-bg-strong: var(--label-indigo-bg-strong);
+  --color-label-indigo-hover: var(--label-indigo-hover);
+  --color-label-indigo-icon: var(--label-indigo-icon);
+  --color-label-indigo-text: var(--label-indigo-text);
+  --color-label-indigo-border: var(--label-indigo-border);
+  --color-label-indigo-focus: var(--label-indigo-focus);
+  --color-label-emerald-bg: var(--label-emerald-bg);
+  --color-label-emerald-bg-strong: var(--label-emerald-bg-strong);
+  --color-label-emerald-hover: var(--label-emerald-hover);
+  --color-label-emerald-icon: var(--label-emerald-icon);
+  --color-label-emerald-text: var(--label-emerald-text);
+  --color-label-emerald-border: var(--label-emerald-border);
+  --color-label-emerald-focus: var(--label-emerald-focus);
+  --color-label-grey-bg: var(--label-grey-bg);
+  --color-label-grey-bg-strong: var(--label-grey-bg-strong);
+  --color-label-grey-hover: var(--label-grey-hover);
+  --color-label-grey-icon: var(--label-grey-icon);
+  --color-label-grey-text: var(--label-grey-text);
+  --color-label-grey-border: var(--label-grey-border);
+  --color-label-grey-focus: var(--label-grey-focus);
+  --color-label-crimson-bg: var(--label-crimson-bg);
+  --color-label-crimson-bg-strong: var(--label-crimson-bg-strong);
+  --color-label-crimson-hover: var(--label-crimson-hover);
+  --color-label-crimson-icon: var(--label-crimson-icon);
+  --color-label-crimson-text: var(--label-crimson-text);
+  --color-label-crimson-border: var(--label-crimson-border);
+  --color-label-crimson-focus: var(--label-crimson-focus);
+  --color-label-yellow-bg: var(--label-yellow-bg);
+  --color-label-yellow-bg-strong: var(--label-yellow-bg-strong);
+  --color-label-yellow-hover: var(--label-yellow-hover);
+  --color-label-yellow-icon: var(--label-yellow-icon);
+  --color-label-yellow-text: var(--label-yellow-text);
+  --color-label-yellow-border: var(--label-yellow-border);
+  --color-label-yellow-focus: var(--label-yellow-focus);
+  /* ---------- Priority colors ---------- */
+  /* Text */
+  --text-color-priority-urgent: var(--priority-urgent);
+  --text-color-priority-high: var(--priority-high);
+  --text-color-priority-medium: var(--priority-medium);
+  --text-color-priority-low: var(--priority-low);
+  --text-color-priority-none: var(--priority-none);
+  /* Border */
+  --border-color-priority-urgent: var(--priority-urgent);
+  --border-color-priority-high: var(--priority-high);
+  --border-color-priority-medium: var(--priority-medium);
+  --border-color-priority-low: var(--priority-low);
+  --border-color-priority-none: var(--priority-none);
+}
+
+/* ---------- Typography tokens ---------- */
+@theme {
+  /* ---------- Font family ---------- */
+  --font-*: initial;
+  --font-heading:
+    "Inter Variable", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
+    "Noto Color Emoji";
+  --font-body:
+    "Inter Variable", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
+    "Noto Color Emoji";
+  --font-code:
+    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+
+  /* ---------- Font weight ---------- */
+  --font-weight-*: initial;
+  --font-weight-light: 300;
+  --font-weight-regular: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+  --font-weight-heavy: 800;
+
+  /* ---------- Font size ---------- */
+  --text-*: initial;
+  --text-9: 0.5625rem;
+  --text-10: 0.625rem;
+  --text-11: 0.6875rem;
+  --text-12: 0.75rem;
+  --text-13: 0.8125rem;
+  --text-14: 0.875rem;
+  --text-16: 1rem;
+  --text-18: 1.125rem;
+  --text-20: 1.25rem;
+  --text-24: 1.5rem;
+  --text-28: 1.75rem;
+  --text-32: 2rem;
+  --text-40: 2.5rem;
+
+  /* ---------- Letter spacing ---------- */
+  --tracking-*: initial;
+  --tracking-extra-tight: -0.025rem;
+  --tracking-tight: -0.05rem;
+  --tracking-default: 0;
+  --tracking-wide: 0.05rem;
+
+  /* ---------- Heading text tokens ---------- */
+  --text-h1-regular: var(--text-32);
+  --text-h1-regular--line-height: 1.2;
+  --text-h1-regular--letter-spacing: var(--tracking-default);
+  --text-h1-regular--font-weight: var(--font-weight-regular);
+
+  --text-h1-medium: var(--text-32);
+  --text-h1-medium--line-height: 1.2;
+  --text-h1-medium--letter-spacing: var(--tracking-default);
+  --text-h1-medium--font-weight: var(--font-weight-medium);
+
+  --text-h1-semibold: var(--text-32);
+  --text-h1-semibold--line-height: 1.2;
+  --text-h1-semibold--letter-spacing: var(--tracking-default);
+  --text-h1-semibold--font-weight: var(--font-weight-semibold);
+
+  --text-h1-bold: var(--text-32);
+  --text-h1-bold--line-height: 1.2;
+  --text-h1-bold--letter-spacing: var(--tracking-default);
+  --text-h1-bold--font-weight: var(--font-weight-bold);
+
+  --text-h2-regular: var(--text-28);
+  --text-h2-regular--line-height: 1.2;
+  --text-h2-regular--letter-spacing: var(--tracking-default);
+  --text-h2-regular--font-weight: var(--font-weight-regular);
+
+  --text-h2-medium: var(--text-28);
+  --text-h2-medium--line-height: 1.2;
+  --text-h2-medium--letter-spacing: var(--tracking-default);
+  --text-h2-medium--font-weight: var(--font-weight-medium);
+
+  --text-h2-semibold: var(--text-28);
+  --text-h2-semibold--line-height: 1.2;
+  --text-h2-semibold--letter-spacing: var(--tracking-default);
+  --text-h2-semibold--font-weight: var(--font-weight-semibold);
+
+  --text-h2-bold: var(--text-28);
+  --text-h2-bold--line-height: 1.2;
+  --text-h2-bold--letter-spacing: var(--tracking-default);
+  --text-h2-bold--font-weight: var(--font-weight-bold);
+
+  --text-h3-regular: var(--text-24);
+  --text-h3-regular--line-height: 1.2;
+  --text-h3-regular--letter-spacing: var(--tracking-default);
+  --text-h3-regular--font-weight: var(--font-weight-regular);
+
+  --text-h3-medium: var(--text-24);
+  --text-h3-medium--line-height: 1.2;
+  --text-h3-medium--letter-spacing: var(--tracking-default);
+  --text-h3-medium--font-weight: var(--font-weight-medium);
+
+  --text-h3-semibold: var(--text-24);
+  --text-h3-semibold--line-height: 1.2;
+  --text-h3-semibold--letter-spacing: var(--tracking-default);
+  --text-h3-semibold--font-weight: var(--font-weight-semibold);
+
+  --text-h3-bold: var(--text-24);
+  --text-h3-bold--line-height: 1.2;
+  --text-h3-bold--letter-spacing: var(--tracking-default);
+  --text-h3-bold--font-weight: var(--font-weight-bold);
+
+  --text-h4-regular: var(--text-20);
+  --text-h4-regular--line-height: 1.2;
+  --text-h4-regular--letter-spacing: var(--tracking-default);
+  --text-h4-regular--font-weight: var(--font-weight-regular);
+
+  --text-h4-medium: var(--text-20);
+  --text-h4-medium--line-height: 1.2;
+  --text-h4-medium--letter-spacing: var(--tracking-default);
+  --text-h4-medium--font-weight: var(--font-weight-medium);
+
+  --text-h4-semibold: var(--text-20);
+  --text-h4-semibold--line-height: 1.2;
+  --text-h4-semibold--letter-spacing: var(--tracking-default);
+  --text-h4-semibold--font-weight: var(--font-weight-semibold);
+
+  --text-h4-bold: var(--text-20);
+  --text-h4-bold--line-height: 1.2;
+  --text-h4-bold--letter-spacing: var(--tracking-default);
+  --text-h4-bold--font-weight: var(--font-weight-bold);
+
+  --text-h5-regular: var(--text-18);
+  --text-h5-regular--line-height: 1.2;
+  --text-h5-regular--letter-spacing: var(--tracking-default);
+  --text-h5-regular--font-weight: var(--font-weight-regular);
+
+  --text-h5-medium: var(--text-18);
+  --text-h5-medium--line-height: 1.2;
+  --text-h5-medium--letter-spacing: var(--tracking-default);
+  --text-h5-medium--font-weight: var(--font-weight-medium);
+
+  --text-h5-semibold: var(--text-18);
+  --text-h5-semibold--line-height: 1.2;
+  --text-h5-semibold--letter-spacing: var(--tracking-default);
+  --text-h5-semibold--font-weight: var(--font-weight-semibold);
+
+  --text-h5-bold: var(--text-18);
+  --text-h5-bold--line-height: 1.2;
+  --text-h5-bold--letter-spacing: var(--tracking-default);
+  --text-h5-bold--font-weight: var(--font-weight-bold);
+
+  --text-h6-regular: var(--text-16);
+  --text-h6-regular--line-height: 1.2;
+  --text-h6-regular--letter-spacing: var(--tracking-default);
+  --text-h6-regular--font-weight: var(--font-weight-regular);
+
+  --text-h6-medium: var(--text-16);
+  --text-h6-medium--line-height: 1.2;
+  --text-h6-medium--letter-spacing: var(--tracking-default);
+  --text-h6-medium--font-weight: var(--font-weight-medium);
+
+  --text-h6-semibold: var(--text-16);
+  --text-h6-semibold--line-height: 1.2;
+  --text-h6-semibold--letter-spacing: var(--tracking-default);
+  --text-h6-semibold--font-weight: var(--font-weight-semibold);
+
+  --text-h6-bold: var(--text-16);
+  --text-h6-bold--line-height: 1.2;
+  --text-h6-bold--letter-spacing: var(--tracking-default);
+  --text-h6-bold--font-weight: var(--font-weight-bold);
+
+  /* ---------- Body text tokens ---------- */
+  --text-body-md-regular: var(--text-16);
+  --text-body-md-regular--line-height: 1.4;
+  --text-body-md-regular--letter-spacing: calc(0.01 * var(--text-16));
+  --text-body-md-regular--font-weight: var(--font-weight-regular);
+
+  --text-body-md-medium: var(--text-16);
+  --text-body-md-medium--line-height: 1.4;
+  --text-body-md-medium--letter-spacing: calc(0.01 * var(--text-16));
+  --text-body-md-medium--font-weight: var(--font-weight-medium);
+
+  --text-body-md-semibold: var(--text-16);
+  --text-body-md-semibold--line-height: 1.4;
+  --text-body-md-semibold--letter-spacing: calc(0.01 * var(--text-16));
+  --text-body-md-semibold--font-weight: var(--font-weight-semibold);
+
+  --text-body-md-bold: var(--text-16);
+  --text-body-md-bold--line-height: 1.4;
+  --text-body-md-bold--letter-spacing: calc(0.01 * var(--text-16));
+  --text-body-md-bold--font-weight: var(--font-weight-bold);
+
+  --text-body-sm-regular: var(--text-14);
+  --text-body-sm-regular--line-height: 1.4;
+  --text-body-sm-regular--letter-spacing: calc(0.01 * var(--text-14));
+  --text-body-sm-regular--font-weight: var(--font-weight-regular);
+
+  --text-body-sm-medium: var(--text-14);
+  --text-body-sm-medium--line-height: 1.4;
+  --text-body-sm-medium--letter-spacing: calc(0.01 * var(--text-14));
+  --text-body-sm-medium--font-weight: var(--font-weight-medium);
+
+  --text-body-sm-semibold: var(--text-14);
+  --text-body-sm-semibold--line-height: 1.4;
+  --text-body-sm-semibold--letter-spacing: calc(0.01 * var(--text-14));
+  --text-body-sm-semibold--font-weight: var(--font-weight-semibold);
+
+  --text-body-sm-bold: var(--text-14);
+  --text-body-sm-bold--line-height: 1.4;
+  --text-body-sm-bold--letter-spacing: calc(0.01 * var(--text-14));
+  --text-body-sm-bold--font-weight: var(--font-weight-bold);
+
+  --text-body-xs-regular: var(--text-13);
+  --text-body-xs-regular--line-height: 1.4;
+  --text-body-xs-regular--letter-spacing: calc(0.01 * var(--text-13));
+  --text-body-xs-regular--font-weight: var(--font-weight-regular);
+
+  --text-body-xs-medium: var(--text-13);
+  --text-body-xs-medium--line-height: 1.4;
+  --text-body-xs-medium--letter-spacing: calc(0.01 * var(--text-13));
+  --text-body-xs-medium--font-weight: var(--font-weight-medium);
+
+  --text-body-xs-semibold: var(--text-13);
+  --text-body-xs-semibold--line-height: 1.4;
+  --text-body-xs-semibold--letter-spacing: calc(0.01 * var(--text-13));
+  --text-body-xs-semibold--font-weight: var(--font-weight-semibold);
+
+  --text-body-xs-bold: var(--text-13);
+  --text-body-xs-bold--line-height: 1.4;
+  --text-body-xs-bold--letter-spacing: calc(0.01 * var(--text-13));
+  --text-body-xs-bold--font-weight: var(--font-weight-bold);
+
+  --text-caption-md-regular: var(--text-12);
+  --text-caption-md-regular--line-height: 1.1;
+  --text-caption-md-regular--letter-spacing: var(--tracking-default);
+  --text-caption-md-regular--font-weight: var(--font-weight-regular);
+
+  --text-caption-md-medium: var(--text-12);
+  --text-caption-md-medium--line-height: 1.1;
+  --text-caption-md-medium--letter-spacing: var(--tracking-default);
+  --text-caption-md-medium--font-weight: var(--font-weight-medium);
+
+  --text-caption-md-semibold: var(--text-12);
+  --text-caption-md-semibold--line-height: 1.1;
+  --text-caption-md-semibold--letter-spacing: var(--tracking-default);
+  --text-caption-md-semibold--font-weight: var(--font-weight-semibold);
+
+  --text-caption-md-bold: var(--text-12);
+  --text-caption-md-bold--line-height: 1.1;
+  --text-caption-md-bold--letter-spacing: var(--tracking-default);
+  --text-caption-md-bold--font-weight: var(--font-weight-bold);
+
+  --text-caption-sm-regular: var(--text-11);
+  --text-caption-sm-regular--line-height: 1.1;
+  --text-caption-sm-regular--letter-spacing: var(--tracking-default);
+  --text-caption-sm-regular--font-weight: var(--font-weight-regular);
+
+  --text-caption-sm-medium: var(--text-11);
+  --text-caption-sm-medium--line-height: 1.1;
+  --text-caption-sm-medium--letter-spacing: var(--tracking-default);
+  --text-caption-sm-medium--font-weight: var(--font-weight-medium);
+
+  --text-caption-sm-semibold: var(--text-11);
+  --text-caption-sm-semibold--line-height: 1.1;
+  --text-caption-sm-semibold--letter-spacing: var(--tracking-default);
+  --text-caption-sm-semibold--font-weight: var(--font-weight-semibold);
+
+  --text-caption-sm-bold: var(--text-11);
+  --text-caption-sm-bold--line-height: 1.1;
+  --text-caption-sm-bold--letter-spacing: var(--tracking-default);
+  --text-caption-sm-bold--font-weight: var(--font-weight-bold);
+
+  --text-caption-xs-regular: var(--text-10);
+  --text-caption-xs-regular--line-height: 1;
+  --text-caption-xs-regular--letter-spacing: calc(0.01 * var(--text-10));
+  --text-caption-xs-regular--font-weight: var(--font-weight-regular);
+
+  --text-caption-xs-medium: var(--text-10);
+  --text-caption-xs-medium--line-height: 1;
+  --text-caption-xs-medium--letter-spacing: calc(0.01 * var(--text-10));
+  --text-caption-xs-medium--font-weight: var(--font-weight-medium);
+
+  --text-caption-xs-semibold: var(--text-10);
+  --text-caption-xs-semibold--line-height: 1;
+  --text-caption-xs-semibold--letter-spacing: calc(0.01 * var(--text-10));
+  --text-caption-xs-semibold--font-weight: var(--font-weight-semibold);
+
+  --text-caption-xs-bold: var(--text-10);
+  --text-caption-xs-bold--line-height: 1;
+  --text-caption-xs-bold--letter-spacing: calc(0.01 * var(--text-10));
+  --text-caption-xs-bold--font-weight: var(--font-weight-bold);
+}
+
+/* -------------------- Utility classes -------------------- */
+@utility scrollbar-hide {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+@utility material-symbols-rounded {
+  font-family: "Material Symbols Rounded";
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  font-feature-settings: "liga";
+  -webkit-font-smoothing: antialiased;
+}
+
+/* Tailwind typography plugin overwrites */
+@utility prose {
+  --tw-prose-body: var(--text-color-primary);
+  --tw-prose-p: var(--text-color-primary);
+  --tw-prose-headings: var(--text-color-primary);
+  --tw-prose-lead: var(--text-color-primary);
+  --tw-prose-links: var(--text-color-link-primary);
+  --tw-prose-bold: "inherit";
+  --tw-prose-counters: var(--text-color-primary);
+  --tw-prose-bullets: var(--text-color-primary);
+  --tw-prose-hr: var(--text-color-primary);
+  --tw-prose-quotes: var(--text-color-primary);
+  --tw-prose-quote-borders: var(--border-color-subtle);
+  --tw-prose-code: var(--text-color-primary);
+  --tw-prose-pre-code: var(--text-color-primary);
+  --tw-prose-pre-bg: var(--background-color-layer-1);
+  --tw-prose-th-borders: var(--border-color-subtle);
+  --tw-prose-td-borders: var(--border-color-subtle);
+}
diff --git a/packages/types/package.json b/packages/types/package.json
index fe4a0954b..4ce05a2c7 100644
--- a/packages/types/package.json
+++ b/packages/types/package.json
@@ -1,27 +1,26 @@
 {
   "name": "@plane/types",
-  "version": "1.2.3",
-  "license": "AGPL-3.0",
+  "version": "1.3.0",
   "private": true,
+  "license": "AGPL-3.0",
   "type": "module",
+  "main": "./dist/index.mjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.mts",
   "exports": {
     ".": "./dist/index.mjs",
     "./package.json": "./package.json"
   },
   "scripts": {
-    "dev": "tsdown --watch",
+    "dev": "tsdown --watch --no-clean",
     "build": "tsdown",
-    "check:lint": "eslint . --max-warnings=151",
+    "check:lint": "oxlint --max-warnings=1 .",
     "check:types": "tsc --noEmit",
-    "check:format": "prettier --check .",
-    "fix:lint": "eslint . --fix --max-warnings=151",
-    "fix:format": "prettier --write .",
+    "check:format": "oxfmt --check .",
+    "fix:lint": "oxlint --fix .",
+    "fix:format": "oxfmt .",
     "clean": "rm -rf .turbo && rm -rf .next && rm -rf node_modules && rm -rf dist"
   },
-  "peerDependencies": {
-    "react": "catalog:",
-    "react-dom": "catalog:"
-  },
   "devDependencies": {
     "@plane/typescript-config": "workspace:*",
     "@types/node": "catalog:",
@@ -30,7 +29,8 @@
     "tsdown": "catalog:",
     "typescript": "catalog:"
   },
-  "main": "./dist/index.mjs",
-  "module": "./dist/index.mjs",
-  "types": "./dist/index.d.mts"
+  "peerDependencies": {
+    "react": "catalog:",
+    "react-dom": "catalog:"
+  }
 }
diff --git a/packages/types/src/activity.ts b/packages/types/src/activity.ts
index 957a2028d..1ab90f437 100644
--- a/packages/types/src/activity.ts
+++ b/packages/types/src/activity.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export type TBaseActivity<TFieldKey extends string = string, TVerbKey extends string = string> = {
   id: string;
   field: TFieldKey | undefined;
diff --git a/packages/types/src/ai.ts b/packages/types/src/ai.ts
index cbc7fabe4..da7d61046 100644
--- a/packages/types/src/ai.ts
+++ b/packages/types/src/ai.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { IProjectLite } from "./project";
 import type { IWorkspaceLite } from "./workspace";
 
diff --git a/packages/types/src/analytics.ts b/packages/types/src/analytics.ts
index 119a4aed0..a636820c8 100644
--- a/packages/types/src/analytics.ts
+++ b/packages/types/src/analytics.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { TChartData } from "./charts";
 
 export enum ChartXAxisProperty {
diff --git a/packages/types/src/api_token.ts b/packages/types/src/api_token.ts
index ca1f7a339..9abdf2805 100644
--- a/packages/types/src/api_token.ts
+++ b/packages/types/src/api_token.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export interface IApiToken {
   created_at: string;
   created_by: string;
diff --git a/packages/types/src/auth.ts b/packages/types/src/auth.ts
index 65000c503..d41f651aa 100644
--- a/packages/types/src/auth.ts
+++ b/packages/types/src/auth.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export type TEmailCheckTypes = "magic_code" | "password";
 
 export interface IEmailCheckData {
diff --git a/packages/types/src/base-layouts/base.ts b/packages/types/src/base-layouts/base.ts
index 0e0cd8a9a..ce9ea5953 100644
--- a/packages/types/src/base-layouts/base.ts
+++ b/packages/types/src/base-layouts/base.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { ReactNode } from "react";
 
 // Base Types
diff --git a/packages/types/src/base-layouts/gantt/core.ts b/packages/types/src/base-layouts/gantt/core.ts
index 5f27cb049..f83440338 100644
--- a/packages/types/src/base-layouts/gantt/core.ts
+++ b/packages/types/src/base-layouts/gantt/core.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export const CORE_GANTT_TIMELINE_TYPE = {
   ISSUE: "ISSUE",
   MODULE: "MODULE",
diff --git a/packages/types/src/base-layouts/gantt/extended.ts b/packages/types/src/base-layouts/gantt/extended.ts
index daf690403..360e0dbd4 100644
--- a/packages/types/src/base-layouts/gantt/extended.ts
+++ b/packages/types/src/base-layouts/gantt/extended.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export const EXTENDED_GANTT_TIMELINE_TYPE = {} as const;
diff --git a/packages/types/src/base-layouts/gantt/index.ts b/packages/types/src/base-layouts/gantt/index.ts
index 147cd06d6..d96c0a031 100644
--- a/packages/types/src/base-layouts/gantt/index.ts
+++ b/packages/types/src/base-layouts/gantt/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { ReactNode } from "react";
 import type { IBaseLayoutsBaseItem, IBaseLayoutsBaseProps } from "../base";
 import { CORE_GANTT_TIMELINE_TYPE } from "./core";
diff --git a/packages/types/src/base-layouts/index.ts b/packages/types/src/base-layouts/index.ts
index 2fcb0abe7..649bda3d1 100644
--- a/packages/types/src/base-layouts/index.ts
+++ b/packages/types/src/base-layouts/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./base";
 export * from "./list";
 export * from "./kanban";
diff --git a/packages/types/src/base-layouts/kanban.ts b/packages/types/src/base-layouts/kanban.ts
index 318c36419..eadc1af17 100644
--- a/packages/types/src/base-layouts/kanban.ts
+++ b/packages/types/src/base-layouts/kanban.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type {
   IBaseLayoutsBaseItem,
   IBaseLayoutsBaseProps,
diff --git a/packages/types/src/base-layouts/list.ts b/packages/types/src/base-layouts/list.ts
index e0ac28275..ae35dd5eb 100644
--- a/packages/types/src/base-layouts/list.ts
+++ b/packages/types/src/base-layouts/list.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type {
   IBaseLayoutsBaseItem,
   IBaseLayoutsBaseProps,
diff --git a/packages/types/src/calendar.ts b/packages/types/src/calendar.ts
index 348d93b1f..300d90b78 100644
--- a/packages/types/src/calendar.ts
+++ b/packages/types/src/calendar.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export interface ICalendarRange {
   startDate: Date;
   endDate: Date;
diff --git a/packages/types/src/charts/common.ts b/packages/types/src/charts/common.ts
index 082702138..95198aa46 100644
--- a/packages/types/src/charts/common.ts
+++ b/packages/types/src/charts/common.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export type TChartColorScheme = "modern" | "horizon" | "earthen";
 
 export type TChartDatum = {
diff --git a/packages/types/src/charts/index.ts b/packages/types/src/charts/index.ts
index 8ee4739b2..948649ecf 100644
--- a/packages/types/src/charts/index.ts
+++ b/packages/types/src/charts/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // ============================================================
 // Chart Base
 // ============================================================
diff --git a/packages/types/src/command-palette.ts b/packages/types/src/command-palette.ts
index c773c2d36..2e5cfa3da 100644
--- a/packages/types/src/command-palette.ts
+++ b/packages/types/src/command-palette.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export type TCommandPaletteActionList = Record<string, { title: string; description: string; action: () => void }>;
 
 export type TCommandPaletteShortcutList = {
diff --git a/packages/types/src/common.ts b/packages/types/src/common.ts
index b35e408d6..ac3444334 100644
--- a/packages/types/src/common.ts
+++ b/packages/types/src/common.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export type TPaginationInfo = {
   count: number;
   extra_stats: string | null;
diff --git a/packages/types/src/current-user/index.ts b/packages/types/src/current-user/index.ts
index aeb49bbab..cdec1f38a 100644
--- a/packages/types/src/current-user/index.ts
+++ b/packages/types/src/current-user/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./profile";
diff --git a/packages/types/src/current-user/profile.ts b/packages/types/src/current-user/profile.ts
index 64a25a93c..677f8f7c9 100644
--- a/packages/types/src/current-user/profile.ts
+++ b/packages/types/src/current-user/profile.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export type TUserProfile = {
   id: string | undefined;
 
diff --git a/packages/types/src/cycle/cycle.ts b/packages/types/src/cycle/cycle.ts
index 4bb66ff9b..b6ec359c0 100644
--- a/packages/types/src/cycle/cycle.ts
+++ b/packages/types/src/cycle/cycle.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { TIssue } from "../issues/issue";
 import type { IIssueFilterOptions } from "../view-props";
 
diff --git a/packages/types/src/cycle/cycle_filters.ts b/packages/types/src/cycle/cycle_filters.ts
index 38f8a7549..1ebb66c38 100644
--- a/packages/types/src/cycle/cycle_filters.ts
+++ b/packages/types/src/cycle/cycle_filters.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export type TCycleTabOptions = "active" | "all";
 
 export type TCycleLayoutOptions = "list" | "board" | "gantt";
diff --git a/packages/types/src/cycle/index.ts b/packages/types/src/cycle/index.ts
index d5f4ce5b0..7856a0f3e 100644
--- a/packages/types/src/cycle/index.ts
+++ b/packages/types/src/cycle/index.ts
@@ -1,2 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./cycle_filters";
 export * from "./cycle";
diff --git a/packages/types/src/dashboard.ts b/packages/types/src/dashboard.ts
index 135325841..0159079ce 100644
--- a/packages/types/src/dashboard.ts
+++ b/packages/types/src/dashboard.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { EDurationFilters } from "./enums";
 import type { IIssueActivity, TIssuePriorities } from "./issues";
 import type { TIssue } from "./issues/issue";
diff --git a/packages/types/src/de-dupe.ts b/packages/types/src/de-dupe.ts
index b36a78046..8832dbdbc 100644
--- a/packages/types/src/de-dupe.ts
+++ b/packages/types/src/de-dupe.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { TIssuePriorities } from "./issues";
 
 export type TDuplicateIssuePayload = {
diff --git a/packages/types/src/description_version.ts b/packages/types/src/description_version.ts
index 8b9816b01..fe4fc3d74 100644
--- a/packages/types/src/description_version.ts
+++ b/packages/types/src/description_version.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export type TDescriptionVersion = {
   created_at: string;
   created_by: string | null;
diff --git a/packages/types/src/editor/editor-content.ts b/packages/types/src/editor/editor-content.ts
index bb720c2e9..696fe2025 100644
--- a/packages/types/src/editor/editor-content.ts
+++ b/packages/types/src/editor/editor-content.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 /**
  * Editor content types - locally defined to avoid external dependencies
  */
diff --git a/packages/types/src/editor/index.ts b/packages/types/src/editor/index.ts
index 841ec3255..08e77d0f0 100644
--- a/packages/types/src/editor/index.ts
+++ b/packages/types/src/editor/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export type { JSONContent, HTMLContent, Content } from "./editor-content";
diff --git a/packages/types/src/enums.ts b/packages/types/src/enums.ts
index 7776e9f24..d842a8284 100644
--- a/packages/types/src/enums.ts
+++ b/packages/types/src/enums.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export enum EUserPermissions {
   ADMIN = 20,
   MEMBER = 15,
diff --git a/packages/types/src/epics.ts b/packages/types/src/epics.ts
index 1ba50e2f2..e755172d8 100644
--- a/packages/types/src/epics.ts
+++ b/packages/types/src/epics.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export type TEpicAnalyticsGroup =
   | "backlog_issues"
   | "unstarted_issues"
diff --git a/packages/types/src/estimate.ts b/packages/types/src/estimate.ts
index 969f76a92..2e4d416b9 100644
--- a/packages/types/src/estimate.ts
+++ b/packages/types/src/estimate.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { EEstimateSystem, EEstimateUpdateStages } from "./enums";
 
 export interface IEstimatePoint {
diff --git a/packages/types/src/favorite/favorite.ts b/packages/types/src/favorite/favorite.ts
index 6191c579f..32aa4a77f 100644
--- a/packages/types/src/favorite/favorite.ts
+++ b/packages/types/src/favorite/favorite.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { TLogoProps } from "../common";
 
 export type IFavorite = {
diff --git a/packages/types/src/favorite/index.ts b/packages/types/src/favorite/index.ts
index e11ce8f3c..033cc17ea 100644
--- a/packages/types/src/favorite/index.ts
+++ b/packages/types/src/favorite/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./favorite";
diff --git a/packages/types/src/file.ts b/packages/types/src/file.ts
index 2a6055956..01a189259 100644
--- a/packages/types/src/file.ts
+++ b/packages/types/src/file.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { EFileAssetType } from "./enums";
 
 export type TFileMetaDataLite = {
diff --git a/packages/types/src/home.ts b/packages/types/src/home.ts
index 107daeb21..16c8defd0 100644
--- a/packages/types/src/home.ts
+++ b/packages/types/src/home.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { TLogoProps } from "./common";
 import type { TIssuePriorities } from "./issues";
 
diff --git a/packages/types/src/importer/github-importer.ts b/packages/types/src/importer/github-importer.ts
index 36220b626..193c86a38 100644
--- a/packages/types/src/importer/github-importer.ts
+++ b/packages/types/src/importer/github-importer.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export interface IGithubServiceImportFormData {
   metadata: {
     owner: string;
diff --git a/packages/types/src/importer/index.ts b/packages/types/src/importer/index.ts
index 99a262d47..ec42f91d2 100644
--- a/packages/types/src/importer/index.ts
+++ b/packages/types/src/importer/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./github-importer";
 export * from "./jira-importer";
 
diff --git a/packages/types/src/importer/jira-importer.ts b/packages/types/src/importer/jira-importer.ts
index e9f4218fa..83080ea08 100644
--- a/packages/types/src/importer/jira-importer.ts
+++ b/packages/types/src/importer/jira-importer.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export interface IJiraImporterForm {
   metadata: IJiraMetadata;
   config: IJiraConfig;
diff --git a/packages/types/src/inbox.ts b/packages/types/src/inbox.ts
index daf936da3..0cbdf0330 100644
--- a/packages/types/src/inbox.ts
+++ b/packages/types/src/inbox.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // plane types
 import type { TPaginationInfo } from "./common";
 import type { TIssuePriorities } from "./issues";
diff --git a/packages/types/src/index.ts b/packages/types/src/index.ts
index c0656450d..899b5d511 100644
--- a/packages/types/src/index.ts
+++ b/packages/types/src/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./activity";
 export * from "./ai";
 export * from "./analytics";
@@ -24,6 +30,7 @@ export * from "./instance";
 export * from "./integration";
 export * from "./issues";
 export * from "./issues/base"; // TODO: Remove this after development and the refactor/mobx-store-issue branch is stable
+export * from "./issues/issue-identifier";
 export * from "./layout";
 export * from "./module";
 export * from "./page";
@@ -35,6 +42,7 @@ export * from "./reaction";
 export * from "./intake";
 export * from "./rich-filters";
 export * from "./search";
+export * from "./settings";
 export * from "./state";
 export * from "./stickies";
 export * from "./timezone";
@@ -49,3 +57,4 @@ export * from "./workspace-draft-issues/base";
 export * from "./workspace-notifications";
 export * from "./workspace-views";
 export * from "./base-layouts";
+export * from "./pagination";
diff --git a/packages/types/src/instance/ai.ts b/packages/types/src/instance/ai.ts
index 5bfd1a6ba..64c745b82 100644
--- a/packages/types/src/instance/ai.ts
+++ b/packages/types/src/instance/ai.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export type TInstanceAIConfigurationKeys = "LLM_API_KEY" | "LLM_MODEL";
diff --git a/packages/types/src/instance/auth-ee.ts b/packages/types/src/instance/auth-ee.ts
index 5bead56aa..6ea191aca 100644
--- a/packages/types/src/instance/auth-ee.ts
+++ b/packages/types/src/instance/auth-ee.ts
@@ -1 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export type TExtendedLoginMediums = never;
+
+export type TExtendedInstanceAuthenticationModeKeys = never;
diff --git a/packages/types/src/instance/auth.ts b/packages/types/src/instance/auth.ts
index 5024849e9..f3566b291 100644
--- a/packages/types/src/instance/auth.ts
+++ b/packages/types/src/instance/auth.ts
@@ -1,9 +1,26 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export type TCoreInstanceAuthenticationModeKeys =
+  | "unique-codes"
+  | "passwords-login"
+  | "google"
+  | "github"
+  | "gitlab"
+  | "gitea";
+
+export type TInstanceAuthenticationModeKeys = TCoreInstanceAuthenticationModeKeys;
+
 export type TInstanceAuthenticationModes = {
-  key: string;
+  key: TInstanceAuthenticationModeKeys;
   name: string;
   description: string;
   icon: React.ReactNode;
   config: React.ReactNode;
+  enabledConfigKey: TInstanceAuthenticationMethodKeys;
   unavailable?: boolean;
 };
 
@@ -16,19 +33,28 @@ export type TInstanceAuthenticationMethodKeys =
   | "IS_GITLAB_ENABLED"
   | "IS_GITEA_ENABLED";
 
-export type TInstanceGoogleAuthenticationConfigurationKeys = "GOOGLE_CLIENT_ID" | "GOOGLE_CLIENT_SECRET";
+export type TInstanceGoogleAuthenticationConfigurationKeys =
+  | "GOOGLE_CLIENT_ID"
+  | "GOOGLE_CLIENT_SECRET"
+  | "ENABLE_GOOGLE_SYNC";
 
 export type TInstanceGithubAuthenticationConfigurationKeys =
   | "GITHUB_CLIENT_ID"
   | "GITHUB_CLIENT_SECRET"
-  | "GITHUB_ORGANIZATION_ID";
+  | "GITHUB_ORGANIZATION_ID"
+  | "ENABLE_GITHUB_SYNC";
 
 export type TInstanceGitlabAuthenticationConfigurationKeys =
   | "GITLAB_HOST"
   | "GITLAB_CLIENT_ID"
-  | "GITLAB_CLIENT_SECRET";
+  | "GITLAB_CLIENT_SECRET"
+  | "ENABLE_GITLAB_SYNC";
 
-export type TInstanceGiteaAuthenticationConfigurationKeys = "GITEA_HOST" | "GITEA_CLIENT_ID" | "GITEA_CLIENT_SECRET";
+export type TInstanceGiteaAuthenticationConfigurationKeys =
+  | "GITEA_HOST"
+  | "GITEA_CLIENT_ID"
+  | "GITEA_CLIENT_SECRET"
+  | "ENABLE_GITEA_SYNC";
 
 export type TInstanceAuthenticationConfigurationKeys =
   | TInstanceGoogleAuthenticationConfigurationKeys
@@ -44,4 +70,17 @@ export type TGetBaseAuthenticationModeProps = {
   resolvedTheme: string | undefined;
 };
 
+export type TOAuthOption = {
+  id: string;
+  text: string;
+  icon: React.ReactNode;
+  onClick: () => void;
+  enabled?: boolean;
+};
+
+export type TOAuthConfigs = {
+  isOAuthEnabled: boolean;
+  oAuthOptions: TOAuthOption[];
+};
+
 export type TCoreLoginMediums = "email" | "magic-code" | "github" | "gitlab" | "google" | "gitea";
diff --git a/packages/types/src/instance/base.ts b/packages/types/src/instance/base.ts
index 10aa0d39a..431b09ac0 100644
--- a/packages/types/src/instance/base.ts
+++ b/packages/types/src/instance/base.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { IUserLite } from "../users";
 import type {
   TInstanceAIConfigurationKeys,
diff --git a/packages/types/src/instance/email.ts b/packages/types/src/instance/email.ts
index 0c15cd230..0dbd73667 100644
--- a/packages/types/src/instance/email.ts
+++ b/packages/types/src/instance/email.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export type TInstanceEmailConfigurationKeys =
   | "EMAIL_HOST"
   | "EMAIL_PORT"
diff --git a/packages/types/src/instance/image.ts b/packages/types/src/instance/image.ts
index 9660a8559..812f670d1 100644
--- a/packages/types/src/instance/image.ts
+++ b/packages/types/src/instance/image.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export type TInstanceImageConfigurationKeys = "UNSPLASH_ACCESS_KEY";
diff --git a/packages/types/src/instance/index.ts b/packages/types/src/instance/index.ts
index ec67eb273..a31ae1ca9 100644
--- a/packages/types/src/instance/index.ts
+++ b/packages/types/src/instance/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./ai";
 export * from "./auth";
 export * from "./auth-ee";
diff --git a/packages/types/src/instance/workspace.ts b/packages/types/src/instance/workspace.ts
index 15a7317d0..3f4f4853b 100644
--- a/packages/types/src/instance/workspace.ts
+++ b/packages/types/src/instance/workspace.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export type TInstanceWorkspaceConfigurationKeys = "DISABLE_WORKSPACE_CREATION";
diff --git a/packages/types/src/intake/index.ts b/packages/types/src/intake/index.ts
index be6f71571..52b9ae62f 100644
--- a/packages/types/src/intake/index.ts
+++ b/packages/types/src/intake/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./state";
diff --git a/packages/types/src/intake/state.ts b/packages/types/src/intake/state.ts
index 27984a070..e11472cea 100644
--- a/packages/types/src/intake/state.ts
+++ b/packages/types/src/intake/state.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export type TIntakeStateGroups = "triage";
 
 export interface IIntakeState {
diff --git a/packages/types/src/integration.ts b/packages/types/src/integration.ts
index a02dc7255..9695a0ce0 100644
--- a/packages/types/src/integration.ts
+++ b/packages/types/src/integration.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // All the app integrations that are available
 export interface IAppIntegration {
   author: string;
diff --git a/packages/types/src/issues.ts b/packages/types/src/issues.ts
index 7d7aba3d5..50bc807c3 100644
--- a/packages/types/src/issues.ts
+++ b/packages/types/src/issues.ts
@@ -1,8 +1,14 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { ICycle } from "./cycle";
 import type { TIssue } from "./issues/issue";
 import type { IModule } from "./module";
 import type { IProjectLite } from "./project";
-import type { IStateLite } from "./state";
+import type { TStateGroups } from "./state";
 import type { IUserLite } from "./users";
 import type {
   IIssueDisplayProperties,
@@ -11,7 +17,7 @@ import type {
   TIssueGroupingFilters,
   TIssueOrderByOptions,
 } from "./view-props";
-import type { IWorkspaceLite, Properties } from "./workspace";
+import type { IWorkspaceLite } from "./workspace";
 
 export interface IIssueCycle {
   id: string;
@@ -39,23 +45,6 @@ export interface IIssueModule {
   workspace: string;
 }
 
-export interface IIssueParent {
-  description: any;
-  id: string;
-  name: string;
-  priority: string | null;
-  project_detail: IProjectLite;
-  sequence_id: number;
-  start_date: string | null;
-  state_detail: IStateLite;
-  target_date: string | null;
-}
-
-export interface IIssueLink {
-  title: string;
-  url: string;
-}
-
 export interface ILinkDetails {
   created_at: Date;
   created_by: string;
@@ -65,37 +54,11 @@ export interface ILinkDetails {
   url: string;
 }
 
-export interface ISubIssuesState {
-  backlog: number;
-  unstarted: number;
-  started: number;
-  completed: number;
-  cancelled: number;
-}
-
 export interface ISubIssueResponse {
-  state_distribution: ISubIssuesState;
+  state_distribution: Record<TStateGroups, number>;
   sub_issues: TIssue[];
 }
 
-export interface BlockeIssueDetail {
-  id: string;
-  name: string;
-  sequence_id: number;
-  project_detail: IProjectLite;
-}
-
-export type IssuePriorities = {
-  id: string;
-  created_at: Date;
-  updated_at: Date;
-  uuid: string;
-  properties: Properties;
-  created_by: number;
-  updated_by: number;
-  user: string;
-};
-
 export interface IIssueLabel {
   id: string;
   name: string;
@@ -145,31 +108,6 @@ export interface IIssueActivity {
   workspace_detail?: IWorkspaceLite;
 }
 
-export interface IIssueLite {
-  id: string;
-  name: string;
-  project_id: string;
-  start_date?: string | null;
-  target_date?: string | null;
-  workspace__slug: string;
-}
-
-export interface IIssueAttachment {
-  asset: string;
-  attributes: {
-    name: string;
-    size: number;
-  };
-  created_at: string;
-  created_by: string;
-  id: string;
-  issue: string;
-  project: string;
-  updated_at: string;
-  updated_by: string;
-  workspace: string;
-}
-
 export type TIssuePriorities = "urgent" | "high" | "medium" | "low" | "none";
 
 export interface ViewFlags {
@@ -208,15 +146,6 @@ export interface IIssueMap {
   [key: string]: TIssue;
 }
 
-export interface IIssueListRow {
-  id: string;
-  groupId: string;
-  type: "HEADER" | "NO_ISSUES" | "QUICK_ADD" | "ISSUE";
-  name?: string;
-  icon?: React.ReactElement | undefined;
-  payload?: Partial<TIssue>;
-}
-
 export interface ILayoutDisplayFiltersOptions {
   display_properties: (keyof IIssueDisplayProperties)[];
   display_filters: {
diff --git a/packages/types/src/issues/activity/base.ts b/packages/types/src/issues/activity/base.ts
index b822fd25f..ef1fa8b5b 100644
--- a/packages/types/src/issues/activity/base.ts
+++ b/packages/types/src/issues/activity/base.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./issue_activity";
 export * from "./issue_comment";
 export * from "./issue_comment_reaction";
diff --git a/packages/types/src/issues/activity/issue_activity.ts b/packages/types/src/issues/activity/issue_activity.ts
index 16bf355d1..4cc158cfc 100644
--- a/packages/types/src/issues/activity/issue_activity.ts
+++ b/packages/types/src/issues/activity/issue_activity.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // local imports
 import type { EInboxIssueSource } from "../../inbox";
 import type {
diff --git a/packages/types/src/issues/activity/issue_comment.ts b/packages/types/src/issues/activity/issue_comment.ts
index f5a411e53..9de4e8231 100644
--- a/packages/types/src/issues/activity/issue_comment.ts
+++ b/packages/types/src/issues/activity/issue_comment.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { JSONContent } from "../../editor";
 import type { EIssueCommentAccessSpecifier } from "../../enums";
 import type { TFileSignedURLResponse } from "../../file";
diff --git a/packages/types/src/issues/activity/issue_comment_reaction.ts b/packages/types/src/issues/activity/issue_comment_reaction.ts
index 590b18ca5..84637aa05 100644
--- a/packages/types/src/issues/activity/issue_comment_reaction.ts
+++ b/packages/types/src/issues/activity/issue_comment_reaction.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export type TIssueCommentReaction = {
   id: string;
   comment: string;
diff --git a/packages/types/src/issues/base.ts b/packages/types/src/issues/base.ts
index 26054bf13..af802bb4d 100644
--- a/packages/types/src/issues/base.ts
+++ b/packages/types/src/issues/base.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // issues
 export * from "./issue";
 export * from "./issue_reaction";
diff --git a/packages/types/src/issues/issue-identifier.ts b/packages/types/src/issues/issue-identifier.ts
new file mode 100644
index 000000000..e6797add6
--- /dev/null
+++ b/packages/types/src/issues/issue-identifier.ts
@@ -0,0 +1,43 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { IIssueDisplayProperties } from "../view-props";
+
+export type TIssueIdentifierSize = "xs" | "sm" | "md" | "lg";
+
+export type TIdentifierTextVariant = "default" | "secondary" | "tertiary" | "primary" | "primary-subtle" | "success";
+
+export type TIssueIdentifierBaseProps = {
+  projectId: string;
+  size?: TIssueIdentifierSize;
+  variant?: TIdentifierTextVariant;
+  displayProperties?: IIssueDisplayProperties | undefined;
+  enableClickToCopyIdentifier?: boolean;
+};
+
+export type TIssueIdentifierFromStore = TIssueIdentifierBaseProps & {
+  issueId: string;
+};
+
+export type TIssueIdentifierWithDetails = TIssueIdentifierBaseProps & {
+  issueTypeId?: string | null;
+  projectIdentifier: string;
+  issueSequenceId: string | number;
+};
+
+export type TIssueIdentifierProps = TIssueIdentifierFromStore | TIssueIdentifierWithDetails;
+
+export type TIssueTypeIdentifier = {
+  issueTypeId: string;
+  size?: TIssueIdentifierSize;
+};
+
+export type TIdentifierTextProps = {
+  identifier: string;
+  enableClickToCopyIdentifier?: boolean;
+  size?: TIssueIdentifierSize;
+  variant?: TIdentifierTextVariant;
+};
diff --git a/packages/types/src/issues/issue.ts b/packages/types/src/issues/issue.ts
index 9a6aa5d5a..8054b4c44 100644
--- a/packages/types/src/issues/issue.ts
+++ b/packages/types/src/issues/issue.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { TIssuePriorities } from "../issues";
 import type { TStateGroups } from "../state";
 import type { TIssuePublicComment } from "./activity/issue_comment";
@@ -73,7 +79,7 @@ export type TBaseIssue = {
   is_intake?: boolean;
 };
 
-export type IssueRelation = {
+type IssueRelation = {
   id: string;
   name: string;
   project_id: string;
@@ -182,7 +188,7 @@ export interface IPublicIssue extends Pick<
   vote_items: IPublicVote[];
 }
 
-export type TPublicIssueResponseResults =
+type TPublicIssueResponseResults =
   | IPublicIssue[]
   | {
       [key: string]: {
diff --git a/packages/types/src/issues/issue_attachment.ts b/packages/types/src/issues/issue_attachment.ts
index 69d24c03d..f3c4ce0e7 100644
--- a/packages/types/src/issues/issue_attachment.ts
+++ b/packages/types/src/issues/issue_attachment.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { TFileSignedURLResponse } from "../file";
 
 export type TIssueAttachment = {
diff --git a/packages/types/src/issues/issue_link.ts b/packages/types/src/issues/issue_link.ts
index 10f0d2792..77b87d94c 100644
--- a/packages/types/src/issues/issue_link.ts
+++ b/packages/types/src/issues/issue_link.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export type TIssueLinkEditableFields = {
   title: string;
   url: string;
diff --git a/packages/types/src/issues/issue_reaction.ts b/packages/types/src/issues/issue_reaction.ts
index 579ee2be6..9cf72e9f0 100644
--- a/packages/types/src/issues/issue_reaction.ts
+++ b/packages/types/src/issues/issue_reaction.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { IUserLite } from "../users";
 
 export type TIssueReaction = {
diff --git a/packages/types/src/issues/issue_relation.ts b/packages/types/src/issues/issue_relation.ts
index 7d4c9d415..58a226d55 100644
--- a/packages/types/src/issues/issue_relation.ts
+++ b/packages/types/src/issues/issue_relation.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { TIssue } from "./issue";
 
 export type TIssueRelation = Record<TIssueRelationTypes, TIssue[]>;
diff --git a/packages/types/src/issues/issue_sub_issues.ts b/packages/types/src/issues/issue_sub_issues.ts
index fbfc7fe0e..5ef11e2d2 100644
--- a/packages/types/src/issues/issue_sub_issues.ts
+++ b/packages/types/src/issues/issue_sub_issues.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { TIssue } from "./issue";
 
 export type TSubIssuesStateDistribution = {
diff --git a/packages/types/src/issues/issue_subscription.ts b/packages/types/src/issues/issue_subscription.ts
index e69de29bb..f7fc58efa 100644
--- a/packages/types/src/issues/issue_subscription.ts
+++ b/packages/types/src/issues/issue_subscription.ts
@@ -0,0 +1,5 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
diff --git a/packages/types/src/layout/gantt.ts b/packages/types/src/layout/gantt.ts
index 0fb54615c..20a51961b 100644
--- a/packages/types/src/layout/gantt.ts
+++ b/packages/types/src/layout/gantt.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export enum EGanttBlockType {
   EPIC = "epic",
   PROJECT = "project",
diff --git a/packages/types/src/layout/index.ts b/packages/types/src/layout/index.ts
index 88de77a54..b2679b13d 100644
--- a/packages/types/src/layout/index.ts
+++ b/packages/types/src/layout/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./gantt";
diff --git a/packages/types/src/module/index.ts b/packages/types/src/module/index.ts
index 783634662..f8e54bb0c 100644
--- a/packages/types/src/module/index.ts
+++ b/packages/types/src/module/index.ts
@@ -1,2 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./module_filters";
 export * from "./modules";
diff --git a/packages/types/src/module/module_filters.ts b/packages/types/src/module/module_filters.ts
index e22ac152a..eb3262664 100644
--- a/packages/types/src/module/module_filters.ts
+++ b/packages/types/src/module/module_filters.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export type TModuleOrderByOptions =
   | "name"
   | "-name"
diff --git a/packages/types/src/module/modules.ts b/packages/types/src/module/modules.ts
index 2078ae7d1..3aa571200 100644
--- a/packages/types/src/module/modules.ts
+++ b/packages/types/src/module/modules.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { ILinkDetails } from "../issues";
 import type { TIssue } from "../issues/issue";
 import type { IIssueFilterOptions } from "../view-props";
diff --git a/packages/types/src/page/core.ts b/packages/types/src/page/core.ts
index 99b464188..4677b2972 100644
--- a/packages/types/src/page/core.ts
+++ b/packages/types/src/page/core.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { TLogoProps } from "../common";
 import type { EPageAccess } from "../enums";
 import type { TPageExtended } from "./extended";
@@ -8,7 +14,7 @@ export type TPage = {
   color: string | undefined;
   created_at: Date | undefined;
   created_by: string | undefined;
-  description: object | undefined;
+  description_json: object | undefined;
   description_html: string | undefined;
   id: string | undefined;
   is_favorite: boolean;
@@ -66,7 +72,7 @@ export type TPageVersion = {
 export type TDocumentPayload = {
   description_binary: string;
   description_html: string;
-  description: object;
+  description_json: object;
 };
 
 export type TWebhookConnectionQueryParams = {
diff --git a/packages/types/src/page/extended.ts b/packages/types/src/page/extended.ts
index 92f1b995d..76f32ce54 100644
--- a/packages/types/src/page/extended.ts
+++ b/packages/types/src/page/extended.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export type TPageExtended = object;
diff --git a/packages/types/src/page/index.ts b/packages/types/src/page/index.ts
index c6c1c2a06..02f502f64 100644
--- a/packages/types/src/page/index.ts
+++ b/packages/types/src/page/index.ts
@@ -1,2 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./core";
 export * from "./extended";
diff --git a/packages/types/src/pagination.ts b/packages/types/src/pagination.ts
new file mode 100644
index 000000000..9d5be145e
--- /dev/null
+++ b/packages/types/src/pagination.ts
@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// Generic paginated response type for API responses
+export type TPaginatedResponse<T> = {
+  results: T;
+  grouped_by?: string | null;
+  sub_grouped_by?: string | null;
+  total_count?: number;
+  next_cursor?: string;
+  prev_cursor?: string;
+  next_page_results?: boolean;
+  prev_page_results?: boolean;
+  count?: number;
+  total_pages?: number;
+  total_results?: number;
+  extra_stats?: string | null;
+};
diff --git a/packages/types/src/payment.ts b/packages/types/src/payment.ts
index 21e22e631..457451095 100644
--- a/packages/types/src/payment.ts
+++ b/packages/types/src/payment.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export enum EProductSubscriptionEnum {
   FREE = "FREE",
   ONE = "ONE",
diff --git a/packages/types/src/pragmatic.ts b/packages/types/src/pragmatic.ts
index bd0969ce2..713b3aa8c 100644
--- a/packages/types/src/pragmatic.ts
+++ b/packages/types/src/pragmatic.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export type TDropTarget = {
   element: Element;
   data: Record<string | symbol, unknown>;
diff --git a/packages/types/src/project/index.ts b/packages/types/src/project/index.ts
index f5478051e..9fd993179 100644
--- a/packages/types/src/project/index.ts
+++ b/packages/types/src/project/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./project_filters";
 export * from "./projects";
 export * from "./project_link";
diff --git a/packages/types/src/project/project_filters.ts b/packages/types/src/project/project_filters.ts
index 4c21488ab..54bf4931f 100644
--- a/packages/types/src/project/project_filters.ts
+++ b/packages/types/src/project/project_filters.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export type TProjectOrderByOptions =
   | "sort_order"
   | "name"
diff --git a/packages/types/src/project/project_link.ts b/packages/types/src/project/project_link.ts
index 45b9dfc6a..78b37bf70 100644
--- a/packages/types/src/project/project_link.ts
+++ b/packages/types/src/project/project_link.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export type TProjectLinkEditableFields = {
   title: string;
   url: string;
diff --git a/packages/types/src/project/projects.ts b/packages/types/src/project/projects.ts
index aa4d1bcba..3cdbed1de 100644
--- a/packages/types/src/project/projects.ts
+++ b/packages/types/src/project/projects.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { TLogoProps } from "../common";
 import type { TUserPermissions } from "../enums";
 import type { TStateGroups } from "../state";
@@ -33,6 +39,7 @@ export interface IPartialProject {
   // actor
   created_by?: string;
   updated_by?: string;
+  intake_count?: number;
 }
 
 export interface IProject extends IPartialProject {
@@ -51,6 +58,7 @@ export interface IProject extends IPartialProject {
   is_favorite?: boolean;
   members?: string[];
   timezone?: string;
+  next_work_item_sequence?: number;
 }
 
 export type TProjectAnalyticsCountParams = {
@@ -73,12 +81,6 @@ export interface IProjectLite {
   logo_props: TLogoProps;
 }
 
-export type ProjectPreferences = {
-  pages: {
-    block_display: boolean;
-  };
-};
-
 export interface IProjectMap {
   [id: string]: IProject;
 }
diff --git a/packages/types/src/publish.ts b/packages/types/src/publish.ts
index 646fc4c85..c38f15f19 100644
--- a/packages/types/src/publish.ts
+++ b/packages/types/src/publish.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { IProject, IProjectLite } from "./project";
 import type { IWorkspaceLite } from "./workspace";
 
diff --git a/packages/types/src/reaction.ts b/packages/types/src/reaction.ts
index b87a2c68d..613c73126 100644
--- a/packages/types/src/reaction.ts
+++ b/packages/types/src/reaction.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { IUserLite } from "./users";
 
 export interface IIssueReaction {
diff --git a/packages/types/src/rich-filters/adapter.ts b/packages/types/src/rich-filters/adapter.ts
index ddcada6d5..0c488482c 100644
--- a/packages/types/src/rich-filters/adapter.ts
+++ b/packages/types/src/rich-filters/adapter.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // local imports
 import type { TFilterExpression, TFilterProperty } from "./expression";
 
diff --git a/packages/types/src/rich-filters/builder.ts b/packages/types/src/rich-filters/builder.ts
index 4fea4305d..0721e6759 100644
--- a/packages/types/src/rich-filters/builder.ts
+++ b/packages/types/src/rich-filters/builder.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { SingleOrArray } from "../utils";
 import type { IFilterAdapter, TExternalFilter } from "./adapter";
 import type { TFilterProperty, TFilterValue } from "./expression";
diff --git a/packages/types/src/rich-filters/config/filter-config.ts b/packages/types/src/rich-filters/config/filter-config.ts
index e35a29257..d9b06cc53 100644
--- a/packages/types/src/rich-filters/config/filter-config.ts
+++ b/packages/types/src/rich-filters/config/filter-config.ts
@@ -1,4 +1,10 @@
-import type { TFilterProperty, TFilterValue } from "../expression";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { TFilterProperty } from "../expression";
 import type { TOperatorConfigMap } from "../operator-configs";
 
 /**
@@ -8,13 +14,13 @@ import type { TOperatorConfigMap } from "../operator-configs";
  * @template P - Property key type (e.g., 'state_id', 'priority', 'assignee')
  * @template V - Value type for the filter
  */
-export type TFilterConfig<P extends TFilterProperty, V extends TFilterValue = TFilterValue> = {
+export type TFilterConfig<P extends TFilterProperty> = {
   id: P;
   label: string;
   icon?: React.FC<React.SVGAttributes<SVGElement>>;
   isEnabled: boolean;
   allowMultipleFilters?: boolean;
-  supportedOperatorConfigsMap: TOperatorConfigMap<V>;
+  supportedOperatorConfigsMap: TOperatorConfigMap;
   rightContent?: React.ReactNode; // content to display on the right side of the filter option in the dropdown
   tooltipContent?: React.ReactNode; // content to display when hovering over the applied filter item in the filter list
 };
diff --git a/packages/types/src/rich-filters/config/index.ts b/packages/types/src/rich-filters/config/index.ts
index cd3f61fa5..0c4f9c204 100644
--- a/packages/types/src/rich-filters/config/index.ts
+++ b/packages/types/src/rich-filters/config/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./filter-config";
diff --git a/packages/types/src/rich-filters/derived/core.ts b/packages/types/src/rich-filters/derived/core.ts
index 5eec05ad0..63328ac38 100644
--- a/packages/types/src/rich-filters/derived/core.ts
+++ b/packages/types/src/rich-filters/derived/core.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { TFilterValue } from "../expression";
 import type {
   TDateFilterFieldConfig,
@@ -14,23 +20,23 @@ import type { TFilterOperatorHelper } from "./shared";
  * Union type representing all core operators that support single date filter types.
  */
 export type TCoreSupportedSingleDateFilterOperators<V extends TFilterValue = TFilterValue> = {
-  [K in keyof TCoreOperatorSpecificConfigs<V>]: TFilterOperatorHelper<
-    TCoreOperatorSpecificConfigs<V>,
+  [K in keyof TCoreOperatorSpecificConfigs]: TFilterOperatorHelper<
+    TCoreOperatorSpecificConfigs,
     K,
     TDateFilterFieldConfig<V>
   >;
-}[keyof TCoreOperatorSpecificConfigs<V>];
+}[keyof TCoreOperatorSpecificConfigs];
 
 /**
  * Union type representing all core operators that support range date filter types.
  */
 export type TCoreSupportedRangeDateFilterOperators<V extends TFilterValue = TFilterValue> = {
-  [K in keyof TCoreOperatorSpecificConfigs<V>]: TFilterOperatorHelper<
-    TCoreOperatorSpecificConfigs<V>,
+  [K in keyof TCoreOperatorSpecificConfigs]: TFilterOperatorHelper<
+    TCoreOperatorSpecificConfigs,
     K,
     TDateRangeFilterFieldConfig<V>
   >;
-}[keyof TCoreOperatorSpecificConfigs<V>];
+}[keyof TCoreOperatorSpecificConfigs];
 
 /**
  * Union type representing all core operators that support date filter types.
@@ -48,23 +54,23 @@ export type TCoreAllAvailableDateFilterOperatorsForDisplay<V extends TFilterValu
  * Union type representing all core operators that support single select filter types.
  */
 export type TCoreSupportedSingleSelectFilterOperators<V extends TFilterValue = TFilterValue> = {
-  [K in keyof TCoreOperatorSpecificConfigs<V>]: TFilterOperatorHelper<
-    TCoreOperatorSpecificConfigs<V>,
+  [K in keyof TCoreOperatorSpecificConfigs]: TFilterOperatorHelper<
+    TCoreOperatorSpecificConfigs,
     K,
     TSingleSelectFilterFieldConfig<V>
   >;
-}[keyof TCoreOperatorSpecificConfigs<V>];
+}[keyof TCoreOperatorSpecificConfigs];
 
 /**
  * Union type representing all core operators that support multi select filter types.
  */
 export type TCoreSupportedMultiSelectFilterOperators<V extends TFilterValue = TFilterValue> = {
-  [K in keyof TCoreOperatorSpecificConfigs<V>]: TFilterOperatorHelper<
-    TCoreOperatorSpecificConfigs<V>,
+  [K in keyof TCoreOperatorSpecificConfigs]: TFilterOperatorHelper<
+    TCoreOperatorSpecificConfigs,
     K,
     TMultiSelectFilterFieldConfig<V>
   >;
-}[keyof TCoreOperatorSpecificConfigs<V>];
+}[keyof TCoreOperatorSpecificConfigs];
 
 /**
  * Union type representing all core operators that support any select filter types.
diff --git a/packages/types/src/rich-filters/derived/extended.ts b/packages/types/src/rich-filters/derived/extended.ts
index c5fc9b821..d3778f086 100644
--- a/packages/types/src/rich-filters/derived/extended.ts
+++ b/packages/types/src/rich-filters/derived/extended.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { TFilterValue } from "../expression";
 
 // -------- DATE FILTER OPERATORS --------
diff --git a/packages/types/src/rich-filters/derived/index.ts b/packages/types/src/rich-filters/derived/index.ts
index 67f84aa6b..cdcf5c8a1 100644
--- a/packages/types/src/rich-filters/derived/index.ts
+++ b/packages/types/src/rich-filters/derived/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { TFilterValue } from "../expression";
 import type {
   TCoreAllAvailableDateFilterOperatorsForDisplay,
diff --git a/packages/types/src/rich-filters/derived/shared.ts b/packages/types/src/rich-filters/derived/shared.ts
index cce5ebaf0..c22e8933d 100644
--- a/packages/types/src/rich-filters/derived/shared.ts
+++ b/packages/types/src/rich-filters/derived/shared.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 /**
  * Generic utility type to check if a configuration type supports specific filter types.
  * Returns the operator key if any member of the union includes the target filter types, never otherwise.
diff --git a/packages/types/src/rich-filters/expression.ts b/packages/types/src/rich-filters/expression.ts
index 82d5aa408..6a57f2911 100644
--- a/packages/types/src/rich-filters/expression.ts
+++ b/packages/types/src/rich-filters/expression.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // local imports
 import type { SingleOrArray } from "../utils";
 import type { TSupportedOperators, LOGICAL_OPERATOR, TAllAvailableOperatorsForDisplay } from "./operators";
diff --git a/packages/types/src/rich-filters/field-types/core.ts b/packages/types/src/rich-filters/field-types/core.ts
index ed88466af..88bc53c6c 100644
--- a/packages/types/src/rich-filters/field-types/core.ts
+++ b/packages/types/src/rich-filters/field-types/core.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { TFilterValue } from "../expression";
 import type { TSupportedOperators } from "../operators";
 import type { TBaseFilterFieldConfig, IFilterOption } from "./shared";
diff --git a/packages/types/src/rich-filters/field-types/extended.ts b/packages/types/src/rich-filters/field-types/extended.ts
index 7c7bbf326..1d8aa9668 100644
--- a/packages/types/src/rich-filters/field-types/extended.ts
+++ b/packages/types/src/rich-filters/field-types/extended.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { TFilterValue } from "../expression";
 
 /**
diff --git a/packages/types/src/rich-filters/field-types/index.ts b/packages/types/src/rich-filters/field-types/index.ts
index 303cd03e2..9de366bbe 100644
--- a/packages/types/src/rich-filters/field-types/index.ts
+++ b/packages/types/src/rich-filters/field-types/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { TFilterValue } from "../expression";
 import type { TCoreFilterFieldConfigs } from "./core";
 import { CORE_FILTER_FIELD_TYPE } from "./core";
diff --git a/packages/types/src/rich-filters/field-types/shared.ts b/packages/types/src/rich-filters/field-types/shared.ts
index e4f6f1a9d..58e675d4f 100644
--- a/packages/types/src/rich-filters/field-types/shared.ts
+++ b/packages/types/src/rich-filters/field-types/shared.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { TFilterValue } from "../expression";
 
 /**
diff --git a/packages/types/src/rich-filters/index.ts b/packages/types/src/rich-filters/index.ts
index e242d63e1..0ac0c3191 100644
--- a/packages/types/src/rich-filters/index.ts
+++ b/packages/types/src/rich-filters/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./adapter";
 export * from "./builder";
 export * from "./config";
diff --git a/packages/types/src/rich-filters/operator-configs/core.ts b/packages/types/src/rich-filters/operator-configs/core.ts
index df2cd1210..b8eb9d3a1 100644
--- a/packages/types/src/rich-filters/operator-configs/core.ts
+++ b/packages/types/src/rich-filters/operator-configs/core.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { TFilterValue } from "../expression";
 import type {
   TDateFilterFieldConfig,
@@ -8,19 +14,19 @@ import type {
 import type { CORE_COLLECTION_OPERATOR, CORE_COMPARISON_OPERATOR, CORE_EQUALITY_OPERATOR } from "../operators";
 
 // ----------------------------- EXACT Operator -----------------------------
-export type TCoreExactOperatorConfigs<V extends TFilterValue> =
-  | TSingleSelectFilterFieldConfig<V>
-  | TDateFilterFieldConfig<V>;
+export type TCoreExactOperatorConfigs =
+  | TSingleSelectFilterFieldConfig<TFilterValue>
+  | TDateFilterFieldConfig<TFilterValue>;
 
 // ----------------------------- IN Operator -----------------------------
-export type TCoreInOperatorConfigs<V extends TFilterValue> = TMultiSelectFilterFieldConfig<V>;
+export type TCoreInOperatorConfigs = TMultiSelectFilterFieldConfig<TFilterValue>;
 
 // ----------------------------- RANGE Operator -----------------------------
-export type TCoreRangeOperatorConfigs<V extends TFilterValue> = TDateRangeFilterFieldConfig<V>;
+export type TCoreRangeOperatorConfigs = TDateRangeFilterFieldConfig<TFilterValue>;
 
 // ----------------------------- Core Operator Specific Configs -----------------------------
-export type TCoreOperatorSpecificConfigs<V extends TFilterValue> = {
-  [CORE_EQUALITY_OPERATOR.EXACT]: TCoreExactOperatorConfigs<V>;
-  [CORE_COLLECTION_OPERATOR.IN]: TCoreInOperatorConfigs<V>;
-  [CORE_COMPARISON_OPERATOR.RANGE]: TCoreRangeOperatorConfigs<V>;
+export type TCoreOperatorSpecificConfigs = {
+  [CORE_EQUALITY_OPERATOR.EXACT]: TCoreExactOperatorConfigs;
+  [CORE_COLLECTION_OPERATOR.IN]: TCoreInOperatorConfigs;
+  [CORE_COMPARISON_OPERATOR.RANGE]: TCoreRangeOperatorConfigs;
 };
diff --git a/packages/types/src/rich-filters/operator-configs/extended.ts b/packages/types/src/rich-filters/operator-configs/extended.ts
index 6004b9ce7..1ef1c55bc 100644
--- a/packages/types/src/rich-filters/operator-configs/extended.ts
+++ b/packages/types/src/rich-filters/operator-configs/extended.ts
@@ -1,13 +1,17 @@
-import type { TFilterValue } from "../expression";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
 
 // ----------------------------- EXACT Operator -----------------------------
-export type TExtendedExactOperatorConfigs<_V extends TFilterValue> = never;
+export type TExtendedExactOperatorConfigs = never;
 
 // ----------------------------- IN Operator -----------------------------
-export type TExtendedInOperatorConfigs<_V extends TFilterValue> = never;
+export type TExtendedInOperatorConfigs = never;
 
 // ----------------------------- RANGE Operator -----------------------------
-export type TExtendedRangeOperatorConfigs<_V extends TFilterValue> = never;
+export type TExtendedRangeOperatorConfigs = never;
 
 // ----------------------------- Extended Operator Specific Configs -----------------------------
-export type TExtendedOperatorSpecificConfigs<_V extends TFilterValue> = unknown;
+export type TExtendedOperatorSpecificConfigs = unknown;
diff --git a/packages/types/src/rich-filters/operator-configs/index.ts b/packages/types/src/rich-filters/operator-configs/index.ts
index 252df7fe8..6e0cc4c53 100644
--- a/packages/types/src/rich-filters/operator-configs/index.ts
+++ b/packages/types/src/rich-filters/operator-configs/index.ts
@@ -1,4 +1,9 @@
-import type { TFilterValue } from "../expression";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { EQUALITY_OPERATOR, COLLECTION_OPERATOR, COMPARISON_OPERATOR } from "../operators";
 import type { TCoreExactOperatorConfigs, TCoreInOperatorConfigs, TCoreRangeOperatorConfigs } from "./core";
 import type {
@@ -13,21 +18,17 @@ import type {
 /**
  * EXACT operator - combines core and extended configurations
  */
-export type TExactOperatorConfigs<V extends TFilterValue> =
-  | TCoreExactOperatorConfigs<V>
-  | TExtendedExactOperatorConfigs<V>;
+export type TExactOperatorConfigs = TCoreExactOperatorConfigs | TExtendedExactOperatorConfigs;
 
 /**
  * IN operator - combines core and extended configurations
  */
-export type TInOperatorConfigs<V extends TFilterValue> = TCoreInOperatorConfigs<V> | TExtendedInOperatorConfigs<V>;
+export type TInOperatorConfigs = TCoreInOperatorConfigs | TExtendedInOperatorConfigs;
 
 /**
  * RANGE operator - combines core and extended configurations
  */
-export type TRangeOperatorConfigs<V extends TFilterValue> =
-  | TCoreRangeOperatorConfigs<V>
-  | TExtendedRangeOperatorConfigs<V>;
+export type TRangeOperatorConfigs = TCoreRangeOperatorConfigs | TExtendedRangeOperatorConfigs;
 
 // ----------------------------- Final Operator Specific Configs -----------------------------
 
@@ -35,19 +36,19 @@ export type TRangeOperatorConfigs<V extends TFilterValue> =
  * Type-safe mapping of specific operators to their supported filter type configurations.
  * Each operator maps to its composed (core + extended) configurations.
  */
-export type TOperatorSpecificConfigs<V extends TFilterValue> = {
-  [EQUALITY_OPERATOR.EXACT]: TExactOperatorConfigs<V>;
-  [COLLECTION_OPERATOR.IN]: TInOperatorConfigs<V>;
-  [COMPARISON_OPERATOR.RANGE]: TRangeOperatorConfigs<V>;
-} & TExtendedOperatorSpecificConfigs<V>;
+export type TOperatorSpecificConfigs = {
+  [EQUALITY_OPERATOR.EXACT]: TExactOperatorConfigs;
+  [COLLECTION_OPERATOR.IN]: TInOperatorConfigs;
+  [COMPARISON_OPERATOR.RANGE]: TRangeOperatorConfigs;
+} & TExtendedOperatorSpecificConfigs;
 
 /**
  * Operator filter configuration mapping - for different operators.
  * Provides type-safe mapping of operators to their specific supported configurations.
  */
-export type TOperatorConfigMap<V extends TFilterValue> = Map<
-  keyof TOperatorSpecificConfigs<V>,
-  TOperatorSpecificConfigs<V>[keyof TOperatorSpecificConfigs<V>]
+export type TOperatorConfigMap = Map<
+  keyof TOperatorSpecificConfigs,
+  TOperatorSpecificConfigs[keyof TOperatorSpecificConfigs]
 >;
 
 // -------- RE-EXPORTS --------
diff --git a/packages/types/src/rich-filters/operators/core.ts b/packages/types/src/rich-filters/operators/core.ts
index 602fdab94..6497a7fcc 100644
--- a/packages/types/src/rich-filters/operators/core.ts
+++ b/packages/types/src/rich-filters/operators/core.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 /**
  * Core logical operators
  */
diff --git a/packages/types/src/rich-filters/operators/extended.ts b/packages/types/src/rich-filters/operators/extended.ts
index 4616e40b6..16fe15aed 100644
--- a/packages/types/src/rich-filters/operators/extended.ts
+++ b/packages/types/src/rich-filters/operators/extended.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 /**
  * Extended logical operators
  */
diff --git a/packages/types/src/rich-filters/operators/index.ts b/packages/types/src/rich-filters/operators/index.ts
index d7fe9baa4..143390315 100644
--- a/packages/types/src/rich-filters/operators/index.ts
+++ b/packages/types/src/rich-filters/operators/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { TCoreSupportedOperators } from "./core";
 import {
   CORE_LOGICAL_OPERATOR,
diff --git a/packages/types/src/search.ts b/packages/types/src/search.ts
index eb4957985..e619a7d1c 100644
--- a/packages/types/src/search.ts
+++ b/packages/types/src/search.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { ICycle } from "./cycle";
 import type { TIssue } from "./issues/issue";
 import type { IModule } from "./module";
diff --git a/packages/types/src/settings.ts b/packages/types/src/settings.ts
new file mode 100644
index 000000000..7eb994dd5
--- /dev/null
+++ b/packages/types/src/settings.ts
@@ -0,0 +1,40 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// local imports
+import type { EUserProjectRoles } from ".";
+import type { EUserWorkspaceRoles } from "./workspace";
+
+export type TProfileSettingsTabs = "general" | "preferences" | "activity" | "notifications" | "security" | "api-tokens";
+
+export type TWorkspaceSettingsTabs = "general" | "members" | "billing-and-plans" | "export" | "webhooks";
+export type TWorkspaceSettingsItem = {
+  key: TWorkspaceSettingsTabs;
+  i18n_label: string;
+  href: string;
+  access: EUserWorkspaceRoles[];
+  highlight: (pathname: string, baseUrl: string) => boolean;
+};
+
+export type TProjectSettingsTabs =
+  | "general"
+  | "members"
+  | "features_cycles"
+  | "features_modules"
+  | "features_views"
+  | "features_pages"
+  | "features_intake"
+  | "states"
+  | "labels"
+  | "estimates"
+  | "automations";
+export type TProjectSettingsItem = {
+  key: TProjectSettingsTabs;
+  i18n_label: string;
+  href: string;
+  access: EUserProjectRoles[];
+  highlight: (pathname: string, baseUrl: string) => boolean;
+};
diff --git a/packages/types/src/state.ts b/packages/types/src/state.ts
index 7392606e2..2af6482e7 100644
--- a/packages/types/src/state.ts
+++ b/packages/types/src/state.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export type TStateGroups = "backlog" | "unstarted" | "started" | "completed" | "cancelled";
 
 export interface IState {
diff --git a/packages/types/src/stickies.ts b/packages/types/src/stickies.ts
index e8fefa1df..649bac9c4 100644
--- a/packages/types/src/stickies.ts
+++ b/packages/types/src/stickies.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { TLogoProps } from "./common";
 
 export type TSticky = {
diff --git a/packages/types/src/timezone.ts b/packages/types/src/timezone.ts
index b4df123a3..e963303fb 100644
--- a/packages/types/src/timezone.ts
+++ b/packages/types/src/timezone.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export type TTimezoneObject = {
   utc_offset: string;
   gmt_offset: string;
diff --git a/packages/types/src/users.ts b/packages/types/src/users.ts
index 7760a0a8c..7391343c8 100644
--- a/packages/types/src/users.ts
+++ b/packages/types/src/users.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { TUserPermissions } from "./enums";
 import type { IIssueActivity, TIssuePriorities, TStateGroups } from ".";
 import type { TLoginMediums } from "./instance";
@@ -59,14 +65,10 @@ export type TUserProfile = {
   role: string | undefined;
   last_workspace_id: string | undefined;
   theme: {
-    text: string | undefined;
     theme: string | undefined;
-    palette: string | undefined;
     primary: string | undefined;
     background: string | undefined;
     darkPalette: boolean | undefined;
-    sidebarText: string | undefined;
-    sidebarBackground: string | undefined;
   };
   onboarding_step: TOnboardingSteps;
   is_onboarded: boolean;
@@ -101,14 +103,10 @@ export interface IUserSettings {
 }
 
 export interface IUserTheme {
-  text: string | undefined;
-  theme: string | undefined;
-  palette: string | undefined;
-  primary: string | undefined;
-  background: string | undefined;
-  darkPalette: boolean | undefined;
-  sidebarText: string | undefined;
-  sidebarBackground: string | undefined;
+  theme: string | undefined; // 'light', 'dark', 'custom', etc.
+  primary?: string | undefined;
+  background?: string | undefined;
+  darkPalette?: boolean | undefined;
 }
 
 export interface IUserMemberLite extends IUserLite {
diff --git a/packages/types/src/utils.ts b/packages/types/src/utils.ts
index 81cc8a581..2947bd4fb 100644
--- a/packages/types/src/utils.ts
+++ b/packages/types/src/utils.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export type PartialDeep<K> = {
   [attr in keyof K]?: K[attr] extends object ? PartialDeep<K[attr]> : K[attr];
 };
diff --git a/packages/types/src/view-props.ts b/packages/types/src/view-props.ts
index 7211b58a4..638afa0fd 100644
--- a/packages/types/src/view-props.ts
+++ b/packages/types/src/view-props.ts
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { IProjectMemberNavigationPreferences } from "./project";
 import type { TIssue } from "./issues/issue";
 import type { LOGICAL_OPERATOR, TSupportedOperators } from "./rich-filters";
 import type { CompleteOrEmpty } from "./utils";
@@ -194,6 +201,22 @@ export interface IIssueFiltersResponse {
   display_properties: IIssueDisplayProperties;
 }
 
+export interface IProjectUserPropertiesResponse extends IIssueFiltersResponse {
+  sort_order: number;
+  preferences: {
+    pages: {
+      block_display: boolean;
+    };
+    navigation: IProjectMemberNavigationPreferences;
+  };
+}
+
+export interface IWorkspaceUserPropertiesResponse extends IIssueFiltersResponse {
+  navigation_project_limit?: number;
+  navigation_control_preference?: "ACCORDION" | "TABBED";
+  // Note: show_limited_projects is derived from navigation_project_limit (0 = false, >0 = true)
+}
+
 export interface IWorkspaceIssueFilterOptions {
   assignees?: string[] | null;
   created_by?: string[] | null;
diff --git a/packages/types/src/views.ts b/packages/types/src/views.ts
index a44e5c61f..4991b2da9 100644
--- a/packages/types/src/views.ts
+++ b/packages/types/src/views.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { TLogoProps } from "./common";
 import type {
   IIssueDisplayFilterOptions,
diff --git a/packages/types/src/waitlist.ts b/packages/types/src/waitlist.ts
index 3c199ad07..5ec48606a 100644
--- a/packages/types/src/waitlist.ts
+++ b/packages/types/src/waitlist.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export interface IWebWaitListResponse {
   status: string;
 }
diff --git a/packages/types/src/webhook.ts b/packages/types/src/webhook.ts
index 1a08ee89d..357dcbc5b 100644
--- a/packages/types/src/webhook.ts
+++ b/packages/types/src/webhook.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export interface IWebhook {
   created_at: string;
   cycle: boolean;
diff --git a/packages/types/src/workspace-draft-issues/base.ts b/packages/types/src/workspace-draft-issues/base.ts
index 30185a0b0..65402c489 100644
--- a/packages/types/src/workspace-draft-issues/base.ts
+++ b/packages/types/src/workspace-draft-issues/base.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { TIssuePriorities } from "../issues";
 
 export type TWorkspaceDraftIssue = {
diff --git a/packages/types/src/workspace-notifications.ts b/packages/types/src/workspace-notifications.ts
index d9994f17a..e9f0a68d6 100644
--- a/packages/types/src/workspace-notifications.ts
+++ b/packages/types/src/workspace-notifications.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { ENotificationFilterType } from "./enums";
 import type { IUserLite } from "./users";
 
diff --git a/packages/types/src/workspace-views.ts b/packages/types/src/workspace-views.ts
index 924d2e19d..1a9a2c43e 100644
--- a/packages/types/src/workspace-views.ts
+++ b/packages/types/src/workspace-views.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type {
   IWorkspaceViewProps,
   IIssueDisplayFilterOptions,
diff --git a/packages/types/src/workspace.ts b/packages/types/src/workspace.ts
index aee3c3f34..fe2a410f6 100644
--- a/packages/types/src/workspace.ts
+++ b/packages/types/src/workspace.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { TPaginationInfo } from "./common";
 import type { ICycle } from "./cycle";
 import type { TUserPermissions } from "./enums";
@@ -27,6 +33,7 @@ export interface IWorkspace {
   organization_size: string;
   total_projects?: number;
   role: number;
+  timezone: string;
 }
 
 export interface IWorkspaceLite {
@@ -228,7 +235,7 @@ export interface IWorkspaceProgressResponse {
   unstarted_issues: number;
 }
 export interface IWorkspaceAnalyticsResponse {
-  completion_chart: any;
+  completion_chart: Record<string, unknown>;
 }
 
 export type TWorkspacePaginationInfo = TPaginationInfo & {
diff --git a/packages/typescript-config/package.json b/packages/typescript-config/package.json
index 30aa8ea7c..4fc7797f5 100644
--- a/packages/typescript-config/package.json
+++ b/packages/typescript-config/package.json
@@ -1,8 +1,8 @@
 {
   "name": "@plane/typescript-config",
-  "version": "1.2.3",
-  "license": "AGPL-3.0",
+  "version": "1.3.0",
   "private": true,
+  "license": "AGPL-3.0",
   "files": [
     "base.json",
     "nextjs.json",
diff --git a/packages/ui/.storybook/main.ts b/packages/ui/.storybook/main.ts
index c5762d3ea..9fd0c6c46 100644
--- a/packages/ui/.storybook/main.ts
+++ b/packages/ui/.storybook/main.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { StorybookConfig } from "@storybook/react-webpack5";
 
 import { join, dirname } from "path";
diff --git a/packages/ui/.storybook/preview.ts b/packages/ui/.storybook/preview.ts
index 20d53eaff..77e839471 100644
--- a/packages/ui/.storybook/preview.ts
+++ b/packages/ui/.storybook/preview.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { Preview } from "@storybook/react";
 import "../styles/output.css";
 const preview: Preview = {
diff --git a/packages/ui/package.json b/packages/ui/package.json
index cc799f5bc..5801ff705 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -1,38 +1,31 @@
 {
   "name": "@plane/ui",
-  "description": "UI components shared across multiple apps internally",
+  "version": "1.3.0",
   "private": true,
-  "version": "1.2.3",
-  "sideEffects": false,
+  "description": "UI components shared across multiple apps internally",
   "license": "AGPL-3.0",
   "type": "module",
+  "sideEffects": false,
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js"
-    },
+    ".": "./dist/index.js",
     "./package.json": "./package.json"
   },
   "scripts": {
     "build": "tsdown",
-    "dev": "tsdown --watch",
+    "dev": "tsdown --watch --no-clean",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "postcss": "postcss styles/globals.css -o styles/output.css --watch",
-    "check:lint": "eslint . --max-warnings=643",
+    "check:lint": "oxlint --max-warnings=66 .",
     "check:types": "tsc --noEmit",
-    "check:format": "prettier --check .",
-    "fix:lint": "eslint . --fix --max-warnings=643",
-    "fix:format": "prettier --write .",
+    "check:format": "oxfmt --check .",
+    "fix:lint": "oxlint --fix .",
+    "fix:format": "oxfmt .",
     "clean": "rm -rf .turbo && rm -rf .next && rm -rf node_modules && rm -rf dist"
   },
-  "peerDependencies": {
-    "react": "catalog:",
-    "react-dom": "catalog:"
-  },
   "dependencies": {
     "@atlaskit/pragmatic-drag-and-drop": "catalog:",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "catalog:",
@@ -52,7 +45,7 @@
     "react-color": "^2.19.3",
     "react-day-picker": "9.5.0",
     "react-popper": "^2.3.0",
-    "tailwind-merge": "^2.0.0",
+    "tailwind-merge": "3.4.0",
     "use-font-face-observer": "^1.2.2"
   },
   "devDependencies": {
@@ -77,8 +70,12 @@
     "autoprefixer": "^10.4.19",
     "postcss-cli": "^11.0.0",
     "postcss-nested": "^6.0.1",
-    "storybook": "^8.1.1",
+    "storybook": "9.1.19",
     "tsdown": "catalog:",
     "typescript": "catalog:"
+  },
+  "peerDependencies": {
+    "react": "catalog:",
+    "react-dom": "catalog:"
   }
 }
diff --git a/packages/ui/postcss.config.js b/packages/ui/postcss.config.js
index 8a677108f..3ad28f15f 100644
--- a/packages/ui/postcss.config.js
+++ b/packages/ui/postcss.config.js
@@ -1 +1,3 @@
-module.exports = require("@plane/tailwind-config/postcss.config.js");
+import postcssConfig from "@plane/tailwind-config/postcss.config.js";
+
+export default postcssConfig;
diff --git a/packages/ui/src/auth-form/auth-confirm-password-input.tsx b/packages/ui/src/auth-form/auth-confirm-password-input.tsx
index fbc2fe390..04acdac7f 100644
--- a/packages/ui/src/auth-form/auth-confirm-password-input.tsx
+++ b/packages/ui/src/auth-form/auth-confirm-password-input.tsx
@@ -1,11 +1,14 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React, { useState } from "react";
 import { cn } from "@plane/utils";
 import { AuthInput } from "./auth-input";
 
-export interface AuthConfirmPasswordInputProps extends Omit<
-  React.InputHTMLAttributes<HTMLInputElement>,
-  "autoComplete"
-> {
+export type TAuthConfirmPasswordInputProps = React.InputHTMLAttributes<HTMLInputElement> & {
   password: string;
   label?: string;
   error?: string;
@@ -13,9 +16,8 @@ export interface AuthConfirmPasswordInputProps extends Omit<
   containerClassName?: string;
   labelClassName?: string;
   errorClassName?: string;
-  autoComplete?: "on" | "off";
   onPasswordMatchChange?: (matches: boolean) => void;
-}
+};
 
 export function AuthConfirmPasswordInput({
   password,
@@ -29,7 +31,7 @@ export function AuthConfirmPasswordInput({
   onChange,
   onPasswordMatchChange,
   ...props
-}: AuthConfirmPasswordInputProps) {
+}: TAuthConfirmPasswordInputProps) {
   const [isFocused, setIsFocused] = useState(false);
 
   const confirmPassword = value as string;
@@ -71,9 +73,9 @@ export function AuthConfirmPasswordInput({
         onChange={handleChange}
         onFocus={handleFocus}
         onBlur={handleBlur}
-        autoComplete="on"
+        autoComplete="off"
       />
-      {confirmPassword && passwordsMatch && <p className="text-sm text-green-500">Passwords match</p>}
+      {confirmPassword && passwordsMatch && <p className="text-13 text-success-primary">Passwords match</p>}
     </div>
   );
 }
diff --git a/packages/ui/src/auth-form/auth-forgot-password.tsx b/packages/ui/src/auth-form/auth-forgot-password.tsx
index 23ade0668..c0b99c448 100644
--- a/packages/ui/src/auth-form/auth-forgot-password.tsx
+++ b/packages/ui/src/auth-form/auth-forgot-password.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 import { cn } from "../utils";
 
@@ -27,9 +33,9 @@ export function AuthForgotPassword({
       onClick={handleClick}
       disabled={disabled}
       className={cn(
-        "text-sm text-custom-primary-100 hover:text-custom-primary-200 transition-colors duration-200",
+        "text-13 text-accent-primary transition-colors duration-200 hover:text-accent-secondary",
         {
-          "opacity-50 cursor-not-allowed": disabled,
+          "cursor-not-allowed opacity-50": disabled,
           "cursor-pointer": !disabled,
         },
         className
diff --git a/packages/ui/src/auth-form/auth-form.tsx b/packages/ui/src/auth-form/auth-form.tsx
index 524daeb63..a53489743 100644
--- a/packages/ui/src/auth-form/auth-form.tsx
+++ b/packages/ui/src/auth-form/auth-form.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React, { useState, useMemo } from "react";
 import { E_PASSWORD_STRENGTH } from "@plane/constants";
 import { Button } from "../button/button";
@@ -190,11 +196,11 @@ export function AuthForm({
         {/* Alternate Mode Button */}
         {onModeChange && (
           <div className="text-center">
-            <span className="text-sm text-custom-text-300">{getAlternateModeText()}</span>
+            <span className="text-13 text-tertiary">{getAlternateModeText()}</span>
             <button
               type="button"
               onClick={handleModeChange}
-              className="ml-1 text-sm text-custom-primary-100 hover:text-custom-primary-200 transition-colors duration-200"
+              className="ml-1 text-13 text-accent-primary transition-colors duration-200 hover:text-accent-secondary"
               disabled={disabled}
             >
               {getAlternateModeButtonText()}
diff --git a/packages/ui/src/auth-form/auth-input.tsx b/packages/ui/src/auth-form/auth-input.tsx
index 36d36674a..5ae0b2ad1 100644
--- a/packages/ui/src/auth-form/auth-input.tsx
+++ b/packages/ui/src/auth-form/auth-input.tsx
@@ -1,15 +1,20 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { Eye, EyeOff } from "lucide-react";
 import React, { useState } from "react";
 import { Input } from "../form-fields/input";
 import { cn } from "../utils";
 
-export interface AuthInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "autoComplete"> {
+export type TAuthInputProps = React.InputHTMLAttributes<HTMLInputElement> & {
   label?: string;
   error?: string;
   showPasswordToggle?: boolean;
   errorClassName?: string;
-  autoComplete?: "on" | "off";
-}
+};
 
 const baseContainerClassName = "flex flex-col gap-1.5";
 
@@ -20,8 +25,9 @@ export function AuthInput({
   errorClassName = "",
   className = "",
   type = "text",
+  autoComplete = "off",
   ...props
-}: AuthInputProps) {
+}: TAuthInputProps) {
   const { id } = props;
   const [showPassword, setShowPassword] = useState(false);
   const isPasswordType = type === "password";
@@ -31,20 +37,19 @@ export function AuthInput({
   return (
     <div className={cn(baseContainerClassName)}>
       {label && (
-        <label htmlFor={id} className={cn("text-sm font-semibold text-custom-text-300")}>
+        <label htmlFor={id} className={cn("text-13 font-semibold text-tertiary")}>
           {label}
         </label>
       )}
-      <div
-        className={cn("relative flex items-center rounded-md border border-custom-border-300 py-2 px-3 transition-all")}
-      >
+      <div className={cn("relative flex items-center rounded-md border border-strong px-3 py-2 transition-all")}>
         <Input
           {...props}
           type={inputType}
+          autoComplete={autoComplete}
           className={cn(
-            "rounded-md disable-autofill-style h-6 w-full placeholder:text-base placeholder:text-custom-text-400 p-0 border-none",
+            "h-6 w-full rounded-md border-none p-0 disable-autofill-style placeholder:text-14 placeholder:text-placeholder",
             {
-              "border-red-500": error,
+              "border-danger-strong": error,
             },
             className
           )}
@@ -53,14 +58,14 @@ export function AuthInput({
           <button
             type="button"
             onClick={() => setShowPassword(!showPassword)}
-            className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
+            className="absolute right-3 h-5 w-5 stroke-placeholder hover:cursor-pointer"
           >
             {showPassword ? <EyeOff className="h-5 w-5" /> : <Eye className="h-5 w-5" />}
           </button>
         )}
       </div>
 
-      {error && <p className={cn("text-sm text-red-500", errorClassName)}>{error}</p>}
+      {error && <p className={cn("text-13 text-danger-primary", errorClassName)}>{error}</p>}
     </div>
   );
 }
diff --git a/packages/ui/src/auth-form/auth-password-input.tsx b/packages/ui/src/auth-form/auth-password-input.tsx
index 184137981..ab769c197 100644
--- a/packages/ui/src/auth-form/auth-password-input.tsx
+++ b/packages/ui/src/auth-form/auth-password-input.tsx
@@ -1,20 +1,25 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React, { useState } from "react";
 import type { E_PASSWORD_STRENGTH } from "@plane/constants";
 import { cn, getPasswordStrength } from "@plane/utils";
 import { PasswordStrengthIndicator } from "../form-fields/password/indicator";
 import { AuthInput } from "./auth-input";
 
-export interface AuthPasswordInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "autoComplete"> {
+export type TAuthPasswordInputProps = React.InputHTMLAttributes<HTMLInputElement> & {
   label?: string;
   error?: string;
   showPasswordStrength?: boolean;
   showPasswordToggle?: boolean;
   containerClassName?: string;
   errorClassName?: string;
-  autoComplete?: "on" | "off";
   onPasswordChange?: (password: string) => void;
   onPasswordStrengthChange?: (strength: E_PASSWORD_STRENGTH) => void;
-}
+};
 
 export function AuthPasswordInput({
   label = "Password",
@@ -29,7 +34,7 @@ export function AuthPasswordInput({
   onPasswordChange,
   onPasswordStrengthChange,
   ...props
-}: AuthPasswordInputProps) {
+}: TAuthPasswordInputProps) {
   const [isFocused, setIsFocused] = useState(false);
 
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -67,7 +72,7 @@ export function AuthPasswordInput({
         onChange={handleChange}
         onFocus={handleFocus}
         onBlur={handleBlur}
-        autoComplete="on"
+        autoComplete="off"
       />
       {showPasswordStrength && value && isFocused && (
         <PasswordStrengthIndicator password={value as string} showCriteria />
diff --git a/packages/ui/src/auth-form/index.ts b/packages/ui/src/auth-form/index.ts
index 3f28ac110..abad5c553 100644
--- a/packages/ui/src/auth-form/index.ts
+++ b/packages/ui/src/auth-form/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export { AuthForm } from "./auth-form";
 export { AuthInput } from "./auth-input";
 export { AuthPasswordInput } from "./auth-password-input";
@@ -5,7 +11,7 @@ export { AuthConfirmPasswordInput } from "./auth-confirm-password-input";
 export { AuthForgotPassword } from "./auth-forgot-password";
 
 export type { AuthFormProps, AuthFormData, AuthMode } from "./auth-form";
-export type { AuthInputProps } from "./auth-input";
-export type { AuthPasswordInputProps } from "./auth-password-input";
-export type { AuthConfirmPasswordInputProps } from "./auth-confirm-password-input";
+export type { TAuthInputProps } from "./auth-input";
+export type { TAuthPasswordInputProps } from "./auth-password-input";
+export type { TAuthConfirmPasswordInputProps } from "./auth-confirm-password-input";
 export type { AuthForgotPasswordProps } from "./auth-forgot-password";
diff --git a/packages/ui/src/avatar/avatar-group.tsx b/packages/ui/src/avatar/avatar-group.tsx
index 2be8e0206..963d4400d 100644
--- a/packages/ui/src/avatar/avatar-group.tsx
+++ b/packages/ui/src/avatar/avatar-group.tsx
@@ -1,11 +1,17 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 // ui
 import { Tooltip } from "@plane/propel/tooltip";
 // helpers
 import { cn } from "../utils";
 // types
-import type { TAvatarSize } from "./avatar";
-import { getSizeInfo, isAValidNumber } from "./avatar";
+import type { TAvatarSize } from "./helper";
+import { getSizeInfo, isAValidNumber } from "./helper";
 
 type Props = {
   /**
@@ -60,7 +66,7 @@ export function AvatarGroup(props: Props) {
   return (
     <div className={cn("flex", sizeInfo.spacing)}>
       {avatarsWithUpdatedProps.map((avatar, index) => (
-        <div key={index} className="rounded-full ring-1 ring-custom-background-100">
+        <div key={index} className="rounded-full border border-subtle-1">
           {avatar}
         </div>
       ))}
@@ -68,7 +74,7 @@ export function AvatarGroup(props: Props) {
         <Tooltip tooltipContent={`${totalAvatars} total`} disabled={!showTooltip}>
           <div
             className={cn(
-              "grid place-items-center rounded-full bg-custom-primary-10 text-[9px] text-custom-primary-100 ring-1 ring-custom-background-100",
+              "grid place-items-center rounded-full border border-subtle-1 bg-accent-subtle text-9 text-accent-primary",
               {
                 [sizeInfo.avatarSize]: !isAValidNumber(size),
               }
diff --git a/packages/ui/src/avatar/avatar.stories.tsx b/packages/ui/src/avatar/avatar.stories.tsx
index c3053cd73..9f96059f6 100644
--- a/packages/ui/src/avatar/avatar.stories.tsx
+++ b/packages/ui/src/avatar/avatar.stories.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { Meta, StoryObj } from "@storybook/react";
 import { Avatar } from "./avatar";
 
diff --git a/packages/ui/src/avatar/avatar.tsx b/packages/ui/src/avatar/avatar.tsx
index 3e4703837..7cc82712b 100644
--- a/packages/ui/src/avatar/avatar.tsx
+++ b/packages/ui/src/avatar/avatar.tsx
@@ -1,10 +1,15 @@
-import React from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // ui
 import { Tooltip } from "@plane/propel/tooltip";
 // helpers
 import { cn } from "../utils";
-
-export type TAvatarSize = "sm" | "md" | "base" | "lg" | number;
+import type { TAvatarSize } from "./helper";
+import { getBorderRadius, getSizeInfo, isAValidNumber } from "./helper";
 
 type Props = {
   /**
@@ -50,69 +55,6 @@ type Props = {
   className?: string;
 };
 
-/**
- * Get the size details based on the size prop
- * @param size The size of the avatar
- * @returns The size details
- */
-export const getSizeInfo = (size: TAvatarSize) => {
-  switch (size) {
-    case "sm":
-      return {
-        avatarSize: "h-4 w-4",
-        fontSize: "text-xs",
-        spacing: "-space-x-1",
-      };
-    case "md":
-      return {
-        avatarSize: "h-5 w-5",
-        fontSize: "text-xs",
-        spacing: "-space-x-1",
-      };
-    case "base":
-      return {
-        avatarSize: "h-6 w-6",
-        fontSize: "text-sm",
-        spacing: "-space-x-1.5",
-      };
-    case "lg":
-      return {
-        avatarSize: "h-7 w-7",
-        fontSize: "text-sm",
-        spacing: "-space-x-1.5",
-      };
-    default:
-      return {
-        avatarSize: "h-5 w-5",
-        fontSize: "text-xs",
-        spacing: "-space-x-1",
-      };
-  }
-};
-
-/**
- * Get the border radius based on the shape prop
- * @param shape The shape of the avatar
- * @returns The border radius
- */
-export const getBorderRadius = (shape: "circle" | "square") => {
-  switch (shape) {
-    case "circle":
-      return "rounded-full";
-    case "square":
-      return "rounded";
-    default:
-      return "rounded-full";
-  }
-};
-
-/**
- * Check if the value is a valid number
- * @param value The value to check
- * @returns Whether the value is a valid number or not
- */
-export const isAValidNumber = (value: any) => typeof value === "number" && !isNaN(value);
-
 export function Avatar(props: Props) {
   const {
     name,
diff --git a/packages/ui/src/avatar/helper.tsx b/packages/ui/src/avatar/helper.tsx
new file mode 100644
index 000000000..b72cbcc3e
--- /dev/null
+++ b/packages/ui/src/avatar/helper.tsx
@@ -0,0 +1,70 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export type TAvatarSize = "sm" | "md" | "base" | "lg" | number;
+
+/**
+ * Get the size details based on the size prop
+ * @param size The size of the avatar
+ * @returns The size details
+ */
+export const getSizeInfo = (size: TAvatarSize) => {
+  switch (size) {
+    case "sm":
+      return {
+        avatarSize: "h-4 w-4",
+        fontSize: "text-11",
+        spacing: "-space-x-1",
+      };
+    case "md":
+      return {
+        avatarSize: "h-5 w-5",
+        fontSize: "text-11",
+        spacing: "-space-x-1",
+      };
+    case "base":
+      return {
+        avatarSize: "h-6 w-6",
+        fontSize: "text-13",
+        spacing: "-space-x-1.5",
+      };
+    case "lg":
+      return {
+        avatarSize: "h-7 w-7",
+        fontSize: "text-13",
+        spacing: "-space-x-1.5",
+      };
+    default:
+      return {
+        avatarSize: "h-5 w-5",
+        fontSize: "text-11",
+        spacing: "-space-x-1",
+      };
+  }
+};
+
+/**
+ * Get the border radius based on the shape prop
+ * @param shape The shape of the avatar
+ * @returns The border radius
+ */
+export const getBorderRadius = (shape: "circle" | "square") => {
+  switch (shape) {
+    case "circle":
+      return "rounded-full";
+    case "square":
+      return "rounded-sm";
+    default:
+      return "rounded-full";
+  }
+};
+
+/**
+ * Check if the value is a valid number
+ * @param value The value to check
+ * @returns Whether the value is a valid number or not
+ */
+export const isAValidNumber = (value: unknown) => typeof value === "number" && !isNaN(value);
diff --git a/packages/ui/src/avatar/index.ts b/packages/ui/src/avatar/index.ts
index 3ccfbeca0..2fbdafee0 100644
--- a/packages/ui/src/avatar/index.ts
+++ b/packages/ui/src/avatar/index.ts
@@ -1,2 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./avatar-group";
 export * from "./avatar";
diff --git a/packages/ui/src/badge/badge.tsx b/packages/ui/src/badge/badge.tsx
index 7f1cca1c4..dc33ae9e0 100644
--- a/packages/ui/src/badge/badge.tsx
+++ b/packages/ui/src/badge/badge.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 // helpers
 import { cn } from "../utils";
diff --git a/packages/ui/src/badge/helper.tsx b/packages/ui/src/badge/helper.tsx
index 31f18aef7..b4adf5a8d 100644
--- a/packages/ui/src/badge/helper.tsx
+++ b/packages/ui/src/badge/helper.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export type TBadgeVariant =
   | "primary"
   | "accent-primary"
@@ -27,10 +33,10 @@ export interface IBadgeStyling {
 
 // TODO: convert them to objects instead of enums
 enum badgeSizeStyling {
-  sm = `px-2.5 py-1 font-medium text-xs rounded flex items-center gap-1.5 whitespace-nowrap transition-all justify-center inline`,
-  md = `px-4 py-1.5 font-medium text-sm rounded flex items-center gap-1.5 whitespace-nowrap transition-all justify-center inline`,
-  lg = `px-4 py-2 font-medium text-sm rounded flex items-center gap-1.5 whitespace-nowrap transition-all justify-center inline`,
-  xl = `px-5 py-3 font-medium text-sm rounded flex items-center gap-1.5 whitespace-nowrap transition-all justify-center inline`,
+  sm = `px-2.5 py-1 font-medium text-11 rounded-sm flex items-center gap-1.5 whitespace-nowrap transition-all justify-center inline`,
+  md = `px-4 py-1.5 font-medium text-13 rounded-sm flex items-center gap-1.5 whitespace-nowrap transition-all justify-center inline`,
+  lg = `px-4 py-2 font-medium text-13 rounded-sm flex items-center gap-1.5 whitespace-nowrap transition-all justify-center inline`,
+  xl = `px-5 py-3 font-medium text-13 rounded-sm flex items-center gap-1.5 whitespace-nowrap transition-all justify-center inline`,
 }
 
 // TODO: convert them to objects instead of enums
@@ -44,55 +50,55 @@ enum badgeIconStyling {
 
 export const badgeStyling: IBadgeStyling = {
   primary: {
-    default: `text-white bg-custom-primary-100`,
-    hover: `hover:bg-custom-primary-200`,
+    default: `text-on-color bg-accent-primary`,
+    hover: `hover:bg-accent-primary/80`,
     disabled: `cursor-not-allowed !bg-custom-primary-60 hover:bg-custom-primary-60`,
   },
   "accent-primary": {
-    default: `bg-custom-primary-10 text-custom-primary-100`,
-    hover: `hover:bg-custom-primary-20 hover:text-custom-primary-200`,
-    disabled: `cursor-not-allowed !text-custom-primary-60`,
+    default: `bg-accent-subtle text-accent-primary`,
+    hover: `hover:bg-custom-primary-20 hover:text-accent-secondary`,
+    disabled: `cursor-not-allowed !text-accent-primary/60`,
   },
   "outline-primary": {
-    default: `text-custom-primary-100 bg-custom-background-100 border border-custom-primary-100`,
-    hover: `hover:border-custom-primary-80 hover:bg-custom-primary-10`,
-    disabled: `cursor-not-allowed !text-custom-primary-60 !border-custom-primary-60 `,
+    default: `text-accent-primary bg-surface-1 border border-accent-strong`,
+    hover: `hover:border-accent-strong-80 hover:bg-accent-subtle`,
+    disabled: `cursor-not-allowed !text-accent-primary/60 !border-accent-strong-60 `,
   },
 
   neutral: {
-    default: `text-custom-background-100 bg-custom-text-100 border border-custom-border-200`,
-    hover: `hover:bg-custom-text-200`,
-    disabled: `cursor-not-allowed bg-custom-border-200 !text-custom-text-400`,
+    default: `text-custom-background-100 bg-layer-1 border border-subtle`,
+    hover: `hover:bg-layer-1`,
+    disabled: `cursor-not-allowed bg-subtle-1 !text-placeholder`,
   },
   "accent-neutral": {
-    default: `text-custom-text-200 bg-custom-background-80`,
-    hover: `hover:bg-custom-border-200 hover:text-custom-text-100`,
-    disabled: `cursor-not-allowed !text-custom-text-400`,
+    default: `text-secondary bg-layer-1`,
+    hover: `hover:bg-subtle-1 hover:text-primary`,
+    disabled: `cursor-not-allowed !text-placeholder`,
   },
   "outline-neutral": {
-    default: `text-custom-text-200 bg-custom-background-100 border border-custom-border-200`,
-    hover: `hover:text-custom-text-100 hover:bg-custom-border-200`,
-    disabled: `cursor-not-allowed !text-custom-text-400`,
+    default: `text-secondary bg-surface-1 border border-subtle`,
+    hover: `hover:text-primary hover:bg-subtle-1`,
+    disabled: `cursor-not-allowed !text-placeholder`,
   },
 
   success: {
-    default: `text-white bg-green-500`,
+    default: `text-on-color bg-green-500`,
     hover: `hover:bg-green-600`,
     disabled: `cursor-not-allowed !bg-green-300`,
   },
   "accent-success": {
-    default: `text-green-500 bg-green-50`,
-    hover: `hover:bg-green-100 hover:text-green-600`,
-    disabled: `cursor-not-allowed !text-green-300`,
+    default: `text-success-primary bg-green-50`,
+    hover: `hover:bg-green-100 hover:text-success-primary`,
+    disabled: `cursor-not-allowed text-success-secondary!`,
   },
   "outline-success": {
-    default: `text-green-500 bg-custom-background-100 border border-green-500`,
-    hover: `hover:text-green-600 hover:bg-green-50`,
-    disabled: `cursor-not-allowed !text-green-300 border-green-300`,
+    default: `text-success-primary bg-surface-1 border border-success-strong`,
+    hover: `hover:text-success-primary hover:bg-green-50`,
+    disabled: `cursor-not-allowed text-success-secondary! border-success-subtle`,
   },
 
   warning: {
-    default: `text-white bg-amber-500`,
+    default: `text-on-color bg-amber-500`,
     hover: `hover:bg-amber-600`,
     disabled: `cursor-not-allowed !bg-amber-300`,
   },
@@ -102,25 +108,25 @@ export const badgeStyling: IBadgeStyling = {
     disabled: `cursor-not-allowed !text-amber-300`,
   },
   "outline-warning": {
-    default: `text-amber-500 bg-custom-background-100 border border-amber-500`,
+    default: `text-amber-500 bg-surface-1 border border-amber-500`,
     hover: `hover:text-amber-600 hover:bg-amber-50`,
     disabled: `cursor-not-allowed !text-amber-300 border-amber-300`,
   },
 
   destructive: {
-    default: `text-white bg-red-500`,
+    default: `text-on-color bg-red-500`,
     hover: `hover:bg-red-600`,
     disabled: `cursor-not-allowed !bg-red-300`,
   },
   "accent-destructive": {
-    default: `text-red-500 bg-red-50`,
-    hover: `hover:bg-red-100 hover:text-red-600`,
-    disabled: `cursor-not-allowed !text-red-300`,
+    default: `text-danger-primary bg-red-50`,
+    hover: `hover:bg-red-100 hover:text-danger-primary`,
+    disabled: `cursor-not-allowed text-danger-secondary!`,
   },
   "outline-destructive": {
-    default: `text-red-500 bg-custom-background-100 border border-red-500`,
-    hover: `hover:text-red-600 hover:bg-red-50`,
-    disabled: `cursor-not-allowed !text-red-300 border-red-300`,
+    default: `text-danger-primary bg-surface-1 border border-danger-strong`,
+    hover: `hover:text-danger-primary hover:bg-red-50`,
+    disabled: `cursor-not-allowed text-danger-secondary! border-danger-subtle`,
   },
 };
 
diff --git a/packages/ui/src/badge/index.ts b/packages/ui/src/badge/index.ts
index 80844a4e3..87b72e5f6 100644
--- a/packages/ui/src/badge/index.ts
+++ b/packages/ui/src/badge/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./badge";
diff --git a/packages/ui/src/billing/index.ts b/packages/ui/src/billing/index.ts
deleted file mode 100644
index 75c2cf410..000000000
--- a/packages/ui/src/billing/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./subscription";
diff --git a/packages/ui/src/billing/subscription.ts b/packages/ui/src/billing/subscription.ts
deleted file mode 100644
index 98c03d337..000000000
--- a/packages/ui/src/billing/subscription.ts
+++ /dev/null
@@ -1,209 +0,0 @@
-// plane imports
-import { EProductSubscriptionEnum } from "@plane/types";
-import { cn } from "@plane/utils";
-
-export const getSubscriptionTextColor = (
-  planVariant: EProductSubscriptionEnum,
-  shade: "200" | "400" = "200"
-): string => {
-  const subscriptionColors = {
-    [EProductSubscriptionEnum.ONE]: {
-      "200": "text-custom-subscription-one-200",
-      "400": "text-custom-subscription-one-400",
-    },
-    [EProductSubscriptionEnum.PRO]: {
-      "200": "text-custom-subscription-pro-200",
-      "400": "text-custom-subscription-pro-400",
-    },
-    [EProductSubscriptionEnum.BUSINESS]: {
-      "200": "text-custom-subscription-business-200",
-      "400": "text-custom-subscription-business-400",
-    },
-    [EProductSubscriptionEnum.ENTERPRISE]: {
-      "200": "text-custom-subscription-enterprise-200",
-      "400": "text-custom-subscription-enterprise-400",
-    },
-    [EProductSubscriptionEnum.FREE]: {
-      "200": "text-custom-subscription-free-200",
-      "400": "text-custom-subscription-free-400",
-    },
-  };
-
-  return subscriptionColors[planVariant]?.[shade] ?? subscriptionColors[EProductSubscriptionEnum.FREE][shade];
-};
-
-export const getSubscriptionBackgroundColor = (
-  planVariant: EProductSubscriptionEnum,
-  shade: "50" | "100" | "200" | "400" = "100"
-): string => {
-  const subscriptionColors = {
-    [EProductSubscriptionEnum.ONE]: {
-      "50": "bg-custom-subscription-one-200/10",
-      "100": "bg-custom-subscription-one-200/20",
-      "200": "bg-custom-subscription-one-200",
-      "400": "bg-custom-subscription-one-400",
-    },
-    [EProductSubscriptionEnum.PRO]: {
-      "50": "bg-custom-subscription-pro-200/10",
-      "100": "bg-custom-subscription-pro-200/20",
-      "200": "bg-custom-subscription-pro-200",
-      "400": "bg-custom-subscription-pro-400",
-    },
-    [EProductSubscriptionEnum.BUSINESS]: {
-      "50": "bg-custom-subscription-business-200/10",
-      "100": "bg-custom-subscription-business-200/20",
-      "200": "bg-custom-subscription-business-200",
-      "400": "bg-custom-subscription-business-400",
-    },
-    [EProductSubscriptionEnum.ENTERPRISE]: {
-      "50": "bg-custom-subscription-enterprise-200/10",
-      "100": "bg-custom-subscription-enterprise-200/20",
-      "200": "bg-custom-subscription-enterprise-200",
-      "400": "bg-custom-subscription-enterprise-400",
-    },
-    [EProductSubscriptionEnum.FREE]: {
-      "50": "bg-custom-subscription-free-200/10",
-      "100": "bg-custom-subscription-free-200/20",
-      "200": "bg-custom-subscription-free-200",
-      "400": "bg-custom-subscription-free-400",
-    },
-  };
-
-  return subscriptionColors[planVariant]?.[shade] ?? subscriptionColors[EProductSubscriptionEnum.FREE][shade];
-};
-
-export const getSubscriptionBorderColor = (
-  planVariant: EProductSubscriptionEnum,
-  shade: "200" | "400" = "200"
-): string => {
-  const subscriptionColors = {
-    [EProductSubscriptionEnum.ONE]: {
-      "200": "border-custom-subscription-one-200",
-      "400": "border-custom-subscription-one-400",
-    },
-    [EProductSubscriptionEnum.PRO]: {
-      "200": "border-custom-subscription-pro-200",
-      "400": "border-custom-subscription-pro-400",
-    },
-    [EProductSubscriptionEnum.BUSINESS]: {
-      "200": "border-custom-subscription-business-200",
-      "400": "border-custom-subscription-business-400",
-    },
-    [EProductSubscriptionEnum.ENTERPRISE]: {
-      "200": "border-custom-subscription-enterprise-200",
-      "400": "border-custom-subscription-enterprise-400",
-    },
-    [EProductSubscriptionEnum.FREE]: {
-      "200": "border-custom-subscription-free-200",
-      "400": "border-custom-subscription-free-400",
-    },
-    default: "border-custom-subscription-free-400",
-  };
-
-  return subscriptionColors[planVariant]?.[shade] ?? subscriptionColors.default;
-};
-
-export const getUpgradeButtonStyle = (
-  planVariant: EProductSubscriptionEnum,
-  isDisabled: boolean
-): string | undefined => {
-  const baseClassNames = "border bg-custom-background-100";
-  const hoverClassNames = !isDisabled ? "hover:text-white hover:bg-gradient-to-br" : "";
-  const disabledClassNames = isDisabled ? "opacity-70 cursor-not-allowed" : "";
-
-  const COMMON_CLASSNAME = cn(baseClassNames, hoverClassNames, disabledClassNames);
-
-  switch (planVariant) {
-    case EProductSubscriptionEnum.ENTERPRISE:
-      return cn(
-        "text-custom-subscription-enterprise-200 from-custom-subscription-enterprise-200 to-custom-subscription-enterprise-400",
-        getSubscriptionBorderColor(planVariant, "200"),
-        COMMON_CLASSNAME
-      );
-    case EProductSubscriptionEnum.BUSINESS:
-      return cn(
-        "text-custom-subscription-business-200 from-custom-subscription-business-200 to-custom-subscription-business-400",
-        getSubscriptionBorderColor(planVariant, "200"),
-        COMMON_CLASSNAME
-      );
-    case EProductSubscriptionEnum.PRO:
-      return cn(
-        "text-custom-subscription-pro-200 from-custom-subscription-pro-200 to-custom-subscription-pro-400",
-        getSubscriptionBorderColor(planVariant, "200"),
-        COMMON_CLASSNAME
-      );
-    case EProductSubscriptionEnum.ONE:
-      return cn(
-        "text-custom-subscription-one-200 from-custom-subscription-one-200 to-custom-subscription-one-400",
-        getSubscriptionBorderColor(planVariant, "200"),
-        COMMON_CLASSNAME
-      );
-    case EProductSubscriptionEnum.FREE:
-    default:
-      return cn(
-        "text-custom-subscription-free-200 from-custom-subscription-free-200 to-custom-subscription-free-400",
-        getSubscriptionBorderColor(planVariant, "200"),
-        COMMON_CLASSNAME
-      );
-  }
-};
-
-export const getUpgradeCardVariantStyle = (planVariant: EProductSubscriptionEnum): string | undefined => {
-  const COMMON_CLASSNAME = cn("bg-gradient-to-b from-0% to-40% border border-custom-border-200 rounded-xl");
-
-  switch (planVariant) {
-    case EProductSubscriptionEnum.ENTERPRISE:
-      return cn("from-custom-subscription-enterprise-200/[0.14] to-transparent", COMMON_CLASSNAME);
-    case EProductSubscriptionEnum.BUSINESS:
-      return cn("from-custom-subscription-business-200/[0.14] to-transparent", COMMON_CLASSNAME);
-    case EProductSubscriptionEnum.PRO:
-      return cn("from-custom-subscription-pro-200/[0.14] to-transparent", COMMON_CLASSNAME);
-    case EProductSubscriptionEnum.ONE:
-      return cn("from-custom-subscription-one-200/[0.14] to-transparent", COMMON_CLASSNAME);
-    case EProductSubscriptionEnum.FREE:
-    default:
-      return cn("from-custom-subscription-free-200/[0.14] to-transparent", COMMON_CLASSNAME);
-  }
-};
-
-export const getSuccessModalVariantStyle = (planVariant: EProductSubscriptionEnum) => {
-  const COMMON_CLASSNAME = cn("bg-gradient-to-b from-0% to-30% rounded-2xl");
-
-  switch (planVariant) {
-    case EProductSubscriptionEnum.ENTERPRISE:
-      return cn("from-custom-subscription-enterprise-200/[0.14] to-transparent", COMMON_CLASSNAME);
-    case EProductSubscriptionEnum.BUSINESS:
-      return cn("from-custom-subscription-business-200/[0.14] to-transparent", COMMON_CLASSNAME);
-    case EProductSubscriptionEnum.PRO:
-      return cn("from-custom-subscription-pro-200/[0.14] to-transparent", COMMON_CLASSNAME);
-    case EProductSubscriptionEnum.ONE:
-      return cn("from-custom-subscription-one-200/[0.14] to-transparent", COMMON_CLASSNAME);
-    case EProductSubscriptionEnum.FREE:
-    default:
-      return cn("from-custom-subscription-free-200/[0.14] to-transparent", COMMON_CLASSNAME);
-  }
-};
-
-export const getBillingAndPlansCardVariantStyle = (planVariant: EProductSubscriptionEnum) => {
-  const COMMON_CLASSNAME = cn("bg-gradient-to-b from-0% to-50%");
-
-  switch (planVariant) {
-    case EProductSubscriptionEnum.ENTERPRISE:
-      return cn("from-custom-subscription-enterprise-200/[0.14] to-transparent", COMMON_CLASSNAME);
-    case EProductSubscriptionEnum.BUSINESS:
-      return cn("from-custom-subscription-business-200/[0.14] to-transparent", COMMON_CLASSNAME);
-    case EProductSubscriptionEnum.PRO:
-      return cn("from-custom-subscription-pro-200/[0.14] to-transparent", COMMON_CLASSNAME);
-    case EProductSubscriptionEnum.ONE:
-      return cn("from-custom-subscription-one-200/[0.14] to-transparent", COMMON_CLASSNAME);
-    case EProductSubscriptionEnum.FREE:
-    default:
-      return cn("from-custom-subscription-free-200/[0.14] to-transparent", COMMON_CLASSNAME);
-  }
-};
-
-export const getSubscriptionTextAndBackgroundColor = (planVariant: EProductSubscriptionEnum) =>
-  cn(getSubscriptionTextColor(planVariant), getSubscriptionBackgroundColor(planVariant));
-
-export const getDiscountPillStyle = (planVariant: EProductSubscriptionEnum): string =>
-  cn(getSubscriptionBackgroundColor(planVariant, "200"), "text-white");
diff --git a/packages/ui/src/breadcrumbs/breadcrumbs.stories.tsx b/packages/ui/src/breadcrumbs/breadcrumbs.stories.tsx
index 7615c18a1..59a58b1ff 100644
--- a/packages/ui/src/breadcrumbs/breadcrumbs.stories.tsx
+++ b/packages/ui/src/breadcrumbs/breadcrumbs.stories.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { Meta, StoryObj } from "@storybook/react";
 import { Home, Settings, Briefcase, GridIcon, Layers2, FileIcon } from "lucide-react";
 import * as React from "react";
@@ -25,8 +31,8 @@ function BreadcrumbBlock(props: TBreadcrumbBlockProps) {
   return (
     <>
       <Breadcrumbs.ItemWrapper label={label} disableTooltip={disableTooltip}>
-        {icon && <div className="flex size-4 items-center justify-center overflow-hidden !text-[1rem]">{icon}</div>}
-        {label && <div className="relative line-clamp-1 block max-w-[150px] overflow-hidden truncate">{label}</div>}
+        {icon && <div className="flex size-4 items-center justify-center overflow-hidden !text-16">{icon}</div>}
+        {label && <div className="relative line-clamp-1 block max-w-[150px] truncate overflow-hidden">{label}</div>}
       </Breadcrumbs.ItemWrapper>
     </>
   );
@@ -66,7 +72,7 @@ export const WithCustomComponent: Story = {
         key="custom"
         component={
           <div className="flex items-center gap-2">
-            <span className="size-4 rounded-full bg-blue-500" />
+            <span className="bg-blue-500 size-4 rounded-full" />
             <span>Custom Component</span>
           </div>
         }
diff --git a/packages/ui/src/breadcrumbs/breadcrumbs.tsx b/packages/ui/src/breadcrumbs/breadcrumbs.tsx
index 7b058c8a3..0e9a555e5 100644
--- a/packages/ui/src/breadcrumbs/breadcrumbs.tsx
+++ b/packages/ui/src/breadcrumbs/breadcrumbs.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 import { ChevronRightIcon } from "@plane/propel/icons";
 import { Tooltip } from "@plane/propel/tooltip";
@@ -12,10 +18,10 @@ type BreadcrumbsProps = {
 
 export function BreadcrumbItemLoader() {
   return (
-    <div className="flex items-center gap-2 h-7 animate-pulse">
-      <div className="group h-full flex items-center gap-2 rounded px-2 py-1 text-sm font-medium">
-        <span className="h-full w-5 bg-custom-background-80 rounded" />
-        <span className="h-full w-16 bg-custom-background-80 rounded" />
+    <div className="flex h-7 animate-pulse items-center gap-2">
+      <div className="group flex h-full items-center gap-2 rounded-sm px-2 py-1 text-13 font-medium">
+        <span className="h-full w-5 rounded-sm bg-layer-1" />
+        <span className="h-full w-16 rounded-sm bg-layer-1" />
       </div>
     </div>
   );
@@ -37,7 +43,7 @@ function Breadcrumbs({ className, children, onBack, isLoading = false }: Breadcr
   const childrenArray = React.Children.toArray(children);
 
   return (
-    <div className={cn("flex items-center overflow-hidden gap-0.5 flex-grow", className)}>
+    <div className={cn("flex flex-grow items-center gap-0.5 overflow-hidden", className)}>
       {!isSmallScreen && (
         <>
           {childrenArray.map((child, index) => {
@@ -62,11 +68,11 @@ function Breadcrumbs({ className, children, onBack, isLoading = false }: Breadcr
         <>
           <div className="flex items-center gap-2.5 p-1">
             {onBack && (
-              <span onClick={onBack} className="text-custom-text-200">
+              <span onClick={onBack} className="text-secondary">
                 ...
               </span>
             )}
-            <ChevronRightIcon className="h-3.5 w-3.5 flex-shrink-0 text-custom-text-400" aria-hidden="true" />
+            <ChevronRightIcon className="h-3.5 w-3.5 flex-shrink-0 text-placeholder" aria-hidden="true" />
           </div>
           <div className="flex items-center gap-2.5 p-1">
             {isLoading ? (
@@ -96,7 +102,7 @@ type BreadcrumbItemProps = {
 function BreadcrumbItem(props: BreadcrumbItemProps) {
   const { component, showSeparator = true, isLast = false } = props;
   return (
-    <div className="flex items-center gap-0.5 h-6">
+    <div className="flex h-6 items-center gap-0.5">
       {component}
       {showSeparator && !isLast && <BreadcrumbSeparator />}
     </div>
@@ -123,7 +129,7 @@ type BreadcrumbLabelProps = {
 function BreadcrumbLabel(props: BreadcrumbLabelProps) {
   const { children, className } = props;
   return (
-    <div className={cn("relative line-clamp-1 block max-w-[150px] overflow-hidden truncate", className)}>
+    <div className={cn("relative line-clamp-1 block max-w-[150px] truncate overflow-hidden", className)}>
       {children}
     </div>
   );
@@ -140,11 +146,11 @@ type BreadcrumbSeparatorProps = {
 function BreadcrumbSeparator(props: BreadcrumbSeparatorProps) {
   const { className, containerClassName, iconClassName, showDivider = false } = props;
   return (
-    <div className={cn("relative flex items-center justify-center h-full px-1.5 py-1", className)}>
-      {showDivider && <span className="absolute -left-0.5 top-0 h-full w-[1.8px] bg-custom-background-100" />}
+    <div className={cn("relative flex h-full items-center justify-center px-1.5 py-1", className)}>
+      {showDivider && <span className="absolute top-0 -left-0.5 h-full w-[1.8px] bg-surface-1" />}
       <div
         className={cn(
-          "flex items-center justify-center flex-shrink-0 rounded text-custom-text-400 transition-all",
+          "flex flex-shrink-0 items-center justify-center rounded-sm text-placeholder transition-all",
           containerClassName
         )}
       >
@@ -170,9 +176,11 @@ function BreadcrumbItemWrapper(props: BreadcrumbItemWrapperProps) {
     <Tooltip tooltipContent={label} position="bottom" disabled={!label || label === "" || disableTooltip}>
       <div
         className={cn(
-          "group h-full flex items-center gap-2 rounded px-1.5 py-1 text-sm font-medium text-custom-text-300 cursor-default",
+          "group flex h-full cursor-default items-center gap-2 rounded-sm px-1.5 py-1 text-13 font-medium",
           {
-            "hover:text-custom-text-100 hover:bg-custom-background-90 cursor-pointer": type === "link" && !isLast,
+            "text-primary": isLast,
+            "text-tertiary": !isLast,
+            "cursor-pointer hover:bg-layer-transparent-hover hover:text-primary": type === "link" && !isLast,
           },
           className
         )}
diff --git a/packages/ui/src/breadcrumbs/index.ts b/packages/ui/src/breadcrumbs/index.ts
index 192bd5751..059e25917 100644
--- a/packages/ui/src/breadcrumbs/index.ts
+++ b/packages/ui/src/breadcrumbs/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./breadcrumbs";
 export * from "./navigation-dropdown";
 export * from "./navigation-search-dropdown";
diff --git a/packages/ui/src/breadcrumbs/navigation-dropdown.tsx b/packages/ui/src/breadcrumbs/navigation-dropdown.tsx
index 5929ee162..7b4b9b8ed 100644
--- a/packages/ui/src/breadcrumbs/navigation-dropdown.tsx
+++ b/packages/ui/src/breadcrumbs/navigation-dropdown.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { CheckIcon } from "lucide-react";
 import * as React from "react";
 // ui
@@ -39,14 +45,14 @@ export function BreadcrumbNavigationDropdown(props: TBreadcrumbNavigationDropdow
             }
           }}
           className={cn(
-            "group h-full flex items-center gap-2 px-1.5 py-1 text-sm font-medium text-custom-text-300 cursor-pointer rounded rounded-r-none",
+            "group flex h-full cursor-pointer items-center gap-2 rounded-sm rounded-r-none px-1.5 py-1 text-13 font-medium text-tertiary",
             {
-              "hover:bg-custom-background-80 hover:text-custom-text-100": !isLast,
+              "hover:bg-layer-1 hover:text-primary": !isLast,
             }
           )}
         >
-          <div className="flex @4xl:hidden text-custom-text-300">...</div>
-          <div className="hidden @4xl:flex gap-2">
+          <div className="flex text-tertiary @4xl:hidden">...</div>
+          <div className="hidden items-center gap-2 @4xl:flex">
             {selectedItemIcon && <Breadcrumbs.Icon>{selectedItemIcon}</Breadcrumbs.Icon>}
             <Breadcrumbs.Label>{selectedItem?.title}</Breadcrumbs.Label>
           </div>
@@ -65,13 +71,13 @@ export function BreadcrumbNavigationDropdown(props: TBreadcrumbNavigationDropdow
         <>
           <NavigationButton />
           <Breadcrumbs.Separator
-            className={cn("rounded-r", {
-              "bg-custom-background-80": isOpen && !isLast,
-              "hover:bg-custom-background-80": !isLast,
+            className={cn("rounded-r-sm", {
+              "bg-layer-1": isOpen && !isLast,
+              "hover:bg-layer-1": !isLast,
             })}
             containerClassName="p-0"
-            iconClassName={cn("group-hover:rotate-90 hover:text-custom-text-100", {
-              "text-custom-text-100": isOpen,
+            iconClassName={cn("group-hover:rotate-90 hover:text-primary", {
+              "text-primary": isOpen,
               "rotate-90": isOpen || isLast,
             })}
             showDivider={!isLast}
@@ -79,11 +85,11 @@ export function BreadcrumbNavigationDropdown(props: TBreadcrumbNavigationDropdow
         </>
       }
       placement="bottom-start"
-      className="h-full rounded"
+      className="h-full rounded-sm"
       customButtonClassName={cn(
-        "group flex items-center gap-0.5 rounded hover:bg-custom-background-90 outline-none cursor-pointer h-full rounded",
+        "group flex h-full cursor-pointer items-center gap-0.5 rounded-sm outline-none hover:bg-surface-2",
         {
-          "bg-custom-background-90": isOpen,
+          "bg-surface-2": isOpen,
         }
       )}
       closeOnSelect
@@ -108,7 +114,7 @@ export function BreadcrumbNavigationDropdown(props: TBreadcrumbNavigationDropdow
             className={cn(
               "flex items-center gap-2",
               {
-                "text-custom-text-400": item.disabled,
+                "text-placeholder": item.disabled,
               },
               item.className
             )}
@@ -119,15 +125,15 @@ export function BreadcrumbNavigationDropdown(props: TBreadcrumbNavigationDropdow
               <h5>{item.title}</h5>
               {item.description && (
                 <p
-                  className={cn("text-custom-text-300 whitespace-pre-line", {
-                    "text-custom-text-400": item.disabled,
+                  className={cn("whitespace-pre-line text-tertiary", {
+                    "text-placeholder": item.disabled,
                   })}
                 >
                   {item.description}
                 </p>
               )}
             </div>
-            {item.key === selectedItemKey && <CheckIcon className="flex-shrink-0 size-3.5" />}
+            {item.key === selectedItemKey && <CheckIcon className="size-3.5 flex-shrink-0" />}
           </CustomMenu.MenuItem>
         );
       })}
diff --git a/packages/ui/src/breadcrumbs/navigation-search-dropdown.tsx b/packages/ui/src/breadcrumbs/navigation-search-dropdown.tsx
index 7edc317f4..8f270e9fd 100644
--- a/packages/ui/src/breadcrumbs/navigation-search-dropdown.tsx
+++ b/packages/ui/src/breadcrumbs/navigation-search-dropdown.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 import { useState } from "react";
 import { Tooltip } from "@plane/propel/tooltip";
@@ -61,16 +67,16 @@ export function BreadcrumbNavigationSearchDropdown(props: TBreadcrumbNavigationS
                 }
               }}
               className={cn(
-                "group h-full flex items-center gap-2 px-1.5 py-1 text-sm font-medium text-custom-text-300 cursor-pointer rounded rounded-r-none",
+                "group flex h-full cursor-pointer items-center gap-2 rounded-sm rounded-r-none px-1.5 py-1 text-13 font-medium text-tertiary",
                 {
-                  "hover:bg-custom-background-80 hover:text-custom-text-100": !isLast,
+                  "hover:bg-layer-1 hover:text-primary": !isLast,
                 }
               )}
             >
-              {shouldTruncate && <div className="flex @4xl:hidden text-custom-text-300">...</div>}
+              {shouldTruncate && <div className="flex text-tertiary @4xl:hidden">...</div>}
               <div
                 className={cn("flex gap-2", {
-                  "hidden @4xl:flex gap-2": shouldTruncate,
+                  "hidden items-center gap-2 @4xl:flex": shouldTruncate,
                 })}
               >
                 {icon && <Breadcrumbs.Icon>{icon}</Breadcrumbs.Icon>}
@@ -79,13 +85,13 @@ export function BreadcrumbNavigationSearchDropdown(props: TBreadcrumbNavigationS
             </button>
           </Tooltip>
           <Breadcrumbs.Separator
-            className={cn("rounded-r", {
-              "bg-custom-background-80": isDropdownOpen && !isLast,
-              "hover:bg-custom-background-80": !isLast,
+            className={cn("rounded-r-sm", {
+              "bg-layer-1": isDropdownOpen && !isLast,
+              "hover:bg-layer-1": !isLast,
             })}
             containerClassName="p-0"
-            iconClassName={cn("group-hover:rotate-90 hover:text-custom-text-100", {
-              "text-custom-text-100": isDropdownOpen,
+            iconClassName={cn("group-hover:rotate-90 hover:text-primary", {
+              "text-primary": isDropdownOpen,
               "rotate-90": isDropdownOpen || isLast,
             })}
             showDivider={!isLast}
@@ -93,11 +99,11 @@ export function BreadcrumbNavigationSearchDropdown(props: TBreadcrumbNavigationS
         </>
       }
       disabled={navigationDisabled}
-      className="h-full rounded"
+      className="h-full rounded-sm"
       customButtonClassName={cn(
-        "group flex items-center gap-0.5 rounded hover:bg-custom-background-90 outline-none cursor-pointer h-full rounded",
+        "group flex h-full cursor-pointer items-center gap-0.5 rounded-sm outline-none hover:bg-surface-2",
         {
-          "bg-custom-background-90": isDropdownOpen,
+          "bg-surface-2": isDropdownOpen,
         }
       )}
     />
diff --git a/packages/ui/src/button/button.tsx b/packages/ui/src/button/button.tsx
index 1717d8a8a..086550766 100644
--- a/packages/ui/src/button/button.tsx
+++ b/packages/ui/src/button/button.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 
 import { cn } from "../utils";
diff --git a/packages/ui/src/button/helper.tsx b/packages/ui/src/button/helper.tsx
index 4a823aad7..95ac85164 100644
--- a/packages/ui/src/button/helper.tsx
+++ b/packages/ui/src/button/helper.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export type TButtonVariant =
   | "primary"
   | "accent-primary"
@@ -23,10 +29,10 @@ export interface IButtonStyling {
 }
 
 enum buttonSizeStyling {
-  sm = `px-3 py-1.5 font-medium text-xs rounded flex items-center gap-1.5 whitespace-nowrap transition-all justify-center`,
-  md = `px-4 py-1.5 font-medium text-sm rounded flex items-center gap-1.5 whitespace-nowrap transition-all justify-center`,
-  lg = `px-5 py-2 font-medium text-sm rounded flex items-center gap-1.5 whitespace-nowrap transition-all justify-center`,
-  xl = `px-5 py-3.5 font-medium text-sm rounded flex items-center gap-1.5 whitespace-nowrap transition-all justify-center`,
+  sm = `px-3 py-1.5 font-medium text-11 rounded-sm flex items-center gap-1.5 whitespace-nowrap transition-all justify-center`,
+  md = `px-4 py-1.5 font-medium text-13 rounded-sm flex items-center gap-1.5 whitespace-nowrap transition-all justify-center`,
+  lg = `px-5 py-2 font-medium text-13 rounded-sm flex items-center gap-1.5 whitespace-nowrap transition-all justify-center`,
+  xl = `px-5 py-3.5 font-medium text-13 rounded-sm flex items-center gap-1.5 whitespace-nowrap transition-all justify-center`,
 }
 
 enum buttonIconStyling {
@@ -38,71 +44,70 @@ enum buttonIconStyling {
 
 export const buttonStyling: IButtonStyling = {
   primary: {
-    default: `text-white bg-custom-primary-100`,
-    hover: `hover:bg-custom-primary-200`,
-    pressed: `focus:text-custom-brand-40 focus:bg-custom-primary-200`,
-    disabled: `cursor-not-allowed !bg-custom-primary-60 hover:bg-custom-primary-60`,
+    default: `text-on-color bg-accent-primary`,
+    hover: `hover:bg-accent-primary/80`,
+    pressed: `focus:text-custom-brand-40 focus:bg-accent-primary/80`,
+    disabled: `cursor-not-allowed !bg-layer-1 !text-on-color-disabled`,
   },
   "accent-primary": {
-    default: `bg-custom-primary-100/20 text-custom-primary-100`,
-    hover: `hover:bg-custom-primary-100/10 hover:text-custom-primary-200`,
-    pressed: `focus:bg-custom-primary-100/10`,
-    disabled: `cursor-not-allowed !text-custom-primary-60`,
+    default: `bg-accent-primary/20 text-accent-primary`,
+    hover: `hover:bg-accent-primary/10 hover:text-accent-secondary`,
+    pressed: `focus:bg-accent-primary/10`,
+    disabled: `cursor-not-allowed !text-accent-primary/60`,
   },
   "outline-primary": {
-    default: `text-custom-primary-100 bg-transparent border border-custom-primary-100`,
-    hover: `hover:bg-custom-primary-100/20`,
-    pressed: `focus:text-custom-primary-100 focus:bg-custom-primary-100/30`,
-    disabled: `cursor-not-allowed !text-custom-primary-60 !border-custom-primary-60 `,
+    default: `text-accent-primary bg-transparent border border-accent-strong`,
+    hover: `hover:bg-accent-primary/20`,
+    pressed: `focus:text-accent-primary focus:bg-accent-primary/30`,
+    disabled: `cursor-not-allowed !text-accent-primary/60 !border-accent-strong-60 `,
   },
   "neutral-primary": {
-    default: `text-custom-text-200 bg-custom-background-100 border border-custom-border-200`,
-    hover: `hover:bg-custom-background-90`,
-    pressed: `focus:text-custom-text-300 focus:bg-custom-background-90`,
-    disabled: `cursor-not-allowed !text-custom-text-400`,
+    default: `text-secondary bg-surface-1 border border-subtle`,
+    hover: `hover:bg-surface-2`,
+    pressed: `focus:text-tertiary focus:bg-surface-2`,
+    disabled: `cursor-not-allowed !bg-layer-1 !text-placeholder`,
   },
   "link-primary": {
-    default: `text-custom-primary-100 bg-custom-background-100`,
-    hover: `hover:text-custom-primary-200`,
-    pressed: `focus:text-custom-primary-80 `,
-    disabled: `cursor-not-allowed !text-custom-primary-60`,
+    default: `text-accent-primary bg-surface-1`,
+    hover: `hover:text-accent-secondary`,
+    pressed: `focus:text-accent-primary/80 `,
+    disabled: `cursor-not-allowed !text-accent-primary/60`,
   },
-
   danger: {
-    default: `text-white bg-red-500`,
-    hover: ` hover:bg-red-600`,
-    pressed: `focus:text-red-200 focus:bg-red-600`,
-    disabled: `cursor-not-allowed !bg-red-300`,
+    default: `bg-danger-primary text-on-color`,
+    hover: ` hover:bg-danger-primary-hover`,
+    pressed: `focus:bg-danger-primary-active`,
+    disabled: `cursor-not-allowed bg-layer-disabled! text-disabled!`,
   },
   "accent-danger": {
-    default: `text-red-500 bg-red-50`,
-    hover: `hover:text-red-600 hover:bg-red-100`,
-    pressed: `focus:text-red-500 focus:bg-red-100`,
-    disabled: `cursor-not-allowed !text-red-300`,
+    default: `text-danger-primary bg-red-50`,
+    hover: `hover:text-danger-primary hover:bg-red-100`,
+    pressed: `focus:text-danger-primary focus:bg-red-100`,
+    disabled: `cursor-not-allowed !bg-layer-1 !text-placeholder`,
   },
   "outline-danger": {
-    default: `text-red-500 bg-transparent border border-red-500`,
-    hover: `hover:text-red-400 hover:border-red-400`,
-    pressed: `focus:text-red-400 focus:border-red-400`,
-    disabled: `cursor-not-allowed !text-red-300 !border-red-300`,
+    default: `bg-layer-2 text-danger-primary border border-danger-strong`,
+    hover: `hover:bg-danger-subtle`,
+    pressed: `focus:bg-danger-subtle-hover`,
+    disabled: `cursor-not-allowed text-disabled! border-subtle-1!`,
   },
   "link-danger": {
-    default: `text-red-500 bg-custom-background-100`,
-    hover: `hover:text-red-400`,
-    pressed: `focus:text-red-400`,
-    disabled: `cursor-not-allowed !text-red-300`,
+    default: `text-danger-primary bg-surface-1`,
+    hover: `hover:text-danger-primary`,
+    pressed: `focus:text-danger-primary`,
+    disabled: `cursor-not-allowed !bg-layer-1 !text-placeholder`,
   },
   "tertiary-danger": {
-    default: `text-red-500 bg-custom-background-100 border border-red-200`,
-    hover: `hover:bg-red-50 hover:border-red-300`,
-    pressed: `focus:text-red-400`,
-    disabled: `cursor-not-allowed !text-red-300`,
+    default: `text-danger-primary bg-surface-1 border border-danger-subtle`,
+    hover: `hover:bg-red-50 hover:border-danger-subtle`,
+    pressed: `focus:text-danger-primary`,
+    disabled: `cursor-not-allowed !bg-layer-1 !text-placeholder`,
   },
   "link-neutral": {
-    default: `text-custom-text-300`,
-    hover: `hover:text-custom-text-200`,
-    pressed: `focus:text-custom-text-100`,
-    disabled: `cursor-not-allowed !text-custom-text-400`,
+    default: `text-tertiary`,
+    hover: `hover:text-secondary`,
+    pressed: `focus:text-primary`,
+    disabled: `cursor-not-allowed !bg-layer-1 !text-placeholder`,
   },
 };
 
diff --git a/packages/ui/src/button/index.ts b/packages/ui/src/button/index.ts
index d0c99205f..00e05841d 100644
--- a/packages/ui/src/button/index.ts
+++ b/packages/ui/src/button/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./button";
 export * from "./helper";
 export * from "./toggle-switch";
diff --git a/packages/ui/src/button/toggle-switch.tsx b/packages/ui/src/button/toggle-switch.tsx
index 5225b6356..1252b6323 100644
--- a/packages/ui/src/button/toggle-switch.tsx
+++ b/packages/ui/src/button/toggle-switch.tsx
@@ -1,5 +1,10 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { Switch } from "@headlessui/react";
-import * as React from "react";
 // helpers
 import { cn } from "../utils";
 
@@ -21,12 +26,14 @@ function ToggleSwitch(props: IToggleSwitchProps) {
       disabled={disabled}
       onChange={onChange}
       className={cn(
-        "relative inline-flex flex-shrink-0 h-6 w-10 cursor-pointer rounded-full border border-custom-border-200 transition-colors duration-200 ease-in-out focus:outline-none bg-gray-700",
+        "relative inline-flex h-6 w-10 flex-shrink-0 cursor-pointer rounded-full border border-subtle bg-layer-1 transition-colors duration-200 ease-in-out focus:outline-none",
         {
-          "h-4 w-6": size === "sm",
-          "h-5 w-8": size === "md",
-          "bg-custom-primary-100": value,
-          "cursor-not-allowed bg-custom-background-80": disabled,
+          "h-4 w-7": size === "sm",
+          "h-5 w-9": size === "md",
+          "bg-accent-primary": value && !disabled,
+          "bg-(--text-color-icon-placeholder)": !value && !disabled,
+          "cursor-not-allowed bg-accent-primary opacity-50": value && disabled,
+          "cursor-not-allowed bg-(--text-color-icon-placeholder) opacity-50": !value && disabled,
         },
         className
       )}
@@ -35,15 +42,14 @@ function ToggleSwitch(props: IToggleSwitchProps) {
       <span
         aria-hidden="true"
         className={cn(
-          "inline-block self-center h-4 w-4 transform rounded-full shadow ring-0 transition duration-200 ease-in-out",
+          "inline-block h-5 w-5 transform self-center rounded-full bg-(--text-color-icon-on-color) ring-0 transition duration-200 ease-in-out",
           {
-            "translate-x-5 bg-white": value,
-            "h-2 w-2": size === "sm",
-            "h-3 w-3": size === "md",
-            "translate-x-3": value && size === "sm",
-            "translate-x-4": value && size === "md",
-            "translate-x-0.5 bg-custom-background-90": !value,
-            "cursor-not-allowed bg-custom-background-90": disabled,
+            "h-3 w-3 translate-x-3.5": size === "sm" && value,
+            "h-3 w-3 translate-x-0.5": size === "sm" && !value,
+            "h-4 w-4 translate-x-4": size === "md" && value,
+            "h-4 w-4 translate-x-0.5": size === "md" && !value,
+            "translate-x-4": size === "lg" && value,
+            "translate-x-0.5": size === "lg" && !value,
           }
         )}
       />
diff --git a/packages/ui/src/card/card.tsx b/packages/ui/src/card/card.tsx
index 444d5772e..4ee7f7e71 100644
--- a/packages/ui/src/card/card.tsx
+++ b/packages/ui/src/card/card.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 import { cn } from "../utils";
 import type { TCardDirection, TCardSpacing, TCardVariant } from "./helper";
diff --git a/packages/ui/src/card/helper.tsx b/packages/ui/src/card/helper.tsx
index 8b80d0d93..cc914c5da 100644
--- a/packages/ui/src/card/helper.tsx
+++ b/packages/ui/src/card/helper.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export enum ECardVariant {
   WITHOUT_SHADOW = "without-shadow",
   WITH_SHADOW = "with-shadow",
@@ -18,11 +24,10 @@ export interface ICardProperties {
   [key: string]: string;
 }
 
-const DEFAULT_STYLE =
-  "bg-custom-background-100 rounded-lg border-[0.5px] border-custom-border-200 w-full flex flex-col";
+const DEFAULT_STYLE = "bg-surface-1 rounded-lg border-[0.5px] border-subtle w-full flex flex-col";
 export const containerStyle: ICardProperties = {
   [ECardVariant.WITHOUT_SHADOW]: "",
-  [ECardVariant.WITH_SHADOW]: "hover:shadow-custom-shadow-4xl duration-300",
+  [ECardVariant.WITH_SHADOW]: "hover:shadow-raised-200 duration-300",
 };
 export const spacings = {
   [ECardSpacing.SM]: "p-4",
diff --git a/packages/ui/src/card/index.ts b/packages/ui/src/card/index.ts
index 1d243e763..4260f8508 100644
--- a/packages/ui/src/card/index.ts
+++ b/packages/ui/src/card/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./card";
diff --git a/packages/ui/src/collapsible/collapsible-button.tsx b/packages/ui/src/collapsible/collapsible-button.tsx
index 53ccfe3fa..c2bb54c86 100644
--- a/packages/ui/src/collapsible/collapsible-button.tsx
+++ b/packages/ui/src/collapsible/collapsible-button.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 import type { ISvgIcons } from "@plane/propel/icons";
 import { DropdownIcon } from "@plane/propel/icons";
@@ -27,22 +32,17 @@ export function CollapsibleButton(props: Props) {
     ChevronIcon = DropdownIcon,
   } = props;
   return (
-    <div
-      className={cn(
-        "flex items-center justify-between gap-3 h-12 px-2.5 py-3 border-b border-custom-border-200",
-        className
-      )}
-    >
+    <div className={cn("flex h-12 items-center justify-between gap-3 border-b border-subtle px-2.5 py-3", className)}>
       <div className="flex items-center gap-3.5">
         <div className="flex items-center gap-3">
           {!hideChevron && (
             <ChevronIcon
-              className={cn("size-2 text-custom-text-300 hover:text-custom-text-200 duration-300", {
+              className={cn("size-2 text-tertiary duration-300 hover:text-secondary", {
                 "-rotate-90": !isOpen,
               })}
             />
           )}
-          <span className={cn("text-base text-custom-text-100 font-medium", titleClassName)}>{title}</span>
+          <span className={cn("text-14 font-medium text-primary", titleClassName)}>{title}</span>
         </div>
         {indicatorElement && indicatorElement}
       </div>
diff --git a/packages/ui/src/collapsible/collapsible.tsx b/packages/ui/src/collapsible/collapsible.tsx
index f5babab07..0831db3bb 100644
--- a/packages/ui/src/collapsible/collapsible.tsx
+++ b/packages/ui/src/collapsible/collapsible.tsx
@@ -1,5 +1,10 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { Disclosure, Transition } from "@headlessui/react";
-import type { FC } from "react";
 import React, { useState, useEffect, useCallback } from "react";
 
 export type TCollapsibleProps = {
@@ -40,14 +45,17 @@ export function Collapsible(props: TCollapsibleProps) {
       </Disclosure.Button>
       <Transition
         show={localIsOpen}
-        enter="transition-max-height duration-400 ease-in-out"
-        enterFrom="max-h-0"
-        enterTo="max-h-screen"
-        leave="transition-max-height duration-400 ease-in-out"
-        leaveFrom="max-h-screen"
-        leaveTo="max-h-0"
+        enter="transition-all duration-300 ease-in-out"
+        enterFrom="grid-rows-[0fr] opacity-0"
+        enterTo="grid-rows-[1fr] opacity-100"
+        leave="transition-all duration-300 ease-in-out"
+        leaveFrom="grid-rows-[1fr] opacity-100"
+        leaveTo="grid-rows-[0fr] opacity-0"
+        className="grid overflow-hidden"
       >
-        <Disclosure.Panel static>{children}</Disclosure.Panel>
+        <Disclosure.Panel static className="min-h-0">
+          {children}
+        </Disclosure.Panel>
       </Transition>
     </Disclosure>
   );
diff --git a/packages/ui/src/collapsible/index.ts b/packages/ui/src/collapsible/index.ts
index 04441c4c3..e1a798d68 100644
--- a/packages/ui/src/collapsible/index.ts
+++ b/packages/ui/src/collapsible/index.ts
@@ -1,2 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./collapsible";
 export * from "./collapsible-button";
diff --git a/packages/ui/src/color-picker/color-picker.tsx b/packages/ui/src/color-picker/color-picker.tsx
index d6993d653..d3d0c8e24 100644
--- a/packages/ui/src/color-picker/color-picker.tsx
+++ b/packages/ui/src/color-picker/color-picker.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 
 interface ColorPickerProps {
@@ -19,9 +25,9 @@ export function ColorPicker(props: ColorPickerProps) {
   };
 
   return (
-    <div className="flex items-center justify-center relative">
+    <div className="relative flex items-center justify-center">
       <button
-        className={`size-4 rounded-full cursor-pointer conical-gradient ${className}`}
+        className={`size-4 cursor-pointer rounded-full conical-gradient ${className}`}
         onClick={handleOnClick}
         aria-label="Open color picker"
       />
@@ -30,7 +36,7 @@ export function ColorPicker(props: ColorPickerProps) {
         type="color"
         value={value}
         onChange={(e) => onChange(e.target.value)}
-        className="absolute inset-0 size-4 invisible"
+        className="invisible absolute inset-0 size-4"
         aria-hidden="true"
       />
     </div>
diff --git a/packages/ui/src/color-picker/index.ts b/packages/ui/src/color-picker/index.ts
index 6bad1d67e..bd07a2105 100644
--- a/packages/ui/src/color-picker/index.ts
+++ b/packages/ui/src/color-picker/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./color-picker";
diff --git a/packages/ui/src/constants/icons.ts b/packages/ui/src/constants/icons.ts
index fa13da33e..d7382c337 100644
--- a/packages/ui/src/constants/icons.ts
+++ b/packages/ui/src/constants/icons.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import {
   Activity,
   Airplay,
@@ -32,7 +38,6 @@ import {
   Camera,
   CameraOff,
   Cast,
-  Check,
   CheckCircle,
   CheckSquare,
   Clipboard,
@@ -50,7 +55,6 @@ import {
   Columns,
   Command,
   Compass,
-  Copy,
   CornerDownLeft,
   CornerDownRight,
   CornerLeftDown,
@@ -77,7 +81,6 @@ import {
   Edit,
   Edit2,
   Edit3,
-  ExternalLink,
   Eye,
   EyeOff,
   Facebook,
@@ -103,7 +106,6 @@ import {
   GitPullRequest,
   Github,
   Gitlab,
-  Globe,
   Grid,
   HardDrive,
   Hash,
@@ -121,12 +123,9 @@ import {
   Layers,
   Layout,
   LifeBuoy,
-  Link,
-  Link2,
   Linkedin,
   List,
   Loader,
-  Lock,
   LogIn,
   LogOut,
   Mail,
@@ -148,10 +147,21 @@ import {
   CircleChevronDown,
   UsersRound,
   ToggleLeft,
-  Search,
   User,
 } from "lucide-react";
-import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon } from "@plane/propel/icons";
+import {
+  LinkIcon,
+  CopyIcon,
+  GlobeIcon,
+  LockIcon,
+  NewTabIcon,
+  CheckIcon,
+  SearchIcon,
+  ChevronDownIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  ChevronUpIcon,
+} from "@plane/propel/icons";
 
 export const MATERIAL_ICONS_LIST = [
   {
@@ -794,7 +804,7 @@ export const LUCIDE_ICONS_LIST = [
   { name: "CameraOff", element: CameraOff },
   { name: "Cast", element: Cast },
   { name: "CircleChevronDown", element: CircleChevronDown },
-  { name: "Check", element: Check },
+  { name: "Check", element: CheckIcon },
   { name: "CheckCircle", element: CheckCircle },
   { name: "CheckSquare", element: CheckSquare },
   { name: "ChevronDown", element: ChevronDownIcon },
@@ -816,7 +826,7 @@ export const LUCIDE_ICONS_LIST = [
   { name: "Columns", element: Columns },
   { name: "Command", element: Command },
   { name: "Compass", element: Compass },
-  { name: "Copy", element: Copy },
+  { name: "Copy", element: CopyIcon },
   { name: "CornerDownLeft", element: CornerDownLeft },
   { name: "CornerDownRight", element: CornerDownRight },
   { name: "CornerLeftDown", element: CornerLeftDown },
@@ -843,7 +853,7 @@ export const LUCIDE_ICONS_LIST = [
   { name: "Edit", element: Edit },
   { name: "Edit2", element: Edit2 },
   { name: "Edit3", element: Edit3 },
-  { name: "ExternalLink", element: ExternalLink },
+  { name: "ExternalLink", element: NewTabIcon },
   { name: "Eye", element: Eye },
   { name: "EyeOff", element: EyeOff },
   { name: "Facebook", element: Facebook },
@@ -869,7 +879,7 @@ export const LUCIDE_ICONS_LIST = [
   { name: "GitPullRequest", element: GitPullRequest },
   { name: "Github", element: Github },
   { name: "Gitlab", element: Gitlab },
-  { name: "Globe", element: Globe },
+  { name: "Globe", element: GlobeIcon },
   { name: "Grid", element: Grid },
   { name: "HardDrive", element: HardDrive },
   { name: "Hash", element: Hash },
@@ -887,12 +897,12 @@ export const LUCIDE_ICONS_LIST = [
   { name: "Layers", element: Layers },
   { name: "Layout", element: Layout },
   { name: "LifeBuoy", element: LifeBuoy },
-  { name: "Link", element: Link },
-  { name: "Link2", element: Link2 },
+  { name: "Link", element: LinkIcon },
+  { name: "Link2", element: LinkIcon },
   { name: "Linkedin", element: Linkedin },
   { name: "List", element: List },
   { name: "Loader", element: Loader },
-  { name: "Lock", element: Lock },
+  { name: "Lock", element: LockIcon },
   { name: "LogIn", element: LogIn },
   { name: "LogOut", element: LogOut },
   { name: "Mail", element: Mail },
@@ -911,7 +921,7 @@ export const LUCIDE_ICONS_LIST = [
   { name: "Minus", element: Minus },
   { name: "MinusCircle", element: MinusCircle },
   { name: "MinusSquare", element: MinusSquare },
-  { name: "Search", element: Search },
+  { name: "Search", element: SearchIcon },
   { name: "ToggleLeft", element: ToggleLeft },
   { name: "User", element: User },
   { name: "UsersRound", element: UsersRound },
diff --git a/packages/ui/src/constants/index.ts b/packages/ui/src/constants/index.ts
index 6ef8d54d4..502e2c04d 100644
--- a/packages/ui/src/constants/index.ts
+++ b/packages/ui/src/constants/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./icons";
diff --git a/packages/ui/src/content-wrapper/content-wrapper.tsx b/packages/ui/src/content-wrapper/content-wrapper.tsx
index af79cbc75..e69011c96 100644
--- a/packages/ui/src/content-wrapper/content-wrapper.tsx
+++ b/packages/ui/src/content-wrapper/content-wrapper.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 import { Row } from "../row";
 import type { TRowVariant } from "../row/helper";
diff --git a/packages/ui/src/content-wrapper/index.ts b/packages/ui/src/content-wrapper/index.ts
index 14eaf12a4..f80f26993 100644
--- a/packages/ui/src/content-wrapper/index.ts
+++ b/packages/ui/src/content-wrapper/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./content-wrapper";
diff --git a/packages/ui/src/control-link/control-link.tsx b/packages/ui/src/control-link/control-link.tsx
index b5df552df..39249fb0b 100644
--- a/packages/ui/src/control-link/control-link.tsx
+++ b/packages/ui/src/control-link/control-link.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 
 export type TControlLink = React.AnchorHTMLAttributes<HTMLAnchorElement> & {
diff --git a/packages/ui/src/control-link/index.ts b/packages/ui/src/control-link/index.ts
index 86cdfc28e..aad6124b0 100644
--- a/packages/ui/src/control-link/index.ts
+++ b/packages/ui/src/control-link/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./control-link";
diff --git a/packages/ui/src/drag-handle.tsx b/packages/ui/src/drag-handle.tsx
index f60930fed..58e1e43d4 100644
--- a/packages/ui/src/drag-handle.tsx
+++ b/packages/ui/src/drag-handle.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { MoreVertical } from "lucide-react";
 import React, { forwardRef } from "react";
 // helpers
@@ -15,24 +21,21 @@ export const DragHandle = forwardRef(function DragHandle(
   const { className, disabled = false } = props;
 
   if (disabled) {
-    return <div className="w-[14px] h-[18px]" />;
+    return <div className="h-[18px] w-[14px]" />;
   }
 
   return (
     <button
       type="button"
-      className={cn(
-        "p-0.5 flex flex-shrink-0 rounded bg-custom-background-90 text-custom-sidebar-text-200 cursor-grab",
-        className
-      )}
+      className={cn("flex flex-shrink-0 cursor-grab rounded-sm bg-surface-2 p-0.5 text-secondary", className)}
       onContextMenu={(e) => {
         e.preventDefault();
         e.stopPropagation();
       }}
       ref={ref}
     >
-      <MoreVertical className="h-3.5 w-3.5 stroke-custom-text-400" />
-      <MoreVertical className="-ml-5 h-3.5 w-3.5 stroke-custom-text-400" />
+      <MoreVertical className="h-3.5 w-3.5 stroke-placeholder" />
+      <MoreVertical className="-ml-5 h-3.5 w-3.5 stroke-placeholder" />
     </button>
   );
 });
diff --git a/packages/ui/src/drop-indicator.tsx b/packages/ui/src/drop-indicator.tsx
index 1fab9c116..007b3245f 100644
--- a/packages/ui/src/drop-indicator.tsx
+++ b/packages/ui/src/drop-indicator.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 import { cn } from "./utils";
 
@@ -12,11 +18,9 @@ export function DropIndicator(props: Props) {
   return (
     <div
       className={cn(
-        `block relative h-[2px] w-full
-    before:left-0 before:relative before:block before:top-[-2px] before:h-[6px] before:w-[6px] before:rounded
-    after:left-[calc(100%-6px)] after:relative after:block after:top-[-8px] after:h-[6px] after:w-[6px] after:rounded`,
+        `relative block h-[2px] w-full before:relative before:top-[-2px] before:left-0 before:block before:h-[6px] before:w-[6px] before:rounded-sm after:relative after:top-[-8px] after:left-[calc(100%-6px)] after:block after:h-[6px] after:w-[6px] after:rounded-sm`,
         {
-          "bg-custom-primary-100 before:bg-custom-primary-100 after:bg-custom-primary-100": isVisible,
+          "bg-accent-primary before:bg-accent-primary after:bg-accent-primary": isVisible,
         },
         classNames
       )}
diff --git a/packages/ui/src/dropdown/common/button.tsx b/packages/ui/src/dropdown/common/button.tsx
index 2045f29b7..fa47da583 100644
--- a/packages/ui/src/dropdown/common/button.tsx
+++ b/packages/ui/src/dropdown/common/button.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { Combobox } from "@headlessui/react";
 import React, { Fragment } from "react";
 // helper
@@ -23,7 +29,7 @@ export function DropdownButton(props: IMultiSelectDropdownButton | ISingleSelect
         className={cn(
           "clickable block h-full max-w-full outline-none",
           {
-            "cursor-not-allowed text-custom-text-200": disabled,
+            "cursor-not-allowed text-secondary": disabled,
             "cursor-pointer": !disabled,
           },
           buttonContainerClassName
diff --git a/packages/ui/src/dropdown/common/index.ts b/packages/ui/src/dropdown/common/index.ts
index f9a6d7388..e13268153 100644
--- a/packages/ui/src/dropdown/common/index.ts
+++ b/packages/ui/src/dropdown/common/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./input-search";
 export * from "./button";
 export * from "./options";
diff --git a/packages/ui/src/dropdown/common/input-search.tsx b/packages/ui/src/dropdown/common/input-search.tsx
index eb08c6921..9b96a23c2 100644
--- a/packages/ui/src/dropdown/common/input-search.tsx
+++ b/packages/ui/src/dropdown/common/input-search.tsx
@@ -1,7 +1,12 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { Combobox } from "@headlessui/react";
-import { Search } from "lucide-react";
-import type { FC } from "react";
 import React, { useEffect, useRef } from "react";
+import { SearchIcon } from "@plane/propel/icons";
 // helpers
 import { cn } from "../../utils";
 
@@ -39,16 +44,16 @@ export function InputSearch(props: IInputSearch) {
   return (
     <div
       className={cn(
-        "flex items-center gap-1.5 rounded border border-custom-border-100 bg-custom-background-90 px-2",
+        "flex items-center gap-1.5 rounded-sm border border-subtle bg-surface-2 px-2",
         inputContainerClassName
       )}
     >
-      {inputIcon ? <>{inputIcon}</> : <Search className="h-4 w-4 text-custom-text-300" aria-hidden="true" />}
+      {inputIcon ? <>{inputIcon}</> : <SearchIcon className="h-4 w-4 text-tertiary" aria-hidden="true" />}
       <Combobox.Input
         as="input"
         ref={inputRef}
         className={cn(
-          "w-full bg-transparent py-1 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none",
+          "w-full bg-transparent py-1 text-11 text-secondary placeholder:text-placeholder focus:outline-none",
           inputClassName
         )}
         value={query}
diff --git a/packages/ui/src/dropdown/common/loader.tsx b/packages/ui/src/dropdown/common/loader.tsx
index 4ab196511..67e8dc295 100644
--- a/packages/ui/src/dropdown/common/loader.tsx
+++ b/packages/ui/src/dropdown/common/loader.tsx
@@ -1,11 +1,17 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { range } from "lodash-es";
 import React from "react";
 
 export function DropdownOptionsLoader() {
   return (
-    <div className="flex flex-col gap-1 animate-pulse">
+    <div className="flex animate-pulse flex-col gap-1">
       {range(6).map((index) => (
-        <div key={index} className="flex h-[1.925rem] w-full rounded px-1 py-1.5 bg-custom-background-90" />
+        <div key={index} className="flex h-[1.925rem] w-full rounded-sm bg-surface-2 px-1 py-1.5" />
       ))}
     </div>
   );
diff --git a/packages/ui/src/dropdown/common/options.tsx b/packages/ui/src/dropdown/common/options.tsx
index 91fa37f1e..fb8a1e55f 100644
--- a/packages/ui/src/dropdown/common/options.tsx
+++ b/packages/ui/src/dropdown/common/options.tsx
@@ -1,6 +1,13 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { Combobox } from "@headlessui/react";
-import { Check } from "lucide-react";
+
 import React from "react";
+import { CheckIcon } from "@plane/propel/icons";
 // helpers
 import { cn } from "../../utils";
 // types
@@ -21,7 +28,6 @@ export function DropdownOptions(props: IMultiSelectDropdownOptions | ISingleSele
     keyExtractor,
     options,
     handleClose,
-    value,
     renderItem,
     loader,
     isMobile = false,
@@ -51,11 +57,11 @@ export function DropdownOptions(props: IMultiSelectDropdownOptions | ISingleSele
                   disabled={option.disabled}
                   className={({ active, selected }) =>
                     cn(
-                      "flex w-full cursor-pointer select-none items-center justify-between gap-2 truncate rounded px-1 py-1.5",
+                      "flex w-full cursor-pointer items-center justify-between gap-2 truncate rounded-sm px-1 py-1.5 select-none",
                       {
-                        "bg-custom-background-80": active,
-                        "text-custom-text-100": selected,
-                        "text-custom-text-200": !selected,
+                        "bg-layer-1": active,
+                        "text-primary": selected,
+                        "text-secondary": !selected,
                       },
                       option.className && option.className({ active, selected })
                     )
@@ -69,7 +75,7 @@ export function DropdownOptions(props: IMultiSelectDropdownOptions | ISingleSele
                       ) : (
                         <>
                           <span className="flex-grow truncate">{option.value}</span>
-                          {selected && <Check className="h-3.5 w-3.5 flex-shrink-0" />}
+                          {selected && <CheckIcon className="h-3.5 w-3.5 flex-shrink-0" />}
                         </>
                       )}
                     </>
@@ -77,7 +83,7 @@ export function DropdownOptions(props: IMultiSelectDropdownOptions | ISingleSele
                 </Combobox.Option>
               ))
             ) : (
-              <p className="px-1.5 py-1 italic text-custom-text-400">No matching results</p>
+              <p className="px-1.5 py-1 text-placeholder italic">No matching results</p>
             )
           ) : loader ? (
             <> {loader} </>
diff --git a/packages/ui/src/dropdown/index.ts b/packages/ui/src/dropdown/index.ts
index a15df9567..41ad217ae 100644
--- a/packages/ui/src/dropdown/index.ts
+++ b/packages/ui/src/dropdown/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./common";
 export * from "./multi-select";
 export * from "./single-select";
diff --git a/packages/ui/src/dropdown/multi-select.tsx b/packages/ui/src/dropdown/multi-select.tsx
index b54308dff..ba3f3ea24 100644
--- a/packages/ui/src/dropdown/multi-select.tsx
+++ b/packages/ui/src/dropdown/multi-select.tsx
@@ -1,6 +1,11 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { Combobox } from "@headlessui/react";
 import { sortBy } from "lodash-es";
-import type { FC } from "react";
 import React, { useMemo, useRef, useState } from "react";
 import { usePopper } from "react-popper";
 // plane imports
@@ -138,7 +143,7 @@ export function MultiSelectDropdown(props: IMultiSelectDropdown) {
         <Combobox.Options className="fixed z-10" static>
           <div
             className={cn(
-              "my-1 w-48 rounded border-[0.5px] border-custom-border-300 bg-custom-background-100 px-2 py-2.5 text-xs shadow-custom-shadow-rg focus:outline-none",
+              "my-1 w-48 rounded-sm border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 text-11 shadow-raised-200 focus:outline-none",
               optionsContainerClassName
             )}
             ref={setPopperElement}
diff --git a/packages/ui/src/dropdown/single-select.tsx b/packages/ui/src/dropdown/single-select.tsx
index e78f717ca..4c16c4c69 100644
--- a/packages/ui/src/dropdown/single-select.tsx
+++ b/packages/ui/src/dropdown/single-select.tsx
@@ -1,6 +1,11 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { Combobox } from "@headlessui/react";
 import { sortBy } from "lodash-es";
-import type { FC } from "react";
 import React, { useMemo, useRef, useState } from "react";
 import { usePopper } from "react-popper";
 // plane imports
@@ -137,7 +142,7 @@ export function Dropdown(props: ISingleSelectDropdown) {
         <Combobox.Options className="fixed z-10" static>
           <div
             className={cn(
-              "my-1 w-48 rounded border-[0.5px] border-custom-border-300 bg-custom-background-100 px-2 py-2 text-xs shadow-custom-shadow-rg focus:outline-none",
+              "my-1 w-48 rounded-sm border-[0.5px] border-strong bg-surface-1 px-2 py-2 text-11 shadow-raised-200 focus:outline-none",
               optionsContainerClassName
             )}
             ref={setPopperElement}
diff --git a/packages/ui/src/dropdowns/combo-box.tsx b/packages/ui/src/dropdowns/combo-box.tsx
index 2b36852f0..72de104f3 100644
--- a/packages/ui/src/dropdowns/combo-box.tsx
+++ b/packages/ui/src/dropdowns/combo-box.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { Combobox } from "@headlessui/react";
 import type { ElementType, KeyboardEventHandler, ReactNode, Ref } from "react";
 import React, { Fragment, forwardRef, useEffect, useRef, useState } from "react";
@@ -42,7 +48,7 @@ const ComboDropDown = forwardRef(function ComboDropDown(props: Props, ref) {
 
   if (!shouldRender) {
     return (
-      <div ref={dropDownButtonRef} className="h-full flex items-center">
+      <div ref={dropDownButtonRef} className="flex h-full items-center">
         {button}
       </div>
     );
diff --git a/packages/ui/src/dropdowns/context-menu/index.ts b/packages/ui/src/dropdowns/context-menu/index.ts
index 9665324ca..b40542046 100644
--- a/packages/ui/src/dropdowns/context-menu/index.ts
+++ b/packages/ui/src/dropdowns/context-menu/index.ts
@@ -1,2 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./item";
 export * from "./root";
diff --git a/packages/ui/src/dropdowns/context-menu/item.tsx b/packages/ui/src/dropdowns/context-menu/item.tsx
index 3f5c78aed..27031f9f7 100644
--- a/packages/ui/src/dropdowns/context-menu/item.tsx
+++ b/packages/ui/src/dropdowns/context-menu/item.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React, { useState, useRef, useContext } from "react";
 import { usePopper } from "react-popper";
 import { ChevronRightIcon } from "@plane/propel/icons";
@@ -152,10 +158,10 @@ export function ContextMenuItem(props: ContextMenuItemProps) {
         ref={setReferenceElement}
         type="button"
         className={cn(
-          "w-full flex items-center gap-2 px-1 py-1.5 text-left text-custom-text-200 rounded text-xs select-none",
+          "flex w-full items-center gap-2 rounded-sm px-1 py-1.5 text-left text-11 text-secondary select-none",
           {
-            "bg-custom-background-90": isActive,
-            "text-custom-text-400": item.disabled,
+            "bg-layer-transparent-hover": isActive,
+            "text-placeholder": item.disabled,
           },
           item.className
         )}
@@ -170,8 +176,8 @@ export function ContextMenuItem(props: ContextMenuItemProps) {
               <h5>{item.title}</h5>
               {item.description && (
                 <p
-                  className={cn("text-custom-text-300 whitespace-pre-line", {
-                    "text-custom-text-400": item.disabled,
+                  className={cn("whitespace-pre-line text-tertiary", {
+                    "text-placeholder": item.disabled,
                   })}
                 >
                   {item.description}
@@ -190,22 +196,19 @@ export function ContextMenuItem(props: ContextMenuItemProps) {
             ref={setPopperElement}
             style={styles.popper}
             {...attributes.popper}
-            className={cn(
-              "fixed z-[35] min-w-[12rem] overflow-hidden rounded-md border-[0.5px] border-custom-border-300 bg-custom-background-100 px-2 py-2.5 text-xs shadow-custom-shadow-lg",
-              "ring-1 ring-black ring-opacity-5"
-            )}
+            className="fixed z-[35] min-w-[12rem] overflow-hidden rounded-md border-[0.5px] border-subtle-1 bg-surface-1 px-2 py-2.5 text-11"
             data-context-submenu="true"
           >
-            <div ref={nestedMenuRef} className="max-h-72 overflow-y-scroll vertical-scrollbar scrollbar-sm">
+            <div ref={nestedMenuRef} className="vertical-scrollbar scrollbar-sm max-h-72 overflow-y-scroll">
               {renderedNestedItems.map((nestedItem, index) => (
                 <button
                   key={nestedItem.key}
                   type="button"
                   className={cn(
-                    "w-full flex items-center gap-2 px-1 py-1.5 text-left text-custom-text-200 rounded text-xs select-none",
+                    "flex w-full items-center gap-2 rounded-sm px-1 py-1.5 text-left text-11 text-secondary select-none",
                     {
-                      "bg-custom-background-90": index === activeNestedIndex,
-                      "text-custom-text-400": nestedItem.disabled,
+                      "bg-layer-transparent-hover": index === activeNestedIndex,
+                      "text-placeholder": nestedItem.disabled,
                     },
                     nestedItem.className
                   )}
@@ -225,8 +228,8 @@ export function ContextMenuItem(props: ContextMenuItemProps) {
                         <h5>{nestedItem.title}</h5>
                         {nestedItem.description && (
                           <p
-                            className={cn("text-custom-text-300 whitespace-pre-line", {
-                              "text-custom-text-400": nestedItem.disabled,
+                            className={cn("whitespace-pre-line text-tertiary", {
+                              "text-placeholder": nestedItem.disabled,
                             })}
                           >
                             {nestedItem.description}
diff --git a/packages/ui/src/dropdowns/context-menu/root.tsx b/packages/ui/src/dropdowns/context-menu/root.tsx
index c87b8b097..b966b4f1e 100644
--- a/packages/ui/src/dropdowns/context-menu/root.tsx
+++ b/packages/ui/src/dropdowns/context-menu/root.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React, { useEffect, useRef, useState } from "react";
 import ReactDOM from "react-dom";
 // hooks
@@ -198,15 +204,15 @@ function ContextMenuWithoutPortal(props: ContextMenuProps) {
   return (
     <div
       className={cn(
-        "fixed h-screen w-screen top-0 left-0 cursor-default z-30 opacity-0 pointer-events-none transition-opacity",
+        "pointer-events-none fixed top-0 left-0 z-30 h-screen w-screen cursor-default opacity-0 transition-opacity",
         {
-          "opacity-100 pointer-events-auto": isOpen,
+          "pointer-events-auto opacity-100": isOpen,
         }
       )}
     >
       <div
         ref={contextMenuRef}
-        className="fixed border-[0.5px] border-custom-border-300 bg-custom-background-100 shadow-custom-shadow-rg rounded-md px-2 py-2.5 max-h-72 min-w-[12rem] overflow-y-scroll vertical-scrollbar scrollbar-sm"
+        className="vertical-scrollbar fixed scrollbar-sm max-h-72 min-w-[12rem] overflow-y-scroll rounded-md border-[0.5px] border-subtle-1 bg-surface-1 px-2 py-2.5"
         style={{
           top: position.y,
           left: position.x,
diff --git a/packages/ui/src/dropdowns/custom-menu.tsx b/packages/ui/src/dropdowns/custom-menu.tsx
index 5d2308850..7066c1770 100644
--- a/packages/ui/src/dropdowns/custom-menu.tsx
+++ b/packages/ui/src/dropdowns/custom-menu.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { Menu } from "@headlessui/react";
 import { MoreHorizontal } from "lucide-react";
 import * as React from "react";
@@ -194,7 +200,7 @@ function CustomMenu(props: ICustomMenuDropdownProps) {
     >
       <div
         className={cn(
-          "my-1 overflow-y-scroll rounded-md border-[0.5px] border-custom-border-300 bg-custom-background-100 px-2 py-2.5 text-xs shadow-custom-shadow-rg focus:outline-none min-w-[12rem] whitespace-nowrap",
+          "my-1 min-w-[12rem] overflow-y-scroll rounded-md border-[0.5px] border-subtle-1 bg-surface-1 px-2 py-2.5 text-11 whitespace-nowrap focus:outline-none",
           {
             "max-h-60": maxHeight === "lg",
             "max-h-48": maxHeight === "md",
@@ -257,8 +263,8 @@ function CustomMenu(props: ICustomMenuDropdownProps) {
                     type="button"
                     onClick={handleMenuButtonClick}
                     disabled={disabled}
-                    className={`relative grid place-items-center rounded p-1 text-custom-text-200 outline-none hover:text-custom-text-100 ${
-                      disabled ? "cursor-not-allowed" : "cursor-pointer hover:bg-custom-background-80"
+                    className={`relative grid place-items-center rounded-sm p-1 text-secondary outline-none hover:text-primary ${
+                      disabled ? "cursor-not-allowed" : "cursor-pointer hover:bg-layer-transparent-hover"
                     } ${buttonClassName}`}
                     tabIndex={customButtonTabIndex}
                     aria-label={ariaLabel}
@@ -271,12 +277,10 @@ function CustomMenu(props: ICustomMenuDropdownProps) {
                   <button
                     ref={setReferenceElement}
                     type="button"
-                    className={`flex items-center justify-between gap-1 whitespace-nowrap rounded-md px-2.5 py-1 text-xs duration-300 ${
-                      open ? "bg-custom-background-90 text-custom-text-100" : "text-custom-text-200"
-                    } ${noBorder ? "" : "border border-custom-border-300 shadow-sm focus:outline-none"} ${
-                      disabled
-                        ? "cursor-not-allowed text-custom-text-200"
-                        : "cursor-pointer hover:bg-custom-background-80"
+                    className={`flex items-center justify-between gap-1 rounded-md px-2.5 py-1 text-11 whitespace-nowrap duration-300 ${
+                      open ? "text-primary" : "text-secondary"
+                    } ${noBorder ? "" : "shadow-sm border border-strong focus:outline-none"} ${
+                      disabled ? "cursor-not-allowed text-secondary" : "cursor-pointer hover:bg-layer-transparent-hover"
                     } ${buttonClassName}`}
                     onClick={handleMenuButtonClick}
                     tabIndex={customButtonTabIndex}
@@ -396,10 +400,10 @@ function SubMenu(props: ICustomSubMenuProps) {
           {({ active }) => (
             <div
               className={cn(
-                "w-full select-none rounded px-1 py-1.5 text-left text-custom-text-200 flex items-center justify-between cursor-pointer",
+                "flex w-full cursor-pointer items-center justify-between rounded-sm px-1 py-1.5 text-left text-secondary select-none",
                 {
-                  "bg-custom-background-80": active && !disabled,
-                  "text-custom-text-400": disabled,
+                  "bg-layer-transparent-hover": active && !disabled,
+                  "text-placeholder": disabled,
                   "cursor-not-allowed": disabled,
                 }
               )}
@@ -419,8 +423,7 @@ function SubMenu(props: ICustomSubMenuProps) {
             style={styles.popper}
             {...attributes.popper}
             className={cn(
-              "fixed z-30 min-w-[12rem] overflow-hidden rounded-md border-[0.5px] border-custom-border-300 bg-custom-background-100 p-1 text-xs shadow-custom-shadow-lg",
-              "ring-1 ring-black ring-opacity-5", // Additional styling to make it stand out
+              "fixed z-30 min-w-[12rem] overflow-hidden rounded-md border-[0.5px] border-subtle-1 bg-surface-1 p-1 text-11",
               contentClassName
             )}
             data-prevent-outside-click="true"
@@ -459,10 +462,10 @@ function MenuItem(props: ICustomMenuItemProps) {
         <button
           type="button"
           className={cn(
-            "w-full select-none truncate rounded px-1 py-1.5 text-left text-custom-text-200",
+            "w-full truncate rounded-sm px-1 py-1.5 text-left text-secondary select-none",
             {
-              "bg-custom-background-80": active && !disabled,
-              "text-custom-text-400": disabled,
+              "bg-layer-transparent-hover": active && !disabled,
+              "text-placeholder": disabled,
             },
             className
           )}
@@ -489,10 +492,10 @@ function SubMenuTrigger(props: ICustomSubMenuTriggerProps) {
       {({ active }) => (
         <div
           className={cn(
-            "w-full select-none rounded px-1 py-1.5 text-left text-custom-text-200 flex items-center justify-between",
+            "flex w-full items-center justify-between rounded-sm px-1 py-1.5 text-left text-secondary select-none",
             {
-              "bg-custom-background-80": active && !disabled,
-              "text-custom-text-400": disabled,
+              "bg-layer-transparent-hover": active && !disabled,
+              "text-placeholder": disabled,
               "cursor-pointer": !disabled,
               "cursor-not-allowed": disabled,
             },
@@ -513,7 +516,7 @@ function SubMenuContent(props: ICustomSubMenuContentProps) {
   return (
     <div
       className={cn(
-        "z-[15] min-w-[12rem] overflow-hidden rounded-md border border-custom-border-300 bg-custom-background-100 p-1 text-xs shadow-custom-shadow-rg",
+        "z-[15] min-w-[12rem] overflow-hidden rounded-md border border-subtle-1 bg-surface-1 p-1 text-11",
         className
       )}
     >
diff --git a/packages/ui/src/dropdowns/custom-search-select.tsx b/packages/ui/src/dropdowns/custom-search-select.tsx
index b471e5f15..b988a0618 100644
--- a/packages/ui/src/dropdowns/custom-search-select.tsx
+++ b/packages/ui/src/dropdowns/custom-search-select.tsx
@@ -1,10 +1,16 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { Combobox } from "@headlessui/react";
-import { Check, Info, Search } from "lucide-react";
+import { Info } from "lucide-react";
 import React, { useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { usePopper } from "react-popper";
 import { useOutsideClickDetector } from "@plane/hooks";
-import { ChevronDownIcon } from "@plane/propel/icons";
+import { CheckIcon, SearchIcon, ChevronDownIcon } from "@plane/propel/icons";
 // plane imports
 // local imports
 import { Tooltip } from "@plane/propel/tooltip";
@@ -99,10 +105,10 @@ export function CustomSearchSelect(props: ICustomSearchSelectProps) {
                   ref={setReferenceElement}
                   type="button"
                   className={cn(
-                    "flex w-full items-center justify-between gap-1 text-xs",
+                    "flex w-full items-center justify-between gap-1 text-11",
                     {
-                      "cursor-not-allowed text-custom-text-200": disabled,
-                      "cursor-pointer hover:bg-custom-background-80": !disabled,
+                      "cursor-not-allowed text-secondary": disabled,
+                      "cursor-pointer hover:bg-layer-transparent-hover": !disabled,
                     },
                     customButtonClassName
                   )}
@@ -117,12 +123,12 @@ export function CustomSearchSelect(props: ICustomSearchSelectProps) {
                   ref={setReferenceElement}
                   type="button"
                   className={cn(
-                    "flex w-full items-center justify-between gap-1 rounded border-[0.5px] border-custom-border-300",
+                    "flex w-full items-center justify-between gap-1 rounded-sm border-[0.5px] border-strong",
                     {
-                      "px-3 py-2 text-sm": input,
-                      "px-2 py-1 text-xs": !input,
-                      "cursor-not-allowed text-custom-text-200": disabled,
-                      "cursor-pointer hover:bg-custom-background-80": !disabled,
+                      "px-3 py-2 text-13": input,
+                      "px-2 py-1 text-11": !input,
+                      "cursor-not-allowed text-secondary": disabled,
+                      "cursor-pointer hover:bg-layer-transparent-hover": !disabled,
                     },
                     buttonClassName
                   )}
@@ -140,17 +146,17 @@ export function CustomSearchSelect(props: ICustomSearchSelectProps) {
                 <Combobox.Options data-prevent-outside-click static>
                   <div
                     className={cn(
-                      "my-1 overflow-y-scroll rounded-md border-[0.5px] border-custom-border-300 bg-custom-background-100 py-2.5 text-xs shadow-custom-shadow-rg focus:outline-none min-w-48 whitespace-nowrap z-30",
+                      "z-30 my-1 min-w-48 overflow-y-scroll rounded-md border-[0.5px] border-subtle-1 bg-surface-1 py-2.5 text-11 whitespace-nowrap focus:outline-none",
                       optionsClassName
                     )}
                     ref={setPopperElement}
                     style={styles.popper}
                     {...attributes.popper}
                   >
-                    <div className="flex items-center gap-1.5 rounded border border-custom-border-100 bg-custom-background-90 px-2 mx-2">
-                      <Search className="h-3.5 w-3.5 text-custom-text-400" strokeWidth={1.5} />
+                    <div className="mx-2 flex items-center gap-1.5 rounded-sm border border-subtle px-2">
+                      <SearchIcon className="h-3.5 w-3.5 text-placeholder" strokeWidth={1.5} />
                       <Combobox.Input
-                        className="w-full bg-transparent py-1 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
+                        className="w-full bg-transparent py-1 text-11 text-secondary placeholder:text-placeholder focus:outline-none"
                         value={query}
                         onChange={(e) => setQuery(e.target.value)}
                         placeholder="Search"
@@ -158,7 +164,7 @@ export function CustomSearchSelect(props: ICustomSearchSelectProps) {
                       />
                     </div>
                     <div
-                      className={cn("mt-2 px-2 space-y-1 overflow-y-scroll vertical-scrollbar scrollbar-xs", {
+                      className={cn("vertical-scrollbar mt-2 scrollbar-xs space-y-1 overflow-y-scroll px-2", {
                         "max-h-96": maxHeight === "2xl",
                         "max-h-80": maxHeight === "xl",
                         "max-h-60": maxHeight === "lg",
@@ -175,10 +181,10 @@ export function CustomSearchSelect(props: ICustomSearchSelectProps) {
                               value={option.value}
                               className={({ active }) =>
                                 cn(
-                                  "w-full truncate flex items-center justify-between gap-2 rounded px-1 py-1.5 cursor-pointer select-none",
+                                  "flex w-full cursor-pointer items-center justify-between gap-2 truncate rounded-sm px-1 py-1.5 select-none",
                                   {
-                                    "bg-custom-background-80": active,
-                                    "text-custom-text-400 opacity-60 cursor-not-allowed": option.disabled,
+                                    "bg-layer-transparent-hover": active,
+                                    "cursor-not-allowed text-placeholder opacity-60": option.disabled,
                                   }
                                 )
                               }
@@ -190,12 +196,12 @@ export function CustomSearchSelect(props: ICustomSearchSelectProps) {
                               {({ selected }) => (
                                 <>
                                   <span className="flex-grow truncate">{option.content}</span>
-                                  {selected && <Check className="h-3.5 w-3.5 flex-shrink-0" />}
+                                  {selected && <CheckIcon className="h-3.5 w-3.5 flex-shrink-0" />}
                                   {option.tooltip && (
                                     <>
                                       {typeof option.tooltip === "string" ? (
                                         <Tooltip tooltipContent={option.tooltip}>
-                                          <Info className="h-3.5 w-3.5 flex-shrink-0 cursor-pointer text-custom-text-200" />
+                                          <Info className="h-3.5 w-3.5 flex-shrink-0 cursor-pointer text-secondary" />
                                         </Tooltip>
                                       ) : (
                                         option.tooltip
@@ -207,10 +213,10 @@ export function CustomSearchSelect(props: ICustomSearchSelectProps) {
                             </Combobox.Option>
                           ))
                         ) : (
-                          <p className="text-custom-text-400 italic py-1 px-1.5">{noResultsMessage}</p>
+                          <p className="px-1.5 py-1 text-placeholder italic">{noResultsMessage}</p>
                         )
                       ) : (
-                        <p className="text-custom-text-400 italic py-1 px-1.5">Loading...</p>
+                        <p className="px-1.5 py-1 text-placeholder italic">Loading...</p>
                       )}
                     </div>
                     {footerOption}
diff --git a/packages/ui/src/dropdowns/custom-select.tsx b/packages/ui/src/dropdowns/custom-select.tsx
index 3876ee9fd..cfdb986ca 100644
--- a/packages/ui/src/dropdowns/custom-select.tsx
+++ b/packages/ui/src/dropdowns/custom-select.tsx
@@ -1,10 +1,16 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { Combobox } from "@headlessui/react";
-import { Check } from "lucide-react";
-import React, { useRef, useState } from "react";
+
+import React, { createContext, useCallback, useContext, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { usePopper } from "react-popper";
 import { useOutsideClickDetector } from "@plane/hooks";
-import { ChevronDownIcon } from "@plane/propel/icons";
+import { CheckIcon, ChevronDownIcon } from "@plane/propel/icons";
 // plane helpers
 // hooks
 import { useDropdownKeyDown } from "../hooks/use-dropdown-key-down";
@@ -13,6 +19,9 @@ import { cn } from "../utils";
 // types
 import type { ICustomSelectItemProps, ICustomSelectProps } from "./helper";
 
+// Context to share the close handler with option components
+const DropdownContext = createContext<() => void>(() => {});
+
 function CustomSelect(props: ICustomSelectProps) {
   const {
     customButtonClassName = "",
@@ -42,117 +51,135 @@ function CustomSelect(props: ICustomSelectProps) {
     placement: placement ?? "bottom-start",
   });
 
-  const openDropdown = () => {
+  const openDropdown = useCallback(() => {
     setIsOpen(true);
     if (referenceElement) referenceElement.focus();
-  };
-  const closeDropdown = () => setIsOpen(false);
+  }, [referenceElement]);
+
+  const closeDropdown = useCallback(() => setIsOpen(false), []);
   const handleKeyDown = useDropdownKeyDown(openDropdown, closeDropdown, isOpen);
   useOutsideClickDetector(dropdownRef, closeDropdown);
 
-  const toggleDropdown = () => {
+  const toggleDropdown = useCallback(() => {
     if (isOpen) closeDropdown();
     else openDropdown();
-  };
+  }, [closeDropdown, isOpen, openDropdown]);
 
   return (
-    <Combobox
-      as="div"
-      ref={dropdownRef}
-      tabIndex={tabIndex}
-      value={value}
-      onChange={onChange}
-      className={cn("relative flex-shrink-0 text-left", className)}
-      onKeyDown={handleKeyDown}
-      disabled={disabled}
-    >
-      <>
-        {customButton ? (
-          <Combobox.Button as={React.Fragment}>
-            <button
-              ref={setReferenceElement}
-              type="button"
-              className={`flex items-center justify-between gap-1 text-xs ${
-                disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80"
-              } ${customButtonClassName}`}
-              onClick={toggleDropdown}
-            >
-              {customButton}
-            </button>
-          </Combobox.Button>
-        ) : (
-          <Combobox.Button as={React.Fragment}>
-            <button
-              ref={setReferenceElement}
-              type="button"
-              className={cn(
-                "flex w-full items-center justify-between gap-1 rounded border-[0.5px] border-custom-border-300",
-                {
-                  "px-3 py-2 text-sm": input,
-                  "px-2 py-1 text-xs": !input,
-                  "cursor-not-allowed text-custom-text-200": disabled,
-                  "cursor-pointer hover:bg-custom-background-80": !disabled,
-                },
-                buttonClassName
-              )}
-              onClick={toggleDropdown}
-            >
-              {label}
-              {!noChevron && !disabled && <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />}
-            </button>
-          </Combobox.Button>
-        )}
-      </>
-      {isOpen &&
-        createPortal(
-          <Combobox.Options data-prevent-outside-click static>
-            <div
-              className={cn(
-                "my-1 overflow-y-scroll rounded-md border-[0.5px] border-custom-border-300 bg-custom-background-100 px-2 py-2.5 text-xs shadow-custom-shadow-rg focus:outline-none min-w-48 whitespace-nowrap z-30",
-                optionsClassName
-              )}
-              ref={setPopperElement}
-              style={styles.popper}
-              {...attributes.popper}
-            >
-              <div
-                className={cn("space-y-1 overflow-y-scroll", {
-                  "max-h-60": maxHeight === "lg",
-                  "max-h-48": maxHeight === "md",
-                  "max-h-36": maxHeight === "rg",
-                  "max-h-28": maxHeight === "sm",
-                })}
+    <DropdownContext.Provider value={closeDropdown}>
+      <Combobox
+        as="div"
+        ref={dropdownRef}
+        tabIndex={tabIndex}
+        value={value}
+        onChange={(val) => {
+          onChange?.(val);
+          closeDropdown();
+        }}
+        className={cn("relative flex-shrink-0 text-left", className)}
+        onKeyDown={handleKeyDown}
+        disabled={disabled}
+      >
+        <>
+          {customButton ? (
+            <Combobox.Button as={React.Fragment}>
+              <button
+                ref={setReferenceElement}
+                type="button"
+                className={`flex items-center justify-between gap-1 rounded text-11 ${
+                  disabled ? "cursor-not-allowed text-secondary" : "cursor-pointer hover:bg-layer-transparent-hover"
+                } ${customButtonClassName}`}
+                onClick={toggleDropdown}
               >
-                {children}
+                {customButton}
+              </button>
+            </Combobox.Button>
+          ) : (
+            <Combobox.Button as={React.Fragment}>
+              <button
+                ref={setReferenceElement}
+                type="button"
+                className={cn(
+                  "flex w-full items-center justify-between gap-1 rounded border border-strong",
+                  {
+                    "px-3 py-2 text-13": input,
+                    "px-2 py-1 text-11": !input,
+                    "cursor-not-allowed text-secondary": disabled,
+                    "cursor-pointer hover:bg-layer-transparent-hover": !disabled,
+                  },
+                  buttonClassName
+                )}
+                onClick={toggleDropdown}
+              >
+                {label}
+                {!noChevron && !disabled && <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />}
+              </button>
+            </Combobox.Button>
+          )}
+        </>
+        {isOpen &&
+          createPortal(
+            <Combobox.Options data-prevent-outside-click>
+              <div
+                className={cn(
+                  "z-30 my-1 min-w-48 overflow-y-scroll rounded-md border-[0.5px] border-subtle-1 bg-surface-1 px-2 py-2.5 text-11 whitespace-nowrap focus:outline-none",
+                  optionsClassName
+                )}
+                ref={setPopperElement}
+                style={styles.popper}
+                {...attributes.popper}
+              >
+                <div
+                  className={cn("space-y-1 overflow-y-scroll", {
+                    "max-h-60": maxHeight === "lg",
+                    "max-h-48": maxHeight === "md",
+                    "max-h-36": maxHeight === "rg",
+                    "max-h-28": maxHeight === "sm",
+                  })}
+                >
+                  {children}
+                </div>
               </div>
-            </div>
-          </Combobox.Options>,
-          document.body
-        )}
-    </Combobox>
+            </Combobox.Options>,
+            document.body
+          )}
+      </Combobox>
+    </DropdownContext.Provider>
   );
 }
 
 function Option(props: ICustomSelectItemProps) {
   const { children, value, className } = props;
+  const closeDropdown = useContext(DropdownContext);
+
+  const handleClick = useCallback(() => {
+    // Close dropdown for both new and already-selected options.
+    // Use setTimeout to ensure HeadlessUI's onChange handler fires first for new selections.
+    // For already-selected options, this ensures the dropdown closes since onChange won't fire.
+    setTimeout(() => {
+      closeDropdown();
+    }, 0);
+  }, [closeDropdown]);
+
   return (
     <Combobox.Option
       value={value}
       className={({ active }) =>
         cn(
-          "cursor-pointer select-none truncate rounded px-1 py-1.5 text-custom-text-200 flex items-center justify-between gap-2",
+          "flex cursor-pointer items-center justify-between gap-2 truncate rounded-sm px-1 py-1.5 text-secondary select-none",
           {
-            "bg-custom-background-80": active,
+            "bg-layer-transparent-hover": active,
           },
           className
         )
       }
+      onClick={handleClick}
     >
       {({ selected }) => (
-        <>
+        <div className="flex w-full items-center justify-between gap-2">
           {children}
-          {selected && <Check className="h-3.5 w-3.5 flex-shrink-0" />}
-        </>
+          {selected && <CheckIcon className="h-3.5 w-3.5 flex-shrink-0" />}
+        </div>
       )}
     </Combobox.Option>
   );
diff --git a/packages/ui/src/dropdowns/helper.tsx b/packages/ui/src/dropdowns/helper.tsx
index 97b087105..508686d1c 100644
--- a/packages/ui/src/dropdowns/helper.tsx
+++ b/packages/ui/src/dropdowns/helper.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // FIXME: fix this!!!
 import type { ICustomSearchSelectOption } from "@plane/types";
 
diff --git a/packages/ui/src/dropdowns/index.ts b/packages/ui/src/dropdowns/index.ts
index 617778da2..3f0340afe 100644
--- a/packages/ui/src/dropdowns/index.ts
+++ b/packages/ui/src/dropdowns/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./context-menu";
 export * from "./custom-menu";
 export * from "./custom-select";
diff --git a/packages/ui/src/favorite-star.tsx b/packages/ui/src/favorite-star.tsx
index dce54b172..f79e1dec0 100644
--- a/packages/ui/src/favorite-star.tsx
+++ b/packages/ui/src/favorite-star.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { Star } from "lucide-react";
 import React from "react";
 // helpers
@@ -14,12 +20,12 @@ export function FavoriteStar(props: Props) {
   const { buttonClassName, iconClassName, onClick, selected } = props;
 
   return (
-    <button type="button" className={cn("h-4 w-4 grid place-items-center", buttonClassName)} onClick={onClick}>
+    <button type="button" className={cn("grid h-4 w-4 place-items-center", buttonClassName)} onClick={onClick}>
       <Star
         className={cn(
-          "h-4 w-4 text-custom-text-300 transition-all",
+          "h-4 w-4 text-tertiary transition-all",
           {
-            "fill-yellow-500 stroke-yellow-500": selected,
+            "fill-(--color-label-yellow-icon) stroke-(--color-label-yellow-icon)": selected,
           },
           iconClassName
         )}
diff --git a/packages/ui/src/form-fields/checkbox.tsx b/packages/ui/src/form-fields/checkbox.tsx
index 2aecef8d0..0b44f2ea4 100644
--- a/packages/ui/src/form-fields/checkbox.tsx
+++ b/packages/ui/src/form-fields/checkbox.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 // helpers
 import { cn } from "../utils";
@@ -22,7 +28,7 @@ const Checkbox = React.forwardRef(function Checkbox(props: CheckboxProps, ref: R
   } = props;
 
   return (
-    <div className={cn("relative flex-shrink-0 flex gap-2", containerClassName)}>
+    <div className={cn("relative flex flex-shrink-0 gap-2", containerClassName)}>
       <input
         id={id}
         ref={ref}
@@ -30,12 +36,14 @@ const Checkbox = React.forwardRef(function Checkbox(props: CheckboxProps, ref: R
         name={name}
         checked={checked}
         className={cn(
-          "appearance-none shrink-0 size-4 border rounded-[3px] focus:outline-1 focus:outline-offset-4 focus:outline-custom-primary-50 cursor-pointer",
+          "size-4 shrink-0 cursor-pointer appearance-none rounded-[3px] border focus:outline-1 focus:outline-offset-4 focus:outline-accent-strong",
           {
-            "border-custom-border-200 bg-custom-background-80 cursor-not-allowed": disabled,
-            "border-custom-border-300 hover:border-custom-border-400 bg-transparent": !disabled,
-            "border-custom-primary-40 hover:border-custom-primary-40 bg-custom-primary-100 hover:bg-custom-primary-200":
+            "cursor-not-allowed border-subtle bg-layer-1": disabled,
+            "border-strong bg-transparent hover:border-strong-1": !disabled,
+            "border-accent-strong-40 hover:border-accent-strong-40 bg-accent-primary hover:bg-accent-primary/80":
               !disabled && (checked || indeterminate),
+
+            "border-none": checked,
           },
           className
         )}
@@ -44,10 +52,10 @@ const Checkbox = React.forwardRef(function Checkbox(props: CheckboxProps, ref: R
       />
       <svg
         className={cn(
-          "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 size-4 p-0.5 pointer-events-none outline-none hidden stroke-white",
+          "pointer-events-none absolute top-1/2 left-1/2 hidden size-4 -translate-x-1/2 -translate-y-1/2 p-0.5 text-on-color outline-none",
           {
             block: checked,
-            "stroke-custom-text-400 opacity-40": disabled,
+            "text-placeholder opacity-40": disabled,
           },
           iconClassName
         )}
@@ -63,9 +71,9 @@ const Checkbox = React.forwardRef(function Checkbox(props: CheckboxProps, ref: R
       </svg>
       <svg
         className={cn(
-          "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 size-4 p-0.5 pointer-events-none outline-none stroke-white hidden",
+          "pointer-events-none absolute top-1/2 left-1/2 hidden size-4 -translate-x-1/2 -translate-y-1/2 stroke-white p-0.5 outline-none",
           {
-            "stroke-custom-text-400 opacity-40": disabled,
+            "stroke-placeholder opacity-40": disabled,
             block: indeterminate && !checked,
           },
           iconClassName
diff --git a/packages/ui/src/form-fields/index.ts b/packages/ui/src/form-fields/index.ts
index 7c08999a6..bfa406577 100644
--- a/packages/ui/src/form-fields/index.ts
+++ b/packages/ui/src/form-fields/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./input";
 export * from "./textarea";
 export * from "./input-color-picker";
diff --git a/packages/ui/src/form-fields/input-color-picker.tsx b/packages/ui/src/form-fields/input-color-picker.tsx
index 39e18106b..1af0df22b 100644
--- a/packages/ui/src/form-fields/input-color-picker.tsx
+++ b/packages/ui/src/form-fields/input-color-picker.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { Popover, Transition } from "@headlessui/react";
 import * as React from "react";
 import * as ColorPicker from "react-color";
@@ -48,66 +54,57 @@ export function InputColorPicker(props: InputColorPickerProps) {
         onChange={handleInputChange}
         hasError={hasError}
         placeholder={placeholder}
-        className={cn("border-[0.5px] border-custom-border-200", className)}
+        className={cn("border-[0.5px] border-subtle", className)}
         style={style}
       />
 
-      <Popover as="div" className="absolute right-1 top-1/2 z-10 -translate-y-1/2">
-        {({ open }) => {
-          if (open) {
-          }
-          return (
-            <>
-              <Popover.Button as={React.Fragment}>
-                <Button
-                  ref={setReferenceElement}
-                  variant="neutral-primary"
-                  size="sm"
-                  className="border-none !bg-transparent"
+      <Popover as="div" className="absolute top-1/2 right-1 z-10 -translate-y-1/2">
+        {() => (
+          <>
+            <Popover.Button as={React.Fragment}>
+              <Button ref={setReferenceElement} variant="neutral-primary" className="border-none !bg-transparent">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="14"
+                  height="14"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  className="lucide lucide-palette"
                 >
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    width="14"
-                    height="14"
-                    viewBox="0 0 24 24"
-                    fill="none"
-                    stroke="currentColor"
-                    strokeWidth="2"
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    className="lucide lucide-palette"
-                  >
-                    <circle cx="13.5" cy="6.5" r=".5" />
-                    <circle cx="17.5" cy="10.5" r=".5" />
-                    <circle cx="8.5" cy="7.5" r=".5" />
-                    <circle cx="6.5" cy="12.5" r=".5" />
-                    <path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z" />
-                  </svg>
-                </Button>
-              </Popover.Button>
-              <Transition
-                as={React.Fragment}
-                enter="transition ease-out duration-200"
-                enterFrom="opacity-0 translate-y-1"
-                enterTo="opacity-100 translate-y-0"
-                leave="transition ease-in duration-150"
-                leaveFrom="opacity-100 translate-y-0"
-                leaveTo="opacity-0 translate-y-1"
-              >
-                <Popover.Panel>
-                  <div
-                    className="z-10 overflow-hidden rounded border border-custom-border-200 bg-custom-background-100 shadow-custom-shadow-rg"
-                    ref={setPopperElement}
-                    style={styles.popper}
-                    {...attributes.popper}
-                  >
-                    <ColorPicker.SketchPicker color={value} onChange={handleColorChange} />
-                  </div>
-                </Popover.Panel>
-              </Transition>
-            </>
-          );
-        }}
+                  <circle cx="13.5" cy="6.5" r=".5" />
+                  <circle cx="17.5" cy="10.5" r=".5" />
+                  <circle cx="8.5" cy="7.5" r=".5" />
+                  <circle cx="6.5" cy="12.5" r=".5" />
+                  <path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z" />
+                </svg>
+              </Button>
+            </Popover.Button>
+            <Transition
+              as={React.Fragment}
+              enter="transition ease-out duration-200"
+              enterFrom="opacity-0 translate-y-1"
+              enterTo="opacity-100 translate-y-0"
+              leave="transition ease-in duration-150"
+              leaveFrom="opacity-100 translate-y-0"
+              leaveTo="opacity-0 translate-y-1"
+            >
+              <Popover.Panel>
+                <div
+                  className="z-10 overflow-hidden rounded-sm border border-subtle bg-surface-1 shadow-raised-200"
+                  ref={setPopperElement}
+                  style={styles.popper}
+                  {...attributes.popper}
+                >
+                  <ColorPicker.SketchPicker color={value} onChange={handleColorChange} />
+                </div>
+              </Popover.Panel>
+            </Transition>
+          </>
+        )}
       </Popover>
     </div>
   );
diff --git a/packages/ui/src/form-fields/input.tsx b/packages/ui/src/form-fields/input.tsx
index 1263289ba..029383835 100644
--- a/packages/ui/src/form-fields/input.tsx
+++ b/packages/ui/src/form-fields/input.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 // helpers
 import { cn } from "../utils";
@@ -7,7 +13,6 @@ export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement>
   inputSize?: "xs" | "sm" | "md";
   hasError?: boolean;
   className?: string;
-  autoComplete?: "on" | "off";
 }
 
 const Input = React.forwardRef(function Input(props: InputProps, ref: React.ForwardedRef<HTMLInputElement>) {
@@ -30,13 +35,13 @@ const Input = React.forwardRef(function Input(props: InputProps, ref: React.Forw
       type={type}
       name={name}
       className={cn(
-        "block rounded-md bg-transparent text-sm placeholder-custom-text-400 focus:outline-none",
+        "placeholder-tertiary block rounded-md border-subtle-1 bg-layer-2 text-13 focus:outline-none",
         {
-          "rounded-md border-[0.5px] border-custom-border-200": mode === "primary",
-          "rounded border-none bg-transparent ring-0 transition-all focus:ring-1 focus:ring-custom-primary":
+          "rounded-md border-[0.5px]": mode === "primary",
+          "rounded-sm border-none bg-transparent ring-0 transition-all focus:ring-1 focus:ring-accent-strong":
             mode === "transparent",
-          "rounded border-none bg-transparent ring-0": mode === "true-transparent",
-          "border-red-500": hasError,
+          "rounded-sm border-none bg-transparent ring-0": mode === "true-transparent",
+          "border-danger-strong": hasError,
           "px-1.5 py-1": inputSize === "xs",
           "px-3 py-2": inputSize === "sm",
           "p-3": inputSize === "md",
diff --git a/packages/ui/src/form-fields/password/helper.tsx b/packages/ui/src/form-fields/password/helper.tsx
index cb93f7dbd..f5560be25 100644
--- a/packages/ui/src/form-fields/password/helper.tsx
+++ b/packages/ui/src/form-fields/password/helper.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { E_PASSWORD_STRENGTH } from "@plane/constants";
 
 export interface StrengthInfo {
@@ -14,13 +20,13 @@ export const getStrengthInfo = (strength: E_PASSWORD_STRENGTH): StrengthInfo =>
     case E_PASSWORD_STRENGTH.EMPTY:
       return {
         message: "Please enter your password",
-        textColor: "text-custom-text-100",
+        textColor: "text-primary",
         activeFragments: 0,
       };
     case E_PASSWORD_STRENGTH.LENGTH_NOT_VALID:
       return {
         message: "Password is too short",
-        textColor: "text-red-500",
+        textColor: "text-danger-primary",
         activeFragments: 1,
       };
     case E_PASSWORD_STRENGTH.STRENGTH_NOT_VALID:
@@ -32,13 +38,13 @@ export const getStrengthInfo = (strength: E_PASSWORD_STRENGTH): StrengthInfo =>
     case E_PASSWORD_STRENGTH.STRENGTH_VALID:
       return {
         message: "Password is strong",
-        textColor: "text-green-500",
+        textColor: "text-success-primary",
         activeFragments: 3,
       };
     default:
       return {
         message: "Please enter your password",
-        textColor: "text-custom-text-100",
+        textColor: "text-primary",
         activeFragments: 0,
       };
   }
@@ -49,17 +55,17 @@ export const getStrengthInfo = (strength: E_PASSWORD_STRENGTH): StrengthInfo =>
  */
 export const getFragmentColor = (fragmentIndex: number, activeFragments: number): string => {
   if (fragmentIndex >= activeFragments) {
-    return "bg-custom-background-80";
+    return "bg-layer-1";
   }
 
   switch (activeFragments) {
     case 1:
-      return "bg-red-500";
+      return "bg-danger-primary";
     case 2:
       return "bg-orange-500";
     case 3:
-      return "bg-green-500";
+      return "bg-success-primary";
     default:
-      return "bg-custom-background-80";
+      return "bg-layer-1";
   }
 };
diff --git a/packages/ui/src/form-fields/password/index.ts b/packages/ui/src/form-fields/password/index.ts
index e391edbd1..3953436d8 100644
--- a/packages/ui/src/form-fields/password/index.ts
+++ b/packages/ui/src/form-fields/password/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./indicator";
 export * from "./helper";
 export * from "./password-input";
diff --git a/packages/ui/src/form-fields/password/indicator.tsx b/packages/ui/src/form-fields/password/indicator.tsx
index a2eabbfbf..21e2dc80d 100644
--- a/packages/ui/src/form-fields/password/indicator.tsx
+++ b/packages/ui/src/form-fields/password/indicator.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { CircleCheck } from "lucide-react";
 import React from "react";
 import { E_PASSWORD_STRENGTH } from "@plane/constants";
@@ -29,12 +35,12 @@ export function PasswordStrengthIndicator({
     <div className={cn("space-y-3")}>
       {/* Strength Indicator */}
       <div className="space-y-2">
-        <div className="flex gap-1 w-full transition-all duration-300 ease-linear">
+        <div className="flex w-full gap-1 transition-all duration-300 ease-linear">
           {[0, 1, 2].map((fragmentIndex) => (
             <div
               key={fragmentIndex}
               className={cn(
-                "h-1 flex-1 rounded-sm transition-all duration-300 ease-in-out",
+                "h-1 flex-1 rounded-xs transition-all duration-300 ease-in-out",
                 getFragmentColor(fragmentIndex, strengthInfo.activeFragments)
               )}
             />
@@ -42,7 +48,7 @@ export function PasswordStrengthIndicator({
         </div>
 
         {/* Strength Message */}
-        {password && <p className={cn("text-sm font-medium", strengthInfo.textColor)}>{strengthInfo.message}</p>}
+        {password && <p className={cn("!text-13 font-medium", strengthInfo.textColor)}>{strengthInfo.message}</p>}
       </div>
 
       {/* Criteria list */}
@@ -53,15 +59,15 @@ export function PasswordStrengthIndicator({
               <div className="flex items-center justify-center p-0.5">
                 <CircleCheck
                   className={cn("h-3 w-3 flex-shrink-0", {
-                    "text-green-500": criterion.isValid,
-                    "text-custom-text-100": !criterion.isValid,
+                    "text-success-primary": criterion.isValid,
+                    "text-primary": !criterion.isValid,
                   })}
                 />
               </div>
               <span
-                className={cn("text-xs", {
-                  "text-green-500": criterion.isValid,
-                  "text-custom-text-100": !criterion.isValid,
+                className={cn("!text-11", {
+                  "text-success-primary": criterion.isValid,
+                  "text-primary": !criterion.isValid,
                 })}
               >
                 {criterion.label}
diff --git a/packages/ui/src/form-fields/password/password-input.tsx b/packages/ui/src/form-fields/password/password-input.tsx
index b5165e1bc..3127122fa 100644
--- a/packages/ui/src/form-fields/password/password-input.tsx
+++ b/packages/ui/src/form-fields/password/password-input.tsx
@@ -1,9 +1,15 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { Eye, EyeClosed } from "lucide-react";
-import React, { useState } from "react";
+import { useState } from "react";
 import { Tooltip } from "@plane/propel/tooltip";
 import { cn } from "@plane/utils";
 
-interface PasswordInputProps {
+type TPasswordInputProps = {
   id: string;
   value: string;
   onChange: (value: string) => void;
@@ -11,7 +17,8 @@ interface PasswordInputProps {
   className?: string;
   showToggle?: boolean;
   error?: boolean;
-}
+  autoComplete?: React.HTMLInputAutoCompleteAttribute;
+};
 
 export function PasswordInput({
   id,
@@ -21,7 +28,8 @@ export function PasswordInput({
   className,
   showToggle = true,
   error = false,
-}: PasswordInputProps) {
+  autoComplete = "off",
+}: TPasswordInputProps) {
   const [showPassword, setShowPassword] = useState(false);
   return (
     <div className="relative">
@@ -31,33 +39,34 @@ export function PasswordInput({
         value={value}
         onChange={(e) => onChange(e.target.value)}
         className={cn(
-          "w-full px-3 py-2 pr-10 text-custom-text-200 border rounded-md bg-custom-background-100 focus:outline-none focus:ring-2 focus:ring-custom-primary-100 placeholder:text-custom-text-400 focus:border-transparent transition-all duration-200",
+          "w-full rounded-md border bg-surface-1 px-3 py-2 pr-10 text-secondary transition-all duration-200 placeholder:text-placeholder focus:border-transparent focus:ring-2 focus:ring-accent-strong focus:outline-none",
           {
-            "border-custom-border-300": !error,
-            "border-red-500": error,
+            "border-strong": !error,
+            "border-danger-strong": error,
           },
           className
         )}
         placeholder={placeholder}
+        autoComplete={autoComplete}
       />
       {showToggle && (
         <Tooltip tooltipContent={showPassword ? "Hide password" : "Show password"} position="top">
           <button
             type="button"
             onClick={() => setShowPassword(!showPassword)}
-            className="absolute inset-y-0 right-0 pr-3 flex items-center text-custom-text-200 hover:text-custom-text-100 transition-colors duration-200"
+            className="absolute inset-y-0 right-0 flex items-center pr-3 text-secondary transition-colors duration-200 hover:text-primary"
           >
-            <div className="relative w-4 h-4">
+            <div className="relative h-4 w-4">
               <Eye
                 className={cn(
                   "absolute inset-0 h-4 w-4 transition-all duration-300 ease-in-out",
-                  showPassword ? "opacity-0 scale-75 rotate-12" : "opacity-100 scale-100 rotate-0"
+                  showPassword ? "scale-75 rotate-12 opacity-0" : "scale-100 rotate-0 opacity-100"
                 )}
               />
               <EyeClosed
                 className={cn(
                   "absolute inset-0 h-4 w-4 transition-all duration-300 ease-in-out",
-                  showPassword ? "opacity-100 scale-100 rotate-0" : "opacity-0 scale-75 -rotate-12"
+                  showPassword ? "scale-100 rotate-0 opacity-100" : "scale-75 -rotate-12 opacity-0"
                 )}
               />
             </div>
diff --git a/packages/ui/src/form-fields/root.tsx b/packages/ui/src/form-fields/root.tsx
index 393734853..602e266d9 100644
--- a/packages/ui/src/form-fields/root.tsx
+++ b/packages/ui/src/form-fields/root.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 import { cn } from "@plane/utils";
 
@@ -10,7 +16,7 @@ interface LabelProps {
 
 export function Label({ htmlFor, children, className }: LabelProps) {
   return (
-    <label htmlFor={htmlFor} className={cn("block text-sm font-medium text-custom-text-100", className)}>
+    <label htmlFor={htmlFor} className={cn("block text-13 font-medium text-primary", className)}>
       {children}
     </label>
   );
@@ -30,7 +36,7 @@ export function FormField({ label, htmlFor, children, className, optional = fals
     <div className={cn("flex flex-col gap-1.5", className)}>
       <Label htmlFor={htmlFor}>
         {label}
-        {optional && <span className="text-custom-text-400 text-sm"> (optional)</span>}
+        {optional && <span className="text-13 text-placeholder"> (optional)</span>}
       </Label>
       {children}
     </div>
@@ -48,10 +54,10 @@ export function ValidationMessage({ type, message, className }: ValidationMessag
   return (
     <p
       className={cn(
-        "text-sm",
+        "text-13",
         {
-          "text-red-500": type === "error",
-          "text-green-500": type === "success",
+          "text-danger-primary": type === "error",
+          "text-success-primary": type === "success",
         },
         className
       )}
diff --git a/packages/ui/src/form-fields/textarea.tsx b/packages/ui/src/form-fields/textarea.tsx
index 970fa977f..f5a747b9c 100644
--- a/packages/ui/src/form-fields/textarea.tsx
+++ b/packages/ui/src/form-fields/textarea.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React, { useRef } from "react";
 // helpers
 import { useAutoResizeTextArea } from "../hooks/use-auto-resize-textarea";
@@ -37,17 +43,17 @@ const TextArea = React.forwardRef(function TextArea(
       ref={textAreaRef}
       value={value}
       className={cn(
-        "no-scrollbar w-full bg-transparent placeholder-custom-text-400 outline-none",
+        "no-scrollbar w-full bg-layer-2 placeholder-(--text-color-placeholder) outline-none",
         {
-          "rounded-md border-[0.5px] border-custom-border-200": mode === "primary",
-          "focus:ring-theme rounded border-none bg-transparent ring-0 transition-all focus:ring-1":
+          "rounded-md border-[0.5px] border-subtle-1": mode === "primary",
+          "focus:ring-theme rounded-sm border-none bg-transparent ring-0 transition-all focus:ring-1":
             mode === "transparent",
-          "rounded border-none bg-transparent ring-0": mode === "true-transparent",
+          "rounded-sm border-none bg-transparent ring-0": mode === "true-transparent",
           "px-1.5 py-1": textAreaSize === "xs",
           "px-3 py-2": textAreaSize === "sm",
           "p-3": textAreaSize === "md",
-          "border-red-500": hasError,
-          "bg-red-100": hasError && mode === "primary",
+          "border-danger-strong": hasError,
+          "bg-danger-subtle": hasError && mode === "primary",
         },
         className
       )}
diff --git a/packages/ui/src/header/header.tsx b/packages/ui/src/header/header.tsx
index 2ceb13137..81ed15dce 100644
--- a/packages/ui/src/header/header.tsx
+++ b/packages/ui/src/header/header.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 import { ERowVariant, Row } from "../row";
 import { cn } from "../utils";
@@ -42,7 +48,7 @@ function LeftItem(props: HeaderProps) {
   return (
     <div
       className={cn(
-        "flex flex-wrap items-center gap-2 overflow-ellipsis whitespace-nowrap max-w-[80%] flex-grow",
+        "flex max-w-[80%] flex-grow flex-wrap items-center gap-2 overflow-ellipsis whitespace-nowrap",
         props.className
       )}
     >
@@ -57,7 +63,7 @@ function RightItem(props: HeaderProps) {
   return (
     <div
       className={cn(
-        "flex justify-end gap-3 w-auto items-center",
+        "flex w-auto items-center justify-end gap-2",
         {
           "items-baseline": variant === EHeaderVariant.TERNARY,
         },
diff --git a/packages/ui/src/header/helper.tsx b/packages/ui/src/header/helper.tsx
index a2d21cd37..8c013a535 100644
--- a/packages/ui/src/header/helper.tsx
+++ b/packages/ui/src/header/helper.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export enum EHeaderVariant {
   PRIMARY = "primary",
   SECONDARY = "secondary",
@@ -10,11 +16,9 @@ export interface IHeaderProperties {
 }
 export const headerStyle: IHeaderProperties = {
   [EHeaderVariant.PRIMARY]:
-    "relative flex w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 bg-custom-sidebar-background-100 bg-custom-sidebar-background-100 z-[18]",
-  [EHeaderVariant.SECONDARY]:
-    "!py-0  overflow-y-hidden border-b border-custom-border-200 justify-between bg-custom-background-100 z-[15]",
-  [EHeaderVariant.TERNARY]:
-    "flex flex-wrap justify-between py-2  border-b border-custom-border-200 gap-2 bg-custom-background-100 z-[12]",
+    "relative flex w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 bg-surface-1 bg-surface-1 z-[18]",
+  [EHeaderVariant.SECONDARY]: "!py-0  overflow-y-hidden border-b border-subtle justify-between bg-surface-1 z-[15]",
+  [EHeaderVariant.TERNARY]: "flex flex-wrap justify-between py-2  border-b border-subtle gap-2 bg-surface-1 z-[12]",
 };
 export const minHeights: IHeaderProperties = {
   [EHeaderVariant.PRIMARY]: "",
diff --git a/packages/ui/src/header/index.ts b/packages/ui/src/header/index.ts
index 49ac70fe2..f595712fc 100644
--- a/packages/ui/src/header/index.ts
+++ b/packages/ui/src/header/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./header";
diff --git a/packages/ui/src/hooks/use-auto-resize-textarea.ts b/packages/ui/src/hooks/use-auto-resize-textarea.ts
index 326319f24..ae670e3c4 100644
--- a/packages/ui/src/hooks/use-auto-resize-textarea.ts
+++ b/packages/ui/src/hooks/use-auto-resize-textarea.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useLayoutEffect } from "react";
 
 export const useAutoResizeTextArea = (
diff --git a/packages/ui/src/hooks/use-dropdown-key-down.tsx b/packages/ui/src/hooks/use-dropdown-key-down.tsx
index 2dfe6532e..98cc97b8a 100644
--- a/packages/ui/src/hooks/use-dropdown-key-down.tsx
+++ b/packages/ui/src/hooks/use-dropdown-key-down.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useCallback } from "react";
 
 type TUseDropdownKeyDown = {
diff --git a/packages/ui/src/hooks/use-dropdown-key-pressed.ts b/packages/ui/src/hooks/use-dropdown-key-pressed.ts
index 15552d34d..881079a11 100644
--- a/packages/ui/src/hooks/use-dropdown-key-pressed.ts
+++ b/packages/ui/src/hooks/use-dropdown-key-pressed.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { useCallback } from "react";
 
 type TUseDropdownKeyPressed = {
diff --git a/packages/ui/src/hooks/use-platform-os.ts b/packages/ui/src/hooks/use-platform-os.ts
index e07f19ad4..5c56a5547 100644
--- a/packages/ui/src/hooks/use-platform-os.ts
+++ b/packages/ui/src/hooks/use-platform-os.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export const usePlatformOS = () => {
   const userAgent = window.navigator.userAgent;
   const isMobile = /iPhone|iPad|iPod|Android/i.test(userAgent);
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
index 36aeaa976..31194781a 100644
--- a/packages/ui/src/index.ts
+++ b/packages/ui/src/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./avatar";
 export * from "./badge";
 export * from "./breadcrumbs";
@@ -30,5 +36,4 @@ export * from "./tag";
 export * from "./tooltip";
 export * from "./typography";
 export * from "./utils";
-export * from "./billing";
 export * from "./oauth";
diff --git a/packages/ui/src/link/block.tsx b/packages/ui/src/link/block.tsx
index 65c472282..6d50522f8 100644
--- a/packages/ui/src/link/block.tsx
+++ b/packages/ui/src/link/block.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 // plane utils
 import { calculateTimeAgo, cn, getIconForLink } from "@plane/utils";
@@ -22,14 +27,14 @@ export function LinkItemBlock(props: TLinkItemBlockProps) {
   return (
     <div
       onClick={onClick}
-      className="cursor-pointer group flex items-center bg-custom-background-100 px-4 w-[230px] h-[56px] border-[0.5px] border-custom-border-200 rounded-md gap-4"
+      className="group flex h-[56px] w-[230px] cursor-pointer items-center gap-4 rounded-md border-[0.5px] border-subtle bg-surface-1 px-4"
     >
-      <div className="flex-shrink-0 size-8 rounded p-2 bg-custom-background-90 grid place-items-center">
-        <Icon className="size-4 stroke-2 text-custom-text-350 group-hover:text-custom-text-100" />
+      <div className="grid size-8 flex-shrink-0 place-items-center rounded-sm bg-surface-2 p-2">
+        <Icon className="size-4 stroke-2 text-tertiary group-hover:text-primary" />
       </div>
       <div className="flex-1 truncate">
-        <div className="text-sm font-medium truncate">{title}</div>
-        {createdAt && <div className="text-xs font-medium text-custom-text-400">{calculateTimeAgo(createdAt)}</div>}
+        <div className="truncate text-13 font-medium">{title}</div>
+        {createdAt && <div className="text-11 font-medium text-placeholder">{calculateTimeAgo(createdAt)}</div>}
       </div>
       {menuItems && (
         <div className="hidden group-hover:block">
@@ -42,8 +47,8 @@ export function LinkItemBlock(props: TLinkItemBlockProps) {
                   e.stopPropagation();
                   item.action();
                 }}
-                className={cn("flex items-center gap-2 w-full ", {
-                  "text-custom-text-400": item.disabled,
+                className={cn("flex w-full items-center gap-2", {
+                  "text-placeholder": item.disabled,
                 })}
                 disabled={item.disabled}
               >
@@ -52,8 +57,8 @@ export function LinkItemBlock(props: TLinkItemBlockProps) {
                   <h5>{item.title}</h5>
                   {item.description && (
                     <p
-                      className={cn("text-custom-text-300 whitespace-pre-line", {
-                        "text-custom-text-400": item.disabled,
+                      className={cn("whitespace-pre-line text-tertiary", {
+                        "text-placeholder": item.disabled,
                       })}
                     >
                       {item.description}
diff --git a/packages/ui/src/link/index.ts b/packages/ui/src/link/index.ts
index 086dec913..25a317fbc 100644
--- a/packages/ui/src/link/index.ts
+++ b/packages/ui/src/link/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./block";
diff --git a/packages/ui/src/loader.tsx b/packages/ui/src/loader.tsx
index 7f89514a9..836a412bb 100644
--- a/packages/ui/src/loader.tsx
+++ b/packages/ui/src/loader.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 // helpers
 import { cn } from "./utils";
@@ -22,9 +28,7 @@ type ItemProps = {
 };
 
 function Item({ height = "auto", width = "auto", className = "" }: ItemProps) {
-  return (
-    <div className={cn("rounded-md bg-custom-background-80", className)} style={{ height: height, width: width }} />
-  );
+  return <div className={cn("rounded-md bg-layer-1", className)} style={{ height: height, width: width }} />;
 }
 
 Loader.Item = Item;
diff --git a/packages/ui/src/modals/alert-modal.tsx b/packages/ui/src/modals/alert-modal.tsx
index 329b2ae8f..5565ab02c 100644
--- a/packages/ui/src/modals/alert-modal.tsx
+++ b/packages/ui/src/modals/alert-modal.tsx
@@ -1,9 +1,15 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { LucideIcon } from "lucide-react";
 import { AlertTriangle, Info } from "lucide-react";
 import React from "react";
 // components
-import type { TButtonVariant } from "../button";
-import { Button } from "../button";
+import type { TButtonVariant } from "@plane/propel/button";
+import { Button } from "@plane/propel/button";
 import { cn } from "../utils";
 import { EModalPosition, EModalWidth } from "./constants";
 import { ModalCore } from "./modal-core";
@@ -28,6 +34,7 @@ type Props = {
   title: string;
   variant?: TModalVariant;
   width?: EModalWidth;
+  customIcon?: React.ReactNode;
 };
 
 const VARIANT_ICONS: Record<TModalVariant, LucideIcon> = {
@@ -36,13 +43,13 @@ const VARIANT_ICONS: Record<TModalVariant, LucideIcon> = {
 };
 
 const BUTTON_VARIANTS: Record<TModalVariant, TButtonVariant> = {
-  danger: "danger",
+  danger: "error-fill",
   primary: "primary",
 };
 
 const VARIANT_CLASSES: Record<TModalVariant, string> = {
-  danger: "bg-red-500/20 text-red-500",
-  primary: "bg-custom-primary-100/20 text-custom-primary-100",
+  danger: "bg-danger-subtle text-danger-primary",
+  primary: "bg-accent-primary/20 text-accent-primary",
 };
 
 export function AlertModalCore(props: Props) {
@@ -62,33 +69,34 @@ export function AlertModalCore(props: Props) {
     title,
     variant = "danger",
     width = EModalWidth.XL,
+    customIcon,
   } = props;
 
   const Icon = VARIANT_ICONS[variant];
 
   return (
     <ModalCore isOpen={isOpen} handleClose={handleClose} position={position} width={width}>
-      <div className="p-5 flex flex-col sm:flex-row items-center sm:items-start gap-4">
+      <div className="flex flex-col items-center gap-4 p-5 sm:flex-row sm:items-start">
         {!hideIcon && (
           <span
             className={cn(
-              "flex-shrink-0 grid place-items-center rounded-full size-12 sm:size-10",
+              "grid size-12 flex-shrink-0 place-items-center rounded-full sm:size-10",
               VARIANT_CLASSES[variant]
             )}
           >
-            <Icon className="size-5" aria-hidden="true" />
+            {customIcon ? <>{customIcon}</> : <Icon className="size-5" aria-hidden="true" />}
           </span>
         )}
         <div className="text-center sm:text-left">
-          <h3 className="text-lg font-medium">{title}</h3>
-          <p className="mt-1 text-sm text-custom-text-200">{content}</p>
+          <h3 className="text-16 font-medium">{title}</h3>
+          <p className="mt-1 text-13 text-secondary">{content}</p>
         </div>
       </div>
-      <div className="px-5 py-4 flex flex-col-reverse sm:flex-row sm:justify-end gap-2 border-t-[0.5px] border-custom-border-200">
-        <Button variant="neutral-primary" size="sm" onClick={handleClose}>
+      <div className="flex flex-col-reverse gap-2 border-t-[0.5px] border-subtle px-5 py-4 sm:flex-row sm:justify-end">
+        <Button variant="secondary" onClick={handleClose}>
           {secondaryButtonText}
         </Button>
-        <Button variant={BUTTON_VARIANTS[variant]} size="sm" tabIndex={1} onClick={handleSubmit} loading={isSubmitting}>
+        <Button variant={BUTTON_VARIANTS[variant]} tabIndex={1} onClick={handleSubmit} loading={isSubmitting}>
           {isSubmitting ? primaryButtonText.loading : primaryButtonText.default}
         </Button>
       </div>
diff --git a/packages/ui/src/modals/constants.ts b/packages/ui/src/modals/constants.ts
index e1eccd941..e094d07bd 100644
--- a/packages/ui/src/modals/constants.ts
+++ b/packages/ui/src/modals/constants.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export enum EModalPosition {
   TOP = "flex items-center justify-center text-center mx-4 my-10 md:my-20",
   CENTER = "flex items-end sm:items-center justify-center p-4 min-h-full",
diff --git a/packages/ui/src/modals/index.ts b/packages/ui/src/modals/index.ts
index 964864f7b..41737eba7 100644
--- a/packages/ui/src/modals/index.ts
+++ b/packages/ui/src/modals/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./alert-modal";
 export * from "./constants";
 export * from "./modal-core";
diff --git a/packages/ui/src/modals/modal-core.tsx b/packages/ui/src/modals/modal-core.tsx
index 1b629e35d..ede3e34b8 100644
--- a/packages/ui/src/modals/modal-core.tsx
+++ b/packages/ui/src/modals/modal-core.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { Dialog, Transition } from "@headlessui/react";
 import React, { Fragment } from "react";
 // constants
@@ -35,7 +41,7 @@ export function ModalCore(props: Props) {
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
+          <div className="fixed inset-0 bg-backdrop transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-30 overflow-y-auto">
@@ -51,7 +57,7 @@ export function ModalCore(props: Props) {
             >
               <Dialog.Panel
                 className={cn(
-                  "relative transform rounded-lg bg-custom-background-100 text-left shadow-custom-shadow-md transition-all w-full",
+                  "relative w-full transform rounded-lg bg-surface-1 text-left shadow-raised-200 transition-all",
                   width,
                   className
                 )}
diff --git a/packages/ui/src/oauth/index.ts b/packages/ui/src/oauth/index.ts
index 3491b43f7..200a2107a 100644
--- a/packages/ui/src/oauth/index.ts
+++ b/packages/ui/src/oauth/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./oauth-options";
diff --git a/packages/ui/src/oauth/oauth-button.tsx b/packages/ui/src/oauth/oauth-button.tsx
index 9995ead89..002b0c5dc 100644
--- a/packages/ui/src/oauth/oauth-button.tsx
+++ b/packages/ui/src/oauth/oauth-button.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 import { cn } from "../utils";
 
@@ -17,14 +23,16 @@ const OAuthButton = React.forwardRef(function OAuthButton(
     <button
       ref={ref}
       className={cn(
-        "flex h-9 w-full items-center justify-center gap-2 rounded-md border border-custom-border-300 px-4 py-2.5 text-sm font-medium text-custom-text-100 duration-300 bg-onboarding-background-200 hover:bg-onboarding-background-300",
+        "bg-onboarding-background-200 hover:bg-onboarding-background-300 flex h-9 w-full items-center justify-center gap-2 rounded-md border border-strong px-4 py-2.5 text-13 font-medium text-primary duration-300",
         className
       )}
       {...rest}
     >
       <div className="flex flex-shrink-0 items-center justify-center">{icon}</div>
       {!compact && (
-        <div className="flex flex-grow items-center justify-center transition-opacity duration-300">{text}</div>
+        <span className="flex flex-grow items-center justify-center text-body-sm-regular transition-opacity duration-300">
+          {text}
+        </span>
       )}
     </button>
   );
diff --git a/packages/ui/src/oauth/oauth-options.tsx b/packages/ui/src/oauth/oauth-options.tsx
index 019b872eb..0e0c01ed0 100644
--- a/packages/ui/src/oauth/oauth-options.tsx
+++ b/packages/ui/src/oauth/oauth-options.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 import { cn } from "../utils";
 import { OAuthButton } from "./oauth-button";
@@ -13,13 +19,13 @@ export type TOAuthOption = {
 type OAuthOptionsProps = {
   options: TOAuthOption[];
   compact?: boolean;
-
+  showDivider?: boolean;
   className?: string;
   containerClassName?: string;
 };
 
 export function OAuthOptions(props: OAuthOptionsProps) {
-  const { options, compact = false, className = "", containerClassName = "" } = props;
+  const { options, compact = false, showDivider = true, className = "", containerClassName = "" } = props;
 
   // Filter enabled options
   const enabledOptions = options.filter((option) => option.enabled !== false);
@@ -47,11 +53,13 @@ export function OAuthOptions(props: OAuthOptionsProps) {
         ))}
       </div>
 
-      <div className="mt-4 flex items-center transition-all duration-300">
-        <hr className="w-full border-custom-border-300 transition-colors duration-300" />
-        <p className="mx-3 flex-shrink-0 text-center text-sm text-custom-text-400 transition-colors duration-300">or</p>
-        <hr className="w-full border-custom-border-300 transition-colors duration-300" />
-      </div>
+      {showDivider && (
+        <div className="mt-4 flex items-center transition-all duration-300">
+          <hr className="w-full border-strong transition-colors duration-300" />
+          <p className="mx-3 flex-shrink-0 text-center text-13 text-placeholder transition-colors duration-300">or</p>
+          <hr className="w-full border-strong transition-colors duration-300" />
+        </div>
+      )}
     </div>
   );
 }
diff --git a/packages/ui/src/popovers/index.ts b/packages/ui/src/popovers/index.ts
index 4a83d3114..e60cea9a4 100644
--- a/packages/ui/src/popovers/index.ts
+++ b/packages/ui/src/popovers/index.ts
@@ -1,2 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./popover";
 export * from "./popover-menu";
diff --git a/packages/ui/src/popovers/popover-menu.stories.tsx b/packages/ui/src/popovers/popover-menu.stories.tsx
index 4e8a56cda..292cc1b55 100644
--- a/packages/ui/src/popovers/popover-menu.stories.tsx
+++ b/packages/ui/src/popovers/popover-menu.stories.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { Meta, StoryObj } from "@storybook/react";
 import React from "react";
 import { PopoverMenu } from "./popover-menu";
@@ -16,7 +22,7 @@ const meta: Meta<typeof PopoverMenu<TPopoverMenu>> = {
   tags: ["autodocs"],
   args: {
     popperPosition: "bottom-start",
-    panelClassName: "rounded bg-gray-100 p-2",
+    panelClassName: "rounded-sm bg-gray-100 p-2",
     data: [
       { id: 1, name: "John Doe" },
       { id: 2, name: "Jane Doe" },
@@ -25,7 +31,7 @@ const meta: Meta<typeof PopoverMenu<TPopoverMenu>> = {
     ],
     keyExtractor: (item, index: number) => `${item.id}-${index}`,
     render: (item: TPopoverMenu) => (
-      <div className="text-sm text-gray-600 hover:text-gray-700 rounded-sm cursor-pointer hover:bg-gray-200 transition-all px-1.5 py-0.5 capitalize">
+      <div className="text-gray-600 hover:text-gray-700 hover:bg-gray-200 cursor-pointer rounded-xs px-1.5 py-0.5 text-13 capitalize transition-all">
         {item.name}
       </div>
     ),
diff --git a/packages/ui/src/popovers/popover-menu.tsx b/packages/ui/src/popovers/popover-menu.tsx
index 0cd6cabc8..cc194d9a1 100644
--- a/packages/ui/src/popovers/popover-menu.tsx
+++ b/packages/ui/src/popovers/popover-menu.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React, { Fragment } from "react";
 // components
 import { cn } from "../utils";
@@ -29,7 +35,7 @@ export function PopoverMenu<T>(props: TPopoverMenu<T>) {
       button={button}
       disabled={disabled}
       panelClassName={cn(
-        "my-1 w-48 rounded border-[0.5px] border-custom-border-300 bg-custom-background-100 px-2 py-2 text-xs shadow-custom-shadow-rg focus:outline-none",
+        "my-1 w-48 rounded-sm border-[0.5px] border-strong bg-surface-1 px-2 py-2 text-11 shadow-raised-200 focus:outline-none",
         panelClassName
       )}
       popoverClassName={popoverClassName}
diff --git a/packages/ui/src/popovers/popover.stories.tsx b/packages/ui/src/popovers/popover.stories.tsx
index 241ff7ee6..030367b70 100644
--- a/packages/ui/src/popovers/popover.stories.tsx
+++ b/packages/ui/src/popovers/popover.stories.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { Meta, StoryObj } from "@storybook/react";
 import React from "react";
 import { Popover } from "./popover";
@@ -17,12 +23,12 @@ type Story = StoryObj<typeof Popover>;
 // components
 const RenderCustomPopoverComponent = (
   <div className="space-y-2">
-    <div className="text-sm font-medium text-gray-500">Your custom component</div>
+    <div className="text-gray-500 text-13 font-medium">Your custom component</div>
     <div>
       {["option1", "option2", "option3"].map((option) => (
         <div
           key={option}
-          className="text-sm text-gray-600 hover:text-gray-700 rounded-sm cursor-pointer hover:bg-gray-200 transition-all px-1.5 py-0.5 capitalize"
+          className="text-gray-600 hover:text-gray-700 hover:bg-gray-200 cursor-pointer rounded-xs px-1.5 py-0.5 text-13 capitalize transition-all"
         >
           {option}
         </div>
@@ -35,7 +41,7 @@ const RenderCustomPopoverComponent = (
 export const Default: Story = {
   args: {
     popperPosition: "bottom-start",
-    panelClassName: "rounded bg-gray-100 p-2",
+    panelClassName: "rounded-sm bg-gray-100 p-2",
     children: RenderCustomPopoverComponent,
   },
 };
@@ -44,11 +50,11 @@ export const CustomMenuButton: Story = {
   args: {
     popperPosition: "bottom-start",
     button: (
-      <div className="p-2 text-sm font-medium rounded bg-gray-100 hover:bg-gray-200 transition-all">
+      <div className="bg-gray-100 hover:bg-gray-200 rounded-sm p-2 text-13 font-medium transition-all">
         Custom Menu Button
       </div>
     ),
-    panelClassName: "rounded bg-gray-100 p-2",
+    panelClassName: "rounded-sm bg-gray-100 p-2",
     children: RenderCustomPopoverComponent,
   },
 };
diff --git a/packages/ui/src/popovers/popover.tsx b/packages/ui/src/popovers/popover.tsx
index db008bcb3..c27315909 100644
--- a/packages/ui/src/popovers/popover.tsx
+++ b/packages/ui/src/popovers/popover.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { Popover as HeadlessReactPopover, Transition } from "@headlessui/react";
 import { EllipsisVertical } from "lucide-react";
 import type { Ref } from "react";
@@ -45,7 +51,7 @@ export function Popover(props: TPopover) {
           ref={popoverButtonRef as Ref<HTMLButtonElement>}
           className={cn(
             {
-              "flex justify-center items-center text-base h-6 w-6 rounded transition-all bg-custom-background-90 hover:bg-custom-background-80":
+              "flex h-6 w-6 items-center justify-center rounded-sm bg-surface-2 text-14 transition-all hover:bg-layer-1":
                 !button,
             },
             buttonClassName
@@ -69,7 +75,7 @@ export function Popover(props: TPopover) {
           ref={setPopperElement}
           style={styles.popper}
           {...attributes.popper}
-          className={cn("absolute left-0 top-full z-20 w-screen max-w-xs mt-2", panelClassName)}
+          className={cn("absolute top-full left-0 z-20 mt-2 w-screen max-w-xs", panelClassName)}
         >
           {children}
         </HeadlessReactPopover.Panel>
diff --git a/packages/ui/src/popovers/types.ts b/packages/ui/src/popovers/types.ts
index 3732766b2..a2c3d33d1 100644
--- a/packages/ui/src/popovers/types.ts
+++ b/packages/ui/src/popovers/types.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { Placement } from "@popperjs/core";
 import type { MutableRefObject, ReactNode } from "react";
 
diff --git a/packages/ui/src/progress/circular-progress-indicator.tsx b/packages/ui/src/progress/circular-progress-indicator.tsx
index cfbb1ff2e..b67952232 100644
--- a/packages/ui/src/progress/circular-progress-indicator.tsx
+++ b/packages/ui/src/progress/circular-progress-indicator.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 
 interface ICircularProgressIndicator {
@@ -9,7 +15,7 @@ interface ICircularProgressIndicator {
 }
 
 export function CircularProgressIndicator(props: ICircularProgressIndicator) {
-  const { size = 40, percentage = 25, strokeWidth = 6, strokeColor = "stroke-custom-primary-100", children } = props;
+  const { size = 40, percentage = 25, strokeWidth = 6, strokeColor = "stroke-success-secondary", children } = props;
 
   const sqSize = size;
   const radius = (size - strokeWidth) / 2;
@@ -20,7 +26,7 @@ export function CircularProgressIndicator(props: ICircularProgressIndicator) {
     <div className="relative">
       <svg width={size} height={size} viewBox={viewBox} fill="none">
         <circle
-          className="fill-none stroke-custom-background-80"
+          className="fill-none stroke-(--border-color-strong)"
           cx={size / 2}
           cy={size / 2}
           r={radius}
diff --git a/packages/ui/src/progress/index.ts b/packages/ui/src/progress/index.ts
index 56d28cee7..25dfa5a60 100644
--- a/packages/ui/src/progress/index.ts
+++ b/packages/ui/src/progress/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./radial-progress";
 export * from "./progress-bar";
 export * from "./linear-progress-indicator";
diff --git a/packages/ui/src/progress/linear-progress-indicator.tsx b/packages/ui/src/progress/linear-progress-indicator.tsx
index 8769a1157..ac98b6e8f 100644
--- a/packages/ui/src/progress/linear-progress-indicator.tsx
+++ b/packages/ui/src/progress/linear-progress-indicator.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 import { Tooltip } from "@plane/propel/tooltip";
 import { cn } from "../utils";
@@ -35,23 +41,21 @@ export function LinearProgressIndicator({
     else
       return (
         <Tooltip key={item.id} tooltipContent={`${item.name} ${Math.round(item.value)}${inPercentage ? "%" : ""}`}>
-          <div style={style} className={cn("first:rounded-l-sm last:rounded-r-sm", barClassName)} />
+          <div style={style} className={cn("first:rounded-l-xs last:rounded-r-xs", barClassName)} />
         </Tooltip>
       );
   });
 
   return (
     <div
-      className={cn("flex w-full items-center justify-between gap-[1px] rounded-sm", {
+      className={cn("flex w-full items-center justify-between gap-[1px] rounded-xs", {
         "h-2": size === "sm",
         "h-3": size === "md",
         "h-3.5": size === "lg",
         "h-[14px]": size === "xl",
       })}
     >
-      <div className={cn("flex h-full w-full gap-[1.5px] p-[2px] bg-custom-background-90 rounded-sm", className)}>
-        {bars}
-      </div>
+      <div className={cn("flex h-full w-full gap-[1.5px] rounded-xs bg-surface-2 p-[2px]", className)}>{bars}</div>
     </div>
   );
 }
diff --git a/packages/ui/src/progress/progress-bar.tsx b/packages/ui/src/progress/progress-bar.tsx
index 4493548b8..e29f46e0d 100644
--- a/packages/ui/src/progress/progress-bar.tsx
+++ b/packages/ui/src/progress/progress-bar.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 
 type Props = {
diff --git a/packages/ui/src/progress/radial-progress.tsx b/packages/ui/src/progress/radial-progress.tsx
index 173566d27..5f8ebb37d 100644
--- a/packages/ui/src/progress/radial-progress.tsx
+++ b/packages/ui/src/progress/radial-progress.tsx
@@ -1,4 +1,9 @@
-import type { FC } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React, { useState, useEffect } from "react";
 
 interface IRadialProgressBar {
@@ -19,7 +24,7 @@ export function RadialProgressBar(props: IRadialProgressBar) {
 
   return (
     <div className="relative h-4 w-4">
-      <svg className="absolute left-0 top-0" viewBox="0 0 100 100">
+      <svg className="absolute top-0 left-0" viewBox="0 0 100 100">
         <circle
           className={"stroke-current opacity-10"}
           cx="50"
diff --git a/packages/ui/src/row/helper.tsx b/packages/ui/src/row/helper.tsx
index 15982fddb..d856771e9 100644
--- a/packages/ui/src/row/helper.tsx
+++ b/packages/ui/src/row/helper.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export enum ERowVariant {
   REGULAR = "regular",
   HUGGING = "hugging",
diff --git a/packages/ui/src/row/index.ts b/packages/ui/src/row/index.ts
index 5494453a7..36afed341 100644
--- a/packages/ui/src/row/index.ts
+++ b/packages/ui/src/row/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./row";
diff --git a/packages/ui/src/row/row.tsx b/packages/ui/src/row/row.tsx
index cc223c0e8..809a1c877 100644
--- a/packages/ui/src/row/row.tsx
+++ b/packages/ui/src/row/row.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 import { cn } from "../utils";
 import type { TRowVariant } from "./helper";
diff --git a/packages/ui/src/scroll-area.tsx b/packages/ui/src/scroll-area.tsx
index 5473d2673..4ce2a1edb 100644
--- a/packages/ui/src/scroll-area.tsx
+++ b/packages/ui/src/scroll-area.tsx
@@ -1,5 +1,10 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as RadixScrollArea from "@radix-ui/react-scroll-area";
-import type { FC } from "react";
 import React from "react";
 import { cn } from "./utils";
 
@@ -35,28 +40,28 @@ export function ScrollArea(props: TScrollAreaProps) {
       <RadixScrollArea.Viewport className="size-full">{children}</RadixScrollArea.Viewport>
       <RadixScrollArea.Scrollbar
         className={cn(
-          "group/track flex touch-none select-none bg-transparent transition-colors duration-150 ease-out",
+          "group/track flex touch-none bg-transparent transition-colors duration-150 ease-out select-none",
           sizeStyles[size]
         )}
         orientation="vertical"
       >
         <RadixScrollArea.Thumb
           className={cn(
-            "relative flex-1 rounded-[10px]  bg-custom-scrollbar-neutral group-hover:bg-custom-scrollbar-hover group-active/track:bg-custom-scrollbar-active",
+            "relative flex-1 rounded-[10px] bg-scrollbar-thumb group-hover:bg-scrollbar-thumb-surface-hover group-hover/track:bg-scrollbar-thumb-hover group-active/track:bg-scrollbar-thumb-active",
             thumbSizeStyles[size]
           )}
         />
       </RadixScrollArea.Scrollbar>
       <RadixScrollArea.Scrollbar
         className={cn(
-          "group/track flex touch-none select-none bg-transparent transition-colors duration-150 ease-out",
+          "group/track flex touch-none bg-transparent transition-colors duration-150 ease-out select-none",
           sizeStyles[size]
         )}
         orientation="horizontal"
       >
         <RadixScrollArea.Thumb
           className={cn(
-            "relative flex-1 rounded-[10px] bg-custom-scrollbar-neutral group-hover:bg-custom-scrollbar-hover group-active/track:bg-custom-scrollbar-active",
+            "relative flex-1 rounded-[10px] bg-scrollbar-thumb group-hover:bg-scrollbar-thumb-surface-hover group-hover/track:bg-scrollbar-thumb-hover group-active/track:bg-scrollbar-thumb-active",
             thumbSizeStyles[size]
           )}
         />
diff --git a/packages/ui/src/sortable/draggable.tsx b/packages/ui/src/sortable/draggable.tsx
index 8661eec2c..0d369e106 100644
--- a/packages/ui/src/sortable/draggable.tsx
+++ b/packages/ui/src/sortable/draggable.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // @ts-expect-error Due to live server dependencies
 import { combine } from "@atlaskit/pragmatic-drag-and-drop/dist/cjs/entry-point/combine.js";
 import {
diff --git a/packages/ui/src/sortable/index.ts b/packages/ui/src/sortable/index.ts
index 9dde5a404..170f03cbc 100644
--- a/packages/ui/src/sortable/index.ts
+++ b/packages/ui/src/sortable/index.ts
@@ -1,2 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./sortable";
 export * from "./draggable";
diff --git a/packages/ui/src/sortable/sortable.stories.tsx b/packages/ui/src/sortable/sortable.stories.tsx
index 846898843..474a764aa 100644
--- a/packages/ui/src/sortable/sortable.stories.tsx
+++ b/packages/ui/src/sortable/sortable.stories.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { Meta, StoryObj } from "@storybook/react";
 import React from "react";
 import { Sortable } from "./sortable";
@@ -17,7 +23,7 @@ const meta: Meta<typeof Sortable<StoryItem>> = {
     ],
     render: (item: StoryItem) => (
       // <Draggable data={item} className="rounded-lg">
-      <div className="border ">{item.name}</div>
+      <div className="border">{item.name}</div>
       // </Draggable>
     ),
     onChange: (data) => console.log(data.map(({ id }) => id)),
diff --git a/packages/ui/src/sortable/sortable.tsx b/packages/ui/src/sortable/sortable.tsx
index b767aa482..ceb94de85 100644
--- a/packages/ui/src/sortable/sortable.tsx
+++ b/packages/ui/src/sortable/sortable.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // @ts-expect-error Due to live server dependencies
 import { monitorForElements } from "@atlaskit/pragmatic-drag-and-drop/dist/cjs/entry-point/element/adapter.js";
 import React, { Fragment, useEffect, useMemo } from "react";
diff --git a/packages/ui/src/spinners/circular-bar-spinner.tsx b/packages/ui/src/spinners/circular-bar-spinner.tsx
index ab5e5ef75..ad923d563 100644
--- a/packages/ui/src/spinners/circular-bar-spinner.tsx
+++ b/packages/ui/src/spinners/circular-bar-spinner.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 
 interface ICircularBarSpinner extends React.SVGAttributes<SVGElement> {
diff --git a/packages/ui/src/spinners/circular-spinner.tsx b/packages/ui/src/spinners/circular-spinner.tsx
index 1edc22b9f..59aacd6ce 100644
--- a/packages/ui/src/spinners/circular-spinner.tsx
+++ b/packages/ui/src/spinners/circular-spinner.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 // helpers
 import { cn } from "../utils";
@@ -15,7 +21,7 @@ export function Spinner({ height = "32px", width = "32px", className = "" }: ISp
         aria-hidden="true"
         height={height}
         width={width}
-        className={cn("animate-spin fill-custom-primary-100 text-custom-text-200", className)}
+        className={cn("animate-spin fill-accent-primary text-secondary", className)}
         viewBox="0 0 100 101"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
diff --git a/packages/ui/src/spinners/index.ts b/packages/ui/src/spinners/index.ts
index a871a9b77..45fa139d5 100644
--- a/packages/ui/src/spinners/index.ts
+++ b/packages/ui/src/spinners/index.ts
@@ -1,2 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./circular-spinner";
 export * from "./circular-bar-spinner";
diff --git a/packages/ui/src/tables/index.ts b/packages/ui/src/tables/index.ts
index 0e948df9e..d16beb43e 100644
--- a/packages/ui/src/tables/index.ts
+++ b/packages/ui/src/tables/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./table";
diff --git a/packages/ui/src/tables/table.stories.tsx b/packages/ui/src/tables/table.stories.tsx
index b780c49f1..e1b03fcb1 100644
--- a/packages/ui/src/tables/table.stories.tsx
+++ b/packages/ui/src/tables/table.stories.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { Meta, StoryObj } from "@storybook/react";
 import React from "react";
 import { Table } from "./table";
@@ -52,7 +58,7 @@ export const Default: Story = {
     keyExtractor: (rowData) => rowData.id,
     tableClassName: "bg-gray-100",
     tHeadClassName: "bg-gray-200",
-    tHeadTrClassName: "text-gray-600 text-left text-sm font-medium",
+    tHeadTrClassName: "text-gray-600 text-left text-13 font-medium",
     thClassName: "font-medium",
     tBodyClassName: "bg-gray-100",
     tBodyTrClassName: "text-gray-600",
diff --git a/packages/ui/src/tables/table.tsx b/packages/ui/src/tables/table.tsx
index 66a9235c4..04ebaab4b 100644
--- a/packages/ui/src/tables/table.tsx
+++ b/packages/ui/src/tables/table.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 // helpers
 import { cn } from "../utils";
@@ -19,9 +25,9 @@ export function Table<T>(props: TTableData<T>) {
   } = props;
 
   return (
-    <table className={cn("table-auto w-full overflow-hidden whitespace-nowrap", tableClassName)}>
-      <thead className={cn("divide-y divide-custom-border-200", tHeadClassName)}>
-        <tr className={cn("divide-x divide-custom-border-200 text-sm text-custom-text-100", tHeadTrClassName)}>
+    <table className={cn("w-full table-auto overflow-hidden whitespace-nowrap", tableClassName)}>
+      <thead className={cn("divide-y divide-subtle", tHeadClassName)}>
+        <tr className={cn("divide-x divide-subtle text-13 text-primary", tHeadTrClassName)}>
           {columns.map((column) => (
             <th key={column.key} className={cn("px-2.5 py-2", thClassName)}>
               {(column?.thRender && column?.thRender()) || column.content}
@@ -29,11 +35,11 @@ export function Table<T>(props: TTableData<T>) {
           ))}
         </tr>
       </thead>
-      <tbody className={cn("divide-y divide-custom-border-200", tBodyClassName)}>
+      <tbody className={cn("divide-y divide-subtle", tBodyClassName)}>
         {data.map((item) => (
           <tr
             key={keyExtractor(item)}
-            className={cn("divide-x divide-custom-border-200 text-sm text-custom-text-200", tBodyTrClassName)}
+            className={cn("divide-x divide-subtle text-13 text-secondary", tBodyTrClassName)}
           >
             {columns.map((column) => (
               <td key={`${column.key}-${keyExtractor(item)}`} className={cn("px-2.5 py-2", tdClassName)}>
diff --git a/packages/ui/src/tables/types.ts b/packages/ui/src/tables/types.ts
index 9f7acf6ca..b43882ffc 100644
--- a/packages/ui/src/tables/types.ts
+++ b/packages/ui/src/tables/types.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export type TTableColumn<T> = {
   key: string;
   content: string;
diff --git a/packages/ui/src/tabs/index.ts b/packages/ui/src/tabs/index.ts
index c232b43ab..e4c3e2415 100644
--- a/packages/ui/src/tabs/index.ts
+++ b/packages/ui/src/tabs/index.ts
@@ -1,2 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./tabs";
 export * from "./tab-list";
diff --git a/packages/ui/src/tabs/tab-list.tsx b/packages/ui/src/tabs/tab-list.tsx
index 560d592f3..c9e02000d 100644
--- a/packages/ui/src/tabs/tab-list.tsx
+++ b/packages/ui/src/tabs/tab-list.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { Tab } from "@headlessui/react";
 import type { LucideProps } from "lucide-react";
 import type { FC } from "react";
@@ -19,22 +25,26 @@ type TTabListProps = {
   tabClassName?: string;
   size?: "sm" | "md" | "lg";
   selectedTab?: string;
+  autoWrap?: boolean;
   onTabChange?: (key: string) => void;
 };
 
-export function TabList({
-  tabs,
-  tabListClassName,
-  tabClassName,
-  size = "md",
-  selectedTab,
-  onTabChange,
-}: TTabListProps) {
+export function TabList({ autoWrap = true, ...props }: TTabListProps) {
+  return autoWrap ? (
+    <Tab.Group>
+      <TabListInner {...props} />
+    </Tab.Group>
+  ) : (
+    <TabListInner {...props} />
+  );
+}
+
+function TabListInner({ tabs, tabListClassName, tabClassName, size = "md", selectedTab, onTabChange }: TTabListProps) {
   return (
     <Tab.List
       as="div"
       className={cn(
-        "flex w-full min-w-fit items-center justify-between gap-1.5 rounded-md text-sm p-0.5 bg-custom-background-80/60",
+        "flex w-full min-w-fit items-center justify-between gap-1.5 rounded-md bg-layer-1 p-0.5 text-13",
         tabListClassName
       )}
     >
@@ -42,16 +52,16 @@ export function TabList({
         <Tab
           className={({ selected }) =>
             cn(
-              "flex items-center justify-center p-1 min-w-fit w-full font-medium text-custom-text-100 outline-none focus:outline-none cursor-pointer transition-all rounded",
+              "flex w-full min-w-fit cursor-pointer items-center justify-center rounded-sm p-1 font-medium text-primary transition-all outline-none focus:outline-none",
               (selectedTab ? selectedTab === tab.key : selected)
-                ? "bg-custom-background-100 text-custom-text-100 shadow-sm"
+                ? "shadow-sm bg-layer-transparent-active text-primary"
                 : tab.disabled
-                  ? "text-custom-text-400 cursor-not-allowed"
-                  : "text-custom-text-400 hover:text-custom-text-300 hover:bg-custom-background-80/60",
+                  ? "cursor-not-allowed text-placeholder"
+                  : "text-placeholder hover:bg-layer-transparent-hover hover:text-tertiary",
               {
-                "text-xs": size === "sm",
-                "text-sm": size === "md",
-                "text-base": size === "lg",
+                "text-11": size === "sm",
+                "text-13": size === "md",
+                "text-14": size === "lg",
               },
               tabClassName
             )
@@ -65,7 +75,9 @@ export function TabList({
           }}
           disabled={tab.disabled}
         >
-          {tab.icon && <tab.icon className="size-4" />}
+          {tab.icon && (
+            <tab.icon className={cn({ "size-3": size === "sm", "size-4": size === "md", "size-5": size === "lg" })} />
+          )}
           {tab.label}
         </Tab>
       ))}
diff --git a/packages/ui/src/tabs/tabs.tsx b/packages/ui/src/tabs/tabs.tsx
index 3aa7167b9..ccd233752 100644
--- a/packages/ui/src/tabs/tabs.tsx
+++ b/packages/ui/src/tabs/tabs.tsx
@@ -1,5 +1,10 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { Tab } from "@headlessui/react";
-import type { FC } from "react";
 import React, { Fragment, useEffect, useState } from "react";
 // helpers
 import { useLocalStorage } from "@plane/hooks";
@@ -63,9 +68,9 @@ export function Tabs(props: TTabsProps) {
   };
 
   return (
-    <div className="flex flex-col w-full h-full">
+    <div className="flex h-full w-full flex-col">
       <Tab.Group defaultIndex={currentTabIndex(selectedTab)}>
-        <div className={cn("flex flex-col w-full h-full gap-2", containerClassName)}>
+        <div className={cn("flex h-full w-full flex-col gap-2", containerClassName)}>
           <div className={cn("flex w-full items-center gap-4", tabListContainerClassName)}>
             <TabList
               tabs={tabs}
diff --git a/packages/ui/src/tag/helper.tsx b/packages/ui/src/tag/helper.tsx
index 064da5c23..74f393e73 100644
--- a/packages/ui/src/tag/helper.tsx
+++ b/packages/ui/src/tag/helper.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export enum ETagVariant {
   OUTLINED = "outlined",
 }
@@ -14,7 +20,7 @@ export interface ITagProperties {
 
 export const containerStyle: ITagProperties = {
   [ETagVariant.OUTLINED]:
-    "flex items-center rounded-md border border-custom-border-200 text-xs text-custom-text-300 hover:text-custom-text-200 min-h-[36px] my-auto capitalize flex-wrap cursor-pointer gap-1.5",
+    "flex items-center rounded-md border border-subtle text-11 text-tertiary hover:text-secondary min-h-[36px] my-auto capitalize flex-wrap cursor-pointer gap-1.5",
 };
 export const sizes = {
   [ETagSize.SM]: "p-1.5",
diff --git a/packages/ui/src/tag/index.ts b/packages/ui/src/tag/index.ts
index 219d72b8c..66ae25f8f 100644
--- a/packages/ui/src/tag/index.ts
+++ b/packages/ui/src/tag/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./tag";
diff --git a/packages/ui/src/tag/tag.tsx b/packages/ui/src/tag/tag.tsx
index 8ae14f07a..29faf5a35 100644
--- a/packages/ui/src/tag/tag.tsx
+++ b/packages/ui/src/tag/tag.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import * as React from "react";
 import { cn } from "../utils";
 import type { TTagSize, TTagVariant } from "./helper";
diff --git a/packages/ui/src/tooltip/index.ts b/packages/ui/src/tooltip/index.ts
index 3c61782ae..301cbae30 100644
--- a/packages/ui/src/tooltip/index.ts
+++ b/packages/ui/src/tooltip/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./tooltip";
diff --git a/packages/ui/src/tooltip/tooltip.tsx b/packages/ui/src/tooltip/tooltip.tsx
index 03df35b37..19a74e7bf 100644
--- a/packages/ui/src/tooltip/tooltip.tsx
+++ b/packages/ui/src/tooltip/tooltip.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { Tooltip2 } from "@blueprintjs/popover2";
 import React, { useEffect, useRef, useState } from "react";
 // helpers
@@ -69,7 +75,7 @@ export function Tooltip({
 
   if (!shouldRender) {
     return (
-      <div ref={toolTipRef} className="h-full flex items-center">
+      <div ref={toolTipRef} className="flex h-full items-center">
         {children}
       </div>
     );
@@ -83,14 +89,14 @@ export function Tooltip({
       content={
         <div
           className={cn(
-            "relative block z-50 max-w-xs gap-1 overflow-hidden break-words rounded-md bg-custom-background-100 p-2 text-xs text-custom-text-200 shadow-md",
+            "shadow-md relative z-50 block max-w-xs gap-1 overflow-hidden rounded-md bg-surface-1 p-2 text-11 break-words text-secondary",
             {
               hidden: isMobile,
             },
             className
           )}
         >
-          {tooltipHeading && <h5 className="font-medium text-custom-text-100">{tooltipHeading}</h5>}
+          {tooltipHeading && <h5 className="font-medium text-primary">{tooltipHeading}</h5>}
           {tooltipContent}
         </div>
       }
diff --git a/packages/ui/src/typography/index.tsx b/packages/ui/src/typography/index.tsx
index 0b1b7ffe1..5c30bfbc2 100644
--- a/packages/ui/src/typography/index.tsx
+++ b/packages/ui/src/typography/index.tsx
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./sub-heading";
diff --git a/packages/ui/src/typography/sub-heading.tsx b/packages/ui/src/typography/sub-heading.tsx
index 93e4f0673..2f41b3d77 100644
--- a/packages/ui/src/typography/sub-heading.tsx
+++ b/packages/ui/src/typography/sub-heading.tsx
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import React from "react";
 import { cn } from "../utils";
 
@@ -9,7 +15,7 @@ type Props = {
 
 function SubHeading({ children, className, noMargin }: Props) {
   return (
-    <h3 className={cn("text-xl font-medium text-custom-text-200 block leading-7", !noMargin && "mb-2", className)}>
+    <h3 className={cn("block text-18 leading-7 font-medium text-secondary", !noMargin && "mb-2", className)}>
       {children}
     </h3>
   );
diff --git a/packages/ui/src/utils/classname.tsx b/packages/ui/src/utils/classname.tsx
index 5a8d446f1..7ac89ce89 100644
--- a/packages/ui/src/utils/classname.tsx
+++ b/packages/ui/src/utils/classname.tsx
@@ -1,5 +1,7 @@
-import { clsx } from "clsx";
-import type { ClassValue } from "clsx";
-import { twMerge } from "tailwind-merge";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
 
-export const cn = (...inputs: ClassValue[]) => twMerge(clsx(inputs));
+export { cn } from "@plane/utils";
diff --git a/packages/ui/src/utils/icons.ts b/packages/ui/src/utils/icons.ts
index de06cc735..17d32acc4 100644
--- a/packages/ui/src/utils/icons.ts
+++ b/packages/ui/src/utils/icons.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { LUCIDE_ICONS_LIST } from "..";
 
 /**
diff --git a/packages/ui/src/utils/index.ts b/packages/ui/src/utils/index.ts
index 62ca197ac..dd3e40caf 100644
--- a/packages/ui/src/utils/index.ts
+++ b/packages/ui/src/utils/index.ts
@@ -1,2 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./classname";
 export * from "./icons";
diff --git a/packages/ui/styles/globals.css b/packages/ui/styles/globals.css
index 1cf516922..434ca7f91 100644
--- a/packages/ui/styles/globals.css
+++ b/packages/ui/styles/globals.css
@@ -1,696 +1 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer components {
-  .text-1\.5xl {
-    font-size: 1.375rem;
-    line-height: 1.875rem;
-  }
-
-  .text-2\.5xl {
-    font-size: 1.75rem;
-    line-height: 2.25rem;
-  }
-}
-
-@layer base {
-  html {
-    font-family: "Inter", sans-serif;
-  }
-
-  :root {
-    color-scheme: light !important;
-
-    --color-primary-10: 229, 243, 250;
-    --color-primary-20: 216, 237, 248;
-    --color-primary-30: 199, 229, 244;
-    --color-primary-40: 169, 214, 239;
-    --color-primary-50: 144, 202, 234;
-    --color-primary-60: 109, 186, 227;
-    --color-primary-70: 75, 170, 221;
-    --color-primary-80: 41, 154, 214;
-    --color-primary-90: 34, 129, 180;
-    --color-primary-100: 0, 99, 153;
-    --color-primary-200: 0, 92, 143;
-    --color-primary-300: 0, 86, 133;
-    --color-primary-400: 0, 77, 117;
-    --color-primary-500: 0, 66, 102;
-    --color-primary-600: 0, 53, 82;
-    --color-primary-700: 0, 43, 66;
-    --color-primary-800: 0, 33, 51;
-    --color-primary-900: 0, 23, 36;
-
-    --color-background-100: 255, 255, 255; /* primary bg */
-    --color-background-90: 247, 247, 247; /* secondary bg */
-    --color-background-80: 232, 232, 232; /* tertiary bg */
-
-    --color-text-100: 23, 23, 23; /* primary text */
-    --color-text-200: 58, 58, 58; /* secondary text */
-    --color-text-300: 82, 82, 82; /* tertiary text */
-    --color-text-400: 163, 163, 163; /* placeholder text */
-
-    --color-scrollbar: 163, 163, 163; /* scrollbar thumb */
-
-    --color-border-100: 245, 245, 245; /* subtle border= 1 */
-    --color-border-200: 229, 229, 229; /* subtle border- 2 */
-    --color-border-300: 212, 212, 212; /* strong border- 1 */
-    --color-border-400: 185, 185, 185; /* strong border- 2 */
-
-    --color-shadow-2xs:
-      0px 0px 1px 0px rgba(23, 23, 23, 0.06), 0px 1px 2px 0px rgba(23, 23, 23, 0.06),
-      0px 1px 2px 0px rgba(23, 23, 23, 0.14);
-    --color-shadow-xs:
-      0px 1px 2px 0px rgba(0, 0, 0, 0.16), 0px 2px 4px 0px rgba(16, 24, 40, 0.12),
-      0px 1px 8px -1px rgba(16, 24, 40, 0.1);
-    --color-shadow-sm:
-      0px 1px 4px 0px rgba(0, 0, 0, 0.01), 0px 4px 8px 0px rgba(0, 0, 0, 0.02), 0px 1px 12px 0px rgba(0, 0, 0, 0.12);
-    --color-shadow-rg:
-      0px 3px 6px 0px rgba(0, 0, 0, 0.1), 0px 4px 4px 0px rgba(16, 24, 40, 0.08),
-      0px 1px 12px 0px rgba(16, 24, 40, 0.04);
-    --color-shadow-md:
-      0px 4px 8px 0px rgba(0, 0, 0, 0.12), 0px 6px 12px 0px rgba(16, 24, 40, 0.12),
-      0px 1px 16px 0px rgba(16, 24, 40, 0.12);
-    --color-shadow-lg:
-      0px 6px 12px 0px rgba(0, 0, 0, 0.12), 0px 8px 16px 0px rgba(0, 0, 0, 0.12),
-      0px 1px 24px 0px rgba(16, 24, 40, 0.12);
-    --color-shadow-xl:
-      0px 0px 18px 0px rgba(0, 0, 0, 0.16), 0px 0px 24px 0px rgba(16, 24, 40, 0.16),
-      0px 0px 52px 0px rgba(16, 24, 40, 0.16);
-    --color-shadow-2xl:
-      0px 8px 16px 0px rgba(0, 0, 0, 0.12), 0px 12px 24px 0px rgba(16, 24, 40, 0.12),
-      0px 1px 32px 0px rgba(16, 24, 40, 0.12);
-    --color-shadow-3xl:
-      0px 12px 24px 0px rgba(0, 0, 0, 0.12), 0px 16px 32px 0px rgba(0, 0, 0, 0.12),
-      0px 1px 48px 0px rgba(16, 24, 40, 0.12);
-    --color-shadow-4xl: 0px 8px 40px 0px rgba(0, 0, 61, 0.05), 0px 12px 32px -16px rgba(0, 0, 0, 0.05);
-
-    --color-sidebar-background-100: var(--color-background-100); /* primary sidebar bg */
-    --color-sidebar-background-90: var(--color-background-90); /* secondary sidebar bg */
-    --color-sidebar-background-80: var(--color-background-80); /* tertiary sidebar bg */
-
-    --color-sidebar-text-100: var(--color-text-100); /* primary sidebar text */
-    --color-sidebar-text-200: var(--color-text-200); /* secondary sidebar text */
-    --color-sidebar-text-300: var(--color-text-300); /* tertiary sidebar text */
-    --color-sidebar-text-400: var(--color-text-400); /* sidebar placeholder text */
-
-    --color-sidebar-border-100: var(--color-border-100); /* subtle sidebar border= 1 */
-    --color-sidebar-border-200: var(--color-border-100); /* subtle sidebar border- 2 */
-    --color-sidebar-border-300: var(--color-border-100); /* strong sidebar border- 1 */
-    --color-sidebar-border-400: var(--color-border-100); /* strong sidebar border- 2 */
-
-    --color-sidebar-shadow-2xs: var(--color-shadow-2xs);
-    --color-sidebar-shadow-xs: var(--color-shadow-xs);
-    --color-sidebar-shadow-sm: var(--color-shadow-sm);
-    --color-sidebar-shadow-rg: var(--color-shadow-rg);
-    --color-sidebar-shadow-md: var(--color-shadow-md);
-    --color-sidebar-shadow-lg: var(--color-shadow-lg);
-    --color-sidebar-shadow-xl: var(--color-shadow-xl);
-    --color-sidebar-shadow-2xl: var(--color-shadow-2xl);
-    --color-sidebar-shadow-3xl: var(--color-shadow-3xl);
-    --color-sidebar-shadow-4xl: var(--color-shadow-4xl);
-
-    /* pi */
-    --color-pi-50: var(--color-background-90);
-    --color-pi-100: var(--color-background-90);
-    --color-pi-200: var(--color-primary-200);
-    --color-pi-300: var(--color-primary-200);
-    --color-pi-400: var(--color-primary-200);
-    --color-pi-500: var(--color-primary-200);
-    --color-pi-600: 151, 150, 246;
-    --color-pi-700: var(--color-primary-100);
-    --color-pi-800: 57, 56, 149;
-    --color-pi-900: 30, 29, 78;
-    --color-pi-950: 14, 14, 37;
-  }
-
-  [data-theme="light"],
-  [data-theme="light-contrast"] {
-    color-scheme: light !important;
-
-    --color-background-100: 255, 255, 255; /* primary bg */
-    --color-background-90: 247, 247, 247; /* secondary bg */
-    --color-background-80: 232, 232, 232; /* tertiary bg */
-
-    /* pi */
-    --color-pi-50: var(--color-background-90);
-    --color-pi-100: var(--color-background-90);
-    --color-pi-200: var(--color-primary-200);
-    --color-pi-300: var(--color-primary-200);
-    --color-pi-400: var(--color-primary-200);
-    --color-pi-500: var(--color-primary-200);
-    --color-pi-600: 151, 150, 246;
-    --color-pi-700: var(--color-primary-100);
-    --color-pi-800: 57, 56, 149;
-    --color-pi-900: 30, 29, 78;
-    --color-pi-950: 14, 14, 37;
-  }
-
-  [data-theme="light"] {
-    --color-text-100: 23, 23, 23; /* primary text */
-    --color-text-200: 58, 58, 58; /* secondary text */
-    --color-text-300: 82, 82, 82; /* tertiary text */
-    --color-text-400: 163, 163, 163; /* placeholder text */
-
-    --color-scrollbar: 163, 163, 163; /* scrollbar thumb */
-
-    --color-border-100: 245, 245, 245; /* subtle border= 1 */
-    --color-border-200: 229, 229, 229; /* subtle border- 2 */
-    --color-border-300: 212, 212, 212; /* strong border- 1 */
-    --color-border-400: 185, 185, 185; /* strong border- 2 */
-
-    /* onboarding colors */
-    --gradient-onboarding-100: linear-gradient(106deg, #f2f6ff 29.8%, #e1eaff 99.34%);
-    --gradient-onboarding-200: linear-gradient(129deg, rgba(255, 255, 255, 0) -22.23%, rgba(255, 255, 255, 0.8) 62.98%);
-    --gradient-onboarding-300: linear-gradient(164deg, #fff 4.25%, rgba(255, 255, 255, 0.06) 93.5%);
-    --gradient-onboarding-400: linear-gradient(129deg, rgba(255, 255, 255, 0) -22.23%, rgba(255, 255, 255, 0.8) 62.98%);
-
-    --color-onboarding-text-100: 23, 23, 23;
-    --color-onboarding-text-200: 58, 58, 58;
-    --color-onboarding-text-300: 82, 82, 82;
-    --color-onboarding-text-400: 163, 163, 163;
-
-    --color-onboarding-background-100: 236, 241, 255;
-    --color-onboarding-background-200: 255, 255, 255;
-    --color-onboarding-background-300: 236, 241, 255;
-    --color-onboarding-background-400: 177, 206, 250;
-
-    --color-onboarding-border-100: 229, 229, 229;
-    --color-onboarding-border-200: 217, 228, 255;
-    --color-onboarding-border-300: 229, 229, 229, 0.5;
-
-    --color-onboarding-shadow-sm: 0px 4px 20px 0px rgba(126, 139, 171, 0.1);
-
-    /* toast theme */
-    --color-toast-success-text: 62, 155, 79;
-    --color-toast-error-text: 220, 62, 66;
-    --color-toast-warning-text: 255, 186, 24;
-    --color-toast-info-text: 51, 88, 212;
-    --color-toast-loading-text: 28, 32, 36;
-    --color-toast-secondary-text: 128, 131, 141;
-    --color-toast-tertiary-text: 96, 100, 108;
-
-    --color-toast-success-background: 253, 253, 254;
-    --color-toast-error-background: 255, 252, 252;
-    --color-toast-warning-background: 254, 253, 251;
-    --color-toast-info-background: 253, 253, 254;
-    --color-toast-loading-background: 253, 253, 254;
-
-    --color-toast-success-border: 218, 241, 219;
-    --color-toast-error-border: 255, 219, 220;
-    --color-toast-warning-border: 255, 247, 194;
-    --color-toast-info-border: 210, 222, 255;
-    --color-toast-loading-border: 224, 225, 230;
-  }
-
-  [data-theme="light-contrast"] {
-    --color-text-100: 11, 11, 11; /* primary text */
-    --color-text-200: 38, 38, 38; /* secondary text */
-    --color-text-300: 58, 58, 58; /* tertiary text */
-    --color-text-400: 115, 115, 115; /* placeholder text */
-
-    --color-scrollbar: 115, 115, 115; /* scrollbar thumb */
-
-    --color-border-100: 34, 34, 34; /* subtle border= 1 */
-    --color-border-200: 38, 38, 38; /* subtle border- 2 */
-    --color-border-300: 46, 46, 46; /* strong border- 1 */
-    --color-border-400: 58, 58, 58; /* strong border- 2 */
-  }
-
-  [data-theme="dark"],
-  [data-theme="dark-contrast"] {
-    color-scheme: dark !important;
-
-    --color-primary-10: 8, 31, 43;
-    --color-primary-20: 10, 37, 51;
-    --color-primary-30: 13, 49, 69;
-    --color-primary-40: 16, 58, 81;
-    --color-primary-50: 18, 68, 94;
-    --color-primary-60: 23, 86, 120;
-    --color-primary-70: 28, 104, 146;
-    --color-primary-80: 31, 116, 163;
-    --color-primary-90: 34, 129, 180;
-    --color-primary-100: 40, 146, 204;
-    --color-primary-200: 41, 154, 214;
-    --color-primary-300: 75, 170, 221;
-    --color-primary-400: 109, 186, 227;
-    --color-primary-500: 144, 202, 234;
-    --color-primary-600: 169, 214, 239;
-    --color-primary-700: 199, 229, 244;
-    --color-primary-800: 216, 237, 248;
-    --color-primary-900: 229, 243, 250;
-
-    --color-background-100: 25, 25, 25; /* primary bg */
-    --color-background-90: 32, 32, 32; /* secondary bg */
-    --color-background-80: 44, 44, 44; /* tertiary bg */
-
-    --color-shadow-2xs: 0px 0px 1px 0px rgba(0, 0, 0, 0.15), 0px 1px 3px 0px rgba(0, 0, 0, 0.5);
-    --color-shadow-xs: 0px 0px 2px 0px rgba(0, 0, 0, 0.2), 0px 2px 4px 0px rgba(0, 0, 0, 0.5);
-    --color-shadow-sm: 0px 0px 4px 0px rgba(0, 0, 0, 0.2), 0px 2px 6px 0px rgba(0, 0, 0, 0.5);
-    --color-shadow-rg: 0px 0px 6px 0px rgba(0, 0, 0, 0.2), 0px 4px 6px 0px rgba(0, 0, 0, 0.5);
-    --color-shadow-md: 0px 2px 8px 0px rgba(0, 0, 0, 0.2), 0px 4px 8px 0px rgba(0, 0, 0, 0.5);
-    --color-shadow-lg: 0px 4px 12px 0px rgba(0, 0, 0, 0.25), 0px 4px 10px 0px rgba(0, 0, 0, 0.55);
-    --color-shadow-xl: 0px 0px 14px 0px rgba(0, 0, 0, 0.25), 0px 6px 10px 0px rgba(0, 0, 0, 0.55);
-    --color-shadow-2xl: 0px 0px 18px 0px rgba(0, 0, 0, 0.25), 0px 8px 12px 0px rgba(0, 0, 0, 0.6);
-    --color-shadow-3xl: 0px 4px 24px 0px rgba(0, 0, 0, 0.3), 0px 12px 40px 0px rgba(0, 0, 0, 0.65);
-    /* pi */
-    --color-pi-50: var(--color-background-90);
-    --color-pi-100: var(--color-background-90);
-    --color-pi-200: var(--color-primary-200);
-    --color-pi-300: var(--color-primary-200);
-    --color-pi-400: var(--color-primary-200);
-    --color-pi-500: var(--color-primary-200);
-    --color-pi-600: 151, 150, 246;
-    --color-pi-700: var(--color-primary-100);
-    --color-pi-800: 57, 56, 149;
-    --color-pi-900: 30, 29, 78;
-    --color-pi-950: 14, 14, 37;
-  }
-
-  [data-theme="dark"] {
-    --color-text-100: 229, 229, 229; /* primary text */
-    --color-text-200: 163, 163, 163; /* secondary text */
-    --color-text-300: 115, 115, 115; /* tertiary text */
-    --color-text-400: 82, 82, 82; /* placeholder text */
-
-    --color-scrollbar: 82, 82, 82; /* scrollbar thumb */
-
-    --color-border-100: 34, 34, 34; /* subtle border= 1 */
-    --color-border-200: 38, 38, 38; /* subtle border- 2 */
-    --color-border-300: 46, 46, 46; /* strong border- 1 */
-    --color-border-400: 58, 58, 58; /* strong border- 2 */
-
-    /* onboarding colors */
-    --gradient-onboarding-100: linear-gradient(106deg, #18191b 25.17%, #18191b 99.34%);
-    --gradient-onboarding-200: linear-gradient(129deg, rgba(47, 49, 53, 0.8) -22.23%, rgba(33, 34, 37, 0.8) 62.98%);
-    --gradient-onboarding-300: linear-gradient(167deg, rgba(47, 49, 53, 0.45) 19.22%, #212225 98.48%);
-
-    --color-onboarding-text-100: 237, 238, 240;
-    --color-onboarding-text-200: 176, 180, 187;
-    --color-onboarding-text-300: 118, 123, 132;
-    --color-onboarding-text-400: 105, 110, 119;
-
-    --color-onboarding-background-100: 54, 58, 64;
-    --color-onboarding-background-200: 40, 42, 45;
-    --color-onboarding-background-300: 40, 42, 45;
-    --color-onboarding-background-400: 67, 72, 79;
-
-    --color-onboarding-border-100: 54, 58, 64;
-    --color-onboarding-border-200: 54, 58, 64;
-    --color-onboarding-border-300: 34, 35, 38, 0.5;
-
-    --color-onboarding-shadow-sm: 0px 4px 20px 0px rgba(39, 44, 56, 0.1);
-
-    /* toast theme */
-    --color-toast-success-text: 178, 221, 181;
-    --color-toast-error-text: 206, 44, 49;
-    --color-toast-warning-text: 255, 186, 24;
-    --color-toast-info-text: 141, 164, 239;
-    --color-toast-loading-text: 255, 255, 255;
-    --color-toast-secondary-text: 185, 187, 198;
-    --color-toast-tertiary-text: 139, 141, 152;
-
-    --color-toast-success-background: 46, 46, 46;
-    --color-toast-error-background: 46, 46, 46;
-    --color-toast-warning-background: 46, 46, 46;
-    --color-toast-info-background: 46, 46, 46;
-    --color-toast-loading-background: 46, 46, 46;
-
-    --color-toast-success-border: 42, 126, 59;
-    --color-toast-error-border: 100, 23, 35;
-    --color-toast-warning-border: 79, 52, 34;
-    --color-toast-info-border: 58, 91, 199;
-    --color-toast-loading-border: 96, 100, 108;
-  }
-
-  [data-theme="dark-contrast"] {
-    --color-text-100: 250, 250, 250; /* primary text */
-    --color-text-200: 241, 241, 241; /* secondary text */
-    --color-text-300: 212, 212, 212; /* tertiary text */
-    --color-text-400: 115, 115, 115; /* placeholder text */
-
-    --color-scrollbar: 115, 115, 115; /* scrollbar thumb */
-
-    --color-border-100: 245, 245, 245; /* subtle border= 1 */
-    --color-border-200: 229, 229, 229; /* subtle border- 2 */
-    --color-border-300: 212, 212, 212; /* strong border- 1 */
-    --color-border-400: 185, 185, 185; /* strong border- 2 */
-  }
-
-  [data-theme="light"],
-  [data-theme="dark"],
-  [data-theme="light-contrast"],
-  [data-theme="dark-contrast"] {
-    --color-sidebar-background-100: var(--color-background-100); /* primary sidebar bg */
-    --color-sidebar-background-90: var(--color-background-90); /* secondary sidebar bg */
-    --color-sidebar-background-80: var(--color-background-80); /* tertiary sidebar bg */
-
-    --color-sidebar-text-100: var(--color-text-100); /* primary sidebar text */
-    --color-sidebar-text-200: var(--color-text-200); /* secondary sidebar text */
-    --color-sidebar-text-300: var(--color-text-300); /* tertiary sidebar text */
-    --color-sidebar-text-400: var(--color-text-400); /* sidebar placeholder text */
-
-    --color-sidebar-border-100: var(--color-border-100); /* subtle sidebar border= 1 */
-    --color-sidebar-border-200: var(--color-border-200); /* subtle sidebar border- 2 */
-    --color-sidebar-border-300: var(--color-border-300); /* strong sidebar border- 1 */
-    --color-sidebar-border-400: var(--color-border-400); /* strong sidebar border- 2 */
-  }
-}
-
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-  -webkit-text-size-adjust: 100%;
-  -ms-text-size-adjust: 100%;
-  font-variant-ligatures: none;
-  -webkit-font-variant-ligatures: none;
-  text-rendering: optimizeLegibility;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
-}
-
-body {
-  color: rgba(var(--color-text-100));
-}
-
-/* scrollbar style */
-::-webkit-scrollbar {
-  display: none;
-}
-
-.tags-input-container {
-  border: 2px solid #000;
-  padding: 0.5em;
-  border-radius: 3px;
-  width: min(80vw, 600px);
-  margin-top: 1em;
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: 0.5em;
-}
-
-.tag-item {
-  background-color: rgb(218, 216, 216);
-  display: inline-block;
-  padding: 0.5em 0.75em;
-  border-radius: 20px;
-}
-.tag-item .close {
-  height: 20px;
-  width: 20px;
-  background-color: rgb(48, 48, 48);
-  color: #fff;
-  border-radius: 50%;
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  margin-left: 0.5em;
-  font-size: 18px;
-  cursor: pointer;
-}
-
-.tags-input {
-  flex-grow: 1;
-  padding: 0.5em 0;
-  border: none;
-  outline: none;
-}
-
-/* emoji icon picker */
-.conical-gradient {
-  background: conic-gradient(
-    from 180deg at 50% 50%,
-    #ff6b00 0deg,
-    #f7ae59 70.5deg,
-    #3f76ff 151.12deg,
-    #05c3ff 213deg,
-    #18914f 289.87deg,
-    #f6f172 329.25deg,
-    #ff6b00 360deg
-  );
-}
-
-/* progress bar */
-.progress-bar {
-  fill: currentColor;
-  color: rgba(var(--color-sidebar-background-100));
-}
-
-/* lineclamp */
-.lineclamp {
-  overflow: hidden;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 1;
-}
-
-/* popover2 styling */
-.bp4-popover2-transition-container {
-  z-index: 1 !important;
-}
-
-::-webkit-input-placeholder,
-::placeholder,
-:-ms-input-placeholder {
-  color: rgb(var(--color-text-400));
-}
-
-.bp4-overlay-content {
-  z-index: 555 !important;
-}
-
-.disable-scroll {
-  overflow: hidden !important;
-}
-
-.vertical-lr {
-  writing-mode: vertical-lr;
-  -webkit-writing-mode: vertical-lr;
-  -ms-writing-mode: vertical-lr;
-  width: fit-content;
-}
-
-div.web-view-spinner {
-  position: relative;
-  width: 54px;
-  height: 54px;
-  display: inline-block;
-  margin-left: 50%;
-  margin-right: 50%;
-  padding: 10px;
-  border-radius: 10px;
-}
-
-div.web-view-spinner div {
-  width: 6%;
-  height: 16%;
-  background: rgb(var(--color-text-400));
-  position: absolute;
-  left: 49%;
-  top: 43%;
-  opacity: 0;
-  border-radius: 50px;
-  -webkit-border-radius: 50px;
-  box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
-  -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
-  animation: fade 1s linear infinite;
-  -webkit-animation: fade 1s linear infinite;
-}
-
-@keyframes fade {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0.25;
-  }
-}
-@-webkit-keyframes fade {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0.25;
-  }
-}
-
-div.web-view-spinner div.bar1 {
-  transform: rotate(0deg) translate(0, -130%);
-  -webkit-transform: rotate(0deg) translate(0, -130%);
-  animation-delay: 0s;
-  -webkit-animation-delay: 0s;
-}
-
-div.web-view-spinner div.bar2 {
-  transform: rotate(30deg) translate(0, -130%);
-  -webkit-transform: rotate(30deg) translate(0, -130%);
-  animation-delay: -0.9167s;
-  -webkit-animation-delay: -0.9167s;
-}
-
-div.web-view-spinner div.bar3 {
-  transform: rotate(60deg) translate(0, -130%);
-  -webkit-transform: rotate(60deg) translate(0, -130%);
-  animation-delay: -0.833s;
-  -webkit-animation-delay: -0.833s;
-}
-div.web-view-spinner div.bar4 {
-  transform: rotate(90deg) translate(0, -130%);
-  -webkit-transform: rotate(90deg) translate(0, -130%);
-  animation-delay: -0.7497s;
-  -webkit-animation-delay: -0.7497s;
-}
-div.web-view-spinner div.bar5 {
-  transform: rotate(120deg) translate(0, -130%);
-  -webkit-transform: rotate(120deg) translate(0, -130%);
-  animation-delay: -0.667s;
-  -webkit-animation-delay: -0.667s;
-}
-div.web-view-spinner div.bar6 {
-  transform: rotate(150deg) translate(0, -130%);
-  -webkit-transform: rotate(150deg) translate(0, -130%);
-  animation-delay: -0.5837s;
-  -webkit-animation-delay: -0.5837s;
-}
-div.web-view-spinner div.bar7 {
-  transform: rotate(180deg) translate(0, -130%);
-  -webkit-transform: rotate(180deg) translate(0, -130%);
-  animation-delay: -0.5s;
-  -webkit-animation-delay: -0.5s;
-}
-div.web-view-spinner div.bar8 {
-  transform: rotate(210deg) translate(0, -130%);
-  -webkit-transform: rotate(210deg) translate(0, -130%);
-  animation-delay: -0.4167s;
-  -webkit-animation-delay: -0.4167s;
-}
-div.web-view-spinner div.bar9 {
-  transform: rotate(240deg) translate(0, -130%);
-  -webkit-transform: rotate(240deg) translate(0, -130%);
-  animation-delay: -0.333s;
-  -webkit-animation-delay: -0.333s;
-}
-div.web-view-spinner div.bar10 {
-  transform: rotate(270deg) translate(0, -130%);
-  -webkit-transform: rotate(270deg) translate(0, -130%);
-  animation-delay: -0.2497s;
-  -webkit-animation-delay: -0.2497s;
-}
-div.web-view-spinner div.bar11 {
-  transform: rotate(300deg) translate(0, -130%);
-  -webkit-transform: rotate(300deg) translate(0, -130%);
-  animation-delay: -0.167s;
-  -webkit-animation-delay: -0.167s;
-}
-div.web-view-spinner div.bar12 {
-  transform: rotate(330deg) translate(0, -130%);
-  -webkit-transform: rotate(330deg) translate(0, -130%);
-  animation-delay: -0.0833s;
-  -webkit-animation-delay: -0.0833s;
-}
-
-@-moz-document url-prefix() {
-  * {
-    scrollbar-width: none;
-  }
-  .vertical-scrollbar,
-  .horizontal-scrollbar {
-    scrollbar-width: initial;
-    scrollbar-color: rgba(96, 100, 108, 0.1) transparent;
-  }
-  .vertical-scrollbar:hover,
-  .horizontal-scrollbar:hover {
-    scrollbar-color: rgba(96, 100, 108, 0.25) transparent;
-  }
-  .vertical-scrollbar:active,
-  .horizontal-scrollbar:active {
-    scrollbar-color: rgba(96, 100, 108, 0.7) transparent;
-  }
-}
-
-.vertical-scrollbar {
-  overflow-y: auto;
-}
-.horizontal-scrollbar {
-  overflow-x: auto;
-}
-.vertical-scrollbar::-webkit-scrollbar,
-.horizontal-scrollbar::-webkit-scrollbar {
-  display: block;
-}
-.vertical-scrollbar::-webkit-scrollbar-track,
-.horizontal-scrollbar::-webkit-scrollbar-track {
-  background-color: transparent;
-  border-radius: 9999px;
-}
-.vertical-scrollbar::-webkit-scrollbar-thumb,
-.horizontal-scrollbar::-webkit-scrollbar-thumb {
-  background-clip: padding-box;
-  background-color: rgba(96, 100, 108, 0.1);
-  border-radius: 9999px;
-}
-.vertical-scrollbar:hover::-webkit-scrollbar-thumb,
-.horizontal-scrollbar:hover::-webkit-scrollbar-thumb {
-  background-color: rgba(96, 100, 108, 0.25);
-}
-.vertical-scrollbar::-webkit-scrollbar-thumb:hover,
-.horizontal-scrollbar::-webkit-scrollbar-thumb:hover {
-  background-color: rgba(96, 100, 108, 0.5);
-}
-.vertical-scrollbar::-webkit-scrollbar-thumb:active,
-.horizontal-scrollbar::-webkit-scrollbar-thumb:active {
-  background-color: rgba(96, 100, 108, 0.7);
-}
-.vertical-scrollbar::-webkit-scrollbar-corner,
-.horizontal-scrollbar::-webkit-scrollbar-corner {
-  background-color: transparent;
-}
-.vertical-scrollbar-margin-top-md::-webkit-scrollbar-track {
-  margin-top: 44px;
-}
-
-/* scrollbar sm size */
-.scrollbar-sm::-webkit-scrollbar {
-  height: 12px;
-  width: 12px;
-}
-.scrollbar-sm::-webkit-scrollbar-thumb {
-  border: 3px solid rgba(0, 0, 0, 0);
-}
-/* scrollbar md size */
-.scrollbar-md::-webkit-scrollbar {
-  height: 14px;
-  width: 14px;
-}
-.scrollbar-md::-webkit-scrollbar-thumb {
-  border: 3px solid rgba(0, 0, 0, 0);
-}
-/* scrollbar lg size */
-
-.scrollbar-lg::-webkit-scrollbar {
-  height: 16px;
-  width: 16px;
-}
-.scrollbar-lg::-webkit-scrollbar-thumb {
-  border: 4px solid rgba(0, 0, 0, 0);
-}
-
-/* highlight class */
-.highlight {
-  border: 1px solid rgb(var(--color-primary-100)) !important;
-}
-.highlight-with-line {
-  border-left: 5px solid rgb(var(--color-primary-100)) !important;
-  background: rgb(var(--color-background-80));
-}
-
-/* By applying below class, the autofilled text in form fields will not have the default autofill background color and styles applied by WebKit browsers  */
-
-.disable-autofill-style:-webkit-autofill,
-.disable-autofill-style:-webkit-autofill:hover,
-.disable-autofill-style:-webkit-autofill:focus,
-.disable-autofill-style:-webkit-autofill:active {
-  -webkit-background-clip: text;
-}
+@import "@plane/tailwind-config/index.css";
diff --git a/packages/ui/tailwind.config.js b/packages/ui/tailwind.config.js
deleted file mode 100644
index 0ff2de70a..000000000
--- a/packages/ui/tailwind.config.js
+++ /dev/null
@@ -1,5 +0,0 @@
-const config = require("@plane/tailwind-config/tailwind.config.js");
-
-config.content.files = ["./src/**/*.{js,ts,jsx,tsx}"];
-
-module.exports = config;
diff --git a/packages/ui/tsdown.config.ts b/packages/ui/tsdown.config.ts
index 78c3dcba8..92959eaf7 100644
--- a/packages/ui/tsdown.config.ts
+++ b/packages/ui/tsdown.config.ts
@@ -5,4 +5,5 @@ export default defineConfig({
   format: ["esm"],
   dts: true,
   platform: "neutral",
+  exports: true,
 });
diff --git a/packages/utils/package.json b/packages/utils/package.json
index 573118f24..712c0a3cf 100644
--- a/packages/utils/package.json
+++ b/packages/utils/package.json
@@ -1,30 +1,31 @@
 {
   "name": "@plane/utils",
-  "version": "1.2.3",
+  "version": "1.3.0",
+  "private": true,
   "description": "Helper functions shared across multiple apps internally",
   "license": "AGPL-3.0",
-  "private": true,
   "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js"
-    },
+    ".": "./dist/index.js",
     "./package.json": "./package.json"
   },
   "scripts": {
     "build": "tsdown",
-    "dev": "tsdown --watch",
-    "check:lint": "eslint . --max-warnings=1062",
+    "dev": "tsdown --watch --no-clean",
+    "check:lint": "oxlint --max-warnings=38 .",
     "check:types": "tsc --noEmit",
-    "check:format": "prettier --check .",
-    "fix:lint": "eslint . --fix --max-warnings=1062",
-    "fix:format": "prettier --write .",
+    "check:format": "oxfmt --check .",
+    "fix:lint": "oxlint --fix .",
+    "fix:format": "oxfmt .",
     "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist"
   },
   "dependencies": {
     "@plane/constants": "workspace:*",
     "@plane/types": "workspace:*",
+    "chroma-js": "^3.2.0",
     "clsx": "^2.1.1",
     "date-fns": "^4.1.0",
     "hast": "^1.0.0",
@@ -38,12 +39,13 @@
     "remark-gfm": "^4.0.1",
     "remark-stringify": "^11.0.0",
     "sanitize-html": "2.17.0",
-    "tailwind-merge": "^2.5.5",
+    "tailwind-merge": "3.4.0",
     "unified": "^11.0.5",
     "uuid": "catalog:"
   },
   "devDependencies": {
     "@plane/typescript-config": "workspace:*",
+    "@types/chroma-js": "^3.1.2",
     "@types/hast": "^3.0.4",
     "@types/lodash-es": "catalog:",
     "@types/mdast": "^4.0.4",
@@ -52,8 +54,5 @@
     "@types/sanitize-html": "2.16.0",
     "tsdown": "catalog:",
     "typescript": "catalog:"
-  },
-  "main": "./dist/index.js",
-  "module": "./dist/index.js",
-  "types": "./dist/index.d.ts"
+  }
 }
diff --git a/packages/utils/src/array.ts b/packages/utils/src/array.ts
index 8e4e9f427..ea242e0bc 100644
--- a/packages/utils/src/array.ts
+++ b/packages/utils/src/array.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { isEmpty } from "lodash-es";
 import type { IIssueLabel, IIssueLabelTree } from "@plane/types";
 
@@ -194,3 +200,79 @@ export const convertStringArrayToBooleanObject = (arrayStrings: string[]) => {
 
   return obj;
 };
+
+/**
+ * @description Sorts dropdown options with selected items appearing first
+ * @param {T[]} options Array of dropdown options with value property
+ * @param {string[] | string | null | undefined} selectedValues Selected value(s) - array for multi-select, string for single-select
+ * @returns {T[]} Sorted array with selected items first
+ * @example
+ * const options = [{value: '1', label: 'A'}, {value: '2', label: 'B'}];
+ * sortBySelectedFirst(options, ['2']) // returns [{value: '2', label: 'B'}, {value: '1', label: 'A'}]
+ */
+export const sortBySelectedFirst = <T extends { value: string | null }>(
+  options: T[] | undefined,
+  selectedValues: string[] | string | null | undefined
+): T[] | undefined => {
+  if (!options || options.length === 0) return options;
+
+  // Normalize selectedValues to array for consistent handling
+  const selectedSet = new Set(Array.isArray(selectedValues) ? selectedValues : selectedValues ? [selectedValues] : []);
+
+  if (selectedSet.size === 0) return options;
+
+  // Create a shallow copy to avoid mutating the original array
+  return [...options].sort((a, b) => {
+    const aSelected = a.value !== null && selectedSet.has(a.value);
+    const bSelected = b.value !== null && selectedSet.has(b.value);
+
+    // If both selected or both unselected, maintain original order
+    if (aSelected === bSelected) return 0;
+
+    // Selected items come first
+    return aSelected ? -1 : 1;
+  });
+};
+
+/**
+ * @description Sorts dropdown options with current user first, then selected items, then unselected items
+ * @param {T[]} options Array of dropdown options with value property
+ * @param {string[] | string | null | undefined} selectedValues Selected value(s) - array for multi-select, string for single-select
+ * @param {string | undefined} currentUserId ID of the current user to prioritize
+ * @returns {T[]} Sorted array with current user first, then selected items, then unselected
+ * @example
+ * const options = [{value: 'user1'}, {value: 'user2'}, {value: 'user3'}];
+ * sortByCurrentUserThenSelected(options, ['user2'], 'user3')
+ * // returns [{value: 'user3'}, {value: 'user2'}, {value: 'user1'}]
+ */
+export const sortByCurrentUserThenSelected = <T extends { value: string | null }>(
+  options: T[] | undefined,
+  selectedValues: string[] | string | null | undefined,
+  currentUserId: string | undefined
+): T[] | undefined => {
+  if (!options || options.length === 0) return options;
+
+  // Normalize selectedValues to array for consistent handling
+  const selectedSet = new Set(Array.isArray(selectedValues) ? selectedValues : selectedValues ? [selectedValues] : []);
+
+  // Create a shallow copy to avoid mutating the original array
+  return [...options].sort((a, b) => {
+    const aIsCurrent = currentUserId && a.value === currentUserId;
+    const bIsCurrent = currentUserId && b.value === currentUserId;
+
+    // Current user always comes first
+    if (aIsCurrent && !bIsCurrent) return -1;
+    if (!aIsCurrent && bIsCurrent) return 1;
+    if (aIsCurrent && bIsCurrent) return 0;
+
+    // If neither is current user, sort by selection state
+    const aSelected = a.value !== null && selectedSet.has(a.value);
+    const bSelected = b.value !== null && selectedSet.has(b.value);
+
+    // If both selected or both unselected, maintain original order
+    if (aSelected === bSelected) return 0;
+
+    // Selected items come before unselected
+    return aSelected ? -1 : 1;
+  });
+};
diff --git a/packages/utils/src/attachment.ts b/packages/utils/src/attachment.ts
index 1f9f4f5a3..6813ae241 100644
--- a/packages/utils/src/attachment.ts
+++ b/packages/utils/src/attachment.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export const generateFileName = (fileName: string) => {
   const date = new Date();
   const timestamp = date.getTime();
diff --git a/packages/utils/src/auth.ts b/packages/utils/src/auth.ts
index 28da4eb8f..fd8b80ad0 100644
--- a/packages/utils/src/auth.ts
+++ b/packages/utils/src/auth.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { ReactNode } from "react";
 // plane imports
 import type { TAuthErrorInfo } from "@plane/constants";
@@ -93,6 +99,10 @@ const errorCodeMessages: {
     title: `Invalid password`,
     message: () => `Invalid password. Please try again.`,
   },
+  [EAuthErrorCodes.PASSWORD_TOO_WEAK]: {
+    title: `Password too weak`,
+    message: () => `Please use a stronger password.`,
+  },
   [EAuthErrorCodes.SMTP_NOT_CONFIGURED]: {
     title: `SMTP not configured`,
     message: () => `SMTP not configured. Please contact your administrator.`,
diff --git a/packages/utils/src/calendar.ts b/packages/utils/src/calendar.ts
index 2b1fd9886..3726d84e1 100644
--- a/packages/utils/src/calendar.ts
+++ b/packages/utils/src/calendar.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // plane imports
 import type { ICalendarDate, ICalendarPayload } from "@plane/types";
 import { EStartOfTheWeek } from "@plane/types";
diff --git a/packages/utils/src/color.ts b/packages/utils/src/color.ts
index 017c594b7..1fd4d087e 100644
--- a/packages/utils/src/color.ts
+++ b/packages/utils/src/color.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 /**
  * Represents an RGB color with numeric values for red, green, and blue components
  * @typedef {Object} TRgb
diff --git a/packages/utils/src/common.ts b/packages/utils/src/common.ts
index 692318a93..68fe30b41 100644
--- a/packages/utils/src/common.ts
+++ b/packages/utils/src/common.ts
@@ -1,11 +1,71 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { clsx } from "clsx";
 import type { ClassValue } from "clsx";
-import { twMerge } from "tailwind-merge";
+import { extendTailwindMerge } from "tailwind-merge";
 import type { CompleteOrEmpty } from "@plane/types";
 
 // Support email can be configured by the application
 export const getSupportEmail = (defaultEmail: string = ""): string => defaultEmail;
 
+// Matches custom typography classes: text-h1-semibold, text-body-md-regular, text-caption-xs-medium, etc.
+const isCustomTypography = (value: string) =>
+  !/^(h[1-6]|body-(xs|sm|md)|caption-(xs|sm|md))-(regular|medium|semibold|bold)$/.test(value);
+
+// Matches custom font size classes: text-9, text-10, text-11, text-12, text-13, text-14, text-16, text-18, text-20, text-24, text-28, text-32, text-40
+const isCustomFontSize = (value: string) => /^(9|10|11|12|13|14|16|18|20|24|28|32|40)$/.test(value);
+
+// Matches custom text color classes: text-primary, text-on-color, text-secondary, etc.
+const CUSTOM_TEXT_COLORS = [
+  "primary",
+  "secondary",
+  "tertiary",
+  "placeholder",
+  "disabled",
+  "accent-primary",
+  "accent-secondary",
+  "on-color",
+  "on-color-disabled",
+  "inverse",
+  "success",
+  "success-primary",
+  "success-secondary",
+  "warning",
+  "warning-primary",
+  "warning-secondary",
+  "danger",
+  "danger-primary",
+  "danger-secondary",
+];
+const isCustomTextColor = (value: string) => CUSTOM_TEXT_COLORS.includes(value);
+
+const twMerge = extendTailwindMerge<"custom-typography" | "custom-text-color">({
+  override: {
+    classGroups: {
+      // Override font-size to include custom numeric sizes and exclude custom typography/colors
+      "font-size": [
+        {
+          text: [
+            (value: string) => isCustomFontSize(value) || (!isCustomTypography(value) && !isCustomTextColor(value)),
+          ],
+        },
+      ],
+    },
+  },
+  extend: {
+    classGroups: {
+      // Custom typography in its own group
+      "custom-typography": [{ text: [isCustomTypography] }],
+      // Custom text colors in their own group (won't conflict with font sizes)
+      "custom-text-color": [{ text: [isCustomTextColor] }],
+    },
+  },
+});
+
 export const cn = (...inputs: ClassValue[]) => twMerge(clsx(inputs));
 
 /**
diff --git a/packages/utils/src/cycle.ts b/packages/utils/src/cycle.ts
index 7a2139b2a..5fce839ec 100644
--- a/packages/utils/src/cycle.ts
+++ b/packages/utils/src/cycle.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { startOfToday, format } from "date-fns";
 import { isEmpty, orderBy, sortBy, uniqBy } from "lodash-es";
 // plane imports
diff --git a/packages/utils/src/datetime.ts b/packages/utils/src/datetime.ts
index bc9d06964..67e809b58 100644
--- a/packages/utils/src/datetime.ts
+++ b/packages/utils/src/datetime.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { differenceInDays, format, formatDistanceToNow, isAfter, isEqual, isValid, parseISO } from "date-fns";
 import { isNumber } from "lodash-es";
 
diff --git a/packages/utils/src/distribution-update.ts b/packages/utils/src/distribution-update.ts
index 227884669..f9b965de2 100644
--- a/packages/utils/src/distribution-update.ts
+++ b/packages/utils/src/distribution-update.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { format } from "date-fns";
 import { get, set } from "lodash-es";
 // plane imports
diff --git a/packages/utils/src/editor/common.ts b/packages/utils/src/editor/common.ts
index fdbaae6de..9b409cc94 100644
--- a/packages/utils/src/editor/common.ts
+++ b/packages/utils/src/editor/common.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // local imports
 import { getFileURL } from "../file";
 
diff --git a/packages/utils/src/editor/index.ts b/packages/utils/src/editor/index.ts
index 3d52959b1..534c1ee79 100644
--- a/packages/utils/src/editor/index.ts
+++ b/packages/utils/src/editor/index.ts
@@ -1,2 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./common";
 export * from "./markdown-parser";
diff --git a/packages/utils/src/editor/markdown-parser/common.ts b/packages/utils/src/editor/markdown-parser/common.ts
index 5639dca9e..53d632012 100644
--- a/packages/utils/src/editor/markdown-parser/common.ts
+++ b/packages/utils/src/editor/markdown-parser/common.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { Text as MDASTText } from "mdast";
 
 export const createTextNode = (value: string): MDASTText => ({
diff --git a/packages/utils/src/editor/markdown-parser/custom-components-handler.ts b/packages/utils/src/editor/markdown-parser/custom-components-handler.ts
index 0e769366f..44b0d1308 100644
--- a/packages/utils/src/editor/markdown-parser/custom-components-handler.ts
+++ b/packages/utils/src/editor/markdown-parser/custom-components-handler.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { Handle } from "hast-util-to-mdast";
 // local imports
 import { createTextNode } from "./common";
@@ -29,13 +35,19 @@ export const parseCustomComponents = (args: TArgs): Record<string, Handle> => {
     },
     "mention-component": (_state, node) => {
       const properties = node.properties || {};
-      const userId = String(properties.entity_identifier);
-      const userDetails = metaData.user_mentions.find((user) => user.id === userId);
-      if (!userDetails) return createTextNode("");
-      return createTextNode(`[@${userDetails.display_name || "Unknown user"}](${userDetails.url || ""}) `);
+      const mentionType = String(properties.entity_name);
+
+      let url: string = "";
+      let tag: string = "@";
+      if (mentionType === "user_mention") {
+        const userId = String(properties.entity_identifier);
+        const userDetails = metaData.user_mentions.find((user) => user.id === userId);
+        if (!userDetails) return createTextNode("");
+        url = userDetails.url || "";
+        tag = `@${userDetails.display_name || "Unknown user"}`;
+      }
+
+      return createTextNode(`[${tag}](${url}) `);
     },
-    ...parseExtendedCustomComponents({ metaData }),
   };
 };
-
-export const parseExtendedCustomComponents = (_args: TArgs): Record<string, Handle> => ({});
diff --git a/packages/utils/src/editor/markdown-parser/index.ts b/packages/utils/src/editor/markdown-parser/index.ts
index a3839f79b..e18db9327 100644
--- a/packages/utils/src/editor/markdown-parser/index.ts
+++ b/packages/utils/src/editor/markdown-parser/index.ts
@@ -1,2 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./types";
 export * from "./root";
diff --git a/packages/utils/src/editor/markdown-parser/marks-handler.ts b/packages/utils/src/editor/markdown-parser/marks-handler.ts
index 7e3d5a6de..8ee58a1c3 100644
--- a/packages/utils/src/editor/markdown-parser/marks-handler.ts
+++ b/packages/utils/src/editor/markdown-parser/marks-handler.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { Handle } from "hast-util-to-mdast";
 import type { PhrasingContent, Text as MDASTText } from "mdast";
 // local imports
diff --git a/packages/utils/src/editor/markdown-parser/root.ts b/packages/utils/src/editor/markdown-parser/root.ts
index 972b47a08..ea0bb23db 100644
--- a/packages/utils/src/editor/markdown-parser/root.ts
+++ b/packages/utils/src/editor/markdown-parser/root.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // - Parses TipTap/ProseMirror HTML fragments
 // - Removes <u> tags (Markdown has no underline)
 // - Adds a space after checkbox inputs for correct GFM task list rendering
diff --git a/packages/utils/src/editor/markdown-parser/types.ts b/packages/utils/src/editor/markdown-parser/types.ts
index 44a1a635d..fc726c232 100644
--- a/packages/utils/src/editor/markdown-parser/types.ts
+++ b/packages/utils/src/editor/markdown-parser/types.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export type TCoreCustomComponentsMetaData = {
   file_assets: {
     id: string;
diff --git a/packages/utils/src/emoji.ts b/packages/utils/src/emoji.ts
index 567d3575e..e0ab593b8 100644
--- a/packages/utils/src/emoji.ts
+++ b/packages/utils/src/emoji.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // plane imports
 import { RANDOM_EMOJI_CODES } from "@plane/constants";
 
diff --git a/packages/utils/src/estimates.ts b/packages/utils/src/estimates.ts
index 59c3f1136..fc1fed7e5 100644
--- a/packages/utils/src/estimates.ts
+++ b/packages/utils/src/estimates.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // plane web constants
 import { EEstimateSystem } from "@plane/constants";
 
diff --git a/packages/utils/src/file.ts b/packages/utils/src/file.ts
index 632be9265..0d5d385a3 100644
--- a/packages/utils/src/file.ts
+++ b/packages/utils/src/file.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // plane imports
 import { API_BASE_URL } from "@plane/constants";
 
diff --git a/packages/utils/src/filter.ts b/packages/utils/src/filter.ts
index ee2ca5e33..72ffe1fed 100644
--- a/packages/utils/src/filter.ts
+++ b/packages/utils/src/filter.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { differenceInCalendarDays } from "date-fns/differenceInCalendarDays";
 // local imports
 import { getDate } from "./datetime";
diff --git a/packages/utils/src/get-icon-for-link.ts b/packages/utils/src/get-icon-for-link.ts
index 0c703a81c..d6420dcdc 100644
--- a/packages/utils/src/get-icon-for-link.ts
+++ b/packages/utils/src/get-icon-for-link.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import {
   Github,
   Linkedin,
diff --git a/packages/utils/src/index.ts b/packages/utils/src/index.ts
index 7cc4c58e9..450acb4b2 100644
--- a/packages/utils/src/index.ts
+++ b/packages/utils/src/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./array";
 export * from "./attachment";
 export * from "./auth";
@@ -28,7 +34,9 @@ export * from "./string";
 export * from "./subscription";
 export * from "./tab-indices";
 export * from "./theme";
+export { resolveGeneralTheme } from "./theme-legacy";
 export * from "./url";
+export * from "./validation";
 export * from "./work-item-filters";
 export * from "./work-item";
 export * from "./workspace";
diff --git a/packages/utils/src/intake.ts b/packages/utils/src/intake.ts
index 12e59f9ac..ef450d4a4 100644
--- a/packages/utils/src/intake.ts
+++ b/packages/utils/src/intake.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { subDays } from "date-fns";
 // plane imports
 import { EPastDurationFilters } from "@plane/constants";
diff --git a/packages/utils/src/loader.ts b/packages/utils/src/loader.ts
index dd3d95eeb..4ce950310 100644
--- a/packages/utils/src/loader.ts
+++ b/packages/utils/src/loader.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { TLoader } from "@plane/types";
 
 // checks if a loader has finished initialization
diff --git a/packages/utils/src/math.ts b/packages/utils/src/math.ts
index 88e4040a0..0e2a1ac66 100644
--- a/packages/utils/src/math.ts
+++ b/packages/utils/src/math.ts
@@ -1,2 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export const getProgress = (completed: number | undefined, total: number | undefined) =>
   total && total > 0 ? Math.round(((completed ?? 0) / total) * 100) : 0;
diff --git a/packages/utils/src/module.ts b/packages/utils/src/module.ts
index 39cba0822..c44683610 100644
--- a/packages/utils/src/module.ts
+++ b/packages/utils/src/module.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { sortBy } from "lodash-es";
 // plane imports
 import type { IModule, TModuleDisplayFilters, TModuleFilters, TModuleOrderByOptions } from "@plane/types";
diff --git a/packages/utils/src/notification.ts b/packages/utils/src/notification.ts
index b4bc9cbd9..b8751ab82 100644
--- a/packages/utils/src/notification.ts
+++ b/packages/utils/src/notification.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { stripAndTruncateHTML } from "./string";
 
 export const sanitizeCommentForNotification = (mentionContent: string | undefined) =>
diff --git a/packages/utils/src/page.ts b/packages/utils/src/page.ts
index 7eaedb578..b566c5b6d 100644
--- a/packages/utils/src/page.ts
+++ b/packages/utils/src/page.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { sortBy } from "lodash-es";
 // plane imports
 import type {
diff --git a/packages/utils/src/permission/index.ts b/packages/utils/src/permission/index.ts
index 807babea7..afca0d02b 100644
--- a/packages/utils/src/permission/index.ts
+++ b/packages/utils/src/permission/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./role";
diff --git a/packages/utils/src/permission/role.ts b/packages/utils/src/permission/role.ts
index 2889907d7..b2a1198d8 100644
--- a/packages/utils/src/permission/role.ts
+++ b/packages/utils/src/permission/role.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // plane imports
 import { EUserPermissions } from "@plane/constants";
 import type { EUserProjectRoles, EUserWorkspaceRoles } from "@plane/types";
diff --git a/packages/utils/src/project-views.ts b/packages/utils/src/project-views.ts
index 5fdf50214..8628f612c 100644
--- a/packages/utils/src/project-views.ts
+++ b/packages/utils/src/project-views.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { isNil, orderBy } from "lodash-es";
 // plane imports
 import { SPACE_BASE_PATH, SPACE_BASE_URL } from "@plane/constants";
diff --git a/packages/utils/src/project.ts b/packages/utils/src/project.ts
index cdb9a71dc..1cfc2cfa2 100644
--- a/packages/utils/src/project.ts
+++ b/packages/utils/src/project.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { sortBy } from "lodash-es";
 // plane imports
 import type { TProject, TProjectDisplayFilters, TProjectFilters, TProjectOrderByOptions } from "@plane/types";
diff --git a/packages/utils/src/rich-filters/factories/configs/core.ts b/packages/utils/src/rich-filters/factories/configs/core.ts
index 92eeb0e25..84203c6c7 100644
--- a/packages/utils/src/rich-filters/factories/configs/core.ts
+++ b/packages/utils/src/rich-filters/factories/configs/core.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // plane imports
 import type { TFilterValue, TSupportedOperators, TBaseFilterFieldConfig } from "@plane/types";
 import { FILTER_FIELD_TYPE } from "@plane/types";
diff --git a/packages/utils/src/rich-filters/factories/configs/index.ts b/packages/utils/src/rich-filters/factories/configs/index.ts
index 6a75f4dce..14efa668a 100644
--- a/packages/utils/src/rich-filters/factories/configs/index.ts
+++ b/packages/utils/src/rich-filters/factories/configs/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./core";
 export * from "./shared";
 export * from "./properties";
diff --git a/packages/utils/src/rich-filters/factories/configs/properties/date.ts b/packages/utils/src/rich-filters/factories/configs/properties/date.ts
index 39379cae9..e4db0bd40 100644
--- a/packages/utils/src/rich-filters/factories/configs/properties/date.ts
+++ b/packages/utils/src/rich-filters/factories/configs/properties/date.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // plane imports
 import type { TFilterProperty } from "@plane/types";
 // local imports
diff --git a/packages/utils/src/rich-filters/factories/configs/properties/index.ts b/packages/utils/src/rich-filters/factories/configs/properties/index.ts
index 96edf472a..c988f50bb 100644
--- a/packages/utils/src/rich-filters/factories/configs/properties/index.ts
+++ b/packages/utils/src/rich-filters/factories/configs/properties/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./date";
 export * from "./member-picker";
 export * from "./shared";
diff --git a/packages/utils/src/rich-filters/factories/configs/properties/member-picker.ts b/packages/utils/src/rich-filters/factories/configs/properties/member-picker.ts
index c5da205ce..f1eb05468 100644
--- a/packages/utils/src/rich-filters/factories/configs/properties/member-picker.ts
+++ b/packages/utils/src/rich-filters/factories/configs/properties/member-picker.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // plane imports
 import type { IUserLite, TFilterProperty } from "@plane/types";
 import { EQUALITY_OPERATOR } from "@plane/types";
diff --git a/packages/utils/src/rich-filters/factories/configs/properties/shared.ts b/packages/utils/src/rich-filters/factories/configs/properties/shared.ts
index 1ffd9c67b..7222d5d65 100644
--- a/packages/utils/src/rich-filters/factories/configs/properties/shared.ts
+++ b/packages/utils/src/rich-filters/factories/configs/properties/shared.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // plane imports
 import type { IProject, IUserLite, TOperatorConfigMap, TSupportedOperators } from "@plane/types";
 import { COMPARISON_OPERATOR, EQUALITY_OPERATOR } from "@plane/types";
@@ -41,7 +47,7 @@ export const getMemberMultiSelectConfig = (params: TCreateUserFilterParams, sing
 
 // ------------ Date Operators ------------
 
-export const getSupportedDateOperators = (params: TCreateDateFilterParams): TOperatorConfigMap<Date> =>
+export const getSupportedDateOperators = (params: TCreateDateFilterParams): TOperatorConfigMap =>
   new Map([
     createOperatorConfigEntry(EQUALITY_OPERATOR.EXACT, params, (updatedParams) => getDatePickerConfig(updatedParams)),
     createOperatorConfigEntry(COMPARISON_OPERATOR.RANGE, params, (updatedParams) =>
diff --git a/packages/utils/src/rich-filters/factories/configs/shared.ts b/packages/utils/src/rich-filters/factories/configs/shared.ts
index b67b1b107..e7cc207ba 100644
--- a/packages/utils/src/rich-filters/factories/configs/shared.ts
+++ b/packages/utils/src/rich-filters/factories/configs/shared.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type {
   FILTER_FIELD_TYPE,
   TBaseFilterFieldConfig,
@@ -11,6 +17,7 @@ import type {
   TSingleSelectFilterFieldConfig,
   TSupportedFilterFieldConfigs,
   TSupportedOperators,
+  TOperatorSpecificConfigs,
 } from "@plane/types";
 
 /**
@@ -18,9 +25,7 @@ import type {
  * @param config - The filter config to create
  * @returns The created filter config
  */
-export const createFilterConfig = <P extends TFilterProperty, V extends TFilterValue>(
-  config: TFilterConfig<P, V>
-): TFilterConfig<P, V> => config;
+export const createFilterConfig = <P extends TFilterProperty>(config: TFilterConfig<P>): TFilterConfig<P> => config;
 
 /**
  * Base parameters for filter type config factory functions.
@@ -56,16 +61,20 @@ export type TCreateDateFilterParams = TCreateFilterConfigParams & IFilterIconCon
 /**
  * Helper to create an operator entry for the supported operators map.
  * This ensures consistency between the operator key and the operator passed to the config function.
+ * Returns a type compatible with TOperatorSpecificConfigs so Map constructor accepts union types.
  * @param operator - The operator to use as both key and parameter
  * @param createParams - The base filter configuration parameters
  * @param configFn - Function that creates the operator config using base configuration
- * @returns A tuple of operator and its config
+ * @returns A tuple of operator and its config, typed to be compatible with operator configs map
  */
-export const createOperatorConfigEntry = <T, P extends TCreateFilterConfigParams>(
+export const createOperatorConfigEntry = <
+  T extends TOperatorSpecificConfigs[keyof TOperatorSpecificConfigs],
+  P extends TCreateFilterConfigParams,
+>(
   operator: TSupportedOperators,
   createParams: P,
   configFn: (updatedParams: P) => T
-): [TSupportedOperators, T] => [
+): [TSupportedOperators, TOperatorSpecificConfigs[keyof TOperatorSpecificConfigs]] => [
   operator,
   configFn({ isOperatorEnabled: createParams.allowedOperators.has(operator), ...createParams }),
 ];
diff --git a/packages/utils/src/rich-filters/factories/index.ts b/packages/utils/src/rich-filters/factories/index.ts
index 976c1ab63..99f213f4e 100644
--- a/packages/utils/src/rich-filters/factories/index.ts
+++ b/packages/utils/src/rich-filters/factories/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./configs/core";
 export * from "./configs/shared";
 export * from "./configs/properties";
diff --git a/packages/utils/src/rich-filters/factories/nodes/core.ts b/packages/utils/src/rich-filters/factories/nodes/core.ts
index 982be3163..5b7d8cf13 100644
--- a/packages/utils/src/rich-filters/factories/nodes/core.ts
+++ b/packages/utils/src/rich-filters/factories/nodes/core.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { v4 as uuidv4 } from "uuid";
 // plane imports
 import type {
diff --git a/packages/utils/src/rich-filters/index.ts b/packages/utils/src/rich-filters/index.ts
index ac68890e2..8e7727ac1 100644
--- a/packages/utils/src/rich-filters/index.ts
+++ b/packages/utils/src/rich-filters/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./factories";
 export * from "./operations";
 export * from "./operators";
diff --git a/packages/utils/src/rich-filters/operations/comparison.ts b/packages/utils/src/rich-filters/operations/comparison.ts
index 2865c0646..e25d7e4e9 100644
--- a/packages/utils/src/rich-filters/operations/comparison.ts
+++ b/packages/utils/src/rich-filters/operations/comparison.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { compact, isEqual, sortBy } from "lodash-es";
 // plane imports
 import type {
diff --git a/packages/utils/src/rich-filters/operations/index.ts b/packages/utils/src/rich-filters/operations/index.ts
index d362a4d5e..038cc52ac 100644
--- a/packages/utils/src/rich-filters/operations/index.ts
+++ b/packages/utils/src/rich-filters/operations/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./comparison";
 export * from "./manipulation/core";
 export * from "./transformation/core";
diff --git a/packages/utils/src/rich-filters/operations/manipulation/core.ts b/packages/utils/src/rich-filters/operations/manipulation/core.ts
index 3f29959bf..acbf75f2b 100644
--- a/packages/utils/src/rich-filters/operations/manipulation/core.ts
+++ b/packages/utils/src/rich-filters/operations/manipulation/core.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // plane imports
 import type {
   TFilterConditionPayload,
diff --git a/packages/utils/src/rich-filters/operations/transformation/core.ts b/packages/utils/src/rich-filters/operations/transformation/core.ts
index 8ccfac412..ca8aba167 100644
--- a/packages/utils/src/rich-filters/operations/transformation/core.ts
+++ b/packages/utils/src/rich-filters/operations/transformation/core.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // plane imports
 import type { TFilterExpression, TFilterGroupNode, TFilterProperty } from "@plane/types";
 // local imports
diff --git a/packages/utils/src/rich-filters/operations/transformation/shared.ts b/packages/utils/src/rich-filters/operations/transformation/shared.ts
index 88f0de1f8..97d28c2f7 100644
--- a/packages/utils/src/rich-filters/operations/transformation/shared.ts
+++ b/packages/utils/src/rich-filters/operations/transformation/shared.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { TFilterGroupNode, TFilterProperty } from "@plane/types";
 import { processGroupNode } from "../../types/shared";
 import type { TTreeTransformFn, TTreeTransformResult } from "./core";
diff --git a/packages/utils/src/rich-filters/operations/traversal/core.ts b/packages/utils/src/rich-filters/operations/traversal/core.ts
index 7237c3261..edcfc20de 100644
--- a/packages/utils/src/rich-filters/operations/traversal/core.ts
+++ b/packages/utils/src/rich-filters/operations/traversal/core.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // plane imports
 import type {
   TAllAvailableOperatorsForDisplay,
diff --git a/packages/utils/src/rich-filters/operations/traversal/shared.ts b/packages/utils/src/rich-filters/operations/traversal/shared.ts
index 89c1f6d41..081cc9b4f 100644
--- a/packages/utils/src/rich-filters/operations/traversal/shared.ts
+++ b/packages/utils/src/rich-filters/operations/traversal/shared.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // plane imports
 import type {
   TAllAvailableOperatorsForDisplay,
diff --git a/packages/utils/src/rich-filters/operators/core.ts b/packages/utils/src/rich-filters/operators/core.ts
index db86286c6..391cf0001 100644
--- a/packages/utils/src/rich-filters/operators/core.ts
+++ b/packages/utils/src/rich-filters/operators/core.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { get } from "lodash-es";
 // plane imports
 import { DATE_OPERATOR_LABELS_MAP, EMPTY_OPERATOR_LABEL, OPERATOR_LABELS_MAP } from "@plane/constants";
diff --git a/packages/utils/src/rich-filters/operators/index.ts b/packages/utils/src/rich-filters/operators/index.ts
index 102ec949b..5b1e19f83 100644
--- a/packages/utils/src/rich-filters/operators/index.ts
+++ b/packages/utils/src/rich-filters/operators/index.ts
@@ -1,2 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./core";
 export * from "./shared";
diff --git a/packages/utils/src/rich-filters/operators/shared.ts b/packages/utils/src/rich-filters/operators/shared.ts
index 3daed0a9b..2839ebf97 100644
--- a/packages/utils/src/rich-filters/operators/shared.ts
+++ b/packages/utils/src/rich-filters/operators/shared.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { TAllAvailableOperatorsForDisplay, TSupportedOperators } from "@plane/types";
 
 /**
diff --git a/packages/utils/src/rich-filters/types/core.ts b/packages/utils/src/rich-filters/types/core.ts
index 8d0bc5622..99826b872 100644
--- a/packages/utils/src/rich-filters/types/core.ts
+++ b/packages/utils/src/rich-filters/types/core.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type {
   TFilterAndGroupNode,
   TFilterConditionNode,
diff --git a/packages/utils/src/rich-filters/types/index.ts b/packages/utils/src/rich-filters/types/index.ts
index 102ec949b..5b1e19f83 100644
--- a/packages/utils/src/rich-filters/types/index.ts
+++ b/packages/utils/src/rich-filters/types/index.ts
@@ -1,2 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./core";
 export * from "./shared";
diff --git a/packages/utils/src/rich-filters/types/shared.ts b/packages/utils/src/rich-filters/types/shared.ts
index e1da6911b..6d25c2835 100644
--- a/packages/utils/src/rich-filters/types/shared.ts
+++ b/packages/utils/src/rich-filters/types/shared.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // plane imports
 import type { TFilterAndGroupNode, TFilterExpression, TFilterGroupNode, TFilterProperty } from "@plane/types";
 // local imports
diff --git a/packages/utils/src/rich-filters/validators/core.ts b/packages/utils/src/rich-filters/validators/core.ts
index ee66e0f7e..72f39d5a4 100644
--- a/packages/utils/src/rich-filters/validators/core.ts
+++ b/packages/utils/src/rich-filters/validators/core.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // plane imports
 import type { SingleOrArray, TFilterExpression, TFilterProperty, TFilterValue } from "@plane/types";
 // local imports
diff --git a/packages/utils/src/rich-filters/validators/index.ts b/packages/utils/src/rich-filters/validators/index.ts
index 102ec949b..5b1e19f83 100644
--- a/packages/utils/src/rich-filters/validators/index.ts
+++ b/packages/utils/src/rich-filters/validators/index.ts
@@ -1,2 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./core";
 export * from "./shared";
diff --git a/packages/utils/src/rich-filters/validators/shared.ts b/packages/utils/src/rich-filters/validators/shared.ts
index 5430c5773..dd75b6ce3 100644
--- a/packages/utils/src/rich-filters/validators/shared.ts
+++ b/packages/utils/src/rich-filters/validators/shared.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // plane imports
 import type { TFilterGroupNode, TFilterProperty } from "@plane/types";
 // local imports
diff --git a/packages/utils/src/rich-filters/values/core.ts b/packages/utils/src/rich-filters/values/core.ts
index a2a6b111f..6670da488 100644
--- a/packages/utils/src/rich-filters/values/core.ts
+++ b/packages/utils/src/rich-filters/values/core.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { SingleOrArray, TFilterValue } from "@plane/types";
 
 /**
diff --git a/packages/utils/src/rich-filters/values/index.ts b/packages/utils/src/rich-filters/values/index.ts
index 8d119dee8..bcdcb87a1 100644
--- a/packages/utils/src/rich-filters/values/index.ts
+++ b/packages/utils/src/rich-filters/values/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./core";
diff --git a/packages/utils/src/router.ts b/packages/utils/src/router.ts
index e9355de9f..9b4da605b 100644
--- a/packages/utils/src/router.ts
+++ b/packages/utils/src/router.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export const generateQueryParams = (searchParams: URLSearchParams, excludedParamKeys?: string[]): string => {
   const params = new URLSearchParams(searchParams);
   excludedParamKeys &&
diff --git a/packages/utils/src/string.ts b/packages/utils/src/string.ts
index b23d1b9bd..4d2f112e3 100644
--- a/packages/utils/src/string.ts
+++ b/packages/utils/src/string.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import sanitizeHtml from "sanitize-html";
 import type { Content, JSONContent } from "@plane/types";
 
diff --git a/packages/utils/src/subscription.ts b/packages/utils/src/subscription.ts
index bd74f529f..452d6e98e 100644
--- a/packages/utils/src/subscription.ts
+++ b/packages/utils/src/subscription.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { orderBy } from "lodash-es";
 // plane imports
 import type { IPaymentProduct, TProductSubscriptionType, TSubscriptionPrice } from "@plane/types";
diff --git a/packages/utils/src/tab-indices.ts b/packages/utils/src/tab-indices.ts
index e4232319b..8760872a2 100644
--- a/packages/utils/src/tab-indices.ts
+++ b/packages/utils/src/tab-indices.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // plane imports
 import type { ETabIndices } from "@plane/constants";
 import { TAB_INDEX_MAP } from "@plane/constants";
diff --git a/packages/utils/src/theme-legacy.ts b/packages/utils/src/theme-legacy.ts
new file mode 100644
index 000000000..bdfb40833
--- /dev/null
+++ b/packages/utils/src/theme-legacy.ts
@@ -0,0 +1,27 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+/**
+ * Legacy Theme System
+ *
+ * This file contains the old 5-color theme system for backward compatibility.
+ *
+ * @deprecated Most functions in this file are deprecated
+ * New code should use the OKLCH-based theme system from ./theme/ instead
+ *
+ * Functions:
+ * - applyTheme: OLD 5-color theme system (background, text, primary, sidebarBg, sidebarText)
+ * - unsetCustomCssVariables: Clears both old AND new theme variables (updated for OKLCH)
+ * - resolveGeneralTheme: Utility to resolve theme mode (still useful)
+ * - migrateLegacyTheme: Converts old 5-color theme to new 2-color system
+ *
+ * For new implementations:
+ * - Use: import { applyCustomTheme, clearCustomTheme } from '@plane/utils/theme'
+ * - See: packages/utils/src/theme/theme-application.ts
+ */
+
+export const resolveGeneralTheme = (resolvedTheme: string | undefined) =>
+  resolvedTheme?.includes("light") ? "light" : resolvedTheme?.includes("dark") ? "dark" : "system";
diff --git a/packages/utils/src/theme.ts b/packages/utils/src/theme.ts
deleted file mode 100644
index 54e6d4254..000000000
--- a/packages/utils/src/theme.ts
+++ /dev/null
@@ -1,125 +0,0 @@
-// local imports
-import type { TRgb } from "./color";
-import { hexToRgb } from "./color";
-
-type TShades = {
-  10: TRgb;
-  20: TRgb;
-  30: TRgb;
-  40: TRgb;
-  50: TRgb;
-  60: TRgb;
-  70: TRgb;
-  80: TRgb;
-  90: TRgb;
-  100: TRgb;
-  200: TRgb;
-  300: TRgb;
-  400: TRgb;
-  500: TRgb;
-  600: TRgb;
-  700: TRgb;
-  800: TRgb;
-  900: TRgb;
-};
-
-const calculateShades = (hexValue: string): TShades => {
-  const shades: Partial<TShades> = {};
-  const { r, g, b } = hexToRgb(hexValue);
-
-  const convertHexToSpecificShade = (shade: number): TRgb => {
-    if (shade <= 100) {
-      const decimalValue = (100 - shade) / 100;
-
-      const newR = Math.floor(r + (255 - r) * decimalValue);
-      const newG = Math.floor(g + (255 - g) * decimalValue);
-      const newB = Math.floor(b + (255 - b) * decimalValue);
-
-      return {
-        r: newR,
-        g: newG,
-        b: newB,
-      };
-    } else {
-      const decimalValue = 1 - Math.ceil((shade - 100) / 100) / 10;
-
-      const newR = Math.ceil(r * decimalValue);
-      const newG = Math.ceil(g * decimalValue);
-      const newB = Math.ceil(b * decimalValue);
-
-      return {
-        r: newR,
-        g: newG,
-        b: newB,
-      };
-    }
-  };
-
-  for (let i = 10; i <= 900; i >= 100 ? (i += 100) : (i += 10))
-    shades[i as keyof TShades] = convertHexToSpecificShade(i);
-
-  return shades as TShades;
-};
-
-export const applyTheme = (palette: string, isDarkPalette: boolean) => {
-  if (!palette) return;
-  const themeElement = document?.querySelector("html");
-  // palette: [bg, text, primary, sidebarBg, sidebarText]
-  const values: string[] = palette.split(",");
-  values.push(isDarkPalette ? "dark" : "light");
-
-  const bgShades = calculateShades(values[0]);
-  const textShades = calculateShades(values[1]);
-  const primaryShades = calculateShades(values[2]);
-  const sidebarBackgroundShades = calculateShades(values[3]);
-  const sidebarTextShades = calculateShades(values[4]);
-
-  for (let i = 10; i <= 900; i >= 100 ? (i += 100) : (i += 10)) {
-    const shade = i as keyof TShades;
-
-    const bgRgbValues = `${bgShades[shade].r}, ${bgShades[shade].g}, ${bgShades[shade].b}`;
-    const textRgbValues = `${textShades[shade].r}, ${textShades[shade].g}, ${textShades[shade].b}`;
-    const primaryRgbValues = `${primaryShades[shade].r}, ${primaryShades[shade].g}, ${primaryShades[shade].b}`;
-    const sidebarBackgroundRgbValues = `${sidebarBackgroundShades[shade].r}, ${sidebarBackgroundShades[shade].g}, ${sidebarBackgroundShades[shade].b}`;
-    const sidebarTextRgbValues = `${sidebarTextShades[shade].r}, ${sidebarTextShades[shade].g}, ${sidebarTextShades[shade].b}`;
-
-    themeElement?.style.setProperty(`--color-background-${shade}`, bgRgbValues);
-    themeElement?.style.setProperty(`--color-text-${shade}`, textRgbValues);
-    themeElement?.style.setProperty(`--color-primary-${shade}`, primaryRgbValues);
-    themeElement?.style.setProperty(`--color-sidebar-background-${shade}`, sidebarBackgroundRgbValues);
-    themeElement?.style.setProperty(`--color-sidebar-text-${shade}`, sidebarTextRgbValues);
-
-    if (i >= 100 && i <= 400) {
-      const borderShade = i === 100 ? 70 : i === 200 ? 80 : i === 300 ? 90 : 100;
-
-      themeElement?.style.setProperty(
-        `--color-border-${shade}`,
-        `${bgShades[borderShade].r}, ${bgShades[borderShade].g}, ${bgShades[borderShade].b}`
-      );
-      themeElement?.style.setProperty(
-        `--color-sidebar-border-${shade}`,
-        `${sidebarBackgroundShades[borderShade].r}, ${sidebarBackgroundShades[borderShade].g}, ${sidebarBackgroundShades[borderShade].b}`
-      );
-    }
-  }
-
-  themeElement?.style.setProperty("--color-scheme", values[5]);
-};
-
-export const unsetCustomCssVariables = () => {
-  for (let i = 10; i <= 900; i >= 100 ? (i += 100) : (i += 10)) {
-    const dom = document.querySelector<HTMLElement>("[data-theme='custom']");
-
-    dom?.style.removeProperty(`--color-background-${i}`);
-    dom?.style.removeProperty(`--color-text-${i}`);
-    dom?.style.removeProperty(`--color-border-${i}`);
-    dom?.style.removeProperty(`--color-primary-${i}`);
-    dom?.style.removeProperty(`--color-sidebar-background-${i}`);
-    dom?.style.removeProperty(`--color-sidebar-text-${i}`);
-    dom?.style.removeProperty(`--color-sidebar-border-${i}`);
-    dom?.style.removeProperty("--color-scheme");
-  }
-};
-
-export const resolveGeneralTheme = (resolvedTheme: string | undefined) =>
-  resolvedTheme?.includes("light") ? "light" : resolvedTheme?.includes("dark") ? "dark" : "system";
diff --git a/packages/utils/src/theme/color-conversion.ts b/packages/utils/src/theme/color-conversion.ts
new file mode 100644
index 000000000..aefaccf0d
--- /dev/null
+++ b/packages/utils/src/theme/color-conversion.ts
@@ -0,0 +1,176 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+/**
+ * Color Conversion Utilities
+ * Provides hex/RGB/HSL/OKLCH conversions using chroma-js
+ */
+
+import chroma from "chroma-js";
+import { validateAndAdjustOKLCH } from "./color-validation";
+
+/**
+ * RGB color interface
+ */
+export interface RGB {
+  r: number;
+  g: number;
+  b: number;
+}
+
+/**
+ * OKLCH color interface (modern perceptual color space)
+ * L = Lightness (0-1)
+ * C = Chroma/Saturation
+ * H = Hue (0-360 degrees)
+ */
+export interface OKLCH {
+  l: number;
+  c: number;
+  h: number;
+}
+
+/**
+ * Convert hex color to OKLCH color space
+ * Uses chroma-js for accurate conversion
+ */
+export function hexToOKLCH(hex: string): OKLCH {
+  try {
+    const cleanHex = hex.replace("#", "");
+    const color = chroma(`#${cleanHex}`);
+    const [l, c, h] = color.oklch();
+
+    // Validate and adjust if needed
+    return validateAndAdjustOKLCH({ l, c: c || 0, h: h || 0 });
+  } catch (error) {
+    console.error("Error converting hex to OKLCH:", error);
+    // Return a safe default (mid-gray)
+    return { l: 0.5, c: 0, h: 0 };
+  }
+}
+
+/**
+ * Convert OKLCH to CSS string format
+ * Example: oklch(0.5840 0.1200 250.00)
+ */
+export function oklchToCSS(oklch: OKLCH, alpha?: number): string {
+  const { l, c, h } = oklch;
+  return `oklch(${l.toFixed(4)} ${c.toFixed(4)} ${h.toFixed(2)}${alpha ? ` / ${alpha.toFixed(2)}%` : ""})`;
+}
+
+/**
+ * Convert hex color to OKLCH CSS string
+ * Combines hexToOKLCH and oklchToCSS
+ */
+export function hexToOKLCHString(hex: string): string {
+  const oklch = hexToOKLCH(hex);
+  return oklchToCSS(oklch);
+}
+
+/**
+ * Parse OKLCH CSS string to OKLCH object
+ * Example: "oklch(0.5840 0.1200 250.00)" -> { l: 0.5840, c: 0.1200, h: 250.00 }
+ */
+export function parseOKLCH(oklchString: string): OKLCH | null {
+  const match = oklchString.match(/oklch\(([\d.]+)\s+([\d.]+)\s+([\d.]+)\)/);
+  if (match) {
+    return {
+      l: parseFloat(match[1]),
+      c: parseFloat(match[2]),
+      h: parseFloat(match[3]),
+    };
+  }
+  return null;
+}
+
+/**
+ * Convert hex color to RGB object
+ * Legacy function for backward compatibility
+ */
+export function hexToRgb(hex: string): RGB {
+  const cleanHex = hex.replace("#", "");
+
+  const r = parseInt(cleanHex.substring(0, 2), 16);
+  const g = parseInt(cleanHex.substring(2, 4), 16);
+  const b = parseInt(cleanHex.substring(4, 6), 16);
+
+  return { r, g, b };
+}
+
+/**
+ * Convert RGB to hex color
+ * Legacy function for backward compatibility
+ */
+export function rgbToHex(rgb: RGB): string {
+  const { r, g, b } = rgb;
+  const toHex = (n: number) => {
+    const hex = Math.round(Math.max(0, Math.min(255, n))).toString(16);
+    return hex.length === 1 ? "0" + hex : hex;
+  };
+
+  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+}
+
+/**
+ * Convert hex to chroma-js HSL
+ * Returns [hue (0-360), saturation (0-1), lightness (0-1)]
+ */
+export function hexToHSL(hex: string): [number, number, number] {
+  try {
+    const cleanHex = hex.replace("#", "");
+    const color = chroma(`#${cleanHex}`);
+    return color.hsl();
+  } catch (error) {
+    console.error("Error converting hex to HSL:", error);
+    return [0, 0, 0.5]; // Safe default
+  }
+}
+
+/**
+ * Check if a color is grayscale (has no saturation)
+ */
+export function isGrayscale(hex: string): boolean {
+  try {
+    const cleanHex = hex.replace("#", "");
+    const color = chroma(`#${cleanHex}`);
+    const [, s] = color.hsl();
+    return isNaN(s) || s < 0.01; // NaN hue or very low saturation
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Calculate relative luminance using WCAG standard
+ * Returns a value between 0 (black) and 1 (white)
+ * Based on: https://www.w3.org/TR/WCAG20/#relativeluminancedef
+ */
+export function getRelativeLuminance(hex: string): number {
+  try {
+    const cleanHex = hex.replace("#", "");
+    const color = chroma(`#${cleanHex}`);
+    return color.luminance();
+  } catch (error) {
+    console.error("Error calculating luminance:", error);
+    return 0.5; // Safe default
+  }
+}
+
+/**
+ * Calculate perceptual brightness using weighted RGB formula
+ * Returns a value between 0 (dark) and 255 (bright)
+ * Uses ITU-R BT.709 coefficients for better perceptual accuracy
+ */
+export function getPerceptualBrightness(hex: string): number {
+  try {
+    const { r, g, b } = hexToRgb(hex);
+    // ITU-R BT.709 coefficients
+    return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+  } catch (error) {
+    console.error("Error calculating brightness:", error);
+    return 128; // Safe default (mid-gray)
+  }
+}
diff --git a/packages/utils/src/theme/color-validation.ts b/packages/utils/src/theme/color-validation.ts
new file mode 100644
index 000000000..d295a637d
--- /dev/null
+++ b/packages/utils/src/theme/color-validation.ts
@@ -0,0 +1,97 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+/**
+ * Color Validation Utilities
+ * Validates and adjusts color inputs for palette generation
+ */
+
+/**
+ * Validate hex color format
+ * Accepts formats: #RGB, #RRGGBB, RGB, RRGGBB
+ */
+export function validateHexColor(hex: string): boolean {
+  if (!hex) return false;
+
+  const cleanHex = hex.replace("#", "");
+  const hexRegex = /^[0-9A-Fa-f]{3}$|^[0-9A-Fa-f]{6}$/;
+
+  return hexRegex.test(cleanHex);
+}
+
+/**
+ * Normalize hex color to 6-digit format without #
+ * Converts #RGB to RRGGBB format
+ */
+export function normalizeHexColor(hex: string): string {
+  const cleanHex = hex.replace("#", "").toUpperCase();
+
+  // Expand 3-digit hex to 6-digit
+  if (cleanHex.length === 3) {
+    return cleanHex
+      .split("")
+      .map((char) => char + char)
+      .join("");
+  }
+
+  return cleanHex;
+}
+
+/**
+ * Validate and adjust OKLCH color for better visibility
+ * Ensures the color is not too extreme (too light or too dark)
+ */
+export function validateAndAdjustOKLCH(oklch: { l: number; c: number; h: number }): {
+  l: number;
+  c: number;
+  h: number;
+} {
+  let { l, c, h } = oklch;
+
+  // Adjust lightness if too extreme
+  if (l > 0.95) {
+    l = 0.9; // Too light - darken slightly
+  } else if (l < 0.1) {
+    l = 0.15; // Too dark - lighten slightly
+  }
+
+  // Ensure minimum chroma for color distinction (not pure gray)
+  if (c < 0.001) {
+    c = 0.002;
+  }
+
+  // Clamp chroma to reasonable range
+  c = Math.max(0.001, Math.min(0.37, c));
+
+  // Normalize hue to 0-360 range
+  h = ((h % 360) + 360) % 360;
+
+  return { l, c, h };
+}
+
+/**
+ * Adjust lightness for dark mode with improved algorithm
+ * Applies different scaling based on original lightness
+ */
+export function adjustLightnessForDarkMode(lightness: number, offset: number): number {
+  // Apply offset (negative to make darker)
+  let adjusted = lightness + offset;
+
+  // Enhanced clamping with better distribution
+  // Keep very light colors from becoming too dark
+  if (lightness > 0.9) {
+    // For very light colors, apply less offset
+    adjusted = lightness + offset * 0.6;
+  } else if (lightness < 0.25) {
+    // For already dark colors, apply more offset to ensure they stay very dark
+    adjusted = lightness + offset * 1.2;
+  }
+
+  // Clamp to valid range (0.1 to 0.95)
+  adjusted = Math.max(0.1, Math.min(0.95, adjusted));
+
+  return adjusted;
+}
diff --git a/packages/utils/src/theme/constants.ts b/packages/utils/src/theme/constants.ts
new file mode 100644
index 000000000..5ee4ef878
--- /dev/null
+++ b/packages/utils/src/theme/constants.ts
@@ -0,0 +1,150 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+/**
+ * Theme System Constants
+ * Defines shade stops, default configurations, and color modes
+ */
+
+/**
+ * Alpha mapping for 14-shade palette system
+ */
+export const ALPHA_MAPPING = {
+  100: 0.05,
+  200: 0.1,
+  300: 0.15,
+  400: 0.2,
+  500: 0.3,
+  600: 0.4,
+  700: 0.5,
+  800: 0.6,
+  900: 0.7,
+  1000: 0.8,
+  1100: 0.9,
+  1200: 0.95,
+};
+
+/**
+ * All shade stops for 14-shade palette system
+ * 50 = white, 1000 = black
+ * Extended range: 50-1000 for more granular control
+ */
+export const SHADE_STOPS = [50, 100, 200, 300, 400, 500, 600, 700, 750, 800, 850, 900, 950, 1000] as const;
+
+/**
+ * Default stop where user input color is anchored
+ * This is now dynamically calculated based on the input color's lightness
+ * This constant serves as a fallback only
+ */
+export const DEFAULT_VALUE_STOP = 500;
+
+/**
+ * Baseline lightness values for each stop (in OKLCH L scale 0-1)
+ * Used to determine which stop best matches an input color
+ * Based on perceptually uniform distribution
+ */
+export const BASELINE_LIGHTNESS_MAP: Record<number, number> = {
+  50: 0.98, // Near white
+  100: 0.95, // Lightest
+  200: 0.88, // Very light
+  300: 0.78, // Light
+  400: 0.68, // Light-medium
+  500: 0.58, // Medium (typical input)
+  600: 0.48, // Medium-dark
+  700: 0.38, // Dark
+  750: 0.28, // Very dark
+  800: 0.18, // Darkest
+  850: 0.12, // Near black
+  900: 0.08, // Almost black
+  950: 0.04, // Nearly black
+  1000: 0.02, // Black
+};
+
+/**
+ * Default hue shift for brand colors (in degrees)
+ * Adds visual interest by shifting hue at extremes
+ */
+export const DEFAULT_HUE_SHIFT_BRAND = 10;
+
+/**
+ * Default hue shift for neutral colors (in degrees)
+ * No shift to keep neutrals truly neutral
+ */
+export const DEFAULT_HUE_SHIFT_NEUTRAL = 0;
+
+/**
+ * Default minimum lightness for light mode (0-100 scale)
+ */
+export const DEFAULT_LIGHT_MODE_LIGHTNESS_MIN = 0;
+
+/**
+ * Default maximum lightness for light mode (0-100 scale)
+ */
+export const DEFAULT_LIGHT_MODE_LIGHTNESS_MAX = 100;
+
+/**
+ * Default minimum lightness for dark mode (0-100 scale)
+ */
+export const DEFAULT_DARK_MODE_LIGHTNESS_MIN = 10;
+
+/**
+ * Default maximum lightness for dark mode (0-100 scale)
+ */
+export const DEFAULT_DARK_MODE_LIGHTNESS_MAX = 80;
+
+/**
+ * Color generation modes
+ * - perceived: HSLuv-based perceptually uniform lightness (recommended)
+ * - linear: Direct HSL manipulation
+ */
+export type ColorMode = "perceived" | "linear";
+
+/**
+ * Default color generation mode
+ */
+export const DEFAULT_COLOR_MODE: ColorMode = "perceived";
+
+/**
+ * Saturation curve types
+ * - ease-in-out: Increase saturation at extremes (recommended for brand colors)
+ * - linear: Maintain constant saturation (recommended for neutrals)
+ */
+export type SaturationCurve = "ease-in-out" | "linear";
+
+/**
+ * Default saturation curve
+ */
+export const DEFAULT_SATURATION_CURVE: SaturationCurve = "ease-in-out";
+
+/**
+ * Editor color backgrounds for light mode
+ * Used for stickies and editor elements
+ */
+export const EDITOR_COLORS_LIGHT = {
+  gray: "#d6d6d8",
+  peach: "#ffd5d7",
+  pink: "#fdd4e3",
+  orange: "#ffe3cd",
+  green: "#c3f0de",
+  "light-blue": "#c5eff9",
+  "dark-blue": "#c9dafb",
+  purple: "#e3d8fd",
+} as const;
+
+/**
+ * Editor color backgrounds for dark mode
+ * Used for stickies and editor elements
+ */
+export const EDITOR_COLORS_DARK = {
+  gray: "#404144",
+  peach: "#593032",
+  pink: "#562e3d",
+  orange: "#583e2a",
+  green: "#1d4a3b",
+  "light-blue": "#1f495c",
+  "dark-blue": "#223558",
+  purple: "#3d325a",
+};
diff --git a/packages/utils/src/theme/index.ts b/packages/utils/src/theme/index.ts
new file mode 100644
index 000000000..bdb24fabd
--- /dev/null
+++ b/packages/utils/src/theme/index.ts
@@ -0,0 +1,67 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+/**
+ * Theme System Public API
+ * Exports all theme-related utilities for use across Plane apps
+ */
+
+// Palette generation
+export {
+  calculateDynamicValueStop,
+  generateColorPalette,
+  generateThemePalettes,
+  type ColorPalette,
+  type PaletteOptions,
+} from "./palette-generator";
+
+// Theme application
+export {
+  applyCustomTheme,
+  clearCustomTheme,
+  isColorDark,
+  getOnColorTextColors,
+  type DarknessDetectionMethod,
+} from "./theme-application";
+
+// Color conversion utilities
+export {
+  hexToHSL,
+  hexToOKLCH,
+  hexToOKLCHString,
+  // hexToRgb,
+  isGrayscale,
+  oklchToCSS,
+  parseOKLCH,
+  getRelativeLuminance,
+  getPerceptualBrightness,
+  // rgbToHex,
+  type OKLCH,
+  type RGB,
+} from "./color-conversion";
+
+// Color validation
+export { normalizeHexColor, validateHexColor } from "./color-validation";
+
+// Theme inversion (dark mode)
+export { getBrandMapping, getNeutralMapping, invertPalette } from "./theme-inversion";
+
+// Constants
+export {
+  BASELINE_LIGHTNESS_MAP,
+  type ColorMode,
+  DEFAULT_COLOR_MODE,
+  DEFAULT_HUE_SHIFT_BRAND,
+  DEFAULT_HUE_SHIFT_NEUTRAL,
+  DEFAULT_LIGHT_MODE_LIGHTNESS_MAX,
+  DEFAULT_LIGHT_MODE_LIGHTNESS_MIN,
+  DEFAULT_DARK_MODE_LIGHTNESS_MAX,
+  DEFAULT_DARK_MODE_LIGHTNESS_MIN,
+  DEFAULT_SATURATION_CURVE,
+  DEFAULT_VALUE_STOP,
+  type SaturationCurve,
+  SHADE_STOPS,
+} from "./constants";
diff --git a/packages/utils/src/theme/palette-generator.ts b/packages/utils/src/theme/palette-generator.ts
new file mode 100644
index 000000000..ed2417e7a
--- /dev/null
+++ b/packages/utils/src/theme/palette-generator.ts
@@ -0,0 +1,220 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+/**
+ * Palette Generator
+ * Generates 14-shade color palettes directly in OKLCH color space
+ * Keeps C (chroma) and H (hue) constant, only varies L (lightness)
+ * Inspired by tints.dev but optimized for OKLCH
+ */
+
+import type { OKLCH } from "./color-conversion";
+import { hexToOKLCH, oklchToCSS } from "./color-conversion";
+import { normalizeHexColor, validateHexColor } from "./color-validation";
+import {
+  BASELINE_LIGHTNESS_MAP,
+  DEFAULT_LIGHT_MODE_LIGHTNESS_MIN,
+  DEFAULT_LIGHT_MODE_LIGHTNESS_MAX,
+  DEFAULT_DARK_MODE_LIGHTNESS_MIN,
+  DEFAULT_DARK_MODE_LIGHTNESS_MAX,
+  DEFAULT_VALUE_STOP,
+  SHADE_STOPS,
+} from "./constants";
+
+/**
+ * Type representing valid shade stop values
+ */
+export type ShadeStop = (typeof SHADE_STOPS)[number];
+
+/**
+ * 14-shade color palette
+ * Keys: 50, 100, 200, 300, 400, 500, 600, 700, 750, 800, 850, 900, 950, 1000
+ * Values: OKLCH CSS strings (e.g., "oklch(0.5840 0.1200 250.00)")
+ */
+export interface ColorPalette {
+  50: string;
+  100: string;
+  200: string;
+  300: string;
+  400: string;
+  500: string;
+  600: string;
+  700: string;
+  750: string;
+  800: string;
+  850: string;
+  900: string;
+  950: string;
+  1000: string;
+}
+
+/**
+ * Palette generation options
+ */
+export interface PaletteOptions {
+  /** Minimum lightness (0-1) for darkest shade */
+  lightnessMin?: number;
+  /** Maximum lightness (0-1) for lightest shade */
+  lightnessMax?: number;
+  /** Stop where the input color is anchored (default: auto-calculated) */
+  valueStop?: number | "auto";
+}
+
+/**
+ * Calculate the appropriate stop value based on a color's OKLCH lightness
+ * Inspired by tints.dev's calculateStopFromColor but simplified for OKLCH
+ *
+ * @param oklch - OKLCH color object
+ * @returns The nearest available stop value (50, 100, 200, etc.)
+ */
+export function calculateDynamicValueStop(oklch: OKLCH): number {
+  const { l: lightness } = oklch;
+
+  // Find the stop whose baseline lightness is closest to the input color's lightness
+  let closestStop = DEFAULT_VALUE_STOP;
+  let smallestDiff = Infinity;
+
+  for (const stop of SHADE_STOPS) {
+    const baselineLightness = BASELINE_LIGHTNESS_MAP[stop];
+    const diff = Math.abs(baselineLightness - lightness);
+
+    if (diff < smallestDiff) {
+      smallestDiff = diff;
+      closestStop = stop;
+    }
+  }
+
+  return closestStop;
+}
+
+/**
+ * Type guard to check if a number is a valid shade stop
+ * @param value - Number to check
+ * @returns True if value is a valid shade stop
+ */
+function isValidShadeStop(value: number): value is ShadeStop {
+  return (SHADE_STOPS as readonly number[]).includes(value);
+}
+
+/**
+ * Generate a 14-shade color palette from a base hex color
+ * Works directly in OKLCH space, keeping C and H constant, only varying L
+ *
+ * @param baseColor - Hex color (with or without #)
+ * @param mode - "light" or "dark"
+ * @param options - Palette generation options
+ * @returns ColorPalette with 14 OKLCH CSS strings
+ */
+export function generateColorPalette(
+  baseColor: string,
+  mode: "light" | "dark",
+  options: PaletteOptions = {}
+): ColorPalette {
+  // Validate and normalize input
+  if (!validateHexColor(baseColor)) {
+    throw new Error(`Invalid hex color: ${baseColor}`);
+  }
+
+  const normalizedHex = normalizeHexColor(baseColor);
+
+  // Convert to OKLCH
+  const inputOKLCH = hexToOKLCH(normalizedHex);
+  const { l: inputL, c: inputC, h: inputH } = inputOKLCH;
+
+  const DEFAULT_LIGHTNESS_MIN = mode === "light" ? DEFAULT_LIGHT_MODE_LIGHTNESS_MIN : DEFAULT_DARK_MODE_LIGHTNESS_MIN;
+  const DEFAULT_LIGHTNESS_MAX = mode === "light" ? DEFAULT_LIGHT_MODE_LIGHTNESS_MAX : DEFAULT_DARK_MODE_LIGHTNESS_MAX;
+
+  // Extract options with defaults
+  const {
+    lightnessMin = DEFAULT_LIGHTNESS_MIN / 100, // Convert to 0-1 scale
+    lightnessMax = DEFAULT_LIGHTNESS_MAX / 100, // Convert to 0-1 scale
+    valueStop = options.valueStop ?? DEFAULT_VALUE_STOP,
+  } = options;
+
+  // Calculate or use provided valueStop
+  const anchorStop = valueStop === "auto" ? calculateDynamicValueStop(inputOKLCH) : valueStop;
+
+  // Validate valueStop if provided manually
+  if (typeof anchorStop === "number" && !isValidShadeStop(anchorStop)) {
+    throw new Error(`Invalid valueStop: ${anchorStop}. Must be one of ${SHADE_STOPS.join(", ")}`);
+  }
+
+  // Create lightness distribution with three anchor points
+  const distributionAnchors = [
+    { stop: SHADE_STOPS[0], lightness: lightnessMax }, // Lightest
+    { stop: anchorStop, lightness: inputL }, // Input color
+    { stop: SHADE_STOPS[SHADE_STOPS.length - 1], lightness: lightnessMin }, // Darkest
+  ];
+
+  // Generate palette by interpolating lightness for each stop
+  const palette: Partial<ColorPalette> = {};
+
+  SHADE_STOPS.forEach((stop) => {
+    let targetLightness: number;
+
+    // Check if this is an anchor point
+    const anchor = distributionAnchors.find((a) => a.stop === stop);
+    if (anchor) {
+      targetLightness = anchor.lightness;
+    } else {
+      // Interpolate between anchor points
+      let leftAnchor, rightAnchor;
+
+      if (stop < anchorStop) {
+        leftAnchor = distributionAnchors[0]; // stop 50
+        rightAnchor = distributionAnchors[1]; // anchorStop
+      } else {
+        leftAnchor = distributionAnchors[1]; // anchorStop
+        rightAnchor = distributionAnchors[2]; // stop 1000
+      }
+
+      // Linear interpolation
+      const range = rightAnchor.stop - leftAnchor.stop;
+      const position = stop - leftAnchor.stop;
+      const ratio = position / range;
+      targetLightness = leftAnchor.lightness + (rightAnchor.lightness - leftAnchor.lightness) * ratio;
+    }
+
+    // Create OKLCH color with constant C and H, only varying L
+    const shadeOKLCH: OKLCH = {
+      l: Math.max(0, Math.min(1, targetLightness)), // Clamp to 0-1
+      c: inputC, // Keep chroma constant
+      h: inputH, // Keep hue constant
+    };
+
+    // Convert to CSS string
+    const key = stop as keyof ColorPalette;
+    palette[key] = oklchToCSS(shadeOKLCH);
+  });
+
+  return palette as ColorPalette;
+}
+
+/**
+ * Generate both brand and neutral palettes for a custom theme
+ * Optimized for Plane's 2-color theme system
+ * Uses auto-calculated value stops for better color matching
+ *
+ * @param brandColor - Brand accent color (hex)
+ * @param neutralColor - Neutral/background color (hex)
+ * @returns Object with brandPalette and neutralPalette
+ */
+export function generateThemePalettes(
+  brandColor: string,
+  neutralColor: string,
+  mode: "light" | "dark"
+): {
+  brandPalette: ColorPalette;
+  neutralPalette: ColorPalette;
+} {
+  // Brand palette - auto-calculate value stop based on color lightness
+  const brandPalette = generateColorPalette(brandColor, mode);
+
+  // Neutral palette - auto-calculate value stop based on color lightness
+  const neutralPalette = generateColorPalette(neutralColor, mode);
+
+  return { brandPalette, neutralPalette };
+}
diff --git a/packages/utils/src/theme/theme-application.ts b/packages/utils/src/theme/theme-application.ts
new file mode 100644
index 000000000..25f1a6013
--- /dev/null
+++ b/packages/utils/src/theme/theme-application.ts
@@ -0,0 +1,193 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+/**
+ * Theme Application Utilities
+ * Applies generated palettes to CSS variables for Plane's theme system
+ */
+
+import { hexToOKLCH, oklchToCSS, getRelativeLuminance, getPerceptualBrightness } from "./color-conversion";
+import type { OKLCH } from "./color-conversion";
+import { ALPHA_MAPPING, EDITOR_COLORS_LIGHT, EDITOR_COLORS_DARK } from "./constants";
+import { generateThemePalettes } from "./palette-generator";
+import { getBrandMapping, getNeutralMapping, invertPalette } from "./theme-inversion";
+
+/**
+ * Color darkness detection methods
+ */
+export type DarknessDetectionMethod = "wcag" | "oklch" | "perceptual";
+
+/**
+ * Determine if a color is dark using various methods
+ *
+ * Methods:
+ * - 'wcag': Uses WCAG relative luminance (0-1 scale, threshold 0.5) - Most accurate for accessibility
+ * - 'oklch': Uses OKLCH lightness (0-1 scale, threshold 0.5) - Good for perceptual uniformity
+ * - 'perceptual': Uses weighted RGB brightness (0-255 scale, threshold 128) - Simple and fast
+ *
+ * @param brandColor - Brand color in hex format
+ * @param method - Detection method to use (default: 'wcag')
+ * @returns true if the color is dark, false if light
+ */
+export function isColorDark(brandColor: string, method: DarknessDetectionMethod = "wcag"): boolean {
+  switch (method) {
+    case "wcag": {
+      // WCAG relative luminance: 0 (black) to 1 (white)
+      // Threshold of 0.5 means colors darker than 50% gray are considered dark
+      const luminance = getRelativeLuminance(brandColor);
+      return luminance < 0.5;
+    }
+    case "oklch": {
+      // OKLCH lightness: 0 (black) to 1 (white)
+      // Threshold of 0.5 provides good balance for most colors
+      const oklch = hexToOKLCH(brandColor);
+      return oklch.l < 0.5;
+    }
+    case "perceptual": {
+      // Perceptual brightness: 0 (black) to 255 (white)
+      // Threshold of 128 is the midpoint
+      const brightness = getPerceptualBrightness(brandColor);
+      return brightness < 128;
+    }
+    default:
+      return getRelativeLuminance(brandColor) < 0.5;
+  }
+}
+
+/**
+ * Get contrasting text colors for use on a colored background
+ * Returns white text for dark backgrounds, black text for light backgrounds
+ *
+ * @param brandColor - Brand color in hex format
+ * @param method - Detection method to use (default: 'wcag')
+ * @returns Object with text and icon colors in OKLCH format
+ */
+export function getOnColorTextColors(
+  brandColor: string,
+  method: DarknessDetectionMethod = "wcag"
+): {
+  textColor: OKLCH;
+  iconColor: OKLCH;
+} {
+  const isDark = isColorDark(brandColor, method);
+  const white: OKLCH = { l: 1, c: 0, h: 0 };
+  const black: OKLCH = { l: 0, c: 0, h: 0 };
+
+  return {
+    textColor: isDark ? white : black,
+    iconColor: isDark ? black : white,
+  };
+}
+
+/**
+ * Apply custom theme using 2-color palette system
+ * Generates full palettes from brand and neutral colors
+ * and maps them to CSS variables
+ *
+ * @param brandColor - Brand accent color (hex with or without #)
+ * @param neutralColor - Neutral/background color (hex with or without #)
+ * @param mode - 'light' or 'dark' theme mode
+ */
+export function applyCustomTheme(brandColor: string, neutralColor: string, mode: "light" | "dark"): void {
+  if (!brandColor || !neutralColor) {
+    console.warn("applyCustomTheme: brandColor and neutralColor are required");
+    return;
+  }
+
+  const themeElement = document?.querySelector("html");
+  if (!themeElement) {
+    console.warn("applyCustomTheme: html element not found");
+    return;
+  }
+
+  // Generate palettes directly in OKLCH color space
+  const { brandPalette, neutralPalette } = generateThemePalettes(brandColor, neutralColor, mode);
+  const neutralOKLCH = hexToOKLCH(neutralColor);
+
+  // For dark mode, invert the palettes
+  const activeBrandPalette = mode === "dark" ? invertPalette(brandPalette) : brandPalette;
+  const activeNeutralPalette = mode === "dark" ? invertPalette(neutralPalette) : neutralPalette;
+
+  // Get CSS variable mappings
+  const neutralMapping = getNeutralMapping(activeNeutralPalette);
+  const brandMapping = getBrandMapping(activeBrandPalette);
+
+  // Apply base palette colors
+  // This updates the source palette variables that semantic colors reference
+  Object.entries(neutralMapping).forEach(([key, value]) => {
+    themeElement.style.setProperty(`--neutral-${key}`, value);
+  });
+
+  Object.entries(brandMapping).forEach(([key, value]) => {
+    themeElement.style.setProperty(`--brand-${key}`, value);
+  });
+
+  Object.entries(ALPHA_MAPPING).forEach(([key, value]) => {
+    themeElement.style.setProperty(`--alpha-white-${key}`, oklchToCSS(neutralOKLCH, value * 100));
+    themeElement.style.setProperty(`--alpha-black-${key}`, oklchToCSS(neutralOKLCH, value * 100));
+  });
+
+  // Apply contrasting text colors for use on colored backgrounds
+  // Uses WCAG relative luminance for accurate contrast determination
+  const { textColor, iconColor } = getOnColorTextColors(brandColor, "wcag");
+  themeElement.style.setProperty(`--txt-on-color`, oklchToCSS(textColor));
+  themeElement.style.setProperty(`--txt-icon-on-color`, oklchToCSS(iconColor));
+
+  // Apply editor color backgrounds based on mode
+  const editorColors = mode === "dark" ? EDITOR_COLORS_DARK : EDITOR_COLORS_LIGHT;
+  Object.entries(editorColors).forEach(([color, value]) => {
+    themeElement.style.setProperty(`--editor-colors-${color}-background`, value);
+  });
+}
+
+/**
+ * Clear custom theme CSS variables
+ * Removes base palette color overrides
+ */
+export function clearCustomTheme(): void {
+  const themeElement = document?.querySelector("html");
+  if (!themeElement) return;
+
+  // Clear neutral base palette colors
+  const neutralKeys = [
+    "white",
+    "100",
+    "200",
+    "300",
+    "400",
+    "500",
+    "600",
+    "700",
+    "800",
+    "900",
+    "1000",
+    "1100",
+    "1200",
+    "black",
+  ];
+  neutralKeys.forEach((key) => {
+    themeElement.style.removeProperty(`--neutral-${key}`);
+  });
+
+  // Clear brand base palette colors
+  const brandKeys = ["100", "200", "300", "400", "500", "600", "700", "800", "900", "1000", "1100", "1200", "default"];
+  brandKeys.forEach((key) => {
+    themeElement.style.removeProperty(`--brand-${key}`);
+  });
+
+  Object.keys(ALPHA_MAPPING).forEach((key) => {
+    themeElement.style.removeProperty(`--alpha-white-${key}`);
+    themeElement.style.removeProperty(`--alpha-black-${key}`);
+  });
+
+  themeElement.style.removeProperty(`--txt-on-color`);
+  themeElement.style.removeProperty(`--txt-icon-on-color`);
+
+  // Clear editor color background overrides
+  Object.keys(EDITOR_COLORS_LIGHT).forEach((color) => {
+    themeElement.style.removeProperty(`--editor-colors-${color}-background`);
+  });
+}
diff --git a/packages/utils/src/theme/theme-inversion.ts b/packages/utils/src/theme/theme-inversion.ts
new file mode 100644
index 000000000..1eb0f6fc7
--- /dev/null
+++ b/packages/utils/src/theme/theme-inversion.ts
@@ -0,0 +1,99 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+/**
+ * Theme Inversion Utilities
+ * Handles dark mode palette inversion and mapping
+ */
+
+import { DEFAULT_VALUE_STOP } from "./constants";
+import type { ColorPalette } from "./palette-generator";
+
+/**
+ * Invert a color palette for dark mode
+ * Maps each shade to its opposite (50↔1250, 100↔1200, 200↔1100, etc.)
+ * Shades around the middle are preserved for smooth transitions
+ *
+ * @param palette - 14-shade color palette to invert
+ * @returns Inverted palette with swapped shades
+ */
+export function invertPalette(palette: ColorPalette): ColorPalette {
+  return {
+    50: palette[1000],
+    100: palette[950],
+    200: palette[900],
+    300: palette[850],
+    400: palette[800],
+    500: palette[750],
+    600: palette[700],
+    700: palette[600],
+    750: palette[500],
+    800: palette[400],
+    850: palette[300],
+    900: palette[200],
+    950: palette[100],
+    1000: palette[50],
+  };
+}
+
+/**
+ * Get CSS variable mapping for a theme mode
+ * Maps 14-shade palette to Plane's CSS variable system
+ *
+ * For light mode:
+ * - Uses lighter shades for backgrounds (50-100-200)
+ * - Uses darker shades for text (900, 950, 1000)
+ *
+ * For dark mode:
+ * - Uses inverted palette
+ * - Shifts mapping to lighter shades to avoid cave-like darkness
+ *
+ * @param palette - 14-shade palette (already inverted for dark mode)
+ * @returns Mapping object for neutral color CSS variables
+ */
+export function getNeutralMapping(palette: ColorPalette): Record<string, string> {
+  return {
+    white: palette["50"],
+    "100": palette["100"],
+    "200": palette["200"],
+    "300": palette["300"],
+    "400": palette["400"],
+    "500": palette["500"],
+    "600": palette["600"],
+    "700": palette["700"],
+    "800": palette["750"],
+    "900": palette["800"],
+    "1000": palette["850"],
+    "1100": palette["900"],
+    "1200": palette["950"],
+    black: palette["1000"],
+  };
+}
+
+/**
+ * Get CSS variable mapping for brand colors
+ * Brand colors use active palette (already inverted for dark mode)
+ *
+ * @param palette - 14-shade brand palette
+ * @returns Mapping object for brand color CSS variables
+ */
+export function getBrandMapping(palette: ColorPalette): Record<string, string> {
+  return {
+    "100": palette["100"],
+    "200": palette["200"],
+    "300": palette["300"],
+    "400": palette["400"],
+    "500": palette["500"],
+    "600": palette["600"],
+    "700": palette["700"],
+    "800": palette["750"],
+    "900": palette["800"],
+    "1000": palette["850"],
+    "1100": palette["900"],
+    "1200": palette["950"],
+    default: palette[DEFAULT_VALUE_STOP], // Default brand color (middle-ish)
+  };
+}
diff --git a/packages/utils/src/tlds.ts b/packages/utils/src/tlds.ts
index e689a11a8..6890a429c 100644
--- a/packages/utils/src/tlds.ts
+++ b/packages/utils/src/tlds.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export default [
   "aaa",
   "aarp",
diff --git a/packages/utils/src/url.ts b/packages/utils/src/url.ts
index fa16d3f17..522a62629 100644
--- a/packages/utils/src/url.ts
+++ b/packages/utils/src/url.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import tlds from "./tlds";
 
 const PROTOCOL_REGEX = /^[a-zA-Z]+:\/\//;
@@ -255,7 +261,7 @@ export function extractURLComponents(url: URL | string): IURLComponents | undefi
     }
 
     return undefined;
-  } catch (error) {
+  } catch (_error) {
     return undefined;
   }
 }
@@ -317,7 +323,7 @@ export function isValidNextPath(url: string): boolean {
     ];
 
     return !maliciousPatterns.some((pattern) => pattern.test(pathname));
-  } catch (error) {
+  } catch (_error) {
     // If URL constructor fails, it's an invalid path
     return false;
   }
diff --git a/packages/utils/src/validation.ts b/packages/utils/src/validation.ts
new file mode 100644
index 000000000..41c52aaa1
--- /dev/null
+++ b/packages/utils/src/validation.ts
@@ -0,0 +1,216 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+/**
+ * Input Validation Utilities
+ * Following OWASP Input Validation best practices using allowlist approach
+ *
+ * Security: Blocks injection-risk characters: < > ' " % # { } [ ] * ^ !
+ * These patterns are designed to prevent XSS, SQL injection, template injection,
+ * and other security vulnerabilities while maintaining good UX
+ */
+
+// =============================================================================
+// VALIDATION REGEX PATTERNS
+// =============================================================================
+
+/**
+ * Person Name Pattern (for first_name, last_name)
+ * Allows: Unicode letters (\p{L}), spaces, hyphens, apostrophes
+ * Use case: Accommodates international names like "José", "李明", "محمد", "Müller"
+ * Blocks: Injection-risk characters and special symbols
+ */
+export const PERSON_NAME_REGEX = /^[\p{L}\s'-]+$/u;
+
+/**
+ * Display Name Pattern (for display_name, usernames)
+ * Allows: Unicode letters (\p{L}), numbers (\p{N}), underscore, period, hyphen
+ * Use case: International usernames like "josé_123", "李明.dev", "müller-2024"
+ * Blocks: Spaces and injection-risk characters
+ */
+export const DISPLAY_NAME_REGEX = /^[\p{L}\p{N}_.-]+$/u;
+
+/**
+ * Company/Organization Name Pattern (for company_name, workspace names)
+ * Allows: Unicode letters (\p{L}), numbers (\p{N}), spaces, underscores, hyphens
+ * Use case: International business names like "Société Générale", "株式会社", "Müller GmbH"
+ * Blocks: Special punctuation and injection-risk chars
+ */
+export const COMPANY_NAME_REGEX = /^[\p{L}\p{N}\s_-]+$/u;
+
+/**
+ * URL Slug Pattern (for workspace slugs, URL-safe identifiers)
+ * Allows: Unicode letters (\p{L}), numbers (\p{N}), underscores, hyphens
+ * Use case: International URL-safe identifiers like "josé-workspace", "李明-project"
+ * Blocks: Spaces and special characters (URL encoding will handle Unicode in actual URLs)
+ */
+export const SLUG_REGEX = /^[\p{L}\p{N}_-]+$/u;
+
+// =============================================================================
+// VALIDATION FUNCTIONS
+// =============================================================================
+
+/**
+ * @description Validates person names (first name, last name)
+ * @param {string} name - Name to validate
+ * @returns {boolean | string} true if valid, error message if invalid
+ * @example
+ * validatePersonName("John") // returns true
+ * validatePersonName("O'Brien") // returns true
+ * validatePersonName("Jean-Paul") // returns true
+ * validatePersonName("John<script>") // returns error message
+ */
+export const validatePersonName = (name: string): boolean | string => {
+  if (!name || name.trim() === "") {
+    return "Name is required";
+  }
+
+  if (name.length > 50) {
+    return "Name must be 50 characters or less";
+  }
+
+  if (hasInjectionRiskChars(name)) {
+    return "Names cannot contain special characters like < > ' \" { } [ ] * ^ ! # %";
+  }
+
+  if (!PERSON_NAME_REGEX.test(name)) {
+    return "Names can only contain letters, spaces, hyphens, and apostrophes";
+  }
+
+  return true;
+};
+
+/**
+ * @description Validates display names and usernames
+ * @param {string} displayName - Display name to validate
+ * @returns {boolean | string} true if valid, error message if invalid
+ * @example
+ * validateDisplayName("john_doe") // returns true
+ * validateDisplayName("john.doe-123") // returns true
+ * validateDisplayName("john doe") // returns error message (spaces not allowed)
+ * validateDisplayName("john<>doe") // returns error message
+ */
+export const validateDisplayName = (displayName: string): boolean | string => {
+  if (!displayName || displayName.trim() === "") {
+    return true; // Display name is optional in most cases
+  }
+
+  if (displayName.length > 50) {
+    return "Display name must be 50 characters or less";
+  }
+
+  if (hasInjectionRiskChars(displayName)) {
+    return "Display name cannot contain special characters like < > ' \" { } [ ] * ^ ! # %";
+  }
+
+  if (!DISPLAY_NAME_REGEX.test(displayName)) {
+    return "Display name can only contain letters, numbers, periods, hyphens, and underscores";
+  }
+
+  return true;
+};
+
+/**
+ * @description Validates company and organization names
+ * @param {string} companyName - Company name to validate
+ * @param {boolean} required - Whether the field is required
+ * @returns {boolean | string} true if valid, error message if invalid
+ * @example
+ * validateCompanyName("Acme Corp") // returns true
+ * validateCompanyName("Acme_Corp-123") // returns true
+ * validateCompanyName("Acme{Corp}") // returns error message
+ */
+export const validateCompanyName = (companyName: string, required: boolean = false): boolean | string => {
+  if (!companyName || companyName.trim() === "") {
+    return required ? "Company name is required" : true;
+  }
+
+  if (companyName.length > 80) {
+    return "Company name must be 80 characters or less";
+  }
+
+  if (hasInjectionRiskChars(companyName)) {
+    return "Company name cannot contain special characters like < > ' \" { } [ ] * ^ ! # %";
+  }
+
+  if (!COMPANY_NAME_REGEX.test(companyName)) {
+    return "Company name can only contain letters, numbers, spaces, hyphens, and underscores";
+  }
+
+  return true;
+};
+
+/**
+ * @description Validates company and organization names
+ * @param {string} workspaceName - Workspace name to validate
+ * @param {boolean} required - Whether the field is required
+ * @returns {boolean | string} true if valid, error message if invalid
+ * @example
+ * validateWorkspaceName("Acme Corp") // returns true
+ * validateWorkspaceName("Acme_Corp-123") // returns true
+ * validateWorkspaceName("Acme{Corp}") // returns error message
+ */
+export const validateWorkspaceName = (workspaceName: string, required: boolean = false): boolean | string => {
+  if (!workspaceName || workspaceName.trim() === "") {
+    return required ? "Workspace name is required" : true;
+  }
+
+  if (workspaceName.length > 80) {
+    return "Workspace name must be 80 characters or less";
+  }
+
+  if (hasInjectionRiskChars(workspaceName)) {
+    return "Workspace name cannot contain special characters like < > ' \" { } [ ] * ^ ! # %";
+  }
+
+  if (!COMPANY_NAME_REGEX.test(workspaceName)) {
+    return "Workspace name can only contain letters, numbers, spaces, hyphens, and underscores";
+  }
+
+  return true;
+};
+
+/**
+ * @description Validates URL slugs and identifiers
+ * @param {string} slug - Slug to validate
+ * @returns {boolean | string} true if valid, error message if invalid
+ * @example
+ * validateSlug("my-workspace") // returns true
+ * validateSlug("my_workspace_123") // returns true
+ * validateSlug("my workspace") // returns error message (spaces not allowed)
+ */
+export const validateSlug = (slug: string): boolean | string => {
+  if (!slug || slug.trim() === "") {
+    return "Slug is required";
+  }
+
+  if (slug.length > 48) {
+    return "Slug must be 48 characters or less";
+  }
+
+  if (hasInjectionRiskChars(slug)) {
+    return "Slug cannot contain special characters like < > ' \" { } [ ] * ^ ! # %";
+  }
+
+  if (!SLUG_REGEX.test(slug)) {
+    return "Slug can only contain letters, numbers, hyphens, and underscores";
+  }
+
+  return true;
+};
+
+/**
+ * @description Checks if a string contains any injection-risk characters
+ * @param {string} input - String to check
+ * @returns {boolean} true if injection-risk characters found
+ * @example
+ * hasInjectionRiskChars("Hello World") // returns false
+ * hasInjectionRiskChars("Hello<script>") // returns true
+ */
+export const hasInjectionRiskChars = (input: string): boolean => {
+  const injectionRiskPattern = /[<>'"{}[\]*^!#%]/;
+  return injectionRiskPattern.test(input);
+};
diff --git a/packages/utils/src/work-item-filters/configs/filters/cycle.ts b/packages/utils/src/work-item-filters/configs/filters/cycle.ts
index 9e67fc39b..f90ca53cb 100644
--- a/packages/utils/src/work-item-filters/configs/filters/cycle.ts
+++ b/packages/utils/src/work-item-filters/configs/filters/cycle.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // plane imports
 import type { ICycle, TCycleGroups, TFilterProperty, TSupportedOperators } from "@plane/types";
 import { EQUALITY_OPERATOR, COLLECTION_OPERATOR } from "@plane/types";
@@ -45,7 +51,7 @@ export const getCycleMultiSelectConfig = (params: TCreateCycleFilterParams, sing
 export const getCycleFilterConfig =
   <P extends TFilterProperty>(key: P): TCreateFilterConfig<P, TCreateCycleFilterParams> =>
   (params: TCreateCycleFilterParams) =>
-    createFilterConfig<P, string>({
+    createFilterConfig<P>({
       id: key,
       label: "Cycle",
       ...params,
diff --git a/packages/utils/src/work-item-filters/configs/filters/date.ts b/packages/utils/src/work-item-filters/configs/filters/date.ts
index 913712227..c1f5df6a8 100644
--- a/packages/utils/src/work-item-filters/configs/filters/date.ts
+++ b/packages/utils/src/work-item-filters/configs/filters/date.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // plane imports
 import type { TFilterProperty } from "@plane/types";
 // local imports
@@ -15,7 +21,7 @@ import { createFilterConfig, getSupportedDateOperators } from "../../../rich-fil
 export const getStartDateFilterConfig =
   <P extends TFilterProperty>(key: P): TCreateFilterConfig<P, TCreateDateFilterParams> =>
   (params: TCreateDateFilterParams) =>
-    createFilterConfig<P, Date>({
+    createFilterConfig<P>({
       id: key,
       label: "Start date",
       ...params,
@@ -33,7 +39,7 @@ export const getStartDateFilterConfig =
 export const getTargetDateFilterConfig =
   <P extends TFilterProperty>(key: P): TCreateFilterConfig<P, TCreateDateFilterParams> =>
   (params: TCreateDateFilterParams) =>
-    createFilterConfig<P, Date>({
+    createFilterConfig<P>({
       id: key,
       label: "Target date",
       ...params,
@@ -51,7 +57,7 @@ export const getTargetDateFilterConfig =
 export const getCreatedAtFilterConfig =
   <P extends TFilterProperty>(key: P): TCreateFilterConfig<P, TCreateDateFilterParams> =>
   (params: TCreateDateFilterParams) =>
-    createFilterConfig<P, Date>({
+    createFilterConfig<P>({
       id: key,
       label: "Created at",
       ...params,
@@ -69,7 +75,7 @@ export const getCreatedAtFilterConfig =
 export const getUpdatedAtFilterConfig =
   <P extends TFilterProperty>(key: P): TCreateFilterConfig<P, TCreateDateFilterParams> =>
   (params: TCreateDateFilterParams) =>
-    createFilterConfig<P, Date>({
+    createFilterConfig<P>({
       id: key,
       label: "Updated at",
       ...params,
diff --git a/packages/utils/src/work-item-filters/configs/filters/index.ts b/packages/utils/src/work-item-filters/configs/filters/index.ts
index 7498018b1..a436da8e3 100644
--- a/packages/utils/src/work-item-filters/configs/filters/index.ts
+++ b/packages/utils/src/work-item-filters/configs/filters/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./cycle";
 export * from "./date";
 export * from "./label";
diff --git a/packages/utils/src/work-item-filters/configs/filters/label.ts b/packages/utils/src/work-item-filters/configs/filters/label.ts
index bcc79be98..c6390889f 100644
--- a/packages/utils/src/work-item-filters/configs/filters/label.ts
+++ b/packages/utils/src/work-item-filters/configs/filters/label.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // plane imports
 import type { IIssueLabel, TFilterProperty, TSupportedOperators } from "@plane/types";
 import { EQUALITY_OPERATOR, COLLECTION_OPERATOR } from "@plane/types";
@@ -45,7 +51,7 @@ export const getLabelMultiSelectConfig = (params: TCreateLabelFilterParams, sing
 export const getLabelFilterConfig =
   <P extends TFilterProperty>(key: P): TCreateFilterConfig<P, TCreateLabelFilterParams> =>
   (params: TCreateLabelFilterParams) =>
-    createFilterConfig<P, string>({
+    createFilterConfig<P>({
       id: key,
       label: "Label",
       ...params,
diff --git a/packages/utils/src/work-item-filters/configs/filters/module.ts b/packages/utils/src/work-item-filters/configs/filters/module.ts
index d0dd279a9..47a5cc6a5 100644
--- a/packages/utils/src/work-item-filters/configs/filters/module.ts
+++ b/packages/utils/src/work-item-filters/configs/filters/module.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // plane imports
 import type { IModule, TFilterProperty } from "@plane/types";
 import { EQUALITY_OPERATOR, COLLECTION_OPERATOR } from "@plane/types";
@@ -45,7 +51,7 @@ export const getModuleMultiSelectConfig = (params: TCreateModuleFilterParams) =>
 export const getModuleFilterConfig =
   <P extends TFilterProperty>(key: P): TCreateFilterConfig<P, TCreateModuleFilterParams> =>
   (params: TCreateModuleFilterParams) =>
-    createFilterConfig<P, string>({
+    createFilterConfig<P>({
       id: key,
       label: "Module",
       ...params,
diff --git a/packages/utils/src/work-item-filters/configs/filters/priority.ts b/packages/utils/src/work-item-filters/configs/filters/priority.ts
index 77ef6c492..0442f44b8 100644
--- a/packages/utils/src/work-item-filters/configs/filters/priority.ts
+++ b/packages/utils/src/work-item-filters/configs/filters/priority.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // plane imports
 import type { TIssuePriorities } from "@plane/constants";
 import { ISSUE_PRIORITIES } from "@plane/constants";
@@ -49,7 +55,7 @@ export const getPriorityMultiSelectConfig = (
 export const getPriorityFilterConfig =
   <P extends TFilterProperty>(key: P): TCreateFilterConfig<P, TCreatePriorityFilterParams> =>
   (params: TCreatePriorityFilterParams) =>
-    createFilterConfig<P, TIssuePriorities>({
+    createFilterConfig<P>({
       id: key,
       label: "Priority",
       ...params,
diff --git a/packages/utils/src/work-item-filters/configs/filters/project.ts b/packages/utils/src/work-item-filters/configs/filters/project.ts
index 0088e2369..81e33ff13 100644
--- a/packages/utils/src/work-item-filters/configs/filters/project.ts
+++ b/packages/utils/src/work-item-filters/configs/filters/project.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // plane imports
 import type { TFilterProperty } from "@plane/types";
 import { EQUALITY_OPERATOR, COLLECTION_OPERATOR } from "@plane/types";
@@ -16,7 +22,7 @@ import { createFilterConfig, createOperatorConfigEntry, getProjectMultiSelectCon
 export const getProjectFilterConfig =
   <P extends TFilterProperty>(key: P): TCreateFilterConfig<P, TCreateProjectFilterParams> =>
   (params: TCreateProjectFilterParams) =>
-    createFilterConfig<P, string>({
+    createFilterConfig<P>({
       id: key,
       label: "Projects",
       ...params,
diff --git a/packages/utils/src/work-item-filters/configs/filters/shared.ts b/packages/utils/src/work-item-filters/configs/filters/shared.ts
index 67fe52378..0343fd3d6 100644
--- a/packages/utils/src/work-item-filters/configs/filters/shared.ts
+++ b/packages/utils/src/work-item-filters/configs/filters/shared.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // plane imports
 import type { IProject, TOperatorConfigMap, TSupportedOperators } from "@plane/types";
 import { COMPARISON_OPERATOR, EQUALITY_OPERATOR } from "@plane/types";
@@ -12,7 +18,7 @@ import {
 
 // ------------ Date filter ------------
 
-export const getSupportedDateOperators = (params: TCreateDateFilterParams): TOperatorConfigMap<Date> =>
+export const getSupportedDateOperators = (params: TCreateDateFilterParams): TOperatorConfigMap =>
   new Map([
     createOperatorConfigEntry(EQUALITY_OPERATOR.EXACT, params, (updatedParams) => getDatePickerConfig(updatedParams)),
     createOperatorConfigEntry(COMPARISON_OPERATOR.RANGE, params, (updatedParams) =>
diff --git a/packages/utils/src/work-item-filters/configs/filters/state.ts b/packages/utils/src/work-item-filters/configs/filters/state.ts
index 0962e13bb..04e8362dd 100644
--- a/packages/utils/src/work-item-filters/configs/filters/state.ts
+++ b/packages/utils/src/work-item-filters/configs/filters/state.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // plane imports
 import { STATE_GROUPS } from "@plane/constants";
 import type { IState, TFilterProperty, TStateGroups, TSupportedOperators } from "@plane/types";
@@ -48,7 +54,7 @@ export const getStateGroupMultiSelectConfig = (
 export const getStateGroupFilterConfig =
   <P extends TFilterProperty>(key: P): TCreateFilterConfig<P, TCreateStateGroupFilterParams> =>
   (params: TCreateStateGroupFilterParams) =>
-    createFilterConfig<P, TStateGroups>({
+    createFilterConfig<P>({
       id: key,
       label: "State Group",
       ...params,
@@ -102,7 +108,7 @@ export const getStateMultiSelectConfig = (params: TCreateStateFilterParams, sing
 export const getStateFilterConfig =
   <P extends TFilterProperty>(key: P): TCreateFilterConfig<P, TCreateStateFilterParams> =>
   (params: TCreateStateFilterParams) =>
-    createFilterConfig<P, string>({
+    createFilterConfig<P>({
       id: key,
       label: "State",
       ...params,
diff --git a/packages/utils/src/work-item-filters/configs/filters/user.ts b/packages/utils/src/work-item-filters/configs/filters/user.ts
index 297fcd5ab..e9c4ea48e 100644
--- a/packages/utils/src/work-item-filters/configs/filters/user.ts
+++ b/packages/utils/src/work-item-filters/configs/filters/user.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // plane imports
 import type { TFilterProperty } from "@plane/types";
 import { EQUALITY_OPERATOR, COLLECTION_OPERATOR } from "@plane/types";
@@ -21,7 +27,7 @@ export type TCreateAssigneeFilterParams = TCreateUserFilterParams;
 export const getAssigneeFilterConfig =
   <P extends TFilterProperty>(key: P): TCreateFilterConfig<P, TCreateAssigneeFilterParams> =>
   (params: TCreateAssigneeFilterParams) =>
-    createFilterConfig<P, string>({
+    createFilterConfig<P>({
       id: key,
       label: "Assignees",
       ...params,
@@ -49,7 +55,7 @@ export type TCreateMentionFilterParams = TCreateUserFilterParams;
 export const getMentionFilterConfig =
   <P extends TFilterProperty>(key: P): TCreateFilterConfig<P, TCreateMentionFilterParams> =>
   (params: TCreateMentionFilterParams) =>
-    createFilterConfig<P, string>({
+    createFilterConfig<P>({
       id: key,
       label: "Mentions",
       ...params,
@@ -77,7 +83,7 @@ export type TCreateCreatedByFilterParams = TCreateUserFilterParams;
 export const getCreatedByFilterConfig =
   <P extends TFilterProperty>(key: P): TCreateFilterConfig<P, TCreateCreatedByFilterParams> =>
   (params: TCreateCreatedByFilterParams) =>
-    createFilterConfig<P, string>({
+    createFilterConfig<P>({
       id: key,
       label: "Created by",
       ...params,
@@ -105,7 +111,7 @@ export type TCreateSubscriberFilterParams = TCreateUserFilterParams;
 export const getSubscriberFilterConfig =
   <P extends TFilterProperty>(key: P): TCreateFilterConfig<P, TCreateSubscriberFilterParams> =>
   (params: TCreateSubscriberFilterParams) =>
-    createFilterConfig<P, string>({
+    createFilterConfig<P>({
       id: key,
       label: "Subscriber",
       ...params,
diff --git a/packages/utils/src/work-item-filters/configs/index.ts b/packages/utils/src/work-item-filters/configs/index.ts
index 302e3a1a6..c3aade60a 100644
--- a/packages/utils/src/work-item-filters/configs/index.ts
+++ b/packages/utils/src/work-item-filters/configs/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./filters";
diff --git a/packages/utils/src/work-item-filters/index.ts b/packages/utils/src/work-item-filters/index.ts
index 3158367fc..3c9c6d89f 100644
--- a/packages/utils/src/work-item-filters/index.ts
+++ b/packages/utils/src/work-item-filters/index.ts
@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./configs";
diff --git a/packages/utils/src/work-item/base.ts b/packages/utils/src/work-item/base.ts
index d2ded2dfa..c79b805cf 100644
--- a/packages/utils/src/work-item/base.ts
+++ b/packages/utils/src/work-item/base.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { differenceInCalendarDays } from "date-fns/differenceInCalendarDays";
 import { isEmpty } from "lodash-es";
 import { v4 as uuidv4 } from "uuid";
diff --git a/packages/utils/src/work-item/index.ts b/packages/utils/src/work-item/index.ts
index 002d393b1..201e5523a 100644
--- a/packages/utils/src/work-item/index.ts
+++ b/packages/utils/src/work-item/index.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 export * from "./base";
 export * from "./modal";
 export * from "./state";
diff --git a/packages/utils/src/work-item/modal.ts b/packages/utils/src/work-item/modal.ts
index dded63ace..5b04824fb 100644
--- a/packages/utils/src/work-item/modal.ts
+++ b/packages/utils/src/work-item/modal.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { set } from "lodash-es";
 // plane imports
 import { DEFAULT_WORK_ITEM_FORM_VALUES } from "@plane/constants";
diff --git a/packages/utils/src/work-item/state.ts b/packages/utils/src/work-item/state.ts
index 949ce2dff..4dadd6d0e 100644
--- a/packages/utils/src/work-item/state.ts
+++ b/packages/utils/src/work-item/state.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // plane imports
 import type { TDraggableData } from "@plane/constants";
 import { STATE_GROUPS } from "@plane/constants";
diff --git a/packages/utils/src/workspace.ts b/packages/utils/src/workspace.ts
index 88200b5b5..ca4d7dd72 100644
--- a/packages/utils/src/workspace.ts
+++ b/packages/utils/src/workspace.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // plane imports
 import type { IWorkspace } from "@plane/types";
 
diff --git a/packages/utils/tsdown.config.ts b/packages/utils/tsdown.config.ts
index 78c3dcba8..92959eaf7 100644
--- a/packages/utils/tsdown.config.ts
+++ b/packages/utils/tsdown.config.ts
@@ -5,4 +5,5 @@ export default defineConfig({
   format: ["esm"],
   dts: true,
   platform: "neutral",
+  exports: true,
 });
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 65d7bdd97..e048c47f8 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -18,27 +18,15 @@ catalogs:
     '@bprogress/core':
       specifier: ^1.3.4
       version: 1.3.4
-    '@dotenvx/dotenvx':
-      specifier: 1.51.1
-      version: 1.51.1
     '@react-router/dev':
-      specifier: 7.9.5
-      version: 7.9.5
+      specifier: 7.13.1
+      version: 7.13.1
     '@react-router/node':
-      specifier: 7.9.5
-      version: 7.9.5
+      specifier: 7.13.1
+      version: 7.13.1
     '@react-router/serve':
-      specifier: 7.9.5
-      version: 7.9.5
-    '@sentry/node':
-      specifier: 10.27.0
-      version: 10.27.0
-    '@sentry/profiling-node':
-      specifier: 10.27.0
-      version: 10.27.0
-    '@sentry/react-router':
-      specifier: 10.27.0
-      version: 10.27.0
+      specifier: 7.13.1
+      version: 7.13.1
     '@tiptap/core':
       specifier: ^2.22.3
       version: 2.26.3
@@ -58,11 +46,11 @@ catalogs:
       specifier: 18.3.1
       version: 18.3.1
     axios:
-      specifier: 1.12.0
-      version: 1.12.0
-    lodash-es:
-      specifier: 4.17.21
-      version: 4.17.21
+      specifier: 1.13.5
+      version: 1.13.5
+    dotenv:
+      specifier: 16.4.7
+      version: 16.4.7
     lucide-react:
       specifier: 0.469.0
       version: 0.469.0
@@ -82,11 +70,8 @@ catalogs:
       specifier: 18.3.1
       version: 18.3.1
     react-router:
-      specifier: 7.9.5
-      version: 7.9.5
-    react-router-dom:
-      specifier: 7.9.5
-      version: 7.9.5
+      specifier: 7.12.0
+      version: 7.12.0
     swr:
       specifier: 2.2.4
       version: 2.2.4
@@ -103,7 +88,7 @@ overrides:
   valibot: 1.2.0
   glob: 11.1.0
   js-yaml: 4.1.1
-  brace-expansion: 2.0.2
+  brace-expansion: 5.0.5
   nanoid: 3.3.8
   esbuild: 0.25.0
   '@babel/helpers': 7.26.10
@@ -114,81 +99,62 @@ overrides:
   prosemirror-view: 1.40.0
   '@types/express': 4.17.23
   typescript: 5.8.3
-  vite: 7.1.11
+  vite: 7.3.1
+  qs: 6.14.2
+  diff: 5.2.2
+  webpack: 5.104.1
+  lodash-es: 4.18.0
+  '@isaacs/brace-expansion': 5.0.1
+  lodash: 4.17.23
+  markdown-it: 14.1.1
+  rollup: 4.59.0
+  minimatch@3: 3.1.4
+  minimatch@10: 10.2.3
+  serialize-javascript: 7.0.5
+  ajv@6: 6.14.0
+  ajv@8: 8.18.0
+  undici@7: 7.24.0
+  flatted: 3.4.2
+  picomatch: 2.3.2
+  yaml@1: 1.10.3
+  yaml@2: 2.8.3
+  path-to-regexp: 0.1.13
+  defu: 6.1.5
 
 importers:
 
   .:
     devDependencies:
-      '@eslint/js':
-        specifier: 9.39.1
-        version: 9.39.1
-      '@prettier/plugin-oxc':
-        specifier: 0.1.3
-        version: 0.1.3
-      '@vitest/eslint-plugin':
-        specifier: 1.5.1
-        version: 1.5.1(eslint@9.39.1(jiti@2.5.1))(typescript@5.8.3)(vitest@4.0.15(@opentelemetry/api@1.9.0)(@types/node@22.12.0)(jiti@2.5.1)(jsdom@25.0.1)(terser@5.43.1)(yaml@2.8.1))
-      eslint:
-        specifier: 9.39.1
-        version: 9.39.1(jiti@2.5.1)
-      eslint-config-prettier:
-        specifier: 10.1.8
-        version: 10.1.8(eslint@9.39.1(jiti@2.5.1))
-      eslint-import-resolver-node:
-        specifier: 0.3.9
-        version: 0.3.9
-      eslint-import-resolver-typescript:
-        specifier: 4.4.4
-        version: 4.4.4(eslint-plugin-import@2.32.0)(eslint@9.39.1(jiti@2.5.1))
-      eslint-plugin-import:
-        specifier: 2.32.0
-        version: 2.32.0(@typescript-eslint/parser@8.48.1(eslint@9.39.1(jiti@2.5.1))(typescript@5.8.3))(eslint-import-resolver-typescript@4.4.4)(eslint@9.39.1(jiti@2.5.1))
-      eslint-plugin-jsx-a11y:
-        specifier: 6.10.2
-        version: 6.10.2(eslint@9.39.1(jiti@2.5.1))
-      eslint-plugin-n:
-        specifier: 17.23.1
-        version: 17.23.1(eslint@9.39.1(jiti@2.5.1))(typescript@5.8.3)
-      eslint-plugin-promise:
-        specifier: 7.2.1
-        version: 7.2.1(eslint@9.39.1(jiti@2.5.1))
-      eslint-plugin-react:
-        specifier: 7.37.5
-        version: 7.37.5(eslint@9.39.1(jiti@2.5.1))
-      eslint-plugin-react-hooks:
-        specifier: 7.0.1
-        version: 7.0.1(eslint@9.39.1(jiti@2.5.1))
-      eslint-plugin-react-refresh:
-        specifier: 0.4.24
-        version: 0.4.24(eslint@9.39.1(jiti@2.5.1))
-      eslint-plugin-storybook:
-        specifier: 10.1.4
-        version: 10.1.4(eslint@9.39.1(jiti@2.5.1))(storybook@9.1.10(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.5.1)(terser@5.43.1)(yaml@2.8.1)))(typescript@5.8.3)
-      globals:
-        specifier: 16.5.0
-        version: 16.5.0
       husky:
         specifier: 9.1.7
         version: 9.1.7
       lint-staged:
         specifier: 16.2.7
         version: 16.2.7
-      prettier:
-        specifier: 3.7.4
-        version: 3.7.4
+      oxfmt:
+        specifier: 0.35.0
+        version: 0.35.0
+      oxlint:
+        specifier: 1.51.0
+        version: 1.51.0
       turbo:
-        specifier: 2.6.3
-        version: 2.6.3
-      typescript-eslint:
-        specifier: 8.48.1
-        version: 8.48.1(eslint@9.39.1(jiti@2.5.1))(typescript@5.8.3)
+        specifier: 2.9.4
+        version: 2.9.4
 
   apps/admin:
     dependencies:
       '@bprogress/core':
         specifier: 'catalog:'
         version: 1.3.4
+      '@fontsource-variable/inter':
+        specifier: 5.2.8
+        version: 5.2.8
+      '@fontsource/ibm-plex-mono':
+        specifier: 5.2.7
+        version: 5.2.7
+      '@fontsource/material-symbols-rounded':
+        specifier: 5.2.30
+        version: 5.2.30
       '@headlessui/react':
         specifier: ^1.7.19
         version: 1.7.19(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -215,10 +181,7 @@ importers:
         version: link:../../packages/utils
       '@react-router/node':
         specifier: 'catalog:'
-        version: 7.9.5(react-router@7.9.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(typescript@5.8.3)
-      '@sentry/react-router':
-        specifier: 'catalog:'
-        version: 10.27.0(@react-router/node@7.9.5(react-router@7.9.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(typescript@5.8.3))(react-router@7.9.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)
+        version: 7.13.1(react-router@7.12.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(typescript@5.8.3)
       '@tanstack/react-virtual':
         specifier: ^3.13.12
         version: 3.13.12(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -227,13 +190,13 @@ importers:
         version: 3.13.12
       axios:
         specifier: 'catalog:'
-        version: 1.12.0
+        version: 1.13.5
       isbot:
         specifier: ^5.1.31
         version: 5.1.31
       lodash-es:
-        specifier: 'catalog:'
-        version: 4.17.21
+        specifier: 4.18.0
+        version: 4.18.0
       lucide-react:
         specifier: 'catalog:'
         version: 0.469.0(react@18.3.1)
@@ -257,10 +220,7 @@ importers:
         version: 7.51.5(react@18.3.1)
       react-router:
         specifier: 'catalog:'
-        version: 7.9.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      react-router-dom:
-        specifier: 'catalog:'
-        version: 7.9.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 7.12.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       serve:
         specifier: 14.2.5
         version: 14.2.5
@@ -271,9 +231,6 @@ importers:
         specifier: 'catalog:'
         version: 13.0.0
     devDependencies:
-      '@dotenvx/dotenvx':
-        specifier: 'catalog:'
-        version: 1.51.1
       '@plane/tailwind-config':
         specifier: workspace:*
         version: link:../../packages/tailwind-config
@@ -282,7 +239,7 @@ importers:
         version: link:../../packages/typescript-config
       '@react-router/dev':
         specifier: 'catalog:'
-        version: 7.9.5(@react-router/serve@7.9.5(react-router@7.9.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(typescript@5.8.3))(@types/node@22.12.0)(babel-plugin-macros@3.1.0)(jiti@2.5.1)(react-router@7.9.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(terser@5.43.1)(typescript@5.8.3)(vite@7.1.11(@types/node@22.12.0)(jiti@2.5.1)(terser@5.43.1)(yaml@2.8.1))(yaml@2.8.1)
+        version: 7.13.1(@react-router/serve@7.13.1(react-router@7.12.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(typescript@5.8.3))(@types/node@22.12.0)(babel-plugin-macros@3.1.0)(jiti@2.6.1)(lightningcss@1.30.2)(react-router@7.12.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(terser@5.43.1)(typescript@5.8.3)(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3))(yaml@2.8.3)
       '@types/lodash-es':
         specifier: 'catalog:'
         version: 4.17.12
@@ -295,21 +252,30 @@ importers:
       '@types/react-dom':
         specifier: 'catalog:'
         version: 18.3.1
+      dotenv:
+        specifier: 'catalog:'
+        version: 16.4.7
       typescript:
         specifier: 5.8.3
         version: 5.8.3
       vite:
-        specifier: 7.1.11
-        version: 7.1.11(@types/node@22.12.0)(jiti@2.5.1)(terser@5.43.1)(yaml@2.8.1)
+        specifier: 7.3.1
+        version: 7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3)
       vite-tsconfig-paths:
         specifier: ^5.1.4
-        version: 5.1.4(typescript@5.8.3)(vite@7.1.11(@types/node@22.12.0)(jiti@2.5.1)(terser@5.43.1)(yaml@2.8.1))
+        version: 5.1.4(typescript@5.8.3)(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3))
 
   apps/live:
     dependencies:
-      '@dotenvx/dotenvx':
-        specifier: 'catalog:'
-        version: 1.51.1
+      '@effect/platform':
+        specifier: ^0.94.0
+        version: 0.94.1(effect@3.20.0)
+      '@effect/platform-node':
+        specifier: ^0.104.0
+        version: 0.104.0(@effect/cluster@0.56.1(@effect/platform@0.94.1(effect@3.20.0))(@effect/rpc@0.73.0(@effect/platform@0.94.1(effect@3.20.0))(effect@3.20.0))(@effect/sql@0.49.0(@effect/experimental@0.58.0(@effect/platform@0.94.1(effect@3.20.0))(effect@3.20.0)(ioredis@5.7.0))(@effect/platform@0.94.1(effect@3.20.0))(effect@3.20.0))(@effect/workflow@0.16.0(@effect/experimental@0.58.0(@effect/platform@0.94.1(effect@3.20.0))(effect@3.20.0)(ioredis@5.7.0))(@effect/platform@0.94.1(effect@3.20.0))(@effect/rpc@0.73.0(@effect/platform@0.94.1(effect@3.20.0))(effect@3.20.0))(effect@3.20.0))(effect@3.20.0))(@effect/platform@0.94.1(effect@3.20.0))(@effect/rpc@0.73.0(@effect/platform@0.94.1(effect@3.20.0))(effect@3.20.0))(@effect/sql@0.49.0(@effect/experimental@0.58.0(@effect/platform@0.94.1(effect@3.20.0))(effect@3.20.0)(ioredis@5.7.0))(@effect/platform@0.94.1(effect@3.20.0))(effect@3.20.0))(effect@3.20.0)
+      '@fontsource/inter':
+        specifier: 5.2.8
+        version: 5.2.8
       '@hocuspocus/extension-database':
         specifier: 2.15.2
         version: 2.15.2(y-protocols@1.0.6(yjs@13.6.27))(yjs@13.6.27)
@@ -337,12 +303,12 @@ importers:
       '@plane/types':
         specifier: workspace:*
         version: link:../../packages/types
-      '@sentry/node':
-        specifier: 'catalog:'
-        version: 10.27.0
-      '@sentry/profiling-node':
-        specifier: 'catalog:'
-        version: 10.27.0
+      '@react-pdf/renderer':
+        specifier: ^4.3.0
+        version: 4.3.0(react@18.3.1)
+      '@react-pdf/types':
+        specifier: ^2.9.2
+        version: 2.9.2
       '@tiptap/core':
         specifier: 'catalog:'
         version: 2.26.3(@tiptap/pm@3.6.6)
@@ -351,13 +317,19 @@ importers:
         version: 2.26.2(@tiptap/core@2.26.3(@tiptap/pm@3.6.6))(@tiptap/pm@3.6.6)
       axios:
         specifier: 'catalog:'
-        version: 1.12.0
+        version: 1.13.5
       compression:
         specifier: 1.8.1
         version: 1.8.1
       cors:
         specifier: ^2.8.5
         version: 2.8.5
+      dotenv:
+        specifier: 'catalog:'
+        version: 16.4.7
+      effect:
+        specifier: 3.20.0
+        version: 3.20.0
       express:
         specifier: 4.22.0
         version: 4.22.0
@@ -370,6 +342,12 @@ importers:
       ioredis:
         specifier: 5.7.0
         version: 5.7.0
+      react:
+        specifier: 'catalog:'
+        version: 18.3.1
+      sharp:
+        specifier: ^0.34.3
+        version: 0.34.3
       uuid:
         specifier: 'catalog:'
         version: 13.0.0
@@ -407,21 +385,45 @@ importers:
       '@types/node':
         specifier: 'catalog:'
         version: 22.12.0
+      '@types/pdf-parse':
+        specifier: ^1.1.5
+        version: 1.1.5
+      '@types/react':
+        specifier: 'catalog:'
+        version: 18.3.11
       '@types/ws':
         specifier: ^8.18.1
         version: 8.18.1
+      '@vitest/coverage-v8':
+        specifier: ^4.0.8
+        version: 4.0.17(vitest@4.0.15(@opentelemetry/api@1.9.0)(@types/node@22.12.0)(jiti@2.6.1)(jsdom@26.1.0)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3))
+      pdf-parse:
+        specifier: ^2.4.5
+        version: 2.4.5
       tsdown:
         specifier: 'catalog:'
-        version: 0.16.0(typescript@5.8.3)
+        version: 0.16.0(typescript@5.8.3)(unrun@0.2.34)
       typescript:
         specifier: 5.8.3
         version: 5.8.3
+      vitest:
+        specifier: ^4.0.8
+        version: 4.0.15(@opentelemetry/api@1.9.0)(@types/node@22.12.0)(jiti@2.6.1)(jsdom@26.1.0)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3)
 
   apps/space:
     dependencies:
       '@bprogress/core':
         specifier: 'catalog:'
         version: 1.3.4
+      '@fontsource-variable/inter':
+        specifier: 5.2.8
+        version: 5.2.8
+      '@fontsource/ibm-plex-mono':
+        specifier: 5.2.7
+        version: 5.2.7
+      '@fontsource/material-symbols-rounded':
+        specifier: 5.2.30
+        version: 5.2.30
       '@headlessui/react':
         specifier: ^1.7.19
         version: 1.7.19(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -454,16 +456,13 @@ importers:
         version: 2.11.8
       '@react-router/node':
         specifier: 'catalog:'
-        version: 7.9.5(react-router@7.9.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(typescript@5.8.3)
+        version: 7.13.1(react-router@7.12.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(typescript@5.8.3)
       '@react-router/serve':
         specifier: 'catalog:'
-        version: 7.9.5(react-router@7.9.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(typescript@5.8.3)
-      '@sentry/react-router':
-        specifier: 'catalog:'
-        version: 10.27.0(@react-router/node@7.9.5(react-router@7.9.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(typescript@5.8.3))(react-router@7.9.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)
+        version: 7.13.1(react-router@7.12.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(typescript@5.8.3)
       axios:
         specifier: 'catalog:'
-        version: 1.12.0
+        version: 1.13.5
       clsx:
         specifier: ^2.0.0
         version: 2.1.1
@@ -474,8 +473,8 @@ importers:
         specifier: ^5.1.31
         version: 5.1.31
       lodash-es:
-        specifier: 'catalog:'
-        version: 4.17.21
+        specifier: 4.18.0
+        version: 4.18.0
       lucide-react:
         specifier: 'catalog:'
         version: 0.469.0(react@18.3.1)
@@ -508,10 +507,7 @@ importers:
         version: 2.3.0(@popperjs/core@2.11.8)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       react-router:
         specifier: 'catalog:'
-        version: 7.9.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      react-router-dom:
-        specifier: 'catalog:'
-        version: 7.9.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 7.12.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       swr:
         specifier: 'catalog:'
         version: 2.2.4(react@18.3.1)
@@ -519,9 +515,6 @@ importers:
         specifier: 'catalog:'
         version: 13.0.0
     devDependencies:
-      '@dotenvx/dotenvx':
-        specifier: 'catalog:'
-        version: 1.51.1
       '@plane/tailwind-config':
         specifier: workspace:*
         version: link:../../packages/tailwind-config
@@ -530,7 +523,10 @@ importers:
         version: link:../../packages/typescript-config
       '@react-router/dev':
         specifier: 'catalog:'
-        version: 7.9.5(@react-router/serve@7.9.5(react-router@7.9.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(typescript@5.8.3))(@types/node@22.12.0)(babel-plugin-macros@3.1.0)(jiti@2.5.1)(react-router@7.9.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(terser@5.43.1)(typescript@5.8.3)(vite@7.1.11(@types/node@22.12.0)(jiti@2.5.1)(terser@5.43.1)(yaml@2.8.1))(yaml@2.8.1)
+        version: 7.13.1(@react-router/serve@7.13.1(react-router@7.12.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(typescript@5.8.3))(@types/node@22.12.0)(babel-plugin-macros@3.1.0)(jiti@2.6.1)(lightningcss@1.30.2)(react-router@7.12.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(terser@5.43.1)(typescript@5.8.3)(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3))(yaml@2.8.3)
+      '@tailwindcss/typography':
+        specifier: 0.5.19
+        version: 0.5.19
       '@types/lodash-es':
         specifier: 'catalog:'
         version: 4.17.12
@@ -543,15 +539,18 @@ importers:
       '@types/react-dom':
         specifier: 'catalog:'
         version: 18.3.1
+      dotenv:
+        specifier: 'catalog:'
+        version: 16.4.7
       typescript:
         specifier: 5.8.3
         version: 5.8.3
       vite:
-        specifier: 7.1.11
-        version: 7.1.11(@types/node@22.12.0)(jiti@2.5.1)(terser@5.43.1)(yaml@2.8.1)
+        specifier: 7.3.1
+        version: 7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3)
       vite-tsconfig-paths:
         specifier: ^5.1.4
-        version: 5.1.4(typescript@5.8.3)(vite@7.1.11(@types/node@22.12.0)(jiti@2.5.1)(terser@5.43.1)(yaml@2.8.1))
+        version: 5.1.4(typescript@5.8.3)(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3))
 
   apps/web:
     dependencies:
@@ -567,12 +566,18 @@ importers:
       '@bprogress/core':
         specifier: 'catalog:'
         version: 1.3.4
+      '@fontsource-variable/inter':
+        specifier: 5.2.8
+        version: 5.2.8
+      '@fontsource/ibm-plex-mono':
+        specifier: 5.2.7
+        version: 5.2.7
+      '@fontsource/material-symbols-rounded':
+        specifier: 5.2.30
+        version: 5.2.30
       '@headlessui/react':
         specifier: ^1.7.19
         version: 1.7.19(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@intercom/messenger-js-sdk':
-        specifier: ^0.0.12
-        version: 0.0.12
       '@plane/constants':
         specifier: workspace:*
         version: link:../../packages/constants
@@ -606,24 +611,18 @@ importers:
       '@popperjs/core':
         specifier: ^2.11.8
         version: 2.11.8
-      '@posthog/react':
-        specifier: ^1.4.0
-        version: 1.4.0(@types/react@18.3.11)(posthog-js@1.255.1)(react@18.3.1)
       '@react-pdf/renderer':
         specifier: ^3.4.5
         version: 3.4.5(react@18.3.1)
       '@react-router/node':
         specifier: 'catalog:'
-        version: 7.9.5(react-router@7.9.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(typescript@5.8.3)
-      '@sentry/react-router':
-        specifier: 'catalog:'
-        version: 10.27.0(@react-router/node@7.9.5(react-router@7.9.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(typescript@5.8.3))(react-router@7.9.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)
+        version: 7.13.1(react-router@7.12.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(typescript@5.8.3)
       '@tanstack/react-table':
         specifier: ^8.21.3
         version: 8.21.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       axios:
         specifier: 'catalog:'
-        version: 1.12.0
+        version: 1.13.5
       clsx:
         specifier: ^2.0.0
         version: 2.1.1
@@ -646,8 +645,8 @@ importers:
         specifier: ^5.1.31
         version: 5.1.31
       lodash-es:
-        specifier: 'catalog:'
-        version: 4.17.21
+        specifier: 4.18.0
+        version: 4.18.0
       lucide-react:
         specifier: 'catalog:'
         version: 0.469.0(react@18.3.1)
@@ -663,9 +662,6 @@ importers:
       next-themes:
         specifier: 0.4.6
         version: 0.4.6(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      posthog-js:
-        specifier: ^1.255.1
-        version: 1.255.1
       react:
         specifier: 'catalog:'
         version: 18.3.1
@@ -701,10 +697,7 @@ importers:
         version: 2.3.0(@popperjs/core@2.11.8)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       react-router:
         specifier: 'catalog:'
-        version: 7.9.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      react-router-dom:
-        specifier: 'catalog:'
-        version: 7.9.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 7.12.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       recharts:
         specifier: ^2.12.7
         version: 2.15.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -717,9 +710,6 @@ importers:
       swr:
         specifier: 'catalog:'
         version: 2.2.4(react@18.3.1)
-      tailwind-merge:
-        specifier: ^2.0.0
-        version: 2.6.0
       use-font-face-observer:
         specifier: ^1.2.2
         version: 1.3.0(react@18.3.1)
@@ -727,9 +717,6 @@ importers:
         specifier: 'catalog:'
         version: 13.0.0
     devDependencies:
-      '@dotenvx/dotenvx':
-        specifier: 'catalog:'
-        version: 1.51.1
       '@plane/tailwind-config':
         specifier: workspace:*
         version: link:../../packages/tailwind-config
@@ -738,7 +725,10 @@ importers:
         version: link:../../packages/typescript-config
       '@react-router/dev':
         specifier: 'catalog:'
-        version: 7.9.5(@react-router/serve@7.9.5(react-router@7.9.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(typescript@5.8.3))(@types/node@22.12.0)(babel-plugin-macros@3.1.0)(jiti@2.5.1)(react-router@7.9.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(terser@5.43.1)(typescript@5.8.3)(vite@7.1.11(@types/node@22.12.0)(jiti@2.5.1)(terser@5.43.1)(yaml@2.8.1))(yaml@2.8.1)
+        version: 7.13.1(@react-router/serve@7.13.1(react-router@7.12.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(typescript@5.8.3))(@types/node@22.12.0)(babel-plugin-macros@3.1.0)(jiti@2.6.1)(lightningcss@1.30.2)(react-router@7.12.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(terser@5.43.1)(typescript@5.8.3)(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3))(yaml@2.8.3)
+      '@tailwindcss/typography':
+        specifier: 0.5.19
+        version: 0.5.19
       '@types/lodash-es':
         specifier: 'catalog:'
         version: 4.17.12
@@ -754,15 +744,18 @@ importers:
       '@types/react-dom':
         specifier: 'catalog:'
         version: 18.3.1
+      dotenv:
+        specifier: 'catalog:'
+        version: 16.4.7
       typescript:
         specifier: 5.8.3
         version: 5.8.3
       vite:
-        specifier: 7.1.11
-        version: 7.1.11(@types/node@22.12.0)(jiti@2.5.1)(terser@5.43.1)(yaml@2.8.1)
+        specifier: 7.3.1
+        version: 7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3)
       vite-tsconfig-paths:
         specifier: ^5.1.4
-        version: 5.1.4(typescript@5.8.3)(vite@7.1.11(@types/node@22.12.0)(jiti@2.5.1)(terser@5.43.1)(yaml@2.8.1))
+        version: 5.1.4(typescript@5.8.3)(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3))
 
   packages/codemods:
     devDependencies:
@@ -780,7 +773,7 @@ importers:
         version: 17.3.0
       vitest:
         specifier: ^4.0.8
-        version: 4.0.15(@opentelemetry/api@1.9.0)(@types/node@22.12.0)(jiti@2.5.1)(jsdom@25.0.1)(terser@5.43.1)(yaml@2.8.1)
+        version: 4.0.15(@opentelemetry/api@1.9.0)(@types/node@22.12.0)(jiti@2.6.1)(jsdom@26.1.0)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3)
 
   packages/constants:
     dependencies:
@@ -799,7 +792,7 @@ importers:
         version: 18.3.11
       tsdown:
         specifier: 'catalog:'
-        version: 0.16.0(typescript@5.8.3)
+        version: 0.16.0(typescript@5.8.3)(unrun@0.2.34)
       typescript:
         specifier: 5.8.3
         version: 5.8.3
@@ -823,7 +816,7 @@ importers:
         version: 0.2.2
       tsdown:
         specifier: 'catalog:'
-        version: 0.16.0(typescript@5.8.3)
+        version: 0.16.0(typescript@5.8.3)(unrun@0.2.34)
       typescript:
         specifier: 5.8.3
         version: 5.8.3
@@ -944,6 +937,9 @@ importers:
       linkifyjs:
         specifier: ^4.3.2
         version: 4.3.2
+      lodash-es:
+        specifier: 4.18.0
+        version: 4.18.0
       lowlight:
         specifier: ^3.0.0
         version: 3.3.0
@@ -987,6 +983,9 @@ importers:
       '@plane/typescript-config':
         specifier: workspace:*
         version: link:../typescript-config
+      '@types/lodash-es':
+        specifier: 'catalog:'
+        version: 4.17.12
       '@types/node':
         specifier: 'catalog:'
         version: 22.12.0
@@ -1001,7 +1000,7 @@ importers:
         version: 8.5.6
       tsdown:
         specifier: 'catalog:'
-        version: 0.16.0(typescript@5.8.3)
+        version: 0.16.0(typescript@5.8.3)(unrun@0.2.34)
       typescript:
         specifier: 5.8.3
         version: 5.8.3
@@ -1023,7 +1022,7 @@ importers:
         version: 18.3.11
       tsdown:
         specifier: 'catalog:'
-        version: 0.16.0(typescript@5.8.3)
+        version: 0.16.0(typescript@5.8.3)(unrun@0.2.34)
       typescript:
         specifier: 5.8.3
         version: 5.8.3
@@ -1037,8 +1036,8 @@ importers:
         specifier: ^10.7.11
         version: 10.7.16
       lodash-es:
-        specifier: 'catalog:'
-        version: 4.17.21
+        specifier: 4.18.0
+        version: 4.18.0
       mobx:
         specifier: 'catalog:'
         version: 6.12.0
@@ -1063,7 +1062,7 @@ importers:
         version: 18.3.11
       tsdown:
         specifier: 'catalog:'
-        version: 0.16.0(typescript@5.8.3)
+        version: 0.16.0(typescript@5.8.3)(unrun@0.2.34)
       typescript:
         specifier: 5.8.3
         version: 5.8.3
@@ -1088,7 +1087,7 @@ importers:
         version: 22.12.0
       tsdown:
         specifier: 'catalog:'
-        version: 0.16.0(typescript@5.8.3)
+        version: 0.16.0(typescript@5.8.3)(unrun@0.2.34)
       typescript:
         specifier: 5.8.3
         version: 5.8.3
@@ -1107,11 +1106,14 @@ importers:
       '@plane/types':
         specifier: workspace:*
         version: link:../types
+      '@plane/utils':
+        specifier: workspace:*
+        version: link:../utils
       '@tanstack/react-table':
         specifier: ^8.21.3
         version: 8.21.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       class-variance-authority:
-        specifier: ^0.7.1
+        specifier: 0.7.1
         version: 0.7.1
       clsx:
         specifier: ^2.1.1
@@ -1141,8 +1143,8 @@ importers:
         specifier: ^2.15.1
         version: 2.15.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       tailwind-merge:
-        specifier: ^3.3.1
-        version: 3.3.1
+        specifier: 3.4.0
+        version: 3.4.0
       use-font-face-observer:
         specifier: ^1.3.0
         version: 1.3.0(react@18.3.1)
@@ -1155,13 +1157,13 @@ importers:
         version: link:../typescript-config
       '@storybook/addon-designs':
         specifier: 10.0.2
-        version: 10.0.2(@storybook/addon-docs@9.1.10(@types/react@18.3.11)(storybook@9.1.10(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.5.1)(terser@5.43.1)(yaml@2.8.1))))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@9.1.10(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.5.1)(terser@5.43.1)(yaml@2.8.1)))
+        version: 10.0.2(@storybook/addon-docs@9.1.10(@types/react@18.3.11)(storybook@9.1.19(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3))))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@9.1.19(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3)))
       '@storybook/addon-docs':
         specifier: 9.1.10
-        version: 9.1.10(@types/react@18.3.11)(storybook@9.1.10(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.5.1)(terser@5.43.1)(yaml@2.8.1)))
+        version: 9.1.10(@types/react@18.3.11)(storybook@9.1.19(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3)))
       '@storybook/react-vite':
         specifier: 9.1.10
-        version: 9.1.10(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(rollup@4.52.4)(storybook@9.1.10(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.5.1)(terser@5.43.1)(yaml@2.8.1)))(typescript@5.8.3)(vite@7.1.11(@types/node@22.12.0)(jiti@2.5.1)(terser@5.43.1)(yaml@2.8.1))
+        version: 9.1.10(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(rollup@4.59.0)(storybook@9.1.19(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3)))(typescript@5.8.3)(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3))
       '@types/react':
         specifier: 'catalog:'
         version: 18.3.11
@@ -1169,11 +1171,11 @@ importers:
         specifier: 'catalog:'
         version: 18.3.1
       storybook:
-        specifier: 9.1.10
-        version: 9.1.10(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.5.1)(terser@5.43.1)(yaml@2.8.1))
+        specifier: 9.1.19
+        version: 9.1.19(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3))
       tsdown:
         specifier: 'catalog:'
-        version: 0.16.0(typescript@5.8.3)
+        version: 0.16.0(typescript@5.8.3)(unrun@0.2.34)
       typescript:
         specifier: 5.8.3
         version: 5.8.3
@@ -1188,17 +1190,17 @@ importers:
         version: link:../types
       axios:
         specifier: 'catalog:'
-        version: 1.12.0
+        version: 1.13.5
       file-type:
-        specifier: ^21.0.0
-        version: 21.0.0
+        specifier: ^21.3.1
+        version: 21.3.3
     devDependencies:
       '@plane/typescript-config':
         specifier: workspace:*
         version: link:../typescript-config
       tsdown:
         specifier: 'catalog:'
-        version: 0.16.0(typescript@5.8.3)
+        version: 0.16.0(typescript@5.8.3)(unrun@0.2.34)
       typescript:
         specifier: 5.8.3
         version: 5.8.3
@@ -1215,8 +1217,8 @@ importers:
         specifier: workspace:*
         version: link:../utils
       lodash-es:
-        specifier: 'catalog:'
-        version: 4.17.21
+        specifier: 4.18.0
+        version: 4.18.0
       mobx:
         specifier: 'catalog:'
         version: 6.12.0
@@ -1239,30 +1241,25 @@ importers:
       '@types/node':
         specifier: 'catalog:'
         version: 22.12.0
+      tsdown:
+        specifier: 'catalog:'
+        version: 0.16.0(typescript@5.8.3)(unrun@0.2.34)
       typescript:
         specifier: 5.8.3
         version: 5.8.3
 
   packages/tailwind-config:
-    devDependencies:
-      '@tailwindcss/container-queries':
-        specifier: ^0.1.1
-        version: 0.1.1(tailwindcss@3.4.17)
-      '@tailwindcss/typography':
-        specifier: ^0.5.9
-        version: 0.5.16(tailwindcss@3.4.17)
-      autoprefixer:
-        specifier: ^10.4.14
-        version: 10.4.21(postcss@8.5.6)
+    dependencies:
+      '@tailwindcss/postcss':
+        specifier: 4.1.17
+        version: 4.1.17
       postcss:
-        specifier: ^8.4.38
+        specifier: 8.5.6
         version: 8.5.6
+    devDependencies:
       tailwindcss:
-        specifier: ^3.4.17
-        version: 3.4.17
-      tailwindcss-animate:
-        specifier: ^1.0.6
-        version: 1.0.7(tailwindcss@3.4.17)
+        specifier: 4.1.17
+        version: 4.1.17
 
   packages/types:
     dependencies:
@@ -1287,7 +1284,7 @@ importers:
         version: 18.3.1
       tsdown:
         specifier: 'catalog:'
-        version: 0.16.0(typescript@5.8.3)
+        version: 0.16.0(typescript@5.8.3)(unrun@0.2.34)
       typescript:
         specifier: 5.8.3
         version: 5.8.3
@@ -1336,8 +1333,8 @@ importers:
         specifier: ^2.0.0
         version: 2.1.1
       lodash-es:
-        specifier: 'catalog:'
-        version: 4.17.21
+        specifier: 4.18.0
+        version: 4.18.0
       lucide-react:
         specifier: 'catalog:'
         version: 0.469.0(react@18.3.1)
@@ -1357,8 +1354,8 @@ importers:
         specifier: ^2.3.0
         version: 2.3.0(@popperjs/core@2.11.8)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       tailwind-merge:
-        specifier: ^2.0.0
-        version: 2.6.0
+        specifier: 3.4.0
+        version: 3.4.0
       use-font-face-observer:
         specifier: ^1.2.2
         version: 1.3.0(react@18.3.1)
@@ -1374,34 +1371,34 @@ importers:
         version: link:../typescript-config
       '@storybook/addon-essentials':
         specifier: ^8.1.1
-        version: 8.6.14(@types/react@18.3.11)(storybook@8.6.14(prettier@3.7.4))
+        version: 8.6.14(@types/react@18.3.11)(storybook@9.1.19(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3)))
       '@storybook/addon-interactions':
         specifier: ^8.1.1
-        version: 8.6.14(storybook@8.6.14(prettier@3.7.4))
+        version: 8.6.14(storybook@9.1.19(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3)))
       '@storybook/addon-links':
         specifier: ^8.1.1
-        version: 8.6.14(react@18.3.1)(storybook@8.6.14(prettier@3.7.4))
+        version: 8.6.14(react@18.3.1)(storybook@9.1.19(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3)))
       '@storybook/addon-onboarding':
         specifier: ^8.1.1
-        version: 8.6.14(storybook@8.6.14(prettier@3.7.4))
+        version: 8.6.14(storybook@9.1.19(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3)))
       '@storybook/addon-styling-webpack':
         specifier: ^1.0.0
-        version: 1.0.1(storybook@8.6.14(prettier@3.7.4))(webpack@5.101.3(@swc/core@1.13.5(@swc/helpers@0.5.17))(esbuild@0.25.0))
+        version: 1.0.1(storybook@9.1.19(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3)))(webpack@5.104.1(@swc/core@1.13.5(@swc/helpers@0.5.17)))
       '@storybook/addon-webpack5-compiler-swc':
         specifier: ^1.0.2
-        version: 1.0.6(@swc/helpers@0.5.17)(webpack@5.101.3(@swc/core@1.13.5(@swc/helpers@0.5.17))(esbuild@0.25.0))
+        version: 1.0.6(@swc/helpers@0.5.17)(webpack@5.104.1(@swc/core@1.13.5(@swc/helpers@0.5.17)))
       '@storybook/blocks':
         specifier: ^8.1.1
-        version: 8.6.14(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.6.14(prettier@3.7.4))
+        version: 8.6.14(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@9.1.19(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3)))
       '@storybook/react':
         specifier: ^8.1.1
-        version: 8.6.14(@storybook/test@8.6.14(storybook@8.6.14(prettier@3.7.4)))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.6.14(prettier@3.7.4))(typescript@5.8.3)
+        version: 8.6.14(@storybook/test@8.6.14(storybook@9.1.19(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3))))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@9.1.19(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3)))(typescript@5.8.3)
       '@storybook/react-webpack5':
         specifier: ^8.1.1
-        version: 8.6.14(@storybook/test@8.6.14(storybook@8.6.14(prettier@3.7.4)))(@swc/core@1.13.5(@swc/helpers@0.5.17))(esbuild@0.25.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.6.14(prettier@3.7.4))(typescript@5.8.3)
+        version: 8.6.14(@storybook/test@8.6.14(storybook@9.1.19(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3))))(@swc/core@1.13.5(@swc/helpers@0.5.17))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@9.1.19(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3)))(typescript@5.8.3)
       '@storybook/test':
         specifier: ^8.1.1
-        version: 8.6.14(storybook@8.6.14(prettier@3.7.4))
+        version: 8.6.14(storybook@9.1.19(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3)))
       '@types/lodash-es':
         specifier: 'catalog:'
         version: 4.17.12
@@ -1422,16 +1419,16 @@ importers:
         version: 10.4.21(postcss@8.5.6)
       postcss-cli:
         specifier: ^11.0.0
-        version: 11.0.1(jiti@2.5.1)(postcss@8.5.6)
+        version: 11.0.1(jiti@2.6.1)(postcss@8.5.6)
       postcss-nested:
         specifier: ^6.0.1
         version: 6.2.0(postcss@8.5.6)
       storybook:
-        specifier: ^8.1.1
-        version: 8.6.14(prettier@3.7.4)
+        specifier: 9.1.19
+        version: 9.1.19(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3))
       tsdown:
         specifier: 'catalog:'
-        version: 0.16.0(typescript@5.8.3)
+        version: 0.16.0(typescript@5.8.3)(unrun@0.2.34)
       typescript:
         specifier: 5.8.3
         version: 5.8.3
@@ -1444,6 +1441,9 @@ importers:
       '@plane/types':
         specifier: workspace:*
         version: link:../types
+      chroma-js:
+        specifier: ^3.2.0
+        version: 3.2.0
       clsx:
         specifier: ^2.1.1
         version: 2.1.1
@@ -1457,8 +1457,8 @@ importers:
         specifier: ^10.1.2
         version: 10.1.2
       lodash-es:
-        specifier: 'catalog:'
-        version: 4.17.21
+        specifier: 4.18.0
+        version: 4.18.0
       lucide-react:
         specifier: 'catalog:'
         version: 0.469.0(react@18.3.1)
@@ -1484,8 +1484,8 @@ importers:
         specifier: 2.17.0
         version: 2.17.0
       tailwind-merge:
-        specifier: ^2.5.5
-        version: 2.6.0
+        specifier: 3.4.0
+        version: 3.4.0
       unified:
         specifier: ^11.0.5
         version: 11.0.5
@@ -1496,6 +1496,9 @@ importers:
       '@plane/typescript-config':
         specifier: workspace:*
         version: link:../typescript-config
+      '@types/chroma-js':
+        specifier: ^3.1.2
+        version: 3.1.2
       '@types/hast':
         specifier: ^3.0.4
         version: 3.0.4
@@ -1516,7 +1519,7 @@ importers:
         version: 2.16.0
       tsdown:
         specifier: 'catalog:'
-        version: 0.16.0(typescript@5.8.3)
+        version: 0.16.0(typescript@5.8.3)(unrun@0.2.34)
       typescript:
         specifier: 5.8.3
         version: 5.8.3
@@ -1530,16 +1533,6 @@ packages:
     resolution: {integrity: sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==}
     engines: {node: '>=10'}
 
-  '@ampproject/remapping@2.3.0':
-    resolution: {integrity: sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==}
-    engines: {node: '>=6.0.0'}
-
-  '@apm-js-collab/code-transformer@0.8.2':
-    resolution: {integrity: sha512-YRjJjNq5KFSjDUoqu5pFUWrrsvGOxl6c3bu+uMFc9HNNptZ2rNU/TI2nLw4jnhQNtka972Ee2m3uqbvDQtPeCA==}
-
-  '@apm-js-collab/tracing-hooks@0.3.1':
-    resolution: {integrity: sha512-Vu1CbmPURlN5fTboVuKMoJjbO5qcq9fA5YXpskx3dXe/zTBvjODFoerw+69rVBlRLrJpwPqSDqEuJDEKIrTldw==}
-
   '@asamuzakjp/css-color@3.2.0':
     resolution: {integrity: sha512-K1A6z8tS3XsmCMM86xoWdn7Fkdn9m6RSVtocUrJYIwZnFVkng/PvkEoWtOWmP+Scc6saYWHWZYbndEEXxl24jw==}
 
@@ -1560,18 +1553,10 @@ packages:
     resolution: {integrity: sha512-YsmSKC29MJwf0gF8Rjjrg5LQCmyh+j/nD8/eP7f+BeoQTKYqs9RoWbjGOdy0+1Ekr68RJZMUOPVQaQisnIo4Rw==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/core@7.28.3':
-    resolution: {integrity: sha512-yDBHV9kQNcr2/sUr9jghVyz9C3Y5G2zUM2H2lo+9mKv4sFgbA8s8Z9t8D1jiTkGoO/NoIfKMyKWr4s6CN23ZwQ==}
-    engines: {node: '>=6.9.0'}
-
   '@babel/core@7.28.4':
     resolution: {integrity: sha512-2BCOP7TN8M+gVDj7/ht3hsaO/B/n5oDbiAyyvnRlNOs+u1o+JWNYTQrmpuNp1/Wq2gcFrI01JAW+paEKDMx/CA==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/generator@7.28.3':
-    resolution: {integrity: sha512-3lSpxGgvnmZznmBkCRnVREPUFJv2wrv9iAoFDvADJc0ypmdOxdUtcLeBgBJ6zE0PMeTKnxeQzyk0xTBq4Ep7zw==}
-    engines: {node: '>=6.9.0'}
-
   '@babel/generator@7.28.5':
     resolution: {integrity: sha512-3EwLFhZ38J4VyIP6WNtt2kUdW9dokXA9Cr4IVIFHuCpZ3H8/YFOl5JjZHisrn1fATPBmKKqXzDFvh9fUwHz6CQ==}
     engines: {node: '>=6.9.0'}
@@ -1630,10 +1615,6 @@ packages:
     resolution: {integrity: sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helper-validator-identifier@7.27.1':
-    resolution: {integrity: sha512-D2hP9eA+Sqx1kBZgzxZh0y1trbuU+JoDkiEwqhQ36nodYqJwyEIhPSdMNd7lOm/4io72luTPWH20Yda0xOuUow==}
-    engines: {node: '>=6.9.0'}
-
   '@babel/helper-validator-identifier@7.28.5':
     resolution: {integrity: sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==}
     engines: {node: '>=6.9.0'}
@@ -1646,16 +1627,6 @@ packages:
     resolution: {integrity: sha512-UPYc3SauzZ3JGgj87GgZ89JVdC5dj0AoetR5Bw6wj4niittNyFh6+eOGonYvJ1ao6B8lEa3Q3klS7ADZ53bc5g==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/parser@7.28.3':
-    resolution: {integrity: sha512-7+Ey1mAgYqFAx2h0RuoxcQT5+MlG3GTV0TQrgr7/ZliKsm/MNDxVVutlWaziMq7wJNAz8MTqz55XLpWvva6StA==}
-    engines: {node: '>=6.0.0'}
-    hasBin: true
-
-  '@babel/parser@7.28.4':
-    resolution: {integrity: sha512-yZbBqeM6TkpP9du/I2pUZnJsRMGGvOuIrhjzC1AwHwW+6he4mni6Bp/m8ijn0iOuZuPI2BfkCoSRunpyjnrQKg==}
-    engines: {node: '>=6.0.0'}
-    hasBin: true
-
   '@babel/parser@7.28.5':
     resolution: {integrity: sha512-KKBU1VGYR7ORr3At5HAtUQ+TV3SzRCXmA/8OdDZiLDBIZxVyzXuztPjfLd3BV1PRAQGCMWWSHYhL0F8d5uHBDQ==}
     engines: {node: '>=6.0.0'}
@@ -1747,22 +1718,10 @@ packages:
     resolution: {integrity: sha512-LPDZ85aEJyYSd18/DkjNh4/y1ntkE5KwUHWTiqgRxruuZL2F1yuHligVHLvcHY2vMHXttKFpJn6LwfI7cw7ODw==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/traverse@7.28.3':
-    resolution: {integrity: sha512-7w4kZYHneL3A6NP2nxzHvT3HCZ7puDZZjFMqDpBPECub79sTtSO5CGXDkKrTQq8ksAwfD/XI2MRFX23njdDaIQ==}
-    engines: {node: '>=6.9.0'}
-
   '@babel/traverse@7.28.4':
     resolution: {integrity: sha512-YEzuboP2qvQavAcjgQNVgsvHIDv6ZpwXvcvjmyySP2DIMuByS/6ioU5G9pYrWHM6T2YDfc7xga9iNzYOs12CFQ==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/types@7.28.2':
-    resolution: {integrity: sha512-ruv7Ae4J5dUYULmeXw1gmb7rYRz57OWCPM57pHojnLq/3Z1CK2lNSLTCVjxVk1F/TZHwOZZrOWi0ur95BbLxNQ==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/types@7.28.4':
-    resolution: {integrity: sha512-bkFqkLhh3pMBUQQkpVgWDWq/lqzc2678eUyDlTBhRqhCHFguYYGM0Efga7tYk4TogG/3x0EEl66/OQ+WGbWB/Q==}
-    engines: {node: '>=6.9.0'}
-
   '@babel/types@7.28.5':
     resolution: {integrity: sha512-qQ5m48eI/MFLQ5PxQj4PFaprjyCTLI37ElWMmNs0K8Lk3dVeOdNpB3ks8jc7yM5CDmVC73eMVk/trk3fgmrUpA==}
     engines: {node: '>=6.9.0'}
@@ -1770,6 +1729,7 @@ packages:
   '@base-ui-components/react@1.0.0-beta.3':
     resolution: {integrity: sha512-4sAq6zmDA9ixV2HRjjeM1+tSEw5R6nvGjXUQmFoQnC3DZLEUdwO94gWDmUDdpoDuChn27jdbaJs9F0Ih4w2UAA==}
     engines: {node: '>=14.0.0'}
+    deprecated: Package was renamed to @base-ui/react
     peerDependencies:
       '@types/react': ^17 || ^18 || ^19
       react: ^17 || ^18 || ^19
@@ -1780,6 +1740,7 @@ packages:
 
   '@base-ui-components/utils@0.1.1':
     resolution: {integrity: sha512-HWXZA8upEKgrdL1rQqxWu1H+2tB2cXzY2jCxvgnpUv3eoWN2jldhXxMZnXIjZF7jahGxSWXfSIM/qskiTWFFxA==}
+    deprecated: Package was renamed to @base-ui/utils
     peerDependencies:
       '@types/react': ^17 || ^18 || ^19
       react: ^17 || ^18 || ^19
@@ -1788,6 +1749,10 @@ packages:
       '@types/react':
         optional: true
 
+  '@bcoe/v8-coverage@1.0.2':
+    resolution: {integrity: sha512-6zABk/ECA/QYSCQ1NGiVwwbQerUCZ+TQbp64Q3AgmfNvurHH0j8TtXa1qbShXA6qqkpAj4V5W8pP6mLe1mcMqA==}
+    engines: {node: '>=18'}
+
   '@blueprintjs/colors@4.2.1':
     resolution: {integrity: sha512-Cx7J2YnUuxn+fi+y5XtXnBB7+cFHN4xBrRkaAetp78i3VTCXjUk+d1omrOr8TqbRucUXTdrhbZOUHpzRLFcJpQ==}
 
@@ -1863,25 +1828,75 @@ packages:
   '@date-fns/tz@1.4.1':
     resolution: {integrity: sha512-P5LUNhtbj6YfI3iJjw5EL9eUAG6OitD0W3fWQcpQjDRc/QIsL0tRNuO1PcDvPccWL1fSTXXdE1ds+l95DV/OFA==}
 
-  '@dotenvx/dotenvx@1.51.1':
-    resolution: {integrity: sha512-fqcQxcxC4LOaUlW8IkyWw8x0yirlLUkbxohz9OnWvVWjf73J5yyw7jxWnkOJaUKXZotcGEScDox9MU6rSkcDgg==}
-    hasBin: true
-
-  '@ecies/ciphers@0.2.4':
-    resolution: {integrity: sha512-t+iX+Wf5nRKyNzk8dviW3Ikb/280+aEJAnw9YXvCp2tYGPSkMki+NRY+8aNLmVFv3eNtMdvViPNOPxS8SZNP+w==}
-    engines: {bun: '>=1', deno: '>=2', node: '>=16'}
+  '@effect/cluster@0.56.1':
+    resolution: {integrity: sha512-gnrsH6kfrUjn+82j/bw1IR4yFqJqV8tc7xZvrbJPRgzANycc6K1hu3LMg548uYbUkTzD8YYyqrSatMO1mkQpzw==}
     peerDependencies:
-      '@noble/ciphers': ^1.0.0
+      '@effect/platform': ^0.94.1
+      '@effect/rpc': ^0.73.0
+      '@effect/sql': ^0.49.0
+      '@effect/workflow': ^0.16.0
+      effect: ^3.19.14
 
-  '@emnapi/core@1.5.0':
-    resolution: {integrity: sha512-sbP8GzB1WDzacS8fgNPpHlp6C9VZe+SJP3F90W9rLemaQj2PzIuTEl1qDOYQf58YIpyjViI24y9aPWCjEzY2cg==}
+  '@effect/experimental@0.58.0':
+    resolution: {integrity: sha512-IEP9sapjF6rFy5TkoqDPc86st/fnqUfjT7Xa3pWJrFGr1hzaMXHo+mWsYOZS9LAOVKnpHuVziDK97EP5qsCHVA==}
+    peerDependencies:
+      '@effect/platform': ^0.94.0
+      effect: ^3.19.13
+      ioredis: ^5
+      lmdb: ^3
+    peerDependenciesMeta:
+      ioredis:
+        optional: true
+      lmdb:
+        optional: true
+
+  '@effect/platform-node-shared@0.57.0':
+    resolution: {integrity: sha512-QXuvmLNlABCQLcTl+lN1YPhKosR6KqArPYjC2reU0fb5lroCo3YRb/aGpXIgLthHzQL8cLU5XMGA3Cu5hKY2Tw==}
+    peerDependencies:
+      '@effect/cluster': ^0.56.0
+      '@effect/platform': ^0.94.0
+      '@effect/rpc': ^0.73.0
+      '@effect/sql': ^0.49.0
+      effect: ^3.19.13
+
+  '@effect/platform-node@0.104.0':
+    resolution: {integrity: sha512-2ZkUDDTxLD95ARdYIKBx4tdIIgqA3cwb3jlnVVBxmHUf0Pg5N2HdMuD0Q+CXQ7Q94FDwnLW3ZvaSfxDh6FvrNw==}
+    peerDependencies:
+      '@effect/cluster': ^0.56.0
+      '@effect/platform': ^0.94.0
+      '@effect/rpc': ^0.73.0
+      '@effect/sql': ^0.49.0
+      effect: ^3.19.13
+
+  '@effect/platform@0.94.1':
+    resolution: {integrity: sha512-SlL8OMTogHmMNnFLnPAHHo3ua1yrB1LNQOVQMiZsqYu9g3216xjr0gn5WoDgCxUyOdZcseegMjWJ7dhm/2vnfg==}
+    peerDependencies:
+      effect: ^3.19.14
+
+  '@effect/rpc@0.73.0':
+    resolution: {integrity: sha512-iMPf6tTriz8sK0l5x4koFId8Hz5nFptHYg8WqyjHGIIVLTpZxuiSqhmXZG7FnAs5N2n6uCEws4wWGcIgXNUrFg==}
+    peerDependencies:
+      '@effect/platform': ^0.94.0
+      effect: ^3.19.13
+
+  '@effect/sql@0.49.0':
+    resolution: {integrity: sha512-9UEKR+z+MrI/qMAmSvb/RiD9KlgIazjZUCDSpwNgm0lEK9/Q6ExEyfziiYFVCPiptp52cBw8uBHRic8hHnwqXA==}
+    peerDependencies:
+      '@effect/experimental': ^0.58.0
+      '@effect/platform': ^0.94.0
+      effect: ^3.19.13
+
+  '@effect/workflow@0.16.0':
+    resolution: {integrity: sha512-MiAdlxx3TixkgHdbw+Yf1Z3tHAAE0rOQga12kIydJqj05Fnod+W/I+kQGRMY/XWRg+QUsVxhmh1qTr7Ype6lrw==}
+    peerDependencies:
+      '@effect/experimental': ^0.58.0
+      '@effect/platform': ^0.94.0
+      '@effect/rpc': ^0.73.0
+      effect: ^3.19.13
 
   '@emnapi/core@1.7.1':
     resolution: {integrity: sha512-o1uhUASyo921r2XtHYOHy7gdkGLge8ghBEQHMWmyJFoXlpU58kIrhhN3w26lpQb6dspetweapMn2CSNwQ8I4wg==}
 
-  '@emnapi/runtime@1.5.0':
-    resolution: {integrity: sha512-97/BJ3iXHww3djw6hYIfErCZFee7qCtrneuLa20UXFCOTCfBM2cvQHjWJ2EG0s0MtdNwInarqCTz35i4wWXHsQ==}
-
   '@emnapi/runtime@1.7.1':
     resolution: {integrity: sha512-PVtJr5CmLwYAU9PZDMITZoR5iAOShYREoR45EyyLrbntV50mdePTgUn4AmOw90Ifcj+x2kRjdzr1HP3RrNiHGA==}
 
@@ -2044,44 +2059,6 @@ packages:
     cpu: [x64]
     os: [win32]
 
-  '@eslint-community/eslint-utils@4.9.0':
-    resolution: {integrity: sha512-ayVFHdtZ+hsq1t2Dy24wCmGXGe4q9Gu3smhLYALJrr473ZH27MsnSL+LKUlimp4BWJqMDMLmPpx/Q9R3OAlL4g==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-    peerDependencies:
-      eslint: ^6.0.0 || ^7.0.0 || >=8.0.0
-
-  '@eslint-community/regexpp@4.12.1':
-    resolution: {integrity: sha512-CCZCDJuduB9OUkFkY2IgppNZMi2lBQgD2qzwXkEia16cge2pijY/aXi96CJMquDMn3nJdlPV1A5KrJEXwfLNzQ==}
-    engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0}
-
-  '@eslint/config-array@0.21.1':
-    resolution: {integrity: sha512-aw1gNayWpdI/jSYVgzN5pL0cfzU02GT3NBpeT/DXbx1/1x7ZKxFPd9bwrzygx/qiwIQiJ1sw/zD8qY/kRvlGHA==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-
-  '@eslint/config-helpers@0.4.2':
-    resolution: {integrity: sha512-gBrxN88gOIf3R7ja5K9slwNayVcZgK6SOUORm2uBzTeIEfeVaIhOpCtTox3P6R7o2jLFwLFTLnC7kU/RGcYEgw==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-
-  '@eslint/core@0.17.0':
-    resolution: {integrity: sha512-yL/sLrpmtDaFEiUj1osRP4TI2MDz1AddJL+jZ7KSqvBuliN4xqYY54IfdN8qD8Toa6g1iloph1fxQNkjOxrrpQ==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-
-  '@eslint/eslintrc@3.3.1':
-    resolution: {integrity: sha512-gtF186CXhIl1p4pJNGZw8Yc6RlshoePRvE0X91oPGb3vZ8pM3qOS9W9NGPat9LziaBV7XrJWGylNQXkGcnM3IQ==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-
-  '@eslint/js@9.39.1':
-    resolution: {integrity: sha512-S26Stp4zCy88tH94QbBv3XCuzRQiZ9yXofEILmglYTh/Ug/a9/umqvgFtYBAo3Lp0nsI/5/qH1CCrbdK3AP1Tw==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-
-  '@eslint/object-schema@2.1.7':
-    resolution: {integrity: sha512-VtAOaymWVfZcmZbp6E2mympDIHvyjXs/12LqWYjVw6qjrfF+VK+fyG33kChz3nnK+SU5/NeHOqrTEHS8sXO3OA==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-
-  '@eslint/plugin-kit@0.4.1':
-    resolution: {integrity: sha512-43/qtrDUokr7LJqoF2c3+RInu/t4zfrpYdoSDfYyhg52rwLV6TnOvdG4fXm7IkSB3wErkcmJS9iEhjVtOSEjjA==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-
   '@figspec/components@1.0.3':
     resolution: {integrity: sha512-fBwHzJ4ouuOUJEi+yBZIrOy+0/fAjB3AeTcIHTT1PRxLz8P63xwC7R0EsIJXhScIcc+PljGmqbbVJCjLsnaGYA==}
 
@@ -2111,6 +2088,18 @@ packages:
   '@floating-ui/utils@0.2.10':
     resolution: {integrity: sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==}
 
+  '@fontsource-variable/inter@5.2.8':
+    resolution: {integrity: sha512-kOfP2D+ykbcX/P3IFnokOhVRNoTozo5/JxhAIVYLpea/UBmCQ/YWPBfWIDuBImXX/15KH+eKh4xpEUyS2sQQGQ==}
+
+  '@fontsource/ibm-plex-mono@5.2.7':
+    resolution: {integrity: sha512-MKAb8qV+CaiMQn2B0dIi1OV3565NYzp3WN5b4oT6LTkk+F0jR6j0ZN+5BKJiIhffDC3rtBULsYZE65+0018z9w==}
+
+  '@fontsource/inter@5.2.8':
+    resolution: {integrity: sha512-P6r5WnJoKiNVV+zvW2xM13gNdFhAEpQ9dQJHt3naLvfg+LkF2ldgSLiF4T41lf1SQCM9QmkqPTn4TH568IRagg==}
+
+  '@fontsource/material-symbols-rounded@5.2.30':
+    resolution: {integrity: sha512-svIEPUzsJGdBMr0PwLH3wKndh7ZNB8IVlyKZPKvbGEX0f36gpGPzE2EZiXppb4UJgDUnyjphWzjJ28StuK6NCg==}
+
   '@formatjs/ecma402-abstract@2.3.4':
     resolution: {integrity: sha512-qrycXDeaORzIqNhBOx0btnhpD1c+/qFIHAN9znofuMJX6QBwtbrmlpWfD4oiUUD2vJUOIYFA/gYtg2KAMGG7sA==}
 
@@ -2170,22 +2159,6 @@ packages:
       y-prosemirror: ^1.2.1
       yjs: ^13.6.8
 
-  '@humanfs/core@0.19.1':
-    resolution: {integrity: sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==}
-    engines: {node: '>=18.18.0'}
-
-  '@humanfs/node@0.16.7':
-    resolution: {integrity: sha512-/zUx+yOsIrG4Y43Eh2peDeKCxlRt/gET6aHfaKpuq267qXdYDFViVHfMaLyygZOnl0kGWxFIgsBy8QFuTLUXEQ==}
-    engines: {node: '>=18.18.0'}
-
-  '@humanwhocodes/module-importer@1.0.1':
-    resolution: {integrity: sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==}
-    engines: {node: '>=12.22'}
-
-  '@humanwhocodes/retry@0.4.3':
-    resolution: {integrity: sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ==}
-    engines: {node: '>=18.18'}
-
   '@hypermod/utils@0.7.1':
     resolution: {integrity: sha512-bo8A75w3Xd3vbOin4BPNEDaIyL0ghw/NmWgJXpugx3mnNzPezwLnNeT5/qD3j6xpbKLfIlmYhxFLFsE+xiZ/zw==}
     engines: {node: '>=20.17'}
@@ -2201,20 +2174,145 @@ packages:
     peerDependencies:
       react: '*'
 
-  '@intercom/messenger-js-sdk@0.0.12':
-    resolution: {integrity: sha512-xoUGlKLD8nIcZaH7AesR/LfwXH4QQUdPZMV4sApK/zvVFBgAY/A9IWp1ey/jUcp+776ejtZeEqreJZxG4LdEuw==}
+  '@img/sharp-darwin-arm64@0.34.3':
+    resolution: {integrity: sha512-ryFMfvxxpQRsgZJqBd4wsttYQbCxsJksrv9Lw/v798JcQ8+w84mBWuXwl+TT0WJ/WrYOLaYpwQXi3sA9nTIaIg==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@img/sharp-darwin-x64@0.34.3':
+    resolution: {integrity: sha512-yHpJYynROAj12TA6qil58hmPmAwxKKC7reUqtGLzsOHfP7/rniNGTL8tjWX6L3CTV4+5P4ypcS7Pp+7OB+8ihA==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [x64]
+    os: [darwin]
+
+  '@img/sharp-libvips-darwin-arm64@1.2.0':
+    resolution: {integrity: sha512-sBZmpwmxqwlqG9ueWFXtockhsxefaV6O84BMOrhtg/YqbTaRdqDE7hxraVE3y6gVM4eExmfzW4a8el9ArLeEiQ==}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@img/sharp-libvips-darwin-x64@1.2.0':
+    resolution: {integrity: sha512-M64XVuL94OgiNHa5/m2YvEQI5q2cl9d/wk0qFTDVXcYzi43lxuiFTftMR1tOnFQovVXNZJ5TURSDK2pNe9Yzqg==}
+    cpu: [x64]
+    os: [darwin]
+
+  '@img/sharp-libvips-linux-arm64@1.2.0':
+    resolution: {integrity: sha512-RXwd0CgG+uPRX5YYrkzKyalt2OJYRiJQ8ED/fi1tq9WQW2jsQIn0tqrlR5l5dr/rjqq6AHAxURhj2DVjyQWSOA==}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  '@img/sharp-libvips-linux-arm@1.2.0':
+    resolution: {integrity: sha512-mWd2uWvDtL/nvIzThLq3fr2nnGfyr/XMXlq8ZJ9WMR6PXijHlC3ksp0IpuhK6bougvQrchUAfzRLnbsen0Cqvw==}
+    cpu: [arm]
+    os: [linux]
+    libc: [glibc]
+
+  '@img/sharp-libvips-linux-ppc64@1.2.0':
+    resolution: {integrity: sha512-Xod/7KaDDHkYu2phxxfeEPXfVXFKx70EAFZ0qyUdOjCcxbjqyJOEUpDe6RIyaunGxT34Anf9ue/wuWOqBW2WcQ==}
+    cpu: [ppc64]
+    os: [linux]
+    libc: [glibc]
+
+  '@img/sharp-libvips-linux-s390x@1.2.0':
+    resolution: {integrity: sha512-eMKfzDxLGT8mnmPJTNMcjfO33fLiTDsrMlUVcp6b96ETbnJmd4uvZxVJSKPQfS+odwfVaGifhsB07J1LynFehw==}
+    cpu: [s390x]
+    os: [linux]
+    libc: [glibc]
+
+  '@img/sharp-libvips-linux-x64@1.2.0':
+    resolution: {integrity: sha512-ZW3FPWIc7K1sH9E3nxIGB3y3dZkpJlMnkk7z5tu1nSkBoCgw2nSRTFHI5pB/3CQaJM0pdzMF3paf9ckKMSE9Tg==}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  '@img/sharp-libvips-linuxmusl-arm64@1.2.0':
+    resolution: {integrity: sha512-UG+LqQJbf5VJ8NWJ5Z3tdIe/HXjuIdo4JeVNADXBFuG7z9zjoegpzzGIyV5zQKi4zaJjnAd2+g2nna8TZvuW9Q==}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  '@img/sharp-libvips-linuxmusl-x64@1.2.0':
+    resolution: {integrity: sha512-SRYOLR7CXPgNze8akZwjoGBoN1ThNZoqpOgfnOxmWsklTGVfJiGJoC/Lod7aNMGA1jSsKWM1+HRX43OP6p9+6Q==}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  '@img/sharp-linux-arm64@0.34.3':
+    resolution: {integrity: sha512-QdrKe3EvQrqwkDrtuTIjI0bu6YEJHTgEeqdzI3uWJOH6G1O8Nl1iEeVYRGdj1h5I21CqxSvQp1Yv7xeU3ZewbA==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  '@img/sharp-linux-arm@0.34.3':
+    resolution: {integrity: sha512-oBK9l+h6KBN0i3dC8rYntLiVfW8D8wH+NPNT3O/WBHeW0OQWCjfWksLUaPidsrDKpJgXp3G3/hkmhptAW0I3+A==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [arm]
+    os: [linux]
+    libc: [glibc]
+
+  '@img/sharp-linux-ppc64@0.34.3':
+    resolution: {integrity: sha512-GLtbLQMCNC5nxuImPR2+RgrviwKwVql28FWZIW1zWruy6zLgA5/x2ZXk3mxj58X/tszVF69KK0Is83V8YgWhLA==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [ppc64]
+    os: [linux]
+    libc: [glibc]
+
+  '@img/sharp-linux-s390x@0.34.3':
+    resolution: {integrity: sha512-3gahT+A6c4cdc2edhsLHmIOXMb17ltffJlxR0aC2VPZfwKoTGZec6u5GrFgdR7ciJSsHT27BD3TIuGcuRT0KmQ==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [s390x]
+    os: [linux]
+    libc: [glibc]
+
+  '@img/sharp-linux-x64@0.34.3':
+    resolution: {integrity: sha512-8kYso8d806ypnSq3/Ly0QEw90V5ZoHh10yH0HnrzOCr6DKAPI6QVHvwleqMkVQ0m+fc7EH8ah0BB0QPuWY6zJQ==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  '@img/sharp-linuxmusl-arm64@0.34.3':
+    resolution: {integrity: sha512-vAjbHDlr4izEiXM1OTggpCcPg9tn4YriK5vAjowJsHwdBIdx0fYRsURkxLG2RLm9gyBq66gwtWI8Gx0/ov+JKQ==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  '@img/sharp-linuxmusl-x64@0.34.3':
+    resolution: {integrity: sha512-gCWUn9547K5bwvOn9l5XGAEjVTTRji4aPTqLzGXHvIr6bIDZKNTA34seMPgM0WmSf+RYBH411VavCejp3PkOeQ==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  '@img/sharp-wasm32@0.34.3':
+    resolution: {integrity: sha512-+CyRcpagHMGteySaWos8IbnXcHgfDn7pO2fiC2slJxvNq9gDipYBN42/RagzctVRKgxATmfqOSulgZv5e1RdMg==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [wasm32]
+
+  '@img/sharp-win32-arm64@0.34.3':
+    resolution: {integrity: sha512-MjnHPnbqMXNC2UgeLJtX4XqoVHHlZNd+nPt1kRPmj63wURegwBhZlApELdtxM2OIZDRv/DFtLcNhVbd1z8GYXQ==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [arm64]
+    os: [win32]
+
+  '@img/sharp-win32-ia32@0.34.3':
+    resolution: {integrity: sha512-xuCdhH44WxuXgOM714hn4amodJMZl3OEvf0GVTm0BEyMeA2to+8HEdRPShH0SLYptJY1uBw+SCFP9WVQi1Q/cw==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [ia32]
+    os: [win32]
+
+  '@img/sharp-win32-x64@0.34.3':
+    resolution: {integrity: sha512-OWwz05d++TxzLEv4VnsTz5CmZ6mI6S05sfQGEMrNrQcOEERbX46332IvE7pO/EUiw7jUrrS40z/M7kPyjfl04g==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [x64]
+    os: [win32]
 
   '@ioredis/commands@1.3.0':
     resolution: {integrity: sha512-M/T6Zewn7sDaBQEqIZ8Rb+i9y8qfGmq+5SDFSf9sA2lUZTmdDLVdOiQaeDp+Q4wElZ9HG1GAX5KhDaidp6LQsQ==}
 
-  '@isaacs/balanced-match@4.0.1':
-    resolution: {integrity: sha512-yzMTt9lEb8Gv7zRioUilSglI0c0smZ9k5D65677DLWLtWJaXIS3CqcGyUFByYKlnUj6TkjLVs54fBl6+TiGQDQ==}
-    engines: {node: 20 || >=22}
-
-  '@isaacs/brace-expansion@5.0.0':
-    resolution: {integrity: sha512-ZT55BDLV0yv0RBm2czMiZ+SqCGO7AvmOM3G/w2xhVPH+te0aKgFjmBvGlL1dH+ql2tgGO3MVrbb3jCKyvpgnxA==}
-    engines: {node: 20 || >=22}
-
   '@isaacs/cliui@8.0.2':
     resolution: {integrity: sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==}
     engines: {node: '>=12'}
@@ -2223,7 +2321,7 @@ packages:
     resolution: {integrity: sha512-J4BaTocTOYFkMHIra1JDWrMWpNmBl4EkplIwHEsV8aeUOtdWjwSnln9U7twjMFTAEB7mptNtSKyVi1Y2W9sDJw==}
     peerDependencies:
       typescript: 5.8.3
-      vite: 7.1.11
+      vite: 7.3.1
     peerDependenciesMeta:
       typescript:
         optional: true
@@ -2244,9 +2342,6 @@ packages:
   '@jridgewell/sourcemap-codec@1.5.5':
     resolution: {integrity: sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==}
 
-  '@jridgewell/trace-mapping@0.3.30':
-    resolution: {integrity: sha512-GQ7Nw5G2lTu/BtHTKfXhKHok2WGetd4XYcVKGx00SjAk8GMwgJM3zr6zORiPGuOE+/vkc90KtTosSSvaCjKb2Q==}
-
   '@jridgewell/trace-mapping@0.3.31':
     resolution: {integrity: sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==}
 
@@ -2274,351 +2369,455 @@ packages:
   '@mjackson/node-fetch-server@0.2.0':
     resolution: {integrity: sha512-EMlH1e30yzmTpGLQjlFmaDAjyOeZhng1/XCd7DExR8PNAnG/G1tyruZxEoUe11ClnwGhGrtsdnyyUx1frSzjng==}
 
-  '@napi-rs/wasm-runtime@0.2.12':
-    resolution: {integrity: sha512-ZVWUcfwY4E/yPitQJl481FjFo3K22D6qF0DuFH6Y/nbnE11GY5uguDxZMGXPQ8WQ0128MXQD7TnfHyK4oWoIJQ==}
+  '@msgpackr-extract/msgpackr-extract-darwin-arm64@3.0.3':
+    resolution: {integrity: sha512-QZHtlVgbAdy2zAqNA9Gu1UpIuI8Xvsd1v8ic6B2pZmeFnFcMWiPLfWXh7TVw4eGEZ/C9TH281KwhVoeQUKbyjw==}
+    cpu: [arm64]
+    os: [darwin]
 
-  '@napi-rs/wasm-runtime@1.1.0':
-    resolution: {integrity: sha512-Fq6DJW+Bb5jaWE69/qOE0D1TUN9+6uWhCeZpdnSBk14pjLcCWR7Q8n49PTSPHazM37JqrsdpEthXy2xn6jWWiA==}
+  '@msgpackr-extract/msgpackr-extract-darwin-x64@3.0.3':
+    resolution: {integrity: sha512-mdzd3AVzYKuUmiWOQ8GNhl64/IoFGol569zNRdkLReh6LRLHOXxU4U8eq0JwaD8iFHdVGqSy4IjFL4reoWCDFw==}
+    cpu: [x64]
+    os: [darwin]
 
-  '@noble/ciphers@1.3.0':
-    resolution: {integrity: sha512-2I0gnIVPtfnMw9ee9h1dJG7tp81+8Ob3OJb3Mv37rx5L40/b0i7djjCVvGOVqc9AEIQyvyu1i6ypKdFw8R8gQw==}
-    engines: {node: ^14.21.3 || >=16}
+  '@msgpackr-extract/msgpackr-extract-linux-arm64@3.0.3':
+    resolution: {integrity: sha512-YxQL+ax0XqBJDZiKimS2XQaf+2wDGVa1enVRGzEvLLVFeqa5kx2bWbtcSXgsxjQB7nRqqIGFIcLteF/sHeVtQg==}
+    cpu: [arm64]
+    os: [linux]
 
-  '@noble/curves@1.9.7':
-    resolution: {integrity: sha512-gbKGcRUYIjA3/zCCNaWDciTMFI0dCkvou3TL8Zmy5Nc7sJ47a0jtOeZoTaMxkuqRo9cRhjOdZJXegxYE5FN/xw==}
-    engines: {node: ^14.21.3 || >=16}
+  '@msgpackr-extract/msgpackr-extract-linux-arm@3.0.3':
+    resolution: {integrity: sha512-fg0uy/dG/nZEXfYilKoRe7yALaNmHoYeIoJuJ7KJ+YyU2bvY8vPv27f7UKhGRpY6euFYqEVhxCFZgAUNQBM3nw==}
+    cpu: [arm]
+    os: [linux]
 
-  '@noble/hashes@1.8.0':
-    resolution: {integrity: sha512-jCs9ldd7NwzpgXDIf6P3+NrHh9/sD6CQdxHyjQI+h/6rDNo88ypBxxz45UDuZHz9r3tNz7N/VInSVoVdtXEI4A==}
-    engines: {node: ^14.21.3 || >=16}
+  '@msgpackr-extract/msgpackr-extract-linux-x64@3.0.3':
+    resolution: {integrity: sha512-cvwNfbP07pKUfq1uH+S6KJ7dT9K8WOE4ZiAcsrSes+UY55E/0jLYc+vq+DO7jlmqRb5zAggExKm0H7O/CBaesg==}
+    cpu: [x64]
+    os: [linux]
 
-  '@nodelib/fs.scandir@2.1.5':
-    resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
-    engines: {node: '>= 8'}
+  '@msgpackr-extract/msgpackr-extract-win32-x64@3.0.3':
+    resolution: {integrity: sha512-x0fWaQtYp4E6sktbsdAqnehxDgEc/VwM7uLsRCYWaiGu0ykYdZPiS8zCWdnjHwyiumousxfBm4SO31eXqwEZhQ==}
+    cpu: [x64]
+    os: [win32]
 
-  '@nodelib/fs.stat@2.0.5':
-    resolution: {integrity: sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==}
-    engines: {node: '>= 8'}
+  '@napi-rs/canvas-android-arm64@0.1.80':
+    resolution: {integrity: sha512-sk7xhN/MoXeuExlggf91pNziBxLPVUqF2CAVnB57KLG/pz7+U5TKG8eXdc3pm0d7Od0WreB6ZKLj37sX9muGOQ==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [android]
 
-  '@nodelib/fs.walk@1.2.8':
-    resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==}
-    engines: {node: '>= 8'}
+  '@napi-rs/canvas-darwin-arm64@0.1.80':
+    resolution: {integrity: sha512-O64APRTXRUiAz0P8gErkfEr3lipLJgM6pjATwavZ22ebhjYl/SUbpgM0xcWPQBNMP1n29afAC/Us5PX1vg+JNQ==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [darwin]
 
-  '@npmcli/git@4.1.0':
-    resolution: {integrity: sha512-9hwoB3gStVfa0N31ymBmrX+GuDGdVA/QWShZVqE0HK2Af+7QGGrCTbZia/SW0ImUTjTne7SP91qxDmtXvDHRPQ==}
-    engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
+  '@napi-rs/canvas-darwin-x64@0.1.80':
+    resolution: {integrity: sha512-FqqSU7qFce0Cp3pwnTjVkKjjOtxMqRe6lmINxpIZYaZNnVI0H5FtsaraZJ36SiTHNjZlUB69/HhxNDT1Aaa9vA==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [darwin]
 
-  '@npmcli/package-json@4.0.1':
-    resolution: {integrity: sha512-lRCEGdHZomFsURroh522YvA/2cVb9oPIJrjHanCJZkiasz1BzcnLr3tBJhlV7S86MBJBuAQ33is2D60YitZL2Q==}
-    engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
+  '@napi-rs/canvas-linux-arm-gnueabihf@0.1.80':
+    resolution: {integrity: sha512-eyWz0ddBDQc7/JbAtY4OtZ5SpK8tR4JsCYEZjCE3dI8pqoWUC8oMwYSBGCYfsx2w47cQgQCgMVRVTFiiO38hHQ==}
+    engines: {node: '>= 10'}
+    cpu: [arm]
+    os: [linux]
 
-  '@npmcli/promise-spawn@6.0.2':
-    resolution: {integrity: sha512-gGq0NJkIGSwdbUt4yhdF8ZrmkGKVz9vAdVzpOfnom+V8PLSmSOVhZwbNvZZS1EYcJN5hzzKBxmmVVAInM6HQLg==}
-    engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
+  '@napi-rs/canvas-linux-arm64-gnu@0.1.80':
+    resolution: {integrity: sha512-qwA63t8A86bnxhuA/GwOkK3jvb+XTQaTiVML0vAWoHyoZYTjNs7BzoOONDgTnNtr8/yHrq64XXzUoLqDzU+Uuw==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
 
-  '@opentelemetry/api-logs@0.208.0':
-    resolution: {integrity: sha512-CjruKY9V6NMssL/T1kAFgzosF1v9o6oeN+aX5JB/C/xPNtmgIJqcXHG7fA82Ou1zCpWGl4lROQUKwUNE1pMCyg==}
-    engines: {node: '>=8.0.0'}
+  '@napi-rs/canvas-linux-arm64-musl@0.1.80':
+    resolution: {integrity: sha512-1XbCOz/ymhj24lFaIXtWnwv/6eFHXDrjP0jYkc6iHQ9q8oXKzUX1Lc6bu+wuGiLhGh2GS/2JlfORC5ZcXimRcg==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  '@napi-rs/canvas-linux-riscv64-gnu@0.1.80':
+    resolution: {integrity: sha512-XTzR125w5ZMs0lJcxRlS1K3P5RaZ9RmUsPtd1uGt+EfDyYMu4c6SEROYsxyatbbu/2+lPe7MPHOO/0a0x7L/gw==}
+    engines: {node: '>= 10'}
+    cpu: [riscv64]
+    os: [linux]
+    libc: [glibc]
+
+  '@napi-rs/canvas-linux-x64-gnu@0.1.80':
+    resolution: {integrity: sha512-BeXAmhKg1kX3UCrJsYbdQd3hIMDH/K6HnP/pG2LuITaXhXBiNdh//TVVVVCBbJzVQaV5gK/4ZOCMrQW9mvuTqA==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  '@napi-rs/canvas-linux-x64-musl@0.1.80':
+    resolution: {integrity: sha512-x0XvZWdHbkgdgucJsRxprX/4o4sEed7qo9rCQA9ugiS9qE2QvP0RIiEugtZhfLH3cyI+jIRFJHV4Fuz+1BHHMg==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  '@napi-rs/canvas-win32-x64-msvc@0.1.80':
+    resolution: {integrity: sha512-Z8jPsM6df5V8B1HrCHB05+bDiCxjE9QA//3YrkKIdVDEwn5RKaqOxCJDRJkl48cJbylcrJbW4HxZbTte8juuPg==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [win32]
+
+  '@napi-rs/canvas@0.1.80':
+    resolution: {integrity: sha512-DxuT1ClnIPts1kQx8FBmkk4BQDTfI5kIzywAaMjQSXfNnra5UFU9PwurXrl+Je3bJ6BGsp/zmshVVFbCmyI+ww==}
+    engines: {node: '>= 10'}
+
+  '@napi-rs/wasm-runtime@1.1.1':
+    resolution: {integrity: sha512-p64ah1M1ld8xjWv3qbvFwHiFVWrq1yFvV4f7w+mzaqiR4IlSgkqhcRdHwsGgomwzBH51sRY4NEowLxnaBjcW/A==}
 
   '@opentelemetry/api@1.9.0':
     resolution: {integrity: sha512-3giAOQvZiH5F9bMlMiv8+GSPMeqg0dbaeo58/0SlA9sxSqZhnUtxzX9/2FzyhS9sWQf5S0GJE0AKBrFqjpeYcg==}
     engines: {node: '>=8.0.0'}
 
-  '@opentelemetry/context-async-hooks@2.2.0':
-    resolution: {integrity: sha512-qRkLWiUEZNAmYapZ7KGS5C4OmBLcP/H2foXeOEaowYCR0wi89fHejrfYfbuLVCMLp/dWZXKvQusdbUEZjERfwQ==}
-    engines: {node: ^18.19.0 || >=20.6.0}
-    peerDependencies:
-      '@opentelemetry/api': '>=1.0.0 <1.10.0'
-
-  '@opentelemetry/core@2.2.0':
-    resolution: {integrity: sha512-FuabnnUm8LflnieVxs6eP7Z383hgQU4W1e3KJS6aOG3RxWxcHyBxH8fDMHNgu/gFx/M2jvTOW/4/PHhLz6bjWw==}
-    engines: {node: ^18.19.0 || >=20.6.0}
-    peerDependencies:
-      '@opentelemetry/api': '>=1.0.0 <1.10.0'
-
-  '@opentelemetry/instrumentation-amqplib@0.55.0':
-    resolution: {integrity: sha512-5ULoU8p+tWcQw5PDYZn8rySptGSLZHNX/7srqo2TioPnAAcvTy6sQFQXsNPrAnyRRtYGMetXVyZUy5OaX1+IfA==}
-    engines: {node: ^18.19.0 || >=20.6.0}
-    peerDependencies:
-      '@opentelemetry/api': ^1.3.0
-
-  '@opentelemetry/instrumentation-connect@0.52.0':
-    resolution: {integrity: sha512-GXPxfNB5szMbV3I9b7kNWSmQBoBzw7MT0ui6iU/p+NIzVx3a06Ri2cdQO7tG9EKb4aKSLmfX9Cw5cKxXqX6Ohg==}
-    engines: {node: ^18.19.0 || >=20.6.0}
-    peerDependencies:
-      '@opentelemetry/api': ^1.3.0
-
-  '@opentelemetry/instrumentation-dataloader@0.26.0':
-    resolution: {integrity: sha512-P2BgnFfTOarZ5OKPmYfbXfDFjQ4P9WkQ1Jji7yH5/WwB6Wm/knynAoA1rxbjWcDlYupFkyT0M1j6XLzDzy0aCA==}
-    engines: {node: ^18.19.0 || >=20.6.0}
-    peerDependencies:
-      '@opentelemetry/api': ^1.3.0
-
-  '@opentelemetry/instrumentation-express@0.57.0':
-    resolution: {integrity: sha512-HAdx/o58+8tSR5iW+ru4PHnEejyKrAy9fYFhlEI81o10nYxrGahnMAHWiSjhDC7UQSY3I4gjcPgSKQz4rm/asg==}
-    engines: {node: ^18.19.0 || >=20.6.0}
-    peerDependencies:
-      '@opentelemetry/api': ^1.3.0
-
-  '@opentelemetry/instrumentation-fs@0.28.0':
-    resolution: {integrity: sha512-FFvg8fq53RRXVBRHZViP+EMxMR03tqzEGpuq55lHNbVPyFklSVfQBN50syPhK5UYYwaStx0eyCtHtbRreusc5g==}
-    engines: {node: ^18.19.0 || >=20.6.0}
-    peerDependencies:
-      '@opentelemetry/api': ^1.3.0
-
-  '@opentelemetry/instrumentation-generic-pool@0.52.0':
-    resolution: {integrity: sha512-ISkNcv5CM2IwvsMVL31Tl61/p2Zm2I2NAsYq5SSBgOsOndT0TjnptjufYVScCnD5ZLD1tpl4T3GEYULLYOdIdQ==}
-    engines: {node: ^18.19.0 || >=20.6.0}
-    peerDependencies:
-      '@opentelemetry/api': ^1.3.0
-
-  '@opentelemetry/instrumentation-graphql@0.56.0':
-    resolution: {integrity: sha512-IPvNk8AFoVzTAM0Z399t34VDmGDgwT6rIqCUug8P9oAGerl2/PEIYMPOl/rerPGu+q8gSWdmbFSjgg7PDVRd3Q==}
-    engines: {node: ^18.19.0 || >=20.6.0}
-    peerDependencies:
-      '@opentelemetry/api': ^1.3.0
-
-  '@opentelemetry/instrumentation-hapi@0.55.0':
-    resolution: {integrity: sha512-prqAkRf9e4eEpy4G3UcR32prKE8NLNlA90TdEU1UsghOTg0jUvs40Jz8LQWFEs5NbLbXHYGzB4CYVkCI8eWEVQ==}
-    engines: {node: ^18.19.0 || >=20.6.0}
-    peerDependencies:
-      '@opentelemetry/api': ^1.3.0
-
-  '@opentelemetry/instrumentation-http@0.208.0':
-    resolution: {integrity: sha512-rhmK46DRWEbQQB77RxmVXGyjs6783crXCnFjYQj+4tDH/Kpv9Rbg3h2kaNyp5Vz2emF1f9HOQQvZoHzwMWOFZQ==}
-    engines: {node: ^18.19.0 || >=20.6.0}
-    peerDependencies:
-      '@opentelemetry/api': ^1.3.0
-
-  '@opentelemetry/instrumentation-ioredis@0.56.0':
-    resolution: {integrity: sha512-XSWeqsd3rKSsT3WBz/JKJDcZD4QYElZEa0xVdX8f9dh4h4QgXhKRLorVsVkK3uXFbC2sZKAS2Ds+YolGwD83Dg==}
-    engines: {node: ^18.19.0 || >=20.6.0}
-    peerDependencies:
-      '@opentelemetry/api': ^1.3.0
-
-  '@opentelemetry/instrumentation-kafkajs@0.18.0':
-    resolution: {integrity: sha512-KCL/1HnZN5zkUMgPyOxfGjLjbXjpd4odDToy+7c+UsthIzVLFf99LnfIBE8YSSrYE4+uS7OwJMhvhg3tWjqMBg==}
-    engines: {node: ^18.19.0 || >=20.6.0}
-    peerDependencies:
-      '@opentelemetry/api': ^1.3.0
-
-  '@opentelemetry/instrumentation-knex@0.53.0':
-    resolution: {integrity: sha512-xngn5cH2mVXFmiT1XfQ1aHqq1m4xb5wvU6j9lSgLlihJ1bXzsO543cpDwjrZm2nMrlpddBf55w8+bfS4qDh60g==}
-    engines: {node: ^18.19.0 || >=20.6.0}
-    peerDependencies:
-      '@opentelemetry/api': ^1.3.0
-
-  '@opentelemetry/instrumentation-koa@0.57.0':
-    resolution: {integrity: sha512-3JS8PU/D5E3q295mwloU2v7c7/m+DyCqdu62BIzWt+3u9utjxC9QS7v6WmUNuoDN3RM+Q+D1Gpj13ERo+m7CGg==}
-    engines: {node: ^18.19.0 || >=20.6.0}
-    peerDependencies:
-      '@opentelemetry/api': ^1.9.0
-
-  '@opentelemetry/instrumentation-lru-memoizer@0.53.0':
-    resolution: {integrity: sha512-LDwWz5cPkWWr0HBIuZUjslyvijljTwmwiItpMTHujaULZCxcYE9eU44Qf/pbVC8TulT0IhZi+RoGvHKXvNhysw==}
-    engines: {node: ^18.19.0 || >=20.6.0}
-    peerDependencies:
-      '@opentelemetry/api': ^1.3.0
-
-  '@opentelemetry/instrumentation-mongodb@0.61.0':
-    resolution: {integrity: sha512-OV3i2DSoY5M/pmLk+68xr5RvkHU8DRB3DKMzYJdwDdcxeLs62tLbkmRyqJZsYf3Ht7j11rq35pHOWLuLzXL7pQ==}
-    engines: {node: ^18.19.0 || >=20.6.0}
-    peerDependencies:
-      '@opentelemetry/api': ^1.3.0
-
-  '@opentelemetry/instrumentation-mongoose@0.55.0':
-    resolution: {integrity: sha512-5afj0HfF6aM6Nlqgu6/PPHFk8QBfIe3+zF9FGpX76jWPS0/dujoEYn82/XcLSaW5LPUDW8sni+YeK0vTBNri+w==}
-    engines: {node: ^18.19.0 || >=20.6.0}
-    peerDependencies:
-      '@opentelemetry/api': ^1.3.0
-
-  '@opentelemetry/instrumentation-mysql2@0.55.0':
-    resolution: {integrity: sha512-0cs8whQG55aIi20gnK8B7cco6OK6N+enNhW0p5284MvqJ5EPi+I1YlWsWXgzv/V2HFirEejkvKiI4Iw21OqDWg==}
-    engines: {node: ^18.19.0 || >=20.6.0}
-    peerDependencies:
-      '@opentelemetry/api': ^1.3.0
-
-  '@opentelemetry/instrumentation-mysql@0.54.0':
-    resolution: {integrity: sha512-bqC1YhnwAeWmRzy1/Xf9cDqxNG2d/JDkaxnqF5N6iJKN1eVWI+vg7NfDkf52/Nggp3tl1jcC++ptC61BD6738A==}
-    engines: {node: ^18.19.0 || >=20.6.0}
-    peerDependencies:
-      '@opentelemetry/api': ^1.3.0
-
-  '@opentelemetry/instrumentation-pg@0.61.0':
-    resolution: {integrity: sha512-UeV7KeTnRSM7ECHa3YscoklhUtTQPs6V6qYpG283AB7xpnPGCUCUfECFT9jFg6/iZOQTt3FHkB1wGTJCNZEvPw==}
-    engines: {node: ^18.19.0 || >=20.6.0}
-    peerDependencies:
-      '@opentelemetry/api': ^1.3.0
-
-  '@opentelemetry/instrumentation-redis@0.57.0':
-    resolution: {integrity: sha512-bCxTHQFXzrU3eU1LZnOZQ3s5LURxQPDlU3/upBzlWY77qOI1GZuGofazj3jtzjctMJeBEJhNwIFEgRPBX1kp/Q==}
-    engines: {node: ^18.19.0 || >=20.6.0}
-    peerDependencies:
-      '@opentelemetry/api': ^1.3.0
-
-  '@opentelemetry/instrumentation-tedious@0.27.0':
-    resolution: {integrity: sha512-jRtyUJNZppPBjPae4ZjIQ2eqJbcRaRfJkr0lQLHFmOU/no5A6e9s1OHLd5XZyZoBJ/ymngZitanyRRA5cniseA==}
-    engines: {node: ^18.19.0 || >=20.6.0}
-    peerDependencies:
-      '@opentelemetry/api': ^1.3.0
-
-  '@opentelemetry/instrumentation-undici@0.19.0':
-    resolution: {integrity: sha512-Pst/RhR61A2OoZQZkn6OLpdVpXp6qn3Y92wXa6umfJe9rV640r4bc6SWvw4pPN6DiQqPu2c8gnSSZPDtC6JlpQ==}
-    engines: {node: ^18.19.0 || >=20.6.0}
-    peerDependencies:
-      '@opentelemetry/api': ^1.7.0
-
-  '@opentelemetry/instrumentation@0.208.0':
-    resolution: {integrity: sha512-Eju0L4qWcQS+oXxi6pgh7zvE2byogAkcsVv0OjHF/97iOz1N/aKE6etSGowYkie+YA1uo6DNwdSxaaNnLvcRlA==}
-    engines: {node: ^18.19.0 || >=20.6.0}
-    peerDependencies:
-      '@opentelemetry/api': ^1.3.0
-
-  '@opentelemetry/redis-common@0.38.2':
-    resolution: {integrity: sha512-1BCcU93iwSRZvDAgwUxC/DV4T/406SkMfxGqu5ojc3AvNI+I9GhV7v0J1HljsczuuhcnFLYqD5VmwVXfCGHzxA==}
-    engines: {node: ^18.19.0 || >=20.6.0}
-
-  '@opentelemetry/resources@2.2.0':
-    resolution: {integrity: sha512-1pNQf/JazQTMA0BiO5NINUzH0cbLbbl7mntLa4aJNmCCXSj0q03T5ZXXL0zw4G55TjdL9Tz32cznGClf+8zr5A==}
-    engines: {node: ^18.19.0 || >=20.6.0}
-    peerDependencies:
-      '@opentelemetry/api': '>=1.3.0 <1.10.0'
-
-  '@opentelemetry/sdk-trace-base@2.2.0':
-    resolution: {integrity: sha512-xWQgL0Bmctsalg6PaXExmzdedSp3gyKV8mQBwK/j9VGdCDu2fmXIb2gAehBKbkXCpJ4HPkgv3QfoJWRT4dHWbw==}
-    engines: {node: ^18.19.0 || >=20.6.0}
-    peerDependencies:
-      '@opentelemetry/api': '>=1.3.0 <1.10.0'
-
-  '@opentelemetry/semantic-conventions@1.37.0':
-    resolution: {integrity: sha512-JD6DerIKdJGmRp4jQyX5FlrQjA4tjOw1cvfsPAZXfOOEErMUHjPcPSICS+6WnM0nB0efSFARh0KAZss+bvExOA==}
-    engines: {node: '>=14'}
-
-  '@opentelemetry/sql-common@0.41.2':
-    resolution: {integrity: sha512-4mhWm3Z8z+i508zQJ7r6Xi7y4mmoJpdvH0fZPFRkWrdp5fq7hhZ2HhYokEOLkfqSMgPR4Z9EyB3DBkbKGOqZiQ==}
-    engines: {node: ^18.19.0 || >=20.6.0}
-    peerDependencies:
-      '@opentelemetry/api': ^1.1.0
-
-  '@oxc-parser/binding-android-arm64@0.99.0':
-    resolution: {integrity: sha512-V4jhmKXgQQdRnm73F+r3ZY4pUEsijQeSraFeaCGng7abSNJGs76X6l82wHnmjLGFAeY00LWtjcELs7ZmbJ9+lA==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [arm64]
-    os: [android]
-
-  '@oxc-parser/binding-darwin-arm64@0.99.0':
-    resolution: {integrity: sha512-Rp41nf9zD5FyLZciS9l1GfK8PhYqrD5kEGxyTOA2esTLeAy37rZxetG2E3xteEolAkeb2WDkVrlxPtibeAncMg==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [arm64]
-    os: [darwin]
-
-  '@oxc-parser/binding-darwin-x64@0.99.0':
-    resolution: {integrity: sha512-WVonp40fPPxo5Gs0POTI57iEFv485TvNKOHMwZRhigwZRhZY2accEAkYIhei9eswF4HN5B44Wybkz7Gd1Qr/5Q==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [x64]
-    os: [darwin]
-
-  '@oxc-parser/binding-freebsd-x64@0.99.0':
-    resolution: {integrity: sha512-H30bjOOttPmG54gAqu6+HzbLEzuNOYO2jZYrIq4At+NtLJwvNhXz28Hf5iEAFZIH/4hMpLkM4VN7uc+5UlNW3Q==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [x64]
-    os: [freebsd]
-
-  '@oxc-parser/binding-linux-arm-gnueabihf@0.99.0':
-    resolution: {integrity: sha512-0Z/Th0SYqzSRDPs6tk5lQdW0i73UCupnim3dgq2oW0//UdLonV/5wIZCArfKGC7w9y4h8TxgXpgtIyD1kKzzlQ==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [arm]
-    os: [linux]
-
-  '@oxc-parser/binding-linux-arm-musleabihf@0.99.0':
-    resolution: {integrity: sha512-xo0wqNd5bpbzQVNpAIFbHk1xa+SaS/FGBABCd942SRTnrpxl6GeDj/s1BFaGcTl8MlwlKVMwOcyKrw/2Kdfquw==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [arm]
-    os: [linux]
-
-  '@oxc-parser/binding-linux-arm64-gnu@0.99.0':
-    resolution: {integrity: sha512-u26I6LKoLTPTd4Fcpr0aoAtjnGf5/ulMllo+QUiBhupgbVCAlaj4RyXH/mvcjcsl2bVBv9E/gYJZz2JjxQWXBA==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [arm64]
-    os: [linux]
-
-  '@oxc-parser/binding-linux-arm64-musl@0.99.0':
-    resolution: {integrity: sha512-qhftDo2D37SqCEl3ZTa367NqWSZNb1Ddp34CTmShLKFrnKdNiUn55RdokLnHtf1AL5ssaQlYDwBECX7XiBWOhw==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [arm64]
-    os: [linux]
-
-  '@oxc-parser/binding-linux-riscv64-gnu@0.99.0':
-    resolution: {integrity: sha512-zxn/xkf519f12FKkpL5XwJipsylfSSnm36h6c1zBDTz4fbIDMGyIhHfWfwM7uUmHo9Aqw1pLxFpY39Etv398+Q==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [riscv64]
-    os: [linux]
-
-  '@oxc-parser/binding-linux-s390x-gnu@0.99.0':
-    resolution: {integrity: sha512-Y1eSDKDS5E4IVC7Oxw+NbYAKRmJPMJTIjW+9xOWwteDHkFqpocKe0USxog+Q1uhzalD9M0p9eXWEWdGQCMDBMQ==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [s390x]
-    os: [linux]
-
-  '@oxc-parser/binding-linux-x64-gnu@0.99.0':
-    resolution: {integrity: sha512-YVJMfk5cFWB8i2/nIrbk6n15bFkMHqWnMIWkVx7r2KwpTxHyFMfu2IpeVKo1ITDSmt5nBrGdLHD36QRlu2nDLg==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [x64]
-    os: [linux]
-
-  '@oxc-parser/binding-linux-x64-musl@0.99.0':
-    resolution: {integrity: sha512-2+SDPrie5f90A1b9EirtVggOgsqtsYU5raZwkDYKyS1uvJzjqHCDhG/f4TwQxHmIc5YkczdQfwvN91lwmjsKYQ==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [x64]
-    os: [linux]
-
-  '@oxc-parser/binding-wasm32-wasi@0.99.0':
-    resolution: {integrity: sha512-DKA4j0QerUWSMADziLM5sAyM7V53Fj95CV9SjP77bPfEfT7MnvFKnneaRMqPK1cpzjAGiQF52OBUIKyk0dwOQA==}
-    engines: {node: '>=14.0.0'}
-    cpu: [wasm32]
-
-  '@oxc-parser/binding-win32-arm64-msvc@0.99.0':
-    resolution: {integrity: sha512-EaB3AvsxqdNUhh9FOoAxRZ2L4PCRwDlDb//QXItwyOJrX7XS+uGK9B1KEUV4FZ/7rDhHsWieLt5e07wl2Ti5AQ==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [arm64]
-    os: [win32]
-
-  '@oxc-parser/binding-win32-x64-msvc@0.99.0':
-    resolution: {integrity: sha512-sJN1Q8h7ggFOyDn0zsHaXbP/MklAVUvhrbq0LA46Qum686P3SZQHjbATqJn9yaVEvaSKXCshgl0vQ1gWkGgpcQ==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [x64]
-    os: [win32]
+  '@oxc-project/types@0.122.0':
+    resolution: {integrity: sha512-oLAl5kBpV4w69UtFZ9xqcmTi+GENWOcPF7FCrczTiBbmC0ibXxCwyvZGbO39rCVEuLGAZM84DH0pUIyyv/YJzA==}
 
   '@oxc-project/types@0.96.0':
     resolution: {integrity: sha512-r/xkmoXA0xEpU6UGtn18CNVjXH6erU3KCpCDbpLmbVxBFor1U9MqN5Z2uMmCHJuXjJzlnDR+hWY+yPoLo8oHDw==}
 
-  '@oxc-project/types@0.99.0':
-    resolution: {integrity: sha512-LLDEhXB7g1m5J+woRSgfKsFPS3LhR9xRhTeIoEBm5WrkwMxn6eZ0Ld0c0K5eHB57ChZX6I3uSmmLjZ8pcjlRcw==}
+  '@oxfmt/binding-android-arm-eabi@0.35.0':
+    resolution: {integrity: sha512-BaRKlM3DyG81y/xWTsE6gZiv89F/3pHe2BqX2H4JbiB8HNVlWWtplzgATAE5IDSdwChdeuWLDTQzJ92Lglw3ZA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [android]
+
+  '@oxfmt/binding-android-arm64@0.35.0':
+    resolution: {integrity: sha512-/O+EbuAJYs6nde/anv+aID6uHsGQApyE9JtYBo/79KyU8e6RBN3DMbT0ix97y1SOnCglurmL2iZ+hlohjP2PnQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [android]
+
+  '@oxfmt/binding-darwin-arm64@0.35.0':
+    resolution: {integrity: sha512-pGqRtqlNdn9d4VrmGUWVyQjkw79ryhI6je9y2jfqNUIZCfqceob+R97YYAoG7C5TFyt8ILdLVoN+L2vw/hSFyA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@oxfmt/binding-darwin-x64@0.35.0':
+    resolution: {integrity: sha512-8GmsDcSozTPjrCJeGpp+sCmS9+9V5yRrdEZ1p/sTWxPG5nYeAfSLuS0nuEYjXSO+CtdSbStIW6dxa+4NM58yRw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [darwin]
+
+  '@oxfmt/binding-freebsd-x64@0.35.0':
+    resolution: {integrity: sha512-QyfKfTe0ytHpFKHAcHCGQEzN45QSqq1AHJOYYxQMgLM3KY4xu8OsXHpCnINjDsV4XGnQzczJDU9e04Zmd8XqIQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@oxfmt/binding-linux-arm-gnueabihf@0.35.0':
+    resolution: {integrity: sha512-u+kv3JD6P3J38oOyUaiCqgY5TNESzBRZJ5lyZQ6c2czUW2v5SIN9E/KWWa9vxoc+P8AFXQFUVrdzGy1tK+nbPQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [linux]
+
+  '@oxfmt/binding-linux-arm-musleabihf@0.35.0':
+    resolution: {integrity: sha512-1NiZroCiV57I7Pf8kOH4XGR366kW5zir3VfSMBU2D0V14GpYjiYmPYFAoJboZvp8ACnZKUReWyMkNKSa5ad58A==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [linux]
+
+  '@oxfmt/binding-linux-arm64-gnu@0.35.0':
+    resolution: {integrity: sha512-7Q0Xeg7ZnW2nxnZ4R7aF6DEbCFls4skgHZg+I63XitpNvJCbVIU8MFOTZlvZGRsY9+rPgWPQGeUpLHlyx0wvMA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  '@oxfmt/binding-linux-arm64-musl@0.35.0':
+    resolution: {integrity: sha512-5Okqi+uhYFxwKz8hcnUftNNwdm8BCkf6GSCbcz9xJxYMm87k1E4p7PEmAAbhLTk7cjSdDre6TDL0pDzNX+Y22Q==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  '@oxfmt/binding-linux-ppc64-gnu@0.35.0':
+    resolution: {integrity: sha512-9k66pbZQXM/lBJWys3Xbc5yhl4JexyfqkEf/tvtq8976VIJnLAAL3M127xHA3ifYSqxdVHfVGTg84eiBHCGcNw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [ppc64]
+    os: [linux]
+    libc: [glibc]
+
+  '@oxfmt/binding-linux-riscv64-gnu@0.35.0':
+    resolution: {integrity: sha512-aUcY9ofKPtjO52idT6t0SAQvEF6ctjzUQa1lLp7GDsRpSBvuTrBQGeq0rYKz3gN8dMIQ7mtMdGD9tT4LhR8jAQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [riscv64]
+    os: [linux]
+    libc: [glibc]
+
+  '@oxfmt/binding-linux-riscv64-musl@0.35.0':
+    resolution: {integrity: sha512-C6yhY5Hvc2sGM+mCPek9ZLe5xRUOC/BvhAt2qIWFAeXMn4il04EYIjl3DsWiJr0xDMTJhvMOmD55xTRPlNp39w==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [riscv64]
+    os: [linux]
+    libc: [musl]
+
+  '@oxfmt/binding-linux-s390x-gnu@0.35.0':
+    resolution: {integrity: sha512-RG2hlvOMK4OMZpO3mt8MpxLQ0AAezlFqhn5mI/g5YrVbPFyoCv9a34AAvbSJS501ocOxlFIRcKEuw5hFvddf9g==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [s390x]
+    os: [linux]
+    libc: [glibc]
+
+  '@oxfmt/binding-linux-x64-gnu@0.35.0':
+    resolution: {integrity: sha512-wzmh90Pwvqj9xOKHJjkQYBpydRkaXG77ZvDz+iFDRRQpnqIEqGm5gmim2s6vnZIkDGsvKCuTdtxm0GFmBjM1+w==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  '@oxfmt/binding-linux-x64-musl@0.35.0':
+    resolution: {integrity: sha512-+HCqYCJPCUy5I+b2cf+gUVaApfgtoQT3HdnSg/l7NIcLHOhKstlYaGyrFZLmUpQt4WkFbpGKZZayG6zjRU0KFA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  '@oxfmt/binding-openharmony-arm64@0.35.0':
+    resolution: {integrity: sha512-kFYmWfR9YL78XyO5ws+1dsxNvZoD973qfVMNFOS4e9bcHXGF7DvGC2tY5UDFwyMCeB33t3sDIuGONKggnVNSJA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [openharmony]
+
+  '@oxfmt/binding-win32-arm64-msvc@0.35.0':
+    resolution: {integrity: sha512-uD/NGdM65eKNCDGyTGdO8e9n3IHX+wwuorBvEYrPJXhDXL9qz6gzddmXH8EN04ejUXUujlq4FsoSeCfbg0Y+Jg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [win32]
+
+  '@oxfmt/binding-win32-ia32-msvc@0.35.0':
+    resolution: {integrity: sha512-oSRD2k8J2uxYDEKR2nAE/YTY9PobOEnhZgCmspHu0+yBQ665yH8lFErQVSTE7fcGJmJp/cC6322/gc8VFuQf7g==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [ia32]
+    os: [win32]
+
+  '@oxfmt/binding-win32-x64-msvc@0.35.0':
+    resolution: {integrity: sha512-WCDJjlS95NboR0ugI2BEwzt1tYvRDorDRM9Lvctls1SLyKYuNRCyrPwp1urUPFBnwgBNn9p2/gnmo7gFMySRoQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [win32]
+
+  '@oxlint/binding-android-arm-eabi@1.51.0':
+    resolution: {integrity: sha512-jJYIqbx4sX+suIxWstc4P7SzhEwb4ArWA2KVrmEuu9vH2i0qM6QIHz/ehmbGE4/2fZbpuMuBzTl7UkfNoqiSgw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [android]
+
+  '@oxlint/binding-android-arm64@1.51.0':
+    resolution: {integrity: sha512-GtXyBCcH4ti98YdiMNCrpBNGitx87EjEWxevnyhcBK12k/Vu4EzSB45rzSC4fGFUD6sQgeaxItRCEEWeVwPafw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [android]
+
+  '@oxlint/binding-darwin-arm64@1.51.0':
+    resolution: {integrity: sha512-3QJbeYaMHn6Bh2XeBXuITSsbnIctyTjvHf5nRjKYrT9pPeErNIpp5VDEeAXC0CZSwSVTsc8WOSDwgrAI24JolQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@oxlint/binding-darwin-x64@1.51.0':
+    resolution: {integrity: sha512-NzErhMaTEN1cY0E8C5APy74lw5VwsNfJfVPBMWPVQLqAbO0k4FFLjvHURvkUL+Y18Wu+8Vs1kbqPh2hjXYA4pg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [darwin]
+
+  '@oxlint/binding-freebsd-x64@1.51.0':
+    resolution: {integrity: sha512-msAIh3vPAoKoHlOE/oe6Q5C/n9umypv/k81lED82ibrJotn+3YG2Qp1kiR8o/Dg5iOEU97c6tl0utxcyFenpFw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@oxlint/binding-linux-arm-gnueabihf@1.51.0':
+    resolution: {integrity: sha512-CqQPcvqYyMe9ZBot2stjGogEzk1z8gGAngIX7srSzrzexmXixwVxBdFZyxTVM0CjGfDeV+Ru0w25/WNjlMM2Hw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [linux]
+
+  '@oxlint/binding-linux-arm-musleabihf@1.51.0':
+    resolution: {integrity: sha512-dstrlYQgZMnyOssxSbolGCge/sDbko12N/35RBNuqLpoPbft2aeBidBAb0dvQlyBd9RJ6u8D4o4Eh8Un6iTgyQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [linux]
+
+  '@oxlint/binding-linux-arm64-gnu@1.51.0':
+    resolution: {integrity: sha512-QEjUpXO7d35rP1/raLGGbAsBLLGZIzV3ZbeSjqWlD3oRnxpRIZ6iL4o51XQHkconn3uKssc+1VKdtHJ81BBhDA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  '@oxlint/binding-linux-arm64-musl@1.51.0':
+    resolution: {integrity: sha512-YSJua5irtG4DoMAjUapDTPhkQLHhBIY0G9JqlZS6/SZPzqDkPku/1GdWs0D6h/wyx0Iz31lNCfIaWKBQhzP0wQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  '@oxlint/binding-linux-ppc64-gnu@1.51.0':
+    resolution: {integrity: sha512-7L4Wj2IEUNDETKssB9IDYt16T6WlF+X2jgC/hBq3diGHda9vJLpAgb09+D3quFq7TdkFtI7hwz/jmuQmQFPc1Q==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [ppc64]
+    os: [linux]
+    libc: [glibc]
+
+  '@oxlint/binding-linux-riscv64-gnu@1.51.0':
+    resolution: {integrity: sha512-cBUHqtOXy76G41lOB401qpFoKx1xq17qYkhWrLSM7eEjiHM9sOtYqpr6ZdqCnN9s6ZpzudX4EkeHOFH2E9q0vA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [riscv64]
+    os: [linux]
+    libc: [glibc]
+
+  '@oxlint/binding-linux-riscv64-musl@1.51.0':
+    resolution: {integrity: sha512-WKbg8CysgZcHfZX0ixQFBRSBvFZUHa3SBnEjHY2FVYt2nbNJEjzTxA3ZR5wMU0NOCNKIAFUFvAh5/XJKPRJuJg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [riscv64]
+    os: [linux]
+    libc: [musl]
+
+  '@oxlint/binding-linux-s390x-gnu@1.51.0':
+    resolution: {integrity: sha512-N1QRUvJTxqXNSu35YOufdjsAVmKVx5bkrggOWAhTWBc3J4qjcBwr1IfyLh/6YCg8sYRSR1GraldS9jUgJL/U4A==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [s390x]
+    os: [linux]
+    libc: [glibc]
+
+  '@oxlint/binding-linux-x64-gnu@1.51.0':
+    resolution: {integrity: sha512-e0Mz0DizsCoqNIjeOg6OUKe8JKJWZ5zZlwsd05Bmr51Jo3AOL4UJnPvwKumr4BBtBrDZkCmOLhCvDGm95nJM2g==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  '@oxlint/binding-linux-x64-musl@1.51.0':
+    resolution: {integrity: sha512-wD8HGTWhYBKXvRDvoBVB1y+fEYV01samhWQSy1Zkxq2vpezvMnjaFKRuiP6tBNITLGuffbNDEXOwcAhJ3gI5Ug==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  '@oxlint/binding-openharmony-arm64@1.51.0':
+    resolution: {integrity: sha512-5NSwQ2hDEJ0GPXqikjWtwzgAQCsS7P9aLMNenjjKa+gknN3lTCwwwERsT6lKXSirfU3jLjexA2XQvQALh5h27w==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [openharmony]
+
+  '@oxlint/binding-win32-arm64-msvc@1.51.0':
+    resolution: {integrity: sha512-JEZyah1M0RHMw8d+jjSSJmSmO8sABA1J1RtrHYujGPeCkYg1NeH0TGuClpe2h5QtioRTaF57y/TZfn/2IFV6fA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [win32]
+
+  '@oxlint/binding-win32-ia32-msvc@1.51.0':
+    resolution: {integrity: sha512-q3cEoKH6kwjz/WRyHwSf0nlD2F5Qw536kCXvmlSu+kaShzgrA0ojmh45CA81qL+7udfCaZL2SdKCZlLiGBVFlg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [ia32]
+    os: [win32]
+
+  '@oxlint/binding-win32-x64-msvc@1.51.0':
+    resolution: {integrity: sha512-Q14+fOGb9T28nWF/0EUsYqERiRA7cl1oy4TJrGmLaqhm+aO2cV+JttboHI3CbdeMCAyDI1+NoSlrM7Melhp/cw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [win32]
+
+  '@parcel/watcher-android-arm64@2.5.4':
+    resolution: {integrity: sha512-hoh0vx4v+b3BNI7Cjoy2/B0ARqcwVNrzN/n7DLq9ZB4I3lrsvhrkCViJyfTj/Qi5xM9YFiH4AmHGK6pgH1ss7g==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm64]
+    os: [android]
+
+  '@parcel/watcher-darwin-arm64@2.5.4':
+    resolution: {integrity: sha512-kphKy377pZiWpAOyTgQYPE5/XEKVMaj6VUjKT5VkNyUJlr2qZAn8gIc7CPzx+kbhvqHDT9d7EqdOqRXT6vk0zw==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@parcel/watcher-darwin-x64@2.5.4':
+    resolution: {integrity: sha512-UKaQFhCtNJW1A9YyVz3Ju7ydf6QgrpNQfRZ35wNKUhTQ3dxJ/3MULXN5JN/0Z80V/KUBDGa3RZaKq1EQT2a2gg==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@parcel/watcher-freebsd-x64@2.5.4':
+    resolution: {integrity: sha512-Dib0Wv3Ow/m2/ttvLdeI2DBXloO7t3Z0oCp4bAb2aqyqOjKPPGrg10pMJJAQ7tt8P4V2rwYwywkDhUia/FgS+Q==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@parcel/watcher-linux-arm-glibc@2.5.4':
+    resolution: {integrity: sha512-I5Vb769pdf7Q7Sf4KNy8Pogl/URRCKu9ImMmnVKYayhynuyGYMzuI4UOWnegQNa2sGpsPSbzDsqbHNMyeyPCgw==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm]
+    os: [linux]
+    libc: [glibc]
+
+  '@parcel/watcher-linux-arm-musl@2.5.4':
+    resolution: {integrity: sha512-kGO8RPvVrcAotV4QcWh8kZuHr9bXi9a3bSZw7kFarYR0+fGliU7hd/zevhjw8fnvIKG3J9EO5G6sXNGCSNMYPQ==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm]
+    os: [linux]
+    libc: [musl]
+
+  '@parcel/watcher-linux-arm64-glibc@2.5.4':
+    resolution: {integrity: sha512-KU75aooXhqGFY2W5/p8DYYHt4hrjHZod8AhcGAmhzPn/etTa+lYCDB2b1sJy3sWJ8ahFVTdy+EbqSBvMx3iFlw==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  '@parcel/watcher-linux-arm64-musl@2.5.4':
+    resolution: {integrity: sha512-Qx8uNiIekVutnzbVdrgSanM+cbpDD3boB1f8vMtnuG5Zau4/bdDbXyKwIn0ToqFhIuob73bcxV9NwRm04/hzHQ==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  '@parcel/watcher-linux-x64-glibc@2.5.4':
+    resolution: {integrity: sha512-UYBQvhYmgAv61LNUn24qGQdjtycFBKSK3EXr72DbJqX9aaLbtCOO8+1SkKhD/GNiJ97ExgcHBrukcYhVjrnogA==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  '@parcel/watcher-linux-x64-musl@2.5.4':
+    resolution: {integrity: sha512-YoRWCVgxv8akZrMhdyVi6/TyoeeMkQ0PGGOf2E4omODrvd1wxniXP+DBynKoHryStks7l+fDAMUBRzqNHrVOpg==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  '@parcel/watcher-win32-arm64@2.5.4':
+    resolution: {integrity: sha512-iby+D/YNXWkiQNYcIhg8P5hSjzXEHaQrk2SLrWOUD7VeC4Ohu0WQvmV+HDJokZVJ2UjJ4AGXW3bx7Lls9Ln4TQ==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@parcel/watcher-win32-ia32@2.5.4':
+    resolution: {integrity: sha512-vQN+KIReG0a2ZDpVv8cgddlf67J8hk1WfZMMP7sMeZmJRSmEax5xNDNWKdgqSe2brOKTQQAs3aCCUal2qBHAyg==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [ia32]
+    os: [win32]
+
+  '@parcel/watcher-win32-x64@2.5.4':
+    resolution: {integrity: sha512-3A6efb6BOKwyw7yk9ro2vus2YTt2nvcd56AuzxdMiVOxL9umDyN5PKkKfZ/gZ9row41SjVmTVQNWQhaRRGpOKw==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [x64]
+    os: [win32]
+
+  '@parcel/watcher@2.5.4':
+    resolution: {integrity: sha512-WYa2tUVV5HiArWPB3ydlOc4R2ivq0IDrlqhMi3l7mVsFEXNcTfxYFPIHXHXIh/ca/y/V5N4E1zecyxdIBjYnkQ==}
+    engines: {node: '>= 10.0.0'}
 
   '@popperjs/core@2.11.8':
     resolution: {integrity: sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==}
 
-  '@posthog/react@1.4.0':
-    resolution: {integrity: sha512-xzPeZ753fQ0deZzdgY/0YavZvNpmdaxUzLYJYu5XjONNcZ8PwJnNLEK+7D/Cj8UM4Q8nWI7QC5mjum0uLWa4FA==}
-    peerDependencies:
-      '@types/react': '>=16.8.0'
-      posthog-js: '>=1.257.2'
-      react: '>=16.8.0'
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  '@prettier/plugin-oxc@0.1.3':
-    resolution: {integrity: sha512-aABz3zIRilpWMekbt1FL1JVBQrQLR8L4Td2SRctECrWSsXGTNn/G1BqNSKCdbvQS1LWstAXfqcXzDki7GAAJyg==}
-    engines: {node: '>=14'}
-
-  '@prisma/instrumentation@6.19.0':
-    resolution: {integrity: sha512-QcuYy25pkXM8BJ37wVFBO7Zh34nyRV1GOb2n3lPkkbRYfl4hWl3PTcImP41P0KrzVXfa/45p6eVCos27x3exIg==}
-    peerDependencies:
-      '@opentelemetry/api': ^1.8
-
-  '@quansync/fs@0.1.5':
-    resolution: {integrity: sha512-lNS9hL2aS2NZgNW7BBj+6EBl4rOf8l+tQ0eRY6JWCI8jI2kc53gSoqbjojU0OnAWhzoXiOjFyGsHcDGePB3lhA==}
+  '@quansync/fs@1.0.0':
+    resolution: {integrity: sha512-4TJ3DFtlf1L5LDMaM6CanJ/0lckGNtJcMjQ1NAV6zDmA0tEHKZtxNKin8EgPaVX1YzljbxckyT2tJrpQKAtngQ==}
 
   '@radix-ui/number@1.1.1':
     resolution: {integrity: sha512-MkKCwxlXTgz6CFoJx3pCwn07GKp36+aZyu/u2Ln2VrA5DcdyCZkASEDBTd8x5whTQQL5CiYf4prXKLcgQdv29g==}
@@ -2825,20 +3024,26 @@ packages:
   '@react-pdf/font@2.5.2':
     resolution: {integrity: sha512-Ud0EfZ2FwrbvwAWx8nz+KKLmiqACCH9a/N/xNDOja0e/YgSnqTpuyHegFBgIMKjuBtO5dNvkb4dXkxAhGe/ayw==}
 
-  '@react-pdf/font@4.0.2':
-    resolution: {integrity: sha512-/dAWu7Y2RD1RxarDZ9SkYPHgBYOhmcDnet4W/qN/m8k+A2Hr3ja54GymSR7GGxWBtxjKtNauVKrTa9LS1n8WUw==}
+  '@react-pdf/font@4.0.4':
+    resolution: {integrity: sha512-8YtgGtL511txIEc9AjiilpZ7yjid8uCd8OGUl6jaL3LIHnrToUupSN4IzsMQpVTCMYiDLFnDNQzpZsOYtRS/Pg==}
 
   '@react-pdf/image@2.3.6':
     resolution: {integrity: sha512-7iZDYZrZlJqNzS6huNl2XdMcLFUo68e6mOdzQeJ63d5eApdthhSHBnkGzHfLhH5t8DCpZNtClmklzuLL63ADfw==}
 
+  '@react-pdf/image@3.0.3':
+    resolution: {integrity: sha512-lvP5ryzYM3wpbO9bvqLZYwEr5XBDX9jcaRICvtnoRqdJOo7PRrMnmB4MMScyb+Xw10mGeIubZAAomNAG5ONQZQ==}
+
   '@react-pdf/layout@3.13.0':
     resolution: {integrity: sha512-lpPj/EJYHFOc0ALiJwLP09H28B4ADyvTjxOf67xTF+qkWd+dq1vg7dw3wnYESPnWk5T9NN+HlUenJqdYEY9AvA==}
 
+  '@react-pdf/layout@4.4.0':
+    resolution: {integrity: sha512-Aq+Cc6JYausWLoks2FvHe3PwK9cTuvksB2uJ0AnkKJEUtQbvCq8eCRb1bjbbwIji9OzFRTTzZij7LzkpKHjIeA==}
+
   '@react-pdf/pdfkit@3.2.0':
     resolution: {integrity: sha512-OBfCcnTC6RpD9uv9L2woF60Zj1uQxhLFzTBXTdcYE9URzPE/zqXIyzpXEA4Vf3TFbvBCgFE2RzJ2ZUS0asq7yA==}
 
-  '@react-pdf/pdfkit@4.0.3':
-    resolution: {integrity: sha512-k+Lsuq8vTwWsCqTp+CCB4+2N+sOTFrzwGA7aw3H9ix/PDWR9QksbmNg0YkzGbLAPI6CeawmiLHcf4trZ5ecLPQ==}
+  '@react-pdf/pdfkit@4.1.0':
+    resolution: {integrity: sha512-Wm/IOAv0h/U5Ra94c/PltFJGcpTUd/fwVMVeFD6X9tTTPCttIwg0teRG1Lqq617J8K4W7jpL/B0HTH0mjp3QpQ==}
 
   '@react-pdf/png-js@2.3.1':
     resolution: {integrity: sha512-pEZ18I4t1vAUS4lmhvXPmXYP4PHeblpWP/pAlMMRkEyP7tdAeHUN7taQl9sf9OPq7YITMY3lWpYpJU6t4CZgZg==}
@@ -2852,80 +3057,99 @@ packages:
   '@react-pdf/primitives@4.1.1':
     resolution: {integrity: sha512-IuhxYls1luJb7NUWy6q5avb1XrNaVj9bTNI40U9qGRuS6n7Hje/8H8Qi99Z9UKFV74bBP3DOf3L1wV2qZVgVrQ==}
 
+  '@react-pdf/reconciler@1.1.4':
+    resolution: {integrity: sha512-oTQDiR/t4Z/Guxac88IavpU2UgN7eR0RMI9DRKvKnvPz2DUasGjXfChAdMqDNmJJxxV26mMy9xQOUV2UU5/okg==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
   '@react-pdf/render@3.5.0':
     resolution: {integrity: sha512-gFOpnyqCgJ6l7VzfJz6rG1i2S7iVSD8bUHDjPW9Mze8TmyksHzN2zBH3y7NbsQOw1wU6hN4NhRmslrsn+BRDPA==}
 
+  '@react-pdf/render@4.3.0':
+    resolution: {integrity: sha512-MdWfWaqO6d7SZD75TZ2z5L35V+cHpyA43YNRlJNG0RJ7/MeVGDQv12y/BXOJgonZKkeEGdzM3EpAt9/g4E22WA==}
+
   '@react-pdf/renderer@3.4.5':
     resolution: {integrity: sha512-O1N8q45bTs7YuC+x9afJSKQWDYQy2RjoCxlxEGdbCwP+WD5G6dWRUWXlc8F0TtzU3uFglYMmDab2YhXTmnVN9g==}
     peerDependencies:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0
 
+  '@react-pdf/renderer@4.3.0':
+    resolution: {integrity: sha512-28gpA69fU9ZQrDzmd5xMJa1bDf8t0PT3ApUKBl2PUpoE/x4JlvCB5X66nMXrfFrgF2EZrA72zWQAkvbg7TE8zw==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
   '@react-pdf/stylesheet@4.3.0':
     resolution: {integrity: sha512-x7IVZOqRrUum9quuDeFXBveXwBht+z/6B0M+z4a4XjfSg1vZVvzoTl07Oa1yvQ/4yIC5yIkG2TSMWeKnDB+hrw==}
 
-  '@react-pdf/stylesheet@6.1.0':
-    resolution: {integrity: sha512-BGZ2sYNUp38VJUegjva/jsri3iiRGnVNjWI+G9dTwAvLNOmwFvSJzqaCsEnqQ/DW5mrTBk/577FhDY7pv6AidA==}
+  '@react-pdf/stylesheet@6.1.2':
+    resolution: {integrity: sha512-E3ftGRYUQGKiN3JOgtGsLDo0hGekA6dmkmi/MYACytmPTKxQRBSO3126MebmCq+t1rgU9uRlREIEawJ+8nzSbw==}
 
   '@react-pdf/textkit@4.4.1':
     resolution: {integrity: sha512-Jl9wdTqIvJ5pX+vAGz0EOhP7ut5Two9H6CzTKo/YYPeD79cM2yTXF3JzTERBC28y7LR0Waq9D2LHQjI+b/EYUQ==}
 
-  '@react-pdf/types@2.9.0':
-    resolution: {integrity: sha512-ckj80vZLlvl9oYrQ4tovEaqKWP3O06Eb1D48/jQWbdwz1Yh7Y9v1cEmwlP8ET+a1Whp8xfdM0xduMexkuPANCQ==}
+  '@react-pdf/textkit@6.0.0':
+    resolution: {integrity: sha512-fDt19KWaJRK/n2AaFoVm31hgGmpygmTV7LsHGJNGZkgzXcFyLsx+XUl63DTDPH3iqxj3xUX128t104GtOz8tTw==}
 
-  '@react-router/dev@7.9.5':
-    resolution: {integrity: sha512-MkWI4zN7VbQ0tteuJtX5hmDINNS26IW236a8lM8+o1344xdnT/ZsBvcUh8AkzDdCRYEz1blgzgirpj0Wc1gmXg==}
+  '@react-pdf/types@2.9.2':
+    resolution: {integrity: sha512-dufvpKId9OajLLbgn9q7VLUmyo1Jf+iyGk2ZHmCL8nIDtL8N1Ejh9TH7+pXXrR0tdie1nmnEb5Bz9U7g4hI4/g==}
+
+  '@react-router/dev@7.13.1':
+    resolution: {integrity: sha512-H+kEvbbOaWGaitOyL6CgqPsHqRUh66HuVRvIEaZEqdoAY/1xChdhmmq6ZumMHzcFHgHlfOcoXgNHlz6ZO4NWcg==}
     engines: {node: '>=20.0.0'}
     hasBin: true
     peerDependencies:
-      '@react-router/serve': ^7.9.5
-      '@vitejs/plugin-rsc': '*'
-      react-router: ^7.9.5
+      '@react-router/serve': ^7.13.1
+      '@vitejs/plugin-rsc': ~0.5.7
+      react-router: ^7.13.1
+      react-server-dom-webpack: ^19.2.3
       typescript: 5.8.3
-      vite: 7.1.11
+      vite: 7.3.1
       wrangler: ^3.28.2 || ^4.0.0
     peerDependenciesMeta:
       '@react-router/serve':
         optional: true
       '@vitejs/plugin-rsc':
         optional: true
+      react-server-dom-webpack:
+        optional: true
       typescript:
         optional: true
       wrangler:
         optional: true
 
-  '@react-router/express@7.9.5':
-    resolution: {integrity: sha512-Mg94Tw9JSaRuwkvIC6PaODRzsLs6mo70ppz5qdIK/G3iotSxsH08TDNdzot7CaXXevk/pIiD/+Tbn0H/asHsYA==}
+  '@react-router/express@7.13.1':
+    resolution: {integrity: sha512-ujHom4LiEWsbnohNArwNT86QP3WRB5p+rY8AAll6s4gdrzgOXIy3FHDc3up5Lz8juUrZKh0d+B+PZa/IdDSK3A==}
     engines: {node: '>=20.0.0'}
     peerDependencies:
       express: 4.22.0
-      react-router: 7.9.5
+      react-router: 7.13.1
       typescript: 5.8.3
     peerDependenciesMeta:
       typescript:
         optional: true
 
-  '@react-router/node@7.9.5':
-    resolution: {integrity: sha512-3mDd32mXh3gEkG0cLPnUaoLkY1pApsTPqn7O1j+P8aLf997uYz5lYDjt33vtMhaotlRM0x+5JziAKtz/76YBpQ==}
+  '@react-router/node@7.13.1':
+    resolution: {integrity: sha512-IWPPf+Q3nJ6q4bwyTf5leeGUfg8GAxSN1RKj5wp9SK915zKK+1u4TCOfOmr8hmC6IW1fcjKV0WChkM0HkReIiw==}
     engines: {node: '>=20.0.0'}
     peerDependencies:
-      react-router: 7.9.5
+      react-router: 7.13.1
       typescript: 5.8.3
     peerDependenciesMeta:
       typescript:
         optional: true
 
-  '@react-router/serve@7.9.5':
-    resolution: {integrity: sha512-sww8oDNqz8SgaXEQ3maqTuMlibCMpmWvLE0s5zyEyOQb1G99clYMcXceQ2HNU2jtXJkp+P5XI1CngpGpngyTnw==}
+  '@react-router/serve@7.13.1':
+    resolution: {integrity: sha512-vh5lr41rioXLz/zNLTYo0zq4yh97AkgEkJK7bhPeXnNbLNtI36WCZ2AeBtSJ4sdx4gx5LZvcjP8zoWFfSbNupA==}
     engines: {node: '>=20.0.0'}
     hasBin: true
     peerDependencies:
-      react-router: 7.9.5
+      react-router: 7.13.1
 
   '@remirror/core-constants@3.0.0':
     resolution: {integrity: sha512-42aWfPrimMfDKDi4YegyS7x+/0tlzaqwPQCULLanv3DMIlu96KTJR0fM5isWX2UViOqlGnX6YFgqWepcX+XMNg==}
 
-  '@remix-run/node-fetch-server@0.9.0':
-    resolution: {integrity: sha512-SoLMv7dbH+njWzXnOY6fI08dFMI5+/dQ+vY3n8RnnbdG7MdJEgiP28Xj/xWlnRnED/aB6SFw56Zop+LbmaaKqA==}
+  '@remix-run/node-fetch-server@0.13.0':
+    resolution: {integrity: sha512-1EsNo0ZpgXu/90AWoRZf/oE3RVTUS80tiTUpt+hv5pjtAkw7icN4WskDwz/KdAw5ARbJLMhZBrO1NqThmy/McA==}
 
   '@rolldown/binding-android-arm64@1.0.0-beta.46':
     resolution: {integrity: sha512-1nfXUqZ227uKuLw9S12OQZU5z+h+cUOXLW5orntWVxHWvt20pt1PGUcVoIU8ssngKABu0vzHY268kAxuYX24BQ==}
@@ -2933,53 +3157,129 @@ packages:
     cpu: [arm64]
     os: [android]
 
+  '@rolldown/binding-android-arm64@1.0.0-rc.12':
+    resolution: {integrity: sha512-pv1y2Fv0JybcykuiiD3qBOBdz6RteYojRFY1d+b95WVuzx211CRh+ytI/+9iVyWQ6koTh5dawe4S/yRfOFjgaA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [android]
+
   '@rolldown/binding-darwin-arm64@1.0.0-beta.46':
     resolution: {integrity: sha512-w4IyumCQkpA3ezZ37COG3mMusFYxjEE8zqCfXZU/qb5k1JMD2kVl0fgJafIbGli27tgelYMweXkJGnlrxSGT9Q==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [darwin]
 
+  '@rolldown/binding-darwin-arm64@1.0.0-rc.12':
+    resolution: {integrity: sha512-cFYr6zTG/3PXXF3pUO+umXxt1wkRK/0AYT8lDwuqvRC+LuKYWSAQAQZjCWDQpAH172ZV6ieYrNnFzVVcnSflAg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [darwin]
+
   '@rolldown/binding-darwin-x64@1.0.0-beta.46':
     resolution: {integrity: sha512-9QqaRHPbdAnv306+7nzltq4CktJ49Z4W9ybHLWYxSeDSoOGL4l1QmxjDWoRHrqYEkNr+DWHqqoD4NNHgOk7lKw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [darwin]
 
+  '@rolldown/binding-darwin-x64@1.0.0-rc.12':
+    resolution: {integrity: sha512-ZCsYknnHzeXYps0lGBz8JrF37GpE9bFVefrlmDrAQhOEi4IOIlcoU1+FwHEtyXGx2VkYAvhu7dyBf75EJQffBw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [darwin]
+
   '@rolldown/binding-freebsd-x64@1.0.0-beta.46':
     resolution: {integrity: sha512-Cuk5opdEMb+Evi7QcGArc4hWVoHSGz/qyUUWLTpFJWjylb8wH1u4f+HZE6gVGACuf4w/5P/VhAIamHyweAbBVQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [freebsd]
 
+  '@rolldown/binding-freebsd-x64@1.0.0-rc.12':
+    resolution: {integrity: sha512-dMLeprcVsyJsKolRXyoTH3NL6qtsT0Y2xeuEA8WQJquWFXkEC4bcu1rLZZSnZRMtAqwtrF/Ib9Ddtpa/Gkge9Q==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [freebsd]
+
   '@rolldown/binding-linux-arm-gnueabihf@1.0.0-beta.46':
     resolution: {integrity: sha512-BPWDxEnxb4JNMXrSmPuc5ywI6cHOELofmT0e/WGkbL1MwKYRVvqTf+gMcGLF6zAV+OF5hLYMAEk8XKfao6xmDQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm]
     os: [linux]
 
+  '@rolldown/binding-linux-arm-gnueabihf@1.0.0-rc.12':
+    resolution: {integrity: sha512-YqWjAgGC/9M1lz3GR1r1rP79nMgo3mQiiA+Hfo+pvKFK1fAJ1bCi0ZQVh8noOqNacuY1qIcfyVfP6HoyBRZ85Q==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [linux]
+
   '@rolldown/binding-linux-arm64-gnu@1.0.0-beta.46':
     resolution: {integrity: sha512-CDQSVlryuRC955EwgbBK1h/6xQyttSxQG8+6/PeOfvUlfKGPMbBdcsOEHzGve5ED1Y7Ovh2UFjY/eT106aQqig==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
+
+  '@rolldown/binding-linux-arm64-gnu@1.0.0-rc.12':
+    resolution: {integrity: sha512-/I5AS4cIroLpslsmzXfwbe5OmWvSsrFuEw3mwvbQ1kDxJ822hFHIx+vsN/TAzNVyepI/j/GSzrtCIwQPeKCLIg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
 
   '@rolldown/binding-linux-arm64-musl@1.0.0-beta.46':
     resolution: {integrity: sha512-6IZHycZetmVaC9zwcl1aA9fPYPuxLa5apALjJRoJu/2BZdER3zBWxDnCzlEh4SUlo++cwdfV9ZQRK9JS8cLNuA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
+
+  '@rolldown/binding-linux-arm64-musl@1.0.0-rc.12':
+    resolution: {integrity: sha512-V6/wZztnBqlx5hJQqNWwFdxIKN0m38p8Jas+VoSfgH54HSj9tKTt1dZvG6JRHcjh6D7TvrJPWFGaY9UBVOaWPw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  '@rolldown/binding-linux-ppc64-gnu@1.0.0-rc.12':
+    resolution: {integrity: sha512-AP3E9BpcUYliZCxa3w5Kwj9OtEVDYK6sVoUzy4vTOJsjPOgdaJZKFmN4oOlX0Wp0RPV2ETfmIra9x1xuayFB7g==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [ppc64]
+    os: [linux]
+    libc: [glibc]
+
+  '@rolldown/binding-linux-s390x-gnu@1.0.0-rc.12':
+    resolution: {integrity: sha512-nWwpvUSPkoFmZo0kQazZYOrT7J5DGOJ/+QHHzjvNlooDZED8oH82Yg67HvehPPLAg5fUff7TfWFHQS8IV1n3og==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [s390x]
+    os: [linux]
+    libc: [glibc]
 
   '@rolldown/binding-linux-x64-gnu@1.0.0-beta.46':
     resolution: {integrity: sha512-R/kI8fMnsxXvWzcMv5A408hfvrwtAwD/HdQKIE1HKWmfxdSHB11Y3PVwlnt7RVo7I++6mWCIxxj5o3gut4ibEw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
+
+  '@rolldown/binding-linux-x64-gnu@1.0.0-rc.12':
+    resolution: {integrity: sha512-RNrafz5bcwRy+O9e6P8Z/OCAJW/A+qtBczIqVYwTs14pf4iV1/+eKEjdOUta93q2TsT/FI0XYDP3TCky38LMAg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
 
   '@rolldown/binding-linux-x64-musl@1.0.0-beta.46':
     resolution: {integrity: sha512-vGUXKuHGUlG2XBwvN4A8KIegeaVVxN2ZxdGG9thycwRkzUvZ9ccKvqUVZM8cVRyNRWgVgsGCS18qLUefVplwKw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
+
+  '@rolldown/binding-linux-x64-musl@1.0.0-rc.12':
+    resolution: {integrity: sha512-Jpw/0iwoKWx3LJ2rc1yjFrj+T7iHZn2JDg1Yny1ma0luviFS4mhAIcd1LFNxK3EYu3DHWCps0ydXQ5i/rrJ2ig==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
 
   '@rolldown/binding-openharmony-arm64@1.0.0-beta.46':
     resolution: {integrity: sha512-6SpDGH+0Dud3/RFDoC6fva6+Cm/0COnMRKR8kI4ssHWlCXPymlM59kYFCIBLZZqwURpNVVMPln4rWjxXuwD23w==}
@@ -2987,17 +3287,34 @@ packages:
     cpu: [arm64]
     os: [openharmony]
 
+  '@rolldown/binding-openharmony-arm64@1.0.0-rc.12':
+    resolution: {integrity: sha512-vRugONE4yMfVn0+7lUKdKvN4D5YusEiPilaoO2sgUWpCvrncvWgPMzK00ZFFJuiPgLwgFNP5eSiUlv2tfc+lpA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [openharmony]
+
   '@rolldown/binding-wasm32-wasi@1.0.0-beta.46':
     resolution: {integrity: sha512-peWDGp8YUAbTw5RJzr9AuPlTuf2adr+TBNIGF6ysMbobBKuQL41wYfGQlcerXJfLmjnQLf6DU2zTPBTfrS2Y8A==}
     engines: {node: '>=14.0.0'}
     cpu: [wasm32]
 
+  '@rolldown/binding-wasm32-wasi@1.0.0-rc.12':
+    resolution: {integrity: sha512-ykGiLr/6kkiHc0XnBfmFJuCjr5ZYKKofkx+chJWDjitX+KsJuAmrzWhwyOMSHzPhzOHOy7u9HlFoa5MoAOJ/Zg==}
+    engines: {node: '>=14.0.0'}
+    cpu: [wasm32]
+
   '@rolldown/binding-win32-arm64-msvc@1.0.0-beta.46':
     resolution: {integrity: sha512-Ydbwg1JCnVbTAuDyKtu3dOuBLgZ6iZsy8p1jMPX/r7LMPnpXnS15GNcmMwa11nyl/M2VjGE1i/MORUTMt8mnRQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [win32]
 
+  '@rolldown/binding-win32-arm64-msvc@1.0.0-rc.12':
+    resolution: {integrity: sha512-5eOND4duWkwx1AzCxadcOrNeighiLwMInEADT0YM7xeEOOFcovWZCq8dadXgcRHSf3Ulh1kFo/qvzoFiCLOL1Q==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [win32]
+
   '@rolldown/binding-win32-ia32-msvc@1.0.0-beta.46':
     resolution: {integrity: sha512-XcPZG2uDxEn6G3takXQvi7xWgDiJqdC0N6mubL/giKD4I65zgQtbadwlIR8oDB/erOahZr5IX8cRBVcK3xcvpg==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -3010,268 +3327,165 @@ packages:
     cpu: [x64]
     os: [win32]
 
+  '@rolldown/binding-win32-x64-msvc@1.0.0-rc.12':
+    resolution: {integrity: sha512-PyqoipaswDLAZtot351MLhrlrh6lcZPo2LSYE+VDxbVk24LVKAGOuE4hb8xZQmrPAuEtTZW8E6D2zc5EUZX4Lw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [win32]
+
   '@rolldown/pluginutils@1.0.0-beta.46':
     resolution: {integrity: sha512-xMNwJo/pHkEP/mhNVnW+zUiJDle6/hxrwO0mfSJuEVRbBfgrJFuUSRoZx/nYUw5pCjrysl9OkNXCkAdih8GCnA==}
 
+  '@rolldown/pluginutils@1.0.0-rc.12':
+    resolution: {integrity: sha512-HHMwmarRKvoFsJorqYlFeFRzXZqCt2ETQlEDOb9aqssrnVBB1/+xgTGtuTrIk5vzLNX1MjMtTf7W9z3tsSbrxw==}
+
   '@rollup/pluginutils@5.2.0':
     resolution: {integrity: sha512-qWJ2ZTbmumwiLFomfzTyt5Kng4hwPi9rwCYN4SHb6eaRU1KNO4ccxINHr/VhH4GgPlt1XfSTLX2LBTme8ne4Zw==}
     engines: {node: '>=14.0.0'}
     peerDependencies:
-      rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0
+      rollup: 4.59.0
     peerDependenciesMeta:
       rollup:
         optional: true
 
-  '@rollup/rollup-android-arm-eabi@4.52.4':
-    resolution: {integrity: sha512-BTm2qKNnWIQ5auf4deoetINJm2JzvihvGb9R6K/ETwKLql/Bb3Eg2H1FBp1gUb4YGbydMA3jcmQTR73q7J+GAA==}
+  '@rollup/rollup-android-arm-eabi@4.59.0':
+    resolution: {integrity: sha512-upnNBkA6ZH2VKGcBj9Fyl9IGNPULcjXRlg0LLeaioQWueH30p6IXtJEbKAgvyv+mJaMxSm1l6xwDXYjpEMiLMg==}
     cpu: [arm]
     os: [android]
 
-  '@rollup/rollup-android-arm64@4.52.4':
-    resolution: {integrity: sha512-P9LDQiC5vpgGFgz7GSM6dKPCiqR3XYN1WwJKA4/BUVDjHpYsf3iBEmVz62uyq20NGYbiGPR5cNHI7T1HqxNs2w==}
+  '@rollup/rollup-android-arm64@4.59.0':
+    resolution: {integrity: sha512-hZ+Zxj3SySm4A/DylsDKZAeVg0mvi++0PYVceVyX7hemkw7OreKdCvW2oQ3T1FMZvCaQXqOTHb8qmBShoqk69Q==}
     cpu: [arm64]
     os: [android]
 
-  '@rollup/rollup-darwin-arm64@4.52.4':
-    resolution: {integrity: sha512-QRWSW+bVccAvZF6cbNZBJwAehmvG9NwfWHwMy4GbWi/BQIA/laTIktebT2ipVjNncqE6GLPxOok5hsECgAxGZg==}
+  '@rollup/rollup-darwin-arm64@4.59.0':
+    resolution: {integrity: sha512-W2Psnbh1J8ZJw0xKAd8zdNgF9HRLkdWwwdWqubSVk0pUuQkoHnv7rx4GiF9rT4t5DIZGAsConRE3AxCdJ4m8rg==}
     cpu: [arm64]
     os: [darwin]
 
-  '@rollup/rollup-darwin-x64@4.52.4':
-    resolution: {integrity: sha512-hZgP05pResAkRJxL1b+7yxCnXPGsXU0fG9Yfd6dUaoGk+FhdPKCJ5L1Sumyxn8kvw8Qi5PvQ8ulenUbRjzeCTw==}
+  '@rollup/rollup-darwin-x64@4.59.0':
+    resolution: {integrity: sha512-ZW2KkwlS4lwTv7ZVsYDiARfFCnSGhzYPdiOU4IM2fDbL+QGlyAbjgSFuqNRbSthybLbIJ915UtZBtmuLrQAT/w==}
     cpu: [x64]
     os: [darwin]
 
-  '@rollup/rollup-freebsd-arm64@4.52.4':
-    resolution: {integrity: sha512-xmc30VshuBNUd58Xk4TKAEcRZHaXlV+tCxIXELiE9sQuK3kG8ZFgSPi57UBJt8/ogfhAF5Oz4ZSUBN77weM+mQ==}
+  '@rollup/rollup-freebsd-arm64@4.59.0':
+    resolution: {integrity: sha512-EsKaJ5ytAu9jI3lonzn3BgG8iRBjV4LxZexygcQbpiU0wU0ATxhNVEpXKfUa0pS05gTcSDMKpn3Sx+QB9RlTTA==}
     cpu: [arm64]
     os: [freebsd]
 
-  '@rollup/rollup-freebsd-x64@4.52.4':
-    resolution: {integrity: sha512-WdSLpZFjOEqNZGmHflxyifolwAiZmDQzuOzIq9L27ButpCVpD7KzTRtEG1I0wMPFyiyUdOO+4t8GvrnBLQSwpw==}
+  '@rollup/rollup-freebsd-x64@4.59.0':
+    resolution: {integrity: sha512-d3DuZi2KzTMjImrxoHIAODUZYoUUMsuUiY4SRRcJy6NJoZ6iIqWnJu9IScV9jXysyGMVuW+KNzZvBLOcpdl3Vg==}
     cpu: [x64]
     os: [freebsd]
 
-  '@rollup/rollup-linux-arm-gnueabihf@4.52.4':
-    resolution: {integrity: sha512-xRiOu9Of1FZ4SxVbB0iEDXc4ddIcjCv2aj03dmW8UrZIW7aIQ9jVJdLBIhxBI+MaTnGAKyvMwPwQnoOEvP7FgQ==}
+  '@rollup/rollup-linux-arm-gnueabihf@4.59.0':
+    resolution: {integrity: sha512-t4ONHboXi/3E0rT6OZl1pKbl2Vgxf9vJfWgmUoCEVQVxhW6Cw/c8I6hbbu7DAvgp82RKiH7TpLwxnJeKv2pbsw==}
     cpu: [arm]
     os: [linux]
+    libc: [glibc]
 
-  '@rollup/rollup-linux-arm-musleabihf@4.52.4':
-    resolution: {integrity: sha512-FbhM2p9TJAmEIEhIgzR4soUcsW49e9veAQCziwbR+XWB2zqJ12b4i/+hel9yLiD8pLncDH4fKIPIbt5238341Q==}
+  '@rollup/rollup-linux-arm-musleabihf@4.59.0':
+    resolution: {integrity: sha512-CikFT7aYPA2ufMD086cVORBYGHffBo4K8MQ4uPS/ZnY54GKj36i196u8U+aDVT2LX4eSMbyHtyOh7D7Zvk2VvA==}
     cpu: [arm]
     os: [linux]
+    libc: [musl]
 
-  '@rollup/rollup-linux-arm64-gnu@4.52.4':
-    resolution: {integrity: sha512-4n4gVwhPHR9q/g8lKCyz0yuaD0MvDf7dV4f9tHt0C73Mp8h38UCtSCSE6R9iBlTbXlmA8CjpsZoujhszefqueg==}
+  '@rollup/rollup-linux-arm64-gnu@4.59.0':
+    resolution: {integrity: sha512-jYgUGk5aLd1nUb1CtQ8E+t5JhLc9x5WdBKew9ZgAXg7DBk0ZHErLHdXM24rfX+bKrFe+Xp5YuJo54I5HFjGDAA==}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
-  '@rollup/rollup-linux-arm64-musl@4.52.4':
-    resolution: {integrity: sha512-u0n17nGA0nvi/11gcZKsjkLj1QIpAuPFQbR48Subo7SmZJnGxDpspyw2kbpuoQnyK+9pwf3pAoEXerJs/8Mi9g==}
+  '@rollup/rollup-linux-arm64-musl@4.59.0':
+    resolution: {integrity: sha512-peZRVEdnFWZ5Bh2KeumKG9ty7aCXzzEsHShOZEFiCQlDEepP1dpUl/SrUNXNg13UmZl+gzVDPsiCwnV1uI0RUA==}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
-  '@rollup/rollup-linux-loong64-gnu@4.52.4':
-    resolution: {integrity: sha512-0G2c2lpYtbTuXo8KEJkDkClE/+/2AFPdPAbmaHoE870foRFs4pBrDehilMcrSScrN/fB/1HTaWO4bqw+ewBzMQ==}
+  '@rollup/rollup-linux-loong64-gnu@4.59.0':
+    resolution: {integrity: sha512-gbUSW/97f7+r4gHy3Jlup8zDG190AuodsWnNiXErp9mT90iCy9NKKU0Xwx5k8VlRAIV2uU9CsMnEFg/xXaOfXg==}
     cpu: [loong64]
     os: [linux]
+    libc: [glibc]
 
-  '@rollup/rollup-linux-ppc64-gnu@4.52.4':
-    resolution: {integrity: sha512-teSACug1GyZHmPDv14VNbvZFX779UqWTsd7KtTM9JIZRDI5NUwYSIS30kzI8m06gOPB//jtpqlhmraQ68b5X2g==}
+  '@rollup/rollup-linux-loong64-musl@4.59.0':
+    resolution: {integrity: sha512-yTRONe79E+o0FWFijasoTjtzG9EBedFXJMl888NBEDCDV9I2wGbFFfJQQe63OijbFCUZqxpHz1GzpbtSFikJ4Q==}
+    cpu: [loong64]
+    os: [linux]
+    libc: [musl]
+
+  '@rollup/rollup-linux-ppc64-gnu@4.59.0':
+    resolution: {integrity: sha512-sw1o3tfyk12k3OEpRddF68a1unZ5VCN7zoTNtSn2KndUE+ea3m3ROOKRCZxEpmT9nsGnogpFP9x6mnLTCaoLkA==}
     cpu: [ppc64]
     os: [linux]
+    libc: [glibc]
 
-  '@rollup/rollup-linux-riscv64-gnu@4.52.4':
-    resolution: {integrity: sha512-/MOEW3aHjjs1p4Pw1Xk4+3egRevx8Ji9N6HUIA1Ifh8Q+cg9dremvFCUbOX2Zebz80BwJIgCBUemjqhU5XI5Eg==}
+  '@rollup/rollup-linux-ppc64-musl@4.59.0':
+    resolution: {integrity: sha512-+2kLtQ4xT3AiIxkzFVFXfsmlZiG5FXYW7ZyIIvGA7Bdeuh9Z0aN4hVyXS/G1E9bTP/vqszNIN/pUKCk/BTHsKA==}
+    cpu: [ppc64]
+    os: [linux]
+    libc: [musl]
+
+  '@rollup/rollup-linux-riscv64-gnu@4.59.0':
+    resolution: {integrity: sha512-NDYMpsXYJJaj+I7UdwIuHHNxXZ/b/N2hR15NyH3m2qAtb/hHPA4g4SuuvrdxetTdndfj9b1WOmy73kcPRoERUg==}
     cpu: [riscv64]
     os: [linux]
+    libc: [glibc]
 
-  '@rollup/rollup-linux-riscv64-musl@4.52.4':
-    resolution: {integrity: sha512-1HHmsRyh845QDpEWzOFtMCph5Ts+9+yllCrREuBR/vg2RogAQGGBRC8lDPrPOMnrdOJ+mt1WLMOC2Kao/UwcvA==}
+  '@rollup/rollup-linux-riscv64-musl@4.59.0':
+    resolution: {integrity: sha512-nLckB8WOqHIf1bhymk+oHxvM9D3tyPndZH8i8+35p/1YiVoVswPid2yLzgX7ZJP0KQvnkhM4H6QZ5m0LzbyIAg==}
     cpu: [riscv64]
     os: [linux]
+    libc: [musl]
 
-  '@rollup/rollup-linux-s390x-gnu@4.52.4':
-    resolution: {integrity: sha512-seoeZp4L/6D1MUyjWkOMRU6/iLmCU2EjbMTyAG4oIOs1/I82Y5lTeaxW0KBfkUdHAWN7j25bpkt0rjnOgAcQcA==}
+  '@rollup/rollup-linux-s390x-gnu@4.59.0':
+    resolution: {integrity: sha512-oF87Ie3uAIvORFBpwnCvUzdeYUqi2wY6jRFWJAy1qus/udHFYIkplYRW+wo+GRUP4sKzYdmE1Y3+rY5Gc4ZO+w==}
     cpu: [s390x]
     os: [linux]
+    libc: [glibc]
 
-  '@rollup/rollup-linux-x64-gnu@4.52.4':
-    resolution: {integrity: sha512-Wi6AXf0k0L7E2gteNsNHUs7UMwCIhsCTs6+tqQ5GPwVRWMaflqGec4Sd8n6+FNFDw9vGcReqk2KzBDhCa1DLYg==}
+  '@rollup/rollup-linux-x64-gnu@4.59.0':
+    resolution: {integrity: sha512-3AHmtQq/ppNuUspKAlvA8HtLybkDflkMuLK4DPo77DfthRb71V84/c4MlWJXixZz4uruIH4uaa07IqoAkG64fg==}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
-  '@rollup/rollup-linux-x64-musl@4.52.4':
-    resolution: {integrity: sha512-dtBZYjDmCQ9hW+WgEkaffvRRCKm767wWhxsFW3Lw86VXz/uJRuD438/XvbZT//B96Vs8oTA8Q4A0AfHbrxP9zw==}
+  '@rollup/rollup-linux-x64-musl@4.59.0':
+    resolution: {integrity: sha512-2UdiwS/9cTAx7qIUZB/fWtToJwvt0Vbo0zmnYt7ED35KPg13Q0ym1g442THLC7VyI6JfYTP4PiSOWyoMdV2/xg==}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
-  '@rollup/rollup-openharmony-arm64@4.52.4':
-    resolution: {integrity: sha512-1ox+GqgRWqaB1RnyZXL8PD6E5f7YyRUJYnCqKpNzxzP0TkaUh112NDrR9Tt+C8rJ4x5G9Mk8PQR3o7Ku2RKqKA==}
+  '@rollup/rollup-openbsd-x64@4.59.0':
+    resolution: {integrity: sha512-M3bLRAVk6GOwFlPTIxVBSYKUaqfLrn8l0psKinkCFxl4lQvOSz8ZrKDz2gxcBwHFpci0B6rttydI4IpS4IS/jQ==}
+    cpu: [x64]
+    os: [openbsd]
+
+  '@rollup/rollup-openharmony-arm64@4.59.0':
+    resolution: {integrity: sha512-tt9KBJqaqp5i5HUZzoafHZX8b5Q2Fe7UjYERADll83O4fGqJ49O1FsL6LpdzVFQcpwvnyd0i+K/VSwu/o/nWlA==}
     cpu: [arm64]
     os: [openharmony]
 
-  '@rollup/rollup-win32-arm64-msvc@4.52.4':
-    resolution: {integrity: sha512-8GKr640PdFNXwzIE0IrkMWUNUomILLkfeHjXBi/nUvFlpZP+FA8BKGKpacjW6OUUHaNI6sUURxR2U2g78FOHWQ==}
+  '@rollup/rollup-win32-arm64-msvc@4.59.0':
+    resolution: {integrity: sha512-V5B6mG7OrGTwnxaNUzZTDTjDS7F75PO1ae6MJYdiMu60sq0CqN5CVeVsbhPxalupvTX8gXVSU9gq+Rx1/hvu6A==}
     cpu: [arm64]
     os: [win32]
 
-  '@rollup/rollup-win32-ia32-msvc@4.52.4':
-    resolution: {integrity: sha512-AIy/jdJ7WtJ/F6EcfOb2GjR9UweO0n43jNObQMb6oGxkYTfLcnN7vYYpG+CN3lLxrQkzWnMOoNSHTW54pgbVxw==}
+  '@rollup/rollup-win32-ia32-msvc@4.59.0':
+    resolution: {integrity: sha512-UKFMHPuM9R0iBegwzKF4y0C4J9u8C6MEJgFuXTBerMk7EJ92GFVFYBfOZaSGLu6COf7FxpQNqhNS4c4icUPqxA==}
     cpu: [ia32]
     os: [win32]
 
-  '@rollup/rollup-win32-x64-gnu@4.52.4':
-    resolution: {integrity: sha512-UF9KfsH9yEam0UjTwAgdK0anlQ7c8/pWPU2yVjyWcF1I1thABt6WXE47cI71pGiZ8wGvxohBoLnxM04L/wj8mQ==}
+  '@rollup/rollup-win32-x64-gnu@4.59.0':
+    resolution: {integrity: sha512-laBkYlSS1n2L8fSo1thDNGrCTQMmxjYY5G0WFWjFFYZkKPjsMBsgJfGf4TLxXrF6RyhI60L8TMOjBMvXiTcxeA==}
     cpu: [x64]
     os: [win32]
 
-  '@rollup/rollup-win32-x64-msvc@4.52.4':
-    resolution: {integrity: sha512-bf9PtUa0u8IXDVxzRToFQKsNCRz9qLYfR/MpECxl4mRoWYjAeFjgxj1XdZr2M/GNVpT05p+LgQOHopYDlUu6/w==}
+  '@rollup/rollup-win32-x64-msvc@4.59.0':
+    resolution: {integrity: sha512-2HRCml6OztYXyJXAvdDXPKcawukWY2GpR5/nxKp4iBgiO3wcoEGkAaqctIbZcNB6KlUQBIqt8VYkNSj2397EfA==}
     cpu: [x64]
     os: [win32]
 
-  '@rtsao/scc@1.1.0':
-    resolution: {integrity: sha512-zt6OdqaDoOnJ1ZYsCYGt9YmWzDXl4vQdKTyJev62gFhRGKdx7mcT54V9KIjg+d2wi9EXsPvAPKe7i7WjfVWB8g==}
-
-  '@sentry-internal/browser-utils@10.27.0':
-    resolution: {integrity: sha512-17tO6AXP+rmVQtLJ3ROQJF2UlFmvMWp7/8RDT5x9VM0w0tY31z8Twc0gw2KA7tcDxa5AaHDUbf9heOf+R6G6ow==}
-    engines: {node: '>=18'}
-
-  '@sentry-internal/feedback@10.27.0':
-    resolution: {integrity: sha512-UecsIDJcv7VBwycge/MDvgSRxzevDdcItE1i0KSwlPz00rVVxLY9kV28PJ4I2E7r6/cIaP9BkbWegCEcv09NuA==}
-    engines: {node: '>=18'}
-
-  '@sentry-internal/node-cpu-profiler@2.2.0':
-    resolution: {integrity: sha512-oLHVYurqZfADPh5hvmQYS5qx8t0UZzT2u6+/68VXsFruQEOnYJTODKgU3BVLmemRs3WE6kCJjPeFdHVYOQGSzQ==}
-    engines: {node: '>=18'}
-
-  '@sentry-internal/replay-canvas@10.27.0':
-    resolution: {integrity: sha512-inhsRYSVBpu3BI1kZphXj6uB59baJpYdyHeIPCiTfdFNBE5tngNH0HS/aedZ1g9zICw290lwvpuyrWJqp4VBng==}
-    engines: {node: '>=18'}
-
-  '@sentry-internal/replay@10.27.0':
-    resolution: {integrity: sha512-tKSzHq1hNzB619Ssrqo25cqdQJ84R3xSSLsUWEnkGO/wcXJvpZy94gwdoS+KmH18BB1iRRRGtnMxZcUkiPSesw==}
-    engines: {node: '>=18'}
-
-  '@sentry/babel-plugin-component-annotate@4.6.0':
-    resolution: {integrity: sha512-3soTX50JPQQ51FSbb4qvNBf4z/yP7jTdn43vMTp9E4IxvJ9HKJR7OEuKkCMszrZmWsVABXl02msqO7QisePdiQ==}
-    engines: {node: '>= 14'}
-
-  '@sentry/browser@10.27.0':
-    resolution: {integrity: sha512-G8q362DdKp9y1b5qkQEmhTFzyWTOVB0ps1rflok0N6bVA75IEmSDX1pqJsNuY3qy14VsVHYVwQBJQsNltQLS0g==}
-    engines: {node: '>=18'}
-
-  '@sentry/bundler-plugin-core@4.6.0':
-    resolution: {integrity: sha512-Fub2XQqrS258jjS8qAxLLU1k1h5UCNJ76i8m4qZJJdogWWaF8t00KnnTyp9TEDJzrVD64tRXS8+HHENxmeUo3g==}
-    engines: {node: '>= 14'}
-
-  '@sentry/cli-darwin@2.58.2':
-    resolution: {integrity: sha512-MArsb3zLhA2/cbd4rTm09SmTpnEuZCoZOpuZYkrpDw1qzBVJmRFA1W1hGAQ9puzBIk/ubY3EUhhzuU3zN2uD6w==}
-    engines: {node: '>=10'}
-    os: [darwin]
-
-  '@sentry/cli-linux-arm64@2.58.2':
-    resolution: {integrity: sha512-ay3OeObnbbPrt45cjeUyQjsx5ain1laj1tRszWj37NkKu55NZSp4QCg1gGBZ0gBGhckI9nInEsmKtix00alw2g==}
-    engines: {node: '>=10'}
-    cpu: [arm64]
-    os: [linux, freebsd, android]
-
-  '@sentry/cli-linux-arm@2.58.2':
-    resolution: {integrity: sha512-HU9lTCzcHqCz/7Mt5n+cv+nFuJdc1hGD2h35Uo92GgxX3/IujNvOUfF+nMX9j6BXH6hUt73R5c0Ycq9+a3Parg==}
-    engines: {node: '>=10'}
-    cpu: [arm]
-    os: [linux, freebsd, android]
-
-  '@sentry/cli-linux-i686@2.58.2':
-    resolution: {integrity: sha512-CN9p0nfDFsAT1tTGBbzOUGkIllwS3hygOUyTK7LIm9z+UHw5uNgNVqdM/3Vg+02ymjkjISNB3/+mqEM5osGXdA==}
-    engines: {node: '>=10'}
-    cpu: [x86, ia32]
-    os: [linux, freebsd, android]
-
-  '@sentry/cli-linux-x64@2.58.2':
-    resolution: {integrity: sha512-oX/LLfvWaJO50oBVOn4ZvG2SDWPq0MN8SV9eg5tt2nviq+Ryltfr7Rtoo+HfV+eyOlx1/ZXhq9Wm7OT3cQuz+A==}
-    engines: {node: '>=10'}
-    cpu: [x64]
-    os: [linux, freebsd, android]
-
-  '@sentry/cli-win32-arm64@2.58.2':
-    resolution: {integrity: sha512-+cl3x2HPVMpoSVGVM1IDWlAEREZrrVQj4xBb0TRKII7g3hUxRsAIcsrr7+tSkie++0FuH4go/b5fGAv51OEF3w==}
-    engines: {node: '>=10'}
-    cpu: [arm64]
-    os: [win32]
-
-  '@sentry/cli-win32-i686@2.58.2':
-    resolution: {integrity: sha512-omFVr0FhzJ8oTJSg1Kf+gjLgzpYklY0XPfLxZ5iiMiYUKwF5uo1RJRdkUOiEAv0IqpUKnmKcmVCLaDxsWclB7Q==}
-    engines: {node: '>=10'}
-    cpu: [x86, ia32]
-    os: [win32]
-
-  '@sentry/cli-win32-x64@2.58.2':
-    resolution: {integrity: sha512-2NAFs9UxVbRztQbgJSP5i8TB9eJQ7xraciwj/93djrSMHSEbJ0vC47TME0iifgvhlHMs5vqETOKJtfbbpQAQFA==}
-    engines: {node: '>=10'}
-    cpu: [x64]
-    os: [win32]
-
-  '@sentry/cli@2.58.2':
-    resolution: {integrity: sha512-U4u62V4vaTWF+o40Mih8aOpQKqKUbZQt9A3LorIJwaE3tO3XFLRI70eWtW2se1Qmy0RZ74zB14nYcFNFl2t4Rw==}
-    engines: {node: '>= 10'}
-    hasBin: true
-
-  '@sentry/core@10.27.0':
-    resolution: {integrity: sha512-Zc68kdH7tWTDtDbV1zWIbo3Jv0fHAU2NsF5aD2qamypKgfSIMSbWVxd22qZyDBkaX8gWIPm/0Sgx6aRXRBXrYQ==}
-    engines: {node: '>=18'}
-
-  '@sentry/node-core@10.27.0':
-    resolution: {integrity: sha512-Dzo1I64Psb7AkpyKVUlR9KYbl4wcN84W4Wet3xjLmVKMgrCo2uAT70V4xIacmoMH5QLZAx0nGfRy9yRCd4nzBg==}
-    engines: {node: '>=18'}
-    peerDependencies:
-      '@opentelemetry/api': ^1.9.0
-      '@opentelemetry/context-async-hooks': ^1.30.1 || ^2.1.0 || ^2.2.0
-      '@opentelemetry/core': ^1.30.1 || ^2.1.0 || ^2.2.0
-      '@opentelemetry/instrumentation': '>=0.57.1 <1'
-      '@opentelemetry/resources': ^1.30.1 || ^2.1.0 || ^2.2.0
-      '@opentelemetry/sdk-trace-base': ^1.30.1 || ^2.1.0 || ^2.2.0
-      '@opentelemetry/semantic-conventions': ^1.37.0
-
-  '@sentry/node@10.27.0':
-    resolution: {integrity: sha512-1cQZ4+QqV9juW64Jku1SMSz+PoZV+J59lotz4oYFvCNYzex8hRAnDKvNiKW1IVg5mEEkz98mg1fvcUtiw7GTiQ==}
-    engines: {node: '>=18'}
-
-  '@sentry/opentelemetry@10.27.0':
-    resolution: {integrity: sha512-z2vXoicuGiqlRlgL9HaYJgkin89ncMpNQy0Kje6RWyhpzLe8BRgUXlgjux7WrSrcbopDdC1OttSpZsJ/Wjk7fg==}
-    engines: {node: '>=18'}
-    peerDependencies:
-      '@opentelemetry/api': ^1.9.0
-      '@opentelemetry/context-async-hooks': ^1.30.1 || ^2.1.0 || ^2.2.0
-      '@opentelemetry/core': ^1.30.1 || ^2.1.0 || ^2.2.0
-      '@opentelemetry/sdk-trace-base': ^1.30.1 || ^2.1.0 || ^2.2.0
-      '@opentelemetry/semantic-conventions': ^1.37.0
-
-  '@sentry/profiling-node@10.27.0':
-    resolution: {integrity: sha512-IMUdgNaiT7aji6/VDF5F1noY8LPpF3yFD6BjomQz72h0KeUrN/88S5MZNjcY7ZpW7wvI2yahUDLkMk11ScSMXQ==}
-    engines: {node: '>=18'}
-    hasBin: true
-
-  '@sentry/react-router@10.27.0':
-    resolution: {integrity: sha512-Ojxw2SGTG0RBndmuvOZNZ95Oh8a44aiAzXOdM6Y5foZs0T83qNZzuYaKBSwNHbWP70fBiDbqYhcv/emj4qrdsg==}
-    engines: {node: '>=20'}
-    peerDependencies:
-      '@react-router/node': 7.x
-      react: '>=18'
-      react-router: 7.x
-
-  '@sentry/react@10.27.0':
-    resolution: {integrity: sha512-xoIRBlO1IhLX/O9aQgVYW1F3Qhw8TdkOiZjh6mrPsnCpBLufsQ4aS1nDQi9miZuWeslW0s2zNy0ACBpICZR/sw==}
-    engines: {node: '>=18'}
-    peerDependencies:
-      react: ^16.14.0 || 17.x || 18.x || 19.x
-
-  '@sentry/vite-plugin@4.6.0':
-    resolution: {integrity: sha512-fMR2d+EHwbzBa0S1fp45SNUTProxmyFBp+DeBWWQOSP9IU6AH6ea2rqrpMAnp/skkcdW4z4LSRrOEpMZ5rWXLw==}
-    engines: {node: '>= 14'}
-
   '@standard-schema/spec@1.0.0':
     resolution: {integrity: sha512-m2bOd0f2RT9k8QJx1JN85cZYyH1RqFBdlwtkSlf4tBDYLCiiZnv1fIIwacK6cqwXavOydf0NPToMQgpKq+dVlA==}
 
@@ -3357,7 +3571,7 @@ packages:
   '@storybook/addon-styling-webpack@1.0.1':
     resolution: {integrity: sha512-5n+SXPfMTc4m7sWaJWPWjoHYWc6/B111M2Ia55toQ3GV4ON4vVlTgH9FX+EgCkDticElj99HLTMDJkHRj2yvkg==}
     peerDependencies:
-      webpack: ^5.0.0
+      webpack: 5.104.1
 
   '@storybook/addon-toolbars@8.6.14':
     resolution: {integrity: sha512-W/wEXT8h3VyZTVfWK/84BAcjAxTdtRiAkT2KAN0nbSHxxB5KEM1MjKpKu2upyzzMa3EywITqbfy4dP6lpkVTwQ==}
@@ -3389,7 +3603,7 @@ packages:
     resolution: {integrity: sha512-0ogI+toZJYaFptcFpRcRPOZ9/NrFUYhiaI09ggeEB1FF9ygHMVsobp4eaj4HjZI6V3x7cQwkd2ZmxAMQDBQuMA==}
     peerDependencies:
       storybook: ^9.1.10
-      vite: 7.1.11
+      vite: 7.3.1
 
   '@storybook/builder-webpack5@8.6.14':
     resolution: {integrity: sha512-YZYAqc6NBKoMTKZpjxnkMch6zDtMkBZdS/yaji1+wJX2QPFBwTbSh7SpeBxDp1S11gXSAJ4f1btUWeqSqo8nJA==}
@@ -3410,14 +3624,6 @@ packages:
     peerDependencies:
       storybook: ^8.6.14
 
-  '@storybook/core@8.6.14':
-    resolution: {integrity: sha512-1P/w4FSNRqP8j3JQBOi3yGt8PVOgSRbP66Ok520T78eJBeqx9ukCfl912PQZ7SPbW3TIunBwLXMZOjZwBB/JmA==}
-    peerDependencies:
-      prettier: ^2 || ^3
-    peerDependenciesMeta:
-      prettier:
-        optional: true
-
   '@storybook/csf-plugin@8.6.14':
     resolution: {integrity: sha512-dErtc9teAuN+eelN8FojzFE635xlq9cNGGGEu0WEmMUQ4iJ8pingvBO1N8X3scz4Ry7KnxX++NNf3J3gpxS8qQ==}
     peerDependencies:
@@ -3474,7 +3680,7 @@ packages:
     resolution: {integrity: sha512-KUqXC3oa9JuQ0kZJLBhVdS4lOneKTOopnNBK4tUAgoxWQ3u/IjzdueZjFr7gyBrXMoU6duutk3RQR9u8ZpYJ4Q==}
     peerDependencies:
       typescript: 5.8.3
-      webpack: '>= 4'
+      webpack: 5.104.1
 
   '@storybook/react-dom-shim@8.6.14':
     resolution: {integrity: sha512-0hixr3dOy3f3M+HBofp3jtMQMS+sqzjKNgl7Arfuj3fvjmyXOks/yGjDImySR4imPtEllvPZfhiQNlejheaInw==}
@@ -3497,7 +3703,7 @@ packages:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
       react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
       storybook: ^9.1.10
-      vite: 7.1.11
+      vite: 7.3.1
 
   '@storybook/react-webpack5@8.6.14':
     resolution: {integrity: sha512-ka0q9tQBLruhO38sybP/MkZzejqAltce7HJTJ2KKbUYUlbvuG7m56tBX7DVC5JaImbsO3b8fqOrKH7gRt4KYrQ==}
@@ -3571,24 +3777,28 @@ packages:
     engines: {node: '>=10'}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   '@swc/core-linux-arm64-musl@1.13.5':
     resolution: {integrity: sha512-9+ZxFN5GJag4CnYnq6apKTnnezpfJhCumyz0504/JbHLo+Ue+ZtJnf3RhyA9W9TINtLE0bC4hKpWi8ZKoETyOQ==}
     engines: {node: '>=10'}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   '@swc/core-linux-x64-gnu@1.13.5':
     resolution: {integrity: sha512-WD530qvHrki8Ywt/PloKUjaRKgstQqNGvmZl54g06kA+hqtSE2FTG9gngXr3UJxYu/cNAjJYiBifm7+w4nbHbA==}
     engines: {node: '>=10'}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   '@swc/core-linux-x64-musl@1.13.5':
     resolution: {integrity: sha512-Luj8y4OFYx4DHNQTWjdIuKTq2f5k6uSXICqx+FSabnXptaOBAbJHNbHT/06JZh6NRUouaf0mYXN0mcsqvkhd7Q==}
     engines: {node: '>=10'}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   '@swc/core-win32-arm64-msvc@1.13.5':
     resolution: {integrity: sha512-cZ6UpumhF9SDJvv4DA2fo9WIzlNFuKSkZpZmPG1c+4PFSEMy5DFOjBSllCvnqihCabzXzpn6ykCwBmHpy31vQw==}
@@ -3626,13 +3836,100 @@ packages:
   '@swc/types@0.1.24':
     resolution: {integrity: sha512-tjTMh3V4vAORHtdTprLlfoMptu1WfTZG9Rsca6yOKyNYsRr+MUXutKmliB17orgSZk5DpnDxs8GUdd/qwYxOng==}
 
-  '@tailwindcss/container-queries@0.1.1':
-    resolution: {integrity: sha512-p18dswChx6WnTSaJCSGx6lTmrGzNNvm2FtXmiO6AuA1V4U5REyoqwmT6kgAsIMdjo07QdAfYXHJ4hnMtfHzWgA==}
-    peerDependencies:
-      tailwindcss: '>=3.2.0'
+  '@tailwindcss/node@4.1.17':
+    resolution: {integrity: sha512-csIkHIgLb3JisEFQ0vxr2Y57GUNYh447C8xzwj89U/8fdW8LhProdxvnVH6U8M2Y73QKiTIH+LWbK3V2BBZsAg==}
 
-  '@tailwindcss/typography@0.5.16':
-    resolution: {integrity: sha512-0wDLwCVF5V3x3b1SGXPCDcdsbDHMBe+lkFzBRaHeLvNi+nrrnZ1lA18u+OTWO8iSWU2GxUOCvlXtDuqftc1oiA==}
+  '@tailwindcss/oxide-android-arm64@4.1.17':
+    resolution: {integrity: sha512-BMqpkJHgOZ5z78qqiGE6ZIRExyaHyuxjgrJ6eBO5+hfrfGkuya0lYfw8fRHG77gdTjWkNWEEm+qeG2cDMxArLQ==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [android]
+
+  '@tailwindcss/oxide-darwin-arm64@4.1.17':
+    resolution: {integrity: sha512-EquyumkQweUBNk1zGEU/wfZo2qkp/nQKRZM8bUYO0J+Lums5+wl2CcG1f9BgAjn/u9pJzdYddHWBiFXJTcxmOg==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@tailwindcss/oxide-darwin-x64@4.1.17':
+    resolution: {integrity: sha512-gdhEPLzke2Pog8s12oADwYu0IAw04Y2tlmgVzIN0+046ytcgx8uZmCzEg4VcQh+AHKiS7xaL8kGo/QTiNEGRog==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@tailwindcss/oxide-freebsd-x64@4.1.17':
+    resolution: {integrity: sha512-hxGS81KskMxML9DXsaXT1H0DyA+ZBIbyG/sSAjWNe2EDl7TkPOBI42GBV3u38itzGUOmFfCzk1iAjDXds8Oh0g==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.1.17':
+    resolution: {integrity: sha512-k7jWk5E3ldAdw0cNglhjSgv501u7yrMf8oeZ0cElhxU6Y2o7f8yqelOp3fhf7evjIS6ujTI3U8pKUXV2I4iXHQ==}
+    engines: {node: '>= 10'}
+    cpu: [arm]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-arm64-gnu@4.1.17':
+    resolution: {integrity: sha512-HVDOm/mxK6+TbARwdW17WrgDYEGzmoYayrCgmLEw7FxTPLcp/glBisuyWkFz/jb7ZfiAXAXUACfyItn+nTgsdQ==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  '@tailwindcss/oxide-linux-arm64-musl@4.1.17':
+    resolution: {integrity: sha512-HvZLfGr42i5anKtIeQzxdkw/wPqIbpeZqe7vd3V9vI3RQxe3xU1fLjss0TjyhxWcBaipk7NYwSrwTwK1hJARMg==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  '@tailwindcss/oxide-linux-x64-gnu@4.1.17':
+    resolution: {integrity: sha512-M3XZuORCGB7VPOEDH+nzpJ21XPvK5PyjlkSFkFziNHGLc5d6g3di2McAAblmaSUNl8IOmzYwLx9NsE7bplNkwQ==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  '@tailwindcss/oxide-linux-x64-musl@4.1.17':
+    resolution: {integrity: sha512-k7f+pf9eXLEey4pBlw+8dgfJHY4PZ5qOUFDyNf7SI6lHjQ9Zt7+NcscjpwdCEbYi6FI5c2KDTDWyf2iHcCSyyQ==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  '@tailwindcss/oxide-wasm32-wasi@4.1.17':
+    resolution: {integrity: sha512-cEytGqSSoy7zK4JRWiTCx43FsKP/zGr0CsuMawhH67ONlH+T79VteQeJQRO/X7L0juEUA8ZyuYikcRBf0vsxhg==}
+    engines: {node: '>=14.0.0'}
+    cpu: [wasm32]
+    bundledDependencies:
+      - '@napi-rs/wasm-runtime'
+      - '@emnapi/core'
+      - '@emnapi/runtime'
+      - '@tybys/wasm-util'
+      - '@emnapi/wasi-threads'
+      - tslib
+
+  '@tailwindcss/oxide-win32-arm64-msvc@4.1.17':
+    resolution: {integrity: sha512-JU5AHr7gKbZlOGvMdb4722/0aYbU+tN6lv1kONx0JK2cGsh7g148zVWLM0IKR3NeKLv+L90chBVYcJ8uJWbC9A==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@tailwindcss/oxide-win32-x64-msvc@4.1.17':
+    resolution: {integrity: sha512-SKWM4waLuqx0IH+FMDUw6R66Hu4OuTALFgnleKbqhgGU30DY20NORZMZUKgLRjQXNN2TLzKvh48QXTig4h4bGw==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [win32]
+
+  '@tailwindcss/oxide@4.1.17':
+    resolution: {integrity: sha512-F0F7d01fmkQhsTjXezGBLdrl1KresJTcI3DB8EkScCldyKp3Msz4hub4uyYaVnk88BAS1g5DQjjF6F5qczheLA==}
+    engines: {node: '>= 10'}
+
+  '@tailwindcss/postcss@4.1.17':
+    resolution: {integrity: sha512-+nKl9N9mN5uJ+M7dBOOCzINw94MPstNR/GtIhz1fpZysxL/4a+No64jCBD6CPN+bIHWFx3KWuu8XJRrj/572Dw==}
+
+  '@tailwindcss/typography@0.5.19':
+    resolution: {integrity: sha512-w31dd8HOx3k9vPtcQh5QHP9GwKcgbMp87j58qi6xgiBnFFtKEAgCWnDw4qUT8aHwkCp8bKvb/KGKWWHedP0AAg==}
     peerDependencies:
       tailwindcss: '>=3.0.0 || insiders || >=4.0.0-alpha.20 || >=4.0.0-beta.1'
 
@@ -3885,13 +4182,43 @@ packages:
       '@tiptap/core': ^2.7.0
       '@tiptap/pm': ^2.7.0
 
-  '@tokenizer/inflate@0.2.7':
-    resolution: {integrity: sha512-MADQgmZT1eKjp06jpI2yozxaU9uVs4GzzgSL+uEq7bVcJ9V1ZXQkeGNql1fsSI0gMy1vhvNTNbUqrx+pZfJVmg==}
+  '@tokenizer/inflate@0.4.1':
+    resolution: {integrity: sha512-2mAv+8pkG6GIZiF1kNg1jAjh27IDxEPKwdGul3snfztFerfPGI1LjDezZp3i7BElXompqEtPmoPx6c2wgtWsOA==}
     engines: {node: '>=18'}
 
   '@tokenizer/token@0.3.0':
     resolution: {integrity: sha512-OvjF+z51L3ov0OyAU0duzsYuvO01PH7x4t6DJx+guahgTnBHkhJdG7soQeTSFLWN3efnHyibZ4Z8l2EuWwJN3A==}
 
+  '@turbo/darwin-64@2.9.4':
+    resolution: {integrity: sha512-ZSlPqJ5Vqg/wgVw8P3AOVCIosnbBilOxLq7TMz3MN/9U46DUYfdG2jtfevNDufyxyrg98pcPs/GBgDRaaids6g==}
+    cpu: [x64]
+    os: [darwin]
+
+  '@turbo/darwin-arm64@2.9.4':
+    resolution: {integrity: sha512-9cjTWe4OiNlFMSRggPNh+TJlRs7MS5FWrHc96MOzft5vESWjjpvaadYPv5ykDW7b45mVHOF2U/W+48LoX9USWw==}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@turbo/linux-64@2.9.4':
+    resolution: {integrity: sha512-Cl1GjxqBXQ+r9KKowmXG+lhD1gclLp48/SE7NxL//66iaMytRw0uiphWGOkccD92iPiRjHLRUaA9lOTtgr5OCA==}
+    cpu: [x64]
+    os: [linux]
+
+  '@turbo/linux-arm64@2.9.4':
+    resolution: {integrity: sha512-j2hPAKVmGNN2EsKigEWD+43y9m7zaPhNAs6ptsyfq0u7evHHBAXAwOfv86OEMg/gvC+pwGip0i1CIm1bR1vYug==}
+    cpu: [arm64]
+    os: [linux]
+
+  '@turbo/windows-64@2.9.4':
+    resolution: {integrity: sha512-1jWPjCe9ZRmsDTXE7uzqfySNQspnUx0g6caqvwps+k/sc+fm9hC/4zRQKlXZLbVmP3Xxp601Ju71boegHdnYGw==}
+    cpu: [x64]
+    os: [win32]
+
+  '@turbo/windows-arm64@2.9.4':
+    resolution: {integrity: sha512-dlko15TQVu/BFYmIY018Y3covWMRQlUgAkD+OOk+Rokcfj6VY02Vv4mCfT/Zns6B4q8jGbOd6IZhnCFYsE8Viw==}
+    cpu: [arm64]
+    os: [win32]
+
   '@tybys/wasm-util@0.10.1':
     resolution: {integrity: sha512-9tTaPJLSiejZKx+Bmog4uSubteqTvFrVrURwkmHixBo0G4seD0zUxp98E1DzUBJxLQ3NPwXrGKDiVjwx/DpPsg==}
 
@@ -3916,6 +4243,9 @@ packages:
   '@types/chai@5.2.2':
     resolution: {integrity: sha512-8kB30R7Hwqf40JPiKhVzodJs2Qc1ZJ5zuT3uzw5Hq/dhNCl3G3l83jfpdI1e20BP348+fV7VIL/+FxaXkqBmWg==}
 
+  '@types/chroma-js@3.1.2':
+    resolution: {integrity: sha512-YBTQqArPN8A0niHXCwrO1z5x++a+6l0mLBykncUpr23oIPW7L4h39s6gokdK/bDrPmSh8+TjMmrhBPnyiaWPmQ==}
+
   '@types/compression@1.8.1':
     resolution: {integrity: sha512-kCFuWS0ebDbmxs0AXYn6e2r2nrGAb5KwQhknjSPSPgJcGd8+HVSILlUyFhGqML2gk39HcG7D1ydW9/qpYkN00Q==}
 
@@ -4003,9 +4333,6 @@ packages:
   '@types/json-schema@7.0.15':
     resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
 
-  '@types/json5@0.0.29':
-    resolution: {integrity: sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==}
-
   '@types/linkify-it@3.0.5':
     resolution: {integrity: sha512-yg6E+u0/+Zjva+buc3EIb+29XEg4wltq7cSmd4Uc2EE/1nUVmxyzpX6gUXD0V8jIrG0r7YeOGVIbYRkxeooCtw==}
 
@@ -4045,20 +4372,14 @@ packages:
   '@types/ms@2.1.0':
     resolution: {integrity: sha512-GsCCIZDE/p3i96vtEqx+7dBUGXrc7zeSK3wwPHIaRThS+9OhWIXRqzs4d6k1SVU8g91DrNRWxWUGhp5KXQb2VA==}
 
-  '@types/mysql@2.15.27':
-    resolution: {integrity: sha512-YfWiV16IY0OeBfBCk8+hXKmdTKrKlwKN1MNKAPBu5JYxLwBEZl7QzeEpGnlZb3VMGJrrGmB84gXiH+ofs/TezA==}
-
   '@types/node@22.12.0':
     resolution: {integrity: sha512-Fll2FZ1riMjNmlmJOdAyY5pUbkftXslB5DgEzlIuNaiWhXd00FhWxVC/r4yV/4wBb9JfImTu+jiSvXTkJ7F/gA==}
 
   '@types/parse-json@4.0.2':
     resolution: {integrity: sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==}
 
-  '@types/pg-pool@2.0.6':
-    resolution: {integrity: sha512-TaAUE5rq2VQYxab5Ts7WZhKNmuN78Q6PiFonTDdpbx8a1H0M1vhy3rhiMjl+e2iHmogyMw7jZF4FrE6eJUy5HQ==}
-
-  '@types/pg@8.15.6':
-    resolution: {integrity: sha512-NoaMtzhxOrubeL/7UZuNTrejB4MPAJ0RpxZqXQf2qXuVlTPuG6Y8p4u9dKRaue4yjmC7ZhzVO2/Yyyn25znrPQ==}
+  '@types/pdf-parse@1.1.5':
+    resolution: {integrity: sha512-kBfrSXsloMnUJOKi25s3+hRmkycHfLK6A09eRGqF/N8BkQoPUmaCr+q8Cli5FnfohEz/rsv82zAiPz/LXtOGhA==}
 
   '@types/prop-types@15.7.15':
     resolution: {integrity: sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw==}
@@ -4100,9 +4421,6 @@ packages:
   '@types/serve-static@1.15.8':
     resolution: {integrity: sha512-roei0UY3LhpOJvjbIP6ZZFngyLKl5dskOtDhxY5THRSpO+ZI+nzJ+m5yUMzGrp89YRa7lvknKkMYjqQFGwA7Sg==}
 
-  '@types/tedious@4.0.14':
-    resolution: {integrity: sha512-KHPsfX/FoVbUGbyYvk1q9MMQHLPeRZhRJZdO45Q4YjvFkv4hMNghCWTvy7rdKessBsmtz4euWCWAB6/tVpI1Iw==}
-
   '@types/triple-beam@1.3.5':
     resolution: {integrity: sha512-6WaYesThRMCl19iryMYP7/x2OVgCtbIVflDGFpWnb9irXI3UjYE4AzmYuiUKY1AJstGijoY+MgUszMgRxIYTYw==}
 
@@ -4124,211 +4442,16 @@ packages:
   '@types/ws@8.18.1':
     resolution: {integrity: sha512-ThVF6DCVhA8kUGy+aazFQ4kXQ7E1Ty7A3ypFOe0IcJV8O/M511G99AW24irKrW56Wt44yG9+ij8FaqoBGkuBXg==}
 
-  '@typescript-eslint/eslint-plugin@8.48.1':
-    resolution: {integrity: sha512-X63hI1bxl5ohelzr0LY5coufyl0LJNthld+abwxpCoo6Gq+hSqhKwci7MUWkXo67mzgUK6YFByhmaHmUcuBJmA==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    peerDependencies:
-      '@typescript-eslint/parser': ^8.48.1
-      eslint: ^8.57.0 || ^9.0.0
-      typescript: 5.8.3
-
-  '@typescript-eslint/parser@8.48.1':
-    resolution: {integrity: sha512-PC0PDZfJg8sP7cmKe6L3QIL8GZwU5aRvUFedqSIpw3B+QjRSUZeeITC2M5XKeMXEzL6wccN196iy3JLwKNvDVA==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    peerDependencies:
-      eslint: ^8.57.0 || ^9.0.0
-      typescript: 5.8.3
-
-  '@typescript-eslint/project-service@8.48.1':
-    resolution: {integrity: sha512-HQWSicah4s9z2/HifRPQ6b6R7G+SBx64JlFQpgSSHWPKdvCZX57XCbszg/bapbRsOEv42q5tayTYcEFpACcX1w==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    peerDependencies:
-      typescript: 5.8.3
-
-  '@typescript-eslint/project-service@8.49.0':
-    resolution: {integrity: sha512-/wJN0/DKkmRUMXjZUXYZpD1NEQzQAAn9QWfGwo+Ai8gnzqH7tvqS7oNVdTjKqOcPyVIdZdyCMoqN66Ia789e7g==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    peerDependencies:
-      typescript: 5.8.3
-
-  '@typescript-eslint/scope-manager@8.48.1':
-    resolution: {integrity: sha512-rj4vWQsytQbLxC5Bf4XwZ0/CKd362DkWMUkviT7DCS057SK64D5lH74sSGzhI6PDD2HCEq02xAP9cX68dYyg1w==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-
-  '@typescript-eslint/scope-manager@8.49.0':
-    resolution: {integrity: sha512-npgS3zi+/30KSOkXNs0LQXtsg9ekZ8OISAOLGWA/ZOEn0ZH74Ginfl7foziV8DT+D98WfQ5Kopwqb/PZOaIJGg==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-
-  '@typescript-eslint/tsconfig-utils@8.48.1':
-    resolution: {integrity: sha512-k0Jhs4CpEffIBm6wPaCXBAD7jxBtrHjrSgtfCjUvPp9AZ78lXKdTR8fxyZO5y4vWNlOvYXRtngSZNSn+H53Jkw==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    peerDependencies:
-      typescript: 5.8.3
-
-  '@typescript-eslint/tsconfig-utils@8.49.0':
-    resolution: {integrity: sha512-8prixNi1/6nawsRYxet4YOhnbW+W9FK/bQPxsGB1D3ZrDzbJ5FXw5XmzxZv82X3B+ZccuSxo/X8q9nQ+mFecWA==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    peerDependencies:
-      typescript: 5.8.3
-
-  '@typescript-eslint/type-utils@8.48.1':
-    resolution: {integrity: sha512-1jEop81a3LrJQLTf/1VfPQdhIY4PlGDBc/i67EVWObrtvcziysbLN3oReexHOM6N3jyXgCrkBsZpqwH0hiDOQg==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    peerDependencies:
-      eslint: ^8.57.0 || ^9.0.0
-      typescript: 5.8.3
-
-  '@typescript-eslint/types@8.48.1':
-    resolution: {integrity: sha512-+fZ3LZNeiELGmimrujsDCT4CRIbq5oXdHe7chLiW8qzqyPMnn1puNstCrMNVAqwcl2FdIxkuJ4tOs/RFDBVc/Q==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-
-  '@typescript-eslint/types@8.49.0':
-    resolution: {integrity: sha512-e9k/fneezorUo6WShlQpMxXh8/8wfyc+biu6tnAqA81oWrEic0k21RHzP9uqqpyBBeBKu4T+Bsjy9/b8u7obXQ==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-
-  '@typescript-eslint/typescript-estree@8.48.1':
-    resolution: {integrity: sha512-/9wQ4PqaefTK6POVTjJaYS0bynCgzh6ClJHGSBj06XEHjkfylzB+A3qvyaXnErEZSaxhIo4YdyBgq6j4RysxDg==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    peerDependencies:
-      typescript: 5.8.3
-
-  '@typescript-eslint/typescript-estree@8.49.0':
-    resolution: {integrity: sha512-jrLdRuAbPfPIdYNppHJ/D0wN+wwNfJ32YTAm10eJVsFmrVpXQnDWBn8niCSMlWjvml8jsce5E/O+86IQtTbJWA==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    peerDependencies:
-      typescript: 5.8.3
-
-  '@typescript-eslint/utils@8.48.1':
-    resolution: {integrity: sha512-fAnhLrDjiVfey5wwFRwrweyRlCmdz5ZxXz2G/4cLn0YDLjTapmN4gcCsTBR1N2rWnZSDeWpYtgLDsJt+FpmcwA==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    peerDependencies:
-      eslint: ^8.57.0 || ^9.0.0
-      typescript: 5.8.3
-
-  '@typescript-eslint/utils@8.49.0':
-    resolution: {integrity: sha512-N3W7rJw7Rw+z1tRsHZbK395TWSYvufBXumYtEGzypgMUthlg0/hmCImeA8hgO2d2G4pd7ftpxxul2J8OdtdaFA==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    peerDependencies:
-      eslint: ^8.57.0 || ^9.0.0
-      typescript: 5.8.3
-
-  '@typescript-eslint/visitor-keys@8.48.1':
-    resolution: {integrity: sha512-BmxxndzEWhE4TIEEMBs8lP3MBWN3jFPs/p6gPm/wkv02o41hI6cq9AuSmGAaTTHPtA1FTi2jBre4A9rm5ZmX+Q==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-
-  '@typescript-eslint/visitor-keys@8.49.0':
-    resolution: {integrity: sha512-LlKaciDe3GmZFphXIc79THF/YYBugZ7FS1pO581E/edlVVNbZKDy93evqmrfQ9/Y4uN0vVhX4iuchq26mK/iiA==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-
   '@ungap/structured-clone@1.3.0':
     resolution: {integrity: sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g==}
 
-  '@unrs/resolver-binding-android-arm-eabi@1.11.1':
-    resolution: {integrity: sha512-ppLRUgHVaGRWUx0R0Ut06Mjo9gBaBkg3v/8AxusGLhsIotbBLuRk51rAzqLC8gq6NyyAojEXglNjzf6R948DNw==}
-    cpu: [arm]
-    os: [android]
-
-  '@unrs/resolver-binding-android-arm64@1.11.1':
-    resolution: {integrity: sha512-lCxkVtb4wp1v+EoN+HjIG9cIIzPkX5OtM03pQYkG+U5O/wL53LC4QbIeazgiKqluGeVEeBlZahHalCaBvU1a2g==}
-    cpu: [arm64]
-    os: [android]
-
-  '@unrs/resolver-binding-darwin-arm64@1.11.1':
-    resolution: {integrity: sha512-gPVA1UjRu1Y/IsB/dQEsp2V1pm44Of6+LWvbLc9SDk1c2KhhDRDBUkQCYVWe6f26uJb3fOK8saWMgtX8IrMk3g==}
-    cpu: [arm64]
-    os: [darwin]
-
-  '@unrs/resolver-binding-darwin-x64@1.11.1':
-    resolution: {integrity: sha512-cFzP7rWKd3lZaCsDze07QX1SC24lO8mPty9vdP+YVa3MGdVgPmFc59317b2ioXtgCMKGiCLxJ4HQs62oz6GfRQ==}
-    cpu: [x64]
-    os: [darwin]
-
-  '@unrs/resolver-binding-freebsd-x64@1.11.1':
-    resolution: {integrity: sha512-fqtGgak3zX4DCB6PFpsH5+Kmt/8CIi4Bry4rb1ho6Av2QHTREM+47y282Uqiu3ZRF5IQioJQ5qWRV6jduA+iGw==}
-    cpu: [x64]
-    os: [freebsd]
-
-  '@unrs/resolver-binding-linux-arm-gnueabihf@1.11.1':
-    resolution: {integrity: sha512-u92mvlcYtp9MRKmP+ZvMmtPN34+/3lMHlyMj7wXJDeXxuM0Vgzz0+PPJNsro1m3IZPYChIkn944wW8TYgGKFHw==}
-    cpu: [arm]
-    os: [linux]
-
-  '@unrs/resolver-binding-linux-arm-musleabihf@1.11.1':
-    resolution: {integrity: sha512-cINaoY2z7LVCrfHkIcmvj7osTOtm6VVT16b5oQdS4beibX2SYBwgYLmqhBjA1t51CarSaBuX5YNsWLjsqfW5Cw==}
-    cpu: [arm]
-    os: [linux]
-
-  '@unrs/resolver-binding-linux-arm64-gnu@1.11.1':
-    resolution: {integrity: sha512-34gw7PjDGB9JgePJEmhEqBhWvCiiWCuXsL9hYphDF7crW7UgI05gyBAi6MF58uGcMOiOqSJ2ybEeCvHcq0BCmQ==}
-    cpu: [arm64]
-    os: [linux]
-
-  '@unrs/resolver-binding-linux-arm64-musl@1.11.1':
-    resolution: {integrity: sha512-RyMIx6Uf53hhOtJDIamSbTskA99sPHS96wxVE/bJtePJJtpdKGXO1wY90oRdXuYOGOTuqjT8ACccMc4K6QmT3w==}
-    cpu: [arm64]
-    os: [linux]
-
-  '@unrs/resolver-binding-linux-ppc64-gnu@1.11.1':
-    resolution: {integrity: sha512-D8Vae74A4/a+mZH0FbOkFJL9DSK2R6TFPC9M+jCWYia/q2einCubX10pecpDiTmkJVUH+y8K3BZClycD8nCShA==}
-    cpu: [ppc64]
-    os: [linux]
-
-  '@unrs/resolver-binding-linux-riscv64-gnu@1.11.1':
-    resolution: {integrity: sha512-frxL4OrzOWVVsOc96+V3aqTIQl1O2TjgExV4EKgRY09AJ9leZpEg8Ak9phadbuX0BA4k8U5qtvMSQQGGmaJqcQ==}
-    cpu: [riscv64]
-    os: [linux]
-
-  '@unrs/resolver-binding-linux-riscv64-musl@1.11.1':
-    resolution: {integrity: sha512-mJ5vuDaIZ+l/acv01sHoXfpnyrNKOk/3aDoEdLO/Xtn9HuZlDD6jKxHlkN8ZhWyLJsRBxfv9GYM2utQ1SChKew==}
-    cpu: [riscv64]
-    os: [linux]
-
-  '@unrs/resolver-binding-linux-s390x-gnu@1.11.1':
-    resolution: {integrity: sha512-kELo8ebBVtb9sA7rMe1Cph4QHreByhaZ2QEADd9NzIQsYNQpt9UkM9iqr2lhGr5afh885d/cB5QeTXSbZHTYPg==}
-    cpu: [s390x]
-    os: [linux]
-
-  '@unrs/resolver-binding-linux-x64-gnu@1.11.1':
-    resolution: {integrity: sha512-C3ZAHugKgovV5YvAMsxhq0gtXuwESUKc5MhEtjBpLoHPLYM+iuwSj3lflFwK3DPm68660rZ7G8BMcwSro7hD5w==}
-    cpu: [x64]
-    os: [linux]
-
-  '@unrs/resolver-binding-linux-x64-musl@1.11.1':
-    resolution: {integrity: sha512-rV0YSoyhK2nZ4vEswT/QwqzqQXw5I6CjoaYMOX0TqBlWhojUf8P94mvI7nuJTeaCkkds3QE4+zS8Ko+GdXuZtA==}
-    cpu: [x64]
-    os: [linux]
-
-  '@unrs/resolver-binding-wasm32-wasi@1.11.1':
-    resolution: {integrity: sha512-5u4RkfxJm+Ng7IWgkzi3qrFOvLvQYnPBmjmZQ8+szTK/b31fQCnleNl1GgEt7nIsZRIf5PLhPwT0WM+q45x/UQ==}
-    engines: {node: '>=14.0.0'}
-    cpu: [wasm32]
-
-  '@unrs/resolver-binding-win32-arm64-msvc@1.11.1':
-    resolution: {integrity: sha512-nRcz5Il4ln0kMhfL8S3hLkxI85BXs3o8EYoattsJNdsX4YUU89iOkVn7g0VHSRxFuVMdM4Q1jEpIId1Ihim/Uw==}
-    cpu: [arm64]
-    os: [win32]
-
-  '@unrs/resolver-binding-win32-ia32-msvc@1.11.1':
-    resolution: {integrity: sha512-DCEI6t5i1NmAZp6pFonpD5m7i6aFrpofcp4LA2i8IIq60Jyo28hamKBxNrZcyOwVOZkgsRp9O2sXWBWP8MnvIQ==}
-    cpu: [ia32]
-    os: [win32]
-
-  '@unrs/resolver-binding-win32-x64-msvc@1.11.1':
-    resolution: {integrity: sha512-lrW200hZdbfRtztbygyaq/6jP6AKE8qQN2KvPcJ+x7wiD038YtnYtZ82IMNJ69GJibV7bwL3y9FgK+5w/pYt6g==}
-    cpu: [x64]
-    os: [win32]
-
-  '@vitest/eslint-plugin@1.5.1':
-    resolution: {integrity: sha512-t49CNERe/YadnLn90NTTKJLKzs99xBkXElcoUTLodG6j1G0Q7jy3mXqqiHd3N5aryG2KkgOg4UAoGwgwSrZqKQ==}
-    engines: {node: '>=18'}
+  '@vitest/coverage-v8@4.0.17':
+    resolution: {integrity: sha512-/6zU2FLGg0jsd+ePZcwHRy3+WpNTBBhDY56P4JTRqUN/Dp6CvOEa9HrikcQ4KfV2b2kAHUFB4dl1SuocWXSFEw==}
     peerDependencies:
-      eslint: '>=8.57.0'
-      typescript: 5.8.3
-      vitest: '*'
+      '@vitest/browser': 4.0.17
+      vitest: 4.0.17
     peerDependenciesMeta:
-      typescript:
-        optional: true
-      vitest:
+      '@vitest/browser':
         optional: true
 
   '@vitest/expect@2.0.5':
@@ -4344,7 +4467,7 @@ packages:
     resolution: {integrity: sha512-46ryTE9RZO/rfDd7pEqFl7etuyzekzEhUbTW3BvmeO/BcCMEgq59BKhek3dXDWgAj4oMK6OZi+vRr1wPW6qjEQ==}
     peerDependencies:
       msw: ^2.4.9
-      vite: 7.1.11
+      vite: 7.3.1
     peerDependenciesMeta:
       msw:
         optional: true
@@ -4355,7 +4478,7 @@ packages:
     resolution: {integrity: sha512-CZ28GLfOEIFkvCFngN8Sfx5h+Se0zN+h4B7yOsPVCcgtiO7t5jt9xQh2E1UkFep+eb9fjyMfuC5gBypwb07fvQ==}
     peerDependencies:
       msw: ^2.4.9
-      vite: 7.1.11
+      vite: 7.3.1
     peerDependenciesMeta:
       msw:
         optional: true
@@ -4374,6 +4497,9 @@ packages:
   '@vitest/pretty-format@4.0.15':
     resolution: {integrity: sha512-SWdqR8vEv83WtZcrfLNqlqeQXlQLh2iilO1Wk1gv4eiHKjEzvgHb2OVc3mIPyhZE6F+CtfYjNlDJwP5MN6Km7A==}
 
+  '@vitest/pretty-format@4.0.17':
+    resolution: {integrity: sha512-Ah3VAYmjcEdHg6+MwFE17qyLqBHZ+ni2ScKCiW2XrlSBV4H3Z7vYfPfz7CWQ33gyu76oc0Ai36+kgLU3rfF4nw==}
+
   '@vitest/runner@4.0.15':
     resolution: {integrity: sha512-+A+yMY8dGixUhHmNdPUxOh0la6uVzun86vAbuMT3hIDxMrAOmn5ILBHm8ajrqHE0t8R9T1dGnde1A5DTnmi3qw==}
 
@@ -4401,6 +4527,9 @@ packages:
   '@vitest/utils@4.0.15':
     resolution: {integrity: sha512-HXjPW2w5dxhTD0dLwtYHDnelK3j8sR8cWIaLxr22evTyY6q8pRCjZSmhRWVjBaOVXChQd6AwMzi9pucorXCPZA==}
 
+  '@vitest/utils@4.0.17':
+    resolution: {integrity: sha512-RG6iy+IzQpa9SB8HAFHJ9Y+pTzI+h8553MrciN9eC6TFBErqrQaTas4vG+MVj8S4uKk8uTT2p0vgZPnTdxd96w==}
+
   '@webassemblyjs/ast@1.14.1':
     resolution: {integrity: sha512-nuBEDgQfm1ccRp/8bCQrx1frohyufl4JlbMMZ4P1wpeOfDhF6FQkxZJ1b/e+PLwr6X1Nhw6OLme5usuBWYBvuQ==}
 
@@ -4462,31 +4591,17 @@ packages:
     resolution: {integrity: sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==}
     engines: {node: '>= 0.6'}
 
-  acorn-import-attributes@1.9.5:
-    resolution: {integrity: sha512-n02Vykv5uA3eHGM/Z2dQrcD56kL8TyDb2p1+0P83PClMnC/nc+anbQRhIOWnSq4Ke/KvDPrY3C9hDtC/A3eHnQ==}
-    peerDependencies:
-      acorn: ^8
-
   acorn-import-phases@1.0.4:
     resolution: {integrity: sha512-wKmbr/DDiIXzEOiWrTTUcDm24kQ2vGfZQvM2fwg2vXqR5uW6aapr7ObPtj1th32b9u90/Pf4AItvdTh42fBmVQ==}
     engines: {node: '>=10.13.0'}
     peerDependencies:
       acorn: ^8.14.0
 
-  acorn-jsx@5.3.2:
-    resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
-    peerDependencies:
-      acorn: ^6.0.0 || ^7.0.0 || ^8.0.0
-
   acorn@8.15.0:
     resolution: {integrity: sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==}
     engines: {node: '>=0.4.0'}
     hasBin: true
 
-  agent-base@6.0.2:
-    resolution: {integrity: sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==}
-    engines: {node: '>= 6.0.0'}
-
   agent-base@7.1.4:
     resolution: {integrity: sha512-MnA+YT8fwfJPgBx3m60MNqakm30XOkyIoH1y6huTQvC0PwZG7ki8NacLBcrPbNoo8vEZy7Jpuk7+jMO+CUovTQ==}
     engines: {node: '>= 14'}
@@ -4494,7 +4609,7 @@ packages:
   ajv-formats@2.1.1:
     resolution: {integrity: sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==}
     peerDependencies:
-      ajv: ^8.0.0
+      ajv: 8.18.0
     peerDependenciesMeta:
       ajv:
         optional: true
@@ -4502,21 +4617,18 @@ packages:
   ajv-keywords@3.5.2:
     resolution: {integrity: sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==}
     peerDependencies:
-      ajv: ^6.9.1
+      ajv: 6.14.0
 
   ajv-keywords@5.1.0:
     resolution: {integrity: sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==}
     peerDependencies:
-      ajv: ^8.8.2
+      ajv: 8.18.0
 
-  ajv@6.12.6:
-    resolution: {integrity: sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==}
+  ajv@6.14.0:
+    resolution: {integrity: sha512-IWrosm/yrn43eiKqkfkHis7QioDleaXQHdDVPKg0FSwwd/DuvyX79TZnFOnYpB7dcsFAMmtFztZuXPDvSePkFw==}
 
-  ajv@8.12.0:
-    resolution: {integrity: sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==}
-
-  ajv@8.17.1:
-    resolution: {integrity: sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==}
+  ajv@8.18.0:
+    resolution: {integrity: sha512-PlXPeEWMXMZ7sPYOHqmDyCJzcfNrUr3fGNKtezX14ykXOEIvyK81d+qydx89KY5O71FKMPaQ2vBfBFI5NHR63A==}
 
   ansi-align@3.0.1:
     resolution: {integrity: sha512-IOfwwBF5iczOjp/WeY4YxyjqAFMQoZufdQWDd19SEExbVLNXqvpzSJ/M7Za4/sCPmQ0+GRquoA7bGcINcxew6w==}
@@ -4550,10 +4662,6 @@ packages:
     resolution: {integrity: sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==}
     engines: {node: '>=10'}
 
-  ansi-styles@6.2.1:
-    resolution: {integrity: sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==}
-    engines: {node: '>=12'}
-
   ansi-styles@6.2.3:
     resolution: {integrity: sha512-4Dj6M28JB+oAH8kFkTLUo+a2jwOFkuqb3yucU0CANcRRUbxS0cP0nZYCGjcc3BNXwRIsUVmDGgzawme7zvJHvg==}
     engines: {node: '>=12'}
@@ -4562,9 +4670,6 @@ packages:
     resolution: {integrity: sha512-HqZ5rWlFjGiV0tDm3UxxgNRqsOTniqoKZu0pIAfh7TZQMGuZK+hH0drySty0si0QXj1ieop4+SkSfPZBPPkHig==}
     engines: {node: '>=14'}
 
-  any-promise@1.3.0:
-    resolution: {integrity: sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==}
-
   anymatch@3.1.3:
     resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==}
     engines: {node: '>= 8'}
@@ -4589,41 +4694,9 @@ packages:
     resolution: {integrity: sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==}
     engines: {node: '>= 0.4'}
 
-  array-buffer-byte-length@1.0.2:
-    resolution: {integrity: sha512-LHE+8BuR7RYGDKvnrmcuSq3tDcKv9OFEXQt/HpbZhY7V6h0zlUXutnAD82GiFx9rdieCMjkvtcsPqBwgUl1Iiw==}
-    engines: {node: '>= 0.4'}
-
   array-flatten@1.1.1:
     resolution: {integrity: sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg==}
 
-  array-includes@3.1.9:
-    resolution: {integrity: sha512-FmeCCAenzH0KH381SPT5FZmiA/TmpndpcaShhfgEN9eCVjnFBqq3l1xrI42y8+PPLI6hypzou4GXw00WHmPBLQ==}
-    engines: {node: '>= 0.4'}
-
-  array.prototype.findlast@1.2.5:
-    resolution: {integrity: sha512-CVvd6FHg1Z3POpBLxO6E6zr+rSKEQ9L6rZHAaY7lLfhKsWYUBBOuMs0e9o24oopj6H+geRCX0YJ+TJLBK2eHyQ==}
-    engines: {node: '>= 0.4'}
-
-  array.prototype.findlastindex@1.2.6:
-    resolution: {integrity: sha512-F/TKATkzseUExPlfvmwQKGITM3DGTK+vkAsCZoDc5daVygbJBnjEUCbgkAvVFsgfXfX4YIqZ/27G3k3tdXrTxQ==}
-    engines: {node: '>= 0.4'}
-
-  array.prototype.flat@1.3.3:
-    resolution: {integrity: sha512-rwG/ja1neyLqCuGZ5YYrznA62D4mZXg0i1cIskIUKSiqF3Cje9/wXAls9B9s1Wa2fomMsIv8czB8jZcPmxCXFg==}
-    engines: {node: '>= 0.4'}
-
-  array.prototype.flatmap@1.3.3:
-    resolution: {integrity: sha512-Y7Wt51eKJSyi80hFrJCePGGNo5ktJCslFuboqJsbf57CCPcm5zztluPlc4/aD8sWsKvlwatezpV4U1efk8kpjg==}
-    engines: {node: '>= 0.4'}
-
-  array.prototype.tosorted@1.1.4:
-    resolution: {integrity: sha512-p6Fx8B7b7ZhL/gmUsAy0D15WhvDccw3mnGNbZpi3pmeJdxtWsj2jEaI4Y6oo3XiHfzuSgPwKc04MYt6KgvC/wA==}
-    engines: {node: '>= 0.4'}
-
-  arraybuffer.prototype.slice@1.0.4:
-    resolution: {integrity: sha512-BNoCY6SXXPQ7gF2opIP4GBE+Xw7U+pHMYKuzjgCN3GwiaIR09UUeKfheyIry77QtrCBlC0KK0q5/TER/tYh3PQ==}
-    engines: {node: '>= 0.4'}
-
   assertion-error@2.0.1:
     resolution: {integrity: sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==}
     engines: {node: '>=12'}
@@ -4632,9 +4705,6 @@ packages:
     resolution: {integrity: sha512-m1Q/RaVOnTp9JxPX+F+Zn7IcLYMzM8kZofDImfsKZd8MbR+ikdOzTeztStWqfrqIxZnYWryyI9ePm3NGjnZgGw==}
     engines: {node: '>=20.19.0'}
 
-  ast-types-flow@0.0.8:
-    resolution: {integrity: sha512-OH/2E5Fg20h2aPrbe+QL8JZQFko0YZaF+j4mnQ7BGhfavO7OpSLa8a0y9sBwomHdSbkhTS8TQNayBfnW5DwbvQ==}
-
   ast-types@0.14.2:
     resolution: {integrity: sha512-O0yuUDnZeQDL+ncNGlJ78BiO4jnYI3bvMsD5prT0/nsgijG/LpNBIr63gTjVTNsiGkgQhiyCShTgxt8oXOrklA==}
     engines: {node: '>=4'}
@@ -4643,9 +4713,8 @@ packages:
     resolution: {integrity: sha512-6t10qk83GOG8p0vKmaCr8eiilZwO171AvbROMtvvNiwrTly62t+7XkA8RdIIVbpMhCASAsxgAzdRSwh6nw/5Dg==}
     engines: {node: '>=4'}
 
-  async-function@1.0.0:
-    resolution: {integrity: sha512-hsU18Ae8CDTR6Kgu9DYf0EbCr/a5iGL0rytQDobUcdpYOKokk8LEjVphnXkDkgpi0wYVsqrXuP0bZxJaTqdgoA==}
-    engines: {node: '>= 0.4'}
+  ast-v8-to-istanbul@0.3.10:
+    resolution: {integrity: sha512-p4K7vMz2ZSk3wN8l5o3y2bJAoZXT3VuJI5OLTATY/01CYWumWvwkUw0SqDBnNq6IiTO3qDa1eSQDibAV8g7XOQ==}
 
   async-lock@1.4.1:
     resolution: {integrity: sha512-Az2ZTpuytrtqENulXwO3GGv1Bztugx6TT37NIo7imr/Qo0gsYiGtSdBa2B6fsXhTpVZDNfu1Qn3pk531e3q+nQ==}
@@ -4671,16 +4740,8 @@ packages:
     resolution: {integrity: sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==}
     engines: {node: '>= 0.4'}
 
-  axe-core@4.10.3:
-    resolution: {integrity: sha512-Xm7bpRXnDSX2YE2YFfBk2FnF0ep6tmG7xPh8iHee8MIcrgq762Nkce856dYtJYLkuIoYZvGfTs/PbZhideTcEg==}
-    engines: {node: '>=4'}
-
-  axios@1.12.0:
-    resolution: {integrity: sha512-oXTDccv8PcfjZmPGlWsPSwtOJCZ/b6W5jAMCNcfwJbCzDckwG0jrYJFaWH1yvivfCXjVzV/SPDEhMB3Q+DSurg==}
-
-  axobject-query@4.1.0:
-    resolution: {integrity: sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==}
-    engines: {node: '>= 0.4'}
+  axios@1.13.5:
+    resolution: {integrity: sha512-cz4ur7Vb0xS4/KUN0tPWe44eqxrIu31me+fbang3ijiNscE129POzipJJA6zniq2C/Z6sJCjMimjS8Lc/GAs8Q==}
 
   babel-dead-code-elimination@1.0.10:
     resolution: {integrity: sha512-DV5bdJZTzZ0zn0DC24v3jD7Mnidh6xhKa4GfKCbq3sfW8kaWhDdZjP3i81geA8T33tdYqWKw4D3fVv0CwEgKVA==}
@@ -4692,8 +4753,9 @@ packages:
   bail@2.0.2:
     resolution: {integrity: sha512-0xO6mYd7JB2YesxDKplafRpsiOzPt9V02ddPCLbY1xYGPOX24NTyN50qnUxgCPcSoYMhKpAuBTjQoRZCAkUDRw==}
 
-  balanced-match@1.0.2:
-    resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
+  balanced-match@4.0.4:
+    resolution: {integrity: sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA==}
+    engines: {node: 18 || 20 || >=22}
 
   base64-js@0.0.8:
     resolution: {integrity: sha512-3XSA2cR/h/73EzlXXdU6YNycmYI7+kicTxks4eJg2g39biHR84slg2+des+p7iHYhbRg/udIS4TD53WabcOUkw==}
@@ -4702,8 +4764,8 @@ packages:
   base64-js@1.5.1:
     resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==}
 
-  baseline-browser-mapping@2.8.4:
-    resolution: {integrity: sha512-L+YvJwGAgwJBV1p6ffpSTa2KRc69EeeYGYjRVWKs0GKrK+LON0GC0gV+rKSNtALEDvMDqkvCFq9r1r94/Gjwxw==}
+  baseline-browser-mapping@2.9.19:
+    resolution: {integrity: sha512-ipDqC8FrAl/76p2SSWKSI+H9tFwm7vYqXQrItCuiVPt26Km0jS+NzSsBWAaBusvSbQcfJG+JitdMm+wZAgTYqg==}
     hasBin: true
 
   basic-auth@2.0.1:
@@ -4744,8 +4806,9 @@ packages:
     resolution: {integrity: sha512-j//dBVuyacJbvW+tvZ9HuH03fZ46QcaKvvhZickZqtB271DxJ7SNRSNxrV/dZX0085m7hISRZWbzWlJvx/rHSg==}
     engines: {node: '>=14.16'}
 
-  brace-expansion@2.0.2:
-    resolution: {integrity: sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==}
+  brace-expansion@5.0.5:
+    resolution: {integrity: sha512-VZznLgtwhn+Mact9tfiwx64fA9erHH/MCXEUfB/0bX/6Fz6ny5EGTXYltMocqg4xFAQZtnO3DHWWXi8RiuN7cQ==}
+    engines: {node: 18 || 20 || >=22}
 
   braces@3.0.3:
     resolution: {integrity: sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==}
@@ -4760,8 +4823,8 @@ packages:
   browserify-zlib@0.2.0:
     resolution: {integrity: sha512-Z942RysHXmJrhqk88FmKBVq/v5tqmSkDz7p54G/MGyjMnCFFnC79XWNbg+Vta8W6Wb2qtSZTSxIGkJrRpCFEiA==}
 
-  browserslist@4.26.2:
-    resolution: {integrity: sha512-ECFzp6uFOSB+dcZ5BK/IBaGWssbSYBHvuMeMt3MMFyhI0Z8SqGgEkBLARgpRH3hutIgPVsALcMwbDrJqPxQ65A==}
+  browserslist@4.28.1:
+    resolution: {integrity: sha512-ZC5Bd0LgJXgwGqUknZY/vkUQ04r8NXnJZ3yYi4vDmSiZmC/pdSN0NbNRPxZpbtO4uAfDUAFffO8IZoM3Gj8IkA==}
     engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
     hasBin: true
 
@@ -4802,10 +4865,6 @@ packages:
   camel-case@4.1.2:
     resolution: {integrity: sha512-gxGWBrTT1JuMx6R+o5PTXMmUnhnVzLQ9SNutD4YqKtI6ap897t3tKECYla6gCWEkplXnlNybEkZg9GEGxKFCgw==}
 
-  camelcase-css@2.0.1:
-    resolution: {integrity: sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==}
-    engines: {node: '>= 6'}
-
   camelcase@7.0.1:
     resolution: {integrity: sha512-xlx1yCK2Oc1APsPXDL2LdlNP6+uu8OCDdhOBSVT279M/S+y75O30C2VuD8T2ogdePBBl7PfPF4504tnLgX3zfw==}
     engines: {node: '>=14.16'}
@@ -4871,6 +4930,9 @@ packages:
     resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==}
     engines: {node: '>= 8.10.0'}
 
+  chroma-js@3.2.0:
+    resolution: {integrity: sha512-os/OippSlX1RlWWr+QDPcGUZs0uoqr32urfxESG9U93lhUfbnlyckte84Q8P1UQY/qth983AS1JONKmLS4T0nw==}
+
   chromatic@11.29.0:
     resolution: {integrity: sha512-yisBlntp9hHVj19lIQdpTlcYIXuU9H/DbFuu6tyWHmj6hWT2EtukCCcxYXL78XdQt1vm2GfIrtgtKpj/Rzmo4A==}
     hasBin: true
@@ -4964,6 +5026,10 @@ packages:
   color@3.2.1:
     resolution: {integrity: sha512-aBl7dZI9ENN6fUGC7mWpMTPNHmWUSNan9tuWN6ahh5ZLNk9baLJOnSMlrQkHcrfFgz2/RigjUVAjdx36VcemKA==}
 
+  color@4.2.3:
+    resolution: {integrity: sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==}
+    engines: {node: '>=12.5.0'}
+
   colorette@2.0.20:
     resolution: {integrity: sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==}
 
@@ -4980,10 +5046,6 @@ packages:
   comma-separated-tokens@2.0.3:
     resolution: {integrity: sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==}
 
-  commander@11.1.0:
-    resolution: {integrity: sha512-yPVavfyCcRhmorC7rWlkHn15b4wDVgVmBA7kV4QVBsF7kv/9TKJAbAXVTxvTnwP8HHKjRCJDClKbciiYS7p0DQ==}
-    engines: {node: '>=16'}
-
   commander@14.0.2:
     resolution: {integrity: sha512-TywoWNNRbhoD0BXs1P3ZEScW8W5iKrnbithIl0YH+uCmBd0QpPOA8yc82DS3BIE5Ma6FnBVUsJ7wVUDz4dvOWQ==}
     engines: {node: '>=20'}
@@ -4991,10 +5053,6 @@ packages:
   commander@2.20.3:
     resolution: {integrity: sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==}
 
-  commander@4.1.1:
-    resolution: {integrity: sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==}
-    engines: {node: '>= 6'}
-
   commander@8.3.0:
     resolution: {integrity: sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==}
     engines: {node: '>= 12'}
@@ -5013,6 +5071,9 @@ packages:
   compute-scroll-into-view@3.1.1:
     resolution: {integrity: sha512-VRhuHOLoKYOy4UbilLbUzbYg93XLjv2PncJC50EuTWPA3gaja1UjBsUP/D/9/juV3vQFr6XBEzn9KCAHdUvOHw==}
 
+  confbox@0.2.4:
+    resolution: {integrity: sha512-ysOGlgTFbN2/Y6Cg3Iye8YKulHw+R2fNXHrgSmXISQdMnomY6eNDprVdW9R5xBguEqI954+S6709UyiO7B+6OQ==}
+
   constant-case@3.0.4:
     resolution: {integrity: sha512-I2hSBi7Vvs7BEuJDr5dDHfzb/Ruj3FyvFyh7KLilAjNQw3Be+xgqUBA2W6scVEcL0hL1dwPRtIqEPVUCKkSsyQ==}
 
@@ -5045,9 +5106,6 @@ packages:
     resolution: {integrity: sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==}
     engines: {node: '>=18'}
 
-  core-js@3.45.1:
-    resolution: {integrity: sha512-L4NPsJlCfZsPeXukyzHFlg/i7IIVwHSItR0wg0FLNqYClJ4MQYTYLbC7EkjKYRLZF2iof2MUgN0EGy7MdQFChg==}
-
   cors@2.8.5:
     resolution: {integrity: sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==}
     engines: {node: '>= 0.10'}
@@ -5077,7 +5135,7 @@ packages:
     engines: {node: '>= 12.13.0'}
     peerDependencies:
       '@rspack/core': 0.x || 1.x
-      webpack: ^5.0.0
+      webpack: 5.104.1
     peerDependenciesMeta:
       '@rspack/core':
         optional: true
@@ -5157,25 +5215,10 @@ packages:
     resolution: {integrity: sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==}
     engines: {node: '>=12'}
 
-  damerau-levenshtein@1.0.8:
-    resolution: {integrity: sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==}
-
   data-urls@5.0.0:
     resolution: {integrity: sha512-ZYP5VBHshaDAiVZxjbRVcFJpc+4xGgT0bK3vzy1HLN8jTO975HEbuYzZJcHoQEY5K1a0z8YayJkyVETa08eNTg==}
     engines: {node: '>=18'}
 
-  data-view-buffer@1.0.2:
-    resolution: {integrity: sha512-EmKO5V3OLXh1rtK2wgXRansaK1/mtVdTUEiEI0W8RkvgT05kfxaH29PliLnpLP73yYO6142Q72QNa8Wx/A5CqQ==}
-    engines: {node: '>= 0.4'}
-
-  data-view-byte-length@1.0.2:
-    resolution: {integrity: sha512-tuhGbE6CfTM9+5ANGf+oQb72Ky/0+s3xKUpHvShfiz2RxMFgFPjsXuRLBVMtvMs15awe45SRb83D6wH4ew6wlQ==}
-    engines: {node: '>= 0.4'}
-
-  data-view-byte-offset@1.0.1:
-    resolution: {integrity: sha512-BS8PfmtDGnrgYdOonGZQdLZslWIeCGFP9tpan0hi1Co2Zr2NKADsvGYA8XxuG/4UWgJ6Cjtv+YJnB6MM69QGlQ==}
-    engines: {node: '>= 0.4'}
-
   date-fns-jalali@4.1.0-0:
     resolution: {integrity: sha512-hTIP/z+t+qKwBDcmmsnmjWTduxCg+5KfdqWQvb2X/8C9+knYY6epN/pfxdDuyVlSVeFz0sM5eEfwIUQ70U4ckg==}
 
@@ -5190,14 +5233,6 @@ packages:
       supports-color:
         optional: true
 
-  debug@3.2.7:
-    resolution: {integrity: sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==}
-    peerDependencies:
-      supports-color: '*'
-    peerDependenciesMeta:
-      supports-color:
-        optional: true
-
   debug@4.4.3:
     resolution: {integrity: sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==}
     engines: {node: '>=6.0'}
@@ -5239,9 +5274,6 @@ packages:
     resolution: {integrity: sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==}
     engines: {node: '>=4.0.0'}
 
-  deep-is@0.1.4:
-    resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
-
   deepmerge@4.3.1:
     resolution: {integrity: sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==}
     engines: {node: '>=0.10.0'}
@@ -5258,8 +5290,8 @@ packages:
     resolution: {integrity: sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==}
     engines: {node: '>= 0.4'}
 
-  defu@6.1.4:
-    resolution: {integrity: sha512-mEQCMmwJu317oSz8CwdIOdwf3xMif1ttiM8LTufzc3g6kR+9Pe236twL8j3IYT1F7GfRgGcW6MWxzZjLIkuHIg==}
+  defu@6.1.5:
+    resolution: {integrity: sha512-pwdBJxJuJXmqrLO6s0VBmfbRz+G7FUzkjldAsdi9Yrv86mPyzq0ll1o8+8gB4Gsr6GJHbK1Lh3ngllgTInDCjA==}
 
   delayed-stream@1.0.0:
     resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==}
@@ -5305,24 +5337,10 @@ packages:
   dfa@1.2.0:
     resolution: {integrity: sha512-ED3jP8saaweFTjeGX8HQPjeC1YYyZs98jGNZx6IiBvxW7JG5v492kamAQB3m2wop07CvU/RQmzcKr6bgcC5D/Q==}
 
-  didyoumean@1.2.2:
-    resolution: {integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==}
-
-  diff@5.2.0:
-    resolution: {integrity: sha512-uIFDxqpRZGZ6ThOk84hEfqWoHx2devRFvpTZcTHur85vImfaxUbTW9Ryh4CpCuDnToOP1CEtXKIgytHBPVff5A==}
+  diff@5.2.2:
+    resolution: {integrity: sha512-vtcDfH3TOjP8UekytvnHH1o1P4FcUdt4eQ1Y+Abap1tk/OB2MWQvcwS2ClCd1zuIhc3JKOx6p3kod8Vfys3E+A==}
     engines: {node: '>=0.3.1'}
 
-  diff@8.0.2:
-    resolution: {integrity: sha512-sSuxWU5j5SR9QQji/o2qMvqRNYRDOcBTgsJ/DeCf4iSN4gW+gNMXM7wFIP+fdXZxoNiAnHUTGjCr+TSWXdRDKg==}
-    engines: {node: '>=0.3.1'}
-
-  dlv@1.1.3:
-    resolution: {integrity: sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==}
-
-  doctrine@2.1.0:
-    resolution: {integrity: sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==}
-    engines: {node: '>=0.10.0'}
-
   doctrine@3.0.0:
     resolution: {integrity: sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==}
     engines: {node: '>=6.0.0'}
@@ -5368,12 +5386,8 @@ packages:
   dot-case@3.0.4:
     resolution: {integrity: sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==}
 
-  dotenv@16.6.1:
-    resolution: {integrity: sha512-uBq4egWHTcTt33a72vpSG0z3HnPuIl6NqYcTrKEg2azoEyl2hpW0zqlxysq2pK9HlDIHyHyakeYaYnSAwd8bow==}
-    engines: {node: '>=12'}
-
-  dotenv@17.2.1:
-    resolution: {integrity: sha512-kQhDYKZecqnM0fCnzI5eIv5L4cAe/iRI+HqMbO/hbRdTAeXDG+M9FjipUxNfbARuEg4iHIbhnhs78BCHNbSxEQ==}
+  dotenv@16.4.7:
+    resolution: {integrity: sha512-47qPchRCykZC03FhkYAhrvwU4xDBFIj1QPqaarj6mdM/hgUzfPHcpkHJOn3mJAufFeeAxAzeGsr5X0M4k6fLZQ==}
     engines: {node: '>=12'}
 
   dts-resolver@2.1.3:
@@ -5392,15 +5406,14 @@ packages:
   eastasianwidth@0.2.0:
     resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
 
-  eciesjs@0.4.15:
-    resolution: {integrity: sha512-r6kEJXDKecVOCj2nLMuXK/FCPeurW33+3JRpfXVbjLja3XUYFfD9I/JBreH6sUyzcm3G/YQboBjMla6poKeSdA==}
-    engines: {bun: '>=1', deno: '>=2', node: '>=16'}
-
   ee-first@1.1.1:
     resolution: {integrity: sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==}
 
-  electron-to-chromium@1.5.218:
-    resolution: {integrity: sha512-uwwdN0TUHs8u6iRgN8vKeWZMRll4gBkz+QMqdS7DDe49uiK68/UX92lFb61oiFPrpYZNeZIqa4bA7O6Aiasnzg==}
+  effect@3.20.0:
+    resolution: {integrity: sha512-qMLfDJscrNG8p/aw+IkT9W7fgj50Z4wG5bLBy0Txsxz8iUHjDIkOgO3SV0WZfnQbNG2VJYb0b+rDLMrhM4+Krw==}
+
+  electron-to-chromium@1.5.286:
+    resolution: {integrity: sha512-9tfDXhJ4RKFNerfjdCcZfufu49vg620741MNs26a9+bhLThdB+plgMeou98CAaHu/WATj2iHOOHTp1hWtABj2A==}
 
   element-resize-detector@1.2.4:
     resolution: {integrity: sha512-Fl5Ftk6WwXE0wqCgNoseKWndjzZlDCwuPTcoVZfCP9R3EHQF8qUtr3YUPNETegRBOKqQKPW3n4kiIWngGi8tKg==}
@@ -5470,16 +5483,9 @@ packages:
     resolution: {integrity: sha512-xUtoPkMggbz0MPyPiIWr1Kp4aeWJjDZ6SMvURhimjdZgsRuDplF5/s9hcgGhyXMhs+6vpnuoiZ2kFiu3FMnS8Q==}
     engines: {node: '>=18'}
 
-  err-code@2.0.3:
-    resolution: {integrity: sha512-2bmlRpNKBxT/CRmPOlyISQpNj+qSeYvcym/uT0Jx2bMOlKLtSy1ZmLuVxSEKKyor/N5yhvp/ZiG1oE3DEYMSFA==}
-
   error-ex@1.3.4:
     resolution: {integrity: sha512-sqQamAnR14VgCr1A618A3sGrygcpK+HEbenA/HiEAkkUwcZIIB/tgWqHFxWgOyDh4nB4JCRimh79dR5Ywc9MDQ==}
 
-  es-abstract@1.24.0:
-    resolution: {integrity: sha512-WSzPgsdLtTcQwm4CROfS5ju2Wa1QQcVeT37jFjYzdFz1r9ahadC8B8/a4qxJxM+09F18iumCdRmlr96ZYkQvEg==}
-    engines: {node: '>= 0.4'}
-
   es-define-property@1.0.1:
     resolution: {integrity: sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==}
     engines: {node: '>= 0.4'}
@@ -5488,13 +5494,12 @@ packages:
     resolution: {integrity: sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==}
     engines: {node: '>= 0.4'}
 
-  es-iterator-helpers@1.2.1:
-    resolution: {integrity: sha512-uDn+FE1yrDzyC0pCo961B2IHbdM8y/ACZsKD4dG6WqrjV53BADjwa7D+1aom2rsNVfLyDgU/eigvlJGJ08OQ4w==}
-    engines: {node: '>= 0.4'}
-
   es-module-lexer@1.7.0:
     resolution: {integrity: sha512-jEQoCwk8hyb2AZziIOLhDqpm5+2ww5uIE6lkO/6jcOCusfk6LhMHpXXfBLXTZ7Ydyt0j4VoUQv6uGNYbdW+kBA==}
 
+  es-module-lexer@2.0.0:
+    resolution: {integrity: sha512-5POEcUuZybH7IdmGsD8wlf0AI55wMecM9rVBTI/qEAy2c1kTOm3DjFYjrBdI2K3BaJjJYfYFeRtM0t9ssnRuxw==}
+
   es-object-atoms@1.1.1:
     resolution: {integrity: sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==}
     engines: {node: '>= 0.4'}
@@ -5503,14 +5508,6 @@ packages:
     resolution: {integrity: sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==}
     engines: {node: '>= 0.4'}
 
-  es-shim-unscopables@1.1.0:
-    resolution: {integrity: sha512-d9T8ucsEhh8Bi1woXCf+TIKDIROLG5WCkxg8geBCbvk22kzwC5G2OnXVMO6FUsvQlgUUXQ2itephWDLqDzbeCw==}
-    engines: {node: '>= 0.4'}
-
-  es-to-primitive@1.3.0:
-    resolution: {integrity: sha512-w+5mJ3GuFL+NjVtJlvydShqE1eN3h3PbI7/5LAsYJP/2qtuMXjfL2LpHSRqo4b4eSF5K/DH1JXKUAHSB2UW50g==}
-    engines: {node: '>= 0.4'}
-
   esbuild-register@3.6.0:
     resolution: {integrity: sha512-H2/S7Pm8a9CL1uhp9OvjwrBh5Pvx0H8qVOxNu8Wed9Y7qv56MPtq+GGM8RJpq6glYJn9Wspr8uw7l55uyinNeg==}
     peerDependencies:
@@ -5540,160 +5537,15 @@ packages:
     resolution: {integrity: sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==}
     engines: {node: '>=12'}
 
-  eslint-compat-utils@0.5.1:
-    resolution: {integrity: sha512-3z3vFexKIEnjHE3zCMRo6fn/e44U7T1khUjg+Hp0ZQMCigh28rALD0nPFBcGZuiLC5rLZa2ubQHDRln09JfU2Q==}
-    engines: {node: '>=12'}
-    peerDependencies:
-      eslint: '>=6.0.0'
-
-  eslint-config-prettier@10.1.8:
-    resolution: {integrity: sha512-82GZUjRS0p/jganf6q1rEO25VSoHH0hKPCTrgillPjdI/3bgBhAE1QzHrHTizjpRvy6pGAvKjDJtk2pF9NDq8w==}
-    hasBin: true
-    peerDependencies:
-      eslint: '>=7.0.0'
-
-  eslint-import-context@0.1.9:
-    resolution: {integrity: sha512-K9Hb+yRaGAGUbwjhFNHvSmmkZs9+zbuoe3kFQ4V1wYjrepUFYM2dZAfNtjbbj3qsPfUfsA68Bx/ICWQMi+C8Eg==}
-    engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0}
-    peerDependencies:
-      unrs-resolver: ^1.0.0
-    peerDependenciesMeta:
-      unrs-resolver:
-        optional: true
-
-  eslint-import-resolver-node@0.3.9:
-    resolution: {integrity: sha512-WFj2isz22JahUv+B788TlO3N6zL3nNJGU8CcZbPZvVEkBPaJdCV4vy5wyghty5ROFbCRnm132v8BScu5/1BQ8g==}
-
-  eslint-import-resolver-typescript@4.4.4:
-    resolution: {integrity: sha512-1iM2zeBvrYmUNTj2vSC/90JTHDth+dfOfiNKkxApWRsTJYNrc8rOdxxIf5vazX+BiAXTeOT0UvWpGI/7qIWQOw==}
-    engines: {node: ^16.17.0 || >=18.6.0}
-    peerDependencies:
-      eslint: '*'
-      eslint-plugin-import: '*'
-      eslint-plugin-import-x: '*'
-    peerDependenciesMeta:
-      eslint-plugin-import:
-        optional: true
-      eslint-plugin-import-x:
-        optional: true
-
-  eslint-module-utils@2.12.1:
-    resolution: {integrity: sha512-L8jSWTze7K2mTg0vos/RuLRS5soomksDPoJLXIslC7c8Wmut3bx7CPpJijDcBZtxQ5lrbUdM+s0OlNbz0DCDNw==}
-    engines: {node: '>=4'}
-    peerDependencies:
-      '@typescript-eslint/parser': '*'
-      eslint: '*'
-      eslint-import-resolver-node: '*'
-      eslint-import-resolver-typescript: '*'
-      eslint-import-resolver-webpack: '*'
-    peerDependenciesMeta:
-      '@typescript-eslint/parser':
-        optional: true
-      eslint:
-        optional: true
-      eslint-import-resolver-node:
-        optional: true
-      eslint-import-resolver-typescript:
-        optional: true
-      eslint-import-resolver-webpack:
-        optional: true
-
-  eslint-plugin-es-x@7.8.0:
-    resolution: {integrity: sha512-7Ds8+wAAoV3T+LAKeu39Y5BzXCrGKrcISfgKEqTS4BDN8SFEDQd0S43jiQ8vIa3wUKD07qitZdfzlenSi8/0qQ==}
-    engines: {node: ^14.18.0 || >=16.0.0}
-    peerDependencies:
-      eslint: '>=8'
-
-  eslint-plugin-import@2.32.0:
-    resolution: {integrity: sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==}
-    engines: {node: '>=4'}
-    peerDependencies:
-      '@typescript-eslint/parser': '*'
-      eslint: ^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 || ^8 || ^9
-    peerDependenciesMeta:
-      '@typescript-eslint/parser':
-        optional: true
-
-  eslint-plugin-jsx-a11y@6.10.2:
-    resolution: {integrity: sha512-scB3nz4WmG75pV8+3eRUQOHZlNSUhFNq37xnpgRkCCELU3XMvXAxLk1eqWWyE22Ki4Q01Fnsw9BA3cJHDPgn2Q==}
-    engines: {node: '>=4.0'}
-    peerDependencies:
-      eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9
-
-  eslint-plugin-n@17.23.1:
-    resolution: {integrity: sha512-68PealUpYoHOBh332JLLD9Sj7OQUDkFpmcfqt8R9sySfFSeuGJjMTJQvCRRB96zO3A/PELRLkPrzsHmzEFQQ5A==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    peerDependencies:
-      eslint: '>=8.23.0'
-
-  eslint-plugin-promise@7.2.1:
-    resolution: {integrity: sha512-SWKjd+EuvWkYaS+uN2csvj0KoP43YTu7+phKQ5v+xw6+A0gutVX2yqCeCkC3uLCJFiPfR2dD8Es5L7yUsmvEaA==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    peerDependencies:
-      eslint: ^7.0.0 || ^8.0.0 || ^9.0.0
-
-  eslint-plugin-react-hooks@7.0.1:
-    resolution: {integrity: sha512-O0d0m04evaNzEPoSW+59Mezf8Qt0InfgGIBJnpC0h3NH/WjUAR7BIKUfysC6todmtiZ/A0oUVS8Gce0WhBrHsA==}
-    engines: {node: '>=18'}
-    peerDependencies:
-      eslint: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0 || ^9.0.0
-
-  eslint-plugin-react-refresh@0.4.24:
-    resolution: {integrity: sha512-nLHIW7TEq3aLrEYWpVaJ1dRgFR+wLDPN8e8FpYAql/bMV2oBEfC37K0gLEGgv9fy66juNShSMV8OkTqzltcG/w==}
-    peerDependencies:
-      eslint: '>=8.40'
-
-  eslint-plugin-react@7.37.5:
-    resolution: {integrity: sha512-Qteup0SqU15kdocexFNAJMvCJEfa2xUKNV4CC1xsVMrIIqEy3SQ/rqyxCWNzfrd3/ldy6HMlD2e0JDVpDg2qIA==}
-    engines: {node: '>=4'}
-    peerDependencies:
-      eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9.7
-
-  eslint-plugin-storybook@10.1.4:
-    resolution: {integrity: sha512-itG2eLrWyuP5RGIL3TMGA5KSGoBOX3aTnQd43qLJu36ZMzd9H4RHN1I8WTVvyiaInppYJMGB4nnXzSdNXUUeTQ==}
-    peerDependencies:
-      eslint: '>=8'
-      storybook: ^10.1.4
-
   eslint-scope@5.1.1:
     resolution: {integrity: sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==}
     engines: {node: '>=8.0.0'}
 
-  eslint-scope@8.4.0:
-    resolution: {integrity: sha512-sNXOfKCn74rt8RICKMvJS7XKV/Xk9kA7DyJr8mJik3S7Cwgy3qlkkmyS2uQB3jiJg6VNdZd/pDBJu0nvG2NlTg==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-
-  eslint-visitor-keys@3.4.3:
-    resolution: {integrity: sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-
-  eslint-visitor-keys@4.2.1:
-    resolution: {integrity: sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-
-  eslint@9.39.1:
-    resolution: {integrity: sha512-BhHmn2yNOFA9H9JmmIVKJmd288g9hrVRDkdoIgRCRuSySRUHH7r/DI6aAXW9T1WwUuY3DFgrcaqB+deURBLR5g==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    hasBin: true
-    peerDependencies:
-      jiti: '*'
-    peerDependenciesMeta:
-      jiti:
-        optional: true
-
-  espree@10.4.0:
-    resolution: {integrity: sha512-j6PAQ2uUr79PZhBjP5C5fhl8e39FmRnOjsD5lGnWrFU8i2G776tBK7+nP8KuQUTTyAZUwfQqXAgrVH5MbH9CYQ==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-
   esprima@4.0.1:
     resolution: {integrity: sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==}
     engines: {node: '>=4'}
     hasBin: true
 
-  esquery@1.6.0:
-    resolution: {integrity: sha512-ca9pw9fomFcKPvFLXhBKUK90ZvGibiGOvRJNbjljY7s7uq/5YO4BOzcYtJqExdx99rF6aAcnRxHmcUHcz6sQsg==}
-    engines: {node: '>=0.10'}
-
   esrecurse@4.3.0:
     resolution: {integrity: sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==}
     engines: {node: '>=4.0'}
@@ -5765,9 +5617,16 @@ packages:
     resolution: {integrity: sha512-c2iPh3xp5vvCLgaHK03+mWLFPhox7j1LwyxcZwFVApEv5i0X+IjPpbT50SJJwwLpdBVfp45AkK/v+AFgv/XlfQ==}
     engines: {node: '>= 0.10.0'}
 
+  exsolve@1.0.8:
+    resolution: {integrity: sha512-LmDxfWXwcTArk8fUEnOfSZpHOJ6zOMUJKOtFLFqJLoKJetuQG874Uc7/Kki7zFLzYybmZhp1M7+98pfMqeX8yA==}
+
   extend@3.0.2:
     resolution: {integrity: sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==}
 
+  fast-check@3.23.2:
+    resolution: {integrity: sha512-h5+1OzzfCC3Ef7VbtKdcv7zsstUQwUDlYpUTvjeUsJAssPgLn7QzbboPtL5ro04Mq0rPOsMzl7q5hIbRs2wD1A==}
+    engines: {node: '>=8.0.0'}
+
   fast-deep-equal@3.1.3:
     resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
 
@@ -5775,30 +5634,20 @@ packages:
     resolution: {integrity: sha512-V7/RktU11J3I36Nwq2JnZEM7tNm17eBJz+u25qdxBZeCKiX6BkVSZQjwWIr+IobgnZy+ag73tTZgZi7tr0LrBw==}
     engines: {node: '>=6.0.0'}
 
-  fast-glob@3.3.3:
-    resolution: {integrity: sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==}
-    engines: {node: '>=8.6.0'}
-
   fast-json-parse@1.0.3:
     resolution: {integrity: sha512-FRWsaZRWEJ1ESVNbDWmsAlqDk96gPQezzLghafp5J4GUKjbCz3OkAHuZs5TuPEtkbVQERysLp9xv6c24fBm8Aw==}
 
   fast-json-stable-stringify@2.1.0:
     resolution: {integrity: sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==}
 
-  fast-levenshtein@2.0.6:
-    resolution: {integrity: sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==}
-
   fast-uri@3.0.6:
     resolution: {integrity: sha512-Atfo14OibSv5wAp4VWNsFYE1AchQRTv9cBGWET4pZWHzYshFSS9NQI6I57rdKn9croWVMbYFbLhJ+yJvmZIIHw==}
 
-  fastq@1.19.1:
-    resolution: {integrity: sha512-GwLTyxkCXjXbxqIhTsMI2Nui8huMPtnxg7krajPJAjnEG/iiOS7i+zCtWGZR9G0NBKbXKh6X9m9UIsYX/N6vvQ==}
-
   fdir@6.5.0:
     resolution: {integrity: sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==}
     engines: {node: '>=12.0.0'}
     peerDependencies:
-      picomatch: ^3 || ^4
+      picomatch: 2.3.2
     peerDependenciesMeta:
       picomatch:
         optional: true
@@ -5806,22 +5655,12 @@ packages:
   fecha@4.2.3:
     resolution: {integrity: sha512-OP2IUU6HeYKJi3i0z4A19kHMQoLVs4Hc+DPqqxI2h/DPZHTm/vjsfC6P0b4jCMy14XizLBqvndQ+UilD7707Jw==}
 
-  fflate@0.4.8:
-    resolution: {integrity: sha512-FJqqoDBR00Mdj9ppamLa/Y7vxm+PRmNWA67N846RvsoYVMKB4q3y/de5PA7gUmRMYK/8CMz2GDZQmCRN1wBcWA==}
-
-  fflate@0.8.2:
-    resolution: {integrity: sha512-cPJU47OaAoCbg0pBvzsgpTPhmhqI5eJjh/JIu8tPj5q+T7iLvW/JAYUqmE7KOB4R1ZyEhzBaIQpQpardBF5z8A==}
-
-  file-entry-cache@8.0.0:
-    resolution: {integrity: sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==}
-    engines: {node: '>=16.0.0'}
-
   file-selector@2.1.2:
     resolution: {integrity: sha512-QgXo+mXTe8ljeqUFaX3QVHc5osSItJ/Km+xpocx0aSqWGMSCf6qYs/VnzZgS864Pjn5iceMRFigeAV7AfTlaig==}
     engines: {node: '>= 12'}
 
-  file-type@21.0.0:
-    resolution: {integrity: sha512-ek5xNX2YBYlXhiUXui3D/BXa3LdqPmoLJ7rqEx2bKJ7EAUEfmXgW0Das7Dc6Nr9MvqaOnIqiPV0mZk/r/UpNAg==}
+  file-type@21.3.3:
+    resolution: {integrity: sha512-pNwbwz8c3aZ+GvbJnIsCnDjKvgCZLHxkFWLEFxU3RMa+Ey++ZSEfisvsWQMcdys6PpxQjWUOIDi1fifXsW3YRg==}
     engines: {node: '>=20'}
 
   filesize@10.1.6:
@@ -5844,6 +5683,9 @@ packages:
     resolution: {integrity: sha512-wXZV5emFEjrridIgED11OoUKLxiYjAcqot/NJdAkOhlJ+vGzwhOAfcG5OX1jP+S0PcjEn8bdMJv+g2jwQ3Onig==}
     engines: {node: '>=8'}
 
+  find-my-way-ts@0.1.6:
+    resolution: {integrity: sha512-a85L9ZoXtNAey3Y6Z+eBWW658kO/MwR7zIafkIUPUMf3isZG0NCs2pjW2wtjxAKuJPxMAsHUIP4ZPGv0o5gyTA==}
+
   find-up@3.0.0:
     resolution: {integrity: sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==}
     engines: {node: '>=6'}
@@ -5870,12 +5712,8 @@ packages:
     resolution: {integrity: sha512-CYcENa+FtcUKLmhhqyctpclsq7QF38pKjZHsGNiSQF5r4FtoKDWabFDl3hzaEQMvT1LHEysw5twgLvpYYb4vbw==}
     engines: {node: ^10.12.0 || >=12.0.0}
 
-  flat-cache@4.0.1:
-    resolution: {integrity: sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==}
-    engines: {node: '>=16'}
-
-  flatted@3.3.3:
-    resolution: {integrity: sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==}
+  flatted@3.4.2:
+    resolution: {integrity: sha512-PjDse7RzhcPkIJwy5t7KPWQSZ9cAbzQXcafsetQoD7sOJRQlGikNbx7yZp2OotDnJyrDcbyRq3Ttb18iYOqkxA==}
 
   flow-parser@0.293.0:
     resolution: {integrity: sha512-8tEGAcWpCqioajiSqrJr2+JSmkEI2vO/UACFGG378RO106ez9xugVxe9EpXD3aI1Vbf+mEUGhMt0gMpveJwVGA==}
@@ -5912,15 +5750,12 @@ packages:
     engines: {node: '>=12.13.0', yarn: '>=1.0.0'}
     peerDependencies:
       typescript: 5.8.3
-      webpack: ^5.11.0
+      webpack: 5.104.1
 
-  form-data@4.0.4:
-    resolution: {integrity: sha512-KrGhL9Q4zjj0kiUt5OO4Mr/A/jlI2jDYs5eHBpYHPcBEVSiipAvn2Ko2HnPe20rmcuuvMHNdZFp+4IlGTMF0Ow==}
+  form-data@4.0.5:
+    resolution: {integrity: sha512-8RipRLol37bNs2bhoV67fiTEvdTrbMUYcFTiy3+wuuOnUog2QBHCZWXDRijWQfAkhBj2Uf5UnVaiWwA5vdd82w==}
     engines: {node: '>= 6'}
 
-  forwarded-parse@2.1.2:
-    resolution: {integrity: sha512-alTFZZQDKMporBH77856pXgzhEzaUVmLCDk+egLgIgHst3Tpndzz8MnKe+GzRJRfvVdn69HhpW7cmXzvtLvJAw==}
-
   forwarded@0.2.0:
     resolution: {integrity: sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==}
     engines: {node: '>= 0.6'}
@@ -5974,10 +5809,6 @@ packages:
   function-bind@1.1.2:
     resolution: {integrity: sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==}
 
-  function.prototype.name@1.1.8:
-    resolution: {integrity: sha512-e5iwyodOHhbMr/yNrc7fDYG4qlbIvI5gajyzPnb5TCwyhjApznQh1BMFou9b30SevY43gCJKXycoCBjMbsuW0Q==}
-    engines: {node: '>= 0.4'}
-
   functions-have-names@1.2.3:
     resolution: {integrity: sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==}
 
@@ -6016,48 +5847,22 @@ packages:
     resolution: {integrity: sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==}
     engines: {node: '>=10'}
 
-  get-symbol-description@1.1.0:
-    resolution: {integrity: sha512-w9UMqWwJxHNOvoNzSJ2oPF5wvYcvP7jUvYzhp67yEhTi17ZDBBC1z9pTdGuzjD+EFIqLSYRweZjqfiPzQ06Ebg==}
-    engines: {node: '>= 0.4'}
-
-  get-tsconfig@4.10.1:
-    resolution: {integrity: sha512-auHyJ4AgMz7vgS8Hp3N6HXSmlMdUyhSUrfBF16w153rxtLIEOE+HGqaBppczZvnHLqQJfiHotCYpNhl0lUROFQ==}
-
-  get-tsconfig@4.13.0:
-    resolution: {integrity: sha512-1VKTZJCwBrvbd+Wn3AOgQP/2Av+TfTCOlE4AcRJE72W1ksZXbAx8PPBR9RzgTeSPzlPMHrbANMH3LbltH73wxQ==}
+  get-tsconfig@4.13.7:
+    resolution: {integrity: sha512-7tN6rFgBlMgpBML5j8typ92BKFi2sFQvIdpAqLA2beia5avZDrMs0FLZiM5etShWq5irVyGcGMEA1jcDaK7A/Q==}
 
   glob-parent@5.1.2:
     resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==}
     engines: {node: '>= 6'}
 
-  glob-parent@6.0.2:
-    resolution: {integrity: sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==}
-    engines: {node: '>=10.13.0'}
-
   glob-to-regexp@0.4.1:
     resolution: {integrity: sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==}
 
   glob@11.1.0:
     resolution: {integrity: sha512-vuNwKSaKiqm7g0THUBu2x7ckSs3XJLXE+2ssL7/MfTGPLLcrJQ/4Uq1CjPTtO5cCIiRxqvN6Twy1qOwhL0Xjcw==}
     engines: {node: 20 || >=22}
+    deprecated: Old versions of glob are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exorbitant rates) by contacting i@izs.me
     hasBin: true
 
-  globals@14.0.0:
-    resolution: {integrity: sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==}
-    engines: {node: '>=18'}
-
-  globals@15.15.0:
-    resolution: {integrity: sha512-7ACyT3wmyp3I61S4fG682L0VA2RGD9otkqGJIwNUMF1SWUombIIk+af1unuDYgMm082aHYwD+mzJvv9Iu8dsgg==}
-    engines: {node: '>=18'}
-
-  globals@16.5.0:
-    resolution: {integrity: sha512-c/c15i26VrJ4IRt5Z89DnIzCGDn9EcebibhAOjw5ibqEHsE1wLUgkPn9RDmNcUKyU87GeaL633nyJ+pplFR2ZQ==}
-    engines: {node: '>=18'}
-
-  globalthis@1.0.4:
-    resolution: {integrity: sha512-DpLKbNU4WylpxJykQujfCcwYWiV/Jhm50Goo0wrVILAv5jOr9d+H+UR3PhSCD2rCCEIg0uc+G+muBTwD54JhDQ==}
-    engines: {node: '>= 0.4'}
-
   globrex@0.1.2:
     resolution: {integrity: sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg==}
 
@@ -6068,16 +5873,9 @@ packages:
   graceful-fs@4.2.11:
     resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
 
-  graphemer@1.4.0:
-    resolution: {integrity: sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==}
-
   gud@1.0.0:
     resolution: {integrity: sha512-zGEOVKFM5sVPPrYs7J5/hYEw2Pof8KCyOwyhG8sAF26mCAeUFAcYPu1mwB7hhpIP29zOIBaDqwuHdLp0jvZXjw==}
 
-  has-bigints@1.1.0:
-    resolution: {integrity: sha512-R3pbpkcIqv2Pm3dUwgjclDRVmWpTJW2DcMzcIhEXEx1oh/CEMObMm3KLmRJOdvhM7o4uQBnwr8pzRK2sJWIqfg==}
-    engines: {node: '>= 0.4'}
-
   has-flag@3.0.0:
     resolution: {integrity: sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==}
     engines: {node: '>=4'}
@@ -6089,10 +5887,6 @@ packages:
   has-property-descriptors@1.0.2:
     resolution: {integrity: sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==}
 
-  has-proto@1.2.0:
-    resolution: {integrity: sha512-KIL7eQPfHQRC8+XluaIw7BHUwwqL19bQn4hzNgdr+1wXoU0KKj6rufu47lhY7KbJR2C6T6+PfyN0Ea7wkSS+qQ==}
-    engines: {node: '>= 0.4'}
-
   has-symbols@1.1.0:
     resolution: {integrity: sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==}
     engines: {node: '>= 0.4'}
@@ -6165,26 +5959,13 @@ packages:
     resolution: {integrity: sha512-ZRiwvN089JfMXokizgqEPXsl2Guk094yExfoDXR0cBYWxtBbaSww/w+vT4WEJsBW2iTUi1GgZ6swmoug3Oy4Xw==}
     engines: {node: '>=16.0.0'}
 
-  hermes-estree@0.25.1:
-    resolution: {integrity: sha512-0wUoCcLp+5Ev5pDW2OriHC2MJCbwLwuRx+gAqMTOkGKJJiBCLjtrvy4PWUGn6MIVefecRpzoOZ/UV6iGdOr+Cw==}
-
-  hermes-parser@0.25.1:
-    resolution: {integrity: sha512-6pEjquH3rqaI6cYAXYPcz9MS4rY6R4ngRgrgfDshRptUZIc3lw0MCIJIGDj9++mfySOuPTHB4nrSW99BCvOPIA==}
-
   highlight.js@11.11.1:
     resolution: {integrity: sha512-Xwwo44whKBVCYoliBQwaPvtd/2tYFkRQtXDWj1nackaV2JPXx3L0+Jvd8/qCJ2p+ML0/XVkJ2q+Mr+UVdpJK5w==}
     engines: {node: '>=12.0.0'}
 
-  hoist-non-react-statics@3.3.2:
-    resolution: {integrity: sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==}
-
   hookable@5.5.3:
     resolution: {integrity: sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ==}
 
-  hosted-git-info@6.1.3:
-    resolution: {integrity: sha512-HVJyzUrLIL1c0QmviVh5E8VGyUS7xCFPS6yydaVd1UegW+ibV/CohqTH9MkOLDp5o+rb82DMo77PTuc9F/8GKw==}
-    engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
-
   hsl-to-hex@1.0.0:
     resolution: {integrity: sha512-K6GVpucS5wFf44X0h2bLVRDsycgJmf9FF2elg+CrqD8GcFU8c6vYhgXn8NjUkFCwj+xDFb70qgLbTUm6sxwPmA==}
 
@@ -6198,6 +5979,9 @@ packages:
   html-entities@2.6.0:
     resolution: {integrity: sha512-kig+rMn/QOVRvr7c86gQ8lWXq+Hkv6CbAH1hLu+RG338StTpE8Z0b44SDVaqVu7HGKf27frdmUYEs9hTUX/cLQ==}
 
+  html-escaper@2.0.2:
+    resolution: {integrity: sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==}
+
   html-minifier-terser@6.1.0:
     resolution: {integrity: sha512-YXxSlJBZTP7RS3tWnQw74ooKa6L9b9i9QYXY21eUEvhZ3u9XLfv6OnFsQq6RxkhHygsaUMvYsZRV5rU/OVNZxw==}
     engines: {node: '>=12'}
@@ -6211,7 +5995,7 @@ packages:
     engines: {node: '>=10.13.0'}
     peerDependencies:
       '@rspack/core': 0.x || 1.x
-      webpack: ^5.20.0
+      webpack: 5.104.1
     peerDependenciesMeta:
       '@rspack/core':
         optional: true
@@ -6232,10 +6016,6 @@ packages:
     resolution: {integrity: sha512-T1gkAiYYDWYx3V5Bmyu7HcfcvL7mUrTWiM6yOfa3PIphViJ/gFPbvidQ+veqSOHci/PxBcDabeUNCzpOODJZig==}
     engines: {node: '>= 14'}
 
-  https-proxy-agent@5.0.1:
-    resolution: {integrity: sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==}
-    engines: {node: '>= 6'}
-
   https-proxy-agent@7.0.6:
     resolution: {integrity: sha512-vK9P5/iUfdl95AI+JVyUuIcVtd4ofvtrOr3HNtM2yxC9bnMbEdp3x01OhQNnjb8IJYi38VlTE3mBXwcfvywuSw==}
     engines: {node: '>= 14'}
@@ -6269,14 +6049,6 @@ packages:
   ieee754@1.2.1:
     resolution: {integrity: sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==}
 
-  ignore@5.3.2:
-    resolution: {integrity: sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==}
-    engines: {node: '>= 4'}
-
-  ignore@7.0.5:
-    resolution: {integrity: sha512-Hs59xBNfUIunMFgWAbGX5cq6893IbWg4KnrjbYwX3tx0ztorVgTDA6B2sxf8ejHJ4wz8BqGUMYlnzNBer5NvGg==}
-    engines: {node: '>= 4'}
-
   imagesloaded@4.1.4:
     resolution: {integrity: sha512-ltiBVcYpc/TYTF5nolkMNsnREHW+ICvfQ3Yla2Sgr71YFwQ86bDwV9hgpFhFtrGPuwEx5+LqOHIrdXBdoWwwsA==}
 
@@ -6284,9 +6056,6 @@ packages:
     resolution: {integrity: sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==}
     engines: {node: '>=6'}
 
-  import-in-the-middle@2.0.0:
-    resolution: {integrity: sha512-yNZhyQYqXpkT0AKq3F3KLasUSK4fHvebNH5hOsKQw2dhGSALvQ4U0BqUc5suziKvydO5u5hgN2hy1RJaho8U5A==}
-
   imurmurhash@0.1.4:
     resolution: {integrity: sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==}
     engines: {node: '>=0.8.19'}
@@ -6304,10 +6073,6 @@ packages:
   inline-style-parser@0.1.1:
     resolution: {integrity: sha512-7NXolsK4CAS5+xvdj5OMMbI962hU/wvwoxk+LWR9Ek9bVtyuuYScDN6eS0rUm6TxApFpw7CX1o4uJzcd4AyD3Q==}
 
-  internal-slot@1.1.0:
-    resolution: {integrity: sha512-4gd7VpWNQNB4UKKCFFVcp1AVv+FMOgs9NKzjHKusc8jTMhd5eL1NqQqOpE0KzMds804/yHlglp3uxgluOqAPLw==}
-    engines: {node: '>= 0.4'}
-
   internmap@2.0.3:
     resolution: {integrity: sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==}
     engines: {node: '>=12'}
@@ -6331,39 +6096,20 @@ packages:
     resolution: {integrity: sha512-7bVbi0huj/wrIAOzb8U1aszg9kdi3KN/CyU19CTI7tAoZYEZoL9yCDXpbXN+uPsuWnP02cyug1gleqq+TU+YCA==}
     engines: {node: '>= 0.4'}
 
-  is-array-buffer@3.0.5:
-    resolution: {integrity: sha512-DDfANUiiG2wC1qawP66qlTugJeL5HyzMpfr8lLK+jMQirGzNod0B12cFB/9q838Ru27sBwfw78/rdoU7RERz6A==}
-    engines: {node: '>= 0.4'}
-
   is-arrayish@0.2.1:
     resolution: {integrity: sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==}
 
   is-arrayish@0.3.4:
     resolution: {integrity: sha512-m6UrgzFVUYawGBh1dUsWR5M2Clqic9RVXC/9f8ceNlv2IcO9j9J/z8UoCLPqtsPBFNzEpfR3xftohbfqDx8EQA==}
 
-  is-async-function@2.1.1:
-    resolution: {integrity: sha512-9dgM/cZBnNvjzaMYHVoxxfPj2QXt22Ev7SuuPrs+xav0ukGB0S6d4ydZdEiM48kLx5kDV+QBPrpVnFyefL8kkQ==}
-    engines: {node: '>= 0.4'}
-
-  is-bigint@1.1.0:
-    resolution: {integrity: sha512-n4ZT37wG78iz03xPRKJrHTdZbe3IicyucEtdRsV5yglwc3GyUfbAfpSeD0FJ41NbUNSt5wbhqfp1fS+BgnvDFQ==}
-    engines: {node: '>= 0.4'}
-
   is-binary-path@2.1.0:
     resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==}
     engines: {node: '>=8'}
 
-  is-boolean-object@1.2.2:
-    resolution: {integrity: sha512-wa56o2/ElJMYqjCjGkXri7it5FbebW5usLw/nPmCMs5DeZ7eziSYZhSmPRn0txqeW4LnAmQQU7FgqLpsEFKM4A==}
-    engines: {node: '>= 0.4'}
-
   is-buffer@2.0.5:
     resolution: {integrity: sha512-i2R6zNFDwgEHJyQUtJEk0XFi1i0dPFn/oqjK3/vPCcDeJvW5NQ83V8QbicfF1SupOaB0h8ntgBC2YiE7dfyctQ==}
     engines: {node: '>=4'}
 
-  is-bun-module@2.0.0:
-    resolution: {integrity: sha512-gNCGbnnnnFAUGKeZ9PdbyeGYJqewpmc2aKHUEMO5nQPWU9lOmv7jcmQIv+qHD8fXW6W7qfuCwX4rY9LNRjXrkQ==}
-
   is-callable@1.2.7:
     resolution: {integrity: sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==}
     engines: {node: '>= 0.4'}
@@ -6372,10 +6118,6 @@ packages:
     resolution: {integrity: sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==}
     engines: {node: '>= 0.4'}
 
-  is-data-view@1.0.2:
-    resolution: {integrity: sha512-RKtWF8pGmS87i2D6gqQu/l7EYRlVdfzemCJN/P3UOs//x1QE7mfhvzHIApBTRf7axvT6DMGwSwBXYCT0nfB9xw==}
-    engines: {node: '>= 0.4'}
-
   is-date-object@1.1.0:
     resolution: {integrity: sha512-PwwhEakHVKTdRNVOw+/Gyh0+MzlCl4R6qKvkhuvLtPMggI1WAHt9sOwZxQLSGpUaDnrdyDsomoRgNnCfKNSXXg==}
     engines: {node: '>= 0.4'}
@@ -6392,10 +6134,6 @@ packages:
     resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
     engines: {node: '>=0.10.0'}
 
-  is-finalizationregistry@1.1.1:
-    resolution: {integrity: sha512-1pC6N8qWJbWoPtEjgcL2xyhQOP491EQjeUo3qTKcmV8YSDDJrOepfG8pcC7h/QgnQHYSv0mJ3Z/ZWxmatVrysg==}
-    engines: {node: '>= 0.4'}
-
   is-fullwidth-code-point@3.0.0:
     resolution: {integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==}
     engines: {node: '>=8'}
@@ -6412,18 +6150,6 @@ packages:
     resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
     engines: {node: '>=0.10.0'}
 
-  is-map@2.0.3:
-    resolution: {integrity: sha512-1Qed0/Hr2m+YqxnM09CjA2d/i6YZNfF6R2oRAOj36eUdS6qIV/huPJNSEpKbupewFs+ZsJlxsjjPbc0/afW6Lw==}
-    engines: {node: '>= 0.4'}
-
-  is-negative-zero@2.0.3:
-    resolution: {integrity: sha512-5KoIu2Ngpyek75jXodFvnafB6DJgr3u8uuK0LEZJjrU19DrMD3EVERaR8sjz8CCGgpZvxPl9SuE1GMVPFHx1mw==}
-    engines: {node: '>= 0.4'}
-
-  is-number-object@1.1.1:
-    resolution: {integrity: sha512-lZhclumE1G6VYD8VHe35wFaIif+CTy5SJIi5+3y4psDgWu4wPDoBhF8NxUOinEc7pHgiTsT6MaBb92rKhhD+Xw==}
-    engines: {node: '>= 0.4'}
-
   is-number@7.0.0:
     resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
     engines: {node: '>=0.12.0'}
@@ -6451,26 +6177,10 @@ packages:
     resolution: {integrity: sha512-MjYsKHO5O7mCsmRGxWcLWheFqN9DJ/2TmngvjKXihe6efViPqc274+Fx/4fYj/r03+ESvBdTXK0V6tA3rgez1g==}
     engines: {node: '>= 0.4'}
 
-  is-set@2.0.3:
-    resolution: {integrity: sha512-iPAjerrse27/ygGLxw+EBR9agv9Y6uLeYVJMu+QNCoouJ1/1ri0mGrcWpfCqFZuzzx3WjtwxG098X+n4OuRkPg==}
-    engines: {node: '>= 0.4'}
-
-  is-shared-array-buffer@1.0.4:
-    resolution: {integrity: sha512-ISWac8drv4ZGfwKl5slpHG9OwPNty4jOWPRIhBpxOoD+hqITiwuipOQ2bNthAzwA3B4fIjO4Nln74N0S9byq8A==}
-    engines: {node: '>= 0.4'}
-
   is-stream@2.0.1:
     resolution: {integrity: sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==}
     engines: {node: '>=8'}
 
-  is-string@1.1.1:
-    resolution: {integrity: sha512-BtEeSsoaQjlSPBemMQIrY1MY0uM6vnS1g5fmufYOtnxLGUZM2178PKbhsk7Ffv58IX+ZtcvoGwccYsh0PglkAA==}
-    engines: {node: '>= 0.4'}
-
-  is-symbol@1.1.1:
-    resolution: {integrity: sha512-9gGx6GTtCQM73BgmHQXfDmLtfjjTUDSyoxTCbp5WtoixAhfgsDirWIcVQ/IHpvI5Vgd5i/J5F7B9cN/WlVbC/w==}
-    engines: {node: '>= 0.4'}
-
   is-typed-array@1.1.15:
     resolution: {integrity: sha512-p3EcsicXjit7SaskXHs1hA91QxgTw46Fv6EFKKGS5DRFLD8yKnohjF3hxoju94b/OcMZoQukzpPpBE9uLVKzgQ==}
     engines: {node: '>= 0.4'}
@@ -6478,25 +6188,10 @@ packages:
   is-url@1.2.4:
     resolution: {integrity: sha512-ITvGim8FhRiYe4IQ5uHSkj7pVaPDrCTkNd3yq3cV7iZAcJdHTUMPMEHcqSOy9xZ9qFenQCvi+2wjH9a1nXqHww==}
 
-  is-weakmap@2.0.2:
-    resolution: {integrity: sha512-K5pXYOm9wqY1RgjpL3YTkF39tni1XajUIkawTLUo9EZEVUFga5gSQJF8nNS7ZwJQ02y+1YCNYcMh+HIf1ZqE+w==}
-    engines: {node: '>= 0.4'}
-
-  is-weakref@1.1.1:
-    resolution: {integrity: sha512-6i9mGWSlqzNMEqpCp93KwRS1uUOodk2OJ6b+sq7ZPDSy2WuI5NFIxp/254TytR8ftefexkWn5xNiHUNpPOfSew==}
-    engines: {node: '>= 0.4'}
-
-  is-weakset@2.0.4:
-    resolution: {integrity: sha512-mfcwb6IzQyOKTs84CQMrOwW4gQcaTOAWJ0zzJCl2WSPDrWk/OzDaImWFH3djXhb24g4eudZfLRozAvPGw4d9hQ==}
-    engines: {node: '>= 0.4'}
-
   is-wsl@2.2.0:
     resolution: {integrity: sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==}
     engines: {node: '>=8'}
 
-  isarray@2.0.5:
-    resolution: {integrity: sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==}
-
   isbot@5.1.31:
     resolution: {integrity: sha512-DPgQshehErHAqSCKDb3rNW03pa2wS/v5evvUqtxt6TTnHRqAG8FdzcSSJs9656pK6Y+NT7K9R4acEYXLHYfpUQ==}
     engines: {node: '>=18'}
@@ -6504,10 +6199,6 @@ packages:
   isexe@2.0.0:
     resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
 
-  isexe@3.1.1:
-    resolution: {integrity: sha512-LpB/54B+/2J5hqQ7imZHfdU31OlgQqx7ZicVlkm9kzg9/w8GKLEcFfJl/t7DCEDueOyBAD6zCCwTO6Fzs0NoEQ==}
-    engines: {node: '>=16'}
-
   isobject@3.0.1:
     resolution: {integrity: sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg==}
     engines: {node: '>=0.10.0'}
@@ -6515,9 +6206,17 @@ packages:
   isomorphic.js@0.2.5:
     resolution: {integrity: sha512-PIeMbHqMt4DnUP3MA/Flc0HElYjMXArsw1qwJZcm9sqR8mq3l8NYizFMty0pWwE/tzIGH3EKK5+jes5mAr85yw==}
 
-  iterator.prototype@1.1.5:
-    resolution: {integrity: sha512-H0dkQoCa3b2VEeKQBOxFph+JAbcrQdE7KC0UkqwpLmv2EC4P41QXP+rqo9wYodACiG5/WM5s9oDApTU8utwj9g==}
-    engines: {node: '>= 0.4'}
+  istanbul-lib-coverage@3.2.2:
+    resolution: {integrity: sha512-O8dpsF+r0WV/8MNRKfnmrtCWhuKjxrq2w+jpzBL5UZKTi2LeVWnWOmWRxFlesJONmc+wLAGvKQZEOanko0LFTg==}
+    engines: {node: '>=8'}
+
+  istanbul-lib-report@3.0.1:
+    resolution: {integrity: sha512-GCfE1mtsHGOELCU8e/Z7YWzpmybrx/+dSTfLrvY8qRmaY6zXTKWn6WQIjaAFw069icm6GVMNkgu0NzI4iPZUNw==}
+    engines: {node: '>=10'}
+
+  istanbul-reports@3.2.0:
+    resolution: {integrity: sha512-HGYWWS/ehqTV3xN10i23tkPkpH46MLCIMFNCaaKNavAXTF1RkqxawEPtnjnGZ6XKSInBKkiOA5BKS+aZiY3AvA==}
+    engines: {node: '>=8'}
 
   jackspeak@4.1.1:
     resolution: {integrity: sha512-zptv57P3GpL+O0I7VdMJNBZCu+BPHVQUk55Ft8/QCJjTVxrnJHuVuX/0Bl2A6/+2oyR/ZMEuFKwmzqqZ/U5nPQ==}
@@ -6530,20 +6229,15 @@ packages:
     resolution: {integrity: sha512-7vuh85V5cdDofPyxn58nrPjBktZo0u9x1g8WtjQol+jZDaE+fhN+cIvTj11GndBnMnyfrUOG1sZQxCdjKh+DKg==}
     engines: {node: '>= 10.13.0'}
 
-  jiti@1.21.7:
-    resolution: {integrity: sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==}
-    hasBin: true
-
-  jiti@2.5.1:
-    resolution: {integrity: sha512-twQoecYPiVA5K/h6SxtORw/Bs3ar+mLUtoPSc7iMXzQzK8d7eJ/R09wmTwAjiamETn1cXYPGfNnu7DMoHgu12w==}
+  jiti@2.6.1:
+    resolution: {integrity: sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==}
     hasBin: true
 
   js-tokens@4.0.0:
     resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
 
-  js-yaml@4.1.1:
-    resolution: {integrity: sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==}
-    hasBin: true
+  js-tokens@9.0.1:
+    resolution: {integrity: sha512-mxa9E9ITFOt0ban3j6L5MpjwegGz6lBQmM1IJkWeBZGcMxto50+eWdjC/52xDbS2vy0k7vIMK0Fe2wfL9OQSpQ==}
 
   jscodeshift@17.3.0:
     resolution: {integrity: sha512-LjFrGOIORqXBU+jwfC9nbkjmQfFldtMIoS6d9z2LG/lkmyNXsJAySPT+2SWXJEoE68/bCWcxKpXH37npftgmow==}
@@ -6555,15 +6249,11 @@ packages:
       '@babel/preset-env':
         optional: true
 
-  jsdoc-type-pratt-parser@4.8.0:
-    resolution: {integrity: sha512-iZ8Bdb84lWRuGHamRXFyML07r21pcwBrLkHEuHgEY5UbCouBwv7ECknDRKzsQIXMiqpPymqtIf8TC/shYKB5rw==}
-    engines: {node: '>=12.0.0'}
-
-  jsdom@25.0.1:
-    resolution: {integrity: sha512-8i7LzZj7BF8uplX+ZyOlIz86V6TAsSs+np6m1kpW9u0JWi4z/1t+FzcK1aek+ybTnAC4KhBL4uXCNT0wcUIeCw==}
+  jsdom@26.1.0:
+    resolution: {integrity: sha512-Cvc9WUhxSMEo4McES3P7oK3QaXldCfNWp7pl2NNeiIFlCoLr3kfq9kb1fxftiwk1FLV7CvpvDfonxtzUDeSOPg==}
     engines: {node: '>=18'}
     peerDependencies:
-      canvas: ^2.11.2
+      canvas: ^3.0.0
     peerDependenciesMeta:
       canvas:
         optional: true
@@ -6584,23 +6274,12 @@ packages:
   json-parse-even-better-errors@2.3.1:
     resolution: {integrity: sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==}
 
-  json-parse-even-better-errors@3.0.2:
-    resolution: {integrity: sha512-fi0NG4bPjCHunUJffmLd0gxssIgkNmArMvis4iNah6Owg1MCJjWhEcDLmsK6iGkJq3tHwbDkTlce70/tmXN4cQ==}
-    engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
-
   json-schema-traverse@0.4.1:
     resolution: {integrity: sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==}
 
   json-schema-traverse@1.0.0:
     resolution: {integrity: sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==}
 
-  json-stable-stringify-without-jsonify@1.0.1:
-    resolution: {integrity: sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==}
-
-  json5@1.0.2:
-    resolution: {integrity: sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==}
-    hasBin: true
-
   json5@2.2.3:
     resolution: {integrity: sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==}
     engines: {node: '>=6'}
@@ -6609,10 +6288,6 @@ packages:
   jsonfile@6.2.0:
     resolution: {integrity: sha512-FGuPw30AdOIUTRMC2OMRtQV+jkVj2cfPqSeWXv1NEAJ1qZ5zb1X6z1mFhbfOB/iy3ssJCD+3KuZ8r8C3uVFlAg==}
 
-  jsx-ast-utils@3.3.5:
-    resolution: {integrity: sha512-ZZow9HBI5O6EPgSJLUb8n2NKgmVWTwCvHGwFuJlMjvLFqlGG6pjirPhtdsseaLZjSibD8eegzmYpUZwoIlj2cQ==}
-    engines: {node: '>=4.0'}
-
   jsx-dom-cjs@8.1.6:
     resolution: {integrity: sha512-aeGqlIZ3IBKF2+B0cKXZGh10OHxxABuHD9tlS10suXDXXG0c4wMkJios9xVslduflSNEQJVlicME3EBCYgxGvA==}
 
@@ -6627,25 +6302,91 @@ packages:
     resolution: {integrity: sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==}
     engines: {node: '>=6'}
 
+  kubernetes-types@1.30.0:
+    resolution: {integrity: sha512-Dew1okvhM/SQcIa2rcgujNndZwU8VnSapDgdxlYoB84ZlpAD43U6KLAFqYo17ykSFGHNPrg0qry0bP+GJd9v7Q==}
+
   kuler@2.0.0:
     resolution: {integrity: sha512-Xq9nH7KlWZmXAtodXDDRE7vs6DU1gTU8zYDHDiWLSip45Egwq3plLHzPn27NgvzL2r1LMPC1vdqh98sQxtqj4A==}
 
-  language-subtag-registry@0.3.23:
-    resolution: {integrity: sha512-0K65Lea881pHotoGEa5gDlMxt3pctLi2RplBb7Ezh4rRdLEOtgi7n4EwK9lamnUCkKBqaeKRVebTq6BAxSkpXQ==}
-
-  language-tags@1.0.9:
-    resolution: {integrity: sha512-MbjN408fEndfiQXbFQ1vnd+1NoLDsnQW41410oQBXiyXDMYH5z505juWa4KUE1LqxRC7DgOgZDbKLxHIwm27hA==}
-    engines: {node: '>=0.10'}
-
-  levn@0.4.1:
-    resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==}
-    engines: {node: '>= 0.8.0'}
-
   lib0@0.2.114:
     resolution: {integrity: sha512-gcxmNFzA4hv8UYi8j43uPlQ7CGcyMJ2KQb5kZASw6SnAKAf10hK12i2fjrS3Cl/ugZa5Ui6WwIu1/6MIXiHttQ==}
     engines: {node: '>=16'}
     hasBin: true
 
+  lightningcss-android-arm64@1.30.2:
+    resolution: {integrity: sha512-BH9sEdOCahSgmkVhBLeU7Hc9DWeZ1Eb6wNS6Da8igvUwAe0sqROHddIlvU06q3WyXVEOYDZ6ykBZQnjTbmo4+A==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [android]
+
+  lightningcss-darwin-arm64@1.30.2:
+    resolution: {integrity: sha512-ylTcDJBN3Hp21TdhRT5zBOIi73P6/W0qwvlFEk22fkdXchtNTOU4Qc37SkzV+EKYxLouZ6M4LG9NfZ1qkhhBWA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [darwin]
+
+  lightningcss-darwin-x64@1.30.2:
+    resolution: {integrity: sha512-oBZgKchomuDYxr7ilwLcyms6BCyLn0z8J0+ZZmfpjwg9fRVZIR5/GMXd7r9RH94iDhld3UmSjBM6nXWM2TfZTQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [darwin]
+
+  lightningcss-freebsd-x64@1.30.2:
+    resolution: {integrity: sha512-c2bH6xTrf4BDpK8MoGG4Bd6zAMZDAXS569UxCAGcA7IKbHNMlhGQ89eRmvpIUGfKWNVdbhSbkQaWhEoMGmGslA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [freebsd]
+
+  lightningcss-linux-arm-gnueabihf@1.30.2:
+    resolution: {integrity: sha512-eVdpxh4wYcm0PofJIZVuYuLiqBIakQ9uFZmipf6LF/HRj5Bgm0eb3qL/mr1smyXIS1twwOxNWndd8z0E374hiA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm]
+    os: [linux]
+
+  lightningcss-linux-arm64-gnu@1.30.2:
+    resolution: {integrity: sha512-UK65WJAbwIJbiBFXpxrbTNArtfuznvxAJw4Q2ZGlU8kPeDIWEX1dg3rn2veBVUylA2Ezg89ktszWbaQnxD/e3A==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  lightningcss-linux-arm64-musl@1.30.2:
+    resolution: {integrity: sha512-5Vh9dGeblpTxWHpOx8iauV02popZDsCYMPIgiuw97OJ5uaDsL86cnqSFs5LZkG3ghHoX5isLgWzMs+eD1YzrnA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  lightningcss-linux-x64-gnu@1.30.2:
+    resolution: {integrity: sha512-Cfd46gdmj1vQ+lR6VRTTadNHu6ALuw2pKR9lYq4FnhvgBc4zWY1EtZcAc6EffShbb1MFrIPfLDXD6Xprbnni4w==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  lightningcss-linux-x64-musl@1.30.2:
+    resolution: {integrity: sha512-XJaLUUFXb6/QG2lGIW6aIk6jKdtjtcffUT0NKvIqhSBY3hh9Ch+1LCeH80dR9q9LBjG3ewbDjnumefsLsP6aiA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  lightningcss-win32-arm64-msvc@1.30.2:
+    resolution: {integrity: sha512-FZn+vaj7zLv//D/192WFFVA0RgHawIcHqLX9xuWiQt7P0PtdFEVaxgF9rjM/IRYHQXNnk61/H/gb2Ei+kUQ4xQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [win32]
+
+  lightningcss-win32-x64-msvc@1.30.2:
+    resolution: {integrity: sha512-5g1yc73p+iAkid5phb4oVFMB45417DkRevRbt/El/gKXJk4jid+vPFF/AXbxn05Aky8PapwzZrdJShv5C0avjw==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [win32]
+
+  lightningcss@1.30.2:
+    resolution: {integrity: sha512-utfs7Pr5uJyyvDETitgsaqSyjCb2qNRAtuqUeWIAKztsOYdcACf2KtARYXg2pSvhkt+9NfoaNY7fxjl6nuMjIQ==}
+    engines: {node: '>= 12.0.0'}
+
   lilconfig@3.1.3:
     resolution: {integrity: sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==}
     engines: {node: '>=14'}
@@ -6680,8 +6421,8 @@ packages:
   lit@2.8.0:
     resolution: {integrity: sha512-4Sc3OFX9QHOJaHbmTMk28SYgVxLN3ePDjg7hofEft2zWlehFL3LiAuapWc4U/kYwMYJSh2hTCPZ6/LIC7ii0MA==}
 
-  loader-runner@4.3.0:
-    resolution: {integrity: sha512-3R/1M+yS3j5ou80Me59j7F9IMs4PXs3VqRrm0TU3AbKPxlmpoY1TNscJV/oGJXo8qCatFGTfDbY6W6ipGOYXfg==}
+  loader-runner@4.3.1:
+    resolution: {integrity: sha512-IWqP2SCPhyVFTBtRcgMHdzlf9ul25NwaFx4wCEH/KjAXuuHY4yNjvPXsBokp8jCB936PyWRaPKUNh8NvylLp2Q==}
     engines: {node: '>=6.11.5'}
 
   locate-path@3.0.0:
@@ -6700,11 +6441,9 @@ packages:
     resolution: {integrity: sha512-gvVijfZvn7R+2qyPX8mAuKcFGDf6Nc61GdvGafQsHL0sBIxfKzA+usWn4GFC/bk+QdwPUD4kWFJLhElipq+0VA==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
 
-  lodash-es@4.17.21:
-    resolution: {integrity: sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==}
-
-  lodash.castarray@4.4.0:
-    resolution: {integrity: sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q==}
+  lodash-es@4.18.0:
+    resolution: {integrity: sha512-koAgswPPA+UTaPN64Etp+PGP+WT6oqOS2NMi5yDkMaiGw9qY4VxQbQF0mtKMyr4BlTznWyzePV5UpECTJQmSUA==}
+    deprecated: Bad release. Please use lodash-es@4.17.23 instead.
 
   lodash.debounce@4.0.8:
     resolution: {integrity: sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==}
@@ -6718,14 +6457,8 @@ packages:
   lodash.isarguments@3.1.0:
     resolution: {integrity: sha512-chi4NHZlZqZD18a0imDHnZPrDeBbTtVN7GXMwuGdRH9qotxAjYs3aVLKc7zNOG9eddR5Ksd8rvFEBc9SsggPpg==}
 
-  lodash.isplainobject@4.0.6:
-    resolution: {integrity: sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==}
-
-  lodash.merge@4.6.2:
-    resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
-
-  lodash@4.17.21:
-    resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==}
+  lodash@4.17.23:
+    resolution: {integrity: sha512-LgVTMpQtIopCi79SJeDiP0TfWi5CNEc/L/aRdTh3yIvmZXTnheWpKjSZhnvMl8iXbC1tFg9gdHHDMLoV7CnG+w==}
 
   log-update@6.1.0:
     resolution: {integrity: sha512-9ie8ItPR6tjY5uYJh8K/Zrv/RMZ5VOlOWvtZdEHYSTFKZfIBPQa9tOAEeAWhd+AnIneLJ22w5fjOYtoutpWq5w==}
@@ -6761,10 +6494,6 @@ packages:
   lru-cache@5.1.1:
     resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
 
-  lru-cache@7.18.3:
-    resolution: {integrity: sha512-jumlc0BIUrS3qJGgIkWZsyfAM7NCWiBcCDhnd+3NNM5KbBmLTgHVfWBcg6W+rLUsIpzpERPsvwUP7CckAQSOoA==}
-    engines: {node: '>=12'}
-
   lucide-react@0.469.0:
     resolution: {integrity: sha512-28vvUnnKQ/dBwiCQtwJw7QauYnE7yd2Cyp4tTTJpvglX4EMpbflcdBgrgToX2j71B3YvugK/NH3BGUk+E/p/Fw==}
     peerDependencies:
@@ -6774,15 +6503,11 @@ packages:
     resolution: {integrity: sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==}
     hasBin: true
 
-  magic-string@0.30.19:
-    resolution: {integrity: sha512-2N21sPY9Ws53PZvsEpVtNuSW+ScYbQdp4b9qUaL+9QkHUrGFKo56Lg9Emg5s9V/qrtNBmiR01sYhUOwu3H+VOw==}
-
   magic-string@0.30.21:
     resolution: {integrity: sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==}
 
-  magic-string@0.30.8:
-    resolution: {integrity: sha512-ISQTe55T2ao7XtlAStud6qwYPZjE4GK1S/BeVPus4jrq6JuOnQ00YKQC581RWhR122W7msZV263KzVeLoqidyQ==}
-    engines: {node: '>=12'}
+  magicast@0.5.1:
+    resolution: {integrity: sha512-xrHS24IxaLrvuo613F719wvOIv9xPHFWQHuvGUBmPnCA/3MQxKI3b+r7n1jAoDHmsbC5bRhTZYR77invLAxVnw==}
 
   make-dir@2.1.0:
     resolution: {integrity: sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==}
@@ -6792,14 +6517,18 @@ packages:
     resolution: {integrity: sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==}
     engines: {node: '>=8'}
 
+  make-dir@4.0.0:
+    resolution: {integrity: sha512-hXdUTZYIVOt1Ex//jAQi+wTZZpUpwBj/0QsOzqegb3rGMMeJiSEu5xLHnYfBrRV4RH2+OCSOO95Is/7x1WJ4bw==}
+    engines: {node: '>=10'}
+
   map-or-similar@1.5.0:
     resolution: {integrity: sha512-0aF7ZmVon1igznGI4VS30yugpduQW3y3GkcgGJOp7d8x8QrizhigUxjI/m2UojsXXto+jLAH3KSz+xOJTiORjg==}
 
   markdown-it-task-lists@2.1.1:
     resolution: {integrity: sha512-TxFAc76Jnhb2OUu+n3yz9RMu4CwGfaT788br6HhEDlvWfdeJcLUsxk1Hgw2yJio0OXsxv7pyIPmvECY7bMbluA==}
 
-  markdown-it@14.1.0:
-    resolution: {integrity: sha512-a54IwgWPaeBCAAsv13YgmALOF1elABB08FxO9i+r4VFk5Vl4pKokRPeX8u5TCgSsPi6ec1otfLjdOpVcgbpshg==}
+  markdown-it@14.1.1:
+    resolution: {integrity: sha512-BuU2qnTti9YKgK5N+IeMubp14ZUKUUw7yeJbkjtosvHiP0AZ5c8IAgEMk79D0eC8F23r4Ac/q8cAIFdm2FtyoA==}
     hasBin: true
 
   markdown-table@3.0.4:
@@ -6887,10 +6616,6 @@ packages:
   merge-stream@2.0.0:
     resolution: {integrity: sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==}
 
-  merge2@1.4.1:
-    resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
-    engines: {node: '>= 8'}
-
   methods@1.1.2:
     resolution: {integrity: sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w==}
     engines: {node: '>= 0.6'}
@@ -7071,6 +6796,11 @@ packages:
     engines: {node: '>=4'}
     hasBin: true
 
+  mime@3.0.0:
+    resolution: {integrity: sha512-jSCU7/VB1loIWBZe14aEYHU/+1UMEHoaO7qxCOVJOw9GgH72VAWppxNcjU+x9a2k3GSIBXNKxXQFqRvvZ7vr3A==}
+    engines: {node: '>=10.0.0'}
+    hasBin: true
+
   mimic-fn@2.1.0:
     resolution: {integrity: sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==}
     engines: {node: '>=6'}
@@ -7083,16 +6813,12 @@ packages:
     resolution: {integrity: sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==}
     engines: {node: '>=4'}
 
-  minimatch@10.1.1:
-    resolution: {integrity: sha512-enIvLvRAFZYXJzkCYG5RKmPfrFArdLv+R+lbQ53BmIMLIry74bjKzX6iHAm8WYamJkhSSEabrWN5D97XnKObjQ==}
-    engines: {node: 20 || >=22}
+  minimatch@10.2.3:
+    resolution: {integrity: sha512-Rwi3pnapEqirPSbWbrZaa6N3nmqq4Xer/2XooiOKyV3q12ML06f7MOuc5DVH8ONZIFhwIYQ3yzPH4nt7iWHaTg==}
+    engines: {node: 18 || 20 || >=22}
 
-  minimatch@3.1.2:
-    resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==}
-
-  minimatch@9.0.5:
-    resolution: {integrity: sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==}
-    engines: {node: '>=16 || 14 >=14.17'}
+  minimatch@3.1.4:
+    resolution: {integrity: sha512-twmL+S8+7yIsE9wsqgzU3E8/LumN3M3QELrBZ20OdmQ9jB2JvW5oZtBEmft84k/Gs5CG9mqtWc6Y9vW+JEzGxw==}
 
   minimist@1.2.8:
     resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==}
@@ -7135,9 +6861,6 @@ packages:
   mobx@6.12.0:
     resolution: {integrity: sha512-Mn6CN6meXEnMa0a5u6a5+RKrqRedHBhZGd15AWLk9O6uFY4KYHzImdt8JI8WODo1bjTSRnwXhJox+FCUZhCKCQ==}
 
-  module-details-from-path@1.0.4:
-    resolution: {integrity: sha512-EGWKgxALGMgzvxYF1UyGTy0HXX/2vHLkw6+NvDKW2jypWbHpjQuj4UMcqQWXHERJhVGKikolT06G3bcKe4fi7w==}
-
   morgan@1.10.1:
     resolution: {integrity: sha512-223dMRJtI/l25dJKWpgij2cMtywuG/WiUKXdvwfbhGKBhy1puASqXwFzmWZ7+K73vUPoR7SS2Qz2cI/g9MKw0A==}
     engines: {node: '>= 0.8.0'}
@@ -7158,8 +6881,15 @@ packages:
   ms@2.1.3:
     resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
 
-  mz@2.7.0:
-    resolution: {integrity: sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==}
+  msgpackr-extract@3.0.3:
+    resolution: {integrity: sha512-P0efT1C9jIdVRefqjzOQ9Xml57zpOXnIuS+csaB4MdZbTdmGDLo8XhzBG1N7aO11gKDDkJvBLULeFTo46wwreA==}
+    hasBin: true
+
+  msgpackr@1.11.8:
+    resolution: {integrity: sha512-bC4UGzHhVvgDNS7kn9tV8fAucIYUBuGojcaLiz7v+P63Lmtm0Xeji8B/8tYKddALXxJLpwIeBmUN3u64C4YkRA==}
+
+  multipasta@0.2.7:
+    resolution: {integrity: sha512-KPA58d68KgGil15oDqXjkUBEBYc00XvbPj5/X+dyzeo/lWm9Nc25pQRlf1D+gv4OpK7NM0J1odrbu9JNNGvynA==}
 
   nano-spawn@2.0.0:
     resolution: {integrity: sha512-tacvGzUY5o2D8CBh2rrwxyNojUsZNU2zjNTzKQrkgGJQTbGAfArVWXSKMBokBeeg6C7OLRGUEyoFlYbfeWQIqw==}
@@ -7170,14 +6900,6 @@ packages:
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
     hasBin: true
 
-  napi-postinstall@0.3.3:
-    resolution: {integrity: sha512-uTp172LLXSxuSYHv/kou+f6KW3SMppU9ivthaVTXian9sOt3XM/zHYHpRZiLgQoxeWfYUnslNWQHF1+G71xcow==}
-    engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0}
-    hasBin: true
-
-  natural-compare@1.4.0:
-    resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
-
   negotiator@0.6.3:
     resolution: {integrity: sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==}
     engines: {node: '>= 0.6'}
@@ -7198,13 +6920,12 @@ packages:
   no-case@3.0.4:
     resolution: {integrity: sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==}
 
-  node-abi@3.75.0:
-    resolution: {integrity: sha512-OhYaY5sDsIka7H7AtijtI9jwGYLyl29eQn/W623DiN/MIv5sUqc4g7BIDThX+gb7di9f6xK02nkp8sdfFWZLTg==}
-    engines: {node: '>=10'}
-
   node-abort-controller@3.1.1:
     resolution: {integrity: sha512-AGK2yQKIjRuqnc6VkX2Xj5d+QW8xZ87pa1UK6yA6ouUyuxfHuMP6umE5QK7UmTeOAymo+Zx1Fxiuw9rVx8taHQ==}
 
+  node-addon-api@7.1.1:
+    resolution: {integrity: sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==}
+
   node-fetch@2.7.0:
     resolution: {integrity: sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==}
     engines: {node: 4.x || >=6.0.0}
@@ -7214,15 +6935,15 @@ packages:
       encoding:
         optional: true
 
+  node-gyp-build-optional-packages@5.2.2:
+    resolution: {integrity: sha512-s+w+rBWnpTMwSFbaE0UXsRlg7hU4FjekKU4eyAih5T8nJuNZT1nNsskXpxmeqSK9UzkBl6UgRlnKc8hz8IEqOw==}
+    hasBin: true
+
   node-html-parser@6.1.13:
     resolution: {integrity: sha512-qIsTMOY4C/dAa5Q5vsobRpOOvPfC4pB61UVW2uSwZNUp0QU/jCekTal1vMmbO0DgdHeLUJpv/ARmDqErVxA3Sg==}
 
-  node-releases@2.0.21:
-    resolution: {integrity: sha512-5b0pgg78U3hwXkCM8Z9b2FJdPZlr9Psr9V2gQPESdGHqbntyFJKFW4r5TeWGFzafGY3hzs1JC62VEQMbl1JFkw==}
-
-  normalize-package-data@5.0.0:
-    resolution: {integrity: sha512-h9iPVIfrVZ9wVYQnxFgtw1ugSvGEMOlyPWWtm8BMJhnwyEL/FLbYbTY3V3PpjI/BUK67n9PEWDu6eHzu1fB15Q==}
-    engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
+  node-releases@2.0.27:
+    resolution: {integrity: sha512-nmh3lCkYZ3grZvqcCH+fjmQ7X+H0OeZgP40OierEaAptX4XofMh5kwNbWh7lBduUzCcV/8kZ+NDLCwm2iorIlA==}
 
   normalize-path@3.0.0:
     resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
@@ -7238,22 +6959,6 @@ packages:
   normalize.css@8.0.1:
     resolution: {integrity: sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg==}
 
-  npm-install-checks@6.3.0:
-    resolution: {integrity: sha512-W29RiK/xtpCGqn6f3ixfRYGk+zRyr+Ew9F2E20BfXxT5/euLdA/Nm7fO7OeTGuAmTs30cpgInyJ0cYe708YTZw==}
-    engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
-
-  npm-normalize-package-bin@3.0.1:
-    resolution: {integrity: sha512-dMxCf+zZ+3zeQZXKxmyuCKlIDPGuv8EF940xbkC4kQVDTtqoh6rJFO+JTKSA6/Rwi0getWmtuy4Itup0AMcaDQ==}
-    engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
-
-  npm-package-arg@10.1.0:
-    resolution: {integrity: sha512-uFyyCEmgBfZTtrKk/5xDfHp6+MdrqGotX/VoOyEEl3mBwiEE5FlBaePanazJSVMPT7vKepcjYBY2ztg9A3yPIA==}
-    engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
-
-  npm-pick-manifest@8.0.2:
-    resolution: {integrity: sha512-1dKY+86/AIiq1tkKVD3l0WI+Gd3vkknVGAggsFeBkTvbhMQ1OND/LKkYv4JtXPKUJ8bOTCyLiqEg2P6QNdK+Gg==}
-    engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
-
   npm-run-path@4.0.1:
     resolution: {integrity: sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==}
     engines: {node: '>=8'}
@@ -7268,10 +6973,6 @@ packages:
     resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
     engines: {node: '>=0.10.0'}
 
-  object-hash@3.0.0:
-    resolution: {integrity: sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==}
-    engines: {node: '>= 6'}
-
   object-inspect@1.13.4:
     resolution: {integrity: sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==}
     engines: {node: '>= 0.4'}
@@ -7284,30 +6985,6 @@ packages:
     resolution: {integrity: sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==}
     engines: {node: '>= 0.4'}
 
-  object-treeify@1.1.33:
-    resolution: {integrity: sha512-EFVjAYfzWqWsBMRHPMAXLCDIJnpMhdWAqR7xG6M6a2cs6PMFpl/+Z20w9zDW4vkxOFfddegBKq9Rehd0bxWE7A==}
-    engines: {node: '>= 10'}
-
-  object.assign@4.1.7:
-    resolution: {integrity: sha512-nK28WOo+QIjBkDduTINE4JkF/UJJKyf2EJxvJKfblDpyg0Q+pkOHNTL0Qwy6NP6FhE/EnzV73BxxqcJaXY9anw==}
-    engines: {node: '>= 0.4'}
-
-  object.entries@1.1.9:
-    resolution: {integrity: sha512-8u/hfXFRBD1O0hPUjioLhoWFHRmt6tKA4/vZPyckBr18l1KE9uHrFaFaUi8MDRTpi4uak2goyPTSNJLXX2k2Hw==}
-    engines: {node: '>= 0.4'}
-
-  object.fromentries@2.0.8:
-    resolution: {integrity: sha512-k6E21FzySsSK5a21KRADBd/NGneRegFO5pLHfdQLpRDETUNJueLXs3WCzyQ3tFRDYgbq3KHGXfTbi2bs8WQ6rQ==}
-    engines: {node: '>= 0.4'}
-
-  object.groupby@1.0.3:
-    resolution: {integrity: sha512-+Lhy3TQTuzXI5hevh8sBGqbmurHbbIjAi0Z4S63nthVLmLxfbj4T54a4CfZrXIrt9iP4mVAPYMo/v99taj3wjQ==}
-    engines: {node: '>= 0.4'}
-
-  object.values@1.2.1:
-    resolution: {integrity: sha512-gXah6aZrcUxjWg2zR2MwouP2eHlCBzdV4pygudehaKXSGW4v2AsRQUK+lwwXhii6KFZcunEnmSUoYp5CXibxtA==}
-    engines: {node: '>= 0.4'}
-
   objectorarray@1.0.5:
     resolution: {integrity: sha512-eJJDYkhJFFbBBAxeh8xW+weHlkI28n2ZdQV/J/DNfWfSKlGEf2xcfAbZTv3riEXHAhL9SVOTs2pRmXiSTf78xg==}
 
@@ -7341,23 +7018,26 @@ packages:
     resolution: {integrity: sha512-7x81NCL719oNbsq/3mh+hVrAWmFuEYUqrq/Iw3kUzH8ReypT9QQ0BLoJS7/G9k6N81XjW4qHWtjWwe/9eLy1EQ==}
     engines: {node: '>=12'}
 
-  optionator@0.9.4:
-    resolution: {integrity: sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==}
-    engines: {node: '>= 0.8.0'}
-
   orderedmap@2.1.1:
     resolution: {integrity: sha512-TvAWxi0nDe1j/rtMcWcIj94+Ffe6n7zhow33h40SKxmsmozs6dz/e+EajymfoFcHd7sxNn8yHM8839uixMOV6g==}
 
   outlayer@2.1.1:
     resolution: {integrity: sha512-+GplXsCQ3VrbGujAeHEzP9SXsBmJxzn/YdDSQZL0xqBmAWBmortu2Y9Gwdp9J0bgDQ8/YNIPMoBM13nTwZfAhw==}
 
-  own-keys@1.0.1:
-    resolution: {integrity: sha512-qFOyK5PjiWZd+QQIh+1jhdb9LpxTF0qs7Pm8o5QHYZ0M3vKqSqzsZaEB6oWlxZ+q2sJBMI/Ktgd2N5ZwQoRHfg==}
-    engines: {node: '>= 0.4'}
-
-  oxc-parser@0.99.0:
-    resolution: {integrity: sha512-MpS1lbd2vR0NZn1v0drpgu7RUFu3x9Rd0kxExObZc2+F+DIrV0BOMval/RO3BYGwssIOerII6iS8EbbpCCZQpQ==}
+  oxfmt@0.35.0:
+    resolution: {integrity: sha512-QYeXWkP+aLt7utt5SLivNIk09glWx9QE235ODjgcEZ3sd1VMaUBSpLymh6ZRCA76gD2rMP4bXanUz/fx+nLM9Q==}
     engines: {node: ^20.19.0 || >=22.12.0}
+    hasBin: true
+
+  oxlint@1.51.0:
+    resolution: {integrity: sha512-g6DNPaV9/WI9MoX2XllafxQuxwY1TV++j7hP8fTJByVBuCoVtm3dy9f/2vtH/HU40JztcgWF4G7ua+gkainklQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    hasBin: true
+    peerDependencies:
+      oxlint-tsgolint: '>=0.15.0'
+    peerDependenciesMeta:
+      oxlint-tsgolint:
+        optional: true
 
   p-limit@2.3.0:
     resolution: {integrity: sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==}
@@ -7467,11 +7147,8 @@ packages:
     resolution: {integrity: sha512-ypGJsmGtdXUOeM5u93TyeIEfEhM6s+ljAhrk5vAvSx8uyY/02OvrZnA0YNGUrPXfpJMgI1ODd3nwz8Npx4O4cg==}
     engines: {node: 20 || >=22}
 
-  path-to-regexp@0.1.12:
-    resolution: {integrity: sha512-RA1GjUVMnvYFxuqovrEqZoxxW5NUZqbwKtYz/Tt7nXerk0LbLblQmrsgdeOxV5SFHf0UDggjS/bSeOZwt1pmEQ==}
-
-  path-to-regexp@3.3.0:
-    resolution: {integrity: sha512-qyCH421YQPS2WFDxDjftfc1ZR5WKQzVzqsp4n9M2kQhVOo/ByahFoUNJfl58kOcEGfQ//7weFTDhm+ss8Ecxgw==}
+  path-to-regexp@0.1.13:
+    resolution: {integrity: sha512-A/AGNMFN3c8bOlvV9RreMdrv7jsmF9XIfDeCd87+I8RNg6s78BhJxMu69NEMHBSJFxKidViTEdruRwEk/WIKqA==}
 
   path-type@4.0.0:
     resolution: {integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==}
@@ -7487,28 +7164,22 @@ packages:
     resolution: {integrity: sha512-//nshmD55c46FuFw26xV/xFAaB5HF9Xdap7HJBBnrKdAd6/GxDBaNA1870O79+9ueg61cZLSVc+OaFlfmObYVQ==}
     engines: {node: '>= 14.16'}
 
-  pg-int8@1.0.1:
-    resolution: {integrity: sha512-WCtabS6t3c8SkpDBUlb1kjOs7l66xsGdKpIPZsg4wR+B3+u9UAum2odSsF9tnvxg80h4ZxLWMy4pRjOsFIqQpw==}
-    engines: {node: '>=4.0.0'}
+  pdf-parse@2.4.5:
+    resolution: {integrity: sha512-mHU89HGh7v+4u2ubfnevJ03lmPgQ5WU4CxAVmTSh/sxVTEDYd1er/dKS/A6vg77NX47KTEoihq8jZBLr8Cxuwg==}
+    engines: {node: '>=20.16.0 <21 || >=22.3.0'}
+    hasBin: true
 
-  pg-protocol@1.10.3:
-    resolution: {integrity: sha512-6DIBgBQaTKDJyxnXaLiLR8wBpQQcGWuAESkRBX/t6OwA8YsqP+iVSiond2EDy6Y/dsGk8rh/jtax3js5NeV7JQ==}
-
-  pg-types@2.2.0:
-    resolution: {integrity: sha512-qTAAlrEsl8s4OiEQY69wDvcMIdQN6wdz5ojQiOy6YRMuynxenON0O5oCpJI6lshc6scgAY8qvJ2On/p+CXY0GA==}
-    engines: {node: '>=4'}
+  pdfjs-dist@5.4.296:
+    resolution: {integrity: sha512-DlOzet0HO7OEnmUmB6wWGJrrdvbyJKftI1bhMitK7O2N8W2gc757yyYBbINy9IDafXAV9wmKr9t7xsTaNKRG5Q==}
+    engines: {node: '>=20.16.0 || >=22.3.0'}
 
   picocolors@1.1.1:
     resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
 
-  picomatch@2.3.1:
-    resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
+  picomatch@2.3.2:
+    resolution: {integrity: sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA==}
     engines: {node: '>=8.6'}
 
-  picomatch@4.0.3:
-    resolution: {integrity: sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==}
-    engines: {node: '>=12'}
-
   pidtree@0.6.0:
     resolution: {integrity: sha512-eG2dWTVw5bzqGRztnHExczNxt5VGsE6OwTeCG3fdUf9KBsZzO3R5OIIIzWR+iZA0NtZ+RDVdaoE2dK1cn6jH4g==}
     engines: {node: '>=0.10'}
@@ -7534,6 +7205,9 @@ packages:
     resolution: {integrity: sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==}
     engines: {node: '>=8'}
 
+  pkg-types@2.3.0:
+    resolution: {integrity: sha512-SIqCzDRg0s9npO5XQ3tNZioRY1uK06lA41ynBC1YmFTmnY6FjUjVt6s4LoADmwoig1qqD0oK8h1p/8mlMx8Oig==}
+
   polished@4.3.1:
     resolution: {integrity: sha512-OBatVyC/N7SCW/FaDHrSd+vn0o5cS855TOmYi4OkdWUMSJCET/xip//ch8xGUvtr3i44X9LVyWwQlRMTN3pwSA==}
     engines: {node: '>=10'}
@@ -7553,30 +7227,6 @@ packages:
     peerDependencies:
       postcss: ^8.0.0
 
-  postcss-import@15.1.0:
-    resolution: {integrity: sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==}
-    engines: {node: '>=14.0.0'}
-    peerDependencies:
-      postcss: ^8.0.0
-
-  postcss-js@4.0.1:
-    resolution: {integrity: sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==}
-    engines: {node: ^12 || ^14 || >= 16}
-    peerDependencies:
-      postcss: ^8.4.21
-
-  postcss-load-config@4.0.2:
-    resolution: {integrity: sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==}
-    engines: {node: '>= 14'}
-    peerDependencies:
-      postcss: '>=8.0.9'
-      ts-node: '>=9.0.0'
-    peerDependenciesMeta:
-      postcss:
-        optional: true
-      ts-node:
-        optional: true
-
   postcss-load-config@5.1.0:
     resolution: {integrity: sha512-G5AJ+IX0aD0dygOE0yFZQ/huFFMSNneyfp0e3/bT05a8OfPC5FUoZRPfGijUdGOJNMewJiwzcHJXFafFzeKFVA==}
     engines: {node: '>= 18'}
@@ -7647,40 +7297,6 @@ packages:
     resolution: {integrity: sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==}
     engines: {node: ^10 || ^12 || >=14}
 
-  postgres-array@2.0.0:
-    resolution: {integrity: sha512-VpZrUqU5A69eQyW2c5CA1jtLecCsN2U/bD6VilrFDWq5+5UIEVO7nazS3TEcHf1zuPYO/sqGvUvW62g86RXZuA==}
-    engines: {node: '>=4'}
-
-  postgres-bytea@1.0.0:
-    resolution: {integrity: sha512-xy3pmLuQqRBZBXDULy7KbaitYqLcmxigw14Q5sj8QBVLqEwXfeybIKVWiqAXTlcvdvb0+xkOtDbfQMOf4lST1w==}
-    engines: {node: '>=0.10.0'}
-
-  postgres-date@1.0.7:
-    resolution: {integrity: sha512-suDmjLVQg78nMK2UZ454hAG+OAW+HQPZ6n++TNDUX+L0+uUlLywnoxJKDou51Zm+zTCjrCl0Nq6J9C5hP9vK/Q==}
-    engines: {node: '>=0.10.0'}
-
-  postgres-interval@1.2.0:
-    resolution: {integrity: sha512-9ZhXKM/rw350N1ovuWHbGxnGh/SNJ4cnxHiM0rxE4VN41wsg8P8zWn9hv/buK00RP4WvlOyr/RBDiptyxVbkZQ==}
-    engines: {node: '>=0.10.0'}
-
-  posthog-js@1.255.1:
-    resolution: {integrity: sha512-KMh0o9MhORhEZVjXpktXB5rJ8PfDk+poqBoTSoLzWgNjhJf6D8jcyB9jUMA6vVPfn4YeepVX5NuclDRqOwr5Mw==}
-    peerDependencies:
-      '@rrweb/types': 2.0.0-alpha.17
-      rrweb-snapshot: 2.0.0-alpha.17
-    peerDependenciesMeta:
-      '@rrweb/types':
-        optional: true
-      rrweb-snapshot:
-        optional: true
-
-  preact@10.27.1:
-    resolution: {integrity: sha512-V79raXEWch/rbqoNc7nT9E4ep7lu+mI3+sBmfRD4i1M73R3WLYcCtdI0ibxGVf4eQL8ZIz2nFacqEC+rmnOORQ==}
-
-  prelude-ls@1.2.1:
-    resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
-    engines: {node: '>= 0.8.0'}
-
   prettier@3.7.4:
     resolution: {integrity: sha512-v6UNi1+3hSlVvv8fSaoUbggEM5VErKmmpGA7Pl3HF8V6uKY7rvClBOJlH6yNwQtfTueNkGVpOv/mtWL9L4bgRA==}
     engines: {node: '>=14'}
@@ -7697,30 +7313,10 @@ packages:
     resolution: {integrity: sha512-66hKPCr+72mlfiSjlEB1+45IjXSqvVAIy6mocupoww4tBFE9R9IhwwUGoI4G++Tc9Aq+2rxOt0RFU6gPcrte0A==}
     engines: {node: '>= 0.8'}
 
-  proc-log@3.0.0:
-    resolution: {integrity: sha512-++Vn7NS4Xf9NacaU9Xq3URUuqZETPsf8L4j5/ckhaRYsfPeRyzGw+iDjFhV/Jr3uNmTvvddEJFWh5R1gRgUH8A==}
-    engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
-
   process@0.11.10:
     resolution: {integrity: sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==}
     engines: {node: '>= 0.6.0'}
 
-  progress@2.0.3:
-    resolution: {integrity: sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==}
-    engines: {node: '>=0.4.0'}
-
-  promise-inflight@1.0.1:
-    resolution: {integrity: sha512-6zWPyEOFaQBJYcGMHBKTKJ3u6TBsnMFOIZSa6ce1e/ZrrsOlnHRHbabMjLiBYKp+n44X9eUI6VUPaukCXHuG4g==}
-    peerDependencies:
-      bluebird: '*'
-    peerDependenciesMeta:
-      bluebird:
-        optional: true
-
-  promise-retry@2.0.1:
-    resolution: {integrity: sha512-y+WKFlBR8BGXnsNlIHFGPZmyDf3DFMoLhaflAnyZgV6rG6xu+JwesTo2Q9R6XwYmtmwAFCkAk3e35jEdoeh/3g==}
-    engines: {node: '>=10'}
-
   prop-types@15.8.1:
     resolution: {integrity: sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==}
 
@@ -7814,19 +7410,15 @@ packages:
     resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
     engines: {node: '>=6'}
 
-  qs@6.13.0:
-    resolution: {integrity: sha512-+38qI9SOr8tfZ4QmJNplMUxqjbe7LKvvZgWdExBOmd+egZTtjLB67Gu0HRX3u/XOq7UU2Nx6nsjvS16Z9uwfpg==}
+  pure-rand@6.1.0:
+    resolution: {integrity: sha512-bVWawvoZoBYpp6yIoQtQXHZjmz35RSVHnUOTefl8Vcjr8snTPY1wnpSPMWekcFwbxI6gtmT7rSYPFvz71ldiOA==}
+
+  qs@6.14.2:
+    resolution: {integrity: sha512-V/yCWTTF7VJ9hIh18Ugr2zhJMP01MY7c5kh4J870L7imm6/DIzBsNLTXzMwUA3yZ5b/KBqLx8Kp3uRvd7xSe3Q==}
     engines: {node: '>=0.6'}
 
-  qs@6.14.0:
-    resolution: {integrity: sha512-YWWTjgABSKcvs/nWBi9PycY/JiPJqOD4JA6o9Sej2AtvSGarXxKC3OQSk4pAarbdQlKAh5D4FCQkJNkW+GAn3w==}
-    engines: {node: '>=0.6'}
-
-  quansync@0.2.11:
-    resolution: {integrity: sha512-AifT7QEbW9Nri4tAwR5M/uzpBuqfZf+zwaEM/QkzEjj7NBuFD2rBuy0K3dE+8wltbezDV7JMA0WfnCPYRSYbXA==}
-
-  queue-microtask@1.2.3:
-    resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
+  quansync@1.0.0:
+    resolution: {integrity: sha512-5xZacEEufv3HSTPQuchrvV6soaiACMFnq1H8wkVioctoH3TRha9Sz66lOxRwPK/qZj7HPiSveih9yAyh98gvqA==}
 
   queue@6.0.2:
     resolution: {integrity: sha512-iHZWu+q3IdFZFX36ro/lKBkSvfkztY5Y7HMiPlOUjhupPcG2JMfst2KKEpu5XndviX/3UhFbRngUPNKtgvtZiA==}
@@ -7834,9 +7426,6 @@ packages:
   raf-schd@4.0.3:
     resolution: {integrity: sha512-tQkJl2GRWh83ui2DiPTJz9wEiMN20syf+5oKfB03yYP7ioZcJwsIK8FjrtLwH1m7C7e+Tt2yYBlrOpdT+dyeIQ==}
 
-  randombytes@2.1.0:
-    resolution: {integrity: sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==}
-
   range-parser@1.2.0:
     resolution: {integrity: sha512-kA5WQoNVo4t9lNx2kQNFCxKeBl5IbbSNBl1M/tLkw9WCn+hxNBAW5Qh8gdhs63CJnhjJ2zQWFoqPJP2sK1AV5A==}
     engines: {node: '>= 0.6'}
@@ -7966,15 +7555,8 @@ packages:
       '@types/react':
         optional: true
 
-  react-router-dom@7.9.5:
-    resolution: {integrity: sha512-mkEmq/K8tKN63Ae2M7Xgz3c9l9YNbY+NHH6NNeUmLA3kDkhKXRsNb/ZpxaEunvGo2/3YXdk5EJU3Hxp3ocaBPw==}
-    engines: {node: '>=20.0.0'}
-    peerDependencies:
-      react: '>=18'
-      react-dom: '>=18'
-
-  react-router@7.9.5:
-    resolution: {integrity: sha512-JmxqrnBZ6E9hWmf02jzNn9Jm3UqyeimyiwzD69NjxGySG6lIz/1LVPsoTCwN7NBX2XjCEa1LIX5EMz1j2b6u6A==}
+  react-router@7.12.0:
+    resolution: {integrity: sha512-kTPDYPFzDVGIIGNLS5VJykK0HfHLY5MF3b+xj0/tTyNYL1gF1qs7u67Z9jEhQk2sQ98SUaHxlG31g1JtF7IfVw==}
     engines: {node: '>=20.0.0'}
     peerDependencies:
       react: '>=18'
@@ -8058,10 +7640,6 @@ packages:
   reflect-metadata@0.2.2:
     resolution: {integrity: sha512-urBwgfrvVP/eAyXx4hluJivBKzuEbSQs9rKWCrCkbSxNv8mxPcUZKeuoF3Uy4mJl3Lwprp6yy5/39VWigZ4K6Q==}
 
-  reflect.getprototypeof@1.0.10:
-    resolution: {integrity: sha512-00o4I+DVrefhv+nX0ulyi3biSHCPDe+yLv5o/p6d/UVlirijB8E16FtfwSAi4g3tcqrQ4lRAqQSoFEZJehYEcw==}
-    engines: {node: '>= 0.4'}
-
   regenerator-runtime@0.14.1:
     resolution: {integrity: sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==}
 
@@ -8115,10 +7693,6 @@ packages:
     resolution: {integrity: sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==}
     engines: {node: '>=0.10.0'}
 
-  require-in-the-middle@8.0.1:
-    resolution: {integrity: sha512-QT7FVMXfWOYFbeRBF6nu+I6tr2Tf3u0q8RIEjNob/heKY/nh7drD/k7eeMFmSQgnTtCzLDcCu/XEnpW2wk4xCQ==}
-    engines: {node: '>=9.3.0 || >=8.10.0 <9.0.0'}
-
   reselect@5.1.1:
     resolution: {integrity: sha512-K/BG6eIky/SBpzfHZv/dd+9JBFiS4SWV7FIujVyJRux6e45+73RaUHXLmIR1f7WOMaQ0U1km6qwklRQxpJJY0w==}
 
@@ -8134,10 +7708,6 @@ packages:
     engines: {node: '>= 0.4'}
     hasBin: true
 
-  resolve@2.0.0-next.5:
-    resolution: {integrity: sha512-U7WjGVG9sH8tvjW5SmGbQuui75FiyjAX72HX15DwBBwF9dNiQZRQAg9nnPhYy+TUnE0+VcrttuvNI8oSxZcocA==}
-    hasBin: true
-
   restore-cursor@5.1.0:
     resolution: {integrity: sha512-oMA2dcrw6u0YfxJQXm342bFKX/E4sG9rbTzO9ptUcR/e8A33cHuvStiYOwH7fszkZlZ1z/ta9AAoPk2F4qIOHA==}
     engines: {node: '>=18'}
@@ -8145,14 +7715,6 @@ packages:
   restructure@3.0.2:
     resolution: {integrity: sha512-gSfoiOEA0VPE6Tukkrr7I0RBdE0s7H1eFCDBk05l1KIQT1UIKNc5JZy6jdyW6eYH3aR3g5b3PuL77rq0hvwtAw==}
 
-  retry@0.12.0:
-    resolution: {integrity: sha512-9LkiTwjUh6rT555DtE9rTX+BKByPfrMzEAtnlEtdEwr3Nkffwiihqe2bWADg+OQRjt9gl6ICdmB/ZFDCGAtSow==}
-    engines: {node: '>= 4'}
-
-  reusify@1.1.0:
-    resolution: {integrity: sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==}
-    engines: {iojs: '>=1.0.0', node: '>=0.10.0'}
-
   rfdc@1.4.1:
     resolution: {integrity: sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==}
 
@@ -8185,41 +7747,32 @@ packages:
     engines: {node: ^20.19.0 || >=22.12.0}
     hasBin: true
 
-  rollup@4.52.4:
-    resolution: {integrity: sha512-CLEVl+MnPAiKh5pl4dEWSyMTpuflgNQiLGhMv8ezD5W/qP8AKvmYpCOKRRNOh7oRKnauBZ4SyeYkMS+1VSyKwQ==}
+  rolldown@1.0.0-rc.12:
+    resolution: {integrity: sha512-yP4USLIMYrwpPHEFB5JGH1uxhcslv6/hL0OyvTuY+3qlOSJvZ7ntYnoWpehBxufkgN0cvXxppuTu5hHa/zPh+A==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    hasBin: true
+
+  rollup@4.59.0:
+    resolution: {integrity: sha512-2oMpl67a3zCH9H79LeMcbDhXW/UmWG/y2zuqnF2jQq5uq9TbM9TVyXvA4+t+ne2IIkBdrLpAaRQAvo7YI/Yyeg==}
     engines: {node: '>=18.0.0', npm: '>=8.0.0'}
     hasBin: true
 
   rope-sequence@1.3.4:
     resolution: {integrity: sha512-UT5EDe2cu2E/6O4igUr5PSFs23nvvukicWHx6GnOPlHAiiYbzNuCRQCuiUdHJQcqKalLKlrYJnjY0ySGsXNQXQ==}
 
-  rrweb-cssom@0.7.1:
-    resolution: {integrity: sha512-TrEMa7JGdVm0UThDJSx7ddw5nVm3UJS9o9CCIZ72B1vSyEZoziDqBYP3XIoi/12lKrJR8rE3jeFHMok2F/Mnsg==}
-
   rrweb-cssom@0.8.0:
     resolution: {integrity: sha512-guoltQEx+9aMf2gDZ0s62EcV8lsXR+0w8915TC3ITdn2YueuNjdAYh/levpU9nFaoChh9RUS5ZdQMrKfVEN9tw==}
 
-  run-parallel@1.2.0:
-    resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
-
   sade@1.8.1:
     resolution: {integrity: sha512-xal3CZX1Xlo/k4ApwCFrHVACi9fBqJ7V+mwhBsuf/1IOKbBy098Fex+Wa/5QMubw09pSZ/u8EY8PWgevJsXp1A==}
     engines: {node: '>=6'}
 
-  safe-array-concat@1.1.3:
-    resolution: {integrity: sha512-AURm5f0jYEOydBj7VQlVvDrjeFgthDdEF5H1dP+6mNpoXOMo1quQqJ4wvJDyRZ9+pO3kGWoOdmV08cSv2aJV6Q==}
-    engines: {node: '>=0.4'}
-
   safe-buffer@5.1.2:
     resolution: {integrity: sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==}
 
   safe-buffer@5.2.1:
     resolution: {integrity: sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==}
 
-  safe-push-apply@1.0.0:
-    resolution: {integrity: sha512-iKE9w/Z7xCzUMIZqdBsp6pEQvwuEebH4vdpjcDWnyzaI6yl6O9FHvVpmGelvEHNsoY6wGblkxR6Zty/h00WiSA==}
-    engines: {node: '>= 0.4'}
-
   safe-regex-test@1.1.0:
     resolution: {integrity: sha512-x/+Cz4YrimQxQccJf5mKEbIa1NzeCRNI5Ecl/ekmlYaampdNLPalVyIcCZNNH3MvmqBugV5TMYZXv0ljslUlaw==}
     engines: {node: '>= 0.4'}
@@ -8244,12 +7797,15 @@ packages:
   scheduler@0.23.2:
     resolution: {integrity: sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==}
 
+  scheduler@0.25.0-rc-603e6108-20241029:
+    resolution: {integrity: sha512-pFwF6H1XrSdYYNLfOcGlM28/j8CGLu8IvdrxqhjWULe2bPcKiKW4CV+OWqR/9fT52mywx65l7ysNkjLKBda7eA==}
+
   schema-utils@3.3.0:
     resolution: {integrity: sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==}
     engines: {node: '>= 10.13.0'}
 
-  schema-utils@4.3.2:
-    resolution: {integrity: sha512-Gn/JaSk/Mt9gYubxTtSn/QCV4em9mpAPiR1rqy/Ocu19u/G9J5WWdNoUT4SiV6mFC3y6cxyFcFwdzPM3FgxGAQ==}
+  schema-utils@4.3.3:
+    resolution: {integrity: sha512-eflK8wEtyOE6+hsaRVPxvUKYCpRgzLqDTb8krvAsRIwOGlHoSgYLgBXoubGgLd2fT41/OUYdb48v4k4WWHQurA==}
     engines: {node: '>= 10.13.0'}
 
   scroll-into-view-if-needed@3.1.0:
@@ -8263,13 +7819,8 @@ packages:
     resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==}
     hasBin: true
 
-  semver@7.7.2:
-    resolution: {integrity: sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==}
-    engines: {node: '>=10'}
-    hasBin: true
-
-  semver@7.7.3:
-    resolution: {integrity: sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q==}
+  semver@7.7.4:
+    resolution: {integrity: sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA==}
     engines: {node: '>=10'}
     hasBin: true
 
@@ -8280,8 +7831,9 @@ packages:
   sentence-case@3.0.4:
     resolution: {integrity: sha512-8LS0JInaQMCRoQ7YUytAo/xUu5W2XnQxV2HI/6uM6U7CITS1RqPElr30V6uIqyMKM9lJGRVFy5/4CuzcixNYSg==}
 
-  serialize-javascript@6.0.2:
-    resolution: {integrity: sha512-Saa1xPByTTq2gdeFZYLLo+RFE35NHZkAbqZeWNd3BpzppeVisAqpDjcp8dyf6uIvEqJRd46jemmyA4iFIeVk8g==}
+  serialize-javascript@7.0.5:
+    resolution: {integrity: sha512-F4LcB0UqUl1zErq+1nYEEzSHJnIwb3AF2XWB94b+afhrekOUijwooAYqFyRbjYkm2PAKBabx6oYv/xDxNi8IBw==}
+    engines: {node: '>=20.0.0'}
 
   serve-handler@6.1.6:
     resolution: {integrity: sha512-x5RL9Y2p5+Sh3D38Fh9i/iQ5ZK+e4xuXRd/pGbM4D13tgo/MGwbttUk8emytcr1YYzBYs+apnUngBDFYfpjPuQ==}
@@ -8306,10 +7858,6 @@ packages:
     resolution: {integrity: sha512-7PGFlmtwsEADb0WYyvCMa1t+yke6daIG4Wirafur5kcf+MhUnPms1UeR0CKQdTZD81yESwMHbtn+TR+dMviakQ==}
     engines: {node: '>= 0.4'}
 
-  set-proto@1.0.0:
-    resolution: {integrity: sha512-RJRdvCo6IAnPdsvP/7m6bsQqNnn1FCBX5ZNtFL98MmFF/4xAIJTIg1YbHW5DC2W5SKZanrC6i4HsJqlajw/dZw==}
-    engines: {node: '>= 0.4'}
-
   setprototypeof@1.2.0:
     resolution: {integrity: sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==}
 
@@ -8317,6 +7865,10 @@ packages:
     resolution: {integrity: sha512-/6KqX+GVUdqPuPPd2LxDDxzX6CAbjJehAAOKlNpqqUpAqPM6HeL8f+o3a+JsyGjn2lv0WY8UsTgUJjU9Ok55NA==}
     engines: {node: '>=8'}
 
+  sharp@0.34.3:
+    resolution: {integrity: sha512-eX2IQ6nFohW4DbvHIOLRB3MHFpYqaqvXd3Tp5e/T/dSH83fxaNJQRvDMhASmkNTsNTVF2/OOopzRCt7xokgPfg==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+
   shebang-command@2.0.0:
     resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==}
     engines: {node: '>=8'}
@@ -8382,22 +7934,6 @@ packages:
   space-separated-tokens@2.0.2:
     resolution: {integrity: sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==}
 
-  spdx-correct@3.2.0:
-    resolution: {integrity: sha512-kN9dJbvnySHULIluDHy32WHRUu3Og7B9sbY7tsFLctQkIqnMh3hErYgdMjTYuqmcXX+lK5T1lnUt3G7zNswmZA==}
-
-  spdx-exceptions@2.5.0:
-    resolution: {integrity: sha512-PiU42r+xO4UbUS1buo3LPJkjlO7430Xn5SVAhdpzzsPHsjbYVflnnFdATgabnLude+Cqu25p6N+g2lw/PFsa4w==}
-
-  spdx-expression-parse@3.0.1:
-    resolution: {integrity: sha512-cbqHunsQWnJNE6KhVSMsMeH5H/L9EpymbzqTQ3uLwNCLZ1Q481oWaofqH7nO6V07xlXwY6PhQdQ2IedWx/ZK4Q==}
-
-  spdx-license-ids@3.0.22:
-    resolution: {integrity: sha512-4PRT4nh1EImPbt2jASOKHX7PB7I+e4IWNLvkKFDxNhJlfjbYlleYQh285Z/3mPTHSAK/AvdMmw5BNNuYH8ShgQ==}
-
-  stable-hash-x@0.2.0:
-    resolution: {integrity: sha512-o3yWv49B/o4QZk5ZcsALc6t0+eCelPc44zZsLtCQnZPDwFpDYSWcDnrv2TtMmMbQ7uKo3J0HTURCqckw23czNQ==}
-    engines: {node: '>=12.0.0'}
-
   stack-trace@0.0.10:
     resolution: {integrity: sha512-KGzahc7puUKkzyMt+IqAep+TVNbKP+k2Lmwhub39m1AsTSkaDutx56aDCo+HLDzf/D26BIHTJWNiTG1KAJiQCg==}
 
@@ -8414,21 +7950,8 @@ packages:
   std-env@3.10.0:
     resolution: {integrity: sha512-5GS12FdOZNliM5mAOxFRg7Ir0pWz8MdpYm6AY6VPkGpbA7ZzmbzNcBJQ0GPvvyWgcY7QAhCgf9Uy89I03faLkg==}
 
-  stop-iteration-iterator@1.1.0:
-    resolution: {integrity: sha512-eLoXW/DHyl62zxY4SCaIgnRhuMr6ri4juEYARS8E6sCEqzKpOiE521Ucofdx+KnDZl5xmvGYaaKCk5FEOxJCoQ==}
-    engines: {node: '>= 0.4'}
-
-  storybook@8.6.14:
-    resolution: {integrity: sha512-sVKbCj/OTx67jhmauhxc2dcr1P+yOgz/x3h0krwjyMgdc5Oubvxyg4NYDZmzAw+ym36g/lzH8N0Ccp4dwtdfxw==}
-    hasBin: true
-    peerDependencies:
-      prettier: ^2 || ^3
-    peerDependenciesMeta:
-      prettier:
-        optional: true
-
-  storybook@9.1.10:
-    resolution: {integrity: sha512-4+U7gF9hMpGilQmdVJwQaVZZEkD7XwC4ZDmBa51mobaPYelELEMoMfNM2hLyvB2x12gk1IJui1DnwOE4t+MXhw==}
+  storybook@9.1.19:
+    resolution: {integrity: sha512-P7K/b+Pn1sXJzwYCF6hH5Zjdrg4ZlA5Bz9rdOJEdvm6ev27XESDGI+Ql+dfUfUcGOym3Aud4MssJIDEF2ocsyQ==}
     hasBin: true
     peerDependencies:
       prettier: ^2 || ^3
@@ -8456,29 +7979,6 @@ packages:
     resolution: {integrity: sha512-Kxl3KJGb/gxkaUMOjRsQ8IrXiGW75O4E3RPjFIINOVH8AMl2SQ/yWdTzWwF3FevIX9LcMAjJW+GRwAlAbTSXdg==}
     engines: {node: '>=20'}
 
-  string.prototype.includes@2.0.1:
-    resolution: {integrity: sha512-o7+c9bW6zpAdJHTtujeePODAhkuicdAryFsfVKwA+wGw89wJ4GTY484WTucM9hLtDEOpOvI+aHnzqnC5lHp4Rg==}
-    engines: {node: '>= 0.4'}
-
-  string.prototype.matchall@4.0.12:
-    resolution: {integrity: sha512-6CC9uyBL+/48dYizRf7H7VAYCMCNTBeM78x/VTUe9bFEaxBepPJDa1Ow99LqI/1yF7kuy7Q3cQsYMrcjGUcskA==}
-    engines: {node: '>= 0.4'}
-
-  string.prototype.repeat@1.0.0:
-    resolution: {integrity: sha512-0u/TldDbKD8bFCQ/4f5+mNRrXwZ8hg2w7ZR8wa16e8z9XpePWl3eGEcUD0OXpEH/VJH/2G3gjUtR3ZOiBe2S/w==}
-
-  string.prototype.trim@1.2.10:
-    resolution: {integrity: sha512-Rs66F0P/1kedk5lyYyH9uBzuiI/kNRmwJAR9quK6VOtIpZ2G+hMZd+HQbbv25MgCA6gEffoMZYxlTod4WcdrKA==}
-    engines: {node: '>= 0.4'}
-
-  string.prototype.trimend@1.0.9:
-    resolution: {integrity: sha512-G7Ok5C6E/j4SGfyLCloXTrngQIQU3PWtXGst3yM7Bea9FRURf1S42ZHlZZtsNque2FN2PoUhfZXYLNWwEr4dLQ==}
-    engines: {node: '>= 0.4'}
-
-  string.prototype.trimstart@1.0.8:
-    resolution: {integrity: sha512-UXSH262CSZY1tfu3G3Secr6uGLCFVPMhIqHjlgCUtCCcgihYc/xKs9djMTMUOb2j1mVSeU8EU6NWc/iQKU6Gfg==}
-    engines: {node: '>= 0.4'}
-
   string_decoder@1.3.0:
     resolution: {integrity: sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==}
 
@@ -8489,10 +7989,6 @@ packages:
     resolution: {integrity: sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==}
     engines: {node: '>=8'}
 
-  strip-ansi@7.1.0:
-    resolution: {integrity: sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==}
-    engines: {node: '>=12'}
-
   strip-ansi@7.1.2:
     resolution: {integrity: sha512-gmBGslpoQJtgnMAvOVqGZpEz9dyoKTCzy2nfz/n8aIFhN/jCE/rCmcxabB6jOOHV+0WNnylOxaxBQPSvcWklhA==}
     engines: {node: '>=12'}
@@ -8517,10 +8013,6 @@ packages:
     resolution: {integrity: sha512-4gB8na07fecVVkOI6Rs4e7T6NOTki5EmL7TUduTs6bu3EdnSycntVJ4re8kgZA+wx9IueI2Y11bfbgwtzuE0KQ==}
     engines: {node: '>=0.10.0'}
 
-  strip-json-comments@3.1.1:
-    resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==}
-    engines: {node: '>=8'}
-
   strtok3@10.3.4:
     resolution: {integrity: sha512-KIy5nylvC5le1OdaaoCJ07L+8iQzJHGH6pWDuzS+d07Cu7n1MZ2x26P8ZKIWfbK02+XIL8Mp4RkWeqdUCrDMfg==}
     engines: {node: '>=18'}
@@ -8529,16 +8021,11 @@ packages:
     resolution: {integrity: sha512-0WqXzrsMTyb8yjZJHDqwmnwRJvhALK9LfRtRc6B4UTWe8AijYLZYZ9thuJTZc2VfQWINADW/j+LiJnfy2RoC1w==}
     engines: {node: '>= 12.13.0'}
     peerDependencies:
-      webpack: ^5.0.0
+      webpack: 5.104.1
 
   style-to-object@0.4.4:
     resolution: {integrity: sha512-HYNoHZa2GorYNyqiCaBgsxvcJIn7OHq6inEga+E6Ke3m5JkoqpQbnFssk4jwe+K7AhGa2fcha4wSOf1Kn01dMg==}
 
-  sucrase@3.35.0:
-    resolution: {integrity: sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==}
-    engines: {node: '>=16 || 14 >=14.17'}
-    hasBin: true
-
   supports-color@5.5.0:
     resolution: {integrity: sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==}
     engines: {node: '>=4'}
@@ -8562,7 +8049,7 @@ packages:
     resolution: {integrity: sha512-9Zi9UP2YmDpgmQVbyOPJClY0dwf58JDyDMQ7uRc4krmc72twNI2fvlBWHLqVekBpPc7h5NJkGVT1zNDxFrqhvg==}
     peerDependencies:
       '@swc/core': ^1.2.147
-      webpack: '>=2'
+      webpack: 5.104.1
 
   swr@2.2.4:
     resolution: {integrity: sha512-njiZ/4RiIhoOlAaLYDqwz5qH/KZXVilRLvomrx83HjzCWTfa+InyfAjv05PSFxnmLzZkNO9ZfvgoqzAaEI4sGQ==}
@@ -8575,34 +8062,24 @@ packages:
   tabbable@6.2.0:
     resolution: {integrity: sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==}
 
-  tailwind-merge@2.6.0:
-    resolution: {integrity: sha512-P+Vu1qXfzediirmHOC3xKGAYeZtPcV9g76X+xg2FD4tYgR71ewMA35Y3sCz3zhiN/dwefRpJX0yBcgwi1fXNQA==}
+  tailwind-merge@3.4.0:
+    resolution: {integrity: sha512-uSaO4gnW+b3Y2aWoWfFpX62vn2sR3skfhbjsEnaBI81WD1wBLlHZe5sWf0AqjksNdYTbGBEd0UasQMT3SNV15g==}
 
-  tailwind-merge@3.3.1:
-    resolution: {integrity: sha512-gBXpgUm/3rp1lMZZrM/w7D8GKqshif0zAymAhbCyIt8KMe+0v9DQ7cdYLR4FHH/cKpdTXb+A/tKKU3eolfsI+g==}
-
-  tailwindcss-animate@1.0.7:
-    resolution: {integrity: sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==}
-    peerDependencies:
-      tailwindcss: '>=3.0.0 || insiders'
-
-  tailwindcss@3.4.17:
-    resolution: {integrity: sha512-w33E2aCvSDP0tW9RZuNXadXlkHXqFzSkQew/aIa2i/Sj8fThxwovwlXHSPXTbAHwEIhBFXAedUhP2tueAKP8Og==}
-    engines: {node: '>=14.0.0'}
-    hasBin: true
+  tailwindcss@4.1.17:
+    resolution: {integrity: sha512-j9Ee2YjuQqYT9bbRTfTZht9W/ytp5H+jJpZKiYdP/bpnXARAuELt9ofP0lPnmHjbga7SNQIxdTAXCmtKVYjN+Q==}
 
   tapable@2.3.0:
     resolution: {integrity: sha512-g9ljZiwki/LfxmQADO3dEY1CbpmXT5Hm2fJ+QaGKwSXUylMybePR7/67YW7jOrrvjEgL1Fmz5kzyAjWVWLlucg==}
     engines: {node: '>=6'}
 
-  terser-webpack-plugin@5.3.14:
-    resolution: {integrity: sha512-vkZjpUjb6OMS7dhV+tILUW6BhpDR7P2L/aQSAv+Uwk+m8KATX9EccViHTJR2qDtACKPIYndLGCyl3FMo+r2LMw==}
+  terser-webpack-plugin@5.3.16:
+    resolution: {integrity: sha512-h9oBFCWrq78NyWWVcSwZarJkZ01c2AyGrzs1crmHZO3QUg9D61Wu4NPjBy69n7JqylFF5y+CsUZYmYEIZ3mR+Q==}
     engines: {node: '>= 10.13.0'}
     peerDependencies:
       '@swc/core': '*'
       esbuild: '*'
       uglify-js: '*'
-      webpack: ^5.1.0
+      webpack: 5.104.1
     peerDependenciesMeta:
       '@swc/core':
         optional: true
@@ -8622,13 +8099,6 @@ packages:
   thenby@1.3.4:
     resolution: {integrity: sha512-89Gi5raiWA3QZ4b2ePcEwswC3me9JIg+ToSgtE0JWeCynLnLxNr/f9G+xfo9K+Oj4AFdom8YNJjibIARTJmapQ==}
 
-  thenify-all@1.6.0:
-    resolution: {integrity: sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==}
-    engines: {node: '>=0.8'}
-
-  thenify@3.3.1:
-    resolution: {integrity: sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==}
-
   tiny-inflate@1.0.3:
     resolution: {integrity: sha512-pkY1fj1cKHb2seWDy0B16HeWyczlJA9/WW3u3c4z/NiWDsO3DOU5D7nhTLE9CF0yXv/QZFY7sEJmj24dK+Rrqw==}
 
@@ -8641,17 +8111,18 @@ packages:
   tinycolor2@1.6.0:
     resolution: {integrity: sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw==}
 
-  tinyexec@1.0.1:
-    resolution: {integrity: sha512-5uC6DDlmeqiOwCPmK9jMSdOuZTh8bU39Ys6yidB+UTt5hfZUPGAypSgFRiEp+jbi9qH40BLDvy85jIU88wKSqw==}
-
-  tinyexec@1.0.2:
-    resolution: {integrity: sha512-W/KYk+NFhkmsYpuHq5JykngiOCnxeVL8v8dFnqxSD8qEEdRfXk1SDM6JzNqcERbcGYj9tMrDQBYV9cjgnunFIg==}
+  tinyexec@1.0.4:
+    resolution: {integrity: sha512-u9r3uZC0bdpGOXtlxUIdwf9pkmvhqJdrVCH9fapQtgy/OeTTMZ1nqH7agtvEfmGui6e1XxjcdrlxvxJvc3sMqw==}
     engines: {node: '>=18'}
 
   tinyglobby@0.2.15:
     resolution: {integrity: sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==}
     engines: {node: '>=12.0.0'}
 
+  tinypool@2.1.0:
+    resolution: {integrity: sha512-Pugqs6M0m7Lv1I7FtxN4aoyToKg1C4tu+/381vH35y8oENM/Ai7f7C4StcoK4/+BSw9ebcS8jRiVrORFKCALLw==}
+    engines: {node: ^20.0.0 || >=22.0.0}
+
   tinyrainbow@1.2.0:
     resolution: {integrity: sha512-weEDEq7Z5eTHPDh4xjX789+fHfF+P8boiFB+0vbWzpbnbsEr/GRaohi/uMKxg8RZMXnl1ItAi/IUHWMsjDV7kQ==}
     engines: {node: '>=14.0.0'}
@@ -8731,24 +8202,10 @@ packages:
   trough@2.2.0:
     resolution: {integrity: sha512-tmMpK00BjZiUyVyvrBK7knerNgmgvcV/KLVyuma/SC+TQN167GrMRciANTz09+k3zW8L8t60jWO1GpfkZdjTaw==}
 
-  ts-api-utils@2.1.0:
-    resolution: {integrity: sha512-CUgTZL1irw8u29bzrOD/nH85jqyc74D6SshFgujOIA7osm2Rz7dYH77agkx7H4FBNxDq7Cjf+IjaX/8zwFW+ZQ==}
-    engines: {node: '>=18.12'}
-    peerDependencies:
-      typescript: 5.8.3
-
-  ts-declaration-location@1.0.7:
-    resolution: {integrity: sha512-EDyGAwH1gO0Ausm9gV6T2nUvBgXT5kGoCMJPllOaooZ+4VvJiKBdZE7wK18N1deEowhcUptS+5GXZK8U/fvpwA==}
-    peerDependencies:
-      typescript: 5.8.3
-
   ts-dedent@2.2.0:
     resolution: {integrity: sha512-q5W7tVM71e2xjHZTlgfTDoPF/SmqKG5hddq9SzR49CH2hayqRKJtQ4mtRlSxKaJlR/+9rEM+mnBHf7I2/BQcpQ==}
     engines: {node: '>=6.10'}
 
-  ts-interface-checker@0.1.13:
-    resolution: {integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==}
-
   tsconfck@3.1.6:
     resolution: {integrity: sha512-ks6Vjr/jEw0P1gmOVwutM3B7fWxoWBL2KRDb1JfqGVawBmO5UsvmWOQFGHBPl5yxYz4eERr19E6L7NMv+Fej4w==}
     engines: {node: ^18 || >=20}
@@ -8759,9 +8216,6 @@ packages:
       typescript:
         optional: true
 
-  tsconfig-paths@3.15.0:
-    resolution: {integrity: sha512-2Ac2RgzDe/cn48GvOe3M+o82pEFewD3UPbyoUHHdKasHwJKjds4fLXWf/Ux5kATBKN20oaFGu+jbElp1pos0mg==}
-
   tsconfig-paths@4.2.0:
     resolution: {integrity: sha512-NoZ4roiN7LnbKn9QqE1amc9DJfzvZXxF4xDavcOWt1BPkdx+m+0gJuPM+S0vCe7zTJMYUP0R8pO2XMr+Y8oLIg==}
     engines: {node: '>=6'}
@@ -8800,47 +8254,13 @@ packages:
   tslib@2.8.1:
     resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
 
-  turbo-darwin-64@2.6.3:
-    resolution: {integrity: sha512-BlJJDc1CQ7SK5Y5qnl7AzpkvKSnpkfPmnA+HeU/sgny3oHZckPV2776ebO2M33CYDSor7+8HQwaodY++IINhYg==}
-    cpu: [x64]
-    os: [darwin]
-
-  turbo-darwin-arm64@2.6.3:
-    resolution: {integrity: sha512-MwVt7rBKiOK7zdYerenfCRTypefw4kZCue35IJga9CH1+S50+KTiCkT6LBqo0hHeoH2iKuI0ldTF2a0aB72z3w==}
-    cpu: [arm64]
-    os: [darwin]
-
-  turbo-linux-64@2.6.3:
-    resolution: {integrity: sha512-cqpcw+dXxbnPtNnzeeSyWprjmuFVpHJqKcs7Jym5oXlu/ZcovEASUIUZVN3OGEM6Y/OTyyw0z09tOHNt5yBAVg==}
-    cpu: [x64]
-    os: [linux]
-
-  turbo-linux-arm64@2.6.3:
-    resolution: {integrity: sha512-MterpZQmjXyr4uM7zOgFSFL3oRdNKeflY7nsjxJb2TklsYqiu3Z9pQ4zRVFFH8n0mLGna7MbQMZuKoWqqHb45w==}
-    cpu: [arm64]
-    os: [linux]
-
-  turbo-windows-64@2.6.3:
-    resolution: {integrity: sha512-biDU70v9dLwnBdLf+daoDlNJVvqOOP8YEjqNipBHzgclbQlXbsi6Gqqelp5er81Qo3BiRgmTNx79oaZQTPb07Q==}
-    cpu: [x64]
-    os: [win32]
-
-  turbo-windows-arm64@2.6.3:
-    resolution: {integrity: sha512-dDHVKpSeukah3VsI/xMEKeTnV9V9cjlpFSUs4bmsUiLu3Yv2ENlgVEZv65wxbeE0bh0jjpmElDT+P1KaCxArQQ==}
-    cpu: [arm64]
-    os: [win32]
-
-  turbo@2.6.3:
-    resolution: {integrity: sha512-bf6YKUv11l5Xfcmg76PyWoy/e2vbkkxFNBGJSnfdSXQC33ZiUfutYh6IXidc5MhsnrFkWfdNNLyaRk+kHMLlwA==}
+  turbo@2.9.4:
+    resolution: {integrity: sha512-wZ/kMcZCuK5oEp7sXSSo/5fzKjP9I2EhoiarZjyCm2Ixk0WxFrC/h0gF3686eHHINoFQOOSWgB/pGfvkR8rkgQ==}
     hasBin: true
 
   tween-functions@1.2.0:
     resolution: {integrity: sha512-PZBtLYcCLtEcjL14Fzb1gSxPBeL7nWvGhO5ZFPGqziCcr8uvHp0NDmdjBchp6KHL+tExcg0m3NISmKxhU394dA==}
 
-  type-check@0.4.0:
-    resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
-    engines: {node: '>= 0.8.0'}
-
   type-fest@2.19.0:
     resolution: {integrity: sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==}
     engines: {node: '>=12.20'}
@@ -8849,32 +8269,9 @@ packages:
     resolution: {integrity: sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==}
     engines: {node: '>= 0.6'}
 
-  typed-array-buffer@1.0.3:
-    resolution: {integrity: sha512-nAYYwfY3qnzX30IkA6AQZjVbtK6duGontcQm1WSG1MD94YLqK0515GNApXkoxKOWMusVssAHWLh9SeaoefYFGw==}
-    engines: {node: '>= 0.4'}
-
-  typed-array-byte-length@1.0.3:
-    resolution: {integrity: sha512-BaXgOuIxz8n8pIq3e7Atg/7s+DpiYrxn4vdot3w9KbnBhcRQq6o3xemQdIfynqSeXeDrF32x+WvfzmOjPiY9lg==}
-    engines: {node: '>= 0.4'}
-
-  typed-array-byte-offset@1.0.4:
-    resolution: {integrity: sha512-bTlAFB/FBYMcuX81gbL4OcpH5PmlFHqlCCpAl8AlEzMz5k53oNDvN8p1PNOWLEmI2x4orp3raOFB51tv9X+MFQ==}
-    engines: {node: '>= 0.4'}
-
-  typed-array-length@1.0.7:
-    resolution: {integrity: sha512-3KS2b+kL7fsuk/eJZ7EQdnEmQoaho/r6KUef7hxvltNA5DR8NAUM+8wJMbJyZ4G9/7i3v5zPBIMN5aybAh2/Jg==}
-    engines: {node: '>= 0.4'}
-
   typed-styles@0.0.7:
     resolution: {integrity: sha512-pzP0PWoZUhsECYjABgCGQlRGL1n7tOHsgwYv3oIiEpJwGhFTuty/YNeduxQYzXXa3Ge5BdT6sHYIQYpl4uJ+5Q==}
 
-  typescript-eslint@8.48.1:
-    resolution: {integrity: sha512-FbOKN1fqNoXp1hIl5KYpObVrp0mCn+CLgn479nmu2IsRMrx2vyv74MmsBLVlhg8qVwNFGbXSp8fh1zp8pEoC2A==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    peerDependencies:
-      eslint: ^8.57.0 || ^9.0.0
-      typescript: 5.8.3
-
   typescript@5.8.3:
     resolution: {integrity: sha512-p1diW6TqL9L07nNxvRMM7hMMw4c5XOo/1ibL4aAIGmSAt9slTE1Xgw5KWuof2uTOvCg9BY7ZRi+GaF+7sfgPeQ==}
     engines: {node: '>=14.17'}
@@ -8887,16 +8284,19 @@ packages:
     resolution: {integrity: sha512-rvKSBiC5zqCCiDZ9kAOszZcDvdAHwwIKJG33Ykj43OKcWsnmcBRL09YTU4nOeHZ8Y2a7l1MgTd08SBe9A8Qj6A==}
     engines: {node: '>=18'}
 
-  unbox-primitive@1.1.0:
-    resolution: {integrity: sha512-nWJ91DjeOkej/TA8pXQ3myruKpKEYgqvpw9lz4OPHj/NWFNluYrjbz9j01CJ8yKQd2g4jFoOkINCTW2I5LEEyw==}
-    engines: {node: '>= 0.4'}
+  unconfig-core@7.5.0:
+    resolution: {integrity: sha512-Su3FauozOGP44ZmKdHy2oE6LPjk51M/TRRjHv2HNCWiDvfvCoxC2lno6jevMA91MYAdCdwP05QnWdWpSbncX/w==}
 
-  unconfig@7.3.3:
-    resolution: {integrity: sha512-QCkQoOnJF8L107gxfHL0uavn7WD9b3dpBcFX6HtfQYmjw2YzWxGuFQ0N0J6tE9oguCBJn9KOvfqYDCMPHIZrBA==}
+  unconfig@7.5.0:
+    resolution: {integrity: sha512-oi8Qy2JV4D3UQ0PsopR28CzdQ3S/5A1zwsUwp/rosSbfhJ5z7b90bIyTwi/F7hCLD4SGcZVjDzd4XoUQcEanvA==}
 
   undici-types@6.20.0:
     resolution: {integrity: sha512-Ny6QZ2Nju20vw1SRHe3d9jVu6gJ+4e3+MMpqu7pqE5HT6WsTSlce++GQmK5UXS8mzV8DSYHrQH+Xrf2jVcuKNg==}
 
+  undici@7.24.0:
+    resolution: {integrity: sha512-jxytwMHhsbdpBXxLAcuu0fzlQeXCNnWdDyRHpvWsUl8vd98UwYdl9YTyn8/HcpcJPC3pwUveefsa3zTxyD/ERg==}
+    engines: {node: '>=20.18.1'}
+
   unicode-properties@1.4.1:
     resolution: {integrity: sha512-CLjCCLQ6UuMxWnbIylkisbRj31qxHPAurvena/0iwSVbQ2G1VY5/HjV0IRabOEbDHlzZlRdCrD4NhB0JtU40Pg==}
 
@@ -8951,18 +8351,22 @@ packages:
     resolution: {integrity: sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==}
     engines: {node: '>= 0.8'}
 
-  unplugin@1.0.1:
-    resolution: {integrity: sha512-aqrHaVBWW1JVKBHmGo33T5TxeL0qWzfvjWokObHA9bYmN7eNDkwOxmLjhioHl9878qDFMAaT51XNroRyuz7WxA==}
-
   unplugin@1.16.1:
     resolution: {integrity: sha512-4/u/j4FrCKdi17jaxuJA0jClGxB1AvU2hw/IuayPc4ay1XGaJs/rbb4v5WKwAjNifjmXK9PIFyuPiaK8azyR9w==}
     engines: {node: '>=14.0.0'}
 
-  unrs-resolver@1.11.1:
-    resolution: {integrity: sha512-bSjt9pjaEBnNiGgc9rUiHGKv5l4/TGzDmYw3RhnkJGtLhbnnA/5qJj7x3dNDCRx/PJxu774LlH8lCOlB4hEfKg==}
+  unrun@0.2.34:
+    resolution: {integrity: sha512-LyaghRBR++r7svhDK6tnDz2XaYHWdneBOA0jbS8wnRsHerI9MFljX4fIiTgbbNbEVzZ0C9P1OjWLLe1OqoaaEw==}
+    engines: {node: '>=20.19.0'}
+    hasBin: true
+    peerDependencies:
+      synckit: ^0.11.11
+    peerDependenciesMeta:
+      synckit:
+        optional: true
 
-  update-browserslist-db@1.1.3:
-    resolution: {integrity: sha512-UxhIZQ+QInVdunkDAaiazvvT/+fXL5Osr0JZlJulepYu6Jd7qJtDZjlur0emRlT71EN3ScPoE7gvsuIKKNavKw==}
+  update-browserslist-db@1.2.3:
+    resolution: {integrity: sha512-Js0m9cx+qOgDxo0eMiFGEueWztz+d4+M3rGlmKPT+T4IS/jP4ylw3Nwpu6cpTTP8R1MAC1kF4VbdLt3ARf209w==}
     hasBin: true
     peerDependencies:
       browserslist: '>= 4.21.0'
@@ -9051,13 +8455,6 @@ packages:
       typescript:
         optional: true
 
-  validate-npm-package-license@3.0.4:
-    resolution: {integrity: sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==}
-
-  validate-npm-package-name@5.0.1:
-    resolution: {integrity: sha512-OljLrQ9SQdOUqTaQxqL5dEfZWrXExyyWsozYlAWFawPVNuD83igl7uJD2RTkNMbniIYgt8l81eCJGIdQF7avLQ==}
-    engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
-
   vary@1.1.2:
     resolution: {integrity: sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==}
     engines: {node: '>= 0.8'}
@@ -9092,13 +8489,13 @@ packages:
   vite-tsconfig-paths@5.1.4:
     resolution: {integrity: sha512-cYj0LRuLV2c2sMqhqhGpaO3LretdtMn/BVX4cPLanIZuwwrkVl+lK84E/miEXkCHWXuq65rhNN4rXsBcOB3S4w==}
     peerDependencies:
-      vite: 7.1.11
+      vite: 7.3.1
     peerDependenciesMeta:
       vite:
         optional: true
 
-  vite@7.1.11:
-    resolution: {integrity: sha512-uzcxnSDVjAopEUjljkWh8EIrg6tlzrjFUfMcR1EVsRDGwf/ccef0qQPRyOrROwhrTDaApueq+ja+KLPlzR/zdg==}
+  vite@7.3.1:
+    resolution: {integrity: sha512-w+N7Hifpc3gRjZ63vYBXA56dvvRlNWRczTdmCBBa+CotUzAPf5b7YMdMR/8CQoeYE5LX3W4wj6RYTgonm1b9DA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     hasBin: true
     peerDependencies:
@@ -9112,7 +8509,7 @@ packages:
       sugarss: ^5.0.0
       terser: ^5.16.0
       tsx: ^4.8.1
-      yaml: ^2.4.2
+      yaml: 2.8.3
     peerDependenciesMeta:
       '@types/node':
         optional: true
@@ -9188,9 +8585,6 @@ packages:
   web-namespaces@2.0.1:
     resolution: {integrity: sha512-bKr1DkiNa2krS7qxNtdrtHAmzuYGFQLiQ13TsorsdT6ULTkPLKuu5+GsFpDlg6JFjUTwX2DyhMPG2be8uPrqsQ==}
 
-  web-vitals@4.2.4:
-    resolution: {integrity: sha512-r4DIlprAGwJ7YM11VZp4R884m0Vmgr6EAKe3P+kO0PPj3Unqyvv59rczf6UiGcb9Z8QxZVcqKNwv/g0WNdWwsw==}
-
   webidl-conversions@3.0.1:
     resolution: {integrity: sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==}
 
@@ -9202,7 +8596,7 @@ packages:
     resolution: {integrity: sha512-A4ChP0Qj8oGociTs6UdlRUGANIGrCDL3y+pmQMc+dSsraXHCatFpmMey4mYELA+juqwUqwQsUgJJISXl1KWmiw==}
     engines: {node: '>= 14.15.0'}
     peerDependencies:
-      webpack: ^5.0.0
+      webpack: 5.104.1
     peerDependenciesMeta:
       webpack:
         optional: true
@@ -9214,14 +8608,11 @@ packages:
     resolution: {integrity: sha512-yd1RBzSGanHkitROoPFd6qsrxt+oFhg/129YzheDGqeustzX0vTZJZsSsQjVQC4yzBQ56K55XU8gaNCtIzOnTg==}
     engines: {node: '>=10.13.0'}
 
-  webpack-virtual-modules@0.5.0:
-    resolution: {integrity: sha512-kyDivFZ7ZM0BVOUteVbDFhlRt7Ah/CSPwJdi8hBpkK7QLumUqdLtVfm/PX/hkcnrvr0i77fO5+TjZ94Pe+C9iw==}
-
   webpack-virtual-modules@0.6.2:
     resolution: {integrity: sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==}
 
-  webpack@5.101.3:
-    resolution: {integrity: sha512-7b0dTKR3Ed//AD/6kkx/o7duS8H3f1a4w3BYpIriX4BzIhjkn4teo05cptsxvLesHFKK5KObnadmCHBwGc+51A==}
+  webpack@5.104.1:
+    resolution: {integrity: sha512-Qphch25abbMNtekmEGJmeRUhLDbe+QfiWTiqpKYkpCOWY64v9eyl+KRRLmqOFA2AvKPpc9DC6+u2n76tQLBoaA==}
     engines: {node: '>=10.13.0'}
     hasBin: true
     peerDependencies:
@@ -9233,6 +8624,7 @@ packages:
   whatwg-encoding@3.1.1:
     resolution: {integrity: sha512-6qN4hJdMwfYBtE3YBTTHhoeuUrDBPZmbQaxWAqSALV/MeEnR5z1xd8UKud2RAkFoPkmB+hli1TZSnyi84xz1vQ==}
     engines: {node: '>=18'}
+    deprecated: Use @exodus/bytes instead for a more spec-conformant and faster implementation
 
   whatwg-mimetype@4.0.0:
     resolution: {integrity: sha512-QaKxh0eNIi2mE9p2vEdzfagOKHCcj1pJ56EEHGQOVxp8r9/iszLUUV7v89x9O1p/T+NlTM5W7jW6+cz4Fq1YVg==}
@@ -9245,18 +8637,6 @@ packages:
   whatwg-url@5.0.0:
     resolution: {integrity: sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==}
 
-  which-boxed-primitive@1.1.1:
-    resolution: {integrity: sha512-TbX3mj8n0odCBFVlY8AxkqcHASw3L60jIuF8jFP78az3C2YhmGvqbHBpAjTRH2/xqYunrJ9g1jSyjCjpoWzIAA==}
-    engines: {node: '>= 0.4'}
-
-  which-builtin-type@1.2.1:
-    resolution: {integrity: sha512-6iBczoX+kDQ7a3+YJBnh3T+KZRxM/iYNPXicqk66/Qfm1b93iu+yOImkg0zHbj5LNOcNv1TEADiZ0xa34B4q6Q==}
-    engines: {node: '>= 0.4'}
-
-  which-collection@1.0.2:
-    resolution: {integrity: sha512-K4jVyjnBdgvc86Y6BkaLZEN933SwYOuBFkdmBu9ZfkcAbdVbpITnDmjvZ/aQjRXQrv5EPkTnD1s39GiiqbngCw==}
-    engines: {node: '>= 0.4'}
-
   which-typed-array@1.1.19:
     resolution: {integrity: sha512-rEvr90Bck4WZt9HHFC4DJMsjvu7x+r6bImz0/BrbWb7A2djJ8hnZMrWnHo9F8ssv0OMErasDhftrfROTyqSDrw==}
     engines: {node: '>= 0.4'}
@@ -9266,16 +8646,6 @@ packages:
     engines: {node: '>= 8'}
     hasBin: true
 
-  which@3.0.1:
-    resolution: {integrity: sha512-XA1b62dzQzLfaEOSQFTCOd5KFf/1VSzZo7/7TUjnya6u0vGGKzU96UQBZTAThCb2j4/xjBAyii1OhRLJEivHvg==}
-    engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
-    hasBin: true
-
-  which@4.0.0:
-    resolution: {integrity: sha512-GlaYyEb07DPxYCKhKzplCWBJtvxZcZMrL+4UkrTSJHHPyZU4mYYTv3qaOe77H7EODLSSopAUFAc6W8U4yqvscg==}
-    engines: {node: ^16.13.0 || >=18.0.0}
-    hasBin: true
-
   why-is-node-running@2.3.0:
     resolution: {integrity: sha512-hUrmaWBdVDcxvYqnyh09zunKzROWjbZTiNy8dBEjkS7ehEDQibXJ7XvlmtbwuTclUiIyN+CyXQD4Vmko8fNm8w==}
     engines: {node: '>=8'}
@@ -9293,10 +8663,6 @@ packages:
     resolution: {integrity: sha512-DLiFIXYC5fMPxaRg832S6F5mJYvePtmO5G9v9IgUFPhXm9/GkXarH/TUrBAVzhTCzAj9anE/+GjrgXp/54nOgw==}
     engines: {node: '>= 12.0.0'}
 
-  word-wrap@1.2.5:
-    resolution: {integrity: sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==}
-    engines: {node: '>=0.10.0'}
-
   wrap-ansi@7.0.0:
     resolution: {integrity: sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==}
     engines: {node: '>=10'}
@@ -9344,10 +8710,6 @@ packages:
   xmlchars@2.2.0:
     resolution: {integrity: sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==}
 
-  xtend@4.0.2:
-    resolution: {integrity: sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==}
-    engines: {node: '>=0.4'}
-
   y-indexeddb@9.0.12:
     resolution: {integrity: sha512-9oCFRSPPzBK7/w5vOkJBaVCQZKHXB/v6SIT+WYhnJxlEC61juqG0hBrAf+y3gmSMLFLwICNH9nQ53uscuse6Hg==}
     engines: {node: '>=16.0.0', npm: '>=8.0.0'}
@@ -9377,12 +8739,12 @@ packages:
   yallist@3.1.1:
     resolution: {integrity: sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==}
 
-  yaml@1.10.2:
-    resolution: {integrity: sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==}
+  yaml@1.10.3:
+    resolution: {integrity: sha512-vIYeF1u3CjlhAFekPPAk2h/Kv4T3mAkMox5OymRiJQB0spDP10LHvt+K7G9Ny6NuuMAb25/6n1qyUjAcGNf/AA==}
     engines: {node: '>= 6'}
 
-  yaml@2.8.1:
-    resolution: {integrity: sha512-lcYcMxX2PO9XMGvAJkJ3OsNMw+/7FKes7/hgerGUYWIoWu5j/+YQqcZr5JnPZWzOsEBgMbSbiSTn/dv/69Mkpw==}
+  yaml@2.8.3:
+    resolution: {integrity: sha512-AvbaCLOO2Otw/lW5bmh9d/WEdcDFdQp2Z2ZUH3pX9U2ihyUY0nvLv7J6TrWowklRGPYbB/IuIMfYgxaCPg5Bpg==}
     engines: {node: '>= 14.6'}
     hasBin: true
 
@@ -9409,16 +8771,13 @@ packages:
   yoga-layout@2.0.1:
     resolution: {integrity: sha512-tT/oChyDXelLo2A+UVnlW9GU7CsvFMaEnd9kVFsaiCQonFAXd3xrHhkLYu+suwwosrAEQ746xBU+HvYtm1Zs2Q==}
 
+  yoga-layout@3.2.1:
+    resolution: {integrity: sha512-0LPOt3AxKqMdFBZA3HBAt/t/8vIKq7VaQYbuA8WxCgung+p9TVyKRYdpvCb80HcdTN2NkbIKbhNwKUfm3tQywQ==}
+
   zeed-dom@0.15.1:
     resolution: {integrity: sha512-dtZ0aQSFyZmoJS0m06/xBN1SazUBPL5HpzlAcs/KcRW0rzadYw12deQBjeMhGKMMeGEp7bA9vmikMLaO4exBcg==}
     engines: {node: '>=14.13.1'}
 
-  zod-validation-error@4.0.2:
-    resolution: {integrity: sha512-Q6/nZLe6jxuU80qb/4uJ4t5v2VEZ44lzQjPDhYJNztRQ4wyWc6VF3D3Kb/fAuPetZQnhS3hnajCf9CsWesghLQ==}
-    engines: {node: '>=18.0.0'}
-    peerDependencies:
-      zod: ^3.25.0 || ^4.0.0
-
   zod@3.25.76:
     resolution: {integrity: sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==}
 
@@ -9431,21 +8790,6 @@ snapshots:
 
   '@alloc/quick-lru@5.2.0': {}
 
-  '@ampproject/remapping@2.3.0':
-    dependencies:
-      '@jridgewell/gen-mapping': 0.3.13
-      '@jridgewell/trace-mapping': 0.3.30
-
-  '@apm-js-collab/code-transformer@0.8.2': {}
-
-  '@apm-js-collab/tracing-hooks@0.3.1':
-    dependencies:
-      '@apm-js-collab/code-transformer': 0.8.2
-      debug: 4.4.3
-      module-details-from-path: 1.0.4
-    transitivePeerDependencies:
-      - supports-color
-
   '@asamuzakjp/css-color@3.2.0':
     dependencies:
       '@csstools/css-calc': 2.1.4(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)
@@ -9473,43 +8817,23 @@ snapshots:
 
   '@babel/code-frame@7.27.1':
     dependencies:
-      '@babel/helper-validator-identifier': 7.27.1
+      '@babel/helper-validator-identifier': 7.28.5
       js-tokens: 4.0.0
       picocolors: 1.1.1
 
   '@babel/compat-data@7.28.4': {}
 
-  '@babel/core@7.28.3':
-    dependencies:
-      '@ampproject/remapping': 2.3.0
-      '@babel/code-frame': 7.27.1
-      '@babel/generator': 7.28.3
-      '@babel/helper-compilation-targets': 7.27.2
-      '@babel/helper-module-transforms': 7.28.3(@babel/core@7.28.3)
-      '@babel/helpers': 7.26.10
-      '@babel/parser': 7.28.3
-      '@babel/template': 7.27.2
-      '@babel/traverse': 7.28.3
-      '@babel/types': 7.28.2
-      convert-source-map: 2.0.0
-      debug: 4.4.3
-      gensync: 1.0.0-beta.2
-      json5: 2.2.3
-      semver: 6.3.1
-    transitivePeerDependencies:
-      - supports-color
-
   '@babel/core@7.28.4':
     dependencies:
       '@babel/code-frame': 7.27.1
-      '@babel/generator': 7.28.3
+      '@babel/generator': 7.28.5
       '@babel/helper-compilation-targets': 7.27.2
       '@babel/helper-module-transforms': 7.28.3(@babel/core@7.28.4)
       '@babel/helpers': 7.26.10
-      '@babel/parser': 7.28.4
+      '@babel/parser': 7.28.5
       '@babel/template': 7.27.2
       '@babel/traverse': 7.28.4
-      '@babel/types': 7.28.4
+      '@babel/types': 7.28.5
       '@jridgewell/remapping': 2.3.5
       convert-source-map: 2.0.0
       debug: 4.4.3
@@ -9519,43 +8843,35 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/generator@7.28.3':
-    dependencies:
-      '@babel/parser': 7.28.3
-      '@babel/types': 7.28.2
-      '@jridgewell/gen-mapping': 0.3.13
-      '@jridgewell/trace-mapping': 0.3.30
-      jsesc: 3.1.0
-
   '@babel/generator@7.28.5':
     dependencies:
       '@babel/parser': 7.28.5
       '@babel/types': 7.28.5
       '@jridgewell/gen-mapping': 0.3.13
-      '@jridgewell/trace-mapping': 0.3.30
+      '@jridgewell/trace-mapping': 0.3.31
       jsesc: 3.1.0
 
   '@babel/helper-annotate-as-pure@7.27.3':
     dependencies:
-      '@babel/types': 7.28.4
+      '@babel/types': 7.28.5
 
   '@babel/helper-compilation-targets@7.27.2':
     dependencies:
       '@babel/compat-data': 7.28.4
       '@babel/helper-validator-option': 7.27.1
-      browserslist: 4.26.2
+      browserslist: 4.28.1
       lru-cache: 5.1.1
       semver: 6.3.1
 
-  '@babel/helper-create-class-features-plugin@7.28.3(@babel/core@7.28.3)':
+  '@babel/helper-create-class-features-plugin@7.28.3(@babel/core@7.28.4)':
     dependencies:
-      '@babel/core': 7.28.3
+      '@babel/core': 7.28.4
       '@babel/helper-annotate-as-pure': 7.27.3
       '@babel/helper-member-expression-to-functions': 7.27.1
       '@babel/helper-optimise-call-expression': 7.27.1
-      '@babel/helper-replace-supers': 7.27.1(@babel/core@7.28.3)
+      '@babel/helper-replace-supers': 7.27.1(@babel/core@7.28.4)
       '@babel/helper-skip-transparent-expression-wrappers': 7.27.1
-      '@babel/traverse': 7.28.3
+      '@babel/traverse': 7.28.4
       semver: 6.3.1
     transitivePeerDependencies:
       - supports-color
@@ -9564,24 +8880,15 @@ snapshots:
 
   '@babel/helper-member-expression-to-functions@7.27.1':
     dependencies:
-      '@babel/traverse': 7.28.3
-      '@babel/types': 7.28.4
+      '@babel/traverse': 7.28.4
+      '@babel/types': 7.28.5
     transitivePeerDependencies:
       - supports-color
 
   '@babel/helper-module-imports@7.27.1':
     dependencies:
       '@babel/traverse': 7.28.4
-      '@babel/types': 7.28.4
-    transitivePeerDependencies:
-      - supports-color
-
-  '@babel/helper-module-transforms@7.28.3(@babel/core@7.28.3)':
-    dependencies:
-      '@babel/core': 7.28.3
-      '@babel/helper-module-imports': 7.27.1
-      '@babel/helper-validator-identifier': 7.27.1
-      '@babel/traverse': 7.28.4
+      '@babel/types': 7.28.5
     transitivePeerDependencies:
       - supports-color
 
@@ -9589,37 +8896,35 @@ snapshots:
     dependencies:
       '@babel/core': 7.28.4
       '@babel/helper-module-imports': 7.27.1
-      '@babel/helper-validator-identifier': 7.27.1
+      '@babel/helper-validator-identifier': 7.28.5
       '@babel/traverse': 7.28.4
     transitivePeerDependencies:
       - supports-color
 
   '@babel/helper-optimise-call-expression@7.27.1':
     dependencies:
-      '@babel/types': 7.28.4
+      '@babel/types': 7.28.5
 
   '@babel/helper-plugin-utils@7.27.1': {}
 
-  '@babel/helper-replace-supers@7.27.1(@babel/core@7.28.3)':
+  '@babel/helper-replace-supers@7.27.1(@babel/core@7.28.4)':
     dependencies:
-      '@babel/core': 7.28.3
+      '@babel/core': 7.28.4
       '@babel/helper-member-expression-to-functions': 7.27.1
       '@babel/helper-optimise-call-expression': 7.27.1
-      '@babel/traverse': 7.28.3
+      '@babel/traverse': 7.28.4
     transitivePeerDependencies:
       - supports-color
 
   '@babel/helper-skip-transparent-expression-wrappers@7.27.1':
     dependencies:
-      '@babel/traverse': 7.28.3
-      '@babel/types': 7.28.4
+      '@babel/traverse': 7.28.4
+      '@babel/types': 7.28.5
     transitivePeerDependencies:
       - supports-color
 
   '@babel/helper-string-parser@7.27.1': {}
 
-  '@babel/helper-validator-identifier@7.27.1': {}
-
   '@babel/helper-validator-identifier@7.28.5': {}
 
   '@babel/helper-validator-option@7.27.1': {}
@@ -9627,110 +8932,102 @@ snapshots:
   '@babel/helpers@7.26.10':
     dependencies:
       '@babel/template': 7.27.2
-      '@babel/types': 7.28.4
-
-  '@babel/parser@7.28.3':
-    dependencies:
-      '@babel/types': 7.28.2
-
-  '@babel/parser@7.28.4':
-    dependencies:
-      '@babel/types': 7.28.4
+      '@babel/types': 7.28.5
 
   '@babel/parser@7.28.5':
     dependencies:
       '@babel/types': 7.28.5
 
-  '@babel/plugin-syntax-flow@7.27.1(@babel/core@7.28.3)':
+  '@babel/plugin-syntax-flow@7.27.1(@babel/core@7.28.4)':
     dependencies:
-      '@babel/core': 7.28.3
+      '@babel/core': 7.28.4
       '@babel/helper-plugin-utils': 7.27.1
 
-  '@babel/plugin-syntax-jsx@7.27.1(@babel/core@7.28.3)':
+  '@babel/plugin-syntax-jsx@7.27.1(@babel/core@7.28.4)':
     dependencies:
-      '@babel/core': 7.28.3
+      '@babel/core': 7.28.4
       '@babel/helper-plugin-utils': 7.27.1
 
-  '@babel/plugin-syntax-typescript@7.27.1(@babel/core@7.28.3)':
+  '@babel/plugin-syntax-typescript@7.27.1(@babel/core@7.28.4)':
     dependencies:
-      '@babel/core': 7.28.3
+      '@babel/core': 7.28.4
       '@babel/helper-plugin-utils': 7.27.1
 
-  '@babel/plugin-transform-class-properties@7.27.1(@babel/core@7.28.3)':
+  '@babel/plugin-transform-class-properties@7.27.1(@babel/core@7.28.4)':
     dependencies:
-      '@babel/core': 7.28.3
-      '@babel/helper-create-class-features-plugin': 7.28.3(@babel/core@7.28.3)
+      '@babel/core': 7.28.4
+      '@babel/helper-create-class-features-plugin': 7.28.3(@babel/core@7.28.4)
       '@babel/helper-plugin-utils': 7.27.1
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-flow-strip-types@7.27.1(@babel/core@7.28.3)':
+  '@babel/plugin-transform-flow-strip-types@7.27.1(@babel/core@7.28.4)':
     dependencies:
-      '@babel/core': 7.28.3
+      '@babel/core': 7.28.4
       '@babel/helper-plugin-utils': 7.27.1
-      '@babel/plugin-syntax-flow': 7.27.1(@babel/core@7.28.3)
+      '@babel/plugin-syntax-flow': 7.27.1(@babel/core@7.28.4)
 
-  '@babel/plugin-transform-modules-commonjs@7.27.1(@babel/core@7.28.3)':
+  '@babel/plugin-transform-modules-commonjs@7.27.1(@babel/core@7.28.4)':
     dependencies:
-      '@babel/core': 7.28.3
-      '@babel/helper-module-transforms': 7.28.3(@babel/core@7.28.3)
+      '@babel/core': 7.28.4
+      '@babel/helper-module-transforms': 7.28.3(@babel/core@7.28.4)
       '@babel/helper-plugin-utils': 7.27.1
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-nullish-coalescing-operator@7.27.1(@babel/core@7.28.3)':
+  '@babel/plugin-transform-nullish-coalescing-operator@7.27.1(@babel/core@7.28.4)':
     dependencies:
-      '@babel/core': 7.28.3
+      '@babel/core': 7.28.4
       '@babel/helper-plugin-utils': 7.27.1
 
-  '@babel/plugin-transform-optional-chaining@7.28.5(@babel/core@7.28.3)':
+  '@babel/plugin-transform-optional-chaining@7.28.5(@babel/core@7.28.4)':
     dependencies:
-      '@babel/core': 7.28.3
+      '@babel/core': 7.28.4
       '@babel/helper-plugin-utils': 7.27.1
       '@babel/helper-skip-transparent-expression-wrappers': 7.27.1
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-private-methods@7.27.1(@babel/core@7.28.3)':
+  '@babel/plugin-transform-private-methods@7.27.1(@babel/core@7.28.4)':
     dependencies:
-      '@babel/core': 7.28.3
-      '@babel/helper-create-class-features-plugin': 7.28.3(@babel/core@7.28.3)
+      '@babel/core': 7.28.4
+      '@babel/helper-create-class-features-plugin': 7.28.3(@babel/core@7.28.4)
       '@babel/helper-plugin-utils': 7.27.1
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-typescript@7.28.0(@babel/core@7.28.3)':
+  '@babel/plugin-transform-typescript@7.28.0(@babel/core@7.28.4)':
     dependencies:
-      '@babel/core': 7.28.3
+      '@babel/core': 7.28.4
       '@babel/helper-annotate-as-pure': 7.27.3
-      '@babel/helper-create-class-features-plugin': 7.28.3(@babel/core@7.28.3)
+      '@babel/helper-create-class-features-plugin': 7.28.3(@babel/core@7.28.4)
       '@babel/helper-plugin-utils': 7.27.1
       '@babel/helper-skip-transparent-expression-wrappers': 7.27.1
-      '@babel/plugin-syntax-typescript': 7.27.1(@babel/core@7.28.3)
+      '@babel/plugin-syntax-typescript': 7.27.1(@babel/core@7.28.4)
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/preset-flow@7.27.1(@babel/core@7.28.3)':
+  '@babel/preset-flow@7.27.1(@babel/core@7.28.4)':
     dependencies:
-      '@babel/core': 7.28.3
+      '@babel/core': 7.28.4
       '@babel/helper-plugin-utils': 7.27.1
       '@babel/helper-validator-option': 7.27.1
-      '@babel/plugin-transform-flow-strip-types': 7.27.1(@babel/core@7.28.3)
+      '@babel/plugin-transform-flow-strip-types': 7.27.1(@babel/core@7.28.4)
 
-  '@babel/preset-typescript@7.27.1(@babel/core@7.28.3)':
+  '@babel/preset-typescript@7.27.1(@babel/core@7.28.4)':
     dependencies:
-      '@babel/core': 7.28.3
+      '@babel/core': 7.28.4
       '@babel/helper-plugin-utils': 7.27.1
       '@babel/helper-validator-option': 7.27.1
-      '@babel/plugin-syntax-jsx': 7.27.1(@babel/core@7.28.3)
-      '@babel/plugin-transform-modules-commonjs': 7.27.1(@babel/core@7.28.3)
-      '@babel/plugin-transform-typescript': 7.28.0(@babel/core@7.28.3)
+      '@babel/plugin-syntax-jsx': 7.27.1(@babel/core@7.28.4)
+      '@babel/plugin-transform-modules-commonjs': 7.27.1(@babel/core@7.28.4)
+      '@babel/plugin-transform-typescript': 7.28.0(@babel/core@7.28.4)
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/register@7.28.3(@babel/core@7.28.3)':
+  '@babel/register@7.28.3(@babel/core@7.28.4)':
     dependencies:
-      '@babel/core': 7.28.3
+      '@babel/core': 7.28.4
       clone-deep: 4.0.1
       find-cache-dir: 2.1.0
       make-dir: 2.1.0
@@ -9744,43 +9041,21 @@ snapshots:
   '@babel/template@7.27.2':
     dependencies:
       '@babel/code-frame': 7.27.1
-      '@babel/parser': 7.28.4
-      '@babel/types': 7.28.4
-
-  '@babel/traverse@7.28.3':
-    dependencies:
-      '@babel/code-frame': 7.27.1
-      '@babel/generator': 7.28.3
-      '@babel/helper-globals': 7.28.0
-      '@babel/parser': 7.28.3
-      '@babel/template': 7.27.2
-      '@babel/types': 7.28.2
-      debug: 4.4.3
-    transitivePeerDependencies:
-      - supports-color
+      '@babel/parser': 7.28.5
+      '@babel/types': 7.28.5
 
   '@babel/traverse@7.28.4':
     dependencies:
       '@babel/code-frame': 7.27.1
-      '@babel/generator': 7.28.3
+      '@babel/generator': 7.28.5
       '@babel/helper-globals': 7.28.0
-      '@babel/parser': 7.28.4
+      '@babel/parser': 7.28.5
       '@babel/template': 7.27.2
-      '@babel/types': 7.28.4
+      '@babel/types': 7.28.5
       debug: 4.4.3
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/types@7.28.2':
-    dependencies:
-      '@babel/helper-string-parser': 7.27.1
-      '@babel/helper-validator-identifier': 7.27.1
-
-  '@babel/types@7.28.4':
-    dependencies:
-      '@babel/helper-string-parser': 7.27.1
-      '@babel/helper-validator-identifier': 7.27.1
-
   '@babel/types@7.28.5':
     dependencies:
       '@babel/helper-string-parser': 7.27.1
@@ -9811,6 +9086,8 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.3.11
 
+  '@bcoe/v8-coverage@1.0.2': {}
+
   '@blueprintjs/colors@4.2.1':
     dependencies:
       tslib: 2.5.3
@@ -9904,27 +9181,78 @@ snapshots:
 
   '@date-fns/tz@1.4.1': {}
 
-  '@dotenvx/dotenvx@1.51.1':
+  '@effect/cluster@0.56.1(@effect/platform@0.94.1(effect@3.20.0))(@effect/rpc@0.73.0(@effect/platform@0.94.1(effect@3.20.0))(effect@3.20.0))(@effect/sql@0.49.0(@effect/experimental@0.58.0(@effect/platform@0.94.1(effect@3.20.0))(effect@3.20.0)(ioredis@5.7.0))(@effect/platform@0.94.1(effect@3.20.0))(effect@3.20.0))(@effect/workflow@0.16.0(@effect/experimental@0.58.0(@effect/platform@0.94.1(effect@3.20.0))(effect@3.20.0)(ioredis@5.7.0))(@effect/platform@0.94.1(effect@3.20.0))(@effect/rpc@0.73.0(@effect/platform@0.94.1(effect@3.20.0))(effect@3.20.0))(effect@3.20.0))(effect@3.20.0)':
     dependencies:
-      commander: 11.1.0
-      dotenv: 17.2.1
-      eciesjs: 0.4.15
-      execa: 5.1.1
-      fdir: 6.5.0(picomatch@4.0.3)
-      ignore: 5.3.2
-      object-treeify: 1.1.33
-      picomatch: 4.0.3
-      which: 4.0.0
+      '@effect/platform': 0.94.1(effect@3.20.0)
+      '@effect/rpc': 0.73.0(@effect/platform@0.94.1(effect@3.20.0))(effect@3.20.0)
+      '@effect/sql': 0.49.0(@effect/experimental@0.58.0(@effect/platform@0.94.1(effect@3.20.0))(effect@3.20.0)(ioredis@5.7.0))(@effect/platform@0.94.1(effect@3.20.0))(effect@3.20.0)
+      '@effect/workflow': 0.16.0(@effect/experimental@0.58.0(@effect/platform@0.94.1(effect@3.20.0))(effect@3.20.0)(ioredis@5.7.0))(@effect/platform@0.94.1(effect@3.20.0))(@effect/rpc@0.73.0(@effect/platform@0.94.1(effect@3.20.0))(effect@3.20.0))(effect@3.20.0)
+      effect: 3.20.0
+      kubernetes-types: 1.30.0
 
-  '@ecies/ciphers@0.2.4(@noble/ciphers@1.3.0)':
+  '@effect/experimental@0.58.0(@effect/platform@0.94.1(effect@3.20.0))(effect@3.20.0)(ioredis@5.7.0)':
     dependencies:
-      '@noble/ciphers': 1.3.0
+      '@effect/platform': 0.94.1(effect@3.20.0)
+      effect: 3.20.0
+      uuid: 11.1.0
+    optionalDependencies:
+      ioredis: 5.7.0
 
-  '@emnapi/core@1.5.0':
+  '@effect/platform-node-shared@0.57.0(@effect/cluster@0.56.1(@effect/platform@0.94.1(effect@3.20.0))(@effect/rpc@0.73.0(@effect/platform@0.94.1(effect@3.20.0))(effect@3.20.0))(@effect/sql@0.49.0(@effect/experimental@0.58.0(@effect/platform@0.94.1(effect@3.20.0))(effect@3.20.0)(ioredis@5.7.0))(@effect/platform@0.94.1(effect@3.20.0))(effect@3.20.0))(@effect/workflow@0.16.0(@effect/experimental@0.58.0(@effect/platform@0.94.1(effect@3.20.0))(effect@3.20.0)(ioredis@5.7.0))(@effect/platform@0.94.1(effect@3.20.0))(@effect/rpc@0.73.0(@effect/platform@0.94.1(effect@3.20.0))(effect@3.20.0))(effect@3.20.0))(effect@3.20.0))(@effect/platform@0.94.1(effect@3.20.0))(@effect/rpc@0.73.0(@effect/platform@0.94.1(effect@3.20.0))(effect@3.20.0))(@effect/sql@0.49.0(@effect/experimental@0.58.0(@effect/platform@0.94.1(effect@3.20.0))(effect@3.20.0)(ioredis@5.7.0))(@effect/platform@0.94.1(effect@3.20.0))(effect@3.20.0))(effect@3.20.0)':
     dependencies:
-      '@emnapi/wasi-threads': 1.1.0
-      tslib: 2.8.1
-    optional: true
+      '@effect/cluster': 0.56.1(@effect/platform@0.94.1(effect@3.20.0))(@effect/rpc@0.73.0(@effect/platform@0.94.1(effect@3.20.0))(effect@3.20.0))(@effect/sql@0.49.0(@effect/experimental@0.58.0(@effect/platform@0.94.1(effect@3.20.0))(effect@3.20.0)(ioredis@5.7.0))(@effect/platform@0.94.1(effect@3.20.0))(effect@3.20.0))(@effect/workflow@0.16.0(@effect/experimental@0.58.0(@effect/platform@0.94.1(effect@3.20.0))(effect@3.20.0)(ioredis@5.7.0))(@effect/platform@0.94.1(effect@3.20.0))(@effect/rpc@0.73.0(@effect/platform@0.94.1(effect@3.20.0))(effect@3.20.0))(effect@3.20.0))(effect@3.20.0)
+      '@effect/platform': 0.94.1(effect@3.20.0)
+      '@effect/rpc': 0.73.0(@effect/platform@0.94.1(effect@3.20.0))(effect@3.20.0)
+      '@effect/sql': 0.49.0(@effect/experimental@0.58.0(@effect/platform@0.94.1(effect@3.20.0))(effect@3.20.0)(ioredis@5.7.0))(@effect/platform@0.94.1(effect@3.20.0))(effect@3.20.0)
+      '@parcel/watcher': 2.5.4
+      effect: 3.20.0
+      multipasta: 0.2.7
+      ws: 8.18.3
+    transitivePeerDependencies:
+      - bufferutil
+      - utf-8-validate
+
+  '@effect/platform-node@0.104.0(@effect/cluster@0.56.1(@effect/platform@0.94.1(effect@3.20.0))(@effect/rpc@0.73.0(@effect/platform@0.94.1(effect@3.20.0))(effect@3.20.0))(@effect/sql@0.49.0(@effect/experimental@0.58.0(@effect/platform@0.94.1(effect@3.20.0))(effect@3.20.0)(ioredis@5.7.0))(@effect/platform@0.94.1(effect@3.20.0))(effect@3.20.0))(@effect/workflow@0.16.0(@effect/experimental@0.58.0(@effect/platform@0.94.1(effect@3.20.0))(effect@3.20.0)(ioredis@5.7.0))(@effect/platform@0.94.1(effect@3.20.0))(@effect/rpc@0.73.0(@effect/platform@0.94.1(effect@3.20.0))(effect@3.20.0))(effect@3.20.0))(effect@3.20.0))(@effect/platform@0.94.1(effect@3.20.0))(@effect/rpc@0.73.0(@effect/platform@0.94.1(effect@3.20.0))(effect@3.20.0))(@effect/sql@0.49.0(@effect/experimental@0.58.0(@effect/platform@0.94.1(effect@3.20.0))(effect@3.20.0)(ioredis@5.7.0))(@effect/platform@0.94.1(effect@3.20.0))(effect@3.20.0))(effect@3.20.0)':
+    dependencies:
+      '@effect/cluster': 0.56.1(@effect/platform@0.94.1(effect@3.20.0))(@effect/rpc@0.73.0(@effect/platform@0.94.1(effect@3.20.0))(effect@3.20.0))(@effect/sql@0.49.0(@effect/experimental@0.58.0(@effect/platform@0.94.1(effect@3.20.0))(effect@3.20.0)(ioredis@5.7.0))(@effect/platform@0.94.1(effect@3.20.0))(effect@3.20.0))(@effect/workflow@0.16.0(@effect/experimental@0.58.0(@effect/platform@0.94.1(effect@3.20.0))(effect@3.20.0)(ioredis@5.7.0))(@effect/platform@0.94.1(effect@3.20.0))(@effect/rpc@0.73.0(@effect/platform@0.94.1(effect@3.20.0))(effect@3.20.0))(effect@3.20.0))(effect@3.20.0)
+      '@effect/platform': 0.94.1(effect@3.20.0)
+      '@effect/platform-node-shared': 0.57.0(@effect/cluster@0.56.1(@effect/platform@0.94.1(effect@3.20.0))(@effect/rpc@0.73.0(@effect/platform@0.94.1(effect@3.20.0))(effect@3.20.0))(@effect/sql@0.49.0(@effect/experimental@0.58.0(@effect/platform@0.94.1(effect@3.20.0))(effect@3.20.0)(ioredis@5.7.0))(@effect/platform@0.94.1(effect@3.20.0))(effect@3.20.0))(@effect/workflow@0.16.0(@effect/experimental@0.58.0(@effect/platform@0.94.1(effect@3.20.0))(effect@3.20.0)(ioredis@5.7.0))(@effect/platform@0.94.1(effect@3.20.0))(@effect/rpc@0.73.0(@effect/platform@0.94.1(effect@3.20.0))(effect@3.20.0))(effect@3.20.0))(effect@3.20.0))(@effect/platform@0.94.1(effect@3.20.0))(@effect/rpc@0.73.0(@effect/platform@0.94.1(effect@3.20.0))(effect@3.20.0))(@effect/sql@0.49.0(@effect/experimental@0.58.0(@effect/platform@0.94.1(effect@3.20.0))(effect@3.20.0)(ioredis@5.7.0))(@effect/platform@0.94.1(effect@3.20.0))(effect@3.20.0))(effect@3.20.0)
+      '@effect/rpc': 0.73.0(@effect/platform@0.94.1(effect@3.20.0))(effect@3.20.0)
+      '@effect/sql': 0.49.0(@effect/experimental@0.58.0(@effect/platform@0.94.1(effect@3.20.0))(effect@3.20.0)(ioredis@5.7.0))(@effect/platform@0.94.1(effect@3.20.0))(effect@3.20.0)
+      effect: 3.20.0
+      mime: 3.0.0
+      undici: 7.24.0
+      ws: 8.18.3
+    transitivePeerDependencies:
+      - bufferutil
+      - utf-8-validate
+
+  '@effect/platform@0.94.1(effect@3.20.0)':
+    dependencies:
+      effect: 3.20.0
+      find-my-way-ts: 0.1.6
+      msgpackr: 1.11.8
+      multipasta: 0.2.7
+
+  '@effect/rpc@0.73.0(@effect/platform@0.94.1(effect@3.20.0))(effect@3.20.0)':
+    dependencies:
+      '@effect/platform': 0.94.1(effect@3.20.0)
+      effect: 3.20.0
+      msgpackr: 1.11.8
+
+  '@effect/sql@0.49.0(@effect/experimental@0.58.0(@effect/platform@0.94.1(effect@3.20.0))(effect@3.20.0)(ioredis@5.7.0))(@effect/platform@0.94.1(effect@3.20.0))(effect@3.20.0)':
+    dependencies:
+      '@effect/experimental': 0.58.0(@effect/platform@0.94.1(effect@3.20.0))(effect@3.20.0)(ioredis@5.7.0)
+      '@effect/platform': 0.94.1(effect@3.20.0)
+      effect: 3.20.0
+      uuid: 11.1.0
+
+  '@effect/workflow@0.16.0(@effect/experimental@0.58.0(@effect/platform@0.94.1(effect@3.20.0))(effect@3.20.0)(ioredis@5.7.0))(@effect/platform@0.94.1(effect@3.20.0))(@effect/rpc@0.73.0(@effect/platform@0.94.1(effect@3.20.0))(effect@3.20.0))(effect@3.20.0)':
+    dependencies:
+      '@effect/experimental': 0.58.0(@effect/platform@0.94.1(effect@3.20.0))(effect@3.20.0)(ioredis@5.7.0)
+      '@effect/platform': 0.94.1(effect@3.20.0)
+      '@effect/rpc': 0.73.0(@effect/platform@0.94.1(effect@3.20.0))(effect@3.20.0)
+      effect: 3.20.0
 
   '@emnapi/core@1.7.1':
     dependencies:
@@ -9932,11 +9260,6 @@ snapshots:
       tslib: 2.8.1
     optional: true
 
-  '@emnapi/runtime@1.5.0':
-    dependencies:
-      tslib: 2.8.1
-    optional: true
-
   '@emnapi/runtime@1.7.1':
     dependencies:
       tslib: 2.8.1
@@ -10030,52 +9353,6 @@ snapshots:
   '@esbuild/win32-x64@0.25.0':
     optional: true
 
-  '@eslint-community/eslint-utils@4.9.0(eslint@9.39.1(jiti@2.5.1))':
-    dependencies:
-      eslint: 9.39.1(jiti@2.5.1)
-      eslint-visitor-keys: 3.4.3
-
-  '@eslint-community/regexpp@4.12.1': {}
-
-  '@eslint/config-array@0.21.1':
-    dependencies:
-      '@eslint/object-schema': 2.1.7
-      debug: 4.4.3
-      minimatch: 3.1.2
-    transitivePeerDependencies:
-      - supports-color
-
-  '@eslint/config-helpers@0.4.2':
-    dependencies:
-      '@eslint/core': 0.17.0
-
-  '@eslint/core@0.17.0':
-    dependencies:
-      '@types/json-schema': 7.0.15
-
-  '@eslint/eslintrc@3.3.1':
-    dependencies:
-      ajv: 6.12.6
-      debug: 4.4.3
-      espree: 10.4.0
-      globals: 14.0.0
-      ignore: 5.3.2
-      import-fresh: 3.3.1
-      js-yaml: 4.1.1
-      minimatch: 3.1.2
-      strip-json-comments: 3.1.1
-    transitivePeerDependencies:
-      - supports-color
-
-  '@eslint/js@9.39.1': {}
-
-  '@eslint/object-schema@2.1.7': {}
-
-  '@eslint/plugin-kit@0.4.1':
-    dependencies:
-      '@eslint/core': 0.17.0
-      levn: 0.4.1
-
   '@figspec/components@1.0.3':
     dependencies:
       lit: 2.8.0
@@ -10111,6 +9388,14 @@ snapshots:
 
   '@floating-ui/utils@0.2.10': {}
 
+  '@fontsource-variable/inter@5.2.8': {}
+
+  '@fontsource/ibm-plex-mono@5.2.7': {}
+
+  '@fontsource/inter@5.2.8': {}
+
+  '@fontsource/material-symbols-rounded@5.2.30': {}
+
   '@formatjs/ecma402-abstract@2.3.4':
     dependencies:
       '@formatjs/fast-memoize': 2.2.7
@@ -10215,17 +9500,6 @@ snapshots:
       y-prosemirror: 1.3.7(prosemirror-model@1.25.3)(prosemirror-state@1.4.3)(prosemirror-view@1.40.0)(y-protocols@1.0.6(yjs@13.6.27))(yjs@13.6.27)
       yjs: 13.6.27
 
-  '@humanfs/core@0.19.1': {}
-
-  '@humanfs/node@0.16.7':
-    dependencies:
-      '@humanfs/core': 0.19.1
-      '@humanwhocodes/retry': 0.4.3
-
-  '@humanwhocodes/module-importer@1.0.1': {}
-
-  '@humanwhocodes/retry@0.4.3': {}
-
   '@hypermod/utils@0.7.1':
     dependencies:
       jscodeshift: 17.3.0
@@ -10244,31 +9518,109 @@ snapshots:
     dependencies:
       react: 18.3.1
 
-  '@intercom/messenger-js-sdk@0.0.12': {}
+  '@img/sharp-darwin-arm64@0.34.3':
+    optionalDependencies:
+      '@img/sharp-libvips-darwin-arm64': 1.2.0
+    optional: true
+
+  '@img/sharp-darwin-x64@0.34.3':
+    optionalDependencies:
+      '@img/sharp-libvips-darwin-x64': 1.2.0
+    optional: true
+
+  '@img/sharp-libvips-darwin-arm64@1.2.0':
+    optional: true
+
+  '@img/sharp-libvips-darwin-x64@1.2.0':
+    optional: true
+
+  '@img/sharp-libvips-linux-arm64@1.2.0':
+    optional: true
+
+  '@img/sharp-libvips-linux-arm@1.2.0':
+    optional: true
+
+  '@img/sharp-libvips-linux-ppc64@1.2.0':
+    optional: true
+
+  '@img/sharp-libvips-linux-s390x@1.2.0':
+    optional: true
+
+  '@img/sharp-libvips-linux-x64@1.2.0':
+    optional: true
+
+  '@img/sharp-libvips-linuxmusl-arm64@1.2.0':
+    optional: true
+
+  '@img/sharp-libvips-linuxmusl-x64@1.2.0':
+    optional: true
+
+  '@img/sharp-linux-arm64@0.34.3':
+    optionalDependencies:
+      '@img/sharp-libvips-linux-arm64': 1.2.0
+    optional: true
+
+  '@img/sharp-linux-arm@0.34.3':
+    optionalDependencies:
+      '@img/sharp-libvips-linux-arm': 1.2.0
+    optional: true
+
+  '@img/sharp-linux-ppc64@0.34.3':
+    optionalDependencies:
+      '@img/sharp-libvips-linux-ppc64': 1.2.0
+    optional: true
+
+  '@img/sharp-linux-s390x@0.34.3':
+    optionalDependencies:
+      '@img/sharp-libvips-linux-s390x': 1.2.0
+    optional: true
+
+  '@img/sharp-linux-x64@0.34.3':
+    optionalDependencies:
+      '@img/sharp-libvips-linux-x64': 1.2.0
+    optional: true
+
+  '@img/sharp-linuxmusl-arm64@0.34.3':
+    optionalDependencies:
+      '@img/sharp-libvips-linuxmusl-arm64': 1.2.0
+    optional: true
+
+  '@img/sharp-linuxmusl-x64@0.34.3':
+    optionalDependencies:
+      '@img/sharp-libvips-linuxmusl-x64': 1.2.0
+    optional: true
+
+  '@img/sharp-wasm32@0.34.3':
+    dependencies:
+      '@emnapi/runtime': 1.7.1
+    optional: true
+
+  '@img/sharp-win32-arm64@0.34.3':
+    optional: true
+
+  '@img/sharp-win32-ia32@0.34.3':
+    optional: true
+
+  '@img/sharp-win32-x64@0.34.3':
+    optional: true
 
   '@ioredis/commands@1.3.0': {}
 
-  '@isaacs/balanced-match@4.0.1': {}
-
-  '@isaacs/brace-expansion@5.0.0':
-    dependencies:
-      '@isaacs/balanced-match': 4.0.1
-
   '@isaacs/cliui@8.0.2':
     dependencies:
       string-width: 5.1.2
       string-width-cjs: string-width@4.2.3
-      strip-ansi: 7.1.0
+      strip-ansi: 7.1.2
       strip-ansi-cjs: strip-ansi@6.0.1
       wrap-ansi: 8.1.0
       wrap-ansi-cjs: wrap-ansi@7.0.0
 
-  '@joshwooding/vite-plugin-react-docgen-typescript@0.6.1(typescript@5.8.3)(vite@7.1.11(@types/node@22.12.0)(jiti@2.5.1)(terser@5.43.1)(yaml@2.8.1))':
+  '@joshwooding/vite-plugin-react-docgen-typescript@0.6.1(typescript@5.8.3)(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3))':
     dependencies:
       glob: 11.1.0
-      magic-string: 0.30.19
+      magic-string: 0.30.21
       react-docgen-typescript: 2.4.0(typescript@5.8.3)
-      vite: 7.1.11(@types/node@22.12.0)(jiti@2.5.1)(terser@5.43.1)(yaml@2.8.1)
+      vite: 7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3)
     optionalDependencies:
       typescript: 5.8.3
 
@@ -10287,15 +9639,10 @@ snapshots:
   '@jridgewell/source-map@0.3.11':
     dependencies:
       '@jridgewell/gen-mapping': 0.3.13
-      '@jridgewell/trace-mapping': 0.3.30
+      '@jridgewell/trace-mapping': 0.3.31
 
   '@jridgewell/sourcemap-codec@1.5.5': {}
 
-  '@jridgewell/trace-mapping@0.3.30':
-    dependencies:
-      '@jridgewell/resolve-uri': 3.1.2
-      '@jridgewell/sourcemap-codec': 1.5.5
-
   '@jridgewell/trace-mapping@0.3.31':
     dependencies:
       '@jridgewell/resolve-uri': 3.1.2
@@ -10321,374 +9668,261 @@ snapshots:
 
   '@mjackson/node-fetch-server@0.2.0': {}
 
-  '@napi-rs/wasm-runtime@0.2.12':
-    dependencies:
-      '@emnapi/core': 1.5.0
-      '@emnapi/runtime': 1.5.0
-      '@tybys/wasm-util': 0.10.1
+  '@msgpackr-extract/msgpackr-extract-darwin-arm64@3.0.3':
     optional: true
 
-  '@napi-rs/wasm-runtime@1.1.0':
+  '@msgpackr-extract/msgpackr-extract-darwin-x64@3.0.3':
+    optional: true
+
+  '@msgpackr-extract/msgpackr-extract-linux-arm64@3.0.3':
+    optional: true
+
+  '@msgpackr-extract/msgpackr-extract-linux-arm@3.0.3':
+    optional: true
+
+  '@msgpackr-extract/msgpackr-extract-linux-x64@3.0.3':
+    optional: true
+
+  '@msgpackr-extract/msgpackr-extract-win32-x64@3.0.3':
+    optional: true
+
+  '@napi-rs/canvas-android-arm64@0.1.80':
+    optional: true
+
+  '@napi-rs/canvas-darwin-arm64@0.1.80':
+    optional: true
+
+  '@napi-rs/canvas-darwin-x64@0.1.80':
+    optional: true
+
+  '@napi-rs/canvas-linux-arm-gnueabihf@0.1.80':
+    optional: true
+
+  '@napi-rs/canvas-linux-arm64-gnu@0.1.80':
+    optional: true
+
+  '@napi-rs/canvas-linux-arm64-musl@0.1.80':
+    optional: true
+
+  '@napi-rs/canvas-linux-riscv64-gnu@0.1.80':
+    optional: true
+
+  '@napi-rs/canvas-linux-x64-gnu@0.1.80':
+    optional: true
+
+  '@napi-rs/canvas-linux-x64-musl@0.1.80':
+    optional: true
+
+  '@napi-rs/canvas-win32-x64-msvc@0.1.80':
+    optional: true
+
+  '@napi-rs/canvas@0.1.80':
+    optionalDependencies:
+      '@napi-rs/canvas-android-arm64': 0.1.80
+      '@napi-rs/canvas-darwin-arm64': 0.1.80
+      '@napi-rs/canvas-darwin-x64': 0.1.80
+      '@napi-rs/canvas-linux-arm-gnueabihf': 0.1.80
+      '@napi-rs/canvas-linux-arm64-gnu': 0.1.80
+      '@napi-rs/canvas-linux-arm64-musl': 0.1.80
+      '@napi-rs/canvas-linux-riscv64-gnu': 0.1.80
+      '@napi-rs/canvas-linux-x64-gnu': 0.1.80
+      '@napi-rs/canvas-linux-x64-musl': 0.1.80
+      '@napi-rs/canvas-win32-x64-msvc': 0.1.80
+
+  '@napi-rs/wasm-runtime@1.1.1':
     dependencies:
       '@emnapi/core': 1.7.1
       '@emnapi/runtime': 1.7.1
       '@tybys/wasm-util': 0.10.1
     optional: true
 
-  '@noble/ciphers@1.3.0': {}
-
-  '@noble/curves@1.9.7':
-    dependencies:
-      '@noble/hashes': 1.8.0
-
-  '@noble/hashes@1.8.0': {}
-
-  '@nodelib/fs.scandir@2.1.5':
-    dependencies:
-      '@nodelib/fs.stat': 2.0.5
-      run-parallel: 1.2.0
-
-  '@nodelib/fs.stat@2.0.5': {}
-
-  '@nodelib/fs.walk@1.2.8':
-    dependencies:
-      '@nodelib/fs.scandir': 2.1.5
-      fastq: 1.19.1
-
-  '@npmcli/git@4.1.0':
-    dependencies:
-      '@npmcli/promise-spawn': 6.0.2
-      lru-cache: 7.18.3
-      npm-pick-manifest: 8.0.2
-      proc-log: 3.0.0
-      promise-inflight: 1.0.1
-      promise-retry: 2.0.1
-      semver: 7.7.3
-      which: 3.0.1
-    transitivePeerDependencies:
-      - bluebird
-
-  '@npmcli/package-json@4.0.1':
-    dependencies:
-      '@npmcli/git': 4.1.0
-      glob: 11.1.0
-      hosted-git-info: 6.1.3
-      json-parse-even-better-errors: 3.0.2
-      normalize-package-data: 5.0.0
-      proc-log: 3.0.0
-      semver: 7.7.2
-    transitivePeerDependencies:
-      - bluebird
-
-  '@npmcli/promise-spawn@6.0.2':
-    dependencies:
-      which: 3.0.1
-
-  '@opentelemetry/api-logs@0.208.0':
-    dependencies:
-      '@opentelemetry/api': 1.9.0
-
-  '@opentelemetry/api@1.9.0': {}
-
-  '@opentelemetry/context-async-hooks@2.2.0(@opentelemetry/api@1.9.0)':
-    dependencies:
-      '@opentelemetry/api': 1.9.0
-
-  '@opentelemetry/core@2.2.0(@opentelemetry/api@1.9.0)':
-    dependencies:
-      '@opentelemetry/api': 1.9.0
-      '@opentelemetry/semantic-conventions': 1.37.0
-
-  '@opentelemetry/instrumentation-amqplib@0.55.0(@opentelemetry/api@1.9.0)':
-    dependencies:
-      '@opentelemetry/api': 1.9.0
-      '@opentelemetry/core': 2.2.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation': 0.208.0(@opentelemetry/api@1.9.0)
-    transitivePeerDependencies:
-      - supports-color
-
-  '@opentelemetry/instrumentation-connect@0.52.0(@opentelemetry/api@1.9.0)':
-    dependencies:
-      '@opentelemetry/api': 1.9.0
-      '@opentelemetry/core': 2.2.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation': 0.208.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/semantic-conventions': 1.37.0
-      '@types/connect': 3.4.38
-    transitivePeerDependencies:
-      - supports-color
-
-  '@opentelemetry/instrumentation-dataloader@0.26.0(@opentelemetry/api@1.9.0)':
-    dependencies:
-      '@opentelemetry/api': 1.9.0
-      '@opentelemetry/instrumentation': 0.208.0(@opentelemetry/api@1.9.0)
-    transitivePeerDependencies:
-      - supports-color
-
-  '@opentelemetry/instrumentation-express@0.57.0(@opentelemetry/api@1.9.0)':
-    dependencies:
-      '@opentelemetry/api': 1.9.0
-      '@opentelemetry/core': 2.2.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation': 0.208.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/semantic-conventions': 1.37.0
-    transitivePeerDependencies:
-      - supports-color
-
-  '@opentelemetry/instrumentation-fs@0.28.0(@opentelemetry/api@1.9.0)':
-    dependencies:
-      '@opentelemetry/api': 1.9.0
-      '@opentelemetry/core': 2.2.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation': 0.208.0(@opentelemetry/api@1.9.0)
-    transitivePeerDependencies:
-      - supports-color
-
-  '@opentelemetry/instrumentation-generic-pool@0.52.0(@opentelemetry/api@1.9.0)':
-    dependencies:
-      '@opentelemetry/api': 1.9.0
-      '@opentelemetry/instrumentation': 0.208.0(@opentelemetry/api@1.9.0)
-    transitivePeerDependencies:
-      - supports-color
-
-  '@opentelemetry/instrumentation-graphql@0.56.0(@opentelemetry/api@1.9.0)':
-    dependencies:
-      '@opentelemetry/api': 1.9.0
-      '@opentelemetry/instrumentation': 0.208.0(@opentelemetry/api@1.9.0)
-    transitivePeerDependencies:
-      - supports-color
-
-  '@opentelemetry/instrumentation-hapi@0.55.0(@opentelemetry/api@1.9.0)':
-    dependencies:
-      '@opentelemetry/api': 1.9.0
-      '@opentelemetry/core': 2.2.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation': 0.208.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/semantic-conventions': 1.37.0
-    transitivePeerDependencies:
-      - supports-color
-
-  '@opentelemetry/instrumentation-http@0.208.0(@opentelemetry/api@1.9.0)':
-    dependencies:
-      '@opentelemetry/api': 1.9.0
-      '@opentelemetry/core': 2.2.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation': 0.208.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/semantic-conventions': 1.37.0
-      forwarded-parse: 2.1.2
-    transitivePeerDependencies:
-      - supports-color
-
-  '@opentelemetry/instrumentation-ioredis@0.56.0(@opentelemetry/api@1.9.0)':
-    dependencies:
-      '@opentelemetry/api': 1.9.0
-      '@opentelemetry/instrumentation': 0.208.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/redis-common': 0.38.2
-    transitivePeerDependencies:
-      - supports-color
-
-  '@opentelemetry/instrumentation-kafkajs@0.18.0(@opentelemetry/api@1.9.0)':
-    dependencies:
-      '@opentelemetry/api': 1.9.0
-      '@opentelemetry/instrumentation': 0.208.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/semantic-conventions': 1.37.0
-    transitivePeerDependencies:
-      - supports-color
-
-  '@opentelemetry/instrumentation-knex@0.53.0(@opentelemetry/api@1.9.0)':
-    dependencies:
-      '@opentelemetry/api': 1.9.0
-      '@opentelemetry/instrumentation': 0.208.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/semantic-conventions': 1.37.0
-    transitivePeerDependencies:
-      - supports-color
-
-  '@opentelemetry/instrumentation-koa@0.57.0(@opentelemetry/api@1.9.0)':
-    dependencies:
-      '@opentelemetry/api': 1.9.0
-      '@opentelemetry/core': 2.2.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation': 0.208.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/semantic-conventions': 1.37.0
-    transitivePeerDependencies:
-      - supports-color
-
-  '@opentelemetry/instrumentation-lru-memoizer@0.53.0(@opentelemetry/api@1.9.0)':
-    dependencies:
-      '@opentelemetry/api': 1.9.0
-      '@opentelemetry/instrumentation': 0.208.0(@opentelemetry/api@1.9.0)
-    transitivePeerDependencies:
-      - supports-color
-
-  '@opentelemetry/instrumentation-mongodb@0.61.0(@opentelemetry/api@1.9.0)':
-    dependencies:
-      '@opentelemetry/api': 1.9.0
-      '@opentelemetry/instrumentation': 0.208.0(@opentelemetry/api@1.9.0)
-    transitivePeerDependencies:
-      - supports-color
-
-  '@opentelemetry/instrumentation-mongoose@0.55.0(@opentelemetry/api@1.9.0)':
-    dependencies:
-      '@opentelemetry/api': 1.9.0
-      '@opentelemetry/core': 2.2.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation': 0.208.0(@opentelemetry/api@1.9.0)
-    transitivePeerDependencies:
-      - supports-color
-
-  '@opentelemetry/instrumentation-mysql2@0.55.0(@opentelemetry/api@1.9.0)':
-    dependencies:
-      '@opentelemetry/api': 1.9.0
-      '@opentelemetry/instrumentation': 0.208.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/semantic-conventions': 1.37.0
-      '@opentelemetry/sql-common': 0.41.2(@opentelemetry/api@1.9.0)
-    transitivePeerDependencies:
-      - supports-color
-
-  '@opentelemetry/instrumentation-mysql@0.54.0(@opentelemetry/api@1.9.0)':
-    dependencies:
-      '@opentelemetry/api': 1.9.0
-      '@opentelemetry/instrumentation': 0.208.0(@opentelemetry/api@1.9.0)
-      '@types/mysql': 2.15.27
-    transitivePeerDependencies:
-      - supports-color
-
-  '@opentelemetry/instrumentation-pg@0.61.0(@opentelemetry/api@1.9.0)':
-    dependencies:
-      '@opentelemetry/api': 1.9.0
-      '@opentelemetry/core': 2.2.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation': 0.208.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/semantic-conventions': 1.37.0
-      '@opentelemetry/sql-common': 0.41.2(@opentelemetry/api@1.9.0)
-      '@types/pg': 8.15.6
-      '@types/pg-pool': 2.0.6
-    transitivePeerDependencies:
-      - supports-color
-
-  '@opentelemetry/instrumentation-redis@0.57.0(@opentelemetry/api@1.9.0)':
-    dependencies:
-      '@opentelemetry/api': 1.9.0
-      '@opentelemetry/instrumentation': 0.208.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/redis-common': 0.38.2
-      '@opentelemetry/semantic-conventions': 1.37.0
-    transitivePeerDependencies:
-      - supports-color
-
-  '@opentelemetry/instrumentation-tedious@0.27.0(@opentelemetry/api@1.9.0)':
-    dependencies:
-      '@opentelemetry/api': 1.9.0
-      '@opentelemetry/instrumentation': 0.208.0(@opentelemetry/api@1.9.0)
-      '@types/tedious': 4.0.14
-    transitivePeerDependencies:
-      - supports-color
-
-  '@opentelemetry/instrumentation-undici@0.19.0(@opentelemetry/api@1.9.0)':
-    dependencies:
-      '@opentelemetry/api': 1.9.0
-      '@opentelemetry/core': 2.2.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation': 0.208.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/semantic-conventions': 1.37.0
-    transitivePeerDependencies:
-      - supports-color
-
-  '@opentelemetry/instrumentation@0.208.0(@opentelemetry/api@1.9.0)':
-    dependencies:
-      '@opentelemetry/api': 1.9.0
-      '@opentelemetry/api-logs': 0.208.0
-      import-in-the-middle: 2.0.0
-      require-in-the-middle: 8.0.1
-    transitivePeerDependencies:
-      - supports-color
-
-  '@opentelemetry/redis-common@0.38.2': {}
-
-  '@opentelemetry/resources@2.2.0(@opentelemetry/api@1.9.0)':
-    dependencies:
-      '@opentelemetry/api': 1.9.0
-      '@opentelemetry/core': 2.2.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/semantic-conventions': 1.37.0
-
-  '@opentelemetry/sdk-trace-base@2.2.0(@opentelemetry/api@1.9.0)':
-    dependencies:
-      '@opentelemetry/api': 1.9.0
-      '@opentelemetry/core': 2.2.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/resources': 2.2.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/semantic-conventions': 1.37.0
-
-  '@opentelemetry/semantic-conventions@1.37.0': {}
-
-  '@opentelemetry/sql-common@0.41.2(@opentelemetry/api@1.9.0)':
-    dependencies:
-      '@opentelemetry/api': 1.9.0
-      '@opentelemetry/core': 2.2.0(@opentelemetry/api@1.9.0)
-
-  '@oxc-parser/binding-android-arm64@0.99.0':
+  '@opentelemetry/api@1.9.0':
     optional: true
 
-  '@oxc-parser/binding-darwin-arm64@0.99.0':
-    optional: true
-
-  '@oxc-parser/binding-darwin-x64@0.99.0':
-    optional: true
-
-  '@oxc-parser/binding-freebsd-x64@0.99.0':
-    optional: true
-
-  '@oxc-parser/binding-linux-arm-gnueabihf@0.99.0':
-    optional: true
-
-  '@oxc-parser/binding-linux-arm-musleabihf@0.99.0':
-    optional: true
-
-  '@oxc-parser/binding-linux-arm64-gnu@0.99.0':
-    optional: true
-
-  '@oxc-parser/binding-linux-arm64-musl@0.99.0':
-    optional: true
-
-  '@oxc-parser/binding-linux-riscv64-gnu@0.99.0':
-    optional: true
-
-  '@oxc-parser/binding-linux-s390x-gnu@0.99.0':
-    optional: true
-
-  '@oxc-parser/binding-linux-x64-gnu@0.99.0':
-    optional: true
-
-  '@oxc-parser/binding-linux-x64-musl@0.99.0':
-    optional: true
-
-  '@oxc-parser/binding-wasm32-wasi@0.99.0':
-    dependencies:
-      '@napi-rs/wasm-runtime': 1.1.0
-    optional: true
-
-  '@oxc-parser/binding-win32-arm64-msvc@0.99.0':
-    optional: true
-
-  '@oxc-parser/binding-win32-x64-msvc@0.99.0':
+  '@oxc-project/types@0.122.0':
     optional: true
 
   '@oxc-project/types@0.96.0': {}
 
-  '@oxc-project/types@0.99.0': {}
+  '@oxfmt/binding-android-arm-eabi@0.35.0':
+    optional: true
+
+  '@oxfmt/binding-android-arm64@0.35.0':
+    optional: true
+
+  '@oxfmt/binding-darwin-arm64@0.35.0':
+    optional: true
+
+  '@oxfmt/binding-darwin-x64@0.35.0':
+    optional: true
+
+  '@oxfmt/binding-freebsd-x64@0.35.0':
+    optional: true
+
+  '@oxfmt/binding-linux-arm-gnueabihf@0.35.0':
+    optional: true
+
+  '@oxfmt/binding-linux-arm-musleabihf@0.35.0':
+    optional: true
+
+  '@oxfmt/binding-linux-arm64-gnu@0.35.0':
+    optional: true
+
+  '@oxfmt/binding-linux-arm64-musl@0.35.0':
+    optional: true
+
+  '@oxfmt/binding-linux-ppc64-gnu@0.35.0':
+    optional: true
+
+  '@oxfmt/binding-linux-riscv64-gnu@0.35.0':
+    optional: true
+
+  '@oxfmt/binding-linux-riscv64-musl@0.35.0':
+    optional: true
+
+  '@oxfmt/binding-linux-s390x-gnu@0.35.0':
+    optional: true
+
+  '@oxfmt/binding-linux-x64-gnu@0.35.0':
+    optional: true
+
+  '@oxfmt/binding-linux-x64-musl@0.35.0':
+    optional: true
+
+  '@oxfmt/binding-openharmony-arm64@0.35.0':
+    optional: true
+
+  '@oxfmt/binding-win32-arm64-msvc@0.35.0':
+    optional: true
+
+  '@oxfmt/binding-win32-ia32-msvc@0.35.0':
+    optional: true
+
+  '@oxfmt/binding-win32-x64-msvc@0.35.0':
+    optional: true
+
+  '@oxlint/binding-android-arm-eabi@1.51.0':
+    optional: true
+
+  '@oxlint/binding-android-arm64@1.51.0':
+    optional: true
+
+  '@oxlint/binding-darwin-arm64@1.51.0':
+    optional: true
+
+  '@oxlint/binding-darwin-x64@1.51.0':
+    optional: true
+
+  '@oxlint/binding-freebsd-x64@1.51.0':
+    optional: true
+
+  '@oxlint/binding-linux-arm-gnueabihf@1.51.0':
+    optional: true
+
+  '@oxlint/binding-linux-arm-musleabihf@1.51.0':
+    optional: true
+
+  '@oxlint/binding-linux-arm64-gnu@1.51.0':
+    optional: true
+
+  '@oxlint/binding-linux-arm64-musl@1.51.0':
+    optional: true
+
+  '@oxlint/binding-linux-ppc64-gnu@1.51.0':
+    optional: true
+
+  '@oxlint/binding-linux-riscv64-gnu@1.51.0':
+    optional: true
+
+  '@oxlint/binding-linux-riscv64-musl@1.51.0':
+    optional: true
+
+  '@oxlint/binding-linux-s390x-gnu@1.51.0':
+    optional: true
+
+  '@oxlint/binding-linux-x64-gnu@1.51.0':
+    optional: true
+
+  '@oxlint/binding-linux-x64-musl@1.51.0':
+    optional: true
+
+  '@oxlint/binding-openharmony-arm64@1.51.0':
+    optional: true
+
+  '@oxlint/binding-win32-arm64-msvc@1.51.0':
+    optional: true
+
+  '@oxlint/binding-win32-ia32-msvc@1.51.0':
+    optional: true
+
+  '@oxlint/binding-win32-x64-msvc@1.51.0':
+    optional: true
+
+  '@parcel/watcher-android-arm64@2.5.4':
+    optional: true
+
+  '@parcel/watcher-darwin-arm64@2.5.4':
+    optional: true
+
+  '@parcel/watcher-darwin-x64@2.5.4':
+    optional: true
+
+  '@parcel/watcher-freebsd-x64@2.5.4':
+    optional: true
+
+  '@parcel/watcher-linux-arm-glibc@2.5.4':
+    optional: true
+
+  '@parcel/watcher-linux-arm-musl@2.5.4':
+    optional: true
+
+  '@parcel/watcher-linux-arm64-glibc@2.5.4':
+    optional: true
+
+  '@parcel/watcher-linux-arm64-musl@2.5.4':
+    optional: true
+
+  '@parcel/watcher-linux-x64-glibc@2.5.4':
+    optional: true
+
+  '@parcel/watcher-linux-x64-musl@2.5.4':
+    optional: true
+
+  '@parcel/watcher-win32-arm64@2.5.4':
+    optional: true
+
+  '@parcel/watcher-win32-ia32@2.5.4':
+    optional: true
+
+  '@parcel/watcher-win32-x64@2.5.4':
+    optional: true
+
+  '@parcel/watcher@2.5.4':
+    dependencies:
+      detect-libc: 2.0.4
+      is-glob: 4.0.3
+      node-addon-api: 7.1.1
+      picomatch: 2.3.2
+    optionalDependencies:
+      '@parcel/watcher-android-arm64': 2.5.4
+      '@parcel/watcher-darwin-arm64': 2.5.4
+      '@parcel/watcher-darwin-x64': 2.5.4
+      '@parcel/watcher-freebsd-x64': 2.5.4
+      '@parcel/watcher-linux-arm-glibc': 2.5.4
+      '@parcel/watcher-linux-arm-musl': 2.5.4
+      '@parcel/watcher-linux-arm64-glibc': 2.5.4
+      '@parcel/watcher-linux-arm64-musl': 2.5.4
+      '@parcel/watcher-linux-x64-glibc': 2.5.4
+      '@parcel/watcher-linux-x64-musl': 2.5.4
+      '@parcel/watcher-win32-arm64': 2.5.4
+      '@parcel/watcher-win32-ia32': 2.5.4
+      '@parcel/watcher-win32-x64': 2.5.4
 
   '@popperjs/core@2.11.8': {}
 
-  '@posthog/react@1.4.0(@types/react@18.3.11)(posthog-js@1.255.1)(react@18.3.1)':
+  '@quansync/fs@1.0.0':
     dependencies:
-      posthog-js: 1.255.1
-      react: 18.3.1
-    optionalDependencies:
-      '@types/react': 18.3.11
-
-  '@prettier/plugin-oxc@0.1.3':
-    dependencies:
-      oxc-parser: 0.99.0
-
-  '@prisma/instrumentation@6.19.0(@opentelemetry/api@1.9.0)':
-    dependencies:
-      '@opentelemetry/api': 1.9.0
-      '@opentelemetry/instrumentation': 0.208.0(@opentelemetry/api@1.9.0)
-    transitivePeerDependencies:
-      - supports-color
-
-  '@quansync/fs@0.1.5':
-    dependencies:
-      quansync: 0.2.11
+      quansync: 1.0.0
 
   '@radix-ui/number@1.1.1': {}
 
@@ -10867,17 +10101,17 @@ snapshots:
   '@react-pdf/font@2.5.2':
     dependencies:
       '@babel/runtime': 7.26.10
-      '@react-pdf/types': 2.9.0
+      '@react-pdf/types': 2.9.2
       cross-fetch: 3.2.0
       fontkit: 2.0.4
       is-url: 1.2.4
     transitivePeerDependencies:
       - encoding
 
-  '@react-pdf/font@4.0.2':
+  '@react-pdf/font@4.0.4':
     dependencies:
-      '@react-pdf/pdfkit': 4.0.3
-      '@react-pdf/types': 2.9.0
+      '@react-pdf/pdfkit': 4.1.0
+      '@react-pdf/types': 2.9.2
       fontkit: 2.0.4
       is-url: 1.2.4
 
@@ -10890,6 +10124,11 @@ snapshots:
     transitivePeerDependencies:
       - encoding
 
+  '@react-pdf/image@3.0.3':
+    dependencies:
+      '@react-pdf/png-js': 3.0.0
+      jay-peg: 1.1.1
+
   '@react-pdf/layout@3.13.0':
     dependencies:
       '@babel/runtime': 7.26.10
@@ -10899,7 +10138,7 @@ snapshots:
       '@react-pdf/primitives': 3.1.1
       '@react-pdf/stylesheet': 4.3.0
       '@react-pdf/textkit': 4.4.1
-      '@react-pdf/types': 2.9.0
+      '@react-pdf/types': 2.9.2
       cross-fetch: 3.2.0
       emoji-regex: 10.5.0
       queue: 6.0.2
@@ -10907,6 +10146,18 @@ snapshots:
     transitivePeerDependencies:
       - encoding
 
+  '@react-pdf/layout@4.4.0':
+    dependencies:
+      '@react-pdf/fns': 3.1.2
+      '@react-pdf/image': 3.0.3
+      '@react-pdf/primitives': 4.1.1
+      '@react-pdf/stylesheet': 6.1.2
+      '@react-pdf/textkit': 6.0.0
+      '@react-pdf/types': 2.9.2
+      emoji-regex: 10.5.0
+      queue: 6.0.2
+      yoga-layout: 3.2.1
+
   '@react-pdf/pdfkit@3.2.0':
     dependencies:
       '@babel/runtime': 7.26.10
@@ -10917,7 +10168,7 @@ snapshots:
       jay-peg: 1.1.1
       vite-compatible-readable-stream: 3.6.1
 
-  '@react-pdf/pdfkit@4.0.3':
+  '@react-pdf/pdfkit@4.1.0':
     dependencies:
       '@babel/runtime': 7.26.10
       '@react-pdf/png-js': 3.0.0
@@ -10940,13 +10191,32 @@ snapshots:
 
   '@react-pdf/primitives@4.1.1': {}
 
+  '@react-pdf/reconciler@1.1.4(react@18.3.1)':
+    dependencies:
+      object-assign: 4.1.1
+      react: 18.3.1
+      scheduler: 0.25.0-rc-603e6108-20241029
+
   '@react-pdf/render@3.5.0':
     dependencies:
       '@babel/runtime': 7.26.10
       '@react-pdf/fns': 2.2.1
       '@react-pdf/primitives': 3.1.1
       '@react-pdf/textkit': 4.4.1
-      '@react-pdf/types': 2.9.0
+      '@react-pdf/types': 2.9.2
+      abs-svg-path: 0.1.1
+      color-string: 1.9.1
+      normalize-svg-path: 1.1.0
+      parse-svg-path: 0.1.2
+      svg-arc-to-cubic-bezier: 3.2.0
+
+  '@react-pdf/render@4.3.0':
+    dependencies:
+      '@babel/runtime': 7.26.10
+      '@react-pdf/fns': 3.1.2
+      '@react-pdf/primitives': 4.1.1
+      '@react-pdf/textkit': 6.0.0
+      '@react-pdf/types': 2.9.2
       abs-svg-path: 0.1.1
       color-string: 1.9.1
       normalize-svg-path: 1.1.0
@@ -10961,7 +10231,7 @@ snapshots:
       '@react-pdf/pdfkit': 3.2.0
       '@react-pdf/primitives': 3.1.1
       '@react-pdf/render': 3.5.0
-      '@react-pdf/types': 2.9.0
+      '@react-pdf/types': 2.9.2
       events: 3.3.0
       object-assign: 4.1.1
       prop-types: 15.8.1
@@ -10971,20 +10241,37 @@ snapshots:
     transitivePeerDependencies:
       - encoding
 
+  '@react-pdf/renderer@4.3.0(react@18.3.1)':
+    dependencies:
+      '@babel/runtime': 7.26.10
+      '@react-pdf/fns': 3.1.2
+      '@react-pdf/font': 4.0.4
+      '@react-pdf/layout': 4.4.0
+      '@react-pdf/pdfkit': 4.1.0
+      '@react-pdf/primitives': 4.1.1
+      '@react-pdf/reconciler': 1.1.4(react@18.3.1)
+      '@react-pdf/render': 4.3.0
+      '@react-pdf/types': 2.9.2
+      events: 3.3.0
+      object-assign: 4.1.1
+      prop-types: 15.8.1
+      queue: 6.0.2
+      react: 18.3.1
+
   '@react-pdf/stylesheet@4.3.0':
     dependencies:
       '@babel/runtime': 7.26.10
       '@react-pdf/fns': 2.2.1
-      '@react-pdf/types': 2.9.0
+      '@react-pdf/types': 2.9.2
       color-string: 1.9.1
       hsl-to-hex: 1.0.0
       media-engine: 1.0.3
       postcss-value-parser: 4.2.0
 
-  '@react-pdf/stylesheet@6.1.0':
+  '@react-pdf/stylesheet@6.1.2':
     dependencies:
       '@react-pdf/fns': 3.1.2
-      '@react-pdf/types': 2.9.0
+      '@react-pdf/types': 2.9.2
       color-string: 1.9.1
       hsl-to-hex: 1.0.0
       media-engine: 1.0.3
@@ -10998,24 +10285,30 @@ snapshots:
       hyphen: 1.10.6
       unicode-properties: 1.4.1
 
-  '@react-pdf/types@2.9.0':
+  '@react-pdf/textkit@6.0.0':
     dependencies:
-      '@react-pdf/font': 4.0.2
-      '@react-pdf/primitives': 4.1.1
-      '@react-pdf/stylesheet': 6.1.0
+      '@react-pdf/fns': 3.1.2
+      bidi-js: 1.0.3
+      hyphen: 1.10.6
+      unicode-properties: 1.4.1
 
-  '@react-router/dev@7.9.5(@react-router/serve@7.9.5(react-router@7.9.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(typescript@5.8.3))(@types/node@22.12.0)(babel-plugin-macros@3.1.0)(jiti@2.5.1)(react-router@7.9.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(terser@5.43.1)(typescript@5.8.3)(vite@7.1.11(@types/node@22.12.0)(jiti@2.5.1)(terser@5.43.1)(yaml@2.8.1))(yaml@2.8.1)':
+  '@react-pdf/types@2.9.2':
     dependencies:
-      '@babel/core': 7.28.3
-      '@babel/generator': 7.28.3
-      '@babel/parser': 7.28.3
-      '@babel/plugin-syntax-jsx': 7.27.1(@babel/core@7.28.3)
-      '@babel/preset-typescript': 7.27.1(@babel/core@7.28.3)
-      '@babel/traverse': 7.28.3
-      '@babel/types': 7.28.2
-      '@npmcli/package-json': 4.0.1
-      '@react-router/node': 7.9.5(react-router@7.9.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(typescript@5.8.3)
-      '@remix-run/node-fetch-server': 0.9.0
+      '@react-pdf/font': 4.0.4
+      '@react-pdf/primitives': 4.1.1
+      '@react-pdf/stylesheet': 6.1.2
+
+  '@react-router/dev@7.13.1(@react-router/serve@7.13.1(react-router@7.12.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(typescript@5.8.3))(@types/node@22.12.0)(babel-plugin-macros@3.1.0)(jiti@2.6.1)(lightningcss@1.30.2)(react-router@7.12.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(terser@5.43.1)(typescript@5.8.3)(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3))(yaml@2.8.3)':
+    dependencies:
+      '@babel/core': 7.28.4
+      '@babel/generator': 7.28.5
+      '@babel/parser': 7.28.5
+      '@babel/plugin-syntax-jsx': 7.27.1(@babel/core@7.28.4)
+      '@babel/preset-typescript': 7.27.1(@babel/core@7.28.4)
+      '@babel/traverse': 7.28.4
+      '@babel/types': 7.28.5
+      '@react-router/node': 7.13.1(react-router@7.12.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(typescript@5.8.3)
+      '@remix-run/node-fetch-server': 0.13.0
       arg: 5.0.2
       babel-dead-code-elimination: 1.0.10
       chokidar: 3.6.0
@@ -11024,25 +10317,25 @@ snapshots:
       exit-hook: 2.2.1
       isbot: 5.1.31
       jsesc: 3.0.2
-      lodash: 4.17.21
+      lodash: 4.17.23
       p-map: 7.0.3
       pathe: 1.1.2
       picocolors: 1.1.1
+      pkg-types: 2.3.0
       prettier: 3.7.4
       react-refresh: 0.14.2
-      react-router: 7.9.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      semver: 7.7.2
+      react-router: 7.12.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      semver: 7.7.4
       tinyglobby: 0.2.15
       valibot: 1.2.0(typescript@5.8.3)
-      vite: 7.1.11(@types/node@22.12.0)(jiti@2.5.1)(terser@5.43.1)(yaml@2.8.1)
-      vite-node: 3.2.4(@types/node@22.12.0)(jiti@2.5.1)(terser@5.43.1)(yaml@2.8.1)
+      vite: 7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3)
+      vite-node: 3.2.4(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3)
     optionalDependencies:
-      '@react-router/serve': 7.9.5(react-router@7.9.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(typescript@5.8.3)
+      '@react-router/serve': 7.13.1(react-router@7.12.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(typescript@5.8.3)
       typescript: 5.8.3
     transitivePeerDependencies:
       - '@types/node'
       - babel-plugin-macros
-      - bluebird
       - jiti
       - less
       - lightningcss
@@ -11055,31 +10348,31 @@ snapshots:
       - tsx
       - yaml
 
-  '@react-router/express@7.9.5(express@4.22.0)(react-router@7.9.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(typescript@5.8.3)':
+  '@react-router/express@7.13.1(express@4.22.0)(react-router@7.12.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(typescript@5.8.3)':
     dependencies:
-      '@react-router/node': 7.9.5(react-router@7.9.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(typescript@5.8.3)
+      '@react-router/node': 7.13.1(react-router@7.12.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(typescript@5.8.3)
       express: 4.22.0
-      react-router: 7.9.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react-router: 7.12.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
     optionalDependencies:
       typescript: 5.8.3
 
-  '@react-router/node@7.9.5(react-router@7.9.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(typescript@5.8.3)':
+  '@react-router/node@7.13.1(react-router@7.12.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(typescript@5.8.3)':
     dependencies:
       '@mjackson/node-fetch-server': 0.2.0
-      react-router: 7.9.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react-router: 7.12.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
     optionalDependencies:
       typescript: 5.8.3
 
-  '@react-router/serve@7.9.5(react-router@7.9.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(typescript@5.8.3)':
+  '@react-router/serve@7.13.1(react-router@7.12.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(typescript@5.8.3)':
     dependencies:
       '@mjackson/node-fetch-server': 0.2.0
-      '@react-router/express': 7.9.5(express@4.22.0)(react-router@7.9.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(typescript@5.8.3)
-      '@react-router/node': 7.9.5(react-router@7.9.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(typescript@5.8.3)
+      '@react-router/express': 7.13.1(express@4.22.0)(react-router@7.12.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(typescript@5.8.3)
+      '@react-router/node': 7.13.1(react-router@7.12.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(typescript@5.8.3)
       compression: 1.8.1
       express: 4.22.0
       get-port: 5.1.1
       morgan: 1.10.1
-      react-router: 7.9.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react-router: 7.12.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       source-map-support: 0.5.21
     transitivePeerDependencies:
       - supports-color
@@ -11087,510 +10380,366 @@ snapshots:
 
   '@remirror/core-constants@3.0.0': {}
 
-  '@remix-run/node-fetch-server@0.9.0': {}
+  '@remix-run/node-fetch-server@0.13.0': {}
 
   '@rolldown/binding-android-arm64@1.0.0-beta.46':
     optional: true
 
+  '@rolldown/binding-android-arm64@1.0.0-rc.12':
+    optional: true
+
   '@rolldown/binding-darwin-arm64@1.0.0-beta.46':
     optional: true
 
+  '@rolldown/binding-darwin-arm64@1.0.0-rc.12':
+    optional: true
+
   '@rolldown/binding-darwin-x64@1.0.0-beta.46':
     optional: true
 
+  '@rolldown/binding-darwin-x64@1.0.0-rc.12':
+    optional: true
+
   '@rolldown/binding-freebsd-x64@1.0.0-beta.46':
     optional: true
 
+  '@rolldown/binding-freebsd-x64@1.0.0-rc.12':
+    optional: true
+
   '@rolldown/binding-linux-arm-gnueabihf@1.0.0-beta.46':
     optional: true
 
+  '@rolldown/binding-linux-arm-gnueabihf@1.0.0-rc.12':
+    optional: true
+
   '@rolldown/binding-linux-arm64-gnu@1.0.0-beta.46':
     optional: true
 
+  '@rolldown/binding-linux-arm64-gnu@1.0.0-rc.12':
+    optional: true
+
   '@rolldown/binding-linux-arm64-musl@1.0.0-beta.46':
     optional: true
 
+  '@rolldown/binding-linux-arm64-musl@1.0.0-rc.12':
+    optional: true
+
+  '@rolldown/binding-linux-ppc64-gnu@1.0.0-rc.12':
+    optional: true
+
+  '@rolldown/binding-linux-s390x-gnu@1.0.0-rc.12':
+    optional: true
+
   '@rolldown/binding-linux-x64-gnu@1.0.0-beta.46':
     optional: true
 
+  '@rolldown/binding-linux-x64-gnu@1.0.0-rc.12':
+    optional: true
+
   '@rolldown/binding-linux-x64-musl@1.0.0-beta.46':
     optional: true
 
+  '@rolldown/binding-linux-x64-musl@1.0.0-rc.12':
+    optional: true
+
   '@rolldown/binding-openharmony-arm64@1.0.0-beta.46':
     optional: true
 
+  '@rolldown/binding-openharmony-arm64@1.0.0-rc.12':
+    optional: true
+
   '@rolldown/binding-wasm32-wasi@1.0.0-beta.46':
     dependencies:
-      '@napi-rs/wasm-runtime': 1.1.0
+      '@napi-rs/wasm-runtime': 1.1.1
+    optional: true
+
+  '@rolldown/binding-wasm32-wasi@1.0.0-rc.12':
+    dependencies:
+      '@napi-rs/wasm-runtime': 1.1.1
     optional: true
 
   '@rolldown/binding-win32-arm64-msvc@1.0.0-beta.46':
     optional: true
 
+  '@rolldown/binding-win32-arm64-msvc@1.0.0-rc.12':
+    optional: true
+
   '@rolldown/binding-win32-ia32-msvc@1.0.0-beta.46':
     optional: true
 
   '@rolldown/binding-win32-x64-msvc@1.0.0-beta.46':
     optional: true
 
+  '@rolldown/binding-win32-x64-msvc@1.0.0-rc.12':
+    optional: true
+
   '@rolldown/pluginutils@1.0.0-beta.46': {}
 
-  '@rollup/pluginutils@5.2.0(rollup@4.52.4)':
+  '@rolldown/pluginutils@1.0.0-rc.12':
+    optional: true
+
+  '@rollup/pluginutils@5.2.0(rollup@4.59.0)':
     dependencies:
       '@types/estree': 1.0.8
       estree-walker: 2.0.2
-      picomatch: 4.0.3
+      picomatch: 2.3.2
     optionalDependencies:
-      rollup: 4.52.4
+      rollup: 4.59.0
 
-  '@rollup/rollup-android-arm-eabi@4.52.4':
+  '@rollup/rollup-android-arm-eabi@4.59.0':
     optional: true
 
-  '@rollup/rollup-android-arm64@4.52.4':
+  '@rollup/rollup-android-arm64@4.59.0':
     optional: true
 
-  '@rollup/rollup-darwin-arm64@4.52.4':
+  '@rollup/rollup-darwin-arm64@4.59.0':
     optional: true
 
-  '@rollup/rollup-darwin-x64@4.52.4':
+  '@rollup/rollup-darwin-x64@4.59.0':
     optional: true
 
-  '@rollup/rollup-freebsd-arm64@4.52.4':
+  '@rollup/rollup-freebsd-arm64@4.59.0':
     optional: true
 
-  '@rollup/rollup-freebsd-x64@4.52.4':
+  '@rollup/rollup-freebsd-x64@4.59.0':
     optional: true
 
-  '@rollup/rollup-linux-arm-gnueabihf@4.52.4':
+  '@rollup/rollup-linux-arm-gnueabihf@4.59.0':
     optional: true
 
-  '@rollup/rollup-linux-arm-musleabihf@4.52.4':
+  '@rollup/rollup-linux-arm-musleabihf@4.59.0':
     optional: true
 
-  '@rollup/rollup-linux-arm64-gnu@4.52.4':
+  '@rollup/rollup-linux-arm64-gnu@4.59.0':
     optional: true
 
-  '@rollup/rollup-linux-arm64-musl@4.52.4':
+  '@rollup/rollup-linux-arm64-musl@4.59.0':
     optional: true
 
-  '@rollup/rollup-linux-loong64-gnu@4.52.4':
+  '@rollup/rollup-linux-loong64-gnu@4.59.0':
     optional: true
 
-  '@rollup/rollup-linux-ppc64-gnu@4.52.4':
+  '@rollup/rollup-linux-loong64-musl@4.59.0':
     optional: true
 
-  '@rollup/rollup-linux-riscv64-gnu@4.52.4':
+  '@rollup/rollup-linux-ppc64-gnu@4.59.0':
     optional: true
 
-  '@rollup/rollup-linux-riscv64-musl@4.52.4':
+  '@rollup/rollup-linux-ppc64-musl@4.59.0':
     optional: true
 
-  '@rollup/rollup-linux-s390x-gnu@4.52.4':
+  '@rollup/rollup-linux-riscv64-gnu@4.59.0':
     optional: true
 
-  '@rollup/rollup-linux-x64-gnu@4.52.4':
+  '@rollup/rollup-linux-riscv64-musl@4.59.0':
     optional: true
 
-  '@rollup/rollup-linux-x64-musl@4.52.4':
+  '@rollup/rollup-linux-s390x-gnu@4.59.0':
     optional: true
 
-  '@rollup/rollup-openharmony-arm64@4.52.4':
+  '@rollup/rollup-linux-x64-gnu@4.59.0':
     optional: true
 
-  '@rollup/rollup-win32-arm64-msvc@4.52.4':
+  '@rollup/rollup-linux-x64-musl@4.59.0':
     optional: true
 
-  '@rollup/rollup-win32-ia32-msvc@4.52.4':
+  '@rollup/rollup-openbsd-x64@4.59.0':
     optional: true
 
-  '@rollup/rollup-win32-x64-gnu@4.52.4':
+  '@rollup/rollup-openharmony-arm64@4.59.0':
     optional: true
 
-  '@rollup/rollup-win32-x64-msvc@4.52.4':
+  '@rollup/rollup-win32-arm64-msvc@4.59.0':
     optional: true
 
-  '@rtsao/scc@1.1.0': {}
-
-  '@sentry-internal/browser-utils@10.27.0':
-    dependencies:
-      '@sentry/core': 10.27.0
-
-  '@sentry-internal/feedback@10.27.0':
-    dependencies:
-      '@sentry/core': 10.27.0
-
-  '@sentry-internal/node-cpu-profiler@2.2.0':
-    dependencies:
-      detect-libc: 2.0.4
-      node-abi: 3.75.0
-
-  '@sentry-internal/replay-canvas@10.27.0':
-    dependencies:
-      '@sentry-internal/replay': 10.27.0
-      '@sentry/core': 10.27.0
-
-  '@sentry-internal/replay@10.27.0':
-    dependencies:
-      '@sentry-internal/browser-utils': 10.27.0
-      '@sentry/core': 10.27.0
-
-  '@sentry/babel-plugin-component-annotate@4.6.0': {}
-
-  '@sentry/browser@10.27.0':
-    dependencies:
-      '@sentry-internal/browser-utils': 10.27.0
-      '@sentry-internal/feedback': 10.27.0
-      '@sentry-internal/replay': 10.27.0
-      '@sentry-internal/replay-canvas': 10.27.0
-      '@sentry/core': 10.27.0
-
-  '@sentry/bundler-plugin-core@4.6.0':
-    dependencies:
-      '@babel/core': 7.28.3
-      '@sentry/babel-plugin-component-annotate': 4.6.0
-      '@sentry/cli': 2.58.2
-      dotenv: 16.6.1
-      find-up: 5.0.0
-      glob: 11.1.0
-      magic-string: 0.30.8
-      unplugin: 1.0.1
-    transitivePeerDependencies:
-      - encoding
-      - supports-color
-
-  '@sentry/cli-darwin@2.58.2':
+  '@rollup/rollup-win32-ia32-msvc@4.59.0':
     optional: true
 
-  '@sentry/cli-linux-arm64@2.58.2':
+  '@rollup/rollup-win32-x64-gnu@4.59.0':
     optional: true
 
-  '@sentry/cli-linux-arm@2.58.2':
+  '@rollup/rollup-win32-x64-msvc@4.59.0':
     optional: true
 
-  '@sentry/cli-linux-i686@2.58.2':
-    optional: true
-
-  '@sentry/cli-linux-x64@2.58.2':
-    optional: true
-
-  '@sentry/cli-win32-arm64@2.58.2':
-    optional: true
-
-  '@sentry/cli-win32-i686@2.58.2':
-    optional: true
-
-  '@sentry/cli-win32-x64@2.58.2':
-    optional: true
-
-  '@sentry/cli@2.58.2':
-    dependencies:
-      https-proxy-agent: 5.0.1
-      node-fetch: 2.7.0
-      progress: 2.0.3
-      proxy-from-env: 1.1.0
-      which: 2.0.2
-    optionalDependencies:
-      '@sentry/cli-darwin': 2.58.2
-      '@sentry/cli-linux-arm': 2.58.2
-      '@sentry/cli-linux-arm64': 2.58.2
-      '@sentry/cli-linux-i686': 2.58.2
-      '@sentry/cli-linux-x64': 2.58.2
-      '@sentry/cli-win32-arm64': 2.58.2
-      '@sentry/cli-win32-i686': 2.58.2
-      '@sentry/cli-win32-x64': 2.58.2
-    transitivePeerDependencies:
-      - encoding
-      - supports-color
-
-  '@sentry/core@10.27.0': {}
-
-  '@sentry/node-core@10.27.0(@opentelemetry/api@1.9.0)(@opentelemetry/context-async-hooks@2.2.0(@opentelemetry/api@1.9.0))(@opentelemetry/core@2.2.0(@opentelemetry/api@1.9.0))(@opentelemetry/instrumentation@0.208.0(@opentelemetry/api@1.9.0))(@opentelemetry/resources@2.2.0(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@2.2.0(@opentelemetry/api@1.9.0))(@opentelemetry/semantic-conventions@1.37.0)':
-    dependencies:
-      '@apm-js-collab/tracing-hooks': 0.3.1
-      '@opentelemetry/api': 1.9.0
-      '@opentelemetry/context-async-hooks': 2.2.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/core': 2.2.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation': 0.208.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/resources': 2.2.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/sdk-trace-base': 2.2.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/semantic-conventions': 1.37.0
-      '@sentry/core': 10.27.0
-      '@sentry/opentelemetry': 10.27.0(@opentelemetry/api@1.9.0)(@opentelemetry/context-async-hooks@2.2.0(@opentelemetry/api@1.9.0))(@opentelemetry/core@2.2.0(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@2.2.0(@opentelemetry/api@1.9.0))(@opentelemetry/semantic-conventions@1.37.0)
-      import-in-the-middle: 2.0.0
-    transitivePeerDependencies:
-      - supports-color
-
-  '@sentry/node@10.27.0':
-    dependencies:
-      '@opentelemetry/api': 1.9.0
-      '@opentelemetry/context-async-hooks': 2.2.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/core': 2.2.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation': 0.208.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation-amqplib': 0.55.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation-connect': 0.52.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation-dataloader': 0.26.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation-express': 0.57.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation-fs': 0.28.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation-generic-pool': 0.52.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation-graphql': 0.56.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation-hapi': 0.55.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation-http': 0.208.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation-ioredis': 0.56.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation-kafkajs': 0.18.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation-knex': 0.53.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation-koa': 0.57.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation-lru-memoizer': 0.53.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation-mongodb': 0.61.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation-mongoose': 0.55.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation-mysql': 0.54.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation-mysql2': 0.55.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation-pg': 0.61.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation-redis': 0.57.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation-tedious': 0.27.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation-undici': 0.19.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/resources': 2.2.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/sdk-trace-base': 2.2.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/semantic-conventions': 1.37.0
-      '@prisma/instrumentation': 6.19.0(@opentelemetry/api@1.9.0)
-      '@sentry/core': 10.27.0
-      '@sentry/node-core': 10.27.0(@opentelemetry/api@1.9.0)(@opentelemetry/context-async-hooks@2.2.0(@opentelemetry/api@1.9.0))(@opentelemetry/core@2.2.0(@opentelemetry/api@1.9.0))(@opentelemetry/instrumentation@0.208.0(@opentelemetry/api@1.9.0))(@opentelemetry/resources@2.2.0(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@2.2.0(@opentelemetry/api@1.9.0))(@opentelemetry/semantic-conventions@1.37.0)
-      '@sentry/opentelemetry': 10.27.0(@opentelemetry/api@1.9.0)(@opentelemetry/context-async-hooks@2.2.0(@opentelemetry/api@1.9.0))(@opentelemetry/core@2.2.0(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@2.2.0(@opentelemetry/api@1.9.0))(@opentelemetry/semantic-conventions@1.37.0)
-      import-in-the-middle: 2.0.0
-      minimatch: 9.0.5
-    transitivePeerDependencies:
-      - supports-color
-
-  '@sentry/opentelemetry@10.27.0(@opentelemetry/api@1.9.0)(@opentelemetry/context-async-hooks@2.2.0(@opentelemetry/api@1.9.0))(@opentelemetry/core@2.2.0(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@2.2.0(@opentelemetry/api@1.9.0))(@opentelemetry/semantic-conventions@1.37.0)':
-    dependencies:
-      '@opentelemetry/api': 1.9.0
-      '@opentelemetry/context-async-hooks': 2.2.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/core': 2.2.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/sdk-trace-base': 2.2.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/semantic-conventions': 1.37.0
-      '@sentry/core': 10.27.0
-
-  '@sentry/profiling-node@10.27.0':
-    dependencies:
-      '@sentry-internal/node-cpu-profiler': 2.2.0
-      '@sentry/core': 10.27.0
-      '@sentry/node': 10.27.0
-    transitivePeerDependencies:
-      - supports-color
-
-  '@sentry/react-router@10.27.0(@react-router/node@7.9.5(react-router@7.9.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(typescript@5.8.3))(react-router@7.9.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)':
-    dependencies:
-      '@opentelemetry/api': 1.9.0
-      '@opentelemetry/core': 2.2.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation': 0.208.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/semantic-conventions': 1.37.0
-      '@react-router/node': 7.9.5(react-router@7.9.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(typescript@5.8.3)
-      '@sentry/browser': 10.27.0
-      '@sentry/cli': 2.58.2
-      '@sentry/core': 10.27.0
-      '@sentry/node': 10.27.0
-      '@sentry/react': 10.27.0(react@18.3.1)
-      '@sentry/vite-plugin': 4.6.0
-      glob: 11.1.0
-      react: 18.3.1
-      react-router: 7.9.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-    transitivePeerDependencies:
-      - encoding
-      - supports-color
-
-  '@sentry/react@10.27.0(react@18.3.1)':
-    dependencies:
-      '@sentry/browser': 10.27.0
-      '@sentry/core': 10.27.0
-      hoist-non-react-statics: 3.3.2
-      react: 18.3.1
-
-  '@sentry/vite-plugin@4.6.0':
-    dependencies:
-      '@sentry/bundler-plugin-core': 4.6.0
-      unplugin: 1.0.1
-    transitivePeerDependencies:
-      - encoding
-      - supports-color
-
   '@standard-schema/spec@1.0.0': {}
 
-  '@storybook/addon-actions@8.6.14(storybook@8.6.14(prettier@3.7.4))':
+  '@storybook/addon-actions@8.6.14(storybook@9.1.19(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3)))':
     dependencies:
       '@storybook/global': 5.0.0
       '@types/uuid': 9.0.8
       dequal: 2.0.3
       polished: 4.3.1
-      storybook: 8.6.14(prettier@3.7.4)
+      storybook: 9.1.19(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3))
       uuid: 9.0.1
 
-  '@storybook/addon-backgrounds@8.6.14(storybook@8.6.14(prettier@3.7.4))':
+  '@storybook/addon-backgrounds@8.6.14(storybook@9.1.19(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3)))':
     dependencies:
       '@storybook/global': 5.0.0
       memoizerific: 1.11.3
-      storybook: 8.6.14(prettier@3.7.4)
+      storybook: 9.1.19(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3))
       ts-dedent: 2.2.0
 
-  '@storybook/addon-controls@8.6.14(storybook@8.6.14(prettier@3.7.4))':
+  '@storybook/addon-controls@8.6.14(storybook@9.1.19(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3)))':
     dependencies:
       '@storybook/global': 5.0.0
       dequal: 2.0.3
-      storybook: 8.6.14(prettier@3.7.4)
+      storybook: 9.1.19(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3))
       ts-dedent: 2.2.0
 
-  '@storybook/addon-designs@10.0.2(@storybook/addon-docs@9.1.10(@types/react@18.3.11)(storybook@9.1.10(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.5.1)(terser@5.43.1)(yaml@2.8.1))))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@9.1.10(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.5.1)(terser@5.43.1)(yaml@2.8.1)))':
+  '@storybook/addon-designs@10.0.2(@storybook/addon-docs@9.1.10(@types/react@18.3.11)(storybook@9.1.19(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3))))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@9.1.19(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3)))':
     dependencies:
       '@figspec/react': 1.0.4(react@18.3.1)
-      storybook: 9.1.10(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.5.1)(terser@5.43.1)(yaml@2.8.1))
+      storybook: 9.1.19(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3))
     optionalDependencies:
-      '@storybook/addon-docs': 9.1.10(@types/react@18.3.11)(storybook@9.1.10(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.5.1)(terser@5.43.1)(yaml@2.8.1)))
+      '@storybook/addon-docs': 9.1.10(@types/react@18.3.11)(storybook@9.1.19(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3)))
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
 
-  '@storybook/addon-docs@8.6.14(@types/react@18.3.11)(storybook@8.6.14(prettier@3.7.4))':
+  '@storybook/addon-docs@8.6.14(@types/react@18.3.11)(storybook@9.1.19(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3)))':
     dependencies:
       '@mdx-js/react': 3.1.0(@types/react@18.3.11)(react@18.3.1)
-      '@storybook/blocks': 8.6.14(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.6.14(prettier@3.7.4))
-      '@storybook/csf-plugin': 8.6.14(storybook@8.6.14(prettier@3.7.4))
-      '@storybook/react-dom-shim': 8.6.14(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.6.14(prettier@3.7.4))
+      '@storybook/blocks': 8.6.14(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@9.1.19(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3)))
+      '@storybook/csf-plugin': 8.6.14(storybook@9.1.19(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3)))
+      '@storybook/react-dom-shim': 8.6.14(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@9.1.19(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3)))
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
-      storybook: 8.6.14(prettier@3.7.4)
+      storybook: 9.1.19(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3))
       ts-dedent: 2.2.0
     transitivePeerDependencies:
       - '@types/react'
 
-  '@storybook/addon-docs@9.1.10(@types/react@18.3.11)(storybook@9.1.10(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.5.1)(terser@5.43.1)(yaml@2.8.1)))':
+  '@storybook/addon-docs@9.1.10(@types/react@18.3.11)(storybook@9.1.19(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3)))':
     dependencies:
       '@mdx-js/react': 3.1.0(@types/react@18.3.11)(react@18.3.1)
-      '@storybook/csf-plugin': 9.1.10(storybook@9.1.10(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.5.1)(terser@5.43.1)(yaml@2.8.1)))
+      '@storybook/csf-plugin': 9.1.10(storybook@9.1.19(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3)))
       '@storybook/icons': 1.4.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@storybook/react-dom-shim': 9.1.10(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@9.1.10(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.5.1)(terser@5.43.1)(yaml@2.8.1)))
+      '@storybook/react-dom-shim': 9.1.10(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@9.1.19(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3)))
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
-      storybook: 9.1.10(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.5.1)(terser@5.43.1)(yaml@2.8.1))
+      storybook: 9.1.19(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3))
       ts-dedent: 2.2.0
     transitivePeerDependencies:
       - '@types/react'
 
-  '@storybook/addon-essentials@8.6.14(@types/react@18.3.11)(storybook@8.6.14(prettier@3.7.4))':
+  '@storybook/addon-essentials@8.6.14(@types/react@18.3.11)(storybook@9.1.19(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3)))':
     dependencies:
-      '@storybook/addon-actions': 8.6.14(storybook@8.6.14(prettier@3.7.4))
-      '@storybook/addon-backgrounds': 8.6.14(storybook@8.6.14(prettier@3.7.4))
-      '@storybook/addon-controls': 8.6.14(storybook@8.6.14(prettier@3.7.4))
-      '@storybook/addon-docs': 8.6.14(@types/react@18.3.11)(storybook@8.6.14(prettier@3.7.4))
-      '@storybook/addon-highlight': 8.6.14(storybook@8.6.14(prettier@3.7.4))
-      '@storybook/addon-measure': 8.6.14(storybook@8.6.14(prettier@3.7.4))
-      '@storybook/addon-outline': 8.6.14(storybook@8.6.14(prettier@3.7.4))
-      '@storybook/addon-toolbars': 8.6.14(storybook@8.6.14(prettier@3.7.4))
-      '@storybook/addon-viewport': 8.6.14(storybook@8.6.14(prettier@3.7.4))
-      storybook: 8.6.14(prettier@3.7.4)
+      '@storybook/addon-actions': 8.6.14(storybook@9.1.19(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3)))
+      '@storybook/addon-backgrounds': 8.6.14(storybook@9.1.19(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3)))
+      '@storybook/addon-controls': 8.6.14(storybook@9.1.19(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3)))
+      '@storybook/addon-docs': 8.6.14(@types/react@18.3.11)(storybook@9.1.19(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3)))
+      '@storybook/addon-highlight': 8.6.14(storybook@9.1.19(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3)))
+      '@storybook/addon-measure': 8.6.14(storybook@9.1.19(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3)))
+      '@storybook/addon-outline': 8.6.14(storybook@9.1.19(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3)))
+      '@storybook/addon-toolbars': 8.6.14(storybook@9.1.19(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3)))
+      '@storybook/addon-viewport': 8.6.14(storybook@9.1.19(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3)))
+      storybook: 9.1.19(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3))
       ts-dedent: 2.2.0
     transitivePeerDependencies:
       - '@types/react'
 
-  '@storybook/addon-highlight@8.6.14(storybook@8.6.14(prettier@3.7.4))':
+  '@storybook/addon-highlight@8.6.14(storybook@9.1.19(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3)))':
     dependencies:
       '@storybook/global': 5.0.0
-      storybook: 8.6.14(prettier@3.7.4)
+      storybook: 9.1.19(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3))
 
-  '@storybook/addon-interactions@8.6.14(storybook@8.6.14(prettier@3.7.4))':
+  '@storybook/addon-interactions@8.6.14(storybook@9.1.19(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3)))':
     dependencies:
       '@storybook/global': 5.0.0
-      '@storybook/instrumenter': 8.6.14(storybook@8.6.14(prettier@3.7.4))
-      '@storybook/test': 8.6.14(storybook@8.6.14(prettier@3.7.4))
+      '@storybook/instrumenter': 8.6.14(storybook@9.1.19(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3)))
+      '@storybook/test': 8.6.14(storybook@9.1.19(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3)))
       polished: 4.3.1
-      storybook: 8.6.14(prettier@3.7.4)
+      storybook: 9.1.19(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3))
       ts-dedent: 2.2.0
 
-  '@storybook/addon-links@8.6.14(react@18.3.1)(storybook@8.6.14(prettier@3.7.4))':
+  '@storybook/addon-links@8.6.14(react@18.3.1)(storybook@9.1.19(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3)))':
     dependencies:
       '@storybook/global': 5.0.0
-      storybook: 8.6.14(prettier@3.7.4)
+      storybook: 9.1.19(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3))
       ts-dedent: 2.2.0
     optionalDependencies:
       react: 18.3.1
 
-  '@storybook/addon-measure@8.6.14(storybook@8.6.14(prettier@3.7.4))':
+  '@storybook/addon-measure@8.6.14(storybook@9.1.19(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3)))':
     dependencies:
       '@storybook/global': 5.0.0
-      storybook: 8.6.14(prettier@3.7.4)
+      storybook: 9.1.19(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3))
       tiny-invariant: 1.3.3
 
-  '@storybook/addon-onboarding@8.6.14(storybook@8.6.14(prettier@3.7.4))':
+  '@storybook/addon-onboarding@8.6.14(storybook@9.1.19(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3)))':
     dependencies:
-      storybook: 8.6.14(prettier@3.7.4)
+      storybook: 9.1.19(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3))
 
-  '@storybook/addon-outline@8.6.14(storybook@8.6.14(prettier@3.7.4))':
+  '@storybook/addon-outline@8.6.14(storybook@9.1.19(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3)))':
     dependencies:
       '@storybook/global': 5.0.0
-      storybook: 8.6.14(prettier@3.7.4)
+      storybook: 9.1.19(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3))
       ts-dedent: 2.2.0
 
-  '@storybook/addon-styling-webpack@1.0.1(storybook@8.6.14(prettier@3.7.4))(webpack@5.101.3(@swc/core@1.13.5(@swc/helpers@0.5.17))(esbuild@0.25.0))':
+  '@storybook/addon-styling-webpack@1.0.1(storybook@9.1.19(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3)))(webpack@5.104.1(@swc/core@1.13.5(@swc/helpers@0.5.17)))':
     dependencies:
-      '@storybook/node-logger': 8.6.14(storybook@8.6.14(prettier@3.7.4))
-      webpack: 5.101.3(@swc/core@1.13.5(@swc/helpers@0.5.17))(esbuild@0.25.0)
+      '@storybook/node-logger': 8.6.14(storybook@9.1.19(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3)))
+      webpack: 5.104.1(@swc/core@1.13.5(@swc/helpers@0.5.17))
     transitivePeerDependencies:
       - storybook
 
-  '@storybook/addon-toolbars@8.6.14(storybook@8.6.14(prettier@3.7.4))':
+  '@storybook/addon-toolbars@8.6.14(storybook@9.1.19(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3)))':
     dependencies:
-      storybook: 8.6.14(prettier@3.7.4)
+      storybook: 9.1.19(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3))
 
-  '@storybook/addon-viewport@8.6.14(storybook@8.6.14(prettier@3.7.4))':
+  '@storybook/addon-viewport@8.6.14(storybook@9.1.19(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3)))':
     dependencies:
       memoizerific: 1.11.3
-      storybook: 8.6.14(prettier@3.7.4)
+      storybook: 9.1.19(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3))
 
-  '@storybook/addon-webpack5-compiler-swc@1.0.6(@swc/helpers@0.5.17)(webpack@5.101.3(@swc/core@1.13.5(@swc/helpers@0.5.17))(esbuild@0.25.0))':
+  '@storybook/addon-webpack5-compiler-swc@1.0.6(@swc/helpers@0.5.17)(webpack@5.104.1(@swc/core@1.13.5(@swc/helpers@0.5.17)))':
     dependencies:
       '@swc/core': 1.13.5(@swc/helpers@0.5.17)
-      swc-loader: 0.2.6(@swc/core@1.13.5(@swc/helpers@0.5.17))(webpack@5.101.3(@swc/core@1.13.5(@swc/helpers@0.5.17))(esbuild@0.25.0))
+      swc-loader: 0.2.6(@swc/core@1.13.5(@swc/helpers@0.5.17))(webpack@5.104.1(@swc/core@1.13.5(@swc/helpers@0.5.17)))
     transitivePeerDependencies:
       - '@swc/helpers'
       - webpack
 
-  '@storybook/blocks@8.6.14(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.6.14(prettier@3.7.4))':
+  '@storybook/blocks@8.6.14(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@9.1.19(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3)))':
     dependencies:
       '@storybook/icons': 1.4.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      storybook: 8.6.14(prettier@3.7.4)
+      storybook: 9.1.19(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3))
       ts-dedent: 2.2.0
     optionalDependencies:
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
 
-  '@storybook/builder-vite@9.1.10(storybook@9.1.10(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.5.1)(terser@5.43.1)(yaml@2.8.1)))(vite@7.1.11(@types/node@22.12.0)(jiti@2.5.1)(terser@5.43.1)(yaml@2.8.1))':
+  '@storybook/builder-vite@9.1.10(storybook@9.1.19(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3)))(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3))':
     dependencies:
-      '@storybook/csf-plugin': 9.1.10(storybook@9.1.10(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.5.1)(terser@5.43.1)(yaml@2.8.1)))
-      storybook: 9.1.10(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.5.1)(terser@5.43.1)(yaml@2.8.1))
+      '@storybook/csf-plugin': 9.1.10(storybook@9.1.19(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3)))
+      storybook: 9.1.19(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3))
       ts-dedent: 2.2.0
-      vite: 7.1.11(@types/node@22.12.0)(jiti@2.5.1)(terser@5.43.1)(yaml@2.8.1)
+      vite: 7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3)
 
-  '@storybook/builder-webpack5@8.6.14(@swc/core@1.13.5(@swc/helpers@0.5.17))(esbuild@0.25.0)(storybook@8.6.14(prettier@3.7.4))(typescript@5.8.3)':
+  '@storybook/builder-webpack5@8.6.14(@swc/core@1.13.5(@swc/helpers@0.5.17))(storybook@9.1.19(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3)))(typescript@5.8.3)':
     dependencies:
-      '@storybook/core-webpack': 8.6.14(storybook@8.6.14(prettier@3.7.4))
+      '@storybook/core-webpack': 8.6.14(storybook@9.1.19(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3)))
       '@types/semver': 7.7.1
       browser-assert: 1.2.1
       case-sensitive-paths-webpack-plugin: 2.4.0
       cjs-module-lexer: 1.4.3
       constants-browserify: 1.0.0
-      css-loader: 6.11.0(webpack@5.101.3(@swc/core@1.13.5(@swc/helpers@0.5.17))(esbuild@0.25.0))
+      css-loader: 6.11.0(webpack@5.104.1(@swc/core@1.13.5(@swc/helpers@0.5.17)))
       es-module-lexer: 1.7.0
-      fork-ts-checker-webpack-plugin: 8.0.0(typescript@5.8.3)(webpack@5.101.3(@swc/core@1.13.5(@swc/helpers@0.5.17))(esbuild@0.25.0))
-      html-webpack-plugin: 5.6.4(webpack@5.101.3(@swc/core@1.13.5(@swc/helpers@0.5.17))(esbuild@0.25.0))
-      magic-string: 0.30.19
+      fork-ts-checker-webpack-plugin: 8.0.0(typescript@5.8.3)(webpack@5.104.1(@swc/core@1.13.5(@swc/helpers@0.5.17)))
+      html-webpack-plugin: 5.6.4(webpack@5.104.1(@swc/core@1.13.5(@swc/helpers@0.5.17)))
+      magic-string: 0.30.21
       path-browserify: 1.0.1
       process: 0.11.10
-      semver: 7.7.3
-      storybook: 8.6.14(prettier@3.7.4)
-      style-loader: 3.3.4(webpack@5.101.3(@swc/core@1.13.5(@swc/helpers@0.5.17))(esbuild@0.25.0))
-      terser-webpack-plugin: 5.3.14(@swc/core@1.13.5(@swc/helpers@0.5.17))(esbuild@0.25.0)(webpack@5.101.3(@swc/core@1.13.5(@swc/helpers@0.5.17))(esbuild@0.25.0))
+      semver: 7.7.4
+      storybook: 9.1.19(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3))
+      style-loader: 3.3.4(webpack@5.104.1(@swc/core@1.13.5(@swc/helpers@0.5.17)))
+      terser-webpack-plugin: 5.3.16(@swc/core@1.13.5(@swc/helpers@0.5.17))(webpack@5.104.1(@swc/core@1.13.5(@swc/helpers@0.5.17)))
       ts-dedent: 2.2.0
       url: 0.11.4
       util: 0.12.5
       util-deprecate: 1.0.2
-      webpack: 5.101.3(@swc/core@1.13.5(@swc/helpers@0.5.17))(esbuild@0.25.0)
-      webpack-dev-middleware: 6.1.3(webpack@5.101.3(@swc/core@1.13.5(@swc/helpers@0.5.17))(esbuild@0.25.0))
+      webpack: 5.104.1(@swc/core@1.13.5(@swc/helpers@0.5.17))
+      webpack-dev-middleware: 6.1.3(webpack@5.104.1(@swc/core@1.13.5(@swc/helpers@0.5.17)))
       webpack-hot-middleware: 2.26.1
       webpack-virtual-modules: 0.6.2
     optionalDependencies:
@@ -11602,44 +10751,23 @@ snapshots:
       - uglify-js
       - webpack-cli
 
-  '@storybook/components@8.6.14(storybook@8.6.14(prettier@3.7.4))':
+  '@storybook/components@8.6.14(storybook@9.1.19(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3)))':
     dependencies:
-      storybook: 8.6.14(prettier@3.7.4)
+      storybook: 9.1.19(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3))
 
-  '@storybook/core-webpack@8.6.14(storybook@8.6.14(prettier@3.7.4))':
+  '@storybook/core-webpack@8.6.14(storybook@9.1.19(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3)))':
     dependencies:
-      storybook: 8.6.14(prettier@3.7.4)
+      storybook: 9.1.19(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3))
       ts-dedent: 2.2.0
 
-  '@storybook/core@8.6.14(prettier@3.7.4)(storybook@8.6.14(prettier@3.7.4))':
+  '@storybook/csf-plugin@8.6.14(storybook@9.1.19(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3)))':
     dependencies:
-      '@storybook/theming': 8.6.14(storybook@8.6.14(prettier@3.7.4))
-      better-opn: 3.0.2
-      browser-assert: 1.2.1
-      esbuild: 0.25.0
-      esbuild-register: 3.6.0(esbuild@0.25.0)
-      jsdoc-type-pratt-parser: 4.8.0
-      process: 0.11.10
-      recast: 0.23.11
-      semver: 7.7.3
-      util: 0.12.5
-      ws: 8.18.3
-    optionalDependencies:
-      prettier: 3.7.4
-    transitivePeerDependencies:
-      - bufferutil
-      - storybook
-      - supports-color
-      - utf-8-validate
-
-  '@storybook/csf-plugin@8.6.14(storybook@8.6.14(prettier@3.7.4))':
-    dependencies:
-      storybook: 8.6.14(prettier@3.7.4)
+      storybook: 9.1.19(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3))
       unplugin: 1.16.1
 
-  '@storybook/csf-plugin@9.1.10(storybook@9.1.10(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.5.1)(terser@5.43.1)(yaml@2.8.1)))':
+  '@storybook/csf-plugin@9.1.10(storybook@9.1.19(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3)))':
     dependencies:
-      storybook: 9.1.10(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.5.1)(terser@5.43.1)(yaml@2.8.1))
+      storybook: 9.1.19(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3))
       unplugin: 1.16.1
 
   '@storybook/global@5.0.0': {}
@@ -11649,36 +10777,36 @@ snapshots:
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
 
-  '@storybook/instrumenter@8.6.14(storybook@8.6.14(prettier@3.7.4))':
+  '@storybook/instrumenter@8.6.14(storybook@9.1.19(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3)))':
     dependencies:
       '@storybook/global': 5.0.0
       '@vitest/utils': 2.1.9
-      storybook: 8.6.14(prettier@3.7.4)
+      storybook: 9.1.19(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3))
 
-  '@storybook/manager-api@8.6.14(storybook@8.6.14(prettier@3.7.4))':
+  '@storybook/manager-api@8.6.14(storybook@9.1.19(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3)))':
     dependencies:
-      storybook: 8.6.14(prettier@3.7.4)
+      storybook: 9.1.19(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3))
 
-  '@storybook/node-logger@8.6.14(storybook@8.6.14(prettier@3.7.4))':
+  '@storybook/node-logger@8.6.14(storybook@9.1.19(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3)))':
     dependencies:
-      storybook: 8.6.14(prettier@3.7.4)
+      storybook: 9.1.19(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3))
 
-  '@storybook/preset-react-webpack@8.6.14(@storybook/test@8.6.14(storybook@8.6.14(prettier@3.7.4)))(@swc/core@1.13.5(@swc/helpers@0.5.17))(esbuild@0.25.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.6.14(prettier@3.7.4))(typescript@5.8.3)':
+  '@storybook/preset-react-webpack@8.6.14(@storybook/test@8.6.14(storybook@9.1.19(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3))))(@swc/core@1.13.5(@swc/helpers@0.5.17))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@9.1.19(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3)))(typescript@5.8.3)':
     dependencies:
-      '@storybook/core-webpack': 8.6.14(storybook@8.6.14(prettier@3.7.4))
-      '@storybook/react': 8.6.14(@storybook/test@8.6.14(storybook@8.6.14(prettier@3.7.4)))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.6.14(prettier@3.7.4))(typescript@5.8.3)
-      '@storybook/react-docgen-typescript-plugin': 1.0.6--canary.9.0c3f3b7.0(typescript@5.8.3)(webpack@5.101.3(@swc/core@1.13.5(@swc/helpers@0.5.17))(esbuild@0.25.0))
+      '@storybook/core-webpack': 8.6.14(storybook@9.1.19(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3)))
+      '@storybook/react': 8.6.14(@storybook/test@8.6.14(storybook@9.1.19(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3))))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@9.1.19(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3)))(typescript@5.8.3)
+      '@storybook/react-docgen-typescript-plugin': 1.0.6--canary.9.0c3f3b7.0(typescript@5.8.3)(webpack@5.104.1(@swc/core@1.13.5(@swc/helpers@0.5.17)))
       '@types/semver': 7.7.1
       find-up: 5.0.0
-      magic-string: 0.30.19
+      magic-string: 0.30.21
       react: 18.3.1
       react-docgen: 7.1.1
       react-dom: 18.3.1(react@18.3.1)
       resolve: 1.22.10
-      semver: 7.7.3
-      storybook: 8.6.14(prettier@3.7.4)
+      semver: 7.7.4
+      storybook: 9.1.19(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3))
       tsconfig-paths: 4.2.0
-      webpack: 5.101.3(@swc/core@1.13.5(@swc/helpers@0.5.17))(esbuild@0.25.0)
+      webpack: 5.104.1(@swc/core@1.13.5(@swc/helpers@0.5.17))
     optionalDependencies:
       typescript: 5.8.3
     transitivePeerDependencies:
@@ -11689,11 +10817,11 @@ snapshots:
       - uglify-js
       - webpack-cli
 
-  '@storybook/preview-api@8.6.14(storybook@8.6.14(prettier@3.7.4))':
+  '@storybook/preview-api@8.6.14(storybook@9.1.19(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3)))':
     dependencies:
-      storybook: 8.6.14(prettier@3.7.4)
+      storybook: 9.1.19(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3))
 
-  '@storybook/react-docgen-typescript-plugin@1.0.6--canary.9.0c3f3b7.0(typescript@5.8.3)(webpack@5.101.3(@swc/core@1.13.5(@swc/helpers@0.5.17))(esbuild@0.25.0))':
+  '@storybook/react-docgen-typescript-plugin@1.0.6--canary.9.0c3f3b7.0(typescript@5.8.3)(webpack@5.104.1(@swc/core@1.13.5(@swc/helpers@0.5.17)))':
     dependencies:
       debug: 4.4.3
       endent: 2.1.0
@@ -11703,50 +10831,50 @@ snapshots:
       react-docgen-typescript: 2.4.0(typescript@5.8.3)
       tslib: 2.8.1
       typescript: 5.8.3
-      webpack: 5.101.3(@swc/core@1.13.5(@swc/helpers@0.5.17))(esbuild@0.25.0)
+      webpack: 5.104.1(@swc/core@1.13.5(@swc/helpers@0.5.17))
     transitivePeerDependencies:
       - supports-color
 
-  '@storybook/react-dom-shim@8.6.14(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.6.14(prettier@3.7.4))':
+  '@storybook/react-dom-shim@8.6.14(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@9.1.19(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3)))':
     dependencies:
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
-      storybook: 8.6.14(prettier@3.7.4)
+      storybook: 9.1.19(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3))
 
-  '@storybook/react-dom-shim@9.1.10(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@9.1.10(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.5.1)(terser@5.43.1)(yaml@2.8.1)))':
+  '@storybook/react-dom-shim@9.1.10(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@9.1.19(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3)))':
     dependencies:
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
-      storybook: 9.1.10(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.5.1)(terser@5.43.1)(yaml@2.8.1))
+      storybook: 9.1.19(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3))
 
-  '@storybook/react-vite@9.1.10(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(rollup@4.52.4)(storybook@9.1.10(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.5.1)(terser@5.43.1)(yaml@2.8.1)))(typescript@5.8.3)(vite@7.1.11(@types/node@22.12.0)(jiti@2.5.1)(terser@5.43.1)(yaml@2.8.1))':
+  '@storybook/react-vite@9.1.10(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(rollup@4.59.0)(storybook@9.1.19(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3)))(typescript@5.8.3)(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3))':
     dependencies:
-      '@joshwooding/vite-plugin-react-docgen-typescript': 0.6.1(typescript@5.8.3)(vite@7.1.11(@types/node@22.12.0)(jiti@2.5.1)(terser@5.43.1)(yaml@2.8.1))
-      '@rollup/pluginutils': 5.2.0(rollup@4.52.4)
-      '@storybook/builder-vite': 9.1.10(storybook@9.1.10(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.5.1)(terser@5.43.1)(yaml@2.8.1)))(vite@7.1.11(@types/node@22.12.0)(jiti@2.5.1)(terser@5.43.1)(yaml@2.8.1))
-      '@storybook/react': 9.1.10(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@9.1.10(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.5.1)(terser@5.43.1)(yaml@2.8.1)))(typescript@5.8.3)
+      '@joshwooding/vite-plugin-react-docgen-typescript': 0.6.1(typescript@5.8.3)(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3))
+      '@rollup/pluginutils': 5.2.0(rollup@4.59.0)
+      '@storybook/builder-vite': 9.1.10(storybook@9.1.19(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3)))(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3))
+      '@storybook/react': 9.1.10(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@9.1.19(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3)))(typescript@5.8.3)
       find-up: 7.0.0
-      magic-string: 0.30.19
+      magic-string: 0.30.21
       react: 18.3.1
       react-docgen: 8.0.1
       react-dom: 18.3.1(react@18.3.1)
       resolve: 1.22.10
-      storybook: 9.1.10(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.5.1)(terser@5.43.1)(yaml@2.8.1))
+      storybook: 9.1.19(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3))
       tsconfig-paths: 4.2.0
-      vite: 7.1.11(@types/node@22.12.0)(jiti@2.5.1)(terser@5.43.1)(yaml@2.8.1)
+      vite: 7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3)
     transitivePeerDependencies:
       - rollup
       - supports-color
       - typescript
 
-  '@storybook/react-webpack5@8.6.14(@storybook/test@8.6.14(storybook@8.6.14(prettier@3.7.4)))(@swc/core@1.13.5(@swc/helpers@0.5.17))(esbuild@0.25.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.6.14(prettier@3.7.4))(typescript@5.8.3)':
+  '@storybook/react-webpack5@8.6.14(@storybook/test@8.6.14(storybook@9.1.19(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3))))(@swc/core@1.13.5(@swc/helpers@0.5.17))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@9.1.19(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3)))(typescript@5.8.3)':
     dependencies:
-      '@storybook/builder-webpack5': 8.6.14(@swc/core@1.13.5(@swc/helpers@0.5.17))(esbuild@0.25.0)(storybook@8.6.14(prettier@3.7.4))(typescript@5.8.3)
-      '@storybook/preset-react-webpack': 8.6.14(@storybook/test@8.6.14(storybook@8.6.14(prettier@3.7.4)))(@swc/core@1.13.5(@swc/helpers@0.5.17))(esbuild@0.25.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.6.14(prettier@3.7.4))(typescript@5.8.3)
-      '@storybook/react': 8.6.14(@storybook/test@8.6.14(storybook@8.6.14(prettier@3.7.4)))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.6.14(prettier@3.7.4))(typescript@5.8.3)
+      '@storybook/builder-webpack5': 8.6.14(@swc/core@1.13.5(@swc/helpers@0.5.17))(storybook@9.1.19(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3)))(typescript@5.8.3)
+      '@storybook/preset-react-webpack': 8.6.14(@storybook/test@8.6.14(storybook@9.1.19(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3))))(@swc/core@1.13.5(@swc/helpers@0.5.17))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@9.1.19(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3)))(typescript@5.8.3)
+      '@storybook/react': 8.6.14(@storybook/test@8.6.14(storybook@9.1.19(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3))))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@9.1.19(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3)))(typescript@5.8.3)
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
-      storybook: 8.6.14(prettier@3.7.4)
+      storybook: 9.1.19(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3))
     optionalDependencies:
       typescript: 5.8.3
     transitivePeerDependencies:
@@ -11758,45 +10886,45 @@ snapshots:
       - uglify-js
       - webpack-cli
 
-  '@storybook/react@8.6.14(@storybook/test@8.6.14(storybook@8.6.14(prettier@3.7.4)))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.6.14(prettier@3.7.4))(typescript@5.8.3)':
+  '@storybook/react@8.6.14(@storybook/test@8.6.14(storybook@9.1.19(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3))))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@9.1.19(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3)))(typescript@5.8.3)':
     dependencies:
-      '@storybook/components': 8.6.14(storybook@8.6.14(prettier@3.7.4))
+      '@storybook/components': 8.6.14(storybook@9.1.19(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3)))
       '@storybook/global': 5.0.0
-      '@storybook/manager-api': 8.6.14(storybook@8.6.14(prettier@3.7.4))
-      '@storybook/preview-api': 8.6.14(storybook@8.6.14(prettier@3.7.4))
-      '@storybook/react-dom-shim': 8.6.14(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.6.14(prettier@3.7.4))
-      '@storybook/theming': 8.6.14(storybook@8.6.14(prettier@3.7.4))
+      '@storybook/manager-api': 8.6.14(storybook@9.1.19(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3)))
+      '@storybook/preview-api': 8.6.14(storybook@9.1.19(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3)))
+      '@storybook/react-dom-shim': 8.6.14(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@9.1.19(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3)))
+      '@storybook/theming': 8.6.14(storybook@9.1.19(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3)))
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
-      storybook: 8.6.14(prettier@3.7.4)
+      storybook: 9.1.19(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3))
     optionalDependencies:
-      '@storybook/test': 8.6.14(storybook@8.6.14(prettier@3.7.4))
+      '@storybook/test': 8.6.14(storybook@9.1.19(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3)))
       typescript: 5.8.3
 
-  '@storybook/react@9.1.10(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@9.1.10(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.5.1)(terser@5.43.1)(yaml@2.8.1)))(typescript@5.8.3)':
+  '@storybook/react@9.1.10(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@9.1.19(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3)))(typescript@5.8.3)':
     dependencies:
       '@storybook/global': 5.0.0
-      '@storybook/react-dom-shim': 9.1.10(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@9.1.10(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.5.1)(terser@5.43.1)(yaml@2.8.1)))
+      '@storybook/react-dom-shim': 9.1.10(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@9.1.19(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3)))
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
-      storybook: 9.1.10(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.5.1)(terser@5.43.1)(yaml@2.8.1))
+      storybook: 9.1.19(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3))
     optionalDependencies:
       typescript: 5.8.3
 
-  '@storybook/test@8.6.14(storybook@8.6.14(prettier@3.7.4))':
+  '@storybook/test@8.6.14(storybook@9.1.19(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3)))':
     dependencies:
       '@storybook/global': 5.0.0
-      '@storybook/instrumenter': 8.6.14(storybook@8.6.14(prettier@3.7.4))
+      '@storybook/instrumenter': 8.6.14(storybook@9.1.19(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3)))
       '@testing-library/dom': 10.4.0
       '@testing-library/jest-dom': 6.5.0
       '@testing-library/user-event': 14.5.2(@testing-library/dom@10.4.0)
       '@vitest/expect': 2.0.5
       '@vitest/spy': 2.0.5
-      storybook: 8.6.14(prettier@3.7.4)
+      storybook: 9.1.19(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3))
 
-  '@storybook/theming@8.6.14(storybook@8.6.14(prettier@3.7.4))':
+  '@storybook/theming@8.6.14(storybook@9.1.19(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3)))':
     dependencies:
-      storybook: 8.6.14(prettier@3.7.4)
+      storybook: 9.1.19(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3))
 
   '@swc/core-darwin-arm64@1.13.5':
     optional: true
@@ -11855,17 +10983,78 @@ snapshots:
     dependencies:
       '@swc/counter': 0.1.3
 
-  '@tailwindcss/container-queries@0.1.1(tailwindcss@3.4.17)':
+  '@tailwindcss/node@4.1.17':
     dependencies:
-      tailwindcss: 3.4.17
+      '@jridgewell/remapping': 2.3.5
+      enhanced-resolve: 5.18.3
+      jiti: 2.6.1
+      lightningcss: 1.30.2
+      magic-string: 0.30.21
+      source-map-js: 1.2.1
+      tailwindcss: 4.1.17
 
-  '@tailwindcss/typography@0.5.16(tailwindcss@3.4.17)':
+  '@tailwindcss/oxide-android-arm64@4.1.17':
+    optional: true
+
+  '@tailwindcss/oxide-darwin-arm64@4.1.17':
+    optional: true
+
+  '@tailwindcss/oxide-darwin-x64@4.1.17':
+    optional: true
+
+  '@tailwindcss/oxide-freebsd-x64@4.1.17':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.1.17':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm64-gnu@4.1.17':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm64-musl@4.1.17':
+    optional: true
+
+  '@tailwindcss/oxide-linux-x64-gnu@4.1.17':
+    optional: true
+
+  '@tailwindcss/oxide-linux-x64-musl@4.1.17':
+    optional: true
+
+  '@tailwindcss/oxide-wasm32-wasi@4.1.17':
+    optional: true
+
+  '@tailwindcss/oxide-win32-arm64-msvc@4.1.17':
+    optional: true
+
+  '@tailwindcss/oxide-win32-x64-msvc@4.1.17':
+    optional: true
+
+  '@tailwindcss/oxide@4.1.17':
+    optionalDependencies:
+      '@tailwindcss/oxide-android-arm64': 4.1.17
+      '@tailwindcss/oxide-darwin-arm64': 4.1.17
+      '@tailwindcss/oxide-darwin-x64': 4.1.17
+      '@tailwindcss/oxide-freebsd-x64': 4.1.17
+      '@tailwindcss/oxide-linux-arm-gnueabihf': 4.1.17
+      '@tailwindcss/oxide-linux-arm64-gnu': 4.1.17
+      '@tailwindcss/oxide-linux-arm64-musl': 4.1.17
+      '@tailwindcss/oxide-linux-x64-gnu': 4.1.17
+      '@tailwindcss/oxide-linux-x64-musl': 4.1.17
+      '@tailwindcss/oxide-wasm32-wasi': 4.1.17
+      '@tailwindcss/oxide-win32-arm64-msvc': 4.1.17
+      '@tailwindcss/oxide-win32-x64-msvc': 4.1.17
+
+  '@tailwindcss/postcss@4.1.17':
+    dependencies:
+      '@alloc/quick-lru': 5.2.0
+      '@tailwindcss/node': 4.1.17
+      '@tailwindcss/oxide': 4.1.17
+      postcss: 8.5.6
+      tailwindcss: 4.1.17
+
+  '@tailwindcss/typography@0.5.19':
     dependencies:
-      lodash.castarray: 4.4.0
-      lodash.isplainobject: 4.0.6
-      lodash.merge: 4.6.2
       postcss-selector-parser: 6.0.10
-      tailwindcss: 3.4.17
 
   '@tanstack/react-table@8.21.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
@@ -11901,7 +11090,7 @@ snapshots:
       chalk: 3.0.0
       css.escape: 1.5.1
       dom-accessibility-api: 0.6.3
-      lodash: 4.17.21
+      lodash: 4.17.23
       redent: 3.0.0
 
   '@testing-library/jest-dom@6.9.1':
@@ -12171,16 +11360,33 @@ snapshots:
       '@tiptap/core': 2.26.3(@tiptap/pm@2.26.1)
       '@tiptap/pm': 2.26.1
 
-  '@tokenizer/inflate@0.2.7':
+  '@tokenizer/inflate@0.4.1':
     dependencies:
       debug: 4.4.3
-      fflate: 0.8.2
       token-types: 6.1.1
     transitivePeerDependencies:
       - supports-color
 
   '@tokenizer/token@0.3.0': {}
 
+  '@turbo/darwin-64@2.9.4':
+    optional: true
+
+  '@turbo/darwin-arm64@2.9.4':
+    optional: true
+
+  '@turbo/linux-64@2.9.4':
+    optional: true
+
+  '@turbo/linux-arm64@2.9.4':
+    optional: true
+
+  '@turbo/windows-64@2.9.4':
+    optional: true
+
+  '@turbo/windows-arm64@2.9.4':
+    optional: true
+
   '@tybys/wasm-util@0.10.1':
     dependencies:
       tslib: 2.8.1
@@ -12190,24 +11396,24 @@ snapshots:
 
   '@types/babel__core@7.20.5':
     dependencies:
-      '@babel/parser': 7.28.4
-      '@babel/types': 7.28.4
+      '@babel/parser': 7.28.5
+      '@babel/types': 7.28.5
       '@types/babel__generator': 7.27.0
       '@types/babel__template': 7.4.4
       '@types/babel__traverse': 7.28.0
 
   '@types/babel__generator@7.27.0':
     dependencies:
-      '@babel/types': 7.28.4
+      '@babel/types': 7.28.5
 
   '@types/babel__template@7.4.4':
     dependencies:
-      '@babel/parser': 7.28.4
-      '@babel/types': 7.28.4
+      '@babel/parser': 7.28.5
+      '@babel/types': 7.28.5
 
   '@types/babel__traverse@7.28.0':
     dependencies:
-      '@babel/types': 7.28.4
+      '@babel/types': 7.28.5
 
   '@types/body-parser@1.19.6':
     dependencies:
@@ -12218,6 +11424,8 @@ snapshots:
     dependencies:
       '@types/deep-eql': 4.0.2
 
+  '@types/chroma-js@3.1.2': {}
+
   '@types/compression@1.8.1':
     dependencies:
       '@types/express': 4.17.23
@@ -12323,8 +11531,6 @@ snapshots:
 
   '@types/json-schema@7.0.15': {}
 
-  '@types/json5@0.0.29': {}
-
   '@types/linkify-it@3.0.5': {}
 
   '@types/linkify-it@5.0.0': {}
@@ -12363,25 +11569,15 @@ snapshots:
 
   '@types/ms@2.1.0': {}
 
-  '@types/mysql@2.15.27':
-    dependencies:
-      '@types/node': 22.12.0
-
   '@types/node@22.12.0':
     dependencies:
       undici-types: 6.20.0
 
   '@types/parse-json@4.0.2': {}
 
-  '@types/pg-pool@2.0.6':
-    dependencies:
-      '@types/pg': 8.15.6
-
-  '@types/pg@8.15.6':
+  '@types/pdf-parse@1.1.5':
     dependencies:
       '@types/node': 22.12.0
-      pg-protocol: 1.10.3
-      pg-types: 2.2.0
 
   '@types/prop-types@15.7.15': {}
 
@@ -12426,10 +11622,6 @@ snapshots:
       '@types/node': 22.12.0
       '@types/send': 0.17.5
 
-  '@types/tedious@4.0.14':
-    dependencies:
-      '@types/node': 22.12.0
-
   '@types/triple-beam@1.3.5': {}
 
   '@types/trusted-types@2.0.7': {}
@@ -12446,220 +11638,21 @@ snapshots:
     dependencies:
       '@types/node': 22.12.0
 
-  '@typescript-eslint/eslint-plugin@8.48.1(@typescript-eslint/parser@8.48.1(eslint@9.39.1(jiti@2.5.1))(typescript@5.8.3))(eslint@9.39.1(jiti@2.5.1))(typescript@5.8.3)':
-    dependencies:
-      '@eslint-community/regexpp': 4.12.1
-      '@typescript-eslint/parser': 8.48.1(eslint@9.39.1(jiti@2.5.1))(typescript@5.8.3)
-      '@typescript-eslint/scope-manager': 8.48.1
-      '@typescript-eslint/type-utils': 8.48.1(eslint@9.39.1(jiti@2.5.1))(typescript@5.8.3)
-      '@typescript-eslint/utils': 8.48.1(eslint@9.39.1(jiti@2.5.1))(typescript@5.8.3)
-      '@typescript-eslint/visitor-keys': 8.48.1
-      eslint: 9.39.1(jiti@2.5.1)
-      graphemer: 1.4.0
-      ignore: 7.0.5
-      natural-compare: 1.4.0
-      ts-api-utils: 2.1.0(typescript@5.8.3)
-      typescript: 5.8.3
-    transitivePeerDependencies:
-      - supports-color
-
-  '@typescript-eslint/parser@8.48.1(eslint@9.39.1(jiti@2.5.1))(typescript@5.8.3)':
-    dependencies:
-      '@typescript-eslint/scope-manager': 8.48.1
-      '@typescript-eslint/types': 8.48.1
-      '@typescript-eslint/typescript-estree': 8.48.1(typescript@5.8.3)
-      '@typescript-eslint/visitor-keys': 8.48.1
-      debug: 4.4.3
-      eslint: 9.39.1(jiti@2.5.1)
-      typescript: 5.8.3
-    transitivePeerDependencies:
-      - supports-color
-
-  '@typescript-eslint/project-service@8.48.1(typescript@5.8.3)':
-    dependencies:
-      '@typescript-eslint/tsconfig-utils': 8.49.0(typescript@5.8.3)
-      '@typescript-eslint/types': 8.49.0
-      debug: 4.4.3
-      typescript: 5.8.3
-    transitivePeerDependencies:
-      - supports-color
-
-  '@typescript-eslint/project-service@8.49.0(typescript@5.8.3)':
-    dependencies:
-      '@typescript-eslint/tsconfig-utils': 8.49.0(typescript@5.8.3)
-      '@typescript-eslint/types': 8.49.0
-      debug: 4.4.3
-      typescript: 5.8.3
-    transitivePeerDependencies:
-      - supports-color
-
-  '@typescript-eslint/scope-manager@8.48.1':
-    dependencies:
-      '@typescript-eslint/types': 8.48.1
-      '@typescript-eslint/visitor-keys': 8.48.1
-
-  '@typescript-eslint/scope-manager@8.49.0':
-    dependencies:
-      '@typescript-eslint/types': 8.49.0
-      '@typescript-eslint/visitor-keys': 8.49.0
-
-  '@typescript-eslint/tsconfig-utils@8.48.1(typescript@5.8.3)':
-    dependencies:
-      typescript: 5.8.3
-
-  '@typescript-eslint/tsconfig-utils@8.49.0(typescript@5.8.3)':
-    dependencies:
-      typescript: 5.8.3
-
-  '@typescript-eslint/type-utils@8.48.1(eslint@9.39.1(jiti@2.5.1))(typescript@5.8.3)':
-    dependencies:
-      '@typescript-eslint/types': 8.48.1
-      '@typescript-eslint/typescript-estree': 8.48.1(typescript@5.8.3)
-      '@typescript-eslint/utils': 8.48.1(eslint@9.39.1(jiti@2.5.1))(typescript@5.8.3)
-      debug: 4.4.3
-      eslint: 9.39.1(jiti@2.5.1)
-      ts-api-utils: 2.1.0(typescript@5.8.3)
-      typescript: 5.8.3
-    transitivePeerDependencies:
-      - supports-color
-
-  '@typescript-eslint/types@8.48.1': {}
-
-  '@typescript-eslint/types@8.49.0': {}
-
-  '@typescript-eslint/typescript-estree@8.48.1(typescript@5.8.3)':
-    dependencies:
-      '@typescript-eslint/project-service': 8.48.1(typescript@5.8.3)
-      '@typescript-eslint/tsconfig-utils': 8.48.1(typescript@5.8.3)
-      '@typescript-eslint/types': 8.48.1
-      '@typescript-eslint/visitor-keys': 8.48.1
-      debug: 4.4.3
-      minimatch: 9.0.5
-      semver: 7.7.3
-      tinyglobby: 0.2.15
-      ts-api-utils: 2.1.0(typescript@5.8.3)
-      typescript: 5.8.3
-    transitivePeerDependencies:
-      - supports-color
-
-  '@typescript-eslint/typescript-estree@8.49.0(typescript@5.8.3)':
-    dependencies:
-      '@typescript-eslint/project-service': 8.49.0(typescript@5.8.3)
-      '@typescript-eslint/tsconfig-utils': 8.49.0(typescript@5.8.3)
-      '@typescript-eslint/types': 8.49.0
-      '@typescript-eslint/visitor-keys': 8.49.0
-      debug: 4.4.3
-      minimatch: 9.0.5
-      semver: 7.7.3
-      tinyglobby: 0.2.15
-      ts-api-utils: 2.1.0(typescript@5.8.3)
-      typescript: 5.8.3
-    transitivePeerDependencies:
-      - supports-color
-
-  '@typescript-eslint/utils@8.48.1(eslint@9.39.1(jiti@2.5.1))(typescript@5.8.3)':
-    dependencies:
-      '@eslint-community/eslint-utils': 4.9.0(eslint@9.39.1(jiti@2.5.1))
-      '@typescript-eslint/scope-manager': 8.48.1
-      '@typescript-eslint/types': 8.48.1
-      '@typescript-eslint/typescript-estree': 8.48.1(typescript@5.8.3)
-      eslint: 9.39.1(jiti@2.5.1)
-      typescript: 5.8.3
-    transitivePeerDependencies:
-      - supports-color
-
-  '@typescript-eslint/utils@8.49.0(eslint@9.39.1(jiti@2.5.1))(typescript@5.8.3)':
-    dependencies:
-      '@eslint-community/eslint-utils': 4.9.0(eslint@9.39.1(jiti@2.5.1))
-      '@typescript-eslint/scope-manager': 8.49.0
-      '@typescript-eslint/types': 8.49.0
-      '@typescript-eslint/typescript-estree': 8.49.0(typescript@5.8.3)
-      eslint: 9.39.1(jiti@2.5.1)
-      typescript: 5.8.3
-    transitivePeerDependencies:
-      - supports-color
-
-  '@typescript-eslint/visitor-keys@8.48.1':
-    dependencies:
-      '@typescript-eslint/types': 8.48.1
-      eslint-visitor-keys: 4.2.1
-
-  '@typescript-eslint/visitor-keys@8.49.0':
-    dependencies:
-      '@typescript-eslint/types': 8.49.0
-      eslint-visitor-keys: 4.2.1
-
   '@ungap/structured-clone@1.3.0': {}
 
-  '@unrs/resolver-binding-android-arm-eabi@1.11.1':
-    optional: true
-
-  '@unrs/resolver-binding-android-arm64@1.11.1':
-    optional: true
-
-  '@unrs/resolver-binding-darwin-arm64@1.11.1':
-    optional: true
-
-  '@unrs/resolver-binding-darwin-x64@1.11.1':
-    optional: true
-
-  '@unrs/resolver-binding-freebsd-x64@1.11.1':
-    optional: true
-
-  '@unrs/resolver-binding-linux-arm-gnueabihf@1.11.1':
-    optional: true
-
-  '@unrs/resolver-binding-linux-arm-musleabihf@1.11.1':
-    optional: true
-
-  '@unrs/resolver-binding-linux-arm64-gnu@1.11.1':
-    optional: true
-
-  '@unrs/resolver-binding-linux-arm64-musl@1.11.1':
-    optional: true
-
-  '@unrs/resolver-binding-linux-ppc64-gnu@1.11.1':
-    optional: true
-
-  '@unrs/resolver-binding-linux-riscv64-gnu@1.11.1':
-    optional: true
-
-  '@unrs/resolver-binding-linux-riscv64-musl@1.11.1':
-    optional: true
-
-  '@unrs/resolver-binding-linux-s390x-gnu@1.11.1':
-    optional: true
-
-  '@unrs/resolver-binding-linux-x64-gnu@1.11.1':
-    optional: true
-
-  '@unrs/resolver-binding-linux-x64-musl@1.11.1':
-    optional: true
-
-  '@unrs/resolver-binding-wasm32-wasi@1.11.1':
+  '@vitest/coverage-v8@4.0.17(vitest@4.0.15(@opentelemetry/api@1.9.0)(@types/node@22.12.0)(jiti@2.6.1)(jsdom@26.1.0)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3))':
     dependencies:
-      '@napi-rs/wasm-runtime': 0.2.12
-    optional: true
-
-  '@unrs/resolver-binding-win32-arm64-msvc@1.11.1':
-    optional: true
-
-  '@unrs/resolver-binding-win32-ia32-msvc@1.11.1':
-    optional: true
-
-  '@unrs/resolver-binding-win32-x64-msvc@1.11.1':
-    optional: true
-
-  '@vitest/eslint-plugin@1.5.1(eslint@9.39.1(jiti@2.5.1))(typescript@5.8.3)(vitest@4.0.15(@opentelemetry/api@1.9.0)(@types/node@22.12.0)(jiti@2.5.1)(jsdom@25.0.1)(terser@5.43.1)(yaml@2.8.1))':
-    dependencies:
-      '@typescript-eslint/scope-manager': 8.49.0
-      '@typescript-eslint/utils': 8.49.0(eslint@9.39.1(jiti@2.5.1))(typescript@5.8.3)
-      eslint: 9.39.1(jiti@2.5.1)
-    optionalDependencies:
-      typescript: 5.8.3
-      vitest: 4.0.15(@opentelemetry/api@1.9.0)(@types/node@22.12.0)(jiti@2.5.1)(jsdom@25.0.1)(terser@5.43.1)(yaml@2.8.1)
-    transitivePeerDependencies:
-      - supports-color
+      '@bcoe/v8-coverage': 1.0.2
+      '@vitest/utils': 4.0.17
+      ast-v8-to-istanbul: 0.3.10
+      istanbul-lib-coverage: 3.2.2
+      istanbul-lib-report: 3.0.1
+      istanbul-reports: 3.2.0
+      magicast: 0.5.1
+      obug: 2.1.1
+      std-env: 3.10.0
+      tinyrainbow: 3.0.3
+      vitest: 4.0.15(@opentelemetry/api@1.9.0)(@types/node@22.12.0)(jiti@2.6.1)(jsdom@26.1.0)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3)
 
   '@vitest/expect@2.0.5':
     dependencies:
@@ -12685,21 +11678,21 @@ snapshots:
       chai: 6.2.1
       tinyrainbow: 3.0.3
 
-  '@vitest/mocker@3.2.4(vite@7.1.11(@types/node@22.12.0)(jiti@2.5.1)(terser@5.43.1)(yaml@2.8.1))':
+  '@vitest/mocker@3.2.4(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3))':
     dependencies:
       '@vitest/spy': 3.2.4
       estree-walker: 3.0.3
-      magic-string: 0.30.19
+      magic-string: 0.30.21
     optionalDependencies:
-      vite: 7.1.11(@types/node@22.12.0)(jiti@2.5.1)(terser@5.43.1)(yaml@2.8.1)
+      vite: 7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3)
 
-  '@vitest/mocker@4.0.15(vite@7.1.11(@types/node@22.12.0)(jiti@2.5.1)(terser@5.43.1)(yaml@2.8.1))':
+  '@vitest/mocker@4.0.15(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3))':
     dependencies:
       '@vitest/spy': 4.0.15
       estree-walker: 3.0.3
       magic-string: 0.30.21
     optionalDependencies:
-      vite: 7.1.11(@types/node@22.12.0)(jiti@2.5.1)(terser@5.43.1)(yaml@2.8.1)
+      vite: 7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3)
 
   '@vitest/pretty-format@2.0.5':
     dependencies:
@@ -12717,6 +11710,10 @@ snapshots:
     dependencies:
       tinyrainbow: 3.0.3
 
+  '@vitest/pretty-format@4.0.17':
+    dependencies:
+      tinyrainbow: 3.0.3
+
   '@vitest/runner@4.0.15':
     dependencies:
       '@vitest/utils': 4.0.15
@@ -12762,6 +11759,11 @@ snapshots:
       '@vitest/pretty-format': 4.0.15
       tinyrainbow: 3.0.3
 
+  '@vitest/utils@4.0.17':
+    dependencies:
+      '@vitest/pretty-format': 4.0.17
+      tinyrainbow: 3.0.3
+
   '@webassemblyjs/ast@1.14.1':
     dependencies:
       '@webassemblyjs/helper-numbers': 1.13.2
@@ -12851,57 +11853,36 @@ snapshots:
       mime-types: 2.1.35
       negotiator: 0.6.3
 
-  acorn-import-attributes@1.9.5(acorn@8.15.0):
-    dependencies:
-      acorn: 8.15.0
-
   acorn-import-phases@1.0.4(acorn@8.15.0):
     dependencies:
       acorn: 8.15.0
 
-  acorn-jsx@5.3.2(acorn@8.15.0):
-    dependencies:
-      acorn: 8.15.0
-
   acorn@8.15.0: {}
 
-  agent-base@6.0.2:
-    dependencies:
-      debug: 4.4.3
-    transitivePeerDependencies:
-      - supports-color
-
   agent-base@7.1.4:
     optional: true
 
-  ajv-formats@2.1.1(ajv@8.17.1):
+  ajv-formats@2.1.1(ajv@8.18.0):
     optionalDependencies:
-      ajv: 8.17.1
+      ajv: 8.18.0
 
-  ajv-keywords@3.5.2(ajv@6.12.6):
+  ajv-keywords@3.5.2(ajv@6.14.0):
     dependencies:
-      ajv: 6.12.6
+      ajv: 6.14.0
 
-  ajv-keywords@5.1.0(ajv@8.17.1):
+  ajv-keywords@5.1.0(ajv@8.18.0):
     dependencies:
-      ajv: 8.17.1
+      ajv: 8.18.0
       fast-deep-equal: 3.1.3
 
-  ajv@6.12.6:
+  ajv@6.14.0:
     dependencies:
       fast-deep-equal: 3.1.3
       fast-json-stable-stringify: 2.1.0
       json-schema-traverse: 0.4.1
       uri-js: 4.4.1
 
-  ajv@8.12.0:
-    dependencies:
-      fast-deep-equal: 3.1.3
-      json-schema-traverse: 1.0.0
-      require-from-string: 2.0.2
-      uri-js: 4.4.1
-
-  ajv@8.17.1:
+  ajv@8.18.0:
     dependencies:
       fast-deep-equal: 3.1.3
       fast-uri: 3.0.6
@@ -12932,18 +11913,14 @@ snapshots:
 
   ansi-styles@5.2.0: {}
 
-  ansi-styles@6.2.1: {}
-
   ansi-styles@6.2.3: {}
 
   ansis@4.2.0: {}
 
-  any-promise@1.3.0: {}
-
   anymatch@3.1.3:
     dependencies:
       normalize-path: 3.0.0
-      picomatch: 2.3.1
+      picomatch: 2.3.2
 
   arch@2.2.0: {}
 
@@ -12961,75 +11938,8 @@ snapshots:
 
   aria-query@5.3.2: {}
 
-  array-buffer-byte-length@1.0.2:
-    dependencies:
-      call-bound: 1.0.4
-      is-array-buffer: 3.0.5
-
   array-flatten@1.1.1: {}
 
-  array-includes@3.1.9:
-    dependencies:
-      call-bind: 1.0.8
-      call-bound: 1.0.4
-      define-properties: 1.2.1
-      es-abstract: 1.24.0
-      es-object-atoms: 1.1.1
-      get-intrinsic: 1.3.0
-      is-string: 1.1.1
-      math-intrinsics: 1.1.0
-
-  array.prototype.findlast@1.2.5:
-    dependencies:
-      call-bind: 1.0.8
-      define-properties: 1.2.1
-      es-abstract: 1.24.0
-      es-errors: 1.3.0
-      es-object-atoms: 1.1.1
-      es-shim-unscopables: 1.1.0
-
-  array.prototype.findlastindex@1.2.6:
-    dependencies:
-      call-bind: 1.0.8
-      call-bound: 1.0.4
-      define-properties: 1.2.1
-      es-abstract: 1.24.0
-      es-errors: 1.3.0
-      es-object-atoms: 1.1.1
-      es-shim-unscopables: 1.1.0
-
-  array.prototype.flat@1.3.3:
-    dependencies:
-      call-bind: 1.0.8
-      define-properties: 1.2.1
-      es-abstract: 1.24.0
-      es-shim-unscopables: 1.1.0
-
-  array.prototype.flatmap@1.3.3:
-    dependencies:
-      call-bind: 1.0.8
-      define-properties: 1.2.1
-      es-abstract: 1.24.0
-      es-shim-unscopables: 1.1.0
-
-  array.prototype.tosorted@1.1.4:
-    dependencies:
-      call-bind: 1.0.8
-      define-properties: 1.2.1
-      es-abstract: 1.24.0
-      es-errors: 1.3.0
-      es-shim-unscopables: 1.1.0
-
-  arraybuffer.prototype.slice@1.0.4:
-    dependencies:
-      array-buffer-byte-length: 1.0.2
-      call-bind: 1.0.8
-      define-properties: 1.2.1
-      es-abstract: 1.24.0
-      es-errors: 1.3.0
-      get-intrinsic: 1.3.0
-      is-array-buffer: 3.0.5
-
   assertion-error@2.0.1: {}
 
   ast-kit@2.2.0:
@@ -13037,8 +11947,6 @@ snapshots:
       '@babel/parser': 7.28.5
       pathe: 2.0.3
 
-  ast-types-flow@0.0.8: {}
-
   ast-types@0.14.2:
     dependencies:
       tslib: 2.8.1
@@ -13047,7 +11955,11 @@ snapshots:
     dependencies:
       tslib: 2.8.1
 
-  async-function@1.0.0: {}
+  ast-v8-to-istanbul@0.3.10:
+    dependencies:
+      '@jridgewell/trace-mapping': 0.3.31
+      estree-walker: 3.0.3
+      js-tokens: 9.0.1
 
   async-lock@1.4.1: {}
 
@@ -13059,7 +11971,7 @@ snapshots:
 
   autoprefixer@10.4.21(postcss@8.5.6):
     dependencies:
-      browserslist: 4.26.2
+      browserslist: 4.28.1
       caniuse-lite: 1.0.30001759
       fraction.js: 4.3.7
       normalize-range: 0.1.2
@@ -13071,24 +11983,20 @@ snapshots:
     dependencies:
       possible-typed-array-names: 1.1.0
 
-  axe-core@4.10.3: {}
-
-  axios@1.12.0:
+  axios@1.13.5:
     dependencies:
       follow-redirects: 1.15.11
-      form-data: 4.0.4
+      form-data: 4.0.5
       proxy-from-env: 1.1.0
     transitivePeerDependencies:
       - debug
 
-  axobject-query@4.1.0: {}
-
   babel-dead-code-elimination@1.0.10:
     dependencies:
-      '@babel/core': 7.28.3
-      '@babel/parser': 7.28.3
-      '@babel/traverse': 7.28.3
-      '@babel/types': 7.28.2
+      '@babel/core': 7.28.4
+      '@babel/parser': 7.28.5
+      '@babel/traverse': 7.28.4
+      '@babel/types': 7.28.5
     transitivePeerDependencies:
       - supports-color
 
@@ -13101,13 +12009,13 @@ snapshots:
 
   bail@2.0.2: {}
 
-  balanced-match@1.0.2: {}
+  balanced-match@4.0.4: {}
 
   base64-js@0.0.8: {}
 
   base64-js@1.5.1: {}
 
-  baseline-browser-mapping@2.8.4: {}
+  baseline-browser-mapping@2.9.19: {}
 
   basic-auth@2.0.1:
     dependencies:
@@ -13141,7 +12049,7 @@ snapshots:
       http-errors: 2.0.0
       iconv-lite: 0.4.24
       on-finished: 2.4.1
-      qs: 6.13.0
+      qs: 6.14.2
       raw-body: 2.5.2
       type-is: 1.6.18
       unpipe: 1.0.0
@@ -13161,9 +12069,9 @@ snapshots:
       widest-line: 4.0.1
       wrap-ansi: 8.1.0
 
-  brace-expansion@2.0.2:
+  brace-expansion@5.0.5:
     dependencies:
-      balanced-match: 1.0.2
+      balanced-match: 4.0.4
 
   braces@3.0.3:
     dependencies:
@@ -13179,13 +12087,13 @@ snapshots:
     dependencies:
       pako: 1.0.11
 
-  browserslist@4.26.2:
+  browserslist@4.28.1:
     dependencies:
-      baseline-browser-mapping: 2.8.4
+      baseline-browser-mapping: 2.9.19
       caniuse-lite: 1.0.30001759
-      electron-to-chromium: 1.5.218
-      node-releases: 2.0.21
-      update-browserslist-db: 1.1.3(browserslist@4.26.2)
+      electron-to-chromium: 1.5.286
+      node-releases: 2.0.27
+      update-browserslist-db: 1.2.3(browserslist@4.28.1)
 
   buffer-from@1.1.2: {}
 
@@ -13224,8 +12132,6 @@ snapshots:
       pascal-case: 3.1.2
       tslib: 2.8.1
 
-  camelcase-css@2.0.1: {}
-
   camelcase@7.0.1: {}
 
   caniuse-lite@1.0.30001759: {}
@@ -13307,6 +12213,8 @@ snapshots:
     optionalDependencies:
       fsevents: 2.3.3
 
+  chroma-js@3.2.0: {}
+
   chromatic@11.29.0: {}
 
   chrome-trace-event@1.0.4: {}
@@ -13394,6 +12302,11 @@ snapshots:
       color-convert: 1.9.3
       color-string: 1.9.1
 
+  color@4.2.3:
+    dependencies:
+      color-convert: 2.0.1
+      color-string: 1.9.1
+
   colorette@2.0.20: {}
 
   colorspace@1.1.4:
@@ -13409,14 +12322,10 @@ snapshots:
 
   comma-separated-tokens@2.0.3: {}
 
-  commander@11.1.0: {}
-
   commander@14.0.2: {}
 
   commander@2.20.3: {}
 
-  commander@4.1.1: {}
-
   commander@8.3.0: {}
 
   commondir@1.0.1: {}
@@ -13439,6 +12348,8 @@ snapshots:
 
   compute-scroll-into-view@3.1.1: {}
 
+  confbox@0.2.4: {}
+
   constant-case@3.0.4:
     dependencies:
       no-case: 3.0.4
@@ -13463,8 +12374,6 @@ snapshots:
 
   cookie@1.0.2: {}
 
-  core-js@3.45.1: {}
-
   cors@2.8.5:
     dependencies:
       object-assign: 4.1.1
@@ -13476,7 +12385,7 @@ snapshots:
       import-fresh: 3.3.1
       parse-json: 5.2.0
       path-type: 4.0.0
-      yaml: 1.10.2
+      yaml: 1.10.3
 
   create-react-class@15.7.0:
     dependencies:
@@ -13499,7 +12408,7 @@ snapshots:
 
   crypto-js@4.2.0: {}
 
-  css-loader@6.11.0(webpack@5.101.3(@swc/core@1.13.5(@swc/helpers@0.5.17))(esbuild@0.25.0)):
+  css-loader@6.11.0(webpack@5.104.1(@swc/core@1.13.5(@swc/helpers@0.5.17))):
     dependencies:
       icss-utils: 5.1.0(postcss@8.5.6)
       postcss: 8.5.6
@@ -13508,9 +12417,9 @@ snapshots:
       postcss-modules-scope: 3.2.1(postcss@8.5.6)
       postcss-modules-values: 4.0.0(postcss@8.5.6)
       postcss-value-parser: 4.2.0
-      semver: 7.7.3
+      semver: 7.7.4
     optionalDependencies:
-      webpack: 5.101.3(@swc/core@1.13.5(@swc/helpers@0.5.17))(esbuild@0.25.0)
+      webpack: 5.104.1(@swc/core@1.13.5(@swc/helpers@0.5.17))
 
   css-select@4.3.0:
     dependencies:
@@ -13585,32 +12494,12 @@ snapshots:
 
   d3-timer@3.0.1: {}
 
-  damerau-levenshtein@1.0.8: {}
-
   data-urls@5.0.0:
     dependencies:
       whatwg-mimetype: 4.0.0
       whatwg-url: 14.2.0
     optional: true
 
-  data-view-buffer@1.0.2:
-    dependencies:
-      call-bound: 1.0.4
-      es-errors: 1.3.0
-      is-data-view: 1.0.2
-
-  data-view-byte-length@1.0.2:
-    dependencies:
-      call-bound: 1.0.4
-      es-errors: 1.3.0
-      is-data-view: 1.0.2
-
-  data-view-byte-offset@1.0.1:
-    dependencies:
-      call-bound: 1.0.4
-      es-errors: 1.3.0
-      is-data-view: 1.0.2
-
   date-fns-jalali@4.1.0-0: {}
 
   date-fns@4.1.0: {}
@@ -13619,10 +12508,6 @@ snapshots:
     dependencies:
       ms: 2.0.0
 
-  debug@3.2.7:
-    dependencies:
-      ms: 2.1.3
-
   debug@4.4.3:
     dependencies:
       ms: 2.1.3
@@ -13654,8 +12539,6 @@ snapshots:
 
   deep-extend@0.6.0: {}
 
-  deep-is@0.1.4: {}
-
   deepmerge@4.3.1: {}
 
   define-data-property@1.1.4:
@@ -13672,7 +12555,7 @@ snapshots:
       has-property-descriptors: 1.0.2
       object-keys: 1.1.1
 
-  defu@6.1.4: {}
+  defu@6.1.5: {}
 
   delayed-stream@1.0.0: {}
 
@@ -13700,17 +12583,7 @@ snapshots:
 
   dfa@1.2.0: {}
 
-  didyoumean@1.2.2: {}
-
-  diff@5.2.0: {}
-
-  diff@8.0.2: {}
-
-  dlv@1.1.3: {}
-
-  doctrine@2.1.0:
-    dependencies:
-      esutils: 2.0.3
+  diff@5.2.2: {}
 
   doctrine@3.0.0:
     dependencies:
@@ -13770,9 +12643,7 @@ snapshots:
       no-case: 3.0.4
       tslib: 2.8.1
 
-  dotenv@16.6.1: {}
-
-  dotenv@17.2.1: {}
+  dotenv@16.4.7: {}
 
   dts-resolver@2.1.3: {}
 
@@ -13784,16 +12655,14 @@ snapshots:
 
   eastasianwidth@0.2.0: {}
 
-  eciesjs@0.4.15:
-    dependencies:
-      '@ecies/ciphers': 0.2.4(@noble/ciphers@1.3.0)
-      '@noble/ciphers': 1.3.0
-      '@noble/curves': 1.9.7
-      '@noble/hashes': 1.8.0
-
   ee-first@1.1.1: {}
 
-  electron-to-chromium@1.5.218: {}
+  effect@3.20.0:
+    dependencies:
+      '@standard-schema/spec': 1.0.0
+      fast-check: 3.23.2
+
+  electron-to-chromium@1.5.286: {}
 
   element-resize-detector@1.2.4:
     dependencies:
@@ -13845,94 +12714,18 @@ snapshots:
 
   environment@1.1.0: {}
 
-  err-code@2.0.3: {}
-
   error-ex@1.3.4:
     dependencies:
       is-arrayish: 0.2.1
 
-  es-abstract@1.24.0:
-    dependencies:
-      array-buffer-byte-length: 1.0.2
-      arraybuffer.prototype.slice: 1.0.4
-      available-typed-arrays: 1.0.7
-      call-bind: 1.0.8
-      call-bound: 1.0.4
-      data-view-buffer: 1.0.2
-      data-view-byte-length: 1.0.2
-      data-view-byte-offset: 1.0.1
-      es-define-property: 1.0.1
-      es-errors: 1.3.0
-      es-object-atoms: 1.1.1
-      es-set-tostringtag: 2.1.0
-      es-to-primitive: 1.3.0
-      function.prototype.name: 1.1.8
-      get-intrinsic: 1.3.0
-      get-proto: 1.0.1
-      get-symbol-description: 1.1.0
-      globalthis: 1.0.4
-      gopd: 1.2.0
-      has-property-descriptors: 1.0.2
-      has-proto: 1.2.0
-      has-symbols: 1.1.0
-      hasown: 2.0.2
-      internal-slot: 1.1.0
-      is-array-buffer: 3.0.5
-      is-callable: 1.2.7
-      is-data-view: 1.0.2
-      is-negative-zero: 2.0.3
-      is-regex: 1.2.1
-      is-set: 2.0.3
-      is-shared-array-buffer: 1.0.4
-      is-string: 1.1.1
-      is-typed-array: 1.1.15
-      is-weakref: 1.1.1
-      math-intrinsics: 1.1.0
-      object-inspect: 1.13.4
-      object-keys: 1.1.1
-      object.assign: 4.1.7
-      own-keys: 1.0.1
-      regexp.prototype.flags: 1.5.4
-      safe-array-concat: 1.1.3
-      safe-push-apply: 1.0.0
-      safe-regex-test: 1.1.0
-      set-proto: 1.0.0
-      stop-iteration-iterator: 1.1.0
-      string.prototype.trim: 1.2.10
-      string.prototype.trimend: 1.0.9
-      string.prototype.trimstart: 1.0.8
-      typed-array-buffer: 1.0.3
-      typed-array-byte-length: 1.0.3
-      typed-array-byte-offset: 1.0.4
-      typed-array-length: 1.0.7
-      unbox-primitive: 1.1.0
-      which-typed-array: 1.1.19
-
   es-define-property@1.0.1: {}
 
   es-errors@1.3.0: {}
 
-  es-iterator-helpers@1.2.1:
-    dependencies:
-      call-bind: 1.0.8
-      call-bound: 1.0.4
-      define-properties: 1.2.1
-      es-abstract: 1.24.0
-      es-errors: 1.3.0
-      es-set-tostringtag: 2.1.0
-      function-bind: 1.1.2
-      get-intrinsic: 1.3.0
-      globalthis: 1.0.4
-      gopd: 1.2.0
-      has-property-descriptors: 1.0.2
-      has-proto: 1.2.0
-      has-symbols: 1.1.0
-      internal-slot: 1.1.0
-      iterator.prototype: 1.1.5
-      safe-array-concat: 1.1.3
-
   es-module-lexer@1.7.0: {}
 
+  es-module-lexer@2.0.0: {}
+
   es-object-atoms@1.1.1:
     dependencies:
       es-errors: 1.3.0
@@ -13944,16 +12737,6 @@ snapshots:
       has-tostringtag: 1.0.2
       hasown: 2.0.2
 
-  es-shim-unscopables@1.1.0:
-    dependencies:
-      hasown: 2.0.2
-
-  es-to-primitive@1.3.0:
-    dependencies:
-      is-callable: 1.2.7
-      is-date-object: 1.1.0
-      is-symbol: 1.1.1
-
   esbuild-register@3.6.0(esbuild@0.25.0):
     dependencies:
       debug: 4.4.3
@@ -13999,244 +12782,13 @@ snapshots:
 
   escape-string-regexp@5.0.0: {}
 
-  eslint-compat-utils@0.5.1(eslint@9.39.1(jiti@2.5.1)):
-    dependencies:
-      eslint: 9.39.1(jiti@2.5.1)
-      semver: 7.7.3
-
-  eslint-config-prettier@10.1.8(eslint@9.39.1(jiti@2.5.1)):
-    dependencies:
-      eslint: 9.39.1(jiti@2.5.1)
-
-  eslint-import-context@0.1.9(unrs-resolver@1.11.1):
-    dependencies:
-      get-tsconfig: 4.10.1
-      stable-hash-x: 0.2.0
-    optionalDependencies:
-      unrs-resolver: 1.11.1
-
-  eslint-import-resolver-node@0.3.9:
-    dependencies:
-      debug: 3.2.7
-      is-core-module: 2.16.1
-      resolve: 1.22.10
-    transitivePeerDependencies:
-      - supports-color
-
-  eslint-import-resolver-typescript@4.4.4(eslint-plugin-import@2.32.0)(eslint@9.39.1(jiti@2.5.1)):
-    dependencies:
-      debug: 4.4.3
-      eslint: 9.39.1(jiti@2.5.1)
-      eslint-import-context: 0.1.9(unrs-resolver@1.11.1)
-      get-tsconfig: 4.10.1
-      is-bun-module: 2.0.0
-      stable-hash-x: 0.2.0
-      tinyglobby: 0.2.15
-      unrs-resolver: 1.11.1
-    optionalDependencies:
-      eslint-plugin-import: 2.32.0(@typescript-eslint/parser@8.48.1(eslint@9.39.1(jiti@2.5.1))(typescript@5.8.3))(eslint-import-resolver-typescript@4.4.4)(eslint@9.39.1(jiti@2.5.1))
-    transitivePeerDependencies:
-      - supports-color
-
-  eslint-module-utils@2.12.1(@typescript-eslint/parser@8.48.1(eslint@9.39.1(jiti@2.5.1))(typescript@5.8.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@4.4.4)(eslint@9.39.1(jiti@2.5.1)):
-    dependencies:
-      debug: 3.2.7
-    optionalDependencies:
-      '@typescript-eslint/parser': 8.48.1(eslint@9.39.1(jiti@2.5.1))(typescript@5.8.3)
-      eslint: 9.39.1(jiti@2.5.1)
-      eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 4.4.4(eslint-plugin-import@2.32.0)(eslint@9.39.1(jiti@2.5.1))
-    transitivePeerDependencies:
-      - supports-color
-
-  eslint-plugin-es-x@7.8.0(eslint@9.39.1(jiti@2.5.1)):
-    dependencies:
-      '@eslint-community/eslint-utils': 4.9.0(eslint@9.39.1(jiti@2.5.1))
-      '@eslint-community/regexpp': 4.12.1
-      eslint: 9.39.1(jiti@2.5.1)
-      eslint-compat-utils: 0.5.1(eslint@9.39.1(jiti@2.5.1))
-
-  eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.48.1(eslint@9.39.1(jiti@2.5.1))(typescript@5.8.3))(eslint-import-resolver-typescript@4.4.4)(eslint@9.39.1(jiti@2.5.1)):
-    dependencies:
-      '@rtsao/scc': 1.1.0
-      array-includes: 3.1.9
-      array.prototype.findlastindex: 1.2.6
-      array.prototype.flat: 1.3.3
-      array.prototype.flatmap: 1.3.3
-      debug: 3.2.7
-      doctrine: 2.1.0
-      eslint: 9.39.1(jiti@2.5.1)
-      eslint-import-resolver-node: 0.3.9
-      eslint-module-utils: 2.12.1(@typescript-eslint/parser@8.48.1(eslint@9.39.1(jiti@2.5.1))(typescript@5.8.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@4.4.4)(eslint@9.39.1(jiti@2.5.1))
-      hasown: 2.0.2
-      is-core-module: 2.16.1
-      is-glob: 4.0.3
-      minimatch: 3.1.2
-      object.fromentries: 2.0.8
-      object.groupby: 1.0.3
-      object.values: 1.2.1
-      semver: 6.3.1
-      string.prototype.trimend: 1.0.9
-      tsconfig-paths: 3.15.0
-    optionalDependencies:
-      '@typescript-eslint/parser': 8.48.1(eslint@9.39.1(jiti@2.5.1))(typescript@5.8.3)
-    transitivePeerDependencies:
-      - eslint-import-resolver-typescript
-      - eslint-import-resolver-webpack
-      - supports-color
-
-  eslint-plugin-jsx-a11y@6.10.2(eslint@9.39.1(jiti@2.5.1)):
-    dependencies:
-      aria-query: 5.3.2
-      array-includes: 3.1.9
-      array.prototype.flatmap: 1.3.3
-      ast-types-flow: 0.0.8
-      axe-core: 4.10.3
-      axobject-query: 4.1.0
-      damerau-levenshtein: 1.0.8
-      emoji-regex: 9.2.2
-      eslint: 9.39.1(jiti@2.5.1)
-      hasown: 2.0.2
-      jsx-ast-utils: 3.3.5
-      language-tags: 1.0.9
-      minimatch: 3.1.2
-      object.fromentries: 2.0.8
-      safe-regex-test: 1.1.0
-      string.prototype.includes: 2.0.1
-
-  eslint-plugin-n@17.23.1(eslint@9.39.1(jiti@2.5.1))(typescript@5.8.3):
-    dependencies:
-      '@eslint-community/eslint-utils': 4.9.0(eslint@9.39.1(jiti@2.5.1))
-      enhanced-resolve: 5.18.3
-      eslint: 9.39.1(jiti@2.5.1)
-      eslint-plugin-es-x: 7.8.0(eslint@9.39.1(jiti@2.5.1))
-      get-tsconfig: 4.10.1
-      globals: 15.15.0
-      globrex: 0.1.2
-      ignore: 5.3.2
-      semver: 7.7.2
-      ts-declaration-location: 1.0.7(typescript@5.8.3)
-    transitivePeerDependencies:
-      - typescript
-
-  eslint-plugin-promise@7.2.1(eslint@9.39.1(jiti@2.5.1)):
-    dependencies:
-      '@eslint-community/eslint-utils': 4.9.0(eslint@9.39.1(jiti@2.5.1))
-      eslint: 9.39.1(jiti@2.5.1)
-
-  eslint-plugin-react-hooks@7.0.1(eslint@9.39.1(jiti@2.5.1)):
-    dependencies:
-      '@babel/core': 7.28.3
-      '@babel/parser': 7.28.3
-      eslint: 9.39.1(jiti@2.5.1)
-      hermes-parser: 0.25.1
-      zod: 3.25.76
-      zod-validation-error: 4.0.2(zod@3.25.76)
-    transitivePeerDependencies:
-      - supports-color
-
-  eslint-plugin-react-refresh@0.4.24(eslint@9.39.1(jiti@2.5.1)):
-    dependencies:
-      eslint: 9.39.1(jiti@2.5.1)
-
-  eslint-plugin-react@7.37.5(eslint@9.39.1(jiti@2.5.1)):
-    dependencies:
-      array-includes: 3.1.9
-      array.prototype.findlast: 1.2.5
-      array.prototype.flatmap: 1.3.3
-      array.prototype.tosorted: 1.1.4
-      doctrine: 2.1.0
-      es-iterator-helpers: 1.2.1
-      eslint: 9.39.1(jiti@2.5.1)
-      estraverse: 5.3.0
-      hasown: 2.0.2
-      jsx-ast-utils: 3.3.5
-      minimatch: 3.1.2
-      object.entries: 1.1.9
-      object.fromentries: 2.0.8
-      object.values: 1.2.1
-      prop-types: 15.8.1
-      resolve: 2.0.0-next.5
-      semver: 6.3.1
-      string.prototype.matchall: 4.0.12
-      string.prototype.repeat: 1.0.0
-
-  eslint-plugin-storybook@10.1.4(eslint@9.39.1(jiti@2.5.1))(storybook@9.1.10(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.5.1)(terser@5.43.1)(yaml@2.8.1)))(typescript@5.8.3):
-    dependencies:
-      '@typescript-eslint/utils': 8.48.1(eslint@9.39.1(jiti@2.5.1))(typescript@5.8.3)
-      eslint: 9.39.1(jiti@2.5.1)
-      storybook: 9.1.10(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.5.1)(terser@5.43.1)(yaml@2.8.1))
-    transitivePeerDependencies:
-      - supports-color
-      - typescript
-
   eslint-scope@5.1.1:
     dependencies:
       esrecurse: 4.3.0
       estraverse: 4.3.0
 
-  eslint-scope@8.4.0:
-    dependencies:
-      esrecurse: 4.3.0
-      estraverse: 5.3.0
-
-  eslint-visitor-keys@3.4.3: {}
-
-  eslint-visitor-keys@4.2.1: {}
-
-  eslint@9.39.1(jiti@2.5.1):
-    dependencies:
-      '@eslint-community/eslint-utils': 4.9.0(eslint@9.39.1(jiti@2.5.1))
-      '@eslint-community/regexpp': 4.12.1
-      '@eslint/config-array': 0.21.1
-      '@eslint/config-helpers': 0.4.2
-      '@eslint/core': 0.17.0
-      '@eslint/eslintrc': 3.3.1
-      '@eslint/js': 9.39.1
-      '@eslint/plugin-kit': 0.4.1
-      '@humanfs/node': 0.16.7
-      '@humanwhocodes/module-importer': 1.0.1
-      '@humanwhocodes/retry': 0.4.3
-      '@types/estree': 1.0.8
-      ajv: 6.12.6
-      chalk: 4.1.2
-      cross-spawn: 7.0.6
-      debug: 4.4.3
-      escape-string-regexp: 4.0.0
-      eslint-scope: 8.4.0
-      eslint-visitor-keys: 4.2.1
-      espree: 10.4.0
-      esquery: 1.6.0
-      esutils: 2.0.3
-      fast-deep-equal: 3.1.3
-      file-entry-cache: 8.0.0
-      find-up: 5.0.0
-      glob-parent: 6.0.2
-      ignore: 5.3.2
-      imurmurhash: 0.1.4
-      is-glob: 4.0.3
-      json-stable-stringify-without-jsonify: 1.0.1
-      lodash.merge: 4.6.2
-      minimatch: 3.1.2
-      natural-compare: 1.4.0
-      optionator: 0.9.4
-    optionalDependencies:
-      jiti: 2.5.1
-    transitivePeerDependencies:
-      - supports-color
-
-  espree@10.4.0:
-    dependencies:
-      acorn: 8.15.0
-      acorn-jsx: 5.3.2(acorn@8.15.0)
-      eslint-visitor-keys: 4.2.1
-
   esprima@4.0.1: {}
 
-  esquery@1.6.0:
-    dependencies:
-      estraverse: 5.3.0
-
   esrecurse@4.3.0:
     dependencies:
       estraverse: 5.3.0
@@ -14284,7 +12836,7 @@ snapshots:
   express-winston@4.2.0(winston@3.17.0):
     dependencies:
       chalk: 2.4.2
-      lodash: 4.17.21
+      lodash: 4.17.23
       winston: 3.17.0
 
   express-ws@5.0.2(express@4.22.0):
@@ -14316,9 +12868,9 @@ snapshots:
       methods: 1.1.2
       on-finished: 2.4.1
       parseurl: 1.3.3
-      path-to-regexp: 0.1.12
+      path-to-regexp: 0.1.13
       proxy-addr: 2.0.7
-      qs: 6.14.0
+      qs: 6.14.2
       range-parser: 1.2.1
       safe-buffer: 5.2.1
       send: 0.19.0
@@ -14331,53 +12883,37 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  exsolve@1.0.8: {}
+
   extend@3.0.2: {}
 
+  fast-check@3.23.2:
+    dependencies:
+      pure-rand: 6.1.0
+
   fast-deep-equal@3.1.3: {}
 
   fast-equals@5.2.2: {}
 
-  fast-glob@3.3.3:
-    dependencies:
-      '@nodelib/fs.stat': 2.0.5
-      '@nodelib/fs.walk': 1.2.8
-      glob-parent: 5.1.2
-      merge2: 1.4.1
-      micromatch: 4.0.8
-
   fast-json-parse@1.0.3: {}
 
   fast-json-stable-stringify@2.1.0: {}
 
-  fast-levenshtein@2.0.6: {}
-
   fast-uri@3.0.6: {}
 
-  fastq@1.19.1:
-    dependencies:
-      reusify: 1.1.0
-
-  fdir@6.5.0(picomatch@4.0.3):
+  fdir@6.5.0(picomatch@2.3.2):
     optionalDependencies:
-      picomatch: 4.0.3
+      picomatch: 2.3.2
 
   fecha@4.2.3: {}
 
-  fflate@0.4.8: {}
-
-  fflate@0.8.2: {}
-
-  file-entry-cache@8.0.0:
-    dependencies:
-      flat-cache: 4.0.1
-
   file-selector@2.1.2:
     dependencies:
       tslib: 2.8.1
 
-  file-type@21.0.0:
+  file-type@21.3.3:
     dependencies:
-      '@tokenizer/inflate': 0.2.7
+      '@tokenizer/inflate': 0.4.1
       strtok3: 10.3.4
       token-types: 6.1.1
       uint8array-extras: 1.5.0
@@ -14414,6 +12950,8 @@ snapshots:
       make-dir: 3.1.0
       pkg-dir: 4.2.0
 
+  find-my-way-ts@0.1.6: {}
+
   find-up@3.0.0:
     dependencies:
       locate-path: 3.0.0
@@ -14442,16 +12980,11 @@ snapshots:
 
   flat-cache@3.2.0:
     dependencies:
-      flatted: 3.3.3
+      flatted: 3.4.2
       keyv: 4.5.4
       rimraf: 3.0.2
 
-  flat-cache@4.0.1:
-    dependencies:
-      flatted: 3.3.3
-      keyv: 4.5.4
-
-  flatted@3.3.3: {}
+  flatted@3.4.2: {}
 
   flow-parser@0.293.0: {}
 
@@ -14482,7 +13015,7 @@ snapshots:
       cross-spawn: 7.0.6
       signal-exit: 4.1.0
 
-  fork-ts-checker-webpack-plugin@8.0.0(typescript@5.8.3)(webpack@5.101.3(@swc/core@1.13.5(@swc/helpers@0.5.17))(esbuild@0.25.0)):
+  fork-ts-checker-webpack-plugin@8.0.0(typescript@5.8.3)(webpack@5.104.1(@swc/core@1.13.5(@swc/helpers@0.5.17))):
     dependencies:
       '@babel/code-frame': 7.27.1
       chalk: 4.1.2
@@ -14491,15 +13024,15 @@ snapshots:
       deepmerge: 4.3.1
       fs-extra: 10.1.0
       memfs: 3.5.3
-      minimatch: 3.1.2
+      minimatch: 3.1.4
       node-abort-controller: 3.1.1
       schema-utils: 3.3.0
-      semver: 7.7.3
+      semver: 7.7.4
       tapable: 2.3.0
       typescript: 5.8.3
-      webpack: 5.101.3(@swc/core@1.13.5(@swc/helpers@0.5.17))(esbuild@0.25.0)
+      webpack: 5.104.1(@swc/core@1.13.5(@swc/helpers@0.5.17))
 
-  form-data@4.0.4:
+  form-data@4.0.5:
     dependencies:
       asynckit: 0.4.0
       combined-stream: 1.0.8
@@ -14507,8 +13040,6 @@ snapshots:
       hasown: 2.0.2
       mime-types: 2.1.35
 
-  forwarded-parse@2.1.2: {}
-
   forwarded@0.2.0: {}
 
   fraction.js@4.3.7: {}
@@ -14550,15 +13081,6 @@ snapshots:
 
   function-bind@1.1.2: {}
 
-  function.prototype.name@1.1.8:
-    dependencies:
-      call-bind: 1.0.8
-      call-bound: 1.0.4
-      define-properties: 1.2.1
-      functions-have-names: 1.2.3
-      hasown: 2.0.2
-      is-callable: 1.2.7
-
   functions-have-names@1.2.3: {}
 
   gensync@1.0.0-beta.2: {}
@@ -14593,17 +13115,7 @@ snapshots:
 
   get-stream@6.0.1: {}
 
-  get-symbol-description@1.1.0:
-    dependencies:
-      call-bound: 1.0.4
-      es-errors: 1.3.0
-      get-intrinsic: 1.3.0
-
-  get-tsconfig@4.10.1:
-    dependencies:
-      resolve-pkg-maps: 1.0.0
-
-  get-tsconfig@4.13.0:
+  get-tsconfig@4.13.7:
     dependencies:
       resolve-pkg-maps: 1.0.0
 
@@ -14611,44 +13123,25 @@ snapshots:
     dependencies:
       is-glob: 4.0.3
 
-  glob-parent@6.0.2:
-    dependencies:
-      is-glob: 4.0.3
-
   glob-to-regexp@0.4.1: {}
 
   glob@11.1.0:
     dependencies:
       foreground-child: 3.3.1
       jackspeak: 4.1.1
-      minimatch: 10.1.1
+      minimatch: 10.2.3
       minipass: 7.1.2
       package-json-from-dist: 1.0.1
       path-scurry: 2.0.0
 
-  globals@14.0.0: {}
-
-  globals@15.15.0: {}
-
-  globals@16.5.0: {}
-
-  globalthis@1.0.4:
-    dependencies:
-      define-properties: 1.2.1
-      gopd: 1.2.0
-
   globrex@0.1.2: {}
 
   gopd@1.2.0: {}
 
   graceful-fs@4.2.11: {}
 
-  graphemer@1.4.0: {}
-
   gud@1.0.0: {}
 
-  has-bigints@1.1.0: {}
-
   has-flag@3.0.0: {}
 
   has-flag@4.0.0: {}
@@ -14657,10 +13150,6 @@ snapshots:
     dependencies:
       es-define-property: 1.0.1
 
-  has-proto@1.2.0:
-    dependencies:
-      dunder-proto: 1.0.1
-
   has-symbols@1.1.0: {}
 
   has-tostringtag@1.0.2:
@@ -14791,24 +13280,10 @@ snapshots:
 
   helmet@7.2.0: {}
 
-  hermes-estree@0.25.1: {}
-
-  hermes-parser@0.25.1:
-    dependencies:
-      hermes-estree: 0.25.1
-
   highlight.js@11.11.1: {}
 
-  hoist-non-react-statics@3.3.2:
-    dependencies:
-      react-is: 16.13.1
-
   hookable@5.5.3: {}
 
-  hosted-git-info@6.1.3:
-    dependencies:
-      lru-cache: 7.18.3
-
   hsl-to-hex@1.0.0:
     dependencies:
       hsl-to-rgb-for-reals: 1.1.1
@@ -14822,6 +13297,8 @@ snapshots:
 
   html-entities@2.6.0: {}
 
+  html-escaper@2.0.2: {}
+
   html-minifier-terser@6.1.0:
     dependencies:
       camel-case: 4.1.2
@@ -14834,15 +13311,15 @@ snapshots:
 
   html-void-elements@3.0.0: {}
 
-  html-webpack-plugin@5.6.4(webpack@5.101.3(@swc/core@1.13.5(@swc/helpers@0.5.17))(esbuild@0.25.0)):
+  html-webpack-plugin@5.6.4(webpack@5.104.1(@swc/core@1.13.5(@swc/helpers@0.5.17))):
     dependencies:
       '@types/html-minifier-terser': 6.1.0
       html-minifier-terser: 6.1.0
-      lodash: 4.17.21
+      lodash: 4.17.23
       pretty-error: 4.0.0
       tapable: 2.3.0
     optionalDependencies:
-      webpack: 5.101.3(@swc/core@1.13.5(@swc/helpers@0.5.17))(esbuild@0.25.0)
+      webpack: 5.104.1(@swc/core@1.13.5(@swc/helpers@0.5.17))
 
   htmlparser2@6.1.0:
     dependencies:
@@ -14874,13 +13351,6 @@ snapshots:
       - supports-color
     optional: true
 
-  https-proxy-agent@5.0.1:
-    dependencies:
-      agent-base: 6.0.2
-      debug: 4.4.3
-    transitivePeerDependencies:
-      - supports-color
-
   https-proxy-agent@7.0.6:
     dependencies:
       agent-base: 7.1.4
@@ -14910,10 +13380,6 @@ snapshots:
 
   ieee754@1.2.1: {}
 
-  ignore@5.3.2: {}
-
-  ignore@7.0.5: {}
-
   imagesloaded@4.1.4:
     dependencies:
       ev-emitter: 1.1.1
@@ -14923,13 +13389,6 @@ snapshots:
       parent-module: 1.0.1
       resolve-from: 4.0.0
 
-  import-in-the-middle@2.0.0:
-    dependencies:
-      acorn: 8.15.0
-      acorn-import-attributes: 1.9.5(acorn@8.15.0)
-      cjs-module-lexer: 1.4.3
-      module-details-from-path: 1.0.4
-
   imurmurhash@0.1.4: {}
 
   indent-string@4.0.0: {}
@@ -14940,12 +13399,6 @@ snapshots:
 
   inline-style-parser@0.1.1: {}
 
-  internal-slot@1.1.0:
-    dependencies:
-      es-errors: 1.3.0
-      hasown: 2.0.2
-      side-channel: 1.1.0
-
   internmap@2.0.3: {}
 
   intl-messageformat@10.7.16:
@@ -14992,55 +13445,22 @@ snapshots:
       call-bound: 1.0.4
       has-tostringtag: 1.0.2
 
-  is-array-buffer@3.0.5:
-    dependencies:
-      call-bind: 1.0.8
-      call-bound: 1.0.4
-      get-intrinsic: 1.3.0
-
   is-arrayish@0.2.1: {}
 
   is-arrayish@0.3.4: {}
 
-  is-async-function@2.1.1:
-    dependencies:
-      async-function: 1.0.0
-      call-bound: 1.0.4
-      get-proto: 1.0.1
-      has-tostringtag: 1.0.2
-      safe-regex-test: 1.1.0
-
-  is-bigint@1.1.0:
-    dependencies:
-      has-bigints: 1.1.0
-
   is-binary-path@2.1.0:
     dependencies:
       binary-extensions: 2.3.0
 
-  is-boolean-object@1.2.2:
-    dependencies:
-      call-bound: 1.0.4
-      has-tostringtag: 1.0.2
-
   is-buffer@2.0.5: {}
 
-  is-bun-module@2.0.0:
-    dependencies:
-      semver: 7.7.3
-
   is-callable@1.2.7: {}
 
   is-core-module@2.16.1:
     dependencies:
       hasown: 2.0.2
 
-  is-data-view@1.0.2:
-    dependencies:
-      call-bound: 1.0.4
-      get-intrinsic: 1.3.0
-      is-typed-array: 1.1.15
-
   is-date-object@1.1.0:
     dependencies:
       call-bound: 1.0.4
@@ -15052,10 +13472,6 @@ snapshots:
 
   is-extglob@2.1.1: {}
 
-  is-finalizationregistry@1.1.1:
-    dependencies:
-      call-bound: 1.0.4
-
   is-fullwidth-code-point@3.0.0: {}
 
   is-fullwidth-code-point@5.1.0:
@@ -15073,15 +13489,6 @@ snapshots:
     dependencies:
       is-extglob: 2.1.1
 
-  is-map@2.0.3: {}
-
-  is-negative-zero@2.0.3: {}
-
-  is-number-object@1.1.1:
-    dependencies:
-      call-bound: 1.0.4
-      has-tostringtag: 1.0.2
-
   is-number@7.0.0: {}
 
   is-plain-obj@4.1.0: {}
@@ -15104,66 +13511,38 @@ snapshots:
       has-tostringtag: 1.0.2
       hasown: 2.0.2
 
-  is-set@2.0.3: {}
-
-  is-shared-array-buffer@1.0.4:
-    dependencies:
-      call-bound: 1.0.4
-
   is-stream@2.0.1: {}
 
-  is-string@1.1.1:
-    dependencies:
-      call-bound: 1.0.4
-      has-tostringtag: 1.0.2
-
-  is-symbol@1.1.1:
-    dependencies:
-      call-bound: 1.0.4
-      has-symbols: 1.1.0
-      safe-regex-test: 1.1.0
-
   is-typed-array@1.1.15:
     dependencies:
       which-typed-array: 1.1.19
 
   is-url@1.2.4: {}
 
-  is-weakmap@2.0.2: {}
-
-  is-weakref@1.1.1:
-    dependencies:
-      call-bound: 1.0.4
-
-  is-weakset@2.0.4:
-    dependencies:
-      call-bound: 1.0.4
-      get-intrinsic: 1.3.0
-
   is-wsl@2.2.0:
     dependencies:
       is-docker: 2.2.1
 
-  isarray@2.0.5: {}
-
   isbot@5.1.31: {}
 
   isexe@2.0.0: {}
 
-  isexe@3.1.1: {}
-
   isobject@3.0.1: {}
 
   isomorphic.js@0.2.5: {}
 
-  iterator.prototype@1.1.5:
+  istanbul-lib-coverage@3.2.2: {}
+
+  istanbul-lib-report@3.0.1:
     dependencies:
-      define-data-property: 1.1.4
-      es-object-atoms: 1.1.1
-      get-intrinsic: 1.3.0
-      get-proto: 1.0.1
-      has-symbols: 1.1.0
-      set-function-name: 2.0.2
+      istanbul-lib-coverage: 3.2.2
+      make-dir: 4.0.0
+      supports-color: 7.2.0
+
+  istanbul-reports@3.2.0:
+    dependencies:
+      html-escaper: 2.0.2
+      istanbul-lib-report: 3.0.1
 
   jackspeak@4.1.1:
     dependencies:
@@ -15179,28 +13558,24 @@ snapshots:
       merge-stream: 2.0.0
       supports-color: 8.1.1
 
-  jiti@1.21.7: {}
-
-  jiti@2.5.1: {}
+  jiti@2.6.1: {}
 
   js-tokens@4.0.0: {}
 
-  js-yaml@4.1.1:
-    dependencies:
-      argparse: 2.0.1
+  js-tokens@9.0.1: {}
 
   jscodeshift@17.3.0:
     dependencies:
-      '@babel/core': 7.28.3
-      '@babel/parser': 7.28.3
-      '@babel/plugin-transform-class-properties': 7.27.1(@babel/core@7.28.3)
-      '@babel/plugin-transform-modules-commonjs': 7.27.1(@babel/core@7.28.3)
-      '@babel/plugin-transform-nullish-coalescing-operator': 7.27.1(@babel/core@7.28.3)
-      '@babel/plugin-transform-optional-chaining': 7.28.5(@babel/core@7.28.3)
-      '@babel/plugin-transform-private-methods': 7.27.1(@babel/core@7.28.3)
-      '@babel/preset-flow': 7.27.1(@babel/core@7.28.3)
-      '@babel/preset-typescript': 7.27.1(@babel/core@7.28.3)
-      '@babel/register': 7.28.3(@babel/core@7.28.3)
+      '@babel/core': 7.28.4
+      '@babel/parser': 7.28.5
+      '@babel/plugin-transform-class-properties': 7.27.1(@babel/core@7.28.4)
+      '@babel/plugin-transform-modules-commonjs': 7.27.1(@babel/core@7.28.4)
+      '@babel/plugin-transform-nullish-coalescing-operator': 7.27.1(@babel/core@7.28.4)
+      '@babel/plugin-transform-optional-chaining': 7.28.5(@babel/core@7.28.4)
+      '@babel/plugin-transform-private-methods': 7.27.1(@babel/core@7.28.4)
+      '@babel/preset-flow': 7.27.1(@babel/core@7.28.4)
+      '@babel/preset-typescript': 7.27.1(@babel/core@7.28.4)
+      '@babel/register': 7.28.3(@babel/core@7.28.4)
       flow-parser: 0.293.0
       graceful-fs: 4.2.11
       micromatch: 4.0.8
@@ -15212,21 +13587,18 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  jsdoc-type-pratt-parser@4.8.0: {}
-
-  jsdom@25.0.1:
+  jsdom@26.1.0:
     dependencies:
       cssstyle: 4.6.0
       data-urls: 5.0.0
       decimal.js: 10.6.0
-      form-data: 4.0.4
       html-encoding-sniffer: 4.0.0
       http-proxy-agent: 7.0.2
       https-proxy-agent: 7.0.6
       is-potential-custom-element-name: 1.0.1
       nwsapi: 2.2.21
       parse5: 7.3.0
-      rrweb-cssom: 0.7.1
+      rrweb-cssom: 0.8.0
       saxes: 6.0.0
       symbol-tree: 3.2.4
       tough-cookie: 5.1.2
@@ -15251,18 +13623,10 @@ snapshots:
 
   json-parse-even-better-errors@2.3.1: {}
 
-  json-parse-even-better-errors@3.0.2: {}
-
   json-schema-traverse@0.4.1: {}
 
   json-schema-traverse@1.0.0: {}
 
-  json-stable-stringify-without-jsonify@1.0.1: {}
-
-  json5@1.0.2:
-    dependencies:
-      minimist: 1.2.8
-
   json5@2.2.3: {}
 
   jsonfile@6.2.0:
@@ -15271,13 +13635,6 @@ snapshots:
     optionalDependencies:
       graceful-fs: 4.2.11
 
-  jsx-ast-utils@3.3.5:
-    dependencies:
-      array-includes: 3.1.9
-      array.prototype.flat: 1.3.3
-      object.assign: 4.1.7
-      object.values: 1.2.1
-
   jsx-dom-cjs@8.1.6:
     dependencies:
       csstype: 3.1.3
@@ -15290,23 +13647,63 @@ snapshots:
 
   kleur@4.1.5: {}
 
+  kubernetes-types@1.30.0: {}
+
   kuler@2.0.0: {}
 
-  language-subtag-registry@0.3.23: {}
-
-  language-tags@1.0.9:
-    dependencies:
-      language-subtag-registry: 0.3.23
-
-  levn@0.4.1:
-    dependencies:
-      prelude-ls: 1.2.1
-      type-check: 0.4.0
-
   lib0@0.2.114:
     dependencies:
       isomorphic.js: 0.2.5
 
+  lightningcss-android-arm64@1.30.2:
+    optional: true
+
+  lightningcss-darwin-arm64@1.30.2:
+    optional: true
+
+  lightningcss-darwin-x64@1.30.2:
+    optional: true
+
+  lightningcss-freebsd-x64@1.30.2:
+    optional: true
+
+  lightningcss-linux-arm-gnueabihf@1.30.2:
+    optional: true
+
+  lightningcss-linux-arm64-gnu@1.30.2:
+    optional: true
+
+  lightningcss-linux-arm64-musl@1.30.2:
+    optional: true
+
+  lightningcss-linux-x64-gnu@1.30.2:
+    optional: true
+
+  lightningcss-linux-x64-musl@1.30.2:
+    optional: true
+
+  lightningcss-win32-arm64-msvc@1.30.2:
+    optional: true
+
+  lightningcss-win32-x64-msvc@1.30.2:
+    optional: true
+
+  lightningcss@1.30.2:
+    dependencies:
+      detect-libc: 2.0.4
+    optionalDependencies:
+      lightningcss-android-arm64: 1.30.2
+      lightningcss-darwin-arm64: 1.30.2
+      lightningcss-darwin-x64: 1.30.2
+      lightningcss-freebsd-x64: 1.30.2
+      lightningcss-linux-arm-gnueabihf: 1.30.2
+      lightningcss-linux-arm64-gnu: 1.30.2
+      lightningcss-linux-arm64-musl: 1.30.2
+      lightningcss-linux-x64-gnu: 1.30.2
+      lightningcss-linux-x64-musl: 1.30.2
+      lightningcss-win32-arm64-msvc: 1.30.2
+      lightningcss-win32-x64-msvc: 1.30.2
+
   lilconfig@3.1.3: {}
 
   linebreak@1.1.0:
@@ -15330,7 +13727,7 @@ snapshots:
       nano-spawn: 2.0.0
       pidtree: 0.6.0
       string-argv: 0.3.2
-      yaml: 2.8.1
+      yaml: 2.8.3
 
   listr2@9.0.5:
     dependencies:
@@ -15357,7 +13754,7 @@ snapshots:
       lit-element: 3.3.3
       lit-html: 2.8.0
 
-  loader-runner@4.3.0: {}
+  loader-runner@4.3.1: {}
 
   locate-path@3.0.0:
     dependencies:
@@ -15376,9 +13773,7 @@ snapshots:
     dependencies:
       p-locate: 6.0.0
 
-  lodash-es@4.17.21: {}
-
-  lodash.castarray@4.4.0: {}
+  lodash-es@4.18.0: {}
 
   lodash.debounce@4.0.8: {}
 
@@ -15388,18 +13783,14 @@ snapshots:
 
   lodash.isarguments@3.1.0: {}
 
-  lodash.isplainobject@4.0.6: {}
-
-  lodash.merge@4.6.2: {}
-
-  lodash@4.17.21: {}
+  lodash@4.17.23: {}
 
   log-update@6.1.0:
     dependencies:
       ansi-escapes: 7.0.0
       cli-cursor: 5.0.0
       slice-ansi: 7.1.2
-      strip-ansi: 7.1.0
+      strip-ansi: 7.1.2
       wrap-ansi: 9.0.0
 
   logform@2.7.0:
@@ -15438,25 +13829,21 @@ snapshots:
     dependencies:
       yallist: 3.1.1
 
-  lru-cache@7.18.3: {}
-
   lucide-react@0.469.0(react@18.3.1):
     dependencies:
       react: 18.3.1
 
   lz-string@1.5.0: {}
 
-  magic-string@0.30.19:
-    dependencies:
-      '@jridgewell/sourcemap-codec': 1.5.5
-
   magic-string@0.30.21:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.5
 
-  magic-string@0.30.8:
+  magicast@0.5.1:
     dependencies:
-      '@jridgewell/sourcemap-codec': 1.5.5
+      '@babel/parser': 7.28.5
+      '@babel/types': 7.28.5
+      source-map-js: 1.2.1
 
   make-dir@2.1.0:
     dependencies:
@@ -15467,11 +13854,15 @@ snapshots:
     dependencies:
       semver: 6.3.1
 
+  make-dir@4.0.0:
+    dependencies:
+      semver: 7.7.4
+
   map-or-similar@1.5.0: {}
 
   markdown-it-task-lists@2.1.1: {}
 
-  markdown-it@14.1.0:
+  markdown-it@14.1.1:
     dependencies:
       argparse: 2.0.1
       entities: 4.5.0
@@ -15648,8 +14039,6 @@ snapshots:
 
   merge-stream@2.0.0: {}
 
-  merge2@1.4.1: {}
-
   methods@1.1.2: {}
 
   micromark-core-commonmark@1.1.0:
@@ -15979,7 +14368,7 @@ snapshots:
   micromatch@4.0.8:
     dependencies:
       braces: 3.0.3
-      picomatch: 2.3.1
+      picomatch: 2.3.2
 
   mime-db@1.33.0: {}
 
@@ -15997,23 +14386,21 @@ snapshots:
 
   mime@1.6.0: {}
 
+  mime@3.0.0: {}
+
   mimic-fn@2.1.0: {}
 
   mimic-function@5.0.1: {}
 
   min-indent@1.0.1: {}
 
-  minimatch@10.1.1:
+  minimatch@10.2.3:
     dependencies:
-      '@isaacs/brace-expansion': 5.0.0
+      brace-expansion: 5.0.5
 
-  minimatch@3.1.2:
+  minimatch@3.1.4:
     dependencies:
-      brace-expansion: 2.0.2
-
-  minimatch@9.0.5:
-    dependencies:
-      brace-expansion: 2.0.2
+      brace-expansion: 5.0.5
 
   minimist@1.2.8: {}
 
@@ -16041,8 +14428,6 @@ snapshots:
 
   mobx@6.12.0: {}
 
-  module-details-from-path@1.0.4: {}
-
   morgan@1.10.1:
     dependencies:
       basic-auth: 2.0.1
@@ -16065,20 +14450,28 @@ snapshots:
 
   ms@2.1.3: {}
 
-  mz@2.7.0:
+  msgpackr-extract@3.0.3:
     dependencies:
-      any-promise: 1.3.0
-      object-assign: 4.1.1
-      thenify-all: 1.6.0
+      node-gyp-build-optional-packages: 5.2.2
+    optionalDependencies:
+      '@msgpackr-extract/msgpackr-extract-darwin-arm64': 3.0.3
+      '@msgpackr-extract/msgpackr-extract-darwin-x64': 3.0.3
+      '@msgpackr-extract/msgpackr-extract-linux-arm': 3.0.3
+      '@msgpackr-extract/msgpackr-extract-linux-arm64': 3.0.3
+      '@msgpackr-extract/msgpackr-extract-linux-x64': 3.0.3
+      '@msgpackr-extract/msgpackr-extract-win32-x64': 3.0.3
+    optional: true
+
+  msgpackr@1.11.8:
+    optionalDependencies:
+      msgpackr-extract: 3.0.3
+
+  multipasta@0.2.7: {}
 
   nano-spawn@2.0.0: {}
 
   nanoid@3.3.8: {}
 
-  napi-postinstall@0.3.3: {}
-
-  natural-compare@1.4.0: {}
-
   negotiator@0.6.3: {}
 
   negotiator@0.6.4: {}
@@ -16095,29 +14488,25 @@ snapshots:
       lower-case: 2.0.2
       tslib: 2.8.1
 
-  node-abi@3.75.0:
-    dependencies:
-      semver: 7.7.3
-
   node-abort-controller@3.1.1: {}
 
+  node-addon-api@7.1.1: {}
+
   node-fetch@2.7.0:
     dependencies:
       whatwg-url: 5.0.0
 
+  node-gyp-build-optional-packages@5.2.2:
+    dependencies:
+      detect-libc: 2.0.4
+    optional: true
+
   node-html-parser@6.1.13:
     dependencies:
       css-select: 5.2.2
       he: 1.2.0
 
-  node-releases@2.0.21: {}
-
-  normalize-package-data@5.0.0:
-    dependencies:
-      hosted-git-info: 6.1.3
-      is-core-module: 2.16.1
-      semver: 7.7.3
-      validate-npm-package-license: 3.0.4
+  node-releases@2.0.27: {}
 
   normalize-path@3.0.0: {}
 
@@ -16129,26 +14518,6 @@ snapshots:
 
   normalize.css@8.0.1: {}
 
-  npm-install-checks@6.3.0:
-    dependencies:
-      semver: 7.7.3
-
-  npm-normalize-package-bin@3.0.1: {}
-
-  npm-package-arg@10.1.0:
-    dependencies:
-      hosted-git-info: 6.1.3
-      proc-log: 3.0.0
-      semver: 7.7.3
-      validate-npm-package-name: 5.0.1
-
-  npm-pick-manifest@8.0.2:
-    dependencies:
-      npm-install-checks: 6.3.0
-      npm-normalize-package-bin: 3.0.1
-      npm-package-arg: 10.1.0
-      semver: 7.7.3
-
   npm-run-path@4.0.1:
     dependencies:
       path-key: 3.1.1
@@ -16162,8 +14531,6 @@ snapshots:
 
   object-assign@4.1.1: {}
 
-  object-hash@3.0.0: {}
-
   object-inspect@1.13.4: {}
 
   object-is@1.1.6:
@@ -16173,44 +14540,6 @@ snapshots:
 
   object-keys@1.1.1: {}
 
-  object-treeify@1.1.33: {}
-
-  object.assign@4.1.7:
-    dependencies:
-      call-bind: 1.0.8
-      call-bound: 1.0.4
-      define-properties: 1.2.1
-      es-object-atoms: 1.1.1
-      has-symbols: 1.1.0
-      object-keys: 1.1.1
-
-  object.entries@1.1.9:
-    dependencies:
-      call-bind: 1.0.8
-      call-bound: 1.0.4
-      define-properties: 1.2.1
-      es-object-atoms: 1.1.1
-
-  object.fromentries@2.0.8:
-    dependencies:
-      call-bind: 1.0.8
-      define-properties: 1.2.1
-      es-abstract: 1.24.0
-      es-object-atoms: 1.1.1
-
-  object.groupby@1.0.3:
-    dependencies:
-      call-bind: 1.0.8
-      define-properties: 1.2.1
-      es-abstract: 1.24.0
-
-  object.values@1.2.1:
-    dependencies:
-      call-bind: 1.0.8
-      call-bound: 1.0.4
-      define-properties: 1.2.1
-      es-object-atoms: 1.1.1
-
   objectorarray@1.0.5: {}
 
   obug@2.1.1: {}
@@ -16243,15 +14572,6 @@ snapshots:
       is-docker: 2.2.1
       is-wsl: 2.2.0
 
-  optionator@0.9.4:
-    dependencies:
-      deep-is: 0.1.4
-      fast-levenshtein: 2.0.6
-      levn: 0.4.1
-      prelude-ls: 1.2.1
-      type-check: 0.4.0
-      word-wrap: 1.2.5
-
   orderedmap@2.1.1: {}
 
   outlayer@2.1.1:
@@ -16260,31 +14580,51 @@ snapshots:
       fizzy-ui-utils: 2.0.7
       get-size: 2.0.3
 
-  own-keys@1.0.1:
+  oxfmt@0.35.0:
     dependencies:
-      get-intrinsic: 1.3.0
-      object-keys: 1.1.1
-      safe-push-apply: 1.0.0
-
-  oxc-parser@0.99.0:
-    dependencies:
-      '@oxc-project/types': 0.99.0
+      tinypool: 2.1.0
     optionalDependencies:
-      '@oxc-parser/binding-android-arm64': 0.99.0
-      '@oxc-parser/binding-darwin-arm64': 0.99.0
-      '@oxc-parser/binding-darwin-x64': 0.99.0
-      '@oxc-parser/binding-freebsd-x64': 0.99.0
-      '@oxc-parser/binding-linux-arm-gnueabihf': 0.99.0
-      '@oxc-parser/binding-linux-arm-musleabihf': 0.99.0
-      '@oxc-parser/binding-linux-arm64-gnu': 0.99.0
-      '@oxc-parser/binding-linux-arm64-musl': 0.99.0
-      '@oxc-parser/binding-linux-riscv64-gnu': 0.99.0
-      '@oxc-parser/binding-linux-s390x-gnu': 0.99.0
-      '@oxc-parser/binding-linux-x64-gnu': 0.99.0
-      '@oxc-parser/binding-linux-x64-musl': 0.99.0
-      '@oxc-parser/binding-wasm32-wasi': 0.99.0
-      '@oxc-parser/binding-win32-arm64-msvc': 0.99.0
-      '@oxc-parser/binding-win32-x64-msvc': 0.99.0
+      '@oxfmt/binding-android-arm-eabi': 0.35.0
+      '@oxfmt/binding-android-arm64': 0.35.0
+      '@oxfmt/binding-darwin-arm64': 0.35.0
+      '@oxfmt/binding-darwin-x64': 0.35.0
+      '@oxfmt/binding-freebsd-x64': 0.35.0
+      '@oxfmt/binding-linux-arm-gnueabihf': 0.35.0
+      '@oxfmt/binding-linux-arm-musleabihf': 0.35.0
+      '@oxfmt/binding-linux-arm64-gnu': 0.35.0
+      '@oxfmt/binding-linux-arm64-musl': 0.35.0
+      '@oxfmt/binding-linux-ppc64-gnu': 0.35.0
+      '@oxfmt/binding-linux-riscv64-gnu': 0.35.0
+      '@oxfmt/binding-linux-riscv64-musl': 0.35.0
+      '@oxfmt/binding-linux-s390x-gnu': 0.35.0
+      '@oxfmt/binding-linux-x64-gnu': 0.35.0
+      '@oxfmt/binding-linux-x64-musl': 0.35.0
+      '@oxfmt/binding-openharmony-arm64': 0.35.0
+      '@oxfmt/binding-win32-arm64-msvc': 0.35.0
+      '@oxfmt/binding-win32-ia32-msvc': 0.35.0
+      '@oxfmt/binding-win32-x64-msvc': 0.35.0
+
+  oxlint@1.51.0:
+    optionalDependencies:
+      '@oxlint/binding-android-arm-eabi': 1.51.0
+      '@oxlint/binding-android-arm64': 1.51.0
+      '@oxlint/binding-darwin-arm64': 1.51.0
+      '@oxlint/binding-darwin-x64': 1.51.0
+      '@oxlint/binding-freebsd-x64': 1.51.0
+      '@oxlint/binding-linux-arm-gnueabihf': 1.51.0
+      '@oxlint/binding-linux-arm-musleabihf': 1.51.0
+      '@oxlint/binding-linux-arm64-gnu': 1.51.0
+      '@oxlint/binding-linux-arm64-musl': 1.51.0
+      '@oxlint/binding-linux-ppc64-gnu': 1.51.0
+      '@oxlint/binding-linux-riscv64-gnu': 1.51.0
+      '@oxlint/binding-linux-riscv64-musl': 1.51.0
+      '@oxlint/binding-linux-s390x-gnu': 1.51.0
+      '@oxlint/binding-linux-x64-gnu': 1.51.0
+      '@oxlint/binding-linux-x64-musl': 1.51.0
+      '@oxlint/binding-openharmony-arm64': 1.51.0
+      '@oxlint/binding-win32-arm64-msvc': 1.51.0
+      '@oxlint/binding-win32-ia32-msvc': 1.51.0
+      '@oxlint/binding-win32-x64-msvc': 1.51.0
 
   p-limit@2.3.0:
     dependencies:
@@ -16381,9 +14721,7 @@ snapshots:
       lru-cache: 11.2.1
       minipass: 7.1.2
 
-  path-to-regexp@0.1.12: {}
-
-  path-to-regexp@3.3.0: {}
+  path-to-regexp@0.1.13: {}
 
   path-type@4.0.0: {}
 
@@ -16393,23 +14731,18 @@ snapshots:
 
   pathval@2.0.1: {}
 
-  pg-int8@1.0.1: {}
-
-  pg-protocol@1.10.3: {}
-
-  pg-types@2.2.0:
+  pdf-parse@2.4.5:
     dependencies:
-      pg-int8: 1.0.1
-      postgres-array: 2.0.0
-      postgres-bytea: 1.0.0
-      postgres-date: 1.0.7
-      postgres-interval: 1.2.0
+      '@napi-rs/canvas': 0.1.80
+      pdfjs-dist: 5.4.296
+
+  pdfjs-dist@5.4.296:
+    optionalDependencies:
+      '@napi-rs/canvas': 0.1.80
 
   picocolors@1.1.1: {}
 
-  picomatch@2.3.1: {}
-
-  picomatch@4.0.3: {}
+  picomatch@2.3.2: {}
 
   pidtree@0.6.0: {}
 
@@ -16427,6 +14760,12 @@ snapshots:
     dependencies:
       find-up: 4.1.0
 
+  pkg-types@2.3.0:
+    dependencies:
+      confbox: 0.2.4
+      exsolve: 1.0.8
+      pathe: 2.0.3
+
   polished@4.3.1:
     dependencies:
       '@babel/runtime': 7.26.10
@@ -16435,14 +14774,14 @@ snapshots:
 
   possible-typed-array-names@1.1.0: {}
 
-  postcss-cli@11.0.1(jiti@2.5.1)(postcss@8.5.6):
+  postcss-cli@11.0.1(jiti@2.6.1)(postcss@8.5.6):
     dependencies:
       chokidar: 3.6.0
       dependency-graph: 1.0.0
       fs-extra: 11.3.1
       picocolors: 1.1.1
       postcss: 8.5.6
-      postcss-load-config: 5.1.0(jiti@2.5.1)(postcss@8.5.6)
+      postcss-load-config: 5.1.0(jiti@2.6.1)(postcss@8.5.6)
       postcss-reporter: 7.1.0(postcss@8.5.6)
       pretty-hrtime: 1.0.3
       read-cache: 1.0.0
@@ -16453,31 +14792,12 @@ snapshots:
       - jiti
       - tsx
 
-  postcss-import@15.1.0(postcss@8.5.6):
-    dependencies:
-      postcss: 8.5.6
-      postcss-value-parser: 4.2.0
-      read-cache: 1.0.0
-      resolve: 1.22.10
-
-  postcss-js@4.0.1(postcss@8.5.6):
-    dependencies:
-      camelcase-css: 2.0.1
-      postcss: 8.5.6
-
-  postcss-load-config@4.0.2(postcss@8.5.6):
+  postcss-load-config@5.1.0(jiti@2.6.1)(postcss@8.5.6):
     dependencies:
       lilconfig: 3.1.3
-      yaml: 2.8.1
+      yaml: 2.8.3
     optionalDependencies:
-      postcss: 8.5.6
-
-  postcss-load-config@5.1.0(jiti@2.5.1)(postcss@8.5.6):
-    dependencies:
-      lilconfig: 3.1.3
-      yaml: 2.8.1
-    optionalDependencies:
-      jiti: 2.5.1
+      jiti: 2.6.1
       postcss: 8.5.6
 
   postcss-modules-extract-imports@3.1.0(postcss@8.5.6):
@@ -16535,32 +14855,11 @@ snapshots:
       picocolors: 1.1.1
       source-map-js: 1.2.1
 
-  postgres-array@2.0.0: {}
-
-  postgres-bytea@1.0.0: {}
-
-  postgres-date@1.0.7: {}
-
-  postgres-interval@1.2.0:
-    dependencies:
-      xtend: 4.0.2
-
-  posthog-js@1.255.1:
-    dependencies:
-      core-js: 3.45.1
-      fflate: 0.4.8
-      preact: 10.27.1
-      web-vitals: 4.2.4
-
-  preact@10.27.1: {}
-
-  prelude-ls@1.2.1: {}
-
   prettier@3.7.4: {}
 
   pretty-error@4.0.0:
     dependencies:
-      lodash: 4.17.21
+      lodash: 4.17.23
       renderkid: 3.0.0
 
   pretty-format@27.5.1:
@@ -16571,19 +14870,8 @@ snapshots:
 
   pretty-hrtime@1.0.3: {}
 
-  proc-log@3.0.0: {}
-
   process@0.11.10: {}
 
-  progress@2.0.3: {}
-
-  promise-inflight@1.0.1: {}
-
-  promise-retry@2.0.1:
-    dependencies:
-      err-code: 2.0.3
-      retry: 0.12.0
-
   prop-types@15.8.1:
     dependencies:
       loose-envify: 1.4.0
@@ -16648,7 +14936,7 @@ snapshots:
   prosemirror-markdown@1.13.2:
     dependencies:
       '@types/markdown-it': 14.1.2
-      markdown-it: 14.1.0
+      markdown-it: 14.1.1
       prosemirror-model: 1.25.3
 
   prosemirror-menu@1.2.5:
@@ -16717,17 +15005,13 @@ snapshots:
 
   punycode@2.3.1: {}
 
-  qs@6.13.0:
+  pure-rand@6.1.0: {}
+
+  qs@6.14.2:
     dependencies:
       side-channel: 1.1.0
 
-  qs@6.14.0:
-    dependencies:
-      side-channel: 1.1.0
-
-  quansync@0.2.11: {}
-
-  queue-microtask@1.2.3: {}
+  quansync@1.0.0: {}
 
   queue@6.0.2:
     dependencies:
@@ -16735,10 +15019,6 @@ snapshots:
 
   raf-schd@4.0.3: {}
 
-  randombytes@2.1.0:
-    dependencies:
-      safe-buffer: 5.2.1
-
   range-parser@1.2.0: {}
 
   range-parser@1.2.1: {}
@@ -16760,8 +15040,8 @@ snapshots:
   react-color@2.19.3(react@18.3.1):
     dependencies:
       '@icons/material': 0.2.4(react@18.3.1)
-      lodash: 4.17.21
-      lodash-es: 4.17.21
+      lodash: 4.17.23
+      lodash-es: 4.18.0
       material-colors: 1.2.6
       prop-types: 15.8.1
       react: 18.3.1
@@ -16788,7 +15068,7 @@ snapshots:
     dependencies:
       '@babel/core': 7.28.4
       '@babel/traverse': 7.28.4
-      '@babel/types': 7.28.4
+      '@babel/types': 7.28.5
       '@types/babel__core': 7.20.5
       '@types/babel__traverse': 7.28.0
       '@types/doctrine': 0.0.9
@@ -16803,7 +15083,7 @@ snapshots:
     dependencies:
       '@babel/core': 7.28.4
       '@babel/traverse': 7.28.4
-      '@babel/types': 7.28.4
+      '@babel/types': 7.28.5
       '@types/babel__core': 7.20.5
       '@types/babel__traverse': 7.28.0
       '@types/doctrine': 0.0.9
@@ -16866,7 +15146,7 @@ snapshots:
       create-react-class: 15.7.0
       element-resize-detector: 1.2.4
       imagesloaded: 4.1.4
-      lodash: 4.17.21
+      lodash: 4.17.23
       masonry-layout: 4.2.2
       prop-types: 15.8.1
       react: 18.3.1
@@ -16918,13 +15198,7 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.3.11
 
-  react-router-dom@7.9.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
-    dependencies:
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
-      react-router: 7.9.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-
-  react-router@7.9.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+  react-router@7.12.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
     dependencies:
       cookie: 1.0.2
       react: 18.3.1
@@ -16963,7 +15237,7 @@ snapshots:
 
   reactcss@1.2.3(react@18.3.1):
     dependencies:
-      lodash: 4.17.21
+      lodash: 4.17.23
       react: 18.3.1
 
   read-cache@1.0.0:
@@ -16978,7 +15252,7 @@ snapshots:
 
   readdirp@3.6.0:
     dependencies:
-      picomatch: 2.3.1
+      picomatch: 2.3.2
 
   recast@0.23.11:
     dependencies:
@@ -16996,7 +15270,7 @@ snapshots:
     dependencies:
       clsx: 2.1.1
       eventemitter3: 4.0.7
-      lodash: 4.17.21
+      lodash: 4.17.23
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
       react-is: 18.3.1
@@ -17022,17 +15296,6 @@ snapshots:
 
   reflect-metadata@0.2.2: {}
 
-  reflect.getprototypeof@1.0.10:
-    dependencies:
-      call-bind: 1.0.8
-      define-properties: 1.2.1
-      es-abstract: 1.24.0
-      es-errors: 1.3.0
-      es-object-atoms: 1.1.1
-      get-intrinsic: 1.3.0
-      get-proto: 1.0.1
-      which-builtin-type: 1.2.1
-
   regenerator-runtime@0.14.1: {}
 
   regexp.prototype.flags@1.5.4:
@@ -17120,20 +15383,13 @@ snapshots:
       css-select: 4.3.0
       dom-converter: 0.2.0
       htmlparser2: 6.1.0
-      lodash: 4.17.21
+      lodash: 4.17.23
       strip-ansi: 6.0.1
 
   require-directory@2.1.1: {}
 
   require-from-string@2.0.2: {}
 
-  require-in-the-middle@8.0.1:
-    dependencies:
-      debug: 4.4.3
-      module-details-from-path: 1.0.4
-    transitivePeerDependencies:
-      - supports-color
-
   reselect@5.1.1: {}
 
   resolve-from@4.0.0: {}
@@ -17146,12 +15402,6 @@ snapshots:
       path-parse: 1.0.7
       supports-preserve-symlinks-flag: 1.0.0
 
-  resolve@2.0.0-next.5:
-    dependencies:
-      is-core-module: 2.16.1
-      path-parse: 1.0.7
-      supports-preserve-symlinks-flag: 1.0.0
-
   restore-cursor@5.1.0:
     dependencies:
       onetime: 7.0.0
@@ -17159,10 +15409,6 @@ snapshots:
 
   restructure@3.0.2: {}
 
-  retry@0.12.0: {}
-
-  reusify@1.1.0: {}
-
   rfdc@1.4.1: {}
 
   rimraf@3.0.2:
@@ -17177,7 +15423,7 @@ snapshots:
       ast-kit: 2.2.0
       birpc: 2.9.0
       dts-resolver: 2.1.3
-      get-tsconfig: 4.13.0
+      get-tsconfig: 4.13.7
       magic-string: 0.30.21
       obug: 2.1.1
       rolldown: 1.0.0-beta.46
@@ -17206,67 +15452,72 @@ snapshots:
       '@rolldown/binding-win32-ia32-msvc': 1.0.0-beta.46
       '@rolldown/binding-win32-x64-msvc': 1.0.0-beta.46
 
-  rollup@4.52.4:
+  rolldown@1.0.0-rc.12:
+    dependencies:
+      '@oxc-project/types': 0.122.0
+      '@rolldown/pluginutils': 1.0.0-rc.12
+    optionalDependencies:
+      '@rolldown/binding-android-arm64': 1.0.0-rc.12
+      '@rolldown/binding-darwin-arm64': 1.0.0-rc.12
+      '@rolldown/binding-darwin-x64': 1.0.0-rc.12
+      '@rolldown/binding-freebsd-x64': 1.0.0-rc.12
+      '@rolldown/binding-linux-arm-gnueabihf': 1.0.0-rc.12
+      '@rolldown/binding-linux-arm64-gnu': 1.0.0-rc.12
+      '@rolldown/binding-linux-arm64-musl': 1.0.0-rc.12
+      '@rolldown/binding-linux-ppc64-gnu': 1.0.0-rc.12
+      '@rolldown/binding-linux-s390x-gnu': 1.0.0-rc.12
+      '@rolldown/binding-linux-x64-gnu': 1.0.0-rc.12
+      '@rolldown/binding-linux-x64-musl': 1.0.0-rc.12
+      '@rolldown/binding-openharmony-arm64': 1.0.0-rc.12
+      '@rolldown/binding-wasm32-wasi': 1.0.0-rc.12
+      '@rolldown/binding-win32-arm64-msvc': 1.0.0-rc.12
+      '@rolldown/binding-win32-x64-msvc': 1.0.0-rc.12
+    optional: true
+
+  rollup@4.59.0:
     dependencies:
       '@types/estree': 1.0.8
     optionalDependencies:
-      '@rollup/rollup-android-arm-eabi': 4.52.4
-      '@rollup/rollup-android-arm64': 4.52.4
-      '@rollup/rollup-darwin-arm64': 4.52.4
-      '@rollup/rollup-darwin-x64': 4.52.4
-      '@rollup/rollup-freebsd-arm64': 4.52.4
-      '@rollup/rollup-freebsd-x64': 4.52.4
-      '@rollup/rollup-linux-arm-gnueabihf': 4.52.4
-      '@rollup/rollup-linux-arm-musleabihf': 4.52.4
-      '@rollup/rollup-linux-arm64-gnu': 4.52.4
-      '@rollup/rollup-linux-arm64-musl': 4.52.4
-      '@rollup/rollup-linux-loong64-gnu': 4.52.4
-      '@rollup/rollup-linux-ppc64-gnu': 4.52.4
-      '@rollup/rollup-linux-riscv64-gnu': 4.52.4
-      '@rollup/rollup-linux-riscv64-musl': 4.52.4
-      '@rollup/rollup-linux-s390x-gnu': 4.52.4
-      '@rollup/rollup-linux-x64-gnu': 4.52.4
-      '@rollup/rollup-linux-x64-musl': 4.52.4
-      '@rollup/rollup-openharmony-arm64': 4.52.4
-      '@rollup/rollup-win32-arm64-msvc': 4.52.4
-      '@rollup/rollup-win32-ia32-msvc': 4.52.4
-      '@rollup/rollup-win32-x64-gnu': 4.52.4
-      '@rollup/rollup-win32-x64-msvc': 4.52.4
+      '@rollup/rollup-android-arm-eabi': 4.59.0
+      '@rollup/rollup-android-arm64': 4.59.0
+      '@rollup/rollup-darwin-arm64': 4.59.0
+      '@rollup/rollup-darwin-x64': 4.59.0
+      '@rollup/rollup-freebsd-arm64': 4.59.0
+      '@rollup/rollup-freebsd-x64': 4.59.0
+      '@rollup/rollup-linux-arm-gnueabihf': 4.59.0
+      '@rollup/rollup-linux-arm-musleabihf': 4.59.0
+      '@rollup/rollup-linux-arm64-gnu': 4.59.0
+      '@rollup/rollup-linux-arm64-musl': 4.59.0
+      '@rollup/rollup-linux-loong64-gnu': 4.59.0
+      '@rollup/rollup-linux-loong64-musl': 4.59.0
+      '@rollup/rollup-linux-ppc64-gnu': 4.59.0
+      '@rollup/rollup-linux-ppc64-musl': 4.59.0
+      '@rollup/rollup-linux-riscv64-gnu': 4.59.0
+      '@rollup/rollup-linux-riscv64-musl': 4.59.0
+      '@rollup/rollup-linux-s390x-gnu': 4.59.0
+      '@rollup/rollup-linux-x64-gnu': 4.59.0
+      '@rollup/rollup-linux-x64-musl': 4.59.0
+      '@rollup/rollup-openbsd-x64': 4.59.0
+      '@rollup/rollup-openharmony-arm64': 4.59.0
+      '@rollup/rollup-win32-arm64-msvc': 4.59.0
+      '@rollup/rollup-win32-ia32-msvc': 4.59.0
+      '@rollup/rollup-win32-x64-gnu': 4.59.0
+      '@rollup/rollup-win32-x64-msvc': 4.59.0
       fsevents: 2.3.3
 
   rope-sequence@1.3.4: {}
 
-  rrweb-cssom@0.7.1:
-    optional: true
-
   rrweb-cssom@0.8.0:
     optional: true
 
-  run-parallel@1.2.0:
-    dependencies:
-      queue-microtask: 1.2.3
-
   sade@1.8.1:
     dependencies:
       mri: 1.2.0
 
-  safe-array-concat@1.1.3:
-    dependencies:
-      call-bind: 1.0.8
-      call-bound: 1.0.4
-      get-intrinsic: 1.3.0
-      has-symbols: 1.1.0
-      isarray: 2.0.5
-
   safe-buffer@5.1.2: {}
 
   safe-buffer@5.2.1: {}
 
-  safe-push-apply@1.0.0:
-    dependencies:
-      es-errors: 1.3.0
-      isarray: 2.0.5
-
   safe-regex-test@1.1.0:
     dependencies:
       call-bound: 1.0.4
@@ -17300,18 +15551,20 @@ snapshots:
     dependencies:
       loose-envify: 1.4.0
 
+  scheduler@0.25.0-rc-603e6108-20241029: {}
+
   schema-utils@3.3.0:
     dependencies:
       '@types/json-schema': 7.0.15
-      ajv: 6.12.6
-      ajv-keywords: 3.5.2(ajv@6.12.6)
+      ajv: 6.14.0
+      ajv-keywords: 3.5.2(ajv@6.14.0)
 
-  schema-utils@4.3.2:
+  schema-utils@4.3.3:
     dependencies:
       '@types/json-schema': 7.0.15
-      ajv: 8.17.1
-      ajv-formats: 2.1.1(ajv@8.17.1)
-      ajv-keywords: 5.1.0(ajv@8.17.1)
+      ajv: 8.18.0
+      ajv-formats: 2.1.1(ajv@8.18.0)
+      ajv-keywords: 5.1.0(ajv@8.18.0)
 
   scroll-into-view-if-needed@3.1.0:
     dependencies:
@@ -17321,9 +15574,7 @@ snapshots:
 
   semver@6.3.1: {}
 
-  semver@7.7.2: {}
-
-  semver@7.7.3: {}
+  semver@7.7.4: {}
 
   send@0.19.0:
     dependencies:
@@ -17349,18 +15600,16 @@ snapshots:
       tslib: 2.8.1
       upper-case-first: 2.0.2
 
-  serialize-javascript@6.0.2:
-    dependencies:
-      randombytes: 2.1.0
+  serialize-javascript@7.0.5: {}
 
   serve-handler@6.1.6:
     dependencies:
       bytes: 3.0.0
       content-disposition: 0.5.2
       mime-types: 2.1.18
-      minimatch: 3.1.2
+      minimatch: 3.1.4
       path-is-inside: 1.0.2
-      path-to-regexp: 3.3.0
+      path-to-regexp: 0.1.13
       range-parser: 1.2.0
 
   serve-static@1.16.2:
@@ -17375,7 +15624,7 @@ snapshots:
   serve@14.2.5:
     dependencies:
       '@zeit/schemas': 2.36.0
-      ajv: 8.12.0
+      ajv: 8.18.0
       arg: 5.0.2
       boxen: 7.0.0
       chalk: 5.0.1
@@ -17406,18 +15655,41 @@ snapshots:
       functions-have-names: 1.2.3
       has-property-descriptors: 1.0.2
 
-  set-proto@1.0.0:
-    dependencies:
-      dunder-proto: 1.0.1
-      es-errors: 1.3.0
-      es-object-atoms: 1.1.1
-
   setprototypeof@1.2.0: {}
 
   shallow-clone@3.0.1:
     dependencies:
       kind-of: 6.0.3
 
+  sharp@0.34.3:
+    dependencies:
+      color: 4.2.3
+      detect-libc: 2.0.4
+      semver: 7.7.4
+    optionalDependencies:
+      '@img/sharp-darwin-arm64': 0.34.3
+      '@img/sharp-darwin-x64': 0.34.3
+      '@img/sharp-libvips-darwin-arm64': 1.2.0
+      '@img/sharp-libvips-darwin-x64': 1.2.0
+      '@img/sharp-libvips-linux-arm': 1.2.0
+      '@img/sharp-libvips-linux-arm64': 1.2.0
+      '@img/sharp-libvips-linux-ppc64': 1.2.0
+      '@img/sharp-libvips-linux-s390x': 1.2.0
+      '@img/sharp-libvips-linux-x64': 1.2.0
+      '@img/sharp-libvips-linuxmusl-arm64': 1.2.0
+      '@img/sharp-libvips-linuxmusl-x64': 1.2.0
+      '@img/sharp-linux-arm': 0.34.3
+      '@img/sharp-linux-arm64': 0.34.3
+      '@img/sharp-linux-ppc64': 0.34.3
+      '@img/sharp-linux-s390x': 0.34.3
+      '@img/sharp-linux-x64': 0.34.3
+      '@img/sharp-linuxmusl-arm64': 0.34.3
+      '@img/sharp-linuxmusl-x64': 0.34.3
+      '@img/sharp-wasm32': 0.34.3
+      '@img/sharp-win32-arm64': 0.34.3
+      '@img/sharp-win32-ia32': 0.34.3
+      '@img/sharp-win32-x64': 0.34.3
+
   shebang-command@2.0.0:
     dependencies:
       shebang-regex: 3.0.0
@@ -17466,7 +15738,7 @@ snapshots:
 
   slice-ansi@7.1.2:
     dependencies:
-      ansi-styles: 6.2.1
+      ansi-styles: 6.2.3
       is-fullwidth-code-point: 5.1.0
 
   smooth-scroll-into-view-if-needed@2.0.2:
@@ -17489,22 +15761,6 @@ snapshots:
 
   space-separated-tokens@2.0.2: {}
 
-  spdx-correct@3.2.0:
-    dependencies:
-      spdx-expression-parse: 3.0.1
-      spdx-license-ids: 3.0.22
-
-  spdx-exceptions@2.5.0: {}
-
-  spdx-expression-parse@3.0.1:
-    dependencies:
-      spdx-exceptions: 2.5.0
-      spdx-license-ids: 3.0.22
-
-  spdx-license-ids@3.0.22: {}
-
-  stable-hash-x@0.2.0: {}
-
   stack-trace@0.0.10: {}
 
   stackback@0.0.2: {}
@@ -17515,34 +15771,19 @@ snapshots:
 
   std-env@3.10.0: {}
 
-  stop-iteration-iterator@1.1.0:
-    dependencies:
-      es-errors: 1.3.0
-      internal-slot: 1.1.0
-
-  storybook@8.6.14(prettier@3.7.4):
-    dependencies:
-      '@storybook/core': 8.6.14(prettier@3.7.4)(storybook@8.6.14(prettier@3.7.4))
-    optionalDependencies:
-      prettier: 3.7.4
-    transitivePeerDependencies:
-      - bufferutil
-      - supports-color
-      - utf-8-validate
-
-  storybook@9.1.10(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.5.1)(terser@5.43.1)(yaml@2.8.1)):
+  storybook@9.1.19(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3)):
     dependencies:
       '@storybook/global': 5.0.0
       '@testing-library/jest-dom': 6.9.1
       '@testing-library/user-event': 14.6.1(@testing-library/dom@10.4.0)
       '@vitest/expect': 3.2.4
-      '@vitest/mocker': 3.2.4(vite@7.1.11(@types/node@22.12.0)(jiti@2.5.1)(terser@5.43.1)(yaml@2.8.1))
+      '@vitest/mocker': 3.2.4(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3))
       '@vitest/spy': 3.2.4
       better-opn: 3.0.2
       esbuild: 0.25.0
       esbuild-register: 3.6.0(esbuild@0.25.0)
       recast: 0.23.11
-      semver: 7.7.2
+      semver: 7.7.4
       ws: 8.18.3
     optionalDependencies:
       prettier: 3.7.4
@@ -17572,62 +15813,12 @@ snapshots:
     dependencies:
       emoji-regex: 10.5.0
       get-east-asian-width: 1.4.0
-      strip-ansi: 7.1.0
+      strip-ansi: 7.1.2
 
   string-width@8.1.0:
     dependencies:
       get-east-asian-width: 1.4.0
-      strip-ansi: 7.1.0
-
-  string.prototype.includes@2.0.1:
-    dependencies:
-      call-bind: 1.0.8
-      define-properties: 1.2.1
-      es-abstract: 1.24.0
-
-  string.prototype.matchall@4.0.12:
-    dependencies:
-      call-bind: 1.0.8
-      call-bound: 1.0.4
-      define-properties: 1.2.1
-      es-abstract: 1.24.0
-      es-errors: 1.3.0
-      es-object-atoms: 1.1.1
-      get-intrinsic: 1.3.0
-      gopd: 1.2.0
-      has-symbols: 1.1.0
-      internal-slot: 1.1.0
-      regexp.prototype.flags: 1.5.4
-      set-function-name: 2.0.2
-      side-channel: 1.1.0
-
-  string.prototype.repeat@1.0.0:
-    dependencies:
-      define-properties: 1.2.1
-      es-abstract: 1.24.0
-
-  string.prototype.trim@1.2.10:
-    dependencies:
-      call-bind: 1.0.8
-      call-bound: 1.0.4
-      define-data-property: 1.1.4
-      define-properties: 1.2.1
-      es-abstract: 1.24.0
-      es-object-atoms: 1.1.1
-      has-property-descriptors: 1.0.2
-
-  string.prototype.trimend@1.0.9:
-    dependencies:
-      call-bind: 1.0.8
-      call-bound: 1.0.4
-      define-properties: 1.2.1
-      es-object-atoms: 1.1.1
-
-  string.prototype.trimstart@1.0.8:
-    dependencies:
-      call-bind: 1.0.8
-      define-properties: 1.2.1
-      es-object-atoms: 1.1.1
+      strip-ansi: 7.1.2
 
   string_decoder@1.3.0:
     dependencies:
@@ -17642,10 +15833,6 @@ snapshots:
     dependencies:
       ansi-regex: 5.0.1
 
-  strip-ansi@7.1.0:
-    dependencies:
-      ansi-regex: 6.2.2
-
   strip-ansi@7.1.2:
     dependencies:
       ansi-regex: 6.2.2
@@ -17662,30 +15849,18 @@ snapshots:
 
   strip-json-comments@2.0.1: {}
 
-  strip-json-comments@3.1.1: {}
-
   strtok3@10.3.4:
     dependencies:
       '@tokenizer/token': 0.3.0
 
-  style-loader@3.3.4(webpack@5.101.3(@swc/core@1.13.5(@swc/helpers@0.5.17))(esbuild@0.25.0)):
+  style-loader@3.3.4(webpack@5.104.1(@swc/core@1.13.5(@swc/helpers@0.5.17))):
     dependencies:
-      webpack: 5.101.3(@swc/core@1.13.5(@swc/helpers@0.5.17))(esbuild@0.25.0)
+      webpack: 5.104.1(@swc/core@1.13.5(@swc/helpers@0.5.17))
 
   style-to-object@0.4.4:
     dependencies:
       inline-style-parser: 0.1.1
 
-  sucrase@3.35.0:
-    dependencies:
-      '@jridgewell/gen-mapping': 0.3.13
-      commander: 4.1.1
-      glob: 11.1.0
-      lines-and-columns: 1.2.4
-      mz: 2.7.0
-      pirates: 4.0.7
-      ts-interface-checker: 0.1.13
-
   supports-color@5.5.0:
     dependencies:
       has-flag: 3.0.0
@@ -17702,11 +15877,11 @@ snapshots:
 
   svg-arc-to-cubic-bezier@3.2.0: {}
 
-  swc-loader@0.2.6(@swc/core@1.13.5(@swc/helpers@0.5.17))(webpack@5.101.3(@swc/core@1.13.5(@swc/helpers@0.5.17))(esbuild@0.25.0)):
+  swc-loader@0.2.6(@swc/core@1.13.5(@swc/helpers@0.5.17))(webpack@5.104.1(@swc/core@1.13.5(@swc/helpers@0.5.17))):
     dependencies:
       '@swc/core': 1.13.5(@swc/helpers@0.5.17)
       '@swc/counter': 0.1.3
-      webpack: 5.101.3(@swc/core@1.13.5(@swc/helpers@0.5.17))(esbuild@0.25.0)
+      webpack: 5.104.1(@swc/core@1.13.5(@swc/helpers@0.5.17))
 
   swr@2.2.4(react@18.3.1):
     dependencies:
@@ -17719,54 +15894,22 @@ snapshots:
 
   tabbable@6.2.0: {}
 
-  tailwind-merge@2.6.0: {}
+  tailwind-merge@3.4.0: {}
 
-  tailwind-merge@3.3.1: {}
-
-  tailwindcss-animate@1.0.7(tailwindcss@3.4.17):
-    dependencies:
-      tailwindcss: 3.4.17
-
-  tailwindcss@3.4.17:
-    dependencies:
-      '@alloc/quick-lru': 5.2.0
-      arg: 5.0.2
-      chokidar: 3.6.0
-      didyoumean: 1.2.2
-      dlv: 1.1.3
-      fast-glob: 3.3.3
-      glob-parent: 6.0.2
-      is-glob: 4.0.3
-      jiti: 1.21.7
-      lilconfig: 3.1.3
-      micromatch: 4.0.8
-      normalize-path: 3.0.0
-      object-hash: 3.0.0
-      picocolors: 1.1.1
-      postcss: 8.5.6
-      postcss-import: 15.1.0(postcss@8.5.6)
-      postcss-js: 4.0.1(postcss@8.5.6)
-      postcss-load-config: 4.0.2(postcss@8.5.6)
-      postcss-nested: 6.2.0(postcss@8.5.6)
-      postcss-selector-parser: 6.1.2
-      resolve: 1.22.10
-      sucrase: 3.35.0
-    transitivePeerDependencies:
-      - ts-node
+  tailwindcss@4.1.17: {}
 
   tapable@2.3.0: {}
 
-  terser-webpack-plugin@5.3.14(@swc/core@1.13.5(@swc/helpers@0.5.17))(esbuild@0.25.0)(webpack@5.101.3(@swc/core@1.13.5(@swc/helpers@0.5.17))(esbuild@0.25.0)):
+  terser-webpack-plugin@5.3.16(@swc/core@1.13.5(@swc/helpers@0.5.17))(webpack@5.104.1(@swc/core@1.13.5(@swc/helpers@0.5.17))):
     dependencies:
       '@jridgewell/trace-mapping': 0.3.31
       jest-worker: 27.5.1
-      schema-utils: 4.3.2
-      serialize-javascript: 6.0.2
+      schema-utils: 4.3.3
+      serialize-javascript: 7.0.5
       terser: 5.43.1
-      webpack: 5.101.3(@swc/core@1.13.5(@swc/helpers@0.5.17))(esbuild@0.25.0)
+      webpack: 5.104.1(@swc/core@1.13.5(@swc/helpers@0.5.17))
     optionalDependencies:
       '@swc/core': 1.13.5(@swc/helpers@0.5.17)
-      esbuild: 0.25.0
 
   terser@5.43.1:
     dependencies:
@@ -17779,14 +15922,6 @@ snapshots:
 
   thenby@1.3.4: {}
 
-  thenify-all@1.6.0:
-    dependencies:
-      thenify: 3.3.1
-
-  thenify@3.3.1:
-    dependencies:
-      any-promise: 1.3.0
-
   tiny-inflate@1.0.3: {}
 
   tiny-invariant@1.3.3: {}
@@ -17795,14 +15930,14 @@ snapshots:
 
   tinycolor2@1.6.0: {}
 
-  tinyexec@1.0.1: {}
-
-  tinyexec@1.0.2: {}
+  tinyexec@1.0.4: {}
 
   tinyglobby@0.2.15:
     dependencies:
-      fdir: 6.5.0(picomatch@4.0.3)
-      picomatch: 4.0.3
+      fdir: 6.5.0(picomatch@2.3.2)
+      picomatch: 2.3.2
+
+  tinypool@2.1.0: {}
 
   tinyrainbow@1.2.0: {}
 
@@ -17822,7 +15957,7 @@ snapshots:
     dependencies:
       '@tiptap/core': 2.26.3(@tiptap/pm@2.26.1)
       '@types/markdown-it': 13.0.9
-      markdown-it: 14.1.0
+      markdown-it: 14.1.1
       markdown-it-task-lists: 2.1.1
       prosemirror-markdown: 1.13.2
 
@@ -17870,54 +16005,37 @@ snapshots:
 
   trough@2.2.0: {}
 
-  ts-api-utils@2.1.0(typescript@5.8.3):
-    dependencies:
-      typescript: 5.8.3
-
-  ts-declaration-location@1.0.7(typescript@5.8.3):
-    dependencies:
-      picomatch: 4.0.3
-      typescript: 5.8.3
-
   ts-dedent@2.2.0: {}
 
-  ts-interface-checker@0.1.13: {}
-
   tsconfck@3.1.6(typescript@5.8.3):
     optionalDependencies:
       typescript: 5.8.3
 
-  tsconfig-paths@3.15.0:
-    dependencies:
-      '@types/json5': 0.0.29
-      json5: 1.0.2
-      minimist: 1.2.8
-      strip-bom: 3.0.0
-
   tsconfig-paths@4.2.0:
     dependencies:
       json5: 2.2.3
       minimist: 1.2.8
       strip-bom: 3.0.0
 
-  tsdown@0.16.0(typescript@5.8.3):
+  tsdown@0.16.0(typescript@5.8.3)(unrun@0.2.34):
     dependencies:
       ansis: 4.2.0
       cac: 6.7.14
       chokidar: 3.6.0
       debug: 4.4.3
-      diff: 8.0.2
+      diff: 5.2.2
       empathic: 2.0.0
       hookable: 5.5.3
       rolldown: 1.0.0-beta.46
       rolldown-plugin-dts: 0.17.8(rolldown@1.0.0-beta.46)(typescript@5.8.3)
-      semver: 7.7.3
-      tinyexec: 1.0.1
+      semver: 7.7.4
+      tinyexec: 1.0.4
       tinyglobby: 0.2.15
       tree-kill: 1.2.2
-      unconfig: 7.3.3
+      unconfig: 7.5.0
     optionalDependencies:
       typescript: 5.8.3
+      unrun: 0.2.34
     transitivePeerDependencies:
       - '@ts-macro/tsc'
       - '@typescript/native-preview'
@@ -17929,39 +16047,17 @@ snapshots:
 
   tslib@2.8.1: {}
 
-  turbo-darwin-64@2.6.3:
-    optional: true
-
-  turbo-darwin-arm64@2.6.3:
-    optional: true
-
-  turbo-linux-64@2.6.3:
-    optional: true
-
-  turbo-linux-arm64@2.6.3:
-    optional: true
-
-  turbo-windows-64@2.6.3:
-    optional: true
-
-  turbo-windows-arm64@2.6.3:
-    optional: true
-
-  turbo@2.6.3:
+  turbo@2.9.4:
     optionalDependencies:
-      turbo-darwin-64: 2.6.3
-      turbo-darwin-arm64: 2.6.3
-      turbo-linux-64: 2.6.3
-      turbo-linux-arm64: 2.6.3
-      turbo-windows-64: 2.6.3
-      turbo-windows-arm64: 2.6.3
+      '@turbo/darwin-64': 2.9.4
+      '@turbo/darwin-arm64': 2.9.4
+      '@turbo/linux-64': 2.9.4
+      '@turbo/linux-arm64': 2.9.4
+      '@turbo/windows-64': 2.9.4
+      '@turbo/windows-arm64': 2.9.4
 
   tween-functions@1.2.0: {}
 
-  type-check@0.4.0:
-    dependencies:
-      prelude-ls: 1.2.1
-
   type-fest@2.19.0: {}
 
   type-is@1.6.18:
@@ -17969,74 +16065,31 @@ snapshots:
       media-typer: 0.3.0
       mime-types: 2.1.35
 
-  typed-array-buffer@1.0.3:
-    dependencies:
-      call-bound: 1.0.4
-      es-errors: 1.3.0
-      is-typed-array: 1.1.15
-
-  typed-array-byte-length@1.0.3:
-    dependencies:
-      call-bind: 1.0.8
-      for-each: 0.3.5
-      gopd: 1.2.0
-      has-proto: 1.2.0
-      is-typed-array: 1.1.15
-
-  typed-array-byte-offset@1.0.4:
-    dependencies:
-      available-typed-arrays: 1.0.7
-      call-bind: 1.0.8
-      for-each: 0.3.5
-      gopd: 1.2.0
-      has-proto: 1.2.0
-      is-typed-array: 1.1.15
-      reflect.getprototypeof: 1.0.10
-
-  typed-array-length@1.0.7:
-    dependencies:
-      call-bind: 1.0.8
-      for-each: 0.3.5
-      gopd: 1.2.0
-      is-typed-array: 1.1.15
-      possible-typed-array-names: 1.1.0
-      reflect.getprototypeof: 1.0.10
-
   typed-styles@0.0.7: {}
 
-  typescript-eslint@8.48.1(eslint@9.39.1(jiti@2.5.1))(typescript@5.8.3):
-    dependencies:
-      '@typescript-eslint/eslint-plugin': 8.48.1(@typescript-eslint/parser@8.48.1(eslint@9.39.1(jiti@2.5.1))(typescript@5.8.3))(eslint@9.39.1(jiti@2.5.1))(typescript@5.8.3)
-      '@typescript-eslint/parser': 8.48.1(eslint@9.39.1(jiti@2.5.1))(typescript@5.8.3)
-      '@typescript-eslint/typescript-estree': 8.48.1(typescript@5.8.3)
-      '@typescript-eslint/utils': 8.48.1(eslint@9.39.1(jiti@2.5.1))(typescript@5.8.3)
-      eslint: 9.39.1(jiti@2.5.1)
-      typescript: 5.8.3
-    transitivePeerDependencies:
-      - supports-color
-
   typescript@5.8.3: {}
 
   uc.micro@2.1.0: {}
 
   uint8array-extras@1.5.0: {}
 
-  unbox-primitive@1.1.0:
+  unconfig-core@7.5.0:
     dependencies:
-      call-bound: 1.0.4
-      has-bigints: 1.1.0
-      has-symbols: 1.1.0
-      which-boxed-primitive: 1.1.1
+      '@quansync/fs': 1.0.0
+      quansync: 1.0.0
 
-  unconfig@7.3.3:
+  unconfig@7.5.0:
     dependencies:
-      '@quansync/fs': 0.1.5
-      defu: 6.1.4
-      jiti: 2.5.1
-      quansync: 0.2.11
+      '@quansync/fs': 1.0.0
+      defu: 6.1.5
+      jiti: 2.6.1
+      quansync: 1.0.0
+      unconfig-core: 7.5.0
 
   undici-types@6.20.0: {}
 
+  undici@7.24.0: {}
+
   unicode-properties@1.4.1:
     dependencies:
       base64-js: 1.5.1
@@ -18120,45 +16173,19 @@ snapshots:
 
   unpipe@1.0.0: {}
 
-  unplugin@1.0.1:
-    dependencies:
-      acorn: 8.15.0
-      chokidar: 3.6.0
-      webpack-sources: 3.3.3
-      webpack-virtual-modules: 0.5.0
-
   unplugin@1.16.1:
     dependencies:
       acorn: 8.15.0
       webpack-virtual-modules: 0.6.2
 
-  unrs-resolver@1.11.1:
+  unrun@0.2.34:
     dependencies:
-      napi-postinstall: 0.3.3
-    optionalDependencies:
-      '@unrs/resolver-binding-android-arm-eabi': 1.11.1
-      '@unrs/resolver-binding-android-arm64': 1.11.1
-      '@unrs/resolver-binding-darwin-arm64': 1.11.1
-      '@unrs/resolver-binding-darwin-x64': 1.11.1
-      '@unrs/resolver-binding-freebsd-x64': 1.11.1
-      '@unrs/resolver-binding-linux-arm-gnueabihf': 1.11.1
-      '@unrs/resolver-binding-linux-arm-musleabihf': 1.11.1
-      '@unrs/resolver-binding-linux-arm64-gnu': 1.11.1
-      '@unrs/resolver-binding-linux-arm64-musl': 1.11.1
-      '@unrs/resolver-binding-linux-ppc64-gnu': 1.11.1
-      '@unrs/resolver-binding-linux-riscv64-gnu': 1.11.1
-      '@unrs/resolver-binding-linux-riscv64-musl': 1.11.1
-      '@unrs/resolver-binding-linux-s390x-gnu': 1.11.1
-      '@unrs/resolver-binding-linux-x64-gnu': 1.11.1
-      '@unrs/resolver-binding-linux-x64-musl': 1.11.1
-      '@unrs/resolver-binding-wasm32-wasi': 1.11.1
-      '@unrs/resolver-binding-win32-arm64-msvc': 1.11.1
-      '@unrs/resolver-binding-win32-ia32-msvc': 1.11.1
-      '@unrs/resolver-binding-win32-x64-msvc': 1.11.1
+      rolldown: 1.0.0-rc.12
+    optional: true
 
-  update-browserslist-db@1.1.3(browserslist@4.26.2):
+  update-browserslist-db@1.2.3(browserslist@4.28.1):
     dependencies:
-      browserslist: 4.26.2
+      browserslist: 4.28.1
       escalade: 3.2.0
       picocolors: 1.1.1
 
@@ -18182,7 +16209,7 @@ snapshots:
   url@0.11.4:
     dependencies:
       punycode: 1.4.1
-      qs: 6.14.0
+      qs: 6.14.2
 
   use-callback-ref@1.3.3(@types/react@18.3.11)(react@18.3.1):
     dependencies:
@@ -18231,7 +16258,7 @@ snapshots:
   uvu@0.5.6:
     dependencies:
       dequal: 2.0.3
-      diff: 5.2.0
+      diff: 5.2.2
       kleur: 4.1.5
       sade: 1.8.1
 
@@ -18239,13 +16266,6 @@ snapshots:
     optionalDependencies:
       typescript: 5.8.3
 
-  validate-npm-package-license@3.0.4:
-    dependencies:
-      spdx-correct: 3.2.0
-      spdx-expression-parse: 3.0.1
-
-  validate-npm-package-name@5.0.1: {}
-
   vary@1.1.2: {}
 
   vfile-location@5.0.3:
@@ -18298,13 +16318,13 @@ snapshots:
       string_decoder: 1.3.0
       util-deprecate: 1.0.2
 
-  vite-node@3.2.4(@types/node@22.12.0)(jiti@2.5.1)(terser@5.43.1)(yaml@2.8.1):
+  vite-node@3.2.4(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3):
     dependencies:
       cac: 6.7.14
       debug: 4.4.3
       es-module-lexer: 1.7.0
       pathe: 2.0.3
-      vite: 7.1.11(@types/node@22.12.0)(jiti@2.5.1)(terser@5.43.1)(yaml@2.8.1)
+      vite: 7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3)
     transitivePeerDependencies:
       - '@types/node'
       - jiti
@@ -18319,36 +16339,37 @@ snapshots:
       - tsx
       - yaml
 
-  vite-tsconfig-paths@5.1.4(typescript@5.8.3)(vite@7.1.11(@types/node@22.12.0)(jiti@2.5.1)(terser@5.43.1)(yaml@2.8.1)):
+  vite-tsconfig-paths@5.1.4(typescript@5.8.3)(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3)):
     dependencies:
       debug: 4.4.3
       globrex: 0.1.2
       tsconfck: 3.1.6(typescript@5.8.3)
     optionalDependencies:
-      vite: 7.1.11(@types/node@22.12.0)(jiti@2.5.1)(terser@5.43.1)(yaml@2.8.1)
+      vite: 7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3)
     transitivePeerDependencies:
       - supports-color
       - typescript
 
-  vite@7.1.11(@types/node@22.12.0)(jiti@2.5.1)(terser@5.43.1)(yaml@2.8.1):
+  vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3):
     dependencies:
       esbuild: 0.25.0
-      fdir: 6.5.0(picomatch@4.0.3)
-      picomatch: 4.0.3
+      fdir: 6.5.0(picomatch@2.3.2)
+      picomatch: 2.3.2
       postcss: 8.5.6
-      rollup: 4.52.4
+      rollup: 4.59.0
       tinyglobby: 0.2.15
     optionalDependencies:
       '@types/node': 22.12.0
       fsevents: 2.3.3
-      jiti: 2.5.1
+      jiti: 2.6.1
+      lightningcss: 1.30.2
       terser: 5.43.1
-      yaml: 2.8.1
+      yaml: 2.8.3
 
-  vitest@4.0.15(@opentelemetry/api@1.9.0)(@types/node@22.12.0)(jiti@2.5.1)(jsdom@25.0.1)(terser@5.43.1)(yaml@2.8.1):
+  vitest@4.0.15(@opentelemetry/api@1.9.0)(@types/node@22.12.0)(jiti@2.6.1)(jsdom@26.1.0)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3):
     dependencies:
       '@vitest/expect': 4.0.15
-      '@vitest/mocker': 4.0.15(vite@7.1.11(@types/node@22.12.0)(jiti@2.5.1)(terser@5.43.1)(yaml@2.8.1))
+      '@vitest/mocker': 4.0.15(vite@7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3))
       '@vitest/pretty-format': 4.0.15
       '@vitest/runner': 4.0.15
       '@vitest/snapshot': 4.0.15
@@ -18359,18 +16380,18 @@ snapshots:
       magic-string: 0.30.21
       obug: 2.1.1
       pathe: 2.0.3
-      picomatch: 4.0.3
+      picomatch: 2.3.2
       std-env: 3.10.0
       tinybench: 2.9.0
-      tinyexec: 1.0.2
+      tinyexec: 1.0.4
       tinyglobby: 0.2.15
       tinyrainbow: 3.0.3
-      vite: 7.1.11(@types/node@22.12.0)(jiti@2.5.1)(terser@5.43.1)(yaml@2.8.1)
+      vite: 7.3.1(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.3)
       why-is-node-running: 2.3.0
     optionalDependencies:
       '@opentelemetry/api': 1.9.0
       '@types/node': 22.12.0
-      jsdom: 25.0.1
+      jsdom: 26.1.0
     transitivePeerDependencies:
       - jiti
       - less
@@ -18402,22 +16423,20 @@ snapshots:
 
   web-namespaces@2.0.1: {}
 
-  web-vitals@4.2.4: {}
-
   webidl-conversions@3.0.1: {}
 
   webidl-conversions@7.0.0:
     optional: true
 
-  webpack-dev-middleware@6.1.3(webpack@5.101.3(@swc/core@1.13.5(@swc/helpers@0.5.17))(esbuild@0.25.0)):
+  webpack-dev-middleware@6.1.3(webpack@5.104.1(@swc/core@1.13.5(@swc/helpers@0.5.17))):
     dependencies:
       colorette: 2.0.20
       memfs: 3.5.3
       mime-types: 2.1.35
       range-parser: 1.2.1
-      schema-utils: 4.3.2
+      schema-utils: 4.3.3
     optionalDependencies:
-      webpack: 5.101.3(@swc/core@1.13.5(@swc/helpers@0.5.17))(esbuild@0.25.0)
+      webpack: 5.104.1(@swc/core@1.13.5(@swc/helpers@0.5.17))
 
   webpack-hot-middleware@2.26.1:
     dependencies:
@@ -18427,11 +16446,9 @@ snapshots:
 
   webpack-sources@3.3.3: {}
 
-  webpack-virtual-modules@0.5.0: {}
-
   webpack-virtual-modules@0.6.2: {}
 
-  webpack@5.101.3(@swc/core@1.13.5(@swc/helpers@0.5.17))(esbuild@0.25.0):
+  webpack@5.104.1(@swc/core@1.13.5(@swc/helpers@0.5.17)):
     dependencies:
       '@types/eslint-scope': 3.7.7
       '@types/estree': 1.0.8
@@ -18441,21 +16458,21 @@ snapshots:
       '@webassemblyjs/wasm-parser': 1.14.1
       acorn: 8.15.0
       acorn-import-phases: 1.0.4(acorn@8.15.0)
-      browserslist: 4.26.2
+      browserslist: 4.28.1
       chrome-trace-event: 1.0.4
       enhanced-resolve: 5.18.3
-      es-module-lexer: 1.7.0
+      es-module-lexer: 2.0.0
       eslint-scope: 5.1.1
       events: 3.3.0
       glob-to-regexp: 0.4.1
       graceful-fs: 4.2.11
       json-parse-even-better-errors: 2.3.1
-      loader-runner: 4.3.0
+      loader-runner: 4.3.1
       mime-types: 2.1.35
       neo-async: 2.6.2
-      schema-utils: 4.3.2
+      schema-utils: 4.3.3
       tapable: 2.3.0
-      terser-webpack-plugin: 5.3.14(@swc/core@1.13.5(@swc/helpers@0.5.17))(esbuild@0.25.0)(webpack@5.101.3(@swc/core@1.13.5(@swc/helpers@0.5.17))(esbuild@0.25.0))
+      terser-webpack-plugin: 5.3.16(@swc/core@1.13.5(@swc/helpers@0.5.17))(webpack@5.104.1(@swc/core@1.13.5(@swc/helpers@0.5.17)))
       watchpack: 2.4.4
       webpack-sources: 3.3.3
     transitivePeerDependencies:
@@ -18482,37 +16499,6 @@ snapshots:
       tr46: 0.0.3
       webidl-conversions: 3.0.1
 
-  which-boxed-primitive@1.1.1:
-    dependencies:
-      is-bigint: 1.1.0
-      is-boolean-object: 1.2.2
-      is-number-object: 1.1.1
-      is-string: 1.1.1
-      is-symbol: 1.1.1
-
-  which-builtin-type@1.2.1:
-    dependencies:
-      call-bound: 1.0.4
-      function.prototype.name: 1.1.8
-      has-tostringtag: 1.0.2
-      is-async-function: 2.1.1
-      is-date-object: 1.1.0
-      is-finalizationregistry: 1.1.1
-      is-generator-function: 1.1.0
-      is-regex: 1.2.1
-      is-weakref: 1.1.1
-      isarray: 2.0.5
-      which-boxed-primitive: 1.1.1
-      which-collection: 1.0.2
-      which-typed-array: 1.1.19
-
-  which-collection@1.0.2:
-    dependencies:
-      is-map: 2.0.3
-      is-set: 2.0.3
-      is-weakmap: 2.0.2
-      is-weakset: 2.0.4
-
   which-typed-array@1.1.19:
     dependencies:
       available-typed-arrays: 1.0.7
@@ -18527,14 +16513,6 @@ snapshots:
     dependencies:
       isexe: 2.0.0
 
-  which@3.0.1:
-    dependencies:
-      isexe: 2.0.0
-
-  which@4.0.0:
-    dependencies:
-      isexe: 3.1.1
-
   why-is-node-running@2.3.0:
     dependencies:
       siginfo: 2.0.0
@@ -18564,8 +16542,6 @@ snapshots:
       triple-beam: 1.4.1
       winston-transport: 4.9.0
 
-  word-wrap@1.2.5: {}
-
   wrap-ansi@7.0.0:
     dependencies:
       ansi-styles: 4.3.0
@@ -18580,9 +16556,9 @@ snapshots:
 
   wrap-ansi@9.0.0:
     dependencies:
-      ansi-styles: 6.2.1
+      ansi-styles: 6.2.3
       string-width: 7.2.0
-      strip-ansi: 7.1.0
+      strip-ansi: 7.1.2
 
   write-file-atomic@5.0.1:
     dependencies:
@@ -18599,8 +16575,6 @@ snapshots:
   xmlchars@2.2.0:
     optional: true
 
-  xtend@4.0.2: {}
-
   y-indexeddb@9.0.12(yjs@13.6.27):
     dependencies:
       lib0: 0.2.114
@@ -18624,9 +16598,9 @@ snapshots:
 
   yallist@3.1.1: {}
 
-  yaml@1.10.2: {}
+  yaml@1.10.3: {}
 
-  yaml@2.8.1: {}
+  yaml@2.8.3: {}
 
   yargs-parser@21.1.1: {}
 
@@ -18650,15 +16624,13 @@ snapshots:
 
   yoga-layout@2.0.1: {}
 
+  yoga-layout@3.2.1: {}
+
   zeed-dom@0.15.1:
     dependencies:
       css-what: 6.2.2
       entities: 5.0.0
 
-  zod-validation-error@4.0.2(zod@3.25.76):
-    dependencies:
-      zod: 3.25.76
-
   zod@3.25.76: {}
 
   zwitch@2.0.4: {}
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index b85c8612e..b20c3be19 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -9,35 +9,31 @@ catalog:
   "@atlaskit/pragmatic-drag-and-drop-hitbox": 1.1.0
   "@atlaskit/pragmatic-drag-and-drop": 1.7.4
   "@bprogress/core": ^1.3.4
-  "@dotenvx/dotenvx": 1.51.1
-  "@react-router/dev": 7.9.5
-  "@react-router/node": 7.9.5
-  "@react-router/serve": 7.9.5
-  "@sentry/node": 10.27.0
-  "@sentry/profiling-node": 10.27.0
-  "@sentry/react-router": 10.27.0
+  "dotenv": 16.4.7
+  "@react-router/dev": 7.13.1
+  "@react-router/node": 7.13.1
+  "@react-router/serve": 7.13.1
   "@tiptap/core": ^2.22.3
   "@tiptap/html": ^2.22.3
   "@types/lodash-es": 4.17.12
   "@types/node": 22.12.0
   "@types/react-dom": 18.3.1
   "@types/react": 18.3.11
-  axios: 1.12.0
+  axios: 1.13.5
   express: 4.22.0
-  lodash-es: 4.17.21
+  lodash-es: 4.18.0
   lucide-react: 0.469.0
   mobx-react: 9.1.1
   mobx-utils: 6.0.8
   mobx: 6.12.0
   react-dom: 18.3.1
-  react-router-dom: 7.9.5
-  react-router: 7.9.5
+  react-router: 7.12.0
   react: 18.3.1
   swr: 2.2.4
   tsdown: 0.16.0
   typescript: 5.8.3
   uuid: 13.0.0
-  vite: 7.1.11
+  vite: 7.3.1
 
 onlyBuiltDependencies:
 - turbo
diff --git a/turbo.json b/turbo.json
index 9c96eae75..a63e0fdf7 100644
--- a/turbo.json
+++ b/turbo.json
@@ -1,85 +1,93 @@
 {
-  "$schema": "https://turbo.build/schema.json",
+  "$schema": "https://v2-8-12.turborepo.dev/schema.json",
+  "globalDependencies": [".npmrc", ".oxfmtrc.json", ".oxlintrc.json"],
   "globalEnv": [
+    "APP_VERSION",
+    "DEV",
+    "LOG_LEVEL",
     "NODE_ENV",
-    "VITE_API_BASE_URL",
-    "VITE_ADMIN_BASE_URL",
+    "SENTRY_DSN",
+    "SENTRY_ENVIRONMENT",
+    "SENTRY_TRACES_SAMPLE_RATE",
     "VITE_ADMIN_BASE_PATH",
-    "VITE_SPACE_BASE_URL",
-    "VITE_SPACE_BASE_PATH",
-    "VITE_WEB_BASE_URL",
-    "VITE_LIVE_BASE_URL",
-    "VITE_LIVE_BASE_PATH",
+    "VITE_ADMIN_BASE_URL",
+    "VITE_API_BASE_PATH",
+    "VITE_API_BASE_URL",
+    "VITE_APP_VERSION",
     "VITE_ENABLE_SESSION_RECORDER",
-    "VITE_SESSION_RECORDER_KEY",
-    "VITE_POSTHOG_KEY",
-    "VITE_POSTHOG_HOST",
-    "VITE_POSTHOG_DEBUG",
-    "VITE_SUPPORT_EMAIL",
-    "ENABLE_EXPERIMENTAL_COREPACK",
+    "VITE_LIVE_BASE_PATH",
+    "VITE_LIVE_BASE_URL",
     "VITE_SENTRY_DSN",
     "VITE_SENTRY_ENVIRONMENT",
+    "VITE_SENTRY_PROFILES_SAMPLE_RATE",
+    "VITE_SENTRY_REPLAYS_ON_ERROR_SAMPLE_RATE",
+    "VITE_SENTRY_REPLAYS_SESSION_SAMPLE_RATE",
     "VITE_SENTRY_SEND_DEFAULT_PII",
     "VITE_SENTRY_TRACES_SAMPLE_RATE",
-    "VITE_SENTRY_PROFILES_SAMPLE_RATE",
-    "VITE_SENTRY_REPLAYS_SESSION_SAMPLE_RATE",
-    "VITE_SENTRY_REPLAYS_ON_ERROR_SAMPLE_RATE",
-    "VITE_APP_VERSION"
+    "VITE_SESSION_RECORDER_KEY",
+    "VITE_SPACE_BASE_PATH",
+    "VITE_SPACE_BASE_URL",
+    "VITE_SUPPORT_EMAIL",
+    "VITE_WEB_BASE_PATH",
+    "VITE_WEB_BASE_URL",
+    "VITE_WEBSITE_URL"
   ],
-  "globalDependencies": ["pnpm-lock.yaml", "pnpm-workspace.yaml", ".npmrc"],
+  "remoteCache": {
+    "enabled": false
+  },
   "tasks": {
     "build": {
       "dependsOn": ["^build"],
-      "outputs": ["dist/**", "build/**"]
+      "inputs": ["$TURBO_DEFAULT$", ".env*"],
+      "outputs": ["dist/**", "build/**", ".react-router/**"]
     },
     "build-storybook": {
       "dependsOn": ["^build"],
       "outputs": ["storybook-static/**"]
     },
-    "dev": {
-      "dependsOn": ["^build"],
-      "cache": false,
-      "persistent": true
+    "check": {
+      "dependsOn": ["check:format", "check:lint", "check:types"]
+    },
+    "check:format": {
+      "inputs": ["$TURBO_DEFAULT$"],
+      "outputs": []
+    },
+    "check:lint": {
+      "inputs": ["$TURBO_DEFAULT$", "!**/*.md"],
+      "outputs": []
     },
     "check:types": {
       "dependsOn": ["^build"],
+      "inputs": ["$TURBO_DEFAULT$", "!**/*.md"],
+      "outputs": []
+    },
+    "clean": {
       "cache": false
     },
-    "lint": {
+    "dev": {
       "cache": false,
-      "inputs": ["**/*.{js,ts,tsx,mjs,jsx}", "!**/node_modules/**", "!**/build/**", "!**/dist/**"]
-    },
-    "check:lint": {
-      "dependsOn": ["lint"],
-      "cache": false,
-      "inputs": ["**/*.{js,ts,tsx,mjs,jsx}", "!**/build/**", "!**/dist/**"]
-    },
-    "check:format": {
-      "cache": false
-    },
-    "check": {
-      "dependsOn": ["check:format", "check:lint", "check:types"],
-      "cache": false
-    },
-    "fix:lint": {
-      "cache": false
-    },
-    "fix:format": {
-      "cache": false
+      "dependsOn": ["^build"],
+      "persistent": true
     },
     "fix": {
-      "dependsOn": ["fix:format", "fix:lint"],
-      "cache": false
+      "cache": false,
+      "dependsOn": ["fix:format", "fix:lint"]
+    },
+    "fix:format": {
+      "inputs": ["$TURBO_DEFAULT$"],
+      "outputs": []
+    },
+    "fix:lint": {
+      "inputs": ["$TURBO_DEFAULT$", "!**/*.md"],
+      "outputs": []
+    },
+    "start": {
+      "cache": false,
+      "persistent": true
     },
     "test": {
       "dependsOn": ["^build"],
       "outputs": []
-    },
-    "start": {
-      "cache": false
-    },
-    "clean": {
-      "cache": false
     }
   }
 }